/* =========================================================================
   Projektraum — Komponenten.

   Vier Regeln tragen das Ganze (DESIGN.md):
   · Zwei Schriften mit getrennten Aufgaben: Bricolage für Überschriften und
     Zahlen, Instrument Sans für alles Übrige.
   · Flächen mit sichtbaren Stufen. Papier auf Grund, Grund unter Papier.
   · Der Akzent trägt vier Dinge — Primärhandlung, aktiver Navigationspunkt,
     Verweis, Fokusring. Sonst nichts.
   · Keine gesperrten Versalien.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  letter-spacing: var(--sp-body);
  -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   Der dunkle Bereich

   Navigation und Werkbank sind dunkel, der Rest hell. Statt jede Komponente
   zweimal zu schreiben, definiert diese Klasse die Flächentokens um — alles
   darin funktioniert dann unverändert weiter. Das ist der Grund, warum die
   Komponenten unten nirgends eine feste Farbe nennen.
   ========================================================================= */
.dunkel {
  color-scheme: dark;
  --flaeche:var(--tinte-800);
  --grund:var(--tinte-900);
  --grund-2:var(--tinte-800);
  --grund-3:var(--tinte-700);
  --linie:var(--tinte-linie);
  --linie-stark:#32596D;
  --text:var(--auf-tinte);
  --text-2:var(--auf-tinte-2);
  /* Wie im hellen Bereich um eine Stufe angehoben: #6E8894 lag auf --flaeche
     bei 3,9:1, #8098A6 bei 4,9:1. Der alte Wert trägt jetzt die Platzhalter. */
  --text-3:#8098A6;
  --text-platzhalter:#6E8894;
  --text-invers:#0C1D26;
  --akzent:var(--akzent-hell);
  --akzent-tief:#A5B4FC;
  --akzent-weich:rgba(129,140,248,.14);
  --akzent-linie:rgba(129,140,248,.34);
  --fokus:rgba(129,140,248,.6);
  --gut-flaeche:rgba(21,108,69,.2);      --gut:#5DD3A0;      --gut-linie:rgba(93,211,160,.3);
  --achtung-flaeche:rgba(138,90,0,.22);  --achtung:#E5B45F;  --achtung-linie:rgba(229,180,95,.3);
  --kritisch-flaeche:rgba(179,38,30,.2); --kritisch:#F08878; --kritisch-linie:rgba(240,136,120,.3);
  --ruhig-flaeche:var(--tinte-700);      --ruhig:var(--auf-tinte-2); --ruhig-linie:var(--tinte-linie);
  --schatten-karte:none;
  background: var(--grund);
  color: var(--text);
}

/* =========================================================================
   Schrift
   ========================================================================= */

h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--font-display); }
h1 {
  font-weight: var(--gw-display); font-size: var(--fs-3xl);
  line-height: var(--lh-head); letter-spacing: var(--sp-display);
  font-variation-settings: "opsz" 32, "wdth" 96;
}
h2 {
  font-size: var(--fs-xl); font-weight: var(--gw-head); letter-spacing: var(--sp-head);
  font-variation-settings: "opsz" 18, "wdth" 98;
}
h3 { font-size: var(--fs-base); font-weight: var(--gw-mittel); letter-spacing: -.012em; }
h4 { font-size: var(--fs-sm); font-weight: var(--gw-mittel); }
p  { margin: 0; }

/* Verweise tragen den Akzent. In der einfarbigen Vorfassung taten sie es nicht —
   dann sucht das Auge auf jeder Seite neu, was anklickbar ist. */
a { color: var(--akzent); text-decoration-color: color-mix(in srgb, var(--akzent) 32%, transparent);
    text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--akzent-tief); text-decoration-color: currentColor; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--r-input);
}

::selection { background: var(--akzent-weich); color: var(--text); }

.label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.zahl-gross {
  font-family: var(--font-display); font-variation-settings: "opsz" 32;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}

/* Der Projekt-Code wird abgetippt und am Telefon durchgesagt. Hier hilft
   Sperrung wirklich — eine der zwei begründeten Ausnahmen (DESIGN.md §5). */
.code-chip {
  font-size: var(--fs-sm); font-weight: var(--gw-mittel); letter-spacing: var(--sp-code);
  font-variant-numeric: tabular-nums; color: var(--text);
}

/* ---------- Icons ----------
   Material Symbols, auf die tatsächlich benutzten Zeichen verkleinert
   (scripts/fetch_fonts.py). Ein neues Icon braucht dort einen Eintrag.
   Immer aria-hidden: Das Wort daneben trägt die Bedeutung. */
.sym {
  font-family: var(--font-icon); font-weight: 400; font-style: normal;
  font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 350, "GRAD" 0, "opsz" 24;
  user-select: none; flex: none;
}
.sym--klein { font-size: 17px; }
.sym--gefuellt { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* =========================================================================
   Schaltflächen
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--gw-mittel);
  letter-spacing: -.008em; padding: 0 var(--s4);
  /* 34px Untergrenze (DESIGN.md §10); auf Mobilgeräten wächst sie auf 44px. */
  min-height: 34px;
  border: 1px solid transparent; border-radius: var(--r-base);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve);
}
.btn .sym { font-size: 18px; margin-left: -2px; }
/* Nicht `#fff`, sondern `--text-invers`: Auf dunklem Grund wird der Akzent
   aufgehellt (app.css `.dunkel`, tokens.css). Weiße Schrift darauf ergab 2,9:1 —
   unter jedem Maßstab unlesbar. Dort trägt die Fläche die Helligkeit und die
   Schrift die Tinte; im hellen Bereich ist `--text-invers` weiterhin Weiß. */
.btn--primary { background: var(--akzent); color: var(--text-invers); }
.btn--primary:hover { background: var(--akzent-tief); color: var(--text-invers); }
.btn--secondary { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); }
.btn--secondary:hover { border-color: var(--text-3); background: var(--grund-2); color: var(--text); }
.btn--quiet { background: transparent; color: var(--text-2); padding-inline: var(--s3); }
.btn--quiet:hover { color: var(--text); background: var(--grund-2); }
.btn--gefahr { background: transparent; color: var(--kritisch); border-color: var(--kritisch-linie); }
.btn--gefahr:hover { background: var(--kritisch-flaeche); color: var(--kritisch); }
.btn--klein { min-height: 28px; font-size: var(--fs-xs); padding-inline: var(--s3); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* =========================================================================
   Eingabefelder
   ========================================================================= */

.field { display: flex; flex-direction: column; gap: var(--s2); }
.field > label { font-size: var(--fs-sm); font-weight: var(--gw-mittel); color: var(--text); }
.field > span { color: var(--text-3); font-size: var(--fs-xs); }

.input, textarea.input, select.input {
  /* width/min-width sind nicht schmückend: Ein <input> hat aus dem
     size-Attribut eine Eigenbreite (20 Zeichen) und schrumpft als Flex-Element
     nicht darunter. Auf 320 px lief die Anmeldeseite dadurch 37 px über. */
  width: 100%; min-width: 0;
  font-family: var(--font-ui); font-size: var(--fs-base); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--r-input); padding: var(--s2) var(--s3); min-height: 34px;
  transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}
.input::placeholder { color: var(--text-platzhalter); }
.input:hover { border-color: var(--text-3); }
.input:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-weich);
}
select.input { appearance: none; padding-right: var(--s6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field__error, .errorlist { font-size: var(--fs-sm); color: var(--kritisch); }
.errorlist { list-style: none; margin: 0; padding: 0; }
.errorlist li + li { margin-top: var(--s1); }

input[type="checkbox"] { accent-color: var(--akzent); width: 16px; height: 16px; }

/* ---------- Datei-Unterlage: Schau im Browser ---------- */
.datei__schau {
  display: block; width: 100%; height: 70vh; min-height: 420px;
  border: 0; background: var(--grund-2);
}
@media (max-width: 700px) { .datei__schau { height: 52vh; min-height: 300px; } }

/* ---------- Formulargitter ----------
   Zwei Spalten für kurze Felder, volle Breite für Titel und Fließtext. Eine
   Spalte untereinander ließ ein Formular mit sieben Feldern endlos wirken. */
.formgitter {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4); max-width: 640px;
}
.formgitter__breit { grid-column: 1 / -1; }
@media (max-width: 620px) { .formgitter { grid-template-columns: 1fr; } }

/* =========================================================================
   Ladefeld beim Hochladen

   Ein echter <dialog> mit showModal(): Der Hintergrund ist nicht bedienbar und
   der Tastaturfokus bleibt drin. Wer bei 80 % wegklickt, fängt sonst von vorn an
   — bei 2 GB eine halbe Stunde.
   ========================================================================= */

.ladefeld {
  border: 0; padding: 0; background: none; max-width: none; max-height: none;
  color: var(--text);
}
.ladefeld::backdrop { background: rgba(12,29,38,.72); backdrop-filter: blur(4px); }

.ladefeld__inhalt {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-pop); box-shadow: var(--schatten-pop);
  padding: var(--s8) var(--s7) var(--s7);
  width: min(92vw, 460px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s3);
}

