/* ============================================================
   FAKTOR KI BY MIND STUDIOS: DESIGN-SYSTEM
   Eine Schrift (Epilogue), acht Schriftstufen, eine Abstands-
   leiter, zwei Radien (Kante und Pille), Haarlinien statt Boxen,
   ein Bewegungsmuster. Farben aus der Mind-Studios-CI abgeleitet
   (Dunkellila #280050, Mint #00ffa0), ohne Verlaeufe, ohne Reinweiss.
   Stand 07.09.2026 (Basis faktor K, 23.08.2026)
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  /* Farbe */
  --ink:            #120c1e;
  --ink-2:          #1b1430;
  --cream:          #f3f1f6;
  --cream-2:        #e8e4ee;
  --accent:         #00ffa0;
  --accent-strong:  #280050;  /* Mind-Dunkellila: Akzent auf hellen Flaechen (Kontrast 13:1) */

  --muted:          rgba(243, 241, 246, 0.66);
  --muted-dark:     rgba(18, 12, 30, 0.64);
  --border:         rgba(243, 241, 246, 0.14);
  --border-dark:    rgba(18, 12, 30, 0.14);
  --line-strong:    rgba(18, 12, 30, 0.22);

  /* Fokus: auf hellen Flaechen Ink, auf dunklen Akzent.
     Ein Fokusring muss sich vom Untergrund abheben, darum
     hier nicht die Markenfarbe, sondern die lesbare. */
  --focus:          var(--ink);

  /* Schriftstufen */
  --fs-display: clamp(44px, 6.6vw, 96px);
  --fs-xl:      clamp(32px, 4.2vw, 54px);
  --fs-lg:      clamp(24px, 2.4vw, 32px);
  --fs-md:      21px;
  --fs-lead:    19px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-label:   13px;

  /* Zeilenabstaende: drei Werte, mehr nicht */
  --lh-tight:  1.08;
  --lh-snug:   1.22;
  --lh-text:   1.65;

  /* Laufweiten */
  --ls-display: -0.035em;
  --ls-title:   -0.02em;
  --ls-label:   0.12em;

  /* Abstandsleiter, Basis 4 */
  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 64px; --s9: 96px; --s10: 128px;

  /* Section-Groessen */
  --sec-lg: var(--s10);
  --sec-md: var(--s9);
  --sec-sm: var(--s8);

  /* Radien: drei Werte */
  --r-sm:   2px;
  --r-md:   2px;
  --r-pill: 999px;

  /* Bewegung: zwei Dauern, eine Kurve */
  --dur-fast: 160ms;
  --dur-slow: 560ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Lesespalte */
  --measure: 66ch;
}

/* ---------- 2. Grundlagen ---------- */

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

html { scroll-behavior: smooth; }
body { overflow-x: clip; }

body {
  font-family: 'Epilogue', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Korn statt Verlauf und Schatten. Nur auf grossen Bildschirmen:
   der fixe Vollflaechen-Filter kostet auf Mobile Rendering-Leistung. */
@media (min-width: 900px) {
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
}

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

/* Fokus: sichtbar, ueberall, auf beiden Flaechen geprueft */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.dark, .hero, nav.main-nav, footer.main-footer { --focus: var(--accent); }

/* ---------- 3. Raster und Breiten ---------- */

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

/* Eine Lesekante: Textspalten werden innerhalb des Containers
   begrenzt, nicht durch einen zweiten, engeren Container. */
.section-intro,
.section-intro-small,
.hero-sub,
.prose,
.faq-list,
.belief-list { max-width: var(--measure); }

/* Nur die reinen Fliesstextseiten laufen schmal und zentriert */
body.textpage .container-narrow { max-width: 820px; }
body.textpage .prose { margin-left: auto; margin-right: auto; }

/* ---------- 4. Typografie ---------- */

h1.hero-title {
  font-size: var(--fs-display);
  font-weight: 200;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  max-width: 18ch;
  margin-bottom: var(--s5);
  text-wrap: balance;
}
h1.hero-title-small { font-size: var(--fs-xl); max-width: 20ch; }

.section-title,
.final-cta h2 {
  font-size: var(--fs-xl);
  font-weight: 200;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  max-width: 20ch;
  margin-bottom: var(--s5);
  text-wrap: balance;
}
.section-title-medium {
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  margin-bottom: var(--s4);
  max-width: 22ch;
}

/* Kernmotiv der Marke: leichte Headline, ausgezeichnetes Wort
   in Gewicht 500 und Farbe. Ersetzt die frueheren Kursiven. */
.hl { font-weight: 600; color: var(--accent-strong); }
.dark .hl, .hero .hl { color: var(--accent); }

.section-eyebrow,
.hero-eyebrow,
.layer-num,
.method-num,
.price-period,
.case-hero-meta,
.case-tagline,
.case-arrow,
.comparison-label,
.os-bridge-eyebrow,
.os-build-col h4,
.principle-num,
.belief-num,
.teaser-phase-num,
.outcome-from,
.main-footer h4,
.outcome-icon {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.4;
}

.section-eyebrow { color: var(--accent-strong); margin-bottom: var(--s3); }
.dark .section-eyebrow { color: var(--accent); }

.section-intro { font-size: var(--fs-lead); color: var(--muted-dark); margin-bottom: var(--s7); }
.dark .section-intro { color: var(--muted); }
.section-intro-small { font-size: var(--fs-body); color: var(--muted-dark); }
/* Ein Knopf nach dem Einleitungstext braucht Luft, sonst klebt er am Absatz */
.section-intro-small + .btn-ghost-dark,
.section-intro-small + .btn-ghost,
.section-intro-small + .btn-primary { margin-top: var(--s6); }

/* Nachsatz am Ende einer Section. Steht bewusst abgesetzt,
   damit er nicht als vierte Karte gelesen und ueberblaettert wird. */
.section-outro {
  margin-top: var(--s8);
  padding-left: var(--s5);
  border-left: 2px solid var(--accent-strong);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  max-width: 44ch;
  color: var(--ink);
}
.dark .section-outro { color: var(--cream); border-left-color: var(--accent); }

/* Kein doppelter Abstand: das erste Element einer Section
   verlaesst sich auf das Section-Padding, nicht auf sich selbst. */
.container > *:first-child,
.container-narrow > *:first-child { margin-top: 0; }

/* ---------- 5. Hilfsklassen aus der Leiter ---------- */

.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
.mt-8 { margin-top: var(--s8); }

/* ---------- 6. Navigation ---------- */

nav.main-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(18, 12, 30, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
nav.main-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s4);
  padding-bottom: var(--s4);
  transition: padding var(--dur-slow) var(--ease);
}
/* Verdichtet sich nach dem ersten Scroll */
nav.main-nav.is-condensed .container {
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}

