/* ============================================================
   chat-o BAUSTEINE (v3.91.0)

   WARUM ES DIESE DATEI GIBT
   Sören: „Ich will bessere designs bausteine". Gemessen am 16.09.2026:
   app.css hat 2588 Regelblöcke, davon 30 in der Bauart „Behälter +
   Element" (`#setup button`, `#tabs button` …) und nur 13 mit `:where()`.
   Diese Bauart wiegt (1,0,1) und schlägt jede Klassenregel (0,1,0). In
   einer einzigen Sitzung sind wir viermal hineingelaufen: der Raumtitel
   stand mittig statt links, „gibt's nicht" klebte am Artikelnamen, der
   Kopf trug die Farbe der Fläche, die Reiterschrift kam nicht durch.
   Jedes Mal war die Regel richtig und hat trotzdem verloren.

   DIE REGEL DIESER DATEI
   1. Ein Baustein ist EINE Klasse. Kein Behälter im Selektor, keine
      Verschachtelung, keine ID. Damit wiegt er (0,1,0).
   2. Behälter-Regeln in app.css, die einem Baustein im Weg stehen, werden
      dort in `:where()` gesetzt - dann wiegen sie nur noch so viel wie ihr
      Element und der Baustein gewinnt, ohne dass irgendwo `!important`
      steht.
   3. Wer das bricht, fällt auf: proben/oberflaeche/bausteine-dom.mjs misst
      die Spezifität jeder Regel in dieser Datei.

   Die Bausteine kommen aus der Entwurfsreihe „Richtung N"
   (proben/oberflaeche/richtung-n.mjs) - hier stehen sie zum ersten Mal
   in der echten App.
   ============================================================ */

:root {
  /* Der Rahmen oben, ausgemessen an Sörens Vorbild
     (proben/oberflaeche/rahmen-messen.mjs): Der Kopf liegt auf dem
     dunkelsten Grau, die Reiterleiste schiebt sich als hellere Fläche mit
     runder Oberkante darüber, der Inhalt darunter bleibt weiß. Drei
     Helligkeiten - deshalb trägt die runde Ecke Tiefe und zeigt keine
     helle Lücke. Gemessen: 227,228,230 oben, 249,249,249 darunter,
     Rundung rund 4,3 % der Breite, KEIN Schatten. */
  /* v3.98.0: gehen mit dem warmen Hellgrau der Seite mit (app.css --bg),
     sonst steht ein kühler Kopf über einem warmen Inhalt. */
  --bs-kopf: #e2e0dc;
  --bs-flaeche: #f4f3f1;
  --bs-r-schub: 18px;
  /* Ein Ton je Bereich. Nicht Dekoration: derselbe Ton steht am Ring, am
     Laden-Punkt und am Termin, damit man nach zwei Wochen weiß, dass grün
     einkaufen heißt. */
  --bs-liste: #0f7a4d;
  --bs-aufgaben: #6d3fc4;
  --bs-termine: #0a5fe0;
  --bs-punkte: #c07000;
  --bs-fehlt: #c2422f;
  /* 25.10.2026 (Beta kopf-einfarbig): die Farbe der iPhone-Systemleiste
     (gemessen: reines Schwarz, hell wie dunkel). EIN Wert für Fläche über
     dem Kopf, Raumkopf und die Zeile „Räume“. */
  --kopf-system: #000;
}
html.kopf-schmal.beta-kopf-einfarbig:not([data-thema="dunkel"]) #raumKopf,
html.kopf-schmal.beta-kopf-einfarbig:not([data-thema="dunkel"]) .raumKopfzeile,
:root[data-thema="dunkel"] {
  --bs-kopf: #0b0c10;
  --bs-flaeche: #16181e;
  --bs-liste: #4fd39a;
  --bs-aufgaben: #b79cff;
  --bs-termine: #7fb0ff;
  --bs-punkte: #f0b95c;
  --bs-fehlt: #ff9c8f;
}

/* ---------- Die Marke ----------
   Dasselbe Zeichen wie auf der Startseite (public/logo.svg): der Ring mit
   Sprechblasen-Zipfel, der das „o" in chat-o ist. */
.bsMarke { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--text); text-decoration: none; flex: none; }
/* v3.94.0: Hier standen feste Werte – 8px Ecke und ein eigener Schatten.
   Beide fielen durch, weil probe-stil.mjs diese Datei gar nicht gelesen
   hat (sie prüfte nur app.css und start.css). Der feste Schatten war
   dazu im Dunkelmodus falsch: Er ist auf Hell gerechnet und ging nicht
   mit. --r-xs (6px) statt --r-s (12px), weil das Zeichen nur 26px breit
   ist – 12px wären fast ein Kreis. */
.bsMarkeZeichen { width: 26px; height: 26px; border-radius: var(--r-xs); flex: none;
  box-shadow: var(--shadow-1); }
.bsMarkeWort { font-size: 1.05rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }

/* ---------- Chip: kleine Angabe in einer Pille ---------- */
/* 44 px, nicht 34: Der Datums-Chip ist ein Knopf (er springt zu heute), und
   die Probe hat ihn mit 34 px erwischt. Kompaktheit verliert hier gegen die
   Trefferfläche - so steht es in CLAUDE.md. Die Uhr daneben ist gleich hoch,
   sonst steht die Reihe schief. */
