/* ==========================================================================
   system.css -- das Gestaltungssystem der eigenen Oberflaechen.
   Angelegt 2026-09-10, Grossjob 20260910-GROSSJOB-dashboard-was-geplant-ist-
   ist-unlesbar-auf-einen-standard-bringen (s01).

   CHRISTIAN, NACHTRAG 3: "Standardisierte Schoenheit, a la Apple. Schoenheit
   entsteht dort nicht je Bildschirm neu, sondern folgt einem festgelegten
   System, das jeder benutzt. Wenige Schriftgroessen, ein festes Abstandsmass,
   eine kleine Farbpalette mit Bedeutung, immer dieselben Bausteine."

   GRUNDLAGE (benannt, nicht erfunden):
     * Schriftstaffel = Apple Human Interface Guidelines, Typography,
       Dynamic-Type-Vorgabegroessen (Caption 12 / Footnote 13 / Subheadline 15 /
       Body-Headline 17 / Title 3 20 / Title 2 22 / Title 1 28 / Large Title 34)
       https://developer.apple.com/design/human-interface-guidelines/typography
     * Abstandsmass = 4-pt-Basis mit 8-pt-Raster (Apple Layout / Material 3
       Spacing-Tokens / IBM Carbon 2x-Grid) -- alle Abstaende sind Vielfache.
     * Farben mit Bedeutung = Apple HIG Color ("avoid using the same color to
       indicate different things") + WCAG 2.2 1.4.3 (>= 4,5:1 fuer Text) und
       1.4.11 (>= 3:1 fuer Bedienelemente).
     * Kennzahlen/Diagramme = Few, Information Dashboard Design (eine Seite,
       Kontext an der Zahl, Farbe nur mit Bedeutung) + Tufte (Data-Ink).
   Genaue Quellen und die Uebersetzung jeder Regel in eine Aenderung stehen im
   RESULT des Grossjobs.

   HIER STEHT DAS SYSTEM, NICHT DIE SEITE. Seiten waehlen aus den Tokens und
   Bausteinen unten; wer einen freien Pixelwert schreibt, verlaesst das System.
   Die Klassen sind bewusst so benannt, dass eine ZWEITE Oberflaeche sie
   uebernehmen kann (content-schau, openclaw-dashboard, qi-annotate).

   RUECKWEG: vorschau.conf SYSTEM=off -> der Dienst liefert diese Datei nicht
   mehr aus (404) und die Seiten fallen auf stil.css allein zurueck.
   ========================================================================== */

/* ==========================================================================
   R6-FUNDAMENT -- DIE REGEL, DIE KEINE KOMPONENTE MEHR UEBERSTIMMEN KANN
   (2026-09-23, Elina Gerlinger, EL-20260923-00a41c2a)
   ==========================================================================
   Ihr Auftrag, woertlich: "die Mindestbreiten-Regel soll EINMALIG
   strukturell/dashboardweit ins Fundament eingebaut werden, so dass Verstoesse
   durch die Bauweise selbst gar nicht mehr entstehen koennen [...] statt sich
   auf staendiges Nachpruefen zu verlassen."

   BIS HEUTE WAR R6 EINE REGEL, DIE MAN BEFOLGEN MUSSTE: `break-word` stand
   im Fundament als gewoehnliche Erklaerung. Jede Komponente, die spaeter
   `overflow-wrap: anywhere` schrieb, gewann dagegen -- die Kaskade gibt der
   spaeteren, genaueren Regel recht. So ist der Fehler am 21.09. an einer
   "voellig neuen Stelle" wiedergekommen (`.freigabe-anriss`, `.lage-bestand`),
   und nur das NACHPRUEFEN hat es bemerkt.

   JETZT IST ES EINE EIGENSCHAFT DER BAUWEISE. Die beiden Erklaerungen stehen
   in einer KASKADENSCHICHT (`@layer`) und sind `!important`. Fuer wichtige
   Erklaerungen dreht CSS die Schichtreihenfolge um: die ZUERST erklaerte
   Schicht gewinnt gegen jede spaetere UND gegen jede Regel ohne Schicht --
   auch gegen deren `!important`. system.css wird auf jeder Seite als erstes
   Stilblatt geladen; `r6-fundament` ist damit die erste Schicht der Seite.
   Eine Komponente in stil.css, modus.css oder einem <style>-Block KANN den
   Umbruch an jeder Stelle nicht mehr einschalten, gleich wie sie es schreibt.
   Das Einzige, was noch darueber steht, ist ein `style="... !important"`
   direkt am Element -- das sucht die Bauregel (probe_r6_quelle, Arm
   `fundament`).

   ZWEI HAELFTEN, WIE IN R6:
     (1) Umbruch: `overflow-wrap: break-word` + `word-break: normal` fuer
         jedes Element. min-content ist damit immer das laengste WORT, nie
         ein Zeichen -- keine Spalte kann ihre Breite auf einen Buchstaben
         RECHNEN. Ein Wort, das allein nicht in die Zeile passt, bricht
         weiterhin um; es laeuft also nichts aus dem Bild.
     (2) Boden: jede Tabellenzelle der Huelle ab 600 px mindestens
         `--b-textmin` breit. Eine Komponente darf den Boden ANHEBEN
         (`--r6-zelle-min: 14ch`), aber nicht mehr SENKEN -- `min-width: 0`
         an einer Zelle ist wirkungslos.

   DIE AUSNAHMEN STEHEN NUR HIER, jede mit Grund. Wer irgendwo sonst eine
   R6-AUSNAHME schreibt, hat keine: sie wirkt nicht, und die Bauregel meldet
   sie als tote Ausnahme. Atome (`code`, `pre`, `kbd`, `samp`, externe
   Links, `[data-langwort]`) sind von der Sperre frei, weil ein Pfad keine
   bessere Bruchstelle hat als "irgendwo" -- ihr Umbruch kommt weiter aus
   den Bausteinen unten.

   WAS DIE SPERRE NICHT KANN, damit es niemand von ihr erwartet: einem
   Kasten, dem eine Komponente AUSDRUECKLICH eine Breite unter einem Wort
   vorgibt (`width: 18px`, eine Rasterspur `minmax(0, 1fr)`, die auf 0
   faellt), kann sie die Breite nicht zurueckgeben. Das faengt der Boden fuer
   Tabellenzellen und, fuer alles andere, die Browser-Messung (Bein 22).
   GENAU DAS IST AM 2026-09-24 EINGETRETEN (EL-20260924-4a8db5d6, R6c): die
   Kachel „Das beeinflusst deine Aufrufe" war ein Raster `minmax(0, 1fr)
   auto` -- keine Tabelle, also ohne Boden -- und sie wird erst per Klick
   nachgeladen, also nie von Bein 22 gesehen. Seither: die Spur-Bauform ist
   am Quelltext verboten (probe_r6_quelle, Arm `spur`, auch in der
   Bauregel), der Baustein dafuer ist `--spur-etikett`, und Bein 22 klappt
   nachgeladene Flaechen auf (Arm `nachladen` prueft, dass keine fehlt).

   RUECKWEG: diesen Block entfernen, ODER vorschau.conf SYSTEM=off (dann
   entfaellt system.css ganz). Beides meldet die taegliche Rueckversicherung
   (Bein 23) -- das erste als Befund, das zweite als abgeschaltet.
   ========================================================================== */
@layer r6-fundament {
  *:not(code, pre, kbd, samp, a[href^="http"], [data-langwort],
        /* R6-AUSNAHME: `.konzept-id` -- eine Innenkennung ohne Sinnfuge,
           wie `code`; sie steht in `details.technik` und ist kein
           Fliesstext. (stil.css, seit 2026-09-22) */
        .konzept-id,
        /* R6-AUSNAHME: `.lage-bestand a` -- die Quellen des Lagebilds stehen
           als volle Pfade und Kennungen (`.../ads_steuerung.db:ad_perf_daily`)
           in Links ohne http-Ziel. (stil.css, seit 2026-09-22) */
        .lage-bestand a) {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  @media (min-width: 600px) {
    .huelle td, .huelle th {
      min-width: max(var(--b-textmin), var(--r6-zelle-min, 0px)) !important;
    }
  }
}

:root {
  color-scheme: light;

  /* --- Schrift ---------------------------------------------------------- */
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Die Staffel: acht Stufen, sonst nichts. */
  --t-caption: 0.75rem;    /* 12  Caption 1 -- Fussnoten, Achsen, Etiketten  */
  --t-fuss:    0.8125rem;  /* 13  Footnote  -- Nebentext, Tabellen dicht     */
  --t-text:    0.9375rem;  /* 15  Subheadline -- Fliesstext dichter Flaechen */
  --t-kopf:    1.0625rem;  /* 17  Headline  -- Zwischentitel, Knopftext       */
  --t-titel3:  1.25rem;    /* 20  Title 3   -- Kartentitel                    */
  --t-titel2:  1.375rem;   /* 22  Title 2   -- Seitentitel                    */
  --t-titel1:  1.75rem;    /* 28  Title 1   -- Kennzahl in der Kachel          */
  --t-gross:   2.125rem;   /* 34  Large Title -- Leitzahl                     */
  --t-held:    3rem;       /* 48  die EINE Zahl, mit der eine Seite beginnt    */

  /* --- Abstandsmass (4-pt-Basis, 8-pt-Raster) ---------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  /* --- Form --------------------------------------------------------------- */
  --r: 10px;          /* Karte, Kachel, Menue */
  --r-klein: 6px;     /* Knopf, Pille, Balkenkappe */
  --schatten: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);

  /* --- Farben: jede bedeutet genau eine Sache ---------------------------- */
  --c-grund:        #f5f5f7;   /* die Seite                                   */
  --c-flaeche:      #ffffff;   /* eine Karte                                  */
  --c-linie:        #d2d2d7;   /* Trennlinie                                  */
  --c-linie-zart:   #e8e8ed;   /* Haarlinie in Tabellen und Achsen            */
  --c-text:         #1d1d1f;   /* Schrift                                     */
  --c-text-leise:   #6e6e73;   /* Zweitschrift (4,8:1 auf Weiss)              */
  --c-akzent:       #0066cc;   /* HANDLUNG: Link, Knopf (5,7:1)               */
  --c-akzent-grund: #e8f1fb;
  --c-gut:          #1a7f37;   /* laeuft / erfuellt                            */
  --c-gut-grund:    #e6f4ea;
  --c-gut-text:     #14652c;
  --c-warn:         #b25e00;   /* Achtung, Vorbehalt -- nicht "kaputt"         */
  --c-warn-grund:   #fff4e0;
  --c-warn-text:    #7a4100;
  --c-hart:         #c0392b;   /* Handlung noetig, Befund                      */
  --c-hart-grund:   #fdecea;
  --c-hart-text:    #8f2a1e;
  --c-neutral:      #8e8e93;   /* NICHT MESSBAR / keine Aussage -- grau, nie   */
  --c-neutral-grund:#eeeef0;   /* gelb: eine Messluecke ist kein Alarm        */
  --c-daten:        #2a78d6;   /* die Datenfarbe der Balken (eine Hue)        */
  --c-daten-hell:   #b7d3f6;
  --c-daten-dunkel: #1c5cab;

  /* --- Masse -------------------------------------------------------------- */
  --b-seite: 1200px;  /* der Rahmen, der die Seite haelt                     */
  --b-lesen: 68ch;    /* Zeilenlaenge fuer Fliesstext                        */
  --b-post: 430px;    /* der Instagram-Nachbau bleibt telefonbreit           */
  --b-textmin: 7ch;   /* UNTERGRENZE fuer einen Kasten, der Text traegt.     */
  --b-etikett-min: 12ch; /* UNTERGRENZE fuer ein ETIKETT neben einem Wert   */
  /* Die Spur fuer ein Etikett neben einer `auto`-Spur (R6c, 2026-09-24,
     EL-20260924-4a8db5d6). `minmax(0, 1fr) auto` ist die Bauform aller drei
     gemeldeten Buchstabentuerme: die `auto`-Spur nimmt sich ihre
     max-content-Breite, die 0 daneben gibt das Etikett bis auf NULL her.
     Mit dieser Spur bleibt dem Etikett mindestens --b-etikett-min (oder die
     ganze Breite, wenn der Kasten schmaler ist); was dann nicht passt,
     laeuft sichtbar ueber, statt zu schreddern. 12ch ist hergeleitet: die
     Etiketten der Wertpaare sind Woerter wie „Kommentare" (10), „Betrachter"
     (10), „Gespeichert-" (12 bis zur Trennstelle); 12ch haelt sie ganz, und
     ein Etikett neben einer Zahl ist im gesunden Stand ohnehin breiter.
     Die Bauregel dazu ist der Arm `spur` in probe_r6_quelle.py. */
  --spur-etikett: minmax(min(var(--b-etikett-min), 100%), 1fr);
  --h-nav: 48px;      /* die Navigation hat EINE Hoehe, auf jeder Seite      */
  /* --b-textmin ist die Mindestbreite aus Elinas Grundsatz "in die Breite,
     nicht in die Laenge" (EL-20260921-491012e8). Sie ist die ZWEITE Haelfte
     von R6 (Baustein 1): `overflow-wrap: break-word` verhindert, dass ein
     Kasten seine Breite auf ein Zeichen RECHNET; --b-textmin verhindert, dass
     ihm eine Breite unterhalb eines kurzen Wortes VORGEGEBEN wird (feste
     Spurbreiten, `minmax(0, 1fr)`, `flex-basis: 0`). 7ch ist gemessen und
     nicht geraten: die kuerzesten echten Zellwerte des Dashboards sind
     9 Zeichen ("RF-696252") bzw. 8 ("im Video"); 7ch haelt sie einzeilig,
     ohne eine Zahlenspalte ("12") unnoetig zu dehnen.
     DURCHGESETZT WIRD SIE NICHT VON DIESER ZEILE, SONDERN GEMESSEN:
     `pruefungen/probe_buchstabenturm.py` faehrt jede Seite ab und meldet
     JEDEN Text, der buchstabenweise bricht -- auch in einer Bauform, die
     diesen Token nie gelesen hat. Ein Token, das man setzen muss, wird
     vergessen; eine Wache, die misst, nicht. */

  /* --- Aliase der bisherigen Tokens (stil.css) --------------------------
     Die alten Namen bleiben gueltig und zeigen auf die neue Staffel. So
     faellt kein bestehendes Bauteil um, und es gibt trotzdem nur EINE Staffel. */
  --t-11: var(--t-caption); --t-12: var(--t-caption); --t-13: var(--t-fuss);
  --t-14: var(--t-text);    --t-16: var(--t-kopf);    --t-18: var(--t-titel3);
  --t-21: var(--t-titel2);  --t-24: var(--t-titel1);  --t-32: var(--t-gross);
  --c-warn-linie: var(--c-warn);  --c-hart-linie: var(--c-hart);
  --c-gut-linie: var(--c-gut);
  --c-hinweis-grund: var(--c-akzent-grund); --c-hinweis-linie: #b9d2ee;
  --c-hinweis-text: #1c4e88;
}

/* ==========================================================================
   Grundlage
   ========================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-grund);
  color: var(--c-text);
  font: var(--t-text) / 1.5 var(--schrift);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--t-titel2); }
h2 { font-size: var(--t-titel3); }
h3 { font-size: var(--t-kopf); }
p { margin: 0 0 var(--s-3); }
a { color: var(--c-akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--schrift-mono); font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--c-akzent); outline-offset: 2px; }
.leise { color: var(--c-text-leise); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   Baustein 1: der Rahmen. EIN Behaelter haelt jede Seite.
   ========================================================================== */
