/*
  Design-Fundament fuer den Razor-Neubau (Design-Direction freigegeben
  2026-08-04). Marke Navy/Lime aus dem bestehenden @xware/design-system
  behalten, ergaenzt um Flaechen-Tiefe, semantische Zustaende und Dark-Mode.

  Schriften hier als System-Stack angenaehert; produktiv self-hosted
  Fraunces (Display) / Inter Tight (Body) / IBM Plex Mono (Mono) als woff2
  (kein Google-CDN, Datenschutz). TODO: Font-Dateien nachziehen.
*/
:root{
  /* Marke */
  --navy:#09131D; --navy-2:#122036; --lime:#97BF0D; --signal:#CCFF1C;
  --lime-ink:#5a7507;                 /* Lime als Textfarbe, AA auf Weiss */
  /* Flaechen: gruenstichige Neutrale, bewusst gewaehlt */
  --s0:#ffffff; --s1:#F7F7F9; --s2:#EEF1F0; --sunken:#F2F4F3;
  --ink:#09131D; --muted:#5b6776; --line:#E4E7E6;
  /* semantische Zustaende, getrennt vom Akzent */
  --run:#2b6cb0;  --run-bg:#eaf2fb;
  --done:#2f8f4e; --done-bg:#e9f5ed;
  --degraded:#c76a12; --degraded-bg:#fcf1e4;
  --error:#b3261e; --error-bg:#fbeceb;
  /* Tiefe: navy-getoente Schatten */
  --elev-1:0 1px 2px rgba(9,19,29,.06), 0 2px 8px rgba(9,19,29,.05);
  --elev-2:0 2px 6px rgba(9,19,29,.09), 0 12px 28px rgba(9,19,29,.10);
  --glow-accent:0 0 0 3px rgba(151,191,13,.20);
  --glow-active:0 0 22px -6px rgba(204,255,28,.55);
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:64px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","IBM Plex Mono",Menlo,Consolas,monospace;
  --maxw:1080px;
  --density-pad:20px;                 /* comfortable (Kunde); Admin setzt 12px */
}
[data-theme="dark"], :root:has(#theme-dark:checked){
  --s0:#14212C; --s1:#0E1922; --s2:#0E1922; --sunken:#101d27;
  --ink:#eaf0ee; --muted:#9fb0ab; --line:#26333d; --lime-ink:#b3d63c;
  --run:#7fb3e8; --done:#6cc78d; --degraded:#e59a4b; --error:#ef8a84;
  --run-bg:#122536; --done-bg:#0f2418; --degraded-bg:#2a1c0c; --error-bg:#2a1211;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --s0:#14212C; --s1:#0E1922; --s2:#0E1922; --sunken:#101d27;
    --ink:#eaf0ee; --muted:#9fb0ab; --line:#26333d; --lime-ink:#b3d63c;
    --run:#7fb3e8; --done:#6cc78d; --degraded:#e59a4b; --error:#ef8a84;
    --run-bg:#122536; --done-bg:#0f2418; --degraded-bg:#2a1c0c; --error-bg:#2a1211;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--s2);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;
         text-wrap:balance;margin:0}
a{color:var(--lime-ink)}
.mono{font-family:var(--mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-ink)}

/* Typo-Skala (fluid) */
.fs-hero{font-size:clamp(2rem,5vw,3.3rem);line-height:1.05}
.fs-h1{font-size:clamp(1.6rem,3vw,2.25rem)}
.fs-h2{font-size:1.375rem}
.fs-sm{font-size:.875rem}
.tabular{font-variant-numeric:tabular-nums}