/* ---------- Der Ring ---------- */
.ladefeld__ring { position: relative; width: 168px; height: 168px; margin-bottom: var(--s3); }
.ladefeld__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ladefeld__spur { fill: none; stroke: var(--grund-3); stroke-width: 8; }
.ladefeld__bogen {
  fill: none; stroke: var(--akzent); stroke-width: 8; stroke-linecap: round;
  /* 2πr bei r = 52 */
  stroke-dasharray: 326.726; stroke-dashoffset: 326.726;
  transition: stroke-dashoffset 180ms linear;
}
/* Zwei Ebenen, und beide werden gebraucht: Das äußere Grid setzt die Zeile in
   die Mitte des Rings, das innere Flex stellt Zahl und Prozentzeichen auf eine
   gemeinsame Grundlinie. Mit nur einer Ebene stand das Zeichen entweder unter
   der Zahl (Grid) oder die Zeile am oberen Rand (Flex mit baseline). */
.ladefeld__prozent { position: absolute; inset: 0; display: grid; place-items: center; }
.ladefeld__prozent > span {
  display: flex; align-items: baseline; gap: 3px;
  font-family: var(--font-display); font-size: 48px; font-weight: var(--gw-display);
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1;
}
.ladefeld__prozent i { font-style: normal; font-size: 21px; opacity: .55; }
.ladefeld__zeichen {
  position: absolute; inset: 0; display: none; place-items: center;
  font-size: 62px; color: var(--akzent);
  font-variation-settings: "FILL" 0, "wght" 300, "opsz" 48;
}

/* ---------- Zustände ----------
   Welches Zeichen im Ring steht, setzt das Skript als Textinhalt. Über
   CSS `content` ginge es auch — aber dann stünde der Name nirgends, wo
   apps/core/tests/test_symbole.py ihn findet, und ein fehlendes Zeichen
   erschiene als Klartext („hourglass_top") mitten im Ring. */
.ladefeld:not([data-zustand="laeuft"]) .ladefeld__prozent { display: none; }
.ladefeld:not([data-zustand="laeuft"]) .ladefeld__zeichen { display: grid; }

/* Der Bogen dreht sich, solange niemand sagen kann, wie weit es ist. */
.ladefeld[data-zustand="pruefung"] .ladefeld__bogen {
  stroke-dasharray: 82 245; transition: none;
  transform-origin: 60px 60px; animation: ladefeld-dreht 1.1s linear infinite;
}
@keyframes ladefeld-dreht { to { transform: rotate(360deg); } }

.ladefeld[data-zustand="fehler"] .ladefeld__zeichen { color: var(--kritisch); }
.ladefeld[data-zustand="fehler"] .ladefeld__bogen { stroke: var(--kritisch); stroke-dashoffset: 0; }

.ladefeld h2 { font-size: var(--fs-2xl); }
.ladefeld__datei {
  font-size: var(--fs-sm); color: var(--text-2); max-width: 100%;
  overflow-wrap: anywhere;
}
.ladefeld__zahlen { font-size: var(--fs-base); color: var(--text); font-variant-numeric: tabular-nums; }
.ladefeld__warnung {
  font-size: var(--fs-xs); color: var(--text-3); line-height: 1.55;
  border-top: 1px solid var(--linie); padding-top: var(--s3); margin-top: var(--s2);
}
.ladefeld__fuss { margin-top: var(--s2); }

@media (max-width: 560px) {
  .ladefeld__inhalt { padding: var(--s6) var(--s4) var(--s5); }
  .ladefeld__ring { width: 132px; height: 132px; }
  .ladefeld__prozent { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .ladefeld__bogen { transition: none; animation: none; }
  .ladefeld[data-zustand="pruefung"] .ladefeld__bogen { stroke-dasharray: 326.726; stroke-dashoffset: 82; }
}

/* =========================================================================
   Statusmarken

   Jetzt mit Fläche, Linie und Icon. Die einfarbige Fassung hatte nur einen
   Punkt und ein Wort — richtig gedacht, aber auf einer Oberfläche ohne jeden
   anderen Farbwechsel blieb davon zu wenig übrig.
   ========================================================================= */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: var(--gw-mittel);
  padding: 3px 9px 3px 7px; border-radius: var(--r-rund);
  border: 1px solid var(--ruhig-linie); background: var(--ruhig-flaeche); color: var(--ruhig);
  white-space: nowrap; line-height: 1.4;
}
.chip .sym { font-size: 15px; font-variation-settings: "FILL" 1, "wght" 400, "opsz" 20; }
.chip--ok   { color: var(--gut);      background: var(--gut-flaeche);      border-color: var(--gut-linie); }
.chip--wait { color: var(--achtung);  background: var(--achtung-flaeche);  border-color: var(--achtung-linie); }
.chip--bad  { color: var(--kritisch); background: var(--kritisch-flaeche); border-color: var(--kritisch-linie); }

/* =========================================================================
   Tabellen
   ========================================================================= */

.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tw > .table { min-width: 520px; }
.tw > .table--roomy { min-width: 420px; }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  font-size: var(--fs-xs); font-weight: var(--gw-mittel); color: var(--text-2);
  text-align: left; padding: var(--s2) var(--s4);
  background: var(--grund-2); border-bottom: 1px solid var(--linie); white-space: nowrap;
}
.table td {
  padding: var(--s2) var(--s4); height: var(--zeile);
  border-bottom: 1px solid var(--linie); vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
/* Beträge und Kennungen brechen nie um: „540,00 / €" und „ÄW- / 01" standen
   sonst auf zwei Zeilen, sobald die Tabelle schmal wurde. */
.table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.eng { white-space: nowrap; }
.table td.name { font-weight: var(--gw-mittel); color: var(--text); }
.table tbody tr { transition: background var(--tempo) var(--kurve); }
.table tbody tr:hover td { background: var(--grund); }
.table--roomy td { padding: var(--s3) var(--s4); height: 44px; font-size: var(--fs-base); }

/* =========================================================================
   Flächen
   ========================================================================= */

.panel, .block {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-base); box-shadow: var(--schatten-karte);
}
.block { overflow: hidden; }
/* Umbrechen statt abschneiden: Auf der Dateiseite stand „Herunterladen" auf dem
   Telefon halb außerhalb des Kastens, weil der lange Dateiname daneben keinen
   Platz ließ. */
.panel__head, .block__head {
  display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--linie);
}
.block__head h2 { font-size: var(--fs-lg); min-width: 0; overflow-wrap: anywhere; }
.block__head .sym { color: var(--text-3); }
.block__head .btn, .block__head .rechts { margin-left: auto; }
.panel__body, .block__body { padding: var(--s4); }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }

/* =========================================================================
   Anmeldestrecke

   Zweispaltig: links die Handlung, rechts eine ruhige dunkle Fläche mit dem
   Zeichen. Die einspaltige Fassung stand als einzelne Karte in einer leeren
   schwarzen Fläche — korrekt, aber ohne jede Anmutung.
   ========================================================================= */

.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.auth__col {
  width: 100%; max-width: 400px; margin: 0 auto;
  padding: var(--s8) var(--s5); align-self: center;
}
.auth__buehne { display: none; }

