/* ============================================================
   Beel — beel.com · component & layout styles
   Built on tokens.css (Beel Design System).
   Flat surfaces · .5px hairlines · hover darkens borders, never lifts.
   Reusable containers: skip-link · nav · footer · consent · quote-slider.
   ============================================================ */

/* ─────────────────────────── Reset ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface-page);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; }

/* ─────────────────── Accessibility primitives ──────────────── */
:focus-visible { outline: 2px solid var(--pacific); outline-offset: 2px; border-radius: 3px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--midnight); color: var(--sand);
  padding: 10px 18px; border-radius: 0 0 var(--r-sm) 0;
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ─────────────────────────── Layout ────────────────────────── */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.section { padding: var(--section-y) 0; }
.bg-white { background: var(--white); }
.bg-sand  { background: var(--sand); }
.bg-paper { background: var(--paper); }
.bg-dark  { background: var(--midnight); }

.eyebrow {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase; color: var(--pacific); font-weight: var(--fw-medium);
}
.serif { font-family: var(--font-display); font-weight: var(--fw-regular); }

/* ─────────────────── Buttons (shared) ──────────────────────── */
.btn-dark {
  display: inline-block; background: var(--midnight); color: var(--sand);
  padding: 13px 28px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: var(--fw-medium); transition: opacity var(--dur) var(--ease-standard);
}
.btn-dark:hover { opacity: var(--hover-opacity); }
.btn-dark:active { opacity: var(--press-opacity); }
.btn-ghost {
  display: inline-block; background: transparent; color: var(--midnight);
  padding: 13px 28px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: var(--fw-regular);
  border: var(--bw-hair) solid var(--border-strong); transition: border-color var(--dur) var(--ease-standard);
}
.btn-ghost:hover { border-color: rgba(15,31,51,.42); }
.btn-sand {
  display: inline-block; background: var(--sand); color: var(--midnight);
  padding: 11px 22px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: var(--fw-medium); transition: opacity var(--dur) var(--ease-standard);
}
.btn-sand:hover { opacity: .87; }
.arrow::after { content: ' \2192'; }
/* Sprung innerhalb der Seite. Auf /de/fundraising-leicht-gemacht stehen Kacheln mit
   Seitenanker und eine mit Link auf eine andere Seite nebeneinander; der Pfeil sagt,
   was passiert, bevor man klickt. */
.arrow-down::after { content: ' \2193'; }

/* ════════════════════════════════════════════════════════════
   CONTAINER · Nav (sticky, blur on scroll)
   ════════════════════════════════════════════════════════════ */
/* Nav in Midnight, deckend ab der ersten gerenderten Zeile (19.08.2026).
   Vorher: `rgba(241,235,221,.86)` + backdrop-filter, das auf `.94` wechselte,
   sobald gescrollt wurde. Auf dem hellen Sand-Hero fiel das kaum auf; unter dem
   Midnight-Hero war es der „Preloading-Effekt" — die Leiste schien beim Laden
   erst durchscheinend und wurde dann fest. Eine deckende Farbe hat diesen
   Zustand nicht: Es gibt nichts, was durchscheinen könnte, und der
   backdrop-filter ist damit ebenfalls gegenstandslos.
   Beim Scrollen bleibt nur noch der Schatten als Zustandswechsel. */
.lp-nav {
  background: var(--midnight);
  border-bottom: var(--bw-hair) solid rgba(241,235,221,.10);
  position: sticky; top: 0; z-index: 100;
  transition: box-shadow var(--dur) var(--ease-standard);
}
.lp-nav.is-scrolled { box-shadow: var(--shadow-soft); background: var(--midnight); }

/* Alles in der Leiste auf Sand. Diese Regeln standen zuvor als seitenlokaler
   `.nav-midnight`-Block in den beiden Syndikat-Exporten; sie gelten jetzt
   überall, damit kein Export sie einzeln mitschleppen muss. */
.lp-nav .nav-links a, .lp-nav .nav-item > a, .lp-nav .nav-login { color: var(--sand-muted-strong); }
.lp-nav .nav-links a:hover, .lp-nav .nav-item > a:hover, .lp-nav .nav-item:focus-within > a,
.lp-nav .nav-item.is-current > a, .lp-nav .nav-login:hover,
.lp-nav .nav-links a[aria-current="page"] { color: var(--sand); }
.lp-nav .nav-lang { color: var(--sand-muted-strong); border-color: var(--border-on-dark); }
.lp-nav .nav-lang:hover { color: var(--sand); border-color: rgba(241,235,221,.55); }
.lp-nav .nav-cta-btn { background: var(--sand); color: var(--midnight); }
.lp-nav .nav-toggle span, .lp-nav .nav-toggle span::before,
.lp-nav .nav-toggle span::after { background: var(--sand); }
.lp-nav.nav-open .nav-toggle span { background: transparent; }
/* Die Dropdown-Panels bleiben hell — sie liegen auf der Seite, nicht in der Leiste. */
.lp-nav .nav-menu a { color: var(--midnight); }
.lp-nav .nav-menu a:hover, .lp-nav .nav-menu a:focus-visible { color: var(--pacific-deep); }
.lp-nav .container { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.nav-brand { display: flex; align-items: center; gap: 11px; }
.nav-brand .tile { width: 30px; height: 30px; border-radius: 7px; }
.nav-brand .wm { width: 82px; height: 40px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: var(--fs-body-sm); color: var(--ink-muted); font-weight: var(--fw-regular); transition: color var(--dur-fast); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--midnight); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-login { font-size: 13px; color: var(--ink-muted); font-weight: var(--fw-regular); transition: color var(--dur-fast); }
.nav-login:hover { color: var(--midnight); }
.nav-cta-btn {
  background: var(--midnight); color: var(--sand); font-size: 13px; font-weight: var(--fw-medium);
  padding: 8px 20px; border-radius: var(--r-sm); transition: opacity var(--dur-fast);
}
.nav-cta-btn:hover { opacity: .85; }
/* Header-CTA (03.08.2026): trägt jetzt "Gespräch buchen" / "Book a call" statt des
   Einwort-Labels "Loslegen". Das ist rund dreimal so breit, und die Kopfzeile hatte
   die Reserve nicht: gemessen an /de/ schrumpfte das Logo von 82px auf 29px (390px
   Viewport) bzw. auf 0px (360px), und bei 320px lief die Seite 17px seitlich über —
   der Browser hatte das Logo als einziges schrumpfbares Element aufgebraucht.
   Deshalb drei Dinge: das Logo gibt zuletzt nach, das Label bricht nicht um, und
   unter 460px weichen Login und CTA in das Mobil-Menü (.nav-item.is-sheet-only),
   wo bis dahin überhaupt kein Login-Einstieg stand. */
.nav-brand { flex: 0 0 auto; }
.nav-cta-btn { white-space: nowrap; }
/* Mobile menu toggle (hidden on desktop) */
.nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; width: 20px; height: 1.5px; background: var(--midnight);
  position: relative; transition: transform var(--dur) var(--ease-standard);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }

/* ════════════════════════════════════════════════════════════
   PLACEHOLDER hero (scaffolding only — real homepage comes later)
   ════════════════════════════════════════════════════════════ */
/* Hero überall in Midnight (19.08.2026). Vorher Sand; die Farbe stand als
   Inline-Style in den einzelnen Exporten, sobald eine Seite dunkel sein sollte. */
.lp-hero { background: var(--midnight); padding: 92px 0 88px; }
.lp-hero .hero-headline { color: var(--sand); }
.lp-hero .hero-sub { color: var(--sand-muted-strong); }
/* Ghost-Button auf dunklem Grund — stand vorher seitenlokal als .hero-ghost-dark. */
.lp-hero .btn-ghost { color: var(--sand); border-color: var(--border-on-dark); }
.lp-hero .btn-ghost:hover { border-color: rgba(241,235,221,.55); }
/* Der Hauptknopf im Hero ist sandfarben mit Midnight-Schrift. `.btn-dark` heißt so,
   weil er auf hellem Grund dunkel ist — im Midnight-Hero stand damit Midnight auf
   Midnight, sichtbar nur an der Schrift. Die Umkehrung ist dieselbe, die `.btn-sand`
   in der dunklen Abschluss-Section macht; hier greift sie über die Klasse, damit
   keiner der 38 Hero-Knöpfe in den Exporten angefasst werden muss.
   Der Hover braucht drei Klassen: `.btn-dark:hover` weiter unten in dieser Datei
   ist gleich spezifisch und käme später — ohne die dritte Klasse würde der Knopf
   beim Überfahren wieder dunkel. */
.lp-hero .btn-dark { background: var(--sand); color: var(--midnight); }
.lp-hero .btn-dark:hover,
.lp-hero .btn-dark:active { background: var(--sand); color: var(--midnight); opacity: .87; }
.hero-rule { width: 36px; height: 2px; background: var(--pacific); margin-bottom: 20px; border: none; }
.hero-eyebrow { margin-bottom: 20px; }
.hero-headline {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: clamp(44px, 6.4vw, 74px); line-height: var(--lh-display);
  letter-spacing: var(--tk-display); color: var(--midnight); margin-bottom: 24px; max-width: 16ch;
}
.hero-sub { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--ink-muted); max-width: 54ch; font-weight: var(--fw-light); }
.hero-note { margin-top: 28px; font-size: var(--fs-caption); color: var(--ink-faint); }

/* ════════════════════════════════════════════════════════════
   CONTAINER · Quote slider (founder testimonials, Pacific band)
   One quote visible · prev/next arrows · no auto-motion.
   ════════════════════════════════════════════════════════════ */
