/* ============================================================
   VALDEA · Design-System (Beta 2)
   Marke: Ruhe · Klarheit · Wertigkeit
   Leitmotiv: Ω als geometrische Ordnungsfigur (kein Diagramm).
   Keine externen Hosts — System-Schriftstack, alles self/inline.
   Light + Dark (prefers-color-scheme UND [data-theme]). WCAG-AA.
   Vollständiges Superset: Tokens + Basis + alle Komponenten.
   ============================================================ */

/* ---------------------------------------------------------------
   0 · SCHRIFTEN — lokal eingebunden (self-hosted, KEIN externer Host)
   Instrument Sans (Body/UI) · Newsreader (Headings/Display/Ω, inkl. Kursiv)
   woff2, font-display:swap. Dateien unter /static/fonts/.
   --------------------------------------------------------------- */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/InstrumentSans-400.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/InstrumentSans-500.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/InstrumentSans-600.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/InstrumentSans-700.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/Newsreader-400.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/Newsreader-400i.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/Newsreader-500.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/Newsreader-600.woff2") format("woff2")}

/* ---------------------------------------------------------------
   1 · TOKENS — Light (Default auf blankem :root)
   --------------------------------------------------------------- */
:root{
  /* Markenfarben — Redesign Beta 2.1 (Creme/Navy/Teal/Gold) */
  --navy:#0A1D3D;  --navy-900:#061229;  --navy-700:#16386B;
  --teal:#1E9C96;  --teal-600:#187E79;  --teal-700:#136460;
  --gold:#C9962E;  --gold-600:#9A7420;  --gold-soft:#E8D6A6;
  --graphite:#333333;

  /* Flächen & Struktur — warme, editoriale Creme-Palette */
  --bg:#F7F6F1;
  --bg-tint:#F0ECDF;                 /* dezenter warmer Radial-Akzent oben rechts */
  --surface:#FFFFFF;
  --surface-2:#EFEDE4;
  --surface-3:#E7E3D6;
  --border:#E3E0D3;
  --border-strong:#D0CBB8;

  /* Text */
  --text:#252C3A;
  --text-strong:#141B2B;
  --text-muted:#5E6677;   /* ~5.3:1 auf Creme — AA */
  --text-faint:#646B7A;   /* WCAG-AA auf Creme: ~4.7:1 auch fuer Kleintext */
  --heading:var(--navy);             /* #0A1D3D · schaltet im Dark-Mode auf hell */

  /* Interaktion */
  --link:#177a74;          /* dunkleres Teal derselben Familie · AA: ~5.2:1 Weiss / ~4.8:1 Creme
                              (Redesign-Teal #1E9C96 = nur ~2.6:1 → bleibt Flaechen-/Akzentfarbe) */
  --link-hover:var(--teal-700);
  --primary-1:var(--navy-700);
  --primary-2:var(--navy);
  --on-primary:#ffffff;
  --focus-ring:rgba(30,156,150,.35);
  --tint-ring:rgba(30,156,150,.16);

  /* Zustände */
  --ok:#2e7d5b;   --ok-bg:#e6f4ec;
  --warn:#a9781f; --warn-bg:#fbf1dc;
  --bad:#b0413e;  --bad-bg:#f9e6e5;
  --info:#1c4a89; --info-bg:#eef2f8;

  /* Ω-Grafik */
  --omega-track:rgba(10,29,61,.14);
  --omega-arc-1:var(--teal);
  --omega-arc-2:var(--navy);
  --omega-foot:var(--gold);
  --omega-glyph:rgba(201,150,46,.12);

  /* Abstände (8pt-nah) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* Radien */
  --r-xs:8px; --r-sm:10px; --r:14px; --r-md:16px; --r-lg:22px; --r-pill:999px;

  /* Schatten */
  --shadow:0 1px 2px rgba(10,29,61,.04), 0 18px 50px rgba(10,29,61,.08);
  --shadow-lg:0 2px 4px rgba(10,29,61,.05), 0 26px 60px rgba(10,29,61,.12);
  --shadow-modal:0 24px 70px rgba(9,20,40,.35);

  /* Typografie — lokal self-hosted (§0), keine externen Hosts.
     --head/--sans = Instrument Sans (Body/UI) · --display = Newsreader (Headings/Ω/Kursiv) */
  --head:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* Editorialer Serif-Display — Newsreader (lokal), mit Georgia-Fallback */
  --display:"Newsreader",Georgia,"Times New Roman",serif;

  /* Typo-Skala (editorialer Rhythmus, tabellarische Ziffern) */
  --fs-eyebrow:.74rem; --fs-fine:.82rem; --fs-sm:.9rem; --fs-base:16.5px;
  --fs-lead:1.2rem; --fs-h4:1rem; --fs-h3:1.12rem; --fs-h2:1.5rem;
  --fs-display:clamp(2rem,4.4vw,3.1rem);

  /* Zeilenhöhen & Laufweiten */
  --lh-tight:1.14; --lh-head:1.22; --lh-body:1.62;
  --ls-eyebrow:.18em; --ls-head:-.012em; --ls-display:-.018em;

  --maxw:1080px; --maxw-text:720px; --maxw-wide:1180px;
}

/* ---------------------------------------------------------------
   2 · TOKENS — Dark
   a) System-Präferenz (nur wenn nicht ausdrücklich „light")
   b) Ausdrücklicher Toggle [data-theme="dark"]
   --------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#070F1F;
    --bg-tint:#0E1B33;
    --surface:#0D1A32;
    --surface-2:#13233F;
    --surface-3:#1A2B49;
    --border:#22345A;
    --border-strong:#334768;

    --text:#E6ECF7;
    --text-strong:#F4F8FF;
    --text-muted:#97A4BE;
    --text-faint:#8B99B4;   /* AA auf surface-2 (~5:1) auch fuer Kleintext */
    --heading:#ECF2FF;

    --link:#4FD0C9;         /* helles Teal auf Dunkel — AA >7:1 */
    --link-hover:#7ee0da;
    --primary-1:#1f5a9e;
    --primary-2:#153f77;
    --on-primary:#ffffff;
    --focus-ring:rgba(56,194,187,.45);
    --tint-ring:rgba(56,194,187,.20);

    --ok:#6cc79a;   --ok-bg:#132c22;
    --warn:#e0b45f; --warn-bg:#302713;
    --bad:#e88b88;  --bad-bg:#331c1b;
    --info:#8fb4e8; --info-bg:#182338;

    --omega-track:rgba(230,236,247,.16);
    --omega-arc-1:#38C2BB;
    --omega-arc-2:#6ea6e8;
    --omega-foot:#E0B453;
    --omega-glyph:rgba(224,180,83,.14);

    --shadow:0 1px 2px rgba(0,0,0,.4), 0 22px 56px rgba(0,0,0,.5);
    --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 26px 64px rgba(0,0,0,.6);
    --shadow-modal:0 28px 80px rgba(0,0,0,.65);
  }
}
/* Ausdrücklicher Dark-Toggle gewinnt immer */
:root[data-theme="dark"]{
  --bg:#070F1F;  --bg-tint:#0E1B33;
  --surface:#0D1A32; --surface-2:#13233F; --surface-3:#1A2B49;
  --border:#22345A; --border-strong:#334768;
  --text:#E6ECF7; --text-strong:#F4F8FF; --text-muted:#97A4BE; --text-faint:#8B99B4;
  --heading:#ECF2FF;
  --link:#4FD0C9; --link-hover:#7ee0da;
  --primary-1:#1f5a9e; --primary-2:#153f77; --on-primary:#fff;
  --focus-ring:rgba(56,194,187,.45); --tint-ring:rgba(56,194,187,.20);
  --ok:#6cc79a; --ok-bg:#132c22; --warn:#e0b45f; --warn-bg:#302713;
  --bad:#e88b88; --bad-bg:#331c1b; --info:#8fb4e8; --info-bg:#182338;
  --omega-track:rgba(230,236,247,.16); --omega-arc-1:#38C2BB; --omega-arc-2:#6ea6e8;
  --omega-foot:#E0B453; --omega-glyph:rgba(224,180,83,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 22px 56px rgba(0,0,0,.5);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 26px 64px rgba(0,0,0,.6);
  --shadow-modal:0 28px 80px rgba(0,0,0,.65);
}

/* ---------------------------------------------------------------
   3 · RESET / BASIS
   --------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--bg-tint) 0, transparent 60%) no-repeat,
    var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---------------------------------------------------------------
   4 · TYPOGRAFIE
   --------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);color:var(--heading);   /* Newsreader-Serif — editorialer Ziel-Look */
  line-height:1.18;font-weight:600;letter-spacing:-.01em;margin:0 0 .5em;
}
h1{font-size:clamp(1.8rem,3.2vw,2.5rem)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:1rem}
p{margin:.5em 0}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
strong,b{color:inherit}
.muted{color:var(--text-muted);font-size:var(--fs-sm)}
.fine{color:var(--text-faint);font-size:var(--fs-fine)}
.eyebrow{font-family:var(--head);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;font-size:var(--fs-eyebrow);color:var(--link)}
.lead{font-size:var(--fs-lead);color:var(--text-muted);line-height:1.55}
code{background:var(--surface-2);color:var(--text);padding:1px 6px;border-radius:5px;
  font-family:var(--mono);font-size:.85em}

/* ---------------------------------------------------------------
   5 · LAYOUT
   --------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.app-shell{display:flex;flex-direction:column;min-height:100vh}
/* width:100% + min-width:0 (Beta 2.7): als Flex-Kind des .app-shell darf die
   Main-Spalte NICHT auf die Min-Content-Breite breiter Kinder (Matrix 640px,
   Ω-Wert-Reihe, T-Pfad, Dotplot) aufgehen — sonst schiebt sie auf schmalen
   Viewports die ganze Seite in horizontales Scrollen und der Konstellations-
   Orbit stünde außermittig (Gründer-Feedback: Orbit zentriert, kein
   horizontales Scrollen). Die inneren Scroll-Container (.matrix-card,
   .tpath ≤720px) übernehmen dann wie vorgesehen. */
.app-main{flex:1 0 auto;width:100%;min-width:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
@media(max-width:820px){.grid-2{grid-template-columns:1fr}}
.section-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--r-xs);
  background:var(--navy);color:#fff;font-family:var(--head);font-size:.8rem;font-weight:700;
  margin-right:8px;vertical-align:2px}
:root[data-theme="dark"] .section-num,
:root:not([data-theme="light"]) .section-num{color:#fff}

/* Skip-Link (Barrierefreiheit) */
.skip-link{position:absolute;left:12px;top:-48px;z-index:100;background:var(--navy);color:#fff;
  padding:10px 16px;border-radius:var(--r-xs);transition:top .15s}
.skip-link:focus{top:12px;text-decoration:none}

/* ---------------------------------------------------------------
   6 · HEADER — Ω-Wortmarke
   --------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:18px;padding:14px 24px;
  max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;color:var(--heading);text-decoration:none}
.brand:hover{text-decoration:none}
/* Ω-Badge / Logo-Lockup — fixe Navy-Scheibe, goldene Marken-Glyphe „G1"
   (Beta 2.8: echtes Serifen-Ω als Mask statt Schriftzeichen; Kachel bleibt) */
.omega-badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,#122B54,#061229);color:#E3B95B;
  font-family:var(--display);font-size:1.4rem;font-weight:600;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(227,185,91,.4)}
.omega-badge::before{content:"";width:54%;height:52%;background:currentColor;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
.wordmark{font-family:var(--head);font-weight:700;font-size:1.16rem;letter-spacing:.22em;
  color:var(--heading);text-transform:uppercase}
.wordmark small{display:block;font-size:.58rem;letter-spacing:.34em;color:var(--text-faint);
  font-weight:600;margin-top:2px}
.header-claim{margin-left:auto;font-style:italic;color:var(--text-muted);font-size:.9rem}
.site-header nav{display:flex;align-items:center;gap:18px;margin-left:12px}
.site-header nav.has-claim{margin-left:0}
.site-header nav a{font-size:.88rem;color:var(--text-muted);font-weight:600}
@media(max-width:720px){.header-claim{display:none}.site-header nav{margin-left:auto}}

/* Theme-Toggle (ohne externes JS) */
.theme-toggle{display:inline-grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text-muted);
  cursor:pointer;font-size:1rem;line-height:1;transition:.15s}
.theme-toggle:hover{border-color:var(--teal);color:var(--teal)}
.theme-toggle .icon-dark{display:none}
.theme-toggle .icon-light{display:block}
:root[data-theme="dark"] .theme-toggle .icon-dark{display:block}
:root[data-theme="dark"] .theme-toggle .icon-light{display:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-dark{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon-light{display:none}
}

/* ---------------------------------------------------------------
   7 · FOOTER (bleibt dunkel in beiden Modi — Markenanker)
   --------------------------------------------------------------- */
.site-footer{margin-top:var(--sp-8);background:#061229;color:#8FA3C6;padding:34px 0}
.site-footer .fine{color:#7385A6}
.site-footer .omega-badge{width:30px;height:30px;font-size:1.05rem;margin-bottom:8px}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.footer-brand{max-width:640px}
.footer-brand .footer-name{color:#D9E4F7}
.footer-legal{display:flex;flex-direction:column;gap:6px;text-align:right;margin-left:auto}
.footer-legal a{color:#D9E4F7;text-decoration:none;font-size:.85rem}
.footer-legal a:hover{text-decoration:underline}
@media(max-width:820px){.footer-legal{text-align:left;margin-left:0}}

/* ---------------------------------------------------------------
   8 · HERO (mit Ω-Motiv)
   --------------------------------------------------------------- */
.hero{padding:var(--sp-7) 0 12px;max-width:var(--maxw-text)}
.hero .eyebrow{margin-bottom:14px;display:inline-block}
/* Ω-Hero mit Ordnungsring rechts */
.hero-omega{display:grid;grid-template-columns:1fr auto;gap:var(--sp-6);align-items:center;
  max-width:100%;padding:var(--sp-7) 0 var(--sp-5)}
.hero-omega .hero-copy{max-width:var(--maxw-text)}
.hero-omega .hero-art{width:min(220px,32vw);opacity:.96}
@media(max-width:720px){.hero-omega{grid-template-columns:1fr}.hero-omega .hero-art{display:none}}

/* ---------------------------------------------------------------
   9 · BUTTONS
   --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--surface);border:1px solid var(--navy);color:var(--navy);
  padding:11px 20px;border-radius:12px;cursor:pointer;font-family:var(--head);
  font-weight:600;font-size:.95rem;transition:.15s;text-decoration:none}
/* Dark-Anpassung NUR im Dark-Kontext (Beta 2.7, Kritiker F5): der
   :root:not([data-theme="light"])-Selektor stand vorher AUSSERHALB des
   Media-Querys und griff damit auch im System-Light-Default — er
   überstimmte dann u. a. .mr-btn.is-active (dunkler Text auf Navy). */
:root[data-theme="dark"] .btn{border-color:var(--border-strong);color:var(--text)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn{border-color:var(--border-strong);color:var(--text)}
}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn-primary{background:linear-gradient(150deg,var(--primary-1),var(--primary-2));color:var(--on-primary);
  border-color:transparent;box-shadow:0 6px 18px rgba(20,59,114,.24)}
.btn-primary:hover{background:linear-gradient(150deg,var(--primary-2),var(--navy-900));color:var(--on-primary)}
.btn-secondary{background:var(--surface);border-color:var(--teal);color:var(--teal-600)}
:root[data-theme="dark"] .btn-secondary,
:root:not([data-theme="light"]) .btn-secondary{color:var(--link)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--heading)}
.btn-ghost:hover{border-color:var(--navy);background:var(--surface-2)}
.btn-lg{padding:15px 30px;font-size:1.05rem;border-radius:var(--r)}
.btn-sm{padding:6px 14px;font-size:.85rem;border-radius:var(--r-xs)}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed}
.actions{text-align:center;margin:30px 0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------------------------------------------------------------
   10 · CARDS
   --------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:30px;margin:22px 0;box-shadow:var(--shadow)}
.card.narrow{max-width:440px}
.card h2:first-child,.card h3:first-child{margin-top:0}
.ticks{list-style:none;padding:0;margin:.4em 0}
.ticks li{padding-left:28px;position:relative;margin:.55em 0}
.ticks li:before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 4px var(--tint-ring)}
.doctrine{border-left:3px solid var(--gold);padding:10px 16px;margin:16px 0 0;color:var(--heading);
  font-style:italic;background:linear-gradient(90deg,rgba(198,154,53,.08),transparent)}
.dims{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.dim-chip{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  padding:10px 13px;min-width:130px}
.dim-chip strong{display:block;color:var(--heading);font-size:.92rem}
.dim-chip span{display:block;color:var(--text-muted);font-size:.78rem;margin-top:2px}

/* ---------------------------------------------------------------
   11 · FORMS
   --------------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
label{font-size:.9rem;color:var(--text);font-weight:500}
.block{display:block;margin:16px 0}
input[type=text],input[type=email],input[type=number],input:not([type]),
select,textarea,.note{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--r-sm);
  font:inherit;margin-top:6px;background:var(--surface);color:var(--text);transition:.15s}
input:focus,select:focus,textarea:focus,.note:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--tint-ring)}
textarea{resize:vertical;line-height:1.5}
::placeholder{color:var(--text-faint)}
.consents{margin-top:18px;display:grid;gap:12px;background:var(--surface-2);
  border-radius:12px;padding:16px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--navy);width:16px;height:16px;flex:0 0 auto}
.check.small{font-size:.82rem;color:var(--text-muted);align-items:center}
:root[data-theme="dark"] .check input,
:root:not([data-theme="light"]) .check input{accent-color:var(--teal)}

/* ---------------------------------------------------------------
   12 · LIKERT / SKALA 1–5 + „nicht beurteilbar"
   Große, tappbare, tastaturbedienbare Radios.
   Klassen .item/.scale/.opt bleiben (assessment.html), plus .likert-Alias.
   --------------------------------------------------------------- */
.item{border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;margin:14px 0;
  background:var(--surface);transition:.15s}
.item:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.item-head{display:flex;align-items:center;gap:10px;font-size:.74rem}
.item-nr{background:var(--navy);color:#fff;border-radius:var(--r-xs);min-width:24px;height:24px;
  display:grid;place-items:center;font-weight:700;font-family:var(--head);padding:0 4px}
.item-dim{color:var(--link);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.item-code{color:var(--text-faint);margin-left:auto;font-variant-numeric:tabular-nums}
.item-text{margin:10px 0 14px;font-size:1.05rem;color:var(--text-strong)}

.scale,.likert{display:flex;gap:8px;flex-wrap:wrap}
.opt{cursor:pointer;position:relative}
.opt input{position:absolute;opacity:0;inset:0;margin:0}
.opt > span{display:grid;place-items:center;width:46px;height:46px;min-width:46px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  font-weight:700;color:var(--text-muted);font-family:var(--head);transition:.12s}
.opt:hover > span{border-color:var(--teal);color:var(--teal-600)}
:root[data-theme="dark"] .opt:hover > span,
:root:not([data-theme="light"]) .opt:hover > span{color:var(--link)}
.opt input:checked + span{background:var(--navy);color:#fff;border-color:var(--navy);
  box-shadow:0 4px 12px rgba(20,59,114,.24)}
.opt input:focus-visible + span{box-shadow:0 0 0 3px var(--focus-ring)}
.opt-na > span{width:auto;padding:0 14px;color:var(--text-faint)}
.opt-na input:checked + span{background:var(--gold);border-color:var(--gold);color:#3a2c07}
/* Größere Tap-Fläche auf Touch/kleinen Screens */
@media(max-width:640px){
  .opt > span{width:52px;height:52px;min-width:52px;font-size:1.05rem}
}
.item-extra{display:flex;gap:16px;align-items:center;margin-top:12px;flex-wrap:wrap}
.item-extra .note{flex:1;min-width:240px;margin-top:0}

/* Feedback-Rating-Block (Instrument-Feedback) */
.fb-rating{margin:16px 0;padding-bottom:12px;border-bottom:1px dashed var(--border)}
.fb-q{margin-bottom:8px}
.fb-scale{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fb-scale .anchor{font-size:.78rem;color:var(--text-faint);max-width:160px}

/* ---------------------------------------------------------------
   13 · FORTSCHRITT / STEPPER
   --------------------------------------------------------------- */
.scale-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.82rem;color:var(--text-muted);
  margin:12px 0 6px}
.scale-legend b{color:var(--heading)}
.scale-legend .na b{color:var(--gold)}
.progress-sticky{position:sticky;top:66px;z-index:20;
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter:blur(8px);padding:12px 0;margin:6px 0 18px;border-bottom:1px solid var(--border)}
.progress{position:relative;background:var(--surface-3);border-radius:var(--r-pill);height:10px;overflow:hidden}
.progress-bar{height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--teal),var(--navy));transition:width .25s}
#progress-label{font-size:.76rem;color:var(--text-muted);font-weight:600}
.progress-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.progress-meta #progress-label{margin-right:auto;font-size:.9rem}
.timer{font-family:var(--head);font-variant-numeric:tabular-nums;color:var(--heading);font-weight:600;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-xs);
  padding:4px 10px;font-size:.9rem}

/* Stepper (Flow-Schritte) */
.stepper{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0;counter-reset:step}
.stepper li{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:120px;
  color:var(--text-faint);font-size:.82rem;font-weight:600}
.stepper li:before{counter-increment:step;content:counter(step);
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--border);background:var(--surface);color:var(--text-faint);
  font-family:var(--head);font-size:.85rem}
.stepper li.is-done{color:var(--teal-600)}
.stepper li.is-done:before{content:"✓";background:var(--teal);border-color:var(--teal);color:#fff}
.stepper li.is-current{color:var(--heading)}
.stepper li.is-current:before{background:var(--navy);border-color:var(--navy);color:#fff;
  box-shadow:0 0 0 4px var(--tint-ring)}

/* ---------------------------------------------------------------
   14 · BADGES / CHIPS / PILLS
   --------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-weight:700;
  font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;padding:4px 11px;
  border-radius:var(--r-pill)}
.badge-navy{background:var(--info-bg);color:var(--info)}
.badge-teal{background:var(--ok-bg);color:var(--ok)}
.badge-gold{background:var(--warn-bg);color:#7a5a10}   /* AA auf warn-bg (~5.6:1) */
.badge-beta{background:var(--warn-bg);color:var(--warn);border:1px solid var(--gold-soft)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:7px 14px;font-size:.86rem;color:var(--text)}
.chip b{color:var(--heading)}
.chip.strong{border-color:var(--teal);background:var(--ok-bg)}
.chip.space{border-color:var(--gold-soft);background:var(--warn-bg)}
.pillrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.pill-dim{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:7px 14px;font-size:.86rem}
.pill-dim b{color:var(--heading)}
.pill-dim.strong{border-color:var(--teal);background:var(--ok-bg)}
.pill-dim.space{border-color:var(--gold-soft);background:var(--warn-bg)}
.pill{padding:3px 12px;border-radius:var(--r-pill);font-size:.8rem;font-weight:700;font-family:var(--head)}
/* (Eignungs-/Verwertbarkeits-Pills entfernt — §6: keine Eignungssprache.) */

/* ---------------------------------------------------------------
   15 · ERGEBNIS / REPORT
   --------------------------------------------------------------- */
.report-hero{background:linear-gradient(150deg,var(--navy),var(--navy-900));color:#fff;
  border-radius:var(--r-lg);padding:40px 36px;margin:24px 0;box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden}
.report-hero:after{content:"";position:absolute;right:-4px;bottom:2px;width:11.4rem;height:10.7rem;
  background:var(--omega-glyph);pointer-events:none;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
.report-hero h1{color:#fff;position:relative}
.report-hero .lead{color:#d6e2f5;position:relative;max-width:640px}
.report-hero .eyebrow{color:var(--gold-soft)}

/* Ergebnis-Karten */
.result-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--shadow)}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:18px 0}
.result-metric{display:flex;align-items:baseline;gap:10px}
.result-metric .value{font-family:var(--head);font-weight:700;font-size:2.1rem;color:var(--heading);
  font-variant-numeric:tabular-nums;line-height:1}
.result-metric .unit{color:var(--text-faint);font-size:.9rem}
.result-caption{color:var(--text-muted);font-size:.9rem;margin-top:6px}

.dim-report{display:grid;gap:14px}
.dim-row{border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;background:var(--surface)}
.dim-row-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.dim-name{font-family:var(--head);font-weight:700;color:var(--heading);font-size:1.05rem}
.dim-kern{color:var(--text-faint);font-size:.82rem}
.dim-badge{margin-left:auto;font-size:.74rem;font-weight:700;font-family:var(--head);
  padding:4px 11px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.04em}
/* §6: keine Wertungs-/Rangfarben (kein rot→gruen). Neutrale, valenzfreie Auszeichnung —
   die Auspraegung traegt das Label/der Text, nicht die Farbe. */
.lvl-1,.lvl-2,.lvl-3,.lvl-4,.lvl-5{background:var(--surface-2);color:var(--heading)}
.bar{position:relative;height:12px;background:var(--surface-2);border-radius:var(--r-pill);
  overflow:hidden;margin:2px 0 12px}
.bar-fill{position:absolute;inset:0 auto 0 0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--teal),var(--navy))}
.bar-val{font-variant-numeric:tabular-nums;font-weight:700;color:var(--heading);
  font-family:var(--head);font-size:.9rem}
