/* ===== THEME ENGINE =====
     Status-Farben (green/orange/red) sind in :root global definiert und
     bleiben über alle Themes konstant, damit die Daten-Bedeutung erhalten bleibt.
     Pro Theme wird nur das "Chrome" überschrieben: Backgrounds, Text, Akzente. */
  :root {
    /* Status (konstant) */
    --green: #22c55e; --green-dim: rgba(34,197,94,0.1);
    --orange: #f97316; --orange-dim: rgba(249,115,22,0.1);
    --red: #ef4444; --red-dim: rgba(239,68,68,0.1);
    --on-accent: #000;

    /* --- Original Dark (Default) --- */
    --y: #FEEC3B; --y-dim: rgba(254,236,59,0.08); --y-border: rgba(254,236,59,0.22);
    --teal: #00C1C9; --teal-dim: rgba(0,193,201,0.1);
    --pink: #FF0064; --pink-dim: rgba(255,0,100,0.1);
    --white: #fff; --bg: #0a0a0a; --bg2: #111; --bg3: #181818; --bg4: #222;
    --muted: #555; --border: rgba(255,255,255,0.07);
    --text: rgba(255,255,255,0.85); --dim: rgba(255,255,255,0.45);
    --nav-bg: rgba(10,10,10,0.92);
    --cover-glow1: rgba(254,236,59,0.07); --cover-glow2: rgba(0,193,201,0.05);
    --stars-opacity: 0;
    --hover-soft: rgba(255,255,255,0.05); --row-hover: rgba(255,255,255,0.02); --border-strong: rgba(255,255,255,0.12);
  }

  /* Globale Hell-Anpassung der Status-Farben (für alle Light-Themes)
     #15803d statt #16a34a → 4.8:1 auf hellem BG (#16a34a war 3.15:1) */
  html[data-mode="light"] {
    --green: #15803d; --orange: #d97706; --red: #dc2626;
    --green-dim: rgba(22,163,74,0.12); --orange-dim: rgba(217,119,6,0.12); --red-dim: rgba(220,38,38,0.12);
    --hover-soft: rgba(0,0,0,0.04); --row-hover: rgba(0,0,0,0.025); --border-strong: rgba(0,0,0,0.16);
  }

  /* Original Light */
  html[data-theme="original"][data-mode="light"] {
    --y: #B8860B; --y-dim: rgba(184,134,11,0.10); --y-border: rgba(184,134,11,0.30);
    --teal: #0891b2; --teal-dim: rgba(8,145,178,0.12);
    --pink: #db2777; --pink-dim: rgba(219,39,119,0.12);
    --white: #0a0a0a; --bg: #ffffff; --bg2: #f6f6f4; --bg3: #efefec; --bg4: #e6e6e1;
    --muted: #999; --border: rgba(0,0,0,0.10);
    --text: rgba(0,0,0,0.85); --dim: rgba(0,0,0,0.55);
    --nav-bg: rgba(255,255,255,0.92);
    --cover-glow1: rgba(184,134,11,0.10); --cover-glow2: rgba(8,145,178,0.07);
    --stars-opacity: 0;
  }

  /* ewtos Dark — Space (Orange/Violett auf Tiefblau) */
  html[data-theme="ewtos"][data-mode="dark"] {
    --y: #f97316; --y-dim: rgba(249,115,22,0.12); --y-border: rgba(249,115,22,0.30);
    --teal: #06b6d4; --teal-dim: rgba(6,182,212,0.12);
    --pink: #8b5cf6; --pink-dim: rgba(139,92,246,0.14);
    --white: #f1f5f9; --bg: #070713; --bg2: #0d0d1e; --bg3: #13132a; --bg4: #20203c;
    --muted: #64748b; --border: rgba(255,255,255,0.08);
    --text: rgba(241,245,249,0.85); --dim: rgba(148,163,184,0.95);
    --nav-bg: rgba(7,7,19,0.9);
    --cover-glow1: rgba(234,88,12,0.16); --cover-glow2: rgba(124,58,237,0.13);
    --stars-opacity: 1;
  }
  /* ewtos Light */
  html[data-theme="ewtos"][data-mode="light"] {
    --y: #ea580c; --y-dim: rgba(234,88,12,0.10); --y-border: rgba(234,88,12,0.28);
    --teal: #0891b2; --teal-dim: rgba(8,145,178,0.12);
    --pink: #7c3aed; --pink-dim: rgba(124,58,237,0.12);
    --white: #0f172a; --bg: #f8fafc; --bg2: #f1f5f9; --bg3: #e9eef4; --bg4: #dde5ee;
    --muted: #94a3b8; --border: rgba(15,23,42,0.10);
    --text: rgba(15,23,42,0.88); --dim: rgba(51,65,85,0.78);
    --nav-bg: rgba(248,250,252,0.9);
    --cover-glow1: rgba(234,88,12,0.10); --cover-glow2: rgba(124,58,237,0.08);
    --stars-opacity: 0;
  }

  /* Aurora Dark — Polarlicht (Emerald/Cyan) */
  html[data-theme="aurora"][data-mode="dark"] {
    --y: #34d399; --y-dim: rgba(52,211,153,0.10); --y-border: rgba(52,211,153,0.28);
    --teal: #22d3ee; --teal-dim: rgba(34,211,238,0.12);
    --pink: #a78bfa; --pink-dim: rgba(167,139,250,0.14);
    --white: #ecfdf5; --bg: #07140f; --bg2: #0b1c16; --bg3: #10261d; --bg4: #1a3528;
    --muted: #4b7c66; --border: rgba(167,243,208,0.08);
    --text: rgba(236,253,245,0.85); --dim: rgba(110,231,183,0.6);
    --nav-bg: rgba(7,20,15,0.9);
    --cover-glow1: rgba(52,211,153,0.12); --cover-glow2: rgba(34,211,238,0.10);
    --stars-opacity: 0.6;
  }
  /* Aurora Light */
  html[data-theme="aurora"][data-mode="light"] {
    --y: #059669; --y-dim: rgba(5,150,105,0.10); --y-border: rgba(5,150,105,0.28);
    --teal: #0891b2; --teal-dim: rgba(8,145,178,0.12);
    --pink: #7c3aed; --pink-dim: rgba(124,58,237,0.12);
    --white: #053826; --bg: #f0fdf8; --bg2: #e7f9f0; --bg3: #dcf4e8; --bg4: #caebdb;
    --muted: #6b9684; --border: rgba(6,78,59,0.10);
    --text: rgba(5,56,38,0.86); --dim: rgba(15,89,63,0.72);
    --nav-bg: rgba(240,253,248,0.9);
    --cover-glow1: rgba(5,150,105,0.10); --cover-glow2: rgba(8,145,178,0.08);
    --stars-opacity: 0;
  }

  /* Indigo Dark — Premium Violett */
  html[data-theme="indigo"][data-mode="dark"] {
    --y: #818cf8; --y-dim: rgba(129,140,248,0.12); --y-border: rgba(129,140,248,0.30);
    --teal: #22d3ee; --teal-dim: rgba(34,211,238,0.12);
    --pink: #f472b6; --pink-dim: rgba(244,114,182,0.14);
    --white: #eef2ff; --bg: #0a0a18; --bg2: #101025; --bg3: #171734; --bg4: #222248;
    --muted: #5b5b8a; --border: rgba(199,210,254,0.09);
    --text: rgba(238,242,255,0.85); --dim: rgba(165,180,252,0.62);
    --nav-bg: rgba(10,10,24,0.9);
    --cover-glow1: rgba(129,140,248,0.14); --cover-glow2: rgba(244,114,182,0.10);
    --stars-opacity: 0.8;
  }
  /* Indigo Light */
  html[data-theme="indigo"][data-mode="light"] {
    --y: #6366f1; --y-dim: rgba(99,102,241,0.10); --y-border: rgba(99,102,241,0.28);
    --teal: #0891b2; --teal-dim: rgba(8,145,178,0.12);
    --pink: #db2777; --pink-dim: rgba(219,39,119,0.12);
    --white: #1e1b4b; --bg: #f5f5ff; --bg2: #eeeefc; --bg3: #e6e6fa; --bg4: #d8d8f3;
    --muted: #8e8ec0; --border: rgba(49,46,129,0.10);
    --text: rgba(30,27,75,0.86); --dim: rgba(55,48,107,0.72);
    --nav-bg: rgba(245,245,255,0.9);
    --cover-glow1: rgba(99,102,241,0.10); --cover-glow2: rgba(219,39,119,0.07);
    --stars-opacity: 0;
  }

  /* Ember Dark — Warm (Amber/Rosé auf Anthrazit) */
  html[data-theme="ember"][data-mode="dark"] {
    --y: #fb923c; --y-dim: rgba(251,146,60,0.10); --y-border: rgba(251,146,60,0.28);
    --teal: #fbbf24; --teal-dim: rgba(251,191,36,0.12);
    --pink: #f43f5e; --pink-dim: rgba(244,63,94,0.14);
    --white: #fff7ed; --bg: #140f0c; --bg2: #1d1510; --bg3: #271c15; --bg4: #3a2a1f;
    --muted: #8a6a52; --border: rgba(254,215,170,0.08);
    --text: rgba(255,247,237,0.85); --dim: rgba(253,186,116,0.6);
    --nav-bg: rgba(20,15,12,0.9);
    --cover-glow1: rgba(251,146,60,0.14); --cover-glow2: rgba(244,63,94,0.10);
    --stars-opacity: 0.5;
  }
  /* Ember Light */
  html[data-theme="ember"][data-mode="light"] {
    --y: #ea580c; --y-dim: rgba(234,88,12,0.10); --y-border: rgba(234,88,12,0.28);
    --teal: #d97706; --teal-dim: rgba(217,119,6,0.12);
    --pink: #e11d48; --pink-dim: rgba(225,29,72,0.12);
    --white: #431407; --bg: #fffaf5; --bg2: #fdf2e9; --bg3: #fbe8d8; --bg4: #f6d8c0;
    --muted: #a8775a; --border: rgba(124,45,18,0.10);
    --text: rgba(67,20,7,0.86); --dim: rgba(124,45,18,0.72);
    --nav-bg: rgba(255,250,245,0.9);
    --cover-glow1: rgba(234,88,12,0.10); --cover-glow2: rgba(225,29,72,0.07);
    --stars-opacity: 0;
  }

  /* Ocean Dark — Tiefsee (Sky/Teal) */
  html[data-theme="ocean"][data-mode="dark"] {
    --y: #38bdf8; --y-dim: rgba(56,189,248,0.10); --y-border: rgba(56,189,248,0.28);
    --teal: #2dd4bf; --teal-dim: rgba(45,212,191,0.12);
    --pink: #818cf8; --pink-dim: rgba(129,140,248,0.14);
    --white: #f0f9ff; --bg: #06121f; --bg2: #0a1b2e; --bg3: #0f243d; --bg4: #193553;
    --muted: #4a6d8a; --border: rgba(186,230,253,0.08);
    --text: rgba(240,249,255,0.85); --dim: rgba(125,211,252,0.6);
    --nav-bg: rgba(6,18,31,0.9);
    --cover-glow1: rgba(56,189,248,0.12); --cover-glow2: rgba(45,212,191,0.10);
    --stars-opacity: 0.7;
  }
  /* Ocean Light */
  html[data-theme="ocean"][data-mode="light"] {
    --y: #0284c7; --y-dim: rgba(2,132,199,0.10); --y-border: rgba(2,132,199,0.28);
    --teal: #0d9488; --teal-dim: rgba(13,148,136,0.12);
    --pink: #6366f1; --pink-dim: rgba(99,102,241,0.12);
    --white: #0c2a43; --bg: #f5fbff; --bg2: #e9f5fe; --bg3: #dceffd; --bg4: #c7e4fb;
    --muted: #6a92b0; --border: rgba(12,74,110,0.10);
    --text: rgba(12,42,67,0.86); --dim: rgba(15,76,117,0.72);
    --nav-bg: rgba(245,251,255,0.9);
    --cover-glow1: rgba(2,132,199,0.10); --cover-glow2: rgba(13,148,136,0.08);
    --stars-opacity: 0;
  }

  /* Mono Dark — Editorial Schwarz/Weiß */
  html[data-theme="mono"][data-mode="dark"] {
    --y: #fafafa; --y-dim: rgba(255,255,255,0.08); --y-border: rgba(255,255,255,0.25);
    --teal: #a3a3a3; --teal-dim: rgba(163,163,163,0.12);
    --pink: #d4d4d4; --pink-dim: rgba(212,212,212,0.12);
    --white: #fafafa; --bg: #0a0a0a; --bg2: #121212; --bg3: #1a1a1a; --bg4: #262626;
    --muted: #666; --border: rgba(255,255,255,0.09);
    --text: rgba(255,255,255,0.82); --dim: rgba(255,255,255,0.5);
    --nav-bg: rgba(10,10,10,0.9);
    --cover-glow1: rgba(255,255,255,0.05); --cover-glow2: rgba(255,255,255,0.03);
    --stars-opacity: 0;
  }
  /* Mono Light */
  html[data-theme="mono"][data-mode="light"] {
    --y: #171717; --y-dim: rgba(0,0,0,0.06); --y-border: rgba(0,0,0,0.22); --on-accent: #fff;
    --teal: #525252; --teal-dim: rgba(82,82,82,0.10);
    --pink: #737373; --pink-dim: rgba(115,115,115,0.10);
    --white: #0a0a0a; --bg: #ffffff; --bg2: #f7f7f7; --bg3: #f0f0f0; --bg4: #e4e4e4;
    --muted: #999; --border: rgba(0,0,0,0.10);
    --text: rgba(0,0,0,0.82); --dim: rgba(0,0,0,0.5);
    --nav-bg: rgba(255,255,255,0.9);
    --cover-glow1: rgba(0,0,0,0.04); --cover-glow2: rgba(0,0,0,0.02);
    --stars-opacity: 0;
  }

  /* ===== ewtos Studio — Baseline =====
     Eigenes Theme mit ewtos.com-Look: dunkler Space-Hero, überwiegend helle
     Sections, vereinzelt prominente dunkle Bänder. Baseline = ewtos-Palette. */
  html[data-theme^="studio"][data-mode="dark"] {
    --y: #f97316; --y-dim: rgba(249,115,22,0.12); --y-border: rgba(249,115,22,0.30);
    --teal: #06b6d4; --teal-dim: rgba(6,182,212,0.12);
    --pink: #8b5cf6; --pink-dim: rgba(139,92,246,0.14);
    --white: #f1f5f9; --bg: #070713; --bg2: #0d0d1e; --bg3: #13132a; --bg4: #20203c;
    /* #94a3b8 statt #64748b → 7.8:1 auf #070713 (WCAG AA; #64748b war 4.2:1) */
    --muted: #94a3b8; --border: rgba(255,255,255,0.08);
    --text: rgba(241,245,249,0.85); --dim: rgba(148,163,184,0.95);
    --nav-bg: rgba(7,7,19,0.9);
    --cover-glow1: rgba(234,88,12,0.16); --cover-glow2: rgba(124,58,237,0.13);
    --stars-opacity: 1;
    --accent-gradient: linear-gradient(90deg, #ea580c 0%, #f97316 50%, #fbbf24 100%);
    --cta-glow: rgba(249,115,22,0.3); --cta-glow-strong: rgba(249,115,22,0.5);
  }
  html[data-theme^="studio"][data-mode="light"] {
    /* #c2410c statt #ea580c → Kontrast 4.7:1 auf hellem BG (WCAG AA, Normaltext) */
    --y: #c2410c; --y-dim: rgba(194,65,12,0.10); --y-border: rgba(194,65,12,0.28);
    --teal: #0e7490; --teal-dim: rgba(14,116,144,0.12);
    --pink: #6d28d9; --pink-dim: rgba(109,40,217,0.12);
    --white: #0f172a; --bg: #f8fafc; --bg2: #f1f5f9; --bg3: #e9eef4; --bg4: #dde5ee;
    /* #475569 statt #64748b → 7.2:1 auf #f8fafc (#64748b war 4.55:1, grenzwertig) */
    --muted: #475569; --border: rgba(15,23,42,0.10);
    --text: rgba(15,23,42,0.88); --dim: rgba(51,65,85,0.85);
    --nav-bg: rgba(248,250,252,0.9);
    --cover-glow1: rgba(234,88,12,0.10); --cover-glow2: rgba(124,58,237,0.08);
    --stars-opacity: 0; --on-accent: #fff;
    --accent-gradient: linear-gradient(90deg, #9a3412 0%, #c2410c 50%, #ea580c 100%);
    --cta-glow: rgba(194,65,12,0.25); --cta-glow-strong: rgba(194,65,12,0.4);
  }

  /* ===== SECTION-BÄNDER (nur ewtos Studio) =====
     Setzt die Chrome-Variablen lokal auf der <section>, sodass alle Karten
     darin mitziehen.
     band-space  → immer dunkel (Hero, Brand-Anker)
     band-light  → immer hell
     band-dark   → dunkel im Dunkel-Modus, hell im Hell-Modus */
  html[data-theme^="studio"] .band-light,
  html[data-theme^="studio"][data-mode="light"] .band-dark {
    --bg:#f8fafc; --bg2:#f1f5f9; --bg3:#e9eef4; --bg4:#dde5ee;
    --border:rgba(15,23,42,0.10);
    --white:#0f172a; --text:rgba(15,23,42,0.88); --dim:rgba(51,65,85,0.85); --muted:#475569;
    --y:#c2410c; --y-dim:rgba(194,65,12,0.10); --y-border:rgba(194,65,12,0.28);
    --teal:#0e7490; --teal-dim:rgba(14,116,144,0.12);
    --pink:#6d28d9; --pink-dim:rgba(109,40,217,0.12);
    --green:#15803d; --orange:#d97706; --red:#dc2626;
    --green-dim:rgba(22,163,74,0.12); --orange-dim:rgba(217,119,6,0.12); --red-dim:rgba(220,38,38,0.12);
    --row-hover:rgba(0,0,0,0.025); --hover-soft:rgba(0,0,0,0.04); --border-strong:rgba(0,0,0,0.16);
    --cover-glow1:rgba(234,88,12,0.10); --cover-glow2:rgba(124,58,237,0.08);
    --stars-opacity:0; --on-accent:#fff;
    --accent-gradient: linear-gradient(90deg, #9a3412 0%, #c2410c 50%, #ea580c 100%);
    --cta-glow: rgba(194,65,12,0.25); --cta-glow-strong: rgba(194,65,12,0.4);
  }
  html[data-theme^="studio"] .band-space,
  html[data-theme^="studio"][data-mode="dark"] .band-dark {
    --bg:#070713; --bg2:#0d0d1e; --bg3:#13132a; --bg4:#20203c;
    --border:rgba(255,255,255,0.08);
    --white:#f1f5f9; --text:rgba(241,245,249,0.85); --dim:rgba(148,163,184,0.95); --muted:#94a3b8;
    --y:#f97316; --y-dim:rgba(249,115,22,0.12); --y-border:rgba(249,115,22,0.30);
    --teal:#06b6d4; --teal-dim:rgba(6,182,212,0.12);
    --pink:#8b5cf6; --pink-dim:rgba(139,92,246,0.14);
    --green:#22c55e; --orange:#f97316; --red:#ef4444;
    --green-dim:rgba(34,197,94,0.1); --orange-dim:rgba(249,115,22,0.1); --red-dim:rgba(239,68,68,0.1);
    --row-hover:rgba(255,255,255,0.02); --hover-soft:rgba(255,255,255,0.05); --border-strong:rgba(255,255,255,0.12);
    --cover-glow1:rgba(234,88,12,0.16); --cover-glow2:rgba(124,58,237,0.13);
    --stars-opacity:1; --on-accent:#000;
    --accent-gradient: linear-gradient(90deg, #ea580c 0%, #f97316 50%, #fbbf24 100%);
    --cta-glow: rgba(249,115,22,0.3); --cta-glow-strong: rgba(249,115,22,0.5);
  }
  /* Hero im Hell-Modus (Variante „hell-soft"): warmes Off-White mit weichem
     Glow statt Weltraum. Spezifitaet (0,3,1) schlaegt bewusst den modus-
     agnostischen band-space-Block darueber (0,2,1) — der bleibt unangetastet,
     damit der Dunkel-Modus exakt so bleibt wie er ist.
     Den Glow zeichnet die bestehende #cover-Regel aus --cover-glow1/2. */
  html[data-theme^="studio"][data-mode="light"] .band-space {
    --bg:#fdfbf8; --bg2:#f1f5f9; --bg3:#e9eef4; --bg4:#dde5ee;
    --border:rgba(15,23,42,0.10);
    --white:#0f172a; --text:rgba(15,23,42,0.88); --dim:rgba(51,65,85,0.85); --muted:#475569;
    --y:#c2410c; --y-dim:rgba(194,65,12,0.10); --y-border:rgba(194,65,12,0.28);
    --teal:#0e7490; --teal-dim:rgba(14,116,144,0.12);
    --pink:#6d28d9; --pink-dim:rgba(109,40,217,0.12);
    --green:#15803d; --orange:#d97706; --red:#dc2626;
    --green-dim:rgba(22,163,74,0.12); --orange-dim:rgba(217,119,6,0.12); --red-dim:rgba(220,38,38,0.12);
    --row-hover:rgba(0,0,0,0.025); --hover-soft:rgba(0,0,0,0.04); --border-strong:rgba(0,0,0,0.16);
    --cover-glow1:rgba(251,146,60,0.22); --cover-glow2:rgba(139,92,246,0.10);
    --stars-opacity:0; --on-accent:#fff;
    --accent-gradient: linear-gradient(90deg, #9a3412 0%, #c2410c 50%, #ea580c 100%);
    --cta-glow: rgba(194,65,12,0.25); --cta-glow-strong: rgba(194,65,12,0.4);
  }
  /* von body geerbtes color mit dem lokalen Band-Wert neu setzen,
     damit Überschriften (ohne eigene color-Regel) mitziehen */
  html[data-theme^="studio"] .band-space,
  html[data-theme^="studio"] .band-light,
  html[data-theme^="studio"] .band-dark { color:var(--white); }

  /* Band malt seinen (lokal übersteuerten) Hintergrund — sonst bleibt der
     dunkle body-BG stehen und band-light-Titel wären dunkel auf dunkel.
     die Vorlage löste das per Section-ID; hier generisch für alle Bänder. */
  html[data-theme^="studio"] .band-light,
  html[data-theme^="studio"] .band-dark { background:var(--bg); }

  /* Hell-Modus-Rhythmus: Im Dunkel-Modus wechseln sich helle und dunkle Baender
     ab und geben der Seite Takt. Im Hellen fielen bisher beide auf --bg
     (#f8fafc) zusammen — die Seite wurde flach. band-dark bekommt deshalb den
     getoenten Grund --bg2 (#f1f5f9). Die Alt-Regeln #warum/#ueber/#leistungen
     setzen per ID denselben Wert und bleiben dadurch automatisch konsistent. */
  html[data-theme^="studio"][data-mode="light"] .band-dark { background:var(--bg2); }

  /* Flaechen, die selbst --bg2/--bg3 sind, wuerden auf dem getoenten Grund
     verschwimmen (#e9eef4 auf #f1f5f9 ist praktisch unsichtbar) → auf Weiss
     heben, damit Karten abheben statt zu verschwinden. */
  html[data-theme^="studio"][data-mode="light"] .band-dark .usp-item,
  html[data-theme^="studio"][data-mode="light"] .band-dark .feature-card { background:#fff; }

  /* ===== GRADIENT-TEXT (nur Studio) =====
     ewtos-Signatur-Verlauf auf großen Display-Texten. Nur Large-Text
     (>=24px bzw. >=18.66px bold) → 3:1-Kontrast genügt; auf hellen Bändern
     endet der Verlauf bei #c2410c/#ea580c, bleibt also sichtbar. */
  html[data-theme^="studio"] #cover h1 em,
  html[data-theme^="studio"] .s-title em,
  html[data-theme^="studio"] .stat-num {
    background: var(--accent-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  /* ===== HIMMEL-FX (Sonne + Sternschnuppen, von sky.js befüllt) ===== */
  .sky-fx { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
    opacity:0; transition:opacity .6s ease; }
  html[data-theme^="studio"] #cover .sky-fx,
  html[data-theme^="studio"] #nischen .sky-fx,
  html[data-theme^="studio"] footer .sky-fx { opacity:var(--stars-opacity); }

  .sun { position:absolute; top:-130px; right:-70px; width:360px; height:360px; border-radius:50%;
    background:radial-gradient(circle,
      rgba(251,191,36,0.55) 0%, rgba(249,115,22,0.34) 34%,
      rgba(234,88,12,0.14) 60%, transparent 72%);
    filter:blur(8px); opacity:0; animation:sun-cycle 50s ease-in-out infinite; }
  @keyframes sun-cycle {
    0%, 100% { opacity:0; transform:translateY(50px) scale(0.8); }
    44%, 56% { opacity:0.9; transform:translateY(0) scale(1); }
  }
  .shooting-star { position:absolute; width:150px; height:2px; border-radius:2px; opacity:0;
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 55%, #fbbf24 100%);
    filter:drop-shadow(0 0 6px rgba(251,191,36,0.85)); }

  @media (prefers-reduced-motion: reduce) {
    .sun { animation:none; opacity:0; }
    .shooting-star { display:none; }
  }

  /* Inhalt über dem Himmel halten */
  #nischen .wrap { position:relative; z-index:1; }
  footer .footer-inner { position:relative; z-index:1; }

  /* ===== ewtos Studio Nova — Weltraum-Hero (nur im #cover) ===== */
  .nova { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; display:none; }
  html[data-theme="studio-nova"] #cover .nova { display:block; }
  /* Standard-Sternlayer im Nova-Hero ausblenden — Nova übernimmt */
  html[data-theme="studio-nova"] #cover > .stars,
  html[data-theme="studio-nova"] #cover > .sky-fx { display:none; }

  .nova-far, .nova-mid, .nova-glow, .nova-sunwash, .nova-warp, .nova-flash { position:absolute; inset:0; }

  .nova-grid {
    position:absolute; left:-25%; right:-25%; bottom:-8%; height:52%;
    background-image:
      linear-gradient(rgba(249,115,22,0.20) 1px, transparent 1px),
      linear-gradient(90deg, rgba(249,115,22,0.14) 1px, transparent 1px);
    background-size:56px 56px;
    transform:perspective(380px) rotateX(70deg); transform-origin:bottom center;
    -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 78%);
            mask-image:linear-gradient(to top, #000 0%, transparent 78%);
    opacity:0.5; animation:nova-grid 5.5s linear infinite;
  }
  @keyframes nova-grid { from{background-position:0 0;} to{background-position:0 56px;} }

  .nova-far {
    background-image:
      radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.7), transparent),
      radial-gradient(1px 1px at 90px 70px, rgba(255,255,255,0.5), transparent),
      radial-gradient(1px 1px at 150px 120px, rgba(255,255,255,0.6), transparent),
      radial-gradient(1px 1px at 60px 170px, rgba(255,255,255,0.45), transparent),
      radial-gradient(1px 1px at 190px 40px, rgba(255,255,255,0.55), transparent);
    background-size:220px 220px; background-repeat:repeat; opacity:0.7;
    transition:opacity .4s ease; will-change:background-position;
  }
  .nova-mid {
    background-image:
      radial-gradient(1.4px 1.4px at 30px 40px, #fff, transparent),
      radial-gradient(1.2px 1.2px at 120px 90px, rgba(255,255,255,0.85), transparent),
      radial-gradient(1.6px 1.6px at 70px 140px, #fbbf24, transparent),
      radial-gradient(1.2px 1.2px at 160px 30px, rgba(203,182,255,0.9), transparent),
      radial-gradient(1.3px 1.3px at 20px 110px, rgba(255,255,255,0.8), transparent);
    background-size:180px 180px; background-repeat:repeat; opacity:0.85;
    transition:opacity .4s ease; will-change:background-position;
  }
  .nova-glow { transition:opacity .4s ease; }
  .nova-star { position:absolute; border-radius:50%; background:#fff; }
  .nova-star.tw { animation:nova-tw var(--dur,4s) ease-in-out var(--del,0s) infinite; }
  @keyframes nova-tw { 0%,100%{opacity:var(--lo,0.3);transform:scale(0.85);} 50%{opacity:var(--hi,1);transform:scale(1.15);} }

  .nova-sun { position:absolute; inset:auto; width:380px; height:380px; border-radius:50%; filter:blur(12px); mix-blend-mode:screen; opacity:0; }
  .nova-sun-a { top:-120px; right:-60px;
    background:radial-gradient(circle, rgba(251,191,36,0.6) 0%, rgba(249,115,22,0.34) 33%, rgba(234,88,12,0.12) 60%, transparent 72%);
    animation:nova-danceA 24s ease-in-out infinite; }
  .nova-sun-b { bottom:-130px; left:-100px; width:340px; height:340px;
    background:radial-gradient(circle, rgba(251,146,60,0.5) 0%, rgba(234,88,12,0.3) 34%, rgba(124,58,237,0.14) 62%, transparent 74%);
    animation:nova-danceB 24s ease-in-out infinite; }
  @keyframes nova-danceA { 0%,100%{transform:translate(20px,0) scale(0.95);opacity:0.4;} 50%{transform:translate(-170px,120px) scale(1.12);opacity:0.95;} }
  @keyframes nova-danceB { 0%,100%{transform:translate(-10px,20px) scale(0.9);opacity:0.3;} 50%{transform:translate(180px,-150px) scale(1.08);opacity:0.85;} }
  .nova-sunwash { background:radial-gradient(ellipse 120% 90% at 50% 30%, rgba(251,191,36,0.12) 0%, rgba(249,115,22,0.05) 40%, transparent 68%); opacity:0; animation:nova-sunwash 24s ease-in-out infinite; }
  @keyframes nova-sunwash { 0%,100%{opacity:0;} 50%{opacity:1;} }

  /* Warp / Lichtgeschwindigkeit */
  .nova-warpstar {
    position:absolute; height:2px; width:2px; border-radius:2px; opacity:0.5;
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 55%, #fbbf24 100%);
    transform-origin:left center; transition:width .55s cubic-bezier(.2,.85,.25,1), opacity .4s ease; will-change:width;
  }
  .nova.warping .nova-warpstar { width:var(--len); opacity:1; }
  .nova.warping .nova-far, .nova.warping .nova-mid, .nova.warping .nova-glow { opacity:0; }
  .nova.jump .nova-warpstar { animation:nova-jump .6s cubic-bezier(.45,0,.85,.4) forwards; }
  @keyframes nova-jump { 0%{width:var(--len);opacity:1;} 100%{width:calc(var(--len) * 3);opacity:0;transform:rotate(var(--ang)) translateX(220px);} }
  .nova-flash { background:radial-gradient(circle at 50% 46%, rgba(255,255,255,0.95) 0%, rgba(251,191,36,0.35) 26%, transparent 58%); opacity:0; }
  .nova.jump .nova-flash { animation:nova-flash .6s ease-out; }
  @keyframes nova-flash { 0%{opacity:0;} 32%{opacity:0.9;} 100%{opacity:0;} }

  /* Warp-Button — nur im Nova-Hero sichtbar */
  .nova-cta { display:none; }
  html[data-theme="studio-nova"] #cover .nova-cta {
    display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:800; letter-spacing:0.3px;
    color:var(--on-accent); background:var(--accent-gradient); border:none; border-radius:11px; padding:14px 24px; cursor:pointer;
    box-shadow:0 10px 30px var(--cta-glow); transition:transform .2s ease, box-shadow .2s ease;
  }
  .nova-cta:hover { transform:translateY(-2px); box-shadow:0 16px 44px var(--cta-glow-strong); }
  .nova-cta:active { transform:translateY(0) scale(0.98); }
  .nova-cta svg { width:18px; height:18px; }

  @media (prefers-reduced-motion: reduce) {
    .nova-grid, .nova-far, .nova-mid, .nova-star.tw, .nova-sun, .nova-sunwash { animation:none; }
    .nova-sun { opacity:0.5; }
  }

  /* Nova-Hero: größere Headline (die generische .cover-h1-Regel greift im
     #cover nicht) + durchscheinende Karten mit Hover-Rand und Schimmer */
  html[data-theme="studio-nova"] #cover h1 {
    font-size:clamp(40px,5.2vw,68px); font-weight:900; line-height:1.04; letter-spacing:-2px;
  }
  html[data-theme="studio-nova"] #cover h1 em { display:block; }
  html[data-theme="studio-nova"] #cover h1.ob-hero em { display:inline; }

  html[data-theme="studio-nova"] #cover .stat-strip { overflow:visible; background:transparent; border:0; gap:14px; }
  html[data-theme="studio-nova"] #cover .stat-card {
    border:1px solid var(--y-border); border-radius:16px;
  }
  html[data-theme="studio-nova"] #cover .stat-num { font-size:22px; white-space:nowrap; }
  html[data-theme="studio-nova"] #cover .stat-card,
  html[data-theme="studio-nova"] #cover .cover-meta-box {
    background:rgba(13,13,30,0.62); backdrop-filter:blur(6px); position:relative;
    transition:transform .2s ease, box-shadow .25s ease, background-color .25s ease;
  }
  html[data-theme="studio-nova"] #cover .stat-card:hover,
  html[data-theme="studio-nova"] #cover .cover-meta-box:hover {
    transform:translateY(-3px); z-index:1;
    box-shadow:0 0 0 1px var(--y-border), 0 16px 46px rgba(249,115,22,0.22);
  }
  html[data-theme="studio-nova"] #cover .stat-card:hover { background:rgba(22,22,46,0.82); }

  /* ===== Hero „hell-soft" — die hart kodierten Dunkel-Layer im Hell-Modus =====
     Das komplette Weltraum-Motiv (Gitter, Sterne, Sonnen, Warp, Flash) haengt
     an EINEM Container — der wird ausgeblendet statt neun Layer einzeln
     umzufaerben. Uebrig bleibt der weiche Glow aus --cover-glow1/2. */
  html[data-theme="studio-nova"][data-mode="light"] #cover .nova { display:none; }

  /* Glassmorphism-Kacheln → solide helle Karten */
  html[data-theme="studio-nova"][data-mode="light"] #cover .stat-card,
  html[data-theme="studio-nova"][data-mode="light"] #cover .cover-meta-box {
    background:#fff; backdrop-filter:none; border-color:var(--border);
    box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.05);
  }
  html[data-theme="studio-nova"][data-mode="light"] #cover .stat-card:hover,
  html[data-theme="studio-nova"][data-mode="light"] #cover .cover-meta-box:hover {
    background:#fff;
    box-shadow:0 0 0 1px var(--y-border), 0 16px 46px rgba(194,65,12,0.14);
  }

  /* Hero-Chat: dunkle Glasflaechen → hell */
  html[data-theme="studio-nova"][data-mode="light"] #cover .hero-chat {
    background:rgba(255,255,255,0.78); border-color:rgba(15,23,42,0.10);
    box-shadow:0 32px 80px rgba(15,23,42,0.10);
  }
  html[data-theme="studio-nova"][data-mode="light"] #cover .hero-chat-bar,
  html[data-theme="studio-nova"][data-mode="light"] #cover .hero-chat-input {
    background:rgba(241,245,249,0.7); border-color:rgba(15,23,42,0.08);
  }
  html[data-theme="studio-nova"][data-mode="light"] #cover .hero-chat-field {
    background:rgba(15,23,42,0.04); border-color:rgba(15,23,42,0.10);
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  html[data-mode="dark"] { color-scheme: dark; }
  html[data-mode="light"] { color-scheme: light; }
  body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg); color:var(--white); line-height:1.6; overflow-x:hidden; }

  /* Fliesstext-Links. Ohne diese Regel fallen klassenlose <a> auf den
     UA-Default zurueck (#0000EE, besucht #551A8B → 1.8:1 auf dunklem Grund).
     Spezifitaet (0,1,1): .nav-menu a, .foot-links a und .legal a stehen
     weiter unten und gewinnen bei Gleichstand. */
  a:not([class]) { color:var(--y); }
  body, nav, .stat-card, .trend-card, .competitor, .nische, .tool-card, .fazit-box, .rtable, .cover-meta-box, footer, .comp-tag-item, .tool-tier, .badge {
    transition: background-color .35s ease, border-color .35s ease, color .35s ease;
  }

  /* NAV */
  nav {
    position:fixed; top:0; left:0; right:0; z-index:100; height:60px;
    display:flex; align-items:center; justify-content:space-between; padding:0 40px;
    background:var(--nav-bg); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
  }
  .nav-brand { font-size:15px; font-weight:900; }
  .nav-brand span { color:var(--y); }
  .nav-links { display:flex; gap:2px; }
  .nav-link {
    font-size:12px; color:var(--dim); padding:5px 12px; border-radius:5px;
    text-decoration:none; transition:all 0.15s; border:none; background:none; cursor:pointer;
  }
  .nav-link:hover { color:var(--white); background:var(--hover-soft); }
  .nav-date { font-size:11px; color:var(--muted); }

  /* NAV DROPDOWNS */
  .nav-links { align-items:center; }
  .nav-links .nav-item { position:relative; display:flex; align-items:center; align-self:stretch; }
  .nav-trigger { display:inline-flex; align-items:center; }
  .nav-caret { width:9px; height:9px; margin-left:5px; opacity:0.6; transition:transform 0.15s, opacity 0.15s; }
  .nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform:rotate(180deg); opacity:1; }
  .nav-menu {
    position:absolute; top:100%; left:0; min-width:238px;
    background:var(--bg2); border:1px solid var(--border-strong); border-radius:12px;
    box-shadow:0 18px 44px rgba(0,0,0,0.42); padding:8px;
    display:flex; flex-direction:column; gap:2px;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; z-index:120;
  }
  .nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { opacity:1; visibility:visible; transform:translateY(0); }
  .nav-menu a {
    display:flex; flex-direction:column; gap:1px; padding:9px 12px; border-radius:8px;
    text-decoration:none; color:var(--white); font-size:13px; font-weight:600; line-height:1.35; transition:background 0.15s;
  }
  .nav-menu a:hover { background:var(--hover-soft); text-decoration:none; }
  .nav-menu a small { font-size:11px; font-weight:400; color:var(--dim); }
  /* Werkzeuge, die noch nicht auf der Hauptdomain liegen: gleicher Aufbau, kein Ziel. */
  .nav-menu span.is-soon {
    display:flex; flex-direction:column; gap:1px; padding:9px 12px; border-radius:8px;
    color:var(--muted); font-size:13px; font-weight:600; line-height:1.35; cursor:default;
  }
  .nav-menu span.is-soon small { font-size:11px; font-weight:400; color:var(--muted); }
  .nav-menu-sep { height:1px; background:var(--border); margin:6px 6px; }

  /* LAYOUT */
  /* Der seitliche Rand gehoert an .wrap, nicht an die Container. hero,
     section.blk und footer.band-dark setzen ihr horizontales Padding auf 0
     und hatten den Inhalt dadurch an den Bildschirmrand gedrueckt - .wrap war
     der fehlende zweite Verteidiger. max-width 1140 statt 1100, damit der
     Inhalt hinter dem Padding weiterhin 1100px breit ist. */
  section { padding:88px 0; }
  .wrap { max-width:1140px; margin:0 auto; padding-left:20px; padding-right:20px; }
  .s-chip { font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--y); margin-bottom:10px; display:block; }
  .s-title { font-size:clamp(24px,3.5vw,42px); font-weight:900; line-height:1.1; letter-spacing:-0.5px; margin-bottom:12px; }
  .s-title em { font-style:normal; color:var(--y); }
  .s-sub { font-size:15px; color:var(--dim); max-width:600px; line-height:1.75; }

  /* COVER */
  #cover {
    position:relative; overflow:hidden;
    min-height:100vh; display:flex; align-items:center; padding:120px 0 80px;
    background:radial-gradient(ellipse at 70% 30%, var(--cover-glow1) 0%, transparent 55%),
               radial-gradient(ellipse at 10% 80%, var(--cover-glow2) 0%, transparent 50%), var(--bg);
    border-bottom:1px solid var(--border);
    transition:background-color .35s ease;
  }
  #cover .wrap { position:relative; z-index:1; }

  /* STARFIELD — nur in Space-Themes sichtbar (über --stars-opacity) */
  .stars {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    opacity:var(--stars-opacity); transition:opacity .5s ease;
    background-image:
      radial-gradient(1px 1px at 20px 30px, #fff, transparent),
      radial-gradient(1px 1px at 80px 90px, rgba(255,255,255,0.7), transparent),
      radial-gradient(1.5px 1.5px at 130px 50px, #fff, transparent),
      radial-gradient(1px 1px at 170px 120px, rgba(255,255,255,0.6), transparent),
      radial-gradient(1px 1px at 50px 160px, rgba(255,255,255,0.85), transparent),
      radial-gradient(1.5px 1.5px at 110px 180px, rgba(255,255,255,0.75), transparent);
    background-size:200px 200px; background-repeat:repeat;
    animation:drift 140s linear infinite;
  }
  @keyframes drift { from{background-position:0 0;} to{background-position:200px 400px;} }
  @media(prefers-reduced-motion:reduce){ .stars{animation:none;} }
  .cover-grid { display:grid; grid-template-columns:1fr 340px; gap:60px; align-items:center; }
  .cover-pill {
    display:inline-flex; align-items:center; gap:8px; margin-bottom:28px;
    background:var(--y-dim); border:1px solid var(--y-border); color:var(--y);
    font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
    padding:6px 14px; border-radius:999px;
  }
  .cover-pill::before { content:''; width:6px; height:6px; background:var(--y); border-radius:50%; animation:blink 2s infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
  .cover h1 { font-size:clamp(26px,5vw,54px); font-weight:900; line-height:1.05; letter-spacing:-2px; margin-bottom:28px; }
  .cover h1 em { font-style:normal; color:var(--y); display:block; }
  .cover-desc { font-size:18px; color:var(--text); line-height:1.75; margin-bottom:36px; }
  .cover-tags { display:flex; flex-wrap:wrap; gap:8px; }
  .cover-tag { font-size:11px; padding:5px 12px; border-radius:999px; background:var(--hover-soft); border:1px solid var(--border-strong); color:var(--text); }

  /* STAT CARD STRIP */
  .stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:22px; overflow:hidden; }
  .stat-card { background:var(--bg2); padding:28px 24px; }
  .stat-num { font-size:30px; font-weight:900; color:var(--y); line-height:1; margin-bottom:6px; }
  .stat-label { font-size:12px; color:var(--dim); line-height:1.4; }

  /* COVER SIDEBAR */
  .cover-meta-box { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:28px; }
  .meta-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; }
  .meta-row:last-child { border-bottom:none; }
  .meta-row span:first-child { color:var(--dim); }
  .meta-row span:last-child { font-weight:600; color:var(--white); }

  /* TREND CARDS */
  #trends { background:var(--bg2); border-top:1px solid var(--border); }
  .trends-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
  .trend-card {
    background:var(--bg3); border:1px solid var(--border); border-radius:12px;
    padding:22px 20px; transition:all 0.15s; position:relative; overflow:hidden;
  }
  .trend-card:hover { border-color:var(--y-border); }
  .trend-card::after {
    content:''; position:absolute; top:0; left:0; right:0; height:2px; border-radius:2px 2px 0 0;
  }
  .trend-card.hot::after { background:var(--y); }
  .trend-card.rising::after { background:var(--orange); }
  .trend-card.niche::after { background:var(--teal); }
  .trend-icon { font-size:24px; margin-bottom:10px; display:block; }
  .trend-badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
  .badge {
    font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    padding:3px 8px; border-radius:3px;
  }
  .badge-y { background:var(--y-dim); color:var(--y); border:1px solid var(--y-border); }
  .badge-o { background:var(--orange-dim); color:var(--orange); }
  .badge-t { background:var(--teal-dim); color:var(--teal); }
  .badge-p { background:var(--pink-dim); color:var(--pink); }
  .badge-g { background:var(--green-dim); color:var(--green); }
  .trend-card h3 { font-size:15px; font-weight:800; margin-bottom:6px; }
  .trend-card p { font-size:13px; color:var(--dim); line-height:1.55; }
  .trend-metrics { display:flex; gap:16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
  .trend-metric { font-size:11px; color:var(--dim); }
  .trend-metric strong { display:block; font-size:14px; font-weight:800; color:var(--white); }

  /* WETTBEWERB */
  #wettbewerb { background:var(--bg); }
  .competitors { display:flex; flex-direction:column; gap:20px; }
  .competitor {
    background:var(--bg2); border:1px solid var(--border); border-radius:14px;
    overflow:hidden; transition:border-color 0.15s;
  }
  .competitor:hover { border-color:var(--border-strong); }
  .comp-header {
    display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center;
    padding:24px 28px; border-bottom:1px solid var(--border);
  }
  .comp-rank {
    width:40px; height:40px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:14px; font-weight:900; color:var(--on-accent); flex-shrink:0;
  }
  .comp-rank.enterprise { background:var(--y); }
  .comp-rank.mid { background:var(--teal); }
  .comp-rank.weak { background:var(--muted); }
  .comp-name { font-size:18px; font-weight:900; }
  .comp-url { font-size:12px; color:var(--muted); margin-top:2px; }
  .comp-segment { text-align:right; }
  .comp-segment-tag { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
  .comp-body { padding:24px 28px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; }
  .comp-section h4 { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
  .comp-tags { display:flex; flex-wrap:wrap; gap:6px; }
  .comp-tag-item { font-size:12px; background:var(--bg4); border:1px solid var(--border); padding:4px 10px; border-radius:4px; color:var(--dim); }
  .comp-stars { display:flex; gap:3px; margin-bottom:8px; }
  .star { font-size:14px; color:var(--muted); }
  .star.on { color:var(--y); }
  .comp-quality-label { font-size:12px; color:var(--dim); }
  .comp-list { list-style:none; display:flex; flex-direction:column; gap:6px; }
  .comp-list li { font-size:13px; color:var(--dim); display:flex; gap:8px; }
  .comp-list li::before { color:var(--green); flex-shrink:0; }
  .comp-list.weaknesses li::before { color:var(--red); }
  .comp-price-tag {
    display:inline-block; font-size:13px; font-weight:700; margin-top:4px;
    padding:5px 12px; border-radius:5px;
  }
  .price-none { background:var(--red-dim); color:var(--red); }
  .price-low { background:var(--green-dim); color:var(--green); }
  .price-mid { background:var(--orange-dim); color:var(--orange); }

  /* NISCHEN */
  #nischen { background:var(--bg2); border-top:1px solid var(--border); }
  .nischen-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }
  .nische {
    background:var(--bg3); border:1px solid var(--border); border-radius:14px; padding:28px;
    transition:all 0.15s;
  }
  .nische:hover { border-color:var(--y-border); transform:translateY(-2px); }
  .nische-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
  .nische-icon { font-size:28px; }
  .opp-score {
    display:flex; flex-direction:column; align-items:flex-end; gap:3px;
  }
  .opp-label { font-size:10px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }
  .opp-dots { display:flex; gap:3px; }
  .opp-dot { width:10px; height:10px; border-radius:50%; background:var(--bg4); }
  .opp-dot.on { background:var(--y); }
  .nische h3 { font-size:17px; font-weight:800; margin-bottom:8px; }
  .nische p { font-size:13px; color:var(--dim); line-height:1.6; margin-bottom:16px; }
  .nische-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border-top:1px solid var(--border); padding-top:16px; }
  .nische-stat-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; }
  .nische-stat-val { font-size:14px; font-weight:800; }

  /* TOOLS */
  #tools { background:var(--bg); }
  .tools-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
  .tool-card {
    background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:24px;
  }
  .tool-logo { font-size:22px; margin-bottom:10px; }
  .tool-card h3 { font-size:15px; font-weight:800; margin-bottom:4px; }
  .tool-card .tool-desc { font-size:12px; color:var(--dim); margin-bottom:14px; line-height:1.5; }
  .tool-tiers { display:flex; flex-direction:column; gap:7px; }
  .tool-tier { display:flex; justify-content:space-between; font-size:12px; padding:6px 10px; background:var(--bg4); border-radius:5px; }
  .tool-tier span:first-child { color:var(--dim); }
  .tool-tier span:last-child { font-weight:700; color:var(--white); }
  .tool-tier.highlight span:last-child { color:var(--y); }

  /* ROI TABLE */
  #roi-table { background:var(--bg2); border-top:1px solid var(--border); }
  .rtable { width:100%; border-collapse:collapse; background:var(--bg3); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
  .rtable th { background:var(--y-dim); padding:13px 16px; text-align:left; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--y); border-bottom:1px solid var(--border); }
  .rtable td { padding:13px 16px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
  .rtable tr:last-child td { border-bottom:none; }
  .rtable tr:hover td { background:var(--row-hover); }
  .diff-bar { display:flex; align-items:center; gap:8px; }
  .diff-dots { display:flex; gap:3px; }
  .diff-dot { width:8px; height:8px; border-radius:50%; background:var(--bg4); }
  .diff-dot.on { }
  .diff-low .diff-dot.on { background:var(--green); }
  .diff-mid .diff-dot.on { background:var(--orange); }
  .diff-high .diff-dot.on { background:var(--red); }
  .roi-pill { display:inline-block; padding:3px 10px; border-radius:3px; font-size:11px; font-weight:700; }
  .roi-high { background:var(--green-dim); color:var(--green); }
  .roi-mid { background:var(--orange-dim); color:var(--orange); }
  .roi-low { background:var(--red-dim); color:var(--red); }

  /* FAZIT */
  #fazit { background:var(--bg); }
  .fazit-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .fazit-box { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:28px; }
  .fazit-box h3 { font-size:14px; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
  .fazit-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
  .fazit-list li { font-size:13px; color:var(--dim); display:flex; gap:10px; line-height:1.5; }
  .fazit-list li::before { flex-shrink:0; font-size:12px; margin-top:1px; }
  .fazit-list.do li::before { content:'✓'; color:var(--green); }
  .fazit-list.dont li::before { content:'✗'; color:var(--red); }
  .fazit-list.watch li::before { content:'→'; color:var(--y); }
  .highlight-box {
    background:var(--y); color:var(--on-accent); border-radius:12px; padding:28px 32px; margin-top:24px;
    display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  }
  .highlight-box h3 { font-size:18px; font-weight:900; margin-bottom:6px; }
  .highlight-box p { font-size:14px; opacity:0.7; line-height:1.6; }
  .highlight-box .big { font-size:42px; font-weight:900; line-height:1; white-space:nowrap; }

  /* FOOTER */
  footer { background:var(--bg2); border-top:1px solid var(--border); padding:24px 40px; text-align:center; font-size:12px; color:var(--muted); }

  /* ===== SETTINGS / THEME-SWITCHER ===== */
  .fab {
    position:fixed; bottom:24px; right:24px; z-index:300;
    width:54px; height:54px; border-radius:50%;
    background:var(--y); color:var(--on-accent); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 34px rgba(0,0,0,0.45);
    transition:transform .25s ease, background-color .35s ease;
  }
  .fab:hover { transform:scale(1.08) rotate(35deg); }
  .fab:active { transform:scale(0.96); }
  .fab svg { width:24px; height:24px; }

  .settings {
    position:fixed; bottom:90px; right:24px; z-index:300;
    width:344px; max-width:calc(100vw - 32px);
    background:var(--bg2); border:1px solid var(--border); border-radius:18px; padding:22px;
    box-shadow:0 28px 70px rgba(0,0,0,0.5);
    opacity:0; visibility:hidden; transform:translateY(14px) scale(0.97); transform-origin:bottom right;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .settings.open { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
  .settings-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .settings-head h3 { font-size:15px; font-weight:800; letter-spacing:-0.2px; color:var(--white); }
  .settings-close { background:none; border:none; color:var(--dim); cursor:pointer; font-size:22px; line-height:1; padding:2px 6px; border-radius:6px; }
  .settings-close:hover { background:var(--hover-soft); color:var(--white); }
  .settings-label { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; display:block; }

  .mode-toggle { display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--bg4); border-radius:11px; padding:4px; margin-bottom:22px; }
  .mode-btn { border:none; background:none; color:var(--dim); font-size:13px; font-weight:600; padding:10px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; transition:all .15s; }
  .mode-btn svg { width:15px; height:15px; }
  .mode-btn.active { background:var(--bg2); color:var(--white); box-shadow:0 2px 8px rgba(0,0,0,0.18); }

  .theme-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .theme-btn { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:11px; border:1px solid var(--border); background:var(--bg3); cursor:pointer; transition:border-color .15s, background-color .15s; }
  .theme-btn:hover { border-color:var(--y-border); }
  .theme-btn.active { border-color:var(--y); background:var(--y-dim); }
  .theme-swatch { display:flex; flex-shrink:0; }
  .theme-swatch span { width:15px; height:15px; border-radius:50%; border:1.5px solid var(--bg3); }
  .theme-swatch span + span { margin-left:-6px; }
  .theme-name { font-size:12px; font-weight:700; color:var(--white); }

  @media(max-width:900px) {
    nav { padding:0 20px; }
    section { padding:72px 0; }
    .cover-grid,.comp-body,.fazit-grid { grid-template-columns:1fr; }
    .stat-strip { grid-template-columns:repeat(2,1fr); }
    #cover { padding:100px 0 72px; }
  }

/* MODE-TOGGLE (Header-Icon, ersetzt den Theme-Switcher) */
.mode-icon-btn {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--dim); transition: all 0.15s; flex-shrink: 0;
}
.mode-icon-btn:hover { color: var(--y); border-color: var(--y-border); }
.mode-icon-btn svg { width: 16px; height: 16px; }

/* ===== ewtos-SEKTIONEN — Band-Rhythmus =====
   Wechsel weiß (--bg) / gräulich (--bg2); #pakete ist der dunkle
   Akzent-Abschnitt in der Mitte (wie #nischen in der Vorlage). */
#leistungen { background:var(--bg2); border-top:1px solid var(--border); }
#pakete     { background:var(--bg2); border-top:1px solid var(--border); }
#pakete .wrap { position:relative; z-index:1; }
#ablauf     { background:var(--bg); }
#warum      { background:var(--bg2); border-top:1px solid var(--border); }
#ueber      { background:var(--bg); }
#faq        { background:var(--bg2); border-top:1px solid var(--border); }
#kontakt    { background:var(--bg); }
html[data-theme^="studio"] #pakete .sky-fx { opacity:var(--stars-opacity); }

/* ===== V2: CHAT-PREVIEW (Hero) & DEMO-CHATBOT ===== */
.hero-chat { background:rgba(13,13,30,0.36); border:1px solid rgba(255,255,255,0.10); border-radius:20px; overflow:hidden; box-shadow:0 32px 80px rgba(0,0,0,0.4); }
.hero-chat-bar { background:rgba(19,19,42,0.5); padding:14px 18px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,0.08); }
.chat-avatar { width:32px; height:32px; background:var(--y); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; color:var(--on-accent,#000); }
.chat-bar-info { flex:1; }
.chat-bar-name { font-size:13px; font-weight:700; }
.chat-bar-status { font-size:11px; color:var(--green); display:flex; align-items:center; gap:4px; }
.chat-bar-status::before { content:''; width:6px; height:6px; background:var(--green); border-radius:50%; display:inline-block; }
.hero-chat-msgs { position:relative; overflow:hidden; min-height:240px; }
.hero-chat-track { position:absolute; inset:0; padding:20px 18px; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; overflow:hidden; }
.msg { display:flex; gap:8px; align-items:flex-end; }
.msg.user { flex-direction:row-reverse; }
.msg-bubble { max-width:78%; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.5; }
.msg-bubble.bot { background:var(--bg3); color:var(--text); border-bottom-left-radius:4px; }
.msg-bubble.user { background:var(--y); color:var(--on-accent,#000); font-weight:500; border-bottom-right-radius:4px; }
.msg-av { width:26px; height:26px; border-radius:50%; background:var(--y); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; color:var(--on-accent,#000); flex-shrink:0; }
.msg-av.user-av { background:var(--bg4); color:var(--dim); font-size:9px; }
.typing { display:flex; gap:4px; align-items:center; padding:10px 14px; background:var(--bg3); border-radius:14px; border-bottom-left-radius:4px; width:fit-content; }
.typing span { width:6px; height:6px; background:var(--muted); border-radius:50%; animation:dot 1.2s infinite; }
.typing span:nth-child(2) { animation-delay:0.2s; }
.typing span:nth-child(3) { animation-delay:0.4s; }
@keyframes dot { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.msg-tool { display:flex; align-items:center; gap:7px; margin-left:34px; font-size:11px; color:var(--muted); }
.msg-tool svg { width:13px; height:13px; flex-shrink:0; opacity:0.85; }
.msg-tool code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; color:var(--dim); }
.hero-person { display:flex; align-items:center; gap:12px; margin-top:16px; padding:12px 16px; background:var(--bg2); border:1px solid var(--border); border-radius:16px; }
.hero-person-av { width:44px; height:44px; border-radius:50%; background:var(--bg4); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--y); overflow:hidden; flex-shrink:0; }
.hero-person-av img { width:100%; height:100%; object-fit:cover; }
.hero-person-name { font-size:13px; font-weight:700; }
.hero-person-sub { font-size:11.5px; color:var(--dim); }

#cover .cover-grid { align-items:stretch; }
#cover .cover-grid > div:last-child { display:flex; flex-direction:column; min-height:0; }
#cover .cover-grid > div:last-child .hero-chat { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
#cover .cover-grid > div:last-child .hero-chat-msgs { flex:1 1 auto; min-height:0; }
/* Unter 900px wird .cover-grid einspaltig. Die rechte Spalte hat dann nichts
   mehr, woran sie sich strecken koennte - flex:1 1 auto mit min-height:0 laesst
   den Nachrichtenbereich auf 0 zusammenfallen und vom Chat-Fenster bleiben nur
   Kopf- und Eingabezeile. Hier bekommt er wieder eine eigene Hoehe. */
@media (max-width:900px) {
  #cover .cover-grid > div:last-child .hero-chat-msgs { flex:0 0 auto; height:min(58vh,400px); }
}

.hero-chat-input { display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid rgba(255,255,255,0.08); background:rgba(19,19,42,0.5); }
.hero-chat-field { flex:1; font-size:13px; color:var(--muted); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); border-radius:999px; padding:9px 14px; }
.hero-chat-send { width:34px; height:34px; flex-shrink:0; border-radius:11px; background:var(--y); color:var(--on-accent,#000); display:flex; align-items:center; justify-content:center; }
.hero-chat-send svg { width:16px; height:16px; }

#demo { background:var(--bg); }
.demo-layout { display:grid; grid-template-columns:340px 1fr; gap:44px; align-items:start; }
.demo-info h3 { font-size:18px; font-weight:700; margin-bottom:8px; }
.demo-info p { font-size:14px; color:var(--dim); line-height:1.65; margin-bottom:20px; }
.demo-use-cases { display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.use-case-btn { background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:12px 16px; cursor:pointer; text-align:left; transition:all 0.15s; color:var(--white); font-size:13px; font-weight:500; }
.use-case-btn:hover, .use-case-btn.active { border-color:var(--y-border); background:var(--y-dim); color:var(--y); }
.use-case-btn .uc-icon { margin-right:8px; }
.demo-disclaimer { font-size:11px; color:var(--muted); line-height:1.5; padding:10px 14px; background:var(--bg2); border-radius:8px; border:1px solid var(--border); }
.chatbot-window { background:var(--bg2); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,0.25); display:flex; flex-direction:column; height:540px; }
.chat-header { background:var(--bg3); padding:16px 20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.chat-header-av { width:36px; height:36px; background:var(--y); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:900; color:var(--on-accent,#000); }
.chat-header-name { font-size:14px; font-weight:700; }
.chat-header-sub { font-size:12px; color:var(--green); display:flex; align-items:center; gap:5px; }
.chat-header-sub::before { content:''; width:6px; height:6px; background:var(--green); border-radius:50%; display:inline-block; }
.chat-messages { flex:1; padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.chat-messages::-webkit-scrollbar { width:4px; }
.chat-messages::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:2px; }
.chat-input-area { padding:16px 20px; border-top:1px solid var(--border); background:var(--bg3); flex-shrink:0; }
.chat-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.chat-sugg { font-size:12px; padding:6px 12px; border-radius:20px; background:var(--bg4); border:1px solid var(--border); color:var(--dim); cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.chat-sugg:hover { border-color:var(--y-border); color:var(--y); background:var(--y-dim); }
.chat-input-row { display:flex; gap:8px; }
.chat-input-row input { flex:1; background:var(--bg4); border:1px solid var(--border); border-radius:8px; padding:10px 14px; font-size:14px; color:var(--white); outline:none; transition:border-color 0.15s; font-family:inherit; }
.chat-input-row input:focus { border-color:var(--y-border); }
.chat-input-row input::placeholder { color:var(--muted); }
.chat-send { width:40px; height:40px; background:var(--y); border:none; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--on-accent,#000); transition:opacity 0.15s; flex-shrink:0; }
.chat-send:hover { opacity:0.85; }

/* ===== V2: TIMELINE & SKILLS (Über mich) ===== */
.timeline { display:flex; flex-direction:column; gap:0; margin-top:8px; }
.tl-item { display:grid; grid-template-columns:86px 16px 1fr; gap:14px; }
.tl-year { font-size:12px; font-weight:700; color:var(--y); text-align:right; padding-top:2px; }
.tl-line { position:relative; display:flex; justify-content:center; }
.tl-line::before { content:''; position:absolute; top:6px; bottom:-6px; width:2px; background:var(--border); }
.tl-item:last-child .tl-line::before { bottom:auto; height:12px; }
.tl-dot { width:10px; height:10px; border-radius:50%; background:var(--y); position:relative; z-index:1; margin-top:4px; box-shadow:0 0 0 3px var(--y-dim); }
.tl-body { padding-bottom:26px; }
.tl-title { font-size:14px; font-weight:800; }
.tl-text { font-size:13px; color:var(--dim); line-height:1.6; margin-top:3px; }
.skill-groups { display:flex; flex-direction:column; gap:18px; }
.skill-group-label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.skill-tags { display:flex; flex-wrap:wrap; gap:6px; }
.skill-tags span { font-size:12px; background:var(--bg4); border:1px solid var(--border); padding:4px 10px; border-radius:4px; color:var(--dim); transition:all 0.15s; }
.skill-tags span:hover { border-color:var(--y-border); color:var(--y); }

@media (max-width: 900px) {
  .demo-layout { grid-template-columns:1fr; }
  .chatbot-window { height:480px; }
}

/* ===== V2: SPLIT-LAYOUT (2x2-Karten + Wireframe-Art) ===== */
.split-art { display:grid; grid-template-columns:1.75fr 1fr; gap:48px; align-items:center; }
.grid-2x2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.section-art { display:flex; justify-content:center; align-items:center; color:var(--white); }
.section-art svg { width:100%; max-width:340px; height:auto; opacity:0.85; }
.section-art .art-accent { color:var(--y); }
@media (max-width: 980px) {
  .split-art { grid-template-columns:1fr; }
  .grid-2x2 { grid-template-columns:1fr; }
  .section-art svg { max-width:240px; opacity:0.6; }
}

/* ===== V2: Art-Spalte hoeher + CTA unter dem Bild ===== */
.section-art { flex-direction:column; gap:30px; }
.section-art svg { max-width:430px; }
.section-art .nova-cta { text-decoration:none; }
@media (max-width: 980px) { .section-art svg { max-width:280px; } }

/* ===== V2 (animierte Variante): UFO & Shuttle ueber der Pakete-Sektion ===== */
#pakete { position:relative; overflow:hidden; }
.flyers { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; color:var(--white); opacity:0.85; }
.flyer-ufo { position:absolute; top:7%; left:6%; width:94px; opacity:0; animation:ufo-visit 19s ease-in-out infinite; }
@keyframes ufo-visit {
  0%, 34%  { opacity:0; transform:translate(0,-24px); }
  40%, 74% { opacity:0.9; }
  46%      { transform:translate(12px,8px); }
  56%      { transform:translate(-10px,-5px); }
  66%      { transform:translate(8px,5px); }
  80%,100% { opacity:0; transform:translate(50px,-40px); }
}
.flyer-shuttle { position:absolute; top:56%; left:0; width:112px; opacity:0; animation:shuttle-zip 27s linear infinite; animation-delay:6s; }
@keyframes shuttle-zip {
  0%, 60%  { opacity:0; transform:translateX(-160px) translateY(0) rotate(-7deg); }
  63%      { opacity:0.9; }
  77%      { opacity:0.9; }
  80%,100% { opacity:0; transform:translateX(110vw) translateY(-70px) rotate(-7deg); }
}
@media (prefers-reduced-motion: reduce) { .flyers { display:none; } }

/* ===== V2: Section-CTAs im Hero-Stil (Gradient + Glow) ===== */
.section-art .nova-cta {
  display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:800; letter-spacing:0.3px;
  color:var(--on-accent); background:var(--accent-gradient); border:none; border-radius:11px; padding:14px 24px; cursor:pointer;
  box-shadow:0 10px 30px var(--cta-glow); transition:transform .2s ease, box-shadow .2s ease;
}
.section-art .nova-cta svg { width:18px; height:18px; }

/* ===== V2: Wireframe-Astronaut (Über ewtos) ===== */
.portrait-helmet { position:relative; width:min(250px, 80%); aspect-ratio:240/268; margin:0 auto 24px; color:var(--white); }
.portrait-helmet svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.astro-figure { transform-box:fill-box; transform-origin:center; animation:astroFloat 6s ease-in-out infinite; }
.astro-orbit { transform-box:fill-box; transform-origin:center; animation:astroSpin 42s linear infinite; }
.astro-orbit-2 { animation-duration:64s; animation-direction:reverse; }
@keyframes astroFloat { 0%,100% { transform:translateY(-7px) rotate(-2deg); } 50% { transform:translateY(7px) rotate(2deg); } }
@keyframes astroSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .astro-figure, .astro-orbit { animation:none; }
}

/* ===== V2: LEAD-WIZARD (Kontakt) ===== */
.lead-grid { display:grid; grid-template-columns:1fr 1.45fr; gap:44px; align-items:start; }
.lead-card { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:30px; box-shadow:0 24px 64px rgba(0,0,0,0.18); }
.lead-step-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.lead-step-title { font-size:16px; font-weight:800; }
.lead-step-count { font-size:11px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }
.step-dots { display:flex; gap:6px; margin-bottom:20px; }
.step-dot { width:34px; height:4px; border-radius:2px; background:var(--bg4); transition:background 0.2s; }
.step-dot.active { background:var(--y); }
.step-dot.done { background:var(--green); }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--dim); margin-bottom:6px; }
.form-input { width:100%; background:var(--bg4); border:1px solid var(--border); border-radius:8px; padding:11px 14px; font-size:14px; color:var(--white); outline:none; transition:border-color 0.15s; resize:vertical; font-family:inherit; }
.form-input:focus { border-color:var(--y-border); }
.form-input option { background:var(--bg4); color:var(--white); }
.form-input::placeholder { color:var(--muted); }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice-btn { background:var(--bg4); border:1px solid var(--border); border-radius:10px; padding:13px 14px; cursor:pointer; text-align:left; transition:all 0.15s; color:var(--white); font-size:13px; font-weight:600; font-family:inherit; }
.choice-btn:hover { border-color:var(--y-border); }
.choice-btn.on { background:var(--y-dim); border-color:var(--y-border); color:var(--y); }
.tag-toggle { font-size:12px; font-weight:600; padding:6px 12px; border-radius:20px; background:var(--bg4); border:1px solid var(--border); color:var(--dim); cursor:pointer; transition:all 0.15s; font-family:inherit; }
.tag-toggle.on { background:var(--y-dim); border-color:var(--y-border); color:var(--y); }
.lead-nav { display:flex; justify-content:space-between; gap:12px; margin-top:22px; }
.lead-back { background:none; border:1px solid var(--border); color:var(--dim); border-radius:11px; padding:13px 20px; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.15s; font-family:inherit; }
.lead-back:hover { color:var(--white); border-color:var(--border-strong, rgba(255,255,255,0.2)); }
.lead-next { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:800; letter-spacing:0.3px; color:var(--on-accent); background:var(--accent-gradient); border:none; border-radius:11px; padding:13px 22px; cursor:pointer; box-shadow:0 10px 30px var(--cta-glow); transition:transform .2s ease, box-shadow .2s ease; font-family:inherit; }
.lead-next:hover { transform:translateY(-2px); box-shadow:0 16px 44px var(--cta-glow-strong); }
.lead-err { display:none; font-size:12px; color:var(--red); margin-top:10px; }
.lead-consent { display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--dim); line-height:1.6; margin-top:16px; }
.lead-consent input { margin-top:3px; accent-color:var(--y); }
.lead-success { text-align:center; padding:30px 10px; }
.lead-success .big-check { width:56px; height:56px; border-radius:50%; background:var(--green-dim); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 18px; border:1px solid var(--green); }
@media (max-width: 980px) { .lead-grid { grid-template-columns:1fr; } .choice-grid { grid-template-columns:1fr; } }

.contact-form { max-width:560px; margin:0 auto; text-align:left; }
.contact-form .lead-next { white-space:nowrap; }
.contact-form .lead-next svg { width:18px; height:18px; flex-shrink:0; }
.contact-field { margin-bottom:16px; }
.contact-alt { margin-top:18px; text-align:center; font-size:13px; color:var(--dim); }
.contact-alt a, .lead-consent a { color:var(--y); font-weight:600; }

/* ===== E-Mail-Gate (Double-Opt-in) — genutzt von ewtos_gate() ===== */
.gate-card { max-width:520px; margin:0 auto; background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:30px; box-shadow:0 24px 64px rgba(0,0,0,0.18); text-align:left; }
.gate-title { font-size:20px; font-weight:800; margin-bottom:6px; }
.gate-intro { font-size:14px; color:var(--dim); margin-bottom:20px; }
.gate-form { max-width:none; }
.gate-actions { margin-top:18px; }
.gate-actions .lead-next { width:100%; justify-content:center; }
.gate-note { margin-top:14px; font-size:12px; color:var(--muted); line-height:1.6; }

/* Das UDC-Plugin rendert sein eigenes Formular und bringt keine Karte mit — ohne das
   hier stand ein 1100px breites Eingabefeld quer ueber die Seite, waehrend der
   Theme-Platzhalter daneben in einer 520er-Karte sass. Gleiche Optik fuer beide,
   damit die Seite nicht davon abhaengt, ob ein Formular schon angelegt ist. */
.udc-frontend-form { max-width:520px; margin:0 auto; background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:30px; box-shadow:0 24px 64px rgba(0,0,0,0.18); text-align:left; }
.udc-frontend-form .wpcf7,
.udc-frontend-form .wpcf7-form { display:contents; }
.udc-frontend-form .wpcf7-form-control-wrap { display:block; }
.udc-frontend-form .lead-next { width:100%; justify-content:center; }

/* ===== V2: Wireframe-Buttons unter den Art-Bildern in hellen Sektionen ===== */
.band-light .section-art .nova-cta {
  background:none; color:var(--white); border:2px solid currentColor;
  box-shadow:none; border-radius:12px;
}
.band-light .section-art .nova-cta:hover {
  color:var(--y); border-color:var(--y); background:var(--y-dim);
  transform:translateY(-2px); box-shadow:none;
}

/* ===== V2: "Über mich" — dunkler Weltraum-Abschnitt, neues Layout ===== */
#ueber { background:var(--bg2); border-top:1px solid var(--border); position:relative; overflow:hidden; }
#ueber .wrap { position:relative; z-index:1; }
html[data-theme^="studio"] #ueber .sky-fx { opacity:var(--stars-opacity); }
.ueber-grid { display:grid; grid-template-columns:290px 1fr; gap:52px; align-items:center; margin-bottom:44px; }
.skills-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.skill-card { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:22px 20px; transition:border-color 0.15s; }
.skill-card:hover { border-color:var(--y-border); }
.skill-card h3 { font-size:16px; font-weight:800; margin:8px 0; }
.skill-card p { font-size:13.5px; color:var(--dim); line-height:1.7; }
@media (max-width: 980px) {
  .ueber-grid { grid-template-columns:1fr; gap:32px; }
  .ueber-grid .portrait-helmet { margin:0 auto; }
  .skills-row { grid-template-columns:1fr 1fr; }
}

/* ===== V2: LEISTUNGEN-REDESIGN — offene Liste mit Wireframe-Icons ===== */
.leistungen-list { display:grid; grid-template-columns:1fr 1fr; gap:0 60px; }
.leistung-row { display:grid; grid-template-columns:104px 1fr; gap:26px; align-items:start; padding:32px 0; border-bottom:1px solid var(--border); }
.leistungen-list .leistung-row:nth-last-child(-n+2) { border-bottom:none; }
.leistung-art { color:var(--white); opacity:0.9; }
.leistung-art svg { width:100%; height:auto; display:block; }
.leistung-row h3 { font-size:16px; font-weight:800; margin-bottom:8px; }
.leistung-row p { font-size:13.5px; color:var(--dim); line-height:1.7; margin-bottom:10px; }
.leistung-facts { font-size:12px; color:var(--y); font-weight:700; letter-spacing:0.2px; }
@media (max-width: 980px) {
  .leistungen-list { grid-template-columns:1fr; }
  .leistungen-list .leistung-row:nth-last-child(2) { border-bottom:1px solid var(--border); }
  .leistung-row { grid-template-columns:80px 1fr; gap:18px; padding:26px 0; }
}

/* V2: Skill-Karten-Titel in Akzentfarbe */
.skill-card .skill-group-label { color:var(--y); }

/* ===================================================================
   ewtos — geteilte Ergänzungen (Homepage + Office-Brain-Landing)
   @author Dario | ewtos.com
   =================================================================== */

/* Content über dem injizierten sky-fx-Layer halten */
.band-dark .wrap, footer .wrap { position:relative; z-index:1; }

/* Buttons außerhalb des Hero (nova-cta ist #cover-gebunden) */
.btn-cta {
  display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:800; letter-spacing:0.3px;
  color:var(--on-accent); background:var(--accent-gradient); border:none; border-radius:11px; padding:14px 24px;
  box-shadow:0 10px 30px var(--cta-glow); transition:transform .2s ease, box-shadow .2s ease;
  cursor:pointer; text-decoration:none;
}
.btn-cta:hover { transform:translateY(-2px); box-shadow:0 16px 44px var(--cta-glow-strong); text-decoration:none; }
.btn-cta svg { width:18px; height:18px; }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700;
  color:var(--text); background:none; border:1px solid var(--border-strong, rgba(255,255,255,0.14));
  border-radius:11px; padding:13px 22px; transition:color .15s, border-color .15s; cursor:pointer; text-decoration:none;
}
.btn-ghost:hover { color:var(--white); border-color:var(--y-border); text-decoration:none; }
/* Zurueckgenommen ueber Farbe statt opacity — letzteres multipliziert den
   Textwert durch und landet bei 2.5:1. --dim statt --muted, weil --muted
   seit dem Kontrast-Fix heller ist als --dim und disabled sonst kraeftiger
   wirkte als aktiv. */
.btn-ghost[aria-disabled="true"] { color:var(--dim); border-color:var(--border); cursor:default; }
.btn-ghost[aria-disabled="true"]:hover { color:var(--dim); border-color:var(--border); }
/* Gefuellte CTAs disabled: flach statt Verlauf, damit "nicht klickbar" liest
   ohne den Text mit opacity unter die Lesbarkeitsgrenze zu ziehen. */
.nova-cta[aria-disabled="true"], .btn-cta[aria-disabled="true"] {
  background:var(--bg3); color:var(--muted); box-shadow:none; cursor:default;
}
.nova-cta[aria-disabled="true"]:hover, .btn-cta[aria-disabled="true"]:hover {
  transform:none; box-shadow:none; color:var(--muted);
}

/* margin-top gehoert an die Aktionszeile, nicht an einzelne Buttons: der
   Abstand war vorher dreimal inline nachgeflickt (28px / 32px / gar nichts)
   und kam sonst nur aus .nova-cta{margin-top:6px} — was den Warp-Button in
   der Flex-Zeile zusaetzlich gegen den Ghost-Button daneben versetzt hat.
   Wert wie bei .cta-actions. */
.cover-actions { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:28px; }
.center-cta { margin-top:28px; display:flex; justify-content:center; }

/* Office-Brain-Showcase */
.ob-showcase { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:36px; }
.ob-bullets { list-style:none; display:grid; gap:12px; margin:0 0 28px; padding:0; }
.ob-bullets li { position:relative; padding-left:26px; font-size:14.5px; color:var(--dim); line-height:1.6; }
.ob-bullets li::before { content:''; position:absolute; left:0; top:8px; width:10px; height:10px; border-radius:3px; background:var(--accent-gradient); }
.ob-bullets strong { color:var(--white); font-weight:800; }
.ob-shot { border:1px solid var(--border-strong, rgba(255,255,255,0.12)); border-radius:16px; overflow:hidden; box-shadow:0 32px 80px rgba(0,0,0,0.4); }
.ob-shot img { width:100%; display:block; height:auto; }
@media (max-width: 980px) {
  .ob-showcase { grid-template-columns:1fr; gap:32px; }
  .ob-shot { order:-1; }
}

/* Footer */
footer.band-dark { padding:48px 0; text-align:center; }
.foot-links { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-bottom:14px; }
.foot-links a { font-size:13px; font-weight:600; color:var(--dim); text-decoration:none; }
.foot-links a:hover { color:var(--white); }
.foot-copy { font-size:12px; color:var(--muted); }

/* ===== Office-Brain-Landing: Komponenten ===== */
.landing-shot { max-width:920px; margin:44px auto 0; }

.feature-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:18px; margin-top:44px; }
.feature-card { position:relative; background:var(--bg3); border:1px solid var(--border); border-radius:14px; padding:26px 24px; overflow:hidden; transition:border-color .15s, transform .15s; }
.feature-card::after { content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--bar, var(--y)); }
.feature-card:hover { border-color:var(--y-border); transform:translateY(-2px); }
.feature-icon { font-size:26px; }
.feature-card h3 { margin:14px 0 8px; font-size:17px; font-weight:800; color:var(--white); }
.feature-card p { font-size:14px; color:var(--dim); line-height:1.6; }
a.feature-card { display:block; text-decoration:none; color:inherit; }
.feature-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* Nachsatz in einer Karte - abgesetzt, damit die Bedingung nicht mit der
   Beschreibung verschwimmt. */
.feature-card .card-note { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-size:13px; color:var(--muted); line-height:1.6; }
.feature-card .card-note strong { color:var(--dim); }
/* Angekuendigt, aber noch nicht auf der Hauptdomain: sichtbar, aber ohne Ziel.
   Bewusst kein display:none — die Werkzeuge sollen als kommend erkennbar sein. */
.feature-card.is-soon { opacity:.55; cursor:default; }
.feature-card.is-soon:hover { border-color:var(--border); transform:none; }
.feature-card.is-soon::after { background:var(--muted); }
.feature-card.is-soon h3 { color:var(--dim); }
/* Grid ohne Waise: Spaltenzahl = Teiler der Kachelzahl (4 → 1/2/4, nie 3+1) */
/* Zwei Karten fuellen die Reihe buendig, statt eine leere dritte Spalte zu lassen.
   Gleiche Bauart wie cols-3 und cols-4 darunter. */
.feature-grid.cols-2 { grid-template-columns:1fr; }
@media (min-width:760px) { .feature-grid.cols-2 { grid-template-columns:repeat(2,1fr); } }
.feature-grid.cols-3 { grid-template-columns:1fr; }
@media (min-width:760px) { .feature-grid.cols-3 { grid-template-columns:repeat(3,1fr); } }
.feature-grid.cols-4 { grid-template-columns:1fr; }
@media (min-width:560px) { .feature-grid.cols-4 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .feature-grid.cols-4 { grid-template-columns:repeat(4,1fr); } }
/* Ungerade Anzahl (z.B. 7): letzte Reihe zentriert statt links-gepinnt */
.feature-grid.center-last { display:flex; flex-wrap:wrap; justify-content:center; }
.feature-grid.center-last > .feature-card { flex:1 1 280px; max-width:340px; }

/* ===== Hero-Chat: Kachel-Launcher, Cursor, reiche Bubbles (Tabelle/Bild) ===== */
.hero-tiles { position:absolute; inset:0; padding:20px 18px; display:flex; flex-direction:column; justify-content:center; gap:10px; transition:opacity .45s ease; }
.hero-tiles .tiles-hint { font-size:11px; color:var(--dim); text-align:center; margin-bottom:4px; }
.tile-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hero-tile { display:flex; align-items:center; gap:10px; padding:14px; background:var(--bg3); border:1px solid var(--border); border-radius:13px; font-size:13px; font-weight:700; color:var(--white); transition:border-color .2s, transform .2s, background .2s; }
.hero-tile .ti { font-size:16px; line-height:1; }
.hero-tile.is-primary { border-color:var(--y-border); }
.hero-tile.is-hover { border-color:var(--y); background:var(--y-dim); transform:translateY(-1px); }
.hero-tiles.fade-out { opacity:0; }
.hero-cursor { position:absolute; z-index:5; width:20px; height:20px; left:50%; top:50%; opacity:0; pointer-events:none; transition:left .7s cubic-bezier(.5,0,.3,1), top .7s cubic-bezier(.5,0,.3,1), opacity .3s; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.hero-cursor.is-click { transform:scale(.82); }
.click-ring { position:absolute; z-index:4; width:14px; height:14px; border-radius:50%; border:2px solid var(--y); opacity:0; pointer-events:none; }
.click-ring.go { animation:ring .5s ease-out; }
@keyframes ring { 0% { transform:scale(.4); opacity:.8; } 100% { transform:scale(2.6); opacity:0; } }
.msg-rich { max-width:88%; padding:12px; border-radius:14px; border-bottom-left-radius:4px; background:var(--bg3); border:1px solid var(--border); }
.msg-rich-title { font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--dim); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.msg-rich-title b { color:var(--y); }
.msg-rich-title svg { width:13px; height:13px; flex-shrink:0; opacity:.85; }
table.msg-table { width:100%; border-collapse:collapse; font-size:12px; }
table.msg-table th, table.msg-table td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--border); }
table.msg-table th { color:var(--dim); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; }
table.msg-table td { color:var(--text); }
table.msg-table tr:last-child td { border-bottom:none; }
.msg-table .pill { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; }
.msg-table .pill.open { background:var(--y-dim); color:var(--y); border:1px solid var(--y-border); }
.msg-table .pill.plan { background:var(--teal-dim); color:var(--teal); border:1px solid rgba(6,182,212,0.3); }
.msg-image img { display:block; width:100%; border-radius:9px; }
.img-load { display:flex; align-items:center; gap:10px; padding:26px 16px; border-radius:9px; background:var(--bg2); border:1px dashed var(--border); color:var(--dim); font-size:12px; }
.img-spin { width:16px; height:16px; border-radius:50%; flex-shrink:0; border:2px solid rgba(255,255,255,0.15); border-top-color:var(--y); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-cursor { display:none; } .img-spin { animation:none; } }

.swap-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:14px; margin-top:44px; }
.swap-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:16px 18px; }
.swap-tool { font-size:15px; font-weight:800; color:var(--white); }
.swap-sep { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--y); }
.swap-old { font-size:14px; color:var(--dim); }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.step { background:var(--bg3); border:1px solid var(--border); border-radius:14px; padding:28px 24px; }
.step-num { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; font-size:15px; font-weight:900; color:var(--on-accent); background:var(--accent-gradient); margin-bottom:16px; }
.step h3 { font-size:16px; font-weight:800; color:var(--white); margin-bottom:8px; }
.step p { font-size:14px; color:var(--dim); }
/* Zwei Karten statt drei (Download-Abschnitt auf der Office-Brain-Seite):
   sonst bleibt die dritte Spalte leer und das Paar klebt links unter der
   zentrierten Ueberschrift. max-width haelt die Karten auf der Breite der
   Dreier-Reihe. Gleiche Loesung wie .usp-box--duo weiter unten.
   Muss oberhalb der 900px-Regel stehen, sonst gewinnt sie dort. */
.steps--duo { grid-template-columns:repeat(2,1fr); max-width:760px; margin-left:auto; margin-right:auto; }

.usp-box { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:44px; background:var(--border); border:1px solid var(--y-border); border-radius:14px; overflow:hidden; }
.usp-item { background:var(--bg2); padding:26px 22px; }
.usp-item strong { display:block; font-size:17px; font-weight:800; color:var(--y); margin-bottom:6px; }
.usp-item span { font-size:13px; color:var(--dim); }
/* Zwei laengere Texte statt vier kurzer Kacheln (Download-Hinweise auf der
   Office-Brain-Seite). Ohne das quetscht das Vierer-Raster den Fliesstext in
   204px schmale Spalten und laesst zwei Felder leer. */
.usp-box--duo { grid-template-columns:repeat(2,1fr); }
.usp-box--duo .usp-item span { font-size:14px; line-height:1.6; }
.usp-box--duo code { font-size:12px; }

.gallery { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px; }
.gallery figure { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--bg3); margin:0; }
.gallery img { width:100%; display:block; height:auto; }
.gallery figcaption { padding:12px 16px; font-size:13px; color:var(--dim); border-top:1px solid var(--border); }

.cta-actions { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }
.cta-note { margin-top:18px; font-size:13px; color:var(--muted); }

@media (max-width:900px) {
  .steps { grid-template-columns:1fr; }
  .usp-box { grid-template-columns:repeat(2,1fr); }
  .gallery { grid-template-columns:1fr; }
}
@media (max-width:480px) { .usp-box { grid-template-columns:1fr; } }

/* Legal-Seiten (Datenschutz) */
.legal { max-width:780px; margin:0 auto; padding:130px 24px 80px; }
.legal h1 { font-size:34px; font-weight:900; color:var(--white); letter-spacing:-0.02em; margin-bottom:10px; }
.legal h2 { font-size:20px; font-weight:800; color:var(--white); margin:34px 0 10px; }
.legal p, .legal li { font-size:15px; color:var(--dim); line-height:1.75; }
.legal ul { padding-left:22px; margin:8px 0; }
.legal a { color:var(--y); }
.legal .stand { font-size:13px; color:var(--muted); margin-bottom:24px; }
.legal code { background:var(--bg3); padding:1px 6px; border-radius:4px; font-size:13px; }

/* Legal-Seiten — Ergaenzungen fuer Sicherheit + lange Datenschutzerklaerung */
.legal ol { padding-left:22px; margin:8px 0; }
.legal ol li { margin:6px 0; }
.legal .legal-lead { font-size:16px; color:var(--dim); border-left:2px solid var(--y);
  padding:2px 0 2px 16px; margin:0 0 26px; }
.legal .legal-sep { border:0; border-top:1px solid var(--border); margin:56px 0 40px; }
.legal h3 { font-size:16px; font-weight:800; color:var(--white); margin:24px 0 8px; }
/* Empfaenger-Tabelle: auf schmalen Schirmen seitlich scrollbar statt gequetscht */
.legal .table-scroll { overflow-x:auto; margin:14px 0; -webkit-overflow-scrolling:touch; }
.legal table { border-collapse:collapse; width:100%; min-width:640px; font-size:13.5px; }
.legal th, .legal td { border:1px solid var(--border); padding:8px 10px; text-align:left;
  vertical-align:top; color:var(--dim); line-height:1.6; }
.legal th { color:var(--white); font-weight:700; background:var(--bg2); white-space:nowrap; }

/* Rechtstexte auf schmalen Schirmen: Dateipfade in <code>, lange Komposita und
   die Ueberschriften duerfen umbrechen. Ohne das laufen sie unter den Rand und
   werden vom overflow-x:hidden des body abgeschnitten. */
.legal h1, .legal h2, .legal h3,
.legal p, .legal li, .legal td, .legal th { overflow-wrap:break-word; }
.legal code { overflow-wrap:anywhere; }
@media (max-width:560px) {
  .legal { padding-left:18px; padding-right:18px; }
  .legal h1 { font-size:26px; }
}

/* ===== NAV MOBILE =====
   Unterhalb von 900px war die Navigation ersatzlos ausgeblendet — alle Links
   lagen im DOM, waren aber unerreichbar. Hier wird derselbe Container zum
   aufklappbaren Panel. Die drei Dropdown-Gruppen liegen dabei flach offen:
   Hover gibt es auf einem Touchscreen nicht. */

.nav-burger { display:none; }
.nav-burger .icon-close { display:none; }
nav.nav-open .nav-burger .icon-menu { display:none; }
nav.nav-open .nav-burger .icon-close { display:block; }

@media (max-width:900px) {
  .nav-burger { display:flex; }
  .nav-date { display:none; }

  .nav-links {
    position:fixed; top:60px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    max-height:calc(100vh - 60px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:12px 20px 24px;
    /* Deckend, nicht --nav-bg: die Leiste darf durchscheinen, ein Panel ueber
       dem Hero nicht — sonst steht die Ueberschrift zwischen den Links. */
    background:var(--bg);
    border-bottom:1px solid var(--border);
    box-shadow:0 18px 44px rgba(0,0,0,0.42);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  nav.nav-open .nav-links { opacity:1; visibility:visible; transform:none; }

  .nav-links .nav-link { font-size:15px; padding:11px 10px; border-radius:8px; }

  /* Gruppen aufgeklappt statt Hover-Menue */
  .nav-links .nav-item { display:block; align-self:auto; }
  .nav-links .nav-trigger { width:100%; }
  .nav-links .nav-caret { display:none; }
  /* visibility hier bewusst auf inherit: sie wird vererbt, und ein Kind darf sie
     gegen einen versteckten Elternteil auf visible zurueckdrehen. Genau das hat
     die Untermenues des geschlossenen Panels zu unsichtbaren Klickfaengern
     gemacht - das opacity:0 des Panels macht sie unsichtbar, aber nicht
     unklickbar. Gemessen: sieben Links fingen ueber die volle Breite rund 40%
     der Bildschirmflaeche ab, auf jeder Seite und in jeder Scrollposition. */
  .nav-links .nav-menu {
    position:static; opacity:1; visibility:inherit; transform:none;
    min-width:0; padding:0 0 6px; margin:0 0 6px 12px;
    background:none; border:0; border-left:1px solid var(--border);
    border-radius:0; box-shadow:none; z-index:auto;
  }
  nav.nav-open .nav-links .nav-menu { visibility:visible; }
  .nav-links .nav-menu a { padding:9px 14px; font-size:14px; }
  .nav-links .nav-menu-sep { margin:6px 14px; }

  /* Hintergrund nicht mitscrollen lassen, solange das Panel offen ist */
  html.nav-locked, html.nav-locked body { overflow:hidden; }
}

@media (prefers-reduced-motion:reduce) {
  .nav-links { transition:none; }
}

/* ===== Verlaufstext: Malflaeche vergroessern =====
   Bei background-clip:text ist die Malflaeche die Hintergrund-Box des Elements,
   nicht der Umriss der Glyphen. Bei line-height nahe 1 ragen Ober- und
   Unterlaengen, Umlautpunkte und die Schraegung kursiver Schrift aus der Box —
   dort endet der Verlauf, die Stellen werden transparent und sehen abgeschnitten
   aus. Gemessen: jede Ueberschrift lief ueber (h1 9px, .s-title 5px, .stat-num 4px).

   Padding vergroessert die Box, die negative Margin nimmt den horizontalen Teil
   fuers Layout wieder zurueck. Vertikales Padding wirkt auf inline-Elemente
   ohnehin nicht auf den Textfluss.

   Bewusst KEIN display:inline-block — mehrzeilige <em> muessen weiter umbrechen
   duerfen. Bewusst kein box-decoration-break:clone — mit dem Standardwert slice
   laeuft der Verlauf ueber alle Zeilenfragmente durch. */
html[data-theme^="studio"] #cover h1 em,
html[data-theme^="studio"] .s-title em {
  padding:0.16em 0.08em;
  margin:0 -0.08em;
}

/* .stat-num ist ein Block mit line-height:1 — hier kappt die Zeilenbox direkt,
   deshalb zusaetzlich etwas Luft. */
html[data-theme^="studio"] .stat-num {
  line-height:1.18;
  padding-bottom:0.06em;
}

/* ===== Formular-Abschnitte =====
   Ueberschrift und Vorspann mittig ueber dem Formular. Dieselbe Absicht stand
   vorher dreimal unterschiedlich im Markup: einmal richtig (voice), einmal
   dreifach gesetzt (office-brain), einmal gar nicht (second-brain). Das Formular
   selbst zentriert sich ueber .udc-frontend-form. */
.form-lead { text-align:center; }
.form-lead .s-sub { margin:16px auto 28px; }

/* ===== BILD-LIGHTBOX (assets/js/lightbox.js) ===== */
img[data-zoom] { cursor:zoom-in; }
/* Fokusring nach innen: .ob-shot und .gallery figure haben overflow:hidden und
   wuerden einen aussen liegenden Ring abschneiden. */
img[data-zoom]:focus-visible { outline:2px solid var(--y); outline-offset:-2px; }

/* Farben hier bewusst fest und nicht ueber --white/--dim: das Overlay ist in
   beiden Modi dunkel, die Variablen kippen im Hellmodus mit. */
/* display gehoert an [open], nicht an .lb: ein eigenes display ueberschreibt
   sonst das eingebaute dialog:not([open]){display:none} — die Knoepfe stuenden
   dann dauerhaft auf der Seite. */
.lb { inset:0; margin:0; border:0; padding:24px; width:100%; height:100%;
      max-width:100vw; max-height:100vh; background:transparent; color:#f1f5f9; }
.lb[open] { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.lb::backdrop { background:rgba(6,6,16,0.88); }
.lb-fig { margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; min-height:0; }
/* Kein width:100% — so bleibt ein 1280er Screenshot bei 1280px stehen, statt auf
   grossen Schirmen matschig hochskaliert zu werden. */
.lb-img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 150px);
          border-radius:12px; border:1px solid rgba(255,255,255,0.14); box-shadow:0 32px 80px rgba(0,0,0,0.5); }
.lb-cap { font-size:13.5px; line-height:1.5; text-align:center; max-width:70ch; color:#cbd5e1; }
.lb-nav { display:flex; align-items:center; gap:14px; }
.lb-count { font-size:12px; color:#94a3b8; min-width:56px; text-align:center; }
.lb-close { position:fixed; top:14px; right:16px; }
.lb-close, .lb-prev, .lb-next { width:44px; height:44px; display:flex; align-items:center;
  justify-content:center; font-size:20px; line-height:1; cursor:pointer; color:#f1f5f9;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:11px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background:rgba(255,255,255,0.16); }
.lb[open] { animation:lb-in .18s ease-out; }
@keyframes lb-in { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:none; } }
/* showModal() sperrt den Hintergrund-Scroll nicht zuverlaessig. html.nav-locked
   hilft nicht — die Regel steht in @media(max-width:900px). */
html.lb-open, html.lb-open body { overflow:hidden; }
@media (max-width:600px) { .lb { padding:12px; } .lb-img { max-height:calc(100vh - 190px); } }
@media (prefers-reduced-motion:reduce) { .lb[open] { animation:none; } }