/* Schreibtisch - Complete Stylesheet
   Dark theme, no external dependencies */

/* ============================================
   CSS Variables & Theme
   ============================================ */
:root {
    --bg-primary: #0a0e17;
    --bg-secondary: #111827;
    --bg-card: #1a2233;
    --bg-card-hover: #1f2a3f;
    --bg-input: #0f1724;
    --bg-modal: rgba(0, 0, 0, 0.7);
    --bg-tertiary: #151d2e;
    --text-primary: #f0f4fc;
    --text-secondary: #8896b0;
    --text-muted: #5a6a85;
    --text-link: #60a5fa;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-glow: rgba(59, 130, 246, 0.25);
    --accent-soft: rgba(59, 130, 246, 0.1);
    --success: #22c55e;
    --success-soft: rgba(34, 197, 94, 0.1);
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.1);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.1);
    --border: #1e293b;
    --border-light: #2a3650;
    --border-focus: #3b82f6;
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--accent-glow);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --font-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ============================================
   Light Theme Override
   ============================================ */
body.theme-light {
    --bg-primary: #f1f5f9;
    --bg-secondary: #ffffff;
    --bg-card: #f8fafc;
    --bg-card-hover: #f1f5f9;
    --bg-input: #f1f5f9;
    --bg-modal: rgba(15, 23, 42, 0.5);
    --bg-tertiary: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-link: #2563eb;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-glow: rgba(37, 99, 235, 0.2);
    --accent-soft: rgba(37, 99, 235, 0.1);
    --border: #cbd5e1;
    --border-light: #94a3b8;
    --border-focus: #2563eb;
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);
}
body.theme-light::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 500px;
    background: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent); }

/* ============================================
   Anmeldeseite (fix201, Entwurf B): links das Bild mit den Programmen (LoginPage::bild), rechts das Formular.
   login.php und passwort.php. Am Handy nur Logo und Überschrift über dem Formular.
   ============================================ */
.anmelde-seite::before { display: none; }   /* kein Schein oben: das Bild hat eigene Farben */
.anmelde { display: flex; min-height: 100vh; position: relative; z-index: 1; }
.anmelde-bild {
    flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 44px 56px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px; color: #f0f4fc;
    background:   /* «Abendrot» der Arbeitsfläche (desk.css) */
        radial-gradient(1100px 520px at 50% 108%, rgba(251,146,60,.6), transparent 70%),
        radial-gradient(900px 600px at 88% 0%, rgba(168,85,247,.35), transparent 70%),
        linear-gradient(180deg, #1e1b4b, #4c1d95 58%, #9a3412);
}
.anmelde-marke { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.anmelde-marke svg { width: 22px; height: 22px; }
.anmelde-mitte { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 620px; text-align: center; }
.anmelde-mitte h1 { margin: 0; font-size: 48px; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: #fff; }
.anmelde-mitte p { margin: 0; max-width: 480px; font-size: 18px; line-height: 1.55; color: rgba(240,244,252,.84); }
.anmelde-programme {
    list-style: none; margin: 10px 0 0; padding: 0; width: 100%; max-width: 460px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px;
}
.anmelde-programme li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: rgba(240,244,252,.9); }
.anmelde-symbol {
    width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
    background: linear-gradient(150deg, color-mix(in srgb, var(--farbe) 62%, #fff), var(--farbe));
    box-shadow: 0 8px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25);
}
.anmelde-symbol svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2; }
.anmelde-schutz { align-self: center; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(240,244,252,.8); }
.anmelde-schutz svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.anmelde-formular {
    flex: 0 0 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
    padding: 48px 32px; background: #0f1522;
}
.anmelde-karte { width: 100%; max-width: 360px; animation: fadeInUp 0.5s ease; }
.anmelde-kopf { margin-bottom: var(--space-lg); }
.anmelde-kopf h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.anmelde-kopf p { margin: 6px 0 0; font-size: 15px; color: var(--text-secondary); }
.anmelde-kopf.mittig { text-align: center; margin-bottom: 0; }   /* Code und Bestätigen: alles darunter ist mittig */
.anmelde-formular .form-input { background: #0a101b; border-color: #22304a; border-radius: 12px; }
.anmelde-formular .btn-primary { box-shadow: 0 10px 24px rgba(59,130,246,.3); }
.anmelde-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-lg); }
.anmelde-merken { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.875rem; color: var(--text-secondary); }
.anmelde-zeile a { font-size: 0.875rem; color: #93c5fd; }
.anmelde-zeile a:hover { color: #bfdbfe; text-decoration: underline; }
@media (max-width: 860px) {
    .anmelde { flex-direction: column; }
    .anmelde-bild { flex: none; padding: 22px 22px 26px; gap: 16px; }
    .anmelde-mitte { align-self: stretch; }
    .anmelde-mitte h1 { font-size: 28px; }
    .anmelde-mitte p, .anmelde-programme, .anmelde-schutz { display: none; }
    .anmelde-formular { flex: 1 0 auto; align-items: flex-start; padding: 28px 20px 40px; }
}

/* ============================================
   Forms
   ============================================ */
.form-group { margin-bottom: var(--space-lg); }
.form-group label {
    display: block; font-size: 0.8125rem; font-weight: 500;
    color: var(--text-secondary); margin-bottom: var(--space-sm); letter-spacing: 0.02em;
}
.form-input {
    width: 100%; padding: 12px 16px; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--text-primary); font-size: 0.9375rem; font-family: var(--font-body);
    transition: all var(--transition-fast); outline: none;
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-glow); }
textarea.form-input { resize: vertical; min-height: 120px; line-height: 1.5; }
select.form-input {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238896b0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
    padding: 10px 20px; font-size: 0.875rem; font-weight: 600; font-family: var(--font-body);
    border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
    transition: all var(--transition-fast); outline: none; white-space: nowrap; text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-light); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #dc2626; box-shadow: 0 0 20px rgba(239, 68, 68, 0.25); }
.btn-sm { padding: 6px 12px; font-size: 0.8125rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-sm); }

/* ============================================
   Page Header
   ============================================ */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-xl); flex-wrap: wrap; gap: var(--space-md);
}
.page-header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; }
.page-header-actions { display: flex; gap: var(--space-sm); }

/* ============================================
   Cards
   ============================================ */
.card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-normal);
}
.card:hover { border-color: var(--border-light); box-shadow: var(--shadow-md); }
.card-header {
    padding: var(--space-lg); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: 1rem; font-weight: 600; }
.card-body { padding: var(--space-lg); }

/* ============================================
   Calendar
   ============================================ */
/* minmax(0, …): Mit 1fr allein machte ein langer Termintitel (nowrap) seine Spalte breiter und drückte die anderen
   zusammen – am Computer auf 30 px, am Handy aus dem Bild (bis fix174). */
