/* Toolbox – Basis-Styles. Kein Build-Schritt, Hell/Dunkel nach System oder Einstellung (dunkle Farben in dark.css).
   Look: Papier mit Aquarell-Flächen (wash-*.webp, erzeugt mit bin/paint.py), jedes Tool hat seine Farbe (data-tone). */

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

:root {
    --bg: #f6f0e6;
    --surface: #fffcf7;
    --surface-2: #f4ede2;
    --glass: rgba(255, 251, 245, .74);
    --border: #e8dfd1;
    --border-strong: #d5c9b7;
    --text: #2a2826;
    --muted: #6b645c;

    /* Farben der Tools: kräftig (Text, Knöpfe) · hover · zart (Flächen) · Farbe (Aquarell-Tupfer) */
    --teal: #2c6e70; --teal-hover: #225a5c; --teal-soft: #dcecea; --teal-paint: #93cfc9;
    --sky: #2a6a9e; --sky-hover: #215684; --sky-soft: #e1ecf6; --sky-paint: #9cc2e6;
    --apricot: #a4542a; --apricot-hover: #874421; --apricot-soft: #fbe6d8; --apricot-paint: #f5b48c;
    --rose: #a3445e; --rose-hover: #87374d; --rose-soft: #f8e2e7; --rose-paint: #eea7b7;
    --sage: #3d7550; --sage-hover: #315f41; --sage-soft: #e2efe4; --sage-paint: #a9d2b0;
    --lavender: #6a52a8; --lavender-hover: #57438b; --lavender-soft: #ece6f7; --lavender-paint: #c4b5ea;
    --honey: #84600f; --honey-hover: #6b4d0c; --honey-soft: #f7edd4; --honey-paint: #ecc978;
    --berry: #8f3d7c; --berry-hover: #763265; --berry-soft: #f6e3f1; --berry-paint: #e2a6d2;
    --stone: #586474; --stone-hover: #475260; --stone-soft: #e6e9ed; --stone-paint: #b4bfcb;
    --ink: #3a4b7c; --ink-hover: #2e3c64; --ink-soft: #e3e7f2; --ink-paint: #a7b5dc;
    --moss: #56691f; --moss-hover: #465619; --moss-soft: #ebefd8; --moss-paint: #c3d08a;

    --accent: var(--teal);
    --accent-hover: var(--teal-hover);
    --accent-soft: var(--teal-soft);
    --paint: var(--teal-paint);
    --on-accent: #ffffff;
    --danger: #b0413a;
    --danger-soft: #f9e3df;
    --success: #36764a;
    --success-soft: #e2f0e5;
    --warning: #875a10;
    --warning-soft: #fbefd6;
    --heart: #c4485f;

    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 1px 2px rgba(80, 60, 30, .05), 0 8px 24px -14px rgba(80, 60, 30, .24);
    --shadow-lift: 0 2px 4px rgba(80, 60, 30, .06), 0 18px 34px -16px rgba(80, 60, 30, .32);
    --sidebar-w: 256px;
    --dock: 0px; /* Höhe der Leiste unten (Handy) inkl. Rand fürs iPhone */
    /* Abstand oben: Statusleiste plus Luft – neuere iPhones zeichnen darunter noch einen weichen Unschärfe-Rand.
       Die Luft gibt es nur, wenn es oben überhaupt einen Rand gibt (min() mit dem Rand selbst). */
    --safe-top: calc(env(safe-area-inset-top, 0px) + min(env(safe-area-inset-top, 0px), 18px));
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Lateinisch als Serifenschrift; Hangul fällt auf eine moderne koreanische Schrift zurück (statt auf eine Serifen-Schrift) */
    --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", serif;
    --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --wash-opacity: .62;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
    color-scheme: light;
}

/* Dunkle Farben: public/assets/dark.css (je nach Einstellung „Darstellung“ unter „Mein Konto“) */

/* Farbe pro Tool – am <body> (ganze Seite) oder an einzelnen Links/Kacheln */
[data-tone=teal] { --accent: var(--teal); --accent-hover: var(--teal-hover); --accent-soft: var(--teal-soft); --paint: var(--teal-paint); }
[data-tone=sky] { --accent: var(--sky); --accent-hover: var(--sky-hover); --accent-soft: var(--sky-soft); --paint: var(--sky-paint); }
[data-tone=apricot] { --accent: var(--apricot); --accent-hover: var(--apricot-hover); --accent-soft: var(--apricot-soft); --paint: var(--apricot-paint); }
[data-tone=rose] { --accent: var(--rose); --accent-hover: var(--rose-hover); --accent-soft: var(--rose-soft); --paint: var(--rose-paint); }
[data-tone=sage] { --accent: var(--sage); --accent-hover: var(--sage-hover); --accent-soft: var(--sage-soft); --paint: var(--sage-paint); }
[data-tone=honey] { --accent: var(--honey); --accent-hover: var(--honey-hover); --accent-soft: var(--honey-soft); --paint: var(--honey-paint); }
[data-tone=lavender] { --accent: var(--lavender); --accent-hover: var(--lavender-hover); --accent-soft: var(--lavender-soft); --paint: var(--lavender-paint); }
[data-tone=berry] { --accent: var(--berry); --accent-hover: var(--berry-hover); --accent-soft: var(--berry-soft); --paint: var(--berry-paint); }
[data-tone=stone] { --accent: var(--stone); --accent-hover: var(--stone-hover); --accent-soft: var(--stone-soft); --paint: var(--stone-paint); }
[data-tone=ink] { --accent: var(--ink); --accent-hover: var(--ink-hover); --accent-soft: var(--ink-soft); --paint: var(--ink-paint); }
[data-tone=moss] { --accent: var(--moss); --accent-hover: var(--moss-hover); --accent-soft: var(--moss-soft); --paint: var(--moss-paint); }

html { -webkit-text-size-adjust: 100%; min-height: 100%; background: var(--bg) var(--grain); touch-action: manipulation; /* kein Zoom durch Doppeltippen */ }
body { margin: 0; color: var(--text); font: 15px/1.55 var(--font); }

/* Aquarell-Flächen hinter allem: kühl oben rechts, warm unten links */
body::before, body::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: min(64vmax, 980px);
    aspect-ratio: 1;
    background: center / contain no-repeat;
    opacity: calc(var(--wash-opacity) * var(--wash-scale, 1));
    pointer-events: none;
}
body::before { top: max(-21vmax, -330px); right: max(-19vmax, -300px); background-image: url(wash-cool.webp); }
body::after { bottom: max(-24vmax, -380px); left: max(-20vmax, -320px); background-image: url(wash-warm.webp); }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-family: var(--display); font-size: 1.9rem; font-weight: 600; letter-spacing: -.005em; }
h2 { font-size: 1.1rem; font-weight: 650; }
h3 { font-size: .95rem; font-weight: 650; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
code, pre { font-family: var(--mono); font-size: .88em; }
small { font-size: .85em; }
.muted { color: var(--muted); }
[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; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--paint) 60%, transparent); }

.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Grundlayout ---------- */

/* svh = Höhe bei eingeblendeten Browserleisten – sonst ist auf dem iPhone jede Seite ein Stück scrollbar */
.shell { min-height: 100vh; min-height: 100svh; display: flex; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding: 20px 14px 16px max(14px, env(safe-area-inset-left));
}

.brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--text); text-decoration: none; padding: 2px 8px 20px; }
.brand:hover { color: var(--text); }
.brand-mark { display: block; width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 2px 6px rgba(80, 60, 30, .18); }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 500; transition: background-color .15s; }
.nav a .icon { color: var(--accent); }
.nav a.nav-admin .icon { color: var(--muted); }
.nav-text { flex: 1 1 auto; min-width: 0; }
.nav a:hover { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); color: var(--text); }
.nav a[aria-current=page] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.nav a[aria-current=page] .icon { color: var(--accent); }
.nav-badge { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 700; line-height: 22px; text-align: center; }
.nav-label { margin: 20px 12px 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; }

.sidebar-foot { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; display: grid; gap: 4px; }
.account-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; line-height: 1.3; }
.account-link:hover, .account-link[aria-current=page] { background: var(--surface-2); color: var(--text); }
.account-text { min-width: 0; }
.account-text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-text small { display: block; color: var(--muted); }
.account-avatar { width: 36px; height: 36px; }
.account-avatar.has-emoji { font-size: 1.2rem; }
.account-link-mark { display: inline-flex; border-radius: 50%; text-decoration: none; }
.sidebar-foot .btn-logout { justify-content: flex-start; gap: 10px; padding-left: 12px; color: var(--muted); font-weight: 500; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; }
.content { width: 100%; max-width: 1120px; padding: 32px 36px 64px; }
.backdrop { display: none; }
.tabbar { display: none; }

