/* Social Media Dashboard (Modul elina-vorschau) -- Token-System.
 *
 * GRUNDSATZ: Die HUELLE ist absichtlich neutral. Beurteilt werden soll die
 * Wirkung des POSTS, nicht die des Werkzeugs -- ein markanter Rahmen faerbt
 * genau das Urteil ein, das hier gefaellt wird. Deshalb genau EIN Akzent
 * (neutral-blau, nur auf Handlung), sonst ein Grau-Kontinuum.
 *
 * Uebernommen ist die strukturelle Disziplin des Design-Meisters:
 * modulare Typo-Skala als Token (9 Groessen), 8pt-Spacing-Grid, EIN
 * Radius-Token, Button-Tokens, keine freien Werte im Dokument.
 *
 * KEIN Instagram-Branding: keine Wortmarke, kein Logo, keine
 * markenrechtlich geschuetzten Glyphen. Nachgebaut sind Layout, Masse und
 * Wirkung -- das ist erlaubt, das andere nicht.
 */

/* Die Tokens (:root) stehen seit 2026-09-10 in system.css -- EINE Staffel,
   ein Abstandsmass, eine Palette. Hier stehen nur noch Bauteile. */

/* Grundlage, Kopf, Bereichswahl, Kanal-Reiter, Unternavigation und Werkzeug-
   zeile: seit 2026-09-10 Bausteine in system.css (Grossjob dashboard-standard).
   Die alten Regeln standen hier und hielten JEDE Seite auf 430 px Breite --
   das war die gemessene Ursache fuer 'Inhalt in einer schmalen Spalte' und
   fuer die vierzeilig umbrechende Navigation. */
.p-konto--offen { color: var(--c-warn-text); }

/* --- Lagebericht ------------------------------------------------------ */
.lage dl { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-4);
  margin: 0; font-size: var(--t-13); }
.lage dt { color: var(--c-text-leise); }
.lage dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

/* --- Tages-Trenner (die Reihenfolge ist die Kernanforderung) ---------- */
.tag {
  font-size: var(--t-12); text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-text-leise); font-weight: 600;
  margin: var(--s-8) var(--s-2) var(--s-2);
}
.tag:first-of-type { margin-top: 0; }

/* --- Der Post-Nachbau ------------------------------------------------- */
.post {
  background: var(--c-flaeche);
  border: 1px solid var(--c-linie);
  border-radius: var(--r);
  margin: 0 var(--s-2) var(--s-6);
  overflow: hidden;
}

/* Kopfzeile: Kreis + Name + Datum. Bewusst OHNE Logo/Wortmarke. */
.p-kopf { display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); }
.p-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  background: linear-gradient(135deg, #cfd8e3, #9fb0c4);
}
.p-konto { font-size: var(--t-13); font-weight: 600; line-height: 1.2; }
.p-termin { font-size: var(--t-11); color: var(--c-text-leise); }
.p-status {
  margin-left: auto; font-size: var(--t-11); padding: 2px var(--s-2);
  border-radius: 999px; border: 1px solid var(--c-linie);
  color: var(--c-text-leise); white-space: nowrap;
}

/* Medienflaeche: EXAKT das Zielverhaeltnis. Was hier abgeschnitten ist,
 * ist live auch abgeschnitten -- das ist der ganze Zweck. */
.p-medien { position: relative; background: #000; }
.rahmen {
  position: relative; width: 100%;
  aspect-ratio: var(--ar, 4 / 5);
  overflow: hidden;
  background: #000;
}
.rahmen img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ganzbild-Ansicht: zeigt, was der Beschnitt wegnimmt */
.rahmen.ganz img { object-fit: contain; }

.zaehler {
  position: absolute; top: var(--s-2); right: var(--s-2);
  background: rgba(0,0,0,.65); color: #fff;
  font-size: var(--t-11); padding: 2px var(--s-2); border-radius: 999px;
}
.masse {
  position: absolute; bottom: var(--s-2); left: var(--s-2);
  background: rgba(0,0,0,.65); color: #fff;
  font-size: var(--t-11); padding: 2px var(--s-2); border-radius: var(--r);
  font-variant-numeric: tabular-nums;
}
.herkunft {
  position: absolute; bottom: var(--s-2); right: var(--s-2);
  font-size: var(--t-11); padding: 2px var(--s-2); border-radius: var(--r);
  color: #fff;
}
.herkunft.eingefroren { background: rgba(31,92,55,.9); }
.herkunft.goldstandard { background: rgba(29,111,208,.9); }
.herkunft.render { background: rgba(214,69,69,.95); }

/* Ein FEHLENDER Platz. Er wird gezeigt, nicht weggelassen -- ein Post, der
 * hier vollstaendig aussieht und live unvollstaendig waere, ist der Fehler,
 * den dieses Werkzeug abstellt. */
.fehlt {
  width: 100%; aspect-ratio: var(--ar, 4 / 5);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s-2);
  background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 10px,
              #e9e9e9 10px, #e9e9e9 20px);
  color: var(--c-hart-text); text-align: center; padding: var(--s-4);
}
.fehlt-titel { font-size: var(--t-16); font-weight: 600; }
.fehlt-text { font-size: var(--t-12); color: var(--c-text-leise);
  max-width: 32ch; }

/* Karussell: waagerecht wischen, wie am Telefon */
.spur {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.spur::-webkit-scrollbar { display: none; }
.spur > * { flex: 0 0 100%; scroll-snap-align: start; }

.punkte { display: flex; justify-content: center; gap: var(--s-1);
  padding: var(--s-2) 0 0; }
.punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--c-linie); }
.punkt.an { background: var(--c-akzent); }

/* Blaetter-Knoepfe der Liste (EL-20260901-6dd45ebb).
 *
 * EIGENER KLASSENNAME, ausdruecklich nicht `.pfeil`. Eine Regel auf der
 * blossen Klasse `.pfeil` war der Fehler aus EL-20260827-905c9b2c: sie griff
 * bis auf die dekorative Teilen-Form `<span class="form pfeil">` der
 * Aktionsleiste durch und machte daraus einen weissen Schein-Knopf.
 * `.spur-knopf` kann nichts anderes treffen -- die Klasse gibt es sonst
 * nirgends im Baum.
 *
 * Bezug ist `.p-medien` (Zeile 360, `position: relative`), also derselbe
 * Kasten wie beim Zaehler. NICHT `.spur`: die rollt, ein Knopf darin wuerde
 * mitrollen und waere nach der ersten Karte aus dem Bild. */
.p-medien > .spur-knopf {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.85); color: #161616; cursor: pointer;
  font-size: var(--t-21); line-height: 1; display: grid; place-items: center;
  z-index: 2;
}
.p-medien > .spur-knopf:hover { background: #fff; }
.spur-knopf--zurueck { left: var(--s-3); }
.spur-knopf--vor { right: var(--s-3); }

/* Handlungsreihe: abstrakte Formen, KEINE Instagram-Glyphen */
.p-reihe { display: flex; gap: var(--s-4); padding: var(--s-3) var(--s-4) 0;
  color: var(--c-text-leise); }
.form { width: 18px; height: 18px; border: 1.6px solid currentColor; }
.form.herz { border-radius: 50% 50% 4px 50%; transform: rotate(45deg); }
.form.blase { border-radius: 50% 50% 50% 4px; }
/* TEILEN-FORM (EL-20260901-6dd45ebb).
 *
 * Bis hierher stand hier `border-radius: 2px` und derselbe clip-path auf der
 * geerbten Regel `.form { border: 1.6px solid currentColor }` -- also ein
 * RAHMEN, aus dem ein Pfeil ausgeschnitten wird. Das kann nicht aufgehen:
 * sichtbar bleiben nur die Rahmenpixel, die INNERHALB des Vielecks liegen.
 * Dessen Kanten laufen aber diagonal quer durch die durchsichtige Mitte, und
 * so ueberlebten nur drei Splitter -- zwei winzige Ecken links und eine
 * Spitze rechts. Gemessen: 51 Farbpixel gegen 905 (Herz), 912 (Blase) und
 * 694 (Merken), also 5,6 % der Nachbarn. Auf dem Schirm war an der Stelle
 * ein weisser Fleck -- Elinas Befund 3.
 *
 * Der Umriss entsteht darum jetzt aus zwei Flaechen: die aeussere in der
 * Textfarbe, die innere (`::after`, um 1,7 px eingerueckt) in der Farbe der
 * Karte. Uebrig bleibt genau der Rand dazwischen -- ein Umriss von der
 * Staerke der Nachbar-Icons, in `currentColor` wie sie.
 *
 * ACHTUNG BEI WIEDERVERWENDUNG: die innere Flaeche ist die KARTENFARBE, kein
 * Loch. `.form.pfeil` steht heute nur in den beiden Aktionsleisten
 * (vorschau.html, beitrag.html) auf `.post`/`.beitrag`, beide
 * `var(--c-flaeche)`. Auf dunklem Grund -- etwa in `.hover-wert` des Rasters,
 * wo heute nur Herz und Blase stehen -- muesste die innere Farbe mitwandern.
 */
.form.pfeil { border: 0; position: relative; background: currentColor;
  clip-path: polygon(0 0,100% 50%,0 100%,22% 50%); }
.form.pfeil::after { content: ""; position: absolute; inset: 1.7px;
  background: var(--c-flaeche);
  clip-path: polygon(0 0,100% 50%,0 100%,22% 50%); }
.form.merken { margin-left: auto; border-radius: 2px;
  clip-path: polygon(0 0,100% 0,100% 100%,50% 74%,0 100%); }

/* Caption: Umbruch und Kuerzung wie im Original */
.p-text { padding: var(--s-3) var(--s-4) var(--s-4); font-size: var(--t-13);
  line-height: 1.5; }
.p-text .konto { font-weight: 600; }
/* ABSAETZE (EL-20260901-6dd45ebb). Der Plan-of-Record fuehrt die Caption MIT
 * ihren Umbruechen -- fuer RF-E9513B 22 Stueck. HTML faltet die zu
 * Leerzeichen zusammen, solange `white-space` normal ist; gemessen wurden so
 * 11 von 12 sichtbaren Umbruechen verloren, aus Elinas Absaetzen wurde ein
 * durchgehender Block.
 * `pre-wrap` steht bewusst an `.cap`/`.rest` und NICHT an `.p-text`: der
 * Kasten enthaelt auch die Einrueckung der Vorlage, die dann mitgedruckt
 * wuerde. Die Beitragsseite loest dasselbe seit je ueber `.caption p`
 * (Zeile 812) -- nur die Liste hatte es nie. */
.p-text .cap, .p-text .rest { white-space: pre-wrap; }
.p-text .rest { display: none; }
.p-text .rest.auf { display: inline; }
.mehr {
  background: none; border: 0; padding: 0; margin-left: var(--s-1);
  color: var(--c-text-leise); font-size: var(--t-13); cursor: pointer;
  font-family: inherit;
}
.p-text .hashtags { color: var(--c-akzent); }
.leer-text { color: var(--c-hart-text); font-style: italic; }

/* --- Befunde ---------------------------------------------------------- */
.befunde { padding: 0 var(--s-4) var(--s-3); display: grid; gap: var(--s-2); }
.befund { border-radius: var(--r); padding: var(--s-2) var(--s-3);
  font-size: var(--t-12); border: 1px solid; }
.befund.hart { background: var(--c-hart-grund); border-color: var(--c-hart-linie);
  color: var(--c-hart-text); }
.befund.weich { background: var(--c-warn-grund); border-color: var(--c-warn-linie);
  color: var(--c-warn-text); }
.befund b { display: block; font-size: var(--t-13); }

/* --- Bestandteile-Leiste (Bild/Video/Musik/Text) ---------------------- */
.teile { display: flex; flex-wrap: wrap; gap: var(--s-1);
  padding: 0 var(--s-4) var(--s-3); }
.teil { font-size: var(--t-11); padding: 2px var(--s-2); border-radius: 999px;
  border: 1px solid var(--c-linie); color: var(--c-text-leise); }
.teil.da { border-color: var(--c-gut-linie); color: var(--c-gut-text);
  background: var(--c-gut-grund); }
.teil.ohne { border-style: dashed; }

/* --- Fassung + Urteil ------------------------------------------------- */
.fassung {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-linie-zart);
  font-size: var(--t-12); color: var(--c-text-leise);
}
.pill { padding: 2px var(--s-2); border-radius: 999px; font-size: var(--t-11);
  border: 1px solid var(--c-linie); }
.pill.belegt { background: var(--c-gut-grund); border-color: var(--c-gut-linie);
  color: var(--c-gut-text); }
.pill.offen { background: var(--c-warn-grund); border-color: var(--c-warn-linie);
  color: var(--c-warn-text); }
.pill.abweichend { background: var(--c-hart-grund); border-color: var(--c-hart-linie);
  color: var(--c-hart-text); }

.urteil { padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--c-linie-zart); }
.urteil-stand { font-size: var(--t-12); margin-bottom: var(--s-2); }
.urteil-stand.so { color: var(--c-gut-text); }
.urteil-stand.nicht_so { color: var(--c-hart-text); }
.urteil-stand.ueberholt { background: var(--c-warn-grund);
  border: 1px solid var(--c-warn-linie); color: var(--c-warn-text);
  padding: var(--s-2) var(--s-3); border-radius: var(--r); }

.knopfreihe { display: flex; gap: var(--s-2); }
.knopf {
  flex: 1; font: 600 var(--t-14)/1 inherit; font-family: inherit;
  padding: var(--s-3); border-radius: var(--r); cursor: pointer;
  border: 1px solid var(--c-linie); background: var(--c-flaeche);
  color: var(--c-text);
}
.knopf.ja { border-color: var(--c-gut-linie); color: var(--c-gut-text); }
.knopf.ja:hover { background: var(--c-gut-grund); }
.knopf.nein { border-color: var(--c-hart-linie); color: var(--c-hart-text); }
.knopf.nein:hover { background: var(--c-hart-grund); }
.bemerkung {
  width: 100%; margin-top: var(--s-2); padding: var(--s-2);
  border: 1px solid var(--c-linie); border-radius: var(--r);
  font: var(--t-13)/1.4 inherit; font-family: inherit; resize: vertical;
}

/* Die Regel unter dem Eingabefeld. Sie ist LEISE gesetzt, aber nicht
   versteckt: sie erklaert, warum gleich ein Beitrag verschwinden wird.
   Wer sie erst nach dem Klick liest, liest sie zu spaet. */
.bemerkung-regel { margin: var(--s-2) 0 0; font-size: var(--t-12);
  line-height: 1.45; }

/* Der eingeblendete Ausgeblendete. Gedaempft, damit er sich vom Arbeitsvorrat
   unterscheidet -- aber vollstaendig bedienbar: das Urteilsfeld bleibt
   unangetastet, sonst waere die Ausblendung eine Einbahnstrasse. */
.post--ausgeblendet { opacity: .72; border-style: dashed; }
.ausgeblendet-marke {
  margin: 0; padding: var(--s-2) var(--s-4);
  background: var(--c-warn-grund); color: var(--c-warn-text);
  border-bottom: 1px solid var(--c-warn-linie);
  font-size: var(--t-12); line-height: 1.45;
}

/* --- Die Seitenkarte --------------------------------------------------
 * `.mitte` + `.karte` ist die Bauform "eine Karte IST die Seite": Anmelden,
 * Passwort setzen, Quittungen, Rueckfragen. Bis zum 2026-09-17 war sie
 * ausschliesslich die ANMELDEFORM -- 380 px breit, mittig im Bild -- und
 * jede Seite, die sie benutzte, erbte das mit.
 *
 * WARUM DIE VORGABE SEIT DEM 2026-09-17 UMGEDREHT IST (Auftrag
 * EL-20260917-cc77b88c, Elina Gerlinger, ihr Wortlaut):
 *
 *   "bitte diesmal nicht nur diese eine Seite reparieren, sondern
 *   systematisch alle Seiten auflisten und pruefen die die gemeinsame
 *   schmale Kartenform nutzen ... und alle Nicht-Anmelde-Seiten davon auf
 *   die breite Darstellung umstellen ... damit nicht jede betroffene Seite
 *   einzeln nachgemeldet werden muss."
 *
 * Der Tag davor ist der Beleg: `einreichen.html` wurde einzeln geweitet
 * (EL-20260917-6f78fbb2, eigener `<style>`-Block in der Seite), und keinen
 * Tag spaeter meldete Elina dieselbe Quetschung auf `/einplanen`. Eine
 * Vorgabe, die man je Seite abwaehlen muss, wird genau so oft vergessen,
 * wie es Seiten gibt.
 *
 * DESHALB: SCHMAL IST JETZT DIE AUSNAHME UND SAGT IHREN NAMEN.
 *   .karte                 bleibt bei 380 px -- das ist der KASTEN AUF einer
 *                          Seite (`<section class="karte">` im Dashboard),
 *                          der davon unberuehrt bleibt.
 *   .mitte > .karte        ist die SEITENKARTE. Sie nutzt die Seitenbreite.
 *   .mitte--anmeldung      ist die Anmeldeform: schmal und mittig. Sie steht
 *                          auf `anmelden.html`, `setzen.html` und
 *                          `neuer-link.html` -- genau den drei Seiten, die
 *                          `vorschau_web` VOR dem Sitzungs-Riegel
 *                          ausliefert, also ohne Anmeldung zu sehen sind.
 *
 * Eine NEUE Seite mit dieser Bauform ist damit ab ihrer ersten Zeile breit,
 * ohne dass jemand daran denken muss. Bewacht wird beides -- die Breite der
 * Inhaltsseiten UND die Schmalheit der Anmeldeform -- von
 * `pruefungen/probe_kartenform_breit.py`; sie sucht die Seiten selbst und
 * haelt die Marke gegen den Sitzungs-Riegel im Dienst.
 *
 * BREIT HEISST NICHT "ZEILEN QUER UEBER DEN MONITOR": Fliesstext, Meldungen
 * und Eingabefelder behalten unten ihr lesbares Mass. Was die Breite nutzt,
 * sind die BLOECKE. */
.mitte { display: block; padding: var(--s-4); }
.karte {
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  border-radius: var(--r); padding: var(--s-6); width: 100%;
}
/* Die Seitenkarte: der Rahmen der Seite, nicht die Breite eines Anmeldefelds. */
.mitte > .karte { max-width: var(--b-seite); margin: 0 auto; }
/* Fliesstext bleibt auf lesbarer Zeilenlaenge -- eine 1200 px lange Zeile
   ist der zweite Weg, eine Seite unlesbar zu machen.

   GEKAPPT WIRD DER TEXT, NICHT SEIN KASTEN, und das ist der Unterschied
   zwischen lesbar und wieder gequetscht: eine Meldung (`.hinweis`,
   `.fehler`) am Deckel festzumachen kappt den Kasten UND -- um seinen
   Innenrand verkuerzt -- den Text darin ein zweites Mal. Gemessen am
   2026-09-17 an der Kettenantwort auf `/einplanen`: die laengste Feldzeile
   ("Termin : Donnerstag, 18.09.2026, 09:00 Uhr (Europe/Berlin)") braucht
   427 px, der doppelt gekappte Kasten liess 424 uebrig -- und brach sie um.
   Dieselbe Zeile, EINMAL gekappt, hat 567 px und passt.

   `.lesebreite` ist der Griff dafuer an einem Block, der kein <p> ist. */
.mitte > .karte p, .mitte > .karte li,
.mitte > .karte .lesebreite { max-width: var(--b-lesen); }
/* UND DASSELBE FUER DEN KASTEN AUF EINER SEITE. Bis zum 2026-09-17 war das
   unnoetig: `.karte` deckelte bei 380 px, da wurde nichts zu lang. Mit dem
   weggenommenen Deckel liefen die Absaetze auf `/gelebt` auf 1150 px --
   150 Zeichen je Zeile, und das ist der Fehler von der anderen Seite.
   Absaetze und Listen DIREKT in der Karte; was tiefer sitzt (Raster,
   Tabellen, Kacheln), bleibt unberuehrt -- dort ordnet ein Layout, und ein
   Deckel von aussen wuerde es zerschneiden. */
.karte > p, .karte > ul, .karte > ol { max-width: var(--b-lesen); }
/* Eingabefelder und Knoepfe behalten ihr handliches Mass. `.karte input`
   und `.karte button` setzen `width: 100%` -- ohne diesen Deckel waere ein
   Titelfeld 1150 px breit und ein Absende-Knopf ein Farbbalken quer ueber
   den Monitor. Das ist keine Verbesserung gegenueber 332 px, sondern die
   andere Haelfte desselben Fehlers; gemessen am 2026-09-17 am Knopf "Frage
   abschicken" auf einer Melder-Detailseite.
   Es ist dieselbe Erfahrung, die weiter unten schon einmal Arbeit gekostet
   hat (`.karte .veroeff-testreel-knopf`, "vollbreiter Farbbalken") -- dort
   je Knopf geheilt, hier einmal fuer alle. Wer einen Knopf ueber die volle
   Breite WILL, sagt es an seiner eigenen Klasse. */
.karte input, .karte select, .karte button { max-width: var(--b-post); }
.karte textarea { max-width: var(--b-lesen); }
/* Die ANMELDEFORM -- schmal und mittig, ausdruecklich und nicht per Vorgabe.
   Sie steht nach der Seitenkarten-Regel, damit sie sie schlaegt. */
.mitte--anmeldung { min-height: 100dvh; display: grid; place-items: center; }
.mitte--anmeldung > .karte { max-width: 380px; margin: 0; }
.karte h1 { font-size: var(--t-21); margin: 0 0 var(--s-2); }
.karte p { color: var(--c-text-leise); font-size: var(--t-13);
  margin: 0 0 var(--s-4); }
.karte label { display: block; font-size: var(--t-12); font-weight: 600;
  margin: var(--s-3) 0 var(--s-1); }
.karte input {
  width: 100%; padding: var(--s-3); border: 1px solid var(--c-linie);
  border-radius: var(--r); font: var(--t-16)/1 inherit; font-family: inherit;
}
/* Auswahlfeld und Textfeld sind DIESELBE Art Baustein wie das Eingabefeld:
   gleiche Flaeche, gleiche Linie, gleiche Schrift, gleiches Mass. Bis
   2026-09-11 trugen sie den Browser-Standard (schmales Auswahlfeld, Textfeld
   in Monospace, 2 px Rand) -- zwei Bauformen in einer Maske, gemessen am
   Formular "Eigenen Post einreichen" (Job ...-elina-dashboard-sprachfeld). */
.karte select, .karte textarea {
  width: 100%; padding: var(--s-3); border: 1px solid var(--c-linie);
  border-radius: var(--r); font: var(--t-16)/1.3 inherit; font-family: inherit;
  background: var(--c-flaeche); color: var(--c-text);
}
.karte textarea { resize: vertical; min-height: calc(var(--s-16) * 3); }
.karte button {
  width: 100%; margin-top: var(--s-4); padding: var(--s-3);
  background: var(--c-akzent); color: #fff; border: 0;
  border-radius: var(--r); font: 600 var(--t-14)/1 inherit;
  font-family: inherit; cursor: pointer;
}
.fehler {
  background: var(--c-hart-grund); border: 1px solid var(--c-hart-linie);
  color: var(--c-hart-text); padding: var(--s-2) var(--s-3);
  border-radius: var(--r); font-size: var(--t-13); margin-bottom: var(--s-3);
}

/* --- Breiter Bildschirm: der Post bleibt telefonbreit -----------------
 * Instagram wird am Telefon gesehen. Eine Vorschau, die sich am Desktop
 * breit zieht, zeigt eine Wirkung, die es live nie gibt. Der Nachbau
 * behaelt darum seine Breite; der Platz daneben bleibt leer. */

/* --- Die Post-Kacheln NEBENEINANDER ----------------------------------
 * Auftrag EL-20260827-bc20a55e (Elina): "Post-Kacheln nebeneinander
 * anordnen (Grid-Layout, 3 Karten pro Reihe) statt der aktuellen
 * einspaltigen Untereinander-Darstellung. Das erleichtert den Ueberblick
 * ueber viele Posts gleichzeitig."
 *
 * DAS IST EINE AUSNAHME ZUR REGEL DIREKT DARUEBER, KEIN WIDERSPRUCH.
 * "Der Post bleibt telefonbreit" hatte einen Grund: eine Kachel, die sich
 * am Desktop breitzieht, zeigt eine Wirkung, die es live nie gibt. Dieser
 * Grund gilt fuer die EINZELNE Kachel und bleibt hier gewahrt -- die Spalte
 * wird NIE breiter als `--b-post`. Was sich aendert, ist nur, wie viele
 * dieser telefonbreiten Kacheln nebeneinander Platz haben. Der Nachbau
 * wird nicht breiter, die Flaeche wird voller.
 *
 * ALLES IST UNTER `.ansicht-nebeneinander` GESCHACHTELT, weil `.huelle`,
 * `.kopf-innen` und `.reiter` mit fuenf weiteren Seiten geteilt sind.
 *
 * DER BESCHNITT BLEIBT EHRLICH. `.rahmen` und `.fehlt` massen sich ueber
 * `aspect-ratio: var(--ar)`, nicht ueber feste Pixel: schmalere Spalten
 * skalieren das Bild, sie schneiden nichts zusaetzlich ab. Was hier
 * weggeschnitten ist, ist live weggeschnitten -- unveraendert.
 * NICHT unveraendert ist der UMBRUCH DER CAPTION: unterhalb von 1380 px
 * Fensterbreite sind die Spalten schmaler als ein Telefon, der Text bricht
 * dann frueher um als live. Wer eine Caption Zeile fuer Zeile beurteilen
 * will, oeffnet den Beitrag einzeln oder macht das Fenster breit.
 */
/* UNTERHALB VON 720 px STEHT HIER ABSICHTLICH NICHTS.
 * `.postraster` ist dort ein gewoehnliches <div> ohne eine einzige Regel,
 * also folgenlos: die Kacheln behalten ihre eigenen Aussenabstaende und
 * stehen untereinander wie bisher. Das ist nachgemessen -- die
 * Bildschirmfotos bei 390 px sind vorher und nachher Pixel fuer Pixel
 * gleich (`nachweis/messen.py`). Ein erster Entwurf hatte `display: grid`
 * ohne Fenstergrenze gesetzt; das war am Telefon weiterhin einspaltig und
 * sah deshalb richtig aus, hat den Kacheln aber ihren seitlichen Rand
 * genommen. Elinas Anliegen ist der Ueberblick am grossen Bildschirm --
 * das Telefon hat kein Problem, das hier zu loesen waere.
 */
/* DIE SCHWELLE IST 860 px UND NICHT 720 px -- KORREKTUR VOM 2026-08-27
 * (Auftrag EL-20260827-2ed50b53, Elinas Freigabe).
 *
 * Bei 720 px passen zwei telefonbreite Kacheln NICHT nebeneinander: zwei mal
 * 430 plus Spalte plus Rand braucht rund 860 px. `minmax(0, ...)` weigert
 * sich nicht, sondern quetscht -- die Kacheln wurden bei 720 px auf 350 px
 * gedrueckt, 62 px SCHMALER als die heutige einspaltige Ansicht. Genau das
 * ist der Bruch mit Elinas Zusage "telefonbreite Kacheln": 350 px sind nicht
 * telefonbreit.
 *
 * Warum das vorher niemandem auffiel: gemessen wurde bei 1024/1280/1440. Bei
 * 1024 ist der Deckel schon wieder erreicht (428 px), die Senke liegt
 * vollstaendig zwischen zwei Stuetzstellen. Ein dichter Durchlauf in
 * 20-px-Schritten (`nachweis/messen.py --dicht`) macht sie sichtbar.
 *
 * 860 px ist gemessen, nicht gerechnet: bei 860 px ist die Kachel 420 px
 * breit (8 px breiter als heute), bei 840 px waere sie 410 px (2 px
 * schmaler). Unterhalb der Schwelle bleibt es bei einer Spalte -- und eine
 * Spalte ist nie schmaler als heute, weil sie die heutige IST.
 */
