/* ==========================================================================
   HomeCockpit Remote Support - Verwaltungsoberfläche

   Farbwelt, Abstände und Bausteine sind bewusst identisch zum HomeCockpit
   Service Center, damit beide Oberflächen als ein System lesen. Alle drei
   Darstellungen (System, Hell, Dunkel) laufen über dieselben Variablen.
   ========================================================================== */

:root {
  color-scheme: light;
  --ground:#eef2f1; --surface:#ffffff; --surface-2:#f6f9f8; --surface-3:#eaefee;
  --line:#dbe3e1; --line-strong:#c2cecb;
  --ink:#0f1a18; --ink-2:#3f4d4a; --ink-3:#6c7b77;
  --accent:#0b6d5f; --accent-hover:#095a4f; --accent-on:#ffffff; --accent-soft:#dcefeb; --accent-line:#9ccec4;
  --ok:#1f6b46; --ok-soft:#dcefe3; --warn:#8a5a00; --warn-soft:#f8ecd4;
  --crit:#a52f26; --crit-soft:#fadedb; --info:#274f9b; --info-soft:#dee7f8;
  --shadow-1:0 1px 2px rgba(15,26,24,.06),0 1px 1px rgba(15,26,24,.04);
  --shadow-2:0 10px 30px rgba(15,26,24,.10),0 2px 6px rgba(15,26,24,.06);
  --shadow-3:-18px 0 48px rgba(15,26,24,.14);
  --r-1:4px; --r-2:6px; --r-3:10px;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --display:"Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono","Cascadia Code",Consolas,ui-monospace,monospace;
  --rail:252px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:#0b100f; --surface:#121a19; --surface-2:#172120; --surface-3:#1e2a28;
    --line:#253331; --line-strong:#374744;
    --ink:#e7efec; --ink-2:#b3c2be; --ink-3:#92a39f;
    --accent:#3fc9b0; --accent-hover:#57d7c0; --accent-on:#05201c; --accent-soft:#123430; --accent-line:#1f5a51;
    --ok:#56c185; --ok-soft:#123023; --warn:#dda43c; --warn-soft:#35280f;
    --crit:#f0796b; --crit-soft:#3a1c19; --info:#85a8ef; --info-soft:#182741;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 12px 32px rgba(0,0,0,.45); --shadow-3:-18px 0 48px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:#0b100f; --surface:#121a19; --surface-2:#172120; --surface-3:#1e2a28;
  --line:#253331; --line-strong:#374744;
  --ink:#e7efec; --ink-2:#b3c2be; --ink-3:#92a39f;
  --accent:#3fc9b0; --accent-hover:#57d7c0; --accent-on:#05201c; --accent-soft:#123430; --accent-line:#1f5a51;
  --ok:#56c185; --ok-soft:#123023; --warn:#dda43c; --warn-soft:#35280f;
  --crit:#f0796b; --crit-soft:#3a1c19; --info:#85a8ef; --info-soft:#182741;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 12px 32px rgba(0,0,0,.45); --shadow-3:-18px 0 48px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
body { margin:0; background:var(--ground); color:var(--ink); font:400 14px/1.45 var(--sans); -webkit-font-smoothing:antialiased; }
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-1); }

/* ---------- Grundgerüst ------------------------------------------------ */

