/* ══════════════════════════════════════════════════════════
   effectiv · Kampagne "8 Wochen beitragsfrei" 2026
   Eigenständige Landingpage auf Basis des effectiv CD
   ══════════════════════════════════════════════════════════ */

/* ── FONTS ───────────────────────────────────────────────── */
@font-face {
  font-family: 'Montserrat';
  /* Nur WOFF2 (29 statt 78 KB). Kein TTF-Rückfall: jede Engine, die
     Variable Fonts beherrscht, kann auch WOFF2 — der Rückfall brachte
     keine zusätzliche Abdeckung, wurde aber mit angefragt.          */
  src: url('../fonts/Montserrat-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  /* CD-Farben */
  --or:        #f39200;   /* effectiv Orange */
  --or-txt:    #f39200;   /* Primärfarbe, auf Kundenwunsch auch für Kleintext
                             auf Weiß. Liegt dort bei 2,4:1 und damit unter
                             WCAG AA (4,5:1) — siehe README, Abschnitt 13.  */

  --ink:       #0e0e0e;   /* Kampagnen-Schwarz */

  --paper:     #ffffff;
  --paper-3:   #e4e2de;   /* Haarlinie — trägt die Gliederung auf Weiß */
  --txt:       #55534f;

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-o: cubic-bezier(.22, .61, .36, 1);

  /* Layout */
  --w: 1240px;
  --gut: clamp(1.15rem, 5vw, 4.5rem);
  --r: 4px;

  /* Typo-Rhythmus */
  --hl-track: -.022em;
  --hl-lh: .87;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-size: clamp(.92rem, .35vw + .84rem, 1.02rem);
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
fieldset { border: 0; }
ol, ul { list-style: none; }

::selection { background: var(--or); color: #111; }

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

.skip {
  position: absolute; left: 50%; top: -100px; z-index: 500;
  transform: translateX(-50%);
  background: var(--or); color: #111;
  font-size: .8rem; font-weight: 800; font-style: italic;
  padding: .7rem 1.4rem; border-radius: var(--r);
  transition: top .2s;
}
.skip:focus { top: .6rem; }

/* Ankerziele landen unter dem fixierten Header — auch ohne JavaScript */
#ablauf, #warum, #stimmen, #faq, #bonus { scroll-margin-top: 6.5rem; }

/* ── LAYOUT ──────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: var(--gut); }
.sec  { padding-block: clamp(4.25rem, 9vw, 8.5rem); }

/* ── TYPO-SYSTEM ─────────────────────────────────────────── */
/* Kampagnen-Headline: aufrecht, ultra-fett, sehr eng — wie der Flyer.
   (Die Bestandswebsite nutzt kursiv; hier bewusst anders.)          */
.hl {
  font-weight: 900;
  text-transform: uppercase;
  line-height: var(--hl-lh);
  letter-spacing: var(--hl-track);
  text-wrap: balance;
}
.hl--xl { font-size: clamp(2.9rem, 8.4vw, 8.4rem); }
.hl--l  { font-size: clamp(2.15rem, 5.4vw, 4.4rem); }
/* Für längere Section-Headlines eine Stufe kleiner, damit die zweite Zeile
   vollständig passt und kein Einzelwort in eine dritte Zeile rutscht. */
.hl--long { font-size: clamp(1.95rem, 4.5vw, 3.85rem); }

/* Markenname bleibt immer klein — auch in VERSAL-Headlines */
.brand {
  text-transform: lowercase;
  font-style: italic;
  letter-spacing: -.035em;
}

/* Letztes Wort + Punkt hängen zusammen — nie ein Satzzeichen allein
   am Zeilenanfang, nie ein einzelnes Wort auf eigener Zeile.         */
.nw { white-space: nowrap; }

/* Orangener Punkt — Signature-Element aus dem Flyer */
.dot {
  display: inline-block;
  width: .155em; height: .155em;
  margin-left: .055em;
  border-radius: 50%;
  background: var(--or);
  vertical-align: baseline;
}

/* Kleines kursives Label — CD-Erbe */
.lbl {
  font-size: .69rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or-txt);
  margin-bottom: 1rem;
}

.fine { font-size: .8rem; line-height: 1.7; color: var(--txt); }

/* Absätze: letzte Zeile nie als Einzelwort (Chrome/Safari) */
p, blockquote, li { text-wrap: pretty; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  font-size: .82rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 2px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.btn__arw { transition: transform .3s var(--ease); flex: 0 0 auto; }
.btn:hover .btn__arw { transform: translateX(4px); }

/* Alle Buttons sind schwarz. Orange erscheint ausschließlich im Hover —
   das ist der einzige Ort, an dem die Akzentfarbe eine Fläche bekommt. */
.btn:hover { --btn-bg: var(--or); --btn-fg: #121110; }
.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }

.btn--sm { padding: .78rem 1.3rem; font-size: .74rem; }
.btn--lg { padding: 1.2rem 2.5rem; font-size: .88rem; }

/* ── HEADER ──────────────────────────────────────────────── */
.hdr {
  position: fixed; inset: 0 0 auto;
  z-index: 100;
  padding-block: 1.6rem;
  transition: background .35s var(--ease-o), padding .35s var(--ease-o), box-shadow .35s;
}
.hdr.is-stuck {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--paper-3);
  padding-block: .85rem;
}
.hdr.is-stuck .hdr__logo img { height: 54px; }
/* Drei Spalten: das Logo sitzt dadurch optisch exakt mittig,
   unabhängig davon, wie breit Navigation und Button sind. */
.hdr__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
}
.hdr__logo {
  grid-column: 2;
  justify-self: center;
  line-height: 0;
}
/* Schwarze Logo-Variante: gleiche Zeichnung, nur die Wortmarke ist
   #0e0e0e statt #fff. Der orange i-Punkt bleibt unangetastet.      */
.hdr__logo img { height: 66px; width: auto; transition: height .35s var(--ease-o); }
.hdr__cta { grid-column: 3; justify-self: end; }

/* ── NAVIGATION (Desktop) ─────────────────────────────────── */
.nav {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2.2rem);
}
.nav__lnk {
  position: relative;
  /* 44 px hoch: ab 1001 px sichtbar, dort auch Tablets im Querformat */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding-inline: .4rem;
  font-size: .78rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(14,14,14,.6);
  transition: color .25s;
}
.nav__lnk::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--or);
  transition: width .3s var(--ease);
}
.nav__lnk:hover,
.nav__lnk.is-here { color: var(--ink); }
.nav__lnk:hover::after,
.nav__lnk.is-here::after { width: 100%; }