.dim-text{color:var(--text-muted);font-size:.98rem}
.cons-tag{display:inline-block;font-size:.72rem;color:var(--text-muted);background:var(--surface-2);
  border-radius:6px;padding:2px 8px;margin-left:8px}
.dim-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.item-signal{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);
  display:grid;gap:6px;font-size:.9rem;color:var(--text-muted)}
.item-signal .isig{display:inline-block;font-weight:700;font-family:var(--head);font-size:.78rem;
  padding:1px 8px;border-radius:6px;margin-right:6px}
.item-signal .isig.up{background:var(--ok-bg);color:var(--ok)}
.item-signal .isig.down{background:var(--warn-bg);color:var(--warn)}

.antwortmuster{background:linear-gradient(160deg,var(--surface),var(--warn-bg));border:1px solid var(--gold-soft)}
.antwortmuster h2{margin-top:6px}
.antwortmuster h3{font-size:.95rem;margin:18px 0 6px;color:var(--heading)}
.antwortmuster .am-text{font-size:1.04rem;color:var(--text);line-height:1.55}
.antwortmuster .ticks li:before{background:var(--gold);box-shadow:0 0 0 4px rgba(198,154,53,.16)}

.prognose{background:linear-gradient(160deg,var(--surface),var(--info-bg));border:1px solid var(--border)}
.prognose h2{margin-top:6px}
.prognose-these{font-size:1.12rem;color:var(--text-strong);font-weight:500;line-height:1.5}
.hebel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}
.hebel-card{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--gold);
  border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.hebel-card h4{margin:6px 0 10px;color:var(--heading);font-size:1.05rem}
.hebel-card p{font-size:.9rem;margin:.4em 0;color:var(--text-muted)}
.hebel-card b{color:var(--heading)}
.hebel-prio{display:inline-block;font-family:var(--head);font-weight:700;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-600);background:var(--warn-bg);border-radius:var(--r-pill);padding:3px 10px}
.hebel-wirkung{border-top:1px dashed var(--border);padding-top:8px;margin-top:8px;color:var(--link)!important}
.hebel-wirkung b{color:var(--link)!important}
.horizont{background:var(--navy);color:#eaf1fb;border-radius:var(--r);padding:16px 20px;margin-top:12px;font-size:1rem}
.horizont b{color:var(--gold-soft)}
.pattern{border:1px solid var(--border);border-left:4px solid var(--teal);border-radius:12px;
  padding:16px 18px;margin:12px 0;background:linear-gradient(90deg,var(--ok-bg),transparent)}
.pattern h4{color:var(--heading);margin:0 0 6px;font-size:1.02rem}
.pattern .impuls{margin-top:8px;font-size:.9rem;color:var(--link)}
.pattern .impuls b{color:var(--heading)}
.tension{border:1px solid var(--border);border-radius:12px;padding:12px 16px;background:var(--surface);margin:10px 0}
.tension b{color:var(--heading)}

/* ---------------------------------------------------------------
   16 · Ω-RING (Grafiksystem — Fortschritts-/Themenring)
   Steuerung über --omega-progress (0..1) am Element.
   --------------------------------------------------------------- */
.omega-ring{display:inline-block;line-height:0;color:var(--omega-arc-2)}
.omega-ring svg{display:block;width:100%;height:auto;overflow:visible}
/* Gradient-Stops (dark-mode-reaktiv über CSS-Variablen; ein geteilter, identischer
   Verlauf pro Seite — doppelte IDs sind hier unschädlich, da inhaltsgleich).
   Kritiker K4: gilt für BEIDE Glyphen-Kontexte (.omega-ring UND .omega-marke) —
   sonst fielen omega_marke-value/stufe im Dark auf Navy-auf-Navy-Hex zurück. */
.omega-ring .om-g1,.omega-marke .om-g1{stop-color:var(--omega-arc-1)}
.omega-ring .om-g2,.omega-marke .om-g2{stop-color:var(--omega-arc-2)}
/* Kaum sichtbarer Halo für ruhige Tiefe */
.omega-ring .om-halo{stroke:var(--omega-arc-1);opacity:.10}
/* Aktivbogen: weicher Teal→Navy-Verlauf statt „Gauge"-Vollton.
   Der konkrete Verlauf (#om-grad-<uid>) wird je Instanz per inline-style
   gesetzt — hier nur ein Solid-Fallback + die ruhige Übergangsanimation. */
.omega-ring .om-arc{stroke:var(--omega-arc-1);transition:stroke-dashoffset .7s cubic-bezier(.22,.61,.36,1)}
.omega-ring .om-foot{stroke:var(--omega-foot);opacity:.92}
.omega-ring .om-center{fill:var(--heading);font-family:var(--display);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.omega-ring .om-sub{fill:var(--text-faint);font-family:var(--head);font-weight:600;text-transform:uppercase}


/* ---------------------------------------------------------------
   16b · MARKEN-GLYPHE „G1" (Beta 2.8) — das echte Serifen-Ω
   (STIX Two Text Medium) als Vektorpfad. --omega-glyph-url ist die
   Glyphe als Mask-Bild für alle CSS-Ω (Badges, Wasserzeichen,
   Pseudo-Elemente) — Farbe kommt über background-color/currentColor.
   --------------------------------------------------------------- */
:root{--omega-glyph-url:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M43.55715721885464%2092.38898499541727H7.661180749766803L5.0%2069.15866156569024H9.235223869719901Q10.375729905334245%2073.46723992245553%2011.45287449452557%2076.12842067222233Q12.530019083716894%2078.78960142198913%2014.494223922830487%2080.05683035044952Q16.45842876194408%2081.3240592789099%2020.00666976163315%2081.3240592789099H31.538453010622632V80.56372192183368Q27.99021201093356%2077.90254117206688%2024.125163779129394%2074.51770804329811Q20.260115547325228%2071.13287491452934%2016.965320333328233%2066.6909064814687Q13.67052511933124%2062.248938048408064%2011.642958833794626%2056.369665632517446Q9.615392548258015%2050.49039321662683%209.615392548258015%2042.84033389261632Q9.615392548258015%2032.36235235619406%2014.864391826194657%2024.442171553316673Q20.1133911041313%2016.521990750439286%2029.350827914993495%2012.046670931029034Q38.588264725855694%207.571351111618782%2050.44686371668578%207.611369681417685Q62.352148460764084%207.611369681417685%2071.37615805573311%2012.086689500827937Q80.40016765070214%2016.56200932023819%2085.43573971274563%2024.482190123115583Q90.4713117747891%2032.402370925992976%2090.4713117747891%2042.7536295695692Q90.4713117747891%2050.403688893579705%2088.35704116620536%2056.28296130947032Q86.24277055762164%2062.162233725360934%2082.90462318210109%2066.64755431994513Q79.56647580658053%2071.13287491452934%2075.80814118272295%2074.51770804329811Q72.04980655886536%2077.90254117206688%2068.63495563547161%2080.56372192183368V81.3240592789099H79.55980862313122Q83.32147683871345%2081.3240592789099%2085.2656723929276%2080.05683035044952Q87.20986794714173%2078.78960142198913%2088.37371685938018%2076.08506851069876Q89.53756577161863%2073.3805355994084%2090.7647761302801%2069.15866156569024H95.0L92.16541060413894%2092.38898499541727H56.52954710419249V82.74469530311664Q62.5255416377552%2077.9692439447661%2066.64403565525144%2071.43634777974583Q70.76252967274769%2064.90345161472557%2072.83344811980785%2057.59020880772962Q74.90436656686803%2050.276966000733665%2074.90436656686803%2043.34722546400047Q74.90436656686803%2029.147594281794895%2068.6015810454673%2021.180727725669293Q62.29879552406656%2013.21386116954369%2050.320140823839736%2013.21386116954369Q38.001336014873715%2013.21386116954369%2031.5918368855264%2021.267432048716415Q25.182337756179088%2029.32100292788914%2025.182337756179088%2043.34722546400047Q25.182337756179088%2050.19026167768654%2027.229913326615158%2057.590208807729624Q29.277488897051228%2064.9901559377727%2033.375973629648016%2071.56640426431653Q37.4744583622448%2078.14265259086035%2043.55715721885464%2082.83139962616377Z'/%3E%3C/svg%3E")}
.omega-marke{display:inline-block;line-height:0}
.omega-marke svg{display:block;width:100%;height:auto;overflow:visible}
.omega-marke .omk-fill{fill:currentColor}
.omega-marke .omk-track,.omega-ring .omk-track{fill:var(--omega-track)}
/* Kritiker-Fix (Deckkraft): Glyphen-Füße in VOLLER Deckung — bei .92 schien
   der Track/Bogen durch die Gold-Füße (schmutzige Kanten). */
.omega-marke .om-foot,.omega-ring .om-foot{stroke:var(--omega-foot);opacity:1}
.omega-marke .om-arc{stroke:var(--omega-arc-1)}
/* Mittellinien-Zeichnung (Landing-Hero-Timing 2.6s wie bisher) — Kritiker K6:
   eigene Keyframes im sichtbaren Dash-Fenster: Start 89.54 (linke Fußkante —
   der Draw startet sofort sichtbar, kein 0,2-s-Blindlauf unter dem linken
   Fuß), Ende 6.5 statt 10.46: der Butt-Cap muss unter die Fuß-Oberkante
   wandern, sonst bliebe oberhalb des rechten Fußes ein Keil des Beins offen
   (Deckungs-Pixel-Diff); Rest-Totlauf am Ende ≈ 0,12 s. */
.omega-marke .omk-anim{animation:vDrawMarke 2.6s cubic-bezier(.22,.61,.36,1) both}
@keyframes vDrawMarke{from{stroke-dashoffset:89.54}to{stroke-dashoffset:6.5}}
/* Labels UNTER der Glyphe (im Ω ist kein Platz) */
.omega-ring .om-below{display:flex;flex-direction:column;align-items:center;gap:2px;
  margin-top:8px;line-height:1.15}
.omega-ring .om-below .om-center{color:var(--heading);font-family:var(--display);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.omega-ring .om-below .om-sub{color:var(--text-faint);font-family:var(--head);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em}
/* omega_value: Zahl + Band unter der Glyphe, Count-up bleibt (.om-center) */
.ov-cap .ov-sub{font-family:var(--head);font-weight:600;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint)}
.ov-cap .ov-zahl{font-family:var(--display);font-weight:600;font-size:2.55rem;line-height:1;
  color:var(--heading);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------------------------------------------------------------
   17 · TABELLEN (Admin)
   --------------------------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;margin-top:10px;font-size:.9rem}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.tbl th{color:var(--heading);font-family:var(--head);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl.small{font-size:.82rem}
.tbl .sum td{border-top:2px solid var(--navy);font-weight:700}
.row-flag{background:var(--warn-bg)}
.item-cell{max-width:360px}
.note-cell{max-width:260px;color:var(--text-muted)}
.tbl-scroll{overflow-x:auto}
.meter{background:var(--surface-2);border-radius:8px;height:8px;width:120px;overflow:hidden;
  display:inline-block;vertical-align:middle}
.meter-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--navy))}

/* ---------------------------------------------------------------
   18 · ADMIN / KPI
   --------------------------------------------------------------- */
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:24px}
.admin-nav .btn{margin-left:8px}
.kpis,.fb-kpis{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;
  min-width:104px;text-align:center;box-shadow:var(--shadow)}
.kpi-n{display:block;font-family:var(--head);font-size:1.6rem;color:var(--heading);font-weight:700;
  font-variant-numeric:tabular-nums}
.kpi span{font-size:.76rem;color:var(--text-muted)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.kv{grid-template-columns:1fr}}
.kv div{border-bottom:1px solid var(--border);padding:6px 0;font-size:.9rem}
.kv b{display:block;color:var(--heading);font-family:var(--head);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.04em}
.fb-list dt{font-weight:700;color:var(--heading);margin-top:12px;font-size:.9rem;font-family:var(--head)}
.fb-list dd{margin:2px 0 0;color:var(--text-muted)}

/* ---------------------------------------------------------------
   19 · FLASH / HINWEISE
   --------------------------------------------------------------- */
.flash{background:var(--ok-bg);border:1px solid var(--teal);border-radius:12px;padding:12px 16px;margin:16px 0}
.flash p{margin:.2em 0}
.flash.error{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.notice{border:1px solid var(--gold-soft);background:var(--warn-bg);color:var(--text);
  border-radius:12px;padding:12px 16px;margin:16px 0;font-size:.9rem}
.notice b{color:var(--heading)}

/* ---------------------------------------------------------------
   20 · MODALS
   --------------------------------------------------------------- */
body.modal-open{overflow:hidden}
.modal-overlay{position:fixed;inset:0;background:rgba(6,18,41,.6);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}
.modal-overlay.hidden{display:none}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;max-width:470px;
  width:100%;padding:36px 32px;text-align:center;box-shadow:var(--shadow-modal)}
.modal .omega-badge{margin-bottom:16px;margin-inline:auto}
.modal h2{margin:0 0 12px;color:var(--heading)}
.modal p{color:var(--text-muted);line-height:1.6;margin:0 0 24px}
.modal .btn{width:100%}

/* ---------------------------------------------------------------
   21 · LEGAL-SEITEN
   --------------------------------------------------------------- */
.legal{max-width:var(--maxw-text)}
.legal h1{font-family:var(--head);color:var(--heading)}
.legal h2{font-family:var(--head);color:var(--heading);font-size:1.05rem;margin-top:28px}
.legal address{font-style:normal;line-height:1.6;margin:.4em 0}
.legal p{line-height:1.6;color:var(--text-muted)}

/* ---------------------------------------------------------------
   22 · UTILITIES
   --------------------------------------------------------------- */
.text-center{text-align:center}
.mt-0{margin-top:0}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}
.mb-0{margin-bottom:0}
.stack{display:grid;gap:var(--sp-4)}
.row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
hr{border:0;border-top:1px solid var(--border);margin:24px 0}

/* Reduzierte Bewegung: KEINE globale Abschaltung mehr. Die einmaligen Einstiegs-
   Animationen (Ω-Zeichnung, Wort-Reveal, Fade-ups) laufen bewusst immer — so wie im
   Design-Mockup vorgesehen. Nur endlose Glüh-/Puls-Schleifen werden weiter unten
   unter prefers-reduced-motion ruhiggestellt; Smooth-Scroll bleibt abschaltbar. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}

/* Druck (PDF nutzt eigene Tokens; hier neutralisieren) */
@media print{
  .site-header,.site-footer,.theme-toggle,.progress-sticky,.pause-btn,.modal-overlay{display:none!important}
  body{background:#fff;color:#000}
  .card,.item,.result-card{box-shadow:none;border-color:#ccc}
}

/* ============================================================
   Beta2 · Ergebnis-Seite
   Ergänzende Regeln zur grafischen Auswertung (result.html).
   Nutzt bestehende Tokens; Light+Dark; keine externen Hosts.
   §6: keine Rang-/Wertungsfarben (kein rot→grün), valenzfreie
   Marke-Töne, Ω als Ordnungsfigur.
   ============================================================ */

/* Zwischenüberschriften über Karten-Gruppen */
.section-heading{margin:var(--sp-7) 0 var(--sp-2);font-size:var(--fs-h2)}
.section-sub{margin:0 0 var(--sp-4);max-width:var(--maxw-text)}

/* 2 · Signal-Sektion (Ω-Ringe CF/TS) */
.signal-section{margin:24px 0}
.signal-lead{max-width:var(--maxw-text);margin-bottom:var(--sp-5)}
.signal-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-5);justify-items:center;align-items:start;margin:8px 0 4px}
.signal-card{margin:0;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:6px;max-width:320px}
.signal-card figcaption{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.signal-name{font-family:var(--head);font-weight:700;color:var(--heading);font-size:1.02rem}
.signal-band{display:inline-block;font-family:var(--head);font-weight:600;font-size:.8rem;
  letter-spacing:.03em;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:4px 13px;margin:0 auto}
.signal-hint{max-width:26ch;margin:0 auto;line-height:1.4}
.context-fit-text{margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:1px solid var(--border);color:var(--text);font-size:1.02rem;line-height:1.6}

/* 3 · Transition-Karte */
.transition-card{margin:24px 0;border-left:3px solid var(--gold)}
.transition-kern{color:var(--text);font-size:1.02rem;margin:.4em 0}
.kern-label{display:inline-block;font-family:var(--head);font-weight:700;font-size:.68rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--heading);
  background:var(--surface-2);border-radius:var(--r-pill);padding:2px 10px;margin-right:8px;
  vertical-align:1px}   /* §6: neutral statt warn-Ton */
.transition-frage{margin:var(--sp-4) 0;padding:12px 18px;border:0;border-left:3px solid var(--teal);
  background:linear-gradient(90deg,var(--tint-ring),transparent);
  font-family:var(--head);font-size:1.14rem;font-weight:600;color:var(--heading);
  font-style:italic;line-height:1.45;border-radius:0 var(--r-sm) var(--r-sm) 0}
.transition-text{color:var(--text-muted);line-height:1.65;margin-bottom:0}

/* 4 · Themenprofil — valenzfreie Ein-Ton-Segmente (Ω-Ordnung, keine Wertung) */
.profil-list{list-style:none;padding:0;margin:var(--sp-4) 0 0;display:grid;gap:14px}
.profil-row{border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;
  background:var(--surface-2)}
.profil-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.profil-thema{font-family:var(--head);font-weight:700;color:var(--heading);font-size:1.04rem}
.profil-label{margin-left:auto;font-family:var(--head);font-weight:600;font-size:.74rem;
  letter-spacing:.03em;color:var(--text-muted);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:3px 11px}
.profil-strip{display:flex;gap:6px;margin:2px 0 12px;max-width:280px}
.profil-seg{flex:1 1 0;height:9px;border-radius:var(--r-pill);
  background:var(--surface-3);border:1px solid var(--border)}
/* Ein-Ton (Teal, Marke) — valenzfrei, kein rot→grün-Verlauf */
.profil-seg.is-on{background:var(--teal);border-color:var(--teal-600)}
:root[data-theme="dark"] .profil-seg.is-on,
:root:not([data-theme="light"]) .profil-seg.is-on{background:var(--omega-arc-1);border-color:var(--omega-arc-1)}
.profil-satz{margin:0;color:var(--text-muted);font-size:.96rem;line-height:1.55}

/* 5 · Stärken & Spannungsfelder — zwei gegenübergestellte Karten */
.kraefte-grid{align-items:stretch}
.card-staerken{border-top:3px solid var(--teal)}
.card-spannung{border-top:3px solid var(--gold)}
.card-staerken h3,.card-spannung h3{margin:6px 0 14px}
.kraft-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.kraft-item{border-top:1px dashed var(--border);padding-top:14px}
.kraft-item:first-child{border-top:0;padding-top:0}
.kraft-thema{display:inline-block;font-family:var(--head);font-weight:700;font-size:.7rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--link);margin-bottom:4px}
.kraft-item-text{display:block;color:var(--text-strong);font-size:1.02rem;line-height:1.45}
.kraft-satz{margin:.5em 0 0;color:var(--text-muted);font-size:.92rem;line-height:1.55}

/* 6 · Dialog-Themen */
.dialog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;margin-top:var(--sp-4)}
.dialog-card{background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--teal);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.dialog-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dialog-thema{font-family:var(--head);font-weight:700;color:var(--heading);font-size:.98rem}
.dialog-status{margin-left:auto;font-family:var(--head);font-weight:700;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);
  background:var(--surface-2);border-radius:var(--r-pill);padding:3px 10px}  /* §6: 'offen' neutral, nicht gruen */
.dialog-frage{margin:0;color:var(--text);font-size:1rem;line-height:1.55}

/* 9 · Fuß */
.report-foot{margin:var(--sp-7) 0 var(--sp-6);display:grid;gap:12px}
.foot-guardrail{font-size:.9rem;line-height:1.6}
.foot-guardrail b{color:var(--heading)}
.foot-line{max-width:var(--maxw-text);color:var(--text-muted);margin:0}
.foot-meta{color:var(--text-faint);margin:4px 0 0}
.foot-warn{margin-top:4px}
.foot-warn summary{cursor:pointer;color:var(--text-muted)}
.foot-warn ul{margin:8px 0 0;padding-left:20px;color:var(--text-faint)}

