/* ── IT Jones Beratung – Editorial Premium Consulting (Navy/Gold) ──────────── */
/* Navy = Text/Links/Headlines (hoher Kontrast). Gold = CTA/Füllung.            */
/* Standard = hell; Dunkel via [data-theme="dark"] (umgeschaltet in app.js).    */
:root {
  /* Flächen */
  --bg: #F6F4EF;
  --surface: #FFFFFF;
  --surface-2: #FBFAF6;
  --surface-3: #F1EDE3;
  --border: rgba(16,36,63,.10);
  --border-strong: rgba(16,36,63,.20);
  /* Marke: primary = Navy (Text/Links/Active), accent = Gold (Füllung) */
  --primary: #10243F;
  --primary-hover: #203B5D;
  --primary-soft: rgba(16,36,63,.07);
  --navy: #10243F;
  --navy-soft: #203B5D;
  --accent: #C8A15B;
  --accent-soft: #D9BA83;
  --accent-ink: #7A5A22;
  --gold: #C8A15B;
  --gold-soft: #D9BA83;
  /* Status */
  --success: #2E7D52;
  --warning: #B07A28;
  --danger: #C0492F;
  /* Text */
  --text: #1E2A36;
  --text-muted: #5B6672;
  --text-soft: #97A0AA;
  --muted: var(--text-muted);
  /* Akzent-Glows (dezent, gold) */
  --neon: #C8A15B;
  --neon-glow: rgba(200,161,91,.30);
  --neon-soft: rgba(200,161,91,.10);
  --badge-bg: rgba(16,36,63,.05);
  /* Form */
  --radius-lg: 18px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16,36,63,.05), 0 6px 22px rgba(16,36,63,.08);
  --shadow-sm: 0 1px 2px rgba(16,36,63,.07);
  --shadow-lg: 0 18px 50px rgba(16,36,63,.16);
  --grad-brand: linear-gradient(135deg, #10243F 0%, #203B5D 100%);
  --grad-gold: linear-gradient(135deg, #D9BA83 0%, #C8A15B 100%);
  /* Sidebar = Navy */
  --sidebar-bg: #10243F;
  --sidebar-text: #A9B6C9;
  --sidebar-active: #FFFFFF;
  --space: 14px;
  --maxw: 1400px;
  --statusbar-h: 0px; /* Status-Bar entfernt – kein reservierter Platz mehr */
  --topbar-h: 60px;
  /* Fonts — durchgehend serifenfrei (Inter). --font-head bleibt als Variable
     erhalten (Überschriften unterscheiden sich über Größe/Gewicht), zeigt aber
     appweit dieselbe Grotesk wie der Fließtext. */
  --font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="dark"] {
  --bg: #0F1824;
  --surface: #172233;
  --surface-2: #1C2A3D;
  --surface-3: #243349;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.18);
  /* Dark: primary flippt auf Gold (Navy wäre auf Dunkel unsichtbar) */
  --primary: #D4B06D;
  --primary-hover: #E5C98E;
  --primary-soft: rgba(212,176,109,.14);
  --navy: #E7E3DB;
  --navy-soft: #CFC8BA;
  --accent: #D4B06D;
  --accent-soft: #E5C98E;
  --accent-ink: #E5C98E;
  --gold: #D4B06D;
  --gold-soft: #E5C98E;
  --success: #4CAF7D;
  --warning: #D4A24C;
  --danger: #E0654C;
  --text: #F3F4F6;
  --text-muted: #A5ADB7;
  --text-soft: #79828D;
  --muted: var(--text-muted);
  --neon: #D4B06D;
  --neon-glow: rgba(212,176,109,.40);
  --neon-soft: rgba(212,176,109,.10);
  --badge-bg: rgba(255,255,255,.06);
  --shadow: 0 2px 8px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.45);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
  --grad-brand: linear-gradient(135deg, #172233 0%, #243349 100%);
  --grad-gold: linear-gradient(135deg, #E5C98E 0%, #D4B06D 100%);
  --sidebar-bg: #0B121C;
  --sidebar-text: #8893A6;
  --sidebar-active: #FFFFFF;
}

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body, 'Inter', 'Segoe UI', system-ui, sans-serif);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
/* Ueberschriften: dieselbe Grotesk wie der Fliesstext, Hierarchie ueber
   Groesse/Gewicht. Der fruehere Fallback "Georgia, serif" stammte aus der
   Playfair-Zeit und haette bei fehlender Variable Serifen eingeblendet --
   im Widerspruch zum serifenfreien Designstandard. */
h1, h2, h3 {
  font-family: var(--font-head, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--navy, var(--text));
  line-height: 1.18;
}
h1 { font-size: 1.55rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
h4 { font-size: .92rem; font-weight: 700; letter-spacing: -0.01em; font-family: var(--font-body); }

/* ════════════════════════════════════════════════════════════════════════════
   Premium App-Shell (Sidebar) – nur im Admin-Bereich
   ════════════════════════════════════════════════════════════════════════════ */
body.has-sidebar { display: block; }
.app-shell {
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: calc(100vh - var(--statusbar-h));
}

.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: 16px 12px var(--statusbar-h); gap: 6px;
  border-right: 1px solid rgba(255,255,255,.05);
  overflow-y: auto;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 16px;
}
.brand-logo {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--grad-brand); border-radius: 9px; font-size: 17px;
  box-shadow: 0 4px 14px rgba(16,36,63,.5);
  flex-shrink: 0;
}
.brand-info { display: flex; flex-direction: column; }
.brand-name {
  font-size: 1rem; font-weight: 800; color: #fff;
  letter-spacing: -.02em; line-height: 1.1; text-transform: uppercase;
}
.brand-sub {
  font-size: 9px; font-weight: 600; color: var(--neon);
  letter-spacing: .12em; text-transform: uppercase; margin-top: 1px;
  opacity: .8;
}

.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side-section {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.28); font-weight: 700; padding: 14px 10px 5px;
}
.side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; text-decoration: none;
  color: var(--sidebar-text); font-weight: 500; font-size: 12.5px;
  position: relative; transition: background .14s, color .14s;
}
.side-item:hover { background: rgba(255,255,255,.055); color: #fff; }
.side-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.side-label { flex: 1; }
.side-chevron { font-size: 10px; opacity: .4; }
.side-active {
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 6px 18px rgba(16,36,63,.35);
}
.side-active:hover { background: var(--grad-brand); color: #fff; }
.side-active .side-chevron { opacity: .7; }
.side-mark {
  position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--neon);
}
.side-foot {
  display: flex; align-items: center; gap: 8px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07); margin-top: 6px;
}
.side-logout {
  flex: 1; text-align: center; color: #ff9a8f; text-decoration: none;
  font-size: 12px; padding: 7px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
}
.side-logout:hover { background: rgba(239,90,74,.15); }

.app-main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 22px; height: var(--topbar-h);
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-title {
  font-size: 1rem; font-weight: 700; flex: 1; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 8px;
}
.topbar-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon); flex-shrink: 0;
  box-shadow: 0 0 8px var(--neon-glow);
  animation: pulse-neon 2s ease-in-out infinite;
}
@keyframes pulse-neon {
  0%, 100% { box-shadow: 0 0 6px var(--neon-glow); opacity: 1; }
  50% { box-shadow: 0 0 14px var(--neon-glow); opacity: .75; }
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-date {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
}
.topbar-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--primary); background: var(--primary-soft);
  padding: 3px 9px; border-radius: 20px;
}

.content { padding: 20px 22px 24px; flex: 1; max-width: 1200px; width: 100%; }

/* ── Status Bar (futuristisch, unten fixiert) ────────────────────────────── */
.status-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  height: var(--statusbar-h);
  background: var(--sidebar-bg);
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; gap: 0;
  padding: 0 14px 0 230px; /* start after sidebar */
  font-size: 10px; letter-spacing: .04em;
}
.sb-item {
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px; height: 100%;
  border-right: 1px solid rgba(255,255,255,.05);
  color: var(--sidebar-text); white-space: nowrap;
}
.sb-item:first-child { border-left: 1px solid rgba(255,255,255,.05); }
.sb-icon { font-size: 12px; opacity: .7; }
.sb-label { text-transform: uppercase; font-weight: 700; font-size: 9px; opacity: .55; }
.sb-value { font-weight: 600; font-size: 10px; font-variant-numeric: tabular-nums; }
.sb-ok { color: var(--neon); }
.sb-bar { width: 60px; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.sb-bar-fill { height: 100%; background: var(--grad-brand); border-radius: 2px; }
.sb-bar-fill.sb-ok { background: var(--neon); }
.sb-spacer { flex: 1; }

/* Seitenleiste ohne Status-Bar-Padding auf mobil */
body.has-sidebar { padding-bottom: var(--statusbar-h); }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 200; width: 240px; height: 100vh;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow-lg); padding-bottom: var(--statusbar-h);
  }
  .sidebar.open { transform: translateX(0); }
  .content { padding: 16px 14px 20px; }
  .topbar { padding: 0 14px; }
  .status-bar { padding-left: 14px; }
}
@media (min-width: 901px) {
  .app-main .nav-toggle { display: none; }
}

