/* ==========================================================================
   Dashboard fuer Michaela Domroese

   Gestaltungsregel Nummer eins: Die Oberflaeche haelt sich farblich zurueck.
   Die Termine tragen die Farben aus Michaelas Google-Kalendern - elf moegliche
   Termin-Farben plus die Grundfarbe jedes Kalenders. Wuerde die Bedienung
   selbst kraeftig faerben, konkurrierte sie mit genau der Information, auf die
   es ankommt. Deshalb: warme Grautoene als Buehne, ein einziger gedeckter
   Akzent (Petrol) fuer Bedienelemente, und Signalfarben nur fuer Zustaende.

   Keine externen Schriften, keine CDN-Skripte - laeuft offline und ohne
   Datenabfluss an Dritte (DSGVO).
   ========================================================================== */

:root {
    color-scheme: light dark;

    /* Flaechen */
    --papier: #f7f6f3;
    --papier-tief: #edebe5;
    --flaeche: #ffffff;
    --flaeche-erhoben: #fcfbf9;

    /* Text */
    --tinte: #2c2b28;
    --gedaempft: #6b6862;
    --gedaempft-hell: #928e86;

    /* Linien */
    --linie: #e4e1d9;
    --linie-stark: #c9c5ba;

    /* Akzent: gedecktes Petrol. Nur Bedienelemente, nie Inhalte. */
    --marke: #2f6b6f;
    --marke-tief: #24565a;
    --marke-flaeche: #eaf1f1;

    /* Wie viel Terminfarbe in den Flächenton eines Kalendereintrags gemischt
       wird. Im Dunkeln braucht es mehr, sonst verschwindet der Ton. */
    --ev-anteil: 16%;
    --ev-anteil-hover: 30%;

    /* Signalfarben - sagen etwas ueber den Zustand aus */
    --rot: #a63125;
    --rot-flaeche: #fbeae7;
    --gruen: #1d6a48;
    --gruen-flaeche: #e7f3ec;
    --gelb: #8a6712;
    --gelb-flaeche: #f9f1dc;

    /* Masse */
    --kopf-hoehe: 60px;
    --radius: 4px;
    --radius-gross: 10px;
    --schatten: 0 1px 2px rgba(28, 26, 22, .05), 0 2px 8px rgba(28, 26, 22, .04);
    --schatten-hoch: 0 8px 32px rgba(28, 26, 22, .16), 0 2px 8px rgba(28, 26, 22, .08);

    /* Schriften: systemnah, damit nichts nachgeladen werden muss */
    --schrift-titel: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --schrift-ui: "Avenir Next", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --schrift-zahl: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

[data-ansicht="dunkel"] {
    color-scheme: dark;

    --ev-anteil: 30%;
    --ev-anteil-hover: 46%;

    --papier: #17181a;
    --papier-tief: #101113;
    --flaeche: #1f2124;
    --flaeche-erhoben: #26292d;

    --tinte: #e8e6e1;
    --gedaempft: #a4a09a;
    --gedaempft-hell: #7d7a74;

    --linie: #33363a;
    --linie-stark: #4a4e53;

    --marke: #5fa8ad;
    --marke-tief: #7dc0c4;
    --marke-flaeche: #1c2c2e;

    --rot: #e8877c;
    --rot-flaeche: #33211f;
    --gruen: #6cc196;
    --gruen-flaeche: #1a2b23;
    --gelb: #d8b25f;
    --gelb-flaeche: #2e2718;

    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2);
    --schatten-hoch: 0 8px 32px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-ansicht="hell"]) {
        color-scheme: dark;

        --papier: #17181a;
        --papier-tief: #101113;
        --flaeche: #1f2124;
        --flaeche-erhoben: #26292d;

        --tinte: #e8e6e1;
        --gedaempft: #a4a09a;
        --gedaempft-hell: #7d7a74;

        --linie: #33363a;
        --linie-stark: #4a4e53;

        --marke: #5fa8ad;
        --marke-tief: #7dc0c4;
        --marke-flaeche: #1c2c2e;

        --rot: #e8877c;
        --rot-flaeche: #33211f;
        --gruen: #6cc196;
        --gruen-flaeche: #1a2b23;
        --gelb: #d8b25f;
        --gelb-flaeche: #2e2718;

        --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2);
        --schatten-hoch: 0 8px 32px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
    }
}

/* --- Grundlagen ---------------------------------------------------------- */

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

/* Das hidden-Attribut muss staerker sein als jede display-Angabe einer Klasse.
   Ohne diese Regel bliebe zum Beispiel ein "hidden" gesetzter .knopf sichtbar,
   weil .knopf display:inline-flex setzt und damit das UA-Stylesheet ueberstimmt. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--schrift-ui);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 600; margin: 0; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

a { color: var(--marke); }
a:hover { color: var(--marke-tief); }

:focus-visible {
    outline: 2px solid var(--marke);
    outline-offset: 2px;
    border-radius: 2px;
}

.nur-fuer-screenreader {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Kopfleiste ---------------------------------------------------------- */

.kopf {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 16px;
    height: var(--kopf-hoehe);
    padding: 0 20px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
}