/* Wortmarke «Faktor KI by Mind Studios». CSS-Fassung, bis die Logo-Grafik vorliegt.
   Kein Satzpunkt mehr (faktor-K-Erbe). Das I steht in Mint und Gewicht 600,
   «by Mind Studios» ist eine lesbare Zeile, im Header neben der Marke mit
   Haarlinie, im Footer darunter. */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s3);
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.logo-main {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: var(--ls-title);
}
/* Satzpunkt der Wortmarke: gehoert an .logo-main, nicht an .logo, sonst
   steht er hinter «by Mind Studios». Im animierten Header ist der Punkt ein
   echtes Element (.dot), darum dort unterdrueckt. */
.logo-main::after { content: "."; color: var(--accent); font-weight: 500; }
.logo-anim .logo-main::after { content: none; }

/* Logo-Choreografie «faktor K wird faktor KI»: laeuft als Loop in Header und
   Footer (Entscheid Michel 2026-09-08, vorher einmalig und nur im Header).
   Zyklus 8 s: 5,4 s Bewegung wie im Original, dann 2,6 s Ruhe als «faktor K.». Uebernommen aus der faktor-K-Website (Entscheid Michel
   2026-09-08), Farben kommen aus den Mind-Studios-Tokens.
   1 Punkt huepft an · 2 aus dem Punkt waechst das I, K wird Mint, «faktor»
   tritt zurueck · 3 alles zurueck · 4 Punkt setzt sich mit Ring. */
.logo-anim .w, .logo-anim .k, .logo-anim .i, .logo-anim .dot { display: inline-block; }
.logo-anim .w   { margin-right: .24em; animation: l-word var(--l-dur) var(--ease) var(--l-delay) infinite both; }
.logo-anim .k   { animation: l-k var(--l-dur) var(--ease) var(--l-delay) infinite both; }
.logo-anim .i   { color: var(--accent); font-weight: 500; overflow: hidden; vertical-align: bottom;
                  max-width: 0; clip-path: inset(100% 0 0 0); margin-left: .02em;
                  animation: l-i var(--l-dur) var(--ease) var(--l-delay) infinite both; }
.logo-anim .dot { width: .13em; height: .13em; background: var(--accent); border-radius: .015em; margin-left: .07em;
                  vertical-align: baseline; transform-origin: 50% 100%; position: relative;
                  animation: l-dot var(--l-dur) var(--ease) var(--l-delay) infinite both; }
.logo-anim .dot::after { content: ""; position: absolute; inset: -.02em; border: .012em solid var(--accent);
                  border-radius: 50%; opacity: 0; animation: l-ring var(--l-dur) var(--ease) var(--l-delay) infinite both; }
.logo-anim { --l-dur: 8s; --l-delay: 1s; }
@keyframes l-word {
  0%, 12.2%   { opacity: 1; }
  18.9%, 40.5%  { opacity: .34; }
  48.6%, 100% { opacity: 1; }
}
@keyframes l-k {
  0%, 12.2%   { color: var(--cream); font-weight: 400; }
  18.9%, 40.5%  { color: var(--accent); font-weight: 500; }
  48.6%, 100% { color: var(--cream); font-weight: 400; }
}
@keyframes l-dot {
  0%, 8.1%   { transform: translateY(0) scale(1); opacity: 1; max-width: .13em; }
  10.8%       { transform: translateY(-.34em) scale(1); opacity: 1; }
  12.8%       { transform: translateY(0) scale(1.15, .85); opacity: 1; max-width: .13em; }
  16.2%, 43.2%  { transform: translateY(0) scale(1); opacity: 0; max-width: 0; margin-left: 0; }
  47.2%       { transform: translateY(0) scale(1.15, .85); opacity: 1; max-width: .13em; margin-left: .07em; }
  50%, 100% { transform: translateY(0) scale(1); opacity: 1; max-width: .13em; margin-left: .07em; }
}
@keyframes l-i {
  0%, 12.8%   { max-width: 0;     clip-path: inset(100% 0 0 0); }
  14.9%       { max-width: .34em; clip-path: inset(100% 0 0 0); }
  20.2%, 40.5%  { max-width: .34em; clip-path: inset(0 0 0 0); }
  45.2%       { max-width: .34em; clip-path: inset(100% 0 0 0); }
  47.2%, 100% { max-width: 0;     clip-path: inset(100% 0 0 0); }
}
@keyframes l-ring {
  0%, 47.9%   { opacity: 0; transform: scale(1); }
  49.3%       { opacity: .7; transform: scale(1); }
  56.7%, 100% { opacity: 0; transform: scale(2.8); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-anim .w, .logo-anim .k, .logo-anim .i, .logo-anim .dot, .logo-anim .dot::after { animation: none; }
}
.logo-sub {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cream);
  opacity: 0.72;
  padding-left: var(--s3);
  border-left: 1px solid var(--border);
  line-height: 1;
}
.main-footer .logo { flex-direction: column; align-items: flex-start; gap: var(--s2); }
.main-footer .logo-sub { padding-left: 0; border-left: none; }

.nav-links { display: flex; gap: var(--s6); list-style: none; align-items: center; }
/* Der CTA steht am Desktop als Button rechts, im Menue nur auf Mobil */
.nav-links .nav-cta { display: none; }
.nav-links a {
  color: var(--cream);
  text-decoration: none;
  font-size: var(--fs-small);
  opacity: 0.72;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-links a.active { opacity: 1; color: var(--accent); }

.cta-btn {
  background: var(--accent);
  color: var(--ink);
  padding: var(--s3) var(--s5);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-small);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--s3) * -1);
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.main-nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.main-nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.main-nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 7. Buttons ---------- */

