/* ==========================================================================
   Philip Dingeldey – Personal Training & Online Coaching
   Farbschema: BG #161617 / Sektionen #262A2D / Text #E6E8EA / Akzent #FFB109
   ========================================================================== */

/* ----- Fonts (lokal gehostet, DSGVO-konform) ----- */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-v13-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-v13-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-v13-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin_latin-ext-700.woff2') format('woff2');
}

/* ----- Design Tokens ----- */
:root {
  --bg: #161617;
  --surface: #262A2D;
  --surface-soft: #1d2023;
  --surface-raised: #2c3134;
  --text: #E6E8EA;
  --text-muted: #aab1b7;
  --text-faint: rgba(230, 232, 234, 0.45);
  --accent: #FFB109;
  --accent-hover: #ffc23d;
  --accent-ink: #161617;
  --accent-glow: rgba(255, 177, 9, 0.14);
  --border: rgba(230, 232, 234, 0.10);
  --radius: 16px;
  --radius-sm: 10px;
  --font-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', 'Segoe UI', Arial, sans-serif;
  --container: 1180px;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.40);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.28);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* z-index-Skala */
  --z-preloader: 300;
  --z-grain: 100;
  --z-header: 50;
  --z-menu: 48;
  --z-sticky: 45;
  --z-chapter: 44;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 92px; scrollbar-gutter: stable; }

/* Skip-Link: unsichtbar, bis er per Tab fokussiert wird */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 400;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* Nur für Screenreader sichtbar */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;  /* Fallback iOS 15 */
  overflow-x: clip;
}

/* iOS: kein graues Tap-Highlight auf dem dunklen Design */
a, button, summary { -webkit-tap-highlight-color: transparent; }

::selection { background: var(--accent); color: var(--accent-ink); }

img, video { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  /* Notch-Geräte im Landscape (viewport-fit=cover): Inhalt aus der Aussparung halten */
  padding-inline: max(clamp(1.25rem, 4vw, 2.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
}

/* ----- Typografie ----- */
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.06;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin-top: 0.65rem;
  background: linear-gradient(90deg, var(--accent), rgba(255, 177, 9, 0.25));
  border-radius: 3px;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
}

.accent { color: var(--accent); }

.kicker {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-size: 0.98rem;
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
.kicker-center { justify-content: center; }

.statement {
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1.9rem;
  padding-left: 1.1rem;
  border-left: 4px solid var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}

.btn-arrow { width: 1.15em; height: 1.15em; transition: transform 0.2s ease; }
@media (hover: hover) {
  .btn:hover .btn-arrow { transform: translateX(4px); }
}

.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  color: var(--accent-ink);
  padding: 0.9rem 1.8rem;
  font-size: 1.15rem;
  box-shadow: 0 6px 22px rgba(255, 177, 9, 0.28);
}
@media (hover: hover) {
  .btn-primary:hover {
    background: var(--accent-hover);
    color: var(--accent-ink);
    box-shadow: 0 10px 30px rgba(255, 177, 9, 0.42);
  }
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn-primary.sheen::before { animation: sheen 1.1s ease 0.35s 1; }
@keyframes sheen {
  from { left: -80%; }
  to   { left: 160%; }
}

.btn-lg { padding: 1.1rem 2.3rem; font-size: 1.3rem; }
.btn-nav { padding: 0.55rem 1.15rem; font-size: 1rem; box-shadow: none; gap: 0.4rem; }

.cta-note {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* ----- Header ----- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.site-header.scrolled {
  background: rgba(22, 22, 23, 0.92);
  -webkit-backdrop-filter: blur(12px); /* Safari < 18 */
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
}

.brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  transition: color 0.2s ease;
}
.brand:hover { color: var(--accent); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Burger */
.menu-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.burger {
  position: relative;
  display: block;
  width: 30px;
  height: 14px;
}
.burger i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out), top 0.35s var(--ease-out), width 0.25s ease;
}
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 12px; width: 70%; margin-left: auto; }
.menu-toggle:hover .burger i:nth-child(2) { width: 100%; }
body.menu-open .burger i:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.menu-open .burger i:nth-child(2) { top: 6px; width: 100%; transform: rotate(-45deg); }

