/* Grade Slider – ein Stylesheet. Hell/Dunkel ueber Variablen, Druck hell, View Transitions, Bewegung nur ueber transform/opacity. */
@charset "UTF-8";
@layer reset, base, komp, zeile, spalte, zelle, aktiv, druck;

@font-face { font-family: "Bricolage"; src: url("/font/bricolage.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-anchor: none; }
  body, h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
  ul[class], ol[class] { padding: 0; list-style: none; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  table { border-collapse: separate; border-spacing: 0; }
}

@layer base {
  :root {
    --bg: #f4f1e8; --bg2: #e9e5d8; --surface: #fffdf7; --linie: #d9d3c1; --ink: #14211f; --muted: #52615d;
    --akzent: #0d7a69; --akzent-ink: #ffffff; --akzent-weich: color-mix(in oklab, var(--akzent) 14%, transparent);
    --lupe: #ff6a3d; --lupe-text: #c8380a; --gelb: #ffc93c; --fokus: #1f6feb;
    --tl: .93; --kl: .46; /* Lichtwerte: Tonflaeche / kraeftige Variante */
    --schatten: 0 1px 0 rgb(20 33 31 / .04), 0 18px 40px -26px rgb(20 33 31 / .35);
    --radius: 20px; --rand: 16px; --breite: 1160px;
    --ease: cubic-bezier(.2,.7,.2,1); --feder: cubic-bezier(.34,1.4,.5,1);
    --zeile: 46px;
    color-scheme: light;
  }
  :root:not([data-theme="light"]) { }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0e1a1b; --bg2: #15282b; --surface: #172c2f; --linie: #2a4549; --ink: #eaf3ef; --muted: #a2b8b2;
      --akzent: #4fd1b5; --akzent-ink: #04251f; --lupe: #ff8a5c; --lupe-text: #ff8a5c; --fokus: #79b0ff;
      --tl: .34; --kl: .84;
      --schatten: 0 1px 0 rgb(0 0 0 / .2), 0 18px 40px -26px rgb(0 0 0 / .8);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0e1a1b; --bg2: #15282b; --surface: #172c2f; --linie: #2a4549; --ink: #eaf3ef; --muted: #a2b8b2;
    --akzent: #4fd1b5; --akzent-ink: #04251f; --lupe: #ff8a5c; --lupe-text: #ff8a5c; --fokus: #79b0ff;
    --tl: .34; --kl: .84;
    --schatten: 0 1px 0 rgb(0 0 0 / .2), 0 18px 40px -26px rgb(0 0 0 / .8);
    color-scheme: dark;
  }
  @media (prefers-reduced-motion: no-preference) { @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } } }

  html { scroll-padding-top: 88px; }
  body { background: var(--bg); color: var(--ink); font-family: "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.0625rem; line-height: 1.6; font-variant-numeric: tabular-nums; min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
  h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
  h1 { font-size: clamp(2.05rem, 1.2rem + 4.2vw, 3.7rem); font-weight: 800; letter-spacing: -.035em; }
  h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.15rem); }
  .h3, h3 { font-size: 1.25rem; }
  a { color: var(--akzent); text-underline-offset: .18em; text-decoration-thickness: .08em; }
  a:hover { text-decoration-thickness: .14em; }
  :focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
  ::selection { background: color-mix(in oklab, var(--lupe) 40%, transparent); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip { position: absolute; left: 12px; top: -80px; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; z-index: 100; transition: top .2s; }
  .skip:focus { top: 10px; }
  .ik { width: 1.25em; height: 1.25em; flex: none; }
  .hinweis { font-size: .93rem; color: var(--muted); margin-top: 6px; }
  .lbl { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; margin-bottom: 6px; }
  .klein { font-size: .88rem; color: var(--muted); }

  /* Farbstufen der Noten: Gruen (beste) bis Rot (schlechteste) */
  .g0 { --gh: 152; } .g1 { --gh: 140; } .g2 { --gh: 127; } .g3 { --gh: 115; } .g4 { --gh: 102; } .g5 { --gh: 90; }
  .g6 { --gh: 78; } .g7 { --gh: 65; } .g8 { --gh: 52; } .g9 { --gh: 40; } .g10 { --gh: 28; } .g11 { --gh: 16; }
  /* Tonflaechen der Kacheln (Pastell; Hell/Dunkel ueber --tl/--kl) */
  .t0 { --th: 95; } .t1 { --th: 160; } .t2 { --th: 215; } .t3 { --th: 265; } .t4 { --th: 335; } .t5 { --th: 30; }
  [class~="t0"], [class~="t1"], [class~="t2"], [class~="t3"], [class~="t4"], [class~="t5"] { --ton: oklch(var(--tl) .06 var(--th)); --kraft: oklch(var(--kl) .14 var(--th)); }
  [class*="g"][class~="g0"], .g0, .g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11 { --ton: oklch(var(--tl) .08 var(--gh)); --kraft: oklch(var(--kl) .15 var(--gh)); }
}

