/* ==========================================================================
   1. GRUNDEINSTELLUNGEN (DARKMODE)
   ========================================================================== */
body {
   font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: #e0e0e0;          /* Angenehmes Off-White für Fließtext (schont die Augen) */
    background-color: #121212; /* Edles, tiefes Mattschwarz für den Hintergrund */
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ==========================================================================
   2. DIE NAVIGATION (EDEL IN SCHWARZ & GOLD)
   ========================================================================== */
nav {
    background-color: #1a1a1a; /* Etwas helleres Schwarz, damit es sich abhebt */
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid #2a2a2a; /* Dezent angedeuteter Rahmen */
    margin-bottom: 40px;
    text-align: center;       /* Zentriert die Menüpunkte */
}

nav a {
    text-decoration: none;
    color: #ffffff;            /* Weiße Links im Normalzustand */
    font-weight: 600;
    font-size: 1.3rem;
    margin: 0 15px;
    transition: color 0.2s;
}

/* Hover-Effekt mit deiner Akzentfarbe */
nav a:hover {
    color: #b7a17f;            /* Deine goldene Akzentfarbe beim Drüberfahren */
}

/*ausgrauen der aktiven Seiten*/

nav a.aktiv, 
.footer-links a.aktiv {
    color: #555555 !important; /* Ein noch etwas deutlicheres, edles Inaktiv-Grau */
    pointer-events: none;      /* Deaktiviert den Klick und den Hover-Effekt komplett */
    cursor: default;           /* Zeigt den normalen Pfeil statt der Hand */
}

/* ==========================================================================
   3. ÜBERSCHRIFTEN (AKZENTUIERT)
   ========================================================================== */

/* --- EXKLUSIVES STYLING FÜR DIE STARTSEITEN-ÜBERSCHRIFT --- */
/* --- HIER KANNST DU SPÄTER EXTRA-WÜNSCHE NUR FÜR DIE STARTSEITE EINTRAGEN --- */

/* --- Desktop-Ansicht (Große Bildschirme) --- */
h1, body.home h1 {
    font-size: 4rem;          /* Große, eindrucksvolle Schrift auf dem PC */
    font-weight: 200;
    letter-spacing: 3px;
    color: #ffffff;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
    text-transform: uppercase;
    line-height: 1.3;           /* Angenehmer Abstand zwischen den beiden Zeilen */
}

h2, h3 {
    color: #b7a17f;            /* Deine Akzentfarbe für Zwischenüberschriften */
    margin-top: 40px;
}

p {
    font-size: 1.1rem;
}

/* Links im normalen Text */
a {
    color: #b7a17f;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   4. LISTEN & FOOTER
   ========================================================================== */
ul {
    background: #1a1a1a;
    padding: 20px 40px;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
    list-style-type: "→ ";    /* Eleganter Pfeil statt Standard-Punkt */
}

ul li {
    margin-bottom: 10px;
    font-size: 1.05rem;
}
/* Styling für Links, die mitten im Text stehen */
p a {
    color: #b7a17f;           /* Deine goldene Akzentfarbe für Links */
    text-decoration: underline; /* Ein klassischer Unterstrich, damit man sieht, dass es ein Link ist */
    transition: color 0.2s;
}

/* Wenn man mit der Maus drüberfährt */
p a:hover {
    color: #ffffff;           /* Der Link leuchtet weiß auf */
}

/* ==========================================================================
   4. FUSSBEREICH (FOOTER)
   ========================================================================== */
footer {
    margin-top: 80px;         /* Abstand nach oben zum Inhalt */
    padding-top: 20px;
    border-top: 1px solid #2a2a2a; /* Feine Trennlinie */
}

.footer-content {
    display: flex;            /* Aktiviert Flexbox */
    justify-content: space-between; /* Drückt Links nach links außen, Copyright nach rechts außen */
    align-items: center;      /* Richtet beide Elemente vertikal perfekt mittig zueinander aus */
}

/* Stil für das Copyright (rechts) */
.footer-content p {
    margin: 0;                /* Entfernt Standard-Abstände */
    font-size: 0.9rem;
    color: #777777;
    text-align: right;        /* Richtet den Text rechtsbündig aus */
}

/* Stil für die Links (links) */
.footer-links {
    display: flex;            /* Lässt die Links elegant nebeneinander fließen */
    gap: 20px;                /* Moderner Abstand zwischen Impressum und Datenschutz */
}

.footer-links a {
    color: #777777;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #b7a17f;           /* Leuchtet golden beim Drüberfahren */
}

/* ==========================================================================
   5. SPECIAL-ELEMENTE (FAQ, GALERIE, KONTAKT)
   ========================================================================== */

   /* Versteckt den Umbruch auf großen Bildschirmen */
.mobile-break {
    display: none;
}

/* =========================================
   MAGIC SLAM POP-UP OVERLAY
   ========================================= */

/* Verdunkelt den gesamten Bildschirm im Hintergrund */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* 85% dunkles Schwarz */
    z-index: 9999;                         /* Legt sich über alle anderen Elemente */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;                         /* Verhindert, dass es auf dem Handy an den Rand stößt */
    box-sizing: border-box; /* HIER NEU: Verhindert, dass das Pop-up breiter als der Bildschirm wird */
}

/* Das kleine X oben rechts in der Box */
.close-popup {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #555555;
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.2s;
}

/* Das X leuchtet golden auf, wenn man mit der Maus darüberfährt */
.close-popup:hover {
    color: #b7a17f; 
}


   /* Die edle Box für die Magic Slam Abstimmung auf der Startseite */
.magic-slam-box {
    text-align: center;
    background-color: #1a1a1a;   /* Ein edles, dunkles Grau, das sich vom Hintergrund abhebt */
    padding: 40px 20px;          /* Großzügiger Innenabstand, damit alles Luft zum Atmen hat */
    border-radius: 10px;         /* Sanft abgerundete Ecken */
    border: 1px solid #333;      /* Ein feiner, dezenter Rahmen */
    margin: 50px auto;           /* 50px Abstand nach oben/unten, horizontal zentriert */
    max-width: 800px;            /* Begrenzt die Breite am PC, damit die Box nicht extrem lang wird */
}

   /* Container für die Magic Slam Buttons nebeneinander */
.abstimmung-buttons {
    display: flex;             /* Aktiviert das flexible Raster */
    justify-content: center;   /* Zentriert beide Buttons exakt in der Mitte */
    gap: 20px;                 /* HIER STEUERST DU DEN ABSTAND! (z.B. 20px oder 30px) */
    margin-top: 25px;          /* Ein bisschen Abstand zum Text darüber */
    flex-wrap: wrap;           /* Der Handy-Trick: Bricht die Buttons um, wenn der Platz fehlt */
}


   /* --- BILDER INNENHALB VON FAQ-ANTWORTEN --- */

.faq-bild-container {
    display: flex;          /* Aktiviert Flexbox, um die Bilder nebeneinander zu stellen */
    gap: 20px;              /* Abstand zwischen den beiden Bildern am PC */
    margin: 20px 0;         /* Abstand nach oben und unten zum Text */
    justify-content: space-between; /* Verteilt die Bilder gleichmäßig im Container */
}

.faq-bild {
    flex: 1;                /* Jedes Bild nimmt die Hälfte des verfügbaren Platzes ein */
    max-width: calc(50% - 10px); /* Stellt sicher, dass sie nicht breiter als die Hälfte werden */
    height: auto;           /* Behält das Seitenverhältnis bei */
    object-fit: cover;      /* Schneidet Bilder sauber ab, falls sie unterschiedliche Formate haben */
    max-height: 350px;      /* Begrenzt die Höhe der Bilder, damit sie nicht zu wuchtig wirken */
    border-radius: 8px;     /* Abgerundete Ecken, passend zum Design */
    border: 1px solid #2a2a2a; /* Dezenter Rahmen */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Leichter Schatten für Tiefe */
}
   /* ==========================================================================
   ELEMENTE NUR FÜR DIE STARTSEITE (HERO-BILD)
   ========================================================================== */

/* ==========================================================================
   STARTSEITE: ÜBER-MICH LAYOUT (PC VANSICHT)
   ========================================================================== */

.ueber-mich-sektion {
    display: flex;          /* Aktiviert das Flexbox-System */
    gap: 40px;              /* Abstand zwischen Bild und Text am PC */
    align-items: center;    /* Zentriert Bild und Text vertikal zueinander */
    margin-top: 30px;
    margin-bottom: 50px;
}

/* Die Box, in der das Bild liegt (jetzt wieder ohne Einschränkungen) */
.hero-container {
    flex: 1;                
    margin: 0;
}

.hero-bild {
    width: 100%;
    max-height: 700px;      
    object-fit: cover;      
    display: block;
    
    border-radius: 12px;       /* Wieder direkt auf dem Bild */
    border: 1px solid #2a2a2a; /* Standard-Rahmen in Dunkelgrau */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* Der Weichzeichner für die Bewegung (Dauer: 0.3s passend zur Galerie) */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Der exakt gleiche Hover-Effekt wie bei .galerie-item */
.hero-bild:hover {
    transform: scale(1.02);  /* Das komplette Bild inkl. Rahmen hebt sich ab */
    border-color: #b7a17f;   /* Der Rahmen leuchtet in deinem Goldton auf */
}

/* Die Box, in der der Text liegt */
.ueber-mich-text {
    flex: 1;                /* Nimmt die andere Hälfte des Platzes ein */
}

.ueber-mich-text h2 {
    margin-top: 0;          /* Verhindert, dass die Überschrift nach unten rutscht */
}

/* ==========================================================================
   5. SPECIAL-ELEMENTE: FAQ ZWEI-EBENEN-SYSTEM
   ========================================================================== */

/* --- DIE HAUPT-KATEGORIEN (Ebene 1) --- */
details.faq-kategorie {
    background-color: #1a1a1a;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
    cursor: pointer;
    transition: border-color 0.2s;
}

details.faq-kategorie:hover {
    border-color: #b7a17f; /* Leuchtet golden beim Drüberfahren */
}

/* Der Titel der Kategorie (z.B. Shows & Buchung) */
summary.kategorie-titel {
    font-size: 1.3rem;
    font-weight: 600;
    color: #b7a17f;       /* Deine edle Akzentfarbe für die Hauptkategorien */
    outline: none;
    list-style-type: "+ "; /* Setzt ein Plus vor die geschlossene Kategorie */
}

/* Ändert das Plus in ein Minus, wenn die Kategorie geöffnet ist */
details.faq-kategorie[open] summary.kategorie-titel {
    list-style-type: "- ";
}

/* Der Container im Inneren, der die Fragen hält */
.kategorie-inhalt {
    margin-top: 20px;
    padding-left: 10px;   /* Leicht nach rechts eingerückt für bessere Hierarchie */
}


/* --- DIE EINZELNEN FRAGEN (Ebene 2, innerhalb der Kategorie) --- */
details.faq-frage {
    background-color: #121212; /* Dunklerer Hintergrund für die Fragen */
    margin-bottom: 12px;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid #222222;
}

details.faq-frage:hover {
    background-color: #161616;
}

details.faq-frage summary {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;       /* Weiße Schrift für die Fragen */
}

/* Die finale Antwort */
details.faq-frage p {
    margin-top: 10px;
    margin-bottom: 0;
    color: #b0b0b0;
    font-size: 1rem;
    padding-left: 10px;
    border-left: 2px solid #b7a17f; /* Der feine goldene Strich links neben der Antwort */
}

/* ==========================================================================
   6. STRUKTUR: MOSAIK-GALERIE (FOTOWAND)
   ========================================================================== */

.galerie-mosaik {
    column-count: 3;         /* Zwingt den Browser zu genau 3 Spalten am PC */
    column-gap: 20px;        /* Der seitliche Abstand zwischen den Spalten */
    width: 100%;
    margin-top: 30px;
    margin-bottom: 50px;
}

.galerie-item {
    background-color: #1a1a1a; 
    margin-bottom: 20px;     
    break-inside: avoid;     
    border-radius: 8px;      
    overflow: hidden;        
    border: 1px solid #2a2a2a; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); 
    transition: transform 0.3s ease, border-color 0.3s ease;
    
    /* HIER NEU: Zwingt den Kasten, die Breite exakt zu berechnen */
    box-sizing: border-box;  
    display: inline-block; /* Hilft dem Column-System, die Box sauber zu isolieren */
    width: 100%;
}


/* Ein edler Hover-Effekt: Das Bild hebt sich leicht ab, wenn man mit der Maus drübergeht */
.galerie-item:hover {
    transform: scale(1.02);  /* Minimales Vergrößern */
    border-color: #b7a17f;   /* Der Rahmen leuchtet in deinem Goldton auf */
}

.galerie-item img {
    width: 100%;             /* Das Bild nutzt die volle Breite seiner Spalte */
    height: auto;            /* Behält das originale Seitenverhältnis bei (egal ob Hoch- oder Querformat) */
    display: block;          /* Entfernt unschöne Abstände unter dem Bild */
}


/* ==========================================================================
   7. MINIMALISTISCHES KONTAKTFORMULAR & DIREKTLINKS (UPDATE)
   ========================================================================== */

.kontakt-container {
    max-width: 900px;         /* Etwas breiter, da wir nun zwei Felder nebeneinander haben */
    margin: 40px auto;
}

/* Die hervorgehobene Box für Telefon & Mail */
.kontakt-direkt-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;                 /* Etwas mehr Abstand zwischen Telefon und Mail */
    background-color: #0b0b0b; /* Noch ein Stück dunkler für mehr Kontrast */
    border: 1px solid #b7a17f; /* HIER NEU: Feiner Rahmen in deiner goldenen Akzentfarbe */
    padding: 18px 35px;        /* Mehr Raum im Inneren der Box */
    border-radius: 8px;
    margin-bottom: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); /* Tieferer, weicher Schatten für 3D-Effekt */
}