.huelle, .kopf-innen, .bereichswahl, .reiter, .unternav, .werkzeuge,
.markennavi, .sichtnavi, .huelle--breit {
  max-width: var(--b-seite);
  margin-left: auto; margin-right: auto;
  padding-left: var(--s-6); padding-right: var(--s-6);
  min-width: 0;
}
.huelle { padding-top: var(--s-4); padding-bottom: var(--s-16); }
main.huelle > * { min-width: 0; }
@media (max-width: 599px) {
  .huelle, .kopf-innen, .bereichswahl, .reiter, .unternav, .werkzeuge,
  .markennavi, .sichtnavi { padding-left: var(--s-4); padding-right: var(--s-4); }
  .huelle { padding-top: var(--s-4); padding-bottom: var(--s-12); }
}
/* Nichts laeuft aus dem Bild: lange Woerter und Pfade brechen, Tabellen und
   Rahmen bekommen ihre eigene Rolle statt die Seite zu dehnen.

   R6 -- DIE BREITE IST DIE VORGABE, AUCH INNERHALB EINER KACHEL.
   ==========================================================================
   Hier stand bis zum 2026-09-21 `overflow-wrap: anywhere` fuer die GANZE
   Seite. Das ist die Wurzel des Fehlers, den Elina Gerlinger dreimal gemeldet
   hat (EL-20260916-bcc8a088 "Gepl / ante / Post / s" in Kurz gesagt,
   EL-20260917-cc77b88c die Seitenkarten, EL-20260921-491012e8 die Kachel
   "Vorschlag des Servers") -- und sie ist NICHT die Enge des jeweiligen
   Kastens:

     `anywhere` erlaubt den Umbruch an JEDER Stelle und setzt damit die
     min-content-Breite eines Wortes auf EIN ZEICHEN. Jedes Layout, das seine
     Breite aus dem Inhalt rechnet -- eine Tabellenspalte, eine Rasterspur mit
     `auto`, ein Flex-Kind -- darf einen Text danach auf Buchstabenbreite
     zusammenschieben. Die Spalte wird nicht sichtbar zu eng; sie schreddert
     den Text in einen Turm einzelner Buchstaben und sieht dabei "fertig" aus.

   `break-word` haelt die Zusage von oben -- ein Wort, das allein nicht in die
   Zeile passt, bricht weiterhin um, es laeuft also nichts aus dem Bild --
   nimmt ihr aber die Wirkung auf die INTRINSISCHE Messung: min-content ist
   wieder das laengste Wort. Eine Spalte kann danach nicht mehr schmaler
   werden als ein Wort; sie waechst, und wo kein Platz ist, rollt der
   zustaendige Rahmen (`.sicht-tabelle-rahmen`, `pre`).

   Am 2026-09-16 ist genau dieser Tausch schon einmal gemacht worden -- aber
   nur fuer `dl.zahlzeilen` (Baustein 12 weiter unten). Ein Guard fuer EINE
   Bauform laesst die naechste Bauform ungeschuetzt: die Kachel-Tabellen der
   Sichten standen am 2026-09-21 auf 1440 px mit 41 Buchstabentuermen da.
   Deshalb steht der Tausch jetzt an der Wurzel und die Ausnahme -- nicht die
   Regel -- muss sich melden.

   WER `anywhere` WIRKLICH BRAUCHT, sagt es: unteilbare Langwoerter ohne
   Sinnfuge (Pfade, Kennungen, URLs). Die stehen in `code`/`pre`/`kbd`/`samp`
   und in externen Links; dort ist ein Bruch an beliebiger Stelle richtig,
   weil es keine bessere Stelle gibt. Fuer Fliesstext gibt es sie. */
body { overflow-x: hidden; }
.huelle, .kopf { overflow-wrap: break-word; }
.huelle code, .huelle kbd, .huelle samp, .huelle pre,
.huelle a[href^="http"], .huelle [data-langwort],
.kopf code, .kopf a[href^="http"] { overflow-wrap: anywhere; }
img, svg, video, iframe { max-width: 100%; }
table { border-collapse: collapse; }

/* DER BODEN UNTER JEDEM TEXTKASTEN, DER SEINE BREITE AUS DEM INHALT RECHNET
   (2026-09-22, Elina Gerlinger, EL-20260922-e7158e89).
   ==========================================================================
   Ihr Satz lautet "globale Mindestbreite fuer Text-Container", und bis heute
   war die Untergrenze genau EINE Bauform breit: `.sicht-tabelle th, td` in
   stil.css. Das ist derselbe Zuschnitt, mit dem am 2026-09-16 `dl.zahlzeilen`
   repariert wurde -- und die naechste Bauform stand fuenf Tage spaeter
   wieder als Buchstabenturm da. Ein Guard fuer EINE Bauform laesst die
   naechste ungeschuetzt; deshalb steht der Boden jetzt hier, im Fundament,
   und gilt fuer JEDE Tabellenzelle der Huelle -- auch fuer die, die es heute
   noch nicht gibt.

   WARUM TABELLENZELLEN: sie sind der Ort, an dem eine Breite wirklich aus
   dem Inhalt gerechnet wird. Am 2026-09-21 standen dort 41 der 41 Tuerme auf
   1440 px ("RF-696252" auf 58 px in drei Zeilen).

   WARUM ERST AB 600 px, UND WARUM DAS KEINE LUECKE IST: `min-width` an einer
   Zelle kann eine breite Tabelle ueber den Schirm schieben, und `body` hat
   `overflow-x: hidden` -- auf dem Telefon waere der Rueckweg also BESCHNEIDEN
   statt rollen, und Beschneiden verliert Inhalt. Der gemeldete Fehler sass
   ausserdem am BREITEN Desktop: 41 Tuerme auf 1440 px. Unterhalb von 600 px
   traegt die erste Haelfte von R6 allein -- `overflow-wrap: break-word` oben
   in diesem Baustein setzt die min-content-Breite auf das laengste WORT und
   nicht auf ein Zeichen; gemessen am 2026-09-21 waren das auf 390 px
   0 Tuerme (vorher 507).

   Wo eine Tabelle dadurch breiter wird als ihr Platz, ROLLT ihr Rahmen
   (`.sicht-tabelle-rahmen`, `overflow-x: auto`) -- rollen ist der richtige
   Rueckweg, schreddern nicht.

   SEIT 2026-09-23 STEHT DIE REGEL SELBST OBEN IM R6-FUNDAMENT (Kopf dieser
   Datei), in der Kaskadenschicht, gegen die keine Komponente mehr gewinnt.
   Hier stand sie als gewoehnliche Erklaerung -- ein `min-width: 0` an einer
   Zelle haette sie still ueberstimmt. Zwei Stellen mit derselben Regel
   waeren der Fehler, bei dem die falsche still gewinnt; deshalb nur dort. */
pre { overflow-x: auto; max-width: 100%; }

/* ==========================================================================
   Baustein 2: der Kopf -- Navigation ZUERST, dann der Seitentitel.
   Der Kopf ist NICHT klebrig: ein 240-580 px hoher klebriger Kopf war der
   gemessene Zustand vom 2026-09-10 und nahm dem Telefon zwei Drittel des
   Bildes.
   ========================================================================== */
.kopf {
  position: static;
  background: var(--c-flaeche);
  border-bottom: 1px solid var(--c-linie);
  padding: 0;
  display: flex; flex-direction: column;
}
.kopf > .bereichswahl { order: -1; }         /* die Navigation steht oben  */
.kopf-innen {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  padding-top: var(--s-4); padding-bottom: var(--s-3);
}
.kopf h1 { font-size: var(--t-titel2); }
.kopf .leise { font-size: var(--t-fuss); }
.kopf a:not(.bereich-knopf):not(.reiter-knopf):not(.unternav-knopf) {
  font-size: var(--t-fuss);
}
.kopf .reiter { margin-top: 0; }

/* ==========================================================================
   Baustein 3: die Navigation -- EINE Zeile, EINE Hoehe, eine Rangfolge.
   Vorn stehen die Eintraege der taeglichen Arbeit, alles andere in EINEM
   Menue mit benannten Gruppen (Apple: hoechstens fuenf Reiter, der Rest
   unter "Mehr"; Material: 3-5 Ziele in der Leiste).
   ========================================================================== */
.bereichswahl {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: var(--s-1);
  height: var(--h-nav); min-height: var(--h-nav); max-height: var(--h-nav);
  border-bottom: 1px solid var(--c-linie-zart);
  overflow: visible;                            /* das Menue darf heraus      */
  position: relative; z-index: 20;
}
.bereich-knopf {
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: 32px; padding: 0 var(--s-3);
  border-radius: var(--r-klein);
  font-size: var(--t-text); font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--c-text-leise);
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
}
a.bereich-knopf:hover { color: var(--c-text); background: var(--c-grund); text-decoration: none; }
.bereich-knopf--aktiv { color: var(--c-text); font-weight: 600; background: var(--c-grund); }
.bereich-knopf--kommt-noch, .bereich-knopf--stoerung { cursor: default; opacity: .7; }
.bereich-knopf--stoerung { color: var(--c-warn-text); background: var(--c-warn-grund); opacity: 1; }
.bereich-knopf .leise { font-size: var(--t-caption); }

/* Das Menue "Mehr": ein <details>, dessen Inhalt als Ebene UEBER der Seite
   liegt -- es schiebt nichts, also springt nichts. */
/* DER WEG ZUR HILFE, am rechten Ende der Leiste (Elina EL-20260910-eda52d48,
   Wiedervorlage 2026-09-16). Er sitzt hinter dem Modus-Knopf und erbt dessen
   Regel: das WORT verschwindet unter 800 px, das Fragezeichen bleibt. Die
   Leiste hat eine feste Hoehe und bricht nicht um -- was hier steht, muss am
   Telefon in den Rest passen.
   `margin-left: auto` nur, wenn weder "Mehr" noch der Modus-Knopf da sind:
   die tragen das auto sonst schon, und zwei davon rissen die Leiste ausein-
   ander. */
.hilfe-weg {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-1);
  height: 32px; min-width: 32px; padding: 0 var(--s-2);
  margin-left: auto; flex: 0 0 auto;
  border: 1px solid var(--c-linie); border-radius: var(--r-klein);
  background: var(--c-flaeche); color: var(--c-text-leise);
  font: 500 var(--t-fuss) var(--schrift); white-space: nowrap;
  text-decoration: none;
}
.dash-mehr + .hilfe-weg, .modus-form + .hilfe-weg { margin-left: var(--s-1); }
a.hilfe-weg:hover { color: var(--c-text); background: var(--c-grund); text-decoration: none; }
.hilfe-weg--aktiv { color: var(--c-text); font-weight: 600; background: var(--c-grund); cursor: default; }
.hilfe-weg .hilfe-weg-zeichen { font-weight: 700; line-height: 1; }
.hilfe-weg .hilfe-weg-wort { display: none; }
@media (min-width: 800px) { .hilfe-weg .hilfe-weg-wort { display: inline; } }
@media (max-width: 599px) { .hilfe-weg { padding: 0 var(--s-1); min-width: 28px; } }

/* EIGENEN POST EINREICHEN, in der Leiste selbst (Elina EL-20260918-3e1d3bdc,
   2026-09-18). Er steht LINKS bei den Bereichen und nicht rechts bei den
   Werkzeugen: er ist eine Handlung. Deshalb traegt er KEIN `margin-left:auto`
   -- das gehoert `.dash-mehr`, das die rechte Gruppe abdrueckt.
   Er erbt die Regel des Hilfe-Weges: das WORT verschwindet unter 800 px, das
   Pluszeichen bleibt. Die Leiste hat eine feste Hoehe und bricht nicht um --
   was hier steht, muss am Telefon in den Rest passen.
   Betonter als ein Bereichs-Knopf (Rahmen in der Akzentfarbe), weil er als
   einziger Eintrag der Leiste etwas ANLEGT statt etwas zu zeigen. */
.einreich-weg {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-1);
  height: 32px; min-width: 32px; padding: 0 var(--s-2);
  flex: 0 0 auto;
  border: 1px solid var(--c-akzent, var(--c-linie));
  border-radius: var(--r-klein);
  background: var(--c-flaeche); color: var(--c-akzent, var(--c-text));
  font: 600 var(--t-fuss) var(--schrift); white-space: nowrap;
  text-decoration: none;
}
a.einreich-weg:hover { color: var(--c-text); background: var(--c-grund); text-decoration: none; }
.einreich-weg--aktiv { color: var(--c-text); background: var(--c-grund); cursor: default; }
.einreich-weg .einreich-weg-zeichen { font-weight: 700; line-height: 1; font-size: 1.1em; }
.einreich-weg .einreich-weg-wort { display: none; }
@media (min-width: 800px) { .einreich-weg .einreich-weg-wort { display: inline; } }
@media (max-width: 599px) { .einreich-weg { padding: 0 var(--s-1); min-width: 28px; } }
/* DIE LEISTE WIRD AM TELEFON ENGER, damit sie ihren siebten Eintrag traegt
   (Elina EL-20260918-3e1d3bdc). Gemessen am 2026-09-18 mit Chromium bei
   390 px Fensterbreite: die Leiste war vor dem neuen Knopf GENAU 390 px
   breit -- passgenau, ohne einen Pixel Luft. Der Knopf (28 px + 4 px Spalt)
   schob sie auf 422 px, und `rahmen` von probe_(reel_)oberflaechen_standard
   meldete das auf JEDER Flaeche: "Seite 422 px breit bei 390 px Fenster".
   Sichtbar war es nicht (`body { overflow-x: hidden }`) -- es war ein
   ABGESCHNITTENER Knopf, und das ist der teurere Fehler.
   ZWEI SCHRAUBEN, BEIDE NUR UNTER 600 px: der Aussenrand der Leiste
   (16 -> 8 px, spart 16 px) und die Innenpolsterung ihrer Bereichs-Knoepfe
   (12 -> 8 px, spart bei drei Knoepfen 24 px). Zusammen 40 px, gemessen
   landen wir bei 382 px. Die feste Hoehe und `nowrap` bleiben unangetastet:
   eine umbrechende Leiste war der Befund vom 2026-09-10. */
