/* ============================================================
   FLOW CHROME — MARKEN-SYSTEM & TOKENS
   Zwei Modi (Hell als Basis, Dunkel als Gegenstück), ein
   wählbarer Farbakzent über --accent-h (Farbton 0–360).
   Sättigung und Helligkeit sind pro Modus fest verdrahtet,
   damit jede gewählte Farbe professionell und lesbar bleibt.
   ============================================================ */
:root{
  --accent-h:215;

  --hd-bg:#070709; --hd-surface:#111115;
  --hd-border:rgba(255,255,255,0.08); --hd-chrome:rgba(192,192,192,0.35);
  --hd-text:#F4F4F6; --hd-muted:#94A3B8;

  --hl-bg:#F7F8FA; --hl-surface:#FFFFFF;
  --hl-border:rgba(15,23,42,0.08); --hl-chrome:rgba(51,65,85,0.25);
  --hl-text:#0F172A; --hl-muted:#475569;

  --font-main:'Inter', sans-serif;
  --font-serif:'Cormorant Garamond', serif;

  --nav-h:64px;
  --z-content:1; --z-menu:950; --z-nav:960;
}

/* ============================================================
   Theme Remap über Nav-Theme-Attribut (Mechanik unverändert)
   ============================================================ */
[data-nav-theme="dark"]{
  --t-paper:var(--hd-bg); --t-panel:var(--hd-surface);
  --t-ink:var(--hd-text); --t-ink-2:var(--hd-muted);
  --t-border:var(--hd-border); --t-chrome:var(--hd-chrome);
  --t-accent:hsl(var(--accent-h) 85% 68%);
  --t-accent-vivid:hsl(var(--accent-h) 90% 60%);
  --t-accent-wash:hsl(var(--accent-h) 70% 55% / .14);
  --t-img-filter:saturate(.78) brightness(.86);
  --t-img-data-filter:brightness(.85) contrast(1.02);
  --t-gloss-glow:hsl(var(--accent-h) 80% 60% / .22);
}
[data-nav-theme="light"]{
  --t-paper:var(--hl-bg); --t-panel:var(--hl-surface);
  --t-ink:var(--hl-text); --t-ink-2:var(--hl-muted);
  --t-border:var(--hl-border); --t-chrome:var(--hl-chrome);
  --t-accent:hsl(var(--accent-h) 70% 28%);
  --t-accent-vivid:hsl(var(--accent-h) 80% 42%);
  --t-accent-wash:hsl(var(--accent-h) 70% 45% / .10);
  --t-img-filter:saturate(.84) brightness(1.01) contrast(1.0);
  --t-img-data-filter:none;
  --t-gloss-glow:hsl(var(--accent-h) 70% 40% / .10);
}

/* ============================================================
   Basis & Typografie
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scrollbar-width:none; }
body::-webkit-scrollbar, html::-webkit-scrollbar{ width:0; height:0; display:none; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
html.bh-lock{ overflow:hidden; }
body{
  background:var(--t-paper, var(--hl-bg)); color:var(--t-ink, var(--hl-text));
  font-family:var(--font-main); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  transition:background-color .35s ease, color .35s ease;
}
h1,h2,h3{ font-family:var(--font-main); font-weight:600; line-height:1.08; letter-spacing:-0.02em; }
a{ color:inherit; }
/* Links tragen die Markenfarbe, damit sofort erkennbar ist, dass ein Verweis
   dahinterliegt. Buttons und die grosse Menuenavigation behalten ihre eigene
   Gestalt — sie sind ohnehin als anklickbar zu erkennen. */
.pg-kb-link{
  color:var(--t-accent-vivid);
  text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--t-accent-vivid) 45%, transparent); text-underline-offset:3px;
  transition:text-decoration-color .25s ease, color .25s ease;
}
.pg-kb-link:hover{ color:var(--t-accent); text-decoration-color:var(--t-accent); }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--t-ink, var(--hl-text)); outline-offset:3px; }

/* Spezial-Wort Marken-DNA — Bodoni Italic mit ruhigem Chrom-Schimmer */
@keyframes chromeGlossSlowMotion{
  0%{ background-position:-250% 0; }
  100%{ background-position:250% 0; }
}
.sw{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:1.14em; letter-spacing:.005em; padding-right:.04em;
  background:linear-gradient(110deg,
    var(--t-ink, var(--hl-text)) 0%,
    var(--t-accent-vivid, #64748B) 38%,
    var(--t-ink-2, var(--hl-muted)) 62%,
    var(--t-ink, var(--hl-text)) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:chromeGlossSlowMotion 18s ease-in-out infinite;
  filter:drop-shadow(0 0 14px var(--t-gloss-glow, transparent));
}

/* Skip-Link */
.bh-skip{
  position:fixed; top:10px; left:10px; z-index:calc(var(--z-nav) + 5);
  background:var(--hd-surface); color:var(--hd-text);
  font:700 .85rem var(--font-main); padding:.6em 1em; border:1px solid var(--hd-chrome);
  transform:translateY(-300%); transition:transform .2s ease; text-decoration:none;
}
.bh-skip:focus-visible{ transform:none; }

/* ============================================================
   NAVIGATION — transparente Leiste, nie versteckt
   ============================================================ */
.bh-nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  z-index:var(--z-nav); background:transparent; pointer-events:none;
}
.bh-nav__inner{
  position:relative; height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:clamp(18px, 4vw, 40px);
}
.bh-brand{ pointer-events:auto; display:flex; flex-direction:column; gap:2px; text-decoration:none; }
.bh-brand__name{ font:600 1.35rem var(--font-main); letter-spacing:-0.02em; color:var(--t-ink); transition:color .35s ease; }
.bh-brand__sub{ font:700 .62rem var(--font-main); letter-spacing:.14em; text-transform:uppercase; color:var(--t-accent); transition:color .35s ease; }
.bh-mono{
  pointer-events:auto; display:none;
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:38px; height:38px;
  border:1px solid var(--t-chrome); border-radius:10px;
  font:600 1.1rem var(--font-main); color:var(--t-ink);
  text-decoration:none; text-align:center; line-height:36px;
  background:var(--t-panel); transition:color .35s ease, background-color .35s ease;
}
.bh-actions{ display:flex; align-items:center; gap:12px; }
.bh-mode{
  pointer-events:auto; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; cursor:pointer;
  background:var(--t-panel); border:1px solid var(--t-chrome);
  color:var(--t-ink); transition:background-color .35s ease, color .35s ease;
}
.bh-mode svg{ width:19px; height:19px; display:block; }
/* Der Knopf zeigt den Zustand, in dem die Seite gerade ist, nicht den,
   in den er fuehrt. Hell ist die Sonne, dunkel ist der Mond.
   Die Auswahl braucht dieselbe Spezifitaet wie .bh-mode svg darueber,
   sonst gewinnt dort das display:block und beide Symbole stehen da. */
.bh-mode svg.bh-mode__moon{ display:none; }
.bh-mode svg.bh-mode__sun{ display:block; }
[data-mode="dark"] .bh-mode svg.bh-mode__moon{ display:block; }
[data-mode="dark"] .bh-mode svg.bh-mode__sun{ display:none; }
.bh-cta{
  pointer-events:auto; display:inline-flex; align-items:center; gap:.6em;
  background:linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 35%, #CBD5E1 82%, #FFFFFF 100%);
  color:#070709; font:600 .9rem var(--font-main);
  padding:.72em 1.25em; border-radius:12px; text-decoration:none;
  border:1px solid rgba(51,65,85,0.28);
  box-shadow:0 4px 20px rgba(15,23,42,0.14);
  transition:filter .2s ease;
}
.bh-cta__roll{ position:relative; display:block; overflow:hidden; }
.bh-cta__roll--short{ display:none; }
.bh-cta__text{ display:block; line-height:1.25; transition:transform .35s cubic-bezier(.4,0,.2,1); }
.bh-cta__text + .bh-cta__text{ position:absolute; inset:0; transform:translateY(110%); }
@media (hover:hover) and (pointer:fine){
  .bh-cta:hover .bh-cta__text:first-child{ transform:translateY(-110%); }
  .bh-cta:hover .bh-cta__text + .bh-cta__text{ transform:translateY(0); }
}
.bh-cta:focus-visible .bh-cta__text:first-child{ transform:translateY(-110%); }
.bh-cta:focus-visible .bh-cta__text + .bh-cta__text{ transform:translateY(0); }
.bh-burger{
  pointer-events:auto; width:53px; height:53px;
  display:grid; place-items:center; background:none; border:0; cursor:pointer;
}
.bh-burger__line{
  grid-area:1/1; width:24px; height:2px; background:var(--t-ink);
  transition:transform .3s cubic-bezier(.4,0,.2,1), background-color .35s ease;
}
.bh-burger__line:first-child{ transform:translateY(-4px); }
.bh-burger__line:last-child{ transform:translateY(4px); }
.bh-burger[aria-expanded="true"] .bh-burger__line:first-child{ transform:rotate(45deg); }
.bh-burger[aria-expanded="true"] .bh-burger__line:last-child{ transform:rotate(-45deg); }

/* ============================================================
   OVERLAY-MENÜ
   ============================================================ */
.bh-menu{
  position:fixed; inset:0; z-index:var(--z-menu);
  height:100vh; height:100dvh;
  background:var(--t-paper); color:var(--t-ink);
  clip-path:inset(0 0 100% 0); visibility:hidden;
  transition:clip-path .65s cubic-bezier(.77,0,.18,1), visibility 0s .65s;
  overflow-y:auto; overscroll-behavior:contain;
}
.bh-menu.is-open{
  clip-path:inset(0 0 0 0); visibility:visible;
  transition:clip-path .65s cubic-bezier(.77,0,.18,1), visibility 0s 0s;
}
.bh-menu__grid{
  min-height:100%; display:grid; grid-template-columns:1.25fr 1fr;
  gap:clamp(2rem, 5vw, 5rem);
  padding:calc(var(--nav-h) + 3vh) clamp(18px, 5vw, 64px) 4vh;
  align-items:center;
}
.bh-menu__grid > *{ min-width:0; }
.bh-menu__eyebrow{
  font:700 .72rem var(--font-main); letter-spacing:.18em; text-transform:uppercase;
  color:var(--t-accent); margin-bottom:1.4rem;
}
.bh-missions{ list-style:none; }
.bh-missions li{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.bh-menu.is-open .bh-missions li{ opacity:1; transform:none; }
.bh-menu.is-open .bh-missions li:nth-child(1){ transition-delay:.16s }
.bh-menu.is-open .bh-missions li:nth-child(2){ transition-delay:.22s }
.bh-menu.is-open .bh-missions li:nth-child(3){ transition-delay:.28s }
.bh-menu.is-open .bh-missions li:nth-child(4){ transition-delay:.34s }
.bh-menu.is-open .bh-missions li:nth-child(5){ transition-delay:.40s }
.bh-menu.is-open .bh-missions li:nth-child(6){ transition-delay:.46s }
.bh-menu.is-open .bh-missions li:nth-child(7){ transition-delay:.52s }
.bh-mission{
  position:relative; display:flex; align-items:baseline; gap:clamp(.8rem,2vw,1.4rem);
  padding:.45em .9em; text-decoration:none;
}
.bh-mission__num{ font:700 .78rem var(--font-main); color:var(--t-ink-2); }
.bh-mission__label{
  font:600 clamp(1.7rem, 4.2vw, 2.9rem) var(--font-main);
  letter-spacing:-0.02em; line-height:1.08; color:var(--t-ink);
  text-wrap:balance; transition:color .25s ease;
}
.bh-mission::before, .bh-mission::after{
  content:""; position:absolute; width:16px; height:16px;
  border:2px solid var(--t-accent-vivid); opacity:0;
  transition:opacity .22s ease, transform .22s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.bh-mission::before{ top:0; left:0; border-right:0; border-bottom:0; transform:translate(-8px,-8px); }
.bh-mission::after{ bottom:0; right:0; border-left:0; border-top:0; transform:translate(8px,8px); }
@media (hover:hover) and (pointer:fine){
  .bh-mission:hover::before, .bh-mission:hover::after{ opacity:1; transform:translate(0,0); }
  .bh-mission:hover .bh-mission__label{ color:var(--t-accent); }
}
.bh-menu__panel{
  border:1px solid var(--t-chrome); background:var(--t-panel);
  padding:clamp(1.6rem,2.5vw,2.4rem);
  display:flex; flex-direction:column; gap:1.3rem;
}
.bh-menu__panel h3{ font-size:1.15rem; }
.bh-menu__panel p{ color:var(--t-ink-2); font-size:.95rem; }
.bh-menu__meta{
  grid-column:1 / -1; align-self:end;
  display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between;
  border-top:1px solid var(--t-border); padding-top:1.4rem;
  font:600 .8rem var(--font-main); letter-spacing:.06em;
}
.bh-menu__meta a{ color:var(--t-accent-vivid); text-decoration:none; transition:color .2s ease; }
.bh-menu__meta a:hover{ color:var(--t-accent); }
.bh-menu__meta span{ color:var(--t-ink-2); }

/* ============================================================
   AKZENT-REGLER — eure Farbe
   ============================================================ */
.ac-picker{ display:flex; flex-direction:column; gap:.6rem; }
.ac-picker__row{ display:flex; align-items:center; gap:.9rem; }
.ac-picker__label{
  font:700 .72rem var(--font-main); letter-spacing:.16em; text-transform:uppercase;
  color:var(--t-ink-2);
}
.ac-picker__dot{
  width:18px; height:18px; border-radius:50%; flex:0 0 auto;
  background:var(--t-accent-vivid); border:1px solid var(--t-chrome);
  transition:background-color .2s ease;
}
.ac-hue{
  -webkit-appearance:none; appearance:none; flex:1 1 auto; min-width:0;
  height:10px; border-radius:99px; outline-offset:4px;
  background:linear-gradient(90deg,
    hsl(0 65% 48%), hsl(45 65% 48%), hsl(90 65% 42%), hsl(135 65% 40%),
    hsl(180 65% 40%), hsl(215 70% 48%), hsl(260 65% 52%), hsl(305 65% 48%), hsl(360 65% 48%));
  border:1px solid var(--t-chrome); cursor:pointer;
}
.ac-hue::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 55%, #94A3B8 100%);
  border:1px solid rgba(15,23,42,.4);
  box-shadow:0 1px 6px rgba(15,23,42,.35);
}
.ac-hue::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 55%, #94A3B8 100%);
  border:1px solid rgba(15,23,42,.4);
  box-shadow:0 1px 6px rgba(15,23,42,.35);
}
.ac-picker__reset{
  align-self:flex-start; background:none; border:0; cursor:pointer;
  font:700 .74rem var(--font-main); letter-spacing:.06em;
  color:var(--t-ink-2); text-decoration:underline; text-underline-offset:3px;
  padding:.2em 0;
}
.ac-picker__reset:hover{ color:var(--t-accent); }

/* Scroll-Indikator */
.bh-scrollbar{
  position:fixed; top:calc(var(--nav-h) + 6px); right:9px; bottom:14px; width:5px;
  z-index:10; pointer-events:none; mix-blend-mode:difference;
}
.bh-scrollbar__thumb{ width:100%; height:64px; border-radius:99px; background:#C0C0C0; will-change:transform; }

/* ============================================================
   SEITEN-KAPITEL
   ============================================================ */
.pg-chapter{
  position:relative; z-index:var(--z-content);
  background:var(--t-paper); color:var(--t-ink);
  transition:background-color .35s ease, color .35s ease;
}
.pg-wrap{ width:min(1280px, 90vw); margin-inline:auto; }
.pg-eyebrow{
  font:600 .76rem var(--font-main); letter-spacing:.2em; text-transform:uppercase;
  color:var(--t-accent); margin-bottom:1.2rem; display:block;
  transition:color .35s ease;
}
.pg-title{
  font-size:clamp(1.8rem, 4.5vw, 4rem);
  max-width:22ch; color:var(--t-ink); margin-bottom:1.4rem;
  transition:color .35s ease;
}
.pg-copy{ max-width:54ch; font-size:1.12rem; color:var(--t-ink-2); transition:color .35s ease; }

.pg-line{ display:block; overflow:hidden; }
.pg-line > span{
  display:block; transform:translateY(110%); opacity:0;
  transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}
.pg-reveal.in .pg-line > span{ transform:none; opacity:1; }
.pg-reveal.in .pg-line:nth-child(2) > span{ transition-delay:.08s }
.pg-reveal.in .pg-line:nth-child(3) > span{ transition-delay:.16s }
.pg-reveal.in .pg-line:nth-child(4) > span{ transition-delay:.24s }
.pg-fade{ opacity:0; transition:opacity .9s ease; }
.pg-fade.in{ opacity:1; }

/* ---------- KAPITEL 01 · HERO ---------- */
/* Nur der alte Sticky-Hero war 170vh hoch. Die neue Kopfszene traegt
   denselben Anker, deshalb muss die Regel an die alte Bauform
   gebunden sein, sonst zieht sie den neuen Hero auf 170vh auf. */
#hero.pg-hero-sticky-traeger{ height:170vh; }
.pg-hero-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:flex-end;
}
.pg-hero-bg{
  position:absolute; inset:0; z-index:0;
  /* 29.09.2026: Hintergrundbild entfernt (Jani), die Klasse nutzt keine Seite mehr. */
  background-size:cover; background-position:center;
  filter:var(--t-img-filter); opacity:.97;
  /* Räumlicher Auftakt: das Bild steht in einem Fluchtpunkt-Raum und kippt
     beim Scrollen weg (rotateX), die Maus dreht es minimal seitlich (rotateY).
     Der Scrim darüber bleibt unbewegt — das wirkt wie ein Blick durch ein Fenster.
     Die Grundskalierung deckt die Kanten ab, die beim Kippen sonst frei würden. */
  transform:perspective(1400px) scale(1.09);
  transform-origin:50% 50%;
  backface-visibility:hidden;
  transition:filter .35s ease;
}
.pg-hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, var(--t-paper) 3%, color-mix(in srgb, var(--t-paper) 70%, transparent) 36%, color-mix(in srgb, var(--t-paper) 8%, transparent) 70%),
    linear-gradient(0deg, var(--t-paper) 2%, color-mix(in srgb, var(--t-paper) 38%, transparent) 28%, color-mix(in srgb, var(--t-paper) 4%, transparent) 56%);
  transition:background .35s ease;
}
.pg-hero-inner{
  position:relative; z-index:2;
  padding:calc(var(--nav-h) + 4vh) clamp(18px, 5vw, 64px) 9vh;
  width:min(880px, 92vw);
}
.pg-hero-title{
  font-size:clamp(2.3rem, 5.4vw, 4.8rem);
  line-height:1.02; margin-bottom:1.6rem; max-width:15ch;
}
.pg-hero-sub{
  color:var(--t-ink-2); font-size:clamp(1rem, 1.4vw, 1.18rem);
  max-width:46ch; margin-bottom:2.2rem;
}
/* Situations-Ansprache im Hero — 10.09.2026 */
.pg-hero-wer{
  color:var(--t-ink); font:600 clamp(1.02rem, 1.5vw, 1.24rem) var(--font-main);
  letter-spacing:-0.01em; line-height:1.4; max-width:64ch; margin:0 0 1.15rem;
}
.pg-hero-wer span{
  display:block; margin-top:.3rem;
  font-weight:400; font-size:.9em; color:var(--t-ink-2); letter-spacing:0;
}
.pg-hero-controls{ display:flex; gap:1rem; flex-wrap:wrap; }
.pg-hero-tags{
  display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:3rem;
  border-top:1px solid var(--t-chrome); padding-top:1.2rem;
  font:700 .74rem var(--font-main); letter-spacing:.16em; text-transform:uppercase;
  color:var(--t-ink-2);
}
.pg-btn-chrome{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 35%, #CBD5E1 82%, #FFFFFF 100%);
  color:#070709; padding:.8rem 1.7rem; border-radius:12px; font:600 .88rem var(--font-main);
  text-decoration:none; border:1px solid rgba(51,65,85,0.28); cursor:pointer;
  box-shadow:0 4px 20px rgba(15,23,42,0.16);
}
.pg-btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  background:color-mix(in srgb, var(--t-panel) 55%, transparent);
  color:var(--t-ink); padding:.8rem 1.6rem; border-radius:12px; font:600 .88rem var(--font-main);
  text-decoration:none; border:1px solid var(--t-chrome); cursor:pointer;
  transition:background-color .35s ease, color .35s ease;
}

/* ---------- KAPITEL 02 · BEFUND ---------- */
#befund{ padding-block:clamp(6rem, 14vh, 10rem); }
.pg-statement{
  font:600 clamp(1.9rem, 4.6vw, 4.2rem) var(--font-main);
  line-height:1.16; letter-spacing:-0.02em; color:var(--t-ink);
  max-width:24ch;
}
.pg-split{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem, 5vw, 5rem);
  align-items:stretch; margin-top:clamp(4rem, 9vh, 7rem);
}
.pg-split__num{
  font-size:clamp(4rem, 9vw, 8rem); font-weight:600; line-height:.9;
  color:var(--t-accent-vivid); margin-bottom:1.2rem;
  transition:color .35s ease;
}
.pg-split__sticky{
  position:sticky; top:calc(var(--nav-h) + 2rem);
  background:var(--t-panel); border:1px solid var(--t-chrome);
  padding:clamp(1.8rem, 3vw, 2.6rem);
}
.pg-split__sticky h3{ font-size:1.35rem; margin-bottom:.7rem; }
.pg-split__sticky p{ color:var(--t-ink-2); font-size:.98rem; }
.pg-split__sticky .pg-node{
  width:12px; height:12px; border-radius:50%;
  background:var(--t-accent-vivid);
  margin-bottom:1.2rem;
}
.pg-facts{ display:grid; gap:1.2rem; border-top:1px solid var(--t-border); padding-top:1.6rem; }
.pg-facts div{ display:flex; align-items:baseline; gap:1rem; }
.pg-facts dt{
  font:600 clamp(1.05rem, 1.7vw, 1.4rem) var(--font-main); color:var(--t-accent);
  min-width:9ch; letter-spacing:-0.01em;
}
.pg-facts dd{ color:var(--t-ink-2); font-size:1rem; }
.pg-quotes{ margin-top:1.8rem; display:grid; gap:1.4rem; }
.pg-quote{
  border-left:2px solid var(--t-accent-vivid);
  padding-left:1.2rem;
}
.pg-quote p{
  font:500 1.05rem/1.6 var(--font-main); color:var(--t-ink); letter-spacing:-0.005em;
}
.pg-quote footer{ margin-top:.4rem; font:700 .72rem var(--font-main); letter-spacing:.14em; text-transform:uppercase; color:var(--t-ink-2); }

/* ---------- KAPITEL 03 · SÄULEN ---------- */
#saeulen .pg-hpin{ height:240vh; position:relative; }
.pg-hpin__sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.pg-hpin__head{ padding:calc(var(--nav-h) + 2vh) clamp(18px, 5vw, 64px) 2rem; }
.pg-hpin__track{
  display:flex; gap:clamp(1.5rem, 3vw, 3rem);
  padding-inline:clamp(18px, 5vw, 64px);
  will-change:transform;
}
.pg-pillar{
  flex:0 0 auto; width:min(58vw, 640px);
  background:var(--t-panel); border:1px solid var(--t-chrome);
  padding:clamp(2rem, 4vw, 3.2rem);
}
.pg-pillar__num{ font:600 1.2rem var(--font-main); color:var(--t-accent); margin-bottom:1rem; transition:color .35s ease; }
.pg-pillar__title{ font-size:clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom:.9rem; }
.pg-pillar__desc{ color:var(--t-ink-2); font-size:1.02rem; }

/* ---------- KAPITEL 04 · DIE NEUE WELT (der Weg in vier Schritten) ---------- */
#neuewelt{ padding-block:clamp(6rem, 14vh, 10rem); }

/* Stationskopf: Nummernkreis + Schritt-Etikett, zentriert über dem Inhalt.
   Der große Abstand davor ist Absicht — jeder Schritt soll sacken können. */
.pg-step-head{
  display:grid; justify-items:center; gap:1.1rem;
  margin-top:clamp(4.5rem, 11vh, 8rem);
  text-align:center;
}
.pg-step-head .pg-step__badge{ margin-bottom:0; }
.pg-step-num{
  width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--t-chrome); background:var(--t-panel);
  box-shadow:0 0 0 6px var(--t-accent-wash);
  font:600 1.5rem var(--font-main); color:var(--t-accent);
  transition:color .35s ease, border-color .35s ease;
}

/* Wegstück zwischen den Schritten: eine Linie, die sich beim Scrollen
   von oben nach unten zeichnet, mit Wegpunkt-Raute am Ende. */
.pg-path{
  display:grid; justify-items:center; gap:10px;
  margin-top:clamp(4.5rem, 11vh, 8rem);
}
.pg-path i{
  width:1px; height:clamp(6rem, 16vh, 10rem);
  background:linear-gradient(180deg, var(--t-chrome), var(--t-accent-vivid));
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.1s ease .1s;
}
.pg-path.in i{ transform:scaleY(1); }
.pg-path::after{
  content:""; width:9px; height:9px; transform:rotate(45deg);
  border:1px solid var(--t-accent-vivid); background:var(--t-accent-wash);
}

.pg-step{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem, 5vw, 5rem);
  align-items:center; margin-top:clamp(2.4rem, 5vh, 3.6rem);
}
.pg-step--flip .pg-step__media{ order:-1; }
.pg-step__badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 16px; border-radius:99px;
  background:var(--t-accent-wash);
  border:1px solid var(--t-accent-vivid); color:var(--t-accent);
  font:600 .74rem var(--font-main); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:1.3rem;
  transition:color .35s ease, border-color .35s ease;
}
.pg-step__title{ font-size:clamp(1.6rem, 3.4vw, 2.9rem); margin-bottom:1rem; }
.pg-step__desc{ color:var(--t-ink-2); font-size:1.08rem; margin-bottom:1.4rem; max-width:50ch; }
.pg-step__fact{ display:flex; gap:1rem; align-items:center; font:700 .92rem var(--font-main); color:var(--t-ink); }
.pg-step__fact i{ width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--t-accent-vivid); flex:0 0 auto; }
.pg-step__media{
  position:relative; overflow:hidden;
  border:1px solid var(--t-border);
}
.pg-step__media img{ width:100%; height:clamp(300px, 46vh, 460px); object-fit:cover; filter:var(--t-img-filter); transition:filter .35s ease; }
.pg-step__caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:.8rem 1.2rem;
  background:linear-gradient(180deg, transparent, rgba(7,7,9,.78));
  font:700 .68rem var(--font-main); letter-spacing:.16em; text-transform:uppercase;
  color:#F4F4F6;
}
.pg-step__panel{
  background:var(--t-panel); border:1px solid var(--t-chrome);
  padding:clamp(1.8rem, 3vw, 2.6rem);
  display:grid; gap:1.1rem;
}
.pg-step__panel h4{
  font:700 .74rem var(--font-main); letter-spacing:.18em; text-transform:uppercase;
  color:var(--t-ink-2);
}
.pg-step__panel ul{ list-style:none; display:grid; gap:.8rem; }
.pg-step__panel li{
  display:flex; gap:.9rem; align-items:baseline;
  font:700 .98rem var(--font-main); color:var(--t-ink);
}
.pg-step__panel li::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--t-accent-vivid); flex:0 0 auto; transform:translateY(-1px);
}

/* Schritt 02 als Graph: ein Mittelpunkt, vier Aufgaben nach außen.
   Die Linien liegen als SVG dahinter, die Knoten decken sie mit der
   Panel-Farbe ab, damit keine Linie durch Schrift läuft. */
