/* ==========================================================================
   Beastald — One-Page Scaffold
   Design tokens, mobile-first layout, no framework.
   Palette and rules locked per DESIGN_BRIEF.md / CTA_MAP.md / COPY_SPINE.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (CSS custom properties)
   -------------------------------------------------------------------------- */
:root {
  /* Original palette (Round 3 revert — exact hex values, do not approximate) */
  --color-navy:         #07111d;  /* very dark navy, near-black — Crushio night; Δ≈7 RGB units vs Round-3 navy, visually identical */
  --color-ivory:        #F3EFE7;  /* warm cream */
  --color-paper-white:  #FCFAF6;  /* warm white */
  --color-slate:        #56616B;  /* body-text grey */
  --color-teal:         #439A9D;  /* muted teal accent */
  --color-copper:       #C58A5C;  /* warm copper accent */
  --color-white:        #FFFFFF;  /* max contrast on navy */
  --color-teal-hover:   #2F7A7D;  /* one-step teal deepening for primary button hover */

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  /* Type scale (mobile defaults; desktop overrides under media query) */
  --fs-body: 1rem;          /* 16px mobile */
  --fs-small: 0.875rem;     /* 14px — Round 2 type-scale-lift (was 13px, F3 floor). */
  --fs-eyebrow: 0.8125rem;  /* 13px — Round 2 type-scale-lift (was 12px, F3 floor). */
  --fs-h4: 1.125rem;        /* 18px */
  --fs-h3: 1.375rem;        /* 22px */
  --fs-h2: 1.75rem;         /* 28px */
  --fs-h1: clamp(2.5rem, 8vw, 3.5rem); /* hero H1 mobile-first */

  --lh-body: 1.65;
  --lh-tight: 1.1;
  --lh-snug: 1.2;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing scale */
  --space-1: 0.5rem;   /* 8px  — small */
  --space-2: 1rem;     /* 16px — medium */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px — large */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px — xl */
  --space-7: 6rem;     /* 96px */

  /* Layout */
  --max-content: 72rem; /* 1152px readable measure */
  --gutter: 1.25rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --sticky-header-h: 6.25rem; /* R7: 100px to host brand subtitle + nav breathing room (was 3.5rem/56px). Drives section[id] scroll-margin-top. */
  --mobile-bar-h: 3.75rem;

  /* Motion (Round 3: extended motion tokens for scroll-reveal + glass hover) */
  --t-fast: 140ms;
  --t-base: 200ms;
  --t-slow: 560ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* Glass + shadow (Round 3, transferable from Crushio — applied sparingly to cards only) */
  --card-glass:        rgba(252, 250, 246, 0.78);
  --card-glass-strong: rgba(252, 250, 246, 0.92);
  --shadow-card:        0 16px 40px rgba(7, 24, 39, 0.10);
  --shadow-card-hover:  0 24px 60px rgba(7, 24, 39, 0.16);

  /* Focus outline */
  --focus-ring: 0 0 0 3px var(--color-teal-hover);
  --focus-offset: 2px;

  /* Crushio palette (Round 4 additive transfer — names match design_tokens.json capture).
     Cyan palette above stays semantically intact. These are opt-in tokens for elements
     that want the Crushio visual character (body bg gradient, ambient blur, hero accents).
     See recon/design_tokens.json + recon/parity_report.md §B + recon/open_questions.md §OQ7. */
  --night:        #07111d;  /* Crushio --night, also == cyan --color-navy after repoint */
  --ocean:        #1E3A8A;  /* Round 12 (finetuning 2026-10-07): dunkler als #1e40af (Round 11.4) per Master Edi Wunsch. L*~33 (HSL 226° 71% 36%), WCAG-Relative-Luminanz 0.0495 vs 0.0730 für #1e40af — strictly smaller. Bleibt im "dunkelblau"-Band; Kontrast auf Paper-White ~9:1 (WCAG AA non-text 3:1 passes comfortably). */
  --lagoon:       #2f8b92;  /* Crushio --lagoon, primary CTA/link/focus accent (hue-close to cyan --color-teal #439A9D) */
  --lagoon-soft:  rgba(47, 139, 146, 0.16);  /* teal at 16% alpha */
  --sand:         #efe3d3;  /* Crushio --sand, warm cream (close to cyan --color-ivory #F3EFE7) */
  --sun:          #fff8ef;  /* Crushio --sun, warm white top of bg gradient */
  --coral:        #dc8d75;  /* Crushio --coral, warm coral accent (hue-close to cyan --color-copper #C58A5C) */
  --coral-soft:   rgba(220, 141, 117, 0.16);  /* coral at 16% alpha */
  --leaf:         #264337;  /* Crushio --leaf, deep forest green (sparingly used) */
  --ink:          #0f1720;  /* Crushio --ink, body text */
  --ink-soft:     rgba(15, 23, 32, 0.72);    /* muted text */
  --line:         rgba(16, 49, 79, 0.12);    /* hairline divider */

  /* Crushio body background — 3-layer stack (radial sand top-left + radial lagoon haze upper-right + linear sun-to-paper).
     Keep as a single CSS custom property so the gradient is opt-in / reversible per OQ2 default (hero only). */
  --bg-page:
    radial-gradient(circle at 0% 0%, rgba(239, 227, 211, 0.95), transparent 36%),
    radial-gradient(circle at 80% 10%, rgba(47, 139, 146, 0.12), transparent 24%),
    linear-gradient(180deg, #f8f2e9 0%, #fdf9f4 40%, #fffdf9 100%);
}

/* Desktop type scale overrides */
@media (min-width: 768px) {
  :root {
    --fs-body: 1.125rem;     /* 18px desktop */
    --fs-h2: 2.25rem;        /* 36px */
    --fs-h1: clamp(3rem, 6vw, 5.75rem);
    --gutter: 2rem;
  }
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: auto; /* smooth scroll only when JS-enabled and motion allowed */
}

body {
  margin: 0;
  background-color: var(--color-ivory);
  /* Round 4: Crushio 3-layer background gradient (sand radial + lagoon haze + sun-to-paper).
     OQ2 default = apply to body; #hero stays transparent so the gradient shows through. */
  background-image: var(--bg-page);
  background-attachment: fixed, fixed, scroll;
  background-repeat: no-repeat;
  color: var(--color-slate);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  overflow-x: hidden; /* hard guard against horizontal scroll */
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

a:hover {
  text-decoration-color: var(--color-teal);
  color: var(--color-navy);
}

a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

button {
  font: inherit;
  cursor: pointer;
}

/* Visible keyboard focus on every interactive element */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Section scroll offset (per CTA_MAP §2) */
section[id] {
  scroll-margin-top: calc(var(--sticky-header-h) + 1rem);
}

@media (max-width: 767px) {
  section[id] {
    scroll-margin-top: 1rem;
  }
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-6);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-7);
  }
}

.section--ivory {
  background-color: var(--color-ivory);
}

.section--paper {
  background-color: var(--color-paper-white);
}

.section--navy {
  background-color: var(--color-navy);
  color: var(--color-ivory);
}

.section--navy :is(h1, h2, h3, h4) {
  color: var(--color-ivory);
}

.section--navy a {
  color: var(--color-teal);
}

.section--navy a:hover {
  color: var(--color-ivory);
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--color-navy);
  margin: 0 0 var(--space-2);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
}

h1 {
  font-size: var(--fs-h1);
  /* Round 4: tightened to Crushio -0.04em (was -0.02em). OQ6 default = transfer only letter-spacing. */
  letter-spacing: -0.04em;
  line-height: 1.02;
}

h2 {
  font-size: var(--fs-h2);
  /* Round 4: tightened to Crushio -0.04em (was -0.015em). */
  letter-spacing: -0.04em;
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  /* Round 4: Crushio -0.04em applied to h3 (was inheriting h2's -0.015em). */
  letter-spacing: -0.04em;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

p {
  margin: 0 0 var(--space-2);
  max-width: 38rem;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate); /* FA-001 a11y: teal on ivory/ivory = 5.77:1/6.55:1 (was 2.88/3.17:1 with teal). See audit/round_3c_fix.md. */
  margin-bottom: var(--space-2);
}

.section--navy .eyebrow {
  color: var(--color-ivory);
}

.section-lead {
  font-size: var(--fs-h4);
  color: var(--color-slate);
  margin-bottom: var(--space-4);
  max-width: 42rem;
}

.section--navy .section-lead {
  color: var(--color-ivory);
}

