/* punkte-in-note.de – Design "Schulheft". Eine Datei, kein Build. Mobil zuerst, Desktop ab 840px. */

/* ---------- Schriften (selbst gehostet, OFL; siehe assets/fonts/OFL-*.txt) ---------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(/assets/fonts/bricolage-grotesque-latin.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:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/assets/fonts/figtree-latin.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:'Caveat';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/caveat-latin-ext-700.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/caveat-latin-700.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}

/* Fallbacks mit angepassten Metriken (gegen Layoutsprung beim Schriftwechsel; Werte aus hmtx/hhea gegen Arial) */
@font-face{font-family:'Figtree Fallback';src:local('Arial'),local('Liberation Sans'),local('Helvetica');
  size-adjust:101%;ascent-override:94.1%;descent-override:24.8%;line-gap-override:0%}
@font-face{font-family:'Bricolage Fallback';font-weight:700 800;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Helvetica Bold');
  size-adjust:103.7%;ascent-override:89.7%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:'Caveat Fallback';src:local('Arial'),local('Liberation Sans'),local('Helvetica');
  size-adjust:77%;ascent-override:124.7%;descent-override:39%;line-gap-override:0%}

/* ---------- Tokens: siehe tokens.css (wird vor dieser Datei geladen; Regel: neue Werte nur aus den Skalen dort) ---------- */

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-text);font-size:var(--fs-4);line-height:var(--lh-body)}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-disp);font-weight:800;line-height:var(--lh-tight);margin:0}
a{color:var(--red-text)}
a:hover{color:#7E2A19}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:var(--focus)}
.wrap{max-width:1184px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} /* Entwurf: 1120 px Inhalt + 2 x 32 px Rand */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero,.calc,.site-header,.site-footer{line-height:normal} /* Entwurf setzt keine Zeilenhoehe */

.page{position:relative;overflow-x:clip;display:flow-root} /* flow-root: der margin-top der Sticky-Leiste kollabiert nicht durch .page auf body (sonst Seite/Karo um 12 px nach unten versetzt) */
main,.site-footer{position:relative}
.sentinel{position:absolute;left:0;top:0;width:1px;height:8px;pointer-events:none} /* Beobachtungsmarke fuer .is-scrolled (site.js), ohne Layoutwirkung */
#rechner,#tabelle,#so-gehts,#fragen,#umrechnen{scroll-margin-top:var(--sp-4)} /* Sprungziele; Desktop: unter der Sticky-Leiste, siehe Media-Query */

/* ---------- Karo (nur Kopfbereich) ---------- */
.karo{display:none;position:absolute;left:0;right:0;top:0;height:var(--karo-end);pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(to bottom,#000 var(--karo-solid),transparent var(--karo-end));mask-image:linear-gradient(to bottom,#000 var(--karo-solid),transparent var(--karo-end))}

/* ---------- Header ---------- */
/* Mobil: scrollt mit, Haarlinie unten. Desktop (>= 840 px): sticky Glas-Leiste, siehe Media-Query. */
.site-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--gutter);min-height:68px;
  background:var(--paper)}
.site-header::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:var(--line)} /* Haarlinie nur ueber die Inhaltsbreite */
/* Logo (logo-punkte-in-note/web/logo-snippet.html, Werte exakt): Groesse per --logo-size; Header mobil 20 px, Desktop 24 px, Footer 20 px + .logo--muted */
.logo{--logo-size:20px;--logo-ink:var(--ink);--logo-red:var(--red);display:inline-flex;align-items:center;gap:calc(var(--logo-size) * .333);min-height:44px;
  font-size:var(--logo-size);color:var(--logo-ink);text-decoration:none;line-height:normal} /* min-height: Tippflaeche >= 44 px */ /* fein: gap = Logo-Proportion (logo-snippet.html), waechst mit --logo-size (calc) */
.logo:hover{color:var(--logo-ink)}
.logo__mark{width:calc(var(--logo-size) * .944);height:calc(var(--logo-size) * .944);flex:none;fill:var(--logo-ink)}
.logo__key{fill:var(--logo-red)}
.logo__word{display:inline-flex;align-items:baseline;gap:.167em;font-family:var(--font-disp);font-weight:800;font-optical-sizing:auto;letter-spacing:var(--ls-tight);white-space:nowrap} /* fein: gap in em = Logo-Proportion (logo-snippet.html) */
.logo__in{display:inline-block;font-family:var(--font-hand);font-weight:700;font-size:1.1667em;letter-spacing:0;color:var(--logo-red);transform:rotate(-6deg)} /* fein: 1.1667em = Logo-Proportion (logo-snippet.html), skaliert mit --logo-size */
.logo--muted{filter:grayscale(1);opacity:.7}

/* Burger ohne JS: unsichtbare Checkbox liegt ueber dem Symbol (Tastatur + Touch), :checked oeffnet das Menue */
.menu-toggle{position:absolute;right:calc(var(--gutter) - 10px);top:12px;width:44px;height:44px;margin:0;opacity:0;cursor:pointer;z-index:3}
.burger{position:absolute;right:calc(var(--gutter) - 10px);top:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-2);border:0;background:none;color:var(--ink);z-index:2} /* nur das Symbol (drei Punkte); Symbol 24 px, bündig zum Gutter */
.menu-toggle:focus-visible{outline:none;box-shadow:none}
.menu-toggle:focus-visible + .burger{outline:2px solid var(--ink);outline-offset:2px;box-shadow:var(--focus)}
.site-nav{display:none;position:absolute;top:calc(100% - 6px);left:var(--gutter);right:var(--gutter);z-index:10;flex-direction:column;padding:var(--sp-1);
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-2);box-shadow:0 16px 32px -18px rgba(110,70,35,.45)}
.menu-toggle:checked ~ .site-nav{display:flex}
.site-nav a{display:flex;align-items:center;min-height:48px;padding:0 var(--sp-3);border-radius:var(--r-2);color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--fs-4)}
.site-nav a:hover{color:var(--red-text);background:var(--paper)}