/* ── Navigation (Sticky, Öffentlich) ─────────────────────────────────────── */
.header {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.nav {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; height: 54px;
}
.nav-brand { font-size: 1.1rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links a {
  color: var(--text-muted); text-decoration: none; padding: 7px 11px;
  border-radius: var(--radius-sm); transition: all .14s; white-space: nowrap; font-size: 13px;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-logout { color: var(--danger) !important; }
.nav-toggle, .theme-toggle {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; cursor: pointer; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; font-size: 15px; line-height: 1;
  transition: transform .18s cubic-bezier(.25,.1,.25,1), border-color .18s, background .18s;
}
.theme-toggle:hover { border-color: var(--accent); background: var(--surface-3); transform: translateY(-1px); }
.nav-toggle { display: none; }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: 54px; right: 0; left: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 6px 14px; box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
}

/* ── Main (Öffentlich) ───────────────────────────────────────────────────── */
.main {
  max-width: 1200px; width: 100%; margin: 0 auto;
  padding: 26px 20px; flex: 1;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 16px; border-radius: 980px; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  gap: 7px; transition: transform .2s cubic-bezier(.25,.1,.25,1), box-shadow .2s cubic-bezier(.25,.1,.25,1), filter .17s, background .17s;
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary {
  background: var(--grad-brand); color: white;
  box-shadow: 0 5px 14px rgba(16,36,63,.28);
}
.btn-primary:hover { filter: brightness(1.07); box-shadow: 0 7px 20px rgba(16,36,63,.40); }
.btn-secondary {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { opacity: .88; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-warning:hover { opacity: .88; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { opacity: .9; }
.btn-link { background: none; color: var(--primary); padding: 3px 0; box-shadow: none; }
.btn-link:hover { text-decoration: underline; transform: none; }
.btn-sm { padding: 3px 9px; font-size: 12px; }
.btn-block { width: 100%; }

/* ── Cards & Grid ────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow);
  position: relative; backdrop-filter: saturate(1.04);
  transition: box-shadow .17s, transform .17s;
}
.card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 30%, transparent), transparent);
  opacity: .45; pointer-events: none;
}
.card h3 { margin-bottom: 12px; color: var(--text); font-size: .9rem; }
.card h4 { margin-bottom: 10px; color: var(--text); font-size: .85rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 24px; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px; max-width: 540px; margin: 0 auto;
  box-shadow: var(--shadow); position: relative;
}
.form-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 30%, transparent), transparent);
  opacity: .45; pointer-events: none;
}
.form-card h2 { margin-bottom: 20px; }

/* ── Login-/Auth-Bereich: „Layered Flat" (Navy/Gold), Farben/Buttons/Inputs
   kommen aus app-fluid.css (body.auth-fluid). Hier nur Layout + Karten-Fläche.
   Der Fluid-Hintergrund scheint um die Karte herum durch. ────────────────── */
.auth-shell {
  width: 100%; min-height: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; position: relative;
}
/* main.main ist die Gäste-Shell (body:not(.has-sidebar) > .main: flex:1 1 auto;
   min-height:0; overflow-y:auto). Prozentuale Höhen sind unzuverlässig, da .main
   selbst kein display:flex ist → .main NUR auf Login-/MFA-Seiten (:has(.auth-shell))
   zum Flex-Container machen, damit .auth-shell per flex:1 1 auto exakt die
   verfügbare Höhe bekommt. Landing/Portal bleiben unberührt. */
body:not(.has-sidebar) > .main:has(.auth-shell) { display: flex; flex-direction: column; }
.main .auth-shell { flex: 1 1 auto; }

/* Karte: flach, geschichtet, weicher diffuser Drop-Shadow (kein Neumorphismus) */
.auth-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
  box-shadow: 0 12px 44px rgba(10, 36, 63, .14); padding: 36px 34px 32px;
}
[data-theme="dark"] .auth-card { box-shadow: 0 16px 48px rgba(0, 0, 0, .52); }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-brand-mark {
  width: 38px; height: 38px; border-radius: 3px; flex-shrink: 0;
  background: #14263F; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(10, 36, 63, .25);
}
.auth-brand-mark svg { width: 18px; height: 18px; }
.auth-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.auth-brand-text strong { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.auth-brand-text span { font-size: 11px; color: var(--text-muted); }
.auth-card h2 {
  font-family: var(--font-head, Georgia, serif);
  font-size: 1.35rem; font-weight: 700; color: var(--primary); margin: 0 0 5px; letter-spacing: -.01em;
}
.auth-card > p.hint { margin: 0 0 20px; }
.auth-card .form-group { margin-bottom: 15px; }
.auth-card input { padding: 11px 13px; font-size: 14px; }
.auth-card .btn-primary { width: 100%; margin-top: 5px; padding: 12px; font-size: 14px; }
.auth-card .btn-secondary { width: 100%; padding: 12px; font-size: 13.5px; }
.auth-card .btn-link { display: block; text-align: center; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.auth-card .btn-link:hover { color: var(--primary); }
.auth-card .info-box, .auth-card .info-note {
  margin-top: 18px; padding: 12px 14px; border-radius: 3px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; color: var(--text-muted);
}
.auth-card .alert { border-radius: 3px; }
.auth-card .form-divider span:first-child, .auth-card .form-divider span:last-child { background: var(--border); }
@media (max-width: 480px) {
  .auth-card { padding: 28px 22px 26px; }
  .auth-shell { padding: 20px 14px; }
}
.form-group { margin-bottom: 13px; }
.form-group label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Passwort-Regel-Checkliste (Live-Validierung, dezent — kein verspieltes Icon) */
.pwr-rules { list-style: none; margin: 4px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pwr-rule {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted); transition: color .15s ease;
}
.pwr-rule::before {
  content: ''; width: 14px; height: 14px; flex-shrink: 0; border-radius: 3px;
  border: 1px solid var(--border-strong, var(--border)); background: transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.pwr-rule.is-ok { color: var(--text); }
.pwr-rule.is-ok::before { background: var(--success, #2e9e5b); border-color: var(--success, #2e9e5b); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-actions { display: flex; gap: 11px; margin-top: 20px; }

input, textarea, select {
  width: 100%; padding: 8px 11px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 7px; color: var(--text); font-size: 13px;
  transition: border-color .14s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(16,36,63,.12);
}
/* Dropdown-Optionen: opake Farben für lesbaren Kontrast (v.a. Dark Mode) */
select option, select optgroup {
  background-color: var(--surface);
  color: var(--text);
}
select option:checked,
select option:hover {
  background-color: var(--primary-soft);
  color: var(--text);
}
.inline-form { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.inline-form input, .inline-form select { width: auto; flex: 1; min-width: 110px; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border-radius: var(--radius); overflow: hidden;
}
.table th {
  background: var(--surface-2); padding: 10px 14px; text-align: left;
  font-size: 11px; text-transform: uppercase; color: var(--text-muted); letter-spacing: .04em;
}
.table td { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12.5px; }
.table tr:hover td { background: var(--surface-2); }
.empty { text-align: center; color: var(--text-muted); padding: 28px !important; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--badge-bg); color: var(--text-muted); line-height: 1.5;
}
.badge-neutral { background: var(--badge-bg); color: var(--text-muted); }
.badge-green { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.badge-red   { background: color-mix(in srgb, var(--danger) 15%, transparent);  color: var(--danger); }
.badge-yellow{ background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.badge-blue  { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.badge-gold  { background: color-mix(in srgb, var(--gold) 18%, transparent);    color: var(--gold); }
.badge-neon  { background: var(--neon-soft); color: var(--neon); }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert { padding: 10px 14px; border-radius: 7px; margin-bottom: 16px; font-size: 12.5px; }
.alert-error { background: rgba(231,76,60,.12); color: var(--danger); border: 1px solid rgba(231,76,60,.25); }
.alert-warning { background: rgba(243,156,18,.1); color: var(--warning); border: 1px solid rgba(243,156,18,.25); }
.alert-success { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 25%, transparent); }

/* ── Hilfstexte / Layout ─────────────────────────────────────────────────── */
.hint { color: var(--text-muted); font-size: 12px; margin: 5px 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.amount { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Gefahrenzone ────────────────────────────────────────────────────────── */
.danger-zone { border: 1px solid rgba(231,76,60,.35); margin-top: 20px; }
.danger-zone h3 { color: var(--danger); }

/* ── Lead-Konvertierung ──────────────────────────────────────────────────── */
.convert-details > summary { cursor: pointer; list-style: none; display: inline-block; }
.convert-details > summary::-webkit-details-marker { display: none; }
.convert-form { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; min-width: 260px; }
.convert-form input, .convert-form select { width: 100%; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { text-align: center; padding: 56px 0 36px; }
.hero-title { font-size: 2.1rem; font-weight: 700; margin-bottom: 10px; }
.hero-sub { color: var(--text-muted); margin-bottom: 26px; font-size: 1rem; }
.hero-buttons { display: flex; gap: 13px; justify-content: center; }

/* ── Page Header ─────────────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 13px; border-bottom: 1px solid var(--border);
}
.page-header h2 { flex: 1; font-size: 1.2rem; }
.page-header .btn { margin-left: 4px; }

/* ── Invoice ─────────────────────────────────────────────────────────────── */
.invoice {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px;
}
.invoice-header { margin-bottom: 28px; }
.invoice-meta { color: var(--text-muted); font-size: 12px; margin-top: 5px; }
.invoice-totals { margin-top: 20px; text-align: right; }
.total-row { display: flex; justify-content: flex-end; gap: 28px; padding: 3px 0; font-size: 12.5px; }
.total-gross { font-size: 1.1rem; border-top: 2px solid var(--border); padding-top: 7px; margin-top: 4px; }
.billing-terms { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
.objection-note { margin-top: 14px; font-size: 11.5px; color: var(--text-muted); }

/* ── Portal ──────────────────────────────────────────────────────────────── */
.action-group { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 14px; }
.refund-box { margin-top: 14px; padding: 14px; background: var(--surface-2); border-radius: 7px; border: 1px solid var(--border); }
.info-note { font-size: 11.5px; color: var(--text-muted); margin-top: 7px; }
.info-box { margin-top: 16px; padding: 10px; background: var(--surface-2); border-radius: 7px; font-size: 12px; color: var(--text-muted); }
.warn { color: var(--warning); font-size: 12px; }

/* ── Search ──────────────────────────────────────────────────────────────── */
.search-bar { margin-bottom: 16px; }
.search-bar form { display: flex; gap: 7px; max-width: 460px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  background: var(--surface); border-top: 1px solid var(--border);
  text-align: center; padding: 12px; font-size: 11px; color: var(--text-muted);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .detail-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-title { font-size: 1.5rem; }
  .hero-buttons { flex-direction: column; align-items: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Moderne SaaS-Komponenten
   ════════════════════════════════════════════════════════════════════════════ */

/* ── KPI-/Statistik-Karten ─────────────────────────────────────────────── */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space); margin-bottom: 20px;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 18px; box-shadow: var(--shadow-sm);
  transition: box-shadow .17s, transform .17s;
}
.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.stat-card.stat-accent {
  background: var(--grad-brand); border-color: transparent; color: #fff;
}
.stat-card.stat-accent .stat-label { color: rgba(255,255,255,.78); }
.stat-card.stat-accent .stat-value { color: #fff; }
.stat-label { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.55rem; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* ── Aktive Sitzung: Split-Layout ──────────────────────────────────────── */
.session-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: var(--space);
  align-items: start;
  height: calc(100vh - var(--topbar-h) - var(--statusbar-h) - 80px);
  overflow: hidden;
}
.session-info {
  position: sticky; top: 6px; left: 6px;
  display: flex; flex-direction: column; gap: var(--space);
  overflow-y: auto;
  max-height: calc(100vh - var(--topbar-h) - var(--statusbar-h) - 80px);
}
.session-info .card { padding: 16px 18px; }
.info-list { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; margin-top: 5px; }
.info-list dt { color: var(--text-muted); font-size: 11.5px; }
.info-list dd { text-align: right; font-weight: 600; font-size: 12.5px; }
.mt { margin-top: 12px; }

.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.toolbar { display: flex; gap: 7px; align-items: center; }
.search-input {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 7px 11px; font-size: 12.5px; min-width: 160px;
}

/* ── Tab-Navigation (Aktive Sitzung) ───────────────────────────────────── */
.tab-host {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--topbar-h) - var(--statusbar-h) - 80px);
  overflow: hidden;
}
.tab-nav {
  display: flex; gap: 2px; padding-bottom: 0;
  border-bottom: 1px solid var(--border); margin-bottom: 0;
  flex-shrink: 0;
}
.tab-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; font-size: 12px; font-weight: 600;
  color: var(--text-muted); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color .14s, border-color .14s; border-radius: 7px 7px 0 0;
  text-decoration: none;
}
.tab-btn:hover { color: var(--text); background: var(--surface-2); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: none; }
.tab-panel {
  display: none; flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 14px 0;
}
.tab-panel.active { display: block; }
.tab-panel-inner { display: flex; flex-direction: column; gap: 10px; }

/* ── Bulk-Leiste ─────────────────────────────────────────────────────────── */
.bulk-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 11px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px;
  position: sticky; top: 0; z-index: 5;
}
.check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.bulk-count { margin-left: auto; font-size: 12px; }

/* ── Teilnehmerliste ─────────────────────────────────────────────────────── */
.participant-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.participant-row {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
  padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.participant-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.participant-meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
.participant-actions { display: flex; gap: 5px; }
.muted { color: var(--text-muted); }
.mexc { font-family: ui-monospace, monospace; font-size: 11.5px; }

/* ── Icon-Buttons ────────────────────────────────────────────────────────── */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; font-size: 14px; text-decoration: none; transition: all .12s;
}
.icon-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
.icon-btn:disabled { cursor: not-allowed; opacity: .45; }
.icon-btn:disabled:hover { border-color: var(--border); transform: none; }
.icon-present:hover { border-color: var(--success); color: var(--success); }
.icon-absent:hover { border-color: var(--danger); color: var(--danger); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.row-actions { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.correct-details > summary { cursor: pointer; list-style: none; }
.correct-details > summary::-webkit-details-marker { display: none; }
.correct-form { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; min-width: 180px; }
.row-flagged { box-shadow: inset 3px 0 0 var(--danger); }
.table-hover tbody tr:hover { background: var(--surface-2); }
.total-row-table td { border-top: 2px solid var(--border); }

/* ── Empty States ────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 36px 20px; color: var(--text-muted); }
.empty-icon { font-size: 2.2rem; margin-bottom: 7px; }

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed; right: 14px; bottom: calc(var(--statusbar-h) + 10px); z-index: 1000;
  display: flex; flex-direction: column; gap: 8px; max-width: 340px;
}
.toast {
  padding: 10px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  opacity: 0; transform: translateY(8px); transition: opacity .22s, transform .22s; font-size: 12.5px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-info { border-left: 3px solid var(--primary); }
.toast-inline { display: none; }

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: skeleton 1.4s ease infinite; border-radius: 5px;
}
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Sonstiges ───────────────────────────────────────────────────────────── */
.danger-soft { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.year-select { display: flex; align-items: center; gap: 7px; }
.year-select select, select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 7px 9px; font-size: 12.5px;
}

/* ── Hintergrund-Glow (Admin-Shell) ─────────────────────────────────────── */
body.has-sidebar::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 90% -8%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 60%),
    radial-gradient(50vw 50vw at -8% 105%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 60%),
    radial-gradient(40vw 40vw at 50% 100%, color-mix(in srgb, var(--neon) 4%, transparent), transparent 65%);
}

/* ── Sanfte Eingangsanimation ────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.content > *, .main > * { animation: rise .38s cubic-bezier(.2,.7,.2,1) both; }
.content > *:nth-child(2) { animation-delay: .04s; }
.content > *:nth-child(3) { animation-delay: .07s; }
.content > *:nth-child(4) { animation-delay: .10s; }

/* ── Chips (Meta-Infos) ──────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border);
}
.chip-ok { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); border-color: transparent; }
.chip-warn { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); border-color: transparent; }

/* ── Teilnehmer-Karte (aktive Sitzung) ──────────────────────────────────── */
.participant-card {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  padding: 13px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s;
}
.participant-card + .participant-card { margin-top: 9px; }
.participant-card:hover { box-shadow: var(--shadow); }
.participant-card.tb-running {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent), 0 8px 26px rgba(16,36,63,.15);
}
.participant-card.tb-exhausted { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }

.pc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-head .participant-name { flex: 1; min-width: 0; font-size: .95rem; }
.pc-status { margin-left: auto; }
.pc-meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

/* ── Timebox / Timer ─────────────────────────────────────────────────────── */
.timebox { border-top: 1px dashed var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.tb-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tb-timer { display: flex; align-items: baseline; gap: 10px; }
.tb-clock {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  font-size: 1.9rem; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--text); min-width: 100px;
}
.tb-running .tb-clock {
  color: var(--primary);
  text-shadow: 0 0 16px color-mix(in srgb, var(--primary) 40%, transparent);
}
.tb-sub { color: var(--text-muted); font-size: 12px; }
.tb-sub .tb-tracked { font-weight: 700; color: var(--text); }
.tb-controls { margin-left: auto; display: flex; gap: 9px; align-items: center; }

/* ── Kreistimer ──────────────────────────────────────────────────────────── */
.timer-ring-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 150px; height: 150px; margin: 6px auto 10px;
}
.timer-ring { transform: rotate(-90deg); }
.timer-ring-bg { fill: none; stroke: var(--border); stroke-width: 8; }
.timer-ring-fg {
  fill: none; stroke: var(--grad-brand); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 408; stroke-dashoffset: 408;
  transition: stroke-dashoffset .5s cubic-bezier(.2,.7,.2,1);
}
.timer-ring-fg.running { stroke: url(#ringGrad); animation: ring-glow 2s ease-in-out infinite; }
@keyframes ring-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(16,36,63,.5)); }
  50% { filter: drop-shadow(0 0 10px rgba(16,36,63,.8)); }
}
.timer-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

.btn-timer {
  min-width: 120px; padding: 10px 16px; font-size: 14px; font-weight: 700;
  color: #fff; background: var(--grad-brand); border: none; border-radius: 10px;
  box-shadow: 0 7px 18px rgba(16,36,63,.32); position: relative; overflow: hidden;
  cursor: pointer; transition: all .15s;
}
.btn-timer::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(100px 50px at 50% -20%, rgba(255,255,255,.3), transparent 70%);
  opacity: 0; transition: opacity .18s;
}
.btn-timer:hover::before { opacity: 1; }
.btn-timer.is-running {
  background: linear-gradient(135deg, var(--danger), #ff7a5c);
  box-shadow: 0 7px 20px rgba(216,65,47,.38);
  animation: pulse-rec 1.6s ease-in-out infinite;
}
@keyframes pulse-rec {
  0%, 100% { box-shadow: 0 7px 20px rgba(216,65,47,.38); }
  50% { box-shadow: 0 7px 28px rgba(216,65,47,.62); }
}
.btn-timer:disabled { background: var(--surface-3); color: var(--text-muted); box-shadow: none; cursor: not-allowed; animation: none; }

.btn-ghost {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px; font-weight: 600;
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost-danger {
  background: transparent; border: 1px solid transparent; color: var(--text-muted);
  padding: 3px 7px; border-radius: 7px; font-size: 14px; line-height: 1; margin-left: 7px;
}
.btn-ghost-danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 9%, transparent); }
.inline-del { display: inline; }

/* ── Fortschrittsbalken ──────────────────────────────────────────────────── */
.tb-bar { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.tb-bar-fill {
  height: 100%; border-radius: inherit; background: var(--grad-brand);
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.tb-running .tb-bar-fill { animation: flow 2s linear infinite; background-size: 200% 100%; }
@keyframes flow { to { background-position: 200% 0; } }
.tb-exhausted .tb-bar-fill { background: linear-gradient(90deg, var(--warning), var(--gold)); }

.tb-hint { font-size: 12px; color: var(--text-muted); display: flex; gap: 7px; align-items: center; }
.tb-hint strong { color: var(--text); font-variant-numeric: tabular-nums; }

.tb-msg {
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  animation: rise .32s ease both;
}
.tb-msg .tb-note { margin-top: 3px; color: var(--text-muted); font-size: 12px; }
.tb-msg-done { background: color-mix(in srgb, var(--success) 10%, transparent); border: 1px solid color-mix(in srgb, var(--success) 25%, transparent); }
.tb-msg-done strong { color: var(--success); }
.tb-msg-noshow { background: color-mix(in srgb, var(--warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 24%, transparent); color: var(--warning); }
.participant-card[data-canbook="0"].tb-exhausted .tb-msg-done {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger) 25%, transparent);
}
.participant-card[data-canbook="0"].tb-exhausted .tb-msg-done strong { color: var(--danger); }

@media (max-width: 560px) {
  .tb-controls { margin-left: 0; width: 100%; }
  .btn-timer { flex: 1; }
  .tb-clock { font-size: 1.6rem; min-width: 86px; }
}

/* ── Gruppensitzung: Timer-Karte ─────────────────────────────────────────── */
.timer-card { text-align: center; }
.tb-clock-lg { font-size: 2.4rem; margin: 2px 0 1px; }
.timer-card .tb-sub { margin-bottom: 10px; }
.timer-controls { display: flex; justify-content: center; margin-bottom: 8px; }
.timer-card .btn-timer { min-width: 150px; }
.half-toggle { justify-content: center; margin: 7px 0; font-size: 12px; }
.btn-timer.is-running { background: linear-gradient(135deg, var(--danger), #ff7a5c); }

.pc-rate { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-top: 9px; border-top: 1px dashed var(--border); }
.pc-rate .muted { margin-right: 1px; }
.pc-hint { padding-top: 9px; border-top: 1px dashed var(--border); font-size: 12px; }
.pc-hint-run { color: var(--primary); font-weight: 600; }
.pc-final { padding-top: 9px; border-top: 1px dashed var(--border); font-size: 12px; }

/* ── Teilnehmerverwaltung ────────────────────────────────────────────────── */
.manage-card { border-style: dashed; }
.manage-search { margin: 10px 0; }
.manage-search form, .manage-search { display: flex; gap: 7px; max-width: 100%; }
.candidate-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-top: 5px; }
.candidate-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.cand-main { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.candidate-row form { margin: 0; }

/* ── Einzelsitzung ───────────────────────────────────────────────────────── */
.session-add { align-items: center; margin: 5px 0; }
.session-add .add-label { color: var(--text-muted); font-size: 12px; white-space: nowrap; margin-right: 2px; }
.session-add input[type="date"] { min-width: 140px; flex: 0 1 170px; }
.session-confirm { margin-top: 10px; }
.session-confirm .action-group { margin-top: 10px; }

/* ── Rechnung ─────────────────────────────────────────────────────────────── */
.inv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.inv-from strong { font-size: .95rem; }
.inv-from .muted { font-size: 12px; }
.inv-logo {
  width: 46px; height: 46px; display: grid; place-items: center;
  font-size: 15px; font-weight: 800; letter-spacing: .02em; color: #fff;
  background: var(--grad-brand); border-radius: 3px; box-shadow: 0 7px 18px rgba(16,36,63,.38);
}
.inv-addresses { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.inv-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 3px; }
.inv-to strong { font-size: .95rem; }
.inv-to .muted { font-size: 12px; }
.inv-meta-box { min-width: 250px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.inv-row { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; font-size: 12.5px; }
.inv-row span { color: var(--text-muted); }
.inv-title { font-size: 1.4rem; margin-bottom: 14px; }
.inv-table th.r, .inv-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.inv-open strong { color: var(--danger); }
.inv-plan { margin-top: 24px; }
.inv-plan h3 { margin-bottom: 5px; }
.inv-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

@media print {
  .sidebar, .topbar, .footer, .inv-actions, #toast-container, .status-bar { display: none !important; }
  .app-shell { grid-template-columns: 1fr; }
  .invoice { box-shadow: none; border: none; }
  body::before { display: none !important; }
  /* Rechnungen/Druckansicht: viewport-fit-Klemme aufheben, Dokument darf beliebig lang sein */
  body.app-fluid, body.app-fluid .app-main, body.app-fluid main.content, body.app-fluid main.main {
    height: auto !important; overflow: visible !important;
  }
  .fluid-bg { display: none !important; }
}

/* ── Wissensbereich ──────────────────────────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.doc-links { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.doc-links li { padding: 7px 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.doc-links a { text-decoration: none; color: var(--text); font-weight: 600; font-size: 12.5px; }
.doc-links a:hover { color: var(--primary); }
.meta-card { margin-top: 14px; }

.md-body { line-height: 1.7; font-size: 13px; }
.md-body h1, .md-body h2, .md-body h3 { margin: 16px 0 9px; }
.md-body h1 { font-size: 1.4rem; }
.md-body h2 { font-size: 1.2rem; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.md-body h3 { font-size: 1rem; }
.md-body p { margin: 9px 0; }
.md-body ul, .md-body ol { margin: 9px 0 9px 20px; }
.md-body li { margin: 3px 0; }
.md-body code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: .88em; }
.md-body pre { background: var(--surface-2); padding: 12px; border-radius: var(--radius-sm); overflow-x: auto; border: 1px solid var(--border); }
.md-body pre code { background: none; padding: 0; }
.md-body a { color: var(--primary); }
.md-body blockquote { border-left: 3px solid var(--primary); padding: 4px 13px; margin: 10px 0; color: var(--text-muted); background: var(--surface-2); border-radius: 0 7px 7px 0; }
.md-body table { border-collapse: collapse; margin: 10px 0; }
.md-body th, .md-body td { border: 1px solid var(--border); padding: 5px 11px; }

/* Chat */
.chat-box { display: flex; flex-direction: column; height: 420px; max-height: 65vh; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { display: flex; }
.chat-user { justify-content: flex-end; }
.chat-bubble { max-width: 80%; padding: 9px 13px; border-radius: 13px; font-size: 13px; line-height: 1.5; }
.chat-bot .chat-bubble { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-user .chat-bubble { background: var(--grad-brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-sources { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 11.5px; }
.chat-provider { margin-top: 5px; font-size: 10.5px; color: var(--text-muted); }
.chat-typing { letter-spacing: 2px; animation: pulse-rec 1.2s ease-in-out infinite; }
.chat-input { display: flex; gap: 7px; padding: 10px; border-top: 1px solid var(--border); background: var(--surface-2); }
.chat-input input { flex: 1; }

/* Aufnahme / Transkript */
.rec-toggle { font-size: 11.5px; margin: 3px 0 9px; text-align: left; color: var(--text-muted); }
.rec-indicator { margin-top: 9px; font-size: 12px; font-weight: 600; color: var(--danger); animation: pulse-rec 1.4s ease-in-out infinite; }
.transcript-status { font-size: 12.5px; line-height: 1.5; }
.transcript-status pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px; font-size: 11.5px; max-height: 200px; overflow: auto; }
.transcript-status summary { cursor: pointer; color: var(--primary); }

/* ════════════════════════════════════════════════════════════════════════════
   Kalender
   ════════════════════════════════════════════════════════════════════════════ */
.confirm-overbudget {
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 18%, transparent), var(--shadow);
  margin-bottom: 16px;
}
.confirm-overbudget h3 { color: var(--warning); }
.confirm-overbudget .action-group { margin-top: 13px; }
.row-create { gap: 7px; }
.row-create input[type="date"] { min-width: 140px; }

.lead-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.lead-forms .form-card { max-width: none; margin: 0; }
@media (max-width: 768px) { .lead-forms { grid-template-columns: 1fr; } }

.cal-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cal-month { font-size: 1.1rem; font-weight: 700; min-width: 180px; text-align: center; text-transform: capitalize; }
.calendar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(8px, 1.2vw, 16px);
  box-shadow: var(--shadow); width: 100%; overflow: hidden;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(3px, .5vw, 7px); }
.cal-grid + .cal-grid { margin-top: clamp(3px, .5vw, 7px); }
.cal-head { margin-bottom: 7px; }
.cal-dow {
  text-align: center; font-size: clamp(9px, 1vw, 10.5px); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); padding: 3px 0; min-width: 0;
}
.cal-dow.cal-we { color: var(--text-soft); }
.cal-cell {
  min-height: clamp(46px, 10vh, 96px); min-width: 0;
  border: 1px solid var(--border); border-radius: clamp(7px, .9vw, 12px);
  padding: clamp(4px, .6vw, 9px); display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: var(--text); background: var(--surface); overflow: hidden;
  transition: border-color .14s, box-shadow .14s, transform .12s, background .14s;
}
a.cal-cell:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.cal-empty { background: transparent; border: 1px dashed var(--border); opacity: .35; pointer-events: none; }
.cal-weekend { background: var(--surface-2); }
.cal-num { font-weight: 700; font-size: 13px; color: var(--text-muted); }
.cal-has { border-color: var(--border-strong); }
.cal-has .cal-num { color: var(--text); }
.cal-today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal-today .cal-num { color: var(--primary); }
.cal-dots { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.cal-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 20px; font-size: 11px; font-weight: 700;
  background: var(--grad-brand); color: #fff; width: fit-content;
}
.cal-pill { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 20px; width: fit-content; }
.cal-pill-open { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.cal-pill-held { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; color: var(--text-muted); font-size: 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border); display: inline-block; }
.legend-has { background: var(--surface); border-color: var(--border-strong); }
.legend-today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.legend-we { background: var(--surface-2); }

@media (max-width: 560px) {
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 50px; padding: 4px 5px; }
  .cal-pill { display: none; }
  .cal-month { min-width: 130px; font-size: .95rem; }
  .session-layout { grid-template-columns: 1fr; height: auto; }
  .session-info { position: static; max-height: none; }
  .tab-host { height: auto; }
  .bulk-bar { position: static; }
  .status-bar { padding-left: 14px; }
}

/* ── Responsive: Session-Layout ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .session-layout { grid-template-columns: 1fr; height: auto; }
  .session-info { position: static; max-height: none; }
  .tab-host { height: auto; }
  .bulk-bar { position: static; }
}

/* ── Barrierefreiheit ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ── WhatsApp Verification ───────────────────────────────────────────────── */
.verify-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.verify-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.verify-step-num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--grad-brand); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.verify-step.done .verify-step-num { background: var(--success); }
.verify-step.done { border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.verify-code-input {
  letter-spacing: .3em; font-size: 1.4rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace;
}

/* ── Sitzungsdatum-Label (Timer-Karte) ───────────────────────────────────── */
.session-date-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); margin-bottom: 6px;
}

/* ── Auto-Anwesenheit (Google Meet) ──────────────────────────────────────── */
.pc-auto-hint {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 9px; border-top: 1px dashed var(--border);
}

/* ── Audit Log ───────────────────────────────────────────────────────────── */
.audit-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.audit-ts { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 11px; }
.audit-flag { color: var(--warning); font-weight: 700; }
.audit-flag-critical { color: var(--danger); font-weight: 700; }

/* ── Google Sync Status ──────────────────────────────────────────────────── */
.gcal-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: color-mix(in srgb, var(--neon) 12%, transparent); color: var(--neon);
  border: 1px solid color-mix(in srgb, var(--neon) 25%, transparent);
}
.gcal-badge.pending { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-soft); }
.gcal-badge.error { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-color: transparent; }

/* ─── Buchungssystem ─── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: .9em; }
.form-grid label.form-full { grid-column: 1 / -1; }
.form-grid label span { font-weight: 600; color: var(--muted); }
.form-grid input, .form-grid select, .form-grid textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check.check-inline { display: inline-flex; align-items: center; gap: 4px; }

.suggest-list { list-style: none; padding: 0; margin: 0; }
.suggest-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.suggest-row:last-child { border-bottom: 0; }

.slot-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-chip { padding: 4px 10px; border-radius: 999px; font-size: .82em; border: 1px solid var(--border); }
.slot-chip.slot-free { background: color-mix(in srgb, var(--success, #16a34a) 12%, transparent); color: var(--success, #16a34a); border-color: transparent; }
.slot-chip.slot-busy { background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent); color: var(--danger, #dc2626); border-color: transparent; text-decoration: line-through; opacity: .8; }

.card-accent { border-left: 4px solid var(--primary); }
.card-warn { border-left: 4px solid var(--warning, #d97706); }

/* Einmalig angezeigtes Reset-Passwort — auffällig, gut ablesbar */
.rp-code {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  font-size: 1.8rem; font-weight: 700; letter-spacing: .25em;
  color: var(--primary); margin: 10px 0 4px;
}

/* ── Login-Erfolgs-Animation ("Matrix-Login") ──────────────────────────────
   Liegt als Vollbild-Overlay ÜBER dem bereits gerenderten Dashboard; das
   Entfernen/Ausblenden legt das Dashboard einfach frei (kein separater
   Fade-In-Render nötig). Ohne JS bleibt [hidden] aktiv → Dashboard sofort
   sichtbar, kein Blockieren. */
.lsx-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #04070d; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .35s ease;
}
.lsx-overlay.lsx-fade-out { opacity: 0; }
.lsx-overlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lsx-skip {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; letter-spacing: .04em; color: rgba(255,255,255,.55);
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  pointer-events: none; user-select: none;
}

/* ─── Quantum-OS Komponenten (EÜR / Buchhaltung / Settings) ─── */
.qos-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.qos-kpi {
  position: relative;
  padding: 16px 18px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, transparent), var(--surface-2));
  border: 1px solid var(--border);
  overflow: hidden;
}
.qos-kpi::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%);
  pointer-events: none;
}
.qos-kpi-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted, color-mix(in srgb, var(--text) 55%, transparent));
  font-weight: 700;
}
.qos-kpi-value {
  margin-top: 6px;
  font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.qos-kpi-sub {
  margin-top: 4px;
  font-size: 11px; color: var(--muted, color-mix(in srgb, var(--text) 55%, transparent));
  font-variant-numeric: tabular-nums;
}
.qos-kpi-accent { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.qos-kpi-accent .qos-kpi-value { color: var(--primary); }
.qos-kpi-warn   { border-color: color-mix(in srgb, var(--warning, #d97706) 50%, var(--border)); }
.qos-kpi-warn .qos-kpi-value { color: var(--warning, #d97706); }

.qos-link-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.qos-link-list li { display:flex; gap:8px; align-items:center; }

.grid-two { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:14px; margin-bottom:14px; }

/* Tabular numbers in Beträge-Tabellen */
.table.table-numeric td, .table.table-numeric th { font-variant-numeric: tabular-nums; }
.table .right, .table th.right, .table td.right { text-align: right; }
.totals-row td { border-top: 2px solid var(--border-strong); font-weight: 700; }
.amount { font-variant-numeric: tabular-nums; }
.amount.warn { color: var(--warning, #d97706); }
.good { color: var(--success, #16a34a); }
.bad  { color: var(--danger, #dc2626); }

/* Toast-Varianten */
.toast-inline.toast-info  { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--text); padding:10px 14px; border-radius:10px; margin-bottom:10px; }
.toast-inline.toast-warn  { border-color: color-mix(in srgb, var(--warning, #d97706) 40%, var(--border)); background: color-mix(in srgb, var(--warning, #d97706) 10%, transparent); color: var(--text); padding:10px 14px; border-radius:10px; margin-bottom:10px; }

/* Berater-Namen in eigener Farbe */
.consultant-name { font-weight: 700; }
.consultant-dot  { display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:middle; margin-right:6px; box-shadow:0 0 6px currentColor; }

/* Topbar-Berater-Modus-Badge */
.topbar-consultant {
  display:inline-flex; align-items:center; gap:8px; margin-right:10px;
  padding:4px 10px; border-radius:999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.topbar-consultant .badge-color { width:8px; height:8px; border-radius:50%; box-shadow:0 0 6px currentColor; }
.topbar-consultant a { color: var(--text); text-decoration: none; opacity:.7; }
.topbar-consultant a:hover { opacity:1; }

.qos-preview { margin-top:8px; padding:10px 12px; border-radius:10px; background: var(--surface-2); border:1px solid var(--border); display:inline-block; }
.qos-preview .muted { color: var(--muted, color-mix(in srgb, var(--text) 55%, transparent)); font-size:11px; }

/* ─── FAQ-Ticker (Kunden-Dashboard) ─── */
.faq-ticker {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 60%),
    var(--surface-2);
  overflow: hidden;
  position: relative;
}
.faq-ticker-label {
  flex-shrink: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--primary);
  font-family: ui-monospace, monospace;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}
.faq-ticker-window {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 22px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.faq-ticker-track {
  display: flex; gap: 36px;
  white-space: nowrap;
  position: absolute; top: 0; left: 0;
  height: 22px; line-height: 22px;
  /* Inhalt startet links (translateX 0) und wandert nach rechts raus, dann von links wieder rein.
     Da die Inhalte 2× hintereinander gerendert werden, ergibt sich eine nahtlose Schleife. */
  animation: faq-ticker-scroll 60s linear infinite;
  will-change: transform;
}
.faq-ticker:hover .faq-ticker-track { animation-play-state: paused; }
@keyframes faq-ticker-scroll {
  from { transform: translateX(-50%); }   /* zweite Hälfte sichtbar */
  to   { transform: translateX(0%);   }   /* erste Hälfte sichtbar → läuft visuell von links nach rechts */
}
.faq-ticker-item {
  display: inline-flex; gap: 8px; align-items: center;
  color: var(--text); text-decoration: none;
  font-size: 12px;
}
.faq-ticker-item:hover { color: var(--primary); }
.faq-ticker-pct {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, monospace;
  font-weight: 700; font-size: 10px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  padding: 1px 6px; border-radius: 4px;
}
.faq-ticker-q { font-weight: 600; }
.faq-ticker-a { color: var(--muted, color-mix(in srgb, var(--text) 60%, transparent)); font-size: 11px; }
.faq-ticker-more {
  flex-shrink: 0;
  font-size: 16px; font-weight: 700;
  color: var(--primary); text-decoration: none;
  padding: 0 6px;
}
.faq-ticker-more:hover { transform: translateX(2px); }

/* ─── Angepinnte FAQ-Liste (aufklappbar) ─── */
.pinned-faq-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 360px; overflow-y: auto;
  margin-top: 4px;
  padding-right: 4px;
}
.pinned-faq-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  transition: border-color .15s;
}
.pinned-faq-item[open] { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.pinned-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
}
.pinned-faq-item > summary::-webkit-details-marker { display: none; }
.pinned-faq-item > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--muted, color-mix(in srgb, var(--text) 55%, transparent));
  transition: transform .15s;
}
.pinned-faq-item[open] > summary::after { transform: rotate(180deg); }
.pinned-faq-pct {
  font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace;
  font-size: 10px; font-weight: 700; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.pinned-faq-q { flex: 1; }
.pinned-faq-body {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.55;
}
.pinned-faq-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.faq-discover-hint { border-style: dashed; }

/* Antwort-Body: Lesefreundlich */
.faq-answer-body { font-size: 14px; line-height: 1.6; color: var(--text); }

/* ─── Wiki-Editor (Split-View + Autocomplete) ─── */
.wiki-editor-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-items: stretch;
}
@media (max-width: 1000px) { .wiki-editor-split { grid-template-columns: 1fr; } }
.wiki-editor-pane {
  display: flex; flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 480px;
}
.wiki-editor-toolbar {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  padding: 8px 10px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.wiki-editor-toolbar .btn { padding: 4px 8px; font-size: 11px; }
.wiki-editor-sep { color: var(--muted, color-mix(in srgb, var(--text) 40%, transparent)); padding: 0 4px; }
#wiki-body {
  flex: 1; resize: vertical; min-height: 380px;
  padding: 14px;
  border: 0; outline: 0;
  background: transparent; color: var(--text);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: auto;
}
.wiki-editor-status {
  padding: 6px 12px;
  background: var(--surface-3);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted, color-mix(in srgb, var(--text) 60%, transparent));
}
.wiki-editor-status code {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  padding: 1px 5px; border-radius: 3px;
}
.wiki-preview-label {
  padding: 8px 12px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary);
  font-family: ui-monospace, monospace;
}
.wiki-preview {
  flex: 1; overflow: auto;
  padding: 18px 22px;
  font-size: 14px; line-height: 1.65;
  background: var(--surface);
}
.wiki-preview h1, .wiki-preview h2, .wiki-preview h3 { margin: 16px 0 8px; line-height: 1.25; }
.wiki-preview h1 { font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.wiki-preview h2 { font-size: 18px; }
.wiki-preview h3 { font-size: 15px; }
.wiki-preview p { margin: 8px 0; }
.wiki-preview ul, .wiki-preview ol { margin: 8px 0; padding-left: 22px; }
.wiki-preview blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 12px; margin: 10px 0;
  color: var(--muted, color-mix(in srgb, var(--text) 70%, transparent));
}
.wiki-preview code {
  background: var(--surface-3); padding: 2px 6px; border-radius: 4px;
  font-family: ui-monospace, monospace; font-size: .9em;
}
.wiki-preview pre {
  background: var(--surface-3); padding: 12px; border-radius: 8px;
  overflow-x: auto;
}
.wiki-preview pre code { background: none; padding: 0; }
.wiki-preview a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.wiki-preview a:hover { text-decoration-thickness: 2px; }

/* Wikilink-Styles (existierend vs. neu) — auch in .md-body verwenden */
.wiki-preview a.wikilink-new,
.md-body a.wikilink-new {
  color: var(--warning, #d97706);
  text-decoration-style: dashed;
  text-decoration-color: color-mix(in srgb, var(--warning, #d97706) 55%, transparent);
}
.wiki-preview a.wikilink-new::after,
.md-body a.wikilink-new::after {
  content: ' +'; font-weight: 700; opacity: .7;
}

/* Autocomplete-Popup */
.wiki-autocomplete {
  position: absolute; z-index: 9999;
  width: 360px; max-width: 92vw;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.25), 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent);
  overflow: hidden;
}
.wiki-autocomplete-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 16%, transparent), transparent);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary);
  font-family: ui-monospace, monospace;
}
.wiki-autocomplete-input {
  width: 100%; padding: 10px 12px;
  border: 0; border-bottom: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  font: inherit; outline: none;
}
.wiki-autocomplete-input:focus { background: var(--surface); }
.wiki-autocomplete-list { max-height: 280px; overflow-y: auto; }
.wiki-ac-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.wiki-ac-item:last-child { border-bottom: 0; }
.wiki-ac-item:hover,
.wiki-ac-item.selected {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.wiki-ac-title { font-weight: 600; font-size: 13px; }
.wiki-ac-slug {
  font-family: ui-monospace, monospace; font-size: 10px;
  color: var(--muted, color-mix(in srgb, var(--text) 55%, transparent));
}
.wiki-ac-empty {
  padding: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  color: var(--muted, color-mix(in srgb, var(--text) 60%, transparent));
  font-size: 12px;
}

/* FAQ-Liste: klickbare Zeile */
.faq-row { transition: background .15s; }
.faq-row:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.faq-row a:hover strong { color: var(--primary); }

/* ─── Quantum-OS Global Polish (greift überall) ─── */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"], input[type="date"],
input[type="time"], input[type="datetime-local"], select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px;
  outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
  box-sizing: border-box;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="tel"]:focus, input[type="number"]:focus, input[type="search"]:focus,
input[type="url"]:focus, input[type="date"]:focus, input[type="time"]:focus,
input[type="datetime-local"]:focus, select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
input[type="color"] { width:50px; height:36px; padding:2px; border:1px solid var(--border); border-radius:8px; background:var(--surface); cursor:pointer; }
textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 14px;
  position: relative; transition: border-color .15s;
}
.card::before {
  content: ''; position: absolute; inset: -1px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), transparent 40%);
  z-index: -1; opacity: 0; transition: opacity .25s; pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card > h3:first-child, .card > h4:first-child { margin-top: 0; }
.card h3 { font-size: 15px; letter-spacing: .02em; margin: 0 0 12px; }
.card h4 { font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted, color-mix(in srgb, var(--text) 60%, transparent));
  margin: 14px 0 8px; font-weight: 700; }

.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th, .table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.table thead th {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted, color-mix(in srgb, var(--text) 55%, transparent));
  font-weight: 800; font-family: ui-monospace, monospace;
  background: var(--surface-3);
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 30%, var(--border));
}
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.table .right { text-align: right; }

.btn { display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
  text-decoration: none;
  transition: transform .08s, background .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 4px 10px; font-size: 11px; border-radius: 6px; }
.btn-primary { background: var(--primary); color: white;
  border-color: color-mix(in srgb, var(--primary) 80%, white);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--primary) 30%, transparent); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface-3); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); color: var(--primary); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-ghost-danger { background: transparent; color: var(--danger, #dc2626); border-color: transparent; }
.btn-ghost-danger:hover { background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent); }
.btn-success { background: var(--success, #16a34a); color: white; }
.btn-warning { background: var(--warning, #d97706); color: white; }
.btn-danger { background: var(--danger, #dc2626); color: white; }
.btn-link { background: transparent; color: var(--primary); padding: 4px 8px; }
.btn-link:hover { text-decoration: underline; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }

.form-grid label { display: flex; flex-direction: column; gap: 4px; }
.form-grid label > span { font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, color-mix(in srgb, var(--text) 55%, transparent)); }

label.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
label.check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }

.page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-header h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.page-header .hint { font-size: 12px; color: var(--muted, color-mix(in srgb, var(--text) 60%, transparent)); }
.page-header .toolbar { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.muted { color: var(--muted, color-mix(in srgb, var(--text) 55%, transparent)); }
.warn { color: var(--warning, #d97706); }
.danger { color: var(--danger, #dc2626); }
.chip { display: inline-flex; align-items: center; padding: 3px 9px;
  border-radius: 999px; font-size: 11px; background: var(--surface-3);
  color: var(--text); border: 1px solid var(--border); }
.chip-warn { background: color-mix(in srgb, var(--warning, #d97706) 14%, transparent);
  color: var(--warning, #d97706); border-color: transparent; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; border: 1px solid transparent; }
.badge-neutral { background: var(--surface-3); color: var(--text); border-color: var(--border); }
.badge-green { background: color-mix(in srgb, var(--success, #16a34a) 16%, transparent); color: var(--success, #16a34a); }
.badge-yellow { background: color-mix(in srgb, var(--warning, #d97706) 16%, transparent); color: var(--warning, #d97706); }
.badge-red { background: color-mix(in srgb, var(--danger, #dc2626) 16%, transparent); color: var(--danger, #dc2626); }
.badge-blue { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.badge-gold { background: color-mix(in srgb, #facc15 18%, transparent); color: #b45309; }

.empty-state { text-align: center; padding: 40px 20px;
  color: var(--muted, color-mix(in srgb, var(--text) 60%, transparent)); }
.empty-state .empty-icon { font-size: 36px; margin-bottom: 8px; }

/* ─── Buchungs-Funnel (/start, /start/checkout, thanks) ─── */
.landing-hero {
  text-align: center; padding: 36px 20px 24px; margin-bottom: 18px;
  border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border);
}
.landing-hero h1 { font-size: 28px; margin: 0 0 8px; letter-spacing: -.01em; }
.landing-hero p { font-size: 14px; color: var(--muted, color-mix(in srgb, var(--text) 70%, transparent)); max-width: 640px; margin: 0 auto; }
/* Kompakte Variante für den Bestellprozess: weniger Höhe, mehr Platz für die Themen */
.landing-hero-slim { padding: 14px 18px; margin-bottom: 12px; }
.landing-hero-slim h1 { font-size: 20px; margin: 0 0 3px; }
.landing-hero-slim p { font-size: 13px; }

.topic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.topic-card {
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 3px;
  transition: border-color .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s cubic-bezier(.2,.7,.3,1);
  position: relative;
}
.topic-card:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.topic-card.is-selected, .topic-card:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: 0 0 0 1px var(--primary);
}
.topic-card input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.topic-card-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.topic-card-head strong { font-size: 14px; }
.topic-desc { font-size: 12px; color: var(--muted, color-mix(in srgb, var(--text) 65%, transparent)); margin: 0; }
.topic-meta { display: flex; gap: 6px; align-items: center; font-size: 11px; }

/* ════════════════════════════════════════════════════════════════════════
   Bestellabwicklung /start — Themen-Auswahl (kompakt, Scrollview, Details-Panel)
   ════════════════════════════════════════════════════════════════════════ */
/* Zwei-Spalten-Layout: Auswahl breit, Budget schmal — alles ohne Seiten-Scroll */
.start-grid {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(240px, 1fr);
  gap: 14px; margin-bottom: 14px; align-items: start;
}
@media (max-width: 780px) { .start-grid { grid-template-columns: 1fr; } }
.topic-panel { display: flex; flex-direction: column; min-height: 0; }
.budget-panel { position: sticky; top: 8px; }
.btn-block { width: 100%; }

/* Toolbar: Suche + Filter-Radiogruppe + Sortier-Buttons */
.topic-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.topic-search-wrap { position: relative; flex: 1 1 180px; min-width: 150px; }
/* Monochrome Lupe (keine Emoji): Kreis + Griff via CSS */
.topic-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-60%);
  width: 10px; height: 10px; border: 1.5px solid var(--muted); border-radius: 50%; pointer-events: none;
}
.topic-search-icon::after {
  content: ""; position: absolute; right: -4px; bottom: -3px; width: 5px; height: 1.5px;
  background: var(--muted); transform: rotate(45deg); transform-origin: right center;
}
.topic-search {
  width: 100%; padding: 8px 10px 8px 30px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.topic-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
/* Radiogruppe als Segmented Control */
.topic-filter { display: inline-flex; padding: 2px; border-radius: 9px; background: color-mix(in srgb, var(--text) 7%, transparent); border: 1px solid var(--border); }
.topic-radio { position: relative; cursor: pointer; }
.topic-radio input { position: absolute; opacity: 0; pointer-events: none; }
.topic-radio span { display: block; padding: 5px 11px; font-size: 12px; font-weight: 600; border-radius: 7px; color: var(--text-muted); transition: background .15s, color .15s; }
.topic-radio.is-active span { background: var(--accent); color: #10243F; }
/* Sortier-Buttons */
.topic-sort { display: inline-flex; gap: 6px; }
.topic-sort-btn {
  padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-muted);
  transition: border-color .15s, color .15s, background .15s;
}
.topic-sort-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
.topic-sort-btn.is-active { background: var(--accent); color: #10243F; border-color: transparent; }

/* Scrollview: exakt 5,5 kompakte Zeilen sichtbar (Zeile ~58px + 8px gap) */
.topic-scroll {
  --topic-row: 58px; --topic-gap: 8px;
  max-height: calc(5.5 * var(--topic-row) + 5 * var(--topic-gap));
  overflow-y: auto; overflow-x: hidden; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}
.topic-scroll::-webkit-scrollbar { width: 8px; }
.topic-scroll::-webkit-scrollbar-track { background: transparent; }
.topic-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 99px; border: 2px solid transparent; background-clip: content-box;
}
.topic-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 75%, transparent); background-clip: content-box; }
/* Einspaltige Liste, damit „5,5 Zeilen" eindeutig ist */
.topic-scroll .topic-list { display: flex; flex-direction: column; gap: var(--topic-gap); grid-template-columns: none; }

/* Kompakte Themen-Karte: eine Zeile, Details-Button rechts, KEINE Beschreibung inline */
.topic-panel .topic-card {
  flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px; min-height: var(--topic-row);
  box-sizing: border-box;
}
.topic-card-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.topic-card-head { display: flex; align-items: center; gap: 8px; }
.topic-card-head strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topic-card-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topic-effort { font-size: 11px; }
/* Runde Checkbox-Anzeige links */
.topic-check { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--border); display: inline-grid; place-items: center; transition: border-color .15s, background .15s; }
.topic-card:has(input:checked) .topic-check { border-color: var(--accent); background: var(--accent); }
.topic-card:has(input:checked) .topic-check::after { content: '✓'; font-size: 10px; font-weight: 900; color: #10243F; line-height: 1; }
.chip-req { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
/* Details-Button */
.topic-details-btn {
  flex: 0 0 auto; padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 8px;
  background: transparent; color: var(--accent);
  transition: background .15s, color .15s, transform .1s;
}
.topic-details-btn:hover { background: var(--accent); color: #10243F; }
.topic-details-btn:active { transform: scale(.95); }
.topic-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 18px 0 4px; }

/* ── Animiertes Details-Panel ─────────────────────────────────────────────── */
.topic-detail-backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(8, 18, 32, .55);
  opacity: 0; transition: opacity .25s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.topic-detail-backdrop.is-open { opacity: 1; }
.topic-detail-panel {
  position: fixed; z-index: 91; left: 50%; top: 50%;
  width: min(460px, calc(100vw - 40px)); max-height: min(70vh, 520px); overflow-y: auto;
  padding: 22px 24px; border-radius: 3px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  box-shadow: 0 30px 70px -20px rgba(8, 18, 32, .7);
  /* Ausgangszustand: verkleinert + transparent → wird beim Öffnen animiert vergrößert */
  transform: translate(-50%, -50%) scale(.9); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.8,.25,1), opacity .22s ease;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent;
}
.topic-detail-panel.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.topic-detail-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 15px; line-height: 1;
  border: 1px solid var(--border); background: var(--surface-2, var(--surface)); color: var(--text);
  transition: background .15s, color .15s, transform .15s, border-color .15s;
}
.topic-detail-close:hover { background: var(--danger, #C0492F); color: #fff; border-color: transparent; transform: rotate(90deg); }
#topic-detail-title { margin: 0 34px 8px 0; font-size: 1.15rem; }
.topic-detail-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.topic-detail-tags { font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 12px; letter-spacing: .02em; }
.topic-detail-body { font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
@media (prefers-reduced-motion: reduce) {
  .topic-detail-panel, .topic-detail-backdrop { transition: none; }
  .topic-detail-close:hover { transform: none; }
}

.landing-result { margin-top: 20px; }
.card.card-accent { border-left: 4px solid var(--primary); }

/* Fortschrittsleiste über den drei Funnel-Schritten (Auswahl/Daten/Bestätigung) */
.fun-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border); border-radius: 3px; background: var(--surface);
  overflow: hidden; margin-bottom: 14px;
}
.fun-step { padding: 10px 15px; border-right: 1px solid var(--border); display: flex; align-items: baseline; gap: 8px; }
.fun-step:last-child { border-right: none; }
.fun-step-num { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .05em; color: var(--muted); }
.fun-step-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.fun-step.is-done .fun-step-num, .fun-step.is-done .fun-step-label { color: var(--text); opacity: .62; }
.fun-step.is-current { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 0 -2px 0 var(--accent); }
.fun-step.is-current .fun-step-num { color: var(--accent); }
.fun-step.is-current .fun-step-label { color: var(--navy, var(--text)); font-weight: 700; }
@media (max-width: 640px) {
  .fun-steps { grid-template-columns: 1fr; }
  .fun-step { border-right: none; border-bottom: 1px solid var(--border); }
  .fun-step:last-child { border-bottom: none; }
}

/* Funnel-Aktionsleisten (ersetzen frühere Inline-Styles) */
.qos-actions-tight { margin-top: 14px; }
.qos-actions-loose { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* Beträge in Zusammenfassungen: tabellarisch, rechtsbündig */
.info-list-amounts dd.amount { text-align: right; font-variant-numeric: tabular-nums; }
.amount-total { font-size: 18px; font-weight: 800; color: var(--primary); }

/* Themen-Übersicht als echte Tabelle (start.pug) */
.funnel-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.funnel-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 0 0 7px; border-bottom: 1px solid var(--border);
}
.funnel-table th.num, .funnel-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.funnel-table td { padding: 7px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.funnel-table tr:last-child td { border-bottom: none; }
.funnel-table .t-name { font-weight: 600; color: var(--navy, var(--text)); }
.funnel-table .t-meta { color: var(--muted); font-size: 12.5px; }

/* Nächste-Schritte-Liste (thanks.pug): tabellarische Nummern statt Inline-Style */
.funnel-ol { margin: 0; padding-left: 0; list-style: none; counter-reset: fstep; }
.funnel-ol li {
  counter-increment: fstep; position: relative; padding: 8px 0 8px 30px;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.funnel-ol li:last-child { border-bottom: none; }
.funnel-ol li::before {
  content: counter(fstep, decimal-leading-zero); position: absolute; left: 0; top: 9px;
  font-size: 11px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums;
}

.hint-small { font-size: 11px; }
.input-uppercase { text-transform: uppercase; }
.qos-link-list-title { flex: 1; }

/* Karten im Funnel: 3px-Standard statt --radius-lg */
body.funnel .card { border-radius: 3px; }

/* ─── Sidebar: Collapse-Animation + Kompaktes Layout ─── */
:root { --sidebar-width: 220px; --sidebar-width-collapsed: 60px; }

.sidebar {
  width: var(--sidebar-width);
  transition: width .28s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
.sidebar.is-collapsed { width: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .app-shell { grid-template-columns: var(--sidebar-width-collapsed) 1fr !important; }
.app-shell { transition: grid-template-columns .28s cubic-bezier(.4,0,.2,1); }

.brand { display:flex; align-items:center; gap:10px; padding: 12px 14px; position: relative; min-height: 56px; }
.brand-logo { flex-shrink: 0; }
.brand-info { display: flex; flex-direction: column; overflow: hidden; transition: opacity .2s ease; }
.brand-name { font-size: 14px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.brand-sub { font-size: 10px; opacity: .55; letter-spacing: .08em; white-space: nowrap; font-family: ui-monospace, monospace; }

.sidebar-collapse {
  position: absolute; right: 8px; top: 14px;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  transition: background .15s, color .15s, transform .15s;
}
.sidebar-collapse:hover { background: var(--primary); color: white; }
.sidebar.is-collapsed .sidebar-collapse { right: 50%; transform: translateX(50%); top: 60px; }

/* Sidebar-Items kompakter + sauber */
.side-nav { padding: 6px 8px; }
.side-section {
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted, color-mix(in srgb, var(--text) 40%, transparent));
  font-weight: 800;
  padding: 12px 10px 4px;
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}
.side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin: 1px 0;
  border-radius: 8px;
  color: var(--text); text-decoration: none;
  font-size: 13px;
  position: relative;
  white-space: nowrap;
  transition: background .12s, color .12s, transform .08s;
}
.side-item:hover { background: var(--surface-3); }
.side-item.side-active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--primary) 8%, transparent));
  color: var(--primary); font-weight: 700;
}
.side-item.side-active::before {
  content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}
.side-icon { flex-shrink: 0; width: 22px; text-align: center; font-size: 14px; }
.side-label { flex: 1; transition: opacity .15s, max-width .25s; overflow: hidden; text-overflow: ellipsis; }
.side-chevron { font-size: 12px; opacity: 0; transition: opacity .15s; }
.side-item:hover .side-chevron, .side-item.side-active .side-chevron { opacity: .5; }
.side-mark { display: none; }

/* Collapsed-Modus: nur Icons, mit Tooltips */
.sidebar.is-collapsed .brand-info,
.sidebar.is-collapsed .side-label,
.sidebar.is-collapsed .side-section,
.sidebar.is-collapsed .side-chevron,
.sidebar.is-collapsed .side-foot a,
.sidebar.is-collapsed .side-foot .theme-toggle ~ * { opacity: 0; pointer-events: none; max-width: 0; }
.sidebar.is-collapsed .side-item { justify-content: center; padding: 9px 8px; }
.sidebar.is-collapsed .side-item .side-icon { width: auto; font-size: 16px; }
.sidebar.is-collapsed .side-section { padding: 8px 0 2px; height: 4px; }
.sidebar.is-collapsed .side-foot { flex-direction: column; gap: 6px; }
.sidebar.is-collapsed .side-foot a { display: none; }

/* Tooltip im Collapsed-State */
.sidebar.is-collapsed .side-item { position: relative; }
.sidebar.is-collapsed .side-item::after {
  content: attr(data-tooltip);
  position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  z-index: 100;
}
.sidebar.is-collapsed .side-item:hover::after { opacity: 1; }

.side-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
.side-foot .theme-toggle {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; font-size: 14px;
}
.side-foot .theme-toggle:hover { background: var(--primary); color: white; }
.side-logout {
  flex: 1; text-align: right; font-size: 12px;
  color: var(--muted, color-mix(in srgb, var(--text) 65%, transparent));
  text-decoration: none;
}
.side-logout:hover { color: var(--danger, #dc2626); }

/* ─── Smart/Kompakt-Layout global ─── */
.content { padding: 18px 22px; }
.card { padding: 14px 16px; margin-bottom: 12px; }
.card h3 { font-size: 14px; margin-bottom: 10px; }
.card h4 { font-size: 11px; }
.table th, .table td { padding: 7px 10px; font-size: 12px; }
.table thead th { padding: 6px 10px; }
.page-header { margin-bottom: 14px; }
.page-header h2 { font-size: 19px; }
.qos-kpi { padding: 12px 14px; border-radius: 12px; }
.qos-kpi-value { font-size: 19px; margin-top: 4px; }
.qos-kpi-label { font-size: 9px; }
.qos-kpi-sub { font-size: 10px; }
.qos-kpi-row { gap: 10px; margin-bottom: 14px; }
.btn { padding: 6px 12px; font-size: 12px; }
.btn-sm { padding: 3px 8px; font-size: 10px; }
.form-grid { gap: 10px; margin-bottom: 10px; }
.form-grid label > span { font-size: 10px; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"], input[type="date"],
input[type="time"], input[type="datetime-local"], select, textarea {
  padding: 6px 10px; font-size: 13px;
}
.toast-inline { padding: 8px 12px; font-size: 12px; margin-bottom: 8px; }
.badge { padding: 1px 7px; font-size: 9px; }
.chip { padding: 2px 8px; font-size: 10px; }

@media (max-width: 900px) {
  .content { padding: 14px 14px; }
  .card { padding: 12px 14px; }
}

/* ─── Kunden-Status-Dot (Erstkontakt / Fortschritt / letzte Sitzung) ─── */
.session-dot {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  position: relative;
  cursor: help;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}
.session-dot-glow {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.session-dot-label { font-size: 10px; }
.session-dot-green {
  color: var(--success, #16a34a);
  background: color-mix(in srgb, var(--success, #16a34a) 12%, transparent);
  border-color: color-mix(in srgb, var(--success, #16a34a) 30%, transparent);
}
.session-dot-green .session-dot-glow { background: var(--success, #16a34a); animation: dot-pulse 2.5s infinite; }
.session-dot-blue {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.session-dot-blue .session-dot-glow { background: var(--primary); }
.session-dot-orange {
  color: var(--warning, #d97706);
  background: color-mix(in srgb, var(--warning, #d97706) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning, #d97706) 32%, transparent);
}
.session-dot-orange .session-dot-glow { background: var(--warning, #d97706); animation: dot-pulse 1.8s infinite; }
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.85); }
}

/* ─── Kalender: Status-Marker pro Tag ─── */
.cal-cell.cal-first-contact { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success, #16a34a) 60%, transparent); }
.cal-cell.cal-last-before-cancel { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning, #d97706) 60%, transparent); }
.cal-status-row { display:flex; gap:2px; margin-top:3px; flex-wrap:wrap; }
.cal-status-mini {
  width:7px; height:7px; border-radius:50%;
  display:inline-block;
  position: relative;
}
.cal-status-mini-glow {
  position: absolute; inset: 0; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
}
.cal-status-mini.session-dot-green { color: var(--success, #16a34a); }
.cal-status-mini.session-dot-blue  { color: var(--primary); }
.cal-status-mini.session-dot-orange { color: var(--warning, #d97706); animation: dot-pulse 1.8s infinite; }

/* ─── Themen-Editor: Kurzbeschreibung mit KI-Button ─── */
.summary-with-ai { display: flex; gap: 8px; align-items: flex-start; }
.summary-with-ai textarea { flex: 1; resize: vertical; }
.summary-with-ai button { flex-shrink: 0; }

/* Themenprüfungs-Ergebnisse */
.check-result-list { display: flex; flex-direction: column; gap: 6px; }
.check-result-item {
  display: block;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.check-result-item:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.check-result-item:has(input:checked) {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border-color: var(--primary);
}
.check-result-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.check-result-head input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--primary); margin: 0; }
.check-result-head strong { font-size: 13px; }
.check-result-snippet { font-size: 11px; color: var(--muted, color-mix(in srgb, var(--text) 60%, transparent)); margin-top: 4px; line-height: 1.4; }

/* KI-Vorschlag-Panel */
.ai-suggest-panel { border-left: 4px solid var(--primary); }
.ai-suggest-block { margin: 14px 0; padding: 12px; background: var(--surface-3); border-radius: 8px; }
.ai-suggest-block h4 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary);
  font-family: ui-monospace, monospace;
}
.ai-suggest-text {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.55;
  white-space: pre-wrap;
  max-height: 280px; overflow-y: auto;
  margin-bottom: 10px;
}
#ai-followups { padding-left: 20px; }
#ai-followups li { margin: 4px 0; font-size: 13px; }

/* ─── Topic-Bilder (Editor + Landing) ─── */
.topic-image-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.topic-bg-preview {
  max-width: 280px; max-height: 160px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border);
}
.image-action-row { margin: 8px 0; }

.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin: 8px 0;
}
.gallery-item {
  position: relative;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-3);
}
.gallery-item img { width: 100%; height: 120px; object-fit: cover; display: block; }
.gallery-item form { position: absolute; top: 4px; right: 4px; }
.gallery-item button { background: rgba(0,0,0,.55); color: white; border-color: transparent; }
.gallery-item:hover button { background: var(--danger, #dc2626); }

.ai-image-gen { margin: 10px 0; }
.ai-image-gen summary {
  cursor: pointer; padding: 8px 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-3));
  border-radius: 8px; font-size: 12px; font-weight: 600;
  list-style: none;
}
.ai-image-gen summary::-webkit-details-marker { display: none; }
.ai-image-gen summary::before { content: '▸ '; }
.ai-image-gen[open] summary::before { content: '▾ '; }
.ai-image-gen > form { padding: 12px; background: var(--surface-3); border-radius: 8px; margin-top: 6px; }

/* Topic-Karten mit Hintergrundbild (Landing) */
.topic-card.has-bg {
  background-size: cover; background-position: center;
  color: white;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
.topic-card.has-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.75));
  border-radius: inherit;
  pointer-events: none;
}
.topic-card.has-bg > * { position: relative; z-index: 1; }
.topic-card.has-bg .topic-desc { color: rgba(255,255,255,.85); }
.topic-card.has-bg .topic-card-head .chip {
  background: rgba(255,255,255,.18); color: white; border-color: transparent;
}
.topic-card.has-bg.is-selected, .topic-card.has-bg:has(input:checked) {
  box-shadow: 0 0 0 2px var(--primary), 0 0 20px color-mix(in srgb, var(--primary) 40%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════════
   IT JONES BERATUNG — Marken-Override (gewinnt Kaskade, am Dateiende)
   Navy = Text/Links, Gold = CTA/Füllung.
   ════════════════════════════════════════════════════════════════════════════ */

/* Primärer CTA = Gold mit Navy-Text (Prototyp-Look) */
.btn-primary {
  background: var(--accent) !important;
  color: #10243F !important;
  border-color: var(--accent) !important;
  box-shadow: 0 2px 14px rgba(200,161,91,.30) !important;
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-soft) !important; border-color: var(--accent-soft) !important; }
[data-theme="dark"] .btn-primary { color: #10243F !important; }

/* Sekundär = Navy-Outline */
.btn-secondary {
  background: transparent;
  color: var(--navy, var(--text));
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }

/* Links dezent navy → gold beim Hover */
a { color: var(--navy, var(--text)); }
a:hover { color: var(--accent); }
.btn, .side-item, .nav-brand, .topbar-icon-btn { color: inherit; }

/* Karten: weicher, wärmer, editorialer */
.card { box-shadow: var(--shadow); border-color: var(--border); }
.card::before { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 42%); }

/* Sidebar Active = Gold-Akzent statt Blau */
.side-item.side-active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent);
  color: #FFFFFF;
}
.side-item.side-active::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.side-item { color: var(--sidebar-text); }
.side-item:hover { background: rgba(255,255,255,.06); color: #FFFFFF; }
.side-icon { color: var(--accent); }
.brand-name { color: #FFFFFF; font-family: var(--font-head); }
.brand-sub { color: var(--accent-soft); }

/* Topbar: leichter Blur + warme Surface */
.topbar {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-title { font-family: var(--font-head); color: var(--navy, var(--text)); }
.topbar-badge {
  background: var(--accent); color: #10243F; font-weight: 700;
  font-family: var(--font-body);
}

/* Icon-Buttons oben rechts im View-Bereich (Home, Logout) -- bewusst hier
   und nicht in der schmalen Rail, damit sie unabhaengig vom Auf-/Zuklapp-
   Zustand des Menues immer erreichbar sind. */
.topbar-icon-btn {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.topbar-icon-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-1px); }
.topbar-icon-btn .i { width: 15px; height: 15px; }
.topbar-icon-btn.is-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.topbar-icon-btn.is-danger:hover { filter: brightness(1.1); }

/* KPI: Gold-Akzent */
.qos-kpi-accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.qos-kpi-accent .qos-kpi-value { color: var(--accent); }
.qos-kpi-value { font-family: var(--font-head); color: var(--navy, var(--text)); }

/* Badges blue → navy-ton (Konsistenz) */
.badge-blue { background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy, var(--text)); }
[data-theme="dark"] .badge-blue { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

/* Öffentliche Top-Nav (Header) — Editorial */
.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav { max-width: var(--maxw); margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 24px; flex-wrap: nowrap; }
.nav-brand { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--navy, var(--text)); text-decoration: none; flex-shrink: 0; }
/* nowrap: bei ausreichend Breite (Landscape) sollen die Buttons niemals in
   eine zweite Zeile springen -- das uebernimmt erst die Mobile-Ansicht via
   .nav-toggle-Dropdown unterhalb der bestehenden Breakpoint-Regel. */
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--accent); border-radius: 2px;
}
/* Landing-Sprungmarken: ein gleitender Unterstrich (.nav-ink) folgt der Sektion, die gerade im Bild ist */
.nav-links.has-ink { position: relative; }
.nav-links.has-ink a.active::after { display: none; }
.nav-ink {
  position: absolute; bottom: -6px; left: 0; width: 0; height: 2px; opacity: 0; pointer-events: none;
  background: var(--accent); border-radius: 2px;
  transition: left .35s cubic-bezier(.2,.7,.2,1), width .35s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
/* Sprungziele fuellen genau den sichtbaren Bereich (--view-h, per JS gesetzt): beim Anspringen ist nur diese Sektion im Bild */
.lp-snap { min-height: var(--view-h, 100vh); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .nav-ink { transition: none; } }
.nav-logout, .nav-links a[href*="login"] {
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border-strong);
}
.nav-links a[href="/portal/login"], .nav-links a[href="/admin/login"] {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.nav-links a[href="/portal/login"]:hover, .nav-links a[href="/admin/login"]:hover { background: var(--navy-soft); }

/* Footer editorial */
.footer { background: var(--navy); color: var(--accent-soft); }
.footer p, .footer a { color: rgba(255,255,255,.7); }
[data-theme="dark"] .footer { background: #0B121C; }

/* Blueprint-Rastermuster für Hero-/Hintergrundbereiche */
.bp-grid {
  background-image:
    linear-gradient(color-mix(in srgb, var(--navy) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--navy) 4%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ════════════════════════════════════════════════════════════════════════════
   IT JONES — Landing Page (Editorial)
   ════════════════════════════════════════════════════════════════════════════ */
.lp { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 28px 48px; }

/* Hero */
.lp-hero { padding: 28px 0 40px; border-radius: var(--radius-lg); }
.lp-hero-inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
}
.lp-h1 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05;
  color: var(--navy, var(--text)); margin-bottom: 18px; letter-spacing: -0.02em;
  text-shadow: 0 0 1px color-mix(in srgb, var(--bg) 90%, transparent),
               0 1px 2px color-mix(in srgb, var(--bg) 85%, transparent),
               0 2px 16px color-mix(in srgb, var(--bg) 70%, transparent);
}
.lp-h1-accent { color: var(--accent); }
.lp-sub {
  font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--navy-soft, var(--text));
  max-width: 540px; line-height: 1.6; margin-bottom: 28px;
  text-shadow: 0 1px 10px color-mix(in srgb, var(--bg) 65%, transparent);
}
.lp-cta { font-size: 1rem; padding: 14px 28px; border-radius: 12px; }

.lp-hero-media { display: flex; justify-content: center; }
.lp-hero-card {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px;
  box-shadow: var(--shadow-lg);
}
.lp-hero-card-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.lp-hero-card-head strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--navy, var(--text)); }
.lp-hero-card-head .muted { font-size: 12px; }
.lp-hero-chart { width: 100%; height: auto; }

/* ── Full-Bleed-Utility: robust per JS gemessene Bleed-Distanz statt 100vw
   (zählt sonst die Scrollleiste mit ein → echter horizontaler Overflow).
   JS (app.js) misst pro Element links/rechts unabhängig, siehe initFullBleed. ── */
.full-bleed {
  width: calc(100% + var(--fb-bleed-l, 0px) + var(--fb-bleed-r, 0px));
  margin-left: calc(-1 * var(--fb-bleed-l, 0px));
  margin-right: calc(-1 * var(--fb-bleed-r, 0px));
}

/* ── Navy-Übergangszone: der Hero (Foto) blendet unten in dasselbe feste
   Navy (#10243F) über, die Produkte zeigen sich auf dem dunklen Grund —
   danach wieder zurück zu var(--bg) für Vorteile/Ablauf/FAQ. ── */
.lp-products-band {
  position: relative;
  background: linear-gradient(170deg, #16304F 0%, #10243F 100%);
  padding: 8px 0 72px;
  margin-bottom: 96px;
}
.lp-products-band::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(0deg, var(--bg), transparent);
  pointer-events: none;
}
.lp-products-band-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; }
.lp-products-band .lp-products { margin: 8px 0 0; }
/* Helle Karte würde im Dunkelmodus mit dem Navy-Band verschmelzen (beide
   ähnlich dunkles Blau) — hier bewusst heller + mit Innenglanz absetzen. */
[data-theme="dark"] .lp-products-band .lp-product-light {
  background: #1F3350; border-color: rgba(255,255,255,.14);
  box-shadow: 0 8px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Produktkarten */
.lp-products {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 8px 0 96px;
}
.lp-product {
  border-radius: var(--radius-lg); padding: 32px;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative; overflow: hidden;
}
.lp-product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lp-product-dark {
  background: var(--navy); color: #F3F4F6; border-color: transparent;
}
.lp-product-dark .lp-product-title, .lp-product-dark .lp-price { color: #FFFFFF; }
.lp-product-dark .lp-product-sub, .lp-product-dark .lp-price-note { color: rgba(255,255,255,.7); }
.lp-product-dark .lp-checklist li { color: rgba(255,255,255,.92); }
.lp-product-light { background: var(--surface); }
.lp-product-icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent); color: var(--accent); font-size: 24px;
  margin-bottom: 16px;
}
.lp-product-dark .lp-product-icon { border-color: var(--accent-soft); color: var(--accent-soft); }
.lp-product-title { font-family: var(--font-head); font-size: 1.5rem; margin-bottom: 4px; color: var(--navy, var(--text)); }
.lp-product-sub { font-size: .95rem; color: var(--text-muted); margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.lp-product-dark .lp-product-sub { border-color: rgba(255,255,255,.15); }
.lp-product-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.lp-price { font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; color: var(--accent); }
.lp-product-dark .lp-price { color: var(--accent-soft); }
.lp-price-note { font-size: .85rem; color: var(--text-muted); }
.lp-checklist { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.lp-checklist li { position: relative; padding-left: 26px; font-size: .95rem; }
.lp-checklist li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}
.lp-product-cta { margin-top: auto; align-self: flex-start; }
.lp-product-dark .lp-product-cta { background: var(--accent-soft) !important; }

/* Mehrwert + Themen */
.lp-value { scroll-margin-top: 30px; }
.lp-value-h { font-family: var(--font-head); font-size: 1.5rem; margin-bottom: 18px; color: var(--navy, var(--text)); }

/* Vorteile als 3er-Karten-Grid (Mockup-Stil): bündige Trennlinien statt
   Schatten/Farbverlauf, Titel+Text+Link je Karte. */
.lp-benefits {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 3px;
  overflow: hidden; margin-bottom: 40px;
}
.lp-benefit {
  background: var(--surface); padding: 28px 26px;
  display: flex; flex-direction: column; gap: 8px;
}
.lp-benefit strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--navy, var(--text)); }
.lp-benefit .muted { font-size: .87rem; flex: 1; }
.lp-benefit-link {
  font-size: .82rem; color: var(--accent-ink); align-self: flex-start; margin-top: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-ink) 40%, transparent);
}
.lp-benefit-link:hover { border-color: var(--accent-ink); }
[data-theme="dark"] .lp-benefit-link { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
[data-theme="dark"] .lp-benefit-link:hover { border-color: var(--accent); }

.lp-anrechnung {
  display: flex; gap: 12px; align-items: flex-start;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 3px; padding: 16px 18px; margin-bottom: 28px;
}
.lp-anrechnung-icon { color: var(--accent-ink); flex-shrink: 0; display: inline-flex; width: 20px; height: 20px; }
.lp-anrechnung-icon svg { width: 100%; height: 100%; }
.lp-anrechnung p { font-size: .95rem; color: var(--text); margin: 0; }

.lp-value-foot { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: .88rem; color: var(--text); transition: border-color .12s, color .12s;
}
.lp-chip:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 920px) {
  .lp-hero-inner { grid-template-columns: 1fr; }
  .lp-hero-media { order: -1; }
  .lp-products { grid-template-columns: 1fr; }
  .lp-benefits { grid-template-columns: 1fr; }
  .lp-value-foot { grid-template-columns: 1fr; }
}

/* Interesse-Sektion: Einblenden beim Betreten (Sprung oder Scrollen), 0.6 s, gestaffelt */
.lp-interest .lp-section-h, .lp-interest .lp-interest-lead, .lp-interest .lp-ticks, .lp-interest .lp-pop.lp-pop-embed {
  opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.lp-interest.is-in .lp-section-h, .lp-interest.is-in .lp-interest-lead, .lp-interest.is-in .lp-ticks, .lp-interest.is-in .lp-pop.lp-pop-embed { opacity: 1; transform: none; }
.lp-interest.is-in .lp-interest-lead { transition-delay: .12s; }
.lp-interest.is-in .lp-ticks { transition-delay: .22s; }
.lp-interest.is-in .lp-pop.lp-pop-embed { transition-delay: .26s; }
.lp-interest.is-in .lp-pop-embed .lp-pop-topics li { animation: lp-int-in .6s cubic-bezier(.2,.7,.2,1) both; }
.lp-interest.is-in .lp-pop-embed .lp-pop-topics li:nth-child(2) { animation-delay: .34s; }
.lp-interest.is-in .lp-pop-embed .lp-pop-topics li:nth-child(3) { animation-delay: .42s; }
.lp-interest.is-in .lp-pop-embed .lp-pop-topics li:nth-child(4) { animation-delay: .5s; }
.lp-interest.is-in .lp-pop-embed .lp-pop-topics li:nth-child(5) { animation-delay: .58s; }
.lp-interest.is-in .lp-pop-embed .lp-pop-topics li:nth-child(n+6) { animation-delay: .66s; }
@keyframes lp-int-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes lp-caret { 50% { opacity: 0; } }
.lp-typed.is-typing::after { content: '|'; margin-left: 2px; color: var(--accent); animation: lp-caret .9s steps(1) infinite; }
.lp-interest-lead { font-size: .98rem; line-height: 1.6; color: var(--text); margin: 0 0 22px; max-width: 520px; }
/* Themen-Ticker: drei gegenlaeufige Laufbaender, Eintraege sind Toggles */
.lp-ticks { display: flex; flex-direction: column; gap: 14px; max-width: 100%; }
.lp-tick-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.lp-tick-track { display: flex; width: max-content; will-change: transform; }
.lp-tick-set { display: flex; gap: 10px; padding-right: 10px; position: relative; flex: none; }
.lp-tick-item {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--navy, var(--text)); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); transition: background .25s ease, opacity .25s ease;
}
.lp-tick-item:hover { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
.lp-tick-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-tick-check { display: none; width: 18px; height: 18px; border-radius: 50%; background: #2fa36b; color: #fff; align-items: center; justify-content: center; flex: none; }
.lp-tick-item.is-sel { border-color: var(--border); background: color-mix(in srgb, var(--surface-2, var(--surface)) 80%, transparent); }
.lp-tick-item.is-sel .lp-tick-label { opacity: .5; }
.lp-tick-item.is-sel .lp-tick-check { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
  .lp-interest .lp-section-h, .lp-interest .lp-interest-lead, .lp-interest .lp-ticks, .lp-interest .lp-pop.lp-pop-embed { opacity: 1; transform: none; transition: none; }
  .lp-interest.is-in .lp-pop-embed .lp-pop-topics li { animation: none; }
  .lp-typed.is-typing::after { animation: none; }
}
/* Zwei Spalten ab Desktop: links Text und Hinweise, rechts die Karte. Darunter (schmal) einspaltig, zentriert. */
.lp-interest-grid { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 40px 28px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.lp-interest-intro { text-align: left; }
.lp-interest-intro .lp-section-h { margin-bottom: 14px; }
.lp-interest-card { min-width: 0; }
@media (max-width: 900px) {
  .lp-interest-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 20px; }
  .lp-interest-intro { text-align: center; }
  .lp-interest-pills li { font-size: .72rem; padding: 8px 6px; }
  .lp-interest-lead { margin: 0 auto 22px; }
}
/* Eingebettete Karte: groesser, nutzt die Breite; Aufbau und Funktion wie im Popup */
.lp-interest .lp-pop.lp-pop-embed:has(.lp-pop-grid) {
  width: 100%; max-width: 760px; margin: 0 auto; padding: 22px 26px 24px; border-radius: 14px;
  background: linear-gradient(160deg, var(--surface) 0%, color-mix(in srgb, var(--navy, #16304F) 70%, var(--surface)) 100%);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.lp-interest .lp-pop-embed .lp-pop-grid.has-side { grid-template-columns: minmax(0, 1fr) 170px; gap: 22px; }
.lp-interest .lp-pop-embed .lp-pop-h { font-size: 1.3rem; }
.lp-interest .lp-pop-embed .lp-pop-note { font-size: .85rem; margin-bottom: 14px; }
.lp-interest .lp-pop-embed .lp-pop-field textarea { height: 64px; font-size: 14px; }
.lp-interest .lp-pop-embed .lp-pop-contact select, .lp-interest .lp-pop-embed .lp-pop-contact input { padding: 9px 10px; font-size: 14px; }
.lp-interest .lp-pop-embed .lp-pop-verify { height: 68px; }
.lp-interest .lp-pop-embed .lp-pop-actions .btn { font-size: 13px; }
.lp-interest .lp-pop-embed .lp-pop-side { min-height: 0; }
.lp-interest .lp-pop-embed .lp-pop-topics { gap: 8px; }
@media (prefers-reduced-motion: reduce) {
  .lp-interest .lp-section-h, .lp-interest .lp-interest-pills, .lp-interest .lp-interest-note, .lp-interest .lp-pop.lp-pop-embed { opacity: 1; transform: none; transition: none; }
  .lp-interest.is-in .lp-pop-embed .lp-pop-topics li { animation: none; }
}
/* ── Interesse bekunden (unverbindliches Formular, siehe routes/interest.js) ── */
.lp-interest { scroll-margin-top: 30px; }
.lp-interest { text-align: center; }
.lp-interest-note {
  font-size: .92rem; color: var(--text); max-width: 640px; margin: 0 auto 20px; line-height: 1.6;
}
.lp-interest-success {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; font-size: .95rem; color: var(--text); max-width: 640px; margin: 0 auto;
}
.lp-interest-error {
  background: rgba(231,76,60,.12); border: 1px solid rgba(231,76,60,.3); border-radius: var(--radius);
  padding: 14px 18px; font-size: .9rem; color: var(--danger); max-width: 640px; margin: 0 auto 14px;
}

/* Nav-Brand mit Logo-Mark + Login-Buttons (Prototyp) */
.nav-brand { display: inline-flex; align-items: center; gap: 10px; }
.nav-brand-mark { display: inline-flex; }
.nav-brand-text { font-family: var(--font-head); font-weight: 800; letter-spacing: .02em; font-size: 17px; color: var(--navy, var(--text)); }
/* Quickbuttons im Header: flache Pills statt Farbverlauf/Glanz-Sweep —
   ein klarer Anker (Navy, immer gleich) + zwei Prioritätsstufen in Gold
   (gefüllt = primäre Aktion, umrandet = sekundär) statt zwei optisch
   gleichwertiger Gold-Flächen. */
.nav-login-consultant {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px !important; border-radius: 999px;
  background: #10243F !important; color: #fff !important; border: 1px solid #10243F !important;
  transition: transform .18s cubic-bezier(.25,.1,.25,1), filter .18s;
}
.nav-login-consultant:hover { filter: brightness(1.15); transform: translateY(-1px); }
[data-theme="dark"] .nav-login-consultant { background: #10243F !important; color: #fff !important; border-color: #10243F !important; }
.nav-login-member {
  padding: 8px 18px !important; border-radius: 999px;
  background: transparent !important; color: var(--accent-ink) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent) !important; font-weight: 600;
  transition: transform .18s cubic-bezier(.25,.1,.25,1), border-color .18s, background .18s;
}
.nav-login-member:hover { background: color-mix(in srgb, var(--accent) 12%, transparent) !important; border-color: var(--accent) !important; transform: translateY(-1px); }
[data-theme="dark"] .nav-login-member { color: var(--accent) !important; }
.nav-login-member::after, .nav-login-consultant::after { display: none !important; }

/* Auth-Gruppe rechts (Login-Paar ODER Dashboard-Button, plus Logout) --
   eigener no-wrap-Block, damit diese Buttons IMMER zusammenbleiben und nie
   unabhaengig von den Themen-Links (Start/Service/...) umbrechen, wenn ihre
   Anzahl sich aendert (1 Dashboard-Button statt 2 Login-Buttons). */
.nav-auth-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; }

/* Logout: reiner Icon-Kreis (kein Text) -- bewusst rot, damit sich "Sitzung
   beenden" klar von den blossen Navigationslinks abhebt. Sitzt links vom
   Theme-Button (siehe layout.pug: letztes Element vor .theme-toggle). */
.nav-logout-danger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0 !important; border-radius: 50%;
  background: var(--danger, #C0492F) !important; color: #fff !important;
  border: 1px solid var(--danger, #C0492F) !important; flex-shrink: 0;
  transition: transform .18s cubic-bezier(.25,.1,.25,1), filter .18s;
}
.nav-logout-danger:hover { filter: brightness(1.1); transform: translateY(-1px); }
.nav-logout-danger .i { width: 15px; height: 15px; }

/* Dashboard-Button (Admin mit aktiver Session auf der Landing): Navy-Flaeche,
   Gold-Rand, alle 3s ein durchlaufender Gold-Schimmer -- deutlich abgesetzt
   von den neutralen Themen-Links, ohne mit dem CTA-Gold-Button zu
   konkurrieren (der bleibt die einzige VOLL goldene Flaeche der Seite). */
.nav-dashboard-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px !important; border-radius: 999px;
  background: #10243F !important; color: #fff !important;
  border: 1.5px solid var(--accent) !important; font-weight: 700;
  transition: transform .18s cubic-bezier(.25,.1,.25,1);
}
.nav-dashboard-btn:hover { transform: translateY(-1px); }
.nav-dashboard-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--accent) 75%, transparent) 50%, transparent 60%);
  background-size: 220% 100%; background-position: 150% 0;
  animation: dash-shimmer 3s ease-in-out infinite;
}
@keyframes dash-shimmer {
  0%, 40% { background-position: 150% 0; }
  70%, 100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dashboard-btn::after { animation: none; display: none; }
}

/* Footer editorial inner */
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 22px 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px;
}
.footer-claim { font-style: italic; color: var(--accent-soft); }

/* ── Landing Hero mit Foto-Hintergrund (IT Jones) ──
   Bild ist auf den Hero-Block begrenzt (nicht mehr seitenweit fixiert) — beim
   Scrollen wandert es mit dem Hero aus dem Bild, die Ebenen bewegen sich dabei
   unterschiedlich schnell (rein vertikaler Tiefeneffekt, kein horizontaler
   Versatz). Der Hero bleibt bewusst INNERHALB von main.lp/.main im normalen
   Scrollfluss (ein direktes Body-Geschwister hätte mit .main um die feste
   100vh-Flex-Höhe konkurriert und dessen internen Scrollbereich auf einen
   Streifen zusammengequetscht — Bug, per Live-Test in Chrome gefunden).
   Volle Seitenbreite kommt stattdessen über die .full-bleed-Utility (JS-
   gemessen, siehe .lp-products-band). Text bleibt über .lp-hero-inner auf
   Lesebreite zentriert. */
.lp-hero {
  position: relative;
  min-height: 620px;
  display: flex; align-items: center;
  overflow: hidden;
  padding: 0;
}
.lp-bgfx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
/* Ebenen füllen den Hero-Block; der Tiefen-Versatz kommt weiterhin über die
   CSS-Variablen --lp-ly1/--lp-ly2/--lp-bg-scale (JS: Scroll-Fortschritt + Maus). */
.lp-layer {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: transparent;
  transform-origin: center top;
  will-change: transform;
  backface-visibility: hidden;
}
/* Layer 3 = opake Basis (Küste, hero.png). Füllt den hohen Bereich mit ZWEI vertikalen
   Hälften: oben normal, unten vertikal gespiegelt (nahtlose Reflexion am Mittelsteg). */
.lp-hero-bg.lp-layer-3 {
  z-index: 1;
  background-image: none;
  background-color: var(--bg);
  filter: blur(3px) saturate(1.05);
  transform: scale(var(--lp-bg-scale, 1.06));
}
.lp-hero-bg.lp-layer-3::before,
.lp-hero-bg.lp-layer-3::after {
  content: ''; position: absolute; left: 0; right: 0; height: 50%;
  background-image: url('/img/hero.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-color: var(--bg);
}
.lp-hero-bg.lp-layer-3::before { top: 0; }
/* untere Hälfte vertikal gekippt → Spiegelung */
.lp-hero-bg.lp-layer-3::after  { bottom: 0; transform: scaleY(-1); }
/* Layer 2 = Terrasse (PNG mit Transparenz), mittlere Tiefe */
.lp-layer-2 {
  z-index: 2;
  background-image: url('/img/parallax-2.png');
  filter: saturate(1.04);
  transform: scale(1.12) translateY(var(--lp-ly2, 0px));
}
/* Layer 1 = Vordergrund (Beratung am Laptop, PNG mit Transparenz), bewegt sich am stärksten */
.lp-layer-1 {
  z-index: 3;
  background-image: url('/img/parallax-1.png');
  background-position: center bottom;
  transform: scale(1.14) translateY(var(--lp-ly1, 0px));
}
@media (prefers-reduced-motion: reduce) {
  .lp-layer { transform: none !important; }
}
/* Unten blendet der Hero in ein festes Navy (#10243F, nicht var(--navy) —
   die flippt im Dunkelmodus auf helles Ink) über, als nahtloser Übergang in
   die Produkte-Übergangszone direkt darunter (.lp-products-band). */
.lp-hero-overlay {
  position: absolute; inset: 0; z-index: 4;
  background:
    linear-gradient(0deg, #10243F 0%, transparent 26%),
    linear-gradient(90deg, var(--bg) 4%, color-mix(in srgb, var(--bg) 70%, transparent) 32%, transparent 60%),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 60%, transparent) 0%, transparent 46%);
}
[data-theme="dark"] .lp-hero-overlay {
  background:
    linear-gradient(0deg, #10243F 0%, transparent 26%),
    linear-gradient(90deg, var(--bg) 4%, color-mix(in srgb, var(--bg) 72%, transparent) 34%, transparent 64%),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 64%, transparent) 0%, transparent 48%);
}
.lp-hero-inner {
  position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 64px 40px 80px;
  display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap;
}
.lp-hero-text { max-width: 560px; }
@media (max-width: 920px) {
  .lp-hero { min-height: 460px; }
  .lp-hero-overlay {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent), var(--bg) 78%),
               linear-gradient(90deg, color-mix(in srgb, var(--bg) 70%, transparent), transparent 80%);
  }
  .lp-hero-inner { padding: 40px 22px; flex-direction: column; align-items: flex-start; }
}

/* ── Landing: Ablauf + öffentliche FAQ ── */
.lp-ablauf { margin-top: 96px; }
/* Ablauf: Schritte werden beim Scrollen nacheinander aktiv, die Leiste darunter fuellt sich mit --tl */
.lp-tl { position: relative; height: 2px; background: var(--border); border-radius: 2px; margin: 0 0 -1px; }
.lp-tl::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--tl, 0) * 100%); background: var(--accent); border-radius: 2px; }
.lp-step { opacity: .4; transform: translateY(8px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.lp-step.is-on { opacity: 1; transform: none; }
.lp-step.is-on .lp-step-num { color: transparent; -webkit-text-stroke: 1px var(--accent); }
.lp-step-num { transition: color .6s ease, -webkit-text-stroke-color .6s ease; }
@media (prefers-reduced-motion: reduce) { .lp-step { opacity: 1; transform: none; transition: none; } }
.lp-section-h { font-family: var(--font-head); font-size: 1.6rem; color: var(--navy, var(--text)); margin-bottom: 22px; }

/* ── Apple-artiger Reveal beim Scrollen: dezent, GPU-freundlich (transform/opacity) ── */
.lp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.25,.1,.25,1), transform .6s cubic-bezier(.25,.1,.25,1); }
.lp-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .lp-reveal { opacity: 1; transform: none; transition: none; }
}
/* Eine verbundene Leiste statt vier Einzelboxen */
.lp-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--surface); border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
}
.lp-step {
  display: block; padding: 26px 24px;
  border-right: 1px solid var(--border);
}
.lp-step:last-child { border-right: none; }
@media (max-width: 820px) {
  .lp-step { border-right: none; border-bottom: 1px solid var(--border); }
  .lp-step:last-child { border-bottom: none; }
}
/* Große Umriss-Ziffern (Mockup-Stil): gefüllt mit --surface-2, nur die Kontur
   sichtbar via -webkit-text-stroke — echte Reihenfolge einer Prozedur, daher
   als Zahl gerechtfertigt (kein dekoratives 01/02/03). */
.lp-step-num {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 2.6rem;
  line-height: 1; color: var(--surface-2); -webkit-text-stroke: 1px var(--border-strong);
  font-variant-numeric: tabular-nums; margin-bottom: 14px;
}
.lp-step strong { display: block; font-size: .98rem; color: var(--navy, var(--text)); margin-bottom: 3px; }
.lp-step .muted { font-size: .86rem; }

.lp-faq-ask {
  background: var(--surface-3); border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
}
.lp-faq-ask > label { display: block; font-weight: 600; margin-bottom: 10px; color: var(--navy, var(--text)); }
.lp-faq-ask-row { display: flex; gap: 10px; }
.lp-faq-ask-row input { flex: 1; padding: 12px 14px; font-size: 15px; }
.lp-faq-results { margin-top: 14px; }
.lp-faq-results-head { font-weight: 600; margin-bottom: 8px; color: var(--accent); }
.lp-faq-noresult { padding: 14px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border); font-size: .92rem; }

/* Scroll-View: maximal ~6 FAQs gleichzeitig sichtbar (≈ 6 × 50px + Lücken), Rest per Scroll */
.lp-faq-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 356px; overflow-y: auto; padding-right: 4px; scroll-behavior: smooth;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
  scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
}
.lp-faq-list::-webkit-scrollbar { width: 8px; }
.lp-faq-list::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; }
.lp-faq-list::-webkit-scrollbar-thumb:hover { background: var(--accent-ink); }
.lp-faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; flex-shrink: 0;
}
.lp-faq-item > summary {
  cursor: pointer; padding: 14px 18px; font-weight: 600;
  font-size: 1rem; color: var(--navy, var(--text));
  list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.lp-faq-item > summary::-webkit-details-marker { display: none; }
.lp-faq-item > summary::after { content: '+'; color: var(--accent); font-size: 1.3rem; font-weight: 400; }
.lp-faq-item[open] > summary::after { content: '−'; }
.lp-faq-answer { padding: 0 18px 16px; font-size: .95rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
@media (max-width: 600px) { .lp-faq-ask-row { flex-direction: column; } }

/* ── Offene Fragen im FAQ-Scroll-View: blasser/neutraler abgegrenzt ────────── */
.lp-faq-item-open {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px dashed color-mix(in srgb, var(--border) 130%, transparent);
  opacity: .82;
}
.lp-faq-open-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.lp-faq-open-badge {
  flex-shrink: 0; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 999px; padding: 3px 9px;
}
.lp-faq-open-q { flex: 1; font-size: .92rem; color: var(--text-muted); font-style: italic; }
.lp-faq-vote {
  flex-shrink: 0; display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  padding: 5px 10px; cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--text-muted);
  transition: border-color .15s, color .15s, transform .15s;
}
.lp-faq-vote:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.lp-faq-vote:disabled { cursor: default; opacity: .7; transform: none; }
.lp-faq-vote-icon { display: inline-flex; width: 11px; height: 11px; }
.lp-faq-vote-icon svg { width: 100%; height: 100%; }
.lp-faq-vote-done { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) {
  .lp-faq-open-row { flex-wrap: wrap; }
  .lp-faq-open-q { flex-basis: 100%; order: 3; }
}

/* ── Landing: 3-Produkt-Layout + Featured + Trust-Bar ── */
.lp-products-3 {
  grid-template-columns: 1fr 1.08fr 1fr;
  align-items: center;
}
.lp-product-featured {
  transform: scale(1.04);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.lp-product-featured:hover { transform: scale(1.04) translateY(-4px); }
.lp-product-ribbon {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #10243F;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 18px; border-radius: 0 0 10px 10px;
}
.lp-product-featured { padding-top: 38px; }

@media (max-width: 920px) {
  .lp-products-3 { grid-template-columns: 1fr; }
  .lp-product-featured { transform: none; order: -1; }
  .lp-product-featured:hover { transform: translateY(-4px); }
}

/* Anrechnungs-Box mit Titel */
.lp-anrechnung div strong { display: block; font-family: var(--font-head); font-size: 1.1rem; color: var(--navy, var(--text)); margin-bottom: 4px; }

/* Themen-Chips: dezentes Icon */
.lp-chip::before {
  content: '◆'; color: var(--accent); font-size: .7em; margin-right: 2px;
}

/* ── Bewertungen + Werte: jetzt IM Hero (rechter Rand, normaler Fluss) ──
   Einheitliche, clean-hochwertige Optik: KEIN Farbverlauf, ruhiges dunkles
   Milchglas mit dezentem Rand — liest sich auf dem Hero-Foto in Hell UND
   Dunkel gleich gut, da bewusst nicht themeabhängig (immer dunkles Glas). */
.lp-hero-side {
  display: flex; flex-direction: column; gap: 16px;
  flex: 0 0 auto; max-width: 360px;
}
.lp-hero-ratings, .lp-hero-values {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
}
@media (max-width: 920px) {
  .lp-hero-side { max-width: none; }
  .lp-hero-ratings, .lp-hero-values { justify-content: flex-start; }
}
.lp-value-pill {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; width: 104px; padding: 11px 9px; box-sizing: border-box;
  border-radius: 16px;
  background: rgba(14, 28, 48, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 8px 22px rgba(8, 18, 32, .38);
  color: #fff;
  pointer-events: auto; text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
}
.lp-value-pill:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 12px 28px rgba(8, 18, 32, .48);
}
.lp-value-icon {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--accent);
  background: rgba(255, 255, 255, .04);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), background .2s;
}
.lp-value-icon svg { width: 16px; height: 16px; }
.lp-value-pill:hover .lp-value-icon { transform: scale(1.1); background: rgba(255, 255, 255, .08); }
.lp-value-text { user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.lp-value-text strong { display: block; color: #fff; font-size: .72rem; line-height: 1.18; margin-bottom: 1px; }
.lp-value-text span  { display: block; color: rgba(255, 255, 255, .82); font-size: .62rem; line-height: 1.2; }

.lp-rating-pill { width: 104px; cursor: pointer; }
/* Marken-Chip: schlicht, nur ein feiner Rand — die Markenfarbe steckt im Logo/Icon */
.lp-rating-pill-brand {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: rgba(255, 255, 255, .92);
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
}
.lp-rating-pill-brand svg { flex-shrink: 0; background: #fff; border-radius: 50%; padding: 1px; }
.lp-rating-pill-stars { display: block; color: var(--accent); font-size: .66rem; letter-spacing: 1px; }
.lp-rating-pill .lp-value-text strong { font-size: .82rem; }
/* dezente markenfarbige Akzentkante oben statt Vollflächen-Gradient */
.lp-rating-pill-google      { border-top: 2px solid #4285F4; }
.lp-value-pill-trustpilot   { border-top: 2px solid #00b67a; }
.lp-rating-pill-internal    { border-top: 2px solid var(--accent); }

/* Produkt-Texte: leichter 1px-Schatten für bessere Lesbarkeit */
.lp-product-navy .lp-product-title,
.lp-product-navy .lp-product-subtitle,
.lp-product-navy .lp-price,
.lp-product-navy .lp-checklist li {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}
.lp-product-gold .lp-product-title,
.lp-product-gold .lp-price {
  text-shadow: 0 1px 2px rgba(255, 255, 255, .18);
}

/* ════════════════════════════════════════════════════════════════════════════
   Nav-Rail — schlanke Leiste statt breiter Sidebar (ersetzt vormals 252px-
   Sidebar-Layout-FIX). #sidebar-ID bleibt erhalten (mobiles Hamburger-Menü in
   app.js haengt daran), Klassen .side-item/.side-section bleiben unveraendert
   wiederverwendet -- nur der aeussere Rahmen ist neu.

   Die 52px-Leiste traegt oben 4 Icon-Buttons (Profil, Theme, Auf-/Zuklappen,
   Einstellungen) und darunter 3 Reiter (Admin/Berater/Kunde), die sich den
   Restplatz zu GLEICHEN Teilen teilen. Das Flyout daneben zeigt die Eintraege
   des gewaehlten Reiters als ECHTE Grid-Spalte (nicht als Overlay) -- schiebt
   main.content beim Auf-/Zuklappen zur Seite, ueberdeckt es nie. Start-
   Zustand ist ausgeklappt; .is-rail-collapsed auf #appShell blendet die
   Spalte animiert aus (per JS-Klasse, siehe layout.pug-Skript unten im Body).
   ════════════════════════════════════════════════════════════════════════════ */
/* Bewusst Flexbox statt CSS-Grid fuer die Auf-/Zuklapp-Animation: Grid-Spalten
   mit gemischten px/fr-Spuren lassen sich in Chromium nicht zuverlaessig per
   transition animieren (die Spalte blieb beim Test auf dem Startwert haengen,
   unabhaengig vom Zielwert -- reproduzierbar nachgemessen). width-Transition
   auf einem Flex-Kind ist das bewaehrte, bereits im alten Sidebar-Collapse
   dieses Projekts genutzte Muster und animiert zuverlaessig. */
:root { --rail-width: 52px; --flyout-width: 272px; }
.app-shell {
  display: flex;
  position: relative;
}
.app-main { flex: 1 1 auto; min-width: 0; }

.sidebar {
  flex: 0 0 var(--rail-width);
  width: var(--rail-width);
  height: calc(100vh - var(--statusbar-h));
  display: flex; flex-direction: column; align-items: center;
  overflow: visible;
  padding: 10px 0;
  gap: 10px;
}

.rail-top { display: flex; flex-direction: column; gap: 8px; align-items: center; flex-shrink: 0; }
.rail-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: var(--sidebar-text); overflow: hidden; flex-shrink: 0;
  cursor: pointer; font: inherit; padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.rail-icon-btn:hover { background: var(--accent); color: #10243F; border-color: transparent; }
.rail-icon-btn .i { width: 17px; height: 17px; }
.rail-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rail-avatar-mark { width: 18px; height: auto; }
/* Auf-/Zuklapp-Icon zeigt per Drehung die Richtung an (offen = zeigt nach
   links/"einklappen", zu = zeigt nach rechts/"ausklappen") -- dieselbe
   Idee wie beim vormaligen ‹/›-Sidebar-Collapse-Knopf. */
.rail-collapse-toggle .i { transition: transform .25s ease; }
.app-shell.is-rail-collapsed .rail-collapse-toggle .i { transform: rotate(180deg); }

/* Reiter: teilen sich den kompletten Restplatz der Leiste zu gleichen Teilen
   (flex:1 je Reiter, keine Groesse nach Inhalt). Text exakt mittig -- sowohl
   die Leiste (align-items:center) als auch der Reiter selbst (flex mit
   center/center) zentrieren, damit weder Ober- noch Unterlaenge des Textes
   ihn optisch verschieben. writing-mode statt CSS-Rotation, damit der Text
   bei jeder Zeilenlaenge sauber im Fluss bleibt. */
.rail-tabs { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; width: 100%; align-items: stretch; }
.rail-tab {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  flex: 1 1 0;
  min-height: 0;
  border: 0; border-radius: 8px;
  background: none; color: var(--sidebar-text);
  cursor: pointer; letter-spacing: .06em; font-weight: 700; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s;
}
.rail-tab:hover { background: rgba(255,255,255,.06); color: #fff; }
.rail-tab.is-open { background: var(--accent); color: #10243F; }
.rail-tab-label { text-transform: uppercase; }

/* Flyout: Flex-Kind, Breite ausschliesslich ueber flex-basis animiert (nicht
   zusaetzlich ueber width -- beide gleichzeitig zu transitionieren ist
   redundant, da flex-shrink/-grow bereits 0 sind und flex-basis allein die
   sichtbare Breite bestimmt). Schiebt main.content zur Seite statt es zu
   ueberdecken. overflow:hidden clippt waehrend der Animation; das Panel
   behaelt seine feste Breite, damit der Zeilenumbruch der Nav-Labels stabil
   bleibt (nur die Sichtbarkeit wird beschnitten). */
.rail-flyout {
  flex: 0 0 var(--flyout-width);
  position: relative;
  height: 100%;
  overflow: hidden;
  transition: flex-basis .3s cubic-bezier(.4,0,.2,1);
}
.app-shell.is-rail-collapsed .rail-flyout { flex-basis: 0; }
.rail-flyout-panel {
  position: absolute; inset: 0;
  width: var(--flyout-width);
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(255,255,255,.08);
}
.rail-flyout-panel[hidden] { display: none; }

.side-nav {
  height: 100%; overflow-y: auto; overflow-x: hidden;
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 1px;
  scrollbar-width: thin;
}
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

/* engere Abstände → mehr passt rein */
.side-section { padding: 10px 10px 3px; font-size: 9px; }
.side-item { padding: 7px 10px; gap: 11px; font-size: 13.5px; border-radius: 8px; }
.side-icon { width: 20px; font-size: 14px; }

@media (max-width: 900px) {
  :root { --flyout-width: min(272px, calc(100vw - 52px)); }
}

/* Landing-Produkte: flexible Anzahl */
.lp-products { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lp-products-3 { grid-template-columns: 1fr 1.08fr 1fr; }
@media (max-width: 920px) { .lp-products, .lp-products-3 { grid-template-columns: 1fr; } }

/* Produkt-Admin-Manager */
.product-admin-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.product-admin-head h3 { margin: 0; }
.product-admin-meta { display: flex; align-items: center; }
.product-admin-order { margin-left: auto; display: flex; gap: 4px; }
.product-admin-order .btn { padding: 4px 9px; }

/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM PRICING CARDS — Apple/Linear/Tesla-Stil (ruhig, hochwertig)
   ════════════════════════════════════════════════════════════════════════════ */
/* ── Premium Pricing Cards (zentriertes Layout, Badge über Karte) ── */
.lp-products-premium {
  perspective: 1400px;
  align-items: end;
  gap: 20px;
  scroll-margin-top: 30px;
}

/* Wrapper: badge schwebend oben, Karte darunter */
.lp-product-wrap {
  display: flex; flex-direction: column; align-items: center;
}
/* Ein einziger authored Ladewerk-Moment für die Produktkarten (nicht überall
   wiederholt): kurzer, gestaffelter Eintritt beim Rendern der Seite,
   exponentielles Ease-out, respektiert reduzierte Bewegung. */
.lp-enter {
  opacity: 0; transform: translateY(14px);
  animation: lp-rise-in .6s cubic-bezier(.16,.84,.28,1) forwards;
}
@keyframes lp-rise-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .lp-enter { animation: none; opacity: 1; transform: none; }
}
.lp-product-badge-top {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 14px; border-radius: 999px; margin-bottom: -14px;
  background: linear-gradient(135deg, #e7c982, #c8a15b);
  color: #2a1f08; font-size: .61rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(168,130,63,.45);
  position: relative; z-index: 4;
}

/* Karte selbst — 15% kleiner als vorher */
.lp-products-premium .lp-product {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  border-radius: 3px; padding: 27px 20px 24px; overflow: hidden;
  transform-style: preserve-3d; will-change: transform; transform: translateZ(0);
  transition: transform 250ms cubic-bezier(.2,.7,.3,1), box-shadow 250ms cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 6px 24px rgba(16,36,63,.10);
  border: 1px solid var(--border); outline: none;
}

/* Alle gleich hoch → Buttons fluchten exakt */
.lp-products-premium .lp-product-light { min-height: 442px; }
.lp-products-premium .lp-product-navy  { min-height: 442px; }
.lp-products-premium .lp-product-gold  { min-height: 442px; box-shadow: 0 16px 52px rgba(180,140,50,.32); }

/* Hintergründe */
.lp-product-light { background: var(--surface); }
.lp-product-navy  { background: linear-gradient(170deg, #16304F 0%, #10243F 100%); border-color: transparent; }
.lp-product-gold  { background: linear-gradient(165deg, #E7C988 0%, #C8A45C 55%, #B98C46 100%); border-color: transparent; }

/* Icon — absolut positioniert (Position/Größe/Opacity kommen als Inline-Style aus Admin) */
.lp-product-icon {
  position: absolute; z-index: 1;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  border: 1px solid currentColor;
  flex-shrink: 0; pointer-events: none;
}
.lp-product-icon svg { width: 55%; height: 55%; }
.lp-product-icon--img { border: none; overflow: hidden; background: transparent; }
.lp-product-icon--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Theme-korrekte Icon-Anzeige, individuell je Nutzer: zeigt genau EIN PNG,
   passend zu data-theme des jeweils Betrachtenden (nicht zentral erzwungen —
   jeder Nutzer hat sein eigenes localStorage-Theme). Beide <img> sind im DOM,
   CSS blendet die unpassende Variante aus. */
html:not([data-theme="dark"]) .icon-t-dark { display: none !important; }
html[data-theme="dark"] .icon-t-light { display: none !important; }
.product-icon-row { display: flex; align-items: center; padding: 8px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.product-icon-placeholder { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text-muted); }

/* Titel */
.lp-product-title { font-family: var(--font-head); font-size: 1.32rem; margin-bottom: 5px; }

/* Farbiger Untertitel */
.lp-product-subtitle { font-size: .77rem; font-weight: 600; margin-bottom: 8px; letter-spacing: .01em; }

/* Beschreibungsabsatz */
.lp-product-desc { font-size: .75rem; line-height: 1.55; margin-bottom: 16px; max-width: 88%; }

/* Preis */
.lp-product-price { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 15px; }
.lp-price { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; line-height: 1; }
.lp-price-note { font-size: .72rem; }

/* CTA-Button */
.lp-product-cta { margin-top: 0; margin-bottom: 0; align-self: stretch; justify-content: center; padding: 10px 15px; font-size: .85rem; }

/* Feature-Liste */
.lp-checklist { list-style: none; padding: 0; margin: 16px 0 0; text-align: left; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.lp-checklist li { position: relative; padding-left: 22px; font-size: .77rem; line-height: 1.42; }
.lp-checklist li::before { content: '✓'; position: absolute; left: 0; top: 0; font-weight: 700; }

/* Spacer dehnt sich aus → Preis+Button immer auf gleicher Höhe */
.lp-product-spacer { flex: 1; min-height: 8px; }

/* Fußzeile — Nachsatz in Navy (auf Navy-Karten hell, sonst unlesbar) */
.lp-product-footer {
  margin-top: auto; padding-top: 18px;
  font-size: .76rem; opacity: .85; letter-spacing: .02em;
}

/* ── Farben je Stil ── */
.lp-product-light .lp-product-title  { color: var(--navy, var(--text)); }
.lp-product-light .lp-product-subtitle { color: var(--accent-ink); }
.lp-product-light .lp-product-desc   { color: var(--text); opacity: .78; }
.lp-product-light .lp-price          { color: var(--navy, var(--text)); }
.lp-product-light .lp-price-note     { color: var(--text-muted); }
.lp-product-light .lp-product-icon   { color: var(--accent-ink); }
.lp-product-light .lp-checklist li   { color: var(--text); }
.lp-product-light .lp-checklist li::before { color: var(--accent-ink); }
.lp-product-light .lp-product-footer { color: var(--navy, #10243F); }

.lp-product-navy .lp-product-title   { color: #fff; }
.lp-product-navy .lp-product-subtitle { color: var(--accent-soft); }
.lp-product-navy .lp-product-desc    { color: rgba(255,255,255,.7); }
.lp-product-navy .lp-price           { color: #fff; }
.lp-product-navy .lp-price-note      { color: rgba(255,255,255,.6); }
.lp-product-navy .lp-product-icon    { color: var(--accent-soft); }
.lp-product-navy .lp-checklist li    { color: rgba(255,255,255,.88); }
.lp-product-navy .lp-checklist li::before { color: var(--accent-soft); }
.lp-product-navy .lp-product-footer  { color: rgba(255,255,255,.5); }

.lp-product-gold .lp-product-title   { color: #10243F; }
.lp-product-gold .lp-product-subtitle { color: rgba(16,36,63,.75); font-style: italic; }
.lp-product-gold .lp-product-desc    { color: rgba(16,36,63,.72); }
.lp-product-gold .lp-price           { color: #10243F; }
.lp-product-gold .lp-price-note      { color: rgba(16,36,63,.6); }
.lp-product-gold .lp-product-icon    { color: #10243F; border-color: rgba(16,36,63,.35); }
.lp-product-gold .lp-checklist li    { color: #1a2c40; }
.lp-product-gold .lp-checklist li::before { color: #10243F; }
.lp-product-gold .lp-product-footer  { color: #10243F; }

/* ── CTA-Button je Stil ── */
.lp-product-light .lp-product-cta { background: transparent; color: var(--navy, var(--text)); border: 1.5px solid var(--border-strong); }
.lp-product-light .lp-product-cta:hover { border-color: var(--accent); color: var(--accent); }
.lp-product-navy  .lp-product-cta { background: linear-gradient(135deg,#e7c982,#c8a15b); color: #2a1f08; border-color: transparent; font-weight: 700; }
.lp-product-navy  .lp-product-cta:hover { filter: brightness(1.06); }
.lp-product-gold  .lp-product-cta { background: #10243F; color: #fff; border-color: #10243F; }
.lp-product-gold  .lp-product-cta:hover { background: #1B3A5E; }

/* ── Hover (dezenter Lift, kein Scale/Tilt) ── */
.lp-products-premium .lp-product:hover,
.lp-products-premium .lp-product:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(16,36,63,.14);
}
.lp-product-gold:hover { box-shadow: 0 16px 40px rgba(180,140,50,.28) !important; }

/* Focus */
.lp-products-premium .lp-product:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Shimmer (Gold-Karte) ── */
.lp-product-glow { display: none; }
.lp-product-gold .lp-product-glow {
  display: block; position: absolute; inset: -40%;
  z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%);
  transform: translate(55%, 55%);
}
.lp-product-gold:hover .lp-product-glow { animation: lp-shine 1400ms cubic-bezier(.22,.61,.31,1) 1; }
@keyframes lp-shine {
  0%   { transform: translate(55%, 55%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(-55%, -55%); opacity: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lp-products-premium .lp-product { transition: box-shadow 200ms ease; }
  .lp-products-premium .lp-product:hover { transform: none; }
  .lp-product-gold:hover .lp-product-glow { animation: none; }
}

@media (max-width: 920px) {
  .lp-products-premium { perspective: none; align-items: stretch; }
  .lp-product-wrap { width: 100%; }
  .lp-products-premium .lp-product-light,
  .lp-products-premium .lp-product-navy,
  .lp-products-premium .lp-product-gold { min-height: 0; }
}

/* Klickbare Tabellenzeilen */
.row-clickable { cursor: pointer; transition: background .12s; }
.row-clickable:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.row-clickable:hover strong { color: var(--accent); }

/* ── Custom-Dialog (itbConfirm) ── */
.itb-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(16,36,63,.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s ease; padding: 20px;
}
/* WICHTIG: display:flex überschreibt sonst das [hidden]-Attribut → ein
   unsichtbares Overlay (z-index 9999) läge dauerhaft über der Seite und
   würde alle Klicks abfangen. Explizit ausblenden, solange hidden gesetzt ist. */
.itb-modal-overlay[hidden] { display: none !important; }
.itb-modal-overlay.show { opacity: 1; }
.itb-modal {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  max-width: 460px; width: 100%; padding: 22px 24px;
  transform: translateY(8px) scale(.98); transition: transform .2s cubic-bezier(.16,.84,.28,1);
}
.itb-modal-overlay.show .itb-modal { transform: none; }
.itb-modal-title { font-family: var(--font-head); font-size: 1.2rem; margin: 0 0 10px; color: var(--navy, var(--text)); }
.itb-modal-body { font-size: .95rem; line-height: 1.55; color: var(--text); margin-bottom: 18px; }
.itb-modal-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ── Floating Save-Button ── */
.fab-save {
  position: fixed; right: 26px; bottom: calc(var(--statusbar-h) + 20px); z-index: 900;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #10243F; border: none;
  box-shadow: 0 8px 24px rgba(200,161,91,.45);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .2s cubic-bezier(.16,.84,.28,1), box-shadow .2s, background .2s, opacity .2s;
}
.fab-save:hover { transform: translateY(-3px) scale(1.05); background: var(--accent-soft); }
.fab-save:active { transform: scale(.96); }
.fab-save svg { width: 26px; height: 26px; }
/* Dirty-Indikator (Punkt) */
.fab-save.is-dirty::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--danger, #C0492F); border: 2px solid var(--surface);
}
.fab-save.is-clean { opacity: .4; background: var(--surface-3); color: var(--text-soft); box-shadow: 0 4px 12px rgba(16,36,63,.12); }
.fab-save.is-dirty { opacity: 1; background: var(--accent); color: #10243F; box-shadow: 0 8px 24px rgba(200,161,91,.55); }
.fab-save.saving { pointer-events: none; opacity: .7; }
/* Tooltip-Label */
.fab-save-label {
  position: fixed; right: 92px; bottom: calc(var(--statusbar-h) + 36px); z-index: 900;
  background: var(--navy); color: #fff; padding: 6px 12px; border-radius: 8px;
  font-size: 12px; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(6px); transition: opacity .15s, transform .15s;
}
.fab-save:hover + .fab-save-label, .fab-save-label.show { opacity: 1; transform: none; }

/* ── Toggle-Switches (label.check → iOS-Style mit Ja/Nein) ── */
label.check { gap: 10px; }
label.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative; flex-shrink: 0;
  width: 40px; height: 22px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border-strong);
  cursor: pointer; transition: background .2s, border-color .2s;
  margin: 0;
}
label.check input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-soft); transition: transform .2s, background .2s;
}
label.check input[type="checkbox"]:checked {
  background: var(--accent); border-color: var(--accent);
}
label.check input[type="checkbox"]:checked::after {
  transform: translateX(18px); background: #10243F;
}
label.check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Ja/Nein-Statusanzeige (von JS gesetzt) */
.check-state {
  font-weight: 700; font-size: 11px; letter-spacing: .04em;
  padding: 1px 8px; border-radius: 999px; margin-left: auto;
}
.check-state.on  { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.check-state.off { background: var(--surface-3); color: var(--text-soft); }

/* ═══ WP-1: Landing & Navigation (Footer-fix, Scroll-Shell, Schatten, Home, Tooltips) ═══ */

/* Gäste-Shell: Header fix oben, nur Content scrollt, Footer fix unten (halbhoch).
   Admin-Layout (body.has-sidebar) bleibt unberührt. */
body:not(.has-sidebar) {
  height: 100vh; min-height: 100vh;
  display: flex; flex-direction: column; overflow: hidden;
}
body:not(.has-sidebar) > .header { flex: 0 0 auto; position: relative; }
body:not(.has-sidebar) > .main {
  /* min-width:0 ist Pflicht: ohne das laesst Flexbox ein zu breites Kind
     (z.B. .full-bleed-Elemente wie .lp-hero/.lp-products-band) die Box
     selbst aufblaehen statt sie zu clippen -- overflow-x:hidden allein
     verhindert das NICHT, wenn min-width auf dem Default "auto" bleibt. */
  flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
/* .main ist normalerweise selbst auf max-width:1200px begrenzt (siehe .main-
   Basisregel) -- das ist auf der Landing enger als der Viewport und faengt
   die .full-bleed-Elemente (Hero/Produkte-Band) an DIESER schmaleren Kante ab
   statt am echten Viewport-Rand (overflow-x:hidden clippt an der eigenen Box,
   nicht am Fenster). Fix: .main selbst spannt hier die volle Breite auf, die
   Lesebreite kommt weiterhin von main.lp (eigenes max-width + padding). */
body:not(.has-sidebar) > .main:has(.lp-hero) {
  /* padding komplett aus -- main.lp bringt seinen eigenen Innenabstand
     (0 28px 48px) mit; addierten sich sonst zum doppelten Boden-Abstand
     vor dem Footer (26px von .main + 48px von .lp = 74px statt ~48px). */
  max-width: none; width: 100%; padding: 0;
}
/* Footer halbhoch + fix am unteren Rand des Viewports */
body:not(.has-sidebar) > .footer { flex: 0 0 auto; }
body:not(.has-sidebar) > .footer .footer-inner { padding: 10px 28px; font-size: 12px; }

/* Produktkarten: weicher Schlagschatten unten-rechts (30 % Schwarz) */
.lp-product { box-shadow: 16px 16px 38px -10px rgba(0, 0, 0, 0.30); }
.lp-product:hover { box-shadow: 22px 22px 48px -8px rgba(0, 0, 0, 0.32); }
[data-theme="dark"] .lp-product { box-shadow: 16px 16px 40px -8px rgba(0, 0, 0, 0.55); }

/* Home-Button neben dem Logo */
.nav-home {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border-strong); color: var(--navy, var(--text));
  background: var(--surface); text-decoration: none; flex: 0 0 auto;
  transition: background .18s, color .18s, transform .18s, border-color .18s;
}
.nav-home:hover { background: var(--accent); color: #10243F; border-color: var(--accent); transform: translateY(-1px); }
.nav-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Sidebar-Tooltips (Titel + Beschreibung), v.a. im eingeklappten Zustand ── */
.side-tip { display: none; }
/* alten data-tooltip-::after-Tooltip deaktivieren (wir nutzen jetzt .side-tip) */
.sidebar.is-collapsed .side-item::after { content: none !important; display: none !important; }
.sidebar.is-collapsed .side-item .side-tip {
  display: block; position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(-6px);
  min-width: 200px; max-width: 280px; padding: 10px 12px;
  background: var(--navy, #10243F); color: #fff;
  border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity .16s ease, transform .16s ease; white-space: normal;
}
.sidebar.is-collapsed .side-item .side-tip::before {
  content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-right-color: var(--navy, #10243F);
}
.sidebar.is-collapsed .side-item:hover .side-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
.side-tip-title { display: block; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.side-tip-desc { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: rgba(255, 255, 255, .75); }

/* ── KI-Themenvorschläge (temporäre Liste, 1 Spalte, 200px scrollbar) ── */
.ai-suggest-card .ai-suggest-status { font-size: 12px; color: var(--text-muted); min-height: 16px; margin: 4px 0 8px; }
.ai-suggest-box {
  height: 200px; overflow-y: auto; overflow-x: hidden;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.ai-suggest-box .ai-suggest-table { margin: 0; width: 100%; }
.ai-suggest-box .ai-suggest-table td {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
}
.ai-suggest-box .ai-suggest-table tr:last-child td { border-bottom: none; }
.ai-suggest-title { font-weight: 600; color: var(--navy, var(--text)); }
.ai-suggest-pick { flex: 0 0 auto; white-space: nowrap; }
.ai-suggest-empty td { color: var(--text-muted); justify-content: flex-start !important; }

/* ═══ Premium-Account & interaktiver Beratungsplan ═══ */
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .acc-grid { grid-template-columns: 1fr; } }

.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.acc-head-main { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.acc-kdnr { display: flex; flex-direction: column; }
.acc-kdnr-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.acc-kdnr-value { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--navy, var(--text)); line-height: 1; }
.acc-head-name { display: flex; flex-direction: column; }
.acc-name { font-size: 17px; font-weight: 700; color: var(--text); }
.acc-since { font-size: 12px; color: var(--text-muted); }

.acc-figures { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0; }
.acc-fig { display: flex; flex-direction: column; }
.acc-fig-label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.acc-fig-value { font-size: 17px; font-weight: 700; color: var(--navy, var(--text)); }
.acc-deadlines { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 10px; font-size: 13px; }
.acc-deadline { display: flex; flex-direction: column; }

.acc-plan-scroll { overflow-x: auto; }
.acc-plan-table td, .acc-plan-table th { white-space: nowrap; }
.acc-plan-table tr.acc-row-past td { color: var(--text-soft); opacity: .72; }
.acc-plan-table tr.acc-row-after td { opacity: .5; text-decoration: line-through; }
.acc-inline { display: inline; margin: 0 2px 0 0; }
.acc-plan-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; }

/* ── Privacy-Blur (nur Admin/Berater) ── */
.acc-shell .pii, .acc-plan .pii, .card .pii {
  transition: filter .18s ease;
}
.pii-blurred .pii {
  filter: blur(6px);
  user-select: none;
  -webkit-user-select: none;
}
.pii-toggle { white-space: nowrap; }
.pii-toggle .pii-eye-label { margin-left: 4px; }

/* ── Abbruch-Feedback-Mini-Dialog ── */
.acc-feedback-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(16,36,63,.45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.acc-feedback-overlay[hidden] { display: none; }
.acc-feedback-dialog {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 22px 24px; max-width: 440px; width: 100%;
}
.acc-feedback-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 6px 0;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.acc-feedback-opt:hover { border-color: var(--accent); background: var(--surface-2); }
.acc-feedback-question[hidden] { display: none; }

/* ═══ Landing: normaler Fluss (Hero-Bild ist auf .lp-hero begrenzt, kein
   seitenweites Fixed-Stacking mehr nötig) ═══ */
.lp { position: relative; z-index: 1; }

/* Landing zeigt eine SICHTBARE, dezent gestylte Scrollbar (visuelles Feedback,
   wo gescrollt werden kann — nicht mehr versteckt). */
body:not(.has-sidebar) > .main { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent; }
body:not(.has-sidebar) > .main::-webkit-scrollbar { width: 12px; height: 12px; }
body:not(.has-sidebar) > .main::-webkit-scrollbar-track { background: transparent; }
body:not(.has-sidebar) > .main::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 8px; border: 3px solid transparent; background-clip: content-box;
}
body:not(.has-sidebar) > .main::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 70%, transparent); background-clip: content-box; }

/* Header-CTA „Beratung starten": flache Gold-Pill statt Farbverlauf +
   Glanz-Sweep (veraltete Optik) — konsistent mit den übrigen Quickbuttons
   und dem globalen Pill-Button-System (.btn). */
.nav-links a.nav-cta-gold {
  padding: 9px 20px; border-radius: 999px;
  color: #10243F !important; font-weight: 700;
  background: var(--accent);
  transition: transform .18s cubic-bezier(.25,.1,.25,1), filter .18s;
}
.nav-links a.nav-cta-gold:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}


/* ═══════════════════════════════════════════════════════════════════════════
   PRODUKT-ADMIN — Premium Layout (prd-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Globale Icon-Einstellungen */
.prd-global-card { padding: 20px 24px; }
.prd-global-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.prd-global-icon { font-size: 2rem; opacity: .55; flex-shrink: 0; margin-top: 2px; }
.prd-global-title { font-family: var(--font-head); font-size: 1.15rem; margin: 0 0 3px; }
.prd-global-head .hint { margin: 0; font-size: .8rem; }
.prd-global-form { display: flex; flex-direction: column; gap: 14px; }
.prd-sliders { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .prd-sliders { grid-template-columns: 1fr; } }
.prd-slider-item label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.prd-slider-track { display: flex; align-items: center; gap: 10px; }
.prd-slider-track input[type="range"] { flex: 1; accent-color: var(--accent); }
.prd-slider-track span { font-size: .8rem; font-weight: 700; min-width: 38px; text-align: right; color: var(--text); }
.prd-global-save { align-self: flex-end; }

/* Produktgrid */
.prd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.prd-grid-item {
  border: 2px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  background: var(--surface);
}
.prd-grid-item:hover { border-color: var(--accent); box-shadow: 0 6px 24px rgba(16,36,63,.12); transform: translateY(-3px); }
.prd-grid-item.prd-selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); transform: translateY(-3px); }

/* Mini-Karte im Grid */
.prd-grid-mini {
  position: relative; height: 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; padding: 16px 12px 12px;
}
.prd-mini-ribbon {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg,#e7c982,#c8a15b); color: #2a1f08;
  font-size: .48rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; pointer-events: none;
}
.prd-mini-name  { font-size: .88rem; font-weight: 800; text-align: center; line-height: 1.3; margin-bottom: 6px; }
.prd-mini-price { font-size: 1.15rem; font-weight: 900; opacity: .9; }
.prd-mini-icon  { position: absolute; bottom: 6px; right: 8px; width: 28px; height: 28px; opacity: .25; object-fit: contain; }

.prd-grid-meta { padding: 10px 12px 4px; }
.prd-grid-name  { font-size: .82rem; font-weight: 700; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prd-grid-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.prd-grid-order { display: flex; gap: 4px; padding: 4px 12px 10px; }
.btn-xs { padding: 2px 8px; font-size: .72rem; height: 26px; }

/* Neu-Karte */
.prd-grid-new { border-style: dashed; }
.prd-grid-new-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; gap: 6px; opacity: .5; transition: opacity .15s; }
.prd-grid-new:hover .prd-grid-new-inner { opacity: 1; }
.prd-new-plus  { font-size: 2.4rem; font-weight: 300; line-height: 1; color: var(--accent); }
.prd-new-label { font-size: .82rem; font-weight: 600; }

/* Editor Panel — flach, 3px-Radius (konsistent zum Rest der App) */
.prd-editor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow, 0 4px 16px rgba(16,36,63,.10));
}
.prd-editor-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  /* Fester Navy-Band in BEIDEN Themes (--navy kippt im Dark-Mode zu hell) */
  background: #10243F;
  color: #E7E3DB;
}
.prd-editor-heading { font-size: 1.1rem; font-weight: 600; margin: 0; color: #E7E3DB; }
.prd-editor-close {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #E7E3DB; border-radius: 8px; padding: 6px 14px; font-size: .82rem;
  cursor: pointer; transition: background .15s;
}
.prd-editor-close:hover { background: rgba(255,255,255,.2); }

.prd-editor-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
}
@media (max-width: 900px) { .prd-editor-body { grid-template-columns: 1fr; } }

/* Vorschau-Spalte */
.prd-editor-preview {
  background: var(--surface-2, color-mix(in srgb, var(--surface) 80%, var(--border) 20%));
  border-right: 1px solid var(--border);
  padding: 20px 16px;
}
.prd-preview-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 14px; }
.prd-preview-scale { width: 100%; }
#live-preview { width: 100%; }

/* Formular-Spalte */
.prd-editor-form { padding: 20px 24px; }
.prd-editor-form .form-grid { gap: 14px; margin-bottom: 16px; }
.form-checks-row { display: flex; gap: 20px; flex-wrap: wrap; grid-column: 1 / -1; }

.prd-editor-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid var(--border); margin-top: 8px;
}
.prd-editor-footer-left { display: flex; gap: 10px; }
.prd-editor-footer-right {}

/* Aktuelles Symbol */
.prd-icon-section { border-top: 1px solid var(--border); padding: 14px 0 0; margin-top: 14px; }
.prd-icon-section-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); margin-bottom: 10px; }
.prd-icon-current { display: flex; align-items: center; gap: 12px; }
.prd-icon-preview-wrap img, .prd-icon-placeholder {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; border: 1px solid var(--border); color: var(--text-muted);
}

/* KI-Generator: immer ausgeklappte Sektion (kein details/summary mehr) */
.prd-ai-section { margin-bottom: 0; }
.prd-ai-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; font-weight: 600;
}
.prd-ai-for { font-size: .8rem; font-weight: 400; color: var(--text-muted); }
.prd-ai-for b { color: var(--text); font-weight: 700; margin-left: 4px; }
.prd-ai-hint { font-size: .78rem; font-weight: 400; color: var(--text-muted); flex-basis: 100%; }
.prd-ai-body { padding: 0 20px 20px; border-top: 1px solid var(--border); }

/* ── Produktauswahl (primäre Zeile) ── */
.prd-picker { padding: 16px 20px; }
.prd-picker-row { display: flex; gap: 10px; align-items: center; }
.prd-picker-new { white-space: nowrap; }
.prd-select {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px;
  border-radius: 3px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: .95rem;
}
.prd-move-row { display: flex; margin-top: 10px; align-items: center; gap: 8px; flex-wrap: wrap; }
.prd-move-label { font-size: .82rem; }
.prd-move-form { display: inline; margin: 0; }

/* ── Editor-Formular: Feinschliff Abstände ── */
.prd-lib-hint { margin: 0 0 8px; }
.prd-lib-sliders { margin-top: 12px; }

/* ── Raster-Fallback-Vorschau ── */
.prd-raster-actions { margin-top: 10px; }
.prd-raster-status { margin-left: 12px; font-size: .8rem; }
.prd-raster-preview { margin-top: 14px; }
.prd-raster-card { padding: 14px; background: var(--surface-2); }
.prd-raster-inner { display: flex; align-items: center; gap: 16px; }
.prd-raster-img {
  width: 70px; height: 70px; object-fit: contain; border-radius: 3px;
  background: color-mix(in srgb, var(--text) 8%, transparent); padding: 6px;
}
.prd-raster-label { font-size: .82rem; margin-bottom: 8px; }

/* ── Standard-Symbolwerte (eingeklapptes details, sekundär) ── */
.prd-defaults { padding: 0; }
.prd-defaults-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 14px 20px; cursor: pointer; font-weight: 600; list-style: none;
}
.prd-defaults-summary::-webkit-details-marker { display: none; }
.prd-defaults[open] .prd-defaults-summary { border-bottom: 1px solid var(--border); }
.prd-defaults-hint { font-size: .78rem; font-weight: 400; color: var(--text-muted); flex-basis: 100%; }
.prd-defaults .prd-global-form { padding: 16px 20px; }

/* Globale Icon-Einstellungen — Layout mit Vorschau-Spalte */
.prd-global-form-inner { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.prd-global-form-inner .prd-sliders { flex: 1; min-width: 260px; }
.prd-global-preview-col { width: 160px; flex-shrink: 0; }
.prd-preview-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 8px; }
.prd-global-icon-example { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }

/* ─── Landing Rating Widget ─── */
.lp-rating-widget {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 auto 18px; max-width: 340px;
  padding: 12px 16px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
}
.lp-rating-row {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: inherit;
}
.lp-rating-row:hover { color: var(--primary); }
/* ── Produkt-Symbol-Bibliothek (Picker im Editor) ── */
.prd-lib-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.prd-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.prd-lib-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface-2);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.prd-lib-item:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-2px); }
.prd-lib-item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.prd-lib-item img { width: 56px; height: 56px; object-fit: contain; }
.prd-lib-item small { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.2; word-break: break-word; }
.prd-lib-none { justify-content: center; min-height: 78px; color: var(--text-soft); }
.prd-lib-none span { font-size: 20px; }

.lp-rating-source { flex: 0 0 90px; font-weight: 600; font-size: 12px; color: var(--text-muted); }
.lp-rating-stars { letter-spacing: 1px; color: var(--gold, #c9a227); font-size: 14px; }
.lp-rating-score { font-weight: 700; font-size: 14px; }

/* ─── Premium-Einstellungen — volle Breite, ein fixer Save-Button ──────────── */
.settings-page {
  --set-gap: 16px;        /* Abstand zwischen Karten */
  --set-pad: 16px 18px;   /* Karten-Innenabstand */
  --set-row: 9px;         /* vertikaler Property-Zeilen-Abstand */
  display: flex; flex-direction: column;
  height: calc(100vh - var(--topbar-h, 60px) - 84px);
  min-height: 420px;
}

/* Hero-Kopf — premium Glas/Gradient, fix oben */
.settings-hero {
  flex: 0 0 auto;
  position: relative; overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(120% 180% at 100% 0%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 55%),
    var(--grad-brand);
  color: #fff;
  padding: 14px 22px;
  margin-bottom: var(--set-gap);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--primary) 70%, transparent);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.settings-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 40%);
  pointer-events: none;
}
.settings-hero-title { display: flex; align-items: center; gap: 12px; margin-right: auto; position: relative; z-index: 1; }
.settings-hero-title h2 {
  font-family: var(--font-head, serif);
  font-size: 1.35rem; font-weight: 700; color: #fff; margin: 0; letter-spacing: .01em;
}
.settings-hero-badge {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(140deg, var(--gold-soft), var(--gold));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--gold) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
}
.settings-hero-kpis { display: flex; flex-wrap: wrap; gap: 0; position: relative; z-index: 1; }
.settings-hero-kpi { display: flex; flex-direction: column; gap: 2px; padding: 0 22px; position: relative; }
.settings-hero-kpi + .settings-hero-kpi::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 64%; width: 1px; background: rgba(255,255,255,.16);
}
.settings-hero-kpi .v { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.settings-hero-kpi .l { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); font-weight: 700; }
.settings-hero-stars { color: var(--gold-soft); letter-spacing: 1px; font-size: 12px; }

/* Inhalt: volle Breite, Karten-Raster (Masonry-artig), interner Scroll */
.settings-content {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: var(--set-gap);
  align-content: start;
  overflow-y: auto;
  padding: 2px 8px 8px 2px;
}
.settings-content::-webkit-scrollbar { width: 10px; }
.settings-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: 8px; border: 3px solid transparent; background-clip: padding-box;
}
.settings-content::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary) 45%, transparent); background-clip: padding-box; }
.set-section--wide { grid-column: 1 / -1; }

/* Premium-Karten */
.settings-content .card {
  padding: var(--set-pad);
  margin-bottom: 0; align-self: start;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, color-mix(in srgb, var(--surface-2) 50%, var(--surface)), var(--surface));
  box-shadow: 0 2px 14px -10px rgba(16,36,63,.4);
  transition: border-color .2s, box-shadow .2s;
}
.settings-content .card:hover {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--primary) 60%, transparent);
}
.settings-content .card::after { opacity: .6; }

/* Sektions-Header */
.set-section-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 8%, var(--border));
}
.set-section-badge {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(140deg, color-mix(in srgb, var(--gold) 18%, var(--surface-2)), var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--border));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 25%, transparent), var(--shadow-sm);
}
.set-section-title {
  margin: 0; font-size: 1.05rem; color: var(--text); min-width: 0;
  font-family: var(--font-head, serif); font-weight: 700; letter-spacing: .01em;
}

/* (i)-Info-Button */
.set-info-btn {
  margin-left: auto; flex: 0 0 auto;
  width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head, Georgia, serif);
  font-size: 13px; font-style: italic; font-weight: 700; line-height: 1;
  color: var(--text-muted); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: color .15s, border-color .15s, background .15s, transform .12s;
}
.set-info-btn:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); transform: scale(1.08); }
.set-info-btn.is-open {
  color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--border));
  background: color-mix(in srgb, var(--gold) 12%, var(--surface-2));
}
.set-info {
  margin: 0 0 14px;
  padding: 10px 13px; border-radius: 10px;
  font-size: 12px; line-height: 1.5; color: var(--text-muted);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-2));
  border: 1px solid var(--border);
  border-left: 3px solid color-mix(in srgb, var(--gold) 60%, var(--border));
}
.set-info code { font-size: 11px; background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }

/* Rating-Display */
.rating-hero {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 16px;
  border-radius: 14px;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%),
    var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--border));
}
.rating-hero-score { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.rating-hero-score small { font-size: 1rem; color: var(--text-muted); font-weight: 600; }
.rating-hero-stars { font-size: 1.6rem; letter-spacing: 3px; color: var(--gold); }
.rating-hero-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Formularfelder */
.settings-content input,
.settings-content select,
.settings-content textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.settings-content input:focus,
.settings-content select:focus,
.settings-content textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  background: var(--surface);
}

