/* shell.css: Layout und Komponenten der Basis-Templates (shell/DESIGN.md).
   Benutzt nur Variablen aus tokens.css. Keine Farbwerte, keine Pixelwerte
   außer 0 und 1px; Breakpoints in em (48em = 768 px, 64em = 1024 px). */

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--schrift-ui);
  line-height: var(--zeile-normal);
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color: var(--fg);
}

body {
  margin: 0;
  min-height: 100dvh;
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: var(--zeile-eng); font-weight: var(--gewicht-halbfett); text-wrap: balance; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--raum-4); max-inline-size: var(--mass); }
p:last-child { margin-bottom: 0; }
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--link-hover); }
code { font-family: var(--schrift-mono); font-size: var(--text-sm); background: var(--bg-leise); padding: 0 var(--raum-1); border-radius: var(--radius-s); }
svg { display: block; }
img { max-width: 100%; height: auto; }

:focus-visible {
  outline: var(--linie-stark) solid var(--fokus);
  outline-offset: var(--fokus-abstand);
}

.versteckt-visuell {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.symbol { width: var(--symbol); height: var(--symbol); flex: none; }
.symbol--gross { width: var(--symbol-gross); height: var(--symbol-gross); color: var(--fg-zart); }

/* ---------- Sprunglink ---------- */
.sprunglink {
  position: absolute; left: var(--raum-4); top: var(--raum-2);
  z-index: var(--ebene-hinweis);
  padding: var(--raum-2) var(--raum-4);
  background: var(--tinte); color: var(--fg-auf-tinte);
  border-radius: var(--radius-m);
  transform: translateY(-200%);
}
.sprunglink:focus-visible { transform: none; }

/* ---------- Seitenraster ---------- */
.shell {
  display: grid;
  grid-template-columns: var(--seitenleiste-b) minmax(0, 1fr);
  grid-template-rows: var(--kopfzeile-h) minmax(0, 1fr);
  min-height: 100dvh;
}
@media (max-width: 63.99em) {
  .shell { grid-template-columns: var(--seitenleiste-schmal) minmax(0, 1fr); }
}
@media (max-width: 47.99em) {
  .shell { grid-template-columns: minmax(0, 1fr); }
}
/* Die gespeicherte Wahl (data-seitenleiste aus localStorage) gilt nur ab
   64em; darunter entscheidet allein der Breakpoint (DESIGN.md, Entscheidungen
   beim Bauen; docs/fehler/kern.md, 006). Deshalb liegen alle Zustandsregeln
   in min-width-Queries. */
@media (min-width: 64em) {
  :root[data-seitenleiste="schmal"] .shell { grid-template-columns: var(--seitenleiste-schmal) minmax(0, 1fr); }
  :root[data-seitenleiste="offen"]  .shell { grid-template-columns: var(--seitenleiste-b) minmax(0, 1fr); }
}

/* ---------- Kopfzeile ---------- */
.kopfzeile {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--raum-3);
  height: var(--kopfzeile-h);
  padding: 0 var(--raum-4);
  background: var(--bg-flaeche);
  border-bottom: var(--linie) solid var(--rand);
  position: sticky; top: 0; z-index: var(--ebene-haftend);
}
.wortmarke {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  color: var(--fg); text-decoration: none;
  font-weight: var(--gewicht-fett); font-size: var(--text-lg); letter-spacing: -0.01em;
}
.wortmarke .symbol { color: var(--fg-leise); }
.kopfzeile-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--raum-2); }
.kopfzeile-name { color: var(--fg-leise); font-size: var(--text-sm); }
.menueknopf { display: none; }
@media (max-width: 47.99em) {
  .menueknopf { display: inline-flex; }
  .kopfzeile-name { display: none; }
}

/* ---------- Seitenleiste und Navigation ---------- */
.seitenleiste {
  display: flex; flex-direction: column;
  background: var(--bg-leise);
  border-right: var(--linie) solid var(--rand);
  padding: var(--raum-3) var(--raum-2);
  position: sticky; top: var(--kopfzeile-h);
  height: calc(100dvh - var(--kopfzeile-h));
  overflow: hidden auto;
}
/* Unter 48em gibt es keine Seitenleiste, die Schublade übernimmt (DESIGN.md 7).
   Die Regel steht nach der Komponente: gleiche Spezifität, die spätere Regel
   gewinnt (docs/fehler/kern.md, 005). */
@media (max-width: 47.99em) {
  .seitenleiste { display: none; }
}
.navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--raum-1); }
.navigation-trenner { margin-top: auto; padding-top: var(--raum-3); border-top: var(--linie) solid var(--rand); }
.navigation a {
  display: flex; align-items: center; gap: var(--raum-3);
  min-height: var(--zeile-h); padding: 0 var(--raum-3);
  border-radius: var(--radius-m);
  color: var(--fg-leise); text-decoration: none; font-weight: var(--gewicht-mittel);
  white-space: nowrap; overflow: hidden;
  box-shadow: inset 0 0 0 0 var(--akzent);
  transition: background var(--dauer-schnell), color var(--dauer-schnell);
}
.navigation a:hover { background: var(--bg-flaeche); color: var(--fg); }
.navigation a[aria-current="page"] {
  background: var(--bg-flaeche); color: var(--fg);
  box-shadow: inset var(--marke-breite) 0 0 0 var(--akzent), var(--schatten-s);
}
.navigation .symbol { color: var(--fg-zart); }
.navigation a[aria-current="page"] .symbol { color: var(--akzent); }
.navigation-text { overflow: hidden; text-overflow: ellipsis; }

/* Ziel (kern.8 Nachtrag 2, Makro ziel): ein Verweis auf Einstellungen oder
   Verwaltung mit Symbol und Wort im Stil des stillen Knopfs, ohne
   Unterstreichung; allein stehend nur das Symbol mit Namen für Hilfstechnik.
   Berührungsziel --bedien-klein (44 px unter 48em). */
