/* ============================================================
   VERTRAUENSCOACH — EXECUTIVE
   Nazim Bayram · Design System
   Navy · Amber · Cream / Cormorant Garamond + Jost
   ============================================================ */

/* ---------- 01 · FONTS (self-hosted, DSGVO-konform) ---------- */
@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/media/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/media/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/media/fonts/jost-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/media/fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 02 · TOKENS ---------- */
:root{
  /* Navy — Autoritätsfläche */
  --navy-950:#070E19;
  --navy-900:#0B1626;
  --navy-800:#101F35;
  --navy-700:#16293F;
  --navy-600:#22384F;
  --navy-500:#31485F;

  /* WhatsApp — Fremdmarke, deshalb der einzige Farbwert ausserhalb der Palette.
     Ein WhatsApp-Knopf in Amber wird nicht als WhatsApp erkannt, und genau die
     Wiedererkennung ist der Sinn der Sache. Markenrichtlinie:
     https://faq.whatsapp.com/5913398998672934/ — der geschuetzte
     „Chat on WhatsApp“-Button darf nicht veraendert werden, deshalb wird er
     hier nicht nachgebaut, sondern nur Farbe und Glyphe uebernommen.
     Schrift steht dunkel auf Gruen: Weiss auf #25D366 waere 2,4:1. */
  --wa-500:#25D366;
  --wa-600:#1EBE5A;
  --wa-ink:#062E1B;

  /* Amber / Bronze — der einzige Akzent */
  --amber-400:#F0B357;
  --amber-500:#E5A33C;
  --amber-600:#C98F31;
  --focus:var(--amber-500);
  --bronze:#B8823F;
  --bronze-ink:#8A6224;   /* 5.3:1 auf Cream */

  /* Cream — Ruhefläche */
  --cream-50:#FCFBF8;
  --cream-100:#F7F5F1;
  --cream-200:#EFECE5;
  --cream-300:#E2DED4;

  /* Ink */
  --ink-900:#141C26;
  --ink-700:#3A434F;
  --ink-500:#5C6470;

  /* Auf Navy */
  --on-navy:#EAEEF3;
  --on-navy-mute:#9BAABB;
  --on-navy-dim:#7A8EA6;   /* 4,92:1 auf Navy — vorher 4,08 und damit unter AA */

  /* Linien */
  --hair-dark:rgba(234,238,243,.14);
  --hair-dark-2:rgba(234,238,243,.24);
  --hair-light:#DFDBD2;
  --hair-light-2:#CFC9BB;

  /* Semantik: wird pro Section umgeschaltet */
  --bg:var(--navy-800);
  --fg:var(--on-navy);
  --fg-mute:var(--on-navy-mute);
  --hair:var(--hair-dark);
  --eyebrow-c:var(--bronze);

  /* Typografie */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Auf 400 px stand die Headline in vier Zeilen zu 44 px und war mit 189 px
     Hoehe der lauteste Ton der Seite — mehr Plakat als Haltung. Nicht die
     Untergrenze war schuld, sondern der Mittelwert: 1.9rem + 3.6vw liegt auf
     jedem Telefon ueber jeder sinnvollen Untergrenze. Neu gelegt durch zwei
     Punkte — 38 px bei 400 px Breite, 72 px ab 1200 px. Der Desktop bleibt
     damit unveraendert, das Telefon wird ruhiger, und zur h2 (32 px) bleibt
     ein klarer Abstand. */
  --fs-display:clamp(2.25rem,1.3125rem + 4.25vw,4.5rem);
  --fs-h1:clamp(2.5rem,1.7rem + 3.4vw,4.25rem);
  --fs-h2:clamp(2rem,1.42rem + 2.5vw,3.5rem);
  --fs-h3:clamp(1.1875rem,1.1rem + .38vw,1.4375rem);
  --fs-h4:clamp(1.0625rem,1.02rem + .2vw,1.1875rem);
  --fs-lead:clamp(1.0625rem,1rem + .38vw,1.3125rem);
  --fs-body:clamp(.9375rem,.91rem + .12vw,1.0625rem);
  --fs-sm:.875rem;
  --fs-xs:.8125rem;
  --fs-label:.6875rem;

  --lh-display:1.04;
  --lh-head:1.1;
  --lh-body:1.72;

  /* Raster */
  --shell:1280px;
  --shell-wide:1440px;
  --shell-narrow:820px;
  --gut:clamp(1.25rem,.6rem + 2.8vw,3.5rem);
  --sec-y:clamp(4.5rem,2.6rem + 7.2vw,9.5rem);
  --sec-y-tight:clamp(3.25rem,2rem + 4.5vw,6rem);

  /* Form */
  --r:2px;
  --r-md:3px;
  /* Nur fuer die Bildkarten in „Zwei Wege“ — aus der Variante
     VertrauensCoach mitgebracht. Der Rest der Seite bleibt bei Haarlinien. */
  --r-card:14px;
  --shadow-soft:0 26px 60px -30px rgba(7,22,42,.45);
  --shadow-lift:0 34px 70px -34px rgba(7,22,42,.55);

  /* Motion */
  --out:cubic-bezier(.16,1,.3,1);
  --inout:cubic-bezier(.65,0,.35,1);
  --t:.4s;

  --header-h:82px;
}

/* ---------- 03 · RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1.5rem)}
body{
  margin:0;background:var(--navy-800);color:var(--on-navy);
  font-family:var(--sans);font-size:var(--fs-body);font-weight:300;line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"kern" 1;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;line-height:var(--lh-head);letter-spacing:-.012em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
/* Browser geben figure standardmäßig margin:1em 40px — das schiebt Karten
   im Spaltensatz aus dem Container. */
figure,blockquote,dl,dd{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
hr{border:0;margin:0}

::selection{background:var(--amber-500);color:var(--navy-950)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:1px}
/* Fokusfarbe folgt der Flaeche: Amber traegt auf Navy, auf Cream erreicht es nur
   1,9:1 und liegt damit unter den 3:1 aus WCAG 1.4.11. Dort uebernimmt Bronze-Ink. */
.section--cream,.section--paper,.section--sand{--focus:var(--bronze-ink)}
:focus:not(:focus-visible){outline:none}

html{scrollbar-color:var(--navy-600) var(--navy-900)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--navy-900)}
::-webkit-scrollbar-thumb{background:var(--navy-600);border:3px solid var(--navy-900);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--navy-500)}

/* ---------- 04 · LAYOUT ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.shell--wide{max-width:var(--shell-wide)}
.shell--narrow{max-width:var(--shell-narrow)}

.section{position:relative;padding-block:var(--sec-y);background:var(--bg);color:var(--fg)}
.section--tight{padding-block:var(--sec-y-tight)}

.section--cream{
  --bg:var(--cream-100);--fg:var(--ink-900);--fg-mute:var(--ink-500);
  --hair:var(--hair-light);--eyebrow-c:var(--bronze-ink);
}
.section--paper{
  --bg:var(--cream-50);--fg:var(--ink-900);--fg-mute:var(--ink-500);
  --hair:var(--hair-light);--eyebrow-c:var(--bronze-ink);
}
.section--sand{
  --bg:var(--cream-200);--fg:var(--ink-900);--fg-mute:var(--ink-500);
  --hair:var(--hair-light-2);--eyebrow-c:var(--bronze-ink);
}
.section--navy{--bg:var(--navy-800)}
.section--deep{--bg:var(--navy-900)}

/* ---------- 05 · TYPOGRAFIE ---------- */
.display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:-.018em}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2);letter-spacing:-.015em}
/* Auf 320 px breiten Telefonen passen "Datenschutzerklaerung" und
   "Geschaeftsbedingungen" in dieser Groesse nicht in eine Zeile und ragten
   ueber den Rand. Silbentrennung nach lang="de"; overflow-wrap faengt
   Browser ohne deutsches Trennwoerterbuch auf. Nur schmal, damit breitere
   Bildschirme keine unnoetigen Trennstriche bekommen. */
@media (max-width:399px){.h2,h1{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}}
.h3{font-size:var(--fs-h3);line-height:1.24}

.lead{font-size:var(--fs-lead);line-height:1.62;font-weight:300;color:var(--fg-mute)}

.mute{color:var(--fg-mute)}

.balance{text-wrap:balance}

.eyebrow{
  display:block;margin:0 0 1.125rem;
  font-family:var(--sans);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow-c);
}
.eyebrow--num{display:flex;align-items:center;gap:.75rem}
.eyebrow--num::before{content:"";width:1.75rem;height:1px;background:currentColor;opacity:.6}

/* Amber-Haarlinie unter Headlines */
.rule{width:3.25rem;height:2px;background:var(--amber-500);margin:1.5rem 0 0}

