/* ==========================================================================
   BILDER: HOEHE BLEIBT BEIM LAYOUT
   --------------------------------------------------------------------------
   Alle Bilder tragen jetzt width- und height-Attribute, damit der Browser
   den Platz vor dem Laden reservieren kann (Layout-Sprung, CLS). Diese
   Attribute sind aber Praesentationshinweise und setzen eine echte
   CSS-Hoehe: ein height="2400" machte das Hero-Bild auf auslandscoaching
   2592px hoch statt 1018px, weil dort im Design nur width und aspect-ratio
   deklariert sind, keine Hoehe.

   height: auto gibt die Hoehe an das Layout zurueck. Der Sprungschutz
   bleibt erhalten - moderne Browser leiten das Seitenverhaeltnis weiterhin
   aus den Attributen ab. Die Regel hat die geringstmoegliche Spezifitaet,
   damit jede vorhandene Designregel sie schlaegt.
   ========================================================================== */
img {
    height: auto;
}

/* =====================================================================
   SCHRIFTEN - LOKAL AUSGELIEFERT
   ---------------------------------------------------------------------
   Hier stand bis zum 11.08.2026 ein @import von fonts.googleapis.com.
   Damit ging bei jedem Seitenaufruf die IP-Adresse jedes Besuchers an
   Google - das ist der Punkt, fuer den das LG Muenchen I 2022
   Schadensersatz zugesprochen hat (Az. 3 O 17493/20), und Abschnitt 10
   der Datenschutzerklaerung haette dann nicht gestimmt.

   Montserrat, Playfair Display und Cormorant Garamond stehen unter der
   SIL Open Font License 1.1 und duerfen selbst ausgeliefert werden. Die
   Dateien liegen in assets/fonts/ (20 Dateien, Untermengen latin und
   latin-ext, zusammen rund 850 KB).

   font-display: swap haelt das Verhalten wie vorher: der Text ist sofort
   sichtbar und wird nachgezogen, sobald die Schrift geladen ist.
   ===================================================================== */

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-300-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-300-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-700-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-700-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/montserrat-300-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/montserrat-300-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/montserrat-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/montserrat-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat-600-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat-600-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-700-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-700-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/playfair-display-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/playfair-display-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/playfair-display-700-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/playfair-display-700-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Saubere, normale Ampersand-Glyphe (nur U+0026) fuer alle Serifen-Headings */
@font-face { font-family: 'KGSAmp'; src: local('Arial'), local('Roboto'), local('Helvetica Neue'), local('Segoe UI'); unicode-range: U+0026; }

/* 2. RADICAL CLEAN AMPERSAND FIX (Global) */
/* Ersetzt das verschnörkelte '&' von Playfair Display und Cormorant Garamond durch den schlichten Ampersand von Montserrat. 
   Greift automatisch für alle Überschriften und Fließtexte ohne HTML-Änderung. */
@font-face {
    font-family: 'Playfair Display';
    src: local('Montserrat'), local('Arial'), sans-serif;
    unicode-range: U+0026;
    font-style: normal;
    font-weight: 100 900;
}
@font-face {
    font-family: 'Playfair Display';
    src: local('Montserrat'), local('Arial'), sans-serif;
    unicode-range: U+0026;
    font-style: italic;
    font-weight: 100 900;
}
@font-face {
    font-family: 'Playfair Display';
    src: local('Montserrat'), local('Arial'), sans-serif;
    unicode-range: U+0026;
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Playfair Display';
    src: local('Montserrat'), local('Arial'), sans-serif;
    unicode-range: U+0026;
    font-style: normal;
    font-weight: 700;
}
@font-face {
    font-family: 'Playfair Display';
    src: local('Montserrat'), local('Arial'), sans-serif;
    unicode-range: U+0026;
    font-style: italic;
    font-weight: 400;
}
@font-face {
    font-family: 'Playfair Display';
    src: local('Montserrat'), local('Arial'), sans-serif;
    unicode-range: U+0026;
    font-style: italic;
    font-weight: 700;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: local('Montserrat'), local('Arial'), sans-serif;
    unicode-range: U+0026;
    font-style: normal;
    font-weight: 100 900;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: local('Montserrat'), local('Arial'), sans-serif;
    unicode-range: U+0026;
    font-style: italic;
    font-weight: 100 900;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: local('Montserrat'), local('Arial'), sans-serif;
    unicode-range: U+0026;
    font-style: normal;
    font-weight: 300;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: local('Montserrat'), local('Arial'), sans-serif;
    unicode-range: U+0026;
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: local('Montserrat'), local('Arial'), sans-serif;
    unicode-range: U+0026;
    font-style: normal;
    font-weight: 700;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: local('Montserrat'), local('Arial'), sans-serif;
    unicode-range: U+0026;
    font-style: italic;
    font-weight: 400;
}

:root {
    /* Bestehendes System - Refined for WCAG AA */
    --primary: #1C1917;
    --cta: #CA8A04;
    --background: #FAFAF9;
    --text: #292524;
    --accent: #78716C;

    /* Semantic Tokens (Luxury Edition) */
    --color-success: #2B4531; /* Tiefes, sattes Waldgrün */
    --color-error: #6B2727;   /* Gedecktes, tiefes Weinrot */
    --color-warning: #855A1A; /* Dunkles Bronze/Ocker */

    /* Layout Tokens */
    --radius-large: 40px;
    --section-gap: 160px;
    --container-margin: 120px;
    --section-padding: 96px 24px;
    --section-padding-mobile: 64px 20px;
    --block-gap: 32px;
    --button-padding: 16px 36px;
    --button-padding-mobile: 14px 28px;
    --glass-bg: rgba(250, 250, 249, 0.45);
    --glass-border: rgba(250, 250, 249, 0.8);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif !important;
    background-color: var(--background);
    color: var(--text);
    line-height: 1.8;
    font-size: 1.1rem;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   UNTERUEBERSCHRIFTEN (.kgs-uh)
   --------------------------------------------------------------------------
   Einige Zwischenueberschriften standen als h4 direkt unter einer h2. Diese
   Luecke in der Gliederung ist behoben - sie sind jetzt h3.

   Optisch muessen sie aber weiter wie ein h4 aussehen. Zwei Dinge stehen dem
   im Weg:

   1. Die Sammelregel h1, h2, h3 unten setzt eine Serifenschrift mit
      !important, dazu Farbe, margin-top und font-weight. Ein h4 bekommt das
      nicht. Deshalb sind Elemente mit .kgs-uh dort ausgenommen. Die
      Ausnahme steht in :where(), das keine Spezifitaet beitraegt - der
      Selektor bleibt exakt so stark wie vorher (0,0,1), die Kaskade
      verschiebt sich also an keiner Stelle.

   2. Der Browser gibt h3 eine groessere Grundschrift als h4 (1.17em statt
      1em). Die Regel darunter stellt den h4-Wert wieder her. Sie steht
      komplett in :where(), hat damit die Spezifitaet 0,0,0 und wird von
      jeder vorhandenen Designregel geschlagen - sie greift nur dort, wo
      sonst der Browserstandard gelten wuerde.

      Die Aussenabstaende werden hier bewusst NICHT gesetzt: der Reset
      * { margin: 0 } weiter oben nullt sie bereits, und zwar fuer h3 und h4
      gleichermassen. Eine eigene margin-Angabe wuerde diesen Reset
      ueberschreiben (gleiche Spezifitaet, aber spaeter im Dokument) und die
      Footer-Ueberschriften um 18 px nach unten schieben.

   Die zugehoerigen Designregeln wurden von "X h4" auf "X :is(h3,h4)"
   umgestellt. :is(h3,h4) hat dieselbe Spezifitaet wie h4, auch dort
   aendert sich nichts.
   ========================================================================== */
:where(h3.kgs-uh) {
    font-size: 1em;
}

/* TYPOGRAPHY */
h1, h2, h3:not(:where(.kgs-uh)) {
    font-family: 'KGSAmp', 'Playfair Display', serif !important;
    color: var(--primary);
    margin-top: 0;
    font-weight: 400;
}

h1 {
    font-size: clamp(3rem, 10vw, 5.5rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 700;
    animation: breathGoldShimmer 4s ease-in-out infinite;
}

h2 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}

@keyframes breathGoldShimmer {
    0%, 100% { text-shadow: 0 0 10px rgba(202, 138, 4, 0.0); }
    50% { text-shadow: 0 0 20px rgba(202, 138, 4, 0.2), 0 0 40px rgba(202, 138, 4, 0.1); }
}

.eyebrow, .quote, blockquote {
    display: block;
    font-family: 'KGSAmp', 'Cormorant Garamond', serif !important;
    font-weight: 300;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--cta) !important;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 18px;
}