.ziel {
  display: inline-flex; align-items: center; gap: var(--raum-1); vertical-align: middle;
  min-height: var(--bedien-klein); padding: 0 var(--raum-2); margin: calc(-1 * var(--raum-1)) 0;
  border-radius: var(--radius-m); color: var(--fg-leise); font-weight: var(--gewicht-mittel); text-decoration: none;
  transition: background var(--dauer-schnell), color var(--dauer-schnell);
}
.ziel:hover { background: var(--bg-leise); color: var(--fg); }
.ziel .symbol { width: var(--raum-4); height: var(--raum-4); flex: none; }
.ziel--symbol { min-width: var(--bedien-klein); justify-content: center; padding: 0; }

/* Symbolleiste: Text weg, Symbole bleiben, title und aria-label tragen den Namen. */
@media (max-width: 63.99em) {
  .seitenleiste .navigation-text, .seitenleiste .einklappen-text { display: none; }
  .seitenleiste .navigation a, .seitenleiste .einklappen { justify-content: center; padding: 0; }
}
@media (min-width: 64em) {
  :root[data-seitenleiste="schmal"] .seitenleiste .navigation-text,
  :root[data-seitenleiste="schmal"] .seitenleiste .einklappen-text { display: none; }
  :root[data-seitenleiste="schmal"] .seitenleiste .navigation a,
  :root[data-seitenleiste="schmal"] .seitenleiste .einklappen { justify-content: center; padding: 0; }
}

.einklappen {
  display: flex; align-items: center; gap: var(--raum-3);
  min-height: var(--zeile-h); padding: 0 var(--raum-3); margin-top: var(--raum-2);
  border: 0; border-radius: var(--radius-m); background: transparent;
  color: var(--fg-zart); font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.einklappen:hover { background: var(--bg-flaeche); color: var(--fg); }
.einklappen .symbol--offen { display: none; }
@media (min-width: 64em) {
  :root[data-seitenleiste="schmal"] .einklappen .symbol--offen { display: block; }
  :root[data-seitenleiste="schmal"] .einklappen .symbol--schmal { display: none; }
}
/* Zwischen 48em und 64em ist die Leiste immer Symbolleiste; der Knopf hätte
   dort nichts zu schalten. */
@media (max-width: 63.99em) {
  .einklappen { display: none; }
}

/* Schublade unter 48em: dieselbe Liste in einem dialog. */
.schublade {
  position: fixed; inset: 0 auto 0 0; margin: 0;
  width: min(var(--schublade-b), 85vw); max-width: none; height: 100dvh; max-height: none;
  padding: var(--raum-4) var(--raum-3);
  border: 0; border-right: var(--linie) solid var(--rand);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  background: var(--bg-erhoben); color: var(--fg);
  box-shadow: var(--schatten-l);
  z-index: var(--ebene-schublade);
}
.schublade::backdrop { background: var(--bg-schleier); }
.schublade[open] { display: flex; flex-direction: column; animation: hereinschieben var(--dauer-langsam) var(--kurve-ein); }
.schublade-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--raum-4); }
@keyframes hereinschieben { from { transform: translateX(-100%); } to { transform: none; } }

/* ---------- Inhalt ---------- */
.inhalt {
  padding: var(--raum-6);
  max-width: var(--inhalt-max);
  width: 100%;
  min-width: 0;
}
@media (max-width: 47.99em) { .inhalt { padding: var(--raum-4); } }

.seitenkopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--raum-4);
  margin-bottom: var(--raum-6);
}
.seitenkopf-titel { display: flex; flex-direction: column; gap: var(--raum-2); min-width: 0; }
.seitenkopf-marke { display: none; width: var(--raum-8); height: var(--marke-breite); border-radius: var(--radius-voll); background: var(--akzent); }
[data-plugin] .seitenkopf-marke { display: block; }
.seitenkopf-untertitel { color: var(--fg-leise); }
.seitenkopf-aktion { flex: none; }
@media (max-width: 47.99em) {
  .seitenkopf { flex-direction: column; }
}

.abschnitt { margin-bottom: var(--raum-10); }
.abschnitt > h2 { margin-bottom: var(--raum-4); }

/* Reiter für Unterseiten eines Plugins (höchstens sechs). overflow-y hidden,
   weil overflow-x auto sonst overflow-y zu auto macht und der Reiter mit
   margin-bottom -1px einen Pixel über den Rand ragt: Der zeigte sich als
   senkrechter Rollbalken im Reiterband (kern.8 Nachtrag 1, Beobachtung 1). */
.reiter { display: flex; gap: var(--raum-1); border-bottom: var(--linie) solid var(--rand); margin-bottom: var(--raum-6); overflow-x: auto; overflow-y: hidden; }
.reiter a {
  display: inline-flex; align-items: center; min-height: var(--bedien-h); padding: 0 var(--raum-3);
  color: var(--fg-leise); text-decoration: none; font-weight: var(--gewicht-mittel); white-space: nowrap;
  border-bottom: var(--linie-stark) solid transparent; margin-bottom: calc(var(--linie) * -1);
}
.reiter a:hover { color: var(--fg); }
.reiter a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--akzent); }

/* Farbpunkt: der Akzent eines Plugins in der Plugin-Liste (kern.4). Die
   Farbe kommt aus data-akzent, wie am Navigationseintrag. */
.farbpunkt { display: inline-block; width: var(--raum-3); height: var(--raum-3); border-radius: var(--radius-voll); background: var(--akzent); vertical-align: middle; }

/* Kästchen: eine Liste gleichnamiger Auswahlfelder (Rechte je Nutzer). */
.kaestchen-liste { display: flex; flex-direction: column; gap: var(--raum-2); margin: 0 0 var(--raum-4); padding: 0; border: 0; }
.kaestchen-liste legend { font-weight: var(--gewicht-mittel); margin-bottom: var(--raum-2); }
.kaestchen { display: flex; align-items: center; gap: var(--raum-3); min-height: var(--bedien-h); cursor: pointer; }
.kaestchen input { width: var(--raum-5); height: var(--raum-5); margin: 0; accent-color: var(--tinte); }
/* Mehrfachauswahl (shell.2): dieselben Kästchen in einem Rahmen, der ab etwa
   sechs Einträgen rollt. */
.kaestchen-rahmen { max-height: calc(var(--bedien-h) * 6); overflow-y: auto; padding: 0 var(--raum-3); border: var(--linie) solid var(--rand-stark); border-radius: var(--radius-m); background: var(--bg-vertieft); }
.kaestchen-liste .feld-hinweis { margin-bottom: var(--raum-1); }
.kaestchen-liste.feld--fehler .kaestchen-rahmen { border-color: var(--gefahr); }

