:root{
  --night:#0c1428; --night-2:#080e1e; --night-panel:rgba(255,255,255,.045);
  --sand:#ece3cf; --sand-2:#f4ecd9; --cream:#f1e9d6;
  --ink:#2a2620; --ink-soft:#463f34; --muted-l:#6d6653;
  /* --faint-l war #9c927c = 2.55:1 auf Creme, unter WCAG AA.
     Gemessen abgedunkelt auf 4.49 (Creme) / 4.61 (sand-2).
     Derselbe warme Grauton, nur tragfaehig. */
  --faint-l:#736952;
  --muted-d:#a6acbb; --faint-d:#6a7286;
  --brass:#c39a58; --brass-soft:#d8b878; --copper:#b3794b; --terra:#c1674a; --terra-deep:#a1543b;
  --line-l:rgba(42,38,32,.16); --line-l-hi:rgba(42,38,32,.30);
  --line-d:rgba(241,233,214,.15); --line-d-hi:rgba(241,233,214,.28);
  /* --ok war #5f7a52 = 3.95:1 auf Creme. Das reicht nur fuer grosse
     Schrift, wird aber als Statusfarbe in 12.5px-Tabellen gesetzt. */
  --ok:#556e49; --ok-soft:#7d9a6d;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'SF Mono',ui-monospace,'JetBrains Mono',Menlo,monospace;

  /* Admin-view aliases: adminLayout.js/adminUsers.js/adminClients.js reference
     these short names inline (var(--line), var(--faint), var(--gold),
     var(--gold-soft), var(--gold-glow), var(--rose)) but they were never
     defined here — a pre-existing latent gap, not something introduced by
     the theme toggle. Defined as aliases onto the existing token set rather
     than rewriting every inline style in those views. --line/--faint default
     to the dark-context (-d) tokens since the admin shell currently renders
     on the dark .page background; the light-theme override block below
     remaps them again for the light admin theme.  */
  /* ---- Admin-Aliase ----
     STAND 04.08.2026: Der Admin-Bereich ist standardmaessig HELL.
     Vorher zeigten diese Aliase auf die Dark-Token, weil die Admin-
     Huelle auf dem dunklen .page-Grund lag. Das war die Ursache eines
     Lesbarkeitsfehlers: var(--ink) #2a2620 auf var(--night) #0c1428
     ergibt 1.22:1, praktisch unsichtbar. adminLayout.js setzt genau
     das fuer alle Navigationslinks; zwoelf Stellen in sieben Views.
     Der frueher hier stehende Hinweis, --ink liege auf hellem Grund,
     galt nur bei aktiv umgeschaltetem Theme, nicht im Standardfall.

     Werte gemessen auf --sand-2 #f4ecd9 gegen WCAG AA (4.5:1). Sie
     gelten NUR im Admin-Scope; Login und Konto bleiben unberuehrt.
     Dark behaelt eigene Werte weiter unten: ein Wert fuer beide
     Themes geht nicht, #8a6428 erreicht auf Creme 4.54, auf
     Nachtblau nur 3.43. */
  --line:var(--line-l); --faint:var(--faint-l);
  --gold:#8a6428;        /* 4.54 - Textfarbe, nicht Dekoration */
  --gold-soft:#8a6428;   /* wird als Linkfarbe gesetzt */
  --gold-glow:rgba(138,100,40,.12);
  --rose:#a84a62;        /* 4.67 */
  --teal:#3f6f62;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--night-2);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:var(--copper);text-decoration:none;}
a:hover{color:var(--terra-deep);}
button{font-family:inherit;cursor:pointer;}

/* ---------- page frame (server-rendered, one screen per page) ---------- */
.page{min-height:100vh;animation:fade .4s ease;background:var(--night);}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- split auth layout ---------- */
.split{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}
.brandside{background:var(--night);color:var(--cream);padding:52px 54px;display:flex;flex-direction:column;position:relative;overflow:hidden;border-right:1px solid var(--line-d);}
.brandside::after{content:'';position:absolute;right:-120px;top:-120px;width:360px;height:360px;border:1px solid var(--line-d-hi);border-radius:50%;opacity:.5;}
.brandside::before{content:'';position:absolute;right:-40px;bottom:-160px;width:300px;height:300px;border:1px solid var(--line-d);border-radius:50%;opacity:.4;}
.bs-top{display:flex;align-items:center;gap:13px;position:relative;z-index:2;}
.bs-logo{width:44px;height:auto;}
.bs-wordmark{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);line-height:1.8;}
.bs-wordmark b{color:var(--brass-soft);font-weight:600;}
.bs-mid{margin-top:auto;position:relative;z-index:2;}
.bs-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);}
.bs-line{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.14;letter-spacing:-.015em;margin-top:16px;color:var(--cream);max-width:15ch;}
.bs-line em{font-style:italic;color:var(--brass-soft);}
.bs-domains{margin-top:26px;position:relative;z-index:2;display:flex;flex-direction:column;gap:0;}
.bs-domains .dk{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint-d);margin-bottom:11px;}
.bs-domains ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;}
.bs-domains li{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--muted-d);border:1px solid var(--line-d);padding:5px 10px;border-radius:99px;}
.bs-domains li b{color:var(--brass-soft);font-weight:500;}
.bs-foot{margin-top:34px;font-size:11.5px;line-height:1.6;color:var(--faint-d);position:relative;z-index:2;max-width:34ch;}

