/* Tegmaguard Landingpage v3
   Basiert auf dem Attio-Token-Satz der App (siehe landing-v2), erweitert um
   eine eigene Markenfarbe ("Tegma-Indigo") fuer Akzente/CTA. Die Bedeutungs-
   farben bleiben unangetastet: gruen = bleibt auf dem Geraet, orange =
   verlaesst das Geraet (Spiegeldaten). Indigo ist reine Marke, nie Bedeutung. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/Inter-Variable.woff2") format("woff2-variations"),
       url("assets/fonts/Inter-Variable.woff2") format("woff2");
}
/* Metrik-angepasster Ersatz waehrend des Ladens (font-display: swap): Arial
   auf Inter-Masse gebracht, damit der Tausch auf langsamen Mobilnetzen keine
   Zeilen verschiebt (gedrosselt gemessen: Layout-Shift im Hero beim Tausch). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%;
}

/* VORSCHAU dunkles Farbschema (Gruender-Palette 2026-10-04, Branch-Preview,
   nicht main). Schicht 1: Palette exakt wie vorgegeben. Schicht 2: die alten
   Landing-Token zeigen nur noch auf die Palette (bzw. auf color-mix() aus ihr),
   damit die Komponentenregeln unten fast unveraendert bleiben. */
:root {
  color-scheme: dark;

  /* --- Palette (primitiv) --- */
  --text:        #f5f5f5;  /* Ueberschriften / UI-Text */
  --text-body:   #a1a1a6;  /* Fliesstext (lange Absaetze) */
  --background:  #0a0a0a;  /* Seitenhintergrund */
  --primary:     #2563eb;  /* blaue Buttons (Flaeche) */
  --accent:      #5b9bf8;  /* helleres Blau - Links, Fokus-Ring */
  --secondary:   #8a8a8f;  /* mittleres Grau */
  --surface-1:   #262626;  /* Karten, Standard-Buttons, Inputs */
  --surface-2:   #303030;  /* ausgewaehlter Zustand, Popover */
  --border:      #2a2a2a;  /* duenne Trennlinien */
  --muted:       #a1a1a6;  /* Labels, sekundaerer Text */
  --ink-faint:   #8a8a8f;  /* Meta-Text, Zaehler, Zeitstempel */
  --success:     #63c787;  /* Gruen */
  --warning:     #e8b54d;  /* Amber */
  --danger:      #f87171;  /* Rot */
  --on-primary:  #ffffff;  /* Text auf blauen Buttons */

  /* --- Semantik (alte Namen -> Palette) --- */
  --bg-page: var(--background);
  /* Kleine abgesetzte Flaechen auf dem Seitenhintergrund (Badges, Tabellen-
     Kopfspalte, Segment-Control): halber Schritt zwischen Seite und Karte.
     #8a8a8f darauf 5,2:1, #a1a1a6 7,0:1. */
  --bg-muted: color-mix(in srgb, var(--surface-1) 45%, var(--background));
  --bg-raised: var(--surface-2);
  --bg-card: var(--surface-1);
  --hairline: var(--border);
  /* Rahmen von Bedienelementen (Sprachknopf, Tabs, Pillen). Dekorativ, die
     Flaeche traegt die Form. */
  --border-control: color-mix(in srgb, var(--secondary) 35%, var(--surface-1));
  /* Rahmen von Eingabefeldern + Hover: >= 3:1 gegen --surface-1 (WCAG 1.4.11). */
  --border-strong: color-mix(in srgb, var(--secondary) 75%, var(--surface-1));
  --fg-primary: var(--text);
  --fg-heading: var(--text);
  --fg-secondary: var(--text-body);
  /* Auf --background gilt --ink-faint (5,8:1). Auf Karten (--surface-1) faellt
     es auf 4,4:1, dort wird --fg-muted per .on-surface-Regel auf --muted gehoben. */
  --fg-muted: var(--ink-faint);

  --btn-secondary-bg: var(--surface-1);
  --btn-secondary-fg: var(--text);
  --btn-secondary-border: var(--border-control);

  /* Marke: ein Blau, zwei Werte. --brand = Text/Icons/Fokus (accent, 7,1:1 auf
     Seite), --brand-fill = Flaeche mit weisser Schrift (primary, 5,2:1). */
  --brand: var(--accent);
  --brand-fill: var(--primary);
  --brand-strong: color-mix(in srgb, var(--primary) 82%, var(--background));
  --brand-soft: color-mix(in srgb, var(--primary) 14%, var(--background));
  --brand-soft-border: color-mix(in srgb, var(--primary) 38%, var(--background));

  /* Bedeutungsfarben (nie fuer Marke): gruen = bleibt lokal, amber = verlaesst
     das Geraet (Spiegeldaten), rot = Warnung. Toenungen aus --background
     gemischt, damit Text darauf >= 6:1 bleibt. */
  --local-fg: var(--success);
  --local-bg: color-mix(in srgb, var(--success) 12%, var(--background));
  --local-border: color-mix(in srgb, var(--success) 35%, var(--background));
  --local-solid: var(--success);
  --mirror-fg: var(--warning);
  --mirror-bg: color-mix(in srgb, var(--warning) 12%, var(--background));
  --mirror-border: color-mix(in srgb, var(--warning) 35%, var(--background));
  --mirror-solid: var(--warning);
  --danger-fg: var(--danger);
  --danger-bg: color-mix(in srgb, var(--danger) 12%, var(--background));
  --danger-border: color-mix(in srgb, var(--danger) 35%, var(--background));

  /* Auf Dunkel traegt die Flaechenstufe die Tiefe, Schatten nur dezent. */
  --shadow-window: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -16px rgba(0, 0, 0, .6);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4);
  --scrim: rgba(0, 0, 0, .28);

  --radius-surface: 10px;
  --radius-control: 10px;
  --radius-window: 14px;
  --radius-pill: 999px;

  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px;
  --space-12: 96px; --space-16: 128px;

  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 64px;

  --footer-bg: var(--bg-muted);
  --footer-bg-2: var(--bg-muted);
  --footer-border: var(--border);
  --footer-heading: var(--text);
  --footer-fg: var(--text-body);
  --footer-muted: var(--ink-faint);
  --footer-link-hover: var(--text);
  --footer-accent: var(--accent);

  --sidebar-w: 256px;
}

/* Text auf Karten-/Popover-Flaechen: --ink-faint (#8a8a8f) erreicht auf
   --surface-1 nur 4,4:1, deshalb dort die naechsthellere Stufe --muted
   (5,9:1 auf --surface-1, 5,1:1 auf --surface-2). */
.hero-coverage, .provider-card, .compare-table-wrap, .feature-card, .compare-pane,
.engine-card, .sec, .infra-table, .aud, .pricing-card, .download-card,
.lang-switch-list, .mobile-nav-list a, .lang-hint, .code-block, .btn-secondary,
.btn-soon, .hero-badge, .trust-candid, .story-stage, .mode-tab {
  --fg-muted: var(--muted);
}

/* Themenwechsel zwischen Abschnitten sichtbar machen (Trennlinie + leichter
   Ton), sonst laufen inhaltlich unterschiedliche Bereiche optisch ineinander
   über, z. B. zwischen "Häufige Fragen" und "Preise". */
.section-divider { border-top: 1px solid var(--hairline); }
/* Dunkle Vorschau: keine abwechselnden Flaechenbaender, Abschnitte trennt
   allein die Haarlinie (Desktop-App-Logik). */
.section-alt { background: transparent; }

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html.js { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
/* Ruhige Hierarchie: Ueberschriften semibold statt bold. */
h1, h2, h3 { font-weight: 600; }
/* 375px: "Datenschutzbeauftragten" (36px) und lange FR-Woerter im
   Vergleichstext schoben die Seite seitlich auf (auch auf main). */
@media (max-width: 479px) {
  /* Nur sehr lange Woerter trennen (>= 14 Zeichen), sonst zerfallen kurze
     Zeilen wie "Mi-nuten" in der Preisueberschrift. */
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 14 6 6; }
  .compare-text { overflow-wrap: anywhere; }
  .compare-grid { grid-template-columns: minmax(0, 1fr); }
  .compare-head { flex-wrap: wrap; }
  .risk-badge { margin-left: 0; }
}
a { color: inherit; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-3); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.skip-link {
  position: absolute; left: 12px; top: -48px;
  background: var(--fg-heading); color: var(--bg-page);
  padding: 10px 16px; border-radius: var(--radius-control);
  z-index: 100; transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg-page) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  height: var(--header-h);
}
.header-row { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--space-2); min-width: 0; }
.brand {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  column-gap: 10px; row-gap: 2px;
  font-weight: 650; font-size: var(--text-md); text-decoration: none; color: var(--fg-heading); min-width: 0;
}
/* Zwei-Farben-Logo seit 2026-09-22 (dunkelgruener Text/Abzeichen, kein
   Schwarz/Transparent mehr) — filter:invert(1) wuerde das Gruen zu einem
   falschen Rosa drehen statt zu Weiss. Darum jetzt zwei fertige Varianten
   (hell/dunkel vorgerendert) statt eines Filtertricks auf einem Bild;
   welche sichtbar ist, steuert dieselbe Theme-Logik wie vorher. */
.brand-logo { height: 28px; width: auto; display: block; }
/* Dunkle Vorschau: sichtbar ist die Variante fuer dunklen Grund
   (tegmaguard-lockup-ondark.png: linker Kreis hell, Linse ausgespart). */
.site-header .brand-logo-light { display: none; }
.brand-tagline { font-size: 0.7rem; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; line-height: 1.2; }
.site-nav { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--fg-secondary); white-space: nowrap; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { color: var(--fg-heading); }
.site-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.site-nav a[aria-current="true"] { color: var(--fg-heading); }
/* Gruppenlabels + Icons zeigt nur die Seitenleiste (>= 1080px, siehe unten). */
.site-nav-group, .site-nav-icon { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Sprachumschalter: Dropdown (Globus + Code + Pfeil), wie bei Apple/Stripe.
   Bewusst auf JEDER Breite sichtbar -- vorher war die Inline-Liste "DE · EN
   · FR · ES" ab 1080px ausgeblendet, das Burger-Menü kam aber erst ab 760px
   dazu, sodass die Sprachwahl zwischen 760 und 1079px komplett unerreichbar
   war. Der kompakte Button spart ausserdem die Breite, die vorher die
   Hauptnavigation ("Akten-Engine") auf Laptop-Breiten zum Umbrechen brachte. */
.lang-switch { position: relative; }
.lang-switch-btn {
  display: flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 10px; border-radius: var(--radius-control);
  border: 1px solid var(--border-control); background: var(--surface-1);
  color: var(--fg-secondary); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer;
}
.lang-switch-btn:hover { border-color: var(--border-strong); color: var(--fg-heading); }
.lang-switch-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lang-switch-btn svg { flex: none; }
.lang-switch-btn .icon-globe { width: 15px; height: 15px; }
.lang-switch-btn .icon-chevron { width: 11px; height: 11px; transition: transform .15s var(--ease-out); }
.lang-switch-btn[aria-expanded="true"] .icon-chevron { transform: rotate(180deg); }
.lang-switch-code { text-transform: uppercase; }

.lang-switch-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  list-style: none; margin: 0; padding: 6px; min-width: 152px;
  background: var(--surface-1); border: 1px solid var(--border-control);
  border-radius: var(--radius-surface); box-shadow: var(--shadow-window);
}
.lang-switch-list[hidden] { display: none; }
.lang-switch-list li { margin: 0; }
.lang-switch-list a, .lang-switch-list .is-current {
  display: block; padding: 8px 10px; border-radius: var(--radius-control);
  font-size: var(--text-sm); text-decoration: none;
}
.lang-switch-list a { color: var(--fg-secondary); }
.lang-switch-list a:hover { background: var(--surface-2); color: var(--fg-heading); }
.lang-switch-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lang-switch-list .is-current { color: var(--fg-heading); font-weight: 650; background: var(--surface-2); }