.btn-primary, .btn-ghost, .btn-ghost-dark {
  display: inline-block;
  padding: var(--s4) var(--s6);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.2;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn-primary { background: var(--accent); color: var(--ink); border: 1px solid var(--accent); }
.btn-ghost { color: var(--cream); border: 1px solid var(--border); }
.btn-ghost-dark { color: var(--ink); border: 1px solid var(--line-strong); }

/* Rueckmeldung am Knopf. Der Pfeil gehoert zum Primary-Knopf und
   wandert beim Hover ein Stueck weiter, die Ghost-Knoepfe fuellen
   sich von links. Bewegt wird translate, nicht transform: transform
   gehoert dem Reveal-Muster, sonst gewinnt die Animation. */
.btn-primary::after {
  content: "\2192";
  display: inline-block;
  margin-left: var(--s2);
  transition: translate var(--dur-fast) var(--ease);
}
.btn-ghost, .btn-ghost-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-ghost::before, .btn-ghost-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease);
}
.btn-ghost::before      { background: rgba(243, 241, 246, 0.09); }
.btn-ghost-dark::before { background: rgba(18, 12, 30, 0.05); }


/* ---------- 8. Hero ---------- */

.hero {
  background: var(--ink);
  color: var(--cream);
  padding: var(--s9) 0;
  position: relative;
  overflow: hidden;
}
/* Der eine grosse Move der Startseite: Headline links, rechts die Eckdaten
   als vertikale Index-Leiste mit Haarlinien. Die Leiste ist das Signature-
   Element und kehrt auf den Unterseiten wieder (Ablauf, Pakete, Gemeinden). */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(260px, 4fr);
  gap: var(--s9);
  align-items: end;
}
.hero-rail {
  list-style: none;
  border-top: 1px solid var(--border);
}
.hero-rail li {
  display: grid;
  grid-template-columns: minmax(96px, 0.8fr) 1.4fr;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--border);
}
.hero-small { padding: var(--s8) 0; }
.hero .container { position: relative; z-index: 1; }


.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--accent);
  margin-bottom: var(--s6);
}
/* Mint-Punkt vor dem Hero-Eyebrow entfernt (Entscheid Michel 2026-09-08), gilt fuer alle Seiten. */

.hero-sub { font-size: var(--fs-lead); color: var(--muted); margin-bottom: var(--s7); }
.hero-copy .hero-title { margin-bottom: var(--s6); }
.hero-cta { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }

.hero-stats {
  margin-top: var(--s8);
  padding-top: var(--s7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.stat-num {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--accent);
  line-height: 1.1;
  letter-spacing: var(--ls-title);
}
.stat-label { color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
.hero-stats .stat-label { margin-top: var(--s2); }

/* ---------- 9. Sections und Flaechen ---------- */

/* Rhythmus: helle Sektionen laufen in 96, dunkle in 128, kleine in 64.
   Die dunklen Flaechen sind die Dramaturgie (Angebot, Preise, Abschluss),
   darum bekommen sie mehr Luft. */
section { padding: var(--sec-md) 0; }
section.dark { padding: var(--sec-lg) 0; }
section.section-small { padding: var(--sec-sm) 0; }

.dark { background: var(--ink); color: var(--cream); }
/* Hero und dunkle Section verschmelzen zu einer Flaeche.
   Dann braucht es den vollen Section-Abstand nicht noch einmal. */
.hero + section.dark { padding-top: var(--sec-sm); }
.alt  { background: var(--cream-2); }

/* ---------- 10. Prose ---------- */

.prose { font-size: var(--fs-body); line-height: var(--lh-text); color: var(--ink); }
.prose h2 {
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  margin-top: var(--s8);
  margin-bottom: var(--s4);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  margin-top: var(--s6);
  margin-bottom: var(--s3);
}
.prose p { margin-bottom: var(--s4); }
.prose ul, .prose ol { margin-bottom: var(--s4); padding-left: var(--s5); }
.prose li { margin-bottom: var(--s2); }
.prose strong { font-weight: 500; }
.prose a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose hr { border: none; border-top: 1px solid var(--border-dark); margin: var(--s8) 0; }

/* ---------- 11. Kartenbauteil ---------- */

.outcome-card,
.price-card,
.case-card-mini,
.comparison-card,
.contact-card,
.os-build,
.os-bridge,
.case-num,
.case-quote,
.newsletter-box {
  border-radius: var(--r-md);
  padding: var(--s6);
  border: 1px solid transparent;
}

/* Variante hell */
.case-card-mini,
.contact-card,
.os-build,
.case-num,
.case-quote,
.newsletter-box {
  background: var(--cream-2);
  border-color: var(--border-dark);
  color: var(--ink);
}
.alt .case-card-mini,
.alt .contact-card,
.alt .os-build,
.alt .case-num,
.alt .newsletter-box { background: var(--cream); }

/* Variante dunkel */
.price-card {
  background: var(--ink-2);
  border-color: var(--border);
  color: var(--cream);
  display: flex;
  flex-direction: column;
}
/* Outcome-Karten folgen ihrer Flaeche */
.outcome-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--cream-2);
  border-color: var(--border-dark);
  color: var(--ink);
}
.alt .outcome-card { background: var(--cream); }
.dark .outcome-card {
  background: var(--ink-2);
  border-color: var(--border);
  color: var(--cream);
}

/* Variante hervorgehoben: flache Flaeche statt Verlauf */
.outcome-card-featured {
  border-color: var(--accent);
  background: rgba(0, 255, 160, 0.05);
}
/* Hervorgehoben nur ueber die Flaeche, kein Rahmen (Michel, 2026-09-07) */
.contact-card.featured {
  border-color: transparent;
  background: rgba(40, 0, 80, 0.08);
}

/* Variante anklickbar: gruene Linie waechst von links,
   kein Sprung, kein Schatten (assets.md) */