/* --------------------------------------------------------------------------
   5. Header / brand (R7 — Crushio-style refactor)
   - Translucent paper bg with backdrop blur (sticky-header lift, Crushio parity).
   - Brand block: logo + wordmark + 1-line subtitle (stacked column).
   - Nav: Inter sans-serif (was IBM Plex Mono), wider gap, tighter letter-spacing.
   - Lang-switcher: Inter sans-serif, pipe separator.
   - Breakpoint shift 768px → 1100px (R7) → 960px (R9, Master Edi feedback
     "springt zu schnell ins Hamburger-Menü"): nav/lang/cta inline from
     960px up, hamburger below. Tablets + 13" laptops keep horizontal nav.
   - --sticky-header-h bumped 3.5rem → 6.25rem (100px) to host subtitle
     + nav with breathing room. Used by section[id] scroll-margin-top calc.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: rgba(252, 250, 246, 0.78);
  border-bottom: 1px solid rgba(7, 24, 39, 0.06);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--sticky-header-h);
  padding-block: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-navy);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.brand img {
  display: block;
}

.brand .site-logo {
  /* step024: enlarged 32→40 for a stronger brand presence in the header. */
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.brand .site-wordmark {
  /* step025: wordmark reverted to pre-step024 size 120x24 (icon stays at 40x40 per Master Edi). */
  width: 120px;
  height: 24px;
  flex: 0 0 auto;
}

/* step024: at <960px (hamburger breakpoint), ease the logo back to 36×36
   so the header row doesn't squeeze the menu-toggle / lang-switcher. */
@media (max-width: 959px) {
  .brand .site-logo {
    width: 36px;
    height: 36px;
  }
}

/* R7: brand text column — wordmark on top, 1-line subtitle below. */
.brand__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  line-height: 1;
}

/* R8: subtitle lifted from 0.75rem (12px) to clamp(0.875rem, 2.4vw + 0.45rem, 1rem) — 14px on narrow viewports, 16px on desktop. line-height 1.45 for breathing room. R9: nowrap ≥960 keeps it single-line beside the lang/CTA row; allow wrap <960 so the brand block doesn't push the CTA off-screen. */
.brand__subtitle {
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 0.45rem + 2.4vw, 1rem);
  font-weight: var(--fw-regular);
  color: var(--color-slate);
  letter-spacing: 0;
  line-height: 1.45;
  white-space: normal;
  max-width: 22ch;
}

@media (min-width: 960px) {
  .brand__subtitle {
    white-space: nowrap;
  }
}

.brand:hover {
  color: var(--color-navy);
  text-decoration-color: transparent;
}

/* Nav: hidden by default, inline flex from the desktop breakpoint (960px; R9 from 1100px). */
.site-nav {
  display: none;
}

@media (min-width: 960px) {
  /* R8: nav pushed to the right edge of the inline row (margin-left:auto in the flex parent). The lang-switcher then sits naturally after the nav, grouped to the right — leaving the brand block alone on the left. The CTA is detached from this row (absolute, see .header-cta rules below) and floats below the header. */
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
  }
}

.site-nav a {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-navy);
  text-decoration: none;
  padding-block: 0.375rem;
  border-bottom: 2px solid transparent;
  letter-spacing: -0.005em;
  transition: border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.site-nav a:hover {
  border-bottom-color: var(--color-teal);
  color: var(--color-navy);
}

.site-nav a[aria-current="true"] {
  border-bottom-color: var(--color-teal);
}

/* R8: .header-cta — default hidden. Tablet/mobile (380–959): inline in header row, smaller size. Desktop (≥960): floats below the sticky header as a smaller, rounder pill — out of the inline flex row. Sub-380px: hidden from header (the .mobile-menu__cta fallback inside the burger menu kicks in instead). R9: hamburger breakpoint lowered 1100 → 960. */
.site-header .header-cta {
  display: none;
}

/* ≥380px: CTA visible. Inline below 960, floating above. The visibility floor (380) prevents the inline CTA from squeezing the brand subtitle off-screen on iPhone-SE / Galaxy Fold widths — there the CTA falls back into the burger menu via .header-cta--menu. */
@media (min-width: 380px) {
  .site-header .header-cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.5rem 0.875rem;
    font-size: 0.9375rem;
    border-radius: var(--radius-md);
    margin-left: var(--space-2);
  }
}

/* ≥960px: detach from the inline flex row, float below the sticky header (top: 100% = right under the 100px header), pinned to the right gutter. Slightly more rounded + subtle shadow for "schwebend" feel. z-index 29 keeps it below the header chrome (z:30) but above page content. */
@media (min-width: 960px) {
  .site-header .header-cta {
    position: absolute;
    top: calc(100% + 1rem);
    right: var(--gutter);
    margin-left: 0;
    z-index: 29;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(7, 24, 39, 0.10), 0 2px 6px rgba(7, 24, 39, 0.05);
  }
}

/* R8: .header-cta--menu — selector-chain override for show/hide logic. The .btn .btn--primary class combination on the <a> element owns the visual styling (matches the header-cta pill); this rule only handles the ≥380px hide so the inline header-cta can take over. The match-mirror comment from earlier is preserved on the inline .mobile-menu__cta .header-cta--menu override below. */

/* R16: hide the floating header CTA while the user is on the contact
   section. The JS observer (scripts/main.js §3b) sets
   body[data-on-contact="true"] on any intersection with #contact;
   absence of the flag (no-JS, pre-boot, or scrolled-away) = CTA
   visible per the existing @media rules above. The
   .header-cta--menu fallback (mobile burger) is intentionally
   outside this rule — it's only visible when the burger is open,
   which is independent of scroll position. */
body[data-on-contact="true"] .site-header .header-cta {
  display: none;
}

/* Mobile menu toggle: visible below 960px, hidden from 960px up. */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(7, 24, 39, 0.15);
  border-radius: var(--radius-sm);
  color: var(--color-navy);
}

@media (min-width: 960px) {
  .menu-toggle {
    display: none;
  }
}

.mobile-menu {
  display: none;
  border-top: 1px solid rgba(7, 24, 39, 0.08);
  background-color: var(--color-paper-white);
  padding: var(--space-2) var(--gutter);
}

.mobile-menu[data-open="true"] {
  display: block;
}

.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* R7: mobile menu links: sans-serif (was mono). */
.mobile-menu a {
  display: block;
  padding: var(--space-1) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--color-navy);
  text-decoration: none;
  letter-spacing: -0.005em;
}

/* R8: sub-380px fallback CTA inside the burger menu. CSS hides it ≥380px where the inline header CTA takes over. Visual styling inherited from .btn .btn--primary. */
.mobile-menu__cta {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(7, 24, 39, 0.08);
  list-style: none;
}

.mobile-menu__cta .header-cta--menu {
  display: inline-flex;
  width: 100%;
}

/* R8: specificity bump (0,2,0) for the CTA inside the menu — without this, the generic .mobile-menu a rule above (0,1,1) would set color to navy and render ivory-on-navy as navy-on-navy (invisible). */
.mobile-menu .btn--primary {
  color: var(--color-ivory);
  background-color: var(--color-navy);
  border-color: var(--color-navy);
}

.mobile-menu .btn--primary:hover {
  background-color: var(--color-teal-hover);
  color: var(--color-paper-white);
  text-decoration: none;
  transform: translateY(-1px);
}

@media (min-width: 380px) {
  .mobile-menu__cta .header-cta--menu {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   6. Hero (Round 4 — Pure Concept C: type-led single-column, no founder photo)
   -------------------------------------------------------------------------- */
/* R7: hero top padding bumped +44px (was var(--space-7)=96px on desktop)
   to absorb the larger sticky header (56px → 100px) and keep CTA above-fold. */
.hero {
  padding-block: var(--space-6) var(--space-7);
}

@media (min-width: 768px) {
  .hero {
    padding-block: calc(var(--space-7) + 1.5rem) var(--space-7);
  }
}

/* Pure Concept C: .hero__inner is a single-column max-width container,
   no 2-column grid. The hero is type-led; founder lives in its own section below. */
.hero__inner {
  display: block;
  max-width: 56rem;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero__copy h1 {
  margin: 0;
  max-width: 18ch;
}

.hero__sub {
  font-size: var(--fs-h4);
  color: var(--color-slate);
  margin: 0;
  max-width: 38rem;
}

.hero__support {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-slate);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   6b. Founder Section (Round 4 — reintroduced as separate Full-Width-Section)
   Concept C pattern adapted to original palette (navy / ivory / paper-white / teal / slate).
   Photo placeholder at /assets/team/master-edi.svg (240×240 navy-bordered circle).
   Real photo via file-replace when Master Edi delivers.
   -------------------------------------------------------------------------- */
#founder.section.section--paper {
  padding-block: var(--space-6);
}

@media (min-width: 768px) {
  #founder.section.section--paper {
    padding-block: var(--space-7);
  }
}

.founder-slot__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 768px) {
  .founder-slot__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-5);
  }
}

