/* ============================= */
/* DESIGN TOKENS (NEU)           */
/* ============================= */

:root{
    /* Fallback = Theme "waldmoos" (greift nur, falls JS deaktiviert ist und
       kein data-theme-Attribut gesetzt wurde; siehe [data-theme="waldmoos"] unten) */

    /* Native Formularelemente (z.B. input[type=time]) dunkel einfärben -
       Standard fuer alle Themes ausser den hellen (dort ueberschrieben). */
    color-scheme:dark;

    /* Surfaces */
    --bg:#14201a;
    --surface:#1c2b23;
    --surface-2:#19271f;
    --surface-hover:#1a2921;

    /* Text */
    --text:#eef2ea;
    --text-secondary:#a5b2a8;
    --text-muted:#5c7266;

    /* Borders */
    --border:#2a3a30;
    --border-strong:#3b463f;

    /* Accent (nur EIN Akzent, sparsam einsetzen) */
    --accent:#8fbf9f;
    --accent-soft:rgba(143,191,159,0.14);

    /* Zweiter, bewusst eigenstaendiger Akzent NUR fuer den FAB */
    --accent-fab:#d17a4a;

    /* Semantische Farben (nur wo Bedeutung getragen wird) */
    --success:#7fd8a8;
    --success-soft:rgba(127,216,168,0.12);
    --warning:#e8c766;
    --warning-soft:rgba(232,199,102,0.12);
    --danger:#e57373;
    --danger-soft:rgba(229,115,115,0.12);

    /* Eingehend geliehen (Buecher-Feature) - eigener Token, bewusst von
       --warning entkoppelt (auch wenn aktuell gleicher Amberton), damit
       beide Bedeutungen (ausgehender Verleih vs. eingeliehen) unabhaengig
       voneinander eingefaerbt werden koennen. Nur hier in :root definiert -
       loest sich pro Theme trotzdem korrekt auf, da var(--warning) bei
       Verwendung anhand der Kaskade am jeweiligen Element aufgeloest wird. */
    --dot-loaned:var(--warning);
    --pollen-orange:#e8935a;
    --line-ubahn:#5fa0d6;
    --severity-extreme:#b297c1;

    /* Info (neutral, themenunabhaengig - z.B. "kalt/drinnen"-Empfehlungen) */
    --info:#9db4ff;
    --info-soft:rgba(157,180,255,0.12);

    /* Spielkarten (Spider Solitaire). Bewusst themenunabhaengig - eine
       Spielkarte ist ein physisches Objekt und sieht in hell wie dunkel
       gleich aus. Nur hier in :root, kein Theme ueberschreibt sie. */
    --sp-paper:#f4f1e8;
    --sp-ink:#22302b;
    --sp-red:#b0322f;
    --sp-back:#16241d;
    --sp-back-line:rgba(143,191,159,0.20);
    --sp-edge:#0c1512;
    --sp-up-border:rgba(20,32,26,0.35);

    /* Radius / Spacing */
    --radius-sm:10px;
    --radius:14px;
    --radius-lg:18px;
    --gap:10px;

    /* Typography */
    --fs-sm:15px;
    --fs-body:17px;
    --fs-lg:20px;
    --fs-title:22px;
    /* Eine App-weite Schrift: --font-display bleibt als Token bestehen (viele
       Aufrufstellen), zeigt aber auf denselben Inter-Stack wie --font-body. */
    --font-body:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display:var(--font-body);

    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);

    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5b2a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ============================= */
/* DESIGN TOKENS - THEMES         */
/* ============================= */

[data-theme="waldmoos"]{
    --bg:#14201a;
    --surface:#1c2b23;
    --surface-2:#19271f;
    --surface-hover:#1a2921;

    --text:#eef2ea;
    --text-secondary:#a5b2a8;
    --text-muted:#5c7266;

    --border:#2a3a30;
    --border-strong:#3b463f;

    --accent:#8fbf9f;
    --accent-soft:rgba(143,191,159,0.14);
    --accent-fab:#d17a4a;

    --success:#7fd8a8;
    --success-soft:rgba(127,216,168,0.12);
    --warning:#e8c766;
    --warning-soft:rgba(232,199,102,0.12);
    --danger:#e57373;
    --danger-soft:rgba(229,115,115,0.12);
    --pollen-orange:#e8935a;
    --line-ubahn:#5fa0d6;
    --severity-extreme:#b297c1;

    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5b2a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="abendhimmel"]{
    --bg:#16151f;
    --surface:#201f2e;
    --surface-2:#1c1b28;
    --surface-hover:#1e1d2b;

    --text:#ece9f5;
    --text-secondary:#aca8bc;
    --text-muted:#6b6784;

    --border:#312f45;
    --border-strong:#3d3b46;

    --accent:#a99bd6;
    --accent-soft:rgba(169,155,214,0.14);
    --accent-fab:#e8a14d;

    --success:#7fd8a8;
    --success-soft:rgba(127,216,168,0.12);
    --warning:#e8c766;
    --warning-soft:rgba(232,199,102,0.12);
    --danger:#e57373;
    --danger-soft:rgba(229,115,115,0.12);
    --pollen-orange:#e8935a;
    --line-ubahn:#5fa0d6;
    --severity-extreme:#b297c1;

    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aca8bc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="ozeanbrise"]{
    --bg:#0d1b1f;
    --surface:#142a2f;
    --surface-2:#112429;
    --surface-hover:#13272c;

    --text:#e6f2f1;
    --text-secondary:#9ab7b6;
    --text-muted:#4f7c7a;

    --border:#20393f;
    --border-strong:#344245;

    --accent:#5fb8b0;
    --accent-soft:rgba(95,184,176,0.14);
    --accent-fab:#ef7b62;

    --success:#7fd8a8;
    --success-soft:rgba(127,216,168,0.12);
    --warning:#e8c766;
    --warning-soft:rgba(232,199,102,0.12);
    --danger:#e57373;
    --danger-soft:rgba(229,115,115,0.12);
    --pollen-orange:#e8935a;
    --line-ubahn:#5fa0d6;
    --severity-extreme:#b297c1;

    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ab7b6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="sandstein"]{
    color-scheme:light;
    --bg:#efe6d8;
    --surface:#f8f2e6;
    --surface-2:#f4ede0;
    --surface-hover:#f6f0e3;

    --text:#3a2f22;
    --text-secondary:#6a5c4a;
    --text-muted:#9a8a72;

    --border:#ddd0ba;
    --border-strong:#c7beb0;

    --accent:#a8542f;
    --accent-soft:rgba(168,84,47,0.1);
    --accent-fab:#2f6e63;

    --success:#3d7a4c;
    --success-soft:rgba(61,122,76,0.12);
    --warning:#b4741c;
    --warning-soft:rgba(180,116,28,0.12);
    --danger:#ae372f;
    --danger-soft:rgba(174,55,47,0.12);
    --pollen-orange:#c15b22;
    --line-ubahn:#3e6b93;
    --severity-extreme:#7b4b94;

    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a5c4a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="lavendelfeld"]{
    color-scheme:light;
    --bg:#f2eef7;
    --surface:#faf8fc;
    --surface-2:#f7f4fa;
    --surface-hover:#f8f6fb;

    --text:#372f47;
    --text-secondary:#6c6380;
    --text-muted:#a297b8;

    --border:#e0d9ec;
    --border-strong:#c9c4d0;

    --accent:#7a5fa8;
    --accent-soft:rgba(122,95,168,0.1);
    --accent-fab:#e0a63e;

    --success:#3d7a4c;
    --success-soft:rgba(61,122,76,0.12);
    --warning:#b4741c;
    --warning-soft:rgba(180,116,28,0.12);
    --danger:#ae372f;
    --danger-soft:rgba(174,55,47,0.12);
    --pollen-orange:#c15b22;
    --line-ubahn:#3e6b93;
    --severity-extreme:#7b4b94;

    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c6380' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="bibliotheksgruen"]{
    --bg:#10140f;
    --surface:#1a2116;
    --surface-2:#161c13;
    --surface-hover:#181e15;

    --text:#eef0e5;
    --text-secondary:#a6b09a;
    --text-muted:#5f7050;

    --border:#293425;
    --border-strong:#383c36;

    --accent:#9cb06a;
    --accent-soft:rgba(156,176,106,0.14);
    --accent-fab:#a4453d;

    --success:#7fd8a8;
    --success-soft:rgba(127,216,168,0.12);
    --warning:#e8c766;
    --warning-soft:rgba(232,199,102,0.12);
    --danger:#e57373;
    --danger-soft:rgba(229,115,115,0.12);
    --pollen-orange:#e8935a;
    --line-ubahn:#5fa0d6;
    --severity-extreme:#b297c1;

    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6b09a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="morgentau"]{
    color-scheme:light;
    --bg:#eaf2ee;
    --surface:#f6faf8;
    --surface-2:#f1f7f4;
    --surface-hover:#f4f8f6;

    --text:#223330;
    --text-secondary:#536e66;
    --text-muted:#84a89b;

    --border:#d3e5dd;
    --border-strong:#bec8c4;

    --accent:#3f8f75;
    --accent-soft:rgba(63,143,117,0.1);
    --accent-fab:#ea8552;

    --success:#3d7a4c;
    --success-soft:rgba(61,122,76,0.12);
    --warning:#b4741c;
    --warning-soft:rgba(180,116,28,0.12);
    --danger:#ae372f;
    --danger-soft:rgba(174,55,47,0.12);
    --pollen-orange:#c15b22;
    --line-ubahn:#3e6b93;
    --severity-extreme:#7b4b94;

    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23536e66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="steingrau"]{
    --bg:#1a1a1c;
    --surface:#232326;
    --surface-2:#1f1f22;
    --surface-hover:#212124;

    --text:#f1f1ee;
    --text-secondary:#b2b2b3;
    --text-muted:#727278;

    --border:#34343a;
    --border-strong:#414142;

    --accent:#7fb8d9;
    --accent-soft:rgba(127,184,217,0.14);
    --accent-fab:#f0a940;

    --success:#7fd8a8;
    --success-soft:rgba(127,216,168,0.12);
    --warning:#e8c766;
    --warning-soft:rgba(232,199,102,0.12);
    --danger:#e57373;
    --danger-soft:rgba(229,115,115,0.12);
    --pollen-orange:#e8935a;
    --line-ubahn:#5fa0d6;
    --severity-extreme:#b297c1;

    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="terracotta-sepia"]{
    color-scheme:light;
    --bg:#f6ead9;
    --surface:#fdf5e9;
    --surface-2:#faf1e3;
    --surface-hover:#fcf3e6;

    --text:#3e2a1c;
    --text-secondary:#725c46;
    --text-muted:#a58d6f;

    --border:#e7d6bc;
    --border-strong:#cec0af;

    --accent:#b5522f;
    --accent-soft:rgba(181,82,47,0.1);
    --accent-fab:#35594a;

    --success:#3d7a4c;
    --success-soft:rgba(61,122,76,0.12);
    --warning:#b4741c;
    --warning-soft:rgba(180,116,28,0.12);
    --danger:#ae372f;
    --danger-soft:rgba(174,55,47,0.12);
    --pollen-orange:#c15b22;
    --line-ubahn:#3e6b93;
    --severity-extreme:#7b4b94;

    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23725c46' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="mitternachtsblau"]{
    --bg:#0a0e1a;
    --surface:#131a2b;
    --surface-2:#0f1524;
    --surface-hover:#111828;

    --text:#e8ecf5;
    --text-secondary:#9ca4ba;
    --text-muted:#4f5c80;

    --border:#1f2740;
    --border-strong:#323641;

    --accent:#4fa8e0;
    --accent-soft:rgba(79,168,224,0.14);
    --accent-fab:#e6a23c;

    --success:#7fd8a8;
    --success-soft:rgba(127,216,168,0.12);
    --warning:#e8c766;
    --warning-soft:rgba(232,199,102,0.12);
    --danger:#e57373;
    --danger-soft:rgba(229,115,115,0.12);
    --pollen-orange:#e8935a;
    --line-ubahn:#5fa0d6;
    --severity-extreme:#b297c1;

    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca4ba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ============================= */
/* ROOT / BASE */
/* ============================= */

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

html{
    max-width:100%;
    overflow-x:hidden;
}

img,
svg,
video{
    max-width:100%;
    height:auto;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:var(--fs-body);
    -webkit-font-smoothing:antialiased;

    margin:0;
    max-width:100%;
    padding:16px;
    padding-bottom:92px;

    overflow-x:hidden;
}

h1, h2{
    font-family:var(--font-display);
    color:var(--accent);
    font-weight:700;
    margin:0 0 12px;
    text-wrap:balance;
}

h3{
    font-family:var(--font-body);
    color:var(--text);
    font-weight:700;
    margin:0 0 10px;
}

/* ============================= */
/* LAYOUT */
/* ============================= */

.dashboard{
    display:flex;
    flex-direction:column;
    gap:var(--gap);
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    min-width:0;
}

/* ============================= */
/* TOPBAR & NAVIGATION */
/* ============================= */

.topbar{
    display:grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items:center;

    padding:calc(18px + var(--safe-top)) 12px 18px;
    margin:-16px -16px 12px -16px;

    background:var(--bg);
    border-bottom:1px solid var(--border);

    position:sticky;
    top:0;
    z-index:1000;
}

.topbar-title{
    text-align:center;
    font-family:var(--font-display);
    font-size:20px;
    font-weight:700;
    letter-spacing:0;
    color:var(--accent);
    transition: opacity 0.2s ease, transform 0.2s ease;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.topbar-left{
    text-decoration:none;
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    height:32px;
    width:32px;
}

.topbar-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
}

.topbar-icon{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.notification-bell{
    display:flex;
    align-items:center;
    justify-content:center;

    height:32px;
    width:32px;

    line-height:1;
    text-decoration:none;
    color:var(--text-secondary);
}

.notification-bell{
    position:relative;
    cursor:pointer;
    color:var(--accent);
}

.notification-bell.has-unread{
    color:var(--danger);
}

.notification-badge{
    position:absolute;
    top:-4px;
    right:-6px;
    background:var(--danger);
    color:var(--bg);
    font-size:12px;
    font-weight:700;
    padding:2px 6px;
    border-radius:999px;
}

.hidden{
    display:none;
}

/* ============================= */
/* OFFLINE / SYNC */
/* ============================= */

.offline-banner{
    /* Bewusst NICHT sticky und ohne Negativ-Margins (wie .last-sync-hint):
       konkurriert sonst mit der sticky .topbar um dieselbe Position bzw.
       überlappt sie durch Margin-Collapse-Effekte. */
    margin:0 0 12px;
    padding:8px 16px;
    border-radius:10px;

    background:var(--warning-soft);
    color:var(--warning);
    border:1px solid var(--border);

    font-size:13px;
    font-weight:600;
    text-align:center;
}

.last-sync-hint{
    display:flex;
    align-items:center;
    gap:6px;

    margin:0 0 10px;
    padding:6px 10px;

    background:var(--warning-soft);
    color:var(--warning);
    border-radius:10px;

    font-size:12px;
    font-weight:500;
}

.last-sync-hint.hidden{
    display:none;
}

.sync-pending-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-left:6px;
    color:var(--text-muted);
    font-size:13px;
    line-height:1;
    flex-shrink:0;
}

.note-item-pending{
    opacity:0.6;
}

.notification-panel{
    position:absolute;
    top:60px;
    right:10px;
    width:260px;
    max-width:calc(100vw - 20px);
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 12px 28px rgba(0,0,0,0.35);
    padding:10px;
    z-index:9999;
}

.notification-item{
    padding:8px 10px;
    border-radius:var(--radius-sm);
    font-size:15px;
    margin-bottom:6px;
    background:var(--surface-2);
    color:var(--text);
}

/* Suche */

.search-toggle{
    display:flex;
    align-items:center;
    justify-content:center;

    height:32px;
    width:32px;

    cursor:pointer;
    color:var(--text-secondary);
}

.search-panel{
    position:absolute;
    top:60px;
    right:10px;
    left:10px;

    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 12px 28px rgba(0,0,0,0.35);
    padding:10px;
    z-index:9999;

    max-height:min(70vh, 560px);
    overflow-y:auto;
}

.search-input{
    width:100%;
    box-sizing:border-box;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:12px 14px;
    font-size:16px;
    color:var(--text);
}

.search-input::placeholder{
    color:var(--text-muted);
}

.search-results{
    margin-top:10px;
}

.search-results .group{
    margin-top:10px;
}

.search-results .group:first-child{
    margin-top:0;
}

.search-results .grow-label{
    color:var(--text-secondary);
    font-size:var(--fs-sm);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.search-empty{
    padding:14px 10px;
    text-align:center;
    color:var(--text-muted);
    font-size:var(--fs-sm);
}

.search-more-link{
    display:block;
    padding:8px 10px;
    color:var(--accent);
    font-size:var(--fs-sm);
    text-decoration:none;
}

.search-more-link:active{
    opacity:0.7;
}

/* Navbar */

.navbar{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:900;
    background:var(--bg);
    border-top:1px solid var(--border);
    display:flex;
    justify-content:space-around;
    align-items:flex-start;
    padding:8px 6px calc(10px + var(--safe-bottom));
}

.nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    width:60px;
    text-decoration:none;
    color:var(--text-muted);
    padding:4px 0;
}

.nav-icon{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.nav-item span{
    font-size:11px;
    font-weight:700;
}

.nav-item.active{
    color:var(--accent);
}

.fab-wrap{
    width:60px;
    display:flex;
    justify-content:center;
}

.fab{
    width:50px;
    height:50px;
    margin-top:-26px;
    border-radius:50%;
    background:var(--accent-fab);
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 18px -6px rgba(0,0,0,0.45);
    cursor:pointer;
}

.fab svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:#fff;
    stroke-width:2.3;
    stroke-linecap:round;
}

.fab:active{
    transform:scale(0.96);
}

/* Schnellzugriff Sheet */

.fab-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    display:none;
    align-items:flex-end;
    justify-content:center;
    z-index:2000;
}

.fab-backdrop.open{
    display:flex;
}

.fab-sheet{
    width:100%;
    max-width:480px;
    background:var(--surface);
    border:1px solid var(--border);
    border-bottom:none;
    border-radius:20px 20px 0 0;
    padding:10px 8px calc(18px + var(--safe-bottom));
}

.fab-sheet-title{
    font-family:var(--font-display);
    font-weight:700;
    color:var(--accent);
    font-size:18px;
    padding:8px 14px 10px;
}

.fab-sheet-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:var(--radius);
    color:var(--text);
    text-decoration:none;
    font-size:15px;
    font-weight:600;
}

.fab-sheet-item:hover{
    background:var(--surface-2);
}

.fab-sheet-item svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:var(--accent);
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
}


/* Schnellzugriff-Dialog: legt Notiz/Aufgabe/Einkauf direkt an, statt aufs
   Widget zu springen (static/js/quick_add.js). */

.quick-add-extra{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.quick-add-extra:empty{
    display:none;
}

.quick-add-input,
.quick-add-select{
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    font-size:var(--fs-body);
    font-family:var(--font-body);
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    outline:none;
    transition:border-color 0.15s ease;
}

.quick-add-input::placeholder{
    color:var(--text-muted);
}

.quick-add-input:focus,
.quick-add-select:focus{
    border-color:var(--accent);
}

.quick-add-select{
    padding-right:36px;
    background:var(--surface) var(--icon-chevron) no-repeat right 12px center / 16px 16px;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    cursor:pointer;
}

/* Aufgabe: optionale Wiederholung (Zahl + Einheit + Anker) im Anlage-Sheet. */

.quick-add-recur{
    display:flex;
    gap:8px;
    align-items:stretch;
}

.quick-add-recur .quick-add-recur-count{
    flex:0 0 5.5em;
}

.quick-add-recur .quick-add-select{
    flex:1;
    min-width:0;
}

/* "Google-Maps-Link einfuegen" -> Name/Adresse ziehen (Lokale-Modul). */

.quick-add-linkrow{
    display:flex;
    gap:8px;
    align-items:stretch;
}

.quick-add-linkrow .quick-add-input{
    flex:1;
    min-width:0;
}

.quick-add-linkrow .secondary-button{
    flex-shrink:0;
    white-space:nowrap;
}

.quick-add-linkhint{
    margin:2px 0 0;
    font-size:var(--fs-sm);
    color:var(--text-secondary);
}

.quick-add-linkhint[hidden]{
    display:none;
}


/* ============================= */
/* TITLES */
/* ============================= */

.title{
    font-family:var(--font-display);
    font-size:26px;
    font-weight:700;
    letter-spacing:0;
    margin:34px 0 20px;
    border-bottom:1px solid var(--border);
    padding-bottom:10px;
    color:var(--accent);
}

/* ============================= */
/* PILLS (Tabs / Filter) */
/* ============================= */

.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:0 0 auto;
    border:1px solid var(--accent);
    background:transparent;
    color:var(--accent);
    font-family:var(--font-body);
    font-weight:700;
    font-size:13.5px;
    padding:8px 16px;
    border-radius:999px;
    cursor:pointer;
    text-decoration:none;
    white-space:nowrap;
    transition:background .15s ease, color .15s ease;
}

.pill:hover{
    background:var(--accent-soft);
}

.pill.active{
    background:var(--accent);
    color:var(--bg);
}

.pill-row{
    display:flex;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:2px;
}

.pill-row::-webkit-scrollbar{
    display:none;
}

/* ============================= */
/* SWITCH (Toggle) */
/* ============================= */

.switch{
    position:relative;
    display:inline-flex;
    flex-shrink:0;
    width:46px;
    height:26px;
    cursor:pointer;
}

.switch input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.switch-track{
    position:absolute;
    inset:0;
    background:var(--border-strong);
    border-radius:999px;
    transition:background .15s ease;
}

.switch-thumb{
    position:absolute;
    top:3px;
    left:3px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--surface);
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
    transition:transform .15s ease;
}

.switch input:checked + .switch-track{
    background:var(--accent);
}

.switch input:checked + .switch-track .switch-thumb{
    transform:translateX(20px);
}

.switch input:disabled + .switch-track{
    opacity:0.45;
    cursor:not-allowed;
}

.switch:has(input:disabled){
    cursor:not-allowed;
}


/* ============================= */
/* CARDS */
/* ============================= */

.card{
    background:var(--surface);
    border-radius:var(--radius-lg);
    padding:18px;
    margin-bottom:var(--gap);
    border:1px solid var(--border);
    position:relative;
    box-shadow:none;
}

