@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexMono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexMono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/InstrumentSans-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/InstrumentSans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/InstrumentSans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/InstrumentSans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/InstrumentSans-700.woff2') format('woff2');
}

/* ============================================================
   BASELINE — design system
   Warm cream canvas #f7f4ee, ink text #18181b, zinc-gray scale,
   deep steel-navy #1E3B55 as the primary accent (ice-blue tints,
   powder-blue on dark). Grotesk sans + mono labels + marker-highlighted accent words.
   ============================================================ */

:root {
  --bg: #FAF9F6;
  --paper: #ffffff;
  --soft: #f4f4f5;
  --ink: #18181b;
  --gray: #71717a;
  --gray-light: #a1a1aa;
  --line: #e7e5e0;
  --accent: #1E3B55;
  --accent-dark: #162C40;
  --accent-deep: #14273A;
  --accent-tint: #E9F0F6;
  --accent-ondark: #9CBEDD;
  --accent-mid: #6E9CC4;
  --radius: 16px;
  --radius-lg: 24px;
  --font-sans: "Instrument Sans", -apple-system, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --mark: #C9DCEC;   /* marker highlight behind accent words (see .section-title em) */
  --header-h: 76px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: initial; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

.container { width: min(1240px, 100% - 48px); margin-inline: auto; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

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

/* ---------- Bildmarke ----------
   Weißes Zick-Logo (assets/logo-zick.svg) als Mask; background: currentColor
   übernimmt die Textfarbe des Kontexts — dunkel auf hellem Grund, weiß im
   gescrollten Header, im Loader und auf dunklen Flächen. */
.brand-logo {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url('/assets/logo-zick.svg') no-repeat center / contain;
  mask: url('/assets/logo-zick.svg') no-repeat center / contain;
  aspect-ratio: 268.5 / 93.5;
}
/* Fließend mit der Fensterbreite statt Sprung bei 560px (36px Handy … 46px Desktop) */
.header__logo.brand-logo { height: clamp(36px, 1.2vw + 30px, 46px); }
.loader__logo.brand-logo { height: clamp(64px, 9vw, 92px); }
.footer__brand.brand-logo { height: 36px; }
/* Schwarze Fassung mit grünem Ball (assets/logo-zick-schwarz.svg) auf hellem Grund: Header oben
   und Footer (Kundenwunsch 10.10.2026, vorher logo-zick-farbe.svg mit grauer Schrift und Rot).
   Im gescrollten (dunklen) Header greift wieder die weiße Mask von .brand-logo. */
.header:not(.is-scrolled) .header__logo.brand-logo,
.footer__brand.brand-logo {
  -webkit-mask: none; mask: none;
  background: url('/assets/logo-zick-schwarz.svg') no-repeat center / contain;
}

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--accent-deep); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.loader__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.loader__logo { font-weight: 700; font-size: clamp(24px, 3.4vw, 38px); letter-spacing: 0.14em; }
.loader__count { font-family: var(--font-mono); font-size: 13px; opacity: 0.5; font-variant-numeric: tabular-nums; }

/* ---------- Scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150; pointer-events: none; }
.progress__bar { height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* ---------- Header ----------
   Top of page: light row on the page background — links left, wordmark
   centered, Log in + black pill CTA + 3×3 dot grid on the right.
   Scrolled: banner collapses and the row condenses into a floating dark
   translucent pill with white links (one .5s tween, like the original). */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; flex-direction: column;
}

.header__banner {
  background: var(--accent); color: #fff;
  height: 40px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: height 0.5s var(--ease-out);
}
.header__banner p {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
  padding: 0 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header__banner a { color: var(--accent-ondark); font-weight: 600; display: inline-block; padding: 8px 0; }
.header__banner .banner-short { display: none; } /* mobil: Kurztext (≤560px-Block) */
.header.is-scrolled .header__banner { height: 0; }

.header__wrapper { padding: 14px 24px; transition: padding 0.5s var(--ease-out); }
/* Gescrollte Pille: alle Maße fließend zwischen Handy (≈49px hoch, nah am Rand) und Desktop,
   statt bei 560px umzuspringen (Wunsch 10.10.2026: „Cut zu krass“; danach „zu dünn“ → Handy
   von ≈37px auf ≈49px, Desktop-Höchstmaße unverändert) */
.header.is-scrolled .header__wrapper { padding: clamp(6px, 0.4vw + 4px, 10px) clamp(10px, 1.5vw + 4px, 24px); }

.header__inner {
  width: min(1280px, 100%); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px;
  padding: 8px 12px;
  border-radius: 999px;
  background: transparent;
  transition: all 0.5s var(--ease-out);
}
.header.is-scrolled .header__inner {
  width: min(1080px, 100%);
  background: rgba(20, 39, 58, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: clamp(5px, 0.3vw + 4px, 8px) clamp(5px, 0.3vw + 4px, 8px) clamp(5px, 0.3vw + 4px, 8px) clamp(16px, 0.5vw + 13px, 20px);
  box-shadow: 0 20px 40px -20px rgba(24,24,27,0.35);
}
.header.is-scrolled .header__logo.brand-logo { height: clamp(30px, 1vw + 26px, 40px); }

.header__nav { display: flex; gap: 24px; justify-self: start; }
.header__link {
  font-size: 15px; font-weight: 600;
  color: var(--ink); position: relative;
  transition: color 0.5s;
}
.header__link::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.header__link:hover::after { transform: scaleX(1); transform-origin: left; }
.header.is-scrolled .header__link { color: rgba(255,255,255,0.85); }
.header.is-scrolled .header__link:hover { color: #fff; }

.header__logo {
  justify-self: center;
  font-weight: 700; letter-spacing: -0.02em; font-size: 24px; line-height: 1;
  color: var(--ink); transition: color 0.5s;
}
.header.is-scrolled .header__logo { color: #fff; }

.header__right { display: flex; gap: 10px; align-items: center; justify-self: end; }
.header__login {
  font-size: 15px; font-weight: 600; color: var(--ink); margin-right: 6px;
  transition: color 0.5s;
}
.header.is-scrolled .header__login { color: rgba(255,255,255,0.85); }
.header.is-scrolled .header__login:hover { color: #fff; }
/* Nur ein Button oben rechts (Erstgespräch); Chancen-Check läuft über
   Sticky-CTA-Pille, Hero und Abschluss-CTAs */
@media (max-width: 1024px) { .header__nav { gap: 16px; } }

/* Black pill at top → white pill inside the dark bar once scrolled */
.header__cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  border-radius: 999px; padding: 13px 22px;
  font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: all 0.5s var(--ease-out);
}
.header__cta:hover { transform: translateY(-2px); }
.header.is-scrolled .header__cta { background: #fff; color: var(--ink); padding: 11px 18px; }
.header.is-scrolled .header__cta:hover { background: #DCE7F0; color: var(--accent); }
/* Mit Icon-Kreis (.btn__ic, Regeln bei .btn--icon): Kreis hell auf Navy, Navy auf Weiß */
/* Fließend kleiner bei schmaleren Fenstern (Wunsch 10.10.2026), 15px/34px ab ≈1280px */
.header__cta {
  gap: clamp(6px, 0.6vw + 2px, 10px); font-size: clamp(13px, 0.35vw + 10.5px, 15px);
  padding: clamp(4px, 0.3vw + 2px, 6px) clamp(4px, 0.3vw + 2px, 6px) clamp(4px, 0.3vw + 2px, 6px) clamp(14px, 1.2vw + 6px, 22px);
}
.header.is-scrolled .header__cta { padding: 5px 5px 5px 18px; }
.header__cta .btn__ic { width: clamp(28px, 1vw + 21px, 34px); height: clamp(28px, 1vw + 21px, 34px); background: #fff; color: var(--accent); }
.header.is-scrolled .header__cta .btn__ic { background: var(--accent-deep); color: #fff; }

/* 3×3 dot grid — always visible, becomes a circled button in the dark bar */
.header__dots {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.5s;
}
.header__dots-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5px;
}
.header__dots-grid i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink); transition: background 0.5s, transform 0.35s var(--ease-out);
}
.header.is-scrolled .header__dots {
  background: rgba(255,255,255,0.12);
  width: clamp(38px, 0.6vw + 36px, 44px); height: clamp(38px, 0.6vw + 36px, 44px);
}
.header.is-scrolled .header__dots-grid { gap: clamp(3px, 0.05vw + 2.8px, 3.5px); }
.header.is-scrolled .header__dots-grid i { background: #fff; width: clamp(3.5px, 0.05vw + 3.3px, 4px); height: clamp(3.5px, 0.05vw + 3.3px, 4px); }
/* Erstgespräch-Button in der gescrollten Pille wächst mit (taucht ab 561px klein auf) */
.header.is-scrolled .header__cta {
  font-size: clamp(11.5px, 0.55vw + 7.8px, 15px); gap: clamp(6px, 0.6vw + 2px, 10px);
  padding: clamp(3px, 0.15vw + 2px, 4px) clamp(3px, 0.15vw + 2px, 4px) clamp(3px, 0.15vw + 2px, 4px) clamp(11px, 1vw + 4px, 18px);
}
.header.is-scrolled .header__cta .btn__ic { width: clamp(22px, 1.9vw + 9px, 34px); height: clamp(22px, 1.9vw + 9px, 34px); }
.header__cta .btn__ar { width: clamp(11px, 0.4vw + 8px, 14px); height: clamp(11px, 0.4vw + 8px, 14px); }
.header__dots:hover .header__dots-grid i { transform: scale(1.3); }

/* ---------- Drawer menu ---------- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(512px, 100%);
  background: #fff;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 32px;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(110%);
  transition: transform 0.6s var(--ease-out);
  box-shadow: -30px 0 60px -30px rgba(24,24,27,0.3);
}
.drawer.is-open { transform: translateX(0); }

.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.drawer__title { font-weight: 600; letter-spacing: -0.03em; font-size: 32px; line-height: 1.1; }
.drawer__actions { display: flex; align-items: center; gap: 8px; }
.drawer__login { font-size: 15px; font-weight: 500; padding: 10px 14px; color: var(--ink); }
.drawer__cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  border-radius: 999px; padding: 12px 20px;
  font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background 0.3s;
}
.drawer__cta:hover { background: var(--accent); }
.drawer__cta { gap: 8px; padding: 5px 5px 5px 18px; }
.drawer__cta .btn__ic { width: 34px; height: 34px; background: #fff; color: var(--accent); }
.drawer__close {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: var(--soft);
  transition: background 0.3s, transform 0.35s var(--ease-out);
}
.drawer__close:hover { background: var(--line); transform: rotate(90deg); }
.drawer__close svg { width: 15px; height: 15px; }

.drawer__nav { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; flex: 1; }
.drawer__label {
  opacity: 0.5; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  padding-bottom: 10px;
}
.drawer__link {
  font-size: 32px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.2;
  color: var(--ink); display: inline-block; align-self: flex-start;
  transition: color 0.25s, padding-left 0.35s var(--ease-out);
}
.drawer__link:hover { color: var(--accent); padding-left: 10px; }
/* Aktive Seite: Textmarker-Swipe wie bei .section-title em (aria-current setzt js/main.js) */
.drawer__link[aria-current="page"] { position: relative; z-index: 0; padding: 0 0.1em; margin: 0 -0.1em; }
.drawer__link[aria-current="page"]::before {
  content: ""; position: absolute; z-index: -1;
  left: -0.02em; right: -0.02em; top: 0.14em; bottom: 0.04em;
  background: var(--mark); border-radius: 0.16em 0.08em 0.14em 0.1em;
  transform: rotate(-1.1deg) skewX(-7deg); transform-origin: left center;
}
.drawer__link[aria-current="page"]:hover { padding-left: 0.1em; }

.drawer__footer { display: flex; gap: 24px; margin-top: auto; border-top: 1px solid var(--line); padding-top: 24px; }
.drawer__col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.drawer__col a { font-size: 14.5px; color: var(--ink); opacity: 0.8; transition: color 0.25s, opacity 0.25s; }
.drawer__col a:hover { color: var(--accent); opacity: 1; }
/* Team-Login (intern) → Outreach-Tool: kleine, dezente Pille statt Textlink */
.drawer__col a.drawer__intern {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 500; opacity: 1;
  transition: border-color 0.25s, color 0.25s;
}
.drawer__col a.drawer__intern:hover { border-color: var(--accent); }

/* ---------- Video-Panel (Intro-Video fliegt von rechts ein) ---------- */
.vpanel-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.vpanel-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Querformat-Karte: Intro-Videos sind 16:9, daher breit und vertikal zentriert */
.vpanel {
  position: fixed; top: 50%; right: 0; z-index: 120;
  width: min(960px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  overscroll-behavior: contain;
  transform: translate(110%, -50%);
  transition: transform 0.6s var(--ease-out);
  box-shadow: -30px 0 60px -30px rgba(24,24,27,0.3);
}
.vpanel.is-open { transform: translate(0, -50%); }

.vpanel__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vpanel__title { font-weight: 600; letter-spacing: -0.03em; font-size: 24px; line-height: 1.1; }
.vpanel__actions { display: flex; align-items: center; gap: 10px; }
.vpanel__langs { display: flex; gap: 4px; background: var(--soft); border-radius: 999px; padding: 4px; }
.vpanel__lang {
  padding: 11px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  color: var(--gray);
  transition: background 0.3s, color 0.3s;
}
.vpanel__lang:hover { color: var(--ink); }
.vpanel__lang.is-active { background: var(--ink); color: #fff; }
.vpanel__close {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: var(--soft);
  transition: background 0.3s, transform 0.35s var(--ease-out);
}
.vpanel__close:hover { background: var(--line); transform: rotate(90deg); }
.vpanel__close svg { width: 15px; height: 15px; }

.vpanel__video {
  display: block; flex: none; width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 200px);
  max-height: calc(100dvh - 200px);
  object-fit: contain;
  border-radius: var(--radius-lg); background: var(--ink);
}
.vpanel__meta strong { font-weight: 600; }
.vpanel__meta span { display: block; color: var(--gray); font-size: 14px; }
.vpanel__meta a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Info-Panels: Leistungs-Details (Startseite) ----------
   Klon des vpanel-Rezepts, aber textlastig: braucht internes Scrolling.
   Öffnen/Schließen + Hash-Deeplinks: main.js §10c. */
.ipanel-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.ipanel-overlay.is-open { opacity: 1; pointer-events: auto; }
.ipanel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(480px, 100%);
  background: #fff;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 18px;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(110%);
  transition: transform 0.6s var(--ease-out);
  box-shadow: -30px 0 60px -30px rgba(24,24,27,0.3);
}
.ipanel.is-open { transform: translateX(0); }
.ipanel__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ipanel__eyebrow {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 6px;
}
.ipanel__title { font-weight: 600; letter-spacing: -0.03em; font-size: 25px; line-height: 1.15; }
.ipanel__close {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: var(--soft);
  transition: background 0.3s, transform 0.35s var(--ease-out);
}
.ipanel__close:hover { background: var(--line); transform: rotate(90deg); }
.ipanel__close svg { width: 15px; height: 15px; }
.ipanel__media video, .ipanel__media img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); background: var(--ink); display: block;
}
.ipanel__media figcaption {
  font-family: var(--font-mono); font-size: 12px; color: var(--gray); margin-top: 8px;
}
.ipanel__text { color: var(--gray); font-size: 15px; line-height: 1.55; }
.ipanel__steps { list-style: none; }
.ipanel__steps li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.ipanel__steps span { font-family: var(--font-mono); font-size: 12px; color: var(--accent); padding-top: 2px; }
.ipanel__steps strong { font-weight: 600; font-size: 15px; }
.ipanel__steps small { display: block; color: var(--gray); font-size: 13.5px; margin-top: 2px; }
.ipanel__cta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.ipanel__cta .btn { width: 100%; }
.ipanel__alt {
  text-align: center; font-size: 14px; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 999px;
  font-weight: 600; font-size: 15px; line-height: 1;
  transition: transform 0.3s var(--ease-out), background 0.3s, color 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); }
.btn--ghost { color: var(--gray); padding-inline: 14px; }
.btn--ghost:hover { color: var(--ink); }
.btn--outline { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--bg); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--soft); }
/* Chancen-Check: überall hellblau, damit er neben dem Erstgespräch wiedererkannt wird */
.btn--check { background: var(--accent-ondark); color: var(--accent-deep); }
.btn--check:hover { background: #B9D1E7; }
.btn--lg { padding: 17px 34px; font-size: 16px; }

/* ---------- Shared section bits ---------- */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
.section-eyebrow--light { color: var(--accent-ondark); }
.section-title {
  font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04;
  max-width: 20ch;
}
/* Accent words: tilted marker swipe behind the text (replaces the italic serif).
   The em is an inline-block so it never splits across lines; the swipe is a
   pseudo-element. Dark grounds override --mark. */
.section-title em, .pagehero__title em {
  position: relative; z-index: 0; display: inline-block;
  font-style: normal; font-weight: inherit; color: inherit; letter-spacing: inherit;
  padding: 0 0.08em; margin: 0 -0.04em;
}
.section-title em::before, .pagehero__title em::before {
  content: ""; position: absolute; z-index: -1;
  left: -0.02em; right: -0.02em; top: 0.14em; bottom: 0.04em;
  background: var(--mark); border-radius: 0.16em 0.08em 0.14em 0.1em;
  transform: rotate(-1.1deg) skewX(-7deg); transform-origin: left center;
}
.band, .quotes, .membership__card { --mark: #2B5379; }
@media (prefers-reduced-motion: no-preference) {
  /* Split-text titles: draw the swipe after the words have risen in */
  [data-split-done] em::before { transform: rotate(-1.1deg) skewX(-7deg) scaleX(0); transition: transform 0.55s var(--ease-out) 0.45s; }
  [data-split-done].is-in em::before { transform: rotate(-1.1deg) skewX(-7deg) scaleX(1); }
}
.section-title--lg { font-size: clamp(38px, 5.2vw, 68px); max-width: 22ch; }
.section-title--center { margin-inline: auto; text-align: center; }

/* Split-text: masks. Bei engem line-height ragen Unterlängen (g, p, y) unter
   die Maske — Padding verlängert sie nach unten, die negative Margin hält das
   Layout gleich (Startposition yPercent 120 bleibt trotzdem verdeckt) */
.split-line { display: block; overflow: hidden; padding-bottom: 0.15em; margin-bottom: -0.15em; }
.split-word { display: inline-block; will-change: transform; }

/* ---------- Grain ---------- */
.grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity: 0.06; pointer-events: none; animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); }
  40% { transform: translate(3%,-4%); } 60% { transform: translate(-3%,-2%); } 80% { transform: translate(2%,4%); }
}