/* ----- Fullscreen-Menü ----- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(255, 177, 9, 0.08), transparent 60%),
    var(--surface-soft);
  display: flex;
  flex-direction: column;
  /* "safe" verhindert, dass bei kleinen Höhen (Landscape-Phones) der obere
     Teil unerreichbar überläuft; Fallback für ältere Browser: flex-start */
  justify-content: flex-start;
  justify-content: safe center;
  gap: 3rem;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.65s var(--ease-out), visibility 0s linear 0.65s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.menu-open { overflow: hidden; }
body.menu-open .menu-overlay {
  visibility: visible;
  clip-path: inset(0 0 0% 0);
  transition: clip-path 0.65s var(--ease-out);
}

.menu-nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 5rem;
}
.menu-nav a {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.5s ease, transform 0.5s var(--ease-out), color 0.2s ease;
}
.menu-nav a:hover { color: var(--accent); }
body.menu-open .menu-nav a { opacity: 1; transform: none; }
body.menu-open .menu-nav a:nth-child(1) { transition-delay: 0.12s; }
body.menu-open .menu-nav a:nth-child(2) { transition-delay: 0.18s; }
body.menu-open .menu-nav a:nth-child(3) { transition-delay: 0.24s; }
body.menu-open .menu-nav a:nth-child(4) { transition-delay: 0.30s; }
body.menu-open .menu-nav a:nth-child(5) { transition-delay: 0.36s; }
body.menu-open .menu-nav a:nth-child(6) { transition-delay: 0.42s; }

.menu-num {
  font-size: 0.4em;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.15em;
}

.menu-cta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.48s, transform 0.5s var(--ease-out) 0.48s;
}
body.menu-open .menu-cta { opacity: 1; transform: none; }

.menu-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  padding-bottom: 3rem;
  opacity: 0;
  transition: opacity 0.5s ease 0.55s;
}
body.menu-open .menu-foot { opacity: 1; }

/* ----- Kapitel-Indikator ----- */
.chapter-nav {
  position: fixed;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-chapter);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chapter-nav a {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}
.chapter-nav a::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(230, 232, 234, 0.4);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.chapter-nav a:hover::before { background: var(--text-muted); }
.chapter-nav a.active::before {
  background: var(--accent);
  transform: scale(1.35);
}
@media (max-width: 1100px) { .chapter-nav { display: none; } }

/* ==========================================================================
   Cinematic Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;   /* Fallback für Browser ohne svh (iOS < 15.4) */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-block: 7.5rem 3rem;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: grayscale(35%) contrast(1.05) brightness(0.9);
  transform: scale(1.08);
  transition: transform 2.8s var(--ease-out);
}
body.loaded .hero-video { transform: scale(1); }

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 500px at 80% 0%, rgba(255, 177, 9, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(22, 22, 23, 0.72) 0%, rgba(22, 22, 23, 0.35) 45%, rgba(22, 22, 23, 0.94) 100%);
}

.hero-content {
  position: relative;
  width: 100%;
}