/* Accent Stripe (dezenter als vorher) */

.card::before{
    content:"";
    position:absolute;
    left:0;
    top:14px;
    bottom:14px;
    width:2px;
    border-radius:2px;
    background: var(--accent-line, transparent);
    opacity:0.85;
}

/* Accent Varianten (funktional, nicht dekorativ) */

.card.ubahn { --accent-line:var(--line-ubahn); }
.card.sbahn { --accent-line:var(--success); }
.card.re { --accent-line:var(--danger); }
.card.cancelled { --accent-line:var(--danger); }


/* ============================= */
/* GROUPED LIST ("group" / "grow") */
/* iOS-Settings-Style: ein Container pro Bereich, */
/* Zeilen nur durch Trennlinien abgegrenzt        */
/* ============================= */

.group{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
}

.group + .group{
    margin-top:var(--gap);
}

.group-title{
    font-size:var(--fs-sm);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--text-muted);
    margin:18px 4px 6px;
}

.group-title:first-child{
    margin-top:0;
}

.grow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    min-height:48px;
    border-bottom:1px solid var(--border);
    color:var(--text);
    font-size:var(--fs-body);
    text-decoration:none;
    background:none;
    width:100%;
    box-sizing:border-box;
}

.grow:last-child{
    border-bottom:none;
}

.grow:active{
    background:var(--surface-hover);
}

.grow-icon{
    flex-shrink:0;
    font-size:var(--fs-lg);
    opacity:0.9;
}

.grow input[type="number"]{
    width:70px;
    flex-shrink:0;
    padding:8px 10px;
    font-size:15px;
    text-align:right;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--text);
    outline:none;
    box-sizing:border-box;
}

.grow input[type="number"]:-webkit-autofill,
.grow input[type="number"]:-webkit-autofill:hover,
.grow input[type="number"]:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--text);
    -webkit-box-shadow:0 0 0px 1000px var(--surface-2) inset;
    box-shadow:0 0 0px 1000px var(--surface-2) inset;
    transition:background-color 5000s ease-in-out 0s;
}

.grow input[type="number"]:focus{
    border-color:var(--accent);
}

.grow-time-range{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
    flex-wrap:wrap;
    justify-content:flex-end;
    color:var(--text-muted);
    font-size:14px;
}

.grow-time-range input[type="time"]{
    width:118px;
    flex-shrink:0;
    padding:8px 10px;
    font-size:15px;
    font-variant-numeric:tabular-nums;
    text-align:center;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--text);
    outline:none;
    box-sizing:border-box;
}

.grow-time-range input[type="time"]:focus{
    border-color:var(--accent);
}

.grow.grow-wrap{
    flex-wrap:wrap;
    row-gap:8px;
}

.grow-content{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.grow-label{
    color:var(--text-secondary);
    font-size:var(--fs-sm);
}

.grow-value{
    color:var(--text);
    font-weight:500;
}

.grow-title{
    color:var(--text);
    font-weight:500;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.grow-meta{
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
}

/* Ziehgriff der Einkaufslisten-Läden ("Seiten anpassen" > Einkauf) */

.drag-handle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    flex-shrink:0;
    color:var(--text-muted);
    cursor:grab;
    touch-action:none;
}

.drag-handle:active{
    cursor:grabbing;
}

.drag-handle-icon{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Aufklappbare Unter-Einstellung (z.B. News-Chips): Tippen auf den Widget-
   Namen in "Seiten anpassen" blendet das Panel ein/aus. */
.subconfig-toggle{
    flex:1;
    cursor:pointer;
    -webkit-user-select:none;
    user-select:none;
}

/* Rubrik-Ueberschrift auf der Einstellungsseite: die oberste Gliederungs-
   ebene (Darstellung / Automatik / Konto & Daten / Verwaltung). Nicht ueber
   Schriftgroesse abgesetzt - die Widget-Titel sind bewusst laut -, sondern
   ueber eine durchgezogene Trennlinie plus Akzentfarbe: alles darunter ist
   ein neuer Abschnitt. Zusammen mit dem unteren Rand des ersten Widget-Titels
   klammert das den Abschnitt ein. */
.settings-rubrik{
    display:flex;
    align-items:center;
    gap:10px;
    margin:44px 2px 14px;
    padding-top:16px;
    border-top:2px solid var(--border-strong);
    font-size:var(--fs-sm);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--accent);
}

/* Der erste Abschnitt braucht keine Linie - die <h1> trennt schon. */
.settings-rubrik:first-of-type{
    margin-top:18px;
    padding-top:0;
    border-top:0;
}

.settings-rubrik-tag{
    font-size:0.7em;
    font-weight:700;
    letter-spacing:0.06em;
    padding:3px 9px;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--accent);
}

/* Aufklappbarer Widget-Kopf. Die Einstellungen sind sonst eine sehr lange
   Seite - alles ausser den kurzen Abschnitten (Meine Daten, Account, Admin)
   startet zugeklappt. Der Logout bleibt bewusst immer sichtbar. */

.title.collapsible{
    display:flex;
    align-items:baseline;
    gap:8px;
    cursor:pointer;
    -webkit-user-select:none;
    user-select:none;
}

.title.collapsible:hover{
    opacity:0.85;
}

.title.collapsible:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:var(--radius-sm);
}

/* Kurzinfo im zugeklappten Kopf - sonst ist jeder Abschnitt eine Blackbox.
   Bewusst klein und in der Sekundaerfarbe: sie beantwortet "muss ich hier
   rein?", nicht mehr. */
.collapse-meta{
    margin-left:auto;
    font-family:var(--font-body);
    font-size:var(--fs-sm);
    font-weight:400;
    color:var(--text-muted);
    white-space:nowrap;
}

.collapse-meta:empty{
    display:none;
}

.title.collapsible .subconfig-caret{
    margin-left:0;
    align-self:center;
}

.title.collapsible.open .subconfig-caret{
    transform:rotate(180deg);
}

.widget-body[hidden]{
    display:none;
}

.subconfig-caret{
    display:inline-block;
    margin-left:4px;
    font-size:0.8em;
    color:var(--text-muted);
    transition:transform 0.15s ease;
}

.subconfig-toggle.open .subconfig-caret{
    transform:rotate(180deg);
}

/* Eingerueckte Unterzeilen direkt unter der Besitzer-Zeile (kein eigenes
   Feld): leicht abgesetzter Hintergrund, tiefer linker Einzug. */
.subconfig{
    background:var(--surface-2);
    border-bottom:1px solid var(--border);
}

.subconfig .grow{
    justify-content:space-between;
    padding:10px 16px 10px 48px;
    min-height:42px;
    font-size:var(--fs-sm);
}

/* ID+Attribut schlaegt die .subconfig .grow-Regel sicher - sonst bliebe das
   Panel trotz [hidden] sichtbar. */
#news-chip-config[hidden]{
    display:none;
}

#einkauf-store-config[hidden]{
    display:none;
}

/* Läden: EINE Liste – Reihenfolge (jeder Nutzer) + verwalten (Admin).
   Einstellungen -> Essen -> Einkauf */
#einkauf-default-store{
    max-width:55%;
    padding:7px 10px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text);
    font-size:var(--fs-sm);
}

.einkauf-store-row{
    gap:8px;
    background:var(--surface);
}

.einkauf-store-name{
    flex:1 1 auto;
    min-width:0;
    padding:7px 10px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text);
    font-size:var(--fs-sm);
}

.einkauf-store-name-text{
    flex:1;
    min-width:0;
    color:var(--text);
}

.einkauf-store-del{
    flex:0 0 auto;
    width:32px;
    height:32px;
    border:none;
    background:transparent;
    font-size:15px;
    cursor:pointer;
    opacity:.8;
}

.einkauf-store-del:disabled{
    opacity:.3;
    cursor:default;
}

.einkauf-store-confirm{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    width:100%;
    color:var(--text-secondary);
}

.einkauf-store-confirm select{
    flex:1 1 120px;
    padding:6px 8px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text);
    font-size:var(--fs-sm);
}

.einkauf-store-confirm-yes,
.einkauf-store-confirm-no{
    padding:6px 12px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    font-size:var(--fs-sm);
    font-weight:600;
    cursor:pointer;
}

.einkauf-store-confirm-yes{
    border-color:var(--danger);
    color:var(--danger);
}

.einkauf-store-add{
    gap:8px;
}

#einkauf-store-add-input{
    flex:1 1 auto;
    min-width:0;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text);
    font-size:var(--fs-sm);
}

.einkauf-store-hint{
    flex-direction:column;
    align-items:flex-start !important;
    gap:2px;
}

.einkauf-store-hint #einkauf-store-status:empty{
    display:none;
}

.einkauf-store-hint #einkauf-store-status.is-error{
    color:var(--danger);
}

.einkauf-store-caption{
    color:var(--text-muted);
}


/* ============================= */
/* ABFAHRTEN – Einstellungen (feature("abfahrten")) */
/* ============================= */

#abfahrten-body[hidden]{
    display:none;
}

.abfahrten-config{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:12px 16px;
}

.abfahrten-row{
    gap:8px;
    background:var(--surface);
}

.abfahrten-row-name{
    flex:1;
    min-width:0;
    color:var(--text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.abfahrten-row-name small{
    color:var(--text-muted);
}

.abfahrten-row-views{
    flex:0 0 auto;
    padding:2px 8px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface-2);
    color:var(--text-muted);
    font-size:var(--fs-xs, 11px);
    white-space:nowrap;
}

.abfahrten-edit{
    flex:0 0 auto;
    padding:5px 10px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text-secondary);
    font-size:var(--fs-sm);
    cursor:pointer;
}

.abfahrten-del{
    flex:0 0 auto;
    min-width:32px;
    height:32px;
    padding:0 8px;
    border:none;
    background:transparent;
    font-size:15px;
    cursor:pointer;
    opacity:.8;
}

.abfahrten-form{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-2);
}

.abfahrten-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.abfahrten-field > label,
.abfahrten-field-label{
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    font-weight:600;
}

.abfahrten-form input[type="text"],
.abfahrten-form input[type="number"]{
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text);
    font-size:var(--fs-sm);
    width:100%;
}

.abfahrten-stop-results{
    list-style:none;
    margin:0;
    padding:0;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    max-height:200px;
    overflow-y:auto;
}

.abfahrten-stop-results[hidden]{
    display:none;
}

.abfahrten-stop-results li{
    padding:8px 10px;
    font-size:var(--fs-sm);
    color:var(--text);
    cursor:pointer;
    border-bottom:1px solid var(--border);
}

.abfahrten-stop-results li:last-child{
    border-bottom:none;
}

.abfahrten-stop-results li small{
    color:var(--text-muted);
}

.abfahrten-stop-picked{
    padding:8px 10px;
    border:1px solid var(--accent);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text);
    font-size:var(--fs-sm);
    font-weight:600;
}

.abfahrten-stop-picked[hidden]{
    display:none;
}

.abfahrten-products,
.abfahrten-directions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

#abfahrten-views{
    padding:7px 10px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text);
    font-size:var(--fs-sm);
}

.abfahrten-check{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    cursor:pointer;
}

.abfahrten-check input{
    margin:0;
}

.abfahrten-hint{
    color:var(--text-muted);
}

.abfahrten-form-actions{
    display:flex;
    gap:8px;
}

.abfahrten-form[hidden]{
    display:none;
}

.abfahrten-status-row{
    flex-direction:column;
    align-items:flex-start !important;
    gap:2px;
}

.abfahrten-status-row #abfahrten-status:empty{
    display:none;
}

.abfahrten-status-row #abfahrten-status.is-error{
    color:var(--danger);
}

.abfahrten-caption{
    color:var(--text-muted);
}


/* Abfahrten-Widget selbst: mehrere Haltestellen-Bloecke je Swipe-Seite */
.abfahrten-section + .abfahrten-section{
    margin-top:22px;
}

.abfahrten-widget .abfahrten-title{
    margin:0 0 12px;
    font-size:18px;
}

.abfahrten-empty .direction{
    margin-bottom:6px;
}

/* Feiertagshinweis ueber der Abfahrtsliste (Sonntagsfahrplan). */
.abfahrten-hinweis{
    margin-bottom:8px;
    font-size:13px;
    font-weight:600;
    color:var(--accent);
    background:var(--accent-soft);
    border:1px solid var(--border-strong);
}

.category-dot{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}

.diet-icon{
    flex-shrink:0;
    font-size:16px;
    line-height:1;
}

.chevron{
    flex-shrink:0;
    color:var(--text-muted);
    font-size:18px;
}

/* ============================= */
/* THEME SWATCH GRID (Design-Auswahl) */
/* ============================= */

.theme-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:16px 8px;
    padding:4px;
}

.theme-swatch{
    position:relative;
    width:100%;
    max-width:52px;
    min-width:0;
    aspect-ratio:1;
    padding:0;
    border:none;
    border-radius:50%;
    background:none;
    cursor:pointer;
    box-shadow:0 0 0 2px var(--border);
    transition:box-shadow .15s ease, transform .15s ease;
}

.theme-swatch:active{
    transform:scale(0.94);
}

.theme-swatch[aria-pressed="true"]{
    box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

.theme-swatch-color{
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
    background:var(--accent);
}

.theme-swatch-check{
    position:absolute;
    right:-2px;
    bottom:-2px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--accent);
    color:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    border:2px solid var(--surface);
    opacity:0;
    transform:scale(0.6);
    transition:opacity .15s ease, transform .15s ease;
}

.theme-swatch[aria-pressed="true"] .theme-swatch-check{
    opacity:1;
    transform:scale(1);
}

.step-index{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    font-size:14px;
    font-weight:700;
}

/* Rezept bearbeiten: Zutaten-/Schrittzeilen per Ziehgriff umsortieren
   (app-weites .drag-handle-Muster, siehe "Seiten anpassen") und einzeln
   entfernen. Nur im Edit-Modus (.is-editing) sichtbar. */
.recipe-detail .grow.is-editing{
    gap:8px;
}

.row-delete-btn{
    flex-shrink:0;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--danger-soft);
    color:var(--danger);
    border:none;
    border-radius:50%;
    font-size:14px;
    line-height:1;
    cursor:pointer;
}

.recipe-detail .sortable-ghost{
    opacity:0.4;
}

.recipe-detail .sortable-chosen{
    background:var(--surface-hover);
}


/* ============================= */
/* MODAL (generic) */
/* ============================= */
/* EIN Overlay-Muster fuer die ganze App:
     <div class="modal hidden"><div class="modal-content"> … </div></div>
   Ein-/Ausblenden ausschliesslich ueber die .hidden-Klasse (siehe
   static/js/modal.js: Modal.open / Modal.close, Escape + Backdrop-Klick).
   .ui-modal teilt nur die Optik (dynamische Dialoge aus static/js/ui.js). */

.modal,
.ui-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9998;
    padding:20px;
}

.modal.hidden{
    display:none;
}

.modal-content{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:20px;
    width:100%;
    max-width:360px;
    box-shadow:0 12px 28px rgba(0,0,0,0.35);
}

/* Modifier: laengerer, scrollbarer Dialog mit rundem Schliessen-Button
   oben rechts (Preis-Check, ISBN, Notiz-Detail, Essensplan, Kassenzettel). */
.modal-content.modal-scroll{
    position:relative;
    max-width:400px;
    max-height:85vh;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.modal-content.modal-scroll h3{
    margin:0;
    padding-right:34px;
}

.modal-close{
    position:absolute;
    top:16px;
    right:16px;
    width:28px;
    height:28px;
    flex-shrink:0;
    border:none;
    border-radius:50%;
    background:var(--surface-2);
    color:var(--text-secondary);
    font-size:18px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.modal-close:active{
    background:var(--surface-hover);
}

.modal-hint{
    color:var(--text-secondary);
    font-size:var(--fs-sm);
    margin:0;
}

.modal-actions{
    display:flex;
    gap:10px;
    margin-top:16px;
}

/* Drei gleich breite Aktionen nebeneinander (Preis-Check). */
.modal-actions-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    margin-top:4px;
}

/* Eine einzelne, volle Aktion (ISBN, Notiz-Detail, Essensplan, Kassenzettel). */
.modal-actions-single{
    display:flex;
    margin-top:4px;
}

.modal-actions-grid button,
.modal-actions-single button{
    padding:10px 6px;
    font-size:13px;
    font-weight:600;
    border-radius:var(--radius-sm);
    cursor:pointer;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.modal-actions-single button{
    flex:1;
    min-width:0;
    padding:12px;
    font-size:15px;
}


/* ============================= */
/* TRANSIT CONTENT */
/* ============================= */

.line{
    display:inline-block;
    font-size:16px;
    font-weight:600;
    padding:4px 10px;
    border-radius:var(--radius-sm);
    background:var(--surface-2);
    color:var(--text);
    margin-bottom:6px;
}

.direction{
    color:var(--text-secondary);
    font-size:15px;
    margin-top:2px;
}

.leave{
    margin-top:5px;
    color:var(--text-secondary);
    font-size:15px;
}

.leaveinfo{
    font-size:14px;
    color:var(--text-muted);
    margin-top:2px;
}

.disruption-msg{
    font-size:13px;
    color:var(--text-muted);
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.delay{
    margin-top:4px;
    font-size:14px;
}

.time{
    font-size:44px;
    font-weight:600;
    margin-top:8px;
    letter-spacing:0;
    color:var(--text);
}

.platform{
    position:absolute;
    top:10px;
    right:12px;
    font-size:32px;
    font-weight:600;
    opacity:0.18;
}


/* ============================= */
/* STATUS COLORS (funktional, gedämpft) */
/* ============================= */

.red{
    color:var(--danger);
    font-weight:600;
}

.green{
    color:var(--success);
    font-weight:600;
}

.yellow{
    color:var(--warning);
    font-weight:600;
}


/* ============================= */
/* ANIMATIONS */
/* ============================= */

.blink{
    animation:blink 1s infinite;
}

@keyframes blink{
    50%{
        opacity:0.3;
    }
}


/* ============================= */
/* SWIPE */
/* ============================= */

.transit-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Verhindert Scroll-Anchoring: ohne das folgt der Browser beim
       Neuanordnen/Entfernen von Widgets (page-prefs.js) automatisch dem
       zuvor sichtbaren Element an seine neue Position, statt beim ersten
       Widget zu landen. */
    overflow-anchor: none;
}

.transit-container > .swipe-page {
    min-width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.swipe-page{
    min-width:100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================= */
/* WEATHER WIDGET */
/* ============================= */

.weather-widget .weather-hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:24px 16px;
}

.weather-widget .weather-hero-main{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.weather-widget .weather-now-icon{
    font-size:34px;
    line-height:1;
    opacity:0.85;
}

.weather-widget .weather-current{
    text-align:center;
    font-size:52px;
    font-weight:600;
    letter-spacing:-0.5px;
    color:var(--text);
    line-height:1;
}

.weather-widget .temp-separator{
    opacity:0.35;
    margin:0 4px;
}

.weather-widget .weather-description{
    font-size:14px;
    color:var(--text-secondary);
    margin-top:8px;
}

.weather-widget .weather-range{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    margin-top:18px;
}

.weather-widget .weather-range-label{
    flex-shrink:0;
    font-size:13px;
    color:var(--text-muted);
}

.weather-widget .weather-range-track{
    position:relative;
    flex:1;
    height:5px;
    border-radius:3px;
    background:linear-gradient(90deg, var(--info), var(--accent) 50%, var(--danger));
}

.weather-widget .weather-range-dot{
    position:absolute;
    top:50%;
    left:50%;
    width:13px;
    height:13px;
    border-radius:50%;
    background:var(--text);
    border:2px solid var(--surface);
    transform:translate(-50%, -50%);
}


/* --- DAY PARTS (GRID) --- */

.weather-widget .weather-times{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-top:16px;
}

.weather-widget .weather-slot{
    background:var(--surface-2);
    border-radius:var(--radius);
    padding:12px;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.weather-widget .weather-label{
    font-size:13px;
    color:var(--text-muted);
    margin-bottom:6px;
}

.weather-widget .weather-icon{
    font-size:25px;
    margin:6px 0;
    opacity:0.85;
}

.weather-widget .weather-temp{
    font-size:18px;
    font-weight:500;
    color:var(--text);
}

.weather-widget .weather-rain{
    font-size:14px;
    color:var(--text-muted);
}


/* --- FORECAST --- */

.weather-widget .weather-forecast{
    margin-top:16px;
    padding-top:6px;
}

.weather-widget .forecast-row{
    display:grid;
    grid-template-columns: minmax(0, 1fr) 50px 90px 40px;
    align-items:center;

    padding:14px 0;
    border-bottom:1px solid var(--border);
}

.weather-widget .forecast-row:last-child{
    border-bottom:none;
}

.weather-widget .forecast-date{
    font-size:15px;
    color:var(--text-secondary);
}

.weather-widget .forecast-icon{
    font-size:21px;
    text-align:center;
    opacity:0.85;
}

.weather-widget .forecast-temp{
    display:inline-grid;
    grid-template-columns: 24px 10px 28px;
    align-items:center;
    white-space:nowrap;
    text-align:right;
    min-width:70px;
    font-size:17px;
    font-weight:500;
    color:var(--text);
}

.weather-widget .forecast-temp span:first-child{
    text-align:right;
    color:var(--text-secondary);
}

.weather-widget .forecast-temp span:last-child{
    text-align:right;
}

.weather-widget .forecast-temp .temp-separator{
    opacity:0.35;
    margin:0 2px;
    text-align:center;
}

.weather-widget .forecast-rain{
    text-align:right;
    color:var(--text-muted);
    font-size:14px;
}

/* Kein Glow mehr – flache, ruhige Fläche */
.weather-widget .weather-hero{
    position:relative;
}

.rain-low { color: var(--success); }
.rain-mid { color: var(--warning); }
.rain-high { color: var(--danger); }

.weather-widget .card{
    background:var(--surface);
    border-radius:var(--radius-lg);
    padding:18px;
    border:1px solid var(--border);
    box-shadow:none;
}

.weather-widget .card::before{
    display:none;
}

/* ============================= */
/* POLLEN */
/* ============================= */

.pollen-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.pollen-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px;
    border-radius: var(--radius);

    background: var(--surface-2);
    border:1px solid var(--border);

    position: relative;
    overflow: hidden;

    transition: transform 0.15s ease, background 0.2s ease;
}

.pollen-row:active {
    transform: scale(0.98);
}

.pollen-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pollen-icon {
    font-size: 21px;
    opacity: 0.7;
}

.pollen-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}

.pollen-scale {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.pollen-segment {
    width: 7px;
    height: 16px;
    border-radius: 2px;
    background: var(--border);
}

/* Funktionale Ampel – dezent statt Gradient */

.pollen-green { background: var(--surface-2); }
.pollen-yellow { background: var(--surface-2); }
.pollen-orange { background: var(--surface-2); }
.pollen-red { background: var(--surface-2); }

.pollen-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.pollen-green::before { background: var(--success); }
.pollen-yellow::before { background: var(--warning); }
.pollen-orange::before { background: var(--pollen-orange); }
.pollen-red::before { background: var(--danger); }

.pollen-green .pollen-segment.filled { background: var(--success); }
.pollen-yellow .pollen-segment.filled { background: var(--warning); }
.pollen-orange .pollen-segment.filled { background: var(--pollen-orange); }
.pollen-red .pollen-segment.filled { background: var(--danger); }

/* ============================= */
/* CALENDAR */
/* ============================= */

#calendar-events {
    padding: 16px;
}

.calendar-loading {
    color: var(--text-muted);
    font-size: var(--fs-body);
}

.calendar-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 12px;
}

.calendar-day-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
}

.calendar-group.today .calendar-day-header {
    background: var(--accent-soft);
}

.calendar-day-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.calendar-group.today .calendar-day-label {
    color: var(--accent);
}

.calendar-date-label {
    font-size: 12px;
    color: var(--text-muted);
}

.calendar-row {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

/* Mehrtaegiger Termin (Urlaub, Dienstreise): ein durchgehender linker
   Farbbalken (Kalenderfarbe per Inline-Style) macht ueber mehrere
   Tages-Zeilen hinweg erkennbar, dass es sich um denselben, andauernden
   Termin handelt - nicht nur der kompakte "Tag x/y"-Zeittext. */
.calendar-row.is-multi-day {
    padding-left: 11px;
    border-left: 3px solid var(--border-strong);
}

.calendar-row:last-child {
    border-bottom: none;
}

.calendar-time {
    min-width: 60px;
    text-align: right;
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.calendar-title {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Farbpunkt je Termin - die einzige nicht-Token-Farbe (frei gewaehlt),
   per Inline-Style gesetzt. */
.calendar-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
}

.calendar-empty {
    color: var(--text-muted);
    font-size: var(--fs-body);
    padding: 4px 2px;
}

.calendar-empty p {
    margin: 0 0 4px;
}

.calendar-empty a {
    color: var(--accent);
}

/* ---- Einstellungen: Kalenderquellen verwalten ---- */

.calendar-config {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calendar-row-cfg {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.calendar-row-cfg.has-error .calendar-row-status {
    color: var(--danger);
}

.calendar-dot-btn {
    border: 1px solid var(--border-strong);
    cursor: pointer;
    padding: 0;
    width: 14px;
    height: 14px;
}

.calendar-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.calendar-row-name {
    color: var(--text);
    font-size: 15px;
}

.calendar-row-status {
    color: var(--text-muted);
    font-size: 12px;
}

.calendar-icon-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-secondary);
    font-size: 13px;
    padding: 4px 8px;
    cursor: pointer;
}

.calendar-icon-btn.calendar-del {
    border-color: var(--danger-soft);
}

.calendar-row-edit {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px;
}

.calendar-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.calendar-field > label,
.calendar-field-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.calendar-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.calendar-status-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-form input[type="text"],
.calendar-form input[type="url"],
.calendar-edit-name,
.calendar-edit-url {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-sm);
    outline: none;
}

.calendar-form input[type="text"]:focus,
.calendar-form input[type="url"]:focus,
.calendar-edit-name:focus,
.calendar-edit-url:focus {
    border-color: var(--accent);
}

.calendar-form input::placeholder,
.calendar-edit-name::placeholder,
.calendar-edit-url::placeholder {
    color: var(--text-muted);
}

.calendar-form-actions {
    display: flex;
    gap: 8px;
}

.calendar-hint,
.calendar-caption {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.calendar-section-label {
    margin: 4px 0 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.calendar-link {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 13px;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.calendar-swatches,
.calendar-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.calendar-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    padding: 0;
    cursor: pointer;
}

.calendar-swatch.is-selected {
    border-color: var(--text);
}

#calendar-status.is-error {
    color: var(--danger);
}

/* ---- Termine-Widget: Chip-Umschaltung "Übersicht"/"Kalender" (Muster .news-chip) ---- */

.view-chip-bar {
    display: flex;
    gap: 8px;
    margin: 4px 0 16px;
}

.view-chip {
    flex: 0 0 auto;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.view-chip:active {
    transform: scale(0.97);
}

.view-chip.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

/* ---- Termine-Widget: Monatsraster ---- */

.termine-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.termine-month-label {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.termine-month-nav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.termine-today-button {
    display: block;
    margin: 0 0 14px;
}

.termine-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.termine-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 16px;
}

.termine-day-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    aspect-ratio: 1;
    padding: 6px 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    cursor: pointer;
}

.termine-day-cell.is-outside {
    color: var(--text-muted);
    background: var(--surface-2);
}

.termine-day-cell.is-today {
    border-color: var(--accent);
}

.termine-day-cell.is-today .termine-day-number {
    color: var(--accent);
    font-weight: 700;
}

.termine-day-cell.is-selected {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.termine-day-number {
    font-size: 14px;
}

.termine-day-dots {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: center;
}

.termine-day-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
}

.termine-day-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.termine-day-panel-heading {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    text-transform: capitalize;
}

/* ============================= */
/* NEWS */
/* ============================= */

#news-widget {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#news-widget .news-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 20px;
}

#news-widget .news-item {
    position: relative;
    display: block;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--surface-2);
    border:1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    box-shadow:none;
    transition: background 0.2s ease;
}