.app { display:grid; grid-template-columns:var(--rail) minmax(0,1fr); min-height:100vh; }
.rail { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:4px; padding:18px 12px 14px; background:var(--surface); border-right:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; padding:4px 8px 18px; }
.brand-mark, .logo-mark { width:30px; height:30px; border-radius:var(--r-2); display:grid; place-items:center; background:var(--accent); color:var(--accent-on); font:700 12px/1 var(--display); }
.brand-name { font:600 13.5px/1.2 var(--display); }
.brand-sub { color:var(--ink-3); font-size:11.5px; }
.rail-label { padding:14px 10px 6px; margin:0; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav a { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--r-2); color:var(--ink-2); text-decoration:none; font-size:13.5px; border:1px solid transparent; cursor:pointer; }
.nav a:hover { background:var(--surface-2); color:var(--ink); }
.nav a[aria-current="page"] { background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink); font-weight:600; }
.nav svg { width:16px; height:16px; flex:none; opacity:.85; }
.nav .count { margin-left:auto; min-width:20px; padding:1px 6px; border-radius:99px; background:var(--warn); color:#241a03; font:700 11px/1.6 var(--mono); text-align:center; }
.rail-foot { margin-top:auto; padding:12px 10px 0; border-top:1px solid var(--line); display:grid; gap:8px; }
.build { font:400 11px/1.5 var(--mono); color:var(--ink-3); }

.bar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; padding:0 28px; height:62px; background:color-mix(in srgb,var(--ground) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.bar h1 { margin:0; font:600 18px/1.2 var(--display); letter-spacing:-.015em; }
.bar .sub { color:var(--ink-3); font-size:12.5px; }
.bar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.stamp { font:400 11.5px/1 var(--mono); color:var(--ink-3); white-space:nowrap; }
.operator { display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid var(--line); border-radius:99px; background:var(--surface); cursor:pointer; }
.operator:hover { border-color:var(--line-strong); }
.operator span.i { width:24px; height:24px; border-radius:99px; display:grid; place-items:center; background:var(--surface-3); color:var(--ink-2); font:600 10.5px/1 var(--sans); }
.operator span.n { font-size:12.5px; color:var(--ink-2); }

main { padding:22px 28px 64px; }
.wrap { max-width:1360px; }

/* ---------- Bausteine --------------------------------------------------- */

.btn { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--surface); color:var(--ink-2); font-size:13px; cursor:pointer; white-space:nowrap; text-decoration:none; }
.btn:hover { background:var(--surface-2); color:var(--ink); border-color:var(--ink-3); }
.btn svg { width:15px; height:15px; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-on); font-weight:600; }
.btn.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn.danger { color:var(--crit); border-color:color-mix(in srgb,var(--crit) 40%,var(--line)); }
.btn.danger:hover { background:var(--crit-soft); border-color:var(--crit); }
.btn.quiet { border-color:transparent; background:transparent; }
.btn.quiet:hover { background:var(--surface-2); border-color:var(--line); }
.btn.sm { height:27px; padding:0 9px; font-size:12.5px; }
.btn.wide, .wide-button { width:100%; justify-content:center; height:36px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--shadow-1); overflow:hidden; }
.card + .card { margin-top:16px; }
.card-head { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.card-head h2 { margin:0; font:600 14px/1.3 var(--display); }
.card-head .hint { color:var(--ink-3); font-size:12px; }
.card-head .right { margin-left:auto; display:flex; gap:8px; align-items:center; }
.card-body { padding:16px; }

.pill { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:99px; font-size:11.5px; font-weight:600; white-space:nowrap; background:var(--surface-3); color:var(--ink-2); }
.pill::before { content:""; width:6px; height:6px; border-radius:99px; background:currentColor; }
.pill.ok { background:var(--ok-soft); color:var(--ok); }
.pill.warn { background:var(--warn-soft); color:var(--warn); }
.pill.crit { background:var(--crit-soft); color:var(--crit); }
.pill.info { background:var(--info-soft); color:var(--info); }
.pill.mute { background:var(--surface-3); color:var(--ink-3); }
.pill.flat::before { display:none; }

.chip { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:var(--r-1); background:var(--surface-3); color:var(--ink-2); font:500 12px/1.7 var(--mono); }
.mono { font-family:var(--mono); font-size:12.5px; }
.muted { color:var(--ink-3); }
.copy { border:0; background:none; padding:2px; margin-left:4px; cursor:pointer; color:var(--ink-3); border-radius:var(--r-1); vertical-align:-3px; }
.copy:hover { color:var(--accent); background:var(--surface-3); }
.copy svg { width:13px; height:13px; display:block; }

.filters { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.tabs { display:flex; gap:2px; padding:3px; background:var(--surface-3); border-radius:var(--r-2); }
.tabs button { border:0; background:none; padding:5px 11px; border-radius:var(--r-1); color:var(--ink-2); font-size:13px; cursor:pointer; }
.tabs button[aria-pressed="true"] { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow-1); }
.tabs .n { font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-left:5px; }
.search { position:relative; display:flex; align-items:center; flex:1 1 340px; min-width:min(340px,100%); max-width:520px; }
.search svg { position:absolute; left:9px; width:15px; height:15px; color:var(--ink-3); pointer-events:none; }
.search input { height:32px; width:100%; padding:0 12px 0 30px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--surface); color:var(--ink); }
.spacer { margin-left:auto; }

