/* ===========================================================
   ALN · Unterseiten-Kit (sub.css) — ergänzt v2.css, ersetzt nichts.
   Laden:  /fonts/hanken.css · /assets/css/v2.css · /assets/css/sub.css
   JS:     /assets/js/v2.js (Nav, Reveals, Stagger) · /assets/js/sub.js
   Abstände: Sektion 78 (.sec) · Panel 56/40/28 · Karten-Radius 24
             Raster 8er-Schritte: 8 12 16 24 32 48 56 64
   Easing:  cubic-bezier(.16,1,.3,1) · Dauern .6–.9 s
   -----------------------------------------------------------
   KOMPONENTEN (Markup-Skelette, Pflichtklassen fett gedacht)

   K1 Hero ....... <header class="hero shero" data-tone="dove|warm|marine" id="top">
                     <div class="shero-float" aria-hidden="true">          (optional, >=1200px)
                       <span class="fpill" style="--x:6%;--y:30%;--dur:15s">Begriff</span> …</div>
                     <div class="hero-in"><span class="eyebrow">…</span><h1>…</h1>
                       <p class="lead">…</p>
                       <div class="hero-ctas"><a class="btn">…</a><a class="btn btn-ghost">…</a></div></div>
                     [K2 .carousel | .shero-stage (freie Bühne, max 1200)]
                   </header>
                   Klasse "hero" ist Pflicht: v2.js blendet H1/Lead/Buttons ein.
                   data-next="cream" lässt den Verlauf in Creme statt Weiß auslaufen.
   K2 Karussell .. <div class="carousel" data-carousel data-auto="7000" data-start="2" data-grow>
                     <div class="carousel-shell [dove]">
                       <div class="car-head"><span class="dpill">Beispielansicht</span>
                         <div class="vnav"><button class="vnav-b" data-dir="-1" aria-label="Vorherige Karte">←</button>
                                           <button class="vnav-b" data-dir="1"  aria-label="Nächste Karte">→</button></div></div>
                       <div class="crow" tabindex="0" aria-label="…">
                         <article class="dcard"><div class="dc-h">Titel</div><div class="dc-s">Subtitel</div>
                           <div class="dc-vis"><svg class="chart">…</svg></div>
                           <div class="dtip"><span>Label</span><b>Wert</b></div></article> …</div></div></div>
   Werteband ..... <div class="values rv-stagger"><div class="value"><span class="glyph"><svg viewBox="0 0 24 24">…</svg></span>
                     <h3>…</h3><p>…</p></div> ×3</div>
   K3 Panel ...... <article class="fpanel [rev] [wide]" data-accent="marine|blue|oak|graphite" data-rv="up">
                     <div class="fp-text"><span class="eyebrow">…</span><h2>…</h2><p>…</p>
                       <ul class="checks"><li><b>Titel</b> Text</li></ul></div>
                     <div class="fp-vis"><span class="glow dove|sand|oak"></span>
                       <div class="stack rv-stagger"><div class="uicard">…</div>
                         <div class="uicard off-r overlap">…</div></div></div>
                     [<div class="fp-foot">…</div>  volle Breite unter beiden Spalten]
                   </article>   Mehrere Panels: <div class="fpanels">…</div>
                   Tabs im Panel: .fpanel.wide + data-ptabs, darin
                     <div class="fp-head">…<div class="ptabs" role="tablist"><button class="tab" role="tab"
                       aria-selected="true" aria-controls="x-0" id="xt-0"><span class="k">A</span>Analyse</button>…</div></div>
                     <div class="tp fp-body" data-tp="0" id="x-0" role="tabpanel">…</div> …
   UI-Karte ...... <div class="uicard"><div class="uicard-h">Titel <span class="dpill">Beispielansicht</span></div>…</div>
                   Innen nutzbar: .dbars/.dbar/.dtrack (v2), .dpage/.dsk (v2), .dnext (v2), .urow, .chip
                   Balken wachsen, sobald ein Vorfahr .grown trägt ([data-grow] setzt sub.js).
   K4 Bento ...... <div class="bento" data-stagger><article class="bcard sand|dove|cream|dark [span2]">
                     <span class="bk">Eyebrow</span><h3>Statement</h3><p>…</p>
                     <div class="bvis">Mini-UI oder <div class="bimg"><img …></div></div></article></div>
   K5 Fakten ..... <div class="facts"><div class="fact"><span class="fact-n" data-count="100" data-suffix="+">100+</span>
                     <span class="fact-l">Label</span></div> …</div>   (Text-Fakten ohne data-count)
   K6 Headline ... <h2 class="tone"><span class="dim">Grauer Teil</span> Marine-Teil</h2>  max. 1× pro Seite
   K7 Vergleich .. <div class="compare" data-show="a">
                     <div class="segbar cmp-toggle" role="tablist" aria-label="…">
                       <button role="tab" data-cmp="a" aria-selected="true">Bisher</button>
                       <button role="tab" data-cmp="b" aria-selected="false">Mit ALN</button></div>
                     <div class="cmp-grid"><div class="cmp-row cmp-h"><div class="cmp-a">Bisher</div><div class="cmp-b">Mit ALN</div></div>
                       <div class="cmp-row"><div class="cmp-a">…</div><div class="cmp-b">…</div></div> …</div></div>
   K8 Schritte ... <ol class="steps rv-stagger"><li class="step"><span class="spill"><span class="k">01</span>Schritt</span>
                     <h3>Titel</h3><span class="smeta">Wer</span><p>…</p></li> ×4</ol>
   K9 Quiz ....... <div class="quiz" data-dots="6"><div class="quiz-dots" aria-hidden="true"></div>
                     <div class="qbar"><i id="qbar"></i></div><div id="qbody"></div>
                     <div class="qnav"><button class="qback">…</button></div></div>
                   Stylt die bestehenden Klassen (.qstep .qq .qhint .qopts .qopt .qres .qsum .hyp .qdis .qcta .qrestart).
                   Punkte folgen automatisch der Breite von .qbar i (sub.js). Icons in .qopt: .quiz.with-icons.
   K10 Formular .. <form class="form" id="kf"><div class="fgrid"><label>Name<input …></label>…</div>
                     <label>…<textarea …></textarea></label><label class="chk"><input type="checkbox"><span>…</span></label>
                     <div class="hp">…</div><div class="fnav"><button class="btn">…</button><span class="fnote"></span></div></form>
                   In weißer Karte: <div class="fcard-w">…</div>. Fehler: .bad am Feld, .fnote.err.
   K11 Person .... <div class="person"><div class="img" data-rv="left"><img src="/assets/img/dominique.webp" alt="…"></div>
                     <div><span class="eyebrow">…</span><h2>…</h2><p class="lead">…</p></div></div>
   K12 Legal ..... <main class="legal"><h1>…</h1><h2>…</h2><p>…</p></main>
   Zweispalter ... <div class="duo"><div>H2 + Lead</div><div>.facts3 (v2)</div></div>
   Chart-SVG ..... <svg class="chart" viewBox="…"> Klassen: .ch-grid .ch-lbl .ch-line (pathLength="1")
                   .ch-area .ch-seg (pathLength="100", style="--s:18;--o:0") .ch-bar .ch-dot .ch-node
   =========================================================== */