@media (max-width: 599px) {
  /* `width: 100%` IST DER EIGENTLICHE HEBEL, und er war nicht offensichtlich:
     die Leiste sitzt als Flex-Element in `.kopf` und traegt aus dem
     Rahmen-Baustein `margin-left/right: auto`. Auto-Raender in der
     Querachse schalten `align-items: stretch` AB -- die Leiste bekam
     deshalb nie die Breite ihres Elternteils, sondern die ihres INHALTS
     (gemessen bei 360 px Fenster: Elternteil 328 px, Leiste 406 px). Ohne
     eine Breite, die kleiner ist als der Inhalt, greift `flex-shrink` der
     Knoepfe nie -- sie hatten nichts, wogegen sie schrumpfen sollten. */
  .bereichswahl { width: 100%; }
  .bereichswahl { padding-left: var(--s-2); padding-right: var(--s-2); }
  /* DER SPALT WIRD KLEINER, DAMIT DIE NAMEN GANZ BLEIBEN. Sechs Spalten a
     4 px sind 24 px; bei 2 px sind es 12 px, und genau die fehlten auf einem
     390-px-Telefon (gemessen: 386 px Inhalt bei 390 px Fenster, also passend
     OHNE Schrumpfen). Erst unterhalb davon greift das Schrumpfen der drei
     Namen -- lieber ein gekuerzter Name als ein Knopf, der gar nicht mehr
     da ist. */
  .bereichswahl { gap: 2px; }
  .bereichswahl .bereich-knopf {
    padding-left: var(--s-2); padding-right: var(--s-2);
    /* UND SIE DUERFEN SCHRUMPFEN. Das ist die eigentliche Schraube: die
       Leiste war auch VOR dem neuen Knopf nur fuer ein 390-px-Geraet passend
       (gemessen 390 px von 390) und lief auf einem 360-px-Telefon schon
       ueber -- unsichtbar, weil `body { overflow-x: hidden }` es abschneidet.
       Die drei Bereichs-Knoepfe tragen Text und sind die einzigen, die
       nachgeben KOENNEN; die Icon-Knoepfe daneben bleiben `flex: 0 0 auto`
       und damit unversehrt. Der volle Name steht weiterhin im `title`. */
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
}

/* DIE REITER HINTER "+ Eigener Post" -- "Ads", "SEO/GEO", seit
   2026-09-26 "KPIs" und seit 2026-09-27 "Markt" (Christian 2026-09-24,
   2026-09-26 und 2026-09-27, Grossjobs ...-vorschau-reiter-ads-und-seo-geo-...,
   ...-zielsteuerung-kpis-... und ...-marktradar-eigener-similarweb).
   Ab 1120 px stehen sie in der Leiste zwischen Eigener Post und Mehr.
   Darunter liegen sie oben im Menue "Mehr" (Gruppe `--nach`), denn die
   Leiste hat EINE Zeile und bricht nicht um.
   DIE SCHWELLE WAR BIS 2026-09-26 700 px, UND DAS WAR ZU SCHMAL -- gemessen,
   nicht vermutet (Chromium, angemeldet, /seo-geo): mit zwei Reitern war die
   Leiste bei 700 und 768 px Fenster 886 px breit, mit dem dritten 947 px;
   `body { overflow-x: hidden }` schnitt Mehr, Hilfe und Profil dabei
   UNSICHTBAR ab. Die Wachen messen nur 1440 und 390 px und sahen es nie.
   Die volle Leiste brauchte rund 980 px; darum 1000.
   SEIT 2026-09-27 1050, WEIL "Markt" DER VIERTE REITER IST -- wieder
   gemessen (Chromium, angemeldet): mit vier Reitern ist die Leiste 1010 px
   breit, bei 1000 und 1024 px Fenster wurde der body der Startseite 1046 px
   breit und das Profilmenue um 22 px abgeschnitten (s03 Marktradar). Ab
   1050 px passt sie -- auf der Startseite aber erst, seit das Schrumpfnetz
   dort gilt (Baustein "DAS NETZ GALT AUF DER STARTSEITE NICHT" weiter
   unten; ohne es blieb die Leiste dort 1064 px breit). Die Grenze steht
   deshalb bei 1049/1050, nicht bei der naechsten runden Zahl.
   SEIT 2026-10-01 1120, WEIL 1050 NUR MIT GEKAPPTEM GRIFF PASSTE (Job
   20261001-vorschau-leiste-mehr-griff-gekappt-seit-reels-cutter-prio45).
   Am 2026-09-28 kam "+ Reels Cutter" (107 px) in die Leiste; seitdem stand
   bei 1050 px im Griff "Mehr" nur noch "M" (24 px) und auf /aufwand "W▾",
   bis ~1250 px. Die Rect-Probe sah es nicht: ein 24-px-Griff liegt ganz im
   Bild. Gemessen nach der Heilung des Schrumpfnetzes (Baustein "DER GRIFF
   GIBT NICHT NACH" unten; Chromium, angemeldet, alle vier Wege): mit allen
   Untergrenzen braucht die Leiste 1020 px; der ENGSTE FALL ist /aufwand
   (Griff mit dem aktiven Namen, Untergrenze sieben Zeichen) mit dem Wort
   "Dunkel" im Modus-Knopf (78 px statt "Hell" 60 px -- der Modus gilt fuer
   alle und wechselt): 1066 px, passt also ab 1106 px Fenster. 1120 laesst
   14 px Luft. Mehr nicht, denn jeder Pixel darueber kostet die Reiter in der
   Leiste. Wer misst, misst beide Modus-Woerter: die erste Fassung dieser
   Schwelle (1100) war mit "Hell" gemessen und lief mit "Dunkel" 7 px ueber.
   WER EINEN KNOPF ODER REITER DAZUNIMMT, misst neu und hebt die Schwelle --
   seit 2026-10-01 meldet pruefungen/probe_reiter_im_sichtfeld.py das selbst:
   ihr Wort-Arm misst bei 1120 px, ob der Griff noch "Mehr ▾" zeigt.
   Unter 700 px bleibt alles wie bisher (die Woerter von Hilfe und Eigener
   Post fallen weg). */
/* DIE MENUE-GRUPPE `--nach` BRAUCHT DEN ELTERN-SELEKTOR. Bis 2026-09-27
   stand hier `.dash-menue-gruppe--nach { display: none; }` -- dieselbe
   Spezifitaet wie `.dash-menue-gruppe { display: grid; }` weiter unten, und
   die spaetere Regel gewinnt. Gemessen (Chromium, 1440 px): die Gruppe
   "Anzeigen, Google und Ziele" stand im Menue "Mehr" UND die Reiter in der
   Leiste -- jeder Eintrag doppelt, seit dem 2026-09-24. */
.dash-menue > .dash-menue-gruppe--nach { display: none; }
@media (max-width: 1119px) {
  .bereichswahl > .bereich-knopf--nach { display: none; }
  .dash-menue > .dash-menue-gruppe--nach { display: grid; }
}

.dash-mehr { position: relative; margin-left: auto; }
.dash-mehr > summary {
  list-style: none; display: inline-flex; align-items: center; gap: var(--s-1);
  height: 32px; padding: 0 var(--s-3); border-radius: var(--r-klein);
  font-size: var(--t-text); font-weight: 500; color: var(--c-text-leise);
  cursor: pointer; white-space: nowrap; user-select: none;
}
.dash-mehr > summary::-webkit-details-marker { display: none; }
.dash-mehr > summary::after { content: "▾"; font-size: 0.85em; }
.dash-mehr[open] > summary, .dash-mehr > summary:hover { color: var(--c-text); background: var(--c-grund); }
.dash-mehr--aktiv > summary { color: var(--c-text); font-weight: 600; }
.dash-mehr-wort { display: none; }
.dash-mehr-wort--immer { display: inline; }
@media (max-width: 699px) {
  .dash-mehr-aktiv { display: none; }
  .dash-mehr-wort { display: inline; }
}
.dash-menue {
  position: absolute; right: 0; top: calc(100% + var(--s-1));
  min-width: 260px; max-width: min(92vw, 360px);
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,.10);
  padding: var(--s-2);
  display: grid; gap: var(--s-2);
}
/* UNTER 600 px HAENGT DAS MENUE AM LEISTENRAND, NICHT AM KNOPF (Job
   20260924-vorschau-mehr-menue-ragt-auf-390px-links-aus-dem-bild).
   Rechts von "Mehr" stehen Hilfe und Profil; `right: 0` am Knopf plus
   `min-width: 260px` schob das Menue links aus dem Bild -- gemessen x = -14
   bei 390 px und x = -44 bei 360 px. `position: static` gibt die Bindung an
   `.bereichswahl` weiter (die ist `position: relative`), und deren rechter
   Innenrand liegt immer im Bild. Die Leiste selbst bleibt unberuehrt.
   Probe: pruefungen/probe_mehr_menue_im_bild.py (Rect gegen Rect). */
@media (max-width: 599px) {
  .dash-mehr { position: static; }
  .dash-menue { right: var(--s-2); max-width: calc(100% - 2 * var(--s-2)); }
}
.dash-menue-gruppe { display: grid; gap: 2px; }
.dash-menue-titel {
  font-size: var(--t-caption); color: var(--c-text-leise);
  text-transform: uppercase; letter-spacing: .06em;
  padding: var(--s-2) var(--s-3) var(--s-1);
}
.dash-menue .bereich-knopf { height: 36px; white-space: normal; text-align: left;
  justify-content: flex-start; }
.dash-menue .bereich-knopf--aktiv { background: var(--c-akzent-grund); color: var(--c-akzent); }

/* DER PROFIL-BEREICH, ganz rechts in der Leiste (Elina EL-20260923-3db1e94e,
   2026-09-23: "sichtbar [...] welches Konto aktuell aktiv ist"). Er folgt der
   Regel von Hilfe- und Modus-Knopf: das WORT (der Name) verschwindet unter
   800 px, das Zeichen (der Kreis mit dem Anfangsbuchstaben) bleibt. Die Leiste
   hat eine feste Hoehe und bricht nicht um; der Kreis ist 28 px, und am
   Telefon geben die Bereichs-Knoepfe nach (Baustein 3, `flex: 0 1 auto`).
   Das Blatt liegt wie "Mehr" als Ebene UEBER der Seite -- es schiebt nichts.
   Eigene Klassen statt `.dash-menue`: Proben zaehlen das Navigations-Menue an
   seinem Namen, und ein zweites davon waere ein Falsch-Befund. */
.profil-menue { position: relative; margin-left: var(--s-1); flex: 0 0 auto; }
.bereichswahl > .profil-menue:only-child { margin-left: auto; }
.profil-menue > summary {
  list-style: none; display: inline-flex; align-items: center; gap: var(--s-2);
  height: 32px; padding: 0 var(--s-2) 0 2px; border-radius: 16px;
  border: 1px solid var(--c-linie); background: var(--c-flaeche);
  font: 500 var(--t-fuss) var(--schrift); color: var(--c-text);
  cursor: pointer; white-space: nowrap; user-select: none;
}
.profil-menue > summary::-webkit-details-marker { display: none; }
.profil-menue > summary::after { content: "▾"; font-size: 0.85em; color: var(--c-text-leise); }
.profil-menue[open] > summary, .profil-menue > summary:hover { background: var(--c-grund); }
.profil-kreis {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--c-akzent-grund, var(--c-grund)); color: var(--c-akzent, var(--c-text));
  font-weight: 700; font-size: 13px; line-height: 1;
}
.profil-kreis--klein { width: 22px; height: 22px; font-size: 11px; }
.profil-menue--vertretung > summary { border-color: var(--c-warn-text); }
.profil-menue--vertretung .profil-kreis { background: var(--c-warn-grund); color: var(--c-warn-text); }
.profil-name { display: none; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 800px) { .profil-name { display: inline; } }
@media (max-width: 599px) {
  .profil-menue { margin-left: 2px; }
  .profil-menue > summary { padding: 0 2px; gap: 0; }
  .profil-menue > summary::after { content: none; }
}
/* DIE LEISTE IST NIE BREITER ALS IHR PLATZ (Job 20260926-elina-vorschau-
   leiste-700-735px-und-zwischenbreite-prio45). Gemessen am 2026-09-26,
   Chromium, angemeldet, Profilname an der 14ch-Kappe: die Leiste war mit den
   Woertern von Eigener Post, Dunkel, Hilfe und Profil 788 px breit -- und die
   Woerter kamen ab 700 px. Zwischen 700 und 787 px schnitt `body {
   overflow-x: hidden }` den Profilnamen UNSICHTBAR ab (bei 720 px 63 %
   sichtbar). Die Wachen massen nur 1440 und 390 px und sahen es nie.
   ZWEI SCHRAUBEN, weil es zwei Ursachen sind:
   (1) DIE WORTSCHWELLE 700 -> 800 px (Hilfe, Eigener Post, Profilname hier;
       Hell/Dunkel in modus.css). Die volle Leiste braucht 788 px, 800 laesst
       12 px Luft.
   (2) DIE BREITE HAENGT AM INHALT, nicht nur an der Schwelle: steht der
       aktive Eintrag im Menue "Mehr", traegt dessen Griff seinen Namen, und
       /aufwand mass damit 904 px bei 820 px Fenster und 1115 px bei 1000 px
       (dort kamen damals die Reiter hinter Eigener Post dazu; seit
       2026-10-01 erst ab 1120 px). Jede feste Schwelle
       bricht am naechsten laengeren Namen. Darum darf die Leiste nie breiter
       sein als ihr Behaelter, und die zwei Eintraege mit einem NAMEN darin
       (Griff von "Mehr", Profil) geben mit Auslassungszeichen nach -- wie
       die Bereichs-Knoepfe unter 600 px (Baustein 3). Der volle Name steht
       im Menue bzw. im Profilblatt. Knoepfe ohne Namen bleiben unversehrt.
   Probe: pruefungen/probe_reiter_im_sichtfeld.py (390, 720, 840, 1000, 1120
   und 1440 px, /aufwand, Werkzeuge rechts), Rect gegen Rect UND seit
   2026-10-01 das Wort im Etikett. */
.bereichswahl { max-width: min(var(--b-seite), 100%); }
/* DAS NETZ GALT AUF DER STARTSEITE NICHT (gemessen 2026-09-27, Chromium,
   angemeldet, Profilname an der 14ch-Kappe, Folgeauftrag ...-markt-reiter-
   in-leiste-schwelle-1050-prio40). stil.css setzt fuer die Startseite
   (`.ansicht-nebeneinander .bereichswahl`, ab 860 px, Spezifitaet 0,2,0 und
   NACH dieser Datei geladen) `max-width: 1322px` ohne `100%` -- die Leiste
   war dort also nie durch ihren Platz begrenzt. Mit vier Reitern hinter
   "Eigener Post" blieb sie bei 1050 px Fenster 1064 px breit (auf /markt und
   /aufwand gab sie auf 1010 px nach), der body wurde 1064 px breit und
   `overflow-x: hidden` schnitt ab. Genau darum sah s03 den Anschnitt NUR auf
   der Startseite. Die Regel hier behaelt die 1322 px der Startseite und legt
   `100%` dazu; `body.` hebt die Spezifitaet auf 0,2,1, damit sie unabhaengig
   von der Ladereihenfolge gilt. */
@media (min-width: 860px) {
  body.ansicht-nebeneinander .bereichswahl {
    max-width: min(calc(var(--b-post) * 3 + var(--s-4) * 2), 100%);
  }
}
/* DER GRIFF GIBT NICHT NACH, DAS PROFIL ZUERST (Job 20261001-vorschau-
   leiste-mehr-griff-gekappt-seit-reels-cutter-prio45). Bis 2026-10-01 stand
   hier `flex-shrink: 1; min-width: 0` fuer Griff UND Profil zugleich. Beide
   schrumpften damit nach ihrer Basisbreite, ohne Untergrenze -- und der
   Griff zu rund zwanzig weiteren Bereichen fiel vor dem dekorativen
   Profilnamen unter seine Lesbarkeit. Gemessen (Chromium, angemeldet): "M"
   bei 1050-1240 px, "M" bzw. "Me" bei 800-950 px, und am Telefon (390 px)
   "Me" mit angeschnittenem Profilkreis (19 von 30 px).
   DIE RANGFOLGE STATT EINER ZAHL:
   (1) Der Griff mit dem Wort "Mehr" schrumpft nie (`flex-shrink: 0`): seine
       Untergrenze ist sein eigenes Wort, keine Pixelzahl.
   (2) Traegt er den Namen des aktiven Eintrags (ab 700 px, z. B. "Wofuer
       gearbeitet wird" auf /aufwand), gibt der NAME mit "…" nach -- aber
       nie unter --b-textmin (sieben Zeichen, die Untergrenze des Systems
       fuer einen Kasten, der Text traegt) plus zwei Polster, Spalt und
       Pfeil: 101 px, sichtbar "Wofür…". Eine Untergrenze in der Breite der
       Wortform "Mehr ▾" (73 px) war die erste Fassung und zu knapp:
       gemessen stand dann "W…" im Griff -- breit genug, aber nicht lesbar.
   (3) Das Profil gibt ZUERST nach: ab 800 px (wo der Name steht)
       `flex-shrink: 100` -- eine Rangfolge, kein Mass: es schrumpft, bis es
       an seiner Untergrenze steht, erst dann der Griff. Die Untergrenze ist
       der Kreis (--s-8 = Rand, Polster und 26-px-Kreis), dieselbe Form wie
       am Telefon. Unter 800 px traegt das Profil keinen Namen und schrumpft
       gar nicht -- dort ist es nur noch der Kreis.
   DER PREIS, gemessen: am Telefon geben jetzt allein die drei Bereichs-
   Reiter nach (Baustein 3): bei 390 px rund 37 statt 50 px, bei 360 px rund
   27 statt 43 px. Vorher zahlten Griff und Profilkreis mit ihrer
   Lesbarkeit. */