/* Serifen-Index 01 / 02 / 03 */
.index{
  font-family:var(--serif);font-size:clamp(1.75rem,1.4rem + 1.3vw,2.5rem);
  font-weight:500;line-height:1;color:var(--amber-500);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.section--cream .index,.section--paper .index,.section--sand .index{color:var(--bronze-ink)}

/* ---------- 06 · BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  min-height:52px;padding:.9375rem 1.75rem;
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;
  border:1px solid transparent;border-radius:var(--r);cursor:pointer;
  transition:background-color var(--t) var(--out),color var(--t) var(--out),
             border-color var(--t) var(--out),transform .18s var(--out);
  overflow:hidden;
}
.btn:active{transform:translateY(1px)}
.btn__i{flex:0 0 auto;transition:transform .42s var(--out)}
.btn:hover .btn__i{transform:translateX(5px)}

.btn--primary{background:var(--amber-500);color:var(--navy-950);border-color:var(--amber-500);font-weight:600}
.btn--primary:hover{background:var(--amber-400);border-color:var(--amber-400)}

/* Ablehnen muss so leicht fallen wie Zustimmen. Ein gefuellter Knopf
   neben einem blassen Umriss ist genau das Nudging, das Aufsichts-
   behoerden beanstanden. Gleiche Groesse, gleiches Gewicht, gleicher
   Kontrast — nur die Farbe unterscheidet, damit die Reihe nicht als
   ein Block verschwimmt. */
.btn--refuse{background:var(--navy-600);color:var(--on-navy);border-color:var(--navy-500)}
.btn--refuse:hover{background:var(--navy-500);border-color:var(--on-navy-dim)}

.btn--whatsapp{background:var(--wa-500);color:var(--wa-ink);border-color:var(--wa-500);font-weight:600}
.btn--whatsapp:hover{background:var(--wa-600);border-color:var(--wa-600)}
/* Die Glyphe laeuft im Knopf mit und darf nicht wie der Pfeil wegwandern. */
.btn__wa{flex:0 0 auto}
.btn--whatsapp:hover .btn__wa{transform:none}

.btn--ghost{background:transparent;color:var(--on-navy);border-color:var(--hair-dark-2)}
.btn--ghost:hover{border-color:var(--on-navy);background:rgba(234,238,243,.06)}

.btn--ink{background:var(--navy-800);color:var(--on-navy);border-color:var(--navy-800)}
.btn--ink:hover{background:var(--navy-700);border-color:var(--navy-700)}

.btn--outline{background:transparent;color:var(--ink-900);border-color:var(--hair-light-2)}
.btn--outline:hover{border-color:var(--ink-900);background:rgba(20,28,38,.04)}

.btn--amber-line{background:transparent;color:var(--amber-500);border-color:rgba(229,163,60,.55)}
.btn--amber-line:hover{background:rgba(229,163,60,.1);border-color:var(--amber-500)}

.btn-row{display:flex;flex-wrap:wrap;gap:.875rem;align-items:center}

/* Textlink mit Pfeil */
.arrow-link{
  display:inline-flex;align-items:center;gap:.625rem;
  font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg);padding-block:.25rem;
  border-bottom:1px solid transparent;transition:border-color var(--t) var(--out),color var(--t) var(--out);
}
.arrow-link svg{transition:transform .42s var(--out)}
.arrow-link:hover{border-bottom-color:currentColor}
.arrow-link:hover svg{transform:translateX(5px)}
.arrow-link--amber{color:var(--amber-500)}
.section--cream .arrow-link--amber,.section--paper .arrow-link--amber,.section--sand .arrow-link--amber{color:var(--bronze-ink)}

/* Skip-Link */
.skip{
  position:absolute;left:var(--gut);top:-100px;z-index:200;
  background:var(--amber-500);color:var(--navy-950);
  padding:.75rem 1.25rem;font-size:var(--fs-sm);font-weight:500;
  transition:top .3s var(--out);
}
.skip:focus{top:1rem}

/* ---------- 07 · HEADER ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:80;
  border-bottom:1px solid transparent;
  transition:background-color .5s var(--out),border-color .5s var(--out),
             transform .45s var(--out);
}
.hdr__in{display:flex;align-items:center;gap:2rem;height:var(--header-h)}
.hdr.is-solid{
  background:rgba(11,22,38,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  backdrop-filter:saturate(1.4) blur(16px);
  border-bottom-color:var(--hair-dark);
}
.hdr.is-hidden{transform:translateY(-100%)}

.brand{display:flex;flex-direction:column;gap:.1875rem;line-height:1;white-space:nowrap}
.brand__n{
  font-family:var(--serif);font-size:1.3125rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy);
}
/* „Der Vertrauenscoach“ war mit 9 px und weiter Sperrung kaum zu lesen —
   jetzt etwa so breit wie der Name darueber. */
.brand__k{
  font-family:var(--sans);font-size:.8125rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber-500);
}

.nav{display:flex;align-items:center;gap:2rem;margin-inline:auto}
.nav a{
  position:relative;font-size:var(--fs-label);font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy);
  opacity:.78;padding-block:.5rem;transition:opacity var(--t) var(--out);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:.1875rem;height:1px;
  background:var(--amber-500);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--out);
}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.hdr__cta{display:inline-flex}
.hdr .btn{min-height:44px;padding:.6875rem 1.25rem;font-size:var(--fs-label)}

/* Burger */
.burger{
  display:none;width:44px;height:44px;margin-left:auto;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.burger span{display:block;width:22px;height:1.5px;background:var(--on-navy);transition:transform .4s var(--out),opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile Drawer */
.drawer{
  position:fixed;inset:0;z-index:79;background:var(--navy-900);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--header-h) var(--gut) 2rem;
  opacity:0;visibility:hidden;transition:opacity .45s var(--out),visibility .45s;
}
.drawer.is-open{opacity:1;visibility:visible}
.drawer__nav{display:flex;flex-direction:column;gap:.25rem;border-top:1px solid var(--hair-dark)}
.drawer__nav a{
  display:flex;align-items:baseline;gap:1rem;padding:1.125rem 0;
  border-bottom:1px solid var(--hair-dark);
  font-family:var(--serif);font-size:1.75rem;font-weight:500;color:var(--on-navy);
}
.drawer__nav a span{font-family:var(--sans);font-size:.625rem;letter-spacing:.2em;color:var(--amber-500);font-weight:500}
.drawer__foot{margin-top:2.25rem;display:flex;flex-direction:column;gap:1rem}
.drawer__foot .btn{width:100%}
.drawer__tel{font-size:var(--fs-sm);color:var(--on-navy-mute);letter-spacing:.04em}
body.is-locked{overflow:hidden}

/* ---------- 08 · HERO ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:1fr;
  overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 78% 40%,rgba(34,56,79,.55) 0%,transparent 60%),
    linear-gradient(112deg,var(--navy-950) 0%,var(--navy-900) 40%,var(--navy-800) 100%);
}
/* Full-Bleed: das 21:9-Motiv hat links bewusst Leerraum für die Headline */
.hero__media{position:absolute;inset:0;width:100%;z-index:-2;display:block}
/* Kein Filter, keine Farbueberlagerung: das Motiv ist von Haus aus dunkelblau
   und braucht keinen Abgleich auf die Palette. Vorher lag ein
   saturate/contrast-Filter darauf und darueber noch eine Navy-Flaeche im
   Blendmodus color mit 22 % — zusammen haben sie dem Gesicht den Hautton
   genommen. Uebrig bleibt allein der Verlauf, und der traegt die Lesbarkeit
   der Headline, nicht die Bildwirkung. */
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:64% 42%;
}
.hero__veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(95deg,rgba(7,14,25,.72) 0%,rgba(7,14,25,.56) 30%,rgba(11,22,38,.26) 50%,rgba(11,22,38,.06) 66%,rgba(11,22,38,0) 78%),
    linear-gradient(180deg,rgba(7,14,25,.40) 0%,transparent 22%,transparent 60%,rgba(7,14,25,.68) 100%);
}
.hero__in{position:relative;width:100%;align-self:center;padding-block:calc(var(--header-h) + 2.5rem) 2.25rem}
.hero__copy{max-width:46rem}
.hero h1{margin-bottom:0}
/* Die Zielgruppenzeile ueber der Headline ist groesser als die uebrigen
   Eyebrows: sie sagt als Erstes, fuer wen die Seite ist. */
.hero .eyebrow{font-size:clamp(.875rem,.8rem + .35vw,1.0625rem);letter-spacing:.16em;margin-bottom:1.375rem}
.hero__sub{
  margin:1.625rem 0 2.125rem;max-width:33rem;
  font-size:var(--fs-lead);line-height:1.6;color:var(--on-navy-mute);font-weight:300;
}

.hero__creds{
  margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  font-size:var(--fs-xs);letter-spacing:.08em;color:var(--on-navy-dim);
}
.hero__creds li{display:flex;align-items:center;gap:1.5rem}
.hero__creds li + li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--bronze);margin-left:-.75rem}

/* ---------- 09 · FIGUREN ---------- */
.fig{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--navy-700)}
.fig img{width:100%;height:100%;object-fit:cover}
.fig--4x5{aspect-ratio:4/5}
.fig--3x4{aspect-ratio:3/4}
.fig--4x3{aspect-ratio:4/3}
.fig--16x10{aspect-ratio:16/10}
/* Natives Format der Aufnahmen: in diesem Rahmen wird nichts beschnitten. */
.fig--16x9{aspect-ratio:16/9}

