/* ─────────────────────────────────────────────────────────────
   ATLAS, Gestaltung „Das leise Instrument“ (seit 14.10.2026)
   Eine Schrift (Archivo, lokal), Papier und zwei Tinten, Petrol als
   einziger Akzent. Abschnitte trennt nur der Raum, keine Linien,
   keine Schatten, keine Verläufe. Jede Kante sitzt auf einer von drei
   Linien: Rand, Textspalte, rechte Bühne. Die Seite läuft offline.
   ───────────────────────────────────────────────────────────── */

/* ── Schriften (SIL Open Font License, siehe schriften/OFL-*.txt) ──
   Überschriften: New York auf Apple-Geräten, sonst Newsreader (lokal).
   Text: Archivo (lokal). ── */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;
  src:url(schriften/newsreader-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:500;font-display:swap;
  src:url(schriften/newsreader-latin-500-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;
  src:url(schriften/newsreader-latin-ext-500-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/archivo-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url(schriften/archivo-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:italic;font-weight:400;font-display:swap;
  src:url(schriften/archivo-latin-400-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/archivo-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url(schriften/archivo-latin-ext-600-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+A720-A7FF}

:root{
  /* Papier, zwei Tinten, ein Akzent */
  /* Farben nach dem Vorbild „Ledgerly“: Stein, Waldgrün, Tinte */
  --bg:#EBE8E3;            /* Stein */
  --surface:#F5F3EF;
  --surface-2:#DFDBD4;
  --ink:#141A16;
  --muted:#5C6259;
  --line:#D3CEC7;          /* Leiterbahnen, Tabellen, Oberflächen-Ausschnitte */
  --accent:#2F5640;        /* Waldgrün */
  --accent-strong:#24442F;
  --on-accent:#FFFFFF;
  --mark:#DCE7DE;          /* Markierung der Fundstelle */
  /* dunkle Felder (Bühne, Schaufenster) */
  --night:#101417;
  --night-2:#181D22;
  --night-3:#222930;
  --rahmen:#1C2C22;        /* dunkles Grün: Rahmen und dunkle Felder */
  --rahmen-2:#24382B;
  --rahmen-tinte:#ECEBE1;
  --rahmen-leise:#A7AC9F;
  --rahmen-akzent:#B9D8C2;
  --night-ink:#EDEEEB;
  --night-muted:#B1B8BE;
  --night-accent:#9FD1AE;
  --night-line:#2E363D;
  --amber:#8A5A12;
  --amber-weich:#F4EBD8;

  --font:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --titel:ui-serif,"New York","Newsreader","Iowan Old Style",Georgia,serif;
  /* fünf Größen, mehr nicht */
  --step-small:clamp(.9375rem,.9rem + .15vw,1rem);       /* 15–16 */
  --step-body:clamp(1.125rem,1.05rem + .3vw,1.3125rem);  /* 18–21 */
  --step-lead:clamp(1.375rem,1.15rem + 1vw,2rem);        /* 22–32 */
  --step-head:clamp(2.25rem,1.4rem + 3.8vw,4.75rem);     /* 36–76 */
  --step-display:clamp(2.75rem,1rem + 4.6vw,5.25rem);    /* 44–84 */

  /* Raum */
  --rand:clamp(1.25rem,2.2vw,2rem);
  --spalt:clamp(.75rem,1.4vw,1.5rem);
  --abschnitt:clamp(5.5rem,3rem + 7vw,10.5rem);
  --kopf-h:72px;

  /* Bewegung */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms;
  --t-hover:180ms;
  --t-ui:240ms;
  --t-reveal:800ms;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#111612;
    --surface:#18201A;
    --surface-2:#1F2921;
    --ink:#ECEBE1;
    --muted:#A7AC9F;
    --line:#2C372F;
    --accent:#9FD1AE;
    --accent-strong:#B9D8C2;
    --on-accent:#0E1A12;
    --mark:#1F3326;
    --night:#07090B;
    --night-2:#0F1316;
    --night-3:#182025;
    --amber:#E2B061;
    --amber-weich:#2A2112;
    --rahmen:#0A110C;
  }
}
@media (prefers-contrast:more){
  :root{--muted:#30343A;--line:#9B978E}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root{--muted:#D3D7DB;--line:#5A646E}
}

/* ── Grundlagen ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:2rem}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:var(--step-body);line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-kerning:normal;font-variant-ligatures:common-ligatures;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
h1,h2,.display,.titel,.abschnitt__titel,.verzeichnis__name,.kontaktwege a > span:first-child,.einstieg__claim,
.aussage h3,.schritt h3,.referenz__text h2,.zeile-text h2,.kontakt-zeile__satz,.schaufenster__text h3{font-family:var(--font);font-weight:500;letter-spacing:-.035em}
.betont{font-family:var(--titel);font-style:italic;font-weight:500;color:var(--accent);letter-spacing:-.01em}
p,li,dd{text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
b,strong{font-weight:600}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--on-accent)}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sprungmarke{position:absolute;left:-999px;top:0;z-index:60;background:var(--accent);color:var(--on-accent);padding:.75rem 1rem;text-decoration:none}
.sprungmarke:focus{left:0}

/* ── Raster: ein Rand, zwölf Spalten, drei Ankerlinien ────── */
.rand{width:100%;max-width:1760px;margin-inline:auto;padding-inline:var(--rand)}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt)}
.raster > *{grid-column:1 / -1;min-width:0}
/* Ankerlinie B: die Textspalte; Ankerlinie C: die rechte Bühne */
@media (min-width:1100px){
  .an-b{grid-column:3 / span 5}
  .an-b-breit{grid-column:3 / span 8}
  .an-c{grid-column:8 / span 5}
  .an-b-c{grid-column:3 / -1}
}
@media (min-width:760px) and (max-width:1099px){
  .an-b,.an-b-breit,.an-b-c{grid-column:2 / span 10}
  .an-c{grid-column:2 / span 10}
}

/* ── Schriftgrößen ────────────────────────────────────────── */
.display{font-size:var(--step-display);line-height:1.04;letter-spacing:-.022em}
.titel{font-size:var(--step-head);line-height:1.04;letter-spacing:-.02em}
.lead{font-size:var(--step-lead);line-height:1.4;letter-spacing:-.005em}
.klein{font-size:var(--step-small);line-height:1.45}
.leise{color:var(--muted)}
.zahl{font-variant-numeric:tabular-nums}
.text{display:grid;gap:1em;max-width:62ch}
.text p{color:var(--muted)}
.text p:first-child,.text .voll{color:var(--ink)}

/* ── Knöpfe und Verweise ──────────────────────────────────── */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:0 1.5rem;border:0;border-radius:999px;
  background:var(--accent);color:var(--on-accent);
  font:600 var(--step-body)/1 var(--font);text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease;
}
.knopf:active{transform:scale(.97)}
.knopf--nacht{background:var(--night-accent);color:var(--night)}
.knopf--zwei{background:#FFFFFF;color:#141A16}
.knopf--klein{min-height:44px;padding:0 1.1rem;font-size:var(--step-small)}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{background:var(--accent-strong)}
  .knopf--zwei:hover{background:var(--surface)}
  .knopf--nacht:hover{background:#A2D8DD}
}
.verweis{
  color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:.07em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
  transition:text-decoration-color var(--t-hover) ease;
  display:inline-flex;align-items:center;min-height:44px;
}
@media (hover:hover) and (pointer:fine){.verweis:hover{text-decoration-color:currentColor}}
.handlung{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.75rem}

/* ── Kopf: Wortmarke, fünf Wörter, eine Handlung ──────────── */
.kopf{position:relative;z-index:30}
.kopf__innen{display:flex;align-items:center;gap:2rem;min-height:var(--kopf-h)}
.wortmarke{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:600;letter-spacing:.06em;min-height:44px}
.wortmarke svg{width:26px;height:26px;flex:none}
.nav{display:flex;gap:1.6rem;margin-left:auto}
.nav a{text-decoration:none;font-size:var(--step-small);min-height:44px;display:inline-flex;align-items:center;
  text-decoration-thickness:.07em;text-underline-offset:.3em}
.nav__kontakt{display:none!important}
.nav a[aria-current="page"]{text-decoration:underline}
@media (hover:hover) and (pointer:fine){.nav a:hover{text-decoration:underline}}
.menue-taste{display:none;margin-left:auto;background:none;border:0;min-height:44px;padding:0 .25rem;font-weight:600;font-size:var(--step-small);cursor:pointer}

@media (max-width:900px){
  .nav{display:none}
  .menue-taste{display:inline-flex;align-items:center;margin-left:0}
  .kopf__aktion{margin-left:auto}
  .kopf.ist-offen .nav__kontakt{display:inline-flex!important}
  .kopf.ist-offen .nav{
    display:flex;flex-direction:column;gap:0;position:fixed;inset:0;z-index:40;
    padding:calc(var(--kopf-h) + 1rem) var(--rand) 2rem;background:var(--bg);color:var(--ink);
  }
  .kopf.ist-offen .nav a{font-size:var(--step-lead);min-height:56px}
  .kopf.ist-offen .menue-taste{position:fixed;right:var(--rand);top:14px;z-index:41;color:var(--ink)}
  .kopf.ist-offen .wortmarke{position:fixed;left:var(--rand);top:14px;z-index:41;color:var(--ink)}
}

/* ── Abschnitte: getrennt nur durch Raum ──────────────────── */
.abschnitt{padding-block:var(--abschnitt) 0}
.abschnitt--nacht{background:var(--night);color:var(--night-ink);padding-block:var(--abschnitt)}
.abschnitt--nacht + .abschnitt{padding-top:var(--abschnitt)}
.abschnitt__titel{font-size:var(--step-head);line-height:1.04;letter-spacing:-.02em;margin-bottom:clamp(2rem,1.5rem + 2vw,3.5rem);max-width:16ch}

/* ── Bühne der Startseite: zwei Töne, Text unten links ────── */
.buehne{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:var(--spalt);min-height:max(640px,calc(100svh - var(--kopf-h)));background:var(--bg);color:var(--ink);max-width:1760px;margin-inline:auto;padding-inline:var(--rand)}
.buehne__text{
  display:flex;flex-direction:column;justify-content:center;gap:1.5rem;
  padding:clamp(2rem,1rem + 4vh,5rem) 0;
}
.buehne__text h1{max-width:none}
.buehne__titel{font-size:clamp(2.5rem,1rem + 3.4vw,4.25rem);line-height:1.02}
@media (max-width:900px){.buehne__titel .zeile{display:inline}.buehne__titel [data-zeile]{display:inline}.buehne__titel{text-wrap:balance}}
.buehne__text p{color:var(--muted);max-width:40ch}
.buehne__text .buehne__lead{color:var(--ink);max-width:34ch;margin-top:-.25rem}
@media (max-width:560px){.buehne__lead br{display:none}}

.buehne__geraet{display:grid;place-items:center;padding-block:clamp(1rem,.5rem + 3vh,3rem)}
@media (max-width:900px){
  .buehne{grid-template-columns:1fr;min-height:0}
  .buehne__text{padding-bottom:1rem}
  .buehne__geraet{padding-top:0}
}

/* Kopfzeile, die von unten aus ihrer Grundlinie steigt */
.zeilen .zeile{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.zeilen [data-zeile]{display:block}
@media (prefers-reduced-motion:no-preference){
  .js .zeilen [data-zeile]{transform:translateY(105%);animation:zeile-hoch 900ms var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 110ms + 150ms)}
  .js [data-steigt]{opacity:0;transform:translateY(16px);animation:steigt 700ms var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 90ms + 420ms)}
}
@keyframes zeile-hoch{to{transform:none}}
@keyframes steigt{to{opacity:1;transform:none}}

/* ── Abschnitte erscheinen in Leserichtung, einmal ────────── */
@media (prefers-reduced-motion:no-preference){
  .js [data-zeigen]{opacity:0;transform:translateY(22px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
  .js [data-zeigen].ist-da{opacity:1;transform:none}
  .js .blende{clip-path:inset(0 0 100% 0);transition:clip-path 1100ms var(--ease-in-out)}
  .js .blende img{transform:scale(1.1);transition:transform 1500ms var(--ease-soft)}
  .js .blende.ist-da{clip-path:inset(0)}
  .js .blende.ist-da img{transform:none}
}

/* ── Einstieg: schmale Spalte, viel Grund ─────────────────── */
.einstieg{display:grid;gap:1.1em}
@media (min-width:1100px){.einstieg{grid-column:3 / span 7;max-width:780px}}
.einstieg p{color:var(--muted)}
.einstieg p:first-child{color:var(--ink);font-weight:600}
.einstieg p{font-size:var(--step-lead);line-height:1.35;letter-spacing:-.01em}
.einstieg p:first-child{font-weight:400}
.einstieg__claim{font-size:var(--step-display);line-height:1.02;letter-spacing:-.025em;margin-top:clamp(4rem,3rem + 5vw,8rem)}
/* Wörter werden beim Scrollen voll (beide Tönungen bleiben lesbar) */
.js [data-woerter] .wort{color:var(--muted);transition:color 280ms ease}
.js [data-woerter] .wort.ist-voll{color:var(--ink)}

/* ── Schaufenster: dunkle Reihe, nur die Mitte leuchtet ───── */
.schaufenster{background:var(--surface);color:var(--ink);padding-block:clamp(4rem,3rem + 4vw,7rem);overflow:clip;margin-top:var(--abschnitt)}
.schaufenster__kopf{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2rem,1.5rem + 2vw,3rem)}
.schaufenster__kopf h2{font-size:var(--step-head);line-height:1.04;letter-spacing:-.02em;max-width:14ch}
.schaufenster__tasten{display:flex;gap:.5rem}
.schaufenster__tasten button{
  width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:var(--surface-2);color:var(--ink);transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out);
}
.schaufenster__tasten button:active{transform:scale(.94)}
.schaufenster__tasten button[disabled]{opacity:.35;cursor:default}
.schaufenster__tasten svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.schaufenster__tasten button:not([disabled]):hover{background:var(--line)}}
.reihe{
  display:flex;gap:clamp(1.5rem,4vw,4rem);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:calc(50vw - min(210px,43vw));padding-block:.5rem 1rem;cursor:grab;
}
.reihe::-webkit-scrollbar{display:none}
.reihe.ist-gezogen{cursor:grabbing;scroll-snap-type:none}
.reihe > li{flex:none;scroll-snap-align:center;width:min(420px,86vw);transition:opacity 420ms var(--ease-out),transform 520ms var(--ease-out)}
.reihe > li:not(.ist-aktiv){opacity:.38;transform:scale(.94)}
.schaufenster__text{margin-top:clamp(1.75rem,1rem + 2vw,2.5rem);min-height:7.5em}
@media (min-width:1100px){.schaufenster__text{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt)}}
.schaufenster__text > div{grid-column:3 / span 5;max-width:46ch}
.schaufenster__text h3{font-size:clamp(1.625rem,1.2rem + 1.6vw,2.25rem);line-height:1.15;margin-bottom:.4rem}
.schaufenster__text p{color:var(--muted)}
.schaufenster__text .marke-klein{color:var(--accent);font-weight:600;font-size:var(--step-small);margin-top:.5rem}