/* ---------- Hero ----------
   An inset rounded media card: video fills it, headline sits bottom-left,
   a 3-column stat row runs along the card's bottom edge. */
.hero {
  padding: calc(var(--header-h) + 52px) 20px 0;
}
.hero__card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: max(700px, calc(100svh - 80px)); /* etwas höher als der Bildschirm (Kundenwunsch 10.10.2026) */
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Abstand Titel ↔ oberer Kartenrand, auch wenn die Karte auf niedrigen Bildschirmen mitwächst */
  padding-top: clamp(56px, 8vh, 96px);
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(0.9);
}
/* Foto-Hintergrund: Spieler steht rechts im Bild, Kopf bleibt beim Beschnitt sichtbar */
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 18%;
}
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(14,29,44,0.7) 0%, rgba(14,29,44,0.4) 38%, rgba(14,29,44,0) 62%),
    linear-gradient(to bottom, rgba(14,29,44,0.45) 0%, rgba(14,29,44,0.18) 40%, rgba(14,29,44,0.82) 100%);
}

.hero__content {
  position: relative; color: #fff;
  padding: 0 clamp(28px, 4vw, 60px);
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,0.9);
  margin-bottom: 18px;
}
.hero__eyebrow svg { width: 14px; height: 14px; color: #fff; }
.hero__title {
  font-weight: 600; letter-spacing: -0.035em;
  font-size: clamp(42px, 6.4vw, 88px); line-height: 1.0;
  margin-bottom: 32px;
  text-align: left;
}
/* Feste Zeilen: „Dein College- / Tennis-Traum / beginnt mit uns!“ */
.hero__line { display: block; }
.hero__title:has(+ .hero__sub) { margin-bottom: 16px; }
.hero__sub {
  font-size: clamp(18px, 1.7vw, 23px); font-weight: 500; letter-spacing: -0.01em;
  color: rgba(255,255,255,0.92); margin-bottom: 30px;
}
.hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: clamp(32px, 5vh, 56px); }
.hero__btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero__note {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  line-height: 1.4; color: rgba(255,255,255,0.72);
}

/* Buttons mit Icon-Kreis am Ende (überall bei Erstgespräch/Chancen-Check, 10.10.2026):
   Pfeil fährt beim Hover hinaus und von links wieder herein, die Stoppuhr dreht einmal.
   Die Hover-Regeln hängen am direkten Eltern-Link, damit auch .header__cta und
   .drawer__cta (keine .btn) mitmachen. */
.btn--icon { gap: 10px; height: 48px; padding: 0 7px 0 22px; }
.btn__ic {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  transition: background 0.3s, color 0.3s;
}
.btn--light .btn__ic { background: var(--accent-deep); color: #fff; }
.btn--check .btn__ic { background: rgba(20,39,58,0.12); }
.btn--primary .btn__ic { background: #fff; color: var(--accent); }
.btn--outline .btn__ic { background: var(--ink); color: #fff; }
.btn--outline:hover .btn__ic { background: #fff; color: var(--ink); }
.btn__ic svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.btn__ar {
  position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; stroke-width: 1.8;
  transition: transform 0.45s var(--ease-out);
}
.btn__ar + .btn__ar { transform: translateX(-170%); }
:hover > .btn__ic > .btn__ar:first-child { transform: translateX(170%); }
:hover > .btn__ic > .btn__ar + .btn__ar { transform: none; }
.btn__watch { width: 17px; height: 17px; stroke-width: 2; }
.btn__hand { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.8s var(--ease-out); }
:hover > .btn__ic .btn__hand { transform: rotate(360deg); }
/* Kleine Fassung (Paket-Tabelle /vermittlung/) */
.btn--sm.btn--icon { height: 38px; gap: 8px; padding: 0 5px 0 15px; }
.btn--sm .btn__ic { width: 28px; height: 28px; }
.btn--sm .btn__ar { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .btn__ar, .btn__hand { transition: none; } }
.btn--outline-light { border: 1.5px solid rgba(255,255,255,0.65); color: #fff; background: transparent; }
.btn--outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* Video im Hero: schlanker Play-Link neben den beiden Buttons */
.hero__videolink {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 4px; font-size: 15px; font-weight: 600; line-height: 1.3; color: #fff;
}
.hero__videolink::before {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 55% 50% / 13px no-repeat;
  transition: background-color 0.3s;
}
.hero__videolink:hover::before { background-color: rgba(255,255,255,0.3); animation: vpulse 1s ease-out; }
@keyframes vpulse {
  from { box-shadow: 0 0 0 0 rgba(255,255,255,0.45); }
  to   { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) { .hero__videolink:hover::before { animation: none; } }

.hero__stats {
  position: relative; color: #fff;
  display: grid; grid-template-columns: repeat(3, minmax(0, 220px));
  gap: 0;
  padding: 22px clamp(28px, 4vw, 60px) 28px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.stat { padding: 0 24px; border-left: 1px solid rgba(255,255,255,0.25); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat__label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.stat__sub { display: block; font-size: 14px; color: rgba(255,255,255,0.65); font-variant-numeric: tabular-nums; }

/* Hero auf dem Handy: Foto oben frei (Gesicht nicht mehr hinter Text), Titel in drei
   Zeilen auf Navy, Video als schlanker Play-Link, Kennzahlen als kompakte 3er-Reihe.
   .stat__num ist auf dem Desktop ein normaler Inline-Span (keine Änderung). */
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--header-h) + 28px); }
  .hero .hero__card { min-height: 0; justify-content: flex-start; background: var(--accent-deep); padding-top: 0; }
  .hero .hero__img { position: relative; inset: auto; height: clamp(280px, 44svh, 420px); object-position: 80% 22%; }
  .hero .hero__shade {
    inset: 0 0 auto 0; height: clamp(280px, 44svh, 420px);
    background: linear-gradient(to bottom, rgba(20,39,58,0) 40%, rgba(20,39,58,0.55) 72%, var(--accent-deep) 100%);
  }
  .hero .hero__content { margin-top: -76px; padding: 0 22px; }
  .hero .hero__title { font-size: clamp(34px, 9.6vw, 42px); line-height: 1.04; max-width: none; margin-bottom: 26px; }
  .hero .hero__sub { font-size: 17px; margin-bottom: 22px; color: rgba(255,255,255,0.8); }
  /* Beide Buttons nebeneinander (kompakt), Hinweis darunter, Video zuletzt */
  .hero .hero__cta {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px;
    width: 100%; margin-bottom: 24px;
  }
  .hero .hero__btns { display: contents; }
  .hero .hero__note, .hero .hero__videolink { grid-column: 1 / -1; }
  .hero .hero__videolink { order: 1; justify-self: start; }
  .hero .hero__cta .btn--icon { justify-content: space-between; gap: 5px; padding: 0 4px 0 13px; font-size: 14px; }
  .hero .hero__cta .btn__ic { width: 30px; height: 30px; }
  .hero .hero__note { font-size: 11.5px; letter-spacing: 0.03em; text-wrap: balance; }
  .hero .hero__videolink { padding: 6px 0; }
  .hero .hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 18px 22px 22px; }
  .hero .stat { padding: 0 10px; border-left: 1px solid rgba(255,255,255,0.18); }
  .hero .stat:first-child { padding-left: 0; border-left: 0; }
  .hero .stat__label { display: none; }
  .hero .stat__num { display: block; margin-bottom: 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
  .hero .stat__sub { font-size: 12px; line-height: 1.35; }
}
/* Sehr schmale Handys: Stoppuhr weg, damit beide Hero-Buttons nebeneinander passen */
@media (max-width: 374px) {
  .hero .hero__cta .btn--check .btn__ic { display: none; }
  .hero .hero__cta .btn--check { justify-content: center; padding: 0 10px; }
}

/* ---------- Trust strip ---------- */
.trust { padding: clamp(48px, 7vw, 80px) 0 clamp(40px, 6vw, 64px); }
.trust__inner { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.trust__built { display: flex; align-items: center; gap: 14px; }
.trust__built p { font-size: 15.5px; font-weight: 500; }
.trust__avatars { display: flex; flex-shrink: 0; }
.trust__avatars img {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--bg); background: var(--accent-tint);
}
.trust__avatars img + img { margin-left: -11px; }
.trust__logos {
  display: flex; align-items: center; gap: clamp(32px, 5vw, 72px);
  flex-wrap: wrap; justify-content: center;
}
.trust__logos span {
  font-family: var(--font-sans); font-weight: 500; font-size: clamp(20px, 2vw, 27px);
  color: var(--gray-light); letter-spacing: 0; white-space: nowrap;
}

/* ---------- Ticker ---------- */
.ticker {
  border-block: 1px solid var(--line); padding: 20px 0;
  overflow: hidden; background: var(--paper);
}
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__group {
  display: flex; align-items: center; gap: 40px; padding-right: 40px;
  font-family: var(--font-mono); font-size: 15px; font-weight: 500;
  letter-spacing: 0.14em; white-space: nowrap; color: var(--ink);
}
.ticker__group i { font-style: normal; color: var(--accent); font-size: 9px; }
/* Ticker-Variante E (10.10.2026): Leistungen dezent (klein, grau, Tennisball statt Punkt) */
.ticker--quiet { padding: 16px 0; }
.ticker--quiet .ticker__group { gap: 28px; padding-right: 28px; font-size: 13px; color: var(--gray); }
.ticker--quiet .ticker__group i { display: inline-flex; }
.ticker--quiet .ticker__group svg {
  width: 14px; height: 14px; fill: none; stroke: var(--accent-mid); stroke-width: 1.8; stroke-linecap: round;
}

/* ---------- Unis: „Unsere Spielerinnen und Spieler studieren und spielen hier“ ----------
   Echte Vermittlungen als große, graue Logos mit Namen; farbig beim Darüberfahren. Läuft über
   den Ticker-Code (data-ticker), langsamer und gegenläufig, hält beim Darüberfahren an. */
.unis { padding: clamp(44px, 6vw, 64px) 0 clamp(36px, 5vw, 56px); }
/* Leistungs-Ticker dazwischen entfernt (10.10.2026): sonst stossen zwei grosse Abstände aufeinander */
.trust + .unis { padding-top: clamp(8px, 2vw, 24px); }
.unis__title {
  text-align: center; font-size: clamp(19px, 1.8vw, 22px); font-weight: 600; line-height: 1.3;
  letter-spacing: -0.01em; text-wrap: balance; margin-bottom: 26px; padding-inline: 20px;
}
.unis__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__group--unis {
  list-style: none; margin: 0; padding-left: 0;
  gap: 64px; padding-right: 64px; align-items: flex-start;
  font-family: var(--font-sans); letter-spacing: 0;
}
.uni { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.uni img {
  width: 56px; height: 56px; object-fit: contain;
  filter: grayscale(1); opacity: 0.6; transition: filter 0.3s, opacity 0.3s, transform 0.3s var(--ease-out);
}
.uni span { font-size: 12.5px; line-height: 1.3; color: var(--gray); white-space: normal; font-weight: 400; }
.uni:hover img { filter: none; opacity: 1; transform: translateY(-2px); }
@media (max-width: 560px) {
  .ticker__group--unis { gap: 36px; padding-right: 36px; }
  .uni { width: 96px; }
  .uni img { width: 44px; height: 44px; }
}

/* ---------- Dein Weg (/vermittlung/#ablauf): zentrierte Einleitung + sieben Etappen ---------- */
.weg { padding: clamp(70px, 9vw, 120px) 0 0; }
.weg__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.weg__title { max-width: none; }
.weg__title > span { display: block; }
.weg__lead { margin-top: clamp(28px, 4vw, 40px); font-size: 17px; font-weight: 500; color: var(--gray); }
/* Sieben Etappen (main.js §26). Desktop: Etappen in Zeile 1 des Grids (li = display:
   contents), die aktive Karte spannt Zeile 2. --i = aktive Etappe (0–6) füllt die Linie
   und setzt den Zeiger der Karte. Takt fürs Autoplay = Animation weg-timer an der Karte.
   Unter 1080px: Aufklapp-Liste, Karte unter ihrer Etappe, kein Autoplay. */
.weg__route { width: 100%; max-width: 1080px; margin-top: clamp(24px, 3vw, 34px); }
.weg__steps {
  --col: calc((100% - 72px) / 7);
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 12px;
}
.weg__steps::before,
.weg__steps::after {
  content: ""; position: absolute; top: 23px; height: 2px;
  left: calc(var(--col) / 2); right: calc(var(--col) / 2); background: var(--line);
}
.weg__steps::after {
  background: var(--accent); transform-origin: left;
  transform: scaleX(calc(var(--i, 0) / 6)); transition: transform 0.6s var(--ease-out);
}
.weg__item { display: contents; }
.weg__step {
  grid-row: 1; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0; border: 0; background: none; font: inherit; color: var(--gray); cursor: pointer;
  font-size: 15px; font-weight: 500; line-height: 1.35; text-align: center;
  transition: color 0.25s;
}
.weg__num {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 0 0 6px var(--bg);
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--accent);
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.weg__step:hover { color: var(--ink); }
.weg__step:hover .weg__num { border-color: var(--accent); }
.weg__step:focus-visible { outline: none; }
.weg__step:focus-visible .weg__num { outline: 2px solid var(--accent); outline-offset: 4px; }
.weg__step.is-done { color: var(--ink); }
.weg__step.is-done .weg__num { background: var(--accent-tint); border-color: var(--accent-tint); }
.weg__step.is-active { color: var(--ink); font-weight: 600; }
.weg__step.is-active .weg__num {
  background: var(--accent); border-color: var(--accent); color: var(--paper);
  transform: scale(1.1); box-shadow: 0 0 0 6px var(--bg), 0 0 0 8px var(--mark);
}
.weg__panel {
  grid-row: 2; grid-column: 1 / -1; position: relative; margin-top: 30px;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px 48px; align-items: center;
  padding: 34px 40px; min-height: 230px; text-align: left;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  animation: weg-in 0.5s var(--ease-out);
}
.weg__panel[hidden] { display: none; }
/* Zeiger auf die aktive Etappe */
.weg__panel::before {
  content: ""; position: absolute; top: -9px; width: 16px; height: 16px;
  left: calc((100% - 72px) / 14 + var(--i, 0) * ((100% - 72px) / 7 + 12px) - 8px);
  background: var(--paper); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.weg__kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-mid); }
.weg__panel h3 { margin-top: 10px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.weg__panel-text > p:not(.weg__kicker) { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--gray); }
.weg__cta { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--accent); }
.weg__cta:hover { text-decoration: underline; }
.weg__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.weg__points li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius); background: var(--bg);
  font-size: 15.5px; font-weight: 500; line-height: 1.4;
}
.weg__points li::before {
  content: "✓"; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent); font-size: 12px; font-weight: 700;
}
/* Autoplay-Takt: Balken läuft an der Unterkante der Karte, sein Ende schaltet weiter */
.weg__route.is-auto .weg__panel::after {
  content: ""; position: absolute; left: var(--radius-lg); right: var(--radius-lg); bottom: -1px; height: 2px;
  background: var(--accent-mid); transform-origin: left;
  animation: weg-timer 7s linear forwards; animation-play-state: paused;
}
.weg__route.is-auto.is-inview .weg__panel::after { animation-play-state: running; }
.weg__route.is-auto.is-inview:hover .weg__panel::after,
.weg__route.is-auto.is-inview:focus-within .weg__panel::after { animation-play-state: paused; }
@keyframes weg-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes weg-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .weg__panel { animation: none; } }
@media (max-width: 1080px) {
  .weg__route { max-width: 560px; }
  .weg__steps { display: flex; flex-direction: column; gap: 14px; }
  .weg__steps::before { top: 24px; bottom: 24px; left: 23px; right: auto; width: 2px; height: auto; }
  .weg__steps::after,
  .weg__panel::before,
  .weg__route.is-auto .weg__panel::after { display: none; }
  .weg__item { display: block; }
  .weg__step { width: 100%; flex-direction: row; gap: 18px; text-align: left; font-size: 16px; }
  .weg__step::after { content: "+"; margin-left: auto; font-size: 20px; font-weight: 400; color: var(--gray); transition: transform 0.3s; }
  .weg__step.is-active::after { transform: rotate(45deg); }
  .weg__num { box-shadow: none; }
  .weg__step.is-active .weg__num { transform: none; box-shadow: 0 0 0 4px var(--mark); }
  .weg__panel { margin: 12px 0 4px 66px; grid-template-columns: 1fr; padding: 22px 22px 24px; min-height: 0; }
  .weg__panel h3 { font-size: 21px; }
  .weg__points { gap: 10px; }
  .weg__points li { padding: 0; background: none; font-size: 15px; }
}
@media (max-width: 560px) {
  .weg__panel { margin-left: 0; }
}
.weg__text { margin-top: clamp(32px, 4vw, 44px); max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--gray); }
.weg__claim { margin-top: 18px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.02em; color: var(--accent); }