.lp-quotes { background: var(--pacific); padding: 84px 0; }
.quotes-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.quotes-label { font-size: var(--fs-micro); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; color: var(--sand-muted-strong); font-weight: var(--fw-medium); }
.quotes-nav { display: flex; gap: 10px; }
.quote-arrow {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  border: var(--bw-hair) solid rgba(241,235,221,.32);
  display: flex; align-items: center; justify-content: center;
  color: var(--sand); transition: border-color var(--dur) var(--ease-standard), opacity var(--dur);
}
.quote-arrow:hover { border-color: var(--sand); }
.quote-arrow svg { width: 16px; height: 16px; }
.quotes-viewport { max-width: 760px; }
.quote-slide { display: none; }
.quote-slide.is-active { display: block; }
.quote-mark { font-family: var(--font-display); font-size: 72px; line-height: .7; color: rgba(241,235,221,.34); display: block; margin-bottom: 12px; }
.quote-text {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: clamp(24px, 3.2vw, 33px); line-height: 1.36; letter-spacing: var(--tk-tight);
  color: var(--sand); margin-bottom: 22px;
}
.quote-attr { font-size: var(--fs-body-sm); color: var(--sand-muted-strong); }
.quote-attr strong { color: var(--sand); font-weight: var(--fw-medium); }
.quotes-dots { display: flex; gap: 8px; margin-top: 28px; }
.quotes-dots button { width: 7px; height: 7px; border-radius: var(--r-pill); background: rgba(241,235,221,.34); transition: background var(--dur); }
.quotes-dots button[aria-current="true"] { background: var(--sand); }

/* ════════════════════════════════════════════════════════════
   CONTAINER · Footer
   ════════════════════════════════════════════════════════════ */
.lp-footer { background: var(--midnight); border-top: var(--bw-hair) solid rgba(241,235,221,.09); padding: 56px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand .wm { width: 96px; height: 47px; margin-bottom: 12px; }
.footer-tagline { font-size: var(--fs-caption); color: rgba(241,235,221,.36); line-height: var(--lh-body); font-weight: var(--fw-light); max-width: 28ch; }
.footer-col-title { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(241,235,221,.36); font-weight: var(--fw-medium); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a, .footer-links button {
  font-size: 13px; color: rgba(241,235,221,.56); font-weight: var(--fw-light);
  transition: color var(--dur-fast); text-align: left;
}
.footer-links a:hover, .footer-links button:hover { color: rgba(241,235,221,.85); }
.footer-bottom { padding-top: 26px; border-top: var(--bw-hair) solid rgba(241,235,221,.08); display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 11px; line-height: 1.7; font-weight: var(--fw-light); }
.footer-legal a, .footer-legal button { font-family: inherit; font-size: 11px; color: rgba(241,235,221,.40); background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: .02em; text-decoration: none; }
.footer-legal a:hover, .footer-legal button:hover { color: rgba(241,235,221,.75); }
.footer-badges { display: flex; align-items: center; gap: 20px; flex-shrink: 0; padding-top: 2px; }
.footer-badge { font-size: var(--fs-micro); color: rgba(241,235,221,.30); letter-spacing: .02em; }

/* ════════════════════════════════════════════════════════════
   CONTAINER · Cookie-consent banner (DSGVO / TTDSG)
   Tracking blocked until opt-in · Accept & Reject equal weight ·
   granular categories (none pre-ticked) · re-openable from footer.
   ════════════════════════════════════════════════════════════ */
.consent-overlay { position: fixed; inset: 0; background: rgba(15,31,51,.42); z-index: 900; display: none; }
.consent-overlay.is-open { display: block; }
.consent {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px)); z-index: 901;
  background: var(--white); border: var(--bw-hair) solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop);
  padding: 26px 28px; display: none;
}
.consent.is-open { display: block; }
.consent-title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 21px; letter-spacing: var(--tk-tight); color: var(--midnight); margin-bottom: 8px; }
.consent-text { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--ink-muted); font-weight: var(--fw-light); margin-bottom: 18px; }
.consent-text a { color: var(--pacific); text-decoration: underline; text-underline-offset: 2px; }
/* category list (hidden until "settings") */
.consent-cats { display: none; margin-bottom: 18px; border-top: var(--bw-hair) solid var(--border); }
.consent-cats.is-open { display: block; }
.consent-cat { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: var(--bw-hair) solid var(--border); }
.consent-cat-main { flex: 1; }
.consent-cat-name { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--midnight); }
.consent-cat-desc { font-size: var(--fs-caption); color: var(--ink-muted); line-height: 1.5; margin-top: 3px; font-weight: var(--fw-light); }
/* toggle (real checkbox) */
.consent-toggle { position: relative; flex-shrink: 0; width: 40px; height: 22px; }
.consent-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.consent-toggle .track { display: block; width: 40px; height: 22px; border-radius: var(--r-pill); background: var(--border-strong); transition: background var(--dur) var(--ease-standard); }
.consent-toggle .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--r-pill); background: var(--white); transition: transform var(--dur) var(--ease-out); }
.consent-toggle input:checked + .track { background: var(--pacific); }
.consent-toggle input:checked + .track::after { transform: translateX(18px); }
.consent-toggle input:disabled + .track { background: var(--pacific); opacity: .5; }
.consent-toggle input:focus-visible + .track { outline: 2px solid var(--pacific); outline-offset: 2px; }
/* actions — Accept & Reject share identical weight/size */
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-actions .btn-dark, .consent-actions .btn-ghost { padding: 11px 22px; font-size: 13.5px; flex: 1 1 auto; text-align: center; min-width: 140px; }
.consent-actions .consent-settings { flex: 0 0 auto; min-width: 0; padding: 11px 16px; font-size: 13px; color: var(--ink-muted); }
.consent-actions .consent-settings:hover { color: var(--midnight); }

/* ─────────────────────────── Responsive ────────────────────── */
@media (max-width: 900px) {
  .container { padding: 0 24px; }
  .hero-headline { font-size: 44px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .lp-nav.nav-open .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 62px; left: 0; right: 0;
    background: rgba(241,235,221,.97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: var(--bw-hair) solid var(--border); padding: 8px 24px 16px;
  }
  .lp-nav.nav-open .nav-item > a { font-size: var(--fs-body); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 20px; }
  .quotes-viewport { max-width: 100%; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .consent { left: 16px; right: 16px; transform: none; width: auto; bottom: 16px; padding: 22px 20px; }
  .consent-actions .btn-dark, .consent-actions .btn-ghost { flex-basis: 100%; }
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE CONTAINERS — splitter · stats · why-grid · CTA band
   Reusable section blocks (the CLAUDE.md "Geplant" library).
   Authored against tokens.css. Flat · hairlines · hover darkens.
   ════════════════════════════════════════════════════════════ */

/* ── Language switch (nav) ── */
.nav-lang { font-size: 12px; color: var(--ink-faint); font-weight: var(--fw-medium); letter-spacing: .04em; transition: color var(--dur-fast); }
.nav-lang:hover { color: var(--midnight); }

/* ── Hero layout (real homepage: statement + logo tile) ── */
.hero-layout { display: grid; grid-template-columns: 1fr auto; column-gap: 64px; row-gap: 22px; align-items: center; }
.hero-headline { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.hero-tile { grid-column: 2; grid-row: 1; align-self: center; flex-shrink: 0; }
/* beel-logo.svg bringt seinen Midnight-Grund selbst mit (rx=40 auf 180). Seit der
   Hero ebenfalls Midnight ist, verschwände die Kachelform darin — die Haarlinie
   hält sie sichtbar. 22% statt 40px, damit der Radius mitskaliert (40/180). */
.hero-tile img { border: var(--bw-hair) solid rgba(241,235,221,.16); border-radius: 22%; }
.lp-hero .hero-sub { grid-column: 1; grid-row: 2; margin-bottom: 0; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

/* ── Generic section heads ── */
.section-eyebrow { font-size: var(--fs-eyebrow); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; color: var(--pacific); font-weight: var(--fw-medium); margin-bottom: 14px; }
.section-title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(34px, 4.4vw, 48px); letter-spacing: var(--tk-title); line-height: var(--lh-title); color: var(--midnight); margin-bottom: 16px; max-width: 22ch; }
.section-lead { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--ink-muted); font-weight: var(--fw-light); max-width: 60ch; margin-bottom: 46px; }

/* ── Splitter: two path cards (founders / investors) ── */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.path-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: var(--bw-hair) solid var(--border); border-radius: var(--r-lg); padding: 38px 36px 32px; box-shadow: var(--shadow-card); transition: border-color var(--dur) var(--ease-standard); }
.path-card { transition: border-color var(--dur-fast), background var(--dur-fast); }
.path-card:hover { border-color: var(--rust); background: var(--rust-wash); }
.path-card:hover .path-cta { color: var(--rust-deep); }
.path-card:focus-within { border-color: var(--rust); background: var(--rust-wash); }
.path-tag { font-size: var(--fs-micro); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; color: var(--pacific); font-weight: var(--fw-medium); margin-bottom: 14px; }
.path-title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-subtitle); letter-spacing: var(--tk-title); color: var(--midnight); margin-bottom: 14px; line-height: 1.08; max-width: 14ch; }
.path-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); font-weight: var(--fw-light); margin-bottom: 22px; }
.path-list { margin: 0 0 28px; padding: 0; }
.path-list li { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--midnight); font-weight: var(--fw-light); padding: 10px 0 10px 20px; border-top: var(--bw-hair) solid var(--border); position: relative; }
.path-list li::before { content: '\2014'; position: absolute; left: 0; color: var(--pacific); }
.path-cta { margin-top: auto; font-size: var(--fs-body); color: var(--midnight); font-weight: var(--fw-medium); align-self: flex-start; transition: opacity var(--dur-fast), color var(--dur-fast); }
.path-cta::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); }
.path-cta:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

