/* Fairttention – Basis-Styles, mobile-first. Farben als Variablen (Dark Mode folgt in Phase 7). */
:root {
    --c-bg: #f5f4f0;
    --c-surface: #ffffff;
    --c-text: #1f2523;
    --c-muted: #5f6b67;
    --c-border: #dcdcd4;
    --c-primary: #2f6f62;
    --c-primary-text: #ffffff;
    --c-ok: #276b43;
    --c-ok-bg: #e3f3e8;
    --c-warn: #8a6100;
    --c-warn-bg: #fdf1d6;
    --c-error: #a32b2b;
    --c-error-bg: #fbe4e4;
    --radius: 12px;
    --touch: 48px;
    --nav-h: 64px;
    --gap: 16px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --c-topbar: #2f6f62;
    --c-topbar-text: #ffffff;
    --c-weekend: #faf6ec;
    --c-partial-border: #e8c66f;
    --c-complete-border: #8fcaa3;
    --c-holiday-stripe: rgb(138 97 0 / .14);
    --c-check-text: #ffffff;
    --c-shadow: rgb(0 0 0 / .12);
    color-scheme: light dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.45;
    color: var(--c-text);
    background: var(--c-bg);
}

body.has-nav {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
a { color: var(--c-primary); }
code { font-size: .9em; }
small, .muted { color: var(--c-muted); }

/* Kopfzeile */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: calc(10px + env(safe-area-inset-top)) var(--gap) 10px;
    background: var(--c-topbar);
    color: var(--c-topbar-text);
}
.topbar__title { font-size: 1.15rem; margin: 0; }
.topbar__user { font-size: .9rem; opacity: .9; }

/* Inhalt */
.main {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--gap);
    padding-left: max(var(--gap), env(safe-area-inset-left));
    padding-right: max(var(--gap), env(safe-area-inset-right));
}
.main--narrow { max-width: 440px; padding-top: calc(32px + env(safe-area-inset-top)); }

.brand {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--c-primary);
    text-align: center;
    margin-bottom: var(--gap);
}

.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--gap);
    margin-bottom: var(--gap);
}
.card > :last-child { margin-bottom: 0; }

/* Bottom-Navigation: Daumenzone, große Touch-Ziele */
.bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
}
.bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--touch);
    font-size: .72rem;
    color: var(--c-muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.bottomnav__item svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bottomnav__item.is-active { color: var(--c-primary); font-weight: 600; }
.bottomnav__item:focus-visible { outline: 3px solid var(--c-primary); outline-offset: -3px; }

/* Desktop: Navigation bleibt unten, aber zentriert und schmaler */
@media (min-width: 760px) {
    .bottomnav {
        left: 50%;
        right: auto;
        width: 720px;
        transform: translateX(-50%);
        border: 1px solid var(--c-border);
        border-bottom: 0;
        border-radius: var(--radius) var(--radius) 0 0;
    }
}

/* Formulare */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 600; font-size: .95rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
    width: 100%;
    min-width: 0;
    min-height: var(--touch);
    padding: 10px 12px;
    font: inherit;
    font-size: 17px; /* ≥16px verhindert Auto-Zoom auf iOS */
    color: var(--c-text);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--c-primary) 40%, transparent);
    border-color: var(--c-primary);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    color: var(--c-primary);
    background: var(--c-surface);
    border: 2px solid var(--c-primary);
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
}
.btn--primary { color: var(--c-primary-text); background: var(--c-primary); }
.btn--block { width: 100%; }
.btn:focus-visible { outline: 3px solid var(--c-text); outline-offset: 2px; }

/* Meldungen */
.flash {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: var(--gap);
    border: 1px solid transparent;
}
.flash ul { margin: 0; padding-left: 1.2em; }
.flash--success { background: var(--c-ok-bg); color: var(--c-ok); border-color: currentColor; }
.flash--error { background: var(--c-error-bg); color: var(--c-error); border-color: currentColor; }
.flash--info { background: var(--c-warn-bg); color: var(--c-warn); border-color: currentColor; }
.ok { color: var(--c-ok); font-weight: 600; }