/* Tablet: Navigation kompakter, damit Logo+Slogan so oft wie moeglich in einer Zeile bleiben */
@media (max-width: 1079px) {
  .header-row { gap: var(--space-2); }
  .brand-tagline { font-size: 0.65rem; letter-spacing: .03em; }
  .site-nav { gap: var(--space-2); font-size: 0.8125rem; }
  .header-actions { gap: 10px; }
  .header-actions .btn-text-long { display: none; }
  .header-actions .btn-text-short { display: inline; }
}

/* Mobile: Navigation weg, Slogan faellt bei Platzmangel automatisch (flex-wrap)
   in eine eigene, zentrierte Zeile unter das Logo -- Logo bleibt dabei gross. */
@media (max-width: 759px) {
  .brand-tagline { font-size: 0.625rem; }
}

/* Sehr schmal: Tagline darf zusaetzlich innerhalb ihrer eigenen Zeile umbrechen */
@media (max-width: 380px) {
  .brand-tagline { white-space: normal; line-height: 1.15; max-width: 22ch; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-control); font-weight: 600; text-decoration: none;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap; font-family: inherit;
  transition: transform .12s var(--ease-out), background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-sm { padding: 8px 14px; font-size: var(--text-sm); }
.btn-lg { padding: 14px 24px; font-size: var(--text-md); }
.btn-primary { background: var(--brand-fill); color: var(--on-primary); }
.btn-primary:hover { background: var(--brand-strong); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.btn-secondary:hover { border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--fg-heading); border-color: var(--border-control); }
/* Windows-Version in Vorbereitung (DECISIONS Nr. 193 Nachbesserung): grau,
   nicht klickbar (<span>, kein href), damit hier nichts verspricht, was noch
   nicht ausgeliefert wird. */
.btn-disabled {
  background: transparent; color: var(--fg-muted); border-color: var(--hairline);
  cursor: default; gap: 8px;
}
.btn-disabled .btn-icon { color: var(--fg-muted); }
.btn-soon {
  font-size: 0.75rem; font-weight: 600; color: var(--fg-secondary);
  background: var(--surface-1); border-radius: 999px; padding: 2px 8px; margin-left: 2px;
}
.btn-text-short { display: none; }
@media (max-width: 480px) { .btn-text-long { display: none; } .btn-text-short { display: inline; } }

/* ---------- Section basics ---------- */
section { padding: var(--space-10) 0; }
section[id], main [id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); font-weight: 650; color: var(--brand);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-2);
}
.section-head { max-width: 720px; margin: 0 auto var(--space-6); text-align: center; }
.section-head-left { text-align: left; margin: 0 0 var(--space-5); max-width: 760px; }
.section-head h2 { font-size: var(--text-2xl); color: var(--fg-heading); margin: 0 0 var(--space-2); letter-spacing: -0.01em; }
.section-head p { color: var(--fg-secondary); font-size: var(--text-md); margin: 0; }

/* ---------- Ankündigungs-Banner (fertige Werbe-Kreation, eigene
   Kopfzeile bereits im Bild) ---------- */
.announce { padding: var(--space-4) 0 0; }
.announce-img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-window);
}

/* ---------- Hero ---------- */
.hero { padding-top: var(--space-10); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 640px;
  background: none; /* Vorschau dunkel: kein Glow-Halo hinter dem Hero */
  pointer-events: none; z-index: 0;
}
.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 860px; margin: 0 auto; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--space-3); }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm);
  color: var(--fg-secondary); background: var(--bg-muted); border: 1px solid var(--hairline);
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.hero-badge svg { width: 14px; height: 14px; color: var(--brand); }
.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--fg-heading); margin: 0 0 var(--space-3);
}
.hero .lede { font-size: var(--text-md); color: var(--fg-secondary); max-width: 620px; margin: 0 auto var(--space-4); }
.hero-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-2); }
.hero-actions .btn { white-space: normal; text-align: center; max-width: 100%; }
.hero-meta { font-size: var(--text-sm); color: var(--fg-muted); margin: 0 0 var(--space-6); }

/* Trial->Lokal-Edition-Hinweis (Lizenzmodell 2026-09-26, DECISIONS Nr. 192):
   nach den 30 Testtagen faellt die App nicht in Read-Only, sondern auf die
   dauerhaft kostenlose lokale Nutzung (Ollama) zurueck. */
.hero-trial-note { font-size: var(--text-sm); color: var(--fg-secondary); max-width: 34em; margin: 0 0 var(--space-4); line-height: 1.5; }

/* Spezifikationszeile unter den CTAs (aus der Hero-Redesign-Variante B
   uebernommen): vier Kennzahlen mit feinen Trennlinien statt Fliesstext. */
.hero-specs {
  display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 var(--space-4);
  padding: var(--space-2) 0 0; border-top: 1px solid var(--hairline);
}
.hero-specs > div { padding-right: var(--space-3); margin-right: var(--space-3); border-right: 1px solid var(--hairline); }
.hero-specs > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-specs dt { font-size: 0.8125rem; color: var(--fg-secondary); margin: 0 0 2px; }
.hero-specs dd { font-size: var(--text-sm); font-weight: 600; color: var(--fg-heading); margin: 0; }

.hero-stage {
  position: relative; margin: 0 auto; max-width: 980px;
  border-radius: var(--radius-window); overflow: hidden;
  box-shadow: var(--shadow-window); border: 1px solid var(--hairline);
  background: var(--background);
}
.hero-stage video, .hero-stage img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.hero-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--scrim); border: 0; cursor: pointer; color: var(--on-primary);
}
.hero-play-circle {
  width: 74px; height: 74px; border-radius: 50%; background: color-mix(in srgb, var(--on-primary) 16%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--on-primary) 55%, transparent); backdrop-filter: blur(6px);
  display: grid; place-items: center; transition: transform .18s var(--ease-out), background .18s;
}
.hero-play:hover .hero-play-circle { transform: scale(1.06); background: color-mix(in srgb, var(--on-primary) 26%, transparent); }
.hero-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.hero-play-circle svg { width: 26px; height: 26px; margin-left: 3px; }
.hero-stage.is-playing .hero-play { display: none; }
.hero-stage.is-playing img { display: none; }
.hero-stage:not(.is-playing) video { display: none; }
.hero-caption { text-align: center; font-size: var(--text-sm); color: var(--fg-muted); margin-top: var(--space-2); }

/* ---------- Hero, zweispaltig (Masterplan Teil F3) ----------
   Nur aktiv mit .hero-split; die Sprachversionen mit dem alten, zentrierten
   .hero-inner bleiben unberuehrt, bis sie nachgezogen sind (Teil F4). */
:root {
  --coverage-bg: var(--bg-card);
  --coverage-field-bg: var(--background);
}
.hero-split { padding: var(--space-8) 0 var(--space-10); }
/* Kein Deko-Halo hinter dem geteilten Hero: die Karte traegt die Flaeche. */
.hero-split::before { display: none; }
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-8); align-items: start;
}
.hero-copy { padding-top: var(--space-3); min-width: 0; }
.hero-split .hero-badges { justify-content: flex-start; }
.hero-split h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.015em; }
.hero-split .lede { margin: 0 0 var(--space-4); max-width: 34em; }
.hero-split .hero-actions { justify-content: flex-start; }
.hero-split .hero-meta { margin: 0 0 var(--space-2); }
.btn-icon { width: 18px; height: 18px; flex: none; }

.hero-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: var(--text-sm); font-weight: 600; color: var(--brand); text-decoration: none;
}
.hero-link svg { width: 16px; height: 16px; transition: transform .15s var(--ease-out); }
.hero-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero-link:hover svg { transform: translateX(2px); }
.hero-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* Karte rechts: Land/Branche-Auswahl + Liste. Ohne JS bleibt sie verborgen
   (hidden-Attribut im Markup), weil ihr Inhalt nur aus hero-coverage.js kommt. */
.hero-coverage {
  background: var(--coverage-bg); border: 1px solid var(--border-control);
  border-radius: var(--radius-window); box-shadow: var(--shadow-window);
  padding: var(--space-4); min-width: 0;
}
.coverage-title { font-size: var(--text-lg); line-height: 1.25; color: var(--fg-heading); margin: 0 0 var(--space-1); letter-spacing: -0.005em; }
.coverage-sub { font-size: var(--text-sm); color: var(--fg-secondary); margin: 0 0 var(--space-3); line-height: 1.5; }
.coverage-selects { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.coverage-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.coverage-label { font-size: var(--text-sm); font-weight: 600; color: var(--fg-secondary); }
.coverage-select { position: relative; display: block; }
.coverage-select select {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px;
  padding: 0 36px 0 12px; font: inherit; font-size: 0.9375rem; color: var(--fg-heading);
  background: var(--coverage-field-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  cursor: pointer; text-overflow: ellipsis;
}
.coverage-select select:hover { border-color: var(--border-strong); }
.coverage-select select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.coverage-select svg {
  position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  color: var(--fg-secondary); pointer-events: none;
}

.coverage-list { list-style: none; margin: 0; padding: 0; min-height: 20rem; }
.coverage-item {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--hairline);
}
.coverage-item:first-child { border-top: 0; padding-top: 0; }
.coverage-item > svg { width: 20px; height: 20px; color: var(--brand); margin-top: 2px; }
.coverage-item-title { display: block; font-weight: 600; color: var(--fg-heading); line-height: 1.4; }
.coverage-item-norm { display: block; font-size: var(--text-sm); color: var(--fg-secondary); line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; }
.coverage-item-norm b { font-weight: 600; color: var(--fg-primary); }
/* Ollama-Zeile: landesunabhaengig, in der App-Bedeutungsfarbe "lokal". */
.coverage-item.is-local {
  margin-top: var(--space-1); padding: 12px; border: 1px solid var(--local-border);
  border-radius: var(--radius-control); background: var(--local-bg);
}
.coverage-item.is-local > svg,
.coverage-item.is-local .coverage-item-title { color: var(--local-fg); }

.coverage-gap {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px;
  margin: var(--space-2) 0 0; padding: 12px; font-size: var(--text-sm); line-height: 1.5;
  color: var(--fg-secondary); background: var(--bg-muted); border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
}
.coverage-gap[hidden] { display: none; }
.coverage-gap svg { width: 20px; height: 20px; color: var(--fg-secondary); }
.coverage-foot { font-size: 0.8125rem; color: var(--fg-secondary); margin: var(--space-3) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--hairline); line-height: 1.5; }

/* Werbespot: frueher im Hero, jetzt eigene Sektion direkt darunter. */
.showreel { padding: var(--space-8) 0; }

@media (max-width: 1023px) {
  .hero-grid { gap: var(--space-5); }
  .hero-coverage { padding: var(--space-3); }
}
@media (max-width: 759px) {
  .hero-split { padding: var(--space-6) 0 var(--space-8); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .hero-copy { padding-top: 0; }
  .coverage-list { min-height: 0; }
  /* 16px verhindert das automatische Hineinzoomen von iOS Safari beim Antippen. */
  .coverage-select select { font-size: var(--text-base); }
  .showreel { padding: var(--space-6) 0; }
}
@media (max-width: 479px) {
  .coverage-selects { grid-template-columns: minmax(0, 1fr); }
  .hero-split .hero-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-link svg { transition: none; }
}

/* ---------- Provider grid (statisch, zwei Zeilen, keine Animation) ---------- */
.providers {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  --provider-gap: var(--space-2);
}
.providers-label { text-align: center; font-size: var(--text-sm); color: var(--fg-muted); margin: 0 0 var(--space-3); }
.providers-foot {
  text-align: center; font-size: var(--text-sm); color: var(--fg-muted);
  margin: var(--space-3) auto 0; max-width: 680px; line-height: 1.5;
}

.provider-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--provider-gap);
  max-width: 980px; margin: 0 auto; padding: 0; list-style: none;
}
.provider-grid .provider-card { width: 100%; justify-content: center; }
@media (max-width: 760px) { .provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.provider-card {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  flex: 0 0 auto; padding: 6px 16px 6px 6px;
  background: var(--bg-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); white-space: nowrap;
}
.provider-mark {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  /* Helle Kachel bleibt bewusst: die Herstellerzeichen sind fuer hellen Grund
     gebaut (ChatGPT/Ollama schwarz, Gemma feine blaue Linien). Auf dunkler
     Kachel waere Gemma kaum sichtbar (Screenshot-Befund), ein Filter wuerde
     Markenfarben verfaelschen. --text statt reinem Weiss. */
  background: var(--text);
  border: 1px solid var(--border-control);
}
.provider-icon {
  display: block; width: 18px; height: 18px; object-fit: contain;
}
.provider-name { font-size: var(--text-sm); font-weight: 600; color: var(--fg-heading); line-height: 1.2; text-align: left; }
.provider-name small { display: block; font-weight: 400; font-size: 0.7rem; color: var(--fg-muted); letter-spacing: 0; }

.provider-card.is-local {
  border-color: color-mix(in srgb, var(--local-solid) 45%, var(--hairline));
  background: var(--local-bg);
}
.provider-card.is-local .provider-name small { color: var(--local-fg); }
.provider-card.is-ollama-model { border-color: color-mix(in srgb, var(--local-solid) 32%, var(--hairline)); }
.provider-card.is-ollama-model .provider-name small { color: var(--local-fg); }

@media (max-width: 600px) {
  .providers { --provider-gap: 10px; }
  .provider-card { padding: 5px 12px 5px 5px; gap: 8px; }
  .provider-mark { width: 26px; height: 26px; border-radius: 8px; }
  .provider-icon { width: 15px; height: 15px; }
  .provider-name { font-size: 0.82rem; }
  .provider-name small { font-size: 0.65rem; }
  .providers-foot { font-size: 0.82rem; }
}

/* ---------- Marken-Statement ---------- */
.statement { padding: var(--space-8) 0; text-align: center; }
.statement-text {
  margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 650;
  color: var(--fg-heading); letter-spacing: -0.01em; max-width: 780px;
  margin-inline: auto; line-height: 1.35;
}

.statement-note {
  margin: var(--space-3, 0.75rem) auto 0; max-width: 680px; font-size: 0.95rem;
  line-height: 1.5; color: var(--fg-muted, inherit);
}

/* ---------- Comparison table ---------- */
/* Nutzer-Befund 2026-09-26: auf schmalen Bildschirmen ist nur die
   "Kriterium"-Spalte im sichtbaren Ausschnitt, die Werte-Spalten
   (Tegmaguard/Cloud/Hand) liegen dahinter verborgen — der reine Text-Hinweis
   darunter (.scroll-hint) reichte als Signal nicht aus. .compare-table-outer
   ist bewusst ein EIGENER, NICHT scrollender Rahmen um .compare-table-wrap:
   der Pfeil-Chip haengt an ihm, nicht am scrollenden Element, damit er beim
   Wischen an Ort und Stelle stehen bleibt (ein Kind der Scroll-Box selbst
   wuerde mit dem Inhalt mitwandern, auch mit position:sticky waere die
   Kombination mit einem vorangestellten <span> vor einer <table> fragil).
   landing.js hoert auf das scroll-Event von #compareTableWrap und setzt bei
   scrollLeft > 12px die Klasse .is-scrolled auf .compare-table-outer, um
   den Chip danach dauerhaft auszublenden. */
.compare-table-outer { position: relative; }
.compare-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-window); background: var(--bg-card); box-shadow: var(--shadow-card); }
.compare-scroll-hint {
  display: none;
  position: absolute;
  /* Fable-Kontrollfund 2026-09-26: top:50% bezog sich auf die Hoehe der
     GESAMTEN Tabelle (alle 9 Zeilen, ~940px), nicht auf den sichtbaren
     Ausschnitt — der Chip landete dadurch mitten in der langen Tabelle,
     im initial sichtbaren Bereich (Kopfzeile) war er unsichtbar. Fester
     Pixel-Wert statt 50%, damit er direkt auf der Kopfzeile sitzt, egal
     wie lang die Tabelle darunter ist. */
  top: 10px;
  right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-fill);
  color: var(--on-primary);
  align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  box-shadow: var(--shadow-window);
  pointer-events: none;
  z-index: 3;
  animation: compare-hint-nudge 1.4s ease-in-out infinite;
}
@keyframes compare-hint-nudge {
  0%, 100% { opacity: .95; right: 10px; }
  50% { opacity: .55; right: 4px; }
}
@media (max-width: 899px) {
  .compare-table-outer:not(.is-scrolled) .compare-scroll-hint { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .compare-scroll-hint { animation: none; }
}
table.compare-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: var(--text-sm); }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border-control); vertical-align: top; }
.compare-table thead th { font-size: var(--text-sm); color: var(--fg-muted); font-weight: 600; border-bottom: 1px solid var(--border-control); }
.compare-table tbody th { font-weight: 600; color: var(--fg-heading); white-space: nowrap; }
.compare-table tr:last-child td, .compare-table tr:last-child th { border-bottom: 0; }
.compare-table td.col-us { background: color-mix(in srgb, var(--primary) 10%, transparent); font-weight: 550; color: var(--fg-heading); }
.compare-table thead th.col-us { color: var(--brand); }
.compare-table .ok { color: var(--local-fg); }
.compare-table .no { color: var(--danger-fg); }
.scroll-hint { font-size: var(--text-sm); color: var(--fg-muted); text-align: center; margin-top: var(--space-2); }

/* ---------- Feature grid ---------- */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .features-grid { grid-template-columns: 1fr; } }
.feature-card {
  border: 1px solid var(--hairline); border-radius: var(--radius-window); padding: var(--space-4);
  background: var(--bg-card); box-shadow: var(--shadow-card);
}
.feature-icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); margin-bottom: var(--space-2);
}
.feature-icon svg { width: 20px; height: 20px; }
.feature-card h3 { font-size: var(--text-md); color: var(--fg-heading); margin: 0 0 6px; }
.feature-card p { color: var(--fg-secondary); font-size: var(--text-sm); margin: 0; }
.feature-card.is-wide { grid-column: span 3; }
@media (max-width: 900px) { .feature-card.is-wide { grid-column: span 2; } }
@media (max-width: 620px) { .feature-card.is-wide { grid-column: span 1; } }

/* ---------- Mirror-data compare block ---------- */
.mirror-core { background: transparent; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.compare { max-width: 940px; margin: 0 auto; }
.mode-tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: var(--space-2); flex-wrap: wrap; }
.mode-tab {
  font-size: var(--text-sm); font-weight: 600; padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-control); background: var(--surface-1); color: var(--fg-secondary); cursor: pointer;
}
.mode-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-tab:hover { border-color: var(--border-strong); color: var(--fg-heading); }
/* Ausgewaehlt = --surface-2 + heller Text + kraeftigerer Rahmen (Desktop-App-
   Logik), nicht farbig gefuellt: Blau bleibt dem Haupt-CTA vorbehalten. */
.mode-tab[aria-selected="true"] { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.mode-note { text-align: center; font-size: var(--text-sm); color: var(--fg-secondary); max-width: 620px; margin: 0 auto var(--space-3); min-height: 1.4em; }
.compare-branch { text-align: center; margin-bottom: var(--space-2); }
.compare-branch-name { font-weight: 650; color: var(--fg-heading); font-size: var(--text-md); }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 760px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-pane { background: var(--bg-card); border: 1px solid var(--hairline); border-radius: var(--radius-window); padding: var(--space-3); min-height: 190px; box-shadow: var(--shadow-card); }
.compare-head { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 650; margin-bottom: 10px; }
.compare-dot { width: 9px; height: 9px; border-radius: 50%; }
.compare-head.local { color: var(--local-fg); }
.compare-head.local .compare-dot { background: var(--local-solid); }
.compare-head.mirror { color: var(--mirror-fg); }
.compare-head.mirror .compare-dot { background: var(--mirror-solid); }
.compare-text { font-family: var(--font-mono); font-size: 0.92rem; line-height: 1.6; white-space: pre-wrap; color: var(--fg-primary); margin: 0; min-height: 120px; }
.compare-text mark { border-radius: 4px; padding: 0 3px; font-weight: 600; background: none; }
.compare-text mark.m-local { color: var(--local-fg); background: var(--local-bg); }
.compare-text mark.m-mirror { color: var(--mirror-fg); background: var(--mirror-bg); }

/* Modus-Kennzeichnung */
.risk-badge {
  margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 0.6875rem; font-weight: 650; letter-spacing: .02em;
  text-transform: none; white-space: nowrap; border: 1px solid transparent;
}
.risk-badge[data-risk="low"]    { background: var(--local-bg);  color: var(--local-fg);  border-color: var(--local-border); }
.risk-badge[data-risk="medium"] { background: var(--mirror-bg); color: var(--mirror-fg); border-color: var(--mirror-border); }
.risk-badge[data-risk="high"]   { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }

/* Rauschen: Kopf des rechten Panes wird rot statt orange */
.compare[data-mode="noise"] .compare-head.mirror { color: var(--danger-fg); }
.compare[data-mode="noise"] .compare-head.mirror .compare-dot { background: var(--danger-fg); }

/* Rauschen-Markierungen */
.compare-text mark.m-noise { color: var(--danger-fg); background: var(--danger-bg); }
.compare-text mark.m-noise u.noise-diff {
  text-decoration: underline wavy currentColor; text-underline-offset: 3px;
  font-weight: 700; background: color-mix(in srgb, var(--danger-fg) 18%, transparent);
  border-radius: 3px; padding: 0 1px;
}
.compare-text mark.m-noise.m-untouched {
  background: transparent; border-bottom: 2px dotted var(--danger-fg);
  border-radius: 0; padding: 0;
}

/* Hinweis unter den Tabs */
.mode-note { font-weight: 550; color: var(--fg-primary); }
.mode-hint {
  text-align: center; font-size: var(--text-sm); color: var(--brand);
  margin: -8px auto var(--space-3); max-width: 620px;
}
.compare.is-fading .compare-text { opacity: 0; transition: opacity .18s var(--ease-out); }
.compare-text { transition: opacity .18s var(--ease-out); }
.compare-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.compare-dots { display: flex; gap: 6px; }
.compare-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--border-strong); cursor: pointer; padding: 0; }
.compare-dots button[aria-selected="true"] { background: var(--brand); }
.compare-pause { font-size: var(--text-sm); color: var(--muted); background: transparent; border: 1px solid var(--border-control); border-radius: var(--radius-pill); padding: 6px 12px; cursor: pointer; }
.compare-pause:hover { color: var(--fg-heading); border-color: var(--border-strong); }

/* ---------- Akten-Engine ---------- */
.engine { }
.engine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 900px) { .engine-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .engine-grid { grid-template-columns: 1fr; } }
.engine-card {
  border: 1px solid var(--hairline); border-radius: var(--radius-window); padding: var(--space-3);
  background: var(--bg-card);
}
.engine-num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--brand); font-weight: 650; }
.engine-card h3 { font-size: var(--text-base); margin: 6px 0; color: var(--fg-heading); }
.engine-card p { font-size: var(--text-sm); color: var(--fg-secondary); margin: 0; }

/* ---------- Story (case flow) ---------- */
.story { background: transparent; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.story-details { border: 0; }
.story-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 0; font-weight: 600; color: var(--fg-heading); }
.story-summary::-webkit-details-marker { display: none; }
.story-summary-meta { color: var(--fg-muted); font-weight: 400; font-size: var(--text-sm); }
.story-summary-chevron { width: 18px; height: 18px; transition: transform .2s var(--ease-out); margin-left: auto; }
.story-details[open] .story-summary-chevron, details.install[open] .story-summary-chevron { transform: rotate(180deg); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; margin-top: var(--space-4); }
@media (max-width: 960px) { .story-grid { grid-template-columns: 1fr; } }
.story-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { padding: var(--space-4) 0; border-top: 1px solid var(--hairline); }
.step:first-child { border-top: 0; padding-top: 0; }
.step-label { display: block; font-size: var(--text-sm); color: var(--brand); font-weight: 650; margin-bottom: 6px; }
/* Duenner Anteilsbalken unter "Schritt n von 8": zeigt nur die Position im
   Ablauf (n/8), keine weitere Zahl. Blau auf dunkler Schiene. */
.step-label::after {
  content: ""; display: block; max-width: 200px; height: 3px; margin-top: 8px; border-radius: 2px;
  background: linear-gradient(to right, var(--primary) var(--step-p, 0%), var(--surface-2) var(--step-p, 0%));
}
.step:nth-child(1) { --step-p: 12.5%; } .step:nth-child(2) { --step-p: 25%; }
.step:nth-child(3) { --step-p: 37.5%; } .step:nth-child(4) { --step-p: 50%; }
.step:nth-child(5) { --step-p: 62.5%; } .step:nth-child(6) { --step-p: 75%; }
.step:nth-child(7) { --step-p: 87.5%; } .step:nth-child(8) { --step-p: 100%; }
.step-of { color: var(--fg-muted); font-weight: 400; }
.step h3 { font-size: var(--text-md); margin: 0 0 6px; color: var(--fg-heading); }
.step p { font-size: var(--text-sm); color: var(--fg-secondary); margin: 0; }
.step-shot { margin: var(--space-2) 0 0; display: none; }
.story-stage { position: sticky; top: calc(var(--header-h) + 24px); border-radius: var(--radius-window); overflow: hidden; box-shadow: var(--shadow-window); border: 1px solid var(--hairline); background: var(--bg-card); min-height: 240px; aspect-ratio: 4/3; }
.story-stage picture { position: absolute; inset: 0; display: block; }
.story-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s var(--ease-out); }
.story-stage img.is-active { opacity: 1; }
@media (max-width: 960px) { .story-stage { display: none; } .step-shot { display: block; } .step-shot img { border-radius: var(--radius-surface); border: 1px solid var(--hairline); } }

/* ---------- Two-col feature (brain) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split h2 { font-size: var(--text-2xl); color: var(--fg-heading); margin: 0 0 var(--space-2); }
.split .lede { color: var(--fg-secondary); font-size: var(--text-md); margin: 0 0 var(--space-3); }
.plain-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.plain-points li { padding-left: 26px; position: relative; font-size: var(--text-sm); color: var(--fg-secondary); }
.plain-points li strong { color: var(--fg-heading); display: block; font-size: var(--text-base); margin-bottom: 2px; }
.plain-points li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 5px;
  background: var(--brand-soft-border); border: 1px solid var(--brand-soft-border);
}
.split-media figure { margin: 0; border-radius: var(--radius-window); overflow: hidden; border: 1px solid var(--hairline); box-shadow: var(--shadow-window); }

/* ---------- Wer dahintersteht (SEO-Audit 2026-10-03, JEV-006) ---------- */
.founder-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.founder-media figure { max-width: 360px; margin-left: auto; }
.founder-media img { width: 100%; height: auto; }
@media (max-width: 900px) {
  .founder-split { grid-template-columns: minmax(0, 1fr); }
  .founder-media { order: -1; }
  .founder-media figure { max-width: 240px; margin: 0; }
}

/* ---------- Security / infra ---------- */
.security-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
@media (max-width: 960px) { .security-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .security-grid { grid-template-columns: 1fr; } }
.sec { border: 1px solid var(--hairline); border-radius: var(--radius-window); padding: var(--space-3); background: var(--bg-card); }
.sec-icon { width: 22px; height: 22px; color: var(--brand); margin-bottom: 10px; }
.sec h3 { font-size: var(--text-base); margin: 0 0 6px; color: var(--fg-heading); }
.sec p { font-size: var(--text-sm); color: var(--fg-secondary); margin: 0; }

.infra-table { border: 1px solid var(--hairline); border-radius: var(--radius-window); overflow: hidden; background: var(--bg-card); }
.infra-row { display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--hairline); font-size: var(--text-sm); }
.infra-row:first-child { border-top: 0; }
.infra-row dt { padding: 12px 16px; color: var(--fg-muted); background: var(--bg-muted); font-weight: 600; }
.infra-row dd { padding: 12px 16px; margin: 0; color: var(--fg-primary); }
@media (max-width: 620px) { .infra-row { grid-template-columns: 1fr; } .infra-row dt { border-bottom: 1px solid var(--hairline); } }

/* ---------- Audience ---------- */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 900px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .audience-grid { grid-template-columns: 1fr; } }
.aud { border: 1px solid var(--hairline); border-radius: var(--radius-window); padding: var(--space-3); background: var(--bg-card); }
.aud h3 { font-size: var(--text-base); margin: 0 0 6px; color: var(--fg-heading); }
.aud p { font-size: var(--text-sm); color: var(--fg-secondary); margin: 0; }

/* ---------- Start steps ---------- */
.start-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); counter-reset: s; }
@media (max-width: 760px) { .start-steps { grid-template-columns: 1fr; } }
.start-step { position: relative; padding-left: 52px; }
.start-step-num {
  position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-soft-border);
  display: grid; place-items: center; font-weight: 700; font-family: var(--font-mono);
}
.start-step h3 { font-size: var(--text-md); margin: 0 0 4px; color: var(--fg-heading); }
.start-step p { font-size: var(--text-sm); color: var(--fg-secondary); margin: 0; }

/* ---------- FAQ ---------- */
.faq-inner { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--hairline); padding: var(--space-2) 0; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: flex-start; gap: var(--space-2); font-weight: 600; color: var(--fg-heading); font-size: var(--text-md); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { flex: 0 0 auto; width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 5px; position: relative; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--fg-secondary); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.faq-icon::before { width: 8px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 8px; transition: transform .15s var(--ease-out); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-body { padding-top: var(--space-2); color: var(--fg-secondary); font-size: var(--text-sm); }
.faq-body p { margin: 0 0 10px; }
.faq-body p:last-child { margin-bottom: 0; }

/* ---------- Preise ---------- */
.pricing { text-align: center; }
.pricing h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); color: var(--fg-heading); max-width: 760px; margin-left: auto; margin-right: auto; }
.pricing-sub { color: var(--fg-secondary); max-width: 640px; margin: 0 auto var(--space-4); }
/* Nutzer-Wunsch 2026-09-26: monatlich/jaehrlich als Segmented-Control ueber
   dem Preisrechner, mit einem Badge auf "jaehrlich", der den Rabatt gegen
   monatliche Zahlung nennt (landing.js berechnet die Monats-Staffel als
   Jahres-Tier/10 — daher exakt "2 Monate geschenkt"). */
.billing-toggle {
  display: inline-flex; gap: 4px; margin: 0 auto var(--space-5); padding: 4px;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--bg-muted);
}
.pricing .container { text-align: center; }
.billing-toggle-btn {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; font: inherit; font-weight: 600;
  font-size: var(--text-sm); color: var(--fg-secondary);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 150ms ease, color 150ms ease;
}
.billing-toggle-btn.is-active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.billing-toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.billing-toggle-btn:not(.is-active):hover { color: var(--fg-heading); }
.billing-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand);
}
.billing-toggle-btn:not(.is-active) .billing-badge { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.pricing-card { border: 1px solid var(--hairline); border-radius: var(--radius-window); padding: var(--space-6); background: var(--bg-card); box-shadow: var(--shadow-card); max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.pricing-calc { text-align: left; }
.pricing-calc label { display: block; font-size: var(--text-sm); font-weight: 650; color: var(--fg-secondary); margin-bottom: var(--space-2); }
.pricing-calc label strong { color: var(--fg-heading); font-size: var(--text-md); }
#seat-slider { width: 100%; accent-color: var(--brand-fill); margin-bottom: var(--space-3); }
/* Dunkle Schiene + blauer Regler statt der hellen Chrome-Standardschiene.
   Firefox fuellt den gewaehlten Anteil zusaetzlich blau (::-moz-range-progress). */
#seat-slider {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px;
  background: var(--surface-2); cursor: pointer; margin-top: 8px;
}
#seat-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--text);
}
#seat-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 2px solid var(--text);
}
#seat-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--surface-2); }
#seat-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--primary); }
#seat-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.pricing-total { font-size: var(--text-md); color: var(--fg-secondary); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.pricing-total-sum { font-size: var(--text-lg); color: var(--fg-heading); }
.pricing-total-sum strong { color: var(--brand); }
.pricing-discount-note { font-size: var(--text-sm); color: var(--local-fg); margin: var(--space-2) 0 0; min-height: 1.2em; }
.pricing-cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.pricing-cta-meta { font-size: var(--text-sm); color: var(--fg-muted); margin: 0; }
.pricing-error { color: var(--danger-fg); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-control); padding: var(--space-2); font-size: var(--text-sm); }
.pricing-footnote { font-size: var(--text-sm); color: var(--fg-muted); max-width: 640px; margin: var(--space-4) auto 0; }
.pricing-footnote a { color: var(--brand); }

/* Preisanzeige brutto/netto (PAngV): Brutto hervorgehoben, Netto kleiner. */
.pricing-net { font-size: var(--text-sm); color: var(--fg-muted); margin: 0 auto var(--space-3); }
.pricing-net-line { font-size: var(--text-sm); color: var(--fg-muted); margin: var(--space-2) 0 0; }
.pricing-tax-note { font-size: 0.8125rem; color: var(--fg-muted); margin: var(--space-2) 0 0; line-height: 1.5; }
.pricing-company { align-self: stretch; display: flex; flex-direction: column; gap: var(--space-1); text-align: left; color: var(--fg-secondary); }
.pricing-company input { padding: 10px 14px; border-radius: var(--radius-control); border: 1px solid var(--border-strong); background: var(--background); color: var(--fg-primary); font-size: var(--text-sm); font-family: inherit; }
.pricing-company input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pricing-consent { align-self: stretch; display: flex; align-items: flex-start; gap: var(--space-2); text-align: left; color: var(--fg-secondary); }
.pricing-consent input[type="checkbox"] { flex: 0 0 auto; margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand-fill); }
.pricing-consent label { cursor: pointer; }
.pricing-legal-links { align-self: stretch; text-align: left; line-height: 1.5; }
.pricing-legal-links a { color: var(--brand); }
.pricing-terms { max-width: 640px; margin: var(--space-3) auto 0; text-align: left; font-size: var(--text-sm); color: var(--fg-secondary); }
.pricing-terms summary { cursor: pointer; font-weight: 600; color: var(--fg-heading); }
.pricing-terms summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pricing-terms p { margin: var(--space-2) 0 0; line-height: 1.5; }

/* Staffeltabelle: auf schmalen Bildschirmen scrollt die Tabelle im Wrapper. */
.tier-table-wrap { max-width: 720px; margin: var(--space-5) auto 0; }
.tier-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); color: var(--fg-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.tier-table caption { caption-side: top; text-align: left; font-weight: 650; color: var(--fg-heading); padding-bottom: var(--space-2); }
.tier-table th, .tier-table td { padding: 8px 10px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.tier-table thead th { color: var(--fg-muted); font-weight: 600; font-size: 0.8125rem; }
.tier-table th:first-child, .tier-table td:first-child { text-align: left; }
.tier-table tbody th { font-weight: 600; color: var(--fg-heading); }
.tier-table td strong { color: var(--fg-heading); }
@media (max-width: 479px) {
  .tier-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tier-table { min-width: 440px; }
}

/* ---------- Download ---------- */
.download { }
.download-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .download-cards { grid-template-columns: minmax(0, 1fr); } }
/* Mobil lief die Download-Karte auf 375px bis 449px breit (auch auf main): 1fr
   wuchs auf die min-content-Breite des nowrap-Buttons. minmax(0,1fr), weniger
   Innenabstand und umbrechende Buttons halten sie in der Spalte. */
@media (max-width: 479px) {
  .download-card { padding: var(--space-4) var(--space-3); }
  .download-actions .btn { white-space: normal; text-align: center; max-width: 100%; }
}
.download-card { border: 1px solid var(--hairline); border-radius: var(--radius-window); padding: var(--space-6); background: var(--bg-card); box-shadow: var(--shadow-card); text-align: center; }
.download-card h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); color: var(--fg-heading); }
.download-card h2 .btn-soon { vertical-align: middle; }
.download-card > p { color: var(--fg-secondary); margin: 0 0 var(--space-4); }
.download-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.download-meta { font-size: var(--text-sm); color: var(--fg-muted); }

.trial-form { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--hairline); }
.trial-form-row { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.trial-form-row input { flex: 1 1 200px; min-width: 0; max-width: 260px; padding: 10px 14px; border-radius: var(--radius-control); border: 1px solid var(--border-strong); background: var(--background); color: var(--fg-primary); font-size: var(--text-sm); font-family: inherit; }
.trial-form-row input::placeholder { color: var(--ink-faint); }
.trial-form-row input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.trial-form-row button { flex: 0 0 auto; padding: 10px 16px; font-size: var(--text-sm); } /* vorher ohne Innenabstand (btn ohne Groessenklasse) */
.trial-form-note { font-size: var(--text-sm); color: var(--fg-secondary); margin: 0; }
.trial-form-success { color: var(--local-fg); background: var(--local-bg); border: 1px solid var(--local-border); border-radius: var(--radius-control); padding: var(--space-2); font-size: var(--text-sm); }
.trial-form-error { color: var(--danger-fg); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-control); padding: var(--space-2); font-size: var(--text-sm); }
.install { text-align: left; max-width: 640px; margin: var(--space-5) auto 0; border-top: 1px solid var(--hairline); padding-top: var(--space-4); }
.install h3 { font-size: var(--text-md); margin: 0 0 8px; color: var(--fg-heading); }
.install p { font-size: var(--text-sm); color: var(--fg-secondary); }
.install-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--fg-heading); padding-bottom: var(--space-2);
}
.install-summary::-webkit-details-marker { display: none; }
details.install[open] .install-summary { padding-bottom: var(--space-3); }
details.install > p, details.install > ol, details.install > .install-alt { margin-top: var(--space-2); }
.install-steps { padding-left: 20px; font-size: var(--text-sm); color: var(--fg-secondary); }
.install-steps li { margin-bottom: 10px; }
.code-block { display: flex; align-items: center; gap: 8px; background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: var(--radius-control); padding: 10px 12px; margin-top: 6px; overflow-x: auto; }
.code-block code { font-family: var(--font-mono); font-size: 0.85rem; white-space: nowrap; }
.copy-btn { font-size: var(--text-sm); border: 1px solid var(--border-control); background: var(--surface-1); color: var(--text); border-radius: var(--radius-control); padding: 5px 10px; cursor: pointer; flex: 0 0 auto; }
.copy-btn:hover { border-color: var(--border-strong); }
.install-alt { font-size: var(--text-sm); color: var(--fg-muted); }
.install-alt code { overflow-wrap: anywhere; word-break: break-all; }
[hidden] { display: none !important; }

/* ---------- Mobile CTA ---------- */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg-page) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--hairline); }
.mobile-cta .btn { width: 100%; }
.mobile-cta-meta { display: block; font-size: 0.75rem; font-weight: 400; opacity: .85; }
@media (min-width: 760px) { .mobile-cta { display: none !important; } }

/* ---------- Mobile Navigation ---------- */
.nav-toggle {
  display: none;
  width: 36px; height: 36px; border-radius: var(--radius-control);
  border: 1px solid var(--border-control); background: var(--surface-1);
  place-items: center; cursor: pointer; color: var(--fg-secondary);
  flex: 0 0 auto; padding: 0;
}
.nav-toggle:hover { border-color: var(--border-strong); color: var(--fg-heading); }
.nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav-toggle svg { width: 18px; height: 18px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] { border-color: var(--border-strong); color: var(--fg-heading); }
.nav-toggle[aria-expanded="true"] .icon-burger { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
/* Mobiles Menue bis 1079px (vorher 759px): Handys quer (844/932px) und
   Tablets bekamen sonst die Tablet-Kopfleiste mit 30px-Links, FR/ES
   zweizeilig. Ab 1080px uebernimmt die Seitenleiste. Gleiche Schwelle in
   landing.js (navMedia). */
@media (max-width: 1079px) { html.js .nav-toggle { display: grid; } }

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 55;
  background: var(--bg-page);
  border-top: 1px solid var(--hairline);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: var(--space-3) var(--space-3) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s var(--ease-out), transform .22s var(--ease-out), visibility 0s linear .22s;
}
body.nav-open .mobile-nav {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s var(--ease-out), transform .22s var(--ease-out), visibility 0s linear 0s;
}
@media (min-width: 1080px) { .mobile-nav { display: none !important; } }
/* Tablet/Querformat: Menue-Inhalt nicht ueber die volle Breite ziehen. */
@media (min-width: 760px) and (max-width: 1079px) {
  .mobile-nav > nav, .mobile-nav > .mobile-nav-foot { max-width: 640px; margin-left: auto; margin-right: auto; }
}

.mobile-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mobile-nav-list a {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 56px; padding: 10px 14px;
  border: 1px solid transparent; border-radius: var(--radius-surface);
  background: var(--surface-1); text-decoration: none;
}
.mobile-nav-list a:hover { border-color: var(--border-control); }
.mobile-nav-list a:active { background: var(--bg-raised); }
.mobile-nav-list a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mobile-nav-label { font-size: var(--text-md); font-weight: 650; color: var(--fg-heading); line-height: 1.25; }
.mobile-nav-sub { font-size: var(--text-sm); color: var(--fg-secondary); line-height: 1.3; }

.mobile-nav-foot {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1);
}
.mobile-nav-foot .btn { width: 100%; }
.mobile-nav-meta { margin: 0; text-align: center; font-size: var(--text-sm); color: var(--fg-muted); }

/* Scroll-Sperre bei offenem Menü. body behält seine padding-bottom:64px-Regel,
   overflow überschreibt sie nicht. */
html.nav-open, body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transform: none; transition: none; }
  body.nav-open .mobile-nav { transform: none; transition: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--footer-bg), var(--footer-bg-2));
  border-top: 1px solid var(--footer-border);
  padding: var(--space-6) 0 calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  color: var(--footer-fg);
  color-scheme: dark;
}
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--footer-heading); }
.footer-brand .brand-logo { height: 24px; width: auto; }
.footer-note { color: var(--footer-muted); font-size: var(--text-sm); margin: 0; max-width: 46ch; }
.footer-links { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--footer-fg); }
.footer-links a { text-decoration: none; color: var(--footer-fg); border-bottom: 1px solid transparent; }
.footer-links a:hover { color: var(--footer-link-hover); border-bottom-color: var(--footer-accent); }
.footer-links a:focus-visible { outline: 2px solid var(--footer-accent); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 1079px) { html.js .site-nav { display: none; } }
body.has-mobile-cta { padding-bottom: 64px; }
/* Bis 479px (vorher 429px): auf 430px (iPhone Pro Max) drueckte der FR-Knopf
   "Télécharger" das Logo auf 17px Hoehe. Der CTA steht im Menue-Panel. */
@media (max-width: 479px) { .header-actions > .btn-primary { display: none; } }

/* ---------- Sprachhinweis (lang-hint.js) ---------- */
.lang-hint {
  position: fixed; left: var(--space-2); bottom: var(--space-2); z-index: 60;
  display: flex; align-items: center; gap: var(--space-1);
  max-width: min(420px, calc(100vw - 2 * var(--space-2)));
  padding: 10px 12px 10px 16px;
  background: var(--surface-1); color: var(--fg-primary);
  border: 1px solid var(--border-control); border-radius: var(--radius-surface);
  box-shadow: var(--shadow-window);
  font-size: var(--text-sm); line-height: 1.4;
}
.lang-hint a { color: var(--brand); font-weight: 600; white-space: nowrap; }
.lang-hint-close {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--fg-secondary); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.lang-hint-close:hover { background: var(--bg-raised); color: var(--fg-heading); }
.lang-hint-close:focus-visible, .lang-hint a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body.has-mobile-cta .lang-hint { bottom: 76px; }

/* ---------- Vertrauensseite (/vertrauen/, /en/trust/, /fr/confiance/, /es/confianza/) ----------
   Nur Layout; alle Komponenten (infra-table, security-grid, plain-points,
   founder-split) kommen aus den bestehenden Klassen oben. */
.footer-links { flex-wrap: wrap; }
.footer-links a[aria-current="page"] { color: var(--footer-heading); }
.founder-more { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.founder-more a { color: var(--brand); font-weight: 600; }
.trust-hero { padding: var(--space-8) 0 var(--space-6); }
.trust-hero h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--fg-heading); margin: 0 0 var(--space-3); max-width: 22ch; }
.trust-hero .lede { font-size: var(--text-md); color: var(--fg-secondary); max-width: 62ch; margin: 0 0 var(--space-3); }
.trust-candid { max-width: 62ch; margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--brand-soft-border); background: var(--brand-soft); border-radius: var(--radius-surface); color: var(--fg-primary); font-size: var(--text-sm); }
.trust-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.trust-toc a { display: inline-block; padding: 6px 12px; border: 1px solid var(--border-control); border-radius: var(--radius-pill); font-size: var(--text-sm); text-decoration: none; color: var(--fg-secondary); background: var(--surface-1); }
.trust-toc a:hover { color: var(--fg-heading); border-color: var(--border-strong); }
.trust-toc a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.trust-section { padding: var(--space-8) 0; }
.trust-section .security-grid { margin-bottom: 0; }
.trust-section a:not(.btn) { color: var(--brand); }
.trust-note { max-width: 760px; margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--fg-secondary); }
.trust-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 860px) { .trust-cols { grid-template-columns: 1fr; gap: var(--space-5); } }
.trust-cols h3 { font-size: var(--text-md); color: var(--fg-heading); margin: 0 0 var(--space-2); }
.trust-narrow > * { max-width: 760px; }
.trust-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.trust-stand { font-size: var(--text-sm); color: var(--fg-muted); margin: var(--space-4) 0 0; }

/* ---------- Rechtstexte (impressum.html, datenschutz.html, je vier Sprachen) ----------
   Frueher je Seite ein eigener <style>-Block mit `.legal { padding: 0 }`
   (urspruenglich `var(--space-8) 0 var(--space-9)`, --space-9 gibt es nicht,
   die Deklaration war ungueltig) — die H1 klebte am Header. Jetzt eine Stelle:
   64px unter dem Header wie .trust-hero (dort 64 oben/48 unten), 80px vor dem
   Footer wie das globale Section-Padding, mobil 48/64. Textspalte ~70 Zeichen. */
.legal { padding: var(--space-8) 0 var(--space-10); max-width: 36rem; margin: 0 auto; }
.legal h1 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--text-2xl)); line-height: 1.15; letter-spacing: -0.01em; color: var(--fg-heading); margin: 0 0 var(--space-4); overflow-wrap: break-word; hyphens: auto; }
.legal h2 { font-size: var(--text-lg); line-height: 1.3; color: var(--fg-heading); margin: var(--space-6) 0 var(--space-2); overflow-wrap: break-word; hyphens: auto; }
.legal h1 + h2 { margin-top: 0; }
.legal p, .legal li { color: var(--fg-secondary); line-height: 1.6; margin: 0 0 var(--space-2); }
.legal ul { padding-left: 1.2em; margin: 0 0 var(--space-2); }
.legal a { color: var(--brand); overflow-wrap: anywhere; }
.legal code { font-family: var(--font-mono); font-size: 0.9em; color: var(--fg-primary); }
.legal-note { font-size: var(--text-sm); }
.legal .legal-scope-note { color: var(--fg-primary); border: 1px solid var(--border-control); border-radius: var(--radius-surface); background: var(--bg-muted); padding: var(--space-2); margin: 0 0 var(--space-3); }
@media (max-width: 759px) { .legal { padding: var(--space-6) 0 var(--space-8); } }

/* ---------- Vorschau: Desktop-App-Layout (Seitenleiste) ----------
   Ab 1080px wird die bestehende Kopfleiste (.site-header, gleiches Markup)
   zur festen linken Seitenleiste wie in den Claude-Desktop-Einstellungen:
   Logo oben, Navigation mit Gruppenlabels und Linien-Icons, Sprache und
   Download unten. Der aktive Eintrag (aria-current, sidebar-nav.js) ist eine
   Pille in --surface-2. Darunter (<= 1079px, seit Handy-Pruefung 2026-10-04)
   die schlanke Kopfleiste mit mobilem Menue; die Tablet-Navigationsleiste
   (760-1079px) greift nur noch ohne JS. Seit Teil A tragen auch Vertrauens- und
   Rechtsseiten die .site-nav; nur die Kauf-Bestaetigung (eine Aufgabe:
   Lizenz laden) behaelt die schlanke Kopfleiste. */
@media (min-width: 1080px) {
  body:has(.site-nav) .site-header {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); height: auto;
    background: var(--background); backdrop-filter: none;
    border-bottom: 0; border-right: 1px solid var(--border);
    overflow-y: auto; overscroll-behavior: contain;
  }
  body:has(.site-nav) .header-row {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    height: auto; min-height: 100%; max-width: none; padding: var(--space-3) var(--space-2) var(--space-2); gap: 0;
  }
  body:has(.site-nav) .brand {
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    row-gap: 6px; padding: 4px 10px 0;
  }
  body:has(.site-nav) .brand-logo { height: 22px; }
  body:has(.site-nav) .brand-tagline { font-size: 0.6875rem; color: var(--ink-faint); }

  .site-nav {
    flex-direction: column; gap: 2px; margin-top: var(--space-4);
    font-size: 0.9375rem; white-space: normal; color: var(--text-body);
  }
  .site-nav-group {
    display: block; padding: 0 10px; margin: var(--space-3) 0 6px;
    font-size: 0.8125rem; font-weight: 500; color: var(--ink-faint);
  }
  .site-nav-group:first-child { margin-top: 0; }
  .site-nav a {
    display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px;
    border-radius: var(--radius-surface); font-weight: 500; color: var(--text-body);
    transition: background .15s, color .15s;
  }
  .site-nav-icon { display: block; width: 18px; height: 18px; flex: none; }
  .site-nav a:hover { background: var(--surface-1); color: var(--text); }
  .site-nav a[aria-current="true"] { background: var(--surface-2); color: var(--text); }
  .site-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: var(--radius-surface); }

  body:has(.site-nav) .header-actions {
    margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: var(--space-1);
  }
  body:has(.site-nav) .header-actions .btn { width: 100%; }
  /* Blau bleibt dem einen Haupt-CTA im Inhalt vorbehalten; der Dauer-Download
     in der Leiste ist ein ruhiger Standard-Button (gleiches Ziel #download). */
  body:has(.site-nav) .header-actions .btn-primary {
    background: var(--surface-1); color: var(--text); border-color: var(--border-control);
  }
  body:has(.site-nav) .header-actions .btn-primary:hover { background: var(--surface-2); border-color: var(--border-strong); }
  body:has(.site-nav) .lang-switch-btn { width: 100%; justify-content: flex-start; height: 40px; }
  body:has(.site-nav) .lang-switch-btn .icon-chevron { margin-left: auto; transform: rotate(180deg); }
  body:has(.site-nav) .lang-switch-btn[aria-expanded="true"] .icon-chevron { transform: none; }
  /* Die Sprachliste klappt in der Leiste nach oben auf. */
  body:has(.site-nav) .lang-switch-list { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 0; }

  body:has(.site-nav) main,
  body:has(.site-nav) .site-footer { margin-left: var(--sidebar-w); }
  body:has(.site-nav) .lang-hint { left: calc(var(--sidebar-w) + var(--space-2)); }
  body:has(.site-nav) section[id],
  body:has(.site-nav) main [id] { scroll-margin-top: var(--space-3); }
  body:has(.site-nav) .story-stage { top: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .site-nav a { transition: none; } }

/* ---------- Seitenleiste auf allen Seiten (Startseite, Vertrauen, Rechtstexte) ----------
   Dieselbe .site-nav wie auf der Startseite; auf den Unterseiten zeigen
   "Produkt"/"Los geht's" per /#anker auf die Startseite der Sprache. Dritte
   Gruppe = Footer-Links (Vertrauen, Impressum, Datenschutz), Gruppenlabel =
   aria-label des Footer-<nav>. Der aktuelle Seiteneintrag traegt
   aria-current="page" (statisch im Markup), Darstellung wie die Scroll-Spy-
   Pille. Die Gruppe erscheint nur in der Seitenleiste: in der Tablet-Kopfleiste
   (760-1079px) waeren neun Eintraege zu breit, dort stehen die Links im Footer;
   das mobile Menue fuehrt sie auf den Unterseiten als eigene Gruppe. */
.site-nav a[aria-current="page"] { color: var(--fg-heading); }
@media (max-width: 1079px) { .site-nav .is-legal { display: none; } }
/* 760-859px: die spanischen Labels ("Motor de expedientes") schoben die
   Kopfleiste um 9px ueber den Rand (Startseite schon vorher, jetzt auch
   Unterseiten). Etwas engere Abstaende genuegen. */
@media (min-width: 760px) and (max-width: 859px) {
  .site-nav { gap: 12px; font-size: 0.78rem; }
  .header-row, .header-actions { gap: 8px; }
}
@media (min-width: 1080px) {
  .site-nav a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
}
/* Niedrige Laptop-Fenster (1280x720): neun Eintraege + Sprache/Download
   passen nur mit etwas engeren Gruppenabstaenden ohne Innen-Scrollen. */
@media (min-width: 1080px) and (max-height: 780px) {
  .site-nav { margin-top: var(--space-2); }
  .site-nav-group { margin: var(--space-2) 0 4px; }
  .site-nav a { min-height: 36px; }
}
.mobile-nav-list .is-legal-first { margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--hairline); }
.mobile-nav-list a[aria-current="page"] { background: var(--surface-2); border-color: var(--border-strong); }

/* Vertrauensseiten: das Inhaltsverzeichnis bleibt als kompakte Pillen-Leiste
   im Kopf des Inhalts (auf allen Breiten gleich). Begruendung im Bericht /
   Commit: als Unterliste in der Seitenleiste wuerde die Leiste mit 17 Zeilen
   auf 1440x900 und kleineren Laptops ueberlaufen und Sprache/Download nach
   unten aus dem Bild schieben. */

/* ---------- Marken-Animation am Seitenanfang (.hm, hero-motion.js) ----------
   Plan: research/ANIMATION-PLAN-LANDINGPAGE-2026-10-04.md. Zwei Zeilen
   "Senden"/"Antwort": echter Name (gruen, bleibt lokal) -> Marker -> Ersatzname
   (amber, verlaesst das Geraet) -> ueber die Grenze mit Logo-Mark zum
   KI-Anbieter und zurueck. Grundzustand = statischer Endzustand (auch fuer
   prefers-reduced-motion); die Keyframes blenden nur von unsichtbar dorthin
   ein (fill-mode both). Feste Hoehe, nur opacity/transform: kein Layout-Shift. */
.hero-motion-wrap { padding: var(--space-4) 0 0; }
.hero-motion-wrap + .hero-split { padding-top: var(--space-5); }
.hm {
  --hm-row: 32px;
  --hm-bg: var(--bg-muted);
  margin: 0; height: 140px; box-sizing: border-box; overflow: hidden;
  display: grid; align-content: center;
  padding: 14px 20px; background: var(--hm-bg);
  border: 1px solid var(--border); border-radius: var(--radius-window);
}
.hm-stage {
  display: grid; align-items: center; column-gap: 0; row-gap: 10px;
  grid-template-columns: auto auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto minmax(56px, 1.4fr) auto;
  grid-template-rows: auto var(--hm-row) var(--hm-row);
  font-size: 0.875rem; line-height: 1; white-space: nowrap;
}
.hm-head {
  grid-column: 1 / -1; grid-row: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  font-size: 0.8125rem; font-weight: 500;
}
.hm-local { color: var(--local-fg); }
.hm-tag {
  color: var(--muted); font-size: 0.75rem; padding: 3px 8px;
  border: 1px solid var(--border-control); border-radius: var(--radius-pill);
}
.hm-lbl { grid-column: 1; padding-right: var(--space-2); font-size: 0.8125rem; color: var(--muted); }
.hm-r1 { grid-row: 2; }
.hm-r2 { grid-row: 3; }
.hm-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--hm-row); padding: 0 10px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 550;
}
.hm-real   { color: var(--local-fg);  background: var(--local-bg);  border-color: var(--local-border); }
.hm-mirror { color: var(--mirror-fg); background: var(--mirror-bg); border-color: var(--mirror-border); }
.hm-mark   { color: var(--muted); background: var(--surface-1); border-color: var(--border-control);
             font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; }
.hm-c-real { grid-column: 2; }
.hm-c-c1   { grid-column: 3; }
.hm-c-mk   { grid-column: 4; }
.hm-c-c2   { grid-column: 5; }
.hm-c-mir  { grid-column: 6; }
.hm-c-long { grid-column: 3 / 6; }
.hm-stack { display: grid; }
.hm-stack > .hm-chip { grid-area: 1 / 1; }
.hm-mk-m { display: none; opacity: 0; }

/* Verbindungslinie mit Pfeilspitze; .rev zeigt nach links. */
.hm-conn { position: relative; height: 8px; margin: 0 8px; color: var(--border-strong); }
.hm-ln { position: absolute; left: 0; right: 1px; top: 50%; height: 1px; margin-top: -0.5px; background: currentColor; transform-origin: left center; }
.hm-ah {
  position: absolute; right: 1px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);
}
.hm-conn.rev .hm-ln { left: 1px; right: 0; transform-origin: right center; }
.hm-conn.rev .hm-ah { right: auto; left: 1px; transform: rotate(-135deg); }
.hm-cap {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0 8px; background: var(--hm-bg); color: var(--muted); font-size: 0.75rem;
}

/* Grenze Rechner | KI-Anbieter mit Logo-Mark (Tegmaguard sitzt dazwischen). */
.hm-gate { grid-column: 7; grid-row: 2 / 4; position: relative; align-self: stretch; }
.hm-g-line { position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 1px dashed var(--border-strong); }
.hm-logo {
  /* Neues Zeichen (Kachel mit zwei Ringen), quadratisch: 22 + 2×4 breit, 22 + 2×2 hoch. */
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -13px 0 0 -15px;
  padding: 2px 4px; box-sizing: content-box; background: var(--hm-bg); overflow: visible;
}
.hm-gate .hm-conn { position: absolute; left: 0; right: 0; margin: 0 8px; color: var(--mirror-border); }
.hm-out  { top: calc(var(--hm-row) / 2 - 4px); }
.hm-back { bottom: calc(var(--hm-row) / 2 - 4px); }
.hm-ai {
  grid-column: 8; grid-row: 2 / 4; align-self: stretch;
  display: flex; align-items: center; justify-content: center; padding: 0 16px;
  background: var(--surface-1); border: 1px solid var(--border-control); border-radius: 8px;
  color: var(--text); font-size: 0.8125rem; font-weight: 600;
}
.hm-ai-short { display: none; }

@media (max-width: 759px) {
  .hero-motion-wrap { padding-top: var(--space-3); }
  .hm { --hm-row: 28px; height: 120px; padding: 12px; }
  .hm-stage {
    grid-template-columns: 0 auto minmax(14px, 1fr) 0 0 auto minmax(52px, 1.6fr) auto;
    row-gap: 8px; font-size: 0.75rem;
  }
  .hm-head { font-size: 0.75rem; }
  .hm-tag { font-size: 0.6875rem; padding: 2px 7px; }
  .hm-lbl, .hm-c-mk, .hm-c-c2, .hm-cap { display: none; }
  .hm-chip { padding: 0 7px; border-radius: 6px; }
  .hm-mark { font-size: 0.6875rem; }
  .hm-conn, .hm-gate .hm-conn { margin: 0 5px; }
  .hm-mk-m { display: inline-flex; }
  .hm-ai { padding: 0 8px; }
  .hm-logo { width: 18px; height: 18px; margin: -11px 0 0 -12px; padding: 2px 3px; }
  .hm-ai-long { display: none; }
  .hm-ai-short { display: inline; }
}

/* Sehr schmal (320-359px): Chips und Grenze noch etwas enger. */
@media (max-width: 359px) {
  .hm { padding: 10px 8px; }
  .hm-stage { font-size: 0.6875rem; grid-template-columns: 0 auto minmax(10px, 1fr) 0 0 auto minmax(40px, 1.6fr) auto; }
  .hm-chip { padding: 0 5px; }
  .hm-conn, .hm-gate .hm-conn { margin: 0 3px; }
  .hm-ai { padding: 0 6px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hm-a { animation: hm-in .42s var(--ease-out) var(--d, 0s) both; }
  .hm-ln { animation: hm-draw .45s cubic-bezier(.65, 0, .35, 1) var(--d, 0s) both; }
  .hm-ah { animation: hm-fade .2s linear calc(var(--d, 0s) + .35s) both; }
  .hm-cap.hm-a, .hm-g-line.hm-a, .hm-logo.hm-a { animation-name: hm-fade; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 759px) {
  .hm-mk-m { animation: hm-mk 1.2s linear var(--d, 0s) both; }
  .hm-stack > .hm-mirror { animation-name: hm-fade; animation-delay: 1.85s; }
}
@keyframes hm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hm-mk {
  0% { opacity: 0; transform: translateY(6px); }
  25% { opacity: 1; transform: none; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Mobil-Feinschliff (Handy-Pruefung 2026-10-04) ----------
   Gemessen mit Chromium-Emulation (isMobile, Touch) auf 320-430px, Quer-
   format 667/844 und Tablet 768/820. Nur Groessen/Abstaende, keine Inhalte. */

/* Logo: skaliert proportional statt gestaucht. Vorher hielt die Hoehe fest
   28px, waehrend Flexbox die Breite kuerzte (320px: 130 statt 205px breit,
   768px ES: 31px breit = verzerrter Schriftzug). */
.site-header .brand-logo {
  width: 205px; height: auto; max-width: 100%; aspect-ratio: 1823 / 300;
  flex: 0 1 auto; min-width: 0;
}
@media (min-width: 1080px) {
  body:has(.site-nav) .site-header .brand-logo { width: auto; height: 22px; max-width: none; }
}

/* Kein Doppeltipp-Zoom-Warten auf Bedienelementen. */
a, button, summary, label, select, input, .btn { touch-action: manipulation; }

/* Touch: Hover-Zustaende "kleben" nach dem Antippen. Die sichtbarsten
   (Flaechenwechsel, Skalierung) auf Touch-Geraeten neutralisieren; :active
   und :focus-visible bleiben als Rueckmeldung. */
@media (hover: none) {
  .btn-primary:hover { background: var(--brand-fill); }
  .hero-play:hover .hero-play-circle { transform: none; background: color-mix(in srgb, var(--on-primary) 16%, transparent); }
  .hero-link:hover { text-decoration: none; }
  .hero-link:hover svg { transform: none; }
  .btn-primary:active { background: var(--brand-strong); }
  .mode-tab:active, .billing-toggle-btn:active, .lang-switch-btn:active, .nav-toggle:active { background: var(--surface-2); }
}

/* Tablet-Kopfleiste 760-1079px: FR/ES-Navigation ist breiter als der Platz
   neben Logo und Aktionen. Statt das Logo zu stauchen und den Slogan links
   abzuschneiden (768px FR: "NÇU POUR LA CONFIANCE"), behaelt die Marke eine
   Mindestbreite und die Navigation darf zweizeilig werden. */
@media (min-width: 760px) and (max-width: 1079px) {
  .site-header .brand { width: 205px; min-width: 176px; flex: 0 1 auto; }
  .site-nav {
    flex-wrap: wrap; justify-content: center; align-content: center;
    column-gap: 14px; row-gap: 0; min-width: 0; flex: 0 1 auto;
  }
  .site-nav a { display: inline-flex; align-items: center; min-height: 30px; }
  .lang-switch-btn { min-height: 44px; }
}
@media (max-width: 1079px) {
  .header-actions > .btn-sm { min-height: 44px; }
  .site-header .brand { min-height: 44px; }
}

/* Handy/Tablet (mobiles Menue bis 1079px): Kopfleiste mit 44px-Bedienflaechen. */
@media (max-width: 1079px) {
  .lang-switch-btn { height: 44px; padding: 0 12px; }
  .nav-toggle { width: 44px; height: 44px; }
  .header-actions { gap: 8px; }
  .header-row { gap: 12px; }
  .lang-switch-list a, .lang-switch-list .is-current { display: flex; align-items: center; min-height: 44px; padding: 0 12px; }
  .lang-switch-list { max-width: calc(100vw - 32px); }
  /* Slogan bricht innerhalb der Markenbreite um, statt links ueber den
     Rand zu ragen (zentriertes nowrap-Element breiter als das Logo). */
  .site-header .brand-tagline { white-space: normal; text-align: center; max-width: 100%; }
}
@media (max-width: 479px) {
  /* 16px Seitenrand statt 24px: mehr Zeilenlaenge auf 320-430px. */
  .container { padding: 0 var(--space-2); }
}

/* Abschnitte und Ueberschriften auf dem Handy etwas kompakter: 36px-H2
   liefen auf 375px ueber fuenf Zeilen. */
@media (max-width: 759px) {
  section { padding: var(--space-8) 0; }
  .trust-section { padding: var(--space-6) 0; }
}
@media (max-width: 479px) {
  .section-head h2, .pricing h2, .split h2, .download-card h2 { font-size: 1.75rem; line-height: 1.2; }
  .section-head { margin-bottom: var(--space-5); }
  /* Preis-Karte: 48px Innenabstand liessen auf 320px nur 190px Inhalt. */
  .pricing-card { padding: var(--space-4) var(--space-3); gap: var(--space-4); }
  .billing-toggle-btn { padding: 8px 12px; }
  /* Die vorhandene 479px-Regel fuer .download-card stand VOR der Grundregel
     und verlor deshalb (mobil blieben 48px Innenabstand, 320px: 190px Inhalt). */
  .download-card { padding: var(--space-4) 20px; }
}

/* Fliesstext >= 16px auf dem Handy (vorher 14px in Karten, FAQ, Ablauf). */
@media (max-width: 759px) {
  .faq-body, .step p, .plain-points li, .feature-card p, .engine-card p,
  .sec p, .aud p, .start-step p, .install p, .install-steps, .trust-note,
  .trust-candid, .coverage-sub, .trial-form-note { font-size: var(--text-base); }
}

/* Vergleichstabelle mobil: die Kriteriumsspalte war nowrap und auf 375px
   breiter als der ganze Ausschnitt (nur "Kriterium" sichtbar, keine Werte).
   Jetzt umbrechend, schmal und beim Wischen links angeheftet. */
@media (max-width: 759px) {
  .compare-table thead th:first-child, .compare-table tbody th {
    position: sticky; left: 0; z-index: 1;
    width: 8.5rem; min-width: 8.5rem; max-width: 8.5rem;
    white-space: normal; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 10 4 4;
    background: var(--bg-card); box-shadow: 1px 0 0 var(--border-control);
  }
  .compare-table th, .compare-table td { padding: 12px 14px; }
  table.compare-table { min-width: 640px; }
}

/* Touch-Ziele >= 44px (Trefferflaeche per Padding, Optik weitgehend gleich).
   Nur unter 1080px oder bei grobem Zeiger (Touch), damit die Desktop-
   Ansicht mit Maus unveraendert bleibt. */
@media (max-width: 1079px), (pointer: coarse) {
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-links { column-gap: var(--space-3); row-gap: 0; }
  .founder-more a { display: inline-flex; align-items: center; min-height: 44px; }
  .faq-item { padding: var(--space-1) 0; }
  .faq-item summary { align-items: center; min-height: 44px; padding: 8px 0; }
  .install-summary { min-height: 44px; }
  .trust-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
  .mode-tab { min-height: 44px; }
  .compare-pause { min-height: 44px; padding: 0 16px; }
  .billing-toggle-btn { min-height: 44px; }
  .compare-controls { flex-wrap: wrap; row-gap: 4px; }
  .compare-dots { gap: 0; }
  .compare-dots button {
    width: 44px; height: 44px; padding: 18px; box-sizing: border-box;
    background-clip: content-box; border-radius: 50%;
  }
  /* Die Grundregel setzt "background" als Kurzform und damit clip zurueck. */
  .compare-dots button[aria-selected="true"] { background-clip: content-box; }
  .lang-hint-close { width: 44px; height: 44px; margin: -6px -6px -6px 0; }
  /* Preisregler: 44px hohe Trefferflaeche, Schiene bleibt 4px (Hintergrund). */
  #seat-slider {
    height: 44px; margin: 0 0 var(--space-1);
    background: linear-gradient(var(--surface-2), var(--surface-2)) center / 100% 4px no-repeat;
  }
  #seat-slider::-webkit-slider-thumb { width: 26px; height: 26px; }
  #seat-slider::-moz-range-thumb { width: 22px; height: 22px; }
  /* Testformular: 16px (kein iOS-Fokus-Zoom), 44px hoch. */
  .trial-form-row input { font-size: var(--text-base); min-height: 44px; }
  .trial-form-row button { min-height: 44px; }
}

/* Kennzahlen unter den Hero-Knoepfen: auf schmalen Breiten brachen sie mit
   haengenden Trennstrichen um; dort als 2-Spalten-Raster ohne Striche. */
@media (max-width: 479px) {
  .hero-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--space-2); }
  .hero-specs > div { border-right: 0; margin-right: 0; padding-right: 0; }
  .footer-brand { flex-wrap: wrap; row-gap: 4px; }
  .feature-card { padding: var(--space-3); }
  /* Windows-Ausklapper: Titel, Untertitel und Pfeil standen in drei
     gequetschten Spalten, der Pfeil schrumpfte auf 2px. */
  .install-summary { flex-wrap: wrap; row-gap: 2px; }
  .install-summary .story-summary-text { flex: 1 1 0; min-width: 0; }
  .install-summary .story-summary-meta { order: 3; flex-basis: 100%; }
}
.story-summary-chevron { flex: none; }

/* Testformular mobil: Felder und Knopf in voller Breite. */
@media (max-width: 479px) {
  .trial-form-row input { flex-basis: 100%; max-width: none; }
  .trial-form-row button { width: 100%; white-space: normal; }
}
@media (max-width: 1079px) {
  .coverage-select select { font-size: var(--text-base); }
}

/* Handy quer (kleine Hoehe): Marken-Animation und Badges kompakter, damit
   die H1 im ersten Bildschirm erscheint (667x375 lag sie vorher darunter). */
@media (max-height: 440px) and (orientation: landscape) {
  .hero-motion-wrap { padding-top: 12px; }
  .hero-motion-wrap + .hero-split { padding-top: var(--space-2); }
  .hm { --hm-row: 24px; height: 92px; padding: 8px 12px; }
  .hm-stage { row-gap: 6px; }
  .hm-head { font-size: 0.6875rem; }
  .hm-tag { padding: 1px 6px; font-size: 0.625rem; }
  .hm-chip { border-radius: 6px; }
  .hero-badges { gap: 6px; margin-bottom: var(--space-2); }
  .hero-badge { padding: 3px 10px; font-size: 0.8125rem; }
  .hero-split h1 { font-size: 1.875rem; margin-bottom: var(--space-2); }
  .hero-copy { padding-top: 0; }
}

/* Feste Leisten: Home-Indikator/Notch beruecksichtigen. */
.lang-hint {
  bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  left: calc(var(--space-2) + env(safe-area-inset-left, 0px));
}
/* Ueber der CTA-Leiste per transform statt bottom: ein Sprung von bottom
   zaehlte als Layout-Shift (gemessen 0,026-0,037 beim Scrollen, FR/ES). */
body.has-mobile-cta .lang-hint { bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); transform: translateY(-68px); }
@media (prefers-reduced-motion: no-preference) { .lang-hint { transition: transform .2s var(--ease-out); } }
/* Offenes Menue verdeckt den Sprachhinweis (vorher lag er mit z-index 60
   ueber dem Menue-Panel). */
body.nav-open .lang-hint { display: none; }

/* =====================================================================
   Umbau 2026-10: schlanke Startseite, Unterseiten, ein Vertrauensbaustein.
   Nur neue Bausteine; Farben, Radien und Abstaende kommen aus den Tokens
   oben. Eine Hauptaktion pro Seite (blauer Knopf), alles andere ruhig.
   ===================================================================== */
.blk { padding: var(--space-8) 0; }
@media (max-width: 759px) { .blk { padding: var(--space-6) 0; } }
.blk .section-head h2, .page-intro .section-head h1 { color: var(--fg-heading); }
.page-intro .section-head h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); }
.page-intro { padding-top: var(--space-8); }
.more-row { margin: var(--space-3) 0 0; }
.more-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.more-link:hover { border-bottom-color: var(--brand); }
.more-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.crumbs { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--fg-muted); }
.crumbs a { color: var(--fg-secondary); }
.legal-hint { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--fg-muted); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cta-row-center { justify-content: center; }
.cta-row .btn { white-space: normal; text-align: center; }

/* Hero der Startseite und der Branchenseiten */
.hero-v4 { padding: var(--space-8) 0 var(--space-6); }
.hero-v4 .hero-copy { padding-top: 0; max-width: 780px; }
.hero-v4 h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--fg-heading); margin: 0 0 var(--space-3); }
.page-hero h1 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
.hero-v4 .lede { font-size: var(--text-md); color: var(--fg-secondary); max-width: 62ch; margin: 0 0 var(--space-4); }
.fact-line { list-style: none; display: flex; flex-wrap: wrap; gap: 6px var(--space-3); margin: var(--space-3) 0 0; padding: 0; font-size: var(--text-sm); color: var(--fg-muted); }
.fact-line li::before { content: "\2713"; color: var(--local-fg); margin-right: 6px; }
.hero-v4 .hero-motion-wrap { padding: var(--space-5) 0 0; }
.ai-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-4); }
.ai-strip-label { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); }
.ai-strip-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; }

/* Video-Dialog */
.video-dialog { width: min(960px, 94vw); padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-window); background: #000; color: #fff; overflow: hidden; }
.video-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.video-dialog video { width: 100%; max-height: 80vh; background: #000; }
.video-dialog form { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; }
.video-dialog-close { min-height: 44px; padding: 0 16px; border-radius: var(--radius-control); border: 1px solid var(--border-strong); background: rgba(10, 10, 10, .85); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.video-dialog-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Drei Schritte */
.steps3 { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.steps3 li { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.steps3-num { font-size: var(--text-sm); font-weight: 650; color: var(--brand); }
.steps3 h3 { margin: 0; font-size: var(--text-lg); color: var(--fg-heading); }
.steps3 p { margin: 0; color: var(--fg-secondary); }
.steps3 figure { margin: auto 0 0; padding-top: 6px; }
.steps3 img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; border: 1px solid var(--border); border-radius: var(--radius-surface); background: var(--surface-1); }
@media (max-width: 859px) { .steps3 { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }
.story .story-details { margin: 0 0 var(--space-2); border-top: 1px solid var(--hairline); }
.story { border-top: 0; border-bottom: 0; }
.more-details { margin-top: var(--space-1); }
.more-details .faq-body p { margin-bottom: var(--space-2); }

/* Vorher / Nachher */
.ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.ba-pane { padding: var(--space-3); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-surface); --fg-muted: var(--muted); }
.ba-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.8125rem; font-weight: 650; color: var(--fg-muted); }
.ba-head.local { color: var(--local-fg); }
.ba-head.mirror { color: var(--mirror-fg); }
.ba-text { margin: 0; color: var(--text); line-height: 1.75; overflow-wrap: anywhere; }
.ba-text mark.m-local { color: var(--local-fg); background: var(--local-bg); padding: 1px 5px; border-radius: 4px; }
.ba-text mark.m-mirror { color: var(--mirror-fg); background: var(--mirror-bg); padding: 1px 5px; border-radius: 4px; }
.ba-cap { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--fg-muted); }
@media (max-width: 759px) { .ba { grid-template-columns: minmax(0, 1fr); } }

/* Branchenkarten (verlinkt) */
.for-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); }
.for-card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: var(--space-3); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-surface); text-decoration: none; color: inherit; --fg-muted: var(--muted); }
.for-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.for-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.for-icon { width: 22px; height: 22px; color: var(--brand); }
.for-card h3 { margin: 4px 0 0; font-size: var(--text-md); color: var(--fg-heading); }
.for-card p { margin: 0; font-size: var(--text-sm); color: var(--fg-secondary); }
.for-eg { font-size: 0.8125rem; color: var(--fg-muted); }
.for-go { margin-top: auto; padding-top: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--brand); }

/* Vertrauensbaustein (auf allen Seiten gleich) */
.trust-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.trust-tile { padding: var(--space-3); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-surface); --fg-muted: var(--muted); }
.tile-icon { width: 22px; height: 22px; color: var(--brand); }
.trust-tile h3 { margin: 12px 0 6px; font-size: var(--text-base); color: var(--fg-heading); }
.trust-tile p { margin: 0; font-size: var(--text-sm); color: var(--fg-secondary); }
.trust-limit { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-surface); background: var(--bg-muted); color: var(--fg-secondary); font-size: var(--text-sm); }
.trust-limit strong { color: var(--fg-heading); }
@media (max-width: 1100px) { .trust-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .trust-tiles { grid-template-columns: minmax(0, 1fr); } }
.trust-compare { padding-top: 0; }

/* Tabelle, die mobil zu Karten wird (kein seitliches Wischen) */
.cmp-wrap { border: 1px solid var(--border); border-radius: var(--radius-surface); overflow: hidden; background: var(--surface-1); --fg-muted: var(--muted); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); text-align: left; }
.cmp-table th, .cmp-table td { padding: 12px 14px; vertical-align: top; border-top: 1px solid var(--border); color: var(--fg-secondary); }
.cmp-table thead th { border-top: 0; color: var(--fg-heading); font-weight: 650; background: var(--bg-muted); }
.cmp-table tbody th { color: var(--fg-heading); font-weight: 600; width: 22%; }
.cmp-table .col-us { background: var(--brand-soft); color: var(--text); }
.cmp-table .ok { color: var(--local-fg); font-weight: 600; }
.cmp-table .no { color: var(--mirror-fg); font-weight: 600; }
.cmp-note { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--fg-muted); }
@media (max-width: 759px) {
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; }
  .cmp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .cmp-table tbody th { width: auto; padding: 14px 14px 8px; border-top: 1px solid var(--border); background: var(--bg-muted); }
  .cmp-table tr:first-child th { border-top: 0; }
  .cmp-table td { border-top: 0; padding: 8px 14px; }
  .cmp-table td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 650; color: var(--fg-muted); margin-bottom: 2px; }
  .cmp-table td:last-child { padding-bottom: 14px; }
}

.blk .faq-inner, .page-intro .faq-inner { margin-left: 0; }
/* Beweise, Aufgaben, Hinweise */
.proof-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.proof { padding: var(--space-3); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-surface); --fg-muted: var(--muted); }
.proof h3 { margin: 0 0 6px; font-size: var(--text-md); color: var(--fg-heading); }
.proof p { margin: 0; font-size: var(--text-sm); color: var(--fg-secondary); }
@media (max-width: 859px) { .proof-grid { grid-template-columns: minmax(0, 1fr); } }
.notice { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--mirror-border); background: var(--mirror-bg); border-radius: var(--radius-surface); color: var(--text); font-size: var(--text-sm); }
.task-list { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.task-list li { padding: 14px 0; border-top: 1px solid var(--hairline); color: var(--fg-secondary); }
.task-list li:last-child { border-bottom: 1px solid var(--hairline); }
.task-list strong { color: var(--fg-heading); }
.sub-block { margin-top: var(--space-6); }
.sub-block h3 { margin: 0 0 var(--space-3); font-size: var(--text-lg); color: var(--fg-heading); }
.firmenwissen .split { padding: 0; }
.providers-inline .provider-grid { margin: 0 auto; }

/* Preis und Gruender nebeneinander */
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: stretch; }
.pf-card { padding: var(--space-4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-window); --fg-muted: var(--muted); }
.pf-card h2 { margin: 0 0 var(--space-2); font-size: var(--text-xl); line-height: 1.2; color: var(--fg-heading); }
.pf-card p { margin: 0 0 var(--space-2); color: var(--fg-secondary); }
.pf-card a:not(.more-link) { color: var(--brand); }
.pf-founder { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.pf-founder img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-surface); }
.pf-founder h2 { font-size: var(--text-lg); }
@media (max-width: 859px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { .pf-founder { grid-template-columns: minmax(0, 1fr); } .pf-founder img { width: 96px; height: 96px; } }

/* Abschluss-CTA */
.cta-band { text-align: center; }
.cta-band h2 { margin: 0 0 var(--space-2); font-size: var(--text-2xl); line-height: 1.15; color: var(--fg-heading); }
.cta-band p { margin: 0 auto var(--space-4); max-width: 56ch; color: var(--fg-secondary); font-size: var(--text-md); }

/* Preis- und Download-Seite: Ueberschrift ist jetzt h1 */
.pricing h1 { font-size: var(--text-2xl); line-height: 1.15; margin: 0 auto var(--space-2); color: var(--fg-heading); max-width: 760px; }
.download .section-head h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); color: var(--fg-heading); }
.download .section-head p { color: var(--fg-secondary); font-size: var(--text-md); margin: 0; }
.coverage-wrap .hero-coverage { max-width: 760px; }

/* Mobiles Menue: Gruppenzeilen */
.mobile-nav-group { list-style: none; padding: 14px 4px 2px; font-size: 0.8125rem; font-weight: 600; color: var(--fg-muted); }
.mobile-nav-list .mobile-nav-group:first-child { padding-top: 0; }
.footer-links { flex-wrap: wrap; }