.calendar-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
    background: var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.calendar-header-cell {
    background: var(--bg-secondary); padding: var(--space-sm) var(--space-xs);
    text-align: center; font-size: 0.75rem; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.calendar-cell {
    background: var(--bg-card); min-height: 100px; padding: var(--space-sm);
    cursor: pointer; transition: background var(--transition-fast); position: relative;
}
.calendar-cell:hover { background: var(--bg-card-hover); }
.calendar-cell.other-month { opacity: 0.3; }
.calendar-cell.today { background: var(--accent-soft); }
.calendar-cell.today .day-number {
    background: var(--accent); color: #fff; border-radius: 50%;
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.day-number { font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-xs); }
.calendar-event {
    font-size: 0.6875rem; padding: 2px 6px; border-radius: 3px; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; transition: opacity var(--transition-fast);
}
.calendar-event:hover { opacity: 0.8; }
/* Geburtstage – aus den Kontakten, kein bearbeitbarer Termin */
.calendar-event-birthday {
    background: rgba(236,72,153,0.18);
    color: #f9a8d4;
    font-weight: 500;
}
body.theme-light .calendar-event-birthday { color: #be185d; background: rgba(236,72,153,0.12); }
/* Ganztags-Zeile der Wochenansicht (aktuell für Geburtstage) */
.week-allday { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.week-allday .week-time-gutter {
    width: 56px; flex-shrink: 0; background: var(--bg-secondary);
    font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase;
    display: flex; align-items: center; justify-content: center;
}
.week-allday-cell {
    flex: 1; min-width: 0; border-left: 1px solid var(--border);
    padding: 3px 4px; background: var(--bg-secondary);
}
.calendar-nav { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.calendar-nav .month-title { font-size: 1.25rem; font-weight: 600; min-width: 200px; text-align: center; }

/* Calendar list bar (multi-calendar chips) */
.cal-list-bar { display:flex; flex-wrap:wrap; gap:6px; padding:8px 0 6px; margin-bottom:4px; }
.cal-chip { display:flex; align-items:center; gap:6px; padding:4px 10px 4px 6px; border-radius:20px; background:var(--bg-card); border:1px solid var(--border); cursor:pointer; font-size:0.8125rem; transition:opacity var(--transition-fast),background var(--transition-fast); user-select:none; position:relative; }
.cal-chip:hover { background:var(--bg-card-hover); }
.cal-chip.hidden-cal { opacity:0.38; }
.cal-chip-color { width:12px; height:12px; border-radius:50%; flex-shrink:0; transition:transform var(--transition-fast); cursor:pointer; }
.cal-chip-color:hover { transform:scale(1.4); }
.cal-chip-name { font-weight:500; }
.cal-chip-owner { font-size:0.75rem; color:var(--text-muted); white-space:nowrap; }
/* Geteilte Kalender (fix130): Einladungen, Teilen im Kalender-Dialog, Termin nur ansehen */
.cal-invitations { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.cal-invitations:empty { display:none; }
.cal-invite { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:10px 14px; border:1px solid var(--accent); background:var(--accent-soft); border-radius:var(--radius-md); }
.cal-invite-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.cal-invite-text { flex:1; min-width:200px; font-size:0.875rem; color:var(--text-primary); }
.cal-invite-right { color:var(--text-secondary); }
.cal-invite-actions { display:flex; gap:6px; }
.cal-shared-badge { font-size:0.75rem; color:var(--text-muted); white-space:nowrap; }
.cal-settings-owner { padding:10px 12px; margin-bottom:14px; border-radius:var(--radius-sm); background:var(--bg-tertiary); font-size:0.875rem; line-height:1.5; }
.cal-reminder-toggle { display:flex; align-items:flex-start; gap:8px; margin-top:10px; cursor:pointer; font-size:0.8125rem; color:var(--text-secondary); }
.cal-reminder-toggle input { margin-top:2px; }
.cal-share-section { border-top:1px solid var(--border); padding-top:14px; margin-top:4px; }
.cal-share-title { margin:0 0 8px; font-size:0.9375rem; }
.cal-share-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:6px 0; border-bottom:1px solid var(--border); }
.cal-share-person { flex:1 1 150px; min-width:0; }
.cal-share-person > div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-share-name { font-size:0.875rem; }
.cal-share-status { font-size:0.6875rem; padding:1px 7px; border-radius:10px; background:var(--warning-soft); color:var(--warning); white-space:nowrap; }
.cal-share-status.declined { background:var(--danger-soft); color:var(--danger); }
select.form-input.cal-share-right { width:auto; padding-top:4px; padding-bottom:4px; font-size:0.8125rem; }
.cal-share-form { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.cal-share-form input { flex:1 1 100%; min-width:0; }
.cal-share-form select { flex:1 1 120px; width:auto; min-width:0; }
/* Verfassen im Fenster: Nachricht füllt den Platz (vorher Inline-Stile in app.php) */
#compose-modal .compose-row-body { flex:1; display:flex; flex-direction:column; }
#compose-body { flex:1; min-height:250px; font-family:inherit; resize:vertical; }

/* Antworten direkt in der Mail (fix136, wie Outlook seit fix138): Die Mail wird zur Antwort – ohne Rahmen,
   oben rechts die Wege, links der grosse Senden-Knopf, daneben Von/An/Cc/Betreff, darunter der Text über
   die ganze Höhe. Das Formular ist dasselbe wie im Fenster; "display:contents" stellt seine Zeilen ins Raster. */
.mail-detail.mail-replying { min-height:100%; box-sizing:border-box; display:flex; flex-direction:column; }
.mail-detail.mail-replying > :not(.mail-detail-actions):not(.mail-inline-compose) { display:none; }
/* Beim Antworten löscht der rote Knopf die Antwort, nicht die Mail darunter (fix149, Wunsch des Betreibers) */
.mail-detail:not(.mail-replying) .mail-act-discard, .mail-detail.mail-replying .mail-act-delete { display:none; }
/* Text füllt den Rest; wird es eng, bleibt er mindestens 260 px hoch und der Lesebereich scrollt */
.mail-inline-compose { flex:1; display:grid; grid-template-columns:84px minmax(0, 1fr);
    grid-template-rows:auto auto auto auto auto auto minmax(260px, 1fr) auto; column-gap:12px; }
.mail-inline-compose .compose-form { display:contents; }
.mail-inline-compose-bar { grid-column:1 / -1; grid-row:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:2px; padding-bottom:8px; }
.mail-inline-compose-title { margin-right:auto; font-size:0.8125rem; color:var(--text-muted); }
.mail-inline-compose-bar button { background:none; border:none; color:var(--text-secondary); font:inherit; font-size:0.8125rem; padding:4px 8px; border-radius:var(--radius-sm); cursor:pointer; }
.mail-inline-compose-bar button:hover { background:var(--bg-card-hover); color:var(--text-primary); }
.mail-inline-send { grid-column:1; grid-row:2 / 6; align-self:start; min-height:86px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-card); color:var(--text-primary); font:inherit; font-size:0.875rem; cursor:pointer; }
.mail-inline-send::before { content:'\27A4'; font-size:1.375rem; color:var(--accent); }
.mail-inline-send:hover { border-color:var(--accent); }
.mail-inline-send:disabled { opacity:0.6; cursor:default; }
.mail-inline-compose .compose-row-from { grid-column:2; grid-row:2; }
.mail-inline-compose .compose-row-to { grid-column:2; grid-row:3; }
.mail-inline-compose .compose-row-cc { grid-column:2; grid-row:4; }
.mail-inline-compose .compose-row-subject { grid-column:2; grid-row:5; }
.mail-inline-compose .compose-row { display:grid; grid-template-columns:64px minmax(0, 1fr); align-items:center; gap:8px; margin:0; padding:2px 0; border-bottom:1px solid var(--border); }
.mail-inline-compose .compose-row.hidden { display:none; }
.mail-inline-compose .compose-row label { margin:0; font-size:0.8125rem; color:var(--text-secondary); }
.mail-inline-compose .compose-row .form-input { border:none; background:transparent; padding:6px 4px; box-shadow:none; }
.mail-inline-compose .compose-row-body { grid-column:1 / -1; grid-row:7; min-height:0; margin:12px 0 0; display:flex; flex-direction:column; }
.mail-inline-compose .compose-row-body label { display:none; }
.mail-inline-compose #compose-body { flex:1; min-height:0; resize:none; border:none; background:transparent; padding:4px 0; box-shadow:none; }
/* Anhänge unter dem Betreff, wie in Outlook (fix148) */
.mail-inline-compose .compose-attachments { grid-column:2; grid-row:6; }
.mail-inline-compose .compose-attach-hint { display:none; }   /* Platz ist knapp; Ziehen geht trotzdem */

/* Original-Mail unter einer Antwort (fix168): Kopf wie im Text, darunter die Mail – nur zum Ansehen */
.compose-original { margin-top:12px; border-top:1px solid var(--border); padding-top:10px; font-size:0.875rem; }
.compose-original-head { color:var(--text-secondary); margin-bottom:10px; line-height:1.5; }
.compose-original-body { overflow-x:auto; overflow-wrap:break-word; }
.mail-inline-compose .compose-original { grid-column:1 / -1; grid-row:8; }
.compose-window .compose-original { flex:0 1 auto; max-height:45vh; overflow:auto; margin-top:0; }
/* Eigenes Fenster zum Lesen (mail.php, fix168): wie der Lesebereich, Anhänge als Links */
.mail-window .mail-detail { max-width:1100px; margin:0 auto; }
a.mail-attachment-chip { color:inherit; text-decoration:none; }
/* Eigenes Fenster zum Schreiben (compose.php, fix136) */
body.compose-window { height:100vh; overflow:hidden; }
.compose-window-wrap { display:flex; flex-direction:column; gap:10px; height:100vh; box-sizing:border-box; padding:16px 20px; }
.compose-window-wrap.compose-window-dragging { outline:2px dashed var(--accent); outline-offset:-6px; }
.compose-window-title { margin:0; font-size:1.125rem; }
.compose-window-fields { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 12px; }
.compose-window-fields label { font-size:0.8125rem; color:var(--text-secondary); }
.compose-window-body { flex:1; min-height:160px; resize:none; font-family:inherit; }
.compose-window-note { font-size:0.8125rem; color:var(--text-secondary); }
.compose-window-note-error { color:var(--danger); }
.compose-window-foot { display:flex; gap:8px; align-items:center; }

/* Quelltext einer Mail (fix135) */
.mail-source-link { margin-left:10px; padding:0; border:none; background:none; color:var(--text-link); font-size:0.75rem; cursor:pointer; }
.mail-source-link:hover { text-decoration:underline; }
.mail-source-modal { width:min(900px, 95vw); max-width:none; }
.mail-source-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.mail-source-text { margin:8px 0 0; padding:12px; max-height:60vh; overflow:auto; background:var(--bg-tertiary); border-radius:var(--radius-sm);
    font-family:ui-monospace, Consolas, "Courier New", monospace; font-size:0.75rem; line-height:1.45; color:var(--text-primary);
    white-space:pre-wrap; overflow-wrap:anywhere; }
.event-readonly-hint { padding:10px 12px; margin-bottom:14px; border-radius:var(--radius-sm); background:var(--bg-tertiary); color:var(--text-secondary); font-size:0.875rem; }
.event-series-hint { padding:8px 12px; margin-bottom:14px; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--text-secondary); font-size:0.8125rem; }
/* Wiederholung (fix153): Feld als Knopf, darunter das eigene Fenster (recurrence.js) */
.recur-field { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; text-align:left; cursor:pointer; font:inherit; }
.recur-field > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.recur-field-edit { color:var(--accent); font-size:0.8125rem; white-space:nowrap; }
.recur-field:disabled { cursor:default; opacity:0.6; }
.recur-field:disabled .recur-field-edit { display:none; }
.recur-quick { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.recur-chip { border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); border-radius:16px; padding:5px 12px; font:inherit; font-size:0.8125rem; cursor:pointer; }
.recur-chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.recur-custom.recur-off { opacity:0.45; }
.recur-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; font-size:0.875rem; }
.recur-opt { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 8px; font-size:0.875rem; cursor:pointer; }
.recur-row .form-input, .recur-opt .form-input { width:auto; padding-top:5px; padding-bottom:5px; }
.recur-num { width:72px !important; }
.recur-days { gap:6px; }
.recur-day { width:42px; height:36px; border:1px solid var(--border); border-radius:8px; background:var(--bg-card); color:var(--text-primary); font:inherit; font-size:0.8125rem; cursor:pointer; }
.recur-day.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.recur-label { font-size:0.8125rem; color:var(--text-secondary); margin:14px 0 6px; }
.recur-summary { margin:14px 0 0; padding:10px 12px; border-radius:var(--radius-sm); background:var(--accent-soft); font-size:0.875rem; }
.recur-device-hint { margin:0 0 12px; font-size:0.8125rem; color:var(--text-secondary); }
.event-readonly .attendee-input-row, .event-readonly .attendee-row-remove, .event-readonly #event-attendee-info { display:none; }
.event-readonly .form-input:disabled { opacity:0.65; cursor:default; }
@media (max-width:768px) {
    .cal-invite-actions { width:100%; }
    .cal-invite-actions .btn { flex:1; }
}
.cal-color-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }

/* View Toggle Buttons */
.cal-view-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-left: 8px;
}
.cal-view-btn {
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    border-right: 1px solid var(--border);
}
.cal-view-btn:last-child { border-right: none; }
.cal-view-btn:hover { background: var(--hover); color: var(--text-primary); }
.cal-view-btn.active { background: var(--accent); color: #fff; }

/* Week View */
.week-view { display: flex; flex-direction: column; overflow: hidden; }
.week-header {
    display: flex;
    border-bottom: 2px solid var(--border);
    flex-shrink: 0;
}
.week-header .week-time-gutter {
    width: 56px;
    flex-shrink: 0;
    background: var(--bg-secondary);
}
.week-day-header {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
}
.week-day-header.today { background: var(--accent-soft); }
.week-day-num {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-block;
    margin-top: 2px;
}
.week-day-num.today-num {
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
}
.week-body {
    display: flex;
    overflow-y: auto;
    max-height: 75vh;
    position: relative;
    border-top: 1px solid var(--border);
}
.week-body .week-time-gutter {
    width: 56px;
    flex-shrink: 0;
    background: var(--bg-card);
    height: 1440px;
}
.week-hour-label {
    height: 60px;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 8px;
    font-size: 0.6875rem;
    color: var(--text-muted);
    transform: translateY(-8px);
}
.week-day-col {
    flex: 1;
    position: relative;
    border-left: 1px solid var(--border);
    cursor: pointer;
    min-height: 0;
    /* Total height = 24 hours × 60px */
    height: 1440px;
}
.week-day-col.today { background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); }
.week-hour-slot {
    height: 60px;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}
.week-hour-slot:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.week-event {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.6875rem;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    transition: opacity 0.15s;
    line-height: 1.3;
    border-left: 3px solid;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.week-event:hover { opacity: 0.85; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.week-event strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-event-time { font-size: 0.625rem; opacity: 0.85; }

/* Week event colors - solid fills */

@media (max-width: 700px) {
    .cal-view-toggle { margin-left: 0; margin-top: 4px; }
    .week-body { max-height: 60vh; }
    .week-header .week-time-gutter, .week-body .week-time-gutter { width: 40px; }
    .week-hour-label { font-size: 0.6rem; padding: 0 4px; }
    .week-event { font-size: 0.6rem; padding: 2px 3px; }
}

/* ============================================
   Event Hover Tooltip
   ============================================ */
.event-tooltip {
    position: fixed;
    z-index: 900;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 12px 14px;
    min-width: 210px;
    max-width: 290px;
    pointer-events: auto;
    animation: tooltip-in 120ms ease;
}
@keyframes tooltip-in {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.event-tooltip-header { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.event-tooltip-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.event-tooltip-calname { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-tooltip-title { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); margin-bottom: 8px; line-height: 1.3; }
.event-tooltip-meta { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 3px; display: flex; gap: 5px; }
.event-tooltip-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border); line-height: 1.4; }

/* ============================================
   Contacts
   ============================================ */
.contacts-split { display: flex; gap: 0; height: calc(100vh - 140px); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-card); }
.contacts-split .contact-list { width: 320px; min-width: 260px; overflow-y: auto; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 0; }
.contact-detail { flex: 1; overflow-y: auto; background: var(--bg-primary); }
.contact-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); }
.contact-detail-empty .empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.4; }

