/* ============================================================================
   STEUERBERATERIN UTA ULRICH — Premium Design System
   Light · Trust-first · Editorial. Vanilla, self-hosted, DSGVO-konform.
   Display: Spectral (Serif) · Body/UI: Hanken Grotesk
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. FONTS (self-hosted, OFL, keine externen Anfragen)
   --------------------------------------------------------------------------- */
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/spectral-400.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/spectral-500.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/spectral-600.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/hankengrotesk-400.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/hankengrotesk-500.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/hankengrotesk-600.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/hankengrotesk-700.woff2') format('woff2');}

/* ---------------------------------------------------------------------------
   2. DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root{
  /* — Palette — */
  --navy:#002C59;
  --navy-2:#2C5680;          /* Steel */
  --navy-deep:#001E3D;       /* tiefes Navy für Footer-Boden */
  --clay:#B28D77;            /* warmer Akzent, sparsam */
  --clay-2:#9C7560;          /* Clay dunkler, für Text auf hell */
  --steel-lt:#7FA6C4;
  --steel-soft:#9CC2DA;

  --paper:#FAF8F3;           /* warm-cremeweißer Default-Grund */
  --paper-2:#F2EEE6;         /* zweite Papierfläche */
  --paper-3:#ECE6DA;         /* tiefere Papierfläche / Hairline-Basis */
  --surface:#FFFFFF;         /* reine Karten-/Inhaltsfläche */

  --ink:#1A2230;            /* Fließtext */
  --ink-strong:#0E1626;     /* sehr starke Headline-Tiefe (selten) */
  --muted:#5A6472;          /* Sekundärtext */
  --muted-2:#828B98;        /* tertiär / Captions */

  /* auf dunklem Navy */
  --on-navy:#EAF1F8;
  --on-navy-muted:#A9BBD0;
  --on-navy-line:rgba(234,241,248,.16);

  /* — Linien (sehr dezent, getönt) — */
  --line:rgba(0,44,89,.12);
  --line-soft:rgba(0,44,89,.07);
  --line-strong:rgba(0,44,89,.20);

  /* — Schatten (getönt navy/warm, nie hartes Schwarz) — */
  --sh-xs:0 1px 2px rgba(0,44,89,.05), 0 1px 1px rgba(26,34,48,.04);
  --sh-sm:0 2px 6px rgba(0,44,89,.06), 0 1px 2px rgba(26,34,48,.05);
  --sh-md:0 10px 30px -12px rgba(0,44,89,.16), 0 4px 10px -6px rgba(26,34,48,.08);
  --sh-lg:0 28px 60px -22px rgba(0,30,61,.30), 0 10px 24px -14px rgba(0,44,89,.16);
  --sh-clay:0 18px 44px -20px rgba(178,141,119,.42);
  --sh-focus:0 0 0 3px rgba(127,166,196,.45);

  /* — Radius — */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  /* — Spacing-Scale (4/8) — */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px;
  --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px;
  --s-13:120px; --s-14:160px;

  /* — Fonts — */
  --f-display:'Spectral', Georgia, 'Times New Roman', serif;
  --f-body:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-mono:ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  /* — Type-Scale (fluid, editorial) — */
  --t-eyebrow:clamp(.72rem,.68rem + .2vw,.78rem);
  --t-small:clamp(.84rem,.82rem + .1vw,.9rem);
  --t-body:clamp(1rem,.97rem + .14vw,1.075rem);
  --t-lead:clamp(1.12rem,1.05rem + .5vw,1.32rem);
  --t-h6:clamp(1.02rem,.98rem + .3vw,1.15rem);
  --t-h5:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  --t-h4:clamp(1.4rem,1.2rem + 1vw,1.85rem);
  --t-h3:clamp(1.7rem,1.4rem + 1.5vw,2.4rem);
  --t-h2:clamp(2.1rem,1.6rem + 2.6vw,3.4rem);
  --t-h1:clamp(2.7rem,1.9rem + 4vw,5rem);

  /* — Section-Rhythmus — */
  --section-y:clamp(80px,7vw,140px);

  /* — Layout — */
  --wrap:1180px;
  --wrap-narrow:840px;

  /* — Motion — */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.55s;
  --dur-fast:.28s;

  --nav-h:76px;

  color-scheme:light;
}

/* ---------------------------------------------------------------------------
   3. RESET / BASE
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  -webkit-tap-highlight-color:transparent;
}
body{
  font-family:var(--f-body);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1, "liga" 1;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%;height:auto;}
img{font-style:italic;color:var(--muted-2);}/* alt-fallback styling */
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;padding:0;}
:where(h1,h2,h3,h4,h5,h6){font-weight:400;line-height:1.12;text-wrap:balance;}
p{text-wrap:pretty;}
::selection{background:rgba(178,141,119,.28);color:var(--ink-strong);}
hr{border:0;border-top:1px solid var(--line);}

/* Visible focus — navy/clay ring, nie entfernt */
:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:3px;
}
.section--navy :focus-visible{outline-color:var(--steel-soft);}

/* Skip-link */
.skip-link{
  position:fixed;top:10px;left:50%;transform:translate(-50%,-160%);
  z-index:1000;background:var(--navy);color:var(--on-navy);
  padding:10px 18px;border-radius:var(--r-pill);font-weight:600;
  font-size:var(--t-small);box-shadow:var(--sh-md);transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translate(-50%,0);}

/* ---------------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}
.wrap--narrow{max-width:var(--wrap-narrow);}

.section{
  position:relative;
  padding-block:var(--section-y);
}
.section--tight{padding-block:clamp(56px,5vw,88px);}
.section--paper{background:var(--paper-2);}
.section--surface{background:var(--surface);}
.section--navy{
  background:var(--navy);
  color:var(--on-navy);
  background-image:
    radial-gradient(120% 90% at 85% -10%, rgba(127,166,196,.18), transparent 55%),
    radial-gradient(90% 80% at 0% 110%, rgba(178,141,119,.12), transparent 55%);
}
.section--navy .muted{color:var(--on-navy-muted);}
.section--navy .eyebrow{color:var(--steel-soft);}
.section--navy .eyebrow::before{background:var(--steel-soft);}

/* Section-Header-Cluster */
.section__head{
  max-width:62ch;
  margin-bottom:clamp(40px,4vw,68px);
}
.section__head--center{margin-inline:auto;text-align:center;}
.section__head--center .eyebrow{justify-content:center;}

/* ---------------------------------------------------------------------------
   5. TYPOGRAPHY
   --------------------------------------------------------------------------- */
.h-display{
  font-family:var(--f-display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.012em;
  color:var(--ink-strong);
  text-wrap:balance;
}
.section--navy .h-display{color:var(--on-navy);}

h1.h-display,.t-h1{font-size:var(--t-h1);letter-spacing:-.02em;line-height:1.02;}
h2.h-display,.t-h2{font-size:var(--t-h2);letter-spacing:-.015em;line-height:1.06;}
h3.h-display,.t-h3{font-size:var(--t-h3);}
.t-h4{font-family:var(--f-display);font-weight:500;font-size:var(--t-h4);line-height:1.14;letter-spacing:-.01em;}
.t-h5{font-size:var(--t-h5);font-weight:600;line-height:1.2;}

/* Eyebrow — kleines Uppercase-Label in Clay mit Markenstrich */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-body);
  font-size:var(--t-eyebrow);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--clay-2);
  margin-bottom:var(--s-5);
}
.eyebrow::before{
  content:"";
  width:26px;height:1.5px;
  background:var(--clay);
  display:inline-block;
  flex:none;
}

/* Lead — größerer Intro-Absatz */
.lead{
  font-size:var(--t-lead);
  line-height:1.55;
  color:var(--muted);
  max-width:62ch;
  font-weight:400;
}
.section--navy .lead{color:var(--on-navy-muted);}

.muted{color:var(--muted);}
.prose{max-width:65ch;}
.prose p + p{margin-top:var(--s-5);}
.prose a{
  color:var(--navy);font-weight:500;
  text-decoration:underline;text-decoration-color:var(--line-strong);
  text-underline-offset:3px;text-decoration-thickness:1.5px;
  transition:text-decoration-color .2s var(--ease),color .2s var(--ease);
}
.prose a:hover{text-decoration-color:var(--clay);color:var(--clay-2);}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* ---------------------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------------------- */
.btn{
  --btn-bg:var(--navy);
  --btn-fg:var(--on-navy);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 24px;
  font-family:var(--f-body);
  font-size:var(--t-small);
  font-weight:600;
  letter-spacing:.005em;
  line-height:1;
  border-radius:var(--r-pill);
  cursor:pointer;
  white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
/* will-change NUR bei Interaktion (nicht auf jedem idle-Button -> spart Layer) */
.btn:hover,.btn:focus-visible{will-change:transform;}
.btn:active{transform:translateY(1px) scale(.99);}

.btn--primary{
  background:var(--btn-bg);
  color:var(--btn-fg);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, var(--sh-sm);
}
.btn--primary:hover{
  background:#013766;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset, var(--sh-md);
  transform:translateY(-2px);
}
.section--navy .btn--primary{
  background:var(--paper);color:var(--navy);
}
.section--navy .btn--primary:hover{background:#fff;}

.btn--ghost{
  background:transparent;
  color:var(--navy);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);
}
.btn--ghost:hover{
  box-shadow:inset 0 0 0 1.5px var(--navy);
  background:rgba(0,44,89,.03);
  transform:translateY(-2px);
}
.section--navy .btn--ghost{color:var(--on-navy);box-shadow:inset 0 0 0 1.5px var(--on-navy-line);}
.section--navy .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--steel-soft);background:rgba(255,255,255,.05);}

.btn--lg{padding:17px 32px;font-size:var(--t-body);}

/* Pfeil-Icon im Kreis, nested */
.btn__ico{
  display:inline-grid;
  place-items:center;
  width:26px;height:26px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  margin-right:-6px;
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease);
}
.btn__ico svg{width:13px;height:13px;}
.btn--ghost .btn__ico{background:rgba(0,44,89,.08);}
.btn:hover .btn__ico{transform:translateX(3px);background:rgba(255,255,255,.26);}
.btn--ghost:hover .btn__ico{background:rgba(0,44,89,.12);}
.section--navy .btn--primary .btn__ico{background:rgba(0,44,89,.1);}

/* Text-Link mit Pfeil (svc__more etc.) */
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:var(--t-small);color:var(--navy);
  letter-spacing:.005em;
}
.link-arrow svg{width:15px;height:15px;transition:transform var(--dur-fast) var(--ease-out);}
.link-arrow:hover svg,a:hover .link-arrow svg{transform:translateX(4px);}

/* ---------------------------------------------------------------------------
   7. NAV
   --------------------------------------------------------------------------- */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-6);
  height:var(--nav-h);
  padding-inline:clamp(20px,5vw,40px);
  background:rgba(250,248,243,0);
  border-bottom:1px solid transparent;
  transition:background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             height var(--dur-fast) var(--ease);
}
.nav.is-stuck{
  background:rgba(250,248,243,.82);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px -18px rgba(0,44,89,.4);
  height:64px;
}
.nav__brand{
  display:inline-flex;
  align-items:center;
  flex:none;
  transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease);
}
.nav__brand:hover{transform:translateY(-1px);}
.nav__logo{
  height:34px;width:auto;
  transition:height var(--dur-fast) var(--ease);
}
.nav.is-stuck .nav__logo{height:30px;}

.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(4px,1.4vw,18px);
  margin-left:auto;
}
.nav__links a{
  position:relative;
  padding:8px 6px;
  font-size:var(--t-small);
  font-weight:500;
  color:var(--ink);
  letter-spacing:.005em;
  transition:color var(--dur-fast) var(--ease);
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:6px;right:6px;bottom:2px;
  height:1.5px;
  background:var(--clay);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-out);
}
.nav__links a:hover{color:var(--navy);}
.nav__links a:hover::after,
.nav__links a.is-active::after{transform:scaleX(1);}
.nav__links a.is-active{color:var(--navy);font-weight:600;}

.nav__cta{margin-left:clamp(8px,1.5vw,18px);flex:none;}

/* Burger */
.nav__burger{
  display:none;
  position:relative;
  width:46px;height:46px;
  border-radius:var(--r-sm);
  margin-left:auto;
  align-items:center;
  justify-content:center;
  color:var(--navy);
  transition:background-color var(--dur-fast) var(--ease);
}
.nav__burger:hover{background:rgba(0,44,89,.05);}
.nav__burger span,
.nav__burger span::before,
.nav__burger span::after{
  content:"";
  position:absolute;
  width:22px;height:2px;border-radius:2px;
  background:currentColor;
  transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}
.nav__burger span::before{transform:translateY(-7px);}
.nav__burger span::after{transform:translateY(7px);}
.nav__burger[aria-expanded="true"] span{background:transparent;}
.nav__burger[aria-expanded="true"] span::before{transform:rotate(45deg);}
.nav__burger[aria-expanded="true"] span::after{transform:rotate(-45deg);}

/* Mobile Overlay — voll deckend, deckt auch den Nav-Streifen darunter ab */
.nav__overlay{
  position:fixed;
  inset:0;
  z-index:98;
  background:var(--paper);
  padding:calc(var(--nav-h) + clamp(20px,6vw,40px)) clamp(24px,6vw,40px) clamp(40px,8vw,64px);
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  transform:translateY(-8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease-out),visibility 0s linear var(--dur-fast);
  overflow-y:auto;
}
.nav__overlay.is-open{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease-out);
}
.nav__overlay a:not(.btn){
  font-family:var(--f-display);
  font-size:clamp(1.5rem,5vw,2rem);
  font-weight:500;
  color:var(--ink-strong);
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--line-soft);
  transition:color var(--dur-fast) var(--ease),padding-left var(--dur-fast) var(--ease-out);
}
.nav__overlay a:not(.btn):hover,.nav__overlay a:not(.btn).is-active{color:var(--navy);padding-left:8px;}
.nav__overlay .btn{margin-top:var(--s-7);align-self:flex-start;}

/* ---------------------------------------------------------------------------
   8. HERO
   --------------------------------------------------------------------------- */
.hero{
  position:relative;
  padding-block:clamp(56px,8vw,120px) clamp(64px,7vw,110px);
  overflow:hidden;
}
.hero::before{
  /* warmer Verlauf + dezente Schild-Halo-Aura */
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 60% at 78% 18%, rgba(127,166,196,.16), transparent 60%),
    radial-gradient(48% 55% at 8% 92%, rgba(178,141,119,.12), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.hero__inner--single{grid-template-columns:1fr;max-width:min(880px,100%);}
.hero__title{
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-h1);
  line-height:1.02;
  letter-spacing:-.022em;
  color:var(--ink-strong);
  margin-block:var(--s-2) var(--s-6);
}
.hero__title em{
  font-style:italic;
  color:var(--navy);
}
.hero__sub{
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--muted);
  max-width:52ch;
}
.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-4);
  margin-top:clamp(28px,3vw,40px);
}
.hero__trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-4) clamp(18px,3vw,32px);
  margin-top:clamp(36px,4vw,52px);
  padding-top:var(--s-7);
  border-top:1px solid var(--line);
}
.hero__trust-item{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:var(--t-small);
  font-weight:500;
  color:var(--muted);
}
.hero__trust-item svg{width:18px;height:18px;color:var(--clay);flex:none;}
.hero__trust-item strong{color:var(--ink);font-weight:600;}

