/* fios – app-spezifische Styles. Baut auf glaze.css auf und ändert dessen Tokens nicht. */
:root { --paper: #fff; --paper-text: #1b1f2a; --head-h: 128px; }

* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 25%, transparent) transparent; }
.icon-btn.burger { display: none; }
@media (max-width: 760px) { .icon-btn.burger { display: grid; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.grow b, .grow small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
kbd { font: 600 .78rem ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); }
pre.code, textarea.code { font: .84rem/1.5 ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; }
pre.code { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; margin: 12px 0 0; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 5%, transparent); }
.link { background: none; border: 0; padding: 0; color: var(--accent-t); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.link:hover { text-decoration: underline; }
.tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); background: var(--card); white-space: nowrap; }
.tag.draft { color: var(--crit-t); border-color: color-mix(in srgb, var(--crit) 35%, var(--line)); }
.bar-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; flex: none; }
.group-title { font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 14px 4px 4px; }
.page-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.page-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.sub-title { font-size: .85rem; font-weight: 620; color: var(--muted); margin: 16px 0 8px; }
main.auth-body { min-height: 100vh; max-width: none; display: grid; place-items: center; padding: 0; }
#toasts { position: fixed; left: 0; right: 0; bottom: 22px; z-index: 300; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
#toasts .toast { position: static; transform: none; pointer-events: auto; max-width: min(560px, 100%); }
@media (max-width: 760px) { #toasts { bottom: auto; top: 14px; justify-items: end; } }
body.cmp-open #toasts { bottom: 22px; }

/* ---------- Symbolknöpfe in Werkzeugleisten ---------- */
.icon-btn.sm { width: 34px; height: 34px; border-radius: 10px; }
.icon-btn.sm .ic { width: 18px; height: 18px; }
.icon-btn.sm:hover, .cmp .icon-btn:hover { transform: none; }
.icon-btn:disabled { opacity: .4; cursor: default; }
.icon-btn.danger:hover { color: var(--crit-t); }
.icon-btn.flag-on { color: var(--warn-t); } .icon-btn.flag-on .ic { fill: currentColor; }
.btn.icon-only { padding: 8px; }
.btn.sm .ic { width: 15px; height: 15px; }
.chip.sm { padding: 4px 10px; font-size: .8rem; cursor: pointer; }
.chip.sm .ic { width: 13px; height: 13px; }
.chip.on { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.ico.sm { width: 32px; height: 32px; border-radius: 10px; } .ico.sm .ic { width: 16px; height: 16px; }
.field > select, .field > input, .field > textarea { min-width: 0; }
input[type=date], input[type=email], input[type=tel], input[type=url] { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); color: var(--text); font: inherit; font-size: .9rem; background: color-mix(in srgb, var(--text) 5%, transparent); outline: none; }
input[type=date]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.hint.center { text-align: center; }
.ipa.center { align-self: center; text-align: center; margin: -10px 0 0; }
.dlg { max-height: 88vh; overflow: auto; } .dlg.wide { width: min(720px, 94vw); }
.dlg-title { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; }
.dlg-title + .fields, .dlg-title + .muted { margin-top: 14px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.note.row-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.note.row-note .ic { color: var(--accent-t); } .note.warn .ic { color: var(--warn-t); }
.pick { display: grid; gap: 2px; margin-top: 12px; max-height: 50vh; overflow: auto; }
.pick-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px calc(12px + var(--d, 0) * 16px); border-radius: 10px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.pick-item:hover { background: var(--card-hi); }
.menu.pop { position: fixed; right: auto; top: auto; z-index: 250; max-height: 70vh; overflow: auto; }
.menu.pop button { display: flex; align-items: center; gap: 10px; width: 100%; }
.menu.pop button .ic { width: 16px; height: 16px; color: var(--muted); } .menu.pop button.danger { color: var(--crit-t); }
.menu.pop button .chk { margin-left: auto; color: var(--accent-t); }
.menu.pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.menu-title { font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 6px 10px 2px; }
.list-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; color: var(--muted); }

/* ---------- Anmeldung ---------- */
.auth-card .field { gap: 6px; }
.adv { border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--text) 3%, transparent); }
.adv summary { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-weight: 600; font-size: .9rem; cursor: pointer; list-style: none; color: var(--muted); }
.adv summary::-webkit-details-marker { display: none; }
.adv summary .ic { width: 17px; height: 17px; color: var(--accent-t); }
.adv summary::after { content: "›"; margin-left: auto; font-size: 1.3rem; line-height: 1; transition: transform .2s; }
.adv[open] summary::after { transform: rotate(90deg); }
.adv-body { display: grid; gap: 14px; padding: 4px 14px 14px; }
.srv { display: grid; gap: 8px; } .srv-title { font-size: .78rem; font-weight: 650; color: var(--muted); }
.srv-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.srv-row > .field:first-child { grid-column: 1 / -1; }
.srv-row .field > label { font-size: .72rem; }
.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; } }

