/* ============================================================
   FAKTOR K — DESIGN-SYSTEM
   Eine Schrift (Epilogue), acht Schriftstufen, eine Abstands-
   leiter, drei Radien, ein Kartenbauteil, ein Bewegungsmuster.
   Stand 23.08.2026
   ============================================================ */

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

:root {
  /* Farbe */
  --ink:            #0d0f0e;
  --ink-2:          #1a1d1b;
  --cream:          #f7f4ee;
  --cream-2:        #ede7db;
  --accent:         #7fd6a8;
  --accent-strong:  #4eb986;

  --muted:          rgba(247, 244, 238, 0.62);
  --muted-dark:     rgba(13, 15, 14, 0.62);
  --border:         rgba(247, 244, 238, 0.14);
  --border-dark:    rgba(13, 15, 14, 0.14);
  --line-strong:    rgba(13, 15, 14, 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, 6vw, 84px);
  --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:   4px;
  --r-md:   16px;
  --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 {
  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, laut assets.md */
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); }
.final-cta { --focus: var(--ink); }

/* ---------- 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);
}
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);
}
.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: 500; color: var(--accent-strong); }
.dark .hl, .hero .hl { color: var(--accent); }
.final-cta .hl { color: var(--ink); }

.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); }

/* 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(13, 15, 14, 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);
}

.logo {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: var(--ls-title);
  color: var(--cream);
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
/* Der Punkt ist ein Satzpunkt, kein Kreis (assets.md) */
.logo::after { content: "."; color: var(--accent); font-weight: 500; }
.main-footer .logo { font-size: 20px; }

.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);
}

.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); }
.final-cta .btn-primary { background: var(--ink); color: var(--accent); border-color: var(--ink); }

/* 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(247, 244, 238, 0.09); }
.btn-ghost-dark::before { background: rgba(13, 15, 14, 0.05); }


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

.hero {
  background: var(--ink);
  color: var(--cream);
  padding: var(--s9) 0 var(--s10);
  position: relative;
  overflow: hidden;
}
.hero-small { padding: var(--s8) 0; }
.hero .container { position: relative; z-index: 1; }

.hero-bg-word {
  position: absolute;
  bottom: -2vw;
  right: -1vw;
  font-size: clamp(120px, 17vw, 240px);
  font-weight: 200;
  color: transparent;
  -webkit-text-stroke: 1px rgba(127, 214, 168, 0.10);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--accent);
  margin-bottom: var(--s6);
}
.hero-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.55em;
}

.hero-sub { font-size: var(--fs-lead); color: var(--muted); margin-bottom: var(--s7); }
.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); margin-top: var(--s2); line-height: 1.45; }

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

section { 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(127, 214, 168, 0.07);
}
.contact-card.featured {
  border-color: var(--accent-strong);
  background: rgba(127, 214, 168, 0.10);
}

/* 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); }
.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 ---------- */

.layers { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s7); }
.layer {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s6) var(--s7);
  display: grid;
  grid-template-columns: minmax(190px, 0.85fr) 2fr;
  gap: var(--s7);
  align-items: start;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}
.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);
}
.layer-items { display: flex; flex-wrap: wrap; gap: var(--s2); }
.layer-item {
  font-size: var(--fs-small);
  color: var(--cream);
  background: rgba(127, 214, 168, 0.08);
  border: 1px solid rgba(127, 214, 168, 0.22);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  line-height: 1.6;
}

.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(127, 214, 168, 0.06);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.dark .foundation-note { color: var(--cream); border-left-color: var(--accent); background: rgba(127, 214, 168, 0.05); }

/* ---------- 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(127, 214, 168, 0.06);
  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-pill);
  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; gap: var(--s2); }
.teaser-phase {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--cream);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
}
.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(247, 244, 238, 0.04); border-color: var(--border); }
.comparison-card-positive { background: rgba(127, 214, 168, 0.06); border-color: var(--accent); }
.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(247, 244, 238, 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(3, 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; }

.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 ---------- */

.final-cta { background: var(--accent); color: var(--ink); padding: var(--s9) 0; }
.final-cta h2 { max-width: 16ch; }
.final-cta p {
  font-size: var(--fs-lead);
  margin-bottom: var(--s6);
  max-width: var(--measure);
  color: rgba(13, 15, 14, 0.78);
}

footer.main-footer { background: var(--ink); color: var(--muted); padding: var(--s8) 0 var(--s6); }
.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; }

  /* Das grosse Hintergrundwort schiebt sich langsam herein */
  .hero-bg-word { animation: enter-word 1400ms var(--ease) both; }
}
@keyframes enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes enter-word {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: none; }
}

/* Rueckmeldung nur auf Zeigegeraeten */
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { opacity: 1; color: var(--accent); }
  .cta-btn:hover { background: var(--accent-strong); }
  .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
  .final-cta .btn-primary:hover { background: #000; border-color: #000; }
  .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(127, 214, 168, 0.38); background: #1e2220; }
  .btn-ghost:hover::before, .btn-ghost-dark:hover::before { transform: scaleX(1); }
  .layer:hover::after { transform: scaleY(1); }
  .layer:hover { border-color: rgba(127, 214, 168, 0.35); }
  .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: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-bg-word,
  .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); }
  .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;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(13, 15, 14, 0.98);
    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-bg-word { display: none; }
  .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); }

  .method-step { grid-template-columns: 1fr; gap: var(--s3); padding-left: var(--s3); }
  .method-duration { grid-column: 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, .layer { padding: var(--s5); }
  .foundation-note { max-width: none; }
}