/* Hero-Media (optional) */
.hero__media{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-lg);
  background:var(--surface);
  aspect-ratio:4/5;
}
.hero__media img{width:100%;height:100%;object-fit:cover;}
.hero__media::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  border-radius:inherit;pointer-events:none;
}

/* ---------------------------------------------------------------------------
   9. FACTS / KENNZAHLEN
   --------------------------------------------------------------------------- */
.facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.fact{
  background:var(--surface);
  padding:clamp(22px,3vw,34px) clamp(18px,2.4vw,28px);
  text-align:left;
}
.section--navy .facts{background:var(--on-navy-line);border-color:var(--on-navy-line);}
.section--navy .fact{background:transparent;}
.fact b{
  display:block;
  white-space:nowrap;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(2.2rem,1.6rem + 2.4vw,3.2rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.section--navy .fact b{color:var(--on-navy);}
.fact b .fact__suffix{
  display:inline;margin-top:0;               /* schlägt .fact span (display:block) — Suffix bleibt in der Zeile */
  font-size:.5em;color:var(--clay);margin-left:2px;vertical-align:.18em;
  -webkit-text-fill-color:var(--clay);
}
.fact span{
  display:block;
  margin-top:var(--s-3);
  font-size:var(--t-small);
  color:var(--muted);
  line-height:1.4;
}
.section--navy .fact span{color:var(--on-navy-muted);}

/* ---------------------------------------------------------------------------
   10. LEISTUNGEN / SVC-GRID
   --------------------------------------------------------------------------- */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.svc{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:clamp(24px,2.6vw,34px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-xs);
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.svc::before{
  /* clay-Akzentlinie oben, läuft beim Hover ein */
  content:"";
  position:absolute;left:0;top:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--clay),var(--steel-lt));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease-out);
  z-index:1;
}
.svc:hover,.svc:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--sh-md);
  border-color:var(--line-strong);
}
.svc:hover::before,.svc:focus-visible::before{transform:scaleX(1);}
.svc__ico{
  display:grid;place-items:center;
  width:52px;height:52px;
  border-radius:var(--r-sm);
  background:var(--paper-2);
  color:var(--navy);
  margin-bottom:var(--s-2);
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.svc__ico svg{width:26px;height:26px;}
.svc:hover .svc__ico{background:var(--navy);color:var(--paper);}
.svc__title{
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-h6);
  line-height:1.25;
  color:var(--ink-strong);
}
.svc__text{
  font-size:var(--t-small);
  color:var(--muted);
  line-height:1.58;
  flex:1;
}
.svc__more{
  margin-top:var(--s-3);
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-small);font-weight:600;color:var(--navy);
}
.svc__more svg{width:14px;height:14px;transition:transform var(--dur-fast) var(--ease-out);}
.svc:hover .svc__more svg{transform:translateX(4px);}

/* nummerierte Variante (optional, data-idx) */
.svc[data-idx]::after{
  content:attr(data-idx);
  position:absolute;top:18px;right:20px;
  font-family:var(--f-display);
  font-size:.95rem;color:var(--muted-2);
  font-variant-numeric:tabular-nums;
  opacity:.6;
}

/* — CTA-KACHEL: füllt die zwei freien Rasterzellen neben Feld 10 (Navy-Anker) — */
.svc-cta{
  grid-column:span 2;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
  gap:clamp(16px,2.2vw,38px);
  padding:clamp(26px,3vw,42px);
  border-radius:var(--r-md);
  overflow:hidden;
  isolation:isolate;
  color:var(--on-navy);
  background:
    radial-gradient(120% 150% at 86% 16%, rgba(201,162,75,.20), transparent 56%),
    linear-gradient(152deg, #003465 0%, var(--navy) 44%, var(--navy-deep) 100%);
  border:1px solid rgba(234,241,248,.12);
  box-shadow:inset 0 1px 0 rgba(234,241,248,.07), var(--sh-sm);
}
.svc-cta__eyebrow{
  display:inline-flex;align-items:center;
  font-size:var(--t-eyebrow);
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:clamp(10px,1.2vw,14px);
}
.svc-cta__eyebrow::before{
  content:"";width:18px;height:1px;margin-right:10px;
  background:var(--gold-soft);opacity:.7;
}
.svc-cta__title{
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-h4);
  line-height:1.12;
  letter-spacing:-.012em;
  color:var(--on-navy);
  text-wrap:balance;
}
.svc-cta__title em{font-style:italic;color:var(--gold-soft);}
.svc-cta__lead{
  margin-top:clamp(10px,1.2vw,14px);
  max-width:38ch;
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--on-navy-muted);
}
.svc-cta__btn{margin-top:clamp(16px,2vw,24px);}

/* Konvergenz-Visual */
.svc-cta__viz{
  position:relative;
  align-self:center;
  width:100%;
  min-height:0;
}
.cta-svg{
  display:block;width:100%;height:auto;
  max-height:230px;
  overflow:visible;
}
/* Linien zeichnen sich beim Scroll-In (Einmal, via .reveal -> .in; pathLength=1 normiert) */
.cta-lines path{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:.92;
  transition:stroke-dashoffset 1.05s var(--ease-out);
  transition-delay:calc(var(--i,0) * .075s);
}
.svc-cta.in .cta-lines path{stroke-dashoffset:0;}
/* Gold-Knoten ploppt, nachdem die Linien ankommen */
.cta-node{
  transform-box:fill-box;
  transform-origin:250px 130px;
  opacity:0;
  transform:scale(.4);
  transition:opacity .5s var(--ease-out), transform .6s var(--ease-spring);
  transition-delay:.8s;
}
.svc-cta.in .cta-node{opacity:1;transform:scale(1);}
/* sehr dezenter, GPU-billiger Dauer-Schimmer (nur Opacity, ein Element) */
.cta-node__glow{animation:ctaGlowPulse 3.6s var(--ease) infinite;}
@keyframes ctaGlowPulse{0%,100%{opacity:.6;}50%{opacity:1;}}

/* ---------------------------------------------------------------------------
   11. STANDORTE / LOC-GRID
   --------------------------------------------------------------------------- */
.loc-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,26px);
}
.loc{
  position:relative;
  padding:clamp(26px,3vw,40px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  transition:box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease-out);
}
.loc:hover{box-shadow:var(--sh-md);transform:translateY(-3px);}
.loc__tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--clay-2);margin-bottom:var(--s-4);
}
.loc__tag svg{width:15px;height:15px;color:var(--clay);}
.loc__city{
  font-family:var(--f-display);font-weight:500;
  font-size:var(--t-h4);line-height:1.1;color:var(--ink-strong);
  margin-bottom:var(--s-4);
}
.loc__list{display:flex;flex-direction:column;gap:var(--s-3);}
.loc__row{display:flex;gap:12px;font-size:var(--t-small);color:var(--muted);line-height:1.5;}
.loc__row svg{width:17px;height:17px;color:var(--navy-2);flex:none;margin-top:2px;}
.loc__row a{color:var(--ink);font-weight:500;transition:color .2s var(--ease);}
.loc__row a:hover{color:var(--navy);}
.loc__row dt{font-weight:600;color:var(--ink);}

/* ---------------------------------------------------------------------------
   12. ABLAUF / STEPS
   --------------------------------------------------------------------------- */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,32px);
  counter-reset:step;
}
.step{
  position:relative;
  padding-top:var(--s-7);
}
.step::before{
  /* Verbindungslinie zwischen den Schritten */
  content:"";
  position:absolute;top:21px;left:48px;right:-16px;
  height:1px;
  background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px);
}
.step:last-child::before{display:none;}
.section--navy .step::before{background:repeating-linear-gradient(90deg,var(--on-navy-line) 0 6px,transparent 6px 12px);}
.step__n{
  display:grid;place-items:center;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--surface);
  border:1.5px solid var(--navy);
  color:var(--navy);
  font-family:var(--f-display);font-size:1.15rem;font-weight:500;
  font-variant-numeric:tabular-nums;
  margin-bottom:var(--s-5);
  position:relative;z-index:1;
}
.section--navy .step__n{background:var(--navy);border-color:var(--steel-soft);color:var(--on-navy);}
.step__t{
  font-family:var(--f-display);font-weight:500;
  font-size:var(--t-h6);line-height:1.2;color:var(--ink-strong);
  margin-bottom:var(--s-3);
}
.section--navy .step__t{color:var(--on-navy);}
.step__x{font-size:var(--t-small);color:var(--muted);line-height:1.58;}
.section--navy .step__x{color:var(--on-navy-muted);}

/* ---------------------------------------------------------------------------
   13. FAQ
   --------------------------------------------------------------------------- */
.faq{
  max-width:var(--wrap-narrow);
  border-top:1px solid var(--line);
}
.faq__item{
  border-bottom:1px solid var(--line);
}
.faq__item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-5);
  padding:var(--s-6) var(--s-2);
  cursor:pointer;
  list-style:none;
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-h6);
  line-height:1.3;
  color:var(--ink-strong);
  transition:color var(--dur-fast) var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary:hover{color:var(--navy);}
.faq__item summary::after{
  content:"";
  flex:none;
  width:22px;height:22px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002C59' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition:transform var(--dur-fast) var(--ease-out);
}
.faq__item[open] summary::after{transform:rotate(135deg);}
.faq__a{
  padding:0 var(--s-2) var(--s-6);
  max-width:64ch;
  color:var(--muted);
  font-size:var(--t-body);
  line-height:1.62;
}
.faq__a p + p{margin-top:var(--s-4);}
/* sanftes Aufklappen */
.faq__item[open] .faq__a{animation:faqReveal .4s var(--ease-out);}
@keyframes faqReveal{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* ---------------------------------------------------------------------------
   14. KONTAKT
   --------------------------------------------------------------------------- */
.contact{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.contact__form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-5);
}
.field{display:flex;flex-direction:column;gap:8px;}
.field--full{grid-column:1/-1;}
.field label{
  font-size:var(--t-small);
  font-weight:600;
  color:var(--ink);
  letter-spacing:.005em;
}
.field label .req{color:var(--clay-2);}
.field input,
.field textarea,
.field select{
  width:100%;
  padding:13px 15px;
  font-size:var(--t-body);
  color:var(--ink);
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.55;}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2);}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--line-strong);}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;
  border-color:var(--navy-2);
  box-shadow:var(--sh-focus);
}
.field--error input,.field--error textarea{border-color:#C0573F;}
.field__err{
  font-size:var(--t-small);
  color:#9E4632;
  font-weight:500;
  display:none;
}
.field--error .field__err{display:block;}

/* Checkbox / Einwilligung */
.field--check{flex-direction:row;align-items:flex-start;gap:12px;}
.field--check input[type=checkbox]{
  width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--navy);
}
.field--check label{font-weight:400;color:var(--muted);font-size:var(--t-small);line-height:1.5;}
.field--check a{color:var(--navy);text-decoration:underline;text-underline-offset:2px;}

.form__status{
  grid-column:1/-1;
  padding:14px 18px;
  border-radius:var(--r-sm);
  font-size:var(--t-small);
  font-weight:500;
  display:none;
}
.form__status.is-ok{display:block;background:rgba(44,86,128,.08);color:var(--navy);border:1px solid rgba(44,86,128,.2);}
.form__status.is-err{display:block;background:rgba(192,87,63,.08);color:#9E4632;border:1px solid rgba(192,87,63,.25);}

/* NAP-Spalte */
.contact__nap{
  display:flex;flex-direction:column;gap:var(--s-5);
  padding:clamp(26px,3vw,38px);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.contact__nap-row{display:flex;gap:14px;align-items:flex-start;}
.contact__nap-row svg{width:20px;height:20px;color:var(--clay);flex:none;margin-top:3px;}
.contact__nap-row dt{font-weight:600;color:var(--ink);font-size:var(--t-small);margin-bottom:3px;}
.contact__nap-row dd{color:var(--muted);font-size:var(--t-small);line-height:1.55;}
.contact__nap-row a{color:var(--ink);font-weight:500;}
.contact__nap-row a:hover{color:var(--navy);}

/* ---------------------------------------------------------------------------
   15. FOOTER (navy)
   --------------------------------------------------------------------------- */
.footer{
  background:var(--navy-deep);
  color:var(--on-navy);
  background-image:radial-gradient(80% 120% at 90% -20%, rgba(127,166,196,.12), transparent 55%);
  padding-block:clamp(56px,6vw,88px) 0;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(40px,4vw,64px);
}
.footer__brand-logo{height:38px;width:auto;margin-bottom:var(--s-5);}
.footer__claim{
  font-family:var(--f-display);
  font-size:var(--t-h6);
  font-style:italic;
  line-height:1.4;
  color:var(--on-navy);
  max-width:34ch;
  margin-bottom:var(--s-5);
}
.footer__brand-meta{font-size:var(--t-small);color:var(--on-navy-muted);line-height:1.6;}
.footer__col h2{
  font-family:var(--f-body);
  font-size:var(--t-eyebrow);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel-soft);
  margin-bottom:var(--s-5);
}
.footer__col ul{display:flex;flex-direction:column;gap:var(--s-3);}
.footer__col a,.footer__col li{
  font-size:var(--t-small);
  color:var(--on-navy-muted);
  line-height:1.5;
  transition:color var(--dur-fast) var(--ease);
}
.footer__col a:hover{color:var(--on-navy);}
.footer__col address{font-style:normal;display:flex;flex-direction:column;gap:var(--s-3);}
.footer__col address a:hover{color:var(--steel-soft);}

.footer__legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  padding-block:var(--s-6);
  border-top:1px solid var(--on-navy-line);
  font-size:var(--t-small);
  color:var(--on-navy-muted);
}
.footer__legal-links{display:flex;flex-wrap:wrap;gap:var(--s-6);}
.footer__legal-links a{color:var(--on-navy-muted);transition:color var(--dur-fast) var(--ease);}
.footer__legal-links a:hover{color:var(--on-navy);}
.footer__legal-links a.is-active{color:var(--steel-soft);}

/* ---------------------------------------------------------------------------
   16. HELPER / UTILITIES
   --------------------------------------------------------------------------- */
.hairline{height:1px;width:100%;background:var(--line);border:0;}
.section--navy .hairline{background:var(--on-navy-line);}

.badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.06em;
  border-radius:var(--r-pill);
  background:var(--paper-2);
  color:var(--navy);
  border:1px solid var(--line);
}
.badge svg{width:14px;height:14px;color:var(--clay);}
.badge--clay{background:rgba(178,141,119,.12);border-color:rgba(178,141,119,.3);color:var(--clay-2);}
.section--navy .badge{background:rgba(255,255,255,.06);border-color:var(--on-navy-line);color:var(--on-navy);}

/* Pull-Quote (Spectral, editorial) */
.quote{
  font-family:var(--f-display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.5rem,1.1rem + 1.8vw,2.4rem);
  line-height:1.32;
  letter-spacing:-.01em;
  color:var(--ink-strong);
  max-width:24ch;
}
.section--navy .quote{color:var(--on-navy);}
.quote__cite{
  display:block;margin-top:var(--s-6);
  font-family:var(--f-body);font-style:normal;
  font-size:var(--t-small);font-weight:600;color:var(--clay-2);
  letter-spacing:.04em;
}
.section--navy .quote__cite{color:var(--steel-soft);}

/* Visually hidden (a11y) */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Spacing helpers */
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.center{text-align:center;}