.contact-item {
    display: flex; align-items: center; gap: var(--space-md); padding: 12px 16px;
    cursor: pointer; transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border);
}
.contact-item:hover { background: var(--bg-card-hover); }
.contact-item.selected { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.contact-avatar {
    width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft);
    color: var(--accent); display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.875rem; flex-shrink: 0;
}
.contact-info h4 { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.contact-info p { font-size: 0.8125rem; color: var(--text-secondary); margin: 2px 0 0; }

/* Contact detail panel */
.contact-detail-content { padding: 28px 32px; max-width: 640px; }
.contact-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.contact-detail-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.5rem; flex-shrink: 0; }
.contact-detail-name { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.contact-detail-org { font-size: 0.875rem; color: var(--text-muted); margin: 2px 0 0; }
.contact-detail-actions { display: flex; gap: 8px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.contact-detail-section { margin-bottom: 20px; }
.contact-detail-section h4 { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px; }
.contact-detail-row { font-size: 0.9375rem; color: var(--text-primary); padding: 4px 0; display: flex; align-items: center; gap: 8px; }
.contact-detail-row a { color: var(--accent); text-decoration: none; }
.contact-detail-row a:hover { text-decoration: underline; }
.contact-type-badge { font-size: 0.6875rem; background: var(--bg-tertiary); color: var(--text-muted); padding: 1px 8px; border-radius: 10px; }

/* Multi-value fields in modal */
.multi-field-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.multi-field-row .form-input { flex: 1; }
.multi-type-select { width: 120px !important; flex: 0 0 120px !important; font-size: 0.8125rem !important; }

@media(max-width:768px){
    .contacts-split { flex-direction: column; height: auto; }
    .contacts-split .contact-list { width: 100%; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--border); }
    .contact-detail { min-height: 50vh; }
    .contact-detail-content { padding: 20px 16px; }
    .multi-type-select { width: 90px !important; flex: 0 0 90px !important; }
}

/* ============================================
   Notes
   ============================================ */

/* ============================================
   Modal
   ============================================ */
.modal-overlay {
    position: fixed; inset: 0; background: var(--bg-modal); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: var(--space-lg); animation: fadeIn 0.2s ease;
}
.modal-overlay.hidden { display: none; }
.modal {
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg);
    width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-lg); animation: fadeInUp 0.3s ease;
}
.modal-header {
    padding: var(--space-lg); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 { font-size: 1.125rem; font-weight: 600; }
.modal-body { padding: var(--space-lg); }
.modal-footer {
    padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: var(--space-sm);
    flex-wrap: wrap;   /* zu eng (Handy): umbrechen statt links abschneiden */
}

/* ============================================
   Toast Notifications
   ============================================ */
.toast-container {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2000;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
    pointer-events: none;
}
.toast { pointer-events: auto;
    padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md);
    font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow-lg);
    animation: fadeInDown 0.3s ease; max-width: 380px;
}
.toast-success { background: var(--success-soft); border: 1px solid var(--success); color: var(--success); }
.toast-error { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); }
.toast-info { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); }
.toast-undo { display: flex; align-items: center; gap: var(--space-md); }
.toast-undo-btn {
    background: none; border: none; padding: 4px 0; cursor: pointer;
    color: inherit; font: inherit; font-weight: 700; text-decoration: underline;
}
/* Hinweis nach einem Upload (app.js, noteServerVersion). Er bleibt bis zum
   Neuladen stehen – deshalb unten statt oben bei den übrigen Toasts (dort
   verdeckte er am Handy den Menü-Knopf) und deckend statt durchscheinend.
   Zentriert über margin, nicht transform: Die Animation setzt transform selbst. */
.update-toast { position: fixed; bottom: 16px; left: 0; right: 0; margin: 0 auto; width: max-content;
    z-index: 2000; display: flex; align-items: center; gap: var(--space-md); white-space: nowrap;
    animation: fadeInUp 0.3s ease;
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-secondary)); }

/* ============================================
   Search
   ============================================ */
.search-box { position: relative; }
.search-box input {
    width: 100%; padding: 10px 16px 10px 40px; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--text-primary); font-size: 0.875rem; outline: none;
    transition: all var(--transition-fast);
}
.search-box input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-glow); }
.search-box .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }

/* ============================================
   Badges
   ============================================ */
.badge {
    display: inline-flex; align-items: center; padding: 2px 8px;
    font-size: 0.6875rem; font-weight: 600; border-radius: 20px; letter-spacing: 0.02em;
}
.badge-blue { background: var(--accent-soft); color: var(--accent); }
.badge-red { background: var(--danger-soft); color: var(--danger); }

/* ============================================
   Empty State
   ============================================ */
.empty-state { text-align: center; padding: var(--space-2xl); color: var(--text-muted); }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: var(--space-md); opacity: 0.3; }
.empty-state h3 { font-size: 1.125rem; color: var(--text-secondary); margin-bottom: var(--space-sm); }
.empty-state p { font-size: 0.875rem; margin-bottom: var(--space-lg); }

/* ============================================
   Settings - 2 Column Layout
   ============================================ */
