/* Maildesk: Design aus dem Canvas (Hell/Dunkel). Einfarbig, Inter, Linien-Icons. */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-Regular.woff") format("woff"); }
/* Nur für den Betreff in der Glas-Liste: auf Geräten ohne Apple-Systemschrift (Windows, Linux) wirkt Inter Regular dicker als SF Regular in iOS Mail, deshalb dort der Schnitt Light unter dem Namen „Inter Subject“ (Gewicht 400). */
@font-face { font-family: "Inter Subject"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-Light.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-Medium.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-SemiBold.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/Inter-Bold.woff") format("woff"); }

:root, html[data-mode="light"] {
  color-scheme: light;
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface2: #FAFBFC;
  --line: #E3E5EA;
  --line-soft: #EEF0F3;
  --chip: #F1F2F5;
  --text: #15171C;
  --text2: #23262E;
  --muted: #5A6070;
  --accent: #2450D8;
  --on-accent: #FFFFFF;
  --accent-fg: #2450D8;
  --accent-text: #1A3BA6;
  --accent-soft: #E8EEFC;
  --sel: #EEF2FD;
  --good-bg: #E6F4EC;
  --good: #17633A;
  --danger: #B42318;
  --danger-bg: #FDECEA;
  --warn-bg: #FFF4E5;
  --warn: #8A4B00;
  --track-off: #C9CDD6;
  --knob-off: #FFFFFF;
  --pop-shadow: 0 12px 32px rgba(21, 23, 28, 0.12);
  --dash: #C9CDD6;
}

html[data-mode="dark"] {
  color-scheme: dark;
  --bg: #0F1115;
  --surface: #171A20;
  --surface2: #1C2027;
  --line: #2A2F38;
  --line-soft: #22262E;
  --chip: #252A33;
  --text: #E8EAEE;
  --text2: #D3D6DD;
  --muted: #9AA1AF;
  --accent: #2450D8;
  --on-accent: #FFFFFF;
  --accent-fg: #7C9CF5;
  --accent-text: #A9BEF9;
  --accent-soft: #1E2A4A;
  --sel: #1B2440;
  --good-bg: #14301F;
  --good: #7FD3A0;
  --danger: #F2867B;
  --danger-bg: #3A1B18;
  --warn-bg: #33240F;
  --warn: #F5B65C;
  --track-off: #3A3F4B;
  --knob-off: #9AA1AF;
  --pop-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --dash: #3A3F4B;
}

:root {
  /* Namen aus der Zeit vor dem Umbau: gleiche Werte, damit alle Seiten sofort passen */
  --card: var(--surface);
  --head-bg: var(--surface2);
  --row-sel: var(--sel);
  --tag-bg: var(--chip);
  --code-bg: var(--chip);
  --field-border: var(--line);
  --chrome-h: 114px;
  /* Bewegung: gemeinsame Werte (app.js liest sie mit Rückfallwert) */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.3, 1.6, 0.5, 1);
  --dur-fast: .15s;
  --dur-nav: .24s;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* Antippen: kein graues Tap-Highlight (Rückmeldung kommt über :active), kein Doppeltipp-Zoom auf Bedienelementen.
   Elemente mit eigenem touch-action (.swrap .mrow, .g-row, .g-dragzone, .gsheet, .gs-drag, .edge-back) haben höhere Spezifität und bleiben unberührt. */
html { -webkit-tap-highlight-color: transparent; }
button, a, summary, label, select, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="option"], .tab, .mrow, .frow { touch-action: manipulation; }
h1, h2, p { margin: 0; }
h2 { font-size: 17px; font-weight: 700; }
a { color: var(--accent-fg); }
.muted { color: var(--muted); font-size: 14px; }
.small { font-size: 13px; color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 2px; }
select:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 24px 40px; }

/* Kopfzeile: Logo, Suche, Konto, Verfassen, Zahnrad */
.topband {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 0 auto; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.logo-img { border-radius: 22.37%; display: block; flex: none; object-fit: cover; }
.brand h1, h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.gsearch {
  flex: 1 1 320px; max-width: 620px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--muted);
}
.gsearch:focus-within { border-color: var(--accent-fg); }
.gsearch input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; color: var(--text); height: 100%; padding: 0; min-height: 0; }
.gsearch input::-webkit-search-cancel-button, .gsearch input::-webkit-search-decoration { display: none; -webkit-appearance: none; }
.gsearch .xbtn { width: 24px; height: 24px; border: 0; background: none; color: var(--muted); border-radius: 50%; display: grid; place-items: center; padding: 0; }
.hright { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.acctbtn {
  height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; font-size: 14px; color: var(--text); max-width: 280px;
}
.acctbtn span.addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; position: relative; }
.avatar.big { width: 40px; height: 40px; font-size: 15px; }
.avatar .dot { position: absolute; right: -2px; bottom: -2px; border: 2px solid var(--surface); width: 10px; height: 10px; }
.btn-compose { height: 40px; padding: 0 16px; display: flex; align-items: center; gap: 8px; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 10px; font-weight: 600; font-size: 14px; }
.iconbtn {
  width: 44px; height: 44px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  display: grid; place-items: center; color: var(--text);
}
@media (hover: hover) { .iconbtn:hover { background: var(--chip); } }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; display: inline-block; }
.dot.ok { background: var(--good); }
.dot.error { background: var(--danger); }
.dot.paused { background: var(--warn); }