.bereichswahl > .dash-mehr { flex-shrink: 0; }
@media (min-width: 700px) {
  .bereichswahl > .dash-mehr--aktiv {
    flex-shrink: 1;
    min-width: calc(2 * var(--s-3) + var(--s-1) + var(--b-textmin) + 1em);
  }
}
.bereichswahl > .profil-menue { flex-shrink: 0; }
@media (min-width: 800px) {
  .bereichswahl > .profil-menue { flex-shrink: 100; min-width: var(--s-8); }
}
.dash-mehr > summary, .profil-menue > summary { max-width: 100%; overflow: hidden; }
.dash-mehr-aktiv { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.profil-name { min-width: 0; }

.profil-blatt {
  position: absolute; right: 0; top: calc(100% + var(--s-1));
  min-width: 260px; max-width: min(92vw, 340px);
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,.10);
  padding: var(--s-2); display: grid; gap: 2px; z-index: 30;
}
.profil-kopf {
  display: grid; gap: 2px; padding: var(--s-2) var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--c-linie-zart); margin-bottom: var(--s-1);
}
.profil-kopf-titel, .profil-gruppe-titel {
  font-size: var(--t-caption); color: var(--c-text-leise);
  text-transform: uppercase; letter-spacing: .06em;
}
.profil-kopf-name { font-size: var(--t-text); }
/* R6 (2026-09-24, EL-20260924-4a8db5d6): hier stand `overflow-wrap: anywhere`.
   Es wirkte nie -- die Sperre r6-fundament gewinnt --, hielt aber Bein 23
   seit dem 24.09. rot. `break-word` ist der Stand, den der Browser ohnehin
   rendert; eine Adresse, die nicht in die Zeile passt, bricht weiterhin. */
.profil-kopf-mail { font-size: var(--t-fuss); color: var(--c-text-leise); overflow-wrap: break-word; }
.profil-marke {
  justify-self: start; margin-top: var(--s-1); padding: 0 var(--s-2);
  border-radius: var(--r-klein); font-size: var(--t-caption); font-weight: 600;
  background: var(--c-akzent-grund, var(--c-grund)); color: var(--c-akzent, var(--c-text));
}
.profil-gruppe { display: grid; gap: 2px; padding-top: var(--s-2);
  border-top: 1px solid var(--c-linie-zart); margin-top: var(--s-1); }
.profil-gruppe-titel { padding: 0 var(--s-3) var(--s-1); }
.profil-form { margin: 0; }
.profil-eintrag {
  display: flex; align-items: center; gap: var(--s-2); width: 100%;
  min-height: 36px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-klein);
  background: none; color: var(--c-text); font: 500 var(--t-text) var(--schrift);
  text-align: left; text-decoration: none; cursor: pointer;
}
a.profil-eintrag:hover, button.profil-eintrag:hover { background: var(--c-grund); text-decoration: none; }
.profil-eintrag--aktiv { background: var(--c-akzent-grund); color: var(--c-akzent); cursor: default; }
.profil-eintrag--leise, .profil-leise { color: var(--c-text-leise); font-size: var(--t-fuss); }
.profil-eintrag--ab { border-top: 1px solid var(--c-linie-zart); border-radius: 0; margin-top: var(--s-1); }
.profil-vertretung {
  margin: 0 0 var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-klein);
  background: var(--c-warn-grund); color: var(--c-warn-text); font-size: var(--t-fuss);
}
/* Die Seite /profil: Formulare untereinander, im handlichen Mass. */
.profil-seite .karte + .karte { margin-top: var(--s-4); }
.profil-formular { display: grid; gap: var(--s-2); max-width: 420px; }
.profil-formular button { justify-self: start; margin-top: var(--s-2); }
.profil-formular--eine-zeile button { margin-top: 0; }
.profil-daten { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4); margin: 0; }
.profil-daten dt { color: var(--c-text-leise); }
.profil-daten dd { margin: 0; overflow-wrap: break-word; }  /* R6, s. .profil-kopf-mail */
.profil-wechselreihe { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.profil-wechselreihe form { margin: 0; }

/* Zweite Navigationsebenen (Kanal-Reiter, Unternavigation, Marken, Sichten)
   sind Segmente unter dem Titel -- keine zweite Kopfzeile. */
.reiter, .unternav, .markennavi, .sichtnavi {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1);
  padding-bottom: var(--s-3);
}
.reiter-knopf, .unternav-knopf, .markennavi-knopf, .sichtnavi-knopf {
  display: inline-flex; align-items: baseline; gap: var(--s-1);
  padding: var(--s-1) var(--s-3); min-height: 32px; align-items: center;
  border: 1px solid transparent; border-radius: 999px;
  font-size: var(--t-fuss); color: var(--c-text-leise);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
a.reiter-knopf:hover, a.unternav-knopf:hover, a.markennavi-knopf:hover,
a.sichtnavi-knopf:hover { color: var(--c-text); background: var(--c-grund); text-decoration: none; }
.reiter-knopf--aktiv, .unternav-knopf--aktiv, .markennavi-knopf.ist-aktiv,
.sichtnavi-knopf.ist-aktiv {
  color: var(--c-text); font-weight: 600;
  background: var(--c-grund); border-color: var(--c-linie);
}
.reiter-knopf--offen { color: var(--c-warn-text); }

/* EIN ELEMENT, DAS KEIN BEDIENELEMENT IST, DARF SICH AUCH NICHT SO ANFUEHLEN.
 * Der aktive Eintrag jeder Navigationsebene wird als `<span>` gerendert, nicht
 * als `<a>` -- ein Link auf die Ansicht, in der man schon steht, waere ein
 * Bedienelement ohne Wirkung (die Begruendung steht ausgeschrieben an
 * `.veroeff-filter-knopf.ist-aktiv` in stil.css -- die Filterleiste selbst ist
 * seit dem 2026-09-21 die benannte Ausnahme: dort hat der aktive Knopf eine
 * Wirkung, er hebt die Auswahl auf, und ist deshalb wieder ein <a>; das Prinzip
 * "kein Zeiger ohne Mechanik" gilt unveraendert). Der Zeigefinger blieb dabei
 * stehen: gemessen am 2026-09-16 trug `span.bereich-knopf--aktiv` auf 13
 * Seiten und `span.unternav-knopf--aktiv` auf 3 Seiten `cursor: pointer`,
 * obwohl ein Klick nirgends hinfuehrt. Das ist dieselbe Gattung wie Elinas
 * Befund aus EL-20260827-905c9b2c ("sieht aus wie ein Knopf, ist keiner"),
 * nur an der anderen Seite: dort war es die Flaeche, hier ist es der Zeiger.
 *
 * DER ZAUN HAENGT AN DER EIGENSCHAFT, NICHT AM WORTLAUT: `span` heisst "traegt
 * kein href", und genau das ist die Aussage. An `--aktiv` festgemacht waere
 * die Regel still falsch, sobald ein aktiver Eintrag einmal doch verlinkt
 * (oder ein inaktiver als span erscheint -- `--kommt-noch` tut das heute
 * schon und bekommt so denselben Zeiger ohne Sonderregel).
 * Gemessen von `pruefungen/probe_knopfattrappen.py`, Arm 3. */
span.bereich-knopf, span.reiter-knopf, span.unternav-knopf,
span.markennavi-knopf, span.sichtnavi-knopf { cursor: default; }
.reiter-zahl { font-size: var(--t-caption); color: var(--c-text-leise); font-weight: 500;
  background: var(--c-flaeche); border: 1px solid var(--c-linie-zart);
  border-radius: 999px; padding: 0 6px; line-height: 18px; }
.reiter-knopf--aktiv .reiter-zahl { color: var(--c-text); }
.reiter-grund { font-size: var(--t-caption); color: var(--c-warn-text); }
.markennavi-titel, .sichtnavi-titel, .werkzeuge-titel {
  font-size: var(--t-caption); color: var(--c-text-leise);
  text-transform: uppercase; letter-spacing: .06em;
}
.unternav-hinweis { font-size: var(--t-caption); margin-left: auto; max-width: 34ch; }

/* ==========================================================================
   Baustein 4: Karte und Kachel.
   Karte = ein Kasten mit Titel. Kachel = eine Zahl mit Etikett daneben.
   ========================================================================== */
.karte, .lage, .kz-block, .sicht-tafel, .kanal-kachel, .lage-kachel,
.aufwand-block, .lage-block, .quelle-karte, .sicht-karte {
  background: var(--c-flaeche);
  border: 1px solid var(--c-linie-zart);
  border-radius: var(--r);
  box-shadow: var(--schatten);
  padding: var(--s-6);
  margin: 0 0 var(--s-6);
  min-width: 0;
}
.karte > h2, .lage > h2, .kz-block h2, .sicht-tafel-titel, .kanal-kachel > h2 {
  font-size: var(--t-kopf); font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--c-text);
  margin: 0 0 var(--s-3);
}
.karte-titel { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }

.zahl-kacheln { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.zahl-kachel { display: grid; gap: 2px; align-content: start; min-width: 0; }
.kachel-etikett { font-size: var(--t-fuss); color: var(--c-text-leise); }
.kachel-wert { font-size: var(--t-titel1); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.15; display: flex; align-items: baseline; gap: var(--s-1); flex-wrap: wrap; }
.kachel-wert--gross { font-size: var(--t-gross); }
.kachel-wert--held { font-size: var(--t-held); line-height: 1; }
.kachel-einheit { font-size: var(--t-text); font-weight: 400; color: var(--c-text-leise); }
.kachel-fuss { font-size: var(--t-caption); color: var(--c-text-leise); }
.zahl-kachel--hart .kachel-wert { color: var(--c-hart-text); }
.zahl-kachel--gut .kachel-wert { color: var(--c-gut-text); }
.zahl-kachel--neutral .kachel-wert { color: var(--c-text-leise); }

/* Etikett und Wert NEBENEINANDER: eine Zeile je Zahl, kein Sprung ueber die
   halbe Spalte (Christian: "die haeufigste und leichteste zu behebende
   Ursache von Unlesbarkeit"). */
/* R6c (2026-09-24, EL-20260924-4a8db5d6): die Etikettspur hat eine
   Untergrenze (--spur-etikett), weil der Wert daneben `nowrap` und `auto` ist
   -- ein langer Wert gab das Etikett sonst bis auf 0 px her. */
.zahlzeile { display: grid; grid-template-columns: var(--spur-etikett) auto; gap: var(--s-3);
  align-items: baseline; padding: var(--s-1) 0; border-bottom: 1px solid var(--c-linie-zart); }
.zahlzeile:last-child { border-bottom: 0; }
.zahlzeile-etikett { font-size: var(--t-text); color: var(--c-text-leise); min-width: 0; }
.zahlzeile-wert { font-size: var(--t-kopf); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; }

/* ==========================================================================
   Baustein 5: der Vorbehalt AM WERT -- eine Marke, die Erklaerung beim
   Darueberfahren oder Antippen (Tastatur: Fokus). Ohne Skript.
   ========================================================================== */
.vb { position: relative; display: inline-block; vertical-align: middle; margin-left: var(--s-1); }
.vb-marke {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--c-linie); color: var(--c-text-leise);
  font-size: 11px; font-weight: 700; font-family: var(--schrift);
  line-height: 1; cursor: help; background: var(--c-flaeche);
}
.vb--warn .vb-marke { border-color: var(--c-warn); color: var(--c-warn-text); background: var(--c-warn-grund); }
.vb--hart .vb-marke { border-color: var(--c-hart); color: var(--c-hart-text); background: var(--c-hart-grund); }
.vb-text {
  display: none; position: absolute; left: 0; top: calc(100% + var(--s-1)); z-index: 30;
  width: min(72vw, 360px); padding: var(--s-3) var(--s-4);
  background: var(--c-text); color: var(--c-flaeche);
  border-radius: var(--r-klein); box-shadow: 0 6px 20px rgba(0,0,0,.18);
  font-size: var(--t-fuss); font-weight: 400; line-height: 1.45; text-align: left;
  white-space: normal;
}
.vb:hover .vb-text, .vb:focus-within .vb-text, .vb:focus .vb-text { display: block; }
.vb > .unternav-hinweis { display: none; position: absolute; left: 0; top: calc(100% + var(--s-1)); z-index: 30;
  width: min(72vw, 360px); max-width: none; margin: 0; padding: var(--s-3) var(--s-4); background: var(--c-text); color: var(--c-flaeche);
  border-radius: var(--r-klein); box-shadow: 0 6px 20px rgba(0,0,0,.18); font-size: var(--t-fuss); line-height: 1.45; white-space: normal; }
.vb:hover > .unternav-hinweis, .vb:focus-within > .unternav-hinweis, .vb:focus > .unternav-hinweis { display: block; }
.vb-text b { color: inherit; }
.vb-text--rechts { left: auto; right: 0; }

/* ==========================================================================
   Baustein 6: Zustand -- Punkt + Wort, nie Farbe allein.
   ========================================================================== */
.status { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 500; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-neutral); flex: none; }
.status--gut::before { background: var(--c-gut); }
.status--warn::before { background: var(--c-warn); }
.status--hart::before { background: var(--c-hart); }
.status--neutral::before { background: var(--c-neutral); }
.status--gut { color: var(--c-gut-text); }
.status--warn { color: var(--c-warn-text); }
.status--hart { color: var(--c-hart-text); }
.status--neutral { color: var(--c-text-leise); }

/* ==========================================================================
   Baustein 7: Hinweis- und Befundkaesten -- eine Form, vier Bedeutungen.
   ========================================================================== */
.befund, .hinweis, .sicht-warnung, .sicht-hinweis, .sicht-versandsperre,
.fehler, .luecke {
  border-radius: var(--r-klein); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-linie-zart); border-left-width: 4px;
  background: var(--c-grund); font-size: var(--t-fuss); line-height: 1.45;
  margin: 0 0 var(--s-3);
}
.befund > b, .hinweis > b { display: block; font-size: var(--t-text); margin-bottom: 2px; }
.befund.warn, .sicht-hinweis--warnung, .luecke { border-color: var(--c-warn); border-left-color: var(--c-warn); background: var(--c-warn-grund); color: var(--c-warn-text); }
.befund.hart, .sicht-warnung, .fehler { border-color: var(--c-hart); border-left-color: var(--c-hart); background: var(--c-hart-grund); color: var(--c-hart-text); }
.befund.gut, .sicht-versandsperre { border-color: var(--c-gut); border-left-color: var(--c-gut); background: var(--c-gut-grund); color: var(--c-gut-text); }
.befund.weich, .hinweis, .sicht-hinweis, .sicht-hinweis--info { border-color: var(--c-linie); border-left-color: var(--c-neutral); background: var(--c-neutral-grund); color: var(--c-text); }

/* ==========================================================================
   Baustein 8: Tabelle -- Haarlinien, rechtsbuendige Zahlen, eigene Rolle.
   ========================================================================== */
.tabellenrahmen, .sicht-tabelle-rahmen { overflow-x: auto; max-width: 100%; margin: 0 0 var(--s-3);
  border: 1px solid var(--c-linie-zart); border-radius: var(--r-klein); }
.tabellenrahmen table, .sicht-tabelle { width: 100%; font-size: var(--t-fuss); }
.tabellenrahmen th, .sicht-tabelle th { text-align: left; font-weight: 600; color: var(--c-text-leise);
  font-size: var(--t-caption); text-transform: uppercase; letter-spacing: .04em;
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-linie); background: var(--c-grund); }
.tabellenrahmen td, .sicht-tabelle td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-linie-zart);
  vertical-align: top; }
.tabellenrahmen tr:last-child td, .sicht-tabelle tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Baustein 9: Zahlen als Bild -- Balken, Anteile, Fuellstand.
   ========================================================================== */
.zahlbild { display: block; width: 100%; height: auto; overflow: visible; }
.zahlbild--anteile { height: 16px; }
.zahlbild-achse { stroke: var(--c-linie); stroke-width: 1; }
.zahlbild-skala, .zahlbild-tag, .zahlbild-wert { font-family: var(--schrift); fill: var(--c-text-leise); font-size: 11px; }
.zahlbild-wert { fill: var(--c-text); font-weight: 600; font-size: 12px; }
.zahlbild-tag--heute { fill: var(--c-text); font-weight: 600; }
.zahlbild-tag--we { opacity: .7; }
.zahlbild-balken { fill: var(--c-daten); }
.zahlbild-balken--null { fill: var(--c-linie); }
.zahlbild-balken--heute { fill: var(--c-daten-dunkel); }
.zahlbild-anteil { fill: var(--c-daten); }
.zahlbild-anteil--gut { fill: var(--c-gut); }
.zahlbild-anteil--hart { fill: var(--c-hart); }
.zahlbild-anteil--warn { fill: var(--c-warn); }
.zahlbild-anteil--neutral { fill: var(--c-neutral); }
.zahlbild-anteil--leer { fill: var(--c-linie-zart); }
.legende { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-caption);
  color: var(--c-text-leise); margin-top: var(--s-2); }
