/* ============================================================================
   HomeBase Design 2026 – Stilschicht ueber styles.css
   - Farbwelten (Akzent): body.theme-modern | violet | nature | sunset | rose | graphite | glass
   - Darstellung:         html[data-mode="light"|"dark"]  (Auto wird per JS aufgeloest)
   Nur Optik. Keine Funktionen, keine Struktur.
   ========================================================================== */

:root {
    --radius-s: 10px;
    --radius-m: 14px;
    --radius-l: 20px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --on-primary: #ffffff;
    --tabbar-space: 16px;   /* Rest-Abstand; Platz fuer die Leiste reserviert .screen selbst */
}

/* ---- Darstellung: hell ---------------------------------------------------- */
html[data-mode="light"] body {
    --bg-color: #F4F6FB;
    --card-bg: #FFFFFF;
    --surface-2: #EEF1F8;
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --border-color: #E3E8F2;
    --message-received: #FFFFFF;
    --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
    --shadow-2: 0 10px 30px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
}

/* ---- Darstellung: dunkel -------------------------------------------------- */
html[data-mode="dark"] body {
    --bg-color: #0B1020;
    --card-bg: #131A2B;
    --surface-2: #1A2339;
    --text-primary: #E8ECF5;
    --text-secondary: #9AA6BE;
    --border-color: #232D47;
    --message-received: #1A2339;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 12px 34px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
    color-scheme: dark;
}