/* ---------------------------------------------------------------------------
   17. SCROLL-REVEAL
   --------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  will-change:opacity,transform;
}
/* Reveal animiert nur einmal -> nach .in den Layer wieder freigeben (spart GPU) */
.reveal.in{opacity:1;transform:none;will-change:auto;}
/* gestaffelt via inline --d oder data-attr */
.reveal[style*="--d"]{transition-delay:var(--d);}

/* Magnetic prep */
[data-magnetic]{transition:transform var(--dur-fast) var(--ease-out);}

/* ---------------------------------------------------------------------------
   18. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:1100px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--s-9) var(--s-8);}
  .footer__col--brand{grid-column:1/-1;}
}

@media (max-width:900px){
  :root{--nav-h:64px;}
  .nav__links,.nav__cta{display:none;}
  .nav__burger{display:flex;}

  .hero__inner{grid-template-columns:1fr;gap:var(--s-9);}
  .hero__media{order:-1;aspect-ratio:16/11;max-height:46vh;}

  .facts{grid-template-columns:repeat(2,1fr);}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .loc-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:repeat(2,1fr);gap:var(--s-9) var(--s-7);}
  .step::before{display:none;}
  .contact{grid-template-columns:1fr;}
}

@media (max-width:640px){
  :root{--section-y:clamp(56px,12vw,80px);}
  .facts{grid-template-columns:1fr;}
  .svc-grid{grid-template-columns:1fr;}
  .svc-cta{grid-column:auto;grid-template-columns:1fr;gap:clamp(14px,4vw,22px);text-align:left;}
  .svc-cta__viz{order:2;}
  .cta-svg{max-height:150px;}
  .steps{grid-template-columns:1fr;}
  .contact__form{grid-template-columns:1fr;}
  .hero__cta{flex-direction:column;align-items:stretch;}
  .hero__cta .btn{width:100%;}
  .footer__grid{grid-template-columns:1fr;gap:var(--s-8);}
  .footer__legal{flex-direction:column;align-items:flex-start;}
}

/* ---------------------------------------------------------------------------
   19. REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none;}
  [data-magnetic]{transform:none!important;}
  /* CTA-Konvergenz sofort im Endzustand (Delay würde sonst trotz 0-Dauer warten) */
  .cta-lines path{stroke-dashoffset:0!important;transition-delay:0s!important;}
  .cta-node{opacity:1!important;transform:none!important;transition-delay:0s!important;}
  .cta-node__glow{animation:none!important;opacity:.8!important;}
}

/* ---------------------------------------------------------------------------
   20. PRINT
   --------------------------------------------------------------------------- */
@media print{
  .nav,.nav__overlay,.footer,.hero__cta,.skip-link,
  .preloader,.scroll-progress,.ambient{display:none!important;}
  body{background:#fff;color:#000;}
  .section{padding-block:24px;}
}

/* ============================================================================
   ████  EXPERIENCE LAYER — cinematic, edel, mutig (Awwwards-Niveau)  ████
   Smooth-Scroll · Preloader · Custom-Cursor · Holo-Cards · Kinetic-Typo ·
   Dramatic-Reveals · Glass-Nav · Scroll-Progress · Ambient-Light.
   Akzent changiert Taupe -> edles Gold/Messing. Alles reduced-motion-safe.
   ============================================================================ */

/* — Gold/Messing-Token (EIN Luxus-Akzent, aus Clay heraus entwickelt) — */
:root{
  --gold:#C9A26B;            /* warmes Messing-Gold */
  --gold-2:#B98B4E;          /* tieferes Gold */
  --gold-soft:#E3C896;       /* helles Gold-Licht (auf Navy) */
  --gold-glow:rgba(201,162,107,.55);
  --ease-cine:cubic-bezier(.62,.05,.01,.99);   /* schwer, cineastisch */
  --ease-spring:cubic-bezier(.16,1,.3,1);
}

/* — Reveal-System um Richtung/Blur/Clip erweitern (Basis aus Sektion 17 bleibt) — */
.reveal{
  transition:opacity .9s var(--ease-spring),
             transform .9s var(--ease-spring),
             filter .9s var(--ease-spring);
  transform:translateY(26px);
  filter:blur(6px);
}
.reveal.in{filter:blur(0);}
.reveal[data-rv="left"]{transform:translateX(-40px);}
.reveal[data-rv="right"]{transform:translateX(40px);}
.reveal[data-rv="scale"]{transform:scale(.94);}
.reveal[data-rv="left"].in,
.reveal[data-rv="right"].in,
.reveal[data-rv="scale"].in{transform:none;}

/* Clip-Reveal für Bild-/Medienflächen (Vorhang, der nach oben zieht) */
.hero__media,.contact__nap{position:relative;}
[data-clip]{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-cine);}
[data-clip].in{clip-path:inset(0 0 0% 0);}

/* ---------------------------------------------------------------------------
   E1. HERO — 3D-Canvas-Slot (fremder Agent füllt .hero__canvas) + Lesbarkeit
   --------------------------------------------------------------------------- */
.hero__canvas{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero{isolation:isolate;}
.hero .wrap{position:relative;z-index:2;}
.hero__inner{position:relative;z-index:2;}
/* Scrim — GARANTIERT Lesbarkeit, wenn der 3D-Canvas die Hero dunkel macht.
   Textseite (links) bekommt einen kräftigen, weich auslaufenden Papier-Wash,
   sodass Navy-Headline + grauer Fließtext jederzeit klar lesbar bleiben.
   Erscheint nur, wenn .has-3d gesetzt ist (sonst greift der helle Default-Grund). */
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  /* muss ÜBER dem .hero__canvas (z-index:0) liegen, aber UNTER .hero__inner (z-index:2) */
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(250,248,243,.96) 0%,
      rgba(250,248,243,.9) 30%,
      rgba(250,248,243,.55) 50%,
      rgba(250,248,243,0) 72%),
    radial-gradient(120% 120% at 18% 45%, rgba(250,248,243,.8), rgba(250,248,243,0) 60%);
  opacity:0;transition:opacity .8s var(--ease);
}
.hero.has-3d .hero__scrim{opacity:1;}
/* Mobil: Text liegt oben über voller Breite -> Wash von oben + linksseitig */
@media (max-width:900px){
  .hero.has-3d .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(250,248,243,.97) 0%,
        rgba(250,248,243,.93) 46%,
        rgba(250,248,243,.74) 64%,
        rgba(250,248,243,.18) 82%,
        rgba(250,248,243,0) 100%);
  }
}

/* Kinetische Hero-Headline: zeilenweiser Masken-Auftritt */
.kin-line{display:block;overflow:hidden;}
.kin-line > span{
  display:block;
  transform:translateY(108%) rotate(2deg);
  opacity:0;
  transition:transform 1s var(--ease-cine),opacity .8s var(--ease-cine);
  will-change:transform;
}
.kin-line.in > span{transform:none;opacity:1;}

/* Section-Headlines (h2.h-display) — zeilenweises Masken-Reveal */
.kin-head .kin-line > span{transition-duration:.85s;}

/* ---------------------------------------------------------------------------
   E2. CINEMATIC PRELOADER — Vorhang + Ritter-Mark-Draw + Counter
   --------------------------------------------------------------------------- */
.preloader{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(127,166,196,.16), transparent 55%),
    radial-gradient(90% 90% at 10% 110%, rgba(201,162,107,.14), transparent 55%),
    linear-gradient(180deg,#012A53 0%, var(--navy-deep) 100%);
  color:var(--on-navy);
  transition:opacity .6s var(--ease);
}
.preloader__inner{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-7);
  transform:translateY(0);
  transition:opacity .5s var(--ease),transform .7s var(--ease-cine);
}
/* Ritter-Schild als SVG-Stroke-Draw (leichtgewichtig, inline injiziert) */
.preloader__mark{width:clamp(78px,12vw,104px);height:auto;color:var(--gold-soft);}
.preloader__mark path,.preloader__mark line{
  stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,400);
  stroke-dashoffset:var(--len,400);
}
.preloader.is-draw .preloader__mark path,
.preloader.is-draw .preloader__mark line{
  animation:markDraw 1.5s var(--ease-cine) forwards;
}
@keyframes markDraw{to{stroke-dashoffset:0;}}
.preloader__crest{
  position:absolute;width:clamp(78px,12vw,104px);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, var(--gold-glow), transparent 68%);
  opacity:0;transform:scale(.4);
  transition:opacity .8s var(--ease),transform 1s var(--ease-cine);
  pointer-events:none;
}
.preloader.is-draw .preloader__crest{opacity:.6;transform:scale(1.6);}
.preloader__meter{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--f-display);
}
.preloader__count{
  font-size:clamp(2.2rem,1.4rem + 3vw,3.4rem);
  font-weight:500;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--on-navy);
}
.preloader__pct{font-size:1rem;color:var(--gold-soft);font-style:italic;}
.preloader__label{
  font-family:var(--f-body);font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--on-navy-muted);
}
.preloader__bar{
  width:min(220px,52vw);height:1.5px;background:var(--on-navy-line);
  position:relative;overflow:hidden;border-radius:2px;
}
.preloader__bar i{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-2),var(--gold-soft));
}
/* Vorhang-Lift: zweigeteilt, zieht elegant auseinander */
.preloader.is-lift .preloader__inner{opacity:0;transform:translateY(-24px);}
.preloader.is-lift{pointer-events:none;}
.preloader__veil{
  position:absolute;left:0;right:0;height:50%;z-index:-1;
  background:linear-gradient(180deg,#012A53,var(--navy-deep));
  transition:transform 1s var(--ease-cine);
}
.preloader__veil--top{top:0;transform:translateY(0);}
.preloader__veil--bot{bottom:0;transform:translateY(0);}
.preloader.is-lift .preloader__veil--top{transform:translateY(-101%);}
.preloader.is-lift .preloader__veil--bot{transform:translateY(101%);}
.preloader.is-gone{opacity:0;visibility:hidden;}
/* Body bei aktivem Preloader nicht scrollen */
html.is-loading,html.is-loading body{overflow:hidden;}

/* ---------------------------------------------------------------------------
   E3. CUSTOM CURSOR — ENTFERNT.
   Der native Maus-Cursor ist überall aktiv. Es gibt KEIN cursor:none mehr,
   kein Cursor-DOM und keine .cursor/.cursor__ring/.cursor-hot/.cursor-dark/
   .has-cursor-Logik. Interaktive Elemente nutzen ihren nativen Cursor
   (pointer auf Links/Buttons, text auf Feldern usw.).
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   E4. SCROLL-PROGRESS — Navy -> Gold Leiste oben
   --------------------------------------------------------------------------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2.5px;z-index:200;
  transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy-2) 45%,var(--gold) 100%);
  box-shadow:0 0 12px -2px var(--gold-glow);
  will-change:transform;pointer-events:none;
}

/* ---------------------------------------------------------------------------
   E5. NAV — Glas-Verdichtung aufwerten + Marken-Mikrolicht
   --------------------------------------------------------------------------- */
.nav.is-stuck{
  background:rgba(250,248,243,.72);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,
             0 10px 30px -22px rgba(0,30,61,.6);
}
.nav__links a::after{
  background:linear-gradient(90deg,var(--gold-2),var(--clay));
  height:2px;
}
.nav__cta{position:relative;overflow:hidden;}
/* feiner Gold-Sheen, der einmal über den CTA wischt (per JS getriggert via .sheen) */
.nav__cta .btn__sheen,.btn .btn__sheen{
  position:absolute;top:0;bottom:0;width:40%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);pointer-events:none;opacity:0;
}
.btn:hover .btn__sheen{animation:sheen .85s var(--ease) forwards;}
@keyframes sheen{0%{left:-60%;opacity:1;}100%{left:140%;opacity:0;}}

/* ---------------------------------------------------------------------------
   E6. HOLO / SPOTLIGHT-KARTEN — cursor-getracktes Licht + 3D-Tilt + Gold-Schein
   .svc & .loc bekommen eine getönte Lichtkante (Navy/Gold, KEIN Regenbogen)
   --------------------------------------------------------------------------- */
