/* =========================================================
   onlineki.ch — Landing Page Styles
   Schweizer Ästhetik mit warmem Akzent
   ========================================================= */

/* Lokal gehostete Schriften — keine externe Anfrage an Google */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Primär */
  --color-navy: #1B3A5C;
  --color-navy-dark: #122840;
  --color-navy-light: #2A5080;

  /* Hintergründe — leicht wärmer */
  --color-white: #FFFFFF;
  --color-offwhite: #F8F6F2;
  --color-cream: #F2EFE9;
  --color-light-blue: #EDF2F7;

  /* Text — alle ≥ 4.5:1 Kontrast auf Weiss / Offwhite */
  --color-text-primary: #1A1A1A;   /* ~17:1 */
  --color-text-secondary: #4A5568; /* ~8.5:1 */
  --color-text-muted: #5C6878;     /* ~6.0:1 — für kleine Hilfetexte */
  --color-text-dim: #6B7280;       /* ~5.7:1 — für strikethrough/dimmed */

  /* CTA (Grün bleibt — Handlungsfarbe) */
  --color-cta: #2E7D5B;
  --color-cta-hover: #256B4D;
  --color-cta-light: #E8F5EE;

  /* Warmer Akzent — sparsam einsetzen */
  --color-accent: #E15A3C;
  --color-accent-hover: #C94927;
  --color-accent-light: #FDEEE8;
  --color-accent-bg: #FBF3F0;

  /* Borders */
  --color-border: #E5E1D9;
  --color-border-strong: #C9C3B6;
  --color-border-soft: #EFECE5;

  /* Font Stack */
  --font-heading: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Grössen Mobile */
  --text-hero: 1.625rem;
  --text-hero-2: 4.5rem;
  --text-h1: 1.875rem;
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-tiny: 0.8125rem;

  /* Grössen Desktop — "Ihre Firma?" deutlich grösser als "Empfiehlt ChatGPT" */
  --text-hero-lg: 2.75rem;
  --text-hero-2-lg: 7.5rem;
  --text-h1-lg: 2.5rem;
  --text-h2-lg: 1.75rem;
  --text-body-lg: 1.125rem;

  /* Zeilenhöhe */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* Gewichte */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Abstände */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --space-6xl: 10rem;

  --section-padding-mobile: var(--space-3xl) var(--space-lg);
  --section-padding-desktop: 7.5rem var(--space-2xl);
  --container-max: 1120px;
  --container-narrow: 720px;
  --container-padding: var(--space-lg);

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-hover: 0 12px 32px rgba(27, 58, 92, 0.10);

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-full: 9999px;

  /* Borders */
  --border-default: 1px solid var(--color-border);
  --border-soft: 1px solid var(--color-border-soft);
  --border-strong: 1px solid var(--color-border-strong);

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   Reset & Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Transform-Overflow der [data-animate]-Sektionen darf die Scrollhöhe
   nicht vergrößern — sonst springt die Seite am Ende der Animation
   beim letzten Element 20 px nach oben (Scroll-Clamping). */
main { overflow: clip; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  color: var(--color-navy);
  margin: 0 0 var(--space-md);
}

p { margin: 0 0 var(--space-md); }

a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-navy-dark); }

/* =========================================================
   Layout
   ========================================================= */
.section {
  padding: var(--section-padding-mobile);
  position: relative;
}
.section--alt { background: var(--color-offwhite); }

/* Dunkle Sektionen — Rhythmus hell-dunkel-hell-dunkel */
.section--dark {
  background: var(--color-navy-dark);
  color: rgba(255,255,255,0.85);
}
.section--dark .section-title { color: #FFFFFF; }
.section--dark .section-intro,
.section--dark .chat-caption { color: rgba(255,255,255,0.78); }
.section--dark .section-eyebrow { color: var(--color-accent); }

.section--charcoal {
  background: #1F2937;
  color: rgba(255,255,255,0.85);
}
.section--charcoal .section-title {
  color: #FFFFFF;
}
@media (min-width: 1024px) {
  .section--charcoal .section-title { font-size: 2rem; line-height: 1.15; }
}
.section--charcoal .section-intro { color: rgba(255,255,255,0.7); }
.section--charcoal .section-eyebrow { color: var(--color-accent); }
.section--charcoal .branchen-more {
  color: rgba(255,255,255,0.7);
  font-style: italic;
}
.section--charcoal .branchen-closing {
  color: #FFFFFF;
  font-size: 1.375rem;
  line-height: 1.4;
  padding-left: var(--space-xl);
  border-left: 4px solid var(--color-accent);
  margin-top: var(--space-xl);
  max-width: 760px;
}
@media (min-width: 1024px) {
  .section--charcoal .branchen-closing { font-size: 1.75rem; }
}

/* Standard-Trennlinie weglassen, wenn eine dunkle Sektion angrenzt */
.section + .section--dark::before,
.section + .section--charcoal::before,
.section--dark + .section::before,
.section--charcoal + .section::before { display: none; }

/* Feine horizontale Trennlinie zwischen Sektionen — dünner Orange-Akzent */
.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  opacity: 0.7;
}
/* Auf dunklen Sektionen: heller Akzent, leicht reduziert */
.section--dark + .section::before,
.section--charcoal + .section::before,
.section + .section--dark::before,
.section + .section--charcoal::before { display: none; }
.section--no-divider::before { display: none !important; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }
.container--narrow { max-width: var(--container-narrow); }

@media (min-width: 1024px) {
  .section { padding: var(--section-padding-desktop); }
  .section + .section::before { width: 120px; }
}