.formside{background:var(--cream);display:flex;align-items:center;justify-content:center;padding:52px 40px;}
.card{width:100%;max-width:404px;}
.card.wide{max-width:452px;}

/* ---------- typography in forms ---------- */
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--copper);}
.h{font-family:var(--serif);font-weight:600;font-size:39px;line-height:1.04;letter-spacing:-.015em;color:var(--ink);margin:13px 0 0;}
.sub{font-size:13.5px;line-height:1.58;color:var(--muted-l);margin:13px 0 0;max-width:42ch;}
.sub b{color:var(--ink-soft);font-weight:600;}

/* ---------- fields ---------- */
.fields{margin-top:26px;display:flex;flex-direction:column;gap:15px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-l);}
.field .inp{position:relative;}
.field input{width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--sand-2);border:1px solid var(--line-l);border-radius:6px;padding:12px 13px;transition:border-color .16s,box-shadow .16s,background .16s;}
.field input::placeholder{color:var(--faint-l);}
.field input:focus{outline:0;border-color:var(--brass);background:#fff;box-shadow:0 0 0 3px rgba(195,154,88,.16);}
.field input.err{border-color:var(--terra);box-shadow:0 0 0 3px rgba(193,103,74,.14);}
.field .peek{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--faint-l);font-size:11px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;}
.field .peek:hover{color:var(--copper);}
.field .msg{font-size:11px;color:var(--terra-deep);min-height:0;display:none;}
.field.showerr .msg{display:block;}
.field.showerr input{border-color:var(--terra);}
.hint{font-size:11px;color:var(--faint-l);}

/* strength meter */
.strength{display:flex;gap:5px;margin-top:3px;}
.strength i{height:3px;flex:1;background:var(--line-l);border-radius:2px;transition:background .2s;}
.strength.s1 i:nth-child(1){background:var(--terra);}
.strength.s2 i:nth-child(-n+2){background:var(--copper);}
.strength.s3 i:nth-child(-n+3){background:var(--brass);}
.strength.s4 i{background:var(--ok);}

/* checkboxes */
.checks{margin-top:19px;display:flex;flex-direction:column;gap:12px;}
.chk{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--muted-l);cursor:pointer;}
.chk input{position:absolute;opacity:0;width:0;height:0;}
.chk .box{flex:none;width:18px;height:18px;border:1px solid var(--line-l-hi);border-radius:4px;background:var(--sand-2);display:flex;align-items:center;justify-content:center;margin-top:1px;transition:.16s;}
.chk .box svg{width:11px;height:11px;opacity:0;transform:scale(.6);transition:.16s;color:#fff;}
.chk input:checked+.box{background:var(--brass);border-color:var(--brass);}
.chk input:checked+.box svg{opacity:1;transform:none;}
.chk input:focus-visible+.box{box-shadow:0 0 0 3px rgba(195,154,88,.2);}
.chk b{color:var(--ink-soft);font-weight:600;}
.chk .opt-tag{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint-l);border:1px solid var(--line-l);border-radius:99px;padding:2px 6px;margin-left:6px;}

