/* =====================================================
   wivanto — Design System (Basis: DATREXX-Gerüst)
   1. Tokens
   2. Reset & Base
   3. Typography
   4. Layout
   5. Buttons
   6. Cards
   7. Header & Nav
   8. Mobile Menu
   9. Hero
   10. Dashboard mock
   11. Sections
   12. Use cases & filters
   13. Timeline
   14. Tech groups
   15. About
   16. Why
   17. Contact / Form
   18. Footer
   19. Floating helpers
   20. Reveal
   21. Responsive
   22. Reduced motion
   ===================================================== */

/* 0. Schrift ==========================================
   Inter, selbst gehostet (Variable Font, deckt 100–900 ab).
   Kein externer Aufruf an Google → DSGVO-sauber, kein Consent nötig.
   Dateien: fonts/inter-latin.woff2 (48 KB), fonts/inter-latin-ext.woff2 (85 KB).
   ===================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. Tokens =========================================== */
:root {
  --bg: #07090f;
  --bg-elev: #0b0e17;
  --panel: rgba(255, 255, 255, 0.03);
  --panel-2: rgba(255, 255, 255, 0.05);
  --panel-strong: rgba(15,18,28, 0.72);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  --text: #eef0f6;
  --text-muted: #a4abbf;
  --text-dim: #6b7393;

  --accent: #7c8cff;          /* indigo */
  --accent-2: #5fd5e6;        /* cyan */
  --accent-3: #b18bff;        /* violet (sparingly) */
  --accent-grad: linear-gradient(120deg, #5fd5e6 0%, #7c8cff 60%, #b18bff 100%);

  --success: #34d399;
  --warning: #f5b042;
  --error: #ef6b6b;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.03) inset;
  --shadow-2: 0 12px 30px -12px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-3: 0 30px 80px -20px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.05) inset;
  --shadow-glow: 0 18px 50px -18px rgba(124,140,255,0.55);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --t-fast: 140ms cubic-bezier(.2,.7,.2,1);
  --t: 260ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 520ms cubic-bezier(.2,.7,.2,1);

  --container: 1180px;
  --gutter: clamp(18px, 3vw, 32px);
}

[data-theme="light"] {
  --bg: #f4f5f9;
  --bg-elev: #ffffff;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --panel-strong: rgba(255, 255, 255, 0.85);
  --hairline: rgba(15,18,28, 0.08);
  --hairline-strong: rgba(15,18,28, 0.14);

  --text: #0c1020;
  --text-muted: #4b5572;
  --text-dim: #6b7393;

  --accent: #2563eb;
  --accent-2: #0aa9c0;
  --accent-3: #8a5cf6;
  --accent-grad: linear-gradient(120deg, #0aa9c0 0%, #2563eb 60%, #8a5cf6 100%);

  --shadow-1: 0 1px 2px rgba(15,18,28,0.05);
  --shadow-2: 0 8px 24px -10px rgba(15,18,28,0.12);
  --shadow-3: 0 24px 60px -20px rgba(15,18,28,0.18);
  --shadow-glow: 0 14px 40px -14px rgba(37,99,235,0.35);
}

/* 2. Reset & Base ===================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
/* Subtle ambient background — single soft glow, no orb soup */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(60vw 50vh at 80% -10%, rgba(124,140,255,0.18), transparent 60%),
    radial-gradient(50vw 40vh at -10% 30%, rgba(95,213,230,0.10), transparent 60%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(60vw 50vh at 85% -10%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(50vw 40vh at -10% 30%, rgba(10,169,192,0.08), transparent 60%);
}

img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-2); }

/* Fokusring: im hellen Theme erreicht --accent-2 (Cyan) auf hellem Grund nur 2,8:1
   und verfehlt damit WCAG 1.4.11 (3:1 für Nicht-Text). Deshalb hell = --accent (5,2:1),
   dunkel bleibt Cyan (11:1). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
[data-theme="dark"] :focus-visible { outline-color: var(--accent-2); }
::selection { background: rgba(124,140,255,0.4); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: var(--r-pill);
  z-index: 1000; font-weight: 600;
}
.skip-link:focus { left: 16px; }
.sr-anchor { position: absolute; top: 0; }

/* 3. Typography ======================================= */
h1, h2, h3, h4 {
  margin: 0 0 .4em;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--text);
  font-weight: 660;
  font-feature-settings: "ss01", "cv11";
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); letter-spacing: -0.035em; line-height: 1.04; font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.028em; }
h3 { font-size: clamp(1.05rem, 1.4vw, 1.18rem); letter-spacing: -0.012em; }
h4 { font-size: .95rem; letter-spacing: 0; }

p { margin: 0 0 1em; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.small { font-size: .85rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* --text-dim käme bei dieser Größe nur auf 4,3:1 — unter AA, und die
     Large-Text-Ausnahme greift bei 10,9px nicht. Deshalb --text-muted (6,8:1). */
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 14px; height: 1px;
  background: currentColor;
  opacity: .6;
}

/* 4. Layout =========================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: clamp(72px, 9vw, 130px) 0; position: relative; }
.section + .section { padding-top: 0; }
.section-head {
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: left;
}
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-lead {
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  color: var(--text-muted);
  max-width: 640px;
}
.section-head.center .section-lead { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* 5. Buttons ========================================== */
.btn {
  --btn-bg: var(--panel-2);
  --btn-fg: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .94rem;
  letter-spacing: -0.005em;
  border: 1px solid var(--hairline-strong);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  user-select: none;
}
.btn-sm { padding: 10px 16px; font-size: .85rem; }
.btn-block { width: 100%; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  --btn-bg: var(--text);
  --btn-fg: var(--bg);
  border-color: transparent;
  box-shadow: var(--shadow-2);
}
[data-theme="dark"] .btn-primary { --btn-bg: #f3f4fa; }
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-3);
  color: var(--bg);
}

.btn-ghost {
  --btn-bg: var(--panel);
  color: var(--text);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn-ghost:hover { background: var(--panel-2); transform: translateY(-1px); color: var(--text); }

/* 6. Cards ============================================ */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 26px);
  box-shadow: var(--shadow-1);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
}
[data-theme="dark"] .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)) ,
    var(--panel);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
[data-theme="light"] .card { background: #ffffff; box-shadow: var(--shadow-2); }
.card::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  opacity: .8; pointer-events: none;
}
[data-theme="light"] .card::after { background: linear-gradient(90deg, transparent, rgba(15,18,28,0.06), transparent); }
.card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-3);
}
.card h3 { margin-bottom: 8px; }
.card p { margin-bottom: 0; font-size: .94rem; }

.card-num {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.mini-tag {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  font-weight: 600;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

/* Service icon block (CSS-only) */
.svc-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: inline-grid; place-items: center;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  color: var(--accent-2);
  margin-bottom: 16px;
  position: relative;
}
/* Icons sind echte SVGs (siehe index.html) – die früheren CSS-Formen entfallen. */
.svc-icon svg { width: 21px; height: 21px; }

/* 7. Header =========================================== */
.site-header {
  position: sticky; top: 14px;
  z-index: 100;
  margin: 14px auto 0;
  max-width: calc(var(--container) + 24px);
  padding: 0 12px;
}
.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 8px 8px 8px 14px;
  background: var(--panel-strong);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--shadow-2);
  transition: box-shadow var(--t), border-color var(--t);
}

/* Brand highlight: visually continues the blue underline stroke inside the logo
   and grows with scroll, reaching its full length when the user has scrolled
   to the very bottom of the page.
   Position (left/width) is set from JS; tweak the vertical offset and color
   via CSS variables below if the alignment needs adjustment per PNG version. */