.bsChip { display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 44px; padding: 0 14px; border: none; border-radius: var(--r-voll);
  background: var(--bg); color: var(--muted);
  font: inherit; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.bsChip svg { flex: none; color: var(--muted); }

/* ---------- Der Raumkopf ----------
   Marke oben links, der Raumname groß darunter, die Angaben als Chips.
   Die Höhe schaltet app.js über die Klasse `offen` - NICHT mehr über
   style.display. Ein Inline-Stil hätte jede Regel hier geschlagen; genau
   daran ist der Entwurf einmal hängengeblieben. */
#raumKopf { display: none; }
#raumKopf.offen { display: block; background: var(--bs-kopf); padding: 0 8px; }
/* v3.95.0 – EINE Zeile. Sören: „Kopfzeile frisst viel zu viel platz."
   Vorher drei gestapelte Zeilen zu je 44 px = 154 px Kopf. Jetzt 52 px:
   eine Reihe zu 44 px plus 4 px Luft oben und unten. Die Begründung, was
   wohin gewandert ist, steht im HTML an #raumKopf.
   Der Name steht MITTIG und darf schrumpfen (min-width: 0), die drei
   Bedienelemente links und rechts nicht - sonst zerdrückt ein langer
   Raumname die Knöpfe. */
.bsKopfEins { display: flex; align-items: center; gap: 4px; min-height: 52px; }
.bsKopfZurueck { flex: none; width: 44px; min-height: 44px; border: none; background: none;
  color: var(--text); font-size: 1.7rem; line-height: 1; cursor: pointer; border-radius: var(--r-s); }
/* v3.100.0 - Sören: „der kopf muss moderner gestaltet werden."
   Der Name steht LINKS statt mittig. Das ist der eine Griff, der am meisten
   bringt und nichts kostet: Die Zeile bleibt bei 52 px, und ein
   linksbündiger Name hat MEHR Platz als ein mittiger - der musste sich
   links und rechts je 44 px freihalten, damit er wirklich mittig steht.
   align-items: center statt baseline, weil neben dem Wort jetzt eine runde
   Marke steht und keine zweite Grundlinie. */
.bsKopfName { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start;
  gap: 8px; overflow: hidden; }
/* Das gezeichnete Zeichen je Raumtyp, in einer runden Marke. Es ersetzt im
   Kopf das vom Haushalt gewählte Emoji - das steht weiter in der Raumliste,
   im Menü und in der Raum-Einstellung (app.js raumKopfSetzen). */
.bsKopfZeichen { flex: none; width: 30px; height: 30px; border-radius: var(--r-kreis);
  background: var(--surface-2); color: var(--text); display: grid; place-items: center; }
.bsKopfWort { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
/* Hier stand kurz eine kleinere Schrift fuer schmale Geraete. Sie half
   NICHT: Gemessen lag es nicht an der Schrift, sondern daran, dass der
   Raumtyp zweimal im Kopf stand (Zeichen UND Wort). Das Wort ist weg, der
   Name hat den Platz - eine Regel, die nichts bewirkt, bleibt nicht
   stehen. */
/* .raumTitel traegt in app.css `flex: 1; text-align: center` - fuer den
   mittigen Namen von v3.95.0. Es ist die HUELLE um Zeichen und Wort, also
   wird es hier zur Reihe. Ohne diese Zeile blieben beide mittig, obwohl
   .bsKopfName links ausrichtet: Die Huelle dehnt sich, der Inhalt zentriert
   sich darin. (Dieselbe Falle wie 13-mal in v3.99.0 - eine Regel mit einem
   Schritt mehr gewinnt.) */
.bsKopfName .raumTitel { display: flex; align-items: center; gap: 8px; text-align: left; min-width: 0; }

/* ---------- Die Reiterleiste ----------
   Eine durchgehende Fläche mit runder Oberkante; der aktive Reiter ist
   einfach dunkler statt einer Pille.

   WAS HIER BEWUSST *NICHT* STEHT: Schriftgröße, Polster, Mindesthöhe und
   die Lage des Zählers. Der erste Anlauf hat alles vier überschrieben -
   und damit eine Einschränkung gebrochen, die in app.css ausdrücklich
   begründet ist: Im FEIER-Raum müssen ACHT Reiter (Feier, Chat, Gäste,
   Orga, Aufgaben, Einkauf, Kosten, Kontakte) ohne Wischen in 360 px
   passen. Mit 0,95 rem und 17 px Abstand wurden daraus 530 px;
   eventreiter-dom.mjs hat es mit acht roten Prüfungen gemeldet.
   Ebenso der Zähler: Er sitzt ÜBER dem Wort, weil daneben kein Platz
   bleibt (app.css v3.44.0). Daneben sah im Haushalt mit sechs Reitern gut
   aus und war im Feier-Raum mit acht falsch - genau der Fall, für den
   LEITFADEN.md Teil 2A „alle drei Raumtypen" verlangt.
   Ein Baustein ändert hier also das AUSSEHEN, nicht das Maß. */
.bsReiter { background: var(--bs-flaeche); border-bottom: none;
  /* Die Wisch-Verläufe am Rand (app.css #tabs::before/::after) blenden auf
     diese Farbe aus - sonst blendeten sie ins Weiß der Seite. */
  --reiter-grund: var(--bs-flaeche);
  border-radius: var(--bs-r-schub) var(--bs-r-schub) 0 0; padding-top: 10px; }
.bsReiterKnopf { border: none; background: none; border-radius: 0; color: var(--muted); }
.bsReiterKnopf.active { background: none; color: var(--text); }
.bsReiterZahl { background: var(--surface-2); color: var(--muted); }
.bsReiterKnopf.active .bsReiterZahl { background: var(--primary); color: var(--on-primary); }
/* ---------- Der Punkt am Reiter (v3.100.0) ----------
   Sören: „R1 blauer punkt wenn offene themen grauer punkt wenn nichts
   offen." Er sitzt da, wo bis v3.99.0 die Zahl stand: ÜBER dem Wort. Das
   war nie Geschmack, sondern Platz - neben „Besorgungen" bleibt auf einem
   390-px-Gerät keiner (app.css v3.44.0).
   Drei Zustände, und rot bleibt: es sagt etwas, das blau nicht sagt.
   Gemessen gegen die Leiste: blau 8,07 dunkel / 6,21 hell, rot 7,77 /
   5,86, grau 4,48 / 3,85 - alle über 3:1, auch der leise. */
.bsReiterPunkt { position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: var(--r-voll); box-sizing: border-box; }
.bsReiterPunkt.offen { background: var(--accent); }
.bsReiterPunkt.spaet { background: var(--danger); }
.bsReiterPunkt.still { background: var(--border-2); }

/* ============================================================
   HEUTE ALS KACHELN (v3.92.0)

   Sören: „Heute zeigt wechselnde Widgets an. Zb in unserem haushalt sind
   aktuell sehr viele unerledigte aufgabe mit verstrichenen fristen. Also
   könnte das eine kachel mit rotem vollen ring und Ausrufezeichen sein.
   [...] Halt eine flexible reagierende startseite."

   ZWEI STUFEN STATT EINER (Sören: „Roter Kasten sehr aufdringlich" und
   danach „D plus"): Überfällig ist in diesem Haushalt der NORMALFALL -
   eine vollflächig rote Kachel wäre nach einer Woche Tapete statt Signal.
   Deshalb markiert .bsKachelWarn mit einer Kante, und .bsKachelNot (volle
   Fläche) bleibt dem Fall vorbehalten, in dem wirklich etwas liegen
   geblieben ist. Welcher das ist, entscheidet heute.js.

   MASSE AUS DER VORHANDENEN LEITER: Alle Schriftgrößen hier stehen schon
   in app.css (0,78 · 0,82 · 0,92 · 1,7 · 2,4 rem) - probe-kontrast erlaubt
   höchstens 14 Stufen und die sind voll. Ecken aus --r-*, kein freier
   Schatten. Die Charakterschrift steht NUR an --font-gross-Stellen.
   ============================================================ */
:root {
  /* Der Flächenton der zweiten Stufe. NICHT --bs-fehlt nehmen: das ist ein
     TEXT-Ton und im Dunkeln hell - als Fläche würde daraus Pastell, also
     genau das, was abgelehnt wurde. Gemessen: 5,34:1 hell, 8,26:1 dunkel. */
  --bs-fehlt-flaeche: #b83a27;
  --bs-fehlt-auf: #fff5f3;
}
:root[data-thema="dunkel"] {
  --bs-fehlt-flaeche: #7e2418;
  --bs-fehlt-auf: #ffe7e2;
}

/* v3.142.0 (Befund D6 der Prüfung zu Sörens „Suche weiter nach fehlern,
   sicherheitslücken und Design Optimierungen“): Das Feld unter den Kacheln
   lag auf --bs-flaeche, die Kachel auf --bg. Seit v3.98.0 sind beide im
   hellen Thema #f4f3f1 - Kachel, Feld und Seite hatten dieselbe Farbe
   (1,00:1), von den fünf Kacheln blieben lose Texte mit großen Lücken.
   Jetzt liegt das Feld eine Stufe tiefer (--surface): hell 1,08:1 wie vor
   v3.98.0, dunkel 1,11:1 statt 1,06:1. --bs-flaeche selbst bleibt - an ihr
   hängt die Reiterleiste. gestaltung-dom.mjs D6 misst die Kante in beiden
   Themen. */
.bsBento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 14px; background: var(--surface); align-content: start;
  /* Ohne Mindesthoehe endete die Flaeche direkt unter der letzten Kachel -
     eine graue Kante quer ueber den Bildschirm. */
  min-height: 420px; }
.bsKachel { display: flex; flex-direction: column; justify-content: space-between;
  min-height: 104px; padding: 14px; border-radius: var(--r-l); background: var(--bg);
  color: var(--text); border: 0; font: inherit; text-align: left; width: 100%;
  cursor: pointer; appearance: none; -webkit-appearance: none; }
.bsKachelBreit { grid-column: 1 / -1; }
/* v3.176.1 (Sören, 24.10.2026: „Kannst du die Aufgaben reduzieren? …“, aus
   dem Familien-Durchgang vom 23.10.: Heute-Kacheln bei 320 px 4 px zu
   breit): Mit `1fr` (= minmax(auto, 1fr)) zwang das breiteste Wort
   („Besorgungen“ neben dem Ring) seine Spalte auf 159 px und schob die
   Nachbarin auf 108 px - zusammen 9 px über die Fläche hinaus. Jetzt teilen
   sich beide die Breite gleich (minmax(0, 1fr)); damit die Überschrift in
   die schmalere Spalte passt, rücken Rand und Ring unter 360 px enger. */
.bsKachel { min-width: 0; }
.bsKachelWas { min-width: 0; overflow-wrap: anywhere; }
.bsKachelLeise { background: none; border: 1px solid var(--border); min-height: 0; }
/* Stufe 1: dieselbe Fläche wie die Nachbarn, nur eine Kante. */
.bsKachelWarn { grid-column: 1 / -1; padding-left: 14px;
  border-left: 6px solid var(--bs-fehlt);
  border-radius: var(--r-s) var(--r-l) var(--r-l) var(--r-s); }
/* Stufe 2: volle Fläche. Kein Schatten - eine rote Fläche braucht keinen. */
.bsKachelNot { grid-column: 1 / -1; padding: 18px; border-radius: var(--r-xl);
  background: var(--bs-fehlt-flaeche); color: var(--bs-fehlt-auf); }
.bsKachelOben { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bsKachelWas { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.bsKachelZahl { font-family: var(--font-gross); font-size: 1.7rem; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; margin-top: 10px; }
.bsKachelSatz { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em;
  margin-top: 8px; line-height: 1.3; }
.bsKachelDrunter { font-size: 0.82rem; color: var(--muted); margin-top: 3px; line-height: 1.35; }
/* In der lauten Fassung trägt die Kachel ihre eigene Farbe - die kleinen
   Zeilen erben sie, statt grau zu bleiben. */
.bsKachelNot .bsKachelWas, .bsKachelNot .bsKachelDrunter { color: inherit; opacity: 0.82; }
.bsKachelNot .bsKachelZahl { font-size: 2.4rem; margin-top: 12px; }
.bsKachelWarn .bsKachelWas { color: var(--bs-fehlt); }
/* Der Ring misst „x von y erledigt" - sonst ist er Dekoration. */
.bsRing { flex: none; width: 40px; height: 40px; transform: rotate(-90deg); }
.bsRingBahn { fill: none; stroke: var(--surface-2); stroke-width: 4; }
.bsRingWeg { fill: none; stroke-width: 4; stroke-linecap: round; }
/* Ein Punkt ist eine Kennzeichnung, keine Messung - er steht, wo es nichts
   zu zählen gibt (Termine). */
.bsPunkt { flex: none; width: 11px; height: 11px; border-radius: var(--r-voll); margin-top: 6px; }
.bsRufe { flex: none; width: 40px; height: 40px; border-radius: var(--r-voll);
  display: grid; place-items: center; border: 3px solid currentColor;
  font-family: var(--font-gross); font-weight: 800; font-size: 1.15rem; }
.bsKachelWarn .bsRufe { color: var(--bs-fehlt); }
/* v3.176.1: unter 360 px enger (Begründung oben bei .bsKachel); steht HIER, weil
   .bsRing und .bsRufe oben ihre Größe setzen und die spätere Regel gewinnt. */
@media (max-width: 359px) {
  .bsBento { gap: 8px; padding: 12px; }
  .bsKachel { padding: 12px 10px; }
  .bsKachelOben { gap: 4px; flex-wrap: wrap; }
  .bsKachelWas { flex: 0 1 auto; }
  .bsRing, .bsRufe { width: 26px; height: 26px; margin-left: auto; }
  .bsRufe { border-width: 2px; font-size: 0.82rem; }
}
/* Der Tageskopf. Das Datum ist die eine große Zeile der Seite - hier steht
   die Charakterschrift, sonst nirgends auf Heute. Vorher stand dort
   „Mi, 16.09. · KW 38"; eine mit Mittelpunkten verkettete Meta-Zeile sagt
   wenig und sieht nach Vorlage aus. */
.bsTagGruss { display: block; font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.bsTagDatum { display: block; font-family: var(--font-gross); font-size: 2.4rem;
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-top: 1px; }
.bsTagKopf { padding: 14px 16px 12px; }
.bsAuchHeute { grid-column: 1 / -1; font-size: 0.82rem; color: var(--muted); padding: 2px 2px 0; }

/* ============================================================
   WISCHFLÄCHE (v3.93.0) — die Regel steht in GESTEN.md

   Sören: „Die wischgeste wurde schon so oft angefasst. Bitte da eine
   saubere möglichkeit bauen und dokumentieren."

   `pan-y` sagt dem Browser: SENKRECHT gehört dir, WAAGERECHT gehört uns.
   Damit scrollt er sofort, ohne das Skript zu fragen - und der Reiterwisch
   braucht kein preventDefault mehr, sein Zuhörer darf passiv sein.

   Diese Klasse wird von app-gesten.js gesetzt, nicht im HTML geschrieben:
   Die Liste der Flächen wird aus REITER_ZU_FLAECHE ABGELEITET. Stünde sie
   hier als Selektorliste, wäre sie eine zweite Liste, die zur ersten passen
   muss - die Fehlerart aus LEITFADEN.md Teil 1.
   ============================================================ */
.bsWischt { touch-action: pan-y; }

/* v3.129.0 – DER SCROLLER IN DER FLÄCHE
   Sören: „egal welchen browser ich auf dem neuesten samsung nehme ich kann
   vom Chat nirgendwohin wischen. Alle anderen reiter ja aber wenn ich im
   chat bin nicht mehr"

   Chromium rechnet touch-action nur bis zum nächsten SCROLLER: An jedem
   Scroll-Container gibt es das Schwenken neu frei. #chatView trägt pan-y,
   gerollt wird aber in #messages – und dort galt wieder „quer gehört dem
   Browser". Der nahm den Zug, schickte pointercancel, und der Reiterwisch
   schnappte regelgerecht zurück (GESTEN.md Regel 7). Die anderen Reiter SIND
   ihr eigener Scroller, darum gingen sie. iOS übernimmt in einer nur
   senkrecht rollenden Liste keinen Querzug – dort fiel es nie auf.

   Die Regel (GESTEN.md Regel 10): Ein SENKRECHTER Scroller innerhalb einer
   Wischfläche trägt selbst pan-y – in seiner eigenen Regel in app.css
   (#messages, .gerichteListe), nicht hier: Ein Baustein-Selektor kommt ohne
   ID aus (bausteine-dom 1). Quer-Streifen (Chips, Filter) bekommen es nicht –
   die rollen quer und gehören dem Browser.

   Warum von Hand und keine Ableitung (LEITFADEN Teil 1): Ableiten ginge nur
   zur Laufzeit – alle ~3100 CSS-Regeln nach overflow-y durchsuchen.
   Gemessen: 18 ms am Rechner, 110–156 ms bei 4- bis 6-fach gedrosselter CPU,
   bei JEDEM Start. Den Abgleich erzwingt die Probe: wisch-beruehrung-dom.mjs
   Teil C liest aus dem CSS jede Regel, die nur senkrecht rollen lässt, sucht
   die Elemente in allen Flächen aller drei Raumtypen und wird rot, wenn
   einem pan-y fehlt. */

/* ---------- Die Punkte hinter einer Kachel (v3.94.0) ----------
   Sören: „Kachel anklicken dann anzeigen der offenen punkte dann auf punkt
   klicken springt zum richtigen reiter. Der sprung zum anderen reiter ist
   nicht das was ich wollte."

   Die Zeile IST der Knopf - nicht ein Listeneintrag mit einem Knopf darin.
   So ist die ganze Breite Trefferfläche, und es gibt nur eine Stelle, an
   der etwas passieren kann. Der Punkt links trägt denselben Ton wie die
   Kachel, aus der man kommt; er sagt „das gehört zusammen". */
.bsPunktListe { display: flex; flex-direction: column; gap: 2px; }
.bsPunktZeile { display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 52px; padding: 8px 10px; border: none; border-radius: var(--r-s);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bsPunktZeile:active { background: var(--surface-2); }
.bsPunktZeile .bsPunkt { margin-top: 0; }
.bsPunktText { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bsPunktWas { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; }
.bsPunktUnter { font-size: 0.82rem; color: var(--muted); line-height: 1.35; }
.bsPunktPfeil { flex: none; color: var(--muted); font-size: 1.15rem; }
/* Der Weg in den ganzen Reiter bleibt - aber als Fuß, nicht als einziger
   Ausgang. Ruhig gezeichnet: Er ist die Ausnahme, nicht das Ziel. */
.bsPunktAlle { display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 44px; margin-top: 12px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-s);
  background: none; color: var(--muted); font: inherit; font-size: 0.86rem;
  font-weight: 600; cursor: pointer; }
.bsPunktRest { padding: 8px 10px 0; font-size: 0.82rem; color: var(--muted); }

/* ---------- Blatt-Zeilen (v3.98.0) ----------
   Sören: „Die Menüpunkte sehen nicht gut aus. So oll und veraltet." – und
   zu den Entwürfen: „C aber noch kompakter. Die wichtigkeit und aufwand
   sind super gelöst in diesem stil wünsche ich mir die anderen Menüpunkte
   auch."

   EINE ZEILE je Einstellung: links das Wort, rechts das Bedienelement,
   daneben der Wert ausgeschrieben. Gemessen am Entwurf: 830 px vorher,
   485 px nachher.

   WARUM EIN EIGENER BEHÄLTER (.bsBlattReihen): #editModalFields ist ein
   Flex-Stapel mit gap:10px. Zwischen Zeilen, die eine Trennlinie tragen,
   wäre das eine Lücke IN der Linie. Der Behälter fängt den Abstand ab,
   ohne dass irgendwo eine ID im Baustein-Selektor stünde.

   MINDESTENS 44 px: Jede Marke, jeder Stern, jede Stufe und jeder Kopf ist
   44 px hoch. Was schmaler AUSSIEHT (der Balken einer Stufe ist 26×7 px),
   trägt die Fläche trotzdem – das <i> ist das Bild, der Knopf ist der
   Griff. */
/* v3.98.0 (zweiter Anlauf). Sören: „Geht das blatt noch etwas sanfter?
   gefällt mir sehr gut aber das erste was auffällt sind die trennbalken
   fokus soll auf der aufgabe selbst liegen."

   Er hat recht, und der Grund war ein falscher Token: Die Linie stand auf
   --border-2 (#7a8290) – das ist der RAHMEN VON FELDERN, nicht die
   Haarlinie. Dafür gibt es --border (#dcdfe6 hell, #2c2f38 dunkel).
   Sechs Linien in dieser Stärke waren das Lauteste auf dem Blatt.

   Jetzt gar keine Linien: Die Zeilen trennt der Abstand, und die
   Beschriftungsspalte links gibt ihnen den Takt. Das Lauteste auf dem
   Blatt soll die Aufgabe sein. */
/* v3.98.0 (Sören: „Abstände je Zeile zu groß"): Die Zeile war 52 px hoch
   plus 2 px Abstand – dabei ist das Bedienelement darin 44 px hoch. Die
   Luft kam also nirgendwoher. Jetzt liegt die Zeile AUF ihren 44 px und
   der Abstand entfällt; enger geht nicht, ohne die Trefferfläche zu
   verkleinern (CLAUDE.md: mindestens 44 px). Gespart: 10 px je Zeile. */
/* v3.99.0 - Sören vom Gerät: „bei termin anlegen sind die eingabeblasen zu
   groß und überschneiden sich."
   GEMESSEN: Im Blatt lagen zwischen zwei Feldzeilen 3 px, im Formular 0 -
   die Flächen stießen aneinander. Auf dem iPhone sind die nativen Datums-
   felder höher als in Chromium; dort berühren sie sich dann wirklich.
   Der Abstand gehört in den Baustein, nicht in eines der beiden Fenster:
   6 px, einmal gesetzt, gilt für jedes Blatt und jedes Formular. */
.bsBlattReihen { display: flex; flex-direction: column; gap: 6px; }
/* Derselbe Abstand im Klappbereich: Dort stehen Adresse, Link, Notiz und
   Anhänge als Zeilen nebeneinanderweg, aber nicht in .bsBlattReihen -
   gemessen stießen zwei von ihnen aneinander. Ein <details> darf
   display:flex sein; die Zusammenfassung bleibt der Schalter. */
.bsMehr { display: flex; flex-direction: column; gap: 6px; }
/* Ein Feld in einer Blattzeile holt seinen Abstand aus der ZEILE, nicht aus
   einem eigenen Rand. „:where(#editModalFields) input { margin-top: 3px }"
   (app.css) gab jedem Feld im Blatt drei Pixel extra - im Formular gibt es
   die Regel nicht. Gemessen: zwischen zwei Feldzeilen 9 px im Blatt gegen
   6 px im Formular, bei sonst gleichem Aufbau. Dieselben Zeilen sollen
   gleich aussehen, egal in welchem Fenster sie stehen. */
.bsFeld { margin: 0; }
/* 58 statt 66 px: Die breitere Leiter braucht den Platz, und das Wort
   daneben darf nicht wieder abgeschnitten werden („wöchentlich"). */
/* 68 px, nicht 58: Gemessen brauchen "Wichtigkeit" 63 px und "Erinnerung"
   64 px. Bei 58 stiessen beide an das Bedienelement daneben. */
/* v3.99.0: 68 px ist die UNTERGRENZE, nicht das Mass. Gemessen ueber alle
   sechs Blaetter (Termin, Aufgabe, Besorgung, je Anlegen und Aendern) passt
   jedes Wort in 68 px - bis auf eines: „2. Erinnerung" brach auf zwei
   Zeilen um, als einziges in der ganzen App. Mit max-content waechst die
   Spalte nur in der Zeile, die es braucht; alle anderen bleiben bei 68 px
   und nichts verrutscht. Der Wert steht rechtsbuendig, die rechte Kante
   bleibt also ueberall dieselbe.
   max-content allein genuegt: Eine Spalte, die so breit ist wie der
   laengste Text, laesst ihn nicht umbrechen. Ein white-space: nowrap
   daneben waere ein zweiter Weg zum selben Ziel - und haette als einziger
   Selektor im Baustein-Blatt einen Nachfahren-Schritt gebraucht
   (bausteine-dom 2).
   Die Regel dahinter haelt eintragen-dom 18 fest: In einer Blattzeile
   bricht kein Wort um. */
.bsBlattZeile { display: grid;
  grid-template-columns: minmax(68px, max-content) minmax(0, 1fr);
  align-items: center; gap: 8px; min-height: 44px; }
/* v3.98.0 (Sören: „Oder beschriftung zu gleich"): Auf dem Blatt standen
   DREI verschiedene Dinge im selben Grau – der Feldname links, die Namen
   an den Stufen, und der Wert rechts. Jetzt eine Rangfolge:
     Feldname  leise, klein         – er sagt nur, worum es geht
     Stufen    leise, gewählte dunkel
     WERT      dunkel und kräftig   – er ist die Antwort
   Eine Stufe kleiner ist der Feldname außerdem, weil „Wichtigkeit" bei
   0,86 rem die 66-px-Spalte bis auf den letzten Punkt füllte. */
/* v3.99.0: EINE Skala im Blatt. Das Wort ist die Frage (leicht, zurueck),
   der Wert die Antwort (0.95/600, ueberall gleich). Vorher: Wort 0.78/500,
   und die Antwort kam in DREI Groessen vor - 0.82 an der Leiter, 0.86 im
   Chip, 0.95 in der Auswahl. Gleichrangiges in ungleicher Groesse: genau
   das las sich verzerrt. */
.bsBlattWort { display: block; margin: 0; font-size: 0.82rem;
  color: var(--muted); font-weight: 400; line-height: 1.25; }
.bsBlattWert { min-width: 0; display: flex; align-items: center; gap: 8px; }
/* v3.122.0 - SÖRENS BILD VOM 22.09.2026, und es ist sein Befund zum ZWEITEN
   Mal: v3.99.0 stand hier schon "Termin ändern und anlegen wann und bis die
   felder sind verschoben und zu klein". Damals wurde das Feldpaar selbst
   repariert (flex: 1 1 auto). Der Fall, den es nicht traf: Steht ein
   HINWEIS in derselben Wertspalte ("bisher: „morgen (Mi 23.09.)“"), legt
   .bsBlattWert ihn mangels flex-wrap NEBEN das Feldpaar - und nimmt ihm die
   Breite.
   GEMESSEN bei 390 px: Wann-Paar 192 px, Bis-Paar 278 px. Dieselbe Bauart,
   86 px Unterschied; Datum und Uhrzeit wurden abgeschnitten.
   Nur Zeilen MIT Hinweis brechen um - der Rest bleibt, wie er ist.
   Der Umbruch haengt an einer EIGENEN Klasse, nicht an ".bsBlattWert >
   .feldHinweis": Regel 1 dieser Datei laesst keinen Nachfahren-Schritt zu,
   und bausteine-dom 2 hat den ersten Versuch prompt rot gemeldet. Gut so -
   sonst waere hier die erste Verschachtelung gestanden und die naechste
   haette sich darauf berufen. */
.bsBlattWert:has(> .bsUmbruch) { flex-wrap: wrap; }
.bsUmbruch { flex: 1 0 100%; margin: 0; }
.bsNebenwert { color: var(--text); font-size: 0.95rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Leiter: gleichrangige Stufen, gefüllt bis zur gewählten. */
.bsLeiter { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Feste Breite für die Stufen: sieben zu 28 px, das ist die längste Leiter
   (die Erinnerung am Termin). Kürzere Leitern lassen den Rest frei – so
   beginnt das Wort daneben in JEDER Zeile an derselben Stelle. */
/* v3.98.0: 182 px statt 196 – der kräftigere Wert daneben braucht den
   Platz, „wöchentlich" stand sonst abgeschnitten da. Sieben Stufen zu
   26 px, und sieben ist die längste Leiter (Erinnerung am Termin). */
/* v3.99.0: KEINE feste Breite mehr. 196 px waren Platz fuer sieben Stufen
   (die laengste Leiter ist die Erinnerung am Termin) - bei fuenf Sternen oder
   drei Strichen verschenkte das bis zu 56 px, und im schmaleren
   Anlege-Formular standen die Werte deshalb abgeschnitten da ("30 …",
   "nor…"). Soerens Wunsch war, dass die WERTE sauber untereinander stehen -
   das leistet die rechte Kante (.bsNebenwert margin-left:auto), nicht eine
   feste Huelle. */
.bsStufen { flex: none; display: flex; align-items: center; gap: 0; }
/* Beschriftete Stufen tragen ihren Namen selbst und brauchen mehr Platz;
   dort steht kein Wort daneben, also muss auch nichts ausgerichtet werden. */
.bsLeiterBeschriftet .bsStufen { width: auto; }
/* 32 px BREIT, 44 px hoch - und bewusst so:
   Die Leiter ist EIN Bedienelement, kein Feld aus Knöpfen. Die Stufen
   stoßen ohne Lücke aneinander (gap: 0), ein Fehlgriff landet also immer
   auf einer Nachbarstufe und nie im Leeren. Die 44-px-Regel schützt davor,
   ein Ziel zu VERFEHLEN; hier kann man es nicht. Bei sechs Stufen (der
   Rhythmus) blieben mit 38 px nur 42 px für das Wort daneben, und
   „wöchentlich" stand abgeschnitten da - gemessen am Bild. */
/* v3.98.0 (Sören: „die leiter und die sterne sollen ab der gleichen höhe
   anfangen"): flex: none ist der Punkt. Ohne es wuchsen die Stufen der
   Aufwand-Leiter auf 39 px und fuellten die Huelle aus, waehrend die
   Balken-Leitern bei 28 px blieben - der erste Stern begann dadurch 7 px
   weiter rechts als der erste Strich. Eine Stufe fester Breite darf weder
   wachsen noch schrumpfen. */
/* v3.142.0 (Befund D9 der Prüfung zu Sörens „Suche weiter nach fehlern,
   sicherheitslücken und Design Optimierungen“): Die Stufen sind 28 px
   breit, nicht 32 wie oben steht. Und „ein Fehlgriff landet immer auf einer
   Nachbarstufe“ stimmte an den ENDEN nicht: 21 px neben der ersten oder
   letzten Stufe lag schon außerhalb der Leiter - gemessen, als
   einheitlich-dom endlich auch die Breite prüfte. Erste und letzte Stufe
   reichen deshalb mit einer unsichtbaren Fläche 16 px nach außen (dasselbe
   Mittel wie der Abhak-Kreis, v3.33.0); zu sehen ist davon nichts. Flach
   wie jeder Baustein (bausteine-dom 2): Eine Stufe steht nur in .bsStufen
   (projekt.js leiterHtml), :first-child und :last-child reichen. */
.bsStufe { position: relative; }
.bsStufe:first-child::after, .bsStufe:last-child::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 16px; }
.bsStufe:first-child::after { right: 100%; }
.bsStufe:last-child::after { left: 100%; }
.bsStufe { width: 28px; flex: none; min-height: 44px; border: none; background: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
/* v3.98.0: Beschriftete Stufen. Bei der Zuständigkeit ist die Reihenfolge
   willkürlich – ohne ein Wort unter dem Balken tippt man blind auf eine
   Person. Bei Frist, Aufwand und Rhythmus sagt die Reihenfolge selbst,
   was gemeint ist; dort bleibt die Zeile schmal. */
/* v3.98.0 (Sören: „Bei zuständikeit name über leiterstrich?"): Das Wort
   steht ÜBER dem Strich. column-reverse dreht nur die Anzeige um – im
   HTML bleibt der Strich das erste Kind, also das Bedienelement, und das
   Wort seine Beschriftung. */
/* v3.99.0 (Sören: „Leiter mit zuständigkeit soll neben das Wort zuständig
   nicht darunter"): Sie steht in ihrer Zeile, also in der 278-px-Spalte.
   46 px je Stufe reichen für sechs Stufen (Offen + vier Personen +
   Wechsel). Wird der Haushalt größer, SCHRUMPFEN die Stufen bis 32 px -
   dieselbe Breite wie bei den schmalen Leitern darüber - statt dass die
   Leiter rechts hinausläuft. Das Wort kürzt sich dabei selbst
   (.bsStufenWort, text-overflow). */
.bsLeiterBeschriftet .bsStufe { width: 46px; flex: 0 1 46px; min-width: 32px;
  flex-direction: column-reverse; gap: 4px; }
.bsLeiterBeschriftet .bsStufen { max-width: 100%; }
/* v3.100.0: Eine beschriftete Leiter, deren Stufen so breit werden wie ihr
   WORT. 46 px reichen fuer „Familie" und „Offen"; „Nach Frist" (55 px) und
   „Wichtigkeit" (54 px) standen darin als „Nach …" und „Wichti…". Gemessen,
   nicht geschaetzt. Nur dort einsetzen, wo die Woerter lang sind - bei der
   Zustaendigkeit bleibt die feste Breite richtig, damit die Stufen
   untereinander stehen. */
.bsLeiterWeit .bsStufe { width: auto; flex: 0 0 auto; min-width: 44px; padding: 0 10px; }
.bsLeiterWeit .bsStufenWort { max-width: none; }
.bsLeiterWeit .bsBalkenBild { width: 100%; max-width: none; }
/* Der Strich einer beschrifteten Stufe ist so breit wie die Stufe minus
   dieselben 4 px Luft - sonst saesse er mittig in 46 px und begaenne
   11 px weiter rechts als die Striche der schmalen Leitern darueber. */
.bsLeiterBeschriftet .bsBalkenBild { width: 100%; max-width: 42px; }
.bsStufenWort { font-size: 0.7rem; line-height: 1; color: var(--muted-2); font-weight: 400;
  max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsStufe.aktiv .bsStufenWort { color: var(--text); font-weight: 700; }
/* 24 px wie der Strich: Bei 22 begaenne der Stern 1 px weiter rechts als
   der Strich darueber - dieselbe Kante heisst dieselbe Breite. */
/* 24 bleibt 24. Ein Versuch mit 22 sah ausgeglichener aus und war falsch:
   Ein 22-px-Stern beginnt in der 28-px-Stufe 1 px weiter rechts als ein
   24-px-Strich - genau der Versatz, den Soeren gemeldet hatte ("die leiter
   und die sterne sollen ab der gleichen hoehe anfangen"). blattzeilen-dom 6p
   hat ihn sofort wieder gefangen. Das Gewicht kommt vom kraeftigeren
   Strich, nicht vom kleineren Stern. */
.bsSternBild { width: 24px; height: 24px; display: block;
  background: currentColor; color: var(--border-2);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
/* Die ruhenden Stufen stehen auf --border-2 und nicht leiser. Gemessen:
   --surface-2 (#e8eaee) auf Weiß sind 1,15:1 - man sah nicht mehr, dass es
   fünf Sterne sind. --border-2 (#7a8290) trägt 4,4:1 und bleibt über der
   3:1-Schwelle für Bedienelemente. Ruhig wurde das Blatt durch die
   weggefallenen Linien und die getönten statt schwarzen Füllungen, nicht
   dadurch, dass man die Bedienelemente nicht mehr sieht. */
/* v3.98.0, dritter Anlauf. Der Strich war immer 26 px breit; beim
   Verschmälern der STUFE von 28 auf 26 stieß er an seine Nachbarn und die
   Leiter sah aus wie ein durchgehender Balken („Jetzt ist irgendwas
   komisch"). Mein erster Ausweg – den Strich auf 20 px – machte ihn
   stummelig („gefiel mir vorher besser"). Richtig ist, die STUFE wieder
   breiter zu machen und den Strich fast so zu lassen: 24 px Strich in
   28 px Stufe, also 4 px Luft. */
/* v3.99.0: 10 statt 7 px hoch. Neben einem 24x24-Stern war ein 24x7-Strich
   dieselbe Bauart in voellig anderem Gewicht - die beiden Mengen-Zeilen lasen
   sich wie zwei verschiedene Dinge. */
.bsBalkenBild { width: 24px; height: 10px; display: block; border-radius: var(--r-voll);
  background: var(--border-2); }
.bsStufe.aktiv .bsSternBild { color: var(--accent); }
/* --stufe-farbe kommt von der Stufe selbst (leiterHtml) - bei Personen
   ist das ihre Haushaltsfarbe, sonst gilt der Betonton. */
.bsStufe.aktiv .bsBalkenBild { background: var(--stufe-farbe, var(--accent)); }

/* Köpfe: ein Kreis je Person. */
.bsKoepfe { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* ---------- Das Eingabefeld der Aufgabe (v3.98.0) ----------
   Sörens Weg dahin, in seinen Worten: „Rahmen für tippfeld passt garnicht
   wieso ist das eckig. Leicht abgerundet" → „Wenn das nicht ganz
   geschlossen ist sondern nur unten und nach oben hin offen?" → „Ne keine
   dabei noch ne andere Idee? Vielleicht die ränder schräg nach aussen?
   Recherchiere dazu mal im netz."

   NACHGESCHLAGEN, nicht behauptet:
   - Das Eingabefeld ist die HAUPTAFFORDANZ eines Formulars. Sieht es nicht
     wie ein Feld aus, tippt niemand hinein. Genau daran krankten der bloße
     Unterstrich und der oben offene Rahmen.
   - Material unterscheidet GEFÜLLT und UMRANDET: gefüllt hat mehr Gewicht
     und ist für Dialoge und KURZE Formulare gedacht – also für dieses
     Blatt. Umrandet ist für lange Formulare, wo das Feld zurücktreten soll.
   - Material 3 Expressive (2026) hat als Neuerung den FORMWECHSEL beim
     Bedienen: Ein Element ändert seine Rundung, wenn man es anfasst.
   - Apples „Liquid Glass" macht Eingabefelder gläsern; NN/g hält dagegen,
     dass dort die Grenze zwischen Knopf und Feld verschwimmt. Nicht kopiert.

   NICHT GEBAUT: die schrägen Seiten. Eine schräge Kante wird GESCHNITTEN,
   nicht gezeichnet – damit fallen die runden Ecken weg, und die harten
   Spitzen ziehen den Blick nach außen statt den Text einzurahmen. Als
   einziges eckiges Element im Blatt fiel es auf, aber nicht gut.

   Sören mit einem Bild aus dem Apple-Kalender: „Dann lieber wieder kasten
   aber runder gleiche rundung wie die buttons und der innere teil ist
   farblich leicht abgegrenzt so ähnlich wie hier."

   GEMESSEN dazu: Das Feld stand auf --surface, das Blatt auf --bg – im
   dunklen Thema sechs Stufen Unterschied (#1a1c22 auf #101116), kaum zu
   sehen. Jetzt --surface-2, ein deutlicher Absatz wie in seinem Vorbild.
   Und --r-l statt --r-m; bei 46 px Feldhöhe ist das die Stadionform –
   26 px und die volle Pille sehen dort gleich aus, weil beide auf die
   halbe Höhe gekappt werden.

   KEIN FORMWECHSEL mehr. Sören: „Ne stop die änderung braucht es nicht
   also dass sich das feld ändert." Die Form bleibt, wie sie ist. Was
   bleibt, ist der Tonwechsel – ohne irgendeine Anzeige beim Tippen wüsste
   niemand, wo die Tastatur hinschreibt, und Sörens Wunsch von v3.97.0
   („Fokus auf eingabefeld fehlt") wäre wieder offen. */
.bsBlattTitelHuelle { display: block; margin: 0 0 12px; background: var(--surface-2);
  border-radius: var(--r-l); transition: background .18s ease; }
.bsBlattTitelHuelle:focus-within { background: var(--accent-bg); }
@media (prefers-reduced-motion: reduce) {
  .bsBlattTitelHuelle { transition: none; }
}
.bsBlattTitel { font-size: 1.3rem; font-weight: 600; width: 100%; box-sizing: border-box;
  border: none; border-radius: 0; background: none; color: var(--text);
  padding: 10px 16px; margin: 0; }
.bsBlattTitel:focus-visible { box-shadow: none; }

/* Was selten gebraucht wird, klappt ein. */
.bsMehrZeile { display: grid; grid-template-columns: 1fr auto; align-items: center;
  /* v3.99.0: war 0.92/600 und damit lauter als jeder Wert im Blatt - dabei
     ist es nur ein Weg zu mehr. Jetzt die Wert-Stufe. */
  min-height: 48px; color: var(--text-2); font-size: 0.95rem; font-weight: 500;
  border: none; background: none; width: 100%; padding: 0; cursor: pointer; text-align: left; }

/* Das Modell bleibt im Blatt, nur unsichtbar: Die Erinnerung führt ihren
   Wert weiter in der <select> (v2.11.0), samt Freischalten am Datum und
   festem Zeitpunkt aus dem Chat. Die Leiter daneben ist die ANSICHT darauf
   – kein zweiter Wert, der zum ersten passen muss (LEITFADEN Teil 1). */
.bsVersteckt { display: none; }
.bsAus { opacity: 0.45; }

/* ---------- Felder in einer Blatt-Zeile (v3.98.0) ----------
   Sören: „Bau schonmal die anderen Seiten in diesem Stil."

   Nicht jedes Feld lässt sich zu einer Leiter machen: Ein Titel, ein Ort,
   eine Adresse und auch ein Datum sind FREIE Eingaben. Sie bekommen
   deshalb dieselbe Fläche wie das Aufgabenfeld – getönt, gerundet, ohne
   Strich –, damit das Blatt aus einem Guss bleibt.

   16 px Schrift ist Absicht und keine freie Größe: Darunter zoomt Safari
   auf dem iPhone beim Antippen in das Feld hinein. */
.bsFeld { width: 100%; box-sizing: border-box; border: none; border-radius: var(--r-m);
  background: var(--surface-2); color: var(--text); padding: 11px 14px;
  font-size: 16px; font-family: inherit; min-height: 44px; }
.bsFeld:focus-visible { box-shadow: none; background: var(--accent-bg); }
/* Zwei Felder nebeneinander (Datum + Uhrzeit). Ohne flex:1 1 0 und
   min-width:0 nimmt jedes seine volle Breite und läuft rechts hinaus –
   im ersten Anlauf stand "03:00 PM" halb außerhalb des Blatts. */
/* v3.99.0 - SÖRENS BEFUND VOM GERÄT: „Termin ändern und anlegen wann und
   bis die felder sind verschoben und zu klein."
   GEMESSEN: Das Paar hatte flex: 0 1 auto - es richtete sich nach seinem
   INHALT. In Chromium zeichnet der Browser ein leeres Datumsfeld breit
   („TT.MM.JJJJ"), also füllte das Paar zufällig die ganze Spalte (278 von
   278 px) und in jeder Probe sah es richtig aus. Auf dem iPhone sind diese
   Felder schmal, und bei „Bis" sind beide leer - dort schrumpfte das Paar
   auf zwei Stummel, links an der Spalte klebend.
   Die Breite einer Zeile darf nicht davon abhängen, wie breit ein Browser
   ein natives Datumsfeld zeichnet. flex: 1 1 auto + width 100% macht das
   Paar so breit wie seine Spalte, egal was darin steht.
   Datum bekommt mehr Platz als die Uhrzeit: „20.09.2026" sind zehn
   Zeichen plus Kalendersymbol, „17:00" fünf plus Uhr. 3 zu 2 statt halbe
   und halbe - sonst wird das Datum abgeschnitten (im Bild vom Gerät stand
   „20.09.202").
   v3.160.8 (Termin-Blatt aus Beta freigegeben): Das Paar tragen nur noch
   die beiden Termin-Blätter - „von – bis“ im aufgeräumten Blatt
   (.tbZeitPaar, jedes Feld in seiner Hülle .tbFeld) und Beginn/Ende im
   Blatt „Neuer Termin“ (.tiPaar). Zwei Werte galten nur der Anordnung
   ohne Beta, die es nicht mehr gibt, und sind darum weg: gap 8px (beide
   Blätter setzen 6 px, app.css) und width: auto an den Feldern (im
   aufgeräumten Blatt nimmt das Feld die ganze Breite seiner Hülle, im
   Blatt „Neuer Termin“ teilt flex-basis 0 die Breite - die Breite des
   Felds zählt dort nicht). Bis v3.160.7 schlugen die Regeln des Blatts
   beide mit dem Beta-Vorsatz (html.beta-…); ohne ihn wären sie gleich
   stark, und diese Datei lädt NACH app.css. Eine Gegenregel in app.css
   (.tbFeld > .bsFeld { width }) hätte einen Baustein überstimmt
   (einheitlich-dom 5). */
.bsFeldPaar { display: flex; min-width: 0; flex: 1 1 auto; width: 100%; }
.bsFeldPaar .bsFeld { flex: 2 1 0; min-width: 0; }
.bsFeldPaar .bsFeld[type="date"] { flex: 3 1 0; }

/* ============================================================
   AUSWAHL-ZEILE UND CHIP-REIHE (v3.99.0)

   Sören: „Einen Schritt zurück. Was du gebaut hast passt alles garnicht."

   Der Befund dahinter: Eine Leiter kodiert eine MENGE. Auf Frist, Rhythmus,
   Erinnerung und Zuständigkeit kodierte sie damit eine Unwahrheit. Drei
   Bauarten statt einer, jede mit einer Bedeutung:
     Leiter      – echte Menge (Aufwand, Wichtigkeit)
     Auswahl     – eine aus einer Liste (Frist, Rhythmus, Erinnerung)
     Chip-Reihe  – Personen, ungeordnet, mit Haushaltsfarbe
   ============================================================ */

/* Die Zeile: das <select> liegt unsichtbar ÜBER allem. Antippen öffnet das
   Auswahlrad des Geräts - kein nachgebauter Aufklapper, der Tastatur und
   VoiceOver kosten würde. */
.bsWahl { position: relative; flex: 1 1 auto; min-width: 0; display: flex;
  align-items: center; gap: 6px; min-height: 44px; }
.bsWahlFeld { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; background: none; font-size: 16px;
  -webkit-appearance: none; appearance: none; cursor: pointer; }
.bsWahlWert { margin-left: auto; text-align: right; color: var(--text);
  font-size: 0.95rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* „keine", „nie", „ohne Frist" sind die Abwesenheit eines Werts, nicht
   einer. Blasser, damit ein leeres Feld sich nicht wie ein gesetztes liest. */
.bsWahlLeer { color: var(--muted); font-weight: 500; }
/* v3.141.0, Nachbesserung (Gegenprüfung, gemessen bei 320 px): Die
   Erinnerung ans Losfahren nennt die Fahrzeit („Losfahren (1 Std. 15 Min.
   Fahrt)“, 227 px). In der Zeile „2. Erinnerung“ sind bei 320 px 179 px
   frei, in „Erinnerung“ 190 px - schon „Losfahren (30 Min. Fahrt)“
   (181 px) stand dort als „… Fa…“. Kürzen hätte die Fahrzeit oder das
   Wort gekostet; in den Erinnerungs-Zeilen darf der Wert deshalb in eine
   zweite Zeile umbrechen (erinnerungWahlHuelle, app-termine.js). Zwei
   Zeilen dieser Schrift bleiben unter den 44 px der Zeile. Alle anderen
   Auswahl-Zeilen kürzen weiter mit „…“. */
.bsWahlWert.bsWahlUmbruch { white-space: normal; }
.bsWahlWinkel { flex: none; width: 12px; text-align: right; color: var(--muted-2);
  font-size: 1.05rem; line-height: 1; }
/* Das Auswahlrad kommt vom Gerät - der Rahmen muss trotzdem sichtbar sein,
   wenn jemand mit der Tastatur hierher kommt. Der Rahmen sitzt an der HÜLLE,
   nicht am Feld: Das Feld ist opacity:0, ein Rahmen daran wäre unsichtbar.
   (Erster Anlauf war „.bsWahlFeld:focus-visible + .bsWahlWert" - das hat
   bausteine-dom 2 zu Recht angehalten: ein Geschwister-Schritt ist einer zu
   viel, genau die Bauart, gegen die die Baustein-Regel steht.) */
.bsWahl:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

/* Die Werte aller Zeilen enden an DERSELBEN Kante. Die Leiter schiebt ihr
   Wort dafür nach rechts und hält mit ::after die Spalte des Winkels frei -
   sonst stünden Leiter-Werte 18 px weiter rechts als Auswahl-Werte. */
.bsLeiter { flex: 1 1 auto; }
.bsLeiter .bsNebenwert { margin-left: auto; text-align: right; }
/* 10 px, nicht 12: Die Leiter hat 8 px Abstand zum Wort, die Auswahl-Zeile
   6 px zum Winkel. Mit 12 endeten die Werte der Leitern 2 px weiter links
   als die der Auswahl-Zeilen - blattzeilen-dom 6j misst genau das. */
.bsLeiter::after { content: ""; flex: none; width: 10px; }

/* Personen. Waagerecht scrollend, weil ein Haushalt auch zehn sein können.

   HEISST BEWUSST NICHT .bsChip: Den gibt es oben schon, und er ist etwas
   anderes - eine ANZEIGE (die Datums-Pille im Raumkopf), kein Knopf. Im
   ersten Anlauf hatte ich meinen Auswahlknopf auch .bsChip genannt; meine
   Regel überschrieb dann still Farbe, Schrift und Stärke der Pille im
   Raumkopf. Gefunden hat das einheitlich-dom 4, weil plötzlich zwei
   verschiedene Rundungen unter einem Namen gemessen wurden. Ein Name, zwei
   Bedeutungen - genau LEITFADEN Teil 1. */
/* Umbrechen statt scrollen: Am rechten Rand abgeschnittene Namen ("We…")
   sehen aus wie ein Fehler, und niemand ahnt, dass dort noch etwas ist. */
.bsWahlReihe { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px; padding: 5px 0; }
.bsWahlReihe::-webkit-scrollbar { display: none; }
/* 44 px, nicht 34: Die Mindestgröße für Bedienelemente gilt auch für einen
   Chip (CLAUDE.md). Im ersten Anlauf waren es 34 - blattzeilen-dom 5 hat das
   angehalten, und zwar zu Recht. */
.bsWahlChip { flex: none; min-height: 44px; padding: 0 12px; border-radius: var(--r-voll);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  /* 500, nicht 600: Nur der GEWAEHLTE Chip ist der Wert (er bekommt 600
     unten). Die anderen sind Auswahl und duerfen leichter sein - bei 600
     brachen vier Namen selbst ueber die volle Breite um. */
  font: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bsWahlChip.aktiv { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.bsWahlPunkt { flex: none; width: 8px; height: 8px; border-radius: var(--r-kreis);
  background: var(--chip-farbe, var(--border-2)); display: block; }
.bsWahlChip.aktiv .bsWahlPunkt { background: var(--bg); }

/* Ja/nein ist weder Menge noch Liste. v3.98.0 hatte daraus eine Leiter mit
   zwei Stufen gemacht - ein Häkchen, nur schlechter. Hier ist das Kästchen
   selbst der Schalter; es führt weiter den Wert, den gebFelderUmschalten,
   terminStandJetzt und der Speicherweg lesen. */
.bsSchalterZeile { flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  gap: 10px; min-height: 44px; }
.bsSchalterZeile::after { content: ""; flex: none; width: 12px; }
/* Trefferfläche und Bild sind hier ZWEI Dinge: Das Element ist 44 px hoch
   (CLAUDE.md), der Schalter darin 31 - ein 44 px hoher Schalter wäre ein
   fetter Riegel. Deshalb ist das Element selbst durchsichtig; ::before malt
   die Bahn, ::after den Knopf, beide senkrecht mittig. */
.bsSchalter { flex: none; -webkit-appearance: none; appearance: none; margin: 0;
  width: 51px; height: 44px; min-height: 44px; background: none; border: none;
  position: relative; cursor: pointer; }
.bsSchalter::before { content: ""; position: absolute; top: 50%; left: 0;
  transform: translateY(-50%); width: 51px; height: 31px;
  border-radius: var(--r-voll); background: var(--border); transition: background .16s ease; }
.bsSchalter::after { content: ""; position: absolute; top: 50%; left: 2px;
  transform: translateY(-50%); width: 27px; height: 27px;
  border-radius: var(--r-kreis); background: var(--bg); transition: transform .16s ease; }
.bsSchalter:checked::before { background: var(--accent); }
.bsSchalter:checked::after { transform: translateY(-50%) translateX(20px); }
.bsSchalter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-voll); }
@media (prefers-reduced-motion: reduce) {
  .bsSchalter::before, .bsSchalter::after { transition: none; }
}

/* ============================================================
   BLATT-BLOCK (v3.99.0)
   Die zweite Form, die feldHtml liefert: Wort OBEN, Inhalt darunter. Für
   mehrzeiligen Text und Blöcke mit Unterfeldern - ein Textblock ist Inhalt,
   keine Einstellung; da gehört das Wort darüber, nicht daneben.
   ============================================================ */
.bsBlattBlock { display: block; margin: 6px 0 10px; min-width: 0; }
.bsBlattBlock .bsBlattWort { display: block; margin: 0 0 6px; }
/* Der Textblock sieht aus wie jedes andere Feld im Blatt (.bsFeld): gefüllte
   Fläche, keine Linie, dieselbe Rundung. */
.bsBlattBlock textarea { width: 100%; box-sizing: border-box; border: none;
  border-radius: var(--r-m); background: var(--surface-2); color: var(--text);
  padding: 11px 14px; font-size: 16px; font-family: inherit; line-height: 1.4;
  min-height: 88px; resize: vertical; }
.bsBlattBlock textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Ein Segment neben dem Wort darf umbrechen - zwei Knöpfe mit langen Wörtern
   („Hauptgericht / Beilage") liefen bei 320 px sonst über den Rand
   (einheiten-dom 22). Jeder Knopf behält seine Mindestbreite; was nicht
   passt, rutscht in die nächste Reihe. Die Knöpfe selbst tragen flex:1 und
   min-width:0 schon aus app.css - eine zweite Regel mit zwei Nachfahren-
   Schritten (.bsBlattWert .segment button) würde bausteine-dom 2 zu Recht
   anhalten. */
.bsBlattWert .segment { flex-wrap: wrap; min-width: 0; }

/* ============================================================
   v3.99.0 - NACHZÜGLER DES EINHEITLICHEN DESIGNS
   ============================================================ */

/* Der Platzhalter im großen Titelfeld war bisher ungeregelt und erbte den
   Standardgrau des Browsers - einmal heller, einmal dunkler als der Rest. */
.bsBlattTitel::placeholder { color: var(--muted); font-weight: 600; opacity: 1; }

/* Piktogramm in einer Einstellungszeile: die alte Spalte war 24 px für ein
   Emoji. Das Zeichen füllt sie mittig, in der Farbe des Nebentexts - so
   tritt es hinter den Titel zurück, wie ein Emoji es nie konnte. */
.setZeile .sym svg { display: block; margin: 0 auto; color: var(--muted); }

/* Die Bewertungs-Sterne (Essen: „Wie fanden wir es?") sahen anders aus als
   die Aufwand-Sterne im Aufgaben-Blatt - Textzeichen ★ in Orange statt der
   gezeichneten Form in Akzentblau. Eine Art, ein Aussehen (einheitlich-dom 4).
   Der Aufbau bleibt (essen.js liest .stern.an), nur die Farbe folgt. */
.stern { color: var(--border-2); }
.stern.an { color: var(--accent); }

/* In einem zweispaltigen Bereich (.blattZweier, ~150 px je Spalte) hat die
   Zeile keinen Platz für Wort UND Element nebeneinander - das Ausgaben-Blatt
   hat es gezeigt („Wer hat ausgelegt?" / „Wann?" ineinander). Dort steht das
   Wort über dem Element. Ein Nachfahren-Schritt, kein ID, kein Container-
   Gewicht auf einer tragenden Eigenschaft. */
.blattZweier .bsBlattZeile { grid-template-columns: 1fr; row-gap: 4px; }

/* v3.99.0 (orte-dom 6): Solange eine Vorschlagsliste in der Wert-Spalte
   steht, bricht sie um - sonst stuende die Liste NEBEN dem Feld statt
   darunter. Die Klasse setzt und entfernt app-gesten.js; ohne offene Liste
   verhaelt sich die Zeile wie jede andere. */
.bsBlattWert.bsWertMitListe { flex-wrap: wrap; }

/* ============================================================
   v3.130.0 – DIE INITIALE (Sören: „Ja so machen, Schritt 1 los“)
   Eine Person als Ring in ihrer Farbe mit dem ersten Buchstaben darin -
   in „Wer bist du?“ und künftig am Du-Knopf, in der Du-Zeile und im
   Website-Kopf. Sie steht HIER, einmal, weil index.html diese Datei für
   Website und App lädt.
   Dunkle Schrift auf der Fläche, die Farbe trägt nur der Ring: Weiße
   Schrift auf der Personenfarbe kam in der Kritik zum Entwurf auf
   3,55–3,91:1 (zu wenig). So hat die Initiale den Kontrast von --text auf
   --surface, in beiden Themen. --person setzt duInitialeHtml (app-du.js)
   aus personFarbe(); ohne Wert bleibt ein neutraler Ring.
   ============================================================ */
.initiale {
  flex: none; box-sizing: border-box; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--person, var(--border-2)); border-radius: var(--r-kreis);
  background: var(--surface); color: var(--text);
  font-size: 0.92rem; font-weight: 700; line-height: 1;
}

/* ============================================================
   v3.130.0, Paket B – DU UND FAMILIE EINLADEN (Sören: „Ja so machen,
   Schritt 1 los“). Nur die Stellen, die die Initiale woanders hinsetzen,
   und die zwei neuen Seiten der Einstellungen. Alles aus den Tokens
   (leiter.css, app.css), keine neue Schriftstufe.
   ============================================================ */
/* Der Du-Knopf im Kopf der Raumliste: dieselbe Trefffläche wie seine
   Nachbarn (.raumKopfKnoepfe .keyBtn, 44 x 44), die Initiale mittig. */
.raumKopfKnoepfe .keyBtn.duKnopf { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.duKnopf .initiale { width: 34px; height: 34px; }
/* Die Du-Zeile der Einstellungen: die Initiale in der Symbolspalte, so
   breit wie jedes andere Zeichen dort (24 px) - die Zeilen stehen bündig. */
.setZeile .sym .initiale { width: 24px; height: 24px; font-size: 0.78rem; }
/* Die Kopfkarte der Seite „Du & dieses Gerät“. */
.duKopfKarte { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); }
.initiale.gross { width: 56px; height: 56px; border-width: 3px; font-size: 1.5rem; }
.duKopfText { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.duKopfName { font-size: 1.15rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.duKopfGeraet { font-size: 0.82rem; color: var(--muted); }
/* Sätze in Karten und Gruppen: Fließtext, bricht auch lange Adressen um. */
.duSatz { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.duAbsatz { margin-bottom: 8px; }
.duNameFeld { margin-top: 8px; }
.duNachsatz { margin-top: 8px; }
/* Eine Zeile, die gerade nicht geht (ohne Netz): Sie bleibt stehen und
   sagt, warum - der Titel wird leise statt rot oder schwarz. */
.setZeile[aria-disabled="true"] { cursor: default; }
.setZeile[aria-disabled="true"] .tt { color: var(--muted); }
/* „Familie einladen“ */
.einladenFeld { width: 100%; }
.einladenMeldung { margin: 6px 0 0; font-size: 0.86rem; line-height: 1.4; color: var(--danger); }
.einladenSchon { margin-top: 10px; }
.einladenWeiter { margin-top: 14px; }

/* ============================================================
   v3.130.0, Paket C – DIE WEBSITE AUS DER APP, DAS IPHONE (Sören: „Ja so
   machen, Schritt 1 los“). Nur Tokens, keine neue Schriftstufe.
   ============================================================ */
/* „chat-o-Website & Ausprobieren ›“ unter der Raumliste - leise wie
   „Archivierte Räume anzeigen“ darüber, mit voller Trefffläche. Steht
   außerhalb von #raumNeu, damit ihn auch sieht, wer ein eigenes Passwort
   hat. */
#raumView .websiteLink {
  display: block; width: auto; min-height: 44px; margin: 8px auto 0; padding: 8px 12px;
  background: none; border: 0; box-shadow: none; color: var(--muted); font-size: 0.82rem; font-weight: 500; cursor: pointer;
}
#raumView .websiteLink:hover { color: var(--text); }
/* Nachbesserung v3.130.0 (Gegenprüfung zu Paket C): Der Link und die zwei
   Knöpfe der iPhone-Karte zeigten mit der Tab-Taste keinen Fokus - weder
   hell noch dunkel. `box-shadow: none` hier (1,1,x) schlug den Ring der App
   (`button:focus-visible`, app.css), und `outline` ist dort überall aus.
   Gemessen: jedes andere Bedienelement der Raumliste zeigt ihn. Der Ring
   steht deshalb ausdrücklich daneben - die Ruheregel plus :focus-visible,
   also schwerer als sie. */
#raumView .websiteLink:focus-visible,
#raumView .iphoneKarteKnoepfe button:focus-visible { box-shadow: var(--ring); }
/* Nachbesserung v3.130.0: Liegt #setup über einer Anmeldung (die Website
   über den Link, „Wer bist du?“), ist in #app nichts außer #setup zu sehen
   - sonst malten die klebenden Bänder in #app (z-index 60, etwa „Testumgebung
   (Staging)“) über den Kopf der Website (#setup: z-index 20). Abgeleitet:
   alle Geschwister, ohne sie zu kennen (setupDecktAbgleichen, app-du.js).
   `visibility` statt `display`: Lage und Scrollstand der App darunter
   bleiben, wie sie sind. */
#app.setupDeckt > :not(#setup) { visibility: hidden; }
/* Die iPhone-Karte über der Raumliste (nur in Safari, iphoneKarteZeichnen). */
#raumView .iphoneKarte {
  margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--accent-border); border-radius: var(--r-m);
  background: var(--accent-bg); color: var(--text-2);
}
#raumView .iphoneKarte[hidden] { display: none; }
.iphoneKarteText { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.45; }
.iphoneKarteText b { color: var(--text); }
.iphoneKarteKnoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
#raumView .iphoneKarteKnoepfe button {
  width: auto; min-height: 44px; margin: 0; padding: 10px 18px; border-radius: var(--r-voll);
  font-size: 0.92rem; font-weight: 600; box-shadow: none;
}
#raumView .iphoneKarteSo { background: var(--primary); color: var(--on-primary); border: 0; }
#raumView .iphoneKarteSpaeter { background: transparent; color: var(--text); border: 1px solid var(--border-2); }
/* „So geht’s“ öffnet das Blatt „📱 Dieses Gerät“ (geraetHilfeOeffnen). Die
   Mitteilungs-Anleitung darin beginnt mit einer fetten Überschrift, die im
   Mitteilungs-Fenster als eigene Zeile steht (.pushStatus > b) - hier klebte
   sie am Satz („…installierenAuf dem iPhone“, gemessen am Bild der Karte).
   Dieselbe Regel für dieses Blatt. */
.geraetHilfe > b { display: block; margin-bottom: 4px; }
/* v3.166.0 (Beta „raum-einladen“, app-einladen.js): „Nur zu Gast hier“
   ersetzt den Website-Link - die Karte trägt die Gestalt der iPhone-Karte
   (Klassen iphoneKarte*), steht aber UNTER der Raumliste. */
html.beta-raum-einladen #raumView .websiteLink[hidden] { display: none; }
html.beta-raum-einladen #raumView .gastHinweis { margin: 12px 0 0; }
html.beta-raum-einladen #raumView .gastHinweis[hidden] { display: none; }
html.beta-raum-einladen .einladenTarif { margin: 10px 0 0; }
html.beta-raum-einladen #einladenTarifWeg[hidden] { display: none; }
html.beta-raum-einladen #einladenTarifWeg { margin-top: 10px; }
/* v3.167.0 (Beta „raum-einladen“, app-einladen.js): „Wie lange?“ beim
   Einladen und im Blatt „Verlängern“ - die Segment-Knöpfe (≥ 44 px, app.css)
   brechen bei 320 px um; darunter das Datumsfeld und der Satz zur Frist.
   Die Gästeliste unter ⚙️ → Dieser Raum: Abgelaufene grau. */
html.beta-raum-einladen .einladenDauer { margin-top: 6px; }
html.beta-raum-einladen .einladenDatum { margin-top: 10px; }
html.beta-raum-einladen .einladenDatum[hidden] { display: none; }
html.beta-raum-einladen .einladenDauerSatz { margin: 8px 0 0; }
html.beta-raum-einladen .einladenDauerSatz:empty { display: none; }
html.beta-raum-einladen .raumGastZeile.abgelaufen .tt,
html.beta-raum-einladen .raumGastZeile.abgelaufen .ut { color: var(--muted); }
html.beta-raum-einladen #raumGastMeldung[hidden] { display: none; }
/* v3.168.1 (Beta „raum-einladen“, app-einladen.js personenRaumGaesteHtml):
   unter „Personen im Haushalt“ je Raum eine Zeile „Zu Gast in ‚X‘: …“ - die
   Gestalt der Personenzeile (.leuteAuf, ≥ 48 px), der Satz in der Größe
   der Einstellungszeilen darin. */
html.beta-raum-einladen .leuteGastRaeume { margin-top: 6px; }
html.beta-raum-einladen .leuteGastRaum { width: 100%; }
html.beta-raum-einladen .leuteGastSatz { font-size: 0.86rem; color: var(--text-2); }
html.beta-raum-einladen .leuteGastRaumSatz { margin: 6px 0 0; }
/* v3.167.1: Der Einladen-Knopf im Raumkopf (app-einladen.js
   raumEinladenKopfZeichnen). .raumKopfRechts ist 88 px breit (zwei Knöpfe,
   app.css) - mit dem dritten 132. Unter 360 px steht er nicht: Neben
   Zurück, Beta-Zeichen, Lupe und Regler bliebe dem Raumnamen zu wenig;
   der Knopf in Einstellungen → Dieser Raum bleibt. Ohne Beta gibt es den
   Knopf nicht (er entsteht nur mit Beta) - die Regel hängt trotzdem an der
   Weiche. */
html.beta-raum-einladen #raumKopf .raumKopfRechts.mitEinladen { flex-basis: 132px; }
html.beta-raum-einladen #raumKopf .raumEinladenKopf { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
/* Gemessen bei 390 px: Mit dem dritten Knopf blieben „Deppermann“ 80 px
   („Depperm…“). Wie beim Wetter (app.css, wtMitKopf) steht auf dem Telefon
   dann nur das Zeichen der Beta-Pille - das Wort steht im aria-label, der
   Raumname hat Vorrang.
   3.168.0: flach und ohne ID wie .bsKopfEins.wtMitKopf (bausteine-dom 1/2 –
   ein Baustein-Selektor wiegt eine Klasse, höchstens ein Nachfahren-
   Schritt). Die Weiche trägt .mitEinladen selbst: app-einladen.js setzt
   die Klasse nur, wenn raumEinladenAn() (Beta) gilt, und nimmt sie beim
   Ausschalten wieder weg. */
@media (max-width: 479px) {
  .bsKopfEins:has(.mitEinladen) .betaMarkeWort { display: none; }
  .bsKopfEins:has(.mitEinladen) .betaMarkePille { padding: 0 6px; }
}
@media (max-width: 359px) {
  html.beta-raum-einladen #raumKopf .raumKopfRechts.mitEinladen { flex-basis: 88px; }
  html.beta-raum-einladen #raumKopf .raumEinladenKopf { display: none; }
}
/* v3.167.0 (app-fremd.js, für alle): ein Raum eines anderen Haushalts in
   der Raumliste - Name und Marke „von … · bis …“ in einer Zeile; reicht der
   Platz nicht, wird ZUERST die Marke gekürzt, dann der Name. */
.raumName .raumFremdName { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
/* Der Name schrumpft NICHT mit (flex-shrink 0): Schon ein Bruchteil eines
   Pixels Schrumpfen setzte gemessen ein „…“ an einen Namen, der passte. Er
   endet erst, wenn er allein zu lang ist (max-width lässt der Marke einen
   Rest von 28 px für „v…“). */
.raumFremdName .raumFremdText { flex: 0 0 auto; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raumFremdName .raumFremdMarke { display: block; flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* v3.170.0 (Beta „bon-abrechnen“, app-bon.js): Kassenbon abrechnen.
   Sören (13.10.2026): „… hinterher kann man den Kassenbon abfotografieren
   und die Summen werden automatisch zugeteilt.“ Der Einstieg steht über der
   Liste der Besorgungen und unter Ausgaben; die Prüfkarte im Blatt hat oben
   fest den Abgleich (sticky im scrollenden #editModalFields). Ohne Beta
   entsteht keins dieser Elemente - die Regeln hängen trotzdem an der Weiche. */
#bonEinstiegListe[hidden] { display: none; }
html.beta-bon-abrechnen .bonEinstieg { margin: 0 0 12px; }
html.beta-bon-abrechnen .bonKnopf {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border-2);
  border-radius: var(--radius); background: var(--bg); color: var(--text);
  font-size: 0.92rem; font-weight: 700; font-family: inherit; cursor: pointer;
}
html.beta-bon-abrechnen .bonKnopf:disabled { color: var(--muted); border-color: var(--border); cursor: default; }
html.beta-bon-abrechnen .bonNetzSatz { margin-top: 4px; font-size: 0.78rem; color: var(--muted); }
html.beta-bon-abrechnen .bonLesen { display: flex; align-items: center; gap: 10px; min-height: 88px; justify-content: center; font-size: 0.92rem; color: var(--text-2); }
html.beta-bon-abrechnen .bonDreh { width: 10px; height: 10px; border-radius: var(--radius); background: var(--accent); animation: kiPuls 1.2s infinite; }
@media (prefers-reduced-motion: reduce) { html.beta-bon-abrechnen .bonDreh { animation: none; } }
html.beta-bon-abrechnen .bonFehler { font-size: 0.92rem; color: var(--text); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-s); padding: 10px 12px; line-height: 1.45; }
html.beta-bon-abrechnen .bonFehlerWege { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
html.beta-bon-abrechnen .bonKarte { display: flex; flex-direction: column; gap: 10px; }
html.beta-bon-abrechnen .bonAbgleich {
  position: sticky; top: -2px; z-index: 1; margin: -2px -2px 0; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s);
  font-size: 0.92rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
}
html.beta-bon-abrechnen .bonAbgleich.passt { color: var(--success-text); border-color: var(--success-border); background: var(--success-bg); }
html.beta-bon-abrechnen .bonAbgleich.zuViel { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }
html.beta-bon-abrechnen .bonLaden { font-size: 0.78rem; color: var(--muted); }
html.beta-bon-abrechnen .bonSumme { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--warn-bg); border: 1px solid var(--warn-border); }
html.beta-bon-abrechnen .bonSummeSatz { font-size: 0.86rem; font-weight: 600; color: var(--warn-text); }
html.beta-bon-abrechnen .bonSummeFeld { min-height: 44px; font-size: 16px; }
html.beta-bon-abrechnen .bonHinweis { font-size: 0.78rem; color: var(--text-3); line-height: 1.45; }
html.beta-bon-abrechnen .bonSumme .bonHinweis { color: var(--warn-text); }
html.beta-bon-abrechnen .bonZahler { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.92rem; }
html.beta-bon-abrechnen .bonZahlerWort { flex: none; font-size: 0.86rem; color: var(--text-2); font-weight: 600; }
html.beta-bon-abrechnen .bonAbschnitt { margin-top: 4px; font-size: 0.78rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
html.beta-bon-abrechnen .bonZeile { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--surface); border: 1px solid transparent; }
html.beta-bon-abrechnen .bonZeile.offen { border-color: var(--warn-border); background: var(--warn-bg); }
html.beta-bon-abrechnen .bonZeileKopf { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
html.beta-bon-abrechnen .bonText { flex: 1; min-width: 0; font-size: 0.92rem; color: var(--text); overflow-wrap: anywhere; }
html.beta-bon-abrechnen .bonArt { font-size: 0.78rem; font-weight: 700; color: var(--text-3); }
html.beta-bon-abrechnen .bonBetrag { flex: none; font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
html.beta-bon-abrechnen .bonEigen { align-items: center; gap: 6px; }
html.beta-bon-abrechnen .bonEigenText { flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 16px; margin: 0; }
html.beta-bon-abrechnen .bonEigenBetrag { flex: 0 0 84px; width: 84px; min-height: 44px; font-size: 16px; margin: 0; text-align: right; }
html.beta-bon-abrechnen .bonWeg { flex: none; width: 44px; min-height: 44px; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--muted-2); font-size: 1rem; cursor: pointer; }
html.beta-bon-abrechnen .bonZweifel { font-size: 0.78rem; font-weight: 600; color: var(--warn-text); }
html.beta-bon-abrechnen .bonWahlZeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.beta-bon-abrechnen .bonZuZeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.beta-bon-abrechnen .bonZuWort { font-size: 0.82rem; color: var(--text-2); }
html.beta-bon-abrechnen .bonFuerWen { font-size: 0.78rem; font-weight: 700; color: var(--warn-text); }
html.beta-bon-abrechnen .bonWahl {
  flex: 1 1 160px; min-width: 0; max-width: 100%; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--border-2); border-radius: var(--radius-s); background: var(--bg); color: var(--text);
  font-size: 16px; font-family: inherit; margin: 0;
}
html.beta-bon-abrechnen .bonWahl.bonOffen { color: var(--text-2); }
html.beta-bon-abrechnen .bonAnhaengen { flex: none; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-2); border-radius: var(--radius-s); background: var(--bg); color: var(--text-2); font-size: 0.82rem; font-weight: 600; font-family: inherit; cursor: pointer; }
html.beta-bon-abrechnen .bonDazu { font-weight: 600; }
html.beta-bon-abrechnen .bonAbhaken { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.86rem; color: var(--text-2); cursor: pointer; }
html.beta-bon-abrechnen .bonAbhaken input { flex: none; width: 22px; height: 22px; min-height: 0; margin: 0; }
html.beta-bon-abrechnen .bonMeldung { font-size: 0.86rem; color: var(--danger); }
html.beta-bon-abrechnen .bonMeldung:empty { display: none; }
/* Der Speichern-Knopf des Blatts sagt, was noch fehlt - gesperrt muss er
   auch so aussehen (app.css kennt für .saveBtn keinen gesperrten Zustand). */
html.beta-bon-abrechnen .modalBox:has(.bonKarte) .saveBtn:disabled { background: var(--surface-2); color: var(--text-2); cursor: default; }

/* ---- 24.10.2026 (Beta „termin-auswahl“, app-termin-auswahl.js): die Auswahlkarte bei mehreren Terminen ----
   Sören: „… eine auswahltabelle und man kann anklicken welche termine man nimmt? Bzw kann man auch alle
   anklicken. Also statt rückfrage kann man antippen.“ Das Panel steht in der blauen KI-Blase auf --bg
   (eigene Fläche, Schrift --text); nur Tokens, kein freier Schatten. Jede Tippfläche ist mindestens 44 px. */
html.beta-termin-auswahl .taBox { margin: 10px 0 2px; }
html.beta-termin-auswahl .taPanel { background: var(--bg); color: var(--text); border-radius: var(--radius); overflow: hidden; }
html.beta-termin-auswahl .taPanel button, html.beta-termin-auswahl .taPanel input { font-family: inherit; }
html.beta-termin-auswahl .taKopf { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--border); }
html.beta-termin-auswahl .taAlle { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 0 0 10px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
html.beta-termin-auswahl .taAlleText { font-size: 0.92rem; font-weight: 700; }
html.beta-termin-auswahl .taZahl { flex: none; font-size: 0.82rem; color: var(--muted); padding: 0 12px 0 6px; white-space: nowrap; }
html.beta-termin-auswahl .taKasten, html.beta-termin-auswahl .taHaken span { flex: none; width: 24px; height: 24px; box-sizing: border-box; border-radius: var(--r-xs); border: 2px solid var(--border-2);
  display: flex; align-items: center; justify-content: center; font-size: 0.92rem; line-height: 1; color: var(--on-primary); }
html.beta-termin-auswahl .taAlle[aria-checked="true"] .taKasten, html.beta-termin-auswahl .taAlle[aria-checked="mixed"] .taKasten,
html.beta-termin-auswahl .taHaken[aria-checked="true"] span { background: var(--primary); border-color: var(--primary); }
html.beta-termin-auswahl .taZeile { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--border); }
html.beta-termin-auswahl .taZeile.aus .taWann b { color: var(--text-3); }
html.beta-termin-auswahl .taHaken { flex: none; width: 44px; min-height: 44px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
html.beta-termin-auswahl .taInh { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
html.beta-termin-auswahl .taWann { font-size: 0.92rem; line-height: 1.3; }
html.beta-termin-auswahl .taWann b { font-weight: 700; }
html.beta-termin-auswahl .taWann i { font-style: normal; font-weight: 600; color: var(--text-2); margin-left: 6px; }
html.beta-termin-auswahl .taNeben, html.beta-termin-auswahl .taSerie { font-size: 0.82rem; line-height: 1.35; overflow-wrap: anywhere; }
html.beta-termin-auswahl .taNeben { color: var(--muted); }
html.beta-termin-auswahl .taSerie { color: var(--accent); font-weight: 600; }
html.beta-termin-auswahl .taSerie.ohne, html.beta-termin-auswahl .taGrund { color: var(--warn-text); }
html.beta-termin-auswahl .taGrund { font-style: normal; font-weight: 700; }
html.beta-termin-auswahl .taEdit { flex: none; width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--icon-muted); font-size: 1.05rem; display: flex; align-items: center; justify-content: center; cursor: pointer; }
html.beta-termin-auswahl .taZeile.offen .taEdit { color: var(--text); font-weight: 700; }
html.beta-termin-auswahl .taBlatt { background: var(--surface); padding: 6px 12px 12px; border-bottom: 1px solid var(--border); }
html.beta-termin-auswahl .taBlatt label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); margin: 8px 0 2px; }
html.beta-termin-auswahl .taFeld { display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--border-2); border-radius: var(--radius-s); background: var(--bg); color: var(--text); font-size: 16px; }
html.beta-termin-auswahl .taFeld[type="time"] { padding: 0 8px; }
html.beta-termin-auswahl .taFeld.fehler { border-color: var(--danger); }
html.beta-termin-auswahl .taZwReihe { display: flex; gap: 8px; }
html.beta-termin-auswahl .taZw { flex: 1; min-width: 0; }
html.beta-termin-auswahl .taFehler { font-size: 0.82rem; font-weight: 600; color: var(--danger); margin-top: 4px; line-height: 1.35; }
html.beta-termin-auswahl .taFehler.allg { margin: 8px 2px 0; padding: 8px 10px; background: var(--bg); border-radius: var(--radius-s); }
html.beta-termin-auswahl .taFertig { margin-top: 10px; min-height: 44px; padding: 8px 18px; border: 1px solid var(--border-2); border-radius: var(--r-voll); background: var(--bg); color: var(--text); font-size: 0.86rem; font-weight: 600; cursor: pointer; }
html.beta-termin-auswahl .taAktion { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
html.beta-termin-auswahl .taGo { flex: 1 1 140px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--success); border-radius: var(--r-voll); background: var(--success); color: var(--auf-farbe); font-size: 0.86rem; font-weight: 700; cursor: pointer; }
html.beta-termin-auswahl .taGo:disabled { opacity: 0.5; cursor: default; }
html.beta-termin-auswahl .taNein { min-height: 44px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-voll); background: var(--bg); color: var(--text-3); font-size: 0.86rem; font-weight: 500; cursor: pointer; }
html.beta-termin-auswahl .taNein:disabled { opacity: 0.5; cursor: default; }
html.beta-termin-auswahl .taPanel button:focus-visible, html.beta-termin-auswahl .taAktion button:focus-visible, html.beta-termin-auswahl .taFeld:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html.beta-termin-auswahl .taAktion button:focus-visible { outline-color: var(--stets-weiss); outline-offset: 2px; }

/* ============================================================
   Beta „kopf-einfarbig“ (25.10.2026)

   Sören (nach drei Entwürfen, „C finde ich gut“; danach „Der header ist
   immer noch 2 farbig“): Der obere Bereich der App ist EINFARBIG und trägt
   die Farbe der iPhone-Systemleiste - gemessen am Bildschirmfoto: reines
   Schwarz, in BEIDEN Themen (--kopf-system). Die Seite beginnt unter der
   Leiste und kann nicht darunter zeichnen; die Naht verschwindet, wenn der
   Kopf dieselbe Farbe hat. Heute liegt über dem
   Raumkopf ein Streifen in der Seitenfarbe (--bg: Platz der Statusleiste +
   24 px + ggf. Demo-Band), und die Raumliste hat gar keine Kopfleiste.

   Mit html.beta-kopf-einfarbig (nur unter 900 px - am Rechner gibt es keine
   Statusleiste, dort stehen Liste und Raum nebeneinander):
     Chat    #app::before (die Kante aus app.css, die die gleitenden Leisten
             zudeckt) bekommt --kopf-system und mindestens die Höhe des Polsters
             von #app: Fläche über dem Kopf und Kopf sind eine Farbe.
     Liste   dieselbe Fläche über der Raumliste (nur solange #raumView
             sichtbar ist - :has), dazu die Kopfzeile „Räume“ in --kopf-system,
             randlos; Abstände unverändert (probe kopf-einfarbig-dom M2).
   Hell: Der Kopf ist dort schwarz, seine Inhalte bekommen die Tokens des
   dunklen Themas (app.css und oben: dieselbe Liste, html.kopf-schmal setzt
   kopf-system.js unter 900 px). Der Raum unter dem Kopf, die Reiterleiste
   und die Seite bleiben hell.
   Keine Zuhörer am Dokument, kein touch-action, kein neuer Wert außer
   --kopf-system. status-bar-style, theme-color und Startbilder bleiben - die
   Systemleiste selbst zeichnet iOS.
   ============================================================ */
@media (max-width: 899px) {
  html.beta-kopf-einfarbig #app {
    --kf-zone: calc(env(safe-area-inset-top, 0px) + 24px + var(--demoband-versatz, 0px));
    --kf-rand: 12px;
  }
  html.beta-kopf-einfarbig body.inRaum #app::before {
    background: var(--kopf-system);
    height: max(var(--kf-zone), var(--leisten-oben, 0px));
  }
  html.beta-kopf-einfarbig #app:has(> #raumView:not([style*="display:none"]):not([style*="display: none"]))::before {
    background: var(--kopf-system);
    height: var(--kf-zone);
  }
  html.beta-kopf-einfarbig #raumKopf.offen { background: var(--kopf-system); }
  /* 26.10.2026 (Sören: „Beim wischen zum chat erscheint blaues feld oben in
     der ecke“): Die Leisten liegen über der Fläche (app.css „leisten-weg“),
     der Verlauf rollt unter ihnen durch - und hinter den zwei runden Ecken
     der Reiterleiste (.bsReiter, 18 px) stand, was gerade darunter lag (ein
     blauer Streifen aus dem Chat). Mit dieser Beta füllt die Farbe des Kopfes
     (--kopf-system) die Ecken: ein Rand (outline folgt der Rundung), den
     clip-path auf die Leiste selbst zuschneidet - übrig bleibt nur, was in
     den Ecken fehlt. Ohne Beta bleibt alles wie vorher (probe reiterecken-dom). */
  html.beta-kopf-einfarbig .bsReiter {
    outline: var(--bs-r-schub) solid var(--kopf-system); outline-offset: 0; clip-path: inset(0); }
  html.beta-kopf-einfarbig #raumView { padding-top: 0; }
  html.beta-kopf-einfarbig .raumKopfzeile {
    background: var(--kopf-system);
    margin: 0 calc(-1 * var(--kf-rand));
    padding: 10px calc(var(--kf-rand) + 2px);
  }
  /* Hell: die Schrift folgt den Tokens des dunklen Themas (sonst stünde
     dunkle Schrift auf Schwarz). */
  html.kopf-schmal.beta-kopf-einfarbig:not([data-thema="dunkel"]) #raumKopf,
  html.kopf-schmal.beta-kopf-einfarbig:not([data-thema="dunkel"]) .raumKopfzeile { color: var(--text); }
}
@media (min-width: 600px) and (max-width: 899px) {
  html.beta-kopf-einfarbig #app { --kf-rand: 16px; }
}

/* ============================================================
   26.10.2026 (Beta „umfrage-termin“): TERMINFINDUNG PER LINK - die Seite der
   Familie in der App (public/app-umfrage.js).
   Sören (26.10.2026): „Terminfindung per Link (Umfrage wie beim
   Einladungslink), aus JEDEM Raum möglich“.
   Alles hängt an html.beta-umfrage-termin; ohne Beta sieht die App aus wie
   vorher (der Knopf bleibt display:none, die Karten sind verborgen).
   Nur Tokens der App: Schrift aus der Skala, Ecken --r-*, Farben --accent,
   --success, --warn, --danger - Farbe ist nur Zugabe, jede Antwort trägt
   Zeichen UND Wort. Alles, was man antippt, ist mindestens 44 px hoch.
   ============================================================ */
html.beta-umfrage-termin .umfrageKnopf { display: none; }html.beta-umfrage-termin .umfrageKnopf:not([hidden]) { flex: 1 0 100%; order: 10; min-height: 48px; padding: 11px 14px; border: 0; border-radius: var(--r-m); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; font-size: 0.95rem; text-align: center; cursor: pointer; display: block; }html.beta-umfrage-termin .terminKopf { flex-wrap: wrap; }
html.beta-umfrage-termin .terminKopf .anlegenToggle { flex: 1 1 0; width: auto; }html.beta-umfrage-termin .umKarten { display: grid; gap: 8px; margin: 0 0 12px; }html.beta-umfrage-termin .umKarte { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }html.beta-umfrage-termin .umKarteZeichen { flex: none; display: inline-flex; color: var(--muted); }html.beta-umfrage-termin .umKarteText { flex: 1 1 auto; min-width: 0; display: block; }html.beta-umfrage-termin .umKarteText > span { display: block; }html.beta-umfrage-termin .umKarteTitel { font-weight: 700; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }html.beta-umfrage-termin .umKarteSatz { font-size: 0.86rem; color: var(--muted); }html.beta-umfrage-termin .umKarteMarke { flex: none; max-width: 7.5rem; padding: 2px 10px; border-radius: var(--r-voll); border: 1px solid var(--border-2); font-size: 0.86rem; font-weight: 700; text-align: center; color: var(--text-2); }html.beta-umfrage-termin .umKarteMarke.dran { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent-strong); }html.beta-umfrage-termin .umBlatt { padding-bottom: 8px; }html.beta-umfrage-termin .umSchritt { margin: 0 0 12px; font-size: 0.86rem; font-weight: 700; color: var(--muted); }html.beta-umfrage-termin .umFeldBlock { margin: 0 0 14px; }html.beta-umfrage-termin .umWort { display: block; margin: 0 0 6px; font-size: 0.92rem; font-weight: 700; color: var(--text-2); }html.beta-umfrage-termin .umModusKarten { display: grid; gap: 8px; }html.beta-umfrage-termin .umModusKarte { display: block; width: 100%; min-height: 64px; padding: 12px; border: 2px solid var(--border); border-radius: var(--r-m); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }html.beta-umfrage-termin .umModusKarte.aktiv { border-color: var(--accent); background: var(--accent-bg); }html.beta-umfrage-termin .umModusTitel { display: block; font-weight: 700; font-size: 1rem; }html.beta-umfrage-termin .umModusText { display: block; margin-top: 2px; font-size: 0.86rem; color: var(--muted); }html.beta-umfrage-termin .umKalender { border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); padding: 6px 4px 8px; margin: 0 0 14px; }html.beta-umfrage-termin .umMonatKopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }html.beta-umfrage-termin .umMonatName { font-weight: 700; font-size: 1rem; }html.beta-umfrage-termin .umMonatKnopf { flex: none; width: 44px; min-height: 44px; border: 0; border-radius: var(--r-s); background: none; color: var(--text); font: inherit; font-size: 1.15rem; cursor: pointer; }html.beta-umfrage-termin .umWochenTage, html.beta-umfrage-termin .umTage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }html.beta-umfrage-termin .umWochenTage span { text-align: center; font-size: 0.86rem; color: var(--muted); padding: 2px 0; }html.beta-umfrage-termin .umTag { min-height: 44px; min-width: 0; padding: 0; margin: 0; border: 1px solid transparent; border-radius: var(--r-s); background: none; color: var(--text); font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }html.beta-umfrage-termin .umTag:disabled { opacity: 0.35; cursor: default; }html.beta-umfrage-termin .umTag.hat { border-color: var(--border-2); }html.beta-umfrage-termin .umTag[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }html.beta-umfrage-termin .umTagLeer { min-height: 44px; }html.beta-umfrage-termin .umUhrChips { padding: 0; }html.beta-umfrage-termin .umEigeneUhr { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }html.beta-umfrage-termin .umEigeneUhr label { font-size: 0.92rem; color: var(--muted); }html.beta-umfrage-termin .umEigeneUhr input { max-width: 11rem; }html.beta-umfrage-termin .umChips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }html.beta-umfrage-termin .umChip { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-2); border-radius: var(--r-voll); background: var(--surface); color: var(--text); font: inherit; font-size: 0.95rem; cursor: pointer; }html.beta-umfrage-termin .umZusammen { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-m); background: var(--surface); }html.beta-umfrage-termin .umZusammen p { margin: 0 0 2px; font-size: 1rem; overflow-wrap: anywhere; }html.beta-umfrage-termin .umNameHinweis { margin: 0 0 12px; }html.beta-umfrage-termin .umFertig { margin: 0 0 6px; font-weight: 700; font-size: 1.05rem; }html.beta-umfrage-termin .umMeldung { margin: 10px 0 0; font-size: 1rem; }html.beta-umfrage-termin .umMeldung.fehler { color: var(--danger); }html.beta-umfrage-termin .umMeldung.gut { color: var(--success-text); }html.beta-umfrage-termin .umKopfBlock { margin: 0 0 8px; }html.beta-umfrage-termin .umTitel { margin: 0; font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; }html.beta-umfrage-termin .umUnter { margin: 2px 0 0; font-size: 0.92rem; color: var(--muted); }html.beta-umfrage-termin .umStand { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-m); border: 1px solid var(--border); background: var(--surface); font-size: 1rem; }html.beta-umfrage-termin .umStand.gut { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); font-weight: 600; }html.beta-umfrage-termin .umStand.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); font-weight: 600; }html.beta-umfrage-termin .umStand.tipp { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent-strong); }html.beta-umfrage-termin .umAbschnitt { margin: 18px 0 0; }html.beta-umfrage-termin .umAbschnittTitel { margin: 0 0 6px; font-size: 1rem; }html.beta-umfrage-termin .umTermine { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }html.beta-umfrage-termin .umTerminTaste { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }html.beta-umfrage-termin .umTerminText { flex: 1 1 auto; min-width: 0; display: block; }html.beta-umfrage-termin .umTerminText > span { display: block; }html.beta-umfrage-termin .umTerminTag { font-weight: 700; font-size: 1rem; line-height: 1.3; }html.beta-umfrage-termin .umTerminZeit, html.beta-umfrage-termin .umTerminVon { font-size: 0.86rem; color: var(--muted); }html.beta-umfrage-termin .umPille { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 7.5rem; min-height: 44px; padding: 4px 12px; border-radius: var(--r-voll); border: 2px solid var(--border-2); background: var(--bg); font-size: 0.95rem; font-weight: 700; }html.beta-umfrage-termin .umPilleZeichen { font-size: 1.15rem; line-height: 1; }html.beta-umfrage-termin .umTerminTaste[data-antwort="ja"] .umPille { border-color: var(--success); background: var(--success-bg); color: var(--success-text); }html.beta-umfrage-termin .umTerminTaste[data-antwort="vielleicht"] .umPille { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }html.beta-umfrage-termin .umTerminTaste[data-antwort="nein"] .umPille { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }html.beta-umfrage-termin .umTerminTaste[data-antwort="leer"] .umPille { color: var(--muted); border-style: dashed; }html.beta-umfrage-termin .umUeber { border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); }html.beta-umfrage-termin .umUeberZeile { padding: 10px 12px; }html.beta-umfrage-termin .umUeberZeile + .umUeberZeile { border-top: 1px solid var(--border); }html.beta-umfrage-termin .umUeberKopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }html.beta-umfrage-termin .umBeste { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: var(--r-voll); background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); font-size: 0.86rem; font-weight: 700; }html.beta-umfrage-termin .umZahlen { margin: 4px 0 6px; font-size: 0.92rem; color: var(--muted); }html.beta-umfrage-termin .umBalken { display: flex; height: 10px; border-radius: var(--r-voll); overflow: hidden; background: var(--border); }html.beta-umfrage-termin .umBalken span { display: block; height: 100%; }html.beta-umfrage-termin .umBalken .ja { background: var(--success); }html.beta-umfrage-termin .umBalken .vielleicht { background: var(--warn); }html.beta-umfrage-termin .umBalken .nein { background: var(--danger); }html.beta-umfrage-termin .umWer { margin-top: 4px; }html.beta-umfrage-termin .umWer summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 0.92rem; color: var(--accent); }html.beta-umfrage-termin .umWer p { margin: 0 0 6px; font-size: 0.92rem; }html.beta-umfrage-termin .umChatListe { list-style: none; margin: 0 0 6px; padding: 0; border-radius: var(--r-m); background: var(--surface); }html.beta-umfrage-termin .umChatListe:empty { display: none; }html.beta-umfrage-termin .umChatListe li { padding: 8px 12px; }html.beta-umfrage-termin .umChatListe li + li { border-top: 1px solid var(--border); }html.beta-umfrage-termin .umChatKopf { display: flex; justify-content: space-between; gap: 8px; font-size: 0.86rem; color: var(--muted); }html.beta-umfrage-termin .umChatName { font-weight: 700; color: var(--text); }html.beta-umfrage-termin .umChatText { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }html.beta-umfrage-termin .umLeise { min-height: 44px; min-width: 44px; padding: 0 8px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }html.beta-umfrage-termin .umChatForm { margin-top: 8px; }html.beta-umfrage-termin .umZaehler { margin: 4px 0 0; font-size: 0.86rem; color: var(--muted); }html.beta-umfrage-termin .umZaehler.zuviel { color: var(--danger); font-weight: 700; }html.beta-umfrage-termin .umKnoepfe { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }html.beta-umfrage-termin .umGefahr { margin-top: 12px; }html.beta-umfrage-termin .umAuswahl { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }html.beta-umfrage-termin .umAuswahlZeile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }html.beta-umfrage-termin .umAuswahlZeile[aria-checked="true"] { border-color: var(--accent); background: var(--accent-bg); }html.beta-umfrage-termin .umKasten { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--border-2); border-radius: var(--r-xs); background: var(--bg); font-weight: 700; line-height: 1; }html.beta-umfrage-termin .umKasten.rund { border-radius: var(--r-kreis); }html.beta-umfrage-termin .umWeiter, html.beta-umfrage-termin .umFestlegen { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-m); background: var(--surface); }html.beta-umfrage-termin .umVorschlagZeile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }html.beta-umfrage-termin .umVorschlagListe { margin: 0 0 10px; padding: 0 0 0 18px; font-size: 0.92rem; }html.beta-umfrage-termin .umTnListe { list-style: none; margin: 0; padding: 0; }html.beta-umfrage-termin .umTnListe li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
@media (min-width: 480px) { html.beta-umfrage-termin .umfrageKnopf:not([hidden]) { flex: 1 1 0; order: 0; min-width: 0; } }
/* Bei 320 px passen sieben Tage à 44 px (308) nur, wenn das Blatt in diesem Schritt weniger Rand hat (18 → 4 px)
   und der Kalender selbst keinen Innenrand und keine Seitenlinien trägt: nur solange er im Blatt steht.
   Gemessen in umfrage-dom (A11b). */