.kopf__marke { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.kopf__marke strong { font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 600; white-space: nowrap; }
.kopf__datum { color: var(--gedaempft); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf__rest { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* --- Knoepfe ------------------------------------------------------------- */

.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 14px;
    font: inherit; font-size: .9rem; font-weight: 500;
    color: var(--tinte);
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease;
}
.knopf:hover { background: var(--papier-tief); color: var(--tinte); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }

.knopf--haupt {
    background: var(--marke); border-color: var(--marke); color: #fff;
}
.knopf--haupt:hover { background: var(--marke-tief); border-color: var(--marke-tief); color: #fff; }

.knopf--still { border-color: transparent; background: transparent; color: var(--gedaempft); }
.knopf--still:hover { background: var(--papier-tief); color: var(--tinte); }

.knopf--gefahr { color: var(--rot); border-color: var(--linie-stark); }
.knopf--gefahr:hover { background: var(--rot-flaeche); border-color: var(--rot); }

.knopf--klein { padding: 5px 10px; font-size: .82rem; }
.knopf--symbol { padding: 8px; width: 36px; }

/* --- Seitengeruest ------------------------------------------------------- */

.huelle { max-width: 1560px; margin: 0 auto; padding: 20px; }

.raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .raster { grid-template-columns: 1fr; }
}

.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
}

.karte__kopf {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--linie);
}
.karte__kopf h2 { font-size: 1rem; }
.karte__kopf .rechts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.karte__leib { padding: 16px; }
.karte + .karte { margin-top: 20px; }

/* --- Tagesueberblick ----------------------------------------------------- */

/*
 * Zwei Spalten im Verhaeltnis 1:3: links "Als Naechstes" mit kurzen Zeilen,
 * rechts das Briefing als Fliesstext. "Heute zu erledigen" steht seit 1.3.0
 * rechts neben dem Kalender; das Briefing hat dessen Platz mit uebernommen.
 */
.ueberblick {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 16px;
    margin-bottom: 20px;
    align-items: stretch;
}

@media (max-width: 1240px) {
    .ueberblick { grid-template-columns: 1fr 2fr; }
}
@media (max-width: 700px) {
    .ueberblick { grid-template-columns: 1fr; }
}

.ueberblick__block {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 14px 16px;
    box-shadow: var(--schatten);
    min-width: 0;
}

.ueberblick__kopf {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.ueberblick__kopf select {
    width: auto; margin-left: auto; flex: none;
    font-size: .8rem; padding: 4px 8px;
    max-width: 55%;
}

.ueberblick__titel {
    font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--gedaempft-hell);
    margin-bottom: 10px;
}

.ueberblick__leer { color: var(--gedaempft); font-size: .9rem; font-style: italic; }

/* Steht ueber dem Briefing, wenn fuer heute noch keins eingegangen ist und
   deshalb das eines frueheren Tages zu sehen ist. */
.briefing__hinweis {
    margin: 0 0 10px;
    padding: 6px 10px;
    border-left: 3px solid var(--gelb);
    border-radius: var(--radius);
    background: var(--gelb-flaeche);
    color: var(--tinte);
    font-size: .85rem;
}

/* --- Ein Eintrag in "Als Nächstes" --------------------------------------- */
/* Bewusst dreizeilig: Name, Zeitraum, Thema. Fehlt das Thema, faellt die
   Zeile weg statt leer zu bleiben - so bleiben die Eintraege gleich hoch,
   wenn die Angabe da ist, und ruecken sonst zusammen. */

.naechster {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 9px 0;
    border-top: 1px solid var(--linie);
    min-width: 0;
}
.naechster:first-of-type { border-top: 0; padding-top: 0; }
.naechster__punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 6px; }
.naechster__text { min-width: 0; }