.brand-highlight {
  position: absolute;
  top: 0;        /* set from JS to align with the logo's blue underline */
  left: 0;       /* set from JS to the right edge of the logo */
  width: 0;      /* set from JS, scales with scroll progress */
  /* Height is set from JS, derived from the logo height so it matches the
     visible underline at any breakpoint. CSS var below acts as a fallback. */
  height: var(--brand-hl-h, 4px);
  max-width: calc(100% - 16px);
  background: var(--brand-hl-color, #2563eb);
  border-radius: 999px;
  pointer-events: none;
  /* Stacking inside .header-inner:
     - .brand          z-index: 1  (logo is below the bar so the line covers
                                    the PNG underline)
     - .brand-highlight z-index: 2  (the bar itself)
     - .primary-nav, .header-actions z-index: 3 (nav links and switches sit
                                    ON TOP of the bar so the line visually
                                    passes behind them)                  */
  z-index: 2;
  will-change: width;
}
[data-theme="dark"] .brand-highlight {
  background: var(--brand-hl-color-dark, #2563eb);
}
.brand          { position: relative; z-index: 1; }
.primary-nav    { position: relative; z-index: 3; }
.header-actions { position: relative; z-index: 3; }

/* Dark mode: the default --panel tint is nearly transparent (3% alpha), which
   would let the brand-highlight bar show through the nav pill. Give the pill
   a more opaque, glassy background so the bar visually stays "behind" it. */
[data-theme="dark"] .nav-list {
  background: rgba(15,18,28, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-header.scrolled .header-inner {
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-3);
}

.brand {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.brand:hover { color: var(--text); }
.brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent-grad);
  display: inline-grid; place-items: center;
  font-size: .68rem; font-weight: 800; color: #fff; letter-spacing: .04em;
  box-shadow: 0 6px 18px -6px rgba(124,140,255,0.6);
}
.brand-text { display: inline-flex; flex-direction: column; line-height: 1; }
.brand-text strong { font-weight: 700; letter-spacing: .04em; font-size: .92rem; }
.brand-claim { font-size: .64rem; color: var(--text-dim); letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }

.primary-nav { position: relative; }
.nav-list {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 4px;
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--hairline);
}
.nav-list a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: .86rem;
  color: var(--text-muted);
  font-weight: 500;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-list a:hover { color: var(--text); }
.nav-list a.active {
  color: var(--text);
  background: var(--panel-2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 1px var(--hairline-strong);
}

.header-actions { display: flex; align-items: center; gap: 8px; }

/* Language switch (DE / EN) ============================== */
/* Hidden by default. Enable with ?lang=on (see app.js).
   When enabled, <html> gets data-lang-switch="on". */
html:not([data-lang-switch="on"]) .lang-switch { display: none !important; }

.lang-switch {
  display: inline-flex; align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--panel-2);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px var(--hairline) inset;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .02em;
}
.lang-switch .lang-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.lang-switch .lang-link:hover { color: var(--text); }
.lang-switch .lang-link.active {
  color: var(--text);
  background: var(--panel-3, var(--panel));
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 0 0 1px var(--hairline-strong);
  cursor: default;
}
.lang-switch.lang-switch-mobile {
  display: flex; width: 100%;
  margin: 6px 0 10px;
  padding: 4px;
  font-size: .9rem;
}
.lang-switch.lang-switch-mobile .lang-link {
  flex: 1; height: 38px; min-width: 0;
}

@media (max-width: 900px) {
  .lang-switch { display: none; }
  .lang-switch.lang-switch-mobile { display: flex; }
}

.theme-switch {
  appearance: none; border: 0; background: transparent;
  padding: 0; cursor: pointer; line-height: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border-radius: var(--r-pill);
  transition: transform var(--t-fast);
}
.theme-switch:active { transform: scale(0.96); }
.theme-switch:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
/* All decorative children must not steal the tap so the click always
   lands on the <button> itself (important on iOS Safari). */
.theme-switch * { pointer-events: none; }

/* Repaint helper: toggling this class for a single frame after a theme
   change forces iOS Safari to repaint fixed-position descendants. */
.theme-flushing { transform: translateZ(0); }

.theme-switch-track {
  position: relative;
  width: 56px; height: 30px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background:
    linear-gradient(135deg, #0a0e1a 0%, #131a30 100%);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.03);
  display: block;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
  overflow: hidden;
}
[data-theme="light"] .theme-switch-track {
  background:
    linear-gradient(135deg, #cfdcf2 0%, #fff5d8 100%);
  border-color: rgba(15,18,28,0.12);
  box-shadow:
    inset 0 1px 2px rgba(15,18,28,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.5);
}

/* Static glyphs in the track (decorative) */
.ts-glyph {
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  transform: translateY(-50%);
  opacity: .55;
  transition: opacity var(--t);
  pointer-events: none;
}
.ts-glyph-moon {
  left: 9px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset -3px 0 0 0 rgba(255,255,255,0.55);
  transform: translateY(-50%) rotate(-25deg);
}
.ts-glyph-sun {
  right: 9px;
  border-radius: 50%;
  background: rgba(15,18,28,0.55);
  box-shadow:
    0 -5px 0 -3px rgba(15,18,28,0.55),
    0 5px 0 -3px rgba(15,18,28,0.55),
    -5px 0 0 -3px rgba(15,18,28,0.55),
    5px 0 0 -3px rgba(15,18,28,0.55);
}
[data-theme="dark"] .ts-glyph-moon { opacity: 0; }
[data-theme="dark"] .ts-glyph-sun { opacity: .55; background: rgba(255,255,255,0.45); box-shadow:
    0 -5px 0 -3px rgba(255,255,255,0.45),
    0 5px 0 -3px rgba(255,255,255,0.45),
    -5px 0 0 -3px rgba(255,255,255,0.45),
    5px 0 0 -3px rgba(255,255,255,0.45); }
[data-theme="light"] .ts-glyph-sun { opacity: 0; }
[data-theme="light"] .ts-glyph-moon { opacity: .55; box-shadow: inset -3px 0 0 0 rgba(15,18,28,0.55); }

/* Thumb */
.theme-switch-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #2a334d 0%, #0c1020 80%);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 8px 20px -8px rgba(95,213,230,0.35);
  transition:
    transform 360ms cubic-bezier(.5,1.6,.4,1),
    background var(--t),
    box-shadow var(--t);
  display: grid; place-items: center;
  overflow: hidden;
}
[data-theme="light"] .theme-switch-thumb {
  transform: translateX(26px);
  background:
    radial-gradient(circle at 30% 30%, #ffd97a 0%, #f5a93d 80%);
  box-shadow:
    0 2px 6px rgba(245,169,61,0.35),
    0 0 0 1px rgba(255,255,255,0.5) inset,
    0 10px 24px -8px rgba(245,169,61,0.55);
}

/* Moon icon (visible in dark mode) */
.ts-icon-moon {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #e7ecff;
  box-shadow: inset -4px -1px 0 0 #b6c0e3;
  transform: rotate(-22deg) scale(1);
  opacity: 1;
  transition: transform 320ms cubic-bezier(.4,0,.2,1), opacity 200ms;
}
.ts-icon-moon::after {
  /* tiny crater */
  content: "";
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  top: 3px; left: 3px;
}

/* Sun icon (visible in light mode) */
.ts-icon-sun {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff7d8;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.45),
    0 -7px 0 -3px #fff7d8,
    0 7px 0 -3px #fff7d8,
    -7px 0 0 -3px #fff7d8,
    7px 0 0 -3px #fff7d8,
    5px 5px 0 -3.5px #fff7d8,
    -5px 5px 0 -3.5px #fff7d8,
    5px -5px 0 -3.5px #fff7d8,
    -5px -5px 0 -3.5px #fff7d8;
  transform: rotate(-90deg) scale(0);
  opacity: 0;
  transition: transform 360ms cubic-bezier(.4,0,.2,1), opacity 220ms;
}

[data-theme="light"] .ts-icon-moon { transform: rotate(60deg) scale(0); opacity: 0; }
[data-theme="light"] .ts-icon-sun  { transform: rotate(0deg) scale(1); opacity: 1; }

.burger {
  display: none;
  width: 40px; height: 40px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  cursor: pointer;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
}
.burger span {
  display: block; width: 16px; height: 1.5px;
  background: var(--text); border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* 8. Mobile menu ====================================== */
/* Blur sits on ::before — WebKit+iOS often breaks touch scrolling inside children
 * of elements that use backdrop-filter on the same box. */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 90;
  background: transparent;
  isolation: isolate;
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 90px 16px 24px;
  --mm-pad-top: 90px;
  --mm-pad-bottom: 24px;
  opacity: 0;
  transition: opacity var(--t);
}
.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(7, 9, 15, 0.6);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
[data-theme="light"] .mobile-menu::before {
  background: rgba(244, 245, 249, 0.7);
}
.mobile-menu.open { display: flex; opacity: 1; }
.mobile-menu-card {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  width: 100%; max-width: 440px;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(100vh - var(--mm-pad-top) - var(--mm-pad-bottom));
  max-height: calc(100dvh - var(--mm-pad-top) - var(--mm-pad-bottom));
  overflow: hidden;
  background: var(--panel-strong);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 0;
  box-shadow: var(--shadow-3);
  transform: translateY(-12px);
  transition: transform var(--t);
}
.mobile-menu-inner {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open .mobile-menu-card { transform: translateY(0); }
.mobile-nav-list {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-nav-list a {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 500;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  color: var(--text);
}
.mobile-nav-list a:hover { background: var(--panel); color: var(--text); }

/* 9. Hero ============================================= */
.hero {
  position: relative;
  padding: clamp(80px, 10vw, 130px) 0 clamp(40px, 6vw, 70px);
  overflow: hidden;
}
.hero-bg, .orb { display: none; } /* removed in favor of body ambient */

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.hero-copy { max-width: 600px; }
.hero-title {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  margin-bottom: 18px;
  color: var(--text);
}
.hero-title em {
  font-style: normal;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { font-size: clamp(1rem, 1.25vw, 1.1rem); margin-bottom: 26px; max-width: 540px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }

.trust-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.trust-chips li {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(135deg, rgba(95,213,230,0.06), rgba(124,140,255,0.04) 50%, rgba(177,139,255,0.05));
  border: 1px solid var(--hairline);
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 12px -8px rgba(0,0,0,0.4);
  transition: transform var(--t-fast), border-color var(--t), box-shadow var(--t), background var(--t);
  cursor: default;
}
[data-theme="light"] .trust-chips li {
  background: linear-gradient(135deg, rgba(10,169,192,0.05), rgba(37,99,235,0.04) 50%, rgba(138,92,246,0.05));
  box-shadow: 0 1px 2px rgba(15,18,28,0.04);
}
.trust-chips li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: 0 0 8px rgba(95,213,230,0.5);
  flex-shrink: 0;
}
.trust-chips li:nth-child(2)::before { background: linear-gradient(135deg, #7c8cff, #b18bff); box-shadow: 0 0 8px rgba(124,140,255,0.5); }
.trust-chips li:nth-child(3)::before { background: linear-gradient(135deg, #b18bff, #5fd5e6); box-shadow: 0 0 8px rgba(177,139,255,0.5); }
.trust-chips li:nth-child(4)::before { background: linear-gradient(135deg, #5fd5e6, #b18bff); box-shadow: 0 0 8px rgba(95,213,230,0.5); }
.trust-chips li:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 12px 24px -10px rgba(124,140,255,0.35);
}

.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--hairline);
  font-size: .76rem;
  color: var(--text-muted);
  margin-bottom: 18px;
  font-weight: 500;
}
.status-pill.small { font-size: .7rem; padding: 3px 10px 3px 8px; margin: 6px 0 0; }
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(52,211,153,0.16);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.45); }
  70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* 10. Dashboard mock — ETL Studio (stacked) =========== */
.dash-stack {
  position: relative;
  isolation: isolate;
}
.dash-stack .dash-card { transition: transform var(--t), opacity var(--t), filter var(--t), box-shadow var(--t); }

/* Front window */
.dash-card.dash-primary {
  position: relative;
  z-index: 3;
}
/* Middle window — peeks behind to the right/up */
.dash-card.dash-secondary {
  position: absolute;
  top: -22px;
  right: -28px;
  width: 92%;
  z-index: 2;
  transform: rotate(2.4deg);
  opacity: .92;
  filter: saturate(0.9);
}
/* Back window — peeks further behind to the left/down */
.dash-card.dash-tertiary {
  position: absolute;
  bottom: -28px;
  left: -32px;
  width: 88%;
  z-index: 1;
  transform: rotate(-2.6deg);
  opacity: .82;
  filter: saturate(0.85) blur(0.3px);
}

/* Hover — bring the hovered window to the front, push others back */
.dash-stack:hover .dash-card { opacity: .55; filter: saturate(0.7) blur(1.5px); transform: scale(0.97); }
.dash-stack:hover .dash-card.dash-secondary { transform: rotate(2.4deg) scale(0.95); }
.dash-stack:hover .dash-card.dash-tertiary  { transform: rotate(-2.6deg) scale(0.93); }

.dash-stack .dash-card:hover,
.dash-stack .dash-card:focus-within {
  z-index: 10;
  opacity: 1;
  filter: none;
  transform: rotate(0deg) translateY(-4px) scale(1.015);
  box-shadow: var(--shadow-3), 0 30px 80px -20px rgba(95,213,230,0.25);
}

/* Compact body variant for the secondary windows */
.dash-body.compact { padding: 14px; gap: 10px; }
.dash-body.compact .dash-h { font-size: .94rem; }

/* Connectors list */
.conn-list {
  list-style: none; margin: 0; padding: 4px 0 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hairline);
}
.conn-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px dashed var(--hairline);
  font-size: .8rem;
}
.conn-list li:last-child { border-bottom: 0; }
.conn-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  display: inline-grid; place-items: center;
  position: relative;
  font-size: 0;
  color: var(--accent);
}
.conn-icon::before {
  content: ""; width: 10px; height: 10px;
  border: 1.4px solid currentColor; border-radius: 2px;
}
.conn-icon.i-erp::before { border-radius: 50%/30%; }
.conn-icon.i-sql::before { border-radius: 50%/40%; }
.conn-icon.i-pg::before  { border-radius: 50%; }
.conn-icon.i-csv::before { border-radius: 1px; height: 8px; background: linear-gradient(currentColor,currentColor) 0 30%/100% 1.2px no-repeat, linear-gradient(currentColor,currentColor) 0 70%/100% 1.2px no-repeat; }
.conn-icon.i-api::before { border-radius: 999px; height: 6px; }
.conn-icon.i-sap::before { border-style: dashed; }

.conn-name {
  font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conn-meta {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: .7rem; color: var(--text-dim);
}
.conn-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(52,211,153,0.14);
}
.conn-dot.run  { background: var(--accent-2); animation: pulse-cyan 1.6s infinite; }
.conn-dot.warn { background: var(--warning); box-shadow: 0 0 0 3px rgba(245,176,66,0.14); }

/* Run history table */
.run-table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.run-table td {
  padding: 8px 6px;
  border-bottom: 1px dashed var(--hairline);
  font-size: .76rem;
  color: var(--text-muted);
}
.run-table tr:last-child td { border-bottom: 0; }
.rt-status {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
}
.rt-status.run  { background: var(--accent-2); animation: pulse-cyan 1.6s infinite; }
.rt-status.warn { background: var(--warning); }
.rt-name { color: var(--text); font-weight: 600; }
.rt-meta { text-align: right; color: var(--text-dim); }
.rt-time { text-align: right; color: var(--text); }


.dashboard {
  position: relative;
  perspective: 1600px;
  padding: 28px 32px 36px 32px;
  margin: -28px -32px -36px -32px;
}
.dash-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    rgba(11, 14, 23, 0.75);
  border: 1px solid var(--hairline-strong);
  border-radius: 24px;
  box-shadow: var(--shadow-3);
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
[data-theme="light"] .dash-card {
  background: #ffffff;
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-3);
}
.dash-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}