.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th { background:var(--surface-2); text-align:left; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:9px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
tbody td { padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr.row { cursor:pointer; }
tbody tr.row:hover td { background:var(--surface-2); }
tbody tr.flag-crit td:first-child { box-shadow:inset 3px 0 var(--crit); }
tbody tr.flag-warn td:first-child { box-shadow:inset 3px 0 var(--warn); }
.t-main { font-weight:600; }
.t-sub { color:var(--ink-3); font-size:12px; margin-top:2px; }
.t-actions { text-align:right; white-space:nowrap; }
.empty { padding:44px 16px; text-align:center; color:var(--ink-3); }

.grid-2 { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.9fr); gap:16px; align-items:start; }
.tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.tile { display:block; width:100%; text-align:left; cursor:pointer; color:var(--ink); text-decoration:none; background:var(--surface); border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-3); padding:13px 15px; box-shadow:var(--shadow-1); }
.tile:hover { border-color:var(--line-strong); box-shadow:var(--shadow-2); }
.tile .k { font-size:12px; color:var(--ink-3); display:block; }
.tile .v { font:600 27px/1.15 var(--display); margin:6px 0 2px; font-variant-numeric:tabular-nums; display:block; }
.tile .m { font-size:12px; color:var(--ink-3); display:block; }
.tile.crit { border-left-color:var(--crit); }
.tile.warn { border-left-color:var(--warn); }
.tile.ok { border-left-color:var(--ok); }
.tile.calm { border-left-color:var(--accent); }

.work { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line); background:none; border-left:0; border-right:0; border-top:0; width:100%; text-align:left; cursor:pointer; color:inherit; }
.work:last-child { border-bottom:0; }
.work:hover { background:var(--surface-2); }
.work .av { width:34px; height:34px; border-radius:var(--r-2); display:grid; place-items:center; background:var(--surface-3); color:var(--ink-2); font:600 11.5px/1 var(--sans); }
.work .t { font-weight:600; font-size:13.5px; display:block; }
.work .s { color:var(--ink-3); font-size:12px; margin-top:2px; display:block; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:9px 16px; align-items:baseline; margin:0; }
.kv dt { color:var(--ink-3); font-size:12.5px; }
.kv dd { margin:0; font-size:13px; text-align:right; }

/* ---------- Baum -------------------------------------------------------- */

.split { display:grid; grid-template-columns:minmax(280px,330px) minmax(0,1fr); gap:16px; align-items:start; }
.tree { padding:8px 6px; display:flex; flex-direction:column; gap:1px; max-height:calc(100vh - 210px); overflow:auto; }
.node { display:flex; align-items:center; gap:7px; width:100%; text-align:left; padding:6px 8px; border:1px solid transparent; border-radius:var(--r-2); background:none; color:var(--ink-2); cursor:pointer; font-size:13.5px; }
.node:hover { background:var(--surface-2); color:var(--ink); }
.node[aria-current="true"] { background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink); font-weight:600; }
.node .tw { width:14px; height:14px; flex:none; color:var(--ink-3); transition:transform .12s ease; }
.node .tw.open { transform:rotate(90deg); }
.node .ic { width:16px; height:16px; flex:none; opacity:.85; }
.node .lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.node .n { margin-left:auto; font:500 11.5px/1 var(--mono); color:var(--ink-3); }
.node .state { margin-left:auto; width:7px; height:7px; border-radius:99px; background:var(--line-strong); flex:none; }
.node .state.on { background:var(--ok); }
.node.lvl-0 { font-weight:600; color:var(--ink); }
.node.lvl-1 { padding-left:16px; }
.node.lvl-2 { padding-left:30px; }
.node.lvl-3 { padding-left:44px; }
.node.lvl-4 { padding-left:58px; }
.node .shared { color:var(--info); }
.node.drop-on { background:var(--accent-soft); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.tree-foot { margin:10px 12px 4px; font-size:11.5px; color:var(--ink-3); }
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3); margin-bottom:10px; flex-wrap:wrap; }
.breadcrumb b { color:var(--ink-2); font-weight:600; }

/* ---------- Auswahl und Ziehen ------------------------------------------ */

.selbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; margin-bottom:12px;
  border:1px solid var(--accent-line); border-radius:var(--r-2); background:var(--accent-soft); }
.selbar .n { font-weight:600; font-size:13px; }
.selbar select { width:auto; min-width:180px; }
.selbar .hint { color:var(--ink-2); font-size:12px; }
.sel-cell { width:34px; text-align:center; }
.sel-cell input { width:15px; height:15px; accent-color:var(--accent); }
tbody tr.dragging td { opacity:.45; }
tbody tr.picked td { background:var(--accent-soft); }
tbody tr[draggable="true"] td:nth-child(2) { cursor:grab; }
.node[draggable="true"] .lbl { cursor:grab; }
.node.dragging { opacity:.45; }
.drag-ghost { position:fixed; top:-1000px; left:-1000px; padding:6px 10px; border-radius:var(--r-2);
  background:var(--accent); color:var(--accent-on); font:600 12.5px var(--sans); box-shadow:var(--shadow-2); }