/* ── Stats band (Midnight) + award reward strip (Rust) ── */
.lp-stats { background: var(--midnight); padding: var(--band-y) 0; }
.stats-divider { height: 1px; background: var(--border-on-dark); margin: 0 0 var(--band-y); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: 0 44px; border-left: var(--bw-hair) solid var(--border-on-dark); }
.stat:first-child { border-left: none; padding-left: 0; }
.stat-num { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 54px; letter-spacing: var(--tk-title); color: var(--sand); line-height: 1; display: block; margin-bottom: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-label { font-size: var(--fs-body-sm); color: var(--sand-muted); font-weight: var(--fw-light); line-height: 1.5; }
.award-strip { display: flex; align-items: center; gap: 14px; margin-top: 38px; padding-top: 26px; border-top: var(--bw-hair) solid var(--border-on-dark); }
.award-mark { width: 26px; height: 3px; background: var(--rust); flex-shrink: 0; }
.award-text { font-size: 19px; color: var(--sand-muted-strong); font-weight: var(--fw-light); line-height: 1.4; }
.award-text strong { color: var(--sand); font-weight: var(--fw-medium); }

/* ── Why grid (Deshalb Beel) ── */
.why-layout { display: grid; grid-template-columns: 300px 1fr; gap: 80px; align-items: start; }
.why-headline { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(30px, 3.6vw, 42px); letter-spacing: var(--tk-title); line-height: 1.1; color: var(--midnight); margin-bottom: 16px; }
.why-intro { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--ink-muted); font-weight: var(--fw-light); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.why-item { padding: 22px 0; border-top: var(--bw-hair) solid var(--border); }
.why-item-title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 19px; color: var(--midnight); margin-bottom: 6px; }
.why-item-body { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--ink-muted); font-weight: var(--fw-light); }

/* ── CTA band (Midnight, split founders/investors) ── */
.lp-cta { background: var(--midnight); padding: var(--section-y) 0; }
.cta-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.cta-headline { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(38px, 4.8vw, 54px); letter-spacing: var(--tk-display); line-height: 1.04; color: var(--sand); margin-bottom: 14px; }
.cta-sub { font-size: var(--fs-body); color: var(--sand-muted); font-weight: var(--fw-light); line-height: var(--lh-body); max-width: 42ch; }
.cta-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* A section left with one tile (for-founders, after its app tile was dropped) should
   not keep an empty second column — the lone card takes the full width instead. */
.cta-cards:has(> .cta-card:only-child) { grid-template-columns: 1fr; }
.cta-card { display: flex; flex-direction: column; border: var(--bw-hair) solid var(--border-on-dark); border-radius: var(--r-md); padding: 24px 22px; transition: border-color var(--dur) var(--ease-standard); }
.cta-card:hover { border-color: var(--sand-muted); }
.cta-card-label { font-size: var(--fs-micro); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; color: var(--sand-muted-strong); margin-bottom: 14px; font-weight: var(--fw-medium); }
.cta-card-note { font-size: var(--fs-caption); color: var(--sand-muted); font-weight: var(--fw-light); line-height: 1.55; margin-bottom: 18px; flex: 1; }
.cta-card .btn-sand { align-self: flex-start; }

/* ── Homepage responsive ── */
@media (max-width: 900px) {
  .hero-layout { grid-template-columns: 1fr; gap: 40px; }
  .hero-headline { grid-column: 1; grid-row: 2; }
  .hero-tile { grid-column: 1; grid-row: 1; }
  .lp-hero .hero-sub { grid-column: 1; grid-row: 3; }
  .hero-tile img, .hero-tile svg { width: 120px; height: 120px; }
  .split-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: 26px; }
  .stat { border-left: none; padding: 0; border-top: var(--bw-hair) solid var(--border-on-dark); padding-top: 22px; }
  .stat:first-child { border-top: none; padding-top: 0; }
  .why-layout { grid-template-columns: 1fr; gap: 32px; }
  .why-grid { grid-template-columns: 1fr; column-gap: 0; }
  .cta-layout { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 520px) {
  .cta-cards { grid-template-columns: 1fr; }
  .path-card { padding: 30px 26px 28px; }
}

/* ── How it works (feature trio: numbered steps) ── */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.how-step { background: var(--white); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); padding: 28px 26px; box-shadow: var(--shadow-card); }
.how-num { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 15px; color: var(--pacific); margin-bottom: 14px; display: block; font-variant-numeric: tabular-nums; }
.how-step h3 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 20px; letter-spacing: var(--tk-tight); color: var(--midnight); margin-bottom: 8px; line-height: 1.2; }
.how-step p { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--ink-muted); font-weight: var(--fw-light); }

/* ── FAQ accordion (native details/summary — crawlable, keyboard-accessible) ── */
.faq-list { max-width: 840px; border-top: var(--bw-hair) solid var(--border); }
.faq-item { border-bottom: var(--bw-hair) solid var(--border); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 22px 0; transition: opacity var(--dur-fast); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { opacity: .68; }
.faq-q { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(18px, 2.2vw, 22px); letter-spacing: var(--tk-tight); color: var(--midnight); line-height: 1.25; }
.faq-icon { flex-shrink: 0; width: 18px; height: 18px; position: relative; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--pacific); transition: transform var(--dur) var(--ease-standard); }
.faq-icon::before { top: 8.25px; left: 0; width: 18px; height: 1.5px; }
.faq-icon::after { top: 0; left: 8.25px; width: 1.5px; height: 18px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-answer { padding: 0 0 24px; font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--ink-muted); font-weight: var(--fw-light); max-width: 72ch; }

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

/* ════════════════════════════════════════════════════════════
   v2 — cool accent band · nav dropdowns · language pill ·
   value cards · comparison · insight · is/isn't · pricing ·
   feature table · team · contact form
   ════════════════════════════════════════════════════════════ */

/* ── Brand accent section (deep-sand wash — brand surface, not the page Sand) ── */
.bg-cool { background: var(--paper); }
.bg-cool .pcard { background: var(--white); }

/* ── Nav: hover/focus mega-dropdowns ── */
.nav-links { gap: 2px; align-items: stretch; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; gap: 6px; height: 62px; padding: 0 13px; white-space: nowrap; font-size: var(--fs-body-sm); color: var(--ink-muted); font-weight: var(--fw-regular); transition: color var(--dur-fast); }
.nav-item > a:hover, .nav-item.is-current > a, .nav-item:focus-within > a { color: var(--midnight); }
.nav-caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; transition: transform var(--dur) var(--ease-standard); }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(225deg) translateY(-2px); }
.nav-menu { position: absolute; top: 100%; left: 0; min-width: 244px; background: var(--white); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur) var(--ease-standard), transform var(--dur) var(--ease-standard), visibility 0s linear var(--dur); }
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--dur) var(--ease-standard), transform var(--dur) var(--ease-standard); }
.nav-item.is-open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-item.is-open .nav-caret { transform: rotate(225deg) translateY(-2px); }
.nav-menu a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-body-sm); color: var(--midnight); font-weight: var(--fw-regular); transition: background var(--dur-fast), color var(--dur-fast); }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--rust-wash); color: var(--rust-deep); }
.nav-menu-desc { display: block; font-size: var(--fs-caption); color: var(--ink-faint); font-weight: var(--fw-light); margin-top: 2px; }

/* ── Language pill button ── */
.nav-lang { display: inline-flex; align-items: center; gap: 4px; border: var(--bw-hair) solid var(--border-strong); border-radius: var(--r-pill); padding: 6px 13px; font-size: 12px; font-weight: var(--fw-medium); letter-spacing: .04em; color: var(--ink-muted); transition: border-color var(--dur-fast), color var(--dur-fast); }
.nav-lang:hover { border-color: rgba(15,31,51,.42); color: var(--midnight); }

/* ── Value cards (feature trio / duo) ── */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pcard { position: relative; background: var(--white); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); padding: 28px 26px 24px; display: flex; flex-direction: column; transition: border-color var(--dur-fast), background var(--dur-fast); box-shadow: var(--shadow-card); transition: border-color var(--dur) var(--ease-standard); }
/* ══════════════════════════════════════════════════════════════
   CANONICAL CLICKABLE-TILE HOVER (the Beel standard)
   Any bordered tile that is clickable uses THIS and only this
   (scoped via :has(.pcard-link) — a .pcard with no arrow link,
   e.g. the value cards, is inert and does NOT react to hover):
   hover/focus → background fills with Rust wash + Rust border,
   and the tile's CTA/arrow text turns Rust-deep. Transition is
   smooth. This is background-INDEPENDENT — it looks identical on
   Sand, White, Paper or the Pacific band (see .bg-pacific override
   below, which only resets the default surface, never the hover).
   New clickable tiles: give them .pcard (or .path-card) — do not
   invent a different hover.
   ══════════════════════════════════════════════════════════════ */
.pcard:has(.pcard-link):hover, .pcard:has(.pcard-link):focus-within { border-color: var(--rust); background: var(--rust-wash); }
.pcard:has(.pcard-link):hover .pcard-link, .pcard:has(.pcard-link):focus-within .pcard-link { color: var(--rust-deep); }
.pcard-tag { font-size: var(--fs-micro); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; color: var(--pacific); font-weight: var(--fw-medium); margin-bottom: 16px; }
.pcard-title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 23px; letter-spacing: var(--tk-tight); color: var(--midnight); margin-bottom: 10px; line-height: 1.2; }
.pcard-body { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--ink-muted); font-weight: var(--fw-light); flex: 1; }
.pcard-link { margin-top: 22px; font-size: var(--fs-body-sm); color: var(--midnight); font-weight: var(--fw-medium); align-self: flex-start; }
/* Whole tile clickable, like .team-card and .path-card — the link at the foot was
   the only hit area, so a card that visibly reacts to hover did nothing when clicked. */
