/* kinux-ui.css — gemeinsames Stylesheet der server-rendered Gateway-Seiten
 * (Cutover Phase 2, Task 2.1).
 *
 * Design-Referenz seit Owner-Feedback UI4/12/18 (2026-07-05): das WEBSITE-Onboarding
 * (`~/Desktop/kinux-website/anmelden.html` + `_internal/onboarding.css`). Die
 * Login-/Konto-Welt wirkte «fremd» gegenueber der Marketing-Onboarding-Karte — jetzt
 * teilen beide dieselbe Optik: dunkelblaue Markentiefe (Ambient-Glow), EIN Akzent
 * (Eis-Blau #7AD4FF), elevierte Glas-Karte mit Lichtsaum, Akzent-Button mit Glow.
 * Der Login ist die Bruecke Marketing → App und sieht darum aus wie das Onboarding.
 *
 * Schrift: 'IBM Plex Sans' zuerst (wie die Website), aber OHNE Webfont-Load — die
 * Gateway-CSP ist `default-src 'none'` / `style-src 'self'` (kein font-src). Ohne
 * lokal installierte IBM-Plex-Familie faellt der Stack sauber auf system-ui zurueck;
 * KEIN externer Request, keine CSP-Lockerung.
 *
 * Zwei Seiten-Layouts via body-Klasse:
 *   .page-card  → zentrierte Auth-/Konto-Card (400px), Wortzug oben, Ambient-Glow
 *   .page-admin → volle Breite (Kundenverwaltung/Dashboard)
 *
 * Ausgeliefert ueber GET /gateway/static/kinux-ui.css (no-store — ein Deploy
 * serviert nie eine stale Datei). Unter der verschaerften CSP `style-src 'self'`
 * ist dieses Stylesheet die EINZIGE Style-Quelle (kein Inline-Styling mehr).
 */

:root {
  /* Flaechen — dunkelblaue Markentiefe (Onboarding-Tokens) */
  --bg: #070a12;            /* Onboarding-Grund (ambient) */
  --bg-sidebar: #0b1120;    /* tiefere Flaeche (Admin) */
  --bg-raised: #0e1626;     /* surface (Karten-/Kachelflaeche) */
  --bg-input: #121b2d;      /* surface-2 (Eingabefelder) */
  --bg-hover: #14203a;      /* Hover-/Focus-Flaeche */
  --bg-active: #182642;

  /* Linien — dezent hell auf dunkelblau (wie die Onboarding-Karte) */
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);

  /* Text */
  --text: #f2f6fc;          /* ink */
  --text-dim: #c7d2e5;      /* ink-2 */
  --text-faint: #9aa7bd;    /* muted */

  /* Akzent: Eis-Blau (kinux) — welt-uebergreifend identisch */
  --accent: #7ad4ff;
  --accent-hover: #a4e2ff;
  --accent-dim: rgba(122, 212, 255, 0.12);
  --accent-border: rgba(122, 212, 255, 0.4);
  --accent-contrast: #03212e;  /* accent-ink: Text auf dem Akzent-Button */
  --accent-ring: rgba(122, 212, 255, 0.13);

  /* Signale */
  --danger: #ffb4b4;
  --danger-bg: #7a2c2c;
  --ok: #a5eac8;
  --warn: #f0b232;

  --radius: 12px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent-dim);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =========================================================================
 * Layout: zentrierte Card (Auth/Konto/Billing) vs. volle Breite (Admin)
 *
 * Ambient-Glow wie `.ob-stage` des Website-Onboardings: drei weiche radiale
 * Ebenen (oberer Eisblau-Schein, gegenlaeufiger tiefer Glow, dezente Vignette).
 * Keine Formen, keine Linien — ruhige Markentiefe statt Produkt-Fake.
 * ========================================================================= */
