/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-0.BSGaBxsdgQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-1.WpEGO2ZZDw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-2.bye8Y6Dume.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-3.UNW60_lWAI.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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-4.gQ_mrJ4YWd.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-5.wY29EcpbMn.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-6.rHjGwv-Y_8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-7.ipLenzdwfG.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-8.qeSe5fWPCl.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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-9.dNsFj-Btp5.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-5.wY29EcpbMn.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-6.rHjGwv-Y_8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-7.ipLenzdwfG.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-8.qeSe5fWPCl.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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-9.dNsFj-Btp5.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-5.wY29EcpbMn.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-6.rHjGwv-Y_8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-7.ipLenzdwfG.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-8.qeSe5fWPCl.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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-9.dNsFj-Btp5.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-5.wY29EcpbMn.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-6.rHjGwv-Y_8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-7.ipLenzdwfG.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-8.qeSe5fWPCl.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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-9.dNsFj-Btp5.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;
}

:root {
  /* Drei Farben: Minzgrün, Lila, Gold. Alles Weitere sind Abstufungen davon. */
  --mint: #72B880;
  --mint-deep: #5AA169;
  --mint-mid: #A2D3A9;
  --mint-bright: #E4F6E2;
  --paper: rgba(234, 251, 232, .62);

  /* Lauras finales Lila-System (Mail 2026-08-05):
       --ink        #3F1646  Hauptschriftfarbe für Fließtext (viel Text, „Über mich")
       --purple-deep#4A1B52  Teilüberschriften & durch Größe hervorgehobene Stellen
                             (z. B. „Doch den größten Lehrer …")
       --purple     #401851  Flächenfarbe des breiten Header-Balkens auf den Unterseiten
     Damit genau zwei Text-Lilas plus eine Balkenfarbe. --purple-soft bleibt nur
     für die kleinen Versal-Labels auf der Startseite. */
  --purple-deep: #4A1B52;
  --purple: #401851;
  --purple-soft: #7D3CB3;
  --ink: #3F1646;

  --gold: #D4AF37;
  --gold-bright: #ffe28a;
  --gold-deep: #8f6a00;

  /* Gold als Metall: dunkle Bronze aussen, heller Reflex in der Mitte.
     Die Flaeche ist breiter als der Text, damit der Reflex beim Hover
     darueberwandern kann wie Licht ueber eine Muenze. */
  --gold-sheen: linear-gradient(90deg, #8f6a00 0%, #c89b3c 25%, #e6c274 50%, #c89b3c 75%, #8f6a00 100%);

  /* Weiche Milchglas-Tafeln, die ueber dem satten Mint schweben — geben
     Tiefe und fassen die Inhalte, ohne harte Kaesten zu sein. */
  --panel: linear-gradient(180deg, rgba(248, 253, 245, .78), rgba(237, 249, 234, .64));
  --panel-border: rgba(255, 255, 255, .6);
  --panel-shadow: 0 30px 66px -30px rgba(24, 54, 34, .55), 0 1px 0 rgba(255, 255, 255, .5) inset;

  --serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --line: rgba(63, 22, 70, .18);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --wrap: 1120px;
  --header-h: 76px;
}

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

/* overflow-x auch auf html, nicht nur body: einzelne Mobil-Browser spannen
   die Containing-Box fuer position:fixed sonst auf die Breite ueberlaufenden
   Inhalts auf (der WhatsApp-Button sass davon rechts leicht ausserhalb des
   sichtbaren Bereichs), obwohl der Body selbst sauber geclippt aussieht. */
html {
  scroll-behavior: smooth;
  background: var(--mint-bright);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden
}

body {
  /* Cormorant Garamond laeuft klein und sehr zart. Groesse, Gewicht 500 und
     etwas mehr Zeilenabstand halten den Fliesstext lesbar. */
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  background: var(--mint-bright);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  display: block;
  max-width: 100%;
  height: auto
}

a {
  color: inherit;
  text-decoration: none
}

::selection {
  background: rgba(217, 167, 54, .32)
}

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px
}

h1,
h2,
h3,
.serif {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .2px
}

h1 em,
h2 em,
h3 em {
  font-style: normal
}

/* Überschriften tragen standardmäßig die Hervorhebungsfarbe #4A1B52; Sonderfälle
   (Gold-Claim, weißer Footer, Balken-Seitentitel) überschreiben das gezielt. */
h2,
h3 {
  color: var(--purple-deep)
}

.mt {
  margin-top: 26px
}

/* Goldschrift. Im Ruhezustand schlicht deckendes Gold — gut lesbar auf dem
   satten Minzgruen. Der metallische Schimmer (dunkle Kanten, heller Reflex
   in der Mitte) liegt als ::before-Kopie exakt ueber dem Text und blendet
   beim Hover per Opacity ein/aus. Reines background-image/color liesse sich
   nicht animieren (harter Sprung) — die Opacity-Ueberlagerung macht daraus
   ein weiches Auf- und Abblenden in beide Richtungen. Der Reflex ist bewusst
   nicht mehr fast weiss, sondern gedaempft warmgold, damit der Text auch im
   Schimmer noch leserlich bleibt. Der Gradient steht fest (kein Sweep):
   bei unterschiedlich breiten Textzeilen tastete eine laufende Position
   den Verlauf an je anderer Stelle ab und liess Zeilen fleckig aufleuchten. */
.gold,
.brand b,
.hero-brand b,
.claim h1 span,
.mein-gold-effekt {
  background: var(--gold-sheen);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.4s ease;
  display: inline-block;
  color: transparent;
}

.gold:hover,
h1:hover .gold,
h2:hover .gold,
h3:hover .gold,
.brand:hover b,
.hero-brand:hover b,
.claim h1 span:hover,
.mein-gold-effekt:hover {
  filter: brightness(1.25);
  text-shadow:
    0 0 8px rgba(255, 215, 100, 0.5),
    0 0 16px rgba(255, 215, 100, 0.3);
}

/* Auf Mobilgeräten / Touchscreens ist der Glanz-/Glow-Effekt des Claims standardmäßig aktiv */
@media (max-width: 880px), (hover: none) {
  .claim h1 span {
    filter: brightness(1.25);
    text-shadow:
      0 0 8px rgba(255, 215, 100, 0.5),
      0 0 16px rgba(255, 215, 100, 0.3);
  }
}

/* Der Goldverlauf oben ist fuer dunklen Grund gebaut — auf dem hellen Mintgruen
   des Heros kommt sein Reflex (#ffe28a) nur auf 1,4:1 Kontrast, die Schrift
   loest sich dort praktisch auf. Statt am Goldton zu drehen (der Verlauf ist
   Lauras Vorgabe und bleibt unangetastet) bekommen die Lettern eine dunkle
   Kante. Sie trennt die Schrift vom Gruen und laesst das Gold zugleich wie
   graviertes Metall wirken statt wie flache Farbe.

   drop-shadow und nicht text-shadow: die Schrift ist transparent gefuellt
   (-webkit-text-fill-color), ein text-shadow wuerde durch die Buchstaben
   hindurchscheinen. drop-shadow schattiert das fertig gerenderte Ergebnis.

   Beim Claim sitzt die Kante am h1, nicht an den Spans — sonst wuerde sie das
   filter:brightness() des Hovers ueberschreiben (oder umgekehrt), und sie waere
   ausgerechnet beim Hovern weg. In .hero-brand geht der Elternweg nicht, weil
   dort der lila Zusatz „Wegweiser Coaching" mit im Element haengt und vom
   Schatten nur unscharf wuerde. Deshalb dort an das b — und die Kante
   zusaetzlich in die Hover-Regel gezogen, damit sie den Hover ueberlebt. */
.claim h1,
.hero-brand b {
  filter:
    drop-shadow(0 1px 0 rgba(36, 16, 61, .35)) drop-shadow(0 0 2px rgba(36, 16, 61, .25));
}

.hero-brand:hover b {
  filter:
    brightness(1.25) drop-shadow(0 1px 0 rgba(36, 16, 61, .35)) drop-shadow(0 0 2px rgba(36, 16, 61, .25));
}

/* CTA im Hero: auf breiten Bildschirmen darf der Knopf hoeher sitzen, auf
   dem obersten Huegel statt am unteren Rand (Laura-Wunsch). Ab 880px abwaerts
   steht der Baum vertikal (.hero-brand ist ausgeblendet, .scene wird ueber
   height:min(54vh,420px) skaliert) — dort reicht die Baumkrone je nach
   Geraet unterschiedlich weit herunter, bei hohen schmalen Screens (z.B.
   iPhone Pro Max) bis in den frueheren 15vh-Wert hinein, der Knopf lag dann
   sichtbar in den Blaettern. Niedriger und vh-flacher haelt ihn zuverlaessig
   auf Baumstamm/Huegel darunter, getestet von iPhone SE (667) bis Pro Max
   (926). */
.hero-cta {
  bottom: clamp(70px, 10vh, 100px);
}

@media (min-width: 881px) {
  .hero-cta {
    bottom: clamp(60px, 9vh, 110px);
  }
}