/* Settings Layout - Tabbed Navigation */
.settings-layout {
    display: flex;
    gap: 0;
    max-width: 960px;
    min-height: 500px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.settings-nav {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    width: 100%;
}
.settings-nav-item:hover { background: var(--hover); color: var(--text-primary); }
.settings-nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.settings-nav-icon { font-size: 1.1rem; width: 22px; text-align: center; }
/* Reiter eines Moduls: dessen Menüsymbol (SVG) statt eines Zeichens, gleich breit */
svg.settings-nav-icon { width: 18px; height: 18px; padding: 0 2px; box-sizing: content-box; flex-shrink: 0; }
.settings-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}
.settings-tab-panel { animation: fadeIn 0.2s; }
.settings-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.settings-tab-header h2 { margin: 0; font-size: 1.125rem; }
.settings-section { }
.settings-section-title {
    font-size: 0.9375rem;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

/* Zwei-Faktor (fix159): Stand in den Einstellungen und Fenster zum Einrichten */
.mfa-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mfa-state-on { color: var(--success); font-weight: 500; }
.mfa-state-off { color: var(--warning); font-weight: 500; }
.mfa-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#mfa-modal p { margin: 0 0 12px; line-height: 1.5; }
.mfa-countdown { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); }
.mfa-countdown-due { background: var(--danger-soft); color: var(--danger); }
.mfa-choice {
    display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; margin-bottom: 10px;
    padding: 12px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-md);
    background: var(--bg-tertiary); color: var(--text-primary); font: inherit; cursor: pointer;
}
.mfa-choice:hover, .mfa-choice:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.mfa-choice-icon { font-size: 1.5rem; line-height: 1; }
/* QR-Code immer schwarz auf weiss mit Rand – auch im dunklen Design, sonst lesen Kameras ihn nicht */
.mfa-qr { width: 220px; max-width: 100%; margin: 0 auto 16px; background: #fff; border-radius: var(--radius-sm); }
.mfa-qr svg { display: block; width: 100%; height: auto; }
.mfa-secret code, .mfa-codes code {
    font-family: ui-monospace, Consolas, monospace; font-size: 1rem; letter-spacing: 1px;
    background: var(--bg-input); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 6px 10px;
}
.mfa-secret code { display: block; text-align: center; overflow-wrap: anywhere; }
.mfa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mfa-codes code { text-align: center; }
.mfa-code-input { font-family: ui-monospace, Consolas, monospace; font-size: 1.25rem; letter-spacing: 2px; text-align: center; }
.mfa-push-line { margin: 12px 0 0; }

/* Anmeldung auf dem Handy bestätigen (fix160): Fenster mit dem Feld für die Zahl (fix218), Schalter je Gerät unter Mitteilungen */
#push-login-modal p { margin: 0 0 12px; line-height: 1.5; }
#push-login-modal label { display: block; margin-bottom: 8px; }
#push-login-modal .btn:disabled { opacity: 0.45; cursor: default; }   /* «Bestätigen» erst mit zwei Ziffern */
.push-login-number { display: block; width: 132px; margin: 0 auto 4px; padding: 12px 0; font-size: 2rem; font-weight: 700; letter-spacing: 8px; text-indent: 8px; }
.push-login-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.push-login-line .push-login-text { flex: 1 1 220px; }
.push-login-on { color: var(--success); font-weight: 500; }

/* Mail-Filter: eine Regel je Zeile, darunter die Vorschau */
.filter-rule { padding: 10px 0; border-bottom: 1px solid var(--border); }
.filter-rule-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-rule-num {
    flex: 0 0 22px; text-align: center; font-size: 0.75rem; font-weight: 600;
    color: var(--text-muted);
}
/* Basisbreiten knapp: Im Einstellungsbereich (960px minus Navigation) bleiben
   ~690px; die Felder wachsen per flex-grow in den Rest, statt umzubrechen. */
.filter-rule-from, .filter-rule-subject { flex: 1 1 120px; min-width: 0; }
.filter-rule-arrow { flex: 0 0 auto; color: var(--text-muted); }
.filter-rule-target { flex: 1 1 140px; min-width: 0; }
.filter-rule-seen {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.8125rem; color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.filter-rule-btns { flex: 0 0 auto; display: inline-flex; gap: 2px; margin-left: auto; }
.filter-rule-btns .btn-icon { width: 30px; height: 30px; min-height: 30px; font-size: 0.85rem; }
.filter-rule-btns .btn-icon:disabled { opacity: 0.3; cursor: default; }
.filter-rule-preview { padding: 6px 0 0 30px; min-height: 1.4em; line-height: 1.4; }
/* Regel aus "Filter" in einer Mail: hervorgehoben, bis die Liste neu gezeichnet wird */
.filter-rule-new { background: var(--accent-soft); border-radius: var(--radius-sm); padding-left: 6px; padding-right: 6px; }
.filter-unsaved { font-size: 0.8125rem; color: var(--warning); white-space: nowrap; }

@media (max-width: 700px) {
    .settings-layout { flex-direction: column; }
    .settings-nav {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 4px;
    }
    .settings-nav-item { white-space: nowrap; padding: 8px 12px; }
    .settings-content { padding: 16px; }
}

/* ============================================
   Mail Client
   ============================================ */
.mail-header {
    display: flex; align-items: center; gap: 12px; padding: 0 0 16px;
}
/* Wird es eng (Tablet, lange Kontonamen), geben Konto-Auswahl und Suche nach, die Knöpfe
   nicht – vorher drückte die Leiste (~740 px) den Inhalt über den Fensterrand (fix122).
   Am Handy bricht sie stattdessen in zwei Zeilen um (siehe dort). */
.mail-header > .btn, #mail-sync-interval { flex-shrink: 0; }
#mail-account-selector { min-width: 140px; text-overflow: ellipsis; }
.mail-header > div:last-child { flex: 0 1 220px; min-width: 140px; }
#mail-search-input { width: 100% !important; }

/* 3-Column Layout */
#view-mail .mail-layout {
    display: grid !important;
    /* Breiten zieht man an den Trennlinien (.mail-resizer); app.js setzt die Variablen */
    grid-template-columns: var(--mail-col-folders, 220px) var(--mail-col-list, 350px) 1fr !important;
    position: relative;
    grid-template-rows: 1fr !important;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    height: calc(100vh - 112px);
    min-height: 500px;
}

/* Folders Panel */
#view-mail .mail-folders {
    background: var(--bg-secondary); overflow-y: auto; padding: 8px 0; min-width: 0;
}
.mail-folder-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    cursor: pointer; font-size: 0.875rem; color: var(--text-secondary); transition: background 0.15s;
    /* Unterordner einrücken; --depth setzt app.js pro Eintrag. Am Handy hebt
       die Mobilregel das über ihr padding-Kurzschreib wieder auf. */
    padding-left: calc(16px + var(--depth, 0) * 14px);
}
/* "Eltern › Ordner" – nur am Handy sichtbar, wo Chips keine Einrückung zeigen */
.mail-folder-crumb { display: none; color: var(--text-muted); font-weight: 400; }
.mail-folder-item:hover { background: rgba(255,255,255,0.03); }
.mail-folder-item.mail-folder-active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
/* Ziehen von Mails und Ordnern (fix157 – vorher ohne Stil, man sah nicht, wo man ablegen kann) */
.mail-folder-item.mail-drop-target { outline: 1px dashed var(--border-light); outline-offset: -2px; }
.mail-folder-item.mail-drop-hover { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
.mail-folder-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
/* Ein-/Ausklappen (fix120); ohne Unterordner ein leerer Platzhalter, damit die Symbole fluchten */
.mail-folder-toggle {
    width: 20px; margin: -4px -6px -4px -14px; padding: 4px 0; flex-shrink: 0; text-align: center;
    font-size: 0.85rem; color: var(--text-secondary); border-radius: 4px; line-height: 1.2;
}
.mail-folder-toggle:not(.mail-folder-toggle-none):hover { background: var(--bg-card-hover); color: var(--text-primary); }
.mail-folder-item.mail-folder-active .mail-folder-toggle { color: inherit; }
/* Eingeklappter Ordner, in dem die geöffnete Mail-Liste steckt */
.mail-folder-item.mail-folder-has-active { color: var(--accent); }

/* Füllstand des Postfachs (fix124): unten in der Ordnerliste, bleibt bei langer Liste
   am unteren Rand stehen. Dieselben Balken in Einstellungen und Dashboard.
   -8px = Innenabstand der Spalte: sonst stünde er 8px über dem Rand, und darunter
   schimmerten beim Scrollen die Ordner durch. */
.mail-storage {
    position: sticky; bottom: -8px; margin: 8px 0 -8px; padding: 10px 16px 12px;
    background: var(--bg-secondary); border-top: 1px solid var(--border);
}
.mail-storage:empty { display: none; }
/* Ab Tablet als Fuss der Spalte; margin-top:auto braucht die Flex-Spalte. Am Handy
   bleibt die Ordnerleiste eine Chip-Zeile (dort ohne Füllstand, s. unten). */
@media (min-width: 769px) {
    #view-mail .mail-folders { display: flex; flex-direction: column; }
    .mail-storage { margin-top: auto; }
}
.storage-text { font-size: 0.75rem; color: var(--text-muted); }
.storage-text.storage-warn { color: var(--warning); }
.storage-text.storage-full { color: var(--danger); font-weight: 500; }
.storage-bar { height: 4px; margin-top: 5px; border-radius: 2px; background: var(--border-light); overflow: hidden; }
.storage-bar > span { display: block; height: 100%; background: var(--accent); }
.storage-bar.storage-warn > span { background: var(--warning); }
.storage-bar.storage-full > span { background: var(--danger); }
.account-storage { margin-top: 6px; max-width: 260px; }
/* Zahl der Mails je Konto (fix167) */
.account-info { flex: 1; min-width: 0; padding-right: 12px; }
.flex-between.account-row-open { align-items: flex-start; }   /* aufgeklappt: «Bearbeiten» bleibt oben */
.account-counts { margin-top: 6px; }
.account-counts-toggle { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 0.75rem; color: var(--text-muted); cursor: pointer; text-align: left; }
.account-counts-toggle:hover { color: var(--text-primary); }
.account-counts-arrow { display: inline-block; width: 0.8em; }
.account-counts-list { margin-top: 4px; max-width: 360px; font-size: 0.8rem; }
.account-count-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0 3px calc(var(--depth, 0) * 14px); border-bottom: 1px solid var(--border-light); }
.account-count-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-count-num { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.account-count-inbox { font-weight: 600; }
.account-count-off { color: var(--text-muted); }
.account-counts-note { margin-top: 4px; font-size: 0.75rem; color: var(--text-muted); }
.dashboard-storage .storage-bar { max-width: 220px; }
.dashboard-storage.storage-warn .dashboard-item-title { color: var(--warning); }
.dashboard-storage.storage-full .dashboard-item-title { color: var(--danger); }

/* Einstellungen → Mitteilungen (fix125) */
.push-hint {
    padding: 12px 14px; margin-bottom: 20px; border-radius: var(--radius-md);
    background: var(--warning-soft); color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5;
}
.push-here {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--radius-md);
    font-size: 0.875rem;
}
.push-here-on { border-color: var(--success); background: var(--success-soft); }
.push-device { padding: 12px 0; border-bottom: 1px solid var(--border); }
.push-device-head { gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.push-device-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.push-current {
    font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; margin-left: 4px;
    background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}
.push-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; }
.push-option { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; cursor: pointer; }
/* fix128: Mails pro Konto, Nachtruhe */
.push-group { margin-top: 12px; }
.push-group-label { font-size: 0.8rem; color: var(--text-muted); }
.push-group > .push-group-label { margin-bottom: -4px; }
.push-quiet-times { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--text-secondary); }
.push-time { width: auto; padding: 4px 8px; font-size: 0.875rem; }
/* Zeiten und "trotzdem senden" nur, wenn die Nachtruhe an ist */
.push-device:not(.push-quiet-on) .push-quiet-times,
.push-device:not(.push-quiet-on) .push-quiet-detail { display: none; }
.push-quiet-note { margin: 6px 0 0; }

/* Trennlinien zum Ziehen (fix120) – liegen über den 1px-Lücken des Rasters */
.mail-resizer {
    position: absolute; top: 0; bottom: 0; width: 9px; margin-left: -4px; z-index: 5;
    cursor: col-resize; touch-action: none; outline: none;
}
.mail-resizer[data-col="folders"] { left: var(--mail-col-folders, 220px); }
.mail-resizer[data-col="list"] { left: calc(var(--mail-col-folders, 220px) + 1px + var(--mail-col-list, 350px)); }
.mail-resizer::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px;
    background: transparent; transition: background 0.15s;
}
.mail-resizer:hover::after, .mail-resizer:focus-visible::after, .mail-resizing .mail-resizer::after { background: var(--accent); width: 2px; left: 3px; }
/* Während des Ziehens: kein Markieren von Text, und eine Mail im iframe schluckt die Maus nicht */
.mail-layout.mail-resizing { user-select: none; cursor: col-resize; }
.mail-layout.mail-resizing iframe { pointer-events: none; }
.mail-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-badge {
    background: var(--accent); color: #fff; font-size: 0.6875rem; font-weight: 700;
    padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center;
}

/* Folder Context Menu */
.mail-folder-ctx {
    position: fixed; z-index: 9999; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0,0,0,0.15); min-width: 160px;
    padding: 4px 0; animation: fadeIn 0.1s ease;
}
.mail-folder-ctx-item {
    padding: 8px 14px; cursor: pointer; font-size: 0.875rem; color: var(--text-primary);
    transition: background 0.1s;
}
.mail-folder-ctx-item:hover { background: var(--bg-card-hover); }
.mail-folder-ctx-danger { color: var(--danger); }
.mail-folder-ctx-danger:hover { background: #fef2f2; }

/* Message List Panel */
#view-mail .mail-list {
    background: var(--bg-card); display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
.mail-list-header {
    padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 0.875rem; flex-shrink: 0;
}
/* Kopf der Liste: Ordner und Anzahl, darunter in eigener Zeile die Mehrfachauswahl (fix150) */
.mail-list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 4px; }
.mail-list-count { white-space: nowrap; }
.mail-bulk-actions { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mail-bulk-actions select { width: auto; max-width: 100%; padding: 4px 8px; font-size: 0.8125rem; }
/* Suche (fix156): "Alle N Treffer auswählen" als eigene Zeile über den Knöpfen */
.mail-select-hits { flex-basis: 100%; font-size: 0.8125rem; color: var(--text-secondary); }
.mail-select-hits .btn-text {
    background: none; border: none; padding: 0; font: inherit; color: var(--text-link); cursor: pointer; text-decoration: underline;
}
.mail-search-title { min-width: 0; overflow-wrap: anywhere; }
.mail-list-items { flex: 1; overflow-y: auto; }
.mail-list-pager { border-top: 1px solid var(--border); flex-shrink: 0; }
.mail-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px; }

/* Message Item - 2 line layout with checkbox */
.mail-msg-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
    font-size: 0.8125rem;
}
.mail-msg-item:hover { background: rgba(255,255,255,0.03); }
.mail-msg-item.mail-msg-selected { background: var(--accent-soft); }
.mail-msg-item.mail-msg-unread { border-left: 3px solid var(--accent); }
.mail-msg-check {
    flex-shrink: 0; width: 16px; height: 16px; margin-left: 10px; cursor: pointer;
}
.mail-msg-content {
    flex: 1; min-width: 0; cursor: pointer; padding: 8px 12px 8px 0;
}
/* Wischen am Handy (fix145, app.js "JUNK UND WISCHEN"): Hintergrund und Knöpfe gibt es nur während des
   Wischens (.mail-swipe-active) – sonst ist .mail-swipe ein gewöhnlicher Block ohne jede Wirkung. */