/* ---------- Karte ---------- */
.karte {
  background: var(--bg-flaeche);
  border: var(--linie) solid var(--rand);
  border-radius: var(--radius-l);
  padding: var(--raum-6);
}
@media (max-width: 47.99em) { .karte { padding: var(--raum-4); } }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--raum-2);
  min-height: var(--bedien-h); padding: 0 var(--raum-4);
  border: var(--linie) solid var(--rand-stark); border-radius: var(--radius-m);
  background: var(--bg-flaeche); color: var(--fg);
  font: inherit; font-weight: var(--gewicht-mittel); line-height: 1; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dauer-schnell), border-color var(--dauer-schnell), color var(--dauer-schnell);
}
.knopf:hover { background: var(--bg-leise); color: var(--fg); }
.knopf--primaer { background: var(--tinte); color: var(--fg-auf-tinte); border-color: var(--tinte); }
.knopf--primaer:hover { background: var(--tinte-hover); border-color: var(--tinte-hover); color: var(--fg-auf-tinte); }
.knopf--primaer:active { background: var(--tinte-aktiv); border-color: var(--tinte-aktiv); }
.knopf--still { background: transparent; border-color: transparent; color: var(--fg-leise); }
.knopf--still:hover { background: var(--bg-leise); color: var(--fg); }
.knopf--gefahr { background: var(--gefahr); color: var(--fg-auf-gefahr); border-color: var(--gefahr); }
.knopf--gefahr:hover { background: var(--gefahr-hover); border-color: var(--gefahr-hover); color: var(--fg-auf-gefahr); }
.knopf--symbol { padding: 0; width: var(--bedien-h); }
/* Kleiner sekundärer Knopf für Zeilenaktionen in Tabellen (DESIGN.md,
   Entscheidungen beim Bauen: Aktionen sind Knöpfe, Navigation sind Links). */
.knopf--klein { min-height: var(--bedien-klein); padding: 0 var(--raum-3); font-size: var(--text-sm); }
.knopf--breit { width: 100%; }
.knopf:disabled, .knopf[aria-busy="true"] { cursor: default; opacity: 0.6; }
.knopf .lade { display: none; }
.knopf[aria-busy="true"] .lade { display: block; }
.knopf[aria-busy="true"] .knopf-text { opacity: 0.7; }

/* ---------- Ladeindikator ---------- */
.lade {
  width: var(--symbol); height: var(--symbol); flex: none;
  border: var(--linie-stark) solid var(--rand);
  border-top-color: currentColor; border-radius: var(--radius-voll);
  animation: drehen 0.8s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lade { animation: none; border-top-color: var(--rand); border-color: currentColor; opacity: 0.5; } }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; }

/* Ausgabe eines Unterprozesses (kern.9, Reiter Sicherung): Zeilen wie im Terminal. */
.ausgabe { font-family: var(--schrift-mono); font-size: var(--text-sm); background: var(--bg-leise); padding: var(--raum-3); border-radius: var(--radius-s); overflow-x: auto; white-space: pre-wrap; margin-bottom: var(--raum-4); }
.sicherung-ziel { display: flex; align-items: center; gap: var(--raum-2); flex-wrap: wrap; margin-bottom: var(--raum-4); }

/* ---------- Lernbausteine (kern.8 Nachtrag 1; 60-shell.md Bausteine, DESIGN.md 6) ---------- */

/* Stapel: der Abstand zwischen aufeinanderfolgenden Karten liegt am Behälter
   (seit kern.8 Nachtrag 2 --raum-5, mehr Luft). */
.stapel { display: flex; flex-direction: column; gap: var(--raum-5); margin: 0; padding: 0; list-style: none; }

/* Codeblock: rollt waagerecht, bricht nie um; der Kopierknopf sitzt rechts oben. */
.codeblock { position: relative; background: var(--bg-leise); border: var(--linie) solid var(--rand); border-radius: var(--radius-s); margin-bottom: var(--raum-4); }
.codeblock:last-child { margin-bottom: 0; }
.codeblock-titel { display: block; padding: var(--raum-2) var(--raum-24) 0 var(--raum-3); font-size: var(--text-sm); color: var(--fg-leise); }
.codeblock-text { margin: 0; padding: var(--raum-3); font-family: var(--schrift-mono); font-size: var(--text-sm); line-height: var(--zeile-normal); white-space: pre; overflow-x: auto; tab-size: 4; }
.codeblock-text code { background: none; padding: 0; font-size: inherit; }
.codeblock .kopieren { position: absolute; top: var(--raum-2); right: var(--raum-2); }
.codeblock:has(.kopieren:not([hidden])) .codeblock-text { padding-right: var(--raum-24); }
/* Codezelle: eine Zeile mit Höchstbreite in der Tabelle, Kopierknopf als Zeilenaktion. */
/* Codezelle: nimmt die Breite ihrer Spalte, rollt erst, wenn die Spalte zu
   schmal ist (min-width 0 am Text); der Kopierknopf bleibt Zeilenaktion. */
.codezelle { display: flex; align-items: center; gap: var(--raum-2); min-width: 0; }
.codezelle-text { display: block; flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: pre; padding: var(--raum-1) var(--raum-2); scrollbar-width: thin; }
.codezelle .kopieren { flex: none; }

/* Fortschritt: Spur in der Breite des Behälters, bei 0 als leere Spur
   erkennbar. Die Füllung ist seit kern.8 Nachtrag 2 --akzent (DESIGN.md 3,
   vierte Stelle des Akzents), voll --erfolg. */