/* =========================================================
   Header — Sticky mit verstärktem Schatten beim Scrollen
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(229, 225, 217, 0);
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 8px 24px rgba(18, 40, 64, 0.12);
  border-bottom-color: rgba(229, 225, 217, 0.7);
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-md) var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.site-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  line-height: 1.1;
}
.site-logo {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.25rem;
  color: var(--color-navy);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-logo span { color: var(--color-accent); }
.site-tagline {
  font-family: var(--font-heading);
  font-weight: var(--weight-regular, 400);
  font-size: 0.75rem;
  color: var(--color-navy);
  opacity: 0.6;
  letter-spacing: 0.01em;
}

/* Header-Button: initial dezent Outline (Accent), beim Scrollen Orange voll */
.site-header .btn-primary {
  padding: 10px 18px;
  min-height: 44px;
  font-size: var(--text-small);
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  font-weight: var(--weight-bold);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
              transform 0.2s var(--ease), box-shadow 0.2s ease;
  animation: none !important;
}
.site-header .btn-primary:hover,
.site-header .btn-primary:focus-visible {
  background: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
}
.site-header.is-scrolled .btn-primary {
  background: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
  box-shadow: 0 6px 14px rgba(225, 90, 60, 0.30);
}
.site-header.is-scrolled .btn-primary:hover {
  background: var(--color-accent-hover);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn-primary {
  background: var(--color-cta);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  padding: 14px 32px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s ease;
  min-height: 48px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--color-cta-hover);
  color: #FFFFFF;
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(46, 125, 91, 0.25);
}
.btn-primary:active { transform: scale(0.99); }

/* Sanfter Puls alle 3 Sekunden — nur für die grossen Form-CTAs */
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 125, 91, 0.40); }
  20%  { box-shadow: 0 0 0 14px rgba(46, 125, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 125, 91, 0); }
}
.hero .form-card button[type="submit"],
.final-cta .form-card button[type="submit"] {
  animation: ctaPulse 3s ease-out infinite;
}
.hero .form-card button[type="submit"]:hover,
.final-cta .form-card button[type="submit"]:hover {
  animation: none;
}

.btn-secondary {
  background: transparent;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  padding: 12px 30px;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  min-height: 48px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  line-height: 1.2;
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--color-navy);
  color: #FFFFFF;
  transform: scale(1.02);
}

.btn-block { display: block; width: 100%; }

/* =========================================================
   Section Title
   ========================================================= */
.section-eyebrow {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}
.section-title {
  font-size: var(--text-h1);
  font-weight: var(--weight-extrabold);
  color: var(--color-navy);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.02em;
}

/* Typografie-Hierarchie zwischen Sektionen
   Hero bleibt am grössten.
   FOMO + Final-CTA = zweitgrösst.
   Standard-Sektionen = ~2rem.
   FAQ + Über mich = etwas kleiner. */
@media (min-width: 1024px) {
  .section-title { font-size: 2rem; }
  .final-cta .section-title { font-size: 2.5rem; }
  [aria-labelledby="faq-headline"] .section-title,
  [aria-labelledby="about-headline"] .section-title { font-size: 1.75rem; }
}
.section-intro {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 640px;
}
.section-header { margin-bottom: var(--space-2xl); }
.section-header--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-header--center .section-intro { margin-left: auto; margin-right: auto; }

@media (min-width: 1024px) {
  .section-title { font-size: var(--text-h1-lg); }
  .section-intro { font-size: var(--text-body-lg); }
  .section-header { margin-bottom: var(--space-3xl); }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  padding: 3rem var(--container-padding) var(--space-4xl);
  position: relative;
  overflow-x: clip;
  overflow-y: hidden;
  isolation: isolate;
}
/* Sehr dezentes Raster im Hintergrund (opacity ~0.04) — langsamer Drift */
.hero::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(27, 58, 92, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 58, 92, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 100%);
  pointer-events: none;
  animation: heroGridDrift 40s linear infinite;
}
@keyframes heroGridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 56px 56px; }
}
@media (min-width: 1024px) {
  .hero { padding: var(--space-5xl) var(--container-padding) var(--space-6xl); }
  .hero::before { background-size: 64px 64px; }
}
.hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
  }
}

.hero__headline {
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  color: var(--color-navy);
  margin: 0 0 var(--space-lg);
  letter-spacing: -0.025em;
  line-height: var(--leading-tight);
}
.hero__headline-1 {
  display: block;
  font-size: var(--text-hero);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: -0.015em;
  margin-bottom: 0.1em;
}
.hero__headline-2 {
  display: block;
  font-size: clamp(3.5rem, 17vw, var(--text-hero-2-lg));
  font-weight: var(--weight-black);
  color: var(--color-navy);
  letter-spacing: -0.045em;
  line-height: 0.92;
}
/* Fragezeichen inline, Teil der Headline, in Orange */
.hero__accent {
  color: var(--color-accent);
  font-weight: var(--weight-black);
}
@media (min-width: 1024px) {
  .hero__headline-1 { font-size: var(--text-hero-lg); }
}

.hero__sub {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-lg);
  max-width: 540px;
}
.hero__meta {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
.hero__meta strong { color: var(--color-text-primary); font-weight: var(--weight-semibold); }

/* KI-Systeme-Liste mit Icons — alle 5 in einer Zeile, 32px */
.hero__systems {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}
.hero__systems li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__systems img {
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  object-fit: contain;
}
.hero__systems span {
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}


/* Datengrundlage — eine einzige dezente Zeile mit Wortmarken */
.source-line { background: transparent; }
.source-line__row {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-md) var(--container-padding) var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px var(--space-lg);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}
.source-line__label {
  font-size: var(--text-tiny);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  font-weight: var(--weight-regular);
}
.source-line__sep {
  color: var(--color-border-strong);
  opacity: 0.6;
}
/* Answer Block für KI-Crawler — fast unsichtbar */
.source-line__about {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--container-padding) var(--space-md);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(91, 100, 120, 0.55);
  text-align: center;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}
.source-line__about strong {
  color: inherit;
  font-weight: var(--weight-regular);
}
/* Pseudo-Logos: Graustufen + typografische Differenzierung
   (Anlehnung an die Original-Wortmarken) */
