/* TheSeventyKI – oeffentliche Unternehmenswebsite.
 *
 * Eigenstaendiges, kleines Design-System -- bewusst KEINE Kopie und keine
 * gemeinsame Basis mit static/css/app.css der internen SeventyDrive-
 * Haendler-App im Projektroot. Eigene Tokens, eigene Komponenten, eigene
 * Responsive-Strategie. Richtung: Premium B2B SaaS + deutsche Serioesitaet +
 * moderne KI-Technologie -- kein Neon/Cyberpunk, kein Glassmorphism, keine
 * grossen Schatten, keine uebertriebenen Verlaeufe, kein generisches
 * Startup-Template.
 */

:root {
  --color-bg: #f7f6f3;
  --color-surface: #ffffff;
  --color-text: #14161a;
  --color-muted: #5b6472;
  --color-border: #e3e1db;
  --color-accent: #3654e0;
  --color-accent-hover: #2941b8;
  /* Sehr helle Akzentflaeche -- bewusst NUR an zwei gezielten Stellen
     eingesetzt (aktiver Hero-Prozessschritt, Abschluss-CTA-Banner), nicht
     flaechendeckend, damit es eine Akzentflaeche bleibt und keine "AI"-
     Verlaufsoptik entsteht. */
  --color-accent-soft: #eef1fb;
  /* Fehlerzustaende im Kontaktformular -- gedeckter, seriöser Rotton statt
     grellem Warnrot, passend zur ruhigen B2B-Palette. */
  --color-danger: #b3261e;
  --color-danger-soft: #fbeceb;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 22, 26, 0.12);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max-width: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

h1, h2, h3 { line-height: 1.15; font-weight: 700; margin: 0 0 var(--space-4); letter-spacing: -0.02em; }
h1 { font-size: 2.75rem; }
h2 { font-size: 1.9rem; }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding-left: 1.2em; }
img { max-width: 100%; display: block; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* --- Barrierefreiheit: sichtbare Fokus-Zustaende ------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Header / Navigation -------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

/* Wortmarke etwas markanter -- reiner CSS-Marker vor dem Text (::before),
   der eigentliche Textknoten "TheSeventyKI" bleibt unveraendert/ungesplittet. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.brand::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--color-accent);
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }

.primary-nav {
  display: flex;
  gap: var(--space-6);
  margin-right: auto;
}
.primary-nav a {
  position: relative;
  color: var(--color-text);
  font-size: 0.94rem;
  font-weight: 500;
  padding-bottom: 3px;
}
.primary-nav a:hover { color: var(--color-accent); text-decoration: none; }
.primary-nav a[aria-current="page"] { color: var(--color-accent); font-weight: 600; }
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent);
  transition: right 0.15s ease;
}
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { right: 0; }

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

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  cursor: pointer;
}

.mobile-nav { display: none; }

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-accent); color: #ffffff; }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }

/* --- Layout / Sections ------------------------------------------------------ */
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  /* Grosszuegige Desktop-Abstaende (Premium-Anspruch) -- wird in den
     Responsive-Bloecken unten fuer Tablet/Mobile schrittweise verkleinert. */
  padding: var(--space-9) var(--space-5);
}
.section h2 { margin-bottom: var(--space-5); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}
.section-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.section-note { color: var(--color-muted); font-size: 0.9rem; }
.section-lede-muted { color: var(--color-muted); font-size: 1.08rem; max-width: 660px; margin: 0 0 var(--space-6); }

/* Grosse, redaktionelle Statement-Ueberschriften (Warum/Abschluss-CTA) --
   mehr Kontrast zwischen Hauptaussage und Detailtext. */
.section-statement h2 { font-size: 2.3rem; max-width: 780px; }

/* --- Hero: zweispaltig auf Desktop, Prozess-Visual rechts -------------------- */
.hero { background: var(--color-surface); border-bottom: 1px solid var(--color-border); overflow: hidden; }
.hero-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--space-9) var(--space-5); }
.hero-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); align-items: center; }
.hero-copy { max-width: 560px; }
.hero h1 { font-size: 3.4rem; }
.hero-subline { color: var(--color-muted); font-size: 1.15rem; }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.hero-trust { margin: var(--space-4) 0 0; color: var(--color-muted); font-size: 0.88rem; }