@media (min-width: 860px) {
  .ansicht-nebeneinander .postraster {
    display: grid;
    align-items: start;       /* ungleich hohe Kacheln nicht auf Zeilenhoehe
                                 strecken -- sonst klaffen die Raender */
    justify-content: center;
    gap: var(--s-6) var(--s-4);
    grid-template-columns: repeat(2, minmax(0, var(--b-post)));
  }

  /* DER TAGES-TRENNER WAR DER GRUND, WARUM DAS RASTER NICHT WIRKTE --
   * KORREKTUR VOM 2026-09-16 (Auftrag EL-20260827-bc20a55e, Elina:
   * „Post-Kacheln nebeneinander, 3 Karten pro Reihe, statt der aktuellen
   * einspaltigen Untereinander-Darstellung").
   *
   * Hier stand `grid-column: 1 / -1` -- der Trenner nahm eine ganze Zeile.
   * Das ist fuer sich richtig, hat aber genau das Nebeneinander aufgehoben,
   * das die drei Spalten daneben herstellen: NACH jedem Trenner faengt eine
   * neue Zeile an, und ein Tag mit EINEM Beitrag bekommt deshalb eine Zeile
   * mit EINER Kachel. `grid-template-columns` meldete drei Spalten, die
   * Flaeche sah trotzdem einspaltig aus -- deshalb war der Befund per
   * Spaltenzahl allein nicht zu sehen.
   *
   * GEMESSEN, NICHT GESCHAETZT (2026-09-16, `lade_posts()`): von 58 Tagen im
   * Plan tragen 46 GENAU EINEN Beitrag, 9 tragen zwei, 3 tragen drei. Auf
   * der Flaeche, die Elina sieht (Status `held`/`queued`, Kanal
   * qiblanco_de), sind es 8 Beitraege auf 6 Tagen. Mit dem zeilenbreiten
   * Trenner ergibt das 6 Zeilen -- fuenf davon mit einer einzigen Kachel.
   * Die einspaltige Darstellung war also kein fehlendes Raster, sondern ein
   * Raster, dem der Trenner jede Zeile nach einer Kachel abgebrochen hat.
   *
   * DIE DATUMSGLIEDERUNG GEHT DABEI NICHT VERLOREN, und das ist die
   * Bedingung, unter der diese Zeile vertretbar ist: JEDE Kachel traegt
   * ihren Termin selbst, in `.p-termin` im Kachelkopf -- durch DENSELBEN
   * Filter (`datum_kurz`) und damit zeichengleich zum Trenner
   * („Mittwoch, 16.09.2026, 19:00 Uhr"). Ausgeblendet wird eine
   * WIEDERHOLUNG, keine Auskunft. Die Sortierung nach Datum bleibt
   * unangetastet; die Kacheln stehen weiter in Plan-Reihenfolge.
   *
   * UNTERHALB VON 860 px BLEIBT DER TRENNER STEHEN. Dort gibt es gar kein
   * Raster (siehe der Block weiter oben), die Kacheln stehen untereinander
   * -- und in einer langen einspaltigen Liste ist die Tagesueberschrift ein
   * echter Wegweiser und keine Wiederholung. Diese Regel steht deshalb
   * bewusst INNERHALB der 860-px-Schwelle. */
  .ansicht-nebeneinander .postraster > .tag { display: none; }

  /* Der Termin ist im Raster die EINZIGE Datumsangabe der Kachel (der
     Tages-Trenner darueber ist weg). `--t-11` in `--c-text-leise` war als
     Beischrift unter einer bereits sichtbaren Tagesueberschrift bemessen;
     als alleiniger Traeger der Datumsangabe ist das zu leise. Eine Stufe
     lauter -- nicht mehr, damit der Kachelkopf der Nachbau bleibt, der er
     ist. Gilt nur im Raster; die schmale Ansicht behaelt ihre Beischrift.

     `--t-13` UND NICHT `--t-12`: `--t-11` und `--t-12` zeigen beide auf
     `--t-caption` (system.css:96), sind also zeichengleich 12 px -- ein
     Wechsel auf `--t-12` waere eine Zeile ohne Wirkung gewesen. `--t-13`
     (`--t-fuss`, 13 px) ist der naechste ECHTE Schritt. Das Normalgewicht
     bleibt: `.p-konto` steht daneben auf 13 px in 600, der Kontoname bleibt
     damit die erste Stimme im Kachelkopf. */
  .ansicht-nebeneinander .postraster > .post .p-termin {
    font-size: var(--t-13);
    color: var(--c-text);
  }

  /* Der Abstand kommt jetzt aus `gap`; die alten Aussenabstaende wuerden
     sich dazu addieren und die Spalten ungleich wirken lassen. */
  .ansicht-nebeneinander .postraster > .post { margin: 0; }
}

/* Ab hier drei pro Reihe -- der eigentliche Wunsch.
 *
 * DIE SCHWELLE IST 1280 px UND NICHT 1100 px -- KORREKTUR VOM 2026-08-27,
 * dieselbe Ursache wie oben. Die 1100 waren bewusst unter die volle Breite
 * (3x430 + 2x16 = 1322) gesetzt, "damit auch ein 1280er-Laptop drei Kacheln
 * zeigt". Die Absicht war richtig, der Preis war nicht gemessen: bei 1100 px
 * quetscht `minmax(0, ...)` die drei Spalten auf 354 px -- 58 px schmaler als
 * die heutige einspaltige Ansicht und deutlich unter telefonbreit.
 *
 * 1280 statt 1100 haelt die Absicht und bezahlt sie nicht mehr: bei genau
 * 1280 px ist die Kachel 416 px (2 px BREITER als heute), der 1280er-Laptop
 * bekommt seine drei Kacheln also weiterhin. Was zwischen 1100 und 1279 px
 * passiert, ist der Rueckfall auf ZWEI Kacheln nebeneinander -- die sind dort
 * 430 px breit, volle Telefonbreite. Zwei richtige Kacheln sind besser als
 * drei gequetschte; "nebeneinander" ist auch mit zweien erfuellt.
 *
 * Ergebnis der Korrektur, gemessen in 20-px-Schritten von 700 bis 1460 px:
 * die Kachel ist bei KEINER Fensterbreite schmaler als heute. Vorher galt das
 * fuer 16 von 39 gemessenen Breiten nicht.
 */
@media (min-width: 1280px) {
  .ansicht-nebeneinander .postraster {
    grid-template-columns: repeat(3, minmax(0, var(--b-post)));
  }
}

/* Die Flaeche darf so breit werden, dass drei Kacheln hineinpassen -- und
   keinen Pixel breiter. Kopfzeile und Reiterreihe ziehen mit, sonst stuende
   eine 430 px schmale Kopfzeile ueber einem 1322 px breiten Inhalt.
   `flex-wrap: wrap` an `.reiter` bleibt dabei UNANGETASTET: es ist die
   Behebung des unsichtbaren vierten Reiters, und mehr Platz ersetzt sie
   nicht -- er macht sie nur seltener noetig.
   Schwelle 860 statt 720: gleiche Grenze wie das Raster selbst, damit
   "nebeneinander" EINE Schwelle hat und nicht zwei.

   DIESE REGEL WAR VERSCHWUNDEN UND NUR IHR KOMMENTAR STAND NOCH DA --
   WIEDEREINGESPIELT AM 2026-09-16 (Auftrag EL-20260827-2ed50b53, Elinas
   Bestaetigung: "schmale, telefonbreite Kacheln nebeneinander, NICHT
   breitgezogen. Bitte einspielen.").

   WAS PASSIERT WAR: `system.css` (Oberflaechen-Standard, 2026-09-10) fuehrt
   `.huelle` mit `max-width: var(--b-seite)` = 1200 px und 24 px Innenrand je
   Seite. Beim Umbau auf diesen Standard fiel der Block hier heraus; der
   Kommentar blieb. Damit standen dem Raster nur noch 1200 - 48 = 1152 px zur
   Verfuegung -- drei Spuren brauchen aber 3x430 + 2x16 = 1322 px. `minmax(0,
   ...)` weigert sich nicht, es quetscht: die Kachel war 373 px breit.

   GEMESSEN AM LAUFENDEN DIENST, NICHT GESCHAETZT (2026-09-16, vier
   Fensterbreiten): 1024 px -> 430 px (zwei Spalten, telefonbreit), 1280 px ->
   373 px, 1440 px -> 373 px, 1920 px -> 373 px. Das Fenster breiter zu ziehen
   machte die Kachel also KLEINER als bei 1024 px und nie wieder groesser --
   57 px unter telefonbreit, an jedem Desktop, dauerhaft.

   WARUM DIE FORMEL JETZT DEN INNENRAND MITZAEHLT (`+ var(--s-6) * 2`): sie
   deckelt `.huelle` AUSSEN, das Raster steht INNEN. Die alte Fassung setzte
   1322 px aussen und liess innen 1274 px uebrig -- damals folgenlos, weil
   `.huelle` noch keinen waagerechten Innenrand hatte, seit `system.css` aber
   16 px Quetschung je Kachel. 1370 px aussen sind exakt 1322 px innen.

   WAS DAMIT NICHT REPARIERT IST, und das ist Absicht: zwischen 1280 und
   1369 px Fensterbreite bleiben drei Spuren etwas schmaler als telefonbreit
   (400 px bei 1280). Die 1280er-Schwelle ist eine gemessene Entscheidung aus
   derselben Bestaetigung -- "zwei richtige Kacheln sind besser als drei
   gequetschte" gilt weiter, und sie hoeher zu legen haette dem 1280er-Laptop
   die dritte Kachel genommen. Ab 1370 px ist die Kachel exakt telefonbreit.
   `pruefungen/probe_kachel_telefonbreit.py` misst genau das nach. */
@media (min-width: 860px) {
  .ansicht-nebeneinander .huelle,
  .ansicht-nebeneinander .kopf-innen,
  .ansicht-nebeneinander .reiter,
  .ansicht-nebeneinander .werkzeuge {
    max-width: calc(var(--b-post) * 3 + var(--s-4) * 2 + var(--s-6) * 2);
  }
}

/* Die Bloecke oberhalb der Kacheln bleiben lesbar schmal. Ueber die volle
   Rasterbreite gezogen waere "Kurz gesagt" eine 1322 px lange Zeile mit dem
   Wert ganz rechts am anderen Ende des Bildschirms.
   Schwelle 860 statt 720 -- und hier ist sie nicht nur Kosmetik: zwischen
   720 und 859 px gibt es gar kein Raster mehr, das diese Deckelung
   rechtfertigen wuerde. Mit 720 haette dieser Block "Kurz gesagt" dort von
   der Fensterbreite auf 430 px verengt, ohne dass sich sonst irgendetwas
   aendert. Unterhalb von 860 px greift jetzt KEINE einzige neue Regel. */

/* --- Die Info-Kacheln oben NEBENEINANDER: DIE REGEL STEHT NICHT MEHR HIER ---
 * Auftrag EL-20260909-bcc8a088 (Elina): "Die Info-Kacheln oben (Kurz gesagt,
 * Kennzahlen) sollen auf Desktop NEBENEINANDER dargestellt werden statt
 * untereinander - kompakte Ansicht, alles auf einen Blick. Zusaetzlich
 * sollen auch die darunter liegenden geplanten Post-Kacheln nebeneinander
 * bleiben/dargestellt werden (Fortsetzung des bestehenden Grid-Layouts)."
 *
 * DIE ZUSAGE IST ERFUELLT -- SIE WIRD NUR ANDERSWO EINGELOEST.
 * Hier standen bis zum 2026-09-10 Regeln auf `.info-kacheln`, einen
 * Behaelter um "Kurz gesagt" und den Kennzahlen-Block. Beides ist weg: der
 * Oberflaechen-Standard (`c89f20535`, Grossjob "dashboard-was-geplant-ist-
 * ist-unlesbar") hat die Startseite auf die Antwortzeile umgebaut. Seitdem
 * traegt `templates/system.css`, Baustein 12 die Zusage:
 *
 *     .antwort { display: grid; align-items: start; }
 *     @media (min-width: 860px) {
 *       .antwort { grid-template-columns: 1fr 1fr; }
 *       .antwort > .antwort-geplant { grid-column: 1 / -1; }
 *     }
 *     @media (min-width: 1280px) {
 *       .antwort { grid-template-columns: 1.15fr 1fr 1fr; }
 *     }
 *
 * Das ist MEHR als bestellt und nicht weniger: ab 1280 px stehen drei
 * Kaesten nebeneinander ("Was geplant ist", "Kurz gesagt", "Kennzahlen"),
 * im Band darunter zwei. Dieselbe Schwelle wie das Post-Raster darunter
 * (860/1280), damit "nebeneinander" EINE Grenze hat und nicht zwei.
 *
 * DER VIERTE KASTEN "Jetzt zu tun" NAHM OBEN DIE VOLLE BREITE und ist seit
 * dem 2026-09-16 weg (Elina Gerlinger, EL-20260916-109c1270). Die
 * Begruendung steht vollstaendig im Kopf von `templates/vorschau.html`; hier
 * steht sie nur, damit dieser Block nicht auf einen Kasten zeigt, den es
 * nicht mehr gibt.
 *
 * GEMESSEN AM LAUFENDEN DIENST, NICHT GESCHAETZT (2026-09-16, vier
 * Fensterbreiten): 390 px -> untereinander (Telefon, richtig so);
 * 900 px -> nebeneinander, Post-Raster 2 Spalten; 1280 px -> nebeneinander,
 * Post-Raster 3x416 px; 1440 px -> nebeneinander, Post-Raster 3x430 px.
 * `pruefungen/probe_info_kacheln_nebeneinander.py` misst genau das nach und
 * haengt als Bein in `selftest/selftest.py`.
 *
 * WER HIER `.info-kacheln` WIEDEREINSPIELT, BAUT EINE TOTE REGEL. Den
 * Behaelter gibt es im HTML nicht mehr (`templates/vorschau.html` traegt
 * `.antwort` mit `data-frage`-Abschnitten). Eine zweite Rasterregel auf
 * einen Selektor ohne Element aendert kein Pixel, sieht aber jahrelang aus
 * wie die Stelle, an der das Layout gemacht wird -- und der naechste Leser
 * sucht seinen Fehler dann hier.
 *
 * DIESER KOMMENTAR IST DIE NARBE EINES EIGENEN FEHLERS, DESHALB STEHT ER SO
 * AUSFUEHRLICH DA. Der Umbau vom 10.09. hat die Regeln entfernt und den
 * Kommentar stehen lassen; zurueck blieb ein Text, der Regeln beschrieb, die
 * es nicht mehr gab. Genau dieselbe Verwechslung hat in diesem Modul schon
 * zweimal echte Arbeit gekostet (Deckel der `.huelle`, telefonbreite
 * Post-Kacheln: "DIESE REGEL WAR VERSCHWUNDEN UND NUR IHR KOMMENTAR STAND
 * NOCH DA"). Ein Kommentar ohne seine Regel ist kein harmloser Rest -- er
 * ist eine Falschaussage mit Ortsangabe. */


/* ==========================================================================
 * Rasteransicht + Detailansicht (Job 20260821-content-creator-visuelle-
 * vorschau-instagram-prio50, 2026-08-22)
 *
 * Nachgebaut sind Layout, Masse und Wirkung von REFERENZ-1/REFERENZ-2.
 * KEIN Branding: keine Wortmarke, kein Logo, keine geschuetzten Glyphen --
 * dieselbe Grenze wie im uebrigen Dokument.
 *
 * Das Kachelverhaeltnis steht NICHT hier fest: es kommt als style-Attribut
 * aus dem Server (VORSCHAU_RASTER_RATIO), weil es eine Hypothese ist und
 * nachgezogen werden koennen muss, ohne CSS anzufassen.
 * ========================================================================== */


/* -- Konto-Wahl -- */
.marke-wahl { margin-bottom: var(--s-8); }
.marke-wahl h2 { font-size: var(--t-21); margin: 0 0 var(--s-3); }
.konto-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3); }
.konto-karte {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4); border: 1px solid var(--c-linie);
  border-radius: var(--r); background: var(--c-flaeche);
  text-decoration: none; color: inherit; transition: border-color .12s;
}
.konto-karte:hover { border-color: var(--c-akzent); }
.konto-karte--leer { background: var(--c-grund); border-style: dashed; }
.konto-sprache { font-size: var(--t-11); font-weight: 700; letter-spacing: .08em;
  color: var(--c-text-leise); }
.konto-name { font-size: var(--t-16); font-weight: 600; }
.konto-handle { font-size: var(--t-13); color: var(--c-text-leise); }
.konto-zahl { font-size: var(--t-12); margin-top: var(--s-1); }
.marke-oeffnen { margin: var(--s-3) 0 0; font-size: var(--t-13); }

/* -- Sprachpaare nebeneinander -- */
.spalten { display: grid; gap: var(--s-6); align-items: start; }
.spalten--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .spalten--2 { grid-template-columns: 1fr; } }
.spalte { min-width: 0; }
.profil-kopf { padding-bottom: var(--s-3); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-linie-zart); }
.profil-zeile { display: flex; align-items: baseline; gap: var(--s-2); }
.profil-sprache { font-size: var(--t-11); font-weight: 700; letter-spacing: .08em;
  padding: 2px var(--s-2); border-radius: 999px; border: 1px solid var(--c-linie);
  color: var(--c-text-leise); }
.profil-handle { font-size: var(--t-18); font-weight: 600; }
.profil-zahlen { font-size: var(--t-12); margin-top: var(--s-1); }

/* -- Das Raster -- */
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.kachel {
  position: relative; display: block; overflow: hidden;
  background: var(--c-linie-zart); text-decoration: none; color: inherit;
}
.kachel-medium { width: 100%; height: 100%; object-fit: cover; display: block; }
.kachel--fehlt { display: grid; place-items: center; background: var(--c-grund);
  border: 1px dashed var(--c-linie); }
.kachel-fehlt-text { display: flex; flex-direction: column; gap: 2px;
  text-align: center; font-size: var(--t-12); color: var(--c-text-leise);
  padding: var(--s-2); }

/* Typ-Symbol oben rechts (REFERENZ-1) */
.typ { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px;
  pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.form-karussell, .form-reel {
  display: block; width: 15px; height: 15px; border: 1.8px solid #fff;
  border-radius: 3px;
}
/* Karussell: zwei versetzte Blaetter */
.form-karussell { box-shadow: 3px -3px 0 -1.8px #fff, 3px -3px 0 0 #fff; }
/* Reel: Rahmen mit Dreieck */
.form-reel { position: relative; }
.form-reel::after { content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; border-left: 5px solid #fff;
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }

/* Geplant-Marke: SYMBOL, nicht Farbe (Buffers Muster) */
.planung { position: absolute; top: 8px; left: 8px; width: 16px; height: 16px;
  pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.form-uhr { display: block; width: 14px; height: 14px; border: 1.8px solid #fff;
  border-radius: 50%; position: relative; }
.form-uhr::after { content: ""; position: absolute; left: 50%; top: 20%;
  width: 1.6px; height: 38%; background: #fff; transform-origin: bottom center; }

/* Ueberfahren: Likes/Kommentare mittig (REFERENZ-1) */
.hover {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: var(--s-6); color: #fff; font-weight: 600;
  font-size: var(--t-14); background: rgba(0,0,0,.35);
  opacity: 0; transition: opacity .12s;
}
.kachel:hover .hover, .kachel:focus-visible .hover { opacity: 1; }
.hover-wert { display: inline-flex; align-items: center; gap: var(--s-1); }
.hover-wert .form { width: 15px; height: 15px; border-color: #fff; }
.raster-fuss { margin-top: var(--s-3); font-size: var(--t-12); }
.raster-leer { padding: var(--s-8) var(--s-4); text-align: center;
  border: 1px dashed var(--c-linie); border-radius: var(--r);
  background: var(--c-grund); }
.raster-leer p { margin: 0 0 var(--s-2); font-size: var(--t-13); }

/* -- Detailansicht (REFERENZ-2) -- */
.beitrag { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  border: 1px solid var(--c-linie); border-radius: var(--r);
  background: var(--c-flaeche); overflow: hidden; }
@media (max-width: 900px) { .beitrag { grid-template-columns: 1fr; } }
.beitrag-medium { position: relative; background: #000; display: grid;
  place-items: center; min-height: 420px; }
.karussell { position: relative; width: 100%; height: 100%; display: grid;
  place-items: center; }
.folie { display: none; margin: 0; width: 100%; }
.folie--aktiv { display: block; }
.folie-medium { width: 100%; max-height: 78dvh; object-fit: contain; display: block; }
.folie-fehlt { display: flex; flex-direction: column; gap: var(--s-1);
  align-items: center; justify-content: center; min-height: 420px;
  padding: var(--s-6); text-align: center; color: #fff;
  border: 1px dashed rgba(255,255,255,.35); margin: var(--s-4); }
.folie-fuss { padding: var(--s-2) var(--s-3); color: #b9b9b9;
  font-size: var(--t-11); background: rgba(0,0,0,.55); }
/* DIESE REGEL GILT NUR IM KARUSSELL. Sie stand bis 2026-08-27 auf der
 * BLOSSEN Klasse `.pfeil` -- und traf damit auch die dekorative Teilen-Form
 * der Aktionsleiste, `<span class="form pfeil">` (vorschau.html, beitrag.html).
 * Daraus wurde der Befund aus EL-20260827-905c9b2c:
 *   - aus der 18x18-Umrissform wurde eine 32x32-Flaeche mit WEISSEM Grund
 *     und `cursor: pointer` -- sie sah aus wie ein Knopf und fuehlte sich
 *     beim Ueberfahren auch so an, ohne je einer zu sein;
 *   - `position: absolute` riss sie aus der Aktionsleiste. Weil dort KEIN
 *     Vorfahr positioniert ist, bezog sich `top: 50%` auf den Anfangsblock,
 *     also auf die FENSTERHOEHE. Alle 50 Formen lagen deshalb uebereinander
 *     auf EINEM Punkt mitten im Inhalt -- bei 768 px Fensterhoehe genau auf
 *     der Zeile "Mit fehlenden Karten" im Kurz-gesagt-Kasten.
 * `.karussell` ist `position: relative` (weiter unten), der Bezug der echten
 * Karussell-Pfeile bleibt damit unveraendert. Gemessen wird beides von
 * `pruefungen/probe_knopfattrappen.py`, Arm 1/2 und die Gegenprobe Arm 4. */
.karussell .pfeil { position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.85); color: #161616; cursor: pointer;
  font-size: var(--t-21); line-height: 1; display: grid; place-items: center; }
.pfeil--zurueck { left: var(--s-3); }
.pfeil--vor { right: var(--s-3); }
.karussell .punkte { position: absolute; bottom: var(--s-6); left: 0; right: 0; }
.karussell .punkt { background: rgba(255,255,255,.45); }
.karussell .punkt.an { background: #fff; }

.beitrag-text { display: flex; flex-direction: column; min-width: 0; }
.beitrag-kopf { display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-linie-zart); }
.avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: var(--c-linie); border: 1px solid var(--c-linie); }
.konto-name-zeile { display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-14); }
.haken { width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-akzent); position: relative; }
.haken::after { content: ""; position: absolute; left: 3px; top: 5px;
  width: 3px; height: 1.6px; background: #fff; transform: rotate(45deg); }
.audio-zeile { padding: 0 var(--s-4) var(--s-2); font-size: var(--t-12); }
.caption { padding: var(--s-3) var(--s-4); font-size: var(--t-13);
  line-height: 1.5; overflow-y: auto; flex: 1 1 auto; }
.caption p { margin: 0 0 var(--s-3); white-space: pre-wrap; }
.caption-konto { float: left; margin-right: var(--s-1); }
/* `.hashtag` statt `a`: die Hashtags sind seit 2026-08-27 kein Link mehr
 * (siehe beitrag.html). Der Instagram-Blauton bleibt -- er gehoert zum
 * Nachbau des spaeteren Posts --, der Klick-Zeiger nicht. */
.hashtags .hashtag { color: var(--c-akzent); text-decoration: none; }
.alter { padding: 0 var(--s-4) var(--s-2); font-size: var(--t-11);
  text-transform: none; }
.aktionen { display: flex; gap: var(--s-4); padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-linie-zart); color: var(--c-text); }
.like-zeile { padding: 0 var(--s-4) var(--s-3); font-size: var(--t-13); }
.urteil-feld { display: block; padding: 0 var(--s-4); }
.urteil-feld textarea { width: 100%; font: inherit; font-size: var(--t-13);
  padding: var(--s-2); border: 1px solid var(--c-linie);
  border-radius: var(--r); resize: vertical; }
.urteil-knoepfe { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4) 0; }

/* -- Hinweise / Warnungen -- */
.warnung, .hinweis { border: 1px solid var(--c-warn-linie);
  background: var(--c-warn-grund); border-radius: var(--r);
  padding: var(--s-4); margin-bottom: var(--s-6); }
.hinweis { border-color: var(--c-linie); background: var(--c-grund); }
.hinweis--klein { margin-top: var(--s-6); font-size: var(--t-12); }
.warnung h2, .hinweis h2 { font-size: var(--t-16); margin: 0 0 var(--s-2); }
.warnung p, .hinweis p { margin: 0 0 var(--s-2); font-size: var(--t-13); }
.hinweis ul { margin: 0; padding-left: var(--s-4); }
.hinweis li { margin-bottom: var(--s-2); line-height: 1.5; }
.marker { display: inline-block; font-size: var(--t-11); padding: 2px var(--s-2);
  border-radius: 999px; border: 1px solid var(--c-linie); }
.marker--frage { background: var(--c-warn-grund); border-color: var(--c-warn-linie);
  color: var(--c-warn-text); }
.marker--warn { background: var(--c-warn-grund); border-color: var(--c-warn-linie); }
.marker--render { background: var(--c-warn-grund); border-color: var(--c-warn-linie); }
.marker--goldstandard { background: var(--c-gut-grund); border-color: var(--c-gut-linie); }
.marker--eingefroren { background: var(--c-gut-grund); border-color: var(--c-gut-linie); }

/* Erlaeuternder Kleintext auf den Zugangs-Seiten (Anmelden, Link anfordern,
   Passwort setzen). Job 20260824-elina-passwort-selbst-setzen: dort steht,
   wie lange ein Link gilt und wohin er geht -- eine Angabe, die die
   Empfaengerin braucht, aber nicht als Warnung gelesen werden soll. */