@media (max-width: 860px) {
    /* Leiste unten – verschwindet beim Tippen, damit sie nicht über der Tastatur klebt */
    body { --dock: calc(64px + env(safe-area-inset-bottom, 0px)); --wash-scale: .8; }
    body:has(:is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden]), textarea):focus) { --dock: 0px; }

    /* Menü: so hoch wie der sichtbare Bereich (100vh wäre auf dem iPhone höher – unten käme man nicht mehr hin) */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 30;
        height: auto;
        max-width: 86vw;
        background: var(--surface);
        transform: translateX(-100%);
        transition: transform .22s ease;
        padding-top: calc(16px + var(--safe-top));
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        overscroll-behavior: contain;
    }
    .nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
    .nav-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(30, 24, 18, .35); z-index: 20; }

    .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: calc(12px + var(--safe-top)) 16px 6px;
    }
    .topbar-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--text); text-decoration: none; }
    .topbar-brand:hover { color: var(--text); }
    .topbar-brand .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
    .account-link-mark:hover .account-avatar { border-color: var(--person); }
    /* Unterseiten: „‹ Zurück zu …“ oben links statt „Toolbox“; der Link über der Überschrift entfällt */
    .topbar-back { display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 40px; margin-left: -8px; padding: 4px 12px 4px 6px; border-radius: 999px; color: var(--accent); font-weight: 600; text-decoration: none; }
    .topbar-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-back .icon { flex: 0 0 auto; width: 22px; height: 22px; }
    .topbar-back:hover { background: var(--accent-soft); color: var(--accent); }
    .content .back-link { display: none; }

    .content { padding: 10px 16px calc(32px + max(var(--dock), env(safe-area-inset-bottom, 0px))); }

    .tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 25;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        height: var(--dock);
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: var(--glass);
        -webkit-backdrop-filter: blur(18px) saturate(1.15);
        backdrop-filter: blur(18px) saturate(1.15);
        border-top: 1px solid var(--border);
        /* iPhone-App: zurück an den unteren Rand, wenn der sichtbare Bereich nach der Tastatur verschoben bleibt (app.js) */
        translate: 0 var(--viewport-shift, 0px);
    }
    body:has(:is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden]), textarea):focus) .tabbar { display: none; }
    .tabbar-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        padding: 4px 2px;
        border: 0;
        background: none;
        color: var(--muted);
        font: inherit;
        font-size: .72rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .tabbar-link:hover { color: var(--text); }
    .tabbar-icon { position: relative; display: grid; place-items: center; width: 54px; height: 30px; border-radius: 999px; transition: background-color .15s; }
    .tabbar-icon .icon { width: 22px; height: 22px; }
    .tabbar-link[aria-current=page], .tabbar-link.is-current { color: var(--accent); }
    .tabbar-link[aria-current=page] .tabbar-icon, .tabbar-link.is-current .tabbar-icon { background: var(--accent-soft); }
    .tabbar-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Assistent: runder Knopf in der Mitte, ragt etwas über die Leiste */
    .tabbar-featured { color: var(--accent); }
    .tabbar-fab {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        margin-top: -24px;
        border-radius: 50%;
        color: var(--on-accent);
        background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 84%, #fff), var(--accent-hover));
        box-shadow: 0 0 0 4px var(--surface), 0 8px 18px -6px color-mix(in srgb, var(--accent) 85%, transparent);
        transition: transform .15s;
    }
    .tabbar-fab .icon { width: 26px; height: 26px; }
    .tabbar-featured:active .tabbar-fab { transform: scale(.94); }
    .tabbar-featured[aria-current=page] .tabbar-text { font-weight: 700; }
    .tabbar-badge { position: absolute; top: -4px; right: 4px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
}

/* ---------- Seitenkopf, Karten, Raster ---------- */

.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 24px; }
.page-head h1 { position: relative; z-index: 0; width: fit-content; margin: 0; }
/* Pinselstrich in der Farbe des Tools hinter der Überschrift */
.page-head h1::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -.14em;
    right: -.2em;
    bottom: .04em;
    height: .48em;
    border-radius: 48% 52% 40% 60% / 60% 45% 55% 40%;
    background: var(--paint);
    opacity: .5;
    transform: rotate(-1.2deg);
}
.page-head p { margin: 6px 0 0; color: var(--muted); }

.hero { margin-bottom: 26px; }
.hero h1 { font-size: 2.2rem; }
.hero .hero-date { margin: 0 0 6px; font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; }
.card > h2:first-child { margin-bottom: 14px; }
.card + .card, .grid-2 + .card, .card + .table-wrap, .grid-2 + .grid-2 { margin-top: 16px; }
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.grid-2 > .card + .card { margin-top: 0; }
.stack > * + * { margin-top: 14px; }
.section-actions { margin-top: 12px; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.danger-zone h2 { color: var(--danger); }
.plain-list { margin: 0 0 14px; padding-left: 18px; }

@media (max-width: 560px) {
    h1 { font-size: 1.7rem; }
    .hero h1 { font-size: 1.85rem; }
    .card { padding: 18px; }
    .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn .icon { width: 18px; height: 18px; }
.btn-primary {
    border-color: transparent;
    color: var(--on-accent);
    background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 84%, #fff) 0%, var(--accent) 45%, var(--accent-hover) 100%);
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.btn-primary:hover { border-color: transparent; color: var(--on-accent); background: linear-gradient(140deg, var(--accent) 0%, var(--accent-hover) 100%); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { border-color: transparent; background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.btn-sm { min-height: 32px; padding: 5px 13px; font-size: .875rem; }
.btn-block { width: 100%; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }

/* ---------- Formulare ---------- */

.form-narrow { max-width: 600px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .9rem; }

input[type=text], input[type=email], input[type=password], input[type=url], input[type=number],
input[type=search], input[type=date], input[type=time], input[type=datetime-local], select, textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
/* Einzeilige Felder: feste Zeilenhöhe, damit die Höhe nicht von der Schrift abhängt. Chrome zeigt gespeicherte
   Zugangsdaten bis zum ersten Klick in eigener, kleinerer Schrift – sonst springt z.B. die Anmeldung beim Antippen. */
input:not([type=checkbox]):not([type=radio]), select { line-height: 22px; }
input:-webkit-autofill::first-line { font-family: var(--font); font-size: inherit; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
input:disabled, select:disabled { background: var(--surface-2); color: var(--muted); }
/* Handy: Unter 16px zoomt Safari beim Antippen eines Felds hinein */
@media (max-width: 860px), (pointer: coarse) {
    /* spezifisch genug, um input[type=text] { font: inherit } und z.B. .wiki-editor zu schlagen */
    body :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; }
}
/* iPhone: Datumsfelder halten sich sonst nicht an die Breite und stehen rechts über */
@supports (-webkit-touch-callout: none) {
    input[type=date], input[type=time], input[type=datetime-local] { -webkit-appearance: none; appearance: none; min-width: 0; display: block; }
    input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value, input[type=datetime-local]::-webkit-date-and-time-value { margin: 0; text-align: left; }
    .quick-add input[type=date] { display: inline-block; }
}
textarea { min-height: 120px; resize: vertical; }

.hint { font-size: .85rem; color: var(--muted); margin: 0; }
.field-error { font-size: .85rem; color: var(--danger); margin: 0; font-weight: 600; }

.checkbox { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.checkbox input { margin: 4px 0 0; accent-color: var(--accent); width: 17px; height: 17px; flex: 0 0 auto; }
.checkbox small { display: block; color: var(--muted); }

fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 16px; margin: 0; min-width: 0; }
legend { padding: 0 6px; font-weight: 650; }
.permission-group h3 { margin: 4px 0 8px; color: var(--muted); }
.permission-group .checkbox + .checkbox { margin-top: 8px; }

/* ---------- Hinweise ---------- */

.alert { padding: 12px 16px; border-radius: 14px; margin-bottom: 16px; border: 1px solid transparent; }
.alert-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.alert-error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
.alert-info { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.alert a { color: inherit; font-weight: 600; }
.card .alert:last-child { margin-bottom: 0; }

/* ---------- Tabellen ---------- */

.table-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 30%, transparent); }
.table .wrap { white-space: normal; min-width: 180px; }
.table .num { text-align: right; }

/* Breite Tabellen (.table-stack) auf dem Handy: jede Zeile eine Karte, der Spaltenname (data-label) steht vor dem Wert.
   Zellen ohne data-label (erste Spalte = Titel, Knöpfe) nehmen die ganze Breite. */
@media (max-width: 640px) {
    /* Safari zählt den abgeschnittenen Text in Auswahlfeldern zur Breite – sonst ließe sich die Karte seitwärts schieben */
    .table-wrap:has(> .table-stack) { overflow: clip; }
    .table-stack, .table-stack tbody, .table-stack tr { display: block; }
    .table-stack thead { display: none; }
    .table-stack tr { padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .table-stack tbody tr:last-child { border-bottom: 0; }
    .table-stack tbody tr:hover td { background: none; }
    .table-stack td { display: block; position: relative; padding: 5px 0 5px 8.5rem; border: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }
    .table-stack td::before {
        content: attr(data-label); position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 7.75rem;
        font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; overflow-wrap: normal;
    }
    .table-stack td:not([data-label]) { padding-left: 0; }
    .table-stack td:not([data-label])::before { content: none; }
    .table-stack td:first-child { padding-bottom: 8px; font-weight: 600; }
    .table-stack td:first-child small { font-weight: 400; }
    .table-stack td:empty { display: none; }
    .table-stack .wrap { min-width: 0; }
    .table-stack .num { text-align: left; }
    .table-stack select { width: 100%; }
    .table-stack .table-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
    .table-stack .table-actions:not(:has(*)) { display: none; }
}

/* ---------- Zeichen der Personen (Emoji + Farbe, siehe person_mark()) ---------- */

.person-teal { --person: var(--teal); --person-soft: var(--teal-soft); }
.person-sky { --person: var(--sky); --person-soft: var(--sky-soft); }
.person-lavender { --person: var(--lavender); --person-soft: var(--lavender-soft); }
.person-rose { --person: var(--rose); --person-soft: var(--rose-soft); }
.person-apricot { --person: var(--apricot); --person-soft: var(--apricot-soft); }
.person-honey { --person: var(--honey); --person-soft: var(--honey-soft); }
.person-sage { --person: var(--sage); --person-soft: var(--sage-soft); }
.person-mark {
    flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--person-soft); color: var(--person); border: 1.5px solid color-mix(in srgb, var(--person) 45%, transparent);
    font-size: .74rem; font-weight: 700; line-height: 1; text-decoration: none;
}
.person-mark.has-emoji { font-size: 1.05rem; }
.person-mark-lg { width: 52px; height: 52px; font-size: 1rem; }
.person-mark-lg.has-emoji { font-size: 1.65rem; }
.person-name { display: inline-flex; align-items: center; gap: 8px; }
.person-name .person-mark { width: 26px; height: 26px; }

/* Aufgaben: Streifen und Zeichen in der Farbe der zuständigen Person */
.check-item.has-person { box-shadow: inset 4px 0 0 var(--person); }
.check-person { margin: 0 14px 0 4px; }
.check-item.is-checked .check-person { opacity: .55; }

/* Bitten: vorne das Zeichen der Person, die fragt (bzw. gefragt wurde), darunter ihre Nachricht */
.request-person { margin: 0 14px 0 18px; }
.request-message { margin-top: 3px; font-size: .88rem; font-style: italic; color: var(--text); overflow-wrap: anywhere; }
.meta-request { color: var(--accent); font-weight: 600; }
.answer-item.is-declined .answer-status { color: var(--danger); font-weight: 600; }
.answer-item.is-accepted .answer-status, .answer-item.is-done .answer-status { color: var(--accent); font-weight: 600; }
/* „…“ klappt Einplanen und Absagen in einer eigenen Zeile auf */
.request-more > summary { list-style: none; }
.request-more > summary::-webkit-details-marker { display: none; }
/* „…“ oben rechts in der Karte (wie bei den anderen Listen) – so passen die zwei Knöpfe immer in eine Zeile */
.request-item { position: relative; }
.request-item .check-body { padding-right: 44px; }
.request-more-toggle { position: absolute; top: 8px; right: 8px; min-height: 36px; padding: 6px 9px; border-color: transparent; }
.request-more-toggle .icon { width: 18px; height: 18px; }
.request-more[open] { flex-basis: 100%; }
.request-more[open] > summary { background: var(--accent-soft); color: var(--accent); }
.request-more-panel { display: grid; gap: 10px; margin-top: 10px; }
.request-more-panel form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.request-more-label { flex-basis: 100%; font-size: .85rem; font-weight: 600; color: var(--muted); }
/* Wird es eng (schmale Karte, Tablet), rutschen die Knöpfe unter den Text statt ihn zusammenzudrücken */
.request-item, .answer-item { flex-wrap: wrap; }
.request-item .check-body, .answer-item .check-body { flex: 1 1 240px; }
.request-item .row-actions, .answer-item .row-actions { margin-left: auto; }
/* Aufgeklappt: die Knöpfe stehen in einer eigenen Zeile unter dem Text (wie auf dem Handy) */
.request-item:has(details[open]) { flex-wrap: wrap; }
.request-item:has(details[open]) .check-body { flex-basis: calc(100% - 62px); }
.request-item:has(details[open]) .row-actions { flex-basis: 100%; padding: 0 14px 12px 62px; }
.request-more form input { width: auto; min-width: 0; flex: 1 1 140px; max-width: 260px; padding: 6px 10px; }
.request-card { margin-bottom: 18px; }
.request-card h2 { margin: 0 0 8px 2px; font-size: 1rem; color: var(--accent); }
.request-status { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--muted); }
/* Nachricht zur Bitte nur, wenn beim Speichern jemand gefragt würde (Optionen mit data-ask) */
.task-form:not(:has(#assignee_id option[data-ask]:checked)) .request-message-field,
.task-form:has(input[name=is_private]:checked) .request-message-field { display: none; }

/* Auswahl: Farbe als Tupfen, Emoji als Knöpfe – das gewählte in der gewählten Farbe */
.mark-card-head { display: flex; align-items: center; gap: 14px; }
.mark-card-head h2 { margin: 0 0 2px; }
.mark-card-head p { margin: 0; }
.mark-picker { display: grid; gap: 14px; }
.mark-picker fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.mark-picker legend { margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.color-choice, .emoji-choice { position: relative; cursor: pointer; }
.color-choice input, .emoji-choice input { position: absolute; opacity: 0; pointer-events: none; }
.color-choice > span { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--person); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); }
.color-choice input:checked + span { box-shadow: 0 0 0 2px var(--person); }
.emoji-choice > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 1.3rem; line-height: 1; transition: background-color .15s, border-color .15s; }
.emoji-choice > span.is-initials { font-size: .8rem; font-weight: 700; color: var(--muted); }
.emoji-choice:hover > span { border-color: var(--border-strong); }
.emoji-choice input:checked + span { background: var(--person-soft); border: 2px solid var(--person); color: var(--person); }
.color-choice input:focus-visible + span, .emoji-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.mark-picker:has([name=mark_color][value=teal]:checked) { --person: var(--teal); --person-soft: var(--teal-soft); }
.mark-picker:has([name=mark_color][value=sky]:checked) { --person: var(--sky); --person-soft: var(--sky-soft); }
.mark-picker:has([name=mark_color][value=lavender]:checked) { --person: var(--lavender); --person-soft: var(--lavender-soft); }
.mark-picker:has([name=mark_color][value=rose]:checked) { --person: var(--rose); --person-soft: var(--rose-soft); }
.mark-picker:has([name=mark_color][value=apricot]:checked) { --person: var(--apricot); --person-soft: var(--apricot-soft); }
.mark-picker:has([name=mark_color][value=honey]:checked) { --person: var(--honey); --person-soft: var(--honey-soft); }
.mark-picker:has([name=mark_color][value=sage]:checked) { --person: var(--sage); --person-soft: var(--sage-soft); }

/* Eigenes Emoji: Knopf (zeigt das eingetippte) und Feld daneben */
.emoji-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; margin-top: 4px; }
.emoji-custom .input-emoji { width: 5.5em; flex: 0 0 auto; }
.emoji-custom .hint { flex: 1 1 220px; }

/* ---------- Badges ---------- */

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 650; background: var(--surface-2); color: var(--muted); vertical-align: middle; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }

/* ---------- Startseite ---------- */

.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-height: 176px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
/* zarter Farbtupfer in der Ecke */
.tile::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -46px;
    top: -54px;
    width: 160px;
    height: 160px;
    border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
    background: var(--paint);
    opacity: .2;
    transition: opacity .2s, transform .3s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--text); }