.section-surface {
    padding: 160px 20px;
    background: #FAFAF9;
}

.text-center {
    text-align: center;
}

.centered-block {
    max-width: 800px;
    margin: 0 auto;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-note {
    font-size: 0.85rem;
    margin-bottom: 15px;
    color: #A8A29E;
}

.zg-header {
    text-align: center;
    margin-bottom: 70px;
}

.zg-eyebrow {
    display: block;
    font-family: 'KGSAmp', 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: #CA8A04;
    margin-bottom: 15px;
}

.zg-heading {
    font-family: 'KGSAmp', 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    color: #1C1917;
    margin: 0 0 30px 0;
    line-height: 1.1;
    letter-spacing: -1px;
}

.cta-section h2 {
    margin-bottom: 32px;
}

.cta-section p {
    margin-bottom: 48px;
}

.section-note {
    color: #CA8A04;
    max-width: 800px;
    margin: 40px auto 0;
    font-style: italic;
    font-family: 'KGSAmp', 'Cormorant Garamond', serif;
    font-size: 1.3rem;
}

.section-lead {
    color: #1C1917;
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1.2rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
}

#zielgruppe {
    position: relative;
    padding: 120px 40px 40px 40px;
    background-color: #FAFAF9;
    overflow: hidden;
    box-sizing: border-box;
}

.zielgruppe-glow {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    height: 50vw;
    background: radial-gradient(ellipse, rgba(202, 138, 4, 0.05) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.page-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

p, a, li, .btn-login, .dropdown-content a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400;
}

/* 1. Globale Focus-Accessibility (Das eiserne Gesetz) */
:focus-visible {
    outline: 3px solid rgba(202, 138, 4, 0.6) !important;
    outline-offset: 4px !important;
    border-radius: 4px;
    transition: outline-color 0.2s ease-in-out;
}

/* 2. Luxus-Formularfelder (Inputs & Textareas) */
input[type="text"], input[type="email"], textarea {
    background: var(--background);
    border: 1px solid var(--accent);
    color: var(--text);
    padding: 16px 20px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    width: 100%;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

input:focus, textarea:focus {
    outline: none !important;
    border-color: var(--cta);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(202, 138, 4, 0.15), 0 8px 16px rgba(28, 25, 23, 0.05);
    transform: translateY(-1px);
}

/* 3. Floating Labels (Editorial Style) */
.input-group {
    position: relative;
    margin-bottom: 24px;
}

.input-group label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'KGSAmp', 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: var(--accent);
    pointer-events: none;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    padding: 0 4px;
}

.input-group textarea ~ label {
    top: 30px;
}

.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:not(:placeholder-shown) ~ label {
    top: 0;
    transform: translateY(-50%) scale(0.85);
    color: var(--cta);
    background: var(--background);
    font-weight: 600;
}

/* INTERACTIVE ELEMENTS TIMING */
.glass-panel, .btn-master, .btn-checkout, .bento-grid a {
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow; /* Hardware-Beschleunigung */
}

/* Glass Panel Classes */
.glass-panel {
    background: rgba(250, 250, 249, 0.7); /* WCAG AA Contrast optimized */
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(250, 250, 249, 0.4);
    box-shadow: 0 8px 32px rgba(28, 25, 23, 0.05);
    border-radius: 24px;
    padding: 40px;
    color: var(--primary);
}

.glass-panel:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 32px 64px rgba(28, 25, 23, 0.12), inset 0 0 0 1px rgba(202, 138, 4, 0.3);
    background: rgba(250, 250, 249, 0.8);
}

.glass-panel-dark {
    background: rgba(28, 25, 23, 0.45);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(202, 138, 4, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border-radius: 24px;
    padding: 40px;
    color: var(--background);
}

.glass-panel-dark:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--cta);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.3);
}

/* Semantic Feedback */
.error-message {
    color: var(--color-error);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 8px;
}

.success-message {
    color: var(--color-success);
    background: rgba(43, 69, 49, 0.1);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--color-success);
}

/* HERO */
.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 40px 60px 40px;
}

.hero-mesh-bg {
    position: relative;
    background: var(--primary);
    overflow: hidden;
    z-index: 1;
}

/* Massives dunkles Overlay für Premium-Kontrast */
.hero-mesh-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 0;
    pointer-events: none;
}

/* Der animierte Aurora-Glow */
.hero-mesh-bg::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(202, 138, 4, 0.15), transparent 60%),
                radial-gradient(circle at 80% 20%, rgba(250, 250, 249, 0.1), transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(202, 138, 4, 0.05), transparent 50%);
    background-size: 100% 100%;
    animation: luxuryBreath 20s ease-in-out infinite alternate;
    z-index: -1;
    pointer-events: none;
}

/* Die extrem langsame Keyframe-Animation (simuliert tiefe Atmung) */
@keyframes luxuryBreath {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1) translate(2%, 2%);
        opacity: 1;
    }
    100% {
        transform: scale(1) translate(-2%, -2%);
        opacity: 0.8;
    }
}

.hero-mesh-bg h1, 
.hero-mesh-bg h2 {
    color: var(--background) !important;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.hero-mesh-bg p {
    color: rgba(250, 250, 249, 0.85) !important;
}

.hero-mesh-bg .btn-master {
    background: rgba(250, 250, 249, 0.1);
    border-color: rgba(202, 138, 4, 0.4);
}

.hero-content {
    max-width: 1000px;
    position: relative;
    z-index: 2;
}

.hero .btn-master {
    margin-top: 60px;
}

/* PAGE-SPECIFIC LAYOUT HELPERS */
.k-dropdown {
    position: relative;
    display: inline-block;
}

.k-nav-item.active,
.mobile-menu-content a.active {
    color: #CA8A04 !important;
}

.btn-row {
    margin-top: 40px;
}

.section-glow {
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(202, 138, 4, 0.04) 0%, rgba(5, 5, 5, 0) 70%);
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

#master-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #050505;
    overflow: hidden;
    padding: clamp(90px, 10vw, 100px) 24px 140px;
    box-sizing: border-box;
}

#master-hero .hero-content-wrapper {
    position: relative;
    z-index: 10;
    max-width: 800px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

#master-hero .premium-eyebrow {
    display: inline-block;
    background: rgba(202, 138, 4, 0.1);
    border: 1px solid rgba(202, 138, 4, 0.3);
    color: #CA8A04;
    padding: 6px 16px;
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

#master-hero .premium-h1 {
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    line-height: 1.1;
    color: #FFFFFF;
    margin: 0 0 16px 0;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#master-hero .premium-subtitle {
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    color: #CA8A04;
    margin: 0 0 20px 0;
    font-style: italic;
}

#master-hero .premium-p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #A8A29E;
    max-width: 650px;
    margin: 0 auto 28px auto;
}

#schwerpunkte {
    position: relative;
    padding: clamp(90px, 10vw, 130px) 24px;
    box-sizing: border-box;
    background-color: #050505;
    overflow: hidden;
}

#schwerpunkte .schwerpunkte-grid {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

#schwerpunkte .section-glow {
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(202, 138, 4, 0.04) 0%, rgba(5, 5, 5, 0) 70%);
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

#schwerpunkte .logo-glow-wrapper {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 80px;
    width: 250px;
    height: 250px;
}

#schwerpunkte .logo-glow-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(202, 138, 4, 0.5) 0%, rgba(202, 138, 4, 0) 70%);
    border-radius: 50%;
    filter: blur(35px);
    animation: godModeAura 4s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