@media (min-width: 900px) {
  /* Knapp unter der Hälfte: Die Handlung bleibt die Hauptsache, die Fläche
     daneben erklärt sie nur. */
  .auth { grid-template-columns: 1fr 46%; }
  .auth__col { margin: 0 0 0 auto; padding-right: var(--s8); }

  .auth__buehne {
    display: grid; grid-template-rows: auto 1fr auto;
    padding: var(--s8) var(--s8) var(--s7);
  }
  /* Die Mitte fluchtet mit dem Formular links, statt frei im Raum zu stehen. */
  .auth__buehne-mitte { align-self: center; max-width: 30rem; }
  .auth__buehne h2 {
    font-size: 28px; font-weight: var(--gw-display); letter-spacing: var(--sp-display);
    color: var(--text); line-height: 1.18; text-wrap: balance; max-width: 19ch;
  }
  .auth__buehne-fuss { font-size: var(--fs-xs); color: var(--text-3); }

  .auth__schritte {
    list-style: none; margin: var(--s7) 0 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--s5);
  }
  .auth__schritte li {
    display: grid; grid-template-columns: 22px 1fr; gap: var(--s3);
    font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); max-width: 42ch;
  }
  .auth__schritte .sym { font-size: 20px; color: var(--akzent); }
  .auth__schritte b { color: var(--text); font-weight: var(--gw-mittel); }
}

.auth__mark { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s8); }
.auth__mark-name {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600;
  letter-spacing: var(--sp-head); color: var(--text);
}
.auth__mark-rule { flex: 1; height: 1px; background: var(--linie); }

.auth h1 { font-size: var(--fs-3xl); margin-bottom: var(--s4); }
.auth__hint { font-size: var(--fs-base); line-height: 1.6; color: var(--text-2); margin-bottom: var(--s6); }
.auth form { display: flex; flex-direction: column; gap: var(--s4); }
.auth__actions { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.auth__foot {
  margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--linie);
  font-size: var(--fs-xs); color: var(--text-3);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
}

/* Das Markenzeichen: ein Quadrat mit Initiale. Kein Logo, aber ein Anker. */
.zeichen {
  width: 30px; height: 30px; border-radius: 8px; background: var(--akzent); color: #fff;
  display: grid; place-items: center; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  font-variation-settings: "wdth" 90;
}
.zeichen--gross { width: 44px; height: 44px; border-radius: 11px; font-size: 21px; }

.input--code {
  font-size: 25px; font-weight: var(--gw-mittel);
  letter-spacing: .16em; text-transform: uppercase; text-align: center;
  font-variant-numeric: tabular-nums;
  padding: var(--s3); min-height: 62px; color: var(--text);
}
.input--code::placeholder { letter-spacing: .16em; color: var(--text-platzhalter); text-transform: none; }

.hinweis {
  border: 1px solid var(--linie); border-left: 3px solid var(--linie-stark);
  background: var(--grund-2); border-radius: var(--r-input);
  padding: var(--s3) var(--s4); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2);
}
.hinweis--warnung { border-color: var(--kritisch-linie); border-left-color: var(--kritisch);
                    background: var(--kritisch-flaeche); color: var(--kritisch); }
.auth .hinweis { margin-bottom: var(--s5); }
.hinweis--zeit {
  display: flex; gap: var(--s3); align-items: flex-start;
  border-color: var(--akzent-linie); border-left-color: var(--akzent);
  background: var(--akzent-weich); color: var(--text);
}
.hinweis--zeit .sym { color: var(--akzent); flex: none; }

/* =========================================================================
   Anwendungsrahmen: dunkle Seitenleiste, heller Inhalt
   ========================================================================= */

.rahmen { display: grid; grid-template-columns: var(--seitenleiste) 1fr; min-height: 100vh; }

.seitenleiste {
  display: flex; flex-direction: column; gap: var(--s6);
  padding: var(--s5) var(--s3); position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.seitenleiste__marke {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s3); text-decoration: none; color: var(--text);
}
.seitenleiste__marke:hover { color: var(--text); }
.seitenleiste__name {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600;
  letter-spacing: -.02em; color: #fff;
}

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav__gruppe {
  font-size: var(--fs-xs); color: var(--text-3); padding: 0 var(--s3) var(--s2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav a {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3); border-radius: var(--r-input);
  color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 450;
  transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}
.nav a:hover { background: var(--grund-2); color: var(--text); }
.nav a .sym { font-size: 19px; color: var(--text-2); }
.nav a[aria-current="page"] { background: var(--grund-3); color: #fff; font-weight: var(--gw-mittel); }
.nav a[aria-current="page"] .sym { color: var(--akzent); font-variation-settings: "FILL" 1, "wght" 400, "opsz" 24; }
.nav__zahl {
  margin-left: auto; background: var(--akzent); color: #fff;
  border-radius: var(--r-rund); padding: 1px 7px;
  font-size: var(--fs-micro); font-weight: 600; font-variant-numeric: tabular-nums;
}

.seitenleiste__fuss {
  margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--linie);
  display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-xs); color: var(--text-2);
}
.seitenleiste__fuss .sym { font-size: 26px; color: var(--text-3); }
.seitenleiste__fuss b { display: block; color: var(--text); font-weight: var(--gw-mittel);
                        font-size: var(--fs-sm); max-width: 15ch;
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seitenleiste__fuss form { margin-left: auto; }

/* ---------- Kopfbereich des Inhalts ---------- */
.inhalt { min-width: 0; display: flex; flex-direction: column; }

/* Ein gemeinsames Maß für Kopf und Körper. Ohne Begrenzung läuft eine Tabelle
   auf einem 27-Zoll-Schirm über 1600 px breit, und zwischen der Bezeichnung links
   und dem Datum rechts liegt der halbe Schirm. */
.seitenkopf__inhalt, .page__inhalt { max-width: 1240px; }

.seitenkopf {
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
  padding: var(--s5) var(--s6) 0;
}
.seitenkopf > * { max-width: 1240px; }
.krumen { display: flex; align-items: center; gap: var(--s1);
          font-size: var(--fs-xs); color: var(--text-3); margin-bottom: var(--s2); }
.krumen a { color: var(--text-2); text-decoration: none; }
.krumen a:hover { color: var(--akzent); }
.krumen .sym { font-size: 15px; }

.page__head { display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
.page__title { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.page__sub { margin-top: var(--s2); color: var(--text-2); font-size: var(--fs-sm); }
.page__sub b { color: var(--text); font-weight: var(--gw-mittel); }
.page__tat { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }

.reiter { display: flex; gap: var(--s1); margin-top: var(--s5); overflow-x: auto; }
.reiter a {
  padding: var(--s3) var(--s3); font-size: var(--fs-sm); color: var(--text-2);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.reiter a:hover { color: var(--text); }
.reiter a[aria-current="page"] { color: var(--akzent); border-bottom-color: var(--akzent);
                                 font-weight: var(--gw-mittel); }

.page { padding: var(--s5) var(--s6) var(--s9); display: flex; flex-direction: column;
        gap: var(--s5); max-width: calc(1240px + 2 * var(--s6)); }
.page--schmal { max-width: 880px; }

.section { display: flex; flex-direction: column; gap: var(--s3); }
.section__head { display: flex; align-items: center; gap: var(--s3); }
.section__head .btn { margin-left: auto; }

.leer { padding: var(--s6) var(--s4); color: var(--text-3); font-size: var(--fs-sm); text-align: center; }

.meldung {
  padding: var(--s3) var(--s4); font-size: var(--fs-sm);
  border: 1px solid var(--linie); border-left: 3px solid var(--linie-stark);
  background: var(--flaeche); color: var(--text); border-radius: var(--r-input);
  display: flex; align-items: center; gap: var(--s3);
}
.meldung--success { border-color: var(--gut-linie); border-left-color: var(--gut);
                    background: var(--gut-flaeche); color: var(--gut); }
.meldung--error { border-color: var(--kritisch-linie); border-left-color: var(--kritisch);
                  background: var(--kritisch-flaeche); color: var(--kritisch); }

.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--s2) var(--s5); }
.kv dt { font-size: var(--fs-sm); color: var(--text-3); }
.kv dd { margin: 0; font-size: var(--fs-sm); }

.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3);
  align-items: center; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--linie); font-size: var(--fs-sm);
}
.verlauf li:last-child { border-bottom: 0; }
.verlauf .sym { color: var(--text-3); font-size: 18px; }
.verlauf time { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* =========================================================================
   Kennzahlen
   ========================================================================= */

/* Immer vier Kennzahlen — also zwei mal zwei oder vier nebeneinander, nie drei
   und eine allein in der zweiten Reihe. `auto-fit` ergab genau das auf dem Tablet. */
.ampel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 760px) { .ampel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ampel__feld {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-base); padding: var(--s4); box-shadow: var(--schatten-karte);
}
/* Nur eine Karte darf rufen — die, auf der man selbst dran ist. */
.ampel__feld--wach { border-color: var(--akzent-linie); background: var(--akzent-weich); }
.ampel__name {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-xs); color: var(--text-2); margin-bottom: var(--s2);
}
.ampel__name .sym { font-size: 17px; color: var(--text-3); }
.ampel__feld--wach .ampel__name, .ampel__feld--wach .ampel__name .sym { color: var(--akzent); }
.ampel__wert {
  font-family: var(--font-display); font-size: 30px; font-weight: var(--gw-display);
  letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 32;
}
.ampel__feld--wach .ampel__wert { color: var(--akzent); }
.ampel__wert--text { font-size: var(--fs-lg); letter-spacing: -.01em;
                     font-weight: var(--gw-mittel); line-height: 1.3; }