/* ---------- Kopfbereich (Werte: Mobil.dc.html Z. 58-62 / Main.dc.html Z. 66-71) ---------- */
.hero{padding-top:68px;padding-bottom:0} /* Budget: mobil Abstand Header -> Inhalt = Header-Hoehe (68 px, N4); keine Stufe in Toleranz */
/* Kopfzeile statt Stempel (SPEC Design-Feinschliff Punkt 4); Quelltext in normaler Schreibung, Grossschreibung per CSS */
.kicker{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-1);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.kicker-more{display:none}
.hero h1{margin-top:var(--sp-3);font-size:var(--fs-7b);line-height:var(--lh-solid);letter-spacing:var(--ls-tight)}
.mark{background:linear-gradient(transparent 56%,var(--marker) 56%,var(--marker) 92%,transparent 92%);padding:0 var(--sp-1);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-sub{display:none;margin:var(--sp-4) 0 0;font-size:var(--fs-5);line-height:var(--lh-body);color:var(--ink-2);max-width:540px}
.hero-sub a{color:var(--red-text)}
.hero-intro{margin:var(--sp-2) 0 0;font-size:var(--fs-4);line-height:var(--lh-body);color:var(--ink-2)} /* nur Startzustand mobil (SPEC A3); Desktop zeigt .hero-sub */

/* ---------- Schnellumrechnung (Mobil.dc.html Z. 33-34, 64-75 / Main.dc.html Z. 32-35, 73-96); genau eine Instanz ueber der Tabelle, schlank; mobil ohne H2/Segmente/Detailzeile ---------- */
.q-wrap{margin-top:var(--sp-7)}
.q-h2{margin:0 0 var(--sp-2);font-size:var(--fs-4);line-height:var(--lh-tight)} /* Ueberschrift ueber der Schnellumrechnung (mobil/Desktop-Text per .m-only/.d-only): Stil wie .calc-head h2 */
.quick{padding:var(--sp-2) var(--sp-3);background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-3);box-shadow:0 16px 32px -22px rgba(110,70,35,.45)}
.q-form{display:flex;flex-direction:column;margin:0}
.q-aux{display:none}
.q-head{display:none}
.q-title{margin:0;font-size:var(--fs-5);font-weight:700;line-height:normal}
.q-seg{display:inline-flex;gap:var(--sp-1);padding:var(--sp-1);background:#EFE4D2;border-radius:var(--r-pill)}
button.seg{border:0;background:transparent}
.q-row{display:flex;align-items:flex-end;gap:var(--sp-2)}
.q-in{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-1);font-weight:700;color:var(--ink-2)}
.qin{width:96px;height:48px;margin:0;border:2px solid var(--ink);border-radius:var(--r-2);background:var(--card);padding:0 var(--sp-3);
  font-family:var(--font-disp);font-size:var(--fs-6b);font-weight:800;color:var(--ink);outline:none}
.qin:focus{box-shadow:var(--focus)}
.q-swap{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 2px;padding:0;
  border:1.5px solid rgba(42,33,27,.2);border-radius:var(--r-pill);background:var(--card);color:var(--ink)} /* optisch: margin-bottom 2 px zentriert den 44-px-Knopf auf dem 48-px-Feld (align flex-end) */
.q-swap svg{width:16px;height:16px}
.q-out{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:var(--sp-1)}
.q-out > span{font-size:var(--fs-1);font-weight:700;color:var(--ink-2)}
.q-val{display:block;min-height:48px;font-family:var(--font-disp);font-size:34px;font-weight:800;line-height:48px;letter-spacing:var(--ls-tight)} /* optisch: line-height 48 px = Feldhoehe (Ziffern fluchten mit dem Eingabefeld); font-size 34 px ohne Stufe in Toleranz */
.q-detail{display:none;margin:var(--sp-2) 0 0;font-size:var(--fs-2);color:var(--ink-2)} /* mobil nur bei Hinweis (ungueltig, 0 Punkte) */
.q-detail.show-m{display:block}

/* ---------- Rechner (Mobil.dc.html Z. 77-151 / Main.dc.html Z. 97-190) ---------- */
.calc{padding-top:var(--sp-7);padding-bottom:0}
.calc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap}
.calc-head h2{font-size:var(--fs-4);line-height:var(--lh-tight)}
.tabs{display:inline-flex;gap:var(--sp-1);padding:var(--sp-1);background:#EFE4D2;border-radius:var(--r-pill)}
.tabs[hidden]{display:none}
.seg{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pill);color:var(--ink-2);font-weight:600;font-size:var(--fs-2);white-space:nowrap}
.seg.on{background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(42,33,27,.15)}
.tabs a.seg{text-decoration:none;line-height:normal} /* wie die Buttons im Entwurf (Main.dc.html:99-103, Mobil.dc.html:79-82) */
.tabs a.seg:hover{color:var(--ink)}
.tabs a.seg{position:relative}
.tabs a.seg::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px} /* Tippflaeche >= 44 px bei 31 px Pille, ohne Layouthoehe */

.calc.calc-input{padding-top:68px} /* Budget: Eingabezustand: kein Hero; Abstand Header -> Inhalt mobil = Header-Hoehe (wie .hero) */
.calc-input .calc-grid{margin-top:0}
.calc-grid{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-3)}
.calc-in{display:contents}