/* Hero-CTA schlanker: statt satter Goldfüllung nur eine goldene Umrandung mit
   zarter Grundfüllung, Text und Pfeil in Gold. Die leichte Füllung steht schon
   im Ruhezustand (nicht erst beim Hover) — sie hebt den Text sichtbar vom Bild
   ab, gerade über den helleren Magenta-Partien der Hügel; Hover legt nochmal
   eine Stufe drauf. */
.btn.hero-cta {
  background: rgba(212, 175, 55, .16);
  color: var(--gold-bright);
  border: 1.6px solid var(--gold);
  box-shadow: none;
  text-shadow: 0 1px 3px rgba(36, 16, 61, .5);
  /* Umrandung naeher an die Schrift: Padding reduziert, Schriftgroesse
     bleibt (kommt weiterhin von .btn) unveraendert. */
  padding: clamp(9px, 0.5vw, 15px) clamp(18px, 1vw, 32px);
}

.btn.hero-cta:hover {
  background: rgba(212, 175, 55, .32);
  box-shadow: none;
  transform: translateY(-2px);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px)
}

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: var(--purple-soft);
  margin-bottom: 14px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(20px, 5vw, 44px);
  background: rgba(234, 251, 232, .92);
  border-bottom: 1px solid var(--line);
}

.home .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 0;
  justify-content: flex-start;
  max-width: 1490px;
  margin: 0 auto;
  padding: clamp(20px, 11vh, 92px) clamp(20px, 5vw, 56px) 14px clamp(20px, 5vw, 56px);
}

.home .site-header .brand {
  display: none
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  flex: none
}

/* Wortmarke „LAURA STREHLE / Wegweiser Coaching" als einheitliches Logo:
   dieselbe (skalierende) em-Laufweite in Header, Footer und Hero. Der Zusatz
   „Wegweiser Coaching" sitzt bewusst enger (0.02em), damit er als eine Einheit
   unter dem Namen liest. */
.brand b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 1.7vw, 23px);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand i {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: .02em;
  color: var(--purple-deep);
  white-space: nowrap;
}

.mainnav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px)
}

.mainnav>li {
  list-style: none;
  position: relative
}

.mainnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(19px, 1vw, 32px);
  font-weight: 500;
  color: var(--purple-deep);
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
  transition: color .3s var(--ease);
}

.home .mainnav a {
  font-weight: 700;
  /* Auf Kundenwunsch auf der Startseite fett */
}

.mainnav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transition: right .35s var(--ease);
}

.mainnav a:hover,
.mainnav a[aria-current="page"] {
  color: var(--gold-deep)
}

.mainnav a:hover::after,
.mainnav a[aria-current="page"]::after {
  right: 0
}

/* WhatsApp FAB */
.fab-whatsapp {
  position: fixed;
  bottom: clamp(28px, 5vh, 44px);
  right: clamp(28px, 6vw, 44px);
  z-index: 999;
  width: clamp(50px, 6vw, 64px);
  height: clamp(50px, 6vw, 64px);
  background-color: #25D366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.fab-whatsapp:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.fab-whatsapp svg {
  width: clamp(26px, 3.5vw, 36px);
  height: clamp(26px, 3.5vw, 36px);
  fill: currentColor;
}

/* Dropdown Menu */
.has-dropdown {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: -20px;
  background: rgba(234, 251, 232, 0.95);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 0;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s var(--ease);
  z-index: 100;
  box-shadow: 0 14px 34px rgba(63, 22, 70, .14);
}

.sub .dropdown {
  background: rgba(228, 246, 226, .97);
}

.home .dropdown {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 16px 32px rgba(37, 9, 59, 0.1);
  border-radius: 12px;
  padding: 12px 0;
}

.home .dropdown a {
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.home .dropdown a:hover {
  background: rgba(255, 255, 255, 0.25);
  color: var(--purple-deep);
  /* Keep it purple, maybe gold is fine, but background is better */
}

.has-dropdown:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.dropdown a {
  display: block;
  padding: 8px 20px;
  font-size: 17.5px;
  white-space: normal;
}

.dropdown a::after {
  display: none;
}


.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 9px
}

.burger span {
  width: 25px;
  height: 2px;
  background: var(--purple-deep);
  border-radius: 2px;
  transition: .3s var(--ease)
}

.burger.x span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.burger.x span:nth-child(2) {
  opacity: 0
}

.burger.x span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(14px, 0.8vw, 24px) clamp(30px, 1.6vw, 54px);
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(18px, 1vw, 32px);
  font-weight: 600;
  color: var(--purple-deep);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, #D89A1C);
  box-shadow: 0 8px 24px rgba(122, 81, 8, .28);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(122, 81, 8, .45)
}

.btn svg {
  width: clamp(16px, 0.9vw, 28px);
  height: clamp(16px, 0.9vw, 28px)
}

.btn-quiet {
  background: none;
  box-shadow: none;
  color: var(--gold-deep);
  border: 1px solid rgba(122, 81, 8, .5);
}

.btn-quiet:hover {
  background: rgba(217, 167, 54, .12);
  box-shadow: none
}

.arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17.5px;
  font-weight: 600;
  color: var(--gold-deep);
  padding-bottom: 5px;
  position: relative;
}

.arrowlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-deep), rgba(217, 167, 54, .2));
  transform-origin: left;
  transform: scaleX(.4);
  transition: transform .45s var(--ease);
}

.arrowlink:hover::after {
  transform: scaleX(1)
}

.arrowlink svg {
  width: 15px;
  height: 15px;
  transition: transform .35s var(--ease)
}

.arrowlink:hover svg {
  transform: translateX(5px)
}

main {
  flex: 1 0 auto
}

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  overflow: hidden;
  background-color: #90A893;
  background-image:
    radial-gradient(ellipse 52% 48% at 50% 55%, rgba(255, 248, 215, .5) 0%, rgba(235, 246, 226, .36) 35%, rgba(195, 220, 198, .15) 68%, transparent 100%),
    radial-gradient(ellipse 78% 72% at 50% 52%, #D0E4D2 0%, #B8CEBB 38%, #9EBAA2 68%, #90A893 100%);
}

.hero .scene {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  width: min(calc(100% + 2px), 213.3svh);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .6) 5%, #000 11%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .6) 5%, #000 11%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  min-height: calc(100svh - var(--header-h));
  padding: clamp(26px, 7vh, 64px) clamp(20px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
}

.hero-brand {
  align-self: center;
  justify-self: start;
  max-width: 340px
}

.hero-brand b {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.08;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero-brand i {
  /* Wortmarke und Zusatz sollen als eine Einheit lesen, nicht als zwei Zeilen. */
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-weight: bold;
  font-size: clamp(15px, 1.4vw, 20px);
  letter-spacing: .02em;
  color: var(--purple-deep);
  margin-top: -2px;
}

@media(min-width: 961px) {

  /* Das Hero-Bild klebt am unteren Rand: je flacher das Fenster, desto weiter
     steigt die Baumkrone in das Textband hinauf. Auf 1080p und 4K steht über
     ihr genug Himmel, auf einem 1366x768-Laptop (Sichtfläche ~640px) nicht mehr
     — dort lief „Den eigenen Weg erkennen" bisher ins Blattwerk. Die folgenden
     Größen leiten sich deshalb aus der Bildgeometrie ab, nicht nur aus der
     Fensterbreite:

       --szene       gerenderte Bildbreite (identisch zu .hero .scene)
       --luft        seitlicher Innenabstand des Hero (wie .hero-inner)
       --krone       wie weit die Krone über die Unterkante der ersten
                     Claim-Zeile (--claim-basis) hinausragt. Die Krone beginnt bei
                     85.3 % der Bildhöhe, das Bild ist 1920x900 — also
                     .4 * Bildbreite über dem unteren Rand.
       --kronenrand  um so viel wandert der rechte Kronenrand dabei nach außen:
                     an der Spitze steht er bei 51 % der Bildbreite und wird
                     nach unten schnell breiter (3.74px je Eintauchtiefe), bei
                     64.6 % der Bildbreite ist die Krone ausgewachsen.
       --einzug      Einrückung von Wortmarke und Claim. Gibt symmetrisch um den
                     gleichen Betrag nach, um den der Kronenrand auswandert —
                     so bleibt die Schrift beim Verkleinern des Fensters
                     monoton, statt zwischendurch wieder zu wachsen.
       --claim-platz Streifen rechts neben der Krone, abzüglich Innenabstand,
                     Einzug (der Claim steht 15px weiter außen) und 24px Luft.
       --claim-grad  Schriftgrad der ersten Zeile. „Den eigenen Weg erkennen"
                     läuft in Cormorant Garamond rund 10.8 * Schriftgrad breit,
                     mehr Platz als vorhanden darf die Zeile nie brauchen.
       --marke-*     dasselbe für die Wortmarke links: der linke Kronenrand
                     steht auf Höhe der Wortmarke bei 36 % der Bildbreite,
                     „LAURA STREHLE" läuft gesperrt rund 9.7 * Schriftgrad. */
  :root {
    --szene: min(100vw, 213.3svh);
    --luft: clamp(20px, 8.6vw, 12vh);
    --claim-basis: 215px;
    --krone: max(0px, var(--claim-basis) - 100svh + var(--szene) * .4);
    --kronenrand: min(var(--krone) * 3.74, var(--szene) * .136);
    --einzug: max(20px, clamp(40px, 6vw, 120px) - var(--kronenrand) * .35);
    --claim-platz: calc(var(--szene) * .49 - var(--kronenrand) - var(--luft) - var(--einzug) - 9px);
    --claim-grad: clamp(21px, min(5.7vw - 40px, calc(var(--claim-platz) / 10.8)), 40px);
    --marke-platz: calc(var(--szene) * .36 - var(--luft) - var(--einzug) - 20px);
    --marke-grad: clamp(20px, min(4.05vw - 23px, calc(var(--marke-platz) / 9.7)), 34px);
  }

  .home .mainnav,
  .home .hero-brand {
    margin-left: var(--einzug);
  }

  /* Der Claim „Den eigenen Weg erkennen" spiegelt die Einrückung der Wortmarke,
     damit sein Abstand zum rechten Rand dem von „Laura Strehle" zum linken
     entspricht (Lauras Wunsch nach symmetrischen Rändern). */
  .home .claim {
    margin-right: calc(var(--einzug) - 15px);
  }
}

body.home {
  background: #90A893
}

.home .hero,
.home .hero-inner {
  min-height: 100svh
}

.home .hero-inner {
  padding-top: calc(var(--header-h) + clamp(14px, 6vh, 58px))
}

.claim {
  align-self: start;
  justify-self: end;
  text-align: right;
  max-width: max(460px, 24vw);
  margin-top: clamp(8px, 7vh, 74px)
}

.claim h1 span {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.34;
}

.claim h1 span:nth-child(1) {
  font-size: clamp(25px, 2.9vw, 40px);
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--gold)
}