/* ---------- Formulare --------------------------------------------------- */

.form { display:grid; gap:14px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field { display:grid; gap:5px; min-width:0; }
.field > label, .field > .lab { font-size:12px; color:var(--ink-2); font-weight:600; }
.field .help, .help { font-size:11.5px; color:var(--ink-3); }
input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="date"],select,textarea {
  height:32px; padding:0 10px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--surface); color:var(--ink); width:100%; }
textarea { height:auto; padding:8px 10px; resize:vertical; line-height:1.5; }
input:disabled, select:disabled { background:var(--surface-3); color:var(--ink-3); cursor:not-allowed; }
.check { display:flex; align-items:center; gap:8px; font-size:13px; }
.check input { width:15px; height:15px; accent-color:var(--accent); }
.checklist { display:grid; gap:8px; border:1px solid var(--line); border-radius:var(--r-2); padding:10px 12px; background:var(--surface-2); max-height:220px; overflow:auto; }
.assign-row { display:flex; align-items:center; gap:10px; }
.assign-row .check { flex:1; min-width:0; }
.assign-row select { width:160px; flex:none; }
.note, .notice { padding:10px 12px; border-radius:var(--r-2); background:var(--surface-2); border:1px solid var(--line); font-size:12.5px; color:var(--ink-2); line-height:1.5; }
.note.warn, .notice.warn { background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 35%,transparent); color:var(--ink); }
.note.info { background:var(--info-soft); border-color:color-mix(in srgb,var(--info) 30%,transparent); color:var(--ink); }
.note.crit, .notice.danger { background:var(--crit-soft); border-color:color-mix(in srgb,var(--crit) 35%,transparent); color:var(--ink); }
.notice.ok { background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 35%,transparent); color:var(--ink); }

/* ---------- Schublade und Dialog ---------------------------------------- */

.scrim { position:fixed; inset:0; z-index:40; background:rgba(8,16,15,.38); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .18s ease; }
.scrim.on { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; bottom:0; z-index:41; width:min(560px,100vw); display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--line); box-shadow:var(--shadow-3); transform:translateX(100%); transition:transform .2s cubic-bezier(.22,.7,.3,1); }
.drawer.on { transform:none; }
.drawer-head { display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.drawer-head h2 { margin:0; font:600 16px/1.25 var(--display); }
.drawer-head .eyebrow { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.drawer-body { padding:18px; overflow-y:auto; flex:1; display:grid; gap:16px; align-content:start; }
.drawer-foot { display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--line); background:var(--surface-2); }
.x { border:0; background:none; cursor:pointer; color:var(--ink-3); padding:4px; border-radius:var(--r-1); margin-left:auto; }
.x:hover { background:var(--surface-3); color:var(--ink); }
.x svg { width:17px; height:17px; display:block; }
.section-label { font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.stack { display:grid; gap:8px; }
.line { display:flex; justify-content:space-between; gap:16px; align-items:baseline; font-size:13px; }
.line .k { color:var(--ink-3); font-size:12.5px; }
.line .v { text-align:right; min-width:0; word-break:break-word; }
.actions-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.timeline { display:grid; gap:0; }
.tl { display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; padding:0 0 14px; position:relative; }
.tl:last-child { padding-bottom:0; }
.tl .dot { width:9px; height:9px; border-radius:99px; background:var(--accent); margin-top:5px; }
.tl::before { content:""; position:absolute; left:4px; top:16px; bottom:0; width:1px; background:var(--line); }
.tl:last-child::before { display:none; }
.tl .t { font-size:13px; font-weight:600; }
.tl .s { font-size:12px; color:var(--ink-3); }

dialog.modal { width:min(560px,calc(100vw - 32px)); padding:0; border:1px solid var(--line); border-radius:var(--r-3); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-2); }
dialog.modal::backdrop { background:rgba(8,16,15,.45); backdrop-filter:blur(2px); }
dialog.modal .m-head { padding:16px 18px 0; }
dialog.modal h2 { margin:0 0 4px; font:600 16px/1.3 var(--display); }
dialog.modal .m-body { padding:12px 18px 4px; display:grid; gap:12px; }
dialog.modal .m-foot { display:flex; gap:8px; justify-content:flex-end; padding:16px 18px; }
dialog.wide { width:min(760px,calc(100vw - 32px)); }
.enrollment { display:grid; grid-template-columns:210px 1fr; gap:18px; align-items:center; }
.qr { padding:10px; border-radius:var(--r-2); background:#fff; line-height:0; margin:16px 0; }
.qr img, .qr svg { display:block; width:100%; height:auto; max-width:260px; }
.secret { display:block; padding:12px; border:1px dashed var(--line-strong); border-radius:var(--r-2); background:var(--surface-2);
  font:600 15px/1.5 var(--mono); overflow-wrap:anywhere; }
.token-big { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border:1px dashed var(--accent-line); border-radius:var(--r-2);
  background:var(--accent-soft); font:700 19px/1.3 var(--mono); letter-spacing:.06em; text-align:center; overflow-wrap:anywhere; }
.link-box { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px dashed var(--line-strong); border-radius:var(--r-2); background:var(--surface-2); font:500 12.5px/1.5 var(--mono); overflow-wrap:anywhere; }
.code-input { font:600 20px/1 var(--mono); letter-spacing:.22em; text-align:center; }
.steps { display:flex; gap:6px; margin:0 0 16px; }
.step { flex:1; padding:7px 9px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface-2); font-size:12px; color:var(--ink-3); }
.step.on { border-color:var(--accent-line); background:var(--accent-soft); color:var(--ink); font-weight:600; }
.step.done { color:var(--ok); }

.toasts { position:fixed; right:20px; bottom:20px; z-index:60; display:grid; gap:8px; justify-items:end; }
.toast { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--r-2); max-width:460px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-2); font-size:13px; animation:rise .18s ease; }
.toast .bar-i { width:3px; align-self:stretch; border-radius:99px; background:var(--accent); }
.toast.ok .bar-i { background:var(--ok); }
.toast.crit .bar-i { background:var(--crit); }
.toast button { border:0; background:none; cursor:pointer; color:var(--ink-3); margin-left:6px; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } }

/* ---------- Seiten ohne Anmeldung --------------------------------------- */

.auth-page { min-height:100vh; }
.auth-shell { display:grid; place-items:center; min-height:100vh; padding:28px 18px; }
.auth-card { width:min(460px,100%); padding:26px; }
.wide-auth { width:min(680px,100%); }
.auth-card h1 { margin:7px 0 6px; font:600 26px/1.2 var(--display); }
.auth-card h2 { font:600 14px/1.3 var(--display); margin:18px 0 8px; }
.auth-card p { margin:0 0 4px; }
.brand-lockup { display:flex; align-items:center; gap:9px; margin-bottom:22px; font-size:13px; color:var(--ink-3); }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.auth-eyebrow { margin-top:14px; }
.auth-card label { display:flex; flex-direction:column; gap:6px; color:var(--ink-2); font-size:12px; font-weight:600; margin:14px 0; }
.auth-card input { height:34px; padding:0 10px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--surface); color:var(--ink); font-weight:400; }
.auth-divider { display:flex; align-items:center; gap:10px; color:var(--ink-3); font-size:11px; margin:18px 0; }
.auth-divider::before, .auth-divider::after { content:""; height:1px; background:var(--line); flex:1; }
.privacy-note { margin-top:16px; padding:11px; color:var(--ink-3); background:var(--surface-2); border-radius:var(--r-2); font-size:12px; line-height:1.45; }
.auth-back, .back-link { display:inline-block; margin-top:16px; color:var(--ink-3); text-decoration:none; }
.center-card { text-align:center; }
.status-icon { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 15px; border-radius:14px; font-size:24px; font-weight:800; }
.status-icon.success { color:var(--accent-on); background:var(--accent); }
.status-icon.pending { color:#251806; background:var(--warn); }
.status-icon.danger { color:#fff; background:var(--crit); }
.session-id { margin-top:18px; font:11px var(--mono); }
.guest-form-fields { min-width:0; margin:0; padding:0; border:0; }
.guest-form-fields:disabled { opacity:.62; }
.retry-note { margin-top:7px; color:var(--ink); }

@media (prefers-reduced-motion: reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
@media (max-width:1180px) { .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-2, .split { grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px) {
  :root { --rail:64px; }
  .brand-text, .nav a span.lbl, .rail-label, .rail-foot a, .build, .operator span.n { display:none; }
  .nav a { justify-content:center; }
  main { padding:18px 16px 56px; }
  .bar { padding:0 16px; }
  .form-row, .actions-grid, .enrollment { grid-template-columns:1fr; }
}