.legende-punkt { display: inline-flex; align-items: center; gap: 6px; }
.legende-punkt::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c-daten); }
.legende-punkt--gut::before { background: var(--c-gut); }
.legende-punkt--hart::before { background: var(--c-hart); }
.legende-punkt--warn::before { background: var(--c-warn); }
.legende-punkt--neutral::before { background: var(--c-neutral); }
.meter { height: 8px; border-radius: 999px; background: var(--c-daten-hell); overflow: hidden; margin: var(--s-1) 0; }
.meter-fuell { height: 100%; border-radius: 999px; background: var(--c-daten); }
.meter--voll .meter-fuell { background: var(--c-gut); }
.meter--voll { background: var(--c-gut-grund); }
.meter--ohne { background: var(--c-neutral-grund); }

/* ==========================================================================
   Baustein 10: Technik hinter einem Klick.
   ========================================================================== */
details.technik { display: inline-block; vertical-align: baseline; }
details.technik > summary { display: inline-block; cursor: pointer; color: var(--c-akzent);
  text-decoration: underline dotted; list-style: none; }
details.technik > summary::-webkit-details-marker { display: none; }
details.technik[open] > summary::after { content: ": "; }
details.technik > code { font-size: var(--t-caption); word-break: break-all; display: inline; }
details.technik-block { margin: var(--s-3) 0 0; font-size: var(--t-fuss); color: var(--c-text-leise); }
details.technik-block > summary { cursor: pointer; color: var(--c-akzent); }
details.technik-block > *:not(summary) { margin-top: var(--s-2); }

/* ==========================================================================
   Baustein 11: Knoepfe -- einer fuer Handlung, einer fuer Nebenwege.
   ========================================================================== */
.knopf, button.sicht-knopf--tun {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 36px; padding: 0 var(--s-4); border-radius: var(--r-klein);
  background: var(--c-akzent); color: #fff; border: 0; font: 500 var(--t-text) var(--schrift);
  cursor: pointer; text-decoration: none;
}
.knopf:hover { filter: brightness(.95); text-decoration: none; }
.knopf-leise, a.sicht-knopf {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-3);
  border-radius: var(--r-klein); border: 1px solid var(--c-linie); background: var(--c-flaeche);
  color: var(--c-text); font: 500 var(--t-fuss) var(--schrift); cursor: pointer; text-decoration: none;
}
.knopf-leise:hover, a.sicht-knopf:hover { background: var(--c-grund); text-decoration: none; }

/* ==========================================================================
   Baustein 12: die Antwortzeile einer Startseite -- drei Fragen, ein Blick.

   DIESE DREI ZEILEN SIND EINE ZUGESAGTE FLAECHE UND KEINE FREIE GESTALTUNG.
   Auftrag EL-20260909-bcc8a088 (Elina Gerlinger): "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." `grid-template-columns` hier IST diese Zusage;
   faellt die Zeile, steht Elinas Dashboard wieder untereinander.

   GEMESSEN, NICHT BEHAUPTET: `pruefungen/probe_info_kacheln_nebeneinander.py`
   prueft "Kurz gesagt" gegen "Kennzahlen" Rect-gegen-Rect bei 390/900/1280/
   1440 px, misst dabei das Post-Raster mit (die zweite, bewahrende Zusage)
   und haengt als Bein in `selftest/selftest.py`. Ihr Rot-Arm ersetzt GENAU
   diese Datei (`--system-css`): wer die Regel entfernt, bekommt exit 1.

   860 px IST DIESELBE SCHWELLE WIE AM POST-RASTER in `stil.css`. Sie hier zu
   verschieben, ohne sie dort zu verschieben, gibt "nebeneinander" zwei
   Grenzen -- und ein Fensterband, in dem oben drei Spalten stehen und unten
   eine. Wer sie anfasst, fasst beide an.

   `.antwort-tun` NAHM DIE VOLLE BREITE, weil "Jetzt zu tun" das Einzige auf
   der Seite war, das eine Handlung verlangte. Der Kasten ist seit dem
   2026-09-16 weg (Elina Gerlinger, EL-20260916-109c1270, vollstaendige
   Begruendung im Kopf von `vorschau.html`). Damit tragen alle verbliebenen
   Kaesten Auskunft, und die volle Breite gehoert im Zweispalter allein
   "Was geplant ist" -- siehe den Absatz dazu weiter unten, der diese
   Entscheidung schon vorher getroffen hatte.

   ZWEI SPALTEN AB 860 px, DREI ERST AB 1280 px -- KORREKTUR VOM 2026-09-16.
   Hier standen drei Spalten schon ab 860 px. GEMESSEN am laufenden Dienst
   bei 900 px: jede Kachel war dann 261 px breit, innen 210 px. In "Kurz
   gesagt" blieben dem Etikett davon 32 px, und die Zeile "Geplante Posts"
   brach zu "Gepl / ante / Post / s" -- der Kasten wurde 984 px hoch statt
   374 px. Auf einem 1280-px-Laptop ist dieselbe Kachel 381 px breit und
   voellig in Ordnung; der Fehler lebte also genau im Band 860..1279 px.

   DAS IST DIESELBE ENTSCHEIDUNG WIE AM POST-RASTER, und sie ist dort schon
   einmal bezahlt worden (stil.css, Block "Ab hier drei pro Reihe"): "zwei
   richtige Kacheln sind besser als drei gequetschte". Die Schwellen 860/1280
   sind jetzt in beiden Rastern dieselben zwei Zahlen -- oben zwei Kaesten,
   unten zwei Kacheln; oben drei, unten drei. Vorher gab es ein Fensterband,
   in dem oben drei standen und unten zwei.

   IM ZWEISPALTER GEHT "Was geplant ist" IN DIE VOLLE BREITE, nicht "Kurz
   gesagt" oder "Kennzahlen": Elinas Bestellung (EL-20260909-bcc8a088) nennt
   ausdruecklich diese beiden als das Paar, das NEBENEINANDER stehen soll.
   "Was geplant ist" ist eine grosse Zahl mit einem Tagesbalken darunter --
   das Einzige der drei, dem zusaetzliche Breite nutzt statt sie zu
   verschwenden. Wer hier umsortiert, bricht die Zusage; die Probe
   `probe_info_kacheln_nebeneinander.py` misst genau dieses Paar.
   ========================================================================== */
.antwort { display: grid; gap: var(--s-4); margin: 0 0 var(--s-6); 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; }
  .antwort > .antwort-geplant { grid-column: auto; }
}
.antwort > section { margin: 0; min-width: 0; }
.plan-tage { margin: var(--s-3) 0 0; }
/* DAS ETIKETT EINER ZAHLZEILE DARF NIE MITTEN IM WORT BRECHEN.
   Befund vom 2026-09-16 (Auftrag EL-20260909-bcc8a088, gemessen am laufenden
   Dienst): auf einem 900-px-Laptop stand in "Kurz gesagt" ein Buchstabe je
   Zeile -- "Gepl / ante / Post / s". Ursache war NICHT die Schriftgroesse,
   sondern `.huelle { overflow-wrap: anywhere }` weiter oben (Zeile 150):
   `anywhere` erlaubt den Bruch an jeder Stelle und macht damit die
   min-content-Breite eines Etiketts zu EINEM ZEICHEN. Ein zu enger Kasten
   schreddert das Wort dann, statt sichtbar zu eng zu sein.
   `break-word` haelt die Absicht von Zeile 150 -- ein Wort, das allein nicht
   in die Zeile passt, bricht weiterhin um -- nimmt ihr aber die Wirkung auf
   die Spaltenmessung. Lange Pfade und IDs stehen ohnehin nicht in einer
   Zahlzeile.
   DIE URSACHE DER ENGE SELBST STEHT IN BAUSTEIN 12 (die Antwortzeile hatte
   bei 900 px drei Spalten statt zwei); das hier ist der Guard, nicht der
   Fix. Beide zusammen, und der Guard bleibt auch dann richtig, wenn ein
   Kasten aus einem anderen Grund einmal eng wird. */
/* R6c (2026-09-24, EL-20260924-4a8db5d6): DERSELBE Anlassfall wie am 16.09.
   ("Gepl / ante / Post / s") -- damals wurde nur der Umbruch geheilt, die Spur
   `minmax(0, 1fr)` neben `auto` blieb stehen und haette das Etikett bei einem
   langen Wert weiter auf 0 px druecken koennen. Jetzt mit Untergrenze. */
dl.zahlzeilen, dl.kz-zahlen { display: grid; grid-template-columns: var(--spur-etikett) auto; gap: 0 var(--s-3); margin: 0; }
dl.zahlzeilen > dt, dl.zahlzeilen > dd, dl.kz-zahlen > dt, dl.kz-zahlen > dd { overflow-wrap: break-word; }
dl.zahlzeilen > dt, dl.zahlzeilen > dd, dl.kz-zahlen > dt, dl.kz-zahlen > dd { margin: 0; padding: var(--s-1) 0; border-bottom: 1px solid var(--c-linie-zart); }
dl.zahlzeilen > dt, dl.kz-zahlen > dt { font-size: var(--t-text); color: var(--c-text-leise); min-width: 0; }
dl.zahlzeilen > dd, dl.kz-zahlen > dd { font-size: var(--t-kopf); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
dl.zahlzeilen > dt:nth-last-child(2), dl.zahlzeilen > dd:last-child, dl.kz-zahlen > dt:nth-last-child(2), dl.kz-zahlen > dd:last-child { border-bottom: 0; }
dl.zahlzeilen > dt.dt-weicht-ab, dl.zahlzeilen > dd.dd-weicht-ab { color: var(--c-hart-text); }
dl.zahlzeilen a { font-size: var(--t-fuss); font-weight: 500; }
/* Eine Zeile mit Link traegt einen SATZ und keinen Wert ("5 — anzeigen und
   löschen"). `nowrap` ist fuer Werte gedacht -- an einem Satz macht es die
   ganze Wertespalte so breit wie der Satz lang ist und nimmt dem Etikett
   nebenan den Platz (siehe der Block an `dl.zahlzeilen` oben). Ein Satz darf
   umbrechen; eine Zahl nicht. */
dl.zahlzeilen > dd:has(a), dl.kz-zahlen > dd:has(a) { white-space: normal; }
.kz-bild { margin: 0 0 var(--s-3); }
.kz-satz { display: flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-3); font-size: var(--t-text); }
.antwort-frage { font-size: var(--t-caption); color: var(--c-text-leise);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--s-2); }
/* `.tun-liste`, `.tun-was`, `.tun-wie`, `.tun-sprung` und `.tun--*` STANDEN
   HIER BIS ZUM 2026-09-16. Sie sind mit dem Kasten "Jetzt zu tun" gegangen
   (Elina Gerlinger, EL-20260916-109c1270). Kein Element im Baum trug sie
   danach noch -- nachgemessen ueber alle Vorlagen. Sie liegen zu lassen
   waere kein Schaden gewesen, aber eine tote Regel ist eine Einladung, den
   Kasten "zurueckzubauen", ohne die Entscheidung dahinter zu lesen. */
.bereich-lead { font-size: var(--t-text); max-width: var(--b-lesen); }
.bestandteile { font-size: var(--t-caption); color: var(--c-text-leise); margin: var(--s-3) 0 0; }

/* ==========================================================================
   Baustein 13: ENTLASTUNG -- der Hauptbereich zeigt die Inhalte, alles
   andere steht hinter einem Klick.

   AUFTRAG EL-20260917-7fdc894e (Elina Gerlinger, 2026-09-17), und sie hat ihn
   ausdruecklich als GENERELLE Regel erteilt, nicht als Aenderung an einer
   Seite: "Generelle Dashboard-Anweisung zur visuellen Entlastung, gilt
   uebergreifend fuer alle Ansichten, nicht nur diese eine [...] der
   Hauptbereich zeigt nur die eigentlichen Inhalte kompakt und leicht lesbar,
   alle Zusatzinfos, Technik-Details und Erklaerungen sind per Klick/Dropdown
   erreichbar statt permanent sichtbar."

   DIE REGEL IN EINEM SATZ: Im Hauptfluss steht, was Elina TAEGLICH ansieht.
   Alles, was erklaert, belegt oder nachrechnet, steht eine Ebene tiefer --
   im Klappkasten (`details.klapp`) oder als Fussnote im Fuss (`.fussnoten`).

   WAS DAS VON BAUSTEIN 5 UNTERSCHEIDET -- und warum beide bleiben.
   Baustein 5 (`.vb`) haengt EINEN SATZ an EINEN WERT: "woher kommt diese
   Zahl". Er ist die richtige Form fuer einen Vorbehalt und bleibt genau
   dafuer. Baustein 13 ist die Form fuer einen ABSATZ und fuer einen ganzen
   KASTEN -- beides passt nicht in eine Sprechblase am Wert, und beides
   erdrueckt im Hauptfluss genau das, was Elina sucht. Wer einen Vorbehalt in
   eine Fussnote steckt, macht ihn schwerer auffindbar; wer einen Absatz in
   eine Sprechblase steckt, macht ihn unlesbar. Die Grenze ist die Laenge, und
   sie hat eine Zahl: `vorschau_entlastung.SCHWELLE_ERKLAERTEXT` = 220 Zeichen.

   ES WIRD NICHTS GELOESCHT UND NICHTS GEKUERZT. Beide Formen VERSCHIEBEN;
   jeder Satz steht Wort fuer Wort im ausgelieferten HTML. Das ist die
   Bedingung dafuer, dass diese Regel uebergreifend gelten darf: eine
   Gestaltungsregel, die Auskunft kostet, waere keine Entlastung, sondern ein
   Auskunftsverlust mit gutem Namen.

   RUECKWEG: `vorschau.conf` -> `ENTLASTUNG=off` (ohne Neustart). Dann steht
   jeder Text wieder offen im Fluss und jeder Kasten offen -- der Stand vom
   2026-09-16. Die Regeln hier bleiben dabei stehen und sind wirkungslos,
   weil kein Element sie mehr traegt.

   KEIN FARB-LITERAL. Jede Farbe kommt aus einem Token (Baustein 0), damit
   der Dunkelmodus diese Flaechen ohne eine einzige Zeile in `modus.css`
   mitnimmt -- die Regel, die `probe_dunkelmodus_deckt_neue_flaechen.py`
   misst. Der Pfeil zeichnet sich aus `currentColor` und erbt damit auch die
   Textfarbe des jeweiligen Modus.
   ========================================================================== */

/* --- 13a: der Klappkasten ------------------------------------------------ */
details.klapp { margin: var(--s-2) 0 0; }
details.klapp > summary.klapp-knopf {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 32px; padding: 0 var(--s-3);
  border: 1px solid var(--c-linie); border-radius: var(--r-klein);
  background: var(--c-flaeche); color: var(--c-text);
  font: 500 var(--t-fuss) var(--schrift);
  cursor: pointer; list-style: none; user-select: none;
}
details.klapp > summary.klapp-knopf::-webkit-details-marker { display: none; }
details.klapp > summary.klapp-knopf::marker { content: ""; }
details.klapp > summary.klapp-knopf:hover { background: var(--c-grund); }
/* Die Zeile, die AUCH ZUGEKLAPPT sichtbar bleibt. Ein Knopf, der nur
   "Anzeigen" sagt, ist eine Schublade ohne Etikett -- man muss ihn oeffnen,
   um zu erfahren, ob man ihn oeffnen wollte. */
.klapp-kurz { font-weight: 400; font-size: var(--t-caption); }
/* Der Dropdown-Pfeil. Elina hat ihn woertlich bestellt ("ein kleiner Button
   mit Dropdown-Pfeil"); er dreht sich beim Aufklappen, damit der Zustand
   nicht allein an der Hoehe des Kastens abzulesen ist. */
.klapp-pfeil {
  width: 0; height: 0; margin-left: auto;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .12s ease-out;
}
details.klapp[open] > summary.klapp-knopf > .klapp-pfeil { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .klapp-pfeil { transition: none; } }
details.klapp > .klapp-inhalt { margin-top: var(--s-3); }
/* Im Kartenkopf steht der Knopf rechts neben dem Titel, nicht darunter:
   eine zugeklappte Karte soll EINE Zeile hoch sein. */
