:root {
  color-scheme: light dark;
  --page: #f0f1f2;
  --paper: #fff;
  --ink: #292d30;
  --ink-soft: #4b5155;
  --muted: #626b71;
  --faint: #a1a7aa;
  --line: #e3e5e6;
  --line-soft: #f0f1f2;
  --field: #fff;
  --field-line: #d9dddf;
  --hover: #f2f4f5;
  --chip: #f2f4f5;
  --chip-on: #292d30;
  --chip-on-ink: #fff;
  --accent: #267244;
  --danger: #a33f3a;
  --focus: #3888e555;
  --green: #2f9b58;
  --yellow: #e1b82f;
  --red: #d95750;
  --light-off: .3;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0e1011;
    --paper: #16191b;
    --ink: #e8eaeb;
    --ink-soft: #c3c8cb;
    --muted: #8d959a;
    --faint: #6b7378;
    --line: #2a2f32;
    --line-soft: #202427;
    --field: #1d2124;
    --field-line: #343a3e;
    --hover: #23282b;
    --chip: #23282b;
    --chip-on: #e8eaeb;
    --chip-on-ink: #16191b;
    --accent: #6cc48f;
    --danger: #f0857f;
    --green: #3fb36b;
    --yellow: #e8c247;
    --red: #e5675f;
    --light-off: .28;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--ink); font-size: 1rem; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button, summary, .chip, label { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button:disabled { cursor: default; }
a { color: var(--accent); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.stream { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.offline-banner { position: sticky; top: 0; z-index: 30; margin: 0; padding: 10px 16px; background: var(--yellow); color: #292d30; text-align: center; font-size: .85rem; font-weight: 600; }
.offline form[action^="/e/"] { opacity: .55; }
input:focus-visible, button:focus-visible, summary:focus-visible, label:focus-within, [contenteditable]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Rahmen */
.page-shell { width: min(100% - 28px, 760px); margin: 24px auto 56px; }
.board { background: var(--paper); border-radius: 18px; padding: clamp(20px, 5vw, 40px); box-shadow: 0 2px 14px #2028300a; }

/* Kopf */
.board-head { padding-bottom: 14px; }
.title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; }
h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: -.03em; line-height: 1.1; }
.updated { flex: 0 0 auto; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.mode-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.person-filters { --cell: 44px; display: none; align-items: center; }
.shopping .person-filters { display: flex; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--chip); font-size: .92rem; font-weight: 600; touch-action: manipulation; }
.chip[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); }
.chip:active, .button:active, .text-button:active, .add-button:active { transform: scale(.96); }
.chip .count { min-width: 1.5em; padding: 1px 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: .78rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Bereiche */
.group { padding: 4px 0 8px; }
.group + .group { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.group-tools { display: none; align-items: center; gap: 4px; margin: -6px 0 2px; color: var(--muted); font-size: .78rem; font-weight: 650; }
.group-label { margin-right: auto; }
.group-tools .text-button { margin-left: auto; }
.split { display: none; align-self: center; margin: 0; }
.split .text-button { font-size: .8rem; white-space: nowrap; }

/* Themen */
.topics { margin: 0; padding: 0; list-style: none; }
.topic { border-bottom: 1px solid var(--line-soft); }
.topic:last-child { border-bottom: 0; }
.topic-line { --cell: 44px; --lights-w: calc(3 * var(--cell)); --controls-w: calc(var(--lights-w) + 6px); display: flex; align-items: flex-start; gap: 6px; }
.topic-controls { display: flex; align-items: flex-start; flex: 0 0 auto; }
.topic:is([data-level="low"], [data-level="medium"]) .topic-line:has(form.claim) { --controls-w: calc(5 * var(--cell) + 6px); }
.topic:is([data-level="low"], [data-level="medium"]) .topic-line:has(.claim-status) { --controls-w: calc(4 * var(--cell) + 6px); }
.topic-details { flex: 1; min-width: 0; }
.topic-details > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 0; cursor: pointer; font-size: 1.12rem; font-weight: 520; list-style: none; -webkit-tap-highlight-color: transparent; }
.topic-details > summary::-webkit-details-marker { display: none; }
.topic-name { overflow-wrap: anywhere; }
.has-details { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.topic-details[open] > summary { color: var(--ink); }
.topic-details[open] > summary .has-details { display: none; }

/* Ampel */
.lights { display: flex; align-items: center; flex: 0 0 auto; width: var(--lights-w); min-height: 52px; }
.lights { margin: 0; }
.lights > .light { margin: 0 calc((var(--cell) - 16px) / 2); }
.light { display: block; width: 16px; height: 16px; border-radius: 50%; opacity: var(--light-off); transition: opacity .15s ease, transform .15s ease; }
.light.low { background: var(--red); }
.light.medium { background: var(--yellow); }
.light.high { background: var(--green); }
/* Die Auswahl hängt am data-level des Themas, damit ein Tipp sofort sichtbar ist. */
.topic[data-level="low"] .light.low,
.topic[data-level="medium"] .light.medium,
.topic[data-level="high"] .light.high,
.claim-choice[aria-pressed="true"] .person-mark,
.claim-person .person-mark { opacity: 1; transform: scale(1.2); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px #0002; }
.level-choice { display: grid; place-items: center; width: var(--cell); height: 48px; padding: 0; border: 0; border-radius: 8px; background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.level-choice:active .light { transform: scale(1.35); }
@media (hover: hover) { .level-choice[aria-pressed="false"]:hover .light { opacity: .6; } }

/* Dieselben unsichtbaren Tippflächen und Auswahlringe wie bei der Ampel. */
.claim { display: none; align-items: center; flex: 0 0 auto; min-height: 52px; margin: 0; }
.topic:is([data-level="low"], [data-level="medium"]) .claim { display: flex; }
.claim-choice, .claim-person { display: grid; place-items: center; width: var(--cell); height: 48px; padding: 0; border: 0; border-radius: 8px; background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.person-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 20px; line-height: 1; opacity: var(--light-off); transition: opacity .15s ease, transform .15s ease; }
.claim-choice:active .person-mark { transform: scale(1.35); }
@media (hover: hover) { .claim-choice[aria-pressed="false"]:hover .person-mark { opacity: .6; } }

/* Ordnen */
.reorder { display: none; flex-direction: column; justify-content: center; min-height: 64px; margin: 0; }
.icon-button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 1rem; line-height: 1; touch-action: manipulation; }
.icon-button:active { background: var(--hover); color: var(--ink); }
.icon-button:disabled { visibility: hidden; }
.sorting .topic-details > summary { min-height: 64px; }
.sorting .reorder, .sorting .group-tools, .sorting .split { display: flex; }
.sorting .add-topic, .sorting .lights, .sorting .topic-details[open] > .detail-body { display: none; }
.sorting .topic-controls { display: none; }

/* Details */
/* Die Details laufen unter der Ampel durch und nutzen die volle Breite. */
.detail-body { margin-right: calc(-1 * var(--controls-w)); padding: 0 0 18px; color: var(--ink-soft); font-size: .95rem; }
.note-content { line-height: 1.6; overflow-wrap: anywhere; }
.note-content > :first-child, .rich-editor > :first-child { margin-top: 0; }
.note-content > :last-child, .rich-editor > :last-child { margin-bottom: 0; }
.note-form { margin: 0; }
/* 16px verhindert, dass iOS beim Antippen hineinzoomt. */
.rich-editor { min-height: 44px; padding: 9px 11px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); line-height: 1.55; overflow-wrap: anywhere; }
.rich-editor:focus { border-color: var(--field-line); }
.rich-editor:empty::before { content: "Notiz …"; color: var(--faint); }
.rich-toolbar { display: none; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.note-form:focus-within .rich-toolbar { display: flex; }
.rich-toolbar button { min-width: 44px; min-height: 44px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.rich-toolbar button:hover { background: var(--hover); }
.save-state { min-height: 1.2em; margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.note-form[data-save-state="pending"] .save-state::after,
.note-form[data-save-state="saving"] .save-state::after { content: "Speichert …"; }
.note-form[data-save-state="saved"] .save-state::after { content: "Gespeichert ✓"; color: var(--accent); }
.note-form[data-save-state="error"] .save-state::after { content: "Nicht gespeichert – bitte erneut tippen."; color: var(--danger); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); align-items: start; gap: 8px; margin: 12px 0 4px; }
.gallery figure { position: relative; margin: 0; }
.gallery a { display: block; }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; background: var(--line-soft); }
.gallery form { position: absolute; top: 4px; right: 4px; margin: 0; }
.gallery form.move-left { top: auto; bottom: 4px; left: 4px; right: auto; }
.gallery form.move-right { top: auto; bottom: 4px; right: 4px; }
.move-image { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #000a; color: #fff; font-size: 1.15rem; line-height: 1; }
.remove-image { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #000a; color: #fff; font-size: 1.15rem; line-height: 1; }
.photo-hint { margin: 8px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }

/* Der native Dialog übernimmt Modalität, Escape und die Fokusbegrenzung. */
.photo-viewer { width: min(960px, calc(100% - 24px)); max-width: none; height: min(860px, calc(100dvh - 24px)); max-height: none; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); }
.photo-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.photo-viewer::backdrop { background: #000c; }
html:has(.photo-viewer[open]) { overflow: hidden; }
.viewer-head, .viewer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; }
.viewer-head h2 { min-width: 0; margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.viewer-head form { flex: 0 0 auto; margin: 0; }
.viewer-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 9px; background: var(--chip); color: var(--ink); font-size: 1.5rem; touch-action: manipulation; }
.viewer-button:disabled { opacity: .3; }
.viewer-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 8px; overflow: hidden; }
.viewer-stage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
#viewer-error { position: absolute; margin: 0; padding: 12px; background: var(--paper); text-align: center; }
#viewer-position { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .photo-viewer { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .viewer-head { padding-top: max(8px, env(safe-area-inset-top)); }
  .viewer-foot { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .viewer-head, .viewer-foot { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}

.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.detail-actions .rename { margin-left: auto; }
.detail-actions form { margin: 0; }

/* Hinzufügen: ein Feld für die ganze Liste. Ort und Knopf erscheinen
   erst, wenn etwas eingetippt ist. */
.add-topic { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.add-topic input[name="name"] { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); font-size: 1rem; }
.add-topic input[name="name"]::placeholder { color: var(--faint); }
.add-where { display: flex; gap: 8px; margin-top: 8px; }
.add-topic:has(input[name="name"]:placeholder-shown) .add-where { display: none; }
.add-where select { flex: 1; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--field); font-size: 1rem; }
.add-button { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--chip-on); color: var(--chip-on-ink); font-size: 1.25rem; line-height: 1; }

/* Fuß */
.board-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.board-foot .share { margin-left: auto; }

/* Einkaufen: nur Fehlendes und Knappes */
.shop-empty { display: none; margin: 18px 0 8px; color: var(--muted); }
.shopping .topic:not([data-search-hidden])[data-level="high"],
.shopping .add-topic,
.shopping .sort-chip,
.shopping .board-foot,
.shopping .group:not(:has(.topic:not([data-search-hidden]):not([data-level="high"]))) { display: none; }
.shopping .group { border-top: 0; margin-top: 0; padding: 0; }
.shopping .topic:not([data-search-hidden]) { border-bottom: 0; }
/* Eine Linie vor jedem weiteren sichtbaren Eintrag, auch über Bereichsgrenzen. */
.shopping[data-person=""] .topic:not([data-search-hidden]):not([data-level="high"]) ~ .topic:not([data-search-hidden]):not([data-level="high"]),
.shopping[data-person=""] .group:has(.topic:not([data-search-hidden]):not([data-level="high"])) ~ .group .topic:not([data-search-hidden]):not([data-level="high"]),
.shopping[data-person="tiger"] .topic:not([data-search-hidden])[data-assignee="tiger"]:not([data-level="high"]) ~ .topic:not([data-search-hidden])[data-assignee="tiger"]:not([data-level="high"]),
.shopping[data-person="tiger"] .group:has(.topic:not([data-search-hidden])[data-assignee="tiger"]:not([data-level="high"])) ~ .group .topic:not([data-search-hidden])[data-assignee="tiger"]:not([data-level="high"]),
.shopping[data-person="bear"] .topic:not([data-search-hidden])[data-assignee="bear"]:not([data-level="high"]) ~ .topic:not([data-search-hidden])[data-assignee="bear"]:not([data-level="high"]),
.shopping[data-person="bear"] .group:has(.topic:not([data-search-hidden])[data-assignee="bear"]:not([data-level="high"])) ~ .group .topic:not([data-search-hidden])[data-assignee="bear"]:not([data-level="high"]) { border-top: 1px solid var(--line-soft); }
.shopping[data-person="tiger"] .topic:not([data-search-hidden]):not([data-assignee="tiger"]),
.shopping[data-person="bear"] .topic:not([data-search-hidden]):not([data-assignee="bear"]),
.shopping[data-person="tiger"] .group:not(:has(.topic:not([data-search-hidden])[data-assignee="tiger"]:not([data-level="high"]))),
.shopping[data-person="bear"] .group:not(:has(.topic:not([data-search-hidden])[data-assignee="bear"]:not([data-level="high"]))) { display: none; }
.shopping:not(.searching) .board:not(:has(.topic:not([data-search-hidden]):not([data-level="high"]))) .shop-empty { display: block; }
.shopping:not(.searching)[data-person="tiger"] .board:not(:has(.topic:not([data-search-hidden])[data-assignee="tiger"]:not([data-level="high"]))) .shop-empty,
.shopping:not(.searching)[data-person="bear"] .board:not(:has(.topic:not([data-search-hidden])[data-assignee="bear"]:not([data-level="high"]))) .shop-empty { display: block; }

/* Knöpfe */
.button { min-height: 44px; padding: 9px 15px; border: 1px solid var(--chip-on); border-radius: 10px; background: var(--chip-on); color: var(--chip-on-ink); font-weight: 650; touch-action: manipulation; }
.button:disabled { cursor: not-allowed; opacity: .5; }
.secondary { border-color: var(--line); background: var(--chip); color: var(--ink); }
.secondary:hover { background: var(--hover); }
.small-button { min-height: 44px; padding: 7px 11px; font-size: .84rem; }
.text-button { min-height: 44px; padding: 6px 2px; border: 0; background: transparent; color: var(--muted); font-size: .9rem; touch-action: manipulation; }
.text-button:hover { color: var(--ink); text-decoration: underline; }
.danger { color: var(--danger); }
.group-tools .text-button { min-height: 44px; font-size: .78rem; }

/* Felder auf Nebenseiten */
input { font-size: 16px; border: 1px solid var(--field-line); border-radius: 9px; background: var(--field); padding: 10px 12px; }
.copy-row { display: flex; align-items: center; gap: 8px; }
.copy-row input { min-width: 0; flex: 1; }

#toast:not([hidden]) { display: flex; }
#toast { align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px); position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 10; transform: translateX(-50%); padding: 10px 16px; border-radius: 10px; background: var(--chip-on); color: var(--chip-on-ink); box-shadow: 0 4px 20px #0003; font-size: .92rem; }

#toast span { min-width: 0; overflow-wrap: anywhere; }
#toast button { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 4px 2px; border: 0; background: transparent; color: inherit; font-weight: 700; text-decoration: underline; }
.error-page, .recovery { width: min(100% - 32px, 520px); margin: 12vh auto; padding: clamp(24px, 6vw, 42px); border-radius: 16px; background: var(--paper); box-shadow: 0 2px 14px #2028300a; }
.error-page p, .recovery p { color: var(--muted); line-height: 1.55; }
.recovery label { display: block; margin: 0 0 7px; color: var(--muted); font-size: .78rem; font-weight: 650; }
.recovery form { display: grid; gap: 10px; margin-top: 22px; }
.recovery input { width: 100%; margin: 0 0 12px; }
.recovery form input { margin: 0; }
.recovery .copy-row { margin: 0 0 20px; }
.error-message { color: var(--danger) !important; }

@media (max-width: 620px) {
  .page-shell { width: 100%; margin: 0; }
  .board { min-height: 100vh; min-height: 100dvh; padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-radius: 0; box-shadow: none; }
  .sorting .topic-line { flex-wrap: wrap; }
  .sorting .topic-details { flex-basis: calc(100% - 50px); }
  .sorting .split { margin-left: 50px; }
}

@media (max-width: 360px) {
  .topic-line { --cell: 36px; }
  .topic-details > summary { font-size: 1.04rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }
.add-topic + .board-foot { margin-top: 6px; border-top: 0; }

/* Tastaturfokus und vergrößerter Text bleiben auch in schmalen Ansichten sichtbar. */
select:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rich-editor, .add-topic { scroll-margin-block: 16px; }
@media (forced-colors: active) {
  .light { background: CanvasText; opacity: .3; }
  .level-choice[aria-pressed="true"], .claim-choice[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* Suche und Abschnittssprünge bleiben beim Scrollen erreichbar. */
.list-tools { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; margin-bottom: 8px; background: var(--paper); }
.list-tools .mode-row { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; margin: 0; }
.search-controls { display: flex; flex: 1; align-items: center; min-width: 180px; }
.chip-symbol { display: none; }
.list-tools input { flex: 1; min-width: 0; width: 0; }

.section-nav { display: flex; align-items: center; }
.section-position { min-width: 3ch; text-align: center; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.topic[data-search-hidden], .searching .group:not(:has(.topic:not([data-search-hidden]))), .searching .shop-empty { display: none; }
.search-empty { color: var(--muted); margin: 12px 0; }
.searching:not(.shopping) .group { border-top: 0; margin-top: 0; padding: 0; }
.searching:not(.shopping) .topic { border-bottom: 0; }
.searching:not(.shopping) .topic:not([data-search-hidden]) ~ .topic:not([data-search-hidden]),
.searching:not(.shopping) .group:has(.topic:not([data-search-hidden])) ~ .group .topic:not([data-search-hidden]) { border-top: 1px solid var(--line-soft); }

@media (max-width: 620px) {
  .list-tools .chip { gap: 5px; padding: 8px 10px; }
  .list-tools .chip-label { display: none; }
  .list-tools .chip-symbol { display: inline; font-size: 1.1rem; }
  .list-tools .person-filters { --cell: 36px; }
  .section-nav .icon-button { width: 36px; }
}