#schwerpunkte .logo-glow-img {
    position: relative;
    z-index: 2;
    max-width: 250px;
    height: auto;
    display: block;
    animation: godModeLevitate 6s ease-in-out infinite;
    transform-origin: center center;
}

#schwerpunkte .logo-cta {
    margin-top: 20px;
}

/* ==========================================================================
   DAS UNIVERSAL PREMIUM BUTTON SYSTEM (KGS MASTER)
   ========================================================================== */

/* 1. DIE DNA (Form, Schrift, Abstände - überall gleich!) */
.btn-master {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 42px !important;
    border-radius: 100px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* ========================================================================== */

/* 2. PROFIL A: FÜR SCHWARZE HINTERGRÜNDE (z.B. Hero, Block 3) */
.btn-dark-mode {
    background: rgba(12, 10, 9, 0.5) !important; 
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(202, 138, 4, 0.6) !important;
    color: #FAFAF9 !important; /* Helles Weiß/Beige */
    box-shadow: 0 0 25px rgba(202, 138, 4, 0.15), inset 0 0 10px rgba(202, 138, 4, 0.05) !important;
}

/* Hover: Die Liquid Gold Explosion */
.btn-dark-mode:hover {
    background: rgba(202, 138, 4, 0.2) !important;
    border-color: #CA8A04 !important;
    color: #FFFFFF !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 40px rgba(202, 138, 4, 0.4), inset 0 0 20px rgba(202, 138, 4, 0.2) !important;
    transform: translateY(-3px) !important;
}

/* ========================================================================== */

/* 3. PROFIL B: FÜR WEISSE HINTERGRÜNDE (z.B. Auslandscoaching, Philosophie) */
.btn-light-mode {
    background: #0C0A09 !important; /* Massiver Onyx-Block für brutalen Kontrast */
    border: 1px solid rgba(202, 138, 4, 0.8) !important;
    color: #CA8A04 !important; /* Goldene Schrift im Ruhezustand */
    /* Tiefer, harter schwarzer Schatten kombiniert mit leichtem Gold-Glow */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 0 15px rgba(202, 138, 4, 0.1) !important;
}

/* Hover: Massives Gold */
.btn-light-mode:hover {
    background: #CA8A04 !important; /* Füllt sich massiv mit Gold */
    border-color: #CA8A04 !important;
    color: #FFFFFF !important; /* Schrift knallt in strahlendem Weiß */
    box-shadow: 0 25px 50px rgba(202, 138, 4, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-3px) !important;
}

/* --------------------------------------------------------------------------
   BUTTON-ALIGNMENT IN DEN KARTEN
   -------------------------------------------------------------------------- */
.glass-card .btn-solid, 
.glass-card .btn-accent,
.premium-card .btn-solid,
.premium-card .btn-accent {
    width: 100% !important; /* Zwingt die Buttons in den Karten auf volle Breite */
    margin-top: auto !important; /* Presst sie bündig an den Boden der Karte */
}

.text-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 1.5rem;
}

.text-link:hover {
    color: var(--cta);
    transform: translateX(5px);
}

/* Global Link Hover */
a:not(.btn-primary):not(.btn-checkout):not(.text-link):hover {
    color: var(--cta);
    opacity: 0.8;
}

/* LAYOUT */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

.split-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
    margin-bottom: var(--container-margin);
    padding: var(--section-padding);
}

.split-section.reverse {
    flex-direction: row-reverse;
}

.text-block {
    flex: 1;
    max-width: 600px;
}

.text-block .eyebrow {
    margin-bottom: 16px;
}

.image-block {
    flex: 1;
    display: flex;
    justify-content: center;
}

.image-block img {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 32px;
    box-shadow: 0 32px 64px rgba(28, 25, 23, 0.1);
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

.split-section:hover .image-block img {
    transform: translateY(-10px) scale(1.02);
}

.price-grid {
    display: flex;
    gap: 32px;
    margin-top: 64px;
}

@media (max-width: 1024px) {
    .price-grid {
        flex-direction: column;
    }
}

/* EXPERTISE SECTION */
.expertise-section {
    margin-bottom: var(--container-margin);
    padding: var(--section-padding);
}

.glass-bento {
    background: rgba(250, 250, 249, 0.35);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(250, 250, 249, 0.6);
    border-radius: var(--radius-large);
    padding: 80px;
    width: 100%;
    box-shadow: 0 30px 60px rgba(28, 25, 23, 0.03);
    text-align: center;
}

/* REVEAL ANIMATIONS */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* EDITORIAL LAYOUT (RESET) */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--section-padding);
    display: flex;
    align-items: center;
    gap: 56px;
}

.row-reverse {
    flex-direction: row-reverse;
}

.text-content {
    flex: 1;
}

.image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
}

.image-wrapper > img {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(28, 25, 23, 0.08);
    transition: transform 0.8s ease;
}

.image-wrapper > img:hover {
    transform: translateY(-10px);
}

@media (max-width: 1024px) {
    .section-container {
        flex-direction: column;
        text-align: center;
        padding: 80px 20px;
    }
    .row-reverse {
        flex-direction: column;
    }
}

/* LUXURY REVEAL ANIMATION */
@keyframes luxuryReveal {
    from { opacity: 0; transform: translateY(30px); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* DIPLOMA GRID - Struktur optimiert */
.diploma-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.diploma-card {
    opacity: 0; /* Standardmäßig unsichtbar */
    background: rgba(250, 250, 249, 0.45); /* var(--background) Cream */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(120, 113, 108, 0.1); /* var(--accent) dezent */
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(28, 25, 23, 0.03);
    text-align: center;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.diploma-card span {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary);
    line-height: 1.4;
}

.diploma-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--cta);
    background: rgba(250, 250, 249, 0.8);
    box-shadow: 0 15px 40px rgba(28, 25, 23, 0.06);
}

.diploma-card.is-visible {
    animation: luxuryReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Process Grid & Cards */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-top: 60px;
}

.process-card {
    opacity: 0;
    position: relative;
    background: var(--primary);
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}

.process-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 0 0 1px var(--cta);
}

.process-card .step-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--cta);
    opacity: 0.3;
    font-size: 1.5rem;
}

.process-card h3 {
    font-family: 'KGSAmp', 'Playfair Display', serif !important;
    color: var(--background) !important;
    margin-bottom: 16px;
    font-size: 1.5rem;
}

.process-card p {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--background) !important;
    opacity: 0.8;
    line-height: 1.7;
    margin-bottom: 0;
}