#news-widget .news-item:hover {
    background: var(--surface-hover);
}

#news-widget .news-item:active {
    transform: scale(0.99);
}

#news-widget .news-category {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 7px;
}

#news-widget .news-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#news-widget .news-meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

#news-widget .news-item::before{
    display:none;
}

#news-widget .news-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: var(--accent);
    opacity: 0.4;
}

/* Zweite, kleinere Chip-Ebene direkt unter den Bereichs-Tabs: schaltet die
   Feed-Quelle um (SZ/Kicker/Transfermarkt) bzw. zeigt den Platzhalter fuer
   "Aktuelle Spiele". Rein token-basiert -> in allen Themes konsistent. */
#news-widget .news-chips {
    display: flex;
    gap: 8px;
    padding: 12px 16px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

#news-widget .news-chips::-webkit-scrollbar {
    display: none;
}

#news-widget .news-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#news-widget .news-chip:active {
    transform: scale(0.97);
}

#news-widget .news-chip[hidden] {
    display: none;
}

#news-widget .news-chip.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

/* ---- Aktuelle Spiele (Chip "Aktuelle Spiele") ---- */
#news-widget .news-matches {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 14px 16px 20px;
}

/* Die #news-widget-prefixierten Regeln fuer .news-list / .news-matches setzen
   display: flex und schlagen damit die generische .hidden-Utility (nur eine
   Klasse). Deshalb hier explizit im gleichen Spezifitaets-Kontext ausblenden -
   sonst wuerden Feed-Liste und Spiele-Ansicht gleichzeitig sichtbar bleiben. */
#news-widget .news-list.hidden,
#news-widget .news-matches.hidden {
    display: none;
}

#news-widget .match-loading,
#news-widget .match-error {
    color: var(--text-muted);
    font-size: 14px;
}

#news-widget .match-error {
    font-style: italic;
}

#news-widget .match-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#news-widget .match-section-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

#news-widget .match-card {
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--border);
}

#news-widget .match-card.live {
    border-color: var(--accent);
    background: var(--accent-soft);
}

#news-widget .match-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#news-widget .match-teams {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

#news-widget .match-minute {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}

#news-widget .match-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--danger);
    animation: blink 1s infinite;
}

#news-widget .match-score {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

#news-widget .match-delayed-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 11px;
    font-weight: 600;
}

#news-widget .match-scorers {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#news-widget .match-scorer {
    font-size: 12px;
    color: var(--text-secondary);
}

#news-widget .match-fixture-meta {
    margin-top: 6px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted);
}

/* ============================= */
/* NOTES */
/* ============================= */

#notes-list li {
    transition: background 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
}

#notes-list .grow-content {
    line-height: 1.4;
    word-break: break-word;
}

.note-preview-title {
    display: block;
    font-weight: 500;
    color: var(--text);
}

.note-preview-text {
    display: block;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-preview-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.note-drag-handle {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    letter-spacing: -2px;
    cursor: grab;
    touch-action: none;
}

.note-item.dragging {
    opacity: 0.5;
}

.note-placeholder {
    background: var(--surface-hover);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}

/* ============================= */
/* INPUT BAR */
/* ============================= */

.notes-input {
    display: flex;
    gap: 10px;
    padding: 16px;
}

#notes-input {
    flex: 1;
    min-width: 0;
    background: var(--surface-2);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    font-size: 16px;
    color: var(--text);
}

#notes-input::placeholder {
    color: var(--text-muted);
}

/* ============================= */
/* NOTE PHOTOS */
/* ============================= */

.note-photo-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.note-photo-thumb {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.note-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: pointer;
}

.note-photo-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.note-lightbox-content {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 92vw;
}

.note-lightbox-content img {
    max-width: 92vw;
    max-height: 85vh;
    border-radius: var(--radius);
    display: block;
    margin: 0 auto;
}

/* ============================= */
/* NOTE DETAIL MODAL */
/* ============================= */

.note-detail-content.modal-scroll {
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
}

.note-detail-title-input {
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 6px 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
}

.note-detail-title-input::placeholder {
    color: var(--text-muted);
}

.note-detail-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.note-detail-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.note-detail-toolbar-divider {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 4px;
}

.note-detail-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.note-detail-tool-btn span {
    font-size: 14px;
}

.note-detail-tool-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.note-detail-tool-btn:active {
    background: var(--surface-hover);
    color: var(--text);
}

.note-detail-textarea {
    flex: 1;
    min-height: 260px;
    resize: none;
    background: none;
    border: none;
    padding: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    font-family: inherit;
    outline: none;
}

.note-detail-textarea::placeholder {
    color: var(--text-muted);
}

/* ============================= */
/* SHOPPING & MEAL */
/* ============================= */

.shopping-add{
    display:flex;
    gap:10px;
    padding:12px;
}

.shopping-add input{
    flex:1;
    min-width:0;
    padding:12px 14px;
    font-size:16px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--text);
    outline:none;
}

.shopping-add button{
    width:44px;
    height:44px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-2);
    color:var(--text);
    font-size:21px;
    display:flex;
    align-items:center;
    justify-content:center;
}

#shopping-list input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:var(--accent);
    flex-shrink:0;
}


#shopping-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px;
}

.shopping-chip {
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 14px;
    cursor: pointer;
    background: var(--surface-2);
    color: var(--text);
    transition: 0.15s;
}

.shopping-chip:hover {
    background: var(--surface-hover);
}

.meal-row {
    gap: 6px;
    padding: 8px 16px;
}

.meal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    flex-shrink: 0;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.meal-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    padding: 0 8px;
}

.meal-input::placeholder {
    color: var(--text-muted);
}

.meal-recipe-link {
    flex: 1;
    min-width: 0;
    /* Tap-Ziel fuellt die gesamte Zeilenhoehe, damit ein einzelner
       Tipp auf dem iPhone das Rezept oeffnet und man nicht den
       schmalen Textstreifen treffen muss. */
    align-self: stretch;
    display: flex;
    align-items: center;
    min-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 0 8px;
    touch-action: manipulation;
}

.meal-recipe-link:hover {
    text-decoration: underline;
}

.meal-clear-btn,
.meal-rest-btn,
.meal-out-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.meal-clear-btn:hover,
.meal-rest-btn:hover,
.meal-out-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* Reste-Tag: dritter Zustand einer Wochenplan-Zeile neben Rezept und
   Freitext. Der Knopf wird nur an leeren Tagen angeboten (siehe
   meal_plan.js), damit ein Reste-Tag nie ein Gericht ueberschreibt. */

.meal-rest-btn {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.meal-rest-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.meal-row.is-leftover {
    background: var(--surface-2);
}

.meal-rest-tag {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
}

.meal-rest-badge {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--border-strong);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.meal-rest-hint {
    min-width: 0;
    color: var(--text-muted);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .meal-rest-hint {
        display: none;
    }
}

/* Auswaerts-Tag: vierter Zustand einer Wochenplan-Zeile. Wie der Reste-Tag
   ohne Vorratsabzug, aber das Eingabefeld bleibt fuer eine optionale
   Zusatzinfo (Restaurant, Anlass) editierbar - deshalb nur ein schmaler
   Badge statt eines fuellenden Markers. */

.meal-row.is-out {
    background: var(--surface-2);
}

.meal-out-tag {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.meal-out-badge {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--border-strong);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Wochenplan-Abgleich: Sheet, das nach dem Entfernen eines Rezept-Tages
   die noch offenen Zutaten dieses Rezepts zur Ruecknahme anbietet
   (static/js/shopping_orphans.js). */

.orphan-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.orphan-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 15px;
    cursor: pointer;
}

.orphan-row + .orphan-row {
    border-top: 1px solid var(--border);
}

.orphan-row input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--accent);
}

.orphan-kept {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.orphan-kept-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.orphan-kept-row span {
    flex-shrink: 0;
    font-style: italic;
}

/* =============================
   SHOPPING V2
============================= */

.shopping-store-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin-bottom:14px;
}

.shopping-store-tile{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    cursor:pointer;
}

.shopping-store-tile:active{
    background:var(--surface-hover);
}

.shopping-store-tile-name{
    color:var(--text-secondary);
    font-size:var(--fs-sm);
}

.shopping-store-tile-count{
    color:var(--text-muted);
    font-size:28px;
    font-weight:700;
}

.shopping-store-tile.has-items .shopping-store-tile-count{
    color:var(--accent);
}

.shopping-store-title{
    margin-top:8px;
    margin-bottom:18px;
    font-size:23px;
    font-weight:600;
    color:var(--text);
}

.shopping-back-button{
    width:fit-content;
    margin-bottom:18px;
    padding:8px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-2);
    color:var(--text);
    cursor:pointer;
    font-size:15px;
}

.shopping-store-selector{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:4px;
    margin-bottom:14px;
}

.shopping-store-option{
    position:relative;
    display:flex;
    align-items:center;
    gap:6px;
    background:transparent;
    border:1px solid var(--accent);
    padding:7px 14px;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    color:var(--accent);
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
}

.shopping-store-option:has(input:checked){
    background:var(--accent);
    color:var(--bg);
}

.shopping-store-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.shopping-chip:active{
    transform:scale(0.97);
}

/* ============================= */
/* PREIS-CHECK */
/* ============================= */

.price-tool-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface-2);
    color:var(--text);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.price-tool-upload{
    position:relative;
}

.shopping-item{
    cursor:pointer;
    /* Doppel-Tipp = Preisvergleich; iOS soll dabei nicht zoomen. */
    touch-action:manipulation;
}

/* Inline-Bearbeitung des Zeilennamens (Menge von Hand anpassen). Sitzt an
   der Stelle der .grow-content-Beschriftung, die es kurzzeitig ersetzt. */
.shopping-item-edit{
    flex:1;
    min-width:0;
    font:inherit;
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--accent);
    border-radius:var(--radius-sm);
    padding:5px 8px;
    outline:none;
}

.shopping-item-price{
    flex-shrink:0;
    background:var(--accent-soft);
    color:var(--accent);
    font-size:13px;
    font-weight:600;
    padding:4px 10px;
    border-radius:999px;
    white-space:nowrap;
}

.shopping-dept-header{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 16px;
    border-bottom:1px solid var(--border);
}

.shopping-dept-icon{
    font-size:16px;
    line-height:1;
}

.shopping-dept-name{
    flex:1;
    min-width:0;
    font-size:14px;
    font-weight:600;
    color:var(--text);
}

.shopping-dept-count{
    flex-shrink:0;
    font-size:12px;
    color:var(--text-muted);
}

/* ============================= */
/* EINKAUFSLISTE – ARTIKEL VERSCHIEBEN (Auswahlmodus) */
/* ============================= */

#shopping-list .shopping-item{
    position:relative;
    overflow:hidden;
    max-height:200px;
    transition:max-height .25s ease, opacity .2s ease,
               padding .25s ease, background .15s ease;
}

#shopping-list .shopping-item > *:not(.shopping-press-progress){
    position:relative;
    z-index:1;
}

.shopping-press-progress{
    position:absolute;
    left:0; top:0; bottom:0;
    width:0;
    background:var(--accent-soft);
    pointer-events:none;
    z-index:0;
}

.shopping-item.selected{
    background:var(--accent-soft);
}

/* Auswahl-Indikator – ersetzt im Auswahlmodus die Checkbox */
.shopping-selection-dot{
    display:none;
    width:20px;
    height:20px;
    flex-shrink:0;
    border-radius:50%;
    border:2px solid var(--border-strong);
    box-sizing:border-box;
}

body.shopping-selecting #shopping-list .shopping-item input[type="checkbox"]{
    display:none;
}

body.shopping-selecting .shopping-selection-dot{
    display:inline-block;
}

.shopping-item.selected .shopping-selection-dot{
    border-color:var(--accent);
    background:var(--accent);
    box-shadow:inset 0 0 0 3px var(--surface);
}

/* verschobene Zeilen sanft ausblenden */
.shopping-item.removing{
    max-height:0;
    min-height:0;
    padding-top:0;
    padding-bottom:0;
    opacity:0;
}

.shopping-empty-hint{
    padding:24px 16px;
    text-align:center;
    color:var(--text-muted);
    font-size:14px;
}

/* Bottom-Actionbar - zweizeilig, damit auf schmalen Handys nichts über den
   Bildschirmrand hinausläuft: Zeile 1 = Zähler + Abbrechen, Zeile 2 = die
   beiden Aktions-Buttons je zur Hälfte. */
#shopping-action-bar{
    position:fixed;
    left:0; right:0; bottom:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--surface);
    border-top:1px solid var(--border);
    box-shadow:0 -8px 24px rgba(0,0,0,0.18);
    transform:translateY(120%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
    z-index:900;
}

#shopping-action-bar.open{
    transform:translateY(0);
}

.shopping-ab-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.shopping-ab-top{
    justify-content:space-between;
}

.shopping-ab-count{
    font-size:15px;
    font-weight:600;
    color:var(--text-secondary);
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#shopping-action-bar button{
    border:none;
    border-radius:10px;
    padding:11px 18px;
    font-size:15px;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
    white-space:nowrap;
}

.shopping-ab-cancel{
    background:transparent;
    color:var(--danger);
    flex:none;
    padding:8px 4px;
}

.shopping-ab-move{
    background:var(--accent);
    color:var(--bg);
}

.shopping-ab-actions button{
    flex:1;
    min-width:0;
}

.shopping-ab-dept{
    background:var(--surface-2);
    color:var(--text);
}

/* Laden-Auswahl-Sheet + Abteilungs-Auswahl-Sheet */
#shopping-store-sheet,
#shopping-dept-sheet{
    position:fixed;
    inset:0;
    display:none;
    align-items:flex-end;
    background:rgba(0,0,0,0.35);
    z-index:1000;
}

#shopping-store-sheet.open,
#shopping-dept-sheet.open{
    display:flex;
}

/* Abteilungsliste kann laenger sein als der Schirm -> scrollbar halten */
.shopping-dept-sheet-options{
    max-height:60vh;
    overflow-y:auto;
}

.shopping-sheet-panel{
    width:100%;
    background:var(--bg);
    border-radius:16px 16px 0 0;
    padding:8px 0 calc(8px + env(safe-area-inset-bottom));
    animation:shoppingSheetUp .25s cubic-bezier(.32,.72,0,1);
}

@keyframes shoppingSheetUp{
    from{ transform:translateY(100%); }
    to{ transform:translateY(0); }
}

.shopping-sheet-title{
    padding:12px 16px 6px;
    text-align:center;
    font-size:13px;
    color:var(--text-secondary);
}

.shopping-sheet-option{
    padding:15px 20px;
    text-align:center;
    font-size:17px;
    font-weight:500;
    color:var(--accent);
    border-top:1px solid var(--border);
    cursor:pointer;
}

.shopping-sheet-option.disabled{
    color:var(--text-muted);
    opacity:0.5;
    cursor:default;
}

.shopping-sheet-cancel{
    color:var(--danger);
}

.shopping-sheet-gap{
    height:8px;
    background:var(--surface-2);
}

/* Toast */
#shopping-toast{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%) translateY(20px);
    max-width:88%;
    padding:12px 18px;
    border-radius:12px;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    font-size:14px;
    line-height:1.4;
    text-align:center;
    box-shadow:0 8px 24px rgba(0,0,0,0.25);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    z-index:1100;
}

#shopping-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

#price-check-name{
    padding:12px 14px;
    font-size:16px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    outline:none;
}

.price-reference{
    min-height:1em;
}

.price-sparkline{
    display:block;
    width:100%;
    max-width:240px;
    height:auto;
    margin:6px 0 2px;
}

.price-spark-stats{
    color:var(--text-secondary);
    font-size:var(--fs-sm);
    margin:0;
}

.price-hint{
    color:var(--text-secondary);
    font-size:var(--fs-sm);
    margin:0;
}

.price-check-row{
    display:flex;
    gap:8px;
}

.price-check-row input{
    flex:1;
    min-width:0;
    padding:10px 12px;
    font-size:15px;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    outline:none;
}

.price-check-row select{
    padding:10px 8px;
    font-size:15px;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
}

#isbn-input{
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    font-size:var(--fs-body);
    font-family:var(--font-body);
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    outline:none;
    transition:border-color 0.15s ease;
}

#isbn-input::placeholder{
    color:var(--text-muted);
}

#isbn-input:focus{
    border-color:var(--accent);
}

/* Scannen + Suchen gleich breit nebeneinander */
#isbn-modal .modal-actions button{
    flex:1;
}

.price-photo-option{
    justify-content:center;
}

.price-result{
    min-height:1em;
}

.price-verdict{
    font-weight:700;
    font-size:16px;
}