/* Listen & Menüs */
.list, .menu { list-style: none; margin: 0; padding: 0; }
.list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border);
}
.list__item:last-child { border-bottom: 0; }
.menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--touch);
    color: var(--c-text);
    text-decoration: none;
}
.backlink { display: inline-flex; align-items: center; min-height: var(--touch); text-decoration: none; }

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}
.badge--ok { background: var(--c-ok-bg); color: var(--c-ok); }
.badge--warn { background: var(--c-warn-bg); color: var(--c-warn); }

.debug {
    overflow-x: auto;
    font-size: .8rem;
    background: #222;
    color: #eee;
    padding: 12px;
    border-radius: 8px;
}

/* Phase 1: Checkboxen, kleine Buttons, User-Liste */
.center { text-align: center; }

.check {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--touch);
    cursor: pointer;
}
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--c-primary); }

.btn--small { min-height: 44px; padding: 6px 14px; font-size: .9rem; }
.btn--danger { color: var(--c-error); border-color: var(--c-error); }
.btn:disabled { opacity: .6; cursor: default; }

.user { padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.user:last-child { border-bottom: 0; }
.user--inactive .user__head strong { color: var(--c-muted); }
.user__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.user__meta { font-size: .9rem; margin-top: 2px; }
.user__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.user__actions form { margin: 0; }
.badge:not([class*="badge--"]) { background: var(--c-bg); color: var(--c-muted); }

/* Phase 2: Minuten-Stepper, Tätigkeitsliste */
[id] { scroll-margin-top: 80px; }

.stepper {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    gap: 8px;
}
.stepper__btn {
    min-height: var(--touch);
    font: inherit;
    font-weight: 700;
    color: var(--c-primary);
    background: var(--c-surface);
    border: 2px solid var(--c-primary);
    border-radius: 10px;
    cursor: pointer;
    touch-action: manipulation; /* kein Doppeltipp-Zoom */
}
.stepper__btn:active { background: var(--c-ok-bg); }
.stepper__input { text-align: center; font-weight: 600; }
.stepper__hint { min-height: 1.2em; font-size: .9rem; }

.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: 4px; }

.summary {
    display: flex;
    align-items: center;
    min-height: var(--touch);
    font-weight: 600;
    color: var(--c-primary);
    cursor: pointer;
}
details[open] > .summary { margin-bottom: 12px; }

.activity {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--c-border);
}
.activity:last-child { border-bottom: 0; }
.activity__main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 10px 0;
    color: var(--c-text);
    text-decoration: none;
}
.activity__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
    color: var(--c-muted);
}
.activity__sort { display: flex; gap: 4px; }
.activity__sort form { margin: 0; }
.iconbtn {
    width: 44px;
    height: 44px;
    font-size: .9rem;
    color: var(--c-primary);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    cursor: pointer;
    touch-action: manipulation;
}
.iconbtn:disabled { opacity: .3; cursor: default; }

.timepair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.timepair input { min-width: 0; }
input[type=time] {
    width: 100%;
    min-height: var(--touch);
    padding: 10px 12px;
    font: inherit;
    font-size: 17px;
    color: var(--c-text);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
}

/* Phase 3: Tagesansicht */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.daynav {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.daynav__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    font-size: 2rem;
    line-height: 1;
    color: var(--c-primary);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    text-decoration: none;
    touch-action: manipulation;
}
.daynav__center { display: grid; text-align: center; }
.daynav__center strong { font-size: 1.15rem; }
.daynav__center span { color: var(--c-muted); }

.daybar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--gap);
}
.daybar__spacer { flex: 1; }
.daybar__pick { margin: 0; }
.daybar__pick input[type=date] { width: auto; min-height: 44px; padding: 6px 10px; }

.progress { display: grid; gap: 4px; margin: 4px 0 12px; font-size: .9rem; color: var(--c-muted); }
.progress__bar {
    width: 100%;
    height: 8px;
    appearance: none;
    border: 0;
    border-radius: 99px;
    background: var(--c-border);
    overflow: hidden;
}
.progress__bar::-webkit-progress-bar { background: var(--c-border); border-radius: 99px; }
.progress__bar::-webkit-progress-value { background: var(--c-ok); border-radius: 99px; }
.progress__bar::-moz-progress-bar { background: var(--c-ok); border-radius: 99px; }

