/* Design: docs/DESIGN.md */
:root {
  color-scheme: light dark;
  --bg: #F2F2F7; --card: #FFFFFF; --label: #000000; --secondary: #6C6C70;
  --separator: rgba(60,60,67,.29); --fill: #E5E5EA; --ring: #C7C7CC;
  --tint: #0066CC; --tint-soft: #E5F0FF; --green: #248A3D; --orange: #C93400; --red: #C5221F;
  --bar: rgba(249,249,249,.82); --toast-bg: #1C1C1E; --toast-ink: #FFFFFF; --toast-tint: #64B5FF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --card: #1C1C1E; --label: #FFFFFF; --secondary: #AEAEB2;
    --separator: rgba(84,84,88,.65); --fill: #3A3A3C; --ring: #636366;
    --tint: #0A84FF; --tint-soft: #0A2A4D; --green: #30D158; --orange: #FF9F0A; --red: #FF6961;
    --bar: rgba(22,22,24,.82); --toast-bg: #F2F2F7; --toast-ink: #000000; --toast-tint: #0066CC;
  }
}
@media (prefers-reduced-transparency: reduce) { :root { --bar: var(--card); } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--label);
  font: 17px/1.3 -apple-system, "SF Pro Text", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
main {
  max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; gap: 22px;
  padding: calc(env(safe-area-inset-top) + 24px) 16px calc(env(safe-area-inset-bottom) + 110px);
}
a { color: var(--tint); text-decoration: none; }
h1, h2, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:active, .row-link:active { transform: scale(.97); transition: transform 100ms ease-out; }

/* Kopf */
.head { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.eyebrow { font-size: 15px; font-weight: 600; color: var(--secondary); }
h1 { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.022em; }
.section { display: flex; flex-direction: column; gap: 8px; }
.section > h2 { margin: 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.group-label { margin: 0 4px; font-size: 13px; color: var(--secondary); text-transform: uppercase; }
.footnote { margin: 0 4px; font-size: 13px; line-height: 1.35; color: var(--secondary); }

/* Gruppen und Zeilen */
.group { background: var(--card); border-radius: 14px; overflow: hidden; }
.row { display: flex; gap: 12px; align-items: center; padding: 12px 16px; min-height: 44px; }
.row + .row { border-top: .5px solid var(--separator); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.title { letter-spacing: -.02em; }
.meta { font-size: 15px; color: var(--secondary); }
.meta.urgent, .meta.missed { color: var(--orange); }
.meta.done { color: var(--green); }
.value { color: var(--secondary); font-variant-numeric: tabular-nums; }
.row-link { color: inherit; }
.chevron { width: 10px; height: 16px; flex: none; color: var(--ring); }
.empty { padding: 14px 16px; color: var(--secondary); }

/* Details: Fertig heißt, Elternaktionen */
details.row { display: block; padding: 0; }
details.row > summary { display: flex; gap: 12px; align-items: center; padding: 12px 16px; list-style: none; cursor: pointer; }
details.row > summary::-webkit-details-marker { display: none; }
.detail { padding: 0 16px 14px 54px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--secondary); }

/* Haken */
.check-form { display: contents; }
.check {
  width: 44px; height: 44px; margin: -8px 0 -8px -10px; flex: none; padding: 0; border: 0; background: none;
  display: flex; align-items: center; justify-content: center;
}
.check::before { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ring); box-sizing: border-box; }
.check.done::before, .mark.done {
  border: 0; background: var(--green) no-repeat center / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.mark { width: 26px; height: 26px; flex: none; margin: 0 8px 0 -1px; border-radius: 50%; border: 2px solid var(--ring); } /* fluchtet mit .check */
.mark.pending { border-style: dashed; }
.mark.missed { border: 0; background: var(--orange); }
.mark.cancelled { border-color: var(--fill); }

/* Zusammenfassung */
.summary { background: var(--card); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.summary-head strong { font-weight: 600; letter-spacing: -.02em; }
.segments { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.segments span { height: 8px; border-radius: 4px; background: var(--fill); }
.segments .done { background: var(--green); }
.segments .missed { background: var(--orange); }
.state-green { color: var(--green); font-weight: 600; }
.state-red { color: var(--orange); font-weight: 600; }

/* Knöpfe und Eingaben */
.btn-primary { height: 50px; width: 100%; border: 0; border-radius: 14px; background: var(--tint); color: #FFFFFF; font-weight: 600; }
.btn-capsule { height: 36px; padding: 0 16px; border: 0; border-radius: 18px; background: var(--tint-soft); color: var(--tint); font-size: 15px; font-weight: 600; white-space: nowrap; }
.btn-plain { min-height: 44px; padding: 0; border: 0; background: none; color: var(--tint); text-align: left; }
.btn-plain.danger { color: var(--red); }
.field { display: flex; flex-direction: column; gap: 6px; }
.input { height: 44px; width: 100%; border: 0; border-radius: 10px; background: var(--card); padding: 0 16px; font-size: 17px; }
.detail .input { background: var(--bg); }
.code { font: 600 28px/1.2 ui-monospace, "SF Mono", monospace; letter-spacing: .06em; color: var(--label); user-select: all; }
.error { margin: 0 4px; color: var(--red); font-weight: 600; }

/* Hinweis mit Widerrufen */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 84px); max-width: 32rem; margin: 0 auto;
  background: var(--toast-bg); color: var(--toast-ink); border-radius: 14px; padding: 4px 4px 4px 16px;
  display: flex; justify-content: space-between; align-items: center; box-shadow: 0 8px 30px rgba(0,0,0,.18);
  font-size: 15px; font-weight: 600;
}
.toast button { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--toast-tint); font-weight: 600; }

/* Tab-Leiste */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px;
  padding: 6px 8px calc(env(safe-area-inset-bottom) + 6px); background: var(--bar);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-top: .5px solid var(--separator);
}
.tabbar a { flex: 0 1 96px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--secondary); font-size: 10px; font-weight: 500; }
.tabbar a[aria-current="page"] { color: var(--tint); font-weight: 600; }
.tabbar svg { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
  button:active, .row-link:active { transform: none; }
}

