/* ═══════════════════════════════════════════════════════════════
   STRUCTON Suite — 10 Themes
   Pro Theme: Override der Brand-Tokens via [data-theme="…"]
   Default-Theme (swiss) ist :root in tokens.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. SWISS (default) — schon in tokens.css ── */
[data-theme="swiss"] {
  /* explizit, falls jemand zurückschaltet */
  --c-ink: #0A0A0A; --c-ink-soft: #1A1A1A;
  --c-surface: #FFFFFF; --c-soft: #F5F5F5;
  --c-line: #D4D4D4; --c-line-soft: #E8E8E8;
  --c-mid: #6E6E6E; --c-mid-soft: #999999;
  --c-accent: #E63946; --c-accent-soft: #FCEAEC;
  --c-sales: #E63946; --c-sales-soft: #FCEAEC;
  --c-kunden: #134E5E; --c-kunden-soft: #E0EAEC;
  --c-tools: #2A8A3F; --c-tools-soft: #E3F1E6;
  --c-comm: #E96B3A; --c-comm-soft: #FCEBE0;
  --c-admin: #6E6E6E; --c-admin-soft: #EEEEEE;
  --f-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius-0: 0px;
}

/* ─────────────────────────────────────────────────────────────
   STRUCTON FORWARD V2 — Rundungen + Chrome-Verläufe
   Akzent-Rot bleibt Heart. Container weich gerundet. Buttons mit
   metallischem Chrome-Look + Shimmer-Sweep on hover. Tiefe via
   Gradients statt flach.
   ───────────────────────────────────────────────────────────── */
[data-theme="structon-forward"] {
  --c-ink: #0E0E10; --c-ink-soft: #1F1F22;
  --c-ink-rich: #000000;
  --c-surface: #FFFFFF; --c-soft: #F7F7F9;
  --c-line: #E8E8EC; --c-line-soft: #F0F0F4;
  --c-mid: #6B6B72; --c-mid-soft: #9B9BA2;

  /* Akzent-Familie — erweitert für Chrome-Verläufe */
  --c-accent: #E63946;
  --c-accent-deep: #B91C2A;
  --c-accent-warm: #FF6B6B;
  --c-accent-soft: #FCEAEC;
  --c-accent-glow: rgba(230, 57, 70, 0.45);
  --c-accent-bright: #FF4757;

  /* Kategorie-Farben */
  --c-sales: #E63946; --c-sales-soft: #FCEAEC;
  --c-kunden: #0F4C5C; --c-kunden-soft: #DEEAF0;
  --c-tools: #2A8A3F; --c-tools-soft: #E3F1E6;
  --c-comm: #C2410C; --c-comm-soft: #FAE5D5;
  --c-admin: #404040; --c-admin-soft: #EEEEEE;

  --c-success: #0A8E3B; --c-warning: #C2741B;
  --c-danger:  #B91C2A; --c-info: #1E40AF;

  /* Schriften */
  --f-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --f-mono:    'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Rundungen — moderat (V4: Buttons deutlich weniger rund) */
  --radius-0: 12px;        /* Cards, Container */
  --radius-pill: 999px;
  --sf-radius-btn: 8px;
  --sf-radius-input: 8px;
  --sf-radius-modal: 14px;
  --sf-radius-small: 8px;

  /* Chrome-Gradient-Tokens */
  --sf-chrome-light: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 50%, #ECECEF 100%);
  --sf-chrome-dark:  linear-gradient(180deg, #2A2A2D 0%, #18181B 60%, #0A0A0B 100%);
  --sf-chrome-accent: linear-gradient(180deg, #FF4757 0%, #E63946 50%, #B91C2A 100%);
  --sf-chrome-accent-hover: linear-gradient(180deg, #FF6B6B 0%, #E63946 50%, #C42B3A 100%);

  /* Grün-Familie (V4) — Speichern/Bestätigen-Aktionen */
  --sf-green:        #0FA951;
  --sf-green-deep:   #0A8E3B;
  --sf-green-deeper: #097433;
  --sf-green-soft:   #E2F4E8;
  --sf-green-grad:        linear-gradient(180deg, #14B45A 0%, #0A8E3B 100%);
  --sf-green-grad-hover:  linear-gradient(180deg, #18C063 0%, #0C9A42 100%);
}

/* Atmosphäre — soft Mesh-Gradient global */
[data-theme="structon-forward"] body {
  background-color: #F7F7F9;
  background-image:
    radial-gradient(ellipse 900px 500px at 0% 0%, rgba(230, 57, 70, 0.05), transparent 60%),
    radial-gradient(ellipse 700px 400px at 100% 100%, rgba(15, 76, 92, 0.04), transparent 55%);
  background-attachment: fixed;
}

/* Topbar bleibt theme-uebergreifend dunkel (Calvin: 'dunkler Ton').
   Nur der untere Akzent-Streifen bleibt erhalten — auf dunkel jetzt subtiler */
[data-theme="structon-forward"] .topbar {
  position: relative;
}
[data-theme="structon-forward"] .topbar::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--c-accent) 50%, transparent 100%);
  opacity: 0.6;
}

/* Sidebar — sanft gerundete Bereiche */
[data-theme="structon-forward"] .sidebar {
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
}

/* Typografie */
[data-theme="structon-forward"] h1 { letter-spacing: -0.04em; font-weight: 800; }
[data-theme="structon-forward"] h2 { letter-spacing: -0.03em; font-weight: 700; }
[data-theme="structon-forward"] h3 { letter-spacing: -0.02em; font-weight: 700; }

/* ─── CARDS — Gerundet + Chrome-Subtle-Glow ─── */
[data-theme="structon-forward"] .card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFC 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-0);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
[data-theme="structon-forward"] .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 1) 50%, transparent 100%);
  pointer-events: none;
}
[data-theme="structon-forward"] .card:hover {
  transform: translateY(-2px);
  border-color: var(--c-line);              /* kein rot-tint mehr im Border */
  box-shadow:
    0 12px 28px -12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS V5 — „Glow Edge" (2026-06-12, nach Calvins Vorlage)
   Portierung des React/Tailwind „glowing-button" auf pures CSS,
   minimal an Structon Forward angepasst:
   - helle Verlaufs-Fläche (to top: weiß → soft), Ink-Text
   - 5px Lichtkante rechts mit Glow-Schein, gleitet beim Hover raus
   - dezenter Farb-Wash von rechts (via 7,5 % → to 20 %)
   - Glow-Farbe nach Semantik:
       neutral (.btn)                     → Petrol  #1696B8
       affirmativ (.primary/.secondary/
       .set-btn.primary = Speichern …)   → Grün    #0FA951
       destruktiv (.danger)              → Rot     #E63946
       .ghost                            → ohne Glow (leise Tertiär-Aktion)
   ─────────────────────────────────────────────────────────────── */
[data-theme="structon-forward"] .btn,
[data-theme="structon-forward"] .set-btn {
  --glow: #1696B8;
  --glow-via: rgba(22, 150, 184, 0.075);
  --glow-to: rgba(22, 150, 184, 0.2);
  height: 38px;
  padding: 0 18px;
  border-radius: 6px;
  border: 1px solid var(--c-line);
  border-right: 0;
  background: linear-gradient(to top, #FFFFFF 0%, #F1F1F4 100%);
  color: var(--c-ink);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.005em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 200ms ease, box-shadow 200ms ease;
}
[data-theme="structon-forward"] .btn.small,
[data-theme="structon-forward"] .set-btn.xs {
  height: 31px;
  padding: 0 12px;
  font-size: 12px;
}
[data-theme="structon-forward"] .btn:hover,
[data-theme="structon-forward"] .btn.secondary:hover,
[data-theme="structon-forward"] .btn.primary:hover,
[data-theme="structon-forward"] .btn.danger:hover,
[data-theme="structon-forward"] .set-btn:hover,
[data-theme="structon-forward"] .set-btn.primary:hover {
  /* Fläche bleibt hell — überstimmt die alten Basis-Hover (schwarz/rot) */
  background: linear-gradient(to top, #FFFFFF 0%, #F1F1F4 100%);
  border-color: var(--c-line);
  box-shadow: none;
  transform: none;
  color: var(--c-mid);
}

/* Farb-Wash von rechts + Top-Hairline (after-Layer der Vorlage) */
[data-theme="structon-forward"] .btn::after,
[data-theme="structon-forward"] .set-btn::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 40%, var(--glow-via) 70%, var(--glow-to) 100%);
  box-shadow: inset 0 1px 0 rgba(14, 14, 16, 0.15);
  pointer-events: none;
  z-index: 2;
}

/* Lichtkante rechts — gleitet beim Hover heraus (before-Layer der Vorlage) */
[data-theme="structon-forward"] .btn::before,
[data-theme="structon-forward"] .set-btn::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 60%;
  background: var(--glow);
  border-radius: 3px 0 0 3px;
  box-shadow: -2px 0 10px var(--glow);
  transition: transform 200ms ease;
  z-index: 1;
}
[data-theme="structon-forward"] .btn:hover::before,
[data-theme="structon-forward"] .set-btn:hover::before {
  transform: translate(100%, -50%);
}