.ampel__unten { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s2); }

/* =========================================================================
   Das Blatt: Papier für lange Texte
   ========================================================================= */

.blatt {
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--r-base);
  box-shadow: var(--schatten-blatt);
  padding: var(--s8) var(--s8) var(--s9); max-width: 78ch;
}
.blatt .doc { font-size: var(--fs-body); line-height: var(--lh-doc); max-width: 68ch; }
.blatt .doc > * + * { margin-top: var(--s4); }
.blatt .doc h1 {
  font-size: 32px; font-weight: var(--gw-display); letter-spacing: var(--sp-display);
  margin-bottom: var(--s6);
}
.blatt .doc h2 {
  font-size: var(--fs-2xl); font-weight: var(--gw-head); letter-spacing: var(--sp-head);
  margin-top: var(--s7); padding-bottom: var(--s2); border-bottom: 1px solid var(--linie);
}
.blatt .doc h3 { font-size: var(--fs-lg); margin-top: var(--s5); }
.blatt .doc ul, .blatt .doc ol { padding-left: var(--s5); }
.blatt .doc li + li { margin-top: var(--s2); }
.blatt .doc em { color: var(--text-2); }
.blatt .doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.blatt .doc th, .blatt .doc td {
  text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--linie);
}
.blatt .doc th { font-size: var(--fs-xs); font-weight: var(--gw-mittel); color: var(--text-2); }

textarea.editor {
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.7;
  width: 100%; min-height: 60vh; tab-size: 2;
}

/* ---------- Freigabe ---------- */
.freigabe {
  border: 1px solid var(--linie-stark); border-radius: var(--r-base);
  background: var(--flaeche); padding: var(--s6); max-width: 560px;
  box-shadow: var(--schatten-karte);
}
.freigabe--erteilt { border-color: var(--gut-linie); background: var(--gut-flaeche); }
.freigabe h3 { margin-bottom: var(--s2); }
.freigabe__hinweis { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-2);
                     margin: var(--s3) 0 var(--s5); }
.freigabe__beleg { display: grid; grid-template-columns: auto 1fr;
                   gap: var(--s2) var(--s5); font-size: var(--fs-sm); }
.freigabe__beleg dt { color: var(--text-3); }
.freigabe__beleg dd { margin: 0; }
.freigabe__hash { font-family: var(--font-mono); font-size: var(--fs-xs);
                  word-break: break-all; color: var(--text-3); }

/* ---------- Summen und Filter ---------- */
.summen {
  display: flex; gap: var(--s5); flex-wrap: wrap; align-items: center;
  padding: var(--s3) var(--s4); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r-base);
  font-size: var(--fs-sm); color: var(--text-2);
}
.summen b { color: var(--text); font-weight: var(--gw-mittel); font-variant-numeric: tabular-nums; }
.summen__geld {
  margin-left: auto; font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: var(--gw-display); letter-spacing: -.03em;
  color: var(--text); font-variant-numeric: tabular-nums;
}

.filterzeile { display: flex; gap: var(--s1); flex-wrap: wrap; }
.filterzeile a {
  font-size: var(--fs-sm); font-weight: 450; text-decoration: none; color: var(--text-2);
  padding: var(--s2) var(--s3); border-radius: var(--r-input);
}
.filterzeile a:hover { color: var(--text); background: var(--grund-2); }
.filterzeile a[aria-current="true"] { color: var(--akzent); background: var(--akzent-weich);
                                      font-weight: var(--gw-mittel); }

/* =========================================================================
   Werkbank — der Leuchtkasten um die Kundenvorschau
   ========================================================================= */

/* `100dvh` nach `100vh`: Auf dem Telefon rechnet `100vh` die Adressleiste mit,
   und der untere Rand der Werkbank — mit „Kommentar setzen" — lag dahinter. */
.wb { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.wb__bar {
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s4); min-height: var(--kopf);
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
  color: var(--text); font-size: var(--fs-sm);
}
.wb__zurueck { color: var(--text-2); text-decoration: none; white-space: nowrap;
               display: inline-flex; align-items: center; gap: var(--s2); }
.wb__zurueck:hover { color: var(--text); }
.wb__titel { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
             min-width: 0; max-width: 34ch; }
.wb__spacer { flex: 1; }
.wb__version { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.wb__gruppe { display: flex; gap: 1px; background: var(--linie);
              border-radius: var(--r-input); overflow: hidden; }
.wb__knopf {
  border: 0; background: var(--grund-2); color: var(--text-2);
  font-family: var(--font-ui); font-size: var(--fs-xs); padding: 7px var(--s3);
  cursor: pointer; text-decoration: none; line-height: 1.5;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
}
.wb__knopf:hover { background: var(--grund-3); color: var(--text); }
.wb__knopf[aria-current="true"] { background: var(--akzent); color: #fff; }
.wb__knopf .sym { font-size: 16px; }

.wb__inhalt { flex: 1; min-height: 0; display: flex; }
.wb__buehne {
  flex: 1; min-width: 0; min-height: 0; display: grid;
  grid-template-rows: minmax(0, 1fr); justify-items: center; align-items: stretch;
  padding: var(--s4); overflow: hidden;
}
.wb__rahmen {
  width: 100%; max-width: 1440px; height: 100%;
  background: #fff; border: 0; border-radius: var(--r-base);
  box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 30px 70px -30px rgba(0,0,0,.7);
}
.wb__rahmen[data-modus="tablet"] { max-width: 834px; }
.wb__rahmen[data-modus="mobil"] { max-width: 390px; }

.wb__fuss {
  padding: var(--s2) var(--s4); background: var(--flaeche);
  border-top: 1px solid var(--linie); color: var(--text-3); font-size: var(--fs-xs);
  display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap;
}
.wb__status { font-variant-numeric: tabular-nums; }
.wb__status[data-zustand="ok"] { color: var(--gut); }
.wb__status[data-zustand="warte"] { color: var(--achtung); }

.wb__seite { width: 390px; flex-shrink: 0; min-height: 0;
             background: var(--flaeche); border-left: 1px solid var(--linie);
             display: flex; flex-direction: column; }

/* =========================================================================
   Kommentar-Sidebar

   Liegt in der dunklen Werkbank und erbt deren Flächentokens. Die Auszeichnungen
   erzeugt Sidebar.svelte; die Gestalt steht hier, damit sie denselben Tokens folgt
   wie der Rest und nicht ein zweites Mal gepflegt werden muss.
   ========================================================================= */

.sb { display: flex; flex-direction: column; height: 100%; min-height: 0;
      color: var(--text); font-family: var(--font-ui); font-size: var(--fs-sm); }

.sb__kopf { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--linie);
            display: flex; flex-direction: column; gap: var(--s3); }
.sb__reiter { display: flex; gap: var(--s4); }
.sb__reiter button {
  border: 0; background: none; color: var(--text-2); cursor: pointer;
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 450;
  padding: 0 0 var(--s2);
  border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px;
}
.sb__reiter button:hover { color: var(--text); }
.sb__reiter button.aktiv { color: var(--akzent); border-bottom-color: var(--akzent);
                           font-weight: var(--gw-mittel); }
.sb__reiter button.sb__warnung.aktiv { color: var(--kritisch); border-bottom-color: var(--kritisch); }
.sb__zahl { font-variant-numeric: tabular-nums; }

.sb__schalter { display: flex; align-items: center; gap: var(--s2);
                font-size: var(--fs-xs); color: var(--text-2); cursor: pointer; }

.sb__anlegen, .sb__entwurf { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--linie);
                             display: flex; flex-direction: column; gap: var(--s2); }
.sb__anlegen { flex-direction: row; }
.sb__label { font-size: var(--fs-xs); font-weight: var(--gw-mittel); color: var(--text-2); }