.price-verdict-bestpreis,
.price-verdict-guenstig{
    color:var(--success);
}

.price-verdict-durchschnitt{
    color:var(--warning);
}

.price-verdict-teuer{
    color:var(--danger);
}

.price-verdict-unbekannt{
    color:var(--text-muted);
}

#receipt-confirm-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:50vh;
    overflow-y:auto;
}

.receipt-confirm-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
}

.receipt-confirm-name-row{
    flex:1 1 100%;
    display:flex;
    align-items:center;
    gap:8px;
}

.receipt-confirm-name-input{
    flex:1;
    min-width:0;
    padding:8px 10px;
    font-weight:600;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--text);
}

.receipt-confirm-price{
    flex-shrink:0;
    color:var(--text-secondary);
    font-size:var(--fs-sm);
    white-space:nowrap;
}

.receipt-confirm-size{
    flex:1;
    min-width:100px;
    padding:8px 10px;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--text);
}

.receipt-confirm-unit{
    padding:8px;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--text);
}

.receipt-confirm-skip{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    white-space:nowrap;
}

/* ============================= */
/* LANDING / STATUS */
/* ============================= */

.status-block {
    padding:16px;
    margin-bottom:14px;
    border-radius:var(--radius-lg);
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:none;
    transition: background 0.15s ease;
    position: relative;
    overflow: hidden;
}

.status-block:active{
    background:var(--surface-hover);
}

.landing-status {
    font-size:1.15rem;
    padding:16px;
    border-radius:var(--radius);
}

#weather-icon {
    font-size:1.61rem;
    margin-right:8px;
    opacity:0.85;
}

/* ============================= */
/* WEATHER ROW */
/* ============================= */

.weather-row{
    display:flex;
    gap:var(--gap);
}

.weather-row .status-block{
    flex:1;
    min-width:0;
    padding:20px 16px;
    min-height:100px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
}

.weather-row .status-block > span:first-of-type{
    font-size:23px;
    margin-bottom:6px;
    opacity:0.85;
}

.weather-row .status-block > span:last-of-type{
    font-size:28px;
    font-weight:600;
    letter-spacing:0;
    color:var(--text);
}

/* Kein Farb-Gradient mehr — flache Fläche, Farbe nur noch als kleines Signal */
.weather-main,
.weather-rain,
.status-block.weather-block,
.status-block.calendar,
.status-block.transit,
.status-block.food,
.status-block.shopping{
    background: var(--surface);
}

.weather-main::before,
.status-block.weather-block::before,
.status-block.calendar::before,
.status-block.transit::before,
.status-block.food::before,
.weather-rain::before{
    display:none;
}

.weather-warning-hint{
    display:flex;
    align-items:center;
    gap:4px;
    margin-top:6px;
    font-size:12px;
    font-weight:600;
    color:var(--danger);
    white-space:nowrap;
    max-width:100%;
}

.weather-warning-hint[hidden]{
    display:none;
}

.weather-warning-triangle{
    font-size:0.9rem;
    flex-shrink:0;
}

.outfit ul {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.outfit li {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* ============================= */
/* SETTINGS */
/* ============================= */

.settings-container {
    max-width: 600px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* ============================= */
/* PAGE HEADER */
/* ============================= */

.page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.home-button {
    font-size: 23px;
    text-decoration: none;
    color: var(--text-secondary);
}


/* ============================= */
/* IOS PWA */
/* ============================= */

.ios-pwa body{
    overscroll-behavior: none;
}

.ios-pwa html,
.ios-pwa body{
    height:100%;
}


/* ============================= */
/* SWIPE INDICATOR */
/* ============================= */

.swipe-indicator {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px 14px;
    padding: 8px 16px;

    position: sticky;
    top: var(--topbar-height, 64px);
    z-index: 999;
    background: var(--bg);
}

.swipe-indicator:empty {
    display: none;
    margin: 0;
    padding: 0;
}

.swipe-indicator::-webkit-scrollbar {
    display: none;
}

.swipe-indicator .tab-pill {
    flex: 0 0 auto;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.swipe-indicator .tab-pill.active {
    background: var(--accent);
    color: var(--bg);
}

/* ============================= */
/* GENERIC CONTAINER (Rezepte Import/Preview, OCR) */
/* ============================= */

.container{
    max-width:520px;
    margin:0 auto;
}

.container .widget{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:18px;
    margin-bottom:var(--gap);
}

.container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.container select,
.container textarea,
.input{
    display:block;
    width:100%;
    background:var(--surface-2);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:10px 12px;
    font-family:var(--font-body);
    font-size:15px;
    margin-bottom:10px;
    box-sizing:border-box;
}

.container input[type="file"]::file-selector-button,
.container input[type="file"]::-webkit-file-upload-button{
    background:var(--accent);
    color:var(--bg);
    border:1px solid var(--accent);
    border-radius:var(--radius-sm);
    padding:8px 14px;
    font-family:var(--font-body);
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    margin-right:10px;
}

.container input[type="file"]::file-selector-button:hover,
.container input[type="file"]::-webkit-file-upload-button:hover{
    opacity:0.9;
}

.container button,
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--accent);
    color:var(--bg);
    border:1px solid var(--accent);
    border-radius:var(--radius-sm);
    padding:10px 16px;
    font-family:var(--font-body);
    font-weight:600;
    font-size:15px;
    cursor:pointer;
}

.container button:hover,
.btn:hover{
    opacity:0.9;
}

.container ul,
.container ol{
    list-style:none;
    margin:0 0 10px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.container li{
    display:flex;
    align-items:center;
    gap:6px;
}

.container li input{
    margin-bottom:0;
}

.container label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--text-secondary);
    font-size:14px;
    margin:4px 10px 4px 0;
}

.container pre{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:10px;
    color:var(--text-secondary);
    font-size:13px;
    white-space:pre-wrap;
    word-break:break-word;
}

/* ============================= */
/* REZEPTE */
/* ============================= */

.recipes-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* Suchfeld mit innenliegender Lupe - gleiches Muster wie .book-search-field.
   Die Filter sitzen im Sheet, deshalb bekommt die Suche die ganze Zeile
   und muss sie sich nicht mit Kategorie-Pills teilen. */

.recipe-search-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.recipe-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

#recipe-search {
    width: 100%;
    padding: 10px 12px 10px 36px;
    font-size: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
    box-sizing: border-box;
}

#recipe-search:focus {
    border-color: var(--accent);
}

.recipes-add-btn {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}

.recipe-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
}

.recipe-filters label {
    position: relative;
    background: transparent;
    border: 1px solid var(--accent);
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--accent);
    transition: background .15s ease, color .15s ease;
}

.recipe-filters label:has(input:checked) {
    background: var(--accent);
    color: var(--bg);
}

.recipe-filters label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#filter-diet {
    padding: 6px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.recipes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recipe-meta {
    margin-top: 6px;
}

/* Naechste Abfuhr in der "Heute"-Gruppe. Faerbt sich erst, wenn heute oder
   morgen geleert wird - an den uebrigen Tagen ist es eine Auskunft, keine
   Warnung. Den dringenden Fall traegt ohnehin das Morgen-Briefing. */
.grow-value.is-soon {
    color: var(--warning);
}

/* =============================
   BRIEFING-DECK
============================= */
/* Zwei Teile: die Zeile auf der Startseite (.briefing-row, wie eine
   Grouped-List-Zeile mit Akzentkante links) und die eigenstaendige
   Deck-Seite /briefing (.briefing-deck*, .deck-*). Ausschliesslich
   vorhandene Tokens - so tragen alle zehn Farbthemen automatisch. */

/* -- Zeile auf der Startseite -------------------------------------------- */

.briefing-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
}

.briefing-row-main {
    flex: 1;
    min-width: 0;
}

.briefing-row-main b {
    display: block;
    font-weight: 600;
    font-size: 16px;
}

.briefing-row-main span {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.briefing-row-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 18px;
}

/* -- Eigenstaendige Deck-Seite (/briefing) ----------------------------- */

body.briefing-body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
}

.briefing-deck-wrap {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.briefing-deck-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: calc(14px + var(--safe-top)) 20px 6px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.briefing-deck-count {
    color: var(--text-muted);
    font-size: 13px;
}

/* Fortschritt = Punkte (ein Punkt je Karte inkl. Abschlusskarte), zentriert.
   .swipe-deck-seg bleibt als generischer Default fuer andere Aufrufer. */
.briefing-deck-progress {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 8px 20px 12px;
}

.swipe-deck-seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--border);
    transition: background 0.25s ease;
}

.swipe-deck-seg.is-done {
    background: var(--accent);
}

.briefing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border-strong);
    transition: background 0.25s ease, transform 0.25s ease;
}

.briefing-dot.is-done {
    background: var(--accent);
}

.briefing-dot.is-current {
    transform: scale(1.35);
}

/* Kartenstapel: alle Seiten liegen uebereinander, die oberste vorn. Wischen /
   Tippen schnippt sie nach links weg, die naechste rueckt nach. Unten bleiben
   ~22px Luft, damit die darunterliegenden Karten hervorlugen. */
.briefing-deck {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
}

.briefing-deck .deck-page {
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: calc(100% - 22px);
    padding: 6px 18px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    z-index: 1;
    transform-origin: top center;
    transition: transform 0.34s cubic-bezier(0.4, 0.15, 0.2, 1), opacity 0.3s ease;
}

/* Ohne JS (Cache-Miss o.ae.) wenigstens die erste Karte sichtbar zeigen.
   Steht VOR den data-depth-/is-gone-Regeln, damit die (gleiche Spezifitaet)
   uebernehmen, sobald briefing.js die Klassen setzt. */
.briefing-deck .deck-page:first-child { opacity: 1; }

/* z-index explizit, sonst gewaenne die DOM-Reihenfolge und eine hintere Karte
   laege ueber der vorderen. */
.briefing-deck .deck-page[data-depth="0"] { opacity: 1; z-index: 4; }
.briefing-deck .deck-page[data-depth="1"] { transform: translateY(11px) scale(0.972); opacity: 0.6; z-index: 3; }
.briefing-deck .deck-page[data-depth="2"] { transform: translateY(21px) scale(0.944); opacity: 0.3; z-index: 2; }
.briefing-deck .deck-page[data-depth="3"] { transform: translateY(30px) scale(0.92); opacity: 0; z-index: 1; }

/* Nur die oberste Karte ist bedienbar. */
.briefing-deck .deck-page:not([data-depth="0"]) { pointer-events: none; }

/* Weggeschnippt - fliegt ueber allem nach links raus. */
.briefing-deck .deck-page.is-gone {
    transform: translateX(-112%) rotate(-5deg);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}

.deck-head {
    margin: 12px 4px 16px;
}

.deck-eyebrow {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.deck-head h2 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.briefing-deck .group + .group {
    margin-top: 14px;
}

.deck-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    min-height: 52px;
}

.deck-row:first-child {
    border-top: none;
}

.deck-lead {
    flex: 0 0 auto;
    min-width: 52px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.deck-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.deck-dot--warn {
    background: var(--warning);
}

.deck-dot--ok {
    background: var(--success);
}

.deck-main {
    flex: 1;
    min-width: 0;
}

.deck-main b {
    display: block;
    font-weight: 500;
    font-size: 16px;
}

.deck-main span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
}

.deck-meta {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.deck-meta.is-late {
    color: var(--warning);
}

.deck-meta.is-ok {
    color: var(--success);
}

.deck-hint {
    margin: 0;
    padding: 12px 16px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.45;
}

.deck-hint.is-warn {
    color: var(--warning);
}

.deck-empty {
    margin: 0;
    padding: 26px 16px;
    text-align: center;
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.5;
}

.deck-page--finish {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.deck-finish {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 30px;
}

.deck-finish h2 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.deck-finish p {
    margin: 0;
    max-width: 250px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.5;
}

.deck-finish-btn {
    margin-top: 22px;
    padding: 14px 44px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--bg);
    cursor: pointer;
}

.deck-finish-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.briefing-deck-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px calc(20px + var(--safe-bottom));
}

.briefing-deck-nav {
    padding: 8px 12px;
    font: inherit;
    font-size: 15px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
}

.briefing-deck-nav:disabled {
    color: var(--text-muted);
    opacity: 0.4;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .swipe-deck-seg,
    .briefing-dot {
        transition: none;
    }
    /* Kein Stapel-/Wisch-Effekt: schlichter Wechsel, nur die aktuelle Karte
       sichtbar. */
    .briefing-deck .deck-page {
        transition: opacity 0.15s ease;
        transform: none;
    }
    .briefing-deck .deck-page[data-depth] {
        transform: none;
    }
    .briefing-deck .deck-page:not([data-depth="0"]) {
        opacity: 0;
        visibility: hidden;
    }
    .briefing-deck .deck-page.is-gone {
        transform: none;
        opacity: 0;
        visibility: hidden;
    }
}

/* Erklaerzeile unter einer Einstellungs-Ueberschrift. */
.settings-hint {
    margin: -12px 4px 12px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.45;
}

/* Zuweisungs-Auswahl in der Wartungs-Liste: wie im Aufgaben-Widget, aber an
   den rechten Rand gezogen, damit Titel | Auswahl · Schalter in eine Zeile
   passen. #wartung-list schlaegt die blockbreite `.container select`-Regel. */
#wartung-list .wartung-assignee {
    display: inline-block;
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 0 auto;
    max-width: 130px;
    padding: 6px 26px 6px 10px;
    font-size: var(--fs-sm);
    font-family: var(--font-body);
    background: var(--surface-2) var(--icon-chevron) no-repeat right 8px center / 14px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

#wartung-list .wartung-assignee:disabled {
    opacity: 0.5;
    cursor: default;
}

/* =============================
   KONTEXTZEILE (Landing)
============================= */
/* Nutzt den einen App-Akzent - die Zeile ist der Blickfang der Seite, aber
   kein Alarm. Ohne Inhalt ist der Block hidden, nicht leer sichtbar. */

.context-line {
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 17px 17px 15px;
    margin-bottom: 10px;
}

.context-line[hidden] {
    display: none;
}

.context-main {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.32;
    color: var(--accent);
    text-wrap: balance;
}

.context-sub {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 9px;
}

.context-sub[hidden] {
    display: none;
}