/* ---------- buttons ---------- */
.actions{margin-top:24px;display:flex;flex-direction:column;gap:10px;}
.btn{width:100%;font-size:13.5px;letter-spacing:.02em;font-weight:600;border-radius:7px;padding:13px 18px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .15s,background .15s,box-shadow .15s,border-color .15s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--night);color:var(--cream);border-color:var(--night);}
.btn-primary:hover{background:var(--night-2);box-shadow:0 8px 22px -10px rgba(12,20,40,.7);}
.btn-gold{background:var(--brass);color:var(--night);border-color:var(--brass);}
.btn-gold:hover{background:var(--brass-soft);box-shadow:0 8px 22px -10px rgba(195,154,88,.7);}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:var(--line-l-hi);}
.btn-ghost:hover{border-color:var(--ink-soft);background:rgba(42,38,32,.04);}
.btn-danger{background:transparent;color:var(--terra-deep);border-color:rgba(193,103,74,.4);}
.btn-danger:hover{background:rgba(193,103,74,.08);border-color:var(--terra-deep);}
.btn .arw{transition:transform .18s;}
.btn:hover .arw{transform:translateX(3px);}

.divider{display:flex;align-items:center;gap:14px;margin:20px 0 0;color:var(--faint-l);font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;}
.divider::before,.divider::after{content:'';height:1px;flex:1;background:var(--line-l);}

.linkrow{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-l);display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--muted-l);}
.linkrow a{font-weight:500;}
.linkrow .sep{color:var(--line-l-hi);}

/* ---------- centered stateful screens (magic sent, verify, success, error) ---------- */
.state{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 32px;background:var(--night);color:var(--cream);position:relative;}
.state .topbar{position:absolute;top:0;left:0;right:0;padding:26px 34px;display:flex;align-items:center;gap:12px;}
.state .topbar .bs-logo{width:38px;}
.state-inner{max-width:440px;position:relative;z-index:2;}
.orb{width:76px;height:76px;border-radius:50%;margin:0 auto 26px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-d-hi);background:var(--night-panel);color:var(--brass-soft);}
.orb svg{width:34px;height:34px;}
.orb.ok{color:var(--ok-soft);border-color:rgba(125,154,109,.4);}
.orb.warn{color:var(--terra);border-color:rgba(193,103,74,.4);}
.state .eyebrow{color:var(--brass);}
.state .h{color:var(--cream);}
.state .sub{color:var(--muted-d);margin-left:auto;margin-right:auto;}
.state .sub b{color:var(--cream);}
.state .actions{max-width:320px;margin-left:auto;margin-right:auto;}
.state .btn-ghost{color:var(--cream);border-color:var(--line-d-hi);}
.state .btn-ghost:hover{border-color:var(--cream);background:var(--night-panel);}
.state .linkrow{border-top-color:var(--line-d);color:var(--muted-d);justify-content:center;}
.emailpill{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--brass-soft);border:1px solid var(--line-d);border-radius:99px;padding:6px 14px;margin-top:18px;}
.resend{margin-top:20px;font-size:12px;color:var(--faint-d);}
.resend a{color:var(--brass-soft);}

/* code input */
.codebox{display:flex;gap:9px;justify-content:center;margin-top:26px;}
.codebox input{width:48px;height:56px;text-align:center;font-family:var(--serif);font-size:26px;color:var(--cream);background:var(--night-panel);border:1px solid var(--line-d-hi);border-radius:8px;}
.codebox input:focus{outline:0;border-color:var(--brass);box-shadow:0 0 0 3px rgba(195,154,88,.18);}