.dash-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
}
.dash-dots { display: inline-flex; gap: 6px; }
.dash-dots i {
  width: 10px; height: 10px; border-radius: 50%;
}
.dash-dots i:nth-child(1) { background: #ff5f57; }
.dash-dots i:nth-child(2) { background: #febc2e; }
.dash-dots i:nth-child(3) { background: #28c840; }
.dash-title {
  font-size: .76rem;
  color: var(--text-muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-controls { margin-left: auto; display: inline-flex; gap: 6px; }
.ctrl { width: 22px; height: 5px; border-radius: 3px; background: var(--panel-2); }

/* Tabs (ETL studio segmented) */
.dash-tabs {
  display: flex; gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab {
  appearance: none; border: 0; background: transparent;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
}
.dash-tab.active {
  color: var(--text);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.dash-body {
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}

.dash-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.dash-h {
  font-size: 1.02rem; margin: 0;
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.dash-pill {
  font-size: .62rem;
  padding: 3px 8px 3px 7px;
  border-radius: var(--r-pill);
  background: rgba(52,211,153,0.1);
  border: 1px solid rgba(52,211,153,0.28);
  color: var(--success);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.dash-pill::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

.pipe-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.pipe-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-chip {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: .66rem;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.meta-chip .meta-k { color: var(--text-dim); }
.meta-chip.ok { color: var(--success); border-color: rgba(52,211,153,0.25); background: rgba(52,211,153,0.08); }
.meta-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }

/* Pipeline DAG canvas */
.pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 28px 16px;
  padding: 8px 0;
  min-height: 188px;
}
.pipe-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  color: var(--accent);
}
.pipe-svg .pipe-paths path {
  fill: none;
  stroke: rgba(124,140,255,0.45);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}
.pipe-svg .pipe-flow circle {
  fill: var(--accent-2);
  filter: drop-shadow(0 0 4px rgba(95,213,230,0.8));
}
[data-theme="light"] .pipe-svg .pipe-paths path { stroke: rgba(37,99,235,0.45); }

.node {
  position: relative;
  z-index: 1;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: 11px;
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color var(--t), transform var(--t);
}
[data-theme="dark"] .node {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    rgba(13, 17, 26, 0.85);
}
.node:hover { border-color: var(--hairline-strong); }
.node-tag {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: .54rem;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--text-dim);
}
.node-name {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.node-meta {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: .64rem;
  color: var(--text-muted);
}

.node.n-src { border-left: 2px solid var(--accent-2); }
.node.n-tx  { border-left: 2px solid var(--accent); }
.node.n-dst { border-left: 2px solid var(--accent-3); }
.node.n-src .node-tag { color: var(--accent-2); }
.node.n-tx  .node-tag { color: var(--accent); }
.node.n-dst .node-tag { color: var(--accent-3); }

.node.running {
  border-color: rgba(95,213,230,0.5);
  box-shadow: 0 0 0 3px rgba(95,213,230,0.08);
}
.node.running::after {
  content: "";
  position: absolute; top: 8px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
  animation: pulse-cyan 1.6s infinite;
}
@keyframes pulse-cyan {
  0%,100% { box-shadow: 0 0 0 2px rgba(95,213,230,0.18); }
  50% { box-shadow: 0 0 0 5px rgba(95,213,230,0.02); }
}

/* Strip: run history + throughput */
.dash-strip {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 10px;
}
.strip-block {
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.strip-label {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}
.strip-value {
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--text);
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.strip-value em { font-size: .68rem; color: var(--text-muted); font-style: normal; font-weight: 500; }
.strip-delta {
  font-size: .68rem;
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color: var(--success);
}
.run-bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  align-items: end;
  height: 36px;
}
.run-bars i {
  display: block; width: 100%;
  background: rgba(124,140,255,0.55);
  border-radius: 2px;
  min-height: 4px;
}
.run-bars i.now { background: var(--accent-2); box-shadow: 0 0 8px rgba(95,213,230,0.5); }

/* Log panel */
.dash-log {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent),
    var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 5px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .72rem;
}
.log-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px; align-items: center;
  color: var(--text-muted);
}
.log-tag {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 0;
  text-align: center;
  border-radius: 4px;
  background: rgba(124,140,255,0.12);
  color: var(--accent);
}
.log-tag.ok   { background: rgba(52,211,153,0.14); color: var(--success); }
.log-tag.warn { background: rgba(245,176,66,0.14); color: var(--warning); }
.log-tag.run  { background: rgba(95,213,230,0.14); color: var(--accent-2); }
.log-msg { color: var(--text); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-arrow { color: var(--text-dim); margin: 0 4px; }
.log-time { color: var(--text-dim); font-size: .66rem; }
.cursor {
  display: inline-block;
  color: var(--accent-2);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* 11. Sections ======================================== */
/* Section heads not centered by default — more editorial.
   Use .center for main sections that need centered intro. */

/* 12. Use cases & filters ============================= */
.filter-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  padding: 5px;
  background:
    linear-gradient(135deg, rgba(95,213,230,0.04), rgba(124,140,255,0.03) 50%, rgba(177,139,255,0.04));
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -16px rgba(0,0,0,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t);
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { color: var(--text); background: rgba(255,255,255,0.04); }
[data-theme="light"] .chip:hover { background: rgba(15,18,28,0.04); }
.filter-chips .chip.active {
  background: var(--accent-grad);
  color: #fff;
  font-weight: 600;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 8px 22px -8px rgba(124,140,255,0.55);
}
.filter-chips .chip.active:hover { color: #fff; }

.usecases .tile { transition: transform var(--t), box-shadow var(--t), border-color var(--t), opacity var(--t); }
.usecases .tile.hidden { display: none; }
.usecases .tile h3 { font-size: 1rem; }
.usecases .tile:hover {
  border-color: rgba(124,140,255,0.45);
  box-shadow: 0 24px 50px -20px rgba(124,140,255,0.35);
}

/* 13. Timeline ======================================== */
/* Ablauf als echte Zeitleiste – bewusst KEINE Karten, damit dieser Abschnitt
   sich vom Karten-Raster der Nachbar-Sektionen abhebt (Rhythmus).
   Die Linie läuft von Kreis-Mitte zu Kreis-Mitte; der Kreis liegt darüber und
   verdeckt sie mit seinem --bg-Rand sauber. */
.timeline {
  --tl-gap: 26px;
  --tl-dot: 46px;
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tl-gap);
}
.step {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
}
/* Verbindungslinie: Mitte dieses Schritts → Mitte des nächsten */
.step::after {
  content: "";
  position: absolute;
  top: calc(var(--tl-dot) / 2 - 1px);
  left: 50%;
  width: calc(100% + var(--tl-gap));
  height: 2px;
  background: var(--accent-grad);
  opacity: .40;
  z-index: 0;
}
.step:last-child::after { content: none; }
.step-num {
  position: relative;
  z-index: 1;
  display: grid; place-items: center;
  width: var(--tl-dot); height: var(--tl-dot);
  border-radius: 50%;
  margin: 0 auto 16px;
  background: var(--accent-grad);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  border: 4px solid var(--bg);
  box-shadow: var(--shadow-2);
  transition: transform var(--t-fast);
}
.step:hover .step-num { transform: scale(1.08); }
.step h3 { font-size: 1rem; margin-bottom: 6px; }
.step p { font-size: .9rem; color: var(--text-muted); }

/* 14. Tech groups ===================================== */
.tech-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tech-group { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.tg-head {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
}
.tg-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(95,213,230,0.14), rgba(124,140,255,0.10) 50%, rgba(177,139,255,0.14));
  border: 1px solid var(--hairline);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 14px -10px rgba(124,140,255,0.4);
}
.tg-icon svg { width: 20px; height: 20px; }
[data-theme="light"] .tg-icon {
  background: linear-gradient(135deg, rgba(10,169,192,0.10), rgba(37,99,235,0.08) 50%, rgba(138,92,246,0.10));
  border-color: rgba(37,99,235,0.18);
}
.tech-group h3 {
  font-size: 1rem; margin: 0 0 2px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
}
.tg-tag {
  margin: 0;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.tech-foot {
  margin: clamp(20px, 3vw, 32px) auto 0;
  max-width: 720px;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding: 14px 18px;
  border-radius: var(--r-md, 14px);
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--hairline) inset;
}
.tf-mark {
  color: var(--accent-2);
  font-weight: 600;
  flex-shrink: 0;
}
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li, .chips-soft li {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(135deg, rgba(95,213,230,0.05), rgba(124,140,255,0.04) 50%, rgba(177,139,255,0.05));
  border: 1px solid var(--hairline);
  font-size: .8rem;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 10px -8px rgba(0,0,0,0.4);
  transition: transform var(--t-fast), border-color var(--t), box-shadow var(--t), background var(--t);
}
[data-theme="light"] .chips li, [data-theme="light"] .chips-soft li {
  background: linear-gradient(135deg, rgba(10,169,192,0.05), rgba(37,99,235,0.04) 50%, rgba(138,92,246,0.05));
  box-shadow: 0 1px 2px rgba(15,18,28,0.04);
}
.chips li::before, .chips-soft li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: 0 0 8px rgba(95,213,230,0.45);
  flex-shrink: 0;
}
.chips li:nth-child(3n+2)::before { background: linear-gradient(135deg, #7c8cff, #b18bff); box-shadow: 0 0 8px rgba(124,140,255,0.5); }
.chips li:nth-child(3n+3)::before { background: linear-gradient(135deg, #b18bff, #5fd5e6); box-shadow: 0 0 8px rgba(177,139,255,0.5); }
.chips-soft li:nth-child(3n+2)::before { background: linear-gradient(135deg, #7c8cff, #b18bff); box-shadow: 0 0 8px rgba(124,140,255,0.5); }
.chips-soft li:nth-child(3n+3)::before { background: linear-gradient(135deg, #b18bff, #5fd5e6); box-shadow: 0 0 8px rgba(177,139,255,0.5); }
.chips li:hover, .chips-soft li:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 12px 22px -10px rgba(124,140,255,0.32);
}

.chips-soft li {
  background:
    linear-gradient(135deg, rgba(95,213,230,0.10), rgba(124,140,255,0.08) 50%, rgba(177,139,255,0.10));
  border-color: rgba(124,140,255,0.22);
}
[data-theme="light"] .chips-soft li {
  background: linear-gradient(135deg, rgba(10,169,192,0.10), rgba(37,99,235,0.08) 50%, rgba(138,92,246,0.10));
  border-color: rgba(37,99,235,0.2);
}

/* 15. About =========================================== */
.about-grid {
  display: grid;
  grid-template-columns: minmax(340px, 380px) 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.profile { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.profile-top { display: flex; align-items: center; gap: 14px; }
.profile-cta {
  align-self: flex-start;
  margin-top: 4px;
}

.profile-facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.profile-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--hairline);
  white-space: nowrap;
  min-width: 0;
}
.profile-facts li:last-child { border-bottom: 0; }
.pf-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--panel-2);
  color: var(--text-muted);
  box-shadow: 0 0 0 1px var(--hairline) inset;
  flex-shrink: 0;
}
.pf-icon svg { width: 14px; height: 14px; }
.pf-label {
  font-size: .7rem;
  color: var(--text-dim);
  letter-spacing: .1em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pf-value {
  margin-left: auto;
  text-align: right;
  font-size: .85rem;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -.005em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.about-text { display: flex; flex-direction: column; gap: 14px; }
.about-text > .eyebrow { margin-bottom: -4px; }
.about-text .lead {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -.005em;
}

.principles {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.principle {
  position: relative;
  padding: 16px 16px 14px;
  border-radius: 14px;
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--hairline) inset;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--t-fast), box-shadow var(--t);
}
.principle:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--hairline-strong) inset, 0 12px 24px -16px rgba(124,140,255,0.35);
}
.pr-num {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent-2);
}
.principle strong {
  font-size: .98rem;
  color: var(--text);
  letter-spacing: -.005em;
}
.principle p {
  margin: 0;
  font-size: .87rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.profile-monogram {
  width: 72px; height: 72px;
  border-radius: 18px;
  background: var(--accent-grad);
  display: grid; place-items: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  box-shadow: var(--shadow-glow);
  position: relative;
  overflow: hidden;
}
.profile-monogram::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 45%);
}
.profile-meta { display: flex; flex-direction: column; gap: 4px; }
.profile-meta strong { font-size: 1.05rem; }
.profile-meta span { color: var(--text-muted); font-size: .88rem; }
.about-text p { font-size: 1rem; }
.about-text p:first-child { font-size: 1.1rem; color: var(--text); }

/* 16. Why ============================================= */
.premium { padding: clamp(24px, 2.6vw, 30px); }
.premium .card-num { color: var(--accent-2); }

/* Über-Sektion: Karten mit mehreren Absätzen brauchen Abstand – ohne diese Regel würden
   die <p> wegen .card p{margin-bottom:0} zusammenlaufen. Das Portrait zusätzlich auf eine
   lesbare Zeilenbreite begrenzen (sonst zu lange Zeilen im full-width Kasten). */
#ueber .card p { margin-bottom: .85em; }
#ueber .card p:last-child { margin-bottom: 0; }
.ueber-portrait { max-width: 62ch; }

/* Personen-Karte: Text links, Portrait rechts (Desktop) – gestapelt auf dem Handy */
.ueber-person { display: flex; gap: clamp(20px, 3vw, 36px); align-items: flex-start; }
.ueber-body { flex: 1 1 auto; min-width: 0; }
.ueber-photo {
  flex: 0 0 auto;
  width: clamp(170px, 22vw, 220px);
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Portraitfoto mit eigenem Hintergrund (Stand 2026-08-24) -> als gerahmtes Bild zeigen.
     Traegt in Hell UND Dunkel; die frueher noetige Freistellung entfiel, weil das schwarze
     Shirt im Dark Mode mit dem Hintergrund verschmolz. */
  border-radius: 14px;
  border: 1px solid var(--card-border);
}
@media (max-width: 680px) {
  .ueber-person { flex-direction: column; align-items: center; }
  .ueber-photo { order: -1; width: 175px; margin-bottom: 4px; }
  .ueber-body { width: 100%; }
}

/* 17. Contact ========================================= */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(20px, 2.6vw, 32px);
  align-items: start;
}

/* --- Left: info column --- */
.contact-info { display: flex; flex-direction: column; gap: 22px; }
.contact-info > h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  letter-spacing: -0.025em;
  margin: 0;
}
.contact-info > p { font-size: 1rem; max-width: 460px; margin: 0; }

.channels {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.channel {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  color: var(--text);
  text-decoration: none;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
}
[data-theme="dark"] .channel {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
}
[data-theme="light"] .channel { background: #ffffff; box-shadow: var(--shadow-1); }
a.channel:hover {
  border-color: rgba(124,140,255,0.45);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -16px rgba(124,140,255,0.4);
  color: var(--text);
}
a.channel:hover .channel-arrow { transform: translateX(4px); color: var(--accent-2); }
.channel.static { cursor: default; }

.channel-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(95,213,230,0.12), rgba(124,140,255,0.10));
  border: 1px solid rgba(124,140,255,0.22);
  color: var(--accent-2);
}
.channel-icon svg { width: 22px; height: 22px; }
.channel-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.channel-label {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.channel-value {
  font-size: .98rem;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.channel-arrow {
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform var(--t), color var(--t);
}

.trust-row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: .82rem;
  color: var(--text-muted);
}
.trust-row li {
  display: inline-flex; align-items: center; gap: 8px;
}
.tr-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(52,211,153,0.16);
}

.next-steps { display: flex; flex-direction: column; gap: 14px; }
.next-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.next-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 0;
  position: relative;
}
.next-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 38px;
  bottom: -4px;
  width: 1px;
  background: linear-gradient(180deg, var(--hairline-strong), transparent);
}
.ns-num {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--panel-2);
  border: 1px solid var(--hairline-strong);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.next-list li > div { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.next-list strong { font-size: .94rem; color: var(--text); letter-spacing: -0.005em; }
.next-list em { font-style: normal; color: var(--text-muted); font-size: .86rem; }

/* --- Right: form card --- */
.contact-form-card {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 30px);
}
.form-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
  flex-wrap: wrap;
}
.form-head h3 { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.3rem); }
.form-head .eyebrow { margin-bottom: 8px; }
.form-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(245,176,66,0.10);
  border: 1px solid rgba(245,176,66,0.28);
  color: var(--warning);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
}
.fb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 6px var(--warning); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid .span-2 { grid-column: 1 / -1; }

