/* ============================================================================
   TaxiOptimus Account-Portal — gemeinsames Stylesheet ("Glass"-Redesign)
   ----------------------------------------------------------------------------
   Umsetzung des Redesigns aus dem Claude-Design-Canvas
   "TaxiOptimus Web-UI Redesign" (Projekt 4ace7e4b, Artboard
   "TaxiOptimus Portal.dc.html"), Design-System "Glass".

   Vorher hatte jede Portal-Seite ihren eigenen <style>-Block mit einer
   eigenen Kopie derselben Regeln. Hier liegt jetzt alles einmal — die
   Seiten behalten ihre bisherigen Klassennamen (.card, .btn, .k, .pill,
   .mini, .note, .msg, …), damit das Markup unveraendert bleibt.

   Aufbau:
     1. Farb-/Form-Tokens (hell + dunkel)
     2. Grundgeruest: body, .wrap, .topbar, .hero
     3. Flaechen: .card
     4. Typografie: h1, .k, .sub, .note, .msg
     5. Formulare: label, input, select, textarea
     6. Aktionen: .btn, .link-btn, .mini
     7. Status: .pill, .warn-banner, .imp-banner
     8. Daten: dl/dt/dd, table
     9. Web-Box (siehe webbox.js)
    10. Bild-Ansichten (Split-View, Lightbox)
   ========================================================================== */

@import url("fonts/fonts.css");

/* --- 1. Tokens ----------------------------------------------------------- */
/* Werte 1:1 aus dem Canvas. Hell ist der Normalfall ("Soft-White"), dunkel
   greift nur, wenn das Geraet es verlangt — beide Paletten sind im Design
   ausgearbeitet. */
:root{
  color-scheme:light;
  --canvas:#EDF1F7;
  --pool-a:rgba(59,134,247,.20);
  --pool-b:rgba(31,198,198,.14);
  --pool-c:rgba(255,200,97,.14);
  --glass-fill:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.66));
  --surface-glass:rgba(255,255,255,.74);
  --surface-glass-strong:rgba(255,255,255,.94);
  --surface-glass-quiet:rgba(255,255,255,.56);
  --surface-solid:#FFFFFF;
  --surface-solid-hover:#F4F7FB;
  --border:rgba(19,38,63,.11);
  --border-strong:rgba(19,38,63,.20);
  --border-faint:rgba(19,38,63,.06);
  --text-strong:#0D1826;
  --text:#26364B;
  --text-muted:#5B6B80;
  --text-faint:#8695A6;
  --text-disabled:#AAB6C4;
  --text-on-accent:#FFFFFF;
  --accent:#2E6AD4;
  --accent-hover:#3B86F7;
  --accent-press:#234FA0;
  --accent-quiet:rgba(59,134,247,.12);
  --accent-text:#1E56B4;
  --gold:#B57A00;
  --success-400:#0B8A61;
  --success-500:#0F9D6E;
  --warning-400:#9A6100;
  --warning-500:#C77A06;
  --danger-400:#BE2E45;
  --danger-500:#D0374E;
  --edge:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-sm:0 1px 2px rgba(13,24,38,.05),0 4px 12px rgba(13,24,38,.05);
  --shadow-md:0 1px 2px rgba(13,24,38,.05),0 14px 34px rgba(13,24,38,.08);
  --shadow-lg:0 2px 6px rgba(13,24,38,.07),0 30px 64px rgba(13,24,38,.14);
  --glow-accent:0 6px 22px rgba(46,106,212,.28);
  --glow-accent-soft:0 4px 14px rgba(46,106,212,.18);
  --glow-focus:0 0 0 3px rgba(59,134,247,.26);
  --scrim:rgba(6,10,18,.52);

  --font-sans:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;

  /* Innenabstaende von .wrap — .topbar rechnet damit ihren Vollbreiten-
     Anschnitt aus. */
  --pad-x:18px;
  --pad-top:24px;
}