/* ---------- 10 · STICKY MOBILE CTA ---------- */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  gap:1px;background:var(--hair-dark);
  border-top:1px solid var(--hair-dark);
  transform:translateY(110%);transition:transform .5s var(--out);
  padding-bottom:env(safe-area-inset-bottom);
}
.mcta.is-on{transform:none}
.mcta a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:56px;font-size:var(--fs-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.mcta__p{background:var(--amber-500);color:var(--navy-950)}
/* .mcta a traegt flex:1 und ist spezifischer als .mcta__s allein — die
   Breitenangabe braucht deshalb dieselbe Stufe, sonst stehen beide
   Knoepfe halb und halb. Der Buchungsknopf soll der groessere sein. */
.mcta .mcta__s{background:var(--wa-500);color:var(--wa-ink);flex:0 0 40%}

/* ---------- 11b · SPLIT-ZEILEN ----------
   SplitText legt um jede Zeile eine Maske mit overflow:clip. Ihre Hoehe ist
   exakt die Zeilenhoehe — und die ist bei Ueberschriften 1.04 bis 1.1. Der
   Unterlaengenbereich von Cormorant Garamond reicht .29em unter die Grundlinie
   und damit rund .09em unter den Kasten: jedes g, j, p, q und y wurde in jeder
   gesplitteten Headline unten glatt abgeschnitten.

   Die Zeile bekommt deshalb Luft nach unten, die Maske gibt sie per negativer
   Aussenkante wieder ans Layout zurueck. Der Zeilenfall bleibt damit
   unveraendert, nur der sichtbare Ausschnitt waechst. Die Startposition der
   Animation (translateY(108%)) bezieht sich auf die eigene Hoehe der Zeile und
   deckt die zusaetzliche Luft von selbst mit ab. */
.sline{padding-bottom:.14em}
.sline-mask{margin-bottom:-.14em}

/* ---------- 12 · MOTION LAYER ---------- */
/* Scroll-Reveals laufen als CSS-Transition, ausgelöst per IntersectionObserver.
   Bewusst ohne GSAP: CSS-Transitions laufen auf dem Compositor und hängen nicht
   an requestAnimationFrame, das in Hintergrund-Tabs stillsteht. Startzustände
   greifen nur mit .js — ohne JavaScript ist sofort alles sichtbar. */
.js [data-anim="up"]{opacity:0}
.js [data-anim="fade"]{opacity:0}
.js [data-anim="reveal"] > *{clip-path:inset(0 0 101% 0)}
.js [data-anim].is-in{opacity:1}
.js [data-anim="reveal"].is-in > *{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  /* Bewegung nehmen, Rueckmeldung lassen. Ein pauschales
     transition-duration:.01ms auf allen Elementen erschlaegt auch Hover,
     Fokus und das Auf- und Zuklappen der FAQ — also genau die Signale, die
     zeigen, dass etwas passiert ist. Abgeschaltet wird deshalb nur, was sich
     bewegt: Transform, Scroll-Reveals, Parallaxe. Farb- und Deckkraftwechsel
     bleiben, verkuerzt auf 120 ms. */
  html{scroll-behavior:auto}
  .js [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
  .js [data-anim="reveal"] > *{clip-path:none!important;transition:none!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-property:opacity,color,background-color,border-color,outline-color,box-shadow!important;
    transition-duration:120ms!important;
  }
  /* Was sich verschiebt, verschiebt sich nicht mehr. */
  .hdr,.mcta,.cc,.drawer{transition:opacity 120ms!important;transform:none!important}
  .hdr.is-hidden{transform:none!important}
  .btn:hover .btn__i,.arrow-link:hover svg,.circle-link:hover i,
  .pcard:hover{transform:none!important}
}

/* ---------- 13 · RESPONSIVE ---------- */
/* Zwischen Burger-Grenze und 1240 px passt die Versalien-Navigation nicht in
   eine Zeile: sie braucht 607 px. Enger gesetzt und mit kleinerem Zwischenraum
   bleibt sie einzeilig, statt umzubrechen. */
@media (max-width:1240px){
  .hdr__in{gap:1.25rem}
  .nav{gap:1.125rem}
  .nav a{letter-spacing:.1em}
}
@media (max-width:1099px){
  :root{--header-h:70px}
  .nav,.hdr__cta{display:none}
  .burger{display:flex}
  .hero__media{width:100%;opacity:.42}
  .hero__media img{object-position:62% 22%}
  .hero__veil{
    background:
      linear-gradient(180deg,rgba(7,14,25,.72) 0%,rgba(11,22,38,.55) 30%,rgba(11,22,38,.86) 62%,var(--navy-900) 100%);
  }
  .hero__copy{max-width:38rem}
}
@media (max-width:767px){
  /* Hero stapelt: Nazim als eigenständiges Bild, nicht als Geist im Hintergrund */
  .hero{display:block;min-height:0}
  .hero__media{
    position:relative;inset:auto;width:100%;aspect-ratio:1/1;opacity:1;z-index:0;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 97%);
    mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 97%);
  }
  /* Dasselbe Motiv wie auf dem Desktop, nur anders beschnitten. Das Bild
     ist 1915 x 821, im 1:1-Kasten ist die Hoehe voll und nur waagerecht
     bleibt Spielraum — der Y-Wert waere hier wirkungslos. 86 % legt das
     sichtbare Fenster so, dass Nazim leicht rechts der Mitte steht und der
     warme Streifen am rechten Bildrand erhalten bleibt. */
  .hero__media img{object-position:86% 50%}
  .hero__media::after{opacity:.2}
  /* Verlauf nur über dem Bildkopf, damit der Header lesbar bleibt */
  .hero__veil{
    top:0;bottom:auto;height:34%;z-index:1;
    background:linear-gradient(180deg,rgba(7,14,25,.78) 0%,rgba(7,14,25,.25) 55%,rgba(7,14,25,0) 100%);
  }
  .hero__in{position:relative;z-index:2;margin-top:-3.5rem;padding-block:0 2.25rem}
  .hero__copy{max-width:none}
  .hero__sub{margin:1.25rem 0 1.75rem;max-width:none}

  .mcta{display:flex}
  .brand__n{font-size:1.0625rem;letter-spacing:.13em}
  .brand__k{font-size:.6875rem;letter-spacing:.16em}

  /* Der Primary-CTA ist der längste Text der Seite — hier muss er passen */
  .btn{width:100%;padding:.875rem 1.125rem;font-size:.6875rem;letter-spacing:.1em}
  .btn-row{gap:.75rem}
  .circle-link{width:100%}

  .hero__creds{flex-direction:column;gap:.375rem}
  .hero__creds li + li::before{display:none}
  .hero__creds li{gap:0}
}
@media (min-width:768px){
  .btn{width:auto}
}

/* ============================================================
   14 · SECTION-BAUSTEINE
   ============================================================ */

/* Section-Kopf: Eyebrow, Headline, optionaler Lead */
.s-head{max-width:52rem}
.s-head .h2{margin-bottom:0}
.s-head .lead{margin-top:1.25rem;max-width:46ch}

.s-head--center .rule{margin-inline:auto}

/* Zweispaltiges Layout, Verhältnis über --duo steuerbar */
.duo{display:grid;grid-template-columns:1fr;gap:clamp(2.25rem,1.5rem + 3.5vw,4.5rem);align-items:start}
.duo--center{align-items:center}
@media (min-width:900px){
  .duo{grid-template-columns:var(--duo,1fr 1fr)}
  .duo--sticky > :first-child{position:sticky;top:calc(var(--header-h) + 3rem)}
}

/* ---------- 02 · ZWEI WEGE ----------
   Uebernommen aus der Variante VertrauensCoach: Bildkarte statt Haarlinien-
   Spalte. Form eins zu eins, Farbe uebersetzt — Gold wird Bronze, damit die
   Sektion nicht als Fremdkoerper in einer Amber-Seite steht. */
.paths{
  display:grid;grid-template-columns:1fr;
  gap:clamp(1.5rem,1.1rem + 1.8vw,2.5rem);
  margin-top:clamp(2.5rem,1.8rem + 2.6vw,3.75rem);
}
@media (min-width:880px){.paths{grid-template-columns:1fr 1fr}}

.pcard{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--cream-50);border:1px solid var(--hair-light);
  border-radius:var(--r-card);box-shadow:var(--shadow-soft);
  transition:transform .5s var(--out),box-shadow .5s var(--out);
}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.pcard__ph{aspect-ratio:16/9;overflow:hidden;background:var(--cream-200)}
.pcard__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--out)}
.pcard:hover .pcard__ph img{transform:scale(1.04)}
.pcard__b{display:flex;flex-direction:column;flex:1;padding:clamp(1.5rem,1.2rem + 1.2vw,2.25rem)}
.pcard h3{
  font-size:clamp(1.375rem,1.15rem + 1vw,1.875rem);font-weight:500;
  line-height:1.15;margin-bottom:.875rem;color:var(--ink-900);
}
.pcard p{font-size:var(--fs-body);color:var(--ink-500);margin-bottom:1.5rem;max-width:40ch}
.pcard ul{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.75rem}
.pcard li{display:flex;align-items:baseline;gap:.75rem;font-size:var(--fs-sm);color:var(--ink-700)}
.pcard li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--bronze-ink);transform:translateY(-.15em)}
.pcard .circle-link{margin-top:auto;align-self:flex-start;color:var(--ink-900)}

/* Kreis-Link mit Icon — die zweite Signatur der Karte */
.circle-link{
  display:inline-flex;align-items:center;gap:.875rem;
  font-size:.9375rem;color:var(--fg);min-height:44px;
}
.circle-link i{
  display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--hair-dark-2);
  transition:border-color .3s,background-color .3s,transform .4s var(--out);
}
.circle-link:hover i{border-color:var(--amber-500);background:rgba(229,163,60,.16);transform:translateX(3px)}
.section--cream .circle-link i,
.section--paper .circle-link i,
.section--sand .circle-link i{border-color:var(--hair-light-2)}
.section--cream .circle-link:hover i,
.section--paper .circle-link:hover i,
.section--sand .circle-link:hover i{border-color:var(--bronze-ink)}

/* ---------- 03 · WIEDERERKENNUNG ---------- */
.recog{border-top:1px solid var(--hair)}
.recog li{
  padding:clamp(1.125rem,.9rem + .8vw,1.625rem) 0;
  border-bottom:1px solid var(--hair);
  font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);
  font-family:var(--serif);font-weight:400;line-height:1.35;
  color:var(--fg);letter-spacing:-.008em;
}