.sb textarea {
  width: 100%; background: var(--grund); color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: var(--r-input);
  font-family: var(--font-ui); font-size: var(--fs-sm); padding: var(--s2) var(--s3);
  resize: vertical;
}
.sb textarea:focus { outline: none; border-color: var(--akzent);
                     box-shadow: 0 0 0 3px var(--akzent-weich); }

.sb__knoepfe { display: flex; gap: var(--s2); flex-wrap: wrap; }
.sb__primaer, .sb__still {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent; border-radius: var(--r-base); cursor: pointer;
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: var(--gw-mittel);
  padding: 7px var(--s3); min-height: 30px;
  transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}
.sb__primaer { background: var(--akzent); color: var(--text-invers); }
.sb__primaer:hover { background: var(--akzent-tief); }
.sb__primaer.aktiv { background: transparent; color: var(--text-2); border-color: var(--linie-stark); }
.sb__primaer:disabled { opacity: .45; cursor: not-allowed; }
.sb__still { background: transparent; color: var(--text-2); border-color: var(--linie-stark); }
.sb__still:hover { color: var(--text); border-color: var(--text-3); }

.sb__liste { flex: 1; min-height: 0; overflow-y: auto; }
.sb__leer { padding: var(--s6) var(--s4); color: var(--text-3); font-size: var(--fs-sm); }
.sb__fehler { margin: 0; padding: var(--s2) var(--s4);
              background: var(--kritisch-flaeche); color: var(--kritisch); font-size: var(--fs-xs); }

.sb__thread { border-bottom: 1px solid var(--linie); }
.sb__thread.ueberfahren, .sb__thread.offen { background: var(--grund-2); }

.sb__zeile {
  width: 100%; display: grid; grid-template-columns: 24px 1fr auto;
  gap: var(--s3); align-items: start; text-align: left;
  border: 0; background: none; color: inherit; cursor: pointer;
  padding: var(--s3) var(--s4); font-family: var(--font-ui);
}
.sb__zeile:hover { background: var(--grund-2); }

.sb__nummer {
  width: 22px; height: 22px; border-radius: var(--r-rund);
  background: var(--akzent); color: var(--text-invers);
  font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.sb__nummer[data-offen="false"] { background: var(--gut); color: var(--text-invers); }
.sb__nummer[data-intern="true"] { background: var(--linie-stark); color: var(--text-2); }

.sb__vorschau { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb__text { font-size: var(--fs-sm); line-height: 1.5;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sb__meta { font-size: var(--fs-xs); color: var(--text-3); }
.sb__status { font-size: var(--fs-xs); color: var(--text-3);
              white-space: nowrap; padding-top: 3px; }
.sb__status[data-status="resolved"] { color: var(--gut); }
.sb__status[data-status="in_progress"] { color: var(--achtung); }

.sb__verloren, .sb__repariert { margin: 0; padding: var(--s2) var(--s4) var(--s2) 64px;
                                font-size: var(--fs-micro); line-height: 1.5; }
.sb__verloren { color: var(--kritisch); }
.sb__repariert { color: var(--text-3); }

.sb__verlauf { padding: 0 var(--s4) var(--s4) 64px; display: flex; flex-direction: column; gap: var(--s4); }
.sb__beitrag { display: flex; flex-direction: column; gap: 4px; }
.sb__beitrag p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; white-space: pre-wrap; }
.sb__beitrag.intern { border-left: 2px solid var(--linie-stark); padding-left: var(--s3); }
.sb__beitrag-kopf { font-size: var(--fs-xs); color: var(--text-3);
                    display: flex; gap: var(--s2); align-items: center; }
.sb__intern { font-size: var(--fs-xs); font-weight: var(--gw-mittel); color: var(--text-3); }

@media (max-width: 1200px) { .wb__seite { width: 340px; } }
@media (max-width: 1000px) {
  .wb__inhalt { flex-direction: column; }
  .wb__buehne { flex: 1 1 58%; padding: var(--s2); }
  .wb__seite { width: 100%; flex: 1 1 42%; min-height: 220px;
               border-left: 0; border-top: 1px solid var(--linie); }
}

/* Telefon quer, 844 × 390. Untereinander blieben der Kundenvorschau 75 Pixel
   Höhe — von der Webseite war nichts zu sehen, weil die Kommentarleiste darunter
   ihre Mindesthöhe behielt. Quer ist Breite da und Höhe nicht, also wieder
   nebeneinander, mit schmaler Leiste. Die Fußzeile entfällt: Ihre Angaben sind
   nett, die 30 Pixel sind hier wichtiger. */
@media (max-width: 1000px) and (max-height: 560px) {
  .wb__inhalt { flex-direction: row; }
  .wb__buehne { flex: 1 1 auto; padding: var(--s2); }
  .wb__seite { width: min(320px, 42vw); flex: none; min-height: 0;
               border-top: 0; border-left: 1px solid var(--linie); }
  .wb__fuss { display: none; }
}

@media (max-width: 760px) {
  /* Die Leiste lief bisher über: Versions- und Ansichtsumschalter standen
     rechts außerhalb des Schirms und waren nicht erreichbar. Jetzt umbrechen
     statt abschneiden. */
  .wb__bar { flex-wrap: wrap; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3);
             min-height: 0; }
  .wb__titel { max-width: none; flex: 1 1 auto; }
  .wb__spacer { display: none; }
  .wb__version { order: 3; }

  /* Desktop/Tablet/Mobil ergibt auf einem Telefon keinen Sinn — der Schirm *ist*
     der Prüffall. Der Versionsumschalter bleibt, der ist auch hier nützlich. */
  .wb__gruppe[aria-label="Ansicht"] { display: none; }

  .wb__rahmen { border-radius: var(--r-input); }
  .wb__fuss { padding: var(--s2) var(--s3); gap: var(--s2) var(--s3); }
}

/* =========================================================================
   Kurzeinführung
   ========================================================================= */

.einfuehrung {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: var(--s5);
  background: rgba(12,29,38,.9); backdrop-filter: blur(4px);
}
/* Ohne diese Zeile wirkt `hidden` nicht: Die Regel oben setzt `display: grid`, und
   eine Autorenregel schlägt die Browservorgabe `[hidden] { display: none }`. */
.einfuehrung[hidden] { display: none !important; }
.einfuehrung__karte {
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: var(--r-pop);
  padding: var(--s7); max-width: 500px; box-shadow: var(--schatten-pop);
}
.einfuehrung__karte h2 { margin-bottom: var(--s5); }
.einfuehrung ol { list-style: none; margin: 0 0 var(--s6); padding: 0;
                  display: flex; flex-direction: column; gap: var(--s4); counter-reset: schritt; }
.einfuehrung li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3);
                  font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.einfuehrung li strong { color: var(--text); font-weight: 600; }
.einfuehrung li::before {
  counter-increment: schritt; content: counter(schritt);
  width: 22px; height: 22px; border-radius: var(--r-rund);
  background: var(--akzent); color: #fff;
  font-size: var(--fs-xs); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.einfuehrung__fuss { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }

/* =========================================================================
   Zugang: die Schlüsselkarte
   ========================================================================= */

/* Dunkel auf heller Seite. Der Code ist das eine Ding auf dieser Seite, das den
   Raum verlässt — er bekommt deshalb eine eigene Fläche und nicht die dritte
   weiße Karte untereinander. `.dunkel` definiert die Flächen-Tokens neu, die
   Regeln hier greifen darauf zu und nicht auf feste Farben. */
.schluessel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s5) var(--s6);
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-base); box-shadow: var(--schatten-blatt);
  padding: var(--s6);
}
.schluessel__text { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }

/* Sperrung ist hier eine der begründeten Ausnahmen (DESIGN.md §5): Der Code wird
   abgetippt und am Telefon durchgesagt, Gruppen müssen auseinanderfallen.
   `clamp` statt fester Größe, weil 14 Zeichen auf 320 px sonst überlaufen. */