/* ── BURGER ───────────────────────────────────────────────── */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  grid-column: 3;
  justify-self: end;
  width: 44px; height: 44px;
  padding: 10px;
}
.burger span {
  display: block;
  height: 2px; width: 100%;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE-MENÜ ──────────────────────────────────────────── */
.menu {
  position: fixed; inset: 0;
  z-index: 95;
  display: flex; align-items: center;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__in {
  width: 100%;
  padding: 8rem var(--gut) 2.5rem;
  display: flex; flex-direction: column;
  gap: .2rem;
}
.menu__lnk {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--paper-3);
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color .2s, padding-left .3s var(--ease);
}
.menu__lnk i {
  font-size: .7rem; font-weight: 800; font-style: italic;
  letter-spacing: .1em;
  color: var(--or-txt);
}
.menu__lnk:hover { color: var(--or-txt); padding-left: .4rem; }
.menu__cta {
  margin-top: 1.75rem;
  width: 100%;
  justify-content: center;
  white-space: normal;
  text-align: center;
}
.menu__meta {
  margin-top: 1rem;
  text-align: center;
  font-size: .72rem; font-weight: 700; font-style: italic;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt);
}

/* Nav und Header-CTA erst ab Tablet, darunter Burger */
@media (max-width: 1000px) {
  .nav      { display: none; }
  .hdr__cta { display: none; }
  .burger   { display: flex; }
  /* Linke Spalte bleibt leer, damit das Logo mittig stehen bleibt */
  .hdr__in  { grid-template-columns: 44px auto 44px; }
  .hdr__logo img { height: 54px; }
  .hdr.is-stuck .hdr__logo img { height: 46px; }
}
@media (max-width: 420px) {
  .hdr__logo img { height: 46px; }
  .hdr.is-stuck .hdr__logo img { height: 40px; }
}


/* Pulsierender Punkt */
.blip {
  position: relative;
  width: 7px; height: 7px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--or);
}
.blip::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: rgba(243,146,0,.4);
  animation: ring 2s ease-out infinite;
}
@keyframes ring {
  from { transform: scale(.65); opacity: 1; }
  to   { transform: scale(1.9); opacity: 0; }
}

/* ══════════ HERO ══════════ */
/* Weißer Grund, Zeitmarke, Claim, Keyvisual, darunter die Mechanik
   als ruhiger Riegel. Zentriert — als einziger Bereich der Seite.  */
.hero {
  position: relative;
  overflow: clip;
  background: var(--paper);
}
.hero__in {
  position: relative;
  padding-top: clamp(6.75rem, 10vw, 9rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}

/* Deadline-Pill */
.pill {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .5rem 1.1rem .5rem .8rem;
  margin-bottom: clamp(.9rem, 1.8vw, 1.5rem);
  border: 1px solid var(--paper-3);
  border-radius: 999px;
  font-size: .7rem; font-weight: 800; font-style: italic;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink);
  animation: up .6s var(--ease) .05s both;
}
.pill__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--paper-3); }
.pill__days { color: var(--or-txt); }
.pill__days b { font-weight: 900; }

/* ── Die Kampagnenaussage ── */
/* Maße aus der Vorlage abgemessen (Kartenbreite 2212 px):
   Zeile 1 x-Höhe 96 px, Zeile 2 x-Höhe 58 px → Verhältnis 0,61.
   Zeilenabstand Zeile 1: 196/186 = 1,05. Der Block bricht nach
   „wird" — bei 32 Zeichen erledigt das `text-wrap: balance` von
   .hl von selbst, die max-width hält ihn zweizeilig.            */
.hl--xl { animation: up .8s var(--ease) .14s both; }

/* .hl setzt VERSAL und Ultrafett — der Claim steht dagegen in
   gemischter Schreibung, Zeile 1 mager, Zeile 2 fett.           */
.hero__hl {
  display: block;
  text-transform: none;
}
.hero__hl1 {
  display: block;
  max-width: 17ch;
  margin-inline: auto;
  font-weight: 300;
  font-size: clamp(1.95rem, 5.5vw + .9rem, 6rem);
  line-height: 1.05;
  letter-spacing: -.012em;
}
.hero__hl2 {
  display: block;
  margin-top: clamp(.35rem, .9vw, .8rem);
  font-weight: 700;
  font-size: clamp(1.19rem, 3.36vw + .55rem, 3.66rem);
  line-height: 1.12;
  letter-spacing: -.006em;
}