.pcard .pcard-link::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-md); }
.pcard .pcard-link:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.soon-badge { display: inline-block; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--rust); background: var(--rust-wash); padding: 2px 7px; border-radius: 3px; margin-left: 7px; font-weight: var(--fw-medium); vertical-align: 2px; }

/* ── Comparison (old way / Beel way) ── */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compare-card { border-radius: var(--r-md); padding: 30px 28px; }
.compare-old { background: var(--sand-card); border: var(--bw-hair) solid var(--border); }
.compare-new { background: var(--white); border: 1.5px solid var(--pacific); box-shadow: var(--shadow-card); }
.compare-label { font-size: var(--fs-micro); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; font-weight: var(--fw-medium); margin-bottom: 18px; }
.compare-old .compare-label { color: var(--ink-faint); }
.compare-new .compare-label { color: var(--pacific); }
.compare-list li { font-size: var(--fs-body); line-height: 1.5; padding: 12px 0 12px 24px; border-top: var(--bw-hair) solid var(--border); position: relative; font-weight: var(--fw-light); }
.compare-list li:first-child { border-top: none; }
.compare-old .compare-list li { color: var(--ink-muted); }
.compare-old .compare-list li::before { content: '\00d7'; position: absolute; left: 0; color: var(--ink-faint); }
.compare-new .compare-list li { color: var(--midnight); }
.compare-new .compare-list li::before { content: '\2192'; position: absolute; left: 0; color: var(--pacific); }

/* ── Insight band (Pacific — one strong statement per page) ── */
.lp-insight { background: var(--pacific); padding: 56px 0; }
.insight-layout { display: flex; align-items: baseline; justify-content: space-between; gap: 48px; }
.insight-label { font-size: var(--fs-micro); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; color: var(--sand-muted-strong); font-weight: var(--fw-medium); flex-shrink: 0; }
.insight-quote { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(26px, 3.4vw, 34px); letter-spacing: var(--tk-title); line-height: 1.14; color: var(--sand); flex: 1; text-align: right; }

/* ── Is / isn't ── */
.isnt-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; margin-top: 40px; border: var(--bw-hair) solid var(--border); border-radius: var(--r-lg); padding: 36px 44px; }
.isnt-col { padding: 0 44px; }
.isnt-col:first-child { padding-left: 0; }
.isnt-col:last-child { padding-right: 0; border-left: var(--bw-hair) solid var(--border); }
.isnt-col h3 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 24px; letter-spacing: var(--tk-tight); margin-bottom: 16px; color: var(--midnight); }
.isnt-col li { font-size: var(--fs-body); line-height: 1.5; padding: 11px 0 11px 24px; border-top: var(--bw-hair) solid var(--border); position: relative; font-weight: var(--fw-light); color: var(--midnight); }
.isnt-col li:first-of-type { border-top: none; }
.is-yes li::before { content: '\2192'; position: absolute; left: 0; color: var(--pacific); }
.is-no li::before { content: '\00d7'; position: absolute; left: 0; color: var(--ink-faint); }
.is-no li { color: var(--ink-muted); }

/* ── Pricing cards ── */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: stretch; }
.price-card { display: flex; flex-direction: column; background: var(--white); border: var(--bw-hair) solid var(--border); border-radius: var(--r-lg); padding: 28px 24px; box-shadow: var(--shadow-card); transition: border-color var(--dur) var(--ease-standard); }
.price-card:hover { border-color: var(--border-strong); }
.price-card.is-featured { border: 1.5px solid var(--pacific); position: relative; }
.price-chip { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--pacific); color: var(--on-pacific); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: var(--fw-medium); padding: 3px 10px; border-radius: var(--r-pill); }
.price-name { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 22px; color: var(--midnight); letter-spacing: var(--tk-tight); margin-bottom: 4px; }
.price-amount { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 32px; color: var(--midnight); letter-spacing: var(--tk-title); line-height: 1; margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.price-amount .per { font-family: var(--font-body); font-size: 13px; color: var(--ink-muted); font-weight: var(--fw-light); letter-spacing: 0; }
.price-year { font-size: var(--fs-caption); color: var(--ink-faint); margin-bottom: 8px; }
.price-fee { font-size: var(--fs-caption); color: var(--pacific); font-weight: var(--fw-medium); margin-bottom: 16px; }
.pcard-price { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 30px; color: var(--midnight); letter-spacing: var(--tk-title); line-height: 1; margin: 2px 0 16px; }
.pcard-price .per { font-family: var(--font-body); font-size: 13px; color: var(--ink-muted); font-weight: var(--fw-light); letter-spacing: 0; }
.pcard-price .sub { display: block; font-family: var(--font-body); font-size: 13px; color: var(--pacific-deep); font-weight: var(--fw-medium); letter-spacing: 0; margin-top: 8px; }
.price-desc { font-size: var(--fs-body-sm); color: var(--ink-muted); font-weight: var(--fw-light); line-height: 1.55; margin-bottom: 18px; }
.price-feats { margin: 0 0 22px; }
.price-feats li { font-size: var(--fs-caption); color: var(--midnight); font-weight: var(--fw-light); line-height: 1.45; padding: 8px 0 8px 18px; border-top: var(--bw-hair) solid var(--border); position: relative; }
.price-feats li:first-child { border-top: none; }
.price-feats li::before { content: '\2192'; position: absolute; left: 0; color: var(--pacific); }
.price-card .btn-dark, .price-card .btn-ghost { margin-top: auto; text-align: center; }
/* Zeilenraster über alle Plan-Karten: Beschreibung unterschiedlich lang, Feature-Listen
   starten trotzdem auf gleicher Höhe (Subgrid; Fallback bleibt das Flex-Layout oben). */
@supports (grid-template-rows: subgrid) {
  .price-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
  .price-card > .price-desc { align-self: start; }
  .price-card .btn-dark, .price-card .btn-ghost { margin-top: 0; align-self: end; }
}
.price-extra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }

/* ── Feature / comparison table ── */
.cmp-outer { position: relative; }
.cmp-wrap { overflow-x: auto; border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow-card); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.cmp-table th, .cmp-table td { text-align: left; padding: 17px 22px; border-bottom: var(--bw-hair) solid var(--border); font-size: var(--fs-body-sm); font-weight: var(--fw-light); color: var(--ink-muted); vertical-align: top; line-height: 1.5; }
.cmp-table thead th { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 16px; color: var(--midnight); letter-spacing: var(--tk-tight); }
.cmp-table thead th.col-beel { background: var(--pacific-wash); color: var(--pacific-deep); border-top-left-radius: var(--r-sm); border-top-right-radius: var(--r-sm); }
.cmp-table tbody th { color: var(--midnight); font-weight: var(--fw-regular); }
.cmp-table td.col-beel { background: var(--pacific-wash); color: var(--midnight); }
.cmp-table .yes { color: var(--pacific); font-weight: var(--fw-medium); }
.cmp-table .no { color: var(--ink-faint); }
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: none; }

/* Comparison table sitting on a Pacific section — light-teal panel */
.bg-pacific .cmp-wrap { background: var(--on-pacific); border: none; box-shadow: 0 1px 2px rgba(15,31,51,.08); }
.bg-pacific .cmp-table th, .bg-pacific .cmp-table td { border-bottom-color: rgba(15,31,51,.10); }
.bg-pacific .cmp-table thead th { color: var(--midnight); }
.bg-pacific .cmp-table thead th.col-beel { background: rgba(31,143,140,.20); color: var(--pacific-deep); }
.bg-pacific .cmp-table td.col-beel { background: rgba(31,143,140,.14); color: var(--midnight); }
.bg-pacific .cmp-table tbody th, .bg-pacific .cmp-table td { color: var(--midnight); }

/* ── Team grid (horizontal card: photo left, text right) ── */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.team-card { position: relative; display: flex; align-items: center; gap: 16px; background: var(--white); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-card); transition: border-color var(--dur-fast), background var(--dur-fast); }
.team-card:has(.team-link):hover, .team-card:has(.team-link):focus-within { border-color: var(--rust); background: var(--rust-wash); }
.team-card:has(.team-link):hover .team-link, .team-card:has(.team-link):focus-within .team-link { color: var(--rust-deep); }
.team-avatar { position: relative; z-index: 2; width: 68px; height: 68px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--pacific-wash); color: var(--pacific-deep); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; overflow: hidden; }
.team-avatar image-slot { width: 100%; height: 100%; display: block; }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-info { display: flex; flex-direction: column; min-width: 0; }
.team-name { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 17px; color: var(--midnight); }
.team-role { font-size: var(--fs-caption); color: var(--ink-muted); font-weight: var(--fw-light); margin-top: 2px; margin-bottom: 9px; }
.team-link { font-size: var(--fs-body-sm); color: var(--midnight); font-weight: var(--fw-medium); align-self: flex-start; transition: color var(--dur-fast); }
.team-link::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-md); }
.team-link:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

/* ── Contact form ── */
.form-layout { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: start; }
.form-card { background: var(--white); border: var(--bw-hair) solid var(--border); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-card); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: var(--fs-body-sm); color: var(--midnight); font-weight: var(--fw-medium); margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: var(--fs-body); color: var(--midnight); background: var(--white); border: var(--bw-hair) solid var(--border-strong); border-radius: var(--r-sm); padding: 11px 13px; transition: border-color var(--dur), box-shadow var(--dur); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pacific); box-shadow: 0 0 0 3px var(--pacific-wash); }
.field textarea { min-height: 120px; resize: vertical; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body-sm); color: var(--ink-muted); font-weight: var(--fw-light); line-height: 1.5; }
.check-row input { width: auto; margin-top: 3px; flex-shrink: 0; }
.form-note { font-size: var(--fs-caption); color: var(--ink-faint); line-height: 1.6; margin-top: 14px; }
.form-note a { color: var(--pacific); text-decoration: underline; text-underline-offset: 2px; }