.form-row { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.form-row label, .form-row legend {
  font-size: .8rem;
  color: var(--text);
  font-weight: 600;
  padding: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.label-hint {
  font-weight: 500;
  font-size: .72rem;
  color: var(--text-dim);
  letter-spacing: 0;
  text-transform: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.char-count {
  font-size: .7rem;
  color: var(--text-dim);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  transition: color var(--t-fast);
}
.char-count.warn { color: var(--warning); }
.char-count.over { color: var(--error); }

.form-row input, .form-row textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  color: var(--text);
  font: inherit;
  font-size: .96rem;
  transition: border-color var(--t-fast), background var(--t), box-shadow var(--t-fast);
}
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--text-dim); opacity: 1; }
.form-row input:hover, .form-row textarea:hover { border-color: var(--hairline-strong); }
.form-row input:focus, .form-row textarea:focus {
  outline: none;
  border-color: rgba(124,140,255,0.55);
  background: var(--panel);
  box-shadow: 0 0 0 4px rgba(124,140,255,0.14);
}
.form-row textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.form-row.invalid input, .form-row.invalid textarea {
  border-color: rgba(239,107,107,0.6);
  box-shadow: 0 0 0 4px rgba(239,107,107,0.10);
}
.form-row.valid input, .form-row.valid textarea {
  border-color: rgba(52,211,153,0.45);
}
.field-error { font-size: .78rem; color: var(--error); min-height: 1em; }