/* Eingabe-Karte (mobil: nur Tasten + Schalter + Button; Kurse darunter ausserhalb) */
.in-card{display:flex;flex-direction:column;gap:var(--sp-2);margin:0;padding:var(--sp-3);background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-3b);
  box-shadow:0 16px 32px -22px rgba(110,70,35,.45)}
.in-head{display:none}
.in-head h3{margin:0;font-family:var(--font-text);font-size:var(--fs-5);font-weight:700;line-height:normal}
.in-hint{font-size:var(--fs-3);color:var(--ink-3)}
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2);border:0;margin:0;padding:0;min-width:0}
.pt{position:relative;display:block}
.pt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.pt label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:50px;border-radius:var(--r-2);
  border:1.5px solid rgba(42,33,27,.14);background:var(--card);color:var(--ink);transition:transform .08s,border-color .12s} /* fein: gap 1 px zwischen Ziffer und Tendenz (Zeile 148) */
.pt-n{font-family:var(--font-disp);font-weight:700;font-size:var(--fs-5b);line-height:var(--lh-solid)}
.pt small{font-size:var(--fs-1);font-weight:600;color:var(--ink-3)}
.pt:active label{transform:translateY(2px)}
.pt input:checked + label{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:0 3px 0 var(--red)}
.pt input:checked + label small{color:#E8DAC4}
.pt input:focus-visible + label{outline:2px solid var(--ink);outline-offset:2px;box-shadow:var(--focus)}
.pt input:checked:focus-visible + label{box-shadow:0 3px 0 var(--red),var(--focus)}
.pt input:focus-visible{outline:none;box-shadow:none}

.in-actions{display:flex;align-items:center;gap:var(--sp-2)}
.lk{position:relative;display:flex;align-items:center;gap:var(--sp-2);flex:none;min-height:44px;padding:var(--sp-1);color:var(--ink);cursor:pointer}
.lk input{position:absolute;left:0;top:0;z-index:1;width:44px;height:44px;margin:0;opacity:0;cursor:pointer}
.sw{position:relative;flex:none;width:44px;height:26px;border-radius:var(--r-pill);background:var(--track);box-shadow:inset 0 0 0 1.5px var(--track-edge);transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--r-pill);background:#fff;box-shadow:0 0 0 1px var(--track-edge),0 1px 3px rgba(42,33,27,.3);transition:left .15s}
.lk input:checked + .sw{background:var(--red);box-shadow:none}
.lk input:checked + .sw::after{box-shadow:0 1px 3px rgba(42,33,27,.3)}
.lk input:checked + .sw::after{left:21px}
.lk input:checked:focus-visible + .sw{box-shadow:var(--focus)}
.lk input:focus-visible{outline:none;box-shadow:none}
.lk input:focus-visible + .sw{box-shadow:inset 0 0 0 1.5px var(--track-edge),var(--focus);outline:2px solid var(--ink);outline-offset:2px}
.lk b{font-weight:700}
.lk-short b{font-size:var(--fs-3)}
.lk-full{display:none}
.lk-full b{display:block;font-size:var(--fs-4)}
.lk-full small{display:block;font-size:var(--fs-2);color:var(--ink-3)}

.btn{display:flex;flex:1 1 auto;align-items:center;justify-content:center;gap:var(--sp-2);height:50px;padding:0 var(--sp-4);border:0;border-radius:var(--r-2);
  background:var(--red);color:#fff;font-weight:700;font-size:var(--fs-4);box-shadow:0 3px 0 var(--red-shadow)}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--red-shadow)}
.btn:disabled,.chips:disabled,.lk input:disabled + .sw{opacity:.5;cursor:not-allowed}
.enter{display:none;font-size:var(--fs-1);font-weight:600;background:rgba(42,33,27,.22);border-radius:var(--r-1);padding:var(--sp-1) var(--sp-2)}
.sep{display:none}

/* Tab 2 „Noten 1–6“ (Phase 5; kein Entwurf – nur Tab-1-Komponenten: .pt-Tasten, .seg-Pille, .btn, .tile) */
.chips.chips-n{grid-template-columns:repeat(6,minmax(0,1fr))}
.tend{position:relative;display:flex;flex:none;align-items:center;gap:var(--sp-2)}
.tend-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* mobil nur fuer Screenreader */
.tend-g{display:inline-flex;gap:3px;padding:3px;background:#EFE4D2;border-radius:var(--r-pill)} /* optisch: Segment-Pille 3 px; bei 4 px laeuft der Button in Tab 2 bei 360 px 4 statt 2 px aus der Zeile (Desktop: sp-1) */
.tend-o{position:relative;display:flex}
.tend-o input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.tend-o .seg{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--sp-3);cursor:pointer} /* 44 px Tippflaeche; Pille = Button-Hoehe */
.tend-o input:checked + .seg{background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(42,33,27,.15)}
.tend-o input:focus-visible{outline:none;box-shadow:none}
.tend-o input:focus-visible + .seg{outline:2px solid var(--ink);outline-offset:2px;box-shadow:var(--focus)}
.tend-o input:disabled,.tend-o input:disabled + .seg{opacity:.5;cursor:not-allowed}
.res-hint{display:none;margin:0;font-size:var(--fs-2);font-weight:600;color:var(--ink-4)} /* Noten-Modus: Statistikzeile "{n} Noten · ohne Gewichtung" (Desktop, an der Stelle der Kacheln; mobil steht sie in .res-line) */

/* Kurse */
.kurse{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3)}
.kurse-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.kurse-head h3{margin:0;font-family:var(--font-text);font-size:var(--fs-4);font-weight:700;line-height:normal}
.kurse-n{color:var(--ink-3);font-weight:600}
.kurse-hint{display:none;font-size:var(--fs-2);color:var(--ink-3)}
.neu-m{display:inline-flex;align-items:center;min-height:44px;color:var(--red-text);font-weight:700;font-size:var(--fs-3);text-decoration:none}
.pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.pill{position:relative;display:flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:6px 7px 6px 11px;border:1.5px solid rgba(42,33,27,.1);
  background:var(--pill);border-radius:var(--r-pill);color:var(--ink)} /* optisch: asymmetrisches Padding in Zeile 206 (rechts enger fuer den 22-px-Entfernen-Knopf) */
.pill.unter{background:var(--pill-under)}
.lkb{font-size:var(--fs-1);font-weight:800;letter-spacing:var(--ls-caps);color:var(--red-text);border:1.5px solid var(--red);border-radius:var(--r-1);padding:1px var(--sp-1)} /* fein: 1 px oben/unten im LK-Badge */
.pill-p{font-family:var(--font-disp);font-weight:700;font-size:var(--fs-4)}
.pill-n{font-size:var(--fs-2);color:var(--ink-2)}
.pill-x{display:flex;color:var(--ink-2);text-decoration:none}
.pill-x::after{content:"";position:absolute;inset:0} /* ganze Pille ist Tippflaeche (>= 44 px) */
.xc{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--r-pill);background:var(--chip-x)}
.xc svg{width:11px;height:11px}
.kurse-note{margin:0;font-size:var(--fs-3);color:var(--ink-3)}
.wechsel{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-3);font-weight:600;color:var(--red-text);text-decoration:underline;text-underline-offset:3px} /* Wechsel zum Startzustand des anderen Modus (Eingabezustand) */
.empty-d{display:none}

