/* Michler IT · michlerit.de · Stylesheet
   Quelle aller Werte: 03-corporate-design/03-corporate-design.md (Typo-Skala §1, Farben §2, Raster §3, Logo §4, Formen §5, Motion §7, Tokens §10).
   Regeln: 1-px-Linien, Ecken 2 px (Bedienelemente) / 4 px (Karten), keine Schatten, keine Verläufe, keine Icons.
   Patina (Grünspan) nur als Zustand: geprüft, aktiv, erledigt. */

/* ---------- Schriften (Subsets, selbst gehostet) ---------- */
@font-face{font-family:"Fraunces";src:url("../fonts/Fraunces-VF.woff2") format("woff2");font-weight:100 900;font-stretch:normal;font-display:swap}
@font-face{font-family:"Recursive";src:url("../fonts/Recursive-VF.woff2") format("woff2");font-weight:300 1000;font-display:swap}

/* Achsen als registrierte Eigenschaften, damit CSS sie interpolieren kann */
@property --wght{syntax:"<number>";inherits:true;initial-value:400}
@property --opsz{syntax:"<number>";inherits:true;initial-value:18}
@property --soft{syntax:"<number>";inherits:true;initial-value:0}
@property --wonk{syntax:"<number>";inherits:true;initial-value:0}
@property --mono{syntax:"<number>";inherits:true;initial-value:0}
@property --p{syntax:"<number>";inherits:true;initial-value:0}