@media(max-width:640px){
  .signal-row{grid-template-columns:1fr}
  .transition-frage{font-size:1.05rem}
}

/* ============================================================
   Beta 2.1 · EDITORIAL REFRESH
   Hebt die Gesamtanmutung (Ruhe · Klarheit · Wertigkeit):
   editoriale Typo-Hierarchie, mehr Weißraum, ruhigerer Rhythmus,
   feineres Ω-System, edlere Karten/Buttons/Likert, plus die neue
   Ω-Wert-mit-Erklärung-Komponente (§B2.1-4).
   Additiv & spätere Regeln → bestehende Klassennamen bleiben,
   nur der Stil hebt. Light+Dark, WCAG-AA, druckfreundlich.
   ============================================================ */

/* — Header / Marke: ruhiger, wertiger ————————————————————— */
.site-header{border-bottom-color:var(--border)}
.omega-badge{box-shadow:inset 0 0 0 1px rgba(227,185,91,.4),
  0 6px 16px rgba(6,18,41,.28)}
.wordmark{letter-spacing:.24em}
.wordmark small{letter-spacing:.36em;color:var(--text-muted)}
.header-claim{font-family:var(--display);font-style:italic;font-size:.98rem}
.theme-toggle{transition:transform .15s ease,border-color .15s,color .15s}
.theme-toggle:hover{transform:translateY(-1px)}

/* — Typo-Hierarchie & Rhythmus ————————————————————————— */
body{line-height:var(--lh-body);letter-spacing:.002em}
h1,h2,h3,h4{line-height:var(--lh-head);letter-spacing:var(--ls-head);
  text-wrap:balance;font-weight:600}
h1{font-size:clamp(1.9rem,3.2vw,2.55rem);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
p{max-width:72ch}
.lead{font-size:var(--fs-lead);line-height:1.5;max-width:62ch;text-wrap:pretty}
.eyebrow{letter-spacing:var(--ls-eyebrow);font-size:var(--fs-eyebrow);
  display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}

/* Editorialer Serif-Display — nur für die großen Auftritts-Titel */
.display-title,.hero h1,.report-hero h1,.modal h2{
  font-family:var(--display);font-weight:600;letter-spacing:var(--ls-display);
  line-height:var(--lh-tight)}
.display-title{font-size:var(--fs-display);color:var(--heading);margin:0 0 .32em}

/* Zwischenüberschrift mit ruhiger Ω-Signatur */
.section-heading{font-size:var(--fs-h2);letter-spacing:var(--ls-head);
  display:flex;align-items:baseline;gap:12px;margin:var(--sp-8) 0 var(--sp-3)}
.section-heading::before{content:"";align-self:center;flex:0 0 auto;
  width:.55em;height:.52em;background:var(--gold);opacity:.75;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
.section-sub{font-size:var(--fs-sm);color:var(--text-muted)}

/* Ruhige Trennlinie mit zentraler Ω-Marke (additive Utility) */
.rule-omega{border:0;height:1px;margin:var(--sp-7) 0;position:relative;overflow:visible;
  background:linear-gradient(90deg,transparent,var(--border-strong),transparent)}
.rule-omega::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:44px;height:15px;background:var(--bg)}
.rule-omega::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:.8rem;height:.76rem;
  background:var(--gold);opacity:.8;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}

/* — Weißraum / Sektions-Rhythmus ————————————————————————— */
.hero{padding:var(--sp-8) 0 var(--sp-4)}
.hero-omega{gap:var(--sp-7);padding:var(--sp-8) 0 var(--sp-6)}
.hero-omega .hero-art{width:min(240px,34vw)}
.wrap{padding:0 clamp(20px,4vw,32px)}

/* — Buttons: ruhiger, wertiger ————————————————————————— */
.btn{border-radius:var(--r);padding:12px 22px;letter-spacing:.005em;
  transition:transform .15s ease,box-shadow .18s ease,background .15s,border-color .15s,color .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 22px rgba(20,59,114,.26)}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 12px 28px rgba(20,59,114,.32)}
.btn-lg{padding:16px 32px;border-radius:var(--r-md)}
.actions{margin:var(--sp-7) 0}

/* — Karten: feinere Kanten, ruhige Tiefe, edler Innenabstand ——— */
.card,.result-card{border-radius:var(--r-lg);padding:clamp(24px,3.4vw,38px);
  border-color:var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,var(--shadow)}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .result-card,
:root:not([data-theme="light"]) .card,:root:not([data-theme="light"]) .result-card{
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,var(--shadow)}
.card{margin:var(--sp-5) 0}
.card:hover{border-color:var(--border-strong)}
.result-card{padding:clamp(22px,3vw,32px)}
.doctrine{border-left-width:3px;padding:12px 18px;border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:1.02rem}

/* — Likert: edler, ruhiger, größere Ziele ————————————————— */
.item{border-radius:var(--r-md);padding:20px 22px}
.item-dim{color:var(--link);letter-spacing:.08em}
/* Fragestellung im editorialen Serif-Ton (Redesign-Fragebogen) */
.item-text{font-family:var(--display);color:var(--heading);
  font-size:1.2rem;line-height:1.45;letter-spacing:-.005em}
.opt > span{border-radius:var(--r);width:48px;height:48px;min-width:48px;
  transition:transform .12s ease,background .12s,border-color .12s,color .12s,box-shadow .12s}
.opt:hover > span{transform:translateY(-1px)}
.opt input:checked + span{background:linear-gradient(155deg,var(--navy-700),var(--navy));
  box-shadow:0 6px 16px rgba(20,59,114,.28)}
.opt-na input:checked + span{background:linear-gradient(155deg,var(--gold),var(--gold-600));color:#3a2c07}

/* — Badges/Chips: ruhiger, feiner ————————————————————————— */
.badge{border-radius:var(--r-pill);letter-spacing:.05em}
.badge-beta{background:linear-gradient(180deg,var(--warn-bg),color-mix(in srgb,var(--warn-bg) 70%,transparent));
  box-shadow:0 1px 0 rgba(198,154,53,.14) inset}
.chip{border-radius:var(--r-pill);transition:border-color .15s,background .15s}
.chip:hover{border-color:var(--border-strong)}

/* — Report-Hero: editorialer, ruhiger Ω-Auftritt ——————————— */
.report-hero{padding:clamp(34px,5vw,52px) clamp(28px,4vw,44px);border-radius:calc(var(--r-lg) + 6px)}
.report-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 8% -10%,rgba(255,255,255,.10),transparent 55%)}
.report-hero:after{width:13rem;height:12.2rem;right:-6px;bottom:-4px}
.report-hero .eyebrow::before{background:linear-gradient(90deg,var(--gold-soft),transparent)}

/* — Metriken tabellarisch, ruhig ————————————————————————— */
.result-metric .value{font-family:var(--display);font-weight:600;letter-spacing:-.01em}

/* — Signal-Sektion: mehr Luft ————————————————————————————— */
.signal-row{gap:var(--sp-6);margin:var(--sp-5) 0 var(--sp-4)}
.signal-name{font-size:1.06rem;letter-spacing:-.005em}
.signal-band{background:var(--surface);border-color:var(--border-strong);
  box-shadow:var(--shadow)}

/* — Themen-Segmente: ruhige, gerundete Ordnung ————————————— */
.profil-strip{gap:7px;max-width:300px}
.profil-seg{height:10px;border-radius:var(--r-pill);transition:background .3s ease}
.profil-seg.is-on{background:linear-gradient(90deg,var(--teal),var(--teal-600));
  box-shadow:0 1px 4px rgba(39,167,161,.28)}
:root[data-theme="dark"] .profil-seg.is-on,
:root:not([data-theme="light"]) .profil-seg.is-on{
  background:linear-gradient(90deg,var(--omega-arc-1),var(--teal-600));box-shadow:none}

/* — Dialog-Karten: ruhiger Rahmen ————————————————————————— */
.dialog-card{border-radius:var(--r-md);border-left-width:3px}
.dialog-card:hover{border-color:var(--border-strong);border-left-color:var(--teal)}

/* ------------------------------------------------------------------
   Ω-WERT MIT ERKLÄRUNG (§B2.1-4) — Komponente .omega-figure
   Ring + Wortband + aufklappbare Herleitung „Wie kommt der Wert
   zustande?". Kein nackter Wert. Ruhig, wertig, AA-konform.
   ------------------------------------------------------------------ */
.omega-figure{margin:0;display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-3);max-width:340px;text-align:center}
.omega-figure .ov-ring{position:relative;line-height:0}
.ov-cap{display:flex;flex-direction:column;align-items:center;gap:6px}
.ov-name{font-family:var(--head);font-weight:700;color:var(--heading);font-size:1.06rem}
.ov-hint{max-width:28ch;line-height:1.45;color:var(--text-faint)}
.ov-explain{width:100%;max-width:320px;margin-top:var(--sp-1);
  border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface-2);text-align:left;overflow:hidden;transition:border-color .15s}
.ov-explain[open]{border-color:var(--border-strong)}
.ov-explain > summary{list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:11px 15px;
  font-family:var(--head);font-weight:600;font-size:.86rem;color:var(--link)}
.ov-explain > summary::-webkit-details-marker{display:none}
.ov-explain > summary::before{content:"";flex:0 0 auto;width:.68rem;height:.64rem;
  background:var(--gold);
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
.ov-explain > summary::after{content:"+";margin-left:auto;font-family:var(--head);
  font-weight:700;font-size:1.05rem;color:var(--text-faint);transition:transform .2s ease}
.ov-explain[open] > summary::after{content:"–"}
.ov-explain > summary:hover{color:var(--link-hover)}
.ov-explain > summary:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.ov-explain-body{padding:2px 15px 14px;border-top:1px solid var(--border);
  color:var(--text-muted);font-size:.9rem;line-height:1.55}
.ov-explain-body p{max-width:none;margin:.55em 0}
.ov-formula{font-family:var(--mono);font-size:.82rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:9px 12px;line-height:1.5}
.ov-guard{margin-bottom:0;color:var(--text-faint)}

/* Ω-Wert-Reihe (zwei Figuren nebeneinander, dann Karten darunter) */
.omega-value-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--sp-6);justify-items:center;align-items:start;margin:var(--sp-5) 0}

@media(max-width:640px){
  .section-heading{margin-top:var(--sp-7)}
  .omega-figure{max-width:100%}
}

/* Druck: ruhige Kanten, keine Overlays (Serif-Display bleibt — wertig auf Papier) */
@media print{
  .ov-explain{border-color:#ccc;background:#fff}
  .ov-explain > summary::after,.report-hero::before{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Beta2.1 · Ergebnis  (additiv — Tokens, Light+Dark, AA, valenzfrei)
   Synthese-Fließtext · Sechs-Dimensionen-Raster · Passungsspiegel.
   Keine Rang-/Wertungsfarben (§6): Signale sind neutrale Chips, Richtungs-
   marker tragen EINE Farbe (kein rot→grün). Ω bleibt Ordnungsfigur.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Synthese — ruhiger, editorialer Fließtext ──────────────────────── */
.synthese{margin:var(--sp-5) 0}
.synthese-body{max-width:var(--maxw-text);margin-top:var(--sp-3)}
.synthese-body p{color:var(--text);font-size:1.04rem;line-height:1.68;margin:0 0 .85em}
.synthese-body p:first-child{font-size:1.1rem}
.synthese-body p:last-child{margin-bottom:0;color:var(--text-muted)}

/* ── Ihre sechs Dimensionen — qualitatives Signal, keine Wertung ────── */
.dim-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--sp-4);margin:var(--sp-4) 0 0}
.dim-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:20px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.dim-card.is-open{background:var(--surface-2);border-style:dashed}
.dim-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.dim-name{font-family:var(--head);font-weight:700;color:var(--heading);font-size:1.08rem;letter-spacing:-.005em}
/* Signal = neutraler Chip (kein Rangbalken, keine Valenzfarbe) */
.dim-signal{margin-left:auto;font-family:var(--head);font-weight:600;font-size:.74rem;
  letter-spacing:.02em;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:4px 12px}
.dim-card.is-open .dim-signal{background:var(--surface);color:var(--text-muted)}
.dim-kurz{margin:0 0 .5em;color:var(--text-faint);font-size:.86rem;font-style:italic;line-height:1.45}
.dim-reflexion{margin:0;color:var(--text-muted);font-size:.96rem;line-height:1.6}
.dim-aussagen{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:grid;gap:8px}
.dim-aussage{margin:0;color:var(--text);font-size:.92rem;line-height:1.5}
.dim-aussage-label{display:inline-block;font-family:var(--head);font-weight:700;font-size:.64rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--link);
  border:1px solid var(--border-strong);border-radius:var(--r-xs);
  padding:1px 7px;margin-right:8px;vertical-align:1px}
.dim-na{margin:10px 0 0;color:var(--text-faint)}

/* ── Passungsspiegel — kompakt/aufklappbar, Richtung ohne Valenz ────── */
.spiegel{margin-top:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface-2);overflow:hidden}
.spiegel[open]{border-color:var(--border-strong)}
.spiegel > summary{list-style:none;cursor:pointer;padding:14px 18px;
  font-family:var(--head);font-weight:600;color:var(--heading);display:flex;align-items:center;gap:10px}
.spiegel > summary::-webkit-details-marker{display:none}
.spiegel > summary::before{content:"";flex:0 0 auto;width:.7rem;height:.66rem;
  background:var(--gold);
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
.spiegel > summary::after{content:"+";margin-left:auto;font-family:var(--head);
  font-size:1.25rem;color:var(--text-muted);line-height:1}
.spiegel[open] > summary::after{content:"–"}
.spiegel > summary:hover{color:var(--link-hover)}
.spiegel > summary:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.spiegel-list{list-style:none;margin:0;padding:2px 18px 16px;display:grid;gap:2px}
.spiegel-item{display:flex;gap:12px;align-items:flex-start;
  padding:11px 0;border-top:1px solid var(--border)}
.spiegel-item:first-child{border-top:0}
.spiegel-dir{flex:0 0 auto;width:1.4em;text-align:center;font-size:.8rem;line-height:1.5;
  color:var(--text-faint)}   /* EINE neutrale Farbe für alle Richtungen (valenzfrei) */
.spiegel-body{display:flex;flex-direction:column;gap:2px}
.spiegel-thema{font-family:var(--head);font-weight:700;font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-faint)}
.spiegel-satz{color:var(--text);font-size:.95rem;line-height:1.5}

@media(max-width:640px){
  .dim-grid{grid-template-columns:1fr}
  .dim-signal{margin-left:0}
}

/* Druck: Spiegel offen zeigen, ruhige Kanten */
@media print{
  .spiegel{background:#fff;border-color:#ccc}
  .spiegel > summary::after{display:none}
  .spiegel-list{display:grid!important}
  .dim-card{box-shadow:none;border-color:#ccc;break-inside:avoid}
}


/* ---------------------------------------------------------------
   Beta 2.1 · Feedback-Modul (§B2.1-3) — additiv, klick-basiert
   --------------------------------------------------------------- */
.fb-anchors{display:flex;justify-content:space-between;gap:12px;margin:2px 0 8px;max-width:520px}
.fb-text{margin:14px 0}
.fb-text label{display:block;font-weight:600;color:var(--heading);margin-bottom:6px;font-size:.92rem}
.fb-text textarea{width:100%}

/* ---------------------------------------------------------------
   Beta 2.1 · Editoriale Mikro-Animationen (dezent, optional)
   Klassen zum Opt-in; global via prefers-reduced-motion deaktiviert.
   --------------------------------------------------------------- */
@keyframes vFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes vWord{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes vDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes vGlow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.72;transform:scale(1.06)}}
.v-fadeup{animation:vFadeUp .8s cubic-bezier(.22,.61,.36,1) both}
.v-word{display:inline-block;animation:vWord .9s cubic-bezier(.22,.61,.36,1) both}
.v-glow{animation:vGlow 5.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  /* Einmalige Einstiegs-Animationen (Wort-Reveal, Fade-up, Ω-Zeichnung) laufen
     bewusst weiter (ausdrücklicher Wunsch); nur die endlosen Glüh-/Puls-Schleifen
     werden ruhiggestellt. */
  .v-glow,.hero-glow .glow-core,.hero-signals::before{animation:none!important;opacity:.5}
}
/* Verzögerungs-Utilities für die gestaffelte Claim-Animation (Landing) */
.v-d1{animation-delay:.25s}.v-d2{animation-delay:.6s}
.v-d3{animation-delay:1s}.v-d4{animation-delay:1.4s}.v-d5{animation-delay:1.9s}.v-d6{animation-delay:2.2s}

/* ══════════════════════════════════════════════════════════════════════
   Beta 2.1 · REDESIGN-ANGLEICH (Nutzer-Mockups) + WCAG-AA-Fixes
   Rein additiv: spätere Regeln überschreiben frühere (Kaskade). Keine
   externen Hosts, Light+Dark, Ω bleibt Ordnungsfigur (§5/§6).
   ══════════════════════════════════════════════════════════════════════ */

/* — WCAG-AA · dunklerer Gold-Text-Ton (Kritiker-Fund 4) ————————————————
   Gold als TEXT/Glyph auf hellen Flächen fiel durch (#C9962E ≈ 2.67:1).
   --gold-ink #7A5A10 ≈ 5.9:1 (Weiß) / ≈ 5.6:1 (Creme) → AA für Text.
   Flächen-Gold (Ränder, Füße, Badges-Flächen) bleibt unverändert. */
:root{--gold-ink:#7A5A10}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--gold-ink:#E0B453}}
:root[data-theme="dark"]{--gold-ink:#E0B453}
.scale-legend .na b{color:var(--gold-ink)}
.section-heading::before{background:var(--gold-ink);opacity:1}
.spiegel > summary::before{background:var(--gold-ink)}
.rule-omega::after{background:var(--gold-ink)}
.hebel-prio{color:var(--gold-ink)}
/* Theme-Toggle-Hover-Icon war Teal #1E9C96 (3.1:1) → teal-700 (~7:1). */
.theme-toggle:hover{color:var(--teal-700)}

/* ─────────────────────────────  LANDING  ───────────────────────────── */
/* Zentrierter, ruhiger Drama-Hero (Mockup „Redesign – Landing") */
.hero-drama{position:relative;text-align:center;
  padding:clamp(56px,9vw,116px) 0 clamp(36px,6vw,64px)}
.hero-drama .hero-inner{position:relative;z-index:1}
.hero-drama .eyebrow{justify-content:center}
.hero-claim{font-family:var(--display);font-weight:500;
  font-size:clamp(3rem,8vw,5.4rem);line-height:1.04;letter-spacing:-.025em;
  color:var(--heading);margin:.34em 0 .28em;text-wrap:balance}
/* Akzentwort „Create Impact." — Gold→Teal-Verlauf, beide Enden AA-tauglich
   (Groß-Text 3:1; gold-600 4.0:1 / teal-600 4.5:1 auf Creme). */
.hero-claim .accent{font-style:italic;color:var(--teal-700);
  background:linear-gradient(100deg,var(--gold-600),var(--teal-600));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root[data-theme="dark"] .hero-claim .accent,
:root:not([data-theme="light"]) .hero-claim .accent{color:var(--omega-arc-1);
  background:linear-gradient(100deg,var(--gold),#E3B95B 55%,var(--omega-arc-1));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-lead{max-width:600px;margin:0 auto;color:var(--text-muted);
  font-size:1.14rem;line-height:1.6}
.hero-cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* Ω-Bogen-Glow hinter dem Claim (dezent, reduced-motion-fest) */
.hero-glow{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(540px,88vw);pointer-events:none;z-index:0;opacity:.9}
.hero-glow .glow-core{position:absolute;inset:12%;border-radius:50%;
  background:radial-gradient(circle,rgba(201,150,46,.16),transparent 62%);filter:blur(10px)}
.hero-glow svg{display:block;width:100%;overflow:visible}
.hero-glow .hg-track{stroke:color-mix(in srgb,var(--heading) 8%,transparent)}
.hero-glow .hg-arc{stroke:color-mix(in srgb,var(--teal) 34%,transparent)}
.hero-glow .hg-foot{stroke:color-mix(in srgb,var(--gold) 55%,transparent)}
/* Ω zeichnet sich beim Laden (einmalig) und glüht dezent — läuft unbedingt;
   nur die endlose Glüh-Schleife ruht unter prefers-reduced-motion (siehe oben). */
.hero-glow .hg-arc{stroke-dashoffset:100;
  animation:vDraw 2.6s cubic-bezier(.22,.61,.36,1) both}
.hero-glow .glow-core{animation:vGlow 5.5s ease-in-out infinite}

/* Drei nummerierte Step-Cards (Kontext → Fragebogen → Auswertung) */
.step-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:18px;margin:clamp(28px,5vw,56px) 0 0}
.step-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:28px 30px;box-shadow:var(--shadow)}
.step-card .step-nr{font-family:var(--display);font-size:2rem;color:var(--gold-ink);line-height:1}
.step-card h3{margin:.42em 0 .34em;font-size:1.26rem}
.step-card p{margin:0;color:var(--text-muted);font-size:.95rem;line-height:1.6;max-width:none}

/* Navy-Ω-Doktrin-Card („Signale, keine Diagnosen") */
.doctrine-navy{position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;background:linear-gradient(155deg,#122B54,#061229);
  border-radius:var(--r-lg);padding:30px 32px;box-shadow:var(--shadow)}
.doctrine-navy::after{content:"";position:absolute;right:-6px;bottom:-14px;width:7.3rem;height:6.9rem;
  background:rgba(227,185,91,.08);pointer-events:none;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
.doctrine-navy .dq{position:relative;font-family:var(--display);font-style:italic;
  font-size:1.4rem;line-height:1.45;color:#EDDBAC;margin:0;text-wrap:balance}
.doctrine-navy .dcite{position:relative;margin:16px 0 0;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:#9DB0D2;font-weight:700}

/* ────────────────────────────  FRAGEBOGEN  ─────────────────────────── */
/* Timer/Pause/Fortschritt als ruhiger Sticky-Kopf (Mockup) */
.progress-sticky{top:0;margin:0 0 var(--sp-5);padding:12px 0;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.3) blur(10px)}
.qh-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.qh-top .timer{margin-left:auto}
.qh-progress{display:flex;align-items:center;gap:14px}
.qh-progress .progress{flex:1;height:8px}
.qh-progress #progress-label{white-space:nowrap;font-size:.82rem}
/* Fortschrittsbalken Teal→Gold (Mockup); Fläche, kein Wertungsverlauf */
.progress-bar{background:linear-gradient(90deg,var(--teal),var(--gold))}
/* Item-Kopfzeile: Nummern-Chip · Dimensionsname (Teal) · Item-Code */
.item .item-head{margin-bottom:10px}
.item .item-nr{background:linear-gradient(150deg,var(--navy-700),var(--navy));color:#fff}

/* ───────────────────────────  AUSWERTUNG  ──────────────────────────── */
/* Signal-Ringe (omega_value) im dunklen Navy-Band des Report-Hero.
   Statt eigener weißer Karte: eingebettetes Band, Ringe hell-auf-navy.
   Umfärbung rein über lokale Token-Overrides (Makro _omega.html bleibt). */
.hero-signals{position:relative;z-index:1;
  margin:clamp(28px,4vw,44px) calc(-1 * clamp(28px,4vw,44px)) calc(-1 * clamp(34px,5vw,52px));
  padding:clamp(28px,4vw,44px);border-top:1px solid rgba(199,213,238,.16);
  background:rgba(4,12,26,.30);
  --heading:#F2F6FF;--text:#E6ECF7;--text-strong:#ffffff;
  --text-muted:#AFC2E2;--text-faint:#8FA3C6;
  --surface:rgba(13,26,50,.55);--surface-2:rgba(13,26,50,.55);--surface-3:rgba(13,26,50,.7);
  --border:rgba(199,213,238,.22);--border-strong:rgba(199,213,238,.34);
  --link:#38C2BB;--link-hover:#7ee0da;--gold:#E3B95B;--gold-ink:#E3B95B;
  --omega-track:rgba(199,213,238,.18);--omega-arc-2:#6ea6e8}
.hero-signals .omega-value-row{margin:0 auto;max-width:860px}
.hero-signals-note{max-width:720px;margin:30px auto 0;text-align:center;
  color:var(--text-muted);font-size:.95rem;line-height:1.65}
.hero-signals-note strong{color:#E6ECF7}
/* Synthese als zentrierter Serif-Absatz (Mockup) */
.synthese-hero{max-width:820px;margin:clamp(40px,6vw,64px) auto 0;text-align:center}
.synthese-hero .eyebrow{justify-content:center;color:var(--gold-ink)}
.synthese-hero h2{margin:.4em 0 .55em}
.synthese-serif p{font-family:var(--display);font-size:1.24rem;line-height:1.6;
  color:var(--text);margin:0 0 .8em;max-width:none}
.synthese-serif p:first-child{font-size:1.3rem}
.synthese-serif p:last-child{color:var(--text-muted);margin-bottom:0}

/* ─── Auswertung · Einstiegs-Animation (Mockup): Ω-Glow hinter dem Signal-Band ─── */
.hero-signals{position:relative}
.hero-signals::before{content:"";position:absolute;left:50%;top:36%;
  transform:translate(-50%,-50%);width:min(440px,72%);aspect-ratio:1/1;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(56,194,187,.18),transparent 62%);
  filter:blur(16px);animation:vGlow 4.5s ease-in-out infinite}
.hero-signals .omega-value-row,.hero-signals .hero-signals-note{position:relative;z-index:1}

/* ══════════════════════════════════════════════════════════════════════
   Mockup-Kompatibilität · --v-* Aliase (Nutzer-Redesign) + Scroll-Reveal
   Erlaubt, das Mockup-Markup 1:1 (Inline-Styles) zu übernehmen. Die
   Aliase zeigen auf die Theme-Tokens der App und schalten mit Dark/Light.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --v-bg:var(--bg); --v-surface:var(--surface); --v-surface2:var(--surface-2);
  --v-border:var(--border); --v-text:var(--text); --v-muted:var(--text-muted);
  --v-heading:var(--heading); --v-teal:var(--teal); --v-gold:var(--gold);
  --v-shadow:var(--shadow);
}
@keyframes vPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,180,83,0)}50%{box-shadow:0 0 44px 6px rgba(224,180,83,.28)}}
.v-pulse{animation:vPulse 4s ease-in-out infinite}
/* Scroll-Reveal wie im Mockup (data-reveal): unsichtbar bis sichtbar, dann vFadeUp */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-in{opacity:1;transform:none}
/* Ohne JS (oder wenn Observer fehlt) trotzdem sichtbar */
html.no-js [data-reveal]{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════════════════════
   Beta2.2 · Ergebnis-Visuals
   Additiv. Auswertungsmatrix · Mini-Ω-Ringe · Ω-Sektor-Themenprofil ·
   Passungs-Dotplot · Transition-Pfad · Text-Akzente · Reveal-/Draw-Animationen.
   Valenzfrei (Ein-Ton-Teal, Gold nur als Bezugs-/Ordnungsmarke; kein rot→grün,
   kein Gesamtscore). Light+Dark, AA, druckfreundlich, keine externen Hosts.
   ══════════════════════════════════════════════════════════════════════ */

/* — Text-Akzente [[…]] → <em class="acc"> : ruhig, farbig, ohne Anführungszeichen — */
.acc{font-style:normal;font-weight:600;color:var(--teal-700);
  background:linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--teal) 16%,transparent) 58%);
  border-radius:3px;padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.synthese-serif .acc,.transition-text .acc,.dim-reflexion .acc{font-style:italic;font-weight:500}
:root[data-theme="dark"] .acc,
:root:not([data-theme="light"]) .acc{color:var(--link);
  background:linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--omega-arc-1) 22%,transparent) 58%)}
.hero-signals .acc,.report-hero .acc{color:#7ee0da;
  background:linear-gradient(180deg,transparent 58%,rgba(56,194,187,.22) 58%)}
.card-spannung .acc,.hebel-card .acc{color:var(--gold-ink);
  background:linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--gold) 20%,transparent) 58%)}

/* — Gestaffelte Reveals innerhalb einer Sektion (data-anim, per IntersectionObserver) — */
[data-anim]{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
[data-anim].is-in{opacity:1;transform:none}
/* no-js-Fallback neutralisiert ALLE Startzustände von [data-anim] —
   auch filter (z. B. Blur des Musternamens, Beta 2.4). */
html.no-js [data-anim]{opacity:1;transform:none;filter:none}
.stagger > *,.dim-grid > *{transition-delay:calc(var(--i,0) * 90ms)}

/* — Ω-Ring-Zeichnung (Draw) — Aktivbogen bleibt geschlossen bis .is-in — */
.js-ring .om-arc{transition:stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1)}
.js-ring .om-halo{transition:opacity 1.2s ease}

/* ── 1 · Auswertungsmatrix „Sechs Dimensionen" ─────────────────────────── */
.matrix-card{margin-top:var(--sp-4);padding:clamp(18px,3vw,30px) clamp(16px,3vw,30px);overflow-x:auto}
.matrix{display:grid;grid-template-columns:minmax(150px,1.35fr) repeat(5,minmax(74px,1fr)) minmax(72px,.9fr);
  column-gap:0;row-gap:0;min-width:640px;align-items:center}
.matrix-head{display:contents}
.matrix-head > span{font-family:var(--head);font-weight:600;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-faint);text-align:center;padding:0 4px 12px;
  border-bottom:1px solid var(--border);line-height:1.3;align-self:end}