.context-sub div {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* =============================
   WUNSCHLISTE (/home)
============================= */

.wuensche-tabs {
    margin-bottom: 14px;
}

.wuensche-tabs[hidden] {
    display: none;
}

.wunsch-row {
    flex-wrap: wrap;
    row-gap: 8px;
}

.wunsch-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.wunsch-btn {
    flex-shrink: 0;
    padding: 6px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.wunsch-btn-accent {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.wunsch-btn.is-mine {
    border-color: var(--success);
    background: var(--success-soft);
    color: var(--success);
}

.wunsch-btn-quiet {
    padding: 6px 10px;
    border-color: transparent;
    background: none;
    color: var(--text-muted);
}

.wunsch-btn-quiet:hover {
    color: var(--danger);
}

.wunsch-link {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

/* Die gesperrte eigene Liste - ruhig gehalten, sie ist kein Fehlerzustand. */
.wunsch-locked {
    margin-top: 10px;
}

.wunsch-locked-row {
    min-height: 118px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wunsch-locked-row .grow-content {
    align-items: center;
    gap: 6px;
}

.wunsch-locked-row .grow-title {
    white-space: normal;
}

.wunsch-locked-icon {
    font-size: 30px;
    line-height: 1;
}

.wunsch-add {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 14px;
}

.wunsch-input {
    width: 100%;
    padding: 11px 13px;
    font-size: 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    outline: none;
    box-sizing: border-box;
}

.wunsch-input:focus {
    border-color: var(--accent);
}

.wunsch-hint {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--danger);
}

.wunsch-hint[hidden] {
    display: none;
}

/* =============================
   LOKALE (/home)
============================= */

.lokale-toolbar-title {
    flex: 1;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.lokale-search-row {
    margin: 8px 0 4px;
    display: flex;
}

.lokale-search-row #lokale-search {
    width: 100%;
    box-sizing: border-box;
}

/* Platzhalter in der Küche-Facette, solange noch keine Küche hinterlegt ist. */
.filter-empty-hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: 4px 2px;
}

.lokale-list {
    margin-top: 4px;
}

.lokale-row {
    flex-wrap: wrap;
    row-gap: 8px;
    align-items: flex-start;
}

.lokale-row-main {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.lokale-row-main:active {
    opacity: 0.7;
}

.lokale-row-main .grow-title {
    white-space: normal;
}

.lokale-facts {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.lokale-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lokale-btn {
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.lokale-btn-text {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.lokale-btn-quiet {
    border-color: transparent;
    background: none;
    color: var(--text-muted);
}

.lokale-btn-quiet:hover {
    color: var(--danger);
}

.badge.lokale-revisit {
    background: var(--success-soft);
    color: var(--success);
}

.lokale-check,
.quick-add-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-body);
    color: var(--text-secondary);
}

/* =============================
   ZAEHLERSTAENDE (/home)
============================= */

.zaehler-kinds {
    margin-bottom: 14px;
}

.zaehler-kinds[hidden] {
    display: none;
}

.zaehler-hero {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 2px 4px;
}

.zaehler-value {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.zaehler-unit {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--text-secondary);
}

.zaehler-when {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-muted);
}

/* Ein Balken je Monat. Monate ohne Datengrundlage bekommen keinen Balken -
   ein Balken der Hoehe null wuerde "nichts verbraucht" behaupten. */

.zaehler-chart {
    padding: 14px 4px 4px;
}

.zaehler-plot {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 78px;
    border-bottom: 1px solid var(--border);
}

.zaehler-col {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.zaehler-bar {
    width: 100%;
    background: var(--accent);
    border-radius: 4px 4px 0 0;
}

.zaehler-gap {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: var(--border);
}

.zaehler-axis {
    display: flex;
    gap: 3px;
    padding-top: 6px;
    margin-bottom: 14px;
}

.zaehler-axis span {
    flex: 1;
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
}

.zaehler-number-row .grow-value {
    font-variant-numeric: tabular-nums;
}

.zaehler-btn {
    flex-shrink: 0;
    padding: 6px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.zaehler-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.zaehler-capture {
    margin-top: 14px;
}

.zaehler-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.zaehler-input {
    width: 100%;
    padding: 11px 13px;
    font-size: 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    outline: none;
    box-sizing: border-box;
}

.zaehler-input:focus {
    border-color: var(--accent);
}

.zaehler-input[hidden] {
    display: none;
}

.zaehler-hint {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--danger);
}

.zaehler-hint[hidden] {
    display: none;
}

/* Umschalter kWh/m³ <-> EUR ueber den Monatsbalken. Nur da, wenn der Zaehler
   einen Preis hinterlegt hat. */

.zaehler-toggle {
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* "Zählernummer nachtragen": aufklappendes Formular mit Nummer + Tarif. */

.zaehler-edit-form {
    margin-top: 12px;
}

.zaehler-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zaehler-field-label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.zaehler-period {
    margin-top: 2px;
}

.zaehler-form-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.zaehler-form-actions .wide-accent-button {
    flex: 1;
}

.zaehler-tarif-row .grow-value {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================
   Ausgaben-Übersicht (/haushalt/ausgaben)
   Balken/Farben ausschliesslich ueber Theme-Tokens.
   ========================================================== */

.expense-page .expense-intro,
.expense-page .expense-status {
    margin: 4px 0 14px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.expense-block {
    margin-top: 22px;
}

.expense-block h3 {
    margin: 0 0 10px;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.expense-summary {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.expense-summary-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.expense-summary-value {
    margin-top: 2px;
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.expense-delta {
    margin-top: 6px;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.expense-delta.is-up { color: var(--danger); }
.expense-delta.is-down { color: var(--success); }
.expense-delta.is-neutral { color: var(--text-muted); }

/* Balkenreihe pro Monat */
.expense-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.expense-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.expense-bar-value {
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.expense-bar-track {
    width: 100%;
    height: 96px;
    display: flex;
    align-items: flex-end;
}

.expense-bar {
    width: 100%;
    min-height: 2px;
    background: var(--accent);
    border-radius: 4px 4px 0 0;
    transition: height 0.25s ease;
}

.expense-bar.is-empty {
    height: 2px !important;
    background: var(--border);
    border-radius: 2px;
}

.expense-bar-label {
    font-size: 10px;
    color: var(--text-muted);
}

/* Lebensmittel vs. Rest */
.expense-split-bar {
    display: flex;
    height: 16px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--border);
}

.expense-split-seg.is-groceries { background: var(--accent); }
.expense-split-seg.is-other { background: var(--border-strong); }

.expense-split-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.expense-split-legend .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.expense-split-legend .dot.is-groceries { background: var(--accent); }
.expense-split-legend .dot.is-other { background: var(--border-strong); }

/* Top-Händler */
.expense-merchant-row {
    margin-bottom: 12px;
}

.expense-merchant-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--fs-sm);
    color: var(--text);
}

.expense-merchant-total {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.expense-merchant-track {
    margin-top: 4px;
    height: 8px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.expense-merchant-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
}

.expense-note {
    margin-top: 20px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.expense-note a {
    color: var(--accent);
}

/* Dezenter Verweis aus dem Rechnungen-Widget */
.invoice-expenses-link {
    display: inline-block;
    margin: 2px 0 10px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-decoration: none;
}

.invoice-expenses-link:hover {
    color: var(--text-secondary);
}

.invoice-total-line {
    margin-top: 8px;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Vollbreiter Akzent-Knopf - auch vom Kochbar-/Vorrat-Umfeld nutzbar. */
.wide-accent-button {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.wide-accent-button[hidden] {
    display: none;
}

/* =============================
   EINKAUFS-MODUS (Vollbild)
============================= */
/* Eigene Seite ohne Topbar/Navbar. Alles deutlich groesser als im Rest der
   App: eine Hand am Wagen, Blick auf zwei Meter. */

.shopmode-body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
}

.shopmode {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.shopmode-head {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.shopmode-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.shopmode-store {
    font-size: 24px;
    font-weight: 700;
}

.shopmode-left {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.shopmode-bar {
    height: 5px;
    margin-top: 11px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.shopmode-bar > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--accent);
    transition: width .2s ease;
}

.shopmode-list {
    flex: 1;
    padding-bottom: 12px;
}

.shopmode-section {
    padding: 18px 16px 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Zeile ist der Button - die ganze Breite ist Trefferflaeche. */
.shopmode-line {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 16px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 19px;
    text-align: left;
    cursor: pointer;
}

.shopmode-line:active {
    background: var(--surface-hover);
}

.shopmode-line.is-done {
    color: var(--text-muted);
}

.shopmode-line.is-done .shopmode-name {
    text-decoration: line-through;
}

.shopmode-tick {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 2px solid var(--border-strong);
    border-radius: 8px;
    position: relative;
}

.shopmode-tick.is-done {
    background: var(--accent);
    border-color: var(--accent);
}

.shopmode-tick.is-done::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid var(--bg);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.shopmode-name {
    flex: 1;
    min-width: 0;
}

.shopmode-price {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.shopmode-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted);
}

.shopmode-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.shopmode-sum {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.shopmode-sum-label {
    font-size: 12.5px;
    color: var(--text-muted);
}

.shopmode-sum b {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.shopmode-done {
    flex-shrink: 0;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--bg);
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
}

/* Einstieg aus der Laden-Ansicht des Widgets */
.shopping-mode-link {
    display: block;
    margin: 0 0 12px;
    padding: 13px 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .shopmode-bar > i {
        transition: none;
    }
}

/* =============================
   KOCHBAR-WIDGET (/essen)
============================= */
/* Wie das Vorrat-Widget durchgehend .group/.grow - eigene Regeln nur fuer
   die Kopfzeile, die Filter-Pillen und den Aktionsknopf. */

.kochbar-lead {
    margin: 2px 4px 12px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.kochbar-lead:empty {
    display: none;
}

.kochbar-lead b {
    color: var(--text);
    font-weight: 600;
}

/* Filter-Trichter rechtsbuendig unter der Kopfzeile - ersetzt die vorherige
   Dauer-Pillenreihe (Ohne Einkauf/Eine Zutat fehlt/Alle), die jetzt im
   Sheet steckt. Bleibt wie zuvor verborgen, solange nichts anzuzeigen ist. */
.kochbar-filter-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.kochbar-filter-row[hidden] {
    display: none;
}

.kochbar-row {
    cursor: pointer;
}

.kochbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.kochbar-btn {
    flex-shrink: 0;
    padding: 6px 11px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.kochbar-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Reste-Assistent ("Verwertet deine Reste") - eigene Eingabe unter der
   Kochbar-Liste, dieselbe Ergebnis-Optik (.group/.grow). */
.kochbar-reste {
    margin: 6px 0 4px;
}

.kochbar-reste .group-title {
    margin-bottom: 8px;
}

.kochbar-reste-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.kochbar-reste-input-row .search-input {
    flex: 1 1 auto;
    min-width: 0;
}

.kochbar-reste-input-row .kochbar-btn {
    flex: 0 0 auto;
}

.kochbar-reste-results {
    margin-top: 10px;
}

.kochbar-reste-results:empty {
    display: none;
}

/* Derselbe Vorschlag inline unter einem Reste-Tag im Wochenplan. */
.meal-leftover-suggest {
    margin: -2px 0 10px;
    padding: 8px 10px;
    background: var(--accent-soft);
    border-radius: var(--radius);
}

.meal-leftover-suggest .group {
    background: transparent;
}

.meal-leftover-suggest .empty-state {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

/* =============================
   VORRAT-WIDGET (/essen)
============================= */
/* Nutzt durchgehend .group/.grow/.grow-title/.grow-label - hier stehen nur
   die beiden Aktionsknoepfe pro Zeile und der Hinweis-Toast. */

.vorrat-row {
    flex-wrap: wrap;
    row-gap: 8px;
}

.vorrat-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.vorrat-btn {
    flex-shrink: 0;
    padding: 6px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.vorrat-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.vorrat-btn-accent {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.vorrat-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Toast wie in der Einkaufsliste - kurzer Vollzug, kein Modal. */
.vorrat-toast {
    position: fixed;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(10px);
    max-width: min(92vw, 420px);
    padding: 11px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-sm);
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    z-index: 1200;
    transition: opacity .18s ease, transform .18s ease;
}

.vorrat-toast.open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .vorrat-toast {
        transition: none;
    }
}

/* =============================
   REZEPTE: BEWERTUNG + KOCH-HISTORIE
============================= */

/* ---- Filter-Knopf mit Zaehler ---- */

.recipe-filter-btn {
    position: relative;
    width: 42px;
    height: 42px;
}

.recipe-filter-btn.has-filters {
    border-color: var(--accent);
    color: var(--accent);
}

.recipe-filter-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.recipe-filter-count[hidden] {
    display: none;
}

/* ---- Aktive Filter als entfernbare Chips ----
   Erscheint nur, wenn tatsaechlich gefiltert wird - im Ruhezustand steht
   ueber der Liste genau eine Reihe. */

.recipe-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.recipe-active-filters[hidden] {
    display: none;
}

.recipe-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px 5px 12px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.recipe-filter-chip-x {
    font-size: 13px;
    opacity: 0.75;
}

.recipe-filter-chip:hover .recipe-filter-chip-x {
    opacity: 1;
}

.recipe-filter-clear {
    border: none;
    background: none;
    padding: 5px 4px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.recipe-filter-clear:hover {
    color: var(--text-secondary);
}

/* ---- Trefferzahl (nur im gefilterten Zustand) ---- */

.recipe-list-head {
    padding: 0 4px 8px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.recipe-list-head[hidden] {
    display: none;
}

/* ---- Filter-Sheet ----
   Aufbau wie die Laden-/Abteilungs-Sheets der Einkaufsliste; Inhalt sind
   hier aber Gruppen aus .pill statt einer Optionsliste, weil Kategorien
   mehrfach waehlbar sind. */

.recipe-filter-sheet {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
}

.recipe-filter-sheet.open {
    display: flex;
}

.recipe-filter-sheet[hidden] {
    display: none;
}

.recipe-filter-panel {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg);
    border-radius: 16px 16px 0 0;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    animation: recipeFilterSheetUp .25s cubic-bezier(.32, .72, 0, 1);
}

@keyframes recipeFilterSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .recipe-filter-panel {
        animation: none;
    }
}

.recipe-filter-grip {
    width: 38px;
    height: 4px;
    margin: 0 auto 6px;
    border-radius: 999px;
    background: var(--border-strong);
}

.recipe-filter-group {
    margin-bottom: 4px;
}

/* Im Sheet ist Platz - Pills umbrechen statt seitlich zu scrollen, sonst
   liegt die Haelfte der Kategorien ausserhalb des Bildes. */
.pill-row-wrap {
    flex-wrap: wrap;
    overflow-x: visible;
}

.recipe-filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.recipe-filter-actions > button {
    flex: 1;
}

/* Zweite Zeile in der Rezeptliste: Sterne + "zuletzt gekocht". Nutzt
   .grow-label, hier nur Umbruchverhalten und Ziffernausrichtung. */
.recipe-history {
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipe-history:empty {
    display: none;
}

.recipe-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 8px;
}

/* Vollstaendige eigene Regel, damit die Sterne blank dastehen (kein Rahmen,
   keine Flaeche) - unabhaengig von jedem generischen Button-Fallback. */
.recipe-detail .rating-star {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}

.rating-star.is-filled {
    color: var(--warning);
}

.rating-star:hover {
    color: var(--warning);
}

.rating-star:active {
    transform: scale(0.9);
}

.rating-star:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.rating-hint {
    margin-left: 8px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.rating-hint:empty {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .rating-star {
        transition: none;
    }

    .rating-star:active {
        transform: none;
    }
}

.badge {
    display: inline-block;
    background: var(--accent-soft);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 13px;
    margin-right: 4px;
}

.badge.diet {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success);
}

.badge-active {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success);
}

.badge-warning {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: var(--warning);
}

.badge-expired {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--danger);
}

/* Rechnungen: Import */

.invoice-upload-options {
    display: flex;
    gap: 12px;
    margin: 16px 0;
}

.invoice-upload-option {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    color: var(--text-secondary);
}

.invoice-upload-option:active {
    background: var(--accent-soft);
}

.invoice-upload-icon {
    font-size: 28px;
}

.invoice-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.invoice-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invoice-field input[type="text"],
.invoice-field input[type="date"],
.invoice-field input[type="number"] {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-body);
    box-sizing: border-box;
    width: 100%;
}

.invoice-form.hidden,
.invoice-upload-step.hidden {
    display: none;
}

.invoice-form-status {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 14px;
    font-weight: 600;
}

.invoice-form-status[hidden] {
    display: none;
}

.invoice-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.invoice-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.invoice-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.invoice-item-row .invoice-item-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    color: var(--text);
    font-size: var(--fs-body);
    padding: 0;
}

.invoice-item-row .invoice-item-input:focus {
    outline: none;
}

.invoice-item-name {
    flex: 1;
    min-width: 0;
    color: var(--text);
}

.invoice-item-remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.invoice-item-remove:hover {
    background: var(--surface-hover);
    color: var(--danger);
}

.invoice-item-add {
    width: 100%;
    padding: 10px;
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    cursor: pointer;
}

.invoice-item-add-row {
    display: flex;
    gap: 8px;
}

.invoice-item-add-row input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-body);
    box-sizing: border-box;
}

/* Detailseite */

.recipe-detail h2 {
    margin-bottom: 10px;
    color: var(--accent);
}

.recipe-detail h3 {
    margin-top: 20px;
    margin-bottom: 8px;
    color: var(--text);
}

.group-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recipe-detail {
    font-size: var(--fs-body);
}

.recipe-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.recipe-header .recipe-meta {
    margin-left: 0;
}

#edit-diet {
    display: inline-block;
    margin-bottom: 10px;
    padding: 10px 32px 10px 12px;
    font-size: var(--fs-body);
    font-family: var(--font-body);
    background: var(--surface-2) var(--icon-chevron) no-repeat right 10px center / 16px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.recipe-actions.top {
    margin-left: auto;
}

.grow-add-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border: none;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* Nur namenlose Buttons bekommen den schlichten Fallback - alles mit
   .primary-/.secondary-/.danger-button folgt dem App-Standard. */
.recipe-detail button:not([class]) {
    font-size: 15px;
    padding: 6px 10px;
    cursor: pointer;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}

/* Aktionsleiste unten: App-Standard-Buttons in einem sauber umbrechenden
   2er-Raster statt der frueheren namenlosen Mini-Buttons. */
.recipe-footer {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.recipe-footer > button {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

/* Inline-Aktion in der Abschnittsueberschrift ("Alle Zutaten"):
   App-Standard-Button, nur etwas kompakter als im Seitenfuss. */
.section-header .secondary-button {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 14px;
}

.servings-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
}

.servings-label {
    color: var(--text-secondary);
    font-size: var(--fs-body);
}

.servings-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.servings-stepper button:disabled {
    opacity: 0.4;
    cursor: default;
}

.servings-value {
    min-width: 20px;
    text-align: center;
    font-weight: 600;
    color: var(--text);
}

.ingredient-fixed-badge {
    margin-left: 4px;
    font-size: 11px;
    padding: 1px 7px;
}

.ingredient-card,
.step-card {
    background: var(--surface-2);
    border:1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.meal-day-option {
    display: block;
    margin: 10px 0;
    color: var(--text) !important;
}

#category-select {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

#category-select label {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 15px;
    color: var(--text-secondary);
}

.category-checkbox {
    accent-color: var(--accent);
}

#diet-select {
    padding: 6px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
}

#ingredients-list li,
#ingredients div {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

#ingredients-list input,
#ingredients input {
    padding: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}

#steps-list input,
#steps {
    width: 100%;
    padding: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}

/* ============================= */
/* CHECKBOX-ZEILE (Formulare)   */
/* ============================= */

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: var(--fs-body);
    color: var(--text-secondary);
}

.checkbox-row input[type="checkbox"] {
    accent-color: var(--success);
}


.scanner-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5000;
}

.scanner-modal.hidden {
    display: none;
}

.scanner-dialog {
    width: 95%;
    max-width: 520px;
    background: var(--surface-2);
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.scanner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
}

.scanner-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 25px;
    cursor: pointer;
}

#scanner {
    width: 100%;
    min-height: 350px;
}

.scanner-footer {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
}

/* ==========================================================
   Bücher - Liste & Detail
========================================================== */

.books-list {
    display: flex;
    flex-direction: column;
}

.book-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

/* Nicht-blockierende Kaufwarnung beim ISBN-Scan eines bereits geliehenen
   Buchs - schliessbar, verhindert das Weiterscannen nicht (siehe
   book_service.lookup_book_by_isbn/borrowed_warning). */
.book-borrowed-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid var(--border);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.book-borrowed-warning.hidden {
    display: none;
}

.book-borrowed-warning-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.books-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

#invoice-search,
#lokale-search,
#preistracker-search {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: var(--fs-body);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}


/* Sucheingabefeld mit Lupen-Icon (Bibliothek) - #book-search bekommt
   dadurch, anders als vorher, keinen flex:1-Anteil mehr, der mit den
   Sortier-/Filter-Dropdowns geteilt werden muss (siehe .icon-select-wrapper
   unten, die feste 42px-Breite statt flex:1 nutzen). */

.book-search-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.book-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

#book-search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px 10px 38px;
    font-size: var(--fs-body);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}

/* ==========================================================
   Bibliothek: Filter-Trichter + Sheet, analog zu .recipe-filter-*
   (widgets/recipes.html). Ersetzt die vorherigen Sortier-/Status-
   Dropdowns; Sortierung und Status sind hier Einfachauswahl, daher zwei
   statt drei Pill-Reihen im Sheet.
========================================================== */

.book-filter-btn {
    position: relative;
    width: 42px;
    height: 42px;
}

.book-filter-btn.has-filters {
    border-color: var(--accent);
    color: var(--accent);
}

.book-filter-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.book-filter-count[hidden] {
    display: none;
}

/* Aktive Filter als entfernbare Chips - erscheint nur, wenn tatsaechlich
   gefiltert wird. */

.book-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.book-active-filters[hidden] {
    display: none;
}

.book-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px 5px 12px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.book-filter-chip-x {
    font-size: 13px;
    opacity: 0.75;
}

.book-filter-chip:hover .book-filter-chip-x {
    opacity: 1;
}

.book-filter-clear {
    border: none;
    background: none;
    padding: 5px 4px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.book-filter-clear:hover {
    color: var(--text-secondary);
}

/* Sheet - gleicher Aufbau wie .recipe-filter-sheet. */

.book-filter-sheet {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
}

.book-filter-sheet.open {
    display: flex;
}

.book-filter-sheet[hidden] {
    display: none;
}

.book-filter-panel {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg);
    border-radius: 16px 16px 0 0;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    animation: recipeFilterSheetUp .25s cubic-bezier(.32, .72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
    .book-filter-panel {
        animation: none;
    }
}

.book-filter-grip {
    width: 38px;
    height: 4px;
    margin: 0 auto 6px;
    border-radius: 999px;
    background: var(--border-strong);
}

.book-filter-group {
    margin-bottom: 4px;
}

.book-filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.book-filter-actions > button {
    flex: 1;
}

.books-scan-btn,
.books-add-btn {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}

.empty-state {
    color: var(--text-muted);
    padding: 16px 4px;
}

.book-card-cover {
    flex-shrink: 0;
    width: 48px;
    height: 66px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-2);
}

.book-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-muted);
}

.book-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

.book-location-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.book-location-dot.lent {
    background: var(--warning);
}

/* Eingehend geliehen (is_borrowed) - eigenstaendig vom obigen .lent
   (ausgehender Verleih an andere), siehe --dot-loaned in :root. */
.book-location-dot.loaned {
    background: var(--dot-loaned);
}

.book-loaned-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--dot-loaned);
    vertical-align: middle;
}

.book-read-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    vertical-align: middle;
}

.book-read-dot.reading {
    background: var(--accent);
}

.book-read-dot.read {
    background: var(--success);
}

.book-read-status-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.read-status-btn {
    padding: 8px 14px;
    font-size: var(--fs-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.read-status-btn.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.book-meta h2 {
    margin: 0 0 4px;
    font-size: var(--fs-title);
    color: var(--text);
}

.book-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}

.book-author {
    color: var(--text-secondary);
}

.book-isbn {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.status-lent,
.status-home {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-lent {
    color: var(--warning);
    border-color: var(--warning);
    background: var(--warning-soft);
}

.status-home {
    color: var(--success);
    border-color: var(--success);
    background: var(--success-soft);
}

.book-description {
    color: var(--text-secondary);
    line-height: 1.5;
}

.book-description-empty {
    color: var(--text-muted);
}

.book-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 4px 2px;
}

.book-back-link:hover {
    color: var(--text);
}

.book-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 28px 20px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.book-favorite-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

.book-favorite-toggle.active {
    color: var(--warning);
    border-color: var(--warning);
    background: var(--warning-soft);
}

.book-hero .book-cover-large-image {
    display: block;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}

.book-hero .book-cover-placeholder-large {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}

.book-hero .status-lent,
.book-hero .status-home {
    margin-top: 4px;
}

.book-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}

.book-section h3 {
    margin: 0 0 10px;
    font-size: var(--fs-lg);
}

.book-lend-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.book-lend-form input[type="text"] {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-body);
    box-sizing: border-box;
}

.book-delete-button {
    width: 100%;
}

.book-notes-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
}

.book-notes-textarea {
    min-height: 90px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-body);
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.book-notes-save {
    align-self: flex-end;
}

/* ==========================================================
   Bücher - Import
========================================================== */

.book-import-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.book-cover-large {
    width: 180px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.book-cover-large-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: none;
}

.book-cover-placeholder-large {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: var(--text-muted);
}

.book-import-fields {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.book-import-fields label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: -8px;
}

.book-import-fields input,
#description {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: 17px;
    box-sizing: border-box;
}

#description {
    min-height: 220px;
    resize: vertical;
}