.fortschritt { display: flex; flex-direction: column; gap: var(--raum-2); margin-bottom: var(--raum-4); }
.fortschritt:last-child { margin-bottom: 0; }
.fortschritt-text { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--fg-leise); }
.fortschritt-fertig { display: inline-flex; align-items: center; gap: var(--raum-1); color: var(--erfolg); font-weight: var(--gewicht-mittel); }
.fortschritt-fertig .symbol { width: var(--raum-4); height: var(--raum-4); }
.fortschritt-balken {
  display: block; width: 100%; height: var(--raum-2); margin: 0;
  appearance: none; -webkit-appearance: none; accent-color: var(--akzent); color: var(--akzent);
  border: var(--linie) solid var(--rand-stark); border-radius: var(--radius-voll);
  background: var(--bg-leise); overflow: hidden;
}
.fortschritt-balken::-webkit-progress-bar { background: var(--bg-leise); }
.fortschritt-balken::-webkit-progress-value { background: var(--akzent); border-radius: var(--radius-voll); }
.fortschritt-balken::-moz-progress-bar { background: var(--akzent); border-radius: var(--radius-voll); }
.fortschritt--voll .fortschritt-balken { accent-color: var(--erfolg); color: var(--erfolg); }
.fortschritt--voll .fortschritt-balken::-webkit-progress-value { background: var(--erfolg); }
.fortschritt--voll .fortschritt-balken::-moz-progress-bar { background: var(--erfolg); }

/* Rückmeldung am Ort: Wort, Symbol und Farbe an der Frage; falsch ist Warnung, nicht Gefahr. */
.rueckmeldung { display: flex; gap: var(--raum-3); align-items: flex-start; padding: var(--raum-3) var(--raum-4); margin: 0 0 var(--raum-4); border-radius: var(--radius-l); }
.rueckmeldung .symbol { margin-top: 0.15em; }
.rueckmeldung p { margin: 0; max-inline-size: none; }
.rueckmeldung a { color: inherit; }
.rueckmeldung--richtig { background: var(--erfolg-bg); color: var(--erfolg-fg); }
.rueckmeldung--richtig .symbol { color: var(--erfolg); }
.rueckmeldung--falsch { background: var(--warnung-bg); color: var(--warnung-fg); }
.rueckmeldung--falsch .symbol { color: var(--warnung); }
.formular .rueckmeldung { margin-bottom: var(--raum-5); }

/* Aufklappen: details und summary, Auslöser mindestens --bedien-h (44 px unter 48em). */
.aufklappen { border: var(--linie) solid var(--rand); border-radius: var(--radius-m); }
.aufklappen > summary { display: flex; align-items: center; gap: var(--raum-2); min-height: var(--bedien-h); padding: var(--raum-2) var(--raum-3); list-style: none; cursor: pointer; font-weight: var(--gewicht-mittel); border-radius: var(--radius-m); }
.aufklappen > summary::-webkit-details-marker { display: none; }
.aufklappen > summary:hover { background: var(--bg-leise); }
.aufklappen-symbol { color: var(--fg-zart); transition: transform var(--dauer-normal) var(--kurve-ein); }
.aufklappen[open] > summary .aufklappen-symbol { transform: rotate(90deg); }
.aufklappen-inhalt { padding: 0 var(--raum-3) var(--raum-3); }
.aufklappen-inhalt > :last-child { margin-bottom: 0; }

/* Karteikarte: ohne Skript Vorderseite und Rückseite im Aufklappen untereinander.
   Mit Skript (data-zustand aus shell.js) ist eine Seite sichtbar, der Knopf
   "Umdrehen" wechselt; data-gedreht kommt mit dem ersten Umdrehen, damit die
   Bewegung nicht beim Laden läuft. */
.karteikarte { display: flex; flex-direction: column; gap: var(--raum-3); }
.karteikarte-seite, .karteikarte[data-zustand] .karteikarte-hinten > .aufklappen-inhalt {
  display: grid; place-items: center; text-align: center; position: relative;
  min-height: calc(var(--raum-24) + var(--raum-16)); padding: var(--raum-6);
  background: var(--bg-flaeche); border: var(--linie) solid var(--rand); border-radius: var(--radius-l);
  font-size: var(--text-lg);
}
/* Eckbeschriftung (kern.8 Nachtrag 2): "Vorderseite" und "Rückseite" sichtbar
   in --text-xs und --fg-leise; ohne Skript als Zeile über dem Text, mit Skript
   in der Ecke der Karte. */
.karteikarte-ecke { display: block; font-size: var(--text-xs); color: var(--fg-leise); line-height: var(--zeile-normal); }
.karteikarte[data-zustand] .karteikarte-ecke { position: absolute; top: var(--raum-2); left: var(--raum-3); }
.karteikarte-seite p, .karteikarte-hinten p { margin: 0 0 var(--raum-3); max-inline-size: var(--mass); }
.karteikarte-seite p:last-child, .karteikarte-hinten p:last-child { margin-bottom: 0; }
.karteikarte[data-zustand] .karteikarte-hinten { border: 0; border-radius: 0; }
.karteikarte[data-zustand] .karteikarte-hinten > summary { display: none; }
.karteikarte[data-zustand="vorne"] .karteikarte-hinten, .karteikarte[data-zustand="hinten"] .karteikarte-vorne { display: none; }
.karteikarte[data-gedreht][data-zustand="vorne"] .karteikarte-vorne,
.karteikarte[data-gedreht][data-zustand="hinten"] .karteikarte-hinten > .aufklappen-inhalt { animation: umdrehen var(--dauer-normal) var(--kurve-ein); }
@keyframes umdrehen { from { transform: rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* Der Knopf steht im Markup vor dem Aufklappen (die Karte endet mit dem
   Aufklappen), liegt aber unter beiden Seiten (order; kern.8 Nachtrag 2). */
.karteikarte-knopf { align-self: center; order: 2; }
.karteikarte > [role="status"] { order: 3; }
/* Mit Skript eine Karte im Kartenmaß: höchstens --karteikarte-b breit, mittig,
   Vorder- und Rückseite auf derselben Fläche im Verhältnis
   --karteikarte-verhaeltnis; unter 48em volle Breite (Nacharbeit). */
.karteikarte[data-zustand] { width: 100%; max-width: var(--karteikarte-b); margin-inline: auto; }
.karteikarte[data-zustand] .karteikarte-seite, .karteikarte[data-zustand] .karteikarte-hinten > .aufklappen-inhalt {
  aspect-ratio: var(--karteikarte-verhaeltnis); min-height: 0;
  /* Anmutung einer echten Karteikarte (Nacharbeit 2, kern.8 Nachtrag 2):
     Papierton --karteikarte-bg statt Kartenweiß, Rand --rand-stark, Kopflinie
     im Akzent wie die Kachelkante, Schatten; die Rückseite dazu liniert. */
  background: var(--karteikarte-bg);
  border-color: var(--rand-stark);
  border-top: var(--marke-breite) solid var(--akzent);
  box-shadow: var(--schatten-m);
}
.karteikarte[data-zustand] .karteikarte-hinten > .aufklappen-inhalt {
  background-color: var(--karteikarte-bg);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--karteikarte-zeile) - var(--linie)), var(--rand) calc(var(--karteikarte-zeile) - var(--linie)), var(--rand) var(--karteikarte-zeile));
  background-origin: content-box; background-clip: padding-box;
}
@media (max-width: 47.99em) { .karteikarte[data-zustand] { max-width: none; } }
/* Vor shell.js (kern.8 Nachtrag 2, D11-01): mit data-skript auf html sieht
   die Karte schon aus wie vorne (Kartenmaß, Rückseite verborgen, Knopf
   sichtbar); shell.js setzt dann nur noch data-zustand. Ohne JavaScript gibt
   es die Marke nicht, beide Seiten bleiben da, der Knopf bleibt hidden. */
