/* Klare Kante — der Grundstil aller Masken (DESIGN.md 1 bis 6).
   Farb-Token, Schrift, Abstände und die neutralen Bausteine: Seite, Kopfleiste, Navigation,
   Karte, Knopf, Feld, ⓘ, Liste, Reiter, Tabelle, Zähler, Frist, Meldungen, Leerzustand,
   Ladezustand — dazu der Stil der drei Skript-Bausteine (Fotos zu PDF, Sprachnachricht,
   Nachrichten mit Threads). Handy zuerst (375 px), ab 46 rem breiter.
   Regeln, die pruefstaende/oberflaeche/stil.test.mjs misst: Farbwerte nur hier in :root,
   Text mindestens 4,5:1, Eingabefelder 16 px, keine fremde Adresse, kein !important
   außer für Druck und reduzierte Bewegung. Kein dunkler Modus (DESIGN.md sieht keinen vor). */

:root {
  /* Grundfarben */
  --tinte: #12121a;
  --tinte-leise: #55555f;
  --tinte-still: #8b8b95;          /* nur Zierrat, nie für lesenswerten Text (3,4:1) */
  --papier: #ffffff;
  --papier-leise: #f6f6f8;
  --linie: #d8d8de;
  --linie-kraeftig: #12121a;

  /* Lila — die Bedienung */
  --wolke: #7b3fd4;
  --wolke-tief: #5b28a8;
  --wolke-linie: #d6c4f5;
  --wolke-linie-leise: #ebe2fb;
  --wolke-flaeche: #f6f2fe;
  --feld-rand: #8e80b3;            /* Rand der Eingabefelder: 3,6:1 auf Weiß, 3,3:1 auf --papier-leise (WCAG 1.4.11) */

  /* Rot und Grün — nur die Aussage „heute" und „Ziel" (im Portal nur das Strukturbild) */
  --heute: #c0392b;
  --heute-flaeche: #fdf2f0;
  --heute-linie: #e8b5ae;
  --ziel: #1d7a3e;
  --ziel-flaeche: #f0f8f2;
  --ziel-linie: #a9d4b8;

  /* Hellblau — Dokumentmöblierung und Bestätigung */
  --kapitel: #c3d6ec;
  --kapitel-tief: #9dbbdb;
  --hinweis-flaeche: #f2f7fc;

  /* Ocker — die Warnung: Frist, Sperre, Fehler */
  --achtung: #8a5300;
  --achtung-flaeche: #fdf5e6;
  --achtung-linie: #e9c98f;

  /* Schrift und Abstand */
  --schrift: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --schrift-fest: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rand: 1rem;
  --abstand: 1rem;
  --tippflaeche: 44px;
  --navigation-hoehe: 3.5rem;
}

@media (min-width: 40rem) {
  :root { --rand: 1.5rem; }
}

/* --- Grund ----------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--papier-leise);
  overflow-wrap: break-word;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5rem; hyphens: auto; }
h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; font-weight: 800; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 0.75rem; }

a { color: var(--wolke-tief); }
:focus-visible { outline: 2px solid var(--wolke); outline-offset: 2px; }

input, select, textarea, button { font: inherit; font-size: 1rem; }

[hidden] { display: none !important; }

/* Nur für Bildschirmleser sichtbar. */
.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.untertitel, .unterzeile { font-size: 0.88rem; color: var(--tinte-leise); }
.unterzeile { display: block; }
.betrag { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeitpunkt { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Trainingsleiste (S-06): ganz oben, auf jeder Seite, solange Regel Null gilt. */
.trainingsleiste {
  background: var(--hinweis-flaeche);
  border-bottom: 1px solid var(--kapitel-tief);
  color: var(--tinte);
  font-size: 0.8rem;
  padding: 0.4rem var(--rand);
  text-align: center;
}

/* Wortmarke — die einzige gesperrte Stelle. */
.wortmarke {
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 1.5rem;
}

/* Wartungsseite (DESIGN.md 7.11): Handy und breit gleich, eine Karte. */
.wartung {
  width: calc(100% - 2 * var(--rand));
  max-width: 32rem;
  margin: 3rem auto;
  padding: 1.5rem var(--rand);
  background: var(--papier);
  border: 1px solid var(--wolke-linie-leise);
  border-left: 3px solid var(--wolke-linie);
}
.wartung p:last-child { color: var(--tinte-leise); margin-bottom: 0; }

/* --- Seite, Kopfleiste, Navigation (DESIGN.md 4, 5) ------------------------------------ */

.seite {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--abstand) var(--rand) calc(var(--navigation-hoehe) + 2 * var(--abstand));
}

.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.35rem var(--rand);
  background: var(--papier);
  border-bottom: 1px solid var(--wolke-linie-leise);
}
.kopfleiste .wortmarke { margin: 0; white-space: nowrap; }
.kopfleiste-wer {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  color: var(--tinte-leise);
}

