/*
 * Winku Mail — Aussehen.
 *
 * Farben, Schrift, Abstände, Radien und Bewegung sind Winku-Tokens. Quelle: nas-admin/Winku/pakete/design/src/tokens.ts
 * (Bedeutungs-Namen wie dort: grund, flaeche, rand, text-leise, marke-1 …). Hier nur abgeschrieben, weil die
 * Webmail ohne Bauschritt läuft — bei einem Redesign dort ändern und diese Werte nachziehen.
 * Winku hat nur ein dunkles Thema, darum kein Hell/Dunkel-Schalter.
 */

/* ------------------------------------------------------------------ Tokens */

:root {
    --grund: #0b0f19;
    --grund-tief: #07090f;
    --flaeche: #121726;
    --flaeche-2: #171d2e;
    --flaeche-3: #1e2538;
    --rand: #222a3d;
    --rand-stark: #2e3750;
    --rand-hell: rgb(255 255 255 / .08);
    --text: #e5e7eb;
    --text-stark: #ffffff;
    --text-leise: #9ca3af;
    --text-zart: #858d9f;
    --marke-1: #7c3aed;
    --marke-2: #06b6d4;
    --marke-3: #f472b6;
    --akzent: #a78bfa;
    --akzent-2: #22d3ee;
    --auf-marke: #ffffff;
    --gut: #22c55e;
    --gut-text: #86efac;
    --warnung: #f59e0b;
    --warnung-text: #fcd34d;
    --fehler: #ef4444;
    --fehler-text: #fca5a5;
    --stern: #f59e0b;
    --logo-1: #7c3aed;
    --logo-2: #06b6d4;
    --fokus: #22d3ee;
    --auswahl: rgb(124 58 237 / .45);

    --schrift-text: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --schrift-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --abstand-1: .25rem;
    --abstand-2: .5rem;
    --abstand-3: .75rem;
    --abstand-4: 1rem;
    --abstand-5: 1.5rem;
    --abstand-6: 2rem;

    --radius-klein: .5rem;
    --radius: .75rem;
    --radius-gross: 1rem;
    --radius-rund: 999px;

    --dauer-schnell: 140ms;
    --dauer-mittel: 260ms;
    --kurve: cubic-bezier(.2, .7, .2, 1);

    --kopf-hoehe: 4.25rem;
    --breite-text: 46rem;
    --breite-inhalt: 75rem;

    color-scheme: dark;
}

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

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schrift/inter-400.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("schrift/inter-600.woff2") format("woff2");
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--grund);
    color: var(--text);
    font: 400 .95rem/1.5 var(--schrift-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--text-stark); font-weight: 600; line-height: 1.25; margin: 0 0 var(--abstand-3); }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; margin-top: var(--abstand-5); }
p { margin: 0 0 var(--abstand-2); }

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--auswahl); }

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

pre, code, kbd, .mono { font-family: var(--schrift-mono); font-size: .85em; }

kbd {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 .35em;
    border: 1px solid var(--rand-stark);
    border-bottom-width: 2px;
    border-radius: .3rem;
    background: var(--flaeche-2);
    color: var(--text);
    text-align: center;
}

.leise { color: var(--text-leise); }
.klein { font-size: .82rem; }