/* ---------- Avatar ---------- */
.avatar { --h: 220; width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: hsl(var(--h) 70% 82%);
  background: hsl(var(--h) 45% 32% / .55); border: 1px solid hsl(var(--h) 60% 60% / .35); }
:root[data-theme="light"] .avatar { color: hsl(var(--h) 60% 26%); background: hsl(var(--h) 70% 85%); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .avatar { color: hsl(var(--h) 60% 26%); background: hsl(var(--h) 70% 85%); } }
.avatar.lg { width: 44px; height: 44px; font-size: .95rem; } .avatar.xl { width: 64px; height: 64px; font-size: 1.3rem; }

/* ---------- 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: 14px; gap: 12px; overflow: auto; }
.fl { display: grid; gap: 2px; }
.fl-item { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px calc(10px + var(--d, 0) * 16px); border-radius: 11px; color: var(--muted); font-weight: 560; font-size: .9rem; 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: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: 1px 8px; 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: 6px; 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: 6px; }

.list-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 6px; }
.list-title { font-size: 1.05rem; font-weight: 620; letter-spacing: -.01em; }
.drawer-btn, .compose-mini { display: none; }
.search-row { display: flex; gap: 8px; padding: 6px 14px; }
.search { position: relative; flex: 1; min-width: 0; }
.search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search input { padding-left: 34px; }
.search input { padding-right: 40px; }
.search-scope { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.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); }
.search .search-scope .ic { position: static; transform: none; width: 16px; height: 16px; color: inherit; }
.list-tools { display: flex; align-items: center; gap: 6px; padding: 6px 14px 8px; border-bottom: 1px solid var(--line); min-height: 48px; flex-wrap: nowrap; }
.list-tools .chips { display: flex; gap: 6px; 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: .85rem; margin-right: 6px; }
.list-foot { display: flex; justify-content: flex-end; padding: 6px 12px; border-top: 1px solid var(--line); min-height: 44px; align-items: center; }
.pager { display: flex; align-items: center; gap: 2px; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; } .pg-info { margin-right: 4px; white-space: nowrap; }
.chk { display: grid; place-items: center; padding: 4px; 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: 4px 6px; padding: 9px 12px 9px 10px; 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: 8px; min-width: 0; }
.msg-from { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.msg-date { font-size: .75rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.msg-icons { display: flex; gap: 4px; 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: .85rem; 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 3px 3px 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: 4px; padding: 10px 12px; 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: 1.35rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-bottom: 14px; overflow-wrap: anywhere; }
.rd-meta { display: flex; align-items: flex-start; gap: 12px; }
.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: .78rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-detail { margin: 12px 0 0 56px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 4%, transparent); display: grid; gap: 4px; font-size: .84rem; }
.kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; } .kv .k { color: var(--muted); font-weight: 600; } .kv .v { overflow-wrap: anywhere; }
.addr-mail { color: var(--muted); }
.atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.att { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); max-width: 100%; transition: .15s; }
.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: 8px; }
.att-t { min-width: 0; } .att-t b { display: block; font-size: .85rem; 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: 16px; min-height: 40px; color-scheme: normal; }
.rd-frame.paper { background: var(--paper); border-radius: 12px; border: 1px solid var(--line); }

/* Leerzustände in Panes */
.pane .empty-card { margin: auto; padding: 40px 20px; }

/* Responsive */
@media (max-width: 1280px) {
  .mail { grid-template-columns: clamp(340px, 38vw, 440px) minmax(0, 1fr); }
  .pane-folders { position: fixed; z-index: 120; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); border-radius: 0 20px 20px 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: 110; background: rgba(0, 0, 0, .5); }
  .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: 14px 16px 24px; }
  .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: 100; 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: 18px 18px 0 0; box-shadow: 0 -10px 50px rgba(0, 0, 0, .4); 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: 5; }
.cmp-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 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: .95rem; font-weight: 650; }
.cmp-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cp-row { display: flex; align-items: flex-start; gap: 10px; padding: 5px 16px; border-bottom: 1px solid var(--line); position: relative; }
.cp-row > label { flex: none; width: 66px; padding-top: 8px; font-size: .78rem; 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: 10px; padding-top: 9px; flex: none; }
.rcpt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; 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: 4px; padding: 2px 4px 2px 10px; border-radius: var(--r-pill); font-size: .84rem; 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: 20; left: 0; top: 100%; min-width: 280px; max-width: 100%; padding: 6px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.sg { display: grid; padding: 7px 10px; border-radius: 8px; cursor: pointer; } .sg.on, .sg:hover { background: var(--card-hi); }
.sg b { font-size: .88rem; } .sg small { font-size: .78rem; }
.cp-tools { display: flex; align-items: center; gap: 2px; padding: 5px 12px; 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: 14px 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: 14px 18px; box-shadow: none !important; font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; font-size: .88rem; }
.cp-atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px; border-top: 1px solid var(--line); }
.cp-att { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: .82rem; 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: 8px; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.cp-status { font-size: .75rem; 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: 16px 16px 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: 12px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px; 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: 16px; margin: 14px 0; } .cd-head h2 { font-size: 1.4rem; 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; }
}