.claim h1 span:nth-child(2) {
  font-size: clamp(18px, 2vw, 27px);
  font-weight: 400;
  color: rgba(255, 235, 190, .85)
}

.claim h1 span:nth-child(3) {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 500;
  color: var(--gold)
}

/* 4K media query moved to bottom of file */

.fade {
  opacity: 0;
  transform: translateY(16px);
  animation: fade .9s var(--ease) forwards
}

.fade-1 {
  animation-delay: .1s
}

.fade-2 {
  animation-delay: .28s
}

@keyframes fade {
  to {
    opacity: 1;
    transform: none
  }
}

/* Unterseiten laufen ohne Trenner durch. Der Verlauf folgt der Bildwelt:
   oben der helle gruene Himmel, unten der satte Boden, der in den
   dunkelvioletten Footer uebergeht. */
body.sub {
  /* Die Kundin will den satten Mint (#74B981) der Startseite, kein helles
     grelles Grün — und die Seite soll nicht flach wirken. Der Aufbau von
     oben nach unten:
       1. feines Korn (Papierstruktur, bricht die glatte Fläche)
       2. grobes helles Wolkenrauschen (macht den Ton fleckig statt uniform)
       3. dunkles Gegenrauschen in anderer Frequenz (Tiefe in den Flecken)
       4.-6. weiche Lichtblüten wie Licht durch Blattwerk
       7. der Grundverlauf, der unten in den violetten Footer vertieft */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.02 0 0 0 0 0.16 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.88 0 0 0 0 0.97 0 0 0 0 0.83 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='800' height='800' filter='url(%23c)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.25 0 0 0 0 0.14 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23d)'/%3E%3C/svg%3E"),
    radial-gradient(120% 52% at 50% -8%, rgba(233, 241, 231, .6), rgba(233, 241, 231, 0) 56%),
    radial-gradient(70% 46% at 86% 26%, rgba(246, 248, 240, .16), rgba(246, 248, 240, 0) 55%),
    radial-gradient(80% 50% at 8% 62%, rgba(198, 218, 199, .26), rgba(198, 218, 199, 0) 55%),
    linear-gradient(to bottom,
      #CEE1D0 0%, #CEE1D0 42%, #C7D9CA 74%, #BDD2C0 100%);
  background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 160px 160px, 800px 800px, 600px 600px, auto, auto, auto, auto;
  background-attachment: fixed, fixed, fixed, scroll, scroll, scroll, scroll;
}

.sub .site-header {
  background: rgba(228, 246, 226, .94)
}

/* Unterseiten-Header in Lauras Signature-Lila — nur auf breiten Bildschirmen.
   Auf Mobil bleibt der Header hell (siehe @media(max-width:880px) weiter
   unten, die dort mit zwei Klassen genauso spezifisch ist und daher weiter
   greift); dort ist er ohnehin schon gut lesbar und es gibt keinen Wunsch,
   das zu aendern. Auf Lila sind Menü-Text und Untertitel „Wegweiser Coaching“
   in var(--purple-deep) unsichtbar (Lila auf Lila) — beide bekommen hier ein
   helles Creme, wie es Footer und Fußzeile schon verwenden. Der aktive/
   gehoverte Menüpunkt bleibt Gold, nur eine Stufe heller (var(--gold) statt
   var(--gold-deep)) fuer genug Kontrast auf dem dunklen Grund. */
@media (min-width: 881px) {
  .sub .site-header {
    background: var(--purple);
    border-bottom: 0
  }

  .sub .site-header .brand i {
    color: rgba(240, 232, 248, .72)
  }

  .sub .mainnav a {
    color: #EAFBE8
  }

  .sub .mainnav a:hover,
  .sub .mainnav a[aria-current="page"] {
    color: var(--gold)
  }

  /* Das Angebot-Dropdown haengt selbst innerhalb von .mainnav, seine Links
     zaehlen also als „.mainnav a“ mit — sein Panel bleibt aber immer hell
     (.sub .dropdown), unabhaengig von der Bildschirmbreite. Ohne diese beiden
     Zeilen wuerden die Dropdown-Links die neue helle/goldene Header-Farbe
     erben und auf dem hellen Panel-Grund verschwinden. */
  .sub .dropdown a {
    color: var(--purple-deep)
  }

  .sub .dropdown a:hover {
    color: var(--gold-deep)
  }
}

.sub .section+.section {
  border-top: 0
}

.sub .tint {
  background: none
}

/* Kleine Grossbuchstaben-Labels brauchen auf dem satten Gruen das tiefe
   Lila — das weichere Lila kaeme nur auf 3.7:1. */
.sub .eyebrow,
.sub .infolist dt {
  color: var(--purple-deep)
}

.sub .arrowlink {
  color: var(--purple-deep)
}

.sub .arrowlink::after {
  background: linear-gradient(90deg, var(--purple-deep), rgba(63, 22, 70, .14))
}

.sub .btn-quiet {
  color: var(--purple-deep);
  border-color: rgba(63, 22, 70, .34)
}

.sub .btn-quiet:hover {
  background: rgba(63, 22, 70, .07)
}

/* Auf den Unterseiten ist aller Lesetext Lila — auch Links und Formular-
   Akzente. Gold bleibt allein Wortmarke, Button und Emblem-Grafik. */
.sub .infolist .v a {
  border-bottom-color: rgba(78, 26, 115, .42)
}

.sub .infolist .v a:hover {
  color: var(--purple-deep)
}

.sub .legal a,
.sub .check a {
  color: var(--purple-deep)
}

.sub .formnote {
  border-left-color: rgba(78, 26, 115, .4)
}

.sub .check input {
  accent-color: var(--purple)
}

.sub .field input:focus,
.sub .field select:focus,
.sub .field textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(78, 26, 115, .16);
}

/* Wortmarke und Seitentitel stehen nebeneinander wie Wappen und Inschrift —
   eine Zeile, durch eine goldene Haarlinie getrennt. Bewusst deutlich kleiner
   als die Angebots-Embleme darunter: das hier ist Orientierung ("wo bin ich"),
   kein dritter gleichrangiger Programmpunkt neben den zwei Diensten. */
.page-head {
  position: relative;
  min-height: clamp(140px, 18vh, 190px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(26px, 4vh, 42px) 0 clamp(18px, 2.6vh, 28px);
}

.page-head>.wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 28px);
}

/* Die Wortmarke (icon_logo.png) als Wappen des Bandes — Baum und Flügelstab,
   die sich unten in ihre zwei Zweige teilen. */
.page-head>.wrap::before {
  content: "";
  flex: none;
  width: clamp(54px, 6vw, 76px);
  aspect-ratio: 1/1;
  background: url("icon_logo.VuSbfbk2Rk.webp") center/contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(27, 10, 44, .3)) drop-shadow(0 2px 5px rgba(27, 10, 44, .22));
}

/* Weicher Lichthof hinter der Wortmarke — nimmt dem Band die flache Fläche. */
.page-head::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, 92%);
  height: clamp(180px, 30vh, 300px);
  transform: translate(-50%, -52%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(closest-side,
      rgba(234, 248, 225, .75), rgba(234, 248, 225, .28) 46%, rgba(234, 248, 225, 0) 74%);
}

.page-head h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(19px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple-deep);
  line-height: 1.04;
  margin: 0;
  padding-left: clamp(14px, 2.4vw, 28px);
  border-left: 1px solid;
  border-image: linear-gradient(to bottom,
      transparent, rgba(122, 81, 8, .55) 26%, rgba(122, 81, 8, .55) 74%, transparent) 1;
}