.hero-title { margin-top: 1rem; }
.ht-big {
  font-size: clamp(4.2rem, 14.5vw, 13.5rem);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.ht-outline {
  color: transparent;
  -webkit-text-stroke: 2px rgba(230, 232, 234, 0.85);
}
.ht-sub {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.hero-lead {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: 1.6rem;
}

/* Flow-Linie: wiederkehrendes Stilmittel (Micro-Label + Linie + wandernder Punkt),
   abgeleitet vom Scroll-Hinweis im Hero */
.flow-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.flow-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.flow-track {
  position: relative;
  width: 1px;
  height: 64px;
  background: rgba(230, 232, 234, 0.18);
  overflow: hidden;
}
.flow-track i {
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: var(--accent);
  animation: scroll-drop 2.6s var(--ease-out) infinite;
}
/* Platzierungs-Varianten */
.flow-after-bridge { margin-top: 2.5rem; }
.manifest .flow-line { margin-bottom: clamp(2rem, 4vw, 3rem); }
.cta-final .flow-line { margin-bottom: 2rem; }

/* Scroll-Hinweis */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.scroll-hint-line {
  position: relative;
  width: 1px;
  height: 64px;
  background: rgba(230, 232, 234, 0.18);
  overflow: hidden;
}
.scroll-hint-line i {
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: var(--accent);
  animation: scroll-drop 2s var(--ease-out) infinite;
}
@keyframes scroll-drop {
  0%   { top: -40%; }
  60%, 100% { top: 110%; }
}

/* ----- Stat-Strip ----- */
.stat-strip {
  border-block: 1px solid var(--border);
  background: var(--surface-soft);
}
.stat-strip-inner {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.stat-strip-inner li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.7rem clamp(0.5rem, 2vw, 1.6rem);
}
.stat-strip-inner li + li { border-left: 1px solid var(--border); }
.stat-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 2.2ch;
}
.stat-label {
  font-size: 0.93rem;
  line-height: 1.35;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ==========================================================================
   Sektionen
   ========================================================================== */
.section {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
.section-alt {
  background:
    linear-gradient(180deg, rgba(255, 177, 9, 0.025), transparent 260px),
    var(--surface-soft);
}

.section-num {
  position: absolute;
  top: clamp(1rem, 3vw, 2.5rem);
  right: clamp(0.5rem, 3vw, 3rem);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(7rem, 16vw, 14rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230, 232, 234, 0.07);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.section-bridge {
  margin-top: 3rem;
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  max-width: 40ch;
  margin-inline: auto;
  text-wrap: balance;
}
.section-bridge strong { color: var(--accent); font-weight: 700; }

/* ----- Manifest (Wort-für-Wort) ----- */
.manifest {
  padding-block: clamp(6rem, 14vw, 11rem);
  background: var(--bg);
}
.manifest-text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.28;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  max-width: 22ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
.manifest-text .w { color: var(--text-faint); transition: color 0.35s ease; }
.manifest-text .w.lit { color: var(--text); }
.manifest-text .wa.lit { color: var(--accent); }

/* ----- Interlude ----- */
.interlude {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56vh;
  padding-block: clamp(4rem, 8vw, 6rem);
  background: var(--bg);
  overflow: hidden;
}
.interlude-text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(4rem, 13vw, 12rem);
  line-height: 0.95;
  text-transform: uppercase;
  text-align: center;
}
.interlude-text .outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
}
.interlude-small {
  display: block;
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.4em;
}

/* ----- Grids & Cards ----- */
.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.1rem 1.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 100%;
  height: 3px;
  background: var(--accent);
  transition: right 0.3s ease;
}
@media (hover: hover) {
  .card:hover {
    border-color: rgba(255, 177, 9, 0.4);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
  }
  .card:hover::before { right: 0; }
}
.card p { color: var(--text-muted); }

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(255, 177, 9, 0.12);
  border: 1px solid rgba(255, 177, 9, 0.28);
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.icon-chip .icon { width: 26px; height: 26px; }

/* Akzent-Ziffern auf Story-Cards (statt Icon-Chips – Ziffernsprache
   zieht sich durch Menü, Sektionsnummern und Steps) */
.card-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.card-service .card-lead {
  color: var(--text);
  font-weight: 500;
  font-size: 1.08rem;
  margin-bottom: 1.4rem;
}

/* Online-Coaching als einziges großes Angebot */
.offer {
  max-width: 860px;
  padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.7rem, 4vw, 2.8rem);
}
.offer .card-lead { max-width: 58ch; }
.check-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
}
.offer-cta { margin-top: 1.9rem; }

/* Personal Training als Randnotiz */
.pt-note {
  margin-top: 1.6rem;
  max-width: 66ch;
  color: var(--text-muted);
  font-size: 0.98rem;
}
.pt-note strong { color: var(--text); }

@media (max-width: 640px) {
  .check-cols { grid-template-columns: 1fr; }
}

/* Primäres Angebot (Online Coaching) dezent hervorheben */
.card-primary {
  border-color: rgba(255, 177, 9, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 177, 9, 0.05), transparent 40%),
    var(--surface);
}

