/* Löwenbande - Bausteine der Feinschliff-Runde (02.09.2026).

   Warum eine zweite Datei: Während dieser Runde arbeitet eine zweite Sitzung
   in index.css (Druck-, Angebote- und Formularregeln). Zwei Schreiber in
   einer Datei überschreiben sich gegenseitig. Alles hier baut auf den Tokens
   aus index.css auf (--s-*, --fs-*, --ink*, --primary*, --radius-*) und wird
   bei Gelegenheit dort eingegliedert. Reihenfolge: Hilfsklassen, Tabellen
   als Karten, Skalen, Chat, Fortschritt, Kennzahlen, Kleinkram. */

/* ==========================================================================
   Hilfsklassen (u-*): ersetzen die häufigsten Inline-Stile aus admin.js und
   parent.js. Ein Inline-Stil schlägt jede Klasse - deshalb tragen die
   Hilfsklassen !important, sonst würden Komponentenregeln mit zwei Klassen
   (.card .titel) sie überstimmen und das Bild wäre nach dem Umbau ein
   anderes als vorher.
   ========================================================================== */
.u-m-0   { margin: 0 !important; }
.u-mb-0  { margin-bottom: 0 !important; }
.u-mb-1  { margin-bottom: var(--s-1) !important; }
.u-mb-2  { margin-bottom: var(--s-2) !important; }
.u-mb-3  { margin-bottom: var(--s-3) !important; }
.u-mb-4  { margin-bottom: var(--s-4) !important; }
.u-mb-5  { margin-bottom: var(--s-5) !important; }
.u-mb-6  { margin-bottom: var(--s-6) !important; }
.u-mt-1  { margin-top: var(--s-1) !important; }
.u-mt-2  { margin-top: var(--s-2) !important; }
.u-mt-3  { margin-top: var(--s-3) !important; }
.u-mt-4  { margin-top: var(--s-4) !important; }
.u-mt-5  { margin-top: var(--s-5) !important; }
.u-my-1  { margin-top: var(--s-1) !important; margin-bottom: var(--s-1) !important; }
.u-pt-4  { padding-top: var(--s-4) !important; }
.u-voll  { width: 100% !important; }
.u-flex-1 { flex: 1 !important; min-width: 0 !important; }
.u-minw-0 { min-width: 0 !important; }
.u-links  { text-align: left !important; }
.u-schmal { max-width: 120px !important; }
.u-rechts { text-align: right !important; }
.u-mitte  { text-align: center !important; }
.u-fs-xs { font-size: var(--fs-xs) !important; }
.u-fs-sm { font-size: var(--fs-sm) !important; }
.u-fs-md { font-size: var(--fs-md) !important; }
.u-ink-2 { color: var(--ink-2) !important; }
.u-primary { color: var(--primary) !important; }
.u-primary-ink { color: var(--primary-ink) !important; }
.u-akzent { color: var(--accent-text) !important; }
/* Die Zustandsfarben waren nur zur Haelfte da: u-danger gab es, u-success und
   u-warn nicht - weshalb "color: var(--success)" im Markup stehenblieb. */