.mail-swipe-active { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; }
.mail-swipe-active .mail-msg-item { position: relative; z-index: 1; background-color: var(--bg-card); }
.mail-swipe-active .mail-msg-item.mail-msg-selected { background: linear-gradient(var(--accent-soft), var(--accent-soft)) var(--bg-card); }
.mail-swipe-bg { position: absolute; inset: 0; display: flex; }
.mail-swipe-bg.mail-swipe-to-left { background: var(--danger); }
.mail-swipe-bg.mail-swipe-to-right { background: var(--warning); }
.mail-swipe-btn {
    width: 88px; border: none; background: none; padding: 0 8px; cursor: pointer;
    color: #fff; font-size: 0.85rem; font-weight: 600; line-height: 1.2; transition: transform .15s;
}
.mail-swipe-btn-left { margin-left: auto; }   /* Löschen: rechts, zu sehen beim Wischen nach links */
.mail-swipe-to-left .mail-swipe-btn-right, .mail-swipe-to-right .mail-swipe-btn-left { visibility: hidden; }
.mail-swipe-armed .mail-swipe-btn { transform: scale(1.12); }
.mail-msg-row1 {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.mail-msg-from {
    font-size: 0.8125rem; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.mail-msg-date {
    font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
}
.mail-msg-subject {
    font-size: 0.8125rem; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.mail-msg-unread .mail-msg-from,
.mail-msg-unread .mail-msg-subject { font-weight: 600; color: var(--text-primary); }
.mail-msg-flagged { background: rgba(245,158,11,0.05); }
/* Zurück-zur-Liste: nur am Handy sichtbar, am Desktop stehen Liste und
   Leser ohnehin nebeneinander. */
.mail-back-btn { display: none; }
#mail-select-all { width: 16px; height: 16px; cursor: pointer; }

/* Reader Panel */
#view-mail .mail-reader { background: var(--bg-primary); overflow-y: auto; min-width: 0; }
.mail-reader-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; color: var(--text-muted);
}
.mail-reader-empty .empty-icon { font-size: 3rem; margin-bottom: 12px; }
.mail-detail { padding: 24px; }
.mail-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
/* Knopfleiste über der Mail (fix222): bis 1024 px (Handy, Tablet) eine Zeile, der Rest unter «⋯» (mailMoreMenu).
   Antworten, Weiterleiten und Löschen als Symbol (data-icon), ausser 600–768 px: dort hat die Mail allein die ganze
   Breite, auf dem Tablet steht sie schmal neben der Liste. Unter 360 px auch «Liste» nur als Pfeil. */
.mail-more-btn { display: none; }
.mail-more-menu { min-width: 210px; max-height: calc(100vh - 16px); overflow-y: auto; }
.mail-more-menu .mail-folder-ctx-item { padding: 11px 16px; font-size: 0.9375rem; }
@media (max-width: 1024px) {
    .mail-detail-actions .mail-act-more { display: none; }
    .mail-detail-actions .mail-more-btn { display: inline-flex; margin-left: auto; min-width: 42px; padding-left: 10px; padding-right: 10px; font-size: 1rem; }
}
@media (max-width: 599px), (min-width: 769px) and (max-width: 1024px) {
    .mail-act-icon .mail-act-label { display: none; }
    .mail-act-icon::before { content: attr(data-icon); }
    .mail-detail-actions .mail-act-icon { min-width: 42px; padding-left: 10px; padding-right: 10px; font-size: 1rem; }
}
@media (max-width: 359px) {
    .mail-back-btn .mail-act-label { display: none; }
    .mail-back-btn::before { content: attr(data-icon); }
}
.mail-detail-header {
    border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 20px;
}
.mail-detail-subject {
    font-size: 1.25rem; font-weight: 600; color: var(--text-primary);
    margin: 0 0 12px; line-height: 1.4;
}
.mail-detail-meta { font-size: 0.8125rem; }
.mail-detail-row { padding: 2px 0; color: var(--text-secondary); }
.mail-detail-label { color: var(--text-muted); min-width: 40px; display: inline-block; }
.mail-detail-body {
    font-size: 0.9375rem; line-height: 1.6; color: var(--text-primary);
    word-wrap: break-word; overflow-wrap: break-word;
}
.mail-detail-body pre { white-space: pre-wrap; font-family: inherit; }
/* HTML-Mails stehen in einem abgeschotteten Rahmen (fix229, mailFrame in mail-shared.js): Höhe = Inhalt, Schrift, Farben,
   Bilder und Links setzt der Rahmen selbst – CSS von hier reicht nicht hinein. */
.mail-frame { display:block; width:100%; height:40px; border:0; background:transparent; }
/* Mail im dunklen Design (fix168, wie Outlook): Sie steht auf weissem "Papier" und wird als Ganzes abgedunkelt – Weiss
   wird dunkel, schwarze Schrift hell, Farben bleiben erkennbar, Bilder werden zurückgedreht. ☀ (.mail-paper-light,
   toggleMailPaper) zeigt sie, wie der Absender sie gestaltet hat. Vorher übernahm sie die Farben des Designs, und
   ausdrücklich schwarze Schrift stand schwarz auf fast Schwarz. Im hellen Design bleibt alles wie bisher. */
body:not(.theme-light) .mail-paper { background:#fff; color:#000; padding:16px; border-radius:var(--radius-md); filter:invert(.9) hue-rotate(180deg); }
body:not(.theme-light) .mail-paper.mail-paper-light { filter:none; }
/* Bilder zurückdrehen und Linkfarbe: im Rahmen (fix229, html.mail-dunkel) */
body.theme-light .mail-paper-toggle { display:none; }
.mail-attachments {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.8125rem;
}
.mail-attachment-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-attachment-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
    padding: 4px 10px; font-size: 0.75rem; cursor: pointer; transition: all 0.15s;
}
.mail-attachment-chip:hover { border-color: var(--accent); background: var(--accent-soft); }

/* External content banner */
.mail-ext-banner {
    background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--radius-sm);
    padding: 8px 12px; margin-bottom: 12px; font-size: 0.8125rem; color: var(--warning);
    display: flex; align-items: center; gap: 8px;
}

/* Sync button */
.mail-sync-btn svg { display: block; }
.mail-sync-btn.mail-sync-spinning svg { animation: mail-spin 0.8s linear infinite; }
@keyframes mail-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Attachment Preview Overlay */
.mail-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.mail-preview-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}
.mail-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    font-weight: 600;
    gap: 12px;
}
.mail-preview-header span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mail-preview-header div {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.mail-preview-body {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}
.mail-preview-body img {
    max-width: 100%;
    max-height: calc(80vh - 60px);
    object-fit: contain;
}
.mail-preview-body iframe {
    width: 100%;
    height: calc(80vh - 60px);
    border: none;
}
.mail-preview-text {
    padding: 16px;
    font-size: 0.8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-primary);
    width: 100%;
    max-height: calc(80vh - 60px);
    overflow: auto;
}

/* Compose Attachments */
.compose-attachments { margin-top: 8px; }
.compose-attach-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.compose-attach-bar > span { white-space: nowrap; }
.compose-attach-hint { margin-left: auto; }
.compose-attach-list {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.compose-attach-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
    padding: 4px 8px 4px 10px; font-size: 0.8125rem; color: var(--text-primary);
}
.compose-attach-chip .compose-attach-remove {
    cursor: pointer; color: var(--text-muted); font-size: 1rem; line-height: 1;
    padding: 0 2px; border-radius: 3px; transition: color 0.15s;
}
.compose-attach-chip .compose-attach-remove:hover { color: var(--danger); }
.compose-drop-zone {
    border: 2px dashed var(--accent); border-radius: var(--radius-md);
    padding: 24px; text-align: center; color: var(--accent); font-size: 0.875rem;
    background: var(--accent-soft); margin-top: 8px;
}
.compose-drop-active { background: rgba(59, 130, 246, 0.15); }

/* Compose Recipient Wrap (with picker button) */
.compose-recipient-wrap { display: flex; gap: 6px; align-items: center; }
/* Adress-Vorschläge beim Tippen (fix169, recipient-suggest.js): Liste unter dem Feld */
.compose-recipient-wrap, .recipient-wrap { position: relative; }
.recipient-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; margin-top: 2px; max-height: 320px; overflow-y: auto;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.recipient-suggest-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; }
.recipient-suggest-item.active, .recipient-suggest-item:hover { background: var(--bg-card-hover); }
.recipient-suggest-text { flex: 1; min-width: 0; }
.recipient-suggest-name, .recipient-suggest-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipient-suggest-name { font-size: 0.875rem; color: var(--text-primary); }
.recipient-suggest-email { font-size: 0.75rem; color: var(--text-muted); }
.recipient-suggest-contact { font-size: 0.8rem; opacity: 0.6; }
.recipient-suggest-forget { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; line-height: 1; padding: 2px 6px;
    border-radius: var(--radius-sm); cursor: pointer; }
.recipient-suggest-forget:hover { color: var(--danger); background: var(--danger-soft); }
.compose-recipient-wrap .form-input { flex: 1; }
.compose-pick-btn { flex-shrink: 0; font-size: 1rem; padding: 0 8px; height: 36px; }

/* Contact Picker Popup */
.contact-picker-list {
    flex: 1; overflow-y: auto; padding: 6px 0;
}
.contact-picker-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 16px; cursor: pointer; transition: background 0.1s;
}
.contact-picker-item:hover { background: var(--bg-card-hover); }
.contact-picker-avatar { width: 36px; height: 36px; font-size: 0.8125rem; flex-shrink: 0; }
.contact-picker-info { min-width: 0; }
.contact-picker-name { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-picker-email { font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-picker-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 0.875rem; }

/* ============================================
   Mail Loading Screen
   ============================================ */
.mail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    gap: 20px;
    padding: 40px;
    text-align: center;
    animation: fadeIn 0.2s ease;
}
.mail-loading-envelope {
    font-size: 52px;
    animation: mailFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}
.mail-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: mail-spin 0.75s linear infinite;
}
.mail-loading-msg {
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 300px;
    line-height: 1.5;
    transition: opacity 0.2s ease;
    font-style: italic;
}
@keyframes mailFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%       { transform: translateY(-10px) rotate(2deg); }
}

/* ============================================
   Mailbox Import Modal
   ============================================ */
#mail-import-modal .modal-body { text-align: center; padding: 28px 24px 24px; }
.import-icon {
    font-size: 48px;
    animation: mailFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
    margin-bottom: 14px;
}
.import-status {
    font-size: 0.95rem;
    color: var(--text-secondary);
    min-height: 22px;
    margin-bottom: 18px;
    line-height: 1.5;
}
.import-progress-wrap { margin-top: 8px; }
.import-progress-bar {
    height: 10px;
    background: var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.import-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--primary);
    border-radius: 6px;
    transition: width 0.3s ease;
}
.import-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    margin-top: 8px;
}
.import-progress-meta #import-folder {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.import-done-actions { margin-top: 20px; }

/* ============================================
   Animations
   ============================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================
   Mobile / Responsive
   ============================================ */
@media (max-width: 1024px) {
    #view-mail .mail-layout { grid-template-columns: 180px 260px 1fr !important; }
    .mail-resizer { display: none; }
}
@media (max-width: 768px) {
    .calendar-grid { font-size: 0.75rem; }
    .calendar-cell { min-height: 60px; padding: var(--space-xs); }
    .page-header { flex-direction: column; align-items: flex-start; }
    .modal { max-width: 100%; margin: var(--space-md); }
    #view-mail .mail-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto 1fr !important;
        height: auto !important; min-height: auto !important;
    }
    .mail-folders { display: flex !important; overflow-x: auto; padding: 4px 8px; gap: 4px; }
    .mail-folder-item {
        padding: 6px 12px; white-space: nowrap; border-radius: 16px;
        background: var(--bg-card); flex-shrink: 0;
    }
    .mail-folder-item.mail-folder-active { background: var(--accent); color: #fff; }
    /* Chips: Pfeil nur bei Ordnern mit Unterordnern, ohne Platzhalter */
    .mail-folder-toggle { margin: 0 2px 0 -4px; }
    .mail-folder-toggle-none { display: none; }
    /* In der Chip-Zeile kein Platz – am Handy warnt das Dashboard, den Stand zeigen die Einstellungen */
    .mail-storage { display: none; }
    #view-mail .mail-list { max-height: 300px; }
    .mail-reader { min-height: 300px; }
}