.case-card-mini {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* Die Karten heben sich beim Hover leicht an. Auch hier translate
   statt transform, aus demselben Grund wie bei den Knoepfen. */
.outcome-card,
.price-card,
.contact-card,
.case-card-mini,
.comparison-card {
  transition: translate var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.case-card-mini::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--accent-strong);
  transition: width var(--dur-slow) var(--ease);
}

/* ---------- 12. Pain-Karten ---------- */

.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s7); }
.section-title-medium + .pain-grid { margin-top: var(--s7); }
.pain-card { border-top: 2px solid var(--line-strong); padding-top: var(--s5); }
.dark .pain-card { border-top-color: var(--border); }
.pain-num {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--accent-strong);
  margin-bottom: var(--s4);
}
.dark .pain-num { color: var(--accent); }
.pain-quote {
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
}

/* ---------- 13. Layer ---------- */

/* Die Schritte sind Zeilen mit Haarlinie, keine Boxen: gleiche Sprache
   wie der Workshop-Ablauf und die Index-Leiste im Hero. */
.layers { display: flex; flex-direction: column; margin-top: var(--s7); }
.layer {
  border-top: 1px solid var(--border);
  padding: var(--s7) 0 var(--s7) var(--s5);
  display: grid;
  grid-template-columns: minmax(190px, 0.85fr) 2fr;
  gap: var(--s7);
  align-items: start;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease);
}
.layers .layer:last-child { border-bottom: 1px solid var(--border); }
.layer::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-slow) var(--ease);
}
.layer-num { color: var(--accent); margin-bottom: var(--s3); }
.layer-title {
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  margin-bottom: var(--s1);
}
.layer-subtitle { font-size: var(--fs-small); color: var(--accent); }
.layer-desc {
  color: var(--cream);
  opacity: 0.82;
  max-width: var(--measure);
  margin-bottom: var(--s5);
}
/* Stichworte als Text mit Trennpunkt, nicht als Chips */
.layer-items { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.layer-item {
  font-size: var(--fs-small);
  color: var(--cream);
  opacity: 0.82;
  line-height: 1.6;
}
.layer-item:not(:last-child)::after { content: "·"; color: var(--accent); margin-left: var(--s3); }
.layer-cta { margin-top: var(--s5); }

.foundation-note {
  border-left: 2px solid var(--accent-strong);
  padding: var(--s5) var(--s6);
  margin-top: var(--s8);
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  color: inherit;
  max-width: 34ch;
  background: rgba(0, 255, 160, 0.04);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.dark .foundation-note { color: var(--cream); border-left-color: var(--accent); background: rgba(0, 255, 160, 0.03); }

/* ---------- 14. Methoden-Schritte ---------- */

.method-steps { display: flex; flex-direction: column; margin-top: var(--s7); }
.method-step {
  display: grid;
  grid-template-columns: 110px 1fr 170px;
  gap: var(--s7);
  padding: var(--s6) 0 var(--s6) var(--s4);
  border-top: 1px solid var(--border-dark);
  align-items: start;
  position: relative;
}
.method-step:last-child { border-bottom: 1px solid var(--border-dark); }
/* Rueckmeldung ohne Layoutversatz */
.method-step::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent-strong);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-slow) var(--ease);
}
.method-num { color: var(--accent-strong); padding-top: 5px; }
.method-content h3 {
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  margin-bottom: var(--s3);
}
.method-content p { color: var(--muted-dark); max-width: var(--measure); }
.method-duration {
  font-size: var(--fs-label);
  color: var(--muted-dark);
  text-align: right;
  padding-top: 6px;
  line-height: 1.5;
}
.method-duration strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ---------- 15. Preise ---------- */

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

.price-name {
  font-size: var(--fs-lg);
  font-weight: 300;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-snug);
  margin-bottom: var(--s1);
  color: var(--cream);
}
.price-target { color: var(--muted); font-size: var(--fs-small); margin-bottom: var(--s5); }
.price-amount {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl);
  font-weight: 200;
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--s1);
}
.price-period { color: var(--muted); margin-bottom: var(--s4); }
.price-year1 {
  color: var(--cream);
  font-size: var(--fs-small);
  line-height: 1.55;
  padding: var(--s3) var(--s4);
  background: rgba(0, 255, 160, 0.04);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: var(--s5);
}
.price-year1 strong { color: var(--accent); font-weight: 500; }
.price-block {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  padding-top: var(--s5);
  margin-bottom: var(--s2);
  border-top: 1px solid var(--border);
}
.price-features { list-style: none; margin-bottom: 0; }
.price-features + .price-block { margin-top: var(--s5); }
.price-features:last-of-type { margin-bottom: var(--s6); }
.price-card > .btn-primary { margin-top: auto; align-self: stretch; text-align: center; }
.price-features li {
  padding: var(--s3) 0;
  border-top: 1px solid var(--border);
  color: var(--cream);
  font-size: var(--fs-small);
  display: flex;
  align-items: start;
  gap: var(--s3);
  line-height: 1.5;
}
.price-features li::before { content: "→"; color: var(--accent); flex-shrink: 0; }
.price-features li:first-child { border-top: none; }

.price-footnote {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: var(--measure);
}
.price-footnote a { color: var(--accent); }

/* ---------- 16. Outcome-Karten ---------- */

.outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s7); }
.outcome-icon { color: var(--accent-strong); letter-spacing: 0; }
.outcome-name {
  font-size: var(--fs-lg);
  font-weight: 300;
  color: inherit;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
}
.outcome-from { color: var(--accent-strong); }
.outcome-desc { font-size: var(--fs-small); color: var(--muted-dark); flex-grow: 1; }
.dark .outcome-icon, .dark .outcome-from { color: var(--accent); }
.dark .outcome-desc { color: var(--muted); }

/* ---------- 17. Cases ---------- */