/* ---- Farbwelten (Akzent) -------------------------------------------------- */
body.theme-modern   { --primary-color: #3B82F6; --primary-dark: #2563EB; --accent-2: #60A5FA; }
body.theme-violet   { --primary-color: #6366F1; --primary-dark: #4F46E5; --accent-2: #A78BFA; }
body.theme-nature   { --primary-color: #16A34A; --primary-dark: #15803D; --accent-2: #4ADE80; }
body.theme-sunset   { --primary-color: #F97316; --primary-dark: #EA580C; --accent-2: #EC4899; }
body.theme-rose     { --primary-color: #EC4899; --primary-dark: #DB2777; --accent-2: #FB7185; }
body.theme-graphite { --primary-color: #475569; --primary-dark: #1E293B; --accent-2: #94A3B8; }
body.theme-glass    { --primary-color: #3B82F6; --primary-dark: #2563EB; --accent-2: #8B5CF6; }

body {
    --primary-soft: color-mix(in srgb, var(--primary-color) 13%, var(--card-bg));
    --primary-ring: color-mix(in srgb, var(--primary-color) 28%, transparent);
    --header-bg: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 55%, var(--accent-2) 130%);
    --header-text: #ffffff;
    --message-sent: var(--primary-color);
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -0.005em;
    background: var(--bg-color);
    color: var(--text-primary);
    transition: background-color .25s var(--ease), color .25s var(--ease);
}

html[data-mode="dark"] body {
    --header-bg: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-dark) 55%, #05070d) 0%,
        color-mix(in srgb, var(--primary-color) 42%, #05070d) 100%);
}

/* Glas: Hintergrund mit Farbverlauf, halbtransparente Flaechen */
body.theme-glass {
    background:
        radial-gradient(900px 500px at 10% -10%, color-mix(in srgb, var(--primary-color) 45%, transparent), transparent),
        radial-gradient(800px 500px at 100% 10%, color-mix(in srgb, var(--accent-2) 40%, transparent), transparent),
        var(--bg-color);
    background-attachment: fixed;
}
html[data-mode="light"] body.theme-glass { --card-bg: rgba(255, 255, 255, .62); --bg-color: #dfe8f7; --border-color: rgba(255, 255, 255, .7); }
html[data-mode="dark"] body.theme-glass  { --card-bg: rgba(19, 26, 43, .62);  --bg-color: #0a0f1d; --border-color: rgba(255, 255, 255, .08); }
body.theme-glass .chat-list,
body.theme-glass .card,
body.theme-glass .tab-bar,
body.theme-glass .chat-input-container,
body.theme-glass .settings-menu {
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
}

/* ---- Kopfzeile ------------------------------------------------------------ */
.chat-header {
    background: var(--header-bg);
    color: var(--header-text);
    padding: 14px 16px 16px;
    border-radius: 0 0 var(--radius-l) var(--radius-l);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary-dark) 28%, transparent);
    margin-bottom: 4px;
}
.chat-header h1, .chat-header h2, .chat-header h3, .chat-header .family-info h3 {
    color: var(--header-text);
    font-weight: 650;
    letter-spacing: -0.01em;
}
.chat-header .icon-btn {
    color: var(--header-text);
    border-radius: 12px;
    transition: background .15s var(--ease), transform .15s var(--ease);
}
.chat-header .icon-btn:hover { background: rgba(255, 255, 255, .16); }

/* ---- Listen / Chat-Uebersicht -------------------------------------------- */
.chat-list { background: transparent; padding: 8px 12px 0; }
.chat-list-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-m);
    padding: 12px 14px;
    margin-bottom: 8px;
    box-shadow: var(--shadow-1);
    transition: transform .15s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.chat-list-item:hover { border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color)); box-shadow: var(--shadow-2); }
.chat-list-item:active { transform: scale(.985); background: var(--surface-2); }
.chat-avatar-circle {
    width: 48px; height: 48px;
    font-size: 18px; font-weight: 650;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent), 0 2px 8px rgba(15, 23, 42, .18);
}
.chat-avatar-circle.group { background: linear-gradient(135deg, #22C55E, #16A34A); }
.chat-name { font-weight: 650; font-size: 15.5px; letter-spacing: -0.01em; }
.chat-preview { font-size: 13px; color: var(--text-secondary); }
.online-dot { border-color: var(--card-bg); width: 12px; height: 12px; }
.unread-badge { background: var(--primary-color); box-shadow: 0 2px 6px var(--primary-ring); }

/* Rundknoepfe in der Liste (Anruf/Video) */
.chat-meta button, .chat-list-item .icon-btn, .chat-list-item button {
    border-radius: 50%;
    transition: transform .15s var(--ease), filter .15s var(--ease);
}
.chat-list-item button:active { transform: scale(.92); }

/* ---- Nachrichten ---------------------------------------------------------- */
.messages-container { gap: 8px; padding: 14px 14px 10px; background: transparent; }
.message { max-width: 80%; }
.message-bubble {
    padding: 9px 13px 7px;
    border-radius: 20px;
    box-shadow: var(--shadow-1);
    line-height: 1.4;
}
.message.sent .message-bubble {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--on-primary);
    border: none;
    border-bottom-right-radius: 6px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 32%, transparent);
}
.message.received .message-bubble {
    background: var(--message-received);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 6px;
}
.message.sent .message-text, .message.sent .message-bubble a { color: var(--on-primary); }
.message.sent .message-time, .message.sent .message-status { color: rgba(255, 255, 255, .75); }
.message-sender { color: var(--primary-color); font-weight: 650; }
.message-time { font-size: 10.5px; opacity: .85; }
.message-photo { border-radius: 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, .15); }
.message-reactions > * { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 999px; box-shadow: var(--shadow-1); }
.date-separator, .date-divider {
    background: var(--surface-2);
    color: var(--text-secondary);
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 550;
}

/* ---- Eingabeleiste -------------------------------------------------------- */
.chat-input-container {
    background: color-mix(in srgb, var(--card-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-color);
    padding: 8px 12px 10px;
}
#messageInput {
    background: var(--surface-2);
    border: 1.5px solid transparent;
    border-radius: 22px;
    padding: 10px 16px;
    transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
#messageInput:focus { background: var(--card-bg); border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--primary-ring); }
.send-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; padding: 0;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 40%, transparent);
    transition: transform .15s var(--ease), filter .15s var(--ease);
}
.send-btn:hover { filter: brightness(1.06); }
.send-btn:active { transform: scale(.92); }
.chat-input-actions .icon-btn { color: var(--text-secondary); border-radius: 12px; }
.chat-input-actions .icon-btn:hover { background: var(--surface-2); color: var(--primary-color); }