.process-card.is-visible {
    animation: luxuryReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered Delay */
.process-card:nth-child(1) { animation-delay: 0.1s; }
.process-card:nth-child(2) { animation-delay: 0.25s; }
.process-card:nth-child(3) { animation-delay: 0.4s; }
.process-card:nth-child(4) { animation-delay: 0.55s; }

/* Staggered Delay Diploma */
.diploma-card:nth-child(1) { animation-delay: 0.1s; }
.diploma-card:nth-child(2) { animation-delay: 0.25s; }
.diploma-card:nth-child(3) { animation-delay: 0.4s; }
.diploma-card:nth-child(4) { animation-delay: 0.55s; }
.diploma-card:nth-child(5) { animation-delay: 0.7s; }
.diploma-card:nth-child(6) { animation-delay: 0.85s; }

/* ULTRA-COMPACT SIGNATURE FOOTER */
.footer {
    background: var(--primary);
    padding: 40px 5%;
    color: var(--background);
    display: block !important;
    position: relative !important;
    width: 100% !important;
    margin-top: 0 !important;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-logo img {
    max-height: 60px;
    width: auto;
    filter: none;
    display: block;
}

.footer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.footer-nav {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-nav a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem;
    color: rgba(250, 250, 249, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #FFFFFF;
}

.copyright {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.6rem;
    color: rgba(250, 250, 249, 0.4);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}

.footer-social {
    display: flex;
    gap: 20px;
    align-items: center;
}

.footer-social a {
    color: var(--background);
    opacity: 0.8;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.footer-social a:hover {
    color: var(--cta);
    opacity: 1;
    transform: translateY(-2px);
}

.footer-social svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* HARTE ABSTÄNDE FÜR DEN ÜBERGANG ZUM FOOTER */
.cta-section {
    padding: 120px 24px !important;
    margin-bottom: 0 !important;
    display: block !important;
    position: relative !important;
    text-align: center;
}

.cta-section > div, .cta-finale {
    background: linear-gradient(145deg, #1C1917, #050505) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(202, 138, 4, 0.3) !important;
    border-radius: 30px !important;
    padding: 80px 40px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 40px 80px rgba(0,0,0,0.5), inset 0 0 40px rgba(202, 138, 4, 0.05) !important;
    box-sizing: border-box !important;
    /* Soft border lighting transition */
    transition: transform 0.15s ease-out, border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease !important;
}

/* Hover glow card lift and border glow */
.cta-section > div:hover, .cta-finale:hover {
    border-color: rgba(202, 138, 4, 0.7) !important;
    box-shadow: 0 50px 100px rgba(0,0,0,0.7), 0 0 50px rgba(202, 138, 4, 0.35), inset 0 0 30px rgba(202, 138, 4, 0.1) !important;
}

/* Glowing golden light behind the card - default ambient light */
.cta-section > div::after, .cta-finale::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: rgba(202, 138, 4, 0.08) !important;
    filter: blur(70px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transition: all 0.6s ease;
}

/* Mouse cursor spotlight glow effect (Desktop only) */
.cta-section > div::before, .cta-finale::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle 350px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(202, 138, 4, 0.22), transparent 85%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.cta-section > div:hover::before, .cta-finale:hover::before {
    opacity: 1;
}

/* Ensure contents sit on top of the glowing background */
.cta-section > div > *, .cta-finale > * {
    position: relative !important;
    z-index: 2 !important;
}

.cta-section h2, .cta-finale h2 {
    font-family: 'KGSAmp', 'Playfair Display', serif !important;
    font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
    color: #FAFAF9 !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
}

.cta-section p, .cta-finale p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    color: #A8A29E !important;
    max-width: 600px !important;
    margin: 0 auto 40px auto !important;
    line-height: 1.7 !important;
}

.cta-section .btn-master, .cta-finale .btn-master {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .cta-section {
        padding: 60px 16px !important;
    }
    .cta-section > div, .cta-finale {
        padding: 50px 24px !important;
        border-radius: 24px !important;
    }
    .cta-section > div::before, .cta-finale::before {
        background: radial-gradient(circle 200px at 50% 50%, rgba(202, 138, 4, 0.15), transparent 75%) !important;
        opacity: 1 !important;
        animation: mobileGlowPulse 4s ease-in-out infinite alternate !important;
    }
}

@keyframes mobileGlowPulse {
    0% { transform: scale(0.92); opacity: 0.6; }
    100% { transform: scale(1.08); opacity: 1.0; }
}

@media (max-width: 1024px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .footer-center {
        order: 2;
    }
    .footer-social {
        order: 3;
    }
}


@media (max-width: 1024px) {
    .split-section {
        flex-direction: column;
        gap: 60px;
        text-align: center;
    }
    .glass-bento {
        padding: 40px;
    }
}

/* ==========================================================================
   KGS MASTER NAVIGATION SYSTEM (Unified Cleanup)
   ========================================================================== */

/* Navbar Main Layout */
.nav-container {
    position: fixed;
    top: 32px;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.navbar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    max-width: 1200px;
    background: rgba(12, 10, 9, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(202, 138, 4, 0.4);
    border-radius: 100px;
    padding: 12px 32px;
    box-shadow: 0 0 30px rgba(202, 138, 4, 0.15);
    transition: all 0.4s ease;
}

.navbar-logo {
    height: 40px;
    display: block;
    z-index: 100;
}

.navbar-logo img {
    height: 100%;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.1));
}

.nav-links-desktop {
    display: flex;
    gap: 8px;
    align-items: center;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.navbar-login-btn {
    border: 1px solid rgba(202, 138, 4, 0.6);
    color: #CA8A04;
    padding: 10px 24px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 0.75rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.navbar-login-btn:hover {
    background: #CA8A04;
    color: #FFFFFF;
    box-shadow: 0 0 20px rgba(202, 138, 4, 0.4);
}

/* K-Classes for Navigation Items */
.k-nav-item {
    color: #FAFAF9 !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 12px 20px !important;
    border-radius: 100px !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
}

.k-nav-item:hover, 
.k-dropdown:hover > .k-nav-item {
    background: rgba(202, 138, 4, 0.15) !important;
    border-color: rgba(202, 138, 4, 0.9) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 25px rgba(202, 138, 4, 0.4), inset 0 0 10px rgba(202, 138, 4, 0.15) !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

.k-drop-wrapper {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px);
    padding-top: 15px;
    z-index: 10000 !important;
}

.k-dropdown:hover .k-drop-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0px) !important;
}

.k-drop-content {
    background: rgba(12, 10, 9, 0.95) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(202, 138, 4, 0.5) !important;
    border-radius: 20px !important;
    padding: 12px !important;
    min-width: 260px !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 20px rgba(202, 138, 4, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.k-drop-link {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    border-radius: 100px !important;
    border: 1px solid transparent !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    white-space: nowrap !important;
    display: block !important;
}

.k-drop-link:hover {
    color: #FFFFFF !important;
    background: rgba(202, 138, 4, 0.15) !important;
    border-color: rgba(202, 138, 4, 0.9) !important;
    box-shadow: 0 0 15px rgba(202, 138, 4, 0.3) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 1024px) {
    .nav-links-desktop {
        display: none !important;
    }
    .burger-menu {
        display: flex !important;
    }
    .navbar-login-btn {
        display: none !important;
    }
}

/* CHECKOUT MODAL */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(28, 25, 23, 0.85);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
}

.modal-content {
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1;
}

.warning-box {
    background: rgba(202, 138, 4, 0.1);
    border-left: 4px solid var(--cta);
    padding: 20px;
    margin: 24px 0;
    border-radius: 8px;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
    font-size: 0.9rem;
    cursor: pointer;
}

.checkbox-container input {
    margin-top: 4px;
}

.btn-checkout {
    cursor: pointer;
}

.btn-order {
    width: 100%;
    opacity: 0.5;
    pointer-events: none;
}

.btn-order.active {
    opacity: 1;
    pointer-events: all;
}

/* EVIDENCE PILLS — WISSENSCHAFTLICHER GRUNDLAGE */
.evidence-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 40px auto;
    max-width: 1000px;
}

.evidence-pill {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 100px;
    border: 1px solid rgba(202, 138, 4, 0.4);
    background: transparent;
    color: var(--text);
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
}

.evidence-pill:hover {
    background: rgba(202, 138, 4, 0.1);
    color: var(--cta);
    border-color: var(--cta);
    transform: translateY(-2px);
}

/* SELECTION DASHBOARD — TARGET CARDS */
@keyframes slideFromLeft {
    from { opacity: 0; transform: translateX(-60px); filter: blur(5px); }
    to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes slideFromRight {
    from { opacity: 0; transform: translateX(60px); filter: blur(5px); }
    to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

.target-grid {
    display: flex;
    gap: 40px;
    margin-top: 80px;
    width: 100%;
}

.target-card {
    flex: 1;
    border-radius: 32px;
    padding: 60px;
    box-shadow: 0 30px 60px rgba(28, 25, 23, 0.1);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0; /* Für den Observer */
    display: flex;
    flex-direction: column;
}

.target-card.suitable {
    background: var(--background);
    border: 1px solid rgba(202, 138, 4, 0.2);
    color: var(--text);
}

.target-card.unsuitable {
    background: var(--primary);
    color: var(--background);
    border: 1px solid rgba(250, 250, 249, 0.05);
}

.target-card.animate-left { animation: slideFromLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.target-card.animate-right { animation: slideFromRight 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

.target-card h3 {
    font-family: 'KGSAmp', 'Playfair Display', serif !important;
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 40px;
    color: inherit !important;
}

.target-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.target-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(120, 113, 108, 0.1);
    transition: all 0.3s ease;
}

.target-item:last-child { border-bottom: none; }

.suitable .target-item:hover {
    background: rgba(202, 138, 4, 0.03);
    padding-left: 10px;
}

.unsuitable .target-item:hover {
    background: rgba(250, 250, 249, 0.03);
    padding-left: 10px;
}

.target-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 4px;
}

.target-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 400;
}

@media (max-width: 1024px) {
    .target-grid {
        flex-direction: column;
    }
    .target-card {
        padding: 40px;
    }
}

/* ROADMAP SECTION — WIE ICH ARBEITE */
@keyframes stepFlipIn {
    0% { opacity: 0; transform: perspective(1000px) rotateX(-15deg) translateY(30px); filter: blur(4px); }
    100% { opacity: 1; transform: perspective(1000px) rotateX(0) translateY(0); filter: blur(0); }
}

.roadmap-container {
    position: relative;
    max-width: 1000px;
    margin: 80px auto 0;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
}

.roadmap-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--cta);
    opacity: 0.3; /* Genau wie gefordert */
    transform: translateX(-50%);
    z-index: 1;
    transition: all 0.6s ease;
}

.roadmap-step {
    position: relative;
    width: 50%;
    margin-bottom: 60px;
    z-index: 2;
    display: flex;
}

.roadmap-step:nth-child(odd) {
    align-self: flex-start;
    justify-content: flex-end;
    padding-right: 60px;
}

.roadmap-step:nth-child(even) {
    align-self: flex-end;
    justify-content: flex-start;
    padding-left: 60px;
}

.step-dot {
    position: absolute;
    top: 50px;
    width: 16px;
    height: 16px;
    background: var(--primary);
    border: 2px solid var(--cta);
    border-radius: 50%;
    z-index: 3;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.roadmap-step:nth-child(odd) .step-dot { right: -8px; }
.roadmap-step:nth-child(even) .step-dot { left: -8px; }

.step-card {
    background: var(--primary);
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    opacity: 0; /* Für den Observer */
    border: 1px solid rgba(202, 138, 4, 0.1);
}

.step-card.is-visible {
    animation: stepFlipIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* INTERAKTIVE EFFEKTE (GLOW & LIFT - SUBDUED) */
.roadmap-step:hover .step-card {
    transform: translateY(-5px); /* Lift-Effekt */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); /* Dezenterer Schatten */
    border-color: rgba(202, 138, 4, 0.2);
}

.roadmap-step:hover .step-label {
    text-shadow: 0 0 5px rgba(202, 138, 4, 0.3); /* Dezentester Glow */
    color: var(--cta);
}

.roadmap-step:hover h3 {
    color: var(--cta) !important;
    transition: color 0.4s ease;
}

.roadmap-step:hover .step-dot {
    background: var(--cta);
    box-shadow: 0 0 10px var(--cta); /* Reduzierter Glow am Dot */
    transform: scale(1.2);
}

.step-label {
    display: block;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--cta);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    transition: all 0.4s ease;
}

.step-card h3 {
    font-family: 'KGSAmp', 'Playfair Display', serif !important;
    color: var(--background) !important;
    margin-bottom: 16px;
    font-size: 1.8rem;
}

.step-card p {
    font-family: 'Montserrat', sans-serif !important;
    color: rgba(250, 250, 249, 0.8) !important; /* 0.8 Opacity */
    line-height: 1.8;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .roadmap-line { left: 20px; transform: none; }
    .roadmap-step {
        width: 100%;
        padding-left: 50px !important;
        padding-right: 0 !important;
        align-self: flex-start !important;
    }
    .roadmap-step:nth-child(odd) .step-dot,
    .roadmap-step:nth-child(even) .step-dot { left: 12px; right: auto; }
}

/* MASTERY KACHEL & ANIMATIONS */
@keyframes masteryReveal {
    from { opacity: 0; transform: translateY(30px); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.mastery-panel {
    background: var(--primary); /* Stone Dark */
    border: 1px solid rgba(202, 138, 4, 0.15); /* Gold, extrem dezent */
    border-radius: 32px;
    padding: 60px 50px; /* Erhöhtes Padding */
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
    position: relative;
    width: 100%;
    min-height: 500px; /* Mindesthöhe für mehr Präsenz */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertikale Zentrierung der Items */
}

.mastery-grid {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Erhöhter Abstand zwischen den Items */
}

.mastery-item {
    opacity: 0; /* Für den Observer */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    color: var(--background);
    font-size: 1rem;
    line-height: 1.8; /* Erhöhte Zeilenhöhe für besseren Lesefluss */
    margin-bottom: 10px;
}

.mastery-item.is-visible {
    animation: masteryReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mastery-item strong {
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    color: var(--cta);
    display: block;
    margin-bottom: 8px;
}

/* Split-Layout Gewichtung für Expertise-Block */
.expertise-split .text-content {
    flex: 0 0 40%;
}

.expertise-split .image-wrapper {
    flex: 0 0 55%;
}

@media (max-width: 1024px) {
    .mastery-panel {
        padding: 40px 30px;
        min-height: auto;
    }
    .expertise-split .text-content,
    .expertise-split .image-wrapper {
        flex: 1 1 100%;
    }
}

/* Staggered Delay */
.mastery-item:nth-child(1) { animation-delay: 0.1s; }
.mastery-item:nth-child(2) { animation-delay: 0.3s; }
.mastery-item:nth-child(3) { animation-delay: 0.5s; }
.mastery-item:nth-child(4) { animation-delay: 0.7s; }
.mastery-item:nth-child(5) { animation-delay: 0.9s; }
.mastery-item:nth-child(6) { animation-delay: 1.1s; }

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
}

/* ==========================================================================
   GLOBAL HIGH-END NAVIGATION (GOD-MODE OVERRIDE)
   ========================================================================== */

/* 1. DER CONTAINER */
.nav-container {
    position: fixed !important;
    top: 32px !important;
    width: 100% !important;
    z-index: 9999 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: none !important;
}

/* Der Smart-Header Effekt (Schiebt die Leiste weich aus dem Bild) */
.nav-hidden {
    transform: translateY(-150%) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. DIE HAUPTLEISTE (Exakt wie der Button) */
.navbar {
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 95% !important;
    max-width: 1200px !important;
    background: rgba(12, 10, 9, 0.5) !important; 
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(202, 138, 4, 0.4) !important;
    border-radius: 100px !important;
    padding: 14px 32px !important;
    box-shadow: 0 0 30px rgba(202, 138, 4, 0.15), inset 0 0 15px rgba(202, 138, 4, 0.05) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform: translateZ(0) !important;
}

/* Hover-Effekt: Die Leiste lädt sich weich mit Licht auf, wenn die Maus kommt */
.navbar:hover {
    border-color: rgba(202, 138, 4, 0.8) !important;
    box-shadow: 0 0 40px rgba(202, 138, 4, 0.25), inset 0 0 20px rgba(202, 138, 4, 0.1) !important;
}

/* 3. DIE HAUPT-LINKS (Keine Unterstreichungen!) */
.nav-links {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

/* ==========================================================================
   DER "LIQUID GOLD BUTTON" EFFEKT FÜR DIE NAVIGATION
   ========================================================================== */

/* 1. Vorbereitung: Ein unsichtbarer Rahmen, damit der Text beim Hover nicht springt */
.nav-links > a, 
.nav-dropdown > a {
    color: #FAFAF9 !important; /* Strahlendes Weiß */
    text-decoration: none !important; /* VERBIETET UNTERSTREICHUNGEN */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 12px 20px !important;
    border-radius: 100px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    border: 1px solid transparent !important; /* JUMP PREVENTION */
    white-space: nowrap !important;
}

/* 2. DER MAGISCHE HOVER (Exakt wie dein Haupt-Button!) */
.nav-links > a:hover, 
.nav-dropdown:hover > a {
    background: rgba(202, 138, 4, 0.15) !important; 
    border: 1px solid rgba(202, 138, 4, 0.9) !important; 
    color: #FFFFFF !important; 
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 35px rgba(202, 138, 4, 0.5), 0 0 15px rgba(202, 138, 4, 0.2), inset 0 0 15px rgba(202, 138, 4, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   DAS ULTIMATIVE PREMIUM-GLAS DROPDOWN (VISION-OS STYLE)
   ========================================================================== */

.dropdown-content {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(15px) !important;
    background: rgba(12, 10, 9, 0.75) !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border: 1px solid rgba(202, 138, 4, 0.4) !important;
    border-radius: 24px !important;
    padding: 12px !important;
    min-width: 260px !important;
    box-shadow: 0 40px 80px rgba(0,0,0,0.8), 0 0 30px rgba(202, 138, 4, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dropdown-content::before {
    content: '' !important;
    position: absolute !important;
    top: -30px !important;
    left: 0 !important;
    width: 100% !important;
    height: 30px !important;
    background: transparent !important;
}

.nav-dropdown:hover .dropdown-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(25px) !important;
}

.dropdown-content a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
    text-decoration: none !important;
    padding: 14px 24px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    font-family: 'Montserrat', sans-serif !important;
    text-transform: none !important;
    border-radius: 100px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dropdown-content a:hover {
    color: #FFFFFF !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 0 2px 10px rgba(0,0,0,0.9) !important;
    background: rgba(202, 138, 4, 0.15) !important;
    border: 1px solid rgba(202, 138, 4, 0.9) !important;
    box-shadow: 0 0 25px rgba(202, 138, 4, 0.4), inset 0 0 10px rgba(202, 138, 4, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* 6. DER LOGIN BUTTON */
.nav-links .btn-login {
    margin-left: 16px !important;
    border: 1px solid rgba(202, 138, 4, 0.6) !important;
    color: #CA8A04 !important;
}
.nav-links .btn-login:hover {
    background: #CA8A04 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 20px rgba(202, 138, 4, 0.4) !important;
}

/* NAVBAR FIXES */
.navbar .logo img, 
.navbar img {
    height: 40px !important;
    width: auto !important;
    display: block !important;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1)) !important;
    transition: transform 0.4s ease !important;
}

.navbar .logo:hover img, 
.navbar a:hover img {
    transform: scale(1.05) !important;
}

.nav-links > a, 
.nav-dropdown > a {
    white-space: nowrap !important;
}

/* Hero Clearing Spacing to prevent fixed nav overlap */
.hero,
#master-hero,
main > section:first-of-type {
    padding-top: 160px !important;
}

/* SMART MOBILE PATCH */
@media (max-width: 1024px) and (min-width: 769px) {
    .split-section, .section-container {
        gap: 40px !important;
        padding: 80px 30px !important;
    }
    .hero,
    #master-hero,
    main > section:first-of-type {
        padding-top: 140px !important;
        padding-bottom: 30px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    h1 { font-size: 3rem !important; }
    h2:not([class]) { font-size: 2.2rem !important; }
    .btn-master { padding: 16px 36px !important; font-size: 0.8rem !important; }
    .process-grid { gap: 24px !important; }
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden !important; 
        width: 100% !important;
    }

    .split-section, .section-container, .premium-section, .editorial-container, .cta-section {
        padding: 60px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 30px !important;
    }
    
    .hero,
    #master-hero,
    main > section:first-of-type {
        padding-top: 130px !important;
        padding-bottom: 40px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .editorial-container, .schwerpunkte-grid, .grid-3-dark, .grid-3-light, .grid-2-dark, .process-grid, .expertise-split, .diploma-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        width: 100% !important;
    }

    .text-block, .image-block, .editorial-text, .text-content, .image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-container {
        top: 15px !important;
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .navbar {
        background: rgba(20, 18, 16, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(202, 138, 4, 0.6) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.9), 0 0 15px rgba(202, 138, 4, 0.2) !important;
        width: 100% !important;
        padding: 12px 20px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .navbar .logo img,
    .navbar-logo img { 
        height: 32px !important; 
    }

    .nav-links, .nav-dropdown { 
        display: none !important;
    }

    .btn-infinity-gold, .btn-onyx-premium, .btn-master, .btn-dark-solid, .btn-glass-premium {
        width: 100% !important;
        padding: 14px 28px !important;
        font-size: 0.85rem !important;
        display: flex !important;
        justify-content: center !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }
    h1 { font-size: 2rem !important; line-height: 1.25 !important; }
    h2:not([class]), .editorial-container h2 { font-size: 1.6rem !important; line-height: 1.35 !important; margin-bottom: 15px !important; }
    p { font-size: 0.95rem !important; line-height: 1.6 !important; }

    .glass-panel, .glass-panel-dark { 
        padding: 30px 20px !important; 
    }
    
    .process-card {
        padding: 30px 20px !important;
    }
    
    .modal-content {
        padding: 30px 20px !important;
        width: 95% !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    .footer-logo-link {
        display: block !important;
        margin: 0 auto 25px auto !important;
        width: fit-content !important;
    }
}

/* ==========================================================================
   INTERACTIVE PREMIUM VISUAL ENGINE STYLES (3D & PARALLAX GLOWS)
   ========================================================================== */

/* 3D-Preserve für Tilt */
.phil-container, .schwerpunkte-grid, .editorial-container {
    perspective: 1000px;
}

.smart-glass-card, .phil-badge, .floating-badge-light {
    transform-style: preserve-3d;
}

/* Edles Gold-Raster (Luxury Grid) für Hero */
.luxury-grid {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(202, 138, 4, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(202, 138, 4, 0.035) 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: center center;
    mask-image: radial-gradient(circle at 50% 50%, black 35%, transparent 85%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 35%, transparent 85%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: gridReveal 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;
}

@keyframes gridReveal {
    to { opacity: 1; }
}

/* Scroll-Indikator Maus-Animation */
.scroll-indicator {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
    opacity: 0;
    animation: fadeInIndicator 1.5s ease forwards 1s;
    pointer-events: none;
}

.scroll-mouse {
    width: 24px;
    height: 38px;
    border: 1.5px solid rgba(202, 138, 4, 0.45);
    border-radius: 20px;
    position: relative;
}

.scroll-wheel {
    width: 3px;
    height: 7px;
    background: #CA8A04;
    border-radius: 2.5px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: mouseScroll 1.8s infinite ease-in-out;
}

.scroll-indicator span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(250, 250, 249, 0.4);
}

@keyframes mouseScroll {
    0% { top: 6px; opacity: 1; height: 7px; }
    50% { top: 16px; opacity: 0.2; height: 10px; }
    100% { top: 6px; opacity: 1; height: 7px; }
}

@keyframes fadeInIndicator {
    to { opacity: 1; }
}

/* Levitierende Logo Rotations-Aura */
.logo-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    border: 1px dashed rgba(202, 138, 4, 0.25);
    border-radius: 50%;
    animation: rotateRing 25s linear infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes rotateRing {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Staggered Card Entrance Animation */
#schwerpunkte .cards-wrapper {
    perspective: 1000px;
}

#schwerpunkte.is-visible .smart-glass-card {
    animation: cardEntranceReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

@keyframes cardEntranceReveal {
    from {
        opacity: 0;
        transform: translateY(35px) rotateX(10deg);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
        filter: blur(0);
    }
}

#schwerpunkte.is-visible .smart-glass-card:nth-child(1) { animation-delay: 0.1s; }
#schwerpunkte.is-visible .smart-glass-card:nth-child(2) { animation-delay: 0.22s; }
#schwerpunkte.is-visible .smart-glass-card:nth-child(3) { animation-delay: 0.34s; }
#schwerpunkte.is-visible .smart-glass-card:nth-child(4) { animation-delay: 0.46s; }

@media (max-width: 1024px) {
    .scroll-indicator {
        display: none !important;
    }
    .logo-glow-ring {
        width: 180px;
        height: 180px;
    }
}

@media (max-height: 820px) {
    .scroll-indicator {
        display: none !important;
    }
}

/* ==========================================================================
   FLOWER OF LIFE BACKGROUND SYSTEM (ULTRA-PREMIUM GEOMETRY)
   ========================================================================== */
.hero-fol-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(350px, 60vw, 850px);
    height: clamp(350px, 60vw, 850px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.32; /* Subtle and premium */
    mix-blend-mode: screen;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.hero-fol-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 35px rgba(202, 138, 4, 0.2));
    transform-origin: center center;
    animation: folRotate 150s linear infinite;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-fol-circle {
    fill: none;
    stroke: url(#folGoldGradient);
    stroke-width: 0.75;
    opacity: 0.12;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: folDrawIn 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards, folPulse 8s ease-in-out infinite alternate 3.5s;
}

/* Stagger drawing of the circles to make it feel organic and premium */
.hero-fol-c-1  { animation-delay: 0.1s; }
.hero-fol-c-2  { animation-delay: 0.2s; }
.hero-fol-c-3  { animation-delay: 0.2s; }
.hero-fol-c-4  { animation-delay: 0.3s; }
.hero-fol-c-5  { animation-delay: 0.0s; } /* Center circle first */
.hero-fol-c-6  { animation-delay: 0.3s; }
.hero-fol-c-7  { animation-delay: 0.2s; }
.hero-fol-c-8  { animation-delay: 0.2s; }
.hero-fol-c-9  { animation-delay: 0.3s; }
.hero-fol-c-10 { animation-delay: 0.1s; } /* Main inner rings */
.hero-fol-c-11 { animation-delay: 0.3s; }
.hero-fol-c-12 { animation-delay: 0.2s; }
.hero-fol-c-13 { animation-delay: 0.2s; }
.hero-fol-c-14 { animation-delay: 0.3s; }
.hero-fol-c-15 { animation-delay: 0.2s; }
.hero-fol-c-16 { animation-delay: 0.3s; }
.hero-fol-c-17 { animation-delay: 0.3s; }
.hero-fol-c-18 { animation-delay: 0.3s; }
.hero-fol-c-19 { animation-delay: 0.4s; }

.hero-fol-border-1, .hero-fol-border-2 {
    fill: none;
    stroke: url(#folGoldGradient);
    stroke-width: 1.2;
    opacity: 0.25;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    transform-origin: center center;
}

.hero-fol-border-1 {
    animation: folDrawIn 4.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s, folPulseBorder1 10s ease-in-out infinite alternate 5s;
}
.hero-fol-border-2 {
    animation: folDrawIn 5s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s, folRotateCounter 75s linear infinite;
    stroke-width: 0.8;
    stroke-dasharray: 20 10; /* Elegant dashed outer rim */
}

/* ==========================================================================
   HIGH-PREMIUM ENERGY FLOW & TWINKLE NODES
   ========================================================================== */
.fol-energy-pulse {
    fill: none !important;
    stroke: #FFEFC2 !important; /* Extremely high premium golden white core */
    stroke-width: 1.25px !important;
    opacity: 0 !important;
    stroke-dasharray: 60 280 !important; /* Moving light sparks */
    filter: drop-shadow(0 0 8px rgba(202, 138, 4, 0.85)) !important;
    animation: energyFlow 16s linear infinite !important;
    pointer-events: none;
}

/* Stagger speed/delay for natural fluid dynamics */
.fol-energy-group .fol-energy-pulse:nth-child(3n+1) {
    animation-duration: 12s !important;
    stroke-dasharray: 80 300 !important;
}
.fol-energy-group .fol-energy-pulse:nth-child(3n+2) {
    animation-duration: 20s !important;
    stroke-dasharray: 40 250 !important;
}
.fol-energy-group .fol-energy-pulse:nth-child(3n) {
    animation-duration: 15s !important;
}

/* Glowing Nodes at geometric centers */
.fol-node {
    fill: #FFFFFF !important;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(202, 138, 4, 0.9));
    animation: folNodeTwinkle 5s ease-in-out infinite alternate;
    transform-origin: center center;
    pointer-events: none;
}

/* Animations */
@keyframes folDrawIn {
    to {
        stroke-dashoffset: 0;
        opacity: 0.35;
    }
}

@keyframes folPulse {
    0% {
        opacity: 0.2;
        stroke-width: 0.7;
        filter: drop-shadow(0 0 10px rgba(202, 138, 4, 0.15));
    }
    100% {
        opacity: 0.45;
        stroke-width: 1.1;
        filter: drop-shadow(0 0 25px rgba(202, 138, 4, 0.45));
    }
}

@keyframes folPulseBorder1 {
    0% { opacity: 0.25; stroke-width: 1.0; }
    100% { opacity: 0.5; stroke-width: 1.5; }
}

@keyframes energyFlow {
    0% {
        stroke-dashoffset: 1000;
        opacity: 0;
    }
    5% {
        opacity: 0.75;
    }
    95% {
        opacity: 0.75;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@keyframes folNodeTwinkle {
    0% {
        opacity: 0.2;
        transform: scale(0.7) translate3d(0,0,0);
        filter: drop-shadow(0 0 3px rgba(202, 138, 4, 0.5));
    }
    50% {
        opacity: 0.9;
        transform: scale(1.2) translate3d(0,0,0);
        filter: drop-shadow(0 0 8px rgba(254, 240, 138, 0.95));
    }
    100% {
        opacity: 0.4;
        transform: scale(0.8) translate3d(0,0,0);
        filter: drop-shadow(0 0 4px rgba(202, 138, 4, 0.6));
    }
}

@keyframes folRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes folRotateCounter {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .hero-fol-container {
        width: 320px;
        height: 320px;
        opacity: 0.22; /* Slightly softer opacity on mobile to prevent clutter */
        perspective: none;
        transform-style: flat;
    }
    .hero-fol-svg {
        animation: folRotate 180s linear infinite; /* Slower, gentler rotation on mobile */
        filter: drop-shadow(0 0 15px rgba(202, 138, 4, 0.15));
        transition: none;
    }
    .hero-fol-circle {
        stroke-width: 0.6;
    }
    .hero-fol-border-1, .hero-fol-border-2 {
        stroke-width: 0.8;
    }
    /* Disable heavy filter drop-shadows on mobile for rendering performance */
    .fol-energy-pulse {
        filter: none !important;
        stroke-width: 0.9px !important;
        opacity: 0.4 !important;
        animation: energyFlow 24s linear infinite !important;
    }
    .fol-node {
        filter: none !important;
        fill: rgba(254, 240, 138, 0.8) !important;
        r: 2px !important; /* Smaller nodes on mobile */
    }
}

/* ==========================================================================
   MOBILE ANIMATION PERFORMANCE — flüssige Reveals & Hero (Effekt bleibt)
   ========================================================================== */
@media (max-width: 768px) {
    .blur-reveal, .ev-hide, .ev-show { filter: none !important; }
    #master-hero .aurora-glow { filter: blur(60px) !important; animation: none !important; }
    #master-hero .glass-card { -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; will-change: transform, opacity; }
    #master-hero .glass-card, #master-hero .diagram-visual svg { transform: translateZ(0); }
}

/* ==========================================================================
   MOBILE HERO: Symbole leuchten stärker + Text bleibt lesbar
   ========================================================================== */
@media (max-width: 768px) {
    #master-hero .premium-h1 { text-shadow: 0 3px 22px rgba(0,0,0,0.72) !important; }
    #master-hero .premium-subtitle { text-shadow: 0 1px 12px rgba(5,5,5,0.9), 0 0 2px rgba(5,5,5,0.85); }
    #master-hero .premium-p { text-shadow: 0 1px 12px rgba(5,5,5,0.95), 0 0 3px rgba(5,5,5,0.9); }
    #master-hero .mh-sym,
    #master-hero .sacred-geo-container,
    #master-hero .mh-dna,
    #master-hero .mh-mol,
    #master-hero .mh-breath,
    #master-hero .mh-globe {
        filter: drop-shadow(0 0 5px rgba(202,138,4,0.55)) drop-shadow(0 0 16px rgba(202,138,4,0.22));
    }
}

/* ==========================================================================
   GLOBAL MOBILE FIXES
   ========================================================================== */
@media (max-width: 768px) {
    .legal-links {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    /* 80px Kopfabstand liessen zwischen der Unterkante der Startleiste (81px)
       und der Oberkante der Karte nur 7px - die Karte klebte an der Leiste.
       120px ergeben 39px Luft, dieselbe Proportion wie auf dem Desktop. */
    .legal-container {
        padding: 120px 16px 40px !important;
    }
    /* Die Karte behielt auch mobil 60px Innenabstand. Bei 390px blieben
       dadurch nur 236px Textspalte uebrig - ein Drittel der Bildschirm-
       breite ging an den Rand, und Woerter wie "Widerrufsbelehrung"
       mussten getrennt werden, obwohl sie sonst in eine Zeile passen. */
    /* html body als Praefix, weil die Seiten .legal-card { padding: 60px }
       in ihrem eigenen <style> nach diesem Stylesheet deklarieren und
       gleiche Spezifitaet dort gewinnen wuerde (Projektreferenz 24). */
    html body .legal-card {
        overflow: hidden;
        box-sizing: border-box;
        padding: 40px 26px;
    }
    .legal-card {
        overflow: hidden;
        box-sizing: border-box;
    }
    .legal-card h1,
    .legal-card h2,
    .legal-card h3,
    .legal-card p,
    .legal-card li {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }
}


/* =====================================================================
   MOBILE DENSITY  —  Vertikale Verdichtung (nur Mobil)
   ---------------------------------------------------------------------
   Ziel: Seitenlaenge mobil um ~15-25% reduzieren, OHNE Textaenderungen
   und ohne Verlust der Premium-Wirkung. Es werden ausschliesslich
   Abstaende (padding / margin / gap) verdichtet - keine Schriftgroessen,
   keine Effekte, keine Animationen, keine Inhalte.
   Bewusst als letzter Block der Datei: gewinnt gegen die frueheren
   Mobil-Regeln oben, !important schlaegt die Seiten-<style>-Bloecke.
   ===================================================================== */
@media (max-width: 768px) {

    /* --- 1. Hero: Kopfraum straffen (Navbar-Unterkante liegt bei ~71px,
       104px laesst weiterhin ~33px ruhige Luft darunter) --- */
    .hero,
    #master-hero,
    main > section:first-of-type {
        padding-top: 104px !important;
        padding-bottom: 30px !important;
    }

    /* Hero-Innenabstaende: Textspalte, Visual-Spalte, CTA */
    #master-hero .hero-inner { gap: 20px !important; row-gap: 20px !important; }
    #master-hero .premium-eyebrow  { margin-bottom: 16px !important; }
    #master-hero .premium-h1       { margin-bottom: 12px !important; }
    #master-hero .premium-subtitle { margin-bottom: 16px !important; }
    #master-hero .premium-p        { margin-bottom: 10px !important; }
    #master-hero .hero-diagrams-col { gap: 10px !important; }
    #master-hero .hero-diagrams-col .glass-card {
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }

    /* --- 2. Sektionen: Blockabstaende verdichten (60 -> 44) --- */
    .split-section, .section-container, .premium-section,
    .editorial-container, .cta-section {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
        gap: 22px !important;
    }

    /* Karten-Grids enger stapeln */
    .editorial-container, .schwerpunkte-grid, .grid-3-dark, .grid-3-light,
    .grid-2-dark, .grid-2-light, .process-grid, .expertise-split, .diploma-grid {
        gap: 22px !important;
    }

    /* Karten-Innenpolster leicht straffen */
    .glass-panel, .glass-panel-dark { padding: 24px 18px !important; }
    .process-card { padding: 24px 18px !important; }

    /* --- 3. Footer: eigener Premium-Abschluss, aber kompakter.
       Grid-Spalten stapeln mobil untereinander -> 50px Gap war zu viel. --- */
    .footer-grid-container {
        gap: 30px !important;
        padding-bottom: 44px !important;
    }
    .footer-col :is(h3,h4) { margin-bottom: 16px !important; }
    .footer-brand-text { margin: 0 auto 20px auto !important; }
    .footer-links li { margin-bottom: 11px !important; }
    .footer-bottom { padding-top: 18px !important; padding-bottom: 18px !important; }

    /* --- 4. Sektions-Kopfbereiche: 50px Abstand zum Inhalt ist mobil zu viel --- */
    .ph-light, .ph-dark, .section-header {
        margin-bottom: 28px !important;
    }

    /* --- 5. Karten-Innenpolster: der groesste Hebel, da sich jede Karte
       auf Mobil untereinander stapelt (Angebote = 24 Karten) --- */
    .glass-white-card, .obsidian-card, .dark-glass-card {
        padding: 26px 20px !important;
    }
    .pc-list   { margin-bottom: 12px !important; }
    .pc-desc   { margin-bottom: 12px !important; }
    .pc-target { padding-top: 12px !important; margin-bottom: 14px !important; }

    /* Bento-Karten (Personal Training / Online-Coaching) */
    .bento-header-card, .bento-visual-card, .bento-feature-card {
        padding: 24px 18px !important;
    }
    .bento-grid-container, .bento-left-column,
    .bento-features-subgrid, .bento-right-column {
        gap: 14px !important;
    }

    /* --- 6. Ausreisser: diese Sektion hatte 105px statt 40px Polster --- */
    #online-coaching.light-section, #online-coaching.pt-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* --- 7. Inline gesetzte Kopf-Abstaende (50-120px) mobil kappen.
       Treffer sind ausschliesslich Sektions-Kopf-Wrapper (.reveal,
       .bw-dashboard-header, .zg-header, #ab-header). Die Auswahl erfolgt
       ueber den exakten Inline-Wert, damit kleine Abstaende unberuehrt
       bleiben. Desktop behaelt seine grosszuegige Komposition. --- */
    [style*="margin-bottom: 50px"] {
        margin-bottom: 24px !important;
    }
    [style*="margin-bottom: 60px"], [style*="margin-bottom: 62px"], [style*="margin-bottom: 64px"] {
        margin-bottom: 26px !important;
    }
    [style*="margin-bottom: 70px"], [style*="margin-bottom: 75px"], [style*="margin-bottom: 78px"], [style*="margin-bottom: 80px"] {
        margin-bottom: 28px !important;
    }
    [style*="margin-bottom: 90px"] {
        margin-bottom: 30px !important;
    }
    [style*="margin-bottom: 100px"], [style*="margin-bottom: 105px"] {
        margin-bottom: 32px !important;
    }
    [style*="margin-bottom: 120px"] {
        margin-bottom: 34px !important;
    }

    /* --- 8. Seiten-Regeln mit hoeherer Spezifitaet gleichziehen
       (diese gewinnen sonst gegen die generischen Regeln oben) --- */
    body .pt-online-v3 .bento-header-card  { padding: 26px 20px !important; }
    body .pt-online-v3 .bento-feature-card { padding: 20px 18px !important; min-height: 0 !important; }
    body .pt-online-v3 .bento-visual-card  { padding: 20px 16px !important; gap: 16px !important; }
    body .pt-online-v3 .bento-grid-container,
    body .pt-online-v3 .bento-left-column,
    body .pt-online-v3 .bento-features-subgrid { gap: 14px !important; }

    /* Synergie-/Praxis-Karten (Personal Training) */
    body .pt-practice-v3 .synergy-grid   { gap: 16px !important; }
    body .pt-practice-v3 .synergy-card   { padding: 20px 16px !important; }
    body .synergy-card-details { padding-top: 12px !important; margin-top: 9px !important; }

    /* Kontakt: Formular- und Info-Saeulen */
    .split-modern-content { padding: 26px 18px !important; }

    /* --- 9. Generische Sektions-Rhythmik.
       Die Seiten bringen jeweils eigene Sektions-Klassen mit
       (.gt-section-*, .oc-section, .ne-section-*, .bw-section-*,
       .b2-section ...) und teils gar keine Klasse. Ihre Mobil-Polster
       lagen zwischen 40px und 160px - daher hier bewusst EIN
       einheitlicher Wert fuer alle Sektionen. Hero und CTA sind
       ausgenommen, die haben ihre eigene Komposition (Punkt 1 + kgs-cta.css).
       Hohe Spezifitaet ist noetig, weil die Seiten-<style>-Bloecke
       nach style.css stehen und sonst gewinnen. --- */
    main > section:not(#master-hero):not(.kgs-cta),
    main > div:not(.kgs-cta) > section:not(.kgs-cta) {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    /* --- 10. Footer-Auftakt: 100px Vorlauf ist mobil zu viel --- */
    .master-footer { padding-top: 56px !important; }
}