/* AFFIRMATIV — Speichern / Bestätigen / Anlegen → grüne Lichtkante */
[data-theme="structon-forward"] .btn.secondary,
[data-theme="structon-forward"] .btn.primary,
[data-theme="structon-forward"] .set-btn.primary {
  --glow: var(--sf-green, #0FA951);
  --glow-via: rgba(15, 169, 81, 0.075);
  --glow-to: rgba(15, 169, 81, 0.2);
  font-weight: 700;
}
[data-theme="structon-forward"] .btn.secondary:hover,
[data-theme="structon-forward"] .btn.primary:hover,
[data-theme="structon-forward"] .set-btn.primary:hover {
  color: var(--sf-green-deeper, #097433);
}

/* DESTRUKTIV — rote Lichtkante, Text kippt auf Rot */
[data-theme="structon-forward"] .btn.danger,
[data-theme="structon-forward"] .set-btn.danger {
  --glow: var(--c-accent, #E63946);
  --glow-via: rgba(230, 57, 70, 0.075);
  --glow-to: rgba(230, 57, 70, 0.2);
}
[data-theme="structon-forward"] .btn.danger:hover {
  color: var(--c-accent-deep);
}

/* GHOST — leise, ohne Glow-Mechanik */
[data-theme="structon-forward"] .btn.ghost,
[data-theme="structon-forward"] .set-btn.ghost {
  border-right: 1px solid var(--c-line);
  background: #FFFFFF;
  color: #2A2A2E;
}
[data-theme="structon-forward"] .btn.ghost::before,
[data-theme="structon-forward"] .btn.ghost::after,
[data-theme="structon-forward"] .set-btn.ghost::before,
[data-theme="structon-forward"] .set-btn.ghost::after {
  display: none;
}
[data-theme="structon-forward"] .btn.ghost:hover,
[data-theme="structon-forward"] .set-btn.ghost:hover {
  background: #F4F4F6;
  border-color: #B8B8C0;
  color: #0E0E10;
}

/* Fokus & Disabled */
[data-theme="structon-forward"] .btn:focus-visible,
[data-theme="structon-forward"] .set-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--glow-to), 0 0 0 1px var(--glow);
}
[data-theme="structon-forward"] .btn:disabled,
[data-theme="structon-forward"] .set-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
[data-theme="structon-forward"] .btn:disabled::before,
[data-theme="structon-forward"] .set-btn:disabled::before {
  display: none;
}

/* ─── INPUTS — gerundet + soft Focus-Glow ─── */
[data-theme="structon-forward"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="structon-forward"] select,
[data-theme="structon-forward"] textarea {
  border: 1px solid var(--c-line);
  background: linear-gradient(180deg, #FAFAFC 0%, #FFFFFF 100%);
  border-radius: var(--sf-radius-input);
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
[data-theme="structon-forward"] input:hover:not(:focus),
[data-theme="structon-forward"] select:hover:not(:focus),
[data-theme="structon-forward"] textarea:hover:not(:focus) {
  border-color: var(--c-mid-soft);
  background: #FFFFFF;
}
[data-theme="structon-forward"] input:focus,
[data-theme="structon-forward"] select:focus,
[data-theme="structon-forward"] textarea:focus {
  outline: none;
  border-color: #3A3A40;
  background: #FFFFFF;
  box-shadow:
    0 0 0 4px rgba(14, 14, 16, 0.08),
    inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ─── BRANDING in Forward — Login + Topbar-Marke ─── */
[data-theme="structon-forward"] .login .login-card {
  border: 1px solid var(--c-line);
  border-top: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(14, 14, 16, 0.25), 0 2px 8px rgba(0, 0, 0, 0.05);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFC 100%);
  overflow: hidden;
  position: relative;
}
[data-theme="structon-forward"] .login .login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sf-green) 0%, #0F4C5C 55%, var(--c-accent) 100%);
}
[data-theme="structon-forward"] .login .brand img {
  border-radius: 12px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.35);
}
[data-theme="structon-forward"] .login .brand .name {
  letter-spacing: -0.03em;
  font-weight: 800;
}
[data-theme="structon-forward"] .topbar .brand .name {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Modal — Top-Streifen grün statt rot (Speichern-Dialoge sind affirmativ) */
[data-theme="structon-forward"] .modal .modal-dialog {
  border-top: 3px solid var(--sf-green-deep);
  border-radius: var(--sf-radius-modal);
}

/* ─── SIDEBAR NAV — Pill-Active + smooth Hover ─── */
[data-theme="structon-forward"] .nav-item {
  border-radius: var(--sf-radius-small);
  margin: 2px 8px;
  padding: 8px 12px;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
  border-left: none;
}
[data-theme="structon-forward"] .nav-item:hover {
  background: linear-gradient(90deg, var(--c-line-soft) 0%, transparent 100%);
  transform: translateX(2px);
}
[data-theme="structon-forward"] .nav-item.active,
[data-theme="structon-forward"] .nav-item.is-active {
  background: var(--sf-chrome-dark);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow:
    0 4px 12px -4px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
[data-theme="structon-forward"] .nav-item.active::after,
[data-theme="structon-forward"] .nav-item.is-active::after {
  content: '';
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 8px var(--c-accent-glow);
  animation: sf-pulse-dot 2s ease-in-out infinite;
}
@keyframes sf-pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--c-accent-glow); }
  50%      { opacity: 0.6; box-shadow: 0 0 4px var(--c-accent-glow); }
}

