/* komponenten.css — die gemeinsame Stilschicht für Dobby (P2, Umbau 2026-08).
 * Baut auf theme.css auf (Variablen --bg/--panel/--rand/--text/--dim/--akzent/
 * --gruen), ergänzt sie NICHT. Personenfarben ausschließlich über --pf (Fallback
 * #8a8f99, wie überall im Code über farben.get(name, '#8a8f99')).
 *
 * Jeder Block unten zitiert, aus welchen heutigen Klassen/IDs er entstanden ist
 * (familie.html, mein_tag.html, punkte.html, erinnerungen.html, jobs.html,
 * aufgabenpanel.html) — und wo die Fassungen NICHT übereinstimmten (das sind
 * bewusste Entscheidungen, keine Zufallswerte; volle Begründung im Umbau-Log).
 * Keine IDs als Selektor. Keine Farbe hart codiert außer den wenigen, explizit
 * kommentierten Ausnahmen (theme.css hat keine Entsprechung für sie).
 *
 * Einbindung: <link rel="stylesheet" href="/static/komponenten.css?v={{ ui_version }}">
 */

/* ===================================================================
   .karte — Container mit Rand + Radius.
   Ersetzt: base.html .panel · familie.html/mein_tag.html .karte · erinnerungen.html .row.
   Werte übernommen aus .karte (familie.html/mein_tag.html, byte-identisch — der
   Namensgeber des Bausteins). .panel (10px Radius, 1rem Padding/Margin) und .row
   (10px Radius, .55rem/.7rem Padding, .4rem Margin) weichen ab.
   =================================================================== */
.karte {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: .6rem .75rem;
  margin-bottom: .6rem;
}

/* ===================================================================
   .kt — Kartenüberschrift: Versalien, gedimmt, optional .zahl rechts.
   Ersetzt: .kt (familie/mein_tag/punkte) · .gh (erinnerungen) · .ap-kopf (aufgabenpanel).
   Werte aus familie.html/mein_tag.html (byte-identisch). punkte.html weicht in
   Font-Größe/Margin leicht ab, .gh zusätzlich in Gewicht + oberem Abstand (diente
   dort als Abschnitts-Trenner zwischen freien Zeilen, nicht nur als Karten-Titel).
   .ap-kopf trägt zusätzlich eine Trennlinie (border-bottom) + eigenes Padding —
   die NICHT mit in die Basis übernommen wurde (hätte sonst allen anderen Karten-
   Überschriften ungewollt eine Linie verpasst). display:flex ist neu, aber bei
   einzelnem Textinhalt optisch wirkungslos (macht nur .zahl rechts möglich).
   =================================================================== */
.kt {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
  margin-bottom: .45rem;
}
.kt .zahl { margin-left: auto; color: var(--text); font-weight: 800; }

/* ===================================================================
   .zeile — Flex-Zeile mit Trennlinie oben.
   Ersetzt: .e (familie/mein_tag) · .vzeile (familie/punkte) · .ap-zeile (aufgabenpanel).
   Werte aus .vzeile (2 Fassungen, byte-identisch). .e weicht leicht ab (Padding
   .35rem statt .3rem) UND hat eine nicht themefähige Trennlinie (#ffffff10 statt
   var(--rand)) — das darf laut Auftrag nicht mit übernommen werden, siehe
   Rückmeldung. .ap-zeile ist strukturell etwas anderes (farbig getönte Pillen-
   Zeile mit --pf-Hintergrund statt Trennlinie) — NICHT abbildbar, größter Fund.
   .frisch (Abhak-Pop-Animation) aus .e.frisch/.vzeile.frisch übernommen.
   =================================================================== */
