/* =========================================================================
   WOW-Layer — erweitert styles.css (niemals ohne sie laden).
   Pilot: Fundament + Hero „Aktendeckel" + Nav + Marquee.
   Leitidee „Stufenweise Offenlegung": Redactions lösen sich, Stempel
   schlagen ein, Linien zeichnen sich — Motion läuft einmal, gerichtet.
   Präfix w- für alles Neue; gezielte Overrides bestehender Selektoren.
   ========================================================================= */

:root{
  --w-h1:clamp(38px,7.4vw,96px);
  --w-h2:clamp(28px,4.2vw,52px);
  --w-ease-out:cubic-bezier(.19,1,.22,1);
  --w-stamp-ease:cubic-bezier(.2,.9,.3,1.4);
  --w-grain: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* =========================================================================
   1) FUNDAMENT — Tiefe auf hellem Papier
   ========================================================================= */

/* Gradient-Mesh: Gold (bestehend) + kühles Navy unten links + warmes Creme */
body::before{
  background:
    radial-gradient(60% 40% at 78% -8%,rgba(var(--accent-rgb),.11),transparent 60%),
    radial-gradient(50% 35% at 8% 4%,rgba(var(--accent-rgb),.05),transparent 60%),
    radial-gradient(55% 42% at 10% 92%,rgba(11,31,51,.05),transparent 65%),
    radial-gradient(65% 50% at 55% 38%,rgba(251,246,236,.5),transparent 72%);
}

/* Papierkorn über allem (4 %, feTurbulence-Data-URI) — Papier wird physisch */
html::before{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.04;
  background-image:var(--w-grain);background-size:160px 160px;
}
@media print{html::before{display:none}}

/* Reveal ohne blur() — gleicher Look, deutlich billiger auf langer Seite */
.reveal{filter:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* Renderlast: Sektionen unterhalb des Folds erst bei Bedarf layouten
   (Reihenfolge in main: trust-band, profil, situationen, vorteile,
    erklaervideo → ab Nr. 6 = selbstcheck und alles darunter) */
main > section:nth-of-type(n+6){content-visibility:auto;contain-intrinsic-size:auto 900px}

/* Typo-Eskalation der Abschnittsköpfe */
.stats-head h2,.cases-head h2,.shead h2{font-size:var(--w-h2)}

/* Ghost-Ebene: riesige dekorative Ziffern/Worte (spätere Phasen nutzen sie) */
.w-ghost{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-accent);font-style:italic;font-weight:400;line-height:1;
  font-size:clamp(140px,22vw,300px);color:rgba(var(--ink-rgb),.045);
}

/* Marquee pausiert off-screen (JS toggelt w-offscreen) */
.marquee.w-offscreen .marquee-track{animation-play-state:paused}

/* =========================================================================
   2) NAV — Einsenken + wandernder Gold-Unterstrich
   ========================================================================= */
.nav-wrap{animation:w-nav-in .65s var(--w-ease-out) both}
@keyframes w-nav-in{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}

.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1)}

/* =========================================================================
   3) HERO „Aktendeckel"
   ========================================================================= */
.w-hero .container{position:relative}
.w-hero .hero-eyebrow,.w-hero h1,.w-hero .hero-grid{position:relative;z-index:1}

/* --- H1: volle Breite, Line-Mask-Reveal, Gewichtskontrast ---------------- */
.w-hero h1{font-size:var(--w-h1);line-height:1.03;letter-spacing:-.045em;max-width:100%}
.w-line{display:block;overflow:hidden;padding:.08em .18em .12em .02em;margin:-.08em -.18em -.12em -.02em}
.w-line-in{display:block;transform:translateY(115%);animation:w-line-in .68s var(--w-ease-out) both}
.w-l1 .w-line-in{animation-delay:.25s}
.w-l2 .w-line-in{animation-delay:.34s}
.w-l3 .w-line-in{animation-delay:.43s}
@keyframes w-line-in{to{transform:none}}
.w-thin{font-weight:340;letter-spacing:-.03em}

/* Typewriter-Caret aus (Wort steht als echter Text im DOM) */
.w-hero h1 .rot::after{content:none;animation:none}

/* „Offenlegung": Navy-Redaction-Balken über dem Akzentwort, löst sich
   einmalig per clip-path-Wipe von links nach rechts auf.
   .w-bhero = gleiche Signatur für die .blog-hero-Köpfe (Kandidaten-Bereich) */