/* ============================================
   Scrollbar
   ============================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============================================
   Utility Classes
   ============================================ */
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-sm { font-size: 0.8125rem; }
.text-xs { font-size: 0.6875rem; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.hidden { display: none !important; }

/* Event Modal - Two Column Layout */
.event-modal-wide { max-width: 820px !important; }
.event-form-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.event-form-right { border-left: 1px solid var(--border); padding-left: 20px; }

.attendee-input-row { display: flex; gap: 6px; }
.attendee-input-row .form-input { flex: 1; }
.event-invite-sender { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.8125rem; color: var(--text-secondary); cursor: pointer; }

/* Attendee Detail List */
.attendee-detail-list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; max-height: 340px; overflow-y: auto; }
.attendee-empty { color: var(--text-muted); font-size: 0.8125rem; padding: 12px 0; text-align: center; }
.attendee-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 4px;
    border-bottom: 1px solid var(--border);
}
.attendee-row:last-child { border-bottom: none; }
.attendee-row-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft);
    color: var(--accent); display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.75rem; flex-shrink: 0;
}
.attendee-row-info { flex: 1; min-width: 0; }
.attendee-row-email { font-size: 0.8125rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attendee-row-status { font-size: 0.6875rem; margin-top: 1px; }
.attendee-row-status.accepted { color: #22c55e; }
.attendee-row-status.declined { color: #ef4444; }
.attendee-row-status.tentative { color: #3b82f6; }
.attendee-row-status.pending { color: #f59e0b; }
.attendee-row-remove { opacity: 0.4; flex-shrink: 0; }
.attendee-row:hover .attendee-row-remove { opacity: 1; }

@media(max-width:640px){
    .event-modal-wide { max-width: 95vw !important; }
    .event-form-grid { grid-template-columns: 1fr; gap: 12px; }
    .event-form-right { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 12px; }
}

/* Calendar invitation banner */
.mail-invitation-banner {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; margin: 0 0 8px 0; border-radius: var(--radius-md);
    background: var(--accent-soft); border: 1px solid var(--accent);
}
/* Durchscheinend statt fest hell (fix234): im dunklen Design war die helle Schrift darauf kaum zu lesen */
.mail-invitation-banner.cancel {
    background: rgba(239, 68, 68, 0.1); border-color: var(--danger);
}
.mail-invitation-banner.reply {
    background: rgba(34, 197, 94, 0.12); border-color: #22c55e;
}
.mail-invitation-banner.reply.cancel {
    background: rgba(239, 68, 68, 0.1); border-color: var(--danger);
}
.invitation-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.invitation-info { flex: 1; }
.invitation-info strong { display: block; margin-bottom: 4px; }
.invitation-details { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 8px; }
.invitation-details a { color: var(--accent); }
.invitation-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Calendar Reminder Popup */
#reminder-container {
    position: fixed; top: 20px; right: 20px; z-index: 10000;
    display: flex; flex-direction: column; gap: 12px;
    pointer-events: none;
}
.reminder-popup {
    pointer-events: auto;
    background: var(--bg-primary); border: 2px solid var(--accent);
    border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
    width: 360px; max-width: calc(100vw - 40px);
    transform: translateX(120%); opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275), opacity 0.3s;
}
.reminder-popup.reminder-visible {
    transform: translateX(0); opacity: 1;
}
.reminder-popup-inner { padding: 16px; }
.reminder-icon-wrap {
    text-align: center; margin-bottom: 8px;
}
.reminder-bell {
    font-size: 2rem;
    display: inline-block;
    animation: bellShake 0.8s ease-in-out infinite;
}
@keyframes bellShake {
    0%,100% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-14deg); }
    45% { transform: rotate(8deg); }
    60% { transform: rotate(-8deg); }
    75% { transform: rotate(2deg); }
}
.reminder-content { margin-bottom: 12px; }
.reminder-title {
    font-size: 1.05rem; font-weight: 600; color: var(--text-primary);
    margin-bottom: 4px;
}
.reminder-time { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 2px; }
.reminder-location { font-size: 0.8125rem; color: var(--text-muted); }
.reminder-actions { display: flex; gap: 8px; justify-content: flex-end; }

@media(max-width:480px){
    #reminder-container { top: 10px; right: 10px; left: 10px; }
    .reminder-popup { width: 100%; }
}

/* =============================================
   Einträge mit Symbol, Titel und Zeile darunter – fast volle Postfächer in der Kachel «Hinweise» (storageWarningsHtml);
   die Klassen heissen nach dem Dashboard, in dem sie bis fix181 standen
   ============================================= */
.dashboard-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 10px var(--space-md);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.dashboard-item:last-child { border-bottom: none; }
.dashboard-item:hover { background: var(--bg-card-hover); }
.dashboard-item-icon { font-size: 1.25rem; width: 2rem; text-align: center; flex-shrink: 0; }
.dashboard-item-body { flex: 1; min-width: 0; }
.dashboard-item-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-item-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

/* =============================================
   ADMIN USER LIST (fix50)
   ============================================= */
.admin-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 12px var(--space-md);
    border-bottom: 1px solid var(--border);
}
.admin-user-row:last-child { border-bottom: none; }
.admin-user-row:hover { background: var(--bg-card-hover); }
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name { font-weight: 500; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-user-email { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: 8px; }
/* Nutzungszahlen pro Benutzer (Postfächer / Kalender / Adressbücher / Notizen) */
.admin-user-usage {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.admin-user-usage > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* Office-Programme: installierte und neueste Version (fix188) */
.admin-apps-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: 8px; }
.admin-apps-head h3 { margin: 0; font-size: 1rem; }
.admin-apps-check { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.admin-apps-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.admin-apps-table th, .admin-apps-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.admin-apps-table th { font-weight: 500; font-size: 0.8125rem; color: var(--text-muted); }
.admin-apps-table tr:last-child td { border-bottom: none; }
.admin-apps-table td:last-child { padding-right: 0; }
.admin-apps-table a, .admin-apps-table .badge { white-space: nowrap; }
.admin-apps-note { margin: 10px 0 0; }
/* Administration › Verschlüsselung (fix216, schlank seit fix222) */
.crypto-line { margin: 0 0 6px; }
.crypto-alarm { color: var(--danger); font-weight: 600; }
/* Lesefenster: Office-Anhang im Hauptfenster geöffnet (fix189) */
.mw-office-hint { margin-top: 6px; }
/* Meetings über OpenTalk (fix195, meetings.js) */
.meet-body { max-width: 760px; }
.meet-connect-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.meet-connect-form .form-input { flex: 1; min-width: 180px; }
.meet-need { margin: 14px 0 0; }   /* fix198: Hinweis «Konto beim Admin» unter dem Formular */
.meet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.meet-start .card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.meet-start + .meet-start { margin-top: 12px; }   /* «Meeting planen» unter «Meeting jetzt starten» (fix226) */
.meet-start-btn { font-size: 1rem; padding: 10px 18px; }
.meet-start p { margin: 0; }
.meet-last { width: 100%; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.meet-link-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.meet-link-row .form-input { flex: 1 1 100%; font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; }   /* der ganze Link sichtbar, Knöpfe darunter */
.meet-unlink { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-family: inherit; text-decoration: none; }   /* Grösse über text-sm */
.meet-unlink:hover { text-decoration: underline; }
.meet-blocked { color: var(--warning, #b45309); margin: 0 0 6px; }
.meet-title { font-size: 1rem; margin: 20px 0 8px; }
.meet-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-light); }
.meet-row:last-child { border-bottom: 0; }
.meet-when { flex: none; width: 120px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.meet-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meet-ready { font-weight: 600; margin: 0 0 6px; }
/* Meeting planen und Übersicht (fix226) */
.meet-plan-when { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0 12px; }
.meet-plan-to-row { display: flex; gap: 8px; align-items: center; position: relative; }
.meet-plan-to-row .form-input { flex: 1; min-width: 0; }
.meet-plan-hint { margin-top: 4px; }
.meet-plan-opts { display: flex; flex-wrap: wrap; margin: 0 0 14px; }
.meet-row.meet-mine { flex-wrap: wrap; row-gap: 6px; }
.meet-people, .meet-by { flex: 1 1 100%; padding-left: 132px; }
.meet-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.meet-person { font: inherit; font-size: 0.75rem; line-height: 1.4; padding: 2px 8px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meet-person-accepted { color: var(--success, #15803d); border-color: currentColor; }
.meet-person-tentative { color: var(--warning, #b45309); border-color: currentColor; }
.meet-person-declined { color: var(--danger); border-color: currentColor; text-decoration: line-through; }
.meet-people-sum { margin-left: 2px; }
.meet-menu { min-width: 200px; }
/* Handy (fix223): Titel oben über die ganze Breite, darunter Zeit und Knöpfe – sonst blieb für den Titel kaum Platz */
@media (max-width: 600px) {
    .meet-row { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; }
    .meet-what { flex: 1 1 100%; order: -1; white-space: normal; }
    .meet-when { width: auto; flex: 1; }
    .meet-people, .meet-by { padding-left: 0; }
    .meet-plan-when { grid-template-columns: 1fr 1fr; }
    .meet-plan-when .form-group:first-child { grid-column: 1 / -1; }
}
/* fix196: Kennwort und Warteraum, Meeting im Termin (seit fix223 auch Handy und Tablet) */
.meet-start-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.meet-opts { display: inline-flex; align-items: center; gap: 16px; }   /* beide Kästchen brechen zusammen um */
.meet-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.meet-pw { margin: 8px 0 0; }
.meet-pw strong { font-family: ui-monospace, Consolas, monospace; font-size: 1rem; letter-spacing: 0.06em; }
.event-meet { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: -6px 0 14px; }
.event-meet-ok { color: var(--success, #15803d); font-weight: 600; }

/* =============================================
   NOTES SPLIT PANEL (fix38)
   ============================================= */
.notes-split {
    display: flex; gap: 0;
    height: calc(100vh - 140px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden; background: var(--bg-card);
}
.notes-list {
    width: 280px; min-width: 240px;
    overflow-y: auto;
    border-right: 1px solid var(--border);
}
.note-list-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}
.note-list-item:hover { background: var(--bg-card-hover); }
.note-list-item.selected { background: var(--accent-soft); border-left: 3px solid var(--accent); padding-left: 13px; }
.note-list-color { width: 4px; border-radius: 2px; align-self: stretch; flex-shrink: 0; min-height: 36px; }
.note-list-body { flex: 1; min-width: 0; }
.note-list-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-list-preview { font-size: 0.775rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Note Detail Panel */
.note-detail { flex: 1; overflow-y: auto; background: var(--bg-primary); }
.note-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); }
.note-detail-empty .empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.4; }
.note-detail-colorbar { height: 4px; }
.note-detail-content { padding: 28px 32px; max-width: 720px; }
.note-detail-title { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; }
.note-detail-body { font-size: 0.9375rem; color: var(--text-primary); line-height: 1.7; }
.note-detail-body ul, .note-detail-body ol { padding-left: 20px; margin: 6px 0; }
.note-detail-body li { margin: 3px 0; }
.note-detail-body p { margin: 4px 0; }
.note-detail-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--border); }
.note-detail-actions { display: flex; gap: 8px; margin-top: 16px; }

/* Toolbar in Note Modal */
.note-toolbar { display: flex; gap: 6px; margin-bottom: 6px; }

@media (max-width: 768px) {
    .notes-split { flex-direction: column; height: auto; }
    .notes-list { width: 100%; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--border); }
    .note-detail { min-height: 50vh; }
    .note-detail-content { padding: 20px 16px; }
}

/* =============================================
   AUFGABEN (fix141)
   ============================================= */
.tasks-split {
    display: flex; height: calc(100vh - 140px);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    overflow: hidden; background: var(--bg-card);
}
.tasks-lists { width: 240px; min-width: 200px; overflow-y: auto; border-right: 1px solid var(--border); padding: 8px; }
.task-list-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-primary); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
    transition: background var(--transition-fast);
}
.task-list-item:hover { background: var(--bg-card-hover); }
.task-list-item.active { background: var(--accent-soft); font-weight: 600; }
.task-list-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.task-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-list-count { font-size: 0.75rem; color: var(--text-muted); }
.task-list-shared { font-size: 0.75rem; opacity: 0.7; }
.tasks-list-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.task-check:disabled { cursor: default; opacity: 0.45; }
.task-check:disabled:hover { border-color: var(--text-muted); background: none; }
.tasks-main { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px; }
.tasks-main-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tasks-main-header h2 { font-size: 1.125rem; margin: 0; overflow-wrap: anywhere; }
.task-add { display: flex; gap: 8px; margin-bottom: 8px; }
.task-add .form-input { flex: 1; min-width: 0; }
.task-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.task-check {
    width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--text-muted); border-radius: 50%; background: none;
    color: #fff; font-size: 12px; line-height: 1; cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.task-check:hover { border-color: var(--success); background: var(--success-soft); }
.task-row.done .task-check { border-color: var(--success); background: var(--success); }
.task-body { flex: 1; min-width: 0; cursor: pointer; }
.task-title { font-size: 0.9375rem; color: var(--text-primary); overflow-wrap: anywhere; }
.task-row.done .task-title { text-decoration: line-through; color: var(--text-muted); }
.task-prio { color: var(--warning); font-weight: 700; margin-right: 6px; }
.task-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; font-size: 0.75rem; color: var(--text-muted); }
.task-due.overdue { color: var(--danger); font-weight: 600; }
.task-due.today { color: var(--accent); font-weight: 600; }
.tasks-empty { padding: 28px 0; text-align: center; color: var(--text-muted); font-size: 0.875rem; }
.tasks-done-toggle {
    margin: 14px 0 4px; padding: 0; border: 0; background: none;
    color: var(--text-link); font: inherit; font-size: 0.8125rem; cursor: pointer;
}
.tasks-done-toggle:hover { text-decoration: underline; }
.task-form-row > .form-group { flex: 1; min-width: 0; }

@media (max-width: 768px) {
    .tasks-split { flex-direction: column; height: auto; }
    .tasks-lists { width: 100%; min-width: 0; display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
    .task-list-item { width: auto; flex-shrink: 0; }
    .task-list-name { overflow: visible; }
    .tasks-main { padding: 12px; }
    .task-form-row { flex-direction: column; gap: 0; }
}

/* =============================================
   HELP CENTER MODAL
   ============================================= */
.help-modal {
    max-width: 860px;
    width: 95vw;
    height: 82vh;
    max-height: 720px;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.help-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.help-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.help-nav {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.help-search-wrap {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.help-search-wrap .form-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 0.8125rem;
}
#help-nav-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}
.help-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.help-nav-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.help-nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    border-left: 3px solid var(--accent);
    padding-left: 11px;
}
.help-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-primary);
}
.help-content h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--text-primary);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.help-content h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 20px 0 8px;
    color: var(--text-primary);
}
.help-content h3:first-of-type { margin-top: 4px; }
.help-content p { margin: 0 0 10px; color: var(--text-secondary); }
.help-content ul, .help-content ol { margin: 0 0 12px; padding-left: 20px; color: var(--text-secondary); }
.help-content li { margin: 4px 0; }
.help-content em { color: var(--accent); font-style: normal; font-weight: 500; }
.help-content strong { color: var(--text-primary); font-weight: 600; }
.help-content code {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    color: var(--accent);
    word-break: break-all;
}
.help-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 16px;
    font-size: 0.875rem;
}
.help-table th, .help-table td {
    padding: 8px 12px;
    border: 1px solid var(--border);
    text-align: left;
    color: var(--text-secondary);
}
.help-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-primary);
}
.help-table tr:nth-child(even) td { background: var(--bg-card-hover); }
.help-shortcuts-table td:first-child { white-space: nowrap; }
kbd {
    display: inline-block;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 7px;
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 600;
}
.help-note {
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent);
    border-radius: 0 4px 4px 0;
    padding: 8px 12px;
    font-size: 0.8125rem;
    color: var(--text-muted) !important;
    margin: 12px 0 16px !important;
}

