:root{
  --cream:#F4F1EC;
  --paper:#FBFAF7;
  --ink:#171512;
  --soft:#504B44;
  --muted:#6B6459;
  --line:#E4DDD2;
  --sage:#3D4F3A;
  --sage2:#5A6B53;
  --clay:#B5764D;
  --clay-hdr:#8A4F28;
  --gold:#A8915E;
  --gold-hdr:#7A5F2E;
  --dark:#10130F;
  /* Textfarbe für Flächen mit background:var(--sage) bzw. background:var(--gold-hdr).
     --sage/--gold-hdr sind bewusst dunkel im Hell-Modus und hell im Dark Mode (siehe unten) –
     eine fest codierte helle Schrift (var(--paper)/#fff) wäre im Dark Mode auf der dann hellen
     Fläche nicht mehr lesbar. --on-sage/--on-gold-hdr folgen daher der Flächenfarbe je Theme. */
  --on-sage:var(--paper);
  --on-gold-hdr:var(--paper);
  /* Halbtransparente, helle Kartenfläche (z.B. .pc-box) auf hellem Section-Hintergrund.
     Im Dark Mode wäre derselbe fest codierte Hell-Wert eine helle Karte mit heller Schrift
     darauf – deshalb eigene Variable statt hartcodiertem rgba(251,250,247,.6). */
  --surface-tint:rgba(251,250,247,.6);
  /* Semantische Aliase (Dark-Mode-System). --paper und --dark bleiben bewusst
     themenunabhängig ("eingefroren"): sie tragen an vielen Stellen helle Schrift
     auf dauerhaft dunklen Flächen (Footer, Hero, Sage-Buttons) bzw. dienen selbst
     als dauerhaft dunkle Fläche – beides braucht in beiden Themes denselben Wert.
     --color-surface trägt die Dark-Mode-Anpassung für Karten/Flächen separat. */
  --color-background:var(--cream);
  --color-surface:var(--paper);
  --color-surface-elevated:var(--paper);
  --color-text:var(--ink);
  --color-text-muted:var(--soft);
  --color-text-subtle:var(--muted);
  --color-border:var(--line);
  --color-primary:var(--sage);
  --color-primary-hover:var(--sage2);
  --color-shadow:rgba(23,21,18,.4);
  /* Eigene Variable statt direkt var(--paper) für Flächen, die im Hell-Modus dunkel sind und
     im Dark Mode zu hellen "invertierten" Flächen werden (Standard-.btn, Skip-Link): deren
     Schrift muss dem eigenen Hintergrund folgen, nicht dem eingefrorenen --paper. Eine reine
     CSS-Override-Regel auf .btn selbst wäre unsicher – jede seitenspezifische Button-Variante
     (.sp-card-cta, .nav-cta, …) setzt color:var(--paper) mit gleicher/niedrigerer Spezifität
     und würde von einer generischen [data-theme="dark"] .btn-Regel ungewollt überschrieben. */
  --btn-primary-text:var(--paper);
}
html[data-theme="dark"]{
  --cream:#161A20;
  --ink:#E8E9EC;
  --soft:#ABB1BD;
  --muted:#868C9A;
  --line:#333A46;
  --sage:#8FBE86;
  --sage2:#9FCB95;
  --clay:#D28F63;
  --clay-hdr:#D28F63;
  --gold:#C9AD74;
  --gold-hdr:#D8B978;
  --on-sage:var(--dark);
  --on-gold-hdr:var(--dark);
  --surface-tint:rgba(30,35,44,.6);
  --color-surface:#1E232C;
  --color-surface-elevated:#252B36;
  --color-shadow:rgba(0,0,0,.6);
  --offer-hover-border:rgba(143,190,134,.35);
  --offer-hover-bg:rgba(143,190,134,.07);
  --offer-hover-shadow:0 22px 46px -36px rgba(0,0,0,.55);
  --btn-primary-text:var(--cream);
  color-scheme:dark;
}
html[data-theme="light"]{color-scheme:light}
/* Kurze, gedämpfte Überblendung nur während eines aktiven Theme-Wechsels (Klasse wird per
   JS gesetzt und nach Ablauf wieder entfernt) – nie beim initialen Laden, kein Flackern.
   JS setzt die Klasse ohnehin nicht bei prefers-reduced-motion; @media hier zusätzlich als
   CSS-seitige Absicherung, da die höhere Selektor-Spezifität sonst die globale
   transition-duration:.01ms-Regel für reduzierte Bewegung aushebeln würde. */
@media(prefers-reduced-motion:no-preference){
  html.theme-transitioning,html.theme-transitioning *{transition:background-color .22s ease,color .22s ease,border-color .22s ease,fill .22s ease,stroke .22s ease!important}
}
/* .btn.light nutzt bewusst das eingefrorene --paper als Fläche (heller Pill-Button für
   Hero-CTAs auf dauerhaft dunklem Fotogrund) – im Dark Mode muss dafür nur die Schrift auf
   Dunkel gepinnt werden, sonst wäre sie (über --ink) hell auf hell. */