/* Reiter: eigenes Band mit Unterstrich */
.tabband { display: flex; flex-wrap: wrap; gap: 28px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.tab {
  padding: 14px 2px 12px; background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font-size: 14px; font-weight: 500;
}
@media (hover: hover) { .tab:hover { color: var(--text); } }
.tab[aria-current="page"] { color: var(--accent-fg); border-bottom-color: var(--accent-fg); font-weight: 600; }
.subtabs { display: flex; gap: 6px; margin: 0 0 16px; }
.subtabs button { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--text); }
.subtabs button[aria-current="page"] { border-color: var(--accent-fg); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

/* Aufklappmenü (Konto, Sortierung, Verschieben) */
.menu {
  position: fixed; z-index: 60; min-width: 220px; max-width: min(360px, calc(100vw - 16px)); max-height: min(420px, calc(100dvh - 24px)); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--pop-shadow); padding: 6px;
  display: flex; flex-direction: column;
}
.menu .mh { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.menu .mi { min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.menu .mi:focus-visible { background: var(--chip); }
@media (hover: hover) { .menu .mi:hover { background: var(--chip); } }
.menu .mi[aria-checked="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.menu .mi.danger { color: var(--danger); }
.menu .mi.accent { color: var(--accent-fg); font-weight: 600; }
.menu .md { height: 1px; background: var(--line); margin: 6px 4px; }

/* Karten & Formulare */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.card-pad { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.card-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.cardfoot { padding: 10px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.col-main { flex: 2 1 540px; min-width: 0; }
.col-side { flex: 1 1 320px; min-width: 0; }
.narrow { max-width: 720px; flex: 1 1 480px; }
.stack-lg > .narrow { flex: 0 0 auto; }  /* in der Spalte wäre 480px sonst die Höhe und schneidet die Karte ab */
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack-lg { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-grow { gap: 12px; align-items: flex-start; }
.row-grow > * { flex: 1 1 200px; min-width: 0; }

label.lbl { font-size: 13px; color: var(--muted); }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="search"], select, textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px; font-size: 14px;
}
textarea { min-height: 0; resize: vertical; font-size: 14px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-fg); outline: none; }
input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.hint-box { padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }

.btn {
  min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap;
}
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--chip); } }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
@media (hover: hover) { .btn-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); } }
.btn-danger { color: var(--danger); }
.btn:disabled { opacity: 0.5; cursor: default; }
.icon-btn {
  width: 44px; height: 44px; padding: 0; border: none; background: none; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
}
@media (hover: hover) { .icon-btn:hover:not(:disabled) { color: var(--text); background: var(--row-sel); } }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.linkbtn { background: none; border: 0; padding: 6px 2px; font: inherit; color: var(--muted); text-decoration: underline; }
@media (hover: hover) { .linkbtn:hover { color: var(--text); } }

/* Tabellen (Grid-Zeilen) */
.scroll { overflow-x: auto; }
.table { min-width: 640px; }
.tr { display: grid; gap: 12px; align-items: center; padding: 8px 20px; border-top: 1px solid var(--line); }
.tr.head {
  background: var(--surface2); border-top: 0; padding-top: 10px; padding-bottom: 10px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.tr.sel { background: var(--sel); }
.cols-rules { grid-template-columns: 64px 1.1fr 1.7fr 1.1fr 56px 120px; }
.cols-test { grid-template-columns: 1.6fr 1.2fr 1fr 1fr; padding-top: 12px; padding-bottom: 12px; }
.cols-log { grid-template-columns: 170px 1.4fr 1fr 1.4fr; padding-top: 12px; padding-bottom: 12px; }
.cols-ret2 { grid-template-columns: 1.6fr 1fr 1fr; padding-top: 12px; padding-bottom: 12px; }
.tr .row { flex-wrap: nowrap; gap: 0; }
.days { width: 90px; }
.link-btn { min-height: 44px; padding: 0; border: none; background: none; text-align: left; font-weight: 600; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--code-bg); border-radius: 4px; padding: 2px 6px; }

.tag { display: inline-block; background: var(--chip); color: var(--text2); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 500; }
.tag.ok { color: var(--good); background: var(--good-bg); }
.tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* Schalter */
.toggle { position: relative; width: 44px; height: 44px; padding: 0; border: none; background: none; }
.toggle .track { position: absolute; left: 0; top: 10px; width: 44px; height: 24px; border-radius: 12px; background: var(--track-off); }
.toggle .knob { position: absolute; left: 3px; top: 13px; width: 18px; height: 18px; border-radius: 50%; background: var(--knob-off); transition: transform 0.12s; }
.toggle[aria-pressed="true"] .track { background: var(--accent); }
.toggle[aria-pressed="true"] .knob { transform: translateX(20px); background: var(--on-accent); }
@media (prefers-reduced-motion: reduce) { .toggle .knob { transition: none; } }