/* Zurück-Zeile über einer Unterseite: „← Nachrichten". */
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--tippflaeche);
  font-weight: 600;
  text-decoration: none;
}

/* Handy: Leiste unten für den Daumen. Breit: Leiste oben unter der Kopfleiste. */
.navigation {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: var(--papier);
  border-top: 1px solid var(--wolke-linie-leise);
  padding-bottom: env(safe-area-inset-bottom);
}
.navigation ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navigation li { flex: 1 1 0; min-width: 0; }
.navigation a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: var(--navigation-hoehe);
  padding: 0.25rem 0.15rem;
  color: var(--tinte-leise);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-top: 3px solid transparent;
}
.navigation a[aria-current="page"] { color: var(--wolke-tief); border-top-color: var(--wolke); }

/* --- Karte (DESIGN.md 4) ---------------------------------------------------------------- */

.karte {
  margin: 0 0 var(--abstand);
  padding: 1rem var(--rand);
  background: var(--papier);
  border: 1px solid var(--wolke-linie-leise);
  border-left: 3px solid var(--wolke-linie);
}
.karte > :last-child { margin-bottom: 0; }
.karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.karte-kopf h2 { margin: 0; }

/* Zwei Spalten ab 46 rem, wo die Skizze sie zeichnet. */
.spalten { display: grid; gap: 0 var(--abstand); }

/* --- Knöpfe: eckig, Tippfläche 44 × 44 px, je Seite höchstens einer stark ----------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: var(--tippflaeche);
  min-height: var(--tippflaeche);
  padding: 0.55rem 1rem;
  border: 1px solid var(--wolke);
  border-radius: 0;
  background: var(--papier);
  color: var(--wolke-tief);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.knopf-stark { background: var(--wolke); color: var(--papier); }
.knopf-leise { border-color: var(--wolke-linie); color: var(--tinte-leise); }
.knopf-breit { display: flex; width: 100%; }
/* Abmelden: in jeder Maske gleich — leise, auf dem Handy über die ganze Breite, mit Abstand zum Inhalt davor. */
.knopf-abmelden { display: flex; width: 100%; margin-top: 1rem; border-color: var(--wolke-linie); color: var(--tinte-leise); }
/* Ein Hinweis direkt unter einem Knopf klebt sonst an ihm (Absätze haben oben keinen Abstand; Rundgang 13c). */
.knopf + p { margin-top: 0.75rem; }
.knopf:disabled, .knopf[aria-disabled="true"] { border-color: var(--linie); background: var(--papier-leise); color: var(--tinte-leise); cursor: not-allowed; }
.knopfreihe { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.knopfreihe .knopf { flex: 1 1 8rem; }
.verweis {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche);
  padding: 0;
  border: 0;
  background: none;
  color: var(--wolke-tief);
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Formularfelder (DESIGN.md 3, 4): 16 px gegen den Zoom von iOS-Safari ----------------- */

.feld { margin: 0 0 1rem; }
.beschriftung { display: block; min-height: 2rem; }
/* Eine Überschrift als Beschriftung bleibt in der Zeile, damit ⓘ direkt dahinter steht. */
.beschriftung > :is(h1, h2, h3) { display: inline; margin: 0; }
.beschriftung label, .beschriftung .titel { font-size: 0.85rem; font-weight: 600; }
.feld-eingabe,
.feld input[type="text"], .feld input[type="email"], .feld input[type="password"], .feld input[type="tel"],
.feld input[type="search"], .feld input[type="date"], .feld input[type="number"], .feld select, .feld textarea {
  display: block;
  width: 100%;
  min-height: var(--tippflaeche);
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--feld-rand);
  border-radius: 0;
  background: var(--papier);
  color: var(--tinte);
  font-size: 1rem;
}
.feld textarea, textarea.feld-eingabe { min-height: 6rem; resize: vertical; }
.feld select { appearance: auto; }
.feld-eingabe:focus, .feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--wolke); outline-offset: 0; }
.feld input[readonly] { background: var(--papier-leise); color: var(--tinte-leise); }
.feld ::placeholder, .feld-eingabe::placeholder { color: var(--tinte-leise); }
/* Fehler am Feld: Ocker, mit Zeichen und Wortlaut (DESIGN.md 2). */
.feld [aria-invalid="true"] { border-color: var(--achtung); border-bottom-width: 2px; }
.feld-fehler { margin: 0.25rem 0 0; color: var(--achtung); font-size: 0.85rem; font-weight: 600; }
.feld-fehler::before { content: "! "; font-weight: 800; }
.haken { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1rem 0; font-size: 0.9rem; }
.haken input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--wolke); }
fieldset { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; font-size: 0.85rem; font-weight: 600; }