/* Scroll-gezeichnete Akzentlinie an der linken Kartenkante –
   Fortsetzung des Flow-Linien-Stilmittels (Fortschritt via --line-p aus JS) */
.card-service { --line-p: 0; }
.card-service::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), rgba(255, 177, 9, 0.2));
  transform: scaleY(var(--line-p));
  transform-origin: top;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .card-service::after { transform: none; }
}
.no-js .card-service::after { transform: none; }

.icon { width: 22px; height: 22px; flex-shrink: 0; }

/* ----- Check-Listen ----- */
.check-list { list-style: none; display: grid; gap: 0.7rem; }
.check-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--text-muted);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.26em;
  width: 1.1em;
  height: 1.1em;
  background-color: var(--accent);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
}

/* ----- Split-Layouts ----- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split-text p + p { margin-top: 1.15rem; }
.split-text p { color: var(--text-muted); }
.split-text strong { color: var(--text); }
.split-text .statement, .section .statement { color: var(--text); }

.split-about { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

/* ==========================================================================
   Pinned Steps – Der Weg
   ========================================================================== */
.pin-section { position: relative; background: var(--bg); }

.pin-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
}

.pin-big {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(5rem, 11vw, 10rem);
  line-height: 1;
  color: var(--accent);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.pin-total {
  font-size: 0.25em;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}
/* Vertikale Fortschrittslinie – formgleich mit dem Flow-Linien-Stilmittel */
.pin-bar {
  width: 2px;
  height: 150px;
  background: rgba(230, 232, 234, 0.14);
  margin-top: 1.6rem;
  overflow: hidden;
}
.pin-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
}

.pin-slides { list-style: none; position: relative; }
.pin-slide h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.pin-slide p { color: var(--text-muted); font-size: 1.1rem; max-width: 46ch; }
.pin-slide-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

/* Mobile / reduzierte Bewegung: einfache Liste */
.pin-left { display: none; }
.pin-grid { grid-template-columns: 1fr; }
.pin-section { padding-block: clamp(4rem, 9vw, 7rem); }
.pin-slide + .pin-slide { margin-top: 2.25rem; }

/* Desktop + Motion erlaubt: gepinnte Sequenz.
   Ohne Motion bleibt bewusst die einspaltige statische Liste (wie mobil) –
   ein Zweispalter mit leerem Zähler wirkt kaputt. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .pin-left { display: block; }
  .pin-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .pin-section { height: 380vh; padding-block: 0; }
  .pin-sticky {
    position: sticky;
    top: 0;
    height: 100vh;   /* Fallback */
    height: 100svh;  /* iPad: Toolbar nicht überdecken lassen */
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .pin-slide {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(calc(-50% + 44px));
    opacity: 0;
    /* opacity statt visibility: bleibt für Screenreader lesbar */
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.55s var(--ease-out);
  }
  .pin-slide.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
  }
  .pin-slide + .pin-slide { margin-top: 0; }
  .pin-slide-num { display: none; }
}

/* ----- Sektions-Intro & Alleingänge (Cross-Liste) ----- */
.section-intro {
  color: var(--text-muted);
  font-size: 1.15rem;
  max-width: 62ch;
  margin-bottom: 2.25rem;
}

.split-luecke { align-items: center; }

.attempts-title {
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 1.1rem;
}
.cross-list { list-style: none; display: grid; gap: 0.85rem; }
.cross-list li {
  position: relative;
  padding: 0.9rem 1.2rem 0.9rem 3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 1.04rem;
  transition: border-color 0.2s ease;
}
@media (hover: hover) {
  .cross-list li:hover { border-color: rgba(255, 177, 9, 0.35); }
}
.cross-list li::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.15em;
  height: 1.15em;
  background-color: var(--accent);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>') center / contain no-repeat;
}

/* ----- System-Sektion ----- */
.system-text { margin-top: clamp(2rem, 4vw, 3rem); }