.naechster__titel {
    font-weight: 600; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.naechster__zeit {
    font-size: .82rem; color: var(--gedaempft);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}
.naechster__thema {
    font-size: .82rem; color: var(--gedaempft-hell);
    line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*
 * Die Hoehe der Zeile bestimmt allein "Als Naechstes" (seit 1.3.2). Die
 * Briefing-Spalte wird nie hoeher als die Terminspalte links daneben: Sie
 * fuellt genau deren Hoehe aus, und ist der Text laenger, rollt er innen.
 *
 * contain: size nimmt den Briefing-Text aus der Hoehenberechnung der Zeile;
 * gestreckt wird der Block trotzdem auf die volle Zeilenhoehe. Damit die
 * Flaeche an Tagen mit wenigen Terminen nicht zu einem Schlitz schrumpft,
 * ist die Zeile mindestens 260 px hoch.
 */
.ueberblick__block { min-height: 260px; }

.ueberblick__block--breit {
    display: flex; flex-direction: column;
    contain: size;
}

.briefing__rolle {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

/* Browser ohne contain: size - dann wenigstens eine feste Obergrenze. */
@supports not (contain: size) {
    .briefing__rolle { max-height: 360px; }
}

/* Handy: Briefing hat einen eigenen Reiter und zeigt den ganzen Text. */
@media (max-width: 860px) {
    .ueberblick__block { min-height: 0; }
    .ueberblick__block--breit { contain: none; }
    .briefing__rolle { max-height: none; overflow: visible; }
}

/* --- Kalenderliste ------------------------------------------------------- */

.kalenderliste { display: flex; flex-direction: column; gap: 2px; }

.kalenderzeile {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    min-width: 0;
}
.kalenderzeile:hover { background: var(--papier-tief); }

.kalenderzeile input { position: absolute; opacity: 0; width: 0; height: 0; }

.kalenderzeile__kasten {
    width: 15px; height: 15px; flex: none;
    border-radius: 3px;
    border: 2px solid currentColor;
    position: relative;
    transition: background .12s ease;
}
.kalenderzeile input:checked + .kalenderzeile__kasten { background: currentColor; }
.kalenderzeile input:checked + .kalenderzeile__kasten::after {
    content: ""; position: absolute; left: 3.5px; top: .5px;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.kalenderzeile input:focus-visible + .kalenderzeile__kasten { outline: 2px solid var(--marke); outline-offset: 2px; }

.kalenderzeile__name {
    font-size: .9rem; color: var(--tinte);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.kalenderzeile__nurlesen {
    margin-left: auto; flex: none;
    font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--gedaempft-hell);
}

/* Kalenderauswahl in der Kopfzeile des Kalenders (seit 1.3.0). Dieselben
   Schalter wie in der Liste oben, nur als schmale Leiste zum Antippen. */
.karte__kopf--kalender { flex-wrap: wrap; row-gap: 8px; }
/* Auf schmalen Handys duerfen die drei Knoepfe in eine zweite Zeile rutschen,
   statt rechts ueber den Rand zu laufen. */
.karte__kopf--kalender .rechts { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }

.kalenderwahl {
    display: flex; flex-wrap: wrap; gap: 6px;
    min-width: 0;
}

.kalenderchip {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 240px;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--flaeche);
    cursor: pointer;
    user-select: none;
}
.kalenderchip:hover { background: var(--papier-tief); }

.kalenderchip input { position: absolute; opacity: 0; width: 0; height: 0; }

.kalenderchip__punkt {
    width: 10px; height: 10px; flex: none;
    border-radius: 50%;
    border: 2px solid currentColor;
    transition: background .12s ease;
}
.kalenderchip input:checked + .kalenderchip__punkt { background: currentColor; }
.kalenderchip input:focus-visible + .kalenderchip__punkt { outline: 2px solid var(--marke); outline-offset: 2px; }

.kalenderchip__name {
    font-size: .8rem; color: var(--tinte);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.kalenderchip input:not(:checked) ~ .kalenderchip__name {
    color: var(--gedaempft-hell);
    text-decoration: line-through;
}

.kalenderchip__nurlesen {
    flex: none;
    font-size: .6rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--gedaempft-hell);
}

/* --- To-dos -------------------------------------------------------------- */

/* Zwei Zeilen statt einer: in der schmalen Seitenspalte bliebe fuer das
   Textfeld sonst kaum Platz neben Datumsfeld und Knopf. */
.todo-neu { margin-bottom: 14px; }
.todo-neu__unten { display: flex; gap: 8px; margin-top: 8px; }
.todo-neu__unten input[type="date"] { flex: 1; min-width: 0; }
.todo-neu__unten .knopf { flex: none; }
.todo-neu input[type="text"] { flex: 1; min-width: 0; }

.todoliste { list-style: none; margin: 0; padding: 0; }

.todo {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 9px 8px;
    border-radius: var(--radius);
    border-bottom: 1px solid var(--linie);
}
.todo:last-child { border-bottom: 0; }
.todo:hover { background: var(--papier-tief); }
.todo:hover .todo__weg { opacity: 1; }

.todo__haken {
    flex: none; margin-top: 2px;
    width: 18px; height: 18px;
    border: 1.5px solid var(--linie-stark);
    border-radius: 4px;
    background: var(--flaeche);
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: background .12s ease, border-color .12s ease;
}
.todo__haken:hover { border-color: var(--marke); }
.todo__haken[aria-checked="true"] { background: var(--marke); border-color: var(--marke); }
.todo__haken[aria-checked="true"]::after {
    content: ""; position: absolute; left: 5px; top: 1.5px;
    width: 4px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.todo__mitte { flex: 1; min-width: 0; }
.todo__titel { cursor: text; word-break: break-word; }
.todo--erledigt .todo__titel { text-decoration: line-through; color: var(--gedaempft-hell); }
.todo__notiz { font-size: .83rem; color: var(--gedaempft); word-break: break-word; }

.todo__marke {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .76rem; color: var(--gedaempft);
    margin-top: 2px;
}
.todo__marke--heute { color: var(--marke); font-weight: 600; }
.todo__marke--spaet { color: var(--rot); font-weight: 600; }

.todo__weg {
    flex: none; opacity: 0;
    background: none; border: 0; cursor: pointer;
    color: var(--gedaempft-hell); font-size: 1.1rem; line-height: 1;
    padding: 2px 6px; border-radius: var(--radius);
    transition: opacity .12s ease, color .12s ease;
}
.todo__weg:hover { color: var(--rot); background: var(--rot-flaeche); }
.todo__weg:focus-visible { opacity: 1; }

.todo-trenner {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 0 6px;
    font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gedaempft-hell);
}
.todo-trenner::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

/* --- Briefing ------------------------------------------------------------ */

.briefing__text { font-size: .94rem; }
.briefing__text > *:first-child { margin-top: 0; }
.briefing__text > *:last-child { margin-bottom: 0; }
.briefing__text h1, .briefing__text h2, .briefing__text h3 {
    font-family: var(--schrift-ui); font-size: .95rem; font-weight: 700;
    margin: 16px 0 6px;
}
.briefing__text ul, .briefing__text ol { margin: 8px 0; padding-left: 20px; }
.briefing__text li { margin: 3px 0; }
.briefing__text p { margin: 8px 0; }
.briefing__text code {
    font-family: var(--schrift-zahl); font-size: .85em;
    background: var(--papier-tief); padding: 1px 4px; border-radius: 3px;
}
.briefing__text blockquote {
    margin: 10px 0; padding-left: 12px;
    border-left: 3px solid var(--linie-stark); color: var(--gedaempft);
}
.briefing__text hr { border: 0; border-top: 1px solid var(--linie); margin: 14px 0; }

.briefing__fuss {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--linie);
    font-size: .8rem; color: var(--gedaempft-hell);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* --- Formularfelder ------------------------------------------------------ */

.feld { margin-bottom: 14px; }
.feld:last-child { margin-bottom: 0; }
.feld > label {
    display: block; margin-bottom: 5px;
    font-size: .82rem; font-weight: 600; color: var(--gedaempft);
}
.feld__hinweis { font-size: .8rem; color: var(--gedaempft-hell); margin-top: 4px; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="datetime-local"], input[type="time"], textarea, select {
    width: 100%;
    padding: 8px 10px;
    font: inherit; font-size: .92rem;
    color: var(--tinte);
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius);
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--marke); outline-offset: -1px;
    border-color: var(--marke);
}
textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .feld-paar { grid-template-columns: 1fr; } }

