/* =====================================================================
   KGS TYPO  —  Einheitliches Ueberschriften-System
   ---------------------------------------------------------------------
   Referenz ist der Abschnitts-Titel von Online Coaching (.oc-section-h2).
   Er war die einzige Seite mit einem geschlossenen System; alle anderen
   Seiten hatten eigene Klassen mit eigenen Werten (48-80px, Gewicht
   400-540) und teilweise eine ANDERE Serifenschrift.

   Wichtig zum Schriftstack: 'KGSAmp' ist keine vollstaendige Schrift,
   sondern ein Ein-Zeichen-Shim (unicode-range U+0026) nur fuer das
   kaufmaennische Und. Alle uebrigen Zeichen fallen auf den ZWEITEN
   Eintrag durch - deshalb entschied bisher der zweite Eintrag ueber das
   Schriftbild: 'Playfair Display' auf den meisten Seiten, aber
   'Cormorant Garamond' auf personal-training, ernaehrung und
   firmenfitness. Hier wird der Stack einheitlich auf Playfair Display
   gesetzt, KGSAmp bleibt fuer das & davor.

   Geltungsbereich: .kgs-h2 ist ausschliesslich auf Abschnitts-
   Ueberschriften gesetzt. Bewusst NICHT enthalten:
     - Hero / erster Block (.premium-subtitle)
     - CTA-Block (.kgs-cta-h2)
     - Rechtsseiten und Kontakt-Formular (gar nicht ausgezeichnet)

   Spezifitaet: die Seiten-<style>-Bloecke stehen nach den <link>-Tags
   im Dokument und gewinnen bei gleicher Spezifitaet trotz !important.
   Die staerksten Seitenregeln haben drei Klassen
   (z.B. '.ne-labor-v4 .ne-section-h2.light' oder
   '.pt-nutrition-v3 .text-content h2'). Die wiederholte Klasse
   '.kgs-h2.kgs-h2.kgs-h2.kgs-h2' hebt die Spezifitaet gezielt darueber,
   ohne die Seitenregeln anfassen zu muessen.
   ===================================================================== */

html body .kgs-h2.kgs-h2.kgs-h2.kgs-h2 {
    font-family: 'KGSAmp', 'Playfair Display', serif !important;
    font-size: clamp(2.4rem, 5vw, 4rem) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -1.5px !important;
    font-style: normal !important;
    text-transform: none !important;
}

/* Gold-Akzent: alle bisherigen Auszeichnungs-Varianten der Seiten
   werden auf denselben Ton gebracht (span.highlight ist die Schreibweise
   aus Online Coaching, em/.gold kommen auf anderen Seiten vor). */
html body .kgs-h2.kgs-h2.kgs-h2 span.highlight,
html body .kgs-h2.kgs-h2.kgs-h2 em,
html body .kgs-h2.kgs-h2.kgs-h2 .gold,
html body .kgs-h2.kgs-h2.kgs-h2 .highlight {
    color: #CA8A04 !important;
    font-style: normal !important;
    font-weight: inherit !important;
    -webkit-text-fill-color: #CA8A04 !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

/* Fliesstext in den Abschnitten: Familie, Groesse und Farbe waren
   bereits seitenuebergreifend identisch (Montserrat 0.95rem), nur die
   Zeilenhoehe wich ab (1.6 auf index/ueber-mich gegen 1.75 sonst). */
body main section p,
body main section li {
    line-height: 1.75;
}

@media (max-width: 768px) {
    html body .kgs-h2.kgs-h2.kgs-h2.kgs-h2 {
        font-size: clamp(1.85rem, 8.5vw, 2.6rem) !important;
        letter-spacing: -0.8px !important;
        line-height: 1.12 !important;
        /* Deutsche Komposita sind lang ("Mikronaehrstoffversorgung").
           Einzelne Seiten setzen overflow-wrap: break-word auf ihre
           Ueberschriften - das trennt ohne Bindestrich mitten im Wort und
           laesst einzelne Buchstaben auf einer eigenen Zeile stehen.
           hyphens: auto trennt stattdessen nach den Regeln der im
           <html lang="de"> angegebenen Sprache und setzt einen Bindestrich. */
        -webkit-hyphens: auto !important;
        hyphens: auto !important;
    }
    body main section p,
    body main section li {
        line-height: 1.7 !important;
    }
}

/* Sehr schmale Geraete (iPhone SE u.ae.): eine Stufe zurueckhaltender,
   damit die langen Komposita gar nicht erst getrennt werden muessen. */
@media (max-width: 360px) {
    html body .kgs-h2.kgs-h2.kgs-h2.kgs-h2 {
        font-size: clamp(1.6rem, 7.4vw, 2.2rem) !important;
        letter-spacing: -0.5px !important;
    }
}