.btn .btn-arrow { display: inline-block; transition: transform var(--t-fast); }
.btn-primary:hover .btn-arrow { transform: translateX(3px); }

.form-foot {
  font-size: .76rem;
  margin: 0;
  padding-top: 6px;
  border-top: 1px dashed var(--hairline);
  color: var(--text-dim);
}

/* Einwilligungen (DSGVO) */
.form-consent { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.consent-item {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .8rem; line-height: 1.5; color: var(--text-muted); cursor: pointer;
}
.consent-item input[type="checkbox"] {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.consent-item a { color: var(--accent); text-decoration: underline; }
.form-consent .req-star { color: var(--accent); }
.form-consent.invalid .consent-item:first-of-type { color: var(--error); }
.form-consent.invalid .consent-item:first-of-type input[type="checkbox"] {
  outline: 2px solid var(--error); outline-offset: 2px;
}

.chips-select { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; padding: 0; background: transparent; border: 0; width: auto; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.chips-select .chip {
  position: relative;
  background:
    linear-gradient(135deg, rgba(95,213,230,0.05), rgba(124,140,255,0.04) 50%, rgba(177,139,255,0.05));
  border: 1px solid var(--hairline);
  padding: 8px 14px 8px 12px;
  user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text);
  font-size: .8rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 10px -8px rgba(0,0,0,0.4);
  transition: transform var(--t-fast), border-color var(--t), box-shadow var(--t), background var(--t);
}
[data-theme="light"] .chips-select .chip {
  background: linear-gradient(135deg, rgba(10,169,192,0.05), rgba(37,99,235,0.04) 50%, rgba(138,92,246,0.05));
}
.chips-select .chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.chips-select .chip:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-strong);
  background:
    linear-gradient(135deg, rgba(95,213,230,0.08), rgba(124,140,255,0.06) 50%, rgba(177,139,255,0.08));
}
.chips-select .chip.selected {
  background:
    linear-gradient(135deg, rgba(95,213,230,0.16), rgba(124,140,255,0.14) 50%, rgba(177,139,255,0.16));
  border-color: rgba(124,140,255,0.55);
  color: var(--text);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 10px 22px -10px rgba(124,140,255,0.45);
}
.chips-select .chip.selected::before {
  background: var(--accent-grad);
  box-shadow: 0 0 8px rgba(95,213,230,0.6);
  transform: scale(1.15);
}

.form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.form-status { font-size: .88rem; color: var(--text-muted); }
.form-status.success { color: var(--success); font-weight: 600; }
.form-status.error { color: var(--error); font-weight: 600; }

.success-card {
  background: linear-gradient(135deg, rgba(52,211,153,0.12), rgba(95,213,230,0.08));
  border: 1px solid rgba(52,211,153,0.3);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px;
}
.success-card .check {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--success); color: #06231a;
  display: grid; place-items: center;
  font-weight: 800;
  flex-shrink: 0;
}
.success-card a { color: var(--accent-2); text-decoration: underline; word-break: break-word; }
.success-card > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.success-card p { margin: 0; font-size: .88rem; color: var(--text-muted); line-height: 1.45; }
.success-card strong { font-size: .98rem; color: var(--text); }

/* Legal pages (Impressum / Datenschutz) =============== */
.legal-section { padding-top: clamp(120px, 12vw, 170px); }
.legal-container { max-width: 820px; }
.legal-section .section-head { text-align: left; max-width: none; margin-bottom: clamp(28px, 4vw, 44px); }
.legal-section h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.legal-card { margin-bottom: 16px; padding: clamp(22px, 2.4vw, 30px); }
.legal-card h2 {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  margin-bottom: 14px;
  letter-spacing: -0.018em;
}
.legal-card h3 {
  font-size: .95rem;
  margin: 18px 0 8px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.legal-card p { font-size: .96rem; line-height: 1.65; color: var(--text-muted); }
.legal-card p strong, .legal-list strong { color: var(--text); font-weight: 600; }
.legal-card a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.legal-card a:hover { color: var(--text); }
.legal-card code {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: .85em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  color: var(--text);
}

.legal-list {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--text-muted);
  font-size: .94rem;
}
.legal-list.bullet {
  list-style: disc;
  padding-left: 22px;
}
.legal-list.bullet li { padding-left: 4px; }

.legal-toc { padding: clamp(20px, 2.2vw, 26px); margin-bottom: 22px; }
.legal-toc h2 {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 14px;
}
.legal-toc ol {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  counter-reset: tocnum;
}
.legal-toc li { counter-increment: tocnum; }
.legal-toc a {
  display: block;
  font-size: .9rem;
  color: var(--text-muted);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.legal-toc a::before {
  content: counter(tocnum, decimal-leading-zero) "  ";
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: .78rem;
  color: var(--text-dim);
  margin-right: 6px;
}
.legal-toc a:hover { color: var(--text); border-bottom-color: var(--hairline-strong); }

.legal-meta { margin-top: 24px; }

@media (max-width: 640px) {
  .legal-toc ol { grid-template-columns: 1fr; }
}

/* 18. Footer ========================================== */
.site-footer {
  margin-top: clamp(56px, 8vw, 100px);
  padding: clamp(40px, 5vw, 64px) 0 24px;
  border-top: 1px solid var(--hairline);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 28px;
}
.footer-brand strong { display: block; font-size: 1rem; margin-bottom: 8px; letter-spacing: .04em; }
.footer-brand p { font-size: .9rem; max-width: 360px; }
.footer-nav h4, .footer-legal h4 {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 12px; font-weight: 600;
}
.footer-nav ul, .footer-legal ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.footer-nav a, .footer-legal a { color: var(--text-muted); font-size: .88rem; }
.footer-nav a:hover, .footer-legal a:hover { color: var(--text); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: .82rem;
  color: var(--text-muted);
}

/* Easter Egg: Snake ==================================== */
.dot-btn {
  appearance: none; border: 0; padding: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff5f57;
  cursor: pointer;
  position: relative;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.dot-btn:hover { transform: scale(1.15); box-shadow: 0 0 0 3px rgba(255,95,87,0.18); }
.dot-btn::after {
  content: "×";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 9px; line-height: 1;
  color: #4d0000;
  font-weight: 800;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.dot-btn:hover::after { opacity: .9; }

.snake-modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  padding-top: max(20px, env(safe-area-inset-top, 0px));
  opacity: 0;
  transition: opacity var(--t);
}
.snake-modal.open { display: flex; opacity: 1; }
.snake-backdrop {
  position: absolute; inset: 0;
  background: rgba(7, 9, 15, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="light"] .snake-backdrop { background: rgba(20, 24, 40, 0.55); }

.snake-card {
  position: relative;
  width: 100%; max-width: 420px;
  max-height: 100%;
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    rgba(11, 14, 23, 0.95);
  border: 1px solid var(--hairline-strong);
  border-radius: 22px;
  box-shadow: var(--shadow-3);
  overflow: hidden;
  transform: translateY(8px) scale(.98);
  transition: transform var(--t);
}
[data-theme="light"] .snake-card { background: #ffffff; }
.snake-modal.open .snake-card { transform: translateY(0) scale(1); }

.snake-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
}
.snake-score { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; }
.snake-score strong {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: .95rem;
  color: var(--text);
}

.snake-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.snake-stage {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent),
    rgba(7, 9, 15, 0.85);
  aspect-ratio: 1 / 1;
  width: 100%;
  touch-action: none;
}
[data-theme="light"] .snake-stage { background: #0c1020; }
#snakeCanvas {
  display: block;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  touch-action: none;
}
.snake-hint {
  margin: 0;
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: .68rem;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: .04em;
}
.snake-hint .hint-mobile { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 600px) {
  .snake-hint .hint-desktop { display: none; }
  .snake-hint .hint-mobile  { display: inline; }
}

.snake-overlay, .snake-toast {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: rgba(7, 9, 15, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Overlays sit on the dark playfield, so text is always light
     regardless of the page theme. */
  color: #f0f3ff;
}
.snake-overlay strong, .snake-toast strong { color: #ffffff; }
.snake-overlay p, .snake-toast p { color: rgba(240, 243, 255, 0.78); }
.snake-overlay strong { font-size: 1.4rem; letter-spacing: -0.02em; }
.snake-overlay p { font-size: .9rem; max-width: 280px; margin: 0; }
.snake-overlay.hidden { display: none; }

.snake-toast .toast-step {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9eecf6;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(95,213,230,0.18);
  border: 1px solid rgba(95,213,230,0.40);
}
.snake-toast strong { font-size: 1.05rem; letter-spacing: -0.01em; max-width: 320px; }
.snake-toast p { font-size: .9rem; max-width: 320px; margin: 0; line-height: 1.5; }
/* Ghost button inside the toast – ensure it stays readable on the dark veil */
.snake-toast .btn-ghost {
  color: #f0f3ff;
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}
.snake-toast .btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.32);
}
.snake-toast-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.snake-toast[hidden] { display: none; }

/* Touch D-Pad — only shown on coarse pointers / mobile */
.snake-pad {
  display: none;
  margin-top: 6px;
}
.snake-pad-grid {
  display: grid;
  grid-template-columns: 56px 56px 56px;
  grid-template-rows: 56px 56px 56px;
  gap: 6px;
  justify-content: center;
}
.snake-pad button {
  appearance: none;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  color: var(--text);
  border-radius: 14px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background var(--t-fast), transform var(--t-fast);
}
.snake-pad button:active { background: rgba(124,140,255,0.18); transform: scale(0.95); }
.pad-up    { grid-column: 2; grid-row: 1; }
.pad-left  { grid-column: 1; grid-row: 2; }
.pad-down  { grid-column: 2; grid-row: 3; }
.pad-right { grid-column: 3; grid-row: 2; }

/* Mobile / coarse-pointer: replace D-Pad with full-screen swipe controls */
@media (hover: none) and (pointer: coarse), (max-width: 600px) {
  .snake-pad { display: none; }
  .snake-hint { display: block; }
  .snake-card {
    /* prevent the browser from interpreting swipes as scroll/zoom gestures */
    touch-action: none;
    overscroll-behavior: contain;
  }
  .snake-body { touch-action: none; }
}

/* Snake modal mobile sizing */
@media (max-width: 600px) {
  .snake-modal { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .snake-card { max-width: 100%; border-radius: 18px; }
  .snake-body { padding: 12px; gap: 10px; }
  .snake-head { padding: 10px 14px; }
  .snake-overlay strong { font-size: 1.2rem; }
  .snake-toast strong { font-size: 1rem; }
  .snake-toast p { font-size: .85rem; }
  .snake-pad-grid { grid-template-columns: 52px 52px 52px; grid-template-rows: 52px 52px 52px; }
}

/* 19. Floating helpers ================================ */
.to-top {
  position: fixed; right: 20px; bottom: 20px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--panel-strong);
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-2);
  font-size: 1rem;
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--t), transform var(--t);
  z-index: 80;
}
.to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.floating-cta {
  position: fixed; left: 50%; bottom: 16px;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  font-size: .88rem;
  box-shadow: var(--shadow-3);
  display: none;
  z-index: 80;
  opacity: 0;
  transition: opacity var(--t), transform var(--t);
}
.floating-cta.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 20. Reveal ========================================== */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow), transform var(--t-slow); }
.js .reveal.in { opacity: 1; transform: translateY(0); }

/* 21. Responsive ====================================== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .dashboard { max-width: 560px; margin: 0 auto; width: 100%; padding: 22px 28px 30px; }
  .dash-card.dash-secondary { right: -18px; top: -18px; width: 94%; transform: rotate(2deg); }
  .dash-card.dash-tertiary  { left: -22px; bottom: -22px; width: 90%; transform: rotate(-2deg); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  /* Ablauf wird zur senkrechten Zeitleiste: Kreise links, Linie verbindet sie. */
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .step { text-align: left; padding-left: 64px; padding-bottom: 28px; }
  .step:last-child { padding-bottom: 0; }
  .step-num { position: absolute; left: 0; top: 0; margin: 0; }
  .step::after {
    top: var(--tl-dot);
    left: calc(var(--tl-dot) / 2 - 1px);
    width: 2px;
    height: calc(100% - var(--tl-dot));
    background: var(--accent-grad);
  }
  .tech-groups { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .profile-facts li { white-space: normal; }
  .pf-value { white-space: normal; overflow: visible; text-overflow: clip; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .dash-card.dash-secondary { right: -16px; top: -16px; }
  .dash-card.dash-tertiary  { left: -20px; bottom: -22px; }
}

@media (max-width: 768px) {
  html { scroll-padding-top: 78px; }

  /* Header */
  .nav-list, .header-cta { display: none; }
  .burger { display: flex; }
  .site-header { top: 6px; padding: 0 4px; margin-top: 6px; }
  .header-inner { padding: 5px 5px 5px 8px; gap: 6px; border-radius: 16px; }
  .brand-claim { display: none; }
  .brand-mark { width: 32px; height: 32px; font-size: .72rem; }
  .brand-text strong { font-size: .88rem; }

  /* Layout — kompaktere vertikale Rhythmus */
  .grid-3, .grid-2 { grid-template-columns: 1fr; gap: clamp(10px, 2.5vw, 14px); }
  .tech-groups { grid-template-columns: 1fr; gap: clamp(12px, 3vw, 16px); }
  .principles { grid-template-columns: 1fr; }
  .tech-foot { font-size: .84rem; padding: 10px 12px; gap: 6px; }
  .timeline { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 18px; }
  .footer-bottom { flex-direction: column; gap: 6px; font-size: .9rem; }
  /* Rechtliche Seiten: weniger Luft nach dem Header */
  .legal-section { padding-top: clamp(92px, 10vw, 130px); }
  .legal-section .section-head { margin-bottom: clamp(22px, 4vw, 36px); }
  .legal-section h1 { font-size: clamp(1.75rem, 6vw, 2.35rem); }
  .section { padding: 40px 0; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .hero { padding: 74px 0 20px; }
  .hero-title { font-size: clamp(1.75rem, 6.5vw, 2.3rem); line-height: 1.08; }
  .hero-sub { font-size: .93rem; margin-bottom: 20px; }
  .hero-ctas { gap: 8px; margin-bottom: 20px; }
  .hero-ctas .btn { flex: 1; padding: 12px 16px; }
  .trust-chips { gap: 6px; margin-top: -2px; }
  .trust-chips li { font-size: .78rem; padding: 6px 11px 6px 9px; }
  .section-lead { font-size: clamp(0.92rem, 2.9vw, 1.02rem); }

  /* Floating helpers */
  .floating-cta {
    display: block;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: 10px; right: 10px;
    transform: translateY(16px);
    width: auto; max-width: none;
    text-align: center;
    padding: 12px 16px;
    font-size: .84rem;
  }
  .floating-cta.visible { transform: translateY(0); }
  .to-top {
    right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }

  /* ETL stack: keep overlapping look on mobile, smaller offsets */
  .dashboard { padding: 18px 14px 22px; margin: 0; max-width: 100%; }
  .dash-card.dash-secondary {
    right: -10px; top: -14px; width: 95%;
    transform: rotate(2deg);
    opacity: .92;
  }
  .dash-card.dash-tertiary {
    left: -14px; bottom: -20px; width: 92%;
    transform: rotate(-2.2deg);
    opacity: .82;
    filter: saturate(0.9) blur(0.3px);
  }
  /* Touch: tap a card to bring to front (focus-within fired by tabindex on .dash-card) */
  .dash-stack .dash-card:focus-within,
  .dash-stack .dash-card:active {
    z-index: 10;
    opacity: 1;
    filter: none;
    transform: rotate(0deg) scale(1.01);
    box-shadow: var(--shadow-3), 0 24px 60px -20px rgba(95,213,230,0.3);
  }
  .dash-card { border-radius: 18px; }
  .dash-body { padding: 14px; gap: 10px; }
  .dash-body.compact { padding: 12px; gap: 8px; }
  .dash-strip { grid-template-columns: 1fr; }
  .dash-tabs { padding: 5px 8px; }
  .dash-tab { padding: 6px 10px; font-size: .7rem; }
  .pipeline { gap: 22px 10px; min-height: 168px; }
  .node { padding: 7px 9px; }
  .node-tag { font-size: .5rem; }
  .node-name { font-size: .76rem; }
  .node-meta { font-size: .58rem; }
  .pipe-head { gap: 6px; }
  .meta-chip { font-size: .62rem; padding: 3px 6px; }
  .conn-list li { grid-template-columns: 22px 1fr auto; gap: 8px; padding: 7px 2px; font-size: .76rem; }
  .conn-list .conn-meta { display: none; }
  .run-table td { padding: 7px 4px; font-size: .7rem; }
  .run-table .rt-meta { display: none; }
  .dash-log { font-size: .68rem; }
  .log-row { grid-template-columns: 38px 1fr auto; gap: 8px; }
  .log-time { font-size: .58rem; }

  /* Filter chips: horizontal scroll */
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    padding: 5px;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chips .chip { white-space: nowrap; flex-shrink: 0; }

  /* --- Contact (mobile) --- */
  .contact-grid { gap: 18px; }
  .contact-info { gap: 14px; }
  .contact-info > h3 { font-size: clamp(1.25rem, 5.6vw, 1.5rem); }
  .contact-info > p { font-size: .95rem; }

  /* Channels: stack icon + body, allow value to wrap */
  .channel { grid-template-columns: 40px 1fr auto; padding: 10px 12px; gap: 10px; }
  .channel-icon { width: 40px; height: 40px; border-radius: 12px; }
  .channel-icon svg { width: 20px; height: 20px; }
  .channel-label { font-size: .62rem; letter-spacing: .12em; }
  .channel-value { font-size: .92rem; white-space: normal; word-break: break-word; }
  .channel-arrow { font-size: 1.05rem; }

  .trust-row { gap: 6px 12px; font-size: .78rem; }

  .next-steps { gap: 10px; }
  .next-list li { grid-template-columns: 28px 1fr; gap: 12px; padding: 8px 0; }
  .ns-num { width: 26px; height: 26px; font-size: .76rem; }
  .next-list li:not(:last-child)::after { left: 13px; top: 34px; bottom: -2px; }
  .next-list strong { font-size: .92rem; }
  .next-list em { font-size: .82rem; }

  /* Form card */
  .contact-form-card { padding: 15px 16px; gap: 10px; }
  .form-head { gap: 8px; align-items: center; }
  .form-head h3 { font-size: 1.1rem; }
  .form-head .eyebrow { margin-bottom: 6px; }
  .form-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Inputs: bigger touch targets, font-size:16px prevents iOS zoom */
  .form-row input, .form-row textarea {
    padding: 14px 14px;
    font-size: 16px;
    border-radius: 12px;
    -webkit-appearance: none;
    appearance: none;
  }
  .form-row textarea { min-height: 110px; }
  .form-row label, .form-row legend { font-size: .82rem; }
  .label-hint { font-size: .7rem; }
  .char-count { font-size: .68rem; }
  .field-error { font-size: .76rem; }

  /* Project type chips: bigger tap targets */
  .chips-select { gap: 8px; }
  .chips-select .chip { padding: 10px 14px 10px 12px; font-size: .85rem; min-height: 40px; }

  .form-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .form-actions .btn { width: 100%; padding: 12px 18px; }
  .form-status { text-align: center; }
  .form-foot { font-size: .74rem; padding-top: 8px; }

  /* Success card after submit: stack icon + text */
  .success-card { flex-direction: row; align-items: flex-start; padding: 14px; }
  .success-card a { word-break: break-word; }

  /* Cards: kompakter */
  .card { padding: 14px 15px; }
  .svc-icon { width: 34px; height: 34px; margin-bottom: 12px; border-radius: 10px; }
  .card-top { margin-bottom: 10px; gap: 10px; }
  .mini-tag { font-size: .64rem; padding: 4px 8px; }
  .card p { font-size: .9rem; }
  .legal-card { padding: 15px 16px; }
  .section-head { margin-bottom: clamp(22px, 4.5vw, 30px); }
  .section-head .eyebrow { margin-bottom: 10px; font-size: .68rem; letter-spacing: .13em; }
  .profile-monogram { width: 54px; height: 54px; font-size: 1.28rem; }

  .ref-grid { gap: 12px; }
  .ref-tile { padding: 13px 14px; border-radius: 12px; }

  /* Mobile menu polish */
  .mobile-menu {
    padding: 72px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    --mm-pad-top: 72px;
    --mm-pad-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-menu-card { border-radius: 18px; }
  .mobile-menu-inner { padding: 12px; }
  .mobile-nav-list { margin-bottom: 10px; gap: 3px; }
  .mobile-nav-list a { padding: 11px 13px; font-size: .94rem; border-radius: 12px; }
  .lang-switch.lang-switch-mobile { margin: 4px 0 8px; padding: 3px; font-size: .84rem; }
  .lang-switch.lang-switch-mobile .lang-link { height: 34px; min-height: 34px; }
  .mobile-menu-inner .btn-block { padding: 11px 16px; font-size: .88rem; }
}

@media (max-width: 480px) {
  html { scroll-padding-top: 72px; }
  :root { --gutter: 14px; }
  .hero { padding-top: 72px; padding-bottom: 12px; }
  .site-header { margin-top: 4px; top: 4px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .btn { width: 100%; }
  .header-inner { padding: 4px 4px 4px 6px; border-radius: 15px; }
  .brand-mark { width: 28px; height: 28px; font-size: .65rem; }
  .brand-text strong { font-size: .82rem; }
  .theme-switch-track { width: 50px; height: 28px; }
  .theme-switch-thumb { width: 22px; height: 22px; top: 2px; left: 2px; }
  [data-theme="light"] .theme-switch-thumb { transform: translateX(22px); }
  .ts-glyph-moon { left: 8px; }
  .ts-glyph-sun { right: 8px; }
  .header-actions { gap: 6px; }
  .burger { width: 38px; height: 38px; }

  /* Pipeline at very small width */
  .pipeline { min-height: 150px; }
  .node { padding: 6px 7px; }
  .node-name { font-size: .72rem; }
  .pipe-svg { display: none; } /* lines look cramped at this width — node grid still conveys structure */

  /* Trust chips: a tad tighter */
  .trust-chips { gap: 5px; }
  .trust-chips li { font-size: .74rem; padding: 5px 10px 5px 8px; }
  .mobile-menu .mobile-nav-list a { padding: 10px 11px; font-size: .9rem; }

  /* Section heads switch back to left for editorial feel on tiny screens, except `.center` */
  .legal-toc ol { grid-template-columns: 1fr; }

  /* Contact (very small screens) */
  .contact-form-card { padding: 14px; border-radius: 16px; }
  .channel { padding: 9px 11px; gap: 9px; grid-template-columns: 36px 1fr auto; }
  .channel-icon { width: 36px; height: 36px; border-radius: 11px; }
  .channel-icon svg { width: 18px; height: 18px; }
  .channel-value { font-size: .9rem; }
  .channel-arrow { display: none; } /* save space; whole row remains tappable */
  .next-list li { padding: 6px 0; }
  .form-row input, .form-row textarea { padding: 12px 13px; }
  .form-row textarea { min-height: 100px; }
  .chips-select .chip { padding: 9px 12px 9px 11px; font-size: .82rem; min-height: 38px; }
  .form-foot { font-size: .72rem; }
}

/* 21b. CTA hover-leave hint =========================== */
.cta-hint {
  position: fixed;
  z-index: 95; /* below sticky header (100), above content */
  transform: translate(-50%, -100%) translateY(4px);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.7,.3,1);
  max-width: min(80vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.cta-hint::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px; height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 2px;
}
.cta-hint.show {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-2px);
}

/* Variant: bubble shown BELOW the anchor (used for header CTA so it
   doesn't overlap the floating navigation). */
.cta-hint.below {
  transform: translate(-50%, 0) translateY(-4px);
}
.cta-hint.below.show {
  transform: translate(-50%, 0) translateY(2px);
}
.cta-hint.below::after {
  bottom: auto;
  top: -4px;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  .cta-hint { font-size: 0.74rem; padding: 6px 10px; }
}

/* 21c. Cookie / Consent Banner ======================== */
.cookie-banner {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 1100;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center;
  pointer-events: none;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 360ms cubic-bezier(.2,.7,.3,1), opacity 280ms ease;
}
.cookie-banner.show { transform: translateY(0); opacity: 1; }

.cookie-card {
  pointer-events: auto;
  width: 100%;
  max-width: 720px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--panel-strong);
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
[data-theme="light"] .cookie-card { background: rgba(255,255,255,0.92); }

.cookie-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(95,213,230,0.15), rgba(124,140,255,0.12));
  border: 1px solid rgba(124,140,255,0.25);
  color: var(--accent-2);
}
.cookie-icon svg { width: 22px; height: 22px; }

.cookie-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cookie-body strong {
  font-size: .98rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.cookie-body p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.cookie-body em { font-style: normal; color: var(--text); font-weight: 600; }

.cookie-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* "Was wird gespeichert?" disclosure */
.cookie-details {
  margin-top: 8px;
  font-size: .8rem;
  color: var(--text-muted);
}
.cookie-details summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 0;
  user-select: none;
}
.cookie-details summary::-webkit-details-marker { display: none; }
.cookie-details summary::before {
  content: '+';
  display: inline-grid; place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--hairline-strong);
  font-size: .9rem;
  line-height: 1;
  color: var(--text);
  transition: transform var(--t-fast);
}
.cookie-details[open] summary::before { content: '\2013'; }
.cookie-details ul {
  margin: 8px 0 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: .78rem;
  line-height: 1.5;
}
.cookie-details code {
  font-size: .76rem;
  background: var(--panel-2);
  padding: 1px 5px; border-radius: 5px;
  border: 1px solid var(--hairline);
}