/* Dunkle Palette. Sie greift zweimal: ohne ausdrueckliche Wahl nach der
   Systemvorgabe, und ueber `data-theme="dark"`, sobald der Schalter
   benutzt wurde. Der Schalter setzt IMMER ein Attribut — damit gewinnt
   die Wahl in beide Richtungen, auch "hell trotz dunklem System". */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){

    color-scheme:dark;
    --canvas:#070A12;
    --pool-a:rgba(59,134,247,.22);
    --pool-b:rgba(79,226,226,.13);
    --pool-c:rgba(255,200,97,.10);
    --glass-fill:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    --surface-glass:rgba(255,255,255,.06);
    --surface-glass-strong:rgba(255,255,255,.12);
    --surface-glass-quiet:rgba(255,255,255,.04);
    --surface-solid:#141A28;
    --surface-solid-hover:#1B2233;
    --border:rgba(255,255,255,.09);
    --border-strong:rgba(255,255,255,.18);
    --border-faint:rgba(255,255,255,.05);
    --text-strong:rgba(255,255,255,.96);
    --text:rgba(255,255,255,.82);
    --text-muted:rgba(255,255,255,.60);
    --text-faint:rgba(255,255,255,.42);
    --text-disabled:rgba(255,255,255,.26);
    --text-on-accent:#04060B;
    --accent:#3B86F7;
    --accent-hover:#5DA4FF;
    --accent-press:#2E6AD4;
    --accent-quiet:rgba(59,134,247,.18);
    --accent-text:#93C2FF;
    --gold:#FFC861;
    --success-400:#46E0A8;
    --success-500:#19C083;
    --warning-400:#FFC861;
    --warning-500:#F5A623;
    --danger-400:#FF7A8A;
    --danger-500:#F2415E;
    --edge:inset 0 1px 0 rgba(255,255,255,.14);
    --shadow-sm:0 2px 10px rgba(0,0,0,.35);
    --shadow-md:0 8px 32px rgba(0,0,0,.45);
    --shadow-lg:0 20px 64px rgba(0,0,0,.58);
    --glow-accent:0 6px 26px rgba(59,134,247,.42);
    --glow-accent-soft:0 4px 18px rgba(59,134,247,.26);
    --glow-focus:0 0 0 3px rgba(59,134,247,.40);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#070A12;
  --pool-a:rgba(59,134,247,.22);
  --pool-b:rgba(79,226,226,.13);
  --pool-c:rgba(255,200,97,.10);
  --glass-fill:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  --surface-glass:rgba(255,255,255,.06);
  --surface-glass-strong:rgba(255,255,255,.12);
  --surface-glass-quiet:rgba(255,255,255,.04);
  --surface-solid:#141A28;
  --surface-solid-hover:#1B2233;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.18);
  --border-faint:rgba(255,255,255,.05);
  --text-strong:rgba(255,255,255,.96);
  --text:rgba(255,255,255,.82);
  --text-muted:rgba(255,255,255,.60);
  --text-faint:rgba(255,255,255,.42);
  --text-disabled:rgba(255,255,255,.26);
  --text-on-accent:#04060B;
  --accent:#3B86F7;
  --accent-hover:#5DA4FF;
  --accent-press:#2E6AD4;
  --accent-quiet:rgba(59,134,247,.18);
  --accent-text:#93C2FF;
  --gold:#FFC861;
  --success-400:#46E0A8;
  --success-500:#19C083;
  --warning-400:#FFC861;
  --warning-500:#F5A623;
  --danger-400:#FF7A8A;
  --danger-500:#F2415E;
  --edge:inset 0 1px 0 rgba(255,255,255,.14);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 8px 32px rgba(0,0,0,.45);
  --shadow-lg:0 20px 64px rgba(0,0,0,.58);
  --glow-accent:0 6px 26px rgba(59,134,247,.42);
  --glow-accent-soft:0 4px 18px rgba(59,134,247,.26);
  --glow-focus:0 0 0 3px rgba(59,134,247,.40);
}

/* --- 2. Grundgeruest ----------------------------------------------------- */
*{box-sizing:border-box}

/* Senkrechter Scrollbalken immer da (Frank 10.09.2026): sonst springt der
   Inhalt beim Wechsel zwischen Bereichen mit und ohne Scrollbedarf um die
   Balkenbreite hin und her. */