/* ----- Beweis: Stimmen & Transformationen ----- */
.proof {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--border);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}
.proof-title {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
/* Testimonials – ruhig und körperlos, Namen als Anker */
.testimonial-grid { margin-top: 1.75rem; }
.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.7rem 1.6rem;
}
.testimonial::before {
  content: "\201E";
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 0.4;
  height: 1.4rem;
  color: var(--accent);
  opacity: 0.6;
}
.testimonial blockquote {
  flex: 1;
  color: var(--text-muted);
  font-size: 1.02rem;
  margin-top: 0.9rem;
  max-width: 60ch;
}
.testimonial figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.t-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.t-meta {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ----- Foto-Rahmen & Platzhalter ----- */
.photo-frame { position: relative; border-radius: var(--radius); }
.photo-frame::before {
  content: "";
  position: absolute;
  inset: -14px 14px 14px -14px;
  border: 2px solid rgba(255, 177, 9, 0.35);
  border-radius: var(--radius);
  pointer-events: none;
}
.photo-frame::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 92px;
  height: 92px;
  border-right: 4px solid var(--accent);
  border-bottom: 4px solid var(--accent);
  border-radius: 0 0 var(--radius) 0;
  pointer-events: none;
}
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background:
    linear-gradient(160deg, rgba(255, 177, 9, 0.10), transparent 55%),
    var(--surface);
  border: 1px dashed rgba(230, 232, 234, 0.22);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  box-shadow: var(--shadow-soft);
}
.ph-icon { width: 48px; height: 48px; opacity: 0.55; }
.photo-portrait { aspect-ratio: 4 / 5; }
.photo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  filter: saturate(0.95) contrast(1.03);
}

/* Automatische Foto-Rotation (Crossfade) */
.photo-stack {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.photo-stack .photo-img {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.photo-stack .photo-img.active { opacity: 1; }

/* Dot-Navigation unter dem Foto – gleicher Stil wie die Kapitel-Punkte */
.photo-dots {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 0.75rem;
}
.photo-dots button {
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.photo-dots button::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(230, 232, 234, 0.22);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.photo-dots button:hover::before { background: var(--text-muted); }
.photo-dots button.active::before {
  background: var(--accent);
  transform: scale(1.35);
}

.facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 1.6rem;
}
.facts li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.fact-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--accent);
  line-height: 1;
}
/* Wort-Facts (Persönliches) statt Zahlen */
.fact-word {
  font-size: clamp(0.95rem, 2.2vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Kleine Phones: Facts untereinander als Zeilen statt enger 3er-Spalten */
@media (max-width: 430px) {
  .facts { grid-template-columns: 1fr; }
  .facts li {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.8rem 1rem;
    text-align: left;
  }
}
.fact-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ----- CTA-Finale ----- */
.section-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 13vw, 11rem);
  background:
    radial-gradient(800px 420px at 50% 0%, rgba(255, 177, 9, 0.13), transparent 65%),
    var(--bg);
}
/* Video-Hintergrund im Finale – gleiche Behandlung wie im Hero */
.cta-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: grayscale(35%) contrast(1.05) brightness(0.85);
}
.cta-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 420px at 50% 0%, rgba(255, 177, 9, 0.10), transparent 65%),
    linear-gradient(180deg,
      var(--bg) 0%,
      rgba(22, 22, 23, 0.68) 26%,
      rgba(22, 22, 23, 0.74) 74%,
      var(--bg) 100%);
}

.cta-final { position: relative; text-align: center; max-width: 980px; }
.cta-huge {
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.cta-final h2::after {
  margin-inline: auto;
  width: 110px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.cta-final .cta-text {
  color: var(--text-muted);
  font-size: 1.15rem;
  margin-bottom: 2.6rem;
  max-width: 62ch;
  margin-inline: auto;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.75rem;
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  font-weight: 500;
}
.contact-link .icon { color: var(--accent); }
a.contact-link:hover { color: var(--accent); }

/* ----- FAQ ----- */
.faq-wrap { max-width: 860px; }
.faq-list { display: grid; gap: 0.85rem; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease;
}
.faq-item[open] { border-color: rgba(255, 177, 9, 0.35); }
@media (hover: hover) {
  .faq-item:hover { border-color: rgba(255, 177, 9, 0.35); }
}
.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 3.25rem 1.15rem 1.4rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--accent);
  transform: translateY(-50%);
  transition: transform 0.25s var(--ease-out);
}
.faq-item summary::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(0deg); }
.faq-item p {
  padding: 0 1.4rem 1.25rem;
  color: var(--text-muted);
  max-width: 62ch;
}

