/* Stats – mobile-first */
:root {
    color-scheme: light;
    --bg: #f4f4f2;
    --surface: #fcfcfb;
    --surface-2: #ecebe7;
    --border: #dcdbd6;
    --text: #0b0b0b;
    --text-2: #52514e;
    --muted: #6b6a66;
    --accent: #2a78d6;
    --accent-ink: #ffffff;
    --accent-soft: #dbe9fb;
    --danger: #c8312f;
    --success-bg: #e3f4ea;
    --success-ink: #14532d;
    --error-bg: #fde8e8;
    --error-ink: #8a1c1b;
    --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100;
    --c5: #e87ba4; --c6: #008300; --c7: #6250d6; --c8: #e34948;
    --radius: 14px;
    --tabbar-h: 64px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #111110;
        --surface: #1a1a19;
        --surface-2: #262624;
        --border: #34332f;
        --text: #f0efec;
        --text-2: #c3c2b7;
        --muted: #9a998f;
        --accent: #3987e5;
        --accent-ink: #ffffff;
        --accent-soft: #1d3555;
        --danger: #e66767;
        --success-bg: #163222;
        --success-ink: #b7ecc9;
        --error-bg: #3a1716;
        --error-ink: #ffc9c8;
        --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500;
        --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
}
a { color: var(--accent); }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .75rem; font-weight: 600; }
h2.section { margin: 1.5rem 0 .5rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
.hint { color: var(--text-2); font-size: .9rem; margin: .25rem 0 .75rem; }

.topbar {
    position: sticky; top: 0; z-index: 5;
    background: var(--bg);
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 8px;
    max-width: 640px; margin: 0 auto;
}
.topbar h1 { margin: 0; font-size: 1.35rem; }
.content { max-width: 640px; margin: 0 auto; padding: 0 16px; }

/* Karten */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 0 0 12px;
}
.card.empty { text-align: center; }
.card.narrow, .form.narrow { max-width: 420px; margin-left: auto; margin-right: auto; }
fieldset.card { min-width: 0; }
fieldset.card legend, .field-label {
    float: left; width: 100%;
    font-weight: 600; margin-bottom: 10px; padding: 0;
}
fieldset.card legend + * { clear: both; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 18px;
    border-radius: 12px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-danger { color: var(--danger); border-color: transparent; background: transparent; }
.btn.block { display: flex; width: 100%; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    font-size: 1.6rem; line-height: 1; text-decoration: none;
    color: var(--text); background: var(--surface); border: 1px solid var(--border);
}
.btn-icon.disabled { opacity: .3; }

/* Tagesnavigation */
.daynav { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.daypicker { flex: 1; position: relative; text-align: center; font-weight: 600; }
.daypicker input[type=date] {
    position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer;
}

/* Segmentierte Auswahl (Radios) */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.segmented.wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 52px; padding: 6px 8px;
    border-radius: 12px; border: 1px solid var(--border);
    background: var(--surface-2); font-weight: 500; cursor: pointer;
    user-select: none; -webkit-tap-highlight-color: transparent;
}
.segmented input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Zahl mit Stepper */
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper input {
    flex: 1; min-width: 0; height: 52px; text-align: center;
    font: inherit; font-size: 1.5rem; font-weight: 600;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); color: var(--text);
}
.stepper .unit { color: var(--muted); }
.step {
    width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text); font-size: 1.5rem; cursor: pointer;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font: inherit; font-size: .9rem;
    text-decoration: none; cursor: pointer; white-space: nowrap;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip-clear { color: var(--muted); }

textarea, input[type=text], input[type=password], input[type=number], input[type=date], select {
    width: 100%; font: inherit; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; min-height: 44px;
}
textarea { resize: vertical; }

.metric.is-hidden { display: none; }
details.more { margin-bottom: 12px; }
details > summary { cursor: pointer; padding: 8px 0; color: var(--accent); }

.savebar {
    position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px);
    margin-top: 8px; z-index: 4;
}
.savebar .btn { width: 100%; min-height: 54px; font-size: 1.05rem; box-shadow: 0 4px 14px rgb(0 0 0 / .15); }

/* Meldungen */
.flash { padding: 12px 14px; border-radius: 12px; margin-bottom: 12px; font-weight: 500; }
.flash-success { background: var(--success-bg); color: var(--success-ink); }
.flash-error, .flash-warning { background: var(--error-bg); color: var(--error-ink); }
.flash-info { background: var(--accent-soft); color: var(--text); }