.unsichtbar {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.sprungmarke {
    position: absolute;
    left: var(--abstand-3);
    top: -3rem;
    z-index: 300;
    padding: var(--abstand-2) var(--abstand-3);
    background: var(--flaeche-3);
    color: var(--text-stark);
    border-radius: var(--radius-klein);
}
.sprungmarke:focus { top: var(--abstand-3); }

.nur-js { display: none !important; }
.js .nur-js { display: revert !important; }
.nur-schmal { display: none !important; }

.sym {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.2em;
}

/* Winku-Zeichen */
.zeichen { width: 2rem; height: 2rem; flex: none; }
.zeichen .s1 { stop-color: var(--logo-1); }
.zeichen .s2 { stop-color: var(--logo-2); }
.zeichen .w { stroke: var(--auf-marke); }
.zeichen-gross { width: 3rem; height: 3rem; }
.zeichen-blass { width: 4rem; height: 4rem; opacity: .22; }

/* ------------------------------------------------------------------ Knöpfe und Felder */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-2);
    min-height: 2.4rem;
    padding: 0 var(--abstand-4);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-klein);
    background: var(--flaeche-2);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dauer-schnell) var(--kurve), border-color var(--dauer-schnell) var(--kurve);
}
.knopf:hover { background: var(--flaeche-3); border-color: var(--rand-stark); text-decoration: none; }
.knopf-haupt {
    border-color: transparent;
    background: linear-gradient(135deg, var(--marke-1), var(--marke-2));
    color: var(--auf-marke);
}
.knopf-haupt:hover { background: linear-gradient(135deg, var(--marke-1), var(--marke-1)); }
.knopf-still { background: transparent; border-color: transparent; color: var(--text-leise); }
.knopf-still:hover { background: var(--flaeche-2); color: var(--text); }
.knopf-klein { min-height: 2rem; padding: 0 var(--abstand-3); font-size: .82rem; }
.knopf-gefahr { color: var(--fehler-text); }
.knopf-gefahr:hover { border-color: var(--fehler); background: rgb(239 68 68 / .12); }
.knopf-breit { width: 100%; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }

input, select, textarea {
    font: inherit;
    color: var(--text);
    background: var(--grund-tief);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-klein);
    padding: .55rem .7rem;
    min-height: 2.4rem;
    max-width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: var(--text-zart); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--fokus); outline-offset: 0; border-color: transparent; }
textarea { resize: vertical; line-height: 1.55; }
input[type="checkbox"] {
    width: 1.05rem; height: 1.05rem; min-height: 0;
    padding: 0;
    accent-color: var(--marke-1);
    vertical-align: -.15em;
}
input[type="file"] { padding: .4rem; background: transparent; border-style: dashed; width: 100%; }
input::placeholder, textarea::placeholder { color: var(--text-zart); }
::-webkit-file-upload-button { font: inherit; }

.formular { display: flex; flex-direction: column; gap: var(--abstand-2); }
.formular > label:not(.haken) { margin-top: var(--abstand-2); font-weight: 600; font-size: .88rem; color: var(--text); }
.formular > .knopf, .formular > .knopf-reihe { margin-top: var(--abstand-3); align-self: flex-start; }
.formular fieldset {
    margin: var(--abstand-3) 0 0;
    padding: var(--abstand-3) var(--abstand-4) var(--abstand-4);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
}
.formular fieldset > label:not(.haken), .zwei-felder label { font-weight: 600; font-size: .88rem; margin-top: var(--abstand-2); display: block; }
legend { padding: 0 var(--abstand-2); font-weight: 600; color: var(--text-stark); }
.formular-zeile { flex-direction: row; align-items: center; flex-wrap: wrap; }
.formular-zeile input { flex: 1 1 12rem; }
.haken { display: flex; align-items: center; gap: var(--abstand-2); cursor: pointer; }
.zwei-felder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-3); }
.zwei-felder input { width: 100%; }
.feld-mit-knopf, .adress-feld { display: flex; gap: var(--abstand-2); }
.feld-mit-knopf input, .adress-feld input { flex: 1; min-width: 0; }
.adress-feld select { flex: none; }

details > summary { cursor: pointer; color: var(--akzent); list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; color: var(--text-zart); }
details[open] > summary::before { content: "▾ "; }

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

