/* ============================================================
   LinkedIn Ads-Master — 1:1-Nachbau in Markenfarben
   Palette (09.07.2026, Branding-Expertin):
   · Creme  #F7F1E6  — Primär-Hintergrund (Seite + Sektionen)
   · Off-White #FDFAF3 — Karten/Flächen die hervorstechen (warmes Near-White)
   · Espresso #1C1813 — Überschriften & Text
   · Warmgrau #6E6656 — Fließtext & Sekundär-Infos
   · Funnel-Gold-Verlauf #D97F06→#F4A93D→#F8AB40 (metallisch) für CTAs,
     große Zahlen, Play, Funnel; tiefes Gold #BD7A0C für Akzenttext/Links.
   Kein kaltes Grau, kein reines Weiß als Grund.
   Alle Desktop-Maße exakt von der OnePage-Originalseite
   vermessen (1440px-Viewport, Inhalt 1250px, Instrument Sans).
   ============================================================ */

/* Instrument Sans — lokal gehostet (self-hosted), keine Google-Fonts-Verbindung.
   Variable Font: ein File je Subset mit font-weight-Range 400–700. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/kurs/assets/fonts/instrument-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/kurs/assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root {
  --gold: #f4a93d;          /* helles Funnel-Gold — Icons, Bullets, Sterne, Fokus */
  --gold-deep: #bd7a0c;     /* tiefes Gold — Akzenttext/Links auf Creme (lesbar) */
  --gold-grad: linear-gradient(115deg, #d97f06, #f4a93d 55%, #f8ab40);  /* metallisch */
  --creme: #f7f1e6;         /* Primär-Hintergrund (Seite + Sektionen) — von Janis final */
  --off: #fdfaf3;           /* Off-White — Mittelding: leicht weißer als früher, nicht ganz Header-Ton; deckend */
  --white: #ffffff;         /* echtes Weiß nur für Icon-Innenflächen */
  --ink: #1c1813;           /* Espresso — Überschriften & Text */
  --warm: #6e6656;          /* Warmgrau — Fließtext & Sekundär-Infos */
  --ink-70: #6e6656;        /* = Warmgrau (Sekundärtext) */
  --ink-45: rgba(110, 102, 86, 0.85);  /* gedämpftes Warmgrau (Tertiär/Dots) — a11y: klärt 3:1 (Großtext) */
  --line: rgba(28, 24, 19, 0.12);       /* warme Espresso-Haarlinie */
  --gold-tint: rgba(244, 169, 61, 0.14);
  --body: "Instrument Sans", "Inter", "Segoe UI", sans-serif;
  --pad: 20px;
  --r: 16px;
  --ink-68: #6e6656;        /* Alias (Warmgrau) für Rechtsseiten-Inline-Styles */
  --h2: 48px;               /* Alias für Rechtsseiten-Überschriften */
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }

body {
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: var(--creme);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-weight: 600; line-height: 1.19; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: 48px; line-height: 57px; }
h2 { font-size: 48px; line-height: 57px; }
h3 { font-size: 32px; line-height: 38px; }

/* Inhalt exakt 1250px wie das Original (1290 − 2×20 Innenabstand) */
.wrap { width: 100%; max-width: 1290px; margin-inline: auto; padding-inline: var(--pad); }
.center { text-align: center; }
.muted { color: var(--ink-45); }
.accent { color: var(--gold-deep); }
::selection { background: rgba(244, 169, 61, 0.3); }
.lede { color: var(--ink-70); font-size: 18px; line-height: 27px; margin-top: 22px; margin-inline: auto; max-width: 1092px; }
.kicker {
  color: var(--gold-deep);
  font-weight: 700; font-size: 18px; line-height: 24px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.src { font-size: 12px; line-height: 18px; color: var(--warm); word-break: break-all; }
.src a:hover { color: var(--gold-deep); }
.warn { color: #d43c3c; }

/* ---------- Buttons (Original: klein 15px/56px hoch, groß 17px/61px hoch) ---------- */
.btn {
  display: inline-block;
  background: var(--gold-grad);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  line-height: 26px;
  padding: 15px 28px;
  border-radius: 999px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  box-shadow: 0 10px 24px -12px rgba(217, 127, 6, 0.7);
}
.btn::after { content: "→"; margin-left: 10px; }
.btn-lg { font-size: 17px; line-height: 27px; padding: 17px 31px; }
.btn:hover { background: var(--ink); color: var(--off); transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }

/* ---------- NAV (Original: 56px hoch, Menü 18px/600) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 251, 246, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 24px; height: 56px; }
.nav-logo img { height: 40px; width: auto; }
.nav-menu { display: flex; gap: 24px; margin-inline: auto; font-weight: 600; font-size: 18px; }
.nav-menu a { color: var(--ink); transition: color 0.15s; }
.nav-menu a:hover { color: var(--gold-deep); }
.nav-social { display: flex; gap: 10px; }
.nav-social a { display: grid; place-items: center; width: 30px; height: 30px; }
.nav-social svg { width: 21px; height: 21px; }

/* Sprachumschalter im Header — natives <details> (kein JS). Kein Kästchen: nur
   Linien-Globus + Sprachcode + Chevron als reines Nav-Element (Espresso, Gold bei Hover). */
.lang { position: relative; flex: none; }
.lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 16px; line-height: 1; color: var(--ink); padding: 6px 2px; transition: color 0.15s; user-select: none; -webkit-user-select: none; }
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::marker { content: ""; }
.lang > summary:hover { color: var(--gold-deep); }
.lang-globe { width: 18px; height: 18px; fill: none; stroke: currentColor; flex: none; }
.lang-caret { width: 13px; height: 13px; flex: none; color: var(--warm); transition: transform 0.2s ease; }
.lang[open] > summary .lang-caret { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 156px; z-index: 60; display: flex; flex-direction: column; padding: 6px; background: var(--off); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 44px -22px rgba(28, 24, 19, 0.4); }
.lang-menu a { padding: 9px 12px; border-radius: 8px; font-weight: 600; font-size: 16px; color: var(--ink); transition: background 0.15s, color 0.15s; }
.lang-menu a:hover { background: var(--creme); color: var(--gold-deep); }
.lang-menu a.is-current { color: var(--gold-deep); }
/* Handy: Logo + 4 Social-Icons + Umschalter passen nur, wenn nichts gequetscht wird
   (flex:none) und Abstände/Icons etwas kompakter sind. Bei 375px+ passt es. */
@media (max-width: 639px) {
  .nav-in { gap: 6px; }
  .nav-logo, .lang, .nav-social { flex: none; }
  .nav-social { gap: 5px; }
  .nav-social a { width: 26px; height: 26px; }
  .nav-social svg { width: 19px; height: 19px; }
  .lang > summary { padding: 6px 2px; font-size: 15px; gap: 6px; }
  .lang-globe { width: 17px; height: 17px; }
  .lang-caret { width: 12px; height: 12px; }
}

/* ---------- HERO (h1 48px, Karte 1250 breit, Video 1138×640) ---------- */
.hero { background: var(--creme); padding-top: 88px; padding-bottom: 45px; text-align: center; }
.hero h1 { max-width: none; }
.hero-card {
  background: var(--off);
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -35px rgba(28, 24, 19, 0.4);
  margin-top: 51px;
  padding: 56px;
}
.hero-card .yt { border-radius: 16px; }
.hero-duration { display: flex; align-items: center; gap: 9px; margin-top: 16px; margin-left: 0; font-size: 17px; line-height: 20px; font-weight: 600; text-align: left; }
.hero-duration .play-ic { flex: none; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 11px; border-color: transparent transparent transparent var(--ink); }
.hero-duration b { font-weight: 600; }
.hero-sub { color: var(--ink-70); margin-top: 12px; font-size: 18px; line-height: 27px; text-align: left; }
.hero-card .btn-lg { margin-top: 26px; }
.hero-trust { display: block; margin-top: 16px; }
.hero-trust img { margin-inline: auto; width: 153px; height: 65px; object-fit: contain; }

/* ---------- YouTube Click-to-Play ---------- */
.yt {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 16 / 9;
}
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: 0.96; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--gold-grad);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -6px rgba(28, 24, 19, 0.55);
  transition: transform 0.2s ease;
}
.yt-play:hover { transform: scale(1.08); }
.yt-play span {
  width: 0; height: 0; margin-left: 5px;
  border-style: solid; border-width: 12px 0 12px 21px;
  border-color: transparent transparent transparent var(--ink);
}
.yt.on .yt-play, .yt.on > img { display: none; }

