/* raven – app-spezifische Styles. Baut auf glaze.css auf und ändert dessen Tokens nicht. */
/* HTML-Mails werden wie Papier immer auf Weiß gezeigt, so wie der Absender sie gestaltet hat. */
:root { --paper: white; --head-h: 128px; }

.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.grow b, .grow small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
pre.code, textarea.code { font: var(--fs-sm)/1.5 var(--font-mono); }
pre.code { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; margin: var(--sp-5) 0 0; padding: var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 5%, transparent); }
button.link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.bar-sep { width: 1px; height: 20px; background: var(--line); margin: 0 var(--sp-1); flex: none; }
.group-title { font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: var(--sp-6) var(--sp-1) var(--sp-1); }
.sub-title { font-size: var(--fs-sm); font-weight: 620; color: var(--muted); margin: var(--sp-7) 0 var(--sp-3); }

.dlg.wide { width: min(720px, 94vw); }
.rd-note { margin-top: var(--sp-4); }
.pick { display: grid; gap: 2px; margin-top: var(--sp-5); max-height: 50vh; overflow: auto; }
.pick-item { display: flex; align-items: center; gap: var(--sp-4); padding: 9px 12px 9px calc(12px + var(--d, 0) * 16px); border-radius: var(--r-sm); border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.pick-item:hover { background: var(--card-hi); }
.menu-title { font-size: var(--fs-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: var(--sp-2) var(--sp-4) 2px; }
.list-loading { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); padding: 40px var(--sp-8); color: var(--muted); }

/* ---------- Anmeldung ---------- */
.adv { border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--text) 3%, transparent); }
.adv summary { display: flex; align-items: center; gap: 9px; padding: var(--sp-4) var(--sp-6); font-weight: 600; font-size: var(--fs-md); cursor: pointer; list-style: none; color: var(--muted); }
.adv summary .ic { width: 17px; height: 17px; color: var(--accent-t); }
.adv-body { display: grid; gap: var(--sp-6); padding: var(--sp-1) var(--sp-6) var(--sp-6); }
.srv { display: grid; gap: var(--sp-3); } .srv-title { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.srv-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-3); }
.srv-row > .field:first-child { grid-column: 1 / -1; }
.srv-row .field > label { font-size: var(--fs-2xs); }
.dlg .srv-row { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 170px); }
.dlg .srv-row > .field:first-child { grid-column: auto; }
@media (max-width: 560px) { .dlg .srv-row { grid-template-columns: 96px minmax(0, 1fr); } .dlg .srv-row > .field:first-child { grid-column: 1 / -1; } }

/* ---------- Postfach ---------- */
.mail { position: relative; display: grid; grid-template-columns: 232px clamp(340px, 30vw, 440px) minmax(0, 1fr); gap: 18px; height: calc(100dvh - var(--head-h)); min-height: 520px; }
.pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pane-folders { padding: var(--sp-6); gap: var(--sp-5); overflow: auto; }
.fl { display: grid; gap: 2px; }
.fl-item { display: flex; align-items: center; gap: var(--sp-4); padding: 8px 8px 8px calc(10px + var(--d, 0) * 16px); border-radius: var(--r-md); color: var(--muted); font-weight: 560; font-size: var(--fs-md); border: 1px solid transparent; cursor: pointer; position: relative; }
.fl-item:hover { background: var(--card-hi); color: var(--text); }
.fl-item.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.fl-item.on > .ic { color: var(--accent-t); }
.fl-item.drop { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.fl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-cnt { font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums; padding: 1px var(--sp-3); border-radius: var(--r-pill); color: var(--on-accent); background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); }
.fl-more { display: none; border: 0; background: none; color: var(--muted); padding: 2px; border-radius: var(--r-xs); cursor: pointer; }
.fl-item:hover .fl-more, .fl-item:focus-within .fl-more { display: grid; }
.fl-item:hover .fl-cnt { display: none; }
.fl-more .ic { width: 16px; height: 16px; }
.fl-add { align-self: flex-start; margin-top: var(--sp-2); }