.schluessel__code {
  font-family: var(--font-display);
  font-size: clamp(22px, 5.4vw, 36px);
  font-weight: var(--gw-display); letter-spacing: .1em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  line-height: 1.15; color: var(--text);
  overflow-wrap: anywhere;
}
.schluessel__fuss {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-xs); color: var(--text-3);
}
.schluessel__tat { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Nummeriert, weil es wirklich eine Reihenfolge ist — erst weitergeben, dann
   eintippen. Zeichen statt Zahlen wären hier Zierrat. */
.schritte {
  list-style: none; margin: 0; padding: var(--s4) var(--s5) var(--s5);
  display: flex; flex-direction: column; gap: var(--s4); counter-reset: schritt;
}
.schritte li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s3);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2);
}
.schritte li b { color: var(--text); font-weight: var(--gw-mittel); }
.schritte li::before {
  counter-increment: schritt; content: counter(schritt);
  width: 22px; height: 22px; border-radius: var(--r-rund);
  background: var(--akzent); color: #fff;
  font-size: var(--fs-xs); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

.block__fuss {
  padding: var(--s3) var(--s4) var(--s4);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2);
}
.block__fuss b { color: var(--text); font-weight: var(--gw-mittel); }
.block__fuss + form { padding: 0 var(--s4) var(--s4); }

/* Eine Kante, kein rotes Feld: Die Handlung ist folgenreich, aber nicht falsch. */
.block--warnung { border-left: 3px solid var(--kritisch-linie); }
.block--warnung .block__head .sym { color: var(--kritisch); }

/* Zweitrangiges Feld unter einer Haarlinie — der Name bei der Anmeldung ist
   freiwillig, und das muss man sehen, bevor man ihn liest. */
.feldgruppe--nachgeordnet {
  border-top: 1px solid var(--linie); padding-top: var(--s4);
  display: flex; flex-direction: column; gap: var(--s4);
}
.label--leise {
  margin-left: var(--s2); font-size: var(--fs-micro); font-weight: 500;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .06em;
}

/* =========================================================================
   Automatische Abmeldung — die Warnung
   ========================================================================= */

/* Hell und ruhig, nicht rot: Es ist kein Fehler, sondern eine Frage. Die
   Uhr ist groß, weil sie das Einzige ist, was man in dem Moment wissen muss. */
.sitzungsfeld {
  width: min(420px, calc(100vw - 2 * var(--s4)));
  max-height: calc(100dvh - 2 * var(--s4));
  overflow: auto;
  border: 1px solid var(--linie-stark); border-radius: var(--r-pop);
  padding: var(--s7) var(--s6) var(--s6);
  background: var(--flaeche); color: var(--text);
  box-shadow: var(--schatten-pop);
  text-align: center;
}
.sitzungsfeld::backdrop { background: rgba(12, 29, 38, .72); backdrop-filter: blur(3px); }
.sitzungsfeld__zeichen { font-size: 40px; color: var(--akzent); margin-bottom: var(--s3); }
.sitzungsfeld h2 { font-size: var(--fs-2xl); margin-bottom: var(--s3); }
.sitzungsfeld p { font-size: var(--fs-base); line-height: 1.6; color: var(--text-2); }
.sitzungsfeld__uhr {
  margin: var(--s5) 0 var(--s6);
  font-family: var(--font-display); font-size: 44px; font-weight: var(--gw-display);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text);
}
.sitzungsfeld__uhr span { color: var(--text) !important; }
.sitzungsfeld__tat { display: flex; flex-direction: column; gap: var(--s2); }
.sitzungsfeld__tat .btn { width: 100%; min-height: 44px; }

/* Telefon quer: 390 px Höhe. Zeichen weg, Uhr kleiner — sonst passt der Knopf
   „Angemeldet bleiben" nicht mehr auf den Schirm, und genau um den geht es. */
@media (max-height: 500px) {
  .sitzungsfeld { padding: var(--s4) var(--s5); }
  .sitzungsfeld__zeichen { display: none; }
  .sitzungsfeld__uhr { font-size: 30px; margin: var(--s2) 0 var(--s3); }
  .sitzungsfeld__tat { flex-direction: row; }
}

/* =========================================================================
   Akquise — interner Bereich
   ========================================================================= */

/* Der Suchkasten steht oben und ist der einzige Ort, an dem etwas angestoßen
   wird. Er bekommt deshalb eine eigene Tönung: Alles darunter zeigt an, was
   schon da ist, hier entsteht Neues. */
.suchfeld { margin-bottom: var(--s5); }
.suchfeld__form { padding: var(--s4); }
/* Der Hilfetext steht **unter** der Zeile, nicht in der Gebietsspalte. Dort zog
   er die Spalte schmal und hoch, und das Branchenfeld rutschte aus der Flucht. */
.suchfeld__zeile {
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-end;
}
.suchfeld__gebiet { flex: 1 1 300px; min-width: 0; }
.suchfeld__branche { flex: 0 1 240px; min-width: 0; }
/* Die Höhe nur auf breiten Schirmen angleichen: Auf dem Telefon hebt die Regel
   weiter unten alle Knöpfe auf 44 px, und eine feste Zahl hier wäre spezifischer
   und würde sie schlagen. Der Breitentest hat genau das gefunden. */
.suchfeld__zeile .btn { flex: none; }
/* Nur mit Maus: Auf Fingergeräten gilt weiter 44 Pixel — diese Regel ist
   spezifischer als die allgemeine und hätte sie sonst überstimmt. */
@media (min-width: 701px) and (pointer: fine) {
  .suchfeld__zeile .btn { min-height: 40px; }
}
.suchfeld__hilfe {
  margin-top: var(--s3); font-size: var(--fs-xs); color: var(--text-3);
  line-height: 1.6; max-width: 70ch;
}

/* Ein laufender Suchlauf. Der Ring dreht sich, weil ein Vorgang ohne sichtbare
   Bewegung nach drei Sekunden wie ein Fehler aussieht. */
.laeuft {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4); background: var(--akzent-weich);
  border-bottom: 1px solid var(--akzent-linie);
  font-size: var(--fs-sm); line-height: 1.6;
}
.laeuft__ring {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-rund);
  border: 2px solid var(--akzent-linie); border-top-color: var(--akzent);
  animation: akquise-dreht .9s linear infinite;
}
@keyframes akquise-dreht { to { transform: rotate(360deg); } }

.laeufe {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4); border-top: 1px solid var(--linie);
  font-size: var(--fs-xs); color: var(--text-2);
}
.laeufe__eintrag { display: inline-flex; align-items: center; gap: var(--s2); }
.laeufe__eintrag .sym { color: var(--text-3); }
.laeufe__eintrag--fehler, .laeufe__eintrag--fehler .sym { color: var(--kritisch); }

.filtern {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: var(--s5) 0 var(--s4);
}
.filtern .input { flex: 0 1 auto; width: auto; min-width: 130px; }
.filtern input[type="search"] { flex: 1 1 260px; }

/* Die Bedarfszahl ist die einzige Stelle in der Tabelle, die Farbe trägt — und
   sie trägt sie als Fläche, nicht als Text, damit die Zeile beim Überfliegen
   ihren Rang zeigt, ohne dass man die Zahl liest. */
.bedarf {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 3px 7px; border-radius: var(--r-input);
  font-size: var(--fs-sm); font-weight: var(--gw-mittel);
  font-variant-numeric: tabular-nums;
  background: var(--ruhig-flaeche); color: var(--ruhig);
  border: 1px solid var(--ruhig-linie);
}
.bedarf--kein_auftritt, .bedarf--kaputt {
  background: var(--kritisch-flaeche); color: var(--kritisch);
  border-color: var(--kritisch-linie);
}
.bedarf--dringend {
  background: var(--kritisch-flaeche); color: var(--kritisch);
  border-color: var(--kritisch-linie);
}
.bedarf--veraltet, .bedarf--ansehen {
  background: var(--achtung-flaeche); color: var(--achtung);
  border-color: var(--achtung-linie);
}
.bedarf--solide {
  background: var(--gut-flaeche); color: var(--gut); border-color: var(--gut-linie);
}

/* Breiter als die übliche Untergrenze: Acht Spalten auf 520 px quetschen den
   Firmennamen in drei Zeilen. Die Tabelle rollt ohnehin seitwärts (.tw), und
   lesbar gequetscht ist besser als unlesbar hineingepasst. */
.tw > .table--akquise { min-width: 900px; }
.table--akquise td { vertical-align: top; padding-block: var(--s3); }
.table--akquise .label { display: inline-block; margin-top: 2px; }
/* Kein `display: flex` auf der Zelle: Das nimmt sie aus dem Tabellenlayout, und
   die Zeilentrenner brechen sichtbar vor der letzten Spalte ab. Die Knöpfe sind
   ohnehin inline-flex — es reicht, das Formular daneben inline zu stellen. */