html{overflow-y:scroll;scrollbar-gutter:stable}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.5;
  color:var(--text);
  background-color:var(--canvas);
  background-image:
    radial-gradient(900px 620px at 12% -8%,var(--pool-a),transparent 70%),
    radial-gradient(760px 560px at 92% 4%,var(--pool-b),transparent 72%),
    radial-gradient(680px 520px at 70% 106%,var(--pool-c),transparent 70%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* Seitenbreite setzt jede Seite selbst (--wrap-max in ihrem <style>). */
.wrap{
  width:100%;
  max-width:var(--wrap-max,1200px);
  margin:0 auto;
  padding:calc(env(safe-area-inset-top) + var(--pad-top)) var(--pad-x)
          calc(env(safe-area-inset-bottom) + 56px);
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Kopfzeile der eingeloggten Seiten: klebt oben, schneidet ueber die
   .wrap-Polsterung hinaus bis an den Fensterrand (Design: Glasleiste). */
.topbar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  /* Die Leiste deckt den kompletten Polsterkasten von .wrap ab: eigene
     Breite = Inhaltsbreite + beide Polster, dazu negative Aussenabstaende.
     Auf schmalen Fenstern ist .wrap so breit wie das Fenster — die Leiste
     laeuft dann von Rand zu Rand, ohne dass etwas ueberhaengt.
     Bewusst NICHT ueber 100vw: darin steckt die Scrollbalken-Breite, und
     die erzeugt einen waagerechten Scrollbalken (nachgemessen). */
  width:calc(100% + 2 * var(--pad-x));
  margin:calc(-1 * (env(safe-area-inset-top) + var(--pad-top))) calc(-1 * var(--pad-x)) 4px;
  padding:12px var(--pad-x);
  background:var(--surface-glass);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border-bottom:1px solid var(--border);
  /* Auf breiten Fenstern ist die Leiste so breit wie die Seitenspalte und
     nicht wie das Fenster — die abgerundete Unterkante laesst sie dort als
     bewusste Flaeche lesen statt als abgeschnittenen Balken. */
  border-radius:0 0 var(--radius-md) var(--radius-md);
}
.topbar .brand-mark{height:34px;width:34px;flex:none;margin-right:2px}
.topbar h1{flex:1 1 auto;min-width:0}

/* Startseiten ohne Login (Anmelden, Passwort, Einladung): Logo mittig. */
.hero{text-align:center;margin-bottom:2px}
.hero .brand{
  height:46px;width:auto;max-width:100%;
  filter:drop-shadow(0 6px 18px rgba(13,24,38,.16));
}
.hero h1{margin-top:22px}

/* --- 3. Flaechen --------------------------------------------------------- */
.card{
  background-image:var(--glass-fill);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm),var(--edge);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  padding:22px;
}
/* Ruhigere Nebenflaeche — z. B. der Hinweiskasten unter dem Anmelde-Formular. */
.card.quiet{
  background-image:none;
  background:var(--surface-glass-quiet);
  border-color:var(--border-faint);
  border-radius:var(--radius-md);
  box-shadow:none;
  padding:18px 20px;
}

/* Karten-Raster der Konto-/Verwaltungsseiten (Canvas: auto-fit ab 330 px,
   oben ausgerichtet, damit unterschiedlich hohe Karten nicht mitwachsen). */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:18px;
  align-items:start;
}
.card-grid .wide{grid-column:1/-1}

/* --- 3b. Ziehharmonika (Fahrer-Konto) ------------------------------------ */
/* Bewusst <details>/<summary>: auf- und zuklappen, Tastaturbedienung und
   die Rolle fuer Screenreader kommen vom Browser — kein eigenes JS. */