html[data-theme="dark"] .btn.light{color:#171512}
html[data-theme="dark"] .btn.light:hover{color:var(--paper)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id^="testi-"]{scroll-margin-top:110px}
body{
  font-family:'Outfit',sans-serif;
  background:var(--cream);
  color:var(--ink);
  font-weight:380;
  line-height:1.7;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.035;
  z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
.display{font-family:'Fraunces',serif;font-weight:300;line-height:1.04;letter-spacing:-.025em;font-optical-sizing:none;font-variation-settings:"opsz" 18,"SOFT" 100,"WONK" 0}
.display em{font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
.eyebrow{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sage2);font-weight:800}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:999px;text-decoration:none;
  background:var(--ink);color:var(--btn-primary-text);border:1px solid var(--ink);
  font-weight:600;transition:.25s ease;cursor:pointer;font-family:inherit;font-size:inherit;
}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.light:hover{background:transparent;color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.ghost-light{background:transparent;color:var(--paper);border-color:rgba(251,250,247,.4)}
.btn.ghost-light:hover{border-color:var(--paper);background:rgba(251,250,247,.08)}
.btn.sage{background:var(--sage);border-color:var(--sage);color:var(--on-sage)}
.btn.sage:hover{background:transparent;color:var(--sage)}
header{
  position:sticky;top:0;z-index:70;
  background:rgba(244,241,236,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* Hartkodiertes Cream-Tint statt var(--cream), da mit Transparenz kombiniert (Blur-Header).
   Deckt auch den reduzierten Header der Rechtsseiten ab (assets/legal.css setzt dieselbe
   header-Regel, hier per Attribut-Selektor mit höherer Spezifität überschrieben). */
html[data-theme="dark"] header{background:rgba(22,26,32,.88)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:17px 0;gap:24px}
.brand{text-decoration:none;display:flex;align-items:center;gap:11px}
.brand-mark{width:42px;height:42px;border-radius:50%;background:var(--sage);color:var(--on-sage);display:grid;place-items:center;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;flex-shrink:0}.brand-mark-svg{width:27px;height:27px;display:block}
.brand-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.brand strong{font-family:'Fraunces',serif;font-size:1.38rem;font-weight:400;color:var(--ink);font-optical-sizing:none;font-variation-settings:"opsz" 18,"SOFT" 100,"WONK" 0;letter-spacing:-.008em;font-kerning:normal;white-space:nowrap}
.brand strong em{font-style:normal;color:var(--gold-hdr)}
.brand-text span{font-size:.64rem;letter-spacing:.098em;text-transform:uppercase;color:#4C5D45;font-weight:560;margin-top:4px;white-space:nowrap}
html[data-theme="dark"] .brand-text span{color:var(--sage2)}
nav{display:flex;align-items:center;gap:30px;flex:1;margin-left:48px}
.nav-secondary{display:none}
nav a{text-decoration:none;color:var(--soft);font-size:.92rem;font-weight:500;letter-spacing:.01em;position:relative;padding-bottom:4px;transition:color .25s ease}
nav a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--sage2);border-radius:99px;transition:width .28s cubic-bezier(.4,0,.2,1)}
nav a:hover{color:var(--sage)}
nav a:hover:after,nav a.active:after,nav a[aria-current="page"]:after{width:100%}
nav a.active,nav a[aria-current="page"]{color:var(--sage)}
.nav-cta{background:var(--sage);color:var(--on-sage)!important;padding:9px 18px;border-radius:99px;font-weight:600!important;white-space:nowrap;margin-left:auto}
.nav-cta:after{display:none!important}
.nav-cta:hover{background:var(--sage2);color:var(--paper)!important}
@media(max-width:980px){.nav-cta{text-align:center;border-bottom:none!important;margin-top:14px;margin-left:0;white-space:normal}}
/* Reduzierter Header (rechtliche Seiten, 404) */
.header-back{color:var(--soft);text-decoration:none;font-size:.92rem;font-weight:500}
.header-back:hover{color:var(--sage)}
.socials{display:none;gap:8px}
.socials a{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;text-decoration:none;color:var(--sage2);background:rgba(110,130,104,.07);transition:.25s ease}
.socials a:hover{border-color:var(--sage);color:var(--on-sage);background:var(--sage);transform:translateY(-2px)}
.socials svg{width:17px;height:17px;fill:currentColor}
/* ── Burger (mobile menu trigger) ── */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:rgba(110,130,104,.07);cursor:pointer;padding:0;flex-shrink:0;transition:.25s ease;position:relative;z-index:100}
.nav-burger:hover{border-color:var(--sage)}
.nav-burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:99px;margin:0 auto;transition:transform .3s ease,opacity .2s ease}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:980px){
  body.menu-open header{z-index:100}
  body.menu-open .nav-burger{position:fixed;top:17px;right:32px}
}
@media(max-width:620px){
  body.menu-open .nav-burger{right:16px}
}
/* ── Theme-Schalter (System/Hell/Dunkel) ──
   Sitzt als erstes Kind in <nav>, nicht in der schmalen Kopfzeile neben Logo/Burger: auf
   sehr schmalen Phones reicht dort der Platz nicht (langer Markenname + Burger füllen die
   Zeile bereits). Auf Desktop schiebt order:99 ihn ans Ende der horizontalen Nav-Leiste
   (neben die CTA-Pille); im mobilen Ausklapp-Panel bleibt er dank order:0 (Standard) das
   erste, oben rechts ausgerichtete Element. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:rgba(110,130,104,.07);color:var(--soft);cursor:pointer;flex-shrink:0;padding:0;position:relative;transition:border-color .25s ease,color .25s ease,background-color .25s ease}
.theme-toggle:hover{border-color:var(--sage);color:var(--sage)}
.theme-toggle .theme-icon{display:none;width:19px;height:19px}
.theme-toggle[data-mode="system"] .theme-icon-system,
.theme-toggle[data-mode="light"] .theme-icon-light,
.theme-toggle[data-mode="dark"] .theme-icon-dark{display:block}
@media(min-width:981px){
  nav .theme-toggle{order:99}
}
@media(max-width:980px){
  .theme-toggle{align-self:flex-end;margin-bottom:16px}
}
/* Small phones: step the subline down before touching the wordmark. At .66rem/.03em it
   measures 189px, staying flush with the 187px wordmark (2px, imperceptible) while
   keeping the subline legible (10.56px instead of the old 9.6px). */