.w-hero h1 .rot{white-space:nowrap}
.w-bhero h1 .w-redact{position:relative;white-space:nowrap}
.w-bhero .kicker{animation:w-up .7s var(--w-ease-out) .08s both}
.w-hero h1 .w-redact::before,
.w-bhero h1 .w-redact::before{
  content:"";position:absolute;inset:.1em -.06em .04em -.04em;z-index:2;
  background:var(--navy);border-radius:.09em;
  box-shadow:0 .05em .25em rgba(11,31,51,.35);
  animation:w-unredact .6s var(--ease) 1.25s both;
}
@keyframes w-unredact{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}

/* --- Choreo-Utilities: Eyebrow, Lead, CTAs, Meta -------------------------- */
.w-hi{animation:w-up .7s var(--w-ease-out) both}
.w-hi-1{animation-delay:.1s}
.w-hi-2{animation-delay:.55s}
.w-hi-3{animation-delay:.7s}
.w-hi-4{animation-delay:.85s}
@keyframes w-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* --- Layout: H1 über beide Spalten, darunter Lead | Dossier --------------- */
.w-hero .hero-eyebrow{margin-bottom:clamp(22px,3vh,34px)}
.w-hero .hero-grid{
  grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,72px);
  align-items:start;margin-top:clamp(30px,4.5vh,52px);
}
.w-hero .hero-lead{margin-top:0;font-size:clamp(16px,1.5vw,20px)}
.w-hero .hero-meta b{font-size:clamp(22px,2.1vw,30px)}