/* ---- Untere Navigation: schwebende Leiste -------------------------------- */
.tab-bar {
    left: 12px; right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: 64px;
    padding-bottom: 0;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background: color-mix(in srgb, var(--card-bg) 84%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: var(--shadow-2);
    max-width: 720px;
    margin: 0 auto;
}
.tab-btn { border-radius: 18px; transition: color .2s var(--ease), transform .15s var(--ease); font-weight: 550; }
.tab-btn:active { transform: scale(.94); }
.tab-btn.active { color: var(--primary-color); }
.tab-btn.active::before {
    top: 8px;
    width: 52px; height: 30px;
    border-radius: 15px;
    background: var(--primary-soft);
    z-index: 0;
    animation: tabPill .25s var(--ease);
}
.tab-btn svg, .tab-btn span { position: relative; z-index: 1; }
@keyframes tabPill { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
#dashboardScreen .chat-list { padding-bottom: var(--tabbar-space); }

/* ---- Karten, Formulare, Knoepfe ------------------------------------------ */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-2);
}
h1 { color: var(--primary-color); letter-spacing: -0.02em; }
h2, h3 { letter-spacing: -0.015em; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], input[type="tel"], textarea, select {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1.5px solid transparent;
    border-radius: var(--radius-m);
    font-family: inherit;
    transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="date"]:focus, input[type="time"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
textarea:focus, select:focus {
    outline: none;
    background: var(--card-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--primary-ring);
}
::placeholder { color: var(--text-secondary); opacity: .75; }

.btn { border-radius: var(--radius-m); font-weight: 600; letter-spacing: -0.005em; transition: transform .15s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease); }
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color) 38%, transparent);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { background: linear-gradient(135deg, var(--primary-dark), var(--primary-dark)); }
.btn-secondary { background: var(--surface-2); color: var(--text-primary); }
.btn-small { border-radius: 999px; padding: 6px 14px; background: var(--primary-color); }
.btn-text { color: var(--primary-color); }

/* ---- Overlays / Menues ---------------------------------------------------- */
.overlay { background: rgba(8, 12, 24, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.settings-menu { background: var(--bg-color); border-radius: var(--radius-l) var(--radius-l) 0 0; box-shadow: var(--shadow-2); }
.settings-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-1);
    margin: 12px 14px;
    overflow: hidden;
}
.settings-section-label { color: var(--text-secondary); text-transform: uppercase; font-size: 11.5px; letter-spacing: .08em; font-weight: 650; }
.settings-header { background: var(--header-bg); color: var(--header-text); }
.settings-header h3 { color: var(--header-text); }
.settings-row { border-color: var(--border-color); }
.settings-select { background: var(--surface-2); border-radius: var(--radius-s); }
.settings-danger-btn { border-radius: var(--radius-m); }