@media(max-width:430px){
  .brand-text span{font-size:.66rem;letter-spacing:.03em}
}
/* Below this the wordmark alone no longer clears the burger, so the subline goes. */
@media(max-width:365px){
  .brand{gap:10px}
  .brand strong{font-size:1.26rem}
  .brand-text span{display:none}
}
.nav-overlay{position:fixed;inset:0;background:rgba(16,19,15,.5);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;z-index:90}
body.menu-open .nav-overlay{opacity:1;visibility:visible}

/* The subline — not the wordmark — sets the brand block width. At the default .68rem/.1em
   it measures 226px, just under the 228px of the old .59rem/.2em setting, so wide desktop
   and the burger layouts are unaffected. Only the 981-1120px band, where the horizontal
   nav needs all 663px it can get, has to step it down. At .64rem/.02em it measures 180px
   (2px narrower than the old .6rem/.06em) while staying legible (10.24px vs 9.6px). */
@media(max-width:1120px) and (min-width:981px){
  .brand-text span{font-size:.64rem;letter-spacing:.02em}
}

@media(max-width:980px){
  nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;width:min(86vw,360px);height:100vh;height:100dvh;
    flex:none;margin-left:0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--color-surface);border-left:1px solid var(--line);
    box-shadow:-24px 0 60px -30px rgba(16,19,15,.5);
    box-sizing:border-box;padding:84px 24px 32px;overflow-y:auto;overflow-x:hidden;
    transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);
    z-index:95;
  }
  body.menu-open nav{transform:translateX(0)}
  nav a{font-size:1.06rem;padding:15px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
  nav a:after{display:none}
  nav a.active,nav a[aria-current="page"]{color:var(--sage);font-weight:600}

  /* Dropdowns flatten into the panel as an accessible accordion — offers stay directly reachable, no second flyout */
  .has-drop{width:100%;min-width:0;position:static}
  .drop-toggle{width:100%;justify-content:space-between;font-size:.74rem !important;letter-spacing:.16em;text-transform:uppercase;font-weight:800 !important;color:var(--sage2) !important;padding:20px 4px 8px !important;cursor:default}
  .drop-toggle:after{display:none}
  .drop-toggle svg{display:none}
  .drop-menu{position:static !important;transform:none !important;opacity:1 !important;visibility:visible !important;width:100%;max-width:none;max-height:none;overflow:visible;background:none;border:none;box-shadow:none;padding:0;display:block;box-sizing:border-box}
  .drop-menu:before{display:none}
  .drop-group{margin-bottom:0}
  .drop-group-label{padding:14px 4px 4px}
  .drop-row{flex-direction:column;gap:0}
  .drop-item{box-sizing:border-box;min-width:0;padding:11px 26px 11px 4px;border-bottom:1px solid var(--line);border-radius:0}
  .drop-item .di-arrow{right:2px}
  .drop-item-featured,.drop-item-featured:hover{background:none}
  .drop-item-all{border-radius:0}
  .drop-group-link{padding:8px 4px 4px;margin:0}

  .nav-burger{display:flex}
  .socials{display:none}

  /* FAQ / Kontakt: reachable but visually subordinate in the mobile panel */
  .nav-secondary{display:flex;flex-direction:column;margin-top:4px;padding-top:4px;border-top:1px dashed var(--line)}
  .nav-secondary a{font-size:.86rem;color:var(--muted);font-weight:500;padding:11px 4px}
}
@media(max-width:620px){.sticky{left:16px;right:16px}.sticky .btn{width:100%}}
.hero .wrap{position:relative;z-index:2}
.hero h1 em{font-style:italic;color:#D7E7EA}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* Centralized hero image logic: pages set --hero-image/--hero-overlay/--hero-position-* locally.
   --hero-image accepts a url() or a gradient, so pages without a real photo get a CSS-gradient fallback. */
.hero{
  --hero-overlay:linear-gradient(90deg,rgba(16,19,15,.86),rgba(16,19,15,.55),rgba(16,19,15,.18));
  --hero-image:linear-gradient(135deg,var(--dark),#263121 58%,#151812);
  background-image:var(--hero-overlay),var(--hero-image);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:var(--hero-position-desktop,center),var(--hero-position-desktop,center);
}
@media(max-width:780px){
  .hero{background-position:var(--hero-position-mobile,center),var(--hero-position-mobile,center)}
}
/* Shared offer-page hero + fact strip: used by fasten-reset.html and retreat.html */
.offer-hero{position:relative;color:var(--paper);padding:116px 0 92px;overflow:hidden}
.offer-hero .wrap{position:relative;z-index:2}
.offer-hero-content{max-width:920px}
.offer-hero .eyebrow{color:var(--gold)}
.offer-hero h1{font-size:clamp(2.9rem,6.5vw,5.6rem);margin-top:18px}
.offer-hero .sub{font-family:'Fraunces',serif;font-weight:300;font-style:italic;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--sage2);margin-top:16px;max-width:36em}
.offer-hero .lead{font-size:1.18rem;color:rgba(251,250,247,.84);max-width:680px;margin-top:20px}
.offer-hero .note{margin-top:18px;font-size:.92rem;color:rgba(251,250,247,.6);max-width:38em}
.offer-tags{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.offer-tags span{border:1px solid rgba(251,250,247,.18);background:rgba(251,250,247,.08);border-radius:999px;padding:9px 14px;font-weight:600;color:rgba(251,250,247,.88);font-size:.92rem}
.offer-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.offer-compare{margin-top:20px;font-size:.88rem}
.offer-compare a{color:rgba(251,250,247,.72);text-decoration:none;border-bottom:1px solid rgba(251,250,247,.35);transition:color .2s,border-color .2s}
.offer-compare a:hover{color:var(--paper);border-color:rgba(251,250,247,.6)}
@media(max-width:900px){.offer-hero{padding:92px 0 72px}}

/* ---- Zentrales Mobile-Hero-System für Heros mit echtem Foto-Hintergrund ----
   Gilt zusätzlich zu .hero/.offer-hero/.fh-hero für jede Seite, die die Klasse .hero--photo trägt.
   Ab 769px unverändert: die bestehende, seiteneigene Desktop-background-Deklaration greift wie bisher.
   Bis 768px: das Foto bildet nur eine begrenzte obere Zone (::before) und geht weich in die dunkle
   Hero-Fläche über, statt gestreckt über die gesamte (variable) Hero-Höhe zu laufen.
   Seitenspezifisch zu setzen: --hero-mobile-image (url), --hero-mobile-position (Fokuspunkt).
   Optional überschreibbar: --hero-mobile-image-height, --hero-mobile-overlay-strength, --hero-mobile-content-background. */
.hero--photo{
  --hero-mobile-image-height: clamp(260px, 42vh, 400px);
  --hero-mobile-position: 50% 35%;
  --hero-mobile-overlay-strength: .9;
  --hero-mobile-content-background: var(--dark);
}
@media(max-width:768px){
  .hero--photo{
    position:relative;
    overflow:hidden;
    min-height:0;
    background:var(--hero-mobile-content-background);
  }
  .hero--photo::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:var(--hero-mobile-image-height);
    z-index:0;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:var(--hero-mobile-position);
    background-image:
      linear-gradient(to bottom,
        rgba(0,0,0,calc(var(--hero-mobile-overlay-strength) * .34)) 0%,
        rgba(0,0,0,calc(var(--hero-mobile-overlay-strength) * .62)) 58%,
        var(--hero-mobile-content-background) 100%),
      linear-gradient(115deg, rgba(0,0,0,calc(var(--hero-mobile-overlay-strength) * .4)), transparent 62%),
      var(--hero-mobile-image);
  }
  .hero--photo > .wrap{position:relative;z-index:2}
  .hero--photo .offer-hero-cta,.hero--photo .hero-cta,.hero--photo .fh-hero-ctas{flex-direction:column;align-items:stretch;gap:12px}
  .hero--photo .offer-hero-cta .btn,.hero--photo .hero-cta .btn,.hero--photo .fh-hero-ctas .btn{width:100%;text-align:center}
  .hero--photo .offer-tags{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .hero--photo .offer-tags span{display:flex;align-items:center;justify-content:center;text-align:center}
}
@media(hover:hover){.offer-tags span:hover{background:rgba(110,130,104,.14);border-color:rgba(110,130,104,.28);color:var(--ink);transform:translateY(-1px)}}
.fact-strip{background:var(--color-surface);border-bottom:1px solid var(--line)}
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line)}
.fact-item{background:var(--color-surface);padding:26px 24px;display:flex;flex-direction:column;gap:6px}
.fact-item .fact-label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage2);font-weight:800}
.fact-item .fact-value{font-family:'Fraunces',serif;font-size:1.1rem;color:var(--ink);line-height:1.25}
.fact-item .fact-sub{font-size:.85rem;color:var(--soft);margin-top:2px}
@media(max-width:900px){.fact-grid{grid-template-columns:repeat(2,1fr)}.fact-item:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:560px){.fact-grid{grid-template-columns:1fr}.offer-hero-cta{flex-direction:column}.offer-hero-cta .btn{width:100%}}
section{padding:88px 0}
/* Section-Intro: Kicker/Eyebrow + H2 + optionaler Einleitungsabsatz als ein linksbündiger, gestapelter Block (kein frei schwebender Fließtext neben der Überschrift). */
.head{display:block;max-width:840px;margin-bottom:56px}
.head h2{margin-top:12px}
.head p{max-width:44em;color:var(--soft);font-size:1.06rem}
.head>*+*{margin-top:26px}
@media(max-width:780px){.head{margin-bottom:40px}.head>*+*{margin-top:18px}}
footer{background:var(--dark);color:#fff;padding:48px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(2,1fr);gap:40px}
.foot-grid-5{grid-template-columns:1.3fr repeat(3,1fr)}
/* footer ist bewusst immer dunkel (background:var(--dark), s.o.) — deshalb hier wie color:#fff
   ein fest codierter, immer heller Akzentton statt der themenabhängigen --sage2, die im Light
   Mode zum dunklen Grün würde und auf dem dunklen Footer unlesbar wäre. */
footer h3{font-size:.73rem;text-transform:uppercase;letter-spacing:.18em;color:#9FCB95;margin-bottom:14px;font-weight:800}
footer a{display:block;color:rgba(255,255,255,.65);text-decoration:none;padding:10px 0;margin:0;font-size:.9rem;transition:.2s}
footer a:hover{color:#9FCB95}
footer p{color:rgba(255,255,255,.65);font-size:.9rem}
.foot-brand-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot-mark{width:38px;height:38px;border-radius:50%;background:var(--sage);color:var(--on-sage);display:grid;place-items:center;font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:700;flex-shrink:0}
.foot-brand strong{font-family:'Fraunces',serif;font-weight:400;font-size:1.5rem;display:block;white-space:nowrap}
.foot-brand strong em{font-style:normal;color:var(--gold)}
.foot-brand p{margin-top:10px;line-height:1.6}
.foot-social{display:flex;gap:10px;margin-top:18px}
.foot-social a{width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;margin:0;color:#fff;transition:.2s}
.foot-social a:hover{border-color:#9FCB95;background:var(--sage);color:var(--on-sage)}
.foot-social svg{width:16px;height:16px;fill:currentColor}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:24px;display:flex;justify-content:center;text-align:center;flex-wrap:wrap;gap:12px;color:rgba(255,255,255,.58);font-size:.82rem}
footer a:focus-visible{outline:2px solid #9FCB95;outline-offset:3px;border-radius:4px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid-5{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}.foot-grid-5{grid-template-columns:1fr}}
html.js .reveal:not(.in){opacity:0;transform:translateY(24px)}
.reveal{transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.consent-row input[type=checkbox]{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--sage);cursor:pointer}
/* Honeypot-Feld gegen einfache Formular-Bots — für echte Nutzer unsichtbar, für Bots auffindbar */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
nav a:hover,nav a.active,nav a[aria-current="page"]{color:var(--sage)}

/* Angebote-Dropdown (gemeinsam) */
.has-drop{position:relative}
.drop-toggle{display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:none;border:none;font:inherit;color:var(--soft);font-size:.92rem;font-weight:500;position:relative;padding-bottom:4px;transition:color .25s ease}
.drop-toggle svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .25s ease}
.has-drop:hover .drop-toggle,.has-drop:focus-within .drop-toggle,.has-drop.open .drop-toggle{color:var(--sage)}
.has-drop:hover .drop-toggle svg,.has-drop:focus-within .drop-toggle svg,.has-drop.open .drop-toggle svg{transform:rotate(180deg)}
.drop-toggle.active{color:var(--sage)}
.drop-toggle:after{content:"";position:absolute;left:-4px;bottom:0;width:0;height:2px;background:var(--sage2);border-radius:99px;transition:width .28s cubic-bezier(.4,0,.2,1)}
.has-drop:hover .drop-toggle:after,.has-drop:focus-within .drop-toggle:after,.has-drop.open .drop-toggle:after,.drop-toggle.active:after{width:calc(100% + 4px)}
.drop-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);width:480px;max-width:min(480px,92vw);max-height:calc(100vh - 110px);overflow-y:auto;background:var(--color-surface);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 24px 60px -24px rgba(16,19,15,.4);opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:90}
.has-drop:hover .drop-menu,.has-drop:focus-within .drop-menu,.has-drop.open .drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-menu:before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.drop-group{margin-bottom:6px}
.drop-group:last-of-type{margin-bottom:2px}
.drop-group-label{display:block;padding:6px 13px 3px;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--sage2)}
.drop-row{display:flex;gap:6px}
.drop-row .drop-item{flex:1 1 0;min-width:0}
.drop-item{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 30px 10px 13px;border-radius:11px;text-decoration:none;transition:background .18s ease}
.drop-item:hover{background:var(--cream)}
.drop-item:focus-visible{outline:2px solid var(--sage2);outline-offset:2px;background:var(--cream)}
.drop-item .di-title{font-family:'Fraunces',serif;font-weight:400;font-size:.98rem;color:var(--ink)}
.drop-item .di-sub{font-size:.78rem;line-height:1.35;color:var(--muted)}
.drop-item .di-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:rgba(61,79,58,.06);box-shadow:inset 0 0 0 1px var(--line);color:var(--sage2);margin-bottom:4px;transition:background .18s ease,box-shadow .18s ease,color .18s ease}
.drop-item .di-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drop-item.current .di-icon{background:rgba(61,79,58,.12);color:var(--sage)}
.drop-item:hover .di-icon,.drop-item:focus-visible .di-icon{background:rgba(61,79,58,.14);color:var(--sage);box-shadow:inset 0 0 0 1px rgba(61,79,58,.3),0 0 14px rgba(110,130,104,.6)}
.drop-item-featured .di-icon{background:rgba(61,79,58,.09)}
.drop-item .di-arrow{position:absolute;top:50%;right:11px;width:13px;height:13px;transform:translateY(-50%);fill:none;stroke:currentColor;stroke-width:2;color:var(--sage2);transition:transform .2s ease}
.drop-item:hover .di-arrow,.drop-item:focus-visible .di-arrow{transform:translateY(-50%) translateX(3px)}
.drop-item.current{background:rgba(61,79,58,.1);box-shadow:inset 0 0 0 1px rgba(61,79,58,.3)}
.drop-item.current:hover{background:rgba(61,79,58,.14)}
.drop-item.current .di-title{color:var(--sage);font-weight:600}
.drop-item.current .di-arrow{display:none}
.di-current-tag{display:flex;align-items:center;gap:5px;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);margin-top:5px}
.di-current-tag:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);flex:none}
.drop-item-featured{background:rgba(61,79,58,.06)}
.drop-item-featured:hover,.drop-item-featured:focus-visible{background:rgba(61,79,58,.11)}
.drop-item-all{display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;margin-top:4px;padding:12px 10px;border-top:1px solid var(--line);border-radius:11px;font-size:.88rem;font-weight:700;color:var(--sage);text-decoration:none;transition:background .18s ease}
.drop-item-all:hover,.drop-item-all:focus-visible{background:var(--cream)}
.drop-group-link{display:inline-flex;align-items:center;gap:4px;margin:2px 13px 4px;padding:2px 0;font-size:.79rem;font-weight:600;color:var(--muted);text-decoration:none;transition:color .18s ease}
.drop-group-link:hover,.drop-group-link:focus-visible{color:var(--sage)}
.drop-group-link.current{color:var(--sage2)}
@media(prefers-reduced-motion:reduce){
  .drop-item .di-arrow,.drop-toggle svg{transition:none}
}
/* Diese Regeln stehen bewusst nach den Desktop-Dropdown-Regeln, damit das
   mobile Menü nicht wieder die Desktopbreite von 480px übernimmt. */