.schalter { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.schalter input { width: 16px; height: 16px; accent-color: var(--marke); flex: none; }

/* --- Farbauswahl im Terminformular --------------------------------------- */

.farbwahl { display: flex; flex-wrap: wrap; gap: 6px; }
.farbwahl__knopf {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer; padding: 0;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.farbwahl__knopf[aria-pressed="true"] { border-color: var(--tinte); }
.farbwahl__knopf[aria-pressed="true"]::after {
    content: ""; position: absolute; inset: 0;
    display: grid; place-items: center;
}
.farbwahl__standard {
    background: repeating-linear-gradient(45deg, var(--papier-tief) 0 5px, var(--flaeche) 5px 10px);
}

/* --- Modal / Popup ------------------------------------------------------- */

.modal-hintergrund {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(24, 22, 19, .45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    backdrop-filter: blur(2px);
}
.modal {
    background: var(--flaeche);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-hoch);
    width: 100%; max-width: 560px;
    margin: auto;
    animation: modal-auf .16s ease-out;
}
.modal--breit { max-width: 720px; }

@keyframes modal-auf {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .modal { animation: none; }
}

.modal__kopf {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--linie);
}
.modal__kopf h2 { flex: 1; min-width: 0; }
.modal__leib { padding: 20px; }
.modal__fuss {
    display: flex; gap: 8px; align-items: center;
    padding: 14px 20px;
    border-top: 1px solid var(--linie);
    background: var(--flaeche-erhoben);
    border-radius: 0 0 var(--radius-gross) var(--radius-gross);
    flex-wrap: wrap;
}
.modal__fuss .rechts { margin-left: auto; display: flex; gap: 8px; }

/* --- Termin-Detailansicht ------------------------------------------------ */

.detail__streifen {
    height: 5px;
    border-radius: var(--radius-gross) var(--radius-gross) 0 0;
}

.detail__kopf {
    position: relative;
    padding: 16px 56px 16px 20px;
    border-bottom: 1px solid var(--linie);
}
.detail__kopf h2 { font-size: 1.3rem; margin: 6px 0 4px; word-break: break-word; }
.detail__zu { position: absolute; top: 12px; right: 12px; }

.detail__kalender {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: .82rem; color: var(--gedaempft);
}
.detail__punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.detail__schild {
    font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--gedaempft-hell);
    background: var(--papier-tief);
    border-radius: 20px;
    padding: 2px 8px;
}

.detail__zeit {
    font-size: .92rem; color: var(--tinte);
    font-variant-numeric: tabular-nums;
}

.detail__block { margin-bottom: 18px; }
.detail__block:last-child { margin-bottom: 0; }

.detail__label {
    font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--gedaempft-hell);
    margin-bottom: 5px;
}
.detail__inhalt { font-size: .93rem; word-break: break-word; }
.detail__inhalt a { text-decoration: underline; text-underline-offset: 2px; }

.detail__karte { margin-left: 8px; font-size: .84rem; white-space: nowrap; }

/* Lange Beschreibungen - etwa die Textwueste aus Calendly-Einladungen -
   werden eingeklappt, damit das Fenster bedienbar bleibt. */
.detail__notiz { white-space: pre-wrap; line-height: 1.55; }
.detail__notiz--kurz {
    max-height: 8.5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.gaesteliste { list-style: none; margin: 0; padding: 0; }
.gast {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 0;
    font-size: .9rem;
}
.gast + .gast { border-top: 1px solid var(--linie); }
.gast__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gast__zustand {
    margin-left: auto; flex: none;
    font-size: .74rem; font-weight: 600;
    border-radius: 20px; padding: 2px 9px;
}
.gast--ja         .gast__zustand { color: var(--gruen); background: var(--gruen-flaeche); }
.gast--nein       .gast__zustand { color: var(--rot);   background: var(--rot-flaeche); }
.gast--vielleicht .gast__zustand { color: var(--gelb);  background: var(--gelb-flaeche); }
.gast--offen      .gast__zustand { color: var(--gedaempft); background: var(--papier-tief); }

/* --- ICS-Import ---------------------------------------------------------- */

.ablage {
    border: 2px dashed var(--linie-stark);
    border-radius: var(--radius-gross);
    padding: 22px 16px;
    text-align: center;
    color: var(--gedaempft);
    font-size: .9rem;
    transition: border-color .12s ease, background .12s ease;
    cursor: pointer;
}
.ablage:hover, .ablage--aktiv { border-color: var(--marke); background: var(--marke-flaeche); color: var(--marke-tief); }

.ics-termin {
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.ics-termin--aus { opacity: .5; }
.ics-termin__kopf { display: flex; gap: 10px; align-items: flex-start; }
.ics-termin__kopf input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--marke); flex: none; }
.ics-termin__titel { font-weight: 600; }
.ics-termin__zeit { font-size: .86rem; color: var(--gedaempft); font-family: var(--schrift-zahl); }
.ics-termin__zusatz { font-size: .84rem; color: var(--gedaempft); margin-top: 3px; }
.ics-termin__ziel { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie); }