/* Pull-Quote */
.pull{
  margin:clamp(2.5rem,1.8rem + 2.6vw,4rem) 0 0;
  padding-left:clamp(1.25rem,.9rem + 1.4vw,2rem);
  border-left:2px solid var(--amber-500);
}
.pull p{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.375rem,1.15rem + 1.1vw,1.875rem);
  line-height:1.32;letter-spacing:-.012em;color:var(--fg);
  margin-bottom:1rem;
}
.pull footer{font-size:var(--fs-xs);letter-spacing:.06em;color:var(--fg-mute)}

/* ---------- 04 · WERTE ---------- */
.values{
  display:flex;flex-wrap:wrap;gap:.625rem;
  margin-top:clamp(2rem,1.6rem + 1.4vw,2.75rem);
}
.values li{
  padding:.5rem 1rem;border:1px solid var(--hair);border-radius:var(--r);
  font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-mute);
}

/* ---------- 05 · QUALIFIKATIONEN ---------- */
.quals{border-top:1px solid var(--hair);margin-top:clamp(2rem,1.6rem + 1.4vw,2.75rem)}
.quals > div{
  display:grid;grid-template-columns:1fr;gap:.25rem;
  padding:1rem 0;border-bottom:1px solid var(--hair);
}
.quals dt,.quals b{
  font-family:var(--sans);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--eyebrow-c);
}
.quals dd,.quals span{margin:0;font-size:var(--fs-body);color:var(--fg)}
@media (min-width:640px){
  .quals > div{grid-template-columns:9rem 1fr;gap:1.5rem;align-items:baseline}
}

/* ============================================================
   15 · LEISTUNGEN
   ============================================================ */
.cards{
  display:grid;grid-template-columns:1fr;
  gap:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);
  margin-top:clamp(2.5rem,1.8rem + 2.6vw,4rem);
}
@media (min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}

/* Die Leistungskarten sind .pcard — dieselbe Karte wie in „Zwei Wege".
   Es gab hier frueher eine zweite, flachere Kartenform (.card): duenner
   Rahmen statt Schatten, 16/10 statt 16/9, kleinere Innenraender. Zwei
   Kartenformen auf einer Seite lesen sich als Versehen, nicht als System.
   Der einzige Unterschied ist jetzt die Spaltenzahl des Rasters. */

/* Weitere Themen auf der Startseite: kleine Karten nach dem Vorbild von .pcard
   (Grund, Rahmen, Schatten, Anheben), ohne Bild und mit kleinerer Typografie.
   Rechts daneben das Video, auf schmalen Schirmen darunter. */
.more{
  display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);
  margin-top:clamp(2rem,1.6rem + 1.4vw,3rem);align-items:start;
}
@media (min-width:1024px){.more{grid-template-columns:1.05fr .95fr}}
.more__cards{display:grid;grid-template-columns:1fr;gap:clamp(.875rem,.7rem + .6vw,1.25rem)}
@media (min-width:560px){.more__cards{grid-template-columns:1fr 1fr}}
.mcard{
  display:flex;flex-direction:column;padding:clamp(1.125rem,.95rem + .6vw,1.5rem);
  background:var(--cream-50);border:1px solid var(--hair-light);
  border-radius:var(--r-card);box-shadow:var(--shadow-soft);
  transition:transform var(--t-ui) var(--out),box-shadow var(--t-ui) var(--out);
}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.mcard h3{font-size:var(--fs-h3);font-weight:500;line-height:1.2;margin-bottom:.5rem;color:var(--ink-900)}
.mcard p{font-size:var(--fs-sm);color:var(--ink-500);margin:0 0 1rem}
.mcard__mehr{
  margin-top:auto;display:inline-flex;align-items:center;gap:.625rem;
  font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-ink);
}
.mcard__mehr svg{transition:transform var(--t-hover) var(--out)}
.mcard:hover .mcard__mehr svg{transform:translateX(3px)}
@media (hover:none){.mcard:hover{transform:none;box-shadow:var(--shadow-soft)}}

.more__video{margin:0}
/* 16:9 wie der Player. Der Platzhalter darf hoeher werden, wenn sein Text auf
   dem Handy nicht in 16:9 passt — deshalb kein overflow:hidden, solange er
   noch Platzhalter ist (sonst wuerde aspect-ratio den Inhalt abschneiden). */
.video{aspect-ratio:16/9;padding:1.25rem 1.5rem;border-radius:var(--r-card)}
/* .embed-gate bringt min-height:20rem mit. Bei 16:9 wird daraus eine
   Mindestbreite von 569 px — auf dem Handy lief die Seite 214 px zu breit.
   auto heisst hier: so hoch wie der Inhalt, mindestens 16:9. */
.video.embed-gate{min-height:auto}
.video:not(.embed-gate){padding:0;overflow:hidden;background:var(--navy-900)}
.video__play{color:var(--amber-500)}
.video .video__klein{font-size:var(--fs-xs)}
.video__klein a{border-bottom:1px solid currentColor}
.more__video figcaption{margin-top:.875rem;font-size:var(--fs-sm);color:var(--fg-mute)}
.more__video figcaption b{font-weight:500;color:var(--fg)}

/* Sekundäre Leistungen: rein typografisch, ohne Bild */
.minor{
  display:grid;grid-template-columns:1fr;
  margin-top:clamp(2rem,1.6rem + 1.4vw,3rem);
  border-top:1px solid var(--hair);
}
.minor > div{padding:clamp(1.5rem,1.2rem + 1vw,2rem) 0;border-bottom:1px solid var(--hair)}
.minor h3{font-size:var(--fs-h4);margin-bottom:.5rem}
.minor p{font-size:var(--fs-sm);color:var(--fg-mute);max-width:38ch;margin:0}
@media (min-width:820px){
  .minor{grid-template-columns:repeat(3,1fr);column-gap:clamp(1.5rem,1rem + 2vw,3rem)}
  .minor{column-gap:0}
  .minor > div{padding-right:clamp(1.5rem,1rem + 2vw,3rem)}
  .minor > div + div{padding-left:clamp(1.5rem,1rem + 2vw,3rem);border-left:1px solid var(--hair)}
}

/* ============================================================
   16 · PROZESS
   ============================================================ */
.steps{margin-top:clamp(2.5rem,1.8rem + 2.6vw,4rem)}
.steps__track{position:relative;height:1px;background:var(--hair);margin-bottom:2.5rem;display:none}
.steps__fill{
  position:absolute;inset:0;background:var(--amber-500);
  transform:scaleX(0);transform-origin:left center;
}
.steps__grid{display:grid;grid-template-columns:1fr;gap:0}
.step{
  padding:clamp(1.5rem,1.2rem + 1.2vw,2rem) 0;
  border-top:1px solid var(--hair);
}
.step:last-child{border-bottom:1px solid var(--hair)}
.step .index{display:block;margin-bottom:.875rem}
.step h3{font-size:var(--fs-h3);margin-bottom:.625rem}
.step p{font-size:var(--fs-sm);line-height:1.68;color:var(--fg-mute);max-width:34ch;margin:0}
@media (min-width:820px){
  .steps__track{display:block}
  .steps__grid{grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,1rem + 2vw,2.75rem)}
  .step{padding:0;border:0}
  .step:last-child{border-bottom:0}
}

.disclaimer{
  margin-top:clamp(2rem,1.6rem + 1.4vw,2.75rem);
  padding-top:1.5rem;border-top:1px solid var(--hair);
  font-size:var(--fs-xs);color:var(--fg-mute);max-width:70ch;
}

/* ============================================================
   18 · UNTERNEHMEN
   ============================================================ */
.biz{
  display:grid;grid-template-columns:1fr;
  margin-top:clamp(2rem,1.6rem + 1.4vw,2.75rem);
  border-top:1px solid var(--hair);
}
.biz > div{padding:1.25rem 0;border-bottom:1px solid var(--hair)}
.biz h3{font-size:var(--fs-h4);margin-bottom:.375rem}
.biz p{font-size:var(--fs-sm);color:var(--fg-mute);margin:0;max-width:46ch}
@media (min-width:640px){
  .biz{grid-template-columns:repeat(2,1fr);column-gap:clamp(1.5rem,1rem + 2vw,2.5rem)}
}

/* ============================================================
   19 · FAQ  (natives <details>, kein JavaScript nötig)
   ============================================================ */
.faq{border-top:1px solid var(--hair);margin-top:clamp(2rem,1.6rem + 1.4vw,3rem)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  display:flex;align-items:flex-start;gap:1.25rem;
  padding:clamp(1.125rem,.95rem + .7vw,1.5rem) 0;
  cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(1.0625rem,1rem + .5vw,1.3125rem);
  line-height:1.35;font-weight:500;color:var(--fg);letter-spacing:-.008em;
  transition:color var(--t) var(--out);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--bronze-ink)}
.faq summary::after{
  content:"";flex:0 0 auto;margin-left:auto;margin-top:.45em;
  width:11px;height:11px;
  border-right:1.5px solid var(--amber-600);border-bottom:1.5px solid var(--amber-600);
  transform:rotate(45deg);transition:transform .35s var(--out);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq__a{padding:0 3rem 1.5rem 0;max-width:64ch}
.faq__a p{font-size:var(--fs-body);line-height:1.72;color:var(--fg-mute);margin:0}

/* ============================================================
   20 · KONTAKT + FORMULAR
   ============================================================ */
.contact{--duo:1fr 1fr}
.contact__aside{display:flex;flex-direction:column;gap:2rem}
.contact__direct{border-top:1px solid var(--hair);padding-top:1.5rem}
.contact__direct dt{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--eyebrow-c);margin-bottom:.375rem;
}
.contact__direct dd{margin:0 0 1.25rem;font-size:var(--fs-lead)}
.contact__direct dd:last-child{margin-bottom:0}
.contact__direct a{border-bottom:1px solid var(--hair-dark-2);transition:border-color var(--t)}
.contact__direct a:hover{border-bottom-color:var(--amber-500)}