/* ---- Anrufe --------------------------------------------------------------- */
.call-overlay { background: radial-gradient(900px 600px at 50% 0%, color-mix(in srgb, var(--primary-dark) 55%, #05070d), #05070d); }
.call-btn { box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }

/* ---- Feinschliff ----------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-secondary) 40%, transparent); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: var(--primary-ring); }
a { color: var(--primary-color); }

/* Theme-Auswahl in den Einstellungen */
.theme-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 6px 14px 14px; }
.theme-swatch {
    border: 2px solid transparent;
    background: var(--surface-2);
    border-radius: var(--radius-m);
    padding: 8px 4px 6px;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font: inherit; font-size: 11px; color: var(--text-secondary);
    transition: transform .15s var(--ease), border-color .2s var(--ease);
}
.theme-swatch:active { transform: scale(.94); }
.theme-swatch .dot { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 3px 8px rgba(15, 23, 42, .25); }
.theme-swatch.active { border-color: var(--primary-color); color: var(--text-primary); font-weight: 650; }
.mode-picker { display: flex; gap: 6px; padding: 6px 14px 14px; }
.mode-picker button {
    flex: 1; border: none; background: var(--surface-2); color: var(--text-secondary);
    border-radius: 999px; padding: 9px 0; font: inherit; font-size: 13px; cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.mode-picker button.active { background: var(--primary-color); color: #fff; font-weight: 650; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Grosse Bildschirme: zentrierte App-Spalte --------------------------- */
@media (min-width: 900px) {
    html[data-mode="light"] body { background: #E9EDF6; }
    html[data-mode="dark"] body  { background: #070B16; }
    .screen.active:not(#loginScreen) {
        max-width: 980px;
        margin-inline: auto;
        background: var(--bg-color);
        border-inline: 1px solid var(--border-color);
        box-shadow: 0 0 60px rgba(15, 23, 42, .10);
    }
    .chat-header { border-radius: 0 0 var(--radius-l) var(--radius-l); }
}

/* ---- Kalender -------------------------------------------------------------- */
.cal-grid-wrap {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-1);
    margin: 10px 12px 6px;
    padding: 10px 8px 12px;
}
.cal-weekdays span { font-size: 10.5px; letter-spacing: .08em; font-weight: 650; }
.cal-grid { gap: 4px; }
.cal-cell {
    border-radius: 14px;
    padding-top: 6px;
    transition: background .15s var(--ease), transform .12s var(--ease);
}
.cal-cell:not(.cal-cell-empty):hover { background: var(--surface-2); }
.cal-cell:active { transform: scale(.94); }
.cal-day-num { font-size: 13.5px; font-weight: 550; }
.cal-today { box-shadow: inset 0 0 0 2px var(--primary-color); }
.cal-today .cal-day-num { color: var(--primary-color); font-weight: 750; }
.cal-selected {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-color) 40%, transparent);
}
.cal-selected .cal-day-num { color: #fff !important; }
.cal-feiertag { background: color-mix(in srgb, #EF4444 14%, var(--card-bg)); }
.cal-feiertag .cal-day-num { color: #DC2626; }
.cal-schulferien { background: color-mix(in srgb, #F59E0B 13%, var(--card-bg)); }
.cal-schulferien .cal-day-num { color: #B45309; }
html[data-mode="dark"] .cal-feiertag .cal-day-num { color: #F87171; }
html[data-mode="dark"] .cal-schulferien .cal-day-num { color: #FBBF24; }
.cal-holiday-banner { border-radius: var(--radius-s); }
.cal-feiertag-banner { background: color-mix(in srgb, #EF4444 14%, var(--card-bg)); color: #DC2626; }
.cal-schulferien-banner { background: color-mix(in srgb, #F59E0B 14%, var(--card-bg)); color: #B45309; }
.cal-day-panel { padding: 8px 14px calc(var(--tabbar-space) + 6px); }
.cal-event-item {
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-1);
    transition: box-shadow .2s var(--ease);
}
.cal-event-item:hover { box-shadow: var(--shadow-2); }
.cal-open-modal-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: var(--radius-m);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

/* Kalender auf breiten Bildschirmen flacher */
@media (min-width: 700px) { .cal-cell { aspect-ratio: 1.3 / 1; } }

/* ---- Haushaltsbuch ---------------------------------------------------------- */
.hb-total-bar {
    margin: 12px 12px 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.hb-total-value { color: var(--primary-color); font-weight: 750; letter-spacing: -0.02em; }
.hb-budget-bar, .hb-form, .hb-stats-panel, .hb-recurring-panel {
    margin: 10px 12px 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-1);
}
.hb-budget-progress-track { border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hb-budget-progress-fill { border-radius: 999px; background: linear-gradient(90deg, var(--primary-color), var(--accent-2)); }
.hb-list {
    margin: 10px 12px 0;
    padding-bottom: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.hb-item { transition: background .15s var(--ease); }
.hb-item:last-child { border-bottom: none; }
.hb-item:hover { background: var(--surface-2); }
.hb-item-icon { border-radius: 12px; }
.hb-cat-badge { border-radius: 999px; background: var(--primary-soft); color: var(--primary-color); font-weight: 600; }
.hb-form-submit { border-radius: var(--radius-m); background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); }
#haushaltsbuchScreen .hb-list { margin-bottom: var(--tabbar-space); }

/* ---- Einkaufsliste ----------------------------------------------------------- */
.sh-list {
    margin: 10px 12px 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    flex: 0 1 auto;
}
.sh-item:last-child { border-bottom: none; }
.sh-add-bar {
    margin: 10px 12px 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-1);
    padding: 8px 10px;
}
.sh-add-input { background: var(--surface-2); border-radius: var(--radius-m); }
.sh-add-btn { border-radius: var(--radius-m); background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: #fff; }
#einkaufslisteScreen { padding-bottom: var(--tabbar-space); }

/* ---- Aufgaben ------------------------------------------------------------------ */
.task-list { padding: 12px 12px var(--tabbar-space); }
.task-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-1);
    transition: box-shadow .2s var(--ease), transform .15s var(--ease);
}
.task-item:hover { box-shadow: var(--shadow-2); }
.task-modal-overlay { background: rgba(8, 12, 24, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.task-modal { background: var(--card-bg); border-radius: var(--radius-l); box-shadow: var(--shadow-2); border: 1px solid var(--border-color); }
.task-input { background: var(--surface-2); border-radius: var(--radius-m); color: var(--text-primary); }

/* ---- Notizen ------------------------------------------------------------------- */
.notes-grid { padding: 12px 12px var(--tabbar-space); gap: 12px; }
.note-card {
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-1);
    border: 1px solid color-mix(in srgb, #000 8%, transparent);
    transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
.note-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* ---- Anmeldung ----------------------------------------------------------------- */
#loginScreen.active {
    background:
        radial-gradient(900px 520px at 15% -10%, color-mix(in srgb, var(--primary-color) 26%, transparent), transparent),
        radial-gradient(800px 520px at 100% 0%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent),
        var(--bg-color);
}
#loginScreen .card { border-radius: 26px; padding: 32px 28px; }
.otp-field { background: var(--surface-2); border-radius: var(--radius-m); }

/* Einstellungen auf grossen Bildschirmen schmaler */
@media (min-width: 700px) {
    .settings-menu { max-width: 640px; margin-inline: auto; }
    .theme-picker { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 420px) {
    .theme-picker { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Fehlerbehebung: Notiz-Editor darf die Seite nicht verbreitern -------------
   Das Editor-Fenster wartet rechts ausserhalb (translateX(100%)). Ohne positionierten
   Bereich dehnt es die ganze Seite auf die doppelte Breite und scrollt sie seitlich. */
#notizenScreen { position: relative; overflow: hidden; }
html { overflow: hidden; }
html, body { max-width: 100%; }

/* ---- Seiten bekommen exakt Bildschirmhoehe --------------------------------------
   Vorher wuchsen sie mit dem Inhalt ueber den Bildschirm hinaus; der untere Teil der
   Listen lag ausserhalb des sichtbaren Bereichs. Jetzt scrollen die Listen in sich
   und enden ueber der schwebenden Navigationsleiste. */
.screen.active:not(#loginScreen) {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

/* ---- Korrekturen: Listen muessen scrollen, Kalender auf PC flacher ------------- */
.hb-list, .sh-list { overflow-x: hidden; overflow-y: auto; min-height: 0; }
.task-list, .notes-grid, .cal-day-panel { min-height: 0; }
@media (min-width: 700px) {
    .cal-cell { aspect-ratio: 2 / 1; padding-top: 4px; }
    .cal-grid { gap: 3px; }
}

/* ---- Navigation am PC: senkrechte Leiste am rechten Rand ------------------------
   Auf dem Handy (schmal) bleibt die schwebende Leiste unten. */
@media (min-width: 900px) {
    body { padding-right: 104px; }                   /* Platz fuer die Leiste, Spalte bleibt mittig */
    .tab-bar {
        left: auto;
        right: 16px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        width: 76px;
        height: auto;
        max-width: none;
        margin: 0;
        padding: 8px 6px;
        flex-direction: column;
        gap: 4px;
        border-radius: 28px;
    }
    .tab-btn { flex: none; width: 100%; height: 62px; }
    .tab-btn.active::before { top: 6px; }
    .screen.active:not(#loginScreen) { padding-bottom: 0; }
}
/* Niedrige Fenster: nur Symbole */
@media (min-width: 900px) and (max-height: 640px) {
    .tab-btn { height: 48px; }
    .tab-btn span { display: none; }
    .tab-btn.active::before { top: 9px; }
}


/* ---- Grosse PC-Fenster: dreigeteilt ------------------------------------------------
   links  : Namensliste (Gemeinsamer Chat, Mitglieder, Gaeste) - immer sichtbar
   mitte  : nur das Anzeigefenster (gewaehlter Chat bzw. gewaehlte Seite)
   rechts : Navigationsleiste
   Handy und schmale Fenster bleiben unveraendert. */
@media (min-width: 1100px) {
    body { padding-left: 336px; }
    #dashboardScreen.screen,
    #dashboardScreen.screen.active {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        left: 0; top: 0; bottom: 0;
        width: 320px !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
        z-index: 150;
        background: var(--card-bg) !important;
        border-inline: none !important;
        border-right: 1px solid var(--border-color) !important;
        box-shadow: 0 0 40px rgba(15, 23, 42, .08) !important;
    }
    /* Nicht aktive Seiten (die Notizen-Seite ist im alten Stil immer 'darunter' sichtbar) ausblenden */
    .screen:not(.active):not(#dashboardScreen) { display: none !important; }
    #dashboardScreen .chat-header { border-radius: 0; margin-bottom: 0; }
    #dashboardScreen .chat-list { padding: 10px 10px 16px; overflow-y: auto; }
    #dashboardScreen .chat-list-item { padding: 10px 12px; gap: 12px; }
    #dashboardScreen .chat-avatar-circle { width: 42px; height: 42px; font-size: 16px; }

    /* Auf der Chat-Uebersicht ist das Anzeigefenster leer: Hinweis statt Leere */
    body:has(#dashboardScreen.active)::before {
        content: "Wähle links einen Chat\A oder rechts eine Funktion";
        white-space: pre-line;
        position: fixed;
        left: 336px; right: 104px; top: 0; bottom: 0;
        display: flex; align-items: center; justify-content: center;
        text-align: center;
        font-size: 15px; line-height: 1.6;
        color: var(--text-secondary);
        pointer-events: none;
    }
}

/* ---- Anrufansicht am PC: Fenster statt Vollbild ----------------------------------
   Das Videobild kommt in kleiner Aufloesung (Handy) und wirkte aufgezogen. Am PC steht es
   jetzt in einem zentrierten Fenster und wird vollstaendig gezeigt. Handy: unveraendert. */
@media (min-width: 900px) {
    .call-overlay {
        background: rgba(8, 12, 24, .72);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    .call-overlay .call-content {
        width: min(92vw, 820px);
        height: min(82vh, 620px);
        border-radius: 28px;
        overflow: hidden;
        background: #000;
        box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
        padding: 24px 20px;
    }
    .call-overlay .video-container { border-radius: 28px; }
    .call-overlay .remote-video { object-fit: contain; background: #000; }
    .call-overlay .local-video {
        top: 16px; right: 16px;
        width: 168px; height: 126px;
        border-radius: 14px;
    }
    .call-overlay .call-info { margin-top: 28px; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
    .call-overlay .call-controls, .call-overlay .incoming-controls { margin-bottom: 14px; }
}

/* Aufgaben: "Erledigte loeschen" */
.task-done-divider { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-clear-btn {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 4px 12px;
    font: inherit; font-size: 12px;
    cursor: pointer;
    transition: color .15s var(--ease), border-color .15s var(--ease);
}
.task-clear-btn:hover { color: #DC2626; border-color: #DC2626; }