.klein { margin-top: var(--s-4); font-size: var(--t-12);
         color: var(--c-text-leise, #666); line-height: 1.5; }
.klein a { color: inherit; }

/* --- Stoerungsseite (seit 2026-08-25) --------------------------------
 * Sie ersetzt die Zeile "Im Log steht, was schiefging" -- eine Auskunft,
 * die genau der Person nichts nutzte, fuer die der Dienst gebaut ist:
 * Elina hat keine Server-Rechte. Traegt jetzt eine Vorgangsnummer.
 * Nur Bestands-Tokens, keine freien Werte (Grundsatz oben).
 */
.stoerung {
  max-width: var(--b-post);
  margin: var(--s-12) auto;
  padding: var(--s-6);
  background: var(--c-flaeche);
  border: 1px solid var(--c-linie);
  border-radius: var(--r);
}
.stoerung-icon {
  font-size: var(--t-32);
  color: var(--c-warn-linie);
  margin: 0 0 var(--s-2);
  line-height: 1;
}
.stoerung h1 { font-size: var(--t-24); margin: 0 0 var(--s-3); }
.stoerung h2 {
  font-size: var(--t-16);
  margin: var(--s-6) 0 var(--s-2);
}
.stoerung-lead { color: var(--c-text-leise); margin: 0 0 var(--s-6); }
.stoerung-fakten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: var(--s-4);
  background: var(--c-warn-grund);
  border: 1px solid var(--c-warn-linie);
  border-radius: var(--r);
}
.stoerung-fakten dt {
  font-size: var(--t-12);
  color: var(--c-warn-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stoerung-fakten dd { margin: 0; font-size: var(--t-14); }
.stoerung-nummer {
  font-size: var(--t-18);
  font-weight: 700;
  letter-spacing: 0.06em;
  user-select: all;              /* zum Weitergeben: ein Klick markiert alles */
}
.stoerung-schritte { margin: 0; padding-left: var(--s-6); }
.stoerung-schritte li { margin-bottom: var(--s-2); font-size: var(--t-14); }
.stoerung-schritte a { color: var(--c-akzent); }
.stoerung-fuss {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-linie-zart);
  font-size: var(--t-13);
  color: var(--c-text-leise);
}
@media (max-width: 480px) {
  .stoerung { margin: var(--s-4); padding: var(--s-4); }
  .stoerung-fakten { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* --- Kennzahlen (2026-08-26, s04) ------------------------------------- *
 * Der Block steht unter einem KANAL-Reiter, seine Zahlen gelten aber fuer
 * das ganze Portfolio. Die Etikette ist deshalb bewusst KEIN Kleingedrucktes:
 * sie sitzt in der Kopfzeile neben der Ueberschrift, in Signalfarbe, und
 * wird auf schmalen Geraeten unter die Ueberschrift umgebrochen statt
 * abgeschnitten. Eine Etikette, die man wegscrollen kann, erfuellt
 * Forderung 7 nicht.                                                     */
.kz-etikett {
  font-size: var(--t-12); font-weight: 600; line-height: 1.3;
  color: #8a5a00; background: var(--c-warn-grund);
  border: 1px solid var(--c-warn-linie); border-radius: var(--r);
  padding: 2px var(--s-2);
}
.kz-warum { margin: var(--s-2) 0 var(--s-3); font-size: var(--t-12);
  color: var(--c-text-leise); }
.kz-engpass { border: 1px solid var(--c-linie); border-radius: var(--r);
  padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); font-size: var(--t-13); }
.kz-engpass-marke { display: inline-block; font-size: var(--t-12);
  text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-leise);
  font-weight: 600; margin-right: var(--s-2); }
.kz-engpass b { display: block; }
.kz-empfehlung { display: block; color: var(--c-text-leise); margin-top: 2px; }
.kz-fuss { margin: 0; font-size: var(--t-12); color: var(--c-text-leise); }
.kz-fuss a { margin-left: var(--s-2); }
.kz-regeln { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.kz-regeln th { text-align: left; font-weight: 600; color: var(--c-text-leise);
  font-size: var(--t-12); text-transform: uppercase; letter-spacing: .06em;
  padding: 0 var(--s-2) var(--s-1) 0; border-bottom: 1px solid var(--c-linie); }
.kz-regeln td { padding: var(--s-1) var(--s-2) var(--s-1) 0;
  border-bottom: 1px solid var(--c-linie-zart); }
.kz-regel--befund     td { background: var(--c-hart-grund); }
.kz-regel--unpruefbar td { color: var(--c-text-leise); }
/* DIE ERKLAERUNGSZEILE unter jeder Regel (Elina EL-20260910-8da727ef).
 * Sie gehoert optisch zu der Zeile ueber ihr, nicht zwischen zwei Regeln:
 * die Regelzeile gibt ihre Trennlinie deshalb ab, solange eine Erklaerung
 * folgt. Nur Tokens, keine freien Werte. */
.kz-regel--traegt-erklaerung td { border-bottom: 0; }
.kz-regel-erklaerung td { padding: 0 var(--s-2) var(--s-2) 0;
  font-size: var(--t-12); color: var(--c-text-leise);
  border-bottom: 1px solid var(--c-linie-zart); }
.kz-regel-klartext { display: block; color: var(--c-text); }
.kz-regel-soll { display: block; margin-top: var(--s-1); }
/* Stand und Wert brechen nicht: "unpruefbar" als "unpruefba r" ueber zwei
 * Zeilen war in der Aufnahme vom 2026-09-13 der einzige Lesefehler der
 * Tabelle. */
.kz-regeln td:nth-child(4), .kz-regeln td:nth-child(5) { white-space: nowrap; }
.kz-alt { color: #8a5a00; font-weight: 600; }

/* --- DER apeli-BEREICH (s03) --------------------------------------------
 * Ebene-2-Uebersicht und Agenten-Unteransicht. Job
 * ...-apeli-bereich-nach-8713-uebertragen-und-auswaehlbar-prio8.
 *
 * DIE KARTE IST GANZ EIN KNOPF, und das ist hier die tragende Entscheidung.
 * Ein Kartenrahmen mit einem kleinen Link darin sieht klickbar aus und ist es
 * nur an einer Stelle -- genau der halbe Knopf, den `probe_knoepfe_auf_
 * reiterflaeche.py` als "Element nicht greifbar" meldet. Deshalb ist das <a>
 * selbst die Karte (display:grid), nicht ein Kind darin.
 *
 * Die Farben kommen ausnahmslos aus den vorhandenen Variablen. Ein eigener
 * Farbton fuer apeli waere eine zweite Designsprache fuer einen Bereich, der
 * sich schon durch seine EBENE unterscheidet -- das war Christians Punkt.
 */
.bereich-lead { margin: 0 0 var(--s-4); font-size: var(--t-14);
  line-height: 1.5; color: var(--c-text); max-width: 62ch; }

.agenten-raster { display: grid; gap: var(--s-3); margin: 0 0 var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.agent-karte { display: grid; gap: var(--s-1); align-content: start;
  border: 1px solid var(--c-linie); border-radius: var(--r);
  padding: var(--s-3); text-decoration: none; color: inherit;
  background: var(--c-grund); }
.agent-karte:hover, .agent-karte:focus-visible {
  border-color: var(--c-akzent); background: var(--c-hart-grund); }
/* Nur katalogisiert: leiser, aber ausdruecklich WEITER ein Knopf -- es gibt
 * eine Unteransicht, und sie sagt, was fehlt. Kein cursor/Hover-Entzug. */
.agent-karte--offen { border-style: dashed; }
.agent-karte--offen .agent-name { color: var(--c-text-leise); }

.agent-name { font-weight: 600; font-size: var(--t-16); }
.agent-kennung { font-size: var(--t-12); color: var(--c-text-leise);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.agent-kennung--kopf { margin-left: var(--s-2); }
.agent-zweck { font-size: var(--t-13); line-height: 1.4;
  color: var(--c-text-leise); }
.agent-fuss { display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: baseline; margin-top: var(--s-1); }

.agent-status { display: inline-block; font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  color: var(--c-text-leise); }
.agent-status--laeuft { color: #2e7d32; }

.agent-fakten { display: grid; grid-template-columns: max-content 1fr;
  gap: var(--s-1) var(--s-4); margin: 0 0 var(--s-4); font-size: var(--t-13); }
.agent-fakten dt { color: var(--c-text-leise); }
.agent-fakten dd { margin: 0; }

.agent-liste { margin: 0 0 var(--s-4); padding-left: var(--s-4);
  font-size: var(--t-13); line-height: 1.5; }

/* =====================================================================
 * DIE UEBERTRAGENEN BEREICHE (s04) -- Marken, Berichte, Regel-Verlauf
 * Job ...-apeli-bereich-nach-8713-uebertragen-und-auswaehlbar-prio8
 *
 * KEINE NEUE DESIGNSPRACHE. Jede Farbe, jeder Abstand und jede Schriftgroesse
 * kommt aus den vorhandenen Variablen des :root-Blocks. Ein eigener Farbton
 * fuer die Marken-Ebene waere genau der Fehler, den Christian an den fuenf
 * gleich aussehenden Reitern kritisiert hat, nur andersherum: Bereiche
 * unterscheiden sich hier durch ihre EBENE, nicht durch ihre Faerbung.
 *
 * NACHTRAG s04: `.befund.warn` gab es nicht. `apeli.html` und
 * `apeli-agent.html` benutzen die Klasse seit s03, sie fiel auf den nackten
 * `.befund` zurueck -- also eine Warnung ohne Warnfarbe. Rein kosmetisch,
 * aber ein Hinweis, der wie normaler Text aussieht, wird ueberlesen.
 * ===================================================================== */

.befund.warn { background: var(--c-warn-grund); border-color: var(--c-warn-linie);
  color: var(--c-warn-text); }

/* --- Die Unternavigationen: Marke waehlen / Gesamtsicht waehlen --------
 * Dieselbe Bauform wie `.bereich-knopf`: der AKTIVE Eintrag ist ein <span>
 * und bekommt deshalb ausdruecklich KEIN cursor:pointer -- was aussieht wie
 * ein Knopf, muss einer sein. */
.markennavi, .sichtnavi { display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: baseline; padding: var(--s-2) var(--s-4) 0; }
.markennavi-titel, .sichtnavi-titel { font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-text-leise); }
.markennavi-knopf, .sichtnavi-knopf { font-size: var(--t-13);
  padding: var(--s-1) var(--s-2); border-radius: var(--r);
  border: 1px solid var(--c-linie); background: var(--c-flaeche);
  color: var(--c-akzent); text-decoration: none; }
.markennavi-knopf:hover, .sichtnavi-knopf:hover,
.markennavi-knopf:focus-visible, .sichtnavi-knopf:focus-visible {
  border-color: var(--c-akzent); }
.markennavi-knopf.ist-aktiv, .sichtnavi-knopf.ist-aktiv {
  color: var(--c-text); font-weight: 600; background: var(--c-grund);
  border-color: var(--c-text-leise); cursor: default; }

/* --- Eine Kanal-Kachel innerhalb einer Marke ---------------------------
 * `data-state` steht im HTML und kommt aus der DATENSCHICHT. Die Faerbung
 * haengt daran und nicht an einer Klasse, die eine Vorlage vergessen kann:
 * ein leerer Bereich, der aussieht wie ein voller, ist der Schadensfall
 * dieses ganzen Auftrags. */
.kanal-kachel { border: 1px solid var(--c-linie); border-radius: var(--r);
  padding: var(--s-3); margin: 0 0 var(--s-3); background: var(--c-flaeche); }
.kanal-kachel h2 { margin: 0 0 var(--s-1); font-size: var(--t-18); }
.kanal-kachel[data-state="empty"] { background: var(--c-grund); }
.kanal-kachel[data-state="stoerung"] { border-color: var(--c-hart-linie);
  background: var(--c-hart-grund); }
.kanal-kachel .luecke { font-size: var(--t-12); color: var(--c-warn-text);
  background: var(--c-warn-grund); border: 1px solid var(--c-warn-linie);
  border-radius: var(--r); padding: var(--s-1) var(--s-2);
  margin: var(--s-2) 0 0; }

.kennzahlen { display: grid; grid-template-columns: max-content 1fr;
  gap: var(--s-1) var(--s-4); margin: var(--s-2) 0 0; font-size: var(--t-13); }
.kennzahlen dt { color: var(--c-text-leise); }
.kennzahlen dd { margin: 0; font-weight: 600; }

.abschnitt { margin: var(--s-8) 0 var(--s-3); font-size: var(--t-21); }
.urteil-satz { margin: 0 0 var(--s-2); font-size: var(--t-16);
  line-height: 1.5; max-width: 72ch; }

/* --- Tabellen: der Rahmen scrollt, nicht die Seite ---------------------
 * Auf 390px waere eine sechsspaltige Tabelle sonst breiter als das Fenster
 * und wuerde die GANZE Seite horizontal schieben -- also auch die Leisten,
 * deren Sichtbarkeit `probe_reiter_im_sichtfeld.py` misst. Der Ueberlauf
 * gehoert deshalb in den Rahmen und nirgendwo sonst. */
.tabellenrahmen { overflow-x: auto; margin: 0 0 var(--s-4);
  border: 1px solid var(--c-linie); border-radius: var(--r);
  background: var(--c-flaeche); }
.tabellenrahmen table { border-collapse: collapse; width: 100%;
  font-size: var(--t-12); }
.tabellenrahmen th, .tabellenrahmen td { text-align: left; padding: var(--s-2);
  border-bottom: 1px solid var(--c-linie-zart); vertical-align: top; }
.tabellenrahmen th { color: var(--c-text-leise); font-weight: 600;
  white-space: nowrap; }
.tabellenrahmen tr:last-child td { border-bottom: 0; }
.tabellenrahmen tr[data-status="befund"] td:nth-child(3) { color: var(--c-hart-text); }
.tabellenrahmen tr[data-status="konform"] td:nth-child(3) { color: var(--c-gut-text); }

/* --- Der Bericht: die Datei, woertlich -------------------------------- */
.bericht-roh { overflow-x: auto; white-space: pre; margin: 0 0 var(--s-4);
  padding: var(--s-3); border: 1px solid var(--c-linie);
  border-radius: var(--r); background: var(--c-flaeche);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-12); line-height: 1.5; }
.kommando { overflow-x: auto; white-space: pre; margin: 0 0 var(--s-4);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--c-linie);
  border-radius: var(--r); background: var(--c-grund);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-12); }

.frische { font-size: var(--t-13); margin: 0 0 var(--s-3); }
.frische-alt { color: var(--c-warn-text); }

/* --- Der Regel-Verlauf ------------------------------------------------- */
.regelreihe { border-top: 1px solid var(--c-linie-zart);
  padding: var(--s-4) 0 0; margin: 0 0 var(--s-4); }
.regelreihe h2 { margin: 0 0 var(--s-1); font-size: var(--t-16);
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
.richtung { font-size: var(--t-13); margin: 0 0 var(--s-2); max-width: 72ch;
  line-height: 1.5; }
.richtung--besser { color: var(--c-gut-text); }
.richtung--schlechter { color: var(--c-hart-text); }
/* "keine Aussage" bleibt bewusst FARBLOS: eine Einfaerbung waere eine
 * Richtung, und genau die gibt es hier nicht. */

/* --- Die Fusszeile der uebertragenen Seiten --------------------------- */
.bereich-fuss { padding: var(--s-6) var(--s-4) var(--s-8);
  border-top: 1px solid var(--c-linie-zart); margin-top: var(--s-8); }
.bereich-fuss p { margin: 0 0 var(--s-1); font-size: var(--t-12); }

/* --- Der Konzept-Fertigstellungsstand (s07, 2026-08-28) ---------------
 *
 * DREI SPALTEN, DIE AUF DEM TELEFON UNTEREINANDER STEHEN. Der Traeger ist
 * ein Instagram-Nachbau und deshalb auf `--b-post` (430 px) gebaut; drei
 * Spalten nebeneinander gibt es erst in `.huelle--breit` und erst ab
 * 1100 px. Darunter wird gestapelt, NICHT gescrollt: eine waagerecht
 * ueberlaufende Reihe verletzt genau die Messung, die
 * `probe_reiter_im_sichtfeld.py` fuehrt (jedes Element zu 100 % im
 * sichtbaren Bereich seines beschneidenden Vorfahren).
 *
 * `.spalten--3` steht bewusst neben `.spalten--2` und nicht an dessen
 * Stelle: die Sprachpaar-Ansicht braucht ihre eigene Schwelle (900 px),
 * drei Spalten brauchen mehr. Eine gemeinsame Regel waere ab dem ersten
 * Fix eine zweite Wahrheit.
 */
.spalten--3 { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .spalten--3 { grid-template-columns: 1fr 1fr 1fr; } }

.spalte-titel { font-size: var(--t-18); margin: 0 0 var(--s-1); }
.spalte-frage { margin: 0 0 var(--s-4); font-size: var(--t-13); }

.quelle { border-top: 1px solid var(--c-linie-zart);
  padding: var(--s-4) 0 0; margin: 0 0 var(--s-6); }
.quelle-titel { font-size: var(--t-14); margin: 0 0 var(--s-1);
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }

/* DIE ZAHL IST NICHT EINGEFAERBT. Sie ist weder gut noch schlecht -- 480
 * belegte Bauten und 91 verlorene Segmente stehen in derselben Schrift,
 * weil eine Ampel hier eine Wertung waere, die die Seite nicht treffen
 * kann. Rot ist ausschliesslich der MESSAUSFALL, und der ist eine Aussage
 * ueber uns, nicht ueber den Gegenstand. */
.quelle-zahl { font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: var(--t-16); margin-left: auto; }
.quelle-zahl--ausfall { color: var(--c-hart-text); font-size: var(--t-13);
  font-weight: 600; }
.quelle-herkunft { font-size: var(--t-11); margin: 0 0 var(--s-2);
  line-height: 1.45; }
.quelle-herkunft code { font-size: var(--t-11); word-break: break-all; }
.quelle-hinweis { font-size: var(--t-12); margin: 0 0 var(--s-2); }

.konzept-liste { list-style: none; margin: 0; padding: 0; }
.konzept-eintrag { display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-2) 0; border-bottom: 1px solid var(--c-linie-zart);
  min-width: 0; }
.konzept-eintrag--warn { border-left: 3px solid var(--c-warn-linie);
  padding-left: var(--s-2); }
.konzept-text { font-size: var(--t-13); line-height: 1.4; }
.konzept-zusatz { font-size: var(--t-11); }
.konzept-warnung { font-size: var(--t-11); color: var(--c-warn-text);
  font-weight: 600; }
/* Die Kennung steht seit dem 2026-09-19 als `details.technik` -- Groesse,
   Farbe und Umbruch kommen aus system.css (`details.technik > summary`
   und `> code`). Eine eigene Schriftgroesse hier waere eine zweite
   Definition derselben Sache. */
/* R6-AUSNAHME: eine Innenkennung ohne Sinnfuge, wie `code` -- sie steht in
 * `details.technik` und ist kein Fliesstext. */
.konzept-id { word-break: break-all; }
.konzept-kappung { font-size: var(--t-11); margin: var(--s-2) 0 0; }

.konzept-messluecken { max-width: none; margin-top: var(--s-8); }
.konzept-messluecken h2 { font-size: var(--t-16); margin: 0 0 var(--s-2); }
.konzept-messluecken ul { margin: 0; padding-left: var(--s-4); }
.konzept-luecke { margin: 0 0 var(--s-4); font-size: var(--t-13);
  line-height: 1.5; }
.konzept-fuss { margin-top: var(--s-6); font-size: var(--t-11);
  line-height: 1.5; }
.konzept-fuss code { font-size: var(--t-11); word-break: break-all; }

/* --- Der ernste Fall: "weicht ab" -------------------------------------
 * Elinas Entscheidung 2 zu EL-20260827-ce8b1766 (2026-08-27), woertlich:
 * "Ja, bitte die 2 weicht ab Posts optisch deutlicher hervorheben, da
 * einziger wirklich ernster Fall unter den 51."
 *
 * WARUM AM RAND UND NICHT ALS FLAECHE: eine eingefaerbte Kachel wuerde das
 * BILD einfaerben, das Elina beurteilen soll -- der Nachbau soll zeigen, wie
 * der Post live aussieht, nicht wie der Server ihn bewertet. Die Markierung
 * sitzt deshalb am Rahmen und in einem eigenen Streifen ueber dem Inhalt.
 *
 * ES BLEIBT BEI EINER MARKIERUNG, NICHT BEI EINER SPERRE: "weicht ab" heisst
 * "der Abzug stimmt nicht mehr mit dem Inhalt ueberein" -- das ist eine
 * Auskunft an Elina, keine Entscheidung ueber den Post. Sie urteilt weiter
 * mit denselben zwei Knoepfen.
 */
.post--weicht-ab {
  border-color: var(--c-hart-linie);
  box-shadow: 0 0 0 2px var(--c-hart-linie);
}
.weicht-ab-marke {
  background: var(--c-hart-grund); color: var(--c-hart-text);
  border-bottom: 1px solid var(--c-hart-linie);
  padding: var(--s-2) var(--s-4); font-size: var(--t-12); font-weight: 600;
}
.lage .dt-weicht-ab { color: var(--c-hart-text); font-weight: 600; }
.lage .dd-weicht-ab { color: var(--c-hart-text); font-weight: 600; }

/* --- Bestandteile als SATZ, nicht als Knopfreihe ----------------------
 * Elinas Befund Nr.16 (2026-08-27): die frueheren `.teil`-Pillen sahen mit
 * `border-radius: 999px` und Rahmen aus wie Knoepfe, hatten aber keine
 * Mechanik -- die beiden ohne Fuellfarbe ("video/musik — nicht im Plan")
 * waren weiss und damit der Knopf, den sie gemeldet hat.
 *
 * Bewusst KEINE Rundung, KEIN Rahmen, KEINE Fuellflaeche: alles drei sind
 * die Merkmale, an denen ein Mensch einen Knopf erkennt. Der Hinweistext
 * der Leerstellen haengt weiter als `title` am Wort -- eine Erklaerung, die
 * beim Ueberfahren erscheint, ist kein Bedienelement.
 *
 * `.teil`/`.teile` bleiben in dieser Datei stehen: /beitrag benutzt sie
 * weiter, und die dortige Leiste hat Elina nicht gemeldet. Wer sie eines
 * Tages auch dort aufloest, kann die Regeln dann entfernen.
 */
.bestandteile {
  margin: var(--s-3) 0 0; font-size: var(--t-12);
  color: var(--c-text-leise);
}
.bestandteile span[title] { border-bottom: 1px dotted var(--c-linie); }

/* --- Aufwand (s05, Route /aufwand) -----------------------------------
 *
 * ADDITIV: dieser Block steht am Ende und ueberschreibt nichts. Wer die
 * Seite zurueckbaut, kann ihn liegen lassen -- er hat dann keinen Nutzer.
 *
 * WARUM UEBERHAUPT NEUE KLASSEN (wartestau.html kam ohne aus): dort war eine
 * Zahl anzuzeigen, hier ein Diagramm. Ein Balken mit zwei Kanten laesst sich
 * mit `karte`/`leise` nicht bauen, ohne ihn mit Inline-Stilen vollzuschreiben.
 * Der Preis ist eine Pflegezusage; sie ist auf einen Block begrenzt und
 * benutzt ausschliesslich bestehende Tokens (keine freien Werte).
 *
 * DIE LUECKE IST ROT UND SCHRAFFIERT, NICHT LEER. Eine leere Zeile saehe aus
 * wie eine Null; die Schraffur sagt "hier fehlt etwas". Das ist die
 * Bauform, die `konzepte.html` fuer ihre Messluecken schon benutzt
 * (`--c-hart-*`), nur einmal in die Waagerechte gedreht.
 */
.aufwand-ausfall {
  background: var(--c-hart-grund); border-left: 3px solid var(--c-hart-linie);
  color: var(--c-hart-text); padding: var(--s-3); border-radius: var(--r);
}
.aufwand-klassen, .aufwand-ziel, .aufwand-waehrung, .aufwand-verlauf,
.aufwand-messluecken { max-width: none; }
.aufwand-klassen h2, .aufwand-ziel h2, .aufwand-waehrung h2,
.aufwand-verlauf h2, .aufwand-messluecken h2 {
  font-size: var(--t-16); margin: 0 0 var(--s-2);
}
.aufwand-klasse { margin: var(--s-4) 0 0; }
.aufwand-klasse--ziel { border-left: 3px solid var(--c-akzent);
  padding-left: var(--s-3); margin-left: calc(-1 * var(--s-3)); }
.aufwand-klasse-kopf {
  display: flex; align-items: baseline; gap: var(--s-2);
  justify-content: space-between; flex-wrap: wrap;
}
.aufwand-klasse-name { font-size: var(--t-14); font-weight: 600; }
.aufwand-klasse-zahl { font-size: var(--t-13); }
.aufwand-spanne { font-variant-numeric: tabular-nums; font-weight: 600; }
.aufwand-einheit { color: var(--c-text-leise); font-size: var(--t-11); }
.aufwand-klasse-fuss { margin: var(--s-1) 0 0; font-size: var(--t-11); }

/* Die Achse: 0 .. skala_prozent. Die Marken sitzen absolut, der Balken
 * traegt `left` (Untergrenze) und `width` (Spannweite) -- zwei Kanten,
 * nie ein Punkt. */
.aufwand-achse {
  position: relative; display: block; height: 14px;
  margin: var(--s-1) 0; background: var(--c-linie-zart);
  border-radius: 2px; overflow: hidden;
}
.aufwand-marke { position: absolute; top: 0; bottom: 0; width: 2px; }
.aufwand-marke--ziel { background: var(--c-gut-linie); }
.aufwand-marke--massnahme { background: var(--c-warn-linie); }
.aufwand-balken {
  position: absolute; top: 2px; bottom: 2px; min-width: 2px;
  background: var(--c-akzent); border-radius: 2px;
}
.aufwand-balken--wert { background: var(--c-gut-linie); top: 8px; bottom: 0; }

.aufwand-warnung {
  margin: var(--s-4) 0 0; padding: var(--s-3);
  background: var(--c-warn-grund); border-left: 3px solid var(--c-warn-linie);
  color: var(--c-warn-text); border-radius: var(--r); font-size: var(--t-12);
}
.aufwand-ziel-liste {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-4);
  margin: 0 0 var(--s-3);
}
.aufwand-ziel-liste dt { color: var(--c-text-leise); font-size: var(--t-13); }
.aufwand-ziel-liste dd { margin: 0; text-align: right;
  font-variant-numeric: tabular-nums; font-size: var(--t-13); }

/* Der Verlauf: eine Zeile je Tag. */
.aufwand-tage { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.aufwand-tag {
  display: grid; grid-template-columns: 3.2em 1fr 6.5em;
  align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1);
}
.aufwand-tag-datum { font-size: var(--t-11); color: var(--c-text-leise);
  font-variant-numeric: tabular-nums; }
.aufwand-tag-zahl { font-size: var(--t-11); text-align: right;
  font-variant-numeric: tabular-nums; }
.aufwand-achse--tag { height: 12px; margin: 0; }
/* KEIN BALKEN, SONDERN SCHRAFFUR: eine fehlende Messung darf nie wie ein
 * gemessener kleiner Wert aussehen. */
.aufwand-achse--luecke {
  background: repeating-linear-gradient(45deg,
    var(--c-hart-grund) 0 4px, #ffffff 4px 8px);
  border: 1px dashed var(--c-hart-linie);
}
.aufwand-luecke-text { color: var(--c-hart-text); }
.aufwand-gruende { margin: var(--s-1) 0 0; padding-left: var(--s-4);
  font-size: var(--t-11); color: var(--c-text-leise); }
.aufwand-messluecken ul { margin: 0; padding-left: var(--s-4); }
.aufwand-luecke { margin: 0 0 var(--s-4); font-size: var(--t-13); }
.aufwand-fuss { margin-top: var(--s-6); font-size: var(--t-11); }
.aufwand-fuss code { font-size: var(--t-11); word-break: break-all; }

/* --- Die Vierteilung (s05 des Grossjobs 20260903-KONZEPT-produktivitaet-...)
 *
 * ADDITIV wie der Block darueber: nichts wird ueberschrieben, alle Klassen
 * tragen das eigene Praefix `aufwand-p-`. Das ist KEINE Kosmetik -- die
 * stehende Probe dieser Seite liest `class="aufwand-balken"` mit einem
 * FIRST-MATCH-Regex; ein neuer Abschnitt oberhalb mit demselben Klassennamen
 * entfuehrte ihr den Treffer und machte aus einem additiven Bau eine stille
 * Regression.
 *
 * DIE FARBLOGIK IST ZWEIWERTIG UND HAT EINEN DRITTEN ZUSTAND: ueber der
 * Grenze warnt, unter der Grenze ist gut, und "keine Aussage" ist WEDER --
 * es bekommt die Schraffur, nicht die gruene Farbe. Genau daran scheitert
 * eine Anzeige sonst: ein fehlender Wert faellt in den freundlichen Zustand.
 */
.aufwand-p-leit, .aufwand-p-vierteilung, .aufwand-p-rohstoffe,
.aufwand-p-verlauf, .aufwand-p-lesehilfe { max-width: none; }
.aufwand-p-leit h2, .aufwand-p-vierteilung h2, .aufwand-p-rohstoffe h2,
.aufwand-p-verlauf h2, .aufwand-p-lesehilfe h2 {
  font-size: var(--t-16); margin: 0 0 var(--s-2);
}
.aufwand-p-gross { font-size: var(--t-14); }
.aufwand-p-zahl { font-variant-numeric: tabular-nums; font-size: var(--t-18); }
.aufwand-p-zahl--ueber { color: var(--c-warn-text); }
.aufwand-p-zahl--unter { color: var(--c-gut-text, var(--c-text)); }

/* Die Kennzeichnung der zwei Tage. `unterbrochen` ist AUSDRUECKLICH nicht
 * gruen: eine Luecke zwischen zwei roten Tagen ist keine Entwarnung. */
.aufwand-p-kette { margin: var(--s-4) 0 0; padding: var(--s-3);
  border-radius: var(--r); border-left: 3px solid var(--c-linie); }
.aufwand-p-kette--gerissen { background: var(--c-warn-grund);
  border-left-color: var(--c-warn-linie); color: var(--c-warn-text); }
.aufwand-p-kette--unterbrochen { background: var(--c-hart-grund);
  border-left-color: var(--c-hart-linie); color: var(--c-hart-text); }
.aufwand-p-kette p { margin: 0 0 var(--s-2); }
.aufwand-p-kette p:last-child { margin-bottom: 0; }

/* Die Klassen-Balken: EIN Wert, keine Spanne -- die Vierteilung ist eine
 * Aufteilung und keine Schranke. Deshalb `width` ab 0 statt `left`+`width`. */
.aufwand-p-achse {
  position: relative; display: block; height: 14px; margin: var(--s-1) 0;
  background: var(--c-linie-zart); border-radius: 2px; overflow: hidden;
}
.aufwand-p-balken {
  position: absolute; top: 2px; bottom: 2px; left: 0; min-width: 2px;
  background: var(--c-akzent); border-radius: 2px;
}
.aufwand-p-balken--g { background: var(--c-warn-linie); }
.aufwand-p-balken--ueber { background: var(--c-warn-linie); }
.aufwand-p-balken--unter { background: var(--c-gut-linie); }
.aufwand-p-balken--unsicher {
  background: repeating-linear-gradient(45deg,
    var(--c-linie) 0 4px, var(--c-linie-zart) 4px 8px);
}
.aufwand-p-klasse--unsicher { border-left: 3px dashed var(--c-linie);
  padding-left: var(--s-3); margin-left: calc(-1 * var(--s-3)); }

/* Die vier Achsen nebeneinander -- nie verrechnet, deshalb auch optisch
 * nebeneinander und nicht uebereinander gestapelt. */
.aufwand-p-achsen { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.aufwand-p-achse-zeile {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-2);
  align-items: baseline; padding: var(--s-2) 0;
  border-top: 1px solid var(--c-linie-zart);
}
.aufwand-p-achse-zeile--messluecke { color: var(--c-hart-text); }
.aufwand-p-achse-name { font-size: var(--t-13); font-weight: 600; }
.aufwand-p-achse-wert { font-variant-numeric: tabular-nums;
  font-size: var(--t-13); text-align: right; }
.aufwand-p-achse-urteil { font-size: var(--t-11);
  color: var(--c-text-leise); text-align: right; min-width: 8em; }
.aufwand-p-achse-zeile--ueber .aufwand-p-achse-urteil { color: var(--c-warn-text); }
.aufwand-p-achse-fuss { grid-column: 1 / -1; margin: var(--s-1) 0 0;
  font-size: var(--t-11); }

/* Der Verlauf der Leitzahl -- erbt die Geometrie der Tagesreihe darueber. */
.aufwand-p-tag--kette .aufwand-tag-datum { font-weight: 700;
  color: var(--c-warn-text); }
.aufwand-p-tag--kettenluecke .aufwand-tag-datum { font-weight: 700;
  color: var(--c-hart-text); }

/* --- Richtwerte (s06) ------------------------------------------------------
 * Grossjob 20260828-KONZEPT-zwei-richtwerte-server-zehn-coworker-fuenfzehn-
 * prozent-prio6. ADDITIV: dieser Block wiederverwendet bewusst die
 * `aufwand-*`-Klassen fuer Achse, Balken, Marke und Tagesreihe. Eine zweite
 * Fassung derselben Geometrie waere ab dem ersten Fix eine zweite Wahrheit --
 * und die zwei Abschnitte stehen auf DERSELBEN Seite, sie muessen also auch
 * gleich aussehen. Neu ist hier nur, was es oben nicht gibt: das Nebeneinander
 * der zwei Achsen und die Verdikt-Farben. */
.richtwerte-paar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19em, 1fr));
  gap: var(--s-4); margin: var(--s-3) 0;
}
.richtwerte-achse {
  border: 1px solid var(--c-linie); border-radius: 6px; padding: var(--s-3);
}
.richtwerte-kopf {
  display: flex; align-items: baseline; gap: var(--s-2);
  justify-content: space-between; margin-bottom: var(--s-2);
}
.richtwerte-name { font-weight: 600; }
.richtwerte-richtwert { font-size: var(--t-11); color: var(--c-text-leise);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.richtwerte-zahl { margin: 0 0 var(--s-2); font-variant-numeric: tabular-nums; }
.richtwerte-fuss { margin: var(--s-2) 0 0; font-size: var(--t-11); }

/* DIE RICHTWERTLINIE. Bewusst kraeftiger als die Ziel-Marke oben: sie ist auf
 * dieser Achse die EINZIGE Linie, und eine Linie, die man nicht sieht, ist
 * keine. */
.aufwand-marke.richtwerte-marke {
  border-left: 2px solid var(--c-text); opacity: .85;
}

/* DAS VERDIKT FAERBT DEN BALKEN, NICHT DIE SEITE. `gerissen` ist ein Anlass
 * zu handeln, kein Verstoss -- deshalb ein Signalton und kein Alarmrot, das
 * zum Wegklicken erzieht. */
.richtwerte-balken--gerissen { background: var(--c-hart-linie, #b45309); }
.richtwerte-balken--gehalten { background: var(--c-gut, #15803d); }
.richtwerte-verdikt { margin: var(--s-2) 0 0; font-size: var(--t-13); }
.richtwerte-verdikt--gerissen { color: var(--c-hart-text); }
.richtwerte-verdikt--gehalten { color: var(--c-text-leise); }
.richtwerte-ausfall-achse { margin: 0; font-size: var(--t-13); }

.richtwerte-messgeraet, .richtwerte-verlauf { margin-top: var(--s-4); }
.richtwerte-reihe { margin-top: var(--s-4); }
.richtwerte-reihe-kopf { margin: 0 0 var(--s-2); font-size: var(--t-13); }

/* --- Lage der Manager (s09) -------------------------------------------------
 * Grossjob 20260829-GROSSJOB-dashboard-seo-ads-chats-mail-als-reiter-auf-8713.
 * ADDITIV: kein bestehender Selektor ist angefasst, kein Token ist neu.
 *
 * DER SCOPE HEISST `.lagebild` UND NICHT `.lage` -- DAS IST KEINE LAUNE.
 * `.lage` ist seit langem die Lagebericht-Karte der Kanalansicht und traegt
 * eigene Regeln fuer `h2`, `dl`, `dt` und `dd`. Haette diese Seite denselben
 * Scope-Namen bekommen, erbte jede ihrer Ueberschriften still ein fremdes
 * Aussehen -- und niemand haette gewusst, warum. Die Klassen HEISSEN weiter
 * `lage-*` (der Bereich heisst so), aber ihr gemeinsamer Vorfahr ist ein
 * anderer.
 *
 * DREI ZUSTAENDE, DREI BESTEHENDE TOKEN-SAETZE. Es gibt keinen neuen Ton:
 *   laeuft        --c-gut-*    (gruen)
 *   laeuft nicht  --c-hart-*   (rot)
 *   nicht messbar --c-warn-*   (bernstein)
 * "Nicht messbar" ist damit von "laeuft" auf den ersten Blick unterscheidbar
 * -- die eine Anforderung, an der dieses Dashboard sonst scheitern wuerde.
 * Grau waere hier falsch: es liest sich als "unwichtig", und in drei von fuenf
 * Faellen steht dahinter eine Faehigkeit, die nachweislich nicht ausgeuebt
 * wird.
 *
 * DIE FARBE IST NIE DIE EINZIGE TRAEGERIN DER AUSSAGE. Jede Kachel schreibt
 * ihren Zustand als WORT hin und traegt ihn zusaetzlich in `data-lage-zustand`.
 * Wer die Toene nicht unterscheiden kann, verliert nichts.
 */

.lagebild h2 {
  font-size: var(--t-16); margin: 0 0 var(--s-1); font-weight: 600;
  color: var(--c-text);
}

/* Die Legende: drei Zeilen vor den Kacheln, nicht am Seitenfuss. Eine Farbe,
 * deren Bedeutung man erst unten nachliest, ist im Moment des Lesens
 * bedeutungslos. */
.lage-legende {
  list-style: none; margin: 0 var(--s-2) var(--s-6); padding: var(--s-3);
  background: var(--c-flaeche); border: 1px solid var(--c-linie-zart);
  border-radius: var(--r); font-size: var(--t-12);
}
.lage-legende li { margin: 0 0 var(--s-1); }
.lage-legende li:last-child { margin-bottom: 0; }

.lage-punkt {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: var(--s-2); vertical-align: baseline;
  border: 1px solid var(--c-linie);
}
.lage-punkt--laeuft { background: var(--c-gut-linie);  border-color: var(--c-gut-text); }
.lage-punkt--tot    { background: var(--c-hart-linie); border-color: var(--c-hart-text); }
.lage-punkt--unklar { background: var(--c-warn-linie); border-color: var(--c-warn-text); }

/* Die Kacheln. EINE Spalte: die Huelle ist 430px breit (Elinas Telefon), und
 * zwei Spalten a 200px machen aus drei Zahlen drei Abkuerzungen. */
.lage-kacheln { list-style: none; margin: 0; padding: 0; }
.lage-kachel {
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  border-left-width: 4px; border-radius: var(--r);
  padding: var(--s-4); margin: 0 var(--s-2) var(--s-4);
}
.lage-kachel--laeuft { border-left-color: var(--c-gut-linie); }
.lage-kachel--tot    { border-left-color: var(--c-hart-linie); }
.lage-kachel--unklar { border-left-color: var(--c-warn-linie); }

.lagebild .lage-frage {
  margin: 0 0 var(--s-3); font-size: var(--t-12);
  color: var(--c-text-leise);
}

.lagebild .lage-zustand { margin: 0 0 var(--s-3); font-size: var(--t-14); }
.lagebild .lage-zustand--gross {
  margin: 0 var(--s-2) var(--s-4); font-size: var(--t-18);
}
.lage-zustand-wort { color: var(--c-text); }

/* VERALTET ist keine vierte Farbe, sondern ein Schild INNERHALB von
 * "nicht messbar" -- ein veralteter Wert ist definitionsgemaess kein
 * aktueller Messwert. */
.lage-schild {
  display: inline-block; margin-left: var(--s-2);
  padding: 0 var(--s-2); border-radius: 2px;
  background: var(--c-warn-grund); color: var(--c-warn-text);
  border: 1px solid var(--c-warn-linie);
  font-size: var(--t-11); text-transform: uppercase; letter-spacing: .06em;
}

/* DER GRUND IST EIN HAUPTELEMENT. Er steht UEBER den Zahlen und in voller
 * Textfarbe -- nicht in `leise`. Drei Erzeuger-Segmente haben genau das als
 * Auflage gemeldet: wo eine Kachel "nicht messbar" sagt und in Wahrheit eine
 * Faehigkeit seit Wochen nicht ausgeuebt wird, ist der Grund die Nachricht
 * und die Farbe nur ihr Etikett. */
.lage-gruende {
  margin: 0 0 var(--s-4); padding: var(--s-3);
  background: var(--c-grund); border-left: 3px solid var(--c-linie);
  border-radius: var(--r);
}
.lagebild .lage-grund {
  margin: 0 0 var(--s-2); font-size: var(--t-13); color: var(--c-text);
  line-height: 1.5;
}
.lagebild .lage-grund:last-child { margin-bottom: 0; }
.lagebild .lage-grund--klein { font-size: var(--t-12); }

/* Die Zahlen. Titel oben klein, Zahl gross, Einheit und Alter darunter --
 * eine Zahl ohne Alter ist eine Behauptung. */
.lage-zeilen { margin: 0 0 var(--s-3); }
.lage-zeile {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  padding: var(--s-2) 0; border-top: 1px solid var(--c-linie-zart);
}
.lage-zeile:first-child { border-top: none; }
.lagebild .lage-zeile--fehlt {
  padding: var(--s-2) 0; font-size: var(--t-12);
  color: var(--c-hart-text);
}
.lage-wert { flex: 1 1 45%; min-width: 40%; }
.lage-wert-titel {
  display: block; font-size: var(--t-11); color: var(--c-text-leise);
  text-transform: uppercase; letter-spacing: .05em;
}
.lage-wert-zahl {
  display: block; font-size: var(--t-24); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--c-text);
  line-height: 1.2;
}
/* Eine fehlende Zahl ist NIE eine 0 und sieht auch nie wie eine aus. */
.lage-wert-zahl--ohne {
  font-size: var(--t-14); color: var(--c-warn-text); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.lage-wert-einheit {
  display: block; font-size: var(--t-11); color: var(--c-text-leise);
  line-height: 1.4;
}
.lage-wert-alter {
  display: block; font-size: var(--t-11); color: var(--c-text-leise);
}

.lagebild .lage-fuss { margin: var(--s-3) 0 0; font-size: var(--t-11); }
/* Klickbar ist der benannte Verweis, nicht die Kachel. Und was nicht klickbar
 * ist, sieht auch nicht so aus: kein Akzentton, kein cursor:pointer --
 * dieselbe Regel wie bei `.werkzeug--ohne-seite`. */
.lage-mehr { color: var(--c-akzent); text-decoration: none; }
.lage-mehr:hover, .lage-mehr:focus-visible { text-decoration: underline; }
.lage-mehr--ohne-seite {
  color: var(--c-text-leise); cursor: default; text-decoration: none;
}
.lagebild .lage-seitenfuss {
  margin: var(--s-6) var(--s-2) 0; font-size: var(--t-11);
  color: var(--c-text-leise); line-height: 1.6;
}
.lagebild .lage-seitenfuss code { word-break: break-all; }

/* --- Ebene 3: die Detailseiten ------------------------------------------- */

/* `width: auto` UEBERSCHREIBT das `width: 100%` von `.karte` -- und das ist
 * kein Detail, sondern der Unterschied zwischen 390 und 398 Pixeln. Mit
 * `width: 100%` ist der Block so breit wie die Huelle UND traegt zusaetzlich
 * seinen Seitenrand; die Seite schiebt dann horizontal, und zwar die GANZE
 * Seite -- also auch die Leisten, deren Sichtbarkeit
 * `probe_reiter_im_sichtfeld.py` misst. Gemessen bei 390x844:
 * scrollWidth 398 gegen clientWidth 390, Ursache genau diese Regel; die
 * Design-Rubrik meldete es als "horizontaler Overflow". Nach der Aenderung
 * 390 == 390 auf allen vier Detailseiten. */
.lage-block { max-width: none; width: auto; margin: 0 var(--s-2) var(--s-6); }
.lagebild .lage-block-lead {
  margin: 0 0 var(--s-4); font-size: var(--t-12); line-height: 1.5;
}
.lagebild .lage-vorbehalt {
  padding: var(--s-3); border-left: 3px solid var(--c-warn-linie);
  background: var(--c-warn-grund); color: var(--c-warn-text);
  border-radius: var(--r);
}

.lage-kennzahl {
  padding: var(--s-3) 0; border-top: 1px solid var(--c-linie-zart);
}
.lage-kennzahl:first-of-type { border-top: none; padding-top: 0; }
.lage-kennzahl-titel {
  margin: 0 0 var(--s-1); font-size: var(--t-13); font-weight: 600;
  color: var(--c-text);
}
.lagebild .lage-kennzahl-zahl {
  margin: 0 0 var(--s-2); font-size: var(--t-21);
  font-variant-numeric: tabular-nums; color: var(--c-text);
  line-height: 1.3;
}
/* Der Zustand steht als WORT neben der Zahl, nicht nur als Ton. */
.lage-kennzahl-marke {
  display: inline-block; margin-left: var(--s-2);
  padding: 0 var(--s-2); border-radius: 2px;
  font-size: var(--t-11); text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid var(--c-linie); vertical-align: middle;
}
.lage-kennzahl-marke--laeuft {
  background: var(--c-gut-grund); color: var(--c-gut-text);
  border-color: var(--c-gut-linie);
}
.lage-kennzahl-marke--tot {
  background: var(--c-hart-grund); color: var(--c-hart-text);
  border-color: var(--c-hart-linie);
}
.lage-kennzahl-marke--unklar {
  background: var(--c-warn-grund); color: var(--c-warn-text);
  border-color: var(--c-warn-linie);
}

/* Der Satz des Erzeugers -- er wird beim taeglichen Schnappschuss EINMAL
 * erzeugt und mitgespeichert, nie beim Seitenaufruf. */
.lagebild .lage-satz {
  margin: 0 0 var(--s-2); font-size: var(--t-12); line-height: 1.55;
  color: var(--c-text);
}
.lagebild .lage-nachsatz {
  margin: var(--s-4) 0 0; padding-top: var(--s-3);
  border-top: 1px solid var(--c-linie-zart);
  font-size: var(--t-12); line-height: 1.55; color: var(--c-text);
}
.lagebild .lage-kennzahl-fuss {
  margin: var(--s-2) 0 0; font-size: var(--t-11); line-height: 1.5;
}
.lagebild .lage-kennzahl-fuss code { word-break: break-all; }

.lage-fenster {
  list-style: none; margin: 0 0 var(--s-2); padding: 0;
  font-size: var(--t-12);
}
.lage-fenster li { margin: 0 0 var(--s-1); }
.lage-delta { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Die Tagesreihe. Eine Zeile je Tag -- Bauform aus `aufwand.html`
 * uebernommen, nicht neu erfunden. */
.lage-tage { list-style: none; margin: var(--s-2) 0 var(--s-1); padding: 0; }
.lage-tag {
  display: grid; grid-template-columns: 3.6em 1fr 6em;
  align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1);
}
.lage-tag-datum {
  font-size: var(--t-11); color: var(--c-text-leise);
  font-variant-numeric: tabular-nums;
}
.lage-tag-balken {
  display: block; height: 12px; border-radius: 2px;
  background: var(--c-gut-linie); min-width: 2px;
}
/* KEIN BALKEN, SONDERN SCHRAFFUR UEBER DIE VOLLE BREITE: eine fehlende
 * Messung darf nie wie ein gemessener kleiner Wert aussehen -- und ein
 * Nullbalken saehe genau so aus. */
.lage-tag-balken--luecke {
  width: 100%; background: repeating-linear-gradient(45deg,
    var(--c-warn-grund) 0 4px, var(--c-flaeche) 4px 8px);
  border: 1px dashed var(--c-warn-linie); box-sizing: border-box;
}
.lage-tag-zahl {
  font-size: var(--t-11); text-align: right;
  font-variant-numeric: tabular-nums;
}
.lagebild .lage-skala { margin: 0; font-size: var(--t-11); line-height: 1.5; }

.lagebild .lage-verweis { margin: 0 0 var(--s-3); font-size: var(--t-13); }
.lage-verweis a { color: var(--c-akzent); }

/* ===================================================================== *
 * BESTAND -- Gegenstaende statt Kennzahlen (s10, 2026-08-29, Ads-Detail)
 *
 * ADDITIV: kein bestehender Selektor ist angefasst, kein Token ergaenzt.
 * Alle Groessen kommen aus der bestehenden Typo-Skala und dem 8pt-Raster,
 * die Farben aus den drei semantischen Saetzen gut/warn/hart, und der
 * Bildradius ist DER Radius-Token `--r` -- ein zweiter Rundungswert waere
 * genau die Beliebigkeit, die die Designpflicht ausschliesst.
 *
 * DAS VORSCHAUBILD IST 64x64 UND WIRD AUCH SO GEZEIGT. Die Bildauslieferung
 * der Plattform liefert genau diese Kantenlaenge (`p64x64` in der Adresse);
 * groesser dargestellt waere es unscharf, und ein unscharfes Bild sieht aus
 * wie ein Fehler des Dashboards. Der Platzhalter hat DIESELBE Groesse --
 * sonst springt die Zeile, sobald ein Bild fehlt.
 * ===================================================================== */
.lage-schublade-titel {
  font-size: var(--t-16); margin: 0 0 var(--s-1);
  display: flex; align-items: baseline; gap: var(--s-2);
}
.lage-schublade-zahl {
  font-size: var(--t-13); color: var(--c-text-leise);
  font-variant-numeric: tabular-nums;
}
.lage-schublade-regel {
  margin: 0 0 var(--s-3); font-size: var(--t-12);
  color: var(--c-text-leise); line-height: 1.55;
}
.lage-ads { list-style: none; margin: 0; padding: 0; }
.lage-ad {
  display: flex; gap: var(--s-3);
  padding: var(--s-3) 0; border-top: 1px solid var(--c-linie-zart);
}
.lage-ad:first-child { border-top: none; }
.lage-ad-bild { flex: 0 0 64px; }
.lage-ad-bild img {
  width: 64px; height: 64px; display: block;
  border-radius: var(--r); border: 1px solid var(--c-linie);
  object-fit: cover; background: var(--c-grund);
}
.lage-ad-bild--ohne {
  width: 64px; height: 64px; display: flex;
  align-items: center; justify-content: center; text-align: center;
  border-radius: var(--r); border: 1px dashed var(--c-warn-linie);
  background: var(--c-warn-grund); color: var(--c-warn-text);
  font-size: var(--t-11); box-sizing: border-box; padding: var(--s-1);
}
.lage-ad-text { flex: 1 1 auto; min-width: 0; }
.lage-ad-kopf { margin: 0 0 var(--s-1); font-size: var(--t-14); }
.lage-ad-herkunft {
  margin: 0 0 var(--s-2); font-size: var(--t-11); line-height: 1.5;
}
.lage-ad-herkunft code { word-break: break-all; }
.lage-ad-satz {
  margin: 0 0 var(--s-2); font-size: var(--t-12); line-height: 1.55;
}
.lage-ad-fuss { margin: 0; font-size: var(--t-12); }
.lage-ad-fuss a { color: var(--c-akzent); }
.lage-ad--schmal { padding: var(--s-2) 0; }
/* Zustand einer Anzeige: Punkt traegt die Farbe, das Wort bleibt Text --
 * dieselbe Trennung wie bei `.lage-zustand-wort` auf der Kachel. */
.lage-ad-zustand { white-space: nowrap; margin-left: var(--s-2); }
.lage-ad-zustand-wort { color: var(--c-text); font-size: var(--t-12); }
/* GLEICHE ABSTAENDE ZWISCHEN ALLEN KARTEN. Der erste Bau setzte auf die
 * Karten der Einteilungen zusaetzlich `border-top` + `margin-top`; damit
 * lagen nur 34 % der Sektions-Abstaende auf dem 8-px-Raster, weil dieselbe
 * Seite zwei verschiedene Abstandsarten mischte. Die Karte trennt bereits
 * durch ihren eigenen Rahmen -- eine zweite Trennlinie darueber ist doppelt
 * gemoppelt und kostet die Rasterdisziplin. */
.lage-bestand.lage-schublade { margin-top: 0; padding-top: var(--s-4); }
/* LANGE PFADE BRECHEN, STATT DIE SEITE ZU SCHIEBEN. Der Bestandsblock nennt
 * seine Quellen als volle Pfade (`.../ads_steuerung.db:ad_perf_daily ...`);
 * ohne Umbruch schiebt ein einziger davon bei 390 px die GANZE Seite nach
 * rechts -- also auch die Leisten, deren Sichtbarkeit gemessen wird. Genau
 * dieselbe Wunde hat s09 an `.lage-block` schon einmal geschlossen. */
/* R6-AUSNAHME: die Quellen stehen hier als volle Pfade und Kennungen
 * (`.../ads_steuerung.db:ad_perf_daily`) -- ein Pfad hat keine bessere
 * Bruchstelle als "irgendwo". Die Ausnahme gilt den ATOMEN (`code`, Link),
 * nicht dem Kasten. */
.lage-bestand code, .lage-bestand a { word-break: break-word; overflow-wrap: anywhere; }
/* UND DER KASTEN SELBST NICHT MEHR (2026-09-22, EL-20260922-e7158e89, R6).
 * Hier stand `overflow-wrap: anywhere` fuer den GANZEN Bestandsblock. Das
 * ist die Wurzelregel vom 2026-09-21, lokal wieder eingeschaltet: JEDER
 * Fliesstext darin durfte seine min-content-Breite auf EIN ZEICHEN rechnen,
 * sobald die Spalte eng wird. Genau so kommt derselbe Fehler "an einer
 * voellig neuen Stelle" zurueck. `break-word` haelt die Zusage von oben --
 * ein Wort, das allein nicht in die Zeile passt, bricht weiterhin um, die
 * Seite wird also nicht geschoben -- nimmt ihr aber die Wirkung auf die
 * intrinsische Messung. */
.lage-bestand { overflow-wrap: break-word; }
/* DIE ANZEIGEN-KARTE BEKOMMT KARTEN-INNENABSTAND, NICHT DEN EINER LISTENZEILE.
 * `.lage-ad` stammt aus der ersten Fassung, in der jede Anzeige ein `<li>`
 * war -- ihr `padding: 12px 0` ueberschrieb nach dem Umbau still das
 * `padding: 24px` der Karte. Sichtbar wurde es erst am Massstab: 21 von 32
 * Abschnitten lagen mit 12 px neben dem 8-px-Raster (34 % on grid). Der
 * Rahmen der Karte trennt bereits; die geerbte Trennlinie darueber ist
 * doppelt gemoppelt. */
.lage-bestand.lage-ad {
  padding: var(--s-4); border-top: none; align-items: flex-start;
}

/* =====================================================================
 * CHRISTIANS DREI WERTE JE ANZEIGE (s06, Grossjob
 * 20260831-KONZEPT-bewertungsgrundlage-je-ad-umsatz-traffic-interaktion)
 *
 * "Als erster Wert immer UMSATZ. Als zweiter Wert immer TRAFFIC. Als
 * dritter Wert immer INTERAKTION MIT DER AD." Die Reihenfolge dreht sich
 * NIE -- deshalb ist die Liste ein <ol> mit sichtbarem Rang und nicht eine
 * Reihe gleichrangiger Kacheln, die eine Umsortierung ueberleben wuerde.
 *
 * ALLE ABSTAENDE AUF DEM 8-PX-RASTER (var(--s-*)). Der Massstab dieser
 * Seite hat schon einmal 21 von 32 Abschnitten als "neben dem Raster"
 * gemeldet, weil eine geerbte 12-px-Regel still die Karte ueberschrieb.
 * ================================================================== */
.lage-ad-werte {
  list-style: none; margin: 0 0 var(--s-2); padding: 0;
}
.lage-ad-wert {
  padding: var(--s-2) 0;
  border-top: 1px solid var(--c-linie-zart);
}
.lage-ad-wert:first-child { border-top: none; }
.lage-ad-wert-kopf {
  margin: 0; font-size: var(--t-13);
  display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
}
/* DER RANG IST DIE ZUSAGE UND STEHT DESHALB IM DOKUMENT, nicht als
 * CSS-Zaehler: ein ::before mit counter() waere nur gestaltet und
 * verschwaende beim Kopieren des Textes -- die Reihenfolge ist hier aber
 * der Gegenstand, nicht die Dekoration. */
.lage-ad-wert-rang {
  flex: 0 0 auto;
  min-width: 18px; height: 18px; line-height: 18px;
  text-align: center; border-radius: 50%;
  background: var(--c-linie-zart); color: var(--c-text-leise);
  font-size: var(--t-11); font-variant-numeric: tabular-nums;
}
.lage-ad-wert-name { color: var(--c-text); }
.lage-ad-wert-zahl { font-variant-numeric: tabular-nums; }
/* DIE LUECKE IST EIN WORT, KEIN GEDANKENSTRICH. Sie steht in der leisen
 * Textfarbe und NICHT in einer Warnfarbe: eine Groesse, die wir heute
 * nicht messen koennen, ist kein Alarm -- sie ist eine offene Frage. Eine
 * rote Einfaerbung machte aus 21 offenen Fragen 21 Stoerungen und stumpfte
 * genau die Farbe ab, mit der diese Seite echte Ausfaelle meldet. */
.lage-ad-wert-luecke {
  color: var(--c-text-leise); font-size: var(--t-12);
  border-bottom: 1px dashed var(--c-linie);
}
.lage-ad-wert-fenster, .lage-ad-wert-herkunft {
  margin: var(--s-1) 0 0; font-size: var(--t-11); line-height: 1.5;
}
.lage-ad-wert-grund {
  margin: var(--s-1) 0 0; font-size: var(--t-11); line-height: 1.55;
  color: var(--c-text-leise);
}
.lage-ad-wert-grund--warum { color: var(--c-text); }

/* ---- Wochenverlauf -------------------------------------------------
 * Sieben Tage, EIN Balken je Tag. Die Hoehe ist Darstellung (auf das
 * Wochenmaximum skaliert), der Rohwert steht im data-Attribut daneben.
 *
 * DER WICHTIGSTE FALL IST DER LEERE: ein Tag ohne Messung bekommt eine
 * gestrichelte Grundlinie statt eines Balkens. Ein Balken der Hoehe 0 und
 * ein fehlender Balken saehen sonst identisch aus -- und "gemessen 0" ist
 * etwas anderes als "nicht gemessen". Genau diese Verwechslung verbietet
 * Auftragspunkt 5. Deshalb traegt der gemessene Balken zusaetzlich eine
 * Mindesthoehe: eine echte Null bleibt als Strich sichtbar. */
.lage-ad-verlauf { margin-top: var(--s-2); }
.lage-ad-verlauf-kopf { margin: 0 0 var(--s-1); font-size: var(--t-11); }
.lage-ad-verlauf-reihe {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: flex-end; gap: var(--s-1);
  height: 48px;
}
.lage-ad-verlauf-punkt {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%;
}
.lage-ad-verlauf-balken {
  display: block; width: 100%;
  min-height: 2px;                 /* die gemessene Null bleibt sichtbar */
  background: var(--c-linie);
  border-radius: 2px 2px 0 0;
}
.lage-ad-verlauf-punkt--ohne .lage-ad-verlauf-balken {
  height: 2px; min-height: 2px;
  background: none;
  border-bottom: 1px dashed var(--c-linie);
  border-radius: 0;
}
.lage-ad-verlauf-tag {
  font-size: var(--t-11); color: var(--c-text-leise);
  text-align: center; font-variant-numeric: tabular-nums;
  margin-top: var(--s-1);
}
.lage-ad-verlauf-hinweis {
  margin: var(--s-1) 0 0; font-size: var(--t-11); line-height: 1.5;
}

/* ==========================================================================
 * s07 (2026-09-04) — BLAETTERN, PLANSTAND, DICHTE, MEDIUM ALS MEDIUM
 * Grossjob 20260903-...-etikett-rechte-schleifen-prio2, Segment s07.
 *
 * Alle Zahlen hier sind GEMESSEN, nicht geschaetzt: `pruefungen/
 * messung_layout_s07.py` faehrt die Ansicht im Browser und misst Rect gegen
 * Rect (nicht scrollWidth — ein Element mit eigenem overflow beschneidet
 * korrekt und ist kein Befund).
 * ========================================================================== */

/* --- 1) DIE EBENE-1-NAVIGATION WAR DIE HALBE KOPFHOEHE -------------------
 *
 * GEMESSEN VOR DER AENDERUNG (1280x800, angemeldet):
 *   .kopf gesamt 281 px = 35 % des Bildschirms
 *   davon .bereichswahl 95 px — DREI Zeilen fuer neun Eintraege
 *   .bereichswahl Kasten 425..855 px, waehrend .reiter 16..1264 px lief
 *
 * Die Ursache stand im 860-px-Block weiter oben: er weitet `.huelle`,
 * `.kopf-innen`, `.reiter` und `.werkzeuge` auf die Rasterbreite —
 * `.bereichswahl` steht dort NICHT und blieb deshalb bei `--b-post` (430 px)
 * und zentriert. Neun Eintraege in einer 430 px schmalen, mittigen Spalte:
 * genau das ist der „grosse leere Bereich oben" und die „rechte Spalte", die
 * Christian gesehen hat.
 *
 * Es ist kein neues Layout, sondern ein NACHZUG: die Zeile wurde beim Bau
 * von Ebene 1 (s02, 2026-08-27) schlicht nicht in die Liste aufgenommen. Der
 * Umbruch (`flex-wrap`) bleibt unangetastet — er ist die Heilung des
 * unsichtbaren vierten Reiters und wird durch mehr Platz nur seltener noetig.
 */
@media (min-width: 860px) {
  .ansicht-nebeneinander .bereichswahl {
    max-width: calc(var(--b-post) * 3 + var(--s-4) * 2);
  }
}

/* --- 2) DIE BLAETTER-LEISTE --------------------------------------------- */
.blaettern {
  max-width: var(--b-post);
  margin: 0 auto var(--s-4);
  display: grid; gap: var(--s-2);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--c-linie-zart);
  border-bottom: 1px solid var(--c-linie-zart);
}
@media (min-width: 860px) {
  .ansicht-nebeneinander .blaettern {
    max-width: calc(var(--b-post) * 3 + var(--s-4) * 2);
  }
}
.blaettern-groesse,
.blaettern-weg,
.blaettern-liste {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1);
}
.blaettern-titel {
  font-size: var(--t-12); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--c-text-leise);
  margin-right: var(--s-1);
}
/* Dieselbe Bauform wie `.bereich-knopf`: der AKTIVE Eintrag ist ein <span>
   ohne href, kein Link auf die Seite, auf der man schon steht. */
.groesse-knopf, .sprung, .blaetter-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; min-height: 2rem;            /* Fingerkuppen-Ziel */
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r);
  font-size: var(--t-12);
  color: var(--c-text-leise); text-decoration: none;
  border: 1px solid var(--c-linie-zart);
  white-space: nowrap;
}
a.groesse-knopf:hover, a.sprung:hover, a.blaetter-knopf:hover {
  color: var(--c-text); background: var(--c-grund);
}
.groesse-knopf--aktiv, .sprung--aktiv {
  color: var(--c-text); font-weight: 600;
  background: var(--c-grund); border-color: var(--c-linie);
}
/* Ein Rand, an dem es nicht weitergeht, ist KEIN Knopf: kein Rahmen, kein
   Zeiger, nicht anklickbar. Was aussieht wie ein Knopf, muss einer sein. */