.pg-graph{
  --nabe:104px;
  position:relative; padding:.4rem 0;
  display:grid;
  grid-template-columns:1fr var(--nabe) 1fr;
  grid-template-rows:auto var(--nabe) auto;
  gap:clamp(.5rem, 1.4vw, .9rem);
  align-items:center;
}
.pg-graph__lines{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; overflow:visible;
}
.pg-graph__lines line{
  stroke:var(--t-chrome); stroke-width:1; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s ease .15s;
}
.pg-fade.in .pg-graph__lines line{ stroke-dashoffset:0; }
/* Die Liste reicht ihre Punkte an das Raster des Graphen durch (display:contents),
   damit Nabe und Knoten echte Rasterzellen belegen. Nichts ist absolut positioniert,
   also kann auch nichts verrutschen, egal wie lang ein Text wird. */
.pg-step__panel ul.pg-graph__nodes{ list-style:none; display:contents; }
.pg-graph__nodes li:nth-child(1){ grid-column:1; grid-row:1; }
.pg-graph__nodes li:nth-child(2){ grid-column:3; grid-row:1; }
.pg-graph__nodes li:nth-child(3){ grid-column:1; grid-row:3; }
.pg-graph__nodes li:nth-child(4){ grid-column:3; grid-row:3; }
.pg-graph__nodes li{
  background:var(--t-panel); border:1px solid var(--t-chrome);
  border-radius:12px; padding:.7em .85em;
  font:700 .8rem var(--font-main); color:var(--t-ink); line-height:1.32;
  text-align:center; align-self:center;
  transition:border-color .3s ease;
}
.pg-graph__nodes li{ display:block; position:relative; z-index:1; }
.pg-graph__nodes li::before{ display:none; }
.pg-graph__nodes li:hover{ border-color:var(--t-accent-vivid); }
.pg-graph__hub{
  grid-column:2; grid-row:2; justify-self:center; align-self:center;
  z-index:2; width:var(--nabe); height:var(--nabe); border-radius:50%;
  display:grid; place-items:center; text-align:center;
  background:var(--t-paper); border:1px solid var(--t-accent-vivid);
  box-shadow:0 0 0 7px var(--t-accent-wash);
  font:600 .74rem var(--font-main); color:var(--t-accent);
  letter-spacing:.02em; line-height:1.2; padding:.4rem;
}

/* Schritt 03 als Checkliste: abgehakt statt aufgezählt. */
.pg-check{ list-style:none; display:grid; gap:.9rem; }
.pg-check li{ position:relative; padding-left:2.1rem; color:var(--t-ink); font-weight:600; }
.pg-check li::before{
  content:""; position:absolute; left:0; top:.18em;
  width:20px; height:20px; border-radius:50%;
  background:var(--t-accent-wash); border:1px solid var(--t-accent-vivid);
}
.pg-check li::after{
  content:""; position:absolute; left:7px; top:.42em;
  width:5px; height:9px; transform:rotate(45deg);
  border-right:2px solid var(--t-accent-vivid);
  border-bottom:2px solid var(--t-accent-vivid);
}

/* ---------- KAPITEL 05 · VISION (Kontrastmoment + eure Farbe) ---------- */
#vision{ padding-block:clamp(6rem, 14vh, 10rem); }
.pg-vision-badges{
  display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.5rem;
}
.pg-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:99px;
  background:var(--t-panel); border:1px solid var(--t-chrome); color:var(--t-ink);
  font:600 .74rem var(--font-main); text-transform:uppercase; letter-spacing:.08em;
}
.pg-badge i{ width:7px; height:7px; border-radius:50%; background:var(--t-accent-vivid); }
.pg-custom{
  margin-top:clamp(3.5rem, 8vh, 6rem);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem, 5vw, 5rem);
  align-items:center;
  background:var(--t-panel); border:1px solid var(--t-chrome);
  padding:clamp(1.8rem, 3.5vw, 3rem);
}
.pg-custom h3{ font-size:clamp(1.4rem, 2.6vw, 2.1rem); margin-bottom:.9rem; }
.pg-custom p{ color:var(--t-ink-2); font-size:1.05rem; max-width:48ch; }
.pg-custom .ac-picker{ min-width:0; }

/* ---------- KAPITEL 06 · ZUKUNFT ---------- */
#zukunft{ position:relative; }
.pg-closing{
  position:relative; min-height:92vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.pg-closing__bg{
  position:absolute; inset:0;
  background-image:url('assets/flow_landscape_vista_5.webp');
  background-size:cover; background-position:center;
  filter:var(--t-img-filter); opacity:.85;
  transition:filter .35s ease;
}
.pg-closing__scrim{
  position:absolute; inset:0;
  background:color-mix(in srgb, var(--t-paper) 68%, transparent);
  transition:background .35s ease;
}
.pg-closing__content{ position:relative; z-index:2; padding:6rem clamp(18px,5vw,64px); }
.pg-closing__title{
  font-size:clamp(2.2rem, 5.6vw, 4.8rem); line-height:1.08; margin-bottom:1.4rem;
  max-width:18ch; margin-inline:auto;
}
.pg-closing__sub{ font-size:1.15rem; color:var(--t-ink-2); max-width:52ch; margin-inline:auto; margin-bottom:1.2rem; }
.pg-closing__note{
  font-size:.98rem; color:var(--t-ink-2); max-width:52ch; margin-inline:auto; margin-bottom:2.4rem;
}
.pg-closing__actions{ display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }
.pg-footer{
  border-top:1px solid var(--t-border);
  padding:clamp(3rem, 7vh, 5rem) clamp(18px,5vw,64px) 2.5rem;
}
.pg-footer__statement{
  font-size:clamp(2rem, 5.4vw, 4.4rem); line-height:1.05; margin-bottom:3rem; max-width:16ch;
}
.pg-footer__grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid var(--t-border);
}
.pg-footer__col h4{
  font:700 .72rem var(--font-main); letter-spacing:.18em; text-transform:uppercase;
  color:var(--t-ink-2); margin-bottom:1rem;
}
.pg-footer__col ul{ list-style:none; }
.pg-footer__col li{ margin-bottom:.5rem; }
.pg-footer__col a{ text-decoration:none; color:var(--t-accent-vivid); font-weight:700; font-size:.95rem; transition:color .2s ease; }
.pg-footer__col a:hover{ color:var(--t-accent); }
.pg-footer__brand{ font:600 1.6rem var(--font-main); letter-spacing:-0.02em; margin-bottom:.4rem; }
.pg-footer__brand-sub{ color:var(--t-ink-2); font-size:.92rem; max-width:34ch; }
.pg-footer__legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding-top:1.6rem;
  font:600 .78rem var(--font-main); letter-spacing:.06em; color:var(--t-ink-2);
}
.pg-footer__legal a{ color:var(--t-accent-vivid); text-decoration:none; }
.pg-footer__legal a:hover{ color:var(--t-accent); }

/* ============================================================
   HERO-EINSTIEG — Wort-Stagger + sanftes Nachziehen
   ============================================================ */
.pg-w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 .06em .08em; margin:0 -.06em -.08em; }
.pg-w > span{
  display:inline-block; transform:translateY(115%) rotate(2.5deg);
  opacity:0; filter:blur(7px); transform-origin:0 100%;
  transition:transform .95s cubic-bezier(.16,1,.3,1), opacity .55s ease, filter .75s ease;
}
.pg-hero-inner.in .pg-w > span{ transform:none; opacity:1; filter:none; }
.pg-hero-inner.in .pg-w:nth-child(2) > span{ transition-delay:.08s }
.pg-hero-inner.in .pg-w:nth-child(3) > span{ transition-delay:.16s }
.pg-hero-inner.in .pg-w:nth-child(4) > span{ transition-delay:.24s }
.pg-hero-inner.in .pg-w:nth-child(5) > span{ transition-delay:.32s }
.pg-hero-rise{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s ease var(--rise-delay,.45s), transform .8s cubic-bezier(.16,1,.3,1) var(--rise-delay,.45s);
}
.pg-hero-inner.in .pg-hero-rise{ opacity:1; transform:none; }
.pg-hero-bg{ will-change:transform; }

#hero .pg-hero-inner{ position:relative; z-index:2; }

/* ============================================================
   MARKEN-INTRO — orchestrierter Auftakt (einmal pro Sitzung)
   ============================================================ */
.pg-intro{
  position:fixed; inset:0; z-index:calc(var(--z-nav) + 8);
  background:var(--hd-bg); display:grid; place-items:center;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s cubic-bezier(.77,0,.18,1);
}
.pg-intro.is-done{ clip-path:inset(0 0 100% 0); pointer-events:none; }
.pg-intro__mark{
  font:600 clamp(2.4rem,7vw,5rem)/1 var(--font-main); letter-spacing:-0.05em;
  color:#F4F4F6; display:flex; gap:.06em; overflow:hidden;
}
.pg-intro__mark span{
  display:inline-block; transform:translateY(110%);
  animation:pgIntroLetter .75s cubic-bezier(.16,1,.3,1) forwards;
}
.pg-intro__mark span:nth-child(2){ animation-delay:.07s }
.pg-intro__mark span:nth-child(3){ animation-delay:.14s }
.pg-intro__mark span:nth-child(4){ animation-delay:.21s }
.pg-intro__line{
  position:absolute; bottom:0; left:0; height:2px; width:100%;
  background:var(--hd-chrome); transform:scaleX(0); transform-origin:0 50%;
  animation:pgIntroLine 1.05s cubic-bezier(.4,0,.2,1) .1s forwards;
}
@keyframes pgIntroLetter{ to{ transform:none; } }
@keyframes pgIntroLine{ to{ transform:scaleX(1); } }

/* ============================================================
   MIKROINTERAKTIONEN — Ripple + magnetische Buttons
   ============================================================ */
.pg-btn-chrome, .pg-btn-ghost, .bh-cta{
  position:relative; overflow:hidden;
  transform:translate3d(var(--mx,0px), var(--my,0px), 0);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.pg-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:currentColor; opacity:.22; transform:translate(-50%,-50%) scale(0);
  animation:pgRipple .62s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes pgRipple{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }

/* ============================================================
   MARQUEE — Markenband
   ============================================================ */
.pg-marquee{ border-block:1px solid var(--t-border); padding-block:clamp(1rem,2.2vh,1.5rem); overflow:hidden; }
.pg-marquee__inner{ transform:skewX(calc(var(--vel,0) * -0.3deg)); }
.pg-marquee__track{
  display:flex; width:max-content;
  animation:pgMarquee 32s linear infinite;
  animation-play-state:running;
  animation-duration:calc(32s / var(--mq-boost, 1));
}
.pg-marquee__group{ display:flex; align-items:center; flex:0 0 auto; }
.pg-marquee__group > span{
  font:600 clamp(1.8rem,4.4vw,3.4rem)/1.15 var(--font-main); letter-spacing:-0.02em;
  color:var(--t-ink); white-space:nowrap; padding-inline:.55em; opacity:.92;
}
.pg-marquee__group > i{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:var(--t-accent-vivid); transition:background-color .35s ease;
}
@keyframes pgMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   DATENBILDER — Basis, Beleg-Figure, Vergleichs-Regler
   ============================================================ */
.pg-img-data{ filter:var(--t-img-data-filter); transition:filter .35s ease; }
.pg-img-data--dark{ filter:none; }

.pg-evidence{ margin:1.3rem 0 1.5rem; }
.pg-evidence a{ display:block; border:1px solid var(--t-chrome); overflow:hidden; background:#0B0B10; }
.pg-evidence img{ width:100%; height:auto; display:block; transition:transform .55s cubic-bezier(.16,1,.3,1); }
@media (hover:hover) and (pointer:fine){
  .pg-evidence a:hover img{ transform:scale(1.035); }
}
.pg-evidence figcaption{
  margin-top:.65rem; font:700 .66rem var(--font-main);
  letter-spacing:.14em; text-transform:uppercase; color:var(--t-ink-2);
}

.pg-compare{ margin-top:clamp(4rem,9vh,7rem); }
.pg-compare__stage{
  position:relative; margin-top:1.8rem; aspect-ratio:3/2;
  overflow:hidden; border:1px solid var(--t-chrome); background:var(--t-panel);
  touch-action:pan-y; --pos:50%;
}
.pg-compare__stage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}
.pg-compare__top{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.pg-compare__handle{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px;
  background:var(--t-accent-vivid); cursor:ew-resize; touch-action:none;
}
.pg-compare__handle::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 55%, #94A3B8 100%);
  border:1px solid rgba(15,23,42,.4); box-shadow:0 2px 12px rgba(15,23,42,.4);
}
.pg-compare__handle::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%; background:hsl(var(--accent-h) 80% 42%); z-index:1;
}
.pg-compare__tag{
  position:absolute; top:12px; padding:5px 12px; border-radius:99px;
  border:1px solid var(--t-chrome); background:color-mix(in srgb, var(--t-panel) 84%, transparent);
  color:var(--t-ink); font:600 .66rem var(--font-main); letter-spacing:.14em; text-transform:uppercase;
  pointer-events:none;
}
.pg-compare__tag--a{ left:12px; }
.pg-compare__tag--b{ right:12px; }
.pg-compare__actions{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.2rem; }

/* ============================================================
   DATENREISE — Scroll-Erzählung (Signature-Szene)
   ============================================================ */