.tile:hover::before { opacity: .32; transform: scale(1.08) rotate(6deg); }
.tile-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 44% 56% 50% 50% / 52% 46% 54% 48%; background: var(--accent-soft); color: var(--accent); }
.tile-icon .icon { width: 26px; height: 26px; }
.tile-body { display: grid; gap: 4px; }
.tile-title { font-size: 1.08rem; font-weight: 650; }
.tile-text { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.tile-badge { margin-top: auto; padding: 3px 11px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .78rem; font-weight: 650; }
@media (max-width: 560px) {
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .tile { min-height: 0; padding: 16px; gap: 10px; border-radius: 20px; }
    .tile::before { width: 110px; height: 110px; right: -36px; top: -40px; }
    .tile-text { display: none; }
    .tile-icon { width: 44px; height: 44px; }
    .tile-icon .icon { width: 24px; height: 24px; }
    .tile-badge { margin-top: 0; }
}

/* Startseite mit Karten: alle Tools klein darunter (Symbol und kurzer Name, Zähler oben rechts) */
.tiles.tiles-compact { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 8px; }
.tiles-compact .tile { min-height: 0; padding: 12px 4px 10px; gap: 6px; align-items: center; text-align: center; border-radius: 18px; box-shadow: none; }
.tiles-compact .tile::before { display: none; }
.tiles-compact .tile-icon { width: 40px; height: 40px; }
.tiles-compact .tile-icon .icon { width: 22px; height: 22px; }
.tiles-compact .tile-title { max-width: 100%; font-size: .78rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.tiles-compact .tile-badge { position: absolute; top: 6px; right: 6px; min-width: 20px; margin: 0; padding: 1px 6px; font-size: .7rem; }

/* Erklärung unter der Überschrift: nur, solange die Seite noch leer ist – danach kostet sie nur Platz */
main:has(:is(.check-item, .recipe-card, .wiki-list > *, .conversation-list)) .page-intro { display: none; }

.empty { padding: 36px 20px; text-align: center; color: var(--muted); border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 55%, transparent); }

/* ---------- Listen zum Abhaken (Aufgaben, Einkaufsliste) ---------- */

.quick-add { display: flex; gap: 8px; margin-bottom: 20px; }
.quick-add input[type=text] { flex: 1 1 auto; min-width: 0; }
.quick-add input[type=date] { flex: 0 0 auto; width: auto; }
/* Datum zum Aufklappen (Aufgaben): erst ein Kalender-Knopf, offen ein Feld in eigener Zeile */
.quick-add:has(.quick-date) { flex-wrap: wrap; }
.quick-add:has(.quick-date) > input[type=text] { flex: 1 1 0; }
.quick-date > summary { list-style: none; }
.quick-date > summary::-webkit-details-marker { display: none; }
.quick-date-toggle { height: 100%; padding: 8px 12px; }
.quick-date-toggle .icon { width: 20px; height: 20px; }
.quick-date[open] { display: flex; gap: 8px; flex-basis: 100%; order: 5; }
.quick-date[open] > summary { height: auto; background: var(--accent-soft); color: var(--accent); }
.quick-date input[type=date] { flex: 1 1 auto; width: auto; max-width: 240px; }
/* „Hinzufügen“: auf dem Handy nur „+“, damit das Feld breiter ist */
.btn-add .icon { display: none; }
@media (max-width: 560px) {
    .btn-add { flex: 0 0 48px; width: 48px; padding: 0; }
    .btn-add .icon { display: block; width: 22px; height: 22px; }
    .btn-add .btn-add-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    form[aria-busy="true"] .btn-add:disabled .icon { display: none; }
    form[aria-busy="true"] .btn-add:disabled::after { margin: 0; }
}

/* Umschalter als „Pillen“ */
.tabs {
    display: flex;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--surface-2) 85%, transparent);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 6px 16px; border-radius: 999px; color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current=page] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(80, 60, 30, .14); }
@media (max-width: 400px) {
    .tabs a { padding: 6px 12px; }
}