.meldung, .meldung-oben {
    padding: var(--abstand-3) var(--abstand-4);
    border-radius: var(--radius);
    border: 1px solid var(--rand);
    background: var(--flaeche-2);
    margin: 0 0 var(--abstand-4);
}
.meldung p:last-child { margin-bottom: 0; }
.meldung-gut { border-color: rgb(34 197 94 / .45); color: var(--gut-text); }
.meldung-fehler { border-color: rgb(239 68 68 / .5); color: var(--fehler-text); }
.meldung-warnung { border-color: rgb(245 158 11 / .5); color: var(--warnung-text); }
.meldung-warnung pre { max-height: 14rem; overflow: auto; color: var(--text); white-space: pre-wrap; }
.meldung-oben {
    position: fixed;
    left: 50%;
    bottom: var(--abstand-5);
    transform: translateX(-50%);
    z-index: 300;
    margin: 0;
    max-width: min(32rem, calc(100vw - 2rem));
    box-shadow: 0 .75rem 2rem rgb(0 0 0 / .45);
    animation: einblenden var(--dauer-mittel) var(--kurve);
}
.meldung-oben.weg { opacity: 0; transition: opacity var(--dauer-mittel) var(--kurve); }

@keyframes einblenden { from { opacity: 0; transform: translate(-50%, .5rem); } }

/* ------------------------------------------------------------------ Kopfzeile */

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--abstand-4);
    height: var(--kopf-hoehe);
    padding: 0 var(--abstand-4);
    background: var(--grund);
    border-bottom: 1px solid var(--rand);
}
.marke { display: flex; align-items: center; gap: var(--abstand-2); color: var(--text-stark); font-weight: 600; font-size: 1.05rem; }
.marke:hover { text-decoration: none; }
.marke-text { white-space: nowrap; }