.pg-dr{ height:320vh; position:relative; }
.pg-dr__sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center;
}
.pg-dr__grid{
  display:grid; grid-template-columns:.78fr 1.22fr;
  gap:clamp(2rem,3.5vw,4rem); align-items:center;
}
.pg-dr__caps{ margin-top:1.6rem; display:grid; gap:1rem; }
.pg-dr__cap{
  padding-left:1.1rem; border-left:2px solid var(--t-border);
  color:var(--t-ink-2); font-size:1.02rem; opacity:.35;
  transition:opacity .3s ease, border-color .3s ease;
}
.pg-dr__cap strong{ display:block; color:var(--t-ink); font-weight:600; margin-bottom:.15rem; }
.pg-dr__cap.is-on{ opacity:1; border-color:var(--t-accent-vivid); }
.pg-dr__stage{
  position:relative; aspect-ratio:3/2; overflow:hidden;
  border:1px solid var(--t-chrome); background:#0B0B10;
}
.pg-dr__layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pg-dr__layer--b{ opacity:0; }
.pg-dr__net{ position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.pg-dr__net path{
  fill:none; stroke:var(--t-accent-vivid); stroke-width:2px;
  vector-effect:non-scaling-stroke; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  filter:drop-shadow(0 0 4px var(--t-gloss-glow));
}
.pg-dr__net circle{ fill:var(--t-accent-vivid); opacity:0; }
.pg-dr__final{ position:absolute; inset:0; clip-path:inset(0 100% 0 0); }
.pg-dr__final img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pg-dr__tag{
  position:absolute; left:12px; bottom:12px; padding:5px 12px; border-radius:99px;
  border:1px solid rgba(192,192,192,.35); background:rgba(7,7,9,.74); color:#F4F4F6;
  font:600 .66rem var(--font-main); letter-spacing:.14em; text-transform:uppercase;
}

/* ============================================================
   HPIN-FORTSCHRITT · TEMPO-EFFEKT
   ============================================================ */
.pg-hpin__bar{
  width:min(320px,40vw); height:2px; margin-top:1.1rem;
  background:var(--t-chrome); overflow:hidden;
}
.pg-hpin__bar i{
  display:block; width:100%; height:100%;
  background:var(--t-accent-vivid); transform:scaleX(0); transform-origin:0 50%;
}
.pg-step__media img{ transform:translateY(calc(var(--vel,0) * -1.3px + var(--par,0) * 1px)) scale(1.07); }

/* Datenbilder in den Akten. Infografiken tragen ihre Aussage in Farbe und Schrift,
   deshalb hier kein Entsaettigen, kein Beschnitt durch object-fit:cover und kein
   Parallax-Zoom. Die Bildunterschrift steht unter dem Bild statt darueber, damit sie
   keine Legende verdeckt. */
.pg-step__media--data{ background:var(--t-panel); }
.pg-step__media.pg-step__media--data img{
  height:auto; object-fit:contain;
  filter:var(--t-img-data-filter); transform:none;
}
.pg-step__media--data a{ display:block; cursor:zoom-in; }
.pg-step__media--data .pg-step__caption{
  position:static; background:none; color:var(--t-ink-2);
  border-top:1px solid var(--t-border);
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.pg-lightbox{ border:0; padding:0; background:transparent; max-width:none; max-height:none; width:100vw; height:100vh; height:100dvh; }
.pg-lightbox[open]{ display:grid; place-items:center; }
.pg-lightbox::backdrop{ background:rgba(7,7,9,.86); }
.pg-lightbox__frame{
  width:min(1520px,94vw); max-height:92vh; display:flex; flex-direction:column;
  background:var(--t-paper); color:var(--t-ink); border:1px solid var(--t-chrome);
}
.pg-lightbox__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.65rem 1rem; border-bottom:1px solid var(--t-border);
}
.pg-lightbox__caption{ font:700 .7rem var(--font-main); letter-spacing:.12em; text-transform:uppercase; color:var(--t-ink-2); }
.pg-lightbox__tools{ display:flex; gap:.6rem; flex:0 0 auto; }
.pg-lightbox__tool{
  background:var(--t-panel); border:1px solid var(--t-chrome); color:var(--t-ink);
  font:700 .78rem var(--font-main); padding:.45em .95em; border-radius:9px; cursor:pointer;
}
.pg-lightbox__scroll{ overflow:auto; overscroll-behavior:contain; }
.pg-lightbox__img{ display:block; width:100%; height:auto; filter:none; cursor:zoom-in; }
.pg-lightbox.is-zoomed .pg-lightbox__img{ width:1536px; max-width:none; cursor:zoom-out; }

/* ============================================================
   SEITEN-WIPE — Übergang zu Unterseiten
   ============================================================ */
.pg-wipe{
  position:fixed; inset:0; z-index:calc(var(--z-nav) + 6);
  background:var(--hd-bg); display:grid; place-items:center;
  clip-path:inset(100% 0 0 0); visibility:hidden; pointer-events:none;
  transition:clip-path .55s cubic-bezier(.77,0,.18,1), visibility 0s .55s;
}
.pg-wipe.is-in{
  clip-path:inset(0 0 0 0); visibility:visible;
  transition:clip-path .55s cubic-bezier(.77,0,.18,1), visibility 0s 0s;
}
.pg-wipe::after{
  content:"FLOW"; font:600 1.5rem var(--font-main); letter-spacing:-0.02em; color:#F4F4F6;
}

@media (max-width:1023px){
  .pg-custom{ grid-template-columns:1fr; }
  .pg-dr__grid{ grid-template-columns:1fr; gap:1.6rem; }
}

@media (min-width:768px) and (max-height:620px){
  .pg-hero-title{ font-size:clamp(1.6rem, 3.4vw, 2.6rem); margin-bottom:.9rem; }
  .pg-hero-sub{ display:none; }
  .pg-hero-wer{ display:none; }
  .pg-hero-tags{ display:none; }
  .pg-hero-inner{ padding-top:calc(var(--nav-h) + 1vh); padding-bottom:4vh; }
  .pg-hpin__head{ padding-top:calc(var(--nav-h) + 1vh); padding-bottom:1rem; }
  .pg-hpin__head .pg-title{ font-size:clamp(1.4rem, 3vw, 2.2rem); margin-bottom:.6rem; }
  .pg-pillar{ padding:1.4rem 1.6rem; }
  .pg-pillar__title{ font-size:1.25rem; margin-bottom:.5rem; }
  .pg-pillar__desc{ font-size:.94rem; }
}

@media (max-width:767px){
  :root{ --nav-h:75px; }
  .bh-brand{ display:none; }
  .bh-mono{ display:block; position:static; transform:none; flex:0 0 auto; }
  .bh-actions{ flex:1 1 auto; justify-content:flex-end; gap:8px; }
  .bh-mode{ width:40px; height:40px; }
  .bh-cta{ font-size:.78rem; padding:.55em .9em; }
  .bh-cta__roll--long{ display:none; }
  .bh-cta__roll--short{ display:block; }
  .bh-menu__grid{ grid-template-columns:1fr; align-items:start; }
  .bh-mission__label{ font-size:clamp(1.45rem, 7vw, 2.1rem); }
  #hero.pg-hero-sticky-traeger{ height:auto; }
  .pg-hero-sticky{ position:relative; height:auto; min-height:100svh; align-items:flex-end; }
  .pg-hero-title{ font-size:clamp(1.85rem, 8.4vw, 2.4rem); hyphens:auto; }
  .pg-statement{ font-size:clamp(1.65rem, 7.4vw, 2.1rem); }
  .pg-title{ hyphens:auto; }
  .pg-hero-inner{ padding-top:calc(var(--nav-h) + 6vh); padding-bottom:3rem; }
  .pg-split{ grid-template-columns:1fr; }
  .pg-split__sticky{ position:static; }
  #saeulen .pg-hpin{ height:auto; }
  .pg-hpin__sticky{ position:static; height:auto; overflow:visible; }
  .pg-hpin__track{ flex-direction:column; transform:none !important; }
  .pg-pillar{ width:100%; }
  .pg-step{ grid-template-columns:1fr; }
  .pg-step--flip .pg-step__media{ order:0; }
  .pg-footer__grid{ grid-template-columns:1fr; }
  .pg-compare__actions{ flex-direction:column; align-items:stretch; }
  .pg-compare__actions .pg-btn-ghost{ justify-content:center; }
  .pg-step__media img{ transform:none; }
  /* Mobil hat der Graph keine Flaeche fuer Linien: Nabe oben, Knoten darunter. */
  .pg-graph__lines{ display:none; }
  .pg-graph{ display:block; }
  .pg-step__panel ul.pg-graph__nodes{ display:grid; grid-template-columns:1fr; gap:.8rem; }
  .pg-graph__nodes li{ grid-column:auto !important; grid-row:auto !important; }
  .pg-graph__hub{ margin:0 auto 1.3rem; }
  .pg-hpin__bar{ display:none; }
  .pg-marquee__group > span{ font-size:clamp(1.5rem,7vw,1.9rem); }
  .pg-dr{ height:auto; }
  .pg-dr__sticky{ position:static; height:auto; overflow:visible; display:block; padding-block:1rem; }
  .pg-dr__stage{ aspect-ratio:auto; border:0; background:none; overflow:visible; display:grid; gap:12px; }
  .pg-dr__layer, .pg-dr__final{ position:static; opacity:1 !important; clip-path:none !important; width:100%; height:auto; border:1px solid var(--t-chrome); }
  .pg-dr__final img{ position:static; width:100%; height:auto; }
  .pg-dr__net, .pg-dr__tag{ display:none; }
  .pg-dr__cap{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .sw{ animation:none; }
  .bh-cta__text{ transition:none; }
  .bh-cta:hover .bh-cta__text:first-child,
  .bh-cta:focus-visible .bh-cta__text:first-child{ transform:none; }
  .bh-cta:hover .bh-cta__text + .bh-cta__text,
  .bh-cta:focus-visible .bh-cta__text + .bh-cta__text{ transform:translateY(110%); }
  .bh-cta:hover{ filter:brightness(1.08); }
  .bh-burger__line{ transition:none; }
  .bh-menu, .bh-menu.is-open{ transition:none; }
  .bh-missions li{ transition:none; opacity:1; transform:none; }
  .bh-mission::before, .bh-mission::after{ transition:none; }
  .pg-chapter{ transition:none; }
  .pg-line > span{ transition:none; transform:none; opacity:1; }
  .pg-fade{ transition:none; opacity:1; }
  .pg-path i{ transition:none; transform:none; }
  #saeulen .pg-hpin{ height:auto; }
  .pg-hpin__sticky{ position:static; height:auto; overflow:visible; }
  .pg-hpin__track{ flex-direction:column; transform:none !important; }
  .pg-pillar{ width:100%; transform:none !important; }
  .pg-w > span{ transition:none; transform:none; opacity:1; filter:none; }
  .pg-hero-rise{ transition:none; opacity:1; transform:none; }
  .pg-hero-bg{ transform:none !important; }
  .pg-marquee__track{ animation:none; }
  .pg-intro{ display:none; }
  .pg-btn-chrome, .pg-btn-ghost, .bh-cta{ transform:none !important; transition:none; }
  .pg-ripple{ display:none; }
  .pg-marquee__inner{ transform:none; }
  .pg-step__media img{ transform:none; }
  .pg-graph__lines line{ transition:none; stroke-dashoffset:0; }
  .pg-statement .pg-line{ transform:none !important; }
  .pg-hpin__bar{ display:none; }
  .pg-wipe{ display:none; }
  .pg-dr{ height:auto; }
  .pg-dr__sticky{ position:static; height:auto; overflow:visible; display:block; padding-block:1rem; }
  .pg-dr__stage{ aspect-ratio:auto; border:0; background:none; overflow:visible; display:grid; gap:12px; }
  .pg-dr__layer, .pg-dr__final{ position:static; opacity:1 !important; clip-path:none !important; width:100%; height:auto; border:1px solid var(--t-chrome); }
  .pg-dr__final img{ position:static; width:100%; height:auto; }
  .pg-dr__net, .pg-dr__tag{ display:none; }
  .pg-dr__cap{ opacity:1; }
}

@media (forced-colors: active){
  .bh-burger__line{ forced-color-adjust:none; background:CanvasText; }
  .bh-scrollbar__thumb{ forced-color-adjust:none; background:CanvasText; }
}

/* ---------- WARTELISTE (06.09.2026, minimal) ---------- */
.pg-wl{ max-width:36rem; margin:0 auto 1.2rem; text-align:left; }
.pg-wl__row{ display:flex; gap:.8rem; flex-wrap:wrap; }
.pg-wl__input{ flex:1 1 14rem; min-width:0; height:3.1rem; border-radius:12px; border:1px solid var(--t-chrome);
  background:color-mix(in srgb, var(--t-panel) 70%, transparent); color:var(--t-ink); padding:0 1.1rem; font:400 1rem var(--font-main); }
.pg-wl__input::placeholder{ color:var(--t-ink-2); }
.pg-wl__input:focus{ outline:2px solid var(--t-accent-vivid); outline-offset:2px; }
.pg-wl__check{ display:flex; gap:.6rem; align-items:flex-start; margin-top:.9rem; font-size:.85rem; color:var(--t-ink-2); line-height:1.5; }
.pg-wl__check input{ margin-top:.25rem; flex:0 0 auto; accent-color:var(--t-accent-vivid); }
.pg-wl__check a{ color:var(--t-accent-vivid); }
.pg-wl__status{ margin-top:.7rem; font-size:.9rem; min-height:1.3em; color:var(--t-ink); }
.pg-wl__sr{ position:absolute; left:-9999px; }
@media (max-width:600px){ .pg-wl__row .pg-btn-chrome{ width:100%; justify-content:center; } }

/* ---------- KI-HINWEIS an allen Bildern (06.09.2026) ---------- */
.pg-ki{ position:absolute; top:.7rem; left:.7rem; z-index:3; pointer-events:none;
  font:600 .6rem var(--font-main); letter-spacing:.14em; text-transform:uppercase; line-height:1;
  color:#fff; background:rgba(7,7,9,.62); padding:.4rem .62rem; border-radius:999px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.pg-ki--static{ position:static; display:inline-block; margin-right:.7rem; pointer-events:auto; }
.pg-evidence, .pg-step__media{ position:relative; }

/* ---------- DIE TÜREN (07.09.2026) ----------
   Das Angebot steht nicht als Katalog am Ende, sondern dort in der
   Geschichte, wo die Frage entsteht: nach dem Befund die Orientierung,
   an den vier Schritten der Neuen Welt die vier Einstiege. Eine Tür ist
   eine schmale, gewaschene Fläche mit einer Linienzeichnung, die zeigt,
   was man bekommt. Sie wirbt nicht, sie zeigt. */
.pg-tuer{
  margin-top:2rem;
  display:grid; grid-template-columns:150px 1fr; gap:1.5rem; align-items:start;
  padding:1.5rem 1.6rem;
  background:var(--t-accent-wash);
  border:1px solid var(--t-border); border-left:2px solid var(--t-accent-vivid);
  transition:background-color .35s ease, border-color .35s ease;
}
.pg-tuer:focus{ outline:none; }
.pg-tuer__art{ width:150px; height:auto; display:block; margin-top:.2rem; }
.pg-tuer__art *{ vector-effect:non-scaling-stroke; }
.pg-tuer__art .ln{ fill:none; stroke:var(--t-ink-2); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
.pg-tuer__art .ac{ fill:none; stroke:var(--t-accent-vivid); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pg-tuer__art .dot{ fill:var(--t-accent-vivid); }
.pg-tuer__art .mute{ fill:var(--t-ink-2); opacity:.32; }
.pg-tuer__art .box{ fill:var(--t-panel); }
.pg-tuer__art text{ font-family:var(--font-main); font-weight:600; font-size:8.5px; fill:var(--t-ink-2); }
.pg-tuer__label{
  display:block; font:600 .68rem var(--font-main); letter-spacing:.18em; text-transform:uppercase;
  color:var(--t-accent); margin-bottom:.45rem;
}
.pg-tuer__title{ font-size:1.15rem; margin-bottom:.55rem; line-height:1.2; }
.pg-tuer__title small{ display:block; font:500 .82rem var(--font-main); color:var(--t-ink-2); letter-spacing:0; margin-top:.2rem; }
.pg-tuer p{ color:var(--t-ink-2); font-size:.97rem; max-width:52ch; }
.pg-tuer--pair{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.pg-tuer--pair .pg-tuer{ margin-top:0; grid-template-columns:1fr; gap:1rem; }
.pg-tuer--pair .pg-tuer__art{ width:118px; }

/* ---------- KAPITEL 06 · WO ANFANGEN? ---------- */
#angebot{ padding-block:clamp(6rem, 14vh, 10rem); }
.pg-fragen{ margin-top:2.8rem; border-top:1px solid var(--t-border); }
.pg-frage{
  display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center;
  padding:1.7rem 0; border-bottom:1px solid var(--t-border);
}
.pg-frage__q{ font:600 clamp(1.15rem, 2.1vw, 1.65rem) var(--font-main); letter-spacing:-0.015em; line-height:1.25; color:var(--t-ink); }
.pg-frage__a b{ display:block; font-weight:600; color:var(--t-ink); margin-bottom:.15rem; }
.pg-frage__a span{ display:block; color:var(--t-ink-2); font-size:.95rem; margin-bottom:.45rem; }
.pg-frage__a .pg-kb-link{ font-size:.88rem; font-weight:600; }
/* Antwortspalte der vier Sätze — 10.09.2026 */
.pg-frage[id]{ scroll-margin-top:calc(var(--nav-h) + 1.6rem); }
.pg-frage__a span.pg-frage__lead{ font-size:1.05rem; line-height:1.5; margin-bottom:.55rem; }
.pg-frage__a span.pg-frage__why{ font-size:.95rem; color:var(--t-ink-2); margin-bottom:.6rem; }
/* Anreißer „Wenn bei euch …" unter dem Hero — 10.09.2026 */
.pg-wenn{ padding-top:3.4rem; padding-bottom:1rem; }
.pg-wenn .pg-fragen{ margin-top:1.4rem; }
.pg-wenn .pg-frage{ grid-template-columns:1.6fr .4fr; padding:1.25rem 0; }
.pg-wenn .pg-frage__q{ font-size:clamp(1.02rem, 1.7vw, 1.3rem); font-weight:500; }
.pg-wenn .pg-frage__a{ text-align:right; }
@media (max-width:767px){
  .pg-wenn .pg-frage{ grid-template-columns:1fr; }
  .pg-wenn .pg-frage__a{ text-align:left; }
}
.pg-angebot__foot{ margin-top:2.4rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2rem; }
.pg-angebot__foot p{ max-width:60ch; color:var(--t-ink-2); font-size:.98rem; margin:0; }

/* ---------- WAS WIR MACHEN + FAQ (07.09.2026, ergaenzt) ---------- */
.pg-block-head{ margin-top:3.4rem; max-width:60ch; }
.pg-block-head h3{ font-size:clamp(1.3rem, 2.4vw, 1.9rem); margin:.4rem 0 .7rem; }
.pg-was{ margin-top:2rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:1.1rem; }
.pg-was__card{ background:var(--t-panel); border:1px solid var(--t-chrome); padding:1.5rem 1.4rem; display:grid; gap:.5rem; align-content:start; transition:background-color .35s ease, border-color .35s ease; }
.pg-was__num{ font:600 .72rem var(--font-main); letter-spacing:.18em; text-transform:uppercase; color:var(--t-accent); }
.pg-was__card h4{ font-size:1.08rem; margin:0; }
.pg-was__card p{ color:var(--t-ink-2); font-size:.94rem; margin:0; }
.pg-faq{ margin-top:2rem; border-top:1px solid var(--t-border); }
.pg-faq__item{ border-bottom:1px solid var(--t-border); padding:1.3rem 0; }
.pg-faq__item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; font:600 1.02rem var(--font-main); color:var(--t-ink); }
.pg-faq__item summary::-webkit-details-marker{ display:none; }
.pg-faq__item summary::after{ content:"+"; font:600 1.3rem var(--font-main); color:var(--t-accent); flex:0 0 auto; transition:transform .25s ease; }
.pg-faq__item[open] summary::after{ transform:rotate(45deg); }
.pg-faq__item p{ margin-top:.8rem; color:var(--t-ink-2); font-size:.97rem; max-width:62ch; }
.pg-hakt{ margin-top:2.2rem; padding:1.4rem 1.6rem; background:var(--t-accent-wash); border-left:2px solid var(--t-accent-vivid); }
.pg-hakt p{ color:var(--t-ink); font-size:.98rem; max-width:66ch; margin:0; }
.pg-hakt .pg-kb-link{ font-weight:600; }
.pg-fit{ margin-top:2rem; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.pg-fit__col{ background:var(--t-panel); border:1px solid var(--t-chrome); padding:1.6rem 1.6rem; }
.pg-fit__col h4{ font-size:1rem; margin-bottom:1.1rem; color:var(--t-ink); }
.pg-fit__col ul{ list-style:none; display:grid; gap:.85rem; }
.pg-fit__col li{ position:relative; padding-left:1.7rem; color:var(--t-ink-2); font-size:.95rem; line-height:1.5; }
.pg-fit__col--ja li::before{ content:""; position:absolute; left:0; top:.3em; width:9px; height:9px; border-radius:50%; background:var(--t-accent-vivid); }
.pg-fit__col--nein{ opacity:.85; }
.pg-fit__col--nein li::before{ content:""; position:absolute; left:0; top:.35em; width:9px; height:9px; border-radius:50%; border:1px solid var(--t-ink-2); background:transparent; }

@media (max-width:767px){
  .pg-tuer{ grid-template-columns:1fr; gap:1rem; padding:1.2rem 1.2rem; }
  .pg-tuer__art{ width:120px; }
  .pg-tuer--pair{ grid-template-columns:1fr; }
  .pg-frage{ grid-template-columns:1fr; gap:.8rem; }
  .pg-fit{ grid-template-columns:1fr; }
}

/* ============================================================
   ENTZERRUNG SCHRITT 02 — 10.09.2026
   ============================================================ */
.pg-step__fact{ margin-top:-.3rem; margin-bottom:.1rem; }
.pg-tuer__title small{ margin-top:.3rem; }
.pg-tuer__title{ margin-bottom:.9rem; }
.pg-tuer p{ line-height:1.62; }
.pg-step:has(.pg-tuer--pair){ grid-template-columns:1fr; align-items:stretch; gap:2.4rem; }
.pg-step:has(.pg-tuer--pair) .pg-tuer--pair{ gap:1.6rem; margin-top:1.6rem; }
.pg-step:has(.pg-tuer--pair) .pg-step__desc{ max-width:64ch; }

/* ---------- Gespraechsformular Kapitel 07 (10.09.2026) ---------- */
.pg-wl--gespraech{ max-width:40rem; }
.pg-wl__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.pg-wl__area{ height:auto; min-height:6.4rem; width:100%; margin-top:.8rem; padding:.9rem 1.1rem; line-height:1.55; resize:vertical; font:400 1rem var(--font-main); }
.pg-wl__send{ width:100%; justify-content:center; margin-top:1rem; }
.pg-wl__hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
@media (max-width:600px){
  .pg-wl__grid{ grid-template-columns:1fr; }
}


/* Blocksatz im Fliesstext + buendige Fakten-Liste (11.09.2026) */
.pg-copy{ text-align:left; hyphens:auto; -webkit-hyphens:auto; text-wrap:pretty; }
@media (max-width:600px){ .pg-copy{ text-align:left; } }
.pg-facts{ grid-template-columns:max-content 1fr; column-gap:1.25rem; row-gap:1.2rem; align-items:baseline; }
.pg-facts div{ display:contents; }
.pg-facts dt{ min-width:0; }
@media (max-width:600px){
  .pg-facts{ grid-template-columns:1fr; row-gap:.25rem; }
  .pg-facts dd{ margin-bottom:.9rem; }
}

/* Lehre hebt sich von den Befunden ab (11.09.2026) */
.pg-quote:not(.pg-quote--lehre) p{ color:var(--t-ink-2); font-weight:400; }
.pg-quote--lehre{
  border-left-width:3px;
  background:var(--t-panel);
  padding:1.05rem 1.2rem;
  margin-top:.2rem;
}
.pg-quote--lehre p{ font-size:1.14rem; font-weight:600; color:var(--t-ink); }
.pg-quote--lehre footer{ color:var(--t-accent); }

.pg-hpin__lead{ color:var(--t-ink-2); font-size:1.02rem; max-width:62ch; margin-top:.7rem; }


/* ============================================================
   Mehrseitige Struktur ab 12.09.2026 · Ergänzungen für die
   neuen Seiten (Hauptseite, Digital-Check, KI im Team,
   Werkzeuge, Prompten, Gespräch). Alles darüber ist die
   unveränderte Gestaltung der bisherigen Seite.
   ============================================================ */

/* Auf den neuen Seiten gibt es keine eigene Scroll-Leiste, also die
   native wieder einschalten. */
html, body{ scrollbar-width:auto; }
body::-webkit-scrollbar, html::-webkit-scrollbar{ width:auto; height:auto; display:block; }
.bh-scrollbar{ display:none; }

/* Die Einblendungen laufen wieder über den Beobachter in site.js
   bzw. im Inline-Skript von eigene-software-bauen.html. Der frühere
   !important-Block hat sie stillgelegt, obwohl der Beobachter lief. */

.pg-sec{ padding-block:clamp(3.2rem, 7vh, 5.5rem); }
.pg-sec + .pg-sec{ border-top:1px solid var(--t-border); }

/* Seitenkopf ohne Hintergrundbild */
.pg-phero{ padding-top:calc(var(--nav-h) + clamp(2.6rem, 7vh, 5.5rem)); padding-bottom:clamp(2.4rem, 5vh, 4rem); }
.pg-phero .pg-title{ max-width:18ch; margin-bottom:1rem; }
.pg-phero__sub{ max-width:58ch; font-size:clamp(1.08rem, 1.5vw, 1.28rem); color:var(--t-ink-2); line-height:1.55; }
.pg-phero__wer{ margin-top:1.1rem; font-weight:600; color:var(--t-ink); font-size:1.05rem; }
.pg-phero__wer span{ display:block; font-weight:400; color:var(--t-ink-2); font-size:.98rem; margin-top:.2rem; }
.pg-phero__row{ margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

/* Leistungskarten auf der Hauptseite */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.1rem; margin-top:2rem; }
.svc{
  display:grid; grid-template-rows:auto auto 1fr auto auto; gap:.55rem; align-content:start;
  background:var(--t-panel); border:1px solid var(--t-chrome); padding:1.6rem 1.5rem 1.4rem;
  border-top:3px solid var(--t-accent-vivid); text-decoration:none; color:inherit;
  transition:transform .25s ease, border-color .25s ease;
}
.svc:hover{ transform:translateY(-2px); border-color:var(--t-accent-vivid); }
.svc__num{ font:700 .7rem var(--font-main); letter-spacing:.14em; text-transform:uppercase; color:var(--t-accent); }
.svc h3{ font-size:1.22rem; margin:0; color:var(--t-ink); }
.svc p{ margin:0; color:var(--t-ink-2); font-size:.96rem; }
.svc__meta{ margin-top:.6rem; font-size:.86rem; color:var(--t-ink-2); display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
.svc__meta b{ color:var(--t-ink); font-weight:600; }
.svc__link{ margin-top:.5rem; font-weight:600; color:var(--t-accent); text-decoration:none; }
.svc__link::after{ content:" →"; }
.svc--quiet{
  border-top-color:var(--t-chrome); grid-column:1 / -1;
  grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; align-items:center; column-gap:1.6rem;
}
.svc--quiet .svc__num{ grid-column:1; grid-row:1; }
.svc--quiet h3{ grid-column:1; grid-row:2; }
.svc--quiet p{ grid-column:2; grid-row:1 / span 2; max-width:64ch; }
.svc--quiet .svc__meta{ grid-column:3; grid-row:1; margin-top:0; }
.svc--quiet .svc__link{ grid-column:3; grid-row:2; margin-top:0; }
@media (max-width:860px){
  .svc--quiet{ grid-template-columns:1fr; }
  .svc--quiet .svc__num, .svc--quiet h3, .svc--quiet p, .svc--quiet .svc__meta, .svc--quiet .svc__link{ grid-column:1; grid-row:auto; }
}

/* Preisblock auf den Leistungsseiten */
.price{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.6rem; align-items:baseline;
  background:var(--t-panel); border:1px solid var(--t-chrome); padding:1.4rem 1.6rem; margin-top:1.6rem; max-width:640px;
}
.price__big{ font:600 clamp(1.8rem, 3.2vw, 2.4rem)/1.1 var(--font-main); letter-spacing:-0.01em; color:var(--t-ink); }
.price__big small{ font-size:.55em; font-weight:500; color:var(--t-ink-2); margin-left:.3rem; }
.price__what{ color:var(--t-ink-2); font-size:.98rem; }
.price__gr{ grid-column:1 / -1; margin-top:.6rem; padding-top:.7rem; border-top:1px solid var(--t-border); color:var(--t-ink); font-size:.96rem; }
.price__gr b{ color:var(--t-accent); }
.price__fn{ grid-column:1 / -1; font-size:.84rem; color:var(--t-ink-2); }

/* Ehrlicher Hinweiskasten (Artikel 4, BAFA) */
.pg-note{
  border-left:3px solid var(--t-accent-vivid); background:var(--t-accent-wash);
  padding:1.1rem 1.3rem; margin-top:1.6rem; max-width:64ch;
}
.pg-note p{ margin:0; color:var(--t-ink); font-size:.98rem; }
.pg-note p + p{ margin-top:.6rem; }
.pg-note .pg-eyebrow{ display:block; margin-bottom:.4rem; }

/* Ablauf in drei Schritten */
.pg-ablauf{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.2rem; margin-top:1.8rem; counter-reset:ab; }
.pg-ablauf > div{ position:relative; padding-top:2.4rem; }
.pg-ablauf > div::before{
  counter-increment:ab; content:counter(ab, decimal-leading-zero);
  position:absolute; top:0; left:0; font:600 1.2rem var(--font-main); color:var(--t-accent);
}
.pg-ablauf h4{ font-size:1.05rem; margin:0 0 .35rem; }
.pg-ablauf p{ margin:0; color:var(--t-ink-2); font-size:.96rem; }

/* Zwei Spalten Text/Liste */
.pg-2col{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem, 4vw, 3.5rem); align-items:start; }
@media (max-width:860px){ .pg-2col{ grid-template-columns:1fr; } }

/* Fuß: Markenhinweis */
.pg-footer__tm{ margin-top:1.4rem; font-size:.7rem; color:var(--t-ink-2); max-width:none; line-height:1.5; text-align:left; opacity:.85; }

/* Gespräch-Seite ohne Hintergrundbild */
.pg-closing--plain{ min-height:auto; padding-block:clamp(3rem, 8vh, 6rem); }
.pg-closing--plain .pg-closing__bg, .pg-closing--plain .pg-closing__scrim{ display:none; }

@media (max-width:600px){
  .price{ grid-template-columns:1fr; }
  .pg-phero__row .pg-btn-chrome, .pg-phero__row .pg-btn-ghost{ width:100%; text-align:center; }
}

/* Felder-Karten als Links */
a.pg-was__card{ text-decoration:none; color:inherit; }
a.pg-was__card:hover{ border-color:var(--t-accent-vivid); }
.pg-was__link{ margin-top:.5rem; font-size:.86rem; font-weight:600; color:var(--t-accent); }
.pg-was__link::after{ content:" →"; }
@media (min-width:900px){ #felder .pg-was, .pg-was#felder{ grid-template-columns:repeat(3, 1fr); } }

/* Hero der Ursprungsseite auf der Hauptseite, ohne Scroll-Pin */
#hero.pg-hero--static{ height:auto; }
#hero.pg-hero--static .pg-hero-sticky{ position:relative; height:auto; min-height:min(92svh, 860px); }
#hero.pg-hero--static .pg-hero-bg{ transform:none !important; }
#hero.pg-hero--static .pg-hero-inner{ position:relative; z-index:2; }

/* Farbregler in der Leiste, neben Sonne und Mond (12.09.2026) */
.bh-hue{
  pointer-events:auto; display:flex; align-items:center; gap:8px;
  height:44px; padding:0 12px; border-radius:12px;
  background:var(--t-panel); border:1px solid var(--t-chrome);
  transition:background-color .35s ease, border-color .35s ease;
}
.bh-hue__dot{ width:10px; height:10px; border-radius:50%; background:var(--t-accent-vivid); flex:0 0 auto; }
.bh-hue .ac-hue{ width:96px; height:8px; flex:0 0 auto; }
.bh-hue .ac-hue::-webkit-slider-thumb{ width:16px; height:16px; }
.bh-hue .ac-hue::-moz-range-thumb{ width:16px; height:16px; }
@media (max-width:900px){ .bh-hue{ display:none; } }
#vision .pg-custom{ grid-template-columns:1fr; }
#vision .pg-vision-badges{ margin-top:1.4rem; }

/* Hauptseite v2 nach Chace-Logik (14.09.2026) */
.pg-x{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.8rem; }
.pg-x li{ position:relative; padding-left:2.1rem; color:var(--t-ink); font-size:1.02rem; }
.pg-x li::before{ content:"×"; position:absolute; left:0; top:-.05em; font:600 1.4rem/1 var(--font-main); color:var(--t-accent-vivid); }
.pg-beweis{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.8rem; }
.pg-beweis .pg-evidence{ margin:0; }
.pg-quotes--row{ grid-template-columns:1fr 1fr 1.3fr; gap:1.4rem; margin-top:2rem; }
.pg-wege{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; margin-top:2rem; }
.pg-weg{ background:var(--t-panel); border:1px solid var(--t-chrome); border-top:3px solid var(--t-chrome); padding:1.6rem 1.5rem 1.4rem; display:grid; gap:.7rem; align-content:start; }
.pg-weg h3{ font-size:1.3rem; margin:0; }
.pg-weg p{ margin:0; color:var(--t-ink-2); font-size:.97rem; }
.pg-weg .pg-check{ margin-top:.4rem; }
.pg-weg .pg-check li{ font-weight:500; font-size:.94rem; }
.pg-weg .svc__link{ margin-top:.6rem; }
.pg-weg--top{ border-top-color:var(--t-accent-vivid); }
.pg-check--big{ margin-top:1.6rem; }
.pg-check--big li{ font-size:1.12rem; font-weight:600; margin-bottom:.9rem; }
.pg-faq__item summary small{ display:block; font-weight:400; font-size:.86rem; color:var(--t-ink-2); margin-top:.15rem; }
#gespraech .pg-wl{ margin:0; }
@media (max-width:900px){
  .pg-beweis, .pg-quotes--row, .pg-wege{ grid-template-columns:1fr; }
}


/* ============================================================
   WEBWERK DESIGN ENGINE — LUXURY B2B STANDARDS FOR FLOW
   Sheet-Stacking, Ambient Glow, Metriken-Leiste, Audit-Widget,
   Vorher/Nachher-Evidenz, ROI-Kalkulator & High-End-Komponenten
   ============================================================ */

:root {
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ww-radius-lg: 2.5rem;
  --ww-radius-md: 1.5rem;
  --ww-radius-sm: 1rem;
}

/* ---------- Typography & Gradients ---------- */
.ww-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
  display: inline-block;
  margin-bottom: 1rem;
}
.ww-eyebrow--muted {
  color: rgba(255, 255, 255, 0.66);
}
.ww-eyebrow--dark {
  color: rgba(15, 23, 42, 0.5);
}

.ww-title {
  font-family: var(--font-main);
  font-size: clamp(2.2rem, 4.8vw, 4.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.038em;
  text-wrap: balance;
  margin: 0 0 1.25rem;
}

.ww-title--md {
  font-size: clamp(1.85rem, 3.8vw, 3.2rem);
  letter-spacing: -0.032em;
}

.ww-gradient-text {
  background: linear-gradient(180deg, var(--t-ink) 0%, color-mix(in srgb, var(--t-ink) 72%, transparent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ww-gradient-text-light {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.75) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ww-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.08em;
  color: var(--t-accent-vivid);
  -webkit-text-fill-color: var(--t-accent-vivid);
}

.ww-lead {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.65;
  color: var(--t-ink-2);
  max-width: 58ch;
  margin: 0 0 2rem;
}
.ww-lead--light {
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- Buttons & Pills ---------- */
.ww-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 9999px;
  background: var(--t-ink);
  color: var(--t-paper);
  font-family: var(--font-main);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.85rem 2rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}
.ww-btn-pill:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.ww-btn-pill span.ww-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.ww-btn-pill:hover span.ww-arrow {
  transform: translateX(4px);
}

.ww-btn-pill--light {
  background: #FFFFFF;
  color: #0a0a0a;
}
.ww-btn-pill--light:hover {
  background: rgba(255, 255, 255, 0.92);
}

.ww-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  font-family: var(--font-main);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.85rem 1.8rem;
  text-decoration: none;
  border: 1px solid currentColor;
  opacity: 0.65;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ww-btn-ghost:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* ---------- Modern Sticky Glass Navigation ---------- */
.ww-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav); /* 22.09.2026 (A1): vorher 900, lag unter dem Menü (--z-menu 950); der Burger war bei offenem Menü verdeckt */
  width: 100%;
  height: 64px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(247, 248, 250, 0.85);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
[data-mode="dark"] .ww-header {
  background: rgba(10, 10, 10, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* 22.09.2026 (A6): Die Schriftfarbe der Wortmarke folgt data-nav-theme, der Hintergrund
   folgte nur dem Modus. Über dunklen Abschnitten war "FLOW" im hellen Modus unsichtbar (1,03:1).
   Hell: Hintergrund folgt dem Nav-Theme. Dunkel: Hintergrund bleibt dunkel, Schrift bleibt hell. */
html[data-mode="light"] .ww-header[data-nav-theme="dark"] {
  background: rgba(10, 10, 10, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-mode="dark"] .ww-header[data-nav-theme="light"] {
  --t-ink: var(--hd-text);
  --t-ink-2: var(--hd-muted);
  --t-panel: var(--hd-surface);
  --t-border: var(--hd-border);
  --t-chrome: var(--hd-chrome);
  /* 23.09.2026, Nachtrag zu A6: Ohne --t-paper stand „Gespräch vereinbaren“ im dunklen Modus
     weiß auf weiß (1,03:1). Die Akzentwerte folgen jetzt ebenfalls dem dunklen Kopf. */
  --t-paper: var(--hd-bg);
  --t-accent: hsl(var(--accent-h) 85% 68%);
  --t-accent-vivid: hsl(var(--accent-h) 90% 60%);
}

.ww-header__inner {
  width: min(1720px, 94vw);
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.ww-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.ww-brand:hover {
  opacity: 0.8;
}
.ww-brand__mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--t-ink);
  color: var(--t-paper);
  display: grid;
  place-items: center;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}
.ww-brand__title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--t-ink);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.ww-brand__badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
}

.ww-nav-menu {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
/* Sieben Links, Modus, Farbregler und Gesprächsknopf passen erst ab rund 1340px in eine Zeile.
   Darunter übernimmt das Menü hinter dem Burger, sonst scrollt die Seite seitlich. */
@media (max-width: 1360px) {
  .ww-nav-menu { display: none; }
}

.ww-nav-link {
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--t-ink-2);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ww-nav-link:hover, .ww-nav-link.is-active {
  color: var(--t-ink);
  background: rgba(15, 23, 42, 0.05);
}
[data-mode="dark"] .ww-nav-link:hover, [data-mode="dark"] .ww-nav-link.is-active {
  background: rgba(255, 255, 255, 0.08);
}

.ww-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Compact Nav Pill CTA */
.ww-nav-cta {
  border-radius: 9999px;
  background: var(--t-ink);
  color: var(--t-paper);
  font-family: var(--font-main);
  font-size: 0.84rem;
  font-weight: 500;
  padding: 0.55rem 1.25rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ww-nav-cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .ww-nav-cta { display: none; }
}

/* ---------- Sheet Stacking Architecture ---------- */
.ww-sheet {
  position: relative;
  z-index: 10;
  margin-top: -2rem;
  border-radius: var(--ww-radius-md) var(--ww-radius-md) 0 0;
  overflow: clip;
  transition: background-color 0.35s ease, color 0.35s ease;
}
@media (min-width: 768px) {
  .ww-sheet {
    margin-top: -2.75rem;
    border-radius: var(--ww-radius-lg) var(--ww-radius-lg) 0 0;
  }
}
#anzeige.ww-sheet {
  border-top: 1px solid var(--t-border);
  box-shadow: 0 -24px 60px -15px rgba(15, 23, 42, 0.08);
}
[data-mode="dark"] #anzeige.ww-sheet {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -24px 60px -15px rgba(0, 0, 0, 0.5);
}

.ww-sheet--light {
  background: var(--hl-bg);
  color: var(--hl-text);
}
[data-mode="dark"] .ww-sheet--light {
  background: #0f1117;
  color: #f1f5f9;
}

.ww-sheet--dark {
  background: #0a0a0a !important;
  color: #ffffff !important;
}

.ww-sheet--darker {
  background: #141414 !important;
  color: #ffffff !important;
}

.ww-sheet-inner {
  width: min(1720px, 94vw);
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(5.5rem, 9vw, 10rem) clamp(1.2rem, 4vw, 3.5rem);
}

.ww-dot-grid-dark {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 24px 24px;
}
.ww-dot-grid-light {
  background-image: radial-gradient(circle, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Ambient Radial Glow */
.ww-glow-orb {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
}

/* ---------- Hero Section Layout ---------- */
.ww-hero {
  position: relative;
  /* Kein fester Anteil der Schirmhoehe mehr. Auf hohen Schirmen entstand
     sonst ein breites leeres Band ueber der Ueberschrift, weil der Inhalt
     mittig sitzt und der Rest nur Foto war. Jetzt traegt der Inhalt die
     Hoehe, die Deckelung haelt sie auf grossen Schirmen im Rahmen. */
  min-height: min(calc(82svh - 64px), 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-bottom: 2rem;
}
@media (min-width: 1024px) {
  .ww-hero { min-height: min(calc(86svh - 64px), 880px); }
}

.ww-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  width: 100%;
}
@media (max-width: 1024px) {
  .ww-hero__grid {
    grid-template-columns: 1fr;
  }
}

/* Metrics Row (Webwerk divide-x pattern) */
.ww-metrics {
  display: flex;
  align-items: stretch;
  margin-top: 2.75rem;
  max-width: 600px;
  border-top: 1px solid var(--t-border);
  padding-top: 1.75rem;
}
.ww-metrics__col {
  flex: 1;
  padding: 0 1.5rem;
  border-right: 1px solid var(--t-border);
}
.ww-metrics__col:first-child {
  padding-left: 0;
}
.ww-metrics__col:last-child {
  border-right: none;
  padding-right: 0;
}
.ww-metrics__num {
  font-family: var(--font-main);
  font-size: clamp(2rem, 3.5vw, 3.1rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--t-ink);
}
.ww-metrics__label {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--t-ink-2);
  margin-top: 0.5rem;
}

/* ---------- Hero Interactive Operations Card ---------- */
.ww-hero-card {
  position: relative;
  border-radius: var(--ww-radius-md);
  background: var(--t-panel);
  border: 1px solid var(--t-chrome);
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.16);
  padding: 1.75rem;
  overflow: hidden;
}
[data-mode="dark"] .ww-hero-card {
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6);
}

.ww-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--t-border);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}
.ww-card-header__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-accent-vivid);
}

.ww-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: wwPulse 2s infinite;
}
.ww-pulse-dot--red {
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}
@keyframes wwPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.ww-ops-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ww-ops-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--t-border);
}
[data-mode="dark"] .ww-ops-item {
  background: rgba(255, 255, 255, 0.04);
}
.ww-ops-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--t-ink);
}
.ww-ops-meta {
  font-size: 0.75rem;
  color: var(--t-ink-2);
}
.ww-ops-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: hsl(var(--accent-h) 70% 50% / 0.12);
  color: var(--t-accent-vivid);
}