.cases-grid-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.case-brand {
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-snug);
  margin-bottom: var(--s2);
}
.case-tagline { color: var(--accent-strong); margin-bottom: var(--s3); }
.case-card-mini p { color: var(--muted-dark); font-size: var(--fs-small); margin-bottom: var(--s5); }
.case-arrow {
  color: var(--accent-strong);
  padding-top: var(--s4);
  border-top: 1px solid var(--border-dark);
  margin-top: auto;
}

.case-hero-meta { color: var(--accent); margin-bottom: var(--s5); display: flex; gap: var(--s5); flex-wrap: wrap; }
.case-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin: var(--s7) 0; }
.case-num { text-align: center; }
.case-num strong {
  font-variant-numeric: tabular-nums;
  display: block;
  font-size: var(--fs-lg);
  font-weight: 200;
  color: var(--accent-strong);
  line-height: 1;
  letter-spacing: var(--ls-display);
  margin-bottom: var(--s2);
}
.case-num span { font-size: var(--fs-small); color: var(--muted-dark); line-height: 1.45; }

.case-quote {
  border-left: 2px solid var(--accent-strong);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: var(--s7) 0;
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--ink);
  max-width: 44ch;
}
.case-quote-author {
  margin-top: var(--s4);
  font-size: var(--fs-small);
  color: var(--muted-dark);
  font-weight: 500;
}

.os-bridge { background: var(--ink); color: var(--cream); padding: var(--s7); margin-top: var(--s8); }
.os-bridge h3 {
  font-size: var(--fs-lg);
  font-weight: 300;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-snug);
  margin-bottom: var(--s4);
}
.os-bridge p { color: var(--muted); max-width: var(--measure); margin-bottom: var(--s3); }
.os-bridge-eyebrow { color: var(--accent); margin-bottom: var(--s3); }

.os-build { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); margin: var(--s7) 0; }
.os-build-col h4 { color: var(--accent-strong); margin-bottom: var(--s3); }
.md-tag, .skill-tag {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 500;
  padding: var(--s1) var(--s3);
  border-radius: var(--r-sm);
  margin: 0 var(--s1) var(--s1) 0;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.md-tag { background: var(--ink); color: var(--accent); }
.skill-tag { background: var(--cream); border: 1px solid var(--border-dark); color: var(--ink); }

/* ---------- 18. FAQ ---------- */

.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }

/* Einklappbar ohne JavaScript: details und summary.
   Der Marker ist ein Plus, das sich beim Oeffnen zum Minus dreht. */
summary.faq-q {
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-snug);
  padding: var(--s5) var(--s7) var(--s5) 0;
  margin: 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
summary.faq-q::-webkit-details-marker { display: none; }
summary.faq-q::after,
summary.faq-q::before {
  content: "";
  position: absolute;
  right: var(--s2);
  top: calc(var(--s5) + 0.62em);
  width: 14px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-fast) var(--ease);
}
summary.faq-q::before { transform: rotate(90deg); }
.faq-item[open] > summary.faq-q::before { transform: rotate(0deg); opacity: 0; }
.faq-list-light summary.faq-q::after,
.faq-list-light summary.faq-q::before { background: var(--accent-strong); }

.faq-a {
  color: var(--muted);
  max-width: var(--measure);
  padding-bottom: var(--s5);
}
/* Der Inhalt faltet sich auf, statt zu erscheinen */
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] > .faq-a { animation: faq-open var(--dur-slow) var(--ease) both; }
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq-list-light .faq-item { border-color: var(--border-dark); }
.faq-list-light .faq-a { color: var(--muted-dark); }
.faq-category-title {
  font-size: var(--fs-lg);
  font-weight: 300;
  letter-spacing: var(--ls-title);
  color: var(--accent-strong);
  margin-top: var(--s9);
  margin-bottom: var(--s5);
}
.faq-category-title:first-child { margin-top: 0; }
/* Der Titel steht als erstes Kind seines Wrappers, ein margin-top
   wuerde herauskollabieren. Darum padding. */
.prose > .faq-category-title { margin-top: 0; padding-top: var(--s9); }
.prose[data-reveal] > .faq-category-title:first-child { padding-top: 0; }
.dark .faq-category-title { color: var(--accent); }

/* ---------- 19. Teaser, Prinzipien, Glaubenssaetze ---------- */

.teaser-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.teaser-phases { display: flex; flex-direction: column; border-top: 1px solid var(--border-dark); }
.teaser-phase {
  display: flex;
  align-items: baseline;
  gap: var(--s5);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--border-dark);
  font-size: var(--fs-body);
}
.dark .teaser-phases { border-top-color: var(--border); }
.dark .teaser-phase { border-bottom-color: var(--border); }
.dark .teaser-phase-num { color: var(--accent); }
.teaser-phase-num { color: var(--accent-strong); min-width: 28px; }

.principle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s7); margin-top: var(--s7); }
.principle { padding-top: var(--s5); border-top: 1px solid var(--border-dark); }
.principle-num { color: var(--accent-strong); margin-bottom: var(--s3); }
.principle h3 {
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-snug);
  margin-bottom: var(--s3);
}
.principle p { color: var(--muted-dark); font-size: var(--fs-small); }

.belief-list { margin-top: var(--s7); }
.belief {
  padding: var(--s5) 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--s5);
  align-items: start;
}
.belief:last-child { border-bottom: 1px solid var(--border); }
.belief-num { color: var(--accent); padding-top: 6px; }
.belief-content strong {
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: var(--ls-title);
  color: var(--cream);
  display: block;
  margin-bottom: var(--s2);
  line-height: var(--lh-snug);
}
.belief-content p { color: var(--muted); font-size: var(--fs-small); }

/* ---------- 20. Vergleich ---------- */