/* ---------- Dein Weg: kleiner Banner zur Vermittlungsseite (Startseite) ---------- */
.wegteaser { padding: clamp(56px, 7vw, 96px) 0 0; }
.wegteaser__card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px;
  max-width: 1080px; margin-inline: auto; padding: clamp(26px, 3.5vw, 40px) clamp(24px, 4vw, 48px);
  background: var(--accent-deep); color: var(--bg); border-radius: var(--radius-lg);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.wegteaser__card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(20, 39, 58, 0.55); }
.wegteaser__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ondark); }
.wegteaser__title { margin-top: 10px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.wegteaser__title em { font-style: normal; color: var(--accent-ondark); }
.wegteaser__sub { margin-top: 10px; max-width: 52ch; font-size: 16px; line-height: 1.55; color: rgba(250, 249, 246, 0.72); }
.wegteaser__btn { flex: none; }
.wegteaser__card:hover .wegteaser__btn { background: var(--soft); }
@media (max-width: 760px) {
  .wegteaser__card { flex-direction: column; align-items: flex-start; }
}

/* ---------- Ablauf: Schritt-Karussell (Scroll-Snap + Auto-Advance) ----------
   Gleiche Mechanik wie der Video-Rezensionen-Slider (.tslider): nativer Track,
   aktive Karte mittig, Nachbarn angeschnitten + gedimmt. Chips springen zur
   Karte, der Balken im aktiven Chip ist der Auto-Advance-Timer (main.js §7). */
.pathway { background: var(--bg); padding: clamp(64px, 8vw, 104px) 0; }
.pathway__head { margin-bottom: clamp(28px, 4vw, 44px); }
.pathway__sub { color: var(--gray); max-width: 44ch; margin-top: 16px; }

.steps { --step-w: clamp(560px, 58vw, 760px); --step-gap: 20px; }
.steps__track {
  position: relative; display: flex; gap: var(--step-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-block: 8px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.steps__track::-webkit-scrollbar { display: none; }
.step {
  flex: 0 0 var(--step-w); width: var(--step-w); position: relative; margin: 0;
  scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 30px 60px -30px rgba(24,24,27,0.15);
  opacity: 0.5; transform: scale(0.96);
  transition: opacity 0.4s, transform 0.5s var(--ease-out);
}
.step:first-child { margin-inline-start: calc(50% - var(--step-w) / 2); }  /* erste/letzte mittig einrastbar */
.step:last-child  { margin-inline-end:   calc(50% - var(--step-w) / 2); }
.step.is-active { opacity: 1; transform: none; }
.step__visual { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.step__visual video, .step__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.step__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px) clamp(24px, 2.6vw, 34px);
}
.step__body h3 { font-weight: 600; letter-spacing: -0.02em; font-size: clamp(22px, 2.2vw, 30px); }
.step__body p { color: var(--gray); max-width: 56ch; font-size: 16px; }
.pathway__tag {
  align-self: flex-start; font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  padding: 7px 14px; border-radius: 999px; background: var(--soft); color: var(--gray);
}

/* Chips (Sprungmarken) + Pfeile/Zähler unter dem Track */
.steps__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.steps__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px; }
.steps__chips::-webkit-scrollbar { display: none; }
.steps__chip { position: relative; overflow: hidden; flex-shrink: 0; }
/* Fortschrittsbalken des Auto-Advance am unteren Rand des aktiven Chips;
   GSAP skaliert das innere <i> von 0 auf 1 */
.pathway__navbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  overflow: hidden; pointer-events: none;
}
.pathway__navbar i {
  display: block; height: 100%; width: 100%;
  background: var(--accent-ondark); transform: scaleX(0); transform-origin: left;
}
.steps__nav { margin-top: 0; flex-shrink: 0; }

/* ---------- Product sections (four full screens) ---------- */
.product { padding: clamp(70px, 9vw, 130px) 0; }
.product__grid {
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: center;
  gap: clamp(40px, 6vw, 100px);
}
.product--flip .product__grid { grid-template-columns: 1.1fr 1fr; }
.product--flip .product__copy { order: 2; }
.product--flip .product__media { order: 1; }
.product__sub { color: var(--gray); margin: 22px 0 26px; max-width: 50ch; }
.product__link {
  font-weight: 600; font-size: 15.5px; color: var(--accent-dark);
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
  transition: color 0.25s;
}
.product__link:hover { color: var(--ink); }

/* Shared mockup card */
.mock {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 2.4vw, 34px);
  box-shadow: 0 40px 80px -40px rgba(24,24,27,0.22);
  display: flex; flex-direction: column; gap: 14px;
}
.mock__head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 16px; margin-bottom: 6px;
}
.mock__pill {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  background: var(--soft); color: var(--gray);
  padding: 6px 12px; border-radius: 999px;
}
.mock__foot { font-family: var(--font-mono); font-size: 12px; color: var(--gray-light); padding-top: 6px; }

/* Biomarker panel mock */
.mock__row {
  display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--soft);
}
.mock__name { font-size: 14px; font-weight: 500; }
.mock__track { height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; display: block; }
.mock__track i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent); }
.mock__status {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 5px 10px; border-radius: 999px;
}
.mock__status.is-good { background: #e5f0e5; color: #2f6b3a; }
.mock__status.is-mid { background: #fdf0d5; color: #8a6d1d; }
.mock__status.is-bad { background: #fde3d7; color: #b13d12; }

.mock__name small { display: block; font-size: 11px; color: var(--gray-light); font-weight: 500; }

/* Recruiting-Video mock: landscape player inside the card */
.mock--video .vcard video { aspect-ratio: 16 / 10; border-radius: var(--radius); }
.mock--video .mock__tags { padding-top: 14px; }

/* Full-photo product media (College Reise) */
.product__photo {
  width: 100%; border-radius: var(--radius-lg); object-fit: cover;
  aspect-ratio: 4 / 3;
  box-shadow: 0 40px 80px -40px rgba(24,24,27,0.25);
}

/* Dashboard mock */
.mock--dash { flex-direction: row; align-items: center; gap: clamp(20px, 3vw, 40px); }
.mock__score { position: relative; width: clamp(140px, 14vw, 190px); flex-shrink: 0; color: var(--accent); }
.mock__ring { stroke-dasharray: 326.7; stroke-dashoffset: 326.7; }
.mock__score-num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--ink);
  font-weight: 600; font-size: clamp(34px, 3.4vw, 46px); letter-spacing: -0.03em;
}
.mock__score-num small { font-size: 12px; font-weight: 500; color: var(--gray); letter-spacing: 0; }
.mock__chartwrap { flex: 1; display: flex; flex-direction: column; gap: 16px; color: var(--accent); }
.mock__chartline { stroke-dasharray: 320; stroke-dashoffset: 320; }
.mock__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mock__chips span {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--gray);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
}

/* Protocol mock */
.mock__check { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--soft); }
.mock__check i {
  min-width: 44px; height: 24px; padding: 0 8px; border-radius: 999px; flex-shrink: 0;
  background: var(--accent-tint); color: var(--accent); font-style: normal;
  font-family: var(--font-mono);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
}
.mock__check strong { display: block; font-size: 15px; font-weight: 600; }
.mock__check small { color: var(--gray); font-size: 13px; }
.mock__tags { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 8px; }
.mock__tags span {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--gray);
  background: var(--soft); border-radius: 999px; padding: 6px 12px;
}

/* Chat mock */
.mock--chat { max-width: 460px; margin-inline: auto; }
.mock__chat-head { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--soft); }
.mock__chat-head i {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-mid));
}
.mock__chat-head strong { display: block; font-size: 15px; }
.mock__chat-head small { color: var(--gray); font-size: 12.5px; }
.mock__bubble {
  max-width: 85%; padding: 12px 16px; border-radius: 18px;
  font-size: 14.5px; line-height: 1.45;
}
.mock__bubble--them { background: var(--soft); border-bottom-left-radius: 6px; align-self: flex-start; }
.mock__bubble--me { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.mock__typing { display: flex; gap: 5px; padding: 10px 16px; align-self: flex-start; }
.mock__typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gray-light);
  animation: typing 1.2s ease-in-out infinite;
}
.mock__typing span:nth-child(2) { animation-delay: 0.15s; }
.mock__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------- Price anchor ---------- */
.price { padding: clamp(90px, 12vw, 160px) 0; background: var(--paper); border-block: 1px solid var(--line); }
.price__title {
  font-weight: 600; letter-spacing: -0.03em; text-align: center;
  font-size: clamp(36px, 5.4vw, 72px); line-height: 1.08;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.price__title em { font-style: normal; color: var(--accent); }
.price__strike { position: relative; white-space: nowrap; color: var(--gray-light); }
.price__strike::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 52%;
  height: 0.09em; background: var(--accent); border-radius: 99px;
  transform: scaleX(0); transform-origin: left;
}
.price__strike.is-struck::after { transform: scaleX(1); transition: transform 0.7s var(--ease-out) 0.2s; }
.price__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.price__item {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 6px;
  background: var(--bg);
}
.price__item strong { font-size: 15.5px; font-weight: 600; }
.price__item small { color: var(--gray); font-size: 13.5px; flex: 1; }
.price__item span {
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
  font-weight: 600; padding-top: 8px;
}
.price__layout {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 100px); align-items: start;
}
.price__intro { position: sticky; top: calc(var(--header-h) + 24px); }
.price__sub { color: var(--gray); max-width: 44ch; margin: 18px 0 32px; }
.price__ctanote { color: var(--gray); font-size: 14px; margin-top: 14px; }
.price__list { border-top: 1px solid var(--line); }

.pitem { border-bottom: 1px solid var(--line); }
.pitem summary {
  list-style: none; display: flex; align-items: center; gap: 18px;
  padding: 22px 4px; cursor: pointer; transition: color 0.25s;
}
.pitem summary::-webkit-details-marker { display: none; }
.pitem summary:hover { color: var(--accent-dark); }
.pitem__num {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--gray-light);
  flex-shrink: 0; padding-top: 3px;
}
.pitem__head { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pitem__head strong { font-weight: 600; letter-spacing: -0.01em; font-size: clamp(17px, 1.7vw, 21px); }
.pitem__head small { color: var(--gray); font-size: 13.5px; }
.pitem__tag {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  color: var(--accent); background: var(--accent-tint);
  border-radius: 999px; padding: 6px 12px; flex-shrink: 0; white-space: nowrap;
}
.pitem__tag--optional { color: var(--gray); background: var(--soft); }
.pitem__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.pitem__icon::before, .pitem__icon::after {
  content: ""; position: absolute; background: var(--accent); border-radius: 2px;
  transition: transform 0.35s var(--ease-out);
}
.pitem__icon::before { left: 0; right: 0; top: 7px; height: 2px; }
.pitem__icon::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.pitem[open] .pitem__icon::after { transform: scaleY(0); }
.pitem__body { overflow: hidden; }
.pitem__body p { color: var(--gray); max-width: 58ch; padding: 0 4px 16px; font-size: 15.5px; }
.pitem__body ul {
  list-style: none; padding: 0 4px 26px; display: flex; flex-direction: column; gap: 9px;
}
.pitem__body li {
  position: relative; padding-left: 24px;
  color: var(--ink); font-size: 14.5px; line-height: 1.5;
}
.pitem__body li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700; font-size: 13px;
}
.price__cta { text-align: center; }
.price__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.price__intro .price__cta { text-align: left; }

/* ---------- Video testimonials + press ---------- */
.vids { padding: clamp(90px, 12vw, 150px) 0 clamp(60px, 8vw, 100px); }
.vids .section-title { margin-bottom: clamp(40px, 5vw, 64px); }
.vids__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vcard { position: relative; }
.vcard video {
  width: 100%; aspect-ratio: 3 / 3.6; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--ink);
}
/* Play-Button (alle Videos): Milchglas-Ring, weisse Scheibe innen (::before),
   sanfter Puls-Ring (::after). Hover auf Knopf, Video oder Karte → Scheibe
   im Akzent-Blau, Icon weiss, Puls aus. */
.vcard__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
  transition: transform 0.45s var(--ease-out), opacity 0.35s, color 0.3s;
  box-shadow: 0 20px 44px -16px rgba(24,24,27,0.55);
}
.vcard__play::before {
  content: ""; position: absolute; inset: 9px; z-index: -1; border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px -6px rgba(24,24,27,0.35);
  transition: background 0.3s, inset 0.45s var(--ease-out);
}
.vcard__play::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.75);
  pointer-events: none;
  animation: vplay-pulse 2.6s var(--ease-out) infinite;
}
@keyframes vplay-pulse {
  0%       { transform: scale(1);    opacity: 0.9; }
  70%,100% { transform: scale(1.45); opacity: 0; }
}
.vcard__play svg { width: 24px; height: 24px; margin-left: 3px; }
.vcard__play svg path { stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; }
.vcard__play:hover { transform: translate(-50%, -60%) scale(1.08); }
.vcard__play:hover, .vcard__play:focus-visible,
.svc:hover .vcard__play, .eventreel__media:hover .vcard__play, .tslide__media:hover .vcard__play { color: #fff; }
.vcard__play:hover::before, .vcard__play:focus-visible::before,
.svc:hover .vcard__play::before, .eventreel__media:hover .vcard__play::before,
.tslide__media:hover .vcard__play::before { background: var(--accent); inset: 6px; }
.vcard__play:hover::after, .svc:hover .vcard__play::after,
.eventreel__media:hover .vcard__play::after, .tslide__media:hover .vcard__play::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .vcard__play::after { animation: none; opacity: 0; } }
@media (max-width: 560px) { .vcard__play { width: 68px; height: 68px; } .vcard__play::before { inset: 8px; } }
.vcard.is-playing .vcard__play { opacity: 0; pointer-events: none; }
.vcard:hover.is-playing .vcard__play { opacity: 1; pointer-events: auto; }
.vcard figcaption { padding: 14px 6px 0; }
.vcard figcaption strong { font-weight: 600; }
.vcard figcaption span { display: block; color: var(--gray); font-size: 14px; }

/* ---------- Membership ---------- */
.membership { padding: clamp(90px, 12vw, 150px) 0; }
.membership__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.membership__list { list-style: none; margin-top: 32px; }
.membership__list li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 16.5px; font-weight: 500;
}
.membership__list i {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: #e5f0e5; color: #2f6b3a; font-style: normal;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.membership__card {
  background: var(--accent-deep); color: var(--bg);
  border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 50px 90px -40px rgba(24,24,27,0.45);
  transform: rotate(1.2deg);
  transition: transform 0.5s var(--ease-out);
}
.membership__card:hover { transform: rotate(0deg) translateY(-4px); }
.membership__cardhead { display: flex; justify-content: space-between; align-items: center; }
.membership__brand { font-weight: 700; letter-spacing: -0.02em; font-size: 22px; }
.membership__cardhead .mock__pill { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
.membership__price {
  font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(56px, 6vw, 84px); font-variant-numeric: tabular-nums;
}
.membership__price small { font-size: 0.32em; color: rgba(255,255,255,0.6); font-weight: 500; }
.membership__price--word { font-size: clamp(38px, 4.4vw, 60px); }
.membership__permo { color: rgba(255,255,255,0.65); font-size: 15px; }
/* Navy on the near-black card would vanish — use a white button instead */
.membership__btn { margin-top: 10px; background: #fff; color: var(--accent); }
.membership__btn:hover { background: var(--accent-tint); }
.membership__fine { font-family: var(--font-mono); font-size: 11.5px; color: rgba(255,255,255,0.45); }

/* ---------- Newsletter ---------- */
.newsletter { padding: 0 0 clamp(90px, 12vw, 150px); }
.newsletter__inner {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 56px);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center;
}
.newsletter__copy p { color: var(--gray); margin-top: 14px; max-width: 44ch; }
.newsletter__form { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.newsletter__form input {
  flex: 1; min-width: 220px;
  font: inherit; font-size: 15px;
  padding: 15px 20px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--ink);
  outline: none; transition: border-color 0.25s;
}
.newsletter__form input:focus { border-color: var(--accent); }
.newsletter__ok { width: 100%; color: #2f6b3a; font-weight: 600; font-size: 15px; padding-top: 4px; }

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.35s;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed; z-index: 140; top: 50%; left: 50%;
  width: min(560px, calc(100vw - 40px));
  background: var(--paper); border-radius: var(--radius-lg);
  padding: clamp(28px, 3.4vw, 44px);
  transform: translate(-50%, -46%) scale(0.96); opacity: 0; visibility: hidden;
  transition: transform 0.45s var(--ease-out), opacity 0.35s, visibility 0.45s;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.5);
}
.modal.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
.modal__label { font-weight: 600; letter-spacing: -0.02em; font-size: clamp(20px, 2vw, 26px); margin-bottom: 14px; padding-right: 40px; }
.modal p:not(.modal__label) { color: var(--gray); font-size: 16px; }
.modal__close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--soft); color: var(--ink); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, transform 0.35s var(--ease-out);
}
.modal__close:hover { background: var(--line); transform: rotate(90deg); }