:root{
  --sand:#F3EEE7;
  --sand-2:#EDE6DC;
  --greige:#E3DCD2;
  --oak:#CDBBA3;
  --oak-ink:#8A7358;
  --marine-blue:#34445F;
  --muted:rgba(58,61,66,.72);
  --ease:cubic-bezier(.16,1,.3,1);
  --r-lg:28px;
  --r-xl:32px;
  --shadow-card:0 24px 50px -34px rgba(22,35,58,.38);
  --shadow-soft:0 8px 30px -20px rgba(22,35,58,.25);
}

/* Visuell verborgen, für Screenreader lesbar */
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Headlines ohne Einzelwort in der letzten Zeile */
.shead h2,.fp-text h2,.fp-head h2,.duo h2,.band h2,.shero h1,.bcard h3{text-wrap:balance}

/* Sektionskopf zentriert (wie .usp-head auf index) */
.shead{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.shead h2{max-width:18em}
.shead .lead{max-width:40em}
.shead.left{text-align:left;align-items:flex-start}
.sec.tight{padding:56px 0}
.sec.flush-top{padding-top:0}
.sec.sand{background:var(--sand)}

/* ===========================================================
   K1 · UNTERSEITEN-HERO
   =========================================================== */
.hero.shero{
  padding:88px var(--gut) 72px;
  background:linear-gradient(180deg,var(--cream) 0%,#FFFFFF 88%);
}
.hero.shero:has(.carousel){padding-bottom:40px}
.hero.shero{--shero-next:#FFFFFF}
.shero[data-next="cream"]{--shero-next:var(--cream)}
.shero[data-tone="dove"]{
  background:
    radial-gradient(1200px 640px at 50% -8%, rgba(188,198,220,.55), rgba(188,198,220,.12) 55%, rgba(188,198,220,0) 74%),
    linear-gradient(180deg,var(--cream) 0%,#FFFFFF 90%);
}
.shero[data-tone="warm"]{
  background:
    radial-gradient(900px 520px at 72% -12%, rgba(205,187,163,.30), rgba(205,187,163,0) 70%),
    radial-gradient(760px 420px at 18% 0%, rgba(255,253,250,.9), rgba(255,253,250,0) 70%),
    linear-gradient(180deg,#FFFDFA 0%,#F6EFE6 42%,#F3EEE7 70%,#FFFFFF 100%);
}
.shero[data-tone="marine"]{
  background:
    radial-gradient(1000px 360px at 50% 88%, rgba(22,35,58,.08), rgba(22,35,58,0) 72%),
    linear-gradient(180deg,var(--cream) 0%,#FFFFFF 100%);
}
/* weicher Auslauf in die nächste Sektion */
.shero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--shero-next));
}
.shero[data-next="cream"]::after{background:linear-gradient(180deg,rgba(251,249,247,0),var(--shero-next))}
.shero .hero-blob{display:none}
.shero .hero-in{gap:24px;max-width:1000px}
.shero h1{font-size:clamp(38px,4.6vw,64px);max-width:16em;line-height:1.05}
.shero .lead{font-size:clamp(18px,1.5vw,20px);max-width:36em}
.shero-stage{position:relative;z-index:1;max-width:var(--maxw);margin:56px auto 0;text-align:left}

/* Schwebende Begriff-Pills (nur breite Viewports) */
.shero-float{position:absolute;inset:0;z-index:0;pointer-events:none;display:none}
.fpill{
  position:absolute;left:var(--x,6%);top:var(--y,30%);
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.78);border:1px solid var(--hair);border-radius:999px;
  padding:8px 15px 8px 12px;font-size:13px;font-weight:500;color:var(--marine);letter-spacing:.005em;
  box-shadow:0 14px 30px -24px rgba(22,35,58,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity 1s ease;transition-delay:var(--in,.9s);
  animation:sdrift var(--dur,15s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);
}
.fpill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dove);flex:0 0 auto}
.fpill.oak::before{background:var(--oak)}
.fpill.mar::before{background:var(--marine)}
.hero.in .fpill{opacity:1}
@keyframes sdrift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(var(--dx,10px),calc(var(--dy,-8px) * .5),0)}
  100%{transform:translate3d(calc(var(--dx,10px) * -.4),var(--dy,-8px),0)}
}
@media (min-width:1320px){.shero-float{display:block}}

/* ===========================================================
   K2 · DATEN-KARUSSELL
   =========================================================== */