.notice { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; }
.notice.err { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.notice.good { border-color: transparent; background: var(--good-bg); color: var(--good); }
.notice.warn { border-color: transparent; background: var(--warn-bg); color: var(--warn); }
.card-pad .notice, .card .notice { margin-bottom: 0; }
.empty { color: var(--muted); text-align: center; padding: 40px 16px; }

.login { max-width: 360px; margin: 0 auto; padding: 0 20px; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.login-form { display: grid; gap: 12px; background: none; border: 0; padding: 0; margin-top: -8vh; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 14px; }
.login-brand h1 { font-size: 26px; font-weight: 700; margin: 0; }
.login-brand .logo-img { border-radius: 22%; }
.login-form input { height: 48px; box-sizing: border-box; font-size: 17px; padding: 0 16px; }
.login-form .btn-primary { height: 48px; font-size: 17px; font-weight: 600; border-radius: 999px; }

.imp-item { padding: 10px 0; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 4px; }

/* Popup (Zahnrad) */
dialog { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 14px; width: min(92vw, 420px); padding: 18px; max-height: 90dvh; overflow: auto; overscroll-behavior: contain; }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
html[data-mode="light"] dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
body:has(dialog[open]) { overflow: hidden; }
dialog h2 { font-size: 19px; margin-bottom: 4px; }
.cap { margin: 16px 2px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.segc { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.segc button { flex: 1; min-height: 38px; background: transparent; color: var(--text); border: 0; border-radius: 999px; padding: 6px 4px; font-size: 14px; font-weight: 500; }
.segc button[aria-pressed="true"] { background: var(--text); color: var(--bg); font-weight: 600; }
.acc { border-top: 1px solid var(--line); margin-top: 8px; }
.acc summary { padding: 12px 2px; cursor: pointer; list-style: none; font-weight: 500; display: flex; justify-content: space-between; min-height: 44px; align-items: center; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "›"; color: var(--muted); transition: transform var(--dur-fast); }
.acc[open] summary::after { transform: rotate(90deg); }
.accform { display: grid; gap: 8px; padding: 2px 0 12px; }
.aerr { color: var(--danger); font-size: 13px; }
.aerr:empty { display: none; }
.aok { color: var(--good); font-size: 13px; }
.dlg-btns { display: flex; gap: 10px; margin-top: 18px; }
.dlg-btns .btn { flex: 1; }

@media (max-width: 640px) {
  .topband, .tabband, main { padding-left: 14px; padding-right: 14px; }
  .tr, .card-pad, .card-head, .cardfoot { padding-left: 14px; padding-right: 14px; }
}

/* Feinschliff nach Design-Kritik */
.ed-head { justify-content: space-between; flex-wrap: nowrap; }
.only-narrow { display: none; }
.cond { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.cond code.ellip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-off { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cardfoot details.helpd { flex-basis: 100%; }
.helpd summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; }
.helpd p { padding-bottom: 6px; }

#toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  max-width: calc(100% - 32px); z-index: 50; padding: 11px 18px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-size: 14px; font-weight: 500; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }


/* Schmale Bildschirme: Tabellen werden zu gestapelten Zeilen, Reiter wischbar */
@media (max-width: 719px) {
  .table { min-width: 0; }
  .tr.head { display: none; }
  .tr.cols-rules { grid-template-columns: 52px minmax(0, 1fr); row-gap: 2px; padding-top: 10px; padding-bottom: 10px; }
  .cols-rules .c-tog { grid-column: 1; grid-row: 1; }
  .cols-rules .c-name { grid-column: 2; grid-row: 1; }
  .cols-rules .c-cond { grid-column: 2; grid-row: 2; }
  .cols-rules .c-act { grid-column: 2; grid-row: 3; margin-top: 4px; }
  .cols-rules .c-ord { display: none; }
  .tr.cols-test, .tr.cols-log, .tr.cols-ret2 { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .only-narrow { display: flex; }
}
.helpd summary { text-decoration: underline; list-style: none; }
.helpd summary::-webkit-details-marker { display: none; }

/* Ordner: Baum links, Details rechts */
.folders { display: grid; grid-template-columns: minmax(380px, 1.2fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.folders .card-head .icon-btn { width: 36px; }
.ftree { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.frow {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; background: none; border: 0;
  border-radius: 8px; color: var(--text); text-align: left; font-size: 14px; font-weight: 500;
}
@media (hover: hover) { .frow:hover { background: var(--chip); } }
.frow[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.frow svg { flex: none; }
.frow .chev { flex: none; width: 16px; height: 28px; display: grid; place-items: center; margin-left: -4px; margin-right: -4px; color: var(--muted); }
.frow .chev svg { transition: transform var(--dur-fast); }
.frow[aria-expanded="true"] .chev svg { transform: rotate(90deg); }
.frow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .cnt { flex: none; font-size: 12px; font-weight: 600; white-space: nowrap; color: inherit; }
.frow .cnt.dim { color: var(--muted); font-weight: 400; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.tile strong { font-size: 20px; font-weight: 600; }
.tag.warn { color: var(--warn); }
input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
dialog .check { align-items: flex-start; padding: 6px 0; }
dialog .stack { margin-top: 10px; }
dialog .notice { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .frow .chev svg { transition: none; } }
@media (max-width: 719px) {
  .folders { grid-template-columns: minmax(0, 1fr); }
}

/* Mail: Ordner | Liste | Lesefenster */
main.main-mail { max-width: none; padding: 0; }
main.main-mail > .notice { margin: 12px 24px 0; }
.mailapp {
  display: grid; grid-template-columns: 248px minmax(320px, 420px) minmax(0, 1fr);
  height: calc(100vh - var(--chrome-h)); height: calc(100dvh - var(--chrome-h)); min-height: 480px;
}
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); }
.pane-folders { background: transparent; border-right: 1px solid var(--line); padding: 12px; overflow-y: auto; gap: 2px; }
.pane-list { border-right: 1px solid var(--line); }
.pane-body { flex: 1; min-height: 0; overflow-y: auto; }
.pane-body.pad, .pad { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.pane .empty { padding: 40px 16px; }
.fhead { padding: 14px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fnew { margin-top: 12px; padding: 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; background: none; border: 0; color: var(--accent-fg); text-align: left; }
.mailapp .mail-back { display: none; }

.lhead { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ltitle { display: flex; align-items: center; gap: 8px; }
.ltitle .count { margin-left: auto; }
.ltitle h1 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltitle .small { white-space: nowrap; font-size: 12px; }
.mrow input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); min-height: 0; padding: 0; }
.bulkbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bulkbar .sel-n { font-size: 13px; font-weight: 600; margin-right: 4px; }
.tbtn { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
@media (hover: hover) { .tbtn:hover { background: var(--chip); } }
.tbtn.sq { width: 36px; padding: 0; justify-content: center; }
.tbtn.danger { color: var(--danger); }
.tbtn[aria-pressed="true"] { background: var(--warn-bg); color: var(--warn); border-color: transparent; }

.mrow {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border: 0; border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent; background: var(--surface); text-align: left; color: var(--text); border-radius: 0;
}
.mrow { cursor: pointer; }
@media (hover: hover) { .mrow:hover { background: var(--surface2); } }
.mrow[aria-selected="true"] { background: var(--sel); border-left-color: var(--accent-fg); }
.mrow .lead { flex: 0 0 16px; display: flex; align-items: center; justify-content: center; }
.mrow .udot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-fg); display: block; }
.mrow .mbody2 { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mrow .mtop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mrow .mfrom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mrow .mtime { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mrow .micon { flex: none; color: var(--muted); display: inline-flex; }
.mrow .micon.flag { color: var(--warn); }
.mrow .msubj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text2); }
.mrow .mmeta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.mrow .mmeta .addr { overflow: hidden; text-overflow: ellipsis; }
.rtag { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; height: 18px; border-radius: 4px; background: var(--good-bg); color: var(--good); font-size: 11px; font-weight: 600; flex: none; }
.ftag { padding: 0 6px; height: 18px; display: inline-flex; align-items: center; border-radius: 4px; background: var(--chip); color: var(--text2); font-size: 11px; font-weight: 500; flex: none; }
.mrow.unread .mfrom { font-weight: 700; }
.mrow.unread .msubj { font-weight: 600; }
.moreload { padding: 14px 16px; }

.pane-reader { overflow: hidden; }
.rbar { padding: 10px 20px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rbar .vsep { width: 1px; height: 24px; background: var(--line); margin: 0 6px; }
.rscroll { flex: 1; min-height: 0; overflow: auto; padding: 24px 32px; display: flex; flex-direction: column; }
.rinner { max-width: 820px; width: 100%; display: flex; flex-direction: column; gap: 18px; flex: 1; min-height: 0; }
.rinner h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rfrom { display: flex; gap: 12px; align-items: flex-start; }
.rfrom .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.rfrom .when { font-size: 13px; color: var(--muted); white-space: nowrap; }
.rulebanner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--good-bg); color: var(--good); font-size: 13px; flex-wrap: wrap; }
.rulebanner span.t { flex: 1; min-width: 200px; }
.rulebanner button { border: 0; background: none; color: var(--good); font-weight: 600; text-decoration: underline; padding: 0; font-size: 13px; }
.mnotice { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.mnotice .btn { min-height: 32px; }
.mnotice-img { flex-direction: column; align-items: stretch; gap: 8px; }
.mnotice-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mnotice-btns .btn { max-width: 100%; }
.mnotice-btns .imgs-always span, .g-imgrow .imgs-always span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imghint { margin: 8px 2px 0; }
.trustlist { display: flex; flex-direction: column; gap: 6px; }
.trustrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.trustrow .tr-t { display: flex; flex-direction: column; min-width: 0; }
.trustrow .tr-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.trustrow .btn { min-height: 34px; flex: none; }
.trustlist { margin-top: 10px; }
dialog [hidden] { display: none !important; }
.navrow { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 10px; padding: 8px 12px; background: var(--surface2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; font-size: 15px; text-align: left; }
.navrow-l { flex: 1; font-weight: 500; }
.navrow-v { color: var(--muted, #8a8f98); font-variant-numeric: tabular-nums; }
.navrow-c { color: var(--muted, #8a8f98); font-size: 22px; line-height: 1; margin-top: -2px; }
.subbar { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 10px; }
.subback { background: transparent; border: 0; color: var(--accent, #4c8dff); font-size: 16px; font-weight: 500; padding: 4px 6px 4px 0; min-height: 36px; }
.trustq { width: 100%; margin-top: 10px; }
.trustempty { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 28px 12px; }
.trustnone { text-align: center; padding: 14px 0; }
.trustwrap .dlg-btns { margin-top: 14px; }
#toast.has-act { width: max-content; display: flex; align-items: center; gap: 12px; }
#toast.has-act.show { pointer-events: auto; }
#toast .toast-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#toast .toast-act { flex: none; background: none; border: 0; padding: 4px 2px; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }
.mbody { flex: 1; min-height: 220px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.mailframe { flex: 1; width: 100%; min-height: 240px; border: 0; background: #fff; }
.mailtext { flex: 1; overflow: auto; padding: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: 15px; color: var(--text2); }
.mbody.dk, .mailframe.dk { background: #000; }
.tslot:empty { display: none; }
.mbody.plain { border: 0; background: transparent; overflow: visible; min-height: 0; flex: 0 0 auto; }
.matts { display: flex; flex-wrap: wrap; gap: 10px; }
.att { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; min-width: 240px; max-width: 360px; }
.att .ty { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.att .ty.pdf { background: var(--danger-bg); color: var(--danger); }
.att .nm2 { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.att .nm2 b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att .dl { width: 36px; height: 36px; border: 0; border-radius: 8px; background: var(--chip); display: grid; place-items: center; color: var(--text); }
.quick { padding: 14px 32px 18px; border-top: 1px solid var(--line); }
.quick label { max-width: 820px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 14px; background: var(--surface2); }
.quick input { flex: 1; border: 0; background: transparent; outline: none; min-height: 0; padding: 0; height: 32px; font-size: 14px; }
.quick .btn { min-height: 36px; }

.bottomnav { display: none; }

@media (max-width: 999px) {
  .mailapp { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - var(--chrome-h)); }
  .mailapp .pane { display: none; }
  .mailapp[data-pane="folders"] .pane-folders, .mailapp[data-pane="list"] .pane-list, .mailapp[data-pane="reader"] .pane-reader { display: flex; }
  .mailapp .tbtn.mail-back { display: inline-flex; }
  /* Zurück-Wischen: Liste liegt während der Geste unter der Mail */
  .mailapp.swb { position: relative; overflow: hidden; }
  .mailapp.swb .pane-list { display: flex; position: absolute; inset: 0; z-index: 0; border-right: 0; }
  .mailapp.swb .pane-reader { position: relative; z-index: 1; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18); }
  .mailapp .rbar.mail-back, .mailapp .fhead.mail-back { display: flex; }
  .rscroll { padding: 16px; }
  .quick { padding: 12px 16px 16px; }
}
@media (max-width: 719px) {
  :root { --chrome-h: 112px; }
  .topband { padding: 10px 14px; gap: 10px; }
  .tabband { display: none; }
  .gsearch { order: 5; flex: 1 1 100%; max-width: none; }
  .acctbtn { display: none; }
  .btn-compose { display: none; }
  main { padding: 16px 14px 96px; }
  .mailapp { height: calc(100dvh - 134px); }
  input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="search"], select, textarea { font-size: 16px; }
  .rbar { padding: 8px 12px; }
}

/* Mail schreiben */
.compose { overflow: hidden; }
.cform { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.crow { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: start; }
.crow > label { padding-top: 12px; }
.cbody { flex: 1; min-height: 220px; resize: vertical; font-size: 15px; line-height: 1.5; font-family: inherit; }
.cattach { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.idrow { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
@media (max-width: 719px) {
  .crow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .crow > label { padding-top: 0; }
}

/* Verfassen als eigene Seite */
.cpage { max-width: 1028px; margin: 0 auto; padding: 24px 24px 48px; display: flex; flex-direction: column; gap: 16px; }
.cnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.backlink { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--accent-fg); text-decoration: none; padding: 4px 2px; }
.ccard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; }
.chead { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chead h1 { font-size: 18px; }
.pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--chip); color: var(--text2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crows { padding: 0 24px; display: flex; flex-direction: column; }
.crow2 { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; position: relative; }
.clabel { flex: 0 0 64px; font-size: 13px; color: var(--muted); font-weight: 500; }
.cfield.chips { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; cursor: text; }
.cfield.chips input { flex: 1; min-width: 160px; height: 32px; min-height: 0; border: 0; background: transparent; outline: none; padding: 0; font-size: 14px; }
.rchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--chip); font-size: 13px; max-width: 100%; border: 1px solid transparent; }
.rchip.bad { border-color: var(--danger); color: var(--danger); }
.rchip button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: grid; place-items: center; padding: 0; }
@media (hover: hover) { .rchip button:hover { background: var(--line); color: var(--text); } }
.ccbcc { display: flex; gap: 2px; }
.ccbcc button { height: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--accent-fg); font-size: 13px; font-weight: 600; }
.cfrom { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cselect { height: 36px; padding: 0 10px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); max-width: 100%; }
@media (hover: hover) { .cselect:hover { background: var(--chip); } }
.cfrom input.cfield { flex: 1 1 220px; height: 36px; min-height: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface2); font-size: 14px; }
.chint { flex: 1 0 100%; padding-left: 76px; font-size: 12px; color: var(--muted); }
input.csubject { flex: 1; min-width: 0; height: 36px; min-height: 0; border: 0; background: transparent; outline: none; padding: 0; font-size: 15px; font-weight: 600; }
.ctoolbar { margin: 12px 24px 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; background: var(--surface2); }
.ctoolbar .vsep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.fbtn { width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent; font-size: 14px; display: grid; place-items: center; color: var(--text); padding: 0; }
@media (hover: hover) { .fbtn:hover:not(:disabled) { background: var(--chip); } }
.fbtn:disabled { opacity: 0.35; cursor: default; }
.fbtn.b { font-weight: 700; } .fbtn.i { font-style: italic; } .fbtn.u { text-decoration: underline; }
.seg { margin-left: auto; display: flex; gap: 4px; }
.seg button { height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 500; color: var(--muted); }
.seg button[aria-checked="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; color: var(--text); }
.cbodywrap { padding: 16px 24px; min-height: 300px; display: flex; }
.ceditor { flex: 1; min-height: 280px; outline: none; font-size: 15px; line-height: 1.65; color: var(--text2); overflow-wrap: anywhere; }
.ceditor p { margin: 0 0 14px; }
.ceditor blockquote { margin: 0; padding-left: 14px; border-left: 2px solid var(--line); color: var(--muted); font-size: 14px; }
.ceditor ul { margin: 0 0 14px; padding-left: 24px; }
.ceditor a { color: var(--accent-fg); }
.ctext { flex: 1; min-height: 280px; border: 0; background: transparent; padding: 0; outline: none; resize: vertical; font-size: 15px; line-height: 1.65; font-family: inherit; }
.cattachs { padding: 0 24px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.cattachs .att { min-width: 200px; padding: 8px 10px; }
.cattachs .att .ty { width: 30px; height: 30px; font-size: 10px; }
.cerr { margin: 0 24px 12px; }
.cfoot { padding: 14px 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cfoot .btn.big { height: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.cfoot .discard { margin-left: auto; border-color: transparent; background: transparent; }
.rtag.fail { background: var(--danger-bg); color: var(--danger); }
@media (max-width: 719px) {
  .cpage { padding: 12px 12px 90px; }
  .crows, .cbodywrap, .cfoot { padding-left: 14px; padding-right: 14px; }
  .chead, .cattachs { padding-left: 14px; padding-right: 14px; }
  .ctoolbar { margin-left: 14px; margin-right: 14px; }
  .chint { padding-left: 0; }
  .clabel { flex: 0 0 100%; }
  .cfoot .discard { margin-left: 0; }
}

/* Regeln: Bedingungen, Vorschau, Sortieren */
.cond-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; gap: 6px; align-items: center; }
.cond-row input { grid-column: 1 / 3; }
.cond-row .icon-btn { grid-column: 3; grid-row: 1; }
.match-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.match-row select { width: auto; }
.cond-row + .cond-row { padding-top: 6px; border-top: 1px dashed var(--line); }
.cond-row select, .cond-row input { min-width: 0; }
.tr.off .c-name, .tr.off .c-cond { opacity: .55; }
.tr[draggable="true"] { cursor: default; }
.tr.dragging { opacity: .5; }
.tr.drop-over { box-shadow: inset 0 2px 0 var(--accent); }
.grip { color: var(--text2); cursor: grab; padding: 0 4px; user-select: none; letter-spacing: -2px; }
.c-hits { font-variant-numeric: tabular-nums; }
.preview { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.preview.loading { opacity: .6; }
.prev-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.prev-list li { display: flex; flex-direction: column; min-width: 0; }
.prev-list .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 719px) {
  .cols-rules .c-hits { display: none; }
  .grip { display: none; }
}

/* Ordner-Tabelle und Bearbeiten-Panel */
.ftree-head { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface2); font-size: 12px; font-weight: 600; color: var(--muted); }
.ftree-head .nm { flex: 1; }
.col-n { flex: none; width: 70px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.col-n.dim { color: var(--muted); }
.col-n.strong { font-weight: 700; }
.col-auto { width: 74px; color: var(--muted); }
.frow[aria-selected="true"] .col-auto { color: inherit; }
.row.between { justify-content: space-between; align-items: center; }
.stack.tight { gap: 2px; }
@media (max-width: 719px) { .ftree-head .col-auto, .frow .col-auto { display: none; } .col-n { width: 60px; } }

/* Protokoll */
.logbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.logbar input[type="search"] { max-width: 240px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chipbtn { border: 1px solid var(--line); background: var(--surface); color: var(--text2); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; min-height: 32px; }
.chipbtn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; font-weight: 600; }
.tr.is-err { background: var(--danger-bg); }
.err-text { color: var(--danger); }
.ellip2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Absender-Avatare, Gespräche, Papierkorb-Button in der Mailliste */
.avatar.hued { background: hsl(var(--h) var(--s) 90%); color: hsl(var(--h) var(--s) 28%); overflow: hidden; }
html[data-mode="dark"] .avatar.hued { background: hsl(var(--h) calc(var(--s) * 0.6) 24%); color: hsl(var(--h) var(--s) 84%); }
.avatar.hued img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 3px; box-sizing: border-box; }
.avatar.rowav { width: 36px; height: 36px; font-size: 13px; }
.avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.mrow .cbadge { margin-left: 8px; font-size: 11px; font-weight: 500; border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; background: var(--surface); color: var(--text2); }
.mrow .rowdel { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text2); cursor: pointer; padding: 0; opacity: 0; align-self: center; }
@media (hover: hover) { .mrow:hover .rowdel { opacity: 1; } }
.mrow .rowdel:focus-visible { opacity: 1; }
@media (hover: hover) { .mrow .rowdel:hover { color: var(--danger); border-color: var(--danger); } }
@media (hover: none) { .mrow .rowdel { opacity: 1; } }
.tstrip { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 12px; }
.trow { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text2); cursor: pointer; min-height: 36px; }
.trow.cur { border-color: var(--accent-fg); color: var(--text); font-weight: 600; cursor: default; }
.trow .tw { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .tt { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 719px) {
  .ltitle .count { display: none; }
}

.fbtn-menu { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text2); cursor: pointer; }
@media (hover: hover) { .fbtn-menu:hover { background: var(--chip); color: var(--text); } }
.fbtn-menu.on { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; font-weight: 600; }
.fbtn-menu .fl { font-size: 13px; }
.fbtn-menu.sq { width: 32px; padding: 0; justify-content: center; }
html .avatar.hued.mono, html[data-mode="dark"] .avatar.hued.mono { background: #fff; }
.avatar.hued .glyph { width: 62%; height: 62%; background: hsl(var(--h) calc(var(--s) + 15%) 38%); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.tbtn.more { font-size: 18px; line-height: 1; padding-bottom: 6px; }
input::-webkit-calendar-picker-indicator { display: none !important; }
.cfoot { position: sticky; bottom: 0; background: var(--surface); z-index: 2; }
.cbodywrap { min-height: 220px; }
.ceditor { min-height: 200px; }
.avatar.hued.mono { border: 1px solid var(--line); box-sizing: border-box; }

.subtabs.wide { margin: 0; }
.settings .narrow { max-width: 640px; }
.danger-zone { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.card.soft { background: var(--surface2); box-shadow: none; }
.stack-lg > .card + .card { margin-top: 0; }

.swrap { position: relative; overflow: hidden; background: var(--surface); }
.swbg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 13px; font-weight: 600; color: var(--on-accent, #fff); background: var(--accent-fg); }
.swbg[data-dir="l"] { background: var(--danger); }
.swbg .swl, .swbg .swr { display: inline-flex; align-items: center; gap: 8px; visibility: hidden; }
.swbg[data-dir="r"] .swl { visibility: visible; }
.swbg[data-dir="l"] .swr { visibility: visible; }
.swbg .swr { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: stretch; gap: 0; }
.swa { width: 84px; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: inherit; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.swa.mv { background: #FF9F0A; }
.swa.del { background: var(--danger); }
.swbg[data-full] .swa.mv { opacity: 0; transition: opacity var(--dur-fast); }
.swbg[data-dir="l"] { padding-right: 0; }
.swrap .mrow { position: relative; touch-action: pan-y; }
@media (hover: none) { .mrow .rowdel { display: none; } }
.swbg { opacity: 0; }
.swbg[data-dir] { opacity: 1; }

/* ---------- Handy: Kapsel-Navbar, feste Statusleiste, Lupe, Verfassen als Blatt, Pull-to-Refresh ---------- */
.cbar, .ptr { display: none; }
.sugg { position: absolute; left: 64px; right: 0; top: 100%; z-index: 10; background: var(--sheet, var(--surface)); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--pop-shadow); overflow: hidden; display: flex; flex-direction: column; }
.sugg button { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; color: var(--text); font-size: 14px; }
.sugg button:last-child { border-bottom: 0; }
.sugg button:focus-visible { background: var(--chip); }
@media (hover: hover) { .sugg button:hover { background: var(--chip); } }
@media (max-width: 719px) {
  body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--bg); z-index: 80; }
  :root { --chrome-h: 70px; }
  .topband { padding: calc(10px + env(safe-area-inset-top)) 14px 8px; gap: 8px; flex-wrap: nowrap; background: var(--bg); border-bottom: 0; position: sticky; top: 0; z-index: 40; }
  html[data-skin="glas"] .topband { background: var(--bg); }
  .iconbtn { width: 40px; height: 40px; border-radius: 50%; }
  .hright { gap: 8px; }
  .gsearch { display: none; }
  .gsearch.open { display: flex; position: absolute; left: 14px; right: 14px; top: calc(10px + env(safe-area-inset-top)); height: 40px; z-index: 5; background: var(--surface); border: 1px solid var(--line); }
  .mailapp { height: calc(100dvh - 70px - env(safe-area-inset-top)); }
  .pane-body { padding-bottom: 96px; }
  .pane-list { position: relative; }
  .bottomnav {
    display: grid; grid-template-columns: 1fr 1fr 1.1fr 1fr 1fr; align-items: center; gap: 2px;
    position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60;
    width: min(26rem, calc(100% - 1.5rem)); height: 62px; padding: 5px; border-radius: 999px;
    background: var(--sheet, var(--surface)); border: 1px solid var(--line); box-shadow: var(--pop-shadow);
  }
  .bottomnav button { background: none; border: 0; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 100%; font-size: 10.5px; font-weight: 600; color: var(--muted); padding: 0; }
  .bottomnav button[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); }
  .bottomnav .bnfab { width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex-direction: row; justify-content: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25); }
  .bottomnav .bnfab:active { transform: scale(0.94); }
  main { padding-bottom: 110px; }

  /* Verfassen: Vollbild-Blatt */
  body:has(.cpage) .topband, body:has(.cpage) .bottomnav { display: none; }
  .cpage { position: fixed; inset: 0; z-index: 70; max-width: none; margin: 0; padding: calc(8px + env(safe-area-inset-top)) 0 0; gap: 0; background: var(--bg); overflow-y: auto; }
  .cbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 14px 10px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
  .cbar .linkbtn { justify-self: start; font-size: 16px; color: var(--accent-fg); margin: 0; }
  .cbar b { font-size: 16px; font-weight: 600; }
  .cbar .sendtop { justify-self: end; border-radius: 999px; min-height: 34px; padding: 0 16px; }
  .cnav, .chead { display: none; }
  .ccard, html[data-skin="glas"] .ccard { background: transparent; border: 0; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .crows { padding: 0 14px; }
  .clabel { flex: 0 0 56px; }
  .cfield.chips input, .csubject { min-width: 0; }
  .ctoolbar { overflow-x: auto; flex-wrap: nowrap; margin: 8px 14px 0; }
  .ctoolbar .seg { flex: none; }
  .cfoot { padding: 12px 14px calc(20px + env(safe-area-inset-bottom)); }
  .cfoot .btn-primary.big { display: none; }
  .cfoot .btn.big { height: 40px; min-height: 40px; }
  .sugg { left: 0; }

  /* Pull-to-Refresh: iOS-Speichen-Spinner, mittig im freigezogenen Bereich */
  .ptr { display: block; position: absolute; top: calc(4px + var(--ptr-d, 0px) / 2 - 14px); left: 50%; width: 28px; height: 28px; margin-left: -14px; z-index: 3; color: var(--muted); pointer-events: none; }
  .ptr i { position: absolute; left: 50%; top: 0; width: 2.5px; height: 7px; border-radius: 2px; background: currentColor; transform-origin: 50% 14px; }
  .ptr.busy { animation: ptrspin 1s steps(12) infinite; }
}
@keyframes ptrspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.busy { animation: none; } }
@media (max-width: 719px) {
  .cpage > .ccard { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .cpage .cbodywrap { flex: 1; }
  .cfoot { background: transparent; position: static; }
  .cfield.chips input, input.csubject, html[data-skin="glas"] .cfield.chips input, html[data-skin="glas"] input.csubject { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
}
.menu { z-index: 100; }
@media (max-width: 719px) {
  .cbar .cancelbtn { justify-self: start; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; }
  .cpage { overflow-x: hidden; }
  .cpage .crow2, .cpage .cfield { min-width: 0; }
  .cfield.chips input, input.csubject, .ceditor, .ctext, .cselect, #c-custom { font-size: 16px; }
  .cfield.chips input { min-width: 0; width: 100%; }
}
@media (max-width: 719px) {
  .rfrom { flex-wrap: wrap; align-items: flex-start; }
  .rfrom .who { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
  .rfrom .when { flex: 1 0 100%; order: 3; font-size: 12px; }
}

/* ---------- Handy, aufgeräumt (nach Design-Kritik) ---------- */
.only-phone { display: none; }
@media (max-width: 719px) {
  .only-phone { display: inline-flex; }
  /* Mail-Reiter: keine eigene Kopfzeile, Titel und Aktionen stehen in der Liste */
  body:has(.mailapp) .topband { display: none; }
  .mailapp { height: calc(100dvh - env(safe-area-inset-top)); }
  .lhead { padding-top: calc(10px + env(safe-area-inset-top)); }
  .ltitle { flex-wrap: wrap; }
  .lhead .gsearch.open { position: static; display: flex; width: 100%; margin-top: 6px; }
  /* Zeilen: zwei Zeilen statt drei */
  .mrow .mmeta .addr { display: none; }
  .mrow .mmeta:empty { display: none; }
  /* Verfassen: ruhiger */
  .cpage .cselect { border: 0; background: transparent; padding: 0; min-height: 0; height: auto; font-size: 16px; font-weight: 500; }
  .ctoolbar { border: 0; background: transparent; padding: 0; margin: 4px 10px 0; }
  .ctoolbar .seg { display: none; }
  .cfoot { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); gap: 8px; }
  .cfoot .btn.big, .cfoot .btn-danger.big { border: 0; background: transparent; box-shadow: none; padding: 0; height: 40px; min-height: 40px; font-size: 15px; font-weight: 500; color: var(--accent-fg); }
  .cfoot .discard { margin-left: 0; color: var(--danger); }
}
@media (max-width: 719px) { .cfoot .btn.btn-danger.discard { color: var(--danger); } }

/* Unsichtbare Fläche hinter einem offenen Menü: ein Tipp daneben schließt das Menü */
.menu-bd { position: fixed; inset: 0; z-index: 99; background: transparent; }

/* Marken-Icons (Font Awesome Free Brands): Kachel in Markenfarbe, Icon weiß bzw. dunkel (je nach Kontrast, in der SVG) */
html .avatar.hued.brand, html[data-mode="dark"] .avatar.hued.brand { background: var(--bc, #555); }
.avatar.hued.brand img { width: 100%; height: 100%; object-fit: contain; padding: 21%; background: transparent; box-sizing: border-box; }

/* Antippen (Standard und Klassisch): dezente Rückmeldung nur über Hintergrund/Deckkraft. Glas hat eigene Zustände in skins.css.
   Auf iOS zeigt Safari :active nur, wenn ein touchstart-Handler an Element, body oder document hängt (app.js hat welche am document). */
html:not([data-skin="glas"]) :is(.btn:not(.btn-primary), .tbtn, .iconbtn, .icon-btn, .cselect, .fbtn, .fbtn-menu, .chipbtn, .subtabs button, .segc button, .menu .mi, .sugg button, .rchip button, .bottomnav button:not(.bnfab), .mrow, .frow):active:not(:disabled, [aria-selected="true"], [aria-pressed="true"], [aria-current="page"], [aria-checked="true"], .on) { background: var(--chip); }
html:not([data-skin="glas"]) :is(.btn-primary, .btn-compose):active:not(:disabled) { opacity: 0.85; }
.tab:active:not([aria-current="page"]) { opacity: 0.6; }

/* Bewegung reduzieren: Animationen und Übergänge enden sofort (Endzustand bleibt, nichts wird ausgeblendet) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}