/* Abstrakte Prozess-Visualisierung: rein dekorativ (aria-hidden), symbolisiert
   "Neue Anfrage -> KI analysiert -> Prioritaet erkannt -> Naechster Schritt"
   ueber eine schlichte Kartenreihe mit Verbindungslinie -- bewusst KEIN
   Fake-Screenshot, kein PowerPoint-Look. */
.hero-visual { position: relative; }
.flow { list-style: none; margin: 0; padding: 0; }
.flow-step { position: relative; display: flex; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-6); }
.flow-step:last-child { padding-bottom: 0; }
.flow-step::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 24px;
  bottom: -12px;
  width: 1px;
  background: var(--color-border);
}
.flow-step:last-child::before { display: none; }
.flow-node {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--color-border);
  position: relative;
  z-index: 1;
}
.flow-step-active .flow-node { background: var(--color-accent); }
.flow-step-active .flow-node::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  animation: flow-pulse 2.4s ease-out infinite;
}
@keyframes flow-pulse {
  0% { transform: scale(0.65); opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}
.flow-card {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.flow-step-active .flow-card { border-color: var(--color-accent); background: var(--color-accent-soft); }
.flow-title { font-weight: 600; margin: 0 0 3px; font-size: 0.98rem; }
.flow-meta { margin: 0; color: var(--color-muted); font-size: 0.85rem; }
.flow-tag {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
}

/* --- Problem -> KI-Loesung: gepaarte Zeilen statt zwei getrennter Boxlisten -- */
.problem-flow { list-style: none; margin: 0; padding: 0; }
.problem-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}
.problem-pair:first-child { border-top: none; padding-top: 0; }
.pair-kicker {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}
.pair-kicker-accent { color: var(--color-accent); }
.problem-side p, .solution-side p { margin: 0; }
.solution-side p { font-weight: 600; }
.pair-arrow { color: var(--color-accent); font-size: 1.4rem; font-weight: 700; }

/* Produkt- / Voice-Sektionen: dezent abgesetzt */
.section-product, .section-voice {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Produkt-Sektionen (echte SeventyDrive-Screenshots) bekommen etwas mehr
   Breite als der uebrige redaktionelle Inhalt (1280px statt 1120px) --
   Ueberschrift/Fliesstext-Container (.product-intro, .feature-block-copy)
   bleiben unabhaengig davon auf Lesebreite begrenzt, nur die zusaetzliche
   Breite kommt der Screenshot-Spalte zugute. Ueberschreibt .section (spaetere
   Regel, gleiche Spezifitaet) gezielt nur fuer diese Sektionen. */
.section-product { max-width: 1280px; }

.product-intro { max-width: 720px; }
.product-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
.product-by { font-weight: 500; color: var(--color-muted); font-size: 0.85rem; margin-left: var(--space-2); }
.section-lede { font-size: 1.15rem; font-weight: 600; margin-bottom: var(--space-3); }

.product-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-7);
  align-items: start;
  margin-top: var(--space-7);
}

/* SeventyDrive-Feature-Punkte: schlichte Markierung statt Karten-Grid --
   weniger Dashboard-Look, mehr Editorial. */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); }
.feature-list li { position: relative; padding-left: var(--space-5); font-weight: 600; font-size: 0.96rem; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-accent);
}

/* Premium-Browser-/App-Rahmen fuer alle sechs echten SeventyDrive-
   Screenshots -- dezenter Rand, sehr leichter Schatten, kein Fake-Dashboard. */
.product-frame {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.product-frame-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.product-frame-chrome span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}
.product-frame-bar {
  margin-left: var(--space-3);
  flex: 1;
  max-width: 220px;
  height: 6px;
  border-radius: 4px;
  background: var(--color-border);
  opacity: 0.5;
}