.button-row {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.button-row > * {
    flex: 1;
    min-width: 0;
}

.primary-button,
.secondary-button,
.danger-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

.primary-button {
    background: var(--accent);
    color: var(--bg);
    border: 1px solid var(--accent);
}

.primary-button:hover {
    opacity: 0.9;
}

.secondary-button {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

.display-name-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.display-name-edit {
    display: flex;
    gap: 8px;
    width: 100%;
}

.display-name-input {
    flex: 1;
    min-width: 0;
    width: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: var(--text);
    font-size: 15px;
    box-sizing: border-box;
}

.icon-button {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 17px;
    cursor: pointer;
}

.icon-button:hover {
    background: var(--surface-hover);
}

/* ==========================================================
   GENERISCHES FILTER-SHEET
   Trichter-Knopf + Bottom-Sheet + entfernbare Chips - eingefuehrt in der
   Bibliothek/den Rezepten (dort noch mit eigenem book-/recipe-Praefix aus
   der jeweiligen Umbauzeit), hier als gemeinsamer Baustein fuer alle
   weiteren Widgets mit Filter/Sortierung (Aufgaben, Kochbar, Rechnungen,
   Rennrad-Touren). Jedes Widget bringt sein eigenes #<widget>-filter-sheet
   und eigene Pill-Reihen mit - Optik und Verhalten sind identisch.
========================================================== */

.filter-btn {
    position: relative;
    width: 42px;
    height: 42px;
}

.filter-btn.has-filters {
    border-color: var(--accent);
    color: var(--accent);
}

.filter-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.filter-count[hidden] {
    display: none;
}

/* Aktive Filter als entfernbare Chips - erscheint nur, wenn tatsaechlich
   gefiltert wird. */

.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.active-filters[hidden] {
    display: none;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px 5px 12px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.filter-chip-x {
    font-size: 13px;
    opacity: 0.75;
}

.filter-chip:hover .filter-chip-x {
    opacity: 1;
}

.filter-clear {
    border: none;
    background: none;
    padding: 5px 4px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.filter-clear:hover {
    color: var(--text-secondary);
}

/* Sheet */

.filter-sheet {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
}

.filter-sheet.open {
    display: flex;
}

.filter-sheet[hidden] {
    display: none;
}

.filter-panel {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg);
    border-radius: 16px 16px 0 0;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    animation: recipeFilterSheetUp .25s cubic-bezier(.32, .72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
    .filter-panel {
        animation: none;
    }
}

.filter-grip {
    width: 38px;
    height: 4px;
    margin: 0 auto 6px;
    border-radius: 999px;
    background: var(--border-strong);
}

.filter-group {
    margin-bottom: 4px;
}

.filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.filter-actions > button {
    flex: 1;
}

.secondary-button:hover {
    background: var(--accent-soft);
}

.danger-button {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.danger-button:hover {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* ============================= */
/* REGENRADAR (DWD)               */
/* ============================= */
.radar-card{
    padding:0;
    overflow:hidden;
}

.radar-map{
    position:relative;
    height:200px;
    width:100%;
    background:var(--surface-2);
}

.radar-map .leaflet-container{
    height:100%;
    width:100%;
    background:var(--surface-2);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}

.radar-map-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    font-size:var(--fs-sm);
    text-align:center;
    padding:12px;
}

.radar-controls{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
}

.radar-play-btn{
    flex:0 0 auto;
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid var(--border-strong);
    background:var(--surface);
    color:var(--accent);
    font-size:13px;
    line-height:1;
    cursor:pointer;
}

.radar-play-btn:hover{
    background:var(--accent-soft);
}

.radar-slider{
    flex:1 1 auto;
    accent-color:var(--accent);
}

/* ============================= */
/* UNWETTERWARNUNGEN (DWD)        */
/* ============================= */
.warning-card{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px;
}

.warning-card[hidden]{
    display:none;
}

.warning-item{
    position:relative;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:12px 12px 12px 16px;
    overflow:hidden;
}

.warning-item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
}

.warning-level-1::before{ background:var(--warning); }
.warning-level-2::before{ background:var(--pollen-orange); }
.warning-level-3::before{ background:var(--danger); }
.warning-level-4::before{ background:var(--severity-extreme); }

.warning-item-head{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
}

.warning-badge{
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.03em;
    padding:2px 8px;
    border-radius:999px;
    background:var(--surface);
    border:1px solid var(--border-strong);
    color:var(--text-secondary);
}

.warning-level-1 .warning-badge{ color:var(--warning); }
.warning-level-2 .warning-badge{ color:var(--pollen-orange); }
.warning-level-3 .warning-badge{ color:var(--danger); }
.warning-level-4 .warning-badge{ color:var(--severity-extreme); }

.warning-event{
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:0.02em;
}

.warning-headline{
    font-size:15px;
    font-weight:600;
    color:var(--danger);
    margin-bottom:4px;
}

.warning-period{
    font-size:13px;
    color:var(--text-muted);
}

.warning-details{
    margin-top:8px;
    font-size:13px;
    color:var(--text-secondary);
}

.warning-details summary{
    cursor:pointer;
    color:var(--accent);
    font-weight:500;
}

.warning-details p{
    margin:6px 0 0;
    line-height:1.4;
}

.warning-instruction{
    color:var(--text-muted);
}

/* ============================= */
/* AUFGABEN */
/* ============================= */

#aufgaben-active-filters {
    padding: 0 16px;
}

/* Eingabefeld, Zuweisung und Filter-Trichter in einer Zeile - der Trichter
   ersetzt die vorherige Dauer-Pillenreihe (Alle/Meine), die jetzt im Sheet
   steckt. */
.aufgaben-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 16px;
}

.aufgaben-toolbar .filter-btn {
    flex: 0 0 auto;
}

#aufgaben-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: var(--fs-body);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}

#aufgaben-input::placeholder {
    color: var(--text-muted);
}

#aufgaben-assignee,
.aufgaben-item-assignee {
    flex: 0 0 auto;
    max-width: 120px;
    padding: 10px 32px 10px 12px;
    font-size: var(--fs-body);
    font-family: var(--font-body);
    background: var(--surface-2) var(--icon-chevron) no-repeat right 10px center / 16px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.aufgaben-item-assignee {
    max-width: 110px;
    padding: 6px 26px 6px 10px;
    font-size: var(--fs-sm);
    background-size: 14px 14px;
    background-position: right 8px center;
}

.aufgaben-item-done .aufgaben-item-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Unterzeile (stapelt via .grow-content flex-column): bei offenen
   wiederkehrenden Aufgaben "↻ alle 2 Wochen · fällig 17.09.", bei erledigten
   "erledigt 03.09.". Nie durchgestrichen. */
.aufgaben-item-sub {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-decoration: none;
}

.aufgaben-item-delete {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
}

.aufgaben-item-delete:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.radar-time{
    flex:0 0 auto;
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    min-width:5.5em;
    text-align:right;
}

/* ============================= */
/* RÄTSEL */
/* ============================= */
/* Kein abgestimmtes Mockup im Repo auffindbar (siehe Implementierungsprompt,
   Phase 4) - Optik daher direkt aus den bestehenden Design-Tokens (:root
   oben) abgeleitet statt aus einer Vorlage uebernommen. */

.raetsel-page {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: 16px;
    box-sizing: border-box;
}

.raetsel-status {
    padding: 4px 16px 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.raetsel-status strong {
    color: var(--text);
}

/* ".widget" traegt in diesem Codebase (anders als der Name nahelegt) keine
   eigene Optik - siehe .container .widget weiter oben, das nur fuer
   Rezepte-Import/OCR gilt. Auf Rätsel-Seiten uebernehmen darum einzelne
   Bloecke (.raetsel-board, .raetsel-duel, .raetsel-widget-status) die Karten-
   Optik selbst, analog zu .weather-widget .card. Die Rangliste bleibt bewusst
   aussen vor: sie nutzt bereits .group fuer die Karten-Optik (wie auch bei
   Aufgaben/Einstellungen), ein zusaetzlicher Rahmen wuerde dort verschachtelte
   Karten erzeugen. */

.raetsel-board {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
}

/* Grid */

.raetsel-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    padding: 12px 0;
}

.raetsel-row {
    display: flex;
    gap: 6px;
}

.raetsel-tile {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    transition: transform 0.15s ease;
}

.raetsel-tile.filled {
    border-color: var(--border-strong);
}

.raetsel-tile.flip {
    animation: raetsel-flip 0.5s ease;
}

@keyframes raetsel-flip {
    0% { transform: rotateX(0deg); }
    50% { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}

.raetsel-tile.correct {
    background: var(--success);
    border-color: var(--success);
    color: var(--bg);
}

.raetsel-tile.present {
    background: var(--warning);
    border-color: var(--warning);
    color: var(--bg);
}

.raetsel-tile.absent {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-muted);
}

/* Tastatur */

.raetsel-keyboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.raetsel-keyboard-row {
    display: flex;
    gap: 4px;
}

.raetsel-key {
    /* flex statt fester Breite, damit die Reihe mit 10 Tasten (QWERTZUIOP)
       auch auf schmalen Handy-Displays nie ueber die Kartenbreite hinaus
       laeuft - min-width:0 erlaubt das Schrumpfen unter die Inhaltsbreite. */
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.raetsel-key:active {
    background: var(--surface-hover);
}

.raetsel-key-wide {
    flex: 1.6;
    font-size: 12px;
}

.raetsel-key.correct {
    background: var(--success);
    border-color: var(--success);
    color: var(--bg);
}

.raetsel-key.present {
    background: var(--warning);
    border-color: var(--warning);
    color: var(--bg);
}

.raetsel-key.absent {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-muted);
}

/* Tagesduell */

.raetsel-duel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    min-height: 24px;
}

.raetsel-duel-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.raetsel-duel-name {
    font-weight: 600;
    color: var(--text);
}

.raetsel-duel-progress {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.raetsel-duel-side.winner .raetsel-duel-name {
    color: var(--success);
}

.raetsel-duel-vs {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 700;
}

/* Rangliste */

.raetsel-ranking-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.raetsel-rank {
    flex-shrink: 0;
    width: 24px;
    color: var(--text-muted);
    font-weight: 700;
    text-align: center;
}

.raetsel-ranking-name {
    flex: 1;
    font-weight: 600;
    color: var(--text);
}

.raetsel-ranking-streak {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.raetsel-ranking-points {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--accent);
}

/* Kompaktes Dashboard-Widget */

.raetsel-widget-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.raetsel-widget-text {
    color: var(--text);
    font-weight: 600;
}

.raetsel-widget-sub {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 400;
}

.raetsel-widget-link {
    flex-shrink: 0;
    padding: 8px 14px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* Jahresrückblick */

.raetsel-review-page {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: 16px;
    box-sizing: border-box;
}

/* Anders als bei raetsel.html gibt es hier keine .group-Liste, die durch
   einen zusaetzlichen Rahmen verschachtelt wuerde - alle ".widget"-Bloecke
   auf dieser Seite duerfen daher einheitlich die Karten-Optik bekommen
   (siehe Begruendung bei .raetsel-board weiter oben). */
.raetsel-review-page .widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.raetsel-review-hero {
    text-align: center;
    padding: 24px 16px;
}

.raetsel-review-year {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.raetsel-review-points {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 700;
    color: var(--accent);
}

.raetsel-review-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

.raetsel-review-stat {
    padding: 16px;
    text-align: center;
}

.raetsel-review-stat-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
}

.raetsel-review-stat-label {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.raetsel-review-section-title {
    padding: 4px 4px 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.raetsel-review-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
}

.raetsel-review-row-label {
    color: var(--text-secondary);
}

.raetsel-review-row-value {
    font-weight: 600;
    color: var(--text);
}

.raetsel-review-row + .raetsel-review-row {
    border-top: 1px solid var(--border);
}

/* ============================= */
/* RENNRAD-ROUTENPLANER          */
/* ============================= */
/* Bewusst durchgehend über die App-Theme-Variablen - der Planer läuft so
   mit allen zehn Themes mit. Keine eigene Fixpalette (anders als in der
   Referenz-CSS vorgeschlagen): die App hat kein Vorbild für eine
   theme-unabhängige Vollbildansicht, und die einzige vergleichbare
   Vollseiten-Ansicht (Rätsel, .raetsel-page) nutzt ebenfalls die Themes.
   Für eine Karte ist es zudem hilfreich, dass der Kontrast der vom Nutzer
   gewählten Oberfläche folgt. */

.rr-app,
.rr-touren-page {
    padding-bottom: 40px;
}

.rr-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.rr-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;   /* damit Flex-/Grid-Kinder schrumpfen duerfen */
}

.rr-field label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.rr-field select,
.rr-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-body);
}

/* Grid statt Flex-Wrap: passt sich selbst an (Handy 2 Spalten, breit 3-4),
   Spalten immer gleich breit und buendig - kein ausgefranstes Umbrechen. */
.rr-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--gap);
}

.rr-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--gap);
    align-items: stretch;
}

.rr-actions > button,
.rr-actions > a {
    width: 100%;
}

/* .primary-button setzt display:flex und wuerde sonst das [hidden] des
   Browsers ueberstimmen -> der Modus-Umschalter blendet den Button so
   wirklich aus */
#rr-suggest[hidden] {
    display: none;
}

/* Modus-Umschalter + Panels */

#rr-pane-rundkurs,
#rr-pane-strecke {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

#rr-pane-rundkurs[hidden],
#rr-pane-strecke[hidden] {
    display: none;
}

.rr-seg {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.rr-seg button {
    flex: 1;
    padding: 8px 10px;
    border: none;
    border-radius: calc(var(--radius-sm) - 3px);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.rr-seg button.active {
    background: var(--accent-soft);
    color: var(--text);
}

/* Wegepunkt-Eingabe (Modus Streckenpunkte) */

.rr-wp-row {
    display: flex;
    gap: var(--gap);
}

.rr-wp-row input {
    flex: 1;
}

.rr-wp-row button {
    white-space: nowrap;
}

.rr-wp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rr-wp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

.rr-wp-item span {
    flex: 1;
    color: var(--text);
}

.rr-wp-remove {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-lg);
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.rr-wp-remove:hover {
    color: var(--danger);
}

.rr-hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: 0;
}

.rr-error {
    font-size: var(--fs-sm);
    color: var(--accent);
    margin: 0;
}

.rr-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.rr-map {
    height: 340px;
    width: 100%;
    border-radius: var(--radius);
    margin: var(--gap) 0;
    background: var(--surface-2);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.rr-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.rr-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rr-stat-value {
    font-size: var(--fs-title);
    font-weight: 700;
    color: var(--text);
}

.rr-stat-label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.rr-elevation svg {
    width: 100%;
    height: 120px;
    display: block;
    cursor: crosshair;
    touch-action: pan-y;  /* vertikales Scrollen bleibt, horizontal = Scrubben */
}

#rr-elev-vline,
#rr-elev-dot,
#rr-elev-label {
    pointer-events: none;
}

.rr-route-hit {
    cursor: grab;
}

.leaflet-dragging .rr-route-hit {
    cursor: grabbing;
}

/* Speichern-Dialog (App-Modal statt window.prompt) */

.rr-modal-label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: 6px;
}

#rr-save-modal .modal-content h3 {
    margin: 0 0 12px;
    color: var(--text);
}

#rr-save-name {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-body);
}

#rr-save-modal .modal-actions button {
    flex: 1;
}

/* Touren-Übersicht */

/* Titel + Filter-Trichter in einer Zeile - die Unterstreichung wandert von
   .title (dort per margin/border-bottom) auf diese Zeile. */
.rr-touren-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 34px 0 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.rr-touren-header .title {
    margin: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.rr-touren-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.rr-touren-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rr-touren-name {
    font-weight: 600;
    color: var(--text);
}

.rr-touren-badge,
.rr-widget-badge {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
}

.rr-touren-meta {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.rr-touren-actions {
    display: flex;
    gap: var(--gap);
}

.rr-empty,
.rr-widget-empty {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* Dashboard-Kachel */

.rr-widget-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

.rr-widget-text {
    color: var(--text);
}

.rr-widget-link,
.rr-widget-all {
    color: var(--accent);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.rr-widget-all {
    display: inline-block;
    margin-top: var(--gap);
}

.rr-widget-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rr-widget-name {
    font-weight: 600;
    color: var(--text);
    flex: 1;
}

.rr-widget-dist {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* ============================= */
/* KIOSK-SEITE (/kiosk) */
/* ============================= */
/* Eigenstaendige Querformat-Seite fuer ein fest installiertes Wandtablet -
   nicht in der App-Navigation, kein Scrollen. Ein Layout, die Kachel-
   Reihenfolge wechselt mit der Tageszeit (kiosk.js). Nutzt die vorhandenen
   Theme-Tokens. */

.kiosk-body{
    background:var(--bg);
    color:var(--text);
    height:100vh;
    height:100dvh;
    overflow:hidden;
}

.kiosk{
    box-sizing:border-box;
    height:100vh;
    height:100dvh;
    padding:max(18px, env(safe-area-inset-top)) clamp(18px, 3vw, 44px)
            max(14px, env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    gap:clamp(12px, 2vh, 22px);
}

/* -- Kopfzeile: Uhr | Wetter -- */
.kiosk-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
}

.kiosk-clock{
    display:flex;
    align-items:baseline;
    gap:14px;
}

.kiosk-clock #kiosk-time{
    font-family:var(--font-display);
    font-size:clamp(36px, 5.5vw, 60px);
    font-weight:300;
    color:var(--text);
    line-height:1;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.02em;
}

.kiosk-clock #kiosk-date{ color:var(--text-secondary); font-size:clamp(14px, 1.6vw, 18px); }

.kiosk-wx{ display:flex; align-items:center; gap:14px; text-align:right; }
.kiosk-wx-temp{
    font-size:clamp(26px, 3.4vw, 38px); font-weight:300; line-height:1;
    font-variant-numeric:tabular-nums;
}
.kiosk-wx-cond{ color:var(--text-secondary); font-size:clamp(12px, 1.4vw, 15px); margin-top:4px; }
.kiosk-wx-glyph{ font-size:clamp(28px, 3.6vw, 40px); line-height:1; }

/* -- Goldene Kontextzeile (Ausgabe der Kontext-Engine) -- */
.kiosk-context{
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:clamp(12px, 1.8vh, 18px) clamp(16px, 2vw, 22px);
    border:1px solid var(--accent);
    border-radius:var(--radius-lg);
    background:var(--accent-soft);
}
.kiosk-context.is-empty{ border-color:var(--border); background:var(--surface); }
.kiosk-context .kiosk-dot{
    flex:none; width:10px; height:10px; border-radius:50%;
    background:var(--accent); margin-top:.5em;
}
.kiosk-context.is-empty .kiosk-dot{ background:var(--text-muted); }
.kiosk-eyebrow{
    font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--accent); font-weight:700; margin-bottom:5px;
}
.kiosk-context.is-empty .kiosk-eyebrow{ color:var(--text-muted); }
.kiosk-context-line{
    font-family:var(--font-display);
    font-size:clamp(19px, 2.6vw, 30px); font-weight:600; line-height:1.3;
    color:var(--text); letter-spacing:-.01em;
}
.kiosk-context.is-empty .kiosk-context-line{ color:var(--text-muted); font-weight:500; }
.kiosk-context-sub{ color:var(--text-secondary); font-size:clamp(12px, 1.5vw, 15px); margin-top:6px; }

/* -- Kachelraster -- */
.kiosk-grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(10px, 1.4vw, 16px);
    min-height:0;
}

.kiosk-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:clamp(12px, 1.6vw, 18px);
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
}
.kiosk-card.is-warn{
    border-color:var(--warning);
    background:var(--warning-soft);
}

.kiosk-card-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:10px;
}
.kiosk-card-title{
    font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text-secondary); font-weight:700;
}
.kiosk-card.is-warn .kiosk-card-title{ color:var(--warning); }
.kiosk-tag{
    font-size:12px; font-weight:600; color:var(--accent);
    background:var(--accent-soft); padding:2px 9px; border-radius:20px;
}

.kiosk-row{
    display:flex; align-items:center; gap:11px;
    padding:7px 0;
    border-bottom:1px solid var(--border);
    font-size:clamp(14px, 1.7vw, 17px);
    color:var(--text);
    min-width:0;
}
.kiosk-row:last-child{ border-bottom:0; }
.kiosk-row.is-empty{ color:var(--text-muted); border-bottom:0; }
.kiosk-row.is-dim .kiosk-main{ color:var(--text-muted); text-decoration:line-through; }

/* Freitext-Störungsmeldung (VGN) unter einer Abfahrtszeile */
.kiosk-note{
    font-size:clamp(11px, 1.3vw, 13px);
    color:var(--warning);
    padding:0 0 6px 18px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Haltestellen-Zwischenüberschrift in der Abfahrten-Kachel */
.kiosk-subhead{
    font-size:clamp(11px, 1.3vw, 13px);
    font-weight:700;
    color:var(--text-secondary);
    letter-spacing:.02em;
    padding:8px 0 3px;
}
.kiosk-subhead:first-child{ padding-top:0; }

.kiosk-lead{
    flex:none; min-width:46px; font-weight:700;
    font-variant-numeric:tabular-nums; color:var(--text);
}
.kiosk-bullet{
    flex:none; width:7px; height:7px; border-radius:50%;
    background:var(--text-muted);
}
.kiosk-bullet.is-mark{ background:var(--accent); }
.kiosk-main{
    flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kiosk-meta{
    flex:none; color:var(--text-secondary);
    font-size:clamp(12px, 1.4vw, 14px); font-variant-numeric:tabular-nums;
}
.kiosk-meta.is-late{ color:var(--warning); }
.kiosk-meta.is-ok{ color:var(--success); }
.kiosk-avatar{
    flex:none; width:22px; height:22px; border-radius:50%;
    display:grid; place-items:center;
    background:var(--accent-soft); color:var(--accent);
    font-size:11px; font-weight:700;
}
.kiosk-foot-right .kiosk-avatar + .kiosk-avatar{ margin-left:-6px; }

.kiosk-progress{
    height:5px; background:var(--surface-2, var(--bg));
    border-radius:3px; overflow:hidden; margin-top:auto;
}
.kiosk-progress i{ display:block; height:100%; background:var(--accent); border-radius:3px; }
.kiosk-count{
    display:flex; justify-content:space-between;
    font-size:12px; color:var(--text-muted); margin-top:8px;
}

.kiosk-meal{ display:flex; flex-direction:column; gap:8px; flex:1; }
.kiosk-meal-today{ background:var(--surface-2, var(--bg)); border-radius:12px; padding:12px 14px; }
.kiosk-meal-k{ font-size:12px; color:var(--text-muted); margin-bottom:3px; }
.kiosk-meal-v{ font-size:clamp(16px, 2vw, 19px); font-weight:600; }
.kiosk-meal-next{ display:flex; justify-content:space-between; font-size:14px; color:var(--text-muted); }
.kiosk-meal-next b{ color:var(--text); font-weight:500; }

.kiosk-warn-text{ font-size:clamp(14px, 1.8vw, 17px); line-height:1.4; color:var(--text); }
.kiosk-warn-when{ color:var(--text-secondary); font-size:13px; margin-top:8px; }

/* -- Fusszeile -- */
.kiosk-foot{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:10px; border-top:1px solid var(--border);
    color:var(--text-muted); font-size:13px;
}
.kiosk-foot-right{ display:flex; align-items:center; gap:10px; }
.kiosk-pill{
    background:var(--surface); border:1px solid var(--border);
    border-radius:20px; padding:4px 11px; color:var(--text-secondary);
}

/* -- Nachtmodus: nur die gedimmte Uhr -- */
.kiosk-night{ display:none; }
.kiosk.is-night{ justify-content:center; align-items:center; }
.kiosk.is-night > :not(.kiosk-night){ display:none; }
.kiosk.is-night .kiosk-night{
    display:flex; flex-direction:column; align-items:center; gap:8px;
}
.kiosk-night-time{
    font-family:var(--font-display); font-weight:200;
    font-size:clamp(80px, 16vw, 160px); line-height:1;
    color:var(--text-muted); font-variant-numeric:tabular-nums;
    letter-spacing:-.04em; opacity:.6;
}
.kiosk-night-date{ color:var(--text-muted); font-size:16px; opacity:.5; }

@media (max-width:820px){
    .kiosk-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ============================= */
/* FOTO-UNIVERSALEINGANG */
/* ============================= */

/* <button> im Schnellzugriff-Sheet auf dieselbe Optik wie die <a>-Einträge */
button.fab-sheet-item{
    width:100%;
    background:none;
    border:none;
    cursor:pointer;
    font-family:var(--font-body);
    text-align:left;
}

.foto-eingang-modal .modal-content{
    max-width:380px;
    display:flex;
    flex-direction:column;
    gap:6px;
    text-align:center;
}

.foto-eingang-status{
    color:var(--text-secondary);
    font-size:var(--fs-sm);
    margin:4px 0;
}

.foto-eingang-headline{
    font-family:var(--font-display);
    font-weight:700;
    color:var(--text);
    font-size:var(--fs-lg);
}

.foto-eingang-sub{
    color:var(--text-secondary);
    font-size:var(--fs-sm);
}

.foto-eingang-spinner{
    width:34px;
    height:34px;
    margin:14px auto 4px;
    border-radius:50%;
    border:3px solid var(--border);
    border-top-color:var(--accent);
    animation:foto-eingang-spin 0.9s linear infinite;
}

@keyframes foto-eingang-spin{
    to{ transform:rotate(360deg); }
}

.foto-eingang-options{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:10px 0 4px;
}

.foto-eingang-option{
    width:100%;
    padding:12px 14px;
    border-radius:var(--radius);
    border:1px solid var(--border-strong);
    background:var(--surface-2);
    color:var(--text);
    font-family:var(--font-body);
    font-size:var(--fs-sm);
    font-weight:600;
    cursor:pointer;
}

.foto-eingang-option:active{
    transform:scale(0.98);
}

.foto-eingang-actions{
    justify-content:center;
    flex-wrap:wrap;
}

.foto-eingang-btn{
    padding:10px 16px;
    border-radius:var(--radius);
    border:1px solid var(--border-strong);
    background:var(--surface-2);
    color:var(--text);
    font-family:var(--font-body);
    font-size:var(--fs-sm);
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    display:inline-block;
}

.foto-eingang-btn.primary{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--bg);
}

/* ============================= */
/* AUTH / ONBOARDING             */
/* ============================= */
/* Login, Registrierung, erzwungener Passwortwechsel, 2FA - laufen ueber
   templates/auth_base.html mit denselben Tokens/Fonts wie der Rest der App. */

.auth-body{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    min-height:100dvh;
    padding:24px;
    padding-top:calc(24px + var(--safe-top));
    padding-bottom:calc(24px + var(--safe-bottom));
}

.auth-card{
    width:100%;
    max-width:380px;
    display:flex;
    flex-direction:column;
    gap:16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:28px 24px;
    box-sizing:border-box;
}

.auth-title{
    margin:0;
    font-family:var(--font-display);
    font-size:var(--fs-title);
    color:var(--accent);
}

.auth-card form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="number"],
.auth-card input:not([type]){
    width:100%;
    box-sizing:border-box;
    background:var(--surface-2);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:12px 14px;
    font-family:var(--font-body);
    font-size:16px;
}

.auth-card input:focus{
    outline:none;
    border-color:var(--accent);
}

.auth-card button{
    width:100%;
    padding:12px 16px;
    border:1px solid var(--accent);
    border-radius:var(--radius-sm);
    background:var(--accent);
    color:var(--bg);
    font-family:var(--font-body);
    font-weight:600;
    font-size:15px;
    cursor:pointer;
}

.auth-card button:hover{
    opacity:0.9;
}

.auth-text{
    margin:0;
    color:var(--text-secondary);
    font-size:var(--fs-sm);
    line-height:1.5;
}

.auth-error{
    margin:0;
    padding:10px 12px;
    border-radius:var(--radius-sm);
    background:var(--danger-soft);
    color:var(--danger);
    font-size:var(--fs-sm);
    font-weight:600;
}

.auth-qr{
    display:flex;
    justify-content:center;
    padding:16px;
    background:#fff;
    border-radius:var(--radius-sm);
}

.auth-qr img,
.auth-qr canvas{
    display:block;
}

/* ============================= */
/* TOAST + CONFIRM (static/js/ui.js) */
/* ============================= */
/* App-weiter Ersatz fuer window.alert / window.confirm. */

.ui-toast-wrap{
    position:fixed;
    left:0;
    right:0;
    bottom:calc(92px + var(--safe-bottom));
    z-index:11000;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:0 16px;
    pointer-events:none;
}

.ui-toast{
    max-width:min(420px, 100%);
    padding:12px 18px;
    border-radius:var(--radius);
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    font-size:var(--fs-sm);
    line-height:1.4;
    text-align:center;
    box-shadow:0 8px 24px rgba(0,0,0,0.25);
    opacity:0;
    transform:translateY(12px);
    transition:opacity .25s ease, transform .25s ease;
}

.ui-toast.is-visible{
    opacity:1;
    transform:translateY(0);
}

.ui-toast--success{
    border-color:var(--success);
    color:var(--success);
}

.ui-toast--error{
    border-color:var(--danger);
    color:var(--danger);
}

.ui-confirm-text{
    margin:0;
    font-size:var(--fs-body);
    color:var(--text);
    line-height:1.45;
}

@media (prefers-reduced-motion: reduce){
    .ui-toast{ transition:none; }
}

/* ============================= */
/* ADMIN: VORRATS-TABELLE        */
/* ============================= */
/* Zuvor ein <style>-Block in templates/admin/pantry.html. */

.pantry-table-wrap{
    overflow-x:auto;
}

.pantry-table{
    width:100%;
    border-collapse:collapse;
    font-size:var(--fs-sm);
}

.pantry-table th,
.pantry-table td{
    text-align:left;
    padding:8px 10px;
    vertical-align:top;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}

.pantry-table th{
    font-weight:600;
    color:var(--text-secondary);
}

.pantry-actions-cell{
    display:flex;
    gap:6px;
}

.pantry-actions-cell .secondary-button{
    padding:4px 10px;
}

.pantry-conf-sicher{
    font-weight:600;
}

.pantry-conf-unbekannt{
    color:var(--text-muted);
}


/* ============================= */
/* KOCHMODUS                      */
/* ============================= */

/* Einstiegs-Buttons auf der Detailseite (oberhalb der Zutatenliste) */
.cookmode-entry{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:18px;
}

.recipe-detail .cookmode-entry-btn{
    width:100%;
    padding:12px 14px;
    font-size:var(--fs-body);
    font-weight:700;
    font-family:var(--font-body);
    border:1px solid var(--accent);
    border-radius:var(--radius);
    background:var(--accent-soft);
    color:var(--accent);
    cursor:pointer;
}

.recipe-detail .cookmode-entry-btn--resume{
    border-style:dashed;
    font-weight:600;
}

/* Vollbild-Overlay - position:fixed statt requestFullscreen() (iOS) */
.cookmode{
    position:fixed;
    inset:0;
    z-index:4000;
    background:var(--bg);
    color:var(--text);
    display:flex;
    flex-direction:column;
}

.cookmode[hidden]{
    display:none;
}

html.cookmode-active,
html.cookmode-active body{
    overflow:hidden;
}

.cookmode-inner{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:560px;
    margin:0 auto;
    padding:
        calc(12px + var(--safe-top))
        20px
        calc(12px + var(--safe-bottom));
    box-sizing:border-box;
}

.cookmode-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-shrink:0;
}