/* ── Page hero variant (sub-pages, single column) ── */
.lp-hero.is-page { padding: 76px 0 64px; }
.lp-hero.is-page .hero-headline { margin-bottom: 30px; }
.lp-hero.is-page .hero-sub { max-width: 60ch; }

/* ── v2 responsive ── */
@media (max-width: 900px) {
  .cards-3, .cards-2, .compare-grid, .isnt-grid, .form-layout { grid-template-columns: 1fr; }
  .isnt-col { padding: 0; }
  .isnt-col:last-child { border-left: none; border-top: var(--bw-hair) solid var(--border); padding-top: 28px; margin-top: 28px; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .price-extra { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .insight-layout { flex-direction: column; align-items: flex-start; gap: 14px; }
  .insight-quote { text-align: left; }
  .form-layout { gap: 36px; }
  /* nav dropdowns become inline/static in the mobile sheet */
  .nav-item { display: block; }
  .nav-item > a { height: auto; padding: 12px 0; border-top: var(--bw-hair) solid var(--border); }
  .nav-caret { display: none; }
  .nav-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-radius: 0; padding: 0 0 10px 16px; min-width: 0; }
  .nav-menu a { padding: 7px 0; }
  .nav-menu a:hover, .nav-menu a:focus-visible { background: none; color: var(--rust-deep); box-shadow: none; }
}
@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
}

/* ════════════ v3 — readability · FAQ to bottom · more colour ════════════ */
/* Lay sections out in flow order so the FAQ can be pushed to the very bottom */
main#main { display: flex; flex-direction: column; }
main#main > * { flex: 0 0 auto; }
/* FAQ always sits at the page bottom, on a neutral brand surface (light-blue removed) */
.section:has(.faq-list) { background: var(--white); order: 10; }
.section:has(.faq-list) .faq-list { margin-left: auto; margin-right: auto; }
/* Labels: readable size comes from tokens; keep tracking calm */
.compare-old .compare-label { color: var(--ink-muted); }
/* Rust accents — a bit more orange across the site */
.section-eyebrow.is-rust { color: var(--rust); }
.hero-rule.is-rust { background: var(--rust); }
.lp-cta { border-top: 3px solid var(--rust); }
.award-mark { width: 30px; height: 3px; }

/* ════════════ v4 — review round: Burn buttons · no accent lines · consistent eyebrows · Pacific + dark sections ════════════ */
/* Primary buttons in Burn (Rust), not black */
.btn-dark, .nav-cta-btn { background: var(--rust); color: var(--sand); }
.btn-dark:hover, .nav-cta-btn:hover { background: var(--rust-deep); opacity: 1; }
.btn-dark:active { background: var(--rust-deep); opacity: 1; }
/* Remove all decorative lines (hero rule, orange accent strips) */
.hero-rule { display: none; }
.award-mark { display: none; }
.lp-cta { border-top: none; }
/* No hairline divider where the midnight CTA band meets the midnight footer */
main:has(> .lp-cta:last-child) ~ .lp-footer { border-top: none; }
/* Eyebrows: one consistent, readable colour */
.eyebrow, .section-eyebrow, .section-eyebrow.is-rust, .pcard-tag, .path-tag { color: var(--pacific-deep); font-weight: var(--fw-medium); letter-spacing: .08em; }
/* CTA-card buttons equal size so the boxes match */
.cta-card .btn-sand { width: 100%; text-align: center; white-space: nowrap; }
/* Equal card heights: reserve two title lines so body text starts level */
.cards-3 .pcard-title { min-height: 2.5em; }
/* ── Syndicate showcase (horizontal clickable tile: lead photo left, text right) ── */
.syndicate-list { display: grid; gap: 16px; }
.syndicate-card { position: relative; flex-direction: row; align-items: center; gap: 30px; padding: 30px 34px; }
.syndicate-photo { position: relative; z-index: 2; width: 132px; height: 132px; flex-shrink: 0; border-radius: var(--r-pill); overflow: hidden; background: var(--pacific-wash); }
.syndicate-photo image-slot { width: 100%; height: 100%; display: block; }
.syndicate-body { display: flex; flex-direction: column; min-width: 0; }
.syndicate-name { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(21px, 2.2vw, 26px); letter-spacing: var(--tk-display); color: var(--midnight); margin: 4px 0 10px; }
.syndicate-card .pcard-body { margin-bottom: 16px; }
.syndicate-card .pcard-link { align-self: flex-start; font-size: var(--fs-body-sm); color: var(--midnight); font-weight: var(--fw-medium); transition: color var(--dur-fast); }
.syndicate-card .pcard-link::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-md); }
.syndicate-card .pcard-link:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
@media (max-width: 640px) { .syndicate-card { flex-direction: column; align-items: flex-start; gap: 18px; } }
/* Full Pacific accent section (brand mid-blue) */
.bg-pacific { background: var(--pacific); }
.bg-pacific .section-title, .bg-pacific .why-headline { color: var(--sand); }
.bg-pacific .section-eyebrow { color: var(--on-pacific); }
.bg-pacific .section-lead, .bg-pacific .why-intro { color: var(--on-pacific); }
.bg-pacific .pcard { background: var(--white); border-color: var(--border); }
.bg-pacific .pcard:has(.pcard-link):hover, .bg-pacific .pcard:has(.pcard-link):focus-within { border-color: var(--rust); background: linear-gradient(var(--rust-wash), var(--rust-wash)), var(--white); }
.bg-pacific .pcard:has(.pcard-link):hover .pcard-link, .bg-pacific .pcard:has(.pcard-link):focus-within .pcard-link { color: var(--rust-deep); }
/* Dark (Midnight) section — for the contact form band */
.bg-dark .section-title { color: var(--sand); }
.bg-dark .section-lead { color: var(--sand-muted); }
.bg-dark .section-eyebrow { color: var(--on-pacific); }
/* Equal-height card titles so body copy starts on one line */
.path-title { min-height: 2.2em; }
.split-grid .path-title { min-height: 156px; }
.split-grid .path-body { min-height: 10.5em; }
.why-item-title { min-height: 2.6em; }
@media (max-width: 900px) { .path-title, .split-grid .path-title, .split-grid .path-body, .why-item-title, .cards-3 .pcard-title { min-height: 0; } }

/* ── Billing toggle (Monat / Jahr) ── */
.billing-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.billing-toggle { display: inline-flex; gap: 3px; padding: 3px; background: var(--white); border: var(--bw-hair) solid var(--border-strong); border-radius: var(--r-pill); }
.billing-toggle button { font: inherit; font-size: 14px; font-weight: var(--fw-medium); padding: 8px 18px; border: none; background: transparent; color: var(--ink-muted); border-radius: var(--r-pill); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.billing-toggle button[aria-pressed="true"] { background: var(--midnight); color: var(--sand); }
.billing-save { font-size: 14px; color: var(--pacific-deep); font-weight: var(--fw-medium); }
body[data-billing="year"] .amt-m { display: none; }
body:not([data-billing="year"]) .amt-y { display: none; }
.price-card .price-year.amt-y { color: var(--pacific-deep); font-weight: var(--fw-medium); }

/* ── Recommended highlight in the comparison table ── */
.cmp-table th.col-rec, .cmp-table td.col-rec { background: var(--pacific-wash); color: var(--midnight); }
.cmp-table thead th.col-rec { position: relative; color: var(--pacific-deep); border-top-left-radius: var(--r-sm); border-top-right-radius: var(--r-sm); vertical-align: bottom; padding-top: 14px; }
.cmp-table thead th { vertical-align: bottom; }
.col-rec-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-pacific); background: var(--pacific); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; }

/* ── Employee-participation tier list (pricing add-on) ── */
.tier-list { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 0; background: var(--border); border-radius: var(--r-sm); overflow: hidden; }
.tier-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; background: var(--white); padding: 11px 14px; }
.tier-row span:first-child { font-size: var(--fs-body-sm); color: var(--midnight); font-weight: var(--fw-regular); }
.tier-row span:last-child { font-size: var(--fs-caption); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Blog teaser (mirrors the Tokenize resources section) ── */
.blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 40px; }
.blog-head .section-title { margin-bottom: 0; }
.blog-all { flex-shrink: 0; font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--midnight); white-space: nowrap; transition: opacity var(--dur-fast); }
.blog-all:hover { opacity: var(--hover-opacity); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Blog cards are tiles like everything else on the site: framed, whole card
   clickable, same Pacific hover. They used to be bare stacked text where only the
   cover and the headline were hit areas. Cover sits flush at the top, body padded —
   the same construction as the rails on the blog index. */
.blog-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card); transition: border-color var(--dur) var(--ease-standard), background var(--dur) var(--ease-standard); }
.blog-card a.blog-cover { display: block; text-decoration: none; }
.blog-card image-slot { display: block; width: 100%; height: 188px; margin: 0; border: none; border-bottom: var(--bw-hair) solid var(--border); }
.blog-card a.blog-cover img { display: block; width: 100%; height: 188px; object-fit: cover; margin: 0; border: none; border-bottom: var(--bw-hair) solid var(--border); }
.blog-card .blog-meta { margin: 20px 22px 10px; }
.blog-card h3 { margin: 0 22px 10px; }
.blog-card .blog-excerpt { margin: 0 22px 18px; }
.blog-more { margin: auto 22px 24px; font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--midnight); text-decoration: none; align-self: flex-start; transition: color var(--dur-fast); }
.blog-more::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-md); }
.blog-more:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.blog-card:hover, .blog-card:focus-within { border-color: var(--pacific); background: var(--pacific-wash); }
.blog-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.blog-cat { font-size: var(--fs-micro); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; color: var(--pacific-deep); font-weight: var(--fw-medium); }
.blog-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.blog-date { font-size: var(--fs-caption); color: var(--ink-faint); }
.blog-card h3 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 21px; line-height: 1.25; letter-spacing: var(--tk-tight); color: var(--midnight); margin-bottom: 10px; }
.blog-card h3 a { color: inherit; text-decoration: none; transition: opacity var(--dur-fast); }
.blog-card:hover h3 a, .blog-card:focus-within h3 a,
.blog-card:hover .blog-more, .blog-card:focus-within .blog-more { color: var(--pacific-deep); }
.blog-excerpt { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--ink-muted); font-weight: var(--fw-light); }
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── Blog post (article) ── */
.article-hero { background: var(--sand); padding: 68px 0 40px; }
.article-hero .container { max-width: 800px; }
.article-back { display: inline-flex; align-items: center; gap: 10px; background: var(--midnight); color: var(--sand); padding: 10px 22px; border-radius: var(--r-sm); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); margin-bottom: 26px; transition: background var(--dur-fast); }
.article-back::before { content: "←"; }
.article-back:hover { background: var(--midnight-2); color: var(--sand); }
.article-cat { font-size: var(--fs-micro); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; color: var(--pacific-deep); font-weight: var(--fw-medium); }
.article-title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(34px, 5vw, var(--fs-title)); line-height: var(--lh-title); letter-spacing: var(--tk-title); color: var(--midnight); margin: 14px 0 20px; text-wrap: balance; }
.article-standfirst { font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--ink-muted); font-weight: var(--fw-light); }
.article-byline { display: flex; align-items: center; gap: 13px; margin-top: 28px; }
.article-byline .team-avatar { width: 44px; height: 44px; font-size: 15px; }
.article-byline-meta { display: flex; flex-direction: column; }
.article-author { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--midnight); }
.article-sub { font-size: var(--fs-caption); color: var(--ink-faint); }
/* Cover läuft im Sand-Hero weiter: gleiche 800px-Spalte wie der Titel (nicht mehr 840 → wirkte schräg),
   und 48px Sand unter dem Bild, bevor der weiße Artikel beginnt. */