/* ---------- consent ---------- */
.consent-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:52px 32px;background:var(--night);}
.consent{width:100%;max-width:520px;background:var(--cream);border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);}
.consent-h{background:var(--night);color:var(--cream);padding:26px 30px;}
.consent-h .eyebrow{color:var(--brass);}
.consent-h .ct{font-family:var(--serif);font-size:26px;line-height:1.14;margin-top:11px;color:var(--cream);}
.consent-h .ct b{color:var(--brass-soft);font-weight:600;}
.flow{display:flex;align-items:stretch;gap:0;padding:22px 30px 4px;}
.flow .node{flex:1;text-align:center;padding:14px 10px;border:1px solid var(--line-l);border-radius:9px;background:var(--sand-2);}
.flow .node .nk{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint-l);}
.flow .node .nn{font-family:var(--serif);font-size:18px;color:var(--ink);margin-top:5px;}
.flow .node .nd{font-size:10px;color:var(--muted-l);margin-top:3px;}
.flow .arrowc{display:flex;align-items:center;padding:0 10px;color:var(--copper);}
.flow .arrowc svg{width:22px;height:22px;}
.consent-body{padding:16px 30px 4px;}
.dk-h{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);margin:16px 0 10px;}
.data-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.data-list li{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--muted-l);}
.data-list li svg{width:15px;height:15px;flex:none;color:var(--brass);margin-top:2px;}
.data-list li b{color:var(--ink);font-weight:600;}
.purpose{margin:16px 0 0;padding:13px 15px;background:var(--sand-2);border-left:3px solid var(--brass);border-radius:0 6px 6px 0;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
.revoke{display:flex;gap:9px;align-items:center;margin:15px 0 0;font-size:11.5px;color:var(--muted-l);}
.revoke svg{width:14px;height:14px;color:var(--ok);flex:none;}
.consent-foot{padding:20px 30px 26px;display:flex;gap:11px;}
.consent-foot .btn{flex:1;}

/* ---------- account overview ---------- */
.acct{min-height:100vh;background:var(--sand);}
.acct-top{background:var(--night);color:var(--cream);}
.acct-nav{max-width:920px;margin:0 auto;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;}
.acct-nav .brand{display:flex;align-items:center;gap:12px;}
.acct-nav .brand img{width:36px;}
.acct-nav .brand .wm{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);line-height:1.7;}
.acct-nav .brand .wm b{color:var(--brass-soft);}
.acct-nav .out{font-size:12.5px;color:var(--muted-d);display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line-d-hi);border-radius:99px;padding:8px 15px;background:none;transition:.16s;}
.acct-nav .out:hover{color:var(--cream);border-color:var(--cream);}
.acct-hero{max-width:920px;margin:0 auto;padding:8px 32px 40px;}
.acct-hero .eyebrow{color:var(--brass);}
.acct-hero .ah{font-family:var(--serif);font-size:40px;color:var(--cream);margin-top:12px;letter-spacing:-.015em;}
.acct-hero .aid{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:13px;color:var(--muted-d);}
.acct-hero .aid b{color:var(--cream);font-weight:600;}
.acct-hero .aid .verified{display:inline-flex;align-items:center;gap:6px;color:var(--ok-soft);}
.acct-hero .aid .verified svg{width:14px;height:14px;}

.acct-body{max-width:920px;margin:-24px auto 0;padding:0 32px 64px;}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.panel{background:var(--cream);border:1px solid var(--line-l);border-radius:12px;padding:22px 24px;}
.panel.full{grid-column:1 / -1;}
.panel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.panel-h .pt{font-family:var(--serif);font-size:21px;color:var(--ink);}
.panel-h .pe{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);}
.rows{display:flex;flex-direction:column;gap:0;}
.rw{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-top:1px solid var(--line-l);font-size:13px;}
.rw:first-child{border-top:0;}
.rw .rk{color:var(--muted-l);}
.rw .rv{color:var(--ink);font-weight:500;text-align:right;}
.rw .edit{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--copper);background:none;border:0;}
.rw .edit:hover{color:var(--terra-deep);}
.session{display:flex;gap:13px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line-l);}
.session:first-child{border-top:0;}
.session .sdot{width:8px;height:8px;border-radius:50%;background:var(--ok);margin-top:5px;flex:none;box-shadow:0 0 0 3px rgba(95,122,82,.18);}
.session .sinfo{flex:1;font-size:12.5px;}
.session .sinfo .sd{color:var(--ink);font-weight:600;}
.session .sinfo .sm{color:var(--faint-l);font-size:11px;margin-top:2px;}
.session .scur{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);border:1px solid rgba(95,122,82,.35);border-radius:99px;padding:3px 8px;}
.session .srev{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint-l);background:none;border:0;}
.session .srev:hover{color:var(--terra-deep);}