.blaetter-knopf--aus {
  opacity: 0.35; border-color: transparent; cursor: default;
}
.blaettern-merk { margin-left: auto; font-size: var(--t-11); }
.blaettern-hinweis { margin: 0; }
.schieber { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 12rem; }
.schieber input[type=range] { flex: 1 1 auto; min-width: 6rem; accent-color: var(--c-text); }
.schieber output { font-size: var(--t-12); color: var(--c-text-leise);
  min-width: 4rem; text-align: right; font-variant-numeric: tabular-nums; }

/* --- 3) DER PLANSTAND AN DER KARTE --------------------------------------
 * GEMESSEN: die erste Fassung dieses Blocks war 168 px hoch — mehr als die
 * Kopfzeile, die Bestandteile-Leiste und die Befunde ZUSAMMEN. Ein Hinweis,
 * der groesser ist als die Sache, auf die er hinweist, wird weggesehen.
 * Deshalb: eine Zeile, fett, mit dem Rest im Aufklapper. Der volle Text
 * bleibt im ausgelieferten HTML — zusammengeklappt, nicht entfernt.
 */
.planstand-marke {
  margin: 0; padding: var(--s-2) var(--s-4);
  background: var(--c-warn-grund); color: var(--c-warn-text);
  border-bottom: 1px solid var(--c-warn-linie);
  font-size: var(--t-12); line-height: 1.45;
}
.planstand-marke b { font-weight: 600; }
.planstand-zeile { display: block; margin-top: var(--s-1); }
.planstand-marke code { font-size: var(--t-11); word-break: break-all; }