.form{display:flex;flex-direction:column;gap:1.125rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute);
}
.field label span{text-transform:none;letter-spacing:.02em;opacity:.7}
.field input,.field textarea{
  width:100%;padding:.875rem 1rem;
  background:rgba(234,238,243,.05);color:var(--fg);
  border:1px solid var(--hair-dark-2);border-radius:var(--r);
  /* max(16px, …): Safari auf dem iPhone zoomt beim Antippen in jedes Feld
     mit weniger als 16 px Schrift und bleibt danach vergroessert stehen.
     --fs-body liegt auf Telefonen bei 15 px, genau darunter. */
  font-size:max(16px, var(--fs-body));font-weight:300;
  transition:border-color var(--t) var(--out),background-color var(--t) var(--out);
}
.field input::placeholder,.field textarea::placeholder{color:var(--on-navy-dim)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--amber-500);background:rgba(234,238,243,.08);
}
.field textarea{resize:vertical;min-height:8rem;line-height:1.6}
@media (min-width:560px){.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.125rem}}

.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--fs-xs);line-height:1.6;color:var(--fg-mute)}
.consent input{flex:0 0 auto;width:1.125rem;height:1.125rem;margin-top:.2rem;accent-color:var(--amber-500)}
.consent a{border-bottom:1px solid currentColor}

/* Rueckmeldung nach dem Absenden. Leer ist sie auch raumlos — eine
   dauerhaft reservierte Zeile ueber dem Hinweis waere ein Loch im Satz. */
.form__status:empty{display:none}
.form__status{
  font-size:var(--fs-sm);line-height:1.6;
  padding:.75rem 1rem;border-radius:var(--r);
  border-left:2px solid currentColor;
}
.form__status--ok{color:var(--amber-400);background:rgba(229,163,60,.1)}
.form__status--fehler{color:#FFB4A8;background:rgba(255,120,100,.1)}
.section--cream .form__status--ok,
.section--paper .form__status--ok,
.section--sand .form__status--ok{color:var(--bronze-ink);background:rgba(184,130,63,.12)}
.section--cream .form__status--fehler,
.section--paper .form__status--fehler,
.section--sand .form__status--fehler{color:#9B2C1E;background:rgba(155,44,30,.08)}

/* Honigtopf. Nicht display:none und nicht visibility:hidden — beides
   ueberspringen manche Bots gezielt, weil es die uebliche Falle ist.
   Aus dem Sichtfeld geschoben wirkt wie ein normales Feld. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   21 · FOOTER
   ============================================================ */
.ft{background:var(--navy-950);color:var(--on-navy-mute);padding-block:clamp(3.5rem,2.5rem + 4vw,5.5rem) 0;font-size:var(--fs-sm)}
.ft a{transition:color var(--t) var(--out)}
.ft a:hover{color:var(--on-navy)}
.ft__grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,1.5rem + 2.5vw,3.5rem);
  padding-bottom:clamp(2.5rem,2rem + 2vw,3.5rem);
}
@media (min-width:760px){.ft__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ft__brand .brand{margin-bottom:1.5rem}
.ft__adr{font-style:normal;line-height:1.85}
.ft h3{
  font-family:var(--sans);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-navy);margin-bottom:1.125rem;
}
.ft__list{display:flex;flex-direction:column;gap:.625rem}
.ft__bottom{
  border-top:1px solid var(--hair-dark);
  padding-block:1.5rem clamp(1.5rem,1.2rem + 1vw,2.25rem);
  display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;align-items:center;
  font-size:var(--fs-xs);
}
.ft__bottom nav{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin-left:auto}
.ft__disclaimer{
  padding-bottom:clamp(1.5rem,1.2rem + 1vw,2.25rem);
  font-size:var(--fs-xs);line-height:1.6;color:var(--on-navy-dim);max-width:76ch;
}
@media (max-width:767px){.ft{padding-bottom:64px}}

/* ============================================================
   22 · COOKIE-BANNER
   ============================================================ */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--navy-950);border-top:1px solid var(--hair-dark-2);
  transform:translateY(101%);transition:transform .5s var(--out);
  padding-bottom:env(safe-area-inset-bottom);
}
.cc.is-on{transform:none}

/* Zwei Ebenen, die sich gegenseitig verdecken.
   Der Einwilligungsbanner liegt auf z-index 90, das Menue auf 79 — beim
   ersten Besuch schob sich der Banner also ueber das geoeffnete Menue und
   verdeckte genau die beiden Schaltflaechen darin (Kennenlerngespraech
   und WhatsApp). Sichtbar wurde das nur mit leerem Speicher, deshalb ist
   es lange durchgerutscht.

   Aufgeloest wird es nach Rangfolge, nicht nach z-index: wer das Menue
   oeffnet, will navigieren. Der Banner tritt so lange zurueck und kommt
   von selbst wieder, sobald das Menue zu ist — die Entscheidung bleibt
   also weiter faellig, sie wird nur nicht mitten in die Navigation
   hineingelegt. */
body.is-locked .cc{transform:translateY(101%);pointer-events:none}
.cc__in{padding-block:clamp(1.25rem,1rem + 1vw,1.75rem)}
.cc__t{font-family:var(--serif);font-size:1.3125rem;font-weight:500;margin:0 0 .5rem;color:var(--on-navy)}
.cc__p{font-size:var(--fs-sm);line-height:1.65;color:var(--on-navy-mute);margin:0;max-width:68ch}
.cc__p a{border-bottom:1px solid var(--hair-dark-2)}
.cc__p a:hover{border-bottom-color:var(--amber-500)}
.cc__row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.25rem}
/* Beide Entscheidungen gleichwertig gestaltet — kein Dark Pattern */
.cc__row .btn{min-height:46px;padding:.75rem 1.375rem;font-size:var(--fs-label)}
.cc__more{
  margin-left:auto;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-navy-mute);border-bottom:1px solid transparent;padding-block:.5rem;
}
.cc__more:hover{color:var(--on-navy);border-bottom-color:currentColor}

.cc__detail{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--hair-dark)}
.cc__detail[hidden]{display:none}
.cc__cat{
  display:flex;gap:.875rem;align-items:flex-start;
  padding:1rem 0;border-bottom:1px solid var(--hair-dark);
}
.cc__cat:last-child{border-bottom:0}
.cc__cat input{flex:0 0 auto;width:1.125rem;height:1.125rem;margin-top:.25rem;accent-color:var(--amber-500)}
.cc__cat b{display:block;font-family:var(--sans);font-size:var(--fs-sm);font-weight:500;color:var(--on-navy)}
.cc__cat span{display:block;font-size:var(--fs-xs);line-height:1.6;color:var(--on-navy-mute);margin-top:.25rem}

@media (max-width:767px){
  .cc__row{flex-direction:column;align-items:stretch}
  .cc__row .btn{width:100%}
  .cc__more{margin-left:0;text-align:center}
  /* Banner verdeckt die Sticky-CTA-Leiste, solange er offen ist */
  body.cc-open .mcta{display:none}
}

/* Zwei-Klick-Platzhalter für eingebettete Karten */
.embed-gate{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  min-height:20rem;padding:2rem;text-align:center;
  background:var(--navy-800);border:1px solid var(--hair-dark);border-radius:var(--r-md);
}
.embed-gate p{font-size:var(--fs-sm);color:var(--on-navy-mute);max-width:44ch;margin:0}

/* ---------- TrustLocal-Bewertungssiegel ----------
   Bis zur Einwilligung ein Knopf und ein Profil-Link, ohne jede Verbindung zu
   TrustLocal; danach das Widget selbst. Das Widget ist fest 291 px breit.
   Auf 320-px-Telefonen bleiben 280 px Inhaltsbreite — zoom verkleinert es als
   Ganzes, statt in fremdem Markup herumzubauen. */
.siegel{margin-top:1.75rem}
.siegel__platzhalter{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
.siegel__profil{font-size:var(--fs-sm);color:var(--fg-mute);border-bottom:1px solid currentColor}
.siegel__hinweis{margin:.875rem 0 0;max-width:52ch;font-size:var(--fs-xs);line-height:1.6;color:var(--fg-mute)}
.siegel__hinweis button{display:inline;padding:0;font:inherit;letter-spacing:inherit;color:inherit;border-bottom:1px solid currentColor}
@media (max-width:339px){.siegel .trustlocal-widget{zoom:.9}}

/* Hero: Siegel und Google-Wert in einer Reihe, auf dem Handy untereinander.
   Der Google-Wert ist dem TrustLocal-Widget nachempfunden (weisse Karte,
   Schatten, 95 px hoch), damit beide als Paar lesen. */
.bewertungen{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem 1.25rem;margin-top:1.75rem}
.bewertungen .siegel{margin-top:0}
.gwert{
  display:inline-flex;align-items:center;gap:.75rem;min-height:95px;padding:.75rem 1.125rem;
  background:#fff;color:var(--ink-900);border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,.28);
  transition:transform var(--t-ui) var(--out),box-shadow var(--t-ui) var(--out);
}
.gwert:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.34)}
.gwert__g{flex:0 0 auto}
.gwert__zahl{font-family:var(--serif);font-size:2.5rem;font-weight:500;line-height:1;margin-left:.25rem}
.gwert__rest{display:flex;flex-direction:column;gap:.3125rem}
.gwert .stars{color:var(--amber-500)}
.gwert__text{font-size:var(--fs-sm);font-weight:500;line-height:1.2}
.gwert__stand{font-size:.6875rem;color:var(--ink-500);line-height:1.2}
@media (hover:none){.gwert:hover{transform:none;box-shadow:0 2px 14px rgba(0,0,0,.28)}}