.u-success { color: var(--success-ink) !important; }
.u-warn    { color: var(--warn-ink) !important; }
.u-info    { color: var(--info-ink) !important; }
.u-danger { color: var(--danger-ink) !important; }
.u-fett  { font-weight: 600 !important; }
/* Symbolgrößen: Lucide setzt 24px als Attribut, die Klasse gewinnt. */
.u-i-12 { width: 12px !important; height: 12px !important; }
.u-i-14 { width: 14px !important; height: 14px !important; }
.u-i-16 { width: 16px !important; height: 16px !important; }
.u-i-18 { width: 18px !important; height: 18px !important; }
.u-i-20 { width: 20px !important; height: 20px !important; }
.u-i-24 { width: 24px !important; height: 24px !important; }
.u-i-inline { display: inline !important; vertical-align: sub !important; }
/* Anordnung */
.u-zeile-1 { display: flex !important; align-items: center !important; gap: var(--s-1) !important; }
.u-zeile-2 { display: flex !important; align-items: center !important; gap: var(--s-2) !important; }
.u-izeile-1 { display: inline-flex !important; align-items: center !important; gap: var(--s-1) !important; }
.u-izeile-2 { display: inline-flex !important; align-items: center !important; gap: var(--s-2) !important; }
.u-stapel-3 { display: flex !important; flex-direction: column !important; gap: var(--s-3) !important; }
.u-stapel-4 { display: flex !important; flex-direction: column !important; gap: var(--s-4) !important; }
.u-stapel-5 { display: flex !important; flex-direction: column !important; gap: var(--s-5) !important; }
.u-raster-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--s-4) !important; }
.u-raster-3 { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: var(--s-4) !important; }
.u-raster-2 > * { min-width: 0; }
@media (max-width: 600px) {
  .u-raster-2 { grid-template-columns: 1fr !important; }
}
/* Ankreuzzeile: Kästchen + Text in einer Zeile, ganze Zeile klickbar */
.u-checkzeile { display: flex !important; align-items: center !important; gap: var(--s-2) !important; font-size: var(--fs-md) !important; cursor: pointer; min-height: 32px; }
/* Grauer Kasten mit Linie - die häufigste Inline-Box der Formulare */
.u-kasten { background: var(--bg) !important; padding: var(--s-4) !important; border-radius: var(--radius-sm) !important; border: 1px solid var(--line) !important; }
/* Zwischenüberschrift in Karten und Dialogen */
.u-abschnitt-titel { margin: 0 0 var(--s-2) !important; color: var(--primary-ink) !important; font-weight: 700 !important; font-size: var(--fs-md) !important; }
.u-karten-titel { font-size: var(--fs-lg) !important; font-weight: 700 !important; color: var(--ink) !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: var(--s-2) !important; }

/* ==========================================================================
   Tabellen als Karten am Handy. Markup: <table class="table tabelle-karten">,
   jedes <td data-label="Spaltenkopf">. Ab 768px bleibt es eine Tabelle; darunter
   wird jede Zeile eine Karte und jede Zelle eine Zeile "Label: Wert".
   Die Grenze lag bis 20.09.2026 bei 700px. Auf dem Tablet (768px) blieb
   damit die Desktop-Tabelle stehen, und die Aktionsspalte lag ausserhalb
   des Bildes - erreichbar nur ueber den waagerechten Scroll INNERHALB der
   Tabelle, bei dem die Feldbezeichnungen links wegwandern. 768px ist die
   Tablet-Grenze, die der Rest der App ohnehin nutzt (index.css:388 u. a.).
   ========================================================================== */
@media (max-width: 768px) {
  .tabelle-karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle-karten, .tabelle-karten tbody, .tabelle-karten tr, .tabelle-karten td { display: block; width: 100%; }
  .tabelle-karten tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
    box-shadow: var(--shadow-1);
  }
  .tabelle-karten td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    /* Eine Zelle kann mehrere unteilbare Elemente enthalten - etwa zwei
       Chips in "Verknuepfte Konten", wenn ein Kind zwei Elternkonten hat.
       Ohne wrap stand der zweite Chip ausserhalb der Karte und war nur
       ueber den Zeilen-Scroll zu sehen, bei dem die Feldbezeichnungen
       verschwinden. Reiner Text bricht ohnehin von selbst um, fuer ihn
       aendert die Zeile nichts. Gemessen 20.09.2026. */
    flex-wrap: wrap;
    gap: var(--s-3);
    padding: var(--s-1) 0;
    border: 0;
    text-align: right;
  }
  .tabelle-karten td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-2);
  }
  .tabelle-karten td:first-child { font-weight: 600; font-size: var(--fs-lg); border-bottom: 1px solid var(--line); padding-bottom: var(--s-2); margin-bottom: var(--s-1); }
  .tabelle-karten td:first-child::before { display: none; }
  .tabelle-karten td[data-label="Aktionen"], .tabelle-karten td[data-label="Aktion"] { justify-content: flex-start; flex-wrap: wrap; padding-top: var(--s-2); }
  .tabelle-karten td[data-label="Aktionen"]::before, .tabelle-karten td[data-label="Aktion"]::before { display: none; }
  .tabelle-karten td:empty { display: none; }
}
/* Breite Tabellen mit fester erster Spalte (Belegungsplaner): die Zeile
   bleibt beim seitlichen Scrollen lesbar. */
.table-responsive .spalte-fest, .table-responsive th.spalte-fest { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--line); }

/* ==========================================================================
   Chat: Sprechblasen mit klarer Seite, Zeit klein darunter
   ========================================================================== */