.karte-kopfklapp { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.karte-kopfklapp > details.klapp { margin: 0; margin-left: auto; }

/* --- 13b: der Sternchen-Verweis im Text ---------------------------------- */
.fn-verweis {
  display: inline-block; margin-left: 2px; padding: 0 var(--s-1);
  border-radius: var(--r-klein); color: var(--c-akzent);
  font-size: var(--t-caption); line-height: 1.2; text-decoration: none;
  white-space: nowrap;
}
.fn-verweis:hover { background: var(--c-akzent-grund); text-decoration: none; }
.fn-stern { font-weight: 700; }
.fn-nr { font-size: 0.8em; }

/* --- 13c: der Fuss ------------------------------------------------------- */
footer.fussnoten {
  max-width: var(--b-seite); margin: var(--s-12) auto 0;
  padding: var(--s-6) var(--s-4) var(--s-12);
  border-top: 1px solid var(--c-linie);
  font-size: var(--t-fuss); color: var(--c-text-leise);
}
.fussnoten-titel { font-size: var(--t-kopf); color: var(--c-text); }
.fussnoten-lead { max-width: var(--b-lesen); margin: var(--s-1) 0 var(--s-4); }
.fussnoten-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.fussnote { max-width: var(--b-lesen); }
.fussnote:target { outline: 2px solid var(--c-akzent); outline-offset: var(--s-2); border-radius: var(--r-klein); }
.fussnote-kopf { display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-1); color: var(--c-text); }
.fn-marke { color: var(--c-akzent); font-weight: 700; font-variant-numeric: tabular-nums; }
.fn-zurueck { margin-left: auto; font-size: var(--t-caption); }
.fussnote-text p:last-child { margin-bottom: 0; }

/* Druck: das Bild bleibt, die Navigation geht. */
@media print { .bereichswahl, .dash-mehr, .profil-menue, .kopf-aktionen { display: none !important; } }
/* GEDRUCKT WIRD ALLES. Ein Ausdruck ist die Fassung, die man jemandem in die
   Hand gibt -- ein zugeklappter Kasten waere dort eine leere Stelle, und die
   ist von "es gab nichts" nicht zu unterscheiden. Baustein 13 entlastet den
   BILDSCHIRM; das Papier hat dieses Problem nicht. */
@media print {
  /* ZWEI WEGE, weil die Browser den zugeklappten Inhalt unterschiedlich
     verstecken: aeltere Engines per `display:none` auf den Nicht-summary-
     Kindern, Chromium seit 2024 per `content-visibility:hidden` auf dem
     eigenen Teil `::details-content`. Beide Regeln stehen deshalb da; welche
     greift, entscheidet der Browser. Wo keine greift, ist der Ausdruck so
     wie heute -- also nicht schlechter als vor diesem Bau. */
  details.klapp > *:not(summary) { display: block !important; }
  details.klapp::details-content { content-visibility: visible !important; }
  details.klapp > summary.klapp-knopf { border: 0; padding: 0; font-weight: 600; }
  .klapp-pfeil { display: none !important; }
}

/* ==========================================================================
   Baustein 14: DIE GLOCKE -- das Benachrichtigungssystem in der Leiste.
   Auftrag EL-20260917-6a32f087 (Elina Gerlinger, 2026-09-17): "oben in der
   Dashboard-Navigationsleiste, sichtbar auf jeder Seite, ein
   Benachrichtigungssymbol mit rotem Punkt bzw. Anzahl sobald es offene
   Befunde/Ausfaelle/Regel-Treffer gibt".

   WARUM SIE EIN <details> IST UND KEIN SKRIPT: die Oberflaeche liegt hinter
   einer Anmeldung und wird von der knopf-wache ohne Browser-Skript bedient.
   Ein Menue, das ohne JavaScript nicht aufgeht, waere fuer beide kaputt.

   KEIN FARB-LITERAL -- dieselbe Regel wie in Baustein 13, gemessen von
   `probe_dunkelmodus_deckt_neue_flaechen.py`. Jede Flaeche kommt aus einem
   Token aus Baustein 0, damit `modus.css` diese Glocke ohne eine einzige
   eigene Zeile mit in den Dunkelmodus nimmt. Der Schatten ist davon
   ausgenommen (er faerbt keine Flaeche) und benutzt denselben Wert wie die
   Vorbehalts-Blase weiter oben -- ein zweiter Schattenwert waere ein zweites
   Aussehen fuer dieselbe Sache.
   ========================================================================== */

/* --- 14a: die Glocke -- SEIT DEM 2026-09-18 IM GRIFF DER RANDLEISTE ------
   Elina Gerlinger, EL-20260918-957094f6: "in genau dieser schmalen Leiste
   sollen zusaetzlich zum Pfeil auch das Benachrichtigungs-Glockensymbol
   dauerhaft sichtbar sein, nicht nur der Pfeil".

   SIE IST KEIN EIGENES `<details>` MEHR. Bis zum 18.09. war sie ein Klapper
   in der Kopfzeile mit eigenem Popup-Blatt; daneben stand am rechten Rand ein
   zweiter Klapper fuer Plan, Zahlen & Regeln. Zwei Klappen fuer zwei Haelften
   derselben Randspalte -- genau das hat Elina beanstandet. Die Glocke ist
   jetzt ein `<span>` IM `<summary>` der einen Leiste: ein zweites
   Bedienelement im Griff waere ein Knopf im Knopf gewesen, und der Browser
   haette nur einen davon bedient.

   DIE KLASSE HEISST WEITER `melder-knopf`, obwohl sie kein Knopf mehr ist:
   `probe_melder_am_rand.py --arm glocke` misst an ihr, ob die Glocke auf
   JEDER Seite steht. Ein huebscherer Name haette die Probe blind gemacht. */
.melder-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  width: 28px; height: 28px;
  border-radius: var(--r-klein);
  color: var(--c-text-leise);
}
.seitenleiste-griff:hover .melder-knopf { color: var(--c-text); }
.melder-glocke { width: 20px; height: 20px; display: block; }

/* Die ZAHL sticht heraus, der PUNKT reicht, wenn alles gesehen ist. Beide
   sitzen an derselben Ecke: die Stelle bedeutet "hier ist etwas", die Form
   sagt, ob es NEU ist. */
.melder-zahl {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  font: 700 var(--t-caption) / 16px var(--schrift);
  font-variant-numeric: tabular-nums; text-align: center;
}
.melder-zahl--rot  { background: var(--c-hart); color: var(--c-flaeche); }
.melder-zahl--grau { background: var(--c-neutral); color: var(--c-flaeche); }
.melder-punkt {
  position: absolute; top: 1px; right: 1px;
  width: 8px; height: 8px; border-radius: 50%;
}
.melder-punkt--rot  { background: var(--c-hart); }
.melder-punkt--grau { background: var(--c-neutral); }

/* --- 14b: die Liste -- EIN BLOCK IN DER LEISTE, KEIN SCHWEBENDES BLATT ---
   Elina Gerlinger, EL-20260918-957094f6: "die Benachrichtigungsliste
   (aktuell ein separates Popup-Dropdown unter der Glocke) soll ebenfalls in
   dieselbe Seitenleiste integriert werden statt als eigenstaendiges Popup zu
   erscheinen".

   WAS HIER DAMIT WEGFAELLT, UND WARUM DAS DER GEWINN IST: das Blatt war
   `position: absolute` mit eigener Breite, eigener Hoehenbegrenzung, eigenem
   Schatten und eigenem z-index -- vier Werte, die mit der Leiste daneben
   abgestimmt sein mussten und es an zwei Fensterbreiten nicht waren. Jetzt
   traegt die Leiste Breite, Hoehe, Rollen und Schatten EINMAL (15b), und
   dieser Block ist nur noch ein Kasten darin. */
.melder-block {
  padding: var(--s-3) var(--s-4) var(--s-2);
  background: var(--c-flaeche); color: var(--c-text);
  border: 1px solid var(--c-linie); border-radius: var(--r);
  font-size: var(--t-fuss); line-height: 1.45; text-align: left;
}
.melder-kopf { display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-2); }
.melder-kopfzahl { margin-left: auto; font-size: var(--t-caption); white-space: nowrap; }
.melder-leer { margin: 0 0 var(--s-2); color: var(--c-text-leise); }

/* --- 14c: eine Meldung in der Liste -------------------------------------- */
.melder-liste { list-style: none; margin: 0; padding: 0; }
/* DIE STUFE STEHT AN DER LINKEN KANTE, NICHT MEHR IM PUNKT -- siehe die
   Begruendung eine Regel weiter unten. Der Streifen ist dieselbe Bauform wie
   `.melder-detail--*` auf der Detailseite (14d), damit dieselbe Sache in
   beiden Ansichten gleich aussieht. */
.melder-eintrag {
  border-top: 1px solid var(--c-linie-zart);
  border-left: 3px solid transparent;
  padding-left: var(--s-1);
}
.melder-eintrag--hart    { border-left-color: var(--c-hart); }
.melder-eintrag--warn    { border-left-color: var(--c-warn); }
.melder-eintrag--info    { border-left-color: var(--c-akzent); }
.melder-eintrag--neutral { border-left-color: var(--c-neutral); }
.melder-eintrag:first-child { border-top: 0; }
.melder-zeile {
  display: grid; grid-template-columns: 10px 1fr; gap: var(--s-1) var(--s-2);
  align-items: baseline;
  padding: var(--s-2) var(--s-1); border-radius: var(--r-klein);
  color: var(--c-text); text-decoration: none;
}
.melder-zeile:hover { background: var(--c-grund); text-decoration: none; }
.melder-titel { font-weight: 600; }
.melder-herkunft { grid-column: 2; font-size: var(--t-caption); }
/* DER PUNKT SAGT „UNGELESEN" -- UND VERSCHWINDET BEIM ANKLICKEN.
   Elina Gerlinger, EL-20260918-957094f6: "sobald Elina eine einzelne
   Benachrichtigung anklickt/oeffnet, soll deren roter Punkt verschwinden das
   heisst als gelesen markiert werden, aktuell bleibt der rote Punkt auch nach
   dem Anklicken stehen."

   WAS WIRKLICH KAPUTT WAR -- und es war nicht das Speichern: das Oeffnen
   einer Meldung hat den Haken seit dem 17.09. gesetzt (`_melder_seite` ruft
   `gelesen_setzen`), und die Ueberschrift ist danach auch zurueckgetreten.
   Nur trug dieser Punkt die STUFE, und eine Stufe aendert sich nicht dadurch,
   dass man sie liest. Fuer Elina blieb also sichtbar genau das stehen, was
   verschwinden sollte.

   KEINE AUSKUNFT GEHT DABEI VERLOREN. Die Stufe steht als farbiger Streifen
   an der linken Kante der Zeile (oben) -- gleichzeitig sichtbar, nicht
   stattdessen. Die Farbe bleibt BEDEUTUNG und nicht Schmuck: rot = handeln,
   orange = achten, blau = Auskunft, grau = NICHT GEMESSEN, und grau ist
   ausdruecklich kein Gruen.

   `--leer` IST EINE EIGENE KLASSE UND KEIN WEGGELASSENES ELEMENT: die Zeile
   ist ein Raster mit fester erster Spalte (10 px). Faellt der Punkt ersatzlos
   weg, ruecken Ueberschrift und Herkunft der gelesenen Zeilen nach links --
   und eine Liste, in der gelesene und ungelesene Zeilen unterschiedlich
   eingerueckt sind, liest sich als zwei Listen. */
.melder-marke {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  align-self: center;
}
.melder-marke--hart    { background: var(--c-hart); }
.melder-marke--warn    { background: var(--c-warn); }
.melder-marke--info    { background: var(--c-akzent); }
.melder-marke--neutral { background: var(--c-neutral); }
.melder-marke--leer    { background: transparent; }
/* Gelesen heisst gesehen, nicht erledigt: die Zeile tritt zurueck, sie
   verschwindet nicht. */
.melder-eintrag.ist-gelesen .melder-titel { font-weight: 400; color: var(--c-text-leise); }
.melder-eintrag.ist-gelesen .melder-marke { background: transparent; }

.melder-fuss {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-2) 0 0; padding-top: var(--s-2);
  border-top: 1px solid var(--c-linie-zart);
}
.melder-form { margin: 0 0 0 auto; }
.melder-alle-gelesen {
  border: 1px solid var(--c-linie); border-radius: var(--r-klein);
  background: var(--c-flaeche); color: var(--c-text-leise);
  font: 500 var(--t-caption) var(--schrift); padding: var(--s-1) var(--s-2);
  cursor: pointer;
}
.melder-alle-gelesen:hover { background: var(--c-grund); color: var(--c-text); }
/* „Alle als gelesen markieren" OBEN, vor der ersten Meldung (Elina
   EL-20260923-1dee7641) -- in der Leiste wie auf /melder. Eine eigene Zeile
   zwischen Kopf und Liste; ein Knopf in der Kopfzeile haette in der schmalen
   Leiste die Zahl "26 offen · 26 neu" umgebrochen. */
.melder-form--oben { margin: 0 0 var(--s-2); }

/* --- 14d: die eigene Seite (/melder und /melder/<id>) -------------------- */
.melder-liste--seite { margin: var(--s-4) 0; }
.melder-liste--seite .melder-eintrag {
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  border-radius: var(--r); margin-bottom: var(--s-2);
}
.melder-liste--seite .melder-zeile { padding: var(--s-3) var(--s-4); }
.melder-zurueck { margin: 0 0 var(--s-3); font-size: var(--t-fuss); }
.melder-detail-titel { display: flex; align-items: center; gap: var(--s-2); }
.melder-detail-herkunft { margin: var(--s-1) 0 var(--s-3); font-size: var(--t-caption); }
.melder-detail-text { max-width: var(--b-lesen); }
.melder-detail-weg { margin: var(--s-3) 0 0; }
/* Der farbige Streifen links sagt die Stufe noch einmal -- fuer den Fall,
   dass der Punkt im Titel uebersehen wird. */
.melder-detail { border-left: 4px solid var(--c-linie); }
.melder-detail--hart    { border-left-color: var(--c-hart); }
.melder-detail--warn    { border-left-color: var(--c-warn); }
.melder-detail--info    { border-left-color: var(--c-akzent); }
.melder-detail--neutral { border-left-color: var(--c-neutral); }