.source-logo {
  font-family: var(--font-heading);
  filter: grayscale(100%);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.source-logo:hover { opacity: 0.85; }
.source-logo span {
  font-size: 1.0625rem;
  color: #6B7280;
  letter-spacing: -0.005em;
}
.source-logo--srf span        { font-weight: 800; letter-spacing: 0.06em; }
.source-logo--comparis span   { font-weight: 800; letter-spacing: -0.02em; font-size: 1.125rem; }
.source-logo--hslu span       { font-weight: 600; font-style: italic; }
.source-logo--raiffeisen span { font-weight: 700; letter-spacing: 0.02em; font-size: 1.0625rem; }
.source-logo--semrush span    { font-weight: 800; letter-spacing: -0.015em; }

a.source-logo { text-decoration: none; }
a.source-logo span { transition: color 0.3s ease; }
a.source-logo:hover { opacity: 1; filter: none; }
.source-line a.source-logo--srf:hover { filter: none !important; }
.source-line a.source-logo--srf:hover span { color: #d12830 !important; }
a.source-logo--comparis:hover span   { color: #2DAC5C; }
a.source-logo--hslu:hover span       { color: #0057A8; }
a.source-logo--raiffeisen:hover span { color: #E30613; }
a.source-logo--semrush:hover span    { color: #C190FF; }
a.source-logo:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

/* Schlanke Hero-Footnote — dezenter Answer Block für KI-Crawler */
.hero-footnote {
  background: transparent;
}
.hero-footnote__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-padding) var(--space-xl);
  text-align: center;
}
.hero-footnote__about {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #8B95A3;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}
.hero-footnote__about strong {
  color: #8B95A3;
  font-weight: var(--weight-regular);
}

/* =========================================================
   Form — leichter warmer Tint, randlos, weicher Schatten.
   Hero und Final-CTA identisch gestylt.
   ========================================================= */
.form-card {
  background: #F9F8F6;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.hero .form-card,
.final-cta .form-card {
  background: #F9F8F6;
}
.form-card__title {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-xs);
  color: var(--color-navy);
}
.form-card__sub {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-lg);
}
.form-error {
  margin: 0 0 var(--space-lg);
  padding: 10px 14px;
  font-size: var(--text-small);
  color: var(--color-accent-hover);
  background: var(--color-accent-light);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

/* Honeypot: für Nutzer unsichtbar, von Bots aber befüllt.
   Off-Screen-Positioning statt display:none, da manche Bots
   display:none-Felder gezielt überspringen. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-field { margin-bottom: var(--space-md); }
.form-field label {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}
.form-field input {
  width: 100%;
  padding: 12px 0;
  font-size: var(--text-body);
  font-family: inherit;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #D1D5DB;
  border-radius: 0;
  transition: border-color 0.15s ease;
  min-height: 48px;
}
.form-field input::placeholder {
  color: rgba(91, 100, 120, 0.6);
}
.form-field input:focus {
  outline: none;
  border-bottom-color: var(--color-navy);
  box-shadow: none;
}
.form-fineprint {
  font-size: var(--text-tiny);
  color: var(--color-text-muted);
  margin: var(--space-md) 0 0;
  line-height: var(--leading-normal);
}
/* Trust-Zeile — dezent, Trennpunkte wie bei den Hero-Badges */
.form-trust {
  font-size: var(--text-tiny);
  color: var(--color-text-muted);
  margin: var(--space-sm) 0 0;
  line-height: var(--leading-normal);
  letter-spacing: 0.01em;
}

/* Submit-Button im Formular: 52px hoch, weicheres Radius, sanfter Lift */
.form-card .btn-primary {
  min-height: 52px;
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.2s var(--ease), box-shadow 0.25s ease;
}
.form-card .btn-primary:hover,
.form-card .btn-primary:focus-visible {
  background: #3A9670;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(46, 125, 91, 0.22);
}
.form-card .btn-primary:active {
  transform: translateY(0);
}

/* =========================================================
   Schock-Stage — Phone mittig, 4 KI-Icons schweben nah ums Phone
   ========================================================= */
.schock-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin: 0 auto;
}
.schock-orbits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}
.schock-icon {
  width: 50px;
  height: 50px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.schock-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
/* OpenAI Logo ist nur schwarz — auf dunklem Kreis unsichtbar.
   Per CSS invertieren = weiss. */
.schock-icon img[src*="OpenAI"] {
  filter: invert(1) brightness(1.4);
}
/* Desktop: zwei schmale Säulen direkt links/rechts vom Phone,
   Icons spreizen sich über die Phone-Höhe (umrahmen es). */
@media (min-width: 900px) {
  .schock-stage {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 48px;
    min-height: 580px;
  }
  .schock-orbits {
    flex-direction: column;
    height: 580px;
    justify-content: space-around;
    gap: 0;
  }
  /* Horizontaler Versatz — Icons nicht auf gleicher Linie */
  .schock-orbits--left  .schock-icon:nth-child(1) { transform: translateX(6px); }
  .schock-orbits--left  .schock-icon:nth-child(2) { transform: translateX(-2px); }
  .schock-orbits--right .schock-icon:nth-child(1) { transform: translateX(-4px); }
  .schock-orbits--right .schock-icon:nth-child(2) { transform: translateX(6px); }

  /* Sanftes Schweben — pro Icon zeitversetzt, leicht ums Phone */
  .schock-icon {
    animation: schockFloat 4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.5s);
  }
}

@keyframes schockFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

/* Mobile: Phone oben, alle 5 Icons in einer einzigen Reihe darunter.
   ::after-Pseudo erzwingt einen Zeilenumbruch nach dem Phone, sodass die
   max-width:320px des Phones keine Icons mehr in die gleiche Reihe lässt. */
@media (max-width: 899px) {
  .schock-stage {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    row-gap: var(--space-lg);
  }
  .chat-phone { order: 0; }
  .schock-stage::after {
    content: "";
    flex: 1 0 100%;
    height: 0;
    order: 1;
  }
  /* Wrapper-ULs verschwinden — alle 5 Icons werden direkte Flex-Children der Stage */
  .schock-orbits { display: contents; }
  .schock-icon {
    order: 2;
    width: 44px;
    height: 44px;
    padding: 9px;
    transform: none !important;
    animation: none !important;
  }
  .schock-icon img { width: 24px; height: 24px; }
}

/* Reduced motion: kein Schweben */
@media (prefers-reduced-motion: reduce) {
  .schock-icon { animation: none !important; }
}

/* =========================================================
   Chat Mockup — stilisiertes Smartphone im Dark Mode
   Fixe Höhe, Dynamic-Island-Notch, Glow.
   ========================================================= */
.chat-phone {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 580px;
  margin: 0 auto;
  background: #1A1A2E;
  border-radius: 40px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 80px rgba(225, 90, 60, 0.08),
    0 32px 72px rgba(0,0,0,0.45),
    0 12px 24px rgba(0,0,0,0.28),
    inset 0 0 0 1.5px rgba(255,255,255,0.06);
}

/* Dynamic-Island-Notch — breitere Pille */
.chat-phone__notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 26px;
  background: #050510;
  border-radius: 14px;
  z-index: 2;
}

.chat-phone__statusbar {
  position: relative;
  flex-shrink: 0;
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 22px;
  color: rgba(255,255,255,0.7);
  font-family: -apple-system, BlinkMacSystemFont, var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
  z-index: 1;
}
.chat-phone__time {
  position: relative;
  z-index: 1;
}
.chat-phone__battery {
  display: inline-flex;
  width: 26px;
  height: 12px;
  color: rgba(255,255,255,0.7);
}
.chat-phone__battery svg { width: 100%; height: 100%; display: block; }

/* App-Titelleiste — wie ein Messenger-Header, mit Gemini-Icon */
.chat-phone__appbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.005em;
}
.chat-phone__appbar img {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

/* Body — dunkler Chat-Screen, fixe Höhe via flex: 1 + overflow hidden */
.chat-phone__body {
  flex: 1 1 auto;
  min-height: 0;
  background: #0F172A;
  border-radius: 28px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.chat-phone__body .chat-msg__role { display: none; }

.chat-msg {
  display: flex;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.chat-msg.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.chat-msg__text {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  padding: 9px 14px;
  border-radius: 8px;
  max-width: 78%;
  display: inline-block;
  word-wrap: break-word;
  position: relative;
}

/* User-Bubble — rechts, satter Messenger-Blau, Tail rechts */
.chat-msg--user { justify-content: flex-end; }
.chat-msg--user .chat-msg__text {
  background: #1E6FD9;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
.chat-msg--user .chat-msg__text::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 0 8px;
  border-color: transparent transparent transparent #1E6FD9;
}

/* AI-Bubble — links, dunkelgrau für Dark Mode, helle Schrift */
.chat-msg--ai { justify-content: flex-start; }
.chat-msg--ai .chat-msg__text {
  background: #2A2A3E;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0,0,0,0.30);
}
.chat-msg--ai .chat-msg__text::before {
  content: "";
  position: absolute;
  left: -5px;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 7px 0;
  border-color: transparent #2A2A3E transparent transparent;
}

/* Blinkender Cursor am Ende der KI-Antwort */
.chat-msg--ai .chat-msg__text::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: rgba(255, 255, 255, 0.85);
  margin-left: 2px;
  vertical-align: text-bottom;
  opacity: 0;
}
.chat-msg--ai.is-visible .chat-msg__text::after {
  opacity: 1;
  animation: chatCursor 1.1s steps(1) infinite;
}

/* Timestamp zwischen Nachrichten — sehr dezent */
.chat-time {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: var(--weight-regular);
  letter-spacing: 0.04em;
  margin: 4px 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.chat-time.is-visible { opacity: 0.85; transform: translateY(0); }
@keyframes chatCursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Warn-Zeile — nüchterne Feststellung mit kleinem roten Punkt */
.chat-warn {
  margin-top: var(--space-md);
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(225, 90, 60, 0.9);
  font-weight: var(--weight-regular);
  font-size: var(--text-small);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.chat-warn.is-visible { opacity: 1; transform: translateY(0); }
.chat-warn__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #E15A3C;
  border-radius: 50%;
  flex-shrink: 0;
}
.chat-warn__text { flex: 1; }

.chat-caption {
  text-align: center;
  max-width: 640px;
  margin: var(--space-xl) auto 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}

/* Stats-Sektion — Schlüssel-Sektion: viel Luft + dezenter Gradient */
.stats-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FC 100%);
}
@media (min-width: 1024px) {
  .stats-section { padding-top: 9rem; padding-bottom: 9rem; }
}
/* Standard-Trenner über/unter Stats-Sektion ausblenden (Gradient genügt als Wechsel) */
.section + .stats-section::before,
.stats-section + .section::before { display: none; }

/* Sektions-Abstände variieren — natürlicherer Rhythmus */
@media (min-width: 1024px) {
  [aria-labelledby="pricing-headline"] { padding-top: 120px; }
  [aria-labelledby="faq-headline"]     { padding-top: 64px; }
}

/* =========================================================
   Stats — asymmetrisch: 76% riesig, 3 kleine als Liste
   ========================================================= */
.stats-asym {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}
@media (min-width: 900px) {
  .stats-asym {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
  }
}

.stats-asym__big {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 18vw, 10rem);
  font-weight: var(--weight-black);
  color: var(--color-accent);
  line-height: 0.92;
  letter-spacing: -0.06em;
  margin: 0 0 var(--space-md);
}
.stats-asym__big-label {
  font-size: 1.375rem;
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  margin: 0 0 var(--space-xs);
  max-width: 22ch;
  letter-spacing: -0.02em;
}
@media (min-width: 1024px) {
  .stats-asym__big-label { font-size: 1.625rem; }
}
.stats-asym__big-source {
  font-size: var(--text-tiny);
  color: var(--color-text-muted);
  margin: 0;
}

.stats-asym__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.stats-asym__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: center;
  padding: 0;
  border: none;
}
.stats-asym__num {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: var(--weight-black);
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.03em;
  min-width: 120px;
}
@media (min-width: 1024px) {
  .stats-asym__num { font-size: 2.75rem; min-width: 150px; }
}
.stats-asym__text {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.stats-asym__text em {
  display: block;
  font-style: normal;
  font-size: var(--text-tiny);
  color: var(--color-text-muted);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* SRF-Zitat: dezente eigene Zeile über den Bullet-Points, gleicher Stil wie die Quellenangaben.
   Selektor mit erhöhter Spezifität, um das Grid von `.stats-asym__list li` zu überschreiben. */
.stats-asym__list li.stats-asym__quote {
  display: block;
  padding-bottom: 1.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(27, 58, 92, 0.12);
}
.stats-asym__quote-text {
  font-style: italic;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.stats-asym__quote-src {
  display: block;
  font-style: normal;
  font-size: var(--text-tiny);
  color: var(--color-text-muted);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* Count-up Animation: nur unsichtbar wenn JS aktiv ist */
.js-anim .count-up { opacity: 0; transition: opacity 0.6s var(--ease); }
.js-anim .count-up.is-visible { opacity: 1; }

/* =========================================================
   Zitate — jetzt in die Stats-Sektion integriert
   ========================================================= */
.stats-quotes {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  max-width: var(--container-narrow);
}
.stats-quotes__label {
  font-size: var(--text-tiny);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
}
.zitate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.zitat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-bottom: var(--space-md);
  border-bottom: 1px dashed rgba(27, 58, 92, 0.10);
}
.zitat:last-child { border-bottom: none; padding-bottom: 0; }
.zitat__text {
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
  font-style: italic;
}
.zitat__text::before {
  content: "„";
  color: var(--color-accent);
  font-weight: 700;
  font-style: normal;
  margin-right: 2px;
}
.zitat__source {
  font-size: var(--text-tiny);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* =========================================================
   Vorher/Nachher — horizontaler Balken mit Schieber
   Links rot ("Unsichtbar"), rechts grün ("Empfohlen").
   ========================================================= */
.comparison-section { background: transparent; }
.comparison-title {
  text-align: left;
  font-size: var(--text-h1);
  color: var(--color-navy);
  margin: 0 0 var(--space-2xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
}
@media (min-width: 1024px) {
  .comparison-title { font-size: 2rem; }
}

/* Vorher/Nachher — Frage gross, zwei Antworten als reiner Text */
.vn-question {
  max-width: 800px;
  margin: var(--space-xl) auto var(--space-2xl);
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-semibold);
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--color-navy);
  letter-spacing: -0.015em;
}
@media (min-width: 768px) {
  .vn-question { font-size: 1.875rem; }
}
@media (min-width: 1024px) {
  .vn-question { font-size: 2.25rem; }
}

.vn-answers {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 720px) {
  .vn-answers {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}
.vn-answer { padding: 0; }
.vn-answer__text {
  margin: 0 0 var(--space-md);
  font-size: var(--text-body-lg);
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.vn-answer__text strong {
  color: var(--color-navy);
  font-weight: var(--weight-bold);
}
.vn-answer--bad .vn-answer__text strong {
  color: #B91C1C;
}
.vn-answer--good .vn-answer__text strong {
  color: var(--color-cta-hover);
}
.vn-answer__verdict {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .vn-answer__verdict { font-size: 1.625rem; }
}
.vn-answer--bad  .vn-answer__verdict { color: #B91C1C; }
.vn-answer--good .vn-answer__verdict { color: var(--color-cta-hover); }

/* =========================================================
   Branchen — Einheitliche Galerie auf Charcoal-Sektion
   Layout: Treuhand-Karte gross links + Stack (Arzt + Handwerk)
   rechts, alle nach Content-Höhe. Darunter drei gleichgrosse.
   ========================================================= */
.branchen-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: var(--space-xl);
}
.branchen-grid__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 720px) {
  .branchen-grid__row--2 { grid-template-columns: repeat(2, 1fr); }
  .branchen-grid__row--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile: alle 7 Karten in einem horizontalen Swipe-Karussell */
@media (max-width: 719px) {
  .branchen-grid {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 16px;
    /* Damit der Karussell-Anschnitt bis zum Section-Rand reicht */
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    scrollbar-width: none;
  }
  .branchen-grid::-webkit-scrollbar { display: none; }
  .branchen-grid__row {
    display: contents;
  }
  .branche-card {
    flex: 0 0 85vw;
    scroll-snap-align: start;
  }
}

/* Swipe-Hinweis — nur auf Mobile sichtbar, dezent */
.branchen-swipe { display: none; }
@media (max-width: 719px) {
  .branchen-swipe {
    display: block;
    margin: 4px 0 0;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0.5;
    letter-spacing: 0.02em;
  }
}

/* Einheitliche Karte — helle Karte mit Chat-Charakter auf Navy-Sektion */
.branche-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  /* Initial state für Fade-In-Animation */
  opacity: 0;
  transform: translateY(20px);
  position: relative;
}
.branche-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.branche-card.is-visible:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20);
}

/* Branchen-Icon — Orange auf heller Karte */
.branche-icon {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  opacity: 1;
  flex-shrink: 0;
  pointer-events: none;
}
.branche-icon svg { width: 100%; height: 100%; display: block; }

/* KI-Badge oben rechts in der Karte (Icon + Name) — Navy auf hell */
.branche-card { position: relative; }
.branche-ai {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.8;
  pointer-events: none;
}
.branche-ai img {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}
.branche-ai__name {
  font-size: 12px;
  color: var(--color-navy);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
}

.branche-card__label {
  font-size: var(--text-tiny);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-navy);
}

/* Branche-Chat — echte Bubbles wie in einem Messenger */
.branche-chat {
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.branche-chat__role { display: none; }

.branche-chat__msg {
  display: flex;
}
.branche-chat__msg--user { justify-content: flex-end; }
.branche-chat__msg--ai   { justify-content: flex-start; }

.branche-chat__msg--user .branche-chat__text {
  background: var(--color-navy);
  color: #FFFFFF;
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  font-weight: var(--weight-regular);
  font-size: 0.9375rem;
  line-height: 1.4;
  max-width: 80%;
}

.branche-chat__msg--ai .branche-chat__text {
  background: #F0F2F5;
  color: var(--color-text-primary);
  padding: 10px 14px;
  border-radius: 18px 18px 18px 4px;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  line-height: 1.55;
  max-width: 85%;
  min-height: 1em;
  position: relative;
}

/* Cursor in Branche-Karten entfernt — Typing-Effekt allein reicht */

/* Alle Karten gleich gross, einheitliche kompakte Bubble-Grössen */
.branche-card {
  padding: var(--space-lg);
  gap: var(--space-md);
}
.branche-card .branche-chat { gap: 10px; }
.branche-card .branche-chat__msg--user .branche-chat__text {
  font-size: 0.9375rem;
  padding: 9px 13px;
  line-height: 1.4;
}
.branche-card .branche-chat__msg--ai .branche-chat__text {
  font-size: 0.875rem;
  padding: 9px 13px;
  line-height: 1.5;
}

.branchen-more {
  margin: var(--space-2xl) 0 0;
  max-width: 720px;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  font-style: italic;
}
.branchen-closing {
  text-align: left;
  margin: var(--space-lg) 0 0;
  max-width: 720px;
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  padding-left: var(--space-lg);
  border-left: 3px solid var(--color-accent);
}

/* =========================================================
   Steps — Timeline mit nummerierten Kreisen und einer
   durchgehenden Verbindungslinie zwischen den Schritten.
   ========================================================= */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin: var(--space-2xl) 0 var(--space-3xl);
  list-style: none;
  padding: 0;
}
.steps li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--color-navy);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.25rem;
  color: var(--color-navy);
  margin: 0 0 var(--space-md);
  background: var(--color-white);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.step__title {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-sm);
  color: var(--color-navy);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.015em;
}
.step__body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin: 0;
}