/* ─── HAUPT-SIDEBAR (.nav-link) — gleiches Pill-Treatment wie Settings ─── */
[data-theme="structon-forward"] .sidebar .nav-link {
  border-radius: 999px;
  margin: 2px 8px;
  padding: 8px 12px;
  border-left: none !important;          /* overrides die kategorialen Border-Left-Defaults */
  position: relative;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
[data-theme="structon-forward"] .sidebar .nav-link:hover {
  background: rgba(230, 57, 70, 0.08);
  transform: translateX(2px);
}
[data-theme="structon-forward"] .sidebar .nav-link:hover .icon {
  color: var(--c-accent);
}
[data-theme="structon-forward"] .sidebar .nav-link.is-active {
  background: #0E0E10;
  color: #FFFFFF;
  font-weight: 600;
  box-shadow:
    0 4px 12px -4px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme="structon-forward"] .sidebar .nav-link.is-active .icon {
  color: var(--c-accent);
}
[data-theme="structon-forward"] .sidebar .nav-link.is-active::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 10px var(--c-accent-glow);
  animation: sf-pulse-dot 2s ease-in-out infinite;
}
/* Section-Title-Dot: ALLE Sections nutzen Akzent-Rot im Forward-Theme */
[data-theme="structon-forward"] .sidebar .nav-section-title .dot {
  background: var(--c-accent) !important;
}
/* Topbar: konstantere rote Linie unten statt nur fadendem Gradient */
[data-theme="structon-forward"] .topbar::after {
  background: linear-gradient(90deg, transparent 0%, var(--c-accent) 30%, var(--c-accent) 70%, transparent 100%);
  opacity: 0.7;
}

/* ─── BADGES + PILLS — Chrome-Look mit Inset-Highlight ─── */
/* ═══════════════════════════════════════════════════════════════
   BADGES + STATUS-PILLS V3 — Klarer Kontrast, kein Chrome-Wash
   Calvin: "alles soll gute Kontraste haben damit man alles erkennt"
   ─────────────────────────────────────────────────────────────── */
[data-theme="structon-forward"] .badge,
[data-theme="structon-forward"] .role-badge,
[data-theme="structon-forward"] .status-pill {
  font-family: var(--f-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--c-soft);
  color: var(--c-ink);
  border: 1px solid transparent;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1.4;
  min-height: 18px;
  text-align: center;
}

/* BAU-Badges (planned/in_development Tools) — dezenter, passt zum Forward */
[data-theme="structon-forward"] .baustelle,
[data-theme="structon-forward"] .sidebar .nav-link .baustelle {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--c-soft);
  color: var(--c-mid);
  border: 1px solid var(--c-line);
}

/* Color-Coded Badges — explizit gesetzte Hintergründe für maximalen Kontrast */
[data-theme="structon-forward"] .badge.sales,
[data-theme="structon-forward"] .badge.priority-critical,
[data-theme="structon-forward"] .badge.priority-high {
  background: var(--c-accent);
  color: #FFFFFF;
}
[data-theme="structon-forward"] .badge.kunden { background: var(--c-kunden); color: #FFFFFF; }
[data-theme="structon-forward"] .badge.tools  { background: var(--c-tools);  color: #FFFFFF; }
[data-theme="structon-forward"] .badge.comm   { background: var(--c-comm);   color: #FFFFFF; }
[data-theme="structon-forward"] .badge.admin  { background: var(--c-admin);  color: #FFFFFF; }
[data-theme="structon-forward"] .badge.outline {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}
[data-theme="structon-forward"] .badge.priority-normal { background: var(--c-soft); color: var(--c-mid); }
[data-theme="structon-forward"] .badge.priority-low { background: var(--c-line-soft); color: var(--c-mid); }

/* Status-Pills — eindeutige Farb-Kombinationen */
[data-theme="structon-forward"] .status-pill.status-ok,
[data-theme="structon-forward"] .status-pill.ok { background: #DCFCE7; color: #14532D; border-color: #86EFAC; }
[data-theme="structon-forward"] .status-pill.status-warn,
[data-theme="structon-forward"] .status-pill.warn { background: #FEF3C7; color: #78350F; border-color: #FCD34D; }
[data-theme="structon-forward"] .status-pill.status-error { background: #FEE2E2; color: #7F1D1D; border-color: #FCA5A5; }
[data-theme="structon-forward"] .status-pill.status-off,
[data-theme="structon-forward"] .status-pill.off { background: var(--c-soft); color: var(--c-mid); border-color: var(--c-line); }
[data-theme="structon-forward"] .status-pill.status-info { background: #DBEAFE; color: #1E3A8A; border-color: #93C5FD; }

/* Role-Pills */
[data-theme="structon-forward"] .role-badge.admin,
[data-theme="structon-forward"] .role-pill.role-admin { background: #FEE2E2; color: #7F1D1D; border: 1px solid #FCA5A5; }
[data-theme="structon-forward"] .role-badge.agent,
[data-theme="structon-forward"] .role-pill.role-agent { background: #DBEAFE; color: #1E3A8A; border: 1px solid #93C5FD; }
[data-theme="structon-forward"] .role-badge.external,
[data-theme="structon-forward"] .role-pill.role-external { background: #F3F4F6; color: #374151; border: 1px solid #D1D5DB; }

/* Deal-Status-Pills — sales bg semi-transparent für bessere Lesbarkeit */
[data-theme="structon-forward"] .badge[class*="lead_"],
[data-theme="structon-forward"] .badge[class*="analyse"],
[data-theme="structon-forward"] .badge[class*="angebot"] {
  background: #FEE2E2;
  color: #7F1D1D;
  border: 1px solid #FCA5A5;
}
[data-theme="structon-forward"] .badge[class*="gewonnen"] {
  background: #DCFCE7;
  color: #14532D;
  border: 1px solid #86EFAC;
}
[data-theme="structon-forward"] .badge[class*="verloren"] {
  background: var(--c-soft);
  color: var(--c-mid);
  border: 1px solid var(--c-line);
}

/* ─── LOGIN — Showcase mit Mesh + Chrome-Card ─── */
[data-theme="structon-forward"] .login,
[data-theme="structon-forward"] body.is-login {
  background-color: #F7F7F9;
  background-image:
    radial-gradient(ellipse 1100px 600px at 20% 30%, rgba(230, 57, 70, 0.10), transparent 60%),
    radial-gradient(ellipse 900px 500px at 80% 70%, rgba(15, 76, 92, 0.06), transparent 55%);
}
[data-theme="structon-forward"] .login-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--sf-radius-modal);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFC 100%);
  box-shadow:
    0 32px 80px -20px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  position: relative;
  overflow: hidden;
}
[data-theme="structon-forward"] .login-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sf-green) 0%, #0F4C5C 55%, var(--c-accent) 100%);
  box-shadow: 0 4px 12px -2px var(--c-accent-glow);
}

/* ─── PULSE für Critical-States ─── */
[data-theme="structon-forward"] .badge.priority-critical::before,
[data-theme="structon-forward"] .deadline-overdue::before,
[data-theme="structon-forward"] .status-pill.status-error::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  margin-right: 6px;
  vertical-align: middle;
  animation: sf-pulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 var(--c-accent-glow);
}
@keyframes sf-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--c-accent-glow); opacity: 1; }
  50%      { box-shadow: 0 0 0 8px transparent; opacity: 0.7; }
}

/* ─── LOADING — Chrome-Dots-Sequence ─── */
[data-theme="structon-forward"] .loading,
[data-theme="structon-forward"] .settings-loading {
  position: relative;
  text-align: center;
  padding: var(--s-8) 0;
  color: transparent;
  min-height: 60px;
}
[data-theme="structon-forward"] .loading::after,
[data-theme="structon-forward"] .settings-loading::after {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sf-green);
  margin: 0 8px;
  animation: sf-dots 1.4s ease-in-out infinite both;
  box-shadow:
    -20px 0 0 -2px var(--sf-green-deep),
     20px 0 0 -2px var(--sf-green-deep),
    0 4px 12px rgba(15, 169, 81, 0.4);
}
@keyframes sf-dots {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40%           { opacity: 1; transform: scale(1); }
}
[data-theme="structon-forward"] .settings-spinner { display: none; }

/* ─── PROGRESS — Chrome-Fill mit Glow am Ende ─── */
[data-theme="structon-forward"] .progress-bar {
  background: var(--c-line-soft);
  height: 6px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}
[data-theme="structon-forward"] .progress-fill {
  background: var(--sf-chrome-dark);
  height: 100%;
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
[data-theme="structon-forward"] .progress-fill::after {
  content: '';
  position: absolute;
  right: 0; top: -2px; bottom: -2px;
  width: 4px;
  background: var(--c-accent);
  border-radius: 4px;
  box-shadow: 0 0 8px var(--c-accent-glow);
}

/* ─── TABLES — sanft gerundet + hover-bg ─── */
[data-theme="structon-forward"] table {
  border-collapse: collapse;
  border-radius: var(--sf-radius-small);
  overflow: hidden;
}
[data-theme="structon-forward"] table thead th {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-mid);
  background: linear-gradient(180deg, #F7F7F9 0%, #EFEFF3 100%);
  border-bottom: 1px solid var(--c-line);
  padding: 12px 10px;
}
[data-theme="structon-forward"] table tbody tr {
  transition: background 150ms ease;
}
[data-theme="structon-forward"] table tbody tr:hover {
  background: rgba(230, 57, 70, 0.04);     /* sehr dezent, kein full pink-wash */
}

/* ─── KPI / STAT-CARDS — Chrome mit oberer Akzent-Linie ─── */
[data-theme="structon-forward"] .stat-card,
[data-theme="structon-forward"] .set-stat-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFC 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-0);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
/* Top-Border-Akzent: konsequent Akzent-Rot (statt kategorial 4-färbig) */
[data-theme="structon-forward"] .stat-card::before,
[data-theme="structon-forward"] .set-stat-card::before,
[data-theme="structon-forward"] .stat-card[data-cat]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--sf-chrome-accent);
  opacity: 1;       /* immer sichtbar (statt nur on hover) */
  transition: opacity 280ms ease, height 280ms ease;
}
[data-theme="structon-forward"] .stat-card:hover::before,
[data-theme="structon-forward"] .set-stat-card:hover::before {
  height: 4px;       /* leichte Verstärkung beim Hover */
}