/* --- Konstellation (Ghost-SVG hinter der H1, rechte Weißfläche) ----------- */
.w-konstellation{
  position:absolute;top:clamp(-10px,1vw,30px);right:var(--gut);z-index:0;
  width:min(44%,500px);height:auto;color:rgba(13,34,54,.35);opacity:.85;
  pointer-events:none;
}
.w-k-e{opacity:0;animation:w-fade .9s ease both;animation-delay:var(--kd,1s)}
.w-k-n{fill:var(--bg);stroke:rgba(13,34,54,.4);stroke-width:1.3;opacity:0;animation:w-fade .7s ease both;animation-delay:var(--kd,1s)}
.w-k-r{fill:rgba(13,34,54,.32);opacity:0;animation:w-fade .7s ease both;animation-delay:var(--kd,1s)}
.w-k-path{stroke:#B8923C;stroke-width:1.6;fill:none;opacity:.65;stroke-dasharray:1;stroke-dashoffset:1;animation:w-draw 1.5s var(--ease) 1.3s both}
.w-k-hit{fill:#B8923C;opacity:0;animation:w-fade .5s ease 2.5s both}
.w-k-halo{fill:none;stroke:rgba(184,146,60,.5);stroke-width:1.2;opacity:0;animation:w-fade .5s ease 2.6s both,w-halo 4.5s ease-in-out 3.2s infinite}
.w-k-pulse{animation:w-fade .7s ease both,w-kpulse 4.5s ease-in-out infinite;animation-delay:var(--kd,1s),3.2s}
@keyframes w-fade{from{opacity:0}to{opacity:1}}
@keyframes w-draw{to{stroke-dashoffset:0}}
@keyframes w-halo{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.35}}
.w-k-halo{transform-box:fill-box;transform-origin:center}
@keyframes w-kpulse{0%,100%{stroke:rgba(13,34,54,.4)}50%{stroke:rgba(184,146,60,.8)}}

/* --- Dossier-Karte 2.0 ----------------------------------------------------
   Wrap trägt Einflug + Float (transform-Animationen), die Karte selbst den
   3D-Tilt (Inline-Transform via JS) — so kollidieren die Transforms nie. */
.w-dossier-wrap{animation:w-dossier-in .9s var(--w-ease-out) 1s both,dossier-float 7s var(--ease) 2.4s infinite}
@keyframes w-dossier-in{from{opacity:0;transform:translateX(46px) rotate(1.6deg)}to{opacity:1;transform:none}}
.w-dossier{overflow:visible;transition:box-shadow .35s var(--ease)}
.w-dossier::before{border-radius:inherit}
.w-dossier.dynamic-spotlight{overflow:visible}
.w-dossier.dynamic-spotlight::after{border-radius:var(--r-lg)}
.w-dossier:hover{box-shadow:0 30px 80px rgba(11,31,51,.28)}

/* Papierkorn auch auf der Akte */
.w-dossier > .dossier-head,.w-dossier > .dossier-row{position:relative;z-index:1}
.w-tab ~ .dossier-head{justify-content:flex-end}

/* Akten-Reiter an der Oberkante */
.w-tab{
  position:absolute;top:-13px;left:20px;z-index:2;
  padding:5px 14px 4px;border:1px solid rgba(216,189,122,.45);border-bottom:0;
  border-radius:9px 9px 0 0;background:#122A44;
  font-family:var(--font-label);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#D8BD7A;white-space:nowrap;
}

/* „VERTRAULICH" wird zum Stempel: Einschlag + Glow-Puls, danach Atmen */
.w-dossier .conf{
  font-size:11.5px;padding:6px 13px;border-width:1.5px;
  box-shadow:inset 0 0 0 1px rgba(216,189,122,.22);
  transform:rotate(-3deg);transform-origin:center;
  animation:w-stamp .55s var(--w-stamp-ease) 1.5s both,
            w-stampglow .8s ease-out 1.55s both,
            seal-breathe 2.8s ease-in-out 3.4s infinite;
}
@keyframes w-stamp{
  0%{opacity:0;transform:scale(1.7) rotate(-8deg)}
  60%{opacity:1;transform:scale(.94) rotate(-2.5deg)}
  100%{opacity:1;transform:scale(1) rotate(-3deg)}
}
@keyframes w-stampglow{from{box-shadow:0 0 0 0 rgba(216,189,122,.5)}to{box-shadow:0 0 0 22px rgba(216,189,122,0)}}

/* --- Mobile Dossier-Zeile (Signature-Visual, wo die Karte fehlt) ---------- */
.w-dossier-line{
  display:none;margin-top:26px;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--r-md);background:var(--navy);
  box-shadow:0 14px 34px rgba(11,31,51,.22);
}
.w-dl-tag{font-family:var(--font-label);font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#93A5B6;white-space:nowrap}
.w-dl-red{flex:1;height:11px;border-radius:3px;background:#2A4258;min-width:40px}
.w-dl-conf{font-family:var(--font-label);font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#D8BD7A;border:1px solid rgba(216,189,122,.45);border-radius:var(--r-pill);padding:4px 10px;transform:rotate(-2deg);white-space:nowrap}

/* --- Hero-Abschluss auf Desktop straffen ---------------------------------- */
@media (min-width:981px){.w-hero.hero{padding-bottom:clamp(36px,5vw,60px)}}

/* =========================================================================
   4) MARQUEE-Feinschliff — größer, Gold-Rauten, weichere Masken, ruhiger
   ========================================================================= */
.marquee::before,.marquee::after{width:120px}
.marquee-track{animation-duration:46s}
.tchip{font-size:13.5px}
.tchip::before{width:6px;height:6px;border-radius:1.5px;transform:rotate(45deg)}

/* =========================================================================
   S1) PROFIL — Typo-Wand: riesige Gold-Ziffern statt Karten
   ========================================================================= */
#profil{overflow:hidden}
#profil .container{position:relative}
/* feine Radar-Ringe im Hintergrund */
#profil .container::before{
  content:"";position:absolute;inset:-30% -12%;pointer-events:none;
  background:repeating-radial-gradient(circle at 82% 6%,rgba(216,189,122,.07) 0 1px,transparent 1px 88px);
}
#profil .stats-head,#profil .stats-grid{position:relative;z-index:1}
#profil .stats-grid{gap:0;margin-top:8px;grid-template-columns:repeat(4,minmax(0,1fr))}
#profil .stat{
  background:transparent;border:0;box-shadow:none;border-radius:0;
  padding:18px 22px 12px;position:relative;min-width:0;
  container-type:inline-size;
}
#profil .stat:hover{transform:none;background:transparent;box-shadow:none}
/* Ziffern skalieren mit ihrer SPALTE (nicht mit dem Viewport) — so kann
   „~280"/„STMK" nie abgeschnitten werden, egal bei welcher Fensterbreite */
#profil .stat .num{
  font-size:clamp(44px,5.4vw,88px);letter-spacing:-.05em;color:#D8BD7A;
}
@supports (font-size:1cqi){
  #profil .stat .num{font-size:min(33cqi,104px)}
}
@supports (-webkit-background-clip:text){
  #profil .stat .num{
    background:linear-gradient(180deg,#F0E2B8 0%,#D8BD7A 52%,#B3934E 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
}
#profil .stat .lbl{margin-top:16px}
/* Haarlinien zwischen den Ziffern ziehen sich beim Reveal von oben */
#profil .stat + .stat::before{
  content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(216,189,122,.38),transparent);
  transform:scaleY(0);transform-origin:top;
  transition:transform .9s var(--ease) .35s;
}
#profil .stat.in + .stat::before{transform:scaleY(1)}
@media (max-width:980px){
  /* 2×2: vertikale Linien nur in der Mitte, sonst horizontale Trenner */
  #profil .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #profil .stat{padding:16px 22px 10px}
  #profil .stat + .stat::before{top:0;bottom:auto;left:8%;right:8%;width:auto;height:1px;transform:scaleX(0);transform-origin:left;
    background:linear-gradient(90deg,transparent,rgba(216,189,122,.34),transparent)}
  #profil .stat.in + .stat::before{transform:scaleX(1)}
}