/* Eine Angabe, die wir nicht aus der Quelle haben, sondern erschlossen. Sie
   steht bewusst als eigenes Zeichen daneben und nicht als Fußnote: Wer sie
   übersieht, ruft mit einer falschen Annahme an. */
.kettenhinweis {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin: calc(-1 * var(--s2)) 0 var(--s4);
  font-size: var(--fs-xs); color: var(--text-3);
}
.kettenhinweis .sym { color: var(--text-3); }
.kettenhinweis b { color: var(--text-2); }

.listenkopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s3);
}

.vermutet {
  display: inline-block; margin-left: var(--s2);
  padding: 1px 6px; border-radius: var(--r-rund);
  font-size: var(--fs-micro); font-weight: 500; line-height: 1.5;
  background: var(--achtung-flaeche); color: var(--achtung);
  border: 1px solid var(--achtung-linie); white-space: nowrap;
}
.vermutet--alt { font-variant-numeric: tabular-nums; }

.table--akquise .tat { text-align: right; white-space: nowrap; }
.table--akquise .tat > form { display: inline-block; margin-right: var(--s2); }

/* Die Ampelkarten sind hier Filter, also Verweise. Ohne diese Regeln erbt der
   Anker Unterstreichung und Akzentfarbe und die Zeilen laufen ineinander. */
a.ampel__feld { display: block; text-decoration: none; color: inherit; }
a.ampel__feld:hover { border-color: var(--linie-stark); background: var(--grund-2); }
a.ampel__feld--wach:hover { border-color: var(--akzent); background: var(--akzent-weich); }

.blaettern {
  display: flex; align-items: center; gap: var(--s4);
  margin-top: var(--s4); justify-content: center;
}

.befund {
  display: flex; gap: var(--s3); align-items: flex-start;
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  background: var(--grund-2); border-radius: var(--r-input);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2);
}
.befund .sym { color: var(--text-3); flex: none; }

/* ---- Entwurf und Anschreiben -------------------------------------------
   Erst der Text, dann das Bild — in der Reihenfolge, in der beides in die
   Nachricht kommt. Nebeneinander nur, wenn jede Spalte ihre Mindestbreite
   bekommt; sonst bricht das Raster von selbst um, ohne Abfrage der Fensterbreite. */
.anschreiben {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--s5); margin-top: var(--s4);
}
.anschreiben__text, .anschreiben__bild { min-width: 0; }
.anschreiben__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s2); min-height: 28px;
}
.anschreiben__knoepfe { display: flex; gap: var(--s2); }
.anschreiben__betreff { margin: 0 0 var(--s4); font-weight: 600; }
.anschreiben__rumpf {
  padding: var(--s4); background: var(--grund-2); border-radius: var(--r-input);
  font-size: var(--fs-sm); line-height: 1.65; white-space: pre-wrap;
  overflow-wrap: anywhere; user-select: all;
}
.anschreiben__bild img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--linie); border-radius: var(--r-input);
}
.anschreiben__daten { margin: var(--s5) 0 var(--s4); }
.anschreiben__alt { margin-top: var(--s5); }

/* Das Bildschirmfoto als Wiedererkennung in der Liste der Entwürfe. */
.entwurfsbild {
  display: block; width: 168px; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  object-position: top; border: 1px solid var(--linie); border-radius: var(--r-input);
}

.entwurfsmarke {
  display: inline-block; margin-left: var(--s2);
  padding: 1px 6px; border-radius: var(--r-rund);
  font-size: var(--fs-micro); font-weight: 500; line-height: 1.5;
  background: var(--akzent-weich); color: var(--akzent);
  border: 1px solid var(--akzent); white-space: nowrap;
}
.entwurfsmarke--offen { background: var(--grund-2); color: var(--text-2); border-color: var(--linie-stark); }

.pflege { display: flex; flex-direction: column; gap: var(--s4); }
.pflege__felder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s4);
}

/* =========================================================================
   Tabellen werden zu Karten, wenn sie nicht mehr passen
   ========================================================================= */

/*
 * Vorher rollte jede Tabelle auf dem Telefon in ihrem Kasten seitwärts. Der
 * Breitentest war grün, denn die Seite selbst rollte nicht — aber die Spalte
 * „Status" war nur mit Wischen zu erreichen, und in der Akquise lagen die
 * Knöpfe außerhalb des Bildes. Ausgerechnet auf dem Schirm, auf dem man am
 * wenigsten sucht.
 *
 * Jede Zelle trägt ihre Spaltenüberschrift als `data-label`. Wird der Kasten
 * zu schmal, wird jede Zeile zur Karte: die Zelle `.karte-titel` als Überschrift
 * über die volle Breite, der Rest als Beschriftung und Wert in zwei Spalten,
 * `.karte-tat` mit den Knöpfen unten.
 *
 * **Containerabfrage statt Bildschirmbreite.** Entscheidend ist, wie breit der
 * Kasten ist, in dem die Tabelle steht — nicht das Fenster. Eine Tabelle in
 * einer schmalen Spalte am großen Bildschirm wird so ebenfalls zur Karte.
 *
 * Zwei Schwellen, weil die Tabellen unterschiedlich breit sind: die Akquise
 * braucht 900 Pixel, alles andere kommt mit gut 520 aus.
 */
.tw { container-type: inline-size; }

@container (max-width: 580px) {
  /* `display: none`, nicht „nur optisch versteckt": Ein Tabellenkopf ist kein
     Blockkasten, `overflow: hidden` greift an ihm nicht, und seine Zellen trugen
     unsichtbar Breite bei — der Kasten rollte technisch weiter. Die Beschriftung
     geht nicht verloren; jede Zelle trägt sie selbst als data-label. */
  .table--karten thead { display: none; }
  /* `.tw > .table--karten` und nicht nur `.table--karten`: Die Mindestbreite kommt aus
     `.tw > .table` und ist damit spezifischer — ohne denselben Bau bliebe der
     Kasten 520 Pixel breit und rollte weiter, obwohl die Karten schon stehen. */
  .tw > .table--karten { min-width: 0; }
  .table--karten, .table--karten tbody { display: block; width: 100%; min-width: 0; }
  .table--karten tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2) var(--s4); padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--linie);
  }
  .table--karten tbody tr:last-child { border-bottom: 0; }
  .table--karten tbody tr:hover td { background: transparent; }
  .table--karten td {
    display: block; min-width: 0; height: auto; padding: 0; border: 0;
    text-align: left; overflow-wrap: anywhere;
  }
  .table--karten td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: var(--fs-micro); font-weight: 500; letter-spacing: .02em;
    color: var(--text-3);
  }
  .table--karten td.karte-titel, .table--karten td.karte-voll, .table--karten td.karte-tat, .table--karten td[colspan] {
    grid-column: 1 / -1;
  }
  .table--karten td.karte-titel { order: -1; font-size: var(--fs-base); }
  .table--karten td.karte-tat {
    display: flex; flex-wrap: wrap; gap: var(--s2);
    text-align: left !important; white-space: normal !important;
    padding-top: var(--s1);
  }
  .table--karten td.karte-tat > form { display: block !important; margin: 0; }
  .table--karten td.karte-tat .btn { min-height: 44px; }
  /* Zahlen stehen in der Tabelle rechtsbündig, damit die Stellen untereinander
     stehen. In der Karte gibt es kein Untereinander — dort links wie der Rest. */
  .table--karten td.num { text-align: left; }
  /* Etiketten brechen in der Karte um; „im Angebot enthalten" lief sonst über
     den Rand der halben Kartenbreite hinaus. */
  .table--karten td .chip { white-space: normal; max-width: 100%; }
}