/* ---------- Problem 3-Column Breakdown ---------- */
.ww-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3.5rem;
}
@media (max-width: 860px) {
  .ww-problem-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.ww-problem-col {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
}
.ww-problem-col h3 {
  font-size: 1.125rem;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0 0 0.75rem;
}
.ww-problem-col p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* ---------- Audit / Comparison Widget (1:1 Webwerk-Style) ---------- */
.ww-audit-wrapper {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

.ww-floating-chip {
  position: absolute;
  top: -14px;
  right: 12px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.ww-audit-card {
  background: #FFFFFF;
  color: #0f172a;
  border-radius: var(--ww-radius-sm);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
  border: 1px solid rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.ww-audit-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.ww-audit-table th {
  padding: 1rem 1.25rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94a3b8;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ww-audit-table td {
  padding: 0.85rem 1.25rem;
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}
.ww-audit-table tr.is-highlight {
  background: hsl(var(--accent-h) 70% 50% / 0.04);
}

.ww-tag-missing {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  margin-left: 0.5rem;
}

.ww-badge-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
}
.ww-badge-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fee2e2;
  color: #ef4444;
}


/* ---------- Evidence Dual Cards & ROI Calculation ---------- */
.ww-evidence-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 960px) {
  .ww-evidence-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.ww-evidence-card {
  position: relative;
  border-radius: var(--ww-radius-sm);
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  color: #0f172a;
}
.ww-evidence-card--subdued {
  opacity: 0.94;
}
.ww-evidence-card--active {
  border-color: color-mix(in srgb, var(--t-accent-vivid) 35%, transparent);
  box-shadow: 0 25px 60px -10px color-mix(in srgb, var(--t-accent-vivid) 18%, transparent);
}

.ww-card-media {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.ww-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ww-card-media__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, transparent 80%);
}
.ww-card-media__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.ww-card-media__tag--vorher {
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.85);
}
.ww-card-media__tag--nachher {
  background: var(--t-accent-vivid);
  color: #FFFFFF;
}

.ww-card-media__caption {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  color: #FFFFFF;
}
.ww-card-media__caption h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}
.ww-card-media__caption p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.ww-card-body {
  padding: 1.25rem;
}
/* Hinweis auf dem Bild, dass es KI-generiert ist. Steht oben rechts,
   damit es nicht mit dem Vorher/Nachher-Schild oben links kollidiert. */
.ww-media-ki {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  pointer-events: none;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  background: rgba(7, 7, 9, 0.62);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Beobachtung und Befund im Fuss der Evidenzkarte. */
.ww-evidence-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--t-ink-2);
}
.ww-evidence-quote {
  margin: 0.9rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--t-border);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--t-ink);
  font-style: italic;
  text-wrap: pretty;
}

.ww-evidence-divider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ww-divider-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  background: var(--t-panel);
  border: 1px solid var(--t-chrome);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t-ink-2);
}
@media (max-width: 960px) {
  .ww-divider-badge svg { transform: rotate(90deg); }
}

/* ---------- Interactive Process Tabs (#so-funktionierts) ---------- */

/* ---------- Target Industries Showcase (#branchen) ---------- */
.ww-industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.ww-industry-card {
  position: relative;
  border-radius: var(--ww-radius-sm);
  background: var(--t-panel);
  border: 1px solid var(--t-chrome);
  padding: 1.75rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ww-industry-card:hover {
  transform: translateY(-4px);
  border-color: var(--t-accent-vivid);
  box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.08);
}
.ww-industry-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-accent-vivid);
  margin-bottom: 0.6rem;
}
.ww-industry-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--t-ink);
  margin: 0 0 0.5rem;
}
.ww-industry-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--t-ink-2);
  margin: 0;
}

/* ---------- FAQ Accordion ---------- */
.ww-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  margin-top: 3.5rem;
}
@media (max-width: 900px) {
  .ww-faq-grid {
    grid-template-columns: 1fr;
  }
}

.ww-faq-item {
  border-bottom: 1px solid var(--t-border);
}
.ww-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-main);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--t-ink);
  cursor: pointer;
  transition: color 0.2s ease;
}
.ww-faq-trigger:hover {
  color: var(--t-accent-vivid);
}
.ww-faq-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--t-ink-2);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.ww-faq-item.is-open .ww-faq-icon {
  transform: rotate(45deg);
  color: var(--t-accent-vivid);
}
.ww-faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ww-faq-item.is-open .ww-faq-content {
  grid-template-rows: 1fr;
}
.ww-faq-inner {
  overflow: hidden;
}
.ww-faq-text {
  padding-bottom: 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--t-ink-2);
  margin: 0;
}

/* ---------- 4-Column Structured Footer ---------- */
.ww-footer {
  background: var(--t-panel);
  border-top: 1px solid var(--t-border);
  padding: clamp(4rem, 6vw, 6rem) clamp(1.2rem, 4vw, 3.5rem) 2.5rem;
  /* Die Fusszeile traegt die Aussage als groesstes Schriftelement der
     Seite und nimmt dafuer die ganze Schirmhoehe ein. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.ww-footer__grid {
  width: min(1720px, 94vw);
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 960px) {
  .ww-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .ww-footer__grid {
    grid-template-columns: 1fr;
  }
}

.ww-footer h4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--t-ink-2);
  margin: 0 0 1.25rem;
}
.ww-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ww-footer ul li a {
  font-size: 0.875rem;
  color: var(--t-ink-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ww-footer ul li a:hover {
  color: var(--t-ink);
}

.ww-footer__legal {
  width: min(1720px, 94vw);
  max-width: 100%;
  margin: 3.5rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--t-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--t-ink-2);
}
.ww-footer__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
   ATMOSPHAERE — vier feste Hintergrundebenen
   Liegen hinter allen Panels (z-index 0) und sind vor allem im
   Hero sichtbar, wo kein Panel den Untergrund verdeckt. Rein
   dekorativ, deshalb aria-hidden und pointer-events:none.
   ============================================================ */
.ww-atmos,
.ww-atmos > * {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ww-atmos { overflow: hidden; }

/* 1 · Raster, zur Mitte hin ausgeblendet */
.ww-atmos__grid {
  background-size: 52px 52px;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--t-ink) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--t-ink) 3.5%, transparent) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 4%, transparent 66%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 4%, transparent 66%);
}

/* 2 · Weiche Farbfelder in der Akzentfarbe */
.ww-atmos__blobs > i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--t-accent);
  filter: blur(200px);
  opacity: .16;
  mix-blend-mode: multiply;
  animation: wwBlobDrift 28s ease-in-out infinite alternate;
}
.ww-atmos__blobs > i:nth-child(1) { width: 62vw; height: 62vw; top: -26%; left: -14%; animation-delay: 0s; }
.ww-atmos__blobs > i:nth-child(2) { width: 48vw; height: 48vw; bottom: -18%; right: -12%; animation-delay: -9s; }
.ww-atmos__blobs > i:nth-child(3) { width: 40vw; height: 40vw; top: 38%; left: 34%; animation-delay: -17s; }

[data-nav-theme="dark"] .ww-atmos__blobs > i,
[data-mode="dark"] .ww-atmos__blobs > i {
  mix-blend-mode: screen;
  opacity: .16;
  filter: blur(210px);
}

@keyframes wwBlobDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(4%, 12%) scale(1.04); }
  66%  { transform: translate(-8%, 4%) scale(.96); }
  100% { transform: translate(4%, -4%) scale(1.08); }
}

/* 3 · Feine Koernung, damit die Flaechen nicht digital-glatt wirken.
   Inline als Data-URI, damit kein zusaetzlicher Request entsteht. */
.ww-atmos__grain {
  opacity: .032;
  mix-blend-mode: overlay;
  background-size: 170px 170px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
}

/* 4 · Vignette. Liegt ueber den Panels, aber unter Menue und Leiste. */
.ww-atmos-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: calc(var(--z-menu) - 10);
  background: radial-gradient(circle at center, transparent 52%, rgba(15, 23, 42, .05) 100%);
}
[data-mode="dark"] .ww-atmos-vignette {
  background: radial-gradient(circle at center, transparent 52%, rgba(0, 0, 0, .38) 100%);
}

/* Mausfolgender Lichtschein. Nur auf Zeigergeraeten, nie auf Touch. */
.ww-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 680px;
  height: 680px;
  margin: -340px 0 0 -340px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  mix-blend-mode: multiply;
  background: radial-gradient(circle, color-mix(in srgb, var(--t-accent) 11%, transparent) 0%, transparent 68%);
  transition: opacity .5s ease;
  will-change: transform;
}
[data-mode="dark"] .ww-cursor-glow {
  mix-blend-mode: screen;
  background: radial-gradient(circle, color-mix(in srgb, var(--t-accent) 13%, transparent) 0%, transparent 68%);
}

@media (prefers-reduced-motion: reduce) {
  .ww-atmos__blobs > i { animation: none; }
  .ww-cursor-glow { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .ww-cursor-glow { display: none; }
}


/* Auf schmalen Schirmen untereinander statt in drei engen Spalten,
   sonst bricht jedes Label nach zwei Woertern um. */
@media (max-width: 560px) {
  .ww-metrics { display: grid; grid-template-columns: 1fr; gap: 1.1rem; max-width: none; }
  .ww-metrics__col {
    padding: 0 0 1.1rem;
    border-right: 0;
    border-bottom: 1px solid var(--t-border);
  }
  .ww-metrics__col:last-child { padding-bottom: 0; border-bottom: 0; }
  .ww-metrics__num { display: inline-block; min-width: 3.5rem; }
}

/* ============================================================
   UNTERSEITEN — gemeinsame Bauteile
   Dieselbe Sprache wie die Startseite: Panels, Punktraster,
   kurze Überschriften, ein Element je Abschnitt.
   ============================================================ */

/* Seitenkopf. Flacher als der Hero der Startseite, damit der
   Inhalt früher beginnt. */
.ww-page-hero {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.ww-page-hero > .ww-sheet-inner {
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 3vh, 2.5rem));
  padding-bottom: clamp(12rem, 24vh, 20rem);
}
@media (max-width: 980px) {
  .ww-page-hero > .ww-sheet-inner {
    padding-top: calc(var(--nav-h) + 1.25rem);
    padding-bottom: clamp(7rem, 14vh, 11rem);
  }
}
.ww-page-hero .ww-title {
  max-width: 28ch;
  margin: 0 0 1.25rem;
}
.ww-page-hero .ww-lead {
  max-width: 60ch;
  margin: 0 0 1.2rem;
}
.ww-page-hero .ww-kopf-split { align-items: start; }
.ww-page-hero__spalte-text {
  padding-top: 0;
}

.ww-page-hero__wer {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--t-ink);
  font-weight: 600;
}
.ww-page-hero__wer span {
  display: block;
  margin-top: 0.2rem;
  font-weight: 400;
  color: var(--t-ink-2);
}

.ww-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

/* Zwei Spalten, Text links, Element rechts. */
.ww-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .ww-split { grid-template-columns: 1fr; }
}

/* Schrittfolge: nummeriert, mit feiner Oberlinie je Spalte. */
.ww-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.8rem);
  margin-top: clamp(2rem, 4vh, 3rem);
}
.ww-step-col { border-top: 1px solid var(--t-border); padding-top: 1.1rem; }
.ww-step-col__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
  margin-bottom: 0.55rem;
}
.ww-step-col h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--t-ink);
}
.ww-step-col p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--t-ink-2);
}

/* Merkmalsliste mit Haken. */
.ww-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.ww-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--t-ink-2);
}
.ww-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--t-accent-vivid);
}

/* Hinweiskasten: eine Randlinie in der Akzentfarbe, keine Karte. */
.ww-note {
  margin-top: clamp(1.6rem, 3vh, 2.4rem);
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--t-accent-vivid);
  background: var(--t-accent-wash);
  border-radius: 0 var(--ww-radius-sm) var(--ww-radius-sm) 0;
}
.ww-note h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
}
.ww-note p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--t-ink-2); }

/* Preisblock. Steht bewusst ohne Zahl. */
.ww-price {
  margin-top: clamp(1.5rem, 3vh, 2.2rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--t-border);
  border-radius: var(--ww-radius-md);
  background: var(--t-panel);
}
.ww-price p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--t-ink-2); }
.ww-price p + p {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--t-border);
  font-size: 0.92rem;
}

/* ---------- Dokument-Attrappe ----------
   Zeigt das Ergebnis, statt es zu beschreiben: ein Blatt mit Kopf,
   Punkten und Fussnote. Kein Bild, reines Markup. */
.ww-doc {
  position: relative;
  border: 1px solid var(--t-border);
  border-radius: var(--ww-radius-md);
  background: var(--t-panel);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
  overflow: hidden;
}
[data-mode="dark"] .ww-doc { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); }

.ww-doc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--t-border);
}
.ww-doc__title { font-size: 0.95rem; font-weight: 600; color: var(--t-ink); }
.ww-doc__meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}
.ww-doc__body { padding: 1.2rem 1.4rem; display: grid; gap: 0.9rem; }
.ww-doc__row { display: flex; gap: 0.85rem; align-items: flex-start; }
.ww-doc__no {
  flex: 0 0 auto;
  min-width: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--t-accent-vivid);
  padding-top: 0.15em;
}
.ww-doc__row p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--t-ink-2); }
.ww-doc__foot {
  padding: 0.95rem 1.4rem;
  border-top: 1px solid var(--t-border);
  background: var(--t-accent-wash);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--t-ink-2);
}

/* ---------- Vergleichstabelle ----------
   Fuer den Werkzeug-Ueberblick. Scrollt auf schmalen Schirmen im
   eigenen Container, damit die Seite nicht seitlich wandert. */
.ww-table-wrap {
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  overflow-x: auto;
  border: 1px solid var(--t-border);
  border-radius: var(--ww-radius-md);
  background: var(--t-panel);
}
.ww-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.ww-table th, .ww-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.88rem;
  line-height: 1.45;
  border-bottom: 1px solid var(--t-border);
  vertical-align: top;
}
.ww-table thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-ink-2);
  white-space: nowrap;
}
.ww-table tbody th { font-weight: 600; color: var(--t-ink); white-space: nowrap; }
.ww-table td { color: var(--t-ink-2); }
.ww-table tbody tr:last-child th,
.ww-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Prompt-Anatomie ----------
   Ein echter Prompt, dessen fuenf Bausteine markiert sind. */
.ww-prompt {
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid var(--t-border);
  border-radius: var(--ww-radius-md);
  background: var(--t-panel);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 2;
}
.ww-prompt mark {
  background: var(--t-accent-wash);
  color: var(--t-ink);
  padding: 0.15em 0.35em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ww-prompt__key {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--t-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-family: var(--font-main);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--t-ink-2);
}
.ww-prompt__key b { color: var(--t-accent-vivid); font-weight: 600; }
.ww-prompt__key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.ww-prompt__key i {
  width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto;
}

/* Fuenf Bausteine, fuenf Toene. Alle leiten sich vom gewaehlten
   Farbton ab, damit der Regler auch hier durchschlaegt. */
.ww-prompt mark[data-teil="1"], .ww-prompt__key i[data-teil="1"] { background: hsl(var(--accent-h) 72% 52% / .20); }
.ww-prompt mark[data-teil="2"], .ww-prompt__key i[data-teil="2"] { background: hsl(calc(var(--accent-h) + 45) 72% 48% / .20); }
.ww-prompt mark[data-teil="3"], .ww-prompt__key i[data-teil="3"] { background: hsl(calc(var(--accent-h) + 95) 62% 44% / .20); }
.ww-prompt mark[data-teil="4"], .ww-prompt__key i[data-teil="4"] { background: hsl(calc(var(--accent-h) + 160) 66% 46% / .20); }
.ww-prompt mark[data-teil="5"], .ww-prompt__key i[data-teil="5"] { background: hsl(calc(var(--accent-h) + 215) 70% 52% / .20); }
[data-mode="dark"] .ww-prompt mark[data-teil="1"], [data-mode="dark"] .ww-prompt__key i[data-teil="1"] { background: hsl(var(--accent-h) 75% 62% / .26); }
[data-mode="dark"] .ww-prompt mark[data-teil="2"], [data-mode="dark"] .ww-prompt__key i[data-teil="2"] { background: hsl(calc(var(--accent-h) + 45) 75% 60% / .26); }
[data-mode="dark"] .ww-prompt mark[data-teil="3"], [data-mode="dark"] .ww-prompt__key i[data-teil="3"] { background: hsl(calc(var(--accent-h) + 95) 65% 56% / .26); }
[data-mode="dark"] .ww-prompt mark[data-teil="4"], [data-mode="dark"] .ww-prompt__key i[data-teil="4"] { background: hsl(calc(var(--accent-h) + 160) 68% 58% / .26); }
[data-mode="dark"] .ww-prompt mark[data-teil="5"], [data-mode="dark"] .ww-prompt__key i[data-teil="5"] { background: hsl(calc(var(--accent-h) + 215) 72% 62% / .26); }

/* ---------- Zeitachse ----------
   Fuer "So laeuft der Tag". */
.ww-timeline { list-style: none; margin: clamp(1.6rem, 3vh, 2.4rem) 0 0; padding: 0; }
.ww-timeline li {
  position: relative;
  padding: 0 0 1.5rem 2rem;
  border-left: 1px solid var(--t-border);
}
.ww-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.ww-timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.35em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--t-accent-vivid);
}
.ww-timeline__when {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
  margin-bottom: 0.3rem;
}
.ww-timeline p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--t-ink-2); }


/* ============================================================
   SZENEN — abgespielte Bildfolgen mit Wiederholen-Knopf
   Ein Kasten mit [data-szene] bekommt beim Erscheinen einmalig
   .is-laeuft. Die Staffelung steht nicht im Skript, sondern als
   reine Zahl --takt an jedem Kind. Schrittweite, Dauer und Kurve
   stehen einmal an der Szene.
   ============================================================ */
.ww-szene {
  --takt-schritt: .35s;
  --takt-dauer: .55s;
  --takt-kurve: cubic-bezier(.22, 1, .36, 1);
  --takt-start: 0s;
  position: relative;
}

/* Aus-Zustand. Ausdruecklich ohne Uebergang, damit der verborgene
   Zustand springt und nur die Einblendung laeuft. --ruhe traegt eine
   bereits vorhandene Grundverschiebung (z. B. mittig geankert). */
.ww-szene__teil {
  --aus: translateY(16px);
  opacity: 0;
  transform: var(--ruhe,) var(--aus);
  transition: none;
}

/* Ein-Zustand. Eigenschaften einzeln aufzaehlen, niemals "all",
   sonst wandert der Hell-Dunkel-Wechsel mit Verzoegerung hinterher. */
.ww-szene.is-laeuft .ww-szene__teil {
  opacity: 1;
  transform: var(--ruhe,) translateY(0);
  transition:
    opacity   var(--takt-dauer) var(--takt-kurve) calc(var(--takt-start) + var(--takt, 0) * var(--takt-schritt)),
    transform var(--takt-dauer) var(--takt-kurve) calc(var(--takt-start) + var(--takt, 0) * var(--takt-schritt));
}

/* Nur der Aus-Zustand wird getauscht. */
.ww-szene__teil--pop   { --aus: scale(.6); }
.ww-szene__teil--links { --aus: translateX(-16px); }
.ww-szene__teil--rechts{ --aus: translateX(16px); }
.ww-szene__teil--wisch { --aus: translateY(-130%); --takt-dauer: 1.2s; }

/* Gegenstueck: Teile, die spaet matt werden. Starten sichtbar. */
.ww-szene__matt { opacity: 1; filter: none; transition: none; }
.ww-szene.is-laeuft .ww-szene__matt {
  opacity: .42;
  filter: grayscale(1);
  transition:
    opacity .6s ease calc(var(--takt-start) + var(--takt, 0) * var(--takt-schritt)),
    filter  .6s ease calc(var(--takt-start) + var(--takt, 0) * var(--takt-schritt));
}

/* Erzaehlsatz neben einer Szene. Einer ist hervorgehoben, die
   anderen warten. Muster aus der alten Datenreise, ohne Scroll-Rechnung. */
.ww-szene__satz {
  padding-left: 1.1rem;
  border-left: 2px solid var(--t-border);
  color: var(--t-ink-2);
  opacity: .32;
  transition: none;
}
.ww-szene__satz strong { display: block; color: var(--t-ink); font-weight: 600; margin-bottom: .15rem; }
.ww-szene.is-laeuft .ww-szene__satz {
  opacity: 1;
  border-color: var(--t-accent-vivid);
  transition:
    opacity     .45s ease calc(var(--takt-start) + var(--takt, 0) * var(--takt-schritt)),
    border-color .45s ease calc(var(--takt-start) + var(--takt, 0) * var(--takt-schritt));
}

/* Wiederholen-Knopf, in der Sprache der ww-Ebene. */
.ww-szene__neu {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--t-border);
  border-radius: 99px;
  background: var(--t-panel);
  color: var(--t-ink-2);
  font: 600 .66rem/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .42rem .75rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.ww-szene__neu:hover { border-color: var(--t-accent-vivid); color: var(--t-ink); }
.ww-szene__neu[hidden] { display: none; }

/* Laufende Zahl. Feste Breite plus tabellarische Ziffern, damit
   beim Hochzaehlen nichts springt. */
.ww-szene__zahl {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  display: inline-block;
  min-width: 5ch;
  text-align: right;
  font-variant-ligatures: none;
}
.ww-szene__zahl--klein { min-width: 4.5ch; font-size: .82rem; }

/* Pulsierender Punkt im Abschnittslabel. */
.ww-punkt {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t-accent-vivid);
  margin-right: .55rem;
  vertical-align: middle;
  animation: wwPuls 2.4s ease-out infinite;
}
@keyframes wwPuls {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-accent-vivid) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Zwischenruf: ein kurzer Satz, der von einem Abschnitt zum
   naechsten weiterreicht. Schmal gesetzt, damit er als Atempause wirkt. */
.ww-zwischenruf {
  max-width: 34ch;
  margin: clamp(3rem, 7vh, 4.5rem) auto 0;
  text-align: center;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--t-ink);
}
.ww-zwischenruf em { font-style: normal; color: var(--t-accent-vivid); }



/* Kleine Marke am Ende einer Szenen-Zeile. */
.ww-szene__marke {
  flex: 0 0 auto;
  align-self: center;
  padding: .28rem .6rem;
  border-radius: 99px;
  background: var(--t-accent-wash);
  color: var(--t-accent-vivid);
  font: 600 .62rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ww-szene__marke--ruhig {
  background: transparent;
  border: 1px solid var(--t-border);
  color: var(--t-ink-2);
}

/* Fazit unter einer Szene. Traegt die Aussage, die das Bild belegt. */
.ww-szene__fazit {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--t-border);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--t-ink-2);
}
.ww-szene__fazit .ww-szene__zahl {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--t-accent-vivid);
  min-width: 1.4ch;
  text-align: left;
}


/* ---------- Problemkarten ----------
   Vorne nur Nummer, Zeichnung und Ueberschrift, damit die sechs Punkte
   auf einen Blick zu erfassen sind und die Grafik zuerst wirkt. Beim
   Ueberfahren oder per Tabulator legt sich die Rueckseite darueber, mit
   der Szene aus der Woche des Lesers und einer kurzen Zusage.
   Die Zusage sagt, dass das Problem angegangen wird, ausdruecklich
   nicht, wie FLOW dabei vorgeht. Vorder- und Rueckseite liegen im
   selben Rasterfeld, deshalb richtet sich die Kartenhoehe nach dem
   laengeren Inhalt und nichts wird abgeschnitten. */
.ww-dreh-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vh, 2.2rem);
}
@media (min-width: 640px)  { .ww-dreh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ww-dreh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ww-dreh {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--ww-radius-md);
  background: rgba(255, 255, 255, .04);
  cursor: default;
  transition: border-color .25s ease, background-color .25s ease;
}
.ww-dreh > .ww-dreh__vorn,
.ww-dreh > .ww-dreh__hinten { grid-area: 1 / 1; }
.ww-dreh:hover,
.ww-dreh:focus-within { border-color: color-mix(in srgb, var(--t-accent-vivid) 55%, transparent); }
.ww-dreh:focus-visible { outline: 2px solid var(--t-accent-vivid); outline-offset: 3px; }

.ww-dreh__vorn {
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  padding: 1.4rem;
}
.ww-dreh__nr {
  display: block;
  font: 600 .66rem/1 var(--font-mono);
  letter-spacing: .18em;
  color: var(--t-accent-vivid);
}
.ww-dreh__bild {
  display: block;
  width: 100%;
  max-width: 9.5rem;
  height: auto;
  margin: auto 0;
  padding: 1.1rem 0;
  color: rgba(255, 255, 255, .78);
  overflow: visible;
}
.ww-dreh__bild * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ww-dreh__bild .ak { stroke: var(--t-accent-vivid); }
.ww-dreh__bild .leise { opacity: .38; }
.ww-dreh__bild .strich { stroke-dasharray: 3 3; }

.ww-dreh h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #fff;
}

/* Die Rueckseite liegt darueber und blendet auf. */
.ww-dreh__hinten {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .55rem;
  padding: 1.4rem;
  background: color-mix(in srgb, var(--t-accent-vivid) 16%, #0f1117);
  opacity: 0;
  transition: opacity .28s ease;
}
.ww-dreh:hover .ww-dreh__hinten,
.ww-dreh:focus-within .ww-dreh__hinten { opacity: 1; }
.ww-dreh p { margin: 0; font-size: .89rem; line-height: 1.55; }
.ww-dreh .ww-dreh__kopf { font-size: .98rem; font-weight: 600; color: #fff; }
.ww-dreh .ww-dreh__problem { color: rgba(255, 255, 255, .82); }
/* Die Zusage schliesst die Rueckseite ab. Sie ist die einzige Aussage
   ueber FLOW auf dieser Karte und bleibt bewusst allgemein. */
.ww-dreh .ww-dreh__zusage {
  margin-top: .3rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-weight: 600;
  color: #fff;
}

.ww-dreh-hinweis {
  margin: 1.1rem 0 0;
  font: 400 .78rem/1.5 var(--font-main);
  color: rgba(255, 255, 255, .42);
}

/* Auf Geraeten ohne Zeiger gibt es kein Ueberfahren. Dort steht die
   Rueckseite direkt unter Zeichnung und Ueberschrift, statt
   unerreichbar zu bleiben. */
@media (hover: none) {
  .ww-dreh { display: block; }
  .ww-dreh__vorn { min-height: 0; padding-bottom: .9rem; }
  .ww-dreh__bild { margin: .2rem 0 .1rem; max-width: 7rem; }
  .ww-dreh__hinten { opacity: 1; background: none; padding: 0 1.4rem 1.4rem; }
  .ww-dreh .ww-dreh__kopf { display: none; }
  .ww-dreh-hinweis { display: none; }
}

/* ---------- Suche, die zu wenig findet ----------
   Fuehrt einen freigegebenen Pilot-Befund vor, statt ihn zu behaupten. */
.ww-suche {
  border: 1px solid var(--t-border);
  border-radius: var(--ww-radius-md);
  background: var(--t-paper);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .09);
  overflow: hidden;
}
[data-mode="dark"] .ww-suche { box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }

.ww-suche__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--t-border);
}
.ww-suche__feld {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: .55rem .85rem;
  border: 1px solid var(--t-border);
  border-radius: 99px;
  background: var(--t-panel);
  color: var(--t-ink);
  font-size: .9rem;
}
.ww-suche__feld svg { flex: 0 0 auto; color: var(--t-ink-2); }