.hero__sub {
  max-width: 38rem;
  margin: clamp(1.5rem, 2.8vw, 2.4rem) auto 0;
  font-size: clamp(1rem, .5vw + .92rem, 1.18rem);
  line-height: 1.7;
  color: var(--txt);
  animation: up .7s var(--ease) .48s both;
}
.hero__sub strong { color: var(--ink); font-weight: 800; }

.hero__cta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.1rem);
  animation: up .7s var(--ease) .58s both;
}

/* ── Keyvisual: die Couch ── */
/* Zwei Motive, je nach Viewport ein anderes Seitenverhältnis — der
   Wechsel läuft über <picture>, die Höhenrechnung über --couch-ar.

   Die Bilder bringen oben und unten je rund 11 % Weißraum mit. Der
   wird bewusst nicht beschnitten: er trägt den Abstand zum Claim und
   zum Text darunter, und ein leichtes Anschneiden am unteren Rand
   kostet deshalb nichts vom Motiv.

   Die Höhe ist das, was nach Kopfabstand, Zeitmarke und dem
   zweizeiligen Claim übrig bleibt. Bezug 106svh: das Bild darf unten
   minimal anschneiden — dort steht ohnehin nur Weiß.              */
.hero__vis {
  --couch-ar: 1.76;            /* desktop-couch.jpg, 1200 × 682 */
  --couch-h: max(11rem, 104svh
                 - min(10vw, 9rem)                  /* Kopfabstand   */
                 - min(16.2vw + 2.78rem, 17.6rem)   /* Claim, 2+1 Z. */
                 - 5.4rem);                         /* Zeitmarke ff. */
  display: block;
  /* 80 % der Spalte statt 100 %: In der Vorlage sind Claim und Motiv
     etwa gleich breit (72 % / 73 %). Ohne diesen Deckel würde das Bild
     auf hohen Tablets bis 87 % wachsen und den Claim erdrücken.     */
  width: min(80%, 50rem, calc(var(--couch-h) * var(--couch-ar)));
  margin: clamp(.9rem, 2vw, 1.6rem) auto 0;
  animation: up .8s var(--ease) .34s both;
}
.hero__vis img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Mechanik als Riegel unter dem Bild ── */
.deal {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: clamp(.9rem, 3vw, 2.75rem);
  margin-top: clamp(1.2rem, 2.6vw, 2rem);
  padding-top: clamp(1.3rem, 2.6vw, 2rem);
  border-top: 1px solid var(--paper-3);
  animation: up .7s var(--ease) .68s both;
}
.deal__col { display: flex; align-items: center; gap: clamp(.6rem, 1.1vw, .95rem); }
.deal__num {
  font-size: clamp(2.5rem, 5vw, 3.9rem);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--ink);
}
.deal__txt { display: flex; flex-direction: column; gap: .1rem; text-align: left; }
.deal__txt b {
  font-size: clamp(.95rem, 1.5vw, 1.22rem);
  font-weight: 900; text-transform: uppercase; letter-spacing: -.005em;
  line-height: 1.12; color: var(--ink);
}
.deal__txt small {
  font-size: clamp(.78rem, 1vw, .92rem);
  font-weight: 600;
  color: var(--txt);
  line-height: 1.35;
}
.deal__arw { display: flex; align-items: center; color: var(--or); }
.deal__arw svg { width: clamp(30px, 3.4vw, 40px); height: auto; }

.hero__meta {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1.15rem;
  font-size: .78rem; font-weight: 700; font-style: italic;
  letter-spacing: .05em;
  color: var(--txt);
  animation: up .6s var(--ease) .76s both;
}
.hero__meta svg { color: var(--or); flex: 0 0 auto; }

@keyframes up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ══════════ CLAIM-BAND ══════════ */
.band {
  background: var(--ink);
  padding-block: 1rem;
  overflow: hidden;
}
.band__track {
  display: flex;
  width: max-content;
  animation: slide 34s linear infinite;
}
.band__set { display: flex; align-items: center; }
/* Immer gefüllt, nie Kontur — Kontur bleibt großen Grafikelementen vorbehalten */
.band__set b {
  font-size: clamp(.95rem, 1.9vw, 1.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: #fff;
  white-space: nowrap;
}
/* Rhythmus über Trennpunkte statt über Outline-Schrift */
.band__set i {
  position: relative;
  width: clamp(1.5rem, 4vw, 3.5rem);
}
.band__set i::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--or);
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .band__track { animation: none; }
  .blip::before { animation: none; }
}

/* ══════════ MECHANIK ══════════ */
.how { background: var(--paper); color: var(--ink); }