.section {
  padding: clamp(48px, 8vh, 88px) 0
}

.about-hero-section {
  padding: clamp(20px, 3.5vh, 44px) 0 clamp(32px, 5vh, 60px);
}

.about-hero-section .about-text .intro,
.about-hero-section .about-text p {
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.about-story p {
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.about-story ul,
.about-story ol {
  text-align: left;
}

.about-story li {
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (min-width: 961px) {
  .about-hero-section .split.narrow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
  }
}

.section+.section {
  border-top: 1px solid rgba(63, 22, 70, .14)
}

.section h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  max-width: 20ch
}

#ablauf h2 {
  max-width: none;
  white-space: nowrap
}

#fachlicher-weg h2 {
  max-width: none;
  white-space: nowrap
}

.section .intro {
  margin-top: 18px;
  max-width: 58ch;
  color: rgba(63, 22, 70, .88)
}

.section p+p {
  margin-top: 16px
}

.tint {
  background: linear-gradient(to bottom, rgba(209, 245, 207, .5), rgba(234, 251, 232, .5))
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 66px);
  align-items: center
}

.split.narrow {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr)
}

/* Erstgespräch — bewusst warm statt weiss: die Angebote sind kühl-milchig,
   dieses hier ist der goldene Hinweis dazwischen. */
.first-talk {
  position: relative;
  padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3.6vw, 50px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  background: linear-gradient(150deg, rgba(255, 250, 231, .56), rgba(255, 255, 255, .24));
  border: 1px solid rgba(122, 81, 8, .24);
  border-radius: 26px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 28px 56px -36px rgba(18, 46, 27, .9);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.first-talk h3 {
  font-size: clamp(23px, 2.4vw, 29px);
  color: var(--purple-deep)
}

.first-talk p {
  margin-top: 12px;
  max-width: 52ch;
  font-size: 18px;
  color: rgba(63, 22, 70, .85)
}

.first-talk-side {
  text-align: right;
  display: grid;
  justify-items: end;
  gap: 3px
}

.ft-price {
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 35px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .5px;
  color: var(--purple-deep);
}

.ft-dur {
  font-size: 15.5px;
  letter-spacing: .4px;
  color: rgba(63, 22, 70, .74)
}

.first-talk .arrowlink {
  margin-top: 12px
}

/* Zwei gleichwertige Wege nebeneinander — keiner steht ueber dem anderen.
   Getragen wird die Trennung nicht von einer Karte, sondern von drei Dingen:
   viel Luft in der Mitte, je einem eigenen Lichtpool pro Spalte (kuehles
   Mint links, warmes Gold rechts) und einer zarten Spine dazwischen. */
.offer-band {
  position: relative;
  padding: clamp(40px, 6.5vh, 74px) 0 clamp(48px, 8vh, 92px)
}

/* Die zwei Dienste brauchen mehr Bühne als der normale Textinhalt der Seite
   — der normale --wrap (1120px) drückt sie zu nah aneinander. Eigene, breitere
   Spielwiese plus ein deutlich grosszuegigerer Spaltenabstand. */
.offer-band .wrap {
  max-width: 1400px
}

.duo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(48px, 11vw, 180px);
}

/* isolation, damit der Lichtpool (z-index:-1) hinter den Spalteninhalt
   rutscht, aber nicht hinter den Seitenhintergrund. */
.branch {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.branch .offers {
  align-self: stretch;
  text-align: left
}

/* Nur relevant, solange die Spalten nebeneinander stehen. */
.duo-spine {
  display: none
}

/* Der Lichtpool sitzt hinter Emblem und Titel und erdet die Spalte, ohne
   dass ein Kasten darum noetig waere. */
.branch::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  left: 50%;
  top: -9%;
  transform: translateX(-50%);
  width: min(660px, 124%);
  height: clamp(320px, 44vh, 480px);
  background: radial-gradient(closest-side,
      rgba(240, 252, 232, .66), rgba(240, 252, 232, .22) 46%, rgba(240, 252, 232, 0) 74%);
}

.branch.warm::before {
  background: radial-gradient(closest-side,
      rgba(255, 246, 219, .58), rgba(255, 246, 219, .18) 46%, rgba(255, 246, 219, 0) 74%);
}

/* Beide Zweige teilen sich dieselben Zeilen, damit Emblem, Titel und
   Angebotsliste links wie rechts auf einer Hoehe stehen — sonst wirkt die
   eine Spalte automatisch wie die wichtigere. */
@media(min-width:961px) {

  /* row-gap muss 0 sein, sonst schiebt der Spaltenabstand jede Zeile auseinander. */
  .duo {
    grid-template-rows: auto auto auto auto auto;
    row-gap: 0
  }

  .branch {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
    justify-items: center;
  }

  /* Die Spalten muessen explizit gesetzt sein: die Spine belegt Zeile 4-6
     ueber beide Spalten, sonst weicht die Auto-Platzierung der Zweige in
     implizite Spalten 3 und 4 aus. */
  .duo>.branch:nth-of-type(1) {
    grid-column: 1
  }

  .duo>.branch:nth-of-type(2) {
    grid-column: 2
  }

  .branch .offers {
    justify-self: stretch
  }

  /* Die Spine setzt erst beim Fliesstext an: oben trennen die zwei Lichtpools
     und die Luft, unten die Linie. Sie haengt an den Grid-Zeilen (Intro bis
     Angebote), damit sie bei jeder Textlaenge richtig sitzt. */
  .duo-spine {
    display: block;
    position: relative;
    grid-row: 4 / 6;
    grid-column: 1 / -1;
    justify-self: center;
    width: 1px;
    background: linear-gradient(to bottom,
        rgba(63, 22, 70, 0), rgba(63, 22, 70, .15) 12%, rgba(63, 22, 70, .15) 88%, rgba(63, 22, 70, 0));
  }

  /* Goldene Raute am Kopf der Linie. */
  .duo-spine::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 7px;
    height: 7px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, #B5871F);
    box-shadow: 0 0 0 6px rgba(226, 245, 219, .55);
  }
}

/* Solo Wrap für einzelne Angebote (Wegweiser Coaching / Energetische Arbeit) */
@media(min-width:961px) {
  .wrap.solo {
    display: flex;
    justify-content: center;
  }

  .wrap.solo .branch {
    max-width: 1020px;
    width: 100%;
  }

  .wrap.solo .branch > h2 {
    max-width: 100%;
  }

  .wrap.solo .branch > .intro {
    max-width: 85ch;
  }
}

.branch .first-talk {
  align-self: stretch;
  width: 100%;
  text-align: left;
  margin: 44px 0 20px 0;
}

/* Das Label unter dem Emblem soll selbstbewusst auftreten, nicht verschämt —
   größer, kräftiger, tiefes Lila statt zaghaftem Grau. */
.branch .eyebrow {
  font-size: clamp(16.5px, 1.5vw, 21px);
  letter-spacing: 1.6px;
  font-weight: 700;
  color: var(--purple-deep);
  margin-bottom: 12px;
}

.branch h2 {
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.16;
  max-width: 20ch;
  font-weight: 600;
  color: var(--purple-deep);
}

.branch .intro {
  margin-top: 16px;
  max-width: 75ch;
  line-height: 1.72;
  font-size: clamp(20px, 1.4vw, 23px);
  color: rgba(63, 22, 70, .86);
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Emblem als leuchtender Fokus: ein weicher Lichthof, davor das freigestellte
   Symbol — links der Lebensbaum, rechts der goldene Fluegelstab (icon_engel).
   Jedes erdet seine Spalte in einem eigenen Pool aus Licht. */
.emblem {
  --size: clamp(132px, 14.5vw, 178px);
  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 0 auto clamp(14px, 2.4vh, 24px);
}

.emblem::before {
  content: "";
  position: absolute;
  inset: -22% -20%;
  border-radius: 50%;
  z-index: 0;
  background: radial-gradient(closest-side,
      rgba(222, 242, 215, .5), rgba(222, 242, 215, 0) 70%);
}

.emblem::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 16px 26px rgba(63, 22, 70, .3));
}

.emblem--tree::after {
  background-image: url("icon_tree.yTX9-E2mAg.webp")
}

.emblem--angel::before {
  /* Warmer Goldschimmer hinter dem Fluegelstab statt kuehlem Mint. */
  background: radial-gradient(closest-side,
      rgba(255, 238, 198, .55), rgba(255, 238, 198, 0) 70%);
}

.emblem--angel::after {
  background-image: url("icon_engel.AJKqwbHZmz.webp");
  /* Der Fluegelstab laeuft breiter als hoch; leicht groesser skaliert traegt
     er optisch dasselbe Gewicht wie der quadratische Baum. */
  transform: scale(1.08);
}

/* Jedes Angebot ist eine eigene, sehr leichte Milchglas-Fläche: genug Kante,
   um greifbar zu sein, aber ohne den harten weissen Kasten von vorher. Die
   Goldnaht links bindet sie an die Wortmarke zurück. */
.offers {
  list-style: none;
  position: relative;
  display: grid;
  gap: clamp(15px, 1.9vw, 22px);
  align-content: start;
  margin-top: clamp(26px, 3.6vw, 46px);
}