/* Echter Produkt-Screenshot im .product-frame.
   WICHTIG: "height: auto" ist hier Pflicht, nicht kosmetisch. Die <img>-Tags
   tragen width/height-Attribute (fuer CLS-freies Laden), die der Browser
   sonst als definite Hoehe uebernimmt -- dadurch wuerde "aspect-ratio"
   ignoriert und das Bild in eine ~1073px hohe, aber auf Spaltenbreite
   gequetschte Box gezwungen (genau der Bug hinter den bisherigen stark
   beschnittenen/zu dominanten Screenshots). Mit height:auto greift
   aspect-ratio wie vorgesehen.
   object-fit: contain statt cover, weil die echten SeventyDrive-Screenshots
   inhaltlich nicht beschnitten werden duerfen -- das feste Seitenverhaeltnis
   entspricht ohnehin fast exakt dem nativen Verhaeltnis der Screenshots,
   contain sorgt zusaetzlich dafuer, dass auch abweichende zukuenftige
   Screenshots nie angeschnitten werden (hoechstens ein minimaler,
   unsichtbarer Rand in Frame-Hintergrundfarbe). */
.product-frame-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.68;
  object-fit: contain;
  background: var(--color-surface);
}

/* Zwei Screenshots (Status & Follow-up, Aktivitaetsverlauf) sind bewusst enge
   Ausschnitte einzelner UI-Karten statt ganzer Dashboard-Seiten -- ihr
   natives Seitenverhaeltnis weicht stark vom festen 1.68-Dashboardformat ab
   (sehr breit-flach bzw. sehr hochkant). Erzwungenes 1.68 wuerde hier entweder
   Leerraum einfuegen oder Inhalt verkleinern muessen; stattdessen bekommt ihr
   <img> die eigene, native Aspect-Ratio (aus den width/height-Attributen). */
.product-frame-media--auto { aspect-ratio: auto; }

/* Aktivitaetsverlauf ist eine lange, hochkante Liste -- ohne Deckelung wuerde
   das Frame auf Spaltenbreite absurd hoch (~950px) und wuerde die Copy daneben
   erschlagen. max-height begrenzt die Darstellung, das Bild bleibt dabei
   unbeschnitten und unverzerrt (object-fit: contain skaliert nur), zentriert
   in seiner Spalte. */
.product-frame-media--tall {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  margin: 0 auto;
}

/* --- Voice-Showcase (Homepage-Teaser -- NICHT das Modal aus base.html) ------ */
.voice-showcase { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-7); align-items: center; }
.voice-status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }

.voice-safety-note {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font-size: 0.9rem;
  max-width: 640px;
}

/* Dezente Waveform-Darstellung -- rein CSS/dekorativ, KEIN Audio, KEIN
   Mikrofonzugriff, KEINE API. Nur eine visuelle Anspielung auf "Sprache". */
.voice-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 180px;
}
.voice-wave span {
  width: 6px;
  border-radius: 3px;
  background: var(--color-accent);
  opacity: 0.55;
  animation: voice-wave-bounce 1.6s ease-in-out infinite;
}
.voice-wave span:nth-child(1) { height: 18px; animation-delay: 0s; }
.voice-wave span:nth-child(2) { height: 34px; animation-delay: 0.1s; }
.voice-wave span:nth-child(3) { height: 52px; animation-delay: 0.2s; }
.voice-wave span:nth-child(4) { height: 68px; animation-delay: 0.3s; }
.voice-wave span:nth-child(5) { height: 48px; animation-delay: 0.4s; }
.voice-wave span:nth-child(6) { height: 32px; animation-delay: 0.5s; }
.voice-wave span:nth-child(7) { height: 18px; animation-delay: 0.6s; }
@keyframes voice-wave-bounce {
  0%, 100% { transform: scaleY(0.6); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 0.9; }
}

/* --- So funktioniert es: horizontale Prozesslinie auf Desktop --------------- */
.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.steps-list::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}
.steps-list li { position: relative; padding-top: var(--space-7); }
.step-index {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: 0.82rem;
  font-weight: 700;
  z-index: 1;
}
.steps-list h3 { font-size: 1.1rem; margin: 0 0 var(--space-2); }
.steps-list .step-body p { margin: 0; color: var(--color-muted); font-size: 0.92rem; }

/* --- Warum TheSeventyKI: redaktionelle Liste statt sechs weisser Balken ----- */
.reasons-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-6);
}
.reasons-grid li { display: flex; gap: var(--space-3); align-items: flex-start; }
.reason-index { flex-shrink: 0; margin-top: 3px; font-weight: 700; color: var(--color-accent); font-size: 0.82rem; letter-spacing: 0.02em; }
.reasons-grid p { margin: 0; }