/* --- 3b) DIE BREMSE AN DER KARTE (EL-20260909-4cd51f0d, Entscheidung 2) ---
 * Elinas Wortlaut: "Grund und erwartete Uhrzeit anzeigen, aber NICHT
 * permanent sichtbar - nur als aufklappbares Dropdown, wenn ich draufklicke
 * und mehr wissen will."
 *
 * BAUFORM WOERTLICH VOM PLANSTAND darueber uebernommen und NICHT neu
 * erfunden: dessen Lehre ("ein Hinweis, der groesser ist als die Sache, auf
 * die er hinweist, wird weggesehen") gilt hier eins zu eins. Zugeklappt ist
 * es EINE Zeile; der Beleg steht im ausgelieferten HTML, nur eben
 * zusammengeklappt.
 *
 * WARUM EIN EIGENER FARBTON (--c-hinweis-*) UND NICHT --c-warn-*: die
 * Karenz ist kein Fehler. "Der Beitrag wartet noch 7 Minuten" in derselben
 * Warnfarbe wie "erscheint nie" wuerde einen Normalzustand wie einen Defekt
 * aussehen lassen - und beim naechsten echten Befund waere die Farbe
 * abgenutzt. Faellt die Variable aus, greift der Ruecktausch auf die
 * vorhandenen Grundtoene; ein fehlender Farbwert darf nie unsichtbaren Text
 * ergeben.
 */
.bremse-marke {
  margin: 0; padding: var(--s-2) var(--s-4);
  background: var(--c-hinweis-grund, var(--c-grund));
  color: var(--c-hinweis-text, var(--c-text));
  border-bottom: 1px solid var(--c-hinweis-linie, var(--c-linie));
  font-size: var(--t-12); line-height: 1.45;
}
.bremse-marke b { font-weight: 600; }
/* Der Griff muss als Griff erkennbar sein. Ein Aufklapper, den niemand als
   anklickbar liest, stellt die Auskunft genauso stumm wie gar keine - und
   dann waere sie wieder da, wo sie vor diesem Bau war: im Betriebslog. */
.bremse-kopf { cursor: pointer; }
.bremse-zeile { display: block; margin-top: var(--s-1); }
.bremse-zeile--ruhig { color: var(--c-text-leise); }

/* --- Die Warnung vor zu dichten Terminen (Entscheidung 3) ----------------
 * ZWEI WEGE, SICHTBAR UNGLEICH GEWICHTET: der geprüfte Vorschlag traegt den
 * normalen Knopf, "trotzdem so" den leisen. Das ist eine Empfehlung, keine
 * Sperre -- beide Knoepfe fuehren zum Ziel, und der zweite fuehrt Elinas
 * urspruenglichen Wunsch unveraendert aus. Waeren beide gleich laut, muesste
 * sie jedes Mal neu lesen, welcher welcher ist; waere der zweite versteckt,
 * waere die Warnung ein Riegel mit hoeflichem Text.
 */
.warnung-weg {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap; margin: var(--s-3) 0;
}

/* --- 4) DIE BEFUNDE ALS AUFKLAPPER --------------------------------------
 * `.befunde` ist seit s07 ein <details>. Die Grid-Regel von oben gilt
 * weiter fuer den GEOEFFNETEN Zustand; zugeklappt ist nur die Zusammenfassung
 * sichtbar. GEMESSEN: 120 px -> 41 px je Karte.
 */
details.befunde { display: block; }
details.befunde[open] { display: grid; gap: var(--s-2); }
.befunde-kopf {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-12); color: var(--c-warn-text);
  padding: var(--s-1) 0;
}
.befunde-kopf::-webkit-details-marker { display: none; }
.befunde-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--c-warn-grund); border: 1px solid var(--c-warn-linie);
  font-weight: 700; font-size: var(--t-11); flex: 0 0 auto;
}
.befunde-kopf::after { content: "▾"; margin-left: auto; opacity: 0.6; }
details.befunde[open] .befunde-kopf::after { content: "▴"; }

/* Die Erklaerung zur Bemerkungs-Regel steht seit s07 im Aufklapper. Die
   KNOEPFE und das Freitextfeld bleiben unangetastet — nur der erklaerende
   Absatz darunter ist zugeklappt. GEMESSEN: .urteil 228 px -> 148 px. */
.bemerkung-regel summary { cursor: pointer; list-style: none; }
.bemerkung-regel summary::-webkit-details-marker { display: none; }
.bemerkung-regel summary::after { content: " ▾"; opacity: 0.6; }
.bemerkung-regel[open] summary::after { content: " ▴"; }

/* --- 5) DAS MEDIUM ALS DAS, WAS ES IST ----------------------------------
 * `<video>` bekommt exakt dieselbe Geometrie wie `<img>`: derselbe Rahmen,
 * dasselbe `object-fit: cover`. Was hier abgeschnitten ist, ist live auch
 * abgeschnitten — die Zusage des Nachbaus gilt fuer Video genauso.
 */
.rahmen video { width: 100%; height: 100%; object-fit: cover; display: block;
  background: #000; }
.rahmen.ganz video { object-fit: contain; }
/* Audio und Unbekanntes bekommen KEIN Platzhalterbild (Hausregel: „Generisches
   Platzhaltergrau sieht aus wie Inhalt und ist keiner") — sondern einen
   ehrlichen Satz und den Weg zur Datei. */
.medium-anders {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-1);
  width: 100%; height: 100%; padding: var(--s-4);
  color: #fff; text-decoration: none; text-align: center;
}
.medium-anders .leise { color: rgba(255,255,255,0.7); font-size: var(--t-12); }

/* --- 6) DER GRUND HINTER EINER NULL AM REITER --------------------------- */
.reiter-grund {
  font-size: var(--t-11); color: var(--c-warn-text);
  border: 1px solid var(--c-warn-linie); border-radius: var(--r);
  padding: 0 var(--s-1);
}
.reiter-grund-lang {
  max-width: var(--b-post); margin: var(--s-2) auto 0;
}
@media (min-width: 860px) {
  .ansicht-nebeneinander .reiter-grund-lang {
    max-width: calc(var(--b-post) * 3 + var(--s-4) * 2);
  }
}

/* --- 7) DIE DICHTE ANSICHT ----------------------------------------------
 * „Eine kompakte Darstellung, in der mehrere Posts nebeneinander
 * vergleichbar sind." (Christian)
 *
 * SIE VERKLEINERT, SIE BESCHNEIDET NICHT. Das Seitenverhaeltnis (`--ar`)
 * bleibt unangetastet, `object-fit: cover` bleibt — die Kachel wird nur
 * schmaler, und die Hoehe folgt dem Verhaeltnis. Damit bleibt die Zusage des
 * Nachbaus gueltig: was hier abgeschnitten ist, ist live auch abgeschnitten.
 * Eine Deckelung der HOEHE haette dagegen einen zweiten, erfundenen Beschnitt
 * eingefuehrt, den es live nicht gibt.
 *
 * SIE IST OPT-IN, und der Vorgabewert bleibt die heutige Ansicht. Der
 * Kommentar am 1280-px-Block oben nennt den Grund: schmale Spalten waren
 * einmal ein gemessener Rueckschritt gegen Elinas Zusage „telefonbreite
 * Kacheln". Als GEWAEHLTE Ansicht ist das kein Rueckschritt, sondern ein
 * Werkzeug — als Vorgabe waere es einer.
 *
 * GEMESSEN (1280x800, ein Post): normal 416x1157 px. Dicht: 280 px breit,
 * Medienflaeche 350 statt 518 px.
 */
@media (min-width: 860px) {
  /* KORREKTUR AM SELEKTOR, GEMESSEN STATT ANGENOMMEN: hier stand zuerst
   * `body.dichte-dicht .ansicht-nebeneinander .postraster` -- ein
   * NACHFAHREN-Selektor. Beide Klassen sitzen aber am SELBEN <body>, die
   * Regel griff also nie. Gemessen im Browser: die Kachel blieb in beiden
   * Ansichten 416 px breit, die dichte Ansicht war eine Zusage ohne Wirkung.
   * Richtig ist die Verkettung ohne Leerzeichen. */
  body.dichte-dicht.ansicht-nebeneinander .postraster {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-4) var(--s-3);
  }
  body.dichte-dicht.ansicht-nebeneinander .postraster > .post { max-width: none; }
  body.dichte-dicht .p-text { font-size: var(--t-12); }
  body.dichte-dicht .bemerkung { rows: 1; min-height: 2.2rem; }
}

/* --- Einplanen (EL-20260906-19fe3c86) ---------------------------------
   Die Antwort der Posting-Kette wird WOERTLICH gezeigt. Sie ist als
   Fliesstext mit Einrueckungen geschrieben ("  Termin : ...", "  Kanal :
   ..."), also braucht sie eine Darstellung, die Zeilenumbrueche und
   Leerzeichen erhaelt -- aber sie soll nicht wie Programmtext aussehen,
   denn sie ist ein Satz an Elina. Darum `pre` mit der normalen Schrift und
   `white-space: pre-wrap`, damit lange Zeilen auf dem Telefon umbrechen
   statt seitlich zu verschwinden. */
pre.antwort {
  /* EIN NAMENSZUSAMMENSTOSS, GEFUNDEN AM 2026-09-17 (EL-20260917-cc77b88c).
     `system.css` gibt `.antwort { display: grid; gap: ...; margin: ... }` --
     das ist die ANTWORTZEILE DER STARTSEITE (drei Kaesten nebeneinander).
     Dieses `pre` heisst zufaellig genauso, traegt also seit dem 2026-09-10
     `display: grid` mit, obwohl es ein Textblock ist. Die Folge war
     sichtbar und wurde falsch der Kartenbreite zugeschrieben: der Text
     brach schon bei rund 190 px um, obwohl die Spalte 332 px breit war --
     Elinas "extrem schmal in die Laenge gequetscht" hatte ZWEI Ursachen,
     und die Breite allein zu heilen haette die zweite stehen lassen.
     `display: block` stellt den Textblock wieder her; der Name bleibt, weil
     Vorlage und Proben ihn tragen. */
  display: block;
  margin: 0;
  font-family: inherit;
  font-size: var(--t-14);
  line-height: 1.55;
  white-space: pre-wrap;
  /* `anywhere` (bis 2026-09-17) brach MITTEN IM WORT, sobald die Spalte
     schmal war -- genau der Fehler aus Elinas Meldung EL-20260917-cc77b88c
     ("erzwungene Umbrueche mitten im Wort"). Der Grund fuer die Regel war
     das Telefon: eine lange Zeile soll nicht seitlich verschwinden.
     `break-word` haelt genau das -- es bricht ein Wort NUR, wenn es allein
     nicht in die Zeile passt -- und laesst normalen Satz in Ruhe. */
  overflow-wrap: break-word;
  max-width: var(--b-lesen);
}

/* Das Bedienelement selbst: ein aufklappbares Feld direkt am Post.
   AUFKLAPPBAR und nicht dauerhaft offen, weil an einer Liste mit vielen
   Posts sonst jede Zeile drei Eingabefelder traegt und die Uebersicht,
   um die es auf dieser Seite geht, verlorengeht. */
.einplanen { margin-top: var(--s-3); }
.einplanen > summary {
  cursor: pointer; font-size: var(--t-13); font-weight: 600;
  padding: var(--s-2) 0; list-style: none;
}
.einplanen > summary::-webkit-details-marker { display: none; }
.einplanen > summary::before { content: "🗓 "; }
.einplanen-felder {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end;
  margin-top: var(--s-2);
}
.einplanen-felder label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--t-12); font-weight: 600;
}
.einplanen-felder input, .einplanen-felder select {
  font: inherit; font-size: var(--t-13); padding: 4px 6px;
  border: 1px solid var(--c-linie); border-radius: 4px;
  background: var(--c-grund); color: inherit;
}
.einplanen-felder button { font-size: var(--t-13); padding: 5px 12px; }
/* Das Facebook-Haekchen im Karten-Formular (Elina EL-20260919-d9321deb).
   DAS KAESTCHEN STEHT NEBEN SEINEM TEXT, NICHT DARUEBER. Die allgemeine
   Regel `.einplanen-felder label` stellt Beschriftung UEBER Feld (column) --
   richtig fuer "Datum" ueber einem Datumsfeld, falsch fuer ein Kaestchen.

   ZWEI DINGE MUSSTEN DAFUER ZUSAMMENKOMMEN, und wer nur das erste macht,
   tauscht einen sichtbaren Fehler gegen einen groesseren (2026-09-21
   gemessen, nicht ueberlegt):

   (1) SPEZIFITAET. Hier stand `.einplanen-fb` allein, also (0,1,0);
       `.einplanen-felder label` hat (0,1,1) und gewinnt unabhaengig von der
       Reihenfolge. Die Sonderregel war seit ihrer Geburt wirkungslos, und
       der Kommentar an dieser Stelle sagte "ohne diese Regel stuende das
       Kaestchen ueber seiner Beschriftung" -- er beschrieb richtig, was zu
       sehen war, und verschwieg, dass es TROTZ der Regel zu sehen war.
       Gemessen vorher: 29 von 29 Haekchen auf der Startseite `column`, auf
       1440 px wie auf 390 px, in den Tueren /einplanen und /freigabe.

   (2) DIE ZEILE DARF NICHT LAENGER WERDEN, ALS SIE MUSS. `.freigabe-zeile`
       ist ein Raster `72px minmax(0,1fr) auto`: die dritte Spur nimmt sich
       ihre MAX-content-Breite, die Textspalte daneben hat als Untergrenze
       0. Ein `display: flex; flex-direction: row` legt Kaestchen, Text UND
       Hinweis auf EINE max-content-Zeile -- die Spur wuchs von 983 auf
       1150 px, und die Textspalte der Karte fiel auf 0 px: der Satz wurde
       zum Buchstabenturm und das Formular lag darueber. `flex-wrap` hilft
       dagegen NICHT (es senkt min-content, gemessen wird max-content),
       `min-width: 0` auch nicht. Was hilft, ist ein echter Umbruch: ein
       BLOCK-Label mit dem Hinweis als Block-Kind. Dann ist die laengste
       Zeile "Kaestchen + Beschriftung" statt "Kaestchen + Beschriftung +
       Hinweis". Rest-Preis, gemessen und bewusst bezahlt: die Textspalte
       ist 151 statt 167 px breit.

   Kein flex noetig: ein Block-Label stellt ein inline-Kaestchen von sich aus
   neben seinen Text. `flex-basis` bleibt, weil das Label ein Kind des
   flex-Containers `.einplanen-felder` ist und dort eine eigene Zeile fuellt.
   Alle drei Traeger-Vorlagen (_einplan_felder.html, einplanen.html,
   bearbeiten.html) haengen das Haekchen in `div.einplanen-felder`. */
.einplanen-felder .einplanen-fb {
  display: block; flex-basis: 100%;
  font-size: var(--t-12); font-weight: 600;
}
.einplanen-felder .einplanen-fb input[type="checkbox"] {
  width: auto; margin: 0 6px 0 0; flex: none; align-self: center;
}
.einplanen-felder .einplanen-fb .klein {
  display: block; font-weight: 400; opacity: .8;
}
.einplanen-hinweis { font-size: var(--t-12); margin: var(--s-2) 0 0; opacity: .8; }
/* Collab / zweiter Kanal (Elina EL-20260924-03775b7a). FESTE BREITE, und das
   ist die Lehre aus dem Absatz ueber `.freigabe-zeile` direkt darueber: die
   dritte Rasterspur dort nimmt ihre MAX-content-Breite, und der Erklaersatz
   hier wuerde als EINE Zeile gemessen -- die Textspalte der Karte fiele auf
   0 px. Ein Element mit fester `width` traegt genau diese Breite als seinen
   max-content-Beitrag bei; `max-width: 100%` haelt es auf dem Telefon im
   Rahmen. */
.einplanen-felder .einplanen-collab {
  flex-basis: 100%; width: 24em; max-width: 100%;
  font-size: var(--t-12);
}
.einplanen-collab > summary { cursor: pointer; font-weight: 600; }
.einplanen-collab fieldset {
  border: 1px solid var(--c-linie); border-radius: 4px;
  padding: var(--s-2); margin: var(--s-2) 0;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.einplanen-collab legend { font-weight: 600; padding: 0 4px; }
.einplanen-collab .klein { font-weight: 400; opacity: .8; margin: 0; }

/* Ort B: die eingereichten Posts, die noch auf ihren Termin warten.
   Eine schlichte Zeile je Post -- sie soll die Planansicht darunter
   ankuendigen, nicht mit ihr konkurrieren. */
.wartend-zeile {
  padding: var(--s-2) 0;
  border-top: 1px solid var(--c-linie);
}
.wartend-zeile:first-of-type { border-top: none; }
.wartend-zeile > .leise { display: block; font-size: var(--t-12); }

/* --- Post korrigieren (EL-20260906-d7526837) ------------------------------
   Die Karten stehen als RASTER, nicht als Liste, und sie tragen ihr Bild.
   Der Grund steht in Elinas Auftrag: "z.B. eine fehlerhafte Karte". Welche
   die fehlerhafte ist, weiss sie vom ANSEHEN -- eine Maske, die nur
   "Karte 1 ... Karte 6" auflistet, verlangt von ihr, die Nummer aus dem
   Gedaechtnis zu treffen, und ein Fehlgriff tauscht die falsche Karte aus.
   Die Bedienelemente liegen deshalb AM Bild und nicht darunter in einer
   zweiten Spalte, die man dazu zaehlen muesste. */
.bearbeiten-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3);
  margin: var(--s-3) 0 var(--s-6);
}
.bearbeiten-karte {
  margin: 0;
  border: 1px solid var(--c-linie);
  border-radius: 6px;
  overflow: hidden;
  background: var(--c-flaeche);
}
.bearbeiten-karte img {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; background: var(--c-linie-zart);
}
/* Ein Video bekommt eine FLAECHE mit Beschriftung statt eines
   <video>-Elements: die Maske soll die Karte identifizieren, nicht sie
   abspielen -- und ein 64-MiB-Autoload je Karte waere auf dem Telefon
   die teuerste Art, "hier ist ein Video" zu sagen. */