.secHead { max-width: 54rem; margin-bottom: clamp(2.75rem, 5vw, 4.25rem); }
.secHead__lede {
  margin-top: 1.4rem;
  font-size: clamp(.98rem, .4vw + .9rem, 1.1rem);
  line-height: 1.8;
  color: var(--txt);
  max-width: 34rem;
}
.secHead--light { color: var(--ink); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 1.4vw, 1.1rem);
  counter-reset: s;
}
.step {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.6rem) clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.6rem, 2.6vw, 2.2rem);
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-top: 3px solid var(--ink);
  overflow: hidden;
  transition: border-color .35s;
}
/* Kein Anheben, kein Schatten — der Hover färbt nur die Oberkante. */
.step:hover { border-top-color: var(--or); }
.step__no {
  display: block;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  color: #dad7d2;
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
  transition: color .45s;
}
.step:hover .step__no { color: var(--or); }
/* Ein einziger schwarzer Block in der Reihe — er markiert den Payoff. */
.step--win { background: var(--ink); border-color: var(--ink); }
.step--win .step__no { color: rgba(255,255,255,.2); }
.step--win:hover .step__no { color: var(--or); }
.step__ttl {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 900; text-transform: uppercase; letter-spacing: -.005em;
  margin-bottom: .6rem;
}
.step--win .step__ttl { color: #fff; }
.step__txt { font-size: .92rem; line-height: 1.75; color: var(--txt); }
.step--win .step__txt { color: rgba(255,255,255,.78); }

/* ══════════ DER WEG · 8 Einheiten → 8 Wochen geschenkt ══════════
   Dunkler Block im hellen Ablauf-Bereich: setzt die Progression als
   eigenen Moment ab und nimmt Kontur, Glow und Orangeton der
   „Bonus sichern"-Karte direkt darüber wieder auf.                  */
.jrn {
  position: relative;
  overflow: hidden;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.4rem, 3vw, 3.25rem) clamp(2.25rem, 4.2vw, 3.75rem);
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-top: 3px solid var(--ink);
  color: var(--ink);
}
/* Die 8 als Grafikelement — zentrales Motiv des Bereichs */
.jrn__ghost {
  position: absolute;
  bottom: -.15em; right: -.05em;
  font-size: clamp(11rem, 20vw, 19rem);
  font-weight: 900;
  line-height: .74;
  letter-spacing: -.05em;
  color: rgba(14,14,14,.05);
  pointer-events: none;
  user-select: none;
}

/* ── Dramaturgie: Zeitmarke + gesprochener Satz ── */
.jrn__when {
  position: relative;
  font-size: .69rem; font-weight: 800; font-style: italic;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--or-txt);
  margin-bottom: .8rem;
}
.jrn__say {
  position: relative;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.28rem);
  line-height: 1.55;
  color: #6f6d67;
  max-width: 26rem;
}

/* ── Marker über dem Weg: hält die Gleichung sofort lesbar ── */
.jrn__mark {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  margin-bottom: clamp(1.5rem, 2.6vw, 2.1rem);
}
.jrn__mark span {
  font-size: .69rem; font-weight: 800; font-style: italic;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink);
  flex: 0 0 auto;
}
.jrn__mark i {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--paper-3), transparent);
}

/* ── Der Weg ── */
.jrn__path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.jrn__step {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .8rem;
  text-align: center;
  min-width: 0;
}
.jrn__no {
  font-size: clamp(.9rem, 1.35vw, 1.15rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(14,14,14,.22);
  transition: color .5s var(--ease);
  transition-delay: calc(var(--i) * .11s);
}
.jrn.is-on .jrn__no { color: var(--ink); }

/* Spur: trägt Verbindungslinie (zum vorigen Knoten) und Knoten */
.jrn__lane {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  min-height: 24px;
}
/* Grundlinie */
.jrn__lane::before,
.jrn__lane::after {
  content: '';
  position: absolute;
  top: 50%; right: 50%;
  width: 100%; height: 2px;
  margin-top: -1px;
}
.jrn__lane::before { background: var(--paper-3); }
/* Die Linie baut sich Schritt für Schritt auf */
.jrn__lane::after {
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--ease-o);
  transition-delay: calc(var(--i) * .11s);
}
.jrn.is-on .jrn__lane::after { transform: scaleX(1); }
/* Der erste Schritt hat keinen Vorgänger */
.jrn__step:first-child .jrn__lane::before,
.jrn__step:first-child .jrn__lane::after { display: none; }

.jrn__node {
  position: relative;
  /* wächst über den Weg leicht mit: 10px → 15px */
  width: calc(9px + var(--i) * .75px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper-3);
  transform: scale(.7);
  transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
  transition-delay: calc(var(--i) * .11s + .16s);
}
.jrn.is-on .jrn__node {
  background: var(--ink);
  transform: scale(1);
}

.jrn__word {
  font-size: .7rem; font-weight: 800; font-style: italic;
  letter-spacing: .09em; text-transform: uppercase;
  line-height: 1.45;
  color: var(--ink);
  /* Die Begriffe verdichten sich zum Ziel hin: .64 → .90.
     Untergrenze .57 — darunter reißt schwarze Schrift auf Weiß die 4,5:1. */
  opacity: 0;
  transition: opacity .55s var(--ease);
  transition-delay: calc(var(--i) * .11s + .2s);
  hyphens: manual;
}
.jrn.is-on .jrn__word { opacity: calc(.6 + var(--i) * .038); }

/* Der achte Schritt ist das Ziel — und der einzige Farbakzent im Weg */
.jrn__step--end .jrn__no { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
.jrn.is-on .jrn__step--end .jrn__no { color: var(--ink); }
.jrn__step--end .jrn__node { width: 20px; }
.jrn.is-on .jrn__step--end .jrn__node { background: var(--or); }
.jrn__step--end .jrn__word { color: var(--or-txt); }
.jrn.is-on .jrn__step--end .jrn__word { opacity: 1; }

/* ── Das Ziel ── */
.jrn__foot {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.9rem, 3.4vw, 2.75rem);
  border-top: 1px solid var(--paper-3);
}
.jrn__say--end {
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.6vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: var(--hl-track);
  color: var(--ink);
  max-width: 15ch;
  text-wrap: balance;
}
.jrn__prize {
  position: relative;
  display: inline-flex; align-items: center;
  gap: clamp(.8rem, 1.6vw, 1.3rem);
  margin-top: clamp(1.5rem, 2.8vw, 2.25rem);
}
.jrn__prize8 {
  font-size: clamp(4.2rem, 8.4vw, 7rem);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.05em;
  color: var(--ink);
}
.jrn__prizeTxt { display: flex; flex-direction: column; }
.jrn__prizeTxt b {
  font-size: clamp(1.35rem, 3vw, 2.35rem);
  font-weight: 900; text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: var(--hl-track);
}
/* Die 8 steht als Ziffer daneben — für Screenreader gehört sie in den Satz */
.jrn__sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.jrn__note {
  position: relative;
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
  max-width: 27rem;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--txt);
}

