/* DS Mail: Stil wie der DS Manager (R7 Website-Stil, design-kompass): #F5F5F7, weiße Karten, Radius 24/14, Geist, Schwarz als Hauptton, Grün nur als Akzent. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/geist-latin.woff2) format("woff2"); }
:root {
  --bg: #F5F5F7; --bg-2: #EDEDF0; --card: #FFFFFF; --card-2: #FAFAFB;
  --ink: #1D1D1F; --ink-2: #3A3A3C; --ink-3: #5A5A5F; --ink-4: #77777C; --line: #EDEDF0; --line-2: #D1D1D6;
  --haupt: #1D1D1F; --haupt-2: #3A3A3C; --auf-tinte: #FFFFFF; --mint: #E7F3EB; --ok: #2E7A4A; --punkt: #3E9B5F;
  --amber: #A84A0C; --sand: #FDEEE3; --rose: #FDE8EA; --bad: #C2283F;
  --r: 22px; --r-s: 14px; --r-chip: 99px;
  --f: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --focus: 0 0 0 3px rgba(29,29,31,.22);
  --sh-hoch: 0 1px 0 rgba(0,0,0,.04), 0 12px 28px -16px rgba(0,0,0,.35);
  --side: 272px; --top: 60px;
  /* Flächen klar getrennt, ohne Verläufe (Marvin 25.10.2026, Vorbild CRM): Seitenleiste dunkler, Leiste oben weiß mit Linie, Arbeitsfläche hellgrau,
     Liste und Leseansicht weiß, Werkzeugleiste der Liste leicht grau. Text auf allen Flächen AA (--ink-3 ≥ 5.6:1). */
  --f-seite: #E4E4E9; --f-oben: #FFFFFF; --f-oben-linie: #E1E1E6; --f-leiste: #EFEFF3; --f-lesen: #FFFFFF; --f-suche: #EFEFF3;
}
/* Dunkel: eigener Schalter (assets/thema.js), ohne Wahl wie das System */
html { color-scheme: light; }
html[data-thema="dunkel"] { color-scheme: dark; }
html[data-thema="dunkel"] { --bg: #111113; --bg-2: #1C1C1F; --card: #1A1A1D; --card-2: #202024; --ink: #F2F2F5; --ink-2: #D9D9DE; --ink-3: #A8A8AE; --ink-4: #7E7E85; --line: #26262B; --line-2: #3A3A40;
    --haupt: #F2F2F5; --haupt-2: #D9D9DE; --auf-tinte: #111113; --mint: #1C3326; --ok: #6CC08B; --amber: #F0A070; --sand: #3A2518; --rose: #3B1A20; --bad: #F08A98; --focus: 0 0 0 3px rgba(242,242,245,.25);
    --f-seite: #08080A; --f-oben: #1E1E22; --f-oben-linie: #2C2C31; --f-leiste: #26262B; --f-lesen: #1F1F23; --f-suche: #2C2C31; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* Nichts darf die Seite seitlich verschiebbar machen (Marvin 25.10.2026, Verwaltung am Handy); clip statt hidden, damit „sticky“ weiter geht. Reiter und Leiste scrollen in sich. */
main { overflow-x: clip; max-width: 100%; }
.card table { display: block; max-width: 100%; overflow-x: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--f); min-height: 100dvh; }
a { color: var(--ink); }
h1, h2, h3 { letter-spacing: -.01em; line-height: 1.2; }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 18px; font-weight: 750; margin: 0 0 8px; }
h3 { font-size: 15px; font-weight: 750; margin: 18px 0 6px; }
.m, .sub { color: var(--ink-3); font-size: 14px; }
.sub { margin: 4px 0 14px; }
.ic { width: 20px; height: 20px; flex: none; }
.ic.klein { width: 15px; height: 15px; }
.ic.gross { width: 44px; height: 44px; color: var(--ink-4); }
.nowrap { white-space: nowrap; }
.mt { margin-top: 12px; }
.dev-leiste { background: var(--sand); color: var(--amber); font-size: 12px; font-weight: 750; text-align: center; padding: 3px; position: sticky; top: 0; z-index: 50; }