/* Properties-Zeilen: Eigenschaft links · Steuerelement rechts */
.settings-content .form-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.settings-content .form-grid label,
.settings-content .form-grid label.form-full {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 24px; padding: 11px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.settings-content .form-grid label:last-child { border-bottom: 0; }
.settings-content .form-grid label span {
  flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--text);
  line-height: 1.4; text-transform: none;
}
.settings-content .form-grid label span.muted { font-weight: 500; color: var(--text-muted); }
.settings-content .form-grid input,
.settings-content .form-grid select,
.settings-content .form-grid textarea { flex: 0 0 auto; width: 260px; max-width: 50%; }
.settings-content .form-grid textarea { width: 320px; min-height: 56px; }

/* Mehrspaltige Property-Bereiche (breite Sektionen nutzen die Fläche) */
.form-grid--cols {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  column-gap: 36px; row-gap: 6px;
}
.set-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 36px; }
.set-col h4 { margin-top: 0; }

/* In mehrspaltigen Bereichen: Label OBEN, Feld darunter in voller Spaltenbreite
   (verhindert das Umbrechen langer Labels und gequetschte Felder) */
.settings-content .form-grid--cols label,
.settings-content .form-grid--cols label.form-full,
.settings-content .set-col .form-grid label,
.settings-content .set-col .form-grid label.form-full {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 6px; padding: 8px 0; border-bottom: 0;
}
.settings-content .form-grid--cols label span,
.settings-content .set-col .form-grid label span { flex: 0 0 auto; }
.settings-content .form-grid--cols input,
.settings-content .form-grid--cols select,
.settings-content .form-grid--cols textarea,
.settings-content .set-col .form-grid input,
.settings-content .set-col .form-grid select,
.settings-content .set-col .form-grid textarea {
  width: 100%; max-width: none;
}