.page-card {
  position: relative;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  overflow: hidden;
  background:
    radial-gradient(140% 110% at 50% -8%, rgba(122, 212, 255, 0.10) 0%, rgba(122, 212, 255, 0.03) 26%, rgba(7, 10, 18, 0) 52%),
    radial-gradient(120% 90% at 50% 116%, rgba(40, 86, 140, 0.20) 0%, rgba(20, 44, 80, 0.07) 40%, rgba(7, 10, 18, 0) 70%),
    radial-gradient(125% 120% at 50% 0%, #0e1a30 0%, #0a1224 46%, #070a12 82%);
}
/* atmender Eisblau-Schein oben (wie .ob-stage::before) */
.page-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -22vmax;
  width: 78vmax;
  height: 78vmax;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(122, 212, 255, 0.14), rgba(122, 212, 255, 0.04) 55%, rgba(7, 10, 18, 0) 78%);
  filter: blur(8px);
  opacity: 0.9;
  pointer-events: none;
  animation: ob-breathe 14s ease-in-out infinite;
}
@keyframes ob-breathe {
  0%, 100% { opacity: 0.82; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

.card {
  position: relative;
  z-index: 1;
  width: min(92vw, 400px);
  /* elevierte Glas-Karte wie .ob-card */
  background: linear-gradient(180deg, rgba(16, 24, 42, 0.92), rgba(10, 16, 29, 0.94));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2.2rem 1.9rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 40px 90px -34px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(122, 212, 255, 0.04);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  animation: ob-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* feiner Lichtsaum oben auf der Karte (wie .ob-card::before) */
.card::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: -1px;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(122, 212, 255, 0.55), transparent);
  opacity: 0.7;
}
@keyframes ob-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-admin {
  padding: 1.6rem 1.8rem;
}

/* =========================================================================
 * Typografie + Wortzug — Titelhierarchie wie das Onboarding («Willkommen zurück»):
 * grosser, ruhiger Titel + gedaempfter Untertitel, in der Card zentriert.
 * ========================================================================= */
h1 {
  /* kinux-Wortzug als Text (Brand-Hard-Gate: keine Bild-Marke generieren). */
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.1;
  margin: 0 0 0.35rem;
}

h2 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dim);
  margin: 1.4rem 0 0.2rem;
}

.sub {
  color: var(--text-faint);
  font-size: 0.92rem;
  margin: 0 0 1.4rem;
}

/* In der Auth-/Konto-Card sind Titel + Untertitel zentriert (Onboarding-Anmutung);
 * die Formularfelder darunter bleiben linksbuendig (Labels lesen sich links besser). */
.page-card h1,
.page-card .sub {
  text-align: center;
}

section {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.2s ease;
}
a:hover {
  border-bottom-color: var(--accent-border);
}

.err {
  color: var(--danger);
  font-size: 0.85rem;
  margin: 0.6rem 0;
}

.ok {
  color: var(--ok);
}

.warn {
  color: var(--warn);
}

.muted {
  color: var(--text-faint);
  font-size: 0.8rem;
  margin-top: 1.1rem;
}

/* P2c: LINKS in Fliesstext-Hinweisen («Bereits ein Konto?», «Kein Konto?»)
 * bleiben Text, werden aber DEUTLICH: Akzentfarbe + Unterstrich + lesbare
 * Groesse (Owner-Kritik «winzige Links am Kartenende sind kaum sichtbar»). */
.muted a {
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-bottom: 0;
}

/* =========================================================================
 * P2c: Ghost-Button-Baustein — EIN Muster fuer sekundaere Navigation
 * (sichtbarer Rahmen, Padding, Radius, Hover-Aufhellung) statt Mini-Links.
 * Formsprache wie `.ob-back` des Onboardings (helle rgba-Raender auf dunkelblau).
 * `.nav-actions` = Zeile aus Ghost-Buttons (Fusszeilen/Rueckwege).
 * ========================================================================= */
.nav-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
}

a.ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
a.ghost-link:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