/* Datei wählen: das echte Feld liegt unsichtbar im Knopf, bleibt aber bedienbar. */
.dateiknopf { position: relative; overflow: hidden; }
.dateiknopf input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
/* Fokusrahmen wie :focus-visible — nur bei Tastatur, nicht nach dem Antippen. Ein Browser ohne :has
   (etwa ältere Safari) zeigt den Rahmen bei jedem Fokus — lieber einmal zu oft als nie. */
.dateiknopf:focus-within { outline: 2px solid var(--wolke); outline-offset: 2px; }
@supports selector(:has(*)) {
  .dateiknopf:focus-within { outline: 0; }
  .dateiknopf:has(input:focus-visible) { outline: 2px solid var(--wolke); outline-offset: 2px; }
}

/* --- ⓘ: Erklärung hinter dem Zeichen, ohne Skript (DESIGN.md 6) --------------------------
   <details class="erklaerung"> steht in der Beschriftung direkt hinter dem Text. Das Zeichen
   ist die <summary>; der aufgeklappte Text bricht als Block unter die Zeile um — kein
   Überlagerungsfenster. Der Browser meldet „aufgeklappt/zugeklappt" selbst. */
.erklaerung { display: inline; }
.erklaerung > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  margin: -0.6rem -0.4rem -0.6rem 0;
  vertical-align: middle;
  list-style: none;
  cursor: pointer;
}
.erklaerung > summary::-webkit-details-marker { display: none; }
.erklaerung > summary::marker { content: ""; }
.info-zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid var(--wolke-linie);
  border-radius: 50%;
  background: var(--wolke-flaeche);
  color: var(--wolke-tief);
  font-size: 0.7rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}
.erklaerung[open] .info-zeichen { border-color: var(--wolke); }
.erklaerung > summary:focus-visible { outline: 2px solid var(--wolke); outline-offset: -4px; }
.erklaerung-text {
  display: block;
  margin: 0.2rem 0 0.6rem;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid var(--wolke-linie);
  background: var(--wolke-flaeche);
  color: var(--tinte);
  font-size: 0.83rem;
  font-weight: 400;
}

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

.liste { margin: 0 0 1rem; padding: 0; list-style: none; }
.liste > li { padding: 0.6rem 0; border-bottom: 1px solid var(--linie); }
.liste > li:last-child { border-bottom: 0; }
/* Wird es eng, rutscht die Nebenangabe (Frist, Zähler) unter den Titel, statt ihn zu zerbrechen. */
.eintrag { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.25rem 0.75rem; }
.eintrag-haupt { flex: 1 1 9rem; min-width: 0; }
.eintrag-neben { flex: 0 0 auto; margin-left: auto; text-align: right; }
.eintrag-titel { font-weight: 600; hyphens: auto; }
a.eintrag-titel { text-decoration: none; }
a.eintrag-titel:hover { text-decoration: underline; }
.erledigt { color: var(--tinte); }
.erledigt::before { content: "✓ "; font-weight: 800; }