@container (max-width: 920px) {
  /* `display: none`, nicht „nur optisch versteckt": Ein Tabellenkopf ist kein
     Blockkasten, `overflow: hidden` greift an ihm nicht, und seine Zellen trugen
     unsichtbar Breite bei — der Kasten rollte technisch weiter. Die Beschriftung
     geht nicht verloren; jede Zelle trägt sie selbst als data-label. */
  .table--karten-breit thead { display: none; }
  /* `.tw > .table--karten-breit` und nicht nur `.table--karten-breit`: Die Mindestbreite kommt aus
     `.tw > .table` und ist damit spezifischer — ohne denselben Bau bliebe der
     Kasten 520 Pixel breit und rollte weiter, obwohl die Karten schon stehen. */
  .tw > .table--karten-breit { min-width: 0; }
  .table--karten-breit, .table--karten-breit tbody { display: block; width: 100%; min-width: 0; }
  .table--karten-breit tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2) var(--s4); padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--linie);
  }
  .table--karten-breit tbody tr:last-child { border-bottom: 0; }
  .table--karten-breit tbody tr:hover td { background: transparent; }
  .table--karten-breit td {
    display: block; min-width: 0; height: auto; padding: 0; border: 0;
    text-align: left; overflow-wrap: anywhere;
  }
  .table--karten-breit td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: var(--fs-micro); font-weight: 500; letter-spacing: .02em;
    color: var(--text-3);
  }
  .table--karten-breit td.karte-titel, .table--karten-breit td.karte-voll, .table--karten-breit td.karte-tat, .table--karten-breit td[colspan] {
    grid-column: 1 / -1;
  }
  .table--karten-breit td.karte-titel { order: -1; font-size: var(--fs-base); }
  .table--karten-breit td.karte-tat {
    display: flex; flex-wrap: wrap; gap: var(--s2);
    text-align: left !important; white-space: normal !important;
    padding-top: var(--s1);
  }
  .table--karten-breit td.karte-tat > form { display: block !important; margin: 0; }
  .table--karten-breit td.karte-tat .btn { min-height: 44px; }
  /* Zahlen stehen in der Tabelle rechtsbündig, damit die Stellen untereinander
     stehen. In der Karte gibt es kein Untereinander — dort links wie der Rest. */
  .table--karten-breit td.num { text-align: left; }
  /* Etiketten brechen in der Karte um; „im Angebot enthalten" lief sonst über
     den Rand der halben Kartenbreite hinaus. */
  .table--karten-breit td .chip { white-space: normal; max-width: 100%; }
  /* Die Regel für schmale Fenster weiter unten (`.table td { height: 48px }`)
     steht später und wiegt gleich viel — sie setzte die Kartenzellen wieder auf
     48 Pixel fest, und alles Höhere (ein Bild, ein dreizeiliger Hinweis) lief
     in die nächste Zelle. Deshalb hier mit einer Klasse mehr. */
  .table.table--karten-breit td { height: auto; }
}

/* =========================================================================
   Schmale Schirme
   ========================================================================= */

@media (max-width: 900px) {
  /* Die Seitenleiste wird zur Kopfleiste: eine Zeile mit Zeichen und Konto,
     darunter die Bereiche als seitwärts rollende Reiter.

     Icons ohne Beschriftung — die erste Fassung dieser Ansicht — sind hier falsch:
     Ein Kunde öffnet das Portal zweimal im Monat und kann nicht wissen, wofür ein
     Zeichen steht. Die Beschriftung bleibt, die Zeile rollt lieber. */
  /* `grid-template-rows: auto 1fr` ist hier nicht schmückend, sondern nötig:
     Ohne Angabe sind beide Zeilen `auto`, und weil `align-content` von Haus aus
     streckt, verteilt sich die Resthöhe aus `min-height: 100vh` auf beide. Auf
     einem 768×1024-Schirm wurde die Kopfleiste dadurch 600 px hoch. */
  .rahmen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  .seitenleiste {
    position: sticky; top: 0; z-index: 20; height: auto;
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
    align-items: center; gap: var(--s2) var(--s3);
    padding: var(--s3) 0 0; overflow: visible;
  }
  .seitenleiste__marke { padding-inline: var(--s4); }
  .seitenleiste__name { font-size: var(--fs-lg); }

  .seitenleiste__fuss {
    grid-column: 2; grid-row: 1; margin: 0; padding: 0 var(--s4) 0 0; border: 0;
  }
  .seitenleiste__fuss b, .seitenleiste__fuss > span:not(.sym) { display: none; }
  .seitenleiste__fuss form { margin: 0; }

  /* Beide Gruppen landen in einer einzigen Reiterzeile — auf einem Telefon ist
     eine zweite Ebene mehr Aufwand als Nutzen. */
  .seitenleiste .nav {
    grid-column: 1 / -1; flex-direction: row; gap: var(--s1);
    overflow-x: auto; scrollbar-width: none;
    padding: 0 var(--s4); scroll-padding-inline: var(--s4);
  }
  .seitenleiste .nav::-webkit-scrollbar { display: none; }
  /* Ausblendung am rechten Rand: Ohne sie sieht eine rollende Zeile aus wie eine
     abgeschnittene. Der Verlauf zeigt, dass dort noch etwas kommt. */
  .seitenleiste .nav {
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .seitenleiste .nav:last-of-type { padding-bottom: var(--s2); }
  .seitenleiste .nav__gruppe { display: none; }
  .nav a {
    white-space: nowrap; border-radius: var(--r-input) var(--r-input) 0 0;
    border-bottom: 2px solid transparent; padding: var(--s2) var(--s3);
  }
  .nav a[aria-current="page"] { background: var(--grund-2); border-bottom-color: var(--akzent); }

  .seitenkopf, .page { padding-inline: var(--s4); }
  /* Handlungen unter den Titel, linksbündig — rechtsbündig lässt sie auf einem
     schmalen Schirm in der Luft hängen. Ihre natürliche Breite behalten sie
     aber: Ein Zweitknopf über die volle Tabletbreite sieht aus wie eine
     Hauptsache, die er nicht ist. */
  .page__tat { margin-left: 0; }
}

/* Fingergeräte, egal wie breit. Die 44-Pixel-Regel hing bisher nur an der
   Bildschirmbreite — ein iPad oder ein quergehaltenes Telefon ist breiter als die
   Schwelle und bekam Knöpfe mit 34 Pixeln. `pointer: coarse` fragt, womit bedient
   wird, statt zu raten. Ein schmales Desktopfenster mit Maus bleibt kompakt. */
@media (pointer: coarse) {
  .btn, .btn--klein { min-height: 44px; }
  .input, textarea.input, select.input { min-height: 44px; }
  .wb__knopf { min-height: 44px; }
  .seitenleiste__fuss .btn { min-width: 44px; }
}

/* Telefon quer: Die festgeklebte Kopfleiste mit ihren zwei Reiterzeilen nahm 125
   von 390 Pixeln ein, ein Drittel des Schirms, dauerhaft. Hier scrollt sie mit weg. */
@media (max-width: 900px) and (max-height: 500px) {
  .seitenleiste { position: static; }
}

@media (max-width: 380px) {
  /* „TIEF-4829" in 25 px mit weiter Laufweite passt auf 320 px nicht mehr. */
  .input--code { font-size: 20px; letter-spacing: .1em; min-height: 54px; }
  .input--code::placeholder { letter-spacing: .1em; }
  .auth__col { padding-inline: var(--s4); }
}

@media (max-width: 700px) {
  /* Untereinander statt nebeneinander: Drei Bedienelemente in einer Zeile sind
     auf einem Telefon alle drei zu schmal. */
  .suchfeld__form { flex-direction: column; align-items: stretch; }
  .suchfeld__form .field, .suchfeld__gebiet { flex: 1 1 auto; }
  .filtern .input, .filtern input[type="search"] { flex: 1 1 100%; }
  .filtern .btn { width: 100%; justify-content: center; }

  .schluessel { padding: var(--s5); }
  .schluessel__tat { width: 100%; }
  .schluessel__tat .btn { flex: 1 1 200px; justify-content: center; }
}

@media (max-width: 560px) {
  /* Unter 560 px werden zwei Handlungen nebeneinander zu schmal zum Treffen. */
  .page__tat { flex-direction: column; align-items: stretch; width: 100%; }
  .page__tat .btn { width: 100%; justify-content: center; }
  .schluessel__tat .btn { flex: 1 1 100%; }
  .seitenkopf, .page { padding-inline: var(--s3); }
  h1 { font-size: var(--fs-2xl); }
  .ampel { gap: var(--s2); }
}

@media (max-width: 700px) {
  /* 44 px gilt für **alle** Schaltflächen, auch die kleinen. Die Ausnahme für
     .btn--klein war ein Fehler: Sie trifft genau die Knöpfe in Tabellenzeilen
     („Ansehen", „Herunterladen", „Aktuell setzen"), also die, die auf einem
     Telefon am häufigsten danebengehen. Die Zeile wird dadurch höher — das ist
     der Preis, und er ist richtig herum bezahlt. */
  .btn, .btn--klein { min-height: 44px; }
  .input, textarea.input, select.input { min-height: 44px; }
  .table td { height: 48px; }
  .blatt { padding: var(--s5) var(--s4) var(--s7); }
  .page { gap: var(--s4); }
}

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