.list-group + .list-group { margin-top: 24px; }
.group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.group-head form { margin: 0; }
.group-actions { display: flex; gap: 6px; }
.row-button { border: 0; background: none; cursor: pointer; font: inherit; }
.pantry-item .check-toggle { width: auto; padding-right: 4px; }
.pantry-item .check-body { padding-left: 0; }
.pantry-item .check-title { display: flex; align-items: center; gap: 8px; }
.pantry-item .item-emoji { margin-right: 0; }
.group-label { margin: 0 0 8px 4px; font-size: .74rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.group-head .group-label { margin-bottom: 0; }
.group-label.is-danger { color: var(--danger); }
.group-label .count { font-weight: 500; opacity: .8; }

.check-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.check-item { display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid var(--border); transition: background-color .15s; }
.check-item:last-child { border-bottom: 0; }
.check-item:hover { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.check-form { display: flex; margin: 0; }
/* Wischen in Listen (app.js): die Zeile folgt dem Finger, dahinter steht, was beim Loslassen passiert */
[data-swipe-right], [data-swipe-left] { position: relative; touch-action: pan-y; }
.is-swiping { overflow: hidden; -webkit-user-select: none; user-select: none; }
.is-swiping > :not(.swipe-bg) { transform: translateX(var(--swipe-x, 0px)); }
.is-settling > :not(.swipe-bg), .is-settling > .swipe-bg { transition: transform .2s ease, width .2s ease; }
.swipe-bg { position: absolute; top: 0; bottom: 0; width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; color: var(--surface); font-weight: 600; font-size: .9rem; opacity: .75; transition: opacity .15s; }
.swipe-bg > span { padding: 0 18px; }
.swipe-bg.is-armed { opacity: 1; }
.swipe-right { left: 0; justify-content: flex-start; background: var(--success); }
.swipe-left { right: 0; justify-content: flex-end; background: var(--danger); }
.swipe-left.tone-warning { background: var(--warning); }
.check-form-wide { flex: 1 1 auto; min-width: 0; }
.check-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 12px 14px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.check-box { position: relative; flex: 0 0 auto; width: 24px; height: 24px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); transition: background-color .15s, border-color .15s; }
.check-toggle:hover .check-box { border-color: var(--accent); background: var(--accent-soft); }
.is-checked .check-box { background: var(--accent); border-color: var(--accent); }
.is-checked .check-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check-body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 10px 14px 10px 0; color: var(--text); text-decoration: none; }
.check-body:hover { color: var(--text); }
.check-body:hover .check-title { color: var(--accent); }
.check-title { font-weight: 550; overflow-wrap: anywhere; }
.is-checked .check-title { color: var(--muted); text-decoration: line-through; }
.check-meta { display: flex; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.check-meta:empty { display: none; }
.check-meta > span + span::before { content: "·"; margin: 0 6px; }
.meta-due.is-overdue { color: var(--danger); font-weight: 600; }
.check-qty { margin-left: auto; padding-left: 8px; color: var(--muted); font-size: .9rem; white-space: nowrap; }
/* Name in der anderen Sprache (Familien mit Deutsch und Koreanisch) */
.item-translation { margin-left: 4px; color: var(--muted); font-size: .85em; font-weight: 400; }
.is-checked .item-translation { text-decoration: none; }
/* Übersetzung frei geschriebener Texte (Aufgaben, Bitten, Tagebuch …) als eigene Zeile unter dem Original */
.text-translation { display: block; margin-top: 2px; color: var(--muted); font-size: .88rem; font-style: normal; font-weight: 400; white-space: pre-line; }
.text-translation::before { content: "↳ "; opacity: .6; }
.field-translation { margin: 6px 2px 0; }
/* Knopf „Übersetzen“ (templates/partials/translate.php): rechts über der Liste bzw. neben „Zurück“ */
.translate-form { display: inline-flex; margin: 0; }
.translate-btn { display: inline-flex; align-items: center; gap: 6px; }
.translate-btn .icon { width: 16px; height: 16px; }
.list-tools { display: flex; justify-content: flex-end; margin: -8px 0 6px; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Wiki: Hinweis über einer übersetzten Seite */
.translation-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -10px 0 12px 2px; color: var(--muted); font-size: .88rem; }
.translation-note .icon { width: 16px; height: 16px; }
.item-emoji { flex: 0 0 auto; width: 1.6em; margin-right: -4px; font-size: 1.15rem; line-height: 1; text-align: center; }
.is-checked .item-emoji { opacity: .45; filter: grayscale(.6); }
.input-emoji { max-width: 6em; font-size: 1.2rem; text-align: center; }
.row-action { display: flex; align-items: center; align-self: stretch; padding: 0 16px; color: var(--muted); }
.row-action:hover { color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips form { margin: 0; }
.chip { padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.notice-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notice-row form { margin: 0; }
.notice-row .btn { color: inherit; }

.quick-add select { flex: 0 0 auto; width: auto; }
.quick-add .checkbox { flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 2px; }
.quick-add .checkbox input { margin: 0; }
@media (max-width: 560px) {
    .quick-add.has-options { flex-wrap: wrap; }
    .quick-add.has-options input[type=text] { flex-basis: 100%; }
    .quick-add.has-options select, .quick-add.has-options input[type=date] { flex: 1 1 40%; min-width: 0; }
    .quick-add.has-options .btn { flex: 1 1 auto; }
}

/* ---------- Tagebuch ---------- */

.search-row { display: flex; gap: 8px; margin-bottom: 20px; }
.search-row input { flex: 1 1 auto; min-width: 0; }
.list-info { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 14px 4px; color: var(--muted); }
.pager { margin-top: 20px; text-align: center; }

.avatar { flex: 0 0 auto; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 14px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: .8rem; font-weight: 700; }
.avatar.is-me { background: var(--accent-soft); color: var(--accent); }
.journal-item .check-body { padding-left: 12px; }
.meta-thanks { color: var(--heart); }

.thank-form { display: flex; align-self: stretch; margin: 0; }
.thank-btn { display: flex; align-items: center; padding: 0 14px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.thank-btn path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.thank-btn:hover, .thank-btn[aria-pressed=true] { color: var(--heart); }
.thank-btn[aria-pressed=true] path { fill: currentColor; }

.thanks-box p { margin: 0; }
.thanks-box p + p { margin-top: 4px; }

.week-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.week-title { display: grid; text-align: center; line-height: 1.3; }
.week-title span { font-size: .85rem; color: var(--muted); }
.is-hidden { visibility: hidden; }

.grid-fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.inline-fields { display: flex; align-items: center; gap: 8px; }
.inline-fields input[type=number] { width: 80px; flex: 0 0 auto; }
.inline-fields select { flex: 1 1 auto; min-width: 0; }
.inline-fields input[type=time], input.input-time { flex: 0 0 auto; width: 7.5em; }

/* ---------- Diverses ---------- */

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.code-box { font-family: var(--mono); font-size: .85rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; word-break: break-all; user-select: all; }

/* ---------- Seiten ohne Anmeldung ---------- */

body.guest { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.guest-inner { width: 100%; max-width: 440px; }
.guest .brand { flex-direction: column; justify-content: center; gap: 12px; padding: 0 0 24px; font-size: 1.6rem; }
.guest .brand-mark { width: 68px; height: 68px; border-radius: 18px; box-shadow: 0 6px 18px -6px rgba(80, 60, 30, .35); }
.guest .card { padding: 26px 28px; }
.guest .card h1 { font-size: 1.5rem; }

.error-page { text-align: center; }
.error-code { font-family: var(--display); font-size: 3.4rem; font-weight: 600; color: var(--muted); line-height: 1; margin-bottom: 8px; }
pre.debug { text-align: left; white-space: pre-wrap; overflow: auto; max-height: 420px; margin: 20px 0 0; padding: 12px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: .78rem; }

/* ---------- App (PWA) ---------- */

/* Hinweis unten, solange offline bzw. eine gespeicherte Kopie angezeigt wird */
.offline-bar {
    position: fixed;
    left: 50%;
    bottom: calc(14px + max(var(--dock), env(safe-area-inset-bottom, 0px)));
    transform: translateX(-50%);
    translate: 0 var(--viewport-shift, 0px);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 7px 7px 7px 16px;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    font-size: .9rem;
    line-height: 1.3;
}
.offline-bar .btn { flex: 0 0 auto; border-radius: 999px; }
.offline-bar.is-nudged { animation: offline-nudge .45s ease; }
.is-offline .content { padding-bottom: calc(96px + max(var(--dock), env(safe-area-inset-bottom, 0px))); }
body.guest.is-offline { padding-bottom: 96px; }
@keyframes offline-nudge {
    0%, 100% { transform: translateX(-50%); }
    25% { transform: translateX(calc(-50% - 6px)); }
    75% { transform: translateX(calc(-50% + 6px)); }
}
@media (prefers-reduced-motion: reduce) {
    .offline-bar.is-nudged { animation: none; }
}

/* Nach dem Löschen: kleine Leiste unten mit „Rückgängig“ (app.js blendet sie nach ein paar Sekunden aus) */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(14px + max(var(--dock), env(safe-area-inset-bottom, 0px)));
    transform: translateX(-50%);
    translate: 0 var(--viewport-shift, 0px);
    z-index: 41;
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 6px 6px 6px 16px;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    font-size: .9rem;
    line-height: 1.3;
    animation: toast-in .25s ease;
    transition: opacity .3s ease, transform .3s ease;
}
.toast-text { min-width: 0; overflow-wrap: anywhere; }
.toast .undo-form { flex: 0 0 auto; }
.toast .undo-button { border-radius: 999px; }
.toast.is-leaving { opacity: 0; transform: translate(-50%, 12px); }
.notice-row .undo-form { flex: 0 0 auto; }
@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; transition: none; }
}

.offline-pages { margin: 0; padding-left: 18px; }
.offline-pages li + li { margin-top: 4px; }

.install-steps { margin: 0; padding-left: 20px; }
.install-steps li + li { margin-top: 6px; }
.install-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.install-hint-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* ---------- KI ---------- */

/* Formular wartet auf die Antwort (Speichern, KI …): kleiner Kringel im Knopf, erst nach kurzer Zeit sichtbar */
form[aria-busy="true"] [type=submit]:disabled, [data-busy-disabled] { cursor: progress; }
.btn[data-busy-disabled] { opacity: .8; }
form[aria-busy="true"]:not([data-submitting]) [type=submit]:disabled::after, [data-busy-disabled]::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: .85em;
    height: .85em;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0;
    animation: busy-spin .7s linear infinite, busy-show 0s .4s forwards;
}
/* Knöpfe nur mit Symbol: statt des Symbols (sonst springt die Größe) */
.icon-btn[data-busy-disabled] .icon { display: none; }
.icon-btn[data-busy-disabled]::after { margin: 0; }
[data-busy-disabled]::after { animation: busy-spin .7s linear infinite; }
[data-busy-disabled="shown"]::after { opacity: 1; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@keyframes busy-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    form[aria-busy="true"]:not([data-submitting]) [type=submit]:disabled::after { animation: busy-show 0s .4s forwards; }
    [data-busy-disabled]::after { animation: none; }
    .tile, .tile::before, .btn { transition: none; }
}

.answer { margin: 0 0 20px; padding: 14px 18px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.answer-text { margin: 0; font-size: 1.02rem; }
.answer-note { margin: 0; color: var(--muted); font-size: .85rem; }
.answer-text + .answer-note { margin-top: 6px; }

.section-title { margin: 28px 0 12px; }
.meter { display: block; width: 100%; height: 8px; margin: 14px 0 4px; border: 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; appearance: none; }
.meter::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.meter::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.meter::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

/* ---------- Assistent (Chat) ---------- */

textarea[data-autogrow] { resize: none; max-height: 40vh; overflow-y: auto; }
/* Formulare: seltener Gebrauchtes zum Aufklappen (<details class="form-more">) */
.form-more { border-top: 1px solid var(--border); padding-top: 12px; }
.form-more > summary { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; cursor: pointer; list-style: none; }
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary::before { content: "›"; display: inline-block; width: 1em; font-size: 1.25em; line-height: 1; transition: transform .15s; }
.form-more[open] > summary::before { transform: rotate(90deg); }
.form-more[open] > summary { margin-bottom: 14px; }
/* Löschen klein unter dem Formular */
.delete-link { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 14px; }
.delete-link .btn-danger { border-color: transparent; }
.back-link { display: inline-block; margin-bottom: 6px; font-size: .9rem; font-weight: 600; text-decoration: none; }

/* Runde Symbol-Knöpfe und Aufklapp-Menü (<details class="menu">) */
.icon-btn { display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; list-style: none; transition: background-color .15s, color .15s; }
.icon-btn:hover { background: color-mix(in srgb, var(--accent-soft) 85%, transparent); color: var(--accent); }
.icon-btn .icon { width: 22px; height: 22px; }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--accent-soft); color: var(--accent); }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lift); }
.menu-list form { margin: 0; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--surface-2); }
.menu-item .icon { width: 18px; height: 18px; color: var(--muted); }
.menu-item.is-danger, .menu-item.is-danger .icon { color: var(--danger); }
.icon .icon-fill { fill: currentColor; stroke: none; }