/* Rahmen */
#top { position: fixed; top: 0; left: 0; right: 0; height: var(--top); background: var(--f-oben); box-shadow: 0 1px 0 var(--f-oben-linie); display: flex; align-items: center; gap: 8px; padding: 0 12px 0 8px; z-index: 20; }
body.ist-dev #top { top: 22px; }
#top .marke { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
#top .marke b { color: var(--ink-4); font-weight: 700; }
#top .suche { flex: 1; display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 0 auto; background: var(--f-suche); border-radius: var(--r-chip); padding: 0 14px; min-height: 44px; color: var(--ink-3); }
#top .suche input { flex: 1; border: 0; background: none; min-height: 44px; margin: 0; padding: 0; font-size: 15px; color: var(--ink); }
#top .suche input:focus { outline: none; box-shadow: none; }
#top .suche:focus-within { box-shadow: var(--focus); }
#menu-btn { display: none; }
#side { position: fixed; top: 0; bottom: 0; left: 0; width: var(--side); background: var(--f-seite); box-shadow: 1px 0 0 var(--f-oben-linie); display: flex; flex-direction: column; z-index: 30; padding-top: var(--top); transition: transform .2s; }
body.ist-dev #side { padding-top: calc(var(--top) + 22px); }
#side .brand { display: none; align-items: center; gap: 8px; padding: 18px 20px 8px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
#side .brand b { color: var(--ink-4); font-weight: 700; }
#side .schreiben { margin: 6px 16px 10px; min-height: 48px; border-radius: var(--r-s); gap: 8px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); }
#side nav { padding: 2px 10px 10px; overflow-y: auto; flex: 1; }
#side nav a, #side .nav-btn { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 10px; margin: 1px 0; color: var(--ink-2); text-decoration: none; border-radius: var(--r-s); font-weight: 600; font-size: 14px; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
@media (hover: hover) { #side nav a:hover, #side .nav-btn:hover { background: var(--card); color: var(--ink); } }
#side nav a.on { background: var(--card); color: var(--ink); font-weight: 750; }
#side nav .konto .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#side nav .ordner { margin: 0 0 4px 14px; border-left: 2px solid var(--line-2); padding-left: 4px; }
#side nav .ordner a { min-height: 38px; font-weight: 500; font-size: 14px; }
#side .i { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); flex: none; }
#side .i svg { width: 18px; height: 18px; }
#side .grp { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; padding: 16px 10px 4px; color: var(--ink-4); }
#side .me { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 20px 16px; font-size: 14px; font-weight: 700; }
#shade { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 25; }
.punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--fk, var(--ink)); flex: none; margin: 0 8px; }
.lp { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--fk, var(--punkt)); flex: none; margin: 0 8px; }
.badge { margin-left: auto; font-size: 12px; font-weight: 750; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: var(--r-chip); background: var(--haupt); color: var(--auf-tinte); }
.badge:empty { display: none; }
main { margin-left: var(--side); padding: calc(var(--top) + 4px) 24px 90px 8px; }
body.ist-dev main { padding-top: calc(var(--top) + 30px); }
body.bare main { margin: 0 auto; max-width: 420px; padding: 48px 16px; }
@media (max-width: 900px) {
  #menu-btn { display: inline-flex; }
  #top .marke span { display: none; }
  #side { transform: translateX(-100%); background: var(--card); box-shadow: var(--sh-hoch); padding-top: 0; }
  #side .brand { display: flex; }
  body.open #side { transform: none; }
  body.open #shade { display: block; }
  main { margin-left: 0; padding: calc(var(--top) + 6px) 12px 96px; }
  body.detail #top .suche { display: none; }
}

/* Karten, Knöpfe, Formulare */
.card { background: var(--card); border-radius: var(--r); padding: 18px 20px; margin-bottom: 14px; }
button, .btn, input, select, textarea { font: inherit; color: inherit; }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--r-s); padding: 0 18px; min-height: 44px; background: var(--haupt); color: var(--auf-tinte); font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, transform .12s; }
@media (hover: hover) { button:hover, .btn:hover { background: var(--haupt-2); color: var(--auf-tinte); } }
button:active, .btn:active { transform: scale(.97); }
.btn.sec, button.sec { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (hover: hover) { .btn.sec:hover, button.sec:hover { background: var(--bg); color: var(--ink); } }
.btn.danger, button.danger { background: var(--bad); color: #fff; }
.small { min-height: 38px; padding: 0 14px; font-size: 14px; }
.breit { width: 100%; min-height: 48px; }
.ib { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: none; color: var(--ink-2); flex: none; }
@media (hover: hover) { .ib:hover { background: var(--bg-2); color: var(--ink); } }
.ib.an { color: var(--amber); }
.link { background: none; color: var(--ink-3); min-height: 0; padding: 0 6px; font-weight: 600; font-size: 13px; }
@media (hover: hover) { .link:hover { background: none; color: var(--ink); } }
input, select, textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--card); margin: 3px 0 10px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--focus); }
input[type=checkbox] { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--haupt); flex: none; }
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
label { font-size: 13px; color: var(--ink-3); font-weight: 700; }
label.inline { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); font-weight: 600; min-height: 40px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 12px; }
.flex { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.inline-form input, .inline-form select { width: auto; margin: 0; min-width: 120px; flex: 1; }
.chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 750; padding: 5px 12px; border-radius: var(--r-chip); background: var(--card); color: var(--ink-2); text-decoration: none; white-space: nowrap; min-height: 32px; }
.chip.on { background: var(--haupt); color: var(--auf-tinte); }
.chip.ok { background: var(--mint); color: var(--ok); } .chip.warn { background: var(--sand); color: var(--amber); } .chip.bad { background: var(--rose); color: var(--bad); }
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.flash { border-radius: var(--r-s); padding: 12px 16px; margin: 0 0 12px; background: var(--mint); color: var(--ok); font-weight: 600; }
.flash.err { background: var(--rose); color: var(--bad); } .flash.warn { background: var(--sand); color: var(--amber); }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.kopf-rechts { display: flex; gap: 6px; }
.konto-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); vertical-align: middle; }
.konto-tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--fk, var(--ink)); }
.konto-tag.klein { font-size: 12px; }
.tw { overflow-x: auto; padding: 8px 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 8px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
ul.zeilen, ul.einfach { list-style: none; margin: 0; padding: 0; }
ul.zeilen li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
ul.zeilen li:last-child { border-bottom: 0; }
ul.zeilen a { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; }
ul.einfach li { display: flex; align-items: center; gap: 4px; padding: 6px 0; }
.recht { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--line); }
.recht > span { flex: 1; min-width: 160px; font-weight: 600; }
.filter-neu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.filter-neu input, .filter-neu select { width: auto; margin: 0; flex: 1; min-width: 140px; }
.leer { text-align: center; padding: 60px 20px; color: var(--ink-3); }
.leer p { margin: 10px 0 0; font-weight: 600; }
.seiten { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 16px 0; }