/* ---------- STATS (3 Karten, Zahl 38px, Subtext 14px) ---------- */
.stats { background: var(--creme); padding-block: 44px 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat-card { background: var(--off); border: 1px solid var(--line); border-radius: var(--r); padding: 32px; text-align: center; box-shadow: 0 18px 40px -34px rgba(28, 24, 19, 0.5); }
.stat-card h3 {
  font-size: 38px; line-height: 44px;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stat-card p { color: var(--ink-70); font-size: 14px; line-height: 21px; margin-top: 13px; }

/* ---------- Kunden-Logos (Marquee: langsam driftend, dezent, nahtlos) ----------
   Vier Kundenlogos laufen als endlose Schleife. Der Track enthaelt den Satz 4x;
   die Animation verschiebt um genau die halbe Track-Breite (translateX -50%),
   wodurch die zweite Haelfte nahtlos an die Stelle der ersten rueckt.
   Nur transform wird animiert (kompositorfreundlich, kein Reflow/CLS). */
.logos { background: var(--creme); padding-block: 46px 30px; }
.logo-marquee {
  position: relative;
  overflow: hidden;
  /* weiche Kanten links/rechts: Logos blenden am Rand aus */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 64px;
  animation: logo-scroll 62s linear infinite;
  will-change: transform;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-item { flex: 0 0 auto; height: 42px; width: auto; opacity: 0.55; }
/* gleiche Groesse: Wortmarken einheitlich hoch, Quadrat-Icon minimal groesser (optischer Ausgleich) */
.logo-item.l-rs { height: 46px; }
.logo-item.l-itmx { height: 42px; }
.logo-item.l-pem { height: 42px; }
.logo-item.l-perspix { height: 37px; }
.logo-item.l-ipg { height: 42px; }
/* zweites Logo-Band unter dem CTA in der "Nächste Schritte"-Karte (nur DE) */
.next-logos { margin-top: 40px; }
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* keine Bewegung: nur der erste Satz, zentriert und statisch */
  .logo-track { animation: none; transform: none; width: 100%; justify-content: center; flex-wrap: wrap; gap: 40px 56px; }
  .logo-item.dup { display: none; }
}

/* ---------- Zwei-Spalter ---------- */
.two-col { display: grid; gap: 56px; align-items: center; }
.two-col p { margin-top: 16px; }
.img-frame img { border-radius: var(--r); }

/* ---------- Problem (Spalten 597/597, H2 52px, Text 18px, Foto-Crop 69%/9%) ---------- */
.problem { background: var(--creme); padding-block: 38px 48px; }
.problem .two-col { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.problem h2 { font-size: 48px; line-height: 57px; text-align: center; max-width: 575px; margin-inline: auto; margin-bottom: 15px; }
.problem p { font-size: 18px; line-height: 27px; }
.problem p.src { font-size: 12px; line-height: 18px; }
.problem .btn { margin-top: 16px; }
.problem .img-frame { aspect-ratio: 597 / 657; overflow: hidden; border-radius: var(--r); }
.problem .img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 69% 9%; }

/* ---------- Vision + System (H2 934 breit, Textspalte 617, Funnel-Box 679×721) ---------- */
.vision { background: var(--creme); padding-block: 48px 29px; }
.vision > .wrap > h2 { max-width: 934px; margin-inline: auto; }
.vision .lede { max-width: 934px; margin-top: 30px; }
.system-grid { grid-template-columns: 617px minmax(0, 1fr); gap: 0; margin-top: 45px; align-items: stretch; }
.system-grid h2 { font-size: 39px; line-height: 46px; margin-top: 8px; }
.system-grid p { font-size: 18px; line-height: 27px; max-width: 564px; }
.system-grid h2 + p { max-width: 617px; }
.checks { list-style: none; margin-top: 16px; }
.checks li { position: relative; padding-left: 30px; margin-top: 16px; font-size: 18px; line-height: 27px; }
.checks li::before { content: "✔"; position: absolute; left: 0; color: var(--gold-deep); font-weight: 700; }
.crosses { list-style: none; margin-top: 4px; }
.crosses li { position: relative; padding-left: 30px; }
.crosses li::before { content: "✘"; position: absolute; left: 0; color: var(--ink-45); font-weight: 700; }

/* Funnel: Bildbox exakt wie Original (ragt 15px in die Textspalte und 31px über den Inhalt hinaus) */
/* Funnel füllt exakt die Höhe der linken Textspalte (Überschrift → Checkliste), läuft nicht über */
.funnel-img { position: relative; margin: 0; min-height: 420px; }
.funnel-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 0; padding-top: 8px; }
/* Nur-Handy-Funnel (inline zwischen den Absätzen). Auf Desktop ausgeblendet -> keine Auswirkung. */
.funnel-mobile { display: none; }

/* ---------- Praxis-Timeline (Schritte 233px eingerückt, 01 Schritt 48px) ---------- */
.praxis { background: var(--creme); padding-block: 24px 40px; }
.praxis > .wrap > h2 { font-size: 44px; line-height: 48px; }
.timeline { list-style: none; margin-top: 39px; max-width: 1105px; position: relative; }
.timeline > li {
  position: relative;
  padding-left: 233px;
  padding-bottom: 56px;
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: "";
  position: absolute; left: 178px; top: 12px;
  width: 16px; height: 16px; border-radius: 4px;
  background: var(--gold);
}
.timeline > li::after {
  content: "";
  position: absolute; left: 185px; top: 40px; bottom: 8px;
  width: 2px;
  background: var(--ink);
}
.timeline > li:last-child::after { display: none; }
/* Scroll-Füll-Strahl: goldene Linie über dem dunklen Track; Höhe via --timeline-progress (main.js).
   scaleY statt height = GPU-freundlich, kein Reflow. --beam-top/--beam-height setzt main.js. */
.timeline::after {
  content: "";
  position: absolute; left: 185px; width: 2px;
  top: var(--beam-top, 20px);
  height: var(--beam-height, 0px);
  background: var(--gold);
  transform-origin: top;
  transform: scaleY(var(--timeline-progress, 0));
  will-change: transform;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .timeline::after { transform: none; } /* voll gold, statisch — keine Scroll-Animation */
}
.timeline h3 { display: flex; flex-direction: column; }
.step-big { font-size: 48px; line-height: 57px; font-weight: 600; letter-spacing: -0.01em; }
.step-no {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.timeline h3 span + span, .step-sub { font-size: 24px; line-height: 29px; }
.timeline p { margin-top: 16px; font-size: 16px; line-height: 24px; max-width: 680px; }
.timeline b { font-weight: 700; }
.checks.boxes { margin-top: 17px; }
.checks.boxes li {
  margin-top: 16px;
  padding-left: 39px;
  font-size: 17px;
  line-height: 25px;
}
.checks.boxes li:first-child { margin-top: 0; }
.checks.boxes li::before {
  content: "✓"; display: grid; place-items: center;
  width: 20px; height: 20px; left: 8px; top: 2px;
  background: var(--gold); color: var(--white);
  font-size: 13px; border-radius: 4px;
}

/* ---------- Ergebnisse (Tabellen 617×370 Cover, Galerie-Überschriften 48px) ---------- */
.results { background: var(--creme); padding-block: 46px 24px; }
.results .lede { font-size: 20px; line-height: 30px; }
.gal-h { max-width: 930px; margin: 28px auto 0; }
.shots-1 + .gal-h { margin-top: 111px; }
.results-stagger + .gal-h { margin-top: 96px; }
.gal-h + .shots { margin-top: 54px; }
.shots { display: grid; gap: 16px; margin-top: 80px; }
.shots img { border: 1px solid var(--line); border-radius: var(--r); background: var(--off); }
/* Ergebnis-Screenshots versetzt (Zickzack: oben links, Mitte rechts, unten links) */
.results-stagger { display: flex; flex-direction: column; margin-top: 72px; }
.results-stagger figure { margin: 0; width: calc(50% - 12px); }
.results-stagger figure img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--r); background: var(--off); box-shadow: 0 18px 40px -34px rgba(28, 24, 19, 0.5); }
.results-stagger > :nth-child(1) { align-self: flex-start; }
.results-stagger > :nth-child(2) { align-self: flex-end; margin-top: -96px; }
.results-stagger > :nth-child(3) { align-self: flex-start; margin-top: -96px; }
.shots-1 { max-width: 870px; margin-inline: auto; }
/* Chat-Beweise: Querformate als leicht versetzte Feed-Spalte (links/rechts), Hochformate als sauberes 3er-Raster */
.chat-feed { max-width: 1080px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 22px; }
.chat-feed img { width: 74%; height: auto; display: block; border-radius: 14px; box-shadow: 0 20px 46px -30px rgba(28, 24, 19, 0.5); }
.chat-feed img:nth-child(odd) { align-self: flex-start; }
.chat-feed img:nth-child(even) { align-self: flex-end; }
.chat-phones { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; justify-items: center; align-items: start; }
.chat-phones img { height: 380px; width: auto; max-width: 100%; display: block; border-radius: 16px; box-shadow: 0 20px 46px -30px rgba(28, 24, 19, 0.5); }
.results .center:has(.btn) { margin-top: 68px; }

