/*
Theme Name: Trainlox Custom Theme
Author: Das Layout / Christoffer Flohr
Description: Zero-Bloat Custom Theme für Trainlox - 100% Design Match
Version: 1.8.13
*/

/* ==========================================================================
   Lokale Schriften (Montserrat)
   ========================================================================== */
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('./fonts/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    --color-yellow: #ffcc00;
    --color-black: #000000; 
    --color-white: #ffffff;
    --color-gray: #f5f5f5; 
    --color-text-gray: #a3a3a3;
    
    --font-main: 'Montserrat', sans-serif;
    
    --text-p: clamp(0.95rem, 0.8vw + 0.8rem, 1.1rem);
    --text-h1: clamp(2.5rem, 4vw + 2rem, 4.5rem);     
    --text-h2: clamp(1.8rem, 2.5vw + 1rem, 2.5rem);   
    --text-h3: clamp(1.3rem, 1.5vw + 1rem, 1.6rem);
    --text-h4: clamp(1.1rem, 1.2vw + 1rem, 1.3rem);
    
    --border-radius-box: 40px;
    --border-radius-pill: 50px;
}

/* ==========================================================================
   Base & Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-main);
    font-weight: 400; 
    font-size: var(--text-p);
    line-height: 1.6;
    color: var(--color-white);
    background-color: var(--color-black); 
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
html { background-color: var(--color-black); }
main.site-main { display: block; background-color: var(--color-black); } /* keine unbemalten weißen Lücken */