/* --- FAQ: editorial statt Karten-Akkordeon ---------------------------------- */
.faq-list { border-top: 1px solid var(--color-border); }
.faq-list details { border-bottom: 1px solid var(--color-border); padding: var(--space-5) 0; }
.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  flex-shrink: 0;
  width: 1.3rem;
  text-align: center;
  color: var(--color-accent);
  font-size: 1.35rem;
  font-weight: 400;
  transition: transform 0.15s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list p { margin: var(--space-3) 0 0; color: var(--color-muted); max-width: 680px; }

/* Abschluss-CTA: einzige weitere gezielte Akzentflaeche der Seite */
.section-cta {
  text-align: center;
  background: var(--color-accent-soft);
  border-radius: var(--radius-lg);
}
.section-cta h2 { margin-left: auto; margin-right: auto; }
.section-cta .section-actions { justify-content: center; }

/* Unterseiten-Kopf (Kontakt/Impressum/Datenschutz -- SeventyDrive hat einen
   eigenen Produkt-Hero, siehe .hero-grid weiter oben). */
.page-header { padding-top: var(--space-8); }
.page-subline { color: var(--color-muted); font-size: 1.05rem; max-width: 640px; }

/* --- Rechtsseiten (Impressum/Datenschutz, Phase 7h) --------------------------
   Ruhige, editorielle Struktur statt Produkt-Marketing-Optik: Definitionsliste
   fuer Impressum-Angaben, Abschnittsliste mit Border-Divider (gleiches Prinzip
   wie .problem-pair/.feature-block) fuer Datenschutz-Themen. Bewusst KEINE
   grossen Karten/Schatten. */
.legal-list { margin-top: var(--space-7); }
.legal-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}
.legal-row:first-child { border-top: none; }
.legal-row dt { font-weight: 700; }
.legal-row dd { margin: 0; }
.legal-row dd p { margin: 0 0 var(--space-2); }
.legal-row dd p:last-child { margin-bottom: 0; }

/* Dezenter "noch offen"-Marker -- bewusst neutral (Border-Ton, kein Rot/Gelb),
   das ist kein Fehlerzustand, sondern ein ehrlicher Zwischenstand. */
