/* ============================================================
   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('/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('/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, .nav-menu a[aria-current="page"] { 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; }

/* Language switcher in the header — native <details> (no JS). No box: just an
   outline globe + language code + chevron as a plain nav element (espresso, gold on 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); }
/* Mobile: logo + 4 social icons + switcher only fit if nothing gets squeezed
   (flex:none) and gaps/icons are a bit tighter. Fits at 375px+. */
@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: 32px; line-height: 37px;
  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; }
@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: 660px; 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; }
/* Mobile-only inline funnel. Hidden on desktop -> no effect there. */
.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: 170px; height: 60px; object-fit: contain; object-position: right top; justify-self: end; }
/* Customer contact offer inside the testimonial (Gustav offered to answer questions) */
.quote-contact { display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; padding: 16px 18px; background: var(--gold-tint); border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; }
.quote-contact svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; color: var(--gold-deep); }
.quote-contact p { margin: 0; font-size: 15px; line-height: 23px; color: var(--warm); }
.quote-contact a { color: var(--gold-deep); font-weight: 700; text-decoration: none; word-break: break-word; }
.quote-contact a:hover { text-decoration: underline; }

/* ---------- 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: 32px; line-height: 38px; 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); }
.card-mark { position: absolute; right: 32px; bottom: 28px; width: 76px; height: auto; }
.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; }
/* Social-Icons unten im Footer, nur auf dem Handy sichtbar (Desktop: Socials bleiben im Header) */
.foot-social { display: none; gap: 16px; align-items: center; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(246, 240, 227, 0.14); }
/* Footer-Socials in Markenfarben (wie im Header), damit sofort erkennbar. Dezenter Hover. */
.foot-social a { display: inline-flex; transition: opacity 0.15s; }
.foot-social a:hover { opacity: 0.8; }
.foot-social svg { width: 22px; height: 22px; display: block; }
/* 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) {
  .card-mark { display: none; }
  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; }
  /* Ab Tablet abwaerts: Socials raus aus dem Header (in den Footer), Sprachwahl rechts in die Ecke */
  .nav-social { display: none; }
  .lang { margin-inline-start: auto; }
  .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-social { display: flex; }  /* Social-Icons unten im Footer (Tablet + Handy) */
  .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; }
  .stat-card h3 { font-size: 26px; line-height: 32px; }  /* Handy: dritte Karte passt so auch in 2 Zeilen */
  .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; }
  /* Compact CTA pills on mobile (desktop unchanged): smaller font + slimmer
     padding so the long CTAs don't grow to 82–88 px; text-align:center in case
     a long label wraps to 2 lines. */
  /* Standalone in-flow CTAs (problem/Cedric/next steps) a bit bigger so they pop
     more – 14->15px + a bit more padding (~44 -> ~48 px single-line). */
  .btn { font-size: 15px; line-height: 22px; padding: 13px 22px; text-align: center; }
  /* btn-lg in the video card (hero CTA) stays slim as before */
  .btn-lg { font-size: 14px; line-height: 20px; padding: 11px 22px; }
  /* The standalone results CTA "Yes, I want…" counts as an individual CTA
     -> same bigger size as the others (not the slim hero size). */
  .results .btn { font-size: 15px; line-height: 22px; padding: 13px 22px; }
  .btn::after { margin-left: 8px; }
  /* Center the CTA in the "Hey! I'm Cedric" section (body text stays left) */
  .about-grid .btn { display: block; width: fit-content; margin-inline: auto; }
  /* ===== Mobile typography: HEADINGS CENTERED, body LEFT, sizes kept =====
     (≤639px only, desktop untouched). */
  .hero h1, .stats h3, .section h2, .section h3 { text-align: center; }
  /* Timeline keeps its line + markers on mobile (compact ≤1023 variant, 48px indent);
     its step titles stay LEFT-aligned, lined up with the markers. */
  .timeline h3 { text-align: left; }
  h1, h2 { text-wrap: balance; }
  p, li { text-wrap: pretty; }
  /* Hero is 24px here, NOT 32px like the German pages — do not "fix" for consistency.
     The English headline is a longer sentence (14 words) than the German one (8), so at
     30-32px text-wrap:balance locks it to 5 choppy lines. Janis chose the 24px/3-line
     layout by screenshot: at 390-414px it reads "Fill your B2B sales pipeline with / a
     steady flow of qualified leads / from your ideal customers." — clean 3 lines, 97% fill.
     Tradeoff he accepted: 24px is a touch below the section H2s (30px). 28px would be 4
     lines, 26px still 4; 24px is the largest size that gives 3 lines at 390px (measured,
     20-32px checked). Below 390px (e.g. 375px) it falls back to 4 lines — fine. */
  .hero h1 { font-size: 24px; line-height: 30px; }
  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;
  }
  /* One exception to the 30px: "Our ads consistently generate comments…" is long enough
     that text-wrap:balance squeezes it into a narrow tower at 30px (5 lines, only 82% of
     the column). 2px less saves a line and fills it (4 lines, 96%).
     Deliberately NOT applied to .team h2 here, unlike the German pages: "And this is my
     team of experts who truly understand complex B2B" already sits at 99% / 3 lines at
     30px — 28px would drop it to 93% for nothing. Different copy, different optimum. */
  .gal-h { font-size: 28px; line-height: 34px; }
  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: 105px; height: 36px; object-position: center top; }
  /* "You can find all original reviews on Trustpilot." is a note, not a lede
     -> smaller than the real ledes on mobile (was 20/30). */
  .voices .lede { font-size: 17px; line-height: 25px; }

  /* ---- Even vertical rhythm (mobile) ----
     One ladder, every gap of the same kind identical everywhere:
       64px between two sections · 64px before an in-section heading (.gal-h)
       24px below a heading / between two content blocks
       16px inside body copy (paragraphs, lists, stacked images) · 12px kicker -> heading
     The gap ABOVE a heading deliberately stays larger than the one below it, otherwise
     the heading floats between the blocks. Desktop untouched. */
  .stats, .logos, .problem, .vision, .praxis, .results,
  .voices-big, .itmx, .voices, .about, .next, .faq, .final { padding-block: 32px; }
  .hero { padding-bottom: 32px; }
  .next > .wrap > h2, .faq h2 { margin-top: 12px; }
  .hero-card { margin-top: 24px; }
  .lede, .vision .lede, .itmx .lede, .final .lede { margin-top: 24px; }
  .system-grid h2 { margin-top: 0; }
  .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; }
  /* These two don't sit in their section's .wrap, so they were still at 48 / 57px. */
  .car-outer { margin-top: 24px; }
  .team-grid { margin-top: 24px; }
  .faq .accordion { margin-top: 24px; }
  .calendly-box { margin-top: 24px; }
  .two-col, .problem .two-col, .system-grid, .itmx-grid, .about-grid { gap: 24px; }
  .about-grid .btn { margin-top: 24px; }   /* CTA under Cedric, was 42px */
  .chat-phones { margin-top: 16px; }
  .final-chips { margin-top: 16px; }
  /* 64px before any in-section heading that opens a new topic: the .gal-h in "Results"
     (were 96/111px) and the "Step n:" heads (were 90px). The first step keeps its 0
     via .step-head:first-of-type. */
  .results-stagger + .gal-h, .shots-1 + .gal-h { margin-top: 64px; }
  .step-head { margin-top: 64px; }
  /* "The LinkedIn Ads-Master System:" opens the topic under "Imagine your LinkedIn
     Ads…" -> same 64px gap that sits above that heading too. The gap hangs on the
     grid, not on the h2 (which is at margin-top:0). */
  .system-grid { margin-top: 64px; }

  /* 1) Gold play button smaller on mobile across all 3 videos (was 76px) */
  .yt-play { width: 58px; height: 58px; }
  .yt-play span { border-width: 9px 0 9px 16px; margin-left: 4px; }
  /* 2) Funnel on mobile between "The model below…" and "Why does this funnel work?" */
  .system-grid > .funnel-img { display: none; }
  .funnel-mobile { display: block; margin: 16px auto; max-width: 340px; }
  .funnel-mobile img { width: 100%; height: auto; display: block; }
  /* 3) White check centered in the gold box */
  .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;
  }

  /* "Watch this video…" under the VSL: centered, but 16px instead of the base 18px.
     At 18px it wrapped bottom-heavy — the 3rd line ("predictable, qualified B2B sales
     calls.") was the LONGEST at 298/300px, so balance had no room to even it out. 16px
     lets it breathe into a clean shape with a SHORT last line, like the German sub:
     "Watch this video if you want LinkedIn / Ads to generate predictable, qualified /
     B2B sales calls." (pretty keeps that break; balance here would go bottom-heavy). */
  .hero-sub { text-align: center; font-size: 16px; line-height: 24px; text-wrap: pretty; }

  /* 4) Highlight the itmX case study as an off-white card on mobile — from the itmX
     logo down past the website/LinkedIn links. The heading and "Nicole Bräuner, Head
     of Marketing…" are siblings before it and stay outside. Same recipe as
     .stat-card/.quote-card (WEB-GUIDE §1: whatever stands out is off-white on creme). */
  .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);
  }
  .itmx-links { gap: 16px 24px; }   /* were 45px apart */
}

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