/* ============================================================
   23 · GOOGLE-REZENSIONEN — SLIDER

   Fuenf Rezensionen nebeneinander sind eine Wand; nacheinander
   bekommt jede ihren Auftritt. Die Texte bleiben ungekuerzt —
   kein "mehr lesen", kein Beschnitt, das war die Vorgabe.

   Traeger der Bewegung ist natives Scroll-Snapping. Damit gehoert
   sie dem Finger und dem Trackpad, laesst sich mitten im Lauf
   umkehren und braucht keine Interpolation von uns — genau das,
   was ein selbst gebautes Karussell aus Keyframes nicht kann.
   Die Bedienelemente setzt site.js nach. Ohne JavaScript bleibt
   ein normaler Scrollstreifen mit sichtbarer Systemleiste.
   ============================================================ */
.reviews{
  /* Breite und Abstand einer Folie stehen als Variablen, weil der
     Nachlauf unten damit rechnen muss. */
  --folie:min(86%,34rem);
  --folie-luft:clamp(1rem,.8rem + 1vw,1.5rem);
  display:flex;
  gap:var(--folie-luft);
  margin-top:clamp(2.5rem,1.8rem + 2.6vw,4rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  padding-block:.25rem;
}
/* Der Streifen ist per tabindex fokussierbar, weil er scrollbar ist und
   sonst mit der Tastatur nicht erreichbar waere (WCAG 2.1.1). */
.reviews:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
/* Eigene Leiste erst, wenn die Schaltflaechen wirklich stehen. */
.reviews.is-slider{scrollbar-width:none}
.reviews.is-slider::-webkit-scrollbar{display:none}

.review{
  flex:0 0 var(--folie);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  margin:0;
  padding:clamp(1.375rem,1.1rem + 1.1vw,1.875rem);
  border:1px solid var(--hair);border-radius:var(--r-md);
  background:rgba(234,238,243,.025);
}
.review footer{margin-top:auto}

/* Nachlauf hinter der letzten Folie: so breit wie der Rest des Streifens
   neben ihr. Erst damit reicht der Scrollweg, dass auch die letzte Karte
   an den linken Rand schnappt. Vorher teilten sich die letzten drei eine
   Endposition — „Zurück“ vom Ende bewegte nichts und die letzten Punkte
   waren nicht anspringbar. */
.reviews::after{content:"";flex:0 0 max(0px,calc(100% - var(--folie) - var(--folie-luft)))}

/* ---------- Bedienleiste ---------- */
.slider-nav{
  display:flex;align-items:center;gap:1.25rem;
  margin-top:clamp(1.25rem,1rem + .8vw,1.75rem);
  /* Mit dem Anhalten-Knopf sind es drei Schaltflaechen zu 44 px. Auf 375 px
     lief der Vorwaerts-Pfeil damit aus dem Bild. Die Punkte duerfen
     schrumpfen und notfalls umbrechen, die Knoepfe nie — sie sind der
     Griff, die Punkte sind Anzeige. */
  flex-wrap:wrap;row-gap:.75rem;
}
.slider-nav__dots{
  display:flex;align-items:center;gap:.5rem;margin-right:auto;
  flex-wrap:wrap;min-width:0;
}
.slider-nav__arrows{flex:0 0 auto}
.slider-nav__dot{
  width:28px;height:28px;padding:0;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;
}
/* Der Punkt ist die Marke, die Flaeche drumherum nur Trefferzone (44 px
   sind hier nicht zu holen, ohne dass die Punkte auseinanderfallen — 28 px
   plus Abstand bleibt die vertretbare Naeherung fuer eine reine Sprungmarke). */
.slider-nav__dot::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--fg-mute);opacity:.45;
  transition:opacity var(--t-hover) var(--out),transform var(--t-ui) var(--out),background-color var(--t-hover) var(--out);
}
.slider-nav__dot[aria-current="true"]::before{
  background:var(--amber-500);opacity:1;transform:scale(1.3);
}
.slider-nav__arrows{display:flex;gap:.5rem}
.slider-nav__btn{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--hair);border-radius:50%;
  color:var(--fg);background:transparent;cursor:pointer;
  transition:border-color var(--t-hover) var(--out),background-color var(--t-hover) var(--out),opacity var(--t-hover) var(--out);
}
.slider-nav__btn:disabled{opacity:.32;cursor:default}
/* Der Anhalten-Knopf steht etwas abgesetzt von den beiden Pfeilen: er
   gehoert zu einer anderen Gattung — er steuert nicht die Richtung,
   sondern ob ueberhaupt etwas passiert. Das Play-Dreieck wirkt optisch
   nach links versetzt, weil es keine linke Kante hat; ein Hauch Versatz
   holt es zurueck in die Mitte. */
.slider-nav__btn--pause{margin-right:.375rem}
.slider-nav__btn--pause svg{margin-left:1px}
.slider-nav__btn--pause[aria-pressed="true"] svg{margin-left:2px}
@media (hover:hover) and (pointer:fine){
  .slider-nav__btn:not(:disabled):hover{border-color:var(--amber-500);background:rgba(229,163,60,.1)}
  .slider-nav__dot:not([aria-current="true"]):hover::before{opacity:.8}
}
/* Der Druck schnappt, das Zurueckfedern laeuft nach. */
.slider-nav__btn:not(:disabled):active{transform:scale(.94);transition-duration:var(--t-press)}

@media (prefers-reduced-motion:reduce){
  .reviews{scroll-behavior:auto}
  .slider-nav__dot[aria-current="true"]::before{transform:none}
  .slider-nav__btn:active{transform:none}
}
.review__top{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.stars{display:flex;gap:.1875rem;color:var(--amber-500)}
.stars svg{width:14px;height:14px;fill:currentColor}
.review__src{
  margin-left:auto;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);
}
.review p{
  font-size:var(--fs-sm);line-height:1.72;color:var(--fg);margin:0 0 1.125rem;
  font-weight:300;
}
.review footer{font-size:var(--fs-xs);line-height:1.5}
.review footer b{
  display:block;font-family:var(--sans);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--fg);
}
.review footer span{color:var(--fg-mute)}

/* Ältere, dokumentierte Rückmeldungen (kompakter) */
.notes{border-top:1px solid var(--hair);margin-top:clamp(2rem,1.6rem + 1.4vw,3rem)}
.notes figure{
  margin:0;padding:clamp(1.125rem,.95rem + .7vw,1.5rem) 0;
  border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:1fr;gap:.625rem;
}
.notes p{
  font-family:var(--serif);font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);
  line-height:1.42;font-weight:400;color:var(--fg);margin:0;letter-spacing:-.006em;
}
.notes figcaption{font-size:var(--fs-xs);color:var(--fg-mute);letter-spacing:.04em}
@media (min-width:820px){
  .notes figure{grid-template-columns:1fr 14rem;gap:2.5rem;align-items:baseline}
  .notes figcaption{text-align:right}
}

/* ============================================================
   24 · RECHTSTEXTE
   ============================================================ */
.legal h2{
  font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);
  margin:clamp(2.25rem,1.8rem + 1.6vw,3rem) 0 .875rem;
  padding-top:clamp(1.5rem,1.2rem + 1vw,2rem);
  border-top:1px solid var(--hair);
}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:var(--fs-h4);margin:1.75rem 0 .5rem}
.legal p{font-size:var(--fs-body);line-height:1.78;color:var(--ink-700);max-width:70ch;margin-bottom:1rem}
.legal ul{margin:0 0 1.25rem;padding-left:1.25rem;list-style:disc}
.legal li{
  font-size:var(--fs-body);line-height:1.78;color:var(--ink-700);
  margin-bottom:.5rem;max-width:68ch;
}
.legal a{color:var(--ink-900);border-bottom:1px solid var(--hair-light-2);transition:border-color var(--t)}
.legal a:hover{border-bottom-color:var(--bronze-ink)}
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--cream-200);padding:.1em .4em;border-radius:2px;
}
.legal strong{font-weight:500;color:var(--ink-900)}

/* Hervorgehobener Kasten */
.legal__box{
  padding:clamp(1.375rem,1.1rem + 1.1vw,2rem);
  background:var(--cream-50);border:1px solid var(--hair);border-radius:var(--r-md);
  margin-block:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);
}
.legal__box h2,.legal__box h3{border-top:0;padding-top:0;margin-top:0}
.legal__box ul{margin-bottom:0}
.legal__box p:last-child{margin-bottom:0}

/* Offener Punkt, der vor dem Livegang gefüllt werden muss */
.legal .todo{
  padding:1rem 1.125rem;border-left:2px solid var(--amber-500);
  background:rgba(229,163,60,.08);font-size:var(--fs-sm);color:var(--ink-700);
}

/* ============================================================
   25 · VOLLBREITE BILDBÄNDER
   Ruhepunkte zwischen den Textsections. Randlos, ohne Rahmen.
   ============================================================ */
.band{position:relative;display:block;width:100%;overflow:hidden;background:var(--navy-800)}
.band img{width:100%;height:100%;object-fit:cover;display:block}
.band--wide{aspect-ratio:21/9}
.band--cinema{aspect-ratio:2.6/1}
.band--calm{aspect-ratio:16/7}
@media (max-width:767px){
  .band--wide,.band--cinema{aspect-ratio:4/3}
  .band--calm{aspect-ratio:3/2}
}