/* Überschriften & Tabellen */
.settings-content .card h4 {
  margin: 22px 0 10px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft);
}
.settings-content .card > h4:first-of-type { margin-top: 6px; }

/* Buttons: klare Außenabstände */
.settings-content .action-group { margin-top: 18px; gap: 12px; }
.settings-content form + h4 { margin-top: 24px; }
.settings-content .data-table + form,
.settings-content p.muted + form { margin-top: 14px; }
.settings-content .data-table td .btn,
.settings-content .data-table th .btn { margin: 0; }
.settings-content .toast-inline { margin-bottom: 14px; border-radius: 10px; }
.settings-content .qos-kpi-row { margin-bottom: 14px; }
.settings-content .qos-kpi { padding: 10px 14px; border-radius: 12px; }
.settings-content .data-table { width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 4px; }
.settings-content .data-table th,
.settings-content .data-table td { padding: 8px 12px; }

/* Steuer-Tabelle: Summenzeilen hervorheben */
.tax-table td { padding: 9px 14px; }
.tax-table tr.is-total td { border-top: 2px solid var(--border-strong); font-weight: 800; font-size: 14px; }
.tax-table tr.is-grand td { background: var(--primary-soft); color: var(--primary); font-size: 15px; font-weight: 800; }

/* ── Schwebender Disketten-Speichern-Button (Settings) ──────────────────────
   20 % sichtbar im Ruhezustand, 100 % bei Hover. Klickbar nur bei Änderungen. */