.ww-suche__liste { padding: .5rem .6rem; }
.ww-suche__zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name status" "datei status";
  align-items: center;
  gap: 0 .9rem;
  padding: .75rem .65rem;
  border-radius: var(--ww-radius-sm);
}
.ww-suche__zeile + .ww-suche__zeile { border-top: 1px solid var(--t-border); }
.ww-suche__name  { grid-area: name;  font-size: .93rem; font-weight: 600; color: var(--t-ink); }
.ww-suche__datei { grid-area: datei; font-size: .8rem; color: var(--t-ink-2); font-family: var(--font-mono); }
.ww-suche__status {
  grid-area: status;
  font: 600 .62rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-ink-2);
  padding: .28rem .6rem;
  border: 1px solid var(--t-border);
  border-radius: 99px;
  white-space: nowrap;
}
.ww-suche__status--treffer {
  color: var(--t-accent-vivid);
  border-color: color-mix(in srgb, var(--t-accent-vivid) 40%, transparent);
  background: var(--t-accent-wash);
}
.ww-suche .ww-szene__fazit { margin: 0; padding: 1rem 1.25rem 1.2rem; }

/* Zitat mit Randlinie, ruhig gesetzt. */
.ww-zitat {
  margin: 1.8rem 0 0;
  padding-left: 1.2rem;
  border-left: 3px solid var(--t-accent-vivid);
}
.ww-zitat p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--t-ink);
  text-wrap: pretty;
}
.ww-zitat footer {
  margin-top: .55rem;
  font: 600 .66rem/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}


/* ---------- Stapel liegengelassener Werkzeuge ----------
   Links das Durcheinander, rechts das eine aufgeraeumte Fenster.
   Die Drehung steht in --ruhe, damit sie im Aus-Zustand erhalten
   bleibt und die Karte sich beim Einblenden nicht zurueckdreht. */
.ww-stapel-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
@media (max-width: 900px) { .ww-stapel-grid { grid-template-columns: 1fr; } }

.ww-stapel { position: relative; min-height: 320px; }
.ww-stapel__label {
  position: absolute;
  top: -1.6rem;
  left: 0;
  font: 600 .64rem/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.ww-stapel__label--hell { position: static; display: block; margin-bottom: .9rem; color: var(--t-accent-vivid); }

.ww-fenster {
  position: absolute;
  width: min(46%, 190px);
  padding: .7rem .8rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.ww-fenster b {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  line-height: 1.3;
}
.ww-fenster i {
  display: block;
  height: 5px;
  margin-top: .55rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, .14);
}

/* Das eine aufgeraeumte Fenster. Steht im Fluss, nicht im Stapel. */
.ww-fenster--ruhe {
  position: static;
  width: 100%;
  padding: 1.1rem 1.2rem;
  border-color: color-mix(in srgb, var(--t-accent-vivid) 45%, transparent);
  background: color-mix(in srgb, var(--t-accent-vivid) 12%, transparent);
  box-shadow: none;
}
.ww-fenster--ruhe b { font-size: .95rem; color: #fff; }
.ww-fenster--ruhe span {
  display: block;
  margin-top: .4rem;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .7);
}

.ww-stapel__fazit {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 1.2rem 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}
.ww-stapel__fazit .ww-szene__zahl {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--t-accent-vivid);
  min-width: 1.4ch;
  text-align: left;
}
.ww-stapel-ziel .ww-szene__neu { margin-top: 1.1rem; }

/* Auf schmalen Schirmen wird aus dem Stapel eine Liste, sonst
   ueberlappen die Fenster unlesbar. */
@media (max-width: 640px) {
  .ww-stapel { min-height: 0; display: grid; gap: .6rem; padding-top: 1.8rem; }
  .ww-fenster { position: static; width: 100%; }
  .ww-szene .ww-fenster { --ruhe: none; }
}


/* ---------- Fusszeilen-Aussage ----------
   Der staerkste Markenmoment der alten Seite, wieder an seinem Platz. */
.ww-footer__aussage {
  width: min(1720px, 94vw);
  max-width: 100%;
  /* Oben und unten automatisch, dadurch sitzt die Aussage mittig im
     freien Raum und die Spalten bleiben unten stehen. */
  margin: auto auto clamp(3rem, 8vh, 6rem);
  margin-top: auto;
  padding: 0 clamp(1.2rem, 4vw, 3.5rem);
  /* Der Satz laeuft auf einer Zeile. Die Groesse muss deshalb so
     gewaehlt sein, dass er in jeder Breite in den Container passt.
     Gemessen braucht er rund 9,5 Geviert, der Container bietet etwa
     86vw, also hoechstens 8,6vw Schriftgroesse. */
  font-size: clamp(2.6rem, 8.6vw, 10rem);
  font-weight: 500;
  line-height: .93;
  letter-spacing: -.045em;
  color: var(--t-ink);
  /* Kein Ausgleich der Zeilen. Die erste Zeile soll durchlaufen, damit
     die Aussage die Breite traegt und nicht mittig zusammenrueckt. */
  text-wrap: nowrap;
  overflow-wrap: normal;
}
@media (max-width: 1100px) {
  .ww-footer__aussage { text-wrap: wrap; }
}
@media (max-width: 700px) {
  .ww-footer { min-height: auto; }
  .ww-footer__aussage {
    margin-top: 0;
    margin-bottom: clamp(2.2rem, 6vh, 3.5rem);
    font-size: clamp(2.4rem, 13vw, 4.4rem);
  }
}

/* ---------- Farbkasten ---------- */
.ww-farbkasten {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--t-border);
  border-radius: var(--ww-radius-md);
  background: var(--t-paper);
}
.ww-farbkasten__kopf {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.4rem;
  font: 600 .66rem/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}
.ww-farbkasten__punkt {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--t-accent-vivid);
  flex: 0 0 auto;
  transition: background-color .25s ease;
}
.ww-farbkasten__regler { display: block; }
.ww-farbkasten__regler .ac-hue { width: 100%; }
.ww-farbkasten__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}
.ww-farbkasten__hinweis { font-size: .8rem; color: var(--t-ink-2); }


/* ---------- Kopfzeile ohne Linkreihe ----------
   Die Seitenpunkte stehen jetzt nur noch im Burger-Menue. Dafuer
   bekommt die Marke ihre alte Lockup-Form zurueck, damit die Leiste
   links nicht leer wirkt. Der Burger ist auf allen Breiten sichtbar. */
.ww-brand__lockup { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.ww-brand__name {
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--t-ink);
}
.ww-brand__sub {
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
}

/* Die Aktionen ruecken nach rechts, weil in der Mitte nichts mehr steht. */
.ww-header__inner > .ww-nav-actions { margin-left: auto; }

/* Der Burger ist jetzt der einzige Weg in die Seitenstruktur,
   also auch auf grossen Schirmen sichtbar. */
.bh-burger { display: grid !important; }


/* ---------- Foto im Hero der Startseite ----------
   Eigene Klassen statt der alten pg-Hero-Ebenen, damit der
   Kippeffekt aus site.js hier nicht mitgreift. Der Schleier deckt
   links genug fuer die Ueberschrift und laesst rechts das Bild stehen.
   26.09.2026: das Standfoto ist raus (Jani: "das Bild auch entfernen").
   Die Ebene traegt jetzt nur noch das Video; wo dessen Maske ausblendet,
   bleibt reines Papierweiss statt eines zweiten Bildes darunter. */
.ww-hero__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: var(--t-img-filter);
  opacity: .97;
  transition: filter .35s ease, opacity .35s ease;
}
.ww-hero__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Leseflaeche. Deckt genau die Spalte, in der Ueberschrift und
       Text stehen, und laeuft danach weich aus. */
    linear-gradient(100deg,
      var(--t-paper) 16%,
      color-mix(in srgb, var(--t-paper) 94%, transparent) 38%,
      color-mix(in srgb, var(--t-paper) 58%, transparent) 56%,
      color-mix(in srgb, var(--t-paper) 20%, transparent) 76%,
      color-mix(in srgb, var(--t-paper) 8%, transparent) 100%),
    linear-gradient(0deg,
      var(--t-paper) 3%,
      color-mix(in srgb, var(--t-paper) 48%, transparent) 26%,
      color-mix(in srgb, var(--t-paper) 6%, transparent) 54%);
  transition: background .35s ease;
}
.ww-hero > .ww-sheet-inner { position: relative; z-index: 2; }

/* Auf schmalen Schirmen steht der Text ueber dem Bild, deshalb dort
   mehr Deckung, sonst wird die Ueberschrift unruhig. */
/* 26.09.2026: Video in derselben Ebene wie das Foto. Es liegt über dem
   Hintergrundbild und erbt Deckung und Filter der Ebene, deshalb hier
   keine eigene Opazität.
   26.09.2026 (zweiter Nachtrag, Jani per Screenshot): rechts anguckt es
   die "Prozessvergleich"-Karte zu — dort sieht man es praktisch nicht.
   Das Video steht jetzt links, in der Spalte mit Ueberschrift und Text,
   dort wo Jani es markiert hat. Eine ovale Maske laesst nur die Mitte
   der Spalte klar durch und loest die Kanten in Papierweiss auf (kein
   Standfoto mehr darunter, siehe .ww-hero__foto oben) — kein harter
   Rahmen, sondern ein Uebergang. Der Schleier (unten) bleibt zusaetzlich
   ueber dem Text stehen, damit die Ueberschrift lesbar bleibt.
   Ab 1025px teilt sich das Raster in Text- und Kartenspalte (Regel bei
   .ww-hero__grid); erst ab dort weicht das Video nach links, darunter
   steht die Karte im Fluss unter dem Text und es gibt nichts zu meiden. */
.ww-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}
@media (min-width: 1025px) {
  /* 26.09.2026, dritter Nachtrag (Jani per Markierung): die schmale Mitte war am
     falschen Ort. Das Video steht jetzt wieder ueber der ganzen Textspalte, aber
     mit fester rechter Kante genau an der Karte (nicht mehr darunter versteckt,
     nicht mehr darueber hinaus). Leicht gezoomt (scale), damit der Ausschnitt
     etwas breiter wirkt, wie gewuenscht. Links blasst die Maske ins Papierweiss
     hinter dem Textanfang aus, rechts bleibt es bis an die Karte sichtbar. */
  /* 26.09.2026, vierter Nachtrag: kein JS-Messen mehr noetig — die Karte
     ist fast deckend (siehe .ww-hero-card background), was darunter liegt,
     ist ohnehin unsichtbar. Darum reicht eine feste Position: ein Drittel
     weiter rechts als zuvor, dafuer jetzt beidseitig ausgeblendet — rechts
     genauso weich wie links, statt hart an der Karte zu enden. */
  .ww-hero__video {
    left: 19%;
    right: auto;
    width: 58%;
    opacity: .6;
    transform: scale(1.08);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) { .ww-hero__video { display: none; } }
@media (max-width: 900px) {
  .ww-hero__video { object-position: 70% center; }
  .ww-hero__schleier {
    background:
      linear-gradient(0deg,
        var(--t-paper) 8%,
        color-mix(in srgb, var(--t-paper) 92%, transparent) 46%,
        color-mix(in srgb, var(--t-paper) 72%, transparent) 100%);
  }
}


/* ---------- Helle Flaeche hinter der Szene ----------
   Wo die abgespielte Szene ueber dem Foto liegt, bekommt das Bild
   mehr Weissanteil. Sonst kaempfen Karte und Foto um dieselbe Stelle
   und man sieht keins von beidem richtig. */
.ww-hero__aufhellung {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 62% at 62% 50%,
    color-mix(in srgb, var(--t-paper) 88%, transparent) 0%,
    color-mix(in srgb, var(--t-paper) 62%, transparent) 46%,
    transparent 78%);
}
@media (max-width: 900px) { .ww-hero__aufhellung { display: none; } }

/* Die Karte selbst deckt jetzt vollstaendig, damit die Zeilen darin
   auch ueber dem Foto ruhig stehen. */
.ww-hero-card {
  background: color-mix(in srgb, var(--t-panel) 96%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ---------- Hero-Textblock in der alten Form ---------- */

.ww-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--t-border);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}


/* ---------- Der Weg zur eigenen Software ----------
   Hochformat wie die Karte davor. Eine Linie waechst nach unten,
   die Stationen erscheinen nacheinander. Jede Station fuehrt auf
   ihre Seite, damit der Weg auch begehbar ist. */
.ww-weg { position: relative; padding: .4rem 0 .2rem; }

.ww-weg__linie {
  position: absolute;
  left: 17px;
  top: 34px;
  bottom: 42px;
  width: 2px;
  background: linear-gradient(180deg,
    var(--t-accent-vivid) 0%,
    color-mix(in srgb, var(--t-accent-vivid) 30%, transparent) 100%);
  transform-origin: top center;
  --aus: scaleY(0);
}
.ww-szene.is-laeuft .ww-weg__linie {
  --takt-dauer: 1.6s;
  transform: scaleY(1);
}

.ww-weg__schritt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .62rem .7rem .62rem 0;
  border-radius: var(--ww-radius-sm);
  text-decoration: none;
  transition: background-color .2s ease;
}
a.ww-weg__schritt:hover { background: var(--t-accent-wash); }

.ww-weg__nr {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--t-border);
  background: var(--t-panel);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  color: var(--t-ink-2);
  position: relative;
  z-index: 1;
}
.ww-weg__text { display: block; padding-top: .2rem; }
.ww-weg__titel {
  display: block;
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--t-ink);
  line-height: 1.3;
}
.ww-weg__sinn {
  display: block;
  margin-top: .12rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--t-ink-2);
}

/* Das Ziel traegt die Akzentfarbe, damit klar ist, worauf der Weg zulaeuft. */
.ww-weg__schritt--ziel .ww-weg__nr {
  border-color: var(--t-accent-vivid);
  background: var(--t-accent-vivid);
  color: #fff;
}
.ww-weg__schritt--ziel .ww-weg__titel { color: var(--t-accent-vivid); }

.ww-hero-card .ww-szene__fazit {
  font-size: .85rem;
  line-height: 1.55;
  display: block;
}


/* Unterpunkte am Weg. Sie haengen mit einem Winkel an der Hauptlinie,
   damit sofort sichtbar ist, dass sie zur Station darueber gehoeren und
   keine eigene Stufe sind. */
.ww-weg__unter {
  position: relative;
  display: block;
  margin: -.15rem 0 .15rem 50px;
  padding: .3rem .6rem .3rem 0;
  border-radius: var(--ww-radius-sm);
  text-decoration: none;
  transition: background-color .2s ease;
}
.ww-weg__unter::before {
  content: "";
  position: absolute;
  left: -33px;
  top: -8px;
  width: 25px;
  height: 20px;
  border-left: 1px solid var(--t-border);
  border-bottom: 1px solid var(--t-border);
  border-bottom-left-radius: 8px;
  pointer-events: none;
}
a.ww-weg__unter:hover { background: var(--t-accent-wash); }
.ww-weg__untertitel {
  display: block;
  font-size: .86rem;
  font-weight: 500;
  color: var(--t-ink);
  line-height: 1.3;
}
.ww-weg__untersinn {
  display: block;
  margin-top: .05rem;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--t-ink-2);
}

/* Die Station, die man auslassen kann. Gestrichelter Ring und eine kleine
   Marke, damit niemand denkt, ohne KI gehe es nicht weiter. */
.ww-weg__schritt--kann .ww-weg__nr { border-style: dashed; }
/* Die freiwillige Station traegt keine Nummer, damit die Zaehlung
   01 02 03 mit der Roadmap weiter unten uebereinstimmt. */
.ww-weg__nr--leer { background: transparent; }
.ww-weg__marke {
  display: inline-block;
  margin-left: .45rem;
  padding: .08rem .4rem .12rem;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .57rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-ink-2);
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- Die stille Assistenz ----------
   Drei ruhige Karten auf dem Punktraster des Abschnitts. Vorher lag der
   Rechner auf einem abgerissenen Blatt vom Karoblock, schief gedreht,
   mit Bleistiftkritzeln. Das war unruhig und hat den Blick nicht
   gefuehrt. Jetzt traegt jede Karte eine Sache, die Jahreszahl steht
   als Abzeichen statt in einem gemalten Kreis. Die Ebene folgt Hell und
   Dunkel wie der Rest der Seite. */
.ww-tippkraft {
  --luecke: clamp(1.3rem, 2.4vw, 2.1rem);
  position: relative;
  margin: clamp(2.4rem, 4.5vw, 3.8rem) 0 clamp(1.8rem, 3.5vw, 3rem);
}

.ww-papier {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--luecke);
  /* Die Spalten reichen bis unten, die Karten darin behalten aber ihre
     natuerliche Hoehe. Sonst entsteht leere Flaeche in den kuerzeren
     Karten. Nur der Knopf nutzt den freien Platz unten aus. */
  align-items: stretch;
}
@media (max-width: 900px) {
  .ww-papier { grid-template-columns: minmax(0, 1fr); }
}

/* Breite Schirme. Regler links, Zettel in der Mitte, Vergleich rechts.
   Erst ab 1540px, sonst wird die Reglerspalte zu schmal fuer den Titel. */
@media (min-width: 1540px) {
  .ww-papier {
    grid-template-columns: minmax(0, 1fr) minmax(0, 23rem) minmax(0, 1.2fr);
  }
}
.ww-vergleich { min-width: 0; }
@media (max-width: 1539px) {
  .ww-vergleich { grid-column: 1 / -1; }
}

/* Eine Kartenform fuer alle drei, damit die Reihe ruhig steht. */
.ww-tippkraft__regler,
.ww-lohnzettel,
.ww-vergleich .ww-audit-card {
  border: 1px solid var(--t-border);
  border-radius: var(--ww-radius-md);
  background: var(--t-panel);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 18px 42px -26px rgba(15, 23, 42, .30);
}

/* ---------- Karte links, die Regler ---------- */
.ww-tippkraft__regler {
  position: relative;
  min-width: 0;
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
}
.ww-tippkraft__titel {
  margin: .55rem 0 1.5rem;
  font-size: clamp(1.3rem, 1.75vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--t-ink);
}
/* Ruhige Auszeichnung statt der gemalten Welle. */
.ww-unterstrich {
  position: relative;
  white-space: nowrap;
  box-shadow: inset 0 -.3em 0 var(--t-accent-wash);
}
.ww-tippkraft__hinweis {
  margin: 1.6rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--t-ink-2);
}

.ww-regler {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem 1rem;
  margin-top: 1.5rem;
}
.ww-regler label {
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--t-ink);
}
/* Der Wert steht im Abzeichen, dadurch findet ihn das Auge sofort. */
.ww-regler output {
  justify-self: end;
  padding: .3rem .62rem;
  border-radius: 999px;
  background: var(--t-accent-wash);
  font: 600 .84rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--t-accent-vivid);
  white-space: nowrap;
}

/* Eigener Regler statt der Systemlinie. Runder Griff, ruhige Schiene. */
.ww-regler input[type="range"] {
  grid-column: 1 / -1;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: .1rem 0 0;
  background: transparent;
  cursor: pointer;
}
.ww-regler input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 99px;
  background: var(--t-border);
}
.ww-regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--t-accent-vivid);
  border: 3px solid var(--t-panel);
  box-shadow: 0 2px 7px rgba(15, 23, 42, .3);
}
.ww-regler input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 99px;
  background: var(--t-border);
}
.ww-regler input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--t-accent-vivid);
  border: 3px solid var(--t-panel);
  box-shadow: 0 2px 7px rgba(15, 23, 42, .3);
}
.ww-regler input[type="range"]:focus-visible {
  outline: 2px solid var(--t-accent-vivid);
  outline-offset: 5px;
  border-radius: 99px;
}

/* ---------- Karte Mitte, der Lohnzettel ---------- */
.ww-lohnzettel {
  position: relative;
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--t-ink);
}
.ww-lohnzettel__kopf {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--t-border);
  font: 600 .63rem/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}
.ww-lohnzettel__person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1rem;
  margin: 1.2rem 0;
}
.ww-lohnzettel__name {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -.012em;
}
/* Der Stempel bleibt schraeg, ist aber sauber gesetzt statt gemalt. */
.ww-lohnzettel__stempel {
  flex: none;
  margin-left: auto;
  padding: .42rem .7rem;
  border: 1px solid color-mix(in srgb, var(--t-accent-vivid) 38%, transparent);
  border-radius: 9px;
  background: var(--t-accent-wash);
  font: 700 .61rem/1.35 var(--font-mono);
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
  transform: rotate(-3.5deg);
  pointer-events: none;
}
.ww-lohnzettel__zeilen { margin: 0; }
.ww-lohnzettel__zeilen div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .62rem 0;
  border-bottom: 1px solid var(--t-border);
  font-size: .9rem;
}
.ww-lohnzettel__zeilen dt { color: var(--t-ink-2); }
.ww-lohnzettel__zeilen dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ww-lohnzettel__summe {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--t-border);
  font-weight: 600;
}
/* Die Jahreszahl ist der Punkt, an dem der Rechner ankommt.
   Deshalb kraeftiges Abzeichen statt eines gemalten Kreises. */
.ww-kreis {
  display: inline-flex;
  align-items: center;
  padding: .5rem .95rem;
  border-radius: 14px;
  background: var(--t-ink);
}
.ww-lohnzettel__summe strong {
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--t-paper);
  white-space: nowrap;
}
.ww-lohnzettel__stelle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem 1rem;
  margin-top: 1.3rem;
  font-size: .8rem;
  color: var(--t-ink-2);
}
.ww-lohnzettel__stelle span:nth-child(2) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--t-ink);
}
.ww-lohnzettel__balken {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--t-border);
}
.ww-lohnzettel__balken i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--t-accent-vivid);
  transition: width .3s ease;
}

.ww-lohnzettel__basis {
  margin: .9rem 0 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--t-ink-2);
}

/* ---------- Karte rechts, der Vergleich ---------- */
/* Die rechte Spalte traegt Huelle und Karte, beide muessen mitwachsen,
   sonst endet der Vergleich hoeher als die anderen beiden. */
.ww-vergleich { display: flex; flex-direction: column; }
.ww-vergleich .ww-audit-wrapper { max-width: none; width: 100%; }
/* Die beiden anderen Karten bleiben auf ihrer eigenen Hoehe stehen. */
.ww-tippkraft__regler,
.ww-lohnzettel { align-self: start; }
/* Der Knopf rutscht an den unteren Rand der Spalte, also genau in den
   Platz, der neben der laengsten Karte ohnehin frei bleibt. */
.ww-vergleich .ww-rechenfuss { margin-top: auto; padding-top: 1.4rem; }
.ww-vergleich .ww-audit-card {
  transform: none;
  background: var(--t-panel);
  color: var(--t-ink);
}
.ww-vergleich .ww-floating-chip {
  top: -13px;
  right: 18px;
  padding: .3rem .72rem;
  border-radius: 10px;
  font-size: .72rem;
}
.ww-vergleich .ww-audit-table thead th {
  color: var(--t-ink-2);
  border-bottom-color: var(--t-border);
}
.ww-vergleich .ww-audit-table td { border-bottom-color: var(--t-border); }
.ww-audit-table th.ww-audit-ziel {
  white-space: nowrap;
  padding-left: .75rem;
  padding-right: .75rem;
}
.ww-audit-table tbody th {
  padding: .85rem 1.25rem;
  font-size: .875rem;
  font-weight: inherit;
  text-align: left;
  color: var(--t-ink);
  border-bottom: 1px solid var(--t-border);
}
@media (max-width: 520px) {
  .ww-vergleich .ww-audit-table th,
  .ww-vergleich .ww-audit-table td { padding-left: .6rem; padding-right: .6rem; }
  .ww-vergleich .ww-audit-table th.ww-audit-ziel { white-space: normal; }
  .ww-vergleich .ww-tag-missing { display: table; margin: .3rem 0 0; }
}

/* Der Knopf steht jetzt unter dem Rechner, nicht mehr neben der
   Ueberschrift. Oben rechts blieb sonst ein Loch, sobald die
   Vergleichskarte kuerzer war als die anderen beiden. */
.ww-rechenfuss {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .ww-rechenfuss { justify-content: stretch; }
  .ww-rechenfuss .ww-btn-pill { width: 100%; justify-content: center; }
}

.ww-rechenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem 2.5rem;
}
.ww-rechenkopf .ww-title { margin: .45rem 0 0; max-width: 24ch; }
.ww-rechenkopf .ww-lead {
  margin: 0;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--t-ink-2);
}
.ww-rechenkopf .ww-btn-pill { flex: none; }

/* ---------- Hero-Proportionen (Stand 17.09.2026 / Update 20.09.2026) ----------
   Titel nach oben gerückt, Abstand vor Aktionen vergrößert,
   damit ausschließlich die Überschrift oben steht. */
.ww-hero > .ww-sheet-inner { padding-top: calc(var(--nav-h) + 1.25rem); padding-bottom: 4.5rem; }
.ww-hero .ww-title { font-size: clamp(2.2rem, 5.4vw, 5.4rem); max-width: 20ch; margin-bottom: clamp(2.5rem, 6vh, 5.5rem); }
.ww-hero .ww-metrics { margin-top: 2rem; padding-top: 1.4rem; max-width: 720px; }
.ww-hero .ww-metrics__col { display: flex; align-items: center; gap: 1.4rem; }
.ww-hero .ww-metrics__num { flex: none; }
.ww-hero .ww-metrics__label { margin-top: 0; max-width: 44ch; }
@media (min-width: 1025px) {
  .ww-hero { min-height: min(calc(100svh - 64px), 980px); }
  .ww-hero > .ww-sheet-inner { padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: 6rem; }
  .ww-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: start; }
  .ww-hero__text { padding-top: 0; }
  .ww-hero__szene { justify-self: end; width: 100%; }
}

/* ---------- Die drei Wege im Abschnitt Leistungen ----------
   Steht auf dunklem Grund, deshalb eigene Werte statt der Tokens.
   Zeigt, dass der Digital-Check die Grundlage ist und dass man auch
   bei ihm stehen bleiben kann. */
.ww-wege { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.ww-wege__satz {
  margin: 0 0 1.6rem;
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
}
.ww-wege__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 1rem;
}
.ww-weg-karte {
  padding: 1.6rem 1.5rem 1.7rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .05);
}
.ww-weg-karte__nr {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
}
.ww-weg-karte h3 {
  margin: 0 0 .5rem;
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: #fff;
}
.ww-weg-karte p {
  margin: 0;
  font-size: .89rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}
.ww-wege__fuss {
  margin: 1.4rem 0 0;
  max-width: 66ch;
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
}

/* ---------- Roadmap im Abschnitt Leistungen ----------
   Drei Karten, von Stufe 01 gabelt der Weg zu 02 und 03. Mattes Glas
   auf dunklem Grund, ein Rahmen von einem Pixel, kein Neon. Die
   Botschaft steckt im Aufbau, deshalb steht hier fast kein Text. */