/* Abstands-Utilities (ersetzen die frueheren style="margin-top:…"-Attribute) */
.mt-lg { margin-top: 1.2rem; }
.mt-md { margin-top: 0.8rem; }
.mt-sm { margin-top: 0.4rem; }

/* =========================================================================
 * Formulare — Inputs/Buttons im Stil der Onboarding-Karte (.feld / .go)
 * ========================================================================= */
label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-dim);
  margin: 0.85rem 0 0.4rem;
}

input {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
input:hover {
  border-color: #243149;
}
input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-hover);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
input::placeholder {
  color: var(--text-faint);
}
/* Geburtsdatum: dunkles Farbschema fuer den nativen Datums-Picker */
input[type='date'] {
  color-scheme: dark;
}

input[type='checkbox'] {
  width: auto;
  margin-top: 0.15rem;
  accent-color: var(--accent);
}

/* Pflicht-Checkbox-Zeile (AGB/Datenschutz im Signup) */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Block B — einklappbarer Recovery-Code-Weg auf /login/mfa (reines HTML-
 * <details>, kein JS unter CSP script-src 'self'). */
.mfa-recovery {
  margin-top: 0.8rem;
}
.mfa-recovery summary {
  font-size: 0.8rem;
  color: var(--text-dim);
  cursor: pointer;
}
.mfa-recovery summary:hover {
  color: var(--text);
}

button {
  width: 100%;
  margin-top: 1.3rem;
  padding: 0.85rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(122, 212, 255, 0.38);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
button:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 14px 32px -10px rgba(122, 212, 255, 0.5);
  transform: translateY(-1px);
}
button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 6px 16px -10px rgba(122, 212, 255, 0.42);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

button.ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  margin-top: 0.6rem;
  box-shadow: none;
}
button.ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.4);
}

/* P1a: Ghost-Button als Link (z.B. «Zurück zum Chat» auf der Admin-Abo-Karte) —
 * gleiche Optik wie button.ghost, aber als <a> navigierbar. */
a.ghost-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1.3rem;
  padding: 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  text-align: center;
  font-weight: 600;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
a.ghost-button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

button.danger {
  background: var(--danger-bg);
  color: #fff;
  box-shadow: none;
}

/* Aktions-Form (z.B. Checkout/Portal auf /billing) — Block mit ruhigem Abstand */
form.action-form {
  margin: 0.4rem 0;
}

/* Passwort-Feld mit Anzeigen/Verbergen-Umschalter (password-toggle.js) —
 * Knopf-Optik wie `.pw-knopf` des Onboardings (ruhige Flaeche, weicher Radius). */
.pw-wrap {
  position: relative;
}
/* Platz fuer den Icon-Button (Auge) rechts im Feld */
.pw-wrap input {
  padding-right: 3rem;
}
.pw-toggle {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  color: var(--text-faint);
  box-shadow: none;
}
.pw-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
}
.pw-toggle:hover:not(:disabled) {
  transform: translateY(-50%);
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.32);
}

/* =========================================================================
 * P3.1: Passwort-Policy-Live-Checkliste (unter dem Setz-Feld auf Signup/Reset).
 * password-policy.js hakt die Punkte via Klasse `is-met` ab (kein style=-Attribut,
 * CSP style-src 'self'). Offener Ring = offen, gefuellter Akzent-Ring + Grün = erfuellt.
 * ========================================================================= */
.pw-check {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--text-faint);
}
.pw-check li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.3rem 0;
  transition: color 0.2s ease;
}
.pw-check li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.pw-check li.is-met {
  color: var(--ok);
}
.pw-check li.is-met::before {
  background: var(--accent);
  border-color: var(--accent);
}

/* =========================================================================
 * Badges + Status-Karte (Billing/Konto/Admin)
 * ========================================================================= */