/* Site-Header (Navy) */
.site-header{background:var(--navy);color:#eaf0ee}
.site-header .wrap{display:flex;align-items:center;gap:12px;padding:14px 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand .logo{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:var(--lime);color:var(--navy);font-weight:800;font-family:var(--serif);font-size:18px}
.brand b{font-weight:600}
.site-header .sp{margin-left:auto}
.site-header .brand img{height:26px;width:auto;display:block}
.site-header .brand-suffix{color:#cdd8d4;font-weight:500;font-size:.95rem}
.site-header a.nav{color:#cdd8d4;text-decoration:none;font-size:.9rem}
.site-header a.nav:hover{color:#fff}

/* Footer */
.site-footer{background:var(--navy);color:#9fb0ab;margin-top:56px}
.site-footer .wrap{display:flex;flex-direction:column;gap:8px;padding:28px 20px}
.site-footer a{color:#cdd8d4;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .footer-tech strong{color:#eaf0ee}
.site-footer .footer-trust{font-size:.86rem}
.site-footer .footer-copy{font-size:.82rem;color:#7d8c88}

/* Landing */
.section{padding:48px 0}
.section-alt{background:var(--s1)}
.wrap.narrow{max-width:70ch}
.landing-hero .wrap{padding:64px 20px 72px}
.landing-hero .lead{max-width:60ch;color:#b9c6c2;font-size:1.08rem;margin:16px 0 0}
.landing-hero h1{color:#fff;max-width:18ch;margin-top:10px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn-onhero{background:transparent;color:#eaf0ee;border-color:rgba(255,255,255,.28)}
.btn-onhero:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.feature-grid{grid-template-columns:1fr}}
.feature-card{border-left:3px solid var(--lime)}
.feature-card h3{font-size:1.16rem;margin-bottom:6px}
.feature-card p{margin:0;color:var(--muted)}
.endpoints-hint{color:var(--muted);max-width:70ch}
.endpoint-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.endpoint-list a{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--s0);
  border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;text-decoration:none;
  color:var(--ink);box-shadow:var(--elev-1);transition:transform .12s ease,box-shadow .12s ease}
.endpoint-list a:hover{transform:translateY(-1px);box-shadow:var(--elev-2)}
.method{font-size:.72rem;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:var(--r-sm);color:#fff}
.method-post{background:#2f8f4e}
.method-get{background:#2b6cb0}
.endpoint-list .path{font-size:.9rem;font-weight:600}
.endpoint-list .desc{color:var(--muted);font-size:.86rem}
code.mono{background:var(--sunken);border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:.86em}

/* Karten / Flaechen */
.card{background:var(--s0);border:1px solid var(--line);border-radius:var(--r-md);
      box-shadow:var(--elev-1);padding:var(--density-pad)}
.hero{position:relative;overflow:hidden;color:#eaf0ee;
  background:radial-gradient(120% 130% at 100% 0%, var(--navy-2) 0%, var(--navy) 58%)}
.hero::after{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;
     padding:11px 18px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
     font-family:var(--sans);text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
.btn:focus-visible{outline:none;box-shadow:var(--glow-accent)}
.btn-primary{background:var(--lime);color:var(--navy)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--glow-accent)}
.btn-ghost{background:var(--s0);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:var(--elev-1)}
.btn-sm{padding:7px 13px;font-size:.83rem}

/* Formfelder */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.78rem;font-weight:600}
.input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
       font-family:var(--sans);font-size:.95rem;background:var(--s0);color:var(--ink)}
.input:focus{outline:none;box-shadow:var(--glow-accent);border-color:var(--lime)}

/* Pills / Zustaende */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;
      padding:4px 10px;border-radius:var(--r-pill)}
.pill-run{background:var(--run-bg);color:var(--run)}
.pill-done{background:var(--done-bg);color:var(--done)}
.pill-degraded{background:var(--degraded-bg);color:var(--degraded)}
.pill-error{background:var(--error-bg);color:var(--error)}
.pill-pending{background:var(--s2);color:var(--muted)}

.alert{border-radius:var(--r-md);padding:12px 14px;font-size:.9rem;border:1px solid var(--line);
       border-left-width:3px}
.alert-error{background:var(--error-bg);border-left-color:var(--error);color:var(--error)}
.alert-degraded{background:var(--degraded-bg);border-left-color:var(--degraded);color:var(--degraded)}
.alert ul{margin:6px 0 0;padding-left:18px}
.alert-success{background:var(--done-bg);border-left-color:var(--done);color:var(--done)}
.alert strong{display:block;margin-bottom:4px}
.alert p{margin:0}

/* Login / Magic-Link */
.auth-hero{display:flex;align-items:center;justify-content:center;min-height:72vh;padding:56px 20px}
.auth-wrap{max-width:460px;width:100%;margin:0 auto}
.auth-card{width:100%;padding:34px 32px;display:flex;flex-direction:column;gap:14px}
.auth-card .eyebrow{margin:0}
.auth-card .fs-h1{margin:0}
.auth-card h2{margin:0;font-size:1.1rem}
.auth-card .lead{margin:0;color:var(--muted)}
.auth-separator{height:1px;background:var(--line);margin:8px 0 2px}
.auth-form{display:flex;flex-direction:column;gap:16px;margin-top:2px}
.btn-block{width:100%;justify-content:center}
.status{border-radius:var(--r-md);padding:12px 14px;font-size:.9rem;border:1px solid var(--line);
        border-left-width:3px}
.status-success{background:var(--done-bg);border-left-color:var(--done);color:var(--done)}
.status-error{background:var(--error-bg);border-left-color:var(--error);color:var(--error)}

/* Doc-Seiten (Onboarding, Cookbook, Use Cases, Operations): server-gerendert,
   gleiche Tokens wie oben, damit Dark-Mode automatisch greift. */
.doc-page{padding:40px 0 8px}
.doc-page .wrap{max-width:76ch}
.doc-page h1{margin:6px 0 0}
.doc-page h2{font-size:1.375rem;margin:36px 0 0}
.doc-page h3{font-size:1.12rem;margin:26px 0 0}
.doc-page p{margin:12px 0 0}
.doc-page ul,.doc-page ol{margin:12px 0 0;padding-left:22px}
.doc-page li{margin:6px 0 0}
.doc-page .lead{color:var(--muted);font-size:1.08rem;margin-top:14px}
.breadcrumb{font-size:.86rem;color:var(--muted)}
.breadcrumb a{color:var(--lime-ink);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

.doc-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:.92rem}
.doc-table th,.doc-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.doc-table th{background:var(--sunken);font-weight:600}
.table-scroll{overflow-x:auto}

.code-block{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;margin-top:16px;overflow-x:auto;font-family:var(--mono);font-size:.86rem;
  line-height:1.5;color:var(--ink)}
.code-block code{font-family:inherit}

.recipe-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
@media (max-width:700px){.recipe-card-grid{grid-template-columns:1fr}}
.recipe-card{display:block;text-decoration:none;color:var(--ink)}
.recipe-card h3{margin:0 0 6px}
.recipe-card p{margin:0;color:var(--muted);font-size:.92rem}
.recipe-card:hover{transform:translateY(-1px);box-shadow:var(--elev-2)}

/* Formfeld-Ergaenzungen: textarea/select im .input-Kontrakt, 2-Spalten-Grid
   fuer Formulare, Hinweiszeile. */
textarea.input{resize:vertical;min-height:96px}
select.input{appearance:auto}
.input.mono{font-family:var(--mono);font-size:.86rem}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.field-grid .full{grid-column:1/-1}
@media (max-width:640px){.field-grid{grid-template-columns:1fr}}
.field-hint{color:var(--muted);font-size:.85rem;margin:0}
.field-narrow{max-width:22rem}
.stack > * + *{margin-top:var(--sp-3)}
.language-field{margin-top:var(--sp-3)}
.section-title{font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:16px 0 8px}

/* Aktionszeile (Button plus Inline-Status) und Inline-Statustexte. Die
   Kind-Klassen success/error/loading/warning kommen aus dem Komponenten-State. */
.action-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:var(--sp-4)}
.inline-status{font-size:.88rem;color:var(--muted)}
.inline-status.success{color:var(--done)}
.inline-status.error{color:var(--error)}
.inline-status.warning{color:var(--degraded)}

/* Spinner fuer laufende Schritte (im .pill-run eingebettet). */
.spinner{width:13px;height:13px;border-radius:50%;border:2px solid var(--line);
  border-top-color:var(--lime);animation:portal-spin .9s linear infinite;flex-shrink:0}
@keyframes portal-spin{to{transform:rotate(360deg)}}

/* Kunden-Kopfzeile (Picker): schlanke Leiste im Designsystem statt der
   frueheren spa.css-Bar. Logo des Kunden plus Logout/Zurueck-zu-Admin. */
.customer-bar{background:var(--s0);border-bottom:1px solid var(--line)}
.customer-bar .wrap{display:flex;align-items:center;gap:12px;padding:12px 20px}
.customer-bar img.logo{height:36px;width:auto;display:block}
.customer-bar__name{font-weight:600}
.customer-bar__actions{margin-left:auto;display:flex;gap:18px;align-items:center}
.customer-bar__link{color:var(--muted);text-decoration:none;font-size:.9rem}
.customer-bar__link:hover{color:var(--ink)}

/* Use-Case-Kacheln im Kunden-Picker: Karten-Muster wie .feature-card, als
   ganze Flaeche klickbar. */
.tile-list{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.tile{display:block;text-decoration:none;color:var(--ink);
  transition:transform .12s ease,box-shadow .12s ease}
.tile:hover{transform:translateY(-1px);box-shadow:var(--elev-2)}
.tile h3{font-size:1.1rem;margin-bottom:4px}
.tile p{margin:6px 0 0;color:var(--muted);font-size:.92rem}
.tile .tile-outcome{color:var(--ink);font-size:.88rem}
.tile .tile-outcome strong{color:var(--lime-ink)}

/* Runner (Kunden-Workflow): Schritt-Karten als Timeline. Zustand pro Karte
   ueber Border-Akzent plus .pill-Status im Kopf; laufender Schritt glimmt. */
.runner-page{padding:32px 0 8px}
.runner-page .wrap{max-width:860px}
.uc-outcome{margin:14px 0 0;padding:10px 14px;border-left:3px solid var(--lime);
  background:var(--s1);border-radius:var(--r-sm)}
.uc-outcome strong{color:var(--lime-ink)}
.uc-input-hint{color:var(--muted);font-size:.9rem;margin:0 0 12px}
.step-list{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-4)}
.step-card{border-left:3px solid var(--line)}
.step-card.is-run{border-left-color:var(--lime);box-shadow:var(--elev-1),var(--glow-active)}
.step-card.is-done{border-left-color:var(--lime)}
.step-card.is-degraded{border-left-color:var(--degraded)}
.step-card.is-error{border-left-color:var(--error)}
.step-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.step-head h3{font-size:1.05rem;flex:1;min-width:0}
.step-num{display:inline-grid;place-items:center;width:26px;height:26px;flex-shrink:0;
  border-radius:50%;background:var(--sunken);border:1px solid var(--line);
  font-weight:700;font-size:.8rem;font-variant-numeric:tabular-nums}
.step-subtitle{margin:-4px 0 10px;font-size:.9rem;color:var(--muted)}

/* Datei-Eingabe OHNE JavaScript: das Label umschliesst den visuell
   versteckten InputFile, der Label-Klick oeffnet den Picker nativ
   (display:none wuerde den Fokus-Ring verlieren, darum clip-Pattern). */
.drop-label{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:22px 16px;border:2px dashed var(--line);border-radius:var(--r-md);
  background:var(--sunken);cursor:pointer;text-align:center;color:var(--muted);
  font-size:.9rem;transition:border-color .12s ease}
.drop-label:hover{border-color:var(--lime);color:var(--ink)}
.drop-label:focus-within{border-color:var(--lime);box-shadow:var(--glow-accent)}
.drop-label strong{color:var(--lime-ink)}
.drop-label input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.file-chips{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.file-chip{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--s0);
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:.88rem}
.file-chip .file-name{flex:1;min-width:0;overflow-wrap:anywhere}
.file-chip .file-size,.file-chip .file-kind{color:var(--muted);font-size:.8rem;white-space:nowrap}
.chip-remove{background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:1rem;line-height:1;padding:2px 7px;border-radius:var(--r-sm)}
.chip-remove:hover{color:var(--error);background:var(--error-bg)}
.seg-tabs{display:flex;gap:8px;margin-bottom:12px}

/* Dokument-Slots: ein Abschnitt pro Slot innerhalb der Eingabe-Karte,
   Trennung ueber Bottom-Border statt zweiter Karten-Rahmen. */
.slot-card{padding:14px 0;border-bottom:1px solid var(--line)}
.slot-card:first-of-type{padding-top:4px}
.slot-card:last-of-type{border-bottom:none;padding-bottom:0}
.slot-card h4{margin:0 0 2px;font-size:.95rem}
.slot-required{color:var(--lime-ink);font-weight:700;margin-left:2px}
.slot-desc{margin:2px 0 8px;color:var(--muted);font-size:.86rem}

/* Ausgabe eines Schritts: Feldliste, Markdown-Vorschau, ROI-Splash. */
.step-output{margin-top:4px}
.field-list{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;
  font-size:.9rem;margin:0}
.field-list dt{color:var(--muted);font-weight:600}
.field-list dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.md-preview{border:1px solid var(--line);border-radius:var(--r-md);background:var(--sunken);
  padding:12px 14px;margin-top:12px;font-size:.92rem;overflow-wrap:anywhere}
.roi-splash{text-align:center;padding:24px 12px}
.roi-splash-headline{margin:0 0 10px;color:var(--muted)}
.roi-splash-figure{font-size:2.4rem;font-weight:700;font-family:var(--serif);
  color:var(--lime-ink);font-variant-numeric:tabular-nums}
.roi-splash-subline{margin:10px 0 0;font-size:.9rem;color:var(--muted)}

/* Ausklappbare "Technische Details" pro Schritt (Session-/Aufgabe-ID +
   Roh-Output/-Fehler als JSON). Tokens tragen den Dark-Mode. */
.step-details{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.step-details>summary{cursor:pointer;color:var(--muted);font-size:.82rem;
  list-style:revert}
.step-details-body{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.step-details-id{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.82rem}
.step-details-id-label{color:var(--muted);min-width:7em}
.step-details-id-value{font-family:var(--mono);user-select:all;
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:2px 6px;overflow-wrap:anywhere}
.step-details-label{color:var(--muted);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.06em}
.step-details-json{margin:0;font-family:var(--mono);font-size:.8rem;
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;
  overflow:auto}

/* Katalog-Treffer-Liste (Sicherheitsgrad-Tags aus HitListService: die
   Klassennamen hit-tag-high/mid/low sind Kontrakt, nur die Farben leben hier). */
.hit-list{display:flex;flex-direction:column;gap:8px}
.hit-cards{display:flex;flex-direction:column}
.hit-card{padding:8px 0;border-bottom:1px solid var(--line)}
.hit-card:first-child{padding-top:0}
.hit-card:last-child{border-bottom:none}
.hit-head{display:flex;align-items:center;gap:10px}
.hit-name{font-weight:600;font-size:.9rem;flex:1;min-width:0}
.hit-tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:700;white-space:nowrap}
.hit-tag-high{background:var(--done-bg);color:var(--done)}
.hit-tag-mid{background:var(--degraded-bg);color:var(--degraded)}
.hit-tag-low{background:var(--error-bg);color:var(--error)}
.hit-tag-manual{background:var(--lime);color:var(--navy)}
.hit-check{accent-color:var(--lime);cursor:pointer;flex:0 0 auto;margin:0}
.hit-card-excluded{opacity:.45}
.hit-card-excluded .hit-name{text-decoration:line-through}
.hit-toggle{align-self:flex-start;padding:5px 11px;background:transparent;
  border:1px dashed var(--line);border-radius:var(--r-sm);color:var(--muted);
  font-size:.78rem;cursor:pointer;font-family:var(--sans)}
.hit-toggle:hover{border-color:var(--lime);color:var(--ink)}
.hit-manual{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.hit-manual-list .hit-card{padding-left:8px;border-left:2px solid var(--lime)}
.hit-manual-head{font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.hit-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.hit-add .input{width:auto}
.hit-add-name{flex:1 1 12rem;min-width:8rem}
.hit-add-artnr{flex:0 1 9rem;min-width:5rem}
.hit-add-menge{width:6rem}

/* Datentabellen (Admin-Flaechen): kompakt, in einer .card getragen. */
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th,.data-table td{text-align:left;padding:8px 10px;
  border-bottom:1px solid var(--line);vertical-align:top}
.data-table th{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.data-table td code{white-space:nowrap}
.table-scroll .data-table{min-width:560px}

/* Coverage-Ampel (Kundenliste/Use-Case-Zeilen). */
.cov-dot{font-size:.7rem;vertical-align:middle;line-height:1}
.cov-ok{color:var(--done)}
.cov-partial{color:var(--degraded)}
.cov-gap{color:var(--error)}
.cov-none{color:var(--muted)}
.cov-cell{white-space:nowrap}
.cov-cell small{color:var(--muted);margin-left:3px}

/* Zeilen-Karte (Use-Case-Liste im Kunden-Detail). */
.row-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;
  border:1px solid var(--line);border-left:3px solid var(--lime);
  border-radius:var(--r-sm);background:var(--s0);margin-bottom:8px}
.row-card .meta{flex:1;min-width:0}
.row-card .meta .endpoint{display:block;color:var(--muted);font-size:.8rem}
.row-card .actions{display:flex;gap:8px;align-items:center}
.row-card .actions form{margin:0}

/* Gefahrenzone (Hart-Loeschen) und Admin-Dichte: Admin-Flaechen setzen die
   Karten-Dichte kompakt (vgl. --density-pad-Kommentar oben). */
.card-danger{border-left:3px solid var(--error)}
.card-danger h3{color:var(--error)}
/* Fixe Farbe statt var(--error): das Dark-Token ist aufgehellt (Text auf
   dunklem Grund) und traegt keinen weissen Button-Text. */
.btn-danger{background:#b3261e;color:#fff}
.btn-danger:hover{transform:translateY(-1px)}
.density-compact{--density-pad:12px}
.admin-page{padding:32px 0 48px}
.admin-page .card{margin-bottom:var(--sp-4)}
.admin-page h2{margin-top:var(--sp-5)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* Reconnect-Overlay: blazor.web.js setzt die Zustands-Klassen; sichtbar nur
   waehrend Reconnect (trying) bzw. nach endgueltigem Verbindungsverlust
   (failed/rejected -> Reload-Hinweis, der Lauf rechnet serverseitig weiter). */
.reconnect-modal{display:none}
.reconnect-modal.components-reconnect-show,
.reconnect-modal.components-reconnect-failed,
.reconnect-modal.components-reconnect-rejected{display:flex;position:fixed;
  inset:0;z-index:1000;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--ink, #0b1016) 62%, transparent)}
.reconnect-card{background:var(--card, #fff);border:1px solid var(--line);
  border-radius:var(--r-md, 10px);padding:18px 22px;max-width:26rem;
  box-shadow:0 12px 40px rgba(0,0,0,.25)}
.reconnect-card p{margin:0;display:flex;gap:10px;align-items:baseline}
.reconnect-modal .reconnect-broken{display:none}
.reconnect-modal.components-reconnect-failed .reconnect-trying,
.reconnect-modal.components-reconnect-rejected .reconnect-trying{display:none}
.reconnect-modal.components-reconnect-failed .reconnect-broken,
.reconnect-modal.components-reconnect-rejected .reconnect-broken{display:flex}

/* Advisor-Kontaktkarte auf der Kundenseite (Paritaet zum Legacy-Picker):
   zugeordneter XWare-Ansprechpartner mit Foto, Rolle und Kontakt. */
.advisor-card{display:flex;gap:16px;align-items:center;margin-top:24px;max-width:34rem}
.advisor-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;
  flex:0 0 auto;background:var(--sunken);border:1px solid var(--line)}
.advisor-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.advisor-name{margin:0;font-weight:600}
.advisor-role{margin:0;color:var(--muted);font-size:.86rem}
.advisor-contact{margin:4px 0 0;font-size:.9rem;display:flex;flex-wrap:wrap;gap:4px}
.advisor-contact a{color:var(--accent-ink, inherit)}