/* ==========================================================================
   HeatSeek – Stylesheet
   --------------------------------------------------------------------------
   Reines statisches CSS. Keine Imports, keine externen Schriften, keine
   Frameworks. Aufbau der Datei:

     01  Tokens (Light auf blankem :root, danach Dark)
     02  Reset und Grundlagen
     03  Typografie-Utilities
     04  Layout: Container, Sektionen, Marginalspalte
     05  Komponenten (Header, Buttons, Karten, FAQ, Tabellen ...)
     06  Hero und Plan-Panel (in beiden Themes dunkel)
     07  Heatmap-Demo
     08  Footer und 404
     09  Bewegung: Keyframes, Reveal, prefers-reduced-motion

   Farblogik: warm = "hier wurde noch nicht gesucht", kuehl = "erledigt,
   geprueft, interaktiv". Diese Kodierung traegt auch den Produktstatus.
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   Regel: Jede Farbe hat einen Wert auf blankem :root. Seit der Umstellung auf
   Dunkel-zuerst traegt blankes :root das dunkle Violett-System der App. Hell
   ist die Variante und haengt an :root[data-theme="light"].

   Die beiden Dunkel-Bloecke weiter unten (Systempraeferenz und manueller
   Toggle) wiederholen dieselben Werte. Das ist bewusst redundant: Ohne sie
   wuerde ein :root[data-theme="light"], das ueber die Systempraeferenz
   zurueckgenommen wird, nicht mehr sauber auf Dunkel zurueckfallen, und ein
   spaeterer Eingriff in nur einen Block liefe unbemerkt auseinander.

   Kontrastwerte in den Kommentaren sind gegen die tatsaechlichen Tokens
   gerechnet (WCAG 2.1, relative Luminanz), nicht geschaetzt.
   ========================================================================== */