/* ─── MODAL — generous radius + Grün-Streifen oben ─── */
[data-theme="structon-forward"] .modal-dialog {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFC 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--sf-radius-modal);
  box-shadow:
    0 40px 100px -30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  /* KEIN position:relative — überschreibt sonst das position:fixed der Basis
     und der Dialog rutscht in den Dokumentfluss statt Viewport-Mitte.
     fixed ist selbst Anker fürs ::before. */
  overflow: hidden;
}
[data-theme="structon-forward"] .modal-dialog::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--sf-green-grad);
}
[data-theme="structon-forward"] .modal-head h3 {
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* ─── AI-CHAT-BUBBLES — Chrome-Verläufe ─── */
[data-theme="structon-forward"] .ai-chat-msg-ai .ai-chat-bubble {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F7 100%);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="structon-forward"] .ai-chat-msg-user .ai-chat-bubble {
  background: var(--sf-chrome-dark);
  color: #FFFFFF;
  border-radius: 18px;
  border-bottom-right-radius: 4px;
  box-shadow:
    0 8px 24px -8px var(--c-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

/* ─── WIZARD-BUBBLES + CHAT (im Modal) ─── */
[data-theme="structon-forward"] .wiz-msg-bubble {
  border-radius: 18px;
  background: linear-gradient(180deg, #FAFAFC 0%, #F0F0F4 100%);
  border: 1px solid var(--c-line);
}
[data-theme="structon-forward"] .wiz-msg-user .wiz-msg-bubble {
  background: var(--sf-chrome-dark);
  color: #FFFFFF;
  border-color: var(--c-accent-deep);
  border-bottom-right-radius: 6px;
  box-shadow:
    0 4px 12px -4px var(--c-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
[data-theme="structon-forward"] .wiz-msg-ai .wiz-msg-bubble {
  border-bottom-left-radius: 6px;
}

/* ─── CHIPS + QUICK-REPLIES — kleine Chrome-Pills ─── */
[data-theme="structon-forward"] .wiz-chip {
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F7 100%);
  border: 1px solid var(--c-line);
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
[data-theme="structon-forward"] .wiz-chip:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #ECECEF 100%);
  border-color: var(--c-mid-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="structon-forward"] .wiz-chip.is-active {
  background: var(--sf-green-grad);
  color: #FFFFFF;
  border-color: var(--c-accent-deep);
  box-shadow:
    0 4px 12px -2px var(--c-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ─── PROJEKT-AVATAR-STACK — runde Avatare mit Chrome ─── */
[data-theme="structon-forward"] .project-owner-avatar,
[data-theme="structon-forward"] .set-avatar-big,
[data-theme="structon-forward"] .settings-nav-avatar {
  background: var(--sf-chrome-dark);
  box-shadow:
    0 4px 12px -4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
[data-theme="structon-forward"] .project-owner-avatar.is-lead {
  background: var(--sf-chrome-accent);
  box-shadow:
    0 4px 12px -4px var(--c-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
[data-theme="structon-forward"] .project-owner-avatar:hover {
  transform: scale(1.12);
  box-shadow:
    0 8px 24px -4px var(--c-accent-glow),
    0 0 0 2px var(--c-accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ─── TOAST-Notifications — gerundet mit Chrome ─── */
[data-theme="structon-forward"] .toast {
  border-radius: var(--sf-radius-small);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFC 100%);
  box-shadow:
    0 20px 40px -16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ─── THEME-PREVIEW-CARDS (in Settings) ─── */
[data-theme="structon-forward"] .theme-card {
  border-radius: var(--radius-0);
  overflow: hidden;
}

/* ─── SETTINGS-NAV-ITEMS ─── */
[data-theme="structon-forward"] .settings-nav-item {
  border-radius: var(--sf-radius-small);
  margin: 2px 8px;
  border-left: none;
  transition: all 200ms ease;
}
[data-theme="structon-forward"] .settings-nav-item:hover {
  background: var(--c-line-soft);
  transform: translateX(2px);
}
[data-theme="structon-forward"] .settings-nav-item.is-active {
  background: var(--sf-chrome-dark);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 4px 12px -4px rgba(0, 0, 0, 0.2);
}
[data-theme="structon-forward"] .settings-nav-item.is-active .settings-nav-icon {
  color: var(--c-accent-warm);
}

/* ─── PAGE-LOAD-STAGGER (sanfter Fade-Up) ─── */
[data-theme="structon-forward"] main .card {
  animation: sf-fade-up 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-theme="structon-forward"] main .card:nth-child(1) { animation-delay: 0ms; }
[data-theme="structon-forward"] main .card:nth-child(2) { animation-delay: 60ms; }
[data-theme="structon-forward"] main .card:nth-child(3) { animation-delay: 120ms; }
[data-theme="structon-forward"] main .card:nth-child(4) { animation-delay: 180ms; }
[data-theme="structon-forward"] main .card:nth-child(5) { animation-delay: 240ms; }
[data-theme="structon-forward"] main .card:nth-child(n+6) { animation-delay: 300ms; }
@keyframes sf-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── BRAND-TAGLINE-PILLE ─── */
[data-theme="structon-forward"] .brand-tagline {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--sf-chrome-accent);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  display: inline-block;
  box-shadow:
    0 4px 12px -2px var(--c-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ── 2. MIDNIGHT — Dark Mode mit Electric Blue ── */
[data-theme="midnight"] {
  --c-ink: #FAFAFA; --c-ink-soft: #E5E5E5;
  --c-surface: #14161B; --c-soft: #1F2229;
  --c-line: #2D3139; --c-line-soft: #232831;
  --c-mid: #9BA3B0; --c-mid-soft: #6B7280;
  --c-accent: #3B82F6; --c-accent-soft: #1E3A8A33;
  --c-sales: #3B82F6; --c-sales-soft: #1E3A8A33;
  --c-kunden: #38BDF8; --c-kunden-soft: #0C4A6E33;
  --c-tools: #34D399; --c-tools-soft: #065F4633;
  --c-comm: #FBBF24; --c-comm-soft: #78350F33;
  --c-admin: #9CA3AF; --c-admin-soft: #37415133;
  --c-success: #34D399; --c-warning: #FBBF24; --c-danger: #F87171; --c-info: #60A5FA;
}
[data-theme="midnight"] body { background: var(--c-soft); }
[data-theme="midnight"] .login, [data-theme="midnight"] .login-card { background: var(--c-surface); }
[data-theme="midnight"] .card, [data-theme="midnight"] .modal-dialog { background: var(--c-surface); border-color: var(--c-line); }
[data-theme="midnight"] input, [data-theme="midnight"] select, [data-theme="midnight"] textarea {
  background: var(--c-soft); color: var(--c-ink); border-color: var(--c-line);
}
[data-theme="midnight"] .modal-backdrop { background: rgba(0,0,0,0.7); }

/* ── 3. SAND — Erdig: Cremebeige + Cognac + Tiefbraun ── */
[data-theme="sand"] {
  --c-ink: #2C1810; --c-ink-soft: #4A2C20;
  --c-surface: #FAF3E7; --c-soft: #F2E8D5;
  --c-line: #D9C8A8; --c-line-soft: #E8DCC0;
  --c-mid: #8C6E4A; --c-mid-soft: #B8A380;
  --c-accent: #B8632F; --c-accent-soft: #F0DCC8;
  --c-sales: #B8632F; --c-sales-soft: #F0DCC8;
  --c-kunden: #5D4A2E; --c-kunden-soft: #E6DBC6;
  --c-tools: #6B8E4E; --c-tools-soft: #DDE5D0;
  --c-comm: #C28845; --c-comm-soft: #F2E2C8;
  --c-admin: #8C6E4A; --c-admin-soft: #E8DCC0;
  --f-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --radius-0: 2px;
}

/* ── 4. EDITORIAL — Magazin: Cremeweiß + Schwarz + große Display-Serif ── */
[data-theme="editorial"] {
  --c-ink: #1A1A1A; --c-ink-soft: #2D2D2D;
  --c-surface: #FBF8F3; --c-soft: #F2EEE5;
  --c-line: #1A1A1A; --c-line-soft: #C5BDA8;
  --c-mid: #5C544A; --c-mid-soft: #8A8478;
  --c-accent: #B91C1C; --c-accent-soft: #F5E0E0;
  --c-sales: #B91C1C; --c-sales-soft: #F5E0E0;
  --c-kunden: #1F2937; --c-kunden-soft: #E5E7EB;
  --c-tools: #166534; --c-tools-soft: #DCE8DC;
  --c-comm: #C2410C; --c-comm-soft: #FAE5D5;
  --c-admin: #5C544A; --c-admin-soft: #E8E3D8;
  --f-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Source Sans 3', 'Inter', system-ui, sans-serif;
  --radius-0: 0px;
}
[data-theme="editorial"] h1 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; }
[data-theme="editorial"] .card { border-width: 1px 0; border-style: solid; border-color: var(--c-line-soft); border-radius: 0; }

/* ── 5. FOREST — Tannengrün dark + Salbei + Naturweiss ── */
[data-theme="forest"] {
  --c-ink: #E8EDE5; --c-ink-soft: #C8D2C2;
  --c-surface: #1F2D1F; --c-soft: #2A3D2A;
  --c-line: #3D513D; --c-line-soft: #344733;
  --c-mid: #98A892; --c-mid-soft: #788A72;
  --c-accent: #A8C794; --c-accent-soft: #2D4A1F33;
  --c-sales: #A8C794; --c-sales-soft: #2D4A1F33;
  --c-kunden: #7FA88B; --c-kunden-soft: #1E3E2F33;
  --c-tools: #C2A865; --c-tools-soft: #4A3D1F33;
  --c-comm: #D2A375; --c-comm-soft: #4A311E33;
  --c-admin: #98A892; --c-admin-soft: #3D513D;
}
[data-theme="forest"] body { background: var(--c-soft); }
[data-theme="forest"] .login, [data-theme="forest"] .login-card,
[data-theme="forest"] .card, [data-theme="forest"] .modal-dialog { background: var(--c-surface); }
[data-theme="forest"] input, [data-theme="forest"] select, [data-theme="forest"] textarea {
  background: var(--c-soft); color: var(--c-ink); border-color: var(--c-line);
}

/* ── 6. MARINA — Maritim/Bankhaus: Navy + Hellblau + Gold ── */
[data-theme="marina"] {
  --c-ink: #0B1F3A; --c-ink-soft: #1E3A5F;
  --c-surface: #FFFFFF; --c-soft: #EDF2F8;
  --c-line: #C5D2E0; --c-line-soft: #DCE4ED;
  --c-mid: #4A6B8C; --c-mid-soft: #7090B0;
  --c-accent: #C8A96E; --c-accent-soft: #F3EBDB;
  --c-sales: #1E3A8A; --c-sales-soft: #DCE5F2;
  --c-kunden: #0E7490; --c-kunden-soft: #D4ECF1;
  --c-tools: #C8A96E; --c-tools-soft: #F3EBDB;
  --c-comm: #B45309; --c-comm-soft: #F5E4CC;
  --c-admin: #4A6B8C; --c-admin-soft: #E0E6ED;
  --f-display: 'Crimson Pro', 'Playfair Display', Georgia, serif;
  --radius-0: 1px;
}

/* ── 7. BRUTALIST — Schwarz/Säuregelb, klobige Borders, Anti-Polish ── */
[data-theme="brutalist"] {
  --c-ink: #000000; --c-ink-soft: #1A1A1A;
  --c-surface: #FFFFFF; --c-soft: #F0F0F0;
  --c-line: #000000; --c-line-soft: #1A1A1A;
  --c-mid: #525252; --c-mid-soft: #737373;
  --c-accent: #FFFD00; --c-accent-soft: #FFFD0033;
  --c-sales: #FFFD00; --c-sales-soft: #FFFD0033;
  --c-kunden: #000000; --c-kunden-soft: #00000022;
  --c-tools: #00C853; --c-tools-soft: #00C85322;
  --c-comm: #FF3B30; --c-comm-soft: #FF3B3022;
  --c-admin: #000000; --c-admin-soft: #00000011;
  --f-display: 'Archivo Black', 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --radius-0: 0px;
}
[data-theme="brutalist"] .card { border-width: 3px; border-color: #000; box-shadow: 6px 6px 0 #000; }
[data-theme="brutalist"] .btn { border-width: 2px; border-color: #000; box-shadow: 3px 3px 0 #000; font-weight: 700; text-transform: uppercase; }
[data-theme="brutalist"] .btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
[data-theme="brutalist"] h1, [data-theme="brutalist"] h2, [data-theme="brutalist"] h3 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: -0.02em; }

/* ── 8. BAUHAUS — Primärfarben Rot/Gelb/Blau, geometrisch ── */
[data-theme="bauhaus"] {
  --c-ink: #1A1A1A; --c-ink-soft: #2A2A2A;
  --c-surface: #FFFFFF; --c-soft: #F0EDE5;
  --c-line: #1A1A1A; --c-line-soft: #C8C2B0;
  --c-mid: #707070; --c-mid-soft: #989386;
  --c-accent: #E63946; --c-accent-soft: #F5CCD0;
  --c-sales: #E63946; --c-sales-soft: #F5CCD0;
  --c-kunden: #005FFF; --c-kunden-soft: #CCDFFF;
  --c-tools: #FFD60A; --c-tools-soft: #FFF4B8;
  --c-comm: #E63946; --c-comm-soft: #F5CCD0;
  --c-admin: #1A1A1A; --c-admin-soft: #D8D4C8;
  --f-display: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
}
[data-theme="bauhaus"] h1, [data-theme="bauhaus"] h2 { font-family: var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; }
[data-theme="bauhaus"] .card { border-width: 2px; border-color: #1A1A1A; }

/* ── 9. CARBON — IBM-inspiriert: tiefes Schwarz + Electric Blue ── */
[data-theme="carbon"] {
  --c-ink: #F4F4F4; --c-ink-soft: #C6C6C6;
  --c-surface: #161616; --c-soft: #262626;
  --c-line: #393939; --c-line-soft: #2D2D2D;
  --c-mid: #8D8D8D; --c-mid-soft: #6F6F6F;
  --c-accent: #0F62FE; --c-accent-soft: #002D9C33;
  --c-sales: #0F62FE; --c-sales-soft: #002D9C33;
  --c-kunden: #33B1FF; --c-kunden-soft: #003A6D33;
  --c-tools: #42BE65; --c-tools-soft: #04451833;
  --c-comm: #FF832B; --c-comm-soft: #67280033;
  --c-admin: #8D8D8D; --c-admin-soft: #39393933;
  --f-display: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
}
[data-theme="carbon"] body { background: #000; }
[data-theme="carbon"] .login, [data-theme="carbon"] .login-card,
[data-theme="carbon"] .card, [data-theme="carbon"] .modal-dialog { background: var(--c-surface); border-color: var(--c-line); }
[data-theme="carbon"] input, [data-theme="carbon"] select, [data-theme="carbon"] textarea {
  background: var(--c-soft); color: var(--c-ink); border-color: var(--c-line);
}
[data-theme="carbon"] .btn { font-weight: 500; }

/* ── 10. TERMINAL — Monochrome Konsole, alles Mono, Phosphor-Grün ── */
[data-theme="terminal"] {
  --c-ink: #00FF87; --c-ink-soft: #00CC6B;
  --c-surface: #0A0E0A; --c-soft: #131913;
  --c-line: #1F2C1F; --c-line-soft: #182218;
  --c-mid: #4A8060; --c-mid-soft: #336047;
  --c-accent: #00FF87; --c-accent-soft: #00FF8722;
  --c-sales: #00E5FF; --c-sales-soft: #00E5FF22;
  --c-kunden: #FFD93D; --c-kunden-soft: #FFD93D22;
  --c-tools: #6BCB77; --c-tools-soft: #6BCB7722;
  --c-comm: #FF6B6B; --c-comm-soft: #FF6B6B22;
  --c-admin: #4A8060; --c-admin-soft: #1F2C1F;
  --f-display: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --f-body: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --f-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}
[data-theme="terminal"] body { background: #000; }
[data-theme="terminal"] .login, [data-theme="terminal"] .login-card,
[data-theme="terminal"] .card, [data-theme="terminal"] .modal-dialog { background: var(--c-surface); border-color: var(--c-line); }
[data-theme="terminal"] input, [data-theme="terminal"] select, [data-theme="terminal"] textarea {
  background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line); font-family: var(--f-mono);
}
[data-theme="terminal"] h1::before { content: "> "; opacity: 0.6; }
[data-theme="terminal"] .btn { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; }

/* ═══════════════════════════════════════════════════════════════
   WAVE 2 — 4 Light + 4 Dark mit Rundungen
   ═══════════════════════════════════════════════════════════════ */

/* ── 11. BUBBLE (light) — Pastell-Pink + Lavendel + Mint, very rounded ── */
[data-theme="bubble"] {
  --c-ink: #2D1B3D; --c-ink-soft: #4A2E5E;
  --c-surface: #FFFFFF; --c-soft: #FBF5FF;
  --c-line: #E8DCF5; --c-line-soft: #F2E8FA;
  --c-mid: #7B6090; --c-mid-soft: #A593B8;
  --c-accent: #E94491; --c-accent-soft: #FCE5F0;
  --c-sales: #E94491; --c-sales-soft: #FCE5F0;
  --c-kunden: #7B7BE0; --c-kunden-soft: #E5E5F8;
  --c-tools: #4ED4A8; --c-tools-soft: #DCF5EC;
  --c-comm: #F4A04D; --c-comm-soft: #FBE6D3;
  --c-admin: #A593B8; --c-admin-soft: #F2E8FA;
  --f-display: 'Quicksand', 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-body: 'Quicksand', 'Plus Jakarta Sans', system-ui, sans-serif;
}
[data-theme="bubble"] body { background: linear-gradient(180deg, #FBF5FF 0%, #FFF5FB 100%); }
[data-theme="bubble"] .card { border-radius: 18px; box-shadow: 0 4px 20px rgba(233, 68, 145, 0.06); }
[data-theme="bubble"] .btn { border-radius: 999px; padding-left: 18px; padding-right: 18px; font-weight: 600; }
[data-theme="bubble"] input, [data-theme="bubble"] select, [data-theme="bubble"] textarea { border-radius: 14px; }
[data-theme="bubble"] .modal-dialog { border-radius: 20px; }
[data-theme="bubble"] .role-badge, [data-theme="bubble"] .badge { border-radius: 999px; }

/* ── 12. LINEN (light) — Warm Off-White + Espresso, Serif, Stoffgefühl ── */
[data-theme="linen"] {
  --c-ink: #2A2520; --c-ink-soft: #3D362F;
  --c-surface: #FBF8F2; --c-soft: #F2EDE0;
  --c-line: #D9CFB8; --c-line-soft: #E8DFC8;
  --c-mid: #7A6F5C; --c-mid-soft: #998D78;
  --c-accent: #6B4423; --c-accent-soft: #EFE3D2;
  --c-sales: #6B4423; --c-sales-soft: #EFE3D2;
  --c-kunden: #4A6B5C; --c-kunden-soft: #DBE5DF;
  --c-tools: #8C7D4D; --c-tools-soft: #ECE5D1;
  --c-comm: #B07845; --c-comm-soft: #F0E0CC;
  --c-admin: #7A6F5C; --c-admin-soft: #E8DFC8;
  --f-display: 'Lora', 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Lora', Georgia, serif;
}
[data-theme="linen"] body {
  background-color: #F2EDE0;
  background-image: repeating-linear-gradient(45deg, transparent 0 2px, rgba(122, 111, 92, 0.02) 2px 4px);
}
[data-theme="linen"] .card { border-radius: 10px; border: 1px solid var(--c-line); }
[data-theme="linen"] .btn { border-radius: 6px; }
[data-theme="linen"] input, [data-theme="linen"] select, [data-theme="linen"] textarea { border-radius: 6px; font-family: var(--f-body); }

/* ── 13. MOCHI (light) — Japanisch-Zen: Sage + Peach, weiche Pillen ── */
[data-theme="mochi"] {
  --c-ink: #3A352F; --c-ink-soft: #524A40;
  --c-surface: #FBF8F2; --c-soft: #F0EBE0;
  --c-line: #D4C9B5; --c-line-soft: #E3DAC8;
  --c-mid: #8B7E6C; --c-mid-soft: #ABA08C;
  --c-accent: #E89B83; --c-accent-soft: #F8E2D8;
  --c-sales: #E89B83; --c-sales-soft: #F8E2D8;
  --c-kunden: #9DB088; --c-kunden-soft: #E0E7D5;
  --c-tools: #C2A86B; --c-tools-soft: #EFE5CC;
  --c-comm: #D88B6A; --c-comm-soft: #F5DACA;
  --c-admin: #8B7E6C; --c-admin-soft: #E3DAC8;
  --f-display: 'M PLUS Rounded 1c', 'Quicksand', system-ui, sans-serif;
  --f-body: 'M PLUS Rounded 1c', system-ui, sans-serif;
}
[data-theme="mochi"] .card { border-radius: 16px; border: 1px solid var(--c-line-soft); box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
[data-theme="mochi"] .btn { border-radius: 12px; font-weight: 500; }
[data-theme="mochi"] input, [data-theme="mochi"] select, [data-theme="mochi"] textarea { border-radius: 10px; }
[data-theme="mochi"] .modal-dialog { border-radius: 20px; }

/* ── 14. BLOOM (light) — Cremeweiß + Coral + Sage, Newsletter-Aesthetic ── */
[data-theme="bloom"] {
  --c-ink: #1F1F1F; --c-ink-soft: #2D2D2D;
  --c-surface: #FFFCF7; --c-soft: #FAF3EA;
  --c-line: #EDE0CC; --c-line-soft: #F5EBDA;
  --c-mid: #6B6258; --c-mid-soft: #8F8678;
  --c-accent: #FF6B5B; --c-accent-soft: #FFDED8;
  --c-sales: #FF6B5B; --c-sales-soft: #FFDED8;
  --c-kunden: #5A8C7F; --c-kunden-soft: #D5E5E0;
  --c-tools: #C9A653; --c-tools-soft: #F2E6C2;
  --c-comm: #E67E45; --c-comm-soft: #FAE0CE;
  --c-admin: #6B6258; --c-admin-soft: #EDE0CC;
  --f-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --f-body: 'Inter', system-ui, sans-serif;
}
[data-theme="bloom"] .card { border-radius: 20px; border: 1px solid var(--c-line-soft); padding: var(--s-5); }
[data-theme="bloom"] .btn { border-radius: 999px; padding: 8px 20px; font-weight: 600; }
[data-theme="bloom"] input, [data-theme="bloom"] select, [data-theme="bloom"] textarea { border-radius: 14px; }
[data-theme="bloom"] h1, [data-theme="bloom"] h2 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.01em; }
[data-theme="bloom"] .modal-dialog { border-radius: 24px; }

/* ── 15. AURORA (dark) — Lila/Magenta-Gradient, Glassy ── */
[data-theme="aurora"] {
  --c-ink: #F5F0FA; --c-ink-soft: #DCD0E8;
  --c-surface: #1A1530; --c-soft: #251E40;
  --c-line: #3D3060; --c-line-soft: #2E2550;
  --c-mid: #9080B5; --c-mid-soft: #6A5C95;
  --c-accent: #C470F0; --c-accent-soft: #5A2A8033;
  --c-sales: #C470F0; --c-sales-soft: #5A2A8033;
  --c-kunden: #6FA8FF; --c-kunden-soft: #1E3A6E33;
  --c-tools: #5BE5C2; --c-tools-soft: #134A4033;
  --c-comm: #FF8FA3; --c-comm-soft: #5A2A4033;
  --c-admin: #9080B5; --c-admin-soft: #3D3060;
  --f-display: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-body: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
}
[data-theme="aurora"] body {
  background-color: #0F0A20;
  background-image: radial-gradient(ellipse at top left, rgba(196, 112, 240, 0.15), transparent 50%),
                    radial-gradient(ellipse at bottom right, rgba(111, 168, 255, 0.12), transparent 50%);
}
[data-theme="aurora"] .card, [data-theme="aurora"] .modal-dialog {
  background: rgba(26, 21, 48, 0.7);
  border: 1px solid rgba(196, 112, 240, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
}
[data-theme="aurora"] .login, [data-theme="aurora"] .login-card { background: var(--c-surface); border-radius: 16px; }
[data-theme="aurora"] .btn { border-radius: 12px; font-weight: 600; }
[data-theme="aurora"] input, [data-theme="aurora"] select, [data-theme="aurora"] textarea {
  background: rgba(37, 30, 64, 0.6); color: var(--c-ink); border-color: var(--c-line); border-radius: 10px;
}

/* ── 16. CYBER (dark) — Synthwave Neon Magenta+Cyan ── */
[data-theme="cyber"] {
  --c-ink: #F8E8FF; --c-ink-soft: #D8C8E8;
  --c-surface: #0F0420; --c-soft: #1A0A35;
  --c-line: #FF00FF44; --c-line-soft: #2D1550;
  --c-mid: #B098C8; --c-mid-soft: #7C6890;
  --c-accent: #FF2FB3; --c-accent-soft: #FF2FB322;
  --c-sales: #FF2FB3; --c-sales-soft: #FF2FB322;
  --c-kunden: #00F0FF; --c-kunden-soft: #00F0FF22;
  --c-tools: #FFE600; --c-tools-soft: #FFE60022;
  --c-comm: #FF6B00; --c-comm-soft: #FF6B0022;
  --c-admin: #B098C8; --c-admin-soft: #2D1550;
  --c-success: #00F0FF; --c-warning: #FFE600; --c-danger: #FF2FB3;
  --f-display: 'Orbitron', 'Outfit', sans-serif;
  --f-body: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
}
[data-theme="cyber"] body { background: #07021A; }
[data-theme="cyber"] .login, [data-theme="cyber"] .login-card,
[data-theme="cyber"] .card, [data-theme="cyber"] .modal-dialog {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 8px; box-shadow: 0 0 24px rgba(255, 47, 179, 0.12);
}
[data-theme="cyber"] .btn {
  border-radius: 6px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; font-family: var(--f-display);
}
[data-theme="cyber"] .btn.secondary, [data-theme="cyber"] .btn:not(.ghost) {
  box-shadow: 0 0 12px var(--c-accent-soft);
}
[data-theme="cyber"] input, [data-theme="cyber"] select, [data-theme="cyber"] textarea {
  background: var(--c-soft); color: var(--c-ink); border-color: var(--c-line); border-radius: 6px;
}
[data-theme="cyber"] h1, [data-theme="cyber"] h2 { font-family: var(--f-display); letter-spacing: 0.04em; }

/* ── 17. ESPRESSO (dark) — Coffee-Schwarz + Caramel + Cream ── */
[data-theme="espresso"] {
  --c-ink: #F2E8D8; --c-ink-soft: #DCD0BC;
  --c-surface: #1F1611; --c-soft: #2A1F18;
  --c-line: #3D2F22; --c-line-soft: #322519;
  --c-mid: #9C8870; --c-mid-soft: #786650;
  --c-accent: #D8A55F; --c-accent-soft: #4A3318;
  --c-sales: #D8A55F; --c-sales-soft: #4A3318;
  --c-kunden: #C29F7D; --c-kunden-soft: #3D2D1F;
  --c-tools: #A8C29F; --c-tools-soft: #2E3D2A;
  --c-comm: #E6764B; --c-comm-soft: #4A2218;
  --c-admin: #9C8870; --c-admin-soft: #3D2F22;
  --f-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Inter', system-ui, sans-serif;
}
[data-theme="espresso"] body { background: #15100B; }
[data-theme="espresso"] .login, [data-theme="espresso"] .login-card,
[data-theme="espresso"] .card, [data-theme="espresso"] .modal-dialog {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px;
}
[data-theme="espresso"] .btn { border-radius: 10px; }
[data-theme="espresso"] input, [data-theme="espresso"] select, [data-theme="espresso"] textarea {
  background: var(--c-soft); color: var(--c-ink); border-color: var(--c-line); border-radius: 8px;
}
[data-theme="espresso"] h1 { font-family: var(--f-display); font-weight: 500; }

/* ── 18. NORDIC (dark) — Skandi-Slate + Powder Blue, weich ── */
[data-theme="nordic"] {
  --c-ink: #E8EEF2; --c-ink-soft: #C8D2DC;
  --c-surface: #1E252C; --c-soft: #283037;
  --c-line: #3A4450; --c-line-soft: #2E3742;
  --c-mid: #94A3B5; --c-mid-soft: #6F7E90;
  --c-accent: #8EC5E8; --c-accent-soft: #2A4A6033;
  --c-sales: #8EC5E8; --c-sales-soft: #2A4A6033;
  --c-kunden: #B8D6C4; --c-kunden-soft: #2E4A3833;
  --c-tools: #D4C088; --c-tools-soft: #4A3F1A33;
  --c-comm: #E8A584; --c-comm-soft: #5A301E33;
  --c-admin: #94A3B5; --c-admin-soft: #3A4450;
  --f-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --f-body: 'Outfit', 'Inter', system-ui, sans-serif;
}
[data-theme="nordic"] body { background: #161B20; }
[data-theme="nordic"] .login, [data-theme="nordic"] .login-card,
[data-theme="nordic"] .card, [data-theme="nordic"] .modal-dialog {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 10px;
}
[data-theme="nordic"] .btn { border-radius: 8px; font-weight: 500; }
[data-theme="nordic"] input, [data-theme="nordic"] select, [data-theme="nordic"] textarea {
  background: var(--c-soft); color: var(--c-ink); border-color: var(--c-line); border-radius: 6px;
}

/* ── Theme-Picker Cards ────────────────────────────────────── */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
}
.theme-card {
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--c-line);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.theme-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.theme-card.is-active { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.theme-preview {
  height: 130px;
  display: grid;
  grid-template-columns: 60px 1fr;
  position: relative;
}
.theme-preview-sidebar { padding: var(--s-2); border-right: 1px solid; }
.theme-preview-main { padding: var(--s-2); display: flex; flex-direction: column; gap: 4px; }
.theme-preview-bar { height: 6px; border-radius: 2px; }
.theme-preview-bar.b1 { width: 60%; }
.theme-preview-bar.b2 { width: 80%; }
.theme-preview-bar.b3 { width: 40%; }
.theme-preview-dot { width: 8px; height: 8px; border-radius: 50%; margin-bottom: 4px; }
.theme-card-meta {
  padding: var(--s-3);
  border-top: 1px solid var(--c-line-soft);
}
.theme-name {
  font: 700 13px/1.2 var(--f-display, var(--f-body));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.theme-desc {
  font-size: 11px;
  color: var(--c-mid);
  line-height: 1.4;
}
.theme-card.is-active .theme-name::after {
  content: " ✓";
  color: var(--c-accent);
}