.founder-slot__photo {
  aspect-ratio: 1 / 1;
  width: 100%;
  /* 240 (image) + 2*10 (padding) + 2*2 (border) = 264 — keeps the inner portrait
     exactly 240x240 visible while adding a small ivory gap and a 2px gray frame. */
  max-width: 264px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-color: var(--color-ivory);
  border: 2px solid rgba(86, 97, 107, 0.7); /* slate at 70% — clearly visible neutral gray */
  border-radius: var(--radius-md);
  padding: 10px; /* background gap between border and portrait */
}

.founder-slot__photo img {
  /* R7: object-fit cover so the portrait fills the 1:1 slot without ever being
     stretched. The shipped asset is already exactly 1:1 (800x800 / 560x560), so
     cover in a 1:1 box is a no-op scale -> aspect ratio is provably preserved.
     object-position: center top because the head's top edge sits ~3.5% from the
     image top; any downward offset would clip the hair. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.founder-slot__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.founder-slot__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 38rem;
}

.founder-slot__quote {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.35;
  color: var(--color-navy);
  border-left: 2px solid var(--color-teal);
  padding-left: var(--space-2);
}

.founder-slot__attribution {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-slate);
  letter-spacing: 0.04em;
}

.founder-slot__attribution strong {
  color: var(--color-navy);
  font-weight: var(--fw-semibold);
}

@media (max-width: 767px) {
  /* Mobile: shrink the placeholder to prevent it dominating the fold.
     Uses 160px diameter (matches Round 3 mobile sizing). */
  /* Mobile: 180 (image) + 2*10 (padding) + 2*2 (border) = 204 — keeps inner portrait 180x180. */
  .founder-slot__photo {
    max-width: 204px;
  }
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.btn--primary {
  background-color: var(--color-navy);
  color: var(--color-ivory);
  border-color: var(--color-navy);
}

.btn--primary:hover {
  background-color: var(--color-teal-hover); /* one-step teal lift from --color-navy; hsl ~194° in teal-band */
  color: var(--color-paper-white);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
  background-color: #04101a;
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.btn--secondary:hover {
  background-color: var(--color-paper-white);
  color: var(--color-navy);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn--secondary:active {
  transform: translateY(0);
}

.section--navy .btn--primary {
  background-color: var(--color-teal);
  color: var(--color-navy);
  border-color: var(--color-teal);
}

.section--navy .btn--primary:hover {
  background-color: #5cb0b3;
  color: var(--color-navy);
}

.section--navy .btn--secondary {
  background-color: transparent;
  color: var(--color-paper-white);
  border-color: var(--color-paper-white);
}

.section--navy .btn--secondary:hover {
  background-color: rgba(200, 238, 234, 0.08);
  color: var(--color-paper-white);
}

/* a11y (carried from step-001 round-3c-fix): .contact-card sits inside .section--navy but the card itself is ivory. The rule above would set ivory text on transparent bg, which inside the card becomes ivory-on-ivory ≈ 1.05:1 FAIL. Override so the "Call Edgar directly" link inside the card uses navy. Class name .section--navy preserved from step-001 for diff stability; see audit/round_3c_fix.md and audit/round_3e_full_palette_overhaul.md. */
.contact-card .btn--secondary {
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.contact-card .btn--secondary:hover {
  color: var(--color-navy);
  background-color: rgba(7, 24, 39, 0.04);
  border-color: var(--color-navy);
}

.inline-cta {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   8. Capability / step / application / differentiator lists
   -------------------------------------------------------------------------- */
.modules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .modules {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

@media (min-width: 1280px) {
  .modules {
    grid-template-columns: repeat(3, 1fr);
  }
}

.module {
  /* R9: card-look restored on top of accordion.
     Visual chrome (ivory BG, 1px border, radius, padding --space-3) matches
     the bff9e865 (Round 8) card-look. The accordion (body hidden, plus-button
     right via ::after) is kept — see .module__details / .module__summary below.
     align-self: stretch (which existed pre-R9) is intentionally NOT restored:
     in the collapse-default state, an opened card would inflate every closed
     card to its height, leaving empty giants. start keeps each card at its
     natural height; the "luftig" character comes from BG + radius + padding. */
  background-color: var(--color-ivory);
  border: 1px solid rgba(7, 24, 39, 0.06);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  align-self: start;
}

.module__details {
  /* Native <details>: browser handles aria-expanded, keyboard, focus.
     Path A in the ground-check analysis (no JS, progressive enhancement). */
}

.module__summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  outline: none;
}

.module__summary::-webkit-details-marker {
  display: none;
}

.module__summary::marker {
  content: "";
}

.module__summary:focus-visible {
  outline: 2px solid var(--color-teal-hover);
  outline-offset: 4px;
  border-radius: 4px;
}

/* + / - toggle indicator, right-aligned. Switches glyph on [open]. */
.module__summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  color: var(--color-slate);
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--t-fast) var(--ease);
}

.module__details[open] .module__summary::after {
  content: "\2212"; /* minus sign — matches visual weight of "+" */
}

.module__summary:hover::after {
  color: var(--color-navy);
}

.module__summary-text {
  /* R11: stack step-index above step-title (Path A — wrapper + flex-column).
     The wrapper sits between .module__summary and its ::after (+/- button);
     flex: 1 makes it consume all horizontal space minus the toggle button. */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--space-1);
}

/* .module__index rule removed in Round 11.2 (finetuning master edi 2026-09-25):
   the "LEISTUNG 0x" / "CAPABILITY 0x" spans it styled were dropped from both
   /de/ and /en/. No other markup references .module__index. The historical
   FA-001 a11y reasoning it carried (teal-on-ivory contrast ratio) still
   applies elsewhere via .step__index / .applications-list__qualifier and is
   documented in audit/round_3c_fix.md. */

.module__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  margin-bottom: 0;
  line-height: var(--lh-snug);
  flex: 1;
}

/* Smooth height collapse/expand via grid-template-rows 0fr -> 1fr.
   Well-supported in modern browsers (2024+); older browsers fall back to
   instant toggle. Global prefers-reduced-motion rule already neutralises
   the transition for users who request reduced motion. */
.module__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease);
}

.module__details[open] .module__panel {
  grid-template-rows: 1fr;
}

.module__panel > * {
  overflow: hidden;
  min-height: 0;
}

.module__body {
  margin: 0;
  padding-top: var(--space-2);
  max-width: 42rem; /* ~672px — keeps description narrow inside grid cell (spec). */
  color: var(--color-slate);
  font-size: 1rem;
  line-height: 1.6;
}
/* --------------------------------------------------------------------------
   8b. Applications — Round 9 list+collapse (2026-09-11)
   Transfer from beastald_website_testpolygon (Round 9, 2026-09-11, source
   testpolygon's inline CSS). Replaces the former B.4.c .use-case editorial
   rows with a list+collapse layout:
   - 3 use-cases, default collapsed (aria-expanded="false" in HTML).
   - Title + lead row, +/− toggle button at right; click expands detail.
   - Max-1-open accordion (single-open) — handler in scripts/main.js.
   - 4 stages per use-case (Trigger / Flow + system action / Outcome /
     Exception) shown in a 2-column dt | dd grid inside the detail panel.
   - Section padding + BG follow the existing .section rhythm
     (--space-6 / --space-7) but live on .applications-list-section so the
     generic .section--paper rule stays untouched (still used by founder,
     capabilities, impressum, datenschutz).
   - Reuses cyan's design tokens (--color-paper-white, --color-navy,
     --color-slate, --color-teal, --color-teal-hover, --font-sans,
     --font-mono, --fs-h2, --fs-h3, --fs-h4, --fs-eyebrow, --fs-small,
     --fw-medium, --fw-semibold, --radius-md, --space-*, --t-fast,
     --ease). No new tokens introduced.
   - Old .use-case / .use-case__intro / .use-case__title / .use-case__lead /
     .use-cases / .applications__qualifier rules have been removed (now
     orphaned). .use-case__stages / .use-case__stage / .use-case__stage dt
     / .use-case__stage dd survive ONLY inside .applications-list__detail
     (scoped overrides below) — the unscoped versions are gone.
   -------------------------------------------------------------------------- */

.applications-list-section {
  background-color: var(--color-paper-white);
  padding-block: var(--space-6);
}

@media (min-width: 768px) {
  .applications-list-section {
    padding-block: var(--space-7);
  }
}

.applications-list-head {
  max-width: 56rem;
  margin-bottom: var(--space-5);
}

.applications-list-head .eyebrow {
  display: inline-block;
  margin-bottom: var(--space-2);
}