.areas{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.area{display:flex;gap:13px;align-items:center;padding:15px 16px;border:1px solid var(--line-l);border-radius:10px;background:var(--sand-2);transition:.16s;}
.area.live{cursor:pointer;}
.area.live:hover{border-color:var(--brass);background:#fff;transform:translateY(-1px);}
.area .dot{width:34px;height:34px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:17px;color:var(--cream);}
.area .ai{flex:1;min-width:0;}
.area .ai .an{font-size:13.5px;font-weight:600;color:var(--ink);}
.area .ai .as{font-size:11.5px;color:var(--muted-l);margin-top:1px;}
.area .go{color:var(--copper);flex:none;}
.area .go svg{width:16px;height:16px;}
.area.soon{opacity:.72;}
.area.soon .dot{background:var(--faint-l)!important;}
.area.soon .soon-tag{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint-l);border:1px solid var(--line-l);border-radius:99px;padding:3px 8px;flex:none;}

/* ---------- logout confirm ---------- */
.confirm-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:52px 32px;background:var(--night);}
.confirm{width:100%;max-width:400px;background:var(--cream);border-radius:14px;padding:34px 32px 28px;text-align:center;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);}
.confirm .orb{border-color:var(--line-l-hi);background:var(--sand-2);color:var(--copper);}
.confirm .h{font-size:28px;}
.confirm .sub{margin:12px auto 0;}
.confirm .actions{margin-top:24px;}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .split{grid-template-columns:1fr;}
  .brandside{padding:34px 26px 30px;min-height:auto;border-right:0;border-bottom:1px solid var(--line-d);}
  .brandside::after,.brandside::before{display:none;}
  .bs-mid{margin-top:24px;}
  .bs-line{font-size:26px;}
  .bs-domains{margin-top:18px;}
  .bs-foot{display:none;}
  .formside{padding:34px 24px 48px;}
  .h{font-size:31px;}
  .panel-grid,.areas{grid-template-columns:1fr;}
  .acct-hero .ah{font-size:30px;}
  .flow{flex-direction:column;gap:10px;}
  .flow .arrowc{transform:rotate(90deg);padding:0;}
  .consent-foot{flex-direction:column;}
}

/* ---------- admin area: manual light/dark theme ---------- */
/* Scoped strictly to html[data-admin-theme="light"], set only by the
   inline no-flash script in layout.js's page() when opts.themed is true
   (adminShell() only). Non-admin pages never receive the data-admin-theme
   attribute, so this block has zero effect on login/register/account/
   consent pages.

   Approach: redefine the *dark* tokens themselves (--night, --night-2,
   --line-d, --faint-d) to point at the light-token values, scoped under the
   html[data-admin-theme="light"] selector. Everything in the admin views
   that already reads var(--night)/var(--night-2)/.page{background} or the
   --line/--faint aliases above (which resolve to --line-d/--faint-d)
   flips automatically — no per-rule rewriting needed.

   --ink is deliberately NOT remapped: it is already a light-appropriate
   text color (dark ink, #2a2620) used for text-on-light contexts (nav
   links, table cells, headings) throughout the admin views. It reads
   correctly once the background it sits on (.page) is light — remapping it
   would be wrong, not corrective. --cream is not remapped either: nothing
   in the admin view inline styles reads --cream directly.

   Contrast check (light scope):
   - .page background -> --cream (#f1e9d6) with --ink (#2a2620) text: ~11:1,
     comfortably AA/AAA for body text.
   - --line -> --line-l (rgba(42,38,32,.16)): a dark hairline on a cream
     background, matches how --line-l is already used for borders in the
     .panel/.field light-mode UI elsewhere in this file.
   - --faint -> --faint-l (#9c927c): a warm grey on cream, same pairing
     already used for .hint/.sub text in the light-mode auth forms.
   - --gold-glow banner background (translucent brass overlay) and the
     error color (--rose) are unaffected by this remap and remain readable
     on both the cream and navy backgrounds since they carry their own
     alpha/contrast independent of the night/cream swap. */
/* ---- Admin-Bereich: HELL ist der Standard (04.08.2026) ----
   Umgedreht gegenueber dem vorherigen Stand. Grund siehe Alias-Block:
   im Dark-Standard lagen zwoelf Textstellen bei 1.22:1.

   data-admin-page setzt der Server auf <html>, wenn eine Admin-Seite
   gerendert wird. Nur dann greift dieser Block. Login und Konto
   behalten ihr dunkles Erscheinungsbild unveraendert. */
html[data-admin-page]{
  --night:var(--cream);
  --night-2:var(--sand-2);
  --line-d:var(--line-l);
  --line-d-hi:var(--line-l-hi);
  --faint-d:var(--faint-l);
  --muted-d:var(--muted-l);
}

