/* ==================================================================
   Gestaltung — Libary/07_DESIGN_PRINZIPIEN.md

   ZWEI Regeln tragen alles:

   1. EINE Akzentfamilie. Violett→Cyan, sonst nur Neutraltöne. Farbe
      bedeutet entweder "Akzent" oder "Status" — sonst gar nichts.
      Leistungs- und Grundkurs unterscheiden sich über die HELLIGKEIT
      derselben Farbe, nicht über zwei Farben; die Identität trägt
      zusätzlich das LK/GK-Kürzel daneben.

   2. TIEFE KOMMT AUS DEM VERLAUF, nicht aus vielen Grautönen.
      Jede Ebene trägt denselben Neon-Verlauf in anderer Stärke:

        Ebene 0  Plane       kein Verlauf   — die Seite
        Ebene 1  Karte       1 % Kante      — angehoben
        Ebene 2  Hero        voller Verlauf — die eine Aussage
        Ebene -1 Wanne       nach innen     — eingelassen

      Dadurch wirkt alles wie aus einem Stück, und der Blick landet
      dort, wo der Verlauf am stärksten ist.
   ================================================================== */

:root {
  color-scheme: light;

  /* ---- Die eine Akzentfamilie ---- */
  --neon-a:   #6d4aff;      /* Violett */
  --neon-b:   #12b5d4;      /* Cyan */
  --neon-tief:#4a2fd6;
  --neon: linear-gradient(118deg, var(--neon-a) 0%, var(--neon-b) 100%);

  /* ---- Ebenen: neutral, nur drei Stufen ---- */
  --plane:      #f2f2f4;
  --flaeche:    #fbfbfc;
  --vertiefung: #ececed;
  --erhoben:    #14131c;
  --erhoben-ink:   #ffffff;
  --erhoben-ink-2: #a6a3bd;
  --erhoben-linie: rgba(255,255,255,.13);

  /* ---- Schrift ---- */
  --ink:       #14141a;
  --ink-2:     #55555f;
  --ink-muted: #8a8a95;

  /* ---- Linien ---- */
  --gitter: #e3e3e7;
  --achse:  #c6c6cd;
  --rand:   rgba(20,20,26,.10);
  --rand-2: rgba(20,20,26,.06);

  /* ---- Daten: EINE Rampe, zwei Stufen ---- */
  --lk:       #6d4aff;      /* Leistungskurs — volle Stufe */
  --gk:       #8b84ad;      /* Grundkurs — ruhige, entsättigte Fläche */
  --prognose: #6d4aff;      /* gleiche Farbe, per Deckkraft geschwächt */
  --spur:     #e3e3e7;

  /* ---- Status: nur wo Farbe wirklich Zustand heißt ---- */
  --good:     #0d9f5e;
  --warning:  #d99500;
  --serious:  #e0742f;
  --critical: #d8353f;

  /* ---- Schatten ---- */
  --schatten-1: 0 1px 1px rgba(20,20,26,.03), 0 4px 12px -6px rgba(20,20,26,.10);
  --schatten-2: 0 2px 6px rgba(20,20,26,.14), 0 24px 50px -18px rgba(74,47,214,.42);
  --schatten-innen: inset 0 1px 3px rgba(20,20,26,.07);

  /* ---- Maße: ein Raster für alles ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 22px; --s6: 30px;
  --r: 14px;  --r-s: 9px; --r-xs: 6px;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root:not([data-theme="light"]) { }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --neon-a: #8b6cff; --neon-b: #2ad0ef; --neon-tief: #6d4aff;
    --plane: #0a0a0e;  --flaeche: #16161c;  --vertiefung: #101015;
    --erhoben: #1b1a26; --erhoben-ink: #ffffff; --erhoben-ink-2: #b4b1c9;
    --erhoben-linie: rgba(255,255,255,.12);
    --ink: #f4f4f7;    --ink-2: #bdbdc8;     --ink-muted: #85858f;
    --gitter: #26262e; --achse: #35353f;
    --rand: rgba(255,255,255,.10); --rand-2: rgba(255,255,255,.055);
    --lk: #8b6cff;     --gk: #6a6485;        --prognose: #8b6cff;
    --spur: #26262e;
    --schatten-1: 0 1px 2px rgba(0,0,0,.55);
    --schatten-2: 0 2px 8px rgba(0,0,0,.65), 0 26px 56px -20px rgba(109,74,255,.5);
    --schatten-innen: inset 0 1px 4px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --neon-a: #8b6cff; --neon-b: #2ad0ef; --neon-tief: #6d4aff;
  --plane: #0a0a0e;  --flaeche: #16161c;  --vertiefung: #101015;
  --erhoben: #1b1a26; --erhoben-ink: #ffffff; --erhoben-ink-2: #b4b1c9;
  --erhoben-linie: rgba(255,255,255,.12);
  --ink: #f4f4f7;    --ink-2: #bdbdc8;     --ink-muted: #85858f;
  --gitter: #26262e; --achse: #35353f;
  --rand: rgba(255,255,255,.10); --rand-2: rgba(255,255,255,.055);
  --lk: #8b6cff;     --gk: #6a6485;        --prognose: #8b6cff;
  --spur: #26262e;
  --schatten-1: 0 1px 2px rgba(0,0,0,.55);
  --schatten-2: 0 2px 8px rgba(0,0,0,.65), 0 26px 56px -20px rgba(109,74,255,.5);
  --schatten-innen: inset 0 1px 4px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--plane);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--neon-tief); text-underline-offset: 2px; }
:root[data-theme="dark"] a,
:root:not([data-theme="light"]) a { color: var(--neon-a); }
/* Ein Link, der als Knopf auftritt, behält seine Knopffarbe. Die drei
   Regeln darüber sind spezifischer als `.knopf` und haben ihm sonst weiß
   durch Violett ersetzt — auf dem Neon-Verlauf war die Schrift dann fast
   unlesbar. */
:root a.knopf, :root a.knopf:hover { color: #fff; }
:root a.knopf.leise, :root a.knopf.leise:hover { color: var(--ink-2); }

/* ---------- Kopfzeile ------------------------------------------- */

header.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  padding: 10px var(--s5);
  background: color-mix(in srgb, var(--flaeche) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--rand-2);
}
/* Der Neon-Faden unter der Kopfzeile: die schwächste Stufe des Verlaufs. */
header.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--neon); opacity: .5;
}
header.top .marke {
  font-weight: 660; letter-spacing: -.02em; font-size: 15px;
  display: inline-flex; align-items: center; gap: var(--s2);
}
header.top .marke::before {
  content: ""; width: 8px; height: 8px; border-radius: 3px;
  background: var(--neon);
  box-shadow: 0 0 10px color-mix(in srgb, var(--neon-a) 70%, transparent);
}
header.top nav { display: flex; gap: 2px; flex-wrap: wrap; }
header.top nav a {
  padding: 6px 11px; border-radius: var(--r-xs); font-size: 13.5px;
  color: var(--ink-2); text-decoration: none;
}
header.top nav a:hover { background: var(--vertiefung); color: var(--ink); }
header.top nav a.aktiv {
  color: #fff; font-weight: 600; background: var(--neon);
}
header.top .rechts { margin-left: auto; display: flex; align-items: center;
                     gap: var(--s3); }