@media (max-width: 720px) {
  .cookie-banner { padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
  .cookie-card {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas:
      "icon body"
      "actions actions";
    gap: 10px 12px;
    padding: 12px 14px;
    border-radius: 14px;
  }
  .cookie-icon { width: 36px; height: 36px; grid-area: icon; }
  .cookie-icon svg { width: 18px; height: 18px; }
  .cookie-body { grid-area: body; }
  .cookie-body strong { font-size: .91rem; }
  .cookie-body p { font-size: .76rem; }
  .cookie-actions {
    grid-area: actions;
    width: 100%;
    justify-content: stretch;
  }
  .cookie-actions .btn { flex: 1; }
}
@media (max-width: 420px) {
  .cookie-actions { flex-direction: column-reverse; gap: 6px; }
  .cookie-actions .btn { width: 100%; }
}

/* The cookie banner takes precedence over the floating CTA at the bottom.
   Once the user dismisses the banner, the CTA becomes visible/usable again. */
.floating-cta { z-index: 79; }

/* 22. Reduced motion ================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
  .dash-card { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Typewriter effect for [data-typewriter] ================ */
[data-typewriter] {
  display: inline-block;
  min-height: 1em;
}
[data-typewriter].tw-pending,
[data-typewriter].tw-typing {
  position: relative;
}
[data-typewriter].tw-pending::after,
[data-typewriter].tw-typing::after {
  content: "";
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  margin-left: 2px;
  background: var(--accent-2);
  vertical-align: -0.12em;
  animation: tw-blink 0.9s steps(2, jump-none) infinite;
}
[data-typewriter].tw-typed::after {
  content: "";
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  margin-left: 2px;
  background: var(--accent-2);
  vertical-align: -0.12em;
  animation: tw-blink 0.9s steps(2, jump-none) 4;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes tw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  [data-typewriter].tw-pending::after,
  [data-typewriter].tw-typing::after,
  [data-typewriter].tw-typed::after { display: none; animation: none; }
}


/* ============================================================
   CV / Werdegang / Referenzen (added 2026-05)
   ============================================================ */

.cv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 860px) {
  .cv-grid { grid-template-columns: 1fr; }
}

.cv-h {
  margin: 0 0 12px;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.cv-h-sub { margin-top: 22px; }

.cv-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cv-list li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--text);
}
.cv-list li:last-child { border-bottom: none; }

.cv-time {
  color: var(--accent-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  white-space: nowrap;
}
.cv-role { color: var(--text); }
.cv-foot { color: var(--text-muted); }

.cv-foot { margin-top: 16px; }

@media (max-width: 520px) {
  .cv-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .cv-time { font-size: 0.78rem; }
}

/* Referenzen grid */
.ref-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.ref-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
[data-theme="light"] .ref-tile {
  box-shadow: var(--shadow-2);
}
.ref-tile:hover {
  border-color: var(--accent-2);
  transform: translateY(-2px);
}
.ref-tile strong {
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--text);
}
.ref-tile span {
  font-size: 0.82rem;
  color: var(--text-muted);
}


/* ============================================================
   Brand logo (image-based, replaces DX monogram - 2026-05)
   ============================================================ */

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo {
  height: 64px;
  width: auto;
  display: block;
  transition: transform .2s ease;
}
.brand:hover .brand-logo { transform: translateY(-1px); }

/* Theme-abhängiges Logo: zwei SVG-Varianten (hell/dunkel), kein Filter-Hack. */
.brand-logo.logo-dark { display: none; }
[data-theme="dark"] .brand-logo.logo-light { display: none; }
[data-theme="dark"] .brand-logo.logo-dark { display: block; }

/* Demo-Sektion: Anruf-CTA mit Nummer */
.demo-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--r-xl);
  background: var(--panel-2);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.demo-card::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 120% at 85% 10%, rgba(124,140,255,0.10), transparent 60%);
}
.demo-number {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: clamp(1.35rem, 3.4vw, 2rem);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
  padding: 14px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline-strong);
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast), box-shadow var(--t), border-color var(--t);
}
.demo-number:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgba(124,140,255,0.5); color: var(--text); }
.demo-number .dn-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  animation: ring-pulse 2.4s ease-out infinite;
}
.demo-number .dn-icon svg { width: 20px; height: 20px; }
@keyframes ring-pulse {
  0% { box-shadow: 0 0 0 0 rgba(124,140,255,0.45); }
  70% { box-shadow: 0 0 0 12px rgba(124,140,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,140,255,0); }
}
@media (prefers-reduced-motion: reduce) { .demo-number .dn-icon { animation: none; } }
.demo-note { margin-top: 12px; font-size: .82rem; color: var(--text-dim); }
.demo-lead { margin: 0 0 12px; font-weight: 600; color: var(--text); font-size: .95rem; }
.demo-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.demo-points li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-muted); font-size: .95rem; }
.demo-points .dp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex-shrink: 0; }
@media (max-width: 900px) {
  .demo-card { grid-template-columns: 1fr; }
}

/* Skepsis — Einwände offen beantwortet (#skepsis)
   Die Karte führt mit dem Einwand als Zitat, danach die Antwort im Fließtext.
   Der Einwand ist bewusst laut (Akzentbalken), die Antwort bewusst ruhig. */
/* Der Einwand ist ein h3 (nicht nur optisch fett): sonst hätte die Sektion für
   Screenreader gar keine Gliederung — wer per H-Taste springt, überspränge sie ganz. */
.skeptik h3.skeptik-q {
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 12px;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  text-wrap: balance;
}
.skeptik p { margin-bottom: 10px; }
.skeptik p:last-child { margin-bottom: 0; }
/* Sprunglinks im Fließtext müssen ohne Farbsehen erkennbar sein (WCAG 1.4.1):
   global gilt `a { color: inherit; text-decoration: none }` – hier bewusst zurückgeholt. */
.skeptik p a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.skeptik p a:hover { color: var(--text); text-decoration-thickness: 2px; }
/* Der schwerste Einwand („Sie sind einer") steht über die volle Breite. */
.skeptik-wide { grid-column: 1 / -1; }
.skeptik-wide p { max-width: 66ch; }
/* Zielgruppe liest oft mit Lesebrille: Fließtext in diesen beiden Sektionen
   auf dem Handy nicht unter 16px drücken (global wären es .9rem = 14,4px). */
@media (max-width: 680px) {
  .skeptik h3.skeptik-q { font-size: 1.02rem; padding-left: 11px; }
  .skeptik p,
  #ueber .ueber-portrait p { font-size: 1rem; line-height: 1.65; }
}

/* FAQ */
.faq-list { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--panel);
  padding: 0;
  overflow: hidden;
  transition: border-color var(--t);
}
.faq-item[open] { border-color: var(--hairline-strong); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  font-weight: 600;
  font-size: .98rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.2rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 20px 18px; color: var(--text-muted); font-size: .93rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Empathie-Zeile im Hero („KI ersetzt niemanden …") */
.hero-note {
  margin: 20px 0 0;
  padding: 13px 16px;
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 54ch;
}
.hero-note strong { color: var(--text); font-weight: 600; }

/* Optional-Badge auf den Ausbau-Karten */
.opt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--panel-2);
  border: 1px solid var(--hairline-strong);
  padding: 3px 10px; border-radius: var(--r-pill);
  margin-bottom: 12px;
  width: fit-content;
}
.svc-optional { border-style: dashed; }

/* Breite Hervorhebungs-Karte im Leistungs-Raster (z. B. „Zwei Gespräche
   gleichzeitig"). Spannt über alle Spalten – so steht sie nicht als Waise in
   einer eigenen Reihe, sondern wirkt bewusst als Mehrwert-Highlight. */
.svc-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}
.svc-wide .svc-icon { margin-bottom: 0; }
.svc-wide h3 { margin-top: 2px; }
.svc-wide p { max-width: 78ch; }
@media (max-width: 700px) {
  .svc-wide { grid-template-columns: 1fr; gap: 12px; }
}

/* Zwischenüberschrift innerhalb Leistungen (Standard / Ausbau) */
.svc-split {
  text-align: center;
  margin: 52px auto 6px;
  max-width: 640px;
}
.svc-split .eyebrow { display: inline-flex; }
.svc-split h3 { font-size: 1.15rem; margin: 8px 0 6px; }
.svc-split p { color: var(--text-muted); font-size: .95rem; margin: 0; }

/* Vergleich Anrufbeantworter vs. wivanto – zwei gegenübergestellte Karten */
.vs-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 4px;
}
.vs-mid {
  display: grid; place-items: center;
  padding: 0 6px;
}
.vs-badge {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: var(--accent-grad);
  box-shadow: var(--shadow-2);
  border: 4px solid var(--bg);
}
.vs-card {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--panel);
  padding: clamp(22px, 2.8vw, 32px);
  height: 100%;
}
.vs-card.vs-us {
  background: var(--panel-2);
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-2);
}
.vs-flag {
  position: absolute; top: 0; right: 22px;
  transform: translateY(-50%);
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: var(--accent-grad);
  padding: 4px 12px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}
.vs-head { display: flex; align-items: center; gap: 13px; }
.vs-ico {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; flex-shrink: 0;
}
.vs-ico svg { width: 24px; height: 24px; }
.vs-ab .vs-ico { background: var(--panel-2); color: var(--text-dim); }
.vs-us .vs-ico { background: var(--accent-grad); color: #fff; }
.vs-head h3 { margin: 0; font-size: 1.08rem; line-height: 1.2; }
.vs-sub { display: block; font-size: .8rem; color: var(--text-muted); font-weight: 400; margin-top: 3px; }
.vs-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.vs-list li {
  position: relative;
  padding-left: 33px;
  font-size: .92rem; line-height: 1.5;
}
.vs-mark {
  position: absolute; left: 0; top: 2px;
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 700; line-height: 1;
}
.vs-ab .vs-list li { color: var(--text-muted); }
.vs-ab .vs-mark { background: transparent; border: 1.5px solid var(--hairline-strong); color: var(--text-dim); }
.vs-us .vs-list li { color: var(--text); }
.vs-us .vs-list li strong { color: var(--accent); font-weight: 600; }
.vs-us .vs-mark { background: var(--accent); color: #fff; }

@media (max-width: 820px) {
  .vs-compare { grid-template-columns: 1fr; gap: 14px; }
  .vs-mid { padding: 2px 0; }
  .vs-badge { width: 46px; height: 46px; font-size: .74rem; }
  .vs-flag { right: 16px; }
}

/* Merksatz steht ÜBER den Karten – Abstand deshalb nach unten, nicht nach oben. */
.compare-kicker {
  text-align: center; margin: 0 auto 30px; max-width: 680px;
  font-size: 1.08rem; font-weight: 600; color: var(--text);
}
.compare-kicker strong { color: var(--accent); }

@media (max-width: 900px) {
  .brand-logo { height: 50px; }
}
@media (max-width: 480px) {
  .brand-logo { height: 42px; }
}

/* Blaue Kontur, abgestuft: dezent für Standard-Kästen, kräftig für Schlüssel-Kästen.
   So lenkt das Blau den Blick, statt dass jede Box gleich laut um Aufmerksamkeit ringt. */
:root {
  --card-border: rgba(124,140,255,0.24);
  --card-border-hover: rgba(124,140,255,0.60);
  --card-border-key: rgba(124,140,255,0.80);
}
[data-theme="light"] {
  --card-border: rgba(37,99,235,0.18);
  --card-border-hover: rgba(37,99,235,0.45);
  --card-border-key: rgba(37,99,235,0.62);
}

/* Stufe 1 – ruhige Grundmenge (.step fehlt bewusst: der Ablauf ist eine
   Zeitleiste ohne Kästen, siehe Abschnitt Timeline) */
.card,
.vs-card,
.faq-item,
.channel { border-color: var(--card-border); border-width: 1px; }

/* Stufe 2 – Hover hebt an */
.card:hover,
.channel:hover,
.faq-item:hover,
.faq-item[open] { border-color: var(--card-border-hover); }

/* Stufe 3 – Schlüssel-Kästen: Demo-CTA, Empfohlen-Karte, Preis-/Über-Karten,
   breite Mehrwert-Karte */
.demo-card,
.vs-card.vs-us,
.card.premium,
.card.skeptik-wide,
.card.svc-wide { border-color: var(--card-border-key); border-width: 2px; }
.card.premium:hover,
.card.skeptik-wide:hover,
.card.svc-wide:hover,
.demo-card:hover { border-color: var(--card-border-key); }

/* ========= Theme-Toggle-Button (gemeinsam mit leuchtfeuer.css) ========= */
.theme-toggle{
  background:transparent;
  border:1px solid var(--hairline);
  color:var(--text-muted);
  width:40px;height:40px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
  margin-left:8px;
  flex-shrink:0;
}
.theme-toggle:hover{
  color:var(--accent-2);
  border-color:var(--accent-2);
  background:rgba(95,213,230,.06);
}
.theme-toggle:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.theme-icon{display:none}
.theme-icon-moon{display:block}
[data-theme="light"] .theme-icon-moon{display:none}
[data-theme="light"] .theme-icon-sun{display:block}