/* Sprungziel „Kontakt“ (Header/Menü → /erstgespraech/#anfrage): Formular nicht unter dem
   schwebenden Header verstecken */
#anfrage { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Team-Bios (/team/): Kopf mit Foto, Name und Rolle; darunter schlichte Absätze in der Ich-Form */
.modal--bio { max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.bio__head {
  display: flex; align-items: center; gap: 16px;
  padding: 0 48px 22px 0; margin-bottom: 22px; border-bottom: 1px solid var(--line);
}
.bio__avatar {
  width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%;
  object-fit: cover; background: var(--accent-tint);
}
.bio__name { font-weight: 600; letter-spacing: -0.02em; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
.modal--bio p.bio__role {
  margin-top: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; color: var(--accent);
}
.bio__text p { line-height: 1.65; }
.bio__text p + p { margin-top: 16px; }

/* ---------- Modal-Variante: Anmeldeformular im iframe (Zite, /events/) ----------
   Doppelte Klasse .modal.modal--form, damit diese Regeln auch die Mobile-
   Overrides von .modal weiter unten im File schlagen (Media Queries erhöhen die
   Spezifität nicht — sonst entscheidet allein die Quellreihenfolge).
   Zentrierung über inset statt translate: das Standard-.modal hat keine
   Höhenbegrenzung, mit einer 1400–2000 px hohen Fremdseite liefe es oben und
   unten aus dem Viewport und der Schließen-Button wäre bei body.no-scroll nicht
   mehr erreichbar. Zusätzlich bricht ein transform am Vorfahren in WebKit das
   Touch-Scrollen im iframe. */
.modal.modal--form,
.modal.modal--form.is-open {
  transform: none;
  top: 24px; bottom: 24px; left: 0; right: 0;
  margin-inline: auto;
  width: min(880px, calc(100vw - 24px));
  height: auto; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
  /* visibility ohne Übergangsdauer schalten (beim Schließen verzögert, damit
     das Ausblenden sichtbar bleibt): mit der geerbten 0,45-s-Transition wäre
     das Modal direkt nach dem Klassenwechsel noch „hidden" — der Fokus auf den
     Schließen-Button liefe dann wirkungslos ins Leere. */
  transition: opacity 0.35s, visibility 0s linear 0.35s;
}
.modal.modal--form.is-open { transition: opacity 0.35s, visibility 0s linear 0s; }
.modal--form .modal__bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--line);
}
.modal--form .modal__label {
  flex: 1; min-width: 0; margin: 0; padding: 0; font-size: 17px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Immer sichtbarer Ausweg: sollte Zite je X-Frame-Options setzen, bliebe der
   Rahmen leer — ein geblockter iframe feuert trotzdem load und ist von außen
   nicht erkennbar. Deshalb ein Link statt einer Timeout-Heuristik. */
.modal--form .modal__ext {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px;
  color: var(--gray); text-decoration: underline; text-underline-offset: 3px;
}
.modal--form .modal__ext:hover { color: var(--accent); }
.modal--form .modal__close { position: static; flex: 0 0 auto; width: 44px; height: 44px; }
.modal__framewrap {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--bg);
}
/* width:1px + min-width:100% — älteres WebKit dehnt iframes auf Inhaltshöhe und
   ignoriert overflow; dann scrollt eben der Wrapper statt des Rahmens. */
.modal__frame { display: block; width: 1px; min-width: 100%; height: 100%; border: 0; }
.modal__loading {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: var(--bg); font-family: var(--font-mono); font-size: 13px; color: var(--gray);
}
.modal--form.is-loading .modal__loading { display: flex; }
@media (max-width: 700px) {
  /* Vollbild — das Formular ist auf schmalen Viewports über 2000 px hoch */
  .modal.modal--form,
  .modal.modal--form.is-open {
    inset: 0; width: 100%; border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal--form .modal__bar { padding-left: 16px; }
}

/* ---------- Dark band ---------- */
.band {
  background: var(--accent-deep); color: var(--bg);
  padding: clamp(90px, 12vw, 160px) 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.band__title {
  font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(38px, 5.6vw, 72px); margin-bottom: clamp(48px, 6vw, 80px);
}
.band__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.bstat { border-top: 1px solid rgba(250,250,250,0.18); padding-top: 24px; }
.bstat__num {
  display: block; font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(40px, 5vw, 76px); line-height: 1; margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.bstat__label { color: rgba(250,250,250,0.6); font-size: 15px; max-width: 32ch; display: block; }

/* ---------- Quotes ---------- */
.quotes { background: var(--accent-deep); color: var(--bg); padding: 0 0 clamp(90px, 12vw, 150px); }
.quotes__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: 48px; }
.quotes__head .section-title { color: var(--bg); }
.quotes__arrows { display: flex; gap: 10px; }
.arrow {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(250,250,250,0.3); font-size: 18px;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}
.arrow:hover { background: var(--bg); color: var(--ink); transform: translateY(-2px); }

.quotes__viewport { overflow: hidden; cursor: grab; padding-left: max(24px, calc((100vw - 1240px) / 2)); }
.quotes__viewport.is-dragging { cursor: grabbing; }
.quotes__track { display: flex; gap: 20px; width: max-content; will-change: transform; padding-right: 48px; }
.qcard {
  width: min(460px, 82vw); flex-shrink: 0;
  background: rgba(250,250,250,0.05); border: 1px solid rgba(250,250,250,0.14);
  border-radius: var(--radius-lg); padding: 34px;
  display: flex; flex-direction: column; gap: 22px;
  user-select: none;
}
.qcard__img {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 2; margin: -10px -10px 4px;
}
.qcard__img img { width: 100%; height: 100%; object-fit: cover; }
.qcard__utr {
  align-self: flex-start; font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--accent-ondark); background: rgba(156,190,221,0.14);
  padding: 7px 14px; border-radius: 999px;
}
.qcard blockquote { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; }
.qcard figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.qcard figcaption strong { font-weight: 600; }
.qcard figcaption span { color: rgba(250,250,250,0.5); font-size: 14px; }

/* ---------- Medical team ---------- */
.coaches { padding: 0 0 clamp(90px, 12vw, 160px); }
.coaches .section-title { margin-bottom: clamp(40px, 5vw, 64px); }
.coaches__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.coach[data-modal-open] { cursor: pointer; }
.coach__photo {
  aspect-ratio: 1 / 1.1; border-radius: var(--radius);
  overflow: hidden; position: relative;
  margin-bottom: 18px;
}
.coach__photo img {
  width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
  transition: transform 0.6s var(--ease-out); filter: saturate(0.92);
}
.coach:hover .coach__photo img { transform: scale(1.05); }
.coach__more {
  display: inline-block; margin-top: 10px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--accent-dark); opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s, transform 0.35s var(--ease-out);
}
.coach:hover .coach__more, .coach:focus-visible .coach__more { opacity: 1; transform: translateY(0); }
.coach h3 { font-weight: 600; letter-spacing: -0.01em; font-size: 21px; }
.coach__role { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 6px 0 10px; }
.coach__bio { color: var(--gray); font-size: 15px; }
.coach__bio--list { list-style: disc; padding-left: 1.1em; }
.coach__bio--list li + li { margin-top: 4px; }

/* ---------- FAQ ---------- */
.faq { padding: 0 0 clamp(90px, 12vw, 160px); }
.faq__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.faq__left { position: sticky; top: calc(var(--header-h) + 24px); }
.faq__ask { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.faq__note { color: var(--gray); margin-top: 20px; font-size: 15px; }
.faq__note a { color: var(--accent); font-weight: 600; }
.faq__ask + .faq__note { margin-top: 10px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 4px; cursor: pointer;
  font-weight: 600; letter-spacing: -0.01em; font-size: clamp(18px, 1.8vw, 23px);
  transition: color 0.25s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-dark); }
.faq__icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--accent); border-radius: 2px;
  transition: transform 0.35s var(--ease-out);
}
.faq__icon::before { left: 0; right: 0; top: 8px; height: 2px; }
.faq__icon::after { top: 0; bottom: 0; left: 8px; width: 2px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }
.faq__body { overflow: hidden; }
.faq__body p { padding: 0 4px 26px; color: var(--gray); max-width: 62ch; }
.faq__body p:not(:last-child) { padding-bottom: 12px; }

/* ---------- CTA ---------- */
.cta {
  position: relative; overflow: hidden;
  background: var(--accent); color: #fff;
  padding: clamp(48px, 6vw, 80px) 0;
  border-radius: var(--radius-lg);
  margin: 0 24px;
}
.cta__bg { position: absolute; inset: 0; }
.cta__bg::before {
  content: ""; position: absolute; width: 60vw; height: 60vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 60%);
  top: -30%; right: -20%;
}
/* College-Foto je Seite, per luminosity ins Navy eingefärbt — Text bleibt lesbar */
.cta__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.32; mix-blend-mode: luminosity;
}
.cta__photo--top { object-position: 50% 0%; }   /* Kopf liegt am oberen Bildrand */
.cta__photo--face { object-position: 85% 25%; } /* cta-faq: Spieler rechts neben dem Text, Gesicht frei, Hand zeigt auf den Titel */
.cta__inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta__title {
  font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; max-width: 24ch; margin-bottom: 14px;
}
.cta__sub { max-width: 50ch; opacity: 0.92; margin-bottom: 24px; }

/* ---------- Footer ---------- */
.footer { padding: clamp(40px, 5vw, 64px) 0 20px; overflow: hidden; }
.footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: clamp(24px, 3vw, 36px); }
.footer__brand { font-weight: 700; letter-spacing: 0.14em; font-size: 19px; display: block; margin-bottom: 10px; }
.footer__col p { color: var(--gray); font-size: 14px; }
/* Slogan unter dem Logo (vor der Kurzbeschreibung) */
.footer__col p.footer__slogan {
  margin-bottom: 6px; max-width: 30ch;
  font-size: clamp(16px, 1.3vw, 18px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink);
}
.footer__slogan em {
  font-style: normal; padding: 0 0.12em; background: var(--mark);
  border-radius: 0.16em 0.08em 0.14em 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.footer__col p.footer__about { margin-top: 12px; max-width: 40ch; line-height: 1.6; }
.footer__col h4 { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; }
.footer__col a { display: block; padding: 3px 0; font-size: 14.5px; color: var(--gray); transition: color 0.25s, padding-left 0.3s var(--ease-out); }
.footer__col a:hover { color: var(--accent); padding-left: 6px; }
.footer__giant {
  display: block;
  width: min(440px, 70vw); margin-inline: auto;
  color: var(--accent); opacity: 0.08;
  /* Kein eigener translateY: GSAP (main.js §footerGiant) addiert seinen yPercent sonst dazu,
     und „ZICK“ ragte am Seitenende über die Linie in die Rechtszeile. */
}
.footer__legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px;
  font-size: 13px; color: var(--gray);
}
.footer__legal a:hover { color: var(--accent); }

/* ---------- Sticky CTA ---------- */
.stickycta {
  --sc-bottom: calc(16px + env(safe-area-inset-bottom));
  position: fixed; bottom: var(--sc-bottom); left: 50%; z-index: 80;
  /* Ausgeblendet: eigene Höhe + Abstand unten + Schatten. Nur 140 % reichten am iPhone nicht
     (Sicherheitsrand unten), die Pille ragte über Abschluss-CTA und Footer (Fix 10.10.2026) */
  transform: translate(-50%, calc(100% + var(--sc-bottom) + 48px));
  visibility: hidden; will-change: transform;
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--accent-deep) 94%, transparent);
  color: var(--bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 6px 6px 6px 18px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 20px 40px -16px rgba(24,24,27,0.4);
  transition: transform 0.6s var(--ease-out), visibility 0s linear 0.6s;
}
.stickycta.is-visible { transform: translate(-50%, 0); visibility: visible; transition: transform 0.6s var(--ease-out); }
.stickycta > span { margin-right: 6px; }
/* Same contrast rule inside the dark pill */
.stickycta .btn--primary { background: #fff; color: var(--accent); }
.stickycta .btn--primary:hover { background: var(--accent-tint); }
/* Kompakt auch am Desktop (≈46 statt 62px hoch, Wunsch 10.10.2026) */
.stickycta .btn { font-size: 13px; }
.stickycta .btn--icon { height: 34px; gap: 6px; padding: 0 4px 0 13px; }
.stickycta .btn__ic { width: 26px; height: 26px; }
.stickycta .btn__ar { width: 12px; height: 12px; }
.stickycta .btn__watch { width: 14px; height: 14px; }
.stickycta { max-width: calc(100vw - 20px); }
/* Text-Hinweis schon unter 760px weg (vorher erst ≤560px): dazwischen ragte die Pille über den Rand */
@media (max-width: 760px) {
  .stickycta > span { display: none; }
  .stickycta { padding: 6px; gap: 6px; }
}
.stickycta .btn--primary .btn__ic { background: var(--accent-deep); color: #fff; }

/* ---------- Unterseiten: Page-Hero ---------- */
.pagehero {
  padding: calc(var(--header-h) + 100px) 0 clamp(40px, 6vw, 72px);
  text-align: center;
}
.pagehero .section-eyebrow { margin-bottom: 16px; }
.pagehero__title {
  font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(38px, 5.4vw, 68px); line-height: 1.05;
  max-width: 22ch; margin-inline: auto;
  /* Keine automatische Silbentrennung (trennte auch „Showca-ses", „dei-nen");
     lange Einzelwörter bekommen im HTML eine feste Trennstelle (&shy;),
     z. B. „Datenschutz&shy;erklärung" — overflow-wrap fängt den Rest ab */
  overflow-wrap: break-word; hyphens: manual;
}
/* .pagehero__title em: marker accent, shared rule next to .section-title em */
.pagehero__sub { color: var(--gray); max-width: 56ch; margin: 20px auto 0; font-size: clamp(16px, 1.4vw, 18.5px); }

/* /team/: Pille mit Team-Gesichtern unterm Seitentitel, springt zum Raster */
.teamproof {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: clamp(28px, 3.6vw, 40px); padding: 8px 22px 8px 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 6px 24px -14px rgba(20, 39, 58, 0.35);
  text-align: left; transition: border-color 0.3s, box-shadow 0.3s;
}
.teamproof:hover { border-color: var(--accent-mid); box-shadow: 0 10px 30px -14px rgba(20, 39, 58, 0.45); }
.teamproof__faces { display: flex; flex-shrink: 0; }
.teamproof__faces img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--paper); background: var(--accent-tint);
}
.teamproof__faces img + img { margin-left: -12px; }
.teamproof__text { font-size: 15.5px; font-weight: 500; color: var(--ink); }
@media (max-width: 560px) {
  .teamproof { flex-direction: column; gap: 10px; padding: 14px 18px; border-radius: var(--radius-lg); text-align: center; }
  .teamproof__faces img { width: 36px; height: 36px; }
}

/* ---------- Events: Filter-Chips ---------- */
.events { padding-bottom: clamp(90px, 12vw, 150px); }
.events__filter {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.chip {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--gray);
  transition: all 0.3s var(--ease-out);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Events: Karten ---------- */
.events__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ecard {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
              filter 0.45s var(--ease-out), background 0.45s, color 0.45s;
}
.ecard:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(24,24,27,0.18); }
.ecard__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ecard__date {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  background: var(--accent-tint); color: var(--accent);
  padding: 7px 14px; border-radius: 999px;
}
.ecard__cat {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray-light);
}
.ecard h3 { font-weight: 600; letter-spacing: -0.02em; font-size: 23px; line-height: 1.2; }
.ecard__meta { font-size: 14.5px; color: var(--gray); display: flex; flex-direction: column; gap: 4px; }
.ecard__desc { color: var(--gray); font-size: 15px; flex: 1; }
.ecard__spots {
  font-family: var(--font-mono); font-size: 12px; color: #2f6b3a;
  background: #e5f0e5; align-self: flex-start; padding: 6px 12px; border-radius: 999px;
}
.ecard__spots.is-low { color: #b13d12; background: #fde3d7; }

/* ---------- Events: Termin-Zustände (main.js §25) ---------- */
.ecard__badge {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent);
}
.ecard__countdown {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.ecard__cta { width: 100%; margin-top: 2px; }
/* Breite Termin-Karte (.ecard--wide): volle Zeile, Text auf Lesebreite begrenzt */
.ecard--wide { grid-column: 1 / -1; }
.ecard--wide .ecard__meta,
.ecard--wide .ecard__desc { max-width: 72ch; }
.ecard__desc p + p { margin-top: 10px; }
.ecard--wide .ecard__cta { width: auto; align-self: flex-start; }
/* Breite Termin-Karte mit Video: Handy im Fluss (quer), ab 900px rechts neben dem Text
   (absolut – Badge/Countdown aus §25 bleiben direkte Kinder der Karte) */
.ecard__media--side { position: relative; margin: 4px 0; border-radius: var(--radius); overflow: hidden; background: var(--ink); }
.ecard__media--side video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 40%; }
.ecard__media--side figcaption {
  position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px;
  background: rgba(20, 39, 58, 0.72); color: rgba(250, 249, 246, 0.9);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@media (min-width: 900px) {
  .ecard--wide {
    --ec-pad: clamp(28px, 3vw, 40px);
    position: relative; min-height: 560px;
    padding: var(--ec-pad) calc(36% + var(--ec-pad) * 1.6) var(--ec-pad) var(--ec-pad);
  }
  .ecard--wide .ecard__media--side { position: absolute; top: 14px; right: 14px; bottom: 14px; width: 36%; margin: 0; }
  .ecard--wide .ecard__media--side video { height: 100%; aspect-ratio: auto; }
  .ecard--wide h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.03em; line-height: 1.12; }
  .ecard--wide .ecard__meta { font-size: 15.5px; gap: 8px; margin-top: 2px; }
  .ecard--wide .ecard__desc { font-size: 15.5px; line-height: 1.65; }
}