.carousel{position:relative;z-index:1;max-width:calc(var(--maxw) + 48px);margin:56px auto 0;text-align:left}
.carousel-shell{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,rgba(243,238,231,.92),rgba(243,238,231,.62));
  border:1px solid rgba(205,187,163,.28);
}
.carousel-shell.dove{background:linear-gradient(180deg,rgba(188,198,220,.30),rgba(188,198,220,.16));border-color:var(--hair-soft)}
.car-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 0}
.car-head .vnav-b{width:42px;height:42px;font-size:16px;background:rgba(255,255,255,.7);border-color:rgba(22,35,58,.35)}
.car-head .vnav-b:hover{background:#fff}
.crow{
  position:relative;display:flex;gap:20px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:28px calc(50% - 170px) 92px;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.crow::-webkit-scrollbar{display:none}
.crow:focus-visible{outline:2px solid var(--marine);outline-offset:-4px;border-radius:var(--r-xl)}
.crow.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
.carousel .dcard{
  position:relative;flex:0 0 340px;height:280px;margin:0;
  display:flex;flex-direction:column;
  border-radius:var(--r);padding:22px 22px 18px;background:#fff;border:1px solid var(--hair-soft);
  box-shadow:0 22px 44px -32px rgba(22,35,58,.42);
  scroll-snap-align:center;opacity:.72;
  transition:transform .7s var(--ease),opacity .6s ease,box-shadow .6s ease;
}
.carousel .dcard + .dcard{margin-top:0}
.carousel .dcard.is-active{opacity:1;transform:scale(1.04);box-shadow:0 30px 60px -34px rgba(22,35,58,.5)}
.carousel .dcard:not(.is-active){cursor:pointer}
.dc-h{font-size:14px;font-weight:600;color:var(--marine);letter-spacing:-.005em;line-height:1.3}
.dc-s{font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dc-vis{flex:1 1 auto;min-height:0;margin-top:14px;display:flex;flex-direction:column;justify-content:center}
.dc-vis>svg{display:block;width:100%;height:100%}
.carousel .dbars{gap:6px}
.carousel .dbar span{font-size:11.5px;margin-bottom:5px}
.carousel .dtrack{height:6px}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.lg i{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--marine)}
.lg i.oak{background:var(--oak)}
.lg i.dove{background:var(--dove)}

/* Tooltip-Kärtchen unter der aktiven Karte */
.dtip{
  position:absolute;left:28px;top:calc(100% + 18px);z-index:2;
  display:flex;flex-direction:column;gap:2px;
  background:#fff;border:1px solid var(--hair-soft);border-radius:14px;
  padding:10px 14px;min-width:170px;max-width:290px;
  box-shadow:0 18px 36px -24px rgba(22,35,58,.5);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .45s ease .15s,transform .6s var(--ease) .15s;
}
.dtip span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(22,35,58,.6);line-height:1.4}
.dtip b{font-size:14px;font-weight:600;color:var(--marine);line-height:1.35}
.dtip::before{ /* Verbindungslinie */
  content:"";position:absolute;left:22px;bottom:100%;width:1px;height:18px;background:var(--dove);
}
.dtip::after{ /* Verbindungspunkt an der Karte */
  content:"";position:absolute;left:18px;bottom:calc(100% + 14px);width:9px;height:9px;border-radius:50%;
  background:var(--marine);box-shadow:0 0 0 3px #fff;
}
.dcard.is-active .dtip{opacity:1;transform:none}

/* ===========================================================
   CHART-SVG (Karussell, UI-Karten)
   =========================================================== */
.chart{overflow:visible;font-family:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif}
.chart text{font-family:inherit}
.ch-lbl{font-size:11px;fill:rgba(58,61,66,.78)}
.ch-lbl.s{font-size:10px;fill:rgba(58,61,66,.62)}
.ch-lbl.b{font-weight:600;fill:var(--marine)}
.ch-lbl.w{fill:#fff}
.ch-lbl.w2{fill:rgba(255,255,255,.72)}
.ch-num{font-size:26px;font-weight:300;fill:var(--marine);letter-spacing:-.02em}
.ch-grid{stroke:var(--greige);stroke-width:1;stroke-dasharray:3 4;fill:none}
.ch-track{stroke:var(--greige);fill:none}
/* Linie zeichnet sich */
.ch-line{fill:none;stroke:var(--marine);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .15s}
.grown .ch-line{stroke-dashoffset:0}
.ch-area{opacity:0;transition:opacity 1s ease .6s}
.grown .ch-area{opacity:1}
/* Ring-Segmente (pathLength=100, --s Länge, --o Versatz) */
.ch-seg{fill:none;stroke-width:16;stroke-dasharray:0 100;stroke-dashoffset:calc(var(--o,0) * -1);
  transition:stroke-dasharray 1.1s var(--ease);transition-delay:var(--d,.1s)}
.grown .ch-seg{stroke-dasharray:var(--s,10) 100}
/* Balken, Punkte, Knoten */
.ch-bar{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform 1s var(--ease);transition-delay:var(--d,.1s)}
.ch-bar.v{transform-origin:center bottom;transform:scaleY(0)}
.grown .ch-bar{transform:none}
.ch-dot,.ch-node{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .7s var(--ease);transition-delay:var(--d,.3s)}
.grown .ch-dot,.grown .ch-node{transform:none}
.ch-fade{opacity:0;transition:opacity .8s ease;transition-delay:var(--d,.4s)}
.grown .ch-fade{opacity:1}
/* HTML-Balken aus v2 (.dtrack b) wachsen mit .grown */
.grown .dtrack b{width:var(--w,50%)}
.grown .dbars .dbar:nth-child(1) b{transition-delay:.10s}
.grown .dbars .dbar:nth-child(2) b{transition-delay:.17s}
.grown .dbars .dbar:nth-child(3) b{transition-delay:.24s}
.grown .dbars .dbar:nth-child(4) b{transition-delay:.31s}
.grown .dbars .dbar:nth-child(5) b{transition-delay:.38s}
.grown .dbars .dbar:nth-child(6) b{transition-delay:.45s}
.dtrack b.mute{background:var(--greige)}
.dbar .chip{display:inline-flex;vertical-align:1px;margin:0 0 0 6px;padding:2px 9px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.dtrack b.oak{background:linear-gradient(90deg,var(--greige),var(--oak))}

/* ===========================================================
   WERTEBAND (drei Wertversprechen)
   =========================================================== */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:56px}
.value{display:flex;flex-direction:column;gap:14px}
.glyph{
  width:52px;height:52px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(188,198,220,.30);border:1px solid var(--hair-soft);flex:0 0 auto;
}
.glyph svg{width:26px;height:26px;fill:none;stroke:var(--marine);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.glyph .f{fill:var(--marine);stroke:none}
.glyph .f2{fill:rgba(22,35,58,.35);stroke:none}
.value h3{font-size:21px;line-height:1.25;letter-spacing:-.015em;margin-top:6px}
.value p{font-size:15.5px;line-height:1.62;color:var(--graphite)}

/* ===========================================================
   K5 · FAKTEN
   =========================================================== */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px 48px}
.fact{border-top:1px solid var(--hair);padding-top:28px;display:flex;flex-direction:column;gap:12px}
.fact-n{font-weight:300;font-size:64px;line-height:1;letter-spacing:-.03em;color:var(--marine);font-variant-numeric:tabular-nums}
.fact-l{font-size:15.5px;line-height:1.5;color:var(--graphite);max-width:18em}
.fact-l b{display:block;color:var(--marine);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}

/* ===========================================================
   K6 · ZWEIFARBIGE HEADLINE
   =========================================================== */
h2.tone,.h2.tone{color:var(--marine)}
h2.tone .dim,.h2.tone .dim{color:rgba(58,61,66,.55)}

/* ===========================================================
   K3 · FEATURE-PANEL
   =========================================================== */
.fpanels{display:grid;gap:24px}
.fpanel{
  --acc:var(--marine);
  position:relative;background:#fff;border:1px solid var(--hair-soft);border-radius:var(--r-lg);
  padding:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;
  box-shadow:0 30px 60px -50px rgba(22,35,58,.4);
}
.fpanel[data-accent="blue"]{--acc:var(--marine-blue)}
.fpanel[data-accent="oak"]{--acc:var(--oak-ink)}
.fpanel[data-accent="graphite"]{--acc:var(--graphite)}
.fpanel.rev>.fp-vis{order:-1}
.fp-text{display:flex;flex-direction:column;align-items:flex-start}
.fp-text h2,.fp-head h2{font-size:clamp(28px,2.9vw,40px);line-height:1.1;color:var(--acc);margin-top:18px;max-width:16em}
.fp-text>p,.fp-head>p{margin-top:18px;font-size:17px;line-height:1.65;max-width:34em}
.fp-text>p.lead,.fp-head>p.lead{font-size:18px}
.fp-text>p+p{margin-top:14px}
.fp-text .eyebrow::before,.fp-head .eyebrow::before{background:var(--acc);opacity:.45}
.fp-text .btn,.fp-text .tlink{margin-top:28px}
.fp-vis{position:relative;min-width:0}
.fp-foot{grid-column:1 / -1}

/* Panel mit Kopf + Tabs */
.fpanel.wide{grid-template-columns:minmax(0,1fr);gap:40px;align-items:stretch}
.fp-head{display:flex;flex-direction:column;align-items:flex-start}
.fp-head.row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ptabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.ptabs .tab{position:relative;overflow:hidden;isolation:isolate}
.ptabs .tab[aria-selected="true"]{background:#34445F;border-color:#34445F}
.ptabs .tab .tprog{position:absolute;inset:0;border-radius:999px;z-index:-1;background:var(--marine);transform:scaleX(0);transform-origin:left center;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ptabs .tab .tprog{display:none}}
.ptabs .tab .k{font-size:12px;letter-spacing:0}
.tp[hidden]{display:none !important}
.tp.on{animation:dfade .45s var(--ease)}
.fp-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}

/* Liste mit feinen Häkchen (wie .dir li auf index) */
.checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px;width:100%}
.checks li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.6;color:var(--graphite)}
.checks li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:99px;
  background:rgba(188,198,220,.38) no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2316233A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-6'/%3E%3C/svg%3E")}