.melder-frage { margin-top: var(--s-4); }
.melder-fragen-liste { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.melder-frage-satz {
  margin: 0 0 var(--s-3); padding: var(--s-3);
  background: var(--c-grund); border-radius: var(--r-klein);
  max-width: var(--b-lesen);
}
.melder-frage-text, .melder-antwort-text { margin: 0 0 var(--s-1); }
.melder-antwort-text { border-left: 3px solid var(--c-gut); padding-left: var(--s-3); }
.melder-antwort-offen { margin: 0; font-size: var(--t-caption); }
.melder-frage-form textarea {
  display: block; width: 100%; max-width: var(--b-lesen); margin: var(--s-1) 0;
  padding: var(--s-2); font: var(--t-text) var(--schrift);
  border: 1px solid var(--c-linie); border-radius: var(--r-klein);
  background: var(--c-flaeche); color: var(--c-text);
}
.melder-frage-fuss { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.melder-quittung {
  max-width: var(--b-lesen); margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-klein);
}
.melder-quittung--ok     { background: var(--c-gut-grund); color: var(--c-gut-text); }
.melder-quittung--fehler { background: var(--c-hart-grund); color: var(--c-hart-text); }

/* Auf dem Telefon nimmt das Blatt die Breite des Bildes -- ein 380-px-Menue
   an der rechten Kante haengt sonst halb daneben. */
@media (max-width: 599px) {
  .melder-blatt { position: fixed; left: var(--s-2); right: var(--s-2);
                  top: calc(var(--h-nav) + var(--s-2)); width: auto;
                  max-height: 70vh; }
}
/* --- 14e: die Glocke auf den Seiten OHNE Navigationsleiste --------------
   "Eigenen Post einreichen", "Post korrigieren", "Reel einplanen" und die
   Quittungsseiten sind einspaltige Karten ohne Kopfzeile -- gebaut als
   Dialog, nicht als Ansicht. Elinas Zusage lautet trotzdem "sichtbar auf
   jeder Seite", und eine Glocke, die genau dort fehlt, wo sie gerade
   arbeitet, ist keine. Sie bekommt deshalb eine eigene, schmale Zeile am
   oberen Rand der Karte statt einer ganzen Navigationsleiste, die diese
   Seiten bewusst nicht haben. */
.melder-leiste { display: flex; justify-content: flex-end; margin-bottom: var(--s-2); }

/* Gedruckt wird die Seite, nicht ihre Navigation -- dieselbe Regel wie fuer
   die Bereichswahl eine Zeile hoeher. */
@media print { details.melder { display: none !important; } }

/* ==========================================================================
   Baustein 15: DIE EINKLAPPBARE SEITENLEISTE -- Zahlen an den Rand, der
   Hauptbereich bleibt die Arbeitsflaeche.

   AUFTRAG EL-20260918-15433b80 (Elina Gerlinger, 2026-09-18), Punkt 2 von
   dreien: "die beiden Kacheln neben dem Kalender (Kurz gesagt und Regeln des
   Content-Managers) werden dort nicht gebraucht, bitte stattdessen in eine
   einklappbare rechte Seitenleiste verschieben, dort untereinander gestapelt,
   die Seitenleiste selbst muss ein- und ausklappbar sein, damit der
   Hauptbereich kompakter wird".

   WARUM DIE LEISTE AM FENSTERRAND LIEGT UND NICHT IM TEXTFLUSS -- das ist
   die eine Entscheidung, die dieser Baustein wirklich trifft:
   `.huelle` ist auf `--b-post * 3 + var(--s-4)*2 + var(--s-6)*2` = 1370 px
   gedeckelt, damit das Kachelraster darunter seine drei Spuren zu je 430 px
   bekommt (stil.css, Block "Ab hier drei pro Reihe"). Eine Leiste ALS ZWEITE
   RASTERSPALTE haette diese Breite aufgeteilt: bei 320 px Leiste blieben dem
   Raster 1002 px -- zwei Spuren statt drei. Das waere Elinas eigene, aeltere
   Zusage gewesen, gebrochen durch ihre neue (EL-20260909-bcc8a088: "die
   darunter liegenden geplanten Post-Kacheln sollen nebeneinander bleiben").
   Eine Flaeche am Rand kostet den Hauptbereich keine einzige Spalte.

   SIE NIMMT AUCH NICHTS WEG. Zugeklappt steht genau ein schmaler Griff da;
   jede Zahl und jeder Satz aus beiden Kaesten steht unveraendert im
   ausgelieferten HTML -- dieselbe Zusage wie in Baustein 13.

   RUECKWEG: `vorschau.conf` -> `SEITENLEISTE=off` (ohne Neustart). Dann
   stehen beide Kaesten wieder im Raster der Antwortzeile, an genau der
   Stelle und in genau der Form vom 2026-09-17.

   KEIN FARB-LITERAL -- dieselbe Regel wie in Baustein 13, gemessen von
   probe_dunkelmodus_deckt_neue_flaechen.py. Jede Flaeche kommt aus einem
   Token, damit `modus.css` den Dunkelmodus ohne eine einzige neue Zeile
   mitnimmt.
   ========================================================================== */

/* --- 15a: die Antwortzeile, wenn sie allein steht ------------------------
   Ohne die beiden Kaesten bleibt in `.antwort` nur "Was geplant ist" uebrig.
   Im Dreispalter stuende die Karte dann in Spalte 1 und zwei Drittel der
   Zeile waeren leer; ueber die volle Rasterbreite gezogen waere sie das
   Gegenteil von kompakt -- der Tagesbalken ist ein SVG mit festem
   Seitenverhaeltnis (360:96), 1322 px Breite machen daraus 352 px Hoehe.
   Eine Breite, eine Karte, links. */
.antwort--solo { grid-template-columns: minmax(0, min(100%, 720px)); }
@media (min-width: 860px) {
  .antwort--solo { grid-template-columns: minmax(0, min(100%, 720px)); }
  .antwort--solo > .antwort-geplant { grid-column: auto; }
}
@media (min-width: 1280px) {
  .antwort--solo { grid-template-columns: minmax(0, min(100%, 720px)); }
}

/* --- 15b: die Leiste selbst ---------------------------------------------- */
/* DIE BREITE DER ZUGEKLAPPTEN LEISTE steht als eigener Wert da, weil sie an
   ZWEI Stellen gebraucht wird: der Griff ist so breit, und der Seitenkoerper
   haelt genau so viel Rand frei. Zwei getippte Zahlen waeren die Stelle, an
   der die Leiste beim naechsten Umbau Inhalt verdeckt. (Kein Farb-Literal --
   die Regel aus Baustein 13 gilt Farben, nicht Massen.) */
:root { --leiste-schmal: 40px; }
@media (max-width: 599px) { :root { --leiste-schmal: 32px; } }

.seitenleiste {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 25;
  /* `stretch` STATT `flex-start` SEIT DEM 2026-09-18 (EL-20260918-957094f6):
     Elina hat "eine sehr schmale, komplett hochkant lesbare Leiste ganz am
     rechten Rand" bestellt -- also eine LEISTE und keinen Reiter. Mit
     `flex-start` war die Klappe nur so hoch wie ihr Inhalt, der Griff also
     ein handtellergrosses Schild oben rechts. Gestreckt laeuft er vom oberen
     bis zum unteren Bildrand. */
  display: flex; align-items: stretch;
  /* Der Rahmen der Leiste ist unsichtbar und faengt deshalb auch keine
     Klicks ab: er liegt ueber der ganzen rechten Fensterkante, und jeder
     Klick daneben gehoerte sonst ihm statt der Seite darunter. */
  pointer-events: none;
}
/* AM `display` VON <details> WIRD NICHTS GEDREHT. Der erste Entwurf setzte
   `display: flex`, um Griff und Blatt in eine Reihe zu stellen -- bequem, und
   genau die Stelle, an der das eingebaute Zuklappen kippt: das Verbergen ist
   eine Regel des Browser-Stylesheets, und jede Autoren-Regel an `display`
   steht im Verdacht, sie zu schlagen. Der Griff steht darum absolut neben dem
   Blatt, und `<details>` behaelt seine Vorgabe.

   WAS DABEI GEMESSEN WURDE UND EINE PROBE BETRIFFT (2026-09-18, Chromium 148,
   fuenf Fensterbreiten): das zugeklappte Blatt ist WIRKLICH inert --
   `checkVisibility()` sagt `false`, ein `focus()` auf den Knopf darin landet
   nicht (activeElement bleibt BODY), und `elementFromPoint` trifft an seiner
   Stelle den Seitenkopf. Sein `getBoundingClientRect()` meldet trotzdem
   360x343 px am rechten Fensterrand. Das ist kein Defekt, sondern die
   Eigenart von `content-visibility: hidden`: uebersprungener Inhalt behaelt
   seine letzte Geometrie. WER MIT RECT MISST, OB DIE LEISTE ZU IST, MISST
   ALSO IMMER "offen". Die richtige Frage ist `checkVisibility()`. */
details.seitenleiste-klapp {
  pointer-events: auto;
  position: relative;
  max-height: 100vh;
}

/* Der Griff: schmal, senkrecht beschriftet, immer da. Er ist das einzige,
   was von der Leiste uebrig bleibt, wenn sie zu ist -- und er muss auch dann
   sagen, was dahinter liegt.
   `right: 100%` haengt ihn an die linke Kante des Blattes: zugeklappt ist das
   Blatt null breit, der Griff sitzt also an der Fensterkante; aufgeklappt
   wandert er mit dem Blatt nach links und bleibt der Knopf, der es
   zuklappt. */
.seitenleiste-griff {
  position: absolute; right: 100%; top: 0; bottom: 0;
  width: var(--leiste-schmal);
  padding: var(--s-3) 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  background: var(--c-flaeche); color: var(--c-text);
  border-left: 1px solid var(--c-linie);
  box-shadow: var(--schatten);
  font: 500 var(--t-fuss) var(--schrift);
  cursor: pointer; list-style: none; user-select: none;
  /* Der Griff ist so hoch wie das Bild und sein Text so lang wie er ist --
     auf einem kurzen Fenster muss der Text weichen, nicht ueberlaufen. */
  overflow: hidden;
}
.seitenleiste-griff::-webkit-details-marker { display: none; }
.seitenleiste-griff::marker { content: ""; }
.seitenleiste-griff:hover { background: var(--c-grund); }
/* Senkrechte Schrift am senkrechten Griff: waagerecht gesetzt waere der
   Griff so breit wie das Wort und nicht mehr schmal. */
.seitenleiste-wort {
  writing-mode: vertical-rl; white-space: nowrap;
  /* `min-height: 0` LAESST IHN SCHRUMPFEN statt den Griff zu sprengen: in
     einer Spalten-Flexbox ist die Vorgabe `min-height: auto`, ein langer
     Text haette Pfeil und Glocke aus dem Bild geschoben. Genau die beiden
     muessen laut Auftrag immer sichtbar bleiben. */
  min-height: 0; overflow: hidden; text-overflow: ellipsis;
}
/* Der Pfeil zeigt in die Richtung, in die es geht: zu -> nach links auf
   (die Leiste kommt herein), offen -> nach rechts zu. */
.seitenleiste-pfeil {
  width: 0; height: 0;
  flex: none;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-right: 5px solid currentColor;
}
details.seitenleiste-klapp[open] > .seitenleiste-griff > .seitenleiste-pfeil {
  border-right: 0; border-left: 5px solid currentColor;
}

/* Das Blatt: die beiden Kaesten UNTEREINANDER GESTAPELT -- Elinas Wortlaut.
   `minmax(0, 1fr)` und nicht `auto`: "Kurz gesagt" enthaelt eine
   Zahlen-Liste, die sonst die Spalte breiter macht als das Blatt ist.

   `display: grid` STEHT AM [open]-FALL UND NICHT AM BLATT SELBST, aus dem
   Grund eine Ebene hoeher: aeltere Browser verbergen den Inhalt eines
   zugeklappten `<details>` mit `display: none` aus ihrem eigenen Stylesheet,
   und eine Autoren-Regel schlaegt das. Am `[open]`-Fall gilt die Regel genau
   dann, wenn die Leiste offen ist -- in beiden Bauarten. */
.seitenleiste-inhalt {
  width: min(360px, 92vw);
  max-height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-4);
  background: var(--c-grund);
  border-left: 1px solid var(--c-linie);
  box-shadow: var(--schatten);
}
details.seitenleiste-klapp[open] > .seitenleiste-inhalt {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4);
}
.seitenleiste-inhalt > * { margin: 0; min-width: 0; }
/* Die Leiste ist eine SPALTE, kein Blatt mit fester Hoehe: ihre Bloecke
   stapeln sich und rollen gemeinsam. Der Benachrichtigungsblock bekommt
   deshalb KEINE eigene Hoehenbegrenzung -- zwei Rollflaechen ineinander sind
   auf dem Telefon nicht bedienbar. */
.seitenleiste-inhalt > .melder-block { align-self: stretch; }

/* Der Zusatzteil (auf der Startseite: Kalender, Kurz gesagt, Regeln) steht in
   einem eigenen Behaelter, DAMIT ES EIN SPRUNGZIEL GIBT (`#leiste-zusatz`).
   Er erbt das Stapeln nicht -- ein Grid gibt seine Spalten nicht an Enkel
   weiter --, also bekommt er dasselbe hier noch einmal. Ohne diese vier
   Zeilen klebten die drei Kaesten ohne Abstand aufeinander. */