.offer {
  position: relative;
  padding: clamp(23px, 2.7vw, 32px) clamp(24px, 3vw, 38px);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .5), rgba(236, 250, 231, .28));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .65) inset,
    0 24px 46px -32px rgba(18, 46, 27, .9);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3.5vw, 44px);
  align-items: start;
}

.offer::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(22px, 3vw, 30px);
  bottom: clamp(22px, 3vw, 30px);
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(to bottom, var(--gold), rgba(122, 81, 8, .12));
}

/* Die energetische Spalte laeuft warm, die Coaching-Spalte kuehl — derselbe
   Unterschied wie zwischen Baum und Fluegelstab. */
.branch.warm .offer {
  background: linear-gradient(155deg, rgba(255, 253, 244, .5), rgba(255, 246, 228, .28))
}

.branch.warm .offer::before {
  background: linear-gradient(to bottom, var(--gold), rgba(122, 81, 8, .12))
}

.offer:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .75) inset,
    0 32px 58px -32px rgba(18, 46, 27, .95);
}

.offer-main {
  min-width: 0;
}

.offer-main h3 {
  font-size: clamp(22px, 2.3vw, 27px);
  font-weight: 600;
  color: var(--purple-deep);
}

.offer-side {
  text-align: right;
  display: grid;
  justify-items: end;
  flex: none;
}

.offer-prices {
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
}

.offer-price-item {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.offer-price {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .5px;
  font-size: clamp(27px, 3vw, 35px);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--gold-deep);
}

.offer-dur {
  font-size: 15px;
  letter-spacing: .3px;
  color: rgba(63, 22, 70, .74);
  white-space: nowrap;
}

/* Ort in einer ruhigen Kursivzeile unter dem Titel */
.offer-meta {
  display: block;
  margin-top: 5px;
  font-style: italic;
  font-weight: 700;
  font-size: 16.5px;
  color: rgba(63, 22, 70, .62);
}

.offer p {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.72;
  color: rgba(63, 22, 70, .83);
}


.photo {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: var(--purple);
  border: 1px solid var(--purple);
  box-shadow: 0 16px 40px rgba(63, 22, 70, .18);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0;
}

.photo span {
  font-size: 13px;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: rgba(255, 235, 190, .75);
  line-height: 2.2
}

.photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(58vh, 600px);
}

.portrait {
  margin: 0;
  max-width: 480px;
  width: 100%;
}

.portrait figcaption {
  margin-top: 14px;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--purple-deep);
  text-align: center;
  line-height: 1.35;
}

/* WQHD / 4K Displays */
@media (min-width: 1400px) and (min-height: 900px) {
  .photo img {
    max-height: min(58vh, 680px);
  }
  .portrait {
    max-width: 520px;
  }
  .portrait figcaption {
    font-size: 20px;
  }
}

@media (min-width: 1900px) and (min-height: 1200px) {
  .photo img {
    max-height: min(60vh, 800px);
  }
  .portrait {
    max-width: 560px;
  }
  .portrait figcaption {
    font-size: 22px;
  }
}

/* Flachere Bildschirme (z. B. 1280x720 oder Laptops) */
@media (max-height: 750px) {
  .page-head {
    min-height: 105px;
    padding: 14px 0 10px;
  }
  .about-hero-section {
    padding: 10px 0 20px;
  }
  .photo img {
    max-height: min(62vh, 500px);
  }
}

/* Drei Haltungen — Spalten mit Haarlinie statt Karten */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 52px);
  margin-top: clamp(30px, 5vh, 44px);
}

.pillars article {
  position: relative;
  padding-top: 24px
}

.pillars article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 72%;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), rgba(217, 167, 54, .14));
}

.pillars article+article {
  padding-left: clamp(24px, 4vw, 52px);
  border-left: 1px solid rgba(63, 22, 70, .2);
}

.pillars article+article::before {
  left: clamp(24px, 4vw, 52px)
}

.pillars h3 {
  font-size: clamp(19px, 2vw, 23px)
}

@media (min-width: 961px) {
  .pillars h3 {
    min-height: 2.7em;
  }
}

.pillars p {
  margin-top: 12px;
  font-size: 18.5px;
  line-height: 1.7;
  color: rgba(63, 22, 70, .87);
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.formnote:empty {
  display: none
}

.signature {
  margin-top: 28px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.9vw, 25px);
  color: var(--purple-deep);
}

.ablauf-intro {
  margin-top: 14px;
  font-size: 18.5px;
  line-height: 1.65;
  color: rgba(63, 22, 70, .86);
  max-width: 60ch;
}

.steps {
  list-style: none;
  counter-reset: s;
  display: grid;
  gap: clamp(20px, 3vh, 30px);
  margin-top: 34px;
  max-width: 62ch
}

.steps li {
  counter-increment: s;
  position: relative;
  padding-left: 74px
}

.steps h3 {
  font-size: 22px;
  margin-bottom: 4px;
  position: relative
}

.steps h3::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: -76px;
  width: 52px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: clamp(38px, 4.2vw, 48px);
  font-weight: 500;
  background: var(--gold-sheen);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Verbindungslinie zwischen den Schritten — ausgeblendet auf Kundenwunsch */
.steps li::after {
  display: none;
}

.steps li:last-child::after {
  display: none;
}

.steps p {
  font-size: 18px;
  color: rgba(63, 22, 70, .86)
}

.cta {
  position: relative;
  text-align: center;
  padding: clamp(54px, 9vh, 96px) 0
}

.cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  width: min(820px, 116%);
  height: 84%;
  pointer-events: none;
  background: radial-gradient(58% 66% at 50% 42%, rgba(255, 244, 214, .34), transparent 70%);
}

.cta>.wrap {
  position: relative;
  z-index: 1
}

.cta h2 {
  margin: 0 auto;
  max-width: 40ch
}

.cta p {
  margin: 18px auto 0;
  max-width: 44ch;
  color: rgba(63, 22, 70, .87)
}

.cta .btn {
  margin-top: 32px
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 60px);
  align-items: start
}

.infolist {
  list-style: none;
  display: grid;
  gap: 22px;
  margin-top: 26px
}

.infolist dt {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--purple-soft);
  margin-bottom: 5px;
}

.infolist dd {
  margin: 0
}

.infolist .v {
  font-size: 17.5px;
  color: var(--ink);
  line-height: 1.6
}

.infolist .v a {
  border-bottom: 1px solid rgba(122, 81, 8, .45);
  transition: color .3s var(--ease)
}

.infolist .v a:hover {
  color: var(--gold-deep)
}

/* WhatsApp-Icon direkt vor der Telefonnummer — dieselbe Nummer ist auch per
   WhatsApp erreichbar. Das Icon selbst trägt keine Textunterstreichung. */
.infolist .tel-line {
  display: inline-flex;
  align-items: center;
  gap: 10px
}

/* Klassisches WhatsApp-Badge: grüner Kreis mit weißem Symbol — hebt sich klar
   vom mintgrünen Seitenhintergrund ab. */
.infolist .wa-icon,
.sub .infolist .wa-icon {
  border-bottom: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  transition: background .3s var(--ease);
}

.infolist .wa-icon svg {
  width: 16px;
  height: 16px;
  fill: #fff
}

/* Das WhatsApp-Zeichen ist geometrisch mittig, wirkt durch den Sprechblasen-
   Zipfel unten links aber nach oben-links verschoben — minimal nach unten-
   rechts nachjustiert, damit es optisch mittig im Kreis sitzt. */
.infolist .wa-icon svg path {
  transform: translate(0.7px, 1px)
}

.infolist .wa-icon:hover {
  background: #1EB457
}

.form {
  padding: clamp(26px, 3.4vw, 38px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.field {
  display: block;
  margin-bottom: 20px
}

.field>span {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .4px;
  margin-bottom: 7px;
  color: var(--purple-deep)
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: inherit;
  font-size: 18px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.custom-select-wrapper {
  position: relative;
  user-select: none;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  padding: 13px 15px;
  font-family: inherit;
  font-size: 18px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.custom-select-trigger:focus,
.custom-select-wrapper.open .custom-select-trigger {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(217, 167, 54, .2);
}

.custom-select-arrow {
  transition: transform .25s var(--ease);
  color: rgba(63, 22, 70, .6);
}

.custom-select-wrapper.open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 10px 24px rgba(37, 9, 59, .1);
  overflow: hidden;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}

.custom-select-wrapper.open .custom-select-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-option {
  padding: 12px 15px;
  cursor: pointer;
  font-size: 18px;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.custom-option:hover,
.custom-option.selected {
  background: var(--purple-deep);
  color: #fff;
}

.field textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.65
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(217, 167, 54, .2);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 16.5px;
  color: rgba(63, 22, 70, .88);
  margin-bottom: 24px
}

.check input {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
  accent-color: var(--gold-deep)
}

.check a {
  color: var(--gold-deep);
  text-decoration: underline
}

.formnote {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(63, 22, 70, .74);
  padding-left: 16px;
  border-left: 2px solid rgba(122, 81, 8, .4);
}

/* Turnstile Widget */
#turnstile-box {
  margin-bottom: 20px;
}
#turnstile-box:empty {
  display: none;
}

/* Formular-Status: Fehler- und Erfolgsmeldungen */
.form-status {
  font-size: 16.5px;
  line-height: 1.55;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.form-status:not(.form-success) {
  background: rgba(160, 32, 32, .07);
  border: 1px solid rgba(160, 32, 32, .3);
  color: #7a1f1f;
}
.form-success {
  display: flex;
}
.form-success[hidden] {
  display: none !important;
}
  align-items: flex-start;
  gap: 14px;
  background: rgba(90, 161, 105, .1);
  border: 1px solid rgba(90, 161, 105, .35);
  color: var(--purple-deep);
  padding: 22px 24px;
  border-radius: 14px;
  margin-top: 8px;
}
.form-success strong {
  font-size: 19px;
}

/* Feld-Validierungsfehler */
.field.has-error input,
.field.has-error textarea,
.field.has-error .custom-select-trigger {
  border-color: rgba(160, 32, 32, .55);
  box-shadow: 0 0 0 3px rgba(160, 32, 32, .1);
}
.check.has-error {
  color: #7a1f1f;
}

/* Absende-Button: deaktiviert */
.btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 12px rgba(122, 81, 8, .15);
}