/* Formulare in Gruppen */
.row label.title, .row > label { flex: 1; }
.inline-input { width: 120px; border: 0; background: none; text-align: right; color: var(--secondary); font-size: 17px; padding: 0; }
.inline-input:focus { color: var(--label); outline: none; }
select.inline-input { width: auto; appearance: none; color: var(--tint); }
textarea.input { height: auto; min-height: 88px; padding: 12px 16px; resize: vertical; line-height: 1.35; }
.toggle {
  appearance: none; -webkit-appearance: none; width: 51px; height: 31px; flex: none; margin: 0; border-radius: 16px;
  background: var(--fill); position: relative; cursor: pointer; transition: background 200ms ease;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform 200ms ease;
}
.toggle:checked { background: var(--green); }
.toggle:checked::after { transform: translateX(20px); }
.toggle:focus-visible, .day input:focus-visible + span { outline: 2px solid var(--tint); outline-offset: 2px; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day { position: relative; }
.day input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.day span { display: flex; height: 44px; align-items: center; justify-content: center; border-radius: 10px; background: var(--card); font-size: 15px; }
.day input:checked + span { background: var(--tint); color: #FFFFFF; font-weight: 600; }
.inactive .title { color: var(--secondary); }
.notice { margin: 0 4px; color: var(--green); font-weight: 600; }
.icon { width: 30px; height: 30px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.icon svg { width: 18px; height: 18px; }
.icon.gray { background: #6E6E73; } .icon.blue { background: var(--tint); } .icon.green { background: var(--green); } .icon.orange { background: var(--orange); }
.avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--tint); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .toggle, .toggle::after { transition: none; } }
.row.wrap { flex-wrap: wrap; }

/* Fortschrittsbalken ohne Inline-Stil (CSP) */
progress.bar { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--fill); overflow: hidden; }
progress.bar::-webkit-progress-bar { background: var(--fill); border-radius: 4px; }
progress.bar::-webkit-progress-value { background: var(--orange); border-radius: 4px; }
progress.bar::-moz-progress-bar { background: var(--orange); border-radius: 4px; }
progress.bar.green::-webkit-progress-value { background: var(--green); }
progress.bar.green::-moz-progress-bar { background: var(--green); }
.row-stack { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.row-stack + .row, .row + .row-stack { border-top: .5px solid var(--separator); }
.amount { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
details.group > summary { list-style: none; cursor: pointer; }
details.group > summary::-webkit-details-marker { display: none; }

/* Hilfe-Seite (docs/DESIGN.md), Inhalte wie die Anleitung */
.help { display: flex; flex-direction: column; gap: 36px; }
.help h2 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.help h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; }
.help p { max-width: 65ch; line-height: 1.5; }
.help .lead { font-size: 19px; color: var(--secondary); }
.help nav.toc { background: var(--card); border-radius: 14px; padding: 6px 0; }
.help nav.toc ol { list-style: none; margin: 0; padding: 0; }
.help nav.toc li + li { border-top: .5px solid var(--separator); }
.help nav.toc a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; color: var(--label); }
.help nav.toc a span { color: var(--secondary); font-size: 15px; }
.help section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px; }
.help .block { display: flex; flex-direction: column; gap: 10px; }
.help ul.plain, .help ol.steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; max-width: 65ch; line-height: 1.5; }
.help dl.group { margin: 0; }
.help dl.group .row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.help dl.group dt { font-weight: 600; }
.help dl.group dd { margin: 0; }
.help dl.group dd small { display: block; color: var(--secondary); font-size: 15px; margin-top: 2px; line-height: 1.4; }
@media (max-width: 560px) { .help dl.group .row { grid-template-columns: minmax(0, 1fr); } }
.help .note { background: var(--tint-soft); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.help .who { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--secondary); }
.help .good { color: var(--green); font-weight: 600; }
.help .warn { color: var(--orange); font-weight: 600; }
.help .ui { font-weight: 600; white-space: nowrap; }
.help code { font: 15px ui-monospace, "SF Mono", monospace; }
.help .table-wrap { overflow-x: auto; background: var(--card); border-radius: 14px; }
.help table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 16px; }
.help th, .help td { text-align: left; padding: 10px 16px; vertical-align: top; }
.help th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--secondary); font-weight: 600; }
.help tbody tr td { border-top: .5px solid var(--separator); }
.help td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.help .formula { font-weight: 600; background: var(--card); border-radius: 14px; padding: 14px 16px; }
.help details.faq { background: var(--card); border-radius: 14px; }
.help details.faq summary { cursor: pointer; padding: 13px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.help details.faq summary::-webkit-details-marker { display: none; }
.help details.faq summary::after { content: "+"; color: var(--secondary); font-weight: 400; }
.help details.faq[open] summary::after { content: "−"; }
.help details.faq > div { padding: 0 16px 14px; }
.help footer { color: var(--secondary); font-size: 15px; display: flex; flex-direction: column; gap: 6px; }

/* Wieder geöffnet: Grund prominent beim Kind */
.redo { background: var(--card); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 14px; border: 2px solid var(--orange); }
.redo h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--orange); }
.redo-item { display: flex; flex-direction: column; gap: 4px; }
.redo-item + .redo-item { border-top: .5px solid var(--separator); padding-top: 12px; }
.redo-reason { font-size: 17px; font-weight: 600; }
.redo-item form { margin-top: 8px; }
.meta.reason { color: var(--orange); }