@media (min-width: 768px) {
  .steps {
    flex-direction: row;
    gap: 0;
    position: relative;
  }
  .steps li {
    flex: 1;
    align-items: center;
    text-align: center;
    padding: 0 var(--space-md);
    position: relative;
  }
  /* Durchgehende Linie von Kreis-1-Mitte (1/6) bis Kreis-3-Mitte (5/6) */
  .steps::before {
    content: "";
    position: absolute;
    top: 23px;
    left: calc(100% / 6);
    right: calc(100% / 6);
    height: 1px;
    background: var(--color-border-strong);
    z-index: 0;
  }
}

/* KI-System-Icons in Step 2 — zentriert auf allen Breakpoints */
.step__icons {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
.step__icons li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px;
}
.step__icons img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.steps-cta { text-align: center; margin-top: var(--space-2xl); }

/* Report-Preview entfernt — Steps-Sektion zeigt nur 3 Schritte + CTA */

/* =========================================================
   Vergleich — Kontrast-Zeilen statt Tabelle/Spalten
   Links SEO durchgestrichen, Pfeil orange, rechts KI fett navy.
   ========================================================= */
.compare-rows {
  max-width: 800px;
  margin: var(--space-2xl) auto 0;
}
.compare-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.compare-row:last-child { border-bottom: none; }