/* ---------- Tokens ---------- */
:root{
  --kalk:#F1F1EC; --sand:#E8E7DF; --tinte:#13232C; --schiefer:#1B2B35; --watt:#5B6670; --nebel:#A7B0B6; --patina:#1D6A53; --patina-hell:#6FC2A3;
  --bg:var(--kalk); --surface:var(--sand); --fg:var(--tinte); --muted:var(--watt); --signal:var(--patina);
  --line:#C9C8C0;
  --t1:120ms; --t2:240ms; --t3:480ms; --ease:cubic-bezier(.2,.8,.2,1);
  --header:64px; --gutter:24px; --outer:clamp(16px,5vw,80px); --max:1120px;
  --wght:400; --opsz:18; --soft:0; --wonk:0; --mono:0;
  color-scheme:light;
}
@supports (color:color-mix(in srgb,#000 30%,transparent)){:root{--line:color-mix(in srgb,var(--fg) 30%,transparent)}}
html[data-theme="dark"]{--bg:var(--tinte);--surface:var(--schiefer);--fg:var(--kalk);--muted:var(--nebel);--signal:var(--patina-hell);color-scheme:dark}
@media (prefers-color-scheme:dark){html[data-theme="auto"]{--bg:var(--tinte);--surface:var(--schiefer);--fg:var(--kalk);--muted:var(--nebel);--signal:var(--patina-hell);color-scheme:dark}}
@media (min-width:1280px){:root{--gutter:32px}}

/* ---------- Grund ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Fraunces",Georgia,"Times New Roman",serif;font-size:18px;line-height:28px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal;overflow-x:clip}
/* Jedes Element löst die Achsen aus seinen eigenen Variablen auf (font-variation-settings vererbt nur den berechneten Wert) */
body,body *{font-variation-settings:"opsz" var(--opsz),"wght" var(--wght),"SOFT" var(--soft),"WONK" var(--wonk),"MONO" var(--mono)}
@media (max-width:719px){body{font-size:17px;line-height:27px;--opsz:17}}
p{margin:0 0 1em;max-width:62ch}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;transition:text-decoration-color var(--t1) var(--ease)}
a:hover{text-decoration-color:var(--signal)}
::selection{background:var(--signal);color:var(--bg)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
img,svg{display:block;max-width:100%}
ol,ul{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--outer);top:-100px;z-index:20;background:var(--fg);color:var(--bg);padding:.5rem .8rem;border-radius:2px;font-family:"Recursive",ui-monospace,monospace;font-size:14px;text-decoration:none}
.skip:focus{top:calc(var(--header) + 8px)}

/* ---------- Typografie ---------- */
.hero-h .ph{white-space:nowrap}
.hero-h .ln{display:block}
@media (max-width:719px){.hero-h .ln{display:inline}}
.hero-h{font-size:clamp(44px,8vw + 20px,101px);line-height:.95;--opsz:144;--wght:300;letter-spacing:-.02em;margin:0 0 .35em;text-wrap:balance;max-width:none}
.d1{font-size:clamp(40px,6vw,76px);line-height:1;--opsz:144;--wght:300;letter-spacing:-.02em;margin:0;text-wrap:balance;max-width:none}
.d2{font-size:clamp(34px,4.6vw,57px);line-height:1.05;--opsz:144;--wght:300;letter-spacing:-.015em;margin:0;text-wrap:balance;max-width:none}
.h1{font-size:clamp(30px,3.4vw,43px);line-height:1.12;--opsz:72;--wght:360;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance;max-width:none}
.h2{font-size:clamp(26px,2.6vw,32px);line-height:1.25;--opsz:72;--wght:360;letter-spacing:-.005em;margin:0 0 .5em;max-width:none}
.h3{font-size:24px;line-height:32px;--opsz:36;--wght:400;margin:0 0 .3em;max-width:none}
.lead{font-size:clamp(20px,1.8vw,24px);line-height:1.5;--opsz:24;--wght:340;max-width:52ch}
.small{font-size:14px;line-height:20px;--opsz:14}
.muted{color:var(--muted)}
.label,.data,.fig-n,code,pre,.btn,.ctl{font-family:"Recursive",ui-monospace,SFMono-Regular,Menlo,monospace}
.label{font-size:13px;line-height:16px;--wght:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem;max-width:none}
.data{font-variant-numeric:tabular-nums;--wght:400}
code,pre{--mono:1;font-size:.92em;font-variant-numeric:tabular-nums}
strong,b{--wght:600;font-weight:600}
em,i{font-style:normal;--wght:600} /* keine Kursive im System */
.tag{display:inline-block;vertical-align:.25em;margin-left:.5em;font-family:"Recursive",monospace;font-size:12px;line-height:18px;--wght:500;--opsz:14;letter-spacing:.04em;text-transform:uppercase;color:var(--signal);border:1px solid currentColor;border-radius:2px;padding:0 .45em}

/* ---------- Raster ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--outer);padding-right:var(--outer)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--gutter)}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-7{grid-column:span 7}.col-8{grid-column:span 8}
@media (max-width:899px){.grid>[class^="col-"]{grid-column:span 12}}
section.wrap,section .wrap{scroll-margin-top:calc(var(--header) + 24px)}
section{padding-top:clamp(64px,10vw,128px);padding-bottom:clamp(40px,6vw,80px)}
.reading p{max-width:62ch}

/* ---------- Kopf ---------- */
.top{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:clamp(16px,2.5vw,40px);min-height:var(--header)}
.brand{display:inline-flex;align-items:baseline;gap:.2em;font-size:34px;line-height:1;--opsz:72;--wght:420;letter-spacing:0;text-decoration:none;white-space:nowrap;flex:none}
.brand-word{line-height:1;display:block;transform:translateY(0)}
.brand .mark{height:.708em;width:auto;overflow:visible;transform:translateY(.012em)}
.brand .mark path{fill:currentColor;transition:fill var(--t2) var(--ease)}
/* Haken bleibt in Tintenfarbe wie der Rest der Marke */
.nav{display:flex;gap:clamp(12px,2vw,28px);font-family:"Recursive",monospace;font-size:14px;--wght:450;letter-spacing:.01em}
.nav a{text-decoration:none;border-bottom:1px solid transparent;padding:4px 0;transition:border-color var(--t1) var(--ease)}
.nav a:hover,.nav a[aria-current]{border-color:var(--fg)}
.controls{margin-left:auto;display:flex;gap:8px;align-items:center}
.ctl{appearance:none;border:1px solid var(--line);background:transparent;color:var(--fg);font-size:13px;line-height:16px;--wght:500;letter-spacing:.02em;padding:7px 10px;border-radius:2px;cursor:pointer;min-height:32px;text-decoration:none;transition:background var(--t1) var(--ease),color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.ctl:hover{border-color:var(--fg)}
.ctl[aria-pressed="true"]{border-color:var(--signal);color:var(--signal)}
@media (max-width:899px){.nav{display:none}}
.menu{position:relative;display:none}
.menu summary{list-style:none;display:inline-flex;align-items:center}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:var(--fg)}
.menu-list{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--bg);border:1px solid var(--line);border-radius:2px;padding:8px 0;display:flex;flex-direction:column;font-family:"Recursive",monospace;font-size:16px;--wght:450;box-shadow:0 12px 32px rgba(0,0,0,.12)}
.menu-list a{display:block;padding:12px 20px;text-decoration:none;min-height:44px}
.menu-list a:hover{background:var(--surface)}
@media (max-width:899px){.menu{display:block}}
.lg-short{display:none}
@media (max-width:599px){.lg-long{display:none}.lg-short{display:inline}}
@media (max-width:479px){.brand{font-size:30px}.ctl{padding:7px 8px}}