/* Band mit Textauflage */
.band--overlay::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,14,25,.86) 0%,rgba(11,22,38,.6) 38%,rgba(11,22,38,.12) 62%,transparent 82%);
}
.band__copy{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;
}
.band__copy .shell{width:100%}
/* .h2 sitzt hier auf einem <p> — die Zeilenhoehe kommt deshalb aus dem
   Fliesstext (1.72) statt aus der Ueberschriften-Regel. Bei 32 px sind das
   55 px Zeilenabstand: die drei Zeilen zerfielen in drei einzelne Saetze.
   Die Regel fuer h1–h4 kann das nicht heilen, sie greift am Element. */
.band__copy .h2{max-width:22ch;line-height:var(--lh-head)}
@media (max-width:767px){
  .band--overlay::after{
    background:linear-gradient(180deg,rgba(7,14,25,.5) 0%,rgba(11,22,38,.75) 55%,rgba(7,14,25,.92) 100%);
  }
  .band__copy{align-items:flex-end;padding-bottom:2rem}
}

/* ============================================================
   26 · TOUCH-ZIELE
   Auf Mobilgeräten mindestens 44 px Trefferfläche. Die sichtbare
   Typografie bleibt unverändert, nur die Klickfläche wächst.
   Inline-Links im Fließtext sind davon ausgenommen (WCAG 2.5.8).
   ============================================================ */