header.top .datum { color: var(--ink-muted); font-size: 12.5px;
                    font-variant-numeric: tabular-nums; }
button.thema {
  border: 1px solid var(--rand); background: transparent; color: var(--ink-2);
  border-radius: var(--r-xs); padding: 5px 9px; font: inherit; font-size: 12.5px;
  cursor: pointer;
}
button.thema:hover { background: var(--vertiefung); color: var(--ink); }

/* ---------- Raster ---------------------------------------------- */

main { max-width: 1180px; margin: 0 auto; padding: var(--s6) 20px 80px; }

.raster > *, .stapel > *, .karte, .hero { min-width: 0; }
.raster { display: grid; gap: var(--s3); }
.raster.zwei  { grid-template-columns: 1fr 1fr; }
.raster.haupt { grid-template-columns: 1.08fr 1fr; align-items: start; }
.stapel { display: grid; gap: var(--s3); align-content: start; }
@media (max-width: 940px) {
  .raster.zwei, .raster.haupt { grid-template-columns: 1fr; }
}

.seitenkopf { margin-bottom: var(--s5); }
.seitenkopf h1 { font-size: 23px; letter-spacing: -.025em; margin: 0; font-weight: 640; }
.seitenkopf p  { color: var(--ink-2); margin: 3px 0 0; font-size: 13.5px; }

/* ---------- Ebene 1: Karte -------------------------------------- */

.todo-neu { margin-top: 16px; border-radius: 999px; }
.kalender .todo-tag { display: block; width: 100%; min-height: 44px; padding: 10px 8px;
  margin: 0; border: 0; border-radius: 14px; background: transparent; color: inherit;
  box-shadow: none; text-align: left; cursor: pointer; transition: background .15s ease; }
.kalender .todo-tag:hover { background: color-mix(in srgb, var(--neon-a) 10%, transparent); filter: none; }
.kalender .todo-tag:focus-visible { outline: 2px solid var(--neon-a); outline-offset: -2px; }
.todo-dialog { width: min(540px, calc(100% - 32px)); max-height: 90vh; overflow-y: auto;
  margin: auto; padding: 28px; border: 1px solid var(--rand); border-radius: 28px;
  background: var(--flaeche); color: var(--ink); box-shadow: var(--schatten-1); }
.todo-dialog::backdrop { background: rgb(0 0 0 / .6); backdrop-filter: blur(5px); }
.todo-kopf, .todo-aktionen { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.todo-kopf { margin-bottom: 22px; }
.todo-kopf h2 { margin: 0; font-size: 22px; }
.todo-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.todo-felder > div { min-width: 0; }
.todo-dialog input, .todo-dialog select, .todo-dialog textarea, .todo-dialog button { border-radius: 14px; }
.todo-dialog input:not([type="hidden"]), .todo-dialog select, .todo-dialog textarea { width: 100%; }
.todo-aktionen { margin-top: 24px; justify-content: flex-end; }
.todo-tagesliste { margin-top: 18px; display: grid; gap: 8px; }
.todo-tagesliste h3 { font-size: 14px; }
@media (max-width: 480px) { .todo-dialog { padding: 20px; } .todo-felder { grid-template-columns: 1fr; } }
.wochenkennung {
  display: inline-flex; align-items: center; padding: 3px 10px; margin: 4px 6px 4px 0;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--neon-a) 35%, transparent);
  background: color-mix(in srgb, var(--neon-a) 10%, var(--flaeche));
  color: var(--ink); font-size: 12px; font-weight: 650; white-space: nowrap;
}
.karte {
  position: relative; isolation: isolate;
  background: var(--flaeche);
  border: 1px solid var(--rand-2);
  border-radius: var(--r);
  padding: var(--s4) var(--s5) var(--s5);
  box-shadow: var(--schatten-1);
  overflow: hidden;
}
/* Die schwächste Verlaufsstufe: eine Neon-Kante oben. Sie macht jede Karte
   zur selben Familie wie der Hero, ohne laut zu werden. */
.karte::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--neon); opacity: .32; pointer-events: none;
}

.marke-abschnitt {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 11px; font-weight: 680; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 var(--s3);
}
.marke-abschnitt .nr {
  font-variant-numeric: tabular-nums; color: #fff;
  background: var(--neon); border-radius: var(--r-xs);
  padding: 1px 6px; font-size: 10px; letter-spacing: .04em;
}
.marke-abschnitt::after { content: ""; flex: 1; height: 1px; background: var(--rand-2); }