/* Karten mit eigenem Layout (Sonder-Event) behalten einen mitwachsenden Button */
.ecard__cta--auto { width: auto; align-self: flex-start; }
.ecard__cta[aria-disabled="true"] {
  background: var(--soft); color: var(--gray-light);
  cursor: not-allowed; pointer-events: none;   /* Maus aus; Enter/Space fängt §25 ab */
}

/* Vergangene Termine: bewusst filter statt opacity. GSAP animiert beim Reveal
   (§4) die opacity der Karte — eine CSS-Regel darauf bräuchte !important und
   würde dann auch den Von-Zustand (opacity: 0) überschreiben: die Karte stünde
   halbsichtbar da, während die Nachbarn noch unsichtbar sind. filter
   multipliziert sich sauber mit dem Fade-in und liefert das Ausgrauen mit. */
.ecard.is-past { filter: grayscale(1) opacity(0.55); }
.ecard.is-past:hover { transform: none; box-shadow: none; }
.ecard.is-past .ecard__badge { background: var(--soft); color: var(--gray); }

/* Nächster Termin: Navy-Karte analog .pkg--featured. Jedes farbige Kind braucht
   ein Override — .btn--primary (#1E3B55) wäre auf --accent-deep (#14273A) fast
   unsichtbar, --gray käme nur auf ~3,2:1 Kontrast. */
.ecard.is-next {
  background: var(--accent-deep); color: var(--bg); border-color: transparent;
  box-shadow: 0 30px 60px -30px rgba(20,39,58,0.55);
}
.ecard.is-next h3 { color: var(--bg); }
.ecard.is-next .ecard__badge,
.ecard.is-next .ecard__date,
.ecard.is-next .ecard__spots { background: rgba(255,255,255,0.14); color: var(--accent-ondark); }
.ecard.is-next .ecard__cat { color: rgba(250,249,246,0.6); }
.ecard.is-next .ecard__meta,
.ecard.is-next .ecard__desc { color: rgba(250,249,246,0.74); }
.ecard.is-next .ecard__spots.is-low,
.ecard--reise .ecard__spots.is-low { background: rgba(255,138,90,0.18); color: #FFC2A8; }
.ecard.is-next .ecard__countdown { color: var(--accent-ondark); }
.ecard.is-next .ecard__cta { background: #fff; color: var(--accent); }
.ecard.is-next .ecard__cta:hover { background: var(--accent-tint); }
.ecard.is-next .ecard__cta[aria-disabled="true"] {
  background: rgba(255,255,255,0.12); color: rgba(250,249,246,0.55);
}

/* College-Reise-Sonderkarte: volle Breite, Navy, Video rechts. Hat bewusst kein
   <time>-Element — dadurch fassen is-next/is-past (§25) sie nie an; sie steht
   immer hinter den Terminen. CTA ist ein Link, kein .ecard__cta-Button.
   Text oben links, Flugroute + Wochenplan unten links — zusammen so hoch wie
   das Hochformat-Video rechts, damit links kein Leerraum bleibt. */
.ecard--reise {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "body media" "plan media";
  grid-template-rows: 1fr auto;
  column-gap: clamp(24px, 4vw, 56px); row-gap: clamp(24px, 3vw, 36px);
  align-items: start;
  background: var(--accent-deep); color: var(--bg); border-color: transparent;
  padding: clamp(26px, 4vw, 44px);
  box-shadow: 0 30px 60px -30px rgba(20,39,58,0.55);
}
.ecard--reise:hover { transform: none; }
.ecard--reise .ecard__body { grid-area: body; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ecard--reise h3 { color: var(--bg); font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.1; }
.ecard--reise .ecard__meta,
.ecard--reise .ecard__desc { color: rgba(250,249,246,0.74); flex: none; }
.ecard--reise .btn { margin-top: 6px; }
/* Video ist Hochformat (9:16) — schmale Spalte, damit die Karte nicht zu hoch wird */
.ecard--reise .ecard__media { grid-area: media; width: clamp(220px, 24vw, 300px); justify-self: center; }
.ecard--reise .ecard__media video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: var(--radius); background: var(--ink); display: block;
}
.ecard--reise .ecard__media figcaption {
  font-family: var(--font-mono); font-size: 12px; color: rgba(250,249,246,0.6); margin-top: 10px;
}

/* Flugroute FRA→MIA + Wochenplan in der College-Reise-Karte. Das Flugzeug
   fliegt per SMIL (animateMotion) den Bogen entlang — skaliert mit der Karte. */
.reise-plan {
  grid-area: plan;
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid rgba(250,249,246,0.12);
}
.reise-plan__route { display: flex; align-items: flex-end; gap: clamp(14px, 2.4vw, 30px); }
.reise-plan__port { display: flex; flex-direction: column; gap: 3px; }
.reise-plan__port strong {
  font-family: var(--font-mono); font-weight: 600; line-height: 1;
  font-size: clamp(24px, 2.8vw, 34px); letter-spacing: 0.05em; color: var(--bg);
}
.reise-plan__port span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(250,249,246,0.55);
}
.reise-plan__port--arr { text-align: right; }
.reise-plan__sky { flex: 1; min-width: 0; color: var(--accent-ondark); }
.reise-plan__flight { width: 100%; height: auto; display: block; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .reise-plan__plane { display: none; } }
.reise-plan__steps {
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(20px, 3vw, 30px);
}
.reise-plan__steps::before {
  content: ""; position: absolute; top: 3.5px; left: 4px; right: 4px; height: 1px;
  background: rgba(250,249,246,0.16);
}
.reise-plan__steps li { position: relative; padding-top: 16px; }
.reise-plan__steps li::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-mid); box-shadow: 0 0 0 4px var(--accent-deep);
}
.reise-plan__day {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-ondark);
}
.reise-plan__steps p { font-size: 14px; line-height: 1.5; color: rgba(250,249,246,0.74); }
/* Handy: Video über die volle Kartenbreite (4:5 statt schmaler 9:16-Streifen mit Leerraum),
   Bildunterschrift als Pille auf dem Video (wie .ecard__media--side), Button daumenbreit */
@media (max-width: 560px) {
  .ecard--reise { padding: 22px; row-gap: 22px; }
  .ecard--reise .ecard__body { gap: 12px; align-items: stretch; }
  .ecard--reise .ecard__body > * { align-self: flex-start; }
  .ecard--reise .ecard__cta--auto { align-self: stretch; width: 100%; }
  .ecard--reise .ecard__media { width: 100%; position: relative; }
  .ecard--reise .ecard__media video { aspect-ratio: 4 / 5; object-position: 50% 45%; }
  .ecard--reise .ecard__media figcaption {
    position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 6px 12px; border-radius: 999px;
    background: rgba(20, 39, 58, 0.72); color: rgba(250, 249, 246, 0.9);
    font-size: 11.5px; letter-spacing: 0.04em;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .reise-plan { padding-top: 20px; }
  .reise-plan__port strong { font-size: 22px; }
  .reise-plan__steps { margin-top: 18px; }
}

/* Fillout-Popup-Button an .btn--primary angleichen (nur noch /erstgespraech/) */
.fillout-popup-slot button {
  width: 100%;
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 24px !important;
  transition: transform 0.3s var(--ease-out), background 0.3s !important;
}

/* ---------- Legal-Textseiten ---------- */
.legal { padding-bottom: clamp(90px, 12vw, 150px); }
.legal__body { max-width: 72ch; margin-inline: auto; overflow-wrap: break-word; }
.legal__body h2 { font-weight: 600; letter-spacing: -0.02em; font-size: 26px; margin: 40px 0 12px; }
.legal__body h3 { font-weight: 600; font-size: 19px; margin: 28px 0 8px; }
.legal__body p, .legal__body li { color: var(--gray); font-size: 16px; }
.legal__body ul { padding-left: 22px; margin: 10px 0; }
.legal__body .placeholder {
  background: #fdf0d5; color: #8a6d1d; padding: 2px 8px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .coaches__grid { grid-template-columns: repeat(2, 1fr); }
  .product__grid, .product--flip .product__grid { grid-template-columns: 1fr; gap: 40px; }
  .product--flip .product__copy { order: 1; }
  .product--flip .product__media { order: 2; }
  .price__grid { grid-template-columns: repeat(2, 1fr); }
  .price__layout { grid-template-columns: 1fr; }
  .price__intro { position: static; }
  .events__grid { grid-template-columns: repeat(2, 1fr); }
  .vids__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .membership__grid { grid-template-columns: 1fr; gap: 48px; }
  .newsletter__inner { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .header__nav, .header__login { display: none; }
  .header__inner { grid-template-columns: auto 1fr auto; }
  .header__logo { justify-self: start; }
  .header__wrapper { padding: 12px 16px; }
  .drawer__login { display: none; }
  .hero { padding-left: 12px; padding-right: 12px; }
  .hero__stats { grid-template-columns: 1fr; gap: 14px; }
  .stat { padding: 0; border-left: 0; }
  .band__grid { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__left { position: static; }
  /* Logo-Spalte über die volle Breite, Agentur + Kontakt nebeneinander darunter */
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__col--brand { grid-column: 1 / -1; }
  .quotes__head { grid-template-columns: 1fr; align-items: start; }
  /* Pathway: Karussell auch mobil — 1 Karte + Anschnitt, Chips scrollen, Pfeile darunter */
  .pathway { padding: 40px 0 16px; }
  .steps { --step-w: min(86vw, 520px); --step-gap: 14px; }
  .steps__bar { flex-direction: column; align-items: stretch; }
  .steps__nav { justify-content: center; }
  .ecard--reise { grid-template-columns: 1fr; grid-template-areas: "body" "media" "plan"; grid-template-rows: auto; }
  /* Wochenplan mobil: vertikale Timeline statt 5 Spalten */
  .reise-plan__steps { grid-template-columns: 1fr; gap: 16px; }
  .reise-plan__steps::before { top: 4px; bottom: 4px; left: 3.5px; right: auto; width: 1px; height: auto; }
  .reise-plan__steps li { padding-top: 0; padding-left: 22px; }
  .reise-plan__steps li::before { top: 4px; }
  .reise-plan__day { margin-bottom: 3px; }
}
@media (max-width: 560px) {
  /* Lange Button-Labels („Kostenloses Erstgespräch buchen" ≈ 324px) dürfen
     umbrechen — mit nowrap dehnen sie auf 320px-Geräten den Layout-Viewport */
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
  /* Header mobil: CTA raus (Erstgespräch bleibt über Sticky-CTA-Pille und
     drawer__cta erreichbar), Logo kleiner — sonst liegt der Burger offscreen
     (Logo + 221px-CTA + Burger brauchen ~470px Mindestbreite) */
  .header__cta { display: none; }
  /* Logo- und Pillengrößen laufen fließend über clamp() (Header-Regeln oben), kein Sprung hier */
  /* Webinar-Banner: mobil Kurztext, damit der Anmelde-Link nicht wegellipsiert */
  .header__banner .banner-long { display: none; }
  .header__banner .banner-short { display: inline; }
  /* Kapitel-Chips (/vermittlung/): kompakter + Fade-Kante als Scroll-Hinweis */
  .subnav__track {
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    padding-right: 20px;
  }
  .subnav .chip { padding: 8px 10px; font-size: 12px; }
  .subnav__track { gap: 6px; }
  /* Direkt unter der gescrollten Navi-Pille (Header ≈61px inkl. Rand) andocken statt bei
     --header-h + 8px — sonst lief der Seitentext durch eine Lücke (Wunsch 10.10.2026) */
  .subnav { top: 62px; }
  /* Scrollende Tabellen: Fade-Kante rechts signalisiert „wischen" */
  .orient__tablewrap, .pmatrix__wrap {
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), rgba(0,0,0,0.35));
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), rgba(0,0,0,0.35));
  }
  /* Drawer/Panels füllen den Screen komplett — kein Seitenstreifen mehr daneben */
  .drawer { width: 100%; border-radius: 0; }
  .ipanel { width: 100%; border-radius: 0; padding: 20px 16px; }
  .coaches__grid { grid-template-columns: 1fr; }
  .price__grid { grid-template-columns: 1fr; }
  .pitem summary {
    display: grid; grid-template-columns: auto 1fr auto; row-gap: 12px;
    grid-template-areas: "num head icon" "num tag icon";
  }
  .pitem__num { grid-area: num; }
  .pitem__head { grid-area: head; }
  .pitem__tag { grid-area: tag; justify-self: start; }
  .pitem__icon { grid-area: icon; align-self: start; margin-top: 14px; }
  .events__grid { grid-template-columns: 1fr; }
  .vids__grid { grid-template-columns: 1fr; }
  .mock--dash { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  /* Schmale Pille: Text-Hinweis weg, nur die zwei Buttons mit kleinen Icon-Kreisen */
  .stickycta > span { display: none; }
  /* Handy: näher an den unteren Rand (bis in den Sicherheitsrand, über dem Home-Balken) und kompakter */
  .stickycta { --sc-bottom: max(10px, calc(env(safe-area-inset-bottom) - 10px)); padding: 6px; gap: 6px; }
  .stickycta .btn { font-size: 12px; white-space: nowrap; }
  .stickycta .btn--icon { height: 34px; gap: 6px; padding: 0 4px 0 12px; }
  .stickycta .btn__ic { width: 26px; height: 26px; }
  .stickycta .btn__ar { width: 12px; height: 12px; }
  .stickycta .btn__watch { width: 14px; height: 14px; }
  .btn--icon { white-space: nowrap; }   /* kurze Labels: kein Umbruch am Bindestrich */
  .pagehero { padding-top: calc(var(--header-h) + 48px); }
  .trust__inner { gap: 24px; }
  .trust__built { flex-direction: column; text-align: center; gap: 10px; }
  .trust__logos { gap: 16px 24px; }
  .trust__logos span { font-size: 17px; }
  .ticker__group { gap: 24px; padding-right: 24px; }
  .signedgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .qcard { padding: 24px; }
  .newsletter__form input { min-width: 0; flex-basis: 100%; }
  .newsletter__form .btn { width: 100%; }
  .cta { margin: 0 12px; }
  .cta__bg::before { display: none; }
  .modal { padding: 24px 20px; }
  .modal__label { padding-right: 44px; }
  .bio__avatar { width: 52px; height: 52px; }
  .bio__head { gap: 12px; padding-bottom: 18px; margin-bottom: 18px; }
  .vpanel { width: 100%; border-radius: 0; padding: 16px; }
  .footer__cols { gap: 28px 20px; }
  .footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  /* Sehr schmale Geräte (320er): auch der Banner-Kurztext kostet den
     Anmelde-Link — dann nur den Link zeigen */
  .header__banner .banner-short { display: none; }
}

/* ---------- Echte Medien: Video-Loops, Intro-Videos, SIGNED-Wall ---------- */
/* Hochformat-Clips (Reels) in den Leistungs-Sektionen */
.product__reel { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.product__vid {
  display: block; width: min(380px, 100%); margin-inline: auto;
  aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--ink);
  box-shadow: 0 40px 80px -40px rgba(24,24,27,0.25);
}
.product__reel figcaption {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--gray); text-align: center;
}

/* Intro-Videos (16:9, mit Ton) */
.vids__grid--duo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.vids__grid--duo .vcard video { aspect-ratio: 16 / 9; }