.legal {
  max-width: 74ch
}

.legal h2 {
  font-size: clamp(21px, 2.2vw, 27px);
  margin: 38px 0 12px
}

.legal h2:first-of-type {
  margin-top: 0
}

.legal p {
  margin-top: 12px;
  color: rgba(63, 22, 70, .9)
}

.legal a {
  color: var(--gold-deep);
  text-decoration: underline
}

.legal .ph {
  background: rgba(217, 167, 54, .2);
  border-bottom: 1px dashed rgba(122, 81, 8, .6);
  padding: 1px 5px;
  border-radius: 3px;
}

.site-footer {
  flex: none;
  background: linear-gradient(to bottom, #2E1049, #1B0629);
  color: rgba(240, 232, 248, .7);
  padding: clamp(38px, 6vh, 58px) 0 26px;
  font-size: 17px;
}

.foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 34px 48px;
  justify-content: space-between;
  align-items: flex-start
}

.foot-brand {
  max-width: 300px
}

.foot-brand p {
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.75
}

.site-footer .brand i {
  color: rgba(240, 232, 248, .62)
}

.foot-col h2 {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 13px;
}

.foot-col a {
  display: block;
  padding: 5px 0;
  transition: color .3s var(--ease)
}

.foot-col a:hover {
  color: var(--gold-bright)
}

.foot-bottom {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-size: 15.5px;
}

.foot-bottom a {
  color: var(--gold-bright)
}

/* Zweispaltiger Hero (ab 881px): Baum und Text teilen sich die Breite. Der Baum
   skaliert mit dem Viewport, die Schrift ueber vw aber deutlich traeger — unter
   ~1300px waechst der Text dadurch relativ zum Bild und laeuft in die Krone.
   Darum hier eine steilere Kurve: gleiche Werte wie zuvor ab ~1400px, darunter
   faellt die Schrift frueher ab, bis der Hero bei 880px ohnehin einspaltig wird. */
@media(min-width:881px) {
  .claim h1 span:first-child {
    font-size: clamp(21px, 5.7vw - 40px, 40px)
  }

  .claim h1 span+span {
    font-size: clamp(15px, 3.9vw - 27px, 27px)
  }

  .hero-brand b {
    font-size: clamp(20px, 4.05vw - 23px, 34px)
  }

  .hero-brand i {
    font-size: clamp(13px, 2.2vw - 10px, 20px)
  }

  /* Die Huegelkante sitzt bei ~62% der Bildhoehe. In flachen Fenstern rueckt die
     vertikale Mitte darunter — der Namenszug wandert dann entsprechend hoch.
     Ueber top statt transform, weil transform der .fade-Animation gehoert. */
  .hero-brand {
    position: relative;
    top: clamp(-40px, 12vh - 120px, 0px)
  }

  /* Flache Fenster: das Hero-Bild darf nie hoeher als der Viewport werden (sonst
     waere die Krone angeschnitten), also begrenzt 213.3svh — das Seitenverhaeltnis
     1920/900 — seine Breite. Ist das Fenster breiter als 2.13:1, bleiben links und
     rechts Luecken, in denen bisher der blanke CSS-Verlauf mit harter Kante stand.

     Diese zwei Streifen fuellen die Luecken mit dem gespiegelten Bildrand. Weil sie
     genau bildbreit und bildhoch sind und per scaleX(-1) an der Nahtstelle
     zurueckgeklappt werden, laufen Himmel und Huegel ohne Bruch weiter; alles was
     ueber die Luecke hinausragt, schneidet das overflow:hidden des .hero ab.
     Die Maske ist dieselbe wie beim Bild, damit die Oberkante gleich ausblendet. */
  .hero::before,
  .hero::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    width: min(100%, 213.3svh);
    background: url("background.f_bGLY66ne.webp") 0 0/100% 100% no-repeat;
    transform: scaleX(-1);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .6) 5%, #000 11%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .6) 5%, #000 11%);
  }

  .hero::before {
    right: calc(50% + min(100%, 213.3svh)/2 - 1px)
  }

  .hero::after {
    left: calc(50% + min(100%, 213.3svh)/2 - 1px)
  }

  /* Inhalte an die Bildbreite koppeln statt an den Viewport: sobald seitlich
     Luecken entstehen, sollen Navigation, Namenszug und Claim mit dem Bild
     einruecken, nicht auf dem Fuellstreifen stehen. Bei normalen Fenstern ist
     min(...) immer der bisherige Wert — dort aendert sich nichts. */
  .hero-inner {
    max-width: min(100%, 213.3svh);
    padding-left: clamp(20px, 8.6vw, 12vh);
    padding-right: clamp(20px, 8.6vw, 12vh);
  }

  .home .site-header {
    max-width: min(100%, 213.3svh);
    margin-inline: auto;
    padding-left: clamp(20px, 8.6vw, 12vh);
  }
}

/* Ab 961px stehen Baum und Claim nebeneinander — erst dort kann die Zeile in die
   Krone laufen. Der Schriftgrad folgt deshalb --claim-grad (siehe Herleitung
   oben beim :root-Block): auf hohen Fenstern exakt die bisherige vw-Kurve, auf
   flachen nur noch so groß, wie der Streifen neben der Krone hergibt. Zeile 2
   und 3 sind deutlich kürzer und haben dadurch von selbst Luft; sie bekommen
   nur eine Obergrenze relativ zur ersten Zeile, damit der Claim als Block
   skaliert und die Staffelung erhalten bleibt. */
@media(min-width:961px) {
  .claim h1 span:first-child {
    font-size: var(--claim-grad)
  }

  .claim h1 span:nth-child(2) {
    font-size: min(clamp(18px, 2vw, 27px), calc(var(--claim-grad) * .8))
  }

  .claim h1 span:nth-child(3) {
    font-size: min(clamp(20px, 2vw, 27px), calc(var(--claim-grad) * .8))
  }

  .hero-brand b {
    font-size: var(--marke-grad)
  }
}

/* Gold Link für Textpassagen */
.gold-link {
  color: color-mix(in srgb, var(--gold-deep) 55%, var(--ink) 45%);
  text-decoration: underline dotted;
  text-decoration-color: var(--gold-deep);
  text-underline-offset: 4px;
  cursor: pointer;
  transition: text-decoration-color 0.3s ease;
}

.gold-link:hover {
  text-decoration-color: var(--gold);
}

/* Branch Body (Fliesstext-Bereich innerhalb einer Angebotsseite) */
.branch-body {
  margin: 36px 0 48px;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  text-align: left;
}
.branch-body h2 {
  font-size: clamp(26px, 2.8vw, 34px);
  margin: 52px 0 18px;
  color: var(--purple-deep);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  max-width: 100%;
}
.branch-body h2:first-child {
  margin-top: 20px;
}
.branch-body h3 {
  font-size: clamp(22px, 2.3vw, 27px);
  margin: 36px 0 14px;
  color: var(--purple-deep);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  max-width: 100%;
}
.branch-body p {
  margin-bottom: 20px;
  line-height: 1.75;
  font-size: clamp(20.5px, 1.35vw, 22.5px);
  color: rgba(63, 22, 70, .88);
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
.branch-body ul,
.branch-body ol {
  margin: 14px 0 24px 0;
  padding-left: clamp(36px, 3.5vw, 48px);
  list-style: disc;
  text-align: left;
}
.branch-body li {
  margin-bottom: 5px;
  line-height: 1.55;
  font-size: clamp(20.5px, 1.35vw, 22.5px);
  color: rgba(63, 22, 70, .88);
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.branch-body li:last-child {
  margin-bottom: 0;
}
.branch-body li::marker {
  color: var(--purple-deep);
  font-size: 0.95em;
}

/* Info-Trigger (anklickbar, oeffnet Dialog) */
.info-trigger {
  display: inline;
  color: color-mix(in srgb, var(--gold-deep) 65%, var(--ink) 35%);
  text-decoration: underline dotted;
  text-decoration-color: var(--gold-deep);
  text-underline-offset: 4px;
  cursor: pointer;
  transition: text-decoration-color 0.3s ease, color 0.3s ease;
  font-weight: 600;
  margin: 0;
}
.info-trigger:hover {
  text-decoration-color: var(--gold);
  color: var(--gold-deep);
}

/* Anfahrtspauschale-Karte */
.anfahrt-card {
  align-self: stretch;
  width: 100%;
  text-align: left;
  margin-top: 36px;
  padding: 26px 32px;
  background: linear-gradient(145deg, rgba(240,252,233,.5), rgba(214,229,215,.3));
  border: 1px solid rgba(63,22,70,.12);
  border-radius: 16px;
}
.anfahrt-card h3 {
  font-size: clamp(18px, 2vw, 22px);
  margin-bottom: 16px;
  color: var(--purple-deep);
  text-align: left;
}
.anfahrt-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}
.anfahrt-table td {
  padding: 8px 0;
  border-bottom: 1px solid rgba(63,22,70,.1);
  text-align: left;
}
.anfahrt-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--purple-deep);
}
.anfahrt-note {
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--purple-deep);
  font-style: italic;
  margin-top: 10px;
  text-align: left;
}