.suche {
    position: relative;
    flex: 1;
    max-width: 40rem;
    display: flex;
    align-items: center;
    gap: var(--abstand-2);
    margin-left: var(--abstand-4);
}
.suche input[type="search"] {
    flex: 1;
    min-width: 0;
    padding-left: 2.3rem;
    background: var(--flaeche);
    border-color: var(--rand);
    border-radius: var(--radius-rund);
}
.suche-sym { position: absolute; left: .8rem; color: var(--text-leise); pointer-events: none; }
.suche select { background: var(--flaeche); border-color: var(--rand); border-radius: var(--radius-rund); }
.suche .knopf { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.kopf .schreiben { margin-left: auto; }

.konto { position: relative; }
.konto > summary { display: flex; align-items: center; gap: var(--abstand-2); padding: var(--abstand-1); border-radius: var(--radius-rund); color: var(--text); }
.konto > summary::before { content: none; }
.konto > summary:hover { background: var(--flaeche-2); }
.konto-adresse { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; color: var(--text-leise); }
.menue {
    position: absolute;
    right: 0;
    top: calc(100% + var(--abstand-2));
    z-index: 60;
    min-width: 15rem;
    padding: var(--abstand-2);
    background: var(--flaeche);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .5);
}
.menue-kopf { padding: var(--abstand-2) var(--abstand-3); margin: 0 0 var(--abstand-1); color: var(--text-leise); font-size: .82rem; border-bottom: 1px solid var(--rand); overflow-wrap: anywhere; }
.menue a, .menue-knopf {
    display: block;
    width: 100%;
    padding: var(--abstand-2) var(--abstand-3);
    border: 0;
    border-radius: var(--radius-klein);
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.menue a:hover, .menue-knopf:hover { background: var(--flaeche-3); text-decoration: none; }
.menue form { margin: 0; }

/* Avatare: die drei Markentöne */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    color: var(--auf-marke);
    font-weight: 600;
    font-size: .9rem;
}
.avatar-1 { background: var(--marke-1); }
.avatar-2 { background: #0891b2; }
.avatar-3 { background: #be185d; }

/* ------------------------------------------------------------------ Drei Spalten */

.inhalt { min-height: calc(100dvh - var(--kopf-hoehe)); }

.mail {
    display: grid;
    grid-template-columns: 13.5rem minmax(20rem, 26rem) minmax(0, 1fr);
    height: calc(100vh - var(--kopf-hoehe));
    height: calc(100dvh - var(--kopf-hoehe));
}
.spalte { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.spalte-ordner { padding: var(--abstand-3) var(--abstand-2); border-right: 1px solid var(--rand); }
.spalte-liste { border-right: 1px solid var(--rand); background: var(--grund); display: flex; flex-direction: column; }
.spalte-lesen { background: var(--grund-tief); }

/* Ordner */
.ordner-liste { list-style: none; margin: 0; padding: 0; }
.ordner-link {
    display: flex;
    align-items: center;
    gap: var(--abstand-2);
    padding: .45rem var(--abstand-3);
    border-radius: var(--radius-klein);
    color: var(--text);
}
.ordner-link:hover { background: var(--flaeche); text-decoration: none; }
.ordner-link.aktiv { background: var(--flaeche-3); color: var(--text-stark); font-weight: 600; }
.ordner-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiefe-1 { padding-left: 1.6rem; }
.tiefe-2 { padding-left: 2.4rem; }
.tiefe-3 { padding-left: 3.2rem; }
.zahl {
    min-width: 1.5rem;
    padding: 0 .4rem;
    border-radius: var(--radius-rund);
    background: rgb(124 58 237 / .25);
    color: var(--akzent);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.35rem;
}
.zahl.leer { visibility: hidden; }
.ordner-verwalten { display: block; margin: var(--abstand-4) var(--abstand-3) 0; font-size: .82rem; color: var(--text-leise); }

/* Liste */
.liste-kopf {
    display: flex;
    align-items: baseline;
    gap: var(--abstand-3);
    padding: var(--abstand-4) var(--abstand-4) var(--abstand-2);
}
.liste-titel { margin: 0; font-size: 1.15rem; }
.such-hinweis { padding: 0 var(--abstand-4); font-size: .85rem; color: var(--text-leise); }
.listenform { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.werkzeuge {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-1);
    padding: var(--abstand-2) var(--abstand-4);
    background: var(--grund);
    border-bottom: 1px solid var(--rand);
}
.werkzeuge .alle-waehlen { margin-right: var(--abstand-2); }
.verschieben { display: inline-flex; gap: var(--abstand-1); }
.verschieben select { min-height: 2rem; padding: .2rem .5rem; font-size: .82rem; max-width: 10rem; }
/* Mit JavaScript erscheinen die Werkzeuge erst, wenn etwas gewählt ist. */
.js .werkzeuge:not(.hat-wahl) > :not(.alle-waehlen) { display: none; }
.js .werkzeuge:not(.hat-wahl)::after { content: "Auswählen für Aktionen"; color: var(--text-zart); font-size: .8rem; }

.nachrichten { list-style: none; margin: 0; padding: 0; }
.eintrag {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-2);
    padding: var(--abstand-3) var(--abstand-3) var(--abstand-3) var(--abstand-4);
    border-bottom: 1px solid var(--rand);
    transition: background var(--dauer-schnell) var(--kurve);
}
.eintrag:hover { background: var(--flaeche); }
.eintrag.aktiv { background: var(--flaeche-2); box-shadow: inset 3px 0 0 var(--marke-1); }
.eintrag.gewaehlt { background: rgb(124 58 237 / .12); }
.eintrag.fokus { box-shadow: inset 3px 0 0 var(--marke-2); }
.eintrag .wahl { margin-top: .55rem; flex: none; }
.eintrag-link {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--abstand-3);
    color: var(--text-leise);
}
.eintrag-link:hover { text-decoration: none; }
.eintrag-link .avatar { grid-row: span 2; width: 1.9rem; height: 1.9rem; font-size: .8rem; margin-top: .1rem; }
.eintrag-zeile { display: flex; align-items: baseline; gap: var(--abstand-2); min-width: 0; }
.wer, .betreff { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wer { color: var(--text); }
.datum { flex: none; font-size: .78rem; color: var(--text-zart); font-variant-numeric: tabular-nums; }
.betreff { font-size: .88rem; }
.anhang-zeichen { color: var(--text-zart); flex: none; }
.ungelesen .wer, .ungelesen .betreff { color: var(--text-stark); font-weight: 600; }
.ungelesen .datum { color: var(--akzent-2); }
.ungelesen::before {
    content: "";
    position: absolute;
    left: .45rem;
    top: 1.15rem;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--akzent-2);
}
.js .ungelesen::before { left: .35rem; }

.stern {
    flex: none;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-klein);
    background: none;
    color: var(--text-zart);
    cursor: pointer;
    opacity: .5;
}
.eintrag:hover .stern, .stern:focus-visible { opacity: 1; }
.stern:hover { background: var(--flaeche-3); color: var(--stern); }
.markiert .stern { opacity: 1; color: var(--stern); }
.markiert .stern .sym { fill: currentColor; }