@media(max-width:980px){
  nav .drop-menu{width:100%!important;max-width:100%!important;padding:0!important;box-sizing:border-box}
  nav .drop-group,nav .drop-row,nav .drop-item,nav .drop-item-all{width:100%;max-width:100%;box-sizing:border-box}
}
/* Sticky reveal-on-scroll */
.sticky{opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease,visibility .35s}
.sticky.show{opacity:1;visibility:visible;transform:translateY(0)}


/* ===== Barrierefreiheit ===== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--btn-primary-text);padding:12px 20px;border-radius:0 0 12px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  html.js .reveal:not(.in){opacity:1;transform:none}
}


/* --- V14 positioning additions --- */
.business-path{margin-top:22px;padding:28px 30px;border:1px solid rgba(181,118,77,.28);border-radius:18px;background:linear-gradient(135deg,rgba(181,118,77,.08),rgba(61,79,58,.045));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.business-path h3{font-family:'Fraunces',serif;font-size:clamp(1.35rem,2.2vw,1.9rem);font-weight:450;line-height:1.18;margin:8px 0 10px;color:var(--ink)}
.business-path p{margin:0;color:var(--muted);max-width:760px}
.business-path .btn{white-space:nowrap}
.business-bridge{padding:42px 0;background:var(--cream);border-bottom:1px solid var(--line)}
.business-bridge-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.business-bridge .display{font-size:clamp(1.65rem,3vw,2.45rem);margin:8px 0 10px}
.business-bridge p{max-width:760px;margin:0;color:var(--muted)}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}
.metric-card{padding:24px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.055)}
.metric-card h3{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:500;margin:0 0 8px;color:var(--paper)}
.metric-card p{margin:0;color:rgba(255,255,255,.72);line-height:1.55}
.measurement-note{margin:24px 0 0;padding:18px 20px;border-left:3px solid var(--gold);background:rgba(255,255,255,.055);color:rgba(255,255,255,.78)}
.process-alt{border-top:1px solid rgba(255,255,255,.09)}
.self-employed-page .offer-hero{min-height:680px}
.self-employed-page .offer-hero-content{max-width:900px}
.self-employed-page .problem .card-lead{border-color:rgba(181,118,77,.34);background:rgba(181,118,77,.08)}
@media(max-width:900px){.business-path,.business-bridge-inner{grid-template-columns:1fr}.business-path .btn,.business-bridge .btn{justify-self:start}.metric-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.business-path{padding:22px}.metric-grid{grid-template-columns:1fr}.self-employed-page .offer-hero{min-height:auto}}
@media(max-width:620px){
  .self-employed-page .offer-hero{padding-top:76px;padding-bottom:52px}
  .self-employed-page .offer-hero .display{font-size:clamp(2.2rem,10.8vw,2.65rem);line-height:1.03}
  .self-employed-page .offer-hero .lead{font-size:1rem;line-height:1.55}
  .self-employed-page .offer-hero .note{display:none}
}