.list-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-6) var(--sp-2); }
.list-title { font-size: var(--fs-lg); font-weight: 620; letter-spacing: -.01em; }
.drawer-btn, .compose-mini { display: none; }
.search-row { display: flex; gap: var(--sp-3); padding: var(--sp-2) var(--sp-6); }
.search-row .search, .clist-box .search { flex: 1 1 auto; min-width: 0; width: 100%; }
.search-scope { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--r-xs); background: none; color: var(--muted); cursor: pointer; margin-right: -6px; }
.search-scope:hover { color: var(--text); background: var(--card-hi); } .search-scope.on { color: var(--accent-t); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.list-tools { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-6) var(--sp-3); border-bottom: 1px solid var(--line); min-height: 48px; flex-wrap: nowrap; }
.list-tools .chips { display: flex; gap: var(--sp-2); flex-wrap: nowrap; overflow-x: auto; min-width: 0; flex: 1; scrollbar-width: none; }
.list-tools .chip { flex: none; }
.bulk { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .bulk-n { font-weight: 600; font-size: var(--fs-sm); margin-right: var(--sp-2); }
.list-foot { display: flex; justify-content: flex-end; padding: var(--sp-2) var(--sp-5); border-top: 1px solid var(--line); min-height: 44px; align-items: center; }
.pager { display: flex; align-items: center; gap: 2px; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; } .pg-info { margin-right: var(--sp-1); white-space: nowrap; }
.chk { display: grid; place-items: center; padding: var(--sp-1); cursor: pointer; }
.chk input { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.msgs { flex: 1; min-height: 0; overflow: auto; outline: none; overscroll-behavior: contain; }
.msg { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--sp-1) var(--sp-2); padding: 9px var(--sp-5) 9px var(--sp-4); border-bottom: 1px solid var(--line); cursor: pointer; position: relative; border-left: 3px solid transparent; }
.msg:hover { background: var(--card); }
.msg.open { background: color-mix(in srgb, var(--accent) 9%, transparent); border-left-color: var(--accent); }
.msg.sel { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.msg .star { border: 0; background: none; padding: 3px; color: var(--muted); opacity: .45; cursor: pointer; border-radius: 6px; display: grid; }
.msg .star .ic { width: 16px; height: 16px; } .msg .star:hover { opacity: 1; }
.msg .star.on { opacity: 1; color: var(--warn-t); } .msg .star.on .ic { fill: currentColor; }
.msg-main { min-width: 0; display: grid; gap: 1px; }
.msg-top, .msg-sub { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.msg-from { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); }
.msg-date { font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.msg-icons { display: flex; gap: var(--sp-1); color: var(--muted); } .msg-icons .ic { width: 14px; height: 14px; }
.msg-subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--muted); }
.msg.unread .msg-from, .msg.unread .msg-subject { font-weight: 700; color: var(--text); }
.msg.unread::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 22px; transform: translateY(-50%); border-radius: 0 var(--r-pill) var(--r-pill) 0; background: linear-gradient(var(--grad-a), var(--grad-b)); }
.msg.unread.open::before { display: none; }
.msg.unread .msg-date { color: var(--accent-t); font-weight: 650; }