.applications-list-heading {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--color-navy);
  margin: 0 0 var(--space-3) 0;
}

.applications-list-lead {
  color: var(--color-slate);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 48rem;
  margin: 0 0 var(--space-3) 0;
}

.applications-list-qualifier {
  font-family: var(--font-mono);
  /* Round 13 (trio_805, 2026-10-08): Qualifier per Master Edi "ein kleines bisschen größer":
     --fs-small (0.875rem/14px) -> 0.9375rem (15px). In-between value already established
     in this file (.use-case__stage dd, .header-cta). Mono family + navy color unchanged. */
  font-size: 0.9375rem;
  /* Round 9.1 readability lift: navy on paper-white (~17:1, WCAG AAA) was
     previously slate. Same lift as the testpolygon's standalone variant. */
  color: var(--color-navy);
  margin: 0 0 var(--space-4) 0;
  padding: 0;
}

.applications-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.applications-list__item {
  display: grid;
  /* mobile: 2 cols (title + toggle), lead spans full width below */
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-4);
}

@media (min-width: 768px) {
  .applications-list__item {
    /* desktop: 3 cols (title | lead | toggle), detail spans full width */
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-4);
    align-items: start;
  }
}

.applications-list__title {
  grid-row: 1;
  grid-column: 1;
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  margin: 0;
  line-height: 1.3;
  /* Round 9.1: cyan-style teal left-stripe (2px) + matching left-padding
     on the use-case intro. Mirrors the old B.4.c .use-case__intro exactly.
     On desktop lead sits in a separate column so only the title carries
     the stripe; on mobile title+lead stack in column 1 and the lead
     mirrors this padding via .applications-list__lead to keep the intro
     visually grouped. */
  border-left: 2px solid var(--color-teal);
  padding-left: var(--space-2);
}

.applications-list__lead {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-slate);
  margin: 0;
  /* Round 9.1: mirror title's left-padding on mobile so the lead text
     aligns with the title text (both indented from the teal stripe).
     Reset on desktop where lead moves to its own grid column. */
  padding-left: var(--space-2);
}

.applications-list__toggle {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  align-self: start;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid rgba(7, 24, 39, 0.20);
  border-radius: 999px;
  /* WCAG 2.5.5: tap target ≥44×44 px. Testpolygon ships 36×36 (2.25rem)
     for tighter visual rhythm; cyan (live) takes the accessibility-favored
     44×44 (2.75rem) per VSA F5. */
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  color: var(--color-navy);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}

.applications-list__toggle:hover {
  border-color: var(--color-teal);
  background-color: rgba(6, 182, 212, 0.06);
}

.applications-list__toggle:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
  border-color: var(--color-teal);
}

.applications-list__toggle-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
  line-height: 1;
}

.applications-list__toggle[aria-expanded="false"] .applications-list__toggle-icon::before {
  content: "+";
}

.applications-list__toggle[aria-expanded="true"] .applications-list__toggle-icon::before {
  content: "\2212"; /* minus sign — matches visual weight of "+" */
}

@media (min-width: 768px) {
  .applications-list__title {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-h3);
  }
  .applications-list__lead {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
  }
  .applications-list__toggle {
    grid-column: 3;
    grid-row: 1;
  }
}

.applications-list__detail {
  grid-row: 3;
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 280ms var(--ease);
}

.applications-list__toggle[aria-expanded="true"] ~ .applications-list__detail {
  max-height: 1200px;
}

.applications-list__detail-inner {
  padding-block: var(--space-3) var(--space-4);
}

@media (min-width: 768px) {
  .applications-list__detail-inner {
    /* indent detail under the title column for visual hierarchy */
    padding-left: calc(16rem + var(--space-5));
    padding-right: 2.25rem;
  }
}

/* Override the former B.4.c .use-case__stages / .use-case__stage visuals so
   they read as a clean dt | dd grid inside the accordion detail (instead of
   the standalone editorial rows). Scoped under .applications-list__detail so
   no other section is affected. */
.applications-list__detail .use-case__stages {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .applications-list__detail .use-case__stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-5);
    max-width: 56rem;
  }
}

.applications-list__detail .use-case__stage {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  border-top: 0;
}

.applications-list__detail .use-case__stage dt {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0;
  padding-top: 0.2rem;
}

.applications-list__detail .use-case__stage dd {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-slate);
  margin: 0;
}

.applications-list-cta {
  margin-top: var(--space-5);
}

/* End Round 9 — Applications list+collapse */
/* --------------------------------------------------------------------------
   9. Process (numbered steps)
   -------------------------------------------------------------------------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step {
  background-color: var(--color-ivory);
  border: 1px solid rgba(7, 24, 39, 0.06);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  position: relative;
  /* Round 11.2 (finetuning master edi 2026-09-25): card-hover-lift extension
     on the "So arbeiten wir" / #process section. Mirrors the existing
     .glass-card hover affordance (translateY(-2px) + shadow lift + slightly
     stronger border) — the user wanted the .step cards to feel as
     interactive as the .glass-card utility, without changing the static
     layout or colour palette. Transition timing follows the .glass-card
     pattern (--t-base / --ease) so the lift is consistent across cards.
     Scoped to #process so the slim .step--quickstart strip (used by the
     3-step near-hero #quickstart section) keeps its flat chrome — the
     quickstart strip is meant as a quiet anchor, not a hover-driven card. */
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

#process .step:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: rgba(7, 24, 39, 0.12);
}

/* Round 14 (trio_807, 2026-10-08): Umrandung auf der ERSTEN Karte der
   "So arbeiten wir"-Section (#process, die Arbeitsschritte-Karten SCHRITT 01-04).
   Farbe = var(--color-teal) #439A9D — exakt derselbe Akzentton wie .why-card--featured
   in der Why-Beastald-Section (Master-Edi-Wunsch R14: "genau die gleiche Farbe wie in
   der Why-Beastald-Section"). Beide Karten liegen auf section--ivory (#F3EFE7) —
   identisches Farb-/Kontrast-Setting wie der etablierte Why-Card-Prezedenzfall
   (non-text ~2.9:1, dekorative Border, redundant zur Karten-Headline; gleiche
   Behandlung wie .why-card--featured).
   Muster folgt .why-card--featured: 2px Border + 1px Padding-Kompensation, damit der
   Karten-Inhalt nicht um 1px springt. Nur die erste Karte; alle anderen behalten die
   1px-Hairline. Specificity (1,3,0) > #process .step:hover (1,2,0), damit der Akzentton
   auch im Hover-Zustand sichtbar bleibt (Shadow-Lift + translateY laufen weiter). */
#process .steps .step:first-child {
  border: 2px solid var(--color-teal);
  padding: calc(var(--space-3) - 1px);
}

.step__index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  color: var(--color-slate); /* FA-001 a11y (same root cause as .module__index, missed by brief scope): teal on ivory = 6.55:1 (was 3.17:1 with teal). See audit/round_3c_fix.md. */
  margin-bottom: var(--space-1);
}

.step__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}