/* ── Gesteuerte Bühne: Aussagen links, Ausschnitt fixiert ─── */
.gesteuert{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt)}
.gesteuert__aussagen{grid-column:3 / span 4}
.gesteuert__buehne{grid-column:8 / span 5;position:relative}
.gesteuert__halter{background:var(--surface-2)!important;position:sticky;top:max(4.5rem,calc(50vh - 300px));height:min(82vh,600px);display:grid;place-items:center;background:var(--surface);padding:clamp(1rem,2vw,2rem)}
.zustand .ui{max-width:460px}
.gesteuert__titel{font-size:var(--step-head);line-height:1.04;letter-spacing:-.02em;margin-bottom:clamp(1rem,1vw,2rem)}
.aussage{min-height:88vh;display:flex;flex-direction:column;justify-content:center;gap:.75rem;padding-block:2rem}
.aussage:first-of-type{min-height:60vh;justify-content:flex-start;padding-top:12vh}
.aussage h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);line-height:1.15;letter-spacing:-.012em;color:var(--muted);transition:color 360ms ease}
.aussage p{color:var(--muted);max-width:40ch}
.aussage.ist-aktiv h3{color:var(--ink)}
.zustand{position:absolute;inset:clamp(1rem,2vw,2rem);display:grid;place-items:center;opacity:0;transform:translateY(12px);transition:opacity 420ms var(--ease-out),transform 520ms var(--ease-out);pointer-events:none}
.zustand.ist-aktiv{opacity:1;transform:none;pointer-events:auto}
@media (max-width:1099px){
  .gesteuert{display:flex;flex-direction:column;gap:1.25rem}
  .gesteuert__aussagen,.gesteuert__buehne,.gesteuert__halter{display:contents}
  .aussage,.aussage:first-of-type{min-height:0;padding:2.5rem 0 0}
  .aussage h3{font-size:clamp(1.625rem,1.2rem + 1.6vw,2.25rem);color:var(--ink)}
  .zustand{position:static;opacity:1;transform:none;pointer-events:auto;background:var(--surface);padding:1rem;margin-inline:calc(-1 * var(--rand))}
  .aussage:nth-child(1){order:1}.zustand:nth-child(1){order:2}
  .aussage:nth-child(2){order:3}.zustand:nth-child(2){order:4}
  .aussage:nth-child(3){order:5}.zustand:nth-child(3){order:6}
}
@media (prefers-reduced-motion:reduce){.zustand{transition:opacity 200ms ease;transform:none}}

/* ── Tafel: ein Bedienfeld mit Randnotizen ────────────────── */
.tafel{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);align-items:start}
.tafel__feld .ui__schalter{padding:2.1rem 0}
.tafel__titel{grid-column:1 / span 4;text-align:right;font-size:clamp(1.75rem,1rem + 1.6vw,2.5rem);line-height:1.1;letter-spacing:-.015em;margin-bottom:2rem;hyphens:manual}
.tafel__links,.tafel__rechts{display:grid;gap:clamp(2rem,4vw,4.5rem);padding-top:3rem}
.tafel__links{grid-column:1 / span 4;text-align:right;justify-items:end}
.tafel__feld{grid-column:5 / span 4;grid-row:1 / span 2}
.tafel__rechts{grid-column:9 / span 4}
.tafel__titel + .tafel__links{grid-row:2}
@media (min-width:1100px){
  .tafel.ist-ausgerichtet .tafel__links,.tafel.ist-ausgerichtet .tafel__rechts{position:relative;display:block;padding-top:0}
  .tafel.ist-ausgerichtet .notiz{position:absolute;left:0;right:0}
  .tafel.ist-ausgerichtet .tafel__links .notiz{left:auto;right:0}
  .tafel.ist-ausgerichtet .tafel__links{grid-row:1 / span 2}
  .tafel.ist-ausgerichtet .tafel__titel{position:absolute;margin:0;width:calc((100% - 11 * var(--spalt)) / 3 + 3 * var(--spalt))}
}
.notiz{max-width:32ch;border:0;background:none;padding:0;text-align:inherit;cursor:default}
.notiz h3{font-size:var(--step-body);font-weight:600;margin-bottom:.3rem}
.notiz p{color:var(--muted)}
@media (max-width:1099px){
  .tafel{display:flex;flex-direction:column}
  .tafel__feld{order:1}.tafel__rechts{order:2}.tafel__links{order:3}
  .tafel__titel{text-align:left;margin-bottom:1.5rem}
  .tafel__feld{margin-bottom:2rem;max-width:420px}
  .tafel__links,.tafel__rechts{text-align:left;justify-items:start;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0;gap:1.75rem var(--spalt)}
  .tafel__rechts{margin-top:0}
  .tafel__links{margin-top:1.75rem}
}
@media (max-width:560px){.tafel__links,.tafel__rechts{grid-template-columns:1fr}}

/* ── Verzeichnis: große Zeilen, Bild erscheint daneben ────── */
.verzeichnis{position:relative;display:grid}
.verzeichnis a{display:grid;gap:.35rem;width:60%;padding-block:clamp(.9rem,.6rem + 1vw,1.5rem);text-decoration:none}
.verzeichnis__name{font-size:clamp(1.75rem,1.2rem + 2.2vw,3.25rem);line-height:1.08;letter-spacing:-.02em;transition:color var(--t-hover) ease}
.verzeichnis__satz{color:var(--muted)}
.verzeichnis img,.verzeichnis .illu{position:absolute;right:0;top:0;width:36%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--t-ui) ease;pointer-events:none}
.verzeichnis li:first-child img,.verzeichnis li:first-child .illu{opacity:1}
.verzeichnis:has(a:hover,a:focus-visible) li img,.verzeichnis:has(a:hover,a:focus-visible) li .illu{opacity:0}
.verzeichnis li:has(a:hover,a:focus-visible) img,.verzeichnis li:has(a:hover,a:focus-visible) .illu{opacity:1}
@media (hover:hover) and (pointer:fine){.verzeichnis:hover a:not(:hover) .verzeichnis__name{color:var(--muted)}}
@media (max-width:900px){
  .verzeichnis{gap:2.5rem}
  .verzeichnis a{width:auto;padding:0}
  .verzeichnis img,.verzeichnis .illu{position:static;width:100%;height:auto;aspect-ratio:3/2;opacity:1;order:-1;margin-bottom:.5rem}
}

/* ── Namen in Spalten ─────────────────────────────────────── */
.namen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt)}
.namen__titel{grid-column:1 / span 2;font-size:var(--step-lead);line-height:1.25}
.namen__spalten{grid-column:3 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem var(--spalt);align-items:start}
.namen__spalten li{font-size:var(--step-lead);line-height:1.5}
.namen__spalten li:first-child{color:var(--muted)}
@media (max-width:1099px){
  .namen{display:block}
  .namen__titel{margin-bottom:1.5rem}
  .namen__spalten{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem}
  .namen__spalten li{font-size:var(--step-body)}
}

/* ── Brief ────────────────────────────────────────────────── */
.brief{max-width:720px;margin-inline:auto;display:grid;gap:1.1em;padding-block:clamp(1rem,.5rem + 3vw,3rem)}
.brief__bild{width:56px;height:56px;border-radius:50%;object-fit:cover}
.brief p{color:var(--ink);font-size:var(--step-lead);line-height:1.4;letter-spacing:-.01em}
.brief .brief__rolle{font-size:var(--step-small);letter-spacing:0}
.brief mark{background:var(--mark);color:inherit;padding:0 .12em}
.brief p.brief__name{font-style:italic;margin-top:.5em}
.brief__rolle{color:var(--muted);font-size:var(--step-small)}

/* ── Kontaktzeile ─────────────────────────────────────────── */
.kontakt-zeile{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);align-items:start}
.kontakt-zeile__satz{grid-column:1 / span 6;font-size:clamp(1.75rem,1rem + 2vw,2.25rem);line-height:1.15;letter-spacing:-.015em}
.kontakt-zeile__bild{grid-column:8 / span 2;aspect-ratio:1;object-fit:cover;width:100%;max-width:220px}
.kontakt-zeile__wege{grid-column:10 / span 3;display:grid;gap:.25rem;align-content:start}
.kontakt-zeile__wege p:first-child{font-weight:600;margin-bottom:.5rem}
@media (max-width:900px){
  .kontakt-zeile{grid-template-columns:96px 1fr;gap:1.5rem 1rem}
  .kontakt-zeile__satz{grid-column:1 / -1}
  .kontakt-zeile__bild{grid-column:1;max-width:96px}
  .kontakt-zeile__wege{grid-column:2}
}

/* ── Fuß: eine leise Zeile ────────────────────────────────── */
.fuss{margin-top:clamp(6rem,4rem + 6vw,10rem)}
.fuss__zeile{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem 2rem;align-items:baseline;padding-block:1.5rem 2rem;font-size:var(--step-small)}
.fuss__zeile > :first-child{color:var(--muted)}
.fuss__mitte{display:flex;flex-wrap:wrap;gap:0 1.5rem;justify-content:center}
.fuss__rechts{display:flex;flex-wrap:wrap;gap:0 1.5rem;justify-content:flex-end;color:var(--muted)}
.fuss a{text-decoration:none;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){.fuss a:hover{text-decoration:underline;text-underline-offset:.25em}}
@media (max-width:760px){
  .fuss{margin-top:20svh}
  .fuss__zeile{grid-template-columns:1fr;gap:.25rem}
  .fuss__mitte,.fuss__rechts{justify-content:flex-start}
}

/* ── Unterseiten ──────────────────────────────────────────── */
.seitenkopf{padding-top:clamp(5rem,3rem + 8vh,10rem)}
.seitenkopf h1{font-size:clamp(2.125rem,.9rem + 5vw,5.25rem);line-height:1.02;letter-spacing:-.035em}
.seitenkopf h1 .zeile{display:block}
.seitenkopf .lead{margin-top:clamp(1.25rem,1rem + 1vw,2rem);max-width:36ch;color:var(--muted)}
.seitenkopf .handlung{margin-top:2rem}

/* Zeilen für längeren Text: Titel auf B, Text auf C */
.zeile-text{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:1rem;align-items:start}
.zeile-text + .zeile-text{margin-top:clamp(4.5rem,3rem + 5vw,8rem)}
.zeile-text__kopf p{font-size:var(--step-lead);line-height:1.3;letter-spacing:-.01em}
.zeile-text > h2,.zeile-text > .zeile-text__kopf{grid-column:3 / span 4}
.zeile-text > h2,.zeile-text__kopf h2{font-size:clamp(1.875rem,1.2rem + 2.4vw,3.25rem);line-height:1.08;letter-spacing:-.018em}
.zeile-text__kopf{display:grid;gap:1rem;align-content:start}
.zeile-text__kopf p{color:var(--muted)}
.zeile-text > .zeile-text__rumpf{grid-column:8 / span 5;display:grid;gap:1.1em}
.zeile-text__rumpf > p{color:var(--muted)}
.zeile-text__rumpf > p:first-child{color:var(--ink)}
@media (max-width:1099px){
  .zeile-text > h2,.zeile-text > .zeile-text__kopf,.zeile-text > .zeile-text__rumpf{grid-column:1 / -1}
}
@media (min-width:760px) and (max-width:1099px){
  .zeile-text > h2,.zeile-text > .zeile-text__kopf,.zeile-text > .zeile-text__rumpf{grid-column:2 / span 10}
}

/* Listen ohne Zeichen: Lücke statt Linie, fettes Stichwort */
.liste{display:grid;gap:1.1rem}
.liste li{color:var(--muted)}
.liste b{color:var(--ink)}
.liste--gross{gap:.6rem}
.liste--gross li{font-size:var(--step-lead);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.stichworte{display:flex;flex-wrap:wrap;gap:.5rem}
.stichworte li{background:var(--surface);padding:.4rem .7rem;font-size:var(--step-small);color:var(--ink)}
.unterzeile{font-size:var(--step-small);font-weight:600;color:var(--muted);margin-top:.75rem}

/* Bilder: eckig, ohne Rahmen und Schatten */
.bild img{width:100%}
.bild figcaption{margin-top:.6rem;font-size:var(--step-small);color:var(--muted)}
.bild--breit{grid-column:3 / -1}
@media (max-width:1099px){.bild--breit{grid-column:1 / -1}}
.bild--21-9 img{aspect-ratio:21/9;object-fit:cover}
.bild--3-2 img{aspect-ratio:3/2;object-fit:cover}
.bild--4-5 img{aspect-ratio:4/5;object-fit:cover}
@media (max-width:620px){.bild--21-9 img{aspect-ratio:4/3}}
@media (prefers-color-scheme:dark){.bild img,.kontakt-zeile__bild,.brief__bild{filter:brightness(.9)}}

/* Hinweis: eine Tonstufe statt Rahmen */
.hinweis{background:var(--surface);padding:1.1rem 1.25rem;color:var(--muted)}
.hinweis b{color:var(--ink)}

/* Schritte: Reihenfolge durch Position, nicht durch Nummern */
.schritte{display:grid;gap:clamp(2.5rem,2rem + 2vw,4rem)}
.schritt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:.5rem}
.schritt h3{grid-column:3 / span 4;font-size:clamp(1.875rem,1.2rem + 2.4vw,3.25rem);line-height:1.08;letter-spacing:-.018em}
.schritt > div{grid-column:8 / span 5;display:grid;gap:.4rem}
.schritt p{color:var(--muted)}
.schritt .dauer{color:var(--ink);font-weight:600;font-size:var(--step-small)}
@media (max-width:1099px){.schritt h3,.schritt > div{grid-column:1 / -1}}