/* Eingabe: Textfeld und runder Senden-Knopf in einer „Pille“ */
.chat-composer { display: flex; align-items: flex-end; gap: 6px; padding: 5px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 26px; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.chat-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.chat-composer textarea, .chat-composer textarea:focus { flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 10px 8px 10px 14px; border: 0; border-radius: 20px; background: transparent; box-shadow: none; }
.chat-attach { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s; }
.chat-attach:hover { background: var(--accent-soft); color: var(--accent); }
.chat-photo-preview { position: relative; flex: 0 0 auto; align-self: center; }
.chat-photo-preview img { display: block; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.chat-photo-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--text); color: var(--bg); font-size: .65rem; line-height: 20px; cursor: pointer; }
.chat-photo { display: block; max-width: min(240px, 70%); max-height: 320px; margin-bottom: 6px; border-radius: 16px; border-bottom-right-radius: 6px; object-fit: cover; box-shadow: var(--shadow); }
.chat-send { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: var(--on-accent); background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 84%, #fff), var(--accent-hover)); box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--accent) 80%, transparent); cursor: pointer; transition: transform .1s, opacity .15s; }
.chat-send:hover { transform: scale(1.05); }
.chat-send:disabled { opacity: .45; cursor: default; transform: none; }
.chat-send .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.chat-stop { background: var(--text); color: var(--bg); box-shadow: none; }
form[aria-busy="true"] .chat-send:disabled .icon { display: none; }
form[aria-busy="true"] .chat-send:disabled::after { margin: 0; }
.chat-hint { margin: 6px 0 0 18px; color: var(--muted); font-size: .75rem; }
.chat-dock .chat-hint { display: none; }
@media (pointer: coarse) {
    .chat-hint { display: none; }
}

/* Startseite des Assistenten */
.chat-start { max-width: 820px; margin-bottom: 8px; }
/* Auf der Startseite: als Karte mit zartem Lavendel */
.chat-start-card { max-width: none; margin-bottom: 22px; padding: 18px 18px 16px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--surface) 70%, var(--accent-soft))); box-shadow: var(--shadow); }
.chat-start-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--accent); font-size: 1rem; }
.chat-start-card .chat-suggestions { margin-top: 12px; }
.chat-start-card .chat-hint { display: none; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chat-usage { margin: 0; font-size: .85rem; }
.chat-usage .meter { max-width: 320px; margin-top: 6px; }
/* Unter der Liste: Mail-Adresse und Verbrauch – gut zu wissen, aber nichts für den ersten Blick */
.chat-footer { max-width: 820px; margin-top: 24px; }
.chat-footer:not(:has(p, .chat-usage)) { display: none; }
.chat-footer .chat-mail-hint { margin: 0 0 8px; }
@media (max-width: 640px) {
    /* Vorschläge in einer Zeile zum Seitwärts-Wischen statt vier Zeilen untereinander */
    .chat-suggestions { flex-wrap: nowrap; overflow-x: auto; margin-top: 10px; padding-bottom: 2px; scrollbar-width: none; scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
    .chat-suggestions::-webkit-scrollbar { display: none; }
    .chat-suggestions .chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
    .chat-suggestions .chip:last-child { margin-right: 24px; }
}
.chat-group { margin: 28px 0 8px 4px; }

.conversation-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.conversation-list li + li { border-top: 1px solid var(--border); }
.conversation-list a { display: flex; align-items: center; gap: 12px; padding: 11px 16px 11px 12px; color: inherit; text-decoration: none; transition: background-color .15s; }
.conversation-list a:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.conversation-icon { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 44% 56% 50% 50% / 52% 46% 54% 48%; background: var(--accent-soft); color: var(--accent); }
.conversation-icon .icon { width: 18px; height: 18px; }
.conversation-text { display: grid; flex: 1 1 auto; min-width: 0; }
.conversation-title { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-meta { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.conversation-list .badge { flex: 0 0 auto; white-space: nowrap; }
.conversation-list .is-shared .conversation-icon { background: var(--sage-soft); color: var(--sage); }

/* Neue Unterhaltung: „Für mich“ oder „Für uns“ */
.chat-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; }
/* Als kleiner Umschalter (zwei Hälften einer Pille) – eine Wahl, keine zwei Knöpfe */
.chat-scope .chip-choice + .chip-choice { margin-left: -9px; }
.chat-scope .chip-choice span { padding: 4px 12px; font-size: .82rem; }
.chat-scope .chip-choice:first-of-type span { border-radius: 999px 0 0 999px; }
.chat-scope .chip-choice:nth-of-type(2) span { border-radius: 0 999px 999px 0; }
.chat-scope .chip-choice input:checked + span { position: relative; z-index: 1; font-weight: 550; }
.chip-choice { position: relative; cursor: pointer; }
.chip-choice input { position: absolute; opacity: 0; pointer-events: none; }
.chip-choice span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); font-size: .9rem; transition: border-color .15s, color .15s, background-color .15s; }
.chip-choice .icon { width: 16px; height: 16px; }
.chip-choice:hover span { border-color: var(--accent); }
.chip-choice input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.chip-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-scope-hint { display: none; flex-basis: 100%; margin: 0; font-size: .85rem; }
.chat-scope:has(input[value=family]:checked) .chat-scope-hint { display: block; }

/* Unterhaltung: füllt die Höhe, damit die Eingabe auch bei kurzen Gesprächen unten sitzt */
body:has([data-chat]) .content { padding-bottom: 0; }
.chat { display: flex; flex-direction: column; max-width: 820px; min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); margin: 0 auto; }
.chat-bar {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: -10px -8px 14px;
    padding: 8px;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 0 0 20px 20px;
}
.chat-bar-title { flex: 1 1 auto; min-width: 0; padding: 0 6px; }
.chat-bar h1 { margin: 0; font-family: var(--font); font-size: 1.05rem; font-weight: 650; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-bar-meta { display: block; color: var(--muted); font-size: .76rem; }
.chat-rename { display: flex; align-items: center; gap: 4px; }
.chat-rename input { min-height: 36px; padding: 6px 12px; }

.chat-log { display: flex; flex-direction: column; gap: 10px; }
.chat-msg { display: flex; align-items: flex-start; gap: 10px; scroll-margin-top: 80px; }
/* eigene Nachricht rechts – ein Foto steht über dem Text */
.chat-msg-user { flex-direction: column; align-items: flex-end; gap: 0; }
.chat-bubble { padding: 10px 15px; border-radius: 20px; overflow-wrap: anywhere; }
.chat-msg-user .chat-bubble { max-width: min(36rem, 85%); background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent-hover)); color: var(--on-accent); border-bottom-right-radius: 6px; }
.chat-msg-user .chat-bubble a { color: inherit; }
.chat-msg-user.is-sending .chat-bubble { white-space: pre-wrap; opacity: .7; }
.chat-msg-assistant .chat-bubble { background: var(--surface); border: 1px solid var(--border); border-top-left-radius: 6px; box-shadow: var(--shadow); }
/* Antwort, die gerade Wort für Wort ankommt (noch ohne Markdown) */
.chat-msg.is-streaming .chat-bubble { white-space: pre-wrap; }
.chat-msg-assistant .chat-bubble:has(> .chat-note:only-child) { padding: 2px 4px; background: none; border: 0; box-shadow: none; }
.chat-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; max-width: min(46rem, calc(100% - 42px)); }

/* Symbol des Assistenten nur am Anfang seiner Antwort */
.chat-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 44% 56% 50% 50% / 52% 46% 54% 48%; background: var(--lavender-soft); color: var(--lavender); visibility: hidden; }
.chat-avatar .icon { width: 18px; height: 18px; }
.chat-log > .chat-msg-assistant:first-child .chat-avatar,
:is(.chat-msg-user, .chat-msg-other, .chat-day) + .chat-msg-assistant .chat-avatar,
.chat-typing .chat-avatar { visibility: visible; }

