body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Sans-Serif; /* Standard-Schriftart */
    margin: 0;
    padding: 0;
    background-color: #fff; /* Weißer Hintergrund */
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 0; /* Entfernen des Paddings, da wir absolut positionieren */
    height: 109px; /* Höhe des Bildes festlegen, um den Header-Bereich zu definieren */
}

h4 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Sans-Serif;
    font-size: 1.1em; /* Hier die gewünschte Schriftgröße einfügen */
    color: #2d441c;
}

strong {
    font-weight:bold; 
    color: #333;
}

a {
    text-decoration: none;
    color: #a674ac;
}


.header-image {
    position: absolute;
    top: 0;
    right: 0;
}

.header-image img {
    display: block; /* Verhindert unnötigen Abstand */
    width: 100%; /* Breite des Bildes an den Header anpassen */
    height: auto; /* Höhe proportional zur Breite anpassen */
}

.top-navigation {
    position: absolute; /* Um es über dem Bild zu positionieren */
    top: 50%; /* Vertikal zentrieren (ungefähr) */
    left: 790px; /* Abstand vom linken Rand */
    transform: translateY(-100%); /* Exakte vertikale Zentrierung */
}

.top-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.top-navigation li {
    margin-left: 0px;
}

.top-navigation a {
    text-decoration: none;
    font-size: 1.1em; /* Hier die gewünschte Schriftgröße einfügen */
    color: #ebebeb;
}

/* START MAIN */

main {
    padding-top: 111px; /* Platz für den fixierten Header schaffen */
    padding-bottom: 35px; /* Platz für die fixierte Bottom-Navigation schaffen */
    overflow-y: auto; /* Ermöglicht vertikales Scrollen */
    min-height: 50vh; /* Beispielhafte Mindesthöhe - anpassen! */ 
}

/* BILD */

.hero {
    position: relative; /* Für die absolute Positionierung der Kinder */
    padding: 20px;
    margin-bottom: 30px;
    min-height: calc(100vh - 50px - 45px); /* Beispielhafte Höhe des sichtbaren Bereichs */
    display: block; /* Ändern von flex auf block */
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: auto; /* Ursprüngliche Breite beibehalten */
    height: auto; /* Ursprüngliche Höhe beibehalten */
    max-width: 100%; /* Nie breiter als der Eltercontainer */
    max-height: 100%; /* Nie höher als der Eltercontainer */
    z-index: 1; /* Bild unter dem Text */
    /* Optional: Zentrierung des Bildes, falls es kleiner ist */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image img {
    display: block;
    width: auto; /* Ursprüngliche Breite beibehalten */
    height: auto; /* Ursprüngliche Höhe beibehalten */
    max-width: 100%; /* Nie breiter als der Eltercontainer */
    max-height: 100%; /* Nie höher als der Eltercontainer */
    object-fit: contain; /* Stellt sicher, dass das gesamte Bild sichtbar ist, mit Leerräumen falls nötig */
}

/* TEXT */

.date, .time, .location {
    position: absolute; /* Für die freie Positionierung */
    color: #2d441c;
    text-align: right;
    z-index: 2; /* Über dem Bild */
}

.date {
    top: 3.5%;
    right: 5%;
    font-size: 2.6em;
    font-weight: bold;
    margin-bottom: 0; /* Entferne unnötigen Abstand */
}

.time {
    top: 16%;
    right: 5%;
    font-size: 1.2em;
    margin-bottom: 0; /* Entferne unnötigen Abstand */
}

.event-title {
    position: absolute;
    top: 40%;
    left: 70%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    color: #2d441c;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    z-index: 2;
}

.event-title-container {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.event-title-line {
    font-size: 2.5em;
    color: #77f049;
    white-space: nowrap; /* Verhindert Umbruch innerhalb der Zeile */
}


.location {
    bottom: 27%;
    right: 3%;
    font-size: 1.2em;
    margin-bottom: 0; /* Entferne unnötigen Abstand */
}

/* PFEIL NACH UNTEN */

.arrow-down {
    display: flex; /* Für die Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    margin-top: -180px; /* Optional: Abstand zum Hero-Bereich */
    margin-bottom: 0px; /* Optional: Abstand zum nächsten Abschnitt */
}

.arrow-down img {
    display: block; /* Verhindert unnötigen Abstand */
    width: auto; /* Behält die Bildbreite bei */
    height: auto; /* Behält das Seitenverhältnis bei */
}

/* BEREICH FAN MEETUP */

#fan-meetup {
    scroll-margin-top: 154px; /* Header-Höhe (109px) + Pfeil-Bereich (45px) - anpassen, falls nötig */
}

.image-with-text-section { 
    position: relative;
    padding: calc(20px + 254px + 109px) 20px 40px 20px; /* Top-Padding angepasst */
    text-align: center;
    color: #2d441c; /* body */
}

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Bild unter dem Text */
}

.image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild füllt den Bereich */
}