.matrix-head > span:first-child,.matrix-head > span:last-child{text-align:left}
.matrix-head > span.is-mid{color:var(--heading)}
.matrix-head > span:last-child{text-align:right}
.matrix-row{display:contents}
.matrix-row > *{padding:16px 4px;border-bottom:1px solid var(--border)}
.matrix-row:last-child > *{border-bottom:0}
.matrix-dim{display:flex;flex-direction:column;gap:6px;padding-right:12px!important;min-width:0}
.matrix-dim .m-name{font-family:var(--display);font-weight:600;color:var(--heading);font-size:1.08rem;
  letter-spacing:-.005em;line-height:1.2}
.matrix-dim .m-chip{display:inline-block;width:fit-content;font-family:var(--head);font-weight:600;
  font-size:.68rem;letter-spacing:.02em;color:var(--text-muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:2px 9px;max-width:100%;
  line-height:1.35}
.matrix-row.is-open .m-chip{border-style:dashed}
/* Die fünf Spalten sind EINE Zelle mit Spur + Ω-Marker (gleitet auf seine Stufe) */
.matrix-track{grid-column:2 / span 5;position:relative;height:56px;padding:0!important;
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),var(--border) calc(20% - 1px),var(--border) 20%);
  background-size:100% 100%}
.matrix-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--border-strong);opacity:.7}
/* Mittelachse „situativ“ — beide Seiten sind gleichwertige Pole (bipolar, keine Leiter) */
.matrix-track::after{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:1px;margin-left:-.5px;
  background:var(--border-strong)}
.matrix-ringmark{position:absolute;top:50%;left:calc((var(--stufe) - .5) * 20%);
  width:48px;height:48px;margin:-24px 0 0 -24px;display:grid;place-items:center;
  border-radius:50%;background:var(--surface);
  box-shadow:0 4px 14px rgba(30,156,150,.18),0 0 0 3px color-mix(in srgb,var(--teal) 10%,transparent);
  transition:transform .3s ease,box-shadow .3s ease}
.matrix-ringmark .omega-ring{width:44px;display:block}
:root[data-theme="dark"] .matrix-ringmark,
:root:not([data-theme="light"]) .matrix-ringmark{background:var(--surface-2)}
.matrix-row:hover .matrix-ringmark{transform:translateY(-2px) scale(1.06)}
/* Positionsmarke: erscheint an Ort und Stelle (kein Gleiten = keine Fortschritts-Optik);
   der Fuellbogen zeichnet sich zusaetzlich ueber die js-ring-Animation. */
.matrix[data-anim] .matrix-ringmark{opacity:0;transform:scale(.6);
  transition:opacity .6s ease calc(var(--row,0) * 90ms + .2s),transform .7s cubic-bezier(.34,1.4,.64,1) calc(var(--row,0) * 90ms + .2s)}
.matrix[data-anim].is-in .matrix-ringmark,html.no-js .matrix .matrix-ringmark{opacity:1;transform:none}
.matrix-open{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--head);
  font-size:.74rem;color:var(--text-faint);font-style:italic}
/* Verteilungs-Sparkline: 5 Ein-Ton-Balken (Antworthäufigkeit 1..5), keine Wertung */
.matrix-spark{display:flex;align-items:flex-end;justify-content:flex-end;gap:3px;height:44px;
  padding-left:10px!important}
.matrix-spark i{display:block;width:8px;min-height:2px;height:calc(var(--h) * 28px + 2px);border-radius:3px 3px 1px 1px;
  background:var(--teal-600);   /* #187E79 ≈ 4.7:1 auf Weiß — AA für Grafik */transform-origin:bottom;transform:scaleY(0);
  transition:transform .8s cubic-bezier(.22,.61,.36,1) calc(var(--k) * 60ms + .3s)}
.matrix[data-anim].is-in .matrix-spark i,html.no-js .matrix-spark i{transform:none}
.matrix-spark i.is-zero{background:var(--border-strong);opacity:.7}
:root[data-theme="dark"] .matrix-spark i,
:root:not([data-theme="light"]) .matrix-spark i{background:var(--omega-arc-1)}
.matrix-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;color:var(--text-faint);
  font-size:.8rem;align-items:center}
.matrix-legend .lg-marker{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--teal-600);color:var(--teal-700);font-family:var(--display);font-size:.7rem;
  margin-right:6px;vertical-align:middle}
.matrix-legend .lg-marker::before{content:"";width:10px;height:9.5px;background:currentColor;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
.matrix-legend .lg-spark{display:inline-flex;gap:2px;align-items:flex-end;margin-right:6px;vertical-align:middle}
.matrix-legend .lg-spark i{width:5px;background:var(--teal-600);border-radius:1px}
:root[data-theme="dark"] .matrix-legend .lg-spark i,
:root:not([data-theme="light"]) .matrix-legend .lg-spark i{background:var(--omega-arc-1)}

/* ── 2 · Sechs Mini-Ω-Ringe ────────────────────────────────────────────── */
.miniring .om-center{font-size:12px!important;fill:var(--text-faint)!important;font-family:var(--head)!important;letter-spacing:.06em}


/* ── 3 · Themenprofil als Ω-Sektorring + Balken ────────────────────────── */
.profil-row{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center}
.profil-row .profil-ring{grid-row:1 / span 3;align-self:center}
.profil-row .profil-ring .omega-ring{width:74px}
.profil-row .profil-head{grid-column:2;margin-bottom:2px}
.profil-row .profil-strip{grid-column:2}
.profil-row .profil-satz{grid-column:2}
/* Themenprofil-Balken: Segmente wachsen nacheinander, sobald die Zeile sichtbar ist */
.profil-row[data-anim] .profil-seg.is-on{transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.22,.61,.36,1) calc(var(--k,0) * 110ms + .25s)}
.profil-row[data-anim].is-in .profil-seg.is-on,html.no-js .profil-row[data-anim] .profil-seg.is-on{transform:none}
@media(max-width:560px){
  .profil-row{grid-template-columns:1fr}
  .profil-row .profil-ring{grid-row:auto}
  .profil-row .profil-head,.profil-row .profil-strip,.profil-row .profil-satz{grid-column:1}
}

/* ── 4 · Passungs-Dotplot ──────────────────────────────────────────────── */
.dotplot{margin-top:var(--sp-4);display:grid;gap:10px}
.dot-axis{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:16px;align-items:center;
  font-family:var(--head);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.dot-axis .ax{display:flex;justify-content:space-between;padding:0 8px}
.dot-axis .ax b{color:var(--gold-ink);font-weight:700}
.dot-axis .ax span{color:var(--text-muted)}
.dot-group{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:16px;align-items:center;
  padding:10px 0;border-top:1px dashed var(--border)}
.dot-thema{font-family:var(--head);font-weight:600;font-size:.82rem;color:var(--heading);line-height:1.3}
.dot-thema small{display:block;font-weight:500;font-size:.72rem;color:var(--text-faint)}
.dot-lane{position:relative;height:30px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--border)}
.dot-lane::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:1px;
  background:var(--border-strong)}
.dot-lane::after{content:"";position:absolute;left:50%;top:3px;bottom:3px;width:2px;margin-left:-1px;
  border-radius:2px;background:var(--gold-ink)}   /* Bezugswert-Linie in Gold-Ink (≈5.6:1 auf Creme) */
.dot{position:absolute;top:50%;left:calc(8px + (50% - 8px) * (1 + var(--x) / 4) );
  width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--teal-600);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--teal-700);   /* EIN Ton, ≈4.3:1 auf der Spur */
  transform:scale(0);transition:transform .5s cubic-bezier(.34,1.4,.64,1) calc(var(--k) * 45ms + .15s);cursor:default}
:root[data-theme="dark"] .dot,
:root:not([data-theme="light"]) .dot{background:var(--omega-arc-1);border-color:var(--surface);box-shadow:0 0 0 1px var(--omega-arc-1)}
/* Passungsspiegel-Liste: neutrale Richtungs-Wortmarke statt ▲/▼ (kein Defizit-Symbol) */
.spiegel-dir{width:auto;flex:0 0 9.5em;font-family:var(--head);font-weight:600;font-size:.66rem;letter-spacing:.04em;
  text-transform:uppercase;text-align:left;color:var(--text-muted);padding-top:2px}
.dot:hover,.dot:focus-visible{transform:scale(1.35)!important;z-index:2}
.dot.has-n{width:16px;height:16px;margin:-8px 0 0 -8px}
.dot.has-n b{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font-family:var(--head);
  font-size:.62rem;font-weight:700;color:var(--text-muted);line-height:1}
.dotplot[data-anim].is-in .dot,html.no-js .dot{transform:scale(1)}
.dot-note{margin:10px 0 0;color:var(--text-faint);font-size:.8rem}
@media(max-width:560px){
  .dot-axis,.dot-group{grid-template-columns:1fr;gap:6px}
}

/* ── 5 · Übergänge im Führungsverlauf T1…T7 (neutral, nur der aktuelle markiert) ── */
.tpath-title{margin:var(--sp-5) 0 0;font-family:var(--head);font-size:.82rem;letter-spacing:.02em;color:var(--text-muted)}
.tpath-title strong{color:var(--heading)}
.tpath{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(7,1fr);gap:0;position:relative}
/* neutrale Verbindungslinie — KEIN Fortschritt, keine erledigt/offen-Semantik */
.tpath::before{content:"";position:absolute;left:calc(100% / 14);right:calc(100% / 14);top:16px;height:1px;
  background:var(--border-strong);transform-origin:left;transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .1s}   /* neutrale Linie zeichnet sich — kein Fortschritt */
.tpath.is-in::before,html.no-js .tpath::before{transform:none}
.tpath li .tp-dot{opacity:0;transition:opacity .5s ease calc(var(--i,0) * 120ms + .2s)}
.tpath.is-in li .tp-dot,html.no-js .tpath li .tp-dot{opacity:1}
.tpath li{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:6px;padding:0 4px}
.tpath .tp-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border-strong);color:var(--text-faint);
  font-family:var(--display);font-weight:600;font-size:1.15rem;transition:transform .3s,box-shadow .3s}
.tpath li:not(.is-current) .tp-dot{width:12px;height:12px;margin:11px 0}
.tpath .tp-code{font-family:var(--head);font-size:.66rem;letter-spacing:.06em;color:var(--text-faint);text-transform:uppercase}
.tpath .tp-name{font-family:var(--head);font-size:.74rem;color:var(--text-muted);line-height:1.3;max-width:13ch}
.tpath li.is-current .tp-dot{background:linear-gradient(150deg,var(--navy-700),var(--navy));border-color:transparent;
  color:#F0DFAE;box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 22%,transparent),0 8px 22px rgba(20,59,114,.28)}
.tpath li.is-current .tp-dot::before{content:"";width:15px;height:14px;background:currentColor;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
.tpath li.is-current .tp-name{color:var(--heading);font-weight:600}
.tpath li.is-current .tp-code{color:var(--gold-ink)}
.tpath.is-in li.is-current .tp-dot{animation:vMarkerPop .8s cubic-bezier(.34,1.4,.64,1) 1s both}
@keyframes vMarkerPop{0%{transform:scale(.6)}100%{transform:scale(1)}}
:root[data-theme="dark"] .tpath li.is-current .tp-dot,
:root:not([data-theme="light"]) .tpath li.is-current .tp-dot{background:linear-gradient(150deg,#1f5a9e,#153f77)}
@media(max-width:720px){
  .tpath{grid-template-columns:repeat(7,minmax(64px,1fr));overflow-x:auto;padding-bottom:6px}
  .tpath .tp-name{display:none}
  .tpath li.is-current .tp-name{display:block}
}

/* ── 6 · CF/TS Count-up & Ring-Draw (im Hero) ──────────────────────────── */
.hero-signals .om-arc{transition:stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1)}
.hero-signals .om-center{transition:opacity .4s}

/* ── 7 · Ω-Donuts — Anteile im Markenschema (Navy/Gold/Teal), Creme-Trenner, valenzfrei ── */
.donut-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-6);
  margin:var(--sp-5) 0 var(--sp-3);align-items:start}
.donut-fig{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:center}
.donut-fig figcaption{display:flex;flex-direction:column;gap:8px;min-width:0}
.donut-name{font-family:var(--head);font-weight:700;color:var(--heading);font-size:.98rem}
.donut-legend{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.donut-legend li{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text)}
.donut-legend li b{margin-left:auto;font-family:var(--head);color:var(--heading);font-variant-numeric:tabular-nums}
.donut-legend li small{color:var(--text-faint);font-size:.78rem;min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
.donut-legend li i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.donut-legend--compact li{font-size:.84rem;gap:7px}
.donut-fine{margin-top:2px}
.donut-guard{margin:var(--sp-3) 0 0;max-width:72ch}
.omega-donut{display:inline-block;line-height:0}
.omega-donut svg{display:block;width:100%;height:auto;overflow:visible}
.omega-donut .od-track{stroke:var(--surface-2)}
.omega-donut .od-seg{stroke:var(--surface-2);transform:rotate(0);transform-origin:50% 50%}
.omega-donut .od-center{fill:var(--heading);font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums}
.omega-donut .od-sub{fill:var(--text-faint);font-family:var(--head);font-weight:600;text-transform:uppercase}
/* Markenschema — KEINE Wertungsfarben (kein rot/grün): Navy · Gold · Teal, dann Abstufungen */
.od-navy,.omega-donut .od-navy{stroke:var(--navy);background:var(--navy)}
.od-gold,.omega-donut .od-gold{stroke:var(--gold);background:var(--gold)}
.od-teal,.omega-donut .od-teal{stroke:var(--teal-600);background:var(--teal-600)}
.od-a,.omega-donut .od-a{stroke:var(--navy);background:var(--navy)}
.od-b,.omega-donut .od-b{stroke:#4C7FC4;background:#4C7FC4}
.od-c,.omega-donut .od-c{stroke:var(--gold);background:var(--gold)}
.od-d,.omega-donut .od-d{stroke:var(--teal-600);background:var(--teal-600)}
.od-e,.omega-donut .od-e{stroke:var(--teal);background:var(--teal)}
:root[data-theme="dark"] .od-navy,:root:not([data-theme="light"]) .od-navy,
:root[data-theme="dark"] .od-a,:root:not([data-theme="light"]) .od-a{stroke:#6ea6e8;background:#6ea6e8}
:root[data-theme="dark"] .od-b,:root:not([data-theme="light"]) .od-b{stroke:#4c7fc4;background:#4c7fc4}
:root[data-theme="dark"] .od-gold,:root:not([data-theme="light"]) .od-gold,
:root[data-theme="dark"] .od-c,:root:not([data-theme="light"]) .od-c{stroke:var(--omega-foot);background:var(--omega-foot)}
:root[data-theme="dark"] .od-teal,:root:not([data-theme="light"]) .od-teal,
:root[data-theme="dark"] .od-d,:root:not([data-theme="light"]) .od-d{stroke:var(--omega-arc-1);background:var(--omega-arc-1)}
:root[data-theme="dark"] .od-e,:root:not([data-theme="light"]) .od-e{stroke:#7ee0da;background:#7ee0da}
@media(max-width:560px){.donut-fig{grid-template-columns:1fr;justify-items:center;text-align:left}}

/* — Sanfte Hover-Lifts für Karten der Ergebnis-Seite — */
.dim-card,.dialog-card,.hebel-card,.card-staerken,.card-spannung{transition:transform .25s ease,box-shadow .25s ease,border-color .2s}
.dim-card:hover,.dialog-card:hover,.hebel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* — Feedback-CTA-Puls bleibt (v-pulse) — */
@media(prefers-reduced-motion:reduce){
  .v-pulse{animation:none!important}
}

/* — Druck: statisch, ruhige Kanten — */
@media print{
  [data-anim],.matrix[data-anim] .matrix-marker,.dot,.matrix-spark i,.om-arc,.profil-seg,.tpath::before,.tp-dot{opacity:1!important;transform:none!important;transition:none!important;filter:none!important}
  .matrix-card,.miniring,.dot-lane{box-shadow:none;border-color:#ccc}
  .matrix{min-width:0}
}

/* Synthese · Schlusssatz „Zum Mitnehmen" — ruhig hervorgehoben */
.synthese-mitnehmen{font-family:var(--display);font-style:italic;font-size:1.18em;
  color:var(--heading);border-left:3px solid var(--gold);padding-left:18px;margin-top:22px}

/* ══════════════════════════════════════════════════════════════════════
   Beta2.3 · Intake+Fragebogen
   Additiv. Radio-Card-Intake (/start), Fragebogen 1:1 nach Mockup
   („Redesign – Fragebogen"), Sticky-Kopf UNTER dem Seiten-Header
   (--header-h per Inline-Script), Mikro-Animationen (Reveal, Pick-Puls,
   Balken, Abschluss-Puls). Tokens/--v-*-Aliase, Light+Dark, AA,
   keine externen Hosts. §6: valenzfrei, keine Wertungsfarben.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 0 · Sticky-Fix: Fortschrittsleiste klebt exakt unter dem Header ── */
:root{--header-h:76px}
.progress-sticky{top:var(--header-h,76px);z-index:40}
/* Ohne JS: keine Overlays (Start-/Pause-Modal blockieren sonst die Seite) */
html.no-js .modal-overlay{display:none!important}

/* ── 1 · Gemeinsame Animationen ─────────────────────────────────────── */
@keyframes vPick{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent)}
  60%{box-shadow:0 0 0 9px color-mix(in srgb,var(--gold) 0%,transparent)}
  100%{box-shadow:0 6px 16px rgba(10,29,61,.3)}}
@keyframes vReady{0%,100%{box-shadow:0 10px 28px rgba(10,29,61,.3),0 0 0 0 color-mix(in srgb,var(--gold) 45%,transparent)}
  50%{box-shadow:0 12px 32px rgba(10,29,61,.34),0 0 0 12px color-mix(in srgb,var(--gold) 0%,transparent)}}
@keyframes vShake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.v-fu{animation:vFadeUp .8s cubic-bezier(.22,.61,.36,1) both}
.v-fu.d1{animation-delay:.12s}.v-fu.d2{animation-delay:.24s}.v-fu.d3{animation-delay:.36s}
.v-fu.d4{animation-delay:.48s}.v-fu.d5{animation-delay:.6s}.v-fu.d6{animation-delay:.72s}

/* Gold-Eyebrow wie im Mockup (Gold-Ink → AA) */
.eyebrow-gold{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-size:.74rem;
  font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink)}
.eyebrow-gold::before{content:"";width:26px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}

/* ── 2 · INTAKE (/start) ────────────────────────────────────────────── */
.in-hero{position:relative;padding:clamp(40px,6vw,64px) 0 clamp(8px,2vw,16px)}
.in-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,4.4vw,3.2rem);
  line-height:1.08;letter-spacing:-.02em;color:var(--heading);margin:.35em 0 .3em}
.in-hero .lead{max-width:640px;margin:0;font-size:1.05rem}
.in-hero .hero-art{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(200px,26vw);
  opacity:.9;pointer-events:none}
@media(max-width:820px){.in-hero .hero-art{display:none}}

/* Ruhiger Stepper: Kontext → Angaben → Einwilligung */
.in-stepper{display:flex;gap:6px;list-style:none;padding:0;margin:clamp(20px,3vw,32px) 0 6px;counter-reset:s}
.in-stepper li{flex:1 1 0;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);
  border:1px solid var(--border);background:var(--surface);color:var(--text-muted);
  font-family:var(--head);font-weight:600;font-size:.82rem;transition:border-color .25s,background .25s,color .25s}
.in-stepper li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;flex:0 0 auto;
  width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);color:var(--text-faint);
  font-size:.82rem;transition:background .3s,color .3s,border-color .3s,transform .3s}