#settings-fab.fab-save {
  opacity: .2;
  transition: opacity .2s, transform .2s cubic-bezier(.16,.84,.28,1), box-shadow .2s, background .2s;
}
#settings-fab.fab-save:hover { opacity: 1; }
#settings-fab.fab-save.is-clean {
  background: var(--surface-3); color: var(--text-soft);
  box-shadow: 0 4px 12px rgba(16,36,63,.12);
  cursor: default;
}
#settings-fab.fab-save.is-clean:hover { transform: none; }
#settings-fab.fab-save.is-dirty {
  background: var(--accent); color: #10243F;
  box-shadow: 0 8px 24px rgba(200,161,91,.55);
  cursor: pointer;
}
#settings-fab.fab-save.saving { pointer-events: none; opacity: .7; }

@media (max-width: 900px) {
  /* Schmale Schirme: normaler Seitenfluss, gestapelte Property-Zeilen */
  .settings-page { height: auto; min-height: 0; display: block; }
  .settings-content { overflow: visible; grid-template-columns: 1fr; padding: 0; }
  .settings-content .form-grid label,
  .settings-content .form-grid label.form-full {
    flex-direction: column; align-items: stretch; gap: 4px;
  }
  .settings-content .form-grid input,
  .settings-content .form-grid select,
  .settings-content .form-grid textarea { width: 100%; max-width: none; }
  .settings-savebar { position: sticky; bottom: 8px; }
}
.lp-rating-count { font-size: 11px; color: var(--text-muted); margin-left: auto; }