/* --- Meldungen ----------------------------------------------------------- */

.meldung {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: .9rem;
    border: 1px solid;
    margin-bottom: 14px;
}
.meldung--fehler  { background: var(--rot-flaeche);  border-color: var(--rot);  color: var(--rot); }
.meldung--erfolg  { background: var(--gruen-flaeche); border-color: var(--gruen); color: var(--gruen); }
.meldung--hinweis { background: var(--gelb-flaeche);  border-color: var(--gelb);  color: var(--gelb); }
.meldung--info    { background: var(--marke-flaeche); border-color: var(--marke); color: var(--marke-tief); }
.meldung p:first-child { margin-top: 0; }
.meldung p:last-child { margin-bottom: 0; }

/* --- Einstellungen: Connector ---------------------------------------------- */

.schrittliste { margin: 0; padding-left: 20px; }
.schrittliste li + li { margin-top: 4px; }

/* Geheime Adresse mit Anzeigen- und Kopierknopf */
.geheimzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.geheimzeile__wert {
    flex: 1 1 260px;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--schrift-zahl);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

/* Anweisung zum Kopieren - Zeilenumbrueche bleiben wie im Original */
.anweisung {
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--papier);
    font-size: .88rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Was Claude zuletzt am Connector getan hat */
.connector-protokoll {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0 0 14px;
    font-size: .88rem;
}
.connector-protokoll dt { color: var(--gedaempft); }
.connector-protokoll dd { margin: 0; overflow-wrap: anywhere; }
.connector-protokoll .ist-fehler { color: var(--rot); }
@media (max-width: 560px) {
    .connector-protokoll { grid-template-columns: 1fr; gap: 2px; }
    .connector-protokoll dd { margin-bottom: 8px; }
}

/* Kurzmeldungen unten rechts */
.toaster {
    position: fixed; right: 16px; bottom: 16px; z-index: 200;
    display: flex; flex-direction: column; gap: 8px;
    max-width: min(380px, calc(100vw - 32px));
}
.toast {
    padding: 11px 15px;
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-hoch);
    font-size: .9rem;
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    border-left: 3px solid var(--marke);
    animation: toast-auf .18s ease-out;
}
.toast--fehler { border-left-color: var(--rot); }
.toast--erfolg { border-left-color: var(--gruen); }
@keyframes toast-auf { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* --- Ladezustand --------------------------------------------------------- */

.laedt { position: relative; min-height: 60px; }
.laedt::after {
    content: "";
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--flaeche) 65%, transparent);
}

.dreher {
    display: inline-block; width: 15px; height: 15px;
    border: 2px solid var(--linie-stark);
    border-top-color: var(--marke);
    border-radius: 50%;
    animation: drehen .7s linear infinite;
    vertical-align: -2px;
}
@keyframes drehen { to { transform: rotate(360deg); } }

/* --- FullCalendar: an das Dashboard angepasst ---------------------------- */

/*
 * Grundgedanke der Termindarstellung: Die Farbe kommt aus Michaelas Google-
 * Kalendern und wird jedem Termin als --ev-farbe mitgegeben. Daraus mischt die
 * Gestaltung einen hellen Flächenton plus einen kräftigen Balken an der Kante.
 * Das hält die Farbe eindeutig erkennbar, lässt die Schrift aber immer dunkel
 * und gut lesbar - anders als bei kräftig gefüllten Kästchen, bei denen der
 * Text je nach Farbe mal schwarz, mal weiß sein müsste.
 */

#kalender { padding: 4px; }

.fc {
    --fc-border-color: var(--linie);
    --fc-page-bg-color: var(--flaeche);
    --fc-neutral-bg-color: var(--papier-tief);
    --fc-today-bg-color: color-mix(in srgb, var(--marke) 7%, transparent);
    --fc-list-event-hover-bg-color: var(--papier-tief);
    --ev-farbe: var(--marke);
    font-size: .88rem;
}

/* --- Kopfleiste --- */

.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.fc .fc-toolbar-title { font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 600; }

.fc .fc-button {
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    color: var(--tinte);
    font-size: .85rem; font-weight: 500;
    padding: 6px 12px;
    box-shadow: none;
    text-transform: none;
    transition: background .12s ease, border-color .12s ease;
}
.fc .fc-button:hover { background: var(--papier-tief); color: var(--tinte); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--marke); border-color: var(--marke); color: #fff;
}
.fc .fc-button:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; box-shadow: none; }
.fc .fc-button-primary:disabled { background: var(--papier-tief); border-color: var(--linie); color: var(--gedaempft-hell); }

/* --- Spalten- und Tagesköpfe --- */

.fc .fc-col-header-cell { background: var(--flaeche-erhoben); }
.fc .fc-col-header-cell-cushion {
    padding: 8px 4px; font-weight: 600; font-size: .78rem;
    letter-spacing: .03em; color: var(--gedaempft);
}
.fc .fc-day-today .fc-col-header-cell-cushion { color: var(--marke); }

.fc .fc-daygrid-day-number {
    padding: 6px 8px; font-family: var(--schrift-zahl); font-size: .78rem; color: var(--gedaempft);
}
.fc .fc-day-other .fc-daygrid-day-number { opacity: .35; }

/* Heute: die Zahl bekommt einen Kreis statt nur einer anderen Farbe. */
.fc .fc-day-today .fc-daygrid-day-number {
    color: #fff; font-weight: 700;
    background: var(--marke);
    border-radius: 50%;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin: 4px 5px;
}

/* --- Termine: Monatsansicht --- */

