/* =====================================================================
 * NOA Admin – Legacy-CSS (Bridge) · NOA-Markenbild
 *
 * Enthält die Admin-spezifischen Klassen (kpi-card, users-table,
 * list-table, btn-primary, Status-Badges, detail-/edit-Formen …) sowie
 * NEU die Hero-/Auth-Komponenten fürs Dashboard und den Login.
 *
 * Importiert NACH den Foundation-Files — Komponenten-Klassen mit gleichem
 * Namen (.card, .topbar …) gewinnen aus components/layout. ALLE Klassen-
 * NAMEN sind unverändert; nur Werte wurden auf das NOA-System gebracht.
 * ===================================================================== */

:root {
  --bg: #f6f9fb;
  --surface: #ffffff;
  --border: #e1e8ee;
  --text: #0d1722;
  --text-muted: #647281;
  --primary: #0a2540;        /* NOA-Navy */
  --accent: #00aeb8;         /* NOA-Türkis */
  --accent-soft: #cffafe;    /* Türkis-100 */
  --success: #15a34a;
  --success-soft: #d6f5e0;
  --warning: #e08522;
  --warning-soft: #fdeec6;
  --danger: #e0413e;
  --danger-soft: #fde0e0;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
body {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--color-primary-700, #00646a); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Skip-Link (A11y) — base.css überschreibt das Aussehen, hier nur Fallback */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--primary, #0a2540); color: #fff;
  padding: 0.5rem 1rem; text-decoration: none; z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; text-decoration: none; }

/* Focus-Indicators (Fallback; base.css setzt box-shadow-Focus) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent, #00aeb8);
  outline-offset: 2px;
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-size: 20px; line-height: 1; vertical-align: middle;
}

/* Topbar (legacy — durch layout.css .topbar ersetzt) */
.topbar {
  height: 56px; background: var(--primary); color: #fff;
  display: flex; align-items: center; padding: 0 1.25rem; gap: 1rem;
  position: sticky; top: 0; z-index: 30;
}
.topbar-logo { font-weight: 800; font-size: 1.125rem; letter-spacing: 0.02em; }
.topbar-spacer { flex: 1; }
.topbar-user { font-size: 0.875rem; opacity: 0.85; }
.topbar-logout {
  background: rgba(255,255,255,0.1); border: 0; color: #fff;
  padding: 0.4rem 0.85rem; border-radius: var(--radius-pill, 999px);
  font-size: 0.8125rem; cursor: pointer;
}
.topbar-logout:hover { background: rgba(255,255,255,0.2); }
.topbar-hamburger {
  display: none; background: transparent; border: 0; color: #fff;
  padding: 0.25rem; cursor: pointer;
}

/* Shell + Sidebar (legacy — durch catbar/subbar ersetzt) */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 56px); }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 1rem 0; overflow-y: auto; }
.sidebar-group { margin-bottom: 1rem; }
.sidebar-group-label {
  padding: 0.5rem 1.25rem 0.25rem; font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600;
}
.sidebar-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1.25rem;
  color: var(--text); border-left: 3px solid transparent; font-size: 0.9375rem; min-height: 40px;
}
.sidebar-item:hover { background: var(--color-primary-50, #ecfeff); text-decoration: none; }
.sidebar-item.is-active {
  background: var(--accent-soft); border-left-color: var(--accent);
  font-weight: 600; color: var(--color-primary-700, #00646a);
}
.sidebar-item-stub-badge { margin-left: auto; color: var(--warning); font-size: 0.5rem; opacity: 0.6; line-height: 1; }

/* Content (legacy — durch layout.css .content ersetzt) */
.content { padding: 1.5rem 2rem; max-width: 100%; overflow-x: auto; }
.content-header h1 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; margin: 0 0 1.25rem; letter-spacing: -0.02em; }

/* Cards (Look kommt aus components.css; hier nur Flow-Abstand) */
.card { margin-bottom: var(--space-4, 16px); }
.stub-card { text-align: center; padding: 2.75rem 1.5rem; }
.stub-card h2 { font-family: var(--font-display); font-size: 1.125rem; margin: 0 0 0.75rem; font-weight: 700; }
.stub-card p { margin: 0.5rem 0; color: var(--text-muted); }
.stub-card .hint { font-size: 0.8125rem; margin-top: 1rem; }
.flash-error { background: var(--danger-soft); border-color: var(--danger); color: #7f1d1d; }

/* =====================================================================
 * NEU · Cockpit-Hero (Dashboard) — NOA Navy→Türkis
 * ===================================================================== */
.level-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-2xl, 28px);
  background: var(--grad-hero);
  color: #fff;
  padding: var(--space-6, 24px) var(--space-8, 32px);
  margin-bottom: var(--space-6, 24px);
  box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr minmax(220px, 300px);
  gap: var(--space-7, 28px); align-items: center;
}
.level-hero::after {
  content: ""; position: absolute; top: -40px; right: -30px;
  width: 240px; height: 240px;
  background: radial-gradient(closest-side, rgba(0,174,184,.45), transparent 70%);
  filter: blur(8px); pointer-events: none;
}
.level-hero__main { position: relative; z-index: 1; min-width: 0; }
.level-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2, 8px);
  font-size: var(--text-xs, 12px); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #9ff0f5; margin-bottom: var(--space-3, 12px);
}
.level-hero__eyebrow .material-symbols-outlined { font-size: 18px; }
.level-hero__title {
  font-family: var(--font-display); font-size: var(--text-3xl, 36px); line-height: 1.05;
  font-weight: 800; letter-spacing: -0.025em; color: #fff; margin: 0;
}
.level-hero__sub { margin-top: var(--space-2, 8px); color: rgba(255,255,255,.82); font-size: var(--text-sm, 13px); max-width: 60ch; }
.level-hero__meta { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; margin-top: var(--space-4, 16px); }
.level-hero__chip {
  display: inline-flex; align-items: center; gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) var(--space-3, 12px); border-radius: var(--radius-pill, 999px);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  font-size: var(--text-sm, 13px); font-weight: 600; color: #fff; backdrop-filter: blur(4px);
}
.level-hero__chip .material-symbols-outlined { font-size: 18px; color: #ffce86; }
.level-hero__chip b { font-variant-numeric: tabular-nums; }
/* Rechte Stat-Seite (z.B. Umsatz aktueller Monat) */
.level-hero__stat { position: relative; z-index: 1; text-align: right; }
.level-hero__stat-label { font-size: var(--text-xs, 12px); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.level-hero__stat-value { font-family: var(--font-display); font-size: var(--text-3xl, 36px); font-weight: 800; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; margin-top: 4px; }
.level-hero__stat-delta { font-size: var(--text-sm, 13px); font-weight: 600; margin-top: 4px; }
.level-hero__stat-delta.is-up { color: #7ef0b0; }
.level-hero__stat-delta.is-down { color: #ffb1ae; }
.level-hero__stat-delta.is-neutral { color: rgba(255,255,255,.7); }
@media (max-width: 860px) {
  .level-hero { grid-template-columns: 1fr; gap: var(--space-4, 16px); padding: var(--space-6, 24px); }
  .level-hero__stat { text-align: left; }
}

/* =====================================================================
 * KPI-Cards (Achievement-Tiles) — analytics.php u.a.
 * ===================================================================== */
.kpi-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4, 16px); margin-bottom: var(--space-6, 24px);
}
.kpi-card {
  position: relative; padding: var(--space-5, 20px); overflow: hidden; isolation: isolate;
  transition: box-shadow var(--dur-base, 190ms) var(--ease-out), transform var(--dur-base, 190ms) var(--ease-out);
}
.kpi-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand); opacity: .9; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow, 280ms) var(--ease-out);
}
.kpi-card:hover::before { transform: scaleX(1); }
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md, 11px);
  background: var(--color-primary-50, #ecfeff); color: var(--color-primary-700, #00646a);
  display: inline-grid; place-items: center; margin-bottom: var(--space-3, 12px);
  box-shadow: inset 0 0 0 1px rgba(0,174,184,.18);
}
.kpi-card-icon .material-symbols-outlined { font-size: 24px; }
.kpi-card-headline {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); font-weight: 600; margin-top: 0.4rem;
}
.kpi-card-primary {
  font-family: var(--font-display); font-size: 1.85rem; font-weight: 800;
  letter-spacing: -0.02em; margin: 0.25rem 0 0; font-variant-numeric: tabular-nums;
}
.kpi-card-secondary { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }

/* Revenue Card */
.revenue-card { padding: var(--space-6, 24px); margin-bottom: var(--space-6, 24px); }
.revenue-primary { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; font-variant-numeric: tabular-nums; }
.revenue-delta { font-size: 0.9375rem; font-weight: 600; margin: 0.25rem 0 1rem; }
.revenue-delta.is-up    { color: var(--success); }
.revenue-delta.is-down  { color: var(--danger); }
.revenue-delta.is-neutral { color: var(--text-muted); }
.sparkline { width: 100%; height: 60px; display: block; }

/* List Cards */
.list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4, 16px); }
.list-card-title { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; margin: 0 0 0.75rem; color: var(--text); }
.list-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.list-table th {
  text-align: left; font-weight: 700; color: var(--text-muted);
  padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--border);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.list-table td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); }
.list-table tr:last-child td { border-bottom: 0; }
.list-empty { padding: 1rem; color: var(--text-muted); font-size: 0.875rem; text-align: center; }

/* Status Badge (Basis — Pill-Form) */
.status-badge {
  display: inline-flex; align-items: center; padding: 0.18rem 0.55rem;
  border-radius: var(--radius-pill, 999px); font-size: 0.75rem; font-weight: 600;
}
.status-pending   { background: var(--warning-soft); color: #92400e; }
.status-paid      { background: var(--color-info-100, #d4f0fc); color: var(--color-info-700, #0369a1); }
.status-shipped   { background: #e7e2fd; color: #5b3cc4; }
.status-delivered { background: var(--success-soft); color: #166534; }
.status-cancelled,
.status-refunded  { background: #eef2f5; color: #4b5563; }

/* Filter-Form */
.users-filter-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center; flex-wrap: wrap; }
.users-filter-search {
  flex: 1; min-width: 200px; padding: 0.55rem 0.8rem; border: 1px solid var(--border-default, #cbd6df);
  border-radius: var(--radius-md, 11px); font-size: 0.9375rem; min-height: 40px;
}
.users-filter-status {
  padding: 0.55rem 0.8rem; border: 1px solid var(--border-default, #cbd6df);
  border-radius: var(--radius-md, 11px); font-size: 0.9375rem; min-height: 40px; background: #fff;
}
.users-filter-search:focus-visible, .users-filter-status:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus);
}

/* Buttons (legacy, single-dash) — NOA-Brand */
.btn-primary {
  padding: 0.55rem 1.1rem; background: var(--color-primary-600, #008189); background-image: var(--grad-brand);
  color: #fff; border: 0; border-radius: var(--radius-md, 11px); font-size: 0.9375rem; font-weight: 600;
  cursor: pointer; min-height: 40px; box-shadow: var(--shadow-brand);
  transition: filter var(--dur-fast, 130ms) var(--ease-out), transform var(--dur-fast, 130ms) var(--ease-out);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: scale(.97); }
.btn-secondary {
  padding: 0.55rem 1.1rem; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-default, #cbd6df); border-radius: var(--radius-md, 11px);
  font-size: 0.9375rem; font-weight: 600; cursor: pointer; min-height: 40px;
  text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
  transition: background var(--dur-fast, 130ms) var(--ease-out), transform var(--dur-fast, 130ms) var(--ease-out);
}
.btn-secondary:hover { background: var(--bg-muted, #eef3f6); text-decoration: none; }
.btn-secondary:active { transform: scale(.97); }
.btn-danger {
  padding: 0.55rem 1.1rem; background: var(--danger); color: #fff; border: 0;
  border-radius: var(--radius-md, 11px); font-size: 0.9375rem; font-weight: 600; cursor: pointer; min-height: 40px;
  transition: background var(--dur-fast, 130ms) var(--ease-out), transform var(--dur-fast, 130ms) var(--ease-out);
}
.btn-danger:hover { background: #b91c1c; }
.btn-danger:active { transform: scale(.97); }
.btn-danger:disabled, .btn-secondary:disabled { background: #eef2f5; color: #9aa6b2; cursor: not-allowed; transform: none; }

/* Users-Table */
.users-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.users-table thead th {
  text-align: left; font-weight: 700; color: var(--text-muted); padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border); font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.05em; background: var(--bg-muted, #eef3f6);
}
.users-table tbody tr { cursor: pointer; transition: background var(--dur-fast, 130ms) var(--ease-out); }
.users-table tbody tr:hover { background: var(--color-primary-50, #ecfeff); }
.users-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); }
.users-table td a { color: var(--text); text-decoration: none; }
.users-table tbody tr:hover td a { text-decoration: underline; color: var(--color-primary-700, #00646a); }

/* User-Status-Badges */
.user-status-active   { background: var(--success-soft); color: #166534; }
.user-status-locked   { background: var(--warning-soft); color: #92400e; }
.user-status-deleted  { background: #eef2f5; color: #6b7280; }

/* Order-Status-Badges */
.order-status-pending   { background: var(--warning-soft); color: #92400e; }
.order-status-paid      { background: var(--color-info-100, #d4f0fc); color: var(--color-info-700, #0369a1); }
.order-status-shipped   { background: #e7e2fd; color: #5b3cc4; }
.order-status-delivered { background: var(--success-soft); color: #166534; }
.order-status-cancelled { background: #eef2f5; color: #6b7280; }
.order-status-refunded  { background: var(--danger-soft); color: #991b1b; }

/* Payment-Status-Badges */
.payment-status-open     { background: var(--warning-soft); color: #92400e; }
.payment-status-paid     { background: var(--success-soft); color: #166534; }
.payment-status-failed   { background: var(--danger-soft); color: #991b1b; }
.payment-status-refunded { background: #eef2f5; color: #6b7280; }

/* Blog-Status-Badges */
.blog-status-draft     { background: #eef2f5; color: #6b7280; }
.blog-status-published { background: var(--success-soft); color: #166534; }
.blog-status-archived  { background: var(--warning-soft); color: #92400e; }

/* Newsletter-Status-Badges */
.newsletter-status-pending      { background: var(--warning-soft); color: #92400e; }
.newsletter-status-active       { background: var(--success-soft); color: #166534; }
.newsletter-status-unsubscribed { background: #eef2f5; color: #6b7280; }
.newsletter-status-bounced      { background: var(--danger-soft); color: #991b1b; }

/* Subscription-Status-Badges */
.sub-status-pending   { background: var(--warning-soft); color: #92400e; }
.sub-status-active    { background: var(--success-soft); color: #166534; }
.sub-status-paused    { background: var(--warning-soft); color: #92400e; }
.sub-status-cancelled { background: #eef2f5; color: #6b7280; }

/* Actor-Type-Badges (Audit) */
.actor-badge {
  display: inline-block; padding: 0.1rem 0.4rem; border-radius: var(--radius-sm, 8px);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.actor-admin   { background: var(--accent-soft); color: var(--color-primary-700, #00646a); }
.actor-user    { background: var(--success-soft); color: #166534; }
.actor-partner { background: var(--warning-soft); color: #92400e; }
.actor-system  { background: #eef2f5; color: #6b7280; }
.actor-guest   { background: var(--danger-soft); color: #991b1b; }

/* Address-Type-Badges */
.address-type-shipping { background: var(--color-info-100, #d4f0fc); color: var(--color-info-700, #0369a1); }
.address-type-billing  { background: var(--warning-soft); color: #92400e; }

/* Generische Status-Badges */
.status-active { background: var(--success-soft); color: #166534; }
.status-locked { background: #eef2f5; color: #6b7280; }

/* Audit-Full-Table */
.audit-full-table td { vertical-align: top; font-size: 0.8125rem; padding: 0.45rem 0.5rem; }
.audit-full-table code { word-break: break-all; }

/* Settings-Table */
.settings-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.settings-table th, .settings-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.settings-table th { font-weight: 700; background: var(--bg-muted, #eef3f6); font-size: 0.8125rem; }
.settings-table tr:last-child td { border-bottom: none; }

/* Order-Items-Tabelle */
.order-items-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.order-items-table th, .order-items-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; }
.order-items-table th { font-weight: 700; background: var(--bg-muted, #eef3f6); }
.order-items-table .amount { text-align: right; font-variant-numeric: tabular-nums; }

/* Order-Summary */
.order-summary { max-width: 320px; margin-left: auto; font-variant-numeric: tabular-nums; }
.order-summary-row { display: flex; justify-content: space-between; padding: 0.25rem 0; }
.order-summary-row.total {
  font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem;
  border-top: 1px solid var(--border); padding-top: 0.5rem; margin-top: 0.25rem;
}

/* Address-Block */
.address-block { font-size: 0.875rem; line-height: 1.5; padding: 0.65rem 0.85rem; background: var(--bg-muted, #eef3f6); border-radius: var(--radius-md, 11px); }

/* Inline-Form */
.inline-form { display: inline-flex; gap: 0.5rem; align-items: center; margin: 0; }
.inline-form select { padding: 0.4rem 0.55rem; border: 1px solid var(--border-default, #cbd6df); border-radius: var(--radius-md, 11px); font-size: 0.875rem; }

/* Partner-Status-Badges */
.partner-status-pending   { background: var(--color-info-100, #d4f0fc); color: var(--color-info-700, #0369a1); }
.partner-status-active    { background: var(--success-soft); color: #166534; }
.partner-status-suspended { background: var(--warning-soft); color: #92400e; }
.partner-status-deleted   { background: #eef2f5; color: #6b7280; }

/* Lead-Status-Badges */
.lead-status-new         { background: var(--color-info-100, #d4f0fc); color: var(--color-info-700, #0369a1); }
.lead-status-in_progress { background: var(--warning-soft); color: #92400e; }
.lead-status-contacted   { background: #e7e2fd; color: #5b3cc4; }
.lead-status-won         { background: var(--success-soft); color: #166534; }
.lead-status-lost        { background: #eef2f5; color: #4b5563; }

/* Textarea in Edit-Form */
.edit-form .form-row textarea {
  padding: 0.55rem 0.8rem; border: 1px solid var(--border-default, #cbd6df); border-radius: var(--radius-md, 11px);
  font-size: 0.9375rem; width: 100%; max-width: 480px; font-family: inherit; resize: vertical;
}
.edit-form hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

/* Pagination (legacy) */
.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; padding: 0.75rem 0; font-size: 0.875rem; color: var(--text-muted);
}
.pagination-info { text-align: center; flex: 1; }
.pagination a {
  padding: 0.45rem 0.9rem; background: var(--surface); border: 1px solid var(--border-default, #cbd6df);
  border-radius: var(--radius-md, 11px); text-decoration: none; color: var(--text);
  transition: background var(--dur-fast, 130ms) var(--ease-out);
}
.pagination a:hover { background: var(--bg-muted, #eef3f6); }
.pagination .is-disabled { background: #eef2f5; color: #9aa6b2; cursor: not-allowed; pointer-events: none; }

/* Detail-Page */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4, 16px); margin-bottom: var(--space-6, 24px); }
.detail-readonly-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 0.5rem; padding: 0.4rem 0;
  border-bottom: 1px solid var(--border); font-size: 0.875rem;
}
.detail-readonly-row:last-child { border-bottom: 0; }
.detail-readonly-row .label { color: var(--text-muted); }
.detail-readonly-row .value { font-weight: 600; word-break: break-word; }
.detail-status-card { text-align: center; padding: 1.5rem 1rem; }
.detail-status-card .status-badge { font-size: 1rem; padding: 0.35rem 0.8rem; }
.detail-status-card .user-id-small { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.75rem; }

/* Edit-Form */
.edit-form .form-row { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; align-items: center; padding: 0.5rem 0; }
.edit-form .form-row label { color: var(--text); font-weight: 600; font-size: 0.9375rem; }
.edit-form .form-row input, .edit-form .form-row select {
  padding: 0.55rem 0.8rem; border: 1px solid var(--border-default, #cbd6df); border-radius: var(--radius-md, 11px);
  font-size: 0.9375rem; min-height: 40px; width: 100%; max-width: 360px;
}
.edit-form .form-row input:focus-visible, .edit-form .form-row select:focus-visible, .edit-form .form-row textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus);
}
.edit-form .form-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* Gefahrenzone */
.danger-zone { border-color: var(--danger); background: var(--danger-soft); }
.danger-zone h3 { color: var(--danger); margin: 0 0 0.5rem; font-size: 1rem; }
.danger-zone p { margin: 0 0 1rem; color: #7f1d1d; font-size: 0.875rem; }

/* Flash Messages */
.flash-success { background: var(--success-soft); border-color: var(--success); color: #14532d; }
.flash-info    { background: var(--accent-soft); border-color: var(--accent); color: var(--color-primary-800, #014e54); }
.flash-warning { background: var(--warning-soft); border-color: var(--warning); color: #92400e; }

/* Audit-Liste Detail */
.audit-mini-list code { font-size: 0.75rem; background: var(--bg-muted, #eef3f6); padding: 0.1rem 0.3rem; border-radius: 3px; }

/* =====================================================================
 * NEU · Auth-Layout (Login) — NOA-Brand
 * ===================================================================== */
.auth-shell {
  min-height: 100vh; min-height: 100dvh;
  background: var(--grad-hero); position: relative; overflow: hidden;
  display: grid; place-items: center; padding: var(--space-6, 24px);
}
.auth-shell::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(700px 360px at 15% 10%, rgba(0,174,184,.35), transparent 60%),
    radial-gradient(600px 320px at 85% 90%, rgba(245,163,59,.18), transparent 60%);
  pointer-events: none;
}
.auth-card {
  position: relative; z-index: 1; background: var(--bg-surface);
  border-radius: var(--radius-xl, 22px); box-shadow: var(--shadow-lg);
  padding: var(--space-8, 32px) var(--space-7, 28px); width: 100%; max-width: 420px;
  border: 1px solid rgba(255,255,255,.5);
}
.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px); color: var(--text-primary);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl, 22px); letter-spacing: -0.02em;
}
.auth-brand__sub {
  display: block; text-align: center; color: var(--color-primary-700, #00646a);
  font-size: var(--text-xs, 12px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 0; margin-bottom: var(--space-5, 20px);
}

/* Loading states for async-submit forms */
[aria-busy="true"] { opacity: 0.7; pointer-events: none; transition: opacity 0.15s ease; }
[aria-busy="true"] button[type="submit"]:disabled { cursor: progress; }

/* Responsive */
@media (max-width: 1023px) {
  .detail-grid { grid-template-columns: 1fr; }
  .edit-form .form-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .detail-readonly-row { grid-template-columns: 1fr; gap: 0.1rem; }
}
@media (max-width: 1023px) {
  .shell { grid-template-columns: 200px 1fr; }
  .content { padding: 1.25rem 1.5rem; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 56px; left: 0; bottom: 0; width: 260px; z-index: 40;
    transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 4px 0 16px rgba(0,0,0,0.15);
  }
  .sidebar.is-open { transform: translateX(0); }
  .topbar-hamburger { display: inline-flex; }
  .content { padding: 1rem; }
  .kpi-grid { grid-template-columns: 1fr; }
  .list-grid { grid-template-columns: 1fr; }
  .revenue-primary { font-size: 1.6rem; }
  .data-table, .users-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* ===== DARK MODE · legacy.css (auto-generated aus CSS-Audit, gezielte Flächen/Text-Korrekturen) ===== */
[data-theme="dark"] { --bg: #061a2e; }
[data-theme="dark"] { --surface: #1d2733; }
[data-theme="dark"] { --text: #f6f9fb; }
[data-theme="dark"] { --border: #323d49; }
[data-theme="dark"] .users-filter-status { background: var(--bg-surface); }
[data-theme="dark"] .users-table tbody tr:hover { background: var(--bg-elevated); }
[data-theme="dark"] .sidebar-item:hover { background: var(--bg-elevated); }