/* Leseansicht */
.pane-read { background: var(--card); }
.rd-bar { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rd-bar .back { display: none; }
.rd-scroll { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 28px; overscroll-behavior: contain; }
.rd-subject { font-size: var(--fs-title); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-bottom: var(--sp-6); overflow-wrap: anywhere; }
.rd-meta { display: flex; align-items: flex-start; gap: var(--sp-5); }
.rd-from { flex: 1; min-width: 0; } .rd-from b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-from small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-side { display: grid; justify-items: end; gap: 2px; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-detail { margin: var(--sp-5) 0 0 56px; padding: var(--sp-4) var(--sp-6); border-radius: var(--r-md); border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 4%, transparent); display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
/* Zeile mit Schlüssel und Wert (div.kv > .k + .v). Die Liste dl.kv aus glaze bleibt unberührt. */
div.kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--sp-3); } div.kv > .k { color: var(--muted); font-weight: 600; } div.kv > .v { overflow-wrap: anywhere; } /* glaze-ok: Zeilenform von raven (div), dl.kv aus glaze bleibt unberührt */
.addr-mail { color: var(--muted); }
.atts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.att { display: flex; align-items: center; gap: var(--sp-4); padding: 7px var(--sp-5) 7px var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); max-width: 100%; transition: var(--t); }
.att:hover { background: var(--card-hi); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.att img { width: 32px; height: 32px; object-fit: cover; border-radius: var(--r-xs); }
.att-t { min-width: 0; } .att-t b { display: block; font-size: var(--fs-sm); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att > .ic { width: 16px; height: 16px; color: var(--muted); }
.rd-frame { display: block; width: 100%; border: 0; margin-top: var(--sp-7); min-height: 40px; color-scheme: normal; }
.rd-frame.paper { background: var(--paper); border-radius: var(--r-md); border: 1px solid var(--line); }

/* Leerzustände in Panes */
.pane .empty-card { margin: auto; padding: 40px var(--sp-8); }

/* Responsive */
@media (max-width: 1280px) {
  .mail { grid-template-columns: clamp(340px, 38vw, 440px) minmax(0, 1fr); }
  .pane-folders { position: fixed; z-index: var(--z-modal); top: 0; bottom: 0; left: 0; width: min(300px, 86vw); border-radius: 0 var(--r-xl) var(--r-xl) 0; background: var(--bg2); transform: translateX(-105%); transition: transform .25s; backdrop-filter: none; }
  .mail.drawer-open .pane-folders { transform: none; }
  .drawer-backdrop { display: none; position: fixed; inset: 0; z-index: var(--z-nav); background: var(--scrim); }
  .mail.drawer-open .drawer-backdrop { display: block; }
  .drawer-btn, .compose-mini { display: inline-grid; } .compose-mini { display: inline-flex; }
}
@media (max-width: 900px) {
  .mail { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 112px); }
  .mail.single[data-pane="list"] .pane-read, .mail.single[data-pane="read"] .pane-list { display: none; }
  .rd-bar .back { display: grid; } .rd-scroll { padding: var(--sp-6) var(--sp-7) var(--sp-9); }
  .rd-detail { margin-left: 0; }
  .rd-bar .btn-t { display: none; }
}
.mail.single { grid-template-columns: 232px minmax(0, 1fr); }
@media (max-width: 1280px) { .mail.single { grid-template-columns: minmax(0, 1fr); } }
.mail.single .pane-read .back { display: grid; }


/* ---------- Verfassen ---------- */
.cmp { position: fixed; z-index: var(--z-menu); right: 24px; bottom: 0; width: min(700px, calc(100vw - 32px)); height: min(76dvh, 700px); display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow); overflow: hidden; }
.cmp.big { width: min(1000px, calc(100vw - 32px)); height: min(92dvh, 900px); }
.cmp.min { height: 50px; } .cmp.min .cmp-form { display: none; }
.cmp.drag::after { content: "Dateien hier ablegen"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 650; background: color-mix(in srgb, var(--accent) 22%, var(--bg2)); border: 2px dashed var(--accent); border-radius: inherit; z-index: var(--z-sticky); }
.cmp-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-3) 18px; min-height: 50px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 10%, var(--bg2)); cursor: pointer; }
.cmp-title { font-size: var(--fs-md); font-weight: 650; }
.cmp-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cp-row { display: flex; align-items: flex-start; gap: var(--sp-4); padding: 5px var(--sp-7); border-bottom: 1px solid var(--line); position: relative; }
.cp-row > label { flex: none; width: 66px; padding-top: var(--sp-3); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.cp-row > select, .cp-row > input { border: 0; background: none; padding: 7px 0; box-shadow: none !important; flex: 1; min-width: 0; }
.cp-row > select { cursor: pointer; }
.cp-toggles { display: flex; gap: var(--sp-4); padding-top: 9px; flex: none; }
.rcpt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; padding: 3px 0; position: relative; cursor: text; }
.rcpt-chips { display: contents; }
.rcpt input { flex: 1; min-width: 120px; width: auto; border: 0; background: none; padding: 5px 2px; box-shadow: none !important; }
.rchip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-1) 2px var(--sp-4); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 560; border: 1px solid var(--line); background: var(--card-hi); max-width: 100%; }
.rchip.bad { border-color: color-mix(in srgb, var(--crit) 55%, var(--line)); color: var(--crit-t); }
.rchip button { border: 0; background: none; color: var(--muted); padding: 2px; display: grid; cursor: pointer; border-radius: 50%; } .rchip button:hover { color: var(--text); background: var(--card); }
.rchip .ic { width: 13px; height: 13px; }
.suggest { position: absolute; z-index: var(--z-sticky); left: 0; top: 100%; min-width: 280px; max-width: 100%; padding: var(--sp-2); border-radius: var(--r-md); background: var(--bg2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.sg { display: grid; padding: 7px var(--sp-4); border-radius: var(--r-xs); cursor: pointer; } .sg.on, .sg:hover { background: var(--card-hi); }
.sg b { font-size: var(--fs-sm); } .sg small { font-size: var(--fs-xs); }
.cp-tools { display: flex; align-items: center; gap: 2px; padding: 5px var(--sp-5); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cp-body { flex: 1; min-height: 120px; overflow: auto; display: flex; flex-direction: column; }
.editor { flex: 1; min-height: 120px; padding: var(--sp-6) 18px; outline: none; line-height: 1.55; overflow-wrap: anywhere; }
.editor blockquote { margin: .5em 0 .5em .3em; padding-left: 1em; border-left: 2px solid var(--muted); color: var(--muted); }
.editor a { color: var(--accent-t); } .editor img { max-width: 100%; height: auto; }
.editor [data-sig] { color: var(--muted); margin-top: 1em; }
.plain-editor { flex: 1; width: 100%; resize: none; border: 0 !important; border-radius: 0 !important; background: none !important; padding: var(--sp-6) 18px; box-shadow: none !important; font-family: var(--font-mono); font-size: var(--fs-sm); }
.cp-atts { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-7); border-top: 1px solid var(--line); }
.cp-att { display: inline-flex; align-items: center; gap: 7px; padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); font-size: var(--fs-sm); max-width: 100%; }
.cp-att .ic { width: 14px; height: 14px; color: var(--muted); } .cp-att-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cp-att button { border: 0; background: none; color: var(--muted); display: grid; padding: 2px; cursor: pointer; } .cp-att button:hover { color: var(--crit-t); }
.cp-foot { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line); flex-wrap: wrap; }
.cp-status { font-size: var(--fs-2xs); color: var(--muted); }
@media (max-width: 760px) {
  .cmp, .cmp.big { right: 0; left: 0; width: 100%; height: 100dvh; border-radius: 0; border: 0; }
  .cmp.min { height: 50px; top: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .hide-sm { display: none; } .cp-row > label { width: 54px; }
  .cp-status { display: none; }
}

/* ---------- Kontakte ---------- */
.cols { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.clist-box { position: sticky; top: 20px; max-height: calc(100dvh - 150px); display: flex; flex-direction: column; }
.clist { overflow: auto; min-height: 0; }
.crow { display: flex; align-items: center; gap: var(--sp-5); width: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid transparent; border-radius: var(--r-md); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.crow:hover { background: var(--card-hi); } .crow.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.crow .fav { color: var(--warn-t); } .crow .fav .ic { width: 15px; height: 15px; fill: currentColor; }
.cdetail .cd-head { display: flex; align-items: center; gap: var(--sp-7); margin: var(--sp-6) 0; } .cd-head h2 { font-size: var(--fs-title); letter-spacing: -.02em; }
.cdetail .notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.cdetail .back { display: none; }
@media (max-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .contacts[data-pane="list"] .cdetail, .contacts[data-pane="detail"] .clist-box { display: none; }
  .cdetail .back { display: grid; } .clist-box { position: static; max-height: none; }
  .page-head .btn-t { display: none; } /* glaze-ok: Knopftexte im Seitenkopf werden schmal zu reinen Symbolknöpfen */
}

/* ---------- Einstellungen ---------- */
.acct-li { flex-wrap: wrap; }
.rule-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, 1fr) minmax(0, 1.6fr) auto; gap: var(--sp-3); margin-bottom: var(--sp-3); align-items: center; }
.rule-row select, .rule-row input { min-width: 0; }
.rows { display: grid; }
@media (max-width: 640px) { .rule-row { grid-template-columns: 1fr auto; } .rule-row > :not(button) { grid-column: 1 / -1; } .rule-row > button { grid-column: 2; grid-row: 1; } }
textarea.code { width: 100%; margin: var(--sp-5) 0 0; }

/* Dichte kompakt */
:root[data-density="compact"] .msg { padding-top: 5px; padding-bottom: 5px; }
:root[data-density="compact"] .fl-item { padding-top: 5px; padding-bottom: 5px; }
:root[data-density="compact"] .li { padding: var(--sp-2) var(--sp-1); }

.quota { margin-top: auto; padding-top: var(--sp-4); display: grid; gap: var(--sp-2); }

/* ---------- Einrichtung und Verwaltung ----------
   Assistent, Prüflisten, Kopierfelder und Abschlussseite kommen aus glaze (glaze-wizard.js, GLAZE.md 6.14). Hier steht nur, was raven zusätzlich braucht. */
.reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.reqs li { display: flex; align-items: flex-start; gap: var(--sp-4); }
.reqs .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-t); }
.sum { display: grid; gap: var(--sp-3); }
.sum .kv { grid-template-columns: 150px minmax(0, 1fr); }
.sum .kv .v code { user-select: all; }
.grow small.wrap { white-space: normal; overflow: visible; }
.probe { display: grid; gap: var(--sp-5); }
.admin { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); }
.admin .grid.two { margin: 0; }
.admin-card { display: grid; gap: var(--sp-6); align-content: start; }
.admin-card .sec-title { margin: 0; }
.card-foot { margin-top: var(--sp-6); }
ol.steps { margin: 0; padding-left: var(--sp-8); display: grid; gap: var(--sp-6); }
ol.steps li { padding-left: var(--sp-1); }
ol.steps li > .copy { margin-top: var(--sp-3); }
ol.steps li::marker { color: var(--accent-t); font-weight: 700; }