/* --- Reiter (DESIGN.md 7.7): auf dem Handy waagerecht verschiebbar --------------------------- */

.reiter {
  display: flex;
  gap: 0;
  margin: 0 calc(-1 * var(--rand)) var(--abstand);
  padding: 0 var(--rand);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--wolke-linie-leise);
  list-style: none;
}
.reiter::-webkit-scrollbar { display: none; }
.reiter a {
  display: flex;
  align-items: center;
  min-height: var(--tippflaeche);
  padding: 0 0.8rem;
  color: var(--tinte-leise);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.reiter a[aria-current="page"] { color: var(--wolke-tief); border-bottom-color: var(--wolke); }

/* --- Tabellen: breit nur in ihrer Hülle verschiebbar (DESIGN.md 5) --------------------------- */

.tabelle-huelle { overflow-x: auto; margin: 0 0 1rem; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabelle th, .tabelle td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tabelle th { background: var(--kapitel); color: var(--tinte); font-weight: 700; white-space: nowrap; }

/* --- Zähler „ungelesen" (DESIGN.md 4) ----------------------------------------------------- */

.zaehler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 0.7rem;
  background: var(--wolke);
  color: var(--papier);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* --- Fristen in drei Stufen (DESIGN.md 2) — nie rot, nie nur Farbe ------------------------- */

/* Stufe 1, mehr als 7 Tage: nur das Datum, leise. */
.frist { color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.frist .zeichen-frist { color: var(--achtung); }
/* Stufe 2, 7 bis 2 Tage: Ockertext, fett, „noch 5 Tage". */
.frist-bald { color: var(--achtung); font-weight: 700; }
/* Stufe 3, 1 Tag, heute, abgelaufen: Ockerfläche mit Rand und „!". */
.frist-dringend {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--achtung);
  background: var(--achtung-flaeche);
  color: var(--achtung);
  font-weight: 700;
}
.frist-dringend::before { content: "! "; font-weight: 800; }

/* Gesperrte Datei (U-05): Ocker mit ⊘. */
.gesperrt { color: var(--achtung); font-weight: 600; }
.gesperrt::before { content: "⊘ "; }

/* Kalender: die Form unterscheidet, nicht die Farbe. */
.zeichen-frist { color: var(--achtung); }
.zeichen-frist::before { content: "▲"; }
/* Pfeil nach links = gespiegelter ▸: „◂“ ist in den Systemschriften kleiner als „▸“ (Kalender, Fotoleiste —
   Abnahme Schritt 9, Fund G). So sind beide Pfeile genau gleich groß. */
.pfeil-links { display: inline-block; transform: scaleX(-1); }
.zeichen-termin { color: var(--tinte); }
.zeichen-termin::before { content: "■"; }
.zeichen-ereignis { color: var(--tinte); }
.zeichen-ereignis::before { content: "□"; }

/* --- Meldungen: Fehler Ocker mit „!", Bestätigung Hellblau mit „✓" (DESIGN.md 2) ------------ */

.meldung, .hinweis {
  margin: 0 0 1rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  color: var(--tinte);
}
.meldung { border-left: 3px solid var(--achtung); background: var(--achtung-flaeche); }
.meldung::before { content: "! "; font-weight: 800; color: var(--achtung); }
.hinweis { border-left: 3px solid var(--kapitel-tief); background: var(--hinweis-flaeche); }
.hinweis-erfolg::before { content: "✓ "; font-weight: 800; }

/* --- Leerzustand ------------------------------------------------------------------------ */

.leer {
  margin: 0 0 1rem;
  padding: 1.25rem var(--rand);
  border: 1px dashed var(--linie);
  color: var(--tinte-leise);
  font-size: 0.9rem;
  text-align: center;
}
.leer > :last-child { margin-bottom: 0; }

/* --- Ladezustand: ein Balken statt eines Kreisels, still bei reduzierter Bewegung ----------- */

.laedt { position: relative; }
.laedt::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 3px;
  background: var(--wolke);
  animation: laufband 1.1s ease-in-out infinite;
}
[aria-busy="true"] { cursor: progress; }
@keyframes laufband {
  0% { transform: translateX(0); }
  50% { transform: translateX(233%); }
  100% { transform: translateX(0); }
}
.ladehinweis { color: var(--tinte-leise); font-size: 0.88rem; }

/* --- Fotos zu einem PDF (kamera-pdf.js, DESIGN.md 7.3) ------------------------------------ */

.kamera-pdf { margin: 0 0 1rem; }
.fotoleiste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}
/* Über dem Foto rollt die Seite wie überall; gezogen wird nur am Griff ⠿. */
.foto {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--wolke-linie-leise);
  -webkit-user-select: none;
  user-select: none;
}
.foto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--papier-leise); }
.foto-nummer {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 1.5rem;
  padding: 0.1rem 0.35rem;
  background: var(--tinte);
  color: var(--papier);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.foto-griff, .foto-weg {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  padding: 0;
  background: var(--papier);
  color: var(--tinte);
  border: 1px solid var(--wolke-linie);
}
.foto-weg { top: 0; right: 0; }
.foto-griff { right: 0; bottom: calc(var(--tippflaeche) + 1px); font-size: 1.2rem; cursor: grab; touch-action: none; }
.foto-knoepfe { display: flex; gap: 1px; }
.foto-knoepfe .knopf { flex: 1 1 0; min-width: var(--tippflaeche); padding: 0; }
/* ◂ beim ersten und ▸ beim letzten Foto sind abgeschaltet (disabled) und sehen so aus: blass auf grauer Fläche,
   ohne Rahmenfarbe (Abnahme Schritt 9, Fund F). Ein abgeschalteter Knopf braucht keinen Kontrast (WCAG 1.4.3). */
.foto-knoepfe .knopf:disabled { border-color: var(--linie); background: var(--papier-leise); opacity: 0.4; }
.kamera-rueckgaengig { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.foto-gezogen { opacity: 0.5; }
.foto-ziel { outline: 2px dashed var(--wolke); outline-offset: 2px; }
.kamera-pdf-zusammenfassung { font-size: 0.88rem; color: var(--tinte-leise); }

/* --- Sprachnachricht (sprache.js, DESIGN.md 7.5) ------------------------------------------ */

.sprachknopf {
  flex: none;
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  padding: 0;
  border-radius: 50%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.sprachknopf[aria-pressed="true"] { background: var(--wolke); color: var(--papier); }
.aufnahme {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-height: var(--tippflaeche);
  padding: 0.25rem 0.5rem;
  background: var(--wolke-flaeche);
  border-left: 3px solid var(--wolke);
  font-size: 0.9rem;
}
.aufnahme-punkt::before { content: "●"; color: var(--wolke-tief); }
.aufnahme-zeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.aufnahme-grenze { color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.aufnahme-hilfe { flex: 1 1 8rem; color: var(--tinte-leise); }
.aufnahme-verwerfen .aufnahme-hilfe { color: var(--achtung); font-weight: 700; }

.sprachnachricht {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 22rem;
  margin: 0.25rem 0;
}
.sprachnachricht audio { width: 100%; }
.sprachnachricht-spielen { border-radius: 50%; padding: 0; }
.sprachnachricht-lauf { flex: 1 1 auto; min-width: 4rem; accent-color: var(--wolke); }
.sprachnachricht-zeit { flex: none; min-width: 2.6rem; font-size: 0.85rem; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }

/* --- Nachrichten wie Slack (faeden.js, DESIGN.md 7.5) ------------------------------------- */

.faeden { display: grid; gap: var(--abstand); }
/* Handy: der geöffnete Thread ist eine eigene Seite, der Hauptverlauf tritt zurück. */
.faeden[data-faden-offen] > .faeden-verlauf { display: none; }
.verlauf { margin: 0; padding: 0; list-style: none; }
.nachricht { padding: 0.75rem 0; border-bottom: 1px solid var(--linie); }
.nachricht:last-child { border-bottom: 0; }
.nachricht-kopf { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; font-size: 0.88rem; }
.nachricht-wer { font-weight: 700; color: var(--tinte); }
.nachricht-wann { color: var(--tinte-leise); }
.nachricht-text { margin: 0.2rem 0 0; white-space: pre-line; }
.nachricht-neu { border-left: 3px solid var(--wolke); padding-left: 0.6rem; }
.antworten-verweis {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--tippflaeche);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.antworten-verweis[aria-current="true"] { text-decoration: underline; }
.faden-kopf { padding-bottom: 0.5rem; border-bottom: 1px solid var(--wolke-linie-leise); }
/* „✕ Thread schließen“ (faeden.js) gilt nur für die rechte Spalte, also breit. Schmal ist der Thread eine eigene
   Seite mit „← Nachrichten“ — ein zweiter Rückweg darüber wäre doppelt (Abnahme Schritt 9, Fund D). */
.faeden-thread [data-faden-schliessen] { display: none; }
.faden-antworten { margin: 0 0 0 0.75rem; padding: 0; list-style: none; }
.anhaenge { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0; padding: 0; list-style: none; }
.anhang {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--wolke-linie);
  background: var(--papier);
  font-size: 0.85rem;
}

.antwortfeld {
  position: sticky;
  bottom: calc(var(--navigation-hoehe) + env(safe-area-inset-bottom));
  margin-top: var(--abstand);
  padding: 0.5rem 0;
  background: var(--papier-leise);
  border-top: 1px solid var(--wolke-linie-leise);
}
.antwortfeld-zeile { display: flex; align-items: flex-end; gap: 0.5rem; }
.antwortfeld-zeile .feld { flex: 1 1 auto; margin: 0; }
.antwortfeld textarea { min-height: var(--tippflaeche); max-height: 12rem; resize: none; }
/* Wie WhatsApp: leeres Feld zeigt das Mikrofon, geschriebener Text den Sendeknopf. */
.antwortfeld[data-leer="ja"] [data-senden-text] { display: none; }
.antwortfeld[data-leer="nein"] .sprachknopf { display: none; }

.anhang-wahl { margin: 0.35rem 0 0; font-size: 0.9rem; }
.anhang-wahl > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche);
  color: var(--wolke-tief);
  font-weight: 600;
  cursor: pointer;
}
.anhang-wahl ul { max-height: 14rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.anhang-wahl label { display: flex; align-items: center; gap: 0.5rem; min-height: var(--tippflaeche); }
.anhang-wahl input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--wolke); }