.how__foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
.how__foot .fine { max-width: 30rem; }

/* ══════════ WARUM effectiv ══════════ */
.why { background: var(--paper); border-top: 1px solid var(--paper-3); }

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.1rem);
}
.card {
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  border: 1px solid var(--paper-3);
  background: var(--paper);
  transition: border-color .35s;
}
.card:hover { border-color: var(--ink); }
.card__ico {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem;
  margin-bottom: clamp(1.4rem, 2.6vw, 2.1rem);
  border: 1px solid var(--paper-3);
  color: var(--ink);
  transition: background .35s, color .35s, border-color .35s;
}
.card:hover .card__ico { background: var(--ink); border-color: var(--ink); color: #fff; }
.card__ttl {
  font-size: clamp(.98rem, 1.25vw, 1.15rem);
  font-weight: 900; text-transform: uppercase;
  line-height: 1.2; letter-spacing: -.005em;
  margin-bottom: .55rem;
  text-wrap: balance;
  /* Nur an gesetzten Trennstellen (&shy;) brechen — keine automatische
     Silbentrennung, die auch kurze Wörter zerlegt.                    */
  hyphens: manual;
  overflow-wrap: break-word;
}
.card__txt { font-size: .88rem; line-height: 1.7; color: var(--txt); }

/* Bildkarten — schmale Zellen tragen Hochformate, breite Querformate */
.card--pic {
  padding: 0;
  overflow: hidden;
  border-color: var(--paper-3);
  grid-column: span 1;
  /* Feste Proportion je Zellentyp: sonst zieht ein Hochformat in einer
     breiten Zelle die gesamte Rasterzeile auf.                        */
  aspect-ratio: 3 / 4;
}
.card--pic.card--w2 { aspect-ratio: 16 / 10; }
.card--pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card--pic:hover img { transform: scale(1.05); }
.card.card--w2 { grid-column: span 2; }

/* Standort-Karte */
.card--loc {
  grid-column: span 1;
  display: flex; flex-direction: column; justify-content: center; gap: .9rem;
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.card--loc:hover { border-color: var(--ink); }
/* Auf der schwarzen Fläche kehrt sich der Button um */
.card--loc .btn { --btn-bg: #fff; --btn-fg: var(--ink); }
.card__kicker {
  font-size: .72rem; font-weight: 800; font-style: italic;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--or);
}
.card__big {
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  font-weight: 900; text-transform: uppercase;
  line-height: .95; letter-spacing: -.025em;
}
.card__big .dot { background: var(--or); }
.card--loc .btn { align-self: flex-start; white-space: normal; }

/* ══════════ STIMMEN ══════════ */
/* Aufbau wie in der Vorlage: Bildspalte links, dunkles Textpanel rechts,
   ein Zitat zur Zeit, Steuerung darunter.                              */
.voices { background: var(--paper); border-top: 1px solid var(--paper-3); }

.slider { margin-top: clamp(.5rem, 1.5vw, 1rem); }
.slider__win { overflow: hidden; }
.slider__track {
  display: flex;
  transition: transform .6s var(--ease);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .slider__track { transition: none; }
}

.voice {
  flex: 0 0 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: 30rem;
  background: var(--paper);
  border: 1px solid var(--paper-3);
}
.voice__pic { position: relative; overflow: hidden; background: var(--ink); }
.voice__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.voice__pic::after {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: 4px;
  background: var(--or);
}
.voice__body {
  padding: clamp(2rem, 3.4vw, 3.25rem);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.1rem, 2vw, 1.75rem);
}
.voice__stars {
  font-size: 1.15rem;
  letter-spacing: .16em;
  line-height: 1;
  color: var(--or-txt);
}
.voice__quote { margin: 0; }
.voice__quote p {
  font-size: clamp(.95rem, .35vw + .88rem, 1.08rem);
  line-height: 1.8;
  color: var(--ink);
}
.voice__by {
  padding-top: clamp(1rem, 1.8vw, 1.4rem);
  border-top: 1px solid var(--paper-3);
  display: flex; flex-direction: column;
}
.voice__name {
  font-size: 1.05rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: -.01em;
  color: var(--ink);
}
.voice__role {
  font-size: .72rem; font-weight: 800; font-style: italic;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--or-txt);
  margin-top: 2px;
}

/* Steuerung */
.slider__ctrl {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem;
  padding-top: clamp(1.4rem, 2.4vw, 2rem);
}
.slider__btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(17,17,17,.22);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color .25s, color .25s, background .25s;
}
.slider__btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.slider__dots { display: flex; }
/* Der Button ist 44×44 (Trefferfläche), der sichtbare Punkt 9 px.
   So überlappen sich benachbarte Trefferflächen nicht.            */
.slider__dot {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: none;
}
.slider__dot::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: rgba(17,17,17,.22);
  transition: background .3s, transform .3s;
}
.slider__dot:hover::before { background: rgba(17,17,17,.4); }
.slider__dot.is-on::before { background: var(--or); transform: scale(1.35); }