.legal-pending {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.legal-sections { margin-top: var(--space-7); }
.legal-section { padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.legal-section:first-child { border-top: none; padding-top: 0; }
.legal-section h2 { font-size: 1.2rem; margin-bottom: var(--space-3); }
.legal-section p:not(:last-child) { margin-bottom: var(--space-3); }
.legal-section ul { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.legal-section ul:last-child { margin-bottom: 0; }
.legal-section li { margin-bottom: var(--space-1); }

/* --- Produktseite (SeventyDrive, Phase 7c): grosse abwechselnde Bloecke ----
   Text + Screenshot-Platzhalter, Seite wechselt die Bildseite pro Block --
   wiederverwendet .product-frame/.eyebrow, keine neue Karten-Komponente. */
.feature-block {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-border);
}
.feature-block:first-of-type { border-top: none; padding-top: 0; }
/* Bugfix: CSS-Grid-Auto-Placement platziert Items nach "order", nicht nach
   DOM-Reihenfolge -- reine order-Vertauschung (Copy=2, Frame=1) hat die
   Bildspalte dadurch bisher in die SCHMALE 0.85fr-Spur gezwungen statt in
   die breite 1.15fr-Spur (Screenshot wurde bei jedem "reverse"-Block kleiner
   dargestellt als bei den nicht gespiegelten Bloecken). Fix: bei reverse wird
   zusaetzlich die Spaltenaufteilung selbst gespiegelt, sodass die Spalte, in
   die das Frame (order:1) faellt, weiterhin die breite ist. */
.feature-block-reverse { grid-template-columns: 1.2fr 0.8fr; }
.feature-block-reverse .feature-block-copy { order: 2; }
.feature-block-reverse .product-frame { order: 1; }
.feature-block-copy .eyebrow { margin-bottom: var(--space-2); }
.feature-block-copy h3 { font-size: 1.4rem; margin-bottom: var(--space-3); }
.feature-block-copy p:not(.eyebrow) { color: var(--color-muted); margin-bottom: 0; }

/* Feature-Screenshots deutlich lesbarer als in der ersten Fassung: die
   Bildspalte bekommt bewusst mehr fr-Anteil als die Textspalte (statt 1fr/1fr),
   das Frame fuellt die Spalte (~520-600px je nach Breakpoint) statt auf eine
   feste Cap-Breite geklemmt zu sein. Hero (.hero-grid) bleibt mit 1.2fr
   dennoch die groesste Screenshot-Flaeche der Seite. */
.feature-block .product-frame { max-width: 720px; }

/* Kompakte 5-Schritte-Prozesslinie (Workflow) -- gleiches Grundprinzip wie
   .steps-list (Linie + nummerierte Punkte), aber schlanker: kurze Labels
   ohne grosse Card-Flaechen, damit 5 statt 3 Schritte ruhig nebeneinander
   passen. */
.workflow-line {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}
.workflow-line::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}
.workflow-line li { position: relative; padding-top: var(--space-7); text-align: center; }
.workflow-index {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  z-index: 1;
}
.workflow-line p { margin: 0; font-size: 0.88rem; color: var(--color-muted); }

/* Kategorien-Chips (Verkaeufer-Arbeitsliste) -- wiederverwendet .flow-tag. */
.tag-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --- Screenshot-Zoom-Trigger (SeventyDrive-Seite) ---------------------------
   Der Button umschliesst nur das bereits vorhandene <img> -- kein zweiter
   Bild-Request, keine Layout-Verschiebung. cursor:zoom-in ist der primaere
   Hinweis; das kleine, rein CSS-gezeichnete Lupen-Icon (kein Icon-Font, kein
   SVG-Asset) erscheint zusaetzlich nur bei echtem Hover ODER Tastatur-Fokus.
   Auf Touch-Geraeten (kein echtes hover) bleibt die Flaeche komplett frei von
   jedem Overlay -- dort ist der Screenshot selbst der einzige Hinweis, ein
   staendig sichtbarer Hinweis-Chip waere dort nur stoerende Flaeche. */
.product-frame-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
  text-align: left;
}
.product-frame-zoom .product-frame-media { pointer-events: none; }
.zoom-hint {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  width: 30px;
  height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.zoom-hint::before {
  content: "";
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--color-text);
  border-radius: 50%;
}
.zoom-hint::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 1.5px;
  background: var(--color-text);
  transform: rotate(45deg);
  bottom: 10px;
  right: 9px;
}
.product-frame-zoom:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}
.product-frame-zoom:focus-visible .zoom-hint { display: flex; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .zoom-hint { display: flex; }
  .product-frame-zoom:hover .zoom-hint { opacity: 1; }
}

/* --- Screenshot-Lightbox (SeventyDrive-Seite) -------------------------------
   Gleiches Grundprinzip wie .voice-overlay (Bugfix-Regel gegen [hidden]
   ebenfalls noetig): dunkler, dezenter Backdrop, ein Panel mit Schliessen-
   Button, kein Fake-Rahmen um das Bild -- das Bild selbst steht im
   Vordergrund. Escape/Backdrop-Klick/Schliessen-Button werden in site.js
   verdrahtet; body.scroll-locked verhindert Body-Scroll waehrend geoeffnet. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 26, 0.78);
}
.lightbox-dialog {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 90vh;
  display: flex;
}
.lightbox-image {
  display: block;
  max-width: min(92vw, 1400px);
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}
.lightbox-close {
  position: absolute;
  top: -44px;
  right: -8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(20, 22, 26, 0.72);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(20, 22, 26, 0.9); }
.lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

body.scroll-locked { overflow: hidden; }

/* --- SeventyDrive-Seite: finaler Polish-Pass --------------------------------
   Alle Regeln hier sind ueber body.page-seventydrive (siehe base.html)
   bewusst auf die Produktseite beschraenkt -- Startseite/Kontakt/Rechtsseiten
   nutzen .section und .hero-inner unveraendert weiter. */