.cookmode-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:var(--fs-sm);
    font-weight:600;
    border:1px solid var(--border-strong);
    background:var(--surface-2);
    color:var(--text-secondary);
}

.cookmode-pill.is-active{
    border-color:var(--success);
    background:var(--success-soft);
    color:var(--success);
}

.cookmode-pill.is-inactive{
    border-color:var(--border-strong);
    background:var(--surface-2);
    color:var(--text-muted);
}

.cookmode-top-close{
    flex-shrink:0;
    padding:8px 14px;
    font-size:var(--fs-sm);
    font-weight:700;
    font-family:var(--font-body);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-2);
    color:var(--text);
    cursor:pointer;
}

.cookmode-progress{
    display:flex;
    gap:4px;
    margin-top:16px;
    flex-shrink:0;
}

.cookmode-progress-seg{
    flex:1;
    height:4px;
    border-radius:2px;
    background:var(--border);
    transition:background-color 0.25s ease;
}

.cookmode-progress-seg.is-done{
    background:var(--accent);
}

.cookmode-progress-seg.is-current{
    background:var(--accent);
}

.cookmode-counter{
    margin-top:14px;
    font-size:var(--fs-sm);
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--text-muted);
    flex-shrink:0;
}

.cookmode-step{
    flex:1;
    min-height:0;
    overflow-y:auto;
    margin-top:10px;
    font-family:var(--font-body);
    font-size:29px;
    line-height:1.32;
    color:var(--text);
    -webkit-overflow-scrolling:touch;
}

.cookmode-step:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px;
}

.cookmode-step--enter{
    animation:cookmode-step-in 0.22s ease;
}

@keyframes cookmode-step-in{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
}

.cookmode-hint{
    margin-top:12px;
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    flex-shrink:0;
}

.cookmode-hint[hidden]{
    display:none;
}

.cookmode-actions{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:16px;
    flex-shrink:0;
}

.cookmode-round{
    flex-shrink:0;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    border:1px solid var(--border-strong);
    border-radius:50%;
    background:var(--surface-2);
    color:var(--text);
    cursor:pointer;
}

.cookmode-round:disabled{
    opacity:0.35;
    cursor:default;
}

.cookmode-next{
    flex:1;
    height:52px;
    font-size:var(--fs-lg);
    font-weight:700;
    font-family:var(--font-body);
    border:1px solid var(--accent);
    border-radius:var(--radius);
    background:var(--accent);
    color:var(--bg);
    cursor:pointer;
}

.cookmode-next--done{
    border-color:var(--success);
    background:var(--success);
}

/* Zutaten-Bottom-Sheet über dem Kochmodus */
.cookmode-sheet-backdrop{
    position:absolute;
    inset:0;
    z-index:4100;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:rgba(0,0,0,0.5);
}

.cookmode-sheet-backdrop[hidden]{
    display:none;
}

.cookmode-sheet{
    width:100%;
    max-width:560px;
    max-height:70vh;
    overflow-y:auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-bottom:none;
    border-radius:20px 20px 0 0;
    padding:18px 20px calc(20px + var(--safe-bottom));
    box-shadow:0 -12px 28px rgba(0,0,0,0.35);
    animation:cookmode-sheet-in 0.22s ease;
}

.cookmode-sheet:focus{
    outline:none;
}

@keyframes cookmode-sheet-in{
    from{ transform:translateY(100%); }
    to{ transform:translateY(0); }
}

.cookmode-sheet-title{
    margin:0 0 12px;
    font-family:var(--font-display);
    font-size:var(--fs-lg);
    font-weight:700;
    color:var(--accent);
}

.cookmode-sheet-list{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.cookmode-sheet-item{
    padding:10px 2px;
    font-size:var(--fs-body);
    color:var(--text);
    border-bottom:1px solid var(--border);
}

.cookmode-sheet-item:last-child{
    border-bottom:none;
}

.cookmode :focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

/* ---- Erweiterung: parallele Timer ---- */

/* Detailseite: sticky-Leiste oben. Overlay: eigener Block im Kopfbereich.
   Beide bleiben unsichtbar, solange kein Timer läuft. */
.cook-timers{
    position:sticky;
    top:8px;
    z-index:30;
    margin:14px 0 0;
}
.cook-timers:empty,
.cookmode-timers:empty{
    display:none;
}
.cookmode-timers{
    flex-shrink:0;
    margin-top:12px;
}

.cook-timer-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.cook-timer{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    background:var(--surface-2);
}

.cook-timer-time{
    min-width:4.5ch;
    font-weight:700;
    font-size:var(--fs-body);
    font-variant-numeric:tabular-nums;
    color:var(--text);
}

.cook-timer-label{
    flex:1;
    min-width:0;
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.cook-timer-btn{
    flex-shrink:0;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    border:1px solid var(--border-strong);
    border-radius:50%;
    background:var(--surface);
    color:var(--text);
    cursor:pointer;
}

.cook-timer.is-paused{
    border-style:dashed;
}
.cook-timer.is-paused .cook-timer-time{
    color:var(--text-muted);
}

.cook-timer.is-expired{
    border-color:var(--danger);
    animation:cook-timer-blink 1s steps(1, end) infinite;
}
.cook-timer.is-expired .cook-timer-time{
    color:var(--danger);
}

@keyframes cook-timer-blink{
    0%,100%{ background:var(--surface-2); }
    50%{ background:var(--danger-soft); }
}

/* "Timer 20:00"-Knopf je Schritt (Detailseite in der Schrittzeile, Overlay) */
.cook-timer-add{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:8px;
    padding:6px 12px;
    font-size:var(--fs-sm);
    font-weight:600;
    font-family:var(--font-body);
    border:1px solid var(--border-strong);
    border-radius:999px;
    background:var(--surface-2);
    color:var(--text);
    cursor:pointer;
}

#steps > li.has-cook-timer{
    flex-wrap:wrap;
}
#steps > li.has-cook-timer .cook-timer-add{
    flex-basis:100%;
    margin-top:10px;
}

.cookmode-timer-add{
    align-self:flex-start;
    margin-top:12px;
    flex-shrink:0;
}
.cookmode-timer-add[hidden]{
    display:none;
}

/* ---- Erweiterung: Zutaten abhaken ---- */

#ingredients > li .cook-ing-check{
    flex-shrink:0;
    width:20px;
    height:20px;
    margin-right:10px;
    accent-color:var(--accent);
    cursor:pointer;
}
#ingredients > li.cook-ing-done .ingredient-text{
    text-decoration:line-through;
    color:var(--text-muted);
}

/* ---- Erweiterung: Vollbild - Stage + Tap-Zonen + "3/8" ---- */

.cookmode-stage{
    position:relative;
    flex:1;
    min-height:0;
    display:flex;
}

.cookmode-tapzone{
    position:absolute;
    top:0;
    bottom:0;
    width:26%;
    z-index:2;
    background:transparent;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.cookmode-tapzone--prev{ left:0; }
.cookmode-tapzone--next{ right:0; }
.cookmode-tapzone:active{
    background:var(--accent-soft);
}

.cookmode-frac{
    margin-top:8px;
    font-size:var(--fs-sm);
    font-weight:700;
    font-variant-numeric:tabular-nums;
    color:var(--text-muted);
    flex-shrink:0;
}

@media (prefers-reduced-motion: reduce){
    .cookmode-step--enter{ animation:none; }
    .cookmode-sheet{ animation:none; }
    .cookmode-progress-seg{ transition:none; }
    .cook-timer.is-expired{
        animation:none;
        border-color:var(--danger);
        background:var(--danger-soft);
    }
}


/* ============================= */
/* ROUTE-A WIDGET ("Ampel-Band") */
/* ============================= */

.route-widget .title{
    /* Bewusst zurueckhaltend: die Zeit im Band ist der Blickfang, nicht der
       Kacheltitel (siehe /routea-Redesign). */
    font-size:12px;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--text-muted);
    border-bottom:none;
    padding-bottom:0;
    margin:0 0 12px;
}

.route-band{
    --state:var(--text-muted);
    --state-soft:rgba(92,114,102,0.12);
    --state-line:rgba(92,114,102,0.26);

    position:relative;
    overflow:hidden;
    padding:15px 16px 18px;
    background:var(--state-soft);
    border:1px solid var(--state-line);
    border-left:3px solid var(--state);
    border-radius:var(--radius);
}

.route-band--upcoming{
    --state:var(--success);
    --state-soft:var(--success-soft);
    --state-line:rgba(127,216,168,0.30);
}

.route-band--now{
    --state:var(--accent-fab);
    --state-soft:rgba(209,122,74,0.16);
    --state-line:rgba(209,122,74,0.34);
}

.route-band--late{
    --state:var(--danger);
    --state-soft:var(--danger-soft);
    --state-line:rgba(229,115,115,0.32);
}

.route-band--inactive{
    --state:var(--text-muted);
    --state-soft:rgba(92,114,102,0.12);
    --state-line:rgba(92,114,102,0.26);
}

.route-band-line{
    display:flex;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
    line-height:1.05;
}

.route-band-num{
    font-size:46px;
    font-weight:700;
    letter-spacing:-0.02em;
    color:var(--text);
    font-variant-numeric:tabular-nums;
}

.route-band--now .route-band-num,
.route-band--inactive .route-band-num{
    font-size:33px;
}

.route-band--inactive .route-band-num{
    color:var(--text-muted);
    font-weight:600;
}

.route-band-unit{
    font-size:16px;
    font-weight:500;
    color:var(--text-secondary);
}

.route-band-unit:empty{
    display:none;
}

.route-band-sub{
    margin-left:auto;
    align-self:center;
    font-size:13px;
    color:var(--text-secondary);
}

.route-band-progress{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background:var(--state-soft);
}

.route-band-progress > i{
    display:block;
    height:100%;
    width:0;
    background:var(--state);
    border-radius:0 3px 3px 0;
    transition:width 0.4s ease;
}

.route-band--now .route-band-progress > i{
    animation:route-band-pulse 1.5s ease-in-out infinite;
}

@keyframes route-band-pulse{
    0%,100%{ opacity:1; }
    50%{ opacity:0.5; }
}

@media (prefers-reduced-motion: reduce){
    .route-band-progress > i{ transition:none; }
    .route-band--now .route-band-progress > i{ animation:none; }
}

/* ============================= */
/* CHAT (feature "chat")         */
/* ============================= */
/* Nur Theme-Variablen, keine festen Farben - erbt alle 10 Themes. */

.chat-app{
    display:flex;
    flex-direction:column;
    /* Topbar (~sticky) + Navbar (fixed) aus dem sichtbaren Bereich rechnen. */
    height:calc(100dvh - 150px - var(--safe-top) - var(--safe-bottom));
    min-height:320px;
    gap:8px;
}

.chat-log{
    flex:1 1 auto;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:4px 2px;
}

.chat-load-older{
    align-self:center;
    background:var(--surface-2);
    color:var(--text-secondary);
    border:1px solid var(--border);
    border-radius:999px;
    padding:5px 14px;
    font-size:13px;
    margin-bottom:4px;
}

.chat-empty{
    margin:auto;
    color:var(--text-muted);
    font-size:var(--fs-sm);
}

.chat-msg{
    display:flex;
    max-width:82%;
}
.chat-msg-mine{ align-self:flex-end; justify-content:flex-end; }
.chat-msg-theirs{ align-self:flex-start; }

.chat-msg-system{
    align-self:center;
    max-width:90%;
    text-align:center;
    color:var(--text-muted);
    font-size:13px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:4px 12px;
}

.chat-bubble{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:8px 12px 6px;
    font-size:var(--fs-sm);
    line-height:1.35;
    color:var(--text);
    word-break:break-word;
}
.chat-msg-mine .chat-bubble{
    background:var(--accent-soft);
    border-color:transparent;
}

.chat-msg-pending .chat-bubble{ opacity:0.6; }
.chat-msg-failed .chat-bubble{ border-color:var(--danger); }

.chat-photo{
    display:block;
    max-width:220px;
    max-height:260px;
    border-radius:var(--radius-sm);
    cursor:pointer;
}

/* Vollbild-Ansicht eines Chat-Fotos (Muster wie .note-lightbox-content) */
.chat-lightbox-content{
    background:none;
    border:none;
    box-shadow:none;
    padding:0;
    max-width:92vw;
}
.chat-lightbox-content img{
    max-width:92vw;
    max-height:85vh;
    border-radius:var(--radius);
    display:block;
    margin:0 auto;
}

.chat-time{
    margin-top:3px;
    font-size:11px;
    color:var(--text-muted);
    text-align:right;
}

.chat-composer{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 4px calc(4px + var(--safe-bottom));
    border-top:1px solid var(--border);
    background:var(--bg);
}

.chat-input{
    flex:1 1 auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:999px;
    padding:10px 14px;
    color:var(--text);
    font-size:var(--fs-sm);
}
.chat-input:focus{ outline:none; border-color:var(--accent); }

.chat-icon-btn{
    flex:0 0 auto;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-secondary);
}
.chat-icon-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chat-send{ background:var(--accent); border-color:var(--accent); color:var(--bg); }

/* Sheets (Kontextmenue + KI-Vorschlag) */
.chat-sheet-backdrop{
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(0,0,0,0.4);
    display:flex;
    align-items:flex-end;
    justify-content:center;
}
.chat-sheet{
    width:100%;
    max-width:520px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:12px 14px calc(14px + var(--safe-bottom));
    display:flex;
    flex-direction:column;
    gap:8px;
}
.chat-sheet-item{
    width:100%;
    text-align:left;
    padding:12px 10px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    color:var(--text);
    font-size:var(--fs-sm);
}
.chat-sheet-danger{ color:var(--danger); }

.chat-ki-sheet{ gap:10px; }
.chat-ki-title{ font-weight:700; font-size:16px; color:var(--text); }
.chat-ki-status{ color:var(--text-secondary); font-size:var(--fs-sm); }
.chat-ki-module{
    display:inline-block;
    background:var(--accent-soft);
    color:var(--text);
    border-radius:var(--radius-sm);
    padding:3px 10px;
    font-size:13px;
    font-weight:600;
    margin-bottom:6px;
}
.chat-ki-field{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-bottom:8px;
}
.chat-ki-field-label{ font-size:12px; color:var(--text-muted); }
.chat-ki-unsicher .chat-ki-field-label{ color:var(--warning); font-weight:600; }
.chat-ki-input{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:8px 10px;
    color:var(--text);
    font-size:var(--fs-sm);
}
.chat-ki-unsicher .chat-ki-input{
    border-color:var(--warning);
    background:var(--warning-soft);
}
.chat-ki-hint{ font-size:12px; color:var(--warning); margin:0; }
.chat-ki-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    margin-top:4px;
}

/* KI-Fallback: app-eigener Termin ohne externen Sync (calendar.js) */
.calendar-local-tag{
    display:inline-block;
    margin-left:8px;
    padding:1px 7px;
    border-radius:var(--radius-sm);
    font-size:11px;
    color:var(--text-muted);
    background:var(--surface-2);
    border:1px solid var(--border);
    white-space:nowrap;
}

#chat-link{ text-decoration:none; }

/* .hidden (weiter oben in dieser Datei) hat dieselbe Spezifitaet wie die
   .chat-*-Regeln hier - da diese spaeter stehen, wuerden sie sonst gewinnen
   und die per JS ge-.hidden-ten Sheets/Buttons blieben sichtbar. Diese
   Regeln stellen das wieder her (gleiche Spezifitaet, aber am Dateiende). */
.chat-sheet-backdrop.hidden{ display:none; }
.chat-app .hidden,
.chat-sheet-backdrop .hidden{ display:none; }


/* =========================================================================
   Preistracker – Aufbau wie das Rechnungen-/Garantien-Modul.
   Widget nutzt die geteilten .books-toolbar / .books-list / .filter-* Klassen;
   hier stehen nur die Anlege-/Detailseite und der Verlaufs-Chart.
   Chart-Linien tragen ihre Farbe inline (6er-Palette in preistracker.js).
   ========================================================================= */

/* .dashboard bringt schon display:flex/column/gap mit – hier nur der
   dynamisch befüllte Detail-Container. */
#preistracker-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Formular – gleiche Maße wie .invoice-form / .invoice-field */

.preistracker-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preistracker-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.preistracker-field input[type="text"],
.preistracker-field input[type="url"],
.preistracker-field input[type="date"],
.preistracker-field input[type="number"] {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-body);
    box-sizing: border-box;
    width: 100%;
}

.preistracker-form-status {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 14px;
    font-weight: 600;
}

.preistracker-form-status[hidden] {
    display: none;
}

.preistracker-section-title {
    margin: 6px 0 0;
    font-size: var(--fs-body);
    color: var(--text);
}

.pt-danger {
    color: var(--danger);
    border-color: var(--danger-soft);
}

/* ---- Verlaufs-Chart ---------------------------------------------------- */

.pt-chart {
    margin-bottom: 4px;
}

.pt-chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.pt-chart-axis {
    stroke: var(--border);
    stroke-width: 1;
}

.pt-chart-axislabels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.pt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.pt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pt-legend-item i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

/* ---- Kennzahlen ------------------------------------------------------ */