.step__body {
  margin: 0;
  color: var(--color-slate);
  font-size: 1rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   9b. Quickstart (Round 6 — Top-3 Sales Quick-Win: 3-Step Near-Hero Process)
   Slim near-hero anchor visually distinct from the deep-dive #process section.
   Reuses .steps/.step__* tokens — Type-Scale 1.250 + original palette preserved.
   3-column on desktop, 3-column from tablet up, stacked on mobile.
   Subtle dividers (left border per step in teal) signal the chain without
   adding card chrome that would compete with the existing #process cards.
   --------------------------------------------------------------------------
*/
.quickstart.section--paper {
  /* step024: gradient-cutoff — make the section transparent so the body's
     3-layer gradient (--bg-page) shows through. The gradient now runs from
     hero → quickstart and stops at #capabilities (which keeps its solid
     .section--paper background). */
  background-color: transparent;
  padding-block: var(--space-5);
}

@media (min-width: 768px) {
  .quickstart.section--paper {
    background-color: transparent;
    padding-block: var(--space-6);
  }
}

/* R6-CSS-001: Force 3 columns on tablet+ for the quickstart strip (overrides the
   existing .steps 2-col @768 → 4-col @1280 grid inherited from the deep-dive
   #process). 1-col on mobile, 3-col from tablet up. Slim 1-step-per-column strip. */
.steps--quickstart {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .steps--quickstart {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

.step--quickstart {
  background-color: transparent;
  border: 0;
  border-left: 2px solid var(--color-teal);
  border-radius: 0;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  /* override the existing .step bottom-border / box-shadow that comes from .glass-card (if any) */
  position: static;
}

@media (min-width: 768px) {
  .step--quickstart {
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  }
}

.step__title--quickstart {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}

/* R6-CSS-002: trust-line--microcopy = the new Quick-Win microcopy as 4th trust-line.
   Slightly stronger typographic weight to mark it as the key trust signal,
   but still in the IBM Plex Mono / small body family. */
.trust-line--microcopy {
  font-weight: var(--fw-medium);
  color: var(--color-navy);
}

.trust-line--microcopy::before {
  background-color: var(--color-teal-hover);  /* R6-FIX: teal #439A9D = 2.88:1 FAIL on ivory; teal-hover #2F7A7D = 4.36:1 PASS (≥3:1 AA-large for non-text/UI). */
}

/* --------------------------------------------------------------------------
   10. Why-Beastald: differentiators + trust lines
   -------------------------------------------------------------------------- */
/* R1-CGPT-001: reset ol default counter to match .modules/.steps/.trust-lines (Round 1 fix, see audit/round_1_review_fixes.md) */
.differentiators {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .differentiators {
    grid-template-columns: repeat(3, 1fr);
  }
}

.differentiator {
  border-left: 2px solid var(--color-teal);
  padding-left: var(--space-2);
}

.differentiator__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}

.differentiator__body {
  margin: 0;
  color: var(--color-slate);
  line-height: 1.6;
}

.trust-lines {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .trust-lines {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trust-line {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-slate);
}

.trust-line::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55rem;
  border-radius: 50%;
  background-color: var(--color-teal-hover);  /* R7-FIX: copper #C58A5C = 2.56:1 FAIL on ivory; teal-hover #2F7A7D = 4.36:1 PASS (>=3:1 AA non-text/UI). Matches .trust-line--microcopy::before from R6. */
}

.trust-line--no-dot::before {
  display: none;
}

/* --------------------------------------------------------------------------
   11. Contact block
   -------------------------------------------------------------------------- */
.contact-card {
  background-color: var(--color-ivory);
  border: 1px solid rgba(7, 24, 39, 0.06);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  color: var(--color-navy); /* a11y: contact-card is ivory inside a navy section; override inherited ivory from .section--color-navy so text inside card reads. See audit/round_3c_fix.md. */
}

@media (min-width: 768px) {
  .contact-card {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-4);
  }
}

.contact-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-card__details p {
  margin: 0;
}

/* Round 11.1 — Kontakt-Section vertikale Ausrichtung (scoped to .contact-card).
   On desktop, .contact-card is a 2-column grid with .contact-card__details on the
   left (2 stacked <p>) and .contact-card__actions on the right. The right column
   inherits .cta-row's `display: flex; flex-wrap: wrap` so the two <a> children
   lay out horizontally — which makes E-Mail-Button and Telefon-Button end up on
   a single shared row, leaving the Telefon-<p> without a horizontal partner.
   Override flex-direction to column so the two buttons stack vertically; each
   button then sits on the same horizontal axis as its corresponding <p>.
   - align-items: flex-start keeps the natural-width buttons aligned to the
     column's left edge (matches the <p> text alignment on the left column).
   - margin-top: 0 neutralizes .cta-row's top margin; the parent .contact-card
     grid `gap` already provides the vertical spacing between the two columns.
   Other .cta-row usages (hero/inline/process/applications) are untouched. */
.contact-card__actions {
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
}

.contact-card__email,
.contact-card__phone,
.contact-card__phone-link {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  color: var(--color-navy);
  text-decoration: none;
  word-break: break-word;
}

/* FA-001 a11y: .section--navy a (specificity 0,1,1) was beating .contact-card__email (0,1,0) and forcing old-teal text on the ivory contact card (3.17:1 FAIL). Bump specificity so the email renders navy (12.67:1 PASS). See audit/round_3c_fix.md. */
/* R3-M3-001 (audit history): cover .contact-card__phone-link so the B.3.f phone detail link inherits navy + IBM Plex Mono from the same selector group. The step-001 teal accent on ivory measured ~3.17:1 (fails WCAG AA 4.5:1) and mismatched the navy email link above. Same specificity bump applied — navy on ivory = 12.67:1 PASS. See audit/round_3_review_fixes.md. */
.section--navy .contact-card__email,
.section--navy .contact-card__phone-link {
  color: var(--color-navy);
}

.contact-card__email:hover,
.contact-card__phone:hover,
.contact-card__phone-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-teal);
  /* The contact card sits inside .section--navy (dark bg) but has an ivory background.
     Without this, .section--navy a:hover turns the link text ivory on ivory -> invisible.
     Keep navy on hover so the text remains readable on the ivory card. */
  color: var(--color-navy);
}

.contact-card__support {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-paper-white); /* a11y: this element sits in the navy contact section (bg #0A2533), not inside .contact-card. teal on navy would fail; ivory on navy = 11.2:1 PASS. See audit/round_3c_fix.md. */
}

.placeholder-token {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--color-slate);
  background-color: rgba(86, 97, 107, 0.08);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   12. Sticky mobile CTA bar
   -------------------------------------------------------------------------- */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background-color: var(--color-navy);
  padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom, 0));
  border-top: 1px solid rgba(243, 239, 231, 0.12);
  transform: translateY(0);
  transition: transform var(--t-base) var(--ease);
}

.mobile-sticky-bar[data-visible="false"] {
  transform: translateY(110%);
}

/* STICKY-CSS-POLISH: mobile sticky CTA bar visible-state CSS (Round 3 fix). See audit/round_3_sticky_css_polish.md */
.mobile-sticky-bar[data-visible="true"] {
  display: block;
}

.mobile-sticky-bar .btn {
  width: 100%;
  background-color: var(--color-teal);
  color: var(--color-navy);
  border-color: var(--color-teal);
}

.mobile-sticky-bar .btn:hover {
  background-color: #5cb0b3;
  color: var(--color-navy);
  text-decoration: none;
}

/* Only show sticky bar on viewports small enough to need it */
@media (max-width: 767px) {
  body.has-sticky-bar {
    padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0));
  }
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-4);
  background-color: var(--color-paper-white);
  border-top: 1px solid rgba(7, 24, 39, 0.06);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-slate);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-5);
    align-items: start;
  }
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer__col--left {
  border-right: 0;
}

@media (min-width: 768px) {
  .footer__col--left {
    border-right: 1px solid rgba(7, 24, 39, 0.08);
    padding-right: var(--space-4);
  }
}

.footer__brand {
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  letter-spacing: 0.04em;
}

.footer__copy {
  margin: 0;
  color: var(--color-slate);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.footer__legal a {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

.footer__name {
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
}

.footer__location {
  margin: 0;
  color: var(--color-slate);
}

.footer__blurb {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--color-slate);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.55;
  max-width: 32rem;
}

.footer__contact {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--color-slate);
}

.footer__contact a {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-navy);
  display: inline-block;
  min-height: 44px;
  padding-block: 0.5rem;
  text-decoration: underline;
  text-decoration-color: transparent;
}

.site-footer a {
  color: var(--color-slate);
  text-decoration: underline;
  text-decoration-color: transparent;
}

.site-footer a:hover {
  text-decoration-color: var(--color-teal);
  color: var(--color-navy);
}

/* B.4.d: Footer 2-column layout + founder/location, see audit/b4d_footer_company.md */

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

  .mobile-sticky-bar {
    transition: none;
  }
}

/* Smooth scroll only when explicitly enabled by JS and motion is allowed */
html.js-smooth-scroll {
  scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   15. Utility
   -------------------------------------------------------------------------- */
.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;
}

/* R3-CGPT-001: skip link becomes visible on keyboard focus (Round 3 fix, WCAG 2.4.7 Focus Visible). See audit/round_3_review_fixes_chatgpt.md */
.visually-hidden:focus,
.visually-hidden:focus-visible {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  margin: 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
  background-color: var(--color-navy);
  color: var(--color-ivory);
  text-decoration: underline;
  border-radius: var(--radius-sm);
}
/* --------------------------------------------------------------------------
   B.4.a: Impressum + Datenschutzhinweis styling, see audit/b4a_impressum_meta_privacy.md
   Uses existing .container + .section + .section--ivory / .section--paper patterns;
   compact, navy-on-ivory (step-001 baseline reused), mono labels for legal metadata. No new color tokens for step-002
   no design-language changes, no animations.
   -------------------------------------------------------------------------- */
.impressum-section__inner,
.datenschutz-section__inner {
  max-width: 42rem;
}

.impressum-section h2,
.datenschutz-section h2 {
  margin-bottom: var(--space-2);
}

.impressum-section__lead {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: var(--space-3);
}

.impressum-section p {
  margin: 0 0 var(--space-2);
  max-width: 38rem;
  line-height: 1.6;
}