.in-stepper li.is-current{border-color:var(--teal);color:var(--heading)}
.in-stepper li.is-current::before{background:linear-gradient(150deg,var(--navy-700),var(--navy));
  border-color:transparent;color:#fff;box-shadow:0 0 0 4px var(--tint-ring)}
.in-stepper li.is-done{color:var(--teal-700);border-color:color-mix(in srgb,var(--teal) 45%,var(--border))}
.in-stepper li.is-done::before{content:"✓";background:var(--teal);border-color:var(--teal);color:#fff;transform:scale(1.04)}
:root[data-theme="dark"] .in-stepper li.is-done,
:root:not([data-theme="light"]) .in-stepper li.is-done{color:var(--link)}
:root[data-theme="dark"] .in-stepper li.is-current::before,
:root:not([data-theme="light"]) .in-stepper li.is-current::before{background:linear-gradient(150deg,#1f5a9e,#153f77)}
@media(max-width:560px){.in-stepper li span{display:none}.in-stepper li{justify-content:center}}

.in-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:clamp(22px,3.4vw,34px) clamp(20px,3.4vw,36px);box-shadow:var(--shadow);margin:18px 0}
.in-card h2{font-family:var(--display);font-weight:500;font-size:clamp(1.45rem,2.6vw,1.8rem);
  color:var(--heading);margin:0 0 6px;display:flex;align-items:center;gap:12px;letter-spacing:-.01em}
.in-card h2 .section-num{width:28px;height:28px;border-radius:9px;
  background:linear-gradient(150deg,var(--navy-700),var(--navy));font-size:.82rem;margin:0}
.in-card > .muted{margin:0 0 4px}

/* Gruppen (fieldset) */
.in-group{border:0;padding:0;margin:26px 0 0;min-width:0}
.in-group:first-of-type{margin-top:22px}
.in-group legend{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:0;margin:0 0 12px;
  font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--heading)}
.in-group legend small{font-family:var(--sans);text-transform:none;letter-spacing:0;font-weight:500;
  color:var(--text-faint);font-size:.82rem}
.in-group legend .req{color:var(--gold-ink)}
.in-group.is-invalid{animation:vShake .35s ease}
.in-group.is-invalid .rc-body{border-color:color-mix(in srgb,var(--gold) 60%,var(--border))}
.in-group .in-err{display:none;margin:8px 0 0;font-size:.82rem;color:var(--gold-ink);font-weight:600}
.in-group.is-invalid .in-err{display:block}

/* Radio-Card-Grid */
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-auto-rows:1fr;gap:10px}
.rc-grid.compact{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.rc{position:relative;display:block;cursor:pointer;margin:0;font-weight:500}
.rc input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer}
.rc-body{position:relative;display:flex;flex-direction:column;gap:3px;height:100%;min-height:74px;
  padding:14px 16px 13px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface);
  overflow:hidden;transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .18s,background .18s}
.rc-body::before{content:"";position:absolute;right:-2px;bottom:-6px;width:2.1rem;height:2rem;
  background:color-mix(in srgb,var(--gold) 12%,transparent);pointer-events:none;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat;
  transition:background .25s,transform .3s}
.rc-title{font-family:var(--head);font-weight:600;font-size:.98rem;color:var(--heading);line-height:1.3;position:relative;
  padding-right:22px;overflow-wrap:anywhere;hyphens:auto}
.compact .rc-title{padding-right:0}
.rc-desc{font-size:.8rem;color:var(--text-muted);line-height:1.4;position:relative}
.rc-mark{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--border-strong);display:grid;place-items:center;font-size:.72rem;color:#fff;
  transition:background .2s,border-color .2s,transform .25s cubic-bezier(.34,1.4,.64,1);transform:scale(.9)}
.rc-mark::after{content:"";width:8px;height:8px;border-radius:50%;background:transparent;transition:background .2s}
.compact .rc-body{min-height:0;padding:12px 26px 11px;align-items:center;text-align:center;justify-content:center;gap:2px}
.compact .rc-title{font-size:.96rem;font-variant-numeric:tabular-nums}
.compact .rc-desc{font-size:.72rem}
.compact .rc-mark{display:none}
.compact .rc-body::before{width:1.15rem;height:1.1rem;right:-2px;bottom:-4px;background:color-mix(in srgb,var(--gold) 9%,transparent)}
.rc:hover .rc-body{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow)}
.rc:hover .rc-body::before{background:color-mix(in srgb,var(--gold) 22%,transparent)}
.rc input:focus-visible + .rc-body{box-shadow:0 0 0 3px var(--focus-ring);border-color:var(--teal)}
.rc input:checked + .rc-body{border-color:var(--navy);
  background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 8%,var(--surface)),var(--surface));
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 0 1px var(--navy),0 10px 26px rgba(10,29,61,.14);
  transform:translateY(-2px)}
.rc input:checked + .rc-body::before{background:color-mix(in srgb,var(--gold) 34%,transparent);transform:rotate(-8deg)}
.rc input:checked + .rc-body .rc-title{color:var(--navy)}
.rc input:checked + .rc-body .rc-mark{background:var(--navy);border-color:var(--navy);transform:scale(1)}
.rc input:checked + .rc-body .rc-mark::after{background:#E3B95B}
.compact .rc input:checked + .rc-body{background:linear-gradient(150deg,var(--navy-700),var(--navy));border-color:transparent;
  box-shadow:0 8px 20px rgba(10,29,61,.28)}
.compact .rc input:checked + .rc-body .rc-title{color:#fff}
.compact .rc input:checked + .rc-body .rc-desc{color:#C7D5EE}
.compact .rc input:checked + .rc-body::before{background:rgba(227,185,91,.28)}
:root[data-theme="dark"] .rc input:checked + .rc-body,
:root:not([data-theme="light"]) .rc input:checked + .rc-body{border-color:var(--omega-arc-1);
  box-shadow:0 0 0 1px var(--omega-arc-1),0 10px 26px rgba(0,0,0,.4);
  background:linear-gradient(160deg,color-mix(in srgb,var(--omega-arc-1) 12%,var(--surface)),var(--surface))}
:root[data-theme="dark"] .rc input:checked + .rc-body .rc-title,
:root:not([data-theme="light"]) .rc input:checked + .rc-body .rc-title{color:var(--heading)}
:root[data-theme="dark"] .rc input:checked + .rc-body .rc-mark,
:root:not([data-theme="light"]) .rc input:checked + .rc-body .rc-mark{background:var(--omega-arc-1);border-color:var(--omega-arc-1)}
:root[data-theme="dark"] .compact .rc input:checked + .rc-body,
:root:not([data-theme="light"]) .compact .rc input:checked + .rc-body{background:linear-gradient(150deg,#1f5a9e,#153f77);border-color:transparent}
:root[data-theme="dark"] .compact .rc input:checked + .rc-body .rc-title,
:root:not([data-theme="light"]) .compact .rc input:checked + .rc-body .rc-title{color:#fff}
/* Puls beim Wählen (Gold-Ring, einmalig) */
.rc input:checked + .rc-body{animation:vPickCard .55s cubic-bezier(.22,.61,.36,1)}
@keyframes vPickCard{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent)}
  70%{box-shadow:0 0 0 10px color-mix(in srgb,var(--gold) 0%,transparent)}100%{}}
/* gestaffelter Einstieg der Karten */
.rc-grid > .rc{animation:vFadeUp .6s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--i,0) * 40ms + .15s)}

/* Zahl-Eingabe „indirekte Verantwortung" */
.in-number{display:flex;align-items:stretch;max-width:320px;border:1px solid var(--border);border-radius:14px;
  background:var(--surface);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.in-number:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--tint-ring)}
.in-number input[type=number]{flex:1;border:0;margin:0;padding:12px 14px;border-radius:0;background:transparent;
  font-family:var(--head);font-weight:600;font-size:1.05rem;color:var(--heading);font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;min-width:0}
.in-number input::-webkit-outer-spin-button,.in-number input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.in-number input:focus{box-shadow:none;border:0;outline:none}
.in-number button{border:0;background:var(--surface-2);color:var(--heading);width:44px;cursor:pointer;
  font-family:var(--head);font-size:1.15rem;font-weight:600;transition:background .15s,color .15s}
.in-number button:hover{background:var(--surface-3);color:var(--teal-700)}
.in-number button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.in-number .unit{display:grid;place-items:center;padding:0 12px;font-size:.78rem;color:var(--text-faint);white-space:nowrap}
.in-help{margin:8px 0 0;font-size:.82rem;color:var(--text-faint)}

/* Person: Name/E-Mail hochwertig */
.in-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:640px){.in-fields{grid-template-columns:1fr}}
.in-field{display:block;position:relative}
.in-field > span{display:block;font-family:var(--head);font-weight:700;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--heading);margin-bottom:6px}
.in-field > span .req{color:var(--gold-ink)}
.in-field input{margin-top:0;padding:13px 15px;border-radius:14px;font-size:1rem;background:var(--bg)}
.in-field input:focus{background:var(--surface)}
:root[data-theme="dark"] .in-field input,
:root:not([data-theme="light"]) .in-field input{background:var(--surface-2)}

/* Einwilligungen als ruhige Karten-Reihe */
.in-consents{display:grid;gap:10px;margin-top:16px}
.in-consent{display:flex;gap:14px;align-items:flex-start;padding:15px 16px;border:1px solid var(--border);
  border-radius:16px;background:var(--surface);cursor:pointer;font-size:.92rem;line-height:1.55;
  transition:border-color .18s,background .18s,box-shadow .2s,transform .18s}
.in-consent:hover{border-color:var(--teal);transform:translateY(-1px);box-shadow:var(--shadow)}
.in-consent input{margin-top:4px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--navy)}
:root[data-theme="dark"] .in-consent input,
:root:not([data-theme="light"]) .in-consent input{accent-color:var(--teal)}
.in-consent:has(input:checked){border-color:var(--navy);
  background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 7%,var(--surface)),var(--surface))}
:root[data-theme="dark"] .in-consent:has(input:checked),
:root:not([data-theme="light"]) .in-consent:has(input:checked){border-color:var(--omega-arc-1)}
.in-consent:has(input:focus-visible){box-shadow:0 0 0 3px var(--focus-ring)}
.in-consent .cl-tag{display:inline-block;font-family:var(--head);font-weight:700;font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-ink);border:1px solid color-mix(in srgb,var(--gold) 45%,var(--border));
  border-radius:var(--r-pill);padding:1px 8px;margin-left:8px;vertical-align:1px}
.in-consent .cl-tag.opt{color:var(--text-faint);border-color:var(--border)}
.in-consent strong{color:var(--heading)}

.in-actions{margin:40px 0 64px;display:flex;flex-direction:column;align-items:center;gap:12px}
.in-actions .btn-cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(150deg,#16386B,#0A1D3D);
  color:#fff;border:0;border-radius:16px;padding:17px 36px;font-family:var(--head);font-weight:600;font-size:1.05rem;
  cursor:pointer;box-shadow:0 10px 28px rgba(10,29,61,.3);transition:transform .18s,box-shadow .2s}
.in-actions .btn-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(10,29,61,.36)}
.in-actions .btn-cta.is-ready{animation:vReady 2.6s ease-in-out infinite}
.in-actions .fine{text-align:center;max-width:560px;margin:0}
.in-actions .in-count{font-family:var(--head);font-size:.82rem;font-weight:600;color:var(--text-muted);
  font-variant-numeric:tabular-nums}
.in-actions .in-count b{color:var(--heading)}

/* ── 3 · FRAGEBOGEN (/fragebogen) ───────────────────────────────────── */
/* Sticky-Kopf: Ω-Badge · Timer · Pause · Balken Teal→Gold · % + „x von N" */
.qb-head{position:sticky;top:var(--header-h,76px);z-index:40;margin:0 calc(-1 * clamp(20px,4vw,32px)) 6px;
  padding:9px clamp(20px,4vw,32px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.3) blur(12px);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--border)}
.qb-head-row{display:flex;align-items:center;gap:14px;max-width:var(--maxw);margin:0 auto}
.qb-head .progress{flex:1;height:7px;background:var(--surface-2);border-radius:999px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.qb-head .progress-bar{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--teal),#E3B95B);
  transition:width .55s cubic-bezier(.22,.61,.36,1);position:relative}
.qb-head .progress-bar::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);
  animation:vShimmer 3.6s ease-in-out infinite}
@keyframes vShimmer{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.qb-head .qb-pct{font-family:var(--head);font-weight:700;font-size:.82rem;color:var(--heading);
  font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}
.qb-head #progress-label{font-size:.82rem;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.qb-head-tools{margin-left:8px;display:flex;align-items:center;gap:10px}
.qb-head .timer{background:var(--surface);border-radius:10px;padding:5px 12px;font-size:.9rem;
  color:var(--heading);border-color:var(--border);min-width:5.4em;text-align:center}
.qb-head .btn-pause{border:1px solid var(--border);background:var(--surface);color:var(--heading);border-radius:10px;
  padding:6px 14px;font-weight:600;font-size:.85rem;cursor:pointer;font-family:var(--head);
  transition:border-color .15s,background .15s,transform .15s}
.qb-head .btn-pause:hover{border-color:var(--teal);background:var(--surface-2);transform:translateY(-1px)}
.qb-head .btn-pause:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(max-width:560px){.qb-head .qb-pct{display:none}.qb-head #progress-label{font-size:.76rem}.qb-head-row{gap:10px}}

/* Hero (Mockup) */
.qb-hero{padding:clamp(28px,5vw,48px) 0 8px}
.qb-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.08;
  letter-spacing:-.02em;color:var(--heading);margin:.35em 0 .3em}
.qb-hero .lead{max-width:640px;font-size:1.05rem;margin:0}
.qb-hero .lead strong{color:var(--heading)}
.qb-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;font-size:.82rem;color:var(--text-muted)}
.qb-legend b{color:var(--heading)}
.qb-legend .na b{color:var(--gold-ink)}

/* Teil-Trenner (A/B) */
.qb-part{margin:clamp(30px,5vw,48px) 0 6px;display:flex;flex-direction:column;gap:6px}
.qb-part h2{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3vw,2.1rem);color:var(--heading);margin:0;letter-spacing:-.01em}
.qb-part p{margin:0;color:var(--text-muted);max-width:640px}