.svc,.loc{
  --mx:50%;--my:0%;
  transform-style:preserve-3d;
  transition:transform .35s var(--ease-spring),
             box-shadow .35s var(--ease),
             border-color .35s var(--ease);
}
/* Spotlight-Glow folgt Cursor (radialer warmer Schein) */
.svc::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(220px 220px at var(--mx) var(--my),
            rgba(201,162,107,.16), transparent 70%);
  opacity:0;transition:opacity .4s var(--ease);border-radius:inherit;
}
.svc:hover::after,.svc:focus-within::after{opacity:1;}
/* Lichtkante (konische Hairline) — erscheint beim Hover */
.svc .holo-edge,.loc .holo-edge{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  padding:1px;opacity:0;transition:opacity .4s var(--ease);
  background:conic-gradient(from var(--ang,120deg) at var(--mx) var(--my),
            transparent 0deg, var(--gold-glow) 60deg, transparent 140deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.svc:hover .holo-edge,.loc:hover .holo-edge,
.svc:focus-within .holo-edge,.loc:focus-within .holo-edge{opacity:1;}
/* Inhalt der svc über dem Glow halten */
.svc > *{position:relative;z-index:1;}
/* getönter, gerichteter Schatten beim Tilt (per JS gesetzt via --sh-x/--sh-y) */
.svc.is-tilt,.loc.is-tilt{
  box-shadow:
    calc(var(--sh-x,0px)) calc(var(--sh-y,18px)) 44px -18px rgba(0,30,61,.42),
    0 4px 14px -8px rgba(0,44,89,.2);
}
.loc{transform-style:preserve-3d;}
.loc::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(260px 260px at var(--mx) var(--my),
            rgba(201,162,107,.12), transparent 70%);
  opacity:0;transition:opacity .4s var(--ease);
}
.loc:hover::after,.loc:focus-within::after{opacity:1;}
.loc > *{position:relative;z-index:1;}

/* ---------------------------------------------------------------------------
   E7. AMBIENT — langsamer, edler Hintergrund-Schimmer + feiner Grain
   --------------------------------------------------------------------------- */
.ambient{
  position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
}
.ambient__orb{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;
  will-change:transform;
}
.ambient__orb--a{
  width:46vw;height:46vw;top:-12vw;right:-8vw;
  background:radial-gradient(circle, rgba(127,166,196,.22), transparent 68%);
  animation:orbFloatA 26s var(--ease) infinite alternate;
}
.ambient__orb--b{
  width:40vw;height:40vw;bottom:-14vw;left:-10vw;
  background:radial-gradient(circle, rgba(201,162,107,.16), transparent 66%);
  animation:orbFloatB 32s var(--ease) infinite alternate;
}
@keyframes orbFloatA{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(-5vw,5vh,0) scale(1.12);}}
@keyframes orbFloatB{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(6vw,-4vh,0) scale(1.15);}}
/* feiner Film-Grain, fix, pointer-events:none (Performance) */
.ambient__grain{
  position:absolute;inset:-50%;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
/* auf der Navy-Sektion bekommt der Grain einen anderen Blend, dezent */
.section--navy{position:relative;}

/* Section-Head-Akzentlinie, die sich zeichnet */
.section__head .eyebrow{position:relative;}
.kin-accent{
  display:block;height:2px;width:0;margin-top:var(--s-2);
  background:linear-gradient(90deg,var(--gold-2),var(--clay),transparent);
  transition:width 1s var(--ease-cine) .2s;border-radius:2px;
}
.reveal.in .kin-accent,.in > .kin-accent{width:64px;}

/* ---------------------------------------------------------------------------
   E8. FACTS — Parallax-Tiefe + Gold-Schimmer auf der Zahl
   --------------------------------------------------------------------------- */
.fact{position:relative;overflow:hidden;}
.fact b{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.section--navy .fact b{
  background:linear-gradient(180deg,#fff,var(--gold-soft));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.fact::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-cine);
}
.facts.in .fact::before{transform:scaleX(1);}

/* ---------------------------------------------------------------------------
   E9. MAGNETIC / Buttons — Tiefe verstärken
   --------------------------------------------------------------------------- */
.btn--primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,
  0 18px 38px -16px rgba(0,30,61,.5), 0 0 0 1px rgba(201,162,107,.18);}

/* ---------------------------------------------------------------------------
   E10. REDUCED MOTION — ALLES abschalten, Inhalt voll sichtbar, nativ scrollen
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;filter:none!important;}
  [data-clip]{clip-path:none!important;}
  .kin-line > span{transform:none!important;opacity:1!important;}
  .kin-accent{width:64px!important;transition:none!important;}
  .ambient,.preloader__crest{display:none!important;}
  .ambient__orb{animation:none!important;}
  .scroll-progress{display:none!important;}
  .preloader{display:none!important;}
  html.is-loading,html.is-loading body{overflow:auto!important;}
  .svc,.loc{transform:none!important;}
}

/* Touch / kein Fine-Pointer: Custom-Cursor & Tilt aus (per JS nicht aktiviert,
   hier zusätzlich CSS-seitig abgesichert) */
@media (hover:none),(pointer:coarse){
  .svc,.loc{transform:none;}
}

/* ============================================================================
   ████████  LIQUID-GLASS MATERIALSYSTEM + FARBE + SECTION-DRAMA  ████████
   Apple-/iOS-„Liquid Glass": frosted, lichtreaktiv, Tiefe. Reichere,
   koordinierte Farbe (Navy-Leitfarbe + Indigo/Teal/Gold/Violett-Akzente).
   Dramatische, ANIMIERTE, thematische Section-Hintergründe (Finanz/Ordnung/
   Schutz) — abgestimmt mit dem fixen <canvas id="atmo"> (z-index:-1) eines
   anderen Agenten. Lesbarkeit zuerst: Text immer auf deckendem Glas/Scrim.
   Performance: backdrop-filter NUR auf begrenzte Glasflächen, transform/opacity,
   30fps-Deckel, offscreen-Pause, reduced-motion friert ein, Glas bleibt.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   G0. FARB-TOKENS (koordiniertes Akzent-Spektrum, KEIN Regenbogen)
   --------------------------------------------------------------------------- */
:root{
  --indigo:#2B4F9E;          /* Royal/Indigo — Vertrauen, Tiefe */
  --indigo-soft:#5E7FD0;
  --teal:#0E8A7D;            /* Smaragd/Teal — Wachstum, Geld */
  --teal-soft:#3FB6A7;
  --brass:#C9A24B;           /* warmes Gold/Messing (= --gold-Familie) */
  --violet:#6D5AE6;          /* dezenter Glas-Schimmer, nur als Iris */
  --violet-soft:#9A8CF2;

  /* Glas-Iris (Spektral-Schimmer am Glasrand, sehr zart) */
  --iris:linear-gradient(115deg,
        rgba(94,127,208,.0) 0%,
        rgba(94,127,208,.28) 22%,
        rgba(63,182,167,.24) 46%,
        rgba(201,162,107,.26) 68%,
        rgba(154,140,242,.22) 88%,
        rgba(94,127,208,.0) 100%);

  /* — Liquid-Glass-Tokens (hell, getönt, lichtreaktiv) — */
  --glass-fill:rgba(252,250,246,.62);          /* heller, halbtransparenter Fill */
  --glass-fill-strong:rgba(252,250,246,.80);   /* mehr Deckung für Textzonen */
  --glass-tint:rgba(63,121,180,.05);           /* dezenter kühler Farbstich */
  --glass-blur:20px;
  --glass-sat:1.7;
  /* PERFORMANCE: blur-freie Glas-Fills für scrollende Flächen (Karten/Panels).
     backdrop-filter ist beim Scrollen GPU-teuer -> diese Flächen nutzen einen
     etwas deckenderen, transluzenten Fill OHNE Blur. Der Glas-Look (Iris-Kante,
     Innenlicht, Sheen, Schatten) bleibt erhalten; das Scrollen wird flüssig. */
  --glass-fill-nb:rgba(252,250,246,.80);       /* no-blur Karten-Fill */
  --glass-fill-nb-strong:rgba(252,250,246,.90);/* no-blur, mehr Deckung (Textzonen) */
  --glass-fill-dark-nb:rgba(16,36,68,.82);     /* no-blur dunkles Karten-Glas */
  --glass-border:rgba(255,255,255,.65);        /* heller Außen-Hauch */
  --glass-inner:rgba(255,255,255,.9);          /* innenliegender Licht-Rand */
  --glass-inner-lo:rgba(11,28,54,.10);         /* unterer Schatten-Rand */
  --glass-shadow:
        0 22px 50px -26px rgba(0,30,61,.42),
        0 6px 18px -10px rgba(0,44,89,.18);
  --glass-sheen:rgba(255,255,255,.55);         /* specular Highlight-Farbe */

  /* dunkles Glas (auf Navy-Sektion) */
  --glass-fill-dark:rgba(18,40,74,.46);
  --glass-fill-dark-strong:rgba(14,32,62,.66);
  --glass-border-dark:rgba(173,200,233,.28);
  --glass-inner-dark:rgba(190,214,245,.32);
}

/* ---------------------------------------------------------------------------
   G1. BODY-GRUND — reicher, leicht farbiger Verlauf, damit atmo + Mesh wirken
   Body ist NICHT mehr flach deckend: ein weicher, farbiger Mehrlagen-Wash, der
   den fixen atmo-Canvas (dahinter) durchscheinen lässt, aber selbst Charakter
   trägt (Indigo oben, Teal-Hauch, Gold-Wärme unten). Fixed attachment = ruhig.
   --------------------------------------------------------------------------- */
body{
  background-color:#F4F1EA;
  background-image:
    radial-gradient(62% 48% at 82% -6%, rgba(43,79,158,.16), transparent 60%),
    radial-gradient(54% 46% at 6% 14%, rgba(14,138,125,.10), transparent 58%),
    radial-gradient(70% 60% at 50% 118%, rgba(201,162,107,.14), transparent 62%),
    linear-gradient(180deg, #F7F4ED 0%, #F1ECE2 52%, #EFE9DD 100%);
  background-attachment:fixed;
}
/* Wenn der atmo-Canvas vorhanden ist: Body-Wash leicht zurücknehmen,
   damit der animierte Canvas an den offenen Stellen sichtbarer wird. */
html.has-atmo body{
  background-color:transparent;
  background-image:
    radial-gradient(60% 46% at 82% -6%, rgba(43,79,158,.12), transparent 60%),
    radial-gradient(66% 56% at 50% 120%, rgba(201,162,107,.10), transparent 62%),
    linear-gradient(180deg, rgba(247,244,237,.86) 0%, rgba(241,236,226,.80) 54%, rgba(239,233,221,.84) 100%);
}

/* Der fremde atmo-Canvas sitzt fix bei z-index:-1; unser .ambient liegt bei -2.
   Sicherstellen, dass nichts den Canvas verdeckt: Sektionen werden unten gezielt
   transluzent gemacht statt flächig deckend. */
#atmo{position:fixed;inset:0;z-index:-1;pointer-events:none;}

/* ---------------------------------------------------------------------------
   G2. LIQUID-GLASS-MATERIAL — wiederverwendbar, lichtreaktiv
   .glass = Basis · .glass--card = Inhaltskarte · .glass--nav = Navigationspille
   Aufbau (Tiefe): Fill + backdrop-blur/saturate · innenliegender Licht-Rand
   (inset highlight oben, Schatten unten) · zarte Außenkante · getönter Schatten ·
   Iris-Schimmer-Kante · specular Sheen, der dem Pointer folgt (--gx/--gy).
   backdrop-filter NUR hier (begrenzte Flächen) — nie auf Scrollcontainer.
   --------------------------------------------------------------------------- */
.glass{
  --gx:50%; --gy:0%;
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(180deg, var(--glass-tint), transparent 60%),
    var(--glass-fill);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:
    inset 0 1px 0 0 var(--glass-inner),
    inset 0 -1px 0 0 var(--glass-inner-lo),
    var(--glass-shadow);
}
.glass--strong{background:linear-gradient(180deg, var(--glass-tint), transparent 60%), var(--glass-fill-strong);}

/* Iris-Schimmer-Kante (zarter Spektral-Rand) — sehr dezent, edel */
.glass::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;z-index:3;
  background:var(--iris);
  opacity:.5;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .5s var(--ease);
}
/* specular Sheen — heller, weicher Lichtfleck, folgt dem Pointer (JS --gx/--gy) */
.glass::after{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:1;
  background:radial-gradient(160px 160px at var(--gx) var(--gy),
            var(--glass-sheen), transparent 64%);
  opacity:0;transition:opacity .45s var(--ease);
  mix-blend-mode:screen;
}
.glass.is-lit::after{opacity:.9;}
.glass.is-lit::before{opacity:.85;}

/* Inhalt über Sheen/Iris halten */
.glass > *{position:relative;z-index:2;}

/* Glas-Button-Variante */
.btn--glass{
  --gx:50%; --gy:50%;
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--navy);
  background:linear-gradient(180deg, rgba(255,255,255,.6), var(--glass-fill));
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 0 var(--glass-inner), inset 0 -1px 0 var(--glass-inner-lo), var(--sh-sm);
  border:1px solid var(--glass-border);
}
.btn--glass:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.72), var(--glass-fill-strong));
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 var(--glass-inner-lo), var(--sh-md);
  transform:translateY(-2px);
}

/* Glas auf dunklem Navy-Grund (umgekehrte Lichtführung) */
.section--navy .glass,
.glass--dark{
  background:linear-gradient(180deg, rgba(120,160,220,.10), transparent 60%), var(--glass-fill-dark);
  border-color:var(--glass-border-dark);
  box-shadow:
    inset 0 1px 0 0 var(--glass-inner-dark),
    inset 0 -1px 0 0 rgba(0,0,0,.18),
    0 26px 56px -28px rgba(0,12,30,.7);
}
.section--navy .glass::after,.glass--dark::after{
  background:radial-gradient(160px 160px at var(--gx) var(--gy), rgba(173,200,233,.5), transparent 64%);
}

/* ---------------------------------------------------------------------------
   G3. NAV — schwebende Liquid-Glass-Bar (Apple-like)
   Im gestuckten Zustand wird die Nav zu einer echten Milchglas-Leiste mit
   Iris-Kante + Pointer-Sheen; specular via --gx/--gy (JS).
   --------------------------------------------------------------------------- */
.nav.is-stuck{
  --gx:50%; --gy:0%;
  isolation:isolate;
  /* EINZIGE Glasfläche mit backdrop-filter: kleine, fixierte Nav-Leiste.
     Moderater Blur (16px) -> frosted Look ohne Scroll-Jank (bounded GPU-Kosten). */
  background:linear-gradient(180deg, rgba(255,255,255,.55), var(--glass-fill-strong));
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-inner),
    0 14px 34px -24px rgba(0,30,61,.55);
}
.nav.is-stuck::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(220px 120px at var(--gx) var(--gy), rgba(255,255,255,.5), transparent 70%);
  opacity:0;transition:opacity .4s var(--ease);mix-blend-mode:screen;
}
.nav.is-stuck.is-lit::after{opacity:.8;}
/* feine Iris-Hairline am unteren Nav-Rand */
.nav.is-stuck::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent, rgba(94,127,208,.5) 30%, rgba(201,162,107,.5) 70%, transparent);
  opacity:.7;
}

/* ---------------------------------------------------------------------------
   G4. KARTEN .svc / .loc — von deckendem Weiß zu Liquid-Glass
   Holo-Tilt/Spotlight (E6) bleibt erhalten; wir tauschen nur Fill+Material.
   Glas sichert Kontrast: hinter dem Text liegt deckendes Frosted-Glas.
   --------------------------------------------------------------------------- */
.svc,.loc{
  --gx:50%; --gy:0%;
  /* PERFORMANCE: kein backdrop-filter (viele Karten scrollen durch den Viewport).
     Transluzenter Fill + Iris-Kante + Innenlicht erhalten den Glas-Look ohne Jank. */
  background:
    linear-gradient(180deg, var(--glass-tint), transparent 58%),
    var(--glass-fill-nb-strong);
  border:1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-inner),
    inset 0 -1px 0 var(--glass-inner-lo),
    var(--sh-sm);
}
/* specular Sheen über der Karte (zusätzlich zum Holo-Spotlight aus E6) */
.svc .glass-sheen,.loc .glass-sheen{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(170px 170px at var(--gx,50%) var(--gy,0%), var(--glass-sheen), transparent 62%);
  opacity:0;transition:opacity .4s var(--ease);mix-blend-mode:screen;
}
.svc.is-lit .glass-sheen,.loc.is-lit .glass-sheen,
.svc:hover .glass-sheen,.loc:hover .glass-sheen{opacity:.85;}
.svc:hover,.svc:focus-visible,.loc:hover{
  background:linear-gradient(180deg, var(--glass-tint), transparent 58%), var(--glass-fill-nb-strong);
  border-color:var(--glass-border);
}
/* Icon-Kachel bekommt Glas-Optik + farbigen Akzent */
.svc__ico{
  background:linear-gradient(150deg, rgba(43,79,158,.14), rgba(14,138,125,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.svc:hover .svc__ico{
  background:linear-gradient(150deg, var(--navy), var(--indigo));
  color:var(--paper);
}

/* Dunkle Sektion: Karten als dunkles Glas (no-blur, deckend genug für Kontrast) */
.section--navy .svc,.section--navy .loc{
  background:linear-gradient(180deg, rgba(120,160,220,.1), transparent 60%), var(--glass-fill-dark-nb);
  border-color:var(--glass-border-dark);
  box-shadow:inset 0 1px 0 var(--glass-inner-dark), 0 24px 54px -28px rgba(0,12,30,.6);
}

/* ---------------------------------------------------------------------------
   G5. KONTAKT-NAP / STATS / FAQ — Glas-Panels
   --------------------------------------------------------------------------- */
.contact__nap{
  --gx:50%; --gy:0%;
  isolation:isolate;
  /* PERFORMANCE: kein backdrop-filter; transluzenter Fill hält den Glas-Look. */
  background:linear-gradient(180deg, var(--glass-tint), transparent 55%), var(--glass-fill-nb-strong);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-inner), inset 0 -1px 0 var(--glass-inner-lo), var(--glass-shadow);
}
.contact__nap::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(180px 180px at var(--gx) var(--gy), var(--glass-sheen), transparent 62%);
  opacity:0;transition:opacity .45s var(--ease);mix-blend-mode:screen;
}
.contact__nap.is-lit::after{opacity:.85;}
.contact__nap > *{position:relative;z-index:1;}

/* FAQ als zusammenhängendes Glas-Panel (Lesbarkeit gesichert) */
.faq{
  isolation:isolate;
  /* PERFORMANCE: kein backdrop-filter; transluzenter Fill hält den Glas-Look. */
  background:linear-gradient(180deg, var(--glass-fill-nb-strong), var(--glass-fill-nb));
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 var(--glass-inner), var(--glass-shadow);
  padding:clamp(8px,1.4vw,20px) clamp(16px,2.4vw,30px);
}
.faq__item:last-child{border-bottom:0;}

/* Eingabefelder leicht milchig (passt zum Glas-Kontaktpanel) —
   PERFORMANCE: kein backdrop-filter (viele Felder); deckenderer Fill genügt. */
.field input,.field textarea,.field select{
  background:rgba(255,255,255,.86);
}

/* Mobile-Overlay = vollflächiges Liquid-Glass statt deckendem Creme */
.nav__overlay{
  background:linear-gradient(180deg, rgba(248,245,239,.86), rgba(241,236,226,.9));
  -webkit-backdrop-filter:blur(26px) saturate(1.6);
  backdrop-filter:blur(26px) saturate(1.6);
}

/* Stats-/Facts-Leiste als dezentes Glas-Panel (Zahlen bleiben kräftig) —
   PERFORMANCE: kein backdrop-filter; deckenderer transluzenter Fill statt Blur. */
.section--tight .facts{
  background:rgba(255,255,255,.55);
  border-color:var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-inner), var(--sh-sm);
}
.section--tight .fact{background:rgba(255,255,255,.66);}