/* ---- Angebotsseiten: einheitliches Hover-/Markierungssystem ---- */
:root{
  --offer-hover-border: rgba(110,130,104,.38);
  --offer-hover-bg: rgba(110,130,104,.045);
  --offer-hover-shadow: 0 22px 46px -36px rgba(61,79,58,.38);
}
.fact-item,.card,.step,.recog-item,.method-card,.result-card,.metric-card,.format-card,.journey-card,.day-card,.week-card,.coach-card,.compare-card,.fit-box,.whofor-card,.why-card,.notice-card,.example-box,.incl-box,.reset-card,.reset-price-box,.moment-card,.rc-card,.op-card,.phil-card,.format-choice,.testi-card,.booking-info,.booking-form,.booking-hint,.booking-success,.quali-item,.coach-proof-item{
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-color .24s ease, color .24s ease;
}
.fact-item:hover,.card:hover,.step:hover,.recog-item:hover,.method-card:hover,.result-card:hover,.metric-card:hover,.format-card:hover,.journey-card:hover,.day-card:hover,.week-card:hover,.coach-card:hover,.compare-card:hover,.fit-box:hover,.whofor-card:hover,.why-card:hover,.notice-card:hover,.example-box:hover,.incl-box:hover,.reset-card:hover,.reset-price-box:hover,.moment-card:hover,.rc-card:hover,.op-card:hover,.phil-card:hover,.format-choice:hover,.testi-card:hover,.booking-info:hover,.booking-form:hover,.booking-hint:hover,.booking-success:hover,.quali-item:hover,.coach-proof-item:hover,
.fact-item:focus-within,.card:focus-within,.step:focus-within,.recog-item:focus-within,.method-card:focus-within,.result-card:focus-within,.metric-card:focus-within,.format-card:focus-within,.journey-card:focus-within,.day-card:focus-within,.week-card:focus-within,.coach-card:focus-within,.compare-card:focus-within,.fit-box:focus-within,.whofor-card:focus-within,.why-card:focus-within,.notice-card:focus-within,.example-box:focus-within,.incl-box:focus-within,.reset-card:focus-within,.reset-price-box:focus-within,.moment-card:focus-within,.rc-card:focus-within,.op-card:focus-within,.phil-card:focus-within,.format-choice:focus-within,.testi-card:focus-within,.booking-info:focus-within,.booking-form:focus-within,.booking-hint:focus-within,.booking-success:focus-within,.quali-item:focus-within,.coach-proof-item:focus-within{
  transform:translateY(-3px);
  box-shadow:var(--offer-hover-shadow);
  border-color:var(--offer-hover-border);
}
.fact-item:hover,.recog-item:hover,.quali-item:hover,.coach-proof-item:hover{background:var(--offer-hover-bg)}
.offer-tags span,.exp-pill,.day-slots span,.op-meta span,.way-meta span,.booking-features li,.journey-included li{transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .22s ease}
.exp-pill:hover,.day-slots span:hover,.op-meta span:hover{background:rgba(110,130,104,.14);border-color:rgba(110,130,104,.28);color:var(--ink);transform:translateY(-1px)}
.faq-q,.fh-faq-q{transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease, transform .22s ease}
.faq-q:hover,.faq-q:focus-visible,.fh-faq-q:hover,.fh-faq-q:focus-visible{background:rgba(110,130,104,.07);border-color:rgba(110,130,104,.28);color:var(--ink);box-shadow:0 14px 30px -26px rgba(61,79,58,.35)}
.faq-item:hover,.fh-faq-item:hover{border-color:rgba(110,130,104,.24)}
/* Einheitliches +/− FAQ-Icon, sitieweit: zwei CSS-Balken statt Zeichen/SVG, damit Größe,
   Position (immer rechtsbündig) und Öffnen-Zustand über details>summary- und button-Varianten
   identisch sind. Öffnen-Zustand greift über aria-expanded="true" (bei details>summary per
   kleinem Sync-Script in site-fixes.js gesetzt, bei button-Varianten bereits von deren eigenem
   Klick-Handler gesetzt). */