/* ---------- Pakete (Basis / Premium / VIP+) ---------- */
.packages { padding: clamp(90px, 12vw, 150px) 0; }
.packages__head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.packages__sub { color: var(--gray); margin-top: 16px; }
.packages__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  align-items: stretch;
}
.pkg {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.pkg:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(24,24,27,0.2); }
.pkg__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pkg__tier {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray);
}
.pkg__badge {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  padding: 5px 10px; border-radius: 99px;
  background: var(--accent-tint); color: var(--accent); font-weight: 600;
}
.pkg__name { font-weight: 600; letter-spacing: -0.02em; font-size: clamp(24px, 2.2vw, 30px); }
.pkg__desc { color: var(--gray); font-size: 15px; }
.pkg__plus {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em;
  color: var(--accent); font-weight: 600;
  padding-top: 6px; border-top: 1px solid var(--line);
}
.pkg__list { list-style: none; flex: 1; }
.pkg__list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; font-size: 14.5px; line-height: 1.45;
}
.pkg__list i {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: #e5f0e5; color: #2f6b3a; font-style: normal;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.pkg__note { font-family: var(--font-mono); font-size: 11.5px; color: var(--gray-light); }
.pkg .btn { justify-content: center; text-align: center; }

.pkg--featured { background: var(--accent-deep); color: var(--bg); border-color: transparent; }
.pkg--featured .pkg__tier { color: rgba(250,249,246,0.6); }
.pkg--featured .pkg__badge { background: rgba(255,255,255,0.14); color: var(--accent-ondark); }
.pkg--featured .pkg__desc { color: rgba(250,249,246,0.72); }
.pkg--featured .pkg__plus { color: var(--accent-ondark); border-top-color: rgba(255,255,255,0.15); }
.pkg--featured .pkg__list i { background: rgba(255,255,255,0.14); color: var(--accent-ondark); }
.pkg--featured .pkg__note { color: rgba(250,249,246,0.5); }
.pkg--featured .btn { background: #fff; color: var(--accent); }
.pkg--featured .btn:hover { background: var(--accent-tint); }

@media (max-width: 1024px) {
  .packages__grid { grid-template-columns: 1fr; }
}

/* SIGNED-Wall im Erfolge-Band */
.band__wallnote {
  margin-top: clamp(40px, 5vw, 64px);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em;
  color: rgba(250,250,250,0.55);
}
.band__wall { margin-top: 28px; overflow: hidden; }
.ticker__group--wall { gap: 16px; padding-right: 16px; }
.ticker__group--wall img {
  width: clamp(150px, 16vw, 210px); aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: 14px; display: block;
}

/* Event-Clips auf Unterseiten */
.eventreel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px; max-width: 1040px; margin-inline: auto;
  padding-bottom: clamp(40px, 6vw, 70px);
}
.eventreel figure { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.eventreel video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--ink);
}
/* Klick-zum-Abspielen: Play-Button in der Optik von .vcard__play, mittig auf dem Clip
   (auch College-Reise-Karte auf /events/ und Leistungs-Karten der Startseite) */
.eventreel__media, .svc__media { position: relative; }
.eventreel__media video, .svc__media video { cursor: pointer; }
.eventreel__media .vcard__play, .svc__media .vcard__play { transform: translate(-50%, -50%); cursor: pointer; }
.eventreel__media:hover .vcard__play, .svc:hover .vcard__play { transform: translate(-50%, -50%) scale(1.08); }
.eventreel__media .vcard__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.eventreel__media.is-playing .vcard__play, .svc__media.is-playing .vcard__play { opacity: 0; pointer-events: none; }
.eventreel figcaption {
  font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink); text-align: center;
}
.eventreel--single { max-width: 340px; }

/* Mobile: Event-Clips als wischbares Karussell (Scroll-Snap, nächster Clip lugt rein) */
@media (max-width: 700px) {
  .eventreel {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -24px; padding-inline: 24px;
    scrollbar-width: none;
  }
  .eventreel::-webkit-scrollbar { display: none; }
  .eventreel figure { flex: 0 0 76%; scroll-snap-align: center; }
}

/* ---------- Leistungs-Karten (Startseite) ---------- */
.svcs { padding: clamp(70px, 9vw, 130px) 0; }
.svcs__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px; margin-top: clamp(36px, 4vw, 56px);
}
.svc {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.svc:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(24,24,27,0.3); }
/* Hochkant auch auf dem Handy (Kundenwunsch 10.10.2026) – die Videos sind 9:16 */
.svc__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.svc__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.svc h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.svc__body p { color: var(--gray); font-size: 15.5px; flex: 1; }
.svc__go { font-weight: 600; color: var(--accent); font-size: 15px; }

/* Link im Erfolge-Band + Solo-Intro-Video */
.band__more { color: var(--accent-ondark); font-weight: 600; white-space: nowrap; }
.band__more:hover { text-decoration: underline; }
.vids__grid--solo { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
.vids__grid--solo .vcard video { aspect-ratio: 16 / 9; }
.vids__grid--solo figcaption a { color: var(--accent); font-weight: 600; }

/* Handy: Leistungs-Karten als Wisch-Reihe, die nächste Karte schaut an (Mobbin: Fresha,
   Grab, Airtasker). Spart rund 2.500 px Scrollweg, Hochformat bleibt (Kundenwunsch 10.10.) */
@media (max-width: 640px) {
  .svcs__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: -24px; padding: 4px 24px 14px; scroll-padding-inline: 24px;
    scrollbar-width: none;
  }
  .svcs__grid::-webkit-scrollbar { display: none; }
  .svc { scroll-snap-align: start; }
  .svc:hover { transform: none; box-shadow: none; }
}

/* Startseite: Stimmen (Bewertung + kurze Zitate + Erfolgs-Karte) */
.voices { padding: 0 0 clamp(70px, 9vw, 130px); }
.voices__head {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap;
  gap: 20px 32px; margin-bottom: clamp(32px, 4vw, 52px);
}
.voices__score {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; transition: border-color 0.25s;
}
.voices__score:hover { border-color: var(--accent); }
.voices__stars, .voice__stars { color: #D99A2B; letter-spacing: 3px; }
.voices__stars { font-size: 16px; }
.voices__score strong { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.voices__all { font-size: 14px; font-weight: 600; color: var(--accent); }
.voices__grid { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: 20px; align-items: stretch; }
.voice {
  margin: 0; display: flex; flex-direction: column; gap: 16px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 2.4vw, 30px);
}
.voice__stars { font-size: 14px; }
.voice blockquote { margin: 0; flex: 1; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.voice figcaption { display: flex; align-items: center; gap: 12px; }
.voice figcaption strong { display: block; font-weight: 600; }
.voice figcaption small { color: var(--gray); font-size: 14px; }
.voice__avatar {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  object-fit: cover; object-position: center 20%;
}
.voice__avatar--initials {
  display: grid; place-items: center; background: var(--accent-tint);
  color: var(--accent); font-size: 14px; font-weight: 600;
}
.voice--signed {
  background: var(--accent-deep); color: #fff; border-color: transparent;
  gap: 10px; transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.voice--signed:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(20,39,58,0.6); }
.voice__wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.voice__wall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.voice__big { font-size: clamp(40px, 4.4vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.voice__text { color: rgba(255,255,255,0.75); font-size: 15.5px; }
.voice__go { margin-top: auto; padding-top: 8px; color: var(--accent-ondark); font-weight: 600; font-size: 15px; }
@media (max-width: 960px) { .voices__grid { grid-template-columns: 1fr 1fr; } .voice--signed { grid-column: 1 / -1; } .voice__wall { max-width: 360px; } }
@media (max-width: 640px) { .voices__grid { grid-template-columns: 1fr; } }

/* /so-arbeiten-wir/: nummerierte Schritt-Karten statt Textwand (Mobbin: Wise, OpenPhone, Clay) */
.howto { padding-bottom: clamp(90px, 12vw, 150px); }
.howto__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: howto; }
.howto__step {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 32px);
}
.howto__step::before {
  counter-increment: howto; content: counter(howto, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
  color: var(--accent); background: var(--accent-tint);
  align-self: flex-start; border-radius: 999px; padding: 6px 11px;
}
.howto__step h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.howto__step p { color: var(--gray); font-size: 15.5px; }
.howto__step a, .howto__partner a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.howto__partner {
  margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 40px;
  background: var(--accent-tint); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px);
}
.howto__partner h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.howto__partner p { color: var(--ink); font-size: 15.5px; }
@media (max-width: 960px) { .howto__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .howto__grid, .howto__partner { grid-template-columns: 1fr; } }

/* Chancen-Check / Erstgespräch: Zeitstrahl „So geht es nach dem Absenden weiter"
   (Mobbin: Mercury). Desktop drei Schritte nebeneinander mit Linie, Handy untereinander. */
.nextsteps-wrap { max-width: 1120px; margin: clamp(32px, 4vw, 52px) auto 0; }
.nextsteps__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray); text-align: center; margin-bottom: 20px;
}
.nextsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: nextstep; }
.nextsteps li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-top: 42px; text-align: center;
}
.nextsteps li::before {
  counter-increment: nextstep; content: counter(nextstep);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
}
.nextsteps li:not(:last-child)::after {
  content: ""; position: absolute; top: 15px; height: 1px; background: var(--line);
  left: calc(50% + 24px); width: calc(100% + 24px - 48px);
}
.nextsteps strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.nextsteps__text { color: var(--gray); font-size: 14.5px; max-width: 32ch; }
@media (max-width: 640px) {
  .nextsteps { grid-template-columns: 1fr; gap: 22px; }
  .nextsteps li { align-items: flex-start; text-align: left; padding: 3px 0 0 46px; }
  .nextsteps li::before { left: 0; transform: none; }
  .nextsteps li:not(:last-child)::after { left: 15px; top: 36px; bottom: -18px; width: 1px; height: auto; }
  .nextsteps__label { text-align: left; }
}

/* ---------- Feinschliff nach Mobbin (Icons, Hover, Fokus) ---------- */
/* Tastatur-Fokus: einheitlicher Ring, nur bei Tastaturbedienung; :where() hält die
   Spezifität bei null, eigene Fokus-Regeln einzelner Elemente gewinnen weiter */
:where(a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
       select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 3px;   /* Ring folgt dem eigenen Radius */
}
:where(.hero, .cta, .band, .stickycta, .voice--signed, .pkg--featured) :where(:focus-visible) { outline-color: var(--accent-ondark); }

/* Pfeil-Links wandern beim Hover der Karte mit (Mobbin: Intercom „Read it here →", Fiasco) */
.go-arr { display: inline-block; transition: transform 0.3s var(--ease-out); }
.svc:hover .go-arr, .svc:focus-visible .go-arr,
.partner:hover .go-arr, .partner:focus-visible .go-arr,
.voice--signed:hover .go-arr, .voice--signed:focus-visible .go-arr,
.voices__score:hover .go-arr, .voices__score:focus-visible .go-arr { transform: translateX(4px); }

/* Leistungs-Karten: Bild zoomt beim Hover leicht (nur Desktop, nur ohne reduzierte Bewegung) */
.svc__media { overflow: hidden; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .svc__img { transition: transform 0.6s var(--ease-out); }
  .svc:hover .svc__img { transform: scale(1.04); }
}

/* Footer „Kontakt": Icon vor jedem Link (Mobbin: WhatsApp, Grain, Dovetail, Sprout Social) */
.footer__col a.ico { display: flex; align-items: center; gap: 9px; }
.footer__col a.ico svg {
  width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.65; transition: opacity 0.25s, transform 0.3s var(--ease-out);
}
.footer__col a.ico:hover svg { opacity: 1; transform: scale(1.1); }

/* Paket-Tabelle: runde Häkchen-Icons statt Textzeichen (Mobbin: Ramp, Mixpanel, Cofounder);
   VIP+-Spalte gefüllt, damit das Komplettpaket heraussticht */
.pmatrix .ck {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-tint); vertical-align: middle;
}
.pmatrix .ck::before {
  content: ""; width: 12px; height: 12px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pmatrix td.pmatrix__vip .ck { background: var(--accent); }
.pmatrix td.pmatrix__vip .ck::before { background: #fff; }
.pmatrix td small { margin-top: 4px; }

/* SIGNED-Grid (Unterseite /erfolge/) */
.signedgrid {
  margin-top: 28px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.signedgrid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; display: block; }
/* Gekürzte Wall (main.js §28): --wall-h = erste Reihen + Anschnitt der nächsten, die ausblendet */
.signedgrid { transition: max-height 0.7s var(--ease-out); }
.signedgrid.is-collapsed { max-height: var(--wall-h); overflow: hidden; }
.signedgrid.is-collapsed:not(.is-expanding) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), transparent);
}
.signedmore { display: flex; justify-content: center; margin-top: 22px; }
.signedmore[hidden] { display: none; }
.signedmore__btn::after { content: "↓"; margin-left: 10px; transition: transform 0.3s var(--ease-out); }
.signedmore__btn[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Hover-Karte pro SIGNED-Kachel: Wimpel in Uni-Farbe (--pc, Textfarbe --pt),
   Signing-Semester als Mono-Label, Name + Uni. Auf Touch öffnet der Tap
   über tabindex/:focus-within. */
.signedcard { position: relative; overflow: hidden; border-radius: 14px; margin: 0; cursor: pointer; }
.signedcard img { transition: transform 0.45s var(--ease-out); }
.signedcard:hover img, .signedcard:focus-within img { transform: scale(1.06); }
.signedcard:focus-visible { outline: 2px solid var(--accent-ondark); outline-offset: 3px; }
.signedcard__info {
  position: absolute; inset: 0; padding: 12px 13px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(20,39,58,0) 32%, rgba(20,39,58,0.55) 58%, rgba(20,39,58,0.94) 100%);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s, transform 0.35s var(--ease-out);
  pointer-events: none;
}
.signedcard:hover .signedcard__info, .signedcard:focus-within .signedcard__info { opacity: 1; transform: translateY(0); }
.signedcard__pennant {
  align-self: flex-start; display: inline-flex; align-items: center;
  height: 19px; padding: 0 20px 0 8px; margin-bottom: 8px;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
  background: var(--pc, var(--accent-mid)); color: var(--pt, #fff);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em;
}
.signedcard__sem {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-ondark); margin-bottom: 3px;
}
.signedcard__name { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--bg); }
.signedcard__uni { display: block; font-size: 11.5px; line-height: 1.35; color: rgba(250,250,250,0.72); margin-top: 2px; }

/* Großes SIGNED-Popover (nur Hover-Geräte — Touch behält das Kachel-Overlay).
   Schwebt neben der Kachel, Uni-Farbe kommt als --pc/--pt von der Kachel. */
@media (hover: hover) and (pointer: fine) {
  .signedcard__info { display: none; }
}
.signedpop {
  position: fixed; z-index: 105; width: 336px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 20px; padding: 14px;
  box-shadow: 0 40px 80px -24px rgba(20,39,58,0.45), 0 8px 24px -12px rgba(20,39,58,0.25);
  opacity: 0; pointer-events: none;
  transform: translateY(14px) scale(0.9) rotate(-1.6deg);
  transition: opacity 0.18s, transform 0.18s var(--ease-out);
}
.signedpop.is-on {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
  transition: opacity 0.22s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.signedpop__head { display: flex; align-items: center; gap: 12px; padding: 2px 4px 12px; }
.signedpop__logo {
  width: 46px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 13px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc, var(--accent-mid)) 18%, transparent);
}
.signedpop__logo img { width: 30px; height: 30px; object-fit: contain; }
.signedpop [hidden] { display: none !important; }
.signedpop__mono {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--pt, #fff); background: var(--pc, var(--accent-mid));
  padding: 5px 7px; border-radius: 8px;
}
.signedpop__school { min-width: 0; }
.signedpop__uni { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.signedpop__loc {
  display: flex; align-items: center; gap: 5px; margin-top: 3px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray);
}
.signedpop__loc svg { width: 12px; height: 12px; flex: none; color: var(--pc, var(--accent-mid)); }
.signedpop__media { overflow: hidden; border-radius: 12px; }
.signedpop__media img {
  display: block; width: 100%; height: 220px;
  object-fit: cover; object-position: 50% 18%;
}
.signedpop__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px 2px; }
.signedpop__name { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; min-width: 0; }
.signedpop__name em {
  position: relative; z-index: 0; display: inline-block; font-style: normal;
  padding: 0 0.1em; margin: 0 -0.05em;
}
.signedpop__name em::before {
  content: ""; position: absolute; z-index: -1;
  left: -0.02em; right: -0.02em; top: 0.16em; bottom: 0.02em;
  background: var(--mark); border-radius: 0.16em 0.08em 0.14em 0.1em;
  transform: rotate(-1.1deg) skewX(-7deg) scaleX(0); transform-origin: left center;
}
.signedpop.is-on .signedpop__name em::before { transform: rotate(-1.1deg) skewX(-7deg) scaleX(1); transition: transform 0.45s var(--ease-out) 0.28s; }
.signedpop__sem {
  flex: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-tint);
  padding: 5px 9px; border-radius: 999px;
}
/* Gestaffeltes Eintreten von Kopf, Bild und Fußzeile */
.signedpop__head, .signedpop__media, .signedpop__foot { opacity: 0; transform: translateY(8px); transition: opacity 0.15s, transform 0.15s; }
.signedpop__media img { transform: scale(1.12); transition: transform 0.2s; }
.signedpop.is-on .signedpop__head { opacity: 1; transform: none; transition: opacity 0.3s 0.05s, transform 0.4s var(--ease-out) 0.05s; }
.signedpop.is-on .signedpop__media { opacity: 1; transform: none; transition: opacity 0.3s 0.1s, transform 0.4s var(--ease-out) 0.1s; }
.signedpop.is-on .signedpop__media img { transform: scale(1); transition: transform 0.9s var(--ease-out) 0.1s; }
.signedpop.is-on .signedpop__foot { opacity: 1; transform: none; transition: opacity 0.3s 0.16s, transform 0.4s var(--ease-out) 0.16s; }
@media (prefers-reduced-motion: reduce) {
  .signedpop, .signedpop.is-on, .signedpop__head, .signedpop__media, .signedpop__foot, .signedpop__media img { transform: none; transition: opacity 0.2s; }
  .signedpop__name em::before, .signedpop.is-on .signedpop__name em::before { transform: rotate(-1.1deg) skewX(-7deg) scaleX(1); transition: none; }
}
@media (hover: none), (pointer: coarse) {
  .signedpop { display: none; }
}