:root[data-skript] .karteikarte:not([data-zustand]) { width: 100%; max-width: var(--karteikarte-b); margin-inline: auto; }
:root[data-skript] .karteikarte:not([data-zustand]) .karteikarte-hinten { display: none; }
:root[data-skript] .karteikarte:not([data-zustand]) .karteikarte-seite {
  aspect-ratio: var(--karteikarte-verhaeltnis); min-height: 0;
  background: var(--karteikarte-bg); border-color: var(--rand-stark);
  border-top: var(--marke-breite) solid var(--akzent); box-shadow: var(--schatten-m);
}
:root[data-skript] .karteikarte:not([data-zustand]) .karteikarte-ecke { position: absolute; top: var(--raum-2); left: var(--raum-3); }
:root[data-skript] .karteikarte:not([data-zustand]) > .karteikarte-knopf[hidden] { display: inline-flex; }
@media (max-width: 47.99em) { :root[data-skript] .karteikarte:not([data-zustand]) { max-width: none; } }

/* Tastenkombination: je Taste ein kbd, das Pluszeichen als Text dazwischen. */
.tasten { white-space: nowrap; color: var(--fg-leise); }
kbd {
  font-family: var(--schrift-mono); font-size: var(--text-sm); line-height: var(--zeile-normal);
  color: var(--fg); background: var(--bg-leise);
  border: var(--linie) solid var(--rand-stark); border-bottom-width: var(--linie-stark); border-radius: var(--radius-s);
  padding: 0 var(--raum-1);
}

/* Schrittliste: ol ohne nativen Marker, jeder Eintrag eine Karte mit der Nummer im Kreis. */
.schrittliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--raum-5); counter-reset: schritt; }
.schrittliste > li {
  counter-increment: schritt; position: relative;
  background: var(--bg-flaeche); border: var(--linie) solid var(--rand); border-radius: var(--radius-l);
  padding: var(--raum-6); padding-left: calc(var(--raum-6) + var(--raum-8) + var(--raum-4));
}
.schrittliste > li::before {
  content: counter(schritt); position: absolute; left: var(--raum-6); top: var(--raum-6);
  width: var(--raum-8); height: var(--raum-8); display: grid; place-items: center;
  border-radius: var(--radius-voll); background: var(--bg-leise); border: var(--linie) solid var(--rand-stark);
  font-weight: var(--gewicht-halbfett); font-variant-numeric: tabular-nums; line-height: 1;
}
.schrittliste > li > :last-child { margin-bottom: 0; }
.schrittliste > li > h3:first-child, .schrittliste > li > h2:first-child { margin-bottom: var(--raum-3); }
@media (max-width: 47.99em) {
  .schrittliste > li { padding: var(--raum-4); padding-left: calc(var(--raum-4) + var(--raum-8) + var(--raum-3)); }
  .schrittliste > li::before { left: var(--raum-4); top: var(--raum-4); }
}
/* Schrittfolge (data-schrittfolge, shell.js): ein Schritt sichtbar, die Nummer
   kommt aus data-nummer, weil ein verborgener Eintrag keinen Zähler erhöht. */
.schrittliste[data-zustand] > li::before { content: attr(data-nummer); }
.schrittliste[data-zustand="einzeln"] > li:not([aria-current]) { display: none; }
/* Die Leiste hat eine feste Höhe aus --schrittfolge-leiste-h (kern.8 Nachtrag
   2): ab 64em eine Zeile, darunter ein Raster mit zwei Zeilen (Knöpfe und
   Stand, darunter Fortschritt und Schalter). Dieselbe Höhe hält der
   Platzhalter unten vor shell.js frei, der Abstand zur Liste ist der gap des
   Stapels (--raum-5), damit nichts springt. */