.text-overlay {
    position: absolute;
    top: 40%;
    left: 72%;
    transform: translate(-50%, -50%); /* Zentriert den Text */
    z-index: 2; /* Text über dem Bild */
    /* background-color: rgba(255, 255, 255, 0.8); /* Optional: halbtransparenter Hintergrund für bessere Lesbarkeit */ */ 
    padding: 20px;
    border-radius: 10px; /* Optional: abgerundete Ecken */ 
    width: 100%; /* Beispielhafte Breite des Textbereichs */
    max-width: 600px; /* Maximale Breite */
    text-align: left; /* Zentriert den Textinhalt */
}

.text-overlay h2 {
    color: #77f049; /*  Überschriftenfarbe */
    margin-bottom: 0;
    font-size: 1.2em;
    margin-top: 0;
}

.text-overlay p {
    margin-bottom: 5px; /* Oder dein aktueller unterer Abstand */
    margin-top: 0; /* Entfernt den oberen Außenabstand */
}


/* BEREICH ANFAHRT */

#anfahrt {
    position: relative; /* Macht #anfahrt zum Bezugspunkt für absolute Positionierung */
    scroll-margin-top: 116px; /* Header-Höhe (109px) + Pfeil-Bereich (45px) - anpassen, falls nötig */
}

.anfahrt-karte {
    width: 100%;
    display: block;
    margin-top: 35px; 
}


.floating-image { /* ANFAHRT Headline */
    position: absolute;
    top: -70px; /* Beispielhafte vertikale Position - anpassen! */
    left: 730px; /* Beispielhafte horizontale Position - anpassen! */
    z-index: 2; /* Stellt sicher, dass es über anderen Elementen liegt */
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 200px;
}

.directions-container {
    display: flex; /* Für die nebeneinanderliegende Anordnung */
    gap: 20px; /* Abstand zwischen den Boxen */
    padding: 20px; /* Innenabstand um die Boxen */
    max-width: 960px; /* Beispielhafte maximale Breite des Containers */
    margin: 20px auto; /* Zentriert den Container horizontal */
    margin-top: -7px;
}

.direction-box {
    flex: 1; /* Gleichmäßige Breite der Boxen */
    padding: 20px;
    border-radius: 10px; /* Abgerundete Ecken */
    text-align: left; /* Flattersatz */
}

.direction-box.yellow {
    background-color: #ebebeb;
    color: #333; /* Textfarbe */
}

.direction-box.blue {
    background-color: #ebebeb;
    color: #333; /* Textfarbe */
}

.direction-box h3 {
    color: #77f049; /* Beispielhafte Farbe für die Unterüberschrift */
    margin-top: 0;
}

/* BEREICH TICKETS */

#tickets-content {
    scroll-margin-top: 150px; /* Diesen Wert musst du anpassen! */
}

#tickets-content .tickets-headline {
    text-align: center;
    color: #56266c;
    margin-bottom: 20px; /* Optionaler Abstand zum Bild */
}

.tickets-main-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 20px; /* Optionaler Abstand zu den Textblöcken */
    margin-top: -26px; /* Optionaler Abstand zum vorherigen Abschnitt */
}

/* BEREICH TICKETS (Schritt 2: Textblöcke) */

.tickets-image-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* Beginnt nach dem freien Drittel */
    align-items: flex-start;
    padding-left: 27%; /* Platz für das freie erste Drittel */
    margin-top: -420px;
    margin-bottom: 150px; /* Optionaler Abstand zum nächsten Abschnitt */
    max-width: 70%; /* Beispielhafte maximale Breite des Containers - anpassen! */
}

.ticket-info-block {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 20px;
    border-radius: 10px;
    text-align: left;
    z-index: 2; /* Über dem Bild (falls es sich überlappen sollte) */
    margin-right: 20px; /* Abstand zwischen den Blöcken */
    flex: 1; /* Gleichmäßige Breite der Blöcke */
}

.ticket-info-block.left {
    /* Keine spezielle Positionierung mehr notwendig */
}

.ticket-info-block.right {
    /* Keine spezielle Positionierung mehr notwendig */
}

.ticket-info-block h3 {
    color: #77f049; /* Headline color */
    margin-top: 0;
}

.ticket-info-block .button {
    display: inline-block;
    background-color: #77f049;
    color: white;
    padding: 2px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
}

/* BEREICH FESTIVAL */

#festival {
    scroll-margin-top: 110px; /* Diesen Wert musst du anpassen! */
}

.direction-box.first {
    background-color: #e8f8ff;
    color: #333; /* Textfarbe */
}

.direction-box.second {
    background-color: #fff4a7;
    color: #333; /* Textfarbe */
}

/* BEREICH ABOUT US */

#about-us {
    position: relative; /* Wichtig für absolute Positionierung der Kinder */
    margin-top: -35px;
    padding-bottom: 1px; /* Abstand zum nächsten Abschnitt */
}