/* =========================================================================
   S2) SITUATIONEN — Fallakten im Sticky-Stapel
   ========================================================================= */
#situationen .cases{
  grid-template-columns:1fr;gap:26px;border-top:0;
  counter-reset:akte;max-width:880px;margin:52px auto 0;
}
#situationen .case{
  counter-increment:akte;
  display:block;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 20px 48px rgba(11,31,51,.10);
  padding:36px 38px 30px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
#situationen .case:nth-child(odd){border-right:1px solid var(--line)}
#situationen .case::after{content:none}
#situationen .case:hover{background:var(--surface);border-color:var(--line-2);box-shadow:0 26px 60px rgba(11,31,51,.15)}
#situationen .case > div{position:relative;z-index:1}
#situationen .case h3{font-size:clamp(20px,2vw,24px)}
/* Akten-Reiter mit Ziffer */
#situationen .case .idx{
  position:absolute;top:-14px;left:26px;z-index:2;padding:4px 13px 3px;
  background:var(--surface);border:1px solid var(--line);border-bottom:0;
  border-radius:9px 9px 0 0;
  font-family:var(--font-label);font-size:10.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
}
#situationen .case .idx::before{content:"Akte "}
/* Ghost-Ziffer im Kartenhintergrund */
#situationen .case::before{
  content:"0" counter(akte);position:absolute;right:26px;top:2px;z-index:0;
  font-family:var(--font-accent);font-style:italic;font-weight:400;line-height:1;
  font-size:clamp(84px,9vw,130px);color:rgba(var(--ink-rgb),.05);
  pointer-events:none;user-select:none;
}
/* Sticky-Stapel: Akten legen sich beim Scrollen übereinander */
@media (min-width:700px){
  #situationen .case{position:sticky;top:calc(118px + var(--i,0) * 18px)}
}
/* Redaction pro Akte: löst sich auf, wenn die Karte einscrollt */
.w-sred{position:relative}
.w-sred::after{
  content:"";position:absolute;inset:-1px -3px;z-index:1;
  background:var(--ink);border-radius:3px;
  clip-path:inset(0 0 0 0);transition:clip-path .7s var(--ease) .55s;
}
.case.in .w-sred::after{clip-path:inset(0 0 0 100%)}

/* =========================================================================
   S3) ABLAUF — Scrollytelling mit sticky Riesen-Ziffer (≥900px)
   ========================================================================= */
.w-ablauf-panel{display:none}
.phase.is-done .phase-c h3::after{
  content:"Geprüft";display:inline-block;vertical-align:2px;margin-left:12px;
  padding:2.5px 8px;border:1.5px solid rgba(var(--accent-rgb),.55);border-radius:4px;
  font-family:var(--font-label);font-size:9px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
  transform:rotate(-3deg);
  animation:w-stamp-mini .3s var(--w-stamp-ease);
}
@keyframes w-stamp-mini{from{opacity:0;transform:scale(1.5) rotate(-7deg)}to{opacity:1;transform:scale(1) rotate(-3deg)}}
@media (min-width:900px){
  #ablauf .pmeta{display:none}
  .w-ablauf-grid{
    display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1.7fr);
    gap:clamp(40px,5vw,84px);align-items:start;margin-top:54px;
  }
  #ablauf .timeline{margin:0;max-width:none}
  .w-ablauf-panel{
    position:sticky;top:126px;display:flex;flex-direction:column;gap:12px;
    padding-top:6px;
  }
  .w-ap-kicker{font-family:var(--font-label);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  /* Ziffer als Inline-SVG (Pfade + Gradient im Markup); .85em = alte line-height */
  .w-ap-num{font-size:clamp(96px,10vw,150px)}
  .w-ap-num svg{display:block;height:.85em;width:auto;overflow:visible}
  .w-ap-num.w-swap{animation:w-num-in .5s var(--w-ease-out)}
  @keyframes w-num-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .w-ap-title{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.015em;max-width:24ch}
  .w-ap-title.w-swap2{animation:w-fade .45s var(--ease)}
  .w-ap-bar{display:block;height:3px;max-width:190px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:6px}
  .w-ap-bar span{display:block;height:100%;width:16.6%;background:var(--accent);border-radius:2px;box-shadow:0 0 12px var(--accent);transition:width .45s var(--ease)}
  .w-ap-count{font-family:var(--font-label);font-size:12px;color:var(--muted)}
}

/* =========================================================================
   S4) DISKRETION — Radar-Sweep + Sperr-Durchstreichungen + Flow-Verbinder
   ========================================================================= */