/* ---------------------------------------------------------------------------
   G6. SECTION-DRAMA — transluzente Sektionen + animierte thematische BGs
   Grundsatz: Sektionen werden von voll deckendem Creme zu transluzenten
   Farb-Glasflächen, sodass der atmo-Canvas + Mesh durchwirken. Jede Sektion
   trägt einen eigenen, langsam wandernden Mesh-/Conic-Gradient als ::before
   (z-index hinter dem Inhalt). Animiert werden NUR transform/opacity bzw.
   background-position — gedeckelt, offscreen pausiert (.atmo-live), rm-statisch.
   Inhalt liegt darüber; Textblöcke sitzen auf Glas (s. .glass / Karten).
   --------------------------------------------------------------------------- */

/* Sektionen brauchen einen Stacking-Context + Inhalt über dem BG-Layer.
   overflow:clip verhindert, dass die skalierten Mesh-Pseudoelemente (transform:scale)
   horizontale Seitenbreite erzeugen — KEIN Overflow, kein Scroll-Container-Effekt. */
.section{isolation:isolate;overflow:clip;}
.section > .wrap{position:relative;z-index:2;}

/* Helle Sektionen: Fill von deckend -> transluzent, damit atmo durchscheint.
   Genug Grund-Deckung, dass Text lesbar bleibt; offene Zonen (Ränder, hinter
   Karten) lassen den animierten Hintergrund dennoch klar durchwirken. */
.section--paper{background:rgba(240,234,224,.62);}
.section--surface{background:rgba(252,250,246,.58);}
html.has-atmo .section--paper{background:rgba(240,234,224,.34);}
html.has-atmo .section--surface{background:rgba(252,250,246,.32);}

/* READABILITY-SCRIM — lokaler, weicher Glas-Wash hinter Textclustern.
   Sichert AA-Kontrast auch über kräftigem atmo, ohne die Sektion flächig
   deckend zu machen. Wandert mit dem Inhalt (kein backdrop-filter -> günstig). */
.section:not(.section--navy) .section__head,
.section:not(.section--navy) .prose{
  position:relative;
}
.section:not(.section--navy) .section__head::before,
.section:not(.section--navy) .prose::before{
  content:"";
  position:absolute;
  inset:-14px -22px -14px -22px;
  z-index:-1;
  border-radius:var(--r-lg);
  background:radial-gradient(120% 100% at 0% 30%,
            rgba(248,245,239,.92), rgba(248,245,239,.62) 56%, rgba(248,245,239,0) 88%);
}
.section__head--center::before{
  background:radial-gradient(120% 110% at 50% 40%,
            rgba(248,245,239,.92), rgba(248,245,239,.6) 56%, rgba(248,245,239,0) 88%)!important;
}
/* Feldlabels über atmo absichern (kleiner Halo) */
.section:not(.section--navy) .field label{
  text-shadow:0 1px 6px rgba(248,245,239,.9), 0 0 2px rgba(248,245,239,.9);
}

/* Gemeinsamer animierter Mesh-Layer pro Sektion (Basis) —
   gilt für ALLE hellen Sektionen (auch auf leistungen/kanzlei ohne ID).
   Default-Themen-Mesh (Indigo/Teal/Gold), id-spezifische Regeln überschreiben. */
.section--paper::before,
.section--surface::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;
  background:
    radial-gradient(40% 50% at 20% 24%, rgba(43,79,158,.17), transparent 60%),
    radial-gradient(38% 46% at 82% 30%, rgba(14,138,125,.15), transparent 60%),
    radial-gradient(44% 52% at 60% 96%, rgba(201,162,107,.15), transparent 62%);
  background-size:165% 165%;
  background-position:0% 0%;
  opacity:.78;
}
/* Rhythmuswechsel: jede zweite helle Sektion bekommt eine andere Drift/Iris-Tönung */
.section--surface::before{
  background:
    radial-gradient(42% 50% at 84% 18%, rgba(201,162,107,.18), transparent 60%),
    radial-gradient(40% 48% at 10% 80%, rgba(43,79,158,.15), transparent 60%),
    radial-gradient(38% 44% at 50% 50%, rgba(109,90,230,.10), transparent 64%);
}
/* will-change NUR auf den aktiv driftenden (sichtbaren) Sektionen -> spart Layer offscreen */
.section--paper.atmo-live::before{animation:meshDriftA 38s var(--ease) infinite alternate;will-change:transform,background-position;}
.section--surface.atmo-live::before{animation:meshDriftB 42s var(--ease) infinite alternate;will-change:transform,background-position;}

/* — LEISTUNGEN (#leistungen, .section--paper): Finanz/Wachstum —
   wandernde Indigo/Teal/Gold-Mesh-Blobs (Geld & Aufschwung) */
#leistungen{position:relative;}
#leistungen::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 50% at 18% 22%, rgba(43,79,158,.22), transparent 60%),
    radial-gradient(36% 46% at 84% 30%, rgba(14,138,125,.20), transparent 60%),
    radial-gradient(46% 54% at 60% 96%, rgba(201,162,107,.18), transparent 62%);
  background-size:160% 160%;
  background-position:0% 0%;
  opacity:.85;
}
#leistungen.atmo-live::before{animation:meshDriftA 30s var(--ease) infinite alternate;}

/* — STANDORTE (#standorte): Ordnung/Verbindung — diagonale Indigo-Ströme */
#standorte{position:relative;}
#standorte::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 50% at 80% 18%, rgba(43,79,158,.18), transparent 60%),
    radial-gradient(40% 46% at 12% 80%, rgba(109,90,230,.14), transparent 60%),
    conic-gradient(from 210deg at 50% 50%, rgba(63,121,180,.05), rgba(14,138,125,.07), rgba(201,162,107,.05), rgba(63,121,180,.05));
  background-size:200% 200%, 200% 200%, 140% 140%;
  background-position:0% 0%;
  opacity:.8;
}
#standorte.atmo-live::before{animation:meshDriftB 36s var(--ease) infinite alternate;}

/* — ABLAUF (#ablauf, .section--paper): ruhiger, Teal-/Gold-Hauch (Prozess) */
#ablauf::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 60% at 50% -8%, rgba(14,138,125,.14), transparent 60%),
    radial-gradient(40% 50% at 8% 100%, rgba(201,162,107,.14), transparent 62%);
  background-size:150% 150%;
  opacity:.8;
}
#ablauf.atmo-live::before{animation:meshDriftA 40s var(--ease) infinite alternate;}

/* — FAQ (#faq): dezent, kühl-klar (Klarheit) */
#faq::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(48% 52% at 88% 12%, rgba(43,79,158,.14), transparent 62%),
    radial-gradient(42% 48% at 6% 92%, rgba(14,138,125,.12), transparent 62%);
  background-size:160% 160%;
  opacity:.75;
}
#faq.atmo-live::before{animation:meshDriftB 44s var(--ease) infinite alternate;}

/* — KONTAKT (#kontakt, .section--surface): einladend, warm-gold + indigo */
#kontakt::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 54% at 84% 16%, rgba(201,162,107,.20), transparent 60%),
    radial-gradient(44% 50% at 10% 88%, rgba(43,79,158,.18), transparent 60%),
    radial-gradient(40% 44% at 50% 50%, rgba(14,138,125,.10), transparent 64%);
  background-size:170% 170%;
  opacity:.85;
}
#kontakt.atmo-live::before{animation:meshDriftA 34s var(--ease) infinite alternate;}

@keyframes meshDriftA{
  0%{background-position:0% 0%, 100% 0%, 50% 100%;transform:translate3d(0,0,0) scale(1.02);}
  100%{background-position:30% 40%, 70% 30%, 40% 60%;transform:translate3d(-1.5%,1%,0) scale(1.06);}
}
@keyframes meshDriftB{
  0%{background-position:0% 0%, 100% 100%, 0% 0%;transform:translate3d(0,0,0) scale(1.03);}
  100%{background-position:40% 30%, 60% 70%, 60% 40%;transform:translate3d(1.5%,-1%,0) scale(1.07);}
}

/* ---------------------------------------------------------------------------
   G7. NAVY-SEKTION (#kanzlei) — dramatischer, lebendiger, mit Aurora-Mesh
   Reicher Indigo/Teal/Violett-Aurora-Schimmer über dem tiefen Navy; bleibt
   seriös (gedämpft), aber „es passiert was". Inhalt/Karten = dunkles Glas.
   --------------------------------------------------------------------------- */
.section--navy{
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(94,127,208,.30), transparent 55%),
    radial-gradient(90% 80% at 0% 110%, rgba(14,138,125,.22), transparent 55%),
    linear-gradient(180deg, #012A53 0%, var(--navy) 60%, #002247 100%);
}
.section--navy::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 26%, rgba(94,127,208,.28), transparent 62%),
    radial-gradient(34% 42% at 82% 22%, rgba(63,182,167,.22), transparent 62%),
    radial-gradient(40% 48% at 60% 92%, rgba(154,140,242,.18), transparent 62%),
    radial-gradient(30% 38% at 30% 80%, rgba(201,162,107,.16), transparent 62%);
  background-size:180% 180%;
  opacity:.9;mix-blend-mode:screen;
}
.section--navy.atmo-live::before{animation:auroraDrift 28s var(--ease) infinite alternate;will-change:transform,background-position;}
@keyframes auroraDrift{
  0%{background-position:0% 0%, 100% 0%, 50% 100%, 30% 80%;transform:translate3d(0,0,0) scale(1.04);}
  100%{background-position:35% 45%, 65% 35%, 40% 60%, 60% 50%;transform:translate3d(2%,-1.5%,0) scale(1.1);}
}
.section--navy > .wrap{position:relative;z-index:2;}

/* ---------------------------------------------------------------------------
   G8. THEMATISCHE AKZENTE — fließende „Daten/Ordnung"-Linien (dezent)
   Eine feine, langsam fließende horizontale Lichtlinie in einigen Sektionen,
   die thematisch Ordnung/Bilanz andeutet. Rein dekorativ, pointer-events:none.
   --------------------------------------------------------------------------- */
.section--paper::after,
.section--surface::after{
  content:"";
  position:absolute;left:0;right:0;top:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent, rgba(43,79,158,.0), rgba(43,79,158,.45) 40%, rgba(201,162,107,.4) 60%, transparent);
  background-size:240% 100%;
  opacity:.5;
}
.section--paper.atmo-live::after,
.section--surface.atmo-live::after{animation:lineFlow 14s linear infinite;}
@keyframes lineFlow{0%{background-position:0% 0;}100%{background-position:240% 0;}}

/* ---------------------------------------------------------------------------
   G9. HERO — atmo dezent halten (3D-Wappen nicht überladen)
   Der Hero behält seinen warmen Wash; wir lassen den atmo-Canvas nur ganz
   leicht durch, damit das 3D-Wappen + die Headline klar führen.
   --------------------------------------------------------------------------- */
.hero::before{
  /* etwas reicher, aber ruhig — Indigo-/Teal-Hauch ergänzt den Papier-Wash */
  background:
    radial-gradient(58% 58% at 78% 16%, rgba(94,127,208,.18), transparent 60%),
    radial-gradient(46% 52% at 8% 92%, rgba(201,162,107,.14), transparent 60%),
    radial-gradient(40% 44% at 88% 86%, rgba(14,138,125,.10), transparent 62%),
    linear-gradient(180deg, rgba(250,248,243,.92) 0%, rgba(242,238,230,.88) 100%);
}
html.has-atmo .hero::before{
  background:
    radial-gradient(58% 58% at 78% 16%, rgba(94,127,208,.14), transparent 60%),
    radial-gradient(46% 52% at 8% 92%, rgba(201,162,107,.12), transparent 60%),
    linear-gradient(180deg, rgba(250,248,243,.7) 0%, rgba(242,238,230,.6) 100%);
}

/* ---------------------------------------------------------------------------
   G10. REDUCED MOTION — animierte BGs/Sheen EINFRIEREN, Glas + Inhalt bleiben
   Glas bleibt (statisch), Texte voll sichtbar/lesbar; keine Bewegung.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #leistungen::before,#standorte::before,#ablauf::before,#faq::before,#kontakt::before,
  .section--navy::before,
  .section--paper::after,.section--surface::after{
    animation:none!important;
  }
  .glass::after,.glass::before,
  .svc .glass-sheen,.loc .glass-sheen,
  .contact__nap::after,.nav.is-stuck::after{
    transition:none!important;
  }
  /* Sheen-States neutralisieren, falls vom JS gesetzt */
  .glass.is-lit::after,.svc.is-lit .glass-sheen,.loc.is-lit .glass-sheen,
  .contact__nap.is-lit::after,.nav.is-stuck.is-lit::after{opacity:0!important;}
  /* Body-Wash statisch (kein fixed-attachment-Jank bei rm) */
  body{background-attachment:scroll;}
}

/* ---------------------------------------------------------------------------
   G11. MOBIL / PERFORMANCE — schwere Effekte reduziert, kein Jank/Overflow
   backdrop-filter mobil reduziert; animierte Section-BGs ruhiger; Glas-Fill
   etwas deckender als Fallback (Lesbarkeit auf kleinen Screens).
   --------------------------------------------------------------------------- */
@media (max-width:760px){
  :root{
    --glass-blur:13px;
    --glass-fill:rgba(252,250,246,.74);
    --glass-fill-strong:rgba(252,250,246,.9);
    /* No-blur-Fills mobil etwas deckender (Lesbarkeit ohne Blur) */
    --glass-fill-nb:rgba(252,250,246,.88);
    --glass-fill-nb-strong:rgba(252,250,246,.95);
    --glass-fill-dark-nb:rgba(16,36,68,.9);
  }
  /* Section-Mesh-BGs ruhiger + leichter (weniger GPU) */
  #leistungen::before,#standorte::before,#ablauf::before,#faq::before,#kontakt::before{
    opacity:.6;animation-duration:48s;
  }
  .section--navy::before{opacity:.7;}
  /* Pointer-Sheen ist mobil ohnehin aus; .svc/.loc glass-sheen bleibt für den Reveal-Sweep */
  .glass::after,.contact__nap::after,.nav.is-stuck::after{display:none;}
  /* PERFORMANCE: backdrop-filter mobil KOMPLETT aus (iOS-Sticky-Nav-Jank).
     Deckende Fallback-Fills statt Blur; Glas-Look bleibt über Fill + Innenlicht. */
  .nav.is-stuck{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(250,248,243,.94); }
  .nav__overlay{ -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(180deg, rgba(248,245,239,.98), rgba(241,236,226,.99)); }
  /* fixed-attachment kann auf iOS ruckeln -> scroll */
  body{background-attachment:scroll;}
}