.zeile {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  margin: 0;
  border-top: 1px solid var(--rand);
}
.zeile:first-of-type { border-top: 0; }
.zeile.frisch { animation: zeile-frisch .4s ease; }
@keyframes zeile-frisch {
  0% { transform: scale(1); }
  45% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* .zeile .hak — Abhak-Knopf, mind. 44×44 px (a11y-Untergrenze aus dem Auftrag).
   Ersetzt: .erlbtn (familie, 40px) · .erl (mein_tag, gefüllte Amber-Pille) ·
   .vhak (punkte, bereits 44px). Werte aus .vhak übernommen (erreicht die
   geforderte Mindestgröße schon heute; .erlbtn/.erl liegen darunter bzw. sind
   stilistisch etwas anderes — beides ein Fund, siehe Rückmeldung).
   .gross (52px) 1:1 aus punkte.html .hub-jobs .vhak (Kinder-Hub).
   .klein (26px) ist NEU nach Vorgabe der Tabelle: aufgabenpanel.html hatte bisher
   gar keinen echten Knopf (nur eine unklickbare <span class="hak">), also kein
   Pixel-Vorbild — bewusst kleiner als die a11y-Untergrenze, weil das Panel eine
   mausbediente Desktop-Fläche ist (kein Touch-Ziel). */
.zeile .hak {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--rand);
  background: var(--bg);
  color: var(--dim);
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
}
.zeile .hak:not(:disabled):hover { border-color: var(--gruen); color: var(--gruen); }
.zeile .hak:disabled { color: var(--gruen); cursor: default; opacity: .85; }
.zeile .hak.gross { min-width: 52px; min-height: 52px; font-size: 1.35rem; }
.zeile .hak.klein { min-width: 26px; min-height: 26px; border-radius: 7px; font-size: .85rem; }

/* ===================================================================
   .pille — Rundpille (Badge). Basis absichtlich schlank: die Quellfassungen
   (.pkt/.vpkt, .badge, .ueberf/.ueb, .gz) weichen in Font-Größe/-Gewicht so
   weit voneinander ab, dass eine gemeinsame Basis sie verwässert hätte — die
   Varianten tragen die eigentliche Optik.
   =================================================================== */
.pille {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .78rem;
}

/* .stern — Punkte-Pille (⭐ N). Werte aus .vpkt (familie/punkte, byte-identisch,
   MIT Hell-Modus). .pkt (mein_tag) hatte KEINEN Hell-Modus (Fund, wird hier
   repariert) und Gewicht 700 statt 800. Die Farbtöne selbst (#3a3320/#ffe9bf
   dunkel, #f6e7c4/#7a5a12 hell) haben keine theme.css-Entsprechung — bewusste
   Ausnahme von „keine Farbe hart codiert", siehe Rückmeldung.
   .verfaellt (türkiser Rand „läuft heute ab") steht NICHT in der Auftrags-
   tabelle (nur .stern/.ueberfaellig/.pflicht/.angebot/.ganztag) — hier trotzdem
   ergänzt, weil sie in 4 von 4 Quellen vorkommt und sonst ersatzlos verloren
   ginge; bitte gegenprüfen, ob sie so bleiben soll. */