/* ---------- Hinter diesen Zahlen (Quote-Karten 1250 breit, Padding 48) ---------- */
.voices-big { background: var(--creme); padding-block: 50px 34px; }
.voices-big h2 { font-size: 40px; line-height: 47px; }
.quote-card { background: var(--off); border: 1px solid var(--line); border-radius: var(--r); padding: 48px; margin-top: 60px; box-shadow: 0 22px 48px -38px rgba(28, 24, 19, 0.5); }
.quote-card + .quote-card { margin-top: 16px; }
.quote-card h3 { font-size: 32px; line-height: 38px; }
.quote-card p { margin-top: 16px; font-size: 16px; line-height: 24px; color: var(--ink); }
.quote-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.quote-card figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.quote-card figcaption span { display: flex; flex-direction: column; font-size: 14px; line-height: 21px; color: var(--ink-70); }
.quote-card figcaption b { color: var(--ink); font-size: 16px; line-height: 22px; }
.quote-card--split { display: grid; grid-template-columns: 1fr 228px; gap: 16px; align-items: start; }
.quote-card > p { max-width: 815px; }
.quote-side-logo { width: 228px; height: auto; justify-self: end; }

/* ---------- itmX (Spalten 488/706, Gap 56, Video 706×397) ---------- */
.itmx { background: var(--creme); padding-block: 34px 33px; }
.itmx > .wrap > h2 { font-size: 40px; line-height: 44px; }
.itmx .lede { font-size: 20px; line-height: 30px; margin-top: 16px; }
.itmx-grid { grid-template-columns: 488px 706px; gap: 56px; margin-top: 48px; align-items: start; overflow-wrap: anywhere; }
.itmx-logo { height: 60px; width: auto; display: block; margin: 0 0 18px; }
.itmx-grid p { font-size: 18px; line-height: 27px; }
.itmx-h { font-size: 30px; line-height: 36px; margin-top: 16px; color: var(--ink); }
.itmx-h + ul { margin-top: 4px; }
.itmx-grid ul li { font-size: 18px; line-height: 27px; margin-top: 0; }
.itmx-sub { font-size: 36px; line-height: 42px; margin-top: 30px; color: var(--ink); }
.itmx-links { display: flex; gap: 45px; margin-top: 23px; flex-wrap: wrap; }
.itmx-links a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink-70); transition: color 0.15s; }
.itmx-links a:hover { color: var(--gold-deep); }
.itmx-links svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Weitere Stimmen (Karussell: Karten 443px, Gap 24, randlos) ---------- */
.voices { background: var(--creme); padding-block: 64px; }
.voices h2 { font-size: 40px; line-height: 47px; }
.voices .lede { font-size: 20px; line-height: 30px; }
.voices .lede a { font-weight: 600; color: var(--gold-deep); }
.voices .lede a:hover { text-decoration: underline; }
.car-outer { max-width: 1250px; margin: 58px auto 0; padding-inline: 32px; }
.carousel { position: relative; }
.car-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.car-track::-webkit-scrollbar { display: none; }
.voice {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
  background: var(--off);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 35px 32px 32px;
  box-shadow: 0 14px 34px -26px rgba(28, 24, 19, 0.4);
  display: flex;
  flex-direction: column;
}
.stars-row { color: var(--gold); font-size: 20px; line-height: 20px; letter-spacing: 0.45em; margin-bottom: 20px; }
.voice blockquote { color: var(--ink); font-size: 16px; line-height: 24px; }
.voice figcaption { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.voice figcaption img { width: 49px; height: 49px; border-radius: 50%; object-fit: cover; }
.voice figcaption span { display: flex; flex-direction: column; font-size: 14px; line-height: 21px; color: var(--ink-70); }
.voice figcaption b { color: var(--ink); font-size: 16px; line-height: 22px; }
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  border: none; background: none;
  font-size: 27px; color: var(--ink);
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}
.car-btn:hover { color: var(--gold-deep); }
.car-btn:active { transform: translateY(-50%) scale(0.92); }
.car-prev { left: -38px; }
.car-next { right: -38px; }
.car-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.car-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; background: var(--ink-45);
  cursor: pointer; padding: 0;
  transition: background 0.15s, transform 0.15s;
}
.car-dots button.on { background: var(--ink); transform: scale(1.25); }

/* ---------- Über Cedric (Spalten 527/638, Gap 85, Foto-Crop 75%/68%) ---------- */
.about { background: var(--creme); padding-block: 64px 60px; }
.about-grid { grid-template-columns: 527px 638px; gap: 85px; align-items: start; }
.about-grid h2 { font-size: 48px; line-height: 57px; }
.about-grid h2 + p { margin-top: 10px; font-size: 24px; line-height: 29px; font-weight: 600; color: var(--ink); }
.about-grid h2 + p b { font-weight: 600; }
.dots { list-style: none; margin-top: 22px; }
.dots li { position: relative; padding-left: 35px; margin-top: 16px; font-size: 18px; line-height: 27px; }
.dots li:first-child { margin-top: 0; }
.dots li::before { content: ""; position: absolute; left: 8px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.about-grid .btn { margin-top: 42px; }
.about-photo { aspect-ratio: 638 / 530; overflow: hidden; border-radius: 8px; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 68%; border-radius: 0; }

/* ---------- Team (Fotos 301×301, Raster 934px zentriert) ---------- */
.team { margin-top: 124px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 301px); justify-content: center; gap: 16px; margin-top: 57px; }
.member { background: var(--off); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.member img { width: 301px; height: 301px; object-fit: cover; }
.member figcaption { display: flex; flex-direction: column; gap: 2px; padding: 24px 32px; text-align: left; align-items: flex-start; color: var(--ink-70); font-size: 18px; line-height: 27px; }
.member b { color: var(--ink); font-size: 24px; line-height: 29px; font-weight: 600; }
.member-li { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); box-shadow: 0 3px 8px -3px rgba(28, 24, 19, 0.26); margin-top: 12px; transition: box-shadow 0.15s; }
.member-li:hover { box-shadow: 0 6px 13px -4px rgba(28, 24, 19, 0.32); }
.member-li svg { width: 17px; height: 17px; fill: var(--warm); transition: fill 0.15s; }
.member-li:hover svg { fill: var(--gold-deep); }

