/* tagwerk – Farben, Grundgeruest, Kopfzeile und Marke
 *
 * Teil der Gestaltung; eingebunden in index.html in fester Reihenfolge
 * (grund, listen, bedienung, drucken). Die Reihenfolge ist Teil der Aussage:
 * Spaeteres ueberschreibt Frueheres.
 *
 * Palette und Grundformen bewusst identisch zu mapfit und seitenblick, damit sich
 * die Werkzeuge wie eine Familie anfuehlen: dunkle Tinte in Kopf und Fuss, eine
 * helle, dichte Arbeitsflaeche dazwischen, Gruen als einziger Akzent. */

:root {
  /* Hell und dunkel aus einer Hand (10.08.2026): Jede Flaechen- und Textfarbe
     traegt ihre beiden Fassungen als light-dark()-Paar; die dunklen Werte
     sind die der Systempalette (design-system/dist/marke.css). Drei Staende
     wie dort: `System` (Vorgabe) folgt dem Betriebssystem, `Hell` und
     `Dunkel` ueberstimmen es - gewaehlt am Knopf im Kopf (thema in main.js),
     gemerkt im localStorage, als data-thema am <html>. Weil die Flaechen
     light-dark() tragen, schaltet hier der color-scheme das ganze Thema;
     marke.css definiert stattdessen die Token je Stand um - gleiches
     Ergebnis, zwei Mechaniken (siehe design-system/README.md). Der Kopf und
     die Fusszeile bleiben in beiden Welten die dunkle Tinte der Marke. */
  color-scheme: light dark;
  --border: light-dark(#d0d7de, #333c37);
  /* Der Rand von FELDERN und KNOEPFEN (21.09.2026, aus der mapfit-Bedienrunde,
     design-system/dist/marke.css): --border traegt 1,4:1 gegen die Flaeche -
     gut fuer Trennlinien, zu wenig fuer die Kante, an der man ein Feld ueberhaupt
     erst erkennt (WCAG 1.4.11 verlangt 3:1). Karten und Linien bleiben leise. */
  --border-feld: light-dark(#868e96, #74827a);
  --muted: light-dark(#57606a, #9aa79c);
  /* Die Farbe der GLIEDERUNG - „Listen", „Ansichten", „Favoriten", die
     Artbloecke, die Zwischenueberschriften der Menues, „Verlauf" (berichtigt
     am 13.08.2026: „allgemein alle Ueberschriften im Dark Mode nicht
     lesbar").
   
     Sie standen im Grau der Auskunft (--muted) oder in einem noch dunkleren
     festen Wert, und das war dreifach ungluecklich: klein (10-11 px), in
     GROSSBUCHSTABEN und gesperrt. Grossbuchstaben haben keine Ober- und
     Unterlaengen, an denen das Auge ein Wort erkennt, und gesperrt zerfallen
     sie zusaetzlich - im dunklen Thema fiel das unter das, was man beim
     Ueberfliegen noch aufnimmt.
   
     Eine Ueberschrift ist keine Auskunft, sondern der Wegweiser zu ihr: Sie
     darf leiser sein als der Text, aber nicht leiser als das, was sie
     ueberschreibt. Hell bleibt der bisherige Wert (dort stimmte es); dunkel
     geht sie deutlich hoch. EIN Token statt fuenf Werten, damit die naechste
     Ueberschrift ihn erbt, statt ihn neu zu erfinden. */
  --gliederung: light-dark(#57606a, #b9c6bc);

  /* Die Flaechen des Arbeitsbereichs: der Grund der Seite, die Karten und
     Felder darauf, der Hauch beim Ueberfahren - und die getoenten Hauche der
     vier Bedeutungsfarben. Dunkel bleibt die Familie gruenstichig wie die
     Tinte, nur eben als Arbeitsflaeche. */
  --flaeche-tief: light-dark(#f6f8fa, #121614);
  --flaeche: light-dark(#ffffff, #1b201d);
  --text: light-dark(#1f2328, #e6ebe4);
  --text-still: light-dark(#4a5b50, #a9b8ac);
  --hauch: light-dark(#f2f6f1, #1c2a20);
  --grau-hauch: light-dark(#eef1f4, #262d29);
  --gruen-hauch: light-dark(#e8f1e9, #1e2f22);
  --gruen-feld: light-dark(#dbecdd, #27452e);
  --rot-hauch: light-dark(#fdf0ef, #3a1d1c);
  --gelb-hauch: light-dark(#fdf6e3, #3a3010);
  --blau-hauch: light-dark(#eaf2fd, #182c44);

  /* Farben der Marke. Der Arbeitsbereich bleibt hell und dicht - dort wird
     gearbeitet. Der Kopf traegt die dunkle Tinte der Marke und haelt die
     Anwendung damit sichtbar in der Familie. */
  --tinte:       #0e1710;
  --tinte-hoch:  #1a2a1f;
  --tinte-tief:  #0a110c;
  --tinte-linie: #24382c;
  --tinte-text:  #e8eee2;
  --tinte-leise: #a4b49e;
  --gruen:       #4fc662;   /* Akzent auf dunklem Grund */
  --gruen-hell:  #6fd97f;
  /* Die "-tief"-Toene sind die Akzente des Arbeitsbereichs. Im Dunkeln muessen
     sie heller werden, nicht dunkler - tiefes Rot auf dunklem Grund ist
     unsichtbar, und genau das war der Grund fuer die zwei Fassungen. */
  --gruen-tief:  light-dark(#2f7a3e, #3f9e52);   /* derselbe Akzent auf hellem Grund */
  --gruen-tiefer: light-dark(#286a36, #4bb060);  /* derselbe, ueberfahren */
  /* Warnrot in zwei Fassungen wie das Gruen: Ein Ton fuer beide Gruende gaebe
     es nicht - auf der dunklen Tinte verschwindet das tiefe Rot fast, auf der
     hellen Spalte leuchtet das helle. */
  --rot:         #ff7b72;
  --rot-tief:    light-dark(#cf222e, #ff8a80);
  /* Der mittlere Ton der Dringlichkeit - dasselbe Gelb, das bei mapfit einen
     laufenden Modus anzeigt. */
  --gelb-tief:   light-dark(#bf8700, #f5b73a);
  /* Das Blau der Bearbeitung. Es musste ein vierter Ton sein: Gruen gehoert
     dem Heute und der Auswahl, Gelb dem Warten, Rot der Warnung - "ich bin
     gerade dran" ist keines davon und darf mit keinem verwechselt werden. */
  --blau-tief:   light-dark(#0969da, #58a6ff);

  /* Die Serifen der Marke, wie auf mischfeld.de: nur fuer das Markenwort. Der
     Arbeitsbereich bleibt bei der Systemschrift - dort wird bedient. */
  --schrift-anzeige: "Iowan Old Style", "Palatino Linotype", Palatino,
                     "Book Antiqua", Georgia, serif;

  /* Die Spalte traegt zwei Sortierungen (Zeitplan, Listen) mit Zahlen am
     rechten Rand. 250 px reichen fuer die laengste Beschriftung samt Zaehler, ohne der
     Liste daneben Platz zu nehmen. */
  --spalte-breite: 250px;
  /* Die Einträge stehen mittig in einer Spalte fester Hoechstbreite: Auf einem
     breiten Schirm liefe eine Zeile sonst ueber 200 Zeichen, und das Auge
     findet den Zeilenanfang nicht wieder. */
  --lesebreite: 900px;

  /* Doppelpfeil als Zeichnung statt als Schriftzeichen: das « einer Schrift
     sitzt auf der Grundlinie und damit sichtbar neben der Kreismitte - beim
     Drehen des Kreises wandert es dann noch auffaelliger. Diese Form ist um
     (8,8) konstruiert und bleibt in jeder Drehlage mittig. Uebernommen aus
     mapfit, wo derselbe Griff dieselbe Aufgabe hat. */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.75 4.5 4.25 8 7.75 11.5M11.75 4.5 8.25 8 11.75 11.5' fill='none' stroke='%2357606a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-kraeftig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.75 4.5 4.25 8 7.75 11.5M11.75 4.5 8.25 8 11.75 11.5' fill='none' stroke='%231f2328' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Ein einfacher Chevron nach unten - fuer die Abschnitte der Einzelansicht.
     Der doppelte darueber gehoert der Spalte: Sie schiebt sich zur Seite, ein
     Abschnitt klappt auf. Dieselbe Sprache, ein Strich weniger. Um (8,8)
     konstruiert wie der doppelte, damit die Drehung mittig bleibt.

     Er sass eine Zeitlang auch am Ende jeder Eintragszeile und klappte die
     Einzelheiten darunter auf. Das gibt es nicht mehr - ein Doppelklick
     oeffnet den Eintrag als eigene Ansicht. */
  --chevron-ab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.25 8 9.75 11.5 6.25' fill='none' stroke='%238a938c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Die dunklen Chevron-Zeichnungen - EINMAL benannt, zweimal zugewiesen, wie
   in marke.css: In eine Daten-URI passt kein light-dark(), also brauchen die
   drei Zeichnungen eigene Zuweisungen fuer den Systemfall (@media) und die
   ausdrueckliche Wahl (data-thema). Die Striche tragen die Systemwerte
   (muted bzw. Text der dunklen Palette). */
:root {
  --d-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.75 4.5 4.25 8 7.75 11.5M11.75 4.5 8.25 8 11.75 11.5' fill='none' stroke='%239aa79c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --d-chevron-kraeftig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.75 4.5 4.25 8 7.75 11.5M11.75 4.5 8.25 8 11.75 11.5' fill='none' stroke='%23e6ebe4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --d-chevron-ab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.25 8 9.75 11.5 6.25' fill='none' stroke='%239aa79c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Der Systemfall - aber nur, solange nicht ausdruecklich hell gewaehlt ist. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --chevron: var(--d-chevron);
    --chevron-kraeftig: var(--d-chevron-kraeftig);
    --chevron-ab: var(--d-chevron-ab);
  }
}

/* Die ausdrueckliche Wahl - sie gilt auch auf einem hell eingestellten
   System. `hell` braucht nur den color-scheme: Damit waehlt jedes
   light-dark()-Paar seine helle Haelfte, und die Chevrons behalten ihre
   Grundwerte. */
:root[data-thema="hell"] { color-scheme: light; }
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --chevron: var(--d-chevron);
  --chevron-kraeftig: var(--d-chevron-kraeftig);
  --chevron-ab: var(--d-chevron-ab);
}

* { box-sizing: border-box; }
/* Verstecktes bleibt versteckt. Ohne diese Zeile gewinnt jede eigene
   display-Regel gegen das display:none des Browsers fuer [hidden] - beide sind
   gleich spezifisch, und die eigene steht spaeter. Aufgefallen an den
   Listengriffen, die auch in den Zeitansichten standen und dort auf eine Liste
   zeigten, die gar nicht gewaehlt war. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; display: flex; flex-direction: column;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--flaeche-tief); color: var(--text);
}

/* --- Kopf ---------------------------------------------------------------- */
/* Drei Felder: links Marke und Griff, in der Mitte die Suche, rechts die
   Schalter. Als Raster mit 1fr auto 1fr steht die Suche wirklich in der Mitte
   des Fensters - und bleibt dort, wenn rechts ein Schalter dazukommt. */
header {
  background: var(--tinte); color: var(--tinte-text); padding: 10px 20px; flex: none;
  border-bottom: 1px solid var(--tinte-linie);
  /* Zwei Spalten statt dreier (12.08.2026): In der Mitte stand das Suchfeld,
     und seit die Suche eine Lupe in der rechten Gruppe ist, gibt es dort
     nichts mehr zu halten. Links waechst der Titel, rechts stehen die
     Griffe. Ein drittes Kind bekaeme eine eigene Zeile - das nutzt nur die
     Suchleiste aus, die genau das will (siehe #suchleiste weiter unten);
     alles andere gehoert in eine der beiden Gruppen. */
  /* Spaltenabstand 20, Zeilenabstand 0 (12.08.2026): Eine zweite Zeile gibt
     es nur, wenn die Suchleiste offen ist - und die bringt ihren Abstand als
     eigenen Rand mit. Mit einem gemeinsamen gap kam beides zusammen, und der
     Kopf wuchs beim Oeffnen der Suche um eine ganze Leerzeile. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 20px;
  /* Bezug fuer das Menue, das auf schmalen Schirmen unter dem Kopf haengt
     (siehe #kopf-werkzeuge in bedienung.css). */
  position: relative;
}
/* Dieselben Abstaende wie bei mapfit (grund.css dort): links 20, rechts 14 -
   zwei Werkzeuge derselben Familie sollen im Kopf gleich atmen. */
header .kopf-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; min-width: 0; }
header .kopf-rechts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; min-width: 0;
  justify-self: end; justify-content: flex-end;
}
header .header-group { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
header .header-group .btn:not(.btn-icon) { height: 26px; padding: 0 10px; line-height: 24px; }

/* Im Kopf gibt genau EINES nach, und das ist der Titel (berichtigt am
   13.08.2026, gemeldet am selben Tag: „das Burger-Menü hat nicht mehr die
   Originalgröße am Handy").
 *
 * Alles andere dort hat eine feste Größe: die Zeichenknöpfe 26 px (am Finger
 * 36, siehe bedienung.css), das Markenzeichen 26, das Paar ↶ ↷. Eine Breite
 * allein genügt dafür aber nicht - ein Flex-Kind schrumpft von sich aus unter
 * seine Breite, sobald die Reihe zu eng wird (flex-shrink ist 1). Solange die
 * linke Gruppe in einer max-content-Spur saß, kam diese Enge nie zustande;
 * seit sie in der flexiblen Spur sitzt (das war die Berichtigung des
 * Überlaufs am selben Tag), sehr wohl - und dann gab statt des Titels der
 * Burger nach und stand als schmaler Streifen da.
 *
 * Der Titel darf und soll nachgeben: Er kürzt sich mit „…" (siehe
 * #ansicht-titel weiter unten, flex: 0 1 auto). Seine eigene Regel gewinnt
 * hier über die Kennung. */
header .kopf-links > *, header .kopf-rechts > *, header .header-group > * {
  flex: none;
}

/* Bildmarke inline und nicht als <img>: Die acht ruhigen Quadrate nehmen ueber
   currentColor die Textfarbe des Kopfes an, Farbe traegt allein der Haken. */
header .brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--schrift-anzeige);
  font-weight: 600; font-size: 18px; letter-spacing: 0.01em;
  color: var(--tinte-text); text-decoration: none;
}
header .marke-zeichen { width: 26px; height: 26px; flex: none; }
header .marke-haken { stroke: var(--gruen); }
header .brand:hover .marke-haken { stroke: var(--gruen-hell); }
/* „Tag|werk" wie „Misch|feld": Der zweite Wortteil traegt das Gruen. */
header .brand .akzent { color: var(--gruen); }

/* Knoepfe im Kopf tragen die Tinte, nicht das Weiss der Arbeitsflaeche.
   (Der rechte Abstand der Kennung ist gegangen: Sie steht seit dem
   12.08.2026 IM Konto-Knopf, und dort setzt bedienung.css ihn auf 0.) */
header .kennung { color: var(--tinte-leise); font-size: 13px; }
header .btn { background: var(--tinte-hoch); border-color: var(--tinte-linie); color: var(--tinte-text); }
header .btn:hover:not(:disabled) { background: #24382c; }
/* Eingeschaltet: heller abgesetzt, mit dem Gruen als Rahmen. Ein Schalter, der
   seinen Zustand nur im Tooltip traegt, ist keiner. */
header .btn.ist-an { background: #2d4a36; border-color: var(--gruen); color: #fff; }
/* Dasselbe fuer die Knoepfe, die etwas AUFKLAPPEN - allen voran der Burger
   (Wunsch vom 12.08.2026): Solange die Spalte offensteht, traegt er den
   gruenen Rahmen und den helleren Grund. Ein Griff, der auf- und zuklappt,
   ist ein Schalter, und ein Schalter, der seinen Zustand nicht zeigt, ist
   keiner - man drueckt ihn ein zweites Mal, um zu sehen, was er tut.

   Ueber aria-expanded und nicht ueber eine eigene Klasse: Das Attribut steht
   ohnehin an jedem dieser Knoepfe (die Vorlesehilfe braucht es), und was die
   Ansage sagt, soll auch zu sehen sein. Damit gilt die Regel gleich fuer
   Liste, Einstellungen und Konto mit. */
header .btn[aria-expanded="true"] {
  background: #2d4a36; border-color: var(--gruen); color: #fff;
}
/* Gesperrt auf der dunklen Tinte: Die halbe Deckkraft der hellen Flaeche liesse
   den Knopf fast verschwinden - auf dunklem Grund muss er stattdessen naeher an
   ihn heranruecken. Rueckgaengig und Wiederholen stehen die meiste Zeit so da,
   und ein Knopf, den man nicht mehr sieht, laesst einen an seiner Stelle
   suchen. */
header .btn:disabled { opacity: 1; background: var(--tinte); color: #5d6f59; border-color: #1c2c21; }
/* Die beiden Pfeile sind Schriftzeichen und stehen in 13px verloren im 26er
   Quadrat - dieselbe Groesse wie das Druckersinnbild daneben. */
header #btn-rueckgaengig, header #btn-wiederholen { font-size: 16px; line-height: 1; }

/* Die Speichermarke (27.08.2026, siehe #stand-marke in index.html): leise wie
   die Kennung rechts, denn sie ist eine Auskunft und kein Griff. Nur der Haken
   traegt Farbe - er ist das, was man im Vorbeigehen sieht.

   Sie hat eine FESTE Mindestbreite. Ohne sie waere "Speichert ..." schmaler als
   "Gespeichert 14:32", und weil im Kopf allein der Titel nachgibt (siehe die
   flex-Regel oben), rutschte er bei jeder Aenderung um zwanzig Pixel hin und
   zurueck. Eine Auskunft, die das Nebenstehende zappeln laesst, kostet mehr,
   als sie bringt. */
header .stand-marke {
  display: inline-flex; align-items: baseline; gap: 5px; min-width: 130px;
  font-size: 12px; color: var(--tinte-leise); white-space: nowrap;
  /* Ziffern gleicher Breite: Sonst waere "11:11" schmaler als "14:32", und die
     Marke aenderte ihre Breite im Minutentakt. */
  font-variant-numeric: tabular-nums;
}
header .stand-marke .stand-zeichen { color: var(--gruen); font-size: 13px; line-height: 1; }
/* Waehrend etwas unterwegs ist, ist der Haken noch keine Wahrheit: Das Zeichen
   wird zum wartenden Punktetrio und verliert das Gruen. */
header .stand-marke.laeuft .stand-zeichen { color: var(--tinte-leise); }

/* Die Suche gibt als Erstes nach: Sie darf schrumpfen, die Griffe nicht. */
/* Die aufklappende Suchleiste unter dem Kopf (12.08.2026). Sie steht IM
   FLUSS und schiebt den Inhalt nach unten, statt sich darueberzulegen
   (Wunsch vom selben Tag): Ein Aufsatz verdeckte die erste Eintragszeile -
   also genau die, die man beim Suchen als Erstes ansieht -, und beim
   Tippen verschwand das Ergebnis unter der eigenen Eingabe.

   Der Kopf ist ein Raster aus zwei Spalten; die Leiste nimmt als drittes
   Kind eine eigene ZEILE ueber die volle Breite. Genau dafuer ist sie da,
   und deshalb ist sie das einzige Kind, das das darf. */
#suchleiste {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 6px;
  margin: 8px -20px -10px; padding: 8px 20px;
  background: var(--tinte-hoch); border-top: 1px solid var(--tinte-linie);
}
#suchleiste #suche { flex: 1 1 auto; min-width: 0; }

/* --- Grundriss ----------------------------------------------------------- */
/* position: relative als Bezug fuer die Spalte, die auf schmalen Schirmen
   ueber dem Inhalt liegt: Sie soll unter dem Kopf beginnen, damit der Griff,
   mit dem man sie wieder wegklappt, erreichbar bleibt. */
main { flex: 1; display: flex; min-height: 0; position: relative; }

#spalte {
  width: var(--spalte-breite); flex: none; overflow-y: auto;
  padding: 14px 12px; border-right: 1px solid var(--border);
  /* Ein Hauch Gruen im Grau - hell und freundlich, aber erkennbar aus dem
     Mischfeld. Haekchen und Regler uebernehmen das Markengruen gleich mit. */
  background: light-dark(#f4f7f3, #171d19);
  accent-color: var(--gruen-tief);
}
main.spalte-zu #spalte { display: none; }

/* Der runde Klappgriff auf der Kante der Spalte ist weg (12.08.2026, Wunsch
   vom selben Tag): Die Spalte holt jetzt der Burger im Kopf - auf jeder
   Breite derselbe Griff, an der Stelle, an der jedes Programm ihn hat.
   Vorher waren es zwei verschiedene Wege je nach Breite (der runde Griff am
   Schreibtisch, der Ausschnittstitel am Telefon), und keiner davon sah aus
   wie ein Menue. Nebenbei entfaellt damit der 40-px-Einzug, den der Inhalt
   dem Griff dauerhaft freihalten musste. */

/* Der Inhalt ist eine Spalte, die NICHT als Ganzes scrollt (Wunsch vom
   12.08.2026): Gescrollt werden die Eintraege, und der Schnelleinwurf steht
   fest am unteren Rand.

   Vorher scrollte alles zusammen, und der Einwurf stand oben - in einer
   Notizliste mit dreissig Zeilen war er nach dem ersten Wischen weg, und wer
   etwas einwerfen wollte, musste erst wieder hochfahren. Ihn oben festzukleben
   waere der naheliegende Ausweg gewesen und der falsche: Er ist mit seinen
   Marken zwei Zeilen hoch und haette dauerhaft den Anfang der Liste verdeckt.
   Unten deckt er nichts zu - die Eintraege enden ueber ihm -, und er steht
   dort, wo am Telefon der Daumen ohnehin liegt. Dieselbe Anordnung wie in
   jedem Nachrichtenprogramm, und aus demselben Grund.

   Der Kasten selbst bekommt KEIN overflow (er hatte overflow-y: auto): Die
   aufklappenden Menues der Kopfzeile (⋯ und Teilen) haengen als absolut
   gesetzte Kaesten unter ihr und reichen weit in den Inhalt hinein - in
   einem Kasten mit overflow schnitte ihre Kante sie ab, und was unten
   abgeschnitten ist, erreicht niemand mehr (sie tragen deshalb zusaetzlich
   eine eigene Hoehenbremse, siehe #listen-griffe in bedienung.css).
   Gescrollt wird eine Ebene tiefer, in der Liste selbst - und weil die alle
   ueberzaehlige Hoehe aufnimmt, laeuft hier nichts ueber. */
#inhalt {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: 16px 20px 12px;
  accent-color: var(--gruen-tief);
  /* Bezug fuer die Einteilungsleiste, die sich nach dem Anlegen ueber den
     Einwurf legt (siehe #einteilung in bedienung.css). */
  position: relative;
}
/* Alles im Inhalt haelt dieselbe Lesebreite - Kopfzeile, Schnelleinwurf und
   Eintraege stehen damit in einer Flucht.
   width: 100% muss dabeistehen, seit der Kasten eine Flexspalte ist: Zwei
   automatische Seitenraender heben in der Querachse das Strecken auf, und die
   Zeilen schrumpften auf ihre Textbreite zusammen. */
#inhalt > * {
  width: 100%; max-width: var(--lesebreite);
  margin-left: auto; margin-right: auto; flex: none;
}
/* Der scrollende Teil: die Eintraege - und, wenn ein Eintrag offensteht, seine
   Ansicht (die Liste ist dann ausgeblendet, siehe body.zeigt-eintrag).
   min-height: 0, sonst wachsen sie ueber den Kasten hinaus, statt zu scrollen -
   ein Flexkind gibt von sich aus nicht unter seine Inhaltshoehe nach. */
#eintraege, #eintragsansicht {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* Damit die letzte Zeile nicht an der Kante des Einwurfs klebt. */
  padding-bottom: 8px;
}
/* Der Schnelleinwurf ans Ende, was auch immer im Dokument nach ihm steht
   (Leermeldung, Papierkorb-Verweis): Er ist der Fuss dieser Spalte. */
#schnell { order: 1; }

/* position: relative als Bezug fuer das Menue, das auf schmalen Schirmen unter
   der Zeile haengt (siehe #listen-griffe in bedienung.css). Im Fluss der Zeile
   schoebe es beim Aufklappen die halbe Liste nach unten. */
/* flex-wrap: NOWRAP, und das ist der Kern der Sache (berichtigt am
   10.08.2026): Ein Flexkasten mit „wrap" bricht zuerst um und schrumpft erst
   danach - min-width: 0 an der Ueberschrift half deshalb gar nichts, sobald
   ein Listenname lang war („Wunschliste Mischa"), und das ⋯ fiel in eine
   zweite Zeile. Ohne wrap bleibt die Reihe eine Reihe, und der Platz wird
   von links nach rechts abgegeben: erst die Luft, dann der Zaehler, dann der
   Titel (der sich mit „…" kuerzt). Die Knoepfe geben nie nach - sie tragen
   flex: none. */
#kopfzeile { margin-bottom: 12px; position: relative; }
/* Oben: der Name und die Griffe. NOWRAP, und das ist der Kern der Sache -
   ein Flexkasten mit „wrap" bricht zuerst um und schrumpft erst danach, und
   deshalb half min-width: 0 an der Ueberschrift gar nichts, sobald ein
   Listenname lang war („Wunschliste Mischa"): Das ⋯ fiel in die naechste
   Zeile. Ohne wrap bleibt die Reihe eine Reihe, und der Platz wird von links
   abgegeben - erst die Luft, dann der Titel (der sich mit „…" kuerzt). */
.kopf-haupt {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
}
/* Alles in der Reihe behaelt seine Groesse, sofern unten nichts anderes
   steht - namentlich die Knoepfe und die Menue-Behaelter. */
.kopf-haupt > * { flex: none; }
/* Was den Ausschnitt beschreibt - Art, Zaehler, Geteilt-Zeichen, die
   gesetzten Marken, die Suchweite. Seit dem 12.08.2026 steht es in DERSELBEN
   Zeile wie die Griffe (Wunsch vom selben Tag): Der Listenname, der die
   beiden lange auseinanderhielt, steht jetzt im Kopf der Anwendung, und zwei
   halbleere Zeilen uebereinander sind eine zu viel.

   Es gibt als Erstes nach (flex-shrink 1 gegen die Knoepfe, die nie
   nachgeben) und wandert innen seitlich, statt die Zeile zu brechen: Hier
   steht nichts, das man trifft, sondern was man liest - und die Griffe
   rechts muessen bleiben, wo sie sind. Leere Kinder fallen weg (:empty
   greift am Elternteil nicht, weil die Kinder ja dastehen, nur leer). */
.kopf-neben {
  display: flex; align-items: center; gap: 4px 10px; flex-wrap: nowrap;
  flex: 0 1 auto; min-width: 0; overflow-x: auto;
  /* Der Streifen scrollt notfalls, aber er soll nicht dauernd eine Leiste
     dafuer zeigen - er ist eine Auskunft und kein Bedienfeld. */
  scrollbar-width: none;
}
.kopf-neben::-webkit-scrollbar { display: none; }
.kopf-neben > :empty { display: none; }
.kopf-neben .chip-gruppe { flex-wrap: nowrap; }
/* Die Grundlinie gilt für die SCHRIFT der Zeile - Titel und Zähler sollen auf
   einer Linie sitzen. Für die Knöpfe ist sie falsch (berichtigt am
   10.08.2026): Ein Knopf mit Text („Teilen …") und einer mit einem Zeichen
   („⋯", line-height 1, quadratisch) haben verschieden hohe Grundlinien, und
   sie standen sichtbar versetzt nebeneinander. Ausgerichtet werden sie an
   ihrer Mitte - dann liegen sie auf einer Kante, wie hoch der einzelne auch
   ist. */
.kopf-haupt > .btn, .kopf-haupt > .btn-row { align-self: center; }
/* Der Name des Ausschnitts steht seit dem 12.08.2026 im KOPF der Anwendung
   und nicht mehr ueber der Liste (siehe index.html): „Wo bin ich" gehoert
   neben die Marke. Er kuerzt sich mit „…" und gibt als Erster nach - die
   Suche daneben und die Knoepfe rechts duerfen dafuer nicht schrumpfen.
   Keine Ueberschriftengroesse mehr: Im Kopf steht er neben der Marke und
   darf nicht groesser sein als sie. */
header #ansicht-titel {
  margin: 0; font-size: 16px; font-weight: 600; line-height: 1.2;
  flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Die Art der Liste, klein hinter dem Namen (siehe zeichneKopf): leise wie der
   Zaehler daneben - eine Auskunft, keine zweite Ueberschrift. */
header #ansicht-titel .titel-art {
  color: var(--tinte-leise); font-size: 12px; font-weight: 400; margin-left: 7px;
}
/* Die Art der Liste, klein vor dem Zaehler: Der Name im Kopf sagt, WELCHE
   Liste - die Art, WAS FUER EINE. Leise wie der Zaehler daneben, denn beides
   ist Auskunft und keine Ueberschrift. */
#kopfzeile .titel-art, #kopfzeile .zaehler {
  color: var(--muted); font-size: 13px;
  flex: none; white-space: nowrap;
}
/* Steht dort etwas Ueberfaelliges, traegt die ganze Zeile den Warnton: Sie
   ist die eine Stelle, an der die Zahl noch steht, seit die Marke an der
   Zeile weg ist (12.08.2026) - und eine Zahl in Grau uebersieht man. */
#kopfzeile .zaehler.ist-spaet { color: var(--rot-tief); font-weight: 600; }
/* Die Geldantwort traegt die Textfarbe und nicht das Grau der uebrigen
   Auskuenfte (13.08.2026): „bleibt 2.388,00 €" ist bei einer Fixkostenliste
   nicht eine Angabe unter mehreren, sondern die Frage, wegen der man sie
   fuehrt. Tabellenziffern wie in der Kostenspalte der Zeilen darunter -
   dieselben Zahlen, dieselbe Schrift. */
#kopfzeile .geldzeile {
  color: var(--text); font-variant-numeric: tabular-nums;
}
#kopfzeile .geldzeile:empty { display: none; }
#kopfzeile .luft { flex: 1 1 auto; }

/* --- Fuss ---------------------------------------------------------------- */
/* Masse wie bei mapfit - dieselbe Zeile am unteren Rand derselben Familie:
   11px/24px Polsterung, mittig, 12px Schrift auf der tiefen Tinte. Mittig
   auch deshalb, weil die Zeile zu keiner der beiden Spalten darueber gehoert,
   sondern zur ganzen Anwendung.

   Seit dem 31.08.2026 traegt nur noch die ANMELDESEITE eine Fusszeile
   (Familienregel: „Ueber Tagwerk …" im Zahnrad ersetzt sie in der
   Anwendung) - diese Regeln bleiben fuer login.html stehen. */
footer {
  flex: none; padding: 11px 24px; border-top: 1px solid var(--tinte-linie);
  text-align: center; color: var(--tinte-leise); font-size: 12px;
  background: var(--tinte-tief);
}
/* Die Update-Pruefung stand hier als Fusszeilen-Link und wohnt seit dem
   12.08.2026 im Einstellungsmenue: Die Fusszeile faellt unter 600 px weg,
   und am Telefon war die Pruefung damit unerreichbar. */
footer .fuss-marke {
  font-family: var(--schrift-anzeige); font-size: 14px; font-weight: 600;
  color: var(--tinte-text);
}
footer .akzent { color: var(--gruen); }
footer a { color: var(--tinte-leise); }
footer .von-mischfeld { color: var(--tinte-text); text-decoration: none; font-weight: 600; }
footer .von-mischfeld span { color: var(--gruen); }
/* Beim Ueberfahren hellt das ganze Wort auf, behaelt aber seine Zweiteilung. */
footer .von-mischfeld:hover { color: #fff; }
footer .von-mischfeld:hover span { color: var(--gruen-hell); }

/* Die Gestaltung der Hilfe steht in css/hilfe.css - gemeinsam fuer die
   Leiste in der Anwendung und die eigene Seite hilfe.html, wie bei mapfit. */

/* --- Meldung ------------------------------------------------------------- */
/* Unten mittig, ohne Sprechblasenzipfel: Sie gehoert zu nichts Bestimmtem auf
   der Seite, sondern zur letzten Handlung. */
#toast {
  position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%);
  background: light-dark(#24292f, #323d36); color: #fff; padding: 8px 16px; border-radius: 6px;
  font-size: 13px; z-index: 30; pointer-events: none; max-width: 80%;
  display: flex; align-items: center; gap: 10px;
}
#toast.fehler { background: var(--rot-tief); }
/* Traegt die Meldung Knoepfe (Schlummern, Erledigt), muss man sie treffen
   koennen - sonst ist sie durchsichtig fuer den Zeiger und das Angebot geht
   ins Leere. Nur dann: Eine Meldung ohne Knoepfe soll nicht im Weg stehen. */
#toast.mit-knoepfen { pointer-events: auto; }
.toast-knopf {
  flex: none; padding: 3px 10px; border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12); color: #fff;
  font: inherit; font-size: 12px; cursor: pointer;
}
.toast-knopf:hover { background: rgba(255, 255, 255, .24); }

/* BEWEGUNG REDUZIEREN gilt ueberall (21.09.2026, aus der mapfit-Bedienrunde,
   wie design-system/dist/basis.css): Die einzelnen Regeln weiter unten nehmen
   je EINE Bewegung heraus - jede neue Animation muesste daran denken. Diese
   eine Regel faengt alle, auch die kuenftigen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}