.badge {
  display: inline-block;
  padding: 0.08rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  margin-left: 0.35rem;
  white-space: nowrap;
}
.badge.ok {
  color: var(--ok);
  border-color: rgba(102, 224, 166, 0.4);
}
.badge.err {
  color: var(--danger);
  border-color: rgba(255, 138, 138, 0.4);
}
.badge.warn {
  color: var(--warn);
  border-color: rgba(240, 178, 50, 0.4);
}

/* Abo-Status-Karte auf /billing: Plan + Badge + Trial-Resttage auf einen Blick */
.status-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin: 0 0 1.1rem;
}
.status-card p {
  margin: 0;
}
.status-card .muted {
  margin-top: 0.3rem;
}

/* =========================================================================
 * Tabellen (Admin-Panel, Status-Seite)
 * ========================================================================= */
table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

th,
td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
}

/* Kompakte Untertitel der Status-Seite (Downstream/Metriken) */
.section-title {
  font-size: 0.95rem;
  color: var(--text-dim);
}

/* =========================================================================
 * Admin-Panel: kompakte Inline-Formulare + Aktions-Leiste
 * ========================================================================= */
.page-admin form {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  margin: 0.1rem 0;
}

.page-admin button {
  width: auto;
  margin-top: 0;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  font-size: 0.76rem;
  box-shadow: none;
}

.page-admin select {
  padding: 0.3rem;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  color: var(--text);
  font-family: inherit;
  font-size: 0.76rem;
}

/* P2b: Bereichs-Navigation (Sticky-Leiste mit Anker-Tabs, kein JS) */
.admin-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  /* wrap: die fuenf Pills sind zusammen breiter als 390px — ohne Umbruch
   * weitet Mobile-Safari den Layout-Viewport (Zoom-out der ganzen Seite). */
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.55rem 0;
  margin: 0 0 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.admin-nav a {
  display: inline-flex;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 500;
}
.admin-nav a:hover {
  color: var(--text);
  background: var(--bg-hover);
  border-color: var(--border-strong);
  border-bottom-color: var(--border-strong);
}

/* Anker-Ziele nicht unter der Sticky-Leiste verschwinden lassen */
.admin-section {
  scroll-margin-top: 64px;
}
.admin-section .section-title {
  margin-top: 1.6rem;
}

/* Kurzhinweis zur «Limit-Plan»-Aktion (sichtbar, EINMAL ueber der Tabelle) */
.admin-plan-hint {
  margin: 0.2rem 0 0.8rem;
}

/* =========================================================================
 * Admin-Redesign (Owner-UI-Runde 2026-07-05): einklappbare Sektionen
 * (<details class="admin-fold">, <summary> = Header mit Zaehler), horizontale
 * Scroll-Flaeche fuer die breite Kundentabelle, zweistufiges Inline-Confirm.
 * ========================================================================= */
details.admin-fold {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: 0.2rem 1rem 1rem;
  margin: 1rem 0;
}
details.admin-fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.1rem;
  margin: 0;
  font-weight: 600;
}
details.admin-fold > summary::-webkit-details-marker {
  display: none;
}
details.admin-fold > summary::before {
  content: "+";
  width: 1.1em;
  color: var(--text-faint);
  font-weight: 400;
}
details.admin-fold[open] > summary::before {
  content: "\2212"; /* Minuszeichen */
}
details.admin-fold[open] > summary {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.7rem;
}

/* Horizontale Scroll-Flaeche fuer die Admin-Tabellen (Kunden 10 Spalten,
 * Feedback 5, Monitoring 2). */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Tabellen im Scroller nehmen ihre NATUERLICHE Breite (max-content) statt sich
 * auf min-content quetschen zu lassen: die Quetschung stapelte auf 390px die
 * Aktions-Formulare jeder Kunden-Zeile uebereinander (Riesen-Leerhoehe) und
 * brach Daten mitten im Wort («2026-» / «07-05»). min-width:100% haelt die
 * Desktop-Optik (volle Breite, wie zuvor width:100%). */