/* Kompakte Checkliste (Unterseite /erstgespraech/) */
.membership--slim { padding: clamp(30px, 4vw, 50px) 0 clamp(10px, 2vw, 20px); }
.membership--slim .membership__list--cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 10px 40px; max-width: 860px; margin-inline: auto;
}

/* ---------- Rezensionen (Unterseite /rezensionen/) ---------- */
.reviews { padding: clamp(30px, 5vw, 60px) 0 clamp(70px, 9vw, 120px); }
.reviews__summary {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px 16px; margin-bottom: clamp(36px, 5vw, 56px); text-align: center;
}
.reviews__stars { color: #D99A2B; font-size: 22px; letter-spacing: 4px; }
.reviews__score { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
/* Schriftliche Rezensionen unter dem Video-Slider (/erfolge/) */
.wquotes { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: stretch; }
.wquote {
  margin: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(24px, 2.6vw, 36px);
  display: flex; flex-direction: column; gap: 18px;
}
.wquote__stars { color: #D99A2B; font-size: 15px; letter-spacing: 3px; }
.wquote blockquote { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink); }
.wquote figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.wquote figcaption strong { font-weight: 600; }
.wquote figcaption span { color: var(--gray); font-size: 14px; }
.wquote--photo {
  display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr);
  grid-template-rows: auto 1fr auto; gap: 18px clamp(22px, 2.6vw, 34px);
}
.wquote__img {                              /* Höhe folgt dem Text (height 0 + min-height) */
  grid-column: 1; grid-row: 1 / -1; width: 100%; height: 0; min-height: 100%;
  object-fit: cover; object-position: 50% 30%; border-radius: var(--radius);
}
@media (max-width: 960px) { .wquotes { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .wquote--photo { display: flex; }
  .wquote__img { height: auto; min-height: 0; aspect-ratio: 4 / 5; object-position: 50% 12%; }
}
/* Rezensionen (/erfolge/): Kopfzeile mit Bewertung rechts, darunter Raster – links das
   Video (bleibt beim Scrollen stehen), rechts die schriftlichen Rezensionen übereinander */
.reviews__head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 18px 40px; margin-bottom: clamp(32px, 4vw, 52px);
}
.reviews__head .reviews__summary {
  margin: 0; gap: 12px; padding: 10px 20px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
}
.reviews__head .reviews__stars { font-size: 18px; letter-spacing: 3px; }
.reviews__head .reviews__score { font-size: 20px; }
.reviews__grid {
  display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.reviews__grid .tslider { --tslide-w: 100%; margin: 0; position: sticky; top: calc(var(--header-h) + 28px); }
.reviews__grid .tslider__track { margin-inline: 0; padding-block: 0; -webkit-mask-image: none; mask-image: none; }
.reviews__grid .tslide { opacity: 1; transform: none; }
.reviews__grid .tslide:first-child,
.reviews__grid .tslide:last-child { margin-inline: 0; }
.reviews__grid .tslide__cap { padding-inline: 4px; }
.reviews__grid .wquotes { grid-template-columns: 1fr; }
.reviews__grid .wquote { position: relative; overflow: hidden; }
.reviews__grid .wquote::after {             /* großes, dezentes Anführungszeichen */
  content: "“"; position: absolute; top: -0.08em; right: 0.14em; pointer-events: none;
  font-size: 150px; font-weight: 700; line-height: 1; color: var(--accent-tint);
}
.reviews__grid .wquote > * { position: relative; z-index: 1; }
.wquote__hl {                               /* Kernsatz im Originalwortlaut */
  color: inherit; font-weight: 500; padding: 0 0.04em;
  background: linear-gradient(transparent 58%, var(--mark) 58%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (max-width: 960px) {
  .reviews__grid { grid-template-columns: 1fr; }
  .reviews__grid .tslider { position: static; width: min(100%, 360px); margin-inline: auto; }
}

/* ---------- Video-Rezensionen: Slider (/erfolge/) ----------
   Format per Modifier: .tslider = Hochkant 9:16 · .tslider--wide = Quer 16:9.
   Nativer Scroll-Snap-Track (Touch, Trackpad, Tastatur); Pfeile, aktive Folie
   und Autoplay mit Ton steuert main.js §21. */
.tslider {
  --tslide-ar: 9 / 16;
  --tslide-w: clamp(240px, 26vw, 320px);   /* Desktop 1240px: 3 volle Folien + Anschnitt */
  --tslide-gap: 20px;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.tslider--wide {
  --tslide-ar: 16 / 9;
  --tslide-w: clamp(320px, 52vw, 640px);   /* Desktop: 1 mittig + je ~halber Nachbar */
}
.tslider__track {
  position: relative;                       /* offsetLeft der Folien relativ zum Track (JS goTo) */
  display: flex; gap: var(--tslide-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;           /* keine Browser-Zurück-Geste am Track-Ende */
  scrollbar-width: none;                    /* Firefox: Scrollbar ausblenden */
  padding-block: 8px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.tslider__track::-webkit-scrollbar { display: none; }   /* Chrome/Safari: Scrollbar ausblenden */
.tslide {
  flex: 0 0 var(--tslide-w); width: var(--tslide-w);
  scroll-snap-align: center; scroll-snap-stop: always;
  margin: 0; position: relative;
  opacity: 0.55; transform: scale(0.96);
  transition: opacity 0.4s, transform 0.5s var(--ease-out);
}
/* erste/letzte Folie können mittig einrasten */
.tslide:first-child { margin-inline-start: calc(50% - var(--tslide-w) / 2); }
.tslide:last-child  { margin-inline-end:   calc(50% - var(--tslide-w) / 2); }
.tslide.is-active { opacity: 1; transform: none; }
.tslide__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); }
.tslide__video { width: 100%; aspect-ratio: var(--tslide-ar); object-fit: cover; cursor: pointer; display: block; }
.tslide__cap { padding: 14px 6px 0; }
.tslide__cap strong { display: block; font-weight: 600; }
.tslide__cap span { display: block; color: var(--gray); font-size: 14px; }

/* Play-Button: Optik von .vcard__play, sichtbar nur auf der aktiven, nicht laufenden
   Folie (bei prefers-reduced-motion immer, da dort kein Autoplay) */
.tslide__play { opacity: 0; pointer-events: none; }
.tslide.is-active:not(.is-playing) .tslide__play { opacity: 1; pointer-events: auto; }

/* Ton-Schalter (unten rechts, nur auf der aktiven Folie) */
.tslide__sound {
  position: absolute; right: 12px; bottom: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(24,24,27,0.55); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s, background 0.3s;
}
.tslide__sound svg { width: 20px; height: 20px; }
.tslide.is-active .tslide__sound { opacity: 1; pointer-events: auto; }
.tslide.has-unmute .tslide__sound { opacity: 0; pointer-events: none; }  /* Pille übernimmt */
.tslide__sound:hover { background: rgba(24,24,27,0.8); }
.tslide__ico-off { display: none; }
.tslide.is-muted .tslide__ico-on { display: none; }
.tslide.is-muted .tslide__ico-off { display: block; }

/* „Ton an"-Pille: erscheint, wenn der Browser nur stummes Autoplay erlaubt hat */
.tslide__unmute {
  position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 6px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; min-height: 44px;
  background: rgba(255,255,255,0.92); color: var(--ink);
  font-weight: 600; font-size: 14px; line-height: 1;
  box-shadow: 0 16px 32px -12px rgba(24,24,27,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.35s var(--ease-out), background 0.3s;
}
.tslide__unmute svg { width: 18px; height: 18px; }
.tslide__unmute:hover { background: #fff; }
.tslide.has-unmute .tslide__unmute { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

/* Pfeile + Zähler (helle Fläche — .arrow ist für dunklen Grund) */
.snav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.snav__arrow {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s, transform 0.3s var(--ease-out);
}
.snav__arrow svg { width: 20px; height: 20px; }
.snav__arrow:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-2px); }
.snav__arrow[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
.snav__count {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--gray); min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums;
}
.tslider__track:focus-visible, .snav__arrow:focus-visible,
.tslide__play:focus-visible, .tslide__sound:focus-visible, .tslide__unmute:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
/* Bis 1288px ist der Container-Gutter exakt 24px → Track bis an den Viewport-Rand ziehen
   (kein 100vw, damit die Seite nie horizontal scrollt) */
@media (max-width: 1288px) {
  .tslider__track, .steps__track { margin-inline: -24px; }
}
@media (max-width: 560px) {
  .tslider { --tslide-w: min(78vw, calc(60vh * 9 / 16)); --tslide-gap: 14px; }  /* 1 Folie + Anschnitt, Höhe gedeckelt */
  .tslider--wide { --tslide-w: 86vw; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .hero__video { display: none; }
  .tslide, .step { transform: none; }   /* Karussells: kein Scale-Effekt, Dimmen der Nachbarn bleibt */
}

/* ---------- College-Momente (Startseite): Foto-Mosaik ---------- */
.moments { padding: 0 0 clamp(70px, 9vw, 130px); }
.moments__sub { color: var(--gray); max-width: 60ch; margin-top: 18px; }
.moments__grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(2, clamp(170px, 23vw, 300px));   /* breite Kachel ~2.7:1, damit das Teamfoto ganz passt */
  grid-template-areas: "tall wide wide" "tall a b";
  gap: 16px; margin-top: clamp(32px, 4vw, 48px);
}
.moment { margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--ink); }
.moment img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); }
.moment:hover img { transform: scale(1.04); }
.moment--tall { grid-area: tall; }
.moment--wide { grid-area: wide; }
.moment--tall img { object-position: 30% 20%; }   /* Spielerin: Gesicht + Schirm links im Bild */
.moment--wide img { object-position: 50% 42%; }   /* Teamfoto: alle Gesichter statt Pokal/Boden */
@media (max-width: 760px) {
  .moments__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 150px 120px 120px;
    grid-template-areas: "wide wide" "tall a" "tall b";
    gap: 10px;
  }
}

/* ---------- Partner & Verbände (Startseite) ---------- */
.partners { padding: 0 0 clamp(70px, 9vw, 130px); }
.partners__sub { color: var(--gray); max-width: 60ch; margin-top: 18px; }
.partners__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px; margin-top: clamp(32px, 4vw, 48px);
}
.partner {
  display: flex; flex-direction: column; gap: 8px; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px 24px 22px; transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.partner:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(24,24,27,0.3); }
/* Bewusst klein gehalten — neben Verbänden stehen hier auch Academies mit sehr
   unterschiedlichen Logoformaten (Wappen, Wortmarken); 36px Höhe hält alles ruhig */
.partner__logo { height: 36px; display: flex; align-items: center; margin-bottom: 4px; }
.partner__logo img { max-height: 100%; max-width: 140px; width: auto; object-fit: contain; }
.partner h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.partner p { color: var(--gray); font-size: 15px; flex: 1; }
.partner__go { font-weight: 600; color: var(--accent); font-size: 14px; }

/* ---------- CTA mit zwei Aktionen (Startseite) ---------- */
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.cta__note { margin-top: 16px; font-size: 14px; color: var(--accent-ondark); max-width: 60ch; margin-inline: auto; }

/* ---------- Orientierung LK / UTR / Division (Unterseite /vermittlung/) ---------- */
.orient { padding: 0 0 clamp(70px, 9vw, 130px); }
.orient__sub { color: var(--gray); max-width: 62ch; margin: 18px 0 28px; }
.orient__tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.orient__table { width: 100%; border-collapse: collapse; min-width: 760px; }
.orient__table th, .orient__table td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.orient__table th { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); font-weight: 500; background: var(--bg); }
.orient__table tr:last-child td { border-bottom: 0; }
.orient__table td:first-child { font-weight: 600; white-space: nowrap; }
.orient__table td small { display: block; color: var(--gray); font-weight: 400; margin-top: 2px; font-size: 13.5px; }
.orient__table td:nth-child(2), .orient__table td:nth-child(3), .orient__table td:nth-child(4) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.orient__note { font-size: 14px; color: var(--gray); margin-top: 14px; max-width: 70ch; }
.orient__note a { color: var(--accent); font-weight: 600; }

/* ---------- Zeitplan (Unterseite /vermittlung/) ---------- */
.timeline { padding: 0 0 clamp(70px, 9vw, 130px); }
.timeline__sub { color: var(--gray); max-width: 60ch; margin: 18px 0 36px; }
.timeline__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px 0; }
.tl { position: relative; padding: 24px 22px 0 0; border-top: 2px solid var(--line); }
.tl::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.tl__when { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.tl h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
.tl p { color: var(--gray); font-size: 14.5px; }
@media (max-width: 640px) {
  .timeline__list { grid-template-columns: 1fr; gap: 0; }
  .tl { border-top: 0; border-left: 2px solid var(--line); padding: 0 0 28px 22px; }
  .tl::before { top: 0; left: -7px; }
}

/* ---------- Terminbuchung (Unterseite /erstgespraech/) ----------
   Fillout-Karte schwebt über einer stark ausgewaschenen Court-Szene aus dem
   eigenen Showcase-Material. Das Video ist 9:16 und wird auf Sektionsbreite
   beschnitten — hinter dem hellen Schleier gewollt weich. */
.sched { position: relative; overflow: hidden; padding-top: clamp(48px, 6vw, 80px); }
.sched__bg { position: absolute; inset: 0; z-index: 0; }
.sched__bg img, .sched__bg video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 32%;
}
.sched__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--bg) 0%, rgba(250,249,246,0.78) 20%,
    rgba(250,249,246,0.72) 78%, var(--bg) 100%);
}
.sched .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .sched__bg video { display: none; } }

/* ---------- Chancen-Check (Unterseite /erstgespraech/) ---------- */
.chancen {
  display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px);
}
.chancen .section-title { font-size: clamp(26px, 2.8vw, 34px); margin: 8px 0 10px; }
.chancen p { color: var(--gray); max-width: 52ch; }
.chancen .fillout-popup-slot { min-width: 240px; }
@media (max-width: 760px) { .chancen { grid-template-columns: 1fr; } }

/* ============================================================
   /vermittlung/ — verdichtete Seite: Hero-Stats, Kapitel-Nav,
   LK-Finder, Zielliste-Mock in der Sticky-Spalte, Paket-Matrix
   ============================================================ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Hero-Stats: echte Zahlen direkt unterm Seitentitel */
.pagehero__stats {
  display: flex; justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}