/* Ergebnis-Karte (mobil: kompakte Zeile; im Eingabezustand steht sie im DOM vor der Eingabe) */
.res{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3);overflow:hidden;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-3b);box-shadow:0 16px 32px -22px rgba(110,70,35,.45)}
.mk1{--m:var(--mk1)}.mk2{--m:var(--mk2)}.mk3{--m:var(--mk3)}.mk4{--m:var(--mk4)}.mk5{--m:var(--mk5)}.mk6{--m:var(--mk6)}
.res-label{display:none;margin:0;font-family:var(--font-text);line-height:normal;font-size:var(--fs-2);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-2)}
.res-row{display:flex;align-items:center;gap:var(--sp-3)}
.res-note{position:relative;flex:none;padding:var(--sp-1) var(--sp-2)}
.res-mark{position:absolute;left:-2px;top:26px;width:calc(100% + 4px);max-width:none;height:48px;pointer-events:none;mix-blend-mode:multiply}
.res-mark path{stroke:var(--m)}
.res-num{position:relative;display:block;font-family:var(--font-disp);font-size:var(--fs-9);font-weight:800;line-height:.9;letter-spacing:var(--ls-tight)} /* optisch: line-height .9 haelt die grosse Note eng am Marker; keine Stufe in Toleranz */
.res-side{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:var(--sp-1)}
.res-word{display:block;font-family:var(--font-hand);font-size:var(--fs-7b);font-weight:700;color:var(--red);line-height:var(--lh-solid);white-space:nowrap;transform:rotate(-4deg);transform-origin:left}
.res-word-d{display:none}
.res-line{font-size:var(--fs-2);font-weight:600;color:var(--ink-4)}
.tiles,.res-actions{display:none}
.tile{border:1.5px solid rgba(42,33,27,.1);border-radius:var(--r-2);padding:var(--sp-2) var(--sp-3)}
.tile-v{font-family:var(--font-disp);font-size:var(--fs-6b);font-weight:800}
.tile-l{font-size:var(--fs-2);color:var(--ink-2)}
.btn2{display:flex;align-items:center;gap:var(--sp-2);height:48px;padding:0 var(--sp-4);border:1.5px solid rgba(42,33,27,.2);border-radius:var(--r-2);background:var(--card);
  color:var(--ink);font-weight:700;font-size:var(--fs-4);text-decoration:none}
.btn2:hover{color:var(--ink);border-color:var(--ink)}

/* Ergebnisleiste mobil (Eingabezustand, < 840 px, SPEC Aenderung 24.10.2026 Teil 2; kein Entwurf, nur Komponenten der Ergebnis-Karte verkleinert):
   Note mit Marker | H1-Label + Rotstift-Wort | Teilen, darunter eine Statistikzeile. Hoehe <= 96 px. */
@media (max-width:839.98px){
  .res-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"note label share" "note word share" "stat stat stat";
    column-gap:var(--sp-2);row-gap:var(--sp-1);align-items:center;padding:var(--sp-2)}
  .res-in .res-row,.res-in .res-side{display:contents}
  .res-in .res-label{grid-area:label;display:block;align-self:end;font-size:var(--fs-1);letter-spacing:0;text-transform:none}
  .res-in .res-note{grid-area:note;padding:var(--sp-1)}
  .res-in .res-num{font-size:46px} /* Budget: Ergebnisleiste mobil <= 96 px Hoehe; 46 px ohne Stufe in Toleranz */
  .res-in .res-mark{top:18px;height:34px}
  .res-in .res-word{grid-area:word;align-self:start;margin-top:var(--sp-2);font-size:var(--fs-6b)}
  .res-in .res-line{grid-area:stat;font-size:var(--fs-2)}
  .res-in .share-m{grid-area:share}
}