.table-scroll table {
  width: max-content;
  min-width: 100%;
}
/* Kunden-Tabelle: Email darf brechen (lange Adressen ziehen die Scroll-Flaeche
 * sonst endlos auf), Plan/Abo/Trial-Ende/Seit bleiben einzeilig (nie mitten im
 * Datum umbrechen). */
.customers-table td:first-child {
  max-width: 26ch;
  overflow-wrap: anywhere;
}
.customers-table td:nth-child(2),
.customers-table td:nth-child(3),
.customers-table td:nth-child(4),
.customers-table td:nth-child(5) {
  white-space: nowrap;
}
/* Feedback-Tabelle: Fliesstext-Spalten (Frage/Antwort/Notiz) umbrechen — auch
 * unbrechbare Tokens wie URLs in Antworten — statt das Panel zu sprengen.
 * width:100% (uebersteuert max-content oben) + min-width als Lesbarkeits-
 * Untergrenze im Scroller; Datum/Bewertung bleiben einzeilig. */
.table-scroll .feedback-table {
  width: 100%;
  min-width: 560px;
}
.feedback-table td {
  overflow-wrap: anywhere;
}
.feedback-table th:nth-child(-n + 2),
.feedback-table td:nth-child(-n + 2) {
  white-space: nowrap;
}

/* Zweistufiges Inline-Confirm (admin-confirm.js) — nur Klassen, kein style=. */
.confirm-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.confirm-q {
  color: var(--text-dim);
  font-size: 0.78rem;
  white-space: nowrap;
}
.is-hidden {
  display: none !important;
}

/* P1d/P2b: Flash-Bestaetigung nach Aktionen — ruhige, sichtbare Zeile */
.flash {
  padding: 0.55rem 0.9rem;
  margin: 0 0 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.flash.ok {
  color: var(--ok);
  border-color: rgba(102, 224, 166, 0.4);
  background: rgba(102, 224, 166, 0.08);
}

/* P2b: Aktions-Layout der Kunden-Zeile — primaere Aktionen links,
 * destruktive (Sperren/Löschen) rot abgesetzt rechts */
.acts {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.acts-main,
.acts-danger {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.acts-danger {
  margin-left: auto;
  padding-left: 0.9rem;
  border-left: 1px solid var(--border);
}

/* Einheitliche, kompakte Aktions-Buttons mit klarer Hierarchie:
 * neutral (Limit-Plan/Usage-Reset) vs. destruktiv (rot umrandet) */
.page-admin .acts button {
  background: var(--bg-input);
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  white-space: nowrap;
}
.page-admin .acts button:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent-border);
  transform: none;
}
.page-admin .acts button.danger {
  background: transparent;
  color: var(--danger);
  border-color: rgba(255, 138, 138, 0.4);
}
.page-admin .acts button.danger:hover:not(:disabled) {
  background: rgba(255, 138, 138, 0.1);
  border-color: rgba(255, 138, 138, 0.6);
}

/* =========================================================================
 * Dashboard-Kacheln (Cutover Phase 4, Task 4.2): Kunden/Abos/Trials/Chats/
 * Kosten auf einen Blick — volle Breite, umbruchfaehig auf schmalen Screens
 * ========================================================================= */
.tiles {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0 0 1.4rem;
}

.tile {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  min-width: 150px;
  flex: 1 1 150px;
}

.tile-value {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
}

.tile-label {
  color: var(--text-dim);
  font-size: 0.75rem;
}

.tile-note {
  color: var(--text-faint);
  font-size: 0.72rem;
  margin-top: 0.15rem;
}

/* =========================================================================
 * Bewegungsreduktion respektieren (wie das Onboarding): keine Ambient-/
 * Karten-Animation, keine Button-Verschiebung.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-card::before,
  .card {
    animation: none;
  }
  button:hover:not(:disabled),
  a.ghost-link:hover {
    transform: none;
  }
}

/* =========================================================================
 * MOBILE / TOUCH (F1, Owner UI7) — 375/390/414/768. Alle Regeln hier sind
 * MOBILE-ONLY (pointer:coarse bzw. max-width); der Desktop-Look bleibt
 * unveraendert. Gleiche Standards wie die Website-Welt: Formularfelder ≥16px
 * (iOS-Fokus-Zoom vermeiden), Touch-Targets ≥44px (WCAG 2.5.5 / iOS HIG),
 * Safe-Area unten (Notch/Home-Indicator), teure Effekte auf schwachen mobilen
 * GPUs reduziert.
 * ========================================================================= */

/* (1) iOS-Fokus-Zoom: Formularfelder MUESSEN auf Touch ≥16px sein, sonst zoomt
 * iOS Safari beim Fokus rein. Nur Touch-Geraete (pointer:coarse) → Desktop bleibt
 * bei 15px (pixelgenau). */
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* (2) Touch-Targets ≥44px: primaerer Button, Ghost-Buttons/-Links, der
   * Passwort-Auge-Toggle und der einklappbare Recovery-Weg (/login/mfa). */
  button,
  a.ghost-link,
  a.ghost-button {
    min-height: 44px;
  }
  .pw-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
  }
  /* Mehr Platz rechts im Feld fuer den vergroesserten Auge-Button. */
  .pw-wrap input {
    padding-right: 3.6rem;
  }
  .mfa-recovery summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* Admin-Tab-Leiste (sekundaer) — Anker-Tabs ebenfalls gut tappbar. */
  .admin-nav a {
    align-items: center;
    min-height: 44px;
  }
}