.leiste-zusatz { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.leiste-zusatz > * { margin: 0; min-width: 0; }

/* Die Sprungzeile ganz oben in der Leiste: zwei Wege, eine Zeile. */
.leiste-sprung {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  margin: 0; font-size: var(--t-caption);
}

/* DER SEITENKOERPER HAELT DEN RAND FREI, DEN DIE LEISTE BRAUCHT.
   Ohne diese Regel liegt eine 40 px breite, bildhohe Flaeche ueber der
   rechten Kante JEDER Seite -- auf einem 1366er-Fenster ist das die rechte
   Spalte des Kachelrasters. `:has()` haengt sie an die Anwesenheit der
   Leiste: nimmt `MELDER=off` und `SEITENLEISTE=off` sie weg, ist auch der
   Rand wieder weg. Ein Browser ohne `:has()` faellt auf den Stand von vorher
   zurueck (die Leiste liegt darueber) -- also nicht schlechter als bis zum
   17.09., und kein Inhalt geht verloren. */
body:has(.seitenleiste) { padding-right: var(--leiste-schmal); }
@media print { body:has(.seitenleiste) { padding-right: 0; } }

/* Gedruckt wird die Seite, nicht ihre Bedienelemente -- dieselbe Regel wie
   fuer Bereichswahl und Glocke. Die Kaesten stehen im HTML und kaemen sonst
   als 360-px-Streifen quer ueber das Papier. */
@media print { .seitenleiste { display: none !important; } }

/* --- 15b2: „Was geplant ist" ALS DRITTER KASTEN IN DERSELBEN LEISTE ------
   Nachbesserung EL-20260918-9b4a8985 (Elina Gerlinger, 2026-09-18): "bitte
   auch den Kalender (Was geplant ist) mit in dieselbe einklappbare rechte
   Seitenleiste packen [...] alle drei Elemente dort untereinander gestapelt".

   HIER STEHEN NUR DREI ZEILEN, UND DAS IST DER PUNKT. Das Stapeln macht
   `.seitenleiste-inhalt` schon (ein Grid mit einer Spalte, 15b); die
   Aussenabstaende nimmt `> *` schon weg. Der Kalender braucht dafuer nichts
   Neues -- er ist eine `.karte` wie die Kaesten daneben.

   DIE EINE ECHTE ANPASSUNG IST DIE GROSSE ZAHL. `--t-held` sind 48 px; im
   Hauptbereich stehen daneben noch "Beiträge für <Reiter>", in einem 328 px
   breiten Blatt (360 minus Polsterung) wird daraus schnell eine Zeile, die
   nur noch aus Zahl besteht. Auf dem Telefon (Blatt = 92 vw) ist es enger.
   Die Zahl wird darum in der Leiste eine Stufe kleiner gesetzt -- sie bleibt
   die groesste Zahl des Blattes, nimmt ihm aber nicht die halbe Hoehe.

   DER TAGESBALKEN BRAUCHT KEINE REGEL. Er ist ein SVG mit `viewBox` und
   `width: 100%`: er skaliert mit dem Blatt und behaelt sein
   Seitenverhaeltnis (360:96) -- bei 328 px Blattbreite sind das 87 px Hoehe.
   Eine feste Hoehe hier waere die Stelle, an der er beim naechsten
   Breitenwechsel verzerrt. */
/* NACHGEZOGEN AM 2026-09-18 (EL-20260918-957094f6): der Kalender ist seit
   der Zusammenlegung ENKEL der Leiste (`.leiste-zusatz` dazwischen), kein
   Kind mehr. Mit dem alten Kindschafts-Zeichen `>` griff die Regel nicht
   mehr -- und die 48-px-Zahl haette dem 328 px breiten Blatt die halbe
   Hoehe genommen. */
.seitenleiste-inhalt .antwort-geplant .kachel-wert--held { font-size: var(--t-gross); }

/* --- 15c: der klickbare Tagesbalken -------------------------------------
   Punkt 1 desselben Auftrags: "ein Klick auf einen Tagesbalken mit Posts soll
   direkt zu den fuer diesen Tag geplanten Beitraegen weiter unten auf der
   Seite springen/scrollen".

   DASS ER KLICKBAR IST, MUSS MAN SEHEN KOENNEN, BEVOR MAN KLICKT. Ein Link,
   den nur der Mauszeiger verraet, existiert fuer die Tastatur nicht und auf
   dem Telefon gar nicht. Der Balken hellt darum beim Ueberfahren auf, das
   Tagesetikett wechselt in die Handlungsfarbe, und der Fokusrahmen ist
   derselbe wie ueberall (Baustein 0, `:focus-visible`). */
.zahlbild-sprung { cursor: pointer; }
.zahlbild-sprung .zahlbild-balken { transition: opacity .12s ease-out; }
.zahlbild-sprung:hover .zahlbild-balken { opacity: .7; }
.zahlbild-sprung:hover .zahlbild-tag,
.zahlbild-sprung:focus-visible .zahlbild-tag { fill: var(--c-akzent); }
.zahlbild-sprung:focus-visible { outline: 2px solid var(--c-akzent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .zahlbild-sprung .zahlbild-balken { transition: none; }
}

/* WO MAN LANDET, MUSS MAN SEHEN. Ein Sprung mitten in ein Raster aus 25
   gleich aussehenden Kacheln ist ohne Markierung ein Sprung ins Ungewisse --
   Elina wuesste nicht, ob der Klick gewirkt hat. `:target` haelt die
   Markierung genau so lange, wie die Adresse auf die Kachel zeigt.
   `scroll-margin-top` gibt dem Ziel Luft nach oben; ohne sie klebt die
   Kachel an der Fensterkante. */
.postraster > .post { scroll-margin-top: var(--s-6); }
.postraster > .post:target {
  outline: 2px solid var(--c-akzent); outline-offset: 3px;
  border-radius: var(--r);
}

/* ==========================================================================
   Baustein 16: DIE KACHELREIHE UEBER „BEREITS VEROEFFENTLICHT" -- drei
   kleine Kacheln nebeneinander statt drei Textbloecke untereinander.

   Auftrag EL-20260921-d00dc315 (Elina Gerlinger, 2026-09-21): "Umbau des
   oberen Bereichs der Bereits-veroeffentlicht-Ansicht in kleine nebeneinander
   stehende Kacheln mit Dropdowns statt der aktuellen ausformulierten
   Textbloecke, die als zu viel Text/Unordnung empfunden werden".

   Das ist R1 aus GESTALTUNG.md („in die Breite kompakt, nicht in die
   Laenge") an der Stelle, an der sie beauftragt wurde -- und es sind
   GLEICHARTIGE Dinge und keine Abfolge: drei Auskuenfte ueber denselben
   Kanal, in beliebiger Reihenfolge lesbar. Genau dafuer ist das Raster
   gedacht; die Ausnahme in R1 (Stationen, Balken, Tabellenzeilen) trifft
   hier nicht zu.

   `auto-fit` UND KEINE FESTEN DREI SPALTEN: zwei der drei Kacheln haben
   ihre eigene Bedingung und stehen nicht immer da (nichts wartet / der
   Kanal ist voll). Bei festen drei Spalten hinterliesse jede fehlende
   Kachel ein Loch, und die verbleibende zeigte auf ein Drittel der Breite
   eine Luecke daneben -- also genau die Unordnung, gegen die der Auftrag
   sich richtet.

   KEIN FARB-LITERAL, kein freier Pixelwert -- dieselbe Regel wie in
   Baustein 13 und 15. `modus.css` braucht dafuer keine einzige Gegenregel.

   WARUM DIE KLASSE `kopfkacheln` HEISST UND NICHT `veroeff-kopf`: den Namen
   gibt es seit dem 2026-09-10 schon, und er gehoert jemand anderem --
   `stil.css` fuehrt `.veroeff-kopf` als die Datums- und Plattformzeile IN
   JEDER Beitragskachel des Rasters darunter. Beim Bau am 21.09. stand er
   hier zuerst ebenfalls; gemessen im Browser waren daraufhin alle 25
   Kachel-Kopfzeilen ein Raster mit 24 px Abstand, und die drei Kacheln
   standen trotzdem untereinander, weil `stil.css` nach dieser Datei kommt.
   Ein Klassenname ist ein globaler Name: er wird VOR dem Schreiben gesucht.
   ========================================================================== */
.kopfkacheln {
  display: grid;
  /* 240 UND NICHT 260 px: mit 260 brauchten drei Spuren 812 px und standen
     bei 860 px Fensterbreite als 2+1 da -- also mit einem Loch neben der
     dritten Kachel, genau der Befund vom 2026-09-21. 240 laesst die drei
     ab 792 px nutzbarer Breite nebeneinander. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
  align-items: start;
  margin: var(--s-6) 0 var(--s-4);
}

/* ---------------------------------------------------------------------------
   DIE REIHE BRICHT AUS DEM SEITENRAHMEN AUS -- volle Fensterbreite.

   AUFTRAG EL-20260921-2c7845f7 (Elina Gerlinger, 2026-09-21), ihre Worte:
   die Kacheln "verschwenden riesige Mengen an ungenutztem horizontalem
   Bildschirmplatz (auf typischen Desktop-Breiten bleibt der komplette rechte
   Bildschirmbereich leer)" -- "das Layout tatsaechlich auf ein
   Nebeneinander-Raster umstellen das die volle Bildschirmbreite nutzt".

   GEMESSEN AM LAUFENDEN DIENST, VORHER (Anteil der Fensterbreite, den die
   Reihe ueberhaupt einnimmt): 1440 px -> 91,8 % · 1600 px -> 82,6 % ·
   1920 px -> 68,9 % · 2560 px -> 51,6 %. Die Reihe blieb ab 1440 px bei
   1322 px stehen und wuchs nie wieder mit: `.huelle` ist auf
   `--b-post * 3 + ...` = 1370 px gedeckelt (stil.css, Block "Ab hier drei
   pro Reihe"). Auf einem 2560er Schirm lag also mehr als die halbe Breite
   brach.

   WARUM NICHT EINFACH DER DECKEL VON `.huelle` HOCH: er haelt das
   Beitragsraster DARUNTER auf drei telefonbreiten Spuren zu je 430 px --
   Elinas eigene, aeltere Zusage (EL-20260827-2ed50b53, gemessen von
   `probe_kachel_telefonbreit.py`). Ein hoeherer Deckel zoege jede Post-Kachel
   mit in die Breite und braeche sie. Der Ausbruch gilt deshalb genau diesem
   einen Element und laesst die Seite, wie sie ist.

   DIE RECHNUNG: `50%` ist die halbe Breite des Seitenrahmens, `50vw` die
   halbe Fensterbreite -- die Differenz ist genau der Ueberhang je Seite. Der
   Rand `--leiste-schmal` (40 px) steht dahinter, weil rechts die feste
   Seitenleiste liegt (Baustein 15, `position: fixed`); ohne ihn liefe die
   Reihe darunter. Er faengt zugleich den Rollbalken ab: `vw` zaehlt ihn mit,
   `50%` nicht, was je Seite ~7 px Ueberhang macht.

   ERST AB 860 px, der Schwelle dieses Hauses fuer "nebeneinander" (stil.css).
   Darunter stehen die Kacheln ohnehin untereinander, und der Ausbruch haette
   sie nur an den Fensterrand geklebt.
   --------------------------------------------------------------------------- */
@media (min-width: 860px) {
  .kopfkacheln {
    margin-left: calc(50% - 50vw + var(--leiste-schmal));
    margin-right: calc(50% - 50vw + var(--leiste-schmal));
  }
}

/* DIE ZELLE IST DIE KARTE. Die beiden ersten Kacheln sind fertige Bloecke
   aus `vorschau.html` und bringen ihre eigene `.lage`-Karte mit; in der
   Zelle waere das ein Rahmen im Rahmen. Sie geben ihn hier ab -- am HTML
   aendert das nichts, und auf dem Rueckweg (KOPFKACHELN=off) steht der
   Kasten unveraendert wieder allein. */
.kopfkachel {
  background: var(--c-flaeche);
  border: 1px solid var(--c-linie);
  border-radius: var(--r);
  box-shadow: var(--schatten);
  padding: var(--s-4);
  min-width: 0;                 /* sonst sprengt ein langes Wort die Spalte */
}
.kopfkachel > .lage,
.kopfkachel > p.lage,
.kopfkachel > section.lage {
  background: none; border: 0; box-shadow: none;
  padding: 0; margin: 0;
}
.kopfkachel > * + * { margin-top: var(--s-3); }
.kopfkachel h2 {
  font-size: var(--t-kopf); margin: 0 0 var(--s-2);
}

/* EIN AUFGEKLAPPTER KASTEN NIMMT DIE GANZE REIHE -- ABER NUR NOCH AUF
   SCHMALEN FENSTERN.

   DAS WAR DER FEHLER, DEN ELINA ZWEIMAL GEMELDET HAT (EL-20260921-2c7845f7).
   Die Regel stand vorher unbedingt da. Gemessen am laufenden Dienst bei
   1920 px, nachdem EIN Dropdown geoeffnet war -- und Dropdowns sind der
   Zweck dieser Kacheln, nicht ihr Sonderfall:

       zu:  3 Kacheln, 1 Reihe,  je 430 px
       auf: 3 Kacheln, 3 REIHEN, 319 / 1322 / 319 px

   Die aufgeklappte Kachel nahm `grid-column: 1 / -1`, und die beiden anderen
   wurden vor und hinter sie auf eigene Reihen geschoben -- jede 319 px
   breit, mit 1000 px Leere daneben. Genau das hat sie gesehen: "stehen
   weiterhin UNTEREINANDER ... und verschwenden dabei riesige Mengen an
   ungenutztem horizontalem Bildschirmplatz". Die Kacheln standen also
   nebeneinander, solange man sie nicht benutzte.

   WARUM DIE REGEL NICHT GANZ FAELLT: der Grund von damals stimmt weiter.
   "Von dir eingereicht" traegt hinter seinem Dropdown die vollstaendigen
   Einplan-Formulare; in einer 300-px-Spalte sind sie unbenutzbar. Unterhalb
   von 1100 px ist eine Spalte genau so schmal -- dort bleibt es beim
   Reihenwechsel, und das ist dann auch kein Verlust, weil daneben ohnehin
   kein Platz frei bleibt. AB 1100 px hat die Spalte durch den Ausbruch
   oben mindestens 329 px und bei 1920 px 602 px, also MEHR als die 430 px,
   die die Kachel vorher zugeklappt hatte. Die Reihe bricht dort nie wieder.

   `:has()` ist in diesem Dienst bereits Voraussetzung (stil.css,
   Tagestrenner im Raster). Ein Browser ohne `:has()` zeigt den Kasten in
   seiner Spalte -- enger, aber vollstaendig; kein Inhalt haengt daran.

   GEMESSEN WIRD DAS IM BROWSER, NICHT AM QUELLTEXT:
   `pruefungen/probe_kachelreihe_nebeneinander.py` oeffnet jedes Dropdown
   einzeln und zaehlt die Reihen. Dass es diese Messung vorher nicht gab, ist
   der Grund, warum der Fehler zwei Auftraege ueberlebt hat --
   `probe_kopfkacheln.py` sagt ueber sich selbst, sie sei "ausdruecklich
   KEINE Layout-Messung im Browser". */
@supports selector(:has(*)) {
  @media (max-width: 1099px) {
    .kopfkacheln > .kopfkachel:has(details[open]) { grid-column: 1 / -1; }
  }
}

/* --- 16a: die Follower-Kachel -------------------------------------------
   „die aktuelle Follower-Anzahl gross dargestellt, darunter das Wachstum
   als Insight". `--t-held` ist die Staffelstufe fuer „die EINE Zahl, mit
   der eine Seite beginnt" (Baustein 0) -- damit hat „gross" ein Mass und
   ist keine Geschmacksfrage. */
.follower-zahl {
  font-size: var(--t-held);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: var(--s-2) 0 0;
  font-variant-numeric: tabular-nums;
}
.follower-zahl-fuss {
  display: block;
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: var(--s-1);
}
/* DAS WACHSTUM TRAEGT FARBE UND VORZEICHEN, NIE FARBE ALLEIN (Baustein 6):
   das Vorzeichen steht im Text, die Farbe ist die Zweitinformation. */
.follower-wachstum {
  font-size: var(--t-kopf);
  font-weight: 600;
  margin: var(--s-2) 0 0;
}
.follower-wachstum--auf    { color: var(--c-gut-text); }
.follower-wachstum--ab     { color: var(--c-hart-text); }
.follower-wachstum--gleich { color: var(--c-text-leise); }

/* NEU GEFOLGT / ENTFOLGT (EL-20260923-175a8258) -- zwei Zahlen nebeneinander
   unter der grossen. Eine Stufe kleiner als sie (`--t-kopf`), damit die
   Gesamtzahl die EINE Zahl bleibt, mit der die Kachel beginnt. Farbe ist
   Zweitinformation, das Vorzeichen steht im Text (Baustein 6). */
.follower-bewegung {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  margin: var(--s-2) 0 0;
}
.follower-bewegung-zahl {
  margin: 0;
  display: flex; align-items: baseline; gap: var(--s-1);
}
.follower-bewegung-wert {
  font-size: var(--t-kopf);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.follower-bewegung-zahl--neu .follower-bewegung-wert { color: var(--c-gut-text); }
.follower-bewegung-zahl--weg .follower-bewegung-wert { color: var(--c-hart-text); }
.follower-bewegung-spanne { margin: var(--s-1) 0 0; }

/* Die Zeitraum-Umschaltung benutzt die Knopfform der Filterleiste am Raster
   darunter (stil.css `.veroeff-filter-knopf`) -- dieselbe Achse, dieselbe
   Form. Hier steht nur ihr Abstand. */
.veroeff-zeitraum {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-2);
}

/* --- 16b: die Kurve ------------------------------------------------------
   Eine Linie ueber der Zeit, kein Balken je Tag: ein Bestand ist eine
   fortlaufende Groesse. Die Flaeche darunter ist Lesehilfe und traegt
   deshalb keine eigene Bedeutung -- sie ist dieselbe Datenfarbe, nur
   leise. */
.zahlbild--kurve { margin-top: var(--s-2); }

/* DIE KURVE WAECHST NICHT BELIEBIG MIT DER KACHEL. Seit dem Ausbruch auf die
   volle Fensterbreite (EL-20260921-2c7845f7) ist die Follower-Kachel bei
   1920 px 602 px breit und bei 2560 px 816 px. Das SVG traegt `viewBox` und
   `preserveAspectRatio` -- es skaliert also MITSAMT seiner Schrift: die
   11-px-Achsenbeschriftung stuende bei 816 px Breite als 28 px da, groesser
   als jede Ueberschrift dieser Seite, und die Kurve waere 224 px hoch.
   `--b-post` (430 px) ist die Breite, in der diese Kurve gebaut und
   abgenommen wurde. Sie steht linksbuendig in der Kachel; der Platz daneben
   gehoert der grossen Zahl und dem Wachstumssatz, die beide mitwachsen. */
.kopfkachel--follower .zahlbild--kurve { max-width: var(--b-post); }
.zahlbild-kurve {
  fill: none; stroke: var(--c-daten); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.zahlbild-kurve-flaeche { fill: var(--c-daten-hell); opacity: .45; stroke: none; }
.zahlbild-kurve-kopf { fill: var(--c-daten-dunkel); }
/* DER FUSS UND DIE HAARLINIE AUF SEINER HOEHE (EL-20260921-ea192f92).
   Die Flaeche oben laeuft am linken Rand bis zur Grundlinie hinunter, und die
   Grundlinie liegt auf dem MINIMUM der Reihe -- nicht auf dem Startwert. Ohne
   eine Marke am ersten Messpunkt sieht dieser Rand aus wie der Anfang der
   Linie; Elina hat die Kurve am 21.09. genau so gelesen und daraus einen
   Anstieg geschlossen, wo die Kachel daneben −5 sagte.
   Die Haarlinie ist bewusst GESTRICHELT und in der Linienfarbe, nicht in der
   Datenfarbe: sie ist eine Hilfslinie und darf nicht als zweite Messreihe
   gelesen werden. Beide nutzen nur vorhandene Farbmarken und tragen den
   Dunkelmodus deshalb mit, ohne eigene Regel. */
.zahlbild-kurve-fuss { fill: var(--c-daten); }
.zahlbild-kurve-basis { stroke: var(--c-linie); stroke-width: 1; stroke-dasharray: 2 3; }