.article-cover { width: 100%; margin: 0; padding: 0 var(--container-pad) 48px; background: var(--sand); }
.article-cover image-slot, .article-cover img { display: block; width: 100%; max-width: 800px; margin: 0 auto; height: clamp(240px, 38vw, 400px); border: var(--bw-hair) solid var(--border); border-radius: var(--r-lg); }
.article-body { background: var(--white); padding: 60px 0 80px; }
.article-body .container { max-width: 720px; }
.article-body h2 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(26px, 3.2vw, var(--fs-subtitle)); line-height: var(--lh-snug); letter-spacing: var(--tk-title); color: var(--midnight); margin: 48px 0 16px; }
.article-body h3 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-card-title); line-height: var(--lh-snug); color: var(--midnight); margin: 34px 0 12px; }
.article-body p { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--ink); font-weight: var(--fw-light); margin-bottom: 20px; }
.article-body p:first-child { margin-top: 0; }
.article-body h2:first-child { margin-top: 0; }
.article-body a { color: var(--pacific-deep); text-decoration: underline; text-underline-offset: 2px; }
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 22px; }
.article-body li { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--ink); font-weight: var(--fw-light); margin-bottom: 8px; }
.article-body strong { font-weight: var(--fw-medium); }
.article-figure { margin: 36px 0; }
.article-figure image-slot { display: block; width: 100%; height: clamp(220px, 34vw, 380px); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); }
.article-figure figcaption { font-size: var(--fs-caption); color: var(--ink-faint); margin-top: 10px; text-align: center; }
.article-quote { margin: 40px 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--pacific); }
.article-quote p { font-family: var(--font-display); font-size: var(--fs-quote); line-height: var(--lh-snug); letter-spacing: var(--tk-tight); color: var(--midnight); font-weight: var(--fw-regular); margin: 0; }
.article-divider { height: 1px; background: var(--border); margin: 48px 0; border: 0; }
@media (max-width: 900px) { .captable-grid { grid-template-columns: 1fr !important; } .captable-arrow-glyph { display: inline-block; transform: rotate(90deg); } }

/* ── Blog index ── */
.blog-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.blog-chip { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--midnight); background: var(--white); border: var(--bw-hair) solid var(--border); border-radius: var(--r-pill); padding: 8px 16px; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.blog-chip:hover { border-color: var(--rust); background: var(--rust-wash); color: var(--rust-deep); }
.blog-chip.is-active { background: var(--midnight); border-color: var(--midnight); color: var(--sand); }
.blog-chip.is-active:hover { background: var(--midnight); color: var(--sand); }
.blog-featured { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; margin-bottom: 64px; }
.blog-featured a.blog-cover image-slot { height: 320px; }
.blog-featured .blog-card h3 { font-size: clamp(26px, 3vw, 34px); }
.blog-featured .blog-excerpt { font-size: var(--fs-body-lg); }
@media (max-width: 860px) { .blog-featured { grid-template-columns: 1fr; gap: 22px; } .blog-featured a.blog-cover image-slot { height: 240px; } }

/* ════════════ v5 — review round: Midnight buttons · light-blue (Pacific) card hover ════════════ */
/* Primary buttons in Midnight, not Rust */
.btn-dark, .nav-cta-btn { background: var(--midnight); color: var(--sand); }
.btn-dark:hover, .nav-cta-btn:hover { background: var(--midnight-2); opacity: 1; }
.btn-dark:active { background: var(--midnight-2); opacity: 1; }
/* Clickable-tile hover: light blue (Pacific wash) instead of Rust */
.path-card:hover, .path-card:focus-within,
.pcard:has(.pcard-link):hover, .pcard:has(.pcard-link):focus-within,
.invest-card:hover, .invest-card:focus-within,
.team-card:has(.team-link):hover, .team-card:has(.team-link):focus-within {
  border-color: var(--pacific); background: var(--pacific-wash);
}
.path-card:hover .path-cta, .path-card:focus-within .path-cta,
.pcard:has(.pcard-link):hover .pcard-link, .pcard:has(.pcard-link):focus-within .pcard-link,
.team-card:has(.team-link):hover .team-link, .team-card:has(.team-link):focus-within .team-link {
  color: var(--pacific-deep);
}
/* Pacific-band cards sit on teal — keep the fill readable (white → light-blue border) */
/* The tint is translucent, so on the teal band it must be composited over white —
   applied directly it dissolves the card into the background and the text with it. */
.bg-pacific .pcard:has(.pcard-link):hover, .bg-pacific .pcard:has(.pcard-link):focus-within {
  border-color: var(--pacific-deep);
  background: linear-gradient(var(--pacific-wash), var(--pacific-wash)), var(--white);
}
.bg-pacific .pcard:has(.pcard-link):hover .pcard-link, .bg-pacific .pcard:has(.pcard-link):focus-within .pcard-link {
  color: var(--pacific-deep);
}
/* Nav dropdown hover: light blue (Pacific), not Rust — all pages */
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--pacific-wash); color: var(--pacific-deep); }
@media (max-width: 900px) {
  .nav-menu a:hover, .nav-menu a:focus-visible { background: none; color: var(--pacific-deep); }
}
/* Anchor jumps scroll smoothly, clearing the sticky nav */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Die Nav ist sticky und 62px hoch, also landet jedes Anker-Ziel ohne Abstand
   teilweise darunter. Galt vorher nur für die Vergleichstabelle — die Landingpage
   springt jetzt auf fünf weitere Sektionen und auf das Kontaktformular. */
main section[id], main form[id] { scroll-margin-top: 90px; }
/* form[id]: die CTAs der Landingpage springen auf das Formular, nicht auf die
   Sektion darum. Mobil liegen zwischen Sektionsanfang und Formular fast 800px
   (Überschrift, Kennzahlen, Award-Zeile) — ein CTA, der das Formular verspricht,
   soll es auch zeigen. Am Desktop steht die Überschrift daneben und bleibt sichtbar. */
/* Full-width investor syndicate pricing tile */
.price-wide { margin-top: 16px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px 40px; }
.price-wide-main { flex: 1 1 440px; min-width: 0; }
.price-wide-main .pcard-body { margin-bottom: 0; }
.price-wide-aside { flex-shrink: 0; margin-left: auto; }
.price-wide .pcard-price { margin: 0; }
@media (max-width: 560px) { .price-wide-aside { margin-left: 0; } }