.bearbeiten-video {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 5; background: var(--c-linie-zart);
  font-size: var(--t-13); font-weight: 600; letter-spacing: .08em;
  color: var(--c-text-leise, inherit); opacity: .7;
}
.bearbeiten-karte figcaption {
  padding: var(--s-2);
  font-size: var(--t-12);
  display: flex; flex-direction: column; gap: var(--s-1);
  border-top: 1px solid var(--c-linie-zart);
}
.bearbeiten-tausch { display: flex; flex-direction: column; gap: 2px; }
.bearbeiten-tausch input[type=file] { font-size: var(--t-11); max-width: 100%; }
.bearbeiten-weg {
  display: flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-12);
}

/* ==========================================================================
   SICHTEN (Route /sicht, /sicht/<key>) -- angelegt 2026-09-07, Grossjob
   ...-visualisierungs-manager-mail-setup-sichtbar-machen-fuer-elina (s04).

   RUECKWEG: diesen Block loeschen. Er ist rein additiv -- kein Selektor
   darueber wird ueberschrieben, keine bestehende Klasse umdefiniert. Die
   Sicherung des Bau-Tages liegt als stil.css.bak-sicht-20260907T* daneben.

   ALLE BREITEN SIND FLIESSEND, KEINE FESTE SPALTENZAHL. Nr. 1 der zwoelf
   Punkte vom 02.09. war genau ein festes Raster, das bei MITTLEREN
   Fensterbreiten auf 352 px quetschte. `auto-fit` mit `minmax` passt sich an
   jede Breite an; gemessen wird das trotzdem und nicht behauptet
   (pruefungen/messung_sicht_breiten.py, sieben Breiten von 360 bis 1600).
   ========================================================================== */

/* DER KOPF FOLGT DER HUELLE -- aber nur auf Seiten, die das AUSDRUECKLICH
   sagen. `.kopf-innen` und `.bereichswahl` stehen global auf
   `max-width: var(--b-post)` = 430 px, und das ist auf den Instagram-Seiten
   richtig: dort IST die ganze Flaeche eine telefonbreite Spalte. Auf einer
   1400 px breiten Seite steht die Navigation dann als schmaler Block in der
   Mitte, waehrend der Inhalt links am Rand beginnt -- gemessen im
   Bildschirmfoto vom 07.09., Kopf bei x=500..940, Inhalt ab x=20.

   GEAENDERT WIRD DESHALB NICHTS GLOBAL: `body.seite--breit` gilt nur fuer die
   Seiten, die diese Klasse selbst setzen (heute die beiden Sicht-Seiten).
   `konzepte.html`, `raster.html` und `beitrag.html` benutzen `huelle--breit`
   ohne diese Klasse und bleiben byte-genau, wie sie waren -- ihre Kopfbreite
   ist eine fremde Entscheidung und gehoert ihren Eignern.
   RUECKWEG: die Klasse aus den zwei Vorlagen nehmen. */

.sicht-frage { font-size: var(--t-kopf); }
.sicht-tafel { margin: 1.6rem 0 2.2rem; }
.sicht-tafel-titel { margin: 0 0 .2rem; font-size: var(--t-titel3); }
.sicht-tafel-erklaerung { margin: 0 0 .7rem; max-width: 62ch; }

/* Sprungmarken und Wege-Wahl: umbrechende Reihe, nie eine Rolle ohne Griff. */
.sicht-marken, .sicht-kettenwahl {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .8rem 0 1.4rem;
}

/* WAS AUSSIEHT WIE EIN KNOPF, MUSS EINER SEIN (Nr. 2 der zwoelf Punkte: das
   Teilen-Icon trug 5,6 % Strichstaerke statt 79,7 %). Deshalb ein echter
   Rahmen, echter Kontrast und `cursor:pointer` -- und nur hier, nie an einem
   Element ohne Wirkung. */