.voices__src {
  margin-top: clamp(1rem, 1.8vw, 1.4rem);
  text-align: center;
  font-size: .74rem; font-weight: 700; font-style: italic;
  letter-spacing: .1em;
  color: var(--txt);
}

/* ══════════ FAQ ══════════ */
.faq { background: var(--paper); border-top: 1px solid var(--paper-3); }
.faq__in {
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.faq__head { position: sticky; top: 8rem; }
.faq__head .hl--l { font-size: clamp(1.9rem, 3.2vw, 3rem); }
.faq__lede {
  margin-top: 1.1rem;
  font-size: .95rem; line-height: 1.75;
  color: var(--txt);
}
.faq__cta { margin-top: 1.9rem; }

.acc { border-top: 1px solid var(--paper-3); }
.acc__item { border-bottom: 1px solid var(--paper-3); }
.acc__item h3 { margin: 0; font: inherit; font-weight: inherit; }
.acc__q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.35rem 0;
  text-align: left;
  font-size: clamp(.95rem, .3vw + .88rem, 1.06rem);
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
  transition: color .2s;
}
.acc__q:hover { color: var(--or-txt); }
.acc__ico {
  position: relative;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border: 1.5px solid rgba(17,17,17,.28);
  border-radius: 50%;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.acc__ico::before,
.acc__ico::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), background .3s;
}
.acc__ico::before { width: 11px; height: 2px; }
.acc__ico::after  { width: 2px; height: 11px; }
.acc__q[aria-expanded="true"] { color: var(--ink); }
.acc__q[aria-expanded="true"] .acc__ico {
  background: var(--or);
  border-color: var(--or);
}
.acc__q[aria-expanded="true"] .acc__ico::before,
.acc__q[aria-expanded="true"] .acc__ico::after { background: #121110; }
.acc__q[aria-expanded="true"] .acc__ico::after { transform: translate(-50%, -50%) scaleY(0); }

.acc__a { overflow: hidden; }
.acc__a[hidden] { display: none; }
.acc__a p {
  max-width: 46rem;
  padding-bottom: 1.5rem;
  font-size: .93rem;
  line-height: 1.85;
  color: var(--txt);
}

/* ══════════ BONUS-FINALE ══════════ */
/* Ersetzt den früheren Formularbereich: gleiche Struktur (Text links,
   Bild rechts), aber als Abschluss-CTA in Markenorange.                */
.fin { background: var(--paper); color: var(--ink); border-top: 1px solid var(--paper-3); }
.fin__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: stretch;
}
.fin__body {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 7.5rem) clamp(1.15rem, 3.6vw, 3.6rem);
  max-width: 48rem;
  margin-left: auto;
  width: 100%;
}

/* Riesige gefüllte 8 als Grafikelement (kein Fließtext) */
.fin__ghost {
  position: absolute;
  bottom: -.13em; right: -.06em;
  font-size: clamp(12rem, 22vw, 22rem);
  font-weight: 900;
  line-height: .74;
  color: rgba(14,14,14,.055);
  pointer-events: none;
  user-select: none;
}


.hl--fin {
  position: relative;
  /* Obergrenze aus der Spaltenbreite gerechnet: „BEITRAGSFREI." ist die
     längste Zeile und darf nicht am overflow:hidden abgeschnitten werden.
     Gemessen bei 1440 px: 627 px Satzbreite in 664 px Spalte.          */
  font-size: clamp(2rem, 5.6vw, 5rem);
}
.dot--ink { background: var(--or); }

.fin__lede {
  position: relative;
  margin-top: clamp(1.2rem, 2.2vw, 1.75rem);
  max-width: 30rem;
  font-size: clamp(1rem, .45vw + .92rem, 1.14rem);
  line-height: 1.75;
  color: var(--txt);
}
.fin__lede strong { color: var(--ink); font-weight: 800; }

/* Deadline als dunkler Riegel — der einzige gefüllte Block im Finale */
.fin__dl {
  position: relative;
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: .7rem;
  margin-top: clamp(1.5rem, 2.6vw, 2rem);
  padding: .8rem 1.25rem;
  border-radius: 2px;
  background: var(--ink);
  font-size: .8rem; font-weight: 800; font-style: italic;
  letter-spacing: .09em; text-transform: uppercase;
  color: #fff;
}
.fin__dlDays { color: var(--or); font-weight: 900; }
.blip--ink { background: var(--or); }
.blip--ink::before { background: rgba(243,146,0,.45); }

.fin .btn--xl { position: relative; margin-top: clamp(1.6rem, 2.8vw, 2.25rem); }
.btn--xl {
  padding: 1.4rem 3rem;
  font-size: clamp(.9rem, 1.1vw, 1rem);
  letter-spacing: .06em;
}

.fin__note {
  position: relative;
  margin-top: 1.15rem;
  max-width: 26rem;
  font-size: .78rem; line-height: 1.65;
  font-weight: 600;
  color: var(--txt);
}

/* Bildspalte */
.fin__pic { position: relative; overflow: hidden; background: #0a0a0a; }
.fin__pic img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%;
}
/* Kein Verlauf über dem Foto — das Bild steht für sich. */

/* Bonus-Stempel auf dem Foto */
.stamp {
  position: absolute; z-index: 2;
  bottom: clamp(1.5rem, 3vw, 2.75rem);
  right: clamp(1.5rem, 3vw, 2.75rem);
  display: flex; align-items: center; gap: .7rem;
  padding: 1rem 1.4rem;
  background: var(--ink);
  color: #fff;
}
.stamp__no { font-size: 2.9rem; font-weight: 900; line-height: .8; letter-spacing: -.05em; color: var(--or); }
.stamp__txt { display: flex; flex-direction: column; }
.stamp__txt b { font-size: 1rem; font-weight: 900; text-transform: uppercase; line-height: 1.1; }
.stamp__txt small {
  font-size: .72rem; font-weight: 800; font-style: italic;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--or);
}