.compare-row__seo {
  flex: 1;
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.35);
  text-decoration-thickness: 1px;
  opacity: 0.35;
  text-align: right;
  font-size: var(--text-body);
  line-height: 1.4;
}
.compare-row__arrow {
  color: var(--color-accent);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  line-height: 1;
}
.compare-row__ki {
  flex: 1;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  text-align: left;
  font-size: var(--text-body);
  line-height: 1.4;
}

/* Mobile: enger Pfeil, Body-Schrift bei 1rem (Mindest-Lesbarkeit) */
@media (max-width: 559px) {
  .compare-row { gap: var(--space-sm); padding: 16px 0; }
  .compare-row__seo,
  .compare-row__ki { font-size: 1rem; line-height: 1.4; }
  .compare-row__arrow { font-size: 1rem; }
}

.compare-closing {
  margin: var(--space-3xl) 0 0;
  max-width: 720px;
  font-size: var(--text-body-lg);
  color: var(--color-navy);
  font-weight: var(--weight-semibold);
  padding-left: var(--space-lg);
  border-left: 3px solid var(--color-accent);
}

/* Ergänzungs-Hinweis: bewusst keine Box, nur Fliesstext */
.compare-complement {
  margin: var(--space-xl) 0 0;
  max-width: 760px;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}