/* Modal / Popup */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(37, 9, 59, .7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
  padding: 20px;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background: #D6E5D7;
  border: 1px solid var(--line);
  border-radius: 16px;
  max-width: 800px;
  width: 100%;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.4s var(--ease);
  box-shadow: 0 24px 46px rgba(18, 46, 27, .3);
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-overlay.open .modal-card {
  transform: none;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--purple-deep);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-close:hover {
  background: white;
}

.modal-content {
  padding: 32px;
  overflow-y: auto;
}

.modal-content img {
  border-radius: 8px;
  margin-bottom: 24px;
  max-height: min(38vh, 340px);
  width: auto;
  max-width: 100%;
  display: block;
  margin-inline: auto;
}

.modal-content h2 {
  color: var(--purple-deep);
  margin-bottom: 12px;
}

.modal-content p {
  color: rgba(63, 22, 70, 0.88);
  font-size: clamp(19.5px, 1.3vw, 21.5px);
  line-height: 1.7;
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.modal-content ul,
.modal-content ol {
  text-align: left;
}

.modal-content li {
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.modal-content p+p {
  margin-top: 16px;
}

@media(max-width:960px) {

  .split .photo,
  .contact-grid .photo {
    max-width: 420px
  }

  .split .photo img {
    max-height: min(48vh, 440px);
  }

  .split .portrait {
    order: 1;
    justify-self: center;
    max-width: 420px;
    width: 100%
  }

  .split .about-text {
    order: 2
  }

  .pillars {
    grid-template-columns: 1fr;
    gap: 0
  }

  .pillars article {
    padding: 26px 0
  }

  .pillars article:first-child {
    padding-top: 24px
  }

  .pillars article+article {
    padding-left: 0;
    border-left: 0;
    border-top: 0;
  }

  .pillars article+article::before {
    left: 0;
    top: 0
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0
  }

  .first-talk {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    padding: clamp(26px, 6vw, 38px) clamp(22px, 5vw, 32px)
  }

  .first-talk-side {
    text-align: left;
    justify-items: start
  }

  .offer {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .offer-side {
    text-align: left;
    justify-items: start;
  }

  .offer-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  .offer-price-item {
    justify-items: start;
  }

  /* Nebeneinander geht auf dem Handy nicht auf — gestapelt uebernimmt eine
     Zaesur mit Zierzeichen die Trennung, die auf dem Desktop die Spine macht. */
  .duo {
    grid-template-columns: 1fr
  }

  .offer-band {
    padding: clamp(34px, 6vw, 52px) 0 clamp(40px, 7vw, 64px)
  }

  /* Nicht breiter als der Viewport, sonst wird der Lichthof an der Kante
     hart abgeschnitten statt auszulaufen. */
  .branch::before {
    top: -5%;
    width: min(560px, 112%);
    height: clamp(260px, 38vh, 360px)
  }

  .branch+.branch {
    margin-top: clamp(52px, 11vw, 84px);
    padding-top: clamp(52px, 11vw, 84px)
  }

  .branch+.branch::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: min(300px, 60%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
        transparent, rgba(63, 22, 70, .14) 20%, rgba(122, 81, 8, .42) 50%, rgba(63, 22, 70, .14) 80%, transparent);
  }

  .emblem {
    --size: clamp(118px, 30vw, 148px);
    margin-left: 0;
    margin-right: 0
  }

  .branch h2,
  .branch .intro {
    max-width: none
  }

  .offers {
    margin-top: clamp(24px, 5vw, 34px)
  }
}

@media(max-width:880px) {
  :root {
    --header-h: 66px
  }

  .burger {
    display: flex
  }

  .site-header,
  .home .site-header {
    position: sticky;
    top: 0;
    justify-content: space-between;
    padding: 12px clamp(18px, 5vw, 44px);
    background: rgba(234, 251, 232, .97);
    border-bottom: 1px solid var(--line);
  }

  /* Auf der Startseite liegt der Header ueber dem hellen Mintgruen des Heros —
     „LAURA STREHLE“ in Gold kam dort kaum vom Fleck (siehe Claim/Hero-Brand
     weiter oben). Ein Header in Lauras Signature-Lila gibt der Marke sofort
     genug Kontrast, statt am Goldton selbst zu drehen. Auf den Unterseiten
     (.sub) gilt inzwischen dasselbe Lila wie im Desktop-Header dieser
     Seiten — Kundenwunsch, auch auf Mobil durchgaengig Lila statt Mint. */
  .home .site-header {
    position: absolute;
    background: var(--purple);
    border-bottom: 0
  }

  .home .site-header .brand {
    display: flex
  }

  /* Wegweiser Coaching auf lila Home-Header sichtbar machen */
  .home .site-header .brand i {
    color: rgba(240, 232, 248, .72)
  }

  .home .site-header .burger span {
    background: var(--gold)
  }

  .sub .site-header {
    background: var(--purple);
    border-bottom: 0
  }

  .sub .site-header .brand i {
    color: rgba(240, 232, 248, .72)
  }

  .sub .site-header .burger span {
    background: var(--gold)
  }

  .mainnav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px clamp(20px, 5vw, 44px) 22px;
    background: #EAFBE8;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 34px rgba(37, 9, 59, .14);
    transform: translateY(calc(-100% - var(--header-h) - 4px));
    transition: transform .38s var(--ease);
  }

  .mainnav.open {
    transform: none
  }

  .mainnav>li {
    border-bottom: 1px solid rgba(37, 9, 59, .16)
  }

  .mainnav>li:last-child {
    border-bottom: 0
  }

  .mainnav>li>a {
    padding: 15px 2px;
    font-size: 17.5px;
    justify-content: space-between;
    width: 100%
  }

  .mainnav a::after {
    display: none
  }

  .hero,
  .hero-inner {
    min-height: calc(100svh - var(--header-h))
  }

  .home .hero,
  .home .hero-inner {
    min-height: 100svh
  }

  .home .hero {
    background-image:
      radial-gradient(ellipse 70% 40% at 50% 72%, rgba(255, 248, 215, .48) 0%, rgba(235, 246, 226, .32) 35%, rgba(195, 220, 198, .12) 68%, transparent 100%),
      radial-gradient(ellipse 92% 65% at 50% 70%, #D0E4D2 0%, #B8CEBB 38%, #9EBAA2 68%, #90A893 100%);
  }

  .home .hero-inner {
    padding-top: calc(var(--header-h) + 14px)
  }

  .hero-inner {
    grid-template-columns: 1fr;
    align-content: start;
    justify-items: center;
    text-align: center;
    gap: 14px;
    padding-top: clamp(24px, 5vh, 44px);
  }

  .hero-brand {
    display: none
  }

  .claim {
    justify-self: center;
    text-align: center;
    max-width: 100%;
    transform: none
  }

  .hero .scene {
    width: auto;
    max-width: none;
    height: min(54vh, 420px)
  }

  /* Mobile Hero-CTA: kleiner, weiter unten rechts, Kontrast auf gelbem Weg */
  .hero-cta {
    bottom: clamp(28px, 5vh, 60px);
  }

  .btn.hero-cta {
    padding: 8px 16px;
    font-size: 13px;
    right: 16px !important;
    background: rgba(64, 24, 81, .82);
    color: rgba(240, 228, 180, .95);
    border-color: rgba(200, 155, 60, .55);
  }
}

@media(max-width:560px) {
  .page-head {
    min-height: clamp(120px, 26vw, 160px);
    padding-top: clamp(22px, 6vw, 32px)
  }

  .page-head>.wrap {
    gap: clamp(11px, 3vw, 16px)
  }

  .page-head>.wrap::before {
    width: clamp(42px, 11vw, 58px)
  }

  /* Auf schmalen Geraeten muss auch „Datenschutz“ neben das Logo passen. */
  .page-head h1 {
    font-size: clamp(16px, 4.6vw, 22px);
    letter-spacing: .07em;
    padding-left: clamp(11px, 3vw, 16px)
  }

  #ablauf h2 {
    white-space: normal;
    max-width: 20ch
  }
}

@media(max-width:430px) {
  .steps li {
    padding-left: 72px
  }
}

.home .site-header {
  max-width: min(100%, 213.3svh);
  margin-inline: auto;
  padding-left: clamp(20px, 8.6vw, 12vh);
}

/* Flower Steps */
.flower-steps {
  list-style: none;
  display: grid;
  gap: clamp(16px, 2vh, 24px);
  margin-top: 24px;
  max-width: 70ch
}

.flower-steps li {
  position: relative;
  padding-left: 64px;
  display: flex;
  align-items: center;
  min-height: 44px
}

.flower-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: url("blume_256px.N2mNATD6-m.png") center/contain no-repeat;
}

.flower-steps h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  line-height: 1.4
}