/* Footer-Rechtslinks */
.footer-legal { display: inline-flex; gap: 14px; margin-left: 16px; }
.footer-legal a { color: var(--text-muted); text-decoration: none; font-size: 12px; }
.footer-legal a:hover { color: var(--accent); text-decoration: underline; }

/* Cookie-/Datenschutz-Hinweis (schließbar, kein Consent-Gate) */
.cookie-note {
  position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 16px);
  z-index: 1200; max-width: 620px; width: calc(100% - 32px);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 16px 44px -16px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
  opacity: 0; transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.2,1);
}
.cookie-note.is-visible { opacity: 1; transform: translate(-50%, 0); }
.cookie-note a { color: var(--accent); }
.cookie-note-ok {
  margin-left: auto; flex: 0 0 auto;
  padding: 7px 16px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 12px;
  background: var(--grad-gold); color: #10243F; border: none;
}
.cookie-note-ok:hover { filter: brightness(1.05); }

/* Einfache Rechtstext-Seite */
.legal-page { max-width: 820px; margin: 0 auto; padding: 8px 4px 40px; line-height: 1.6; }
.legal-page h1 { font-family: var(--font-head, serif); font-size: 1.7rem; margin-bottom: 6px; }
.legal-page h2 { font-size: 1.05rem; margin: 22px 0 6px; color: var(--accent); }
.legal-page p, .legal-page li { color: var(--text-muted); font-size: 14px; }
.legal-page .legal-meta { font-size: 12px; color: var(--text-soft); margin-bottom: 18px; }