/* ── Invest overview (startup grid) ── */
.invest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .invest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .invest-grid { grid-template-columns: 1fr; } }
.invest-card .pcard-body { margin-bottom: 0; }
.invest-actions { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.invest-site { font-size: var(--fs-body-sm); color: var(--pacific-deep); font-weight: var(--fw-medium); }
.invest-site:hover { text-decoration: underline; }
.invest-actions .btn-dark { padding: 9px 18px; font-size: var(--fs-body-sm); }
/* Pflichthinweis des Haftungsdachs (Concedus) unter der Button-Zeile JEDER Startup-Kachel.
   Der TEXT steht nicht hier, sondern im Kartentemplate (src/lib/invest.js) und in der
   Platzhalter-Karte der Exporte — diese Regel stylt ihn nur. Das war bis 13.08.2026 ein
   `.invest-actions::after` mit `content:`; CSS-generierter Text wird aber je nach
   Browser/Screenreader nicht zuverlässig vorgelesen, ist nicht markier- oder kopierbar
   und wird von Browser-Übersetzung übersprungen — für einen Pflichthinweis zu wenig.
   Regel nie löschen — check-frag §5h/§8. */
.invest-note {
  margin: 10px 0 0;
  font-size: var(--fs-micro);
  line-height: 1.6;
  font-weight: var(--fw-light);
  color: var(--ink-muted);
}

/* Rechtsseiten/Artikel: lange URLs auf schmalen Screens umbrechen (16.07.2026) */
.article-body a { overflow-wrap: anywhere; }

/* ============================================================
   Mobile-Navigation — App-Stil (16.07.2026)
   Vollflächiges Midnight-Panel unter der Nav-Leiste, Gruppen-Labels,
   tappbare Zeilen mit Hairlines. Überschreibt die früheren
   Mobile-Nav-Regeln weiter oben (gleiche Specificity, später = gewinnt).
   ============================================================ */
@media (max-width: 900px) {
  .lp-nav.nav-open .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - 62px);
    height: calc(100dvh - 62px);
    display: flex; flex-direction: column; gap: 0;
    background: var(--midnight);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: none;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 6px 24px 48px;
  }
  /* Gruppen-Label (Für Gründer / Für Investoren / Ressourcen) */
  .lp-nav.nav-open .nav-item > a {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(241,235,221,.55);
    padding: 24px 0 8px; border-top: none; height: auto;
    pointer-events: none;
  }
  .lp-nav.nav-open .nav-caret { display: none; }
  /* Unterpunkte als App-Zeilen */
  .lp-nav.nav-open .nav-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: block; background: transparent; box-shadow: none;
    border: none; border-radius: 0; padding: 0; min-width: 0;
  }
  .lp-nav.nav-open .nav-menu a {
    display: block; padding: 13px 0;
    font-size: 17px; line-height: 1.35; color: var(--sand);
    border-top: var(--bw-hair) solid var(--border-on-dark);
    border-radius: 0;
  }
  .lp-nav.nav-open .nav-menu a:hover,
  .lp-nav.nav-open .nav-menu a:focus-visible {
    background: none; box-shadow: none; color: rgba(241,235,221,.72);
  }
  .lp-nav.nav-open .nav-menu-desc { display: none; }
  /* Direkte Links auf oberster Ebene wie App-Zeilen */
  .lp-nav.nav-open .nav-links > a {
    display: block; padding: 13px 0; height: auto;
    font-size: 17px; color: var(--sand);
    border-top: var(--bw-hair) solid var(--border-on-dark);
  }
  .lp-nav.nav-open .nav-links > a:hover,
  .lp-nav.nav-open .nav-links > a:focus-visible { color: rgba(241,235,221,.72); background: none; }
  /* Burger wird zum X */
  .lp-nav.nav-open .nav-toggle span { background: transparent; }
  .lp-nav.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
  .lp-nav.nav-open .nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }
}

/* Login + Header-CTA im Mobil-Menü (03.08.2026) — siehe Kommentar an .nav-brand.
   Beide sind direkte <a> in .nav-links und erben damit die App-Zeilen-Optik, die
   der Sheet für Links auf oberster Ebene schon hat. Sie liegen bewusst NICHT als
   .nav-item vor: dort ist `pointer-events: none` gesetzt, weil ein .nav-item im
   Sheet ein Gruppen-Label ist und nur seine .nav-menu-Kinder anklickbar sind.
   Die Umschaltung läuft über zwei Regeln gleicher Spezifität — die spätere
   gewinnt —, damit kein !important nötig ist. */
.nav-links > a.is-sheet-only { display: none; }
@media (max-width: 900px) {
  .lp-nav.nav-open .nav-links > a.is-sheet-only { display: none; }
}
@media (max-width: 460px) {
  .nav-actions .nav-login, .nav-actions .nav-cta-btn { display: none; }
  .lp-nav.nav-open .nav-links > a.is-sheet-only { display: block; }
}

/* ════════════ Rust-Akzente — Review-Runde 16.07.2026 (v2) ════════════
   Rust-Semantik: markiert das NEGATIVE/ALTE („ohne beel", „Vorher") als
   Spiegel zur Pacific-Behandlung von „mit beel" — plus einzelne
   Eye-Catcher (Award, MCP-Mockup). NIE für Positives/Empfehlungen
   (Empfohlen-Badge bleibt Pacific), keine Flächen, keine Buttons. */

/* „ist nicht"-Listen: das × in Rust */
.is-no li::before { color: var(--rust); }

/* Ist/Ist-nicht-Kasten: Trennlinie zur Negativ-Spalte rust-getönt */
.isnt-col:last-child { border-left-color: rgba(201,84,43,.35); }
@media (max-width: 900px) {
  .isnt-col:last-child { border-top-color: rgba(201,84,43,.35); }
}

/* Vergleichskarten: „Ohne beel"/„Vorher" spiegelt die Pacific-Karte in Rust */
.compare-old { border: 1.5px solid var(--rust); }
.compare-old .compare-label { color: var(--rust-deep); }
.compare-old .compare-list li::before { color: var(--rust); }

/* Fintech Germany Award: Award-Name als Rust-Chip im Stats-Band */
.award-text strong {
  background: var(--rust); color: var(--on-rust);
  padding: 2px 12px; border-radius: var(--r-pill);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}


/* ══════════════════════════════════════════════════════════════
   v3 — Editorial-Fotografie (Stil: App-Screens & Fundraising-Guide)
   Dunkle, ruhige Motive: Person in Situation, architektonischer
   Schatten. Finale Bilder kommen über das Headless-CMS — bis dahin
   image-slot-Platzhalter (Drag & Drop, bleibt nach Reload erhalten).
   ══════════════════════════════════════════════════════════════ */
.path-photo { position: relative; height: 280px; margin: -38px -36px 28px; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; background: var(--midnight-2); }
.path-photo image-slot { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--sand-muted-strong); }
.path-photo image-slot::part(frame) { background: var(--midnight-2); }
.hero-split { display: grid; grid-template-columns: max(clamp(320px, 42vw, 660px), calc(100vw - 100% + 80px)) minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); align-items: stretch; margin-left: calc(50% - 50vw); }
.hero-split > div:first-child { grid-column: 2; grid-row: 1; align-self: center; padding: 24px 0; }
.lp-hero.is-page:has(.hero-media) { overflow: clip; }
.hero-media { grid-column: 1; grid-row: 1; position: relative; width: 100%; aspect-ratio: 4 / 5; min-height: 0; overflow: hidden; background: var(--midnight-2); margin: -76px 0 -64px 0; }
.hero-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--sand-muted-strong); }
.hero-media image-slot::part(frame) { background: var(--midnight-2); }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 40px; margin-left: 0; }
  .hero-split > div:first-child { grid-column: 1; grid-row: 2; padding: 0; }
  .hero-media { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; min-height: 0; margin: -76px calc(50% - 50vw) 0 calc(50% - 50vw); }
}
/* B3 — Editorial-Band: volles Panorama zwischen zwei Sections (21:9, edge-to-edge) */
/* width: 100% ist hier nicht redundant. `main#main` ist ein Flex-Container (Spalte),
   damit `order: 10` das FAQ ans Seitenende schieben kann — das Band ist also ein
   Flex-Item, und seine Breite haengt am Stretch der Querachse. Ein Flex-Item mit
   `aspect-ratio`, dessen einziges Kind absolut positioniert ist, hat aber keine
   eigene Inhaltsbreite: WebKit leitet die Breite dann aus dem Seitenverhaeltnis ab
   statt zu strecken, und das Band steht linksbuendig und zu schmal in der Seite
   (auf beel.com in Safari gemeldet: rund 200px Luecke rechts). Blink streckt und
   zeigt nichts davon. Mit definiter Breite muss keine Engine mehr raten. */
/* Gleiche Falle wie beim Band unten, zweite Fundstelle: die Bildbox der
   Invest-Karten ist ein Flex-Item in `.pcard` (Spalte) mit `aspect-ratio:16/10`,
   und ihr Inhalt — Platzhaltertext oder ein <img width:100%> — traegt keine
   eigene Breite bei. Ohne definite Breite haengt sie am Stretch: in Chromium
   faellt sie ohne ihn von 277px auf 96px. Der Kasten steht dann schmal in der
   Karte, waehrend Titel und Text die volle Breite behalten. */
.invest-media { width: 100%; }
.editorial-band { position: relative; width: 100%; background: var(--midnight-2); aspect-ratio: 21 / 9; max-height: 560px; overflow: hidden; }
.editorial-band image-slot { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--sand-muted-strong); }
.editorial-band image-slot::part(frame) { background: var(--midnight-2); }
@media (max-width: 700px) { .editorial-band { aspect-ratio: 16 / 9; max-height: 420px; } }
@media (max-width: 520px) {
  .path-photo { height: 200px; margin: -30px -26px 22px; }
}

/* Editorial-Bilder: echte <img> in den Bild-Containern (20.07.2026) */
.path-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }


/* Footer-Newsletter (20.07.2026) — Anmeldung via HubSpot Forms API (newsletter_intent) */
.footer-newsletter { margin-top: 26px; max-width: 320px; }
.footer-newsletter .nl-row { display: flex; gap: 8px; margin-top: 10px; }
.footer-newsletter input[type="email"] {
  flex: 1; min-width: 0; padding: 10px 12px; font-size: 13.5px;
  background: transparent; color: var(--sand);
  border: var(--bw-hair) solid rgba(241,235,221,.35); border-radius: var(--r-sm);
}
.footer-newsletter input[type="email"]::placeholder { color: rgba(241,235,221,.45); }
.footer-newsletter input[type="email"]:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.footer-newsletter .btn-sand { padding: 10px 16px; font-size: 13.5px; white-space: nowrap; }
.footer-newsletter .nl-note { margin-top: 10px; font-size: 11px; line-height: 1.6; color: rgba(241,235,221,.40); }
.footer-newsletter .nl-note a { color: rgba(241,235,221,.55); text-decoration: underline; }
.footer-newsletter .nl-hp { position: absolute; left: -9999px; }
@media (max-width: 560px) { .footer-newsletter .nl-row { flex-direction: column; } .footer-newsletter { max-width: none; } }