.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s7); }
.comparison-card-negative { background: rgba(243, 241, 246, 0.04); border-color: var(--border); }
.comparison-card-positive { background: rgba(0, 255, 160, 0.04); border-color: rgba(0, 255, 160, 0.45); }
.comparison-label { color: var(--accent); margin-bottom: var(--s4); }
.comparison-quote {
  font-size: var(--fs-md);
  font-weight: 300;
  color: var(--cream);
  margin-bottom: var(--s4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
}
.comparison-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.comparison-list li {
  color: var(--muted);
  font-size: var(--fs-small);
  padding-left: var(--s5);
  position: relative;
  line-height: 1.55;
}
.comparison-card-negative .comparison-list li::before {
  content: "×"; position: absolute; left: 0;
  color: rgba(243, 241, 246, 0.45); font-weight: 500;
}
.comparison-card-positive .comparison-list li::before {
  content: "→"; position: absolute; left: 0; color: var(--accent);
}

/* ---------- 21. Kontakt ---------- */

.contact-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); margin-top: var(--s7); }
.contact-card { display: flex; flex-direction: column; }
.contact-card h3 {
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-snug);
  margin-bottom: var(--s3);
}
.contact-card p { color: var(--muted-dark); font-size: var(--fs-small); margin-bottom: var(--s5); flex-grow: 1; }
.contact-card .btn-primary, .contact-card .btn-ghost-dark { align-self: flex-start; }

.contact-direct { margin-top: var(--s8); }
.contact-direct dl { display: grid; grid-template-columns: 160px 1fr; gap: var(--s3) var(--s5); font-size: var(--fs-small); }
.contact-direct dt { font-weight: 500; }
.contact-direct dd { color: var(--muted-dark); }
.contact-direct a { color: var(--accent-strong); }

/* ---------- 21b. Kontaktformular ---------- */

.contact-form-block { margin-top: var(--s8); max-width: 56ch; }
.contact-form-block .section-title-medium { margin-bottom: var(--s2); }
.contact-form-block > p { color: var(--muted-dark); font-size: var(--fs-small); margin-bottom: var(--s5); }

.contact-form { display: grid; gap: var(--s4); }
.form-row { display: grid; gap: var(--s2); }
.form-row label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted-dark);
}
.form-row input,
.form-row textarea {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--cream-2);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  resize: vertical;
}
.form-row input:focus-visible,
.form-row textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.contact-form button { justify-self: start; border: none; cursor: pointer; font-family: inherit; }

.form-feedback { margin-top: var(--s4); font-size: var(--fs-small); }
.form-feedback-success { color: var(--accent-strong); }
.form-feedback-error { color: var(--muted-dark); }

/* ---------- 22. Newsletter ---------- */

.newsletter-box { margin-top: var(--s7); max-width: 48ch; }
.newsletter-box h2 {
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: var(--ls-title);
  margin-bottom: var(--s3);
}
.newsletter-box p { color: var(--muted-dark); font-size: var(--fs-small); margin-bottom: var(--s5); }

/* ---------- 23. Abschluss und Footer ---------- */

/* Der Abschluss ist das grosse Schlussstatement auf Ink; Footer schliesst
   direkt an, getrennt durch eine Haarlinie. */
.final-cta { background: var(--ink); color: var(--cream); padding: var(--s10) 0 var(--s9); --focus: var(--accent); }
.final-cta h2 { max-width: 16ch; font-size: var(--fs-display); }
.final-cta .hl { color: var(--accent); }
.final-cta p {
  font-size: var(--fs-lead);
  margin-bottom: var(--s6);
  max-width: var(--measure);
  color: var(--muted);
}
.final-cta .btn-primary { background: var(--accent); color: var(--ink); border-color: var(--accent); }

footer.main-footer { background: var(--ink); color: var(--muted); padding: var(--s8) 0 var(--s6); border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s6); margin-bottom: var(--s8); }
.main-footer h4 { color: var(--cream); margin-bottom: var(--s3); }
.main-footer ul { list-style: none; }
.main-footer ul li { padding: var(--s1) 0; }
.main-footer ul a { color: var(--muted); text-decoration: none; font-size: var(--fs-small); }
.footer-bottom {
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-small);
  flex-wrap: wrap;
  gap: var(--s3);
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-tagline {
  color: var(--cream);
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  margin-top: var(--s3);
  max-width: 20ch;
}

/* ---------- 24. Bewegung ---------- */