@media (max-width: 359px) {
  html.beta-umfrage-termin #editModal .modalBox:has(.umKalender) { padding-left: 4px; padding-right: 4px; }
  html.beta-umfrage-termin .umKalender { padding-left: 0; padding-right: 0; border-left-width: 0; border-right-width: 0; border-radius: 0; }
}
/* 28.10.2026 (Sören: „Uhrzeit lieber oben?“): Schritt 2 der Terminfindung - Uhrzeit oben, feste Leiste unten (public/app-umfrage.js). */
html.beta-umfrage-termin .umUhrBlock { margin: 0 0 10px; }html.beta-umfrage-termin .umHinweisOben { margin: 0 0 8px; }html.beta-umfrage-termin .umZeileModus { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }html.beta-umfrage-termin .umRueck { margin: 6px 0 0; }html.beta-umfrage-termin .umFuss { position: sticky; bottom: 0; z-index: 2; margin: 8px -2px 0; padding: 8px 2px 4px; background: var(--bg); border-top: 1px solid var(--border); }html.beta-umfrage-termin .umFussZaehler { margin: 0 0 4px; font-size: 0.92rem; font-weight: 700; color: var(--text-2); }html.beta-umfrage-termin .umZeilen { list-style: none; margin: 0 0 6px; padding: 0; max-height: 140px; overflow-y: auto; display: grid; gap: 4px; }html.beta-umfrage-termin .umZeile { display: flex; align-items: center; gap: 4px; min-height: 44px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); padding-left: 10px; }html.beta-umfrage-termin .umZeile.aktiv { border-color: var(--accent); background: var(--accent-bg); }html.beta-umfrage-termin .umZeileText { flex: 1 1 auto; min-width: 0; font-size: 0.95rem; font-weight: 600; overflow-wrap: anywhere; }html.beta-umfrage-termin .umZeileAendern { flex: none; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }html.beta-umfrage-termin .umZeileWeg { flex: none; width: 44px; min-height: 44px; border: 0; background: none; color: var(--text); font: inherit; font-size: 1rem; cursor: pointer; }html.beta-umfrage-termin .umFussTasten { display: flex; gap: 8px; }html.beta-umfrage-termin .umFussTasten .blattAktion { flex: 1 1 0; min-width: 0; }
html.beta-umfrage-termin .umFussTasten .blattAktion { background: var(--surface); border: 1px solid var(--border-2); color: var(--text-2); font-weight: 600; }
html.beta-umfrage-termin .umFussTasten .blattAktion.haupt { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent-strong); font-weight: 700; }
/* Auf niedrigen Bildschirmen (320 x 568) bleibt dem Kalender sonst kaum Platz: die Liste zeigt dann zwei Zeilen und scrollt in sich. */
@media (max-height: 640px) { html.beta-umfrage-termin .umZeilen { max-height: 92px; } }