.checks li b{color:var(--marine);font-weight:600}
.checks.lines{gap:0}
.checks.lines li{padding:16px 0;border-top:1px solid var(--hair)}
.checks.lines li:last-child{border-bottom:1px solid var(--hair)}

/* Nummerierte Liste (Panel-Tabs) */
.nlist{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0;width:100%}
.nlist li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--hair);font-size:15px;line-height:1.58;color:var(--graphite)}
.nlist li:last-child{border-bottom:1px solid var(--hair)}
.nlist .n{width:26px;height:26px;border-radius:50%;border:1px solid var(--dove);color:var(--marine);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;margin-top:1px}
.nlist b{display:block;color:var(--marine);font-weight:600;font-size:15.5px;line-height:1.4;margin-bottom:3px}

/* Visual-Stapel */
.glow{
  position:absolute;inset:6% 4%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(188,198,220,.95),rgba(188,198,220,0));
  filter:blur(40px);opacity:.9;
}
.glow.sand{background:radial-gradient(closest-side,rgba(237,230,220,1),rgba(237,230,220,0))}
.glow.oak{background:radial-gradient(closest-side,rgba(205,187,163,.55),rgba(205,187,163,0))}
.stack{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px}
.uicard{
  position:relative;background:#fff;border:1px solid var(--hair-soft);border-radius:20px;
  padding:22px 24px;box-shadow:var(--shadow-card);
}
.uicard.tint{background:linear-gradient(160deg,rgba(188,198,220,.24),rgba(251,249,247,.94))}
.uicard.sandy{background:linear-gradient(160deg,rgba(237,230,220,.9),rgba(251,249,247,.96))}
.uicard.sm{padding:16px 18px;border-radius:16px}
.stack .off-l{margin-right:14%}
.stack .off-r{margin-left:14%}
.stack .overlap{margin-top:-40px;z-index:2}
.stack .w-auto{align-self:flex-start}
.stack .w-auto.off-r{align-self:flex-end;margin-left:0}
.uicard-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;
  font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--marine)}