/* Tätigkeits-Karten */
.task { padding: 12px var(--gap); border-left: 5px solid var(--c-border); }
.task.is-done { border-left-color: var(--c-ok); }
.task--fullday { border-left-style: double; }
.task__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.task__check {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--c-check-text);
    border: 2px solid var(--c-border);
    border-radius: 50%;
    align-self: center;
}
.task.is-done .task__check { background: var(--c-ok); border-color: var(--c-ok); }
.task__title { flex: 1; font-size: 1.05rem; margin: 0; }
.task__default { font-size: .85rem; color: var(--c-muted); white-space: nowrap; }
.task__hint { margin: 8px 0 0; font-size: .85rem; color: var(--c-muted); }
.task__more { margin-top: 4px; }

/* Personen-Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 16px;
    font: inherit;
    font-weight: 600;
    color: var(--c-primary);
    background: var(--c-surface);
    border: 2px solid var(--c-primary);
    border-radius: 999px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.chip.is-on, .chip.is-pending { color: var(--c-primary-text); background: var(--c-primary); }
.chip.is-on::before { content: "✓ "; white-space: pre; }
.chip.is-on.is-pending { opacity: .6; }
.chip.is-covered { border-style: dashed; opacity: .7; }
.chip:focus-visible { outline: 3px solid var(--c-text); outline-offset: 2px; }

/* Checkbox-Chips im Formular */
.chip--check { position: relative; padding: 0; border: 0; background: none; }
.chip--check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip--check span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 16px;
    border: 2px solid var(--c-primary);
    border-radius: 999px;
}
.chip--check input:checked + span { color: var(--c-primary-text); background: var(--c-primary); }
.chip--check input:checked + span::before { content: "✓ "; white-space: pre; }
.chip--check input:focus-visible + span { outline: 3px solid var(--c-text); outline-offset: 2px; }

/* Einträge */
.entry { padding: 8px 0; border-top: 1px dashed var(--c-border); }
.task__head + .entry, .task__head + .chips + .entry { border-top: 0; }
.entry__line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.entry__summary { color: var(--c-muted); font-size: .9rem; }
.entry__meta { margin: 0; font-size: .8rem; color: var(--c-muted); }
.entryform { margin-top: 10px; padding: 12px; background: var(--c-bg); border-radius: 10px; }
.entryform__actions { display: flex; gap: 8px; }
.entryform__actions .btn--primary { flex: 1; }
form.is-busy { opacity: .7; pointer-events: none; }

.linkish {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    font: inherit;
    font-size: .95rem;
    color: var(--c-primary);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
summary.linkish { list-style: none; }
summary.linkish::-webkit-details-marker { display: none; }
details[open] > summary.linkish { font-weight: 600; text-decoration: none; }

/* Beschreibung mit Vorschlägen */
.suggest { position: relative; }
.suggest__row { display: flex; gap: 6px; }
.suggest__row input { flex: 1; }
.suggest__row .iconbtn { height: auto; min-height: var(--touch); }
.suggest__list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 260px;
    overflow-y: auto;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: 0 6px 20px var(--c-shadow);
}
.suggest__list li {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    cursor: pointer;
}
.suggest__list li:hover, .suggest__list li.is-active { background: var(--c-ok-bg); }

/* Phase 4: Monatskalender */
.cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 12px;
}
.cal__wd {
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-muted);
    padding: 2px 0;
}
.cal__wd--we { color: var(--c-warn); }
.cal__day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 4px 2px;
    font: inherit;
    color: var(--c-text);
    text-decoration: none;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    cursor: pointer;
    touch-action: manipulation;
}
.cal__num { font-weight: 600; font-size: .95rem; }
.cal__info { display: flex; align-items: center; gap: 2px; min-height: 1.1em; font-size: .7rem; line-height: 1; }
.cal__tag { font-weight: 700; }
.cal__moon { font-size: .8rem; }