/* Stil für die Links in dieser speziellen Box */
.kontakt-direkt-box .kontakt-link {
    font-size: 1.35rem;        
    font-weight: 200;          /* Fein und minimalistisch */
    color: #e0e0e0;            /* Edles Off-White im Ruhezustand */
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.3s ease, transform 0.2s ease;
}

/* Wenn man mit der Maus über die Kontaktlinks fährt */
.kontakt-direkt-box .kontakt-link:hover {
    color: #b7a17f;            /* Leuchtet gold auf */
    transform: scale(1.02);    /* Minimaler, eleganter Vergrößerungseffekt */
}

/* Der vertikale Trennstrich am PC (|) */
.kontakt-direkt-box .trennstrich {
    color: #b7a17f;            /* Auch der Trennstrich bekommt den Gold-Vibe */
    opacity: 0.4;              /* Schön dezent weggedimmt */
    font-weight: 200;
    font-size: 1.35rem;
}

/* Das Formular-Layout */
.kontakt-formular {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Zeilen-System für zwei Felder nebeneinander am PC */
.form-row {
    display: flex;
    gap: 20px;
    width: 100%;                  /* Nutzt die volle Breite des Formulars */
    box-sizing: border-box;
}

.form-group {
    flex: 1;                      /* Teilt die Zeile exakt zu gleichen Teilen auf */
    min-width: 0;                 /* WICHTIG: Verhindert, dass die Box nach rechts ausbricht */
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}

/* Edle, klar erkennbare Eingabefelder (Kästen-Look) */
.kontakt-formular input,
.kontakt-formular textarea {
    width: 100%;                  /* Zwingt das Eingabefeld, EXAKT so breit wie die form-group zu sein */
    max-width: 100%;              /* Absolut unumstößliche Grenze nach rechts */
    box-sizing: border-box;       /* Sorgt dafür, dass Padding den Kasten nicht breiter macht */
    
    background-color: #161616;    /* Dunkler Kasten-Hintergrund */
    border: 1px solid #2a2a2a;    /* Klar erkennbarer, feiner Rahmen */
    border-radius: 6px;           /* Sanft abgerundete Ecken */
    padding: 12px 15px;
    font-size: 1rem;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.form-group label {
    font-size: 0.9rem;
    color: #b7a17f;           /* Goldene Beschriftung über den Feldern */
    font-weight: 600;
    letter-spacing: 1px;
}

/* Edle, klar erkennbare Eingabefelder (Kästen-Look) */
.kontakt-formular input,
.kontakt-formular textarea {
    width: 100%;
    background-color: #161616; /* Dunkler Kasten-Hintergrund */
    border: 1px solid #2a2a2a; /* Klar erkennbarer, feiner Rahmen */
    border-radius: 6px;       /* Sanft abgerundete Ecken */
    padding: 12px 15px;
    font-size: 1rem;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Platzhalter-Text dezent abdunkeln */
.kontakt-formular input::placeholder,
.kontakt-formular textarea::placeholder {
    color: #555555;
    font-weight: 200;
}

/* Wenn man aktiv in ein Feld hineinklickt */
.kontakt-formular input:focus,
.kontakt-formular textarea:focus {
    border-color: #b7a17f;     /* Rahmen leuchtet gold auf */
    background-color: #1c1c1c; /* Wird minimal heller zur Bestätigung */
}

/* Spezielles Styling für das Datumsfeld im Darkmode */
.kontakt-formular input[type="date"] {
    color-scheme: dark;       /* Zwingt den Browser-Kalender in den Darkmode */
}

/* Die neue Box, die beide Texte eng zusammenhält */
.hinweis-box {
    display: flex;
    flex-direction: column;
    gap: 5px;                  /* Sehr geringer Abstand zwischen den beiden Texten */
    margin-top: -15px;         /* Zieht die Texte nach oben näher ans Textfeld ran */
    margin-bottom: -5px;       /* Zieht den Senden-Button von unten näher ran */
}

/* Datenschutz-Hinweis edel und dezent im Hintergrund */
.datenschutz-hinweis {
    font-size: 0.78rem;        
    color: #555555;           
    line-height: 1.5;         
    margin: 0;                 /* Margin wird jetzt von der .hinweis-box übernommen */
    font-weight: 300;
}

/* Der Link zur Datenschutzerklärung in der Box */
.datenschutz-hinweis a {
    color: #968368;           
    text-decoration: none;
    border-bottom: 1px dotted #968368; 
    transition: color 0.2s, border-color 0.2s;
}

/* Wenn man mit der Maus über den Datenschutz-Link fährt */
.datenschutz-hinweis a:hover {
    color: #b7a17f;           
    border-bottom: 1px solid #b7a17f;
}

.pflichtfeld-hinweis {
    font-size: 0.8rem;
    color: #555555;
    margin: 0;                 /* Ebenfalls auf 0 gesetzt für maximale Kontrolle */
}

/* Der Senden-Button */
.submit-button {
    background-color: transparent;
    color: #b7a17f;
    border: 1px solid #b7a17f;
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    align-self: center;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
    margin-top: 10px;
}

.submit-button:hover {
    background-color: #b7a17f;
    color: #121212;
    box-shadow: 0 0 15px rgba(183, 161, 127, 0.4);
}

/* ==========================================================================
   7. OPTIMIERUNGEN FÜR SMARTPHONES (Bildschirmbreite unter 600px)
   ========================================================================== */
@media (max-width: 600px) {
    body {
        padding: 20px 15px; /* Etwas weniger Abstand zum Rand auf dem Handy */
    }

    h1 {
        font-size: 1.8rem;  /* Die Hauptüberschrift wird auf dem Handy etwas kleiner */
    }

    /* --- Mobile-Ansicht (Smartphones unter 600px) --- */

    body.home h1 {
        /* Hier wird die Schrift für das Handy deutlich verkleinert */
        font-size: 2rem;        /* Kompakt genug, damit "Zauberkünstler" nicht ausbricht */
        letter-spacing: 2px;    /* Leicht reduzierter Abstand, passend zur Größe */
        margin-top: 20px;
    }

    .ueber-mich-sektion {
        flex-direction: column; /* Zwingt Bild und Text untereinander */
        gap: 20px;              /* Weniger Abstand zwischen Bild und Text auf dem Handy */
    }

    .hero-bild {
        max-height: 400px;      /* Auf dem Handy machen wir das Hochkant-Bild etwas kompakter */
    }

    .faq-bild-container {
        flex-direction: column; /* Stapelt die Bilder auf dem Handy untereinander */
        gap: 15px;              /* Abstand zwischen den gestapelten Bildern */
    }

    .faq-bild {
        max-width: 100%;        /* Auf dem Handy nutzen die Bilder die volle Breite */
        max-height: 300px;      /* Die Bilder dürfen auf dem Handy etwas höher sein */
    }


    h2 {
        font-size: 1.4rem;  /* Auch die Zwischenüberschriften schrumpfen leicht */
    }

    nav {
        padding: 10px;      /* Das Menü wird kompakter */
    }

    nav a {
        margin: 0 8px;      /* Die Menüpunkte rücken näher zusammen, damit sie nicht umbrechen */
        font-size: 0.95rem;
    }

    form {
        padding: 20px 0;    /* Oben/Unten 20px, aber Links/Rechts 0px für maximale Breite */
    }

    .footer-content {
        flex-direction: column; /* Stapelt Links und Copyright auf dem Handy untereinander */
        gap: 15px;              /* Abstand zwischen den beiden Blöcken auf dem Handy */
    }

    .footer-content p {
        text-align: center;     /* Auf dem Handy sieht zentriert einfach besser aus */
    }
    
    .footer-links {
        justify-content: center; /* Zentriert die beiden Links auf dem Handy */
    }

    .galerie-mosaik {
        column-count: 1;     /* Auf dem Handy wird alles sauber in einer Reihe untereinander gestapelt */
        column-gap: 0;       /* Kein seitlicher Abstand mehr nötig */
    }
    
    .galerie-item {
        margin-bottom: 15px; /* Etwas kompakterer Abstand auf dem Smartphone */
    }

    .kontakt-direkt-box {
        flex-direction: column; /* Stapelt Telefon und Mail untereinander am Handy */
        gap: 10px;
        padding: 15px;
    }

    .kontakt-link {
        font-size: 1.1rem;    /* Sorgt dafür, dass es auf dem Handy kompakt und einzeilig bleibt */
    }

    .trennstrich {
        display: none;         /* Versteckt den senkrechten Strich auf dem Handy */
    }

    .form-row {
        flex-direction: column; /* Macht aus zwei Spalten eine saubere Reihe untereinander */
        gap: 25px;              /* Behält den vertikalen Abstand bei */
    }

    .mobile-break {
        display: block; 
    }
   

/* =========================================
       FAQ PLATZ-OPTIMIERUNG FÜRS HANDY
       ========================================= */
    details.faq-kategorie {
        padding: 15px 10px;     /* Reduziert den dicken Rahmen um die Hauptkategorie */
    }

    .kategorie-inhalt {
        padding-left: 0;        /* HIER WICHTIG: Verhindert, dass die Fragen weiter nach rechts einrücken */
    }

    details.faq-frage {
        padding: 12px 10px;     /* Holt die Fragen-Boxen wieder näher an den linken Rand */
    }

    details.faq-frage p {
        padding-left: 10px;     /* Lässt gerade noch genug Platz für den feinen goldenen Strich */
    }
    
}