.faq-q{position:relative;padding-right:30px}
.faq-q:before,.faq-q:after{content:"";position:absolute;right:4px;top:50%;width:14px;height:2px;border-radius:99px;background:var(--sage2);transform:translateY(-50%);transition:transform .2s ease,opacity .2s ease}
.faq-q:after{transform:translateY(-50%) rotate(90deg)}
.faq-q[aria-expanded="true"]:after{opacity:0;transform:translateY(-50%) rotate(90deg) scaleX(0)}
.op-card:hover .op-cta,.format-choice:hover a,.journey-card:hover a,.compare-card:hover a,.coach-card:hover a{color:var(--ink)}
.testi-card:hover .stars{background:rgba(110,130,104,.14);border-color:rgba(110,130,104,.3)}
.testi-card:hover .testi-avatar{box-shadow:0 10px 20px -10px rgba(61,79,58,.55)}
.booking-form:hover,.booking-info:hover,.reset-price-box:hover{box-shadow:0 28px 54px -34px rgba(61,79,58,.32)}

/* ---- Vertrauensblock "Deine Begleitung" (gemeinsame Komponente) ---- */
.coach-band{background:var(--color-surface);border-top:1px solid var(--line)}
.coach-band-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px;align-items:start}
@media(max-width:860px){.coach-band-grid{grid-template-columns:1fr;gap:30px}}
.coach-band-photo{width:100%;max-width:220px;border-radius:20px;overflow:hidden;margin-bottom:22px;box-shadow:0 18px 38px -26px rgba(23,21,18,.4)}
.coach-band-photo img{width:100%;height:100%;object-fit:cover;display:block}
.coach-intro h2{font-size:clamp(2rem,4vw,3.25rem);max-width:12em}
.coach-intro p{color:var(--soft);font-size:1.04rem;line-height:1.65;margin-top:18px;max-width:34em}
.coach-band-link{display:inline-block;margin-top:20px;color:var(--sage);font-weight:600;text-decoration:none;font-size:.92rem}
.coach-band-link:hover{color:var(--ink)}
.coach-card{background:var(--cream);border:1px solid var(--line);border-radius:22px;padding:32px}
.coach-card h3{font-family:'Fraunces',serif;font-size:1.35rem;font-weight:400;margin:0 0 14px;color:var(--ink)}
.coach-card p{color:var(--soft);line-height:1.65;margin:0}
.coach-proof{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
@media(max-width:560px){.coach-proof{grid-template-columns:1fr}}
.coach-proof-item{background:var(--color-surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.coach-proof-item strong{display:block;color:var(--ink);font-family:'Fraunces',serif;font-weight:500;font-size:1.05rem;margin-bottom:4px}
.coach-proof-item span{display:block;color:var(--soft);font-size:.86rem;line-height:1.4}

/* ---- Optionales Vorgespräch (gemeinsame Komponente, für dunkle Booking-Sektionen) ---- */
.pre-call{margin-top:22px}
.pre-call p{color:rgba(251,250,247,.5);font-size:.85rem;margin:0 0 6px}
.pre-call a{color:var(--gold);text-decoration:none;font-weight:600;font-size:.95rem}
.pre-call a:hover{color:var(--paper)}