.pt-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pt-stat {
    flex: 1 1 auto;
    min-width: 84px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pt-stat.is-good {
    background: var(--success-soft);
    border-color: var(--success);
}

.pt-stat-label {
    font-size: 11px;
    color: var(--text-muted);
}

.pt-stat-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ---- Preis erfassen ------------------------------------------------- */

.pt-capture-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pt-capture-row .preistracker-field {
    flex: 1 1 90px;
}

.pt-capture-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- Preispunkt-Tabelle ------------------------------------------- */

.pt-points {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pt-points th {
    text-align: left;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
}

.pt-points td {
    padding: 6px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.pt-point-del {
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.pt-point-del:hover { color: var(--danger); }


/* =========================================================================
   "Spiele"-Sammelwidget (Home) + Spider Solitaire
   -------------------------------------------------------------------------
   Ein Home-Widget "Spiele" mit einem Chip-Reiter je aktiviertem Spiel
   (Raetsel-Partial + Spider-Partial). Darunter das Spider-Brett auf /spider.
   Das Kartenpapier ist bewusst themenunabhaengig - eine Spielkarte ist ein
   physisches Objekt und sieht in hell wie dunkel gleich aus; die wenigen
   Farb-Literale unter .spider-page sind Absicht, kein vergessener Token.
   ========================================================================= */

/* -- Reiter-Leiste ------------------------------------------------------- */

.spiele-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    margin-bottom: var(--gap);
}

.spiele-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.spiele-chips::-webkit-scrollbar {
    display: none;
}

.spiele-chip {
    flex: 0 0 auto;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13.5px;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.spiele-chip.active {
    background: var(--accent);
    color: var(--bg);
}

/* -- Spider-Reiter: die drei Karten ----------------------------------- */

.spider-wblock {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: var(--gap);
}

.spider-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.spider-card-title {
    font-size: var(--fs-lg);
    font-weight: 700;
}

.spider-diff-chip {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.spider-w-stats,
.spider-w-statgrid {
    display: grid;
    gap: 6px;
}

.spider-w-stats {
    grid-template-columns: repeat(3, 1fr);
}

.spider-w-statgrid {
    grid-template-columns: repeat(2, 1fr);
}

.spider-w-stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 6px;
    text-align: center;
}

.spider-w-stat .k {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.spider-w-stat .v {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.spider-w-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.spider-w-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.spider-w-hint {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.spider-w-cta {
    width: 100%;
    margin-top: 14px;
}

.spider-w-divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0 12px;
}

.spider-w-ranking-head {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.spider-w-rank-item {
    display: grid;
    grid-template-columns: 20px 1fr auto auto;
    align-items: center;
    gap: 10px;
}

.spider-w-rank {
    color: var(--text-muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.spider-w-rank-name {
    font-weight: 600;
    color: var(--text);
}

.spider-w-rank-wins {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.spider-w-rank-time {
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* -- Spider-Brett auf /spider --------------------------------------- */

.spider-page {
    /* Kartenhöhe skaliert mit der Breite; die "peek"-Werte sind der sichtbare
       Streifen einer überlappten Karte (Rang oben links, Farbe oben rechts). */
    --sp-card-h: clamp(74px, 17vw, 104px);
    --sp-down-peek: 24px;
    --sp-up-peek: 34px;

    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Brett füllt die Seite, statt oben zu kleben (Topbar + Bottom-Nav grob
       abgezogen; der Rest verteilt sich über flex:1 auf Board/Tableau). */
    min-height: calc(100vh - 210px);
    min-height: calc(100dvh - 210px);
}

.spider-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.spider-topmeta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.spider-meta {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.spider-meta b {
    color: var(--text);
}

.spider-restart {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.spider-board {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: auto;
}

.spider-board-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}

.spider-foundations {
    display: flex;
    gap: 4px;
}

.spider-found {
    width: 26px;
    height: 36px;
    border-radius: 4px;
    border: 1px dashed var(--border-strong);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 13px;
}

.spider-found.done {
    border-style: solid;
    border-color: var(--success);
    color: var(--success);
    background: var(--success-soft);
}

.spider-stock {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 2px;
}

.spider-stock-cards {
    width: 26px;
    height: 36px;
    border-radius: 4px;
    background: var(--sp-back);
    border: 1px solid var(--sp-edge);
    box-shadow: 2px 0 0 var(--sp-back), 3px 0 0 var(--sp-edge),
        5px 0 0 var(--sp-back), 6px 0 0 var(--sp-edge);
}

.spider-stock-n {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.spider-stock.empty {
    opacity: 0.4;
    cursor: default;
}

.spider-tableau {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(10, minmax(28px, 92px));
    justify-content: center;
    gap: 3px;
    align-items: start;
    align-content: start;
    min-width: min-content;
}

.spider-col {
    display: flex;
    flex-direction: column;
    min-height: var(--sp-card-h);
}

.spider-col.empty {
    border: 1px dashed var(--border-strong);
    border-radius: 6px;
    min-height: var(--sp-card-h);
}

.spider-card {
    position: relative;
    height: var(--sp-card-h);
    border-radius: 6px;
}

.spider-card.down {
    background:
        repeating-linear-gradient(45deg, var(--sp-back-line) 0 3px, transparent 3px 6px),
        repeating-linear-gradient(-45deg, var(--sp-back-line) 0 3px, transparent 3px 6px),
        var(--sp-back);
    border: 1px solid var(--sp-edge);
}

.spider-card.up {
    background: var(--sp-paper);
    border: 1px solid var(--sp-up-border);
}

.spider-col .spider-card:first-child {
    margin-top: 0;
}

.spider-card.down + .spider-card {
    margin-top: calc(var(--sp-down-peek) - var(--sp-card-h));
}

.spider-card.up + .spider-card {
    margin-top: calc(var(--sp-up-peek) - var(--sp-card-h));
}

/* Rang oben links, Farbe oben rechts – beides bleibt im sichtbaren Streifen
   einer überlappten Karte lesbar. */
.spider-card .cr {
    position: absolute;
    top: 4px;
    left: 5px;
    font-size: clamp(12px, 3vw, 15px);
    font-weight: 700;
    line-height: 1;
    color: var(--sp-ink);
    font-variant-numeric: tabular-nums;
}

.spider-card .cp {
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: clamp(11px, 2.8vw, 14px);
    line-height: 1;
    color: var(--sp-ink);
}

.spider-card.red .cr,
.spider-card.red .cp {
    color: var(--sp-red);
}

.spider-card.sel {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    z-index: 3;
}

.spider-card.hintsrc {
    outline: 2px dashed var(--warning);
    outline-offset: 0;
}

.spider-footbar {
    display: flex;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.spider-footbar button {
    flex: 1;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    padding: 11px 8px;
    border-radius: var(--radius);
    cursor: pointer;
}

.spider-footbar button.accent {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.spider-footbar button.warn {
    background: var(--warning-soft);
    border-color: var(--warning);
    color: var(--warning);
}

.spider-footbar button:disabled {
    opacity: 0.4;
    cursor: default;
}

.spider-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: grid;
    place-items: center;
    padding: 24px;
    z-index: 40;
}

.spider-overlay-card {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spider-overlay-title {
    font-size: 22px;
    font-weight: 700;
}

.spider-overlay-sub {
    color: var(--text-secondary);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

.spider-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 999px;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 50;
    max-width: 80vw;
    text-align: center;
}

.spider-toast.show {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .spider-card {
        transition: margin-top 0.12s ease, transform 0.12s ease;
    }

    .spider-card.sel {
        transform: translateY(-4px);
    }

    .spider-card.dealt {
        animation: spider-drop 0.18s ease both;
    }

    @keyframes spider-drop {
        from {
            transform: translateY(-14px);
            opacity: 0.35;
        }
    }
}


/* =========================================================================
   Weitere "Spiele"-Reiter: Sudoku, Wo liegt …?, Vier gewinnt, Kniffel-Block,
   Schiffe versenken. Gemeinsame .gm-* Klassen für die Tagesduell-Widgets
   (Status / Duell / Rangliste / Gewinn-Overlay).
   Spielsteine nutzen bewusst --warning / --info als kontrastreiche, in jedem
   Theme vorhandene Farben (keine semantische Bedeutung).
   ========================================================================= */

/* ---- Gemeinsame Widget-Bausteine ---------------------------------- */

.gm-status {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gm-status-text {
    color: var(--text);
    font-weight: 600;
}

.gm-status-sub {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 400;
}

.gm-link {
    flex-shrink: 0;
    padding: 8px 14px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

.gm-duel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    min-height: 24px;
}

.gm-duel-empty {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.gm-duel-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.gm-duel-name {
    font-weight: 600;
    color: var(--text);
}

.gm-duel-prog {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.gm-duel-side.winner .gm-duel-name {
    color: var(--success);
}

.gm-duel-vs {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.gm-rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gm-rank {
    flex-shrink: 0;
    width: 24px;
    color: var(--text-muted);
    font-weight: 700;
    text-align: center;
}

.gm-rank-name {
    flex: 1;
    font-weight: 600;
    color: var(--text);
}

.gm-rank-meta {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.gm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: grid;
    place-items: center;
    padding: 24px;
    z-index: 40;
}

.gm-overlay-card {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gm-overlay-title {
    font-size: 22px;
    font-weight: 700;
}

.gm-overlay-sub {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Widget-Karten für die asynchronen Spiele */
.vg-w-card,
.kniffel-w-card,
.schiffe-w-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vg-w-new,
.kniffel-w-new,
.schiffe-w-new {
    width: 100%;
    display: flex;
    justify-content: flex-end;  /* „Neues Spiel"-Button hängt rechts */
}

/* ---- Sudoku ------------------------------------------------------- */

.sudoku-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sudoku-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.sudoku-topmeta {
    display: flex;
    gap: 12px;
}

.sudoku-meta {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.sudoku-meta b {
    color: var(--text);
}

.sudoku-board {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

.sudoku-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    width: min(100%, 460px);
    aspect-ratio: 1;
    border: 2px solid var(--border-strong);
    border-radius: 6px;
    overflow: hidden;
}

.sudoku-cell {
    border: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--accent);
    font-family: var(--font-body);
    font-size: clamp(16px, 4.5vw, 24px);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.sudoku-cell.given {
    color: var(--text);
    font-weight: 700;
    cursor: default;
    background: var(--surface);
}

.sudoku-cell.br {
    border-right: 2px solid var(--border-strong);
}

.sudoku-cell.bb {
    border-bottom: 2px solid var(--border-strong);
}

.sudoku-cell.peer {
    background: var(--surface-hover);
}

.sudoku-cell.sel {
    background: var(--accent-soft);
}

.sudoku-cell.same {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.sudoku-cell.error {
    color: var(--danger);
}

.sudoku-notes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    height: 100%;
}

.sudoku-notes-grid i {
    font-size: 9px;
    font-style: normal;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sudoku-pad {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    width: min(100%, 460px);
}

.sudoku-pad button {
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    padding: 12px 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.sudoku-pad button.sudoku-hint-btn {
    font-size: 13px;
}

.sudoku-pad #sudoku-notes.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.sudoku-toast,
.vg-toast,
.kniffel-toast,
.schiffe-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 999px;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 50;
    max-width: 80vw;
    text-align: center;
}

.sudoku-toast.show,
.vg-toast.show,
.kniffel-toast.show,
.schiffe-toast.show {
    opacity: 1;
}

/* ---- Wo liegt …? ------------------------------------------------- */

.woliegt-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.woliegt-topline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.woliegt-prompt {
    font-size: 16px;
}

.woliegt-prompt b {
    color: var(--accent);
}

.woliegt-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.woliegt-map {
    width: 100%;
    height: min(60vh, 520px);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
}

.woliegt-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.woliegt-result {
    font-size: 14px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.woliegt-bar .primary-button {
    flex-shrink: 0;
}

/* ---- Vier gewinnt ---------------------------------------------- */

.vg-page,
.schiffe-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.vg-topline,
.schiffe-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.vg-restart,
.schiffe-restart,
.kniffel-newbtn {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.vg-status,
.schiffe-status {
    font-weight: 600;
    text-align: center;
}

.vg-board-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px;
}

.vg-board {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    width: min(92vw, 440px);
}

.vg-col {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    gap: 4px;
    border: 0;
    background: transparent;
    padding: 6px 2px;
    cursor: default;
    border-radius: 8px;
}

.vg-board.vg-my-turn .vg-col {
    cursor: pointer;
}

.vg-board.vg-my-turn .vg-col:hover {
    background: var(--accent-soft);
}

.vg-cell {
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.vg-cell.vg-c1 {
    background: var(--warning);
    border-color: var(--warning);
}

.vg-cell.vg-c2 {
    background: var(--info);
    border-color: var(--info);
}

.vg-cell.me {
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* Widget: laufende Partien + Gegnerwahl */
.vg-w-link {
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.vg-w-newrow {
    flex: 1;  /* füllt die Widget-Zeile, damit das Dropdown breit wird */
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Vollbild: Partie-Umschalter + Gegner-Lobby (Vier gewinnt / Schiffe / Kniffel) */
.vg-switch,
.schiffe-switch {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Gegner-Dropdowns – exakt wie die restlichen App-Selects (.quick-add-select):
   eigener Chevron, keine native Optik. */
.vg-w-newrow select,
.vg-switch select,
.schiffe-switch select {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 36px 10px 14px;
    font-size: var(--fs-body);
    font-family: var(--font-body);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface) var(--icon-chevron) no-repeat right 12px center / 16px 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

/* Im Vollbild-Umschalter das Dropdown deckeln; im Widget füllt es die Zeile,
   damit der „Neues Spiel"-Button rechtsbündig sitzt. */
.vg-switch select,
.schiffe-switch select {
    max-width: 55vw;
}

.vg-w-newrow select:focus,
.vg-switch select:focus,
.schiffe-switch select:focus {
    border-color: var(--accent);
}

.vg-lobby {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: min(92vw, 440px);
    box-sizing: border-box;
}

.vg-lobby-title {
    font-weight: 600;
    color: var(--text-secondary);
}

.vg-lobby-opps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.vg-lobby-opps .primary-button {
    padding: 12px 22px;
}

/* ---- Kniffel-Block ------------------------------------------------ */

.kniffel-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kniffel-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kniffel-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kniffel-entry {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Eingabe-Palette: sechs Würfelseiten antippen */
.kniffel-faces {
    display: flex;
    gap: 6px;
}

.kniffel-faces button {
    width: 46px;
    height: 46px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-size: 26px;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
}

.kniffel-faces button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Der aktuelle Wurf: bestätigte Augen als entfernbare Chips */
.kniffel-roll {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    min-height: 46px;
}

.kniffel-die {
    width: 40px;
    height: 40px;
    border: 1px solid var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 24px;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
}

.kniffel-roll-count {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.kniffel-clear {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
}

.kniffel-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.kniffel-block {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    align-self: stretch;
}

.kn-h {
    background: var(--surface-2);
    padding: 8px 6px;
    font-weight: 700;
    font-size: 12px;
}

.kn-h.kn-player {
    text-align: center;
}

.kn-h.kn-player.me {
    color: var(--accent);
}

.kn-label {
    background: var(--surface);
    padding: 9px 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.kn-cell {
    background: var(--surface);
    padding: 9px 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    font-family: var(--font-body);
    color: var(--text);
    min-width: 46px;
}

.kn-cell.open {
    background: var(--accent-soft);
    color: var(--accent);
    cursor: pointer;
}

.kn-cell.filled.zero {
    color: var(--text-muted);
}

.kn-preview {
    font-size: 12px;
    opacity: 0.75;
}

.kn-cell.kn-sub,
.kn-label.kn-sub {
    background: var(--surface-2);
    font-weight: 700;
}

.kn-cell.kn-sub.big,
.kn-label.kn-sub.big {
    font-size: 15px;
    color: var(--accent);
}

.kniffel-empty {
    color: var(--text-muted);
    font-size: 14px;
}

.kniffel-w-board {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kniffel-w-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.kniffel-w-row b {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.kniffel-w-open {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---- Schiffe versenken ---------------------------------------- */

.schiffe-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.schiffe-place-tools {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.schiffe-place-tools button {
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Ablage-Leiste: die noch nicht platzierten Schiffe, per Drag aufs Feld */
.sv-tray {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
}

.sv-tray-empty {
    color: var(--success);
    font-size: 13px;
    font-weight: 600;
}

.sv-ship {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 4px;
    cursor: grab;
    touch-action: none;
}

.sv-ship.vert {
    flex-direction: column;
}

.sv-ship.active {
    background: var(--accent-soft);
    outline: 1px solid var(--accent);
}

.sv-ship i {
    display: block;
    width: 22px;
    height: 22px;
    background: var(--text-secondary);
    border-radius: 3px;
}

.sv-ghost {
    position: fixed;
    display: flex;
    gap: 2px;
    pointer-events: none;
    z-index: 60;
    opacity: 0.8;
}

.sv-ghost.vert {
    flex-direction: column;
}

.sv-ghost i {
    display: block;
    width: var(--sv-cell, 26px);
    height: var(--sv-cell, 26px);
    background: var(--text-secondary);
    border: 1px solid var(--sp-edge);
    border-radius: 3px;
}

.sv-hint {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}

.schiffe-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    width: min(92vw, 420px);
}

#schiffe-place-grid {
    touch-action: none;
}

.schiffe-cell.preview-ok {
    background: var(--success);
    border-color: var(--success);
}

.schiffe-cell.preview-bad {
    background: var(--danger);
    border-color: var(--danger);
}

.schiffe-grid-own .schiffe-cell.ship-active {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.schiffe-cell {
    aspect-ratio: 1;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 3px;
    padding: 0;
    cursor: default;
}

.schiffe-grid-own .schiffe-cell.ship {
    background: var(--text-secondary);
    border-color: var(--text-secondary);
}

.schiffe-grid-own .schiffe-cell.hit,
.schiffe-cell.hit {
    background: var(--danger);
    border-color: var(--danger);
}

.schiffe-cell.miss {
    background: var(--surface);
    position: relative;
}

.schiffe-cell.miss::after {
    content: "";
    position: absolute;
    inset: 40%;
    border-radius: 50%;
    background: var(--text-muted);
}

.schiffe-grid-enemy.active .schiffe-cell:not(.hit):not(.miss) {
    cursor: pointer;
}

.schiffe-grid-enemy.active .schiffe-cell:not(.hit):not(.miss):hover {
    background: var(--accent-soft);
}

.schiffe-boards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.schiffe-board-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.schiffe-board-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.schiffe-w-mini {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 1px;
}

.schiffe-w-mini i {
    aspect-ratio: 1;
    background: var(--surface-2);
    border-radius: 1px;
}

.schiffe-w-mini i.sh-ch {
    background: var(--danger);
}

.schiffe-w-mini i.sh-cm {
    background: var(--text-muted);
}

/* =========================================================================
   Weitere Spiele-Reiter: Nonogramm · Futoshiki · Reversi. Tokens/rgba only
   (der Kochmodus-CSS-Test verbietet ab hier eigene Hex-Farben). Vollbild-
   Muster wie .sudoku-page / .vg-page; Widgets nutzen die gemeinsamen
   .gm-* Bausteine.
   ========================================================================= */

/* ---- gemeinsame Kopfzeile der Tagesrätsel-Vollbildseiten --------------- */
.nono-page,
.futo-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nono-topline,
.futo-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.nono-topmeta,
.futo-topmeta {
    display: flex;
    gap: 12px;
}

.nono-meta,
.futo-meta {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.nono-meta b,
.futo-meta b {
    color: var(--text);
}

.nono-board,
.futo-board {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

.nono-hint,
.futo-hint {
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: center;
    max-width: 30rem;
}

/* ---- Nonogramm ------------------------------------------------------- */
.nono-grid-wrap {
    width: 100%;
    overflow-x: auto;
    display: flex;
    justify-content: center;
}

.nono-grid {
    display: grid;
    grid-template-columns: auto repeat(10, 1fr);
    gap: 2px;
    width: min(94vw, 380px);
    flex: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.nono-grid > div {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1.05;
}

.nono-corner {
    background: transparent;
}

.nono-cc {
    flex-direction: column;
    gap: 1px;
    color: var(--text-secondary);
    padding-bottom: 3px;
    min-height: 2.4em;
}

.nono-rc {
    justify-content: flex-end;
    gap: 3px;
    color: var(--text-secondary);
    padding-right: 4px;
    white-space: nowrap;
}

.nono-cc.done,
.nono-rc.done {
    color: var(--text-muted);
    opacity: 0.45;
}

.nono-cell {
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12px;
    padding: 0;
    cursor: pointer;
}

.nono-cell.fill {
    background: var(--text);
    border-color: var(--text);
}

.nono-grid.solved .nono-cell {
    cursor: default;
}

.nono-grid.solved .nono-cell.fill {
    background: var(--accent);
    border-color: var(--accent);
}

.nono-grid.solved .nono-cell.mark {
    color: transparent;
}

.nono-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---- Futoshiki --------------------------------------------------- */
.futo-grid {
    display: grid;
    grid-template-columns: 1fr 0.44fr 1fr 0.44fr 1fr 0.44fr 1fr 0.44fr 1fr;
    grid-template-rows: 1fr 0.44fr 1fr 0.44fr 1fr 0.44fr 1fr 0.44fr 1fr;
    width: min(88vw, 320px);
    aspect-ratio: 1;
    gap: 2px;
}

.futo-grid > * {
    display: flex;
    align-items: center;
    justify-content: center;
}

.futo-cell {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: 600;
    width: 100%;
    height: 100%;
    padding: 0;
    cursor: pointer;
}

.futo-cell.given {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--accent);
    cursor: default;
}

.futo-cell.bad {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.futo-op {
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.futo-op.bad {
    color: var(--danger);
}

/* ---- Reversi ---------------------------------------------------- */
.rv-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.rv-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.rv-status {
    font-weight: 600;
    text-align: center;
}

.rv-board-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.rv-score {
    display: flex;
    gap: 18px;
    align-items: center;
    font-size: var(--fs-sm);
}

.rv-pill {
    display: flex;
    align-items: center;
    gap: 7px;
}

.rv-pill b {
    font-variant-numeric: tabular-nums;
}

.rv-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-2);
}

.rv-dot.rv-s1 {
    background: var(--warning);
}

.rv-dot.rv-s2 {
    background: var(--info);
}

.rv-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    width: min(92vw, 380px);
    background: var(--border);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 3px;
}

.rv-cell {
    aspect-ratio: 1;
    border: 0;
    background: var(--surface-2);
    position: relative;
    padding: 0;
    cursor: default;
}

.rv-cell.rv-s1::after,
.rv-cell.rv-s2::after {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
}

.rv-cell.rv-s1::after {
    background: var(--warning);
}

.rv-cell.rv-s2::after {
    background: var(--info);
}

.rv-cell.rv-legal::after {
    content: "";
    position: absolute;
    inset: 37%;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
}

.rv-board.rv-my-turn .rv-cell.rv-legal {
    cursor: pointer;
}

.rv-board.rv-my-turn .rv-cell.rv-legal:hover {
    background: var(--accent-soft);
}