.schrittfolge-leiste {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "zurueck stand weiter" "fortschritt fortschritt alle";
  align-items: center; column-gap: var(--raum-3); row-gap: var(--raum-3);
  height: var(--schrittfolge-leiste-h); margin-bottom: var(--raum-5);
}
.schrittfolge-leiste > [data-aktion="schritt-zurueck"] { grid-area: zurueck; }
.schrittfolge-leiste > [data-aktion="schritt-weiter"] { grid-area: weiter; }
.schrittfolge-leiste > [data-aktion="schritt-alle"] { grid-area: alle; justify-self: end; }
.schrittfolge-stand { grid-area: stand; justify-self: center; color: var(--fg-leise); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.schrittfolge-leiste .fortschritt { grid-area: fortschritt; margin: 0; min-width: 0; }
@media (min-width: 64em) {
  .schrittfolge-leiste { display: flex; flex-wrap: nowrap; gap: var(--raum-3); }
  .schrittfolge-leiste .fortschritt { flex: 1 1 10rem; }
  .schrittfolge-leiste > [data-aktion="schritt-alle"] { margin-left: auto; }
}
.schrittfolge-leiste[data-zustand="alle"] { display: flex; justify-content: flex-end; }
.schrittfolge-leiste[data-zustand="alle"] > :not([data-aktion="schritt-alle"]) { display: none; }

/* Vor shell.js (kern.8 Nachtrag 2, D11-01): Nur mit data-skript auf html, das
   das Kopfskript von seite.html vor dem ersten Bild setzt, zeigt die Folge
   schon den ersten Schritt allein und hält den Platz der Leiste frei; ohne
   JavaScript gibt es die Marke nicht, und alle Schritte bleiben sichtbar. */
:root[data-skript] .schrittliste[data-schrittfolge]:not([data-zustand]) > li:not(:first-child) { display: none; }
:root[data-skript] .schrittliste[data-schrittfolge]:not([data-zustand])::before { content: ""; display: block; height: var(--schrittfolge-leiste-h); }

/* Konsoleneingabe (kern.8 Nachtrag 2): eine dunkle Konsolenfläche in beiden
   Schemata, Prompt als Text links, Eingabe in Mono auf derselben Fläche.
   color-scheme dark lässt Cursor und Auswahl zur Fläche passen. Der Fokusring
   der Shell liegt auf der Fläche (focus-within) und damit außen auf der Karte;
   die Eingabe selbst zeigt keinen zweiten Ring in der Fläche. */
.konsole { display: flex; align-items: center; border: var(--linie) solid var(--konsole-rand); border-radius: var(--radius-m); background: var(--konsole-bg); color: var(--konsole-fg); color-scheme: dark; }
.konsole:focus-within { border-color: var(--konsole-fokus); outline: var(--linie-stark) solid var(--fokus); outline-offset: var(--fokus-abstand); }
.feld--fehler .konsole { border-color: var(--konsole-fehler); }
.konsole-prompt { flex: none; padding: 0 var(--raum-2) 0 var(--raum-3); font-family: var(--schrift-mono); color: var(--konsole-prompt); white-space: pre; }
.konsole-eingabe { flex: 1; min-width: 0; border-color: transparent; background: transparent; color: var(--konsole-fg); caret-color: var(--konsole-fg); padding-left: 0; font-family: var(--schrift-mono); }
.konsole-eingabe:focus-visible { outline-color: transparent; }
.konsole-eingabe:focus-visible, .feld--fehler .konsole-eingabe { border-color: transparent; }
/* Ein Codeblock direkt unter der Konsole (Ausgabe) schließt an: dieselbe
   Fläche, keine Fuge, die Ecken zwischen beiden gerade. */
.feld:has(> .konsole:last-child):has(+ .codeblock) > .konsole { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.feld:has(> .konsole:last-child) + .codeblock {
  margin-top: calc(-1 * var(--raum-5)); border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
  background: var(--konsole-bg); border-color: var(--konsole-rand); color: var(--konsole-fg); color-scheme: dark;
}
.feld:has(> .konsole:last-child) + .codeblock .codeblock-titel { color: var(--konsole-prompt); }

/* Kartenraster: ab 48em mehrspaltig, darunter eine Spalte; der Link rückt an den Fuß. */
.kartenraster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
@media (min-width: 48em) { .kartenraster { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } }
.rasterkarte { display: flex; flex-direction: column; gap: var(--raum-3); }
.rasterkarte h3 { margin: 0; }
.rasterkarte p { color: var(--fg-leise); margin: 0; }
.rasterkarte .fortschritt { margin: 0; }
.rasterkarte > .knopf { margin-top: auto; align-self: flex-start; }

/* ---------- Formular ---------- */
.formular { max-width: var(--formular-max); }
.einstellungen-abschnitt + .einstellungen-abschnitt { margin-top: var(--raum-6); }
.einstellungen-abschnitt h2 { margin: 0 0 var(--raum-5); }
/* sicherheit.12: die Karte Anmeldung über den Abschnitten, die Seite Einrichten mit QR-Code. */
.karte-anmeldung { margin-bottom: var(--raum-6); }
.karte-anmeldung h2 { margin: 0 0 var(--raum-3); }
.karte-anmeldung p { margin: 0; color: var(--fg-leise); }
.karte-anmeldung .aktionen { margin-top: var(--raum-4); }
.qr-code { display: block; width: min(100%, var(--raum-24) * 3); height: auto; aspect-ratio: 1; margin: var(--raum-4) auto; padding: var(--raum-3); background: var(--qr-bg); color: var(--qr-fg); border-radius: var(--radius-m); }
.qr-code path { stroke: var(--qr-fg); }
.geheimnis-text { font-family: var(--schrift-mono); font-size: var(--text-base); letter-spacing: 0.05em; overflow-wrap: anywhere; text-align: center; margin: 0 0 var(--raum-5); }
.codes-hinweis { color: var(--fg-leise); margin: var(--raum-4) 0; }
.feld { display: flex; flex-direction: column; gap: var(--raum-2); margin-bottom: var(--raum-5); }
.feld > label { font-weight: var(--gewicht-mittel); }
.feld-hinweis { color: var(--fg-leise); font-size: var(--text-sm); }
.feld-fehler { display: flex; align-items: center; gap: var(--raum-1); color: var(--gefahr); font-size: var(--text-sm); font-weight: var(--gewicht-mittel); }
.feld-fehler .symbol { width: var(--raum-4); height: var(--raum-4); }
.eingabe {
  width: 100%; min-height: var(--bedien-h); padding: 0 var(--raum-3);
  border: var(--linie) solid var(--rand-stark); border-radius: var(--radius-m);
  background: var(--bg-vertieft); color: var(--fg);
  font: inherit;
}
.eingabe::placeholder { color: var(--fg-zart); }
.eingabe:focus-visible { border-color: var(--fokus); }
.feld--fehler .eingabe { border-color: var(--gefahr); }
textarea.eingabe { min-height: calc(var(--bedien-h) * 3); padding: var(--raum-2) var(--raum-3); resize: vertical; }
select.eingabe { padding-right: var(--raum-8); }
input[type="file"].eingabe { padding: var(--raum-2) var(--raum-3); }
.eingabe:disabled { color: var(--fg-inaktiv); background: var(--bg-leise); }

.passwortfeld { position: relative; }
.passwortfeld .eingabe { padding-right: calc(var(--bedien-h) + var(--raum-1)); }
.passwortfeld .knopf--symbol { position: absolute; right: 0; top: 0; border-color: transparent; background: transparent; color: var(--fg-leise); }
.passwortfeld .knopf--symbol:hover { color: var(--fg); background: transparent; }
.passwortfeld .symbol--zu { display: none; }
.passwortfeld[data-sichtbar] .symbol--zu { display: block; }
.passwortfeld[data-sichtbar] .symbol--offen { display: none; }

.aktionen { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; margin-top: var(--raum-6); }
.aktionen .knopf--still { margin-left: auto; }
.aktionen--links .knopf--still { margin-left: 0; }

.kontrollfeld { display: flex; align-items: center; gap: var(--raum-2); min-height: var(--touch-min); }
.kontrollfeld input { width: var(--raum-5); height: var(--raum-5); accent-color: var(--tinte); margin: 0; }

/* ---------- Meldung ---------- */
.meldung {
  display: flex; gap: var(--raum-3); align-items: flex-start;
  padding: var(--raum-3) var(--raum-4); margin-bottom: var(--raum-6);
  border: var(--linie) solid transparent; border-radius: var(--radius-l);
  background: var(--info-bg); color: var(--info-fg);
}
.meldung .symbol { margin-top: 0.15em; color: var(--info); }
.meldung p { max-inline-size: none; }
.meldung--erfolg { background: var(--erfolg-bg); color: var(--erfolg-fg); }
.meldung--erfolg .symbol { color: var(--erfolg); }
.meldung--warnung { background: var(--warnung-bg); color: var(--warnung-fg); }
.meldung--warnung .symbol { color: var(--warnung); }
.meldung--gefahr { background: var(--gefahr-bg); color: var(--gefahr-fg); }
.meldung--gefahr .symbol { color: var(--gefahr); }
.meldung a { color: inherit; }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--raum-1);
  padding: 0 var(--raum-2); min-height: var(--raum-6);
  border-radius: var(--radius-voll);
  background: var(--bg-leise); color: var(--fg-leise);
  font-size: var(--text-sm); font-weight: var(--gewicht-mittel); white-space: nowrap;
}
.badge .symbol { width: var(--raum-4); height: var(--raum-4); }
.badge--erfolg { background: var(--erfolg-bg); color: var(--erfolg-fg); }
.badge--warnung { background: var(--warnung-bg); color: var(--warnung-fg); }
.badge--gefahr { background: var(--gefahr-bg); color: var(--gefahr-fg); }
.badge--info { background: var(--info-bg); color: var(--info-fg); }