/* Sektionskopf je Dimension (Serif-Name + Kurzbeschreibung + Ω) */
.qb-section{margin:26px 0 0;display:grid;gap:14px}
.qb-sec-head{position:relative;display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:20px;
  background:linear-gradient(150deg,#122B54,#061229);color:#E6ECF7;overflow:hidden;box-shadow:var(--shadow)}
.qb-sec-head::after{content:"";position:absolute;right:0;bottom:-14px;width:5.6rem;height:5.3rem;
  background:rgba(227,185,91,.10);pointer-events:none;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
.qb-sec-code{display:grid;place-items:center;flex:0 0 auto;min-width:46px;height:46px;padding:0 10px;border-radius:14px;
  background:rgba(227,185,91,.14);border:1px solid rgba(227,185,91,.4);color:#E3B95B;font-family:var(--display);
  font-weight:600;font-size:1.05rem;letter-spacing:.04em}
/* Ω-Kachel der Teil-B-/Kontext-Sektionen: Marken-Glyphe statt Schriftzeichen */
.qb-sec-code.qb-sec-omk::before{content:"";width:17px;height:16px;background:currentColor;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
.qb-sec-head h2{font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,2.4vw,1.7rem);color:#F4F8FF;margin:0;
  letter-spacing:-.01em;position:relative}
.qb-sec-head p{margin:2px 0 0;font-family:var(--display);font-style:italic;color:#C7D5EE;font-size:1rem;position:relative}
.qb-sec-head .qb-sec-n{margin-left:auto;font-family:var(--head);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:#9DB0D2;white-space:nowrap;position:relative}
@media(max-width:560px){.qb-sec-head .qb-sec-n{display:none}}

/* Item-Karten (Mockup) */
.qb-item{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px 28px;
  box-shadow:var(--shadow);transition:border-color .2s,box-shadow .25s}
.qb-item:hover{border-color:var(--border-strong)}
.qb-item.is-answered{border-color:color-mix(in srgb,var(--teal) 40%,var(--border))}
.qb-item .item-head{display:flex;align-items:center;gap:10px;font-size:.72rem;margin-bottom:10px}
.qb-item .item-nr{display:grid;place-items:center;min-width:26px;height:26px;border-radius:9px;
  background:linear-gradient(150deg,#16386B,#0A1D3D);color:#fff;font-weight:700;padding:0 6px}
.qb-item .item-dim{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.qb-item .item-code{margin-left:auto;color:var(--text-faint);font-variant-numeric:tabular-nums}
.qb-item .item-text{font-family:var(--display);font-size:1.24rem;line-height:1.45;color:var(--heading);
  margin:0 0 16px;text-wrap:pretty;max-width:none}
.qb-item .scale{display:flex;gap:8px;flex-wrap:wrap}
.qb-item .opt > span{width:50px;height:50px;min-width:50px;border-radius:14px;font-size:1rem;
  transition:transform .15s ease,background .15s,border-color .15s,color .15s,box-shadow .15s}
.qb-item .opt:hover > span{border-color:var(--teal);color:var(--teal-700);transform:translateY(-2px)}
:root[data-theme="dark"] .qb-item .opt:hover > span,
:root:not([data-theme="light"]) .qb-item .opt:hover > span{color:var(--link)}
.qb-item .opt input:checked + span{background:linear-gradient(150deg,#16386B,#0A1D3D);color:#fff;border-color:transparent;
  box-shadow:0 6px 16px rgba(10,29,61,.3);animation:vPick .55s cubic-bezier(.22,.61,.36,1)}
.qb-item .opt-na > span{width:auto;padding:0 16px;color:var(--text-faint);font-size:.9rem;font-weight:600}
.qb-item .opt-na input:checked + span,
:root[data-theme="dark"] .qb-item .opt-na input:checked + span,
:root:not([data-theme="light"]) .qb-item .opt-na input:checked + span{
  background:linear-gradient(150deg,#E3B95B,#C9962E);color:#3a2c07;border-color:transparent;
  box-shadow:0 6px 16px rgba(201,150,46,.28)}   /* #3a2c07 auf Gold ≈ 7:1 — AA in Light UND Dark */
.qb-item .opt input:focus-visible + span{box-shadow:0 0 0 3px var(--focus-ring)}
:root[data-theme="dark"] .qb-item .opt input:checked + span,
:root:not([data-theme="light"]) .qb-item .opt input:checked + span{background:linear-gradient(150deg,#1f5a9e,#153f77)}
.qb-item .opt-txt{display:none}
.qb-item .item-extra{margin-top:16px}
.qb-item .note{margin-top:0;padding:11px 14px;border-radius:12px;background:var(--bg);font-size:.9rem;
  border-color:var(--border);color:var(--text)}
.qb-item .note:focus{background:var(--surface)}
:root[data-theme="dark"] .qb-item .note,
:root:not([data-theme="light"]) .qb-item .note{background:var(--surface-2)}
@media(max-width:560px){.qb-item{padding:20px 18px}.qb-item .item-text{font-size:1.12rem}
  .qb-item .opt > span{width:46px;height:46px;min-width:46px}}

/* Reveal je Karte, gestaffelt innerhalb der Sektion */
.qb-section [data-reveal]{transition-delay:calc(var(--i,0) * 60ms)}

/* Abschluss */
.qb-actions{margin:44px 0 72px;display:flex;flex-direction:column;align-items:center;gap:12px}
.qb-actions .btn-cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(150deg,#16386B,#0A1D3D);
  color:#fff;border:0;border-radius:16px;padding:17px 36px;font-family:var(--head);font-weight:600;font-size:1.05rem;
  cursor:pointer;box-shadow:0 10px 28px rgba(10,29,61,.3);transition:transform .18s,box-shadow .2s}
.qb-actions .btn-cta:hover{transform:translateY(-2px)}
.qb-actions .btn-cta.is-ready{animation:vReady 2.4s ease-in-out infinite}
.qb-actions .btn-cta:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.qb-actions .fine{margin:0;text-align:center;max-width:620px}
.qb-actions .qb-remaining{font-family:var(--head);font-size:.84rem;font-weight:600;color:var(--text-muted);
  font-variant-numeric:tabular-nums}
.qb-actions .qb-remaining b{color:var(--heading)}

/* Modals (Start / Pause / Resume) im Mockup-Stil */
.qb-modal .modal{border-radius:22px;padding:40px 36px;position:relative;overflow:hidden;
  animation:vFadeUp .6s cubic-bezier(.22,.61,.36,1) both}
.qb-modal .modal::after{content:"";position:absolute;right:-5px;bottom:-12px;width:5.9rem;height:5.6rem;
  background:color-mix(in srgb,var(--gold) 9%,transparent);pointer-events:none;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
.qb-modal .modal > *{position:relative;z-index:1}
.qb-modal .modal h2{font-family:var(--display);font-weight:500;font-size:1.9rem;letter-spacing:-.015em}
.qb-modal .modal .eyebrow-gold{margin-bottom:12px;justify-content:center}
.qb-modal .modal .btn-primary{background:linear-gradient(150deg,#16386B,#0A1D3D);border-radius:16px;box-shadow:0 10px 28px rgba(10,29,61,.3)}
.qb-modal .modal .btn-ghost{border-radius:16px}
.qb-modal .m-stats{display:flex;justify-content:center;gap:18px;margin:0 0 20px;font-family:var(--head);font-size:.84rem;
  color:var(--text-muted);font-variant-numeric:tabular-nums}
.qb-modal .m-stats b{color:var(--heading)}

/* Reduced Motion: Einstiegsanimationen laufen (Vorgabe), Endlosschleifen ruhen */
@media(prefers-reduced-motion:reduce){
  .in-actions .btn-cta.is-ready,.qb-actions .btn-cta.is-ready{animation:none!important;
    box-shadow:0 10px 28px rgba(10,29,61,.3),0 0 0 4px color-mix(in srgb,var(--gold) 35%,transparent)}
  .qb-head .progress-bar::after{animation:none!important}
}
@media print{[data-reveal],[data-reveal].is-in{opacity:1!important;transform:none!important;transition:none!important}
  .qb-head{display:none!important}.qb-sec-head{background:#fff;color:#000;border:1px solid #ccc}
  .qb-item{box-shadow:none;border-color:#ccc}}

/* ══════════════════════════════════════════════════════════════════════
   Beta2.3 · Landing-Intro (additiv) — Worum es geht · Sechs Dimensionen ·
   Teaser · Abschluss-CTA. Tokens/Aliase der App (Light+Dark), lokale
   Fonts, AA-Kontraste (Gold-Text = --gold-ink). Ω = Ordnungsfigur.
   ══════════════════════════════════════════════════════════════════════ */
.li-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-size:.74rem;
  font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink)}
.li-eyebrow::before{content:"";width:26px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.li-title{font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.12;
  letter-spacing:-.02em;color:var(--heading);margin:.4em 0 .35em;text-wrap:balance;max-width:none}
.li-title em{font-style:italic;color:var(--teal-700)}
:root[data-theme="dark"] .li-title em,
:root:not([data-theme="light"]) .li-title em{color:var(--omega-arc-1)}
.li-sub{font-size:1.02rem;line-height:1.65;color:var(--text-muted);max-width:60ch;margin:0}
.li-fine{margin:0;font-size:.82rem;line-height:1.55;color:var(--text-faint);max-width:56ch}

/* Gestaffelter Reveal innerhalb einer Sektion (data-reveal + --i) */
.li-intro [data-reveal],.li-dims [data-reveal],.li-teaser [data-reveal]{transition-delay:calc(var(--i,0) * 110ms)}

/* — Intro · Worum es geht ——————————————————————————————— */
.li-intro{margin:clamp(40px,7vw,96px) auto 0;max-width:var(--maxw-text);text-align:center}
.li-intro-head .li-eyebrow{justify-content:center}
.li-intro-cols{display:grid;gap:18px;text-align:left;margin-top:14px}
.li-serif{font-family:var(--display);font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.6;color:var(--text);
  margin:0;max-width:none;text-wrap:pretty}
.li-serif em{font-style:italic;color:var(--heading)}
.li-serif strong{font-family:var(--head);font-weight:600;font-size:.92em;color:var(--heading);letter-spacing:.005em}
.li-serif::first-letter{font-size:1.06em}
.li-intro-cols .li-serif:first-child{font-size:clamp(1.22rem,1.9vw,1.48rem);color:var(--heading);text-align:center}
.li-rule{margin:clamp(40px,6vw,64px) 0 0}
.li-rule::after{background:var(--bg)}

/* — Sechs Dimensionen ———————————————————————————————— */
.li-dims{margin:clamp(40px,6vw,72px) 0 0}
.li-dims-head{text-align:center;max-width:var(--maxw-text);margin:0 auto}
.li-dims-head .li-eyebrow{justify-content:center}
.li-dims-head .li-sub{margin:0 auto}
.li-dims-body{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(24px,4vw,56px);
  align-items:start;margin-top:clamp(32px,4vw,56px)}
@media(max-width:900px){.li-dims-body{grid-template-columns:1fr}}

/* Marken-Ω der Sechs-Dimensionen-Strecke (sticky auf Desktop): die Füllung
   wächst beim Scrollen pro Dimension um ein Sechstel (landing.html-Script setzt
   stroke-dashoffset auf dem om-arc) — der Übergang läuft weich über die
   CSS-Transition. Gerendert voll gefüllt (html.no-js); Print erzwingt voll. */
.li-omega{position:sticky;top:96px;text-align:center;padding:12px 6px}
@media(max-width:900px){.li-omega{position:static;padding:0}.li-omega .omega-marke{width:220px!important}}
.li-omega .omega-marke{margin:0 auto;display:block;position:relative;z-index:1}
.li-omega .omega-marke svg{filter:drop-shadow(0 12px 22px rgba(10,29,61,.10))}
.li-omega .om-arc{transition:stroke-dashoffset .6s ease}
.li-omega-glow{position:absolute;left:50%;top:38%;width:min(320px,80%);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 14%,transparent),transparent 62%);filter:blur(12px);
  animation:vGlow 6s ease-in-out infinite}
/* Legende: sechs gleichwertige Namen, leuchten mit ihrer Füllstufe auf;
   .is-focus = Karte unter Maus/Fokus hebt ihren Namen in Gold hervor */
.li-omega-legend{list-style:none;margin:10px auto 0;padding:0;display:grid;grid-template-columns:repeat(2,auto);
  justify-content:center;gap:6px 18px;font-family:var(--head);font-size:.82rem;font-weight:600;color:var(--text-faint);text-align:left}
.li-omega-legend li{display:flex;align-items:center;gap:8px;transition:color .6s ease}
.li-omega-legend li i{width:8px;height:8px;border-radius:50%;background:var(--omega-track);transition:background .6s ease,box-shadow .6s ease}
.li-omega-legend li.is-lit{color:var(--heading)}
.li-omega-legend li.is-lit i{background:var(--omega-arc-1);box-shadow:0 0 0 4px color-mix(in srgb,var(--omega-arc-1) 16%,transparent)}
.li-omega-legend li.is-focus{color:var(--heading)}
.li-omega-legend li.is-focus i{background:var(--omega-foot);box-shadow:0 0 0 4px color-mix(in srgb,var(--omega-foot) 16%,transparent)}
.li-omega-note{margin:14px auto 0;font-size:.76rem;letter-spacing:.06em;color:var(--text-faint);max-width:26ch;line-height:1.5}
/* Kritiker K5: Marken-Glyphe statt Schriftzeichen-Ω in der Figuren-Notiz
   (Muster: li-dims-guard / --omega-glyph-url; Farbe folgt der Notiz) */
.li-omega-note .lin-omk{display:inline-block;width:.85em;height:.8em;vertical-align:-6%;
  background:currentColor;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
@media(max-width:900px){.li-omega-legend{grid-template-columns:repeat(3,auto);gap:4px 14px;font-size:.76rem}}
@media(max-width:480px){.li-omega-legend{grid-template-columns:repeat(2,auto)}}

/* Karten */
.li-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:640px){.li-cards{grid-template-columns:1fr}}
.li-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:26px 26px 22px;
  box-shadow:var(--shadow);overflow:hidden}
/* Reveal je Karte als Keyframe (gestaffelt über --i), damit der Hover-Lift ohne Verzögerung reagiert:
   Grundzustand unsichtbar (data-reveal), .is-in → vFadeUp mit Delay (backwards-Fill hält den Startzustand). */
.li-card[data-reveal],.li-tcard[data-reveal]{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,border-color .35s ease}
.li-card[data-reveal].is-in,.li-tcard[data-reveal].is-in{animation:vFadeUp .8s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay:calc(var(--i,0) * 110ms)}
.li-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--teal) 70%,transparent),transparent);
  opacity:0;transition:opacity .35s ease}
.li-card::after{content:"";position:absolute;right:-2px;bottom:-8px;width:4.3rem;height:4rem;
  background:color-mix(in srgb,var(--gold) 7%,transparent);pointer-events:none;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat;
  transition:background .35s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.li-card:hover,.li-card:focus-within{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.li-card:hover::before,.li-card:focus-within::before{opacity:1}
.li-card:hover::after{background:color-mix(in srgb,var(--gold) 12%,transparent);transform:translate(-4px,-4px)}
:root[data-theme="dark"] .li-card,
:root:not([data-theme="light"]) .li-card{background:var(--surface-2)}
.li-card > *{position:relative;z-index:1}
.li-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.li-chip{display:inline-flex;align-items:center;justify-content:center;width:60px;height:30px;padding:0;border-radius:999px;
  font-family:var(--head);font-size:.74rem;font-weight:700;letter-spacing:.14em;color:var(--gold-ink);
  background:color-mix(in srgb,var(--gold) 12%,transparent);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
/* kleine Marken-Ω auf den Karten: ruhig, einheitlich, leicht zurückgenommen */
.li-card-ring{display:inline-block;line-height:0;opacity:.92}
.li-card-ring .omk-track,.li-tcard-ring .omk-track{opacity:.6}
.li-card-title{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;color:var(--heading);margin:0 0 .3em;line-height:1.15}
.li-card-q{font-family:var(--display);font-style:italic;font-size:1.12rem;line-height:1.45;color:var(--teal-700);margin:0 0 .75em;text-wrap:pretty;max-width:none}
:root[data-theme="dark"] .li-card-q,
:root:not([data-theme="light"]) .li-card-q{color:var(--omega-arc-1)}
.li-card-p{font-size:.95rem;line-height:1.62;color:var(--text);margin:0 0 .6em;max-width:none}
.li-card-p2{color:var(--text-muted)}
.li-card-u{margin:.9em 0 0;padding-top:12px;border-top:1px dashed var(--border-strong);font-size:.88rem;line-height:1.55;color:var(--text-muted);max-width:none}
.li-card-more{margin-top:12px}
.li-card-more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-family:var(--head);
  font-size:.82rem;font-weight:600;color:var(--link);border-radius:8px}
.li-card-more summary::-webkit-details-marker{display:none}
.li-card-more summary::after{content:"+";font-weight:500;color:var(--text-faint);transition:transform .25s ease}
.li-card-more[open] summary::after{transform:rotate(45deg)}
.li-card-more summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.li-card-more .li-card-p2{margin:10px 0 0}
.li-card-u-k{display:block;font-family:var(--head);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:4px}
.li-dims-guard{margin:clamp(28px,4vw,44px) auto 0;max-width:var(--maxw-text);text-align:center;font-size:.92rem;line-height:1.6;color:var(--text-muted);
  padding:16px 22px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border)}
.li-dims-guard span{display:block;width:.95rem;height:.9rem;margin:0 auto 6px;background:var(--gold-ink);
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
:root[data-theme="dark"] .li-dims-guard,
:root:not([data-theme="light"]) .li-dims-guard{background:var(--surface)}

/* — Teaser · So sieht Ihre Reflexion aus ————————————————————— */
.li-teaser{margin:clamp(56px,8vw,104px) 0 0;text-align:center}
.li-teaser-head .li-eyebrow{justify-content:center}
.li-teaser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px;text-align:left}
.li-tcard{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px 24px 22px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:6px}
.li-tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
:root[data-theme="dark"] .li-tcard,
:root:not([data-theme="light"]) .li-tcard{background:var(--surface-2)}
.li-tcard-ring{display:block;line-height:0;margin-bottom:8px}
.li-tcard-title{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--heading);margin:0;line-height:1.2}
.li-tcard-p{font-size:.93rem;line-height:1.6;color:var(--text-muted);margin:0;max-width:none}
.li-teaser-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.li-teaser-actions .li-fine{flex-basis:100%;width:100%;max-width:none;text-align:center;margin:6px auto 0}

/* Buttons (1:1 wie Hero-Buttons, als Klassen) */
.li-btn{display:inline-flex;align-items:center;gap:10px;border-radius:16px;padding:16px 32px;font-family:var(--head);font-weight:600;
  font-size:1.05rem;text-decoration:none;transition:transform .18s ease,box-shadow .2s ease}
.li-btn:hover{transform:translateY(-2px)}
.li-btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.li-btn-primary{background:linear-gradient(150deg,#16386B,#0A1D3D);color:#fff;box-shadow:0 10px 28px rgba(10,29,61,.3)}
:root[data-theme="dark"] .li-btn-primary,
:root:not([data-theme="light"]) .li-btn-primary{background:linear-gradient(150deg,#1f5a9e,#153f77)}
.li-btn-ghost{border:1px solid var(--border);background:var(--surface);color:var(--heading)}
.li-btn-glow{animation:vPulse 4s ease-in-out infinite}

/* Zwischenkopf „So läuft es ab" über den Ist-Step-Cards */
.li-steps-head{text-align:center;margin:clamp(56px,8vw,104px) auto 0;max-width:var(--maxw-text)}
.li-steps-head .li-eyebrow{justify-content:center}
.li-steps-head .li-title{margin-bottom:0}

/* — Abschluss-CTA ———————————————————————————————— */
.li-final{position:relative;margin:clamp(48px,6vw,80px) 0 clamp(40px,6vw,72px);padding:clamp(44px,6vw,72px) 24px;
  text-align:center;border-radius:24px;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg)}
:root[data-theme="dark"] .li-final,
:root:not([data-theme="light"]) .li-final{background:var(--surface-2)}
.li-final-glow{position:absolute;left:50%;top:50%;width:min(520px,90%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 18%,transparent),transparent 62%);filter:blur(14px);animation:vGlow 6s ease-in-out infinite;pointer-events:none}
.li-final-omega{position:absolute;right:-4px;bottom:-18px;width:7.9rem;height:7.4rem;
  background:color-mix(in srgb,var(--gold) 9%,transparent);pointer-events:none;
  -webkit-mask:var(--omega-glyph-url) center/contain no-repeat;
  mask:var(--omega-glyph-url) center/contain no-repeat}
.li-final > *{position:relative;z-index:1}
.li-final > .li-final-glow,.li-final > .li-final-omega{position:absolute;z-index:0}
.li-final-line{font-family:var(--display);font-style:normal;font-weight:500;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.3;
  color:var(--heading);margin:0 auto 26px;max-width:30ch;text-wrap:balance}
.li-final-line em{font-style:italic;color:var(--teal-700)}
:root[data-theme="dark"] .li-final-line em,
:root:not([data-theme="light"]) .li-final-line em{color:var(--omega-arc-1)}
.li-final .li-fine{margin:18px auto 0;text-align:center}

/* Reduced Motion: Einstieg/Reveal läuft (Vorgabe), Endlosschleifen ruhen */
@media(prefers-reduced-motion:reduce){
  .li-omega-glow,.li-final-glow{animation:none!important;opacity:.55}
  .li-btn-glow{animation:none!important;box-shadow:0 10px 28px rgba(10,29,61,.3),0 0 0 4px color-mix(in srgb,var(--gold) 35%,transparent)}
  .li-card:hover,.li-tcard:hover,.li-btn:hover{transform:none}
}
@media print{.li-omega-glow,.li-final-glow{display:none}.li-omega{position:static}
  .li-omega .om-arc{stroke-dashoffset:0!important;transition:none}}
/* Zwischenkopf sitzt näher an den Ist-Step-Cards (Inline-Margin der Sektion zurücknehmen) */
.li-steps-head + section[data-reveal]{margin-top:22px!important}

/* ══════════════════════════════════════════════════════════════════════
   Beta 2.4 · FÜHRUNGSMUSTER (VAL-FM-001) — additiv
   Vier Farbfamilien nach Spez §5 (G×R: Navy · Teal · Gold · Kupfer) als
   Tokens in Light UND Dark (Dark: hellere Ableger für Kontrast auf
   #070F1F). Farbiger TEXT nutzt ausschließlich die --muster-*-ink-Töne
   (AA ≥ 4.5:1 auf Creme bzw. Dunkelgrund, analog --gold-ink).
   Komponenten: .muster-* (Reveal-Sektion, Emblem-Overrides, Achsen-
   Balken, Resonanz). Grundregeln §8: kein Muster ist besser — Farben
   ordnen Familien, sie werten nicht; kein rot/grün, keine Rangfolge.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* Familienfarben — dunkle (Vorangehen) & helle (Befähigen) Variante.
     Beta 2.5 (Kritiker E1): Light-Töne Richtung Freigabe-Entwurfs-Palette
     abgesenkt, damit alle Grafikfarben WCAG 1.4.11 (≥3:1) auf Creme #F7F6F1
     erfüllen: navy 15.45 · navy-hell 4.94 · teal #137F7A 4.47 ·
     teal-hell #2E9992 3.19 · gold #A87B1F 3.52 · gold-hell #B08428 3.14 ·
     kupfer #A05435 5.09 · kupfer-hell #C4795A 3.12. Die §5-Hexwerte bleiben
     unverändert die PDF-/Referenzfarben (SVG-Attribute im Sinnbild). */
  --muster-navy:#0A1D3D;   --muster-navy-hell:#3E6E9E;
  --muster-teal:#137F7A;   --muster-teal-hell:#2E9992;
  --muster-gold:#A87B1F;   --muster-gold-hell:#B08428;
  --muster-kupfer:#A05435; --muster-kupfer-hell:#C4795A;
  /* Ink-Varianten: farbiger Text auf Creme/Weiß — AA (analog --gold-ink) */
  --muster-navy-ink:#0A1D3D;
  --muster-teal-ink:#136460;
  --muster-gold-ink:#7A5A10;
  --muster-kupfer-ink:#8A4425;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --muster-navy:#3E6E9E;   --muster-navy-hell:#8FB8E4;
    --muster-teal:#2EB4AD;   --muster-teal-hell:#63C4BE;
    --muster-gold:#E0B453;   --muster-gold-hell:#E8D096;
    --muster-kupfer:#C97C58; --muster-kupfer-hell:#E0A585;
    --muster-navy-ink:#8FB8E4;
    --muster-teal-ink:#63C4BE;
    --muster-gold-ink:#E0B453;
    --muster-kupfer-ink:#E09E7E;
  }
}
:root[data-theme="dark"]{
  --muster-navy:#3E6E9E;   --muster-navy-hell:#8FB8E4;
  --muster-teal:#2EB4AD;   --muster-teal-hell:#63C4BE;
  --muster-gold:#E0B453;   --muster-gold-hell:#E8D096;
  --muster-kupfer:#C97C58; --muster-kupfer-hell:#E0A585;
  --muster-navy-ink:#8FB8E4;
  --muster-teal-ink:#63C4BE;
  --muster-gold-ink:#E0B453;
  --muster-kupfer-ink:#E09E7E;
}

/* — Familien-/Varianten-Weichen: --mf = Emblem-/Markerfarbe, --mf-ink = Text — */
.muster-fam-navy{--mf-d:var(--muster-navy);--mf-h:var(--muster-navy-hell);--mf-ink:var(--muster-navy-ink)}
.muster-fam-teal{--mf-d:var(--muster-teal);--mf-h:var(--muster-teal-hell);--mf-ink:var(--muster-teal-ink)}
.muster-fam-gold{--mf-d:var(--muster-gold);--mf-h:var(--muster-gold-hell);--mf-ink:var(--muster-gold-ink)}
.muster-fam-kupfer{--mf-d:var(--muster-kupfer);--mf-h:var(--muster-kupfer-hell);--mf-ink:var(--muster-kupfer-ink)}
.muster-fam-alle{--mf-d:var(--muster-navy);--mf-h:var(--muster-navy-hell);--mf-ink:var(--heading)}  /* INT: neutraler Navy-Markenton, konsistent zum PDF (pmu-fam-alle) */
.muster-var-dunkel{--mf:var(--mf-d)}
.muster-var-hell{--mf:var(--mf-h)}
.muster-var-int,.muster-var-offen{--mf:var(--mf-d)}

/* — Sinnbilder (Beta 2.5, ersetzen das Ω-Emblem der Typologie — ohne Ω-Ring):
   Web-Overrides der SVG-Attributfarben über .sb-*-Klassenpaare (st-/fi-Logik
   des Freigabe-Entwurfs) auf die themefähigen --muster-*-Tokens (Light/Dark).
   Die SVG-Attribute (Spez-§5-Hex) bleiben der statische Fallback fürs PDF. — */
.sinnbild{display:inline-block;line-height:0;max-width:100%}
.sinnbild svg{display:block;width:100%;height:auto}
.sinnbild .sb-st-navy{stroke:var(--muster-navy)}        .sinnbild .sb-fi-navy{fill:var(--muster-navy)}
.sinnbild .sb-st-navyh{stroke:var(--muster-navy-hell)}  .sinnbild .sb-fi-navyh{fill:var(--muster-navy-hell)}
.sinnbild .sb-st-teal{stroke:var(--muster-teal)}        .sinnbild .sb-fi-teal{fill:var(--muster-teal)}
.sinnbild .sb-st-tealh{stroke:var(--muster-teal-hell)}  .sinnbild .sb-fi-tealh{fill:var(--muster-teal-hell)}
.sinnbild .sb-st-gold{stroke:var(--muster-gold)}        .sinnbild .sb-fi-gold{fill:var(--muster-gold)}
.sinnbild .sb-st-goldh{stroke:var(--muster-gold-hell)}  .sinnbild .sb-fi-goldh{fill:var(--muster-gold-hell)}
.sinnbild .sb-st-kupfer{stroke:var(--muster-kupfer)}    .sinnbild .sb-fi-kupfer{fill:var(--muster-kupfer)}
.sinnbild .sb-st-kupferh{stroke:var(--muster-kupfer-hell)}.sinnbild .sb-fi-kupferh{fill:var(--muster-kupfer-hell)}
.sinnbild .sb-fi-ink{fill:var(--heading)}                /* INT-Mitte */
/* Leer-Emblem (OFFEN): ruhig, aber wahrnehmbar (Kritiker K-2 — --v-border
   erreichte nur 1.22:1). 45 % text-faint auf bg ≈ #B5B7BB → 1.86:1 (Light)
   bzw. ≈ #424D62 → 2.25:1 (Dark) — bewusst still, kein Signal. */
.sinnbild .sb-st-leer{stroke:color-mix(in srgb,var(--text-faint) 45%,var(--bg))}
/* Reveal: die Linien zeichnen sich (pathLength=1 → dasharray/dashoffset),
   danach blenden die Füll-Akzente ein. .is-in vergibt der Intersection-
   Observer der Ergebnis-Seite ([data-anim] auf dem Sinnbild-Span selbst).
   Einmalige Eintrittsanimation — läuft per Projekt-Policy auch unter
   prefers-reduced-motion; kein Endlos-Loop. */
.js-sinnbild[data-anim]{opacity:1;transform:none}
/* Dash/Offset leicht überzogen (1 1.02 / 1.01): sonst bliebe durch
   stroke-linecap:round ein Mini-Punkt am Pfadanfang sichtbar (Kritiker K1). */
.js-sinnbild .sb-draw{stroke-dasharray:1 1.02;stroke-dashoffset:1.01;
  transition:stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1) calc(var(--sbi,0) * 160ms + .12s)}
.js-sinnbild.is-in .sb-draw{stroke-dashoffset:0}
.js-sinnbild .sb-fill{opacity:0;
  transition:opacity .7s ease calc(var(--sbi,0) * 120ms + 1.25s)}
.js-sinnbild.is-in .sb-fill{opacity:1}
.js-sinnbild .sb-leer{opacity:0;transition:opacity 1s ease .2s}
.js-sinnbild.is-in .sb-leer{opacity:1}
html.no-js .js-sinnbild .sb-draw{stroke-dasharray:none;stroke-dashoffset:0}
html.no-js .js-sinnbild .sb-fill,html.no-js .js-sinnbild .sb-leer{opacity:1}
@media print{
  .js-sinnbild .sb-draw{stroke-dasharray:none;stroke-dashoffset:0}
  .js-sinnbild .sb-fill,.js-sinnbild .sb-leer{opacity:1}
}

/* ══════════════════════════════════════════════════════════════════════
   Beta 2.7 · KONSTELLATIONS-REVEAL „Die Konstellation" (Regie A)
   Alle 9 Sinnbilder als Orbit → Kompass-Ausklang (würdevoll, kein
   Glücksrad: cubic-bezier(.16,.84,.32,1), 3.4s; Satelliten bleiben über
   Gegenrotation aufrecht) → die 8 anderen faden auf 13 % + entsättigt und
   BLEIBEN als blasse Konstellation → das eigene löst sich zur Mitte auf,
   dort zeichnet sich das große Sinnbild (sb-draw-Mechanik: pathLength=1,
   Strichbreiten größenabhängig im Makro — KEIN vector-effect, Chrome-
   Dash-Lektion) → Kopf-Typografie gestaffelt. Start: .is-in auf
   .muster-konstellation (bestehender [data-anim]-Observer, einmalig).
   Robust: html.no-js + @media print → sofortiger Endzustand; alles sind
   einmalige Eintritte (laufen per Projekt-Policy auch unter
   prefers-reduced-motion), NICHTS loopt. Geometrie: Radius + Satelliten-
   größe responsive per clamp — Orbit auf jedem Viewport vollständig
   sichtbar, zentriert, kein Clipping/kein horizontales Scrollen
   (Gründer-Feedback zur Demo). Die Bühne wächst mit dem Orbit (normaler
   Fluss, kein festes height), overflow bleibt sichtbar.
   ══════════════════════════════════════════════════════════════════════ */
.muster-konstellation{--mk-sat:clamp(46px,11vw,68px);--mk-r:clamp(102px,24vw,176px);gap:8px}
.mk-buehne{position:relative;width:100%;display:flex;justify-content:center;
  padding:clamp(6px,1.5vw,16px) 0;overflow:visible}
.mk-orbit{position:relative;flex:0 0 auto;
  width:calc(2 * var(--mk-r) + var(--mk-sat));height:calc(2 * var(--mk-r) + var(--mk-sat))}
.mk-sat{position:absolute;left:50%;top:50%;width:var(--mk-sat);height:var(--mk-sat);
  margin:calc(-.5 * var(--mk-sat)) 0 0 calc(-.5 * var(--mk-sat));opacity:.9;
  transform:rotate(var(--a,0deg)) translateY(calc(-1 * var(--mk-r))) rotate(calc(-1 * var(--a,0deg)))}
.mk-inner{display:block;width:100%;height:100%}
.mk-sat .sinnbild,.mk-hero .sinnbild{width:100%!important}
.mk-hero{position:absolute;left:50%;top:50%;width:clamp(128px,32vw,200px);
  transform:translate(-50%,-50%);line-height:0}
/* Phase A · Kompass-Ausklang (2.8s, Kritiker F3: gestrafft): Orbit dreht aus,
   .mk-inner exakt gegenläufig → Sinnbilder bleiben aufrecht. Läuft erst ab
   .is-in (both hält Start). */
.muster-konstellation.is-in .mk-orbit{animation:mkSpin 2.8s cubic-bezier(.16,.84,.32,1) both}
@keyframes mkSpin{from{transform:rotate(-300deg)}to{transform:rotate(0deg)}}
.muster-konstellation.is-in .mk-inner{animation:mkInner 2.8s cubic-bezier(.16,.84,.32,1) both}
@keyframes mkInner{from{transform:rotate(300deg)}to{transform:rotate(0deg)}}
/* Phase B (ab 2.6s, überlappt in den Spin-Ausklang) · die acht anderen treten
   zurück und BLEIBEN stehen; das eigene Sinnbild löst sich Richtung Mitte auf. */
.muster-konstellation.is-in .mk-sat:not(.mk-sat--ich){animation:mkFade 1s ease 2.6s both}
@keyframes mkFade{to{opacity:.13;filter:saturate(.4)}}
.muster-konstellation.is-in .mk-sat--ich{animation:mkIch 1s cubic-bezier(.3,.7,.2,1) 2.6s both}
@keyframes mkIch{to{opacity:0;
  transform:rotate(var(--a,0deg)) translateY(calc(-.25 * var(--mk-r))) rotate(calc(-1 * var(--a,0deg))) scale(.6)}}
/* Phase C (ab 3.0s) · das große Sinnbild zeichnet sich in der Mitte —
   dieselbe sb-draw/sb-fill-Mechanik wie .js-sinnbild, hier aber vom
   Konstellations-Wrapper choreografiert (das Hero-SVG ist animate=false,
   damit der Observer es nicht separat/zu früh startet). */
.mk-hero .sb-draw{stroke-dasharray:1 1.02;stroke-dashoffset:1.01;
  transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1) calc(var(--sbi,0) * 140ms + 3s)}
.muster-konstellation.is-in .mk-hero .sb-draw{stroke-dashoffset:0}
.mk-hero .sb-fill{opacity:0;transition:opacity .6s ease calc(var(--sbi,0) * 120ms + 4.2s)}
.muster-konstellation.is-in .mk-hero .sb-fill{opacity:1}
/* Phase D (ab 3.3s, PARALLEL zum Hero-Zeichnen — Kritiker F3: der Name darf
   nicht als Letztes kommen) · Sinnbild-Name (Overline, Familienfarbe) →
   Mustername (komplett ~4.3s) → Kernsatz → Rahmung (fertig ~5.0s;
   Gesamtdauer bis Endzustand ≈ 5.2s). Die Caption reserviert ihre Höhe
   nicht von Anfang an (max-height-Auffalten ab 2.9s, während darunter noch
   nichts Sichtbares steht — kein wahrnehmbarer Layout-Sprung). */
.mk-caption{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%}
.muster-sinnname{font-family:var(--head);font-weight:600;font-size:.74rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mf-ink,var(--gold-ink))}
.muster-konstellation .mk-caption{max-height:0;overflow:hidden;
  transition:max-height 1.1s cubic-bezier(.2,.8,.2,1) 2.9s}
.muster-konstellation.is-in .mk-caption{max-height:640px}
.muster-konstellation .mk-caption > *{opacity:0}
.muster-konstellation.is-in .mk-caption > *{animation:mkCapUp .8s cubic-bezier(.2,.8,.2,1) both}
.muster-konstellation.is-in .muster-sinnname{animation-duration:.6s;animation-delay:3.3s}
.muster-konstellation.is-in .muster-name{animation-delay:3.5s}
.muster-konstellation.is-in .muster-kernsatz{animation-duration:.7s;animation-delay:4s}
.muster-konstellation.is-in .muster-rahmung{animation-duration:.7s;animation-delay:4.3s}
@keyframes mkCapUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Ankunft per #muster-Anker / bereits gegebene Resonanz (Kritiker F2):
   .mk-instant (Inline-Script der Ergebnisseite) → kompletter Endzustand
   sofort, kein Replay; der normale Erstbesuch behält die volle Regie. */
.mk-instant .muster-konstellation,.mk-instant .muster-konstellation .mk-orbit,
.mk-instant .muster-konstellation .mk-inner,.mk-instant .muster-konstellation .mk-sat,
.mk-instant .muster-konstellation .mk-caption,.mk-instant .muster-konstellation .mk-caption > *{
  animation-duration:0s!important;animation-delay:0s!important;transition:none!important}
.mk-instant .muster-konstellation .mk-hero .sb-draw,
.mk-instant .muster-konstellation .mk-hero .sb-fill{transition:none!important}
/* Endzustand ohne JS: blasse Konstellation + großes Sinnbild + Texte sofort
   ([data-anim]-Grundzustand neutralisiert html.no-js bereits global). */
html.no-js .muster-konstellation .mk-sat:not(.mk-sat--ich){opacity:.13;filter:saturate(.4)}
html.no-js .muster-konstellation .mk-sat--ich{opacity:0}
html.no-js .mk-hero .sb-draw{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
html.no-js .mk-hero .sb-fill{opacity:1;transition:none}
html.no-js .muster-konstellation .mk-caption{max-height:none;transition:none}
html.no-js .muster-konstellation .mk-caption > *{opacity:1}
/* Druck: identischer Endzustand, keine Animationen. */
@media print{
  .muster-konstellation .mk-orbit,.muster-konstellation .mk-inner,
  .muster-konstellation .mk-sat,.muster-konstellation .mk-caption > *{animation:none!important}
  .muster-konstellation .mk-sat:not(.mk-sat--ich){opacity:.13;filter:saturate(.4)}
  .muster-konstellation .mk-sat--ich{opacity:0}
  .mk-hero .sb-draw{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .mk-hero .sb-fill{opacity:1;transition:none}
  .muster-konstellation .mk-caption{max-height:none;transition:none}
  .muster-konstellation .mk-caption > *{opacity:1}
}

/* — Sektion: Dramaturgie über gestaffelte data-anim-Delays (--i) — */
/* scroll-margin-top: Anker-Sprünge (#muster, Resonanz-Redirect) dürfen den
   Orbit nicht unter den Sticky-Header schieben (Gründer-Feedback: Orbit
   auf jedem Viewport vollständig sichtbar). */
.muster-section{margin:clamp(48px,7vw,84px) auto 0;max-width:920px;
  scroll-margin-top:calc(var(--header-h,76px) + 18px)}
.muster-section [data-anim]{transition-delay:calc(var(--i,0) * 150ms)}
.muster-stage{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.muster-emblem-wrap{line-height:0;margin-bottom:4px}
.muster-overline{justify-content:center}
.muster-name{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,6vw,4rem);
  line-height:1.05;letter-spacing:-.02em;color:var(--mf-ink,var(--heading));margin:0;text-wrap:balance}
.muster-name[data-anim]{transform:translateY(26px);filter:blur(8px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1),filter 1s ease}
.muster-name[data-anim].is-in{filter:none}
.muster-kernsatz{margin:6px auto 0;max-width:44ch;border:0;padding:0;
  font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.4rem);
  line-height:1.5;color:var(--text);text-wrap:pretty}
.muster-rahmung{margin:2px 0 0;color:var(--text-faint);font-size:var(--fs-fine);letter-spacing:.03em;max-width:none}

/* Leerzustand (muster_code OFFEN): ruhig, keine leeren Karten */
.muster-stage--offen .muster-name{color:var(--text-muted);font-size:clamp(1.7rem,4vw,2.3rem)}
.muster-offen-text{max-width:54ch;margin:4px auto 0;color:var(--text-muted);line-height:1.6}

/* — Porträt: zentrierter Serif-Fließtext (Bildsprache der Synthese) — */
.muster-portraet{max-width:var(--maxw-text);margin:clamp(26px,4vw,38px) auto 0;text-align:center}
.muster-portraet p{font-family:var(--display);font-size:1.18rem;line-height:1.65;
  color:var(--text);margin:0 0 .85em;max-width:none}
.muster-portraet p:last-child{margin-bottom:0}

/* — Drei Karten: trägt / kippt / Rollenübergang (gleichwertig, keine Wertungsfarben) — */
.muster-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;margin:clamp(26px,4vw,38px) 0 0}
.muster-karte{background:var(--surface);border:1px solid var(--border);
  border-top:3px solid var(--mf,var(--teal));border-radius:var(--r-md);
  padding:20px 22px;box-shadow:var(--shadow);text-align:left;
  transition:transform .25s ease,box-shadow .25s ease}
.muster-karte:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.muster-karte .eyebrow{color:var(--mf-ink,var(--link));font-size:.68rem}
.muster-karte p{margin:.6em 0 0;color:var(--text-muted);font-size:.95rem;line-height:1.6;max-width:none}

/* — Achsen-Visual: 3 bipolare Balken (Bildsprache der Matrix-Spur) — */
.muster-achsen{margin:clamp(30px,5vw,46px) 0 0}
.muster-achsen-titel{font-size:var(--fs-h3);margin:0 0 4px}
.muster-achsen-sub{margin:0 0 var(--sp-3);max-width:var(--maxw-text)}
.muster-achse{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  padding:16px 20px;margin:12px 0;box-shadow:var(--shadow)}
.ma-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ma-name{font-family:var(--head);font-weight:700;color:var(--heading);font-size:.98rem}
.ma-flag{font-family:var(--head);font-weight:600;font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mf-ink,var(--text-muted));background:var(--surface-2);
  border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:2px 10px}
.ma-flag--offen{color:var(--text-faint);border-style:dashed;background:var(--surface)}
.ma-row{display:grid;grid-template-columns:minmax(88px,130px) 1fr minmax(88px,130px);
  gap:12px;align-items:center}
.ma-pol{font-family:var(--head);font-weight:600;font-size:.85rem;color:var(--text-muted);line-height:1.3}
.ma-pol-b{text-align:right}
.ma-pol.is-pol{color:var(--mf-ink,var(--heading));font-weight:700}
.ma-track{position:relative;height:38px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--border)}
.ma-track::before{content:"";position:absolute;left:12px;right:12px;top:50%;height:1px;
  background:var(--border-strong);opacity:.8}
/* Skala −3…+3: sechs gleiche Abschnitte, deutlichere Mittelmarke */
.ma-track::after{content:"";position:absolute;inset:7px 12px;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100% / 6 - 1px),var(--border) calc(100% / 6 - 1px),var(--border) calc(100% / 6))}
.ma-mittelmarke{position:absolute;left:50%;top:5px;bottom:5px;width:1.5px;margin-left:-.75px;
  background:var(--border-strong);z-index:1}
/* Sanfte Mittel-Zone (|Wert| < 0.5) für „bewegliche Mitte“-Achsen */
.ma-mittezone{position:absolute;left:41.67%;right:41.67%;top:4px;bottom:4px;z-index:1;
  border-radius:var(--r-pill);background:color-mix(in srgb,var(--mf,var(--teal)) 12%,transparent);
  border:1px dashed color-mix(in srgb,var(--mf,var(--teal)) 42%,transparent)}
/* Beta 2.5: schlichter gefüllter Punkt in der DUNKLEN Familienfarbe (--mf-d,
   konsistent zum PDF-pt-mk, Kritiker E2; schwächster Fall Light: gold #A87B1F
   auf --surface-2 #EFEDE4 = 3.24:1) — die Sinnbilder sind für die 24-px-Spur zu
   fein, kein Ω mehr in der Typologie. */
.ma-marker{position:absolute;top:50%;left:var(--pos,50%);width:18px;height:18px;z-index:2;
  margin:-9px 0 0 -9px;border-radius:50%;
  background:var(--mf-d,var(--teal));border:2.5px solid var(--surface);
  box-shadow:0 3px 10px rgba(10,29,61,.2)}
/* Beta 2.7 · „Die Herleitung" (Regie B): Der Marker erscheint auf der Mitte
   und GLEITET beim Scroll-Reveal an seine Wert-Position (left 50% → var(--pos),
   1.1s cubic-bezier(.3,.9,.3,1)) — gestaffelt je Achse über --ma (0/1/2, vom
   Template gesetzt; unabhängig vom Sektions---i, das nach dem Konstellations-
   Umbau die Reveal-Reihenfolge trägt). Endzustand identisch zu vorher;
   wert=None/offene Achse hat keinen Marker (.ma-offen) — nichts gleitet.
   CSS-only, einmaliger Eintritt (läuft per Projekt-Policy auch unter
   reduced-motion, kein Loop). PDF (result_pdf.html) unverändert statisch. */
.muster-achse[data-anim] .ma-marker{left:50%;transform:scale(.5);opacity:0;
  transition:left 1.1s cubic-bezier(.3,.9,.3,1) calc(var(--ma,0) * 180ms + .5s),
    transform .7s cubic-bezier(.34,1.4,.64,1) calc(var(--ma,0) * 180ms + .25s),
    opacity .5s ease calc(var(--ma,0) * 180ms + .25s)}
.muster-achse[data-anim].is-in .ma-marker{left:var(--pos,50%);transform:none;opacity:1}
/* no-js-Rückholung mit VOLLER Spezifität (Kritiker F1): der Startzustand oben
   ist 0-3-0 — ein schwächerer html.no-js .ma-marker (0-2-1) würde verlieren
   und die Achsen blieben ohne JS leer. */
html.no-js .muster-achse[data-anim] .ma-marker{left:var(--pos,50%);transform:none;opacity:1;transition:none}
.ma-offen{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--head);font-size:.74rem;color:var(--text-faint);font-style:italic}
.ma-offen-hinweis{margin:8px 0 0;color:var(--text-faint);font-size:var(--fs-fine)}

/* — Mitte-Hinweise & Ausnahme-Sätze: dezente Zeilen mit Familien-Punkt
   (Beta 2.5: kein Ω mehr in der Typologie) — */
.muster-feinzeilen{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:8px}
.muster-feinzeilen li{position:relative;padding-left:24px;color:var(--text-muted);
  font-size:.92rem;line-height:1.55;max-width:var(--maxw-text)}
.muster-feinzeilen li::before{content:"";position:absolute;left:2px;top:.5em;
  width:7px;height:7px;border-radius:50%;background:var(--mf-d,var(--gold));opacity:.85}

/* — Resonanz: eine Frage, drei gleichwertige Antworten (Beta-Lernziel) — */
.muster-resonanz{margin:clamp(28px,4vw,42px) auto 0;text-align:center;max-width:600px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px 24px;
  /* Ankerziel des Resonanz-Redirects (#muster-resonanz, Kritiker F2):
     nicht unter den Sticky-Header rutschen */
  scroll-margin-top:calc(var(--header-h,76px) + 18px)}
.mr-frage{font-family:var(--display);font-size:1.15rem;color:var(--heading);margin:0 0 14px;max-width:none}
.mr-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.mr-btn{min-width:132px}
/* Gewählte Antwort: bestätigt (aria-pressed=true) — Navy-Füllung wie gewählte Likert-Option */
.mr-btn.is-active{background:linear-gradient(150deg,var(--primary-1),var(--primary-2));
  color:var(--on-primary);border-color:transparent;box-shadow:0 6px 16px rgba(20,59,114,.24)}
.mr-btn.is-active:hover{background:linear-gradient(150deg,var(--primary-2),var(--navy-900));color:var(--on-primary)}
.mr-danke{margin:12px auto 0;font-size:var(--fs-fine);color:var(--text-muted);max-width:52ch}
.mr-danke::before{content:"✓";display:inline-block;margin-right:7px;font-weight:700;color:var(--link)}
.muster-resonanz .fine{margin:12px auto 0;max-width:52ch}
.muster-beta-note{text-align:center;margin:14px auto 0;max-width:64ch}

@media(max-width:560px){
  .ma-row{grid-template-columns:1fr;gap:6px}
  .ma-pol-b{text-align:left}
  .muster-portraet p{font-size:1.08rem}
}

/* Druck: statisch, ruhige Kanten, Karten nicht umbrechen */
@media print{
  .muster-karte,.muster-achse{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .muster-resonanz{display:none}
  .muster-name[data-anim]{filter:none;transform:none;opacity:1}
  /* Regie B: Marker im Druck sofort an der Wert-Position, kein Gleiten */
  .muster-achse[data-anim] .ma-marker{left:var(--pos,50%);transform:none;opacity:1;transition:none}
}

/* — Beta 2.6 · Lens-Verwebung (VAL-FM-001): Muster-Zugangszeilen in den
   Auswertungs-Sektionen (.lens-zugang — ruhige kursive Einleitung mit
   Familienfarb-Akzent am Rand, keine Karte) + Kippt-Schärfung in der
   Muster-Karte „Wo es kippen kann" (.kippt-schaerfung — leicht abgesetzter
   Zusatz-Absatz). Keine neuen Farbtöne: Akzent über die bestehenden
   .muster-fam-*-Weichen (--mf-d/--mf-ink), die in Light UND beiden
   Dark-Blöcken definiert sind — die Zeilen folgen dem Theme über die Tokens. — */
.lens-zugang{position:relative;margin:0 0 var(--sp-4);max-width:var(--maxw-text);
  padding-left:18px;font-family:var(--display);font-style:italic;
  font-size:1.02rem;line-height:1.6;color:var(--text-muted)}
.lens-zugang::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;
  width:3px;border-radius:2px;background:var(--mf-d,var(--gold));opacity:.8}
.lens-zugang .acc{color:var(--mf-ink,var(--link))}
.muster-karte .kippt-schaerfung{margin:.9em 0 0;padding-top:.8em;
  border-top:1px dashed var(--border-strong);color:var(--text-muted);
  font-size:.92rem;line-height:1.6;max-width:none}
/* Dark (beide Wege): Akzentbalken minimal kräftiger — die Farbwerte selbst
   kommen bereits themerichtig aus den --muster-*-Token-Blöcken oben. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lens-zugang::before{opacity:.9}
  :root:not([data-theme="light"]) .muster-karte .kippt-schaerfung{border-top-color:var(--border)}
}
:root[data-theme="dark"] .lens-zugang::before{opacity:.9}
:root[data-theme="dark"] .muster-karte .kippt-schaerfung{border-top-color:var(--border)}

/* ══════════════════════════════════════════════════════════════════════
   Beta 2.4 · FRAGEBOGEN-VALIDIERUNG (400) — unbeantwortete Items
   Backend markiert offene Karten (.qb-item / .mu-pair) mit .is-missing +
   aria-invalid="true"; der No-JS-Sprunglink landet auf id="item-<code>".
   Würdevoller Hinweis in der bestehenden Warn-/Gold-Farbwelt der App
   (KEIN Alarm-Rot — Gold ist hier Ordnungs-/Hinweismarke wie überall):
   Randlinie + sanfter Schatten, beim Scrollen gut erkennbar.
   Tokens in Light UND beiden Dark-Blöcken. :target: einmaliges
   Aufleuchten (Eintrittsanimation, kein Endlos-Loop, läuft per
   reduced-motion-Policy des Projekts auch bei reduzierter Bewegung).
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --miss-accent:var(--gold);            /* Randlinie/Markierung */
  --miss-ring:rgba(201,150,46,.38);     /* feiner Außenring */
  --miss-glow:rgba(201,150,46,.16);     /* sanfter Schatten */
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --miss-accent:#E0B453;
    --miss-ring:rgba(224,180,83,.42);
    --miss-glow:rgba(224,180,83,.16);
  }
}
:root[data-theme="dark"]{
  --miss-accent:#E0B453;
  --miss-ring:rgba(224,180,83,.42);
  --miss-glow:rgba(224,180,83,.16);
}