.compare-complement strong {
  color: var(--color-navy);
  font-weight: var(--weight-semibold);
}

/* =========================================================
   Pricing — visuelle Hierarchie:
   Gratis schmaler, Audit Standard, Monitoring breiter + nach
   oben versetzt + grösserer Schatten = primärer CTA.
   ========================================================= */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  justify-items: center;
}
@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: minmax(260px, 320px) minmax(320px, 400px);
    justify-content: center;
    align-items: start;
    gap: var(--space-2xl);
  }
}
.pricing-card {
  width: 100%;
  padding: var(--space-xl);
  background: var(--color-white);
  border: var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-border-strong);
}
.pricing-card--featured {
  border: 2px solid var(--color-navy);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  padding: calc(var(--space-xl) + 8px);
}
@media (min-width: 768px) {
  .pricing-card--featured {
    transform: translateY(-16px);
    z-index: 1;
  }
  .pricing-card--featured:hover {
    transform: translateY(-20px);
  }
}
.pricing-card--featured:hover {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
}
/* Prominenterer Monitoring-Button (primärer CTA) */
.pricing-card--featured .btn-primary {
  padding: 16px 28px;
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  min-height: 52px;
  border-radius: 8px;
  letter-spacing: 0.015em;
  box-shadow: 0 8px 18px rgba(46, 125, 91, 0.28);
}
.pricing-card--featured .btn-primary:hover {
  background: #3A9670;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(46, 125, 91, 0.35);
}
.pricing-badge {
  position: absolute;
  top: -14px;
  left: var(--space-lg);
  background: var(--color-accent);
  color: #FFF;
  font-size: var(--text-tiny);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 10px rgba(225, 90, 60, 0.25);
}
.pricing-card__name {
  font-size: var(--text-h3);
  color: var(--color-navy);
  margin: 0 0 var(--space-xs);
}
.pricing-card__price {
  font-family: var(--font-heading);
  font-size: 2.125rem;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
  line-height: 1;
  letter-spacing: -0.02em;
}
.pricing-card__price-suffix {
  font-size: 1rem;
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}
.pricing-card__price-note {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}
.pricing-card__list {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  flex: 1;
}
.pricing-card__list li {
  padding: var(--space-sm) 0;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  padding-left: 22px;
  position: relative;
  line-height: var(--leading-normal);
}
/* Orange Punkte statt grüne Häkchen — anti AI-Template */
.pricing-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
}