/* Hero-Screenshot etwas praesenter: nur auf dieser Seite bekommt der Hero
   dieselbe verbreiterte 1280px-Buehne wie die Funktionen-/Telefon-KI-/
   Arbeitsliste-Sektionen (.section-product) -- Hero-Copy bleibt durch ihr
   eigenes .hero-copy{max-width:560px} unberuehrt, nur die Bildspalte
   (1.2fr) waechst mit. */
@media (min-width: 1025px) {
  .page-seventydrive .hero-inner { max-width: 1280px; }

  /* Vertikaler Rhythmus: mit sieben aufeinanderfolgenden Sektionen summierte
     sich die volle .section-Innenabstand (space-9, 96px oben+unten) zu
     durchgaengig 192px reinem Leerraum zwischen jedem Abschnitt -- auf
     dieser vergleichsweise langen Produktseite wirkte das streckenweise
     eindeutig zu weit auseinandergezogen. Reduziert auf space-8 (64px, der
     bereits sitieweit als Tablet-Wert etabliert ist, siehe @media
     max-width:1024px unten) statt einen neuen Abstandswert zu erfinden --
     192px werden so zu 128px, weiterhin grosszuegig, nicht eng. */
  .page-seventydrive .section { padding-top: var(--space-8); padding-bottom: var(--space-8); }
}

/* Aktivitaetsverlauf-Screenshot (Kunden-/Anrufhistorie): das hochkante Bild
   ist bei max-height:520px nur noch ~320px breit, die Karte (Rahmen +
   Chrome-Leiste) fuellte bisher aber die volle, breite Grid-Spalte
   (~700px) -- dadurch wirkte der schmale Screenshot verloren in einer viel
   zu grossen Flaeche. Die Karte selbst bekommt jetzt eine eigene, zum Bild
   passende Breite und bleibt zentriert -- das Originalbild wird dabei
   weder beschnitten noch skaliert, nur die umgebende Karte schrumpft auf
   eine dem Inhalt angemessene Groesse. */
.feature-block .product-frame.product-frame--narrow,
.feature-block-reverse .product-frame.product-frame--narrow {
  max-width: 360px;
  margin: 0 auto;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); margin-top: var(--space-8); }
.site-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-brand-group { display: flex; flex-direction: column; gap: 4px; }
.footer-brand { font-weight: 700; }
.footer-email { color: var(--color-muted); font-size: 0.82rem; }
.footer-email:hover { color: var(--color-accent); }
.footer-nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer-nav a { color: var(--color-muted); font-size: 0.9rem; }
.footer-nav a:hover { color: var(--color-accent); }

/* --- Voice-Agent-Panel (Modal aus base.html, reiner Frontend-Mock) ----------
   UNVERAENDERT gegenueber dem Bugfix -- Schliessen ueber X/Escape/Backdrop
   MUSS weiterhin funktionieren, siehe die zwei Regeln unten. */
.voice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 26, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  z-index: 50;
}
/* Bugfix (siehe vorherige Session): die Autoren-Regel .voice-overlay{display:flex}
   oben schlaegt sonst die UA-Stylesheet-Regel [hidden]{display:none} (Autoren-
   Herkunft gewinnt immer gegen User-Agent-Herkunft, unabhaengig von
   Spezifitaet) -- ohne diese explizite Override-Regel hat das per site.js
   getoggelte hidden-Attribut keine sichtbare Wirkung und das Panel liesse
   sich weder per X noch per Escape noch per Klick ausserhalb schliessen. */
.voice-overlay[hidden] { display: none; }
.voice-panel {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 480px;
  width: 100%;
  padding: var(--space-6);
}
.voice-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
  padding: var(--space-2);
}
.voice-close:hover { color: var(--color-text); }
.voice-privacy-note { color: var(--color-muted); font-size: 0.92rem; }
.voice-status { font-weight: 600; }

/* --- Kontaktformular (Phase 7g: 2-Spalten-Komposition) ----------------------
   Links Kontext + zwei Einstiegskarten, rechts ein dezentes Formular-Panel --
   wiederverwendet das gleiche Karten-/Panel-Prinzip wie .flow-card und
   .product-frame (Border + sehr leichter Schatten), kein neues UI-Framework. */