/* ----- CTA-Wiederholung (nach FAQ) ----- */
.cta-repeat { padding-block: clamp(4rem, 8vw, 6rem); }
.cta-repeat .cta-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cta-repeat-title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  margin-bottom: 2rem;
}

/* ----- Sticky CTA (Mobile) ----- */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(22, 22, 23, 0.94);
  -webkit-backdrop-filter: blur(10px); /* Safari < 18 */
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  transform: translateY(105%);
  transition: transform 0.3s ease;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn { width: 100%; font-size: 1.1rem; padding-block: 0.85rem; }

/* ----- Rechtsseiten (Impressum / Datenschutz) ----- */
.legal-page main { padding-top: 7rem; }
.legal { max-width: 800px; }
.legal h1 {
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.legal h2 {
  font-size: 1.5rem;
  text-transform: none;
  letter-spacing: 0;
  margin: 2.5rem 0 1rem;
}
.legal h2::after { display: none; }
.legal h3 {
  font-size: 1.15rem;
  margin: 1.75rem 0 0.6rem;
  color: var(--text);
}
.legal p, .legal li { color: var(--text-muted); }
.legal p + p { margin-top: 0.9rem; }
.legal ul { padding-left: 1.4rem; margin: 0.9rem 0; display: grid; gap: 0.6rem; }
.legal a { text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.legal strong { color: var(--text); }
.legal-source { margin-top: 3rem; font-size: 0.9rem; }
.legal-back { color: var(--text-muted); font-weight: 500; }
.legal-back:hover { color: var(--accent); }

@media (max-width: 430px) {
  .legal-back { white-space: nowrap; font-size: 0.9rem; }
  .legal-page .brand { font-size: 1.25rem; }
}
@media (max-width: 640px) {
  /* Rechtsseiten/404 haben keine Sticky-CTA-Leiste – kein Platzhalter nötig */
  .legal-page .footer-inner { padding-bottom: 1rem; }
}

/* ----- Footer ----- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 2rem;
  background: var(--bg);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--border);
}
.footer-brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}
.footer-contact .contact-link { padding-block: 0.5rem; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.footer-inner nav { display: flex; gap: 1.5rem; }
.footer-inner nav a { color: var(--text-muted); }
.footer-inner nav a:hover { color: var(--accent); }

/* ==========================================================================
   Animationen: Reveal, Hero-Intro, Preloader, Grain
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.grid .reveal.visible:nth-child(2) { transition-delay: 0.08s; }
.grid .reveal.visible:nth-child(3) { transition-delay: 0.16s; }
.grid .reveal.visible:nth-child(4) { transition-delay: 0.24s; }

/* Masken-Reveal über inneren Slide-Span (JS wrappt den Inhalt) –
   clip-path als Basiszustand war mit dem IntersectionObserver unzuverlässig */
.reveal-mask { transform: none; overflow: hidden; }
.reveal-mask .mask-in {
  display: block;
  transform: translateY(112%);
  transition: transform 0.8s var(--ease-out);
}
.reveal-mask.visible .mask-in { transform: none; }

/* Hero-Zeilen */
h1 .line { display: block; overflow: hidden; }
h1 .line-in {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 0.95s var(--ease-out);
}
body.loaded h1 .line:nth-child(1) .line-in { transition-delay: 0.10s; }
body.loaded h1 .line:nth-child(2) .line-in { transition-delay: 0.20s; }
body.loaded h1 .line:nth-child(3) .line-in { transition-delay: 0.32s; }
body.loaded h1 .line-in { transform: translateY(0); }

.hero-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
body.loaded .hero-fade { opacity: 1; transform: none; }
body.loaded .hero-content .kicker { transition-delay: 0.05s; }
body.loaded .hero-bottom-left { transition-delay: 0.55s; }
body.loaded .scroll-hint { transition-delay: 0.75s; }

/* ----- Preloader ----- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.preloader.done { transform: translateY(-100%); }
.preloader-name {
  display: block;
  overflow: hidden;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.preloader-name-in {
  display: inline-block;
  transform: translateY(110%);
}
body.loading .preloader-name-in {
  animation: intro-name 0.9s var(--ease-out) 0.15s forwards;
}
@keyframes intro-name { to { transform: translateY(0); } }

.preloader-count {
  position: absolute;
  right: clamp(1.5rem, 5vw, 4rem);
  bottom: clamp(1rem, 4vw, 2.5rem);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 177, 9, 0.55);
}
body.loading { overflow: hidden; }
html.no-js .preloader { display: none; }

/* ----- Film-Grain-Overlay ----- */
body::after {
  content: "";
  position: fixed;
  inset: -120px;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-38px, 22px, 0); }
  50%  { transform: translate3d(22px, -30px, 0); }
  75%  { transform: translate3d(-14px, -18px, 0); }
  100% { transform: translate3d(30px, 26px, 0); }
}