@media(max-width:960px) {

  .split,
  .split.narrow,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vh, 44px)
  }

  .split .photo,
  .contact-grid .photo {
    max-width: 420px
  }

  .split .photo img {
    max-height: min(48vh, 440px);
  }

  .split .portrait {
    order: 1;
    justify-self: center;
    max-width: 420px;
    width: 100%
  }

  .split .about-text {
    order: 2
  }

  .pillars {
    grid-template-columns: 1fr;
    gap: 0
  }

  .pillars article {
    padding: 26px 0
  }

  .pillars article:first-child {
    padding-top: 24px
  }

  .pillars article+article {
    padding-left: 0;
    border-left: 0;
    border-top: 0;
  }

  .pillars p {
    font-size: clamp(19.5px, 4.8vw, 21.5px);
    line-height: 1.72;
    text-align: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
  }

  .pillars article+article::before {
    left: 0;
    top: 0
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0
  }

  .first-talk {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    padding: clamp(26px, 6vw, 38px) clamp(22px, 5vw, 32px)
  }

  .first-talk-side {
    text-align: left;
    justify-items: start
  }

  /* Nebeneinander geht auf dem Handy nicht auf — gestapelt uebernimmt eine
     Zaesur mit Zierzeichen die Trennung, die auf dem Desktop die Spine macht. */
  .duo {
    grid-template-columns: 1fr
  }

  .offer-band {
    padding: clamp(34px, 6vw, 52px) 0 clamp(40px, 7vw, 64px)
  }

  /* Nicht breiter als der Viewport, sonst wird der Lichthof an der Kante
     hart abgeschnitten statt auszulaufen. */
  .branch::before {
    top: -5%;
    width: min(560px, 112%);
    height: clamp(260px, 38vh, 360px)
  }

  .branch+.branch {
    margin-top: clamp(52px, 11vw, 84px);
    padding-top: clamp(52px, 11vw, 84px)
  }

  .branch+.branch::after {
    content: “”;
    position: absolute;
    left: 50%;
    top: 0;
    width: min(300px, 60%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
        transparent, rgba(63, 22, 70, .14) 20%, rgba(122, 81, 8, .42) 50%, rgba(63, 22, 70, .14) 80%, transparent);
  }

  .emblem {
    --size: clamp(118px, 30vw, 148px);
    margin-left: 0;
    margin-right: 0
  }

  .branch h2,
  .branch .intro {
    max-width: none
  }

  .offers {
    margin-top: clamp(24px, 5vw, 34px)
  }
}

@media(max-width:880px) {
  :root {
    --header-h: 66px
  }

  .burger {
    display: flex
  }

  .site-header,
  .home .site-header {
    position: sticky;
    top: 0;
    justify-content: space-between;
    padding: 12px clamp(18px, 5vw, 44px);
    background: rgba(234, 251, 232, .97);
    border-bottom: 1px solid var(--line);
  }

  /* Auf der Startseite liegt der Header ueber dem hellen Mintgruen des Heros —
     „LAURA STREHLE” in Gold kam dort kaum vom Fleck (siehe Claim/Hero-Brand
     weiter oben). Ein Header in Lauras Signature-Lila gibt der Marke sofort
     genug Kontrast, statt am Goldton selbst zu drehen. Auf den Unterseiten
     (.sub) gilt inzwischen dasselbe Lila wie im Desktop-Header dieser
     Seiten — Kundenwunsch, auch auf Mobil durchgaengig Lila statt Mint. */
  .home .site-header {
    position: absolute;
    background: var(--purple);
    border-bottom: 0
  }

  .home .site-header .brand {
    display: flex
  }

  /* Wegweiser Coaching auf lila Home-Header sichtbar machen */
  .home .site-header .brand i {
    color: rgba(240, 232, 248, .72)
  }

  .home .site-header .burger span {
    background: var(--gold)
  }

  .sub .site-header {
    background: var(--purple);
    border-bottom: 0
  }

  .sub .site-header .brand i {
    color: rgba(240, 232, 248, .72)
  }

  .sub .site-header .burger span {
    background: var(--gold)
  }

  .mainnav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px clamp(20px, 5vw, 44px) 22px;
    background: #EAFBE8;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 34px rgba(37, 9, 59, .14);
    transform: translateY(calc(-100% - var(--header-h) - 4px));
    transition: transform .38s var(--ease);
  }

  .mainnav.open {
    transform: none
  }

  .mainnav>li {
    border-bottom: 1px solid rgba(37, 9, 59, .16)
  }

  .mainnav>li:last-child {
    border-bottom: 0
  }

  .mainnav>li>a {
    padding: 15px 2px;
    font-size: 17.5px;
    justify-content: space-between;
    width: 100%
  }

  .mainnav a::after {
    display: none
  }

  .hero,
  .hero-inner {
    min-height: calc(100svh - var(--header-h))
  }

  .home .hero,
  .home .hero-inner {
    min-height: 100svh
  }

  .home .hero-inner {
    padding-top: calc(var(--header-h) + 14px)
  }

  .hero-inner {
    grid-template-columns: 1fr;
    align-content: start;
    justify-items: center;
    text-align: center;
    gap: 14px;
    padding-top: clamp(24px, 5vh, 44px);
  }

  .hero-brand {
    display: none
  }

  .claim {
    justify-self: center;
    text-align: center;
    max-width: 100%;
    transform: none
  }

  .hero .scene {
    width: auto;
    max-width: none;
    height: min(54vh, 420px)
  }

  /* Mobile Hero-CTA: kleiner, weiter unten rechts, Kontrast auf gelbem Weg */
  .hero-cta {
    bottom: clamp(28px, 5vh, 60px);
  }

  .btn.hero-cta {
    padding: 8px 16px;
    font-size: 13px;
    right: 16px !important;
    background: rgba(64, 24, 81, .82);
    color: rgba(240, 228, 180, .95);
    border-color: rgba(200, 155, 60, .55);
  }
}

@media(max-width:560px) {
  .page-head {
    min-height: clamp(120px, 26vw, 160px);
    padding-top: clamp(22px, 6vw, 32px)
  }

  .page-head>.wrap {
    gap: clamp(11px, 3vw, 16px)
  }

  .page-head>.wrap::before {
    width: clamp(42px, 11vw, 58px)
  }

  /* Auf schmalen Geraeten muss auch „Datenschutz” neben das Logo passen. */
  .page-head h1 {
    font-size: clamp(16px, 4.6vw, 22px);
    letter-spacing: .07em;
    padding-left: clamp(11px, 3vw, 16px)
  }

  #ablauf h2 {
    white-space: normal;
    max-width: 20ch
  }
}

@media(max-width:430px) {
  .steps li {
    padding-left: 72px
  }

  .steps h3::before {
    left: -72px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  .fade {
    animation: none;
    opacity: 1;
    transform: none
  }

  * {
    transition-duration: .01ms !important
  }
}

/* 4K+ Scaling */
@media(min-width: 1921px) {
  /* Dieselbe Kronen-Rechnung wie ab 961px, nur mit den groesseren Kurven —
     sonst laeuft der Claim auf flachen Ultrawide-Fenstern (z.B. 3440x1000) in
     die Krone. --claim-basis liegt hoeher, weil die erste Zeile hier durch die
     groessere Schrift und die weiteren Abstaende tiefer endet. */
  :root {
    --claim-basis: 280px;
    --claim-grad: clamp(21px, min(2.08vw, calc(var(--claim-platz) / 10.8)), 100px);
    --marke-grad: clamp(20px, min(1.77vw, calc(var(--marke-platz) / 9.7)), 90px);
  }

  .hero-brand {
    max-width: none;
  }

  .claim {
    max-width: none;
  }

  .mainnav a {
    font-size: clamp(18px, 0.91vw, 40px);
  }

  .hero-brand i {
    font-size: clamp(20px, 1.04vw, 50px);
  }

  .claim h1 span:first-child {
    margin-bottom: clamp(12px, 0.62vw, 30px);
  }

  .claim h1 span:nth-child(2),
  .claim h1 span:nth-child(3) {
    font-size: min(clamp(27px, 1.4vw, 70px), calc(var(--claim-grad) * .8));
  }

  .btn {
    font-size: clamp(18px, 0.93vw, 45px);
    padding: clamp(15px, 0.78vw, 40px) clamp(30px, 1.56vw, 80px);
  }
}
/* Remove hover/background from WhatsApp icon */
.infolist .v a.wa-icon {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.infolist .v a.wa-icon:hover {
  background: none !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  border: none !important;
}