/* ============================================================
     Tokens, Module, Abstaende 1:1 aus dem SSR-Cockpit-Designsystem
     (lab/zahlungs-cockpit.html). Uebernommen, nicht genaehert.
     ============================================================ */
  :root{
    --lime:#CFDD28;--lime-ink:#171819;--amber:#E6B95A;--amber-strong:#c9902a;--red:#E7705E;--red-strong:#c74a38;
    --blue:#6ba3ea;--teal:#5cc8b6;
    --ink:#F4F4F1;--mut:#a8aaa7;--faint:#8D8F91;--bg:#0A0B0C;--card:#17181B;--card2:#1D1F22;--panel:#242629;--rail:#0A0B0C;
    --gray:#5f6165;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.15);
    --grid:rgba(255,255,255,.06);--track:rgba(255,255,255,.07);--shadow:0 24px 60px -30px rgba(0,0,0,.85);
    --redwash:rgba(231,112,94,.10);--limewash:rgba(207,221,40,.12);--bluewash:rgba(107,163,234,.12);
    --lime-text:#CFDD28;
    --blue-ink:#6BA3EA;--amber-ink:#E6B95A;--red-ink:#E7705E
  }
  html[data-theme="light"]{
    --ink:#161719;--mut:#5b5f63;--faint:#63666A;--bg:#E9EBE1;--card:#FFFFFF;--card2:#FBFCF6;--panel:#F2F4E8;--rail:#E9EBE1;
    --red:#c74a38;--red-strong:#a63322;--blue:#3a72c0;--teal:#2f9b86;--gray:#a9abae;--line:rgba(20,22,20,.11);--line2:rgba(20,22,20,.18);
    --grid:rgba(20,22,20,.08);--track:rgba(20,22,20,.08);--amber-strong:#9c6a15;--shadow:0 24px 60px -34px rgba(30,40,15,.30);
    --redwash:rgba(199,74,56,.08);--limewash:rgba(160,180,20,.14);--bluewash:rgba(58,114,192,.10);
    --lime-text:#5c6410;
    --blue-ink:#2F62A8;--amber-ink:#7F5C13;--red-ink:#A93E2E
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;transition:background .3s,color .3s}
  svg{overflow:visible}
  /* Scrollen aktiv, Balken unsichtbar (BBE-STD-SCROLL-001) */
  *{scrollbar-width:none;-ms-overflow-style:none}*::-webkit-scrollbar{width:0;height:0;display:none}
  /* Einklappen wie auf der Fernwartungsseite gemessen: Spaltenbreite animiert,
     .26s cubic-bezier(.22,.61,.36,1) — das ist das Gleiten, nicht ein Ein/Aus. */
  .app{display:grid;grid-template-columns:262px 1fr;min-height:100vh;
    transition:grid-template-columns .26s cubic-bezier(.22,.61,.36,1)}
  body.rail-collapsed .app{grid-template-columns:78px 1fr}
  @media(max-width:960px){.app,body.rail-collapsed .app{grid-template-columns:66px 1fr}}
  @media(prefers-reduced-motion:reduce){.app{transition:none}}

  .rail{background:var(--rail);padding:1.1rem .8rem;display:flex;flex-direction:column;gap:.3rem;position:sticky;top:0;height:100vh;z-index:40}
  /* Nur die SSR-Wortmarke, themenabhaengig — dieselben Bilddaten wie auf der
     Fernwartungsseite. Klick klappt die Navigation ein und aus. */
  .brand{display:flex;align-items:center;padding:.15rem .6rem 1.1rem;margin-bottom:.5rem}
  .brand .mk{display:inline-flex;flex:none;background:none;border:0;padding:.2rem;margin:-.2rem;cursor:pointer;border-radius:10px;transition:background .15s}
  .brand .mk:hover{background:var(--panel)}
  .brand .mk img{height:26px;width:auto;max-width:180px;display:block;transition:max-width .26s cubic-bezier(.22,.61,.36,1)}
  .brand .mk .lw{display:none}
  html[data-theme="dark"] .brand .mk .ld{display:none}
  html[data-theme="dark"] .brand .mk .lw{display:block}
  body.rail-collapsed .brand{justify-content:center;padding:.15rem 0 1.1rem}
  body.rail-collapsed .brand .mk img{max-width:42px;object-fit:cover;object-position:left}
  @media(max-width:960px){
    .brand,body.rail-collapsed .brand{padding:.15rem 0 1.1rem;justify-content:center}
    .brand .mk img{height:22px;max-width:40px;object-fit:cover;object-position:left}
  }
  /* Die Navigation traegt den freien Platz und scrollt notfalls selbst — sonst
     drueckt eine lange Liste den Konto-Bereich aus der Spalte. Stand im
     Haus-Cockpit so drin und war beim Uebernehmen verlorengegangen. */
  .nav{display:flex;flex-direction:column;gap:.12rem;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
  .nav a{display:flex;align-items:center;gap:.7rem;padding:.52rem .72rem;border-radius:11px;color:var(--mut);font-weight:500;font-size:.81rem;text-decoration:none;transition:all .18s;cursor:pointer;position:relative;min-width:0}
  .nav a .svgi{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .nav a .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav a:hover{background:var(--panel);color:var(--ink)}
  .nav a.on{background:var(--panel);color:var(--ink)}
  .nav a.on .svgi{color:var(--lime)}
  .nav a .badge{margin-left:auto;font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:800;font-size:.66rem;background:var(--redwash);color:var(--red-ink);border-radius:999px;padding:.05rem .42rem;min-width:20px;text-align:center}
  @media(max-width:960px){.nav a .lbl{display:none}.nav a{justify-content:center;padding:.6rem}.nav a .badge{position:absolute;top:.2rem;right:.2rem;margin:0}}
  body.rail-collapsed .nav a .lbl{display:none}
  body.rail-collapsed .nav a{justify-content:center;padding:.6rem}
  body.rail-collapsed .nav a .badge{position:absolute;top:.15rem;right:.15rem;margin:0}
  /* Gruppen-Header + flache EINZEILIGE Links (Cockpit-Nav-Muster) */
  .grp{display:flex;flex-direction:column}
  .grp-h{display:flex;align-items:center;gap:.55rem;width:100%;padding:.5rem .6rem;border:0;border-radius:9px;background:transparent;cursor:pointer;color:var(--mut);font-family:inherit;font-size:.82rem;font-weight:800;letter-spacing:.02em;text-align:left;transition:color .15s,background .15s}
  .grp-h:hover{background:var(--panel);color:var(--ink)}
  .grp-h .gi{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
  .grp-h .gl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .grp-h .gc{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s}
  .grp:not(.open) .grp-h .gc{transform:rotate(-90deg)}
  .grp.open .grp-h .gi{color:var(--lime)}
  .grp-b{display:none;flex-direction:column;gap:.12rem;padding-top:.1rem;margin-left:.62rem;padding-left:.4rem}
  .grp.open .grp-b{display:flex}
  @media(max-width:960px){.grp-b{margin-left:0;padding-left:0}.grp-h .gl,.grp-h .gc{display:none}.grp-h{justify-content:center}}
  body.rail-collapsed .grp-b{margin-left:0;padding-left:0}
  body.rail-collapsed .grp-h .gl,body.rail-collapsed .grp-h .gc{display:none}
  body.rail-collapsed .grp-h{justify-content:center}

  /* Konto-Bereich unten — Muster 1:1 von der Fernwartungsseite abgenommen:
     Aufklapp NACH OBEN, Kartenflaeche r14 mit Schatten, Kopfzeile
     "Angemeldet - <name>", Eintraege r9, Abmelden in Rot. */
  .railfoot{margin-top:auto;padding-top:.6rem}
  .acct{position:relative}
  .acctbtn{display:flex;align-items:center;gap:.6rem;width:100%;padding:.4rem .5rem;border-radius:12px;border:1px solid transparent;background:transparent;cursor:pointer;text-align:left;font-family:inherit;transition:border-color .15s,background .15s}
  .acctbtn:hover{background:var(--panel);border-color:var(--line)}
  .acct.open .acctbtn{background:var(--panel);border-color:var(--lime)}
  .acctbtn .ava{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--lime);color:var(--lime-ink);font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:900;font-size:.8rem}
  .acctbtn .ava.leer{background:var(--track);color:var(--mut)}
  .acctbtn .ava svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
  .acctbtn .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:.02rem;overflow:hidden}
  .acctbtn .who b{font-size:.8rem;font-weight:800;color:var(--ink);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .acctbtn .who span{font-size:.67rem;font-weight:600;color:var(--mut);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .acctbtn .chev{width:14px;height:14px;flex:none;color:var(--faint);fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .15s}
  .acct.open .acctbtn .chev{transform:rotate(180deg)}
  .acct-menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:var(--card);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);padding:.375rem;display:none;z-index:85}
  .acct.open .acct-menu{display:block}
  .acct-menu .amh{font-size:.63rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:.5rem .6rem .4rem;line-height:1.35;overflow-wrap:anywhere}
  .acct-menu .mi{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:transparent;border:0;border-radius:9px;padding:.62rem .7rem;cursor:pointer;color:var(--ink);font-family:inherit;font-size:.83rem;font-weight:500;line-height:1.2}
  .acct-menu .mi:hover{background:var(--panel)}
  .acct-menu .mi svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;color:var(--mut)}
  .acct-menu .mi:hover svg{color:var(--ink)}
  .acct-menu .mi.danger{color:var(--red-ink)}
  .acct-menu .mi.danger svg{color:var(--red-ink)}
  /* Die Trennlinie haengt am Eintrag, nicht frei im Menue. Wird der Eintrag
     ausgeblendet, geht die Linie mit. Ein Strich ohne etwas darunter ist ein
     Fehler, kein Design — das Haus-System kennt genau deshalb keinen freien
     Trenner, sondern nur border-top am Folgeabschnitt (.amc). */
  .acct-menu .mi.abschnitt{border-top:1px solid var(--line);margin-top:.3rem;padding-top:.68rem;border-radius:0 0 9px 9px}
  body.rail-collapsed .acctbtn .who,body.rail-collapsed .acctbtn .chev{display:none}
  body.rail-collapsed .acctbtn{justify-content:center}
  /* Eingeklappt ist die Spalte 78px breit — ein 240px-Menue darin steht halb
     im Nichts. Es fliegt daneben auf, wie im Haus-Cockpit. */
  body.rail-collapsed .acct-menu{left:calc(100% + 6px);right:auto;bottom:0;width:252px}
  @media(max-width:960px){
    .acctbtn .who,.acctbtn .chev{display:none}.acctbtn{justify-content:center}
    .acct-menu{left:calc(100% + 6px);right:auto;bottom:0;width:min(252px,calc(100vw - 84px))}
  }

  .main{min-width:0}
  .topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);padding:.8rem clamp(1rem,2.6vw,2.2rem);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
  .co .cn{font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:900;font-size:1.05rem;letter-spacing:-.01em}
  .co .cs{font-size:.72rem;color:var(--mut);font-weight:600}
  .spacer{flex:1}
  .livepill{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:700;color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:.32rem .8rem}
  .livepill .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:pulse 2s infinite}
  .livepill.bad .dot{background:var(--red);animation:none}
  @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lime) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
  @media(prefers-reduced-motion:reduce){.livepill .dot{animation:none}}
  .demopill{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;color:var(--amber-ink);background:color-mix(in srgb,var(--amber) 15%,transparent);border:1px solid color-mix(in srgb,var(--amber) 34%,transparent);border-radius:999px;padding:.28rem .72rem}
  .demopill.live{color:var(--lime-ink);background:var(--limewash);border-color:color-mix(in srgb,var(--lime) 40%,transparent)}
  html[data-theme="dark"] .demopill.live{color:var(--lime-text)}
  .demopill .svgi{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
  .cdd{position:relative}
  .cdd-btn,.themebtn{height:40px;border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;font-family:'Inter',sans-serif;font-weight:700;font-size:.82rem}
  .cdd-btn{padding:0 .8rem}
  .cdd-btn:hover,.themebtn:hover{border-color:var(--lime)}
  .cdd-btn .svgi{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
  .cdd-menu{position:absolute;top:46px;right:0;background:var(--card);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);padding:.3rem;display:none;z-index:60;min-width:170px}
  .cdd.open .cdd-menu{display:block}
  .cdd-menu button{display:flex;width:100%;align-items:center;gap:.5rem;background:transparent;border:0;color:var(--ink);font-family:'Inter',sans-serif;font-weight:600;font-size:.83rem;padding:.44rem .55rem;border-radius:9px;cursor:pointer;text-align:left}
  .cdd-menu button:hover{background:var(--panel)}
  .themebtn{width:40px;justify-content:center;padding:0}
  .themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  html[data-theme="dark"] .i-sun{display:block}html[data-theme="dark"] .i-moon{display:none}
  html[data-theme="light"] .i-sun{display:none}html[data-theme="light"] .i-moon{display:block}

  .content{padding:1.3rem clamp(1rem,2.6vw,2.2rem) 3.5rem;max-width:1340px}
  section{scroll-margin-top:120px;display:none}
  section.active{display:block;animation:fade .3s}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .sechead{display:flex;align-items:center;gap:.6rem;margin:.4rem 0 1.1rem;flex-wrap:wrap}
  .sechead h2{font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:900;font-size:1.4rem;letter-spacing:-.02em}
  .sechead .si{width:22px;height:22px;color:var(--lime);fill:none;stroke:currentColor;stroke-width:2}
  .sechead .pill{font-size:.66rem;font-weight:800;color:var(--faint);border:1px solid var(--line2);border-radius:999px;padding:.16rem .58rem}
  .card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);position:relative}
  .ct{font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:800;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:1rem;display:flex;align-items:center;gap:.45rem}
  .ct .svgi{width:15px;height:15px;color:var(--lime);fill:none;stroke:currentColor;stroke-width:2}
  .pad{padding:1.3rem 1.4rem}

  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.2rem}
  @media(max-width:1040px){.kpis{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.kpis{grid-template-columns:1fr}}
  .kpi{padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.15rem}
  .kpi .kl{font-size:.74rem;color:var(--mut);font-weight:700;display:flex;align-items:center;gap:.4rem}
  .kpi .kl .svgi{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
  .kpi .kv{font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:900;font-size:2.05rem;letter-spacing:-.02em;line-height:1.05;margin-top:.25rem}
  .kpi .ks{font-size:.74rem;color:var(--faint);font-weight:600;margin-top:.1rem}
  /* Rot als TEXT immer ueber --red-ink (dark #E7705E / light #A93E2E) — --red-strong
     ist die Flaechenfarbe und faellt im dunklen Theme unter AA (gemessen 3,77:1). */
  .kpi.in .kv{color:var(--lime-text)}.kpi.out .kv{color:var(--ink)}.kpi.due .kv{color:var(--amber-ink)}.kpi.crit .kv{color:var(--red-ink)}

  .aq{display:flex;flex-direction:column;gap:.6rem}
  .aqrow{display:flex;align-items:center;gap:.9rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--card)}
  @media(max-width:720px){.aqrow{align-items:flex-start;flex-wrap:wrap}}
  .aqrow .aic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
  .aqrow .aic .svgi{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
  .aqrow.auto .aic{background:var(--limewash);color:var(--lime-text)}html[data-theme="dark"] .aqrow.auto .aic{color:var(--lime)}
  .aqrow.gate .aic{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber-strong)}
  .aqrow.legal .aic{background:var(--redwash);color:var(--red-ink)}
  .aqrow .amid{flex:1;min-width:0}
  .aqrow .atitle{font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
  /* Geraetekennungen sind lang und haben keine Trennstellen — ohne diese
     Zeile schiebt eine Wellenzeile die ganze Seite waagerecht auf. */
  .aqrow .asub{font-size:.75rem;color:var(--faint);margin-top:.18rem;line-height:1.5;overflow-wrap:anywhere;min-width:0}
  .aqrow .asub b{color:var(--mut);font-weight:700}
  .aqrow .aacts{display:flex;gap:.5rem;flex:none}
  .abtn{font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:800;font-size:.78rem;border-radius:999px;padding:.45rem .95rem;cursor:pointer;border:0;white-space:nowrap;flex:none}
  .aqrow .abtn{background:var(--card);color:var(--ink);border:1px solid var(--line2)}
  .aqrow .abtn:hover{border-color:var(--lime)}
  .aqrow .abtn.pri{background:var(--lime);color:var(--lime-ink);border:0}
  .aqrow .abtn.pri:hover{filter:brightness(1.06)}

  .tblwrap{overflow-x:auto}
  /* Feste Spaltenbreiten: sonst misst jede Tabelle ihre Spalten nach dem eigenen
     Inhalt aus und dieselbe Spalte steht in jeder Gruppe woanders. */
  .tbl{width:100%;border-collapse:collapse;font-size:.84rem;table-layout:fixed}
  .tbl th{text-align:left;font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:800;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:.5rem .7rem;border-bottom:1px solid var(--line2);white-space:nowrap}
  .tbl td{padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
  .tbl td.nw{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tbl .wer{display:flex;align-items:center;gap:.4rem;min-width:0}
  .tbl .wer span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tbl tbody tr:hover td{background:var(--panel)}
  .tbl .num{font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:800;text-align:right;white-space:nowrap}
  .tbl b{font-weight:700}
  .tbl small{display:block;color:var(--faint);font-size:.72rem;font-weight:600;overflow-wrap:anywhere;line-height:1.35}

  .chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;border-radius:999px;padding:.16rem .55rem;white-space:nowrap}
  .chip i{width:7px;height:7px;border-radius:50%;flex:none}
  .chip.g{background:var(--limewash);color:var(--lime-text)}
  .chip.y{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber-ink)}
  .chip.r{background:var(--redwash);color:var(--red-ink)}
  .chip.b{background:var(--bluewash);color:var(--blue-ink)}
  .chip.n{background:var(--track);color:var(--mut)}
  @media(max-width:520px){.chip{white-space:normal;overflow-wrap:anywhere;max-width:100%}}
  .chip.g i{background:var(--lime)}.chip.y i{background:var(--amber)}.chip.r i{background:var(--red)}.chip.b i{background:var(--blue)}.chip.n i{background:var(--gray)}

  .note{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem 1.15rem;font-size:.85rem;line-height:1.6;color:var(--mut);margin-top:1.1rem}
  .note b{color:var(--ink)}
  .note.first{margin-top:0;margin-bottom:1.1rem}

  /* ===== Bestaetigungs-Modal, Haus-Idiom auto | gate | legal ===== */
  /* Voller Scrim ohne Weichzeichner — wie .tcbd/.drwbd im Haus-System.
     backdrop-filter blendet den Dialog auf manchen Ausgabewegen hell aus. */
  .ovl{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;place-items:center;z-index:200;padding:1rem}
  .ovl.show{display:grid;animation:fade .2s}
  .modal{background:var(--card);border:1px solid var(--line2);border-radius:20px;box-shadow:var(--shadow);max-width:560px;width:100%;max-height:92vh;overflow-y:auto}
  .modal .mhead{padding:1.3rem 1.5rem 1rem;display:flex;align-items:flex-start;gap:.9rem;border-bottom:1px solid var(--line)}
  .modal .mic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
  .modal .mic .svgi{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
  .modal.auto .mic{background:var(--limewash);color:var(--lime-text)}html[data-theme="dark"] .modal.auto .mic{color:var(--lime)}
  .modal.gate .mic{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber-strong)}
  .modal.legal .mic{background:var(--redwash);color:var(--red-ink)}
  .modal .mt{font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:900;font-size:1.15rem;letter-spacing:-.01em}
  .modal .mtag{font-size:.66rem;font-weight:800;border-radius:6px;padding:.1rem .45rem;display:inline-block;margin-top:.3rem}
  .modal.auto .mtag{background:var(--limewash);color:var(--lime-text)}
  .modal.gate .mtag{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber-strong)}
  .modal.legal .mtag{background:var(--redwash);color:var(--red-ink)}
  .modal .mbody{padding:1.2rem 1.5rem}
  .mblock{margin-bottom:1rem}
  .mblock .mbh{font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:800;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem}
  .mblock .mbh .svgi{width:14px;height:14px;color:var(--lime);fill:none;stroke:currentColor;stroke-width:2}
  .mblock p{font-size:.88rem;color:var(--ink);line-height:1.55}
  .mblock ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}
  .mblock li{font-size:.84rem;color:var(--mut);display:flex;gap:.5rem;align-items:flex-start}
  .mblock li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);margin-top:.5rem;flex:none}
  .mrev{font-size:.82rem;font-weight:700;border-radius:10px;padding:.6rem .8rem;display:flex;gap:.5rem;align-items:center}
  .mrev .svgi{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
  .mrev.ok{background:var(--limewash);color:var(--lime-text)}
  .mrev.no{background:var(--redwash);color:var(--red-ink)}
  /* Eingabefelder im Idiom von .searchbox: Kartenflaeche, line2, lime bei Fokus */
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
  @media(max-width:520px){.fgrid{grid-template-columns:1fr}}
  .fld label{display:block;font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:800;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:.3rem}
  .fld input{width:100%;background:var(--card2);border:1px solid var(--line2);border-radius:12px;color:var(--ink);font-family:'Inter',sans-serif;font-weight:600;font-size:.88rem;padding:.55rem .8rem;outline:none}
  .fld input:focus{border-color:var(--lime)}
  .fld input::placeholder{color:var(--faint)}
  .mack{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.1rem;padding:.85rem .95rem;border:1px dashed var(--line2);border-radius:12px;cursor:pointer;background:var(--card2);transition:border-color .15s}
  .mack:hover{border-color:var(--lime)}
  /* Das Feld bleibt ein echtes Ankreuzfeld (Tastatur, Vorlesen), wird aber
     vollstaendig selbst gezeichnet — die Systemdarstellung ist im dunklen
     Theme ein weisser Kasten und hat in einer gebrandeten Oberflaeche nichts
     zu suchen. */
  .mack input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin:.05rem 0 0;border-radius:6px;border:1.5px solid var(--line2);background:var(--card);cursor:pointer;position:relative;transition:background .15s,border-color .15s}
  .mack input::after{content:"";position:absolute;left:5.5px;top:2px;width:6px;height:11px;border:solid var(--lime-ink);border-width:0 2.6px 2.6px 0;transform:rotate(42deg) scale(.7);opacity:0;transition:opacity .12s,transform .12s}
  .mack input:checked{background:var(--lime);border-color:var(--lime)}
  .mack input:checked::after{opacity:1;transform:rotate(42deg) scale(1)}
  .mack input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
  .mack span{font-size:.85rem;font-weight:600;line-height:1.45}
  .mfoot{padding:1rem 1.5rem 1.3rem;display:flex;gap:.7rem;justify-content:flex-end;border-top:1px solid var(--line);flex-wrap:wrap}
  .mbtn{font-family:'Inter Tight',Inter,system-ui,sans-serif;font-weight:800;font-size:.88rem;border-radius:999px;padding:.6rem 1.3rem;cursor:pointer;border:1px solid var(--line2);background:var(--card);color:var(--ink)}
  .mbtn:hover{border-color:var(--lime)}
  .mbtn.go{border:0;color:var(--lime-ink);background:var(--lime)}
  .mbtn.go.legal{background:var(--red);color:var(--lime-ink)}
  html[data-theme="light"] .mbtn.go.legal{color:var(--card)}
  .mbtn.go:disabled{opacity:.4;cursor:not-allowed}

  .toast{position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%) translateY(14px);z-index:220;background:var(--card);color:var(--ink);border:1px solid var(--line2);box-shadow:var(--shadow);border-radius:14px;padding:.75rem 1.15rem;font-size:.85rem;font-weight:700;opacity:0;pointer-events:none;transition:.26s;max-width:min(560px,92vw)}
  .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
  .toast.bad{border-color:var(--red);color:var(--red-ink)}
  .empty{background:var(--card2);border:1px dashed var(--line2);border-radius:16px;padding:2rem 1.4rem;text-align:center;color:var(--mut);font-size:.88rem;line-height:1.65}
  .empty b{color:var(--ink)}
  /* Der Wiederherstellungsschluessel wird gelesen und abgetippt — feste
     Zeichenbreite, grosszuegiger Abstand, auswaehlbar. */
  /* Wortlaut aus dem Aktionskatalog des Servers: steht so im Pruefprotokoll
     und bleibt deshalb in JEDER Spracheinstellung Deutsch. Die Auszeichnung
     traegt keine Optik, sie ist die Markierung fuer bin/sprache-pruefen.mjs. */
  .quelltext{font:inherit;color:inherit}
  .prk{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.05rem;font-weight:700;letter-spacing:.08em;
    background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:.8rem .9rem;user-select:all;overflow-wrap:anywhere;line-height:1.6}
  :focus-visible{outline:2px solid var(--lime);outline-offset:2px}