/* Newsletter-Popup — dezenter Slide-in unten rechts (20.07.2026) */
.nl-popup {
  position: fixed; right: 20px; bottom: 20px; z-index: 890;
  width: min(340px, calc(100vw - 32px));
  background: var(--white); border: var(--bw-hair) solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-card);
  padding: 22px 22px 18px;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.nl-popup.is-in { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .nl-popup { transition: none; } }
.nl-popup-close {
  position: absolute; top: 8px; right: 10px; background: none; border: 0;
  font-size: 22px; line-height: 1; color: var(--ink-faint); cursor: pointer; padding: 4px;
}
.nl-popup-close:hover { color: var(--midnight); }
.nl-popup-title { font-family: var(--font-display); font-size: 19px; color: var(--midnight); margin: 0 14px 6px 0; }
.nl-popup-text { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--ink-muted); margin-bottom: 14px; }
.nl-popup .nl-row { display: flex; gap: 8px; }
.nl-popup input[type="email"] {
  flex: 1; min-width: 0; padding: 10px 12px; font-size: 13.5px;
  border: var(--bw-hair) solid var(--border-strong); border-radius: var(--r-sm); color: var(--midnight);
}
.nl-popup .btn-dark { padding: 10px 14px; font-size: 13.5px; white-space: nowrap; }
.nl-popup .nl-note { margin-top: 8px; font-size: 11px; color: var(--ink-muted); }
.nl-popup .nl-hp { position: absolute; left: -9999px; }

/* "Zuletzt geändert" / "Last updated" unter dem Fliesstext eines Rechtsdokuments,
   injiziert von src/lib/legal.js. Stand die Zeile früher über dem Text, war Body-Type
   richtig — sie las sich als Teil der Präambel. Unter dem Text ist sie eine Fussnote:
   ohne diese Regel hängt sie in voller Textgrösse hinter dem letzten Absatz und sieht
   aus wie ein vergessener Satz des Dokuments. Regel nie löschen — check-frag §8.
   Selektor bewusst `.article-body p.legal-updated` (0-2-1): `.article-body p` setzt
   --fs-body-lg und ist mit 0-2-0 spezifischer als eine einzelne Klasse, d.h. `.legal-updated`
   allein bekäme Rahmen und Farbe, aber weiter 17px Schrift. */
.article-body p.legal-updated {
  margin: 40px 0 0;
  padding-top: 16px;
  border-top: var(--bw-hair) solid var(--border);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--ink-muted);
  font-weight: var(--fw-light);
}

/* ── Long-form TOC layout (blog posts, legal pages) ──
   Sticky numbered contents rail beside a prose column. */
.article-body .container.is-wide { max-width: 1060px; }
.post-layout { display: grid; grid-template-columns: 216px minmax(0, 720px); gap: 56px; justify-content: center; }
.post-toc { position: sticky; top: 96px; align-self: start; border-top: var(--bw-hair) solid var(--border); padding-top: 16px; max-height: calc(100vh - 132px); overflow-y: auto; scrollbar-width: none; }
.post-toc::-webkit-scrollbar { display: none; }
.post-toc-title { font-size: var(--fs-micro); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; color: var(--pacific-deep); font-weight: var(--fw-medium); margin: 0 0 14px; }
.post-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; counter-reset: toc; }
.post-toc a { display: flex; gap: 10px; font-size: var(--fs-body-sm); line-height: 1.35; color: var(--ink-muted); text-decoration: none; transition: color var(--dur-fast); }
.post-toc a::before { counter-increment: toc; content: counter(toc); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.post-toc a:hover { color: var(--midnight); }
.post-toc a.is-active { color: var(--midnight); font-weight: var(--fw-medium); }
.post-prose > h2 { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 1040px) {
  .post-layout { grid-template-columns: minmax(0, 720px); }
  .post-toc { position: static; max-height: none; overflow: visible; margin-bottom: 6px; }
}

/* ── Quote-Slider v2 (31.07.2026): Höhe folgt dem längsten Zitat, Foto + Name fix verankert ──
   Slides liegen im selben Grid-Feld: unsichtbare Slides halten die Höhe, nichts springt.
   Foto + Attribution sind unten links verankert — identische Position bei jedem Zitat. */
.quotes-viewport { display: grid; }
.quotes-viewport .quote-slide { display: flex; flex-direction: column; grid-area: 1 / 1; visibility: hidden; }
.quotes-viewport .quote-slide.is-active { display: flex; visibility: visible; }
.quote-attr-row { margin-top: auto; display: flex; align-items: center; gap: 14px; padding-top: 20px; }
.quote-attr-row .quote-attr { margin: 0; }
.quote-photo { width: 128px; height: 128px; flex: 0 0 128px; border-radius: var(--r-pill); object-fit: cover; border: .5px solid rgba(241,235,221,.28); }

/* ── Migrations-Hinweis „Tokenize.it ist jetzt beel" (18.08.2026) ──
   Wird nur eingeblendet, wenn der Besucher über eine Weiterleitung von
   tokenize.it kommt (`?from=tokenizeit`); Markup und Auslöser stecken in
   app.js, hier steht nur das Aussehen.
   z-index 870: unter dem Newsletter-Slide-in (890) und deutlich unter dem
   Consent-Banner (900/901) — der Hinweis darf die Einwilligung nie verdecken.
   Das untere Padding hält den Kasten oberhalb des Banners, wenn beide
   gleichzeitig sichtbar sind. */
.mig-veil {
  position: fixed; inset: 0; z-index: 870;
  /* Fast Schwarz statt Midnight. Der Schleier hatte exakt die Farbe von
     `--midnight`, was über einem sandfarbenen Hero gut aussah und über dem
     Midnight-Hero gar nichts tut: Gleiche Farbe über gleicher Farbe bleibt die
     Farbe, egal bei welcher Deckkraft. Der Kasten stand dadurch randlos in einer
     Fläche seiner eigenen Farbe. Dunkler als Midnight trennt auf beiden Gründen. */
  background: rgba(4,10,17,.78);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px 168px;
  opacity: 0; transition: opacity .3s ease;
}
.mig-veil.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mig-veil { transition: none; } }
/* Größe: bis 1600px genau wie bisher (380px), darüber linear mitwachsend bis
   zum Doppelten bei 2560px — der logischen Breite eines 5K-Schirms — und dort
   gedeckelt. Fest verdrahtet war der Kasten auf einem 5K-Display nur 15% der
   Bildschirmbreite und wirkte wie eine Visitenkarte.
   Alles im Kasten leitet sich aus `--w` ab, damit Innenabstände und Marken
   mitskalieren statt in einer größer werdenden Fläche zu schwimmen. Die Werte
   sind die Verhältnisse der 380px-Fassung (52/380, 174/380, …).
   `--vpw` steht für die Viewport-Breite und existiert nur, damit die Vorschau
   andere Bildschirmbreiten simulieren kann; hier ist es immer 100vw. */
.mig-panel {
  --vpw: 100vw;
  --w: clamp(380px, calc(var(--vpw) * .396 - 253px), 760px);
  position: relative; width: min(var(--w), 100%);
  /* `--midnight-2` ist im Design-System genau dafür da: erhöhte Panels auf
     Midnight. Dazu die Haarlinie — ein Schatten allein trennt Dunkles von
     Dunklem nicht, er verschwindet darin. Dieselbe Lösung wie bei `.hero-tile
     img`, aus demselben Grund. */
  background: var(--midnight-2); color: var(--sand);
  border: var(--bw-hair) solid rgba(241,235,221,.18);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop);
  padding: calc(var(--w) * .137) calc(var(--w) * .116) calc(var(--w) * .126);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.mig-close {
  position: absolute; top: calc(var(--w) * .026); right: calc(var(--w) * .032);
  width: calc(var(--w) * .09); height: calc(var(--w) * .09); padding: 0;
  border: 0; background: none; border-radius: var(--r-sm);
  font-size: calc(var(--w) * .058); line-height: 1; cursor: pointer;
  color: rgba(241,235,221,.56); transition: color var(--dur-fast), background var(--dur-fast);
}
.mig-close:hover { color: var(--sand); background: rgba(241,235,221,.09); }
.mig-tz   { width: calc(var(--w) * .458); height: auto; display: block; opacity: .82; }
.mig-beel { width: calc(var(--w) * .253); height: auto; display: block; }
/* Die Übergangszeile: Haarlinie – Wort – Haarlinie, über die volle Kastenbreite. */
.mig-rule {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: calc(var(--w) * .068) 0 calc(var(--w) * .063);
}
.mig-rule::before, .mig-rule::after {
  content: ''; flex: 1; height: 1px; background: rgba(241,235,221,.16);
}
.mig-rule span {
  font-size: calc(var(--w) * .0276); letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--pacific);
}
/* Auf schmalen Geräten schrumpfen Kasten und Marken mit, damit nichts
   überläuft und der Hinweis nicht die halbe Höhe des Displays frisst. */
@media (max-width: 420px) {
  .mig-veil  { padding: 20px 12px 148px; }
  .mig-panel { padding: 44px 24px 38px; }
  .mig-tz    { width: min(148px, 100%); }
  .mig-beel  { width: 82px; }
  .mig-rule  { margin: 20px 0 18px; }
  .mig-close { top: 10px; right: 12px; width: 34px; height: 34px; font-size: 22px; }
  .mig-rule span { font-size: 10.5px; }
}
/* Sehr niedrige Fenster (Querformat am Handy): der Kasten rückt nach oben,
   statt hinter dem Consent-Banner zu verschwinden. */
@media (max-height: 560px) {
  .mig-veil { align-items: flex-start; padding-bottom: 24px; }
}
/* Der Kasten bekommt beim Öffnen den Fokus (Dialog-Konvention), ist selbst aber
   nichts zum Bedienen — der Ring gehört an das ×, das Tab als Erstes erreicht. */
.mig-panel:focus { outline: none; }