:root {
  /* Damit Scrollbalken, Formularelemente und Standard-Rahmen des Browsers zum
     Auslieferungszustand passen. Hell setzt das im eigenen Block zurueck. */
  color-scheme: dark;

  /* --- Flaechen ------------------------------------------------------- */
  --bg: #05070D;
  --bg-deep: #03050A;
  --surface: #10131E;
  --surface-2: #181C2A;
  --surface-inset: #0B0E17;

  /* --- Text -----------------------------------------------------------
     --text     #F2F4FA auf --bg      = 18,31:1
     --text-muted #8B92AB auf --bg    =  6,52:1, auf --surface 5,99:1,
                                         auf --surface-2 5,49:1
     --text-subtle #7F87A0 auf --bg   =  5,64:1, auf --surface 5,18:1,
                                         auf --surface-2 4,74:1
     Alle drei liegen damit auch auf der hellsten Kartenflaeche ueber 4,5:1. */
  --text: #F2F4FA;
  --text-muted: #8B92AB;
  --text-subtle: #7F87A0;
  --text-inverse: #05070D;

  /* --- Linien ---------------------------------------------------------
     Rahmen bewusst als Weiss mit sehr kleiner Deckkraft: er liegt auf
     --bg, --surface und --surface-2 gleich zurueckhaltend auf. */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --grid: rgba(255, 255, 255, 0.045);
  /* Rahmen, der ein Bedienelement als solches erkennbar macht. Braucht nach
     WCAG 1.4.11 mindestens 3:1 gegen den Untergrund und ist deshalb ein
     deckender Wert statt einer Transparenz: #6E7796 auf --surface-2 = 3,83:1,
     auf --bg 4,54:1. */
  --control-border: #6E7796;

  /* --- Akzente (semantisch) -------------------------------------------
     --accent ist der Ton, der als TEXT und Icon auftritt (Links, Kicker,
     Fokusring) und deshalb der helle sein muss: #A78BFA auf --bg = 7,40:1,
     auf --surface-2 6,23:1. --accent-solid ist der Fuellton der Marke
     (#8B5CF6) und traegt nie kleinen Text. */
  --accent: #A78BFA;
  --accent-hover: #C4B5FD;
  --accent-solid: #8B5CF6;
  --accent-contrast: #05070D;   /* Schrift auf Verlauf/Fuellung, s. --gradient */
  --accent-warm: #F5A524;       /* 9,87:1 auf --bg */
  --accent-warm-hover: #FFBB4D;
  --accent-warm-contrast: #140B02;
  --accent-cool: #3B82F6;       /* 5,48:1 auf --bg */
  --accent-cool-soft: #60A5FA;
  --success: #22C55E;

  /* --- Marke: Verlauf --------------------------------------------------
     Der Flaechenverlauf ist der der App. Dunkelste Stelle ist #6366F1;
     --accent-contrast (#05070D) liegt dort bei 4,51:1 und damit ueber der
     Grenze fuer Fliesstext. Weisse Schrift waere hier mit 3,96:1 zu wenig –
     deshalb traegt der Verlauf dunkle Beschriftung.
     Der Textverlauf ist eine Stufe heller, weil er als Schrift auf --bg
     liegt: dunkelste Stelle #A78BFA = 7,40:1. */
  --gradient: linear-gradient(135deg, #A855F7 0%, #6366F1 52%, #3B82F6 100%);
  --gradient-text: linear-gradient(100deg, #C084FC 0%, #A78BFA 45%, #60A5FA 100%);

  /* --- Heat-Skala: NUR Flaechen und Grafik, niemals Text --------------- */
  --heat-0: #1D4ED8;
  --heat-1: #F2CA52;
  --heat-2: #F5A524;
  --heat-3: #EC6E2A;
  --heat-4: #D93A2B;

  /* --- Plan-Panel: in BEIDEN Themes dunkel ----------------------------
     Wichtig: Alles, was auf diesem Panel liegt, braucht themeunabhaengige
     Farben. --accent-warm und --accent-cool sind themeabhaengig und im
     Light-Theme zu dunkel fuer diesen Grund. Deshalb eigene Werte. */
  --plan-bg: #05070D;
  --plan-fill: #10131E;
  --plan-line: #2A3350;
  --plan-label: #8B92AB;      /* 6,52:1 auf --plan-bg */
  --plan-warm: #F5A524;       /* 9,87:1 auf --plan-bg */
  --plan-cool: #60A5FA;       /* 7,92:1 auf --plan-bg */
  --plan-cool-deep: #3B82F6;  /* 5,48:1 auf --plan-bg */

  /* --- Geraeterahmen der Telefondarstellung ---------------------------
     Ein Telefon ist in beiden Themes dunkel. Die Werte sind deshalb
     themeunabhaengig, stehen aber trotzdem in jedem Block. */
  --device-shell: linear-gradient(155deg, #272C3E 0%, #0A0D16 52%, #1A1E2D 100%);
  --device-edge: rgba(255, 255, 255, 0.16);
  --device-screen: #05070D;

  /* --- Effekte -------------------------------------------------------- */
  --glow-warm: rgba(245, 165, 36, 0.12);
  --glow-cool: rgba(139, 92, 246, 0.14);
  --focus: #A78BFA;
  --scrim: rgba(3, 5, 10, 0.82);
  --shadow-color: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 24px 60px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06);
  /* Der "Violett-Schimmer" der Karten: ein Hauch Farbe im Rahmen und ein
     weit gestreuter, sehr schwacher Schlagschatten in derselben Farbe. */
  --shimmer: 0 0 0 1px rgba(139, 92, 246, 0.14), 0 26px 60px -34px rgba(139, 92, 246, 0.55);
  --shimmer-hover: 0 0 0 1px rgba(139, 92, 246, 0.28), 0 26px 60px -30px rgba(139, 92, 246, 0.7);

  /* --- Typografie ----------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --size-micro: 0.6875rem;
  --size-2xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --size-xs: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --size-sm: clamp(0.875rem, 0.85rem + 0.14vw, 0.9375rem);
  --size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --size-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --size-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --size-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --size-2xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
  --size-3xl: clamp(2.375rem, 1.7rem + 3.4vw, 4rem);
  --size-4xl: clamp(2.75rem, 1.8rem + 4.8vw, 5.25rem);

  --leading-display: 1.04;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --leading-relaxed: 1.72;

  --tracking-display: -0.034em;
  --tracking-heading: -0.018em;
  --tracking-normal: 0em;
  /* Gesperrte Versalien sind das Beschriftungsmittel dieser Gestaltung,
     deshalb etwas weiter gesperrt als zuvor. */
  --tracking-label: 0.16em;
  --tracking-mono: 0.02em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --measure: 62ch;
  --measure-tight: 34ch;
  --measure-wide: 72ch;

  /* --- Abstaende ------------------------------------------------------ */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-section: clamp(4rem, 9vw, 8rem);
  --space-section-tight: clamp(2.5rem, 5vw, 4rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --container: 72.5rem;
  --container-narrow: 45rem;
  --container-wide: 84rem;
  --rail: 4.5rem;
  --grid-unit: 1.5rem;
  --stack-gap: clamp(1rem, 2vw, 1.5rem);
  --grid-gap: clamp(1rem, 2.5vw, 2rem);
  --tap-target: 2.75rem;

  /* --- Radien: deutlich abgerundet, wie die Karten der Vorlage --------- */
  --radius-0: 0;
  --radius-xs: 3px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-panel: 22px;
  --radius-device: 34px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Bewegung ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 480ms;

  /* Hoehe des Sticky-Headers, wird fuer scroll-margin-top gebraucht */
  --header-h: 60px;
}

/* Dark ueber Systempraeferenz. Greift nur, wenn kein manuelles Light gesetzt
   ist, und traegt dieselben Werte wie blankes :root – Dunkel ist jetzt der
   Auslieferungszustand, dieser Block haelt ihn nur ausdruecklich fest. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #05070D;
    --bg-deep: #03050A;
    --surface: #10131E;
    --surface-2: #181C2A;
    --surface-inset: #0B0E17;

    --text: #F2F4FA;
    --text-muted: #8B92AB;
    --text-subtle: #7F87A0;
    --text-inverse: #05070D;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --grid: rgba(255, 255, 255, 0.045);
    --control-border: #6E7796;  /* 4,54:1 auf --bg */

    --accent: #A78BFA;
    --accent-hover: #C4B5FD;
    --accent-solid: #8B5CF6;
    --accent-contrast: #05070D;
    --accent-warm: #F5A524;
    --accent-warm-hover: #FFBB4D;
    --accent-warm-contrast: #140B02;
    --accent-cool: #3B82F6;
    --accent-cool-soft: #60A5FA;
    --success: #22C55E;

    --gradient: linear-gradient(135deg, #A855F7 0%, #6366F1 52%, #3B82F6 100%);
    --gradient-text: linear-gradient(100deg, #C084FC 0%, #A78BFA 45%, #60A5FA 100%);

    --device-shell: linear-gradient(155deg, #272C3E 0%, #0A0D16 52%, #1A1E2D 100%);
    --device-edge: rgba(255, 255, 255, 0.16);
    --device-screen: #05070D;

    --glow-warm: rgba(245, 165, 36, 0.12);
    --glow-cool: rgba(139, 92, 246, 0.14);
    --focus: #A78BFA;
    --scrim: rgba(3, 5, 10, 0.82);
    --shadow-color: rgba(0, 0, 0, 0.6);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 24px 60px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shimmer: 0 0 0 1px rgba(139, 92, 246, 0.14), 0 26px 60px -34px rgba(139, 92, 246, 0.55);
    --shimmer-hover: 0 0 0 1px rgba(139, 92, 246, 0.28), 0 26px 60px -30px rgba(139, 92, 246, 0.7);
  }
}

/* Dark ueber den manuellen Toggle – identische Werte, hoehere Spezifitaet.
   Noetig, damit der Umschalter auch dann greift, wenn das System hell steht. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #05070D;
  --bg-deep: #03050A;
  --surface: #10131E;
  --surface-2: #181C2A;
  --surface-inset: #0B0E17;

  --text: #F2F4FA;
  --text-muted: #8B92AB;
  --text-subtle: #7F87A0;
  --text-inverse: #05070D;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --grid: rgba(255, 255, 255, 0.045);
  --control-border: #6E7796;  /* 4,54:1 auf --bg */

  --accent: #A78BFA;
  --accent-hover: #C4B5FD;
  --accent-solid: #8B5CF6;
  --accent-contrast: #05070D;
  --accent-warm: #F5A524;
  --accent-warm-hover: #FFBB4D;
  --accent-warm-contrast: #140B02;
  --accent-cool: #3B82F6;
  --accent-cool-soft: #60A5FA;
  --success: #22C55E;

  --gradient: linear-gradient(135deg, #A855F7 0%, #6366F1 52%, #3B82F6 100%);
  --gradient-text: linear-gradient(100deg, #C084FC 0%, #A78BFA 45%, #60A5FA 100%);

  --device-shell: linear-gradient(155deg, #272C3E 0%, #0A0D16 52%, #1A1E2D 100%);
  --device-edge: rgba(255, 255, 255, 0.16);
  --device-screen: #05070D;

  --glow-warm: rgba(245, 165, 36, 0.12);
  --glow-cool: rgba(139, 92, 246, 0.14);
  --focus: #A78BFA;
  --scrim: rgba(3, 5, 10, 0.82);
  --shadow-color: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 24px 60px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shimmer: 0 0 0 1px rgba(139, 92, 246, 0.14), 0 26px 60px -34px rgba(139, 92, 246, 0.55);
  --shimmer-hover: 0 0 0 1px rgba(139, 92, 246, 0.28), 0 26px 60px -30px rgba(139, 92, 246, 0.7);
}

/* Manuelles Light – die helle Fassung derselben Marke. Der Violett-Ton wird
   dafuer abgedunkelt, sonst traegt er auf heller Flaeche keinen Text:
     --accent      #6D28D9 auf --bg = 6,60:1
     --text-muted  #4B5163 auf --bg = 7,38:1
     --gradient    dunkelste Stelle #2563EB, Weiss darauf = 5,17:1
     --gradient-text hellste Stelle #7C3AED auf --bg = 5,30:1
   Erreichbar bleibt Hell ueber den Umschalter im Kopf. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F5F6FB;
  --bg-deep: #EBEDF6;
  --surface: #FFFFFF;
  --surface-2: #EFF0F8;
  --surface-inset: #F7F8FC;

  --text: #10131E;
  --text-muted: #4B5163;
  --text-subtle: #5C6274;
  --text-inverse: #FFFFFF;

  --border: rgba(16, 19, 30, 0.10);
  --border-strong: rgba(16, 19, 30, 0.20);
  --grid: rgba(16, 19, 30, 0.05);
  --control-border: #767C8E;  /* 3,89:1 auf --bg */

  --accent: #6D28D9;
  --accent-hover: #5B21B6;
  --accent-solid: #7C3AED;
  --accent-contrast: #FFFFFF;
  --accent-warm: #B23A15;
  --accent-warm-hover: #93300F;
  --accent-warm-contrast: #FFFFFF;
  --accent-cool: #1D4ED8;
  --accent-cool-soft: #2563EB;
  --success: #15803D;

  --gradient: linear-gradient(135deg, #7C3AED 0%, #4F46E5 52%, #2563EB 100%);
  --gradient-text: linear-gradient(100deg, #7C3AED 0%, #6D28D9 45%, #2563EB 100%);

  /* Ein Telefon bleibt dunkel, auch auf heller Seite. */
  --device-shell: linear-gradient(155deg, #272C3E 0%, #0A0D16 52%, #1A1E2D 100%);
  --device-edge: rgba(255, 255, 255, 0.16);
  --device-screen: #05070D;

  --glow-warm: rgba(178, 58, 21, 0.08);
  --glow-cool: rgba(109, 40, 217, 0.08);
  --focus: #6D28D9;
  --scrim: rgba(16, 19, 30, 0.65);
  --shadow-color: rgba(16, 19, 30, 0.2);
  --shadow-1: 0 1px 2px rgba(16, 19, 30, 0.08);
  --shadow-2: 0 18px 40px -22px rgba(16, 19, 30, 0.28), 0 0 0 1px rgba(16, 19, 30, 0.08);
  --shimmer: 0 0 0 1px rgba(109, 40, 217, 0.10), 0 20px 44px -30px rgba(109, 40, 217, 0.35);
  --shimmer-hover: 0 0 0 1px rgba(109, 40, 217, 0.22), 0 20px 44px -26px rgba(109, 40, 217, 0.5);
}

/* ==========================================================================
   02  RESET UND GRUNDLAGEN
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Gilt fuer JEDES Scroll-in-View, also auch fuer den Tastaturfokus auf
     Elementen ohne id (FAQ-Summary, Footer-Links, Buttons). Ohne das landen
     sie beim Durchtabben unter dem Sticky-Header – WCAG 2.4.11. */
  scroll-padding-top: calc(var(--header-h) + 12px);
  /* Bewusst KEIN overflow-x hier: das macht <html> zum Scroll-Container und
     bricht damit position:sticky im Header. Die Absicherung gegen
     waagerechtes Scrollen sitzt unten auf <body> als overflow-x:clip. */
}

body {
  margin: 0;
  background-color: var(--bg);
  /* Ein einzelner, sehr schwacher Violettschein oben. Kein zweites Bild, kein
     background-attachment: fixed – das kostet auf Android beim Scrollen. */
  background-image: radial-gradient(80rem 36rem at 50% -14%, var(--glow-cool), transparent 70%);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden: klemmt einen etwaigen Ueberhang ab, ohne einen
     Scroll-Container zu erzeugen – sticky bleibt damit funktionsfaehig.
     Das Layout kommt ohnehin bis 320px ohne Ueberhang aus; das hier ist
     nur das Netz darunter. */
  overflow-x: clip;
  transition: background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

/* Blendet die Seite waehrend des Sprachtauschs aus, damit kein deutscher
   Text aufblitzt, wenn Englisch gespeichert ist. Wird vom Inline-Skript im
   <head> gesetzt und von heatseek.js wieder entfernt (mit Sicherheitstimeout). */
html.i18n-pending body {
  visibility: hidden;
}

img,
svg {
  max-width: 100%;
}

svg {
  display: block;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}

/* Marker weg, Semantik bleibt: Safari/VoiceOver entfernt bei list-style:none
   die Listensemantik. Deshalb tragen alle inhaltstragenden Listen im Markup
   ein explizites role="list". */
ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

a:hover {
  text-decoration-color: currentColor;
}

button {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
}

/* Globaler Fokus-Ring. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Auf warmen Flaechen ist der Teal-Ring zu leise – dort Textfarbe verwenden. */
.btn-primary:focus-visible {
  outline-color: var(--text);
}

/* Ankerziele nicht unter dem Sticky-Header verstecken. */
:target,
section[id],
[id] {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* ==========================================================================
   03  TYPOGRAFIE-UTILITIES
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Gesperrte Versalien sind die Beschriftungsebene dieser Gestaltung. Die
   Kicker ueber den Ueberschriften tragen dabei die Markenfarbe
   (--accent, 7,40:1 auf --bg), die stilleren Beschriftungen weiter unten
   im Dokument bleiben bei --text-subtle. */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.measure {
  max-width: var(--measure);
}

.measure-tight {
  max-width: var(--measure-tight);
}

.measure-wide {
  max-width: var(--measure-wide);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.lead {
  font-size: var(--size-md);
  color: var(--text-muted);
  max-width: var(--measure);
}

.note {
  font-size: var(--size-sm);
  color: var(--text-subtle);
  max-width: var(--measure);
}

.note-strong {
  font-size: var(--size-sm);
  color: var(--text-muted);
  max-width: var(--measure);
  border-left: 3px solid var(--accent-warm);
  padding: var(--space-3) var(--space-4);
  background: var(--glow-warm);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.body-text {
  max-width: var(--measure);
  color: var(--text-muted);
}

.body-text strong {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

/* Feste helle Textfarbe fuer Inhalte auf themeunabhaengig dunklem Grund. */
.on-dark {
  color: #F2F4FA;
}

/* ==========================================================================
   04  LAYOUT
   ========================================================================== */

.container {
  width: min(100% - (2 * var(--gutter)), var(--container));
  margin-inline: auto;
}

.container-narrow {
  width: min(100% - (2 * var(--gutter)), var(--container-narrow));
  margin-inline: auto;
}

.section {
  padding-block: var(--space-section);
  border-top: 1px solid var(--border);
}

.section:first-of-type {
  border-top: 0;
}

.section-tight {
  padding-block: var(--space-section-tight);
}

/* Planblatt-Asymmetrie: linke Marginalspalte mit Mono-Marker und Tick.
   Unter 1024px entfaellt sie ersatzlos. */
.section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.rail {
  display: none;
}

@media (min-width: 64rem) {
  .section-grid {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: var(--space-6);
  }

  .rail {
    display: block;
    position: relative;
    padding-top: 0.4rem;
  }

  .rail-marker {
    font-family: var(--font-mono);
    font-size: var(--size-micro);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-subtle);
    display: block;
  }

  .rail-tick {
    display: block;
    margin-top: var(--space-3);
    height: 1px;
    width: 2.25rem;
    background: var(--border-strong);
  }
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.section-head h2 {
  font-size: var(--size-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-semibold);
  text-wrap: balance;
  max-width: 20ch;
}

@supports not (text-wrap: balance) {
  .section-head h2 {
    max-width: var(--measure-tight);
  }
}

h3 {
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-semibold);
}

h4 {
  font-size: var(--size-base);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
}

/* Raster-Regel: laeuft im Desktop-Layout in die Marginalspalte hinaus. */
.rule {
  position: relative;
  height: 1px;
  background: var(--border);
  border: 0;
  margin-block: var(--space-6);
}

@media (min-width: 64rem) {
  .rule::before {
    content: "";
    position: absolute;
    left: 0;
    top: -3px;
    width: 1px;
    height: 6px;
    background: var(--border-strong);
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 48rem) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 48rem) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   05  KOMPONENTEN
   ========================================================================== */

/* --- Skip-Link ------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--size-sm);
  text-decoration: none;
  box-shadow: var(--shadow-2);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --- Header ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--border);
}

@supports (backdrop-filter: blur(10px)) {
  .site-header {
    backdrop-filter: blur(10px);
  }
}

/* Fallback, falls color-mix nicht unterstuetzt wird. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header {
    background: var(--bg);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-2);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

.brand-mark {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--accent);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name {
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  font-size: var(--size-base);
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  color: var(--text-subtle);
  letter-spacing: var(--tracking-mono);
  display: none;
}

@media (min-width: 48rem) {
  .brand-sub {
    display: block;
  }
}

.site-nav {
  display: none;
}

@media (min-width: 56rem) {
  .site-nav {
    display: block;
  }

  .site-nav ul {
    display: flex;
    gap: var(--space-5);
  }

  .site-nav a {
    font-size: var(--size-sm);
    color: var(--text-muted);
    text-decoration: none;
  }

  .site-nav a:hover {
    color: var(--accent);
  }
}

/* --- Segment-Steuerung: Sprache und Theme ---------------------------- */
/* Rahmen bewusst --control-border statt --border: Er ist das einzige Merkmal,
   das die beiden Kopfzeilen-Bedienelemente als Bedienelemente ausweist, und
   braucht dafuer nach WCAG 1.4.11 mindestens 3:1 (dunkel 4,54:1, hell 3,89:1).
   Die Karten drumherum behalten den sehr viel leiseren --border. */
.segment {
  display: flex;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

/* Ohne JS ist der Umschalter nutzlos, deshalb bleibt er verborgen. */
.js-only {
  display: none;
}

html.js .js-only {
  display: revert;
}

html.js .segment.js-only {
  display: flex;
}

/* display:revert wuerde bei Buttons auf inline-block zurueckfallen und das
   Flex-Zentrieren aufheben – deshalb hier explizit. */
html.js .btn.js-only,
html.js .theme-toggle.js-only {
  display: inline-flex;
}

.segment button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 0 var(--space-3);
  min-height: var(--tap-target);
  min-width: var(--tap-target);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.segment button + button {
  border-left: 1px solid var(--border);
}

.segment button:hover {
  color: var(--text);
}

.segment button[aria-pressed="true"] {
  background: var(--surface-2);
  color: var(--text);
}

.theme-toggle {
  appearance: none;
  border: 1px solid var(--control-border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--text-subtle);
  min-height: var(--tap-target);
  min-width: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Das Icon zeigt das ZIEL des Klicks: Sonne im Dark-Theme, Mond im Light-Theme.
   Weil Dunkel jetzt der Auslieferungszustand ist, dreht sich der Startwert um –
   der Mond erscheint nur, wenn ausdruecklich Hell gesetzt ist. */
.icon-moon {
  display: none;
}

.icon-sun {
  display: block;
}

:root[data-theme="light"] .icon-moon {
  display: block;
}

:root[data-theme="light"] .icon-sun {
  display: none;
}

/* --- Status-Badge ----------------------------------------------------
   Pille in der Markenfarbe, Punkt bleibt warm: Die Farbe des Punktes ist
   dieselbe wie beim Zustand "In Arbeit" in der Statusliste, und genau das
   sagt die Beschriftung auch aus. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--glow-cool);
  color: var(--accent);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  width: fit-content;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--accent-warm);
  flex: none;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .badge {
    border-color: var(--accent);
  }
}

/* --- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

/* Der Hauptknopf traegt den Markenverlauf. Die Beschriftung ist dunkel, weil
   Weiss auf der dunkelsten Verlaufsstelle (#6366F1) nur 3,96:1 erreicht;
   --accent-contrast kommt dort auf 4,51:1. Im Light-Theme ist der Verlauf
   dunkler und --accent-contrast entsprechend weiss. */
.btn-primary {
  background-image: var(--gradient);
  background-color: var(--accent-solid);
  color: var(--accent-contrast);
  font-weight: var(--weight-semibold);
  box-shadow: 0 10px 30px -14px rgba(139, 92, 246, 0.9);
}

.btn-primary:hover {
  filter: saturate(1.1) brightness(1.06);
  transform: translateY(-1px);
  text-decoration-color: transparent;
}

.btn-primary:active {
  transform: translateY(0);
}

/* Der Rahmen ist hier das einzige Merkmal, das den Button vom Fliesstext
   unterscheidet – deshalb --control-border (>= 3:1) statt --border-strong. */
.btn-secondary {
  background: transparent;
  border-color: var(--control-border);
  color: var(--text);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  text-decoration-color: transparent;
}

.btn-secondary:active {
  transform: translateY(0);
}

/* Deaktivierter Download: bewusst kein <a>, sondern <button disabled>. */
.btn-disabled,
.btn[disabled] {
  background: var(--surface-2);
  color: var(--text-subtle);
  border: 1px dashed var(--border-strong);
  cursor: not-allowed;
  transform: none;
}

.btn[disabled]:hover {
  transform: none;
}

.btn-small {
  min-height: 2.25rem;
  padding: 0.4rem 0.75rem;
  font-size: var(--size-xs);
}

/* Auf Touch-Geraeten gilt auch fuer kleine Buttons die volle Tap-Groesse. */
@media (pointer: coarse) {
  .btn-small {
    min-height: var(--tap-target);
    padding-inline: var(--space-4);
  }
}

/* --- Karten ----------------------------------------------------------
   Grundform der ganzen Seite: dunkle Flaeche, sehr feiner Rahmen, weit
   abgerundet, dazu der schwache Violett-Schimmer aus --shimmer. Der
   Farbverlauf oben links ist reine Lichtandeutung und traegt keine
   Bedeutung – er liegt unter dem Inhalt und ist nicht anklickbar. */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shimmer);
  transition: border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 90% at 0% 0%, var(--glow-cool), transparent 62%);
  opacity: 0.9;
  transition: opacity var(--dur-base) var(--ease-out);
}

.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shimmer-hover);
}

.card:hover::after {
  opacity: 1;
}

.card > * {
  position: relative;
  z-index: 1;
}

.card-icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  stroke-width: 1.5;
}

.card p {
  color: var(--text-muted);
  font-size: var(--size-sm);
}

/* --- Insight-Block --------------------------------------------------- */
.insight {
  font-size: var(--size-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  max-width: 24ch;
  color: var(--text);
}

.insight .warm {
  color: var(--accent-warm);
}

/* Marker statt Rahmen – jetzt im Markenverlauf. */
.insight-tick {
  display: block;
  width: 2.5rem;
  height: 4px;
  background-color: var(--accent-solid);
  background-image: var(--gradient);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}

/* --- Ablauf-Sequenz -------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  counter-reset: step;
}

@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
  }
}

/* Die Schritte sind jetzt Karten in derselben Form wie der Rest der Seite,
   nicht mehr nur Spalten unter einer Trennlinie. */
.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shimmer);
}

.step-ordinal {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.step p {
  color: var(--text-muted);
  font-size: var(--size-sm);
}

.step-figure {
  width: 120px;
  height: 80px;
  margin-top: var(--space-2);
  color: var(--plan-label);
}

/* --- Heatmap-Legende ------------------------------------------------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.swatch {
  width: 12px;
  height: 12px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
}

.swatch-hot {
  background: linear-gradient(90deg, var(--heat-2), var(--heat-4));
}

.swatch-cold {
  background: linear-gradient(90deg, var(--heat-0), var(--accent-cool));
}

/* --- Legenden-Karten (Heatmap-Sektion) ------------------------------- */
.legend-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shimmer);
}

.legend-card .swatch {
  width: 12px;
  height: 12px;
  margin-top: 0.35rem;
}

.legend-card h3 {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-subtle);
  font-weight: var(--weight-regular);
  margin-bottom: var(--space-2);
}

.legend-card p {
  font-size: var(--size-sm);
  color: var(--text-muted);
}

/* --- Voice-Bubble ---------------------------------------------------- */
.voice-bubble {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-warm);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shimmer);
  padding: var(--space-5);
}

.voice-quotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.eq {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 0.2rem;
  color: var(--accent-warm);
}

.eq rect {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.voice-bubble p {
  font-size: var(--size-base);
  color: var(--text);
}

.voice-foot {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* --- Ehrlichkeits-Panel ---------------------------------------------- */
.honesty {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shimmer);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .honesty {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.honesty h3 {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-regular);
  color: var(--text-subtle);
  margin-bottom: var(--space-4);
}

.honesty ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.honesty li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--size-sm);
  color: var(--text-muted);
}

.honesty li svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 0.28rem;
}

/* Haken gruen, Striche warm: Die Bedeutung steht zusaetzlich in der
   Spaltenueberschrift, die Farbe ist also nicht alleiniger Traeger. */
.honesty .can svg {
  color: var(--success);
}

.honesty .cannot svg {
  color: var(--accent-warm);
}

/* --- Status-/Roadmap-Liste ------------------------------------------- */
.statuslist {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.statuslist li {
  display: grid;
  grid-template-columns: 8px 7.5rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--size-sm);
  color: var(--text-muted);
}

@media (max-width: 30rem) {
  .statuslist li {
    grid-template-columns: 8px 1fr;
  }

  .statuslist li .state-word {
    grid-column: 2;
  }

  .statuslist li .state-text {
    grid-column: 2;
  }
}

.state-marker {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-xs);
  align-self: center;
}