@media (max-width:819px){
  .brand{min-height:44px;justify-content:center}

  .ft__list a,
  .ft__bottom nav a,
  .ft__bottom nav button{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .ft__list{gap:0}

  .ft__adr a,
  .drawer__tel a,
  .contact__direct dd a{
    display:inline-flex;align-items:center;min-height:44px;
  }

  .consent input[type="checkbox"]{width:1.5rem;height:1.5rem;margin-top:.0625rem}
  .cc__cat input[type="checkbox"]{width:1.5rem;height:1.5rem}

  .arrow-link{min-height:44px}
  .cc__more{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
/* Der Einstellungen-Button im Karten-Platzhalter steht mitten im Satz und
   verhält sich wie ein Textlink — damit gilt die Inline-Ausnahme. */
.embed-gate p button{display:inline;padding:0;font:inherit}

/* ============================================================
   DRUCK
   Impressum und Datenschutzerklaerung werden ausgedruckt und
   abgeheftet. Ohne diese Regeln kaeme das Navy-Kopfband, die
   Sticky-Leiste und der Banner mit aufs Papier.
   ============================================================ */
@media print{
  .hdr,.drawer,.mcta,.cc,.ft__grid,.band,.skip{display:none!important}

  .section{padding-block:0;background:#fff!important;color:#000!important}
  .section--deep,.section--navy{--fg:#000;--fg-mute:#333}
  .shell,.shell--narrow{max-width:none;padding-inline:0}
  .legal h2{page-break-after:avoid;break-after:avoid}
  .legal p,.legal li{page-break-inside:avoid;break-inside:avoid;color:#000}
  .legal a{color:#000;text-decoration:underline;border:0}
  /* Zieladresse ausschreiben, auf Papier ist ein Link sonst wertlos */
  .legal a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
  .ft{background:#fff;color:#000;padding-block:1rem 0}
  .ft__bottom{border-top:1px solid #999}
  .legal .todo{border-left:2px solid #000;background:transparent}
}

/* ============================================================
   MOTION — Korrekturen und Ergänzungen

   Die Kurven bleiben die des Projekts: --out ist mit
   cubic-bezier(.16,1,.3,1) ein kräftiges Ease-out und damit
   schon die richtige Wahl für Ein- und Austritte. Neu sind
   nur die fehlenden Zeitstufen; ein zweites Kurvensystem
   daneben wäre ein Fehler.

   --inout wird ausdrücklich NICHT mehr für Eintritte benutzt:
   es beginnt langsam und verzögert genau die Frames, auf die
   der Blick fällt. Es bleibt für Bewegung auf dem Schirm.
   ============================================================ */
:root{
  --t-press:100ms;   /* Druck: schnappt */
  --t-hover:150ms;   /* Hover und Fokus: muss innerhalb der Verweildauer landen */
  --t-ui:220ms;      /* Karten, Panels, Marker */
  --t-enter:600ms;   /* Scroll-Reveals: ruhig, aber ohne Nachlauf */
  --stagger:60ms;    /* Gruppenversatz */
}

/* ---------- Hover und Fokus: 400–450 ms waren zu träge ---------- */
.nav a{transition:opacity var(--t-hover) var(--out)}
.nav a::after{transition:transform var(--t-hover) var(--out)}
.ft a{transition:color var(--t-hover) var(--out)}
.btn__i{transition:transform var(--t-hover) var(--out)}
.arrow-link{transition:border-color var(--t-hover) var(--out),color var(--t-hover) var(--out)}
.arrow-link svg{transition:transform var(--t-hover) var(--out)}
.contact__direct a,.legal a{transition:border-color var(--t-hover) var(--out)}

/* Druck asymmetrisch: der Druck schnappt, das Zurückfedern läuft nach */
.btn{transition:background-color var(--t-ui),color var(--t-ui),border-color var(--t-ui),transform 200ms var(--out)}
.btn:active{transition-duration:var(--t-press)}

/* ---------- Karten: Schatten-Transition raus ----------
   box-shadow mit 60–70 px Blur malt die Karte jeden Frame neu,
   statt sie zu compositen. Der Schatten wechselt jetzt hart,
   die Hierarchie tragen ohnehin Versatz und Bildzoom. */

/* Reveal und Hover teilen sich nicht mehr eine Eigenschaft.
   Karten sind beides zugleich: Eintritts- und Hover-Ziel. Solange beide
   Bewegungen auf transform liefen, musste EINE Dauer beides tragen — der
   Kompromiss lag bei 260 ms und machte den 600-ms-Eintritt hektisch, weil
   der Versatz 340 ms vor der Deckkraft ankam. Der Eintritt schiebt jetzt
   mit der Einzel-Eigenschaft translate, der Lift behaelt transform. Beide
   laufen auf dem Compositor und komponieren (translate vor transform),
   haben aber getrennte Dauern. Damit ist der Gruppen-Override ueberfluessig. */

/* Ein Element hat genau EINE transition-Liste.
   Karten und Pfade sind gleichzeitig Eintritts- und Hover-Ziel. Die Regel
   mit der hoeheren Spezifitaet gewinnt dabei die ganze Liste, nicht einzelne
   Eigenschaften daraus: .js [data-anim="up"] (0,2,0) schlaegt
   .pcard (0,1,0) vollstaendig. Vorher fiel damit der Schatten der Karten
   ohne Uebergang um — sichtbar als Sprung.
   Beide Rollen stehen deshalb hier zusammen in einer Liste, jede mit ihrer
   eigenen Dauer. Die Basisregeln darueber bleiben: sie tragen den Fall
   ohne JavaScript, in dem .js fehlt und diese Regel nicht greift. */
.js .pcard[data-anim]{
  transition:opacity var(--t-enter) var(--out) var(--delay,0ms),
             translate var(--t-enter) var(--out) var(--delay,0ms),
             transform var(--t-ui) var(--out),
             box-shadow var(--t-ui) var(--out),
             border-color var(--t-hover) var(--out),
             background-color var(--t-hover) var(--out);
}
.faq details{transition:none}

/* Skip-Link: top ist eine Layout-Eigenschaft */
.skip{transition:transform var(--t-hover) var(--out)}
.skip:focus{top:0;transform:translateY(1rem)}

/* ---------- Eintritte: Ease-out statt Ease-in-out ---------- */
.js [data-anim="up"]{
  opacity:0;translate:0 22px;
  transition:opacity var(--t-enter) var(--out) var(--delay,0ms),
             translate var(--t-enter) var(--out) var(--delay,0ms);
}
.js [data-anim="up"].is-in{translate:0 0}
.js [data-anim="fade"]{transition:opacity 700ms var(--out)}
/* Maske und Bild-Settle in EINER Regel: das Kind ist in beiden Faellen
   dasselbe Element, zwei transition-Shorthands wuerden sich gegenseitig
   ausloeschen. Das Settle verhindert, dass der Reveal auf ein starres
   Bild aufschlaegt — das ist sein einziger Zweck. */
.js [data-anim="reveal"] > *{
  transform:scale(1.04);
  /* Gleiche Dauer wie die Maske: eine Bewegung, nicht zwei. 900 ms
     liessen das Bild fast eine Sekunde nach dem Aufgehen weiterlaufen. */
  transition:clip-path 700ms var(--out),transform 700ms var(--out);
}
.js [data-anim="reveal"].is-in > *{transform:none}

/* ---------- Gruppenversatz ----------
   Kartengruppen kreuzen die Schwelle praktisch gleichzeitig und erschienen
   deshalb als Block. 60 ms Versatz liest sich als gesetzt statt als Schlag.

   --delay wird nur in den Gruppen gesetzt, in denen gestaffelt werden soll,
   und in den transition-Shorthands ausgelesen. Als separate
   transition-delay-Regel haette der Versatz davon abgehangen, im Stylesheet
   nach jedem Shorthand zu stehen, der dasselbe Element trifft.

   .svc und .voices standen hier nur als Kopie aus der Variante
   vertrauenscoach/ — es gibt sie in diesem Markup nicht. .reviews steht
   ebenfalls nicht mehr hier: die Stimmen sind ein Slider, dort ist immer
   nur eine Karte zu sehen und ein Versatz waere Bewegung, die niemand
   sieht. Der Streifen faehrt als Ganzes ein. */
.js :is(.paths,.cards,.steps__grid) > [data-anim]:nth-child(2){--delay:var(--stagger)}
.js :is(.cards,.steps__grid) > [data-anim]:nth-child(3){--delay:calc(var(--stagger) * 2)}
.js .steps__grid > [data-anim]:nth-child(4){--delay:calc(var(--stagger) * 3)}

/* Die vier Saetze der Wiedererkennung sind der emotionale Kern der Seite —
   der Leser soll sich in ihnen wiederfinden. Zeile fuer Zeile gibt jedem
   Satz einen eigenen Takt, statt alle vier als Absatz hinzuwerfen.
   Traeger bleibt die Liste, die ihr data-anim schon hat. */
.js .recog[data-anim] li{
  opacity:0;translate:0 8px;
  transition:opacity 520ms var(--out) var(--delay,0ms),
             translate 520ms var(--out) var(--delay,0ms);
}
.js .recog[data-anim].is-in li{opacity:1;translate:0 0}
.js .recog[data-anim] li:nth-child(2){--delay:var(--stagger)}
.js .recog[data-anim] li:nth-child(3){--delay:calc(var(--stagger) * 2)}
.js .recog[data-anim] li:nth-child(4){--delay:calc(var(--stagger) * 3)}

/* ---------- Die Amber-Haarlinie zeichnet sich ----------
   Sie ist die Signatur der Marke und steht unter jeder Headline — bisher
   stand sie einfach da. Sie laeuft 180 ms nach der Zeile los, zu der sie
   gehoert, und zeichnet sich von links. scaleX laeuft auf dem Compositor,
   width waere Layout. Die Hero-Linie ist ausgenommen, die gehoert der
   GSAP-Timeline. */
.js [data-anim="rule"]{
  transform:scaleX(0);transform-origin:left center;
  transition:transform 620ms var(--out) 180ms;
}
.js [data-anim="rule"].is-in{transform:none}
/* Zentrierte Linie unter zentrierter Headline: von der Mitte nach aussen. */
.rule--center{margin-inline:auto}
.js [data-anim="rule"].rule--center{transform-origin:center}

/* ---------- Hover-Bewegung nur dort, wo es einen Zeiger gibt ----------
   Bisher wurde Bewegung per @media (hover:none) nachtraeglich
   zurueckgenommen. Das laesst Hybridgeraete (Stift, Touch-Notebook) mit
   hover:hover und pointer:coarse aussen vor — dort bleibt der Zustand nach
   dem Antippen kleben. Neue Hover-Bewegung wird deshalb positiv gesetzt:
   nur mit echtem, feinem Zeiger. */
@media (hover: hover) and (pointer: fine){
  /* Die zwei Wege sind die eigentliche Entscheidung der Startseite. Die
     ganze Flaeche ist ein Link, also fuehrt sie auch den Pfeil — bisher
     reagierte nur der Textlink selbst. */
  .pcard:hover .circle-link i{border-color:var(--bronze-ink);transform:translateX(3px)}
}

/* Rueckbau fuer Geraete ohne Hover — die Regeln davor sind aelter als
   die positive Gattung oben und werden hier weiter entschaerft. */
@media (hover: none){
  .pcard:hover{transform:none;box-shadow:var(--shadow-soft)}
  .pcard:hover .pcard__ph img{transform:none}
  .circle-link:hover i{transform:none;background-color:transparent}
  .btn:hover .btn__i,.arrow-link:hover svg{transform:none}
}

/* ============================================================
   GSAP-INTRO: STARTZUSTAENDE GEHOEREN INS CSS

   Gemessen auf dieser Seite: First Contentful Paint bei 92 ms,
   document.fonts.ready bei 232 ms. Die GSAP-Timeline haengt an
   fonts.ready und setzte die Deckkraft erst dort auf 0 — der Hero
   stand also 140 ms voll sichtbar da und wurde dann ausgeblendet,
   um sich einzublenden. Das wichtigste Element der Seite blinkte.
   Bei kaltem Cache und vier Schriftdateien ist die Luecke groesser.

   Die Startzustaende stehen deshalb im CSS, gesetzt vor dem ersten
   Paint durch die .js-Klasse aus dem Head. .no-intro wird von
   site.js gesetzt, sobald das Intro nicht laufen wird — reduzierte
   Bewegung oder fehlendes GSAP. Ohne diese Sperre waere ein
   blockiertes gsap.min.js ein leerer Hero.
   ============================================================ */
html.js:not(.no-intro) .hero .eyebrow,
html.js:not(.no-intro) .hero h1,
html.js:not(.no-intro) .hero__sub,
html.js:not(.no-intro) .hero .btn-row > *,
html.js:not(.no-intro) .hero__creds li,
html.js:not(.no-intro) .hero .bewertungen,
html.js:not(.no-intro) [data-anim-head]{opacity:0}
html.js:not(.no-intro) .hero .rule{transform:scaleX(0);transform-origin:left center}

/* ============================================================
   FAQ: DIE ANTWORT FAEHRT AUS, STATT ZU ERSCHEINEN

   Natives <details> springt auf. Der Sprung ist genau die
   jarring change, gegen die Bewegung gedacht ist: der Text steht
   ploetzlich da und schiebt alles darunter weg. 260 ms bleiben
   unter der 300-ms-Grenze fuer UI.

   block-size ist eine Layout-Eigenschaft und damit teurer als
   transform — fuer eine Aufklapp-Bewegung gibt es aber keine
   Compositor-Alternative, die nicht doppelt rendert oder
   beschneidet. Die animierte Box ist ein FAQ-Absatz, kein
   Vollbild. Browser ohne ::details-content springen wie bisher.
   ============================================================ */
@supports selector(::details-content){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{
    block-size:0;overflow:clip;
    transition:block-size 260ms var(--out),content-visibility 260ms allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto}
}

/* ---------- Reduzierte Bewegung ----------
   Ergänzt den bestehenden Block: der Versatz muss weg, sonst
   erscheinen Karten gestaffelt verzögert statt sofort. */
@media (prefers-reduced-motion: reduce){
  [data-anim],[data-anim] li{--delay:0ms}
  .js [data-anim="reveal"] img{transform:none!important;transition:none!important}
  /* Was sich neu bewegt, bewegt sich hier nicht: Haarlinie, Zeilenversatz
     der Wiedererkennung und der Eintritts-Schub. Deckkraft bleibt. */
  .js [data-anim="rule"]{transform:none!important;transition:none!important}
  .js [data-anim="up"],.js .recog[data-anim] li{translate:0 0!important}
  .js .recog[data-anim] li{opacity:1!important}
  .faq details::details-content{transition:none!important}
}

/* Offener Punkt ausserhalb der Rechtstexte: etwas, das vor dem Livegang
   gefuellt werden muss. Bewusst sichtbar — ein stiller Platzhalter geht
   irgendwann unbemerkt mit online. */
.offen{
  display:inline-block;padding:.25rem .625rem;
  border-left:2px solid var(--amber-500,var(--gold-400,#C8A055));
  background:rgba(229,163,60,.10);
  font-size:var(--fs-sm);color:var(--fg-mute);
}

/* ============================================================
   MOBILE GRUNDLAGEN
   Nachgezogen gegen die Web Interface Guidelines. Vier Punkte,
   die auf dem Telefon jeden Tippvorgang betreffen.
   ============================================================ */

/* 1 · Ohne touch-action wartet der Browser nach jedem Tippen 300 ms,
   ob ein Doppeltipp zum Zoomen folgt. Das laesst jede Schaltflaeche
   traege wirken, ohne dass an der Animation irgendetwas falsch waere. */
a,button,summary,label,input,textarea,select,[role="button"],.karte{
  touch-action:manipulation;
}

/* 2 · Der graue Kasten, den Android beim Antippen ueber Links legt,
   passt nicht zur Palette. Ersetzt durch einen kurzen Amber-Schimmer. */
html{-webkit-tap-highlight-color:rgba(229,163,60,.18)}

/* 3 · Ohne color-scheme rendert das Betriebssystem Bildlaufleisten,
   Auswahlfelder und Datumsfelder im hellen Schema — mitten in einer
   dunkelblauen Seite. */
:root{color-scheme:dark}
.section--cream,.section--paper,.section--sand{color-scheme:light}

/* 4 · Ist der Drawer offen und am Ende gescrollt, scrollt sonst die
   Seite dahinter weiter (Scroll-Chaining). Beim Schliessen steht man
   dann woanders als vorher. */
.drawer{overscroll-behavior:contain}

/* Trefferflaeche der Slider-Punkte auf Touchgeraeten.
   28 px waren die bequeme Loesung, aber das Projekt setzt sich selbst
   44 px als Untergrenze (Abschnitt Touch-Ziele) — und ein Punkt, den man
   dreimal antippen muss, ist genau der Griff ins Leere, den die Regel
   verhindern soll. Der sichtbare Punkt bleibt 7 px, nur die Flaeche
   waechst. Damit die Reihe einzeilig bleibt, rueckt die Bedienleiste
   enger zusammen: 5 x 44 + 2 x 44 fuer die Pfeile + 8 px Abstand
   passen bei 335 px Streifenbreite auf eine Zeile. */
@media (max-width:819px){
  .slider-nav{gap:.5rem}
  .slider-nav__dot{width:44px;height:44px}
  .slider-nav__dots{gap:0}
}