/* ---------- Nächste Schritte (ohne Karte, zentriert, Inhalt 997px) ---------- */
.next { background: var(--creme); padding-block: 64px; }
.next > .wrap > h2 { font-size: 62px; line-height: 68px; margin-top: 23px; }
.next-card { position: relative; background: var(--off); border: 1px solid var(--line); border-radius: 24px; margin-top: 92px; padding: 78px 20px 64px; box-shadow: 0 30px 60px -40px rgba(28, 24, 19, 0.4); }
.step-head {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  font-size: 32px; line-height: 38px;
  color: var(--ink);
  margin-top: 21px;
}
.next-card > .step-head:first-of-type { margin-top: 0; }
.step-u {
  font-size: 48px; line-height: 58px;
  text-decoration: underline; text-underline-offset: 6px;
  text-decoration-color: var(--gold-deep); text-decoration-thickness: 3px;
}
.next-intro { color: var(--ink); font-size: 16px; line-height: 24px; max-width: 997px; margin: 8px auto 0; }
.step-head:last-of-type + .next-intro { margin-top: 22px; }
.next-intro + .next-intro { margin-top: 32px; }
.step-head + .next-intro + .next-intro { margin-top: 16px; }
.next-intro + .next-intro { font-size: 18px; line-height: 27px; }
.step-head:last-of-type ~ .next-intro { font-size: 18px; line-height: 27px; }
.next-video { max-width: 997px; margin: 20px auto 0; }
.next-note { margin-top: 20px; font-size: 16px; line-height: 24px; }
.next-checks { margin-top: 0; }
.next-checks li { margin-top: 4px; font-size: 16px; line-height: 24px; }
.next-note, .next-checks { max-width: 997px; margin-inline: auto; }
.next .center:has(.btn) { margin-top: 39px; }

/* ---------- FAQ (Spalte 1050px, Fragen 20px) ---------- */
.faq { background: var(--creme); padding-block: 93px 64px; }
.faq-wrap { max-width: 1090px; }
.faq h2 { margin-top: 20px; }
.accordion { margin-top: 68px; border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  cursor: pointer; list-style: none;
  padding: 32px 0;
  font-weight: 600; font-size: 20px; line-height: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--gold-deep); transition: transform 0.2s; flex-shrink: 0; }
.accordion details[open] summary::after { transform: rotate(45deg); }
.qa-body { padding: 0 0 24px; color: var(--ink); font-size: 16px; line-height: 24px; max-width: 986px; }
.qa-body p + p { margin-top: 8px; }

/* ---------- Finale CTA (H2 44px, Chips 62px hoch) ---------- */
.final { background: var(--creme); padding-block: 64px 96px; }
.final h2 { font-size: 44px; line-height: 52px; }
.final .lede { font-size: 18px; line-height: 27px; margin-top: 30px; }
.calendly-box { margin: 16px auto 0; }
.calendly-inline-widget { min-width: 320px; height: 700px; }
.final-chips { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.final-chips li {
  display: inline-flex; align-items: center;
  background: var(--off);
  border: 1px solid var(--line);
  color: var(--gold-deep);
  font-weight: 700; font-size: 18px; line-height: 22px;
  min-height: 62px;
  padding: 20px 34px;
  border-radius: 999px;
}

/* ---------- Footer (3 Zonen: Rechtliches | Logo 250 | Kontakt, volle Breite) ---------- */
.foot { background: var(--ink); color: rgba(246, 240, 227, 0.72); padding: 35px 32px 20px; }
.foot-grid {
  /* Auf die Seitenbreite (.wrap = 1290px) begrenzt und zentriert. Vorher max-width:none:
     der Footer lief full-bleed, die Mitte (1fr) frass auf breiten Schirmen den ganzen Rest
     und drueckte die beiden Spalten an die Aussenkanten. Jetzt fluchtet "Rechtliches" mit
     dem Inhalt darueber, und die drei Bloecke stehen gleichmaessig beieinander. */
  max-width: 1290px;
  margin-inline: auto;
  padding-inline: 0;
  display: grid;
  /* 1fr auto 1fr: die beiden Aussenspuren sind exakt gleich breit -> die Logo-Spur liegt
     zwangslaeufig in der SEITENMITTE. Die Bloecke haengen per justify-self an den Textkanten
     (siehe unten), damit "Rechtliches" und das (c) mit dem Inhalt darueber fluchten.
     Bewusste Entscheidung (Janis, 15.07.2026): Logo exakt mittig hat Vorrang vor gleich
     grossen Luecken. Beides zugleich geht nicht — die Bloecke sind unterschiedlich breit
     (132 vs 279px), also landet das Logo bei gleichen Luecken um die halbe Differenz
     (73px) daneben. Jetzt: Logo mittig, Luecken 388/242. */
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: start;
}
.foot-logo { justify-self: center; align-self: center; }
.foot-logo img { width: 250px; height: auto; display: block; }
.foot-col { display: flex; flex-direction: column; gap: 24px; font-size: 17px; line-height: 25px; }
.foot-col b { color: var(--off); font-size: 24px; line-height: 29px; font-weight: 600; margin-bottom: 30px; align-self: stretch; border-bottom: 1px solid rgba(246, 240, 227, 0.35); padding-bottom: 12px; }
.foot-col a:hover { color: var(--gold); }
.foot-grid > .foot-col:first-child a { align-self: flex-start; border-bottom: 1px solid rgba(246, 240, 227, 0.3); padding-bottom: 10px; }
.foot-col .muted { color: rgba(246, 240, 227, 0.62); font-size: 13.6px; line-height: 16px; }
.foot-ico { display: inline-flex; gap: 12px; align-items: flex-start; }
.foot-ico svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; margin-top: 2px; }
/* Beide Bloecke exakt gleich breit (280px = Breite der laengeren Ueberschrift "Schreib mir ne
   Nachricht", 279px). Erst dadurch sind BEIDE Ziele gleichzeitig erreichbar: Logo exakt mittig
   UND gleich grosse Luecken. Vorher bestimmte links "Rechtliches" mit nur 132px die sichtbare
   Kante -> Luecke links 388, rechts 242. Fuer optische Abstaende zaehlt die Kante des INHALTS. */
.foot-grid > .foot-col { width: 280px; }
.foot-grid > .foot-col:first-child { justify-self: start; }
.foot-grid > .foot-col:last-child { justify-self: end; }
.foot-legal { max-width: 1290px; margin-inline: auto; padding-inline: 0; margin-top: 28px; font-size: 13.6px; color: rgba(246, 240, 227, 0.45); }