.fc-event { cursor: pointer; border: 0; }
.fc-event:focus-visible { outline: 2px solid var(--tinte); outline-offset: 1px; }

.fc-daygrid-event {
    border-radius: 5px;
    padding: 2px 6px;
    margin: 0 2px 2px;
    font-size: .79rem;
    background: color-mix(in srgb, var(--ev-farbe) var(--ev-anteil), var(--flaeche));
    border-left: 3px solid var(--ev-farbe);
    color: var(--tinte);
    transition: background .12s ease;
}
.fc-daygrid-event:hover { background: color-mix(in srgb, var(--ev-farbe) var(--ev-anteil-hover), var(--flaeche)); }
.fc-daygrid-event .fc-event-time { font-weight: 600; opacity: .75; margin-right: 3px; }
.fc-daygrid-event .fc-event-title { font-weight: 500; }

/* Ganztägige Termine bleiben durchgehend gefüllt - sie sollen sich klar von
   getakteten unterscheiden, so wie in Google auch. */
.fc-daygrid-block-event {
    background: var(--ev-farbe);
    border-left: 0;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}
.fc-daygrid-block-event:hover { filter: brightness(.93); background: var(--ev-farbe); }

.fc .fc-daygrid-more-link {
    font-size: .74rem; font-weight: 600; color: var(--gedaempft);
    padding: 1px 6px; margin: 0 2px;
}
.fc .fc-daygrid-more-link:hover { color: var(--marke); background: var(--papier-tief); border-radius: 4px; }

/* --- Termine: Wochen- und Tagesansicht --- */

/* Zeilenhöhe des Rasters. 1.75em ergibt rund 48 Pixel je Stunde - damit
   passen 7:30 bis 20:00 in die Ansicht, ohne dass kurze Termine zum Strich
   werden. Frühere und spätere Stunden bleiben scrollbar erreichbar. */
.fc .fc-timegrid-slot { height: 1.75em; }
.fc .fc-timegrid-slot-label-cushion {
    font-family: var(--schrift-zahl); font-size: .72rem; color: var(--gedaempft-hell);
    padding-right: 8px;
}
.fc .fc-timegrid-axis-cushion { font-size: .7rem; color: var(--gedaempft-hell); }

/* Halbe Stunden nur zart andeuten, volle Stunden klar trennen. */
.fc .fc-timegrid-slot-minor { border-top-style: dotted; border-top-color: var(--linie); }

.fc .fc-timegrid-event-harness { margin-right: 2px; }

.fc-timegrid-event {
    border-radius: 6px;
    border: 0;
    border-left: 3px solid var(--ev-farbe);
    background: color-mix(in srgb, var(--ev-farbe) var(--ev-anteil), var(--flaeche));
    color: var(--tinte);
    box-shadow: 0 1px 2px rgba(28, 26, 22, .08);
    transition: background .12s ease, box-shadow .12s ease;
    overflow: hidden;
}
.fc-timegrid-event:hover {
    background: color-mix(in srgb, var(--ev-farbe) var(--ev-anteil-hover), var(--flaeche));
    box-shadow: 0 2px 6px rgba(28, 26, 22, .14);
}

/* Sicherheitsnetz: Auch falls FullCalendar die berechnete Schriftfarbe wieder
   ans innere Element schreibt, gilt hier die Textfarbe des Dashboards. Bei
   getönten Flächen ist die immer richtig - eine für die volle Google-Farbe
   berechnete Schriftfarbe wäre es nicht. */
.fc-timegrid-event .fc-event-main,
.fc-daygrid-event:not(.fc-daygrid-block-event) .fc-event-main { color: var(--tinte); }

.fc-timegrid-event .fc-event-main { padding: 3px 7px; }
.fc-timegrid-event .fc-event-time {
    font-size: .72rem; font-weight: 600; opacity: .7;
    font-variant-numeric: tabular-nums;
}
.fc-timegrid-event .fc-event-title {
    font-weight: 600; font-size: .8rem; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis;
}

/* Kurze Termine: Michaela hat viele 10- bis 35-Minuten-Blöcke. Ohne
   Sonderbehandlung läuft dort der Text aus dem Kästchen. */
.fc-timegrid-event.fc-kurz .fc-event-main { padding: 1px 6px; }
.fc-timegrid-event.fc-kurz .fc-event-time { font-size: .68rem; }
.fc-timegrid-event.fc-kurz .fc-event-title { font-size: .74rem; }

.fc-timegrid-event.fc-sehr-kurz .fc-event-main {
    padding: 0 6px;
    display: flex; align-items: center; gap: 5px;
    white-space: nowrap;
}
.fc-timegrid-event.fc-sehr-kurz .fc-event-time { font-size: .66rem; }
.fc-timegrid-event.fc-sehr-kurz .fc-event-title { font-size: .72rem; }
.fc-timegrid-event.fc-sehr-kurz .fc-event-time::after { content: ""; }

.fc .fc-timegrid-now-indicator-line {
    border-color: var(--rot);
    border-width: 2px 0 0;
}
.fc .fc-timegrid-now-indicator-arrow {
    border-color: var(--rot); color: var(--rot);
    border-width: 5px;
}

/* Ganztagszeile über dem Raster */
.fc .fc-timegrid-divider { padding: 0; background: var(--linie); }
.fc .fc-daygrid-body-natural .fc-daygrid-day-events { margin-bottom: 4px; }

/* --- Listenansicht --- */