.cal__day--none.is-weekend, .cal__day--future.is-weekend { background: var(--c-weekend); }
.cal__day--none { background: var(--c-surface); }
.cal__day--partial { background: var(--c-warn-bg); border-color: var(--c-partial-border); }
.cal__day--complete { background: var(--c-ok-bg); border-color: var(--c-complete-border); }
.cal__day--future { color: var(--c-muted); }
.cal__day.is-holiday {
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--c-holiday-stripe) 6px 9px);
}
.cal__day.is-holiday::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-warn);
}
.cal__day.is-today { outline: 3px solid var(--c-primary); outline-offset: -1px; }
.cal__day.is-outside { opacity: .4; }
.cal__day:focus-visible { outline: 3px solid var(--c-text); outline-offset: 1px; }
.cal--edit .cal__day { border-style: dashed; }
.cal--edit .cal__day.is-holiday { border-style: solid; border-color: var(--c-warn); }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 var(--gap);
    padding: 0;
    list-style: none;
    font-size: .8rem;
    color: var(--c-muted);
}
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend__box {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--c-border);
    border-radius: 4px;
}
.legend__box.is-holiday {
    background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgb(138 97 0 / .3) 3px 5px);
}
.legend__sym { font-weight: 700; font-size: .75rem; color: var(--c-text); }

/* Phase 5: Auswertung */
.tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-bottom: 12px;
    padding: 4px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.tabs__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-muted);
    text-decoration: none;
    border-radius: 8px;
}
.tabs__item.is-active { color: var(--c-primary-text); background: var(--c-primary); }
.period-label { text-align: center; margin: 4px 0 12px; }
.daynav__center a { font-size: .85rem; }