/* ══════════ KLEINGEDRUCKTES ══════════ */
.legal { background: var(--paper); padding-block: 2.25rem; border-top: 1px solid var(--paper-3); }
.legal p { font-size: .78rem; line-height: 1.8; color: #6f6c66; max-width: 62rem; }

/* ══════════ FOOTER ══════════ */
.ftr { background: var(--paper); padding-block: 2.25rem; border-top: 1px solid var(--paper-3); }
.ftr__in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; }
.ftr__logo { display: inline-flex; align-items: center; min-height: 44px; }
.ftr__logo img { height: 34px; width: auto; opacity: .7; transition: opacity .25s; }
.ftr__logo:hover img { opacity: 1; }
.ftr__nav { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.ftr__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .78rem; font-weight: 700; font-style: italic;
  letter-spacing: .08em;
  color: var(--txt);
  transition: color .2s;
}
.ftr__nav a:hover { color: var(--or-txt); }
.ftr__cr { font-size: .72rem; color: var(--txt); }

/* ══════════ STICKY CTA (Mobile) ══════════ */
.stick {
  position: fixed; inset: auto 0 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 1rem;
  padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--paper-3);
  transform: translateY(105%);
  transition: transform .4s var(--ease);
}
.stick.is-on { transform: none; }
/* min-width:0 plus umbruchfähige Zeile: „8 Wochen beitragsfrei" passt
   auf breiten Handys einzeilig neben den Button und bricht darunter
   selbsttätig um, statt über den Rand zu laufen.                     */
.stick__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.stick__txt b {
  font-size: .84rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: -.015em; color: var(--ink);
}
.stick__txt small {
  font-size: .7rem; font-weight: 800; font-style: italic;
  letter-spacing: .08em; text-transform: uppercase; color: var(--or-txt);
  white-space: nowrap;
}
.stick .btn { margin-left: auto; }

/* ══════════ REVEAL ══════════ */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0s);
}
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .pill, .hl--xl, .hero__sub, .hero__vis, .deal, .hero__cta, .hero__meta { animation: none; }
  .jrn__no, .jrn__lane::after, .jrn__node, .jrn__word { transition: none; transition-delay: 0s; }
  .jrn__node { transform: none; }
  .jrn__lane::after { transform: scaleX(1); }
  .jrn__word { opacity: calc(.6 + var(--i) * .038); }
  .jrn__step--end .jrn__word { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* ── ≤ 1080px ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Zwei Spalten sind breiter — flachere Proportion, sonst werden die
     Bildkarten übermäßig hoch. */
  .card--pic { aspect-ratio: 1 / 1; }
  .card--pic.card--w2 { aspect-ratio: 2 / 1; }
  .card.card--w2,
  .card--loc { grid-column: span 2; }
  .card--loc .card__big br { display: none; }
  .card--loc .card__big { font-size: clamp(1.6rem, 4vw, 2.2rem); }
}

/* ── ≤ 900px : Bonus-Finale einspaltig ────────────────────── */
/* ── ≤ 1000px ─────────────────────────────────────────────── */
@media (max-width: 1000px) {
  /* Der Weg läuft senkrecht: Linie links, Nummer und Begriff daneben.
     Bleibt in einem Blick erfassbar, ohne acht Spalten zu quetschen. */
  .jrn__path { grid-template-columns: 1fr; }
  .jrn__step {
    grid-template-columns: 26px 1.9rem 1fr;
    /* align-content aus dem Grundzustand überschreiben: sonst bleibt die
       Zeilenspur auf Inhaltshöhe und die Spur streckt sich nicht mit. */
    align-content: stretch;
    align-items: center;
    justify-items: start;
    text-align: left;
    gap: 0 .85rem;
    min-height: 46px;
  }
  /* height:auto — nur dann streckt sich die Spur auf die volle Zeilenhöhe
     und die Linie erreicht den vorigen Knoten. */
  .jrn__lane { grid-column: 1; grid-row: 1; width: 26px; height: auto; align-self: stretch; }
  .jrn__no   { grid-column: 2; grid-row: 1; }
  .jrn__word { grid-column: 3; grid-row: 1; }

  /* Verbindung läuft jetzt von oben nach unten */
  .jrn__lane::before,
  .jrn__lane::after {
    top: auto; right: auto;
    left: 50%; bottom: 50%;
    width: 2px; height: 100%;
    margin-top: 0; margin-left: -1px;
  }
  .jrn__lane::after {
    transform: scaleY(0);
    transform-origin: 50% 0;
  }
  .jrn.is-on .jrn__lane::after { transform: scaleY(1); }

  .jrn__word { font-size: .72rem; letter-spacing: .1em; }

  .jrn__ghost { font-size: 13rem; }
}