.chat-messages { display: flex; flex-direction: column; gap: var(--s-2); }
.chat-bubble { max-width: 78%; padding: var(--s-2) var(--s-3); border-radius: var(--radius-lg); font-size: var(--fs-md); line-height: 1.45; word-break: break-word; }
.chat-bubble.received { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: var(--radius-sm); color: var(--ink); }
.chat-bubble.sent { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: var(--radius-sm); }
.chat-absender { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
.chat-time { font-size: var(--fs-xs); margin-top: 2px; opacity: .75; }
.chat-bubble.sent .chat-time { color: #fff; text-align: right; }
.chat-tag-marke { align-self: center; font-size: var(--fs-xs); color: var(--ink-3); background: var(--bg-2); padding: 2px var(--s-3); border-radius: var(--radius-pill); margin: var(--s-2) 0; }
.chat-input-area { display: flex; gap: var(--s-2); align-items: flex-end; }
.chat-input-area .form-control { flex: 1; }

/* ==========================================================================
   Fortschritt (Aufnahmebogen, Monatsabschluss)
   ========================================================================== */
.fortschritt { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--ink-2); }
.fortschritt-balken { flex: 1; height: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.fortschritt-wert { height: 100%; background: var(--primary); border-radius: var(--radius-pill); transition: width var(--transition-normal); }
.fortschritt-text { white-space: nowrap; font-weight: 600; color: var(--ink); }

/* ==========================================================================
   Kennzahlen (Rückblick Woche/Monat): drei Kacheln statt grauer Zeile
   ========================================================================== */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); margin: var(--s-3) 0 var(--s-4); }
.kennzahl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--s-3) var(--s-4); }
.kennzahl-wert { font-size: var(--fs-2xl); font-weight: 700; color: var(--ink); line-height: 1.1; }
.kennzahl-wert small { font-size: var(--fs-md); font-weight: 500; color: var(--ink-2); }
.kennzahl-label { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 2px; }

/* ==========================================================================
   Sprungleiste für lange Seiten (Eingewöhnungs-Infoblatt)
   ========================================================================== */
.sprungleiste { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }
/* 44px statt 36px (20.09.2026): die Sprungchips sind Tippflaechen, keine
   Beschriftungen - dieselbe Begruendung wie bei .ew-filter .chip. */
.sprungleiste a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.sprungleiste a:hover { background: var(--bg-2); color: var(--ink); }
[id].sprungziel { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }

/* ==========================================================================
   Kleinkram
   ========================================================================== */