/* rotierender Sweep im Sperrlisten-Diagramm (pausiert off-screen) */
.szmap::before{
  content:"";position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(var(--accent-rgb),.20),rgba(var(--accent-rgb),.05) 55deg,transparent 70deg);
  animation:w-sweep 8s linear infinite;
}
@keyframes w-sweep{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
.szmap.w-offscreen::before{animation-play-state:paused}
/* gesperrte Kontakte: Navy-Durchstreichung + Mini-Schloss, gestaffelt beim Reveal */
.szitem{padding-left:26px}
.szitem::before{
  content:"";position:absolute;left:10px;top:50%;width:11px;height:11px;margin-top:-5.5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230D2236'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9h-2Zm-8-2a3 3 0 0 1 6 0v2H9V7Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;transition:opacity .4s var(--ease);transition-delay:var(--sd,.6s);
}
.szitem::after{
  content:"";position:absolute;left:7%;right:7%;top:50%;height:2px;border-radius:1px;
  background:rgba(13,34,54,.72);transform:rotate(-6deg) scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);transition-delay:var(--sd,.6s);
}
.szmap>.szitem:nth-child(3){--sd:.5s}
.szmap>.szitem:nth-child(4){--sd:.68s}
.szmap>.szitem:nth-child(5){--sd:.86s}
.szmap>.szitem:nth-child(6){--sd:1.04s}
.szmap>.szitem:nth-child(7){--sd:1.22s}
.disc-panel.in .szitem::before{opacity:.85}
.disc-panel.in .szitem::after{transform:rotate(-6deg) scaleX(1)}
/* gestrichelte Verbinder zwischen den Flow-Schritten */
.flowstep{position:relative}
.flowstep + .flowstep{margin-top:2px}
.flowstep + .flowstep::after{
  content:"";position:absolute;left:24px;top:-13px;height:13px;width:0;
  border-left:2px dashed rgba(var(--ink-rgb),.22);
}
.flowstep.on::after{border-left-color:rgba(var(--accent-rgb),.65)}
.flowstep.on{transform:translateX(4px)}

/* =========================================================================
   S5) SWEEP — restliche Sektionen (Rhythmus: bewusst leichter als Signatures)
   ========================================================================= */

/* --- Vorteile: Ruhepol mit einziehender Goldlinie + Ghost-Anführung -------
   :has(.summary) scoped auf die Startseiten-Variante — kandidaten/jobs/
   nutzt dieselbe ID #vorteile für eine Ledger-Sektion ohne .summary */
#vorteile .container{position:relative}
#vorteile:has(.summary) .container::before{
  content:"„";position:absolute;left:-20px;top:-90px;z-index:-1;
  font-family:var(--font-accent);font-style:italic;line-height:1;
  font-size:clamp(180px,26vw,340px);color:rgba(var(--ink-rgb),.05);
  pointer-events:none;user-select:none;
}
#vorteile .shead h2::after{
  content:"";display:block;width:64px;height:2px;background:var(--accent);
  margin:22px auto 0;transform:scaleX(0);transition:transform .7s var(--ease) .35s;
}
#vorteile .shead h2.in::after{transform:scaleX(1)}
#vorteile .shead p{font-size:16.5px;line-height:1.75}

/* --- Erklärvideo: Kino-Moment mit Gold-Passermarken ----------------------- */
.vp-video__frame{position:relative}
.vp-video__frame::before{
  content:"";position:absolute;inset:-16px;pointer-events:none;opacity:0;
  transition:opacity .8s var(--ease) .3s;
  --pm:rgba(216,189,122,.85);
  background:
    linear-gradient(var(--pm),var(--pm)) left 0 top 0/26px 1.5px,
    linear-gradient(var(--pm),var(--pm)) left 0 top 0/1.5px 26px,
    linear-gradient(var(--pm),var(--pm)) right 0 top 0/26px 1.5px,
    linear-gradient(var(--pm),var(--pm)) right 0 top 0/1.5px 26px,
    linear-gradient(var(--pm),var(--pm)) left 0 bottom 0/26px 1.5px,
    linear-gradient(var(--pm),var(--pm)) left 0 bottom 0/1.5px 26px,
    linear-gradient(var(--pm),var(--pm)) right 0 bottom 0/26px 1.5px,
    linear-gradient(var(--pm),var(--pm)) right 0 bottom 0/1.5px 26px;
  background-repeat:no-repeat;
}
.vp-video__frame.in::before{opacity:1}