/* main wird nach dem Seitenwechsel programmatisch fokussiert (für Screenreader), der Fokusring soll dabei nicht um die ganze Seite erscheinen */
main:focus, main:focus-visible, #main:focus-visible { outline: none; }

/* ---------- Zwei-Faktor ---------- */
.tf-scan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-9); align-items: start; }
@media (max-width: 620px) { .tf-scan { grid-template-columns: 1fr; justify-items: center; } .tf-steps { width: 100%; } }

/* Anmeldung und Assistent füllen die ganze Seite. In raven liegt .auth-body in #page (nicht direkt in .shell), deshalb greift die Regel aus glaze nicht. */
.shell:has(.auth-body) { padding: 0; max-width: none; } /* glaze-ok: .auth-body steckt in #page */
.standalone .top { margin-bottom: var(--gap-lg); }

/* Das Kippen beim Hover gilt für die Navigation in der Kopfzeile. Werkzeugknöpfe im Inhalt bleiben ruhig. */
main .icon-btn:hover, main .icon-btn:hover:active, .cmp .icon-btn:hover, .cmp .icon-btn:hover:active { transform: none; }

/* ---------- Kalender ---------- */
.cal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--gap-lg); align-items: start; }
.cal-side { position: sticky; top: 20px; display: grid; gap: var(--sp-5); }
.cal-srcs { display: grid; gap: 2px; }
.cal-src { display: flex; align-items: center; gap: var(--sp-1); }
.cal-src-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-2); cursor: pointer; border-radius: var(--r-sm); }
.cal-src-l:hover { background: var(--card-hi); }
.cal-src-l .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.cal-src-l .grow b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-sm); }
small.bad { color: var(--crit-t); }
.cal-main { padding: var(--sp-6); min-width: 0; }
.cal-bar { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.cal-title { font-size: var(--fs-lg); margin-left: var(--sp-3); }
.cal-view { overflow-x: auto; }
@media (max-width: 900px) { .cal { grid-template-columns: minmax(0, 1fr); } .cal-side { position: static; } .cal-main { padding: var(--sp-4); } }

.ev-chip { --c: var(--s1); display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-width: 0; padding: 2px 7px; border: 0; border-left: 3px solid var(--c); border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--text); font: inherit; font-size: var(--fs-xs); font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; }
.ev-chip time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.ev-chip > span { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ev-chip:hover { background: color-mix(in srgb, var(--c) 30%, transparent); }
.ev-chip.allday { background: color-mix(in srgb, var(--c) 30%, transparent); }
.ev-chip.ro { border-left-style: dashed; }
.ev-chip .rec { width: 12px; height: 12px; flex: none; color: var(--muted); }

.mv-head { display: grid; grid-template-columns: repeat(7, 1fr); font-size: var(--fs-xs); color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; padding: 0 var(--sp-2) var(--sp-2); }
.mv-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-width: 560px; }
.mv-cell { min-height: 108px; padding: var(--sp-1); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 2px; align-content: start; cursor: pointer; min-width: 0; }
.mv-cell:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.mv-cell.other { opacity: .5; }
.mv-num { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); justify-self: start; min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r-pill); padding: 0 var(--sp-2); }
.mv-cell.today .mv-num { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: var(--on-accent); }
.mv-more { border: 0; background: none; color: var(--accent-t); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; text-align: left; padding: 0 var(--sp-1); }
@media (max-width: 640px) {
  /* Monat passt auf den Bildschirm: sieben schmale Spalten statt 560 px zum Wischen (die Wochentage darüber liefen nicht mit) */
  .mv-grid { min-width: 0; }
  .mv-head { padding-inline: 0; text-align: center; letter-spacing: 0; }
  .mv-cell { min-height: 72px; padding: 2px; }
  .mv-num { justify-self: center; min-width: 22px; height: 22px; padding: 0 var(--sp-1); }
  .mv-cell .ev-chip { padding: 1px 3px; border-left-width: 2px; font-size: var(--fs-3xs); }
  .mv-cell .ev-chip time { display: none; }
  .mv-more { padding: 0; text-align: center; font-size: var(--fs-3xs); }
}