/* Farben je Person (gut unterscheidbar, auch bei Rot-Grün-Schwäche) */
.fill-0 { fill: #2f6f62; background: #2f6f62; }
.fill-1 { fill: #d08a1e; background: #d08a1e; }
.fill-2 { fill: #5b6bb5; background: #5b6bb5; }
.fill-3 { fill: #b5527a; background: #b5527a; }
.fill-4 { fill: #6b8f2a; background: #6b8f2a; }
.fill-5 { fill: #7a6455; background: #7a6455; }

.bar { display: block; width: 100%; height: 14px; border-radius: 4px; overflow: hidden; background: var(--c-border); }
.breakdown .bar { height: 6px; margin-top: 4px; }
.bar__ideal { stroke: var(--c-text); stroke-width: 2; stroke-dasharray: 3 2; }

.balance { border-left: 5px solid var(--c-border); }
.balance h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.balance--ok { border-left-color: var(--c-ok); }
.balance--ok .balance__badge { background: var(--c-ok-bg); color: var(--c-ok); }
.balance--warn { border-left-color: #d9a400; }
.balance--warn .balance__badge { background: var(--c-warn-bg); color: var(--c-warn); }
.balance--bad { border-left-color: var(--c-error); }
.balance--bad .balance__badge { background: var(--c-error-bg); color: var(--c-error); }
.balance__sentence { font-size: 1.1rem; font-weight: 600; }
.balance__note { margin: 12px 0 0; }

.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.shares { list-style: none; margin: 12px 0 0; padding: 0; }
.shares__row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
}
.shares__row:last-child { border-bottom: 0; }
.shares__row .dot { margin: 0; }
.shares__name { font-weight: 600; }
.shares__time, .shares__pct { font-variant-numeric: tabular-nums; }
.shares__pct { color: var(--c-muted); font-size: .9rem; }
.shares__dev {
    min-width: 52px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.dev--ok { background: var(--c-ok-bg); color: var(--c-ok); }
.dev--warn { background: var(--c-warn-bg); color: var(--c-warn); }
.dev--bad { background: var(--c-error-bg); color: var(--c-error); }

.tablewrap { overflow-x: auto; margin: 0 calc(-1 * var(--gap)); padding: 0 var(--gap); }
.breakdown { width: 100%; border-collapse: collapse; font-size: .9rem; }
.breakdown th, .breakdown td { padding: 8px 4px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.breakdown thead th { font-size: .8rem; color: var(--c-muted); white-space: nowrap; }
.breakdown tbody th { font-weight: 500; }
.breakdown .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.breakdown__special tr:first-child > * { border-top: 2px solid var(--c-border); }
.breakdown tfoot > tr > * { font-weight: 700; border-bottom: 0; }

/* Phase 6: Passkeys */
.btn--large { min-height: 56px; font-size: 1.05rem; gap: 10px; }
.btn__icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.passkey-login { margin-bottom: 4px; }
.passkey-login .flash { margin: 8px 0 0; }
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    font-size: .85rem;
    color: var(--c-muted);
}
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--c-border); }
[hidden] { display: none !important; }

/* Phase 7: Installation, Barrierefreiheit, Dark Mode */
.skiplink {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    color: var(--c-primary-text);
    background: var(--c-primary);
    border-radius: 8px;
    font-weight: 600;
}
.skiplink:focus { top: calc(8px + env(safe-area-inset-top)); }
main:focus { outline: none; }
.task__title:focus { outline: none; }
.task__title:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

.installbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: var(--gap);
    padding: 10px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.installbar img { border-radius: 9px; }
.installbar__text { flex: 1 1 140px; font-size: .95rem; font-weight: 600; }
.install { border-top: 1px solid var(--c-border); }
.install ol { margin: 0 0 12px; padding-left: 1.3em; }
.install li { margin-bottom: 6px; }
.install.is-current > summary { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Dark Mode: folgt der Systemeinstellung */
@media (prefers-color-scheme: dark) {
    :root {
        --c-bg: #121614;
        --c-surface: #1c2220;
        --c-text: #e6ebe8;
        --c-muted: #a3b0ab;
        --c-border: #35413d;
        --c-primary: #6fbfa9;
        --c-primary-text: #0d1f1a;
        --c-ok: #7fd49c;
        --c-ok-bg: #1d3527;
        --c-warn: #f0c35a;
        --c-warn-bg: #3a2f14;
        --c-error: #ff8f85;
        --c-error-bg: #3d1f1f;
        --c-topbar: #16302a;
        --c-topbar-text: #e6ebe8;
        --c-weekend: #1f2522;
        --c-partial-border: #7a6526;
        --c-complete-border: #2f6b47;
        --c-holiday-stripe: rgb(240 195 90 / .16);
        --c-check-text: #0d1f1a;
        --c-shadow: rgb(0 0 0 / .5);
    }
    .fill-0 { fill: #6fbfa9; background: #6fbfa9; }
    .fill-1 { fill: #f0a940; background: #f0a940; }
    .fill-2 { fill: #8c9cf0; background: #8c9cf0; }
    .fill-3 { fill: #e98bb3; background: #e98bb3; }
    .fill-4 { fill: #a6c95a; background: #a6c95a; }
    .fill-5 { fill: #c4a893; background: #c4a893; }
    .balance--warn { border-left-color: #f0c35a; }
    .debug { background: #000; }
}

/* Logo (Foto) */
.topbar { justify-content: flex-start; }
.topbar__title { flex: 1; }
.topbar__logo { display: flex; flex: none; border-radius: 50%; }
.topbar__logo img { display: block; width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .7); }
.brand { display: grid; justify-items: center; gap: 8px; }
.brand__logo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 16px var(--c-shadow); }
.installbar img { border-radius: 50%; }

/* Anleitung */
.help h2 { font-size: 1.25rem; }
.help h3 { font-size: 1.02rem; margin: 1.1em 0 .4em; }
.help p, .help li, .help dd { line-height: 1.55; }
.help ol, .help ul { padding-left: 1.3em; }
.help li { margin-bottom: 6px; }
.help__toc { columns: 2; column-gap: 20px; margin: 0; }
.help__toc li { break-inside: avoid; }
.help__toc a { display: inline-flex; align-items: center; min-height: 36px; }
@media (max-width: 360px) { .help__toc { columns: 1; } }
.helptable { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 4px 0 12px; }
.helptable th, .helptable td { padding: 8px 6px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.helptable thead th { font-size: .8rem; color: var(--c-muted); }
.helptable tbody th { font-weight: 600; min-width: 7em; }
.helptable .legend__box { vertical-align: -3px; margin-right: 4px; }
.helptable__pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .8rem; font-weight: 700; margin-right: 4px; }
.faq dt { font-weight: 700; margin-top: 14px; }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 4px 0 0; }