.ww-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.02fr) 56px minmax(0, .92fr);
  align-items: center;
  margin-top: clamp(2.6rem, 4.5vw, 3.8rem);
}
.ww-plan__karte {
  position: relative;
  display: block;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .045);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
a.ww-plan__karte:hover {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .07);
  transform: translateY(-2px);
}
.ww-plan__karte--basis {
  padding: clamp(1.9rem, 2.9vw, 2.6rem);
  background: rgba(255, 255, 255, .075);
}
.ww-plan__karte--ziel {
  border-color: color-mix(in srgb, var(--t-accent-vivid) 45%, transparent);
  box-shadow: 0 26px 70px -38px var(--t-accent-vivid);
}
.ww-plan__marke {
  display: inline-block;
  margin-bottom: .9rem;
  padding: .26rem .6rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.ww-plan__karte--ziel .ww-plan__marke {
  border-color: color-mix(in srgb, var(--t-accent-vivid) 50%, transparent);
  color: var(--t-accent-vivid);
}
.ww-plan__titel {
  margin: 0 0 .3rem;
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -.018em;
  color: #fff;
}
.ww-plan__karte--basis .ww-plan__titel { font-size: 1.4rem; }
.ww-plan__sub {
  margin: 0 0 1.1rem;
  font-size: .9rem;
  color: rgba(255, 255, 255, .58);
}
.ww-plan__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.ww-plan__liste li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
}
.ww-plan__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--t-accent-vivid);
}
.ww-plan__knopf { margin-top: 1.4rem; }

/* Verbindungsstriche zwischen den Stufen der Hauptlinie. */
.ww-plan__strich {
  position: relative;
  align-self: center;
  height: 1px;
  background: rgba(255, 255, 255, .22);
}
.ww-plan__mitte {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
/* Die Karte auf der Hauptlinie steht kraeftiger als die beiden
   Angebote darunter, damit die Reihenfolge lesbar bleibt. */
.ww-plan__karte--linie { background: rgba(255, 255, 255, .075); }
.ww-plan__karte--neben {
  background: rgba(255, 255, 255, .03);
  border-style: dashed;
}
.ww-plan__karte--neben .ww-plan__titel { font-size: 1.02rem; }
.ww-plan__karte--neben .ww-plan__sub { margin-bottom: .7rem; }
.ww-plan__karte--neben .ww-plan__liste li { font-size: .84rem; }
.ww-plan__fuss {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, .7);
}

@media (max-width: 1180px) {
  .ww-plan { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .ww-plan__strich { display: none; }
}

/* ---------- Drei gleich starke Stufen ----------
   Variante der Roadmap fuer Seiten, auf denen alle drei Stufen
   gleich wichtig sind, etwa der Ablauf des Digital-Checks. */
.ww-plan--drei {
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
}
@media (max-width: 1180px) {
  .ww-plan--drei { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Baukasten (19.09.2026, als Landkarte seit 20.09.) ----------
   Senkrechte Etagen: Basis, Bausteine, Software, Danach. Breite Karten
   gehen ueber alle Spalten, die vier Bausteine liegen in einem eigenen
   inneren Raster. Die DOM-Reihenfolge ist zugleich die Mobil-Reihenfolge.
   Kein JS. Haken heisst steckt drin, Plus heisst dazubuchbar. Akzent nur
   fuer Rahmen und Zeichen, Schrift bleibt weiss. */
.ww-plan--module {
  --plan-akzent: color-mix(in srgb, var(--t-accent-vivid) 70%, #fff);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .9rem;
  align-items: stretch;
}
@media (max-width: 1180px) {
  .ww-plan--module { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
}
.ww-plan--module .ww-plan__karte { display: flex; flex-direction: column; }
.ww-plan__karte--breit { grid-column: 1 / -1; }
.ww-plan__etage,
.ww-plan__zeile,
.ww-plan__regel { grid-column: 1 / -1; }
.ww-plan__etage { margin: 1.2rem 0 .1rem; }
.ww-plan__pfeil + .ww-plan__etage { margin-top: .1rem; }

/* ---------- Landkarte (20.09.2026) ----------
   Oben leicht, unten reich. Der Check und die vier Bausteine tragen je
   einen Ergebnis-Satz und ihre Bezuege, die Software-Karte darunter
   bleibt ausfuehrlich. Pfeile zeigen, dass eins aufs andere aufbaut. */
.ww-plan__satz { margin: 0 0 1rem; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.ww-plan__kopf .ww-plan__satz { margin-bottom: 0; max-width: 46ch; }
.ww-plan__steine {
  grid-column: 1 / -1;
  display: grid;
  /* Fuenf Bausteine in einer Reihe. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .9rem;
}
/* Danach-Etage: zwei Betreuungs-Kacheln nebeneinander. */
.ww-plan__steine--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ww-plan__stein .ww-plan__liste li { font-size: .86rem; }
/* Leichte Kachel. Gestrichelt heisst einzeln dazubuchbar, der Akzentrahmen
   zeigt, was schon in der Software steckt. */
.ww-plan--module .ww-plan__stein {
  padding: 1.25rem 1.25rem 1.15rem;
  background: rgba(255, 255, 255, .03);
  border-style: dashed;
}
.ww-plan--module .ww-plan__stein--drin {
  background: rgba(255, 255, 255, .075);
  border-style: solid;
  border-color: color-mix(in srgb, var(--t-accent-vivid) 45%, transparent);
}
.ww-plan__stein .ww-plan__titel { font-size: 1.05rem; margin-bottom: .45rem; }
.ww-plan__stein .ww-plan__satz { font-size: .88rem; color: rgba(255, 255, 255, .72); }
.ww-plan__bezug {
  list-style: none;
  margin: auto 0 0;
  padding: .8rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font: 600 .68rem/1.45 var(--font-mono);
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .82);
}
.ww-plan__bezug li { display: flex; align-items: baseline; }
.ww-plan__bezug--dazu,
.ww-plan__bezug--dazu .ww-plan__zeichen { color: rgba(255, 255, 255, .58); }
/* Senkrechter Verbinder mit Spitze, rein dekorativ. */
.ww-plan__pfeil {
  grid-column: 1 / -1;
  justify-self: center;
  position: relative;
  width: 1px;
  height: 30px;
  margin: .2rem 0 .35rem;
  background: rgba(255, 255, 255, .28);
}
.ww-plan__pfeil::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(255, 255, 255, .5);
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  transform: translateX(-50%) rotate(45deg);
}
.ww-plan__zeile b { font-weight: 600; color: #fff; }
.ww-plan__etagentitel {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: #fff;
}
.ww-plan__etagensub { margin: 0; font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .62); }
.ww-plan__zeile { margin: .2rem 0 0; font-size: .84rem; line-height: 1.5; color: rgba(255, 255, 255, .62); }

/* Breite Karten: innen zweispaltig (Basis) oder flexibel (Software). */
.ww-plan--module .ww-plan__karte--basis {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 1rem 2rem;
  align-items: start;
}
.ww-plan--module .ww-plan__karte--software {
  display: flex;
  flex-direction: column;
}
.ww-plan--module .ww-plan__karte--software .ww-plan__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.2rem 2.5rem;
}
.ww-plan--module .ww-plan__karte--software .ww-plan__kopf-links {
  max-width: 34ch;
}
.ww-plan--module .ww-plan__karte--software .ww-plan__kopf-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .8rem;
}
.ww-plan__kopf { min-width: 0; }
.ww-plan__rumpf {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .8rem;
  min-width: 0;
  align-self: stretch;
}
.ww-plan__rumpf .ww-plan__knopf { margin-top: .2rem; align-self: flex-start; }
.ww-plan__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1rem;
}

/* ---------- Ausklapp-Mechanik (Progressive Disclosure) ---------- */
.ww-plan__etage-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.ww-plan__aufklapp-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  white-space: nowrap;
}
.ww-plan__aufklapp-btn:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .32);
  color: var(--plan-akzent);
}
.ww-plan__aufklapp-pfeil {
  display: inline-block;
  font-size: .82rem;
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ww-plan__aufklapp-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--t-accent-vivid) 25%, transparent);
  border-color: color-mix(in srgb, var(--t-accent-vivid) 60%, transparent);
}
.ww-plan__aufklapp-btn[aria-expanded="true"] .ww-plan__aufklapp-pfeil {
  transform: rotate(180deg);
}

/* Zentrierte Betreuungs-Leiste mit prominentem Schalter */
.ww-plan__betreuung-leiste {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.2rem 0 .4rem;
}
.ww-plan__aufklapp-btn--prominent {
  padding: .72rem 1.6rem;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .28), 0 0 16px color-mix(in srgb, var(--t-accent-vivid) 22%, transparent);
}
.ww-plan__aufklapp-btn--prominent:hover {
  background: rgba(255, 255, 255, .16);
  border-color: var(--t-accent-vivid);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35), 0 0 24px color-mix(in srgb, var(--t-accent-vivid) 50%, transparent);
  transform: translateY(-2px);
}
.ww-plan__aufklapp-btn--prominent[aria-expanded="true"] {
  background: color-mix(in srgb, var(--t-accent-vivid) 30%, transparent);
  border-color: color-mix(in srgb, var(--t-accent-vivid) 70%, transparent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}

/* Vorschau-Chips für die 5 Bausteine */
.ww-plan__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}
.ww-plan__chip {
  display: inline-flex;
  align-items: center;
  padding: .35rem .75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .18);
  font-family: var(--font-mono);
  font-size: .75rem;
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ww-plan__chip:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.ww-plan__chip--drin {
  background: rgba(255, 255, 255, .08);
  border-style: solid;
  border-color: color-mix(in srgb, var(--t-accent-vivid) 45%, transparent);
  color: #fff;
}

/* Schublade mit CSS Grid */
.ww-plan__schublade {
  grid-column: 1 / -1;
  width: 100%;
}
.ww-plan--module.is-ready .ww-plan__schublade {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ww-plan--module.is-ready .ww-plan__schublade.is-offen {
  grid-template-rows: 1fr;
}
.ww-plan__schublade-innen {
  overflow: hidden;
  min-height: 0;
}
.ww-plan--module.is-ready .ww-plan__schublade.is-offen > .ww-plan__schublade-innen {
  padding-top: 1rem;
}

/* Software Grid innen */
.ww-plan__software-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem 2.2rem;
  padding-top: 1.2rem;
  margin-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ww-plan__software-grid .ww-plan__spalte { min-width: 0; padding-top: .35rem; }
.ww-plan__software-grid .ww-plan__listenkopf {
  margin: 0 0 .5rem;
  font: 600 .62rem/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.ww-plan__software-grid .ww-plan__regel {
  grid-column: 1 / -1;
  margin: .4rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}

/* Zeichen vor einem Bezug: Haken oder Plus. */
.ww-plan__zeichen { display: inline-block; flex: 0 0 auto; margin-right: .45em; font-weight: 700; color: var(--plan-akzent); }

/* Listen in der Software-Karte: Haken fuer enthalten, Plus fuer dazu. */
.ww-plan__liste--drin li,
.ww-plan__liste--dazu li { padding-left: 1.3rem; }
.ww-plan__liste--drin li::before,
.ww-plan__liste--dazu li::before {
  top: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font: 700 .8rem/1.45 var(--font-mono);
  color: var(--plan-akzent);
}
.ww-plan__liste--drin li::before { content: "\2713"; }
.ww-plan__liste--dazu li::before { content: "+"; color: rgba(255, 255, 255, .55); }

/* Preiszeile in Mono, unten in der Karte. */
.ww-plan__preis {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: auto 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--font-mono);
}
.ww-plan__preis b { font-size: .92rem; font-weight: 600; letter-spacing: .02em; color: #fff; }
.ww-plan__preis span { font-size: .7rem; line-height: 1.5; letter-spacing: .02em; color: rgba(255, 255, 255, .55); }
.ww-plan__kopf .ww-plan__preis { margin-top: .6rem; }
.ww-plan--module .ww-plan__liste { margin-bottom: 1rem; }

.ww-plan--module .ww-btn-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 1180px) {
  .ww-plan__steine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Ein einzelner letzter Baustein nimmt die ganze Zeile. */
  .ww-plan__stein:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .ww-plan--module .ww-plan__karte--basis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ww-plan--module .ww-plan__karte--software .ww-plan__kopf-rechts { align-items: flex-start; }
}
@media (max-width: 700px) {
  .ww-plan__software-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@media (max-width: 600px) {
  .ww-plan--module { gap: .7rem; }
  .ww-plan__steine { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .ww-plan--module .ww-plan__karte--basis { grid-template-columns: minmax(0, 1fr); }
  .ww-plan--module .ww-plan__karte { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ww-plan__rumpf .ww-plan__knopf,
  .ww-plan__aktionen .ww-plan__knopf,
  .ww-plan__aufklapp-btn { width: 100%; justify-content: center; }
  /* 22.09.2026 (A3): nowrap ließ den langen Knopftext der Karte 03 über den Rand laufen */
  .ww-plan__aufklapp-btn { white-space: normal; text-align: center; line-height: 1.25; }
  .ww-plan__aktionen { width: 100%; }
}

/* ---------- Wegweiser ----------
   Steht am Ende jeder Unterseite und zeigt, an welcher Stelle des Wegs
   man gerade ist. Haelt die Unterseiten mit der Startseite zusammen. */
.ww-hier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-top: clamp(1.8rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ww-hier__punkt {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  font-size: .82rem;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
a.ww-hier__punkt:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
}
.ww-hier__punkt b {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .7);
}
.ww-hier__punkt.is-hier {
  border-color: var(--t-accent-vivid);
  background: color-mix(in srgb, var(--t-accent-vivid) 16%, transparent);
  color: #fff;
}
.ww-hier__punkt.is-hier b { color: var(--t-accent-vivid); }
.ww-hier__strich {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, .2);
}
@media (max-width: 560px) {
  .ww-hier__strich { display: none; }
}

/* Die Roadmap wird auch als Szene benutzt, die Striche muessen dabei
   mitwachsen statt zu springen. */
.ww-plan__strich.ww-szene__teil { --aus: scaleX(0); transform-origin: left center; }
.ww-szene.is-laeuft .ww-plan__strich { transform: scaleX(1); }

/* Wiederholen-Knopf im Kopf des Ergebnisblatts. */
.ww-doc__head { position: relative; }
.ww-doc__head .ww-szene__neu { margin-left: auto; }

/* ---------- Die Aufgabe entscheidet ----------
   Vier Werkzeugkarten nebeneinander. Beim Abspielen werden drei matt,
   eine bleibt stehen. Zeigt in zwei Sekunden, dass die Aufgabe waehlt
   und nicht eine Rangliste. */
.ww-wahl { margin: clamp(1.8rem, 3.5vw, 2.8rem) 0 clamp(2rem, 4vw, 3rem); }
.ww-wahl__frage {
  margin: .4rem 0 1.4rem;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -.016em;
  color: #fff;
}
.ww-wahl__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .8rem;
}
.ww-wahl__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.1rem 1.1rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .04);
}
.ww-wahl__karte--passt {
  border-color: color-mix(in srgb, var(--t-accent-vivid) 55%, transparent);
  background: color-mix(in srgb, var(--t-accent-vivid) 12%, transparent);
}
.ww-wahl__name {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: #fff;
}
.ww-wahl__was {
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .62);
}
.ww-wahl__marke {
  margin-top: .3rem;
  align-self: flex-start;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--t-accent-vivid);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.ww-wahl .ww-szene__fazit {
  margin: 1.3rem 0 0;
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .66);
}

/* Die fuenf Bausteine erscheinen als eigene Zeilen, damit man beim
   Abspielen sieht, wie der Auftrag Stueck fuer Stueck entsteht. */
.ww-prompt.ww-szene mark {
  display: block;
  margin-bottom: .3em;
}
.ww-prompt .ww-card-header { margin-bottom: 1.1rem; }

/* Der Wegweiser steht auch auf hellen Flaechen richtig. */
.ww-sheet--light .ww-hier,
.ww-sheet:not(.ww-sheet--dark):not(.ww-sheet--darker) .ww-hier {
  border-top-color: var(--t-border);
}
.ww-sheet--light .ww-hier__punkt,
.ww-sheet:not(.ww-sheet--dark):not(.ww-sheet--darker) .ww-hier__punkt {
  border-color: var(--t-border);
  color: var(--t-ink-2);
}
.ww-sheet--light .ww-hier__punkt b,
.ww-sheet:not(.ww-sheet--dark):not(.ww-sheet--darker) .ww-hier__punkt b {
  color: var(--t-ink-2);
}
.ww-sheet--light a.ww-hier__punkt:hover,
.ww-sheet:not(.ww-sheet--dark):not(.ww-sheet--darker) a.ww-hier__punkt:hover {
  color: var(--t-ink);
  border-color: var(--t-chrome);
}
.ww-sheet--light .ww-hier__punkt.is-hier,
.ww-sheet:not(.ww-sheet--dark):not(.ww-sheet--darker) .ww-hier__punkt.is-hier {
  border-color: var(--t-accent-vivid);
  color: var(--t-ink);
}
.ww-sheet--light .ww-hier__strich,
.ww-sheet:not(.ww-sheet--dark):not(.ww-sheet--darker) .ww-hier__strich {
  background: var(--t-border);
}

/* ---------- Eine Stellenanzeige, zerlegt ----------
   Vier Taetigkeiten werden matt, zwei bleiben stehen. Die Karte sagt
   ohne Erklaerung, warum diese Seite keine Stelle ausschreibt. */
.ww-zerlegt {
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--ww-radius-md);
  background: rgba(255, 255, 255, .045);
}
.ww-zerlegt__liste {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ww-zerlegt__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.ww-zerlegt__zeile:last-child { border-bottom: 0; }
.ww-zerlegt__was {
  font-size: .96rem;
  color: rgba(255, 255, 255, .9);
}
.ww-zerlegt__marke {
  flex: none;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t-accent-vivid) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-accent-vivid) 45%, transparent);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
}
.ww-zerlegt__marke--still {
  background: transparent;
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .45);
}
.ww-zerlegt .ww-szene__fazit {
  margin: 1.2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .95rem;
  line-height: 1.6;
  color: #fff;
}

/* ---------- Kopfkarte der Unterseiten ----------
   Kleine Schwester der Hero-Karte von der Startseite. Jede Unterseite
   zeigt damit schon im ersten Schirm etwas statt nur zu behaupten. */
.ww-kopf-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .82fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}
@media (max-width: 980px) {
  .ww-kopf-split { grid-template-columns: minmax(0, 1fr); }
}
.ww-kopfkarte {
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  border: 1px solid var(--t-border);
  border-radius: var(--ww-radius-md);
  background: color-mix(in srgb, var(--t-panel) 96%, transparent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 22px 50px -32px rgba(15, 23, 42, .32);
}
.ww-kopfkarte__liste {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ww-kopfkarte__zeile {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--t-border);
  font-size: .95rem;
  line-height: 1.4;
  color: var(--t-ink);
}
.ww-kopfkarte__zeile:last-child { border-bottom: 0; }
.ww-kopfkarte__nr {
  flex: none;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--t-accent-vivid);
}
.ww-kopfkarte__punkt {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t-accent-vivid);
  transform: translateY(-2px);
}
.ww-kopfkarte .ww-szene__fazit {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--t-border);
  font-size: .86rem;
  line-height: 1.55;
  color: var(--t-ink-2);
}
/* Auf dunklen Flaechen, etwa auf der Gespraechsseite. */
.ww-sheet--dark .ww-kopfkarte,
.ww-sheet--darker .ww-kopfkarte {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
}
.ww-sheet--dark .ww-kopfkarte__zeile,
.ww-sheet--darker .ww-kopfkarte__zeile {
  border-bottom-color: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .9);
}
.ww-sheet--dark .ww-kopfkarte .ww-szene__fazit,
.ww-sheet--darker .ww-kopfkarte .ww-szene__fazit {
  border-top-color: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .6);
}

/* ---------- Wovon der Preis abhaengt ----------
   Drei Faktoren statt eines Absatzes. Zeigt die Rechengroessen, ohne
   eine Zahl zu nennen. FLOW kann keine nennen, weil sie vom Betrieb
   abhaengt, und erfundene Zahlen sind auf dieser Seite gesperrt. */
.ww-faktoren { margin: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(1.4rem, 2.6vw, 2rem); }
.ww-faktoren__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .9rem;
}
.ww-faktor {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.15rem 1.15rem 1.3rem;
  border: 1px solid var(--t-border);
  border-radius: var(--ww-radius-sm);
  background: var(--t-paper);
}
.ww-faktor__marke {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
}
.ww-faktor__name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--t-ink);
}
.ww-faktor__was {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--t-ink-2);
}
.ww-faktoren__ergebnis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .9rem;
  margin: 1rem 0 0;
  padding: .95rem 1.15rem;
  border: 1px solid var(--t-accent-vivid);
  border-radius: var(--ww-radius-sm);
  background: var(--t-accent-wash);
}
.ww-faktoren__ergebnis span {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
}
.ww-faktoren__ergebnis b {
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--t-ink);
}

/* Nummer ueber dem Titel einer Koennenskarte. */
.ww-industry-card .ww-faktor__marke { display: block; margin-bottom: .45rem; }

/* ============================================================
   KARRIERE · ANZEIGE IN EIGENER SACHE (19.09.2026)
   Setzkasten, Blatt, Korrekturrand, Tuerschild, Umkehr-Bogen.
   Nur auf karriere.html im Einsatz. Bestehende Regeln bleiben
   unangetastet, alles Neue haengt an neuen Klassen.
   Regel: Text in --t-accent, nur Flaechen und Striche in
   --t-accent-vivid. Auf dunklen Sheets die lokalen --k-*-Werte,
   weil --t-* dort im Dunkelmodus kippt (invert = hell).
   ============================================================ */

/* Lichtfarben fuer dunkle Sheets, modusstabil. */
.ww-sheet--dark,
.ww-sheet--darker {
  --k-licht: hsl(var(--accent-h) 90% 74%);
  --k-schein: hsl(var(--accent-h) 85% 60% / .22);
  --k-linie: rgba(255, 255, 255, .14);
  --k-text: rgba(255, 255, 255, .9);
  --k-text-2: rgba(255, 255, 255, .68);
}

/* Helles Sheet auf Panel-Grund, ersetzt den Inline-Style. */
.ww-sheet--light.ww-sheet--panel { background: var(--t-panel); }
[data-mode="dark"] .ww-sheet--light.ww-sheet--panel { background: #14161d; }

/* Ghost-Knopf in voller Deckkraft, damit der zweite Weg
   gleichwertig neben dem Pill-Knopf steht. */
.ww-btn-ghost--voll { opacity: 1; }
.ww-btn-ghost--voll .ww-arrow { display: inline-block; transition: transform .25s ease; }
.ww-btn-ghost--voll:hover .ww-arrow { transform: translateX(4px); }

/* Kleiner Knopf in der Optik von .ww-szene__neu, aber ohne dessen
   Ausblendung bei reduzierter Bewegung. */
.ww-knopf-klein {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--t-border);
  border-radius: 99px;
  background: var(--t-panel);
  color: var(--t-ink-2);
  font: 600 .66rem/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .42rem .75rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.ww-knopf-klein:hover { border-color: var(--t-accent-vivid); color: var(--t-ink); }
.ww-knopf-klein[hidden] { display: none; }
/* Ohne JS bleibt "Text kopieren" verborgen; display:inline-flex wuerde
   sonst das hidden-Attribut schlagen. */
.ww-btn-ghost[hidden] { display: none; }
.ww-sheet--dark .ww-knopf-klein,
.ww-sheet--darker .ww-knopf-klein {
  border-color: var(--k-linie);
  background: rgba(255, 255, 255, .06);
  color: var(--k-text-2);
}
.ww-sheet--dark .ww-knopf-klein:hover,
.ww-sheet--darker .ww-knopf-klein:hover { border-color: var(--k-licht); color: #fff; }

/* Notizen und Zwischenruf auf dunklen Sheets. Ohne diese Regeln
   steht im Dunkelmodus grauer Text auf schwarzem Grund. */
.ww-sheet--dark .ww-note,
.ww-sheet--darker .ww-note { border-left-color: var(--k-licht); background: var(--k-schein); }
.ww-sheet--dark .ww-note h3,
.ww-sheet--darker .ww-note h3 { color: var(--k-licht); }
.ww-sheet--dark .ww-note p,
.ww-sheet--darker .ww-note p { color: var(--k-text-2); }
.ww-sheet--dark .ww-note a,
.ww-sheet--darker .ww-note a { color: var(--k-licht); }
.ww-sheet--dark .ww-zwischenruf,
.ww-sheet--darker .ww-zwischenruf { color: var(--k-text); }
.ww-sheet--dark .ww-zwischenruf em,
.ww-sheet--darker .ww-zwischenruf em { color: var(--k-licht); }

/* ---------- Umkehr-Bogen im Hero ----------
   Eine Stellenanzeige, bei der alles leer bleibt, was sonst gefuellt
   ist. Die letzte Zeile fuellt der Setzkasten weiter unten. */
.ww-umkehr__bogen { margin: 1rem 0 0; }
.ww-umkehr__zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--t-border);
}
.ww-umkehr__zeile:last-child { border-bottom: 0; }
.ww-umkehr__zeile dt {
  margin: 0;
  font: 600 .66rem/1.4 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}
.ww-umkehr__zeile dd {
  margin: 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--t-ink);
  text-align: right;
  overflow-wrap: anywhere;
}
.ww-umkehr__leer { color: var(--t-ink-2); border-bottom: 1px dashed var(--t-chrome); }
.ww-umkehr [data-echo].ist-gefuellt {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.08em;
  color: var(--t-accent);
  border-bottom: 0;
}

/* ---------- Tuerschild ----------
   Ohne JS stehen beide Seiten untereinander. Mit JS liegen sie
   uebereinander und die Platte wendet sich. */
.ww-schild {
  position: relative;
  max-width: 24rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  perspective: 900px;
  text-align: center;
  transform-origin: 50% 0;
}
.ww-schild__kordel { display: block; width: 200px; height: 56px; margin: 0 auto -6px; }
.ww-schild__kordel path { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.ww-schild__kordel circle { fill: rgba(255, 255, 255, .6); }
.ww-schild__platte { display: grid; gap: .6rem; }
.ww-schild__seite {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--k-linie);
  border-radius: var(--ww-radius-md);
  background: rgba(255, 255, 255, .06);
}
.ww-schild__seite--hinten {
  background: var(--k-schein);
  border-color: color-mix(in srgb, var(--k-licht) 45%, transparent);
}
.ww-schild__marke {
  font: 600 .62rem/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k-text-2);
}
.ww-schild__wort {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #fff;
}
.ww-schild__wort em { font-family: var(--font-serif); font-style: italic; color: var(--k-licht); }
.ww-schild__klein { font-size: .86rem; line-height: 1.45; color: var(--k-text-2); }
.ww-schild__knopf { margin-top: .9rem; }
.ww-schild.ist-bereit .ww-schild__platte {
  grid-template-areas: "s";
  transform-style: preserve-3d;
  transform-origin: 50% -40px;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  cursor: pointer;
}
.ww-schild.ist-bereit .ww-schild__seite {
  grid-area: s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ww-schild.ist-bereit .ww-schild__seite--hinten { transform: rotateY(180deg); }
.ww-schild.ist-gewendet .ww-schild__platte { transform: rotateY(180deg); }
.ww-schild.ist-pendelt { animation: wwSchildPendel .9s ease-out; }
@keyframes wwSchildPendel {
  0%   { transform: rotate(0); }
  25%  { transform: rotate(2.5deg); }
  55%  { transform: rotate(-1.2deg); }
  80%  { transform: rotate(.5deg); }
  100% { transform: rotate(0); }
}
/* Auf kleinen Schirmen kein 3D, die Seiten wechseln per Deckkraft. */
@media (max-width: 600px) {
  .ww-schild.ist-bereit .ww-schild__platte { transform: none; transform-style: flat; transition: none; }
  .ww-schild.ist-bereit .ww-schild__seite {
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: opacity .35s ease;
  }
  .ww-schild.ist-bereit:not(.ist-gewendet) .ww-schild__seite--hinten,
  .ww-schild.ist-gewendet .ww-schild__seite--vorn { opacity: 0; visibility: hidden; }
  .ww-schild.ist-pendelt { animation: none; }
}

/* ---------- Setzkasten ---------- */
.ww-setzkasten { margin-top: clamp(2.2rem, 4vw, 3.4rem); }
.ww-setzkasten__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.3rem, 2.4vw, 2.1rem);
  align-items: start;
}
.ww-setzkasten__schritte { min-width: 0; }
.ww-setzkasten__seite {
  align-self: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 901px) and (min-height: 760px) {
  .ww-setzkasten__seite { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
  /* Der Korrekturrand steht auf dem Schirm oben, sonst liegt die
     Ansage bei hohem Blatt unter dem Falz. */
  .ww-korrektur { order: -1; }
}
.ww-setzkasten__recht { max-width: 70ch; }

/* Abkuerzung. Steht vor Schritt 1, damit der Direktweg zuerst kommt. */
.ww-abkuerzung {
  border: 1px dashed var(--t-chrome);
  border-radius: var(--ww-radius-sm);
  padding: 1rem 1.2rem;
  margin: 0 0 2rem;
  max-width: 58ch;
}
.ww-abkuerzung p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--t-ink-2); }
.ww-abkuerzung strong { color: var(--t-ink); }