/* Geräte ohne backdrop-filter-Support: deckendere Fallback-Fills (Lesbarkeit) */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root{
    --glass-fill:rgba(250,248,243,.96);
    --glass-fill-strong:rgba(250,248,243,.99);
    --glass-fill-dark:rgba(8,24,48,.92);
    --glass-fill-dark-strong:rgba(6,20,42,.96);
  }
  .nav.is-stuck{background:rgba(250,248,243,.97);}
  .nav__overlay{background:var(--paper);}
  .field input,.field textarea,.field select{background:var(--surface);}
}

/* ---------------------------------------------------------------------------
   G12. FÖRDER-GRAFIK & FOOTER — unverändert lassen (nur sicherstellen, dass das
   Förder-Streifen-Bild voll deckend/lesbar bleibt; Footer behält Navy-Boden).
   --------------------------------------------------------------------------- */
.foerder img{background:#fff;}

/* ---------------------------------------------------------------------------
   G13. PERFORMANCE — content-visibility für große, weit-offscreen Bereiche
   Der Footer liegt immer weit unter dem Viewport und hat keine Scrollspy-/
   Anker-Abhängigkeit -> Rendering offscreen überspringen spart Layout/Paint.
   contain-intrinsic-size passt zur gemessenen Höhe (~778px) -> KEIN Sprung/CLS.
   Bewusst NICHT auf Hero/Anker-Sektionen (Scrollspy/Reveals brauchen sie sicht-
   bar planbar); animationen bleiben transform/opacity. rm bleibt unberührt.
   --------------------------------------------------------------------------- */
.footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 780px;
}

/* ============================================================================
   ████  VORTEILE — animiertes „Liquidität & Planung"-Diagramm + Benefits  ████
   WOW-Kern: SVG-Linie zeichnet sich (stroke-dashoffset), Fläche faded in,
   Datenpunkte poppen gestaffelt, KPI zählt hoch, Vorausschau-Zone markiert.
   PERFORMANCE: EINMALIGE Animation beim Scroll-In (.is-drawn via IO, dann Ruhe).
   Nur transform/opacity bzw. SVG stroke-dashoffset. reduced-motion => Endzustand.
   Kein CLS: Plot hat feste aspect-ratio. Kein rAF-Loop.
   ============================================================================ */

/* — Layout: zwei Spalten (Diagramm | Benefits), mobil gestapelt — */
.vt-layout{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(22px,3vw,46px);
  align-items:start;
}

/* — DIAGRAMM-KARTE (Liquid-Glass, mit eigenem Innenlicht) — */
.vt-chart{
  --gx:50%; --gy:0%;
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2vw,22px);
  padding:clamp(20px,2.6vw,34px);
  margin:0;
  overflow:hidden;
}
.vt-chart__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s-4);
}
.vt-chart__eyebrow{
  display:block;
  font-size:var(--t-eyebrow);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--clay-2);
  margin-bottom:6px;
}
.vt-chart__title{
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-h5);
  line-height:1.18;
  letter-spacing:-.01em;
  color:var(--ink-strong);
}
/* „illustrativ"-Label — ehrliche Kennzeichnung */
.vt-tag{
  flex:none;
  display:inline-flex;align-items:center;
  padding:5px 11px;
  font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
  background:rgba(255,255,255,.5);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  white-space:nowrap;
  cursor:help;
}

/* — PLOT: feste aspect-ratio => kein Layout-Shift — */
.vt-chart__plot{
  position:relative;
  width:100%;
  aspect-ratio:720 / 340;
}
.vt-svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  overflow:visible;
}

/* Baseline-Raster — sehr dezent */
.vt-grid line{
  stroke:var(--line-soft);
  stroke-width:1;
  stroke-dasharray:2 6;
  vector-effect:non-scaling-stroke;
}

/* Vorausschau-Zone (Ist/Prognose-Trennung) */
.vt-fc{
  fill:rgba(201,162,107,.07);
  opacity:0;
  transition:opacity .9s var(--ease) .9s;
}
.vt-chart.is-drawn .vt-fc{opacity:1;}
.vt-divider{
  stroke:var(--gold-2);
  stroke-width:1.25;
  stroke-dasharray:3 5;
  vector-effect:non-scaling-stroke;
  opacity:0;
  transition:opacity .7s var(--ease) 1s;
}
.vt-chart.is-drawn .vt-divider{opacity:.55;}

/* Fläche unter der Kurve — Gold-Verlauf, faded in */
.vt-area{
  fill:url(#vtArea);
  opacity:0;
  transform:translateY(10px);
  transition:opacity 1s var(--ease-out) .35s,
             transform 1.1s var(--ease-out) .35s;
}
.vt-chart.is-drawn .vt-area{opacity:1;transform:none;}

/* Hauptlinie — zeichnet sich via stroke-dashoffset */
.vt-line{
  fill:none;
  stroke:url(#vtLine);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 6px 14px rgba(0,44,89,.18));
  stroke-dasharray:var(--vt-len, 1400);
  stroke-dashoffset:var(--vt-len, 1400);
  transition:stroke-dashoffset 1.7s var(--ease-cine) .1s;
}
.vt-chart.is-drawn .vt-line{stroke-dashoffset:0;}

/* Datenpunkte — poppen gestaffelt (scale 0.4 -> 1, nie aus scale(0)) */
.vt-dots circle{
  fill:var(--surface);
  stroke:var(--navy);
  stroke-width:2.5;
  opacity:0;
  transform:scale(.4);
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .5s var(--ease-out),
             transform .6s var(--ease-spring);
  transition-delay:calc(.7s + var(--i,0) * .13s);
}
.vt-dots .vt-dot--key{
  fill:var(--gold);
  stroke:var(--gold-2);
  filter:drop-shadow(0 0 0 rgba(201,162,107,.5));
}
.vt-chart.is-drawn .vt-dots circle{opacity:1;transform:none;}

/* Monatsachse */
.vt-axis{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  margin-top:10px;
  padding-inline:calc(40/720 * 100%) calc(20/720 * 100%);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
.vt-axis span{text-align:center;}

/* Fuß: KPI-Count-up + Legende */
.vt-chart__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3) var(--s-5);
  padding-top:clamp(12px,1.6vw,18px);
  border-top:1px solid var(--line);
}
.vt-kpi{
  display:inline-flex;
  align-items:baseline;
  gap:9px;
  font-size:var(--t-small);
  color:var(--muted);
}
.vt-kpi b{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--navy),var(--navy-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.vt-legend{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  font-size:var(--t-small);color:var(--muted);
}
.vt-legend i{
  display:inline-block;width:16px;height:3px;border-radius:2px;
  margin-right:2px;vertical-align:middle;
}
.vt-legend__ist{background:linear-gradient(90deg,var(--navy),var(--gold-2));}
.vt-legend__fc{background:repeating-linear-gradient(90deg,var(--gold-2) 0 3px,transparent 3px 7px);}

/* — BENEFIT-LISTE — */
.vt-benefits{
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.4vw,14px);
  justify-content:center;
}
.vt-benefit{
  position:relative;
  display:flex;
  gap:clamp(14px,1.6vw,18px);
  padding:clamp(15px,1.7vw,20px) clamp(16px,1.8vw,22px);
  background:linear-gradient(180deg, var(--glass-tint), transparent 60%), var(--glass-fill-nb);
  border:1px solid var(--glass-border);
  border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 var(--glass-inner), var(--sh-xs);
  transition:transform .4s var(--ease-spring),
             box-shadow .4s var(--ease),
             border-color .4s var(--ease);
}
.vt-benefit:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 var(--glass-inner), var(--sh-md);
  border-color:var(--line-strong);
}
.vt-benefit__ico{
  flex:none;
  display:grid;place-items:center;
  width:46px;height:46px;
  border-radius:var(--r-sm);
  background:linear-gradient(150deg, rgba(43,79,158,.14), rgba(201,162,107,.16));
  color:var(--navy);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.vt-benefit__ico svg{width:23px;height:23px;}
.vt-benefit:hover .vt-benefit__ico{
  background:linear-gradient(150deg, var(--navy), var(--gold-2));
  color:var(--paper);
}
.vt-benefit__title{
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-h6);
  line-height:1.22;
  color:var(--ink-strong);
  margin-bottom:5px;
}
.vt-benefit__text{
  font-size:var(--t-small);
  color:var(--muted);
  line-height:1.55;
}

/* — KENNZAHLEN-PAAR — */
.vt-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  margin-top:4px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.vt-stat{
  background:rgba(255,255,255,.55);
  padding:clamp(15px,1.7vw,20px) clamp(16px,1.8vw,22px);
}
.vt-stat b{
  display:block;
  white-space:nowrap;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(1.9rem,1.4rem + 1.6vw,2.5rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--navy),var(--navy-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.vt-stat b .fact__suffix{
  display:inline;margin-top:0;
  font-size:.5em;color:var(--clay-2);margin-left:1px;vertical-align:.16em;
  white-space:nowrap;
  -webkit-text-fill-color:var(--clay-2);
}
.vt-stat span{
  display:block;
  margin-top:9px;
  font-size:var(--t-small);
  color:var(--muted);
  line-height:1.42;
}

/* — RESPONSIVE — */
@media (max-width:920px){
  .vt-layout{grid-template-columns:1fr;gap:clamp(20px,4vw,30px);}
}
@media (max-width:520px){
  .vt-chart__head{flex-direction:row;}
  .vt-stats{grid-template-columns:1fr;}
  .vt-benefit{gap:13px;}
  .vt-axis{font-size:.58rem;}
}

/* — REDUCED MOTION: sofort Endzustand, kein Draw/Pop — */
@media (prefers-reduced-motion:reduce){
  .vt-line{stroke-dashoffset:0!important;transition:none!important;}
  .vt-area{opacity:1!important;transform:none!important;transition:none!important;}
  .vt-dots circle{opacity:1!important;transform:none!important;transition:none!important;}
  .vt-fc,.vt-divider{transition:none!important;}
  .vt-fc{opacity:1!important;}
  .vt-divider{opacity:.55!important;}
  .vt-benefit{transition:none!important;}
}

/* ============================================================================
   ████  KLARHEIT — Signature-Scroll-Sequenz „Aus Komplexität wird Klarheit" ████
   Gepinntes, dunkles Navy-Interlude. Beleg-/Zahlen-Kacheln driften ungeordnet
   und gleiten — scroll-gesteuert über --p (0→1, von main.js gesetzt) — in ein
   ruhiges Raster. Headline zündet von „Komplexität" zu „Klarheit" (Gold).
   Bewegung ausschließlich via transform/opacity (GPU). Mobil + reduced-motion:
   kein Pin, statischer Endzustand (Raster geordnet). Kacheln-Transform setzt
   main.js DIREKT pro Element (kein vererbtes Var-Recalc über --p).
   ============================================================================ */
.clarity{
  --p:0;                       /* Scroll-Fortschritt, 0..1 (von initClarity) */
  position:relative;
  background:var(--navy);
  color:var(--on-navy);
  background-image:
    radial-gradient(120% 90% at 82% -6%, rgba(127,166,196,.20), transparent 56%),
    radial-gradient(96% 86% at 4% 108%, rgba(201,162,107,.16), transparent 58%);
  isolation:isolate;            /* eigener Stacking-Context, sauber über atmo/ambient */
}
/* Desktop: gepinnt — Section ist hoch, .clarity__sticky klebt für den Scrub
   (200vh = 100vh Sticky + 100vh Scrub-Strecke für die Chaos→Raster-Auflösung) */
.clarity{height:200vh;}   /* gepinnt (Desktop + Mobil); reduced-motion setzt auto */
.clarity__sticky{
  position:sticky;
  top:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(26px,4vw,52px);
  padding-block:clamp(64px,9vh,120px);
  overflow:hidden;
}

/* — Copy-Cluster (zentriert, über der Stage) — */
.clarity__copy{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:64ch;
  padding-inline:clamp(20px,5vw,40px);
}
.clarity .eyebrow{color:var(--gold-soft);justify-content:center;}
.clarity .eyebrow::before{background:var(--gold);}
.clarity__title{
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-h2);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--on-navy);
  text-wrap:balance;
}
.clarity__w{font-style:italic;position:relative;white-space:nowrap;}
/* „Komplexität" hell → verblasst, während Ordnung entsteht */
.clarity__w--from{
  color:var(--on-navy);
  opacity:calc(1 - var(--p) * .58);
  filter:blur(calc(var(--p) * 1.4px));
  transition:opacity .2s linear, filter .2s linear;
}
/* „Klarheit" gedämpft → zündet in Gold */
.clarity__w--to{
  color:var(--on-navy-muted);                                   /* Fallback */
  color:color-mix(in srgb, var(--gold-soft) calc(var(--p) * 100%), var(--on-navy-muted));
  text-shadow:0 0 calc(var(--p) * 26px) var(--gold-glow);
  transition:color .2s linear, text-shadow .2s linear;
}
/* Unterstrich zeichnet sich mit dem Fortschritt */
.clarity__ul{
  position:absolute;
  left:0;right:0;bottom:-.16em;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold-soft));
  box-shadow:0 0 12px var(--gold-glow);
  transform:scaleX(var(--p));
  transform-origin:left center;
}
.clarity__lead{
  margin-top:var(--s-5);
  margin-inline:auto;
  font-size:var(--t-lead);
  line-height:1.55;
  color:var(--on-navy-muted);
  max-width:54ch;
}

/* — STAGE: Kachel-Bühne (Kacheln injiziert main.js, absolut positioniert) — */
.clarity__stage{
  position:relative;
  z-index:1;
  width:min(900px,92vw);
  height:clamp(280px,44vh,440px);
  margin-inline:auto;
  pointer-events:none;
}
.clarity__stage:empty{display:none;}     /* ohne JS: nur das stille Statement */

.ctile{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);        /* Start; main.js überschreibt pro Frame */
  will-change:transform,opacity;
}
.ctile__face{
  display:inline-flex;
  align-items:center;
  gap:.5ch;
  padding:.5em .82em;
  border-radius:11px;
  font-family:var(--f-body);
  font-weight:600;
  font-size:clamp(.7rem,.62rem + .35vw,.86rem);
  letter-spacing:.005em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:var(--on-navy);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  border:1px solid var(--on-navy-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px -16px rgba(0,0,0,.7);
  /* sanftes, langsames Eigenleben (Schweben) — separat vom Progress-Transform */
  animation:ctileFloat var(--fdur,7s) var(--ease) infinite alternate;
  animation-delay:var(--fd,0s);
}
.ctile__dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--steel-lt);flex:none;opacity:.7;
}
/* Schlüssel-Kacheln: das „geordnete Ergebnis" — Gold, klar lesbar */
.ctile--key .ctile__face{
  color:var(--navy);
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  border-color:transparent;
  box-shadow:0 0 0 1px rgba(227,200,150,.6), 0 12px 30px -12px var(--gold-glow);
}
.ctile--key .ctile__dot{background:var(--navy);opacity:.55;}