/* ---------- JS-Verbesserungen (Teilen, Merken, Weitermachen; Werte aus Main.dc.html Z. 177-188 / Mobil.dc.html Z. 96, 150) ---------- */
.js-only{display:none}
.js .share-m{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-2);border:0;background:var(--ink);color:var(--paper)}
.js .btn-share{display:flex;align-items:center;gap:var(--sp-2);height:48px;padding:0 var(--sp-4);border:0;border-radius:var(--r-2);background:var(--ink);color:var(--paper);font-weight:700;font-size:var(--fs-4)}
.js .share-url{display:none;border:1.5px dashed rgba(42,33,27,.22);border-radius:var(--r-2);padding:var(--sp-2) var(--sp-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-2);color:var(--ink);overflow-wrap:anywhere}
.saved{margin:0;align-items:center;color:var(--ink-2)}
.js .saved-m{display:flex;gap:var(--sp-1);margin-top:var(--sp-1);font-size:var(--fs-2)}
.saved-m svg{flex:none;width:14px;height:14px}
.saved-d{gap:var(--sp-2);font-size:var(--fs-3)}
.saved-d svg{flex:none;width:16px;height:16px}
.saved.off{visibility:hidden}

/* Weitermachen-Banner: sitzt im Platz des Leerzustand-Hinweises (keine Layoutverschiebung, kein Overlay) */
.kurse-slot{display:flex;align-items:center;min-height:44px}
.kurse-slot .kurse-note{margin:0}
.kurse-start{margin-top:0}
.kurse-start .kurse-slot{min-height:0}
.res-start{display:none} /* Startzustand: mobil keine Ergebnis-Karte; Desktop leer: gestrichelt, transparent, ohne Schatten (SPEC Design-Feinschliff Punkt 5) */
.res.res-start{background:transparent;border:1.5px dashed rgba(42,33,27,.22);box-shadow:none}
.res-calm{margin:0;font-size:var(--fs-4);line-height:var(--lh-body);color:var(--ink-2)}
.weiter{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-3);width:100%}
.weiter[hidden]{display:none}
.weiter-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-3);font-weight:700;color:var(--red-text)}
.weiter-no{min-height:44px;padding:0 var(--sp-1);border:0;background:none;color:var(--ink-2);font-size:var(--fs-3);font-weight:600;text-decoration:underline}
.weiter-no:hover{color:var(--ink)}

/* ---------- Tabelle, Anzeige-Platz, Infoblock, FAQ (Main.dc.html Z. 193-270 / Mobil.dc.html Z. 153-215) ---------- */
.tabelle,.info,.faq{line-height:normal}
.tabelle h2,.info h2,.faq h2{margin:0;font-size:var(--fs-6b);line-height:normal;letter-spacing:var(--ls-tight)}
.info h3,.faq h3{font-family:var(--font-text);font-weight:700;line-height:normal}
.d-only{display:none}