/* Tabelle: hier dürfen Linien sein */
.tabelle-huelle{overflow-x:auto}
.tabelle{width:100%;border-collapse:collapse;font-size:var(--step-body);min-width:620px;font-variant-numeric:tabular-nums}
.tabelle th,.tabelle td{text-align:left;padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.tabelle th{font-size:var(--step-small);font-weight:600;color:var(--muted)}
.tabelle td{color:var(--muted)}
.tabelle td:first-child{color:var(--ink);font-weight:600}

/* Referenzen: Bildschirm links, Text rechts */
.referenz{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:1.5rem;align-items:start}
.referenz + .referenz{margin-top:clamp(4.5rem,3rem + 5vw,8rem)}
.referenz__bild{grid-column:1 / span 6}
.referenz__bild img{width:100%;background:var(--surface)}
.referenz__text{grid-column:8 / span 5;display:grid;gap:1em}
.referenz__text h2{font-size:clamp(1.875rem,1.2rem + 2.4vw,3.25rem);line-height:1.08;letter-spacing:-.018em}
.referenz__text > p{color:var(--muted)}
@media (max-width:1099px){.referenz__bild,.referenz__text{grid-column:1 / -1}}

/* Vorschlagszeile auf der Seite für einen Kunden */
.vorschlag{font-size:var(--step-small);color:var(--muted);padding-block:.75rem;background:var(--mark);border:0}
.vorschlag b{color:var(--ink)}
.vorschlag .rand{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;justify-content:space-between}
.seite--vorschlag .buehne{min-height:max(620px,calc(100svh - 7rem))}

/* Fragen und Antworten: nebeneinander statt aufklappen */
.fragen{display:grid;gap:clamp(2rem,1.5rem + 2vw,3rem)}
.fragen > div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:.5rem}
.fragen dt{grid-column:3 / span 4;font-size:var(--step-lead);line-height:1.3;letter-spacing:-.005em}
.fragen dd{grid-column:8 / span 5;color:var(--muted)}
@media (max-width:1099px){.fragen dt,.fragen dd{grid-column:1 / -1}}
@media (min-width:760px) and (max-width:1099px){.fragen dt,.fragen dd{grid-column:2 / span 10}}

/* Schluss jeder Unterseite: eine Einladung, ein Knopf */
.schluss{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:1.25rem}
.schluss > *{grid-column:3 / span 7}
.schluss h2{font-size:var(--step-head);line-height:1.04;letter-spacing:-.02em;max-width:16ch}
.schluss p{color:var(--muted);max-width:44ch}
@media (max-width:1099px){.schluss > *{grid-column:1 / -1}}
@media (min-width:760px) and (max-width:1099px){.schluss > *{grid-column:2 / span 10}}

