/* Theo regelt – Grundgestaltung. Farben aus brand/tokens/tokens.json (Test prüft das), Systemschriften (keine Webfonts). */
:root {
  --paper: #F6F8FC; --card: #FFFFFF; --ink: #16213A; --muted: #586179; --line: #DCE2EC;
  --blue: #2443B8; --blue-soft: #E7ECFB; --marker: #FFE45C; --ok: #1F7A4D; --bad: #B42318;
  --line-strong: #7D879E; --on-blue: #FFFFFF;
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0E1525; --card: #172038; --ink: #E8ECF5; --muted: #A1AAC0; --line: #283350;
    --blue: #8CA2FF; --blue-soft: #1E2A4D; --marker: #F2D53C; --ok: #5BC48D; --bad: #FF8A80;
    --line-strong: #64718F; --on-blue: #0E1525; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--font);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(24px + env(safe-area-inset-bottom)) env(safe-area-inset-left); }
#app { max-width: 720px; margin: 0 auto; padding: 0 16px; }
h1, h2 { line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.01em; hyphens: auto; overflow-wrap: break-word; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; }
h1:focus, h2:focus { outline: none; }
p { margin: 0 0 12px; }
.lead { color: var(--muted); }
.mono { font-family: var(--mono); }
.loading { padding: 48px 0; color: var(--muted); text-align: center; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; }
.brand img { border-radius: 8px; }
.family { color: var(--muted); font-size: .95rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
form.card, .card { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.card > * { min-width: 0; }
label { font-weight: 600; margin-top: 6px; }
input, select { font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--line-strong); border-radius: 10px; padding: 11px 14px; width: 100%; min-width: 0; }
input:focus, select:focus { border-color: var(--blue); outline: none; }
/* Tastatur: deutlich sichtbarer Ring wie bei Knöpfen, nicht nur ein farbiger Rand (A11Y-03) */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
input[type=file] { padding: 9px; }
/* Ankreuzfelder: feste Größe statt Feldbreite (sonst rutscht der Haken mitten in die Zeile), 24 px Ziel */
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; flex: none; padding: 0; margin: 0; accent-color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.btn { font: 600 1rem var(--font); border-radius: 999px; border: 2px solid var(--blue); background: var(--blue); color: var(--on-blue);
  padding: 12px 22px; cursor: pointer; justify-self: start; margin-top: 8px; min-height: 48px; }
.btn.ghost { background: transparent; color: var(--blue); }
.btn.small { padding: 6px 14px; min-height: 44px; font-size: .95rem; margin-top: 0; }
.btn:disabled { opacity: .6; cursor: progress; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.msg { min-height: 0; margin: 0; font-size: .95rem; }
.msg.err { color: var(--bad); }
.msg.ok { color: var(--ok); font-weight: 600; }
.msg.info { color: var(--muted, #555); }
.msg.warn { color: var(--bad); font-weight: 600; background: var(--blue-soft); border-radius: 8px; padding: .5rem .6rem; }
.msg.warn[hidden], .msg[hidden] { display: none; }
.item-sub.keep.over { color: var(--bad); }
.scan[hidden] { display: none; }
.scan .preview { max-height: 220px; width: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.check { display: flex; gap: .5rem; align-items: flex-start; font-weight: normal; line-height: 1.5; }
.check input { margin-top: 0; }   /* Haken neben der ersten Zeile, auch wenn der Text umbricht */
fieldset.erkannt { border: 1px solid var(--line, #ddd); border-radius: 12px; padding: .75rem; margin: .5rem 0; display: grid; gap: .35rem; }
fieldset.erkannt legend { font-weight: 600; padding: 0 .25rem; }
fieldset.erkannt[hidden] { display: none; }
.warn { background: var(--blue-soft); border-radius: 10px; padding: 12px 14px; }
.hint { color: var(--muted); font-size: .92rem; }

.rk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; font-size: 1.25rem; font-weight: 600; letter-spacing: .06em; }
.rk span { background: var(--paper); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 4px; text-align: center; }

/* Navigation (0.20.0): Handy unten, mit dem Daumen erreichbar; ab Tablet-Breite oben. Vier Hauptbereiche + „Mehr“. */
/* Breite nach Inhalt verteilt (flex: 1 1 auto): „Dokumente“ bekommt mehr Platz als „Mehr“ – sonst wird es mit breiteren
   Systemschriften (z. B. DejaVu unter Linux) auf 320–360 px abgeschnitten */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex;
  background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px;
  padding: 6px 2px; border: 0; background: none; color: var(--muted); font: 600 clamp(.7rem, 3.4vw, .8rem) var(--font); cursor: pointer;
  flex: 1 1 auto; min-width: 48px; }
.bottom-nav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Aktueller Bereich: Farbe UND Unterstrich – nie nur Farbe (WCAG 1.4.1) */
.bottom-nav button[aria-current="page"] { color: var(--blue); }
.bottom-nav button[aria-current="page"] span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
#app { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
/* Fokus nie unter der Leiste (WCAG 2.4.11): Scrollen zum Fokus/Sprungziel hält Abstand zur Leiste */
html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 760px) {
  html { scroll-padding-bottom: 0; scroll-padding-top: 84px; }
  .bottom-nav { position: sticky; top: 0; bottom: auto; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); padding-bottom: 0; }
  #app { padding-bottom: 24px; }
}
.back { margin-bottom: 8px; }
.mehr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mehr-list button, .mehr-list a { display: grid; gap: 2px; width: 100%; text-align: left; padding: 14px 16px; min-height: 56px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; }
.mehr-list button:hover, .mehr-list a:hover { border-color: var(--blue); }
.faq { border-top: 1px solid var(--line); padding: 10px 0; }
.faq summary { font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.faq p { margin: 4px 0 0; }

.items, .members, .joins { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.item, .members li, .joins li { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; min-width: 0; }
/* Kein Inhalt darf die Seite verbreitern (Umbruch auf 320 px, WCAG 1.4.10) */
.item > *, .members li > *, .joins li > * { min-width: 0; }
.item-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; align-items: baseline; min-width: 0; }
.item-title { overflow-wrap: anywhere; }
.item-sub { color: var(--muted); font-size: .9rem; margin: 0; }
.item-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.preview { max-width: 100%; border-radius: 8px; margin-top: 6px; }
.empty { color: var(--muted); border: none !important; }
.chip { justify-self: start; font-size: .78rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip.familie { background: var(--marker); color: #16213A; border-color: transparent; }
.chip.eltern { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.chip.bad, li.bad { color: var(--bad); border-color: var(--bad); }
.code { color: var(--muted); font-size: .85rem; margin: 0; }
.invite-link { display: grid; gap: 8px; }
.qr svg { width: min(240px, 70vw); height: auto; display: block; border-radius: 8px; border: 1px solid var(--line); }
.due { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.due li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.due li.urgent { border-left-color: var(--marker); }
.due li.overdue { border-left-color: var(--bad); }
.due li.empty { display: block; border: none; color: var(--muted); }
.due li.hinweis { display: block; }
.due li.hinweis p { margin: 0 0 8px; }
/* Verträge und Fixkosten */
.big { font: 700 1.6rem var(--font); margin: 4px 0; }
.item.vertrag.termin .status-termin { color: var(--ink); font-weight: 600; }
.item.vertrag.beendet .item-title { color: var(--muted); }
.due .when { font-weight: 700; }
.due li.overdue .when { color: var(--bad); }
.due .msg { grid-column: 1 / -1; }
@media (max-width: 420px) { .due li { grid-template-columns: 1fr auto; } .due .when { grid-column: 1 / -1; } }

/* Alltag: Einkaufsliste und Aufgaben */
.stack { display: grid; gap: 8px; }
.add-row input:first-child { flex: 1 1 10rem; min-width: 0; }
.add-row .menge { flex: 0 1 6rem; min-width: 0; }
h3.sub { font-size: 1rem; margin: 14px 0 4px; }
.checklist { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.checklist li.urgent { border-left-color: var(--marker); }
.checklist li.overdue { border-left-color: var(--bad); }
.checklist li.empty { display: block; border: none; color: var(--muted); }
.checklist li.lesen { display: block; }
.checklist li.gruppe, .items li.gruppe { display: block; border: none; padding: 10px 2px 0; font-weight: 700; color: var(--ink); }
.checklist .notiz { font-size: .82rem; }
/* Schmale Handys: Löschen unter den Text, damit der Text die ganze Breite bekommt */
@media (max-width: 420px) { .checklist li > .btn { grid-column: 2; justify-self: start; } }
.checklist .what { overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.checklist .what .item-sub { display: block; }
.checklist.done .what strong { text-decoration: line-through; color: var(--muted); }
.tick { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--line-strong); background: var(--card);
  color: var(--ok); font: 700 1.3rem var(--font); cursor: pointer; }
.tick[aria-pressed="true"] { border-color: var(--ok); }
.tick:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* Notfall */
.notrufe { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.notrufe .tel { font-weight: 700; font-size: 1.1rem; color: var(--blue); }
.notfall-felder { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0; }
.notfall-felder dt { color: var(--muted); }
.notfall-felder dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }

/* Farbe je Person (web/js/familie.js FARBEN; Test vergleicht) – nur Markierung, der Name steht immer daneben */
.p-blau { --p: #2443B8; } .p-gruen { --p: #1F7A4D; } .p-rot { --p: #B42318; } .p-orange { --p: #B54708; } .p-lila { --p: #7A2E8E; } .p-tuerkis { --p: #0E7490; } .p-pink { --p: #C11574; } .p-braun { --p: #6B5B3E; }
@media (prefers-color-scheme: dark) { .p-blau { --p: #8CA2FF; } .p-gruen { --p: #5BC48D; } .p-rot { --p: #FF8A80; } .p-orange { --p: #F7A23B; } .p-lila { --p: #D49BE6; } .p-tuerkis { --p: #4FC3D9; } .p-pink { --p: #F58AC4; } .p-braun { --p: #C9B48A; } }
.pdot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: var(--p, var(--line)); margin-right: .35em; vertical-align: -.05em; flex: none; }
.agenda li.person { border-left: 4px solid var(--p, var(--line)); padding-left: 8px; }
.agenda strong + .item-sub { margin-left: .4em; }
.farbwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.farbwahl button { min-width: 44px; min-height: 44px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: 600 .9rem var(--font); padding: 4px 12px; cursor: pointer; }
.farbwahl button[aria-pressed="true"] { border-color: var(--ink); }
.agenda li.frist .item-title, .agenda li.kuendigung strong, .agenda li.aufgabe strong, .agenda li.garantie strong { font-weight: 600; }

@media print {
  body { background: #fff; color: #000; }
  body.druck-notfall #app > :not(main), body.druck-notfall main > :not(#notfall),
  body.druck-notfall #notfall > :not(#nf-box) { display: none !important; }
  .top, .btn, label, input, .msg, .tabs, .bottom-nav { display: none !important; }
  .card { border: none; }
  .rk span { border: 1px solid #000; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.banner { margin: 0 auto 12px; max-width: 720px; padding: 12px 14px; border-radius: 12px;
  background: #fff4d6; color: #5a4200; border: 1px solid #f0d58a; line-height: 1.4; }
.banner a { color: inherit; font-weight: 600; }
@media (prefers-color-scheme: dark) { .banner { background: #3a3112; color: #ffe7a8; border-color: #6b5a22; } }

/* Rechnungen */
.chip.pay.offen { background: var(--blue-soft); color: var(--blue); }
.chip.pay.ueberfaellig { background: var(--bad); color: var(--card); }
.chip.pay.bezahlt { background: var(--ok); color: var(--card); }
.msg.giro { display: grid; gap: .4rem; justify-items: start; }
svg.girocode { width: 220px; height: 220px; background: #fff; border-radius: 8px; }

/* Geräte koppeln */
.code-big { font-size: 1.8rem; letter-spacing: .15em; text-align: center; margin: .5rem 0; }
.code-big[hidden] { display: none; }
.link-box .qr svg, #link-qr svg { width: 240px; height: 240px; background: #fff; }
.devices { list-style: none; padding: 0; display: grid; gap: .4rem; }
.card.routine { border-left: 6px solid var(--marker); }

/* Familienwand (Tablet) */
.wall-brand { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wall-clock { color: var(--muted); font-size: 1.1rem; }
.people .btn.person { font-size: 1.2rem; padding: 14px 22px; }
.pin-dots { font-size: 2.4rem; letter-spacing: .4em; text-align: center; margin: 8px 0; }
.pin-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 320px; margin: 0 auto 12px; }
.pin-key { font-size: 1.6rem; padding: 16px 0; }
.wall-night { position: fixed; inset: 0; background: #000; color: #333; display: flex; align-items: flex-end;
  justify-content: center; padding: 24px; z-index: 50; cursor: pointer; }
.agenda { list-style: none; padding: 0; margin: 0; }
.agenda li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.agenda li.stunde { color: var(--muted); }
.agenda .when { min-width: 7.5em; font-variant-numeric: tabular-nums; }
.agenda-day h3 { margin: 14px 0 4px; font-size: 1rem; }
.plan-row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 2fr) minmax(0, 1fr); gap: 6px; margin-bottom: 6px; }
label.check { display: flex; gap: .5rem; align-items: flex-start; }
.agenda-day.heute h3 { color: var(--blue); }
.wall-text { white-space: pre-wrap; max-height: 50vh; overflow: auto; font-family: var(--mono); }

/* Neue Version bereit (PERF-03): unten fest, über allem, ohne die Seite zu verdecken */
.update-note { position: fixed; left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 20; display: flex; gap: 12px; align-items: center;
  justify-content: space-between; flex-wrap: wrap; background: var(--card); color: var(--ink); border: 2px solid var(--blue);
  border-radius: var(--radius); padding: 10px 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
@media print { .update-note { display: none !important; } }

/* Aufklappbare Zusatzfelder in Formularen (0.20.0) */
.mehr-optionen { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 4px 12px; margin: 10px 0; }
.mehr-optionen summary { cursor: pointer; font-weight: 600; color: var(--blue); min-height: 44px; display: flex; align-items: center; }
.mehr-optionen[open] { padding-bottom: 12px; }
/* von/bis nebeneinander – auch auf 320 px (Uhrzeitfelder brauchen ~130 px) */
.zeit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.zeit > div { display: grid; min-width: 0; }
.steps.erste { list-style: none; padding: 0; margin: 0 0 8px; }
.steps.erste li { display: grid; gap: 0; margin-bottom: 8px; }
.steps.erste .linkish { padding: 6px 0 0; }
.linkish { background: none; border: 0; padding: 10px 0; min-height: 44px; font: 600 1rem var(--font); color: var(--blue); text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }