/* =====================================================
   datrexx — Design System (refined)
   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
   ===================================================== */

/* 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);
  /* Deckend, damit beim Scrollen nichts durch die Kopfzeile schimmert. */
  --header-bg: #0b0e17;
  --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);
  --header-bg: #ffffff;
  --hairline: rgba(15, 18, 28, 0.08);
  --hairline-strong: rgba(15, 18, 28, 0.14);

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

  --accent: #4f5dff;
  --accent-2: #0aa9c0;
  --accent-3: #8a5cf6;
  --accent-grad: linear-gradient(120deg, #0aa9c0 0%, #4f5dff 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(79,93,255,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: -apple-system, BlinkMacSystemFont, "Inter", "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(79,93,255,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); }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 8px;
}
::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;
  color: var(--text-dim);
  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;
}
.svc-icon::before {
  content: "";
  width: 14px; height: 14px;
  border: 1.6px solid currentColor;
  border-radius: 4px;
  background:
    linear-gradient(currentColor, currentColor) 0 50%/100% 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 0/1.6px 100% no-repeat;
  background-clip: padding-box;
  opacity: .9;
}
.svc-icon.i-db::before { border-radius: 50%/24%; height: 16px; background: linear-gradient(currentColor,currentColor) 0 35%/100% 1.4px no-repeat, linear-gradient(currentColor,currentColor) 0 65%/100% 1.4px no-repeat; }
.svc-icon.i-link::before { width: 18px; height: 8px; border-radius: 999px; background: linear-gradient(currentColor,currentColor) 50% 50%/4px 1.6px no-repeat; }
.svc-icon.i-web::before { width: 18px; height: 12px; border-radius: 3px; background: linear-gradient(currentColor,currentColor) 0 28%/100% 1.4px no-repeat; }
.svc-icon.i-bi::before { width: 16px; height: 14px; border-radius: 2px; background: linear-gradient(currentColor,currentColor) 14% 100%/3px 40% no-repeat, linear-gradient(currentColor,currentColor) 47% 100%/3px 70% no-repeat, linear-gradient(currentColor,currentColor) 80% 100%/3px 55% no-repeat; border-bottom-width: 1.6px; }
.svc-icon.i-auto::before { width: 16px; height: 16px; border-radius: 50%; border-style: dashed; }
.svc-icon.i-mig::before { width: 18px; height: 12px; border-radius: 3px; background: linear-gradient(currentColor,currentColor) 50% 50%/8px 1.4px no-repeat; }

/* 7. Header =========================================== */
.site-header {
  position: sticky; top: 14px;
  z-index: 100;
  margin: 14px auto 0;
  max-width: calc(var(--container) + 24px);
  padding: 0 12px;
}
/* Deckel fuer den Streifen UEBER der schwebenden Leiste: ohne ihn laeuft der
   Seiteninhalt im 14-px-Spalt sichtbar an der Kopfzeile vorbei. Liegt dank
   z-index: -1 hinter der Leiste, aber vor dem Seiteninhalt, und blendet nach
   unten weich aus, damit keine harte Kante entsteht. */
.site-header::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Deckend bis knapp unter die Leiste (Unterkante bei 90 px), danach ein
     kurzer weicher Auslauf von 10 px — sonst steht beim Scrollen ein halb
     durchscheinendes Wort unter der Leiste. */
  height: 100px;
  background: linear-gradient(to bottom,
    var(--bg) 0,
    var(--bg) 90%,
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.header-inner {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
  padding: 8px 14px 8px 8px;
  background: var(--header-bg);
  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 TO THE LEFT, reaching its full length when the user has
   scrolled to the very bottom of the page.
   Position (right/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 */
  right: 0;      /* set from JS to the left edge of the logo */
  left: auto;    /* the bar is anchored right and grows to the LEFT */
  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, #27aee5);
  /* square where it meets the logo stroke (right), rounded at the growing end (left) */
  border-radius: 999px 0 0 999px;
  pointer-events: none;
  /* Stacking inside .header-inner:
     - .brand          z-index: 1  (logo is below the bar so the line covers
                                    the stroke inside the asset)
     - .primary-nav, .header-actions z-index: 3 (nav pill and switches)
     - .brand-highlight z-index: 4  (the bar itself — it runs ON TOP of the
                                    nav pill and the switches so the growing
                                    line stays visible the whole way)    */
  z-index: 4;
  will-change: width;
}
[data-theme="dark"] .brand-highlight {
  /* matches the logo stroke AFTER invert(1) hue-rotate(180deg): #27aee5 -> #0083ba */
  background: var(--brand-hl-color-dark, #0083ba);
}
.brand          { position: relative; z-index: 1; }
/* Logo sitzt rechts (wie auf dem Briefbogen); die Navigation haelt die linke
   Seite, Sprachschalter/Theme/CTA ruecken an das Logo heran. */
.primary-nav    { margin-right: auto; }
.header-actions { min-height: 42px; align-items: center; }
.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;
  /* 5 px statt 8 px oben/unten: die Pille wird 42 statt 48 px hoch, damit das
     Logo hoeher ruecken kann, ohne dass der Strich ans Menue stoesst. */
  padding: 5px 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(79,93,255,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; }

.hero-spezial strong { color: var(--text); }
.hero-spezial a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.hero-spezial a:hover { text-decoration: underline; }

.subpage .card p + p { margin-top: .75rem; }
.subpage .grid + p { margin-top: 1rem; }

/* Index measurement matrix */
.messmatrix-wrap { overflow-x: auto; }
.messmatrix-wrap p + p { margin-top: .9rem; }
.messmatrix {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}
.messmatrix caption {
  text-align: left;
  font-size: .85rem;
  color: var(--text-muted);
  padding-bottom: .75rem;
}
.messmatrix th, .messmatrix td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  font-size: .9rem;
  white-space: nowrap;
}
.messmatrix thead th {
  font-size: .78rem;
  color: var(--text-dim);
  font-weight: 600;
  text-align: right;
}
.messmatrix thead th:first-child, .messmatrix tbody th { text-align: left; }
.messmatrix tbody th { font-weight: 500; color: var(--text); }
.messmatrix td { text-align: right; color: var(--text-muted); }
.messmatrix td span { color: var(--accent-2); font-weight: 600; margin-left: .35rem; }
.messmatrix tbody tr:nth-last-child(-n+2) th,
.messmatrix tbody tr:nth-last-child(-n+2) td { color: var(--text); }
.messmatrix tbody tr:last-child th, .messmatrix tbody tr:last-child td { border-bottom: 0; }

/* Benchmark & Metric Highlights (Vorher/Nachher) */
.val-bad {
  color: #ff5f57;
  font-weight: 700;
}
.val-good {
  color: #28c840;
  font-weight: 700;
}
[data-theme="light"] .val-bad {
  color: #c92a2a;
}
[data-theme="light"] .val-good {
  color: #15803d;
}

/* Badges / Chips with red/green status */
.chips li.chip-bad, .chips-soft li.chip-bad {
  border-color: rgba(239, 107, 107, 0.45);
  background: rgba(239, 107, 107, 0.08);
}
[data-theme="light"] .chips li.chip-bad, [data-theme="light"] .chips-soft li.chip-bad {
  border-color: rgba(201, 42, 42, 0.35);
  background: rgba(201, 42, 42, 0.06);
}
.chips li.chip-bad::before, .chips-soft li.chip-bad::before {
  background: #ff5f57 !important;
  box-shadow: 0 0 8px rgba(255, 95, 87, 0.6) !important;
}
[data-theme="light"] .chips li.chip-bad::before, [data-theme="light"] .chips-soft li.chip-bad::before {
  background: #c92a2a !important;
}

.chips li.chip-good, .chips-soft li.chip-good {
  border-color: rgba(40, 200, 64, 0.45);
  background: rgba(40, 200, 64, 0.08);
}
[data-theme="light"] .chips li.chip-good, [data-theme="light"] .chips-soft li.chip-good {
  border-color: rgba(21, 128, 61, 0.35);
  background: rgba(21, 128, 61, 0.06);
}
.chips li.chip-good::before, .chips-soft li.chip-good::before {
  background: #28c840 !important;
  box-shadow: 0 0 8px rgba(40, 200, 64, 0.6) !important;
}
[data-theme="light"] .chips li.chip-good::before, [data-theme="light"] .chips-soft li.chip-good::before {
  background: #15803d !important;
}
/* Tabular benchmark comparison chips (.chips-table) */
.chips-table {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  grid-template-columns: var(--cols, 8px auto max-content max-content auto max-content);
}

.chips-table li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: 0 10px;
  padding: 8px 16px 8px 14px;
  border-radius: var(--r-pill);
  box-sizing: border-box;
  font-size: .84rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.chips-table li::before {
  justify-self: center;
}

.chips-table .tb-name {
  font-weight: 600;
}

.chips-table .tb-val,
.chips-table .tb-val2 {
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 46px;
}

.chips-table .tb-cpu,
.chips-table .tb-reads,
.chips-table .tb-reads2 {
  font-variant-numeric: tabular-nums;
}

.chips-table .tb-sep {
  opacity: 0.45;
  user-select: none;
  text-align: center;
  padding: 0 2px;
}

.chips-table .tb-lbl {
  color: var(--text-muted);
}

@supports not (grid-template-columns: subgrid) {
  .chips-table li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
  }
}

/* Messmatrix row and pill highlights */
.messmatrix tr.row-bad th,
.messmatrix tr.row-bad td {
  background: rgba(239, 107, 107, 0.07);
}
.messmatrix tr.row-good th,
.messmatrix tr.row-good td {
  background: rgba(40, 200, 64, 0.07);
}
.messmatrix .tag-bad {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(239, 107, 107, 0.16);
  color: #ff5f57;
  font-weight: 700;
}
[data-theme="light"] .messmatrix .tag-bad {
  background: rgba(201, 42, 42, 0.12);
  color: #c92a2a;
}
.messmatrix .tag-good {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(40, 200, 64, 0.16);
  color: #28c840;
  font-weight: 700;
}
[data-theme="light"] .messmatrix .tag-good {
  background: rgba(21, 128, 61, 0.12);
  color: #15803d;
}

.compare-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  margin-bottom: 1.25rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline-strong);
  background: var(--panel-2);
}
.compare-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.compare-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  font-weight: 700;
}
.compare-value {
  font-size: 1.15rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.compare-arrow {
  font-size: 1.4rem;
  color: var(--text-dim);
  line-height: 1;
}

.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(79,93,255,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 ======================================== */
.timeline {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 38px; left: 4%; right: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong) 20%, var(--hairline-strong) 80%, transparent);
}
.step {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-1);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
[data-theme="light"] .step { background: #fff; box-shadow: var(--shadow-2); }
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--hairline-strong); }
.step-num {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--panel-2);
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  font-weight: 700;
  font-size: .82rem;
  margin-bottom: 12px;
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.step h3 { font-size: 1rem; }
.step p { font-size: .9rem; }