.tg { min-width: 560px; }
.tg-top { display: grid; grid-template-columns: 52px repeat(var(--n), minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tg-head { text-align: center; padding: var(--sp-2) 0; display: grid; justify-items: center; color: var(--muted); font-size: var(--fs-xs); font-weight: 650; }
.tg-head b { font-size: var(--fs-lg); color: var(--text); font-variant-numeric: tabular-nums; }
.tg-head.today b { color: var(--accent-t); }
.tg-corner { display: grid; align-items: center; padding-left: var(--sp-1); }
.tg-ad { display: grid; gap: 2px; padding: 3px; border-left: 1px solid var(--line); min-height: 28px; align-content: start; }
.tg-scroll { max-height: calc(100dvh - 340px); min-height: 380px; overflow-y: auto; overscroll-behavior: contain; }
.tg-body { display: grid; grid-template-columns: 52px repeat(var(--n), minmax(0, 1fr)); }
.tg-hour { position: relative; border-top: 1px solid var(--line); }
.tg-hour:first-child { border-top: 0; }
.tg-hour span { position: absolute; top: -8px; right: 8px; font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.tg-col { position: relative; border-left: 1px solid var(--line); height: 1248px; cursor: pointer;
  background-image: repeating-linear-gradient(to bottom, transparent 0 51px, var(--line) 51px 52px); }
.tg-col.today { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }
.tg-col .ev-chip.block { position: absolute; display: block; white-space: normal; padding: 3px var(--sp-2); overflow: hidden; width: auto; }
.tg-col .ev-chip.block time { display: block; }
.tg-col .ev-chip.block .rec { display: none; }
.tg-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--crit); z-index: var(--z-sticky); pointer-events: none; }

.ag-day { font-size: var(--fs-md); margin: var(--sp-7) 0 var(--sp-2); color: var(--muted); font-weight: 650; }
.ag-day.today { color: var(--accent-t); }
.ag-ev { display: flex; gap: var(--sp-5); align-items: center; width: 100%; padding: var(--sp-3) var(--sp-5); border: 0; border-left: 3px solid var(--c, var(--s1)); border-radius: var(--r-sm); background: var(--card); color: var(--text); font: inherit; cursor: pointer; margin-bottom: var(--sp-1); text-align: left; }
.ag-ev:hover { background: var(--card-hi); }
.ag-time { width: 96px; flex: none; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ag-ev .rec { width: 14px; height: 14px; color: var(--muted); }
.pick-list { display: grid; gap: var(--sp-4); margin: var(--sp-3) 0; max-height: 50vh; overflow: auto; }
.fields.rec { margin-top: var(--sp-6); } /* glaze-ok: Wiederholungsfelder im Termin-Dialog mit Abstand zum Schalter */