.state-done .state-marker {
  background: var(--accent-cool);
}

.state-open .state-marker {
  background: var(--heat-3);
}

.state-planned .state-marker {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.state-word {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* --- Definitionsliste fuer Voraussetzungen und Pfade ----------------- */
.deflist {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.deflist > div {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.deflist dt {
  font-weight: var(--weight-semibold);
  font-size: var(--size-base);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-2);
}

.deflist dd {
  color: var(--text-muted);
  font-size: var(--size-sm);
  max-width: var(--measure);
}

.deflist .mono-dt {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: none;
  font-weight: var(--weight-medium);
  color: var(--accent);
}

/* --- Nummerierte Listen (Installation, Pruefen, Stolperfallen) ------- */
.numbered {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.numbered > li {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.numbered h3 {
  font-size: var(--size-md);
  margin-bottom: var(--space-2);
}

.numbered p {
  color: var(--text-muted);
  font-size: var(--size-sm);
  max-width: var(--measure);
}

.bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bullets li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--size-sm);
  color: var(--text-muted);
  max-width: var(--measure);
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

.bullets-warm li::before {
  background: var(--accent-warm);
}

/* --- Notizliste ------------------------------------------------------ */
.notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.notes li {
  font-size: var(--size-sm);
  color: var(--text-muted);
  max-width: var(--measure);
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-strong);
}

/* --- Download-Panel -------------------------------------------------- */
.download-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shimmer);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure);
}

.download-meta {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

/* --- FAQ ------------------------------------------------------------- */
.faq {
  display: flex;
  flex-direction: column;
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--tap-target);
  padding-block: var(--space-4);
  cursor: pointer;
  font-weight: var(--weight-medium);
  font-size: var(--size-base);
  list-style: none;
  color: var(--text);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::marker {
  content: "";
}

.faq-plus {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease-out);
}

.faq details[open] .faq-plus {
  transform: rotate(45deg);
}

.faq details > p {
  padding-bottom: var(--space-5);
  padding-left: calc(12px + var(--space-4));
  color: var(--text-muted);
  max-width: var(--measure);
}

/* ==========================================================================
   06  HERO UND TELEFONDARSTELLUNG
   ========================================================================== */

.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--space-section);
}

/* Einspaltig: erst der Text (Badge, Schlagzeile, Lead, Knoepfe, Hinweis),
   dann das Telefon. Das Bildschirmfoto ist im Hochformat ueber 600px hoch –
   staende es wie frueher zwischen Schlagzeile und Lead, laege der
   Statushinweis auf einem 320px-Geraet weit unterhalb des Sichtfensters.
   Ab 60rem: 7/5-Split, Textspalte links, Telefon rechts ueber beide Zeilen;
   dort setzt die explizite Rasterzuweisung die Reihenfolge ohnehin neu. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.hero-head {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero-rest {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.hero-figure-wrap {
  order: 3;
}

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: 7fr 5fr;
    grid-template-rows: auto auto;
    gap: var(--space-5) var(--space-7);
    align-items: center;
  }

  .hero-head {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .hero-rest {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .hero-figure-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

.hero h1 {
  font-size: var(--size-3xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
  text-wrap: balance;
  max-width: 18ch;
  margin: 0;
}

/* Ein einzelnes Wort der Schlagzeile im Markenverlauf. Der Wortlaut aendert
   sich dadurch nicht – die Schlagzeile steht nur in drei Spannen statt in
   einer, damit das Wort eigenstaendig gefaerbt und uebersetzt werden kann.

   Startwert ist eine deckende Farbe. Erst wenn der Browser
   background-clip: text kann, wird auf den Verlauf umgestellt; sonst waere
   das Wort in alten Engines unsichtbar. */