/* Anmeldekarte mittig, auch am Handy */
.login-wrapper { min-height: 100vh; min-height: 100dvh; align-items: center; }
/* Terminal am Handy: die Kinderliste ist der Normalweg, die Kamera folgt */
@media (hover: none) and (pointer: coarse) {
  .terminal-col-scan { display: flex; flex-direction: column; }
  .terminal-col-scan .kids-section { order: -1; }
}
/* Fester Fuß des Aufnahmebogens: am Handy nur eine schlanke Zeile */
@media (max-width: 700px) {
  .intake-foot { padding: var(--s-2) var(--s-3); gap: var(--s-2); }
  /* 44px statt der frueheren 40px: diese Regel ist spezifischer als die
     Tippflaechen-Regel fuer .btn-sm und hat sie still ueberstimmt -
     "Zwischenspeichern" und "Drucken" waren die einzigen 40px-Knoepfe im
     Aufnahmebogen. Die Zeile bleibt schlank, weil Padding und Schriftgroesse
     unveraendert sind. Gemessen 20.09.2026. */
  .intake-foot .btn { min-height: 44px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
}
/* Karten in Rastern dürfen schrumpfen: ein Grid-Kind hat sonst als
   Mindestbreite seinen Inhalt (die Wachstumsschnecke lief damit am Handy
   auf 405px). */
.card { min-width: 0; }
/* Raster- und Flex-Kinder duerfen kleiner werden als ihr Inhalt; die Schnecke
   meldet sonst ihre viewBox-Breite (377px) als Mindestmass und zieht die
   Spalte am Handy auf 410px. */
#tab-content [style*="grid-template-columns"] > *,
#parent-tab-content [style*="grid-template-columns"] > * { min-width: 0; }
/* ACHTUNG beim Abbau der Inline-Stile (UI-006): Die beiden Selektoren oben
   greifen ueber das style-ATTRIBUT. Wer ein Raster von einem Inline-Stil in
   eine Klasse verschiebt, nimmt seinen Kindern damit still das min-width: 0 -
   sie melden wieder ihren Inhalt als Mindestbreite und sprengen die Spalte.
   Am 08.09.2026 im Vorher-Nachher-Vergleich gemessen: min-width sprang bei
   sechs Grid-Kindern des Monatsabschlusses von 0px auf auto.
   Jede neue Rasterklasse braucht die Zeile deshalb selbst - so wie
   .u-raster-2 sie schon hat. */
.abschl-leiste > *,
.abschl-formleiste > * { min-width: 0; }
.card svg[viewBox] { max-width: 100%; height: auto; }
/* Fehlende Werte lesbar statt Bindestrich */
.wert-fehlt { color: var(--ink-3); font-style: italic; }
/* Allergen-Kürzel unter Wochen- und Monatsplan: klein und gedämpft, damit die
   Legende die Tabelle erklärt statt mit ihr zu konkurrieren */
.meal-legende { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
/* Rückblick: Wetter- und Stimmungssymbole in Wochen- und Monatszellen sind
   jetzt Lucide (vorher Emoji per font-size) - ohne Maß kämen sie mit 24px */
.rb-week-meta i, .rb-week-meta svg, .rb-month-icons i, .rb-month-icons svg { width: 14px; height: 14px; }
.rb-chip i, .rb-chip svg { width: 16px; height: 16px; }

/* Fototagebuch (Eltern): leichtes Anheben beim Zeigen. Vorher als
   onmouseover/onmouseout im Template - unter der scharfen CSP (script-src
   'self', BET-006) sind Inline-Handler verboten, deshalb hier als Regel. */
.foto-karte:hover { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { .foto-karte:hover { transform: none; } }

/* ==========================================================================
   Stundennachweis (UI-006, 07.09.2026)
   ==========================================================================
   Der dichteste Block des Projekts: 61 Inline-Stile auf 280 Zeilen in
   admin.js. Die Werte sind ZEICHENGENAU uebernommen, nicht auf die Skala
   gerundet - #999 bleibt #999, var(--s-1) bleibt var(--s-1). Wer hier
   "vereinheitlicht", verschiebt das Blatt um ein bis drei Pixel und einen
   Farbton, und zwar an jeder Stelle gleichzeitig.

   Am Bildschirm gelten diese Regeln. Beim Drucken gewinnen die
   .print-table-Regeln aus index.css: Sie stehen in @media print und tragen
   !important. Das Druckbild aendert sich durch diesen Umbau also nicht. */

.nw-tabelle { font-size: var(--fs-sm); width: 100%; border-collapse: collapse; }
.nw-kopfzeile { background: #f0f0f0; }

/* Zellen der Tagestabelle.
   Mit Elementname davor, und das ist kein Schoenheitsfehler: index.css hat
   ".table th, .table td { padding: var(--s-3) }" - Spezifitaet 0-1-1. Eine
   blosse Klasse (0-1-0) verliert dagegen, und die Zellen bekamen 12px statt
   4px Innenabstand. Gemessen am 07.09.2026 mit einem Vergleich der
   berechneten Werte, BEVOR die Aenderung live ging. Mit dem Elementnamen
   steht es 0-1-1 zu 0-1-1, und bausteine.css laedt nach index.css. */
td.nw-zelle, th.nw-zelle { border: 1px solid #999; padding: var(--s-1); }
td.nw-zelle-links, th.nw-zelle-links { border: 1px solid #999; padding: var(--s-1); text-align: left; }
td.nw-zelle-mitte, th.nw-zelle-mitte { border: 1px solid #999; padding: var(--s-1); text-align: center; }

/* Felder des Kopfbereichs (Kind, Tagespflegeperson, Zeitraum) - gleiche
   Ueberlegung wie oben. */
td.nw-feld, th.nw-feld { padding: var(--s-2); border: 1px solid #999; }
td.nw-feld-titel, th.nw-feld-titel { padding: var(--s-2); border: 1px solid #999; background: #f5f5f5; }

/* Kennzahlen-Kacheln ueber der Tabelle. Vier Varianten, weil jede ihre eigene
   Farbe traegt - das Gemeinsame steht in .nw-kachel. */
.nw-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.nw-kachel { padding: var(--s-3); border-radius: var(--radius-sm); text-align: center; }
.nw-kachel-primaer { background: var(--primary-light); color: var(--primary); }
.nw-kachel-neutral { background: var(--bg-secondary); }
.nw-kachel-warn { background: var(--danger-light); color: var(--danger); }
.nw-kachel-akzent { background: var(--accent-light); color: var(--accent); }
.nw-kachel-titel { font-size: var(--fs-sm); font-weight: 500; }
.nw-kachel-titel-gedaempft { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.nw-kachel-wert { font-size: var(--fs-2xl); font-weight: 700; }

/* Unterschriftenzeile am Blattende */
.nw-unterschrift { flex: 1; border-top: 1px solid #000; padding-top: var(--s-2); text-align: center; font-size: var(--fs-sm); }

/* ==========================================================================
   Belege und Nachweise zum Ausdrucken (UI-006, zweite Runde 07.09.2026)
   ==========================================================================
   Aus renderBillingPanel (Essensgeld-/Betriebsabrechnung) und
   renderTimesheetPrintView (Anwesenheitsnachweis). Beide rendern IN die
   Seite und drucken mit window.print() - kein eigenes Fenster, die
   Stylesheets gelten also. Geprueft, bevor hier etwas ersetzt wurde: ein
   Dokument in einem per document.write gebauten Fenster braucht seine Stile
   weiterhin inline (das gibt es in dieser Datei bei Zeile 1233).

   Werte zeichengenau uebernommen: #555 bleibt #555, #333 bleibt #333.
   td/th tragen den Elementnamen vor der Klasse, weil ".table th, .table td"
   aus index.css sonst mit 0-1-1 gegen 0-1-0 gewinnt. */

td.dok-wert { padding: var(--s-2) 0; font-weight: bold; color: #000; }
td.dok-label { padding: var(--s-2) 0; color: #555; }
.dok-angabe { margin: var(--s-1) 0; font-size: var(--fs-md); color: #555; }
.dok-fett { font-weight: bold; }
.dok-posten { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: var(--s-2); }
td.dok-betrag { text-align: right; font-weight: bold; width: 150px; }
th.dok-th { padding: var(--s-2); text-align: left; }
td.dok-td { padding: var(--s-2); }
.dok-name { margin: var(--s-1) 0; font-size: var(--fs-lg); font-weight: bold; }
.dok-untertitel { margin: var(--s-1) 0 0 0; color: #666; font-size: var(--fs-md); }
.dok-abschnitt { margin-top: 0; font-size: var(--fs-md); text-transform: uppercase; color: #777; letter-spacing: 0.5px; }
.dok-empfehlung { font-size: var(--fs-sm); font-weight: 700; color: #538367; }
.dok-kennzahl-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.dok-kennzahl-titel { font-size: var(--fs-sm); font-weight: 500; }
.dok-kennzahl-titel-grau { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; }
.dok-titel { font-size: var(--fs-3xl); margin: 0; font-weight: 700; }
.dok-kennzahl-gross { font-size: var(--fs-3xl); font-weight: 700; margin-top: var(--s-1); }
.dok-signatur { flex: 1; border-top: 1px solid #333; padding-top: var(--s-2); text-align: center; font-size: var(--fs-sm); }
.dok-signatur-linie { border-top: 1px solid #333; text-align: center; padding-top: var(--s-2); }

/* Haeufigste Inline-Stile ueber alle Dateien (UI-006, dritte Runde
   07.09.2026). Blockweise war ausgereizt: von 1.176 Stellen kommt die
   Haelfte genau einmal vor. Diese acht Gruppen decken zusammen rund 45
   Stellen ueber sechs Dateien. Werte zeichengenau; keine der Stellen liegt
   in einem per document.write gebauten Fenster (geprueft). */
/* Die u-*-Klassen tragen !important - so wie alle anderen in dieser Datei,
   und aus demselben Grund (siehe Dateikopf). Ohne das gewann hier
   ".ang-modus-knopf svg" mit 0-1-1 gegen ".u-i-15" mit 0-1-0, und die
   Symbole der Angebote-Umschalter wurden 16px statt 15px. Vorher hatte an
   dieser Stelle ein Inline-Stil gestanden, der mit 1-0-0-0 gewann - beim
   Umbau faellt genau diese Kraft weg. Gemessen im Browser am 07.09.2026,
   NACHDEM der Paarvergleich gruen war: der prueft die Elemente ausserhalb
   ihres Kontexts und sieht solche Nachbarregeln nicht. */
.u-chipfeld { font-size: var(--fs-sm) !important; padding: var(--s-1) var(--s-2) !important; }
/* Ohne Elementnamen davor UND mit ihm: Die Klasse sitzt sowohl auf
   Tabellenzellen (gegen ".table td" braucht es den Elementnamen) als auch auf
   Knoepfen (dort gewann ".btn-sm" mit 0px 12px). Gemessen: erst danach kam
   ueberall 4px 8px an. */
.u-p-1-2, td.u-p-1-2, th.u-p-1-2 { padding: var(--s-1) var(--s-2) !important; }
/* Ringsum 4px, die enge Schwester von u-p-1-2. Aus demselben Grund mit
   Elementnamen: Sie sitzt auf Knoepfen (.btn-xs) und auf .badge, und beide
   bringen eigene Innenabstaende mit. */
.u-p-1-1, td.u-p-1-1, th.u-p-1-1, button.u-p-1-1, span.u-p-1-1 { padding: var(--s-1) var(--s-1) !important; }
.u-i-15 { width: 15px !important; height: 15px !important; }
.u-i-13 { width: 13px !important; height: 13px !important; }
/* 10px ist die kleinste Symbolgroesse im Bestand - das Haekchen im
   Verbucht-Schild der Bank-Vorschau. */
.u-i-10 { width: 10px !important; height: 10px !important; }

/* ---------------------------------------------------------------------------
   Ausgaben-Reiter (UI-006, 08.09.2026)
   Komponentenklassen, keine Hilfsklassen: Sie beschreiben Teile EINES
   Bereichs und tragen deshalb bewusst kein !important - anders als die u-*
   oben, die sich gegen Nachbarregeln durchsetzen muessen. Die Werte sind die,
   die vorher inline standen; nachgemessen mit tools/design/imkontext.js.
   --------------------------------------------------------------------------- */
.ausg-kartenkopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--s-2);
}
/* width:auto gegen die Grundregel von .form-control (100%) - das Jahr braucht
   nicht die halbe Karte. */
.ausg-jahrwahl {
  width: auto;
  padding: var(--s-1) var(--s-2);
  font-size: var(--fs-sm);
}
.ausg-summenkasten {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--bg-primary);
  padding: var(--s-3);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.ausg-summensymbol { font-size: 2.2rem; color: var(--primary); }
.ausg-summenzahl {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--text-main);
}
.ausg-diagrammfeld {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ausg-diagramm { width: 100%; height: 100%; max-height: 200px; }
.ausg-leer {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-style: italic;
}
.ausg-belegbild {
  max-height: 120px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  display: block;
}
.ausg-journaltitel {
  border-bottom: 2px solid var(--border-color);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-4);
}
.ausg-journalrahmen { max-height: 520px; overflow-y: auto; }
/* Mit td davor, weil ".table td" sonst mit gleicher Wichtigkeit und hoeherer
   Spezifitaet gewinnt - dieselbe Falle wie bei u-p-1-2. */
td.ausg-leerzeile {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: var(--s-6);
}
td.ausg-betrag { font-weight: 700; white-space: nowrap; }
.ausg-loeschknopf {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: var(--fs-lg);
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Monatsabschluss-Assistent (UI-006, 08.09.2026)
   --------------------------------------------------------------------------- */
/* Wie .seite-untertitel, aber ohne dessen margin-bottom:0 - der Absatz behaelt
   seinen Standardabstand nach unten. Deshalb eine eigene Regel statt der
   naheliegenden Wiederverwendung; im Kontext gemessen war das der Unterschied. */
.abschl-einleitung {
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin-top: var(--s-1);
}
.abschl-leiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
  align-items: flex-end;
  margin-top: var(--s-4);
}
.abschl-formleiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-3);
  align-items: flex-end;
  margin-top: var(--s-3);
  max-width: 640px;
}
/* Der Fusshinweis unter einem Schritt. Steht dreimal im Panel; wo der Abstand
   nach oben kleiner sein soll, kommt u-mt-1 dazu (das traegt !important und
   gewinnt gegen die margin-Kurzform hier). */
.abschl-fuss {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: var(--s-2) 0 0 0;
}
/* --danger, NICHT --danger-ink: Die beiden Toene unterscheiden sich (48% zu
   34% Helligkeit), u-danger waere also nicht dasselbe gewesen. */
.abschl-warnzeile {
  color: var(--danger);
  margin-bottom: var(--s-2);
}
.abschl-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-1);
}
.abschl-fortschritt {
  padding: var(--s-4) var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.abschl-balken {
  flex: 1;
  min-width: 160px;
  height: 10px;
  background: var(--bg-secondary);
  border-radius: 999px;
  overflow: hidden;
}
/* Ein einzelner Abstand nach links, fuer Knoepfe hinter Fliesstext. */
.u-ml-2 { margin-left: var(--s-2) !important; }
.u-absatz-md { font-size: var(--fs-md) !important; margin: var(--s-1) 0 !important; }

/* Die dok-* sind Komponentenklassen fuer Belege, keine Hilfsklassen - sie
   ersetzen genau eine Stelle und brauchen kein !important. */
.dok-signatur-klein { flex: 1; border-top: 1px solid #333; padding-top: var(--s-2); text-align: center; font-size: 9pt; }
.dok-fliesstext { font-size: 10pt; line-height: 1.4; margin: 0; white-space: pre-line; }

/* Vierte Runde UI-006 (07.09.2026): die naechsten haeufigsten Stile ueber
   alle Dateien. Elementtypen aus der Messung, nicht geraten - u-p-1-2 war in
   der Runde davor nur fuer td/th definiert und sass in Wahrheit auf Knoepfen.
   Die u-* tragen !important (Konvention der Datei), die dok-* nicht.
   'display: none' bleibt bewusst unangetastet: Skripte schalten es per
   el.style.display um, eine Klasse wuerde das brechen. */
button.u-fl-1, div.u-fl-1, .u-fl-1 { flex: 1 !important; }
input.u-feld-xs, select.u-feld-xs, .u-feld-xs { font-size: var(--fs-sm) !important; padding: var(--s-1) !important; }
.u-zeile-gap2 { display: flex !important; gap: var(--s-2) !important; }
div.u-stapel-2, form.u-stapel-2, .u-stapel-2 { display: flex !important; flex-direction: column !important; gap: var(--s-2) !important; }
.u-einleitung { color: var(--text-muted) !important; font-size: var(--fs-md) !important; line-height: 1.5 !important; margin-bottom: var(--s-4) !important; }
span.u-fehlertext, div.u-fehlertext, .u-fehlertext { color: var(--danger) !important; font-size: var(--fs-sm) !important; }
.u-block-680 { max-width: 680px !important; margin-top: var(--s-5) !important; }
input.u-feld-sm, .u-feld-sm { font-size: var(--fs-sm) !important; padding: var(--s-2) !important; }
div.u-stapel-4-mt, form.u-stapel-4-mt, .u-stapel-4-mt { display: flex !important; flex-direction: column !important; gap: var(--s-4) !important; margin-top: var(--s-4) !important; }
.u-max-450 { max-width: 450px !important; }
button.u-voll-mt2, .u-voll-mt2 { width: 100% !important; margin-top: var(--s-2) !important; }
button.u-selbst-ende, .u-selbst-ende { align-self: flex-end !important; }
img.u-bild-fuellt, .u-bild-fuellt { width: 100% !important; height: 100% !important; object-fit: cover !important; }
h4.u-zwischentitel, .u-zwischentitel { font-size: var(--fs-md) !important; font-weight: 700 !important; color: var(--primary-dark) !important; margin: var(--s-4) 0 var(--s-2) !important; }
.dok-linie-200 { border-top: 1px solid #ccc; padding-top: var(--s-1); text-align: center; width: 200px; }
.u-seitenumbruch { page-break-after: always !important; }
.dok-text-grau { color: #4b5563; font-size: var(--fs-lg); line-height: 1.6; white-space: pre-line; }
.dok-text-dunkel { color: #374151; font-size: var(--fs-lg); line-height: 1.6; margin-top: var(--s-4); }
form.u-formularstapel, .u-formularstapel { display: flex !important; flex-direction: column !important; gap: var(--s-4) !important; text-align: left !important; }
.u-hinweis-md { color: var(--text-muted) !important; font-size: var(--fs-md) !important; margin: var(--s-1) 0 0 0 !important; }
.u-raster-350 { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important; gap: var(--s-5) !important; }
.u-i-17 { width: 17px !important; height: 17px !important; }
.u-mt-3-mb-0 { margin-top: var(--s-3) !important; margin-bottom: 0 !important; }

/* Die zwei Ergebnisse der Einnahmen-Ueberschuss-Rechnung (BET-027).
   Bis zum 08.09.2026 stand dort EINE grosse Zahl, "Gewinn / Verlust", und
   direkt darunter die Empfehlung, die Pauschale zu nehmen - die zu einem
   anderen Ergebnis fuehrt. Beide Wege stehen jetzt nebeneinander, weil man
   sich fuer einen entscheiden muss. */
.euer-ergebnis-titel { margin: 0; font-size: var(--fs-xl); color: var(--ink-1); }
.euer-ergebnis-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.euer-ergebnis {
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: var(--s-4);
  text-align: center;
  background: var(--bg-secondary);
}
/* Die empfohlene Seite hebt sich ab - aber beide bleiben lesbar. Eine
   ausgegraute Alternative laedt dazu ein, sie zu uebersehen, und genau das
   war das Problem. */
.euer-ergebnis-empfohlen { border-color: #538367; background: #f0f7f4; }
.euer-ergebnis-label { font-size: var(--fs-sm); color: var(--text-muted); }
.euer-ergebnis-wert {
  font-size: 2.2rem;
  font-weight: 800;
  color: #538367;
  font-variant-numeric: tabular-nums;
}
.euer-ergebnis-minus { color: #cf7d5c; }

/* Hinweiskarte mit Knoepfen, oben im Elternbereich (BET-031). Steht dort,
   weil die Push-Anmeldung bis zum 08.09.2026 nur im Dropdown hinter der
   Glocke sass - und entsprechend niemand sie gefunden hat. */
.karte-hinweis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  background: var(--info-soft, #e6f4fa);
  border: 1px solid var(--primary);
  border-radius: 12px;
  padding: var(--s-4);
}
/* Ohne diese Zeile bleibt der Kasten sichtbar, obwohl das Skript hidden
   setzt: [hidden] am Dateiende von index.css hat dieselbe Spezifitaet wie
   .karte-hinweis, und bausteine.css wird NACH index.css geladen - bei
   Gleichstand gewinnt die spaetere Regel, also display: flex. "Spaeter"
   und "Ablegen" quittierten den Klick, der Kasten kam aber bei jedem Laden
   von #/eltern/alltag wieder und belegte 130-210px am Seitenanfang.
   Gilt auch fuer #allergie-luecke in admin.js, das dieselbe Klasse nutzt
   und ebenfalls verschwinden soll, wenn es nichts zu melden gibt. */
.karte-hinweis[hidden] { display: none; }
.karte-hinweis > div:first-child { flex: 1 1 260px; }
.karte-hinweis strong { font-size: var(--fs-lg); }

/* ==========================================================================
   Mobil-Nachbesserung 20.09.2026: Tippflaechen und Umbrueche
   ==========================================================================
   Gegenstueck zum gleichnamigen Block am Ende von src/index.css. Was hier
   steht, gehoert zu Klassen, die in DIESER Datei definiert sind:
   bausteine.css wird nach index.css geladen, eine Regel drueben wuerde bei
   gleicher Spezifitaet verlieren. Bedingung und Begruendung siehe dort. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  /* .u-checkzeile stand fest auf 32px. Die Zeile ist ganz klickbar, also
     ist sie auch die Tippflaeche - 20 Stellen im Projekt. */
  .u-checkzeile { min-height: 44px; }
  /* Das Kreuz zum Loeschen einer Ausgabe ist ein blankes Zeichen ohne
     Rahmen und traf am Handy in beide Richtungen zu knapp. */
  .ausg-loeschknopf {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Zwei Zeilen-Hilfsklassen ohne flex-wrap: passte der Inhalt nicht, lief er
   aus dem Bild und die ganze Seite liess sich waagerecht schieben - bei
   .u-zeile-2 der Knopf "Tabelle erzeugen" neben dem Monatsfeld, bei
   .u-zeile-gap2 der Knopf "Stundennachweis drucken" (43px ueber den Rand).
   wrap greift nur, wenn eine Zeile wirklich nicht passt; oberhalb von
   700px bleibt alles, wie es war. !important, weil beide Klassen ihre
   uebrigen Angaben in dieser Datei ebenfalls so setzen. */
@media (max-width: 700px) {
  .u-zeile-2,
  .u-zeile-gap2 { flex-wrap: wrap !important; }
}