.frage { font-size: 16px; font-weight: 630; letter-spacing: -.012em; margin: 0 0 3px; }
.hinweis { color: var(--ink-muted); font-size: 12.5px; margin: 0 0 var(--s3);
           line-height: 1.45; }
.hinweis:last-child { margin-bottom: 0; }

/* ---------- Ebene 2: Hero — der volle Verlauf ------------------- */

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--erhoben);
  color: var(--erhoben-ink);
  border-radius: var(--r);
  padding: var(--s5) 26px;
  box-shadow: var(--schatten-2);
  margin-bottom: var(--s3);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(96% 130% at 100% 0%,
      color-mix(in srgb, var(--neon-b) 40%, transparent) 0%, transparent 58%),
    radial-gradient(90% 120% at 8% 108%,
      color-mix(in srgb, var(--neon-a) 46%, transparent) 0%, transparent 62%);
}
.hero::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--neon); opacity: .9;
}
.hero > * { position: relative; }

.hero-kopf { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
             margin-bottom: var(--s3); }
.hero-kopf .label { font-size: 11px; font-weight: 680; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--erhoben-ink-2); }
.hero-zahl { font-size: clamp(46px, 7vw, 66px); font-weight: 650;
             letter-spacing: -.04em; line-height: .95; }
.hero-zahl .einheit { font-size: .32em; font-weight: 500;
                      color: var(--erhoben-ink-2); letter-spacing: -.01em; }
.hero-satz { font-size: 14px; color: var(--erhoben-ink-2); margin: var(--s3) 0 0;
             max-width: 54ch; line-height: 1.5; }
.hero-satz strong { color: var(--erhoben-ink); font-weight: 620; }

.hero-reihe { display: flex; gap: 28px; flex-wrap: wrap;
              margin-top: var(--s5); padding-top: var(--s4);
              border-top: 1px solid var(--erhoben-linie); }
.hero-reihe .feld .k { font-size: 11px; letter-spacing: .08em;
                       text-transform: uppercase; color: var(--erhoben-ink-2);
                       font-weight: 640; }
.hero-reihe .feld .v { font-size: 19px; font-weight: 620; margin-top: 3px;
                       letter-spacing: -.02em; }
.hero-reihe .feld .v .klein { font-size: 12.5px; font-weight: 500;
                              color: var(--erhoben-ink-2); }

/* ---------- Ebene -1: Wanne ------------------------------------- */

.wanne {
  position: relative;
  background: var(--vertiefung);
  border-radius: var(--r-s);
  box-shadow: var(--schatten-innen);
  padding: var(--s3) var(--s3);
  min-width: 0;
}
.hero .wanne { background: rgba(0,0,0,.30); box-shadow: none;
               border: 1px solid var(--erhoben-linie); }

/* ---------- Kennzahlen ------------------------------------------ */

.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.kennzahl { position: relative; overflow: hidden;
            background: var(--flaeche); border: 1px solid var(--rand-2);
            border-radius: var(--r); padding: var(--s4) 18px;
            box-shadow: var(--schatten-1); }
.kennzahl::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
                    background: var(--neon); opacity: .24; }
.kennzahl .label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
                   color: var(--ink-muted); font-weight: 660; }
.kennzahl .wert { font-size: 29px; font-weight: 630; letter-spacing: -.03em;
                  line-height: 1.15; margin-top: 7px; }
.kennzahl .wert .klein { font-size: 14px; font-weight: 500; color: var(--ink-muted);
                         letter-spacing: -.01em; }
.kennzahl .fuss { font-size: 12px; color: var(--ink-muted); margin-top: 5px; }
@media (max-width: 760px) { .kennzahlen { grid-template-columns: 1fr; } }

/* ---------- Diagramme ------------------------------------------- */

.chartbox { overflow-x: auto; overflow-y: hidden; padding: 2px 0 var(--s1); }
.chartbox svg.chart { min-width: 440px; }
svg.chart { width: 100%; height: auto; display: block; overflow: hidden; }

svg.chart .grid    { stroke: var(--gitter); stroke-width: 1; }
svg.chart .achse   { stroke: var(--achse); stroke-width: 1; }
svg.chart .schwelle{ stroke: var(--achse); stroke-width: 1; }
svg.chart .schwelle-hart { stroke: var(--ink-muted); stroke-width: 1.5; }
svg.chart .tick    { fill: var(--ink-muted); font-size: 11px;
                     font-family: var(--sans); font-variant-numeric: tabular-nums; }
svg.chart .kategorie { fill: var(--ink-2); font-size: 12.5px; font-family: var(--sans); }
svg.chart .wert    { fill: var(--ink); font-size: 12px; font-weight: 640;
                     font-family: var(--sans); font-variant-numeric: tabular-nums; }
svg.chart .linie   { fill: none; stroke: var(--lk); stroke-width: 2;
                     stroke-linejoin: round; stroke-linecap: round; }
svg.chart .wash    { fill: var(--lk); opacity: .12; }
svg.chart .marker  { fill: var(--lk); stroke: var(--flaeche); stroke-width: 2; }
svg.chart .balken-lk { fill: var(--lk); }
svg.chart .balken-gk { fill: var(--gk); }
/* Legendenmarke: LK trägt den Verlauf, GK die ruhige Fläche. */
.legende i.seg-lk { background: var(--neon); }
.legende i.seg-gk { background: var(--gk); }
svg.chart .balken-prognose { fill: var(--prognose); opacity: .40; }
svg.chart .spur    { fill: var(--spur); }
svg.chart .marke-krit { fill: var(--critical); }
svg.chart .marke-warn { fill: var(--warning); }
svg.chart .marke-ser  { fill: var(--serious); }
svg.chart .marke-ok   { fill: var(--good); }