.headline-accent {
  color: var(--accent);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .headline-accent {
    background-image: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Im erzwungenen Kontrastmodus wird der Verlauf entfernt; ohne diese Zeile
   bliebe transparenter Text uebrig. */
@media (forced-colors: active) {
  .headline-accent {
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

.hero-sub {
  font-size: var(--size-md);
  color: var(--text-muted);
  max-width: var(--measure);
}

.hero-meta {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* --- Telefondarstellung im Hero --------------------------------------
   Der Geraeterahmen ist reines CSS; darin liegt ein echtes Bildschirmfoto der
   laufenden App (1080 x 2400). Kein Rendering, keine Montage, kein
   gezeichneter Fantasiebildschirm – auf der Seite steht damit, was die App
   tatsaechlich zeigt.

   Das Bild wechselt mit der Sprache. Dafuer braucht es keinen Sonderweg: das
   src-Attribut haengt wie jedes andere uebersetzbare Attribut an
   data-i18n-attr, der deutsche Wert steht nativ im Markup. */
.phone-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.phone {
  position: relative;
  /* Bis 320px Breite: 62vw sind dort 198px, die Untergrenze faengt das auf
     und passt mit Rand noch in den Container (280px Innenbreite). */
  width: clamp(200px, 62vw, 300px);
  padding: 10px;
  border-radius: var(--radius-device);
  background-color: var(--surface-2);
  background-image: var(--device-shell);
  border: 1px solid var(--device-edge);
  box-shadow: 0 40px 90px -42px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(139, 92, 246, 0.16),
    0 0 90px -28px rgba(139, 92, 246, 0.5);
}

/* Violetter Schein hinter dem Geraet. Rein dekorativ, liegt hinter der
   Geraetflaeche und faengt keine Zeigereingaben ab. */
.phone::before {
  content: "";
  position: absolute;
  inset: -14% -20%;
  z-index: -1;
  border-radius: var(--radius-circle);
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.34), transparent 72%);
  pointer-events: none;
}

/* Angedeutete Seitentaste. Sitzt auf dem Rahmen, nicht auf dem Bild. */
.phone::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 22%;
  width: 2px;
  height: 9%;
  border-radius: var(--radius-pill);
  background: var(--device-edge);
  pointer-events: none;
}

.phone-screen {
  position: relative;
  /* Innenradius = Aussenradius minus Rahmenbreite, sonst laeuft die Ecke
     des Bildes nicht parallel zur Ecke des Geraets. */
  border-radius: calc(var(--radius-device) - 10px);
  overflow: hidden;
  background: var(--device-screen);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* width und height stehen als Attribute im Markup: das reserviert den Platz
   vor dem Laden und beim Sprachwechsel, es springt also nichts. */
.phone-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.phone-caption {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-snug);
  color: var(--text-subtle);
  text-align: center;
  max-width: 34ch;
}

/* ==========================================================================
   07  HEATMAP-DEMO
   ========================================================================== */

.demo-panel {
  position: relative;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--plan-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  aspect-ratio: 3 / 2;
  /* pan-y, damit die Seite ueber der Demo weiter vertikal scrollbar bleibt.
     Waagerechtes Wischen faerbt, senkrechtes scrollt. */
  touch-action: pan-y;
  cursor: crosshair;
}

@supports not (aspect-ratio: 3 / 2) {
  .demo-panel {
    height: 0;
    padding-bottom: 66.6%;
  }

  .demo-panel > svg {
    position: absolute;
    inset: 0;
  }
}

.demo-panel svg {
  width: 100%;
  height: 100%;
}

.demo-cell {
  fill: var(--heat-4);
  fill-opacity: 0.55;
  transition: fill var(--dur-slow) var(--ease-out),
    fill-opacity var(--dur-slow) var(--ease-out);
}

.demo-cell[data-heat="3"] {
  fill: var(--heat-3);
  fill-opacity: 0.45;
}

.demo-cell[data-heat="2"] {
  fill: var(--heat-2);
  fill-opacity: 0.34;
}

.demo-cell[data-heat="1"] {
  fill: var(--heat-1);
  fill-opacity: 0.22;
}

.demo-cell[data-heat="0"] {
  fill: var(--heat-0);
  fill-opacity: 0.75;
}

.demo-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.demo-progress {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.demo-progress b {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   08  FOOTER UND 404
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-7) var(--space-6);
  background: var(--bg-deep);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer-claim {
  font-size: var(--size-md);
  max-width: 28ch;
}

.site-footer p,
.site-footer li {
  font-size: var(--size-xs);
  color: var(--text-subtle);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-pending {
  border-bottom: 1px dashed var(--border-strong);
  color: var(--text-subtle);
}

.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 404-Seite */
.page-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-8);
}

.page-404 h1 {
  font-size: var(--size-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
  max-width: 18ch;
}

.code-404 {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-warm);
}

/* ==========================================================================
   09  BEWEGUNG
   Seit der Hero ein stehendes Bildschirmfoto zeigt, bewegt sich auf der Seite
   dauerhaft nur noch der kleine Equalizer der Sprachausgabe-Bubble – und der
   ausschliesslich, solange die Bubble im Sichtfenster steht. Dazu kommen zwei
   einmalige Sequenzen: der Einstieg im Hero und das Scroll-Reveal.
   ========================================================================== */

@keyframes hs-eq {
  0%,
  100% {
    transform: scaleY(0.35);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes hs-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Equalizer laeuft nur, solange die Bubble sichtbar ist (Klasse aus dem JS). */
.eq rect {
  animation: hs-eq 1.1s var(--ease-inout) infinite;
  animation-play-state: paused;
}

.eq.is-playing rect {
  animation-play-state: running;
}

.eq rect:nth-child(2) {
  animation-delay: 130ms;
}

.eq rect:nth-child(3) {
  animation-delay: 260ms;
}

/* Einstiegssequenz: laeuft genau einmal, gestaffelt um 70ms. Die Reihenfolge
   steht als --enter-i im Markup, damit sie unabhaengig von der DOM-Position
   stimmt (das Visual sitzt mobil zwischen H1 und Lead). */
html.js [data-enter] {
  animation: hs-enter var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--enter-i, 0) * 70ms);
}

/* Der Platz in der Sequenz steht als data-enter="N" im Markup statt als
   Inline-Style. Die Auslieferung laeuft unter einer Content-Security-Policy
   ohne 'unsafe-inline', dort waere ein style-Attribut wirkungslos. */
html.js [data-enter="0"] { --enter-i: 0; }
html.js [data-enter="1"] { --enter-i: 1; }
html.js [data-enter="2"] { --enter-i: 2; }
html.js [data-enter="3"] { --enter-i: 3; }
html.js [data-enter="4"] { --enter-i: 4; }
html.js [data-enter="5"] { --enter-i: 5; }

/* Abstandshelfer, ebenfalls als Ersatz fuer style-Attribute. */
.mt-4 { margin-top: var(--space-4); }
.footer-bottom-bare { margin-top: 0; border-top: 0; padding-top: 0; }

/* Scroll-Reveal auf Sektionsebene. Der Startzustand haengt bewusst NICHT an
   .js (die Klasse setzt das Inline-Skript bedingungslos), sondern an einer
   Klasse, die initReveal() in heatseek.js selbst setzt. Faellt heatseek.js
   aus, wird der Startzustand nie gesetzt und der Inhalt bleibt sichtbar. */
html.reveal-armed .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

html.reveal-armed .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  .eq rect {
    animation: none;
  }

  html.js [data-enter] {
    animation: none;
  }

  .reveal,
  .reveal.is-in,
  html.reveal-armed .reveal,
  html.reveal-armed .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}