@media (max-width: 900px) {

  /* Stimmen: Bild als Kopfbereich über dem Zitat */
  .voice { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; }
  /* Vollständiges Motiv statt Ausschnitt. Die Porträts sind hochformatig
     (0,56 bzw. 0,59); in einem 4:3-Rahmen fiel gut die Hälfte weg. Ohne
     aspect-ratio und mit height:auto folgt die Rahmenhöhe dem Bild, das
     Seitenverhältnis bleibt unangetastet — object-fit greift dann nicht
     mehr, wird aber der Klarheit halber zurückgesetzt.                 */
  .voice__pic { aspect-ratio: auto; }
  .voice__pic img { height: auto; object-fit: fill; object-position: center; }
  .voice__pic::after { inset: auto 0 0 0; width: auto; height: 4px; }

  .faq__in   { grid-template-columns: 1fr; gap: 2.25rem; }
  .faq__head { position: static; }

  .fin__grid { grid-template-columns: 1fr; }
  .fin__body { max-width: none; margin: 0 auto; padding-inline: var(--gut); }
  /* Ebenso im Finale: das Motiv ist hochformatig (0,727) und wurde vom
     16:10-Rahmen beschnitten. Breite richtet sich nach dem Platz, die
     Höhe wächst mit.                                                  */
  .fin__pic { order: -1; aspect-ratio: auto; }
  .fin__pic img { height: auto; object-fit: fill; object-position: center; }
  .fin__ghost { top: auto; bottom: -.1em; right: -.04em; transform: none; font-size: clamp(11rem, 34vw, 18rem); }
  .stamp { bottom: 1.15rem; right: 1.15rem; padding: .8rem 1.1rem; }
  .stamp__no { font-size: 2.3rem; }

  .steps { grid-template-columns: 1fr; }
  .step { display: grid; grid-template-columns: auto 1fr; column-gap: 1.4rem; align-items: start; padding: 1.5rem 1.4rem; }
  .step__no { margin-bottom: 0; font-size: 2.5rem; grid-row: span 2; }
  .step__ttl { margin-bottom: .35rem; align-self: center; }
  .step--win::before { display: none; }

  .how__foot { flex-direction: column; align-items: stretch; }
  .how__foot .btn { justify-content: center; }
}

/* ── ≤ 720px : Mobile ─────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --hl-lh: .9; }

  .hero__in { padding-top: 7.5rem; padding-bottom: 2.5rem; }
  .hero__sub { font-size: 1rem; }
  .hero__sub br { display: none; }

  /* Ab hier greift <source> nicht mehr: responsive-couch.jpg ist
     kompakter (800 × 612), die Höhenrechnung braucht das Verhältnis. */
  .hero__vis { --couch-ar: 1.307; width: min(100%, calc(var(--couch-h) * var(--couch-ar))); }

  .pill { font-size: .7rem; letter-spacing: .08em; gap: .45rem; padding: .45rem .85rem .45rem .65rem; }

  /* Mechanik-Riegel: vertikal, damit die 8→8 Logik sofort lesbar bleibt */
  .deal { flex-direction: column; align-items: center; gap: .85rem; }
  .deal__num { font-size: 3rem; }
  .deal__arw { transform: rotate(90deg); }
  .deal__arw svg { width: 26px; }

  .hero__cta { width: 100%; }
  .hero__cta .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .btn--lg { padding: 1.1rem 1.6rem; }


  .voice__body { padding: 1.6rem 1.25rem 1.75rem; }
  .slider__ctrl { gap: 1.1rem; }

  .acc__q { padding: 1.15rem 0; gap: 1rem; }
  .fin .btn--xl { width: 100%; justify-content: center; padding: 1.25rem 1.5rem; white-space: normal; text-align: center; }
  .fin__dl { width: 100%; font-size: .74rem; letter-spacing: .06em; gap: .5rem; }
  .fin__dl > span:nth-of-type(2) { flex: 1 1 auto; }

  .ftr__in { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .ftr__nav { gap: 1.25rem; }

  .stick { display: flex; }
  .stick .btn { padding: .85rem 1.2rem; font-size: .76rem; }
  body { padding-bottom: 0; }
}

/* ── ≤ 560px ──────────────────────────────────────────────── */
/* Lange Komposita ("Trainingslandschaft") brauchen die volle Breite. */
@media (max-width: 560px) {
  /* Die Kapsel wird hier zum Zweizeiler und damit zum Klotz — auf
     Mobile steht die Zeitmarke deshalb als reine Textzeile.        */
  .pill {
    display: flex; flex-wrap: wrap; justify-content: center;
    border: 0; padding: 0;
    column-gap: .5rem; row-gap: .1rem;
  }
  .pill__sep { display: none; }

  .cards      { grid-template-columns: 1fr; }
  .card--pic,
  .card.card--w2,
  .card--loc  { grid-column: span 1; }
  .card--pic,
  .card--pic.card--w2 { aspect-ratio: 4 / 3; }
  .card--loc .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ── ≤ 360px ──────────────────────────────────────────────── */
@media (max-width: 360px) {
  /* Text und Button müssen sich 283 px teilen — beides eine Stufe enger */
  .stick { gap: .7rem; }
  .stick__txt b { font-size: .72rem; }
  .stick .btn { padding: .8rem .8rem; font-size: .7rem; letter-spacing: .02em; }
  /* Enger setzen, damit „8 Wochen kostenlos sichern" einzeilig bleibt */
  .btn--lg { padding: 1rem 1.1rem; font-size: .8rem; letter-spacing: .03em; }
  .btn--xl { padding: 1.15rem 1.1rem; font-size: .82rem; letter-spacing: .03em; }
}

/* ── Niedrige Viewports: Hero-Kopf verdichten ──────────────── */
@media (max-height: 720px) and (max-width: 720px) {
  .hero__in { padding-top: 6.75rem; padding-bottom: 2.25rem; }
  .hero__sub { margin-top: .9rem; font-size: .95rem; }
  .hero__cta { margin-top: 1.25rem; gap: .6rem; }
  .hero__meta { margin-top: .9rem; }
  .pill { margin-bottom: .9rem; }
}