/* CTA-Block im 490er-Tier: Gratis-Check-Hinweis + dezenter Sekundärlink */
.cta-note {
  font-size: var(--text-tiny);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: var(--space-md) 0 0;
  text-align: center;
}
.cta-secondary {
  display: block;
  margin-top: var(--space-md);
  text-align: center;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.cta-secondary:hover,
.cta-secondary:focus-visible {
  color: var(--color-navy);
  border-bottom-color: var(--color-border-strong);
}

/* =========================================================
   Urgency-Zeile — Statement in Navy mit weisser Schrift
   ========================================================= */
.urgency-strip {
  background: var(--color-navy);
  border: none;
  color: #FFFFFF;
}
.urgency-strip .container {
  padding-top: var(--space-3xl);
  padding-bottom: 6rem;
  text-align: center;
}
.urgency-strip__text {
  margin: 0 auto;
  max-width: 880px;
  font-size: 1.5rem;
  line-height: 1.35;
  color: #FFFFFF;
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .urgency-strip .container {
    padding-top: 5rem;
    padding-bottom: 7rem;
  }
  .urgency-strip__text { font-size: 2rem; }
}
@media (min-width: 1024px) {
  .urgency-strip .container {
    padding-top: 6rem;
    padding-bottom: 8.5rem;
  }
  .urgency-strip__text { font-size: 2.5rem; line-height: 1.2; }
}

/* Pricing-Note unter dem Grid — lesbar, ohne zu dominieren */
.pricing-note {
  text-align: center;
  margin: var(--space-2xl) auto 0;
  font-size: 1.1rem;
  color: var(--color-navy);
  max-width: 620px;
  font-weight: 500;
  line-height: 1.5;
}

/* =========================================================
   FAQ — mehr Padding, sanfte Höhen-Animation beim Öffnen
   ========================================================= */
.faq-list {
  max-width: var(--container-narrow);
  margin: var(--space-2xl) 0 0;
}
.faq-item {
  border-bottom: var(--border-default);
}
.faq-item:first-child { border-top: var(--border-default); }
.faq-item__question {
  padding: var(--space-xl) 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  transition: color 0.2s ease;
}
.faq-item__question:hover { color: var(--color-navy); }
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.25s ease;
}
.faq-item[open] .faq-item__question::after {
  content: '−';
  color: var(--color-accent);
}
.faq-item__answer {
  padding: 0 0 var(--space-xl) 0;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
  max-width: 640px;
}
.faq-item__answer > p { margin: 0; }
.faq-item__answer > p + p { margin-top: 0.75rem; }

/* Sanfte Höhen-Animation für moderne Browser (Chrome 129+, Safari 18.4+).
   Ältere Browser fallen graceful auf instant open/close zurück. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.35s var(--ease),
      content-visibility 0.35s allow-discrete;
  }
  .faq-item[open]::details-content {
    block-size: auto;
  }
}

/* =========================================================
   About — Ruhiges Layout auf warmem Cream-Hintergrund
   Foto links · Text rechts · keine Trennlinie
   ========================================================= */
.about-section { background: var(--color-cream); }

.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 768px) {
  .about-layout {
    grid-template-columns: minmax(240px, 270px) 1fr;
    gap: var(--space-2xl);
  }
}
@media (min-width: 1024px) {
  .about-layout {
    grid-template-columns: 270px 1fr;
    gap: var(--space-3xl);
  }
}

.about-portrait {
  margin: 0;
  max-width: 270px;
  width: 100%;
}
.about-portrait img {
  width: 100%;
  height: auto;
  display: block;
  /* Freisteller mit Fade-Out am unteren Rand für sanften Übergang */
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
@media (min-width: 768px) {
  .about-portrait { max-width: none; }
}

.about-flag {
  display: inline-block;
  margin-right: 0.4em;
  font-size: 1.1em;
  line-height: 1;
  vertical-align: -0.05em;
}

.about-block {
  max-width: 640px;
  margin: 0;
  padding: 0;
  border: none;
}

.about-name {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-xs);
  line-height: 1.1;
}
@media (min-width: 1024px) {
  .about-name { font-size: 2.75rem; }
}

.about-role {
  color: var(--color-accent);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-lg);
}

.about-prose p {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-lg);
}
.about-prose p:last-child { margin-bottom: 0; }

/* Positionierungs-Statement als eigenständiger Satz — keine Box, kein Bg */
.about-positioning {
  margin: var(--space-xl) 0 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
  .about-positioning { font-size: 1.375rem; }
}

.about-location {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin: var(--space-xl) 0 0;
  letter-spacing: 0.02em;
}

/* =========================================================
   Final CTA — dunkel mit dezentem radialem Lichteffekt
   Bewusst viel Luft für den letzten Push.
   ========================================================= */
.final-cta {
  text-align: center;
  background: var(--color-navy-dark);
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (min-width: 1024px) {
  .final-cta { padding-top: 9rem; padding-bottom: 9rem; }
}
/* Standard-Divider (::before) für diese Sektion ausblenden */
.section + .final-cta::before { display: none; }

/* Radialer Lichteffekt über ::after — kein Konflikt mit Standard-Divider */
.final-cta::after {
  content: "";
  position: absolute;
  top: -15%;
  left: 50%;
  width: 1000px;
  height: 1000px;
  max-width: 140%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(42, 80, 128, 0.55) 0%, rgba(42, 80, 128, 0.25) 38%, rgba(18, 40, 64, 0) 70%);
  pointer-events: none;
  z-index: -1;
}
.final-cta .container { position: relative; z-index: 1; }

.final-cta .section-title { color: #FFFFFF; }
.final-cta__intro {
  color: rgba(255, 255, 255, 0.75);
  margin-left: auto;
  margin-right: auto;
}
.final-cta .form-card {
  max-width: 520px;
  margin: var(--space-xl) auto 0;
  text-align: left;
}

/* Answer block auf dunklem Hintergrund */
.final-cta .answer-block {
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.7);
}

/* Answer block (AEO) — Default */
.answer-block {
  max-width: var(--container-narrow);
  margin: var(--space-2xl) auto 0;
  padding: var(--space-lg);
  background: var(--color-light-blue);
  border-left: 3px solid var(--color-navy);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  text-align: left;
}

/* =========================================================
   Legal- und Danke-Seiten — schlankes Prose-Layout
   ========================================================= */
.legal-page {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}
.legal-page .section-title {
  margin-bottom: var(--space-xl);
}
.legal-prose {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}
.legal-prose h2 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: var(--weight-extrabold);
  color: var(--color-navy);
  margin: var(--space-2xl) 0 var(--space-sm);
  letter-spacing: -0.015em;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p { margin: 0 0 var(--space-md); }
.legal-prose p:last-child { margin-bottom: 0; }
.legal-prose strong { color: var(--color-text-primary); font-weight: var(--weight-bold); }
.legal-prose a { color: var(--color-navy); }
.legal-prose ul {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}
.legal-prose li { margin-bottom: 6px; }
.legal-prose__back {
  margin-top: var(--space-2xl);
}