@layer komp {
  /* ---------- Kopf ---------- */
  .kopf { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid color-mix(in oklab, var(--linie) 70%, transparent); }
  :root:not(.thema-wechsel) .kopf { view-transition-name: kopf; }
  .kopf-innen { max-width: var(--breite); margin-inline: auto; padding: 8px var(--rand); display: flex; align-items: center; gap: 10px; min-height: 64px; }
  .kopf-links { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .kopf-rechts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
  .logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-weight: 800; letter-spacing: -.03em; font-size: 1.15rem; white-space: nowrap; min-height: 44px; }
  .logo-zeichen { width: 34px; height: 34px; }
  .lg-grund { fill: var(--akzent); } .lg-zeile { stroke: var(--akzent-ink); stroke-width: 2.4; stroke-linecap: round; opacity: .55; fill: none; }
  .lg-lupe { fill: color-mix(in oklab, var(--lupe) 90%, transparent); stroke: var(--bg); stroke-width: 1.6; }
  .logo:hover .lg-lupe { animation: lupe-wippe .8s var(--feder); }
  @keyframes lupe-wippe { 0% { transform: translateY(-5px); } 100% { transform: none; } }

  .lang-menu { position: relative; }
  .lang-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--linie); background: var(--surface); border-radius: 999px; font-weight: 600; font-size: .92rem; }
  .lang-knopf:hover { border-color: var(--akzent); }
  .lang-pfeil { width: 1em; height: 1em; transition: rotate .25s var(--ease); }
  .lang-menu.offen .lang-pfeil { rotate: 180deg; }
  .lang-liste { position: absolute; left: 0; top: calc(100% + 8px); min-width: 190px; padding: 6px; margin: 0; list-style: none; background: var(--surface); border: 1px solid var(--linie); border-radius: 16px; box-shadow: 0 24px 50px -20px rgb(0 0 0 / .4); opacity: 0; visibility: hidden; translate: 0 -4px; scale: .97; transform-origin: 20px 0; transition: opacity .18s ease, translate .18s var(--ease), scale .18s var(--ease), visibility 0s .18s; z-index: 5; }
  .lang-menu.offen .lang-liste { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition-delay: 0s; }
  .lang-liste a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: .98rem; }
  .lang-liste a:hover { background: var(--akzent-weich); }
  .lang-liste a[aria-current] { font-weight: 700; }
  .lang-liste a .ik:last-child { margin-left: auto; color: var(--akzent); }
  .lang-code { display: inline-grid; place-items: center; width: 28px; height: 22px; font-size: .72rem; font-weight: 800; border-radius: 6px; background: var(--bg2); }
  @media (max-width: 560px) { .kopf { position: sticky; } .kopf-innen { position: static; } .lang-menu { position: static; } .lang-liste { left: var(--rand); right: auto; top: 58px; min-width: 0; width: min(260px, calc(100vw - 2 * var(--rand))); transform-origin: 20px 0; } }
  html:not(.js) .lang-liste { position: static; opacity: 1; visibility: visible; translate: none; scale: 1; display: flex; gap: 4px; border: 0; box-shadow: none; background: none; padding: 0; }

  .kopf-knopf { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid transparent; background: transparent; position: relative; }
  .kopf-knopf:hover { background: var(--akzent-weich); }
  .thema-symbole { position: relative; display: block; width: 24px; height: 24px; }
  .ts { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; rotate: -90deg; scale: .4; transition: opacity .3s var(--ease), rotate .45s var(--ease), scale .45s var(--ease); }
  .ts .ik { width: 22px; height: 22px; }
  :root:not([data-theme]) .ts-auto, :root[data-theme="light"] .ts-light, :root[data-theme="dark"] .ts-dark { opacity: 1; rotate: 0deg; scale: 1; }
  :root[data-theme="light"] .ts-light .ik { color: #e08600; } :root[data-theme="dark"] .ts-dark .ik { color: #8fb4ff; }
  .burger { position: relative; display: block; width: 22px; height: 16px; }
  .burger i { position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 2px; background: currentColor; transition: translate .3s var(--ease), rotate .3s var(--ease), opacity .2s; }
  .burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 6.8px; } .burger i:nth-child(3) { top: 13.5px; }
  .menue-offen .burger i:nth-child(1) { translate: 0 6.8px; rotate: 45deg; } .menue-offen .burger i:nth-child(2) { opacity: 0; } .menue-offen .burger i:nth-child(3) { translate: 0 -6.8px; rotate: -45deg; }

  .hauptnav { display: none; position: relative; align-items: center; gap: 2px; margin-left: auto; background: var(--bg2); padding: 4px; border-radius: 999px; }
  .hauptnav a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; white-space: nowrap; transition: color .25s; }
  .hauptnav a[aria-current="page"] { color: var(--akzent-ink); }
  .hauptnav .marke { position: absolute; left: 0; top: 0; z-index: 0; background: var(--akzent); border-radius: 999px; opacity: 0; width: 0; height: 40px; transition: translate .38s var(--feder), width .38s var(--feder), opacity .2s; }
  .hauptnav.an .marke { opacity: 1; } .hauptnav .marke.direkt { transition: none; }
  .hauptnav:has(a:not([aria-current]):hover) a[aria-current="page"], .hauptnav:has(a:not([aria-current]):focus-visible) a[aria-current="page"] { color: var(--ink); }
  .hauptnav a:not([aria-current]):hover, .hauptnav a:not([aria-current]):focus-visible { color: var(--akzent-ink); }
  .menue { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
  .menue-innen { overflow: hidden; min-height: 0; }
  .menue-offen .menue { grid-template-rows: 1fr; }
  .menue-nav { max-width: var(--breite); margin-inline: auto; padding: 4px var(--rand) 14px; display: grid; gap: 4px; }
  .menue-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--linie); color: var(--ink); text-decoration: none; font-weight: 600; opacity: 0; translate: 0 -8px; transition: opacity .3s, translate .3s var(--ease), background .2s; }
  .menue-offen .menue-nav a { opacity: 1; translate: 0 0; }
  .menue-offen .menue-nav a:nth-child(2) { transition-delay: .04s; } .menue-offen .menue-nav a:nth-child(3) { transition-delay: .08s; } .menue-offen .menue-nav a:nth-child(4) { transition-delay: .12s; }
  .menue-nav a[aria-current] { background: var(--akzent); color: var(--akzent-ink); border-color: var(--akzent); }
  @media (min-width: 900px) { .hauptnav { display: inline-flex; } .menue-knopf, .menue { display: none; } .kopf-rechts { margin-left: 8px; } }

  /* ---------- Held ---------- */
  main { display: block; }
  .held { position: relative; max-width: var(--breite); margin-inline: auto; padding: clamp(28px, 6vw, 64px) var(--rand) clamp(14px, 3vw, 28px); isolation: isolate; }
  main { overflow-x: clip; }
  .held::before { content: ""; position: absolute; z-index: -1; inset: -40px -10% auto -10%; height: 420px; background: radial-gradient(40% 60% at 18% 30%, color-mix(in oklab, var(--akzent) 22%, transparent), transparent 70%), radial-gradient(34% 55% at 78% 20%, color-mix(in oklab, var(--lupe) 20%, transparent), transparent 70%), radial-gradient(30% 50% at 55% 80%, color-mix(in oklab, var(--gelb) 22%, transparent), transparent 70%); pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) { .held::before { animation: treiben 26s ease-in-out infinite alternate; } }
  @keyframes treiben { from { transform: translate3d(-3%, 0, 0) scale(1); } to { transform: translate3d(3%, 14px, 0) scale(1.08); } }
  .held--text { padding-bottom: 8px; }
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--akzent); margin-bottom: 14px; }
  .eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--lupe); }
  .held h1 { max-width: 18ch; }
  .lead { max-width: 62ch; margin-top: 16px; font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem); color: var(--muted); }
  .v-unten { display: none; }
  .versprechen { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 20px; padding: 0; list-style: none; }
  .versprechen li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--linie); font-size: .92rem; font-weight: 600; }
  .versprechen .ik { color: var(--akzent); width: 1.1em; height: 1.1em; }
  @media (max-width: 719px) {
    .v-oben { display: none; } .v-unten { display: flex; margin-top: 4px; } .abschnitt--pillen { padding-top: 14px; }
    .schieber-karte .hinweis { display: none; }
    .werkzeug[data-tool="slider"] > .schieber-karte { order: 1; } .werkzeug[data-tool="slider"] > .tabelle-block { order: 2; } .werkzeug[data-tool="slider"] > .steuer { order: 3; } .werkzeug[data-tool="slider"] > .grenzen { order: 4; } .werkzeug[data-tool="slider"] > .spiegel { order: 5; }
    .tbl-rahmen { max-height: 62vh; }
    .versprechen { gap: 6px 8px; } .versprechen li { padding: 6px 12px 6px 9px; font-size: .86rem; }
    .held { padding-top: 20px; } .lead { font-size: 1rem; margin-top: 12px; } .eyebrow { margin-bottom: 8px; }
  }

  .werkzeug-abschnitt, .abschnitt { max-width: var(--breite); margin-inline: auto; padding: 0 var(--rand); }
  .abschnitt { padding-top: clamp(36px, 6vw, 72px); }
  .werkzeug-abschnitt { padding-top: 10px; }
  .abschnitt > h2 { margin-bottom: 14px; }
  .abschnitt-lead { color: var(--muted); max-width: 60ch; margin-bottom: 20px; }
  .text-block { max-width: calc(72ch + 2 * var(--rand)); margin-left: max(0px, calc((100% - var(--breite)) / 2)); }
  .text-block p + p, .text-block p + ul, .text-block p + ol, .text-block ul + p, .text-block ol + p { margin-top: 14px; }
  .text-block li { margin-top: 8px; padding-left: 4px; } .text-block ul, .text-block ol { padding-left: 22px; margin-top: 12px; }
  .text-block li::marker { color: var(--akzent); font-weight: 700; }
  .text-seite { max-width: 760px; margin-inline: auto; } .text-seite h2 { margin-top: 28px; font-size: 1.35rem; } .text-seite p, .text-seite address { margin-top: 10px; } .text-seite address { font-style: normal; }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .abschnitt > h2, .text-block > p, .faq-punkt { animation: hereinfahren linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    }
  }
  @keyframes hereinfahren { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

  /* ---------- Karten, Knoepfe, Felder ---------- */
  .karte { background: var(--surface); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(16px, 2.6vw, 24px); box-shadow: var(--schatten); }
  .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: .96rem; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s, scale .15s var(--ease), color .2s; }
  .knopf:active, .zahl-knopf:active, .icon-knopf:active, .chip-knopf:active { scale: .96; }
  .knopf--primaer { background: var(--akzent); color: var(--akzent-ink); } .knopf--primaer:hover { background: color-mix(in oklab, var(--akzent) 86%, var(--ink)); color: var(--akzent-ink); }
  .knopf--rand { background: var(--surface); border-color: var(--linie); color: var(--ink); } .knopf--rand:hover { border-color: var(--akzent); }
  .knopf--leise { background: var(--bg2); color: var(--ink); } .knopf--leise:hover { background: var(--akzent-weich); }
  .knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
  .morph { position: relative; display: grid; width: 1.25em; height: 1.25em; }
  .morph > span { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .25s, rotate .35s var(--ease), scale .35s var(--ease); }
  .morph-b { opacity: 0; rotate: -60deg; scale: .4; } .ist-fertig .morph-a { opacity: 0; rotate: 60deg; scale: .4; } .ist-fertig .morph-b { opacity: 1; rotate: 0deg; scale: 1; color: var(--akzent); }
  .icon-knopf { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); } .icon-knopf:hover { background: var(--akzent-weich); color: #c2410c; }
  .chip-knopf { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--surface); font-weight: 600; transition: border-color .2s, background .2s, scale .15s; } .chip-knopf:hover { border-color: var(--akzent); background: var(--akzent-weich); }
  .feld { min-width: 0; }
  .zahl { display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--linie); border-radius: 16px; padding: 4px; max-width: 280px; transition: border-color .2s, box-shadow .2s; }
  .zahl:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-weich); }
  .zahl input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; text-align: center; font-size: 1.35rem; font-weight: 700; padding: 6px 0; outline: none; }
  .zahl .suffix { margin-right: 6px; color: var(--muted); font-weight: 600; }
  .zahl--klein { max-width: 150px; } .zahl--klein input { font-size: 1.1rem; }
  .zahl-knopf { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 0; background: var(--bg2); font-size: 1.4rem; line-height: 1; font-weight: 700; transition: background .2s, scale .15s; } .zahl-knopf:hover { background: var(--akzent-weich); }
  .zahl-knopf.gedrueckt { animation: tipp .3s var(--feder); } @keyframes tipp { 40% { scale: .9; } }
  input.breit, .eigen-zeile input, .avg-zeile input { width: 100%; background: var(--bg); border: 1px solid var(--linie); border-radius: 12px; padding: 0 12px; min-height: 44px; outline: none; transition: border-color .2s, box-shadow .2s; font-size: 1rem; }
  input.breit:focus, .eigen-zeile input:focus, .avg-zeile input:focus { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-weich); }
  .schalter { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: .96rem; position: relative; }
  .schalter[hidden] { display: none; }
  .schalter input { position: absolute; left: 0; top: 50%; translate: 0 -50%; z-index: 1; opacity: 0; width: 46px; height: 44px; margin: 0; cursor: pointer; }
  .sw { position: relative; width: 46px; height: 28px; flex: none; border-radius: 999px; background: var(--linie); transition: background .25s; }
  .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .3); transition: translate .3s var(--feder); }
  .schalter input:checked + .sw { background: var(--akzent); } .schalter input:checked + .sw::after { translate: 18px 0; }
  .schalter input:focus-visible + .sw { outline: 3px solid var(--fokus); outline-offset: 2px; }
  .statushinweis { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: var(--akzent-weich); font-size: .9rem; color: var(--ink); }
  .statushinweis .ik { margin-top: 2px; color: var(--akzent); }

  /* Pillen und Segment mit wandernder Markierung */
  .pillen, .segment { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 22px; background: var(--bg2); max-width: 100%; }
  .segment { border-radius: 999px; flex-wrap: nowrap; }
  .pillen > button, .segment > button { position: relative; z-index: 1; min-height: 40px; padding: 0 16px; border: 0; background: transparent; border-radius: 999px; font-weight: 600; font-size: .94rem; white-space: nowrap; transition: color .25s; }
  .pillen:not(.bereit) > [aria-checked="true"], .segment:not(.bereit) > [aria-checked="true"] { background: var(--akzent); color: var(--akzent-ink); }
  .pillen.bereit > [aria-checked="true"], .segment.bereit > [aria-checked="true"] { color: var(--akzent-ink); }
  .pillen > .marke, .segment > .marke { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--akzent); width: 0; height: 40px; opacity: 0; transition: translate .38s var(--feder), width .38s var(--feder), height .2s, opacity .2s; }
  .pillen.bereit > .marke, .segment.bereit > .marke { opacity: 1; } .marke.direkt { transition: none !important; }
  .pillen > button:not([aria-checked="true"]):hover { color: var(--akzent); }

  /* ---------- Werkzeug: Schieber-Seite ---------- */
  .werkzeug { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
  .steuer-reihe { display: grid; gap: 18px 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: start; }
  .steuer-reihe--klein { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; }
  .feld--t4[hidden] { display: none; }
  .eigen-kasten { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .eigen-kasten.offen { grid-template-rows: 1fr; }
  .eigen-innen { overflow: hidden; min-height: 0; } .eigen-inhalt { padding-top: 16px; }
  .eigen-zeile { display: grid; grid-template-columns: minmax(70px, 110px) auto minmax(70px, 100px) auto 44px; gap: 8px; align-items: center; margin-top: 8px; }
  .eigen-ab { color: var(--muted); font-size: .9rem; }
  .eigen-zeile .suffix { color: var(--muted); }
  #g-custom-add { margin-top: 10px; }

  .schieber-karte > .feld { margin-bottom: 14px; }
  .schieber-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
  .schieber-kopf label { font-weight: 700; font-size: 1.02rem; }
  .schieber-wert { margin-top: 10px; font-size: clamp(3rem, 2rem + 5vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--lupe-text); }
  .schieber { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; margin: 8px 0 0; background: transparent; cursor: grab; touch-action: pan-y; --p: 0%; }
  .schieber:active { cursor: grabbing; }
  .schieber::-webkit-slider-runnable-track { height: 16px; border-radius: 999px; background: linear-gradient(90deg, var(--lupe) var(--p), var(--bg2) var(--p)); box-shadow: inset 0 0 0 1px var(--linie); }
  .schieber::-moz-range-track { height: 16px; border-radius: 999px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--linie); }
  .schieber::-moz-range-progress { height: 16px; border-radius: 999px; background: var(--lupe); }
  .schieber::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 34px; height: 46px; margin-top: -15px; border-radius: 12px; border: 3px solid var(--surface); background: var(--lupe) repeating-linear-gradient(90deg, transparent 0 6px, rgb(255 255 255 / .55) 6px 8px) center / 14px 18px no-repeat; box-shadow: 0 6px 16px -4px rgb(255 106 61 / .7), 0 0 0 1px rgb(0 0 0 / .08); transition: scale .2s var(--feder); }
  .schieber::-moz-range-thumb { width: 28px; height: 40px; border-radius: 12px; border: 3px solid var(--surface); background: var(--lupe); box-shadow: 0 6px 16px -4px rgb(255 106 61 / .7); }
  .schieber:hover::-webkit-slider-thumb, .schieber:active::-webkit-slider-thumb { scale: 1.1; }
  .schieber:focus-visible { outline: none; } .schieber:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--fokus); outline-offset: 3px; }
  .schieber-skala { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); padding: 0 4px; margin-top: 2px; }

  .ergebnis { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
  .ergebnis-text { display: grid; gap: 2px; min-width: 0; font-size: .98rem; color: var(--muted); }
  .ergebnis-pct { font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); letter-spacing: -.02em; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
  .ergebnis-note { font-weight: 700; color: var(--ink); }
  .note-gross { display: grid; place-items: center; flex: none; min-width: 92px; height: 92px; padding: 0 12px; border-radius: 28px; font-size: 2.7rem; font-weight: 800; letter-spacing: -.03em; background: oklch(.86 .13 var(--gh, 150)); color: oklch(.27 .07 var(--gh, 150)); }
  :root[data-theme="dark"] .note-gross { background: oklch(.46 .12 var(--gh, 150)); color: oklch(.97 .03 var(--gh, 150)); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .note-gross { background: oklch(.46 .12 var(--gh, 150)); color: oklch(.97 .03 var(--gh, 150)); } }
  .note-gross.klein { min-width: 60px; height: 60px; font-size: 1.7rem; border-radius: 18px; color: oklch(.27 .07 var(--gh, 150)); }
  .leer-hinweis { color: var(--muted); }
  .ergebnis-gross { min-height: 130px; display: grid; align-content: center; }
  .ergebnis-gross .ergebnis { margin-top: 0; }
  .mini-ergebnis { min-height: 72px; margin-top: 12px; }

  .tabelle-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
  .tbl-rahmen { position: relative; overflow: auto; max-height: min(70vh, 600px); border-radius: 14px; border: 1px solid var(--linie); background: var(--surface); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .notentabelle { width: 100%; font-variant-numeric: tabular-nums; }
  .notentabelle th, .notentabelle td { height: var(--zeile); padding: 0 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid color-mix(in oklab, var(--linie) 55%, transparent); transition: background-color .18s; }
  .notentabelle thead th { position: sticky; top: 0; z-index: 3; background: var(--bg2); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); height: 42px; border-bottom: 1px solid var(--linie); }
  .notentabelle tbody th { font-weight: 700; position: sticky; left: 0; z-index: 1; background: var(--surface); }
  .notentabelle tbody tr { cursor: default; } #g-table tbody tr { cursor: pointer; }
  .notentabelle tbody tr:last-child > * { border-bottom: 0; }
  .chip { display: inline-block; min-width: 2.4em; padding: 2px 11px; text-align: center; border-radius: 999px; font-weight: 800; background: oklch(.9 .09 var(--gh, 150)); color: oklch(.27 .07 var(--gh, 150)); }
  :root[data-theme="dark"] .chip { background: oklch(.42 .1 var(--gh, 150)); color: oklch(.97 .03 var(--gh, 150)); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip { background: oklch(.42 .1 var(--gh, 150)); color: oklch(.97 .03 var(--gh, 150)); } }
  .lupe { position: absolute; left: 0; right: 0; top: 0; z-index: 2; pointer-events: none; border: 2.5px solid var(--lupe); border-radius: 12px; background: color-mix(in oklab, var(--lupe) 10%, transparent); box-shadow: 0 0 0 5px color-mix(in oklab, var(--lupe) 16%, transparent), 0 10px 26px -10px var(--lupe); height: var(--zeile); transition: translate .6s var(--feder), height .2s; will-change: translate; }
  .lupe.direkt { transition: none; }
  .tbl-rahmen:not(:has(.is-aktiv)) .lupe { display: none; }

  /* Hover: Zeile -> Spalte -> Zelle, je eigene Ebene (Spezifitaet egal, die spaetere Ebene gewinnt) */
  @media (hover: hover) {
    .notentabelle { --h-zeile: color-mix(in oklab, var(--akzent) 9%, transparent); --h-spalte: color-mix(in oklab, var(--akzent) 15%, transparent); --h-zelle: color-mix(in oklab, var(--akzent) 30%, transparent); }
  }

  /* ---------- Grenzkarten (magnetischer Bento-Hover) ---------- */
  .grenzen { margin-top: 10px; } .grenzen > .h3 { margin-bottom: 4px; } .grenzen .hinweis { margin: 0 0 14px; }
  .bento { position: relative; isolation: isolate; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); grid-auto-flow: dense; }
  .bento-karte { position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; text-decoration: none; color: var(--ink); background: none; border: 1px solid var(--linie); border-radius: 18px; padding: 16px; min-width: 0; box-shadow: none; transition: border-color .2s, opacity .2s; font-size: .95rem; }
  .bento-karte::before { content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; background: var(--surface); box-shadow: var(--schatten); }
  .bento-karte:hover, .bento-karte:focus-visible { border-color: color-mix(in oklab, var(--kraft, var(--akzent)) 50%, var(--linie)); }
  .bento-karte.ist-aktiv { border-color: var(--lupe); border-width: 2px; padding: 15px; }
  .bento-karte.leer { opacity: .5; cursor: not-allowed; }
  .bento-karte.gross { grid-column: span 2; grid-row: span 2; padding: 22px; }
  .bento-karte.gross .k-note { font-size: 5rem; margin-top: auto; }
  .bento-flaeche { position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 0; opacity: 0; pointer-events: none; background: var(--ton, var(--akzent-weich)); transition: translate .45s cubic-bezier(.22,.8,.24,1), width .45s cubic-bezier(.22,.8,.24,1), height .45s cubic-bezier(.22,.8,.24,1), background-color .3s, opacity .2s; }
  .bento-flaeche.an { opacity: 1; } .bento-flaeche.direkt { transition: opacity .2s, background-color .3s; }
  .k-ikon { display: block; height: 28px; color: var(--kraft, var(--akzent)); } .k-ikon .ik { width: 26px; height: 26px; }
  .bento-karte .k-ikon { position: absolute; right: 14px; top: 14px; height: auto; }
  .k-note { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 6px; }
  .k-zeile { color: var(--muted); font-size: .9rem; line-height: 1.35; } .k-pct { color: var(--ink); font-weight: 700; font-size: 1rem; }
  .k-titel { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin-top: 8px; }
  .k-text { color: var(--muted); font-size: .98rem; margin-top: 6px; }
  .k-extern { position: absolute; right: 16px; bottom: 16px; color: var(--kraft); }
  .merkmal .k-ikon, .mehr-karte .k-ikon { position: static; margin-bottom: 4px; } .merkmal .k-ikon .ik, .mehr-karte .k-ikon .ik { width: 34px; height: 34px; }
  .bento--merkmale { grid-template-columns: 1fr; }
  .bento--mehr { grid-template-columns: 1fr; } .mehr-karte { padding: 20px 20px 24px; min-height: 160px; } .mehr-karte .k-titel { margin-top: 12px; }
  @media (min-width: 720px) {
    .bento--merkmale { grid-template-columns: repeat(12, 1fr); }
    .m0 { grid-column: span 5; grid-row: span 2; padding: 26px; } .m0 .k-titel { font-size: 1.7rem; margin-top: auto; } .m0 .k-ikon .ik { width: 52px; height: 52px; }
    .m1, .m2 { grid-column: span 7; } .m3 { grid-column: span 3; } .m4 { grid-column: span 5; } .m5 { grid-column: span 4; }
    .bento--mehr { grid-template-columns: 7fr 5fr; }
  }
  @media (hover: hover) { .bento-karte .k-ikon .ik { transition: scale .3s var(--feder); } .bento-karte:hover .k-ikon .ik { scale: 1.08; } }
  /* Symbole zeichnen sich (nur die Keyframes tragen das Strichmuster; danach bleibt der Pfad ganz) */
  svg.zeichnet * { animation: zeichnen .95s cubic-bezier(.4,0,.2,1) backwards; }
  @keyframes zeichnen { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }

  /* ---------- Notenspiegel ---------- */
  .spiegel-reihen { display: grid; gap: 8px; margin-top: 14px; }
  .spiegel-zeile { display: grid; grid-template-columns: 3.4rem 4.6rem 1fr; gap: 10px; align-items: center; }
  .spiegel-zeile label { justify-self: start; font-weight: 800; padding: 3px 12px; min-width: 2.6rem; text-align: center; border-radius: 999px; background: oklch(.9 .09 var(--gh, 150)); color: oklch(.27 .07 var(--gh, 150)); }
  :root[data-theme="dark"] .spiegel-zeile label { background: oklch(.42 .1 var(--gh, 150)); color: oklch(.97 .03 var(--gh, 150)); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .spiegel-zeile label { background: oklch(.42 .1 var(--gh, 150)); color: oklch(.97 .03 var(--gh, 150)); } }
  .spiegel-zeile input { min-height: 44px; text-align: center; font-weight: 700; padding: 0 6px; }
  .balken-spur { height: 26px; border-radius: 10px; background: var(--bg2); overflow: hidden; }
  .balken { height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); border-radius: 10px; background: oklch(.72 .15 var(--gh, 150)); transition: transform .6s var(--feder); }
  .kennzahlen { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie); }
  .kennzahlen dt { font-size: .85rem; color: var(--muted); font-weight: 600; } .kennzahlen dd { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }

  /* ---------- Rechner-Seiten ---------- */
  .rechner-kopf { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; margin-bottom: 16px; }
  .rechner-gitter { display: grid; gap: 18px 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
  .rechner-gitter--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .presets .lbl { margin: 0 4px 0 0; }
  .avg-kopf, .avg-zeile { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(70px, .8fr) 14px minmax(70px, .8fr) minmax(70px, .8fr) 18px 44px; gap: 8px; align-items: center; }
  .avg-zeile--de { grid-template-columns: minmax(0, 1.8fr) minmax(70px, .8fr) minmax(70px, .8fr) 44px; }
  .avg-kopf { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
  .avg-zeile { margin-top: 8px; } .avg-von { text-align: center; color: var(--muted); } .avg-zeile .suffix { color: var(--muted); }
  .avg-zeile.neu { animation: zeile-rein .4s var(--ease); } .avg-zeile.weg { animation: zeile-raus .3s ease forwards; pointer-events: none; }
  @keyframes zeile-rein { from { opacity: 0; translate: 0 -10px; } } @keyframes zeile-raus { to { opacity: 0; translate: 24px 0; } }
  .af { display: block; min-width: 0; } .af-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .avg-fehler { grid-column: 1 / -1; margin: 0; font-size: .88rem; color: #b42318; }
  .avg-zeile.ungueltig { background: color-mix(in oklab, #d92d20 7%, transparent); border-radius: 14px; outline: 2px solid color-mix(in oklab, #d92d20 45%, transparent); outline-offset: 4px; }
  .avg-zeile.ungueltig input { border-color: #d92d20; }
  .feld-fehler { margin-top: 6px; font-size: .88rem; color: #b42318; font-weight: 600; } .feld-fehler.info { color: var(--muted); font-weight: 500; }
  .feld-fehler[hidden] { display: none; }
  .zahl.ungueltig, input[aria-invalid="true"] { border-color: #d92d20; box-shadow: 0 0 0 4px rgb(217 45 32 / .14); }
  :root[data-theme="dark"] .feld-fehler, :root[data-theme="dark"] .avg-fehler { color: #ff9b8f; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feld-fehler, :root:not([data-theme="light"]) .avg-fehler { color: #ff9b8f; } }
  @media (max-width: 640px) {
    .avg-kopf { display: none; }
    .af-l { position: static; width: auto; height: auto; clip-path: none; white-space: normal; display: block; font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
    .avg-zeile { grid-template-columns: 1fr 14px 1fr 1fr 44px; padding: 12px; border: 1px solid var(--linie); border-radius: 16px; background: var(--bg); align-items: end; }
    .avg-zeile .a-name-f { grid-column: 1 / -1; } .avg-zeile .suffix { display: none; }
    .avg-zeile .avg-von { padding-bottom: 10px; }
    .avg-zeile--de { grid-template-columns: 1fr 1fr 44px; } .avg-zeile--de .a-name-f { grid-column: 1 / -1; }
    .eigen-zeile { grid-template-columns: 1fr auto 1fr auto 44px; }
  }
  .zwei-richtungen { min-width: 0; } .zwei-richtungen .h3 { margin-bottom: 10px; }
  #n-table tbody tr { cursor: pointer; }

  /* ---------- FAQ ---------- */
  .faq-liste { display: grid; gap: 10px; max-width: 820px; }
  .faq-punkt { background: var(--surface); border: 1px solid var(--linie); border-radius: 16px; transition: border-color .2s, box-shadow .2s; }
  .faq-punkt:hover { border-color: color-mix(in oklab, var(--akzent) 45%, var(--linie)); }
  .faq-punkt[open] { box-shadow: var(--schatten); }
  .faq-punkt summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 58px; padding: 10px 18px; font-weight: 700; cursor: pointer; list-style: none; }
  .faq-punkt summary::-webkit-details-marker { display: none; }
  .faq-pfeil { color: var(--akzent); transition: rotate .3s var(--ease); } .faq-punkt[open] .faq-pfeil { rotate: 180deg; }
  .faq-antwort { padding: 0 18px 18px; color: var(--muted); max-width: 70ch; }
  @media (prefers-reduced-motion: no-preference) { @supports (interpolate-size: allow-keywords) {
    .faq-punkt::details-content { block-size: 0; overflow-y: clip; transition: block-size .32s var(--ease), content-visibility .32s allow-discrete; }
    .faq-punkt[open]::details-content { block-size: auto; }
  } }

  /* ---------- Fuss ---------- */
  .fuss { margin-top: clamp(48px, 8vw, 96px); background: var(--bg2); border-top: 1px solid var(--linie); }
  .fuss-innen { max-width: var(--breite); margin-inline: auto; padding: 36px var(--rand) 8px; display: grid; gap: 28px; grid-template-columns: 1fr; }
  @media (min-width: 720px) { .fuss-innen { grid-template-columns: 1.6fr 1fr 1fr; } }
  .fuss-marke p { margin-top: 10px; color: var(--muted); max-width: 36ch; font-size: .96rem; }
  .fuss-titel { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
  .fuss ul { margin: 0; padding: 0; list-style: none; } .fuss li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); text-decoration: none; font-weight: 600; } .fuss li a:hover { color: var(--akzent); text-decoration: underline; }
  .fuss-zeile { max-width: var(--breite); margin-inline: auto; padding: 18px var(--rand) 28px; color: var(--muted); font-size: .88rem; }
  .optout { margin-top: 14px; } .optout-status { color: var(--muted); font-size: .92rem; }

  /* Konfetti */
  .konfetti-feld { position: fixed; width: 0; height: 0; z-index: 90; pointer-events: none; }
  .konfetti { position: absolute; width: 9px; height: 14px; border-radius: 3px; left: -4px; top: -7px; }
  .konfetti.c0 { background: #ff6a3d; } .konfetti.c1 { background: #ffc93c; } .konfetti.c2 { background: #0d9f86; } .konfetti.c3 { background: #5b8def; } .konfetti.c4 { background: #e65fa7; } .konfetti.c5 { background: #8bc34a; }

  /* ---------- Seitenwechsel und Farbwechsel ---------- */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
  }
  html.thema-wechsel::view-transition-old(root), html.thema-wechsel::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  html.thema-wechsel::view-transition-old(root) { z-index: 1; } html.thema-wechsel::view-transition-new(root) { z-index: 2; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }

  /* ---------- Raster der Schieber-Seite ab Desktopbreite ---------- */
  @media (min-width: 1040px) {
    .werkzeug[data-tool="slider"] { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-areas: "schieber tabelle" "steuer tabelle" "grenzen grenzen" "spiegel spiegel"; align-items: start; }
    .werkzeug[data-tool="slider"] > .steuer { grid-area: steuer; } .werkzeug[data-tool="slider"] > .schieber-karte { grid-area: schieber; }
    .werkzeug[data-tool="slider"] > .tabelle-block { grid-area: tabelle; position: sticky; top: 80px; } .werkzeug[data-tool="slider"] > .tabelle-block .tbl-rahmen { max-height: min(64vh, 640px); }
    .werkzeug[data-tool="slider"] > .grenzen { grid-area: grenzen; } .werkzeug[data-tool="slider"] > .spiegel { grid-area: spiegel; }
  }
  .druckblatt { display: none; }
  /* Geteilter Link oder gespeicherter Stand: das Werkzeug erscheint erst, wenn der Zustand gesetzt ist (kein Aufblitzen der Voreinstellung); nach 2,5 s auf jeden Fall (ohne Skript) */
  html.zustand #werkzeug:not(.lebt) { visibility: hidden; animation: zeigen 0s 2.5s forwards; }
  @keyframes zeigen { to { visibility: visible; } }
}

@layer zeile {
  @media (hover: hover) { .notentabelle tbody tr:hover > * { background: var(--h-zeile, transparent); } }
}
@layer spalte {
  @media (hover: hover) {
    .notentabelle[data-col="1"] tbody > tr > :nth-child(1), .notentabelle[data-col="2"] tbody > tr > :nth-child(2), .notentabelle[data-col="3"] tbody > tr > :nth-child(3),
    .notentabelle[data-col="4"] tbody > tr > :nth-child(4), .notentabelle[data-col="5"] tbody > tr > :nth-child(5) { background: var(--h-spalte, transparent); }
    .notentabelle[data-col="1"] thead > tr > :nth-child(1), .notentabelle[data-col="2"] thead > tr > :nth-child(2), .notentabelle[data-col="3"] thead > tr > :nth-child(3),
    .notentabelle[data-col="4"] thead > tr > :nth-child(4), .notentabelle[data-col="5"] thead > tr > :nth-child(5) { color: var(--akzent); }
  }
}
@layer zelle {
  @media (hover: hover) { .notentabelle tbody > tr > :is(td, th):hover { background: var(--h-zelle, transparent); } }
}
@layer aktiv {
  .notentabelle tbody tr.is-aktiv > * { background: color-mix(in oklab, var(--lupe) 14%, var(--surface)); font-weight: 700; }
}

/* ---------- Druck: immer hell, nur das Druckblatt ---------- */
@layer druck {
  @page { margin: 12mm; }
  @media print {
    html, body { background: #fff !important; color: #000 !important; }
    body { font-size: 10pt; line-height: 1.35; }
    body > *:not(.druckblatt) { display: none !important; }
    .druckblatt { display: block !important; }
    .druck-titel { font-size: 16pt; letter-spacing: 0; margin: 0 0 2pt; color: #000; }
    .druck-meta { font-size: 8.5pt; color: #444; margin: 0 0 8pt; }
    .druck-reihe { display: flex; gap: 14pt; align-items: flex-start; }
    .druck-tab { border-collapse: collapse; font-size: 8.5pt; flex: 1 1 0; min-width: 0; font-variant-numeric: tabular-nums; }
    .druck-reihe.c1 .druck-tab { font-size: 11pt; }
    .druck-reihe.c2 .druck-tab { font-size: 10pt; } .druck-reihe.c5 .druck-tab { font-size: 7.5pt; }
    .druck-tab th, .druck-tab td { text-align: left; padding: 1.5pt 4pt; border-bottom: .5pt solid #999; white-space: nowrap; color: #000; background: none; }
    .druck-tab thead th { border-bottom: 1.2pt solid #000; font-size: .9em; }
    .druck-tab tr { break-inside: avoid; }
    .druck-chip { font-weight: 700; }
    .druck-grenzen { columns: 2; column-gap: 20pt; font-size: 9pt; margin: 10pt 0 0; padding: 0; list-style: none; border-top: .8pt solid #000; padding-top: 6pt; }
    .druck-grenzen li { break-inside: avoid; margin: 0 0 2pt; }
  }
}