/* Ein einziges Reveal-Muster, scroll-getrieben, ohne JS im
   Scrollpfad. Laeuft genau einmal. Browser ohne view()
   zeigen alles sofort.

   Gestaffelt wird nicht ueber Verzoegerung, sondern ueber
   versetzte Bereiche: jedes Element haengt an seiner eigenen
   Scroll-Position. Das Auge laeuft die Reihe entlang, statt
   dass alles gleichzeitig aufblitzt. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    [data-reveal],
    .section-eyebrow,
    .section-title,
    .section-title-medium,
    .section-intro,
    .section-outro,
    .foundation-note,
    .case-quote,
    .os-bridge,
    .newsletter-box,
    .price-footnote,
    .faq-category-title {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }

    /* Kinder von Rastern und Listen: einer nach dem anderen */
    .pain-grid > *,
    .outcome-grid > *,
    .pricing > *,
    .cases-grid-three > *,
    .contact-options > *,
    .comparison-grid > *,
    .case-numbers > *,
    .teaser-phases > *,
    .principle-grid > *,
    .layer-items > *,
    .hero-stats > * {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 20%;
    }
    .pain-grid > :nth-child(2), .outcome-grid > :nth-child(2), .pricing > :nth-child(2),
    .cases-grid-three > :nth-child(2), .contact-options > :nth-child(2),
    .comparison-grid > :nth-child(2), .case-numbers > :nth-child(2),
    .teaser-phases > :nth-child(2), .principle-grid > :nth-child(2),
    .layer-items > :nth-child(2), .hero-stats > :nth-child(2) { animation-range: entry 9% cover 26%; }

    .pain-grid > :nth-child(3), .outcome-grid > :nth-child(3), .pricing > :nth-child(3),
    .cases-grid-three > :nth-child(3), .contact-options > :nth-child(3),
    .case-numbers > :nth-child(3), .teaser-phases > :nth-child(3),
    .principle-grid > :nth-child(3), .layer-items > :nth-child(3),
    .hero-stats > :nth-child(3) { animation-range: entry 14% cover 32%; }

    .teaser-phases > :nth-child(4), .principle-grid > :nth-child(4),
    .layer-items > :nth-child(4), .hero-stats > :nth-child(4) { animation-range: entry 19% cover 38%; }
    .teaser-phases > :nth-child(5), .principle-grid > :nth-child(5) { animation-range: entry 24% cover 44%; }
    .principle-grid > :nth-child(6) { animation-range: entry 29% cover 50%; }

    /* Listen mit Haarlinien: die Linie zeichnet sich, dann kommt der Inhalt */
    .method-step, .belief, .faq-item {
      animation: reveal-line linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 18%;
    }

    /* Layer kommen in Leserichtung von links */
    .layers .layer {
      animation: reveal-left linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    .layers .layer:nth-child(2) { animation-range: entry 8% cover 30%; }
    .layers .layer:nth-child(3) { animation-range: entry 12% cover 34%; }
    .layers .layer:nth-child(4) { animation-range: entry 16% cover 38%; }
    .layers .layer:nth-child(5) { animation-range: entry 20% cover 42%; }

    /* Der gruene Abschluss: Titel, Satz, Knopf nacheinander */
    .final-cta h2, .final-cta p, .final-cta .btn-primary {
      animation: reveal linear both;
      animation-timeline: view();
    }
    .final-cta h2           { animation-range: entry 6% cover 24%; }
    .final-cta p            { animation-range: entry 11% cover 30%; }
    .final-cta .btn-primary { animation-range: entry 16% cover 36%; }
  }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes reveal-left {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes reveal-line {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Auftritt beim Laden: einmal, gestaffelt, dann nie wieder.
   Nur im Hero, damit der Einstieg lebt und der Rest ruhig bleibt. */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-eyebrow,
  .hero .hero-title,
  .hero .hero-sub,
  .hero .hero-cta,
  .hero .case-hero-meta {
    animation: enter var(--dur-slow) var(--ease) both;
  }
  .hero .hero-eyebrow    { animation-delay: 60ms; }
  .hero .case-hero-meta  { animation-delay: 60ms; }
  .hero .hero-title      { animation-delay: 160ms; }
  .hero .hero-sub        { animation-delay: 300ms; }
  .hero .hero-cta        { animation-delay: 420ms; }

  .hero-rail li { animation: enter var(--dur-slow) var(--ease) both; }
  .hero-rail li:nth-child(1) { animation-delay: 380ms; }
  .hero-rail li:nth-child(2) { animation-delay: 460ms; }
  .hero-rail li:nth-child(3) { animation-delay: 540ms; }
  .hero-rail li:nth-child(4) { animation-delay: 620ms; }
}
@keyframes enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Rueckmeldung nur auf Zeigegeraeten */
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { opacity: 1; color: var(--accent); }
  /* Beim Hover wird die Flaeche Dunkellila, darum muss die Schrift auf
     Off-White wechseln. Vorher blieb sie Ink: zwei dunkle Toene, Kontrast 1.2:1. */
  .cta-btn:hover { background: var(--accent-strong); color: var(--cream); }
  .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--cream); }
  .btn-ghost:hover { border-color: var(--accent); }
  .btn-ghost-dark:hover { border-color: var(--accent-strong); }
  .case-card-mini:hover::after { width: 100%; }
  .case-card-mini:hover { border-color: var(--accent-strong); }
  .price-card:hover { border-color: rgba(0, 255, 160, 0.38); background: #221a3a; }
  .btn-ghost:hover::before, .btn-ghost-dark:hover::before { transform: scaleX(1); }
  .layer:hover::after { transform: scaleY(1); }
  .method-step:hover::before { transform: scaleY(1); }
  .main-footer ul a:hover { color: var(--accent); }
  .prose a:hover { text-decoration-thickness: 2px; }
}

/* Anheben und Pfeilweg nur auf Zeigegeraeten und nur, wenn
   Bewegung erwuenscht ist */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Angehoben wird nur, wo die Karte eine sichtbare Flaeche hat.
     Auf der dunklen Preisflaeche liegen die Karten fast randlos,
     dort waere ein Sprung ein Textversatz. Die Preiskarte
     antwortet darum mit Rand und Flaeche, nicht mit Bewegung. */
  .case-card-mini:hover,
  .contact-card:hover,
  .outcome-card:hover { translate: 0 -3px; }
  .contact-card:not(.featured):hover,
  .outcome-card:hover { border-color: var(--accent-strong); }
  .btn-primary:hover::after { translate: 3px 0; }
}

/* Der Druckpunkt: der Knopf gibt kurz nach */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:active, .btn-ghost:active, .btn-ghost-dark:active, .cta-btn:active {
    translate: 0 1px;
  }
}

/* Abschalter: die Seite ist dann sofort vollstaendig sichtbar */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    translate: none !important;
  }
  [data-reveal], [data-reveal] > *, .layers .layer,
  .method-step, .belief, .faq-item,
  .section-eyebrow, .section-title, .section-title-medium, .section-intro,
  .faq-category-title, .hero-rail li,
  .hero .hero-eyebrow, .hero .hero-title, .hero .hero-sub, .hero .hero-cta {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- 25. Umbruchpunkte ---------- */

/* Zwischenbereich: dreispaltige Raster fallen frueher auf zwei */
@media (max-width: 1080px) {
  .pain-grid,
  .cases-grid-three,
  .contact-options,
  .outcome-grid,
  .pricing,
  .case-numbers { grid-template-columns: repeat(2, 1fr); }
  .layer { grid-template-columns: 1fr; gap: var(--s4); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 0.6fr); gap: var(--s7); }
  .method-step { grid-template-columns: 90px 1fr; }
  .method-duration { grid-column: 2; text-align: left; padding-top: 0; }
}