/* --- Selbstcheck: Fortschrittsbogen + Stempel „Gespräch empfohlen" -------- */
.w-sc-row{display:flex;align-items:center;gap:12px;margin-top:14px}
.w-sc-row .scheck-count{margin-top:0}
.w-sc-arc{width:34px;height:34px;transform:rotate(-90deg);flex:0 0 auto}
.w-sc-arc circle{fill:none;stroke-width:3.4;stroke-linecap:round}
.w-sc-bg{stroke:var(--line-2)}
.w-sc-fg{stroke:var(--accent);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s var(--ease)}
.scheck-result{position:relative}
.w-sc-stamp{
  position:absolute;top:-11px;right:14px;padding:3px 10px;
  border:1.5px solid var(--check);border-radius:5px;background:var(--bg-soft);
  font-family:var(--font-label);font-size:9.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--check);
  transform:rotate(3deg) scale(.5);opacity:0;transition:.25s var(--w-stamp-ease);
}
.scheck-result.hit .w-sc-stamp{opacity:1;transform:rotate(3deg) scale(1)}

/* --- Was Sie erhalten: Trichter 12→3 + kaskadierende Checkliste ----------- */
.w-funnel{display:block;width:min(340px,80%);margin:0 auto 26px;overflow:visible}
.w-f-dots circle{fill:rgba(var(--ink-rgb),.22);opacity:0;transition:opacity .5s var(--ease)}
.w-funnel.in .w-f-dots circle{opacity:1}
.w-f-lines path{
  fill:none;stroke:rgba(var(--ink-rgb),.18);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .9s var(--ease);transition-delay:var(--kd,0s);
}
.w-funnel.in .w-f-lines path{stroke-dashoffset:0}
.w-f-cards rect{
  fill:rgba(var(--accent-rgb),.08);stroke:var(--accent);stroke-width:1.4;
  opacity:0;transform:translateY(6px);transition:.5s var(--ease);transition-delay:var(--kd,0s);
}
.w-funnel.in .w-f-cards rect{opacity:1;transform:none}
.checklist div{opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.checklist div:nth-child(1){transition-delay:.05s}
.checklist div:nth-child(2){transition-delay:.13s}
.checklist div:nth-child(3){transition-delay:.21s}
.checklist div:nth-child(4){transition-delay:.29s}
.checklist.in div{opacity:1;transform:none}

/* --- Über-uns: Gold-Rahmen + Akten-Reiter am Porträt, Ghost-Initial ------- */
@media (min-width:981px){
  #ueber-uns .portrait{overflow:visible}
  #ueber-uns .portrait img{border-radius:var(--r-lg)}
  #ueber-uns .portrait figcaption{border-radius:0 0 var(--r-lg) var(--r-lg)}
  #ueber-uns .portrait::before{
    content:"";position:absolute;inset:16px -16px -16px 16px;z-index:-1;
    border:1px solid rgba(var(--accent-rgb),.45);border-radius:var(--r-lg);
  }
  #ueber-uns .portrait::after{
    content:"Akte · Pfingstl";position:absolute;top:-13px;left:20px;z-index:2;
    padding:4px 13px 3px;background:var(--surface);border:1px solid var(--line);border-bottom:0;
    border-radius:9px 9px 0 0;font-family:var(--font-label);font-size:10px;font-weight:700;
    letter-spacing:.15em;text-transform:uppercase;color:var(--accent);white-space:nowrap;
  }
}
#ueber-uns .person{position:relative}
#ueber-uns .person::after{
  content:"P.";position:absolute;right:-30px;top:-70px;z-index:-1;
  font-family:var(--font-accent);font-style:italic;line-height:1;
  font-size:clamp(140px,18vw,260px);color:rgba(var(--ink-rgb),.045);
  pointer-events:none;user-select:none;
}

/* --- Erstgespräch-CTA: Border-Beam (rotierender Gold-Schimmer) ------------ */
@property --w-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.ctaband{position:relative}
.ctaband::before{
  content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1.5px;
  background:conic-gradient(from var(--w-ang),transparent 0 72%,rgba(216,189,122,.95) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:w-beam 6s linear infinite;pointer-events:none;
}
@keyframes w-beam{to{--w-ang:360deg}}
.ctaband.w-offscreen::before{animation-play-state:paused}

/* --- Umfang/Ledger: Register einer Akte (Playfair-Ziffern, dotted leaders) - */
#umfang .container{position:relative}
#umfang .container::after{
  content:"08";position:absolute;right:-16px;top:10px;z-index:-1;
  font-family:var(--font-accent);font-style:italic;line-height:1;
  font-size:clamp(120px,16vw,240px);color:rgba(var(--ink-rgb),.045);
  pointer-events:none;user-select:none;
}
.ledger-num{font-family:var(--font-accent);font-style:italic;font-size:27px;color:var(--accent);padding-top:0;min-width:36px}
.ledger-item h3{display:flex;align-items:baseline}
.ledger-item h3::after{content:"";flex:1;min-width:24px;border-bottom:2px dotted var(--line-2);margin:0 2px 4px 12px}
.ledger-item:nth-child(2){transition-delay:.06s}
.ledger-item:nth-child(3){transition-delay:.12s}
.ledger-item:nth-child(4){transition-delay:.18s}
.ledger-item:nth-child(5){transition-delay:.24s}
.ledger-item:nth-child(6){transition-delay:.3s}
.ledger-item:nth-child(7){transition-delay:.36s}
.ledger-item:nth-child(8){transition-delay:.42s}