.impressum-section address {
  font-style: normal;
  margin: 0 0 var(--space-3);
  line-height: 1.6;
  color: var(--color-navy);
}

.impressum-section a {
  color: var(--color-navy);
}

.impressum-section a:hover {
  text-decoration-color: var(--color-teal);
  color: var(--color-navy);
}

.datenschutz-section p {
  margin: 0 0 var(--space-2);
  max-width: 42rem;
  line-height: 1.6;
  color: var(--color-slate);
}

.datenschutz-section__stand {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-slate);
  margin-top: var(--space-3);
}

/* End B.4.a styling block */

/* B.4.c audit pointer: see audit/b4c_hero_applications.md */
/* Step-002 note: TEST VARIANT banner removed per Master Edi directive (2026-09-01). The T.1 strip, --test-banner-h token, and body/site-header banner-offset overrides have all been removed. See audit/round_3e_full_palette_overhaul.md. */

/* --------------------------------------------------------------------------
   16. Glass card utility (Round 3 — transferable from Crushio, applied sparingly to cards only)
   Subtle elevation on cards (module, step, use-case, differentiator).
   Subtle hover transform + shadow lift.
   NOTE: rgba(252,250,246) is nearly opaque on paper-white/ivory bg → the blur effect is barely perceptible.
         We keep it for visual layering and future-proofing if background colors change.
   --------------------------------------------------------------------------
*/
.glass-card {
  background: var(--card-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(7, 24, 39, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

.glass-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: rgba(7, 24, 39, 0.12);
}

/* --------------------------------------------------------------------------
   17. Scroll-reveal (Round 3 — transferable from Crushio)
   Sections with class="reveal" start invisible and slide up when 16%+ visible.
   - IntersectionObserver-driven (see scripts/main.js)
   - prefers-reduced-motion override skips the animation
   - noscript fallback in <head> of index.html makes reveal content visible if JS is disabled
   --------------------------------------------------------------------------
*/
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   18. Hero transparent + ambient-blur utility (Round 4 — Crushio DNA transfer)
   - .hero overrides .section--ivory so the body's 3-layer gradient shows through the hero.
   - .ambient-blur applied to #hero creates the two Crushio soft-blur circles (lagoon top-right + coral bottom-left)
     fixed-positioned behind the hero content but in front of the body background.
   - z-index: -1 inside an isolated parent stacking context keeps the blur behind text/buttons.
   - prefers-reduced-motion already neutralizes all transitions, but the blur itself is a static decoration
     (no animation); no additional reduced-motion guard needed.
   -------------------------------------------------------------------------- */
.hero,
.hero.section--ivory {
  background: transparent;
}

.ambient-blur {
  position: relative;
  isolation: isolate;
}

.ambient-blur::before,
.ambient-blur::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

.ambient-blur::before {
  top: 6rem;
  right: -6rem;
  width: 22rem;
  height: 22rem;
  background: rgba(47, 139, 146, 0.18);  /* lagoon */
}

.ambient-blur::after {
  bottom: 10rem;
  left: -7rem;
  width: 20rem;
  height: 20rem;
  background: rgba(220, 141, 117, 0.18);  /* coral */
}

/* On viewports too small for the 22rem circles, shrink so they stay decorative without dominating the fold. */
@media (max-width: 767px) {
  .ambient-blur::before {
    top: 4rem;
    right: -8rem;
    width: 16rem;
    height: 16rem;
  }
  .ambient-blur::after {
    bottom: 6rem;
    left: -8rem;
    width: 14rem;
    height: 14rem;
  }
}

/* --------------------------------------------------------------------------
   18. Section renumbering pointer
   Round 3 removed:
   - Section 14 (Concept B arch-svg CSS) — Hero now Mix B+C, no SVG diagram.
   - Section 15 (Founder slot CSS) — Founder moved into Hero, separate section removed.
   --------------------------------------------------------------------------
*/
/* --------------------------------------------------------------------------
   19. Language switcher + root picker (Step-003 DE/EN Foundation)
   - Plain text "DE · EN" switcher in /de/ and /en/ headers.
   - Lightweight root picker styling for the thin "/" entry page.
   No flag icons, no library: text-only, current language visually distinct.
   --------------------------------------------------------------------------
*/
/* R7: lang-switcher — sans-serif, smaller, pipe separator. */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-fg);
  white-space: nowrap;
  /* step024: anchor for the ::before divider line; line sits left of the switcher. */
  position: relative;
}

/* step024: thin grey vertical hairline between .site-nav and .lang-switcher.
   height:60% (not full header height) + same top/bottom padding → fühlt sich
   leicht an, nicht hart trennend. Hamburger breakpoint → display:none (nicht im Burger). */
.lang-switcher::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-2));
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: rgba(7, 24, 39, 0.20);
}

@media (max-width: 959px) {
  .lang-switcher::before {
    display: none;
  }
}

.lang-switcher a {
  color: inherit;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.lang-switcher a:hover,
.lang-switcher a:focus-visible {
  color: var(--c-accent);
  outline: none;
}

.lang-switcher a.lang-switcher__active,
.lang-switcher a[aria-current="true"] {
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.lang-switcher span[aria-hidden="true"] {
  color: var(--c-fg-muted);
  opacity: 0.45;
  font-weight: var(--fw-regular);
}

/* Header slot placement: R8 — .lang-switcher stays inline in .site-header__inner at all viewports ≥960 (sits right of the nav). Below 960 (hamburger breakpoint) it stays inline as well, with the smaller CTA and menu-toggle to its right. The margin-right is preserved so the menu-toggle has breathing room. */
.site-header__inner .lang-switcher {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

/* R8: .mobile-menu__lang removed — DE · EN moved into .site-header__inner inline row at the 960px hamburger breakpoint (R9: lowered from 1100). The redundant mobile-menu__lang list row would duplicate the switcher and was deleted. */

/* Root picker page (/): two big cards, calm typography, single-column. */
.lang-picker {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-picker__inner {
  text-align: center;
  max-width: 36rem;
}

.lang-picker__lead {
  margin-bottom: var(--space-5);
}

.lang-picker__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.lang-picker__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-4);
  border: 1px solid var(--c-fg-muted);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.lang-picker__card:hover,
.lang-picker__card:focus-visible {
  border-color: var(--c-accent);
  background: var(--c-paper);
  outline: none;
}

.lang-picker__lang {
  font-size: 1.5rem;
  font-weight: 600;
  font-family: var(--font-display);
}

.lang-picker__sub {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--c-fg-muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}/* --------------------------------------------------------------------------
   Lang switcher CSS variables (alias layer, kept for readability)
   --------------------------------------------------------------------------
*/
:root {
  --c-fg:          var(--color-navy);
  --c-fg-muted:    var(--color-slate);
  --c-accent:      var(--color-teal);
  --c-paper:       var(--color-paper-white);
  --font-display:  var(--font-sans);
}
/* --------------------------------------------------------------------------
   20. Why-Beastald 2x2 Card Grid (Round 8 — port from website.tests.beastald.com)

   Scope discipline:
   - 4 cards in fixed order: 01 Prove-it → 02 Understand-first
     → 03 Founder-access → 04 High-quality-systems-for-less-budget.
   - 2x2 grid on >=768px, single column on mobile.
   - Card 01 visually dominant (2px teal border, larger 01 number,
     larger title, h3-bold vs h4-semibold) — strongest commercial argument.
   - Section bg comes from the existing .section--ivory wrapper.
   - Reuses cyan's design tokens (--color-ivory, --color-paper-white,
     --color-navy, --color-slate, --color-teal, --font-sans, --font-mono,
     --fs-h3, --fs-h4, --fw-medium, --fw-semibold, --fw-bold,
     --radius-md, --space-*) — no new tokens introduced.

   Wrapped in <section class="section section--ivory reveal" id="why-beastald">
   so the existing wrapper/section-ID/animation/scroll-margin-top contracts
   are preserved unchanged.

   Heading: id="why-cards-heading" (consumed by aria-labelledby on the section).
   -------------------------------------------------------------------------- */

.why-cards-head {
  max-width: 56rem;
  margin-bottom: var(--space-5);
}

.why-cards-head .eyebrow {
  display: inline-block;
  margin-bottom: var(--space-2);
}

.why-cards-heading {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--color-navy);
  margin: 0;
}

.why-cards-heading__accent {
  color: var(--color-teal);
}

.why-cards-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .why-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

.why-card {
  background-color: var(--color-paper-white);
  border: 1px solid rgba(7, 24, 39, 0.10);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--t-fast) var(--ease);
}

.why-card:hover {
  border-color: var(--color-teal);
}

.why-card--featured {
  border: 2px solid var(--color-teal);
  /* preserve inner box from growing by 1px due to thicker border */
  padding: calc(var(--space-4) - 1px);
}

.why-card__index {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  line-height: 1;
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  color: var(--color-teal);
}

@media (min-width: 768px) {
  .why-card__index {
    font-size: 2.75rem;
  }
}

.why-card--featured .why-card__index {
  font-size: 3.25rem;
  color: var(--color-teal);
}

@media (min-width: 768px) {
  .why-card--featured .why-card__index {
    font-size: 3.5rem;
  }
}

.why-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  margin: 0;
  line-height: 1.25;
}