@media (max-width: 900px) {
  :root {
    --sec-lg: 80px;
    --sec-md: var(--s8);
    --sec-sm: var(--s7);
    --fs-md: 19px;
    --fs-lead: 18px;
  }

  .container, .container-narrow { padding: 0 var(--s5); }

  .nav-burger { display: flex; }
  .nav-links { display: none; }
  nav.main-nav > .container > .cta-btn { display: none; }
  .main-nav.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--ink);
    backdrop-filter: blur(12px);
    padding: 0 0 var(--s5);
    border-bottom: 1px solid var(--border);
    z-index: 99;
  }
  .main-nav.nav-open .nav-links li { border-top: 1px solid var(--border); }
  .main-nav.nav-open .nav-links a {
    display: block;
    padding: var(--s4) var(--s5);
    font-size: var(--fs-body);
    opacity: 1;
  }
  .main-nav.nav-open .nav-links li.nav-cta { display: block; }
  .main-nav.nav-open .nav-links li.nav-cta a { color: var(--accent); font-weight: 500; }

  .hero { padding: var(--s8) 0; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .hero-rail li { grid-template-columns: minmax(96px, 0.6fr) 1.6fr; }
  .final-cta { padding: var(--s9) 0 var(--s8); }
  .final-cta h2 { font-size: var(--fs-xl); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); margin-top: var(--s7); padding-top: var(--s6); }

  .pain-grid,
  .cases-grid-three,
  .pricing,
  .contact-options,
  .outcome-grid,
  .case-numbers,
  .principle-grid,
  .comparison-grid,
  .os-build,
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid { gap: var(--s6); }

  /* Mobil: Zeit links, Dauer rechts in einer Zeile, Inhalt darunter */
  .method-step { grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); padding-left: var(--s3); }
  .method-num { grid-column: 1; grid-row: 1; padding-top: 0; }
  .method-duration { grid-column: 2; grid-row: 1; text-align: right; padding-top: 0; }
  .method-duration strong { display: inline; margin-right: var(--s1); }
  .method-content { grid-column: 1 / -1; }
  .teaser-row { grid-template-columns: 1fr; gap: var(--s6); }
  .belief { grid-template-columns: 44px 1fr; gap: var(--s4); }
  .contact-direct dl { grid-template-columns: 1fr; gap: var(--s1); }
  .contact-direct dd { margin-bottom: var(--s3); }
  .os-bridge { padding: var(--s5); }
  .layer { padding: var(--s6) 0 var(--s6) var(--s3); }
  .foundation-note { max-width: none; }
}

/* Formular-Hinweis (Audit C5) und Bild-Slots Personenkarten (Audit C7), 2026-09-08 */
.form-note { margin-top: var(--s4); font-size: var(--fs-small); line-height: 1.5; color: var(--muted-dark); }
.form-note a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.form-note a:hover, .form-note a:focus-visible { color: var(--ink); text-decoration-thickness: 2px; }
.person-photo { margin: 0 0 var(--s5) 0; aspect-ratio: 3 / 4; max-width: 240px; background: var(--cream); border: 1px solid var(--border-dark); border-radius: var(--r-md); overflow: hidden; }
.person-photo:empty { display: none; }
.person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Stimmen: Referenz-Zitate, Haarlinie statt Kasten wie .pain-card (2026-09-08) */
.voice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s7); margin-top: var(--s7); }
.voice-card { margin: 0; border-top: 2px solid var(--line-strong); padding-top: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.dark .voice-card { border-top-color: var(--border); }
.voice-quote { margin: 0; font-size: var(--fs-md); font-weight: 300; line-height: var(--lh-snug); letter-spacing: var(--ls-title); }
.voice-source { font-size: var(--fs-small); color: var(--muted-dark); }
.voice-source strong { font-weight: 500; color: var(--ink); }
.dark .voice-source { color: var(--muted); } .dark .voice-source strong { color: var(--cream); }
@media (max-width: 900px) { .voice-grid { grid-template-columns: 1fr; gap: var(--s6); } }

/* Kontaktseite neu (Entscheid Michel 2026-09-08): Nutzen-Zeilen, Auswahl-Kacheln, Formular-Raster */
.benefit-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); margin-top: var(--s7); }
.benefit { border-top: 2px solid var(--line-strong); padding-top: var(--s5); }
.benefit strong { display: block; font-size: var(--fs-md); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--ls-title); margin-bottom: var(--s3); }
.benefit p { color: var(--muted-dark); font-size: var(--fs-small); line-height: 1.5; }
.section-outro a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.section-outro a:hover, .section-outro a:focus-visible { color: var(--ink); text-decoration-thickness: 2px; }
.contact-form-block { margin-top: 0; max-width: 64ch; }
.contact-form-block .section-title { margin-bottom: var(--s6); }
.choice-group { border: none; display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.choice-group legend { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted-dark); margin-bottom: var(--s3); }
.choice { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; padding: var(--s3) var(--s4); background: var(--cream-2); border: 1px solid var(--border-dark); border-radius: var(--r-sm); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.choice input { margin: .35em 0 0 0; accent-color: var(--accent-strong); }
.choice span { font-size: var(--fs-small); color: var(--muted-dark); line-height: 1.5; }
.choice span strong { display: block; color: var(--ink); font-weight: 500; font-size: var(--fs-body); }
.choice:hover { border-color: var(--line-strong); }
.choice:has(input:checked) { border-color: var(--accent-strong); background: var(--cream); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.form-row .optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted-dark); margin-left: var(--s2); }
.form-row textarea::placeholder, .form-row input::placeholder { color: rgba(18, 12, 30, 0.45); }
.contact-line { font-size: var(--fs-small); color: var(--muted-dark); }
.contact-line a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { .benefit-list { grid-template-columns: 1fr; gap: var(--s6); } .form-grid { grid-template-columns: 1fr; } }
.format-lines { margin-top: var(--s7); max-width: 64ch; }
.format-line { display: grid; grid-template-columns: 9em 1fr auto; gap: var(--s4); align-items: baseline; padding: var(--s4) 0; border-top: 1px solid var(--border-dark); font-size: var(--fs-small); color: var(--muted-dark); }
.format-line:last-of-type { border-bottom: 1px solid var(--border-dark); }
.format-line strong { color: var(--ink); font-weight: 500; font-size: var(--fs-body); }
.format-price { color: var(--ink); white-space: nowrap; }
.format-lines .btn-ghost-dark { margin-top: var(--s5); }
@media (max-width: 600px) { .format-line { grid-template-columns: 1fr; gap: var(--s1); } }