.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-6);
}
.contact-intro .page-subline { margin-bottom: 0; }

.contact-paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.contact-path {
  display: block;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-path:hover { border-color: var(--color-accent); text-decoration: none; }
.contact-path:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.contact-path-active { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.contact-path-title { display: block; font-weight: 700; margin-bottom: 2px; }
.contact-path-meta { display: block; color: var(--color-muted); font-size: 0.88rem; }

.contact-direct-email {
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: 0.88rem;
}
.contact-direct-email a { color: var(--color-text); font-weight: 600; }

/* Das eine Panel, das sowohl Formular als auch (nach Absenden) den ehrlichen
   Hinweis traegt -- Border/Schatten/Radius/Padding liegen bewusst NUR hier,
   damit keine Box-in-Box-Optik entsteht. */
.contact-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
  padding: var(--space-6);
}

.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }

/* Honeypot-Feld (Bot-Schutz, siehe kontakt.html): bewusst NICHT display:none
   oder visibility:hidden -- manche Bots ueberspringen genau diese beiden
   Techniken gezielt. Stattdessen ausserhalb des sichtbaren Viewports
   positioniert, zusaetzlich per aria-hidden vor Screenreadern verborgen und
   per tabindex="-1" aus der Tab-Reihenfolge entfernt, damit kein Mensch
   (auch nicht per Tastatur/AT) das Feld je zu Gesicht bekommt. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label { font-weight: 600; font-size: 0.92rem; }
.form-required { color: var(--color-muted); font-weight: 700; }
.form-optional { font-weight: 500; color: var(--color-muted); font-size: 0.85rem; }
.form-legend { color: var(--color-muted); font-size: 0.82rem; margin: calc(-1 * var(--space-2)) 0 0; }

.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 0.96rem;
  padding: 11px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 100px; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}
.form-error { color: var(--color-danger); font-size: 0.85rem; margin: 0; }
.form-error-summary {
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}
.form-privacy-note { color: var(--color-muted); font-size: 0.86rem; margin: 0; }

/* Ehrlicher Hinweis statt Fake-Thank-you -- es gibt (Stand Phase 7f) keine
   Mail-/DB-/CRM-Anbindung, die Anfrage wird nirgends gespeichert. Bewusst
   NICHT im Erfolgsgruen gehalten, um keinen echten Versand zu suggerieren.
   Lebt im selben .contact-panel wie das Formular, daher hier keine eigene
   Border/Padding mehr (sonst Box-in-Box). */
.form-notice-title { font-weight: 700; font-size: 1.1rem; margin: 0 0 var(--space-3); }
.form-notice p:not(.form-notice-title) { color: var(--color-muted); }
.form-notice .btn { margin-top: var(--space-2); }

/* --- Responsive ------------------------------------------------------------ */

/* Header/Navigation brauchen einen eigenen, breiteren Umschaltpunkt als der
   generelle Tablet-Breakpoint (1024px) weiter unten: Wortmarke + 4 Nav-Links
   + zwei Header-Buttons passen als Flex-Zeile erst ab ca. 1060px verlaesslich
   in einer Zeile -- darunter wrappen "Mit KI sprechen"/"Demo anfragen" auf
   zwei Zeilen (ab ~900px zusaetzlich echter horizontaler Overflow/Clipping,
   empirisch mit einem Diagnose-Script gegen .site-header-inner.scrollWidth
   vs. .clientWidth ueber mehrere Breiten verifiziert). 1080px liegt bewusst
   mit Sicherheitsabstand oberhalb der gemessenen sauberen Schwelle (1060px),
   damit Desktop bei keiner Breite je wieder umbricht. Unterhalb davon
   uebernimmt die bestehende Mobile-/Hamburger-Navigation unveraendert. */
@media (max-width: 1080px) {
  .primary-nav, .header-actions { display: none; }

  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-top: 1px solid var(--color-border);
  }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav a { color: var(--color-text); }
  .mobile-nav-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
}