/* Belege: Prüfpunkt, Ergebnis, Folge */
.beleg-ja{color:var(--accent);font-weight:600}
.beleg-teils{color:var(--amber);font-weight:600}
.beleg-nein{color:#A3392C;font-weight:600}
@media (prefers-color-scheme:dark){.beleg-nein{color:#F08A7A}}

/* Abschnitt mit Raster */
.abschnitt > .rand.raster > .an-b-c + .an-b-c{margin-top:2rem}

/* Kontaktwege: große Zeilen zum Antippen */
.kontaktwege{display:grid}
.kontaktwege a{display:grid;gap:.25rem;padding-block:clamp(1rem,.75rem + 1vw,1.6rem);text-decoration:none}
.kontaktwege a > span:first-child{font-size:clamp(1.875rem,1.2rem + 2.4vw,3.25rem);line-height:1.08;letter-spacing:-.018em;transition:color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.kontaktwege:hover a:not(:hover) > span:first-child{color:var(--muted)}}

/* Testfälle: große Knöpfe, die direkt in die Vorschau führen */
.testfaelle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.testfall{
  border-radius:var(--rund-gross);display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem 1rem;min-height:96px;
  padding:1.1rem 1.25rem;background:var(--surface);color:var(--ink);text-decoration:none;
  transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out);
}
.testfall:active{transform:scale(.985)}
.testfall b{font-weight:600;letter-spacing:-.01em;font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);line-height:1.15}
.testfall span{grid-column:1;color:var(--muted);font-size:var(--step-small)}
.testfall i{grid-column:2;grid-row:1 / span 2;font-style:normal;font-weight:600;font-size:var(--step-small);background:var(--accent);color:var(--on-accent);min-height:44px;padding:0 1rem;display:inline-flex;align-items:center;border-radius:999px}
@media (hover:hover) and (pointer:fine){.testfall:hover{background:var(--surface-2)}}
@media (max-width:760px){.testfaelle{grid-template-columns:1fr}}

/* Kontakt ohne Hürde: vorbereitete E-Mails als Knöpfe */
.kontaktknoepfe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.kontaktknoepfe .testfall i{background:var(--surface-2);color:var(--ink)}
.kontaktknoepfe .testfall:first-child i{background:var(--accent);color:var(--on-accent)}
@media (max-width:1000px){.kontaktknoepfe{grid-template-columns:1fr}}

/* Ansprechpartner auf der Kontaktseite */
.ansprechpartner{display:flex;align-items:center;gap:1rem;margin-top:2rem}
.ansprechpartner img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.ansprechpartner figcaption{display:grid;line-height:1.3}
.ansprechpartner span{color:var(--muted);font-size:var(--step-small)}

/* Kennzeichnung im Bild statt darunter (etwa „Symbolbild“) */
.bild--plakette{position:relative}
.bild--plakette figcaption{position:absolute;left:.75rem;bottom:.75rem;margin:0;background:rgba(20,26,22,.96);color:#FFFFFF;border-radius:999px;padding:.3rem .75rem;font-size:13px;line-height:1.3}

/* Rechtstexte */
.recht{display:grid;gap:1rem;max-width:62ch}
.recht h2{font-size:var(--step-lead);margin-top:1.5rem}
.recht p{color:var(--muted)}
.recht dl{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.5rem}
.recht dt{color:var(--muted)}
@media (max-width:560px){.recht dl{grid-template-columns:1fr}.recht dd{margin-bottom:.5rem}}

/* ── Schaubild „Nichts verlässt das Haus“ ─────────────────── */
.schaubild{
  --sb-karte:#FBFAF7;--sb-kachel:#FFFFFF;--sb-feld:#EEF2EC;--sb-weich:#DCE9DF;--sb-strich:#9CC4A8;--sb-gestrichelt:#B9C6BC;--sb-leiste:#F3F2ED;
  background:var(--sb-karte);border-radius:28px;padding:clamp(1.1rem,.8rem + 1.2vw,1.9rem);
  box-shadow:0 36px 70px -48px rgba(20,26,22,.38),0 0 0 1px rgba(20,26,22,.04); /* taste-skill-ignore: schwebende Karte nach Entwurf von Alex */
}
@media (prefers-color-scheme:dark){
  .schaubild{--sb-karte:var(--surface);--sb-kachel:var(--surface-2);--sb-feld:#26332A;--sb-weich:#1F3326;--sb-strich:#4E7A5C;--sb-gestrichelt:#435246;--sb-leiste:var(--surface-2)}
}
.schaubild svg{display:block;width:100%;height:auto;max-width:860px;margin-inline:auto;overflow:visible}
.schaubild text{font-family:var(--font);text-anchor:middle}
.schaubild .s-links{text-anchor:start}
.schaubild .s-kachel{fill:var(--sb-kachel)}
.schaubild .s-kachel--akzent{fill:var(--sb-weich);stroke:var(--sb-strich);stroke-width:1.5}
.schaubild .s-feld{fill:var(--sb-feld)}
.schaubild .s-feld--akzent{fill:var(--accent)}
.schaubild .s-feld--still{fill:var(--sb-feld)}
.schaubild .s-glyph,.schaubild .s-wand-glyph,.schaubild .s-wolke-glyph{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.schaubild .s-glyph{stroke:var(--accent)}
.schaubild .s-glyph--hell{stroke:var(--on-accent)}
.schaubild .s-marke{fill:var(--accent);font-size:14px;font-weight:600;letter-spacing:.08em;text-anchor:start}
.schaubild .s-titel{fill:var(--ink);font-size:15.5px;font-weight:600}
.schaubild .s-unter{fill:var(--muted);font-size:12.5px}
.schaubild .s-weg{fill:none;stroke:var(--accent);stroke-width:1.6}
.schaubild .s-punkt{fill:var(--accent)}
.schaubild .s-versuch{fill:none;stroke:var(--sb-gestrichelt);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:5 5}
.schaubild .s-wand{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.schaubild .s-wand-ring{fill:var(--sb-kachel);filter:drop-shadow(0 6px 10px rgba(28,44,34,.12))} /* taste-skill-ignore: weißer Ring um das Firewall-Schild nach Entwurf von Alex */
.schaubild .s-wand-feld{fill:var(--sb-weich)}
.schaubild .s-wand-glyph{stroke:var(--accent)}
.schaubild .s-wand-text{fill:var(--accent);font-size:14px;font-weight:600}
.schaubild .s-wand-unter{fill:var(--muted);font-size:12.5px}
.schaubild .s-wolke{fill:none;stroke:var(--sb-gestrichelt);stroke-width:1.5;stroke-dasharray:6 6}
.schaubild .s-wolke-glyph{stroke:var(--muted)}
.schaubild .s-sperre circle{fill:var(--accent)}
.schaubild .s-sperre path{fill:none;stroke:var(--on-accent);stroke-width:2;stroke-linecap:round}
.schaubild__hoch .s-titel{font-size:16px}
.schaubild__hoch .s-unter{font-size:13.5px}
.schaubild__legende{display:flex;align-items:center;gap:.9rem;margin-top:clamp(1.25rem,1rem + 1vw,1.75rem);padding:.8rem 1.1rem .8rem .8rem;border-radius:18px;background:var(--sb-leiste);color:var(--muted);font-size:var(--step-small);line-height:1.45;text-align:left}
.schaubild__schild{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--sb-kachel);color:var(--accent)}
.schaubild__schild svg{width:20px;height:20px}
.schaubild .schaubild__hoch{display:none;max-width:380px}
@media (max-width:900px){.schaubild .schaubild__quer{display:none}.schaubild .schaubild__hoch{display:block}}

/* ─────────────────────────────────────────────────────────────
   Rahmen nach dem Vorbild „Ledgerly“: dunkles Petrol außen,
   ein helles Blatt mit runden Ecken, dunkle Felder darin.
   ───────────────────────────────────────────────────────────── */
body{background:var(--rahmen)}
.blatt{background:var(--bg);color:var(--ink);border-radius:clamp(14px,1.6vw,26px);margin:clamp(6px,.7vw,10px);overflow:clip;padding-bottom:var(--abschnitt)}


/* Startbereich: zentriert, Leiterbahnen im Hintergrund */
.held{position:relative;padding:clamp(3rem,2rem + 5vw,7rem) var(--rand) clamp(2rem,1rem + 3vw,4rem);isolation:isolate}
.held__linien{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.held__linien path{fill:none;stroke:var(--line);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.held__linien rect{fill:var(--bg);stroke:var(--line);stroke-width:1.3}
.held__linien circle{fill:var(--line)}
.held__mitte{display:grid;justify-items:center;text-align:center;gap:1.25rem;max-width:80rem;margin-inline:auto}
.held__titel{font-size:clamp(2.5rem,1rem + 4.4vw,5.5rem);line-height:1.02;letter-spacing:-.045em}
.held__titel .zeile{display:block}
@media (max-width:760px){.held__titel .zeile,.held__titel [data-zeile]{display:inline}.held__titel{text-wrap:balance}}
.held__unter{font-size:var(--step-lead);line-height:1.35;color:var(--muted);max-width:32ch}
.held__unter--zwei{max-width:none;text-wrap:balance}
.handlung--mitte{justify-content:center}
.held__unten{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(3rem,2rem + 5vw,7rem)}
.held__satz{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.35;letter-spacing:-.01em;max-width:24ch}
.held__satz span{color:var(--muted)}
.held__karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;justify-self:end;width:min(100%,460px)}
@media (max-width:1000px){
  .held__unten{grid-template-columns:1fr;justify-items:center;text-align:center}
  .held__satz{order:2}
  .held__karten{justify-self:center;order:3}
}

/* Der ATLAS-Server als Gegenstand */
.tresor{position:relative;display:grid;justify-items:center;gap:1.1rem;padding-top:2.75rem}
.tresor__koerper{
  width:clamp(150px,14vw,210px);aspect-ratio:1;border-radius:28%;display:grid;place-items:center;
  background:linear-gradient(150deg,#F4EDE0 0%,#E2D5BF 46%,#CBB894 100%); /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */
  box-shadow:inset 0 2px 0 rgba(255,255,255,.85),inset 0 -10px 22px rgba(120,95,55,.28),0 34px 50px -26px rgba(60,45,20,.55),0 10px 0 -2px #B9A27C; /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */
  transform:rotate(-8deg);
}
.tresor__koerper svg{width:34%;height:auto;transform:rotate(8deg)}
.tresor__schatten{width:70%;height:18px;border-radius:50%;background:rgba(40,30,15,.18);filter:blur(10px);margin-top:-6px}
.tresor__live{position:absolute;top:0;left:50%;transform:translateX(-62%);display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  background:#FFFFFF;color:#141A16;border:1px solid var(--line);border-radius:999px;padding:.35rem .75rem;font-size:13px;font-weight:600} /* taste-skill-ignore: Etikett am Tresor */
.tresor__live i{width:7px;height:7px;border-radius:50%;background:#3D8C56;box-shadow:0 0 0 3px rgba(61,140,86,.18)} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */
@media (prefers-reduced-motion:no-preference){.tresor__live i{animation:kugel-punkt 2.4s infinite}}

/* kleine dunkle Programmkarten */
.minikarte{background:var(--rahmen);color:var(--rahmen-tinte);border-radius:14px;padding:.9rem 1rem;display:grid;gap:.35rem;align-content:start;text-align:left;font-size:13.5px;line-height:1.4}
.minikarte small{color:var(--rahmen-leise);font-size:12.5px}
.minikarte b{font-size:15px;font-weight:600}
.minikarte .gross{font-size:34px;line-height:1;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--rahmen-akzent)}
.minikarte .chip{justify-self:start;background:rgba(185,216,194,.16);color:var(--rahmen-akzent);border-radius:999px;padding:.2rem .55rem;font-size:12px;font-weight:600}

/* dunkle Felder im Blatt */
.feld-dunkel{background:var(--rahmen);color:var(--rahmen-tinte);border-radius:clamp(14px,1.6vw,26px);margin-inline:var(--rand);padding:clamp(3.5rem,2rem + 6vw,8rem) clamp(1.25rem,1rem + 4vw,5rem);position:relative;overflow:hidden}
.feld-dunkel .betont{color:var(--rahmen-akzent)}
.feld-dunkel .leise,.feld-dunkel p{color:var(--rahmen-leise)}
.grosssatz{font-size:clamp(1.875rem,1rem + 3.2vw,4rem);line-height:1.12;letter-spacing:-.035em;text-align:center;max-width:22ch;margin-inline:auto;color:var(--rahmen-tinte)!important}
.grosssatz .rest{color:var(--rahmen-leise)}
.grosssatz__rest{text-align:center;font-size:var(--step-lead);line-height:1.35;max-width:30ch;margin:1.5rem auto 0;color:var(--rahmen-leise)}
.symbolreihe{display:inline-flex;gap:.18em;vertical-align:-.12em;margin-inline:.15em}
.symbolreihe i{width:1.05em;height:1.05em;border-radius:.26em;display:inline-grid;place-items:center;background:#ECE3D2;color:var(--rahmen)}
.symbolreihe i:nth-child(2){background:var(--rahmen-akzent)}
.symbolreihe i:nth-child(3){background:#ECEBE1}
.symbolreihe svg{width:.58em;height:.58em}
.zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(3rem,2rem + 4vw,6rem) auto 0;max-width:960px;text-align:center}
.zahlen > div{padding:.5rem 1rem}
.zahlen > div + div{box-shadow:-1px 0 0 rgba(236,235,225,.18)} /* taste-skill-ignore: Trenner der Zahlenreihe */
.zahlen dt{font-size:clamp(2.5rem,1.5rem + 3vw,4.5rem);line-height:1;letter-spacing:-.04em;color:var(--rahmen-tinte);font-variant-numeric:tabular-nums}
.zahlen dd{margin-top:.6rem;color:var(--rahmen-leise);font-size:var(--step-small)}
@media (max-width:620px){.zahlen{grid-template-columns:1fr;gap:1.5rem}.zahlen > div + div{box-shadow:none}}

/* Ausprobieren: Kugel und Testfälle im dunklen Feld */
.feld-dunkel--licht{background:
  radial-gradient(60% 50% at 85% 10%,rgba(185,216,194,.16),transparent 70%), /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */
  radial-gradient(50% 45% at 10% 95%,rgba(236,227,210,.10),transparent 70%),var(--rahmen)} /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */
.probe__kopf{text-align:center;display:grid;gap:.9rem;justify-items:center;margin-bottom:clamp(2rem,1.5rem + 2vw,3.5rem)}
.probe__kopf h2{font-size:var(--step-head);line-height:1.02;color:var(--rahmen-tinte)}
.probe__kopf p{max-width:40ch;font-size:var(--step-lead);line-height:1.35}
.probe__geraet{display:grid;justify-items:center}
.probe__geraet .geraet{background:#121A14;box-shadow:inset 0 0 0 1px rgba(185,216,194,.14)} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */
.probe__unter{text-align:center;color:var(--rahmen-tinte)!important;font-size:var(--step-lead);margin:clamp(3rem,2rem + 3vw,5rem) 0 1.5rem}
.feld-dunkel .testfall{background:var(--surface);color:var(--ink)}
.feld-dunkel .testfall span{color:var(--muted)}
.feld-dunkel .testfaelle{max-width:1100px;margin-inline:auto}

/* Einladung am Ende: zentriert, ein Zeichen, zwei Knöpfe */
.einladung{text-align:center;display:grid;justify-items:center;gap:1.25rem;padding-inline:var(--rand)}
.einladung__zeichen{width:56px;height:56px;border-radius:16px;background:var(--accent);display:grid;place-items:center}
.einladung__zeichen svg{width:28px;height:28px}
.einladung h2{font-size:var(--step-head);line-height:1.02;max-width:18ch}
.einladung p{color:var(--muted);font-size:var(--step-lead);max-width:34ch}

/* Fuß auf dem Rahmen: Spalten und der Name riesig */
.fuss{margin-top:0;color:var(--rahmen-tinte);overflow:hidden}
.fuss__oben{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:2rem;padding-block:clamp(3rem,2rem + 3vw,5rem) 2rem}
.fuss__oben p{color:var(--rahmen-leise);max-width:30ch;font-size:var(--step-small)}
.fuss__oben h3{font-size:var(--step-small);font-weight:600;color:var(--rahmen-leise);margin-bottom:.5rem}
.fuss__oben ul{display:grid}
.fuss a{color:var(--rahmen-tinte)}
.fuss__name{font-size:clamp(6rem,2rem + 22vw,26rem);line-height:.78;letter-spacing:-.06em;font-weight:600;color:rgba(236,235,225,.08);text-align:center;margin-bottom:-.12em;user-select:none}
.fuss__zeile{color:var(--rahmen-leise)}
.fuss__zeile > :first-child{color:var(--rahmen-leise)}
.fuss__rechts{color:var(--rahmen-leise)}
/* Am Handy: eine Spalte, jede Zeile über die ganze Breite und gut zu treffen (wie eine Liste in den iOS-Einstellungen) */
@media (max-width:760px){
  .fuss__oben{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .fuss__oben h3{margin-bottom:.6rem;padding-left:1.1rem}
  .fuss__oben ul{padding-inline:1.1rem;border-radius:var(--rund-gross);background:rgba(236,235,225,.06)}
  .fuss__oben li + li{box-shadow:0 -1px 0 rgba(236,235,225,.1)} /* taste-skill-ignore: Trennlinie der Liste */
  .fuss__oben ul a{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;min-height:58px;font-size:1.25rem;line-height:1.25}
  .fuss__oben ul a::after{content:"";flex:none;width:.45em;height:.45em;margin-right:.2em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.45}
}

/* ── Kugel im Startbereich ─────────────────────────────────── */
.held__unten{align-items:center}
.held__probe{display:grid;justify-items:center;width:min(560px,100%)}
.held__probe .geraet{width:100%}
@media (max-width:1000px){.held__probe{order:1}.held__satz{order:2}}

/* Schloss in der dunklen Fläche */
.tresor--dunkel{margin:0 auto clamp(2.5rem,2rem + 2vw,4rem);width:max-content}
.tresor--dunkel .tresor__schatten{background:rgba(0,0,0,.45)}

/* ── Scroll-Effekte: seite.js setzt --p von 0 (unten) bis 1 (oben) ── */
.feld-dunkel [data-woerter-tief] .wort{color:var(--rahmen-leise);transition:color 260ms ease}
.feld-dunkel [data-woerter-tief] .wort.ist-voll{color:var(--rahmen-tinte)}
@media (prefers-reduced-motion:no-preference){
  .held__mitte[data-scroll-weg]{transform:translateY(calc(var(--w,0) * -46px));opacity:calc(1 - var(--w,0) * .4)}
  .held__probe[data-scroll]{transform:translateY(calc((1 - var(--p,1)) * 28px))}
  .tresor--dunkel[data-scroll]{transform:rotate(calc((var(--p,.5) - .5) * 16deg)) translateY(calc((.5 - var(--p,.5)) * 30px))}
}

/* ── Leises Pulsieren wie im Vorbild ─────────────────────────
   Lichtpulse auf den Leiterbahnen, schwebender Server, Live-Punkt,
   Lichtschleier in den dunklen Feldern. Pausiert außerhalb des Sichtfelds
   (seite.js setzt .ist-sichtbar) und steht bei reduzierter Bewegung still. */
.held__linien .puls{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:70 930;stroke-dashoffset:1000;opacity:0}
.satin{position:absolute;pointer-events:none;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0}
.satin--a{width:46%;height:60%;right:-8%;top:-18%;background:rgba(185,216,194,.22)}
.satin--b{width:40%;height:50%;left:-10%;bottom:-20%;background:rgba(236,227,210,.14)}
.satin--c{width:38%;height:55%;left:-6%;bottom:-25%;background:rgba(185,216,194,.14)}
.feld-dunkel > :not(.satin){position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .held__linien .puls{opacity:.75;animation:puls-lauf var(--d,6s) linear infinite;animation-delay:var(--v,0s)}
  .tresor__koerper{animation:schweben 6s ease-in-out infinite}
  .tresor__schatten{animation:schatten 6s ease-in-out infinite}
  .tresor__live i{animation:ping 2s ease infinite}
  .satin--a{animation:satin-a 18s ease-in-out infinite alternate}
  .satin--b{animation:satin-b 14s ease-in-out infinite alternate}
  .satin--c{animation:satin-b 16s ease-in-out infinite alternate}
  .held:not(.ist-sichtbar) .puls,.held:not(.ist-sichtbar) .tresor__koerper,.held:not(.ist-sichtbar) .tresor__schatten,
  .held:not(.ist-sichtbar) .pdf *,.held:not(.ist-sichtbar) .minikarte,
  .feld-dunkel:not(.ist-sichtbar) .satin{animation-play-state:paused}
}
@keyframes puls-lauf{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes schweben{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(-6.5deg)}}
@keyframes schatten{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.7}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,140,86,.55)}80%,100%{box-shadow:0 0 0 7px rgba(61,140,86,0)}} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */
@keyframes satin-a{from{transform:translate(0,0) scale(1)}to{transform:translate(-30px,18px) scale(1.08)}}
@keyframes satin-b{from{transform:translate(0,0) scaleX(1)}to{transform:translate(14px,-12px) scaleX(1.15)}}

/* ── Hover: ruhig, eine Antwort pro Element, nur mit Maus ──── */
.testfall,.minikarte,.referenz__bild img,.reihe > li .ui,.verzeichnis img,.knopf{will-change:auto}
.testfall i{transition:background-color var(--t-hover) ease,transform var(--t-hover) var(--ease-out)}
.minikarte{transition:transform var(--t-ui) var(--ease-out)}
.referenz__bild{overflow:hidden;border-radius:10px}
.referenz__bild img{transition:transform 700ms var(--ease-soft)}
.reihe > li .ui{transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{transform:translateY(-1px)}
  .knopf:active{transform:translateY(0) scale(.97)}
  .testfall:hover{transform:translateY(-3px)}
  .testfall:hover i{transform:translateX(3px)}
  .minikarte:hover{transform:translateY(-3px)}
  .referenz:hover .referenz__bild img{transform:scale(1.025)}
  .reihe > li.ist-aktiv:hover .ui{transform:translateY(-4px)}
  .kugel__beispiele button:hover{transform:translateY(-1px)}
  .fuss a:hover{color:#FFFFFF}
  .tresor:hover .tresor__koerper{animation-duration:3s}
}
@media (prefers-reduced-motion:reduce){
  .knopf:hover,.testfall:hover,.minikarte:hover,.reihe > li.ist-aktiv:hover .ui{transform:none}
  .referenz:hover .referenz__bild img{transform:none}
}

/* ── Alles rund: wenig Ecken ─────────────────────────────────── */
:root{--rund-gross:clamp(18px,1.4vw,26px);--rund-mittel:16px;--rund-klein:12px}
.bild img,.referenz__bild,.referenz__bild img,.kontakt-zeile__bild,.verzeichnis img{border-radius:var(--rund-gross)}
.js .blende{border-radius:var(--rund-gross)}
@media (prefers-reduced-motion:no-preference){
  .js .blende{clip-path:inset(0 0 100% 0 round var(--rund-gross))}
  .js .blende.ist-da{clip-path:inset(0 round var(--rund-gross))}
}
.blende{overflow:hidden}
.tabelle-huelle{background:var(--surface);border-radius:var(--rund-gross);padding:.5rem 1.5rem}
.tabelle tr:last-child td{border-bottom:0}
.hinweis{border-radius:var(--rund-mittel)}
.stichworte li{border-radius:999px;padding:.4rem .85rem}

.gesteuert__halter{border-radius:var(--rund-gross)}
.zustand .ui,.ui{border-radius:var(--rund-mittel)}
.minikarte{border-radius:var(--rund-mittel)}
.vorschlag{border-radius:var(--rund-klein) var(--rund-klein) 0 0}
.testfall i{border-radius:999px}
.notiz{border-radius:var(--rund-klein)}
.kontaktwege a{border-radius:var(--rund-mittel);padding-inline:.25rem}
.kugel__zitat,.ui__zitat,.ui__brief,.ui__spieler{border-radius:var(--rund-klein)}
@media (max-width:1099px){.zustand{border-radius:var(--rund-gross);margin-inline:0}}

/* ─────────────────────────────────────────────────────────────
   Scroll-Filme (assets/effekte.js)
   ───────────────────────────────────────────────────────────── */
.seitenfortschritt{position:fixed;left:0;top:0;width:100%;height:3px;background:#B9D8C2;transform:scaleX(0);transform-origin:0 50%;z-index:80;pointer-events:none}

/* Schaufenster: feste Bühne, senkrecht scrollen blättert waagrecht */
.schaufenster__spur{display:none;justify-content:center;gap:0;margin-top:clamp(.5rem,1.5vh,1.25rem)}
.schaufenster__spur button{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer}
.schaufenster__spur i{position:relative;display:block;height:8px;width:calc(8px + var(--f,0) * 26px);border-radius:999px;background:var(--line);overflow:hidden}
.schaufenster__spur i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);opacity:var(--f,0)}
.ist-gepinnt.schaufenster{height:calc(100vh + (var(--n,7) - 1) * 70vh);height:calc(100svh + (var(--n,7) - 1) * 70vh);padding-block:0}
.ist-gepinnt .schaufenster__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center} /* taste-skill-ignore: 100vh nur als Rückfall vor 100svh */
.ist-gepinnt .schaufenster__kopf{margin-bottom:clamp(1rem,3vh,2.5rem)}
.ist-gepinnt .schaufenster__spur{display:flex}
.ist-gepinnt .reihe{position:relative;width:max-content;overflow:visible;scroll-snap-type:none;padding:0;margin:0;cursor:default;will-change:transform}
.ist-gepinnt .reihe > li{transition:none;scroll-snap-align:none;will-change:transform,opacity}
.ist-gepinnt .schaufenster__text{display:grid;margin-top:clamp(1rem,3vh,2rem);min-height:0}
.ist-gepinnt .schaufenster__text > div{grid-row:1;grid-column:1 / -1;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .45s ease,transform .6s var(--ease-out),visibility 0s linear .45s;pointer-events:none}
.ist-gepinnt .schaufenster__text > div.ist-aktiv{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
/* Gepinnt: Überschrift, aktive Tafel und Text auf einer Mittelachse */
.ist-gepinnt .schaufenster__kopf{display:grid;grid-template-columns:1fr auto 1fr;align-items:end}
.ist-gepinnt .schaufenster__kopf h2{grid-column:2;max-width:none;text-align:center}
.ist-gepinnt .schaufenster__tasten{grid-column:3;justify-self:end}
.ist-gepinnt .schaufenster__text > div{grid-column:1 / -1;max-width:none;justify-self:center;text-align:center}
.ist-gepinnt .schaufenster__text p:not(.marke-klein){max-width:58ch;margin-inline:auto}
@media (max-width:767px){.ist-gepinnt .schaufenster__kopf{grid-template-columns:1fr auto}.ist-gepinnt .schaufenster__kopf h2{grid-column:1;text-align:left}.ist-gepinnt .schaufenster__tasten{grid-column:2}.ist-gepinnt .schaufenster__text > div{text-align:left;justify-self:stretch}.ist-gepinnt .schaufenster__text p:not(.marke-klein){margin-inline:0}}
@media (max-height:780px){.ist-gepinnt .schaufenster__kopf h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem)}.ist-gepinnt .schaufenster__kopf{margin-bottom:.75rem}.ist-gepinnt .schaufenster__text{margin-top:.75rem}.ist-gepinnt .schaufenster__spur{margin-top:.25rem}}

/* Antwort-Film: Frage tippen, Dokumente lesen, Antwort mit Fundstelle */
.film .ui{max-width:540px}
@media (min-width:1100px){.gesteuert__halter{top:max(4.5rem,calc(50vh - 330px));height:min(84vh,660px);transform:perspective(1600px) rotateX(calc((1 - var(--ein,1)) * 16deg)) scale(calc(.88 + var(--ein,1) * .12));transform-origin:50% 100%;opacity:calc(.3 + var(--ein,1) * .7)}}
.gesteuert__spur{position:absolute;left:1.5rem;right:1.5rem;bottom:1rem;height:3px;border-radius:999px;background:rgba(20,26,22,.1);overflow:hidden;z-index:2}
.gesteuert__spur::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:0 50%}
.film__stufe{display:grid;gap:.45rem}
.film__label{font-size:13px;font-weight:600}
.film__suche{opacity:calc(.22 + var(--s1,1) * .78);transform:translateY(calc((1 - var(--s1,1)) * 12px))}
.film__antwort{opacity:calc(.22 + var(--s2,1) * .78);transform:translateY(calc((1 - var(--s2,1)) * 12px))}
.film__eingabe{align-items:flex-start;min-height:4.9em}
.film__eingabe .film__text{min-height:2.9em}
.film__text::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--ui-akzent);opacity:0}
.film.tippt .film__text::after{opacity:1;animation:strich 1s steps(1) infinite}
@keyframes strich{50%{opacity:0}}
.film .ui__senden{transition:transform .3s var(--ease-out),box-shadow .3s ease}
.film.gesendet .ui__senden{transform:scale(1.08);box-shadow:0 0 0 6px rgba(47,86,64,.14)} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */
.ui__liste.film__treffer li{padding-inline:.6rem;margin-inline:-.6rem;border-radius:10px;transition:background-color .25s ease,opacity .35s ease}
.film__urteil{opacity:0;transition:opacity .25s ease}
.film__treffer li.ist-gelesen .film__urteil{opacity:1}
.film__treffer li.ist-scan{background:var(--ui-flaeche)}
.film__treffer li.ist-treffer{background:var(--ui-akzent-weich)}
.film__treffer li.ist-treffer .film__urteil{color:var(--ui-akzent);font-weight:600}
.film__treffer li.ist-verworfen{opacity:.42}
.film__worte .w{display:inline-block;transition:opacity .3s ease,transform .4s var(--ease-out),filter .4s ease}
.film__worte .w:not(.ist-da){opacity:0;transform:translateY(5px);filter:blur(3px)}
.film__worte sup{opacity:0;transition:opacity .3s ease}
.film__worte.ist-fertig sup{opacity:1}
.ui__zitat mark.film__mark{background:linear-gradient(var(--ui-mark),var(--ui-mark)) no-repeat 0 0 / calc(var(--m,1) * 100%) 100%} /* taste-skill-ignore: Textmarker, der über die Fundstelle streicht */
@media (max-width:1099px){
  .gesteuert .zustand.film{order:9}
  .gesteuert__spur{display:none}
  .aussage{min-height:0}
}

/* Überschriften steigen aus einer Maske */
.hebt{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.heb{display:block;transform:translateY(108%);transition:transform 1000ms var(--ease-out)}
.hebt-ziel.ist-da .heb{transform:none}

/* Dunkle Felder weiten sich, der Name im Fuß steigt auf */
.feld-dunkel{transform:scale(calc(.9 + var(--e,1) * .1));transform-origin:50% 0;border-radius:calc(56px - var(--e,1) * 30px)}
.fuss__name{transform:translateY(calc((1 - var(--e,1)) * 40%))}

/* Hover: Magnet, Licht unter dem Zeiger, Neigung, Versatz */
.knopf{translate:var(--mx,0) var(--my,0);transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,translate .35s var(--ease-out)}
.feld-dunkel::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--lo,0);transition:opacity .45s ease;
  background:radial-gradient(520px circle at var(--lx,50%) var(--ly,0),rgba(185,216,194,.13),transparent 62%)} /* taste-skill-ignore: Licht folgt dem Zeiger */
.testfall,.minikarte{position:relative;overflow:hidden}
.testfall > *,.minikarte > *{position:relative;z-index:1}
.testfall::before,.minikarte::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--lo,0);transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--lx,50%) var(--ly,50%),rgba(47,86,64,.12),transparent 65%)} /* taste-skill-ignore */
.minikarte::before{background:radial-gradient(220px circle at var(--lx,50%) var(--ly,50%),rgba(185,216,194,.16),transparent 65%)} /* taste-skill-ignore */
.tresor__neigung{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease-out)}
.held__linien{translate:calc(var(--px,0) * -22px) calc(var(--py,0) * -14px);transition:translate .8s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .feld-dunkel{transform:none;border-radius:var(--rund-gross)}
  .heb{transform:none;transition:none}
  .knopf{translate:none}
}