/* Formulare (FormHelper) */
.form .input { margin-bottom: 14px; }
.form .input > label { display: block; font-weight: 500; margin-bottom: 4px; }
.form .input.checkbox label { display: flex; gap: 10px; align-items: center; font-weight: 400; min-height: 44px; }
.form .input.checkbox input { width: 22px; height: 22px; accent-color: var(--accent); }
.form .error-message { color: var(--danger); font-size: .9rem; margin-top: 4px; }
.form .input.error input, .form .input.error select, .form .input.error textarea { border-color: var(--danger); }
.form fieldset.sub { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 0; margin: 0 0 14px; }
.form fieldset.sub legend { padding: 0 6px; color: var(--text-2); }

/* Listen */
.list, .daylist { list-style: none; margin: 0 0 12px; padding: 0; }
.list li a, .daylist li a {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px; margin-bottom: 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text); text-decoration: none;
}
.list li a { flex-direction: column; gap: 2px; }
.list li.inactive a { opacity: .55; }
.daylist .date { display: flex; flex-direction: column; align-items: center; width: 40px; flex: none; }
.daylist .date strong { font-size: 1.25rem; line-height: 1.1; }
.daylist .date small { color: var(--muted); }
.daylist .vals { display: flex; flex-direction: column; gap: 1px; font-size: .95rem; min-width: 0; }
.daylist .note { color: var(--text-2); font-style: italic; overflow-wrap: anywhere; }
.daylist a.missing { background: transparent; border-style: dashed; }

/* Statistik */
.periods { margin: 0 0 4px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.custom-range form { margin: 4px 0 8px; flex-wrap: nowrap; }
.custom-range input { min-width: 0; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.tile { background: var(--surface-2); border-radius: 10px; padding: 10px; min-width: 0; }
.tile b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile b small { font-weight: 400; font-size: .8rem; color: var(--text-2); }
.tile span { font-size: .8rem; color: var(--text-2); }
.tile.hero b { font-size: 1.3rem; }
.tile b { white-space: nowrap; }
.tile b small.u, .num small.u { display: inline; font-size: .75em; font-weight: 500; color: var(--text-2); }
.bar { display: block; height: 10px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 4px; background: var(--accent); min-width: 2px; }
.stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; }
.stack > span { min-width: 3px; }
.stack > span:first-child { border-radius: 4px 0 0 4px; }
.stack > span:last-child { border-radius: 0 4px 4px 0; }
.stack > span:only-child { border-radius: 4px; }
.c1 { background: var(--c1); } .c2 { background: var(--c2); } .c3 { background: var(--c3); } .c4 { background: var(--c4); }
.c5 { background: var(--c5); } .c6 { background: var(--c6); } .c7 { background: var(--c7); } .c8 { background: var(--c8); }
.legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9rem; }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.stat details { border-top: 1px solid var(--border); margin-top: 8px; }
table.rows { width: 100%; border-collapse: collapse; margin: 4px 0; }
table.rows th { text-align: left; font-weight: 500; white-space: nowrap; padding: 6px 8px 6px 0; width: 1%; }
table.rows td { padding: 6px 0; }
table.rows .barcell { width: 100%; }
table.rows .num { text-align: right; white-space: nowrap; padding-left: 10px; font-variant-numeric: tabular-nums; }
table.rows .num small { display: block; color: var(--muted); font-size: .75rem; }

/* Untere Navigation */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; justify-content: space-around;
    height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
    background: var(--surface); border-top: 1px solid var(--border);
}
.tabbar a {
    flex: 1; max-width: 160px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--muted); text-decoration: none; font-size: .75rem;
}
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a.active { color: var(--accent); font-weight: 600; }

@media (min-width: 700px) {
    .tiles { grid-template-columns: repeat(6, 1fr); }
    .stat .tiles:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}

/* Tagesstatus, Löschen */
.daystatus { text-align: center; margin: -4px 0 12px; font-size: .9rem; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-weight: 500; }
.badge-ok { background: var(--success-bg); color: var(--success-ink); }
.dangerzone { margin-top: 24px; }
.daylist li { display: flex; align-items: flex-start; gap: 8px; }
.daylist li > a { flex: 1; min-width: 0; }
.daylist .vals { flex: 1; }
.daylist .chevron { align-self: center; color: var(--muted); font-size: 1.4rem; line-height: 1; }
.rowdelete { margin: 0; }
.btn-icon-danger { cursor: pointer; color: var(--danger); margin-top: 6px; }
.btn-icon-danger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }