/* ==========================================================================
   style.css — einziges Stylesheet der Produkt-Website.
   Mobile-first. Branding-Werte als CSS-Custom-Properties (siehe :root);
   --accent-color wird zusätzlich zur Laufzeit von site-config.js gesetzt,
   der Wert hier ist der Default/Fallback, falls JS deaktiviert ist.

   Design-Richtung (User-Vorgabe 2026-08-02): dunkelgrün statt Blau, bewusst
   "solides Fachgeschäft" statt generische AI-Startup-Optik — warme
   Papiertöne statt kaltem Weiß/Grau, Serifen-Systemschrift für Headlines,
   keine Gradients/Glassmorphism/Glow, schlichte Linien-Icons statt Emoji.

   Modernisierung (2026-08-12): Demo-Widget im Hero, Auto-Teaser, dezente
   Scroll-Reveals, mobile Sticky-CTA, fluide Typografie/Abstände, Micro-
   Interactions, FAQ-Chevron-Animation, Dark Mode. Durchgängiges Prinzip:
   Progressive Enhancement — jede Bewegung/Animation ist entweder rein
   dekorativ mit sicherem Static-Fallback, oder hinter
   `prefers-reduced-motion`/`@supports` gated, nie Voraussetzung für
   Lesbarkeit oder Bedienbarkeit ohne JS.
   ========================================================================== */

:root {
  --accent-color: #14532D;
  /* Abgeleitete Akzent-Varianten: siehe @supports-Block unten, der sie per
     color-mix() aus --accent-color berechnet, statt eine zweite,
     unabhängig gepflegte Farbquelle zu halten. Die Werte hier sind nur der
     statische Fallback für Browser ohne color-mix()-Unterstützung. */
  --accent-color-dark: #104224;
  --accent-color-light: #DEE4DB;
  /* --accent-on-surface: Akzentfarbe für Text/Icons/Rahmen, die DIREKT auf
     der Seitenfläche sitzen (nicht als gefüllter Button mit weißer
     Schrift). Im Hellmodus identisch mit --accent-color (dort schon >8:1
     Kontrast); im Dunkelmodus unten auf eine hellere Mischung gesetzt,
     weil dunkelgrüner Text auf dunklem Grund sonst unlesbar würde. Gefüllte
     Flächen (Buttons, brand-mark, Pilot-Karte, Demo-Widget) bleiben bei
     --accent-color, weil sie ihre eigene weiße Schrift mitbringen und vom
     Seitenhintergrund unabhängig sind. */
  --accent-on-surface: var(--accent-color);
  --text-color: #2A241E;
  --text-muted: #6B5D4F;
  --bg-color: #FAF8F3;
  --bg-alt: #F2ECDF;
  --border-color: #E1D6C2;
  --success-color: #16a34a;
  --warning-bg: #fffbeb;
  --warning-border: #fcd34d;
  --warning-text: #92400e;
  --radius: 10px;
  --radius-sm: 6px;
  --max-width: 1080px;
  /* Fluide Sektionsabstände statt fester Pixelwerte — skaliert stufenlos
     zwischen Handy und Desktop, eine Stelle für "großzügiger & konsistent". */
  --section-spacing: clamp(48px, 8vw, 96px);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Serifen-Systemschrift für Headlines (Ladenschild-/Manufaktur-Charakter).
     Nur lokal installierte Schriften, keine externen Requests. */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* --accent-color-dark/-light live von --accent-color ableiten, wo
   unterstützt (Baseline seit 2023) — ändert sich die Akzentfarbe (z.B. zur
   Laufzeit durch site-config.js), ziehen Hover-/Tint-Farben automatisch
   mit, ohne zweite hartkodierte Farbquelle. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --accent-color-dark: color-mix(in srgb, var(--accent-color) 80%, black);
    --accent-color-light: color-mix(in srgb, var(--accent-color) 12%, var(--bg-color));
  }
}

/* --- Dark Mode ---
   Warmer Dunkel-Ton (kein kaltes Schwarz), Papier-Variablen invertiert.
   Alle Kontrastpaare gegen WCAG AA geprüft (>=4.5:1 Text, >=3:1 Rahmen):
     Text auf bg-color:            14.9:1   Text auf bg-alt:      13.7:1
     Text-muted auf bg-color:       7.8:1   Text-muted auf bg-alt: 7.1:1
     accent-on-surface auf bg-color:5.4:1   auf bg-alt:            5.0:1
     Rahmen auf bg-color:           3.7:1
   --accent-color selbst bleibt UNVERÄNDERT (Markenidentität, und alle
   Stellen, die es als Button-/Flächenfüllung mit weißer Schrift nutzen,
   sind vom Seitenhintergrund unabhängig). Nur --accent-on-surface wird
   heller gesetzt, weil #14532D direkt als Text/Icon auf dunklem Grund
   sonst kaum lesbar wäre — siehe Kommentar bei --accent-on-surface oben.
   Warnfarben (--warning-*) und og-image/Favicon bleiben in beiden Modi
   unverändert (kein Kontrastproblem, kein Grund für zwei Varianten). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #141C17;
    --bg-alt: #1B241E;
    --text-color: #F2EDE3;
    --text-muted: #B8AC9B;
    --border-color: #6B7863;
    --accent-on-surface: #729881;
  }

  /* Hartkodiertes helles Statusgrün passt im Dunkelmodus nicht zum Rest —
     eigenes dunkles Äquivalent statt eines grellen Pastellflecks. */
  .roadmap-status.status-live {
    background: #16351f;
    color: #a9dcb8;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-color);
  background: var(--bg-color);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent-on-surface);
  outline-offset: 2px;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent-on-surface);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Skip link (a11y) --- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent-color);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* --- Header / Nav --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Solide Papierfarbe statt Glassmorphism-Blur — Ladenschild, kein
     App-Chrome. */
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 8px 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--text-color);
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.main-nav {
  display: none;
}

.main-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  margin-left: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.main-nav a:hover {
  color: var(--text-color);
}

/* Hidden on narrow screens on purpose: brand name + this CTA together would
   not fit next to each other at 375px and flex (nowrap by default) would
   force horizontal scroll. The same CTA already appears in the hero and the
   pilot section, so hiding it in the header below the nav breakpoint loses
   nothing. */
.header-cta {
  display: none;
}

/* Breakpoint bewusst höher als früher (war 800px): sieben Nav-Punkte
   brauchen mehr Platz als sechs. .site-header .container hat zusätzlich
   flex-wrap als Sicherheitsnetz, falls die Zeile trotzdem mal knapp wird —
   dann bricht der Header auf zwei Zeilen um, statt horizontal zu scrollen. */
@media (min-width: 960px) {
  .main-nav {
    display: flex;
    align-items: center;
  }

  .header-cta {
    display: inline-flex;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background-color 180ms ease, filter 180ms ease, border-color 180ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: background-color 180ms ease, filter 180ms ease, border-color 180ms ease, transform 150ms ease;
  }
  .btn:hover {
    transform: translateY(-1px);
  }
  .btn:active {
    transform: translateY(0);
  }
}

.btn-primary {
  background: var(--accent-color);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-color-dark);
}

.btn-secondary {
  background: var(--bg-color);
  color: var(--accent-on-surface);
  border-color: var(--accent-on-surface);
}
.btn-secondary:hover {
  background: var(--accent-color-light);
}

.btn-sm {
  padding: 7px 14px;
  font-size: 0.85rem;
}

/* --- Sections --- */
.section {
  padding: var(--section-spacing) 0;
}

.section-alt {
  background: var(--bg-alt);
}

.section-header {
  max-width: 720px;
  margin: 0 auto clamp(28px, 5vw, 44px);
  text-align: center;
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-on-surface);
  background: var(--accent-color-light);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: 1.25;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
}

h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

p {
  margin: 0 0 1em;
  color: var(--text-muted);
}

.lede {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--text-muted);
}

/* --- Hero --- */
.hero {
  padding: clamp(40px, 8vw, 80px) 0 clamp(32px, 6vw, 56px);
}

.hero .container {
  display: grid;
  gap: 32px;
  /* start statt center: das H1 soll ganz oben im Hero stehen, nicht
     zwischen einem viel höheren Demo-Widget vertikal zentriert "absinken". */
  align-items: start;
}

.hero-copy h1 {
  color: var(--text-color);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

/* Ersetzt die frühere statische SVG-Illustration: hostet jetzt das echte
   interaktive Demo-Widget (#demo-widget, siehe index.html Hero-Markup) —
   "was das Produkt tut" ist ohne Scrollen sichtbar. Auf Mobile steht dieser
   Block dank normaler Grid/DOM-Reihenfolge automatisch UNTER der
   Hero-Copy (kein explizites order nötig, keine Gefahr eines 800px-Widgets
   über dem H1). */
.hero-demo {
  width: 100%;
  justify-self: center;
}

@media (min-width: 900px) {
  .hero .container {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* --- Problem examples --- */
.example-questions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.example-questions li {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.example-questions .q-mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-color-light);
  color: var(--accent-on-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.example-questions strong {
  color: var(--text-color);
}

/* --- Demo widget ---
   Note on the cool-toned literals below (#fff surfaces on demo-shell,
   question chips, product cards, source chip; #94a3b8 typing-indicator
   dots): deliberate, not an oversight of the warm-palette/dark-green pass.
   This block simulates the real product widget (static/widget.js) pixel
   for pixel where it hardcodes those same values — only the accent color
   is a real per-shop branding setting there. Product fidelity here wins
   over the marketing page's own warm-paper aesthetic — and that includes
   Dark Mode: the whole widget subtree locks --bg-color/--bg-alt/
   --text-color/--text-muted/--border-color to their light-mode values on
   .demo-shell below, so it looks identical regardless of the page's color
   scheme, with a clean border framing it against a dark page background. */
.demo-honesty-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  max-width: 640px;
  margin: 0 auto 24px;
}

.demo-honesty-banner svg {
  flex-shrink: 0;
}

.demo-noscript-hint {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 18px;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.demo-shell {
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(42, 36, 30, 0.1);
  /* Bewusst reines Weiß (nicht var(--bg-color)): dieser Block bildet die
     Optik des echten Produkt-Widgets nach (static/widget.js hat ein fest
     weißes Panel, unabhängig von der Akzentfarbe) — Produkttreue geht hier
     vor Marketing-Seiten-Ästhetik. Nur die Akzentfarbe ist eine echte
     Händler-Branding-Einstellung. */
  background: #fff;
  /* Lokale Custom-Property-Overrides: alles innerhalb dieses Blocks bleibt
     bei den aktuellen Hell-Werten, egal was :root im Dark Mode setzt — auch
     davon abgeleitete Variablen wie --accent-color-light (referenziert
     var(--bg-color)) lösen dadurch innerhalb dieses Blocks automatisch
     wieder hell auf, ohne dass sie hier separat wiederholt werden müssten. */
  --bg-color: #FAF8F3;
  --bg-alt: #F2ECDF;
  --text-color: #2A241E;
  --text-muted: #6B5D4F;
  --border-color: #E1D6C2;
}

.demo-header {
  background: var(--accent-color);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.demo-header .demo-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.demo-header-text {
  line-height: 1.25;
}

.demo-header-title {
  font-weight: 700;
  font-size: 0.98rem;
}

.demo-header-sub {
  font-size: 0.78rem;
  opacity: 0.85;
}

.demo-questions {
  padding: 14px 16px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
}

.demo-question-chip {
  border: 1px solid var(--accent-color);
  background: #fff;
  color: var(--accent-color);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 8px;
  max-width: 100%;
  white-space: normal;
  text-align: left;
  transition: background-color 180ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .demo-question-chip {
    transition: background-color 180ms ease, transform 150ms ease;
  }
  .demo-question-chip:hover {
    transform: translateY(-1px);
  }
}

.demo-question-chip:hover {
  background: var(--accent-color-light);
}

.demo-question-chip[disabled] {
  opacity: 0.45;
  cursor: default;
}

.demo-question-chip.is-answered {
  background: var(--accent-color-light);
}

.demo-messages {
  padding: 16px;
  min-height: 160px;
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.5;
  font-size: 0.92rem;
  white-space: pre-wrap;
}

.demo-bubble.user {
  align-self: flex-end;
  background: var(--accent-color);
  color: #fff;
  border-bottom-right-radius: 3px;
}

.demo-bubble.assistant {
  align-self: flex-start;
  background: var(--bg-alt);
  color: var(--text-color);
  border-bottom-left-radius: 3px;
}

.demo-bubble.assistant strong {
  color: var(--text-color);
}

.demo-source-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: #fff;
  border: 1px dashed var(--border-color);
  border-radius: 999px;
  padding: 4px 10px;
  margin-top: -2px;
}

.demo-products {
  display: grid;
  gap: 8px;
  align-self: stretch;
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .demo-products {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.demo-product-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: #fff;
  font-size: 0.82rem;
}

.demo-product-card .p-name {
  font-weight: 700;
  color: var(--text-color);
  display: block;
  margin-bottom: 2px;
}

.demo-product-card .p-price {
  color: var(--accent-color);
  font-weight: 700;
}

.demo-product-card .p-meta {
  color: var(--text-muted);
  display: block;
  margin-top: 3px;
}

.demo-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-radius: 12px;
}

.demo-typing span {
  width: 6px;
  height: 6px;
  background: #94a3b8;
  border-radius: 50%;
  display: inline-block;
  animation: demo-typing-bounce 1.2s infinite ease-in-out;
}
.demo-typing span:nth-child(2) { animation-delay: 0.2s; }
.demo-typing span:nth-child(3) { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .demo-typing span {
    animation: none;
  }
}

@keyframes demo-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

.demo-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-color);
  align-items: center;
}

.demo-input-row input {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text-muted);
}

.demo-input-row button {
  background: #D9CFBC;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: not-allowed;
}

.demo-input-hint {
  padding: 0 16px 14px;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- Steps ("So funktioniert's") --- */
.steps {
  display: grid;
  gap: 20px;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 22px;
  transition: box-shadow 200ms ease;
}

.step-card:hover {
  box-shadow: 0 8px 20px rgba(42, 36, 30, 0.08);
}

@media (prefers-reduced-motion: no-preference) {
  .step-card {
    transition: box-shadow 200ms ease, transform 200ms ease;
  }
  .step-card:hover {
    transform: translateY(-2px);
  }
}

.step-number {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 14px;
}

.integrations-row {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.integration-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--text-color);
}

.storefront-anecdote {
  margin-top: 26px;
  border-left: 3px solid var(--accent-on-surface);
  padding: 6px 0 6px 16px;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-family: var(--font-serif);
  font-style: italic;
}

/* --- Differentiation grid --- */
.diff-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 700px) {
  .diff-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.diff-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: box-shadow 200ms ease;
}

.diff-card:hover {
  box-shadow: 0 8px 20px rgba(42, 36, 30, 0.08);
}

@media (prefers-reduced-motion: no-preference) {
  .diff-card {
    transition: box-shadow 200ms ease, transform 200ms ease;
  }
  .diff-card:hover {
    transform: translateY(-2px);
  }
}

.diff-card .diff-icon {
  color: var(--accent-on-surface);
  margin-bottom: 10px;
}

/* --- Roadmap --- */
.roadmap {
  display: grid;
  gap: 18px;
}

@media (min-width: 760px) {
  .roadmap {
    grid-template-columns: repeat(2, 1fr);
  }
}

.roadmap-card {
  border-radius: var(--radius);
  padding: 22px;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  transition: box-shadow 200ms ease;
}

.roadmap-card:hover {
  box-shadow: 0 8px 20px rgba(42, 36, 30, 0.08);
}

@media (prefers-reduced-motion: no-preference) {
  .roadmap-card {
    transition: box-shadow 200ms ease, transform 200ms ease;
  }
  .roadmap-card:hover {
    transform: translateY(-2px);
  }
}

/* "In Entwicklung"-Hinweisabsatz: war ein inline style="", jetzt hier
   kontextuell adressiert (nur diese Karte hat einen direkten <p>-Kind). */
.roadmap-card > p {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 0.85rem;
}

.roadmap-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.roadmap-status.status-live {
  background: #dcfce7;
  color: #166534;
}

.roadmap-status.status-progress {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

.roadmap-card ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--text-muted);
}

.roadmap-card li {
  margin-bottom: 6px;
}

/* --- Niches --- */
.niche-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 760px) {
  .niche-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.niche-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
  transition: box-shadow 200ms ease;
}

.niche-card:hover {
  box-shadow: 0 8px 20px rgba(42, 36, 30, 0.08);
}

@media (prefers-reduced-motion: no-preference) {
  .niche-card {
    transition: box-shadow 200ms ease, transform 200ms ease;
  }
  .niche-card:hover {
    transform: translateY(-2px);
  }
}

.niche-card.niche-cta {
  background: var(--accent-color-light);
  border-style: dashed;
  border-color: var(--accent-on-surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.mini-dialogue {
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 12px;
  font-size: 0.85rem;
}

.mini-dialogue .mini-q {
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 4px;
}

.mini-dialogue .mini-a {
  color: var(--text-muted);
  margin-bottom: 0;
}

.mini-dialogue + .mini-dialogue {
  margin-top: 8px;
}

/* --- Compliance / DSGVO --- */
.compliance-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.compliance-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.compliance-list .check-icon {
  color: var(--success-color);
  flex-shrink: 0;
  margin-top: 2px;
}

.llm-note {
  margin-top: 20px;
  background: var(--accent-color-light);
  border-radius: var(--radius);
  padding: 18px 20px;
}

/* War ein inline style="margin-bottom: 0" auf dem einzigen <p> hier. */
.llm-note p {
  margin-bottom: 0;
}

/* --- Pilot CTA --- */
.pilot-card {
  /* Flache Fläche statt Gradient — Ladenschild-Plakette, kein
     SaaS-Hero-Card-Verlauf. Bewusst IMMER --accent-color (nicht vom
     Farbschema abhängig) — die Karte ist ein eigenständiges Markenelement,
     kein Seitenhintergrund. */
  background: var(--accent-color);
  color: #fff;
  border-radius: 14px;
  padding: 40px 28px;
  text-align: center;
}

.pilot-card h2 {
  color: #fff;
}

.pilot-card p {
  color: rgba(255, 255, 255, 0.9);
}

/* War ein inline style="" auf dem .eyebrow-Span innerhalb dieser Karte. */
.pilot-card .eyebrow {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.pilot-benefits {
  list-style: none;
  padding: 0;
  margin: 22px 0;
  display: grid;
  gap: 10px;
  text-align: left;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.pilot-benefits li {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.92rem;
}

/* "Wer dahintersteht" — persönliche Notiz statt Marketing-Fläche, daher
   linksbündig statt der zentrierten .pilot-card-Standardausrichtung. */
.pilot-founder {
  margin: 28px auto 0;
  max-width: 560px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  text-align: left;
}

.pilot-founder h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 10px;
}

.pilot-founder-body {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

/* Noch kein <img> im Markup (kein Gründer-Foto vorhanden, kein
   Platzhalter-Avatar eingesetzt) — diese Regel greift erst, sobald eines
   direkt in .pilot-founder-body ergänzt wird, ohne dass dafür CSS
   nachgezogen werden müsste. */
.pilot-founder-body img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.pilot-founder-body p {
  margin: 0;
  flex: 1;
  min-width: 220px;
}

/* Bewusst feste Helltöne (nicht var(--bg-color)/var(--bg-alt)): dieser
   Button soll immer hell gegen die konstant akzentgrüne .pilot-card
   abheben — die Karte selbst ändert sich nie mit dem Farbschema (s.o.),
   also darf ihr kontrastierender Button es auch nicht (sonst würde er im
   Dark Mode zu einem dunklen Button mit dunkelgrüner, unlesbarer Schrift). */
.pilot-card .btn-primary {
  background: #FAF8F3;
  color: var(--accent-color-dark);
}

.pilot-card .btn-primary:hover {
  background: #F2ECDF;
}

/* --- FAQ (native <details>) --- */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.faq-item {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 4px 18px;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  padding: 14px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 150ms ease;
}

.faq-item summary:hover {
  color: var(--accent-on-surface);
}

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

/* Chevron als Maske statt Text-Content ("+"/"–") — Farbe kommt aus
   background-color (also aus --accent-on-surface, reagiert automatisch auf
   Akzentfarben-Änderungen und Dark Mode), die SVG selbst liefert nur die
   Form. Im Stil der übrigen Linien-Icons der Seite. */
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--accent-on-surface);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item summary::after {
    transition: transform 200ms ease;
  }
}

.faq-item[open] summary::after {
  transform: rotate(180deg);
}

.faq-item p {
  padding-bottom: 14px;
  margin: 0;
}

/* Sanftes Einblenden des geöffneten Inhalts, wo unterstützt (aktuelle
   Chromium/Safari-Versionen; @starting-style ist reine Progressive
   Enhancement — ohne Unterstützung klappt <details> ganz normal nativ
   sofort auf, ohne kaputten Zwischenzustand). */
@media (prefers-reduced-motion: no-preference) {
  @supports (transition-behavior: allow-discrete) {
    .faq-item p {
      opacity: 1;
      transition: opacity 260ms ease;
    }
    @starting-style {
      .faq-item[open] p {
        opacity: 0;
      }
    }
  }
}

/* Zentrierter CTA-Button am Ende einer Sektion (z.B. "Websites nach Maß") —
   bewusst kein Farbfeld wie .pilot-card, nur ein normaler Button auf der
   Sektionsfläche. */
.section-cta {
  text-align: center;
  margin-top: 30px;
}

/* --- Scroll-Reveal ---
   Progressive Enhancement: .reveal-hidden existiert nur, wenn
   assets/interactions.js sie zur Laufzeit per JS setzt. Ohne JS taucht die
   Klasse nie im DOM auf — alles ist von Anfang an sofort sichtbar. Die
   `.hero` selbst wird von interactions.js absichtlich NICHT beobachtet,
   damit der erste Bildschirm (inkl. Demo-Widget) ohne Verzögerung zu sehen
   ist. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-hidden {
    opacity: 0;
    transform: translateY(16px);
  }
  .reveal-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 400ms ease, transform 400ms ease;
  }
}

/* --- Mobile Sticky-CTA ---
   Nur auf index.html vorhanden (Rechtsseiten binden das Markup gar nicht
   ein) und nur <800px sichtbar. Standardzustand ist "unsichtbar" (per CSS,
   nicht erst per JS entfernt) — ohne JS gibt es keinen zuverlässigen Weg,
   "am Hero vorbeigescrollt" zu erkennen, also erscheint die Leiste ohne JS
   konsequent nie (die gleichen CTAs existieren im normalen Seitenfluss
   ohnehin schon). */
.sticky-cta {
  display: none;
}

@media (max-width: 799.98px) {
  .sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    transform: translateY(100%);
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-cta {
      transition: transform 220ms ease;
    }
  }

  .sticky-cta.is-visible {
    transform: translateY(0);
  }

  .sticky-cta .btn {
    flex: 1;
    /* .btn setzt white-space:nowrap + hat als Flex-Kind sonst eine
       Mindestbreite = Inhaltsbreite (min-width:auto) — bei zwei Labels
       nebeneinander auf 375px reicht das sonst nicht immer aus und würde
       die Leiste (und damit die Seite) horizontal aufreißen. Erlaubt
       Umbruch auf eine zweite Zeile statt Überlauf. */
    white-space: normal;
    min-width: 0;
    padding: 8px 6px;
    font-size: 0.82rem;
    text-align: center;
  }

  /* Verhindert, dass die fixierte Leiste den Footer-Inhalt verdeckt. */
  body.has-sticky-cta {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- Footer --- */
.site-footer {
  /* Bewusst ein fester Farbwert, nicht var(--text-color): der Footer ist
     als eigenständig dunkles Band gestaltet (wie ein Ladenschild-Kolophon),
     unabhängig vom Farbschema der Seite. Würde er var(--text-color) nutzen,
     würde er sich im Dark Mode (wo --text-color hell wird) unerwünscht in
     ein HELLES Band verkehren. */
  background: #2A241E;
  color: #E4DAC8;
  padding: 40px 0 24px;
  font-size: 0.88rem;
}

.footer-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.site-footer a {
  color: #F1E9D8;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-brand {
  font-family: var(--font-serif);
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

/* War ein inline style="" auf dem Footer-Beschreibungstext. */
.footer-desc {
  color: #B7A88F;
  max-width: 360px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-bottom {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  color: #B7A88F;
}

/* --- Legal pages (impressum / datenschutz) --- */
.legal-page {
  padding: 48px 0 64px;
}

.legal-page .container {
  max-width: 760px;
}

.legal-page h1 {
  margin-bottom: 0.4em;
}

.legal-page h2 {
  font-size: 1.2rem;
  margin-top: 1.6em;
}

.legal-page address {
  font-style: normal;
}

.todo-marker {
  display: inline-block;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.82em;
  font-weight: 700;
}

.back-link {
  display: inline-block;
  margin-top: 24px;
  font-weight: 600;
}