/* Tabelle: echtes <table>, als Kacheln dargestellt -> display umgestellt, Rollen im Markup explizit */
.tabelle{display:grid;grid-template-areas:"head" "tab" "link";margin-top:var(--sp-7)}
.tab-head{grid-area:head}
.tab-sub{margin:var(--sp-1) 0 0;font-size:var(--fs-3);color:var(--ink-2)}
.tt{grid-area:tab;display:block;margin:var(--sp-3) 0 0;padding:0;border:0}
.tt thead,.tt tbody{display:block}
.tt tbody{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-1)}
.tt tr{display:grid;gap:1px;padding:var(--sp-2);border-radius:var(--r-2)} /* fein: gap 1 px zwischen Punkte-Zahl und Note */
.tt th,.tt td{display:block;padding:0;border:0;text-align:left}
.tt-p{font-family:var(--font-disp);font-size:var(--fs-5b);font-weight:800;line-height:var(--lh-tight)}
.tt-n{font-size:var(--fs-2);font-weight:700;color:#3A2E26}
.tt-w{font-size:var(--fs-2);color:var(--ink-4)}
.t1{background:var(--t1)}.t2{background:var(--t2)}.t3{background:var(--t3)}.t4{background:var(--t4)}.t5{background:var(--t5)}.t6{background:var(--t6)}
.tab-link{grid-area:link;justify-self:start;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;margin:var(--sp-3) 0 0;font-size:var(--fs-3);font-weight:700;color:var(--red-text);text-decoration:none}
@media (max-width:839.98px){ /* mobil zeigt die Kachel ohne Bewertungswort (Mobil.dc.html Z. 160); fuer Screenreader bleibt die Zelle lesbar */
  .tt-w{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Anzeige-Platz (Platz reserviert gegen CLS: Label 22 px + 280 px Anzeige) */
.ad-slot{max-width:1184px;margin:var(--sp-7) auto 0;padding:0 var(--gutter);min-height:302px;text-align:center}
.ad-label{display:block;height:22px;font-size:var(--fs-1);font-weight:700;letter-spacing:var(--ls-caps);line-height:22px;text-transform:uppercase;color:#75675B} /* Budget: line-height 22 px = Hoehe des Labels, Platzreservierung gegen CLS (302 px) */

/* Infoblock */
.info{margin-top:var(--sp-7)}
.info h2{line-height:var(--lh-tight)}
.info-grid{display:flex;flex-direction:column}
.info-text{display:contents}
.info-a{order:1}
.info-formulas{order:2;display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-4)}
.info-b{order:3}
.info h3{margin:var(--sp-4b) 0 0;font-size:var(--fs-5)}
.info p{margin:var(--sp-1) 0 0;font-size:var(--fs-4);line-height:var(--lh-loose);color:#3E332B}
.info .stand{margin-top:var(--sp-4);font-size:var(--fs-2);color:var(--ink-3)}
.formel{padding:var(--sp-4);border-radius:var(--r-3);background:var(--ink);color:var(--paper)}
.formel-l{font-size:var(--fs-1);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase;color:#E8DAC4}
.formel-t{margin-top:var(--sp-1);font-family:var(--font-disp);font-size:var(--fs-6);font-weight:800}
.formel-b{margin-top:var(--sp-1);font-size:var(--fs-3);color:#E8DAC4}
.info .grenz{margin:calc(var(--sp-1) * -1) 0 0;font-size:var(--fs-3);color:var(--ink-2)}

/* FAQ */
.faq{margin-top:var(--sp-7)}
.faq-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3)}
.faq-card{padding:var(--sp-4);border:1.5px solid rgba(42,33,27,.1);border-radius:var(--r-3);background:var(--card)}
.faq h3{margin:0;font-size:var(--fs-4)}
.faq p{margin:var(--sp-2) 0 0;font-size:var(--fs-3);line-height:var(--lh-body);color:var(--ink-4)}

/* ---------- Unterseiten / Fliesstext ---------- */
.wrap.prose{max-width:884px;padding-top:var(--sp-3);padding-bottom:var(--sp-5);overflow-wrap:anywhere}
.prose h1{font-size:var(--fs-7b);margin:var(--sp-2) 0 var(--sp-4);letter-spacing:var(--ls-tight)}
.prose h2{font-size:var(--fs-6);margin:var(--sp-6) 0 var(--sp-2)}
.prose h3{font-family:var(--font-text);font-weight:700;font-size:var(--fs-5);margin:var(--sp-4b) 0 var(--sp-1)}
.prose h4{font-family:var(--font-text);font-weight:700;font-size:var(--fs-4);margin:var(--sp-4) 0 var(--sp-1)}
.prose p{margin:var(--sp-2) 0;line-height:var(--lh-loose)}
.prose ul{padding-left:var(--sp-4b)}
.page-headline{margin:0}

/* ---------- Footer ---------- */
/* zentriert, untereinander (SPEC Design-Feinschliff Punkt 6); mobil >= 70 px Luft unten wegen Ankeranzeige */
.site-footer{margin-top:var(--sp-7);padding-top:var(--sp-1);padding-bottom:90px;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);text-align:center;font-size:var(--fs-3);color:var(--ink-3)} /* Budget: padding-bottom 90 px >= 70 px Luft fuer die Ankeranzeige (A1-AC5); keine Stufe in Toleranz */
.site-footer::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1.5px solid var(--line)}
.foot-logo{margin-top:var(--sp-3)}
.foot-text{margin:0;padding:var(--sp-1) 0}
.foot-nav{display:flex;flex-direction:column;align-items:center;column-gap:var(--sp-1)} /* mobil (< 840): Gruppen untereinander; Desktop: eine Zeile */
.foot-g{display:flex;align-items:center;column-gap:var(--sp-1);white-space:nowrap} /* zwei Gruppen: Umbruch nur dazwischen */
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-1);color:var(--ink-3)}
.foot-nav a:hover{color:var(--red-text)}
.foot-consent{margin:0}
.foot-consent[hidden]{display:none}
.foot-consent-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-2);border:0;background:none;color:var(--ink-3);font:inherit;text-decoration:underline;cursor:pointer} /* Stil wie .foot-nav a, eigene letzte Zeile */
.foot-consent-btn:hover{color:var(--red-text)}
.google-revocation-link-placeholder{display:none !important} /* Standard-Widerrufsbutton der Google-CMP: nie sichtbar (JS entfernt ihn zusaetzlich) */

/* ---------- Nachhilfe-Box (Phase 4; Main.dc.html Z. 165-175 / Mobil.dc.html Z. 120-126, Farben pin-design) ----------
   Zwei Platzierungen im HTML, je eine sichtbar: .tut-m (mobil, unter den Tasten), .tut-d (Desktop, unter den Kacheln). */