/* ─────────────────────────────────────────────────────────────
   Oberflächen-Ausschnitte (data-ui): eigene Radien und Linien,
   so wie die echte Anwendung aussieht. Immer helles Thema.
   ───────────────────────────────────────────────────────────── */
[data-ui]{
  --ui-bg:#FFFFFF;--ui-flaeche:#F4F3EF;--ui-linie:#E2DFD7;--ui-tinte:#15181D;--ui-leise:#555A62;
  --ui-akzent:#2F5640;--ui-akzent-weich:#DCE7DE;--ui-mark:#FBE7A4;--ui-amber:#8A5A12;--ui-amber-weich:#F6EEDD;
  font-family:var(--font);color:var(--ui-tinte);font-size:15px;line-height:1.45;text-align:left;
}
.ui{background:var(--ui-bg);border-radius:14px;border:1px solid var(--ui-linie);overflow:hidden;width:100%} /* taste-skill-ignore: Linie gehört zur Oberfläche (data-ui) */
.ui__leiste{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;background:var(--ui-flaeche);border-bottom:1px solid var(--ui-linie);font-size:14px} /* taste-skill-ignore: Linie gehört zur Oberfläche (data-ui) */
.ui__leiste b{font-weight:600}
.ui__chip{display:inline-flex;align-items:center;gap:.35rem;font-size:13px;padding:.2rem .55rem;border-radius:999px;background:var(--ui-akzent-weich);color:var(--ui-akzent);font-weight:600;white-space:nowrap}
.ui__chip--amber{background:var(--ui-amber-weich);color:var(--ui-amber)}
.ui__chip--grau{background:var(--ui-flaeche);color:var(--ui-leise)}
.ui__inhalt{padding:1rem;display:grid;gap:.85rem}
.ui__frage{justify-self:end;max-width:85%;background:var(--ui-akzent);color:#fff;padding:.6rem .85rem;border-radius:14px 14px 4px 14px}
.ui__antwort{display:grid;gap:.5rem}
.ui__antwort sup,.ui sup{font-size:11px;font-weight:600;color:var(--ui-akzent);background:var(--ui-akzent-weich);border-radius:4px;padding:0 .3em;margin-left:.15em;vertical-align:.35em}
.ui__fund{display:flex;flex-wrap:wrap;gap:.4rem}
.ui__zitat{background:var(--ui-flaeche);border-radius:10px;padding:.75rem .85rem;font-size:14px;color:var(--ui-leise)}
.ui__zitat mark{background:var(--ui-mark);color:var(--ui-tinte);padding:0 .1em}
.ui__zitat b{color:var(--ui-tinte);display:block;margin-bottom:.25rem;font-size:13px}
.ui__liste{display:grid;gap:0}
.ui__liste li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--ui-linie)} /* taste-skill-ignore: Linie gehört zur Oberfläche (data-ui) */
.ui__liste li:last-child{border-bottom:0}
.ui__liste span{color:var(--ui-leise)}
.ui__eingabe{display:flex;align-items:center;gap:.5rem;border:1px solid var(--ui-linie);border-radius:12px;padding:.55rem .6rem .55rem .85rem;color:var(--ui-leise)} /* taste-skill-ignore: Linie gehört zur Oberfläche (data-ui) */
.ui__eingabe > span:first-child{flex:1}
.ui__senden{width:30px;height:30px;border-radius:50%;background:var(--ui-akzent);display:grid;place-items:center;color:#fff;flex:none}
.ui__senden svg{width:16px;height:16px}
.ui__matrix{width:100%;border-collapse:collapse;font-size:14px}
.ui__matrix th,.ui__matrix td{padding:.5rem .35rem;border-bottom:1px solid var(--ui-linie);text-align:center}
.ui__matrix th:first-child,.ui__matrix td:first-child{text-align:left}
.ui__matrix th{font-weight:600;color:var(--ui-leise);font-size:13px}
.ui__ja{color:var(--ui-akzent);font-weight:600}
.ui__nein{color:#5F656C}
.ui__zeit{font-variant-numeric:tabular-nums;color:var(--ui-akzent);font-weight:600;font-size:13px;margin-right:.5rem}
.ui__spieler{display:flex;align-items:center;gap:.75rem;background:var(--ui-flaeche);border-radius:10px;padding:.6rem .75rem}
.ui__spieler i{width:30px;height:30px;border-radius:50%;background:var(--ui-akzent);display:grid;place-items:center;flex:none}
.ui__spieler i::after{content:"";border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.ui__spur{flex:1;height:4px;border-radius:2px;background:var(--ui-linie);position:relative}
.ui__spur::before{content:"";position:absolute;inset:0 62% 0 0;background:var(--ui-akzent);border-radius:2px}
.ui__knopf{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 .9rem;border-radius:9px;background:var(--ui-akzent);color:#fff;font-weight:600;font-size:14px}
.ui__knopf--leise{background:var(--ui-flaeche);color:var(--ui-tinte)}
.ui__zeilen{display:grid;gap:.5rem}
.ui__schalter{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--ui-linie);transition:opacity 280ms ease} /* taste-skill-ignore: Linie gehört zur Oberfläche (data-ui) */
.ui__schalter:last-child{border-bottom:0}
.ui__schalter small{display:block;color:var(--ui-leise);font-size:13px}
.ui__kipp{width:38px;height:22px;border-radius:999px;background:#C9CDD1;position:relative;flex:none}
.ui__kipp::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff}
.ui__kipp--an{background:var(--ui-akzent)}
.ui__kipp--an::after{left:19px}
.ui__gross{font-size:34px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
.ui__brief{background:#fff;border:1px solid var(--ui-linie);border-radius:8px;padding:1rem;display:grid;gap:.55rem;font-size:14px} /* taste-skill-ignore: Linie gehört zur Oberfläche (data-ui) */
.ui__brief b{font-size:15px}
.ui__titel{font-weight:600;font-size:15px}
.ui__leise{color:var(--ui-leise)}
/* Tafel: Teil im Fokus, Rest tritt zurück */
.tafel__feld[data-fokus] .ui__schalter:not(.ist-fokus){opacity:.3}

/* ─────────────────────────────────────────────────────────────
   Fragekugel (Live-Ausschnitt im Startbereich), nach „AI Thinking
   Orb & Input“ von 21st.dev, ohne React in reinem JavaScript.
   ───────────────────────────────────────────────────────────── */
.geraet{width:min(560px,100%);display:grid;gap:.75rem;color:var(--night-ink);border-radius:28px;padding:1.2rem 1.4rem 1rem;
  background:radial-gradient(70% 42% at 50% 40%,rgba(159,209,174,.07),transparent 72%),#111A15} /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */
.geraet__kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:14px;color:var(--night-muted)}
.geraet__kopf > span{display:inline-flex;align-items:center;gap:.55rem}
.geraet__kopf b{color:var(--night-ink);font-weight:600;font-size:17px;letter-spacing:-.01em}
.geraet__keim{width:26px;height:26px;color:var(--night-accent);flex:none}
.geraet__art svg{width:18px;height:18px;flex:none}
.geraet__fuss{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;padding-top:.9rem;border-top:1px solid rgba(236,235,225,.1);font-size:13.5px;color:var(--night-ink)} /* taste-skill-ignore: Trennlinie im Gerät wie im Entwurf */
.geraet__fuss > span{display:inline-flex;align-items:center;gap:.5rem}
.geraet__beleg svg{width:20px;height:20px;color:var(--night-accent);flex:none}
.geraet__trenn,.geraet__leise{color:var(--night-muted)}
.geraet__verbindung i{width:8px;height:8px;border-radius:50%;background:#5DB37C;flex:none}
.geraet__verbindung b{font-weight:500;font-variant-numeric:tabular-nums}
.kugel{position:relative;height:clamp(560px,74vh,640px);--mitte:37%;--feld:57%;--oCenter:0}
.kugel__gruss{position:absolute;left:0;right:0;top:4%;display:grid;justify-items:center;gap:.55rem;text-align:center;pointer-events:none;transition:opacity 280ms ease,transform 420ms var(--ease-out)}
.kugel__titel{font:500 clamp(1.75rem,1.2rem + 1.4vw,2.375rem)/1.08 var(--font);letter-spacing:-.035em;color:var(--night-ink)}
.kugel__gruss p{font-size:16px;color:var(--night-muted)}
.kugel:not([data-phase="ruhe"]) .kugel__gruss{opacity:0;transform:translateY(-10px)}
.kugel__halo{position:absolute;left:50%;top:var(--mitte);width:300px;height:300px;transform:translate(-50%,-50%);border-radius:50%;
  width:200px;height:200px;background:rgba(159,209,174,.16);filter:blur(42px);opacity:var(--oCenter);pointer-events:none}
.kugel__mover{position:absolute;left:50%;top:var(--mitte);width:0;height:0;will-change:transform}
.kugel__spur{position:absolute;left:0;top:0;width:100px;height:100px;border-radius:50%;background:var(--night-accent);opacity:0;pointer-events:none}
.kugel__akteur{
  --w:500px;--h:60px;--r:999px;--oPill:1;--oBall:0;--oGreen:0;--oCard:0;--oInput:1;--gs:.55;--hOp:0;--dotS:0;--inScale:1;
  position:absolute;left:0;top:0;width:var(--w);height:var(--h);border-radius:var(--r);transform:translate(-50%,-50%);overflow:hidden;
}
.kugel__akteur[data-schuetteln]{animation:kugel-schuetteln 260ms ease}
@keyframes kugel-schuetteln{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 5px),-50%)}75%{transform:translate(calc(-50% + 5px),-50%)}}
.kugel__flaeche,.kugel__ball,.kugel__gruen,.kugel__karte{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.kugel__flaeche{background:#18231D;box-shadow:inset 0 0 0 1px rgba(236,235,225,.16);opacity:var(--oPill)} /* taste-skill-ignore: Innenkante des Eingabefelds */
.kugel__ball{background:#26323A;box-shadow:inset 0 0 0 1px rgba(159,209,174,.35);opacity:var(--oBall)} /* taste-skill-ignore */
.kugel__gruen{background:var(--night-accent);opacity:var(--oGreen);transform:scale(var(--gs))}
.kugel__karte{background:#F7F6F2;opacity:var(--oCard)}
.kugel__form{position:absolute;inset:0;display:flex;align-items:center;gap:.5rem;padding:0 .45rem 0 1.4rem;opacity:var(--oInput);transform:scale(var(--inScale))}
.kugel__feld{flex:1;min-width:0;min-height:44px;background:none;border:0;outline:0;color:var(--night-ink);font:400 17px/1.2 var(--font);padding:.5rem 0}
.kugel__feld::placeholder{color:var(--night-muted)}
.kugel__senden{width:46px;height:46px;border-radius:50%;border:0;background:var(--night-accent);color:#0F2417;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform var(--t-press) var(--ease-out),opacity var(--t-hover) ease;opacity:.85}
.kugel__senden[data-bereit]{opacity:1}
.kugel__senden:active{transform:scale(.94)}
.kugel__senden svg{width:20px;height:20px}
.kugel__form:focus-within{outline:none}
.kugel__akteur:has(.kugel__feld:focus-visible) .kugel__flaeche{box-shadow:inset 0 0 0 2px var(--night-accent)} /* taste-skill-ignore */
.kugel__mitte{position:absolute;left:50%;top:var(--mitte);width:0;height:0;pointer-events:none}
.kugel__leinwand{position:absolute;left:0;top:0;width:220px;height:220px;max-width:none;transform:translate(-50%,-50%);pointer-events:none}
.kugel__puls{position:absolute;left:0;top:0;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;box-shadow:0 0 0 2px var(--night-accent);opacity:0;pointer-events:none} /* taste-skill-ignore: Ring beim Zusammenziehen */
.kugel__antwort{position:absolute;left:0;right:0;top:0;padding:1.1rem 1.15rem;opacity:var(--hOp);color:#15181D;display:grid;align-content:start;gap:.55rem}
.kugel__antwort:focus{outline:none}
.kugel__kopfzeile{display:flex;align-items:center;gap:.45rem;font-size:13px;font-weight:600;color:#2F5640}
.kugel__kopfzeile i{width:8px;height:8px;border-radius:50%;background:#2F5640;transform:scale(var(--dotS))}
.kugel__text{font-size:15px;line-height:1.45;color:#15181D}
.kugel__text .w{display:inline-block}
.kugel__fund{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.1rem}
.kugel:not([data-phase="fertig"]) .kugel__fund{pointer-events:none}
.kugel__fund button{font:600 13px/1 var(--font);color:#2F5640;background:#DCE7DE;border:0;border-radius:999px;padding:.45rem .7rem;min-height:32px;cursor:pointer}
.kugel__fund button[aria-expanded="true"]{background:#2F5640;color:#fff}
.kugel__zitat{font-size:13.5px;line-height:1.45;color:#555A62;background:#EEECE6;border-radius:10px;padding:.65rem .75rem;max-height:9.5em;overflow:auto}
.kugel__zitat b{display:block;color:#15181D;font-size:13px;margin-bottom:.2rem}
.kugel__zitat mark{background:#FBE7A4;color:#15181D;padding:0 .1em}
.kugel__status{position:absolute;left:0;right:0;top:calc(var(--mitte) + 84px);height:24px;display:grid;justify-items:center;font-size:14px;color:var(--night-muted);opacity:var(--sOp,0);transform:translateY(calc(var(--sTy,6) * 1px));pointer-events:none}
.kugel__status span{grid-area:1/1;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.kugel__status .rein{animation:kugel-rein 300ms var(--ease-out) both}
.kugel__status .raus{animation:kugel-raus 240ms ease both}
.kugel__punkte i{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin-left:3px;animation:kugel-punkt 1.2s infinite}
.kugel__punkte i:nth-child(2){animation-delay:.15s}
.kugel__punkte i:nth-child(3){animation-delay:.3s}
.kugel__status .fertig{color:var(--night-accent);font-weight:600}
@keyframes kugel-rein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes kugel-raus{from{opacity:1}to{opacity:0;transform:translateY(-6px)}}
@keyframes kugel-punkt{0%,80%,100%{opacity:.25}40%{opacity:1}}
.kugel__beispiele{position:absolute;left:0;right:0;top:calc(var(--feld) + 50px);display:grid;justify-items:center;gap:.9rem;transition:opacity var(--t-ui) ease}
.kugel__themen{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;width:100%}
.kugel__fragen{display:grid;justify-items:center;gap:.6rem;width:100%}
.kugel__beispiele button{font:400 15px/1.2 var(--font);color:var(--night-ink);background:rgba(236,235,225,.03);border:0;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(236,235,225,.16);min-height:44px;cursor:pointer;transition:background-color var(--t-hover) ease,box-shadow var(--t-hover) ease,transform var(--t-press) var(--ease-out)} /* taste-skill-ignore: Umriss-Pillen wie im Entwurf */
.kugel__beispiele .kugel__themen button{font-weight:500;font-size:14.5px;background:none;padding:0 1rem}
.kugel__beispiele .kugel__themen button[aria-pressed="true"]{color:#0F2417;background:var(--night-accent);box-shadow:none;font-weight:600}
.kugel__fragen button{display:inline-flex;align-items:center;gap:.85rem;min-height:48px;padding:0 1.1rem 0 1.35rem;max-width:100%;text-align:left}
.kugel__fragen svg{width:18px;height:18px;color:var(--night-accent);flex:none;transition:transform var(--t-hover) var(--ease-out)}
.kugel__beispiele button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .kugel__beispiele button:hover{background:rgba(236,235,225,.07);box-shadow:inset 0 0 0 1px rgba(236,235,225,.26)} /* taste-skill-ignore */
  .kugel__beispiele .kugel__themen button[aria-pressed="true"]:hover{background:var(--night-accent);box-shadow:none}
  .kugel__fragen button:hover svg{transform:translateX(3px)}
}
.kugel[data-phase]:not([data-phase="ruhe"]) .kugel__beispiele{opacity:0;pointer-events:none}
.kugel__neu{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font:600 14px/1 var(--font);color:var(--night-ink);background:none;box-shadow:inset 0 0 0 1px rgba(236,235,225,.2);border:0;border-radius:999px;min-height:44px;padding:0 1.1rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--t-ui) ease} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */
.kugel[data-phase="fertig"] .kugel__neu{opacity:1;pointer-events:auto}
.kugel__still{display:none}
/* ohne JavaScript: eine fertige Beispielantwort */
html:not(.js) .kugel{height:auto}
html:not(.js) .kugel > :not(.kugel__still){display:none}
html:not(.js) .kugel__still{display:block}
@media (max-width:900px){
  .kugel{height:clamp(540px,70svh,600px);--mitte:36%;--feld:57%}
  .kugel__themen{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding-inline:2px;scroll-padding-inline:2px}
  .kugel__themen::-webkit-scrollbar{display:none}
  .kugel__themen button{flex:none;white-space:nowrap}
  .kugel__fragen button{font-size:14.5px}
}
@media (max-width:480px){
  .geraet{padding:1rem 1rem .9rem;border-radius:24px}
  .geraet__kopf b{font-size:16px;white-space:nowrap}
  .geraet__art,.geraet__trenn,.geraet__leise{display:none}
  .kugel__fragen button{font-size:14px;padding:0 .9rem 0 1.1rem;gap:.6rem}
}

/* ─────────────────────────────────────────────────────────────
   Durchklicken: die echte Vorschau in einem Fenster, Fälle daneben
   (seite.js steuert das Fenster, die Vorschau meldet ihren Bereich zurück)
   ───────────────────────────────────────────────────────────── */
.durchklick{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:clamp(1rem,2vw,1.75rem);align-items:start;max-width:1320px;margin-inline:auto}
.durchklick__faelle{display:grid;gap:.4rem;position:sticky;top:1.5rem}
.fall{
  display:grid;grid-template-columns:2.25rem 1fr;column-gap:.85rem;align-items:center;min-height:64px;padding:.7rem 1rem .7rem .7rem;
  border-radius:20px;background:rgba(236,235,225,.06);color:var(--rahmen-tinte);text-decoration:none;
  transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out);
}
.fall:active{transform:scale(.985)}
.fall__nr{grid-row:1 / span 2;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:rgba(236,235,225,.1);font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums;transition:background-color var(--t-hover) ease,color var(--t-hover) ease}
.fall b{font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;line-height:1.25}
.fall > span:last-child{color:var(--rahmen-leise);font-size:.875rem;line-height:1.35}
.fall[aria-current="true"]{background:var(--surface);color:var(--ink)}
.fall[aria-current="true"] > span:last-child{color:var(--muted)}
.fall[aria-current="true"] .fall__nr{background:var(--accent);color:var(--on-accent)}
@media (hover:hover) and (pointer:fine){.fall:not([aria-current="true"]):hover{background:rgba(236,235,225,.12)}}

.fenster{margin:0;border-radius:24px;background:var(--rahmen);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(236,235,225,.12),0 50px 90px -50px rgba(0,0,0,.7)} /* taste-skill-ignore: Fensterkante */
.fenster__leiste{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:.5rem .6rem .45rem 1rem;color:var(--rahmen-leise);font-size:.8125rem}
.fenster__punkte{display:flex;gap:7px}
.fenster__punkte i{width:11px;height:11px;border-radius:50%;background:rgba(236,235,225,.2)}
.fenster__adresse > span{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:999px;background:rgba(236,235,225,.07);white-space:nowrap}
.fenster__adresse i{width:7px;height:7px;border-radius:50%;background:#5DB37C}
.fenster__gross{justify-self:end;display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:999px;color:var(--rahmen-tinte);font-weight:600;text-decoration:none;transition:background-color var(--t-hover) ease}
.fenster__gross:hover{background:rgba(236,235,225,.1)}
.fenster__inhalt{display:block;width:100%;height:min(82vh,800px);border:0;background:var(--rahmen);color-scheme:normal}
.durchklick__hinweis{text-align:center;color:var(--rahmen-leise)!important;font-size:var(--step-small);margin-top:1.5rem}
.probe__unter + .durchklick{margin-top:0}

/* Knopf „Ausprobieren“ unter den Tafeln der Vitrine */
.probe-link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;margin-top:0;padding:0 1.2rem;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:var(--step-small);text-decoration:none}
.probe-link::after{content:"";width:.5rem;height:.5rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:.1rem}
.probe-link:active{transform:scale(.97)}

@media (max-width:1099px){
  .durchklick{grid-template-columns:minmax(0,1fr)}
  .durchklick__faelle{position:static;display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--rand) * -1);padding-inline:var(--rand);scroll-padding-inline:var(--rand)}
  .durchklick__faelle::-webkit-scrollbar{display:none}
  .fall{flex:none;grid-template-columns:auto auto;min-height:48px;padding:.35rem 1.1rem .35rem .35rem;border-radius:999px;column-gap:.6rem}
  .fall__nr{grid-row:auto;width:2.1rem;height:2.1rem}
  .fall b{font-size:.975rem;white-space:nowrap}
  .fall > span:last-child{display:none}
  .fenster__inhalt{height:min(78svh,760px)}
}
@media (max-width:560px){
  .fenster{border-radius:20px}
  .fenster__leiste{grid-template-columns:auto 1fr auto;padding-left:.85rem}
  .fenster__adresse{justify-self:center}
}
@media (max-width:560px){
  /* Handy: das Fenster nutzt fast die ganze Breite des dunklen Feldes */
  .feld-dunkel .durchklick .fenster{margin-inline:calc(8px - clamp(1.25rem,1rem + 4vw,5rem))}
  .feld-dunkel:has(.durchklick){margin-inline:8px}
  .fenster__gross{padding:0 .8rem}
}

/* ─────────────────────────────────────────────────────────────
   Dunkler Satz nach Entwurf vom 15.10.2026: Kopfzeile wie ein Gerät,
   Etikett, gerader Tresor im pulsierenden Lichthof, Satz mit grünem
   Schluss, Zahlenreihe mit Trennern
   ───────────────────────────────────────────────────────────── */
.feld-dunkel--frage{
  background:radial-gradient(120% 80% at 50% 0%,#1F3827 0%,transparent 62%),linear-gradient(180deg,#172A1E,#132219); /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */
  padding:clamp(6.5rem,4.5rem + 5vw,9rem) clamp(1.25rem,1rem + 4vw,5rem) clamp(3.5rem,2.5rem + 4vw,6rem);
}
.feld-dunkel > .frage__licht{position:absolute;z-index:0;left:50%;top:clamp(9rem,7rem + 6vw,14rem);width:min(620px,90%);aspect-ratio:1.5;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(96,166,116,.36),rgba(96,166,116,.12) 55%,transparent);pointer-events:none} /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */
@media (prefers-reduced-motion:no-preference){.feld-dunkel > .frage__licht{animation:lichthof 7s ease-in-out infinite}}
@keyframes lichthof{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.feld-dunkel > .frage__kopf{position:absolute;z-index:2;left:clamp(1.25rem,3vw,3rem);right:clamp(1.25rem,3vw,3rem);top:clamp(1.25rem,2.6vw,2.5rem);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.frage__marke{display:inline-flex;align-items:center;gap:.7rem;font-size:clamp(1.25rem,.95rem + 1vw,2rem);font-weight:500;letter-spacing:-.025em;color:var(--rahmen-tinte)}
.frage__zeichen{width:1.55em;height:1.55em;flex:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */
.frage__lokal{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 1.15rem;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(236,235,225,.3);font-size:var(--step-small);color:var(--rahmen-tinte);white-space:nowrap} /* taste-skill-ignore: Umriss-Pille wie im Entwurf */
.frage__lokal i{width:9px;height:9px;border-radius:50%;background:var(--night-accent);flex:none}
.frage__etikett{display:table;margin:0 auto clamp(1.4rem,1rem + 1.2vw,2rem);padding:.45rem 1.1rem;border-radius:999px;background:#DCEBDD;color:#14261A!important;font-size:var(--step-small);font-weight:500}
.feld-dunkel--frage .tresor--dunkel{padding-top:0;margin-bottom:clamp(.5rem,.25rem + 1vw,1.25rem)}
.feld-dunkel--frage .tresor__koerper{
  width:clamp(132px,11.5vw,184px);border-radius:30%;transform:none;
  background:linear-gradient(172deg,#F7F2E6 0%,#EDE5D3 52%,#DDD0B5 100%); /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -14px 24px rgba(140,115,70,.2),0 12px 0 -3px #C7B795,0 44px 60px -26px rgba(0,0,0,.7); /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */
}
.feld-dunkel--frage .tresor__koerper svg{width:30%;transform:none}
.feld-dunkel--frage .tresor__schatten{background:rgba(0,0,0,.5)}
@keyframes schweben-gerade{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:no-preference){
  .feld-dunkel--frage .tresor__koerper{animation:schweben-gerade 6s ease-in-out infinite}
  .feld-dunkel--frage .tresor--dunkel[data-scroll]{transform:translateY(calc((.5 - var(--p,.5)) * 24px))}
}
.feld-dunkel--frage .grosssatz{max-width:none;font-size:clamp(2.125rem,1rem + 3.6vw,4.25rem);line-height:1.08;letter-spacing:-.04em}
.feld-dunkel--frage .grosssatz__akzent,.feld-dunkel [data-woerter-tief] .grosssatz__akzent .wort.ist-voll{color:var(--night-accent)}
.feld-dunkel [data-woerter-tief] .grosssatz__akzent .wort{color:rgba(159,209,174,.5)}
.feld-dunkel--frage .grosssatz__rest{max-width:27ch;margin-top:clamp(1.25rem,1rem + 1vw,1.75rem);color:#D6D5CA;font-size:clamp(1.25rem,1.05rem + .7vw,1.75rem)}
.feld-dunkel--frage .zahlen{max-width:880px;margin-top:clamp(2.75rem,2rem + 3vw,4.5rem)}
.feld-dunkel--frage .zahlen dt{font-size:clamp(2.5rem,1.6rem + 2.4vw,3.75rem);font-weight:500}
.feld-dunkel--frage .zahlen dd{color:var(--rahmen-leise)}
@media (max-width:620px){
  .feld-dunkel > .frage__kopf{left:.9rem;right:.9rem;gap:.5rem}
  .frage__marke{font-size:.95rem;white-space:nowrap;gap:.5rem}
  .frage__zeichen{width:1.35em;height:1.35em}
  .frage__lokal{font-size:.8125rem;padding:0 .8rem;gap:.45rem}
  .feld-dunkel--frage .grosssatz{font-size:1.75rem}
  .feld-dunkel--frage .zahlen{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .feld-dunkel--frage .zahlen > div{padding:.25rem .35rem}
  .feld-dunkel--frage .zahlen > div + div{box-shadow:-1px 0 0 rgba(236,235,225,.18)} /* taste-skill-ignore */
  .feld-dunkel--frage .zahlen dt{font-size:2.25rem}
  .feld-dunkel--frage .zahlen dd{font-size:.8125rem;line-height:1.35}
}
@media (max-width:420px){.frage__privat{display:none}}

/* Wo Ihre Daten bleiben: Text links, Schaubild-Karte rechts (Entwurf vom 15.10.2026) */
.datenverbleib{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:clamp(2rem,1.5rem + 2vw,3rem);align-items:center}
.datenverbleib__text{grid-column:1 / span 5;display:grid;gap:clamp(1rem,.8rem + .8vw,1.5rem);align-content:center;max-width:34rem}
.datenverbleib__text .lead{max-width:28ch}
.datenverbleib__text .abschnitt__titel{margin-bottom:0}
.datenverbleib__text .datenverbleib__zeilen{max-width:none;white-space:nowrap}
@media (max-width:360px){.datenverbleib__text .datenverbleib__zeilen{white-space:normal}}
.datenverbleib:has(> .tabelle-huelle){align-items:start}
.datenverbleib:has(> .tabelle-huelle) .datenverbleib__text{padding-top:1.25rem}
.datenverbleib__bild.tabelle-huelle{border-radius:28px;padding:.5rem clamp(1rem,.8rem + 1vw,1.75rem)}
.datenverbleib__bild{grid-column:6 / -1;min-width:0}
.merkmale{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;margin-top:.5rem}
.merkmale li{display:grid;grid-template-columns:44px auto;column-gap:.75rem;align-items:center}
.merkmale__zeichen{grid-row:1 / span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--mark);color:var(--accent)}
.merkmale__zeichen svg{width:20px;height:20px}
.merkmale b{font-weight:600;font-size:var(--step-small);align-self:end;line-height:1.25}
.merkmale li > span:last-child{font-size:.875rem;color:var(--muted);align-self:start;line-height:1.35}
@media (max-width:1099px){
  .datenverbleib__text,.datenverbleib__bild{grid-column:1 / -1}
  .datenverbleib__text{max-width:none}
}
@media (max-width:520px){.merkmale{flex-direction:column}}

/* Schwebende PDF-Kachel in den Leiterbahnen des Startbereichs: Daten kommen per PDF herein (Skizze vom 15.10.2026) */
.held__linien .pdf__boden{fill:rgba(20,38,26,.22);stroke:none}
.held__linien .pdf__dicke{fill:#1B3424;stroke:none}
.held__linien .pdf__kachel{fill:url(#pdf-gruen);stroke:none}
.held__linien .pdf__glanz{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1}
.held__linien .pdf__blatt{fill:#F7F4EC;stroke:none}
.held__linien .pdf__falz{fill:none;stroke:#C9C1AF;stroke-width:1.3}
.held__linien .pdf__wort{fill:#2F5640;font:600 9.5px var(--font);letter-spacing:.03em;text-anchor:middle}
.held__linien .pdf__einflug rect{fill:#FFFFFF;stroke:var(--line);stroke-width:1}
.held__linien .pdf__einflug path{fill:none;stroke:var(--accent);stroke-width:1.4}
.held__linien .pdf__einflug{opacity:0}
.held__linien .pdf__etikett rect{fill:#FFFFFF;stroke:var(--line);stroke-width:1}
.held__linien .pdf__etikett circle{fill:#3D8C56}
.held__linien .pdf__etikett text{fill:#141A16;font:600 8.5px var(--font)}
@keyframes pdf-einflug{
  0%{transform:translate(-82px,-60px) rotate(-16deg) scale(1);opacity:0}
  12%{opacity:1}
  62%{transform:translate(-6px,-8px) rotate(-8deg) scale(.62);opacity:1}
  78%,100%{transform:translate(0,-2px) rotate(-8deg) scale(.3);opacity:0}
}
@keyframes pdf-annahme{0%,58%,100%{transform:scale(1)}68%{transform:scale(1.045)}}
@media (prefers-reduced-motion:no-preference){
  .held__linien .pdf__schwebe{animation:schweben-gerade 6s ease-in-out infinite}
  .held__linien .pdf__annahme{transform-box:fill-box;transform-origin:center;animation:pdf-annahme 4.5s ease-in-out infinite}
  .held__linien .pdf__boden{transform-box:fill-box;transform-origin:center;animation:schatten 6s ease-in-out infinite}
  .held__linien .pdf__einflug{transform-box:fill-box;transform-origin:center;animation:pdf-einflug 4.5s var(--ease-out) infinite}
  .held__linien .pdf__etikett circle{animation:kugel-punkt 2.4s infinite}
}
@media (max-width:999px){.held__linien .pdf{display:none}}

/* Karten rechts im Startbereich im Stil der PDF-Kachel: grün, gekippt, schwebend, weißes Etikett */
.held__karten{grid-template-columns:minmax(0,1fr);gap:1.75rem;align-items:start;padding-top:1rem;width:min(100%,300px)}
.held__karten .minikarte{
  --kipp:-4deg;overflow:visible;padding:1.55rem 1.1rem 1.15rem;border-radius:22px;color:#F1EFE6;
  background:linear-gradient(172deg,#4C8262 0%,#2F5640 55%,#24442F 100%); /* taste-skill-ignore: grüne Kachel wie die PDF-Kachel, Wunsch von Alex */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 0 -1px #1B3424,0 30px 40px -22px rgba(20,38,26,.5); /* taste-skill-ignore: Kachel mit Kante und Schatten */
  transform:rotate(var(--kipp));
}
.held__karten .minikarte:nth-child(1):not(:only-child){margin-right:2.5rem}
.held__karten .minikarte:nth-child(2){--kipp:4deg;margin-left:2.5rem}
.held__karten .minikarte::before{border-radius:inherit}
.minikarte > .minikarte__etikett{position:absolute;z-index:2;top:-13px;left:14px;display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:999px;
  background:#FFFFFF;color:#141A16;font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 0 0 1px rgba(20,26,22,.1)} /* taste-skill-ignore: Etikett wie „PDF-Import“ */
.minikarte__etikett i{width:6px;height:6px;border-radius:50%;background:#3D8C56;flex:none}
.held__karten .minikarte b{color:#F7F4EC}
.held__karten .minikarte small{color:rgba(241,239,230,.78)}
.held__karten .minikarte .gross{color:#F7F4EC;font-size:42px}
.held__karten .minikarte .chip{background:#F7F4EC;color:#2F5640}
@keyframes karte-schweben{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (prefers-reduced-motion:no-preference){
  .held__karten .minikarte{animation:karte-schweben 6s ease-in-out infinite}
  .held__karten .minikarte:nth-child(2){animation-delay:-3s}
  .minikarte__etikett i{animation:kugel-punkt 2.4s infinite}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .held__karten .minikarte:hover{transform:rotate(var(--kipp)) scale(1.03)}
}


/* Herkunft und „Ausprobieren“ in einer Zeile, damit der Bildtext auch auf niedrigen Bildschirmen in die Bühne passt */
.schaufenster__mehr{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:.75rem}
.schaufenster__text .schaufenster__mehr .marke-klein{margin-top:0}
.ist-gepinnt .schaufenster__mehr{justify-content:center}
@media (max-width:767px){
  .ist-gepinnt .schaufenster__mehr{justify-content:flex-start}
  .ist-gepinnt .schaufenster__text p:not(.marke-klein){font-size:.975rem;line-height:1.45}
  .ist-gepinnt .schaufenster__mehr .marke-klein{display:none}
}

/* Verschwiegenheit eingebaut: Schalter bauen sich auf, die Notizen fliegen ein (Wunsch vom 15.10.2026) */
@media (prefers-reduced-motion:no-preference){
  .tafel.ist-bereit .ui__schalter{opacity:0;transition:opacity .45s ease calc(var(--i,0) * 220ms)}
  .tafel.ist-bereit .ui__schalter > span{opacity:0;transform:translateX(-14px);transition:opacity .5s ease calc(var(--i,0) * 220ms + 80ms),transform .6s var(--ease-out) calc(var(--i,0) * 220ms + 80ms)}
  .tafel.ist-bereit .ui__kipp{transform:scaleX(.25);opacity:0;transform-origin:100% 50%;transition:transform .5s var(--ease-out) calc(var(--i,0) * 220ms + 160ms),opacity .3s ease calc(var(--i,0) * 220ms + 160ms),background-color .3s ease calc(var(--i,0) * 220ms + 560ms)}
  .tafel.ist-bereit .ui__kipp--an{background:#C9CDD1}
  .tafel.ist-bereit .ui__kipp::after{transition:left .45s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0) * 220ms + 520ms)}
  .tafel.ist-bereit .ui__kipp--an::after{left:3px}
  .tafel.ist-bereit .tafel__links .notiz{opacity:0;transform:translateX(-56px)}
  .tafel.ist-bereit .tafel__rechts .notiz{opacity:0;transform:translateX(56px)}
  .tafel.ist-bereit .notiz{transition:opacity .55s ease calc(var(--i,0) * 220ms + 480ms),transform .8s var(--ease-out) calc(var(--i,0) * 220ms + 480ms)}

  .tafel.ist-gebaut .ui__schalter,.tafel.ist-gebaut .ui__schalter > span,.tafel.ist-gebaut .ui__kipp{opacity:1}
  .tafel.ist-gebaut .ui__schalter > span{transform:none}
  .tafel.ist-gebaut .ui__kipp{transform:none}
  .tafel.ist-gebaut .ui__kipp--an{background:var(--ui-akzent)}
  .tafel.ist-gebaut .ui__kipp--an::after{left:19px}
  .tafel.ist-gebaut .tafel__links .notiz,.tafel.ist-gebaut .tafel__rechts .notiz{opacity:1;transform:none}
  .tafel.ist-fertig .ui__schalter,.tafel.ist-fertig .notiz{transition-delay:0s}
}
@media (max-width:1099px) and (prefers-reduced-motion:no-preference){
  .tafel.ist-bereit .tafel__links .notiz,.tafel.ist-bereit .tafel__rechts .notiz{transform:translateY(24px)}
}

/* Selbst gezeichnete Illustrationen (vorlage/illustrationen/, über {{illu:name}} eingesetzt) */
.illu{display:block;width:100%;height:auto;border-radius:var(--rund-gross);overflow:hidden;
  --il-grund:#F1EEE8;--il-kachel:#FFFFFF;--il-creme:#F6F1E6;--il-weich:#DCE9DF;--il-weich-dunkel:#C3D8C9;--il-stein:#E2DDD4;--il-stein-dunkel:#CFC8BD;--il-dicke:#1B3424;--il-gruen:#2F5640}
@media (prefers-color-scheme:dark){
  .illu{--il-grund:var(--surface);--il-kachel:#26302A;--il-creme:#2E3A31;--il-weich:#1F3326;--il-weich-dunkel:#18291E;--il-stein:#323D35;--il-stein-dunkel:#4A574E;--il-dicke:#0C1710}
}
.illu .g{fill:var(--il-grund)}
.illu .k{fill:var(--il-kachel)}
.illu .c{fill:var(--il-creme)}
.illu .w{fill:var(--il-weich)}
.illu .w-dunkel{fill:var(--il-weich-dunkel)}
.illu .s{fill:var(--il-stein)}
.illu .s-dunkel{fill:var(--il-stein-dunkel)}
.illu .a{fill:var(--il-gruen)}
.illu .a-pie{fill:var(--il-gruen);opacity:.18}
.illu .d{fill:var(--il-dicke)}
.illu .hell{fill:#FFFFFF}
.illu .glas{fill:var(--il-weich);opacity:.55}
.illu .ring{fill:none;stroke:var(--il-stein-dunkel);stroke-width:2.4}
.illu .linie{fill:none;stroke:var(--il-stein-dunkel);stroke-width:2;stroke-linecap:round}
.illu .l{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.illu .l--strich{stroke-dasharray:2 9}
.illu .l--leicht{stroke-width:2;opacity:.55}
.illu .l--dick{stroke-width:4.5}
.illu .l--lupe{stroke-width:11}
.illu .l--griff{stroke-width:15}
.illu .lw{fill:none;stroke:#FFFFFF;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.illu .sch{filter:drop-shadow(0 10px 14px rgba(28,44,34,.14))} /* taste-skill-ignore: Tiefe der gezeichneten Kacheln */
.illu .nr circle{fill:var(--il-kachel);stroke:var(--il-stein-dunkel);stroke-width:1.5}
.illu .nr text{fill:var(--accent);font:600 12px var(--font);text-anchor:middle}
.illu .preis{fill:#FFFFFF;font:600 22px var(--font);text-anchor:middle}
.bild--illu{margin:0}
@media (prefers-color-scheme:dark){.illu .sch{filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}} /* taste-skill-ignore: Tiefe der gezeichneten Kacheln im Dunkelmodus */

/* Illustrationen in Bewegung: Scroll-Werte aus effekte.js, Anheben beim Zeigen.
   Ohne Skript oder bei „Bewegung reduzieren“ gilt der fertige Zustand. */
@property --hv{syntax:"<number>";inherits:true;initial-value:0}
.illu{--sp:.5;--sf:1}
.bild--illu .illu,.referenz__bild .illu{transition:--hv .55s var(--ease-out),scale .6s var(--ease-out)}
.verzeichnis .illu{transition:--hv .55s var(--ease-out),opacity var(--t-ui) ease}
@media (hover:hover) and (pointer:fine){
  .bild--illu:hover .illu,.referenz__bild:hover .illu,.verzeichnis li:hover .illu{--hv:1}
  .bild--illu:hover .illu{scale:1.015}
}
@media (prefers-reduced-motion:no-preference){
  .illu .par-auf{transform:translateY(calc((.5 - var(--sp)) * 34px))}
  .illu .par-ab{transform:translateY(calc((var(--sp) - .5) * 26px))}
  .illu .par-links{transform:translateX(calc((.5 - var(--sp)) * 40px))}
  .illu .par-rechts{transform:translateX(calc((var(--sp) - .5) * 40px))}
  .illu .heb{transform:translateY(calc(var(--hv) * -7px))}
  .illu .heb-viel{transform:translateY(calc(var(--hv) * -12px))}
  .illu .wachs{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(calc(.2 + var(--sf) * .8))}
  .illu .wachs-quer{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(calc(.05 + var(--sf) * .95))}
  .illu .auf{opacity:clamp(0,calc((var(--sf) - var(--ab,.5)) * 7),1)}
  .illu .pop{transform-box:fill-box;transform-origin:center;transform:scale(clamp(.3,calc((var(--sf) - var(--ab,.5)) * 6 + .3),1));opacity:clamp(0,calc((var(--sf) - var(--ab,.5)) * 7),1)}
  .illu .landet{transform:translateY(calc((1 - var(--sf)) * var(--hoch,-40px)))}
  .illu .dreh{transform-box:view-box;transform:rotate(calc(var(--sp) * var(--grad,280deg)))}
  .illu .wippe{transform-box:view-box;transform:rotate(calc((var(--sp) - .5) * var(--grad,14deg)))}
  .illu .zeichne{stroke-dasharray:var(--len,600);stroke-dashoffset:calc(var(--len,600) * (1 - var(--sf)))}
  .illu .blinkt{animation:illu-blinken 2.4s ease-in-out infinite;animation-delay:var(--v,0s)}
  .illu .dampf{animation:illu-dampf 3s ease-in-out infinite;animation-delay:var(--v,0s)}
  .illu .tippt{animation:illu-tippen 1.4s ease-in-out infinite;animation-delay:var(--v,0s)}
  .illu .zieht{animation:illu-ziehen 26s linear infinite alternate}
}
@keyframes illu-blinken{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes illu-dampf{0%{opacity:0;transform:translateY(6px)}40%{opacity:.6}100%{opacity:0;transform:translateY(-10px)}}
@keyframes illu-tippen{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@keyframes illu-ziehen{from{transform:translateX(-30px)}to{transform:translateX(30px)}}

/* Formate der gezeichneten Bilder, Texte darin */
.bild--3-2 .illu,.referenz__bild .illu{aspect-ratio:3/2}
.bild--21-9 .illu{aspect-ratio:21/9}
@media (max-width:620px){.bild--21-9 .illu{aspect-ratio:4/3}}
.referenz__bild .illu{border-radius:var(--rund-gross)}
.illu .klein-hell{fill:#FFFFFF;font:600 10px var(--font);text-anchor:middle}
.illu .ziffer{fill:#2F5640;font:600 18px var(--font);text-anchor:end;font-variant-numeric:tabular-nums}
.illu .euro{fill:#2F5640;font:600 13px var(--font);text-anchor:middle}
.illu .para{fill:#FFFFFF;font:500 34px var(--titel);text-anchor:middle}
.illu .wolke{fill:none;stroke:var(--il-stein-dunkel);stroke-width:3;stroke-dasharray:9 9}
.illu .l--wand{stroke-width:4}
.illu .sonne{opacity:.9}
.illu .fels{fill:none;stroke:var(--il-stein-dunkel);stroke-width:4;stroke-linecap:round}
/* Branchen-Verzeichnis der Startseite: gezeichnetes Bild im ganzen 3:2-Format, mittig zur Liste */
.verzeichnis .illu{height:auto;aspect-ratio:3/2;top:50%;translate:0 -50%}
@media (max-width:900px){.verzeichnis .illu{translate:none}}

/* ── Zeitrechner (Startseite): Ihre Zahlen, vorsichtig gerechnet ──
   Links die Regler auf hellem Blatt, rechts das Ergebnis auf dem dunklen Rahmen.
   Ohne Skript stehen die Beispielwerte da. */
.rechner__kopf{display:grid;justify-items:center;gap:1rem;text-align:center;max-width:900px;margin:0 auto clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.rechner__marke{display:inline-flex;align-items:center;gap:.5rem;min-height:36px;padding:0 1rem 0 .8rem;border-radius:999px;background:var(--surface);color:var(--accent);font-size:var(--step-small);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.rechner__marke svg{width:18px;height:18px}
.rechner__kopf h2{font-size:var(--step-head);line-height:1.02;max-width:16ch}
.rechner__kopf > p:last-child{color:var(--muted);font-size:var(--step-lead);line-height:1.35;max-width:34ch}

.rechner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--spalt);align-items:start;max-width:1280px;margin-inline:auto}
.rechner__regler{display:grid;gap:clamp(1.75rem,1.2rem + 1.4vw,2.5rem);padding:clamp(1.5rem,1rem + 2.4vw,3.25rem);border-radius:var(--rund-gross);background:var(--surface)}
.regler{display:grid;gap:.3rem}
.regler__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:600;line-height:1.3;cursor:pointer}
.regler__kopf output{min-width:3ch;text-align:right;white-space:nowrap;color:var(--accent);font-size:var(--step-lead);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.regler__hinweis{color:var(--muted);font-size:var(--step-small)}
.regler__hinweis b{color:var(--ink);font-variant-numeric:tabular-nums}
.regler input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y;
  --fuell:calc(14px + var(--p,.5) * (100% - 28px))}
.regler input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0 var(--fuell),var(--surface-2) var(--fuell) 100%)} /* taste-skill-ignore: Füllstand des Reglers, kein Schmuckverlauf */
.regler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#FFFFFF;
  box-shadow:0 0 0 1px rgba(20,26,22,.14),0 3px 10px rgba(20,26,22,.18);transition:transform var(--t-press) var(--ease-out),box-shadow var(--t-hover) ease} /* taste-skill-ignore: der Griff braucht Tiefe zum Greifen */
.regler input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--surface-2)}
.regler input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--accent)}
.regler input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 1px rgba(20,26,22,.14),0 3px 10px rgba(20,26,22,.18)} /* taste-skill-ignore: der Griff braucht Tiefe zum Greifen */
.regler input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.regler input[type=range]:focus-visible{outline:none}
.regler input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}
.regler input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}

.annahmen{padding-top:1.25rem;border-top:1px solid var(--line)}
.annahmen summary{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;list-style:none;color:var(--accent);font-weight:600;cursor:pointer}
.annahmen summary::-webkit-details-marker{display:none}
.annahmen summary::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform var(--t-ui) var(--ease-out)}
.annahmen[open] summary::after{transform:translateY(.12em) rotate(-135deg)}
.annahmen__tabelle{width:100%;margin:.75rem 0 1rem;border-collapse:collapse;font-size:var(--step-small)}
.annahmen__tabelle th,.annahmen__tabelle td{padding:.35rem 0;text-align:left;font-weight:400;vertical-align:middle}
.annahmen__tabelle thead th{color:var(--muted);font-weight:600}
.annahmen__tabelle thead th + th,.annahmen__tabelle td{width:5.5rem;text-align:center}
.annahmen__tabelle input{width:4.5rem;min-height:44px;border:0;border-radius:var(--rund-klein);background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);
  font:600 var(--step-body)/1 var(--font);font-variant-numeric:tabular-nums;text-align:center;-moz-appearance:textfield;appearance:textfield}
.annahmen__tabelle input::-webkit-inner-spin-button,.annahmen__tabelle input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.annahmen > p{color:var(--muted);font-size:var(--step-small)}

.rechner__ergebnis{position:sticky;top:clamp(1rem,3vh,2rem);display:grid;gap:1.5rem;padding:clamp(1.75rem,1rem + 2.6vw,3.25rem);border-radius:var(--rund-gross);overflow:hidden;color:var(--rahmen-tinte);
  background:radial-gradient(70% 55% at 85% 0%,rgba(185,216,194,.18),transparent 70%),var(--rahmen); /* taste-skill-ignore: Lichthof wie im dunklen Satzblock nach Entwurf von Alex */
  box-shadow:inset 0 0 0 1px rgba(185,216,194,.12)} /* taste-skill-ignore: Kante im Dunkelmodus */
.ergebnis__etikett{color:var(--rahmen-leise);font-size:var(--step-small);font-weight:600}
.ergebnis__zahl{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .3em;margin-top:-.75rem;line-height:.95}
.ergebnis__zahl b{font-size:clamp(4.5rem,2.5rem + 6vw,8.5rem);font-weight:500;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ergebnis__zahl .betont{color:var(--rahmen-akzent);font-size:clamp(1.75rem,1.2rem + 1.6vw,2.75rem)}
.ergebnis__drei{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.18fr) minmax(0,1.1fr);margin:0;padding-block:1.25rem;border-block:1px solid rgba(236,235,225,.14)}
.ergebnis__drei > div{padding-inline:clamp(.75rem,1.4vw,1.25rem)}
.ergebnis__drei > div:first-child{padding-left:0}
.ergebnis__drei > div + div{box-shadow:-1px 0 0 rgba(236,235,225,.14)} /* taste-skill-ignore: Trenner der Zahlenreihe */
.ergebnis__drei dt{white-space:nowrap;font-size:clamp(1.5rem,1.1rem + .9vw,2rem);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ergebnis__drei dd{margin:.35rem 0 0;color:var(--rahmen-leise);font-size:var(--step-small);line-height:1.3}
.ergebnis__balken{display:grid;gap:.8rem}
.ergebnis__balken li{display:grid;grid-template-columns:9.5rem minmax(0,1fr) 4.25rem;align-items:center;gap:1rem;font-size:var(--step-small)}
.ergebnis__balken li > span:first-child{color:var(--rahmen-leise)}
.ergebnis__balken b{text-align:right;font-variant-numeric:tabular-nums}
.balken{display:block;height:8px;border-radius:999px;background:rgba(236,235,225,.12);overflow:hidden}
.balken > span{display:block;width:calc(var(--b,0) * 100%);height:100%;border-radius:inherit;background:var(--rahmen-akzent);transition:width 520ms var(--ease-out)}
.ergebnis__satz{color:var(--rahmen-tinte);font-family:var(--titel);font-style:italic;font-weight:500;font-size:var(--step-lead);line-height:1.3;letter-spacing:-.01em}
.rechner__ergebnis .knopf{justify-self:start}
.ergebnis__fuss{color:var(--rahmen-leise);font-size:var(--step-small)}
.rechner__kurz{display:none}
.rechner__kurz span,.ohne-umbruch{white-space:nowrap}

.vorteile{max-width:1280px;margin:clamp(3rem,2rem + 3vw,5rem) auto 0}
.vorteile__titel{margin-bottom:1.5rem;text-align:center;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);font-weight:500;letter-spacing:-.025em}
.vorteile__liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spalt)}
.vorteile__liste li{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;gap:.5rem;padding:1.5rem;border-radius:var(--rund-gross);background:var(--surface);transition:translate var(--t-ui) var(--ease-out)}
.vorteile__liste svg{width:44px;height:44px;margin-bottom:.5rem;padding:10px;border-radius:var(--rund-klein);background:var(--mark);color:var(--accent)}
.vorteile__liste b{line-height:1.25}
.vorteile__liste span{color:var(--muted);font-size:var(--step-small)}
@media (hover:hover) and (pointer:fine){.vorteile__liste li:hover{translate:0 -4px}}

@media (max-width:1099px){
  .vorteile__liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .rechner{grid-template-columns:minmax(0,1fr)}
  .rechner__ergebnis{position:relative;top:auto}
  .rechner__kurz{position:sticky;bottom:12px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-inline:-.5rem;padding:.4rem .4rem .4rem 1.1rem;border-radius:999px;
    background:var(--rahmen);color:var(--rahmen-tinte);font-size:var(--step-small);box-shadow:0 8px 24px rgba(16,20,23,.25)} /* taste-skill-ignore: schwebende Leiste über den Reglern */
  .rechner__kurz b{font-variant-numeric:tabular-nums}
  .rechner__kurz a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.1rem;border-radius:999px;background:var(--night-accent);color:var(--night);font-weight:600;text-decoration:none}
}
@media (max-width:560px){
  .vorteile__liste{grid-template-columns:minmax(0,1fr)}
  .ergebnis__drei{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .ergebnis__drei > div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:0}
  .ergebnis__drei > div + div{box-shadow:none}
  .ergebnis__drei dd{margin:0;text-align:right}
  .ergebnis__balken li{grid-template-columns:minmax(0,1fr) 3.75rem;gap:.35rem 1rem}
  .ergebnis__balken li .balken{grid-column:1 / -1;grid-row:2}
  .regler__kopf{font-size:var(--step-small)}
}
@media (prefers-reduced-motion:reduce){
  .balken > span,.vorteile__liste li,.regler input[type=range]::-webkit-slider-thumb{transition:none}
}