/* ---- Admin-Bereich: DARK als gleichwertige Wahl ----
   Greift nur, wenn die Person aktiv umgeschaltet hat. Die Akzente
   brauchen hier eigene Werte: die auf Creme gemessenen Toene
   erreichen auf Nachtblau nur rund 3.4 und waeren erneut zu
   schwach. --ink auf --cream ist der Kernfix. */
html[data-admin-page][data-admin-theme="dark"]{
  --night:#0c1428;
  --night-2:#080e1e;
  --line-d:rgba(241,233,214,.15);
  --line-d-hi:rgba(241,233,214,.28);
  --faint-d:#8d95a6;     /* 5.6 - #6a7286 waren 3.81 */
  --muted-d:#a6acbb;     /* 8.06, unveraendert */
  --line:rgba(241,233,214,.15);
  --faint:#8d95a6;
  --ink:var(--cream);    /* Text auf Nacht ist Creme, nicht Tinte */
  --gold:#c39a58;        /* 7.05 */
  --gold-soft:#d8b878;
  --gold-glow:rgba(195,154,88,.16);
  --rose:#e08a9e;
  --teal:#7fbfae;
  --ok:#8fb07d;
}

/* Toggle button: show only the icon for the theme you'd switch TO. Default
   (dark, no attribute) shows the sun (switch to light); light theme shows
   the moon (switch to dark). Mirrors the show/hide-by-attribute pattern
   .peek/.strength already use elsewhere in this file. */
[data-theme-toggle]{position:relative;min-width:44px;min-height:44px;}
[data-theme-toggle] .theme-ico{width:16px;height:16px;}
/* Gezeigt wird das Symbol des Themes, zu dem der Klick fuehrt.
   Standard ist jetzt hell, also steht dort der Mond. */
[data-theme-toggle] .theme-ico-sun{display:none;}
[data-theme-toggle] .theme-ico-moon{display:block;}
html[data-admin-theme="dark"] [data-theme-toggle] .theme-ico-sun{display:block;}
html[data-admin-theme="dark"] [data-theme-toggle] .theme-ico-moon{display:none;}
[data-theme-toggle]:hover{border-color:var(--brass)!important;}


/* ═══════════════════════════════════════════════════════════════════
   ADMIN-RAHMEN · Sidebar, Topbar, Massraster, Mono-Ebene
   Stand 04.08.2026 · Grundlage: admin.css aus dem Design-Handoff

   Uebernommene Masse: Sidebar 236px, .wrap 1400px, Sidebar ab 1024px
   fixiert mit Burger, Content ab 820px verdichtet.

   EINE ABWEICHUNG: der Handoff setzt Topbar-Elemente auf 34px. Die
   Vorgabe verlangt mindestens 44px fuer alles Interaktive - das gewinnt.
   Die Topbar ist deshalb 60px hoch statt 56px.

   Farben ausschliesslich aus dem Token-Satz oben: der ist gegen WCAG AA
   in beiden Themes gemessen. Ein zweiter Farbsatz waere ein zweites
   Design-System.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --adm-nav-w: 236px;
  --adm-top-h: 60px;      /* 44px Element + 2x8px Luft */
  --adm-tap: 44px;        /* Mindestmass fuer alles Anklickbare */
}

/* ---- Huelle: Sidebar fest, Inhalt nimmt den Rest ---- */
.adm-shell{min-height:100vh;display:flex;background:var(--night-2);}
.adm-main{flex:1;min-width:0;display:flex;flex-direction:column;}

/* ---- Sidebar: die EINZIGE Hauptnavigation ----
   Sie tragt dunkle Flaeche auch im hellen Theme: eine Navigationsspalte,
   die sich vom Inhalt abhebt, laesst den Inhalt Inhalt sein. Die Werte
   sind gegen #14202f gemessen, nicht geraten. */