.tut{display:flex;align-items:center;box-sizing:border-box;color:var(--ink);text-decoration:none;border:1.5px solid #E9C46A;background:#FFF7E1}
.tut:hover{color:var(--ink);border-color:var(--red)}
.tut-text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.tut-label{font-size:var(--fs-1);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase;color:#75675B}
.tut-title{font-weight:700}
.tut-sub{color:var(--ink-2)}
.tut-arrow{flex:none}
.tut-m{gap:var(--sp-2);margin-top:var(--sp-2);border-radius:var(--r-2);padding:var(--sp-2) var(--sp-3);min-height:44px}
.tut-m .tut-text{gap:1px} /* fein: 1 px zwischen Titel und Zeile */
.tut-m .tut-label{font-size:var(--fs-1)}
.tut-m .tut-title{font-size:var(--fs-3)}
.tut-m .tut-sub{font-size:var(--fs-2)}
.tut-m .tut-arrow{width:16px;height:16px}
.tut-d{display:none;gap:var(--sp-3);border-radius:var(--r-3);padding:var(--sp-3) var(--sp-4)}
.tut-d .tut-text{gap:var(--sp-1)}
.tut-d .tut-title{font-size:var(--fs-4)}
.tut-d .tut-sub{font-size:var(--fs-3)}
.tut-d .tut-arrow{width:18px;height:18px}
.tut-ico{display:flex;flex:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-2);background:var(--marker)}

/* ---------- Desktop ---------- */
@media (min-width:840px){
  .karo{display:block;background-size:24px 24px}
  /* Sticky Glas-Leiste; Breite = Inhaltsbreite (1120 px). .is-scrolled setzt site.js per IntersectionObserver (nur Farbe/Schatten, keine Layoutaenderung). */
  .site-header{position:sticky;top:12px;width:calc(100% - 2 * var(--gutter));max-width:1120px;min-height:var(--head-h);margin:var(--sp-3) auto 0;padding:var(--sp-2) var(--sp-4b);gap:var(--sp-5);
    border:1px solid var(--line);border-radius:var(--r-3);background:rgba(251,245,233,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    transition:background-color 150ms ease,box-shadow 150ms ease}
  .site-header::after{display:none}
  .site-header.is-scrolled{background:rgba(251,245,233,.80);box-shadow:0 6px 20px -12px rgba(42,33,27,.35)}
  #rechner,#tabelle,#so-gehts,#fragen,#umrechnen{scroll-margin-top:calc(var(--sp-3) + var(--head-h) + var(--sp-4))} /* 12 px top + Leiste + 16 px Luft */
  .site-header .logo{--logo-size:24px}
  .menu-toggle,.burger{display:none}
  .site-nav{display:flex;position:static;flex-direction:row;gap:var(--sp-5b);padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  .site-nav a{min-height:44px;padding:0;font-size:var(--fs-3);border-radius:0}
  .site-nav a:hover{background:none}
  .hero{padding-top:var(--sp-8);padding-bottom:0}
  .kicker-more{display:inline}
  .hero h1{margin-top:var(--sp-1);font-size:var(--fs-9);line-height:var(--lh-solid)}
  .mark{padding:0 var(--sp-2)}
  .hero-sub{display:block}
  .hero-intro{display:none}
  .q-h2{margin-bottom:var(--sp-4b)}
  .q-wrap{margin-top:var(--sp-8)}
  .quick{width:100%;padding:var(--sp-4) var(--sp-5);border-radius:var(--radius-card);box-shadow:0 22px 44px -28px rgba(110,70,35,.45)} /* so breit wie .calc-in (Flex-Basis 619 px ab 1182 px, darunter volle Breite) */
  .q-form{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)} /* Zeile 1: Titel + Richtungs-Tasten, Zeile 2: Rechner, Zeile 3: Detailzeile */
  .q-row{align-self:stretch}
  .q-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4)}
  .q-detail{display:block;min-height:18px;margin:0;font-size:var(--fs-3)}
  .calc{padding-top:var(--sp-8)}
  .calc.calc-input{padding-top:var(--sp-5)} /* ohne Hero: Abstand wie .hero (24 px) */
  .calc-head h2,.q-h2{font-size:var(--fs-8);letter-spacing:var(--ls-tight)}
  .calc-head{gap:var(--sp-4)}
  .tabs{padding:var(--sp-1)}
  .seg{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-3)}
  .tabs a.seg::after{top:-6px;bottom:-6px} /* Pille 34 px -> 46 px Tippflaeche */
  .tend-l{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:var(--fs-3);color:var(--ink-3)}
  .tend-g{padding:var(--sp-1)}
  .tend-o .seg{min-height:46px;padding:0 var(--sp-4)}
  .res-hint{display:block;font-size:var(--fs-3)}
  .q-seg .seg{line-height:20px} /* optisch: Entwurf: Segment 38 px hoch; dort liefert die Systemschrift fuer "→" (nicht im Figtree-Subset) die 20-px-Zeilenbox */
  .calc-grid{flex-direction:row;flex-wrap:wrap;gap:var(--sp-5);align-items:stretch;margin-top:var(--sp-4b)}
  .calc-in{display:flex;flex:1 1 619px;min-width:0;flex-direction:column;gap:var(--sp-4b);padding:var(--sp-5b);background:var(--card);border:1.5px solid var(--line);
    border-radius:var(--radius-card);box-shadow:0 22px 44px -28px rgba(110,70,35,.45)}
  .in-card{gap:var(--sp-4b);padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  .in-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
  .chips{grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--sp-2)}
  .pt label{height:66px;border-radius:var(--r-2)}
  .pt:hover label{border-color:var(--ink)}
  .pt-n{font-size:24px} /* optisch: 24 px (Ziffer in der 66-px-Taste) ohne Stufe in Toleranz */
  .pt small{font-size:var(--fs-1)}
  .pt input:checked + label{box-shadow:0 4px 0 var(--red)}
  .pt input:checked:focus-visible + label{box-shadow:0 4px 0 var(--red),var(--focus)}
  .in-actions{gap:var(--sp-4);flex-wrap:wrap}
  .lk{gap:var(--sp-3);padding:var(--sp-1)}
  .sw{width:46px;height:28px}
  .sw::after{width:22px;height:22px}
  .lk-full{display:block}
  .lk-short{display:none}
  .btn{flex:none;margin-left:auto;gap:var(--sp-2);height:54px;padding:0 var(--sp-4b);border-radius:15px;font-size:var(--fs-4);box-shadow:0 4px 0 var(--red-shadow)} /* optisch: Radius 15 px (Entwurf) ohne Stufe in Toleranz */
  .btn svg{width:20px;height:20px}
  .btn:active{box-shadow:0 2px 0 var(--red-shadow)}
  .enter{display:inline}
  .sep{display:block;height:1.5px;background:repeating-linear-gradient(90deg,rgba(42,33,27,.16) 0 6px,transparent 6px 12px)}
  .kurse{gap:var(--sp-3);margin-top:0}
  .kurse-head{align-items:baseline}
  .kurse-head h3{font-size:var(--fs-4)}
  .kurse-hint{display:inline}
  .neu-m{display:none}
  .pill{gap:var(--sp-2);min-height:0;padding:6px 8px 6px 12px} /* optisch: asymmetrisches Padding (rechts enger fuer den Entfernen-Knopf) */
  .pill-x::after{inset:-3px 0}
  .lkb{font-size:var(--fs-1);border-radius:var(--r-1);padding:1px var(--sp-1)} /* fein: 1 px oben/unten im LK-Badge */
  .pill-p{font-size:var(--fs-4)}
  .pill-n{font-size:var(--fs-3)}
  .xc{width:24px;height:24px}
  .xc svg{width:12px;height:12px}
  .empty-d{display:inline}
  .empty-m{display:none}
  .res{flex:1 1 475px;min-width:0;gap:var(--sp-4);padding:var(--sp-5b);border-radius:var(--radius-card);box-shadow:0 22px 44px -28px rgba(110,70,35,.45)}
  .kurse-start .kurse-slot{min-height:44px}
  .res-label{display:block}
  .res-row{margin:var(--sp-3) 0 var(--sp-1)}
  .res-note{align-self:flex-start;padding:0 var(--sp-3)}
  .res-mark{left:-10px;top:34px;width:calc(100% + 20px);height:96px}
  .res-num{font-size:136px} /* optisch: grosse Note, 136 px ohne Stufe */
  .res-side{display:none}
  .res-word-d{display:block;position:absolute;left:calc(100% + 18px);top:0;font-size:var(--fs-8b);transform:rotate(-8deg);transform-origin:center}
  .res-word-d.long{position:static;margin:var(--sp-1) 0 0;transform:rotate(-4deg);transform-origin:left}
  .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-2)}
  .res-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}
  .js .share-m,.js .saved-m{display:none}
  .js .share-url{display:block}
  .js .saved-d{display:flex}
  .d-only{display:inline}
  .m-only{display:none}
  .tabelle{grid-template-areas:"head link" "tab tab";grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-4);margin-top:var(--sp-8)}
  .tabelle h2,.info h2,.faq h2{font-size:var(--fs-8)}
  .info h2{line-height:normal}
  .tab-sub{margin-top:var(--sp-2);font-size:var(--fs-4)}
  .tt{margin-top:var(--sp-5)}
  .tt tbody{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--sp-2)}
  .tt tr{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--sp-1) 0;padding:var(--sp-3);border-radius:var(--r-2)}
  .tt-p{font-size:var(--fs-6b);line-height:normal}
  .tt-n{font-family:var(--font-disp);font-size:var(--fs-5b);color:inherit}
  .tt-w{grid-column:1/-1}
  .tab-link{align-self:end;justify-self:end;margin:0;padding:var(--sp-2) var(--sp-4);border:1.5px solid rgba(42,33,27,.14);border-radius:var(--r-pill);background:var(--card);color:var(--ink)}
  .tab-link:hover{color:var(--ink);border-color:var(--ink)}
  .ad-slot{margin-top:var(--sp-8)}
  .ad-label{font-size:var(--fs-2)}
  .info{margin-top:var(--sp-8)}
  .info-grid{flex-direction:row;flex-wrap:wrap;gap:48px;align-items:flex-start} /* optisch: 48 px zwischen Text- und Formelspalte, keine Stufe in Toleranz */
  .info-text{display:block;flex:1 1 560px;min-width:0}
  .info-formulas{flex:1 1 360px;min-width:0;gap:var(--sp-3);margin-top:var(--sp-5b)}
  .info h3{margin-top:var(--sp-5b);font-size:var(--fs-5b)}
  .info p{margin-top:var(--sp-2);font-size:var(--fs-4);line-height:var(--lh-loose)}
  .info .stand{margin-top:var(--sp-5b);font-size:var(--fs-3)}
  .formel{padding:var(--sp-4b);border-radius:var(--r-3)}
  .formel-l{font-size:var(--fs-1)}
  .formel-t{margin-top:var(--sp-2);font-size:var(--fs-7)}
  .formel-b{margin-top:var(--sp-1);font-size:var(--fs-3)}
  .info .grenz{margin-top:var(--sp-1);font-size:var(--fs-3);line-height:var(--lh-body)}
  .faq{margin-top:var(--sp-8)}
  .faq-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-4);margin-top:var(--sp-5)}
  .faq-card{padding:var(--sp-4b);border-radius:var(--r-3)}
  .faq h3{font-size:var(--fs-5)}
  .faq p{margin-top:var(--sp-2);font-size:var(--fs-4);line-height:var(--lh-body)}
  .wrap.prose{padding-top:var(--sp-5)}
  .prose h1{font-size:var(--fs-8b)}
  .prose h2{font-size:var(--fs-6b)}
  .site-footer{margin-top:var(--sp-8);padding-bottom:var(--sp-7)}
  .foot-nav{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .site-footer::before{left:var(--gutter);right:var(--gutter)}
  .tut-m{display:none}
  .tut-d{display:flex}
}


/* Startzustand: ruhige Hinweis-Karte nur, wenn sie rechts neben der Eingabe steht (Flex-Basen 619 + 475 + 24 px Abstand = 1118 px Inhalt + 2 x 32 px Rand = 1182 px);
   darunter wuerde sie gestapelt unter der Eingabe stehen und entfaellt wie mobil (Entscheidung Orchestrator 13). */
@media (min-width:1182px){
  .res-start{display:flex;justify-content:center}
}

/* Schnellumrechnung Desktop: Kartenbreite = Breite von .calc-in (619 px Basis + halber Restraum, exakt wie die Flex-Verteilung von .calc-in/.res) */
@media (min-width:1182px){
  .quick{width:calc(619px + (100% - 1118px) / 2)}
}

/* Eingabezustand: Ergebnis-Karte steht im DOM vor der Eingabe (mobil und gestapelt 840-1181 px: Ergebnis zuerst); ab 1182 px nebeneinander, Eingabe links */
@media (min-width:1182px){
  .res-in{order:1}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}