/* ════════════════════════════════════════════════════════════════════════
   HUD-Timer (Sitzungsprotokoll) — futuristisches Premium-Dashboard
   Farben: Navy (--primary/--navy) + Gold (--accent/--gold). Hell/Dunkel-fähig.
   ════════════════════════════════════════════════════════════════════════ */

/* Timer-Panel: KEIN eigener Hintergrund/Box — schwebt frei über der Ambient-Ebene.
   Oben links verankert: Parent (.content) trägt für diese View padding-top 0,
   der Container selbst hat margin 0 (Regel: parent.padding XOR self.margin). */
.session-info {
  position: relative; overflow: visible;
  border: none; border-radius: 0;
  background: none; box-shadow: none;
  padding: 0; margin: 0;
  align-self: start;
}
/* Timer-Karte ohne jede Box-Optik */
.session-info > .card.timer-card {
  background: transparent; border: none; box-shadow: none; border-radius: 0;
  margin: 0; padding: 4px 10px 8px;
}
.session-info > .card.timer-card::after { display: none; }
/* Statistik bleibt als dezente Glaskarte darunter */
.session-info > .card + .card {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, var(--surface)), var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
              0 14px 38px -24px color-mix(in srgb, var(--primary) 70%, transparent);
}
/* Kein toter Raum über dem Timer in dieser View */
.content:has(.session-layout) { padding-top: 0; }
.session-layout { height: calc(100vh - var(--topbar-h) - var(--statusbar-h) - 56px); }
.session-info { top: 0; left: 0; }
.session-info .timer-card .session-date-label { margin-top: 0; }
@keyframes hud-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Container des Kreises */
.hud-timer {
  position: relative; width: 216px; height: 216px;
  margin: 6px auto 10px; display: grid; place-items: center;
}
.hud-energy {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%);
  width: 172px; height: 172px; border-radius: 50%;
  pointer-events: none; opacity: .9; mix-blend-mode: screen;
}
.hud-ring { position: relative; width: 216px; height: 216px; overflow: visible; }

/* Kern-Glow */
.hud-core-glow { transform-origin: center; animation: hud-core-pulse 4.5s ease-in-out infinite; }
@keyframes hud-core-pulse { 0%,100% { opacity:.55; transform: scale(.96);} 50% { opacity:1; transform: scale(1.04);} }

/* Hintergrund-Track */
.hud-track { fill: none; stroke: color-mix(in srgb, var(--text) 12%, transparent); stroke-width: 6; }

/* Fortschritts-Bogen (übernimmt stroke-dashoffset aus dem bestehenden JS) */
.hud-progress {
  fill: none; stroke: url(#ringGradGold); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 408; stroke-dashoffset: 408;
  transform: rotate(-90deg); transform-origin: 75px 75px;
  transition: stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 55%, transparent));
}
.hud-progress.running { animation: hud-arc-glow 2.2s ease-in-out infinite; }
@keyframes hud-arc-glow {
  0%,100% { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 45%, transparent)); }
  50%     { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 90%, transparent)); }
}

/* Äußerer gestrichelter Ring — rotiert langsam */
.hud-ring-outer {
  fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width: 1.5; stroke-dasharray: 2 9;
  transform-origin: 75px 75px; animation: hud-spin 38s linear infinite;
}
/* Radar-Tickmarks — gegenrotierend */
.hud-ticks {
  fill: none; stroke: color-mix(in srgb, var(--primary) 35%, transparent);
  stroke-width: 7; stroke-dasharray: 1.4 10.2;
  transform-origin: 75px 75px; animation: hud-spin-rev 60s linear infinite;
}
/* Scanner-Zeiger */
.hud-pointer { transform-origin: 75px 75px; animation: hud-spin 12s linear infinite; }
.hud-pointer polygon { fill: color-mix(in srgb, var(--accent) 90%, transparent); filter: drop-shadow(0 0 4px var(--neon-glow)); }

@keyframes hud-spin     { to { transform: rotate(360deg); } }
@keyframes hud-spin-rev { to { transform: rotate(-360deg); } }

/* Lauf-Zustand: schneller + intensiver */
.hud-timer.is-running .hud-ring-outer { animation-duration: 14s; stroke: color-mix(in srgb, var(--accent) 75%, transparent); }
.hud-timer.is-running .hud-ticks      { animation-duration: 24s; }
.hud-timer.is-running .hud-pointer    { animation-duration: 4s; }
.hud-timer.is-running .hud-core-glow  { animation-duration: 2s; }
.hud-timer.is-running .hud-energy     { opacity: 1; }

/* Hexagon-Status-Badge oben */
.hud-badge {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 38px; display: grid; place-items: center; z-index: 3;
}
.hud-badge svg { position: absolute; inset: 0; }
.hud-badge polygon {
  fill: color-mix(in srgb, var(--surface) 80%, transparent);
  stroke: color-mix(in srgb, var(--accent) 70%, transparent); stroke-width: 1.5;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--primary) 50%, transparent));
}
.hud-badge-txt { position: relative; font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: .02em; }

/* Zentrum: Uhr + Untertitel */
.hud-center {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 2;
}
.hud-center .tb-clock {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  font-size: 2.3rem; font-weight: 800; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--text);
}
.hud-timer.is-running .hud-center .tb-clock {
  color: var(--accent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
}
.hud-center .tb-sub {
  margin-top: 5px; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
}
.hud-center .tb-tracked { color: var(--accent); }

/* Premium-Datum-Label */
.session-info .session-date-label {
  color: var(--accent); letter-spacing: .14em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Premium Start/Stop-Button */
.timer-card .btn-timer {
  background: var(--grad-gold); color: #10243F;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent) 70%, transparent),
              inset 0 1px 0 rgba(255,255,255,.4);
  backdrop-filter: blur(4px);
}
.timer-card .btn-timer:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.05); }
.timer-card .btn-timer:active { transform: translateY(0) scale(.97); }
.timer-card .btn-timer.is-running {
  background: linear-gradient(135deg, var(--danger), #ff7a5c); color: #fff;
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
}

/* Statistik-Card mit Icons + Glow */
.session-info .info-list { display: grid; grid-template-columns: 1fr auto; gap: 9px 10px; }
.session-info .info-list dt {
  font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 7px;
}
.session-info .info-list dt::before {
  font-size: 12px; color: var(--accent);
  filter: drop-shadow(0 0 4px var(--neon-glow));
}
.session-info .info-list dt:nth-of-type(1)::before { content: "◈"; }
.session-info .info-list dt:nth-of-type(2)::before { content: "✓"; }
.session-info .info-list dt:nth-of-type(3)::before { content: "✕"; }
.session-info .info-list dt:nth-of-type(4)::before { content: "€"; }
.session-info .info-list dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.session-info .info-list dd.amount { color: var(--accent); }

/* Premium-Scrollbar (Sitzungsbereich) */
.session-info::-webkit-scrollbar, .tab-panel::-webkit-scrollbar { width: 9px; }
.session-info::-webkit-scrollbar-thumb, .tab-panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
.session-info::-webkit-scrollbar-thumb:hover, .tab-panel::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 55%, transparent); background-clip: padding-box;
}

/* Mehrschichtiger, leicht bewegter Hintergrund hinter der Sitzungs-Ansicht */
.session-layout { position: relative; overflow: hidden; }
.session-info { overflow-x: hidden; }
/* Inhalt über dem globalen Fluid-Hintergrund halten */
.session-layout > aside, .session-layout > section { position: relative; z-index: 1; }

/* ── Phase 2: Tabs, Panel-Übergänge, Premium-Hover (Sitzungs-View) ──────────── */

/* Ladechoreografie: Sidebar + Tab-Host gleiten zeitversetzt ein */
.session-info { animation: hud-enter .5s cubic-bezier(.2,.7,.2,1) both; }
.tab-host     { animation: hud-enter .5s cubic-bezier(.2,.7,.2,1) .08s both; }
@keyframes hud-enter { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* Premium-Tab-Navigation: Hover-Glow + animierter Unterstrich */
.tab-nav { position: relative; gap: 4px; }
.tab-btn { position: relative; border-bottom: none; transition: color .18s, background .18s, transform .12s; }
.tab-btn::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--grad-gold); transform: scaleX(0); transform-origin: center;
  transition: transform .28s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 8px var(--neon-glow);
}
.tab-btn:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tab-btn:hover::after { transform: scaleX(.5); }
.tab-btn.active { color: var(--accent); font-weight: 700; }
.tab-btn.active::after { transform: scaleX(1); }

/* Tab-Panel-Übergang: Fade + Slide + Blur bei Aktivierung */
.tab-panel.active { animation: tab-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px) scale(.99); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

/* Karten im Tab-Bereich: Lift + Glow bei Hover */
.tab-host .card { transition: border-color .2s, box-shadow .2s, transform .2s; }
.tab-host .card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--primary) 60%, transparent);
}

/* ── Beratungserfassung (Wiki-Tab) ───────────────────────────────────────── */
.ce-part { padding: 10px 12px; }
.ce-part-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ce-sec { margin-top: 6px; }
.ce-sec-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 3px; }
.ce-topics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ce-topic { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 3px; background: var(--surface-2); font-size: 12.5px; }
.ce-topic.is-overlap { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.ce-t-title { font-weight: 600; }
.ce-eff { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ce-overlap { font-size: 10.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.ce-mark { margin-left: auto; white-space: nowrap; }
.ce-advised .ce-topic { background: color-mix(in srgb, var(--success) 10%, var(--surface-2)); }
.ce-when { margin-left: auto; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ce-search { display: flex; gap: 6px; margin-bottom: 8px; }
.ce-search input { flex: 1; }
.ce-chat-log { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; margin-bottom: 8px; }
.ce-msg { padding: 7px 10px; border-radius: 3px; font-size: 12.5px; line-height: 1.5; max-width: 92%; }
.ce-msg-user { align-self: flex-end; background: var(--primary-soft); color: var(--text); }
.ce-msg-bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); }
.ce-saved { margin-top: 6px; font-size: 11px; color: var(--success); }
#ce-chat-form { display: flex; gap: 6px; }
#ce-chat-form input { flex: 1; }
.consult-newopen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.consult-newopen-body { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.consult-newopen-body strong { color: var(--primary); }

/* Teilnehmer-Karten: gestaffeltes Einblenden + Hover-Highlight */
.participant-list .participant-card {
  transition: border-color .18s, box-shadow .18s, transform .18s;
  animation: tab-in .4s cubic-bezier(.2,.7,.2,1) both;
}
.participant-list .participant-card:nth-child(2) { animation-delay: .04s; }
.participant-list .participant-card:nth-child(3) { animation-delay: .08s; }
.participant-list .participant-card:nth-child(4) { animation-delay: .12s; }
.participant-list .participant-card:nth-child(n+5) { animation-delay: .16s; }
.participant-list .participant-card:hover {
  transform: translateX(3px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: -3px 0 0 0 var(--accent), 0 10px 26px -18px color-mix(in srgb, var(--primary) 60%, transparent);
}

/* Suchfeld: animierter Fokus-Glow */
.tab-host .search-input { transition: border-color .16s, box-shadow .16s, background .16s; }
.tab-host .search-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Leerzustand: dezenter Glow + sanftes Pulsieren des Icons */
.tab-host .empty-state {
  border-radius: 14px; padding: 28px 18px;
  background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
}
.tab-host .empty-state .empty-icon {
  color: color-mix(in srgb, var(--accent) 70%, transparent);
  filter: drop-shadow(0 0 10px var(--neon-glow)); animation: hud-core-pulse 3.5s ease-in-out infinite;
}

/* FAQ-Accordion (dynamisch injizierte <details>): Pfeil + weiches Ausfahren */
.tab-host details > summary { list-style: none; position: relative; padding-right: 30px !important; }
.tab-host details > summary::-webkit-details-marker { display: none; }
.tab-host details > summary::after {
  content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(-90deg);
  color: var(--accent); transition: transform .25s ease;
}
.tab-host details[open] > summary::after { transform: translateY(-50%) rotate(0deg); }
.tab-host details[open] > .md-body { animation: tab-in .35s ease both; }

/* Reduced Motion: alle HUD-Animationen aus */
@media (prefers-reduced-motion: reduce) {
  .session-info .timer-card,
  .hud-core-glow, .hud-ring-outer, .hud-ticks, .hud-pointer,
  .hud-progress.running,
  .session-info, .tab-host, .tab-panel.active, .participant-list .participant-card,
  .tab-host .empty-state .empty-icon, .tab-host details[open] > .md-body { animation: none !important; }
  .hud-progress { transition: none; }
  .tab-btn::after { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   HUD-Timer DELUXE — Radar-Sweep, Orbit-Partikel, Ziel-Reticle
   Frei schwebend (kein Container-Hintergrund), Hell/Dunkel-fähig.
   ════════════════════════════════════════════════════════════════════════ */

/* Radar-Sweep: rotierender Lichtkegel, als Ring maskiert */
.hud-sweep {
  position: absolute; inset: 50% auto auto 50%;
  width: 196px; height: 196px; border-radius: 50%;
  transform: translate(-50%,-50%);
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--accent) 38%, transparent) 0deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 40deg,
    transparent 80deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 92%, transparent 94%);
          mask: radial-gradient(circle, transparent 58%, #000 60%, #000 92%, transparent 94%);
  opacity: .5; pointer-events: none; z-index: 1;
  animation: hud-sweep-spin 9s linear infinite;
  mix-blend-mode: screen;
}
@keyframes hud-sweep-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.hud-timer.is-running .hud-sweep { opacity: .9; animation-duration: 3.2s; }

/* Orbit-Partikel: drei Leuchtpunkte auf eigenen Bahnen/Geschwindigkeiten */
.hud-orbits { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hud-orbit {
  position: absolute; inset: 50% auto auto 50%;
  transform-origin: 0 0;
  animation: hud-orbit-spin linear infinite;
}
.hud-orbit i {
  position: absolute; display: block; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--accent) 80%, transparent),
              0 0 14px 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.hud-orbit.o1 { animation-duration: 7s; }
.hud-orbit.o1 i { width: 5px; height: 5px; top: -104px; left: -2.5px; }
.hud-orbit.o2 { animation-duration: 13s; animation-direction: reverse; }
.hud-orbit.o2 i { width: 3.5px; height: 3.5px; top: -92px; left: -1.75px; opacity: .8; }
.hud-orbit.o3 { animation-duration: 21s; }
.hud-orbit.o3 i { width: 2.5px; height: 2.5px; top: -112px; left: -1.25px; opacity: .6; }
@keyframes hud-orbit-spin { to { transform: rotate(360deg); } }
.hud-timer.is-running .hud-orbit.o1 { animation-duration: 2.6s; }
.hud-timer.is-running .hud-orbit.o2 { animation-duration: 4.8s; }
.hud-timer.is-running .hud-orbit.o3 { animation-duration: 8s; }

/* Ziel-Reticle: vier Eckklammern mit atmendem Fokus */
.hud-frame { position: absolute; inset: -4px; pointer-events: none; z-index: 3; }
.hud-frame .fc {
  position: absolute; width: 22px; height: 22px;
  border: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 45%, transparent));
  animation: hud-frame-breathe 3.6s ease-in-out infinite;
}
.hud-frame .fc-tl { top: 0;    left: 0;   border-right: none; border-bottom: none; border-top-left-radius: 8px; }
.hud-frame .fc-tr { top: 0;    right: 0;  border-left: none;  border-bottom: none; border-top-right-radius: 8px; animation-delay: .9s; }
.hud-frame .fc-bl { bottom: 0; left: 0;   border-right: none; border-top: none;    border-bottom-left-radius: 8px; animation-delay: 1.8s; }
.hud-frame .fc-br { bottom: 0; right: 0;  border-left: none;  border-top: none;    border-bottom-right-radius: 8px; animation-delay: 2.7s; }
@keyframes hud-frame-breathe {
  0%,100% { opacity: .45; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.06); }
}
.hud-timer.is-running .hud-frame .fc {
  animation-duration: 1.4s;
  border-color: color-mix(in srgb, var(--accent) 90%, transparent);
}

/* Uhr: feiner Neon-Schimmer, im Lauf-Zustand pulsierend */
.hud-center .tb-clock {
  background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 70%, var(--accent)));
  -webkit-background-clip: text; background-clip: text;
}
.hud-timer.is-running .hud-center .tb-clock { animation: hud-clock-pulse 1.6s ease-in-out infinite; }
@keyframes hud-clock-pulse {
  0%,100% { text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }
  50%     { text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 85%, transparent),
                         0 0 46px color-mix(in srgb, var(--accent) 35%, transparent); }
}

/* Reduced Motion: Deluxe-Ebenen stilllegen */
@media (prefers-reduced-motion: reduce) {
  .hud-sweep, .hud-orbit, .hud-frame .fc,
  .hud-timer.is-running .hud-center .tb-clock { animation: none !important; }
  .hud-sweep { opacity: .25; }
}

/* ════════════════════════════════════════════════════════════════════════
   Steuern: Kleinunternehmerregelung (§ 19 UStG) + GewSt-Schwellen-Anzeige
   ════════════════════════════════════════════════════════════════════════ */