/* --- Fit: Goldkante zieht sich, Häkchen poppen gestaffelt ------------------ */
.fitcol.pos{position:relative}
.fitcol.pos::after{
  content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:2px;
  background:var(--accent);border-radius:1px;
  transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease) .3s;
}
.fitcol.pos.in::after{transform:scaleY(1)}
.fitcol.pos li::before{opacity:0;transform:scale(.4);transition:.35s var(--ease)}
.fitcol.pos li:nth-child(1)::before{transition-delay:.35s}
.fitcol.pos li:nth-child(2)::before{transition-delay:.42s}
.fitcol.pos li:nth-child(3)::before{transition-delay:.49s}
.fitcol.pos li:nth-child(4)::before{transition-delay:.56s}
.fitcol.pos li:nth-child(5)::before{transition-delay:.63s}
.fitcol.pos li:nth-child(6)::before{transition-delay:.7s}
.fitcol.pos.in li::before{opacity:1;transform:none}

/* --- Blog: Editorial-Index (Trennlinien ziehen sich nacheinander) ---------- */
.blogrow{border-bottom:0;position:relative}
.blogrow::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease);
}
.blogrow:nth-child(1)::after{transition-delay:.05s}
.blogrow:nth-child(2)::after{transition-delay:.13s}
.blogrow:nth-child(3)::after{transition-delay:.21s}
.blogrow:nth-child(4)::after{transition-delay:.29s}
.blogrow:nth-child(5)::after{transition-delay:.37s}
.blogrow.in::after{transform:scaleX(1)}
.blogrow .more{transition:color .3s,transform .3s var(--ease)}
.blogrow:hover .more{transform:translateX(4px)}

/* --- Investition: Ghost-Wort + Gold-Gradient-Oberkante --------------------- */
#investition .container{position:relative}
#investition .container::before{
  content:"Investition";position:absolute;right:0;top:-54px;z-index:0;
  font-family:var(--font-accent);font-style:italic;line-height:1;
  font-size:clamp(80px,11vw,170px);color:rgba(216,189,122,.055);
  pointer-events:none;user-select:none;white-space:nowrap;
}
#investition .invest{position:relative;z-index:1}
.invest::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(216,189,122,.8),transparent);
}

/* --- FAQ: sanftes Aufklappen + Chip-Stempel -------------------------------- */
@supports selector(::details-content){
  .faq-list details::details-content{opacity:0;transition:opacity .4s var(--ease),content-visibility .4s allow-discrete}
  .faq-list details[open]::details-content{opacity:1}
}
.chip.on{animation:w-chip .25s var(--w-stamp-ease)}
@keyframes w-chip{from{transform:scale(.9)}to{transform:scale(1)}}

/* --- Checkliste: Dokument mit Siegel + „Kostenlos"-Reiter ------------------- */
.leadmagnet{position:relative;overflow:visible}
.w-tab-light{
  background:var(--surface);border-color:var(--line);color:var(--accent);
  left:auto;right:26px;
}
.w-doc{
  position:relative;width:88px;height:104px;margin:0 auto 18px;
  background:
    repeating-linear-gradient(180deg,transparent 0 10px,rgba(var(--ink-rgb),.14) 10px 15px,transparent 15px 22px) 14px 30px/44px 60px no-repeat,
    var(--bg-soft);
  border:1px solid var(--line-2);border-radius:6px;
  box-shadow:0 10px 26px rgba(11,31,51,.12);
  animation:dossier-float 7s var(--ease) 1s infinite;
}
.w-doc::before{
  content:"";position:absolute;inset:8px -10px -8px 10px;z-index:-1;
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;
  transform:rotate(2.5deg);
}
.w-doc::after{
  content:"";position:absolute;left:14px;top:12px;width:34px;height:6px;border-radius:2px;
  background:var(--ink-dim);
}
.w-doc-seal{
  position:absolute;right:-12px;bottom:-10px;width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#E7D6A4,#B8923C 70%);
  box-shadow:0 6px 16px rgba(140,106,30,.4),inset 0 0 0 3px rgba(255,255,255,.25);
}
.w-doc-seal::after{
  content:"";position:absolute;inset:7px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.65);
}