h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
h2, h3 { font-weight: 600; } /* Semibold laut Kundin - H1 und H4 bleiben Bold, Fließtext-Fettungen unverändert */
h1 { font-size: var(--text-h1); letter-spacing: -0.01em; text-transform: uppercase; }
h2 { font-size: var(--text-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
p { margin-bottom: 1.5rem; }

/* Automatische Silbentrennung (Deutsch): Wort muss mind. 6 Buchstaben haben,
   mind. 3 Buchstaben bleiben vor und nach dem Trennstrich stehen -
   ist das nicht möglich, erfolgt keine Trennung. */
p, h3, h4 {
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    hyphenate-limit-chars: 6 3 3;
}

.container { width: 90%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.divider-yellow { width: 60px; height: 5px; background-color: var(--color-yellow); margin-bottom: 30px; border-radius: 3px; } /* abgerundete Ecken bei allen Trennstrichen */
.text-white { color: var(--color-white) !important; }

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.site-header {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 1200px;
    background-color: var(--color-black); border-radius: var(--border-radius-pill); padding: 15px 40px;
    display: flex; justify-content: space-between; align-items: center; z-index: 1000;
}
.header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.header-right { display: flex; align-items: center; gap: 20px; }

.btn-start {
    padding: 18px 30px; border-radius: 50px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; /* gleiche Höhe wie die weiße Navigationspille */
    text-decoration: none; transition: all 0.3s ease; border: 2px solid var(--color-yellow);
}
.btn-start.active { background-color: var(--color-yellow); color: var(--color-black); }
.btn-start:not(.active) { background-color: transparent; color: var(--color-white); }
.btn-start:not(.active):hover { background-color: var(--color-yellow); color: var(--color-black); }

.main-navigation { background-color: var(--color-white); border-radius: 50px; padding: 0; }
/* Randluft liegt in den äußeren Links: Hover-Pille reicht bis an den Rand, kein weißer Streifen */
.main-navigation li:first-child a { padding-left: 20px; border-radius: 50px; }
.main-navigation li:last-child a { padding-right: 20px; border-radius: 50px; }
.main-navigation ul, .main-navigation div > ul { list-style: none; display: flex; align-items: center; margin: 0; padding: 0; }
.main-navigation li { margin: 0; }
.main-navigation a {
    color: var(--color-black); text-decoration: none; font-weight: 500; font-size: 0.85rem; text-transform: uppercase;
    transition: all 0.3s ease; padding: 20px 10px; border-radius: 50px; display: block; /* engere Abstände, mehr Luft zwischen Logo und START */
}
.main-navigation a:hover, .main-navigation li.current-menu-item > a { background-color: #e5e5e5; }

.menu-toggle { display: none; background: transparent; border: none; outline: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.menu-toggle .bar { display: block; width: 25px; height: 3px; background-color: var(--color-white); transition: all 0.3s ease; border-radius: 2px; }
.menu-toggle .bar:last-child { background-color: var(--color-yellow); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; padding: 14px 36px;
    font-weight: 600; font-size: 0.85rem; text-transform: uppercase; text-decoration: none;
    border-radius: var(--border-radius-pill); transition: all 0.3s ease; cursor: pointer;
}
.btn-outline { background-color: var(--color-white); color: var(--color-black); border: 2px solid var(--color-black); }
.btn-outline:hover { background-color: var(--color-yellow); border-color: var(--color-yellow); }
.btn-solid { background-color: var(--color-white); color: var(--color-black); border: 2px solid var(--color-white); }
.btn-solid:hover { background-color: var(--color-yellow); border-color: var(--color-yellow); }
.btn-black { background-color: var(--color-black); color: var(--color-white); border: none; }
.btn-black:hover { background-color: var(--color-yellow); color: var(--color-black); }

/* Honeypot-Feld gegen Spam-Bots: für Menschen unsichtbar und nicht
   fokussierbar - füllt ein Bot es aus, wird die Anfrage serverseitig
   stillschweigend verworfen. */
.hp-feld { position: absolute !important; left: -9999px; top: -9999px; width: 0; height: 0; overflow: hidden; }

/* Rückruf-Popup und Formular-Erfolgsmeldungen */
.modal-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background-color: rgba(0, 0, 0, 0.7);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-overlay:not(.is-open) { display: none !important; }
.modal-overlay.is-open { display: flex; }
.modal-card {
    background-color: var(--color-white); color: var(--color-black);
    border-radius: 30px; padding: 45px 40px;
    max-width: 460px; width: 100%; position: relative;
}
.modal-close {
    position: absolute; top: 16px; right: 22px;
    background: none; border: none; cursor: pointer;
    font-size: 1.9rem; line-height: 1; color: var(--color-black);
}
.modal-hinweis { font-size: 0.8rem; color: #666; margin-bottom: 20px; }
.form-erfolg { display: none; }
.form-erfolg h3 { color: var(--color-black); margin-bottom: 10px; }
.form-erfolg p { color: var(--color-black); margin-bottom: 0; }

/* Spam-geschützte E-Mail-Links: Adresse erscheint erst nach Klick */
.email-link { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: var(--color-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }

/* Elemente, die NUR in der Mobilansicht erscheinen (z.B. Arbeitsweise-Button in der hellen Box).
   Auf dem Desktop bleiben sie unsichtbar, dort ändert sich also nichts. */
.mobil-only { display: none; }

/* ==========================================================================
   Verläufe Sektionen
   ========================================================================== */
.section-hero {
    background: linear-gradient(180deg, var(--color-black) 0%, var(--color-black) 78%, #777777 100%); /* Intro bleibt auf Schwarz lesbar */
    padding: 180px 0 10px 0; 
}
/* Fluchtlinie: H1, Divider und Intro-Text sitzen auf der 60px-Linie
   (bündig mit Sabine-Box-Überschrift, "Trainlox kann viel" und Kontaktbereich) */
.section-hero .container > h1,
.section-hero .container > .divider-yellow,
.section-hero .container > div:not([class]) { margin-left: 60px; }
.section-hero .container > div:not([class]) { margin-bottom: 60px; } /* Abstand Intro -> Leistungen (vorher inline; mobil 0, dort steckt der Abstand im Hero-Padding) */

/* Sektionsnähte: Jede Folgesektion überlappt die vorherige um 1px. Bei Sektionshöhen mit
   Nachkommastellen (Zeilenhöhen) rendert Chrome an der Naht zweier Verlaufsflächen sonst eine
   sichtbare 1px-Linie (graue Linie unter dem Hero, "Strich" über dem Kontaktbereich).
   Durch die Überlappung liegt der Rand der vorherigen Fläche immer unter der nächsten. */
.section-white-wrapper, .section-sub-main, .section-sub-end, .section-kontakt-main { margin-top: -1px; }

.section-white-wrapper {
    background: linear-gradient(180deg, #777777 0px, var(--color-white) 440px, var(--color-white) 100%); /* Verlauf endet in der Mitte der ersten Boxreihe */
    color: var(--color-black); 
    padding: 60px 0 0 0; /* unten 0: gelbe KONTAKT-Fläche dockt direkt unter der hellen Box an (Stand der Abnahmerunden).
                            Vorher 80px - die lagen durch ein fehlendes </div> in front-page.php UNTER dem Kontaktbereich
                            und waren der weiße Balken über dem Footer. */
}
.section-white-wrapper h2, .section-white-wrapper h3, .section-white-wrapper h4 { color: var(--color-black); }

.form-fields .box-white-small { width: 372px; max-width: 100%; } /* Kartenbreite laut InDesign-Entwurf */

.section-contact-area {
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-white) 10%, #cdcdcd 40%, var(--color-black) calc(100% - 60px), var(--color-black) 100%);
    padding: 0 0 100px 0;
    margin-top: -50px; /* schiebt sich 50px unter die helle Box: gelbe KONTAKT-Fläche verschwindet hinter deren runder Ecke (Kachel-Optik wie CTA-Box der Unterseiten) */
    color: var(--color-white);
    position: relative;
    z-index: 1; /* liegt unter dem Container der Leistungssektion (z-index 2) -> helle Box bleibt oben */
    overflow: hidden;
}

/* Briefumschlag Desktop: an die RECHTE KANTE des 1200px-Containers gebunden
   (nicht an den Bildschirmrand), dadurch auf jeder Monitorbreite an derselben
   Stelle: rechts neben dem "Worum geht es bei Ihnen?"-Block.
   max() sorgt dafür, dass er auf schmaleren Desktops (<1333px, wo der
   Container 90% breit ist) am 5%-Rand bleibt. */
.bg-mail-icon {
    position: absolute;
    right: 0;
    top: calc(100% - 75px); /* 85px unter der (verkürzten) gelben Fläche */
    bottom: auto;
    width: 400px;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
}

/* ==========================================================================
   Sektion: Sabine Box
   ========================================================================== */
.box-sabine {
    background-color: var(--color-gray); color: var(--color-black);
    border-radius: var(--border-radius-box); display: flex; flex-wrap: wrap; position: relative; overflow: hidden;
    margin-top: 100px;
}
.box-sabine-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('./assets/Background.jpg'); background-size: cover; background-position: right center; z-index: 1; opacity: 0.6; } /* Muster wird von links gekürzt */
.box-sabine-text { flex: 1 1 50%; padding: 70px 60px; position: relative; z-index: 2; }
.box-sabine-text p { margin-bottom: 40px; } /* vorher inline; mobil 0 */
.box-sabine-img-wrapper { flex: 1 1 45%; position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-end; padding-right: 40px; }
.box-sabine-img-wrapper img.sabine { max-width: 70%; height: auto; display: block; margin-bottom: -10px; }
.icon-x-sabine { position: absolute; width: 35px; height: 35px; z-index: 3; right: 26%; top: 43%; } 

/* ==========================================================================
   Sektion: Leistungen (Grid)
   ========================================================================== */
/* Überschrift auf der 60px-Fluchtlinie (30px Versatz + 30px Abstand zur Punktlinie,
   die gepunktete Linie wandert dadurch mit) */
.leistungen-header { margin-left: 30px; margin-top: 0; margin-bottom: 10px; display: flex; align-items: center; }
/* Punktlinie sitzt direkt an der Überschrift: schließt oben mit "UNSERE" ab und dockt unten an der Box an */
.leistungen-header h2 { border-left: 2px dotted var(--color-white); padding-left: 30px; }
/* Punkte-Reihe neben "UNSERE LEISTUNGEN" (Scrolleffekt wie Kontaktseite) */
.leistungen-dots { gap: 70px; margin-left: 250px; margin-top: 0; padding-left: 0; position: relative; top: -100px; } /* Größe wie Kontaktseite, 50px höher, 180px weiter rechts */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 0; }
.box-black {
    background-color: var(--color-black); color: var(--color-white);
    border-radius: var(--border-radius-box); padding: 50px; position: relative; border: none; transition: transform 0.3s ease; 
}
.box-black h3 { color: var(--color-yellow); font-size: 1.4rem; margin-bottom: 0.5rem; }
.box-black h4 { color: var(--color-white); margin-bottom: 20px; }
.box-black p { color: var(--color-white); font-size: 0.95rem; }
.box-black:hover { transform: translateY(-5px); } 
.box-black:hover .icon-x-hover { transform: translateX(5px) rotate(10deg); } 
.icon-x-hover { position: absolute; width: 35px; height: 35px; z-index: 3; right: 30px; bottom: 30px; transition: all 0.3s ease; }

/* ==========================================================================
   Sektion: Trainlox kann viel
   ========================================================================== */
.box-light {
    background-color: #ededed; color: var(--color-black);
    border-radius: var(--border-radius-box) var(--border-radius-box) 0 var(--border-radius-box); 
    padding: 70px 60px; position: relative; overflow: hidden; 
    margin-bottom: 0; 
}
.box-light-pattern {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('./assets/Background.jpg'); background-size: cover; background-position: right center; opacity: 0.4; z-index: 1; /* Muster wird von links gekürzt */
}
.box-light-content { position: relative; z-index: 2; max-width: 900px; }

/* ==========================================================================
   Sektion: Kontakt-Formular (Grid Layout Desktop)
   ========================================================================== */
.form-wrapper { 
    position: relative; /* Anker für das Briefsymbol */
    display: grid; 
    grid-template-columns: 1fr 35%; 
    grid-template-areas: 
        "text yellow"
        "fields yellow";
    background-color: transparent; 
    position: relative;
    z-index: 2;
}
/* Desktop: Formular-Block ("Ihre Zeit ist wertvoll." + Felder) sitzt auf
   derselben Fluchtlinie wie die Überschrift "Trainlox kann viel. Und kennt
   die Richtigen." in der hellen Box = Containerkante + 60px (Box-Padding). */
.form-text { grid-area: text; padding: 110px 40px 0 60px; } /* 60px + 50px Ausgleich für die Überlappung: Text bleibt an Ort und Stelle */
.form-fields { grid-area: fields; padding: 0 40px 60px 60px; }

/* Auch der "Worum geht es bei Ihnen?"-Block (klassenloses Div im
   Kontaktbereich) rückt am Desktop auf diese 60px-Fluchtlinie. */
.section-contact-area .container > div:not([class]) { padding-left: 60px; }

.form-right { 
    grid-area: yellow; 
    background-color: var(--color-yellow); 
    display: flex; align-items: center; justify-content: center; position: relative; min-height: 200px; 
    border-radius: 0 0 var(--border-radius-box) var(--border-radius-box);
    margin-bottom: 160px; /* gelbe Fläche endet 160px früher */
}

.text-restricted { max-width: 480px; }
.text-rotated { transform: rotate(-90deg); color: var(--color-black); font-size: 4rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; }

/* Kontaktformular: Felder und Datenschutztext auf 530px Breite */
.form-group { margin-bottom: 20px; max-width: 530px; }
.form-input { width: 100%; padding: 18px 25px; border-radius: 30px; border: none; background-color: #e5e5e5; font-family: var(--font-main); font-size: 1rem; }
textarea.form-input { border-radius: 20px; resize: none; height: 150px; background-image: url('./assets/Background.jpg'); background-size: cover; background-position: right center; background-blend-mode: overlay; background-color: rgba(229,229,229,0.9); }

.form-checkbox { display: flex; gap: 15px; font-size: 0.9rem; margin-bottom: 30px; align-items: flex-start; }
/* Datenschutztext exakt so breit wie das Nachrichtenfeld */
.form-checkbox label.text-restricted { max-width: 530px; }

.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; margin-top: 50px; position: relative; z-index: 2; }
/* Boxen wieder auf standardmäßiges, zentriertes Padding gesetzt */
.box-white-small { background-color: var(--color-white); color: var(--color-black); border-radius: var(--border-radius-box); padding: 40px; position: relative; text-align: left; }
.x-contact { position: absolute; width: 35px; height: 35px; z-index: 3; bottom: -15px; left: 50%; transform: translateX(-50%); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-start-btn {
    display: block;
    text-align: center;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}
.footer-start-btn.active { background-color: var(--color-yellow); color: var(--color-black); border: 2px solid var(--color-yellow); }
.footer-start-btn:not(.active) { background-color: transparent; color: var(--color-yellow); border: 2px solid var(--color-yellow); }
.footer-start-btn:not(.active):hover { background-color: var(--color-yellow); color: var(--color-black); }

.footer-nav-box {
    background-color: var(--color-white);
    border-radius: var(--border-radius-box); /* wie die übrigen Boxen (vorher 20px) */
    padding: 15px 10px;
    text-align: center;
}
.footer-nav-box a {
    color: var(--color-black);
    text-decoration: none;
    display: block;
    padding: 15px 20px;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.3s ease;
}
.footer-nav-box a:hover {
    background-color: #d4d4d4;
}
.footer-nav-box a.active {
    background-color: #e5e5e5; /* aktive Seite markiert wie im Header */
}

.footer-border-box {
    border: 1px solid #555;
    border-radius: var(--border-radius-box);
    padding: 30px 40px;
}

.footer-legal-links a {
    display: flex;
    align-items: center;
    color: var(--color-text-gray);
    text-decoration: none;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}
.footer-legal-links a:last-child {
    margin-bottom: 0;
}
.footer-legal-links a::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: transparent;
    border-radius: 50%;
    margin-right: 12px;
    transition: background-color 0.3s;
    flex-shrink: 0;
}
.footer-legal-links a:hover {
    color: var(--color-white);
}
.footer-legal-links a:hover::before {
    background-color: var(--color-yellow);
}


/* ==========================================================================
   Unterseiten (Training, Führung, ...) - gemeinsame Bausteine
   ========================================================================== */
/* Button-Variante: Weiß ohne Kontur, Hover schwarz mit weißer Schrift (CTA-Box) */
.btn-white { background-color: var(--color-white); color: var(--color-black); border: 2px solid var(--color-white); }
.btn-white:hover { background-color: var(--color-black); border-color: var(--color-black); color: var(--color-white); }

/* Hero der Unterseiten: Schwarz, läuft nach unten ins Grau der Folgesektion */
.section-sub-hero {
    background: linear-gradient(180deg, var(--color-black) 0%, var(--color-black) 55%, #666666 100%);
    padding: 180px 0 50px 0;
}
/* Freistehende Textblöcke sitzen auf der 60px-Fluchtlinie */
.sub-inset { padding-left: 60px; }

/* Inhaltsbereich: setzt den Verlauf des Heros fort (Grau -> fast Weiß) */
.section-sub-main {
    background: linear-gradient(180deg, #666666 0px, #fdfdfd 560px, #f6f6f6 100%);
    padding: 60px 0 40px 0;
    overflow: hidden; /* schneidet die Deko-Panels am Bildschirmrand ab */
}

/* Abschlussbereich: Hell -> Schwarz (Anlass-Box + gelbe CTA-Box) */
.section-sub-end {
    background: linear-gradient(180deg, #f6f6f6 0px, #f3f3f3 240px, var(--color-black) calc(100% - 60px), var(--color-black) 100%);
    padding: 60px 0 140px 0;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* Helle Box mit voll gerundeten Ecken (Unterseiten-Variante der box-light) */
.box-light.rounded-all { border-radius: var(--border-radius-box); }
/* Erste Inhaltsbox ist im Layout nicht containerbreit (~73%) */
.sub-card-narrow { max-width: 830px; }

/* Wrapper mit Deko-Kreisen (Position relativ für absolute Punkte) */
.sub-block-deco { position: relative; }
.deco-dot { position: absolute; border-radius: 50%; z-index: 1; pointer-events: none; }
/* Animation greift NUR, wenn das Script in der footer.php läuft (setzt .js-anim
   aufs html-Element). Ohne Script bleiben die Punkte einfach sichtbar -
   so können sie nie wieder komplett verschwinden. */
.js-anim .deco-dot {
    opacity: 0; transform: scale(0.4);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.js-anim .deco-dot.is-visible { opacity: 1; transform: scale(1); }

/* Gelbe Box (Pendant zur box-black) */
.box-yellow {
    background-color: var(--color-yellow); color: var(--color-black);
    border-radius: var(--border-radius-box); padding: 65px 60px; position: relative;
}
.box-yellow h2, .box-yellow h4, .box-yellow p { color: var(--color-black); }
.box-yellow p { font-size: 0.95rem; }
.box-yellow h4 { margin-bottom: 20px; }

/* Versetztes Doppel-Grid: schwarze Box links, gelbe Box rechts tiefer */
.grid-2-offset { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 90px; }
.grid-2-offset .box-black { padding: 65px 60px; }
.grid-2-offset .box-black h4 { margin-bottom: 20px; }
.grid-2-offset .box-yellow { margin-top: 155px; }
.grid-2-offset .box-light { margin-top: 155px; padding: 65px 60px; }

/* Text links + Deko-Rahmen rechts (Erleben. Reflektieren. Übertragen.) */
.split-deco { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; margin-top: 0; }
/* Deko-Rahmen: läuft wie die Coaching-Flächen randlos über den Bildschirmrand aus */
.deco-frame { border: 12px solid #eff0ee; min-height: 460px; position: relative; top: 60px; }
.split-deco > .deco-frame:last-child { border-right: none; border-radius: var(--border-radius-box) 0 0 var(--border-radius-box); margin-right: -50vw; }
.split-reverse > .deco-frame:first-child { border-left: none; border-radius: 0 var(--border-radius-box) var(--border-radius-box) 0; margin-left: -50vw; }
/* Gespiegelte Variante: Rahmen links, Text rechts (Führung-Seite).
   Der Textblock sitzt 100px tiefer; das margin-bottom gleicht die
   Verschiebung aus, damit der Abstand zum nächsten Block erhalten bleibt. */
.split-reverse { grid-template-columns: 0.85fr 1.15fr; margin-top: 120px; margin-bottom: 60px; }
.split-reverse > .deco-frame + div { position: relative; top: 60px; } /* Überschrift beginnt an der Oberkante des Rahmens */

/* Deko-Panels (Coaching-Seite): Flächen, die seitlich über den Bildschirmrand
   hinauslaufen. Rechts als gefüllte graue Fläche, links als Kontur-Fläche. */
.deco-panel-right {
    background-color: #e5e5e5;
    border-radius: var(--border-radius-box) 0 0 var(--border-radius-box);
    min-height: 590px;
    margin-left: 95px;
    margin-right: -50vw; /* läuft über den rechten Rand hinaus, Sektion schneidet ab */
    position: relative; top: 75px; /* sitzt 75px tiefer */
}
.deco-panel-left {
    border: 12px solid #eff0ee;
    border-left: none;
    border-radius: 0 var(--border-radius-box) var(--border-radius-box) 0;
    min-height: 600px;
    margin-right: 40px;
    margin-left: -50vw; /* läuft über den linken Rand hinaus */
}

/* Gelbe CTA-Box am Seitenende (ca. 57% Breite, Deko-Punkte rechts daneben).
   Sie schiebt sich unter die helle Box darüber - deren abgerundete Ecken
   überlappen die gelbe Fläche (Kachel-Optik laut Mockup). */
.cta-box {
    max-width: 57%; margin-top: -45px;
    border-radius: 0 var(--border-radius-box) var(--border-radius-box) var(--border-radius-box); /* keine Rundung oben links */
    padding-top: 95px; /* Überschrift sitzt 30px tiefer */
}
.section-sub-end .box-light { z-index: 3; } /* helle Box liegt über der gelben CTA */

/* ==========================================================================
   Kontakt-Seite: Punkte-Reihe, Funnel, Anliegen-Split
   ========================================================================== */
/* Horizontale Deko-Punkte im Hero (Animation: links->rechts rein, rechts->links raus,
   gesteuert vom bestehenden Scroll-Script in der footer.php) */
.deco-dots-row { display: flex; align-items: center; gap: 70px; padding-left: 85px; margin-top: 90px; }
.deco-dots-row .deco-dot { position: static; flex-shrink: 0; }

/* Innerer Rahmen: Funnel, Anliegen und Kontaktboxen sind schmaler als der Container */
.kontakt-inner { max-width: 940px; margin: 0 auto; position: relative; z-index: 2; }

/* Inhaltsbereich: Schwarz -> helle Wölbung hinter dem Funnel -> zurück ins Schwarz */
.section-kontakt-main {
    background: linear-gradient(180deg, #666666 0px, #eeeeee 420px, #e2e2e2 560px, var(--color-black) calc(100% - 50px), var(--color-black) 100%);
    padding: 40px 0 110px 0;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* Funnel-Box (helle Musterbox): Hintergrundgrafik komplett sichtbar */
.funnel-box { padding: 45px 50px 55px 50px; }
.funnel-box .box-light-pattern { background-size: 100% 100%; background-position: center; }
.funnel-title { text-align: left; color: var(--color-black); margin-bottom: 35px; font-size: 1.5rem; padding-left: 100px; } /* bündig mit der Frage in der Karte */
.funnel-card {
    background-color: var(--color-white);
    border-radius: 30px;
    padding: 45px 50px;
    max-width: calc(100% - 100px); /* weiße Karte 100px schmaler als die Box */
    margin-left: auto; margin-right: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    position: relative;
    z-index: 2;
}
.funnel-step { display: none; }
.funnel-step.is-active { display: block; }
.funnel-step h4 { color: var(--color-black); margin-bottom: 25px; }
.funnel-select {
    width: 100%; max-width: 760px;
    padding: 16px 48px 16px 24px;
    border-radius: 30px; border: none;
    background-color: #e5e5e5;
    font-family: var(--font-main); font-size: 0.95rem; color: var(--color-black);
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 22px center;
}
/* Aufklappmenü im Funnel (Script in page-kontakt.php): Das native <select> wird ausgeblendet
   und trägt weiterhin den Formularwert. Die Liste klappt IM Fluss nach unten auf (schiebt die
   Buttons nach unten, wird also nicht von der Box abgeschnitten), Gelb statt System-Blau. */
.funnel-select.is-enhanced { display: none; }
.funnel-select:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 2px; } /* Fallback ohne JS */
.tl-dropdown { position: relative; width: 100%; max-width: 760px; }
.tl-dropdown-toggle {
    display: block; width: 100%; text-align: left; position: relative;
    padding: 16px 56px 16px 24px;
    border-radius: 30px; border: none; cursor: pointer;
    background-color: #e5e5e5; color: var(--color-black);
    font-family: var(--font-main); font-size: 0.95rem; line-height: 1.4;
}
.tl-dropdown-toggle::after {
    content: ''; position: absolute; right: 22px; top: 50%; width: 14px; height: 9px; margin-top: -4px;
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    transition: transform 0.2s ease;
}
.tl-dropdown.is-open .tl-dropdown-toggle::after { transform: rotate(180deg); }
.tl-dropdown-toggle:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 2px; }
.tl-dropdown-list {
    list-style: none; margin: 10px 0 0 0; padding: 8px;
    background-color: var(--color-white); border: 2px solid #e5e5e5; border-radius: 30px;
}
.tl-dropdown-option {
    padding: 14px 22px; border-radius: 50px; cursor: pointer;
    font-size: 1rem; line-height: 1.4; color: var(--color-black);
}
.tl-dropdown-option:hover, .tl-dropdown-option:focus { background-color: var(--color-yellow); outline: none; } /* Fokus = gelbe Zeile */
.tl-dropdown-option[aria-selected="true"] { font-weight: 700; }

.funnel-nav { display: flex; gap: 15px; margin-top: 30px; }
.btn-yellow { background-color: var(--color-yellow); color: var(--color-black); border: 2px solid var(--color-yellow); }
.btn-yellow:hover { background-color: var(--color-black); border-color: var(--color-black); color: var(--color-white); }

/* Schritt-Anzeige rechts: Kreise mit gepunkteter Verbindungslinie */
.funnel-steps-indicator { display: flex; flex-direction: column; align-items: center; gap: 32px; position: relative; padding: 4px 0; }
.funnel-steps-indicator::before {
    content: ''; position: absolute; top: 10px; bottom: 10px; left: 50%;
    border-left: 2px dotted #cfcfcf; transform: translateX(-50%);
}
.funnel-step-dot {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
    border: 2px solid var(--color-yellow); color: var(--color-black);
    background-color: var(--color-white);
    position: relative; z-index: 1;
}
.funnel-step-dot.is-active { background-color: var(--color-yellow); }
.funnel-step-dot.is-done { background-color: var(--color-black); border-color: var(--color-black); color: var(--color-white); }

/* "Worum geht es bei Ihnen?" mit Briefumschlag rechts */
.kontakt-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 110px; }
.kontakt-split p { font-size: 0.95rem; max-width: 380px; }
.kontakt-mail-img { width: 385px; max-width: 100%; justify-self: center; filter: brightness(0) invert(0.45); opacity: 0.9; }

/* ==========================================================================
   Mobile Anpassungen (Greifen unter 900px)
   Alle Werte wurden pixelgenau aus dem InDesign-Mockup (1080px Breite)
   vermessen und mit Faktor ~0.37 auf reale Smartphone-Breite (~400-430px)
   umgerechnet. Desktop bleibt komplett unverändert.
   ========================================================================== */
/* ==========================================================================
   Burgermenü unter 1200px (ab 1189px Breite überlappt die Navigationspille
   das Logo; 1199px = Messwert plus Puffer). Header bleibt hier die schwebende
   Pille, nur die Navigation klappt als dunkles Panel darunter aus.
   ========================================================================== */
@media (max-width: 1199px) {
    .header-right { gap: 10px; width: auto; }
    .btn-start { display: none; }
    .menu-toggle { display: flex; }

    .main-navigation { 
        display: none; position: absolute; top: 100%; left: 0; width: 100%; margin-top: 10px; 
        background-color: #121212; border-radius: 30px; padding: 10px 0 40px 0; overflow: hidden; 
    }
    .main-navigation.is-active { display: block; }
    .main-navigation ul { flex-direction: column; width: 100%; align-items: stretch; } /* Einträge über volle Breite */
    .main-navigation li { width: 100%; }
    .main-navigation a { padding: 24px 25px; font-size: 1rem; text-align: center; color: var(--color-white); border-radius: 0; } /* Einträge höher (vorher 20px) */
    .main-navigation li:first-child a, .main-navigation li:last-child a { padding-left: 25px; padding-right: 25px; border-radius: 0; } /* hebt die Pillenform der Desktop-Randlinks auf: aktive Seite überall gradlinig */
    .main-navigation a:hover { background-color: #252525; }
    .main-navigation li.current-menu-item > a { background-color: var(--color-yellow); color: var(--color-black); } /* aktive Seite gelb mit schwarzem Text */

    /* Deko-Punktreihe neben "UNSERE LEISTUNGEN" braucht ~1090px Containerbreite (Überschrift
       + 250px Versatz + vier Punkte mit 70px Abstand). Unter 1200px ragt sie über den rechten
       Bildschirmrand hinaus - der horizontale Überlauf ließ die Seite zwischen 901 und 1142px
       schmaler rendern (schwarzer Balken rechts). Wie mobil: ausblenden. */
    .leistungen-dots { display: none; }
}

@media (max-width: 900px) {

    /* --- Container: Im Mockup sind alle Boxen/Texte ca. 78% breit (11% Rand je Seite),
           nicht 90% wie am Desktop --- */
    .container { width: 78%; }

    /* --- Header & Navigation (Burger-Regeln siehe Breakpoint 1199px) --- */
    /* Header fixiert (nicht mehr sticky): sticky hing vom Scroll-Container ab und lief mobil
       beim Runterscrollen aus dem Bild. Fixiert = immer vollständig oben. Die Höhe des Headers
       (Burger 35px + 2x14px Padding = 63px) wird dem body als Platzhalter vorangestellt. */
    .site-header { width: 100%; max-width: 100%; top: 0; left: 0; transform: none; border-radius: 0; padding: 14px 20px; position: fixed; }
    body { padding-top: 63px; }
    .site-branding img { height: 22px !important; } /* Logo im Mockup deutlich kleiner (~20px) */
    .main-navigation { margin-top: 0; border-radius: 0; padding: 10px 0 60px 0; } /* Panel mobil volle Breite, eckig, unten länger (vorher 30px) */

    /* --- Typografie mobil (aus Mockup gemessen) --- */
    h1 { line-height: 1.1; }                       /* H1-Größe (40px) passt bereits, nur Zeilenabstand enger */
    h2 { font-size: 1.5rem; }                      /* Box-Überschriften im Mockup ~24px, nicht 29px */
    .leistungen-header h2 { font-size: 2rem; }     /* Ausnahme: "UNSERE LEISTUNGEN" bleibt groß (~32px) */
    .section-hero p { font-size: 1rem !important; }/* Intro-Text mobil in normaler Fließtextgröße (überschreibt Inline-1.15rem) */

    /* --- SEKTION 1: Hero ---
       Mockup: Nur ~80px Abstand zwischen Header und H1.
       Die 60px Abstand unter dem Intro liegen mobil im Hero-Padding (nicht als Margin
       des Intro-Blocks): Ein Margin würde aus der Sektion herausfallen und den schwarzen
       main-Hintergrund als Balken zeigen. So läuft der Verlauf bis zur Naht durch. */
    .section-hero {
        padding: 80px 0 60px 0;
        background: linear-gradient(180deg, var(--color-black) 0%, var(--color-black) 70%, #777777 100%);
    }
    .section-hero .container > div:not([class]) { margin-bottom: 0; }
    .box-sabine { margin-top: 60px; box-shadow: none; } /* Abstand zur letzten Leistungsbox (-40px laut Korrektur) */
    .box-sabine-text { padding: 45px 34px 0 34px; }
    .box-sabine-text p { margin-bottom: 0; } /* Abstand Text -> Foto um 65px gekürzt (40px Absatz + 25px Padding) */
    .box-sabine-img-wrapper { justify-content: center; padding-right: 0; }
    .box-sabine-img-wrapper img.sabine { max-width: 85%; }
    .icon-x-sabine { width: 26px; height: 26px; right: 23%; top: 62%; } /* X sitzt im Mockup auf Hals-/Stifthöhe */

    /* --- SEKTION 2: Leistungen ---
       Der weiße Wrapper bekommt unten einen Auslauf ins Grau (#d0d0d0), an den der
       Kontaktbereich nahtlos anschließt. Der Kontaktbereich überlappt den Wrapper um
       50px (margin-top -50px), deshalb erreicht der Auslauf sein Grau bereits 50px vor
       dem Wrapper-Ende: Verlauf um 50px nach oben verlängert, keine sichtbare Naht. */
    .section-white-wrapper {
        padding: 45px 0 40px 0;
        background: linear-gradient(180deg, #777777 0px, var(--color-white) 880px, var(--color-white) calc(100% - 175px), #d0d0d0 calc(100% - 50px), #d0d0d0 100%); /* Grau läuft bis ins untere Drittel der 2. Box aus (vorher 420px) */
    }
    .leistungen-header { margin-bottom: 20px; padding-left: 0; margin-left: 0; }
    .leistungen-header h2 { padding-left: 24px; }
    /* minmax(0, 1fr) statt 1fr: Eine Spalte darf nie breiter werden als der Container.
       Mit 1fr wächst sie auf die Mindestbreite des längsten unteilbaren Inhalts
       (Button "ZUR FÜHRUNGSKRÄFTEENTWICKLUNG" = 381px) und die Boxen laufen rechts
       aus dem Bild. Lange Labels haben zusätzlich weiche Trennstellen (&shy;). */
    .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .box-black { padding: 44px 30px 32px 30px; }
    /* X-Icon der 1. Leistungsbox: im Mockup groß (~46px) und ragt unten rechts leicht ÜBER die Box hinaus */
    .icon-x-hover { width: 46px; height: 46px; right: -6px; bottom: -4px; }

    /* --- SEKTION 3+4: Kontaktbereich ---
       Verlauf laut Korrektur: Der Wrapper läuft von Weiß ins Hellgrau (#d0d0d0) aus,
       der Kontaktbereich bleibt in diesem Hellgrau hinter Tab, Text, Rückruf- und
       E-Mail-Karte und läuft ab der Mitte der Telefon-Karte ins Schwarz (Schwarz ab der
       Unterkante der Überschrift "Worum geht es bei Ihnen?", dann bis zum Footer).
       Verankerung vom Sektionsende: "Worum"-Block ~336px + 20px Abstand = Blockoberkante
       ~356px über dem Ende; darüber 30px + Symbolhöhe (~45,4vw) + 25px, dann die
       Telefon-Karte (~262px hoch) -> Kartenmitte = 542px + 45,4vw über dem Ende.
       Kein Padding unten: Abstand zum Footer wurde um 140px gekürzt
       (100px Padding + 40px am "Worum"-Block, s.u.). */
    .section-contact-area {
        padding: 0;
        background: linear-gradient(180deg, #d0d0d0 0px, #d0d0d0 calc(100% - 542px - 45.4vw), #000000 calc(100% - 300px), #000000 100%);
    }

    /* Briefumschlag mobil: steht im Fluss unter den Karten (Grid-Zeile "icon") - 25px
       Abstand zur Telefon-Karte wie zwischen den Karten, 30px zur Überschrift "Worum geht
       es bei Ihnen?" (deren margin-top, s.u.). Beide Abstände sind damit auf jeder
       Bildschirmbreite exakt, obwohl die Symbolhöhe (62,4vw x 0,727 = ~45,4vw) mitwächst.
       Flächiges Mittelgrau: brightness(0) + invert färbt das Icon fix auf ~#8c8c8c. */
    .bg-mail-icon {
        grid-area: icon;
        position: static; right: auto; top: auto; bottom: auto; transform: none;
        display: block; margin: 25px auto 0 auto;
        width: 62.4vw; /* 20% kleiner als zuvor (78vw) */
        opacity: 0.9;
        filter: brightness(0) invert(0.55);
    }

    .box-light { border-radius: var(--border-radius-box); padding: 48px 34px 40px 34px; }
    .mobil-only { display: inline-flex; margin-top: 10px; } /* "Unsere Arbeitsweise"-Button in der hellen Box */

    /* Formular-Grid: gelber Tab links, Text rechts, Felder darunter */
    .form-wrapper {
        grid-template-columns: 40px 1fr;
        grid-template-areas: 
            "yellow text"
            "fields fields"
            "icon icon"; /* Briefsymbol läuft mobil als eigene Zeile im Fluss mit (nicht absolut wie am Desktop) */
        gap: 0 22px;
        margin-top: 44px; /* Tab + "Ihre Zeit ist wertvoll." 80px höher: -50px Überlappung der Sektion, -30px hier */
    }
    .form-right { 
        grid-area: yellow;
        margin-left: -11vw; /* Tab blutet bis an den linken Bildschirmrand (11% = Container-Rand) */
        border-radius: 0 var(--border-radius-box) var(--border-radius-box) 0; 
        min-height: 310px;  /* Mockup: Tab ist höher als bisher (310 statt 250px) */
        margin-bottom: 20px; /* Abstand Tab -> Rückruf-Karte: 20px + 48px Feld-Padding (Korrektur: -100px) */
    }
    .text-rotated { transform: rotate(-90deg); font-size: 2rem; text-transform: none; } /* Mockup: "Kontakt" in Groß-/Kleinschreibung */
    .form-text { 
        grid-area: text;
        padding: 0; 
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Text "Ihre Zeit ist wertvoll." bleibt mobil schwarz (Inline-Farbe wie am Desktop),
       weil der Hintergrund dort jetzt hellgrau ist statt dunkel. */
    
    .form-fields { 
        grid-area: fields;
        padding: 48px 0 0 0; /* kein Platzhalter mehr: das Symbol steht im Fluss darunter */
    }
    .form-group { max-width: 100%; margin-bottom: 12px; } /* Felder liegen im Mockup enger beieinander */
    .form-input { padding: 17px 24px; font-size: 0.95rem; }
    textarea.form-input { height: 140px; }
    .form-checkbox { font-size: 0.8rem; margin: 12px 0 26px 0; }
    .form-checkbox label { color: var(--color-white) !important; }
    /* Absende-Button: bleibt schwarz (wie Mockup), wird aber mittig zentriert */
    .form-fields .btn-black { display: flex; width: fit-content; margin: 0 auto; }

    /* "Worum geht es bei Ihnen?": mobil ohne den Desktop-Einzug. Der Block liegt
       auf dem dunklen Teil des Verlaufs, Überschrift und Text bleiben weiß (Inline-Farbe). */
    .section-contact-area .container > div:not([class]) { padding-left: 0; margin-top: 30px !important; margin-bottom: 20px !important; } /* überschreibt Inline 100px/60px: 30px zum Symbol, 20px zum Footer */

    /* Kontakt-Boxen (Rückruf / E-Mail / Telefon) */
    .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 25px; }
    .box-white-small { padding: 38px 32px; }
    .form-fields .box-white-small { width: 100%; } /* volle Containerbreite (Desktop-Wert 372px ließ die Karten auf breiteren Handys links stehen -> Symbol wirkte außermittig) */
    .box-white-small h3, .box-white-small p { padding-left: 0 !important; } /* Inline-Einzug raus, alles bündig auf einer Linie */
    .box-white-small .btn { width: auto !important; } /* Buttons NICHT über volle Breite, sondern nur so breit wie der Text */
    /* Gelbes X: sitzt im Mockup mittig AUF der rechten Kante der E-Mail-Box, ca. 44px groß */
    .x-contact { width: 44px; height: 44px; left: auto; right: -20px; bottom: auto; top: 42%; transform: translateY(-50%); }

    /* --- Footer --- */
    .site-footer { padding: 60px 0 45px 0 !important; }
    .site-footer .container > div:first-child { gap: 50px !important; padding-bottom: 40px !important; }
    .footer-col { flex: 1 1 100%; max-width: 100% !important; margin-left: 0 !important; } /* Unternehmensspalte ohne den Desktop-Versatz (+30px inline) -> Überschrift und Box in einer Flucht mit Navigation/Rechtliches */
    /* Navigations-Spalte bleibt mobil erhalten (Funktion war korrekt) */
    .footer-nav-box { width: 100%; max-width: none; margin: 0; } /* gleiche Breite wie Startseite-Button und die anderen Footer-Boxen (vorher 350px) */
    .footer-col h4 { margin-left: 10px; } /* Überschriften Navigation / Das Unternehmen / Rechtliches 10px nach rechts */
    .footer-border-box { padding: 26px 30px; }
    .footer-border-box img { margin-left: 0 !important; margin-bottom: 24px !important; } /* Logo bündig links wie im Mockup */
    .site-footer p { text-align: inherit; } /* Adresse linksbündig, Webdesign-Credit rechtsbündig (statt alles zentriert) */
    /* Hinweis: KEIN padding-left:0 auf .footer-legal-links! Das würde das
       Box-Padding überschreiben und die Links an den Rahmen kleben. */
    .footer-legal-links a { margin-bottom: 12px; }
    .footer-legal-links a::before { display: none; } /* Punkt-Platzhalter raus -> Links bündig wie die Adresse */

    .text-restricted { max-width: 100%; }

    /* Fluchtlinien-Einzüge mobil wieder aufheben */
    .section-hero .container > h1,
    .section-hero .container > .divider-yellow,
    .section-hero .container > div:not([class]) { margin-left: 0; }

    /* --- Unterseiten mobil --- */
    .section-sub-hero {
        padding: 80px 0 40px 0;
        background: linear-gradient(180deg, var(--color-black) 0%, var(--color-black) 55%, #666666 100%);
    }
    /* Lange Wörter wie "MITARBEITENDEN-" brauchen mobil eine kleinere H1 */
    .section-sub-hero h1 { font-size: clamp(1.6rem, 7.6vw, 2.5rem); }
    .section-sub-hero p { font-size: 1rem !important; }
    .sub-inset { padding-left: 0; }

    .section-sub-main {
        padding: 45px 0 30px 0;
        background: linear-gradient(180deg, #666666 0px, #fdfdfd 420px, #f6f6f6 100%);
    }
    .section-sub-end {
        padding: 80px 0 100px 0;
        background: linear-gradient(180deg, #f6f6f6 0px, #f3f3f3 160px, var(--color-black) calc(100% - 50px), var(--color-black) 100%);
    }

    .sub-card-narrow { max-width: 100%; }
    .deco-dot, .deco-frame, .deco-panel-right, .deco-panel-left { display: none; } /* Deko-Elemente mobil ausblenden */

    .grid-2-offset { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 60px; } /* s. Hinweis bei .grid-2 */
    .grid-2-offset .box-black { padding: 44px 30px 36px 30px; }
    .grid-2-offset .box-yellow { margin-top: 0; }
    .grid-2-offset .box-light { margin-top: 0; padding: 48px 34px 40px 34px; }
    .box-yellow { padding: 44px 30px 36px 30px; }

    .split-deco { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 60px; }
    .split-reverse { grid-template-columns: minmax(0, 1fr); margin-top: 60px; margin-bottom: 0; }
    .split-reverse > .deco-frame + div { top: 0; }
    .cta-box { max-width: 100%; margin-top: 30px; padding-top: 44px; border-radius: var(--border-radius-box); }


    /* --- Kontakt-Seite mobil --- */
    .deco-dots-row, .leistungen-dots { display: none; } /* Punkte-Reihen mobil ausgeblendet */
    .kontakt-inner { max-width: 100%; }
    .section-kontakt-main {
        padding: 30px 0 90px 0;
        background: linear-gradient(180deg, #666666 0px, #eeeeee 320px, #e0e0e0 470px, var(--color-black) calc(100% - 60px), var(--color-black) 100%);
    }
    .funnel-box { padding: 36px 24px 40px 24px; }
    .funnel-title { font-size: 1.25rem; margin-bottom: 25px; padding-left: 22px; } /* bündig mit der Frage (Karten-Padding mobil) */
    .funnel-card { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; gap: 26px; max-width: 100%; }
    .funnel-steps-indicator { flex-direction: row; gap: 26px; order: -1; padding: 0 4px; width: fit-content; margin-left: auto; margin-right: auto; } /* zentriert, Linie endet an den Punkten */
    .funnel-steps-indicator::before {
        top: 50%; bottom: auto; left: 18px; right: 18px;
        border-left: none; border-top: 2px dotted #cfcfcf;
        transform: translateY(-50%);
    }
    .kontakt-split { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 95px; } /* Abstand zum Funnel (-75px) */
    .section-kontakt-main .grid-3 { margin-top: 45px !important; } /* Abstand Worum -> Boxen (-75px, überschreibt Inline-Wert) */
    .funnel-select { max-width: 250px; padding: 13px 40px 13px 18px; font-size: 0.9rem; } /* Fallback ohne JS */
    .tl-dropdown { max-width: 100%; } /* volle Kartenbreite, damit die Optionen einzeilig bleiben */
    .tl-dropdown-toggle { padding: 13px 46px 13px 18px; font-size: 0.9rem; }
    .tl-dropdown-toggle::after { right: 18px; }
    .tl-dropdown-list { padding: 6px; border-radius: 26px; }
    .tl-dropdown-option { padding: 12px 18px; font-size: 0.95rem; }
    .funnel-nav .btn { padding: 12px 26px; font-size: 0.8rem; } /* Buttons mobil schmaler */
    .kontakt-mail-img { display: none; }


    /* Rechtsseiten mobil */
    .section-legal { padding: 30px 0 90px 0; }
}

/* ==========================================================================
   Rechtstexte (Impressum, Datenschutz, Barrierefreiheit)
   Wird zusammen mit dem neuen page.php-Template genutzt: Überschrift und
   Textkörper sitzen dort beide auf der 60px-Fluchtlinie.
   ========================================================================== */
.section-legal {
    background: linear-gradient(180deg, #666666 0px, #fdfdfd 380px, #f3f3f3 calc(100% - 600px), var(--color-black) calc(100% - 60px), var(--color-black) 100%);
    padding: 40px 0 140px 0;
    color: var(--color-black);
}
.legal-content {
    max-width: 850px; /* Schmale Textspalte für optimale Lesbarkeit */
    color: var(--color-black);
}
.legal-content h2 {
    margin-top: 60px;
    margin-bottom: 20px;
    font-size: 1.6rem;
}
.legal-content h3 {
    margin-top: 40px;
    margin-bottom: 15px;
    font-size: 1.3rem;
}
.legal-content h4 {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 1.1rem;
}
.legal-content p, .legal-content ul {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.7;
}
.legal-content ul {
    padding-left: 20px;
}
.legal-content li {
    margin-bottom: 10px;
}
/* Trainlox-Style für Links im Fließtext */
.legal-content a {
    color: var(--color-black);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--color-yellow);
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
    transition: all 0.3s ease;
}
.legal-content a:hover {
    background-color: var(--color-yellow);
}

/* ==========================================================================
   Zugänglichkeit: reduzierte Bewegung respektieren
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .js-anim .deco-dot {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}