/* 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(79,93,255,0.08) 50%, rgba(138,92,246,0.10));
  border-color: rgba(79,93,255,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(79,93,255,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(79,93,255,0.08) 50%, rgba(138,92,246,0.10));
  border-color: rgba(79,93,255,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); }

/* 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);
}

.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(79,93,255,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); }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .timeline::before { display: none; }
  .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; }
}

/* Das Logo steht jetzt rechts. Unterhalb der vollen Containerbreite reicht der
   Platz nicht mehr fuer Navigation + Schalter + CTA + Marke. Dann weicht der
   CTA-Knopf — er kommt beim Scrollen ohnehin als schwebender Knopf zurueck —,
   damit die Navigation stehen bleibt und die Marke nicht angeschnitten wird.
   (Vorher wurde in diesem Bereich der CTA abgeschnitten.) */
@media (max-width: 1279px) {
  .header-cta { display: none; }
}

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

  /* Header */
  .nav-list, .header-cta { display: none; }
  .burger { display: flex; }
  /* Ohne Navigation halten Sprach-, Theme- und Burger-Schalter die linke Seite,
     damit die Kopfzeile neben dem rechts stehenden Logo nicht leer wirkt. */
  .primary-nav { margin-right: 0; }
  .header-actions { margin-right: auto; }
  .site-header { top: 6px; padding: 0 4px; margin-top: 6px; }
  .header-inner { padding: 5px 8px 5px 5px; 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 6px 4px 4px; 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;
  /* Das Logo sitzt an der UNTERKANTE eines 64 px hohen Bandes. Die Navigation
     und die Schalter sitzen oben — dadurch laeuft der blaue Strich in einem
     eigenen freien Streifen darunter und wird von keinem Menue verdeckt. */
  min-height: 64px;
  align-items: flex-end;
  /* 6 px hoeher als der Rest: so sitzt der Schriftzug optisch auf einer Linie
     mit den Menuepunkten, waehrend der Strich unten frei bleibt. */
  margin-top: -6px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo {
  /* Das Logo ist so hoch, dass sein blauer Strich unterhalb der Navigations-Pille
     liegt (Strich = unterste 17 % des Assets). Darunter wuerde das Menue ihn
     beruehren. Hoehe und Band (.brand min-height) immer zusammen aendern. */
  height: 64px;
  width: auto;
  display: block;
  transition: transform .2s ease;
}
.brand:hover .brand-logo { transform: translateY(-1px); }

/* Dark mode: no faux background on the logo (transparent PNG only). Then invert
   lightness; hue-rotate(180deg) restores the brand cyan after invert. If the PNG
   still contains opaque white margins, swap the asset for a version with alpha. */
[data-theme="dark"] .brand-logo {
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  filter: invert(1) hue-rotate(180deg);
}

@media (max-width: 1100px) {
  .brand-logo { height: 56px; }
}
@media (max-width: 900px) {
  /* Hier teilen sich Navigation, Schalter und Marke eine schmale Leiste —
     das Logo muss kleiner werden, sonst laeuft die Kopfzeile ueber. Das Band
     schrumpft mit, damit das kleinere Logo nicht unten im Leeren haengt. */
  .brand-logo { height: 38px; }
  .brand { min-height: 58px; }
}
@media (min-width: 769px) and (max-width: 900px) {
  /* Engere Menuepunkte, damit die Navigations-Pille nicht auf zwei Zeilen
     umbricht und den Strich nach unten schiebt. */
  .nav-list a { padding-left: 9px; padding-right: 9px; font-size: .8rem; }
}

/* Band der Kopfzeile je Bildschirmbreite. Steht bewusst am Dateiende, NACH der
   zweiten .brand-Regel — sonst gewinnt deren min-height und die Leiste bleibt
   auf dem Handy unnoetig hoch. */
@media (max-width: 768px) {
  /* Die Leiste endet hier schon bei rund 64 px — der Deckel muss mitschrumpfen,
     sonst verdeckt er die erste Zeile des Abschnitts darunter. */
  .site-header::before {
    height: 76px;
    background: linear-gradient(to bottom, var(--bg) 0, var(--bg) 84%, transparent 100%);
  }
  /* Burger und Schalter sind hier 38 px hoch; das 50-px-Band laesst den Strich
     mit gut 6 px Luft darunter durchlaufen, ohne das Burger-Symbol zu streifen. */
  .brand { min-height: 50px; margin-top: 0; }
  .brand-logo { height: 36px; }
  .header-actions { min-height: 0; }
}
@media (max-width: 480px) {
  .brand-logo { height: 32px; }
}

/* Häufige Fragen: gestapelte Karten mit lesbarer Zeilenlänge. Die Antworten sind
   bewusst lang (120–180 Wörter) — in dieser Länge werden sie von KI-Antwort-
   systemen am ehesten als Ganzes übernommen. */
.faq-list { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; }
.faq-list .card h3 { margin: 0 0 10px; }
.faq-list .card p { margin: 0; }