@keyframes ctileFloat{
  from{transform:translateY(-3px);}
  to{transform:translateY(3px);}
}

/* — MOBIL: kein Pin, ruhiger statischer Auftritt (Stage = geordnetes Raster) — */
@media (max-width:900px){
  /* Mobil: gepinnt wie Desktop (Headline + Stage gestapelt; Chaos→Raster scrollt) */
  .clarity__sticky{gap:clamp(16px,4vw,28px);padding-block:clamp(36px,7vh,60px);}
  .clarity__stage{height:clamp(240px,56vw,360px);}
  .clarity__lead{font-size:var(--t-body);}
  .ctile__face{font-size:clamp(.62rem,.55rem + 1.1vw,.78rem);padding:.42em .66em;}
}

/* — REDUCED MOTION: kein Pin, kein Scrub, kein Schweben — Endzustand sofort — */
@media (prefers-reduced-motion:reduce){
  .clarity{--p:1;height:auto!important;}
  .clarity__sticky{position:static;min-height:auto;padding-block:var(--section-y);}
  .clarity__w--from{filter:none!important;transition:none!important;}
  .clarity__w--to,.clarity__ul{transition:none!important;}
  .ctile__face{animation:none!important;}
}

/* ============================================================================
   ████  ABLAUF — „Die Mandanten-Reise" (gold ziehender Faden + Schritt-Zündung) ████
   Erweitert die bestehende .steps-Geometrie: ein goldener Faden (.step::after,
   überlagert den vorhandenen gestrichelten Konnektor) zeichnet sich beim
   Aktivieren eines Schritts (scaleX, transform-origin links). Badges zünden in
   Gold. Aktivierung via IntersectionObserver (initJourney). Nur transform/color.
   reduced-motion: alle Schritte sofort aktiv. Mobil: nur Badge-Zündung.
   ============================================================================ */
.step__n{
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), transform .45s var(--ease-out),
             box-shadow .45s var(--ease);
}
.step__t{transition:color .45s var(--ease);}
/* Goldener Faden zum nächsten Schritt — überlagert den gestrichelten Konnektor */
.step::after{
  content:"";
  position:absolute;top:21px;left:48px;right:-16px;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold-soft));
  box-shadow:0 0 10px var(--gold-glow);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .65s var(--ease-out);
  pointer-events:none;
}
.step:last-child::after{display:none;}
.step.is-active::after{transform:scaleX(1);}
.step.is-active .step__n{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  border-color:transparent;color:var(--navy);
  transform:translateY(-3px) scale(1.045);
  box-shadow:0 0 0 4px rgba(201,162,107,.16), 0 12px 26px -12px var(--gold-glow);
}
.section--navy .step.is-active .step__n{color:var(--navy);}
.step.is-active .step__t{color:var(--clay-2);}
.section--navy .step.is-active .step__t{color:var(--gold-soft);}
/* Mobil/Tablet: kein horizontaler Faden (Geometrie passt nur im 4-Spalten-Raster) */
@media (max-width:920px){ .step::after{display:none;} }
@media (prefers-reduced-motion:reduce){
  .step__n,.step__t,.step::after{transition:none!important;}
}

/* ============================================================================
   ████  PULL-QUOTE — Editorial „Second-Read"-Moment (Wort-für-Wort Blur-Up) ████
   Der Markenclaim erscheint wortweise (translateY + Blur → scharf), das
   Schlüsselwort „kämpft" zündet in Gold. Wörter werden von initQuoteKinetic
   gewrappt (--i = Index für Stagger). reduced-motion: sofort sichtbar.
   ============================================================================ */
.qw{display:inline-block;}
.qw > span{
  display:inline-block;
  transform:translateY(.5em);
  opacity:0;
  filter:blur(5px);
  transition:transform .8s var(--ease-out), opacity .8s var(--ease-out), filter .8s var(--ease-out);
  transition-delay:calc(var(--i,0) * 60ms);
}
.quote.is-kin.in .qw > span{transform:none;opacity:1;filter:blur(0);}
.qw--gold > span{color:var(--gold-2);}
.section--navy .qw--gold > span{color:var(--gold-soft);text-shadow:0 0 22px var(--gold-glow);}
@media (prefers-reduced-motion:reduce){
  .qw > span{transform:none!important;opacity:1!important;filter:none!important;transition:none!important;}
}

/* ============================================================================
   ████  KANZLEI — Ambient-Foto (Higgsfield/nano_banana_pro, self-hosted)  ████
   Abstrakte Navy-Tinte + Messing-Licht hinter dem Pull-Quote. Dekorativer
   Layer unter dem Inhalt (.wrap = z-index:2). Nach links ausgeblendet (mask),
   Navy-Scrim sichert die Textlesbarkeit. Erst ab Tablet (Mobile-Performance).
   ============================================================================ */
.kanzlei-photo{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  display:none;                        /* mobil aus (Perf/Lesbarkeit) */
}
@media (min-width:768px){ .kanzlei-photo{display:block;} }
/* Das Foto — rechts platziert, nach links sanft ausgeblendet */
.kanzlei-photo::before{
  content:"";
  position:absolute;inset:0;
  background:url('../assets/kanzlei-ambient.jpg') center right / cover no-repeat;
  opacity:.55;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 34%, #000 62%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 34%, #000 62%);
}
/* Navy-Scrim — links kräftig (Text), rechts offen (Tinte/Licht scheint durch) */
.kanzlei-photo::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--navy) 6%, rgba(0,44,89,.35) 42%, rgba(0,44,89,0) 72%),
    linear-gradient(180deg, rgba(0,30,61,.45), rgba(0,30,61,.16) 45%, rgba(0,30,61,.62));
}

/* ============================================================================
   ████  HERO-PARALLAX — Textebene driftet gegenläufig zum 3D-Schild  ████
   initHeroParallax setzt das transform direkt (lerp). Eigene Ebene → echte
   Mehr-Ebenen-Tiefe zum Canvas-Schild (der eigenständig parallaxt). Nur
   fine-pointer + kein reduced-motion. Kollidiert NICHT mit der Hero-Entrance
   (die animiert die Kinder von .hero__copy, nicht den Container selbst).
   ============================================================================ */
@media (hover:hover) and (pointer:fine){
  .hero__copy{will-change:transform;}
}
@media (prefers-reduced-motion:reduce){
  .hero__copy{transform:none!important;}
}

/* ============================================================================
   ████  KANZLEI — Ambient-VIDEO (Seedance, self-hosted) über dem Still-Poster ████
   Video liegt in derselben Box wie .kanzlei-photo (Poster = das 4K-Still).
   Autoplay/muted/loop/playsinline; erst ab Tablet; reduced-motion → Poster.
   ============================================================================ */
.kanzlei-video{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center right;
  z-index:0;
  pointer-events:none;
  opacity:.55;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 34%, #000 62%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 34%, #000 62%);
  display:none;                        /* mobil aus; via JS/Media erst ab Tablet */
}
@media (min-width:768px){ .kanzlei-video{display:block;} }
/* Liegt das Video an, ist es der bewegte Layer; das Still bleibt als Poster darunter */
.kanzlei-video + .kanzlei-photo,
.kanzlei-photo.has-video::before{opacity:.55;}
@media (prefers-reduced-motion:reduce){
  .kanzlei-video{display:none!important;}   /* nur das ruhige Still */
}

/* ============================================================================
   ████  DARK-CINEMATIC HERO — tiefes Navy, Gold-Schild leuchtet, Text hell  ████
   .hero--dark macht den Hero zur dunklen Bühne; das 3D (hero3d.js) ist nun auf
   Dunkel getunt (Glow/Strahlen/Glut). Nav-Sichtbarkeit auf Dunkel via
   .has-dark-hero (Body-Flag, nur index). reduced-motion/Fallback bleiben lesbar.
   ============================================================================ */
.hero--dark{
  background:
    radial-gradient(120% 96% at 70% 40%, rgba(44,86,128,.36), transparent 56%),
    radial-gradient(70% 60% at 14% 6%, rgba(127,166,196,.14), transparent 60%),
    radial-gradient(90% 95% at 92% 98%, rgba(201,162,107,.18), transparent 58%),
    linear-gradient(180deg, #04223f 0%, var(--navy-deep) 58%, #03152c 100%);
  color:var(--on-navy);
}
.hero--dark .hero__title{color:var(--on-navy);}
.hero--dark .hero__title em{color:var(--gold-soft);font-style:italic;}
.hero--dark .hero__sub{color:var(--on-navy-muted);}
.hero--dark .eyebrow{color:var(--gold-soft);}
.hero--dark .eyebrow::before{background:var(--gold);}
.hero--dark .hero__trust{border-top-color:var(--on-navy-line);}
.hero--dark .hero__trust-item{color:var(--on-navy-muted);}
.hero--dark .hero__trust-item strong{color:var(--on-navy);}
.hero--dark .hero__trust-item svg{color:var(--gold-soft);}
.hero--dark .btn--ghost{color:var(--on-navy);box-shadow:inset 0 0 0 1.5px var(--on-navy-line);}
.hero--dark .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold-soft);background:rgba(255,255,255,.06);transform:translateY(-2px);}
/* Primär-CTA auf Dunkel: leuchtendes Gold (statt Navy-auf-Navy) */
.hero--dark .btn--primary{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  color:var(--navy-deep);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 16px 38px -18px var(--gold-glow);
}
.hero--dark .btn--primary:hover{background:linear-gradient(180deg,#f4dda9,var(--gold-soft));transform:translateY(-2px);}
/* Dunkler Vignetten-Scrim (statt Creme-Wash) — schützt linke Textspalte */
.hero--dark .hero__scrim{opacity:1;}
/* Higgsfield-Hero-Video als Vollbild-Hintergrund (Schild rechts, Text links) */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center right;
  z-index:0;pointer-events:none;
}
/* alte Fallback-Logo-Karte im Video-Hero ausblenden (Poster ist der Fallback) */
.hero--dark .hero__media{display:none;}

/* ============================================================================
   ████  SCHMIEDE DES SCHUTZES — scroll-gescrubbte Bildsequenz (forge.js)  ████
   Gepinnt; Canvas zeigt Frame nach Scroll-Fortschritt. Frames haben links
   dunklen Negativraum -> Text links bleibt klar. Mobile/RM: Poster + Beats.
   ============================================================================ */
.forge{
  position:relative;
  background:var(--navy-deep);
  color:var(--on-navy);
  isolation:isolate;
}
.forge{height:300vh;}   /* gepinnt (Desktop + Mobil); reduced-motion setzt auto */
.forge__sticky{
  position:sticky;top:0;
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;overflow:hidden;
}
.forge__canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;display:block;background:var(--navy-deep);
}
.forge__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(3,16,33,.92) 0%, rgba(3,16,33,.74) 30%, rgba(3,16,33,.32) 52%, rgba(3,16,33,0) 72%);
}
.forge__copy{
  position:relative;z-index:2;width:100%;
  max-width:var(--wrap);margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}