/* ---------- Schaltflächen ---------- */
.btn{display:inline-block;border:1px solid var(--fg);color:var(--fg);background:transparent;text-decoration:none;font-size:15px;line-height:20px;--wght:500;letter-spacing:.01em;padding:11px 18px;border-radius:2px;min-height:44px;transition:background var(--t1) var(--ease),color var(--t1) var(--ease)}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn.primary{background:var(--fg);color:var(--bg)}
.btn.primary:hover{background:transparent;color:var(--fg)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:1.5rem 0 1rem}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(56px,12vh,140px);padding-bottom:clamp(32px,6vw,72px);min-height:calc(100svh - var(--header));display:flex;flex-direction:column;justify-content:center}
.lens{cursor:crosshair;touch-action:pan-y}
.lens .w{display:inline-block;white-space:nowrap}
.lens .l{display:inline-block;--wght:300;will-change:font-variation-settings}
.lens .l.space{width:.22em}

/* ---------- Leistungen ---------- */
.offer-list{border-top:1px solid var(--line)}
.offer{display:grid;grid-template-columns:3.5rem 1fr;gap:0 var(--gutter);padding:28px 0;border-bottom:1px solid var(--line)}
.offer .num{padding-top:8px;margin:0}
.offer p{margin:0}
@media (max-width:479px){.offer{grid-template-columns:1fr}.offer .num{margin-bottom:6px}}