/* Gemeinsame Unterhaltung („Für uns“): Nachrichten der anderen links, mit Namen; Übersetzung darunter */
.chat-msg-other { flex-direction: column; align-items: flex-start; gap: 0; }
.chat-msg-other .chat-bubble { max-width: min(36rem, 85%); background: var(--person-soft, var(--sage-soft)); color: var(--text); border: 1px solid color-mix(in srgb, var(--person, var(--sage)) 25%, transparent); border-bottom-left-radius: 6px; }
.chat-msg-other .chat-photo { align-self: flex-start; }
.chat-author { display: flex; align-items: center; gap: 6px; margin: 6px 0 3px 2px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.chat-author .person-mark { width: 22px; height: 22px; font-size: .6rem; }
.chat-author .person-mark.has-emoji { font-size: .8rem; }
.chat-translation { max-width: min(36rem, 85%); margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--paint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: color-mix(in srgb, var(--surface-2) 80%, transparent); font-size: .92rem; }
.chat-translation-label { display: block; margin-bottom: 2px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.chat-bar-shared { display: inline-flex; align-items: center; gap: 4px; color: var(--sage); font-weight: 650; }
.chat-bar-shared .icon { width: 14px; height: 14px; }
.chat-bar-shared + .chat-bar-meta { display: inline; margin-left: 6px; }
.chat-bar-mail { display: inline-flex; align-items: center; gap: 4px; color: var(--sky); font-weight: 650; }
.chat-bar-mail .icon { width: 14px; height: 14px; }
.chat-bar-mail + .chat-bar-meta { display: inline; margin-left: 6px; }
.chat-mail-hint { display: flex; align-items: flex-start; gap: 8px; max-width: 820px; margin: 4px 0 12px; font-size: .88rem; }
.chat-mail-hint .icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.chat-mail-hint a { overflow-wrap: anywhere; }

.chat-msg-actions { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 2px; }
.chat-action { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; }
.chat-action:hover { background: var(--surface-2); color: var(--text); }
.chat-action .icon { width: 15px; height: 15px; }
.chat-action.is-done { color: var(--success); }
/* Der Assistent meldet sich von selbst (Anlass oder angekündigte Nachfrage) */
.chat-auto-label { margin: 0 0 2px 2px; color: var(--muted); font-size: .75rem; }
.chat-msg-auto .chat-bubble { box-shadow: inset 3px 0 0 var(--accent); }
.chat-feedback { display: contents; }
/* Schon beantwortet (Knöpfe anderer Module, z.B. „Im Blick“) */
.chat-feedback-done { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; color: var(--muted); font-size: .8rem; }
.chat-feedback-done .icon { width: 15px; height: 15px; color: var(--success); }

/* Trenner: Früheres kennt der Assistent nur noch als Zusammenfassung (aufklappbar) */
.chat-summary { margin: 14px 0 6px; color: var(--muted); font-size: .85rem; }
.chat-summary > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; text-align: center; }
.chat-summary > summary::-webkit-details-marker { display: none; }
.chat-summary > summary::before, .chat-summary > summary::after { content: ""; flex: 1 1 auto; border-top: 1px dashed var(--border-strong); }
.chat-summary > summary:hover { color: var(--text); }
.chat-summary[open] > summary { margin-bottom: 8px; }
.chat-summary .markdown { padding: 10px 14px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-2) 80%, transparent); color: var(--text); }

.chat-day { display: flex; justify-content: center; margin: 10px 0 2px; }
.chat-day span { padding: 2px 11px; border-radius: 999px; background: color-mix(in srgb, var(--surface-2) 85%, transparent); color: var(--muted); font-size: .75rem; font-weight: 600; }
.chat-stopped { align-self: center; margin: 0; }

.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown p, .markdown ul, .markdown ol, .markdown pre, .markdown table { margin: 0 0 .7em; }
.markdown ul, .markdown ol { padding-left: 1.3em; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { margin: .9em 0 .4em; font-family: var(--font); font-size: 1.02rem; font-weight: 650; }
.markdown code { font-family: var(--mono); font-size: .88em; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.markdown pre { overflow-x: auto; background: var(--surface-2); padding: 10px 12px; border-radius: var(--radius-sm); }
.markdown pre code { background: none; padding: 0; }
.markdown table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .92rem; }
/* Zellen nur zwischen Wörtern umbrechen (Meldungen und Chat brechen sonst überall – „W/e/rt“); zu breit → waagrecht scrollen */
.markdown th, .markdown td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; overflow-wrap: normal; }
.markdown th { background: var(--surface-2); }
.markdown blockquote { margin: 0 0 .7em; padding: 8px 14px; border-left: 3px solid var(--paint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: color-mix(in srgb, var(--accent-soft) 55%, transparent); color: var(--text); }

.chat-activity { margin: 0 0 6px; color: var(--muted); font-size: .85rem; }
.chat-activity::before { content: "↻ "; }
.chat-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--border); font-size: .8rem; }
.chat-sources a { max-width: 230px; padding: 2px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; background: var(--surface-2); text-decoration: none; }
.chat-sources a:hover { background: var(--accent-soft); }

/* Was die Werkzeuge gemacht haben – eingerückt wie die Antworten */
.chat-tools { list-style: none; margin: 0 0 0 42px; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: .85rem; }
.chat-tools li { max-width: 100%; }
.chat-tools li::before { margin-right: 6px; font-weight: 700; }
.chat-tools .is-done { padding: 3px 11px; border-radius: 999px; background: var(--success-soft); color: var(--success); font-weight: 550; }
.chat-tools .is-done::before { content: "✓"; }
.chat-tools .is-done a { color: inherit; }
.chat-tools .is-muted { color: var(--muted); }
.chat-tools .is-muted::before { content: "·"; }
.chat-tools .is-error { color: var(--danger); }
.chat-tools .is-error::before { content: "✕"; }

.chat-confirm { max-width: 34rem; margin: 12px 0 0 42px; padding: 14px 18px; border-radius: 20px; border-top-left-radius: 6px; background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
.chat-confirm-label { margin: 0 0 4px; color: var(--warning); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.chat-confirm-question { margin: 0 0 4px; font-weight: 600; }
.chat-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Der Assistent „schreibt“ */
.chat-typing { margin-top: 10px; }
.chat-typing .chat-bubble { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; }
.typing-dots { display: inline-flex; gap: 4px; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--lavender); opacity: .3; animation: typing 1.2s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
    0%, 60%, 100% { opacity: .3; transform: none; }
    30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .typing-dots i { animation: none; opacity: .6; }
}

.chat-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 0; }
.chat-error[hidden] { display: none; }
.chat-long { margin: 12px 0 0; font-size: .88rem; }
.chat-note { color: var(--muted); font-size: .86rem; }

.chat-dock {
    position: sticky;
    bottom: var(--dock);
    z-index: 5;
    margin: auto -8px 0;
    padding: 16px 8px max(12px, calc(env(safe-area-inset-bottom, 0px) - var(--dock)));
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 94%, transparent) 45%);
}

@media (max-width: 860px) {
    /* In einer Unterhaltung: ganze Höhe fürs Gespräch – Kopfzeile oben, Eingabe unten */
    body:has([data-chat]) { --dock: 0px; }
    body:has([data-chat]) .topbar, body:has([data-chat]) .tabbar { display: none; }
    /* Eingabe fest unten: hängt nicht an der Seitenhöhe, die Safari beim Scrollen (Leisten ein/aus) ändert.
       app.js trägt die Höhe der Eingabe in --chat-dock-h ein, damit die letzte Nachricht nicht darunter verschwindet. */
    .chat { min-height: 0; padding-bottom: calc(var(--chat-dock-h, 72px) + 8px); }
    .chat-bar { margin: -10px -16px 12px; padding: calc(6px + var(--safe-top)) 8px 6px; }
    .chat-dock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 12px 12px max(10px, env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 94%, transparent) 30%);
    }
}

input.input-money { width: 7em; } /* schlägt input[type=text] { width: 100% } */
.memory-list { list-style: none; margin: 0 0 8px; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.memory-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.memory-list li + li { border-top: 1px solid var(--border); }
.memory-list span { overflow-wrap: anywhere; }

/* ---------- Wiki ---------- */

.wiki-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.wiki-list li + li { border-top: 1px solid var(--border); }
.wiki-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 13px 16px; color: inherit; text-decoration: none; transition: background-color .15s; }
.wiki-list a:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.wiki-list-title { font-weight: 600; overflow-wrap: anywhere; }
.wiki-list-meta { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.wiki-list-snippet { grid-column: 1 / -1; color: var(--muted); font-size: .9rem; }
.wiki-page { font-size: 1rem; }
.wiki-page h2 { font-size: 1.15rem; margin-top: 1.2em; }
.wiki-editor { min-height: 360px; font-family: var(--mono); font-size: .9rem; line-height: 1.5; }
.wiki-help { margin: 0; font-size: .85rem; }
.wiki-revisions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wiki-revisions details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 16px; }
.wiki-revisions summary { cursor: pointer; }
.wiki-revision-body pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: .85rem; background: var(--surface-2); padding: 10px; border-radius: var(--radius-sm); max-height: 400px; overflow-y: auto; }
.inline-form { display: inline; }