.leer-hinweis { padding: var(--abstand-6) var(--abstand-4); text-align: center; color: var(--text-leise); }
.blaettern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-2);
    padding: var(--abstand-3) var(--abstand-4);
    border-top: 1px solid var(--rand);
}

/* Lesen */
.lesen-leer {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-2);
    color: var(--text-leise);
    text-align: center;
    padding: var(--abstand-5);
}
.lesen { display: flex; flex-direction: column; min-height: 100%; }
.lesen-kopf { padding: var(--abstand-5) var(--abstand-5) var(--abstand-3); }
.lesen-betreff { font-size: 1.3rem; margin-bottom: var(--abstand-4); overflow-wrap: anywhere; }
.absender { display: flex; align-items: flex-start; gap: var(--abstand-3); }
.absender-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.absender-text p { margin: 0; }
.absender time { flex: none; }

.lese-aktionen {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-1);
    padding: var(--abstand-2) var(--abstand-5);
    background: var(--grund-tief);
    border-bottom: 1px solid var(--rand);
}
.trenner { width: 1px; height: 1.4rem; margin: 0 var(--abstand-1); background: var(--rand-stark); }

.anhaenge { list-style: none; display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0; padding: var(--abstand-3) var(--abstand-5) 0; }
.anhang {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-2);
    max-width: 18rem;
    padding: .45rem var(--abstand-3);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    color: var(--text);
}
.anhang:hover { border-color: var(--akzent); text-decoration: none; }
.anhang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bilder-hinweis {
    margin: var(--abstand-3) var(--abstand-5) 0;
    padding: var(--abstand-2) var(--abstand-3);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    color: var(--text-leise);
    font-size: .85rem;
}

/* Der Mailtext: hell wie gedacht, mit etwas Rand im dunklen Rahmen. Der Rahmen hat keine Skripte und kein
   same-origin, darum kennt die Seite seine Inhaltshöhe nicht: er bekommt fast die volle Spaltenhöhe und rollt selbst. */
.mailrahmen {
    display: block;
    flex: 1;
    width: calc(100% - 2 * var(--abstand-5));
    min-height: max(24rem, calc(100dvh - var(--kopf-hoehe) - 9rem));
    margin: var(--abstand-3) var(--abstand-5) 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--text-stark);
}
.mailtext {
    margin: var(--abstand-3) var(--abstand-5) 0;
    padding: var(--abstand-4) var(--abstand-5);
    border-radius: var(--radius);
    background: var(--flaeche);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.6;
    max-width: var(--breite-text);
}
.zitat { color: var(--text-leise); }