/* Unbeantwortete Karte: goldene Randlinie links + ruhiger Ring/Schatten */
.qb-item.is-missing,.mu-pair.is-missing,.item.is-missing,
.qb-item[aria-invalid="true"],.mu-pair[aria-invalid="true"],.item[aria-invalid="true"]{
  border-color:color-mix(in srgb,var(--miss-accent) 55%,var(--border));
  border-left:3px solid var(--miss-accent);
  box-shadow:0 0 0 1px var(--miss-ring),0 10px 26px var(--miss-glow)}
.qb-item.is-missing:hover,.mu-pair.is-missing:hover,.item.is-missing:hover{
  border-color:var(--miss-accent)}
/* Kleines Hinweis-Wort im Item-Kopf, falls das Backend eines setzt (optional) */
.is-missing .item-code{color:var(--gold-ink)}

/* Sprunglink-Ziel: unter dem Sticky-Kopf landen + einmalig aufleuchten */
[id^="item-"]{scroll-margin-top:calc(var(--header-h,76px) + 84px)}
@keyframes vAnchorLand{
  0%{box-shadow:0 0 0 6px var(--miss-ring),0 0 40px 8px var(--miss-glow);
     border-color:var(--miss-accent)}
  100%{box-shadow:0 0 0 1px var(--miss-ring),0 10px 26px var(--miss-glow)}
}
.qb-item:target,.mu-pair:target,.item:target,[id^="item-"]:target{
  animation:vAnchorLand 1.4s cubic-bezier(.22,.61,.36,1) 1 both;
  border-color:var(--miss-accent)}