.about-us-image-container {
    position: relative; /* Bezugspunkt für den Text-Overlay */
    width: 100%; /* Bild nimmt volle Breite des Containers ein */
    display: flex; /* Flexbox für den Container, um das Bild zu strecken */
    justify-content: center; /* Zentriert das Bild horizontal, falls es kleiner ist */
    margin-bottom: 1px; /* Abstand zum folgenden Inhalt, falls vorhanden */
}

.about-us-image {
    display: block;
    width: 100%; /* Bild nimmt die volle Breite des Containers ein */
    height: auto; /* Höhe proportional anpassen */
    object-fit: cover; /* Stellt sicher, dass das Bild den Bereich füllt und ggf. zuschneidet */
}

.about-us-text-overlay {
    position: absolute;
    top: 50%; /* Vertikal mittig auf dem Bild */
    left: 4%; /* Beispielhafte Positionierung im linken Drittel */
    transform: translateY(-50%); /* Vertikal zentrieren */
    width: 40%; /* Beispielhafte Breite des Textblocks (ein Drittel des Bildes) */
    background-color: rgba(255, 255, 255, 0.5); /* Halbtransparenter Hintergrund */
    padding: 15px;
    border-radius: 10px;
    text-align: left;
    z-index: 2; /* Text über dem Bild */
    max-width: 450px; /* Optional: Maximale Breite für bessere Lesbarkeit auf großen Bildschirmen */
}

.about-us-text-overlay p {
    color: #56266c; /* Textfarbe im Overlay */
    margin-bottom: 10px;
    line-height: 1.3;
}





/* DATENSCHUTZ */

.link a {
    
    color: #f49fbf; /* Textfarbe */
}



/* NAVI UNTEN */

.tickets-button {
    background-color: #ffc0cb; /* Helles Pink */
    color: #fff; /* Weiße Schrift */
    border: none;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 20px;
}


.bottom-navigation-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f4ebf3; /* Hintergrundfarbe hinter dem Bild */
    text-align: center; /* Zentriert das Bild */
    padding-top: 5px; /* Fügt 5px Padding oben hinzu */
    padding-bottom: 5px; /* Fügt 5px Padding unten hinzu */
    z-index: 3;
}

.bottom-navigation-container img {
    display: block;
    width: 100%;
    height: auto;
}

footer {
    text-align: center;
    padding: 20px;
    font-size: 0.8em;
    color: #777;
}






/* Styling für den FAQ-Bereich */


.faq-color h1 {
    text-align: center; /* Zentriert die Überschrift */
    color: #7AC6B6; 
    margin-top: 110px; /* Abstand nach oben, damit es nicht direkt am Header klebt */
    margin-bottom: 20px; /* Abstand nach unten zum FAQ-Bereich */
    font-size: 2.0em; /* Macht die Überschrift größer */
}

.faq-color h3 {
    text-align: center; /* Zentriert die Überschrift */
    color: #B687C1; 
    margin-bottom: 20px; /* Abstand nach unten zum FAQ-Bereich */
    font-size: 1.3em; /* Macht die Überschrift größer */
}

.faq-main-content {
    background-color: #F2EBF7; /* Das helle Lila für den FAQ-Bereich war #f8f0ff */
    padding-top: 40px;    /* Etwas Polsterung oben, damit der Inhalt nicht direkt am Lila-Rand klebt */
    padding-bottom: 10px; /* Etwas Polsterung unten */
}

.faq-section {
    max-width: 800px; /* Oder eine andere passende Breite */
    margin: 40px auto; /* Zentriert den Bereich und gibt etwas Abstand */
    padding: 0 20px; /* Innenabstand für kleinere Bildschirme */
}

.faq-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    background-color: #fff; /* Hintergrund der FAQ-Box */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.faq-question {
    display: block; /* Stellt sicher, dass der gesamte Bereich klickbar ist */
    padding: 20px;
    cursor: pointer;
    font-weight: bold;
    color: #333;
    position: relative; /* Für das Pfeil-Symbol */
    user-select: none; /* Verhindert das Markieren des Textes beim Klicken */
}

.faq-question::after {
    content: '+'; /* Plus-Symbol */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    line-height: 1;
    transition: transform 0.2s ease-in-out; /* Animation für den Pfeil */
}

/* Zustand, wenn das Akkordeon geöffnet ist */
.faq-item[open] .faq-question::after {
    content: '-'; /* Minus-Symbol */
    transform: translateY(-50%) rotate(0deg); /* Keine Drehung, nur Wechsel des Symbols */
}

.faq-item[open] .faq-question {
    border-bottom: 1px solid #eee; /* Trennlinie, wenn geöffnet */
}

.faq-answer {
    padding: 15px 20px 20px;
    color: #555;
    line-height: 1.6;
}

.faq-answer p {
    margin-top: 0;
    margin-bottom: 10px; /* Abstand zwischen Absätzen, falls mehr als einer */
}