/* Verwaltung: Reiter frei stehend, Filter-Formular in Zeilen, Signatur-Vorschau, Ordner neu in der Seitenleiste */
.reiter.reiter-frei { background: none; border: 0; margin: 4px 0 14px; padding: 0; flex-wrap: wrap; gap: 6px; }
.reiter.reiter-frei a { background: var(--card); border-radius: var(--r-chip); border: 0; min-height: 40px; padding: 0 16px; }
.reiter.reiter-frei a.on { background: var(--haupt); color: var(--auf-tinte); }
.filter-form { display: flex; flex-direction: column; gap: 6px; }
.filter-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-zeile .wort { font-weight: 750; min-width: 44px; color: var(--ink-3); }
.filter-zeile input, .filter-zeile select { width: auto; margin: 0; flex: 1; min-width: 150px; }
.filter-zeile label.inline { min-height: 40px; }
.signatur-vorschau { background: var(--bg); border-radius: var(--r-s); padding: 14px 16px; min-height: 120px; color: var(--ink); }
.signatur-vorschau div { color: inherit !important; }
.signatur-vorschau a { color: inherit !important; }
.sig-bild { max-width: 220px; height: auto; display: block; margin-top: 10px; }
#side .ordner-neu summary { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 10px; font-size: 14px; color: var(--ink-4); cursor: pointer; list-style: none; border-radius: var(--r-s); }
#side .ordner-neu summary::-webkit-details-marker { display: none; }
@media (hover: hover) { #side .ordner-neu summary:hover { background: var(--card); color: var(--ink); } }
#side .ordner-neu form { padding: 0 10px 8px; margin: 0; }
#side .ordner-neu input { min-height: 40px; }

.app-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .app-kopf h2 { margin: 0; } .app-kopf img { border-radius: 14px; }
.vorzeilen { white-space: normal; }

/* Runde 3: Seitenleiste mit einklappbaren Postfächern, angeheftete Ordner, Ziehen, Ausrichtung der Leiste */
#side .konto { margin: 2px 0 6px; }
#side .konto-kopf { display: flex; align-items: center; }
#side .konto-kopf .pfeil { width: 28px; height: 36px; min-height: 0; padding: 0; background: none; color: var(--ink-4); border-radius: 8px; flex: none; }
@media (hover: hover) { #side .konto-kopf .pfeil:hover { background: var(--card); color: var(--ink); } }
#side .konto-kopf .pfeil svg { width: 16px; height: 16px; transition: transform .15s; transform: rotate(90deg); }
#side .konto.zu .konto-kopf .pfeil svg { transform: rotate(0deg); }
#side .konto-kopf .konto-zeile { flex: 1; min-width: 0; padding-left: 4px; font-weight: 750; }
#side .konto.aktiv .konto-zeile { color: var(--ink); }
#side .konto.zu .ordner a:not(.immer):not(.on), #side .konto.zu .ordner-neu { display: none; }
#side nav .ordner { margin: 0 0 2px 28px; border-left: 0; padding-left: 0; }
#side nav .ordner a .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#side .pin { color: var(--ink-4); display: inline-flex; }
body.ziehen #side .konto:not(.ziel-konto) .ordner a { opacity: .45; }
#side nav a.drop-ziel { background: var(--mint); color: var(--ok); outline: 2px dashed var(--ok); outline-offset: -2px; }
.mail[draggable=true] { cursor: default; }
.mail .inhalt { -webkit-user-drag: none; user-select: none; }
.zieh-bild { position: fixed; top: -100px; left: 0; background: var(--haupt); color: var(--auf-tinte); padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.ib, summary.ib { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.mail-aktionen .menue { display: inline-flex; }
.leiste { gap: 4px; }
.leiste-rechts .ib { width: 40px; height: 40px; }
.mail .z1 .label { flex: none; }

.sig-raster { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.2fr); gap: 20px; align-items: start; }
.sig-gruppe { background: var(--bg); border-radius: var(--r-s); padding: 12px 14px; margin-top: 6px; }
.sig-gruppe input[type=range] { min-height: 0; padding: 0; border: 0; background: none; margin: 4px 0 12px; accent-color: var(--haupt); }
.sig-gruppe output { font-variant-numeric: tabular-nums; color: var(--ink); }
.sig-vorschau-spalte { position: sticky; top: calc(var(--top) + 12px); }
iframe.sig-vorschau { width: 100%; height: 260px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: #fff; display: block; margin-top: 4px; }
@media (max-width: 900px) { .sig-raster { grid-template-columns: 1fr; } .sig-vorschau-spalte { position: static; } }

/* Anmeldung */
.login-kopf { text-align: center; margin-bottom: 18px; }
.login-kopf h1 { margin-top: 10px; }
.code { font-size: 24px; letter-spacing: .2em; text-align: center; font-variant-numeric: tabular-nums; }
.schritte { padding-left: 20px; margin: 0; } .schritte li { margin-bottom: 14px; }
.qr { display: flex; justify-content: center; margin: 12px 0; } .qr canvas, .qr img { background: #fff; padding: 10px; border-radius: var(--r-s); }
.secret { display: block; font-size: 15px; padding: 10px; background: var(--bg); border-radius: var(--r-s); word-break: break-all; margin-top: 8px; user-select: all; }
.secret.gross { font-size: 22px; text-align: center; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .codes code { font-size: 17px; padding: 8px 10px; background: var(--bg); border-radius: 10px; text-align: center; user-select: all; }

/* Liste: feste Leiste wie Gmail (Höhe bleibt gleich, Aktionen erscheinen darin), darunter Reiter */
.leiste { display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 4px 6px 4px 8px; margin: 0; background: var(--f-leiste); border-bottom: 1px solid var(--line); border-radius: var(--r-s) var(--r-s) 0 0; position: sticky; top: var(--top); z-index: 10; }
body.ist-dev .leiste { top: calc(var(--top) + 22px); }
.leiste .wahl-alle { display: flex; align-items: center; justify-content: center; width: 36px; height: 44px; flex: none; }
.leiste-titel { font-weight: 750; font-size: 16px; margin-left: 6px; display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste-aktionen { display: flex; align-items: center; gap: 2px; }
.leiste-aktionen .anzahl { font-weight: 750; font-size: 14px; margin: 0 8px 0 6px; white-space: nowrap; }
.leiste .trenner { width: 1px; height: 24px; background: var(--line-2); margin: 0 6px; }
.leiste-rechts { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.leiste-rechts .seiten-text { white-space: nowrap; font-variant-numeric: tabular-nums; margin-right: 4px; }
.leiste .ib.aus { opacity: .3; pointer-events: none; }
.reiter { display: flex; gap: 2px; background: var(--card); padding: 0 8px; margin: -6px 0 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.reiter a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; font-weight: 700; font-size: 14px; color: var(--ink-3); text-decoration: none; border-bottom: 3px solid transparent; }
@media (hover: hover) { .reiter a:hover { color: var(--ink); background: var(--bg); } }
.reiter a.on { color: var(--ink); border-bottom-color: var(--haupt); }
.reiter svg { width: 18px; height: 18px; }
.menue { position: relative; }
.menue summary { list-style: none; }
.menue summary::-webkit-details-marker { display: none; }
.menue-liste { position: absolute; top: calc(100% + 4px); left: 0; z-index: 15; background: var(--card); border-radius: var(--r-s); box-shadow: var(--sh-hoch); padding: 6px; min-width: 210px; display: flex; flex-direction: column; }
.menue-liste.rechts { left: auto; right: 0; }
.menue-liste hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.menue-liste .menue-titel { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); padding: 6px 10px 2px; }
.menue-eintrag { background: none; color: var(--ink); justify-content: flex-start; min-height: 38px; padding: 0 10px; border-radius: 10px; font-weight: 600; text-align: left; }
@media (hover: hover) { .menue-eintrag:hover { background: var(--bg); color: var(--ink); } }
.menue-eintrag.rot { color: var(--bad); }
.menue-eintrag svg { width: 16px; height: 16px; color: var(--ink-3); }
.kontext { position: fixed; top: 0; left: 0; z-index: 40; max-height: calc(100vh - 20px); overflow-y: auto; }
ul.mails { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: 0 0 var(--r-s) var(--r-s); overflow: hidden; }
.leer { background: var(--card); border-radius: 0 0 var(--r-s) var(--r-s); margin-top: -6px; }
.mail.gewaehlt { background: var(--bg-2); }
.mail.zieht { opacity: .4; }
body.ziehen #side nav a { transition: background .1s; }
#side nav a.drop-ziel { background: var(--mint); color: var(--ok); outline: 2px dashed var(--ok); outline-offset: -2px; }
.mail { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-bottom: 1px solid var(--line); position: relative; background: var(--card); touch-action: pan-y; }
.mail:last-child { border-bottom: 0; }
@media (hover: hover) { .mail:hover { background: var(--card-2); } }
.mail .wahl { display: flex; align-items: center; justify-content: center; width: 36px; height: 44px; flex: none; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fk, var(--ink)); color: #fff; font-weight: 750; font-size: 14px; flex: none; text-decoration: none; letter-spacing: .02em; }
.avatar.me { width: 36px; height: 36px; background: var(--haupt); color: var(--auf-tinte); }
.mail .inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; padding: 4px 0; }
.mail .z1, .mail .z2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mail .wer { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink-2); }
.mail .wer .n { color: var(--ink-4); font-weight: 600; font-size: 13px; }
.mail .betreff { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.mail.ungelesen .wer, .mail.ungelesen .betreff { color: var(--ink); font-weight: 750; }
.mail .datum { font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail.ungelesen .datum { color: var(--ink); font-weight: 750; }
.mail .zeichen { display: inline-flex; gap: 4px; color: var(--ink-4); }
.label { display: inline-block; font-size: 11px; font-weight: 750; padding: 2px 8px; border-radius: 6px; background: var(--fk, var(--punkt)); color: #fff; white-space: nowrap; }
.fahne-btn { width: 40px; height: 40px; color: var(--line-2); }
.fahne-btn[aria-pressed=true], .mail.fahne .fahne-btn { color: var(--amber); }
/* Wischen am Handy: farbige Fläche mit Symbol und Text hinter der Zeile, die Zeile rutscht darüber (wie Gmail) */
ul.mails { position: relative; }
.mail.wischt { z-index: 1; will-change: transform; }
.wisch-hinten { position: absolute; left: 0; right: 0; z-index: 0; display: flex; align-items: center; padding: 0 22px; color: #fff; font-weight: 750; font-size: 15px; background: var(--ink-4); overflow: hidden; }
.wisch-hinten.rechts { justify-content: flex-end; }
.wisch-hinten.rechts .wisch-text { flex-direction: row-reverse; } /* Symbol immer am äußeren Rand, wo die Fläche zuerst frei wird */
.wisch-hinten .wisch-text { display: inline-flex; align-items: center; gap: 10px; opacity: .75; transform: scale(.92); transition: opacity .12s, transform .12s; }
.wisch-hinten.bereit .wisch-text { opacity: 1; transform: none; }
.wisch-hinten svg { width: 22px; height: 22px; }
.wisch-hinten.w-archiv { background: #2E7A4A; }
.wisch-hinten.w-loeschen { background: #C2283F; }
.wisch-hinten.w-gelesen { background: #3A3A3C; }
.wisch-hinten.w-nichts { background: var(--bg-2); }
.mails.faden .mail { padding-left: 12px; }
@media (max-width: 900px) {
  .mail .wahl { display: none; }
  .mail .inhalt { padding: 2px 0; }
  .fahne-btn { display: none; }
  .leiste .wahl-alle { display: none; }
  .leiste-titel { font-size: 15px; }
  .reiter a { padding: 0 10px; }
}
.fab { display: none; position: fixed; right: 18px; bottom: 22px; width: 58px; height: 58px; border-radius: 18px; background: var(--haupt); color: var(--auf-tinte); align-items: center; justify-content: center; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); z-index: 15; }
.fab svg { width: 26px; height: 26px; }
@media (max-width: 900px) { .fab { display: flex; } }
/* Sofort sichtbare Rückmeldung beim Antippen, kein Warten auf Doppeltipp-Zoom */
a, button, .btn, .fab, .mail { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.fab:active { transform: scale(.94); background: var(--haupt-2); }

/* Mail lesen */
.mail-kopf { display: flex; align-items: center; gap: 4px; margin: 2px 0 10px; max-width: 1200px; }
.mail-detail, .mails.faden, h2.m { max-width: 1200px; }
.mail-kopf h1 { font-size: 20px; margin-left: 6px; }
.mail-aktionen { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.mail-detail .betreff { font-size: 22px; margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.firma { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: var(--mint); color: var(--ok); border-radius: var(--r-chip); padding: 6px 14px 6px 10px; font-weight: 700; font-size: 14px; margin: 0 8px 10px 0; }
.firma .m { color: inherit; opacity: .75; font-weight: 600; }
.absender { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.absender .wer { flex: 1; min-width: 0; }
.absender .wer > div { overflow-wrap: anywhere; }
.empfaenger summary { cursor: pointer; list-style: none; }
.empfaenger summary::-webkit-details-marker { display: none; }
.empfaenger summary::after { content: " ▾"; color: var(--ink-4); }
.empfaenger[open] summary::after { content: " ▴"; }
.empfaenger > div { margin-top: 6px; line-height: 1.6; }
.absender time { white-space: nowrap; }
/* Der Rahmen ist sandboxed (fremde Herkunft) und immer hell: Mails sehen so aus wie beim Absender, auch im Dunkelmodus (wie bei Gmail) */
iframe.inhalt { width: 100%; border: 0; min-height: 24px; display: block; background: var(--card); border-radius: 12px; }
.bilder { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .bilder img { max-width: 100%; max-height: 320px; border-radius: var(--r-s); }
/* Empfänger-Vorschläge aus dem CRM */
.schreiben .zeile { position: relative; }
.vorschlaege { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-s); box-shadow: var(--sh-hoch); padding: 6px; max-height: 320px; overflow-y: auto; }
.vorschlag { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; background: none; color: var(--ink); border: 0; border-radius: 10px; padding: 8px 10px; text-align: left; min-height: 0; font-weight: 400; }
.vorschlag b { font-weight: 700; font-size: 14px; }
.vorschlag .m { font-size: 13px; }
.vorschlag.an { background: var(--bg-2); }
@media (hover: hover) { .vorschlag:hover { background: var(--bg-2); color: var(--ink); } }
.crm-hinweis { font-size: 13px; color: var(--ok); margin: -2px 0 6px; padding-left: 2px; }
.crm-hinweis .gesperrt { color: var(--bad); font-weight: 700; }
.crm-hinweis .kalt, .vorschlag .kalt { color: var(--amber); }
.vorschlag .kalt { font-size: 12px; font-weight: 600; }
.sperre-trotzdem { display: flex; margin-top: 8px; font-weight: 600; }
/* Gestaltete Mails (wie Gmail): eigene Farben auf Weiß, auch im Dunkelmodus; Leiste, wenn Bilder von außen ausgeblendet sind */
iframe.inhalt.gestaltet { background: #FFFFFF; }
.bilder-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; padding: 8px 10px 8px 12px; border-radius: 12px; background: var(--bg-2); font-size: 14px; }
.bilder-leiste > span { flex: 1 1 auto; color: var(--ink-3); }
.bilder-leiste svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.bilder-leiste form { margin: 0; }
@media (max-width: 900px) { .bilder-leiste > span { flex-basis: calc(100% - 30px); } .bilder-leiste > .btn, .bilder-leiste form { flex: 1 1 auto; } .bilder-leiste .btn { min-height: 42px; width: 100%; justify-content: center; } }
.anhaenge { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; }
.anhang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg); border-radius: var(--r-s); padding: 8px 12px; }
.anhang .name { flex: 1; min-width: 120px; font-weight: 600; overflow-wrap: anywhere; }
.antwort-leiste { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .absender time { display: none; } .mail-detail .betreff { font-size: 19px; } .mail-aktionen .ib { width: 40px; } }

/* Schreiben */
.schreiben .zeile { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); min-height: 48px; }
.schreiben .zeile label { width: 64px; flex: none; font-size: 14px; }
.schreiben .zeile input, .schreiben .zeile select { border: 0; margin: 0; padding: 8px 0; background: none; border-radius: 0; flex: 1; min-width: 0; }
.schreiben .zeile input:focus, .schreiben .zeile select:focus { box-shadow: none; }
.schreiben .zeile .wert { flex: 1; padding: 8px 0; color: var(--ink-2); }
.schreiben .text { border: 0; border-radius: 0; margin: 6px 0 0; padding: 10px 0; min-height: 120px; background: none; font-size: 15px; resize: vertical; }
.schreiben .text:focus { box-shadow: none; }
.signatur-hinweis { padding: 4px 0 8px; }
.anhang-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.senden-leiste { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.suche-gross { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--card); border-radius: var(--r); padding: 10px 14px; margin: 12px 0; }
.suche-gross input, .suche-gross select { flex: 1; min-width: 160px; margin: 0; border: 0; background: var(--bg); }

/* Farben der Paletten als Klassen (statt Inline-Stil, CSP): Konten, Labels, Avatare */
.fk-1d1d1f { --fk: #1D1D1F; }
.fk-2e7a4a { --fk: #2E7A4A; }
.fk-a84a0c { --fk: #A84A0C; }
.fk-3b5bdb { --fk: #3B5BDB; }
.fk-8e3b9a { --fk: #8E3B9A; }
.fk-c2283f { --fk: #C2283F; }
.fk-3e9b5f { --fk: #3E9B5F; }
.fk-b7791f { --fk: #B7791F; }
.fk-0e7490 { --fk: #0E7490; }
.fk-3a3a3c { --fk: #3A3A3C; }
.fk-5a5a5f { --fk: #5A5A5F; }

/* Schwarz ist im Dunkelmodus unsichtbar: Konto-Punkt, Avatar und Label in Schwarz dort grau */
html[data-thema="dunkel"] .fk-1d1d1f { --fk: #6E6E75; } html[data-thema="dunkel"] .fk-3a3a3c { --fk: #5A5A60; }

/* Dialoge (statt Browser-Fenster) und Menüs am Handy als Blatt von unten (Marvin 25.10.2026: Overlays mobil sauber, Abstände, Zeilenabstand) */
#blatt-schatten { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 45; }
.dialog { position: fixed; z-index: 50; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 32px)); background: var(--card); border-radius: var(--r); padding: 22px 22px 18px; box-shadow: var(--sh-hoch); }
.dialog-text { margin: 0 0 14px; font-size: 16px; line-height: 1.45; font-weight: 600; }
.dialog input { margin: 0 0 16px; font-size: 16px; }
.dialog-knoepfe { display: flex; gap: 10px; justify-content: flex-end; }
.dialog-knoepfe button { min-height: 46px; padding: 0 20px; }
.kontext { z-index: 46; }
@media (max-width: 900px) {
  .dialog { top: auto; bottom: 0; left: 0; transform: none; width: 100%; border-radius: 22px 22px 0 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); }
  .dialog-knoepfe button { flex: 1; min-height: 50px; }
  .kontext, .menue .menue-liste { position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; min-width: 0; max-height: 78vh; overflow-y: auto;
    border-radius: 22px 22px 0 0; padding: 22px 12px calc(14px + env(safe-area-inset-bottom)); z-index: 46; box-shadow: 0 -10px 30px rgba(0,0,0,.25); }
  .kontext::before, .menue .menue-liste::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 99px; background: var(--line-2); }
  .kontext .menue-eintrag, .menue .menue-eintrag { min-height: 52px; padding: 0 16px; font-size: 16px; border-radius: 14px; gap: 12px; }
  .kontext .menue-titel, .menue .menue-titel { padding: 14px 16px 6px; font-size: 12px; }
  .kontext hr, .menue .menue-liste hr { margin: 6px 12px; }
  body.blatt-offen::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 44; }
  /* Leiste mit vielen Knöpfen: waagerecht schiebbar statt umbrechen */
  .leiste { overflow-x: auto; scrollbar-width: none; }
  .leiste::-webkit-scrollbar { display: none; }
  .leiste-aktionen { flex: none; }
  .leiste-aktionen .menue { position: static; }
  .reiter { overflow-x: auto; scrollbar-width: none; }
  .reiter a { flex: none; }
  /* Verwaltung und Formulare: Luft und gut tippbare Felder */
  .card { padding: 16px 16px; border-radius: 18px; }
  .inline-form input, .inline-form select, .filter-zeile input, .filter-zeile select { min-width: 0; flex: 1 1 100%; }
  .inline-form button, .filter-form > button { flex: 1 1 auto; min-height: 46px; }
  ul.zeilen li { gap: 8px; padding: 12px 0; }
  .filter-zeile { gap: 8px; }
  .filter-zeile .wort { min-width: 0; width: 100%; }
  .reiter.reiter-frei { flex-wrap: nowrap; overflow-x: auto; margin: 4px -12px 14px; padding: 0 12px; }
  .mail-aktionen .ib { width: 42px; height: 42px; }
  #toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
  input, select, textarea { font-size: 16px; } /* iOS zoomt sonst beim Antippen */
  .leiste .seiten-text, .leiste-titel .konto-tag { display: none; }
  #blatt-schatten { background: rgba(0,0,0,.55); }
}

/* Hinweise */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--card); padding: 12px 18px; border-radius: var(--r-s); font-weight: 700; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: calc(100% - 32px); }
#toast.an { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast a { color: inherit; pointer-events: auto; }
#toast { display: flex; align-items: center; gap: 14px; }
#toast .rueck-knopf { pointer-events: auto; background: none; border: 0; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; padding: 6px 2px; min-height: 0; cursor: pointer; }
@media (hover: hover) { #toast .rueck-knopf:hover { background: none; color: inherit; opacity: .8; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Sofortige Rückmeldung bei jedem Antippen (Marvin 25.10.2026: „smooth“): Ladebalken oben, Inhalt blasst ab, bis die neue Seite da ist */
#ladebalken { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60; background: var(--haupt); opacity: 0; pointer-events: none; }
body.laedt #ladebalken { opacity: 1; animation: laden 8s cubic-bezier(.1,.7,.2,1) forwards; }
@keyframes laden { 0% { width: 0; } 10% { width: 35%; } 100% { width: 92%; } }
body.laedt main { opacity: .55; transition: opacity .15s .08s; pointer-events: none; }
body.laedt main.platzhalter > * { display: none; }
main.platzhalter::before { content: ""; display: block; height: 70vh; margin: 8px 0; border-radius: var(--r-s); background: repeating-linear-gradient(var(--card) 0 64px, var(--bg) 64px 66px); }
.mail.offen-gleich { background: var(--bg-2); }
.platzhalter-zeile { height: 64px; border-bottom: 1px solid var(--line); background: var(--card); position: relative; }
.platzhalter-zeile::before, .platzhalter-zeile::after { content: ""; position: absolute; left: 60px; height: 10px; border-radius: 5px; background: var(--bg-2); }
.platzhalter-zeile::before { top: 18px; width: 40%; }
.platzhalter-zeile::after { top: 36px; width: 65%; }
@media (prefers-reduced-motion: reduce) { body.laedt #ladebalken { animation: none; width: 60%; } }
.abruf-uhr { font-size: 12px; font-variant-numeric: tabular-nums; margin: 0 6px 0 -2px; min-width: 30px; }

/* „Alle Konten“: Konto vorne statt rechts (Marvin 25.10.2026). Farbstreifen am linken Rand der Zeile und Kürzel am Profilbild in der Kontofarbe;
   der Buchstabe sorgt dafür, dass die Farbe nicht das einzige Zeichen ist. Im Dunkelmodus wird Schwarz zu Grau (fk-1d1d1f), damit Streifen und Kürzel sichtbar bleiben. */
.konto-streifen { position: absolute; left: 0; top: 7px; bottom: 7px; width: 4px; border-radius: 0 4px 4px 0; background: var(--fk, var(--ink-4)); }
.avatar-huelle { position: relative; flex: none; display: inline-flex; }
.konto-kuerzel { position: absolute; right: -4px; bottom: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--fk, var(--ink-4)); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--card); box-sizing: border-box; }
.mail.gewaehlt .konto-kuerzel, .mail.offen-gleich .konto-kuerzel { box-shadow: 0 0 0 2px var(--bg-2); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Schalter Hell/Dunkel oben neben dem Profil */
.thema-schalter svg { width: 20px; height: 20px; }
.thema-schalter .ts-sonne { display: none; }
html[data-thema="dunkel"] .thema-schalter .ts-mond { display: none; }
html[data-thema="dunkel"] .thema-schalter .ts-sonne { display: inline; }

/* Verwaltung › Automation */
.auto-liste li { padding: 0; display: block; }
.auto-liste .auto-zeile { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 4px; text-decoration: none; color: var(--ink); border-radius: 10px; }
.auto-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auto-von { grid-column: 1 / -1; font-size: 13px; overflow-wrap: anywhere; }
@media (hover: hover) { .auto-zeile:hover { background: var(--bg); } }
.auto-status { display: inline-block; font-size: 12px; font-weight: 750; padding: 3px 10px; border-radius: 99px; background: var(--bg-2); color: var(--ink-3); white-space: nowrap; }
.auto-status.an { background: var(--mint); color: var(--ok); }
.auto-status.fehler { background: var(--rose); color: var(--bad); }
.auto-postfach { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; display: grid; gap: 10px; }
.auto-postfach:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.auto-einstellungen, .auto-form { display: grid; gap: 12px; }
.auto-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .auto-raster { grid-template-columns: 1fr; } }
.auto-vorschau { width: 100%; height: 460px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.bausteine { display: flex; flex-wrap: wrap; gap: 6px; }
.bausteine .chip { min-height: 34px; padding: 0 12px; border-radius: 99px; background: var(--bg-2); color: var(--ink); font-size: 13px; font-weight: 650; border: 0; }
.bausteine .chip.pflicht { box-shadow: inset 0 0 0 1.5px var(--amber); }
@media (hover: hover) { .bausteine .chip:hover { background: var(--line-2); color: var(--ink); } }
.kopf-zurueck { display: flex; align-items: center; gap: 8px; }
.kopf-zurueck h1 { margin: 0; }
.auto-ausgang td, .auto-ausgang th { text-align: left; font-size: 13px; padding: 6px 8px; vertical-align: top; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.knoepfe form { margin: 0; }
/* Leseansicht als eigene Fläche */
.card.mail-detail { background: var(--f-lesen); }
html[data-thema="dunkel"] .card.mail-detail iframe.inhalt:not(.gestaltet) { background: var(--f-lesen); }

/* Verwaltung › Konten: Reihenfolge (Griff zum Ziehen am Rechner, Pfeile am Handy) */
.konten-reihe li { display: flex; align-items: center; gap: 8px; }
.konten-reihe li > a { flex: 1; min-width: 0; }
.konten-reihe .griff { color: var(--ink-4); cursor: grab; display: inline-flex; }
.konten-reihe .griff svg { width: 18px; height: 18px; }
.konten-reihe .pfeile { display: inline-flex; gap: 2px; }
.konten-reihe .pfeile form { margin: 0; }
.konten-reihe .pfeile .ib { width: 34px; height: 34px; }
.konten-reihe .pfeile .ib:disabled { opacity: .3; }
.konten-reihe li.zieht { opacity: .5; }
@media (pointer: fine) { .konten-reihe .pfeile { display: none; } }
@media (pointer: coarse) { .konten-reihe .griff { display: none; } }

/* Schreiben: Signatur direkt unter dem eigenen Text, darunter getrennt das Zitat (Marvin 25.10.2026) */
.sig-im-schreiben { display: block; width: 100%; height: 96px; border: 0; background: transparent; margin: 2px 0 0; color-scheme: light; }
html[data-thema="dunkel"] .sig-im-schreiben { color-scheme: dark; }
.zitat-block { margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.zitat-kopf { color: var(--ink-3); font-size: 13px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.zitat-text { margin: 8px 0 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--line-2); color: var(--ink-3); font-size: 14px; max-height: 260px; overflow: auto; overflow-wrap: anywhere; }

/* Verlauf: frühere Mails der Unterhaltung als Karten, aufgeklappt mit Inhalt (Marvin 25.10.2026) */
.verlauf-karte { border-bottom: 1px solid var(--line); }
.verlauf-karte > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; min-height: 48px; }
.verlauf-karte > summary::-webkit-details-marker { display: none; }
.verlauf-karte > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.verlauf-karte .avatar { width: 32px; height: 32px; font-size: 12px; }
.verlauf-karte .vk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.verlauf-karte .vk-z1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.verlauf-karte .vk-z1 b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verlauf-karte .vk-z1 time { margin-left: auto; white-space: nowrap; font-size: 12.5px; }
.verlauf-karte .vk-z2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.verlauf-karte.ungelesen .vk-z1 b { font-weight: 750; }
.verlauf-karte[open] .vk-z2 { display: none; }
.verlauf-karte iframe.verlauf-inhalt { display: block; width: 100%; height: 120px; border: 0; background: transparent; }
.verlauf-karte[open] > .btn { margin: 4px 0 12px; }
.verlauf-karte + .absender { padding-top: 12px; }

/* Anhang ins CRM ablegen („In eigene Dokumente“, Marvin 25.10.2026) */
.anhang details.beleg { display: inline-block; }
.anhang details.beleg[open] { flex-basis: 100%; }
.anhang details.beleg > summary { list-style: none; cursor: pointer; }
.anhang details.beleg > summary::-webkit-details-marker { display: none; }
.anhang details.beleg[open] > summary { background: var(--line); }
.anhang .beleg-form { margin: 8px 0 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 8px; }
.anhang .beleg-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.anhang .beleg-form label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-3); }
.anhang .beleg-form button { justify-self: start; }