.adm-nav{
  width:var(--adm-nav-w);flex:none;
  background:#14202f;color:#f1e9d6;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(241,233,214,.14);
}
.adm-nav-h{
  display:flex;gap:11px;align-items:center;
  padding:16px 18px 14px;
  border-bottom:1px solid rgba(241,233,214,.14);
}
.adm-nav-h img{width:30px;height:30px;flex:none;}
.adm-nav-wm{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#a6acbb;line-height:1.75;
}
.adm-nav-wm b{color:#d8b878;font-weight:600;}
.adm-nav-wm span{display:block;color:#8d95a6;letter-spacing:.22em;}

.adm-nav-list{flex:1;overflow-y:auto;padding:12px 10px 20px;}
.adm-grp{
  font-family:var(--mono);font-size:8px;letter-spacing:.2em;
  text-transform:uppercase;color:#8d95a6;padding:14px 10px 7px;
}
.adm-grp:first-child{padding-top:4px;}

/* Nav-Link: volle Klickflaeche, nicht nur der Text. 44px Mindesthoehe
   heisst auch, dass die Zeile so hoch IST - ein 12px-Text mit 44px
   Klickfeld daneben waere ein Ziel, das man nicht sieht. */
.adm-nav-i{
  display:flex;gap:9px;align-items:center;
  width:100%;min-height:var(--adm-tap);
  padding:7px 10px;box-sizing:border-box;
  text-align:left;background:none;border:0;border-radius:var(--r-sm);
  color:#c8ccd6;font-size:13px;text-decoration:none;
  transition:background .15s,color .15s;
}
.adm-nav-i:hover{background:rgba(241,233,214,.06);color:#f1e9d6;text-decoration:none;}
.adm-nav-i.is-on{background:rgba(216,184,120,.14);color:#e8ce97;}
.adm-nav-i:focus-visible{outline:2px solid #d8b878;outline-offset:-2px;}

/* Zaehler. Erscheint NUR, wo es eine Datengrundlage gibt - eine Null an
   einem Bereich ohne Antragsweg behauptet einen ueberwachten Eingang. */
.adm-nav-i .adm-ct{
  margin-left:auto;flex:none;
  font-family:var(--mono);font-size:9.5px;
  color:#c8ccd6;background:rgba(241,233,214,.08);
  border-radius:9px;padding:2px 7px;min-width:22px;text-align:center;
}
.adm-nav-i .adm-ct.is-hi{background:rgba(216,184,120,.22);color:#e8ce97;}

.adm-nav-f{
  padding:11px 18px;border-top:1px solid rgba(241,233,214,.14);
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:#8d95a6;
  display:flex;justify-content:space-between;gap:8px;
}
.adm-nav-f a{color:#a6acbb;}

/* ---- Topbar: KEINE zweite Hauptnavigation ----
   Sie tragt nur Suche, Rollenansicht, Theme und wer angemeldet ist.
   gap ist hier gesetzt und nicht als margin-right pro Element: bei
   Umbruch bleibt der Abstand dann erhalten - genau das war vorher der
   Fehler ("Uebersicht" und "Nutzer" klebten aneinander). */
.adm-top{
  min-height:var(--adm-top-h);flex:none;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 20px;
  background:var(--panel);border-bottom:1px solid var(--line);
}
.adm-burger{
  display:none;
  width:var(--adm-tap);height:var(--adm-tap);flex:none;
  align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:none;color:var(--muted);
}
.adm-burger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;}

.adm-search{flex:1;min-width:180px;max-width:420px;position:relative;}
.adm-search input{
  width:100%;height:var(--adm-tap);
  padding:0 12px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);color:var(--ink);font-size:13.5px;
}
.adm-search input::placeholder{color:var(--faint);}
.adm-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow);}

.adm-top-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* Jedes interaktive Element der Topbar auf Mindestmass, alle auf
   dieselbe Hoehe - sonst steht die Reihe nicht auf einer Linie. */
.adm-top .adm-iconbtn,
.adm-top [data-theme-toggle],
.adm-top .adm-rolepick{
  height:var(--adm-tap);min-height:var(--adm-tap);
  box-sizing:border-box;
}
.adm-iconbtn{
  width:var(--adm-tap);flex:none;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);color:var(--muted);
}
.adm-iconbtn:hover{border-color:var(--line-hi);color:var(--ink);}
.adm-iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;}

.adm-rolepick{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 10px;background:var(--bg);
}
.adm-rolepick label{
  font-family:var(--mono);font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
.adm-rolepick select{border:0;background:none;font-size:13px;font-weight:500;outline:none;color:var(--ink);}

/* Wer angemeldet ist. Der Trennstrich sitzt am Element, nicht als
   eigenes Kaestchen - sonst kollidiert er beim Umbruch. */
.adm-whoami{
  display:flex;align-items:center;gap:8px;
  min-height:var(--adm-tap);
  padding-left:12px;border-left:1px solid var(--line);
}
.adm-whoami .adm-av{
  width:30px;height:30px;flex:none;border-radius:50%;
  background:var(--gold-glow);color:var(--gold);
  display:grid;place-items:center;
  font-size:11px;font-weight:600;
}
.adm-whoami .adm-nm{font-size:12.5px;line-height:1.3;min-width:0;}
.adm-whoami .adm-nm b{display:block;font-weight:500;}
.adm-whoami .adm-nm span{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
  display:block;overflow:hidden;text-overflow:ellipsis;
}

/* ---- Massraster ----
   max-width 960px ist raus. 1400px aus dem Handoff: dichte Tabellen
   brauchen Breite, und rechts zwei Drittel leer zu lassen war der
   eigentliche Fehler. */
.adm-scroll{flex:1;background:var(--bg);}
.adm-wrap{max-width:1400px;margin:0 auto;padding:22px 24px 64px;}

/* ---- Mono-Ebene ----
   Gezielt fuer Maschinenlesbares: IDs, Zeitstempel, Statuswerte, Routen,
   Audit-Referenzen. NICHT fuer Fliesstext - Mono liest sich in Absaetzen
   schlechter und nimmt der Auszeichnung ihre Bedeutung.
   tabular-nums, damit Ziffern in Spalten untereinander stehen. */
.adm-mono,
.adm-id,.adm-ts,.adm-status,.adm-route,.adm-ref{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:11.5px;letter-spacing:.01em;
}
.adm-id,.adm-ref{color:var(--muted);}
.adm-ts{color:var(--faint);}
.adm-route{
  color:var(--muted);background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:2px 7px;
}
.adm-status{
  text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;
  color:var(--muted);
}

/* ---- Responsive ---- */

/* Tablet: die Sidebar wird zur Schublade. Der Burger erscheint - und ist
   das einzige Element, das dann Hauptnavigation oeffnet. */
@media (max-width:1024px){
  .adm-nav{
    position:fixed;inset:0 auto 0 0;z-index:50;
    box-shadow:0 26px 50px -30px rgba(28,27,36,.5);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  /* [hidden] wuerde die Schublade aus dem Layout nehmen und damit die
     Animation verhindern - deshalb display wiederherstellen UND per
     transform hinausschieben. Der Selektor braucht dieselbe Spezifitaet
     wie .adm-nav darueber, sonst gewinnt display:flex aus der Basisregel
     und die Schublade steht offen: genau das ist beim ersten Versuch
     passiert, gemessen als transform=matrix(1,0,0,1,0,0) bei left:0.
     visibility:hidden nimmt sie zusaetzlich aus der Tab-Reihenfolge -
     ein Fokus in einer unsichtbaren Navigation ist eine Falle. */
  /* Reihenfolge ist hier entscheidend: beide Selektoren haben dieselbe
     Spezifitaet, also gewinnt der spaetere. Der OFFENE Zustand muss
     deshalb ZULETZT stehen - stand er davor, blieb die Schublade auch
     nach dem Entfernen von [hidden] draussen (gemessen: transform blieb
     bei -236px, sichtbar:false).
     visibility nimmt die geschlossene Schublade aus der Tab-Reihenfolge;
     ein Fokus in unsichtbarer Navigation ist eine Falle. */
  .adm-nav[hidden]{
    display:flex;
    transform:translateX(calc(var(--adm-nav-w) * -1));
    visibility:hidden;
  }
  .adm-nav:not([hidden]){
    transform:translateX(0);
    visibility:visible;
  }
  .adm-burger{display:flex;}
  .adm-scrim{
    position:fixed;inset:0;z-index:40;
    background:rgba(28,27,36,.4);border:0;
  }
}

@media (max-width:820px){
  .adm-wrap{padding:18px 16px 56px;}
  .adm-search{max-width:none;order:3;flex-basis:100%;}
  .adm-whoami .adm-nm{display:none;}
}

@media (max-width:640px){
  .adm-rolepick label{display:none;}
  .adm-whoami{padding-left:8px;}
}

@media print{
  .adm-nav,.adm-top,.adm-scrim{display:none;}
  .adm-scroll{overflow:visible;}
}

/* Nur fuer Screenreader. Das Suchfeld braucht ein Label, aber keines,
   das die Topbar-Reihe verbreitert. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}