/* (3) Schmale Screens (≤480px, deckt 375/390/414 ab): Karte strammer, Titel
 * etwas kleiner, Ambient-Blur runter (backdrop-filter ist auf schwachen mobilen
 * GPUs teuer; die Kartenflaeche ist ohnehin nahezu deckend), Safe-Area unten. */
@media (max-width: 480px) {
  .card {
    padding: 1.9rem 1.4rem 1.6rem;
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    backdrop-filter: blur(6px) saturate(115%);
  }
  h1 {
    font-size: 1.55rem;
  }
  .page-card {
    /* dvh statt vh: hohe Formulare (Signup+Checkliste) werden nicht hinter der
     * ein-/ausblendenden mobilen URL-Leiste abgeschnitten. */
    min-height: 100dvh;
    /* Safe-Area: die zentrierte Karte nicht unter Notch/Home-Indicator schieben. */
    padding: 20px 14px;
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* (4) Admin-Tabellen (sekundaer): JEDE Tabelle scrollt in ihrer eigenen
 * .table-scroll-Flaeche (s. Tabellen-Sektion) — die Seite selbst darf nie
 * horizontal ueberlaufen, sonst weitet Mobile-Safari den Layout-Viewport
 * (Zoom-out, Panels ragen ueber den Rand). Die fruehere Body-Scroll-Regel
 * (overflow-x:auto auf .page-admin) hat genau das ausgeloest;
 * overflow-x:hidden bleibt als Sicherheitsnetz gegen kuenftige breite
 * Elemente ausserhalb eines Scroll-Wrappers. */
@media (max-width: 768px) {
  .page-admin {
    overflow-x: hidden;
  }
}

/* (5) Admin auf schmalen Screens (≤480px): kompaktere Zell-Paddings und
 * strafferes Seiten-/Panel-Padding — mehr nutzbare Breite fuer die Tabellen. */
@media (max-width: 480px) {
  .page-admin {
    padding: 1.1rem 0.8rem;
  }
  .page-admin th,
  .page-admin td {
    padding: 0.4rem 0.45rem;
  }
  details.admin-fold {
    padding: 0.2rem 0.7rem 0.8rem;
  }
  /* Die umgebrochene Sticky-Nav ist zweizeilig (~110px mit 44px-Touch-Targets) —
   * Anker-Ziele entsprechend tiefer ansetzen. */
  .admin-section {
    scroll-margin-top: 120px;
  }
}