/* Danke-Seite — zentrierte Botschaft mit viel Luft */
.thanks-page {
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
}
.thanks-page .section-title {
  font-size: clamp(2.25rem, 6vw, 3rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}
.thanks-page__lead {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  max-width: 540px;
  margin: 0 auto var(--space-2xl);
}

/* =========================================================
   Footer — etwas dunkleres Navy, feiner Übergang vom CTA
   ========================================================= */
.site-footer {
  background: #0E2440;
  color: rgba(255,255,255,0.75);
  font-size: var(--text-small);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer a {
  color: #FFFFFF;
  text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }

/* TOP — Headline + CTA + Kontakt */
.site-footer__top {
  padding: var(--space-3xl) 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.site-footer__top .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 768px) {
  .site-footer__top .container {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-3xl);
  }
}

.site-footer__recap { max-width: 520px; }
.site-footer__quote {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--weight-regular);
  margin: 0;
  letter-spacing: -0.005em;
}
@media (min-width: 768px) {
  .site-footer__quote {
    font-size: 1.25rem;
    line-height: 1.45;
  }
}

.site-footer__contact-block {
  padding-left: 0;
}
@media (min-width: 768px) {
  .site-footer__contact-block {
    padding-left: var(--space-xl);
    border-left: 1px solid rgba(255,255,255,0.10);
  }
}
.site-footer__contact-label {
  font-size: var(--text-tiny);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  margin: 0 0 var(--space-sm);
}
.site-footer__contact-name {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  color: #FFFFFF;
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-xs);
}
.site-footer__contact-line {
  margin: 2px 0 0;
  font-size: var(--text-body);
  color: rgba(255,255,255,0.85);
}
.site-footer__contact-line a {
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 1px;
}
.site-footer__contact-line a:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}
.site-footer__contact-line--muted { color: rgba(255,255,255,0.55); font-size: var(--text-small); }

/* BOTTOM — Copyright + Rechtliches */
.site-footer__bottom {
  padding: var(--space-lg) 0;
  font-size: var(--text-small);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
}
@media (min-width: 640px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
  }
}
.site-footer__brand {
  color: rgba(255,255,255,0.7);
  font-weight: var(--weight-regular);
}
/* Freshness-Signal — sichtbar, aber dezent unter dem Copyright */
.site-footer__updated {
  display: block;
  margin-top: var(--space-xs);
  color: rgba(255,255,255,0.5);
  font-size: var(--text-tiny);
}
.site-footer__legal a {
  color: rgba(255,255,255,0.7);
  margin-right: var(--space-lg);
}
.site-footer__legal a:last-child { margin-right: 0; }

/* =========================================================
   A11y / Animations
   ========================================================= */
:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 2px;
}
.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;
}

/* =========================================================
   Vision-Strip — Positionierungs-Aussagen zwischen Hero
   und Datengrundlage. Drei klare H2-Zeilen, nüchtern.
   ========================================================= */
.vision-strip {
  padding: var(--space-2xl) 0 var(--space-xl);
  text-align: center;
}
.vision-strip__line {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  margin: 0 auto var(--space-md);
  max-width: 720px;
  letter-spacing: -0.01em;
}
.vision-strip__line:last-child {
  margin-bottom: 0;
}
.vision-strip__line--accent {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}
@media (min-width: 768px) {
  .vision-strip {
    padding: var(--space-3xl) 0 var(--space-2xl);
  }
  .vision-strip__line { font-size: 1.375rem; }
}

/* Übergabe-Hinweis unter den drei Schritten — dezent, ohne Box */
.steps-handover {
  margin: var(--space-xl) auto 0;
  max-width: 640px;
  text-align: center;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Beispiel-Report-Vorschau.
   Mobile (Basis): horizontales Wisch-Karussell mit Scroll-Snap + 2 Dots.
   Desktop: zwei Seiten nebeneinander, leicht überlappend und gefächert. */
.report-preview {
  max-width: 700px;
  margin: var(--space-2xl) auto 0;
}
.report-preview__track {
  position: relative;
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.report-preview__track::-webkit-scrollbar { display: none; }
.report-preview__track img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  scroll-snap-align: center;
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 14px 30px rgba(27, 58, 92, 0.18);
}
.report-preview__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-md);
}
.report-preview__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border-strong);
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.report-preview__dot.is-active {
  opacity: 1;
  background: var(--color-navy);
}
.report-preview-caption {
  margin: var(--space-md) auto 0;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-align: center;
}
/* Desktop: nebeneinander aufgefächert, Überlappung nur in der Mitte. */
@media (min-width: 640px) {
  .report-preview__track {
    overflow: visible;
    justify-content: center;
    align-items: center;
    gap: 0;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .report-preview__track img {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-height: 350px;
    scroll-snap-align: none;
    transition: transform 0.35s var(--ease);
  }
  /* Score-Seite links, dezent gegen den Uhrzeigersinn */
  .report-preview-score {
    transform: rotate(-2deg);
    z-index: 2;
  }
  /* Radar-Seite rechts, dezent im Uhrzeigersinn, überlappt mittig */
  .report-preview-radar {
    transform: rotate(2deg);
    margin-left: -48px;
    z-index: 1;
  }
  .report-preview__dots { display: none; }
}

/* =========================================================
   Scroll-Fade-In für Sektionen (nur wenn JS aktiv)
   ========================================================= */
.js-anim [data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}
.js-anim [data-animate].is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* Letztes Element nur per Opacity einblenden — translateY(20px) auf
   dem letzten Section würde die scrollbare Dokumenthöhe um 20 px
   erweitern. Beim Auslösen der Animation schrumpft sie wieder, der
   Browser klammert den Scroll auf das neue Max und die Seite springt
   am unteren Ende sichtbar nach oben. */
.js-anim [data-animate].final-cta,
.js-anim [data-animate].final-cta.is-animated {
  transform: none;
}

/* Final CTA: Formular identisch wie im Hero — kein Sonderlook. */

/* =========================================================
   Pricing-Note — schlichter zentrierter grauer Text
   ========================================================= */
.pricing-note {
  background: transparent;
  border: none;
  padding: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .chat-msg, .chat-warn, .count-up { opacity: 1 !important; transform: none !important; }
  .btn-primary:hover, .btn-secondary:hover { transform: none !important; }
  .branche-card:hover, .pricing-card:hover, .stat-card:hover { transform: none !important; }
  .chat-msg--ai.is-visible .chat-msg__text::after { opacity: 0 !important; animation: none !important; }
  .hero .form-card button[type="submit"],
  .final-cta .form-card button[type="submit"] { animation: none !important; }
  .branche-card { opacity: 1 !important; transform: none !important; }
  .branche-card.is-visible:hover { transform: none !important; }
  [data-animate] { opacity: 1 !important; transform: none !important; }
}