/* Ein Schritt. Jetzt als eigene Karte abgesetzt vom Hintergrund. */
.ww-setz {
  border: 1px solid color-mix(in srgb, var(--t-ink) 12%, transparent);
  border-radius: var(--ww-radius-md);
  background: var(--t-panel);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  margin: 0 0 1.6rem;
  min-width: 0;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04), 0 12px 28px -8px rgba(15, 23, 42, 0.06);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ww-setz:focus-within {
  border-color: color-mix(in srgb, var(--t-accent-vivid) 45%, var(--t-border));
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
}
.ww-setz legend {
  float: left;
  width: 100%;
}
.ww-setz legend + * {
  clear: both;
}
.ww-setz legend,
.ww-setz summary {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 0;
  margin: 0 0 .5rem;
}
.ww-setz__frage {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--t-ink);
}
.ww-setz__hinweis {
  margin: 0 0 1rem;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--t-ink-2);
  max-width: 58ch;
}
.ww-setz textarea,
.ww-setz input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  padding: .8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--t-ink) 14%, transparent);
  border-radius: var(--ww-radius-sm);
  background: color-mix(in srgb, var(--t-paper) 45%, var(--t-panel));
  color: var(--t-ink);
  resize: vertical;
  transition: border-color .2s ease, background-color .2s ease;
}
.ww-setz textarea::placeholder,
.ww-setz input[type="text"]::placeholder { color: var(--t-ink-2); opacity: .75; }
.ww-setz textarea:focus-visible,
.ww-setz input[type="text"]:focus-visible {
  outline: 2px solid var(--t-accent-vivid);
  outline-offset: 2px;
  background: var(--t-panel);
  border-color: var(--t-accent-vivid);
}
.ww-setz__anfaenge { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.ww-setz__anfaenge[hidden] { display: none; }
.ww-setz__zaehler {
  margin: .5rem 0 0;
  font: 600 .68rem/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--t-ink-2);
}
.ww-setz__zaehler[hidden] { display: none; }
details.ww-setz summary { cursor: pointer; list-style: none; }
details.ww-setz summary::-webkit-details-marker { display: none; }
details.ww-setz summary .ww-setz__frage::after { content: " +"; color: var(--t-accent-vivid); }
details.ww-setz[open] summary .ww-setz__frage::after { content: " \2212"; }
.ww-setz__radios { display: flex; flex-wrap: wrap; gap: .5rem .7rem; margin: 0 0 1rem; }
.ww-setz__radio {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .92rem;
  color: var(--t-ink);
  cursor: pointer;
  padding: .45rem .85rem;
  border: 1px solid color-mix(in srgb, var(--t-ink) 14%, transparent);
  border-radius: 99px;
  background: color-mix(in srgb, var(--t-paper) 45%, var(--t-panel));
  transition: border-color .2s ease, background-color .2s ease;
}
.ww-setz__radio input { accent-color: var(--t-accent-vivid); margin: 0; }
.ww-setz__radio:has(input:checked) { border-color: var(--t-accent-vivid); background: var(--t-accent-wash); }
.ww-setz__merk {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--t-ink-2);
  cursor: pointer;
  max-width: 58ch;
}
.ww-setz__merk input { margin: .25rem 0 0; flex: 0 0 auto; accent-color: var(--t-accent-vivid); }

/* Das Brett. Fugen statt Kartenabstand, Wechselmuster folgt dem Hue. */
.ww-brett {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--t-border);
  border: 1px solid var(--t-border);
  border-radius: var(--ww-radius-md);
  overflow: hidden;
}
.ww-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.1rem 1.1rem 1.3rem;
  min-height: 48px;
  background: var(--t-panel);
  cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.ww-kachel:nth-child(odd) { background: color-mix(in srgb, var(--t-panel) 94%, var(--t-accent-vivid)); }
.ww-kachel:hover { background: color-mix(in srgb, var(--t-panel) 88%, var(--t-accent-vivid)); }
/* Fokusring in Tinte, innerhalb des Auswahlrahmens, damit er auch auf
   einer gewaehlten Kachel sichtbar bleibt. */
.ww-kachel:focus-within { outline: 2px solid var(--t-ink); outline-offset: -5px; z-index: 1; }
.ww-kachel input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
.ww-kachel .ww-faktor__marke { display: block; }
.ww-kachel__name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.3;
  color: var(--t-ink);
  padding-right: 1.7rem;
}
.ww-kachel__was { font-size: .84rem; line-height: 1.5; color: var(--t-ink-2); }
.ww-kachel__stein {
  position: absolute;
  top: .95rem;
  right: .95rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--t-accent-vivid);
  transform: scale(0);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
}
.ww-kachel__stein::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ww-kachel:has(input:checked),
.ww-kachel.ist-gewaehlt { background: var(--t-accent-wash); box-shadow: inset 0 0 0 2px var(--t-accent-vivid); }
.ww-kachel:has(input:checked) .ww-kachel__stein,
.ww-kachel.ist-gewaehlt .ww-kachel__stein { transform: scale(1); }
.ww-kachel--frei { cursor: default; }
.ww-kachel--frei input[type="text"] { margin-top: .5rem; font-size: 16px; }

/* ---------- Das Blatt. Eine Kleinanzeige mit Satzspiegel. ---------- */
.ww-anzeige {
  position: relative;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border: 1px solid color-mix(in srgb, var(--t-ink) 16%, transparent);
  border-top: 3px double var(--t-ink);
  border-radius: var(--ww-radius-md);
  background: var(--t-panel);
  box-shadow: 0 4px 8px -2px rgba(15, 23, 42, 0.06), 0 24px 48px -12px rgba(15, 23, 42, 0.14);
}
/* Hinterblatt. Liegt schief und richtet sich mit jeder Stufe gerade.
   Das Blatt selbst wird nie gedreht, damit der Text scharf bleibt. */
.ww-anzeige::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--t-border);
  border-radius: inherit;
  background: var(--t-panel);
  transform: rotate(var(--schief, 2.1deg));
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.ww-setzkasten[data-stufe="1"] .ww-anzeige { --schief: 1.5deg; }
.ww-setzkasten[data-stufe="2"] .ww-anzeige { --schief: 1.0deg; }
.ww-setzkasten[data-stufe="3"] .ww-anzeige { --schief: .5deg; }
.ww-setzkasten[data-stufe="4"] .ww-anzeige { --schief: 0deg; }
.ww-anzeige__rubrik {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .8rem;
  font: 600 .63rem/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}
.ww-anzeige__titel {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--t-ink);
}
.ww-anzeige__zeilen { margin: 0; }
.ww-anzeige__zeile {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .3rem 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--t-border);
}
.ww-anzeige__zeile dt {
  margin: 0;
  font: 600 .62rem/1.7 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}
.ww-anzeige__zeile dd {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--t-ink);
  overflow-wrap: anywhere;
}
.ww-anzeige__zeile dd.ist-leer { color: var(--t-ink-2); border-bottom: 1px dashed var(--t-chrome); }
.ww-anzeige dd.ist-frisch { animation: wwFrisch .6s ease-out; }
@keyframes wwFrisch {
  from { background: var(--t-accent-wash); }
  to   { background: transparent; }
}
/* Gestrichener Titel. Der Strich ist ein SVG-Pfad, der sich zeichnet. */
.ww-anzeige__gestrichen { position: relative; display: inline-block; }
.ww-anzeige__gestrichen s { color: var(--t-ink-2); text-decoration: none; }
.ww-anzeige__strich {
  position: absolute;
  left: -2%;
  top: 36%;
  width: 104%;
  height: 12px;
  overflow: visible;
  pointer-events: none;
}
.ww-anzeige__strich path {
  fill: none;
  stroke: var(--t-accent-vivid);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.ww-setzkasten.ist-bereit .ww-anzeige__strich path { stroke-dashoffset: 1; }
.ww-setzkasten.ist-gekritzelt .ww-anzeige__strich path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s ease .3s;
}
/* Doppellinie, wenn alle drei Zeilen stehen. */
.ww-anzeige__zeilen::after {
  content: "";
  display: block;
  height: 0;
  margin-top: .45rem;
  border-top: 3px double var(--t-accent-vivid);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.ww-setzkasten[data-stufe="4"] .ww-anzeige__zeilen::after { transform: scaleX(1); }

/* Satzspiegel: drei Lettern zeigen, was schon steht. */
.ww-satzspiegel { list-style: none; display: flex; gap: .9rem; margin: 1.1rem 0 0; padding: 0; }
.ww-letter { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.ww-letter__klotz {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--t-border);
  border-radius: 6px;
  background: var(--t-paper);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--t-ink-2);
  transform: translateY(-5px) rotate(-4deg);
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ww-letter.ist-gesetzt .ww-letter__klotz {
  background: var(--t-ink);
  color: var(--t-paper);
  border-color: var(--t-ink);
  border-bottom: 3px solid var(--t-accent-vivid);
  transform: none;
}
.ww-letter__wort {
  font: 600 .6rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}
.ww-anzeige__klein { margin: .9rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--t-ink-2); }
.ww-anzeige__klein--warn { color: var(--t-accent); }
.ww-anzeige__klein[hidden] { display: none; }
.ww-anzeige__fuss { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1.1rem; }
.ww-anzeige__fuss .ww-btn-pill.ist-deaktiviert,
.ww-anzeige__fuss .ww-btn-ghost.ist-deaktiviert {
  opacity: .55;
  cursor: not-allowed;
}
.ww-anzeige__kopiefeld {
  width: 100%;
  box-sizing: border-box;
  margin-top: .8rem;
  min-height: 9rem;
  font: .82rem/1.5 var(--font-mono);
  padding: .7rem .8rem;
  border: 1px solid var(--t-border);
  border-radius: var(--ww-radius-sm);
  background: var(--t-paper);
  color: var(--t-ink);
}
.ww-anzeige__kopiefeld[hidden] { display: none; }
.ww-anzeige__farbe { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--t-border); }

/* ---------- Korrekturrand ---------- */
.ww-korrektur {
  padding: clamp(1.1rem, 1.8vw, 1.4rem);
  border: 1px solid color-mix(in srgb, var(--t-ink) 14%, transparent);
  border-radius: var(--ww-radius-md);
  background: var(--t-panel);
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.06);
}
.ww-korrektur .ww-card-header { padding-bottom: .7rem; margin-bottom: .8rem; }
.ww-korrektur__notation {
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font: .68rem/1.5 var(--font-mono);
  color: var(--t-ink-2);
}
.ww-korrektur__notation li { display: flex; gap: .6rem; }
.ww-korrektur__notation b { font-weight: 600; color: var(--t-accent); min-width: 2ch; }
.ww-korrektur__satz { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--t-ink); min-height: 1.5em; }
.ww-korrektur__satz.ist-neu { animation: wwSatzNeu .35s ease-out; }
@keyframes wwSatzNeu { from { opacity: .25; } to { opacity: 1; } }
.ww-korrektur__klein {
  margin: .7rem 0 0;
  font: 600 .62rem/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}

/* ---------- Blattleiste, nur mobil ---------- */
.ww-anzeige__leiste { display: none; }
.ww-anzeige__leiste-lettern { display: inline-flex; gap: .25rem; }
.ww-anzeige__leiste-lettern b {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .35);
  font: 600 .8rem/1 var(--font-serif);
  font-style: italic;
  opacity: .5;
}
.ww-setzkasten[data-t="1"] [data-mini="titel"],
.ww-setzkasten[data-k="1"] [data-mini="felder"],
.ww-setzkasten[data-l="1"] [data-mini="luecke"],
.ww-setzkasten[data-b="1"] [data-mini="beleg"] { opacity: 1; background: var(--t-accent-vivid); border-color: transparent; }
@media (max-width: 900px) {
  .ww-anzeige__leiste {
    position: sticky;
    bottom: max(.6rem, env(safe-area-inset-bottom));
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin: 1rem auto 0;
    width: max-content;
    max-width: 100%;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    background: var(--t-ink);
    color: var(--t-paper);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  }
  .ww-anzeige__leiste[hidden],
  .ww-setzkasten.ist-tippt .ww-anzeige__leiste { display: none; }
}