.lesen-fuss { display: flex; align-items: flex-start; gap: var(--abstand-4); padding: var(--abstand-4) var(--abstand-5) var(--abstand-6); }
.kopfzeilen { flex: 1; min-width: 0; font-size: .82rem; }
.kopfzeilen pre {
    max-height: 22rem;
    overflow: auto;
    padding: var(--abstand-3);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    color: var(--text-leise);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ Einzelseiten */

.seite { max-width: var(--breite-inhalt); margin: 0 auto; padding: var(--abstand-5) var(--abstand-4) var(--abstand-6); }
.seite-schmal { max-width: 40rem; }
.seite-schreiben { max-width: 52rem; }
.zurueck { display: inline-flex; align-items: center; gap: var(--abstand-1); margin-bottom: var(--abstand-3); color: var(--text-leise); font-size: .88rem; }
.zurueck:hover { color: var(--text); text-decoration: none; }

.karte {
    margin: 0 0 var(--abstand-4);
    padding: var(--abstand-5);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    background: var(--flaeche);
}
.karte input:not([type="checkbox"]), .karte textarea, .karte select { background: var(--grund-tief); }
.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--abstand-4); align-items: start; }
.zwei-spalten .karte { margin: 0; }

.verwalten-liste { list-style: none; margin: 0; padding: 0; }
.verwalten-liste > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-2) var(--abstand-4);
    padding: var(--abstand-3) 0;
    border-bottom: 1px solid var(--rand);
}
.verwalten-liste > li > details { font-size: .88rem; }
.verwalten-liste > li > details[open] { flex-basis: 100%; }
.verwalten-liste > li > details > form { margin-top: var(--abstand-2); }
.verwalten-name { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; color: var(--text-stark); }
.alias form { margin: 0; }

.ordner-gross { list-style: none; margin: 0 0 var(--abstand-4); padding: 0; border: 1px solid var(--rand); border-radius: var(--radius-gross); overflow: hidden; }
.ordner-gross a { display: flex; justify-content: space-between; align-items: center; padding: var(--abstand-3) var(--abstand-4); color: var(--text); border-bottom: 1px solid var(--rand); background: var(--flaeche); }
.ordner-gross li:last-child a { border-bottom: 0; }
.ordner-gross a:hover { background: var(--flaeche-2); text-decoration: none; }

/* Schreiben */
.schreiben-form { gap: 0; }
.feld-zeile {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--abstand-3);
    padding: var(--abstand-1) 0;
    border-bottom: 1px solid var(--rand);
}
.feld-zeile label { color: var(--text-leise); font-size: .88rem; }
.feld-zeile input { width: 100%; border-color: transparent; background: transparent; }
.feld-zeile input:hover { border-color: var(--rand); }
.von-feld { display: flex; align-items: center; gap: var(--abstand-2); min-width: 0; }
.von-feld input { flex: 0 1 16rem; }
.von-feld .leise { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-bcc { border-bottom: 1px solid var(--rand); }
.cc-bcc > summary { padding: var(--abstand-2) 0; font-size: .85rem; }
.cc-bcc[open] > summary { border-bottom: 1px solid var(--rand); }
.cc-bcc .feld-zeile:last-child { border-bottom: 0; }
.schreiben-form textarea {
    width: 100%;
    margin-top: var(--abstand-4);
    min-height: 18rem;
    padding: var(--abstand-4);
    background: var(--flaeche);
    border-color: var(--rand);
    font-size: .95rem;
}
.schreiben-form .anhaenge-feld { margin-top: var(--abstand-4); }
.schreiben-form .knopf-reihe { margin: var(--abstand-4) 0 var(--abstand-2); }

/* Anmeldung und Fehler */
.anmelden {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--abstand-4);
    background:
        radial-gradient(40rem 26rem at 15% 0%, rgb(124 58 237 / .18), transparent 70%),
        radial-gradient(36rem 24rem at 100% 100%, rgb(6 182 212 / .12), transparent 70%),
        var(--grund);
}
.anmelde-karte {
    width: 100%;
    max-width: 24rem;
    padding: var(--abstand-6) var(--abstand-5);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    background: var(--flaeche);
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .35);
}
.anmelde-titel { display: flex; align-items: center; gap: var(--abstand-3); font-size: 1.5rem; margin-bottom: var(--abstand-5); }
.anmelde-karte input { width: 100%; }
.anmelde-karte .knopf-breit { margin-top: var(--abstand-4); align-self: stretch; min-height: 2.75rem; }
.anmelde-karte > .leise { margin: var(--abstand-4) 0 0; text-align: center; }