.pille.stern {
  font-weight: 800;
  font-size: .85rem;
  padding: .12rem .5rem;
  color: #ffe9bf;
  background: #3a3320;
  border: 1px solid transparent;
}
html.hell .pille.stern { color: #7a5a12; background: #f6e7c4; }
.pille.stern.verfaellt { border-color: #2fd0c6; }

/* .ueberfaellig — Warnpille (⏰ seit …). Werte aus familie/mein_tag .ueberf
   (byte-identisch). KEINE der Quellen hatte einen Hell-Modus (Fund) — hier neu
   ergänzt, Farbwahl ist ein Vorschlag (Rot-Ton analog zur bestehenden Warnfarbe),
   bitte gegenprüfen. */
.pille.ueberfaellig {
  color: #f0b0a8;
  background: #3a2020;
  font-weight: 700;
  font-size: .78rem;
}
html.hell .pille.ueberfaellig { color: #8a2f26; background: #f6dcd8; }

/* .pflicht / .angebot — Job-Art-Badges. Einzige Quelle: jobs.html .badge
   (randbetont statt gefüllt, kein Hell-Modus vorhanden — hier neu ergänzt). */
.pille.pflicht, .pille.angebot { background: transparent; border: 1px solid var(--rand); }
.pille.pflicht { color: #8fd0ff; border-color: #3a6b8a; }
html.hell .pille.pflicht { color: #205a86; border-color: #a9cbe6; }
.pille.angebot { color: #ffe9bf; border-color: #7a5a1f; }
html.hell .pille.angebot { color: #7a5a12; border-color: #d8c48f; }

/* .ganztag — „ganztägig"-Chip in Termin-Zeilen. familie.html nutzte 6px Radius
   (Kachel), mein_tag.html 999px (echte Pille) — echter Formwiderspruch, hier
   auf Pille vereinheitlicht (Namensgeber des Bausteins ist .pille). familie.html
   ändert dadurch sichtbar die Form, siehe Rückmeldung. Kein Hell-Modus in den
   Quellen vorhanden — hier neu ergänzt. */
.pille.ganztag {
  color: #cdd7e3;
  background: #33404f;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .72rem;
  padding: .15rem .45rem;
}
html.hell .pille.ganztag { color: #33404f; background: #d7dee6; }

/* ===================================================================
   .person — Farbkreis mit Initiale. Ersetzt: .kreis/.pkreis (familie/punkte) ·
   .dot/.wdot (familie/mein_tag). Farbe ausschließlich über --pf (Fallback
   #8a8f99, identisch zum Jinja-Fallback im ganzen Code).
   #14161a als Textfarbe ist ABSICHTLICH fest (nicht theme-abhängig) — Initialen
   auf hellen/bunten Personenfarben müssen in beiden Themes dunkel bleiben, sonst
   bricht die Lesbarkeit im Hell-Modus (keiner der Quellen hatte hierfür je eine
   Variable, dieselbe feste Farbe steht schon in Original-.pkreis/.kreis).
   .pkreis' grüner „ist da"-Präsenzpunkt (.online) ist NICHT Teil der Tabelle
   (nur .s/.m/.l) und fehlt hier entsprechend — Fund, siehe Rückmeldung.
   =================================================================== */
.person {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pf, #8a8f99);
  color: #14161a;
  font-weight: 800;
}
.person.s { width: .85rem; height: .85rem; font-size: .55rem; }
.person.m { width: 30px; height: 30px; font-size: .95rem; }
.person.l { width: 36px; height: 36px; font-size: 1.05rem; }

/* ===================================================================
   .gruppe — Personengruppe mit Farbstreifen links (--pf). Ersetzt: .vgruppe
   (familie/punkte, byte-identisch). .d-gruppe kommt in keinem der sechs
   Templates vor — vermutlich eine künftige Desktop-Klasse, hier rein nach
   Tabellen-Beschreibung nachgebaut, kein Pixel-Vorbild vorhanden.
   Hinweis: die Auftragstabelle listet .vgruppe SOWOHL unter .karte als auch
   unter .gruppe — Dopplung im Baukasten-Dokument. Hier als .gruppe umgesetzt,
   weil die Beschreibung „Personengruppe mit Farbstreifen links" exakt zutrifft
   und der Hintergrund (var(--bg), nicht var(--panel)) sich von .karte
   unterscheidet — siehe Rückmeldung.
   =================================================================== */
.gruppe {
  background: var(--bg);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--pf, #8a8f99);
  border-radius: 12px;
  padding: .55rem .6rem;
}

/* ===================================================================
   .balken — Fortschrittsbalken. Einzige Quelle: punkte.html (.balken +
   .balken-fuellung), unverändert übernommen. Füllung jetzt verschachtelt
   (.balken .fuellung) statt der flachen .balken-fuellung — Namenskonsequenz
   aus .zeile .hak. Der zweite Gradient-Stopp (#f0c766) hat keine theme.css-
   Entsprechung und hatte auch in der Quelle keinen Hell-Modus — unverändert
   übernommen, kein neuer Fund.
   =================================================================== */
.balken {
  height: 16px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--rand);
  overflow: hidden;
}
.balken .fuellung {
  height: 100%;
  background: linear-gradient(90deg, var(--akzent), #f0c766);
  border-radius: 999px 0 0 999px;
  transition: width .5s ease;
}

/* ===================================================================
   .leer — Leerzustand, mit Platz für eine Handlung (.leer .los).
   Ersetzt: .leer (familie/mein_tag/punkte, byte-identisch) · .ap-leer
   (aufgabenpanel: größeres Padding .6rem statt .3rem + zentriert statt
   linksbündig — Fund, siehe Rückmeldung). display:flex ist neu, bei reinem
   Textinhalt optisch wirkungslos (macht nur .leer .los möglich).
   =================================================================== */
.leer {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  color: var(--dim);
  padding: .3rem 0;
}
.leer .los { align-self: flex-start; }

/* ===================================================================
   .toast — eine Rückmeldung für alle Seiten. Ersetzt: #hub-meldung (punkte) ·
   #ap-meldung (aufgabenpanel) · .banner (erinnerungen/jobs) · .feier (punkte).
   Werte aus .banner übernommen (2 Templates byte-identisch, Radius/Padding
   deckt sich mit .feier). #hub-meldung/#ap-meldung sind kleiner/enger (Padding,
   Radius, expliziter kleinerer Font) — Fund, siehe Rückmeldung.
   Sichtbarkeit über .an, wie es #hub-meldung/#ap-meldung schon vormachten —
   bei Jinja-bedingtem Rendern (wie bisher .banner) muss .an mit ins Markup.
   .erfolg ersetzt .feier: der Farbverlauf (#2f6b3f→#183a20) ist hier durch
   color-mix() aus var(--gruen) angenähert (theme-fähig, siehe Rückmeldung für
   die Abweichung vom Original-Gradient).
   =================================================================== */
.toast {
  display: none;
  padding: .6rem .8rem;
  border-radius: 12px;
  margin-bottom: .8rem;
  font-weight: 600;
  border: 1px solid var(--akzent);
  background: color-mix(in srgb, var(--akzent) 16%, transparent);
  color: var(--text);
}
.toast.an { display: block; }
.toast.erfolg {
  border-color: var(--gruen);
  background: color-mix(in srgb, var(--gruen) 20%, transparent);
  animation: toast-feier .5s ease;
}
@keyframes toast-feier {
  from { transform: scale(.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ===================================================================
   .modal — Overlay + Box. Ersetzt: #werdid (familie/mein_tag, byte-identisch) ·
   #heimpop (familie) · #pinmodal (base.html — nur als Vorlage zitiert, base.html
   wird in P2 NICHT umgestellt, bleibt bei seinem eigenen #pinmodal).
   Maße/Zentrierung aus #werdid übernommen. #heimpop weicht in der Position ab
   (von oben statt zentriert, padding-top:8vh) und in der Abdunklung (#000a statt
   #000b) — Fund, siehe Rückmeldung. #pinmodal hat einen höheren z-index (100,
   damit es über anderen offenen Dialogen erscheinen kann) — bleibt bei seinem
   eigenen Wert, da nicht migriert.
   Die Abdunklung (#000b) ist die einzige unkommentierte Farb-Ausnahme: ein
   Overlay-Schwarz ist bewusst themeunabhängig (dimmt immer gleich, in beiden
   Quellen identisch), keine echte Palettenfarbe.
   =================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000b;
}
.modal.auf { display: flex; }
.modal .box {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: 16px;
  padding: 1.1rem;
  width: min(92%, 320px);
}