.sec{
  background-image:var(--glass-fill);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-sm),var(--edge);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  overflow:hidden;
}
.sec > summary{
  list-style:none;
  min-height:60px;
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;
  cursor:pointer;
}
.sec > summary::-webkit-details-marker{display:none}
.sec > summary:hover{background:var(--surface-glass-quiet)}
.sec > summary:focus-visible{outline:none;box-shadow:var(--glow-focus)}
.sec-icon{
  flex:none;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--accent-quiet);color:var(--accent);
}
.sec-icon svg{width:17px;height:17px;flex:none}
.sec.danger .sec-icon{background:rgba(208,55,78,.12);color:var(--danger-500)}
.sec-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sec-title{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text-strong)}
.sec-sub{font-size:12.5px;color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-chev{width:18px;height:18px;flex:none;color:var(--text-faint);
  transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.sec[open] > summary .sec-chev{transform:rotate(180deg)}
.sec-body{padding:2px 16px 18px}
.sec-body > :first-child{margin-top:0}
/* Die Trennlinie sitzt am Anfang des Inhalts, nicht unter der Kopfzeile —
   so ist beim zugeklappten Abschnitt keine Linie zu viel im Bild. */
.sec-body::before{
  content:"";display:block;height:1px;margin-bottom:14px;
  background:var(--border-faint);
}

/* --- 2c. Hell/Dunkel-Schalter ------------------------------------------- */
/* Zwei Zustaende, kein "automatisch": wer den Schalter benutzt, will eine
   Entscheidung und keine, die sich beim naechsten Sonnenuntergang aendert.
   Ohne Wahl gilt hell — die Systemvorgabe greift nur, solange nie geschaltet
   wurde (siehe die Palette oben). */
.theme-switch{
  display:inline-flex;gap:2px;flex:none;
  padding:3px;
  border-radius:10px;
  background:var(--surface-glass-quiet);
  border:1px solid var(--border-faint);
}
.theme-switch button{
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 10px;
  border:1px solid transparent;border-radius:7px;
  background:transparent;
  color:var(--text-muted);
  font-family:var(--font-sans);font-size:12.5px;font-weight:500;
  cursor:pointer;white-space:nowrap;
}
.theme-switch button:hover{color:var(--text-strong)}
.theme-switch button[aria-pressed="true"]{
  background:var(--surface-glass-strong);
  color:var(--text-strong);
  border-color:var(--border);
  box-shadow:var(--shadow-sm),var(--edge);
}
.theme-switch button:focus-visible{outline:none;box-shadow:var(--glow-focus)}
.theme-switch svg{width:14px;height:14px;flex:none}
/* Auf den Einstiegsseiten steht der Schalter allein unter der Karte. */
.wrap > .theme-switch{align-self:center;margin-top:4px}
/* In der Kopfzeile rechts — auch dann, wenn er in eine eigene Zeile
   umbricht (schmale Fahrer-Spalte); sonst haengt er dort verloren links. */
.topbar .theme-switch{margin-left:auto}

/* --- 2b. Reiterleiste ---------------------------------------------------- */
.tabs{
  display:flex;gap:4px;flex:1;flex-wrap:wrap;
  padding:3px;
  border-radius:12px;
  background:var(--surface-glass-quiet);
  border:1px solid var(--border-faint);
}
.tabs a,.tabs button{
  height:34px;padding:0 14px;
  border-radius:9px;border:1px solid transparent;
  background:transparent;
  color:var(--text-muted);
  font-family:var(--font-sans);font-size:13.5px;font-weight:500;
  cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;
  text-decoration:none;
}
.tabs a:hover,.tabs button:hover{color:var(--text-strong)}
.tabs [aria-current="page"],.tabs [aria-selected="true"]{
  background:var(--surface-glass-strong);
  color:var(--text-strong);
  border-color:var(--border);
  box-shadow:var(--shadow-sm),var(--edge);
}
.tabs button:focus-visible,.tabs a:focus-visible{outline:none;box-shadow:var(--glow-focus)}

/* Kopfzeile mit Untertitel (Firma/Rolle bzw. E-Mail des Kontos). */
.topbar .who{flex:none;width:250px;min-width:0}
.topbar .who .who-1{font-size:16px;font-weight:600;letter-spacing:-.02em;
  color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .who .who-2{font-size:11.5px;color:var(--text-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .topbar .who{width:auto;flex:1 1 auto}
  .tabs{flex:1 1 100%;order:3}
}

/* Schlichte Kopfzeile ohne Glasleiste — das Fahrer-Konto ist im Design eine
   schmale Spalte, dort waere eine Vollbreiten-Leiste zu schwer. */
.topbar.plain{
  position:static;width:auto;margin:0 0 4px;padding:6px 2px 14px;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:0;border-radius:0;
}
.topbar.plain .brand-mark{height:38px;width:38px}

/* Rasterfelder muessen schrumpfen duerfen. Ohne das behaelt ein Grid-Item
   sein `min-width:auto` und weigert sich, schmaler zu werden als sein
   Inhalt — eine breite Tabelle laeuft dann aus der Karte heraus statt die
   Karte zu fuellen (Befund am Firmen-Konto, 23.08.). */
.card-grid > .card{min-width:0}

/* --- 8b. Listenzeilen statt Tabelle -------------------------------------- */
/* In einer Rasterspalte von ~350 px ist eine Tabelle mit sechs, sieben
   Spalten weder lesbar noch unterzubringen. Der Canvas zeigt diese Listen
   (Portal-Benutzer, gemerkte Geraete, Rechnungen) deshalb als gestapelte
   Kacheln — je Datensatz eine Zeile, Aktionen darunter. */
.rows{display:flex;flex-direction:column;gap:10px}
.row-tile{
  padding:13px 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-faint);
  background:var(--surface-glass-quiet);
}
.row-tile.inline{display:flex;align-items:center;gap:12px}
.row-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row-main{
  flex:1 1 160px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;color:var(--text-strong);
}
.row-foot{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.row-meta{font-size:12px;color:var(--text-faint)}
.row-foot .spacer{flex:1}
.row-act{
  background:none;border:0;padding:5px 9px;
  border-radius:var(--radius-sm);
  font-family:var(--font-sans);font-size:12.5px;font-weight:500;
  color:var(--accent-text);cursor:pointer;white-space:nowrap;
}
.row-act:hover{background:var(--accent-quiet);color:var(--accent-hover)}
.row-act.danger{color:var(--danger-500)}
.row-act.danger:hover{background:rgba(208,55,78,.12)}
.row-act:focus-visible{outline:none;box-shadow:var(--glow-focus)}

/* --- 4. Typografie ------------------------------------------------------- */
h1{margin:0;font-size:23px;font-weight:600;letter-spacing:-.03em;color:var(--text-strong)}
h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--text-strong)}

/* Micro-Label ueber einem Abschnitt. */
.k{
  margin:0 0 16px;
  font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}
.sub{margin-top:6px;font-size:14.5px;color:var(--text-muted)}
.note{font-size:12.5px;line-height:1.6;color:var(--text-faint)}
.msg{font-size:13.5px;margin-top:12px;min-height:16px}
.msg.err{color:var(--danger-500)}
.msg.ok{color:var(--success-500)}

a{color:var(--accent-text);text-decoration:none;font-weight:500}
a:hover{color:var(--accent-hover)}
.links{text-align:center;font-size:13.5px}

code,.secret,.mono{font-family:var(--font-mono)}
code{font-size:.92em;color:var(--text-strong)}

/* --- 5. Formulare -------------------------------------------------------- */
label{display:block;font-size:12px;font-weight:500;color:var(--text-muted);margin:14px 0 6px}
label:first-child{margin-top:0}

input,select,textarea{
  width:100%;
  font-family:var(--font-sans);
  font-size:15px;
  color:var(--text-strong);
  background:var(--surface-glass-quiet);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:11px 13px;
  transition:border-color .15s,box-shadow .15s;
}
select{height:44px;padding:0 12px}
input[type=date],input[type=datetime-local]{font-family:var(--font-mono)}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--glow-focus);
}
input[disabled],select[disabled],textarea[disabled]{opacity:.6;cursor:default}
input::placeholder,textarea::placeholder{color:var(--text-disabled)}
input[type=checkbox],input[type=radio]{
  width:17px;height:17px;padding:0;
  accent-color:var(--accent);cursor:pointer;
}
/* Kontrollkaestchen in einer Zeile mit ihrem Text. */
.stay{display:flex;align-items:center;gap:9px;margin-top:14px;
  font-size:14px;color:var(--text-strong);cursor:pointer}