.legende { display: flex; gap: 15px; flex-wrap: wrap; margin-top: var(--s3);
           font-size: 12.5px; color: var(--ink-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 9px; height: 9px; border-radius: 3px; display: inline-block;
             flex: none; }

svg.spark { display: block; width: 66px; height: 22px; overflow: hidden; }
svg.spark .l { fill: none; stroke: var(--ink-muted); stroke-width: 1.5;
               stroke-linejoin: round; stroke-linecap: round; }
svg.spark .p { fill: var(--lk); }

/* ---------- Messbalken in HTML ---------------------------------- */

.meter { margin: 0; }
.meter-bahn { position: relative; padding: 9px 0; }
.meter-spur { position: relative; height: 20px; border-radius: var(--r-xs);
              background: var(--spur); overflow: hidden; }
.meter-spur i { position: absolute; top: 0; bottom: 0; left: 0;
                border-radius: var(--r-xs); }
.meter-marke { position: absolute; top: 2px; bottom: 2px; width: 2px;
               background: var(--ink-muted); border-radius: 1px; }
.meter-achse { display: flex; justify-content: space-between;
               font-size: 11px; color: var(--ink-muted); margin-top: 5px;
               font-variant-numeric: tabular-nums; }
.meter-schwelle { position: absolute; top: 0; font-size: 11px;
                  color: var(--ink-muted); white-space: nowrap;
                  transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.meter-kopf { position: relative; height: 15px; }
.hero .meter-spur { background: rgba(255,255,255,.15); }
.hero .meter-marke { background: var(--erhoben-ink-2); }
.hero .meter-achse, .hero .meter-schwelle { color: var(--erhoben-ink-2); }

/* Gefüllte Segmente tragen den Verlauf — dieselbe Familie wie überall. */
.seg-lk  { background: var(--neon); }
.seg-gk  { background: var(--gk); }
.seg-pro { background: var(--neon); opacity: .38; }

/* ---------- Fächer-Panel ---------------------------------------- */

.fachzeile {
  display: grid; grid-template-columns: minmax(0, 1fr) 66px 62px 44px;
  align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--rand-2);
}
@media (max-width: 520px) {
  .fachzeile { grid-template-columns: minmax(0, 1fr) 56px 44px; }
  .fachzeile > div:nth-child(2) { display: none; }
}
.fachzeile:first-of-type { border-top: none; }
.fachzeile .name { font-size: 13.5px; display: flex; align-items: center; gap: 7px;
                   min-width: 0; }
.fachzeile .name b { font-weight: 550; overflow: hidden; text-overflow: ellipsis;
                     white-space: nowrap; }
.fachbalken { height: 7px; border-radius: var(--r-xs); background: var(--spur);
              overflow: hidden; margin-top: 5px; }
.fachbalken i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.fachzeile .zahl-gross { font-size: 15px; font-weight: 640; text-align: right;
                         font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.trend { font-size: 11.5px; font-weight: 640; text-align: right; white-space: nowrap;
         font-variant-numeric: tabular-nums; }
.trend.auf    { color: var(--good); }
.trend.ab     { color: var(--critical); }
.trend.gleich, .trend.unbekannt { color: var(--ink-muted); }

/* ---------- Stufen ---------------------------------------------- */

.stufen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stufe { position: relative; overflow: hidden;
         background: var(--vertiefung); border: 1px solid var(--rand-2);
         border-radius: var(--r-s); padding: 9px 10px; text-align: center; }
.stufe::before { content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
                 background: var(--neon); opacity: .45; }
.stufe.leer { background: transparent; border-style: dashed;
              border-color: var(--achse); }
.stufe.leer::before { display: none; }
.stufe .hj { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
             color: var(--ink-muted); font-weight: 660; }
.stufe .pt { font-size: 18px; font-weight: 640; margin-top: 2px; letter-spacing: -.02em; }
.stufe.leer .pt { color: var(--ink-muted); font-weight: 500; font-size: 15px; }

/* ---------- Listen ---------------------------------------------- */

ul.liste { list-style: none; margin: 0; padding: 0; }
ul.liste li { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
              padding: 9px 0; border-top: 1px solid var(--rand-2); }
ul.liste li:first-child { border-top: none; }

.punkt { width: 7px; height: 7px; border-radius: 50%; flex: none;
         transform: translateY(-1px); }
.punkt.critical { background: var(--critical); }
.punkt.serious  { background: var(--serious); }
.punkt.warning  { background: var(--warning); }
.punkt.ok       { background: var(--good); }
.punkt.keine    { background: var(--achse); }

.frist { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.frist.critical { color: var(--critical); font-weight: 640; }
.frist.serious  { color: var(--ink); font-weight: 620; }
.frist.warning, .frist.ok, .frist.keine { color: var(--ink-muted); }

.wachsend { flex: 1; min-width: 0; }
.klein { font-size: 12px; color: var(--ink-muted); }
.marke-fach { font-size: 10.5px; font-weight: 660; letter-spacing: .03em;
              padding: 1px 6px; border-radius: var(--r-xs);
              background: var(--vertiefung); color: var(--ink-2);
              white-space: nowrap; }

.stunde-jetzt { background: color-mix(in srgb, var(--neon-a) 10%, transparent);
                border-radius: var(--r-s); padding-left: 10px; padding-right: 10px;
                margin: 0 -10px; }
.jetzt-marke { font-size: 10px; font-weight: 700; letter-spacing: .08em;
               text-transform: uppercase; color: var(--neon-tief); }

/* ---------- Befunde --------------------------------------------- */

.befund { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid var(--rand-2); }
.befund:first-of-type { border-top: none; }
.befund .zeichen { font-weight: 700; font-size: 11px; flex: none;
                   width: 18px; height: 18px; border-radius: var(--r-xs);
                   display: grid; place-items: center; color: #fff; }
.befund.ok       .zeichen { background: var(--good); }
.befund.warnung  .zeichen { background: var(--warning); color: #3a2a00; }
.befund.kritisch .zeichen { background: var(--critical); }
.befund.offen    .zeichen { background: var(--achse); color: var(--flaeche); }
.befund .titel  { font-weight: 620; font-size: 13.5px; }
.befund .text   { font-size: 12.5px; color: var(--ink-2); }
.befund .quelle { font-size: 11px; color: var(--ink-muted); margin-top: 2px;
                  font-variant-numeric: tabular-nums; }

/* ---------- Tabellen -------------------------------------------- */

.scroll-x { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
     color: var(--ink-muted); font-weight: 660; padding: 0 10px var(--s2);
     border-bottom: 1px solid var(--rand); white-space: nowrap; }
td { padding: var(--s2) 10px; border-bottom: 1px solid var(--rand-2);
     font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
td.zahl, th.zahl { text-align: right; }
.unterkurs { color: var(--critical); font-weight: 660; }

tr.zeile-ziel td {
  background: color-mix(in srgb, var(--neon-a) 11%, transparent);
  border-bottom-color: color-mix(in srgb, var(--neon-a) 24%, transparent);
}
tr.zeile-ziel td:first-child { box-shadow: inset 2px 0 0 var(--neon-a); }
tr.zeile-grenze td { background: color-mix(in srgb, var(--warning) 13%, transparent); }
tr.zeile-grenze td:first-child { box-shadow: inset 2px 0 0 var(--warning); }

/* ---------- Formulare ------------------------------------------- */

label { display: block; font-size: 11.5px; font-weight: 640; color: var(--ink-2);
        margin-bottom: var(--s1); letter-spacing: .01em; }
input[type=text], input[type=date], input[type=number], input[type=password], input[type=url], input[type=search],
select, textarea {
  width: 100%; padding: var(--s2) 10px; font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--vertiefung);
  border: 1px solid var(--rand-2); border-radius: var(--r-s);
  box-shadow: var(--schatten-innen);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--neon-a); outline-offset: 1px;
  border-color: transparent; background: var(--flaeche);
}
input.punktefeld { text-align: center; padding: 6px var(--s1);
                   font-variant-numeric: tabular-nums; font-weight: 600; }
.feldreihe { display: flex; gap: 11px; flex-wrap: wrap; align-items: flex-end; }
.feldreihe > div { flex: 1 1 160px; }

button, .knopf {
  font: inherit; font-size: 13.5px; font-weight: 620; cursor: pointer;
  padding: var(--s2) 15px; border-radius: var(--r-s); border: 1px solid transparent;
  background: var(--neon); color: #fff; text-decoration: none;
  display: inline-block; white-space: nowrap;
  box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--neon-a) 80%, transparent);
}
button:hover, .knopf:hover { filter: brightness(1.08); }
button.leise, .knopf.leise { background: var(--vertiefung); color: var(--ink-2);
                             border-color: var(--rand-2); box-shadow: none; }
button.leise:hover { filter: none; background: var(--spur); color: var(--ink); }
button.gefahr { background: transparent; color: var(--critical); box-shadow: none;
                border-color: var(--rand); padding: var(--s1) 9px; font-size: 12px; }
.hero button, .hero select {
  background: rgba(255,255,255,.12); color: var(--erhoben-ink);
  border: 1px solid var(--erhoben-linie); box-shadow: none;
}
.hero label { color: var(--erhoben-ink-2); }
.hero select option { background: var(--flaeche); color: var(--ink); }

/* ---------- Meldungen ------------------------------------------- */

.meldung { position: relative; overflow: hidden;
           padding: 10px var(--s3); border-radius: var(--r-s); font-size: 13.5px;
           margin-bottom: var(--s3); background: var(--flaeche);
           border: 1px solid var(--rand-2); box-shadow: var(--schatten-1); }
.meldung::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
                   background: var(--neon); }
.meldung.fehler { color: var(--critical); }
.meldung.fehler::before { background: var(--critical); }

/* ---------- Leerzustände ---------------------------------------- */

.leer { border: 1px dashed var(--achse); border-radius: var(--r-s);
        padding: var(--s5); text-align: center; color: var(--ink-muted);
        font-size: 13px; }
.leer strong { display: block; color: var(--ink-2); margin-bottom: 3px;
               font-size: 13.5px; }

.regel { border-left: 2px solid var(--achse); padding: 2px 0 2px 13px;
         font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.regel code { font-size: 12px; color: var(--ink); background: var(--vertiefung);
              padding: 1px 5px; border-radius: var(--r-xs); }

/* ---------- Checkliste (Einrichtung) ---------------------------- */

.schritte { list-style: none; margin: 0; padding: 0; }
.schritte li { display: flex; gap: 11px; align-items: flex-start;
               padding: 11px 0; border-top: 1px solid var(--rand-2); }
.schritte li:first-child { border-top: none; }
.schritte .haken { flex: none; width: 20px; height: 20px; border-radius: var(--r-xs);
                   display: grid; place-items: center; font-size: 11px;
                   font-weight: 700; color: #fff; }
.schritte li.ok   .haken { background: var(--good); }
.schritte li.offen .haken { background: var(--vertiefung); color: var(--ink-muted);
                            border: 1px solid var(--rand); }
.schritte .was { font-weight: 600; font-size: 13.5px; }
.schritte .wie { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }

.befehl { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
          font-size: 12px; background: var(--vertiefung); color: var(--ink);
          padding: 10px 12px; border-radius: var(--r-s); margin-top: var(--s2);
          overflow-wrap: anywhere; white-space: pre-wrap;
          box-shadow: var(--schatten-innen); }

.abzeichen { display: inline-flex; align-items: center; gap: 6px;
             font-size: 11px; font-weight: 660; letter-spacing: .04em;
             text-transform: uppercase; padding: 3px 9px; border-radius: 20px; }
.abzeichen.an  { background: var(--neon); color: #fff; }
.abzeichen.aus { background: var(--vertiefung); color: var(--ink-muted);
                 border: 1px solid var(--rand); }
.abzeichen.fehler { background: var(--critical); color: #fff; }

footer.fuss { max-width: 1180px; margin: 0 auto; padding: 0 20px 40px;
              color: var(--ink-muted); font-size: 11.5px; line-height: 1.6; }

/* ------------------------------------------------------------------
   Der Stundenkalender.

   Drei Regeln, die das Gitter ruhig halten:

   1. JEDE Stundenkachel hat DIESELBE Höhe — Fach, Ort, Termine. Die
      Terminzeile ist auch dann da, wenn nichts ansteht. Sonst springt
      das Gitter, sobald irgendwo ein Test auftaucht, und das Auge
      verliert die Zeile.
   2. Tiefe kommt aus dem Verlauf, nicht aus Farben: Leistungskurs trägt
      die volle Akzentkante, Grundkurs dieselbe Kante entsättigt. Zwei
      Stufen einer Rampe, nie zwei Farben.
   3. Farbe heisst hier NUR Zustand: heute, laufende Stunde, Leistung.
      Alles andere ist neutral.
   ------------------------------------------------------------------ */

.kalenderkarte { padding-bottom: var(--s4); }

.kalenderkopf { display: flex; align-items: flex-end; justify-content: space-between;
                gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.kalenderkopf .spanne { font-size: 17px; font-weight: 640; letter-spacing: -.015em; }

.blaettern { display: flex; align-items: center; gap: var(--s1); }
.blaettern a { display: grid; place-items: center; height: 30px; min-width: 30px;
               padding: 0 11px; border-radius: var(--r-s); text-decoration: none;
               font-size: 13px; font-weight: 600; color: var(--ink-2);
               border: 1px solid var(--rand-2); background: var(--flaeche);
               transition: background .12s ease, color .12s ease, border-color .12s ease; }
.blaettern a:hover { color: var(--ink); border-color: var(--achse); }
.blaettern .pfeil { font-size: 17px; line-height: 1; padding: 0 9px; }
.blaettern .jetzt { background: var(--neon); color: #fff; border-color: transparent; }
.blaettern .jetzt:hover { color: #fff; }
.blaettern .jetzt.aus { background: var(--flaeche); color: var(--ink-muted); }

table.kalender { border-collapse: separate; border-spacing: 6px 6px;
                 width: 100%; min-width: 860px; table-layout: fixed; }
table.kalender th { border: none; padding: 0 0 var(--s1); text-align: left;
                    font-weight: 600; }
table.kalender th .wt { font-size: 11px; font-weight: 680; letter-spacing: .05em;
                        text-transform: uppercase; color: var(--ink-muted); }
table.kalender th .dt { font-size: 11px; color: var(--ink-muted); margin-left: 5px; }
table.kalender th.heute .wt,
table.kalender th.heute .dt { color: var(--neon-tief); }
table.kalender td { border: none; padding: 0; vertical-align: top;
                    /* height:1px klingt falsch, ist aber der einzige zuverlässige
                       Weg, damit `height:100%` in der Kachel greift: die Zeile
                       wächst ohnehin auf ihren höchsten Inhalt, und alle Kacheln
                       ziehen mit. Ohne das steht neben einer Stunde mit zwei
                       Terminen eine halbhohe Kachel und darunter ein Loch. */
                    height: 1px; }

/* Die Stundenspalte bleibt beim Querscrollen stehen — sonst weiss man auf
   schmalen Fenstern nicht mehr, welche Stunde man gerade liest. */
table.kalender .std-spalte { width: 60px; position: sticky; left: 0; z-index: 2;
                             background: var(--flaeche); }
table.kalender td.std-spalte { padding-top: 7px; }
table.kalender .std-spalte .nr { font-size: 15px; font-weight: 640;
                                 color: var(--ink-2); line-height: 1; }
table.kalender .std-spalte .zeit { font-size: 10.5px; color: var(--ink-muted);
                                   line-height: 1.35; margin-top: 3px;
                                   font-variant-numeric: tabular-nums; }

/* Heute wird NICHT über einen Spaltenhintergrund markiert: wegen des
   Zellabstands würde jede freie Stunde als grauer Geisterkasten erscheinen,
   und eine leere Stunde ist nichts, was Aufmerksamkeit verdient.
   Stattdessen: Akzent in der Kopfzeile, eine Linie darunter, und die Kacheln
   des Tages mit einer Spur kräftigerer Kontur. */
table.kalender th.heute { border-bottom: 2px solid var(--neon-a); }
table.kalender td.heute .stunde { border-color: var(--rand); }

.kalender .stunde { position: relative; height: 100%; border-radius: var(--r-s);
                    background: var(--flaeche); border: 1px solid var(--rand-2);
                    padding: 8px 10px 8px 13px; overflow: hidden;
                    display: flex; flex-direction: column; gap: 2px; }
.kalender .stunde::before { content: ""; position: absolute; inset: 0 auto 0 0;
                            width: 3px; background: var(--neon); }
.kalender .stunde.gk::before { background: var(--gk); }

/* Die laufende Stunde — der einzige Ort, an dem der Verlauf voll aufträgt. */
.kalender .stunde.jetzt { border-color: transparent;
                          box-shadow: 0 0 0 1.5px var(--neon-a),
                                      0 6px 18px -8px rgba(74,47,214,.55); }

.kalender .stunde .kopf { display: flex; align-items: baseline; gap: 5px; }
.kalender .stunde .fach { font-size: 13px; font-weight: 620; letter-spacing: -.012em;
                          line-height: 1.25; overflow-wrap: break-word; hyphens: auto;
                          min-width: 0; }
.kalender .stunde .stufe { flex: none; font-size: 9px; font-weight: 700;
                           letter-spacing: .06em; color: var(--neon-tief);
                           border: 1px solid currentColor; border-radius: 3px;
                           padding: 0 3px; line-height: 1.5; }
.kalender .stunde .ort { font-size: 11px; color: var(--ink-muted);
                         display: flex; align-items: center; gap: 6px; min-height: 15px; }
.kalender .stunde .eigen { font-size: 9px; font-weight: 660; letter-spacing: .04em;
                           text-transform: uppercase; border: 1px solid var(--rand);
                           border-radius: 20px; padding: 0 5px; }
/* Bei einer Doppelstunde steht die volle Zeitspanne mit im Fuss — die
   Stundenspalte links zeigt ja nur die Einzelstunden. */
.kalender .stunde .dauer { font-variant-numeric: tabular-nums; }
.kalender .stunde .dauer::before { content: "· "; }

/* ── Die Terminzeile. Immer vorhanden, auch leer: das hält alle Kacheln
      auf gleicher Höhe und reserviert den Platz für Tests und Aufgaben. ── */
/* Die zusammengefasste Doppelstunde bekommt etwas mehr Luft: sie hat die
   doppelte Höhe zur Verfügung, und der Inhalt soll nicht oben kleben. */
.kalender .stunde.doppel { padding-top: 11px; padding-bottom: 11px; }
.kalender .stunde.doppel .termine { margin-top: auto; }

.kalender .termine { margin-top: 5px; padding-top: 5px; min-height: 21px;
                     border-top: 1px solid var(--rand-2);
                     display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; }
.kalender .termine.offen { border-top: none; padding-top: 0; margin-top: 0;
                           min-height: 26px; }

/* Der Stoff der Stunde (SWOPs Unterrichtsdokumentation). Bewusst leise:
   keine Farbe, kein Chip, keine eigene Trennlinie. Termine sind das, was
   man tun muss; das hier ist, was war. Zwei Zeilen Maximum — ein Kalender,
   in dem eine Kachel plötzlich fünf Zeilen hoch wird, ist keiner mehr. */
.kalender .stoff { margin-top: 4px; font-size: 10.5px; line-height: 1.35;
                   color: var(--ink-muted); display: -webkit-box;
                   -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                   overflow: hidden; }
.kalender .stoff span + span::before { content: " · "; opacity: .6; }

.ereignis { display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
            text-decoration: none; cursor: pointer;
            transition: filter .12s ease, box-shadow .12s ease;
            font-size: 10.5px; font-weight: 600; line-height: 1.5;
            padding: 1px 7px 1px 5px; border-radius: 20px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ereignis .pkt { flex: none; width: 5px; height: 5px; border-radius: 50%;
                 background: currentColor; }
.ereignis.aufgabe  { color: var(--ink-2); background: var(--vertiefung);
                     box-shadow: inset 0 0 0 1px var(--rand-2); }
.ereignis.leistung { color: #fff; background: var(--neon); }
.ereignis.erledigt { opacity: .45; text-decoration: line-through; }
.ereignis:hover { filter: brightness(1.06); }
.ereignis.aufgabe:hover { box-shadow: inset 0 0 0 1px var(--achse); }
.ereignis.leistung:hover { box-shadow: 0 2px 8px -2px rgba(74,47,214,.5); }

/* Fliesstext auf der Termin-Seite: das, was die Lehrkraft geschrieben hat. */
/* ---------- Alexandria -------------------------------------------- */
.suchleiste { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.suchleiste input[type="search"] { flex: 1 1 260px; min-width: 0; }
.leise-link { font-size: 12.5px; color: var(--ink-muted); }

.filterreihe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s4); }
.filter { display: inline-flex; align-items: center; gap: 6px;
          font-size: 12px; font-weight: 600; text-decoration: none;
          color: var(--ink-2); background: var(--vertiefung);
          border: 1px solid var(--rand-2); border-radius: 20px;
          padding: 4px 11px; transition: background .12s ease, color .12s ease; }
.filter:hover { border-color: var(--achse); }
/* Voller Farbton statt Verlauf: auf 90 px Breite bringt ein Verlauf keine
   Tiefe, aber am hellen Ende sinkt der Kontrast zur weissen Schrift. */
.filter.an { background: var(--neon-tief); color: #fff; border-color: transparent; }
.filter .zahl { font-size: 10.5px; opacity: .7; font-variant-numeric: tabular-nums; }

/* Die Auswahl, fuer welche Faecher gesammelt wird. Kein Kaestchen-Wald:
   ein Schalter je Fach, der gedrueckt aussieht, wenn er an ist. */
.wahl { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
        font-size: 12.5px; font-weight: 600; color: var(--ink-muted);
        background: var(--vertiefung); border: 1px solid var(--rand-2);
        border-radius: 20px; padding: 5px 12px; user-select: none; }
.wahl input { appearance: none; width: 9px; height: 9px; border-radius: 50%;
              margin: 0; border: 1px solid var(--achse); background: none; }
.wahl.an { color: var(--ink); border-color: var(--neon-a); }
.wahl.an input { background: var(--neon); border-color: transparent; }
.wahl .stufe { font-size: 9px; font-weight: 700; letter-spacing: .06em;
               color: var(--neon-tief); border: 1px solid currentColor;
               border-radius: 3px; padding: 0 3px; }

.liste.archiv li.ungelesen .titel-link,
.liste.archiv li.ungelesen > .wachsend > strong { color: var(--ink); }
.liste.archiv li:not(.ungelesen) { opacity: .72; }
.knopfreihe { display: flex; gap: 4px; flex: none; align-items: flex-start; }
.marke-fach.gemerkt { background: var(--neon); color: #fff; }

/* ---------- Arsenal ---------------------------------------------- */
.raster.karten { display: grid; gap: var(--s4);
                 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.lehrkarte { display: block; text-decoration: none; color: inherit;
             position: relative; overflow: hidden;
             transition: transform .12s ease, box-shadow .12s ease; }
.lehrkarte::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
                    background: var(--neon); }
.lehrkarte.gk::after { background: var(--gk); }
.lehrkarte:hover { transform: translateY(-1px); box-shadow: var(--schatten-2); }
.lehrkarte .wer { font-size: 15px; font-weight: 640; letter-spacing: -.015em;
                  display: flex; align-items: baseline; gap: 6px; }
.lehrkarte .wer .stufe { font-size: 9px; font-weight: 700; letter-spacing: .06em;
                         color: var(--neon-tief); border: 1px solid currentColor;
                         border-radius: 3px; padding: 0 3px; line-height: 1.5; }
.lehrkarte .was { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
.lehrkarte .zahlen { display: flex; flex-wrap: wrap; gap: 5px;
                     margin-top: var(--s4); font-size: 11px; font-weight: 600; }
.lehrkarte .zahlen span { background: var(--vertiefung); color: var(--ink-2);
                          border-radius: 20px; padding: 2px 9px; }
.lehrkarte .zahlen .warnt { background: var(--neon); color: #fff; }
.lehrkarte .zahlen .still { background: none; color: var(--ink-muted);
                            padding-left: 0; font-weight: 500; }

/* Knöpfe in einer Liste sind Beiwerk, nicht die Hauptsache. In voller
   Größe ziehen sie den Blick auf das Entfernen statt auf den Inhalt. */
.liste button { font-size: 11.5px; padding: 4px 10px; }

.titel-link.durch { text-decoration: line-through; opacity: .5; }

.titel-link { color: inherit; text-decoration: none; font-weight: 600; }
.titel-link:hover { color: var(--neon-tief); text-decoration: underline; }

.fliesstext { font-size: 14px; line-height: 1.65; color: var(--ink-2);
              overflow-wrap: anywhere; white-space: pre-wrap; }
.fliesstext a { overflow-wrap: anywhere; }
.termine .mehr { font-size: 10.5px; font-weight: 640; color: var(--ink-muted);
                 align-self: center; }

tr.lose td.std-spalte .zeit { font-size: 10px; text-transform: uppercase;
                              letter-spacing: .05em; padding-top: 4px; }

.fussnote { margin: var(--s4) 0 0; font-size: 11.5px; color: var(--ink-muted);
            line-height: 1.6; }
.fussnote em { font-style: normal; font-weight: 640; color: var(--ink-2); }

/* Im Dunkeln trägt derselbe Akzent eine Stufe heller — sonst verschwindet
   das Violett auf dem fast schwarzen Grund. Beide Schreibweisen, weil der
   Umschalter oben rechts `data-theme` setzt und die Systemeinstellung nicht. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) table.kalender th.heute .wt,
  :root:not([data-theme="light"]) table.kalender th.heute .dt,
  :root:not([data-theme="light"]) .kalender .stunde .stufe { color: var(--neon-a); }
}
:root[data-theme="dark"] table.kalender th.heute .wt,
:root[data-theme="dark"] table.kalender th.heute .dt,
:root[data-theme="dark"] .kalender .stunde .stufe { color: var(--neon-a); }

/* Eingeklappte Karten: die Eingabemasken sind Übergangslösungen und
   sollen nicht die halbe Seite belegen. */
details.klappe > summary { cursor: pointer; list-style: none;
                           display: grid; grid-template-columns: 20px 1fr;
                           row-gap: 2px; align-items: baseline; }
details.klappe > summary::-webkit-details-marker { display: none; }
details.klappe > summary::before { content: "+"; grid-column: 1; grid-row: 1;
                                   color: var(--ink-muted); font-weight: 600; }
details.klappe[open] > summary::before { content: "\2212"; }
details.klappe > summary strong { grid-column: 2; grid-row: 1;
                                  font-size: 14.5px; font-weight: 640;
                                  letter-spacing: -.012em; }
details.klappe > summary .klein { grid-column: 2; grid-row: 2; }
details.klappe > summary:hover strong { color: var(--neon-tief); }



/* ── Unterlagen im Arsenal: eine Akte je Zeile ──────────────────────────
   Zugeklappt sieht sie aus wie ein Listeneintrag, aufgeklappt ist sie ein
   Formular. Das ist Absicht: die Übersicht soll eine Übersicht bleiben,
   und Bearbeiten darf trotzdem einen Klick entfernt sein. */
.akte > summary { list-style: none; cursor: pointer; display: flex;
                  flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
                  border-radius: var(--r-s); }
.akte > summary::-webkit-details-marker { display: none; }
.akte > summary::before { content: "+"; flex: none; width: 13px;
                          font-weight: 700; color: var(--ink-muted);
                          font-size: 12px; }
.akte[open] > summary::before { content: "−"; }
.akte > summary:hover .titel-link,
.akte > summary:hover strong { color: var(--neon-tief); }
.akte .aktenkopf { display: inline-flex; flex-wrap: wrap; gap: 6px;
                   align-items: baseline; }
.akte .aktentext { margin-top: var(--s3); padding-left: 13px;
                   font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
                   white-space: pre-wrap; max-height: 320px; overflow-y: auto; }
.akte .aktenform { margin-top: var(--s4); padding-left: 13px;
                   border-top: 1px solid var(--rand-2); padding-top: var(--s4); }
/* Die Eingabefelder erben aus dem allgemeinen Formularblock weiter oben —
   hier nur, was ein mehrzeiliges Feld zusätzlich braucht. */
.akte textarea { line-height: 1.5; resize: vertical; }
.liste.akten > li { align-items: flex-start; }

/* PDFs erst beim Aufklappen laden; volle Breite innerhalb der Lernkarte. */
.material-vorschau { margin-top: var(--s3); }
.material-vorschau > summary { cursor: pointer; font-weight: 600; padding: var(--s2) 0; }
.pdf-lesefenster { display: block; width: 100%; height: min(70vh, 760px); min-height: 340px;
  border: 1px solid var(--linie, #7774); border-radius: 8px; margin-top: var(--s3); background: #fff; }