.pstat {
  padding: 0 clamp(22px, 3.4vw, 44px); text-align: left;
  border-left: 1px solid var(--line);
}
.pstat:first-child { border-left: 0; padding-left: 0; }
.pstat:last-child { padding-right: 0; }
.pstat strong {
  display: block; font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
/* Nur das Label — der data-count-Span im <strong> erbt die große Schrift */
.pstat > span { color: var(--gray); font-size: 14px; }
.verm .pagehero { padding-bottom: clamp(32px, 4vw, 48px); }

/* Kapitel-Nav: klebt unterm Header, Scrollspy setzt is-active.
   Nach dem letzten Kapitel blendet JS sie aus (is-done, main.js §20). */
.subnav {
  position: sticky; top: calc(var(--header-h) + 8px); z-index: 90;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
  padding: 10px 0;
  transition: opacity 0.35s, transform 0.35s var(--ease-out);
}
.subnav.is-done { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.subnav__track {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.subnav__track::-webkit-scrollbar { display: none; }
.subnav .chip { flex-shrink: 0; }

/* LK-Finder über der Orientierungstabelle */
.orient__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.orient__chipslabel {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray); margin-right: 6px;
}
.orient__table tbody tr { transition: opacity 0.35s, background 0.35s; }
.orient__table tbody tr.is-dim { opacity: 0.35; }
.orient__table tbody tr.is-match td { background: var(--accent-tint); }

/* Zielliste-Mock in der Sticky-Spalte von „Was drinsteckt“ */
.price__mock {
  margin-top: 36px; max-width: 420px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.price__mock .mock { width: 100%; }
.price__mockcap { color: var(--gray); font-size: 14px; line-height: 1.6; margin: 4px 0 0; }
.mock--mini { padding: 20px 22px; gap: 8px; }
.mock--mini .mock__row { grid-template-columns: 128px 1fr auto; gap: 10px; padding: 8px 0; }
.mock--mini .mock__name { font-size: 13px; }

/* Uni-Wimpel + US-Standort in der Zielliste */
.mock__flag {
  display: inline-block; width: 11px; height: 8px; margin-right: 5px;
  background: var(--c, var(--accent));
  clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);
}

/* Spielerprofil im Zielliste-Mock */
.mock__player {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 0 10px; border-bottom: 1px solid var(--soft);
}
.mock__player img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mock__player strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.mock__player small { font-family: var(--font-mono); font-size: 11px; color: var(--gray-light); }

/* Paket-Matrix: alle Leistungen × Basis/Premium/VIP+ */
.pmatrix__wrap {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper);
}
.pmatrix { width: 100%; border-collapse: separate; border-spacing: 0; }
.pmatrix th, .pmatrix td {
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  font-size: 14.5px; text-align: center; vertical-align: middle;
}
.pmatrix td:first-child { text-align: left; font-weight: 500; width: 44%; }
.pmatrix tbody td:not(:first-child) { color: var(--accent-dark); font-weight: 600; }
.pmatrix td.no { color: var(--gray-light); font-weight: 400; }
.pmatrix td small { display: block; font-size: 12px; color: var(--gray); font-weight: 400; }
.pmatrix tbody tr:last-child td { border-bottom: 0; }
.pmatrix tbody tr:hover td { background: var(--soft); }
/* Kopfzeile bleibt beim Scrollen durch die Matrix sichtbar */
.pmatrix thead th {
  position: sticky; top: calc(var(--header-h) + 68px); z-index: 2;
  background: var(--paper); vertical-align: top;
  padding: 20px 18px 18px;
}
.pmatrix thead th:first-child { border-top-left-radius: var(--radius-lg); }
.pmatrix thead th:last-child { border-top-right-radius: var(--radius-lg); }
.pmatrix__name { display: block; font-weight: 600; letter-spacing: -0.02em; font-size: 21px; line-height: 1.2; }
.pmatrix__badge {
  font-family: var(--font-mono); font-style: normal; font-size: 10.5px;
  font-weight: 600; letter-spacing: 0.06em; vertical-align: middle;
  background: var(--accent-tint); color: var(--accent);
  border-radius: 99px; padding: 4px 9px; margin-left: 4px;
}
.pmatrix__desc { display: block; color: var(--gray); font-size: 12.5px; font-weight: 400; margin: 3px 0 14px; }
.btn--sm { padding: 9px 16px; font-size: 13px; }
/* VIP+-Spalte hervorheben: dunkler Kopf, getönte Zellen */
.pmatrix tbody td.pmatrix__vip { background: var(--accent-tint); }
.pmatrix tbody tr:hover td.pmatrix__vip { background: #DCE7F0; }
.pmatrix thead th.pmatrix__vip { background: var(--accent-deep); color: #fff; }
.pmatrix thead th.pmatrix__vip .pmatrix__desc { color: rgba(255,255,255,0.65); }
.pmatrix thead th.pmatrix__vip .pmatrix__badge { background: rgba(255,255,255,0.14); color: var(--accent-ondark); }
/* Gruppenzeilen gliedern die Matrix */
.pmatrix__group td, .pmatrix tbody tr.pmatrix__group:hover td {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray); font-weight: 500;
  background: var(--bg); text-align: left; padding: 16px 18px 10px;
}
.pmatrix__note { font-size: 14px; color: var(--gray); margin-top: 14px; max-width: 70ch; }
/* Creme-Vorhang: deckt Matrix-Zeilen ab, die beim Scrollen über den Sticky-
   Tabellenkopf hinauslaufen und sonst hinter Pill-Header/Subnav durchscheinen.
   JS auf /vermittlung/ toggelt .is-on, solange der Kopf klebt. */
.pmatrix-veil {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(var(--header-h) + 68px);
  background: var(--bg); z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.pmatrix-veil.is-on { opacity: 1; }

@media (max-width: 860px) {
  /* Matrix scrollt horizontal, erste Spalte klebt links;
     vertikales Sticky funktioniert im Overflow-Container nicht */
  .pmatrix__wrap { overflow-x: auto; }
  .pmatrix { min-width: 640px; }
  .pmatrix th, .pmatrix td { padding: 10px 12px; font-size: 13.5px; }
  .pmatrix thead th { position: static; padding-top: 16px; }
  .pmatrix td:first-child { width: auto; min-width: 190px; max-width: 210px; }
  .pmatrix th:first-child, .pmatrix td:first-child {
    /* top: auto — sonst klebt die (leere) Kopfzelle mit dem Desktop-top
       vertikal im Scroll-Container und überdeckt die ersten Zeilen */
    position: sticky; left: 0; top: auto; z-index: 1; background: var(--paper);
    box-shadow: 8px 0 12px -10px rgba(24, 24, 27, 0.25);
  }
  .pmatrix tbody tr.pmatrix__group td { position: static; box-shadow: none; }
}
/* Handy: Paket-Umschalter statt horizontalem Scrollen – sichtbar ist nur die gewählte
   Paket-Spalte (data-pkg = Spaltennummer 2–4 am .pmatrix__wrap, main.js §27) */
.pmatrix__tabs { display: none; }
@media (max-width: 640px) {
  .pmatrix__tabs {
    display: flex; gap: 4px; padding: 4px; margin-bottom: 12px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  }
  .pmatrix__tab {
    flex: 1; padding: 10px 8px; border-radius: 999px;
    font-size: 14.5px; font-weight: 600; color: var(--gray); transition: background 0.25s, color 0.25s;
  }
  .pmatrix__tab[aria-pressed="true"] { background: var(--accent); color: #fff; }
  .packages .pmatrix__wrap { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .pmatrix { min-width: 0; }
  .pmatrix tr > :not(:first-child):not([colspan]) { display: none; }
  .pmatrix__wrap[data-pkg="2"] .pmatrix tr > :nth-child(2),
  .pmatrix__wrap[data-pkg="3"] .pmatrix tr > :nth-child(3),
  .pmatrix__wrap[data-pkg="4"] .pmatrix tr > :nth-child(4) { display: table-cell; }
  .pmatrix th:first-child, .pmatrix td:first-child {
    position: static; box-shadow: none; width: 58%; min-width: 0; max-width: none;
  }
  /* lange Wörter bekommen im HTML eine feste Trennstelle (Spielberechtigungs&shy;gebühren),
     overflow-wrap fängt den Rest ab */
  .pmatrix td:first-child { overflow-wrap: anywhere; }
  .pmatrix th, .pmatrix td { padding-inline: 10px; }
  .pmatrix thead th:not(:first-child) { border-top-right-radius: var(--radius-lg); }
  .pmatrix thead .btn--sm { width: 100%; padding-inline: 10px; }
}
@media (max-width: 640px) {
  .pagehero__stats { flex-direction: column; gap: 14px; align-items: center; }
  .pstat { border-left: 0; padding: 0; text-align: center; }
}

/* Dichte-Overrides nur für /vermittlung/ (main.verm) */
.verm .orient { padding-bottom: clamp(56px, 7vw, 96px); }
.verm .timeline { padding-bottom: clamp(56px, 7vw, 96px); }
.verm .price { padding: clamp(64px, 8vw, 110px) 0; }
.verm .price__title { margin-bottom: clamp(36px, 5vw, 56px); }
.verm .price__intro { top: calc(var(--header-h) + 88px); }
.verm .packages { padding: clamp(64px, 8vw, 110px) 0; }

/* ============================================================
   /vermittlung/ – Handy-Optimierung + Baustein-Icons (10.10.2026)
   Nichts wird versteckt: alle Inhalte bleiben sichtbar, nur kompakter
   (Hero-Kennzahlen in einer Reihe, LK-Tabelle als Karten ohne
   Seitwärts-Wischen, Paket-Liste in voller Breite).
   ============================================================ */

/* Baustein-Icons (Leistungen): Kachel mit Linien-Icon. Die Bewegung
   läuft einmal beim Hereinscrollen, Aufklappen und Hover (main.js §29) */
.pitem__ico {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--accent-tint); color: var(--accent);
}
.pitem__ico svg {
  width: 22px; height: 22px; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.pitem__ico .f { fill: currentColor; stroke: none; }
.pitem__ico g, .pitem__ico path, .pitem__ico circle { transform-box: fill-box; transform-origin: center; }
.pitem__ico .i-cup { transform-origin: 50% 100%; }
.pitem__ico .i-pulse, .pitem__ico .i-tick { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pitem.is-anim .i-dart  { animation: i-dart 0.75s var(--ease-out) both; }
.pitem.is-anim .i-rec   { animation: i-rec 1.3s linear both; }
.pitem.is-anim .i-cup   { animation: i-cup 0.8s var(--ease-out) both; }
.pitem.is-anim .i-eye   { animation: i-blink 0.9s ease both; }
.pitem.is-anim .i-pupil { animation: i-look 1.3s var(--ease-out) 0.2s both; }
.pitem.is-anim .i-pulse { animation: i-draw 1s ease-in-out both; }
.pitem.is-anim .i-tick  { animation: i-draw 0.6s var(--ease-out) 0.15s both; }
.pitem.is-anim .i-stamp { animation: i-stamp 0.8s var(--ease-out) both; }
.pitem.is-anim .i-ink   { animation: i-ink 0.8s ease both; }
.pitem.is-anim .i-plane { animation: i-plane 0.95s var(--ease-out) both; }
@keyframes i-dart  { 0% { transform: translate(7px, -7px); opacity: 0; } 55% { transform: translate(-1px, 1px); opacity: 1; } 75% { transform: translate(0.5px, -0.5px); } 100% { transform: none; } }
@keyframes i-rec   { 0%, 40%, 80%, 100% { opacity: 1; } 20%, 60% { opacity: 0.1; } }
@keyframes i-cup   { 30% { transform: translateY(-3px) rotate(-8deg); } 60% { transform: translateY(-1px) rotate(6deg); } 100% { transform: none; } }
@keyframes i-blink { 0%, 30%, 60%, 100% { transform: none; } 15%, 45% { transform: scaleY(0.12); } }
@keyframes i-look  { 35% { transform: translateX(-2px); } 70% { transform: translateX(2px); } 100% { transform: none; } }
@keyframes i-draw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes i-stamp { 35% { transform: translateY(-3px); } 55% { transform: translateY(1.5px); } 100% { transform: none; } }
@keyframes i-ink   { 0%, 50% { opacity: 0.2; } 60%, 100% { opacity: 1; } }
@keyframes i-plane { 40% { transform: translate(10px, -10px); opacity: 0; } 41% { transform: translate(-10px, 10px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Paket-Häkchen poppen beim Hereinscrollen und beim Paketwechsel nacheinander auf (main.js §30) */
.pmatrix__wrap.is-pop .ck { animation: ck-pop 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes ck-pop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes weg-ping { 0% { box-shadow: 0 0 0 0 var(--mark); } 70%, 100% { box-shadow: 0 0 0 9px rgba(201, 220, 236, 0); } }

@media (prefers-reduced-motion: reduce) {
  .pitem.is-anim .pitem__ico *, .pmatrix__wrap.is-pop .ck, .verm .weg__step.is-active .weg__num { animation: none !important; }
}

@media (max-width: 640px) {
  /* Header blendet beim Runterscrollen aus, beim Hochscrollen wieder ein (main.js §31);
     die Kapitel-Leiste rückt dann nach oben */
  .header { transition: transform 0.4s var(--ease-out); }
  .header.is-tucked { transform: translateY(-120%); }
  .verm .subnav { transition: top 0.4s var(--ease-out), opacity 0.35s, transform 0.35s var(--ease-out); }
  .hdr-tucked .verm .subnav { top: 8px; }
  /* Chips: Tippfläche ≈ 44 px, ohne die Leiste höher zu machen */
  .verm .subnav .chip { position: relative; }
  .verm .subnav .chip::after { content: ""; position: absolute; inset: -5px 0; }

  /* Hero: linksbündig, drei Kennzahlen in einer Reihe statt untereinander */
  .verm .pagehero { text-align: left; }
  .verm .pagehero__title { margin-inline: 0; }
  .verm .pagehero__sub { margin: 16px 0 0; }
  .verm .pagehero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; margin-top: 28px; }
  .verm .pstat { padding: 0 10px; border-left: 1px solid var(--line); text-align: left; }
  .verm .pstat:first-child { padding-left: 0; border-left: 0; }
  .verm .pstat strong { font-size: 19px; }
  .verm .pstat > span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; }

  /* Dein Weg: linksbündig, schmale Zeitleiste mit gestrichelter Linie */
  .verm .weg__inner { align-items: stretch; text-align: left; }
  .verm .weg__steps { gap: 4px; }
  .verm .weg__steps::before { left: 15px; top: 16px; bottom: 16px; width: 0; background: none; border-left: 2px dashed var(--line); }
  .verm .weg__step { min-height: 44px; gap: 14px; font-size: 15.5px; }
  .verm .weg__num { width: 32px; height: 32px; font-size: 11.5px; }
  .verm .weg__step.is-active .weg__num { animation: weg-ping 2.4s ease-out infinite; }
  .verm .weg__panel { margin: 6px 0 12px; padding: 18px; }
  .verm .weg__text { font-size: 16px; }
  .verm .weg__claim { font-size: 20px; }

  /* Orientierung: Tabelle wird zu Karten, alle Spalten sichtbar (vorher nur per Wischen) */
  .verm .orient__chips .chip { padding: 11px 14px; }
  .verm .orient__tablewrap { overflow: visible; border: 0; border-radius: 0; background: none; -webkit-mask-image: none; mask-image: none; }
  .verm .orient__table { display: block; min-width: 0; }
  .verm .orient__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .verm .orient__table tbody { display: grid; gap: 8px; }
  .verm .orient__table tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px;
    padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  }
  .verm .orient__table td { display: block; padding: 0; border: 0; font-size: 15px; }
  .verm .orient__table td:first-child { grid-column: 1 / -1; font-size: 16px; white-space: normal; }
  .verm .orient__table td:first-child small { display: inline; margin-left: 6px; font-size: 13px; }
  .verm .orient__table td:nth-child(n+2):nth-child(-n+4) { padding: 7px 10px; border-radius: 10px; background: var(--bg); font-weight: 600; }
  .verm .orient__table td:nth-child(n+2):nth-child(-n+4)::before {
    display: block; margin-bottom: 2px; color: var(--gray);
    font: 500 10px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  }
  .verm .orient__table td:nth-child(2)::before { content: "UTR Herren"; }
  .verm .orient__table td:nth-child(3)::before { content: "UTR Damen"; }
  .verm .orient__table td:nth-child(4)::before { content: "LK ca."; }
  .verm .orient__table td:nth-child(5) { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.45; color: var(--gray); }
  .verm .orient__table tbody tr.is-match { background: var(--accent-tint); border-color: var(--accent-ondark); }
  .verm .orient__table tbody tr.is-match td { background: none; }
  .verm .orient__table tbody tr.is-match td:nth-child(n+2):nth-child(-n+4) { background: var(--paper); }

  /* Leistungen: linksbündig; Reihenfolge Text → 8 Bausteine → Buttons → Zielliste */
  .verm .price__title { text-align: left; font-size: 30px; }
  .verm .price__layout { display: flex; flex-direction: column; gap: 0; }
  .verm .price__intro { display: contents; }
  .verm .price__intro > .section-eyebrow { order: 1; }
  .verm .price__sub { order: 2; margin: 14px 0 22px; }
  .verm .price__list { order: 3; }
  .verm .price__cta { order: 4; margin-top: 28px; }
  .verm .price__mock { order: 5; margin-top: 32px; max-width: none; }
  /* Baustein-Zeile: Icon | Nummer + Tag / Titel + Untertitel | Plus */
  .verm .pitem summary {
    display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 16px; column-gap: 12px; row-gap: 2px;
    grid-template-areas: "ico num tag icon" "ico head head icon"; align-items: center; padding: 14px 2px;
  }
  .verm .pitem__ico { grid-area: ico; align-self: start; }
  .verm .pitem__num { grid-area: num; padding-top: 0; font-size: 11.5px; }
  .verm .pitem__tag { grid-area: tag; justify-self: end; padding: 3px 9px; font-size: 10.5px; }
  .verm .pitem__head { grid-area: head; }
  .verm .pitem__head strong { font-size: 16.5px; }
  .verm .pitem__head small { font-size: 13px; }
  .verm .pitem__icon { grid-area: icon; align-self: center; margin-top: 0; }
  .verm .pitem__body p, .verm .pitem__body ul { padding-inline: 0; }
  .verm .product__link { padding-block: 12px; }

  /* Pakete: ein Paket als Liste in voller Breite (statt 58/42-Tabelle) */
  .verm .pmatrix, .verm .pmatrix thead, .verm .pmatrix tbody, .verm .pmatrix thead tr { display: block; }
  .verm .pmatrix tbody tr { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
  .verm .pmatrix tbody tr:last-child { border-bottom: 0; }
  .verm .pmatrix th, .verm .pmatrix td { border-bottom: 0; }
  .verm .pmatrix__wrap[data-pkg="2"] .pmatrix tr > :nth-child(2),
  .verm .pmatrix__wrap[data-pkg="3"] .pmatrix tr > :nth-child(3),
  .verm .pmatrix__wrap[data-pkg="4"] .pmatrix tr > :nth-child(4) { display: block; }
  .verm .pmatrix thead th { text-align: left; padding: 18px 16px 16px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 1px solid var(--line); }
  .verm .pmatrix thead th:first-child { display: none; }
  .verm .pmatrix__desc { margin-bottom: 12px; }
  .verm .pmatrix td { padding: 9px 14px; font-size: 14px; line-height: 1.4; }
  .verm .pmatrix td:first-child { flex: 1 1 auto; width: auto; min-width: 0; }
  .verm .pmatrix tbody td:not(:first-child) { flex: 0 0 auto; max-width: 42%; text-align: right; }
  .verm .pmatrix tr.pmatrix__group td { flex: 1; padding: 14px 14px 8px; }
  /* Im gewählten Paket nicht enthaltene Leistungen grau, bleiben aber lesbar */
  .verm .pmatrix__wrap[data-pkg="2"] tbody tr:has(> td:nth-child(2).no) > td:first-child,
  .verm .pmatrix__wrap[data-pkg="3"] tbody tr:has(> td:nth-child(3).no) > td:first-child,
  .verm .pmatrix__wrap[data-pkg="4"] tbody tr:has(> td:nth-child(4).no) > td:first-child { color: var(--gray); font-weight: 400; }
}