@media (max-width: 1024px) {
  .section, .hero-inner { padding-top: var(--space-8); padding-bottom: var(--space-8); }

  .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-copy { max-width: none; }

  .problem-pair { grid-template-columns: 1fr; gap: var(--space-2); text-align: left; }
  .pair-arrow { transform: rotate(90deg); }

  .product-layout { grid-template-columns: 1fr; }
  .product-frame { order: -1; }

  /* Auf Tablet/Mobile wirken volle Spaltenbreite-Frames zu dominant im
     einspaltigen Layout -- gecappt und zentriert statt edge-to-edge, damit
     der ruhige, editorielle Eindruck erhalten bleibt. Groessenhierarchie
     (Hero groesser als Feature) bleibt ueber die Cap-Werte erhalten. */
  .hero-grid .product-frame,
  .product-layout .product-frame { max-width: 560px; margin: 0 auto; }

  .voice-showcase { grid-template-columns: 1fr; }
  .voice-wave { order: -1; }

  .steps-list { grid-template-columns: 1fr; gap: var(--space-6); }
  .steps-list::before { display: none; }
  .steps-list li { padding-top: 0; padding-left: var(--space-7); }
  .steps-list li::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: -24px;
    width: 1px;
    background: var(--color-border);
  }
  .steps-list li:last-child::before { display: none; }
  .step-index { top: 0; left: 0; }

  .reasons-grid { grid-template-columns: 1fr 1fr; }

  /* Produktseite (SeventyDrive): immer Text vor Frame, unabhaengig von
     .feature-block-reverse -- das generische ".product-frame{order:-1}"
     oben (fuer die Startseiten-Produktbox gedacht) wird hier gezielt
     wieder auf DOM-Reihenfolge zurueckgesetzt (hoehere Spezifitaet). */
  .feature-block { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6) 0; }
  .feature-block .feature-block-copy,
  .feature-block .product-frame { order: 0; }
  .feature-block .product-frame,
  .feature-block-reverse .product-frame { max-width: 480px; justify-self: stretch; margin: 0 auto; }

  .workflow-line { grid-template-columns: 1fr; gap: var(--space-6); }
  .workflow-line::before { display: none; }
  .workflow-line li { padding-top: 0; padding-left: var(--space-7); text-align: left; }
  .workflow-line .workflow-index { top: 0; left: 0; transform: none; }
  .workflow-line li::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: -24px;
    width: 1px;
    background: var(--color-border);
  }
  .workflow-line li:last-child::before { display: none; }

  /* Kontakt: Tablet/Mobile bekommen die einspaltige Reihenfolge aus dem DOM
     geschenkt (Kontext/Anliegen zuerst, dann Formular-Panel) -- keine
     Umsortierung noetig, nur die Spalten aufloesen. */
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (max-width: 720px) {
  .section, .hero-inner { padding-top: var(--space-7); padding-bottom: var(--space-7); }

  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.5rem; }
  .hero h1 { font-size: 2.3rem; }
  .section-statement h2 { font-size: 1.7rem; }

  .hero-actions, .section-actions { flex-direction: column; align-items: stretch; }
  .site-footer-inner { flex-direction: column; align-items: flex-start; }

  .feature-list { grid-template-columns: 1fr; }
  .reasons-grid { grid-template-columns: 1fr; }
  .section-cta { padding: var(--space-7) var(--space-5); }

  /* Impressum/Datenschutz: Label ueber Wert statt 240px-Spalte, die auf
     Phone-Breiten zu wenig Platz fuer den Wert liesse. */
  .legal-row { grid-template-columns: 1fr; gap: var(--space-1); }

  /* Kontaktformular: grosse Touch-Flaechen, Button ueber volle Breite --
     Labels bleiben immer sichtbar (kein Placeholder-als-Label). Ein-Spalten-
     Reihenfolge (.contact-paths, .form-row) kommt schon aus dem Default. */
  .form-row { grid-template-columns: 1fr; }
  .contact-form .btn { width: 100%; }
  .contact-panel { padding: var(--space-5); }
  .form-field input,
  .form-field select,
  .form-field textarea { padding: 13px var(--space-4); font-size: 1rem; }

  /* Lightbox: Schliessen-Button auf Phone-Breiten innerhalb des Padding
     bleiben lassen statt ueber den Viewport-Rand hinaus zu ragen. */
  .lightbox { padding: var(--space-4); }
  .lightbox-close { top: -40px; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}