.fc .fc-list-day-cushion { background: var(--flaeche-erhoben); }
.fc .fc-list-day-text { font-weight: 600; }
.fc .fc-list-event-time {
    font-family: var(--schrift-zahl); font-size: .82rem; color: var(--gedaempft); white-space: nowrap;
}
.fc .fc-list-event-title { font-weight: 500; }
.fc .fc-list-event-dot { border-color: var(--ev-farbe); border-width: 5px; }
.fc .fc-list-empty { background: transparent; color: var(--gedaempft); font-style: italic; }
.fc-theme-standard .fc-list { border-color: var(--linie); border-radius: var(--radius-gross); }
.fc .fc-list-event:hover td { background: var(--papier-tief); }

/* --- To-dos im Kalender --- */
/* Gestrichelt, damit sie sich klar von echten Google-Terminen unterscheiden.
   Sie stehen nur hier, nicht bei Google. */

.fc-event.todo-im-kalender {
    background: transparent !important;
    border: 1px dashed var(--linie-stark) !important;
    color: var(--gedaempft) !important;
    box-shadow: none !important;
}
.fc-event.todo-im-kalender:hover { background: var(--papier-tief) !important; }
.fc-event.todo-im-kalender .fc-event-title::before { content: "☐ "; }
.fc-event.todo-im-kalender.todo-erledigt .fc-event-title { text-decoration: line-through; }
.fc-event.todo-im-kalender.todo-erledigt .fc-event-title::before { content: "☑ "; }

/* --- Fusszeile: welche Version gerade laeuft ---------------------------- */

.fusszeile {
    margin: 28px 0 0;
    text-align: center;
    font-size: .75rem;
    color: var(--gedaempft-hell);
}
.fusszeile a { color: inherit; }

/* --- Oeffentliche Seiten: Startseite, Datenschutz, Nutzungsbedingungen ---- */

.blatt {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(28px, 7vh, 64px) 16px 40px;
}
.blatt__kopf { margin-bottom: 20px; }
.blatt__marke {
    margin: 0 0 6px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--marke);
}
.blatt h1 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.15rem); }
.blatt__einleitung { margin: 10px 0 0; max-width: 60ch; font-size: 1.05rem; color: var(--gedaempft); }
.blatt__stand { margin: 6px 0 0; color: var(--gedaempft); }
.blatt__privat { margin-bottom: 20px; }
.blatt .karte__leib { padding: clamp(16px, 3vw, 28px); }
.blatt h2 { margin: 26px 0 8px; }
.blatt h3 { margin: 18px 0 6px; }
.blatt .karte__leib > :first-child { margin-top: 0; }
.blatt ul { padding-left: 1.2em; }
.blatt li + li { margin-top: 4px; }
.blatt code { font-family: var(--schrift-zahl); font-size: .85em; overflow-wrap: anywhere; }
.blatt__verweise { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 0; }
.blatt__zitat {
    margin: 10px 0 0;
    padding: 8px 14px;
    border-left: 3px solid var(--linie-stark);
    color: var(--gedaempft);
    font-style: italic;
}
.blatt__englisch {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--linie);
    font-size: .92rem;
    color: var(--gedaempft);
}
.blatt__englisch h2 { margin: 0 0 8px; font-size: 1rem; color: var(--tinte); }
.blatt__fuss {
    margin-top: 36px;
    text-align: center;
    font-size: .8rem;
    color: var(--gedaempft-hell);
}
.blatt__fuss nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.blatt__fuss a { color: var(--gedaempft); }
.blatt__fuss a[aria-current="page"] { color: var(--tinte); font-weight: 600; text-decoration: none; }
.blatt__fuss p { margin: 10px 0 0; }

/* Anmeldung: Hinweis zur privaten Nutzung unter dem Formular. */
.anmeldung__hinweis {
    margin: 18px 0 0;
    text-align: center;
    font-size: .85rem;
    color: var(--gedaempft);
}
.anmeldung__links {
    margin: 8px 0 0;
    text-align: center;
    font-size: .8rem;
    color: var(--gedaempft-hell);
}
.anmeldung__links a { color: var(--gedaempft); }

/* --- Handy: Reiter unten ------------------------------------------------- */

.reiter { display: none; }