.uicard-h .dpill{font-size:10px;padding:4px 10px}
.uicard .dnext{margin:0}
.uicard .dpage{box-shadow:none}
.urow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--hair-soft);font-size:14px;color:var(--graphite);line-height:1.45}
.uicard-h+.urow,.uicard>.urow:first-child{border-top:none;padding-top:0}
.urow .n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--dove);color:var(--marine);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.urow b{color:var(--marine);font-weight:600;white-space:nowrap}
.urow .dsk{min-width:24px}
.urow .dsk{flex:1 1 auto}
.chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 12px;
  background:rgba(188,198,220,.32);color:var(--marine);font-size:12.5px;font-weight:500;line-height:1.3}
.chip.mar{background:var(--marine);color:#fff}
.chip.oak{background:rgba(205,187,163,.42)}
.chip.line{background:#fff;border:1px solid var(--hair)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.ustat{display:flex;align-items:center;gap:12px}
.ustat .av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;background:linear-gradient(150deg,var(--dove),rgba(22,35,58,.55))}
.ustat .ln{flex:1 1 auto;display:grid;gap:7px}

/* ===========================================================
   K4 · BENTO
   =========================================================== */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bcard{
  position:relative;overflow:hidden;border-radius:var(--r);padding:40px;
  display:flex;flex-direction:column;gap:14px;
  background:var(--sand);border:1px solid rgba(205,187,163,.26);
}
.bcard.dove{background:rgba(188,198,220,.22);border-color:var(--hair-soft)}
.bcard.cream{background:var(--cream);border-color:var(--hair-soft)}
.bcard.white{background:#fff;border-color:var(--hair)}
.bcard.span2{grid-column:span 2}
.bk{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:600;color:var(--oak-ink)}
.bcard.dove .bk,.bcard.cream .bk,.bcard.white .bk{color:var(--marine-blue)}
.bcard h3{font-size:clamp(22px,2.1vw,28px);font-weight:500;line-height:1.18;letter-spacing:-.02em;color:var(--marine);max-width:18em}
.bcard p{font-size:15.5px;line-height:1.62;color:var(--graphite);max-width:36em}
.bvis{margin-top:auto;padding-top:14px}
.bimg{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#e9e5df}
.bimg img{width:100%;height:100%;object-fit:cover}
.bcard.dark{background:var(--marine);border-color:var(--marine);color:rgba(255,255,255,.82)}
.bcard.dark .bk{color:var(--dove)}
.bcard.dark h3{color:#fff}
.bcard.dark p{color:rgba(255,255,255,.8)}
.bcard.dark::after{content:"";position:absolute;right:-80px;bottom:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(188,198,220,.30),transparent 70%);pointer-events:none}
.bcard.dark>*{position:relative;z-index:1}
.bcard.dark .uicard{box-shadow:none;border-color:transparent}
/* generisches [data-stagger] (v2.js setzt .arm/.on/--d) */
[data-stagger].arm>*{opacity:0;transform:translateY(24px)}
[data-stagger].arm>.on{opacity:1;transform:none;transition:opacity .7s ease,transform .8s var(--ease);transition-delay:var(--d,0s)}
[data-stagger].arm>.on.settled{transition-delay:0s}

/* ===========================================================
   K7 · VERGLEICH
   =========================================================== */
.compare{margin-top:48px}
.cmp-toggle{display:none}
.cmp-grid{display:grid;gap:0}
.cmp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
.cmp-row>div{position:relative;padding:22px 32px;font-size:16px;line-height:1.6}
.cmp-row>.cmp-a{background:var(--sand);color:var(--graphite)}
.cmp-row>.cmp-b{background:rgba(188,198,220,.22);color:var(--marine)}
.cmp-row>div::before{content:"";position:absolute;left:32px;right:32px;top:0;height:1px;background:rgba(22,35,58,.1)}
.cmp-row:first-child>div::before,.cmp-row.cmp-h+.cmp-row>div::before{display:none}
.cmp-row:first-child>div{border-radius:var(--r) var(--r) 0 0;padding-top:30px}
.cmp-row:last-child>div{border-radius:0 0 var(--r) var(--r);padding-bottom:30px}
.cmp-h>div{display:flex;align-items:center;gap:10px;padding-bottom:10px;
  text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:600;color:var(--marine)}
.cmp-h>div::after{content:"";flex:0 0 auto;order:-1;width:8px;height:8px;border-radius:50%;background:var(--oak)}
.cmp-h>.cmp-b::after{background:var(--marine)}
.cmp-row>.cmp-b .em{font-weight:500}

/* ===========================================================
   K8 · SCHRITTE
   =========================================================== */
.steps{list-style:none;margin:48px 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.steps::before{ /* Verbindungslinie auf Höhe der Pills */
  content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--hair);
}
.steps::after{
  content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--marine);
  transform:scaleX(0);transform-origin:left center;transition:transform 1.6s var(--ease) .2s;
}
.steps.in::after{transform:scaleX(1)}
.steps::before,.steps::after{z-index:0}
.step{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.spill{
  align-self:flex-start;display:inline-flex;align-items:center;gap:9px;height:38px;
  background:#fff;border:1px solid var(--hair);color:var(--marine);border-radius:999px;padding:0 16px;
  text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 0 0 6px var(--step-bg,#fff);
}
.spill .k{font-size:10.5px;letter-spacing:.06em;color:rgba(22,35,58,.5);border-right:1px solid var(--hair);padding-right:9px}
.sec.cream .steps{--step-bg:var(--cream)}
.step h3{font-size:21px;line-height:1.25;margin-top:10px}
.smeta{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600;color:rgba(22,35,58,.55);line-height:1.5}
.step p{font-size:15px;line-height:1.62;color:var(--graphite)}
.step p b{color:var(--marine);font-weight:600}

/* ===========================================================
   K9 · QUIZ (Grundstil; Logik bleibt seitenspezifisch)
   =========================================================== */
.quiz{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:32px;box-shadow:var(--shadow-card);text-align:left}
.quiz-dots{display:flex;gap:6px;margin-bottom:24px}
.quiz-dots i{display:block;flex:1 1 0;max-width:40px;height:4px;border-radius:999px;background:rgba(188,198,220,.5);transition:background .4s ease}
.quiz-dots i.on{background:var(--marine)}
.quiz-dots i.cur{background:linear-gradient(90deg,var(--marine),var(--dove))}
.quiz[data-dots] .qbar{display:none}
.quiz .qbar{height:4px;border-radius:999px;background:rgba(188,198,220,.45);overflow:hidden;margin-bottom:24px}
.quiz .qbar i{display:block;height:100%;width:0;background:var(--marine);border-radius:999px;transition:width .5s var(--ease)}
.quiz .qstep{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:600;color:rgba(22,35,58,.6);margin-bottom:16px}
.quiz .qq{font-size:clamp(22px,2.2vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--marine)}
.quiz .qhint{font-size:15px;line-height:1.6;color:var(--graphite);margin-top:10px}
.quiz .qopts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.quiz .qopt{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:#fff;border:1px solid var(--hair);border-radius:999px;padding:12px 20px;
  font:inherit;font-size:15px;font-weight:500;line-height:1.35;color:var(--marine);text-align:left;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.quiz .qopt svg{display:none}
.quiz.with-icons .qopt svg{display:block;width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.quiz .qopt:hover{background:rgba(188,198,220,.22);border-color:var(--dove)}
.quiz .qopt.sel,.quiz .qopt[aria-pressed="true"]{background:var(--marine);border-color:var(--marine);color:#fff}
.quiz .qopt:focus-visible,.quiz .qback:focus-visible,.quiz .qrestart:focus-visible{outline:2px solid var(--marine);outline-offset:3px}
.quiz .qnav{display:flex;align-items:center;gap:14px;margin-top:20px;min-height:24px}
.quiz .qback,.quiz .qrestart{background:none;border:none;font:inherit;font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(22,35,58,.62);cursor:pointer;padding:6px 0}
.quiz .qback:hover,.quiz .qrestart:hover{color:var(--marine)}
.quiz .qsum{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:16px 0;margin:18px 0 24px;font-size:15px;line-height:1.6}
.quiz .qsum b{color:var(--marine);font-weight:600}
.quiz .hyp{background:var(--cream);border:1px solid var(--hair-soft);border-radius:16px;padding:20px 22px;margin-top:12px}
.quiz .hyp .hh{display:flex;align-items:center;gap:10px}
.quiz .hyp .hh svg{display:none}
.quiz .hyp h4{margin:0;font-size:17px;font-weight:600;color:var(--marine);letter-spacing:-.01em}
.quiz .hyp p{font-size:15px;line-height:1.6;margin-top:8px}
.quiz .hyp .aln{font-size:14.5px;line-height:1.6;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair-soft)}
.quiz .hyp .aln b{color:var(--marine)}
.quiz .qdis{font-size:13px;line-height:1.6;color:var(--muted);border-left:2px solid var(--dove);padding-left:14px;margin:24px 0}
.quiz .qcta{border-top:1px solid var(--hair);padding-top:24px}
.quiz .qcta h3{margin-bottom:16px}
.quiz .qcta .btn{margin-top:8px}
.qnote{font-size:13px;line-height:1.6;color:var(--muted);margin-top:14px}

/* ===========================================================
   K10 · FORMULAR (Unterstrich-Felder)
   =========================================================== */
.fcard-w{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:40px;box-shadow:var(--shadow-card);max-width:760px;margin:0 auto;text-align:left}
.form{position:relative}
.form .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.form label{display:block;margin-bottom:24px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600;color:rgba(22,35,58,.72)}
.form label .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{
  display:block;width:100%;margin-top:8px;padding:10px 0;
  font:inherit;font-size:16px;font-weight:400;text-transform:none;letter-spacing:0;line-height:1.5;color:var(--marine);
  border:0;border-bottom:1px solid var(--dove);border-radius:0;background:transparent;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.form textarea{resize:vertical;min-height:112px}
.form input::placeholder,.form textarea::placeholder{color:rgba(58,61,66,.45)}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--marine);box-shadow:0 1px 0 0 var(--marine)}
.form input:focus-visible,.form textarea:focus-visible{outline:none}
.form .bad{border-bottom-color:#8A2E1F !important;box-shadow:0 1px 0 0 #8A2E1F}
.form .chk{display:flex;gap:12px;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:14px;font-weight:400;line-height:1.55;color:var(--graphite)}
.form .chk input{margin-top:3px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--marine)}
.form .chk input:focus-visible{outline:2px solid var(--marine);outline-offset:2px}
.form .chk a{color:var(--marine);text-decoration:underline;text-underline-offset:2px}
.form .hp{position:absolute;left:-9999px;top:-9999px}
.form .fnav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.form .btn:focus-visible{outline:2px solid var(--marine);outline-offset:3px}
.form .btn:disabled{opacity:.55;cursor:default}
.fnote{font-size:13.5px;color:var(--muted)}
.fnote.err{color:#8A2E1F}

/* ===========================================================
   K11 · PERSON
   =========================================================== */
.person{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.person .img{aspect-ratio:3/4;border-radius:var(--r)}
.person .img img{object-position:50% 30%}
.person h2{margin-top:18px}
.person .lead+.lead{margin-top:16px}

/* ===========================================================
   K12 · LEGAL
   =========================================================== */
.legal{max-width:46em;margin:0 auto;padding:72px var(--gut) 96px}
.legal h1{font-size:clamp(34px,4vw,48px);margin-bottom:32px}
.legal h2{font-size:24px;font-weight:500;line-height:1.25;margin-top:40px;padding-top:28px;border-top:1px solid var(--hair)}
.legal h3{font-size:18px;font-weight:600;margin-top:24px}
.legal p,.legal li{font-size:16px;line-height:1.7;color:var(--graphite)}
.legal p+p{margin-top:12px}
.legal h2+p,.legal h3+p{margin-top:12px}
.legal ul{padding-left:1.2em;margin:12px 0}
.legal a{color:var(--marine);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--dove)}
.legal a:hover{text-decoration-color:var(--marine)}

/* ===========================================================
   ZWEISPALTER (ruhig) + Kontakt-Band mit zwei Buttons
   =========================================================== */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.duo h2{font-size:clamp(26px,3.1vw,42px);max-width:15em}
.duo .lead{margin-top:18px}
.duo .facts3{margin-top:0}
.band .ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Fokus für alle Bedienelemente des Kits */
.vnav-b:focus-visible,.tab:focus-visible,.segbar button:focus-visible,.btn:focus-visible,.tlink:focus-visible{outline:2px solid var(--marine);outline-offset:3px}


/* Kette (4 Glieder, z. B. Mensch → Unternehmen) — in .fp-foot oder frei */
.kette{list-style:none;margin:8px 0 0;padding:40px 0 0;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.kette li{position:relative;display:flex;flex-direction:column;gap:10px}
.kette li:not(:last-child)::after{
  content:"";position:absolute;right:-26px;top:6px;width:12px;height:12px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23BCC6DC' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h8M6.5 2.5 10 6l-3.5 3.5'/%3E%3C/svg%3E");
}
.kk{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:600;color:var(--marine)}
.kk::before{content:"";width:var(--ks,6px);height:var(--ks,6px);border-radius:50%;background:var(--marine);flex:0 0 auto}
.kette h3{font-size:19px;line-height:1.25}
.kette p{font-size:15px;line-height:1.6;color:var(--graphite)}

/* Unterüberschrift im Panel-Text */
.fp-sub{font-size:19px;line-height:1.3;letter-spacing:-.015em;color:var(--marine);font-weight:500;
  margin-top:28px;padding-top:22px;border-top:1px solid var(--hair);width:100%}
.fp-sub+p{margin-top:10px;font-size:15.5px;line-height:1.62}
.fp-sub+p+p{margin-top:10px;font-size:15.5px;line-height:1.62}

/* Große Initiale (A/L/N) als Tab-Überschrift */
.tp-h{display:flex;align-items:baseline;color:var(--marine);font-weight:300;letter-spacing:-.02em;line-height:1}
.tp-h .big{font-size:clamp(48px,4.4vw,64px);font-weight:300;letter-spacing:-.03em;color:var(--acc,var(--marine))}
.tp-h .rest{font-size:clamp(22px,2vw,28px);font-weight:300}
.tp-text>p{margin-top:18px;font-size:16.5px;line-height:1.65}
.tp-vis{position:relative;min-width:0}
.tp-vis .dnext b{letter-spacing:.12em}
.tp-vis .dnext p{font-size:15px;line-height:1.55}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1080px){
  .fpanel{padding:40px;gap:40px}
  .fpanel,.fp-body{grid-template-columns:minmax(0,1fr)}
  .fpanel.rev>.fp-vis{order:0}
  .fp-vis,.tp-vis{width:100%;max-width:580px}
  .values{grid-template-columns:1fr;gap:32px;max-width:40em}
  .value{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:20px;row-gap:8px}
  .value .glyph{grid-row:span 2}
  .value h3{margin-top:0}
  .steps{grid-template-columns:1fr 1fr;row-gap:40px}
  .kette{grid-template-columns:1fr 1fr;row-gap:32px}
  .kette li:nth-child(2)::after{display:none}
  .steps::before,.steps::after{display:none}
  .person{grid-template-columns:1fr;gap:34px}
  .person .img{max-width:420px}
  .duo{grid-template-columns:1fr;gap:32px}
}
@media (max-width:760px){
  .hero.shero{padding:56px var(--gut) 48px}
  .shero h1{font-size:clamp(34px,9vw,42px)}
  .shero .lead{font-size:17px}
  .carousel{margin-top:40px}
  .carousel-shell{border-radius:24px}
  .car-head{padding:16px 16px 0}
  .crow{gap:12px;padding:24px calc(50% - 136px) 88px;
    -webkit-mask-image:none;mask-image:none}
  .carousel .dcard{flex-basis:272px;height:264px;padding:18px 18px 16px}
  .carousel .dcard.is-active{transform:scale(1.02)}
  .dtip{left:20px;max-width:250px}
  .fpanel{padding:28px 22px;border-radius:24px;gap:32px}
  .fp-body{gap:32px}
  .fp-text h2,.fp-head h2{font-size:clamp(26px,7vw,32px)}
  .stack .off-l{margin-right:0}
  .stack .off-r{margin-left:0}
  .stack .overlap{margin-top:-20px}
  .uicard{padding:18px 18px}
  .fact-n{font-size:52px}
  .facts{gap:24px}
  .bento{grid-template-columns:1fr}
  .bcard.span2{grid-column:auto}
  .bcard{padding:28px 24px}
  .cmp-toggle{display:flex;margin:0 0 20px;width:100%}
  .cmp-row{grid-template-columns:minmax(0,1fr)}
  .compare[data-show="a"] .cmp-b,.compare[data-show="b"] .cmp-a{display:none}
  .cmp-h{display:none}
  .cmp-row>div{padding:18px 22px}
  .cmp-row>div::before{left:22px;right:22px}
  .cmp-row.cmp-h+.cmp-row>div{border-radius:var(--r) var(--r) 0 0;padding-top:24px}
  .cmp-row:last-child>div{padding-bottom:24px}
  .kette{grid-template-columns:1fr;gap:24px;padding-top:28px}
  .kette li::after{display:none}
  .steps{grid-template-columns:1fr;row-gap:0;margin-top:36px}
  .step{padding:0 0 32px 32px}
  .step::before{content:"";position:absolute;left:6px;top:17px;bottom:-17px;width:1px;background:var(--hair)}
  .step:last-child::before{display:none}
  .step::after{content:"";position:absolute;left:1px;top:12px;width:11px;height:11px;border-radius:50%;background:#fff;border:1.5px solid var(--marine)}
  .step:last-child::after{background:var(--marine)}
  .spill{height:34px}
  .quiz{padding:24px 20px}
  .quiz .qopt{width:100%}
  .fcard-w{padding:28px 20px}
  .form .fgrid{grid-template-columns:1fr}
  .legal{padding:48px var(--gut) 72px}
}

/* ===========================================================
   REDUCED MOTION
   =========================================================== */
@media (prefers-reduced-motion: reduce){
  .fpill{animation:none;opacity:1}
  .carousel .dcard,.dtip{transition:none}
  .ch-line{stroke-dashoffset:0}
  .ch-area,.ch-fade{opacity:1}
  .ch-seg{stroke-dasharray:var(--s,10) 100}
  .ch-bar,.ch-dot,.ch-node{transform:none}
  .dtrack b{width:var(--w,50%)}
  .steps::after{transform:scaleX(1)}
  [data-stagger].arm>*{opacity:1;transform:none}
  .tp.on{animation:none}
}

/* 2026-09-25 Textpass: Bento-Karten (Arbeitsalltag) mit Frage + Bullets */
.bcard .ask b{color:var(--marine);font-weight:600}
.blist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.blist li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;color:var(--marine)}
.blist li::before{content:"";flex:none;width:14px;height:14px;margin-top:4px;border-radius:99px;background:rgba(188,198,220,.35) no-repeat center/8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%2316233A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.bwork.claim{color:var(--marine);font-weight:500;font-size:15px;line-height:1.5}
.fp-text .hl-close{margin-top:22px;font-size:17px;line-height:1.5;color:var(--marine);font-weight:500;max-width:32em}

/* 2026-09-30 · Werteverständnis (Über uns) – Ring-Diagramm im ALN-Stil (Uicard, Blautöne, animiert) */
.vw-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.vw-text{display:flex;flex-direction:column;gap:18px}
.vw-text h2{text-wrap:balance;max-width:14em}
.vw-text .lead{max-width:32em}
.vw-card{padding:24px 26px 30px}
.vw-legend{margin-left:34%;margin-right:4%}
.vw-legend .chip{cursor:default;transition:transform .3s var(--ease),box-shadow .3s}
.vw-legend .chip.on{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(22,35,58,.5)}
.vw-svg{display:block;width:100%;height:auto}
.vw-halo{fill:rgba(188,198,220,.12)}
.vw-orbit{fill:none;stroke:rgba(188,198,220,.75);stroke-width:1.2}
.vw-seg{stroke:#BCC6DC;stroke-width:1;transition:fill .35s var(--ease),transform .7s var(--ease),stroke .35s;cursor:default}
.vw-seg[data-q="t"]{fill:rgba(188,198,220,.62)}
.vw-seg[data-q="r"]{fill:rgba(188,198,220,.36)}
.vw-seg[data-q="b"]{fill:rgba(188,198,220,.62)}
.vw-seg[data-q="l"]{fill:rgba(188,198,220,.36)}
.vw-inner{fill:#BCC6DC}
.vw-core{fill:var(--marine)}
.vw-c1{font-size:20px;font-weight:600;fill:#fff;letter-spacing:-.01em}
.vw-c2{font-size:12px;fill:rgba(255,255,255,.72)}
.vw-lbl{font-size:18px;font-weight:600;fill:var(--marine);pointer-events:none;transition:fill .35s}
.vw-word{font-size:16px;font-weight:500;fill:var(--marine);transition:opacity .35s}
.vw-dot{fill:var(--marine);transition:opacity .35s}
.vw-svg[data-on] .vw-word,.vw-svg[data-on] .vw-dot{opacity:.28}
.vw-svg[data-on="t"] [data-q="t"],.vw-svg[data-on="r"] [data-q="r"],.vw-svg[data-on="b"] [data-q="b"],.vw-svg[data-on="l"] [data-q="l"]{opacity:1}
.vw-svg[data-on="t"] .vw-seg[data-q="t"],.vw-svg[data-on="r"] .vw-seg[data-q="r"],.vw-svg[data-on="b"] .vw-seg[data-q="b"],.vw-svg[data-on="l"] .vw-seg[data-q="l"]{fill:var(--marine);stroke:var(--marine)}
.vw-svg[data-on="t"] .vw-lbl[data-q="t"],.vw-svg[data-on="r"] .vw-lbl[data-q="r"],.vw-svg[data-on="b"] .vw-lbl[data-q="b"],.vw-svg[data-on="l"] .vw-lbl[data-q="l"]{fill:#fff}
.vw-list{display:none}
@media (max-width:960px){.vw-in{grid-template-columns:1fr;gap:36px}.vw-legend{margin-left:18%}}
@media (max-width:640px){
  .vw-outer,.vw-orbit,.vw-halo{display:none}
  .vw-card{padding:18px 18px 22px}
  .vw-legend{margin-left:0;margin-right:0}
  .vw-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:22px}
  .vw-g{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--hair)}
  .vw-g b{font-size:15px;color:var(--marine);font-weight:600}
  .vw-g span{font-size:14px;line-height:1.5;color:var(--graphite)}
}