.stay input{width:auto}

/* --- 6. Aktionen --------------------------------------------------------- */
.btn{
  display:block;width:100%;
  text-align:center;
  font-family:var(--font-sans);
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding:13px 18px;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  cursor:pointer;
  margin-top:16px;
  background:var(--accent);
  color:var(--text-on-accent);
  box-shadow:var(--glow-accent-soft);
  transition:background .15s,box-shadow .15s,transform .12s;
}
.btn:hover{background:var(--accent-hover);box-shadow:var(--glow-accent)}
.btn:active{background:var(--accent-press);transform:scale(.985)}
.btn:focus-visible{outline:none;box-shadow:var(--glow-focus)}
.btn[disabled]{opacity:.5;cursor:default;box-shadow:none;transform:none}

.btn.secondary{
  background:var(--surface-glass-strong);
  color:var(--text-strong);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-sm),var(--edge);
}
.btn.secondary:hover{background:var(--surface-solid-hover);box-shadow:var(--shadow-md),var(--edge)}
.btn.secondary:active{background:var(--surface-glass)}

.btn.ghost{background:transparent;color:var(--accent-text);border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--accent-quiet);color:var(--accent-hover);box-shadow:none}

.btn.danger{background:var(--danger-500);color:#fff;box-shadow:0 4px 14px rgba(208,55,78,.22)}
.btn.danger:hover{background:var(--danger-400)}

/* Nebeneinander statt Vollbreite. */
.btn.inline{width:auto;flex:1;margin-top:0;padding:10px 16px;font-size:14px;min-width:140px}
.btn-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

.link-btn{
  background:none;border:0;padding:0;
  font-family:var(--font-sans);font-size:13.5px;font-weight:500;
  color:var(--text-muted);cursor:pointer;
}
.link-btn:hover{color:var(--text-strong)}

/* Kleine Tabellen-Aktion. */
.mini{
  font-family:var(--font-sans);
  font-size:12.5px;font-weight:500;
  padding:6px 13px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);
  background:var(--surface-glass-strong);
  color:var(--text-strong);
  cursor:pointer;margin-right:6px;
  transition:background .15s,border-color .15s;
}
.mini:hover{background:var(--surface-solid-hover)}
.mini:focus-visible{outline:none;box-shadow:var(--glow-focus)}
.mini[disabled]{opacity:.5;cursor:default}
.mini.ok{background:rgba(15,157,110,.10);color:var(--success-500);border-color:rgba(15,157,110,.35)}
.mini.no{background:rgba(208,55,78,.08);color:var(--danger-500);border-color:rgba(208,55,78,.35)}
.mini.plain{background:var(--accent-quiet);color:var(--accent-text);border-color:rgba(59,134,247,.35)}