/* Fotos: Knopf mit verstecktem Dateifeld (Kassenbon, Rezept, Chat) */
.photo-action { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -6px 0 18px; }
.photo-action .hint { margin: 0; }
.photo-action label.btn { cursor: pointer; }
.photo-action[aria-busy="true"] label.btn { pointer-events: none; opacity: .75; }
.photo-action[aria-busy="true"] label.btn::after {
    content: "";
    width: .85em;
    height: .85em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: busy-spin .7s linear infinite;
}
.receipt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.receipt-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 90px 150px; align-items: center; gap: 8px; }
.receipt-item .item-emoji { font-size: 1.2rem; }
@media (max-width: 640px) {
    .receipt-item { grid-template-columns: auto auto minmax(0, 1fr) 80px; }
    .receipt-item select { grid-column: 3 / -1; }
}
.auth-switch { margin: 16px 0 0; text-align: center; font-size: .92rem; }
/* Mein Konto: Liste wie in den Einstellungen des Handys */
.account-head-person { display: flex; align-items: center; gap: 16px; }
.account-head-person h1 { margin-bottom: 2px; }
.settings-list { padding: 4px 0; margin-bottom: 16px; }
.settings-row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 18px; color: var(--text); text-decoration: none; }
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.settings-row:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); color: var(--text); }
.settings-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.settings-icon .icon { width: 20px; height: 20px; }
.settings-icon .person-mark { width: 38px; height: 38px; }
.settings-text { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.settings-text small { overflow: hidden; color: var(--muted); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.settings-chevron { flex: 0 0 auto; color: var(--muted); font-size: 1.5rem; line-height: 1; }
.account-logout { margin-top: 8px; }
.language-card, .theme-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; padding: 14px 18px; }
.language-card label, .theme-card label { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.language-card select, .theme-card select { width: auto; flex: 1 1 160px; max-width: 240px; }

/* ---------- Rezepte ---------- */

.head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.form-wide { max-width: 820px; }
.cook-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 14px 18px; border-radius: 18px; border: 1px solid var(--border);
    background: linear-gradient(135deg, var(--teal-soft), var(--honey-soft)); color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.cook-banner:hover { color: var(--text); border-color: var(--teal); transform: translateY(-1px); }
.cook-banner-icon { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 44% 56% 50% 50% / 52% 46% 54% 48%; background: var(--surface); color: var(--teal); }
.cook-banner small { display: block; color: var(--muted); }
.tag-filter { margin-bottom: 18px; }
a.chip { text-decoration: none; }
.chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.recipe-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.recipe-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.recipe-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--text); }
.recipe-card-title { font-size: 1.05rem; }
.recipe-card-meta { color: var(--muted); font-size: .85rem; }
.recipe-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.recipe-card-pantry { align-self: flex-start; }
a.badge { text-decoration: none; }
.recipe-layout > .card + .card { margin-top: 0; }
.recipe-layout { display: grid; gap: 16px; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); align-items: start; }
.recipe-servings { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.recipe-servings h2 { margin: 0; }
.stepper { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.stepper .icon-btn { width: 32px; height: 32px; font-size: 1.25rem; font-weight: 600; text-decoration: none; }
.stepper span { padding: 0 4px; font-size: .9rem; white-space: nowrap; }
.icon-btn.is-disabled { pointer-events: none; opacity: .35; }
.ingredient-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.ingredient-list .checkbox small.ingredient-note { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .75rem; }
.ingredient-list .checkbox small.is-stock { background: var(--teal-soft); color: var(--teal); }
.ingredient-list .checkbox small.is-listed { background: var(--sky-soft); color: var(--sky); }
/* Was da ist oder schon auf der Liste steht, tritt zurück – was fehlt, fällt auf */
.ingredient-list li.is-covered .checkbox > span { color: var(--muted); }
.ingredient-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; font-size: .8rem; font-weight: 600; }
.ingredient-summary span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ingredient-summary .icon { width: 14px; height: 14px; }
.ingredient-summary .is-stock { background: var(--teal-soft); color: var(--teal); }
.ingredient-summary .is-listed { background: var(--sky-soft); color: var(--sky); }
.ingredient-summary .is-missing { background: var(--accent-soft); color: var(--accent); }
.recipe-language { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -10px 0 18px; }
.recipe-language form { margin: 0; }
.recipe-language .badge { display: inline-flex; align-items: center; gap: 4px; }
.recipe-language .badge .icon { width: 14px; height: 14px; }
.recipe-language .hint { margin: 0; }
.recipe-card .item-translation { margin: -6px 0 0; }
.recipe-steps .markdown ol { padding-left: 1.4em; }
.recipe-steps .markdown li { margin-bottom: .5em; }
.suggestion h3 { margin-bottom: 6px; font-size: 1.05rem; }
.suggestion + .suggestion { margin-top: 14px; }
.suggestion details { margin: 8px 0 12px; }
.suggestion summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.suggestion .form-actions form { margin: 0; }
@media (max-width: 860px) {
    .recipe-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Familien ---------- */

.household-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.household-grid > .card + .card { margin-top: 0; }
.inline-edit { display: flex; gap: 8px; align-items: center; }
.inline-edit input { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Freizeit ---------- */

.leisure-emoji { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; margin-left: 12px; border-radius: 44% 56% 50% 50% / 52% 46% 54% 48%; background: var(--accent-soft); font-size: 1.25rem; line-height: 1; }
.leisure-emoji-lg { width: 60px; height: 60px; margin: 0; font-size: 2rem; }
.leisure-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.leisure-item .check-body { padding-left: 12px; }
.leisure-item .avatar { margin-left: 12px; }
.meta-mutual { color: var(--accent); font-weight: 600; }
.meta-planned { color: var(--accent); }
.row-form { display: flex; align-self: stretch; margin: 0; }
.leisure-done { display: flex; align-items: center; padding: 0 16px; color: var(--muted); }
.leisure-done:hover { color: var(--accent); }
.leisure-done .icon { width: 22px; height: 22px; }
.list-note { margin: 8px 0 0 4px; font-size: .82rem; color: var(--muted); }

/* Knöpfe rechts in der Zeile – auf dem Handy darunter */
.row-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px 8px 0; }
.row-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
@media (max-width: 640px) {
    .check-item.has-actions { flex-wrap: wrap; }
    .check-item.has-actions .check-body { flex-basis: calc(100% - 62px); }
    .check-item.has-actions .row-actions { flex-basis: 100%; padding: 0 14px 12px 62px; }
}

/* Wie war's? Vier Gesichter */
.face-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: transform .12s, background-color .15s, border-color .15s; }
.face-btn:hover { transform: scale(1.12); background: var(--accent-soft); border-color: var(--accent); }
.face-btn-sm { width: 34px; height: 34px; font-size: 1.1rem; }
.face-skip { color: var(--muted); }
.face-choice { --person: var(--accent); --person-soft: var(--accent-soft); display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; }
.face-choice legend { flex-basis: 100%; margin-bottom: 6px; padding: 0; font-weight: 600; font-size: .9rem; }
.leisure-history { margin-top: 24px; margin-bottom: 24px; }
.leisure-edit form:has(#for option[value=us]:checked) .leisure-private { display: none; }

/* Karten anderer Module auf der Startseite (Freizeit, Bitten …) – in der Farbe des Tools (data-tone) */
.home-widget { margin-bottom: 22px; padding: 18px 18px 16px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--surface) 70%, var(--accent-soft))); box-shadow: var(--shadow); }
.home-widget-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--accent); font-size: 1rem; }
.home-widget-title a { color: inherit; text-decoration: none; }
.home-widget-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.home-widget-head .home-widget-title { margin: 0; }
.home-widget-sub { margin: 10px 0 8px 2px; font-size: .85rem; color: var(--muted); }

/* ---------- Wo ist was? ---------- */

.icon-flip { transform: scaleX(-1); }
.inventory-item .check-body { padding-left: 12px; }
.inventory-crumbs { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-bottom: 2px; color: var(--muted); font-size: .88rem; }
.inventory-crumbs a { font-weight: 600; text-decoration: none; }
.inventory-add { margin-bottom: 24px; }
.list-group + .inventory-add { margin-top: 24px; }
.inventory-add textarea { min-height: 3.2em; }
.inventory-add .form-actions { align-items: center; }
.inventory-add .photo-action { margin: 14px 0 0; }
/* Ort im Suchergebnis: eigene Zeile, danach ohne Trennpunkt weiter */
.check-meta > .inventory-path { flex-basis: 100%; color: var(--accent); font-weight: 600; }
.check-meta > .inventory-path + span::before { content: none; }
.inventory-where-label { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.inventory-where-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 6px; font-family: var(--display); font-size: 1.25rem; }
.inventory-where-path a { text-decoration: none; overflow-wrap: anywhere; }
.inventory-move { padding-left: 16px; }
.inventory-photo-item { grid-template-columns: auto auto minmax(0, 1fr) 90px; }
@media (max-width: 640px) {
    .inventory-photo-item { grid-template-columns: auto auto minmax(0, 1fr) 70px; }
}
.home-search { margin: 10px 0 0; }

/* ---------- Meine Familie (Mein Konto) ---------- */

.family-person { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.family-person-name { display: flex; align-items: center; gap: 10px; }
.backup-list { margin: 8px 0 12px; padding-left: 20px; }
.backup-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; }

/* Kalender-Abo: Adresse mit Kopieren-Knopf */
.copy-field { display: flex; gap: 8px; }
.copy-field input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: .85rem; }
.copy-field .btn { display: inline-flex; align-items: center; gap: 6px; }
.copy-field .icon { width: 16px; height: 16px; }
.hint-list { margin: 0; padding-left: 18px; color: var(--muted); font-size: .88rem; }
@media (max-width: 640px) {
    .copy-field input { font-size: 16px; }
}
.device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.device-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.device-list form { margin: 0; }

/* Wo ist was? Stufe 2: Foto des Ortes, Verleihen, Etiketten */
.place-picture { display: grid; gap: 10px; }
.place-picture-link img { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: var(--radius-sm); }
.place-picture-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.place-picture-actions form { margin: 0; }
.place-picture-actions label.btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.place-picture-actions .icon { width: 16px; height: 16px; }
.inventory-lent { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 0; }
.inventory-lent form { margin: 0; }
.inventory-lend { margin-top: 0; }
.meta-lent { color: var(--warning); font-weight: 600; }
.meta-place { color: var(--accent); }
.inventory-links { margin: 18px 0 0; }