.why-card--featured .why-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

.why-card__body {
  margin: 0;
  color: var(--color-slate);
  font-size: 1rem;
  line-height: 1.55;
  /* cap visual height: each card body sits in ~3 lines on desktop */
  max-width: 38ch;
}

/* End Round 8 — Why-Beastald 2x2 Card Grid */

/* ============================================================ */
/* step025: contact section import from k.html — variant-page-only CSS */
/* does NOT touch shared styles for other sections. */
/* ============================================================ */
    /* ============================================================
       Variante G — Variante G — Quote-Dominanz roomy
       Anti-Hype-Zitat + Präambel + Kontakt (Porträt links, Zitat rechts).
       variant-page-only CSS — does NOT touch shared.css.
       Axis: font-size=var(--fs-h3), gap portrait↔quote=3.5rem, quote max-width=38rem.
       Tokens (--color-*, --fs-*, --fw-*, --space-*, --radius-*) from shared.css.
       ============================================================ */
    .section--contact-k {
      /* Edit A (lightning_026): hero/contact gradient parity.
         The section becomes transparent so the body's --bg-page 3-layer
         gradient (already used by #hero via inheritance) shows through.
         Single source of truth: --bg-page on body. Matches #hero, which
         is also `background: transparent`. */
      background: transparent;
      color: var(--color-navy);
    }
    .section--contact-k :is(h1, h2, h3, h4) {
      color: var(--color-navy);
    }
    .section--contact-k a {
      color: var(--color-navy);
    }
    .section--contact-k a:hover {
      color: var(--color-teal-hover);
    }
    .section--contact-k .eyebrow {
      color: var(--color-slate);
    }

    /* Section-Heading — visuell kleiner/dezenter als das Zitat, damit das
       Anti-Hype-Zitat der dominante Blickfang bleibt (User-Vorgabe). */
    /* Desktop: Porträt links + Zitat rechts (2-Spalten-Grid). */
    .section--contact-k .contact-composition {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 3.5rem;
      align-items: center;
      margin-block: var(--space-5);
    }
    .section--contact-k .contact-composition__portrait {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .section--contact-k .contact-composition__portrait img {
      display: block;
      width: 175px;
      height: 175px;
      object-fit: cover;
      object-position: center top;
      border-radius: var(--radius-md);
      border: none;
      background-color: transparent;
    }

    /* Quote-Block: zentrale Texteinheit rechts neben dem Porträt. */
    .section--contact-k .contact-composition__quote-wrap {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      max-width: 38rem;
    }
    .section--contact-k .quote {
      margin: 0;
      font-family: var(--font-sans);
      font-size: 1.5rem;                       /* etwas groesser als G's --fs-h3 (=1.375rem) */
      font-weight: var(--fw-medium);
      line-height: 1.35;
      color: var(--color-navy);
      border-left: 2px solid var(--color-teal);
      padding-left: var(--space-2);
      max-width: 38rem;                        /* G's Roomy-Atemraum bleibt erhalten */
    }
    .section--contact-k .quote p {
      margin: 0;                                /* KEIN Extra-Abstand innerhalb Quote (Single-Paragraph) */
    }
    .section--contact-k .quote .break-l {
      display: none;                            /* Mobile: kein erzwungener Umbruch */
    }
    @media (min-width: 768px) {
      .section--contact-k .quote .break-l {
        display: inline;                        /* Desktop/Laptop: erzwungener Umbruch vor zweitem "Wir" */
      }
    }

    .section--contact-k .quote-attribution {
      margin: var(--space-2) 0 0 0;
      font-family: var(--font-mono);
      font-size: var(--fs-small);
      color: var(--color-slate);
      letter-spacing: 0.04em;
      line-height: 1.3;
    }
    .section--contact-k .quote-attribution strong {
      color: var(--color-navy);
      font-weight: var(--fw-bold);
    }

    /* Präambel unterhalb der Porträt-Zitat-Einheit, eng am Kontaktblock. */
    .section--contact-k .contact-preamble {
      max-width: 38rem;
      font-size: 1.0625rem;
      line-height: 1.55;
      color: var(--color-navy);
      margin: 0 0 var(--space-4) 0;
    }

    /* Kontaktcard — bestehende Styles (Buttons, Mailto/Tel, E-Mail/Telefon-Display). */
    .section--contact-k .contact-card {
      margin-top: var(--space-3);
    }
    .section--contact-k .btn--contact-g,
    .section--contact-k a.btn--contact-g {
      background-color: var(--color-navy);
      color: var(--color-ivory);
      border-color: var(--color-navy);
    }
    .section--contact-k .btn--contact-g:hover,
    .section--contact-k a.btn--contact-g:hover {
      background-color: var(--color-teal-hover);
      color: var(--color-paper-white);
    }

    /* Mobile (≤ 767 px): gestapelte Spalte mit fester CSS-Order.
       Reihenfolge: Porträt → Zitat → Name+Rolle → Präambel → Kontakt.
       Wichtig: Präambel und Kontaktcard sind direkte Geschwister der
       contact-composition in derselben container — sie erhalten
       höhere order-Werte als 0 (die Composition-Defaults), damit sie
       nach der Composition gestapelt werden. */
    @media (max-width: 767px) {
      .section--contact-k .contact-composition {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        margin-block: var(--space-4);
      }
      .section--contact-k .contact-composition__portrait {
        order: 0;
        align-items: flex-start;
        text-align: left;
      }
      .section--contact-k .contact-composition__portrait img {
        width: 110px;
        height: 110px;
      }
      .section--contact-k .contact-composition__quote-wrap {
        order: 1;
        max-width: 100%;
      }
      .section--contact-k .quote-attribution {
        order: 2;
      }
      .section--contact-k .contact-preamble {
        order: 3;
        max-width: 100%;
      }
      .section--contact-k .contact-card {
        order: 4;
      }
    }

    /* ------------------------------------------------------------
       Process section ("How we work") — gradient bg matching Contact.
       Overrides the generic .section--ivory solid #F3EFE7 so the section
       reads as part of the warm-cream visual rhythm (radials + warm linear
       in the sand band). #process.section--ivory has specificity (1,1,0)
       and beats .section--ivory (0,1,0). Background-color set to
       transparent so the gradient isn't painted over a solid fill.
       ------------------------------------------------------------ */
    #process.section--ivory {
      background-image:
        radial-gradient(circle at 0% 0%, rgba(239, 227, 211, 0.95), transparent 36%),
        radial-gradient(circle at 80% 10%, rgba(47, 139, 146, 0.12), transparent 24%),
        linear-gradient(180deg, #f8f2e9 0%, #f3eadb 60%, #efe3d3 100%);
      background-color: transparent;
      color: var(--color-navy);
    }
    #process.section--ivory :is(h1, h2, h3, h4) {
      color: var(--color-navy);
    }
    #process.section--ivory .eyebrow {
      color: var(--color-slate);
    }