/* ---------- Einstellungen ---------- */
.panel { display: grid; gap: 18px; min-width: 0; align-content: start; }
.s-nav button .ic { width: 18px; height: 18px; flex: none; } .s-nav button { white-space: nowrap; }
.swatches { padding: 4px 2px; }
.sw { outline-offset: 2px; }
.sw:focus-visible { outline-color: var(--accent); }
.sw.on { outline-color: var(--text); }
.acct-li { flex-wrap: wrap; }
.rule-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, 1fr) minmax(0, 1.6fr) auto; gap: 8px; margin-bottom: 8px; 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: 12px 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: 6px 4px; }

.quota { margin-top: auto; padding-top: 10px; display: grid; gap: 6px; }
body.cmp-open #toasts { justify-items: start; padding-left: 24px; }
@media (max-width: 760px) { body.cmp-open #toasts { justify-items: end; padding-left: 16px; } }
.hero .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; position: relative; z-index: 1; }
.hero > div { position: relative; z-index: 1; }

/* ---------- Assistenten ---------- */
.wiz-page { align-items: start; }
.wiz-wrap { width: 100%; max-width: 780px; margin: 0 auto; padding: 28px 16px 56px; }
.wiz-brand { display: grid; justify-items: center; gap: 8px; margin-bottom: 20px; }
.wiz-brand h1 { font-family: "Grenze Gotisch", ui-serif, Georgia, serif; font-weight: 700; font-size: 2.6rem; line-height: 1.05; }
.wiz-brand .auth-sub { margin: 0; }
.wiz-card { padding: 24px; }
.wiz-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0 0 2px; overflow-x: auto; }
.wiz-steps li { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; padding: 6px 8px; border-radius: 12px; color: var(--muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.wiz-steps li.on { color: var(--text); background: var(--card); border: 1px solid var(--line); }
.wiz-dot { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: .75rem; font-variant-numeric: tabular-nums; border: 1px solid var(--line); background: var(--card); }
.wiz-dot .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.wiz-steps li.on .wiz-dot { color: var(--on-accent); border-color: transparent; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); }
.wiz-steps li.done .wiz-dot { color: var(--ok-t); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.wiz-lbl { overflow: hidden; text-overflow: ellipsis; }
.wiz-steps li:not(.on) .wiz-lbl { display: none; }
.wiz-steps li:not(.on) { flex: 0 0 auto; }
.wiz-steps li.on { flex: 1 1 auto; }
@media (max-width: 700px) { .wiz-steps li { flex: none; padding: 6px 4px; } .wiz-steps li:not(.on) .wiz-lbl { display: none; } .wiz-card { padding: 18px; } }
.wiz-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.wiz-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.wiz-head p { margin-top: 2px; }
.wiz-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.wiz .err { margin-top: 12px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; }
.checks li .ic { width: 17px; height: 17px; margin-top: 2px; color: var(--ok-t); }
.checks.small { font-size: .88rem; color: var(--muted); margin-top: 6px; }
.choice.big { grid-template-columns: 1fr; margin-bottom: 14px; }
.choice.big button { display: grid; gap: 3px; padding: 14px 16px; }
.choice.big button small { color: var(--muted); }
.access-detail { display: grid; gap: 4px; }
.snip { position: relative; margin: 10px 0 0; }
.snip pre.code { margin: 0; padding-right: 100px; }
.snip .btn { position: absolute; top: 8px; right: 8px; }
.sum { display: grid; gap: 8px; }
.sum .kv { grid-template-columns: 150px minmax(0, 1fr); }
.grow small.wrap { white-space: normal; overflow: visible; }
.probe { display: grid; margin-top: 6px; }
.probe .note { margin-top: 10px; }
.admin-login { max-width: 460px; margin: 30px auto; }
.dns { margin-top: 4px; }
.done .li { padding: 12px 4px; }
.admin .hero { margin-bottom: 18px; }
.hero .chip { background: color-mix(in srgb, var(--bg2) 60%, transparent); }
ol.steps { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
ol.steps li { padding-left: 4px; }
ol.steps li::marker { color: var(--accent-t); font-weight: 700; }
code { font: .84rem ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 6%, transparent); }
.sum .kv .v code { user-select: all; }

/* 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; }