/* ---------- Tabelle ---------- */
.werkzeuge { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; margin-bottom: var(--raum-4); }
.werkzeuge .eingabe { max-width: var(--karte-max); }
.werkzeuge select.eingabe { width: auto; }
.werkzeuge-anzahl { color: var(--fg-leise); font-size: var(--text-sm); margin-left: auto; }
/* position relative (shell.3, AUDIT Nachtrag shell.3 D2-01): die Hülle ist der Bezugsrahmen
   für visuell versteckten Text in den Zellen; sonst entkommt er dem Rollen und verbreitert die Seite. */
.tabelle-huelle { position: relative; overflow-x: auto; border: var(--linie) solid var(--rand); border-radius: var(--radius-l); background: var(--bg-flaeche); }
/* shell.3: eine Zelle, deren Text ohne Leerzeichen umbrechen darf (der Titel einer Aufgabe), damit
   ein langes Wort ab 48em nicht die übrigen Spalten aus der Hülle schiebt. */
.tabelle td.umbruch { overflow-wrap: anywhere; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: left; padding: var(--raum-2) var(--raum-4); height: var(--zeile-h); border-bottom: var(--linie) solid var(--rand); line-height: var(--zeile-knapp); vertical-align: middle; }
.tabelle th { font-size: var(--text-sm); font-weight: var(--gewicht-mittel); color: var(--fg-leise); background: var(--bg-leise); }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover td { background: var(--bg-leise); }
.tabelle tr[aria-selected="true"] td { background: var(--auswahl-bg); color: var(--auswahl-fg); }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle .leise { color: var(--fg-leise); font-size: var(--text-sm); }
/* sicherheit.12 (AUDIT-2026-09.md, Nachtrag sicherheit.12, D7-02): Zeilenaktionen
   brechen in der Zelle um, statt die Tabelle über die Hülle hinauszuschieben. */
.tabelle .aktion { text-align: right; padding-top: var(--raum-1); padding-bottom: var(--raum-1); }
.tabelle .aktion .knopf { margin: var(--raum-1) 0 var(--raum-1) var(--raum-2); white-space: nowrap; }
.seitenumbruch { display: flex; align-items: center; gap: var(--raum-3); margin-top: var(--raum-4); color: var(--fg-leise); font-size: var(--text-sm); }
.seitenumbruch .knopf { margin-left: auto; }
.seitenumbruch .knopf + .knopf { margin-left: 0; }

@media (max-width: 47.99em) {
  .tabelle--karten thead { display: none; }
  .tabelle--karten, .tabelle--karten tbody, .tabelle--karten tr, .tabelle--karten td { display: block; }
  .tabelle--karten tr { padding: var(--raum-3) var(--raum-4); border-bottom: var(--linie) solid var(--rand); }
  .tabelle--karten tr:last-child { border-bottom: 0; }
  .tabelle--karten td { height: auto; padding: var(--raum-1) 0; border: 0; display: flex; justify-content: space-between; gap: var(--raum-4); }
  .tabelle--karten td::before { content: attr(data-spalte); color: var(--fg-leise); font-size: var(--text-sm); flex: none; }
  .tabelle--karten td.zahl, .tabelle--karten td.aktion { text-align: right; }
  .tabelle--karten td:empty { display: none; }
  /* Textlinks als Berührungsziele (AUDIT-2026-09.md, D8-06); Zeilenaktionen
     sind Knöpfe und wachsen über --bedien-klein. */
  /* sicherheit.12 (AUDIT-2026-09.md, Nachtrag sicherheit.12, D12-01): vier
     Zeilenaktionen brechen um, statt die Karte nach links zu verlassen. */
  .tabelle--karten td.aktion { justify-content: flex-end; flex-wrap: wrap; row-gap: var(--raum-2); }
  .kachel a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
  /* shell.2: der Titel einer Zeile als Link zur Detailseite und die Links
     des Makros anmerkungen sind auf dem Handy Berührungsziele; ein langes
     Wort bricht in der Karte um, statt die Seite zu verbreitern. */
  .tabelle--karten td { overflow-wrap: anywhere; }
  .tabelle--karten td a:not(.knopf), .anmerkungen a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
  .tabelle--karten td a:not(.knopf) { text-align: right; }
}