/* Ausmisten: Raus damit, Vielleicht-Kiste, Anzeige, Erinnerungen, Wunschliste, „Eins rein, eins raus“ */
.inventory-declutter h2 { margin: 0 0 4px; }
.declutter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.declutter-actions form { margin: 0; }
.inventory-gone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.inventory-gone form { margin: 0; }
.inventory-sale textarea[readonly], .inventory-sale input[readonly] { background: var(--surface-2); }
.sale-meta { margin: 0; }
.btn-emoji { min-width: 36px; padding-inline: 8px; font-size: 1.05rem; line-height: 1; }
.sort-actions .btn, .outbox-group .row-actions .btn { white-space: nowrap; }
.outbox-maybe .is-due .check-title { font-weight: 700; }
.one-in { border-left: 4px solid var(--accent); }
.one-in p { margin: 0 0 6px; }
.one-in .form-actions form { margin: 0; }
.one-in-setting { margin-top: 24px; max-width: 820px; }
.memory-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.memory { display: grid; gap: 6px; align-content: start; }
.memory-link { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.memory-link img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.memory-title { font-family: var(--display); font-weight: 600; }
.memory-note { margin: 0; font-style: italic; overflow-wrap: anywhere; }
.memory .hint { margin: 0; }
.wish-form { max-width: 820px; }
.wish-item.is-ready .check-title { font-weight: 700; }
.project-declutter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.project-declutter .hint { margin: 0; }
.label-choice summary { cursor: pointer; font-weight: 600; }
.label-options { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 10px; }
.label-sheet { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.label { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 10px; background: #fff; color: #111; break-inside: avoid; }
.label-qr { flex: 0 0 auto; width: 86px; height: 86px; }
.label-qr svg { display: block; width: 100%; height: 100%; }
.label-text { display: grid; gap: 2px; min-width: 0; }
.label-text strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.label-text small { color: #555; overflow-wrap: anywhere; }
.label-code { font-family: var(--mono); font-weight: 700; font-size: 1.1rem; }
@media print {
    .sidebar, .topbar, .tabbar, .no-print, .flash, .alert { display: none !important; }
    body, html { background: #fff !important; }
    .main { margin: 0 !important; padding: 0 !important; }
    .label-sheet { grid-template-columns: repeat(3, 1fr); gap: 4mm; }
    .label { border-color: #999; }
}

/* ---------- Essensplan ---------- */

.week-nav { display: flex; align-items: center; gap: 6px 10px; margin-bottom: 16px; }
.week-nav strong { flex: 1 1 auto; min-width: 0; text-align: center; }
.meal-day.is-past .meal-slot { min-height: 28px; }
.meal-suggest { margin-bottom: 16px; }
.meal-suggestions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.meal-days { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.meal-days > .card + .card { margin-top: 0; }
.meal-day { display: grid; gap: 8px; padding: 14px 16px; }
/* Vergangene Tage der laufenden Woche: eingeklappt über den kommenden */
.meal-past { margin-bottom: 12px; }
.meal-past > summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; color: var(--muted); font-size: .9rem; font-weight: 600; cursor: pointer; }
.meal-past > summary { list-style: none; }
.meal-past > summary::-webkit-details-marker { display: none; }
.meal-past > summary::before { content: "›"; display: inline-block; width: 1em; font-size: 1.2em; line-height: 1; transition: transform .15s; }
.meal-past[open] > summary::before { transform: rotate(90deg); }
.meal-past[open] > summary { margin-bottom: 8px; }
.meal-day.is-today { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.meal-day.is-past { opacity: .7; }
.meal-day-title { margin: 0; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.meal-slot { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.meal-slot-label { flex: 0 0 4.2em; color: var(--muted); font-size: .8rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.meal-dish { flex: 1 1 auto; min-width: 0; font-weight: 550; overflow-wrap: anywhere; }
.meal-dish a { text-decoration: none; }
.meal-slot.is-suggestion .meal-dish { color: var(--muted); font-style: italic; }
.meal-actions { display: flex; gap: 2px; }
.meal-actions form, .meal-add { margin: 0; }
.meal-add { display: flex; flex: 1 1 auto; gap: 6px; min-width: 0; }
.meal-add input[type=text] { flex: 1 1 auto; min-width: 0; padding: 6px 10px; }
.meal-today { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.meal-today li { display: flex; align-items: baseline; gap: 8px; font-weight: 550; }
.meal-today a { text-decoration: none; }

/* ---------- Newsletter ---------- */

.newsletter-start { margin-bottom: 24px; }
.newsletter-start .list-group + .list-group { margin-top: 0; }
.newsletter-row { padding-left: 16px; }
.check-item.is-paused .check-title, .check-item.is-muted .check-title { color: var(--muted); }
.newsletter-new { color: var(--accent); font-weight: 650; }
.newsletter-today { margin-bottom: 24px; }
.newsletter-today p { margin: 0 0 10px; }
.newsletter-today p.hint { margin: 10px 0 0; }
.newsletter-archive { margin-bottom: 24px; }
.newsletter-issue { display: grid; gap: 22px; font-size: 1rem; }
.newsletter-item h2 { margin: 0 0 6px; font-size: 1.15rem; }
.newsletter-sources { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: .85rem; }
.newsletter-sources a { color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.newsletter-sources a::before { content: "→ "; }
.newsletter-sources a:hover { color: var(--accent); }
.newsletter-note { margin-top: 10px; }
.newsletter-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.newsletter-today-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.newsletter-today-list li { display: flex; align-items: baseline; gap: 8px; font-weight: 550; }
.newsletter-today-list a { text-decoration: none; overflow-wrap: anywhere; }
.newsletter-today-list a.is-read { color: var(--muted); font-weight: 500; }

/* Listen (Aufgaben) – Chips unter der Schnelleingabe, auf dem Handy in einer Zeile zum Wischen */
.list-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }
.list-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .9rem; text-decoration: none; transition: border-color .15s, color .15s, background-color .15s; }
.list-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.list-chip .icon { width: 16px; height: 16px; }
.list-chip-emoji { display: inline-flex; line-height: 1; }
.list-chip .count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 650; text-align: center; }
.list-chip-add { border-style: dashed; color: var(--muted); }
@media (max-width: 640px) {
    .list-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
    .list-chips::-webkit-scrollbar { display: none; }
    .list-chip { flex: 0 0 auto; white-space: nowrap; }
    .list-chip:last-child { margin-right: 24px; }
}
.list-title { overflow-wrap: anywhere; }
.list-hint { margin-top: 14px; }
.meta-list { color: var(--accent); }
.list-done { margin-top: 18px; }
.list-done > summary { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--muted); font-weight: 600; cursor: pointer; list-style: none; }
.list-done > summary::-webkit-details-marker { display: none; }
.list-done > summary::before { content: "›"; display: inline-block; width: 1em; font-size: 1.25em; line-height: 1; transition: transform .15s; }
.list-done[open] > summary::before { transform: rotate(90deg); }
.list-done .count { font-weight: 500; opacity: .8; }
.grid-fields-emoji { grid-template-columns: 1fr auto; }

/* Projekte */
.project-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.project-card { display: flex; gap: 14px; align-items: flex-start; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.project-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); transform: translateY(-1px); color: var(--text); }
.project-card.is-closed { opacity: .75; box-shadow: none; }
.project-emoji { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 44% 56% 50% 50% / 52% 46% 54% 48%; background: var(--accent-soft); font-size: 1.35rem; line-height: 1; }
.project-body { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.project-name { font-weight: 650; font-size: 1.02rem; overflow-wrap: anywhere; }
.project-card .meter { margin: 6px 0 2px; height: 6px; }
.project-next { font-size: .88rem; color: var(--accent); overflow-wrap: anywhere; }
.project-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.project-grid.is-compact .project-card { padding: 12px; box-shadow: none; }
.project-grid.is-compact .project-emoji { width: 34px; height: 34px; font-size: 1.1rem; }
.home-widget .project-grid { margin-top: 8px; }
.project-notes { max-width: 820px; margin: -4px 0 18px; color: var(--muted); overflow-wrap: anywhere; }
.project-status { font-weight: 600; color: var(--accent); }
.project-progress { margin: -4px 0 12px; }
.project-progress .meter { margin: 0 0 4px; }
.project-progress-card { max-width: 820px; margin-bottom: 24px; }
.project-progress-card .meter { margin-top: 4px; }
.progress-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.progress-form .field { margin: 0; }
.progress-value { flex: 0 0 140px; }
.progress-note { flex: 1 1 220px; min-width: 0; }
.project-steps { max-width: 820px; }
.project-log { max-width: 820px; margin-top: 28px; }
.suggestion-card { margin-bottom: 14px; }
.project-edit { max-width: 820px; margin-top: 28px; padding-top: 16px; }
.project-edit > summary { margin-bottom: 0; }
.project-edit[open] > summary { margin-bottom: 14px; }
.project-edit + .delete-link { max-width: 820px; }
.project-goal { max-width: 820px; margin-bottom: 24px; }
.project-goal .group-head { margin-bottom: 4px; }
.project-goal h2 { margin: 0; }
.project-goal-text { margin: 4px 0; font-weight: 600; overflow-wrap: anywhere; }
.project-goal-edit > summary { margin-top: 6px; color: var(--accent); cursor: pointer; font-size: .9rem; }
.goal-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.goal-form .field { margin: 0; }
.goal-text { flex: 1 1 260px; min-width: 0; }
.goal-unit { flex: 0 1 150px; }
.goal-total { flex: 0 1 120px; }
.project-steps-more { max-width: 820px; }
.project-steps-more .project-steps { margin-top: 8px; }

/* Im Blick: Stand in der Liste, Termine, Verlauf der Blicke */
.watch-state { display: block; margin: 2px 0 3px; color: var(--text); font-size: .88rem; overflow-wrap: anywhere; }
.check-meta > .watch-problem { color: var(--warning); }
.watch-start { margin-bottom: 24px; }
.watch-now p { margin: 0 0 10px; }
.watch-now p.hint { margin: 10px 0 0; }
.watch-dates { margin: 6px 0 12px; padding-left: 18px; }
.watch-dates li { margin: 2px 0; }
.watch-now h3 { margin: 14px 0 4px; font-size: 1rem; }
.watch-history, .watch-edit { margin-top: 24px; }
.watch-checks { margin: 0; padding: 0; list-style: none; }
.watch-check { padding: 12px 14px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.watch-check:last-child { border-bottom: 0; }
.watch-check p { margin: 0 0 4px; }
.watch-check.is-reported { box-shadow: inset 3px 0 0 var(--accent); }
.watch-check-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }