@charset "UTF-8";
/* LaceUp — polished design system (handoff 2026-07-31).
   Manrope-only, 14px-radius controls, 20px cards, generous section rhythm,
   dark glow hero, signature CSS grid. Non-ASCII glyphs use \escapes. */

/* ── tokens ─────────────────────────────────────────────────────── */
:root {
  /* brand */
  --lu-yellow-100: #fffad1; --lu-yellow-400: #ffed50; --lu-yellow-600: #e6ce12;
  --lu-coral-100: #ffdcd3;  --lu-coral-400: #ff7a63;  --lu-coral-600: #d64a34; --lu-coral-700: #a9351f;
  /* ink + neutrals */
  --lu-ink: #141414; --lu-ink-800: #1f1f1f; --lu-ink-700: #333;
  --lu-gray-600: #565656; --lu-gray-500: #767676; --lu-gray-400: #a0a0a0;
  --lu-gray-300: #cbcbcb; --lu-gray-200: #e4e4e4; --lu-gray-100: #f4f4f4; --lu-gray-50: #fafafa;
  --lu-white: #fff;
  --lu-sky: #4e9bd8; --lu-forest: #3c7a4e;

  /* semantic */
  --lu-bg: #fff; --lu-bg-subtle: #fafafa;
  --lu-text: var(--lu-ink); --lu-text-secondary: var(--lu-gray-600); --lu-text-muted: var(--lu-gray-500);
  --lu-border: var(--lu-gray-200); --lu-border-ink: var(--lu-ink);
  --lu-accent: var(--lu-coral-400); --lu-accent-strong: var(--lu-coral-600);

  --lu-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* radius */
  --lu-r-sm: 10px; --lu-r-md: 14px; --lu-r-lg: 20px; --lu-r-xl: 28px; --lu-r-2xl: 36px; --lu-r-pill: 999px;

  /* shadow */
  --lu-shadow-xs: 0 1px 2px rgba(20,20,20,.06);
  --lu-shadow-sm: 0 2px 6px rgba(20,20,20,.07);
  --lu-shadow-md: 0 6px 18px rgba(20,20,20,.09);
  --lu-shadow-lg: 0 16px 40px rgba(20,20,20,.12);
  --lu-shadow-yellow: 0 10px 28px rgba(255,221,40,.45);

  /* motion */
  --lu-ease: cubic-bezier(.22,.61,.36,1);
  --lu-ease-out: cubic-bezier(.16,1,.3,1);
  --lu-dur: 200ms; --lu-dur-fast: 120ms;

  /* layout */
  --lu-container: 1200px;
  --lu-container-text: 820px;
  --lu-gutter: clamp(20px, 5vw, 32px);
  --lu-section: clamp(72px, 9vw, 116px);
  --lu-band: clamp(48px, 6vw, 88px);

  /* signature grid */
  --lu-grid-line: #dedede;
  --lu-grid-line-dark: rgba(255,255,255,.06);
  --lu-grid-size: 140px;
}

/* ── fonts (Manrope only, self-hosted woff2) ────────────────────── */
@font-face { font-family:"Manrope"; src:url("/assets/fonts/manrope-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("/assets/fonts/manrope-700.woff2") format("woff2"); font-weight:500 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("/assets/fonts/manrope-800.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }

/* ── reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--lu-font); font-size: 16px; line-height: 1.5;
  color: var(--lu-text); background: var(--lu-bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
a { color: var(--lu-coral-600); text-decoration: none; transition: color var(--lu-dur) var(--lu-ease); }
a:hover { color: var(--lu-coral-700); }
::selection { background: var(--lu-yellow-400); color: var(--lu-ink); }

h1, h2, h3, h4 { font-family: var(--lu-font); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: inherit; overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.4vw, 72px); letter-spacing: -.035em; line-height: 1.02; }
h2 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.05; }
h3 { font-size: clamp(20px, 2.4vw, 24px); letter-spacing: -.02em; }
h4 { font-size: 18px; letter-spacing: -.02em; }
p, li { max-width: 68ch; }

:focus-visible { outline: 3px solid var(--lu-coral-400); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  :root { --lu-dur: 0ms; --lu-dur-fast: 0ms; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ── highlight emphasis (==word==) — coloured, not a pill ───────── */
.hl { color: var(--lu-coral-600); font-weight: 800; }
.hero .hl, .quotes .hl, .footer .hl, .stats--dark .hl { color: var(--lu-yellow-400); }
.cta .hl, .stats .hl { color: inherit; }

/* ── layout helpers ─────────────────────────────────────────────── */
.container { max-width: var(--lu-container); margin-inline: auto; padding-inline: var(--lu-gutter); }
.container--text { max-width: var(--lu-container-text); }
.visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.skip-link { position: absolute; left: var(--lu-gutter); top: -100px; background: var(--lu-ink); color: #fff; padding: .5rem 1rem; border-radius: var(--lu-r-sm); z-index: 200; transition: top var(--lu-dur) var(--lu-ease); }
.skip-link:focus { top: .75rem; }

section { padding-block: var(--lu-section); }
@media (max-width: 480px) { section { padding-block: 2.75rem; } }

/* eyebrow / all-caps label */
.eyebrow, .chip--static { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--lu-accent); margin: 0 0 14px; }
.section-heading { font-size: clamp(30px, 4.6vw, 48px); margin-bottom: 2rem; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 2.75rem; }
.section-head .section-heading { margin-bottom: 0; }
.section-head__link { font-weight: 800; color: var(--lu-ink); }

/* ── signature grid + glow ──────────────────────────────────────── */
.lu-grid, .lu-grid-dark { position: relative; }
.lu-grid > *, .lu-grid-dark > * { position: relative; z-index: 1; }
.lu-grid::before, .lu-grid-dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--lu-grid-line) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--lu-grid-line) 1px, transparent 1px);
  background-size: var(--lu-grid-size) var(--lu-grid-size); background-position: center top;
}
.lu-grid-dark::before {
  background-image: linear-gradient(to right, var(--lu-grid-line-dark) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--lu-grid-line-dark) 1px, transparent 1px);
}
.lu-grid-fade::before { -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 100%); }
.lu-glow { position: absolute; inset: 0; pointer-events: none; transition: background 220ms var(--lu-ease-out); z-index: 0; }

/* ── header ─────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--lu-border); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.nav__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.nav__brand img, .nav__brand .logo-mark { height: 22px; width: auto; display: block; }
.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--lu-gray-300); border-radius: var(--lu-r-sm); cursor: pointer; color: var(--lu-ink); }
.nav__toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.nav__toggle-bars { display: inline-block; width: 1.1em; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.nav__menu { display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: 34px; list-style: none; padding: 0; }
.nav__link { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--lu-ink-700); }
.nav__link:hover, .nav__link.is-active { color: var(--lu-coral-600); }
.btn--nav { height: 40px; padding: 0 20px; font-size: 14px; }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu { display: none; position: absolute; inset-inline: 0; top: 100%;
    background: rgba(255,255,255,.98); border-top: 1px solid var(--lu-border); box-shadow: var(--lu-shadow-md);
    padding: 12px var(--lu-gutter) 22px; }
  .nav__menu.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__link { padding: 13px 8px; font-size: 17px; font-weight: 700; border-radius: var(--lu-r-sm); }
  .btn--nav { height: 48px; justify-content: center; margin-top: 10px; }
}

/* ── language switcher ──────────────────────────────────────────── */
.lang { display: inline-flex; align-items: center; gap: 9px; }
.lang__link { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--lu-gray-400); }
.lang__link:hover { color: var(--lu-ink-700); }
.lang__link.is-active { color: var(--lu-ink); }
@media (max-width: 900px) { .lang { margin-top: 14px; gap: 14px; } .lang__link { font-size: 15px; } }

/* ── buttons ────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 28px;
  border: 1.5px solid transparent; border-radius: var(--lu-r-md);
  font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--lu-ease), background var(--lu-dur), border-color var(--lu-dur), color var(--lu-dur), box-shadow var(--lu-dur); }
.btn--primary { background: var(--lu-yellow-400); color: var(--lu-ink); box-shadow: var(--lu-shadow-yellow); }
.btn--primary:hover { background: var(--lu-yellow-600); color: var(--lu-ink); transform: translateY(-2px); }
.btn--ink { background: var(--lu-ink); color: #fff; box-shadow: var(--lu-shadow-md); }
.btn--ink:hover { background: var(--lu-ink-800); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.22); }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; }
.btn--outline { height: 46px; padding: 0 22px; font-size: 15px; border-color: var(--lu-border-ink); color: var(--lu-ink); background: transparent; }
.btn--outline:hover { background: var(--lu-ink); color: #fff; }
.btn__arrow-i { font-size: 18px; line-height: 1; }
/* legacy arrow markup collapses to a simple arrow */
.btn__arrows { display: inline-flex; }
.btn__arrow { display: none; }
.btn__arrows::after { content: "\2192"; font-size: 18px; }

/* ── hero (dark, glow, two-column) ──────────────────────────────── */
.hero { position: relative; background: var(--lu-ink); color: #fff; overflow: hidden; }
.hero__inner { position: relative; z-index: 1; display: grid; gap: 56px; align-items: center;
  padding-block: clamp(64px, 8vw, 104px) clamp(72px, 9vw, 112px); grid-template-columns: 1.05fr .95fr; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--lu-yellow-400); margin: 0 0 24px; }
.hero__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--lu-yellow-400); box-shadow: 0 0 12px var(--lu-yellow-400); }
.hero h1 { margin: 0; }
.hero__lead { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.6; color: var(--lu-gray-300); margin: 26px 0 0; max-width: 540px; }
.hero__lead strong { color: #fff; font-weight: 700; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 46px; }
.hero__stat-value { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.hero__stat-label { font-size: 13px; color: var(--lu-gray-400); margin-top: 2px; }
.hero__eth { margin-top: 30px; }
.hero__eth img { max-height: 44px; width: auto; }
.hero__visual { justify-self: center; width: 100%; }
.hero__card { position: relative; border-radius: var(--lu-r-2xl); overflow: hidden; border: 1px solid var(--lu-border);
  background: #fff; box-shadow: var(--lu-shadow-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.hero__card-top { display: flex; justify-content: space-between; align-items: center; }
.hero__live { display: inline-flex; align-items: center; gap: 7px; background: var(--lu-yellow-400); color: var(--lu-ink);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 6px 11px; border-radius: 999px; }
.hero__live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--lu-ink); }
.hero__card-hint { font-size: 12px; font-weight: 700; color: var(--lu-gray-500); letter-spacing: .04em; }
.hero__frame { border-radius: var(--lu-r-md); overflow: hidden; overflow-y: auto; background: #fff; border: 1px solid var(--lu-border); min-height: 300px; max-height: 400px; padding: 5px; }
.hero__frame iframe { width: 100%; border: none; display: block; min-height: 300px; }

/* -- API effort feed in the hero card (2026-08-07, replaces the iframe) */
/* scrolls, but without a visible scrollbar (Phil, 2026-08-07) */
.hero__feed { scrollbar-width: none; -ms-overflow-style: none; }
.hero__feed::-webkit-scrollbar { display: none; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--lu-gray-150, #EEEEEE); }
.feed__row:last-child { border-bottom: none; }
.feed__who { font-size: 14px; font-weight: 800; color: var(--lu-ink); letter-spacing: -0.01em; }
.feed__stage { grid-row: 2; font-size: 13px; color: var(--lu-text-secondary); }
.feed__meta { grid-row: 1 / 3; align-self: center; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.feed__time { font-size: 12px; color: var(--lu-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed__badge-svg { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: inline-flex; }
.feed__badge-svg svg { width: 100%; height: 100%; display: block; }
.hero__frame-fallback { display: grid; place-items: center; padding: 28px; background: var(--lu-gray-50); color: var(--lu-text-secondary); min-height: 320px; text-align: center; }
.hero__frame-fallback img { max-height: 220px; width: auto; margin-bottom: 12px; }

/* ── logos strip ────────────────────────────────────────────────── */
.logos { background: #fff; border-bottom: 1px solid var(--lu-border); }
.logos section, .logos { padding-block: var(--lu-band); }
.logos .container { padding-block: 0; }
.logos__eyebrow { text-align: center; }
.logos .section-heading { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--lu-text-muted); margin-bottom: 1.75rem; }
.logos__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 56px); list-style: none; padding: 0; }
.logos__item img { height: 38px; max-width: 130px; object-fit: contain; opacity: .62; filter: grayscale(1); transition: opacity var(--lu-dur), filter var(--lu-dur); }
.logos__item a:hover img, .logos__item img:hover { opacity: 1; filter: none; }

/* ── section band backgrounds ───────────────────────────────────── */
.formats, .team-teaser, .faq { background: var(--lu-bg-subtle); }
.teaser-list, .features, .team, .eth-band { background: #fff; }

/* ── cards (unified) ────────────────────────────────────────────── */
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); margin-top: 0; }
.cards--3 { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.cards--4 { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.card { position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--lu-border); border-radius: var(--lu-r-lg); overflow: hidden; box-shadow: var(--lu-shadow-xs);
  transition: transform var(--lu-dur) var(--lu-ease), box-shadow var(--lu-dur); }
.card:hover { transform: translateY(-3px); box-shadow: var(--lu-shadow-md); }
.card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--lu-gray-100); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card__title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.card__title a { color: inherit; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__excerpt { font-size: 14px; line-height: 1.55; color: var(--lu-text-secondary); flex: 1; max-width: none; }
.card__meta { font-size: 13px; font-weight: 700; color: var(--lu-text-muted); }
.card .chip { position: relative; z-index: 1; align-self: flex-start; }

/* category / format chip (ink pill) */
.chip { display: inline-block; background: var(--lu-ink); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--lu-r-pill); text-decoration: none; }
a.chip:hover { background: var(--lu-coral-600); color: #fff; }

/* ── formats grid ───────────────────────────────────────────────── */
.formats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; margin-top: 2.75rem; }
.format-card { display: block; background: #fff; border: 1px solid var(--lu-border); border-radius: var(--lu-r-lg);
  padding: 26px; box-shadow: var(--lu-shadow-xs); color: inherit;
  transition: transform var(--lu-dur) var(--lu-ease), box-shadow var(--lu-dur); }
.format-card:hover { transform: translateY(-3px); box-shadow: var(--lu-shadow-md); }
.format-card::before { content: ""; display: block; height: 6px; width: 44px; border-radius: 999px; background: var(--lu-coral-400); margin-bottom: 22px; }
.format-card--trophy::before { background: var(--lu-yellow-400); }
.format-card--tour::before { background: var(--lu-sky); }
.format-card--race::before { background: var(--lu-coral-400); }
.format-card--enduro::before { background: var(--lu-forest); }
.format-card__title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.format-card__title a { color: inherit; }
.format-card p { margin: 10px 0 22px; font-size: 15px; line-height: 1.55; color: var(--lu-text-secondary); min-height: 46px; max-width: none; }
.format-card__more { font-size: 14px; font-weight: 800; color: var(--lu-ink); }

/* ── features (warum nicht Strava) ──────────────────────────────── */
.features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; margin-top: 2.75rem; }
.feature { display: flex; gap: 18px; align-items: flex-start; background: var(--lu-bg-subtle);
  border: 1px solid var(--lu-border); border-radius: var(--lu-r-lg); padding: 24px; }
.feature__icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--lu-r-md); background: var(--lu-yellow-100);
  display: flex; align-items: center; justify-content: center; padding: 11px; }
.feature__icon img { width: 30px; height: 30px; object-fit: contain; }
.feature__title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.feature__title a { color: inherit; }
.feature p { margin: 7px 0 0; font-size: 15px; line-height: 1.55; color: var(--lu-text-secondary); max-width: none; }

/* ── team teaser + team grid ────────────────────────────────────── */
.team-teaser__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.team-teaser__media { border-radius: var(--lu-r-xl); overflow: hidden; box-shadow: var(--lu-shadow-md); aspect-ratio: 16/11; background: var(--lu-gray-200); }
.team-teaser__media img { width: 100%; height: 100%; object-fit: cover; }
.team-teaser__text .btn { margin-top: 1.75rem; }
.team__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 32px; margin-top: 2.75rem; }
.member__photo { border-radius: var(--lu-r-lg); aspect-ratio: 4/5; object-fit: cover; margin-bottom: 12px; }
.member figcaption strong { font-weight: 800; }
.member figcaption span { color: var(--lu-text-muted); font-size: 14px; }
.photo-band img { border-radius: var(--lu-r-xl); width: 100%; aspect-ratio: 21/9; object-fit: cover; box-shadow: var(--lu-shadow-md); }
.eth-band .prose { max-width: var(--lu-container-text); }
.eth-band img { max-height: 44px; width: auto; margin-top: 1rem; }

/* ── testimonials (dark band) ───────────────────────────────────── */
.quotes { position: relative; background: var(--lu-ink); color: #fff; overflow: hidden; }
.quotes > .container { position: relative; z-index: 1; }
.quotes .section-heading { color: #fff; }
.quotes__eyebrow { color: var(--lu-yellow-400); }
.quote { display: flex; flex-direction: column; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--lu-r-lg); padding: 28px; }
.quote__text { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.9); flex: 1; max-width: none; }
.quote__text::before { content: "\201C"; display: block; font-size: 40px; line-height: .6; color: var(--lu-yellow-400); font-weight: 800; margin-bottom: 14px; }
.quote__by { display: flex; align-items: center; gap: 13px; margin-top: 24px; font-size: 13px; color: var(--lu-gray-400); }
.quote__face { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.quote__by strong { color: #fff; font-size: 15px; font-weight: 800; }

/* ── stats: yellow ZAHLEN band ──────────────────────────────────── */
.stats { background: var(--lu-yellow-400); }
.stats .container { padding-block: 0; }
.stats { padding-block: var(--lu-band); }
.stats .section-heading--stats { text-align: center; color: var(--lu-ink); margin-bottom: 2rem; }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; max-width: 1100px; margin-inline: auto; }
.stat__value { font-size: clamp(44px, 7vw, 68px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--lu-ink); }
.stat__label { margin-top: 10px; font-size: 15px; font-weight: 700; color: rgba(20,20,20,.68); }
@media (max-width: 640px) { .stats__grid { grid-template-columns: 1fr; gap: 28px; } }

/* ── FAQ accordion ──────────────────────────────────────────────── */
.faq__inner { max-width: 860px; margin-inline: auto; }
.faq .section-heading { text-align: center; }
.faq__list, .faq .faq__inner { display: block; }
.faq__item { background: #fff; border: 1px solid var(--lu-border); border-radius: var(--lu-r-md); overflow: hidden; margin-bottom: 12px; }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left;
  padding: 22px 24px; background: transparent; border: none; cursor: pointer; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--lu-ink); list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; background: var(--lu-yellow-400);
  color: var(--lu-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; transition: transform var(--lu-dur); }
details[open] .faq__q::after { content: "\2212"; }
.faq__a { padding: 0 24px 24px; font-size: 15px; line-height: 1.65; color: var(--lu-text-secondary); }
.faq__a > :first-child { margin-top: 0; }

/* ── CTA band (yellow, grid) ────────────────────────────────────── */
.cta { position: relative; background: var(--lu-yellow-400); overflow: hidden; --lu-grid-line: rgba(20,20,20,.09); }
.cta__inner { position: relative; z-index: 1; max-width: 1000px; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; padding-block: var(--lu-section); }
.cta__eyebrow { color: rgba(20,20,20,.55); }
.cta__heading { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.04; color: var(--lu-ink); }
.cta__text { font-size: clamp(17px, 2.2vw, 20px); color: rgba(20,20,20,.72); max-width: 460px; margin-top: 20px; }
.cta .btn { margin-top: 32px; }

/* ── footer (dark, grid + glow) ─────────────────────────────────── */
.footer { position: relative; background: var(--lu-ink); color: #fff; overflow: hidden; padding-block: 72px 40px; }
.footer::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 90% at 88% 0%, rgba(255,237,80,.10), transparent 60%); pointer-events: none; z-index: 0; }
.footer > .container { position: relative; z-index: 1; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.footer__col--brand { max-width: 320px; }
.footer__brand img, .footer__brand .logo-mark { height: 24px; width: auto; }
.footer__tagline { margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: var(--lu-gray-400); }
.footer__eth { margin: 14px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lu-yellow-400); }
.footer__heading { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--lu-gray-500); margin: 0 0 18px; }
.footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer__col a { color: rgba(255,255,255,.82); font-size: 15px; }
.footer__col a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--lu-yellow-400); }
.footer__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: var(--lu-gray-500); }
.footer__legal a { color: var(--lu-gray-400); }
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer__col--brand { grid-column: 1 / -1; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── listing / sub-page hero ────────────────────────────────────── */
.listing-hero, .post-hero, .contact-hero { position: relative; background: var(--lu-bg-subtle); overflow: hidden; --lu-grid-line: #ececec; }
.hero--sub { position: relative; background: var(--lu-ink); color: #fff; overflow: hidden; }
.hero--sub .container { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 84px); }
.hero--sub .chip--static { color: var(--lu-yellow-400); }
.listing-hero .container, .contact-hero .container { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 80px); }
.listing-hero h1, .contact-hero h1 { margin-block: .25rem .5rem; }
.listing-hero__intro { font-size: clamp(17px, 2.1vw, 20px); color: var(--lu-text-secondary); max-width: 620px; }
.listing-hero__author { display: flex; gap: 20px; align-items: center; }
.listing-hero__face { width: 88px; height: 88px; border-radius: 999px; object-fit: cover; }

/* ── facets ─────────────────────────────────────────────────────── */
.facets { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 1.5rem 0; }
.facets--secondary { padding-top: 8px; }
.facets__link { font-size: 14px; font-weight: 700; padding: 8px 16px; border: 1.5px solid var(--lu-border-ink); border-radius: var(--lu-r-pill); color: var(--lu-ink); transition: background var(--lu-dur), color var(--lu-dur); }
.facets__link:hover { background: var(--lu-bg-subtle); }
.facets__link.is-active { background: var(--lu-ink); color: #fff; }
.facets__link--sm { border-width: 1px; font-weight: 600; font-size: 13px; }
.facets__link--series { border-style: dashed; }
.listing-cards { padding-block: 2rem var(--lu-section); }

/* ── blog post / project detail ─────────────────────────────────── */
.post-hero__inner { position: relative; z-index: 1; padding-block: 2rem; }
.post-hero__title { margin-block: 1rem; max-width: 22ch; }
.post-hero__subtitle { font-size: clamp(18px, 2.2vw, 24px); color: var(--lu-text-secondary); }
.post-hero__meta { display: flex; align-items: center; gap: 8px; color: var(--lu-text-muted); flex-wrap: wrap; font-size: 14px; }
.post-hero__face { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; }
.post-hero__media { position: relative; z-index: 1; }
.post-hero__media img { width: 100%; border-radius: var(--lu-r-xl); aspect-ratio: 21/9; object-fit: cover; box-shadow: var(--lu-shadow-md); }
.series-banner { margin-top: 1rem; }
.series-banner a { display: inline-block; background: var(--lu-ink); color: #fff; padding: 8px 16px; border-radius: var(--lu-r-sm); font-weight: 800; font-size: 14px; }
.post__body { padding-block: 3rem; }
.crumbs { padding-block: 1rem; font-size: 13px; }
.crumbs__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; color: var(--lu-text-muted); }
.crumbs__item + .crumbs__item::before { content: "\203A"; margin-right: 8px; }
.crumbs a { color: var(--lu-text-secondary); }

/* ── prose ──────────────────────────────────────────────────────── */
.prose { max-width: var(--lu-container-text); font-size: 17px; line-height: 1.7; color: var(--lu-ink-700); }
.prose > * { max-width: 100%; }
.prose h2, .prose h3, .prose h4 { color: var(--lu-ink); margin-block: 2rem 1rem; }
.prose p, .prose ul, .prose ol { margin-block: 1rem; }
.prose li { margin-block: .35rem; }
.prose a { text-decoration: underline; text-decoration-color: var(--lu-coral-400); text-underline-offset: 2px; }
.prose blockquote { font-size: 1.25em; border-left: 4px solid var(--lu-yellow-400); padding-left: 1.25rem; margin-block: 2rem; color: var(--lu-ink); }
.prose-figure { margin-block: 2rem; }
.prose-figure img { border-radius: var(--lu-r-lg); }
.prose table { border-collapse: collapse; width: 100%; margin-block: 1.5rem; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--lu-border); padding: 8px 12px; text-align: left; }
.prose code { background: var(--lu-gray-100); padding: .1em .35em; border-radius: 5px; font-size: .9em; }
.legal-note { background: var(--lu-yellow-400); border-radius: var(--lu-r-md); padding: 12px 16px; font-weight: 800; margin-bottom: 2rem; }

/* ── related / section head link ────────────────────────────────── */
.related { padding-block: var(--lu-section) 0; }
.series-nav { display: grid; gap: 16px; padding-block: 2rem; border-block: 1px solid var(--lu-border); align-items: center; }
@media (min-width: 768px) { .series-nav { grid-template-columns: 1fr auto 1fr; } }
.series-nav__link--next { text-align: right; }
.series-nav__label { display: block; color: var(--lu-text-muted); font-size: 13px; }
.series-nav__title { font-weight: 800; }
.series-nav__hub { font-weight: 800; }

/* ── project detail layout ──────────────────────────────────────── */
.project__layout { display: grid; gap: 48px; padding-block: 3rem; }
@media (min-width: 992px) { .project__layout { grid-template-columns: minmax(0,1fr) 20rem; } }
.project__sidebar { align-self: start; position: sticky; top: 6rem; background: var(--lu-bg-subtle); border-radius: var(--lu-r-lg); padding: 24px; border: 1px solid var(--lu-border); }
.project__side-heading { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--lu-text-muted); margin-block: 1rem .5rem; }
.project__side-heading:first-child { margin-top: 0; }
.project__side-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.project__side-cta { margin-top: 1.5rem; }
.stats--inline { background: var(--lu-bg-subtle); color: var(--lu-ink); border-radius: var(--lu-r-lg); display: flex; flex-wrap: wrap; gap: 32px; padding: 24px 32px; margin-block: 2rem; }
.stats--inline .stat__value { font-size: clamp(28px, 4vw, 40px); color: var(--lu-ink); }
.stats--inline .stat__label { color: var(--lu-text-muted); font-size: 14px; }

/* ── pagination ─────────────────────────────────────────────────── */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-block: 2rem var(--lu-section); }
.pagination__num { font-weight: 800; min-width: 44px; text-align: center; padding: 10px; border: 1.5px solid var(--lu-border-ink); border-radius: var(--lu-r-sm); color: var(--lu-ink); }
.pagination__num.is-active { background: var(--lu-ink); color: #fff; }
.pagination__link { font-weight: 800; margin-inline: 12px; color: var(--lu-ink); }

/* ── contact form ───────────────────────────────────────────────── */
.contact-hero__grid { display: grid; gap: 48px; position: relative; z-index: 1; }
@media (min-width: 992px) { .contact-hero__grid { grid-template-columns: 1fr 1.1fr; } }
.contact-info { list-style: none; padding: 0; margin-top: 2rem; display: grid; gap: 16px; }
.contact-info li { display: flex; gap: 12px; align-items: flex-start; }
.contact-info__icon { width: 20px; height: 20px; flex: none; margin-top: .2em; color: var(--lu-coral-600); }
.form { background: #fff; border-radius: var(--lu-r-xl); padding: 32px; box-shadow: var(--lu-shadow-md); border: 1px solid var(--lu-border); display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__field { display: grid; gap: 6px; }
.form__field label { font-weight: 800; font-size: 14px; }
.form__field input, .form__field textarea { border: 1.5px solid var(--lu-border); border-radius: var(--lu-r-md); padding: 12px 14px; background: #fff; width: 100%; }
.form__field input:focus-visible, .form__field textarea:focus-visible { outline: 3px solid var(--lu-coral-400); outline-offset: 1px; border-color: var(--lu-coral-400); }
.form__hp { position: absolute; left: -9999px; }
.form__error { background: #fdecec; border: 1.5px solid var(--lu-coral-400); border-radius: var(--lu-r-md); padding: 12px 14px; font-weight: 800; }
.form .btn { justify-self: start; }

/* ── reveal (JS-gated) ──────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--lu-dur) var(--lu-ease-out), transform var(--lu-dur) var(--lu-ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ── responsive: hero + two-column collapse ─────────────────────── */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .hero__visual { max-width: 440px; }
  .team-teaser__inner { grid-template-columns: 1fr; }
}

/* ── baked signature grid on section bands (no extra class needed) ─ */
.hero::before, .hero--sub::before, .quotes::before, .footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--lu-grid-line-dark) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--lu-grid-line-dark) 1px, transparent 1px);
  background-size: var(--lu-grid-size) var(--lu-grid-size); background-position: center top;
}
.cta::before, .listing-hero::before, .post-hero::before, .contact-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--lu-grid-line) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--lu-grid-line) 1px, transparent 1px);
  background-size: var(--lu-grid-size) var(--lu-grid-size); background-position: center top;
}
.hero::before { -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 100%); }

/* ── hero lead paragraph (from the markdown fragment) ───────────── */
.hero__col > p:not(.hero__eyebrow) { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.6; color: var(--lu-gray-300); margin: 26px 0 0; max-width: 540px; }
.hero__col > p strong { color: #fff; font-weight: 700; }
.hero__col h1 { color: #fff; }
.hero__col h1 .hl { color: var(--lu-yellow-400); }
.hero__eth img { max-height: 44px; width: auto; }

/* ── testimonials static glow (parity with hero/footer) ─────────── */
.quotes::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 90% 0%, rgba(255,122,99,.14), transparent 60%); }

/* ===================================================================
   HANDOFF-MATCH OVERRIDES (design audit 2026-07-31) — later rules win
   =================================================================== */

/* highlight: accent lives in eyebrows now; section .hl is plain (hero stays yellow) */
.hl { color: inherit; font-weight: 800; }
.hero__col h1 .hl, .hero h1 .hl { color: var(--lu-yellow-400); }

/* -- chip colour variants ------------------------------------------ */
.chip--ink   { background: var(--lu-ink);         color: #fff; }
.chip--sky   { background: var(--lu-sky);         color: #fff; }
.chip--coral { background: var(--lu-coral-400);   color: #fff; }
.chip--yellow{ background: var(--lu-yellow-400);  color: var(--lu-ink); }
a.chip--sky:hover, a.chip--coral:hover, a.chip--yellow:hover { filter: brightness(.95); background-image: none; }

/* -- card: two anatomies ------------------------------------------- */
.card__media { position: relative; }
.card--project .card__media { aspect-ratio: 3/2; }
.card--post .card__media { aspect-ratio: 16/10; }
.card__badge { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: var(--lu-r-pill);
  font-size: 11px; font-weight: 800; letter-spacing: .03em; z-index: 2; }
.card__badge--yellow { background: var(--lu-yellow-400); color: var(--lu-ink); }
.card__badge--sky    { background: var(--lu-sky);        color: #fff; }
.card__badge--coral  { background: var(--lu-coral-400);  color: #fff; }
.card__body { gap: 0; padding: 20px 20px 22px; }
.card__client { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--lu-text-muted); }
.card--project .card__title { font-size: 19px; line-height: 1.22; }
.card--project .card__excerpt { margin-top: 12px; }
.card--post .card__title { margin-top: 14px; }
.card--post .card__excerpt { margin: 10px 0 16px; }
.card .chip { margin-bottom: 0; }

/* -- section eyebrow above plain h2 -------------------------------- */
.eyebrow { display: block; }
.quotes__eyebrow, .hero__eyebrow { color: var(--lu-yellow-400); }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head__col .eyebrow { margin-bottom: 14px; }

/* -- dark listing hero (blog list, projekte list, series, author) -- */
.listing-hero { background: var(--lu-ink); color: #fff; --lu-grid-line: rgba(255,255,255,.06); }
.listing-hero::before { -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 100%); }
.listing-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 80% at 85% -10%, rgba(255,237,80,.16), transparent 55%); }
.listing-hero .container { position: relative; z-index: 1; padding-block: clamp(56px,7vw,88px) clamp(48px,6vw,72px); }
.listing-hero h1 { color: #fff; }
.listing-hero .chip--static, .listing-hero .eyebrow { color: var(--lu-yellow-400); }
.listing-hero__intro { color: var(--lu-gray-300); }
.listing-hero__author { color: #fff; }

/* -- filter block (two rows, divider) ------------------------------ */
.facets-block { display: flex; flex-direction: column; gap: 14px; padding-bottom: 36px; border-bottom: 1px solid var(--lu-border); margin-bottom: 44px; }
.facets-block .facets { padding-block: 0; }
.facets { gap: 10px; }
.facets__link { height: 40px; padding: 0 18px; font-weight: 800; border-color: var(--lu-gray-300); }
.facets__link.is-active { background: var(--lu-ink); color: #fff; border-color: var(--lu-ink); }
.facets--secondary { gap: 8px; }
.facets__link--sm { height: 34px; padding: 0 15px; font-size: 13px; font-weight: 700; background: var(--lu-bg-subtle); color: var(--lu-text-secondary); border: 1px solid var(--lu-border); }
.facets__link--sm.is-active { background: var(--lu-ink); color: #fff; border-color: var(--lu-ink); }

/* -- blog featured post -------------------------------------------- */
.featured { display: grid; grid-template-columns: 1.1fr .9fr; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--lu-border); border-radius: var(--lu-r-xl); overflow: hidden;
  box-shadow: var(--lu-shadow-sm); margin-bottom: 44px; transition: box-shadow var(--lu-dur); position: relative; }
.featured:hover { box-shadow: var(--lu-shadow-lg); }
.featured__media { aspect-ratio: 16/11; overflow: hidden; background: var(--lu-gray-100); }
.featured__media img { width: 100%; height: 100%; object-fit: cover; }
.featured__body { padding: clamp(28px,4vw,48px); display: flex; flex-direction: column; justify-content: center; }
.featured__tags { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.featured__new { background: var(--lu-yellow-400); color: var(--lu-ink); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--lu-r-pill); }
.featured__title { font-size: clamp(24px,3.2vw,34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.featured__title a { color: inherit; }
.featured__title a::after { content: ""; position: absolute; inset: 0; }
.featured__excerpt { margin: 16px 0 24px; font-size: 16px; line-height: 1.6; color: var(--lu-text-secondary); max-width: none; }
.featured__foot { display: flex; align-items: center; gap: 12px; }
.featured__read { font-size: 13px; font-weight: 700; color: var(--lu-text-muted); }
.featured__more { font-size: 15px; font-weight: 800; color: var(--lu-ink); }
@media (max-width: 820px) { .featured { grid-template-columns: 1fr; } }

/* -- pagination 42px md -------------------------------------------- */
.pagination__num { width: 42px; min-width: 42px; height: 42px; padding: 0; border-radius: var(--lu-r-md); border-width: 1.5px; display: inline-flex; align-items: center; justify-content: center; }
.pagination__link { height: 42px; padding: 0 18px; border: 1.5px solid var(--lu-border); border-radius: var(--lu-r-md); display: inline-flex; align-items: center; gap: 6px; margin-inline: 0; }

/* -- project/article detail: light hero (no grey band, no grid) ---- */
.post-hero { background: #fff; }
.post-hero::before { display: none; }
.project .post-hero__title, .post .post-hero__title { font-size: clamp(34px,5.4vw,60px); line-height: 1.04; max-width: 16ch; }
.post .post-hero__title { font-size: clamp(30px,4.8vw,50px); line-height: 1.08; }
.project .post-hero__media img, .post .post-hero__media img { aspect-ratio: 16/9; box-shadow: var(--lu-shadow-md); }
.post-hero .chip--format { background: var(--lu-yellow-400); color: var(--lu-ink); text-transform: none; height: 30px; padding: 0 14px; font-size: 12px; letter-spacing: .04em; display: inline-flex; align-items: center; }

/* -- project detail: dl fact card + body + related band ----------- */
.project .container, .project__layout { max-width: 1120px; }
.project__layout { gap: 56px; padding-block: clamp(48px,6vw,72px) clamp(72px,9vw,100px); }
.project__side-title { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lu-text-muted); margin: 0 0 20px; }
.project__facts { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.project__facts dt { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lu-text-muted); }
.project__facts dd { margin: 4px 0 0; font-size: 17px; font-weight: 800; }
.project__side-rule { height: 1px; background: var(--lu-border); }
.btn--block { width: 100%; justify-content: center; height: 50px; font-size: 15px; }
.project__body > p:first-of-type, .prose--lead > p:first-of-type { font-size: 20px; line-height: 1.6; color: var(--lu-ink); font-weight: 500; }
.project__body ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.project__body li { position: relative; padding-left: 30px; max-width: none; }
.project__body li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--lu-accent); font-weight: 800; }
.related { background: var(--lu-bg-subtle); padding-block: clamp(64px,8vw,100px); }
.related .container, .related__inner { max-width: 1200px; margin-inline: auto; padding-inline: var(--lu-gutter); }
.related .section-heading { font-size: clamp(26px,3.6vw,38px); }

/* -- article lead + blockquote italic ------------------------------ */
.post__body.prose > p:first-of-type { font-size: 21px; line-height: 1.6; color: var(--lu-ink); font-weight: 500; }
.prose blockquote { font-style: italic; font-weight: 700; font-size: 22px; line-height: 1.5; letter-spacing: -.02em; }

/* -- about: centered hero, overlap image, eth card, team role ------ */
.hero--about .container { max-width: 1000px; text-align: center; padding-block: clamp(56px,7vw,92px) clamp(48px,6vw,72px); }
.hero--about .container > p:not(.chip--static) { font-size: clamp(17px,2.1vw,20px); line-height: 1.6; color: var(--lu-gray-300); max-width: 620px; margin: 24px auto 0; }
.hero--about h1 { font-size: clamp(38px,6vw,66px); line-height: 1.03; }
.hero--about::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 80% at 85% -10%, rgba(255,237,80,.18), transparent 55%), radial-gradient(60% 60% at 5% 105%, rgba(255,122,99,.14), transparent 60%); }
.photo-band { padding-block: 0; }
.photo-band .container { max-width: 1120px; padding-top: clamp(32px,4vw,48px); }
.photo-band img { aspect-ratio: 16/9; box-shadow: var(--lu-shadow-lg); transform: translateY(-40px); }
.member figcaption strong { display: block; font-size: 19px; letter-spacing: -.02em; margin-top: 6px; }
.member figcaption span { color: var(--lu-accent); font-weight: 700; font-size: 14px; }
.member__photo { box-shadow: var(--lu-shadow-sm); }
.team__grid { grid-template-columns: repeat(auto-fit, minmax(min(220px,100%),1fr)); gap: 24px; }
.eth-band { background: var(--lu-bg-subtle); }
.eth-band__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; max-width: 1120px; margin-inline: auto; }
.eth-band__grid h2 { font-size: clamp(24px,3.4vw,34px); letter-spacing: -.025em; line-height: 1.18; }
.eth-band__grid .prose { max-width: none; }
.eth-band__logocard { background: #fff; border: 1px solid var(--lu-border); border-radius: var(--lu-r-lg); padding: 40px; box-shadow: var(--lu-shadow-xs); display: flex; align-items: center; justify-content: center; }
.eth-band__logocard img { width: 100%; max-width: 320px; max-height: none; margin: 0; }
@media (max-width: 760px) { .eth-band__grid { grid-template-columns: 1fr; } }

/* -- contact: coloured icon tiles ---------------------------------- */
.contact-hero { background: var(--lu-bg-subtle); --lu-grid-line: rgba(20,20,20,.05); }
.contact-info li { align-items: center; gap: 16px; }
.contact-info__tile { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--lu-r-md); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.contact-info__tile--mail { background: var(--lu-yellow-400); color: var(--lu-ink); }
.contact-info__tile--addr { background: var(--lu-ink); color: #fff; }
.contact-info__label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lu-text-muted); }
.contact-info__value { font-size: 17px; font-weight: 800; color: var(--lu-ink); line-height: 1.35; }
.contact-info a .contact-info__value { color: var(--lu-ink); }

/* -- logos band padding + format-more ------------------------------ */
.logos { padding-block: clamp(40px,5vw,56px); }
.logos .section-heading { margin-bottom: 30px; }
.format-card__more { display: inline-block; margin-top: 4px; }


/* -- final tweaks (audit) ------------------------------------------ */
.hl { font-weight: inherit; }
.hero__col h1 .hl, .hero h1 .hl { color: var(--lu-yellow-400); font-weight: 800; }
.format-card--trophy .format-card__arrow { color: var(--lu-yellow-400); }
.format-card--tour   .format-card__arrow { color: var(--lu-sky); }
.format-card--race   .format-card__arrow { color: var(--lu-coral-400); }
.format-card--enduro .format-card__arrow { color: var(--lu-forest); }
.section-head__col { display: flex; flex-direction: column; }
.logos .section-heading { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lu-text-muted); text-align: center; }
.project__facts a { color: inherit; text-decoration: none; }
.project__facts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.project__side-rule { margin: 22px 0 20px; }
.contact-info__tile svg { width: 22px; height: 22px; }
.featured__tags, .featured__foot { position: relative; z-index: 2; }
.featured__body { position: relative; }
.feature__body { flex: 1; min-width: 0; }

/* breathing room between the dark listing hero and the filter block */
.listing-hero + .container { padding-top: clamp(44px, 5vw, 68px); }

/* ===================================================================
   HANDOVER #2 (2026-08-03) - one-screen hero, rotating automation strip,
   testimonial slider, cursor glow, ETH footer chip. Later rules win.
   =================================================================== */

/* -- header: mobile bar + actions cluster (SiteHeader.dc.html) ------- */
@media (max-width: 900px) { .nav__inner { height: 62px; } }
/* Nav links sit at 34px, but the source groups the lang switcher and the CTA
   into a tighter 20px actions cluster. The PHP keeps them in one <ul>, so pull
   the CTA back by the difference — desktop only, the mobile drawer stacks. */
@media (min-width: 901px) { .nav__list .lang + li { margin-left: -14px; } }

/* -- filters: single row now that the sport chips are gone (§8) ----- */
.facets-block { flex-direction: row; flex-wrap: wrap; gap: 10px; }
/* The chips set an explicit height, so they need inline-flex + align-items to
   centre the label — as a plain flex item the line box sticks to the top of the
   pill. Matches the chip in Projekte.dc.html. */
.facets__link { display: inline-flex; align-items: center; }

/* -- home hero fits one viewport (72px = header height) ------------- */
/* svh, not vh: no jump when mobile browser chrome collapses. */
.hero--home { min-height: calc(100svh - 72px); display: flex; align-items: center; padding-block: 0; }
.hero--home .hero__inner { width: 100%; padding-block: clamp(40px, 5vw, 72px); }
/* Below the grid breakpoint the hero is content-height again, never a forced
   tall screen — but it stays a flex container, as in the source. */
@media (max-width: 960px) {
  .hero--home { min-height: 0; }
  .hero__inner { gap: 40px; }
}
@media (max-width: 640px) { .hero__stats { gap: 22px; } }

/* The embed is capped (300–400px, set on .hero__frame above) so it can't blow
   out the hero fold — it scrolls internally. Lift the cap if you want the frame
   to grow to the embed's full postMessage height instead (site.js honours
   {type:'resize'} either way). */
@media (max-width: 640px) { .hero__frame { max-height: 320px; } }

/* -- hero: rotating automation messages ----------------------------- */
/* The rows share one grid cell so the yellow box sizes to its tallest message
   and stays put. Do NOT switch this back to position:absolute — that collapses
   the box and leaves dead space under the embed. */
.hero__auto { background: var(--lu-yellow-400); color: var(--lu-ink);
  border-radius: var(--lu-r-md); padding: 12px 14px; overflow: hidden; }
.hero__auto-stack { display: grid; width: 100%; }
.hero__auto-row { grid-area: 1 / 1; display: flex; gap: 12px; align-items: center;
  opacity: 0; animation: luAutoCycle 10s infinite; }
.hero__auto-emoji { flex-shrink: 0; font-size: 19px; line-height: 1; }
.hero__auto-text { font-size: 13.5px; font-weight: 800; line-height: 1.35; max-width: none; }
/* 5 rows x 2s visible inside a 10s loop; the stagger is the inline animation-delay */
@keyframes luAutoCycle {
  0%   { opacity: 0; transform: translateY(9px); }
  3%   { opacity: 1; transform: translateY(0); }
  18%  { opacity: 1; transform: translateY(0); }
  21%  { opacity: 0; transform: translateY(-9px); }
  100% { opacity: 0; transform: translateY(-9px); }
}
/* The global reduced-motion rule crushes every animation to 1ms, which would
   leave all five rows at their opacity:0 end state. Show the first one instead. */
@media (prefers-reduced-motion: reduce) {
  .hero__auto-row { animation: none !important; opacity: 1; transform: none; }
  .hero__auto-row + .hero__auto-row { display: none; }
}

/* -- testimonials: scroll-snap slider ------------------------------- */
.quotes__head { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.quotes__head-col { max-width: 720px; }
.quotes__head .section-heading { margin-bottom: 0; }
.quotes__track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 96%, transparent 100%); }
.quotes__track::-webkit-scrollbar { display: none; }
/* 3 cards + a ~36px peek of the next. box-sizing is restated deliberately: the
   flex-basis assumes the 28px card padding is inside it, and this rule breaks the
   moment someone loosens the global border-box reset. */
.quotes__track > .quote { box-sizing: border-box; flex: 0 0 calc((100% - 80px) / 3); scroll-snap-align: start; }
.quotes__nav { display: none; gap: 12px; flex-shrink: 0; }
.js .quotes__nav { display: flex; }
.quotes__arrow { width: 48px; height: 48px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 20px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.22); color: #fff;
  transition: background var(--lu-dur), border-color var(--lu-dur); }
.quotes__arrow:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
@media (max-width: 700px) { .quotes__track > .quote { flex-basis: 100%; } }

/* -- cursor-following glow ------------------------------------------ */
/* The overlay div carries the gradient (see partials/glow.php); the old static
   ::after glares would double up with it, so they go. */
.lu-glow-section { position: relative; overflow: hidden; }
.lu-glow { transition: background 200ms var(--lu-ease-out); }
.hero--home .lu-glow { transition: background 220ms var(--lu-ease-out); }
.quotes::after, .listing-hero::after, .hero--about::after { content: none; }

/* -- client logos: single-line slider ------------------------------- */
/* One row, never wrapping. Images keep loading="lazy", and because the track
   clips them the browser only fetches each logo as it is scrolled into view. */
.logos__slider { position: relative; }
.logos__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%); }
.logos__list::-webkit-scrollbar { display: none; }
/* flex-start, not center: a centred flex row that overflows makes its left
   half unreachable by scrolling in every engine. */
.logos__item { flex: 0 0 auto; scroll-snap-align: center; }
/* Arrows overlay the fade so the row keeps its full width. Light-band variant
   of .quotes__arrow — ink on white, not white on ink. */
.logos__arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px; align-items: center; justify-content: center;
  font-size: 17px; cursor: pointer; z-index: 2;
  background: var(--lu-white); border: 1.5px solid var(--lu-border); color: var(--lu-ink);
  box-shadow: var(--lu-shadow-sm);
  transition: background var(--lu-dur), border-color var(--lu-dur); }
.js .logos__arrow { display: inline-flex; }
.logos__arrow:hover { background: var(--lu-gray-50); border-color: var(--lu-border-strong, var(--lu-gray-300)); }
.logos__arrow--prev { left: -6px; }
.logos__arrow--next { right: -6px; }
@media (max-width: 700px) { .js .logos__arrow { display: none; } }

/* ===================================================================
   HANDOVER #3 v2 (2026-08-05) — segment landing pages (/fuer/<segment>),
   ported from the delivered Segment-*.dc.html design source. Light hero
   with mono claim block, divider-row sections, dark praxis + CTA bands.
   =================================================================== */

.container-narrow { max-width: 824px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 32px); }
.lu-num { font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.seg-eyebrow--coral { color: var(--lu-coral-600); }
.seg-eyebrow--muted { color: var(--lu-text-muted); }
.seg-eyebrow--yellow { color: var(--lu-yellow-400); }

/* -- hero: ink band matching the homepage hero (Phil, 2026-08-05 —
   overrides the design source's light segment hero for consistency) ---- */
.seg-hero { position: relative; background: var(--lu-ink); color: #fff; overflow: hidden;
  border-bottom: none; }
.seg-hero .container { position: relative; z-index: 1; padding-block: clamp(56px, 8vw, 96px) 0; }
.seg-hero__text { max-width: 760px; }
.seg-hero__h1 { margin: 0; font-size: clamp(32px, 4.6vw, 52px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; color: #fff; }
.seg-hero__lede { margin: 20px 0 0; font-size: clamp(17px, 2vw, 20px); line-height: 1.6;
  color: var(--lu-gray-300); max-width: 620px; }
.seg-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.seg-btn { height: 52px; padding: 0 26px; font-size: 15.5px; }
/* ghost twin of the homepage hero's secondary button */
.seg-btn-outline { display: inline-flex; align-items: center; height: 52px; padding: 0 26px;
  border-radius: var(--lu-r-md); background: rgba(255,255,255,.06); color: #fff; font-size: 15.5px;
  font-weight: 700; text-decoration: none; border: 2px solid rgba(255,255,255,.22);
  transition: background var(--lu-dur), border-color var(--lu-dur); }
.seg-btn-outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.seg-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 48px; padding: 28px 0; }
.seg-fact__num { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; color: #fff; }
.seg-fact__label { margin-top: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--lu-gray-400); }
@media (max-width: 900px) { .seg-facts { grid-template-columns: 1fr 1fr; } }

/* -- bands + split -------------------------------------------------- */
.seg-band { background: var(--lu-white); }
.seg-band > .container, .seg-band > .container-narrow { padding-block: clamp(56px, 8vw, 96px); }
.seg-band--alt { background: var(--lu-bg-subtle); border-top: 1px solid var(--lu-border); }
.seg-band--deep { background: var(--lu-ink); color: #fff; position: relative; overflow: hidden; }
.seg-deep__inner { position: relative; z-index: 1; }
.seg-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .seg-split { grid-template-columns: 1fr; } }
.seg-h2 { margin: 0; font-size: clamp(26px, 3.6vw, 38px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; }
.seg-h2--pre-list { margin-bottom: 32px; }
.seg-h2--cta { font-size: clamp(28px, 4vw, 42px); text-wrap: balance; }
.seg-lede { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--lu-text-secondary); }
.seg-lede--deep { margin: 0; color: var(--lu-gray-300); max-width: 38em; }
.seg-h2 + .seg-lede--deep, .seg-h2--cta ~ .seg-lede--deep { margin-top: 18px; max-width: 560px; }
.seg-lede--pre-list { margin: 16px 0 40px; }

/* -- divider rows (Ausgangslage / Formate / Nutzen) ------------------ */
/* icon chip added 2026-08-05 ("make them more appealing") — coral stroke on a
   subtle square, sitting beside the text block */
.seg-row { display: flex; gap: 18px; align-items: flex-start; padding: 24px 0;
  border-top: 1px solid var(--lu-border); }
.seg-row__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--lu-r-sm);
  background: var(--lu-coral-50); display: inline-flex; align-items: center; justify-content: center; }
.seg-row__icon .lu-icon { width: 21px; height: 21px; color: var(--lu-coral-600); }
.seg-row__body { flex: 1; }
.seg-row__tag { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--lu-coral-600); }
.seg-row h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.seg-row p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--lu-text-secondary); }

/* -- statement ------------------------------------------------------- */
.seg-statement { margin: 0; max-width: 20em; font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.18; }
.seg-statement em { font-style: normal; color: var(--lu-coral-600); }

/* -- dark praxis band ------------------------------------------------ */
.seg-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  border-top: 1px solid rgba(255,255,255,.16); margin-top: 32px; padding-top: 28px; }
.seg-proof__num { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; color: #fff; }
.seg-proof__cap { margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--lu-gray-400); }
.seg-proof__links { margin: 26px 0 0; font-family: var(--lu-font-mono); font-size: 13.5px; color: var(--lu-gray-300); }
.seg-proof__links a { color: #fff; text-decoration: underline; text-underline-offset: 3px; margin-right: 18px; }
@media (max-width: 900px) { .seg-proof { grid-template-columns: 1fr; } }

/* proof block removed 2026-08-05 — the head row IS the section head now */
.seg-praxis__head { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 20px; }
.seg-praxis__nav { display: none; gap: 10px; flex-shrink: 0; }
.js .seg-praxis__nav { display: flex; }
.quotes__arrow--sm { width: 42px; height: 42px; font-size: 17px; background: transparent;
  border-color: rgba(255,255,255,.24); }
.seg-praxis__track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; margin-top: 22px;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 96%, transparent 100%); }
.seg-praxis__track::-webkit-scrollbar { display: none; }
.seg-dark-card { box-sizing: border-box; flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--lu-r-lg); overflow: hidden;
  transition: transform var(--lu-dur) var(--lu-ease), background var(--lu-dur); }
.seg-dark-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.08); }
.seg-dark-card__media { display: block; aspect-ratio: 3/2; overflow: hidden; background: rgba(255,255,255,.06); }
.seg-dark-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seg-dark-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.seg-dark-card__pill { align-self: flex-start; background: var(--lu-yellow-400); color: var(--lu-ink);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; }
.seg-dark-card__title { margin-top: 12px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.seg-dark-card__excerpt { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--lu-gray-300); flex: 1; }
.seg-dark-card__more { margin-top: 14px; font-size: 12.5px; font-weight: 800; color: var(--lu-yellow-400); }
@media (max-width: 700px) { .seg-dark-card { flex-basis: 100%; } }

/* -- numbered process (narrow) --------------------------------------- */
.seg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.seg-steps li { display: flex; gap: 20px; align-items: flex-start; }
.seg-steps__num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px;
  background: var(--lu-yellow-400); color: var(--lu-ink); font-size: 14px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.seg-steps h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.seg-steps p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--lu-text-secondary); }

/* -- FAQ: compact variant per design --------------------------------- */
.seg-faq .faq__item { margin-bottom: 10px; }
.seg-faq .faq__q { padding: 19px 20px; font-size: 16px; }
.seg-faq .faq__q::after { width: 24px; height: 24px; font-size: 16px; }
.seg-faq .faq__a { padding: 0 20px 20px; font-size: 15.5px; }

/* -- price card ------------------------------------------------------ */
.seg-price { border: 1px solid var(--lu-border); border-radius: var(--lu-r-lg); padding: 32px;
  background: var(--lu-bg-subtle); }
.seg-price__figure { font-size: clamp(30px, 4vw, 42px); font-weight: 800; color: var(--lu-ink); }
.seg-price__note { margin-top: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--lu-text-muted); }
.seg-price__rows { list-style: none; margin: 24px 0 0; padding: 0; }
.seg-price__rows li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0;
  border-top: 1px solid var(--lu-border); font-size: 14.5px; color: var(--lu-text-secondary); }
.seg-price__rows b { color: var(--lu-ink); font-weight: 800; white-space: nowrap; }

/* -- dark CTA (narrow) ----------------------------------------------- */
.seg-cta__action { margin: 32px 0 0; }
.seg-btn-ghost { display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 28px;
  border-radius: var(--lu-r-md); background: rgba(255,255,255,.06); color: #fff; font-size: 16px;
  font-weight: 700; text-decoration: none; border: 2px solid rgba(255,255,255,.22);
  transition: background var(--lu-dur), border-color var(--lu-dur); }
.seg-btn-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.seg-cta__contact { margin: 28px 0 0; font-family: var(--lu-font-mono); font-size: 13.5px;
  line-height: 1.9; color: var(--lu-gray-400); }
.seg-cta__contact a { color: #fff; }

/* -- weitere bereiche: 2-col arrow list ------------------------------ */
.seg-others { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 32px; }
.seg-other { display: flex; align-items: baseline; gap: 16px; padding: 20px 0;
  border-top: 1px solid var(--lu-border); text-decoration: none; color: inherit; }
.seg-other__body { flex: 1; }
.seg-other h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--lu-ink); }
.seg-other p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--lu-text-secondary); }
.seg-other__mark { flex-shrink: 0; font-size: 16px; font-weight: 800; color: var(--lu-coral-500);
  transition: transform var(--lu-dur); }
.seg-other:hover .seg-other__mark { transform: translateX(4px); }
.seg-other:hover h3 { color: var(--lu-coral-600); }
@media (max-width: 700px) { .seg-others { grid-template-columns: 1fr; } }

/* ===================================================================
   HOME v2 (2026-08-05) — rebuilt homepage per Home.dc.html (handover #3
   §1). Trust counters, audience rows, steps, benefit cards, formats
   grid, dark comparison, light quotes, price, closing CTA.
   =================================================================== */

/* The legacy `section { padding-block: var(--lu-section) }` (line ~101) is
   what the pre-rebuild templates space themselves with. The rebuilt sections
   carry their padding on the inner container per the design source — without
   this reset both paddings stack and every band gets ~2× the intended gap. */
.trust, .aud, .how, .gain, .refs, .fmt, .cmp, .quotes--light, .price,
.faq, .closing, .seg-hero, .seg-band { padding-block: 0; }
/* Same double-padding existed on the pre-rebuild bands whose INNER wrapper
   also pads (found live on /blog/serie/…, 2026-08-05): listing/contact heroes
   and the site CTA. .post-hero is NOT reset — its inner pads only 2rem and
   needs the section padding. */
.cta, .listing-hero, .contact-hero { padding-block: 0; }

/* -- hero refinements (new copy, ink LIVE pill, bar+icon automation) - */
.hero__h1 { margin: 0; font-size: clamp(36px, 5.4vw, 62px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.04; color: #fff; text-wrap: balance; }
.hero__lede { margin: 26px 0 0; font-size: clamp(17px, 2vw, 20px); line-height: 1.62;
  color: var(--lu-gray-300); max-width: 560px; }
.hero__actions { margin-top: 40px; }
.hero--home .hero__card { max-width: 460px; padding: 20px; gap: 14px; }
.hero__live { background: var(--lu-ink); color: #fff; letter-spacing: 0.05em; }
.hero__live-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--lu-coral-400);
  animation: luPulse 2.4s var(--lu-ease) infinite; }
@keyframes luPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.hero__frame { max-height: 380px; }
.hero__frame iframe { height: 380px; }
.hero__auto-bar { flex-shrink: 0; width: 3px; align-self: stretch; border-radius: 2px; background: var(--lu-ink); }
.hero__auto-row { gap: 11px; }
.hero__auto-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--lu-ink); }
.lu-icon { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .hero__live-dot { animation: none; } }

/* -- trust row ------------------------------------------------------- */
.trust { background: var(--lu-bg-subtle); }
.trust .container { padding-block: clamp(56px, 8vw, 96px); }
.trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.trust__stat { padding-top: 4px; border-top: 1px solid var(--lu-border-strong, var(--lu-gray-300)); }
.trust__num { margin-top: 20px; font-size: clamp(44px, 6vw, 68px); font-weight: 800;
  line-height: 1; color: var(--lu-ink); white-space: nowrap; }
.trust__suf { color: var(--lu-yellow-400); }
.trust__label { margin-top: 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--lu-text-secondary); }
.trust__eth { margin: 40px 0 0; font-size: 17px; font-weight: 600; color: var(--lu-text-secondary); }
/* logo slider inside the trust band — mechanics from .logos__* (below the
   handover-2 marker), sized to the trust row's 34px logo height */
.trust__logos { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--lu-border); }
.trust__logos .logos__list { list-style: none; margin: 0; padding: 0; display: flex;
  align-items: center; gap: clamp(24px, 4vw, 48px); }
.trust__logos img { height: 34px; max-width: 120px; object-fit: contain; opacity: .6;
  filter: grayscale(1); transition: opacity var(--lu-dur), filter var(--lu-dur); }
.trust__logos a:hover img, .trust__logos img:hover { opacity: 1; filter: grayscale(0); }
@media (max-width: 760px) { .trust__grid { grid-template-columns: 1fr; gap: 0; }
  .trust__stat { padding-block: 18px 22px; } }

/* -- audiences (Für wen) --------------------------------------------- */
.aud .container { padding-block: clamp(56px, 8vw, 96px); }
.aud__head { max-width: 680px; }
.aud__lede { margin: 16px 0 0; font-size: 18px; line-height: 1.6; color: var(--lu-text-secondary); }
.aud__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 40px; }
.aud__row { display: flex; align-items: center; gap: 18px; padding: 24px 0;
  border-top: 1px solid var(--lu-border); text-decoration: none; color: inherit;
  transition: padding-left var(--lu-dur) var(--lu-ease); }
.aud__row:hover { padding-left: 10px; }
.aud__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--lu-r-md);
  background: var(--lu-bg-subtle); border: 1px solid var(--lu-border);
  display: inline-flex; align-items: center; justify-content: center; }
.aud__icon .lu-icon { width: 21px; height: 21px; color: var(--lu-ink); }
.aud__body { flex: 1; }
.aud__body h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--lu-ink); }
.aud__body p { margin: 7px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--lu-text-secondary); }
.aud__mark { flex-shrink: 0; font-size: 18px; font-weight: 800; color: var(--lu-coral-500); }
@media (max-width: 760px) { .aud__grid { grid-template-columns: 1fr; } }

/* -- three steps: card grid (2026-08-05, the narrow list felt empty) -- */
.how { background: var(--lu-bg-subtle); border-top: 1px solid var(--lu-border); }
.how .container { padding-block: clamp(56px, 8vw, 96px); }
.how__h { max-width: 680px; }
.how__grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: none; }
.how__card { background: var(--lu-white); border: 1px solid var(--lu-border);
  border-radius: var(--lu-r-lg); padding: 28px; box-shadow: var(--lu-shadow-xs);
  display: flex; flex-direction: column; }
.how__card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.how__num { font-size: 15px; font-weight: 800; color: var(--lu-ink);
  background: var(--lu-yellow-400); width: 38px; height: 38px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; }
.how__icon { width: 24px; height: 24px; color: var(--lu-coral-500); }
.how__card h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.how__card p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--lu-text-secondary); }
.how__meta { margin-top: auto !important; padding-top: 16px; font-size: 13.5px !important;
  font-weight: 700; color: var(--lu-coral-600) !important; }
@media (max-width: 860px) { .how__grid { grid-template-columns: 1fr; } }

/* -- benefit cards ---------------------------------------------------- */
.gain .container { padding-block: clamp(56px, 8vw, 96px); }
.gain__h { max-width: 680px; }
.gain__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 40px; margin-top: 40px; }
.gain__card { padding-top: 22px; border-top: 2px solid var(--lu-ink);
  display: block; text-decoration: none; color: inherit;
  transition: transform var(--lu-dur) var(--lu-ease); }
a.gain__card:hover { transform: translateY(-3px); }
.gain__icon { width: 26px; height: 26px; color: var(--lu-coral-500); display: block; margin-bottom: 16px; }
.gain__card h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.gain__card p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--lu-text-secondary); }
.gain__more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 800; color: var(--lu-coral-600); }

/* -- benefit popups: :target modals ---------------------------------- */
/* Server-rendered (indexable), anchor-addressable (#nutzen-<key>), no JS
   needed. display:none keeps them out of the layout until targeted. */
.pop { display: none; }
/* The OVERLAY scrolls, not the panel — a panel taller than the phone screen
   is then reachable in full (incl. its close button, which used to scroll out
   of the panel's own scrollport) and no vh maths is involved: `100vh` on
   phones is the URL-bar-collapsed height, so the old max-height overflowed
   the visible area. `margin: auto` centres safely: unlike align-items:center
   it never clips the top when the panel is taller than the viewport.
   `padding` also neutralises the global `section` rule — .pop IS a <section>
   and inherited the band padding, which pushed every panel off-centre
   (mobile, 2026-08-07). */
.pop:target { display: flex; position: fixed; inset: 0; z-index: 300; padding: 20px;
  overflow-y: auto; overscroll-behavior: contain; }
/* Fixed, not absolute: an absolute backdrop is sized to the overlay's visible
   box but scrolls away with it, baring the lower half. */
.pop__backdrop { position: fixed; inset: 0; background: rgba(20,20,20,.55); cursor: default; }
.pop__panel { position: relative; z-index: 1; width: 100%; max-width: 640px; margin: auto;
  background: var(--lu-white);
  border-radius: var(--lu-r-lg); box-shadow: var(--lu-shadow-lg); padding: clamp(28px, 5vw, 44px); }
.pop__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--lu-gray-100); color: var(--lu-ink); font-size: 22px; text-decoration: none;
  transition: background var(--lu-dur); }
.pop__close:hover { background: var(--lu-yellow-400); }
.pop__icon { width: 30px; height: 30px; color: var(--lu-coral-500); display: block; margin-bottom: 16px; }
.pop__panel h3 { margin: 0; font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -0.02em; }
.pop__body p { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: var(--lu-text-secondary); }
.pop__cta { margin: 26px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .pop:target .pop__panel { animation: luPopIn 200ms var(--lu-ease-out); }
  @keyframes luPopIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* -- projects band ---------------------------------------------------- */
.refs { background: var(--lu-bg-subtle); border-top: 1px solid var(--lu-border); }
.refs .container { padding-block: clamp(56px, 8vw, 96px); }
.refs__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 40px; }
.refs__head .section-heading { margin-bottom: 0; }

/* -- formats grid ------------------------------------------------------ */
.fmt .container { padding-block: clamp(56px, 8vw, 96px); }
.fmt__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.fmt__lead { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between;
  gap: 32px; text-decoration: none; color: inherit; background: var(--lu-bg-subtle);
  border: 1px solid var(--lu-border); border-radius: var(--lu-r-lg); padding: clamp(28px, 4vw, 44px);
  transition: transform var(--lu-dur) var(--lu-ease), box-shadow var(--lu-dur); }
.fmt__lead:hover { transform: translateY(-3px); box-shadow: var(--lu-shadow-md); }
.fmt__lead h3 { margin: 0; font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -0.03em; }
.fmt__lead > div > p { margin: 14px 0 0; font-size: 18px; line-height: 1.6;
  color: var(--lu-text-secondary); max-width: 46ch; }
.fmt__chip { width: 52px; height: 52px; border-radius: var(--lu-r-md); display: inline-flex;
  align-items: center; justify-content: center; margin-bottom: 22px; color: #fff; }
.fmt__chip .lu-icon { width: 26px; height: 26px; }
.fmt__chip--yellow { background: var(--lu-yellow-400); color: var(--lu-ink); }
.fmt__note { background: var(--lu-ink); color: #fff; border-radius: var(--lu-r-lg);
  padding: 28px; display: flex; align-items: flex-end; }
.fmt__note p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--lu-gray-300); }
.fmt__note strong { color: #fff; font-weight: 700; }
.fmt__card { background: var(--lu-white); border: 1px solid var(--lu-border);
  border-radius: var(--lu-r-lg); padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.fmt__card .fmt__chip { width: 44px; height: 44px; border-radius: var(--lu-r-sm); margin-bottom: 18px; }
.fmt__card .fmt__chip .lu-icon { width: 21px; height: 21px; }
.fmt__card h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.fmt__card > div > p { margin: 9px 0 0; font-size: 15px; line-height: 1.55; color: var(--lu-text-secondary); }
.fmt__more { margin-top: auto; font-size: 14.5px; font-weight: 800; color: var(--lu-ink); text-decoration: none; }
.fmt__more span, .fmt__lead .fmt__more span { color: var(--lu-coral-500); }
.fmt__lead .fmt__more { font-size: 16px; }
.fmt__race-note { margin: 32px 0 0; max-width: 720px; font-size: 16.5px; line-height: 1.6;
  font-weight: 600; color: var(--lu-text-secondary); border-left: 3px solid var(--lu-coral-400);
  padding-left: 18px; }
@media (max-width: 980px) { .fmt__grid { grid-template-columns: 1fr 1fr; } .fmt__lead { grid-column: span 2; } }
@media (max-width: 760px) { .fmt__grid { grid-template-columns: 1fr; } .fmt__lead { grid-column: auto; } }

/* -- comparison (dark) ------------------------------------------------- */
.cmp { position: relative; background: var(--lu-ink); color: #fff; overflow: hidden;
  margin-block: clamp(72px, 10vw, 160px); }
.cmp__inner { position: relative; z-index: 1; padding-block: clamp(72px, 10vw, 160px); }
.cmp__h { max-width: 900px; }
.cmp__table { margin-top: 40px; }
.cmp__row { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); align-items: stretch; }
.cmp__crit { padding: 16px 20px 16px 0; font-size: 15px; font-weight: 700; color: #fff;
  border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; }
.cmp__row--head .cmp__crit { border-top: none; padding-bottom: 14px; }
.cmp__col { padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--lu-gray-400); text-align: center; }
.cmp__col--lu { font-size: 15px; font-weight: 800; color: var(--lu-yellow-400);
  background: rgba(255,237,80,.09); border-radius: var(--lu-r-sm) var(--lu-r-sm) 0 0; }
.cmp__cell { padding: 16px; font-size: 14.5px; line-height: 1.45; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.cmp__cell::before { display: none; }
.cmp__cell--lu { background: rgba(255,237,80,.09); }
.cmp__cell span { font-size: 13px; line-height: 1.35; color: var(--lu-gray-400); }
.cmp__cell .cmp__note--lu { font-weight: 700; color: #fff; }
.cmp__cell .lu-icon { width: 18px; height: 18px; }
.cmp__i--yes { color: var(--lu-yellow-400); }
.cmp__i--no { color: var(--lu-coral-400); }
.cmp__i--part { color: var(--lu-gray-500); }
.cmp__legend { display: flex; flex-wrap: wrap; gap: 20px 28px; margin-top: 24px; }
.cmp__legend > span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lu-gray-400); }
.cmp__legend .lu-icon { width: 16px; height: 16px; }
.cmp__close { margin: 40px 0 0; max-width: 760px; font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6; font-weight: 700; color: #fff; }
@media (max-width: 760px) {
  .cmp__row--head { display: none; }
  .cmp__row { grid-template-columns: repeat(3, 1fr); margin-bottom: 24px; }
  .cmp__crit { grid-column: 1 / -1; padding: 0 0 10px; border-top: none; font-size: 16px; font-weight: 800; }
  .cmp__cell { padding: 12px 6px; }
  .cmp__cell::before { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--lu-gray-500); margin-bottom: 4px; content: attr(data-col); }
}

/* -- quotes: light home variant ---------------------------------------- */
/* No own band padding — the dark comparison above and the price band below
   carry the vertical rhythm via their margins (per Home.dc.html §10). */
.quotes--light { background: var(--lu-white); color: inherit; }
.quotes--light .container { padding-block: 0; }
.quotes--light .quotes__head { margin-bottom: 0; }
.quotes--light .quotes__track { margin-top: 40px; }
.quotes--light .quote { background: var(--lu-bg-subtle); border-color: var(--lu-border); }
.quotes--light .quote__text { font-size: 17px; line-height: 1.55; font-weight: 600;
  letter-spacing: -0.01em; color: var(--lu-ink); }
.quotes--light .quote__by span { color: var(--lu-text-muted); }
.quotes--light .quote__by strong { color: var(--lu-ink); }
.quotes--light .quotes__arrow { background: transparent; border: 2px solid var(--lu-border-strong, var(--lu-gray-300)); color: var(--lu-ink); }
.quotes--light .quotes__arrow:hover { background: var(--lu-ink); border-color: var(--lu-ink); color: #fff; }

/* -- price -------------------------------------------------------------- */
.price { background: var(--lu-bg-subtle); border-top: 1px solid var(--lu-border);
  margin-top: clamp(56px, 8vw, 96px); }
.price .container { padding-block: clamp(56px, 8vw, 96px); }
/* three-tier package cards (briefing 2026-08-05 night); featured card uses
   the existing yellow accent, no new colours */
.price__lead { margin: 16px 0 0; max-width: 720px; font-size: 18px; line-height: 1.6;
  color: var(--lu-text-secondary); }
.price__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.price-card { position: relative; background: var(--lu-white); border: 1px solid var(--lu-border);
  border-radius: var(--lu-r-lg); padding: 28px; display: flex; flex-direction: column; }
.price-card--featured { border: 2px solid var(--lu-yellow-400); box-shadow: var(--lu-shadow-md); }
.price-card__badge { position: absolute; top: -13px; left: 24px; background: var(--lu-yellow-400);
  color: var(--lu-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.price-card__name { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--lu-text-muted); }
.price-card__price { margin-top: 12px; font-size: clamp(28px, 3.4vw, 38px); font-weight: 800;
  line-height: 1; color: var(--lu-ink); }
.price-card__per { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--lu-text-secondary); }
.price-card__desc { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--lu-text-secondary); }
.price__over25 { margin: 20px 0 0; font-size: 15px; font-weight: 600; color: var(--lu-text-secondary); }
.price__degression { margin: 24px 0 0; max-width: 720px; font-size: 15.5px; font-weight: 700;
  color: var(--lu-text-secondary); padding-left: 18px; border-left: 3px solid var(--lu-yellow-400); }
/* anchor target: don't let the sticky header cover the section heading */
#preise { scroll-margin-top: 84px; }
.price__p { margin: 22px 0 0; max-width: 720px; font-size: 16.5px; line-height: 1.65;
  color: var(--lu-text-secondary); }
.price__cta { margin: 32px 0 0; }
/* mobile: cards stack in source order Pilot, Saison, Programm */
@media (max-width: 860px) { .price__cards { grid-template-columns: 1fr; } .price-card--featured { order: 0; } }

/* -- FAQ + closing ------------------------------------------------------- */
.faq .container-narrow { padding-block: clamp(56px, 8vw, 96px); }
/* .faq .section-heading centres site-wide; the rebuilt home FAQ is left-aligned */
.faq .faq__h { margin-bottom: 40px; text-align: left; }
.closing { position: relative; background: var(--lu-bg-subtle); border-top: 1px solid var(--lu-border); overflow: hidden; }
.closing__inner { position: relative; z-index: 1; padding-block: clamp(56px, 8vw, 96px); }
.closing__h { font-size: clamp(30px, 4.6vw, 50px); text-wrap: balance; }
.closing__lede { margin: 20px 0 0; font-size: clamp(17px, 2.1vw, 20px); line-height: 1.6;
  color: var(--lu-text-secondary); max-width: 620px; }
.closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 40px; }
.closing__direct { margin: 24px 0 0; font-size: 16px; color: var(--lu-text-secondary); }
.closing__direct a { font-weight: 700; }
/* .seg-btn-outline is a dark-band ghost since the segment heroes went ink;
   on the light closing band it reverts to the design's ink outline. */
.closing .seg-btn-outline { background: transparent; color: var(--lu-ink);
  border-color: var(--lu-border-ink); }
.closing .seg-btn-outline:hover { background: var(--lu-ink); color: #fff; border-color: var(--lu-ink); }

/* -- format facet explainer (2026-08-05, v2: intro + bullets) -------- */
/* Aligned to the page grid (not the narrow column) so it reads as part of
   the listing, not a floating text block. */
.format-explainer { background: var(--lu-bg-subtle); border-bottom: 1px solid var(--lu-border);
  padding-block: 0; }
.format-explainer__inner { padding-block: clamp(32px, 4.5vw, 48px); }
.format-explainer p { margin: 0; max-width: 64ch; font-size: 17px; line-height: 1.6;
  font-weight: 600; color: var(--lu-text); }
.format-explainer ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 10px 40px; }
.format-explainer li { position: relative; padding-left: 30px; font-size: 15.5px;
  line-height: 1.55; color: var(--lu-text-secondary); }
.format-explainer li::before { content: ""; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 999px; background: var(--lu-yellow-400); }
.format-explainer li::after { content: ""; position: absolute; left: 5px; top: 6px;
  width: 10px; height: 6px; border-left: 2px solid var(--lu-ink);
  border-bottom: 2px solid var(--lu-ink); transform: rotate(-45deg); }
@media (max-width: 760px) { .format-explainer ul { grid-template-columns: 1fr; } }
/* The listing container gets its top padding from `.listing-hero + .container`;
   with the explainer between them that selector stops matching — restore it. */
.format-explainer + .container { padding-top: clamp(44px, 5vw, 68px); }

/* -- footer: round glare + ETH logo chip ---------------------------- */
.footer::after { background: radial-gradient(circle at 88% 0%, rgba(255,237,80,.10), transparent 60%); }
.footer__eth { display: inline-flex; margin-top: 22px; padding: 10px 14px;
  background: var(--lu-white); border-radius: 10px; }
.footer__eth img { height: 34px; width: auto; }