/* --- Kontakt: Gesprächsfoto (Gegenüber bleibt anonym = Diskretion im Bild) -- */
.w-contact-photo{
  position:relative;z-index:1;margin:22px 0 0;
  border-radius:var(--r-md);overflow:hidden;
  border:1px solid rgba(216,189,122,.35);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.w-contact-photo img{width:100%;height:auto;display:block}
.w-contact-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;
  background:linear-gradient(0deg,rgba(11,31,51,.92),transparent);
  font-family:var(--font-label);font-size:10px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:#ECD9A6;
}

/* --- Kontakt: Wasserzeichen + goldene Fokus-Linien -------------------------- */
.contact-card{overflow:hidden}
.contact-card::before{
  content:"VERTRAULICH";position:absolute;right:-38px;bottom:44px;z-index:0;
  transform:rotate(-24deg);pointer-events:none;user-select:none;
  font-family:var(--font-label);font-weight:800;font-size:62px;letter-spacing:.28em;
  color:rgba(255,255,255,.04);white-space:nowrap;
}
.cform .field{position:relative}
.cform .field::after{
  content:"";position:absolute;left:2px;right:2px;bottom:0;height:2px;border-radius:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);pointer-events:none;
}
.cform .field:focus-within::after{transform:scaleX(1)}

/* --- Footer: Ghost-Wortmarke ------------------------------------------------ */
.site-foot{position:relative;overflow:hidden}
.site-foot::before{
  content:"vertraulich.";position:absolute;left:50%;top:-24px;transform:translateX(-50%);
  font-family:var(--font-accent);font-style:italic;line-height:1;
  font-size:clamp(110px,16vw,220px);color:rgba(216,189,122,.04);
  pointer-events:none;user-select:none;white-space:nowrap;
}
.site-foot .container{position:relative}

/* =========================================================================
   5) RESPONSIVE
   ========================================================================= */
@media (max-width:980px){
  .w-dossier-wrap{display:none}
  .w-dossier-line{display:flex}
  .w-konstellation{display:none}
  .w-hero .hero-grid{margin-top:clamp(24px,4vh,40px)}
  /* Ghost-Elemente nie über den Viewport hinaus */
  #ueber-uns .person::after{right:0;font-size:clamp(110px,26vw,180px)}
  #umfang .container::after{right:0}
  #vorteile .container::before{left:0}
  #investition .container::before{right:0;font-size:clamp(64px,14vw,120px)}
  .w-funnel{margin-top:6px}
}

/* =========================================================================
   6) REDUCED MOTION — Endzustände sofort, keine Loops
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .nav-wrap,.w-hi,.w-line-in,.w-dossier-wrap,.w-dossier .conf,
  .w-k-e,.w-k-n,.w-k-r,.w-k-path,.w-k-hit,.w-k-halo,.w-k-pulse,
  .szmap::before,.w-ap-num.w-swap,.w-ap-title.w-swap2,
  .phase.is-done .phase-c h3::after{animation:none}
  .w-sred::after{transition:none;clip-path:inset(0 0 0 100%)}
  #profil .stat + .stat::before{transition:none;transform:none}
  .szitem::before{transition:none;opacity:.85}
  .szitem::after{transition:none;transform:rotate(-6deg) scaleX(1)}
  .flowstep.on{transform:none}
  .ctaband::before,.w-doc,.chip.on{animation:none}
  .checklist div,.fitcol.pos li::before,.blogrow::after,
  .w-f-dots circle,.w-f-lines path,.w-f-cards rect,
  .vp-video__frame::before,.w-sc-fg,.w-sc-stamp,
  #vorteile .shead h2::after,.fitcol.pos::after,.cform .field::after{transition:none}
  .checklist div{opacity:1;transform:none}
  .fitcol.pos li::before{opacity:1;transform:none}
  .fitcol.pos::after{transform:none}
  .blogrow::after{transform:none}
  .w-f-dots circle{opacity:1}
  .w-f-lines path{stroke-dashoffset:0}
  .w-f-cards rect{opacity:1;transform:none}
  .vp-video__frame::before{opacity:1}
  #vorteile .shead h2::after{transform:none}
  .faq-list details::details-content{transition:none}
  .w-hi,.w-line-in,.w-dossier-wrap{opacity:1;transform:none}
  .w-line-in{transform:none}
  .w-dossier .conf{opacity:1;transform:rotate(-3deg)}
  .w-hero h1 .w-redact::before,.w-bhero h1 .w-redact::before{content:none}
  .w-bhero .kicker{animation:none}
  .w-k-e,.w-k-n,.w-k-r,.w-k-hit,.w-k-halo{opacity:1}
  .w-k-path{stroke-dashoffset:0}
}