@media (max-width: 860px) {
    .huelle { padding: 12px 12px 76px; }
    .kopf { padding: 0 14px; }
    .kopf__datum { display: none; }

    .reiter {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        background: var(--flaeche);
        border-top: 1px solid var(--linie);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .reiter__knopf {
        flex: 1;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 8px 4px 6px;
        background: none; border: 0; cursor: pointer;
        font: inherit; font-size: .68rem; font-weight: 600;
        color: var(--gedaempft);
        letter-spacing: .02em;
    }
    .reiter__knopf[aria-selected="true"] { color: var(--marke); }
    .reiter__symbol { font-size: 1.15rem; line-height: 1; }
    .reiter__punkt {
        position: absolute; transform: translate(11px, -3px);
        width: 6px; height: 6px; border-radius: 50%; background: var(--rot);
    }

    /* Auf dem Handy ist immer genau ein Bereich sichtbar. */
    [data-bereich] { display: none; }
    [data-bereich].bereich--an { display: block; }
    .raster { display: block; }
    .karte + .karte { margin-top: 14px; }
    .ueberblick { grid-template-columns: 1fr; margin-bottom: 14px; }
    .modal-hintergrund { padding: 0; align-items: stretch; }
    .modal { max-width: none; border-radius: var(--radius-gross) var(--radius-gross) 0 0; margin: auto 0 0; }
    .modal__fuss { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

@media print {
    .kopf, .reiter, .toaster, .modal-hintergrund, .knopf { display: none !important; }
    body { background: #fff; }
    .karte { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* --- E-Mail (seit 1.5.0): roter Punkt, Karte, Kopfzeile, Einstellungen ---- */

/* Der rote Punkt mit weisser Zahl - in Kopfzeile, Reiter, Karte und Baum. */
.punkt {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: var(--rot); color: #fff;
    font-size: .7rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
    flex: none;
}

.kopf__mails { gap: 6px; flex: none; }
@media (max-width: 560px) { .kopf__mailtext { display: none; } }
/* Auf schmalen Handys darf die Begruessung nicht in die Knoepfe rechts laufen -
   dann lieber mit "…" abschneiden. */
.kopf__marke { overflow: hidden; }
.kopf__marke strong { overflow: hidden; text-overflow: ellipsis; }

.mailkarte { display: flex; flex-direction: column; gap: 2px; }
.mailkarte__zeile {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius);
    color: var(--tinte); text-decoration: none;
    min-width: 0;
}
.mailkarte__zeile:hover { background: var(--papier-tief); color: var(--tinte); }
.mailkarte__farbe { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mailkarte__adresse { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.mailkarte__fehler { flex: none; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--rot); }

.postfachliste { display: flex; flex-direction: column; gap: 8px; }
.postfach { border: 1px solid var(--linie); border-radius: var(--radius); padding: 0 12px; }
.postfach[open] { padding-bottom: 12px; }
.postfach__zeile { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; list-style: none; min-width: 0; }
.postfach__zeile::-webkit-details-marker { display: none; }
.postfach__zeile::after { content: "›"; color: var(--gedaempft-hell); transition: transform .15s ease; }
.postfach[open] > .postfach__zeile::after { transform: rotate(90deg); }
.postfach__name { min-width: 0; display: flex; flex-direction: column; }
.postfach__adresse { font-size: .82rem; color: var(--gedaempft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.postfach__ssl { flex: none; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gruen); margin-left: auto; }
.postfach__stand { flex: none; font-size: .78rem; color: var(--gedaempft-hell); margin-left: 4px; }
.postfach__stand.ist-fehler { color: var(--rot); }
.postfach__form { margin-top: 6px; }

@media (max-width: 860px) {
    .reiter__link {
        flex: 1; position: relative;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 8px 4px 6px;
        font-size: .68rem; font-weight: 600; letter-spacing: .02em;
        color: var(--gedaempft); text-decoration: none;
    }
    .punkt--reiter { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 16px; height: 16px; font-size: .64rem; }
}

/* --- Mitteilungen aufs Handy (1.7.0): Geraeteliste in den Einstellungen ------ */
.push-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.push-knoepfe .knopf[hidden] { display: none; }
.geraeteliste { display: flex; flex-direction: column; gap: 6px; }
.geraet {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--linie); border-radius: var(--radius);
    font-size: .9rem;
}
.geraet__name { font-weight: 600; }
.geraet__stand { flex: 1; min-width: 0; font-size: .82rem; color: var(--gedaempft); overflow-wrap: anywhere; }
.geraet__stand.ist-fehler { color: var(--rot); }
.geraet form { margin: 0; }

/* --- Update einspielen (1.8.0) ---------------------------------------------- */
.update__version { font-size: .82rem; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.update__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.update__form input[type="file"] { flex: 1 1 240px; min-width: 0; font-size: .9rem; }
.update__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.update__knoepfe form { margin: 0; }
.update__zurueck {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linie);
    font-size: .88rem; color: var(--gedaempft);
}
.update__zurueck form { margin: 0; }
.update__verlauf { margin: 12px 0 0; padding-left: 18px; font-size: .82rem; color: var(--gedaempft-hell); }

/* --- Zeitzonen im Kalender (1.8.0) ------------------------------------------ */
.zeit-hinweis {
    margin: 0 0 8px; padding: 8px 12px;
    border-radius: var(--radius); background: var(--marke-flaeche); color: var(--marke-tief);
    font-size: .86rem;
}
.zonenfrage {
    margin: 0 0 10px; padding: 10px 12px;
    border: 1px solid var(--marke); border-radius: var(--radius); background: var(--marke-flaeche);
    font-size: .88rem;
}
.zonenfrage__knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.zonenfrage__knoepfe .knopf[aria-pressed="true"] { background: var(--marke); color: #fff; border-color: var(--marke); }
.zone-umrechnung { margin-top: 6px; font-size: .84rem; color: var(--marke-tief); }
.detail__ortszeit { display: block; margin-top: 2px; font-size: .86rem; color: var(--gedaempft); }
#tf-zonenbereich { margin-bottom: 14px; }
#tf-zonenbereich[hidden] { display: none; }

/* --- Einstellungen: Bereichsleiste (1.8.1, seit 1.8.2 Unterseiten) ---------
   Bleibt unter der Kopfleiste stehen; waagerecht wischbar, wenn es eng wird. */
.einst-nav {
    position: sticky; top: var(--kopf-hoehe); z-index: 30;
    display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -4px 18px; padding: 8px 4px;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
}
.einst-nav__link {
    padding: 5px 11px;
    border: 1px solid var(--linie-stark); border-radius: 999px;
    background: var(--flaeche); color: var(--tinte);
    font-size: .84rem; text-decoration: none; white-space: nowrap;
}
.einst-nav__link:hover { border-color: var(--marke); color: var(--marke-tief); }
.einst-nav__link[aria-current] { background: var(--marke); border-color: var(--marke); color: #fff; }
.einst-bereich { scroll-margin-top: calc(var(--kopf-hoehe) + 64px); }
.einst-meldung { margin-top: 0; }
.einst-nav::-webkit-scrollbar { display: none; }
.einst-nav__link { flex: none; }