/* ---------- Responsive (unter 1290px skaliert, Original ist Fixbreite) ---------- */
.br-lg { display: inline; }
@media (max-width: 1289px) {
  .system-grid { grid-template-columns: 1fr 1fr; }
  .itmx-grid { grid-template-columns: 1fr 1.45fr; }
  .about-grid { grid-template-columns: 1fr 1.2fr; gap: 48px; }
  .team-grid { grid-template-columns: repeat(3, minmax(0, 301px)); }
  .member img { width: 100%; height: auto; aspect-ratio: 1; }
  .timeline > li { padding-left: 140px; }
  .timeline > li::before { left: 85px; }
  .timeline > li::after { left: 92px; }
  .timeline::after { left: 92px; }
  .voice { flex: 0 0 min(443px, 85%); }
  /* Karussell-Pfeile in diesem Band einrücken, sonst ragen sie ~6 px über den Viewport (Overflow) */
  .car-prev { left: -14px; }
  .car-next { right: -14px; }
}
@media (max-width: 1023px) {
  h1, h2 { font-size: 36px; line-height: 43px; }
  .problem h2 { font-size: 36px; line-height: 43px; }
  .about-grid h2 { font-size: 36px; line-height: 43px; }
  .system-grid h2 { font-size: 30px; line-height: 36px; }
  .praxis > .wrap > h2 { font-size: 34px; line-height: 40px; }
  .step-big { font-size: 38px; line-height: 45px; }
  .next > .wrap > h2 { font-size: 42px; line-height: 48px; }
  .step-head { margin-top: 90px; }
  .final h2 { font-size: 34px; line-height: 41px; }
  .stat-card h3 { font-size: 28px; line-height: 34px; }
  .nav-menu { display: none; }
  .hero { padding-top: 32px; }
  .hero-card { margin-top: 40px; padding: 24px; }
  .hero-duration { margin-left: 0; }
  .two-col, .problem .two-col, .system-grid, .itmx-grid, .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .funnel-img { position: static; min-height: 0; margin: 0; }
  .funnel-img img { position: static; width: 100%; height: auto; max-width: 679px; margin-inline: auto; padding-top: 0; }
  .br-lg { display: none; }
  .results-stagger figure { width: 100%; }
  .results-stagger > :nth-child(1), .results-stagger > :nth-child(2), .results-stagger > :nth-child(3) { align-self: stretch; margin-top: 0; }
  .results-stagger > :nth-child(2), .results-stagger > :nth-child(3) { margin-top: 16px; }
  .chat-feed { max-width: none; }
  .chat-feed img { width: 100%; }
  .chat-phones { grid-template-columns: 1fr 1fr; gap: 16px; }
  .chat-phones img { height: auto; width: 100%; }
  .gal-h { margin-top: 64px; }
  .quote-card { padding: 28px; margin-top: 40px; }
  .quote-card--split { grid-template-columns: 1fr; }
  .quote-side-logo { justify-self: center; order: -1; }
  .itmx-grid { gap: 32px; }
  .car-outer { padding-inline: 20px; margin-top: 48px; }
  .car-prev { left: -14px; }
  .car-next { right: -14px; }
  .about-grid .img-frame { order: -1; }
  .team { margin-top: 64px; }
  .team-grid { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }
  .member img { width: 100%; height: auto; }
  .timeline > li { padding-left: 48px; padding-bottom: 40px; }
  .timeline > li::before { left: 0; }
  .timeline > li::after { left: 7px; }
  .timeline::after { left: 7px; }
  .faq .accordion { margin-top: 32px; }
  .accordion summary { padding: 18px 0; font-size: 17px; line-height: 22px; }
  .qa-body { padding: 0 0 18px; }
  .foot { padding: 24px 20px 16px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-logo { justify-self: start; order: -1; }
  /* einspaltig: die Grid-Ausrichtung von oben zuruecknehmen, sonst rutscht der
     Kontaktblock an den rechten Rand statt links zu stehen wie die anderen. */
  .foot-grid > .foot-col:first-child,
  .foot-grid > .foot-col:last-child { justify-self: start; }
  /* einspaltig: feste Breite + gestreckte Linie zuruecknehmen, das ist reine Desktop-Symmetrie. */
  .foot-grid > .foot-col { width: auto; }
  .foot-col b { align-self: flex-start; }
}
@media (max-width: 639px) {
  .stats-grid { grid-template-columns: 1fr; }
  .voice { flex: 0 0 100%; }
  .final-chips { flex-direction: column; align-items: center; gap: 4px; }
  .final-chips li { min-height: 0; padding: 6px 12px; }
  .funnel-img img { max-width: 100%; }
  .chat-phones { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
  /* CTA-Pillen auf dem Handy kompakter (Desktop unverändert): kleineres Font +
     schlankeres Padding, damit die langen CTAs nicht 82–88 px hoch werden;
     text-align:center, falls ein langer Text auf 2 Zeilen umbricht. */
  /* Einzelne CTAs im Fluss (Problem/Cedric/Nächste Schritte) etwas größer, damit
     sie mehr auffallen – 14->15px + etwas mehr Padding (~44 -> ~48 px einzeilig). */
  .btn { font-size: 15px; line-height: 22px; padding: 13px 22px; text-align: center; }
  /* btn-lg im Video-Kärtchen (Hero-CTA) bleibt wie gehabt schlank */
  .btn-lg { font-size: 14px; line-height: 20px; padding: 11px 22px; }
  /* Der frei stehende Ergebnis-CTA "Ja, ich will…" zählt zu den einzelnen CTAs
     -> auf dieselbe größere Größe wie die anderen (nicht die schlanke Hero-Größe). */
  .results .btn { font-size: 15px; line-height: 22px; padding: 13px 22px; }
  .btn::after { margin-left: 8px; }
  /* CTA in der "Hey! Ich bin Cedric"-Sektion mittig setzen (Fließtext bleibt links) */
  .about-grid .btn { display: block; width: fit-content; margin-inline: auto; }
  /* ===== Mobile-Typo: ÜBERSCHRIFTEN MITTIG, Fließtext LINKS, Größen wie gehabt =====
     (nur ≤639px, Desktop unberührt). Janis: alle Überschriften mittig, Fließtext
     wieder linksbündig; Größen bleiben; Umbrüche sauber (keine kaputten Zeilen). */

  /* Nur die Überschriften der Landingpage-Sektionen mittig (h1/h2/h3); Fließtext,
     Listen und Ledes bleiben linksbündig (Default). Rechtsseiten (.legal) bleiben
     außen vor, weil hier nur .hero/.stats/.section-Überschriften getroffen werden. */
  .hero h1, .stats h3, .section h2, .section h3 { text-align: center; }

  /* Praxis-Timeline behält auf dem Handy Linie + Marker (kompakte Variante aus dem
     ≤1023er-Block: 48px-Einzug, Marker links, Linie bei 7px). Ihre Step-Titel bleiben
     deshalb LINKSbündig — an der Linie/den Markern ausgerichtet, nicht mittig wie die
     übrigen Überschriften (mittig neben einer Links-Linie sähe schief aus). */
  .timeline h3 { text-align: left; }

  /* Umbrüche glätten (Überschriften ausbalanciert, Fließtext ohne Einzelwort-Zeile) */
  h1, h2 { text-wrap: balance; }
  p, li { text-wrap: pretty; }

  /* Größen (beibehalten): Hero 32 > Section-H2 30 > Sub/Zitate ~22; Stat-Zahlen 28.
     Hero bleibt 32 (bei 34 rutscht "Leads" wieder allein in eine Zeile). */
  .hero h1 { font-size: 32px; line-height: 37px; }
  h2,
  .problem h2, .about-grid h2, .system-grid h2, .praxis > .wrap > h2, .final h2,
  .voices-big h2, .voices h2, .itmx > .wrap > h2, .next > .wrap > h2 {
    font-size: 30px; line-height: 36px;
  }
  /* Zwei Ausnahmen von den 30px: "Unsere Anzeigen erzeugen konstant Kommentare…" und
     "Und das ist mein Team aus Experten…" sind so lang, dass text-wrap:balance sie bei
     30px zu einem schmalen Turm staucht — sie nutzten nur 79% bzw. 78% der Spalte
     (5 bzw. 4 Zeilen), während die Headlines, die gut aussehen, bei 95–97% liegen.
     2px weniger reichen: beide sparen eine Zeile und füllen die Spalte (99% / 97%).
     Global 28px wäre falsch — alle übrigen Headlines verlieren dadurch ~5% Füllung,
     ohne eine Zeile zu sparen. Messwerte in LEARNINGS.md. */
  .gal-h, .team h2 { font-size: 28px; line-height: 34px; }
  /* "So sieht eine Zusammenarbeit mit uns aus:" ist der umgekehrte Fall und braucht
     deshalb die umgekehrte Behandlung. Sie ist kurz, enthaelt aber mit
     "Zusammenarbeit" ein 14-Buchstaben-Kompositum, das die Zeile blockiert. Ergebnis
     bei 28px/balance: 3 kurze Zeilen, nur 64% der Spalte — sie WIRKT dadurch kleiner
     als die 28px-Headline darueber (99%), obwohl beide exakt gleich gross sind.
     Fix: zurueck auf die 30px der Sektions-Ueberschrift ("Ergebnisse unseres…", die
     ebenfalls 30px/82% hat) und balance -> pretty. balance staucht sie sonst auch bei
     30px auf 68%; pretty bringt sie auf 83% und laesst "uns aus:" stehen statt "aus:"
     allein (wrap faende zwar 99%, aber genau mit dieser Waise). Messwerte in LEARNINGS.md.
     EN hat diese zweite Galerie-Headline nicht — dort greift die Regel ins Leere. */
  .shots-1 + .gal-h { font-size: 30px; line-height: 36px; text-wrap: pretty; }
  h3 { font-size: 22px; line-height: 28px; }
  .quote-card h3 { font-size: 23px; line-height: 30px; }
  .itmx-h, .itmx-sub { font-size: 22px; line-height: 28px; }
  .step-head { font-size: 22px; line-height: 28px; }
  .step-big { font-size: 24px; line-height: 29px; }
  .timeline h3 span + span, .step-sub { font-size: 20px; line-height: 26px; }
  .quote-side-logo { width: 140px; }
  /* "Alle Original Bewertungen kannst du bei Trustpilot finden." ist ein Hinweis,
     kein Lede -> auf dem Handy kleiner als die echten Ledes (war 20/30). */
  .voices .lede { font-size: 17px; line-height: 25px; }

  /* ==================== Gleichmäßiger vertikaler Rhythmus (Handy) ====================
     Vorher liefen die Abstände auseinander: Sektions-Lücken 53–96px, der Abstand unter
     einer Überschrift 16–54px, vor den Zwischen-Überschriften in "Ergebnisse" sogar
     96 bzw. 111px oben gegen 40–54px unten. Beim Runterscrollen wirkte das unruhig.

     Jetzt EINE Leiter — jeder Abstand derselben Art ist überall identisch:
       64px  zwischen zwei Sektionen (= 32px Padding unten + 32px oben)
       64px  vor einer Zwischen-Überschrift, die ein neues Thema aufmacht (.gal-h)
       24px  unter einer Überschrift und zwischen zwei Inhaltsblöcken
       16px  im Fließtext: Absätze, Listen, Bilder/Karten im Stapel — dieser Wert stand
             ohnehin schon überall so (.two-col p, .checks li, .timeline p, .quote-card p)
       12px  Kicker -> Überschrift

     Bewusst NICHT gleich: die Lücke ÜBER einer Überschrift bleibt größer als die
     darunter. Sonst schwebt die Überschrift mittig zwischen altem und neuem Block und
     man sieht nicht mehr, zu welchem Text sie gehört. Desktop bleibt unberührt. */

  /* 1) Sektions-Lücke überall 64px. Alle Sektionen haben denselben Creme-Grund,
        es gibt also keine sichtbaren Bänder — das Padding ist reiner Rhythmus. */
  .stats, .logos, .problem, .vision, .praxis, .results,
  .voices-big, .itmx, .voices, .about, .next, .faq, .final { padding-block: 32px; }
  .hero { padding-bottom: 32px; }   /* oben bleiben die 32px Abstand zur Nav */

  /* 2) Kicker -> Überschrift: 12px */
  .next > .wrap > h2, .faq h2 { margin-top: 12px; }

  /* 3) Unter einer Überschrift / zwischen zwei Inhaltsblöcken: 24px */
  .hero-card { margin-top: 24px; }
  .lede, .vision .lede, .itmx .lede, .final .lede { margin-top: 24px; }
  .system-grid h2 { margin-top: 0; }   /* sonst kämen 8px oben drauf (Abstand macht .system-grid) */
  .timeline { margin-top: 24px; }
  .results-stagger { margin-top: 24px; }
  .gal-h + .shots { margin-top: 24px; }
  .chat-feed { margin-top: 24px; }
  .results .center:has(.btn) { margin-top: 24px; }
  .quote-card { margin-top: 24px; }
  .itmx-grid { margin-top: 24px; }
  .next-card { margin-top: 24px; padding-top: 48px; padding-bottom: 44px; }
  /* Diese beiden hängen nicht in der .wrap ihrer Sektion und sind der Leiter beim
     ersten Durchgang durchgerutscht — sie standen noch auf 48 bzw. 57px. */
  .car-outer { margin-top: 24px; }    /* Trustpilot-Testimonials näher an den Satz darüber */
  .team-grid { margin-top: 24px; }    /* Team-Karten näher an "Und das ist mein Team…" */
  .faq .accordion { margin-top: 24px; }
  .calendly-box { margin-top: 24px; }
  .two-col, .problem .two-col, .system-grid, .itmx-grid, .about-grid { gap: 24px; }
  /* CTA unter Cedric: stand noch auf 42px (die margin-inline-Zentrierung dafür
     steht weiter oben bei den CTA-Regeln). */
  .about-grid .btn { margin-top: 24px; }

  /* 4) Fließtext-Rhythmus / Stapel: 16px. Die zweite Zitat-Karte hat das schon über
        .quote-card + .quote-card, die bleibt deshalb unangetastet. */
  .chat-phones { margin-top: 16px; }
  .final-chips { margin-top: 16px; }

  /* 5) Zwischen-Überschriften, die ein neues Thema aufmachen -> dieselbe 64er-Lücke
        wie eine echte Sektionsgrenze: die beiden .gal-h in "Ergebnisse" (waren 96
        und 111px) und die "n. Schritt:"-Köpfe in der Nächste-Schritte-Karte (waren
        90px). Der erste Schritt behält seine 0 über .step-head:first-of-type — dort
        macht das Karten-Padding den Abstand. */
  .results-stagger + .gal-h, .shots-1 + .gal-h { margin-top: 64px; }
  .step-head { margin-top: 64px; }
  /* "Das LinkedIn Ads-Master-System:" ist derselbe Fall — es macht das Thema unter
     "Stell dir vor…" auf und bekommt deshalb dieselbe 64er-Lücke, die auch über
     "Stell dir vor…" steht. Der Abstand hängt am Grid, nicht an der h2 (die steht
     auf margin-top:0), weil die Überschrift das erste Kind der Textspalte ist. */
  .system-grid { margin-top: 64px; }

  /* 1) Gold-Play-Button bei allen 3 Videos auf dem Handy kleiner (war 76px) */
  .yt-play { width: 58px; height: 58px; }
  .yt-play span { border-width: 9px 0 9px 16px; margin-left: 4px; }

  /* 2) Funnel auf dem Handy zwischen "Das folgende Modell…" und "Warum…":
     Desktop-Funnel (rechte Spalte) aus, mobilen Inline-Funnel an. */
  .system-grid > .funnel-img { display: none; }
  /* Der Funnel steht zwischen zwei Absätzen -> derselbe 16er-Fließtext-Rhythmus
     oben wie unten (unten waren es 6px). */
  .funnel-mobile { display: block; margin: 16px auto; max-width: 340px; }
  .funnel-mobile img { width: 100%; height: auto; display: block; }

  /* 3) Weißes Häkchen im goldenen Kästchen exakt mittig (der Glyph saß leicht daneben) */
  .checks.boxes li::before {
    content: ""; font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 4.9 8.7 9.5 3.6' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
  }

  /* Nur der Satz "Schaue dir unbedingt dieses Video an…" ist auf dem Handy mittig.
     Die Zeile darüber ("Nur X Minuten") bleibt bewusst linksbündig. */
  .hero-sub { text-align: center; }

  /* 4) itmX-Case-Study auf dem Handy als Off-White-Karte hervorheben — vom itmX-Logo
     runter bis unter die Webseiten-/LinkedIn-Links. Die Überschrift "Mehr Leads als je
     zuvor…" und die Zeile "Nicole Bräuner, Head of Marketing…" sind Geschwister davor
     und bleiben damit außerhalb der Karte. Rezept wie .stat-card/.quote-card
     (WEB-GUIDE §1: was heraussticht, ist Off-White auf Creme; Standardradius --r). */
  .itmx-grid {
    background: var(--off);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px;
    box-shadow: 0 18px 40px -34px rgba(28, 24, 19, 0.5);
  }
  /* Die beiden Links standen mit 45px Abstand nebeneinander und sind in der Karte
     untereinander gerutscht -> auf den 16er-Fließtext-Rhythmus. */
  .itmx-links { gap: 16px 24px; }
}

/* ---------- Rechtsseiten (Impressum/Datenschutz/404): schlanker Marken-Header + Zurück-Link ---------- */
.site-head { border-bottom: 1px solid var(--line); background: var(--creme); }
.head-inner { display: flex; align-items: center; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.brand-mark { width: 14px; height: 14px; border-radius: 4px; background: var(--gold-grad); flex-shrink: 0; }
.brand-dot { color: var(--gold-deep); }
.section-eyebrow { color: var(--gold-deep); font-weight: 700; font-size: 18px; line-height: 24px; text-transform: uppercase; letter-spacing: 0.08em; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gold-deep); }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Rechtstexte (Impressum/Datenschutz/AGB): lesbarer Fließtext ---------- */
.legal { max-width: 820px; margin-inline: auto; padding: 3.5rem 20px 4.5rem; overflow-wrap: break-word; }
.legal h1 { font-size: var(--h2); line-height: 1.15; margin-bottom: 0.5rem; }
.legal .legal-sub { color: var(--warm); font-size: 18px; line-height: 27px; margin-bottom: 2.6rem; }
.legal h2 { font-size: 26px; line-height: 1.28; margin-top: 2.8rem; margin-bottom: 0.7rem; color: var(--ink); font-weight: 600; }
.legal h3 { font-size: 18px; line-height: 1.35; margin-top: 1.7rem; margin-bottom: 0.35rem; color: var(--ink); font-weight: 600; }
.legal p { color: var(--warm); font-size: 16px; line-height: 1.62; margin-bottom: 0.9rem; }
.legal p .cl { color: var(--ink); font-weight: 600; margin-right: 0.3rem; }
.legal a { color: var(--gold-deep); word-break: break-word; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal ul, .legal ol { color: var(--warm); font-size: 16px; line-height: 1.62; margin: 0.2rem 0 1rem; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; }
.legal .sub { margin-top: 0.5rem; }
.legal address { font-style: normal; color: var(--warm); font-size: 16px; line-height: 1.62; }
.legal .blank { color: var(--gold-deep); font-weight: 600; border-bottom: 1px dashed var(--gold-deep); }
.legal .legal-note { margin: 1.4rem 0 2rem; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--off); font-size: 0.92rem; color: var(--warm); }
.legal .back { margin-top: 3.2rem; }

/* ============================================================
   Sichtbare Politur (ui-ux-pro-max §7 Animation + §2 Interaktion)
   · Hover-Lift auf Karten (150–300ms, ease-out)
   · Nav-Elevation beim Scrollen + wachsender Gold-Unterstrich / aktiver Menüpunkt
   · sanfte Scroll-Einblendungen (Fade + Rise, gestaffelt)
   Nur transform/opacity (GPU, kein Reflow); reduced-motion via JS-Gate + Media-Query.
   ============================================================ */
.stat-card, .quote-card, .voice, .member {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
@media (hover: hover) {
  .stat-card:hover, .voice:hover, .member:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 52px -30px rgba(28, 24, 19, 0.55);
    border-color: rgba(244, 169, 61, 0.55);
  }
  .quote-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 32px 58px -34px rgba(28, 24, 19, 0.5);
    border-color: rgba(244, 169, 61, 0.45);
  }
}

/* Nav: Tiefe/Schatten ab dem ersten Scroll + Gold-Highlight der aktiven Sektion (ohne Unterstrich) */
.nav { transition: box-shadow 0.25s ease, background-color 0.25s ease; }
.nav.scrolled { background: rgba(253, 251, 246, 0.9); box-shadow: 0 10px 30px -20px rgba(28, 24, 19, 0.5); }
.nav-menu a.active { color: var(--gold-deep); }

/* Scroll-Einblendungen — nur aktiv, wenn main.js `reveal-on` setzt (Motion erlaubt) */
html.reveal-on .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
html.reveal-on .reveal.in { opacity: 1; transform: none; }

/* Hochzählende Stat-Zahlen: gleiche Ziffernbreite → kein Zappeln beim Zählen.
   Kein eigener Hintergrund → die Gold-Gradient-Füllung der Überschrift greift durch. */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- A11y ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html.reveal-on .reveal { opacity: 1 !important; transform: none !important; } /* nie Inhalt verstecken */
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* Skip-Link (a11y): nur bei Tastatur-Fokus sichtbar; bestehende Marken-Tokens */
.skip-link{position:absolute;left:8px;top:-64px;z-index:2000;background:var(--ink);color:var(--creme);padding:10px 18px;border-radius:8px;font-weight:700;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:8px}

/* ============================================================
   KURS-SEITE — zusätzliche Komponenten (Standalone-Landingpage
   für den LinkedIn Ads Master Kurs). Baut auf denselben Tokens
   auf wie oben: Creme-Grund, Off-White-Karten + Espresso-Haarlinie
   + weicher Schatten, Gold-Verlauf für Akzente/Preise/CTAs.
   ============================================================ */

/* ---------- Nav-CTA (Conversion-Seite: Kauf-Button in der Nav) ---------- */
.nav-cta {
  flex: none;
  display: inline-flex; align-items: center;
  background: var(--gold-grad);
  color: var(--ink); font-weight: 700; font-size: 15px; line-height: 1;
  padding: 11px 20px; border-radius: 999px;
  box-shadow: 0 10px 24px -12px rgba(217, 127, 6, 0.7);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.nav-cta::after { content: "→"; margin-left: 8px; }
.nav-cta:hover { background: var(--ink); color: var(--off); transform: translateY(-2px); }

/* ---------- HERO (Kurs) ---------- */
.hero-course { background: var(--creme); padding-top: 76px; padding-bottom: 40px; text-align: center; }
.hero-course h1 { max-width: 1000px; margin-inline: auto; }
.hero-course .lede { max-width: 760px; }
.hero-cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.btn-ghost {
  display: inline-block; background: transparent; color: var(--ink);
  font-weight: 700; font-size: 15px; line-height: 26px;
  padding: 15px 28px; border-radius: 999px; border: 1px solid var(--line);
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.btn-ghost::after { content: "↓"; margin-left: 10px; }
.btn-ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.hero-note { margin-top: 18px; font-size: 15px; line-height: 22px; color: var(--ink-70); }
.hero-note b { color: var(--gold-deep); font-weight: 700; }

/* Fakten-Leiste unter dem Hero-CTA (Off-White-Pillen mit Gold-Zahl) */
.facts { background: var(--creme); padding-block: 8px 40px; }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fact {
  background: var(--off); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 20px; text-align: center;
  box-shadow: 0 18px 40px -34px rgba(28, 24, 19, 0.5);
}
.fact-num {
  font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fact p { color: var(--ink-70); font-size: 15px; line-height: 21px; margin-top: 8px; }

/* ---------- Für wen / Nicht für wen (Split) ---------- */
.audience { background: var(--creme); padding-block: 40px; }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; align-items: start; }
.aud-card { background: var(--off); border: 1px solid var(--line); border-radius: var(--r); padding: 36px 34px; box-shadow: 0 18px 40px -34px rgba(28, 24, 19, 0.5); }
.aud-card h3 { font-size: 24px; line-height: 30px; }
.aud-card ul { list-style: none; margin-top: 20px; }
.aud-card li { position: relative; padding-left: 32px; margin-top: 14px; font-size: 17px; line-height: 25px; color: var(--ink); }
.aud-card li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.aud-yes li::before { content: "✔"; color: var(--gold-deep); }
.aud-no li::before { content: "✘"; color: var(--ink-45); }
.aud-no li { color: var(--ink-70); }

/* ---------- Das lernst du (Outcome-Grid) ---------- */
.learn { background: var(--creme); padding-block: 40px; }
.learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.learn-card { background: var(--off); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; box-shadow: 0 18px 40px -34px rgba(28, 24, 19, 0.5); }
.learn-ic {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); margin-bottom: 18px;
}
.learn-ic svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.learn-card h3 { font-size: 20px; line-height: 26px; }
.learn-card p { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--ink-70); }

/* ---------- Warum der Funnel funktioniert (im System-Abschnitt) ---------- */
.why-block { margin-top: 60px; }
.why-title { font-size: 28px; line-height: 34px; }
.why-lede { max-width: 660px; margin-inline: auto; margin-top: 10px; font-size: 18px; line-height: 27px; color: var(--ink-70); }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 36px; }
/* Nummern 01-04 als grosse Gold-Verlauf-Zahlen (Text, ohne Box), wie auf Meta-Ads-Master (.feat .ic). */
.why-num {
  font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: 15px; width: fit-content;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } .why-title { font-size: 24px; line-height: 30px; } .why-block { margin-top: 44px; } }