/* --- 7. Status ----------------------------------------------------------- */
.pill{
  display:inline-block;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;
  padding:3px 10px;border-radius:var(--radius-pill);
  background:rgba(15,157,110,.14);color:var(--success-500);
}
.pill.warn{background:rgba(208,55,78,.13);color:var(--danger-500)}
.pill.neutral{background:var(--surface-glass-quiet);color:var(--text-muted);
  box-shadow:inset 0 0 0 1px var(--border)}
.pill.accent{background:var(--accent-quiet);color:var(--accent-text)}

.warn-banner,.imp-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;
  border-radius:var(--radius-md);
  border:1px solid rgba(208,55,78,.42);
  background:rgba(208,55,78,.12);
  color:var(--danger-500);
  font-size:14px;font-weight:600;
}

/* --- 8. Daten ------------------------------------------------------------ */
dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:13.5px}
dt{color:var(--text-muted)}
dd{margin:0;font-weight:500;color:var(--text-strong);word-break:break-word}

table{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto}
/* Lange Kennungen brechen um, statt die Tabelle breitzuziehen. */
th,td{overflow-wrap:anywhere}
th{
  text-align:left;padding:6px 6px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);
  border-bottom:1px solid var(--border);
}
td{padding:10px 6px;border-bottom:1px solid var(--border-faint);color:var(--text)}
tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto;margin-top:12px}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--accent-quiet)}
/* Betraege und Kennungen in der Ziffernschrift. */
td .num,td.num,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* Eingabefelder direkt in Tabellenzellen bleiben schmal. */
td input,td select{
  width:auto;min-width:0;height:auto;
  font-size:12.5px;padding:6px 9px;border-radius:var(--radius-sm);
}
td input[type=checkbox]{width:auto}

/* --- 9. Web-Box (ersetzt alert/confirm/prompt, s. webbox.js) ------------- */
@keyframes wb-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes wb-scrim-in{from{opacity:0}to{opacity:1}}

