/* Grundlegende Mobile-Styles */
body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Sans-Serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
    padding-top: 70px; /* Muss an die tatsächliche Höhe deines fixierten Headers angepasst werden */
}

/* Globale Bild-Regel */
img {
    max-width: 100%; /* Bilder werden nie breiter als ihr Elternelement */
    height: auto; /* Höhe wird proportional angepasst */
    display: block; /* Wichtig: img-Elemente sollten 'display: block' sein, um 'margin: auto' zum Zentrieren nutzen zu können */
    /* Kein display: flex; hier */
}

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


/* Hilfsklasse für Barrierefreiheit */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* CONTAINER FÜR DEN GESAMTEN MOBILEN INHALT (Wird im HTML um <main> gelegt) */
.mobile-content-wrapper {
    max-width: 800px; /* Hier legst du die maximale Breite für den gesamten Hauptinhalt fest */
    margin-left: auto; /* Zentriert den Wrapper */
    margin-right: auto;
}

/* MOBILE HEADER */
.mobile-header {
    position: fixed; /* Header wird oben fixiert */
    top: 0;
    left: 0;
    width: 100%; /* Nimmt die volle Breite des Viewports ein, damit der Header sich über den Content-Wrapper legt */
    text-align: center; /* Text/Bilder im Header zentrieren */
    padding: 0;
    background-color: #fff; /* Hintergrundfarbe wie dein Desktop-Header */
    z-index: 100;
    /* Da der Header fixed ist, kann er die volle Breite des Viewports haben.
       Wenn du möchtest, dass auch der Header bei 800px aufhört und zentriert wird,
       musst du hier ebenfalls max-width und margin: auto setzen.
       Ich lasse ihn jetzt erstmal über die volle Breite gehen, wie es oft bei fixed Headern ist.
       Wenn er auch zentriert und bei 800px aufhören soll, füge hier hinzu:
       max-width: 800px;
       margin-left: auto;
       margin-right: auto;
    */
}

.mobile-header-image-container {
    width: 100%;
    text-align: center; /* Für den Fall, dass Text/Inline-Elemente im Container sind */
}

.mobile-logo {
    margin: 0 auto;
}

/* MOBILE HERO BEREICH */

.mobile-hero {
    position: relative;
    width: 100%; /* Wird durch den .mobile-content-wrapper begrenzt */
    overflow: hidden;
    margin-bottom: 30px;
}

.mobile-hero-image {
    margin-top: 23px;
    object-fit: cover;
    margin-left: auto; /* Zentriert das Bild innerhalb seines Containers */
    margin-right: auto;
}

.mobile-info-box {
    text-align: center;
    box-shadow: none;
    position: relative;
    z-index: 5;
    max-width: calc(100% - 30px); /* 100% der Elternbreite minus deine margins */
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

.mobile-event-title h1 {
    font-size: 2.5em;
    color: #f49fbf;
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
}

.mobile-date-time {
    font-size: 1.3em;
    font-weight: bold;
    color: #56266c;
    margin-top: 10px;
    margin-bottom: 5px;
}

.mobile-location {
    font-size: 1.1em;
    font-weight: bold;
    color: #56266c;
    margin-top: 10px;
    margin-bottom: 5px;
}

.mobile-location a {
    color: #f49fbf;
    text-decoration: none;
    font-weight: bold;
}

.mobile-tickets-button {
    display: block;
    width: calc(100% - 40px);
    margin: 20px auto 0 auto;
    background-color: #f49fbf;
    color: white;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1em;
    border: none;
    cursor: pointer;
}


/* FAN MEETUP (MOBIL) */


.kpop-fan-meetup-overlap-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;
}

.kpop-overlap-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative; /* Wichtig für z-index */
    z-index: 1; /* Bilder sind "vorne" (Ebene 1), liegen über dem Textkasten (Ebene 0) */
}

/* Spezifische Anpassung für das obere Bild */
.kpop-top-image {
    margin-top: 0;
}

/* Spezifische Anpassung für das untere Bild */
.kpop-bottom-image {
    margin-top: -60px; /* Dieser Wert muss feinabgestimmt werden */
}


.kpop-overlap-textbox {
    background-color: #fff4a7; /* Die gelbe Farbe */
    color: #56266c; /* Dunkle Textfarbe für Lesbarkeit */
    padding: 30px;
    border-radius: 10px;
    text-align: left;

    position: relative; /* Behält das Element im Fluss, erlaubt aber z-index */
    width: calc(100% - 60px); /* 30px Abstand an jeder Seite vom Browser-Rand */
    max-width: 600px; /* Maximale Breite des Textkastens */
    margin: -50px auto 0 auto; /* Dieser Wert muss feinabgestimmt werden */

    box-sizing: border-box;
    z-index: 0; 
}