/* ---------- Curriculum / Module ---------- */
.curric { background: var(--creme); padding-block: 40px; }
.module-list { margin-top: 48px; display: flex; flex-direction: column; gap: 16px; }
.module {
  background: var(--off); border: 1px solid var(--line); border-radius: var(--r);
  padding: 34px 36px; box-shadow: 0 18px 40px -34px rgba(28, 24, 19, 0.5);
  display: grid; grid-template-columns: 74px 1fr; gap: 8px 28px; align-items: start;
}
.module-no {
  grid-row: span 2;
  font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -0.02em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.module-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.module-head h3 { font-size: 26px; line-height: 32px; }
.module-count { font-size: 14px; font-weight: 700; color: var(--gold-deep); text-transform: uppercase; letter-spacing: 0.06em; }
.module-desc { grid-column: 2; color: var(--ink-70); font-size: 16px; line-height: 24px; margin-top: 6px; }
.module-lessons { grid-column: 2; list-style: none; margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.module-lessons li { position: relative; padding-left: 28px; font-size: 16px; line-height: 23px; color: var(--ink); }
.module-lessons li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 5px; background: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 4.9 8.7 9.5 3.6' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
}
.module-lessons li.bonus::before {
  background: var(--gold-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5 7.3 4.4 10.5 4.7 8 6.8 8.8 10 6 8.2 3.2 10 4 6.8 1.5 4.7 4.7 4.4Z' fill='%23bd7a0c'/%3E%3C/svg%3E");
}

/* ---------- Materialien / Was du bekommst ---------- */
.materials { background: var(--creme); padding-block: 40px; }
.materials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.mat {
  background: var(--off); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 26px; box-shadow: 0 18px 40px -34px rgba(28, 24, 19, 0.5);
  display: flex; gap: 16px; align-items: flex-start;
}
.mat-ic { flex: none; width: 44px; height: 44px; border-radius: 11px; background: var(--gold-tint); display: grid; place-items: center; }
.mat-ic svg { width: 22px; height: 22px; stroke: var(--gold-deep); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mat h3 { font-size: 18px; line-height: 24px; }
.mat p { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--ink-70); }

/* ---------- Pricing (zwei Tarife) ---------- */
.pricing { background: var(--creme); padding-block: 40px; }
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 50px; max-width: 940px; margin-inline: auto; align-items: stretch; }
.price-card {
  position: relative; background: var(--off); border: 1px solid var(--line); border-radius: 24px;
  padding: 44px 40px; box-shadow: 0 22px 48px -38px rgba(28, 24, 19, 0.5);
  display: flex; flex-direction: column;
}
.price-card.featured { border: 2px solid var(--gold); box-shadow: 0 34px 64px -34px rgba(217, 127, 6, 0.45); }
.price-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--gold-grad); color: var(--ink); font-weight: 700; font-size: 13px; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 18px; border-radius: 999px;
  box-shadow: 0 10px 24px -12px rgba(217, 127, 6, 0.7); white-space: nowrap;
}
.price-name { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink); }
.price-tag { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.price-amount {
  font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -0.02em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.price-per { font-size: 16px; line-height: 22px; color: var(--ink-70); font-weight: 600; }
.price-sub { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--ink-70); }
.price-sub b { color: var(--gold-deep); font-weight: 700; }
.price-feat { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.price-feat li { position: relative; padding-left: 32px; font-size: 16px; line-height: 24px; color: var(--ink); }
.price-feat li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 4.9 8.7 9.5 3.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px 13px;
}
.price-feat li.hl { font-weight: 600; }
.price-card .btn { margin-top: 34px; text-align: center; }
.price-foot { margin-top: 16px; font-size: 13.5px; line-height: 20px; color: var(--ink-45); text-align: center; }
.price-reassure { margin-top: 40px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; }
.price-reassure span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink-70); }
.price-reassure svg { width: 18px; height: 18px; stroke: var(--gold-deep); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Macher-Sektion (Cedric + Janis) ---------- */
.makers { background: var(--creme); padding-block: 40px; }
.makers-grid { grid-template-columns: 400px minmax(0,1fr); gap: 64px; margin-top: 44px; align-items: center; }
/* Cedric-Foto: Hochformat-Rahmen (aspect 4/5, dadurch höher als der Text) und näher an
   ihn herangezoomt (Decke oben raus). Als background statt <img>, damit der Ausschnitt
   exakt steuerbar ist: zeigt den Quellbereich ~x230-950 / y520-1420 = Kopf bis
   Oberschenkel, mittig auf Cedric. aria-label am <figure> hält die Barrierefreiheit. */
.makers-photo {
  position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  background-image: url("/kurs/assets/img/cedric.jpg");
  background-size: 139%;
  background-position: 82% 87%;
  background-repeat: no-repeat;
}
.makers h2 + p { margin-top: 12px; }
.makers p { font-size: 18px; line-height: 27px; color: var(--ink-70); }
.makers .checks { margin-top: 20px; }

/* ---------- Responsive (Kurs-Komponenten) ---------- */
@media (max-width: 1289px) {
  .makers-grid { grid-template-columns: 1fr 1.15fr; gap: 40px; }
}
@media (max-width: 1023px) {
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .learn-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .materials-grid { grid-template-columns: 1fr 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .module { grid-template-columns: 56px 1fr; gap: 4px 20px; padding: 28px 26px; }
  .module-no { font-size: 36px; }
  .module-lessons { grid-template-columns: 1fr; }
  .makers-grid { grid-template-columns: 1fr; gap: 28px; }
  .makers-photo { order: -1; width: 100%; max-width: 400px; margin-inline: auto; }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; }
  .price-card.featured { order: -1; }
}
@media (max-width: 639px) {
  .hero-course, .facts, .audience, .learn, .curric, .materials, .pricing, .makers { padding-block: 32px; }
  .hero-course { padding-top: 40px; }
  .facts { padding-top: 8px; }
  .facts-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fact { padding: 18px 14px; }
  .fact-num { font-size: 28px; line-height: 34px; }
  .materials-grid { grid-template-columns: 1fr; }
  .learn-grid, .audience-grid, .module-list, .price-grid { margin-top: 24px; }
  .facts-grid, .learn-grid, .materials-grid, .audience-grid { margin-top: 24px; }
  .module { grid-template-columns: 1fr; gap: 6px; padding: 24px 22px; }
  .module-no { grid-row: auto; font-size: 30px; }
  .module-desc, .module-lessons { grid-column: 1; }
  .module-lessons { margin-top: 14px; }
  .aud-card, .learn-card, .price-card { padding: 28px 24px; }
  .price-amount { font-size: 46px; }
  .hero-cta-row { gap: 10px; }
  .btn-ghost { font-size: 15px; padding: 13px 22px; }
  /* Überschriften mittig auf dem Handy (wie Basis-LP) */
  .hero-course h1, .audience h2, .learn h2, .curric h2, .materials h2, .pricing h2, .makers h2 { text-align: center; }
}