/* ---------- Detail ---------- */
.detail-kopf { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; margin-bottom: var(--raum-6); }
/* Ein Titel aus einem langen Wort bricht um (Notiz mit bis zu 200 Zeichen). */
.detail-kopf h2, .dialog-inhalt h2, .formular h2 { min-width: 0; overflow-wrap: anywhere; }
.felder { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--raum-2) var(--raum-6); margin: 0; }
.felder dt { color: var(--fg-leise); }
.felder dd { margin: 0; overflow-wrap: anywhere; }
.liste-schlicht { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--raum-2); }
.liste-schlicht li { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; }

/* Fließtext eines Objekts in der Detailansicht (shell.2): das gerenderte
   Markdown einer Notiz. Überschriften beginnen bei h2 und bleiben kleiner
   als der Titel der Karte. */
.prosa { max-inline-size: var(--mass); line-height: var(--zeile-weit); margin-bottom: var(--raum-6); overflow-wrap: anywhere; }
/* shell.3: Text ohne Markdown mit erhaltenen Zeilenumbrüchen, die Beschreibung einer Aufgabe im Block text von detail.html. */
.text-umbrueche { max-inline-size: var(--mass); line-height: var(--zeile-weit); margin: 0 0 var(--raum-6); white-space: pre-line; overflow-wrap: anywhere; }
/* shell.3: die Zeilenaktion als Formular in der Zelle und die Statusformulare in der Aktionsleiste tragen keinen eigenen Abstand. */
.tabelle td > form, .aktionen > form { display: contents; }
.prosa > :first-child { margin-top: 0; }
.prosa > :last-child { margin-bottom: 0; }
.prosa h2, .prosa h3, .prosa h4, .prosa h5, .prosa h6 { margin: var(--raum-6) 0 var(--raum-2); line-height: var(--zeile-eng); font-weight: var(--gewicht-halbfett); font-size: var(--text-base); }
.prosa h2 { font-size: var(--text-lg); }
.prosa ul, .prosa ol { margin: 0 0 var(--raum-4); padding-left: var(--raum-6); }
.prosa li > p { margin-bottom: var(--raum-2); }
.prosa blockquote { margin: 0 0 var(--raum-4); padding-left: var(--raum-4); border-left: var(--marke-breite) solid var(--rand-stark); color: var(--fg-leise); }
.prosa pre { font-family: var(--schrift-mono); font-size: var(--text-sm); line-height: var(--zeile-normal); background: var(--bg-leise); padding: var(--raum-3); border-radius: var(--radius-s); overflow-x: auto; margin: 0 0 var(--raum-4); }
.prosa pre code { background: none; padding: 0; }
.prosa hr { border: 0; border-top: var(--linie) solid var(--rand); margin: var(--raum-6) 0; }
@media (max-width: 47.99em) {
  .felder { grid-template-columns: 1fr; gap: 0; }
  .felder dt { font-size: var(--text-sm); margin-top: var(--raum-3); }
}

/* ---------- Dialog (Bestätigung) ---------- */
.dialog {
  width: min(var(--karte-max), calc(100vw - var(--raum-8)));
  padding: var(--raum-6); border: var(--linie) solid var(--rand);
  border-radius: var(--radius-xl);
  background: var(--bg-erhoben); color: var(--fg);
  box-shadow: var(--schatten-l);
}
.dialog::backdrop { background: var(--bg-schleier); }
.dialog[open] { animation: einblenden var(--dauer-langsam) var(--kurve-ein); }
.dialog h2 { margin-bottom: var(--raum-3); }
.dialog .aktionen { margin-top: var(--raum-6); }
@keyframes einblenden { from { opacity: 0; transform: translateY(var(--raum-2)); } to { opacity: 1; transform: none; } }

/* ---------- Leerzustand und Fehlerbild ---------- */
.leer, .fehlerbild {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--raum-3); padding: var(--raum-16) var(--raum-6);
}
.leer { border: var(--linie) dashed var(--rand-stark); border-radius: var(--radius-l); }
.leer p, .fehlerbild p { color: var(--fg-leise); max-inline-size: 45ch; }
.leer .knopf, .fehlerbild .knopf { margin-top: var(--raum-2); }
.fehlerbild .symbol--gross { color: var(--warnung); }

/* ---------- Kacheln (Übersicht) ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--raum-4); }
.kachel {
  display: flex; flex-direction: column; gap: var(--raum-2);
  padding: var(--raum-5);
  background: var(--bg-flaeche); border: var(--linie) solid var(--rand);
  border-left: var(--marke-breite) solid var(--akzent);
  border-radius: var(--radius-l);
  min-height: calc(var(--raum-24) + var(--raum-4));
}
.kachel h2, .kachel h3 { font-size: var(--text-sm); font-weight: var(--gewicht-mittel); color: var(--fg-leise); }
.kachel-wert { font-size: var(--text-2xl); font-weight: var(--gewicht-halbfett); font-variant-numeric: tabular-nums; line-height: var(--zeile-eng); }
.kachel-text { color: var(--fg-leise); }
.kachel a { margin-top: auto; font-size: var(--text-sm); }
.kachel--gross { grid-column: 1 / -1; }
.kachel--gross h2 { font-size: var(--text-xl); color: var(--fg); }
.kachel--gross .kachel-text { color: var(--fg); max-inline-size: var(--mass); }

/* ---------- Anmeldung ---------- */
.anmeldung {
  min-height: 100dvh; display: grid; place-items: center;
  padding: var(--raum-6);
}
.anmeldung-karte { width: min(var(--karte-max), 100%); }
.anmeldung .wortmarke { justify-content: center; margin-bottom: var(--raum-6); font-size: var(--text-xl); }
.anmeldung h1 { font-size: var(--text-xl); margin-bottom: var(--raum-6); }