@media print{
  .qb-item.is-missing,.mu-pair.is-missing,.item.is-missing{
    box-shadow:none;border-color:var(--miss-accent)}
  .qb-item:target,.mu-pair:target,.item:target,[id^="item-"]:target{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Beta 2.5 · TEIL B — GEGENSATZ-REGLER (VAL-FM-001, UI-Neubau)
   Pol A links / Pol B rechts (mobil gestapelt mit ←/→-Richtungschips,
   Regler dazwischen), Track in voller Breite von Textkante zu Textkante,
   7 Rastpositionen als Ticks AUF dem Track, betonte Mittelmarke mit
   Label „beide gleichermaßen“, großer Daumen (Surface-Füllung, Navy-Rand,
   Hover/Active-Skalierung, :focus-visible-Ring). Beim Sliden wird der
   zugewandte Pol gewichtet (mu-lean-a/b + mu-l1..3), die Zustandszeile
   (.mu-state, wortgleich mit aria-valuetext) sagt die Wahl in Worten.
   Unberührt (mu-untouched): Daumen „schwebt“ entsättigt-gestrichelt in
   der Mitte — die Mitte ist NICHT vorausgewählt.
   Tokens in Light UND beiden Dark-Blöcken. Keine Endlos-Animation.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --mu-thumb:28px;                        /* Daumendurchmesser = Koordinatenraum der Ticks */
  --mu-hit:44px;                          /* Höhe der Interaktionsfläche */
  --mu-track-h:9px;
  --mu-track-edge:rgba(10,29,61,.16);     /* Track kräftiger zu den Polen … */
  --mu-track-mid:rgba(10,29,61,.05);      /* … dezenter Verlauf zur Mitte */
  --mu-tick-dot:rgba(10,29,61,.30);
  --mu-fill:rgba(30,156,150,.42);         /* Teal-Füllung Mitte→Daumen */
  --mu-thumb-bg:#FFFFFF;
  --mu-thumb-border:var(--navy);
  --mu-thumb-shadow:0 2px 10px rgba(10,29,61,.28);
  --mu-pole-on:var(--navy);               /* zugewandter Pol */
  --mu-mid-on:var(--gold-600);            /* Mittelmarke „leuchtet“ (statisch) */
  --mu-mid-glow:rgba(201,150,46,.30);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --mu-track-edge:rgba(230,236,247,.26);
    --mu-track-mid:rgba(230,236,247,.09);
    --mu-tick-dot:rgba(230,236,247,.40);
    --mu-fill:rgba(56,194,187,.50);
    --mu-thumb-bg:#1A2B49;
    --mu-thumb-border:#6ea6e8;
    --mu-thumb-shadow:0 2px 10px rgba(0,0,0,.50);
    --mu-pole-on:#ECF2FF;
    --mu-mid-on:#E0B453;
    --mu-mid-glow:rgba(224,180,83,.32);
  }
}
:root[data-theme="dark"]{
  --mu-track-edge:rgba(230,236,247,.26);
  --mu-track-mid:rgba(230,236,247,.09);
  --mu-tick-dot:rgba(230,236,247,.40);
  --mu-fill:rgba(56,194,187,.50);
  --mu-thumb-bg:#1A2B49;
  --mu-thumb-border:#6ea6e8;
  --mu-thumb-shadow:0 2px 10px rgba(0,0,0,.50);
  --mu-pole-on:#ECF2FF;
  --mu-mid-on:#E0B453;
  --mu-mid-glow:rgba(224,180,83,.32);
}

/* — Layout: Pole oben links/rechts (je ~⅓ Breite), Regler in voller Breite — */
.mu-duel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"a b" "s s";column-gap:clamp(48px,22%,220px);row-gap:2px;margin-bottom:2px}
.mu-pole{margin:0;max-width:none;font-family:var(--display);font-size:1.13rem;line-height:1.5;color:var(--text);
  display:flex;gap:10px;align-items:flex-start;
  transition:color .25s ease,opacity .25s ease,transform .25s ease}
.mu-pole-a{grid-area:a;text-align:left;transform-origin:left top}
.mu-pole-b{grid-area:b;text-align:right;transform-origin:right top;justify-content:flex-end}
.mu-pole-text{text-wrap:pretty}
.mu-mark{display:none}                     /* Richtungschips nur mobil (Position = Richtung auf Desktop) */
.mu-slider{grid-area:s;margin-top:14px}

/* — Gewichtung: der zugewandte Pol tritt vor, der abgewandte zurück — */
.mu-lean-a .mu-pole-a,.mu-lean-b .mu-pole-b{color:var(--mu-pole-on);font-weight:500}
.mu-lean-a .mu-pole-b,.mu-lean-b .mu-pole-a{color:var(--text-muted)}
.mu-l1.mu-lean-a .mu-pole-b,.mu-l1.mu-lean-b .mu-pole-a{opacity:.72}
.mu-l2.mu-lean-a .mu-pole-b,.mu-l2.mu-lean-b .mu-pole-a{opacity:.60}
.mu-l3.mu-lean-a .mu-pole-b,.mu-l3.mu-lean-b .mu-pole-a{opacity:.50}
.mu-l1.mu-lean-a .mu-pole-a,.mu-l1.mu-lean-b .mu-pole-b{transform:scale(1.015)}
.mu-l2.mu-lean-a .mu-pole-a,.mu-l2.mu-lean-b .mu-pole-b{transform:scale(1.03)}
.mu-l3.mu-lean-a .mu-pole-a,.mu-l3.mu-lean-b .mu-pole-b{transform:scale(1.045);font-weight:600}

/* — Track, Ticks, Mittelmarke, Füllung — */
.mu-hit{position:relative;height:var(--mu-hit)}
.mu-track{position:absolute;left:0;right:0;top:50%;height:var(--mu-track-h);
  transform:translateY(-50%);border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,var(--mu-track-edge),var(--mu-track-mid) 40% 60%,var(--mu-track-edge));
  box-shadow:inset 0 1px 2px rgba(10,29,61,.06)}
.mu-fill{position:absolute;top:0;bottom:0;left:50%;width:0;border-radius:999px;
  background:var(--mu-fill);opacity:0;
  transition:opacity .25s ease,left .18s ease,width .18s ease}
.mu-pair:not(.mu-untouched) .mu-fill{opacity:1}
.mu-tick{position:absolute;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--mu-tick-dot);transform:translate(-50%,-50%);
  left:calc((var(--t,0) / 6) * (100% - var(--mu-thumb)) + var(--mu-thumb) / 2)}
.mu-tick-mid{width:3px;height:19px;border-radius:2px;
  transition:background .25s ease,box-shadow .25s ease}
.mu-center .mu-tick-mid{background:var(--mu-mid-on);box-shadow:0 0 0 3px var(--mu-mid-glow)}
.mu-mid-label{position:absolute;left:50%;top:calc(50% + 15px);transform:translateX(-50%);
  font-family:var(--head);font-size:.66rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint);white-space:nowrap;pointer-events:none;
  transition:color .25s ease}
.mu-center .mu-mid-label{color:var(--mu-mid-on)}

/* — Der Regler selbst: nativer Range über der ganzen Trackfläche — */
.mu-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.mu-range::-webkit-slider-runnable-track{height:100%;background:transparent}
.mu-range::-moz-range-track{height:100%;background:transparent}
.mu-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:var(--mu-thumb);height:var(--mu-thumb);border-radius:50%;
  margin-top:calc((var(--mu-hit) - var(--mu-thumb)) / 2);
  background:radial-gradient(circle,var(--mu-thumb-border) 0 3px,var(--mu-thumb-bg) 4px);
  border:2px solid var(--mu-thumb-border);box-shadow:var(--mu-thumb-shadow);
  transition:transform .16s ease,box-shadow .16s ease,border-color .2s ease,background .2s ease}
.mu-range::-moz-range-thumb{width:var(--mu-thumb);height:var(--mu-thumb);border-radius:50%;
  background:radial-gradient(circle,var(--mu-thumb-border) 0 3px,var(--mu-thumb-bg) 4px);
  border:2px solid var(--mu-thumb-border);box-shadow:var(--mu-thumb-shadow);
  transition:transform .16s ease,box-shadow .16s ease,border-color .2s ease,background .2s ease}
.mu-range:hover::-webkit-slider-thumb{transform:scale(1.10)}
.mu-range:active::-webkit-slider-thumb{transform:scale(1.16)}
.mu-range:hover::-moz-range-thumb{transform:scale(1.10)}
.mu-range:active::-moz-range-thumb{transform:scale(1.16)}
.mu-range:focus-visible{outline:none}
.mu-range:focus-visible::-webkit-slider-thumb{box-shadow:var(--mu-thumb-shadow),0 0 0 4px var(--focus-ring)}
.mu-range:focus-visible::-moz-range-thumb{box-shadow:var(--mu-thumb-shadow),0 0 0 4px var(--focus-ring)}
/* Mitte bestätigt: der Daumen steht AUF der Mittelmarke — er übernimmt ihr Leuchten */
.mu-center .mu-range::-webkit-slider-thumb{box-shadow:var(--mu-thumb-shadow),0 0 0 4px var(--mu-mid-glow);border-color:var(--mu-mid-on);background:radial-gradient(circle,var(--mu-mid-on) 0 3px,var(--mu-thumb-bg) 4px)}
.mu-center .mu-range::-moz-range-thumb{box-shadow:var(--mu-thumb-shadow),0 0 0 4px var(--mu-mid-glow);border-color:var(--mu-mid-on);background:radial-gradient(circle,var(--mu-mid-on) 0 3px,var(--mu-thumb-bg) 4px)}
.mu-center .mu-range:focus-visible::-webkit-slider-thumb{box-shadow:var(--mu-thumb-shadow),0 0 0 4px var(--focus-ring)}
.mu-center .mu-range:focus-visible::-moz-range-thumb{box-shadow:var(--mu-thumb-shadow),0 0 0 4px var(--focus-ring)}
/* Unberührt: schwebender, entsättigter Daumen — Mitte NICHT vorausgewählt */
.mu-untouched .mu-range::-webkit-slider-thumb{background:var(--surface);
  border:2px dashed var(--border-strong);box-shadow:0 1px 5px rgba(10,29,61,.10)}
.mu-untouched .mu-range::-moz-range-thumb{background:var(--surface);
  border:2px dashed var(--border-strong);box-shadow:0 1px 5px rgba(10,29,61,.10)}

/* — Zustandszeile: sagt die Wahl in Worten (wortgleich mit aria-valuetext) — */
.mu-state{margin:16px 0 0;max-width:none;font-family:var(--head);font-size:.85rem;font-weight:600;
  text-align:center;color:var(--text-muted);min-height:1.35em;transition:color .2s ease}
.mu-lean-a .mu-state,.mu-lean-b .mu-state{color:var(--link)}
.mu-lean-a .mu-state::before{content:"← "}
.mu-lean-b .mu-state::after{content:" →"}
.mu-center .mu-state{color:var(--gold-ink)}
.mu-untouched .mu-state{color:var(--text-faint);font-weight:500}

/* — Mobil (<640px): Pole übereinander, Regler dazwischen, ←/→-Chips koppeln
     Text und Richtung; Gewichtung nur über Farbe/Dämpfung (keine Skalierung) — */
@media(max-width:640px){
  .mu-duel{grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "s" "b";row-gap:0;column-gap:0}
  .mu-pole{font-size:1.04rem;line-height:1.45}
  .mu-pole-b{margin-top:2px}
  .mu-slider{margin:12px 0 10px}
  .mu-mark{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;margin-top:1px;
    border-radius:50%;border:1.5px solid var(--border-strong);color:var(--text-faint);
    font-size:.82rem;line-height:1;font-family:var(--head);
    transition:color .25s ease,border-color .25s ease,background .25s ease}
  .mu-lean-a .mu-pole-a .mu-mark,.mu-lean-b .mu-pole-b .mu-mark{
    border-color:var(--link);color:var(--link);
    background:color-mix(in srgb,var(--teal) 12%,transparent)}
  .mu-pair.mu-l1 .mu-pole,.mu-pair.mu-l2 .mu-pole,.mu-pair.mu-l3 .mu-pole{transform:none}
}

@media print{
  .mu-range::-webkit-slider-thumb{box-shadow:none}
  .mu-fill{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Beta 2.5 · LANDING · „Ihr Führungsmuster" (.lm-*) — additiv
   Panorama aller 9 Muster (VAL-FM-001 §5) mit Sinnbildern auf der
   Startseite: Sektionskopf, 3 Achsen als reine Anzeige (keine Slider),
   3×3-Grid (Tablet 2 · Mobil 1), Guard + Brücke zur CTA. Farbfamilien
   nur als feine Akzente (Randlinie/Overline über die vorhandenen
   .muster-fam-*/.muster-var-*-Weichen: --mf/--mf-ink) — Valdea-Creme-
   Karten, bewusst KEINE Farbflächen-Kacheln (§8: keine Insights-Optik).
   Alle Farben aus bestehenden Tokens (Light + beide Dark-Blöcke unten).
   ══════════════════════════════════════════════════════════════════════ */
.lm{margin:clamp(56px,8vw,104px) 0 0}
.lm [data-reveal]{transition-delay:calc(var(--i,0) * 90ms)}
.lm-head{text-align:center;max-width:var(--maxw-text);margin:0 auto}
.lm-head .li-eyebrow{justify-content:center}
.lm-sub{margin:0 auto}
.lm-sub strong{font-family:var(--head);font-weight:600;color:var(--heading)}

/* — b) Drei Achsen kompakt (Spez §2) — reine Anzeige, keine Slider — */
.lm-achsen{max-width:820px;margin:clamp(26px,4vw,40px) auto 0}
.lm-achse{padding:16px 8px;display:grid;gap:10px}
.lm-achse + .lm-achse{border-top:1px solid var(--border)}
.lm-achse-kopf{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center}
.lm-achse-name{font-family:var(--head);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.lm-achse-frage{font-family:var(--display);font-style:italic;font-size:1.02rem;color:var(--text-muted)}
.lm-achse-pole{display:grid;grid-template-columns:minmax(0,1fr) minmax(36px,120px) minmax(0,1fr);align-items:start;gap:14px}
.lm-pol{display:grid;gap:2px;min-width:0}
.lm-pol b{font-family:var(--head);font-weight:700;font-size:.98rem;color:var(--heading)}
.lm-pol small{font-size:.82rem;line-height:1.45;color:var(--text-muted)}
.lm-pol-a{text-align:right;justify-items:end}
.lm-pol-b{text-align:left;justify-items:start}
.lm-pol-linie{position:relative;height:1.5px;border-radius:2px;margin-top:.68em;
  background:linear-gradient(90deg,var(--border-strong),color-mix(in srgb,var(--border-strong) 35%,transparent) 50%,var(--border-strong))}
.lm-pol-linie::before,.lm-pol-linie::after{content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%;
  transform:translateY(-50%);background:var(--border-strong)}
.lm-pol-linie::before{left:-1px}
.lm-pol-linie::after{right:-1px}
.lm-achsen-fine{margin:10px auto 0;text-align:center;max-width:none}
@media(max-width:560px){
  .lm-achse-pole{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:10px}
  .lm-pol b{font-size:.92rem}
  .lm-pol small{font-size:.78rem}
}

/* — c) Panorama: 9 Karten (Desktop 3×3 · Tablet 2-spaltig · Mobil 1) — */
.lm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(30px,5vw,46px)}
@media(max-width:980px){.lm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.lm-grid{grid-template-columns:1fr}}
.lm-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:26px 24px 24px;box-shadow:var(--shadow);text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.lm-card[data-reveal]{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,border-color .35s ease}
.lm-card[data-reveal].is-in{animation:vFadeUp .8s cubic-bezier(.22,.61,.36,1) backwards;animation-delay:calc(var(--i,0) * 90ms)}
.lm-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--mf,var(--border-strong));opacity:.5;transition:opacity .35s ease}
.lm-card.muster-fam-alle::before{background:linear-gradient(90deg,var(--muster-navy),var(--muster-teal),var(--muster-gold),var(--muster-kupfer))}
.lm-card:hover,.lm-card:focus-within{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.lm-card:hover::before,.lm-card:focus-within::before{opacity:1}
.lm-sym{display:block;line-height:0;margin-bottom:6px}
.lm-sym .sinnbild{opacity:.9;transition:opacity .35s ease,filter .35s ease,transform .35s ease}
.lm-card:hover .lm-sym .sinnbild,.lm-card:focus-within .lm-sym .sinnbild{opacity:1;transform:translateY(-2px);
  filter:saturate(1.18) drop-shadow(0 6px 14px color-mix(in srgb,var(--mf,var(--heading)) 22%,transparent))}
.lm-sinnname{font-family:var(--head);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mf-ink,var(--text-muted))}
.lm-name{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;line-height:1.15;color:var(--heading);margin:2px 0 0}
.lm-kern{margin:.45em 0 0;font-size:.93rem;line-height:1.6;color:var(--text-muted);max-width:30ch}

/* — Guard (§8: kein Ranking) + Brücke zur CTA — */
.lm-guard{margin:clamp(26px,4vw,40px) auto 0;max-width:var(--maxw-text);text-align:center;font-size:.92rem;line-height:1.6;
  color:var(--text-muted);padding:16px 22px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border)}
.lm-cta{margin-top:clamp(24px,4vw,36px);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.lm-bruecke{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.35;color:var(--heading);text-wrap:balance;max-width:none}
.lm-bruecke em{font-style:italic;color:var(--teal-700)}

/* Dark (beide Wege): Karten wie .li-card auf --surface-2, Guard invertiert,
   Brücken-Akzent auf den hellen Teal-Ton — Familientöne kommen bereits
   themerichtig aus den --muster-*-Token-Blöcken. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lm-card{background:var(--surface-2)}
  :root:not([data-theme="light"]) .lm-guard{background:var(--surface)}
  :root:not([data-theme="light"]) .lm-bruecke em{color:var(--omega-arc-1)}
}
:root[data-theme="dark"] .lm-card{background:var(--surface-2)}
:root[data-theme="dark"] .lm-guard{background:var(--surface)}
:root[data-theme="dark"] .lm-bruecke em{color:var(--omega-arc-1)}

/* Reduced motion: Eintritte laufen (Projekt-Policy, kein Loop) — nur der
   Hover-Lift ruht, analog .li-card. */
@media(prefers-reduced-motion:reduce){
  .lm-card:hover,.lm-card:focus-within{transform:none}
  .lm-card:hover .lm-sym .sinnbild,.lm-card:focus-within .lm-sym .sinnbild{transform:none}
}