@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
body {
    margin: 0;
    padding: 0;
    line-height: 1.6;
    min-height: 100vh; /* Stellt sicher, dass der Body mindestens die Höhe des Bildschirms hat */
    font-family: "Oswald", Arial, sans-serif;/* als Standardschrift *!*/
    color: #555c5f; /* Schönes Grau für Texte */
    position: relative; /* Basis für das Pseudo-Element */
    overflow-x: hidden; /* Verhindert horizontales Scrollen */

    background-color: rgba(200, 220, 210, 0.5);

}

[data-aos="fade-up"] {
    transform: translate3d(0, 15px, 0); /* Kürzere Strecke 100px is default */
}

/* Verhindert das Springen durch den Scrollbalken */
html {
    overflow-y: scroll; /* Scrollbalken immer anzeigen */
}

main {
    position: relative;
    max-width: 1500px;
    margin: 20px auto;
    /*padding: 0 20px;*/
    text-align: center;
    overflow: hidden;/
}

/* ✅ Hintergrund NUR für den Content fixieren */
html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    /*background-image: url("/assets/images/hintergrund-desktop.webp");*/
    /*opacity: 0.55;*/

    /*background-color: rgba(160, 155, 155, 0.42);*/

    /*background-color: rgba(0, 123, 95, 0.15);*/
    /*background-color: rgba(240, 235, 225, 0.6);*/

    /* !!! */
    /*background-color: rgba(200, 220, 210, 0.5);*/



    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    will-change: transform;
}

main h2 {
    font-size: 24px;
    margin-top: 20px;
}

/* Titel-Design (z. B. für Haupttitel und Kachel-Titel) */
h2, h3, .tile h3 {
    color: #007b5f; /* Schönes Grün (ähnlich Jekyll Cayman) */
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 600; /* Etwas fetter für Titel */
    margin-bottom: 10px; /* Abstand nach unten */
    text-align: center; /* Optional: Zentriert die Titel */
}

/* Inhalte und Beschreibungen */
p, .tile p {
    color: #555c5f; /* Schönes Grau für Texte */
    /*font-family: "Open Sans", Arial, sans-serif;*/
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 500; /* Macht die Schrift dicker */
    line-height: 1.6; /* Etwas mehr Zeilenhöhe für bessere Lesbarkeit */
    font-size: 18px; /* Standard-Schriftgröße */
    text-align: center; /* Optional: Zentriert die Inhalte */
}

.iframe-container {
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

iframe {
    width: 100%;
    height: 600px;
    border: none;
}

.email-highlight a {
    color: #014022 !important; /* Hellgrün */
    font-weight: bold;
    text-decoration: none;
}

.email-highlight a:hover {
    text-decoration: underline;
    color: #014022 !important; /* Etwas dunkleres Grün beim Hover */
}


#scrollTopBtn {
    z-index: 9999;
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3); /* Grauer Hintergrund mit 30% Transparenz */
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 32px; /* Größerer Pfeil */
    font-weight: normal; /* Kräftigerer Pfeil */
    line-height: 50px; /* Zentriert den Pfeil vertikal */
    text-align: center;
    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

/* Button sichtbar machen, wenn 100px gescrollt wurde */
#scrollTopBtn.show {
    display: block;
    opacity: 0.5;
    visibility: visible;
}

/* Hover-Effekt */
#scrollTopBtn:hover {
    background-color: rgba(0, 0, 0, 0.5); /* Etwas weniger transparent beim Hover */
    opacity: 0.8;
}
.aligned-content {
    padding-left: 15px;
    padding-right: 15px;
    /*text-align: center;*/
    max-width: 1000px; /* Optional: Setzt eine maximale Breite für bessere Lesbarkeit */
    margin: 0 auto; /* Zentriert den Block, aber der Text bleibt linksbündig */
}

.download-link {
    color: #004d26;
    font-weight: bold;
    text-decoration: none;
}

.download-link:hover {
    text-decoration: underline;
}


.gps-container {
    display: flex;
    flex-direction: column; /* 👈 sorgt dafür, dass der Button unter dem Text erscheint */
    align-items: center;     /* optional: zentriert beides */
    margin-top: 10px;        /* etwas Abstand nach oben */
    gap: 5px;                /* kleiner Abstand zwischen Zeilen */
}

.copy-gps-btn {
    padding: 5px 10px;
    font-size: 14px;
    border: none;
    background-color: #007b5f;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.copy-gps-btn:hover {
    background-color: #005f44;
}


/* Für Smartphones & Tablets */
@media screen and (max-width: 1024px) {
    main::before {
        background-size: cover;
        transform: translate3d(0, 0, 0);
    }

}

/* Für Smartphones & Tablets */
@media screen and (max-width: 800px) {
    main::before {
        background-size: cover;
        transform: translate3d(0, 0, 0);
    }

    html::before {
        background-image: none;
        /*opacity: 0.60;*/

        /*background-color: rgba(160, 155, 155, 0.42);*/

        /*background-color: rgba(0, 123, 95, 0.15);*/
        /*background-color: rgba(240, 235, 225, 0.6);*/

        /* !!! */
        background-color: rgba(200, 220, 210, 0.5);
    }
}