.ku-block {
  margin-top: 16px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.ku-block--locked { opacity: .75; }
.ku-title { margin: 0 0 10px; font-size: .85rem; letter-spacing: .03em; }

/* Schalter-Optik */
.ku-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; position: relative; }
.ku-toggle--disabled { cursor: not-allowed; }
.ku-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ku-toggle-track {
  position: relative; flex-shrink: 0; width: 42px; height: 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 18%, transparent);
  transition: background .2s;
}
.ku-toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.ku-toggle input:checked + .ku-toggle-track { background: var(--success, #2e9e5b); }
.ku-toggle input:checked + .ku-toggle-track .ku-toggle-thumb { transform: translateX(20px); }
.ku-toggle input:disabled + .ku-toggle-track { background: color-mix(in srgb, var(--text) 10%, transparent); opacity: .6; }
.ku-toggle--disabled .ku-toggle-label { color: var(--text-muted); }
.ku-toggle-label { font-size: .82rem; font-weight: 600; }

/* Warnung: Regelung verwirkt */
.ku-warning {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: .8rem; line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--danger, #C0492F) 45%, transparent);
  background: color-mix(in srgb, var(--danger, #C0492F) 10%, transparent);
  color: var(--text);
}

/* Bedingungs-Checkliste ✓/✗ */
.ku-conditions { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ku-condition {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px;
  font-size: .8rem; border: 1px solid var(--border);
  background: var(--surface);
}
.ku-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: #fff; }
.ku-ok .ku-check   { background: var(--success, #2e9e5b); }
.ku-fail .ku-check { background: var(--danger, #C0492F); }
.ku-fail { border-color: color-mix(in srgb, var(--danger, #C0492F) 45%, var(--border)); }
.ku-cond-label { flex: 1; }
.ku-cond-value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Schwellen-Fortschritt (GewSt-Freibetrag / § 19-Status) */
.tax-threshold {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: .8rem;
}
.tax-threshold--over { border-color: color-mix(in srgb, var(--danger, #C0492F) 55%, var(--border)); background: color-mix(in srgb, var(--danger, #C0492F) 8%, var(--surface)); }
.tax-threshold-head { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.tax-threshold-nums { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.tax-threshold-bar {
  margin-top: 8px; height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.tax-threshold-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--success, #2e9e5b), #d9a441 70%, var(--danger, #C0492F));
  transition: width .4s cubic-bezier(.2,.7,.2,1);
}

/* ── Kleinunternehmer-Toggle (wiederverwendbar: Standard-Button + Floating) ── */
.ku-btn { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; }
.ku-btn .ku-icon { flex-shrink: 0; }
.ku-btn.ku-is-off { opacity: .75; }
.ku-btn.ku-is-dirty { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
button[data-ku-toggle]:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }

/* Floating-Gruppe im Produkt-Editor: KU-FAB links neben Speicher-FAB */
.prd-fab-group {
  position: fixed; right: 26px; bottom: 26px; z-index: 60;
  display: flex; align-items: center; gap: 12px;
}
.prd-fab-group .fab-save { position: static; } /* Positionierung übernimmt die Gruppe */
.ku-fab {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--surface); color: var(--text);
  cursor: pointer; box-shadow: 0 6px 18px rgba(16, 36, 63, .3);
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.ku-fab:hover:not(:disabled) { transform: translateY(-3px) scale(1.05); }
.ku-fab:active:not(:disabled) { transform: scale(.96); }
.ku-fab[aria-pressed="true"] { background: var(--accent); color: #10243F; box-shadow: 0 8px 24px rgba(200,161,91,.5); }
.ku-fab.ku-is-off { color: var(--text-muted); }
.ku-fab.ku-is-dirty { outline: 2px solid var(--accent); outline-offset: 2px; }
.ku-fab .ku-icon { width: 22px; height: 22px; }

/* ════════════════════════════════════════════════════════════════════════
   Wissensbasis-Listen (FAQ-Dokumente / Wiki / Zusammenfassungen)
   Futuristisch-elegant: Glas-Karten, Akzentkante, gestaffeltes Einblenden.
   ════════════════════════════════════════════════════════════════════════ */
.kb-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; margin-bottom: 14px;
}
.kb-toolbar-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-search {
  position: relative; display: flex; gap: 8px; align-items: center;
  flex: 1 1 280px; max-width: 460px; min-width: 200px;
}
.kb-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .55; pointer-events: none; }
.kb-search-input {
  flex: 1; min-width: 0; padding: 9px 12px 9px 32px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.kb-search-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Kennzahlen-Band */
.kb-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.kb-stat {
  display: flex; align-items: baseline; gap: 7px; padding: 7px 14px;
  border-radius: 999px; font-variant-numeric: tabular-nums;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 65%, transparent);
}
.kb-stat-value { font-weight: 800; font-size: .95rem; color: var(--accent); }
.kb-stat-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }

/* Karten-Grid: responsive, schmale Displays = 1 Spalte */
.kb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.kb-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 15px 16px 13px; border-radius: 14px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, var(--surface)), var(--surface));
  border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--primary) 60%, transparent);
  transition: transform .18s cubic-bezier(.2,.7,.2,1), border-color .18s, box-shadow .18s;
  animation: tab-in .4s cubic-bezier(.2,.7,.2,1) both;
}
/* Akzentkante links, wächst beim Hover */
.kb-card::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--grad-gold, var(--accent));
  opacity: .55; transition: top .18s, bottom .18s, opacity .18s;
}
.kb-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--primary) 75%, transparent),
              0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.kb-card:hover::before { top: 6px; bottom: 6px; opacity: 1; }
.kb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kb-card-source {
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--text-muted); background: color-mix(in srgb, var(--text) 5%, transparent);
}
.kb-source-transcript { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.kb-card-date { font-size: .68rem; color: var(--text-soft, var(--text-muted)); font-variant-numeric: tabular-nums; }
.kb-card-title {
  margin: 0; font-size: .95rem; line-height: 1.35; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kb-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kb-card-arrow {
  color: var(--accent); font-weight: 700; opacity: 0; transform: translateX(-6px);
  transition: opacity .18s, transform .18s; margin-left: auto;
}
.kb-card:hover .kb-card-arrow { opacity: 1; transform: translateX(0); }

/* Schmale Displays: Toolbar stapelt, Suche volle Breite, 1-spaltiges Grid */
@media (max-width: 560px) {
  .kb-toolbar { flex-direction: column; align-items: stretch; }
  .kb-search { max-width: none; }
  .kb-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-card { animation: none; }
  .kb-card, .kb-card::before, .kb-card-arrow { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   FAQ-Arbeitsoberfläche (Admin/Berater + Kunde) — modern, dringlichkeitsfokussiert
   ════════════════════════════════════════════════════════════════════════ */
.faqx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.faqx-title h2 { margin: 0; font-size: 22px; }
.faqx-sub { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.faqx-admin-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* Kompakte Statistik-Pills */
.faqx-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.faqx-stat {
  display: flex; align-items: baseline; gap: 7px; padding: 8px 15px; border-radius: 12px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  font-variant-numeric: tabular-nums;
}
.faqx-stat-accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.faqx-stat-value { font-size: 1.2rem; font-weight: 800; color: var(--text); }
.faqx-stat-accent .faqx-stat-value { color: var(--accent); }
.faqx-stat-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }

/* Toolbar: Filter-Tabs + Suche */
.faqx-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.faqx-tabs { display: inline-flex; padding: 3px; border-radius: 11px; background: color-mix(in srgb, var(--text) 7%, transparent); border: 1px solid var(--border); }
.faqx-tab { padding: 7px 15px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--text-muted); text-decoration: none; transition: background .15s, color .15s; }
.faqx-tab:hover { color: var(--text); }
.faqx-tab.is-active { background: var(--accent); color: #10243F; }
.faqx-search { position: relative; display: flex; gap: 8px; align-items: center; flex: 1 1 240px; min-width: 180px; }
.faqx-search--wide { max-width: 640px; margin-bottom: 16px; }
/* Monochrome Lupe (keine Emoji) */
.faqx-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-60%);
  width: 10px; height: 10px; border: 1.5px solid var(--text-muted); border-radius: 50%; pointer-events: none;
}
.faqx-search-icon::after {
  content: ""; position: absolute; right: -4px; bottom: -3px; width: 5px; height: 1.5px;
  background: var(--text-muted); transform: rotate(45deg); transform-origin: right center;
}
.faqx-search-input {
  flex: 1; min-width: 0; padding: 9px 12px 9px 32px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.faqx-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Karten-Liste */
.faqx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.faqx-card {
  display: flex; align-items: stretch; gap: 4px;
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface);
  overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .12s;
}
.faqx-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--primary) 60%, transparent); }
.faqx-card.is-open { border-left: 3px solid var(--accent); }
.faqx-card-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 11px 14px; text-decoration: none; color: inherit; }
/* Dringlichkeits-Block */
.faqx-urg { flex: 0 0 auto; width: 58px; text-align: center; display: flex; flex-direction: column; gap: 1px; padding: 6px 4px; border-radius: 10px; }
.faqx-urg-value { font-size: 1.15rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.faqx-urg-meta { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .8; }
.urg-high { background: color-mix(in srgb, var(--danger, #C0492F) 16%, transparent); color: var(--danger, #C0492F); }
.urg-mid  { background: color-mix(in srgb, #d9a441 22%, transparent); color: #a9761a; }
.urg-low  { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-muted); }
[data-theme="dark"] .urg-mid { color: #e6b84a; }
/* Body */
.faqx-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.faqx-q { font-size: 14px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.faqx-a { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; }
.faqx-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.faqx-author { font-size: 11px; color: var(--text-soft, var(--text-muted)); }
/* Aktionen */
.faqx-card-actions { display: flex; align-items: center; gap: 6px; padding: 8px 12px 8px 4px; flex-shrink: 0; }

/* Schmale Displays: Aktionen unter den Inhalt, Karte gestapelt */
@media (max-width: 620px) {
  .faqx-card { flex-direction: column; }
  .faqx-card-actions { padding: 0 12px 12px 12px; justify-content: flex-end; }
  .faqx-a { max-width: none; white-space: normal; }
  .faqx-toolbar { flex-direction: column; align-items: stretch; }
  .faqx-search { max-width: none; }
}

/* ── Lead-Sperre: geblurrte Platzhalter-Grafik + zentrale Botschaft ────────── */
.faq-locked { position: relative; border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
.faq-locked-art { display: block; }
.faq-locked-art img { display: block; width: 100%; height: auto; }
.faq-locked-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--surface) 55%, transparent) 70%, transparent);
}
/* Monochromes Schloss-Symbol (kein Emoji): Bügel + Korpus via CSS-Formen */
.faq-locked-badge {
  position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 12px 30px -12px rgba(8,18,32,.5);
}
.faq-locked-badge::before {
  content: ""; width: 16px; height: 12px; border: 2.5px solid var(--accent); border-bottom: none;
  border-radius: 10px 10px 0 0; position: absolute; top: 16px;
}
.faq-locked-badge::after {
  content: ""; width: 22px; height: 16px; background: var(--accent); border-radius: 3px; position: relative; top: 3px;
}
.faq-locked-msg {
  margin: 0; max-width: 460px; font-size: 1.08rem; font-weight: 700; line-height: 1.5; color: var(--text);
  text-shadow: 0 1px 10px color-mix(in srgb, var(--surface) 90%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════
   Portal-Echtzeit-Sitzungs-Ticker (P3) — dauerhaft sichtbar, Statusfarben
   ════════════════════════════════════════════════════════════════════════ */
.portal-ticker {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ptk-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 28px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ptk-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.ptk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 0 0 0 transparent; }
/* Statusfarben */
.portal-ticker[data-color="gruen"] .ptk-dot { background: #2e9e5b; animation: ptk-pulse 2s ease-in-out infinite; }
.portal-ticker[data-color="gruen"] .ptk-label { color: #2e9e5b; }
.portal-ticker[data-color="gelb"] .ptk-dot { background: #d9a441; animation: ptk-pulse 2.6s ease-in-out infinite; }
.portal-ticker[data-color="gelb"] .ptk-label { color: #a9761a; }
.portal-ticker[data-color="rot"] .ptk-dot { background: color-mix(in srgb, var(--danger, #C0492F) 70%, transparent); }
.portal-ticker[data-color="rot"] .ptk-label { color: var(--text-muted); }
@keyframes ptk-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }

.ptk-sessions { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; overflow: hidden; }
.ptk-sess { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); background: var(--surface); }
.ptk-sess-name { font-weight: 700; }
.ptk-sess-state { color: var(--text-muted); }
.ptk-sess-running { border-color: color-mix(in srgb, #2e9e5b 45%, var(--border)); }
.ptk-sess-running .ptk-sess-state { color: #2e9e5b; font-weight: 600; }
.ptk-next { font-size: 12.5px; color: var(--text-muted); }
.ptk-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ptk-note { font-size: 12px; color: var(--text-muted); }
.ptk-note-warn { color: var(--danger, #C0492F); font-weight: 600; }

@media (max-width: 640px) {
  .ptk-inner { padding: 7px 14px; gap: 10px; }
  .ptk-sessions { order: 3; flex-basis: 100%; }
}

.ptk-preview { font-size: 12px; color: var(--accent); font-weight: 600; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Themenverwaltung (Portal, P5) ────────────────────────────────────────── */
.ctpx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ctpx-card {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.ctpx-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ctpx-card.is-advised { opacity: .82; background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.ctpx-reorder { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; flex-shrink: 0; }
.ctpx-mv {
  width: 26px; height: 22px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-muted);
  font-size: 11px; transition: border-color .12s, color .12s, background .12s;
}
.ctpx-mv:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ctpx-mv:disabled { opacity: .5; cursor: default; }
.ctpx-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ctpx-title { font-size: 14px; font-weight: 700; }
.ctpx-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ctpx-actions { flex-shrink: 0; }
@media (max-width: 560px) {
  .ctpx-card { flex-wrap: wrap; }
  .ctpx-actions { flex-basis: 100%; }
}

/* P7 — Berater-Themen-Kontext im Teilnehmer-Card */
.pc-topics { margin-top: 8px; font-size: 13px; }
.pc-topics > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; list-style: none; }
.pc-topics > summary::-webkit-details-marker { display: none; }
.pc-topics-body { display: grid; gap: 8px; padding: 8px 0 2px; }
.pc-topics-group strong { display: block; font-size: 12px; opacity: .7; margin-bottom: 2px; }
.pc-topics-group ul { margin: 0; padding-left: 18px; }
.pc-topics-group li { line-height: 1.5; }

/* P7 — Öffentliche anonymisierte Themenstatistik */
.ptop-stats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.ptop-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.ptop-name { font-weight: 600; }
/* Teilnehmer-Beratungsrecord */
.ctpx-when { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-left: 4px; }
.consult-record { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.consult-item { padding: 9px 12px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); }
.consult-q { font-weight: 600; font-size: 13px; }
.consult-a { font-size: 12px; margin-top: 3px; line-height: 1.5; }
.consult-meta { font-size: 11px; color: var(--text-soft); margin-top: 5px; font-variant-numeric: tabular-nums; }

/* ── Transcript-Test (KI-Aufarbeitung) — hochwertiges Redesign ─────────────── */
.ttx-layout { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: clamp(10px, 1.4vw, 18px); align-items: start; }
.ttx-input { position: sticky; top: clamp(6px, 1vh, 16px); }
.ttx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ttx-card-head h3 { margin: 0; }
.ttx-textarea { font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; font-size: 12.5px; line-height: 1.5; resize: vertical; }
.ttx-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ttx-label-row .btn-sm { padding: 3px 9px; font-size: 11px; }
.ttx-pii { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--border-strong); }
.ttx-pii .hint { margin: 0 0 6px; }
/* 2x2 statt 4 gestapelter Zeilen -- die Eingabe-Spalte (min. 320px) ist zu
   schmal fuer das globale .form-grid-Minimum (220px je Feld), daher stapelten
   Vorname/Nachname/E-Mail/Telefon bislang einzeln untereinander. */
.ttx-pii .form-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 0; }
.ttx-pii .form-grid input { padding: 6px 9px; }
.ttx-submit { width: 100%; margin-top: 10px; }

/* Leerer Zustand */
.ttx-empty { text-align: center; padding: clamp(18px, 3.5vh, 32px) 24px; }
.ttx-empty-icon { font-size: 40px; opacity: .45; margin-bottom: 6px; filter: grayscale(.3); }

/* Pipeline-Stepper (Navy/Gold, HUD-Anmutung wie Timer-Karte) */
.ttx-pipeline { display: flex; gap: 0; margin: 8px 0 2px; }
.ttx-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; padding: 6px 6px; }
.ttx-step::before {
  content: ''; position: absolute; top: 21px; left: -50%; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--border-strong));
}
.ttx-step:first-child::before { display: none; }
.ttx-step-icon {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; background: var(--surface-2); border: 1.5px solid var(--border-strong);
  position: relative; z-index: 1; transition: all .25s ease;
}
.ttx-step-label { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.ttx-step-state { font-size: 10.5px; font-weight: 800; line-height: 1; }
.ttx-step.is-ok .ttx-step-icon { background: var(--primary); border-color: var(--accent); box-shadow: 0 0 0 3px var(--neon-soft), 0 0 12px var(--neon-glow); }
.ttx-step.is-ok .ttx-step-label { color: var(--primary); }
.ttx-step.is-ok .ttx-step-state { color: var(--success); }
.ttx-step.is-fail .ttx-step-icon { border-color: var(--danger); opacity: .75; }
.ttx-step.is-fail .ttx-step-state { color: var(--danger); }
.ttx-step.is-idle .ttx-step-icon { opacity: .45; }
.ttx-step.is-idle .ttx-step-label { opacity: .55; }

/* Kennzahlen-Kacheln */
.ttx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.ttx-stat {
  padding: 8px 12px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--border); text-align: center; transition: transform .18s ease, box-shadow .18s ease;
}
.ttx-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ttx-stat-value { font-size: 19px; font-weight: 800; color: var(--primary); letter-spacing: -.01em; }
.ttx-stat-label { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; letter-spacing: .03em; }

/* Terminal-Panel für den anonymisierten Volltext */
.ttx-terminal { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.ttx-terminal-bar {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: linear-gradient(135deg, #10243F, #1B3556);
}
.ttx-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); }
.ttx-dot:first-child { background: rgba(200,161,91,.85); }
.ttx-terminal-title { flex: 1; margin-left: 8px; font-size: 11.5px; color: rgba(255,255,255,.65); font-family: Consolas, monospace; }
.ttx-copy {
  border: 1px solid rgba(200,161,91,.5); background: rgba(200,161,91,.12); color: #E8D5AE;
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 7px; cursor: pointer;
  transition: background .18s ease;
}
.ttx-copy:hover { background: rgba(200,161,91,.28); }
.ttx-copy-status { font-size: 11px; color: #9CCBA8; margin-left: 6px; }
.ttx-terminal-body {
  display: block; width: 100%; border: 0; border-radius: 0; resize: vertical;
  background: #0C1B30; color: #C7D4E4; padding: 10px 14px;
  font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; font-size: 12px; line-height: 1.55;
  white-space: pre-wrap;
  /* Eigener Innen-Scroll statt die ganze Seite wachsen zu lassen -- Text bleibt
     per Drag-Handle (resize:vertical) trotzdem erweiterbar, gleiches Muster wie
     .transcript-status pre (Z. ~1015). */
  max-height: clamp(140px, 24vh, 240px); overflow-y: auto;
}
.ttx-terminal-body:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(200,161,91,.35); }

/* Zusammenfassung / Details */
.ttx-doc-title { font-weight: 600; color: var(--primary); margin: 2px 0 8px; }
.ttx-details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary); padding: 6px 0; }
.ttx-pre {
  white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--border);
  padding: 12px 14px; border-radius: 10px; font-size: 12px; line-height: 1.6; margin-top: 6px;
}

/* Wissensbasis zweispaltig */
.ttx-kb { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ttx-kb-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; }
.ttx-kb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ttx-kb-item {
  padding: 8px 12px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.4; transition: border-color .18s ease, transform .18s ease;
}
.ttx-kb-item:hover { border-color: var(--accent); transform: translateX(2px); }

/* Slides-Pending mit Spinner */
.ttx-pending { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.ttx-spinner {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
  border: 2px solid var(--neon-soft); border-top-color: var(--accent);
  animation: ttx-spin .9s linear infinite;
}
@keyframes ttx-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .ttx-layout { grid-template-columns: 1fr; }
  .ttx-input { position: static; }
  .ttx-kb { grid-template-columns: 1fr; }
  .ttx-step-label { font-size: 10px; }
}

/* ─── KI-Icon-Generator (Produkt-Editor): Schachbrett-Vorschau + Verwaltung ───
   Hinweis: var(--icon-primary/accent/neutral) sind reine Prompt-Token für die
   LLM-SVG-Generierung (services/iconGen.js) — der Server ersetzt sie vor dem
   Rastern durch feste Hexwerte je Theme, im ausgelieferten PNG stecken also
   keine CSS-Variablen mehr. Hier folgt nur noch die Vorschau-Optik. */
.icx-stage { margin-top: 16px; }

/* Senden-Zeile direkt unter dem Motiv-Feld: unübersehbarer Primär-Button */
.icx-send-row { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.icx-send { flex: 0 0 auto; }
.icx-send-status { font-size: .8rem; }
.icx-toggle { flex: 0 0 auto; }
.icx-toggle.is-active { background: var(--accent); color: #10243F; border-color: var(--accent); }

/* Platzhalter-Zustand vor der ersten Generierung: Flächen sind sichtbar,
   aber erkennbar leer (gedämpftes Muster + Hinweistext aus data-empty-text). */
.icx-empty { position: relative; }
.icx-empty img { visibility: hidden; }
.icx-checker.icx-empty { opacity: .55; }
.icx-empty::after {
  content: attr(data-empty-text);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 10%; text-align: center;
  font-size: .72rem; font-weight: 600; line-height: 1.3;
  color: #10243F; background: rgba(255, 255, 255, .78);
}
.icx-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.icx-title { font-size: .8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.icx-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.icx-seg-btn {
  border: none; background: var(--surface-2); color: var(--text-muted);
  padding: 5px 14px; font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.icx-seg-btn + .icx-seg-btn { border-left: 1px solid var(--border); }
.icx-seg-btn.is-active { background: var(--accent); color: #10243F; }

.icx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.icx-tile { margin: 0; text-align: center; }
.icx-tile figcaption { margin-top: 6px; display: flex; flex-direction: column; gap: 1px; }
.icx-tile figcaption b { font-size: .78rem; }
.icx-file { font-size: .68rem; color: var(--text-muted); word-break: break-all; }

/* Schachbrett-Hintergrund macht Transparenz unmittelbar sichtbar: das PNG
   liegt exakt deckungsgleich (1:1) über dem Karo-Muster. */
.icx-checker {
  aspect-ratio: 1 / 1; width: 100%; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--border);
  background-image:
    repeating-conic-gradient(#fff 0% 25%, #000 0% 50%);
  background-size: 16px 16px;
}
.icx-checker img { width: 100%; height: 100%; object-fit: contain; display: block; }
.icx-checker-sm { border-radius: 3px; }

/* Kontextfläche: zeigt das Icon zusätzlich auf einer echten Kartenfläche
   (Hell = Weiß, Dunkel = Navy) im lokal gewählten Vorschau-Modus. */
.icx-surface {
  aspect-ratio: 1 / 1; width: 100%; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  padding: 12%; transition: background-color .2s ease;
}
[data-icx-theme="light"] .icx-surface { background: #FFFFFF; }
[data-icx-theme="dark"] .icx-surface { background: #10243F; }
.icx-surface img { width: 100%; height: 100%; object-fit: contain; display: block; }

.icx-lib { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; }
.icx-lib-head { font-size: .8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; }
.icx-lib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
  max-height: 360px; overflow-y: auto; padding-right: 4px;
}
.icx-lib-card {
  border: 1px solid var(--border); border-radius: 3px; padding: 8px; background: var(--surface-2);
}
.icx-lib-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.icx-lib-meta { margin-top: 6px; display: flex; flex-direction: column; gap: 1px; }
.icx-lib-motif { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icx-lib-date { font-size: .66rem; color: var(--text-muted); }
.icx-lib-actions { display: flex; gap: 6px; margin-top: 8px; }
.icx-lib-actions .btn { flex: 1; padding: 4px 8px; font-size: .72rem; }

@media (max-width: 640px) {
  .icx-tiles { grid-template-columns: 1fr 1fr; }
  .icx-tile-context { grid-column: 1 / -1; max-width: 200px; margin: 0 auto; }
}

/* ── Firmenbild-Upload (Settings, #stammdaten) ────────────────────────────── */
.avatar-upload-form {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px; margin-bottom: 14px;
  background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius);
}
.avatar-upload-preview {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); border: 1px solid var(--border);
}
.avatar-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-placeholder { font-weight: 800; font-size: 15px; color: var(--text-muted); }
.avatar-upload-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.avatar-upload-field span { font-size: 11px; color: var(--text-muted); }

/* ── Interesse-Popup im Hero (mittig, fliegt von unten ein, scrollt mit der Seite weg) ── */
.lp-pop {
  animation: none; position: fixed; left: 50%; top: 50%; z-index: 6; width: min(340px, calc(100% - 32px));
  max-height: calc(100% - 24px); overflow-y: auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 12px 14px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, calc(-50% + 48px));
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease, visibility 0s linear .55s;
}
.lp-pop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); transition-delay: 0s; }
/* Beim Scrollen ausgeblendet -- danach nur noch ueber die Sektion #interesse bzw. den Nav-Eintrag erreichbar. */
.lp-pop.is-open.is-scrolled { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, calc(-50% - 24px)); transition: transform .35s ease, opacity .3s ease, visibility 0s linear .35s; }
.lp-pop-h { display: block; font-family: var(--font-head); font-size: 1.05rem; color: var(--navy, var(--text)); padding-right: 24px; }
.lp-pop-note { font-size: .78rem; line-height: 1.45; margin: 4px 0 10px; color: var(--text); }
.lp-pop-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--text); cursor: pointer; border-radius: 50%; }
.lp-pop-x:hover { color: var(--accent); }
.lp-pop-look { align-self: center; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; padding: 2px 6px; }
.lp-pop-look:hover { color: var(--accent); }
/* Eingebettete Karte in #interesse: gleiche Optik wie das Popup, statisch und horizontal zentriert, text-align zurueck auf links */
.lp-pop.lp-pop-embed { position: relative; left: auto; top: auto; z-index: auto; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none; margin: 0 auto; max-height: none; overflow: visible; text-align: left; }
.lp-pop-form { display: flex; flex-direction: column; gap: 8px; }
.lp-pop-form textarea { width: 100%; height: 52px; min-height: 0; padding: 6px 10px; font-size: 13px; font-family: inherit; resize: none; }
.lp-pop-contact { display: flex; flex-direction: column; gap: 8px; }
.lp-pop-contact select, .lp-pop-contact input { width: 100%; box-sizing: border-box; padding: 7px 8px; font-size: 13px; min-width: 0; }

/* Zwei Spalten: Formular + (wenn aktive oeffentliche Themen existieren) schmale Themenliste rechts, 150 px. */
.lp-pop:has(.lp-pop-grid.has-side) { width: min(520px, calc(100% - 32px)); }
.lp-pop-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.lp-pop-grid.has-side { grid-template-columns: minmax(0, 1fr) 150px; }
.lp-pop-main { min-width: 0; }

/* Themenfeld: gewaehlte Themen als Chips + eigener Text im selben Feld */
.lp-pop-field { border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; background: var(--surface-2, var(--surface)); padding: 4px 6px; }
.lp-pop-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lp-pop-chips:empty { display: none; }
.lp-pop-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 999px; font-size: 12px; background: color-mix(in srgb, var(--accent) 22%, transparent); border: 1px solid var(--accent); color: var(--text); }
.lp-pop-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 10px; line-height: 1; padding: 2px; }
.lp-pop-field textarea { border: 0; background: transparent; outline: none; width: 100%; height: 40px; padding: 4px 2px; box-shadow: none; }
.lp-pop-err { margin: 0; font-size: .78rem; color: var(--danger); }
.lp-pop-err[hidden] { display: none; }

/* Pruefbereich: Turnstile und die zwei Buttons teilen sich dieselbe Flaeche (kein Springen). */
.lp-pop-verify { position: relative; height: 60px; }
.lp-pop-verify .cf-turnstile { position: absolute; inset: 0 auto auto 0; transform: scale(.9); transform-origin: left top; width: 100%; }
.lp-pop-verify.is-done .cf-turnstile { visibility: hidden; }
.lp-pop-actions { position: absolute; inset: 0; display: flex; gap: 8px; visibility: hidden; }
.lp-pop-verify.is-done .lp-pop-actions { visibility: visible; }
.lp-pop-actions .btn { flex: 1 1 0; min-width: 0; height: 100%; padding: 4px 8px; font-size: 12px; line-height: 1.2; white-space: normal; text-align: center; }

/* Themenliste: nur die verfuegbare Hoehe des Formulars nutzen (absolut in der Spalte), scrollbar */
.lp-pop-side { position: relative; min-height: 120px; }
.lp-pop-topics { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
.lp-pop-topic { width: 100%; height: 58px; flex: none; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; text-align: left; cursor: pointer; font-family: inherit; color: var(--text); background: var(--surface-2, var(--surface)); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lp-pop-topics li[hidden] { display: none; }
.lp-pop-more { width: 100%; height: 32px; flex: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--navy-soft, transparent); border: 1px solid var(--accent); border-radius: 8px; }
.lp-pop-more:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.lp-pop-topic:hover, .lp-pop-topic.is-on { border-color: var(--accent); }
.lp-pop-topic.is-on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.lp-pop-topic-t { max-width: 100%; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-pop-topic-d { max-width: 100%; font-size: 11px; line-height: 1.3; color: var(--text-muted, var(--text)); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) {
  .lp-pop:has(.lp-pop-grid.has-side) { width: min(340px, calc(100% - 32px)); }
  .lp-pop-grid.has-side { grid-template-columns: minmax(0, 1fr); }
  .lp-pop-side { height: 150px; }
}
@media (prefers-reduced-motion: reduce) { .lp-pop, .lp-pop.is-open, .lp-pop.is-open.is-scrolled { transform: translate(-50%, -50%); transition: opacity .2s ease; } }