@media (max-width: 600px) {
    .help-modal { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
    .help-nav { width: 160px; }
    .help-content { padding: 16px; }
    .help-nav-item { font-size: 0.8rem; padding: 8px 10px; }
}

/* =============================================================
   MOBIL-OPTIMIERUNG (fix93)
   -------------------------------------------------------------
   Bewusst als EIN Block am Dateiende: So überschreibt er alle
   vorherigen Regeln, und der Desktop bleibt garantiert unberührt –
   sämtliche Regeln hier greifen nur unterhalb 768px.

   Ausgangsproblem: Die Oberfläche war für grosse Bildschirme
   dimensioniert (79 Stellen mit Schrift unter 14px). Am Handy musste
   man zoomen, um zu lesen – und danach seitlich schieben.
   ============================================================= */
@media (max-width: 768px) {

    /* Grundschrift anheben. Da fast alles in rem gerechnet ist, wächst
       damit die gesamte Oberfläche gleichmässig mit – ohne 79 Einzelregeln. */
    html { font-size: 17px; }

    /* Fingerflächen: Apple empfiehlt 44px, Google 48px. */
    .btn { min-height: 44px; padding: 10px 16px; }
    .btn-sm { min-height: 38px; font-size: 0.85rem; padding: 8px 14px; }
    .btn-icon { width: 44px; height: 44px; min-height: 44px; }
    .form-input, select.form-input { min-height: 44px; font-size: 1rem; }
    input[type="checkbox"] { width: 20px; height: 20px; }

    /* --- E-Mail --------------------------------------------------------
       Die Werkzeugleiste stand in EINER nicht umbrechenden Zeile: Konto-
       Auswahl, drei Buttons, Intervall und ein 220px breites Suchfeld.
       Das allein zwang das Layout über die Bildschirmbreite hinaus. */
    /* Zwei Zeilen statt drei, ohne ein Bedienelement wegzulassen. Die
       flex-basis-Werte sind bewusst klein: Der Umbruch entscheidet sich an
       der Basisbreite, das Wachsen danach – so bleibt die Aufteilung stabil,
       statt von der längsten Kontobezeichnung abzuhängen.
       Zeile 1: Konto · Sync · Intervall   Zeile 2: Neue E-Mail · Suche */
    .mail-header { flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }
    #mail-account-selector {
        order: 1; flex: 1 1 120px; min-width: 0; width: auto !important;
    }
    .mail-sync-btn { order: 2; flex: 0 0 auto; }
    #mail-sync-interval { order: 3; flex: 0 0 auto; }
    .mail-header > .btn-primary { order: 4; flex: 1 1 auto; }
    /* Der 'flex:1'-Abstandhalter erzwingt im Umbruch eine leere Zeile. */
    .mail-header > div[style*="flex:1"] { display: none; }
    .mail-header > div:last-child { order: 5; flex: 1 1 140px; }
    #mail-search-input { width: 100% !important; font-size: 1rem !important; }

    /* Betreff und Absender durften bisher nicht umbrechen (nowrap + Ellipsis).
       Grössere Schrift hiess dort nicht "lesbarer", sondern "früher abgeschnitten".
       Der Betreff bekommt deshalb zwei echte Zeilen. */
    .mail-msg-item { font-size: 0.95rem; }
    .mail-msg-content { padding: 12px 14px 12px 0; }
    .mail-msg-from { font-size: 0.95rem; font-weight: 600; }
    .mail-msg-date { font-size: 0.8rem; }
    .mail-msg-subject {
        font-size: 0.9rem; margin-top: 4px;
        white-space: normal; text-overflow: clip; line-height: 1.35;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .mail-msg-check, #mail-select-all { width: 20px; height: 20px; }
    .mail-folder-item { padding: 10px 16px; font-size: 0.9rem; }
    .mail-folder-crumb { display: inline; }
    .mail-detail-subject { font-size: 1.15rem; line-height: 1.35; }
    /* Fremdes Mail-HTML hat oft feste Breiten – das darf hier scrollen,
       ohne die ganze Seite mitzuziehen. */
    .mail-detail-body {
        font-size: 1rem; line-height: 1.6;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
    }

    /* Liste ODER Mail, nie beides. Vorher standen sie untereinander, und
       jede gelesene Mail hiess: an der Liste vorbeiscrollen. Die Klasse
       "mail-reading" setzt app.js beim Öffnen und nimmt sie beim Zurück
       wieder weg. */
    .mail-back-btn { display: inline-flex !important; }

    #view-mail:not(.mail-reading) .mail-reader { display: none !important; }
    #view-mail:not(.mail-reading) .mail-list { max-height: none; }

    #view-mail.mail-reading .mail-folders { display: none !important; }
    #view-mail.mail-reading .mail-list { display: none !important; }
    #view-mail.mail-reading .mail-header { display: none; }
    #view-mail.mail-reading .mail-reader { min-height: 70vh; }

    /* --- Kalender --- */
    .calendar-grid { font-size: 0.85rem; }
    .calendar-cell { min-height: 72px; }
    .calendar-header-cell { font-size: 0.8rem; padding: 8px 2px; }
    .calendar-event { font-size: 0.75rem; padding: 3px 6px; margin-bottom: 3px; }
    .calendar-nav .month-title { min-width: auto; font-size: 1.1rem; }
    .week-day-header { font-size: 0.8rem; }
    .week-event { font-size: 0.75rem; }

    /* --- Kontakte --- */
    .contact-item { padding: 14px 16px; }
    .contact-detail-content { padding: 20px 16px; }

    /* --- Notizen (auf dem Handy vor allem zum Lesen) --- */
    .note-detail-content { font-size: 1rem; line-height: 1.65; }

    /* --- Einstellungen: hatte als einzige Ansicht gar keine Mobilregel,
           die 220px breite Navigation sprengte den Bildschirm. --- */
    .settings-layout { flex-direction: column; }
    .settings-nav {
        width: 100%; flex-direction: row; overflow-x: auto;
        border-right: 0; border-bottom: 1px solid var(--border);
        gap: 4px; -webkit-overflow-scrolling: touch;
    }
    /* width:100% gilt der vertikalen Desktop-Navigation; in der Zeile machte
       es jeden Reiter bildschirmbreit – man sah einen und scrollte für jeden. */
    .settings-nav-item { white-space: nowrap; flex-shrink: 0; padding: 10px 14px; width: auto; }
    .filter-rule-btns .btn-icon { width: 38px; height: 38px; min-height: 38px; }

    /* Bewusst KEIN "overflow-x: hidden" auf html/body: In iOS Safari wird der
       Body dadurch zum Scroll-Container, und position:fixed-Elemente wie die
       Seitenleiste verhalten sich nicht mehr zuverlässig. Breite Inhalte
       bekommen stattdessen oben einzeln ihren eigenen Scrollbereich. */
    .modal { max-width: calc(100vw - 24px); }
}

/* =============================================
   DATEIEN (fix183): Explorer für die Nextcloud – nur am Computer (files.js)
   ============================================= */
.files-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.files-bar-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.files-conn { width: auto; max-width: 220px; padding-top: 6px; padding-bottom: 6px; }
.files-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; flex: 1; min-width: 160px; font-size: 0.875rem; }
.files-crumbs button { background: none; border: 0; color: var(--text-secondary); padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; }
.files-crumbs button:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.files-crumbs button:last-child { color: var(--text-primary); font-weight: 600; }
.files-crumb-sep { color: var(--text-muted); }
.files-filter { width: 220px; padding-top: 6px; padding-bottom: 6px; }
.files-bar .btn:disabled { opacity: 0.45; cursor: default; }   /* nichts ausgewählt */
.files-danger:not(:disabled):hover { color: var(--danger); border-color: var(--danger); }
.files-list { flex: 1; min-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); outline: none; }
.files-list.files-drop { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--accent-soft); }
.files-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.875rem; }
.files-col-date { width: 150px; }
.files-col-size { width: 90px; }
.files-table th { position: sticky; top: 0; z-index: 1; background: var(--bg-secondary); text-align: left; font-weight: 500; font-size: 0.8125rem;
    color: var(--text-secondary); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.files-table td { padding: 5px 10px; border-bottom: 1px solid var(--border-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.files-row { user-select: none; cursor: default; }
.files-row:hover td { background: var(--bg-card-hover); }
.files-row.files-sel td { background: var(--accent-soft); }
.files-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.files-icon { width: 20px; text-align: center; flex-shrink: 0; }
.files-label { overflow: hidden; text-overflow: ellipsis; }
.files-date, .files-num { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.files-num { text-align: right; }
.files-empty { padding: 40px 16px; text-align: center; color: var(--text-muted); }
.files-empty .btn { margin-top: 12px; }
#view-files.files-none .files-bar { display: none; }   /* ohne Verbindung nur der Weg zum Einrichten (fix185) */
.files-status { font-size: 0.75rem; color: var(--text-muted); padding: 6px 2px 0; }
.files-progress { position: relative; height: 22px; margin-bottom: 8px; border-radius: var(--radius-sm); background: var(--bg-tertiary); overflow: hidden; }
.files-progress-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--accent-soft); border-right: 2px solid var(--accent); transition: width 0.2s; }
.files-progress-text { position: relative; padding: 0 8px; font-size: 0.75rem; line-height: 22px; }
.files-preview-body { display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 0; background: var(--bg-tertiary); }
.files-preview-body img { max-width: 100%; max-height: 70vh; }
/* Aus der Nextcloud anhängen (fix190, files-pick.js) – im Hauptfenster und im Schreibfenster */
.fpick { max-width: 760px; width: 95vw; height: 72vh; display: flex; flex-direction: column; }
.fpick-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.fpick-conn { width: auto; max-width: 180px; }
.fpick-filter { width: 200px; }
.fpick-list { flex: 1; min-height: 0; overflow: auto; }
.fpick-col-check { width: 34px; }
.fpick-table td:first-child, .fpick-table th:first-child { padding-right: 0; text-align: center; }
.fpick-table .files-row { cursor: pointer; }
.fpick-col-link { width: 46px; }
.fpick-link-cell { text-align: center; }
/* Freigabelinks (fix192): Gültigkeit und Passwort unten, das Passwort zum Abschreiben */
.fpick-linkopts { display: flex; align-items: center; gap: 12px; font-size: 0.8125rem; color: var(--text-secondary); }
.fpick-linkopts label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fpick-linkopts select { width: auto; padding: 4px 8px; }
.fpick-pw-show { font-family: ui-monospace, Consolas, monospace; font-size: 1.3rem; letter-spacing: 0.04em; text-align: center;
    padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-tertiary); user-select: all; }
.fpick-foot { display: flex; align-items: center; gap: 8px; }
.fpick-status { flex: 1; min-width: 0; }
.files-preview-body iframe { width: 100%; height: 70vh; border: 0; background: #fff; }
.files-conn-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.files-conn-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.files-conn-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Freigabelinks (fix210): 🔗 in der Liste, Dialog mit den Links, Formular, Passwort */
.files-shared { flex-shrink: 0; font-size: 0.8em; cursor: pointer; opacity: 0.8; }
.files-shared:hover { opacity: 1; }
.files-share-link { padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.files-share-link:first-child { padding-top: 0; }
.files-share-name { font-weight: 600; font-size: 0.875rem; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-share-url { font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; }
.files-share-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.files-share-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.files-share-head { margin: 16px 0 8px; font-size: 0.875rem; }
.files-share-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 0.875rem; cursor: pointer; }
.files-share-upload { margin-top: 12px; }
.files-share-pwbox { margin: 12px 0 0; }
.files-share-pwrow { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.files-share-pwrow .fpick-pw-show { flex: 1; min-width: 0; font-size: 1.1rem; padding: 8px; }
.files-share-error { color: var(--danger); margin: 10px 0 0; }
.files-share-error:empty { display: none; }
@media (max-width: 1024px) { .settings-nav-desktop { display: none !important; } }   /* Dateien gibt es nur am Computer */

/* Office (fix186): das Programm füllt das Fenster, darüber eine Zeile, wohin gespeichert wird (office.js) */
.office-where { flex: none; display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-bottom: 1px solid var(--border);
    font-size: 0.75rem; color: var(--text-muted); }
.office-where-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.office-mail-btn { flex: none; font-size: 0.75rem; white-space: nowrap; }   /* «✉ Per E-Mail» (fix191) */
.office-where.office-mail-next .office-where-text { color: var(--accent); }
.office-frame { position: relative; flex: 1; min-height: 0; }
.office-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #e6e6e6; }

/* Anmeldeseite und «Passwort vergessen» (login.php, passwort.php): Hinweise, Meldungen, Links darunter – aus login.php
   hierher verschoben (fix199), unverändert */
.mfa-info { text-align: center; font-size: 0.875rem; color: var(--text-secondary); margin: 16px 0; }
.mfa-info strong { color: var(--text-primary); }
.mfa-resend { text-align: center; margin-top: 16px; }
.mfa-resend button { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.8125rem; text-decoration: underline; }
.mfa-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; padding: 10px 16px; border-radius: var(--radius-md); margin-bottom: var(--space-md); font-size: 0.875rem; text-align: center; }
.mfa-error { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); padding: 10px 16px; border-radius: var(--radius-md); margin-bottom: var(--space-lg); font-size: 0.875rem; }
/* Passwort vergessen (fix199, passwort.php) */
.form-group .pw-choice { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; margin: 8px 0 0; font-size: 0.875rem;
    font-weight: 400; color: var(--text-primary); cursor: pointer; letter-spacing: 0; }   /* stärker als .form-group label */
.pw-choice input { margin-top: 3px; }
.pw-choice span { grid-column: 2; font-size: 0.75rem; color: var(--text-muted); }
.pw-hint { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; margin-top: 4px; }
.pw-back { font-size: 0.8125rem; color: var(--text-muted); }
.pw-code { text-align: center; font-family: ui-monospace, Consolas, monospace; font-size: 1.125rem; letter-spacing: 2px; text-transform: uppercase; }
.reset-mail-form { max-width: 420px; margin-top: 4px; }   /* Einstellungen → Sicherheit → Passwort vergessen */

/* Suche über alles (fix219): Feld, Knöpfe für die Bereiche, Treffer nach Bereich (search.js) */
.search-input { width: 100%; font-size: 1.0625rem; padding: 10px 14px; }
.search-areas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.search-area {
    font: inherit; font-size: 0.8125rem; padding: 4px 12px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border-light); background: transparent; color: var(--text-secondary);
}
.search-area:hover { border-color: var(--accent); color: var(--text-primary); }
.search-area.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.search-count { font-variant-numeric: tabular-nums; font-weight: 500; opacity: 0.75; }
.search-results { max-width: 900px; }
.search-sec { margin-top: 14px; }
.search-sec-title {
    margin: 0 0 2px; padding: 0 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-muted);
}
.search-row { display: flex; align-items: stretch; gap: 2px; }
.search-hit {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 10px; text-align: left; cursor: pointer;
    font: inherit; color: var(--text-primary); background: transparent; border: 0; border-radius: var(--radius-md);
}
.search-hit:hover { background: var(--bg-card-hover); }
.search-hit:focus-visible { background: var(--bg-card-hover); outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.search-ic { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; font-size: 1.0625rem; line-height: 1; }
.search-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.search-t, .search-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-t { font-size: 0.875rem; }
.search-m { margin-top: 1px; font-size: 0.75rem; color: var(--text-muted); }
.search-r { flex: none; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.search-hit mark { background: var(--warning-soft); color: inherit; border-radius: 2px; }
.search-unread .search-t { font-weight: 700; }
.search-done .search-t { text-decoration: line-through; color: var(--text-muted); }
.search-past .search-txt { opacity: 0.7; }
.search-flag { color: var(--text-muted); }
.search-dot { width: 10px; height: 10px; border-radius: 50%; }
.search-check {
    width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid; border-radius: 4px; font-size: 11px; font-weight: 700; color: var(--text-secondary);
}
.search-sub { flex: none; width: 38px; cursor: pointer; font: inherit; background: transparent; border: 0; border-radius: var(--radius-md); }
.search-sub:hover, .search-sub:focus-visible { background: var(--bg-card-hover); outline: none; }
.search-more { padding: 5px 10px 5px 42px; cursor: pointer; font: inherit; font-size: 0.8125rem; color: var(--text-link); background: transparent; border: 0; }
.search-more:hover { text-decoration: underline; }
.search-note, .search-wait { padding: 6px 10px; font-size: 0.8125rem; color: var(--text-muted); }
.search-note-error { color: var(--danger); }
.search-empty { padding: 32px 12px; text-align: center; color: var(--text-secondary); }
.search-empty p { margin: 0 0 6px; }
@media (max-width: 1024px) {
    .search-hit { padding: 9px 8px; }   /* am Handy etwas mehr Platz zum Tippen */
}

/* Speichern aus Office: Ordner der Nextcloud wählen (fix220, office.js officeAskSave) */
.office-save-folders { margin-top: -4px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.office-save-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--bg-tertiary); }
.office-save-bar .office-save-crumbs { flex: 1; min-width: 0; }
.office-save-new { display: flex; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.office-save-new .form-input { flex: 1; min-width: 0; padding: 4px 8px; }
.office-save-list { max-height: 220px; overflow-y: auto; padding: 4px; }
.office-save-dir {
    display: block; width: 100%; padding: 6px 8px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: inherit; font-size: 0.875rem; color: var(--text-primary); background: transparent; border: 0; border-radius: var(--radius-sm);
}
.office-save-dir:hover, .office-save-dir:focus-visible { background: var(--bg-card-hover); outline: none; }
.office-save-hint { padding: 6px 8px; font-size: 0.75rem; color: var(--text-muted); }

/* Termin: Häkchen «Ganztägig» unter Start und Ende (fix221) */
/* Nur so breit wie «Ganztägig» (fix236): Über die ganze Breite setzte ein Klick unter Start oder Ende den Haken */
.event-allday { display: flex; width: fit-content; align-items: center; gap: 8px; margin: -6px 0 14px; cursor: pointer; font-size: 0.8125rem; color: var(--text-secondary); }