/* --- Breit: ab 46 rem ------------------------------------------------------------------- */

@media (min-width: 46rem) {
  .seite { padding-bottom: calc(2 * var(--abstand)); }
  .spalten { grid-template-columns: 1fr 1fr; }
  .navigation {
    position: sticky;
    top: 3.25rem;
    bottom: auto;
    border-top: 0;
    border-bottom: 1px solid var(--wolke-linie-leise);
    padding: 0 var(--rand);
  }
  .navigation li { flex: none; }
  .navigation a {
    flex-direction: row;
    min-height: var(--tippflaeche);
    padding: 0 0.9rem;
    font-size: 0.9rem;
    border-top: 0;
    border-bottom: 3px solid transparent;
  }
  .navigation a[aria-current="page"] { border-bottom-color: var(--wolke); }
  .knopf-breit, .knopf-abmelden { display: inline-flex; width: auto; }
  .faeden[data-faden-offen] { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
  .faeden[data-faden-offen] > .faeden-verlauf { display: block; }
  .faeden-thread { position: sticky; top: 7rem; max-height: calc(100vh - 8rem); overflow-y: auto; }
  .antwortfeld { bottom: 0; }
  .faeden-thread [data-faden-schliessen] { display: inline-flex; }
}

/* --- Bewegung und Druck ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media print {
  .trainingsleiste, .navigation, .kopfleiste, .knopf, .antwortfeld { display: none !important; }
  body { background: var(--papier); }
  .karte { border: 0; padding: 0; }
}