.fehlerseite { text-align: center; padding-top: 18vh; }
.fehlerseite .zeichen-blass { margin-bottom: var(--abstand-4); }

/* ------------------------------------------------------------------ Mittlere Breite */

@media (max-width: 1100px) {
    .mail { grid-template-columns: 11rem minmax(17rem, 22rem) minmax(0, 1fr); }
    .konto-adresse { display: none; }
    .suche select { display: none; }
}

/* ------------------------------------------------------------------ Handy: immer nur eine Spalte */

@media (max-width: 760px) {
    :root { --kopf-hoehe: 3.5rem; }
    .kopf { gap: var(--abstand-2); padding: 0 var(--abstand-3); }
    .marke-text { display: none; }
    .suche { margin-left: 0; }
    .kopf .schreiben { padding: 0 var(--abstand-3); }
    .kopf .schreiben span { display: none; }
    .nur-schmal { display: inline-flex !important; }

    .mail { display: block; height: auto; }
    .spalte { overflow: visible; border: 0; }
    .spalte-ordner { display: none; }
    body[data-ansicht="liste"] .spalte-lesen { display: none; }
    body[data-ansicht="lesen"] .spalte-liste { display: none; }
    .spalte-lesen { background: var(--grund); }

    .liste-kopf { padding: var(--abstand-3) var(--abstand-3) var(--abstand-2); flex-wrap: wrap; }
    .liste-kopf .zurueck { margin: 0; flex-basis: 100%; }
    .werkzeuge { top: var(--kopf-hoehe); padding: var(--abstand-2) var(--abstand-3); }
    .eintrag { padding-left: var(--abstand-3); }
    .stern { opacity: 1; }

    .lesen-kopf { padding: var(--abstand-3) var(--abstand-3) var(--abstand-2); }
    .lesen-kopf .zurueck { margin-bottom: var(--abstand-3); }
    .absender { flex-wrap: wrap; }
    .absender time { flex-basis: 100%; padding-left: 2.85rem; }
    .lese-aktionen { top: var(--kopf-hoehe); padding: var(--abstand-2) var(--abstand-3); }
    .lese-aktionen .knopf span { display: none; }
    .lese-aktionen .knopf .sym + span { display: none; }
    .lese-aktionen .knopf:not(:has(.sym)) { font-size: .78rem; }
    .anhaenge, .lesen-fuss { padding-left: var(--abstand-3); padding-right: var(--abstand-3); }
    .mailrahmen, .mailtext, .bilder-hinweis { margin-left: var(--abstand-2); margin-right: var(--abstand-2); }
    .mailrahmen { width: calc(100% - 2 * var(--abstand-2)); }
    .mailtext { padding: var(--abstand-3); }

    .seite { padding: var(--abstand-3) var(--abstand-3) var(--abstand-6); }
    .karte { padding: var(--abstand-4); }
    .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
    .zwei-felder { grid-template-columns: 1fr; }
    .feld-zeile { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .von-feld { flex-wrap: wrap; }
    .verschieben select { max-width: 8rem; }
}

/* Lese-Knöpfe ohne Symbol behalten ihren Text auch am Handy. */
@media (max-width: 760px) {
    .lese-aktionen button.knopf:not(:has(.sym)) span { display: inline; }
}

/* ------------------------------------------------------------------ Ruhe */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .zeichen .w { stroke: CanvasText; }
    .eintrag.aktiv { outline: 2px solid Highlight; }
}