/* ---------- Geschichte ---------- */
/* ===================== Begleiter (dog.js) ===================== */
.dog{position:fixed;left:0;top:0;z-index:5;pointer-events:none;overflow:visible;will-change:transform}
.dog path,.dog circle{fill:var(--fg)}
/* nahe Läufe tragen einen Haarlinien-Saum in Hintergrundfarbe: er trennt sie von fernen Läufen und Rute, der Rumpf deckt ihn an den Wurzeln */
.dog .near{paint-order:stroke;stroke:var(--bg);stroke-width:1.6px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dog-dot{position:fixed;z-index:4;pointer-events:none;margin:0;padding:0;display:none}
.dw{display:inline-block}
.dw-g{white-space:nowrap}
/* Zwilling: fixierte Zeichenkopie einer Überschrift, solange der Hund darauf steht; das Original wird unsichtbar, bleibt aber markierbar */
.dog-twin{position:fixed;left:0;top:0;pointer-events:none;user-select:none;z-index:4;white-space:pre}
.dog-twin span{position:absolute;display:block;transform-origin:50% 85%;will-change:transform}
.dog-ghost{color:transparent}
/* Abschnittsmarke weicht, solange der Hund auf der Überschrift darunter steht */
.label.dog-yield{opacity:.1;transition:opacity .35s}
.hero-h .l{transform-origin:50% 85%}
.dog-crumb{position:fixed;left:0;top:0;pointer-events:none;z-index:4;margin:0;padding:0;line-height:1}

/* ===================== Vorhaben ===================== */
.projects{padding-bottom:clamp(40px,6vw,80px)}
.proj-intro{max-width:52ch;margin:0;align-self:end;padding-bottom:.6em}
.proj-list{list-style:none;margin:clamp(24px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,56px) var(--gutter)}
.proj{border-top:1px solid var(--fg);padding-top:20px}
.proj .h3{margin-bottom:.9em}
.proj-rows{margin:0;display:grid;gap:14px}
.proj-row dt{margin:0 0 2px}
.proj-row dd{margin:0;font-size:16px;line-height:24px;--opsz:16}
.proj-row.tools dd{font-family:"Recursive",ui-monospace,monospace;font-size:13px;line-height:20px;--wght:450;--opsz:14;color:var(--muted)}
.proj-row.tools{padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:899px){.proj-list{grid-template-columns:1fr}}
.story{position:relative;padding-bottom:0}
.story-head{padding-bottom:clamp(24px,4vw,56px)}
.chapter{height:260vh;position:relative;overflow:clip}
.pin{position:sticky;top:var(--header);height:calc(100vh - var(--header));height:calc(100svh - var(--header));display:flex;align-items:center}
.scene{position:relative;width:100%;z-index:1}
.scene>.label{position:relative;z-index:2}
.scene-text{position:relative;z-index:2}
.scene-text .w{display:inline-block;will-change:transform}
.art{position:absolute;pointer-events:none;z-index:0}
.art path,.art line,.art rect,.art polygon{fill:none;stroke:var(--fg);stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.art .fill{fill:var(--surface)}
.chapter-body{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.chapter-body .side{border-left:1px solid var(--line);padding-left:var(--gutter)}
@media (max-width:899px){.chapter-body .side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:var(--gutter)}}
@media (max-height:600px){.chapter{height:220vh}}
@media (max-height:520px){.chapter{height:auto}.pin{position:relative;top:auto;height:auto;padding:clamp(32px,6vw,72px) 0}.path{display:none}}

/* Pfad am linken Rand (nur breite Bildschirme) */
.path{position:absolute;left:calc(var(--outer) / 2 - 1px);top:0;bottom:0;width:2px;display:none}
.path-line{position:absolute;inset:0 0 0 0;background:var(--line);width:1px}
.path-fill{position:absolute;left:0;top:0;width:1px;height:0;background:var(--fg)}
.path-walker{position:absolute;left:-10px;top:0;width:22px;height:auto;transform:translateY(-50%);overflow:visible}
.path-walker path{fill:var(--fg);transition:fill var(--t2) var(--ease)}
.path-walker.done path{fill:var(--signal)}
@media (min-width:1180px){.path{display:block}}

/* Kapitel 1 – Leuchtturm */
.art-lighthouse{left:0;right:0;top:0;bottom:0;width:100%;height:100%}
.art-lighthouse .beam{fill:var(--surface);stroke:none;opacity:0;transition:opacity var(--t3) var(--ease)}
.art-lighthouse.lit .beam{opacity:1}
.art-lighthouse .lamp{fill:var(--bg);transition:fill var(--t2) var(--ease)}
.art-lighthouse.lit .lamp{fill:var(--signal);stroke:var(--signal)}
.art-lighthouse .boat{will-change:transform}
.art-lighthouse .boat path:first-child{fill:var(--surface)}
.scene-words .w{--wght:300;color:var(--muted);text-align:center;transition:color var(--t2) var(--ease),--wght var(--t2) var(--ease)}
.scene-words .w.lit{--wght:500;color:var(--fg)}
.scene-words.measuring .w{--wght:500;transition:none}
.scene-words.nt .w{transition:none}
#ch1 .scene{padding-bottom:clamp(120px,22vh,220px)}
#ch1 .scene-text{max-width:14em}

/* Kapitel 2 – Der Haken wandert */
.steps{margin-top:1.5rem;font-size:clamp(20px,2.2vw,28px);line-height:1.45;max-width:26ch;position:relative}
.step{padding:.3em 0;will-change:transform}
.step-text{display:inline;--opsz:32;--wght:300;--soft:100;--wonk:1;color:var(--muted);transition:color var(--t3) var(--ease),--wght var(--t3) var(--ease),--soft var(--t3) var(--ease)}
.step.unchecked .step-text{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:var(--line);text-underline-offset:.22em;text-decoration-thickness:1px}
.step.ok .step-text{--wght:420;--soft:0;--wonk:0;color:var(--fg)}
.walker{position:absolute;left:0;top:0;width:1.1em;height:auto;font-size:clamp(20px,2.2vw,28px);pointer-events:none;transform:translate(-999px,-999px);will-change:transform;overflow:visible;z-index:3}
.walker path{fill:var(--signal)}
.record-wrap{align-self:end}
.record{margin:0;font-size:14px;line-height:22px;--mono:1;--wght:400;color:var(--muted);white-space:pre-wrap;border-left:1px solid var(--line);padding-left:var(--gutter)}
/* Protokoll: Schlüssel steht, der Wert wird erst geschrieben, wenn der Haken die Stufe erreicht – kein Geistertext */
.rec-line{display:block;transition:color var(--t2) var(--ease)}
.rec-v{opacity:0;visibility:hidden;transition:opacity var(--t2) var(--ease),visibility 0s linear var(--t2)}
.rec-line.on{color:var(--fg)}
.rec-line.on .rec-v{opacity:1;visibility:visible;transition:opacity var(--t2) var(--ease),visibility 0s}
.rec-k{display:inline-block;min-width:11ch;color:var(--muted)}
.rec-line.on .rec-k{color:var(--signal)}
@media (max-width:899px){.steps{padding-left:calc(1.1em + 12px)}.record-wrap{align-self:start;margin-top:20px}.record{font-size:13px;line-height:20px;border-left:0;padding-left:calc(1.1em + 12px);border-top:1px solid var(--line);padding-top:12px}.rec-k{min-width:11ch}}
@media (max-width:899px) and (max-height:700px){.record-wrap{display:none}}
@media (max-height:640px){.steps{font-size:20px}}

/* Kapitel 3 – Besitzen: Wolke oben, Boden unten – der Fall hat Strecke */
#ch3 .pin{align-items:flex-end}
#ch3 .scene{padding-bottom:clamp(48px,10vh,120px)}
.art-cloud{position:relative;width:clamp(180px,28vw,340px);height:auto;margin:0 0 clamp(48px,16vh,200px) clamp(0px,14vw,180px);transition:opacity var(--t3) var(--ease)}
.art-cloud path{stroke-dasharray:2 5;fill:none}
#ch3 .scene-text{max-width:18em}
#ch3 .scene-text .w{--wght:300;will-change:transform;transition:--wght var(--t2) var(--ease),color var(--t2) var(--ease)}
#ch3 .scene-text .w.flying{--wght:200;color:var(--muted)}
.dike{position:relative;margin-top:clamp(12px,2.4vh,24px);height:1px;background:var(--fg);transform-origin:left;transform:scaleX(0);transition:transform var(--t3) var(--ease)}
.dike.on{transform:scaleX(1)}
.house{position:absolute;right:0;bottom:1px;width:clamp(28px,3vw,40px);height:auto;overflow:visible;opacity:0;transition:opacity var(--t2) var(--ease)}
.dike.on .house{opacity:1}
.house path{fill:var(--fg)}

/* ---------- Kennzahlen ---------- */
.fig{margin-bottom:2.5rem}
.fig:last-child{margin-bottom:0}
.fig-n{display:block;font-size:clamp(40px,4.6vw,57px);line-height:1.05;--wght:300;--mono:0;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.fig-rule{display:block;height:1px;background:var(--fg);width:var(--w,60%);margin:.5rem 0 .75rem;transform-origin:left;transform:scaleX(1);transition:transform var(--t3) var(--ease),background var(--t2) var(--ease)}
.fig.sig .fig-rule{background:var(--signal)}
.fig-text{font-size:15px;line-height:22px;--opsz:15;color:var(--muted);margin:0;max-width:34ch}
/* Fußnoten: Zielgröße ≥ 24 px (WCAG 2.5.8), ohne den Zeilenrhythmus zu stören */
.fn,.fn-back{display:inline-block;min-width:24px;min-height:24px;line-height:24px;margin:-6px 0;text-align:center;text-decoration:none;color:var(--muted);font-family:"Recursive",monospace;--mono:1}
.fn{font-size:12px;vertical-align:.1em}
.fn-back{font-size:13px;vertical-align:0}
.fn:hover,.fn-back:hover{color:var(--signal)}

/* ---------- Quellen ---------- */
.source-list{font-size:15px;line-height:22px;--opsz:15;border-top:1px solid var(--line)}
.source-list li{display:grid;grid-template-columns:3.5rem 1fr;gap:0 var(--gutter);padding:12px 0;border-bottom:1px solid var(--line)}
.source-list .num{margin:0;padding-top:3px}
.source-list a{word-break:break-word}
.source-list li:target{box-shadow:none;border-left:2px solid var(--signal);padding-left:12px}

/* ---------- Arbeitsweise, Über, FAQ ---------- */
.method-list li{display:grid;grid-template-columns:3.5rem 1fr;gap:0 var(--gutter);padding:24px 0;border-top:1px solid var(--line)}
.method-list li:last-child{border-bottom:1px solid var(--line)}
.method-list .num{margin:0;padding-top:8px}
.method-list p{margin:0}
.facts{display:grid;gap:1rem;margin-top:1.5rem}
.facts dt{margin:0 0 2px}
.facts dd{font-size:15px;line-height:22px;--opsz:15}
.qa{padding:20px 0;border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa p{margin:0}

/* ---------- Kontakt, Fuß ---------- */
.contact{padding-bottom:clamp(64px,10vw,128px)}
.contact-dl{display:grid;gap:1.25rem;align-content:start;padding-top:.5rem}
.contact-dl dt{margin:0 0 4px}
.contact-dl dd a{text-decoration:none;border-bottom:1px solid var(--line)}
.contact-dl dd a:hover{border-color:var(--signal)}
.foot{border-top:1px solid var(--line);padding:40px 0 64px}
.foot p{margin:0 0 .4rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px;align-content:start;font-family:"Recursive",monospace;font-size:14px;--wght:450}
.foot-nav a{text-decoration:none;border-bottom:1px solid var(--line)}
.foot-nav a:hover{border-color:var(--fg)}
@media (min-width:900px){.foot-nav{justify-content:flex-end}}
.settings{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.settings .label{margin-bottom:12px}
.settings-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.settings-row p{margin:0;flex:1 1 32ch}

/* ---------- Rechtliches ---------- */
.legal-page{padding-bottom:clamp(64px,10vw,128px)}
.legal-dl>div{padding:16px 0;border-top:1px solid var(--line)}
.legal-dl>div:last-child{border-bottom:1px solid var(--line)}
.legal-dl dt{margin:0 0 4px}
.legal-page .h3{margin-top:2rem}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html[data-motion="auto"]{--t1:0ms;--t2:0ms;--t3:0ms;scroll-behavior:auto}
  html[data-motion="auto"] .chapter{height:auto}
  html[data-motion="auto"] .pin{position:relative;top:auto;height:auto;min-height:0;padding:clamp(32px,6vw,72px) 0}
}
html[data-motion="reduced"]{--t1:0ms;--t2:0ms;--t3:0ms;scroll-behavior:auto}
html[data-motion="reduced"] .chapter{height:auto}
html[data-motion="reduced"] .pin{position:relative;top:auto;height:auto;min-height:0;padding:clamp(32px,6vw,72px) 0}
html[data-motion="reduced"] .path{display:none}
/* Ohne JavaScript: alles steht, nichts fehlt */
html:not(.js) .chapter{height:auto}
html:not(.js) .pin{position:relative;top:auto;height:auto;padding:clamp(32px,6vw,72px) 0}
html:not(.js) .scene-words .w,html:not(.js) .step-text{color:var(--fg);--wght:400;--soft:0;--wonk:0}
html:not(.js) .step.unchecked .step-text{text-decoration:none}
html:not(.js) .art-lighthouse,html:not(.js) .walker,html:not(.js) .path{display:none}
html:not(.js) .dike{transform:none}
html:not(.js) .house{opacity:1}
html:not(.js) .rec-v{opacity:1;visibility:visible}
html:not(.js) .ctl[data-toggle]{display:none}
html:not(.js) .settings{display:none}
/* Druck: Text schwarz auf weiß, keine Bewegung, keine Bedienelemente */
@media print{
  :root{--bg:#fff;--fg:#000;--muted:#333;--line:#999}
  html,body{background:#fff;color:#000}
  .skip,.controls,.nav,.menu,.settings,.dog,.dog-dot,.dog-twin,.dog-crumb,.art,.path,.walker,.art-lighthouse,canvas{display:none !important}
  .dog-ghost{color:inherit !important}
  .hero{min-height:0;padding-top:12mm}
  .hero-h .l{--wght:300}
  .top{position:static;border-bottom:1px solid #000}
  .chapter{height:auto;overflow:visible}
  .pin{position:static;height:auto;padding:12mm 0;display:block}
  .scene-words .w,.step-text,.h1,.h2,.lead,p{color:#000;--wght:400;--soft:0;--wonk:0;transform:none !important;opacity:1 !important;visibility:visible !important}
  .step.unchecked .step-text{text-decoration:none}
  .rec-v,.house{opacity:1;visibility:visible}
  a{color:#000;text-decoration:underline}
  .reading a[href^="http"]::after,.foot a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#333}
  .btn{border:1px solid #000;color:#000;background:#fff}
  section,.grid{break-inside:avoid-page}
  h1,h2,h3{break-after:avoid}
  .foot{border-top:1px solid #000;margin-top:12mm}
}