.kpop-overlap-textbox h2 {
    color: #f49fbf; 
}


/* TICKET INFORMATIONEN (MOBIL) */

.ticket-head {
	margin-top: -70px;
	z-index: 5;
}

.mobile-tickets-section {
    background-color: #f4ebf3; /* Hintergrundfarbe für die gesamte Sektion */
    padding: 30px 15px; /* Innenabstand der Sektion */
    margin-bottom: 30px; /* Abstand zur nächsten Sektion */
    text-align: center; /* Zentriert die Blöcke horizontal */
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert die Elemente horizontal in der Flex-Richtung */
    gap: 20px; /* Abstand zwischen den beiden Ticket-Blöcken */
}

.mobile-ticket-block {
    background-color: transparent; /* Wie gewünscht: transparenter Hintergrund */
    border: 2px solid #f49fbf; /* Optional: Eine leichte Umrandung passend zur Farbe */
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 20px;
    margin: 0 10px; /* Kleiner seitlicher Abstand zum Container */
    width: calc(100% - 20px); /* Nimmt fast die volle Breite des Elterncontainers ein (abzgl. Margin) */
    max-width: 400px; /* Optional: Maximale Breite für jeden Block, damit sie nicht zu riesig werden */
    box-sizing: border-box; /* Padding und Border werden in die Breite eingerechnet */
    color: #56266c; /* Standardtextfarbe für diesen Block */
}

.mobile-ticket-block h3 {
    font-size: 1.5em;
    color: #f49fbf;
    margin-top: 0;
    margin-bottom: 15px;
}

.mobile-ticket-block p {
    font-size: 1em;
    margin-bottom: 10px;
    line-height: 1.5;
}

.mobile-tickets-button-inline { /* Spezifische Klasse für den Button in diesem Bereich */
    display: inline-block; /* Oder block, je nach gewünschtem Verhalten (wenn er nur 1 Button ist, der sich zentrieren soll) */
    width: auto; /* Die Breite passt sich dem Inhalt an */
    margin-top: 15px;
    background-color: #92d2d4;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.i-love-kpop-image {
    margin-top: -80px;
}

.start-instagram {
    margin-top: 5px;
}

.start-english {
    margin-bottom: 10px;
}


/* DATENSCHUTZ und IMPRESSUM */

/* Allgemeine Sektion für Content-Seiten, z.B. Impressum, Datenschutz */
.content-section {
    background-color: #f4ebf3; /* Hintergrundfarbe für den gesamten Bereich, passend zum Footer */
    padding: 30px 15px; /* Innenabstand für den Inhalt */
    margin-bottom: 30px; /* Abstand zur nächsten Sektion (z.B. Footer) */
    text-align: center; /* Zentriert den Inhalt der Sektion */
}

.content-section2 {
    background-color: #fff; /* Hintergrundfarbe */
    padding: 30px 15px; /* Innenabstand für den Inhalt */
    margin-bottom: 15px; /* Abstand zur nächsten Sektion (z.B. Footer) */
    text-align: center; /* Zentriert den Inhalt der Sektion */
}

.impressum-box-mobile {
    background-color: #9fe3e5; /* Wie ursprünglich gewünscht (blue) */
    color: #333; /* Textfarbe */
    padding: 30px;
    border-radius: 10px;
    text-align: left; /* Flattertext innerhalb der Box */
    width: calc(100% - 30px); /* 15px Abstand an jeder Seite */
    max-width: 700px; /* Maximale Breite für den Textblock (z.B. 700px) */
    margin: 0 auto; /* Zentriert den Textblock innerhalb des mobile-content-wrapper */
    box-sizing: border-box; /* Wichtig für korrekte Breitenberechnung */
    margin-top: 25px;
    margin-bottom: 18px;
}

/* Falls du eine "yellow" Box für Datenschutz möchtest */
.datenschutz-box-mobile {
    background-color: #fff4a7; /* Gelb */
    color: #333;
    padding: 30px;
    border-radius: 10px;
    text-align: left;
    width: calc(100% - 30px);
    max-width: 700px;
    margin: 0 auto;
    box-sizing: border-box;
    margin-top: 31px;
}

/* Styling für Überschriften innerhalb der Impressum/Datenschutz Boxen */
.impressum-box-mobile h1,
.datenschutz-box-mobile h1 {
    font-size: 2em; /* Angepasste Größe für Hauptüberschrift */
    color: #56266c; /* Deine Akzentfarbe */
    margin-top: 0;
    margin-bottom: 20px;
}

