/* 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-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; }
.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-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-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 700px bleibt es eine Tabelle; darunter
   wird jede Zeile eine Karte und jede Zelle eine Zeile "Label: Wert".
   ========================================================================== */
@media (max-width: 700px) {
  .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;
    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); }
.sprungleiste a { display: inline-flex; align-items: center; min-height: 36px; 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); }
  .intake-foot .btn { min-height: 40px; 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; }
.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; }