/* ----- Reduzierte Bewegung / No-JS ----- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-mask { opacity: 1; transform: none; transition: none; }
  .reveal-mask .mask-in { transform: none; transition: none; }
  h1 .line-in { transform: none; transition: none; }
  .hero-fade { opacity: 1; transform: none; transition: none; }
  .preloader { display: none; }
  body::after { animation: none; }
  .scroll-hint-line i { animation: none; top: 30%; }
  .hero-video { transform: none; transition: none; }
  .manifest-text .w { color: var(--text); }
  .manifest-text .wa { color: var(--accent); }
  * { animation: none !important; transition-duration: 0.01ms !important; }
}
.no-js .reveal, .no-js .reveal-mask { opacity: 1; transform: none; }
.no-js h1 .line-in { transform: none; }
.no-js .hero-fade { opacity: 1; transform: none; }
.no-js .hero-video { transform: none; }
.no-js .manifest-text .w { color: var(--text); }
.no-js .manifest-text .wa { color: var(--accent); }
.no-js .menu-toggle { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .grid-3 { grid-template-columns: 1fr; }
  .split, .split-about, .split-even { grid-template-columns: 1fr; }
  .about-media { max-width: 420px; }
  .stat-strip-inner { grid-template-columns: 1fr; }
  .stat-strip-inner li + li { border-left: 0; border-top: 1px solid var(--border); }
  .hero-bottom { flex-direction: column; align-items: flex-start; }
  .scroll-hint { display: none; }
}

@media (max-width: 820px) {
  .sticky-cta { display: block; }
  /* Grain-Overlay auf Mobilgeräten: GPU-/Akku-Kosten ohne sichtbaren Mehrwert */
  body::after { display: none; }
}

@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .btn-lg { width: 100%; padding-inline: 1rem; }
  .footer-inner { flex-direction: column; text-align: center; padding-bottom: 4.5rem; }
  .header-actions .btn-nav { display: none; }
  .hero { padding-top: 6rem; }
}

/* Kurze Viewports (kleine Phones, Landscape): Hero kompakter,
   damit der CTA above the fold bleibt */
@media (max-height: 720px) {
  .hero { padding-block: 5.5rem 2rem; }
  .hero-title { margin-top: 0.25rem; }
  .ht-sub { margin-top: 0.9rem; }
  .hero-bottom { margin-top: 1.25rem; }
  .hero-lead { margin-bottom: 1.1rem; }
}
@media (max-height: 720px) and (max-width: 640px) {
  .ht-big { font-size: clamp(3.4rem, 13vw, 5rem); }
  .hero-lead { font-size: 1.02rem; }
  .hero .cta-note { display: none; }
}

/* Landscape-Phones (breit, aber sehr niedrig): CTA muss in den Fold */
@media (max-height: 520px) {
  .hero { padding-block: 4.5rem 1.5rem; }
  .ht-big { font-size: clamp(2.8rem, 11vh, 4.2rem); }
  .ht-sub { font-size: 1.1rem; margin-top: 0.5rem; }
  .hero-lead { font-size: 1rem; margin-bottom: 0.9rem; }
  .hero .cta-note { display: none; }
}