.sicht-knopf {
  display: inline-block; padding: .3rem .7rem;
  border: 1px solid #4a4a4a; border-radius: .35rem;
  background: #fff; color: #1a1a1a; text-decoration: none;
  font-size: var(--t-text); line-height: 1.35; cursor: pointer;
}
.sicht-knopf:hover, .sicht-knopf:focus { background: #f0ece6; border-color: #1a1a1a; }
.sicht-knopf--tun { font-weight: 600; border-width: 2px; padding: .45rem 1.1rem; }

/* Kennzahlen: fliessend, damit auch 700-900 px sauber umbrechen. */
.sicht-zahlen {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sicht-zahl {
  border: 1px solid #ddd6cc; border-radius: .4rem; padding: .7rem .8rem;
  background: #fdfcfa; display: flex; flex-direction: column; gap: .15rem;
}
.sicht-zahl-wert { font-size: var(--t-titel1); font-weight: 700; line-height: 1.1; }
.sicht-zahl-einheit { font-size: var(--t-fuss); color: #5a5248; }
.sicht-zahl-etikett { font-size: var(--t-text); }
.sicht-zahl-hinweis { font-size: var(--t-caption); }

/* Tabelle: EIGENES overflow. Vierzehn Spalten lassen sich auf 375 px nicht
   stauchen, ohne unlesbar zu werden -- ein Element mit eigenem overflow
   beschneidet seinen Inhalt selbst und ist ausdruecklich KEIN Ueberlauf. */
.sicht-tabelle-rahmen { overflow-x: auto; max-width: 100%; }
.sicht-tabelle { border-collapse: collapse; font-size: var(--t-fuss); }
/* OBEN UND UNTEN EINE GRENZE. `max-width: 34ch` deckelt die Zeilenlaenge seit
   jeher; `min-width: var(--b-textmin)` ist die Gegenrichtung und kommt aus
   Elinas Grundsatz "in die Breite" (EL-20260921-491012e8, R6). Eine
   Tabellenspalte rechnet ihre Breite aus dem Inhalt -- ohne Untergrenze wird
   sie so schmal wie das kuerzeste Wort es zulaesst, und mit dem alten
   `overflow-wrap: anywhere` war das EIN ZEICHEN: auf 1440 px standen in den
   Sicht-Tabellen 41 Buchstabentuerme ("RF-696252" auf 58 px in drei Zeilen).
   Wird die Tabelle dadurch breiter als die Seite, rollt
   `.sicht-tabelle-rahmen` (overflow-x: auto, eine Zeile darueber) -- rollen
   ist der richtige Rueckweg, schreddern nicht. */
.sicht-tabelle th, .sicht-tabelle td {
  border: 1px solid #e2dcd2; padding: .35rem .55rem;
  text-align: left; vertical-align: top;
  min-width: var(--b-textmin); max-width: 34ch;
}
.sicht-tabelle th { background: #f4f0ea; }
.sicht-blaettern { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ABSATZ BLEIBT ABSATZ, UMBRUCH BLEIBT UMBRUCH (Nr. 4). `pre-wrap` haelt auch
   den einzelnen Zeilenumbruch INNERHALB eines Absatzes -- genau der ging am
   02.09. in der Listenansicht verloren, obwohl er gespeichert war. */
.sicht-absatz { white-space: pre-wrap; max-width: 70ch; margin: 0 0 .7rem; }
.sicht-liste { max-width: 78ch; }
.sicht-liste li { margin-bottom: .45rem; }

/* Die Mail-Vorschauen nebeneinander, solange Platz ist -- sonst untereinander.
   KEIN fester Rahmen um den iframe: seine Breite IST die Aussage. */
.sicht-vorschauen { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-start; }
/* DIE BREITE IST DIE AUSSAGE -- also darf sie nicht schrumpfen. Eine als
   "600 px" beschriftete Vorschau, die auf einem 375-px-Telefon 360 px breit
   waere, behauptete etwas Falsches ueber die Mail. Deshalb ROLLT der Rahmen,
   statt den Inhalt zu stauchen: `overflow-x` am Kasten, `max-width: none` am
   iframe. Ein Element mit eigenem overflow beschneidet korrekt und ist
   ausdruecklich kein Ueberlauf-Befund. */
.sicht-vorschau { margin: 0; max-width: 100%; overflow-x: auto; }
.sicht-vorschau-kopf { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline;
                       margin-bottom: .35rem; max-width: 100%; }
.sicht-breite { font-variant-numeric: tabular-nums; font-weight: 600; }
.sicht-rahmen {
  border: 1px solid #cfc7bb; background: #fff; height: 70vh; min-height: 420px;
  max-width: none; display: block;
}
.sicht-rahmen-hinweis { margin: 0 0 .6rem; max-width: 70ch; }

/* Der Weg. Drei Zeitzustaende, drei Darstellungen -- eine GEPARSTE Zeit darf
   nie aussehen wie eine gemessene (33 der 51 Strecken tragen ihre Zeit nur als
   Freitext). Unterschieden wird nicht nur durch Farbe: der Rahmen links
   traegt die Aussage mit, damit sie auch ohne Farbwahrnehmung ankommt. */
.sicht-kette { margin: 1rem 0 1.6rem; }
.sicht-kette-titel { font-size: var(--t-kopf); margin: 0 0 .4rem; }
.sicht-stationen { list-style: none; margin: 0; padding: 0; }
.sicht-station {
  display: grid; gap: .1rem .8rem; padding: .5rem .7rem; margin-bottom: .4rem;
  border: 1px solid #e2dcd2; border-left-width: 5px; border-radius: .3rem;
  background: #fdfcfa;
  grid-template-columns: minmax(200px, 22rem) 1fr;
}
.sicht-station-zeit { font-weight: 600; grid-row: 1; }
.sicht-station-was { grid-row: 1; }
.sicht-station-warum { grid-column: 1 / -1; font-size: var(--t-fuss); }
.sicht-station[data-zeit="gemessen"] { border-left-color: #2f6b3a; }
.sicht-station[data-zeit="geparst"]  { border-left-color: #9a7b1f; border-left-style: dashed; }
.sicht-station[data-zeit="unbekannt"]{ border-left-color: #8a8a8a; border-left-style: dotted; }
.sicht-station[data-zeit="bekannt"]  { border-left-color: #2f6b3a; }
.sicht-bilanz { display: flex; flex-wrap: wrap; gap: .9rem; margin: .2rem 0 .9rem; }
.sicht-bilanz-teil { font-size: var(--t-fuss); }

/* Zustaende. Leer, Hinweis, Warnung -- drei verschiedene Saetze, drei
   verschiedene Bilder. Nr. 8: leer muss als LEER erkennbar sein. */
.sicht-leer {
  border: 1px dashed #b9b0a3; border-radius: .3rem; padding: .6rem .8rem;
  background: #faf7f2; color: #4a443b; max-width: 70ch;
}
.sicht-hinweis { border-left: 5px solid #7a7266; padding: .55rem .8rem;
                 background: #faf8f4; max-width: 78ch; margin: .5rem 0; }
.sicht-hinweis--warnung { border-left-color: #9a5b1f; background: #fdf5ec; }
.sicht-warnung {
  border: 2px solid #9a2f2f; border-radius: .35rem; padding: .6rem .85rem;
  background: #fdf1f1; max-width: 78ch; margin: .6rem 0;
}
/* Die gemessene Versand-Zusage. Gruen ist sie NUR, wenn sie gemessen wurde --
   "nicht gemessen" faellt oben in `.sicht-warnung` und nicht hierher (Nr. 7). */
.sicht-versandsperre {
  border: 2px solid #2f6b3a; border-radius: .35rem; padding: .6rem .85rem;
  background: #f1f8f2; max-width: 78ch; margin: .6rem 0;
}

/* Das Formular. Ein Feld je Zeile, Etikett darueber -- auf 375 px ist alles
   andere unbedienbar. */
.sicht-form { max-width: 62rem; }
.sicht-feld { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 1rem; }
.sicht-feld label { font-weight: 600; }
.sicht-feld input[type="text"], .sicht-feld textarea, .sicht-feld select {
  font: inherit; padding: .45rem .55rem; border: 1px solid #a49a8c;
  border-radius: .3rem; background: #fff; max-width: 100%; box-sizing: border-box;
}
.sicht-feld textarea { min-height: 8rem; resize: vertical; }
.sicht-feld-hilfe { font-size: var(--t-fuss); max-width: 70ch; }
.sicht-pflicht { color: #9a2f2f; }
.sicht-form-fuss { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.sicht-karten { display: grid; gap: 1rem;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sicht-fuss { margin-top: 2.5rem; }

/* ===================================================================
 * Die Tafel-Art `diagramm` und die Richtung an der Kennzahl
 * Job 20260908-BAU-visualisierungen-tafel-art-diagramm-und-fuenf-zahlen.
 *
 * FARBE IST HIER NIE DER TRAEGER EINER AUSSAGE. Jede Aussage steht
 * zusaetzlich als WORT da ("gestiegen", "besser", "geparst", "kein
 * Vergleich"); die Farbe ist Beiwerk. Das ist Christians Bedingung
 * "barrierefrei genug, dass die Aussage auch ohne Farbe erkennbar ist"
 * -- und es ist der Grund, warum unten kein einziges Element ALLEIN
 * ueber `color` unterschieden wird.
 * =================================================================== */

.sicht-diagramm {
  margin: 10px 0 6px;
  padding: 0;
  /* WAAGERECHTE ROLLE STATT QUETSCHEN -- dieselbe Entscheidung wie bei
     `.sicht-tabelle-rahmen`. Das SVG skaliert bis `min-width` herunter
     und rollt erst danach; so bleibt die Beschriftung lesbar, statt auf
     einem Telefon zu Streichhoelzern zu werden. Ein Element mit eigenem
     overflow beschneidet seinen Inhalt selbst -- das ist korrekte
     Bauweise und ausdruecklich kein Ueberlauf-Befund. */
  overflow-x: auto;
}
.sicht-diagramm-svg {
  display: block;
  min-width: 420px;
  color: var(--c-text);     /* speist jedes `currentColor` im SVG */
}
.sicht-diagramm-tabelle caption { text-align: left; padding: 4px 0 6px; }
.sicht-diagramm-aus {
  border-left: 3px solid var(--c-linie);
  padding-left: 10px;
  margin: 8px 0;
}
.sicht-achsen-vorbehalt {
  margin: 6px 0 2px;
  padding: 8px 10px;
  border-left: 3px solid var(--c-warn-linie);
  background: var(--c-warn-grund);
  color: var(--c-warn-text);
  font-size: var(--t-fuss);
}

/* Die Richtung an der Kennzahl. Zeichen + Wort + Zeitraum, nie nur Farbe. */
.sicht-zahl-richtung {
  display: inline-flex;
  gap: .35em;
  align-items: baseline;
  font-size: var(--t-fuss);
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--c-linie);
}
.sicht-zahl-richtung--besser {
  border-color: var(--c-gut-linie); background: var(--c-gut-grund);
  color: var(--c-gut-text);
}
.sicht-zahl-richtung--schlechter {
  border-color: var(--c-hart-linie); background: var(--c-hart-grund);
  color: var(--c-hart-text);
}
/* KEIN VERGLEICH SIEHT ANDERS AUS ALS UNVERAENDERT -- gestrichelt statt
   durchgezogen. Faellt beides auf denselben Rahmen, ist die beruhigende
   Lesart gewaehlt, und genau das soll hier nicht passieren. */
/* KEIN RAHMEN. Die erste Fassung war ein gestrichelter Kasten -- im
   Bildschirmfoto vom 08.09. sah er auf jeder Kachel aus wie ein leeres
   EINGABEFELD, also wie etwas, das man ausfuellen soll. Ein Zustand, der
   wie eine Aufforderung aussieht, ist schlechter beschriftet als gar
   keiner. Jetzt: keine Flaeche, ein vorangestelltes Zeichen und das Wort. */
.sicht-zahl-richtung--ohne {
  border: 0; padding-left: 0; color: var(--c-text-leise);
  font-style: italic;
}
/* KEIN Zeichen davor. Der erste Versuch setzte einen Gedankenstrich per
   `content: "\2014"` -- im Bildschirmfoto stand danach ")4 kein Vergleich".
   Ein Zeichen, das von seiner eigenen Kodierung abhaengt, ist an genau der
   Stelle das falsche Mittel, an der es um Verlaesslichkeit geht: hier steht
   das WORT, und das Wort braucht kein Symbol. */
.sicht-zahl-vergleich { font-size: var(--t-caption); display: block; margin-top: 2px; }
.sicht-zahl--sammel { border-style: dashed; }

.sicht-weitere { margin: 10px 0 4px; }
.sicht-weitere > summary {
  cursor: pointer; font-size: var(--t-text); padding: 4px 0;
  color: var(--c-akzent);
}

@media (prefers-color-scheme: dark) {
  .sicht-diagramm-svg { color: #e8e8e8; }
}

/* ===== Technische Meta-Kennungen je Anzeige (2026-09-09, Job
   20260908-lage-ads-41-rohe-anzeigen-ids-im-sichtbaren-text-prio22) =========
   Der Rueckweg von der Bezeichnung zur rohen Kennung. Er ist ZUGEKLAPPT und
   leise gesetzt, weil er ein technisches Detail ist -- aber er ist DA:
   die Saetze nennen die Kennung nicht mehr, also muss sie hier stehen,
   sonst waere sie verschwunden statt uebersetzt.
   Form uebernommen von `.sicht-weitere`, kein zweites Aufklapp-Idiom. */
.lage-ad-kennungen { margin: 6px 0 2px; }
.lage-ad-kennungen > summary {
  cursor: pointer; font-size: var(--t-12); padding: 3px 0;
  color: var(--c-text-leise);
}
.lage-ad-kennungen-liste {
  margin: 4px 0 0; padding-left: 18px;
  font-size: var(--t-12); color: var(--c-text-leise);
}
.lage-ad-kennungen-liste code { font-size: var(--t-11); }

/* --- Aus der Übersicht entfernen (Elina, 2026-09-09) ----------------------
   Ein LEISER Knopf, kein roter. Die Farbe soll die Handlung nicht
   dramatisieren: es wird nichts gelöscht, sondern ein Vermerk gesetzt, und
   der Weg zurück steht daneben. Ein Warnrot hier hieße "Vorsicht,
   unwiderruflich" -- also genau das, was baulich NICHT der Fall ist.
   Rot wäre erst dann ehrlich, wenn der Rückweg fehlte. */
.entfernen-form { display: inline-block; margin: var(--s-2) var(--s-2) 0 0; }
.knopf-leise {
  font: 500 var(--t-12)/1 inherit; font-family: inherit;
  padding: 4px 10px; border-radius: var(--r); cursor: pointer;
  border: 1px solid var(--c-linie); background: var(--c-flaeche);
  color: var(--c-text-leise);
}
.knopf-leise:hover { color: var(--c-text); border-color: var(--c-text-leise); }
/* Beim Hover -- und NUR dort -- wird die Löschen-Absicht sichtbar. Vorher
   soll der Knopf nicht schreien, beim Zielen aber eindeutig sein. */
.knopf-leise.entfernen:hover {
  border-color: var(--c-hart-linie); color: var(--c-hart-text);
}
/* --- Endgültig löschen (Elina, 2026-09-19, EL-20260919-a70d9313) ----------
   Der ZWEITE Löschknopf, und er darf nicht aussehen wie der erste. Der Satz
   darüber gilt weiter: Rot ist ehrlich, wenn der Rückweg fehlt -- und hier
   fehlt er für Elina (der Papierkorb der Kette ist ein Weg auf Zuruf, kein
   Knopf). Also trägt dieser Knopf die harte Linie DAUERHAFT, nicht erst beim
   Zielen. Die <summary> ist der Knopf: erster Klick öffnet den Satz und den
   eigentlichen Sende-Knopf (zwei Klicks, kein Skript). */
details.endgueltig { display: inline-block; margin: var(--s-2) var(--s-2) 0 0; vertical-align: top; }
details.endgueltig > summary { list-style: none; display: inline-block; }
details.endgueltig > summary::-webkit-details-marker { display: none; }
.knopf-leise.endgueltig { border-color: var(--c-hart-linie); color: var(--c-hart-text); }
.knopf-leise.endgueltig:hover { background: var(--c-hart-grund); color: var(--c-hart-text); }
.endgueltig-frage {
  margin-top: var(--s-2); padding: var(--s-2) var(--s-3); max-width: 36em;
  border: 1px solid var(--c-hart-linie); border-radius: var(--r);
  background: var(--c-flaeche);
}
.endgueltig-frage .klein { margin: 0 0 var(--s-2) 0; }
/* Der Technik-Bereich benutzt die Zeilenform der Liste "noch ohne Termin"
   (.wartend-zeile) -- dieselbe Sache in derselben Form; nur die Marke des
   Planstands sitzt hier IN der Zeile statt auf einer Kachel. */
.system-zeile .planstand-marke { margin-top: var(--s-2); }

/* Elinas „Löschen“ am AUSGEBLENDETEN Beitrag (2026-09-10, EL-20260910-6874b191)
   benutzt GENAU diese drei Regeln mit -- bewusst keine eigene Klasse. Es ist
   dieselbe Handlung mit derselben Zusage (Vermerk statt Löschung, Rückweg
   daneben), und zwei Knöpfe, die dasselbe meinen, dürfen nicht verschieden
   aussehen. Das Formular steht IN der `.ausgeblendet-marke` der Karte; der
   Warn-Grund dort trägt den leisen Knopf ohne Zusatzregel (gemessen). */

/* ==========================================================================
   DAS RASTER DER VEROEFFENTLICHTEN BEITRAEGE
   Angelegt 2026-09-10, Auftrag EL-20260910-0ca0eade (Elina Gerlinger).

   ALLE MASSE KOMMEN AUS system.css. Kein freier Pixelwert ausser den beiden
   Rastermassen (Kachelbreite, Bildseitenverhaeltnis) -- die sind die Form
   dieses Bausteins selbst und stehen deshalb hier, benannt, statt verstreut.

   RUECKWEG: vorschau.conf VEROEFFENTLICHT=off nimmt Block und Route weg;
   diese Regeln sind dann wirkungslos, aber harmlos. Die Sicherung der Datei
   von vorher liegt als stil.css.bak-veroeffentlicht-* daneben.
   ========================================================================== */

/* BREIT, NICHT HANDYBREIT. `.karte` traegt max-width 380px -- das ist die
   Postkarte im Handyformat, und in ihr wuerde dieses Raster zur Einzelspalte
   (gemessen 2026-09-10 15:28: Element 380 px breit, 15.518 px hoch, eine
   Kachel je Zeile -- ein "Vorschau-Grid" mit einer Spalte ist keins).
   Dieselbe Aufhebung wie `.konzept-messluecken` und `.aufwand-messluecken`:
   der Abschnitt fuellt die Huelle wie das Plan-Raster darueber (1152 px bei
   1280 px Fenster, dort drei Spalten). */
.veroeff { margin-top: var(--s-8); max-width: none; }

/* --- Die Filterleiste ---------------------------------------------------- */
.veroeff-filter, .veroeff-blaettern {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2); margin: var(--s-4) 0;
}
.veroeff-filter-knopf {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-klein);
  font-size: var(--t-fuss); text-decoration: none;
  color: var(--c-akzent); background: var(--c-grund); border: 1px solid transparent;
}
.veroeff-filter-knopf:hover { border-color: var(--c-linie); }
/* Der aktive Filter war bis zum 2026-09-21 ein <span>, kein Link: ein Link
   auf die Ansicht, in der man schon steht, ist ein Bedienelement ohne
   Wirkung. Seit EL-20260921-6838a110 (Elina) ist er ein Link mit Wirkung:
   der Klick hebt GENAU DIESE Auswahl wieder auf (href ohne die eigene Achse).
   Deshalb Zeigefinger nur am <a>; "Alle" ohne Auswahl bleibt ein <span> mit
   ruhendem Zeiger. Beim Ueberfahren sagt ein kleines Kreuz, was der Klick tut
   -- rein aus CSS, damit kein Zaehler und keine Probe den Text verschoben
   sieht. */
.veroeff-filter-knopf.ist-aktiv {
  color: var(--c-text); font-weight: 600; background: var(--c-akzent-grund);
  cursor: default;
}
a.veroeff-filter-knopf.ist-aktiv { cursor: pointer; }
a.veroeff-filter-knopf.ist-aktiv:hover { border-color: var(--c-linie); text-decoration: none; }
a.veroeff-filter-knopf.ist-aktiv[data-veroeff-filter-abwahl="ja"]::after {
  content: "\00d7"; font-weight: 400; color: var(--c-text-leise);
  margin-left: 2px;
}
a.veroeff-filter-knopf.ist-aktiv[data-veroeff-filter-abwahl="ja"]:hover::after { color: var(--c-text); }
.veroeff-zahl {
  font-size: var(--t-caption); color: var(--c-text-leise);
  font-variant-numeric: tabular-nums;
}
.veroeff-filter-knopf.ist-aktiv .veroeff-zahl { color: var(--c-text); }
.veroeff-filter-trenner { color: var(--c-linie); padding: 0 var(--s-1); }

/* --- Das Raster ---------------------------------------------------------- */
/* 190px Mindestbreite: darunter wird das Datum unter der Kachel zweizeilig,
   darueber passen am Telefon keine zwei Spalten mehr nebeneinander. */
.veroeff-raster {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.veroeff-kachel {
  display: flex; flex-direction: column; gap: var(--s-2);
  min-width: 0;
}
/* 4:5 ist Instagrams Feed-Format. Ein quadratischer Rahmen wuerde bei
   Karussells oben und unten beschneiden -- also genau das Motiv wegnehmen,
   wegen dem man das Raster ansieht. */
.veroeff-bild {
  position: relative; display: block; aspect-ratio: 4 / 5;
  border-radius: var(--r); overflow: hidden; background: var(--c-grund);
}
.veroeff-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.veroeff-bild--fehlt {
  display: grid; place-items: center; text-align: center;
  font-size: var(--t-caption); border: 1px dashed var(--c-linie);
}
.veroeff-art {
  position: absolute; left: var(--s-2); bottom: var(--s-2);
  padding: 2px var(--s-2); border-radius: var(--r-klein);
  font-size: var(--t-caption); font-weight: 600;
  color: #fff; background: rgba(0,0,0,.62);
}
.veroeff-kopf {
  display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--t-fuss);
}
.veroeff-datum { font-variant-numeric: tabular-nums; color: var(--c-text-leise); }
.veroeff-plattform {
  padding: 1px var(--s-2); border-radius: var(--r-klein);
  font-size: var(--t-caption); color: var(--c-text-leise);
  background: var(--c-grund);
}
.veroeff-text {
  font-size: var(--t-fuss); line-height: 1.4; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.veroeff-sofort { font-size: var(--t-caption); margin: 0; }

/* --- Die Zahlen unter der Kachel (EL-20260917-79f7b830) ------------------
   Icon direkt neben der Zahl, kein Wort dazwischen -- so, wie Instagram es
   unter einem Beitrag zeigt. `flex-wrap` statt fester Spalten: bei 190 px
   Kachelbreite passen je nach Zahlenlaenge drei bis fuenf Paare in eine
   Zeile, und ein abgeschnittenes Paar waere eine verschwundene Kennzahl. */
.veroeff-kz {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-1) var(--s-3); margin: 0;
  font-size: var(--t-caption); color: var(--c-text-leise);
}
.veroeff-kz-paar { display: inline-flex; align-items: center; gap: 3px; }
.veroeff-kz-icon { width: 13px; height: 13px; flex: none; }
/* tabular-nums: sonst tanzen die Zahlen zwischen zwei Kacheln um ein paar
   Pixel und die Reihe sieht schief aus. */
.veroeff-kz-wert { font-variant-numeric: tabular-nums; }
/* NICHT GEMESSEN IST NICHT NULL -- und sieht auch nicht so aus: der Strich
   steht blasser da als eine Zahl, damit "dazu wissen wir nichts" nicht wie
   ein schwacher Wert wirkt. */
.veroeff-kz-paar.ist-ungemessen { opacity: .55; }

/* --- Öffentlich oder Test-Reel, an der Kachel ---------------------------- */
.veroeff-testreel {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1);
  margin: 0;
}
.veroeff-testreel-marke {
  padding: 1px var(--s-2); border-radius: var(--r-klein);
  font-size: var(--t-caption); font-weight: 600;
  color: var(--c-text); background: var(--c-akzent-grund);
}
/* `.karte` DAVOR IST KEIN ZIERRAT, SONDERN DER GANZE PUNKT. Der Block sitzt
   in `<section class="karte veroeff">`, und `.karte button` (weiter oben in
   dieser Datei) macht JEDEN Knopf darin 100 % breit, akzentfarben und 15 px
   gross. Ohne das `.karte` hier gewinnt jene Regel (0,1,1 gegen 0,1,0) --
   gemessen am Bautag im Browser: der Markier-Knopf kam als vollbreiter
   Farbbalken heraus, so gross wie "Insights ansehen" daneben, und die
   Kachel war dadurch zwei Knopfreihen hoch. */
.karte .veroeff-testreel-knopf {
  width: auto; margin-top: 0;
  padding: 1px var(--s-2); border: 0; border-radius: var(--r-klein);
  font: inherit; font-size: var(--t-caption); cursor: pointer;
  /* Akzentfarbe und nicht `--c-text-leise`: im Dunkelmodus war der Knopf
     damit gemessen kaum vom Hintergrund zu unterscheiden -- ein
     Bedienelement, das man suchen muss, ist eines, das niemand findet. */
  color: var(--c-akzent); background: transparent;
  text-align: left;
}
.karte .veroeff-testreel-knopf:hover {
  color: var(--c-akzent); text-decoration: underline;
}
/* WOHER DIE MARKE KOMMT, steht leise daneben ("so gesendet" / "von dir
   markiert") -- leise, weil es die Rueckfrage beantwortet, die man einmal
   hat, und nicht die Auskunft ist, die man sucht. Sie steht ABSICHTLICH
   nicht im `title` allein: ein Mauszeiger-Text existiert auf dem Telefon
   nicht, und die Ansicht ist telefonbreit gebaut. */
.veroeff-testreel-herkunft {
  font-size: var(--t-caption); color: var(--c-text-leise);
}

/* --- Die Testreihe an der Kachel (EL-20260924-96a9d3ad) -------------------
   Der Sieger bekommt die gute Farbe und einen Rahmen: "welcher Test-Reel ist
   von mir freigegeben" soll man in einer Reihe von fuenf fast gleichen
   Kacheln ohne Lesen finden. Die Kandidaten stehen leise daneben -- sie sind
   keine Warnung, nur nicht gewaehlt. */
.veroeff-testreihe {
  margin: 0; padding: var(--s-1) var(--s-2); border-radius: var(--r-klein);
  font-size: var(--t-caption); color: var(--c-text-leise);
  border: 1px solid var(--c-linie-zart);
}
.veroeff-testreihe-marke { font-weight: 600; color: var(--c-text); margin-right: var(--s-1); }
.veroeff-testreihe--sieger {
  color: var(--c-gut-text); background: var(--c-gut-grund);
  border-color: var(--c-gut-linie);
}
.veroeff-testreihe--sieger .veroeff-testreihe-marke { color: var(--c-gut-text); }
.karte .veroeff-testreel-knopf--sieger { font-weight: 600; }
/* Reihe von Hand anpassen (EL-20261002-14099e47): zugeklappt und leise --
   die Ausnahme, wenn die Automatik danebenliegt. `.karte select` wuerde
   sonst wie die Knoepfe vollbreit; hier bleibt es in der Zeile. */
.veroeff-reihe-hand { font-size: var(--t-caption); color: var(--c-text-leise); }
.veroeff-reihe-hand summary { cursor: pointer; color: var(--c-akzent); }
.veroeff-reihe-hand-form { margin: var(--s-1) 0 0; display: flex; flex-wrap: wrap;
  gap: var(--s-1); align-items: center; }
.veroeff-reihe-hand-form label { display: flex; flex-direction: column;
  gap: var(--s-1); width: 100%; min-width: 0; }
/* Die Kachel ist telefonschmal: das Feld nimmt die Breite der Kachel und
   kuerzt seinen Text, statt ueber den Rand zu laufen (gemessen am Bautag:
   "Test-Reihe ab 28.09., 19:19 Uhr · 6 V" ragte rechts heraus). Die volle
   Zeile steht in der aufgeklappten Liste. */
.karte .veroeff-reihe-hand-form select { width: 100%; max-width: 100%; min-width: 0;
  margin: 0; padding: 2px var(--s-1); font: inherit; font-size: var(--t-caption);
  font-weight: normal; text-overflow: ellipsis; }
.veroeff-reihe-hand-herkunft { margin-left: var(--s-1); }

/* --- Ob und wann er auf Facebook ist (EL-20260919-e2e1c2e9) -------------
   Eine Zeile je Kachel: farbiger Punkt, fettes Wort, Halbsatz. NUR TOKENS,
   keine Literale -- damit der Dunkelmodus keine zweite Regel braucht (die
   Tokens --c-gut/--c-warn/--c-neutral werden in modus.css umgedeutet).
   Gruen = drueben, Warn-Orange = wartet (kein Alarm, ein Vorbehalt), Grau =
   nur auf Instagram UND unbekannt: eine Messluecke ist im ganzen Haus grau,
   nie gelb. `flex-wrap`, weil "Wartet auf Facebook — faellig 20.09., 19:49
   Uhr" bei 190 px Kachelbreite zwei Zeilen braucht. */
.veroeff-fb {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-1);
  margin: 0; font-size: var(--t-caption); color: var(--c-text-leise);
  line-height: 1.35;
}
.veroeff-fb b { color: var(--c-text); font-weight: 600; }
.veroeff-fb-punkt {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  flex: none; align-self: center; background: var(--c-neutral);
}
.veroeff-fb--auf_facebook .veroeff-fb-punkt { background: var(--c-gut); }
.veroeff-fb--auf_facebook b { color: var(--c-gut-text); }
.veroeff-fb--wartet .veroeff-fb-punkt { background: var(--c-warn); }
.veroeff-fb--wartet b { color: var(--c-warn-text); }
.veroeff-fb--nicht .veroeff-fb-punkt,
.veroeff-fb--unbekannt .veroeff-fb-punkt { background: var(--c-neutral); }
.veroeff-fb--unbekannt b { color: var(--c-text-leise); font-style: italic; }
.veroeff-fb-link { color: var(--c-akzent); text-decoration: none; }
.veroeff-fb-link:hover { text-decoration: underline; }
/* Die Reihen-Ueberschrift in der Filterleiste ("Facebook:") -- Text, kein
   Knopf, und so klein wie die Zahlen daneben. */
.veroeff-filter-titel { font-size: var(--t-caption); }
/* Die Warteschlangen-Zeile unter der Leiste: tabellarische Ziffern, damit
   "4 in der Warteschlange" und "308 auf Facebook" nicht tanzen. */
.veroeff-fb-lage { font-variant-numeric: tabular-nums; }
/* Inline-Fettdruck in der Warteschlangen-Zeile: `.hinweis > b` ist im
   Gestaltungssystem ein Block, und der Satz soll EIN Satz bleiben. */
.veroeff-fb-fett { font-weight: 600; color: var(--c-text); }

/* --- Nach den Kennzahlen filtern und sortieren --------------------------- */
.veroeff-kzfilter {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--s-2) var(--s-3); margin: var(--s-3) 0;
}
.veroeff-kzfilter-feld {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--t-caption); color: var(--c-text-leise);
}
.veroeff-kzfilter-feld select, .veroeff-kzfilter-feld input {
  font: inherit; font-size: var(--t-fuss); color: var(--c-text);
  padding: var(--s-1) var(--s-2); border: 1px solid var(--c-linie);
  border-radius: var(--r-klein); background: var(--c-flaeche);
}
/* 7ch: „höchstens 100000" passt, ohne dass das Feld die halbe Zeile nimmt. */
.veroeff-kzfilter-feld input[type="number"] { width: 7ch; }
/* Wieder mit `.karte` davor, und aus demselben Grund wie beim Markier-Knopf:
   sonst steht „Anwenden" als 1182 px breiter Balken unter der Zeile, statt
   neben den Feldern, zu denen er gehört. */
.karte .veroeff-knopf--schmal {
  width: auto; margin-top: 0; align-self: flex-end;
  display: inline-block; padding: var(--s-2) var(--s-3);
  font-size: var(--t-fuss);
}
.hinweis--leise {
  border-left-color: var(--c-linie); font-size: var(--t-caption);
  color: var(--c-text-leise);
}

/* --- Der Knopf und was er holt ------------------------------------------- */
.veroeff-knopf {
  display: block; text-align: center; text-decoration: none;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-klein);
  font-size: var(--t-fuss); font-weight: 500;
  color: var(--c-akzent); background: var(--c-akzent-grund);
  border: 1px solid transparent; cursor: pointer;
}
.veroeff-knopf:hover { border-color: var(--c-akzent); }
.veroeff-knopf[aria-busy="true"] { opacity: .6; cursor: progress; }
.veroeff-insights[hidden] { display: none; }
.veroeff-zahlen {
  display: grid; gap: 0; margin: 0;
  border: 1px solid var(--c-linie-zart); border-radius: var(--r-klein);
}
/* DAS PAAR GEHT IN DIE BREITE, NICHT IN DIE LAENGE (2026-09-24, Elina
   Gerlinger, EL-20260924-4a8db5d6 -- R6c in GESTALTUNG.md).
   Hier stand `grid-template-columns: minmax(0, 1fr) auto` mit
   `dt { min-width: 0 }`. Die `auto`-Spur nimmt sich ihre MAX-content-Breite
   -- an den Raten der Reel-Tiefe ist das der ganze Vergleichssatz („600 %
   mehr als sonst üblich …") --, und `minmax(0, 1fr)` gibt dem Etikett
   daneben bis auf NULL her. Gemessen in der Beitrags-Kachel (199/243/290 px
   breit bei 1440/900/390 px Fenster): „Geteilt-Rate (je Aufruf)" 0 px
   breit und 396 px hoch, „Gespeichert-Rate" 0 px / 468 px -- der dritte
   gemeldete Buchstabenturm, und dieselbe Bauform wie der erste (16.09.,
   `dl.zahlzeilen`) und der zweite (21.09., `.freigabe-zeile`).
   JETZT: ein Flex-Paar mit Umbruch. Passt der Wert neben ein Etikett von
   mindestens --b-etikett-min, stehen beide in einer Zeile wie bisher (jede
   reine Zahl). Passt er nicht, rueckt der Wert in eine EIGENE Zeile in
   voller Breite, statt beide Spalten schmal zu druecken. Im gesunden Stand
   (Etikett + Zahl) aendert sich nichts. */
.veroeff-zahl-paar {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: var(--s-2); row-gap: 0; padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--c-linie-zart);
}
.veroeff-zahl-paar:last-child { border-bottom: 0; }
.veroeff-zahl-paar dt { font-size: var(--t-caption); color: var(--c-text-leise);
  flex: 1 1 var(--b-etikett-min); min-width: min(var(--b-etikett-min), 100%); }
.veroeff-zahl-paar dd {
  margin: 0 0 0 auto; font-size: var(--t-fuss); font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right;
  flex: 0 1 auto; max-width: 100%;
}
.veroeff-zahlen-fuss { font-size: var(--t-caption); margin: var(--s-1) 0 0; }
.veroeff-stand { font-size: var(--t-caption); margin-top: var(--s-4); }

/* --- Die Follower-Zahlen (EL-20260916-4796910c, 2026-09-16) -------------
   NUR VORHANDENE FARB-TOKEN, kein eigener Hexwert -- sonst bliebe die Zeile
   im Dunkelmodus hell stehen (dieselbe Regel wie beim Neuladen-Abruf unten).
   Der Kopf steht direkt unter dem Titel und traegt deshalb denselben
   Fussnoten-Grad wie die Standzeile darunter: er ist Kontext, nicht die
   Ueberschrift des Blocks. */
.veroeff-follower-kopf {
  font-size: var(--t-caption); margin: 0 0 var(--s-2);
}
.veroeff-follower-kopf b { font-variant-numeric: tabular-nums; }
/* Der zweite Kasten in der Kachel braucht Luft zum ersten, sonst sehen die
   beiden Listen wie eine einzige aus -- und genau das sollen sie nicht:
   oben stehen die Zahlen DIESES Beitrags, unten die des KONTOS. */
.veroeff-follower { margin-top: var(--s-2); }

/* --- Der Neuladen-Abruf (EL-20260911-7a8e0ad1, 2026-09-11) --------------
   NUR VORHANDENE FARB-TOKEN, keine eigenen Hexwerte: der Dunkelmodus
   (system.css, prefers-color-scheme) faerbt die Token um, ein eigener
   Hexwert bliebe hell stehen und waere im dunklen Modus unlesbar.
   Der Punkt pulsiert, WEIL gerade wirklich etwas laeuft -- und er steht
   still, sobald nichts mehr laeuft (der Block ist dann gar nicht da). */
.veroeff-frische {
  font-size: var(--t-caption); margin: var(--s-2) 0 0;
  display: flex; align-items: center; gap: var(--s-2);
}
.veroeff-frische.laeuft { color: var(--c-text-leise); }
.veroeff-frische.wartet {
  color: var(--c-warn-text); background: var(--c-warn-grund);
  border: 1px solid var(--c-warn-linie); border-radius: var(--r-klein);
  padding: var(--s-2); display: block;
}
.veroeff-frische-punkt {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--c-akzent); animation: veroeff-puls 1.4s ease-in-out infinite;
}
@keyframes veroeff-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
/* Wer Bewegung abgestellt hat, bekommt keine. Der Punkt bleibt sichtbar --
   er traegt die Aussage, nicht die Animation. */
@media (prefers-reduced-motion: reduce) {
  .veroeff-frische-punkt { animation: none; }
}
.veroeff-bild-gross {
  max-width: var(--b-post); width: 100%; border-radius: var(--r);
  display: block; margin: var(--s-3) 0;
}

/* --- Hilfe: Eigener Post (EL-20260910-75d45bd5, 2026-09-10) -------------
   Eine Leseseite, keine Ansicht: sieben Abschnitte als Karten (.lage) im
   Seitenrahmen; der Fliesstext in den Karten haelt die Lesebreite der
   Staffel (--b-lesen), Tabellen und Befehle duerfen die Karte fuellen.
   Befehle stehen in Schreibmaschinenschrift und brechen NICHT um -- hier
   sind sie zum Abtippen da, anders als die Kettenantwort in `pre.antwort`,
   die ein Satz an Elina ist; ein umgebrochener Befehl waere ein falscher
   Befehl. Am Telefon rollt der Block seitlich (eigener overflow-Vorfahr,
   Regel "rahmen" bleibt gewahrt). Keine freien Groessen: alles aus der Staffel. */
.hilfe .lage h3 { font-size: var(--t-kopf); margin: var(--s-4) 0 var(--s-2); }
.hilfe .lage p, .hilfe .lage li { font-size: var(--t-text); line-height: 1.55; }
.hilfe .lage > p, .hilfe .lage > ol, .hilfe .lage > ul, .hilfe .lage > .hinweis,
.hilfe .lage > .fehler { max-width: var(--b-lesen); }
.hilfe .lage ol, .hilfe .lage ul { margin: 0 0 var(--s-3); padding-left: var(--s-6); }
.hilfe .lage li { margin: 0 0 var(--s-2); }
.hilfe .lage li ul { margin: var(--s-1) 0 0; }
.hilfe pre.befehl {
  font-family: var(--schrift-mono);
  font-size: var(--t-fuss);
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
  background: var(--c-grund);
  border: 1px solid var(--c-linie-zart);
  border-radius: var(--r-klein);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-3);
}
.hilfe .tabellenrahmen td { font-size: var(--t-fuss); line-height: 1.45; }
/* `--r6-zelle-min` HEBT den Boden aus dem R6-FUNDAMENT (system.css) an; ein
 * nacktes `min-width` an einer Zelle waere ab 600 px wirkungslos, weil die
 * Sperre dort gewinnt. `min-width` bleibt fuer die Breiten darunter stehen. */
.hilfe .tabellenrahmen td:first-child { min-width: 14ch; --r6-zelle-min: 14ch; }

/* ==========================================================================
   DIE REIHE "WARTET AUF DEINE FREIGABE" (s03, 2026-09-11)

   HIER STEHT NUR ANORDNUNG -- kein Wert, den system.css nicht schon fuehrt.
   Jede Groesse ist eine Variable der Schriftstaffel oder des 8-pt-Rasters,
   jede Farbe kommt aus der Palette mit Bedeutung. Die Bausteine selbst
   (`.hinweis`, `.status`, `.knopf`, `.knopf-leise`, `.lage`) sind
   unveraendert uebernommen.

   WARUM NICHT IN system.css: das ist die gemeinsame Standard-Datei aller
   Oberflaechen, und ein Schwester-Grossjob (dashboard-standard s03, in der
   Queue mit not_before 2026-09-13) arbeitet Elinas Antwort dort ein. Ein
   Bedienelement EINER Seite gehoert in das Stylesheet dieser Seite; sonst
   waechst der gemeinsame Standard um jede Einzelanfertigung mit.

   `--freigabe-bild` ist die einzige neue Groesse: die Kantenlaenge der
   Kartenvorschau. Sie ist ein Vielfaches der 8-pt-Basis (72 = 9 x 8), damit
   die Zeile im selben Raster sitzt wie alles darueber.
   ========================================================================== */
.freigabe-liste { --freigabe-bild: 72px; --b-freigabe-textmin: 17ch;
  list-style: none; margin: 0 0 var(--s-4); padding: 0;
  display: grid; gap: var(--s-2); }
/* DIE TEXTSPALTE HAT EINE UNTERGRENZE, DIE HANDLUNGSSPALTE KEINEN DECKEL.
   `auto` in der dritten Spur heisst max-content: waechst das Einplan-Formular,
   nimmt es sich den Platz, und `minmax(0, 1fr)` daneben gibt ihn bis auf NULL
   her. Genau das ist am 2026-09-21 eingetreten -- eine einzige CSS-Zeile am
   Facebook-Haekchen (`display: flex; flex-direction: row`) legte Kaestchen,
   Beschriftung und Hinweis auf EINE max-content-Zeile, die Spur wuchs von
   1005 auf 1150 px, und die Textspalte fiel auf 0: der Kartentext brach nach
   jedem Buchstaben um und stand als 1982 px hoher Turm unter dem Formular.
   Kein Ueberlauf, kein Fehler, keine Konsole -- es sah an jeder Einzelstelle
   gesund aus.

   17ch IST HERGELEITET, NICHT GESETZT -- beide Grenzen gemessen (1440 px):
     unten  min-content der Spalte = 79 px (das laengste unzerbrechliche Wort,
            hier die Vorgangskennung). Ab dieser Breite bricht kein Wort mehr,
            und der Buchstabenturm-Detektor faellt von 2 Funden auf 0.
     oben   17ch = 142 px ist der GROESSTE Wert, der den gesunden Stand
            unveraendert laesst (Spuren 72/145/1005 mit und ohne Floor); ab
            18ch = 150 px begaenne der Floor, das heutige Layout zu schieben.
   Gewaehlt ist die Obergrenze: die Zusage lautet "nie schmaler als heute",
   und sie kostet heute nichts. Wird sie spaeter doch ueberschritten, verliert
   das Formular ein paar Pixel -- das ist der gewollte Rueckweg, kein Defekt.

   WARUM KEIN DECKEL AUF DER HANDLUNGSSPALTE (gemessen, nicht erwogen): ein
   `minmax(0, 40%)` heilt den Defekt zwar, veraendert aber den GESUNDEN Stand
   massiv (72/652/498 statt 72/145/1005) -- das Formular verloere die Haelfte
   seiner Breite, ohne dass je etwas kaputt war. Ein `minmax(0, max-content)`
   wirkt ueberhaupt nicht (identisch zu `auto`). Ein Floor ist im gesunden
   Stand INERT und beisst nur im Schadensfall; das ist die Eigenschaft, die
   ein Rueckfallnetz haben muss. */
.freigabe-zeile { display: grid; gap: var(--s-3);
  grid-template-columns: var(--freigabe-bild) minmax(var(--b-freigabe-textmin), 1fr) auto;
  align-items: start; padding: var(--s-3);
  border: 1px solid var(--c-linie-zart); border-radius: var(--r-klein);
  background: var(--c-flaeche); }
/* Die Rueckweg-Liste fuehrt kein Bild -- ihre Zeile hat eine Spalte weniger.
   Ein leerer Bildplatz waere ein Loch, das wie ein fehlendes Bild aussieht. */
/* Derselbe Floor, denn dieselbe Bauform: auch hier steht eine `auto`-Spur
   neben einer flexiblen. Die Klasse zu heilen und ihre zweite Instanz stehen
   zu lassen waere der Fehler, gegen den dieser Fix gebaut ist. */
.freigabe-liste--rueck .freigabe-zeile {
  grid-template-columns: minmax(var(--b-freigabe-textmin), 1fr) auto; }
/* Der Fokusrahmen ist die Tastatur-Bedienung SICHTBAR gemacht: ohne ihn
   bewegt j/k einen Fokus, den niemand findet. */
.freigabe-zeile:focus { outline: 2px solid var(--c-akzent); outline-offset: 2px; }
.freigabe-zeile:focus-visible { outline: 2px solid var(--c-akzent); outline-offset: 2px; }
.freigabe-bild { width: var(--freigabe-bild); height: var(--freigabe-bild);
  border-radius: var(--r-klein); overflow: hidden; background: var(--c-grund);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-caption); color: var(--c-text-leise); text-align: center; }
.freigabe-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.freigabe-text { min-width: 0; }
.freigabe-kopf { margin: 0 0 var(--s-1); font-size: var(--t-text);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
/* DER ANRISS IST FLIESSTEXT UND BRICHT WIE FLIESSTEXT (2026-09-22,
 * EL-20260922-e7158e89, R6). Hier stand `overflow-wrap: anywhere` -- und
 * zwar in genau der Spalte, in der am 2026-09-21 der 1982 px hohe Turm aus
 * einzelnen Buchstaben stand. Die Untergrenze an `.freigabe-text` haelt die
 * Spalte heute breit genug; `anywhere` daneben hiesse, dass der Turm
 * zurueckkommt, sobald ein neuer Nachbar die Spalte wieder drueckt. Zwei
 * Haelften desselben Schutzes: Breite VORGEBEN (min-width) und Breite nicht
 * auf ein Zeichen RECHNEN lassen (break-word). */
.freigabe-anriss { margin: 0; font-size: var(--t-fuss); color: var(--c-text-leise);
  line-height: 1.45; overflow-wrap: break-word; }
.freigabe-text > .hinweis { margin: var(--s-2) 0 0; }
.freigabe-antwort { margin: var(--s-2) 0 0; font-size: var(--t-fuss); }
.freigabe-tun { display: flex; flex-direction: column; gap: var(--s-2);
  align-items: stretch; }
.freigabe-tun form { margin: 0; }
.freigabe-tun .knopf, .freigabe-tun .knopf-leise { width: 100%; justify-content: center; }
.freigabe-rueck-titel { font-size: var(--t-kopf); margin: var(--s-4) 0 var(--s-2); }
/* Schmal (390): Bild und Text untereinander, Knoepfe in voller Breite.
   Die Grenze ist dieselbe, die system.css fuer die Antwortzeile benutzt. */
@media (max-width: 620px) {
  .freigabe-zeile, .freigabe-liste--rueck .freigabe-zeile {
    grid-template-columns: minmax(0, 1fr); }
  .freigabe-bild { width: 100%; height: auto; aspect-ratio: 4 / 5;
    max-height: 40vh; }
}
/* `.tun-sprung` -- der Sprung zur Freigabe-Reihe -- stand in der
   Ueberschriftszeile von "Jetzt zu tun" und ist mit diesem Kasten gegangen
   (2026-09-16, Elina Gerlinger, EL-20260916-109c1270). Die Reihe selbst ist
   NICHT gegangen: sie steht weiter auf der Startseite unter #freigabe, nur
   ohne Abkuerzung von oben. */

/* --- Der Entwurfstext am Beitrag und die zwei Entscheidungs-Knoepfe ------
 *
 * Auftrag Elina Gerlinger EL-20260825-b3734909 (2026-09-16): "pro Post
 * zusaetzlich die vollstaendigen Content-Vorschlags-Daten direkt anzeigen"
 * und "pro Post ein Button ABLEHNEN und ein Button BEAUFTRAGEN".
 *
 * ALLE FARBEN KOMMEN AUS DEN TOKENS (system.css). Ein hier getippter
 * Hexwert waere die eine Regel, die der Dunkelmodus nicht mitdreht -- und
 * er dreht ueber genau diese Tokens (EL-20260910-61df70b6).
 */
.entwurf { padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-linie-zart); }
.entwurf--ohne { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.entwurf-kopf { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-2); margin-bottom: var(--s-2); }
.entwurf-kopf .saeule { font-size: var(--t-11); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 2px var(--s-2); border-radius: var(--r);
  border: 1px solid var(--c-linie); color: var(--c-text-leise); }
.entwurf-titel { font-size: var(--t-14); }
.entwurf-hook { font-size: var(--t-14); line-height: 1.45;
  margin: 0 0 var(--s-2); }
.entwurf .etikett { font-size: var(--t-11); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-text-leise); margin-right: var(--s-2); }
.entwurf-aenderung { margin: 0 0 var(--s-2); padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--c-warn-linie);
  background: var(--c-warn-grund); color: var(--c-warn-text);
  font-size: var(--t-13); }
.entwurf-aenderung p { margin: var(--s-1) 0 0; white-space: pre-wrap; }
.entwurf-warnung { font-size: var(--t-13); margin: 0 0 var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r);
  background: var(--c-warn-grund); border: 1px solid var(--c-warn-linie);
  color: var(--c-warn-text); }
.entwurf-karten > summary, .entwurf-machart > summary {
  cursor: pointer; font-size: var(--t-13); font-weight: 600; }
.entwurf-karte { margin: var(--s-2) 0; padding-left: var(--s-3);
  border-left: 2px solid var(--c-linie-zart); }
.entwurf-karte .nr { font-size: var(--t-11); font-weight: 600;
  color: var(--c-text-leise); }
.entwurf-karte .slide { margin: 2px 0; font-size: var(--t-13);
  line-height: 1.45; }
.entwurf-karte .regie { margin: 2px 0 0; font-size: var(--t-12);
  line-height: 1.4; color: var(--c-text-leise); }
.entwurf-karte--ohne-bild { border-left-style: dashed; }
/* Machart und Quellen: Technik hinter dem Klick, in derselben Staffel wie die
 * Bildregie. Die Merkmale stehen seit 2026-09-27 als <code> (Kennungen, nie
 * umgelautet); ohne diese Zeile erbten sie die Grundgroesse.
 * Der Umbruch "an jeder Stelle" gilt nur den <code>-Kennungen (Atome, R6),
 * nicht dem Absatz: am <p> war er seit ed036450d6 gegen die Sperre im
 * Fundament ohnehin wirkungslos und erreichte die Kennungen nur per Vererbung. */
.entwurf-machart p { margin: var(--s-1) 0 0; font-size: var(--t-12);
  line-height: 1.4; color: var(--c-text-leise); }
.entwurf-machart code { overflow-wrap: anywhere; }
.entwurf-ohne-text { margin: 0; font-size: var(--t-13); line-height: 1.45; }