/* ---------- Zwei Wege (dunkles Sheet) ---------- */
.ww-wege {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: clamp(1.8rem, 3vw, 2.6rem) 0;
}
.ww-wege__spalte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  padding: 1.6rem;
  border: 1px solid var(--k-linie);
  border-radius: var(--ww-radius-md);
  background: rgba(255, 255, 255, .045);
}
.ww-wege__spalte h3 { margin: .2rem 0 0; font-size: 1.16rem; font-weight: 600; letter-spacing: -.018em; color: #fff; }
.ww-wege__spalte p { margin: 0 0 .4rem; font-size: .9rem; line-height: 1.55; color: var(--k-text-2); }
.ww-wege__spalte q { font-style: italic; color: var(--k-text); }
.ww-wege__spalte .ww-btn-pill { margin-top: auto; }
.ww-wege__hinweis { grid-column: 1 / -1; margin: 0; font-size: .78rem; line-height: 1.5; color: var(--k-text-2); }
.ww-wege__hinweis a { color: var(--k-licht); }

/* ---------- Ergaenzungen an den Bedingungen ---------- */
.ww-faktoren__zwischen {
  margin: 1.6rem 0 .8rem;
  font: 600 .72rem/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}
/* Fuenf Bedingungen in einer Reihe, sonst steht die fuenfte allein. */
.ww-faktoren__reihe--fuenf { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
.ww-faktor--fehlt { background: transparent; border-style: dashed; border-color: var(--t-chrome); }
.ww-faktor--fehlt .ww-faktor__marke { color: var(--t-ink-2); }
/* Auf hellem Papier-Grund liegt die Faktor-Karte auf Panel, sonst Gleich auf Gleich. */
.ww-sheet--light:not(.ww-sheet--panel) .ww-faktor { background: var(--t-panel); }

/* ---------- Breakpoints ---------- */
@media (max-width: 1180px) {
  .ww-setzkasten__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ww-brett { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ww-setzkasten__raster { grid-template-columns: minmax(0, 1fr); }
  .ww-setzkasten__seite { position: static; }
  .ww-wege { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ww-brett { grid-template-columns: minmax(0, 1fr); }
  .ww-anzeige__zeile { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .ww-anzeige__fuss > * { width: 100%; justify-content: center; }
  .ww-page-hero .ww-actions > * { width: 100%; justify-content: center; }
}

/* ---------- Lesetipp ----------
   Eine Verlinkung auf einen Artikel steht nie mehr nackt da. Zwei bis
   drei Saetze sagen, was drinsteht, damit man weiss, ob es sich lohnt.
   Die Saetze stammen aus dem Artikel selbst. */
.ww-lesetipp {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  /* Gedeckelt, sonst laeuft die Karte auf breiten Flaechen ueber die
     ganze Spalte und die Zeilen werden zu lang zum Lesen. */
  max-width: 46rem;
  margin-top: 2rem;
  padding: 1.25rem 1.35rem 1.35rem;
  border: 1px solid var(--t-border);
  border-radius: var(--ww-radius-md);
  background: var(--t-panel);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.ww-lesetipp:hover {
  border-color: var(--t-accent-vivid);
  transform: translateY(-2px);
}
.ww-lesetipp__marke {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
}
.ww-lesetipp__titel {
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -.014em;
  line-height: 1.3;
  color: var(--t-ink);
}
.ww-lesetipp__text {
  font-size: .89rem;
  line-height: 1.6;
  color: var(--t-ink-2);
  max-width: 62ch;
}
.ww-lesetipp__mehr {
  margin-top: .3rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--t-accent-vivid);
}
.ww-lesetipp:hover .ww-lesetipp__mehr span { padding-left: .2rem; }

/* Lesetipp im Branchen-Abschnitt laeuft parallel zur Ueberschrift breiter */
#branchen .ww-lesetipp {
  max-width: 68rem;
}
#branchen .ww-lesetipp__text {
  max-width: none;
}

.ww-lesetipp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.ww-lesetipp-grid .ww-lesetipp { margin-top: 0; max-width: none; }

/* Direkt eingebetteter Wissensbereich in der Audit-/Vergleichskarte */
.ww-audit-wissen {
  border-top: 1px solid var(--t-border);
  background: color-mix(in srgb, var(--t-panel) 94%, var(--t-ink) 6%);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  padding: 1.1rem 1.25rem 1.25rem;
}
.ww-audit-wissen__kopf {
  margin-bottom: .75rem;
}
.ww-audit-wissen__label {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
}
.ww-audit-wissen__liste {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.ww-audit-wissen__eintrag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  padding: .65rem .85rem;
  border-radius: var(--ww-radius-sm, 8px);
  background: var(--t-panel);
  border: 1px solid var(--t-border);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.ww-audit-wissen__eintrag:hover {
  border-color: var(--t-accent-vivid);
  background: color-mix(in srgb, var(--t-panel) 96%, var(--t-accent-vivid) 4%);
  transform: translateY(-1px);
}
.ww-audit-wissen__inhalt {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.ww-audit-wissen__titel {
  font-size: .84rem;
  font-weight: 600;
  color: var(--t-ink);
  letter-spacing: -.01em;
}
.ww-audit-wissen__text {
  font-size: .75rem;
  line-height: 1.45;
  color: var(--t-ink-2);
}
.ww-audit-wissen__pfeil {
  font-size: .85rem;
  font-weight: 600;
  color: var(--t-accent-vivid);
  flex: none;
  transition: transform .2s ease;
}
.ww-audit-wissen__eintrag:hover .ww-audit-wissen__pfeil {
  transform: translateX(3px);
}

@media (min-width: 860px) and (max-width: 1539px) {
  .ww-audit-wissen__liste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
  }
  .ww-audit-wissen__eintrag {
    align-items: flex-start;
    height: 100%;
  }
  .ww-audit-wissen__inhalt {
    flex: 1;
  }
  .ww-audit-wissen__pfeil {
    margin-top: .1rem;
  }
}

/* Auf dunklen Flaechen. */
.ww-sheet--dark .ww-lesetipp,
.ww-sheet--darker .ww-lesetipp {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
}
.ww-sheet--dark .ww-lesetipp__titel,
.ww-sheet--darker .ww-lesetipp__titel { color: #fff; }
.ww-sheet--dark .ww-lesetipp__text,
.ww-sheet--darker .ww-lesetipp__text { color: rgba(255, 255, 255, .68); }

/* ---------- Laufband der Branchen ----------
   Sehr langsam, randlos, haelt beim Darueberfahren an. Die Spur traegt
   die Liste doppelt und wandert um genau die halbe Breite, deshalb
   entsteht kein Sprung. Keine Kundenzahlen, es gibt noch keine. */
.ww-lauf {
  position: relative;
  margin: clamp(4.2rem, 6vw, 5.8rem) 0 2.4rem;
  overflow: hidden;
  -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%);
}
.ww-lauf__spur {
  display: flex;
  width: max-content;
  animation: ww-lauf-zug 120s linear infinite;
}
.ww-lauf__halb { display: flex; }
.ww-lauf:hover .ww-lauf__spur,
.ww-lauf:focus-within .ww-lauf__spur { animation-play-state: paused; }
@keyframes ww-lauf-zug {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Bildkarte im Hochformat. Kein Foto im Bestand, deshalb eine gezeichnete
   Szene ueber einem Zweiklang aus dem Farbregler. Jede Karte dreht den
   Farbton ein Stueck weiter, dadurch bekommt die Reihe Rhythmus. */
/* Bildkarte im Hochformat. Das Foto fuellt die Karte, darueber liegt
   ein Farbton aus dem Farbregler, damit die Reihe zur Seite gehoert und
   nicht wie ein Fremdkoerper wirkt. Jede Karte dreht den Ton ein Stueck
   weiter. Kundenzahlen stehen bewusst nicht darauf. */
.ww-lauf__karte {
  flex: 0 0 auto;
  position: relative;
  width: 252px;
  height: 316px;
  margin-right: 1rem;
  border-radius: var(--ww-radius-md);
  overflow: hidden;
  background: #0d1626;
}
.ww-lauf__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}
.ww-lauf__ton {
  position: absolute;
  inset: 0;
  mix-blend-mode: soft-light;
  opacity: .75;
  background: hsl(calc(var(--accent-h) * 1deg) 70% 45%);
  transition: background-color .35s ease;
}
.ww-lauf__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 38%,
    rgba(4, 6, 12, .34) 62%,
    rgba(4, 6, 12, .78) 100%);
}
.ww-lauf__text {
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  bottom: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.ww-lauf__name {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
  color: #fff;
}
.ww-lauf__satz {
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .74);
}
.ww-lauf__fuss {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}
@media (max-width: 640px) {
  .ww-lauf__karte { width: 208px; height: 268px; }
  .ww-lauf__spur { animation-duration: 90s; }
}

/* Szenen bei reduzierter Bewegung. Dieser Block MUSS hinter den
   Szenen-Regeln stehen, sonst gewinnt er nicht. Endzustand sofort,
   Knopf weg, denn er verspricht eine Bewegung, die es nicht gibt. */
@media (prefers-reduced-motion: reduce) {
  .ww-szene__teil,
  .ww-szene.is-laeuft .ww-szene__teil {
    opacity: 1;
    transform: var(--ruhe,) translateY(0);
    transition: none;
  }
  .ww-szene__matt,
  .ww-szene.is-laeuft .ww-szene__matt {
    opacity: .42;
    filter: grayscale(1);
    transition: none;
  }
  .ww-szene__satz,
  .ww-szene.is-laeuft .ww-szene__satz {
    opacity: 1;
    border-color: var(--t-accent-vivid);
    transition: none;
  }
  .ww-szene__neu { display: none; }
  .ww-punkt { animation: none; }
}

/* Karriere-Setzkasten bei reduzierter Bewegung. Endzustaende sofort,
   das Schild wechselt per Deckkraft, die Knoepfe bleiben sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .ww-kachel,
  .ww-kachel__stein,
  .ww-letter__klotz,
  .ww-anzeige::before,
  .ww-anzeige__zeilen::after,
  .ww-btn-ghost--voll .ww-arrow,
  .ww-schild.ist-bereit .ww-schild__platte { transition: none; }
  .ww-anzeige dd.ist-frisch,
  .ww-korrektur__satz.ist-neu,
  .ww-schild.ist-pendelt { animation: none; }
  .ww-anzeige__strich path,
  .ww-setzkasten.ist-bereit .ww-anzeige__strich path { stroke-dashoffset: 0; transition: none; }
  .ww-schild.ist-bereit .ww-schild__platte { transform: none; transform-style: flat; }
  .ww-schild.ist-bereit .ww-schild__seite {
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: none;
  }
  .ww-schild.ist-bereit:not(.ist-gewendet) .ww-schild__seite--hinten,
  .ww-schild.ist-gewendet .ww-schild__seite--vorn { opacity: 0; visibility: hidden; }
}

/* Laufband bei reduzierter Bewegung. Steht bewusst als letzter Block
   der Datei, damit die Regel die Bewegung sicher schlaegt. */
@media (prefers-reduced-motion: reduce) {
  .ww-lauf__spur { animation: none; }
  .ww-lauf { overflow-x: auto; }
  .ww-lauf__halb { display: none; }
}

/* ---------- 22.09.2026 (A2): Statuszeile und Direktlink des Anfrageformulars auf dunklen Flächen ----------
   toneTheme() gibt data-tone="invert"-Abschnitten im dunklen Modus helle Token, .ww-sheet--dark malt aber
   mit !important dunkel; #pgGsStatus stand mit 1,11:1 auf #0a0a0a. Additive, eng gefasste Regel. */
.ww-sheet--dark .pg-wl__status, .ww-sheet--darker .pg-wl__status { color: var(--k-text, rgba(255, 255, 255, .9)); }
.ww-sheet--dark .pg-kb-link, .ww-sheet--darker .pg-kb-link { color: var(--k-licht, hsl(var(--accent-h) 90% 74%)); }

/* ---------- 23.09.2026 (Janis Wunsch): Rechner und Lohnzettel gleich hoch ----------
   Nebeneinander strecken sich beide Karten auf die Höhe der Reihe (hebt ab 901 px das align-self: start
   aus „Karte rechts, der Vergleich“ auf). Der Inhalt bleibt im normalen Fluss, damit die Abstände
   unverändert bleiben (Gegenprüfung 23.09.2026). In einer Spalte (unter 900 px) bleibt alles wie bisher. */
@media (min-width: 901px) {
  #drei-eingriffe .ww-tippkraft__regler,
  #drei-eingriffe .ww-lohnzettel { align-self: stretch; }
}
#drei-eingriffe .ww-tippkraft__check { display: inline-block; margin-top: .8rem; font-size: .92rem; font-weight: 600; }
/* Linkfarbe bei jedem Farbton lesbar, wie in mitnehmen.css; beim Standardton 215 ändert sich nichts Sichtbares. */
@supports (color: oklch(from red min(l, 0.5) c h)) {
  html:not([data-mode="dark"]) #drei-eingriffe .ww-tippkraft__check { color: oklch(from var(--t-accent-vivid) min(l, 0.47) c h); }
  html[data-mode="dark"] #drei-eingriffe .ww-tippkraft__check { color: oklch(from var(--t-accent-vivid) max(l, 0.78) c h); }
}

/* ---------- 23.09.2026 (Janis Wunsch): Text neben der Zahl im Hero bis ans Ende, bündig ----------
   Hebt die Begrenzung auf 44ch auf; der Text läuft bis zum Ende der Linie über dem Zahlenblock,
   im Blocksatz mit Silbentrennung wie in den Artikeln. */
.ww-hero .ww-metrics__label {
  flex: 1 1 auto; max-width: none;
  text-align: justify; text-align-last: left;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;
}
.ww-hero .ww-metrics__label a { -webkit-hyphens: manual; hyphens: manual; }

/* ---------- 23.09.2026 (Janis Wunsch): Prozessvergleich im Hero ----------
   Ersetzt die Szene „Der Weg zur eigenen Software“. Zeilen erscheinen nacheinander mit ✕, danach setzt
   sich in jeder Zeile der Haken. Bei reduzierter Bewegung steht alles sofort (Szenen-Regel in site.css). */
.ww-hero-vergleich { padding: 1.4rem 1.4rem 1.25rem; }
.ww-hero-vergleich .ww-card-header { margin-bottom: .6rem; }
.ww-hero-vergleich__tabelle { table-layout: auto; }
.ww-hero-vergleich__tabelle thead th {
  padding: .55rem .5rem .55rem 0; font-size: .74rem; font-weight: 600; color: var(--t-ink-2);
  border-bottom: 1px solid var(--t-border);
}
.ww-hero-vergleich__tabelle th.ww-hero-vergleich__spalte { width: 4.6rem; padding-left: .25rem; padding-right: .25rem; text-align: center; white-space: nowrap; }
.ww-hero-vergleich__tabelle tbody th { padding: .62rem .5rem .62rem 0; font-size: .9rem; line-height: 1.3; border-bottom: 1px solid var(--t-border); }
.ww-hero-vergleich__tabelle tbody th strong { font-weight: 600; color: var(--t-ink); margin-right: .15rem; }
.ww-hero-vergleich__tabelle td { padding: .62rem .25rem; text-align: center; border-bottom: 1px solid var(--t-border); }
.ww-hero-vergleich__tabelle tbody tr:last-child > * { border-bottom: 0; }
.ww-hero-vergleich .ww-tag-missing { margin: .25rem 0 0; font-size: .64rem; color: #B91C1C; background: rgba(239, 68, 68, .09); }
.ww-hero-vergleich .ww-badge-x { color: #DC2626; background: #FEE2E2; }
.ww-hero-vergleich .ww-badge-check { color: #15803D; background: #DCFCE7; }
[data-mode="dark"] .ww-hero-vergleich .ww-tag-missing { color: #FCA5A5; background: rgba(239, 68, 68, .16); }
.ww-hero-vergleich .ww-szene__fazit { margin-top: .9rem; font-size: .88rem; }
@supports (color: oklch(from red min(l, 0.5) c h)) {
  html:not([data-mode="dark"]) :is(.ww-hero-vergleich__tabelle th.ww-audit-ziel, .ww-hero-vergleich .ww-card-header__status, .ww-hero .ww-metrics__label a) { color: oklch(from var(--t-accent-vivid) min(l, 0.47) c h); }
  html[data-mode="dark"] :is(.ww-hero-vergleich__tabelle th.ww-audit-ziel, .ww-hero-vergleich .ww-card-header__status, .ww-hero .ww-metrics__label a) { color: oklch(from var(--t-accent-vivid) max(l, 0.78) c h); }
}
@media (max-width: 520px) {
  .ww-hero-vergleich { padding: 1.1rem 1rem 1rem; }
  .ww-hero-vergleich__tabelle th.ww-hero-vergleich__spalte { width: 3.6rem; white-space: normal; }
  .ww-hero-vergleich__tabelle tbody th { font-size: .86rem; }
}

/* ---------- 23.09.2026 (Janis Wunsch): Rechner-Abschnitt ohne Vergleich ----------
   Regler und Lohnzettel nebeneinander und gleich hoch, darunter über die ganze Breite die drei Artikel
   zum Nachlesen und der Knopf. Gilt auch auf breiten Schirmen (hebt die Dreispalten-Reihe ab 1540 px auf). */
@media (min-width: 901px) {
  #drei-eingriffe .ww-papier { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #drei-eingriffe .ww-vergleich { grid-column: 1 / -1; }
  #drei-eingriffe .ww-audit-wissen__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
  #drei-eingriffe .ww-audit-wissen__eintrag { height: 100%; }
  #drei-eingriffe .ww-vergleich .ww-rechenfuss { margin-top: 0; }
}

/* ---------- 23.09.2026 (Janis Wunsch): Leistungen mit viel Luft ----------
   Deutlich mehr Abstand zwischen den Stufen Check, Bausteine, Software und Betreuung. Die fünf
   Bausteine stehen immer offen, ohne Aufklapp-Knopf und ohne Vorschau-Chips. */
#so-funktionierts .ww-plan__pfeil { height: 56px; margin: 2.6rem 0 2.8rem; }
#so-funktionierts .ww-plan__etage { margin: 0 0 .2rem; }
#so-funktionierts .ww-plan__pfeil + .ww-plan__etage { margin-top: 0; }
#so-funktionierts .ww-plan--module.is-ready #bausteineInhalt.is-offen > .ww-plan__schublade-innen { padding-top: 1.8rem; }
#so-funktionierts #bausteineInhalt .ww-plan__steine { gap: 2.2rem 1.2rem; }
@media (max-width: 600px) {
  #so-funktionierts .ww-plan__pfeil { height: 44px; margin: 2rem 0 2.2rem; }
  #so-funktionierts #bausteineInhalt .ww-plan__steine { gap: 1.8rem; }
}

/* ---------- 23.09.2026 (Janis Wunsch): Karriereseite ohne Kopfbereich ----------
   Die Anzeige ist der erste Abschnitt und beginnt unter der festen Kopfleiste, ohne Überlappung nach oben. */
#bhMain > #anzeige.ww-sheet:first-child { margin-top: 0; border-radius: 0; border-top: 0; box-shadow: none; }
#bhMain > #anzeige.ww-sheet:first-child > .ww-sheet-inner { padding-top: clamp(2rem, 5vw, 3.5rem); }

/* ---------- 23.09.2026 (Janis Wunsch): Vertrauenspunkte im Hero ----------
   Nur Zusagen, die an anderer Stelle der Seite oder in der Datenschutzerklärung stehen. Keine Kundenzahlen,
   keine Sterne, keine fremden Gesichter (UWG §5, Anhang Nr. 23b/23c). Das Häkchen ist für Vorleseprogramme stumm. */
.ww-hero .ww-vertrauen { list-style: none; margin: 2.2rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--t-border); display: flex; flex-wrap: wrap; gap: .5rem 1.35rem; }
.ww-hero .ww-vertrauen li { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 500; color: var(--t-ink); }
.ww-hero .ww-vertrauen li::before {
  content: "✓" / ""; flex: none; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  font-size: .74rem; font-weight: 700; color: #15803D; background: #DCFCE7;
}
[data-mode="dark"] .ww-hero .ww-vertrauen li::before { color: #4ADE80; background: rgba(34, 197, 94, .18); }

/* ---------- 24.09.2026: KI-Kennzeichnung (Art. 50 KI-VO), Fuß-Überschriften, Formular-Kontrast (Teil A) ----------
   .ki-hinweis: kleines Abzeichen in der Ecke jedes KI-erzeugten Bildes; feste Farben, unabhängig vom Farbregler,
   Kontrast weiß auf dunklem Grund ≥ 7:1. Für Vorleseprogramme stumm (aria-hidden), im Druck ausgeblendet.
   26.09.2026 auf Janis Wunsch hellgrau: dunkle Schrift auf hellem Grund, Kontrast weiter ≥ 7:1.
   26.09.2026: auf Wunsch verkleinert und enger an die Ecke gerückt — der Kontrast (≥7:1, Pflicht nach Art. 50 KI-VO)
   bleibt unangetastet, nur Fläche und Abstand schrumpfen. */
.ki-hinweis{position:absolute;top:.5rem;left:.5rem;z-index:2;pointer-events:none;font:600 .62rem var(--font-main);letter-spacing:.08em;text-transform:uppercase;line-height:1;color:#2a2a30;background:rgba(236,236,240,.9);padding:.3rem .5rem;border-radius:999px;}
.ww-lauf__karte .ki-hinweis{left:auto;right:.5rem;}
.ww-hero .ki-hinweis--hero{position:absolute;top:calc(var(--nav-h) + .6rem);left:auto;right:clamp(10px,3vw,28px);z-index:2;}
@media print{.ki-hinweis{display:none;}}
/* Fußspalten: h3 statt h4 (Überschriftenfolge h2 → h3), Aussehen unverändert; line-height ausdrücklich,
   weil h1,h2,h3 sonst 1.08 setzt. */
.ww-footer h3{font-family:var(--font-mono);font-size:0.78rem;font-weight:600;text-transform:uppercase;letter-spacing:0.14em;color:var(--t-ink-2);margin:0 0 1.25rem;line-height:1.65;}
/* Handgriff 11 (00_EINHAENGEN_Freebies.md): Gesprächsformular im dunklen Modus, wie beim Freebie-Formular. */
.ww-sheet--dark .pg-wl__input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.45);color:var(--k-text, rgba(255,255,255,.9));}
.ww-sheet--dark .pg-wl__input::placeholder{color:rgba(255,255,255,.58);opacity:1;}
.ww-sheet--dark .pg-wl__check{color:var(--k-text-2, rgba(255,255,255,.68));}

/* ---------- Fusszeile, Janis Auftrag 25.09.2026 ----------
   Oben weniger Luft, die Aussage sitzt mittig im freien Raum (margin oben und
   unten auto), und die Spaltenblöcke unter der Linie stehen gestreckter.
   Nur Nachtrag, die Grundregeln oben bleiben unberuehrt. */
.ww-footer {
  padding-top: clamp(1.75rem, 2.6vw, 2.75rem);
}

.ww-footer__aussage {
  font-size: clamp(2.2rem, 7.1vw, 7.4rem);
  /* oben und unten auto: die Aussage steht mittig zwischen Kopf und Linie */
  margin-top: auto;
  margin-bottom: auto;
  /* Janis Wunsch 25.09.2026: auch in der Breite mittig */
  text-align: center;
}

.ww-footer__grid {
  gap: clamp(2.4rem, 4.6vw, 5.25rem);
  padding-top: clamp(1.75rem, 3.2vh, 2.75rem);
  padding-bottom: clamp(1rem, 2.4vh, 2rem);
  border-top: 1px solid var(--t-border);
}

/* Die Verweislisten unter der Linie duerfen atmen. */
.ww-footer__grid ul {
  gap: clamp(0.95rem, 1.9vh, 1.5rem);
}

@media (max-width: 700px) {
  /* Auf dem Handy traegt die Fusszeile keine volle Schirmhoehe, dort wuerde
     "auto" die Aussage nach unten druecken. */
  .ww-footer__aussage { margin-top: 0; margin-bottom: clamp(2.2rem, 6vh, 3.5rem); }
  .ww-footer__grid ul { gap: 0.9rem; }
}


/* ---------- Nachtrag 26.09.2026 · Firmierung im Kopfbereich ----------
   Jani hat "FLOW Datenreife" festgelegt, darunter "Digitalberatung" in der
   schwaecheren Auszeichnung. Damit "FLOW" weiter fuehrt, steht "Datenreife"
   eine Stufe leichter und etwas gedaempft. Rein additiv. */
/* 30.09.2026 (Janis Entscheidung): "Datenreife" steht zuerst, beide Woerter gleich stark. */
.ww-brand__wort {
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}

@media (max-width: 560px) {
  /* Der Name ist jetzt rund dreimal so breit wie vorher. Auf schmalen
     Schirmen muss er schrumpfen, sonst schiebt er den Gespraechsknopf
     aus der Leiste und die Seite scrollt seitlich. */
  .ww-brand__name { font-size: 1.02rem; }
  .ww-brand__sub { font-size: 0.52rem; letter-spacing: 0.12em; }
  .ww-brand { gap: 0.55rem; }
}

@media (max-width: 344px) {
  /* Erst unterhalb der kleinsten gaengigen Handybreite (iPhone SE, 375) faellt
     "Datenreife" weg. Bei 375 soll der volle Name stehen. */
  .ww-brand__wort { display: none; }
}

/* ---------- Nachtrag 26.09.2026 · echte Wortbildmarke ----------
   Bisher stand im Kopf ein getipptes "F" auf einer dunklen Kachel. Dort steht
   jetzt Janis Marke. Sie kommt als CSS-Maske herein, nicht als Bild: so faerbt
   sie sich ueber background und nimmt Hellmodus, Dunkelmodus und den
   Farbregler mit, und die Datei wird trotzdem nur einmal geladen.
   Der Pfad ist relativ zu site.css, also zum Wurzelordner.
   Ohne Maskenunterstuetzung bleibt die alte Kachel mit dem F stehen. */
@supports ((-webkit-mask-image: url("assets/flow-marke.svg")) or (mask-image: url("assets/flow-marke.svg"))) {
  .ww-brand__mark {
    width: 38px;
    height: 38px;
    border-radius: 0;
    background: var(--t-ink);
    color: transparent;
    font-size: 0;
    -webkit-mask: url("assets/flow-marke.svg") center / contain no-repeat;
    mask: url("assets/flow-marke.svg") center / contain no-repeat;
  }
}

/* ---------- Nachtrag 26.09.2026 · Über uns und Unsere Marke ----------
   Zwei neue Abschnitte auf der Startseite. Die Bilder sind Janis Marken-
   Mockups aus assets/ (marke-*.webp). Rein additiv. */
.ww-ueber { align-items: center; }
.ww-ueber__punkte { list-style: none; padding: 0; margin: 1.6rem 0 2rem; display: grid; gap: .9rem; }
.ww-ueber__punkte li { padding-left: 1.4rem; position: relative; font-size: .98rem; line-height: 1.55; color: var(--t-ink-2); }
.ww-ueber__punkte li::before { content: ""; position: absolute; left: 0; top: .62em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--t-accent-vivid); }
.ww-ueber__punkte strong { color: var(--t-ink); }
.ww-ueber__bild, .ww-marke__bild { position: relative; margin: 0; border-radius: 1.1rem; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.14); }
.ww-ueber__bild img, .ww-marke__bild img { display: block; width: 100%; height: auto; }
.ww-marke { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); margin-top: clamp(1.6rem, 4vh, 2.6rem); }
@media (max-width: 700px) { .ww-marke { grid-template-columns: 1fr; } }

/* ---------- Nachtrag 26.09.2026 · Leistungen als Selbsttest (Janis Idee) ----------
   Bis auf den Digital-Check startet alles eingeklappt (Regel bei den .ww-plan__schublade-
   Aufklappknoepfen). Die Fragen im Digital-Check markieren passende Bausteine und oeffnen
   die Schubladen ueber denselben data-plan-toggle-Mechanismus wie die Knoepfe selbst
   (site.js). Nichts davon wird gespeichert — kein Cookie, keine Kennung, siehe .ki-hinweis
   fuer dasselbe Prinzip bei Bildern. */
.lk-selbsttest { margin: 1.3rem 0; }
/* 26.09.2026, Nachtrag: Jani findet die Frage "sehr klar" — groesser und
   praesenter statt des kleinen Fliesstexts von vorher; der Preis daneben
   (siehe #digital-check .ww-plan__preis unten) tritt dafuer zurueck. */
.lk-selbsttest__frage { font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--t-ink); margin: 0 0 .8rem; }
.lk-selbsttest__antworten { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .2rem; }
.lk-chip {
  font: 700 .95rem var(--font-main);
  padding: .75rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--t-chrome);
  background: var(--t-panel);
  color: var(--t-ink);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.lk-chip:hover { border-color: var(--t-accent-vivid); }
.lk-chip[aria-pressed="true"] {
  background: var(--t-accent-vivid);
  border-color: var(--t-accent-vivid);
  color: #fff;
}
.lk-folgefragen { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--t-border); display: grid; gap: .6rem; }
.lk-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .86rem; line-height: 1.45; color: var(--t-ink-2); cursor: pointer; }
.lk-check input { margin-top: .2rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--t-accent-vivid); cursor: pointer; }
.lk-check:has(input:checked) span { color: var(--t-ink); font-weight: 600; }
.lk-selbsttest__ergebnis { margin-top: 1rem; padding: .75rem 1rem; border-radius: .7rem; background: color-mix(in srgb, var(--t-accent-vivid) 12%, transparent); color: var(--t-ink); font-size: .86rem; font-weight: 600; }

/* Der Dauer-CTA: bleibt beim Scrollen durch die Karte sichtbar und leuchtet in der
   Akzentfarbe, damit ein Gespraech "an jeder Stelle" erreichbar ist (Janis Wunsch). */
.lk-cta {
  position: sticky;
  bottom: 1rem;
  align-self: flex-start;
  margin-top: 1.3rem;
  background: var(--t-accent-vivid);
  color: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--t-accent-vivid) 20%, transparent), 0 10px 30px color-mix(in srgb, var(--t-accent-vivid) 45%, transparent);
  z-index: 3;
}
.lk-cta:hover { box-shadow: 0 0 0 7px color-mix(in srgb, var(--t-accent-vivid) 26%, transparent), 0 12px 34px color-mix(in srgb, var(--t-accent-vivid) 55%, transparent); }

/* Preis der Digital-Check-Karte tritt zurueck, damit die Frage fuehrt. */
#digital-check .ww-plan__preis b { font-size: .74rem; font-weight: 600; }
#digital-check .ww-plan__preis span { font-size: .64rem; }

/* Bausteine/Software, auf die der Selbsttest zeigt. */
.ww-plan__stein.ist-empfohlen,
.ww-plan__karte--software.ist-empfohlen {
  border-color: var(--t-accent-vivid);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-accent-vivid) 45%, transparent);
}
.ww-plan__stein.ist-empfohlen::before {
  content: "Passt zu Ihren Antworten";
  display: block;
  font: 700 .64rem var(--font-mono);
  letter-spacing: .04em;
  color: var(--t-accent-vivid);
  margin-bottom: .4rem;
}

/* ---------- Nachtrag 26.09.2026 · echte Logodatei im Kopf ----------
   Janis Wunsch: nicht die nachgebaute Fassung, sondern sein Mockup-Foto
   marke-zeichen-800.webp (Metallrelief auf Beton) — daraus nur das
   Zeichen zugeschnitten, siehe marke-zeichen-icon.png. Anders als beim
   vorherigen Versuch (flacher Scan mit weissem Grund) ist das hier ein
   Foto mit eigenem Betonton: kein Freistellungs-Trick (mix-blend-mode),
   stattdessen ein schmaler Rahmen mit Radius, damit die kleine Kachel
   neben dem Schriftzug ruhig wirkt. Passt sich nicht automatisch an den
   Dunkelmodus an — Aufgabe a260926lg04 (eine echte, freigestellte Datei)
   bleibt deshalb offen. */
.ww-brand__bild { height: 42px; width: auto; display: block; border-radius: 8px; }
@media (max-width: 560px) { .ww-brand__bild { height: 34px; border-radius: 6px; } }

/* ---------- Nachtrag 26.09.2026 · kurs.html mit Videos ---------- */
.ks-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; opacity: .28; z-index: 0; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .ks-hero__video { display: none; } }
.ks-eindruecke {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 1.6rem);
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
@media (max-width: 900px) { .ks-eindruecke { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ks-eindruecke { grid-template-columns: 1fr; } }
.ks-eindruecke__bild {
  position: relative; margin: 0; border-radius: 1rem; overflow: hidden; aspect-ratio: 3 / 4;
  background: rgba(255,255,255,.06);
}
.ks-eindruecke__bild video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-eindruecke__bild figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem .9rem;
  font-size: .78rem; font-weight: 600; color: #fff; line-height: 1.35;
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent);
}

/* kurs.html "Was Sie bekommen" als Kachelraster statt Fliesstext-Liste,
   naeher an den Feature-Kacheln der Referenzseite (Jani, 26.09.2026). */
.ks-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.3rem; }
@media (max-width: 900px) { .ks-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ks-tiles { grid-template-columns: 1fr; } }
.ks-tiles__karte { border: 1px solid var(--t-border); border-radius: 1rem; padding: 1.2rem 1.3rem; background: var(--t-panel); }
.ks-tiles__karte h3 { margin: 0 0 .4rem; font-size: .98rem; font-weight: 700; color: var(--t-ink); }
.ks-tiles__karte p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--t-ink-2); }

/* 26.09.2026: Leitfaden-Kapitel 2-7 bleiben als Vorschau sichtbar, fuehren aber in den Kurs. */
.mn-imkurs-marke {
  display: inline-block; margin-left: .4rem; padding: .12rem .5rem; border-radius: 999px;
  font: 700 .6rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
  color: var(--t-accent-vivid); background: color-mix(in srgb, var(--t-accent-vivid) 12%, transparent);
}
.mn-pfad__imkurs .ww-weg__nr { opacity: .55; }

/* FAQ „Geht es danach laufend weiter?": aufeinander aufbauende Schritte (26.09.2026) */
.ww-faq-text--vor { padding-bottom: .8rem; }
.ww-faq-schritte { list-style: none; counter-reset: s; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
.ww-faq-schritte li { counter-increment: s; position: relative; padding: .7rem .9rem .7rem 2.9rem; border-radius: 12px; border: 1px solid var(--t-border);
  background: var(--t-panel); font-size: .9rem; line-height: 1.55; color: var(--t-ink-2); }
.ww-faq-schritte li::before { content: counter(s); position: absolute; left: .85rem; top: .72rem; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: grid; place-items: center; font: 600 .72rem var(--font-main); color: #fff; background: var(--t-accent-vivid); }
.ww-faq-schritte li + li::after { content: ""; position: absolute; left: 1.53rem; top: -.6rem; width: 2px; height: .6rem; background: color-mix(in srgb, var(--t-accent-vivid) 45%, transparent); }
.ww-faq-schritte b { color: var(--t-ink); font-weight: 600; }
.ww-faq-schritte a { color: var(--t-accent-vivid); text-decoration: underline; text-underline-offset: 2px; }

/* Selbsttest im dunklen Leistungs-Sheet (26.09.2026): Das Sheet bleibt in beiden Modi dunkel,
   die Theme-Tokens (--t-ink ...) wechseln aber mit dem Schalter. Deshalb hier feste helle Farben
   wie bei den übrigen Plan-Karten, sonst steht dunkle Schrift auf dunklem Grund. */
:is(.ww-sheet--dark, .ww-sheet--darker) .lk-selbsttest__frage { color: #fff; }
:is(.ww-sheet--dark, .ww-sheet--darker) .lk-chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); color: #fff; }
:is(.ww-sheet--dark, .ww-sheet--darker) .lk-chip:hover { border-color: hsl(var(--accent-h, 217) 90% 70%); }
:is(.ww-sheet--dark, .ww-sheet--darker) .lk-chip[aria-pressed="true"] { background: var(--t-accent-vivid); border-color: var(--t-accent-vivid); color: #fff; }
:is(.ww-sheet--dark, .ww-sheet--darker) .lk-folgefragen { border-top-color: rgba(255, 255, 255, .18); }
:is(.ww-sheet--dark, .ww-sheet--darker) .lk-check { color: rgba(255, 255, 255, .72); }
:is(.ww-sheet--dark, .ww-sheet--darker) .lk-check:has(input:checked) span { color: #fff; }
:is(.ww-sheet--dark, .ww-sheet--darker) .lk-selbsttest__ergebnis { color: #fff; background: color-mix(in srgb, var(--t-accent-vivid) 24%, transparent); }

/* Dunkle Sheets bleiben in beiden Modi dunkel (26.09.2026). Ablauf-Timeline und Absendeknopf
   hingen an Theme-Tokens und wurden dunkel auf dunkel: im hellen Modus dunkelblau/grau auf Schwarz,
   im dunklen Modus fast schwarze Schrift auf dem Knopf. Hier feste helle Farben. */
:is(.ww-sheet--dark, .ww-sheet--darker) .ww-timeline__when { color: hsl(var(--accent-h, 217) 90% 72%); }
:is(.ww-sheet--dark, .ww-sheet--darker) .ww-timeline li p { color: rgba(255, 255, 255, .74); }
:is(.ww-sheet--dark, .ww-sheet--darker) .ww-timeline li p a { color: #fff; }
:is(.ww-sheet--dark, .ww-sheet--darker) .pg-wl__send {
  background: #fff; color: #0F172A; border-color: #fff;
  box-shadow: 0 0 0 5px hsl(var(--accent-h, 217) 90% 60% / .22), 0 10px 30px hsl(var(--accent-h, 217) 90% 55% / .35);
}
:is(.ww-sheet--dark, .ww-sheet--darker) .pg-wl__send .ww-arrow { color: inherit; }
:is(.ww-sheet--dark, .ww-sheet--darker) .pg-wl__send:hover { background: hsl(var(--accent-h, 217) 90% 94%); }

/* Auswahlliste im dunklen Formular (27.09.2026): Die Optionen erbten die weisse Schrift des Feldes,
   die aufgeklappte Liste blieb aber browserweiss, also weiss auf weiss. Liste dunkel, Schrift hell. */
:is(.ww-sheet--dark, .ww-sheet--darker) select.pg-wl__input { color-scheme: dark; }
:is(.ww-sheet--dark, .ww-sheet--darker) select.pg-wl__input option { background: #16161A; color: #F4F4F6; }
:is(.ww-sheet--dark, .ww-sheet--darker) select.pg-wl__input option:checked { background: #2A2A31; }


/* ---------- 27.09.2026 · Pre-Launch: „Bewegung anhalten“ (WCAG 2.2.2) ----------
   Knopf in der Kopfzeile (bewegung.js), gleiche Form wie der Hell/Dunkel-Schalter.
   html.bewegung-aus hält Laufband und Übergänge an; Videos pausiert das Skript. */
.bh-bewegung svg { width: 17px; height: 17px; display: block; }
.bh-bewegung .bh-bewegung__spiel { display: none; }
html.bewegung-aus .bh-bewegung .bh-bewegung__pause { display: none; }
html.bewegung-aus .bh-bewegung .bh-bewegung__spiel { display: block; }
html.bewegung-aus .ww-lauf__spur { animation-play-state: paused !important; }
html.bewegung-aus .dx-diagramm .e,
html.bewegung-aus .dx-punkt--gruen,
html.bewegung-aus .dx-tag__punkt { animation: none !important; }
@media (max-width: 380px) { .bh-bewegung { width: 40px; height: 40px; } }

/* ---------- 29.09.2026 · Kopfszene mit Gehirn (Jani) ----------
   hero-gehirn.js setzt diese Klassen nur ab 1025 px Breite und ohne "Bewegung reduzieren".
   Der Kopf wird doppelt so hoch: die Huelle ist Kopfhoehe plus eine Bildschirmhoehe,
   der Kopf bleibt darin stehen (top setzt das Skript, damit hohe Koepfe nicht abgeschnitten werden).
   Der naechste Abschnitt gleitet zum Schluss darueber. overflow: clip statt hidden, sonst
   haelt sticky nicht. */
.ww-hero-buehne { position: relative; }
.ww-hero.ww-hero--buehne { position: sticky; z-index: 1; overflow: clip; }
.ww-nach-buehne { position: relative; z-index: 3; margin-top: -38vh; box-shadow: 0 -30px 60px rgba(7, 7, 9, .18); }
.ww-hero--buehne .ww-hero__text {
  /* Beim Scrollen tritt der Text zurueck, das Gehirn rueckt in den Fokus (hero-gehirn.js setzt --szene-text 0..1). */
  opacity: calc(1 - var(--szene-text, 0) * .88);
  transform: translateY(calc(var(--szene-text, 0) * -28px));
}
/* Tastatur: wer in den Text springt, sieht ihn voll. */
.ww-hero--buehne .ww-hero__text:focus-within { opacity: 1; transform: none; }

/* 30.09.2026 (Samsung S25, 360 px): In der schmalen Textspalte neben der Zahl entstehen im Blocksatz große
   Lücken. Auf Schirmen bis 480 px steht der Text linksbündig, ab 481 px bleibt der Blocksatz (Janis Wunsch vom 23.09.). */
@media (max-width: 480px) {
  .ww-hero .ww-metrics__label { text-align: left; text-align-last: auto; }
}

/* 30.09.2026 (Handy, Gespraech vereinbaren): Das Dropdown "Worum geht es ungefaehr?" ist wegen seiner langen
   Optionen von Natur aus 510 px breit. Im Raster zog es die Spalte auf 510 px und die Seite liess sich nicht
   mehr richtig ziehen. Felder duerfen nie breiter als ihre Spalte sein, Rasterkinder duerfen schrumpfen. */
.ww-split > * { min-width: 0; }
.pg-wl__input, select.pg-wl__input { max-width: 100%; min-width: 0; }
select.pg-wl__input { width: 100%; text-overflow: ellipsis; }