.wb-scrim{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  padding:24px;
  background:var(--scrim);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:wb-scrim-in .16s ease-out;
}
.wb-box{
  width:100%;max-width:440px;
  max-height:calc(100vh - 48px);overflow-y:auto;
  background-image:var(--glass-fill);
  background-color:var(--surface-glass-strong);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg),var(--edge);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  padding:26px;
  animation:wb-in .22s cubic-bezier(.2,.8,.2,1);
}
.wb-head{display:flex;gap:14px;align-items:flex-start}
.wb-icon{
  flex:none;width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--accent-quiet);color:var(--accent);
}
.wb-icon svg{width:18px;height:18px;flex:none}
.wb-box[data-tone="danger"] .wb-icon{background:rgba(208,55,78,.14);color:var(--danger-500)}
.wb-box[data-tone="warn"] .wb-icon{background:rgba(199,122,6,.14);color:var(--warning-500)}
.wb-box[data-tone="success"] .wb-icon{background:rgba(15,157,110,.14);color:var(--success-500)}
.wb-title{font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--text-strong)}
.wb-text{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-muted);white-space:pre-line}
.wb-field{margin:18px 0 0}
.wb-field label{margin-top:0}
.wb-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;flex-wrap:wrap}
.wb-actions .btn{width:auto;margin-top:0;padding:10px 18px;font-size:14px;min-width:110px}
@media (max-width:420px){
  .wb-actions{flex-direction:column-reverse}
  .wb-actions .btn{width:100%}
}

/* --- 10. Bild-Ansichten -------------------------------------------------- */
/* Split-View (Firmen-Dashboard): links Bearbeiten, rechts Bilder. */
.rx-split{display:block}
@media (min-width:900px){
  .rx-split{display:grid;grid-template-columns:minmax(380px,5fr) 6fr;gap:18px;align-items:start}
  .rx-right{position:sticky;top:76px}
}
.rx-detail{border-top:1px solid var(--border);margin-top:14px;padding-top:6px}
.rx-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0 14px}
.rx-img{
  width:100%;max-height:220px;object-fit:contain;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface-glass-quiet);
  margin-top:6px;
}
#rx-imgs .rx-img{cursor:zoom-in}
.big-wrap{
  overflow:hidden;height:calc(100vh - 240px);min-height:320px;
  display:flex;align-items:center;justify-content:center;touch-action:none;
  background:var(--surface-glass-quiet);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
}
/* Die Groesse bleibt beim Zoomen die eingepasste — vergroessert wird nur per
   transform. Vorher hob .zoomed die Begrenzung auf, das Bild sprang auf
   Originalgroesse und war dann nicht mehr zu ueberblicken (10.09.2026). */
.big-img{max-width:100%;max-height:100%;cursor:zoom-in;user-select:none;border-radius:10px;
  transform-origin:center center;will-change:transform;touch-action:none;-webkit-user-drag:none}
.big-img.zoomed{cursor:grab}
.big-controls{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}

/* Lightbox — dunkel, unabhaengig vom Farbschema. */
.lb-backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(6,10,18,.86);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lb-wrap{overflow:hidden;width:100vw;height:100vh;display:flex;
  align-items:center;justify-content:center;touch-action:none}
.lb-img{max-width:95vw;max-height:95vh;cursor:zoom-in;user-select:none;border-radius:10px;
  transform-origin:center center;will-change:transform;touch-action:none;-webkit-user-drag:none}
.lb-img.zoomed{cursor:grab}
.lb-btn{
  position:fixed;z-index:101;width:44px;height:44px;border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.14);
  color:#fff;font-size:22px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-close{top:14px;right:14px}
.lb-zoom-in{bottom:18px;right:70px}
.lb-zoom-out{bottom:18px;right:14px}

/* 2FA: QR-Code + Schluessel zum Abtippen. */
.qr-box{display:flex;justify-content:center;margin:14px 0}
.qr-box img,.qr-box canvas,.qr-box table{border-radius:12px;background:#fff;padding:8px}
.qr-box table td{padding:0;border:0}
.secret{
  font-size:15px;letter-spacing:.08em;text-align:center;word-break:break-all;
  background:var(--surface-glass-quiet);
  border:1px solid var(--border-faint);
  border-radius:var(--radius-sm);padding:11px;
  color:var(--text-strong);
}

/* [hidden] muss .btn{display:block} schlagen (sonst sind per hidden
   ausgeblendete Buttons trotzdem sichtbar — Befund 2026-08-18). */
[hidden]{display:none !important}