/* Die zwei Knoepfe. `gross` ist bewusst eine eigene Marke am vorhandenen
 * `.knopf` und keine neue Knopfklasse: Farben, Rahmen und Zustaende sollen
 * denen der uebrigen Knoepfe folgen, nicht auseinanderlaufen. */
.vorschlag { padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-linie-zart); }
.vorschlag-knoepfe { display: flex; gap: var(--s-2); }
.vorschlag-knoepfe form { flex: 1; display: flex; }
.knopf.gross { font-size: var(--t-14); padding: var(--s-3) var(--s-4);
  letter-spacing: .04em; }
.vorschlag-fuss, .vorschlag-stand { margin: var(--s-2) 0 0;
  font-size: var(--t-12); line-height: 1.45; }
.vorschlag-meldung { margin: 0 0 var(--s-2); padding: var(--s-2) var(--s-3);
  border-radius: var(--r); font-size: var(--t-13); }
.vorschlag-meldung.ok { background: var(--c-gut-grund);
  border: 1px solid var(--c-gut-linie); color: var(--c-gut-text); }
.vorschlag-meldung.fehler { background: var(--c-hart-grund);
  border: 1px solid var(--c-hart-linie); color: var(--c-hart-text); }

/* ===== Post-Kacheln der Art `postkarten` (Elina, EL-20260916-c1dc3e9d) =====
   Ihr Auftrag vom 2026-09-16, wörtlich: "eine echte Post-Kachel ..., die wie
   ein fertiger Social-Media-Post aussieht: Platzhalterbild oben, darunter die
   vorgeschlagene Caption im vollen Wortlaut, und darunter zwei klar sichtbare
   Buttons". Genau in dieser Reihenfolge ist die Kachel gebaut -- die Form IST
   die Auskunft, und sie soll dem ähneln, was hinterher im Feed steht.

   VIER SPALTEN BEI BREIT (Elina, EL-20260916-54906053, 2026-09-16). Ihr
   Befund zur ersten Fassung, wörtlich: "viel zu gross, es passen nur 2
   nebeneinander in den Bildschirm". Das war gemessen richtig: bei 1280 px
   Fenster stand die Kachel auf 539 px und ihr Bild auf 671 px Höhe -- ein
   Bildschirm zeigte EINEN Vorschlag. Gemessen jetzt: 4 Spalten ab 1024 px
   Rasterbreite, Kachel 263 px, Bild 329 px.

   DIE ALTE BEGRÜNDUNG WAR NICHT FALSCH, SIE WAR NUR HALB: eine Caption mit
   1.500 Zeichen braucht Lesebreite. Sie braucht sie aber in ZEICHEN pro
   Zeile, nicht in Pixeln -- und 263 px bei 13 px Schrift tragen rund 38
   Zeichen. Die Untergrenze dieser Ansicht ist deshalb die Lesbarkeit und
   nicht die Spaltenzahl; gemessen wird sie in
   `pruefungen/messung_kachelraster.py` (Schriftgrößen in px, sieben Breiten).

   KEINE FESTE SPALTENZAHL, AUCH JETZT NICHT. `auto-fit` mit `minmax` fällt
   von selbst auf 3 / 2 / 1 zurück, sobald das Fenster schmaler wird -- genau
   das, was Elinas Satz "darf die Anzahl pro Reihe automatisch auf 2 oder 1
   zurückfallen" verlangt. Ein Medienabfrage-Treppchen mit `repeat(4, ...)`
   wäre Nr. 1 der zwölf Punkte vom 02.09. zum zweiten Mal: es quetscht in der
   MITTE, wo niemand hinsieht.

   DIE 240 px SIND GERECHNET, NICHT GERATEN. Die Hülle deckelt den Inhalt auf
   1.152 px; bei 16 px Lücke braucht die vierte Spalte 4 x 240 + 3 x 16 =
   1.008 px. Mehr als vier kann daraus nie werden (5 x 240 + 4 x 16 = 1.264 >
   1.152), weniger erst unter 1.008 px -- die Treppe ist damit eine Folge der
   Deckelung und keine zweite, frei laufende Zahl.

   DIE KNÖPFE TRAGEN FARBE, DIE TAFELN NICHT. Auf dieser Seite ist alles
   andere Auskunft; diese beiden Knöpfe sind die einzige Stelle, an der etwas
   passiert. Zustimmen bekommt die Handlungsfarbe, Absagen die Befundfarbe --
   und absagen ist hier ehrlich rot, denn anders als beim Ausblenden gibt es
   dafür keinen Rückweg im Dashboard (zurücknehmen geht über das Portal). */
.sicht-kacheln {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: var(--s-4) 0 var(--s-6);
}
@media (max-width: 480px) {
  .sicht-kacheln { grid-template-columns: 1fr; }
}
.sicht-kachel {
  background: var(--c-flaeche);
  border: 1px solid var(--c-linie);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* Das Bild oben, 4:5 -- das Hochformat, in dem ein Karussell erscheint.
   Der Platzhalter ist KEIN leeres Feld: er sagt, was entstehen wird. Ein
   graues Rechteck wäre von "Motiv steht noch nicht fest" nicht zu
   unterscheiden, und das ist die beruhigende Verwechslung.

   "KLEINERES PLATZHALTERBILD" (Elinas drittes Mittel) LÄUFT ÜBER DIE SPALTE,
   NICHT ÜBER DEN ZUSCHNITT: 4:5 bleibt, weil es das Format IST, in dem der
   Beitrag erscheint -- die Kachel behauptet ja, so auszusehen wie das
   Ergebnis. Das Bild schrumpft trotzdem um mehr als die Hälfte (671 -> 329
   px), weil es der Spaltenbreite folgt. `aspect-ratio: 1/1` hätte 66 px mehr
   gespart und dafür zwei Dinge kaputt gemacht: das angekündigte Format wäre
   falsch, und ein später WIRKLICH gerendertes 4:5-Bild liefe hier in
   `object-fit: cover` -- also beschnitten -- ins Quadrat. Ein Zuschnitt, den
   niemand angeordnet hat, ist teurer als 66 px.

   KOMPAKT WIRD STATTDESSEN DER INNENRAUM des Platzhalters: 24 px Rand und
   13 px Schrift waren für eine 539-px-Kachel gedacht. */
.sicht-kachel-bild {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--c-grund); border-bottom: 1px solid var(--c-linie-zart);
}
.sicht-kachel-bild--platzhalter {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-2);
  padding: var(--s-3); box-sizing: border-box;
  background: repeating-linear-gradient(135deg,
    var(--c-grund), var(--c-grund) 14px,
    var(--c-linie-zart) 14px, var(--c-linie-zart) 15px);
}
.sicht-kachel-bildmarke {
  align-self: flex-start;
  font-size: var(--t-caption); text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--c-text-leise);
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  border-radius: var(--r-klein); padding: 3px var(--s-2);
}
.sicht-kachel-bildtext {
  font-size: var(--t-caption); color: var(--c-text-leise); line-height: 1.45;
  background: var(--c-flaeche); border-radius: var(--r-klein);
  padding: var(--s-2);
}

/* DER TITEL IST DIE ERSTE ZEILE DES BEITRAGS, NICHT SEINE ÜBERSCHRIFT -- er
   ist 83 bis 153 Zeichen lang (gemessen an allen 15 Vorschlägen). Auf 20 px
   in einer 263-px-Spalte wären das bis zu acht Zeilen Großschrift über der
   Caption. Eine Stufe der Staffel tiefer (15 px, fett) bleibt er die
   auffälligste Schrift der Kachel und kostet die Hälfte der Höhe. */
.sicht-kachel-kopf {
  padding: var(--s-3) var(--s-3) 0;
  display: flex; flex-direction: column; gap: 2px;
}
.sicht-kachel-titel { font-size: var(--t-text); line-height: 1.35; }
.sicht-kachel-beiwort { font-size: var(--t-caption); }
.sicht-kachel-code {
  align-self: flex-start; margin-top: var(--s-1);
  font-size: var(--t-caption); color: var(--c-text-leise);
  background: var(--c-grund); border-radius: var(--r-klein); padding: 2px 6px;
}

/* DER TEXT WIRD NICHT GEKÜRZT. Kein `max-height`, kein `line-clamp`, kein
   "mehr lesen" -- der Auftrag sagt "im vollen Wortlaut", und ein Urteil über
   einen angerissenen Text ist ein Urteil über etwas anderes.

   DAS GILT AUCH IM KOMPAKTEN RASTER, UND ES IST DIE TEUERSTE STELLE DABEI.
   Der naheliegende Weg zu "mehr auf einen Blick" wäre, die 1.500 Zeichen
   hinter ein `<details>` zu legen. Elinas neuer Auftrag nennt die Caption
   ausdrücklich unter dem, was NICHT verloren gehen darf, und ihr alter sagte
   "im vollen Wortlaut" -- beides zeigt in dieselbe Richtung. Kompakter wird
   deshalb die SCHRIFT (15 -> 13 px, die nächste Stufe der Staffel, Fußnote:
   "Nebentext, Tabellen dicht"), nicht die Menge. Untergrenze ist 12 px, und
   `messung_kachelraster.py` meldet einen Befund, wenn sie unterschritten
   wird. RÜCKWEG, falls 13 px Elina zu klein sind: hier auf `var(--t-text)`
   zurück -- eine Zeile, keine Umstellung. */
.sicht-kachel-text { padding: var(--s-2) var(--s-3) 0; }
.sicht-kachel-textmarke {
  display: block; font-size: var(--t-caption);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s-1);
}
.sicht-kachel-text .sicht-absatz {
  white-space: pre-wrap; margin: 0; font-size: var(--t-fuss); line-height: 1.55;
  max-width: 62ch;
}
.sicht-kachel-merkmale {
  list-style: none; margin: var(--s-2) 0 0; padding: 0 var(--s-3);
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  font-size: var(--t-caption);
}
.sicht-kachel-merkmale li { margin: 0; }

/* DIE KNÖPFE SCHRUMPFEN NICHT MIT -- sie brechen um. Elinas Satz "ohne dass
   ... die beiden Buttons dabei verloren gehen oder unleserlich werden" ist
   hier die Grenze des Kompakten: "Ja — so produzieren" nebeneinander in eine
   239-px-Zeile zu zwingen, hieße zweizeilig gebrochene Beschriftung in einem
   115-px-Knopf. `flex-basis: 9rem` sorgt dafür, dass die beiden Formulare in
   einer schmalen Kachel UNTEREINANDER stehen (jeder Knopf dann volle Breite,
   einzeilig) und erst nebeneinander rücken, wenn die Kachel es trägt. Die
   Schriftgröße der Knöpfe bleibt unangetastet bei 15 px. */
.sicht-kachel-knoepfe {
  margin-top: auto; padding: var(--s-3);
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  border-top: 1px solid var(--c-linie-zart);
}
.sicht-kachel-form { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.sicht-kachel-form--knapp { flex: 1 1 9rem; }
.sicht-kachel-form textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: var(--t-text);
  border: 1px solid var(--c-linie); border-radius: var(--r-klein);
  padding: var(--s-2);
}
.sicht-kachel-form .leise { font-size: var(--t-caption); line-height: 1.45; }

.sicht-knopf--zusagen {
  font-weight: 600; border-width: 2px; padding: .5rem 1.1rem;
  color: #fff; background: var(--c-akzent); border-color: var(--c-akzent);
}
.sicht-knopf--zusagen:hover, .sicht-knopf--zusagen:focus {
  background: var(--c-daten-dunkel); border-color: var(--c-daten-dunkel);
  color: #fff;
}
.sicht-knopf--absagen {
  font-weight: 600; border-width: 2px; padding: .5rem 1.1rem;
  color: var(--c-hart-text); background: var(--c-hart-grund);
  border-color: var(--c-hart);
}
.sicht-knopf--absagen:hover, .sicht-knopf--absagen:focus {
  background: var(--c-hart); border-color: var(--c-hart); color: #fff;
}
/* `<summary>` bekommt sonst ein Aufklapp-Dreieck und sähe damit nicht aus wie
   ein Knopf. Es IST ein Knopf -- er öffnet nur statt zu senden, und genau das
   hat Elina verlangt ("der beim Klick ein Textfeld öffnet"). */
.sicht-kachel-absage { flex: 1 1 9rem; }
.sicht-kachel-absage > summary { cursor: pointer; display: block; text-align: center; }
.sicht-kachel-absage > summary::-webkit-details-marker { display: none; }
.sicht-kachel-absage > summary::marker { content: ""; }
.sicht-kachel-absage[open] > summary { margin-bottom: var(--s-3); }
.sicht-kachel-ohne { padding: var(--s-3); margin: auto 0 0; }
.sicht-kachel-zahl { margin: 0 0 var(--s-2); }

/* ------------------------------------------------------------------------
   DER RENDER-REVIEW-KREISLAUF (Elina Gerlinger, EL-20260917-df2279d5).
   Ab hier steht auf derselben Kachel nicht mehr ein Platzhalter, sondern das
   fertige Bild -- und zwar alle sechs bis sieben Karten des Karussells.

   EIN STREIFEN ZUM WISCHEN, KEIN RASTER. Sechs 4:5-Bilder untereinander wären
   in einer 263-px-Spalte über 2.000 px hoch: der Text und die Knöpfe darunter
   wären aus jedem Blickfeld geschoben, und die Kachel behauptet ja, so
   auszusehen wie das Ergebnis -- ein Instagram-Karussell wischt man auch.
   `scroll-snap` rastet je Karte ein, damit man nicht zwischen zwei Bildern
   stehen bleibt.

   KEINE ZEILE JAVASCRIPT, wie überall auf dieser Seite: die knopf-wache fährt
   sie ohne, und ein Streifen, der ohne Skript nicht scrollt, wäre für sie ein
   Bild. */
.sicht-kachel-galerie {
  display: flex; gap: var(--s-2); overflow-x: auto; padding: 0;
  scroll-snap-type: x mandatory;
  border-bottom: 1px solid var(--c-linie-zart);
  background: var(--c-grund);
}
.sicht-kachel-bildfeld {
  margin: 0; flex: 0 0 82%; scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.sicht-kachel-bildfeld:only-child { flex-basis: 100%; }
.sicht-kachel-bildfeld .sicht-kachel-bild { border-bottom: 0; }
.sicht-kachel-bildfeld figcaption {
  font-size: var(--t-caption); padding: 2px var(--s-2) var(--s-2);
}

/* DER WEG IN DEN CANVA-ENTWURF (Elina, EL-20260921-db2bcade). Er sitzt direkt
   unter dem Bild, weil er dessen zweite Hälfte ist: das Bild sagt "so sieht es
   aus", der Link sagt "hier kannst du daran arbeiten".

   ER SIEHT AUS WIE EIN LINK UND NICHT WIE EIN KNOPF, und das ist Absicht: die
   Knöpfe dieser Kachel ENTSCHEIDEN etwas (freigeben, verwerfen, bestätigen)
   und lösen bezahlte Arbeit aus. Dieser hier führt nur woandershin. Wer beides
   gleich aussehen lässt, hat eine Form gewählt und keine Absicht.

   DIE LEERFORM IST LEISE, ABER DA. Ein fehlender Link, der gar nichts anzeigt,
   ist von einer Kachel ohne Canva-Fähigkeit nicht zu unterscheiden. */
.sicht-kachel-canva {
  margin: 0; padding: var(--s-2) var(--s-3);
  font-size: var(--t-caption); line-height: 1.5;
  border-bottom: 1px solid var(--c-linie-zart);
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline;
}
.sicht-kachel-canvalink { font-weight: 600; }
.sicht-kachel-canva--leer { color: var(--c-text-leise); display: block; }

/* DER STAND UNTER DEM BILD. Er ist die Zeile, die "fertig" von "noch die
   Fassung davor" trennt -- ohne sie sieht beides gleich aus. Die Warnform
   greift dieselben Farben wie `.sicht-warnung`; ein eigenes Rot wäre eine
   zweite Sprache für dieselbe Dringlichkeit. */
.sicht-kachel-stand {
  margin: 0; padding: var(--s-2) var(--s-3);
  font-size: var(--t-caption); line-height: 1.45;
  border-bottom: 1px solid var(--c-linie-zart);
}
.sicht-kachel-stand--info { background: var(--c-grund); color: var(--c-text-leise); }
.sicht-kachel-stand--warnung {
  background: var(--c-hart-grund); color: var(--c-hart-text);
  font-weight: 600;
}

/* Der Verlauf: zugeklappt, weil er nach der dritten Runde länger ist als der
   Beitrag. Er DARF zugeklappt sein -- er beantwortet "was habe ich schon
   gesagt", und das fragt man gezielt. Der offene Stand-Satz darüber
   beantwortet "was ist gerade", und der darf nie hinter einem Klick liegen. */
.sicht-kachel-verlauf { margin: var(--s-2) var(--s-3) 0; font-size: var(--t-caption); }
.sicht-kachel-verlauf > summary { cursor: pointer; }
.sicht-kachel-verlauf ol { margin: var(--s-2) 0 0; padding-left: 1.2em; }
.sicht-kachel-verlauf li { margin-bottom: var(--s-2); }
.sicht-kachel-verlauf li > span { display: block; }
.sicht-kachel-verlauf li[data-stand="noch offen"] { font-weight: 600; }

/* DIE HINWEISE DER KACHEL, ZUGEKLAPPT (Elina, EL-20260921-216ef0ec). Sie
   stehen GANZ UNTEN und nicht zwischen Text und Knöpfen: was hier drin liegt,
   sind die Sätze, die auf jeder Kachel gleich lauten -- beim ersten Mal
   wertvoll, ab dem zweiten Mal Rauschen. Ein solcher Kasten gehört hinter die
   Handlung, nicht vor sie.

   KEINE EIGENE KLAPP-FORM. Der Kasten selbst ist `details.klapp` aus
   Baustein 13 (system.css); hier steht nur, WO er sitzt und wie die Liste
   darin gesetzt ist. Zwei Klapp-Formen nebeneinander wären dieselbe zweite
   Wahrheit, gegen die Baustein 13 gebaut wurde. */
.sicht-kachel-hinweise { padding: 0 var(--s-3) var(--s-3); }
.sicht-kachel-hinweise > details.klapp { margin: 0; }
/* Begriff und Erklärung als Paar: links steht, WORAUF sich der Satz bezieht
   ("Ja — so produzieren"), darunter der Satz. Ohne diese Zuordnung wäre der
   Kasten eine Sammlung herrenloser Sätze -- man müsste raten, zu welchem
   Knopf welcher gehört. */
.sicht-kachel-hinweisliste { margin: 0; font-size: var(--t-caption); line-height: 1.45; }
.sicht-kachel-hinweisliste dt { font-weight: 600; margin-top: var(--s-2); }
.sicht-kachel-hinweisliste dt:first-child { margin-top: 0; }
.sicht-kachel-hinweisliste dd { margin: 0; color: var(--c-text-leise); }

/* Das Feld für den Änderungswunsch steht OFFEN und über den Knöpfen -- es ist
   die Handlung, um die es hier geht, nicht ein Nachtrag zu ihr. */
.sicht-kachel-nachbessern { flex: 1 1 100%; }
.sicht-kachel-form select {
  width: 100%; box-sizing: border-box; font: inherit; font-size: var(--t-text);
  border: 1px solid var(--c-linie); border-radius: var(--r-klein);
  padding: var(--s-2); background: var(--c-flaeche); color: var(--c-text);
}

/* ZWEI NEUE KNOPFFORMEN, UND BEIDE SIND ABSICHTLICH NICHT DIE VON "JA".
   "Bestätigen" schließt einen Beitrag ab, "Ja — so produzieren" startet ihn:
   dieselbe Farbe für beides hieße, dass ein versehentlicher Klick an der
   gewohnten Stelle etwas anderes tut als erwartet. Bestätigen trägt deshalb
   die Akzentfarbe als RAND statt als Fläche, Nachbessern bleibt neutral. */
.sicht-knopf--annehmen {
  font-weight: 600; border-width: 2px; padding: .5rem 1.1rem;
  color: var(--c-akzent); background: var(--c-flaeche);
  border-color: var(--c-akzent);
}
.sicht-knopf--annehmen:hover, .sicht-knopf--annehmen:focus {
  background: var(--c-akzent); border-color: var(--c-akzent); color: #fff;
}
.sicht-knopf--nachbessern {
  font-weight: 600; border-width: 2px; padding: .5rem 1.1rem;
  color: var(--c-text); background: var(--c-flaeche);
  border-color: var(--c-linie);
}
.sicht-knopf--nachbessern:hover, .sicht-knopf--nachbessern:focus {
  background: var(--c-grund); border-color: var(--c-text-leise);
}

/* Der Aufklapper, unter dem die zurückgetretenen Tafeln liegen. Form
   übernommen von `.sicht-weitere` -- kein zweites Aufklapp-Idiom auf
   derselben Seite. */
.sicht-hintergrund { margin: var(--s-12) 0 var(--s-6); border-top: 1px solid var(--c-linie); padding-top: var(--s-4); }
.sicht-hintergrund > summary { cursor: pointer; font-weight: 600; }

@media (prefers-color-scheme: dark) {
  .sicht-kachel-bildmarke, .sicht-kachel-bildtext { background: var(--c-flaeche); }
}

/* Die Quittung nach einem Klick auf einer Sicht. Grün heißt "getan", rot
   heißt "nicht getan" -- und es gibt keinen dritten, beruhigenden Zustand
   dazwischen. Ein "wurde übermittelt" wäre genau der Satz, der nichts
   aussagt und trotzdem beruhigt. */
.sicht-quittung {
  border: 1px solid; border-radius: var(--r); padding: var(--s-3) var(--s-4);
  margin: var(--s-4) 0; font-size: var(--t-text); line-height: 1.5;
}
.sicht-quittung--ok {
  background: var(--c-gut-grund); border-color: var(--c-gut); color: var(--c-gut-text);
}
.sicht-quittung--fehler {
  background: var(--c-hart-grund); border-color: var(--c-hart); color: var(--c-hart-text);
}

/* --- DIE REEL-TIEFE (EL-20260916-98621f8a, 2026-09-16) ------------------
   Dieselben Bausteine wie die Zahlenliste darueber (`.veroeff-zahlen`), nur
   mit Abstand und Ueberschrift: die Tiefe ist eine FORTSETZUNG der Liste und
   kein zweiter Kasten -- ein eigener Rahmen sagte "andere Quelle", und das
   waere falsch, es ist derselbe Abruf.
   NUR VORHANDENE FARB-TOKEN, kein eigener Hexwert: sonst bliebe der Block im
   Dunkelmodus hell stehen (dieselbe Regel wie bei der Follower-Zeile). */
.reel-block { margin-top: var(--s-3); }
.reel-titel {
  font-size: var(--t-caption); font-weight: 600; color: var(--c-text-leise);
  margin: 0 0 var(--s-1);
}
/* Das Urteil steht NEBEN der Zahl und nicht statt ihr: "höher als sonst
   üblich" ohne den Wert ist eine Bewertung ohne Grundlage. */
.reel-urteil {
  display: block; font-size: var(--t-caption); font-weight: 400;
  color: var(--c-text-leise);
}
.reel-urteil.ist-gut { color: var(--c-gut-text); }
.reel-urteil.ist-schlecht { color: var(--c-warn-text); }
/* Das Nachtragen der App-Zahl: ein Feld, ein Knopf, eine Zeile. Es steht
   bewusst klein da -- es ist eine Ergaenzung von Hand und soll nicht wie eine
   Messung aussehen. */
.reel-hand {
  display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
  margin-top: var(--s-1);
}
.reel-hand input[type="number"] {
  width: 7em; padding: var(--s-1) var(--s-2);
  border: 1px solid var(--c-linie); border-radius: var(--r-klein);
  background: var(--c-flaeche); color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

/* ===================================================================
   ELINAS EIGENE KACHEL — zwei Aktionen, sonst nichts
   (Elina Gerlinger, EL-20260917-38693a07, 2026-09-17).

   KEINE NEUE PALETTE, KEINE NEUE KNOPFFORM. `knopf-leise` ist die schon
   vorhandene Hausform für Nebenwege — dieselbe, die „Einplanen" und
   „Löschen" tragen; `knopf-leise.entfernen` färbt sich erst beim Hover,
   und genau diese Zusage gilt hier weiter: Verwerfen ist umkehrbar, also
   schreit der Knopf vorher nicht. Hier steht deshalb NUR die Anordnung.

   Zwei gleich breite Knöpfe nebeneinander — dieselbe Geometrie wie
   `.vorschlag-knoepfe`, damit die Kachel nicht je Beitragsart ein anderes
   Bedienmuster zeigt. Bewusst keine dritte Spalte: „genau zwei Aktionen"
   ist der Auftrag, und ein Raster, das drei zuließe, würde die dritte
   irgendwann bekommen. */
.eigen-aktionen { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.eigen-aktionen form { flex: 1; display: flex; }
.eigen-aktionen .knopf-leise {
  width: 100%; display: inline-flex;
  align-items: center; justify-content: center;
  padding: var(--s-2);
}
/* Der Ausnahmefall-Kasten über den Knöpfen. Er trägt `hinweis` (Baustein 7)
   und braucht deshalb keine eigenen Farben — hier steht nur, dass seine
   Absätze nicht auseinanderfallen sollen, wenn es einmal zwei sind. */
[data-eigen-problem] p { margin: 0; }
[data-eigen-problem] p + p { margin-top: var(--s-1); }

/* --- Nur die eine Angabe aendern (EL-20260918-6652ebc6) ----------------
 * Elina: "gewuenscht ist ... dass bei so einem Fehler alle bereits
 * eingegebenen Angaben erhalten bleiben, die Ansicht direkt zu dem Feld
 * springt bzw es hervorhebt das den Fehler verursacht hat".
 * Der Karten-Weg beantwortet das auf der Antwortseite; der Reel-Weg auf
 * seiner Termin-Seite (Regeln dort in reel_stil.html). */
.korrektur { margin-top: var(--s-4); border-top: 1px solid var(--c-linie);
             padding-top: var(--s-3); }
.korrektur-hinweis { background: var(--c-hart-grund); color: var(--c-hart-text);
                     border-radius: var(--r-klein);
                     padding: var(--s-2) var(--s-3); }
/* Der Rahmen ist die ZWEITE Auskunft, nicht die einzige: der Satz darueber
 * nennt das Feld im Klartext, und `autofocus` springt hin. */
.korrektur-feld { outline: 2px solid var(--c-hart-linie);
                  outline-offset: var(--s-1); border-radius: var(--r-klein); }

/* --- DER LEERE TAG NACH DEM EINPLANEN (2026-10-02) ----------------------
 * Auftrag 20261002-kpi-content-kontinuitaet-instagram-einplanmaske-bietet-
 * leeren-tag. Die Antwortseite bietet den leeren Tag an; der Termin ist da
 * schon gesetzt, wie Elina ihn wollte. Das Angebot ist ein NEBENWEG, deshalb
 * tragen seine Knoepfe nicht die Form von `.karte button` (blau, seitenbreit
 * -- die naechste Handlung der Seite), sondern die leise: Linie statt
 * Flaeche, so breit wie ihr Text, nebeneinander. Nur Tokens, keine eigene
 * Farbe und kein freies Mass.
 */
.leertag-wege { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.leertag-weg { margin: 0; }
.karte .leertag-weg button {
  width: auto; margin-top: 0; padding: var(--s-2) var(--s-3);
  background: var(--c-flaeche); color: var(--c-text);
  border: 1px solid var(--c-linie); font-weight: 500; font-size: var(--t-13);
}
.karte .leertag-weg button:hover { border-color: var(--c-text-leise); }