.forge__copy > *{max-width:42ch;}
.forge .eyebrow{color:var(--gold-soft);}
.forge .eyebrow::before{background:var(--gold);}
.forge__title{
  font-family:var(--f-display);font-weight:500;
  font-size:var(--t-h2);line-height:1.06;letter-spacing:-.015em;
  color:var(--on-navy);margin-bottom:clamp(24px,4vh,40px);
}
.forge__title em{font-style:italic;color:var(--gold-soft);}
.forge__beats{display:flex;flex-direction:column;gap:clamp(8px,1.4vh,16px);}
.forge__beat{
  position:relative;padding-left:26px;opacity:.32;
  transition:opacity .5s var(--ease), transform .5s var(--ease-out);
}
.forge__beat::before{
  content:"";position:absolute;left:0;top:.5em;
  width:9px;height:9px;border-radius:50%;
  background:transparent;border:1.5px solid var(--on-navy-line);
  transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease-out);
}
.forge__beat-k{
  display:block;font-family:var(--f-body);font-weight:600;
  font-size:var(--t-small);letter-spacing:.04em;text-transform:uppercase;color:var(--on-navy);
}
.forge__beat-t{display:block;font-size:var(--t-body);color:var(--on-navy-muted);line-height:1.5;}
.forge__beat.is-past{opacity:.55;}
.forge__beat.is-past::before{background:var(--gold);border-color:var(--gold);}
.forge__beat.is-active{opacity:1;transform:translateX(4px);}
.forge__beat.is-active::before{
  background:var(--gold-soft);border-color:var(--gold-soft);
  box-shadow:0 0 0 4px rgba(201,162,107,.16), 0 0 16px var(--gold-glow);transform:scale(1.15);
}
.forge__beat.is-active .forge__beat-k{color:var(--gold-soft);}
.forge__closing{
  margin-top:clamp(20px,3vh,32px);
  font-family:var(--f-display);font-style:italic;font-size:var(--t-h5);
  color:var(--gold-soft);
  opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.forge__closing.is-in{opacity:1;transform:none;}
@media (max-width:900px){
  /* Mobil: gepinnt, gestapelt — Video VOLLBREIT (16:9) direkt unter der Nav, Text darunter */
  .forge__sticky{flex-direction:column;justify-content:flex-start;gap:clamp(12px,3vw,20px);
    padding-top:calc(var(--nav-h) + 8px);padding-bottom:clamp(26px,5vh,46px);}
  .forge__canvas{position:relative;width:100%;height:56.25vw;flex:none;}   /* volle Breite, 16:9 -> randlos */
  .forge__scrim{display:none;}
  .forge__title{font-size:var(--t-h3);margin-bottom:clamp(12px,2vh,20px);}
  .forge__copy>*{max-width:none;}
  .forge__beats{gap:clamp(6px,1.4vw,11px);}
  .forge__closing{font-size:var(--t-body);margin-top:clamp(12px,2vh,20px);}
}
@media (prefers-reduced-motion:reduce){
  .forge{height:auto!important;}
  .forge__sticky{position:static;min-height:auto;padding-block:var(--section-y);}
  .forge__beat{opacity:1;}
  .forge__closing{opacity:1;transform:none;}
}

/* — NAV auf dunklem Hero (oben, nicht gestuckt): helle Schrift, Gold-CTA — */
.has-dark-hero .nav:not(.is-stuck) .nav__links a{color:var(--on-navy);}
.has-dark-hero .nav:not(.is-stuck) .nav__links a:hover,
.has-dark-hero .nav:not(.is-stuck) .nav__links a.is-active{color:#fff;}
.has-dark-hero .nav:not(.is-stuck) .nav__links a::after{background:var(--gold-soft);}
.has-dark-hero .nav:not(.is-stuck) .nav__burger{color:var(--on-navy);}
.has-dark-hero .nav:not(.is-stuck) .nav__burger:hover{background:rgba(255,255,255,.08);}
.has-dark-hero .nav:not(.is-stuck) .nav__cta.btn--primary{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  color:var(--navy-deep);
  box-shadow:0 10px 28px -14px var(--gold-glow);
}
.has-dark-hero .nav:not(.is-stuck) .nav__cta.btn--primary:hover{background:linear-gradient(180deg,#f4dda9,var(--gold-soft));}
/* Mobile-Menü offen: Burger wieder dunkel (liegt über hellem Overlay) */
.is-nav-open .nav__burger{color:var(--navy)!important;}

/* ============================================================================
   ████  KURS HALTEN — gepinnte Three.js-Szene (Messing-Navigationsinstrument) ████
   Dunkle Bühne; Instrument (kurs.js) rendert auf .kurs__canvas und richtet sich
   scroll-gesteuert aus. Beats werden vom Controller (kurs-boot.js) aktiviert.
   Mobil/reduced-motion: kein Pin, Instrument statisch, alle Beats sichtbar.
   ============================================================================ */
.kurs{
  --p:0;
  position:relative;
  background:var(--navy);
  color:var(--on-navy);
  background-image:
    radial-gradient(120% 90% at 78% 30%, rgba(127,166,196,.20), transparent 56%),
    radial-gradient(96% 86% at 6% 104%, rgba(201,162,107,.16), transparent 58%),
    linear-gradient(180deg, #04223f 0%, var(--navy-deep) 60%, #03152c 100%);
  isolation:isolate;
}
.kurs{height:300vh;}   /* gepinnt (Desktop + Mobil); reduced-motion setzt auto */
.kurs__sticky{
  position:sticky;
  top:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.kurs__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.kurs__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(3,18,38,.92) 0%, rgba(3,18,38,.78) 30%, rgba(3,18,38,.34) 52%, rgba(3,18,38,0) 72%);
}
.kurs__copy{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}
.kurs__copy > *{max-width:46ch;}
.kurs .eyebrow{color:var(--gold-soft);}
.kurs .eyebrow::before{background:var(--gold);}
.kurs__title{
  font-family:var(--f-display);font-weight:500;
  font-size:var(--t-h2);line-height:1.06;letter-spacing:-.015em;
  color:var(--on-navy);margin-bottom:var(--s-5);
}
.kurs__title em{font-style:italic;color:var(--gold-soft);}
.kurs__lead{font-size:var(--t-lead);line-height:1.55;color:var(--on-navy-muted);margin-bottom:clamp(28px,4vh,48px);}

/* — Beats: vertikale Stufenliste, aktive Stufe leuchtet — */
.kurs__beats{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px);counter-reset:beat;}
.kurs__beat{
  position:relative;
  padding-left:26px;
  opacity:.38;
  transform:translateX(0);
  transition:opacity .5s var(--ease), transform .5s var(--ease-out);
}
.kurs__beat::before{
  content:"";position:absolute;left:0;top:.5em;
  width:9px;height:9px;border-radius:50%;
  background:transparent;border:1.5px solid var(--on-navy-line);
  transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease-out);
}
.kurs__beat-k{
  display:block;font-family:var(--f-body);font-weight:600;
  font-size:var(--t-small);letter-spacing:.04em;text-transform:uppercase;
  color:var(--on-navy);margin-bottom:2px;
}
.kurs__beat-t{display:block;font-size:var(--t-body);color:var(--on-navy-muted);line-height:1.5;}
.kurs__beat.is-past{opacity:.6;}
.kurs__beat.is-past::before{background:var(--gold);border-color:var(--gold);}
.kurs__beat.is-active{opacity:1;transform:translateX(4px);}
.kurs__beat.is-active::before{
  background:var(--gold-soft);border-color:var(--gold-soft);
  box-shadow:0 0 0 4px rgba(201,162,107,.16), 0 0 16px var(--gold-glow);
  transform:scale(1.15);
}
.kurs__beat.is-active .kurs__beat-k{color:var(--gold-soft);}

/* — Mobil/Tablet: kein Pin, Instrument als Block oben, Text darunter — */
@media (max-width:900px){
  /* Mobil: gepinnt wie Desktop, gestapelt (Instrument oben, Text darunter) */
  .kurs__sticky{flex-direction:column;justify-content:center;gap:clamp(14px,3.5vw,24px);padding-block:clamp(34px,6vh,60px);}
  .kurs__canvas{position:relative;height:clamp(210px,50vw,310px);flex:none;}
  .kurs__scrim{display:none;}
  .kurs__copy > *{max-width:none;}
  .kurs__lead{font-size:var(--t-body);margin-bottom:clamp(12px,2vh,22px);}
  .kurs__beats{gap:clamp(8px,1.4vh,14px);}
}

/* — reduced-motion: kein Pin, alles ruhig sichtbar — */
@media (prefers-reduced-motion:reduce){
  .kurs{height:auto!important;}
  .kurs__sticky{position:static;min-height:auto;padding-block:var(--section-y);}
  .kurs__beat{opacity:1;transition:none;}
  .kurs__beat::before{transition:none;}
}

/* ============================================================================
   ████  SCHMIEDE — Scroll-Hinweis (Maus + Gold-Punkt + „Scrollen")  ████
   Dezenter Indikator unten in der gepinnten Sektion; blendet aus, sobald
   gescrollt wird (Klasse is-hidden via forge.js). Mobil aus, RM ohne Bewegung.
   ============================================================================ */
.forge__scrollhint, .kurs__scrollhint{
  position:absolute;left:50%;bottom:clamp(20px,4vh,40px);
  transform:translateX(-50%);
  z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:opacity .6s var(--ease);
}
.forge__scrollhint.is-hidden, .kurs__scrollhint.is-hidden{opacity:0;}
.sh-mouse{
  position:relative;
  width:26px;height:42px;border-radius:13px;
  border:1.6px solid rgba(227,200,150,.7);
  box-shadow:0 0 18px rgba(201,162,107,.18), inset 0 0 0 1px rgba(255,255,255,.04);
}
.sh-dot{
  position:absolute;left:50%;top:8px;
  width:4px;height:8px;border-radius:2px;
  background:var(--gold-soft);
  transform:translateX(-50%);
  animation:shDot 1.8s var(--ease) infinite;
}
@keyframes shDot{
  0%{opacity:0;transform:translate(-50%,0);}
  18%{opacity:1;}
  78%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,15px);}
}
.sh-label{
  font-family:var(--f-body);font-size:.62rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-soft);opacity:.82;
}
/* Scroll-Hinweise auch auf Mobil sichtbar (etwas kompakter, näher am Rand) */
@media (max-width:900px){
  .forge__scrollhint, .kurs__scrollhint{bottom:clamp(12px,2.5vh,22px);gap:7px;}
  .sh-mouse{width:22px;height:36px;}
  .sh-label{font-size:.56rem;}
}
@media (prefers-reduced-motion:reduce){
  .sh-dot{animation:none;top:15px;}
}

/* ============================================================================
   ████  HERO — Goldene Milchstraßen-Funken (3D-Punktwolke, js/hero-sparks.js)  ████
   Liegt über dem Video, unter dem Scrim/Inhalt; rechts gebündelt, additiv.
   ============================================================================ */
.hero__sparks{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;display:block;
}

/* ============================================================================
   ████  HERO auf MOBIL — volle cineastische Bühne (Video/Schild + Funken)  ████
   ============================================================================ */
@media (max-width:900px){
  .hero--dark{min-height:100svh;display:flex;align-items:center;}
  .hero--dark > .wrap{width:100%;}
  .hero__video{object-position:64% 42%;}   /* Schild (rechts-mittig) im Hochformat in den Blick rücken */
}

/* ============================================================================
   ████  KURS — Goldene Funken hinter dem Instrument (wie im Header)  ████
   ============================================================================ */
.kurs__sparks{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;}

/* ============================================================================
   ████  NAV — dunkle, edle Glas-Leiste beim Scrollen (statt hell/creme)  ████
   ============================================================================ */
.nav.is-stuck{
  background:rgba(7,23,45,.72);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  backdrop-filter:saturate(150%) blur(16px);
  border-bottom-color:rgba(227,200,150,.20);   /* feine Gold-Haarlinie */
  box-shadow:0 10px 34px -20px rgba(0,0,0,.7);
}
.nav.is-stuck .nav__links a{color:var(--on-navy-muted);}
.nav.is-stuck .nav__links a:hover,
.nav.is-stuck .nav__links a.is-active{color:#fff;}
.nav.is-stuck .nav__links a::after{background:var(--gold-soft);}
.nav.is-stuck .nav__burger{color:var(--on-navy);}
.nav.is-stuck .nav__cta.btn--primary{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:var(--navy-deep);
  box-shadow:0 10px 26px -14px var(--gold-glow);
}
@media (max-width:760px){
  /* Mobil ohne backdrop-blur (iOS-Jank) -> deckendes dunkles Glas */
  .nav.is-stuck{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(7,23,45,.94); }
}

/* ============================================================================
   ████  DOTNAV — dezenter Fortschritts-/Abschnitts-Reiter rechts  ████
   Zeigt, wo man sich befindet. Klick scrollt zum Abschnitt. Mobil ausgeblendet.
   ============================================================================ */
.dotnav{
  position:fixed;right:clamp(10px,1.3vw,20px);top:50%;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;gap:13px;align-items:flex-end;
}
.dotnav a{position:relative;display:flex;align-items:center;justify-content:flex-end;height:14px;}
.dotnav__dot{
  width:8px;height:8px;border-radius:50%;
  background:transparent;border:1.5px solid rgba(140,152,168,.55);
  transition:transform .3s var(--ease-out),background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.dotnav a:hover .dotnav__dot,
.dotnav a.is-active .dotnav__dot{
  background:var(--gold);border-color:var(--gold);
  transform:scale(1.3);box-shadow:0 0 12px var(--gold-glow);
}
.dotnav a.is-active .dotnav__dot{box-shadow:0 0 0 4px rgba(201,162,107,.14),0 0 12px var(--gold-glow);}
.dotnav__label{
  position:absolute;right:18px;white-space:nowrap;
  font-family:var(--f-body);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(7,23,45,.82);padding:4px 10px;border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease-out);
}
.dotnav a:hover .dotnav__label,
.dotnav a.is-active .dotnav__label{opacity:1;transform:none;}
@media (max-width:680px){ .dotnav{display:none;} }
@media (prefers-reduced-motion:reduce){ .dotnav__dot{transition:none;} }

/* ============================================================================
   ████  NAV — durchgehend DUNKEL (auch oben am Rand), auf ALLEN Seiten  ████
   Lesbarkeit: helle Schrift auf dunklem Glas ab Scroll-Position 0. Beim
   Scrollen wird die Leiste nur etwas solider (sanftes Feedback).
   ============================================================================ */
.nav{
  background:linear-gradient(180deg, rgba(6,19,38,.86), rgba(6,19,38,.70));
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(227,200,150,.16);   /* feine Gold-Haarlinie */
}
.nav__links a{color:var(--on-navy-muted);}
.nav__links a:hover,
.nav__links a.is-active{color:#fff;}
.nav__links a::after{background:var(--gold-soft);}
.nav__burger{color:var(--on-navy);}
.nav__burger:hover{background:rgba(255,255,255,.08);}
.nav__cta.btn--primary{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:var(--navy-deep);
  box-shadow:0 10px 26px -16px var(--gold-glow);
}
.nav.is-stuck{
  background:linear-gradient(180deg, rgba(6,19,38,.94), rgba(6,19,38,.82));
  box-shadow:0 12px 36px -20px rgba(0,0,0,.75);
}
@media (max-width:760px){
  /* Mobil ohne backdrop-blur (iOS-Jank) -> deckendes dunkles Glas */
  .nav{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(6,19,38,.95); }
  .nav.is-stuck{ background:rgba(6,19,38,.97); }
}

/* ============================================================================
   ████  KARTEN — Gold-Lichtsweep beim Einblenden (Desktop + Mobil)  ████
   Cross-Platform-„Liquid-Glass"-Moment: einmaliger Gold-Schimmer, wenn eine
   .svc/.loc-Karte in den Viewport kommt (scroll-getriggert, kein Cursor nötig).
   ============================================================================ */
@keyframes cardSweep{
  0%{transform:translateX(-130%) skewX(-12deg);opacity:0;}
  22%{opacity:.85;}
  100%{transform:translateX(130%) skewX(-12deg);opacity:0;}
}
.svc.in .glass-sheen,.loc.in .glass-sheen{
  animation:cardSweep 1.15s var(--ease-out) .25s both;
}
@media (prefers-reduced-motion:reduce){
  .svc.in .glass-sheen,.loc.in .glass-sheen{animation:none;}
}

/* ============================================================================
   ████  FINISH-PASS — die unsichtbaren Details (Fable-5-Politur)  ████
   Cross-Document-View-Transitions · FAQ-Höhenanimation · Dark-Selection ·
   getönte Scrollbar · 404-Dark-Hero-Prose. Alles progressiv & rm-safe.
   ============================================================================ */

/* — Seitenwechsel (index ⇄ kanzlei ⇄ leistungen) als weicher Crossfade.
     Browser ohne Support ignorieren die At-Regel vollständig. — */
@view-transition{navigation:auto;}
::view-transition-old(root){animation-duration:.28s;animation-timing-function:var(--ease);}
::view-transition-new(root){animation-duration:.42s;animation-timing-function:var(--ease-out);}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
}

/* — FAQ: echtes Auf-/Zugleiten der Antwort (interpolate-size, Chrome 129+).
     Fallback bleibt das bisherige Fade-up. — */
@supports (interpolate-size:allow-keywords){
  .faq__item::details-content{
    block-size:0;
    overflow-y:clip;
    opacity:0;
    transition:block-size .45s var(--ease-out),
               opacity .35s var(--ease),
               content-visibility .45s allow-discrete;
  }
  .faq__item[open]::details-content{block-size:auto;opacity:1;}
  .faq__item[open] .faq__a{animation:none;}   /* Doppel-Animation vermeiden */
}
@media (prefers-reduced-motion:reduce){
  .faq__item::details-content{transition:none!important;}
}

/* — Text-Selektion auf dunklen Bühnen: Gold statt Clay (Lesbarkeit + Marke) — */
.hero--dark ::selection,.section--navy ::selection,.clarity ::selection,
.forge ::selection,.kurs ::selection,.footer ::selection{
  background:rgba(201,162,107,.5);color:#0b1626;
}

/* — Scrollbar dezent in Markenfarbe getönt (Firefox + Chromium 121+) — */
html{scrollbar-color:rgba(0,44,89,.38) transparent;}

/* — Dark-Hero ohne Video (404): der helle G9-Papier-Wash (.hero::before) würde
     die dunkle Bühne überdecken — auf dunklen Heroes deaktivieren. Auf der
     Startseite liegt das Video ohnehin darüber (keine sichtbare Änderung). — */
.hero--dark::before{display:none;}
/* Der von main.js injizierte Scrim (ohne Inline-Style) trägt den hellen
   Papier-Wash — auf dunklen Heroes stattdessen dunkle Links-Vignette.
   Der Start-Hero setzt seinen Scrim inline und bleibt unberührt. */
.hero--dark .hero__scrim:not([style]){
  background:linear-gradient(100deg,
    rgba(3,18,38,.6) 0%, rgba(3,18,38,.34) 32%, rgba(3,18,38,0) 62%);
}

/* — 404 / Dark-Hero ohne Video: Prose-Links lesbar in Gold — */
.hero--dark .prose{color:var(--on-navy-muted);}
.hero--dark .prose a{
  color:var(--gold-soft);
  text-decoration-color:rgba(227,200,150,.45);
}
.hero--dark .prose a:hover{color:#f4dda9;text-decoration-color:var(--gold-soft);}