.impressum-box-mobile h3,
.datenschutz-box-mobile h3 {
    font-size: 1.3em; /* Angepasste Größe für Unterüberschriften */
    color: #f49fbf; /* Deine andere Akzentfarbe */
    margin-top: 25px;
    margin-bottom: 10px;
}

.impressum-box-mobile p,
.datenschutz-box-mobile p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Link-Styling für Impressum/Datenschutz */
.impressum-box-mobile .link a,
.datenschutz-box-mobile .link a {
    color: #f49fbf; /* Akzentfarbe für Links */
    text-decoration: underline; /* Unterstreichung für Links */
}

/* ABOUT US */

.mobile-about {
	margin-top: 40px;
    position: relative;
    width: 100%; /* Wird durch den .mobile-content-wrapper begrenzt */
    z-index: -2;
}

.content-section-about {
    background-color: #fff; /* Hintergrundfarbe */
    padding: 15px 15px; /* Innenabstand für den Inhalt */
    margin-bottom: 0px; /* Abstand zur nächsten Sektion (z.B. Footer) */
    text-align: center; /* Zentriert den Inhalt der Sektion */
}

.about-box-mobile {
    background-color: #e8deed; 
    color: #333; /* Textfarbe */
    padding: 2px 20px 20px;
    border-radius: 10px;
    text-align: left; /* Flattertext innerhalb der Box */
    width: calc(100% - 30px); /* 15px Abstand an jeder Seite */
    max-width: 700px; /* Maximale Breite für den Textblock (z.B. 700px) */
    margin: 0 auto; /* Zentriert den Textblock innerhalb des mobile-content-wrapper */
    box-sizing: border-box; /* Wichtig für korrekte Breitenberechnung */
    margin-top: -40px;
    margin-bottom: 18px;
    
}

/* ANFAHRT */

.anfahrt-hero-mobile {
    margin-bottom: 30px; /* Abstand nach unten */
    text-align: center; /* Zentriert das Bild */
}

.anfahrt-hero-image-mobile {
    margin: 0 auto; /* Zentriert das Bild horizontal */
    display: block; /* Stellt sicher, dass margin:auto funktioniert */
    max-width: 100%; /* Bild ist responsiv */
    height: auto;
    /* Optional: Falls das Bild direkt an den oberen Rand soll */
    margin-top: 23px; /* Oder passen Sie dies an den Header an */
}

/* Container für die beiden Anfahrts-Boxen */
.anfahrt-boxes-container-mobile {
    display: flex;
    flex-direction: column; /* Stapelt die Boxen untereinander */
    gap: 20px; /* Abstand zwischen den Boxen */
    align-items: center; /* Zentriert die Boxen horizontal im Container */
    padding: 0 10px; /* Optional: kleiner horizontaler Abstand innerhalb des Containers */
}

/* Styling für die einzelnen Anfahrts-Boxen */
.anfahrt-box-item {
    padding: 25px;
    border-radius: 10px;
    text-align: left; /* Text soll linksbündig sein */
    color: #333; /* Dunkle Textfarbe für bessere Lesbarkeit auf farbigem Hintergrund */
    width: calc(100% - 20px); /* Nimmt fast die volle Breite des Containers ein (10px padding links/rechts) */
    max-width: 600px; /* Maximale Breite für jede Box (z.B. 600px) */
    box-sizing: border-box; /* Padding und Border werden in die Breite eingerechnet */
    margin: 0 auto; /* Zentriert die Boxen horizontal */
}

.anfahrt-box-item.yellow {
    background-color: #fff4a7; /* Die gelbe Farbe */
}

.anfahrt-box-item.blue {
    background-color: #9fe3e5; /* Die blaue Farbe */
}

/* Styling für Überschriften innerhalb der Anfahrts-Boxen */
.anfahrt-box-item h3 {
    font-size: 1.5em;
    color: #56266c; /* Dunkle Akzentfarbe für Überschriften */
    margin-top: 0;
    margin-bottom: 15px;
    text-align: left; /* Überschriften auch linksbündig */
}

.anfahrt-box-item p {
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 10px;
    text-align: left; /* Absätze linksbündig */
}


/* ERROR 404 */

.error404{  
    margin-top: 15px;
}



/* MOBILE NAVIGATION (AM ENDE DER SEITE) */

.menu-section {
    padding: 30px 15px;
    background-color: #f4ebf3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    /* Hier keine max-width und margin: auto mehr, da der .mobile-content-wrapper das übernimmt */
}

.mobile-menu-button {
    display: block;
    width: calc(100% - 40px);
    background-color: #f49fbf;
    color: white;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1em;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Allgemeine Button-Styles (werden von spezifischeren Klassen überschrieben) */
.button {
	max-width: 300px;
    display: inline-block; /* Oder block, je nach Anwendungsfall */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 10px;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}