/* ============================================================ */
/* step025: FAQ section import from v1.html — variant-page-only CSS */
/* ============================================================ */
    /* ============================================================
       FAQ Variante V1 — Inline Akkordeon.
       variant-page-only CSS — does NOT touch shared.css.
       Tokens via var(--color-*), var(--space-*), var(--fs-*), var(--radius-*).
       ============================================================ */
    .faq-section--v1 { background-color: var(--color-paper-white); }
    .faq-section--v1 .faq-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
    .faq-section--v1 .faq-item {
      border: 1px solid rgba(7, 24, 39, 0.10);
      border-radius: var(--radius-md);
      background-color: var(--color-ivory);
      overflow: hidden;
    }
    .faq-section--v1 .faq-toggle {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      width: 100%;
      padding: 1rem 1.25rem;
      background: transparent;
      border: 0;
      text-align: left;
      font-family: var(--font-sans);
      font-size: var(--fs-h4);
      color: var(--color-navy);
      cursor: pointer;
    }
    .faq-section--v1 .faq-toggle:hover { color: var(--color-teal-hover); }
    .faq-section--v1 .faq-toggle__icon {
      flex: 0 0 auto;
      width: 24px; height: 24px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--color-teal);
      transition: transform var(--t-fast) var(--ease);
    }
    .faq-section--v1 .faq-toggle__icon::before {
      content: "+";
      font-family: var(--font-mono);
      font-size: 1.25rem;
      line-height: 1;
    }
    .faq-section--v1 .faq-toggle[aria-expanded="true"] .faq-toggle__icon::before { content: "−"; }
    .faq-section--v1 .faq-toggle[aria-expanded="true"] .faq-toggle__icon { transform: rotate(0deg); }
    .faq-section--v1 .faq-panel {
      display: none;
      padding: 0 1.25rem 1.25rem;
      color: var(--color-slate);
      font-size: var(--fs-body);
      line-height: 1.55;
    }
    .faq-section--v1 .faq-toggle[aria-expanded="true"] + .faq-panel { display: block; }
    .faq-section--v1 .faq-item--anti-fit {
      border-left: 3px solid var(--color-teal);
      background-color: var(--color-paper-white);
    }
    .faq-section--v1 .faq-item--anti-fit .faq-toggle__eyebrow {
      font-family: var(--font-mono);
      font-size: var(--fs-eyebrow);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-teal);
      margin-right: 0.75rem;
    }
    @media (max-width: 767px) {
      .faq-section--v1 .faq-toggle { font-size: var(--fs-body); padding: 0.875rem 1rem; }
      .faq-section--v1 .faq-panel { padding: 0 1rem 1rem; }
    }

    /* Round 14 (trio_807, 2026-10-08): FAQ-Antwort mit mehreren Absätzen.
       Das neue R14-Item ("Wann wird die erste Zahlung fällig?" / "When is the
       first payment due?") liefert 2 Antwort-Absätze als <p>. Der generische
       p-Satz (max-width: 38rem) würde die Absätze schmaler umbrechen als die
       Bare-Text-Antworten der Nachbar-Items; diese Scoped-Regel hält Panel-
       breite und Absatzabstand konsistent (volle Panel-Breite, 1x --space-2
       Absatzabstand, kein trailing gap). */
    .faq-section--v1 .faq-panel p {
      max-width: none;
      margin: 0 0 var(--space-2);
    }
    .faq-section--v1 .faq-panel p:last-child {
      margin-bottom: 0;
    }


/* ==========================================================================
   21. Language switcher V3 (lightning_026 — globe + dropdown port)

   Ported from beastald_website_testpolygon/styles/langv-shared.css (V3
   variant, 2026-09-23). Trigger button + menu pattern, dark globe SVG
   (inline SVG honors currentColor), no gray border around the trigger.

   Scope discipline:
   - All rules scoped under .lang-switcher--v3 so the existing .lang-switcher
     pipe-separator markup (which we're replacing) and any future variants
     stay unaffected.
   - The trigger wrapper hairline (.lang-switcher::before from R7 step024)
     is preserved — it sits to the LEFT of the switcher, NOT around the
     trigger button, and is not "the gray border around the globe" the user
     asked to drop. The FAQ→footer hairline is on the footer element
     itself (rgba(7, 24, 39, 0.06)) — also preserved per user constraint.

   A11y:
   - Trigger is a real <button> with aria-expanded/aria-haspopup/aria-controls.
   - Menu is a <ul role="menu"> with <li role="none"><a role="menuitem">.
   - Trigger has a visible label ("Sprache wählen" / "Choose language") via
     .visually-hidden — only the SVG globe is the visual button content.
   - :focus-visible ring on the trigger compensates for the removed border
     (WCAG 2.4.7 Focus Visible).

   Globe color: user said "etwas dunkelfarbiger" → color: var(--color-navy)
   on the trigger. The inline SVG globe uses stroke="currentColor" so it
   inherits this dark navy and reads clearly on the paper-white header bg
   (measured contrast ≈ 18:1, well above WCAG AA non-text 3:1).
   ========================================================================== */
.lang-switcher--v3 .lang-switcher__trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  /* user constraint: "die graue Umrandung am Globus weglassen" → border:none.
     Hover state replaces the border-color cue with a teal-tinted bg tint. */
  border: none;
  border-radius: 999px;
  background-color: rgba(252, 250, 246, 0.7);
  /* user constraint: "den Globus etwas dunkelfarbiger" → color: navy.
     SVG stroke="currentColor" inherits this and renders the globe dark. */
  color: var(--color-navy);
  cursor: pointer;
  /* Force full opacity on the trigger (override .site-header backdrop-filter
     inherited alpha): the V3 trigger sits inside a translucent header bar
     and needs to read crisp at every viewport. */
  opacity: 1;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.lang-switcher--v3 .lang-switcher__trigger:hover {
  background-color: rgba(67, 154, 157, 0.10);
  color: var(--color-teal-hover);
}

.lang-switcher--v3 .lang-switcher__trigger:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

/* Round 11.2 (finetuning master edi 2026-09-25): the previous
   [aria-expanded="true"] rule set background-color to --color-navy on the
   whole trigger, which renders as a near-black disc around the globe when
   the menu opens. Master Edi flagged this as ugly and asked to drop the
   feature entirely. The trigger now stays visually identical whether the
   menu is open or closed; menu open/closed state is communicated purely
   via aria-expanded + the dropdown menu showing/hiding (separate CSS). */
.lang-switcher--v3 .lang-switcher__trigger[aria-expanded="true"] {
  background-color: rgba(252, 250, 246, 0.7);
  color: var(--color-navy);
}

.lang-switcher--v3 .lang-switcher__trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1;
  /* Override the legacy `.lang-switcher span[aria-hidden="true"]` rule
     which set color: var(--c-fg-muted) (=slate) + opacity: 0.45 on every
     aria-hidden span inside the switcher wrapper. That rule was originally
     scoped to the pipe separator (DE · EN) but it also catches the V3
     trigger-icon span (also aria-hidden) and renders the globe dim/slate
     — exactly the "too pale" complaint we're fixing here.
     Legacy rule specificity: (0,2,1) [class+attr+element]. New rule
     specificity: (0,2,0) [class+class]. Legacy wins on specificity, so
     !important is required to override color + opacity together. */
  /* Round 11.2 (finetuning master edi 2026-09-25): Master Edi asked for
     the globe to read as "dunkelblau" rather than the previous near-black
     navy. Use --ocean (#1E3A8A) — a clearly-readable dunkelblau
     blue while staying dark and readable on the paper-white header. */
  color: var(--ocean) !important;
  opacity: 1 !important;
}

.lang-switcher--v3 .lang-switcher__trigger-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lang-switcher--v3 .lang-switcher__trigger-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lang-switcher--v3 .lang-switcher__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 10rem;
  padding: 0.35rem;
  margin: 0;
  list-style: none;
  background-color: var(--color-paper-white);
  border: 1px solid rgba(7, 24, 39, 0.14);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(7, 24, 39, 0.14),
              0 2px 8px rgba(7, 24, 39, 0.06);
  z-index: 50;
  display: none;
}

.lang-switcher--v3 .lang-switcher__trigger[aria-expanded="true"] + .lang-switcher__menu {
  display: block;
}

.lang-switcher--v3 .lang-switcher__menu li {
  margin: 0;
  padding: 0;
}

.lang-switcher--v3 .lang-switcher__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  font-family: var(--font-sans);
  /* override wrapper text-transform: uppercase; menu items render in natural case */
  text-transform: none;
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--color-navy);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.lang-switcher--v3 .lang-switcher__menu a:hover,
.lang-switcher--v3 .lang-switcher__menu a:focus-visible {
  background-color: rgba(67, 154, 157, 0.10);
  color: var(--color-teal-hover);
  outline: none;
}

.lang-switcher--v3 .lang-switcher__menu a.lang-switcher__active,
.lang-switcher--v3 .lang-switcher__menu a[aria-current="true"] {
  background-color: transparent;
  color: var(--color-navy);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.lang-switcher--v3 .lang-switcher__menu a.lang-switcher__active::after,
.lang-switcher--v3 .lang-switcher__menu a[aria-current="true"]::after {
  content: "✓";
  display: inline-block;
  color: var(--color-teal);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  line-height: 1;
}

/* Mobile (≤ 959 px hamburger breakpoint): keep V3 trigger compact
   (40×40) so it fits next to the menu-toggle without squeezing the
   brand subtitle. Mirrors the V3 mobile spec in langv-shared.css. */
@media (max-width: 959px) {
  .lang-switcher--v3 .lang-switcher__trigger {
    min-width: 40px;
    min-height: 40px;
    width: 2rem;
    height: 2rem;
  }
}

/* End Section 21 — Language switcher V3 */