/*
 * Global stylesheet entry point, imported by src/layouts/Base.astro so it applies to every
 * page. Design-system foundation (#3): self-hosted webfonts + the ROON ADVISORY token/base
 * layer, ported from design/design-system/tokens/*.css into src/styles/tokens/ (adapted font
 * URLs to the site's own /fonts/… — zero third-party requests), plus a handful of
 * site-specific additions (layout constants the design-system tokens don't carry, German
 * quote punctuation). See docs/architecture.md "Key components" for the design layer note.
 */
/* ROON ADVISORY — Webfonts (ported from design/design-system/tokens/fonts.css, #3)
   Manrope: primary sans (UI, body, the wordmark itself)
   Crimson Pro: editorial serif (pull quotes, large statements)
   Self-hosted from public/fonts/ — served at /fonts/… — zero third-party font requests. */
/* ---- Manrope ---- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/fonts/manrope-v20-latin-200.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/manrope-v20-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/manrope-v20-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/manrope-v20-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/manrope-v20-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/manrope-v20-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/manrope-v20-latin-800.woff2") format("woff2");
}
/* ---- Crimson Pro ---- */
@font-face {
  font-family: "Crimson Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/crimson-pro-v28-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Pro";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/crimson-pro-v28-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/crimson-pro-v28-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Pro";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/crimson-pro-v28-latin-700italic.woff2") format("woff2");
}
/* ROON ADVISORY — Color tokens
   "Corporate Harmony": Deep Navy (Recht/Seriosität), Signal Orange (Tat/Energie),
   supported by Mist & Iron neutrals. Sober, institutional, warm where it counts.
   Orange is an accent — used with discipline, never as a flood.
   Ported verbatim from design/design-system/tokens/colors.css (#3) — keep in sync if the
   design-system tokens change; the design/ tree itself stays read-only. */
:root {
  /* ---- Brand anchors (exact spec values) ---- */
  --navy: #0a2342;       /* Deep Navy — primary */
  --orange: #ff6b00;     /* Signal Orange — accent */
  --mist: #e2e8f0;       /* light support */
  --iron: #475569;       /* mid support / secondary text */

  /* ---- Navy scale ---- */
  --navy-950: #050f1f;
  --navy-900: #0a2342;   /* = --navy */
  --navy-800: #11305a;
  --navy-700: #1a3f72;
  --navy-600: #28538e;
  --navy-500: #3a6bab;
  --navy-400: #6691c7;
  --navy-300: #9bb7dc;
  --navy-200: #c6d6ec;
  --navy-100: #e4edf7;

  /* ---- Orange scale ---- */
  --orange-700: #c24f00;
  --orange-600: #e85f00;
  --orange-500: #ff6b00;  /* = --orange */
  --orange-400: #ff8a33;
  --orange-300: #ffab66;
  --orange-200: #ffcc99;
  --orange-100: #ffe7cf;
  --orange-50:  #fff4ea;

  /* ---- Neutral / Iron scale (cool, slate-leaning) ---- */
  --ink-900: #0d1726;
  --ink-800: #1e2a3d;
  --iron-700: #334155;
  --iron-600: #475569;    /* = --iron */
  --iron-500: #64748b;
  --iron-400: #94a3b8;
  --iron-300: #cbd5e1;
  --mist-200: #e2e8f0;    /* = --mist */
  --mist-100: #eef2f7;
  --paper:    #f7f9fc;
  --white:    #ffffff;

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-sunken: var(--mist-100);
  --surface-inverse: var(--navy-900);
  --surface-inverse-soft: var(--navy-800);
  --surface-accent-soft: var(--orange-50);

  /* ---- Semantic: text ---- */
  --text-strong: var(--navy-900);
  --text-body: var(--iron-700);
  --text-muted: var(--iron-500);
  --text-faint: var(--iron-400);
  --text-on-navy: #f1f5fb;
  --text-on-navy-muted: var(--navy-300);
  --text-on-orange: #ffffff;
  --text-accent: var(--orange-600);

  /* ---- Semantic: lines & borders ---- */
  --border-subtle: var(--mist-200);
  --border-default: var(--iron-300);
  --border-strong: var(--iron-400);
  --border-on-navy: rgba(255, 255, 255, 0.14);
  --focus-ring: var(--orange-500);

  /* ---- Semantic: status (used sparingly, kept on-brand) ---- */
  --success: #1f8a5b;
  --success-soft: #e3f3ec;
  --warning: #d98a00;
  --warning-soft: #fdf2dc;
  --danger: #c4453d;
  --danger-soft: #fbe9e8;
  --info: var(--navy-600);
  --info-soft: var(--navy-100);

  /* ---- Sovereignty dimensions (ECHT / RECHT / RAT / TAT) ----
     A four-part accent family for the audit framework. */
  --dim-echt: #2a6fdb;    /* Ökonomie — clear blue */
  --dim-recht: #0a2342;   /* Governance — navy */
  --dim-rat: #1f8a5b;     /* Kompetenz — green */
  --dim-tat: #ff6b00;     /* Kultur — signal orange */
}
/* ROON ADVISORY — Typography tokens
   Manrope carries everything functional. Crimson Pro is the editorial voice —
   reserved for large statements, pull quotes and headlines with gravitas.
   Headlines lean tight and confident; the wordmark itself is Manrope 800.
   Ported verbatim from design/design-system/tokens/typography.css (#3) — keep in sync if the
   design-system tokens change; the design/ tree itself stays read-only. */
:root {
  /* ---- Families ---- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Aliases by intent */
  --font-display: var(--font-sans);   /* default display = confident sans */
  --font-editorial: var(--font-serif);/* opt-in serif for quotes & statements */
  --font-body: var(--font-sans);
  --font-ui: var(--font-sans);

  /* ---- Weights ---- */
  --weight-extralight: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;   /* wordmark weight */

  /* ---- Type scale (1.250 major-third-ish, tuned) ---- */
  --text-2xs: 0.6875rem;  /* 11px — legal, labels */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base:1rem;       /* 16px */
  --text-md:  1.125rem;   /* 18px */
  --text-lg:  1.375rem;   /* 22px */
  --text-xl:  1.75rem;    /* 28px */
  --text-2xl: 2.25rem;    /* 36px */
  --text-3xl: 3rem;       /* 48px */
  --text-4xl: 3.75rem;    /* 60px */
  --text-5xl: 4.75rem;    /* 76px */

  /* ---- Line heights ---- */
  --leading-tight: 1.05;
  --leading-snug: 1.18;
  --leading-heading: 1.12;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* ---- Letter spacing ----
     The brand's signature: wide, calm tracking on small caps/eyebrows
     (see the logo claim "KI STRATEGIE & SOUVERÄNITÄT"). */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;   /* eyebrows / claim line */
  --tracking-widest: 0.28em;

  /* ---- Semantic roles ---- */
  --display-weight: var(--weight-extrabold);
  --heading-weight: var(--weight-bold);
  --eyebrow-weight: var(--weight-bold);
}
/* ROON ADVISORY — Spacing, radii, shadows, motion
   Architectural, generous whitespace. Corners are mostly crisp with a
   small consistent softening — institutional, not playful. Shadows are
   cool-tinted (navy), low and diffuse, never heavy drop shadows.
   Ported verbatim from design/design-system/tokens/spacing.css (#3) — keep in sync if the
   design-system tokens change; the design/ tree itself stays read-only. */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */

  /* ---- Radii ---- */
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;     /* default for inputs, buttons */
  --radius-lg: 12px;    /* cards */
  --radius-xl: 18px;    /* large feature panels */
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;
  --rule-accent-width: 3px;  /* the orange "leitplanke" accent rule */

  /* ---- Shadows (navy-tinted, restrained) ---- */
  --shadow-xs: 0 1px 2px rgba(10, 35, 66, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 35, 66, 0.08), 0 1px 2px rgba(10, 35, 66, 0.06);
  --shadow-md: 0 4px 14px rgba(10, 35, 66, 0.08), 0 2px 4px rgba(10, 35, 66, 0.05);
  --shadow-lg: 0 14px 40px rgba(10, 35, 66, 0.12), 0 4px 10px rgba(10, 35, 66, 0.06);
  --shadow-xl: 0 28px 64px rgba(10, 35, 66, 0.18);
  --shadow-focus: 0 0 0 3px rgba(255, 107, 0, 0.30);
  --shadow-inset: inset 0 1px 2px rgba(10, 35, 66, 0.06);

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 820px;
  --container-lg: 1080px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --gutter: var(--space-5);
  --section-y: var(--space-11);

  /* ---- Motion (calm, confident — no bounce) ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 360ms; /* @kind other */
  --transition-base: all var(--duration-base) var(--ease-standard);
}
/* ROON ADVISORY — Base layer
   Element defaults + a small set of brand utilities. Loaded after tokens.
   Ported verbatim from design/design-system/tokens/base.css (#3) — keep in sync if the
   design-system tokens change; the design/ tree itself stays read-only. */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--heading-weight);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
a { color: var(--text-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
strong, b { font-weight: var(--weight-bold); color: var(--text-strong); }
small { font-size: var(--text-sm); }
hr {
  border: 0;
  border-top: var(--border-width) solid var(--border-subtle);
  margin: var(--space-6) 0;
}
code, pre { font-family: var(--font-mono); font-size: 0.92em; }
img { max-width: 100%; display: block; }
::selection { background: var(--orange-200); color: var(--navy-900); }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* ---- Brand utilities ---- */
/* Eyebrow / kicker — echoes the logo's spaced claim line */
.roon-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--eyebrow-weight);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-accent);
}
/* Editorial serif statement */
.roon-statement {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
}
.roon-statement em { font-style: italic; color: var(--text-accent); }
/* Display heading */
.roon-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
/* The signature orange "Leitplanke" — a left accent rule */
.roon-leitplanke {
  border-left: var(--rule-accent-width) solid var(--orange-500);
  padding-left: var(--space-5);
}
.roon-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Mobile app-shell + mobile screens (#52) — the `.rm-*` class kit + the desktop/mobile
   view-gating utilities. Imported last so it can layer on top of the token/base layer. */
/*
 * Mobile app-shell + mobile screens (#52), imported by src/styles/global.css so it applies
 * site-wide. This carries the class kit the mobile page markup (src/components/mobile/*.astro)
 * uses to reproduce the DesignSync mobile design (design/pages/RoonMobileApp.dc.html) — the
 * authoritative variant-C mobile app: app-style header, scroll-progress bar, exclusive
 * accordions, per-screen sections and the persistent bottom-bar (the shell chrome itself lives
 * in src/components/MobileHeader.astro / MobileNav.astro).
 *
 * MOBILE IS A PRESENTATION LAYER, NOT A NEW ROUTE SET (docs/architecture.md "Mobile
 * navigation model"). Each content page renders BOTH its unchanged desktop markup (wrapped in
 * `.roon-view--desktop`, which is `display:contents` so the desktop layout is byte-identical)
 * and its mobile markup (`.roon-view--mobile`); a single CSS breakpoint (48rem / 768px)
 * chooses which one shows — no UA sniffing, no JS. Above 48rem the `.rm-*` markup is
 * `display:none`, so these rules never touch the desktop layout.
 *
 * INVARIANT (docs/decisions.md D16, enforced by test/css-animations.test.mjs): clipping
 * wrappers use `overflow: clip`, never `overflow: hidden`.
 */
/* ---------------------------------------------------------------------
 * Desktop/mobile view gating
 * ------------------------------------------------------------------- */
.roon-view--desktop {
  display: contents;
}
.roon-view--mobile {
  display: none;
}
@media (max-width: 48rem) {
  .roon-view--desktop {
    display: none;
  }
  .roon-view--mobile {
    display: block;
  }
}
/* ---------------------------------------------------------------------
 * Sections & scaffolding
 * ------------------------------------------------------------------- */
.rm-section {
  position: relative;
  overflow: clip;
  padding: 2.75rem 1.5rem 3.25rem; /* 44 24 52 */
}
.rm-section--tight {
  padding-bottom: 3rem;
}
.rm-section--flush {
  padding-inline: 0;
}
.rm-section--card {
  background: var(--surface-card);
  border-top: var(--border-width) solid var(--border-subtle);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.rm-section--card-top {
  background: var(--surface-card);
  border-top: var(--border-width) solid var(--border-subtle);
}
.rm-section--page {
  background: var(--surface-page);
  border-top: var(--border-width) solid var(--border-subtle);
}
.rm-section--navy {
  background: var(--navy-900);
  color: var(--white);
}
.rm-section--center {
  text-align: center;
}
.rm-inner {
  position: relative;
  z-index: 2;
}
.rm-inpad {
  padding-inline: 1.5rem;
}
/* Decorative crest watermark (position/size set inline per instance, like the desktop pages). */
.rm-crest {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.rm-crest img {
  display: block;
}
/* ---------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------- */
.rm-h1 {
  font-weight: var(--weight-extrabold);
  font-size: 2.05rem;
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  color: var(--navy-900);
  margin: 1rem 0 1.125rem;
  text-wrap: balance;
}
.rm-h1--onnavy {
  color: var(--white);
}
.rm-h1__accent {
  color: var(--orange-600);
}
.rm-h2 {
  font-weight: var(--weight-extrabold);
  font-size: 1.6rem;
  letter-spacing: var(--tracking-tight);
  color: var(--navy-900);
  margin: 0.75rem 0 0.625rem;
  text-wrap: balance;
}
.rm-h2--sm {
  font-size: 1.5rem;
  margin: 0.75rem 0 0.5rem;
}
.rm-h2--onnavy {
  color: var(--white);
}
.rm-lead {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 1.5rem;
}
.rm-lead--onnavy {
  color: var(--navy-300);
  margin: 0;
}
.rm-p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}
.rm-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--iron-700);
  margin: 0 0 1.125rem;
  border-left: var(--rule-accent-width) solid var(--orange-500);
  padding-left: 1rem;
}
.rm-eyebrow-wrap {
  margin-bottom: 0.25rem;
}
.rm-textlink {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  color: var(--navy-900);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.rm-caps-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.625rem;
}
.rm-caps-list span {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* ---------------------------------------------------------------------
 * Buttons stacked (hero CTAs)
 * ------------------------------------------------------------------- */
.rm-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.rm-center-btn {
  display: flex;
  justify-content: center;
}
/* ---------------------------------------------------------------------
 * Hero media (Startseite image + floating stat badge)
 * ------------------------------------------------------------------- */
.rm-hero-media {
  position: relative;
  margin-top: 2.25rem;
}
.rm-hero-media__frame {
  border-radius: 16px;
  overflow: clip;
  box-shadow: var(--shadow-lg);
  background: var(--mist-100);
}
.rm-hero-media__img {
  display: block;
  width: 100%;
  height: 23.75rem;
  object-fit: cover;
}
.rm-hero-media__badge {
  position: absolute;
  left: 0.875rem;
  bottom: 0.875rem;
  z-index: 3;
  background: var(--navy-900);
  color: var(--white);
  border-radius: 12px;
  padding: 0.875rem 1.125rem;
  box-shadow: var(--shadow-xl);
  max-width: 13.75rem;
}
.rm-hero-media__badge-value {
  font-weight: var(--weight-extrabold);
  font-size: 1.375rem;
  letter-spacing: var(--tracking-tight);
}
.rm-hero-media__badge-text {
  font-size: 0.8125rem;
  color: var(--navy-300);
  margin-top: 2px;
  line-height: 1.45;
}
/* ---------------------------------------------------------------------
 * Stat grid (Track Record / Experte stats band)
 * ------------------------------------------------------------------- */
.rm-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1.125rem;
  margin-top: 2rem;
}
.rm-stat {
  border-left: var(--rule-accent-width) solid var(--orange-500);
  padding-left: 0.875rem;
}
.rm-stat__value {
  font-weight: var(--weight-extrabold);
  font-size: 1.7rem;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--navy-900);
}
.rm-stat__value--onnavy {
  color: var(--white);
}
.rm-stat__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.5rem;
  line-height: 1.45;
}
.rm-stat__label--onnavy {
  color: var(--navy-300);
}
/* ---------------------------------------------------------------------
 * Timeline (Startseite compact "Der Weg dorthin" + Experte full "Werdegang")
 * ------------------------------------------------------------------- */
.rm-timeline {
  position: relative;
  padding-left: 1.75rem;
}
.rm-timeline::before {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: 0.375rem;
  bottom: 0.375rem;
  width: 2px;
  background: linear-gradient(var(--orange-500), var(--mist-200));
}
.rm-timeline__heading {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.25rem;
}
.rm-tl {
  position: relative;
  padding-bottom: 1.75rem;
}
.rm-tl:last-child {
  padding-bottom: 0;
}
.rm-tl__dot {
  position: absolute;
  left: -1.75rem;
  top: 0.3125rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--surface-card);
  background: var(--navy-700);
}
.rm-tl__dot--accent {
  background: var(--orange-500);
}
.rm-tl__dot--current {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--orange-500);
  box-shadow: 0 0 0 1px var(--orange-200);
}
.rm-tl__dot--navy {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--navy-900);
}
.rm-tl__dot--faint {
  background: var(--mist-200);
  box-shadow: 0 0 0 1px var(--border-default);
}
/* Compact rows (Startseite): year + text inline. */
.rm-tl__row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}
.rm-tl__year {
  flex: none;
  font-weight: var(--weight-extrabold);
  font-size: 0.9375rem;
  color: var(--navy-900);
  width: 2.625rem;
}
.rm-tl__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
}
.rm-tl__text--strong {
  color: var(--navy-900);
  font-weight: var(--weight-semibold);
}
/* Full entries (Experte). */
.rm-tl__period {
  font-weight: var(--weight-bold);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iron-500);
  margin-bottom: 0.25rem;
}
.rm-tl__period--current {
  color: var(--orange-600);
}
.rm-tl__role {
  font-size: 1rem;
  margin: 0 0 0.125rem;
  color: var(--navy-900);
}
.rm-tl__role-sub {
  font-weight: var(--weight-semibold);
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.rm-tl__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0.25rem 0 0;
}
/* ---------------------------------------------------------------------
 * Quote band (Startseite navy statement)
 * ------------------------------------------------------------------- */
.rm-quoteband {
  position: relative;
  z-index: 2;
  border-left: var(--rule-accent-width) solid var(--orange-500);
  padding-left: 1.25rem;
}
.rm-quoteband__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
}
.rm-quoteband__desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--navy-300);
  margin: 1.125rem 0 0;
}
.rm-quoteband__by {
  margin-top: 1.125rem;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy-300);
}
/* ---------------------------------------------------------------------
 * CTA band (navy, centred)
 * ------------------------------------------------------------------- */
.rm-cta__title {
  font-weight: var(--weight-extrabold);
  font-size: 1.55rem;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
.rm-cta__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--navy-300);
  margin: 0 0 1.375rem;
}
/* ---------------------------------------------------------------------
 * Exclusive accordions (native <details name="…"> — zero JS, keyboard-native)
 * ------------------------------------------------------------------- */
.rm-acc {
  position: relative;
  z-index: 2;
  background: var(--white);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: 14px;
  overflow: clip;
  box-shadow: var(--shadow-sm);
}
.rm-acc__item {
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.rm-acc__item:last-child {
  border-bottom: none;
}
.rm-acc__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
}
.rm-acc__item > summary::-webkit-details-marker {
  display: none;
}
.rm-acc__item > summary::marker {
  content: "";
}
.rm-acc__icon {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 8px;
  background: var(--orange-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--orange-600);
}
.rm-acc__title {
  flex: 1;
  font-weight: var(--weight-extrabold);
  font-size: 0.9688rem;
  color: var(--navy-900);
  line-height: 1.3;
}
.rm-acc__meta {
  flex: 1;
}
.rm-acc__badge {
  display: block;
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-700);
  margin-bottom: 3px;
}
.rm-acc__badge--navy {
  color: var(--navy-700);
}
.rm-acc__label {
  font-weight: var(--weight-extrabold);
  font-size: 0.9688rem;
  color: var(--navy-900);
}
.rm-acc__chevron {
  color: var(--iron-500);
  flex: none;
  transition: transform 0.2s var(--ease-standard);
}
.rm-acc__item[open] .rm-acc__chevron {
  transform: rotate(180deg);
}
.rm-acc__panel {
  padding: 0 1.125rem 1.125rem;
}
/* Icon-aligned panels (Startseite/Experte accordions lead with a 38px icon). */
.rm-acc__panel--indent {
  padding-left: 4.25rem;
}
.rm-acc__panel p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}
.rm-acc__panel p + p {
  margin-top: 0.625rem;
}
.rm-acc__panel p strong {
  color: var(--navy-900);
}
.rm-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rm-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.8438rem;
  color: var(--text-body);
}
.rm-checklist li svg {
  color: var(--orange-500);
  flex: none;
  margin-top: 2px;
}
.rm-checklist li.is-flag {
  color: var(--navy-900);
  font-weight: var(--weight-bold);
}
.rm-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* ---------------------------------------------------------------------
 * Leistungen phase heads
 * ------------------------------------------------------------------- */
.rm-phase-ghost {
  position: absolute;
  top: -1.875rem;
  font-weight: var(--weight-extrabold);
  font-size: 9rem;
  line-height: 1;
  color: var(--navy-900);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
.rm-phase-ghost--right {
  right: -0.625rem;
}
.rm-phase-ghost--left {
  left: -0.625rem;
}
.rm-phase-head {
  position: relative;
  z-index: 2;
  margin-bottom: 1.5rem;
}
/* ---------------------------------------------------------------------
 * Experte portrait
 * ------------------------------------------------------------------- */
.rm-portrait {
  position: relative;
  z-index: 2;
}
.rm-portrait__img {
  display: block;
  width: 100%;
  height: 26.25rem;
  object-fit: cover;
  object-position: top;
  background: var(--mist-100);
}
.rm-portrait__card {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 3;
  background: var(--white);
  border: var(--border-width) solid var(--border-subtle);
  border-left: var(--rule-accent-width) solid var(--orange-500);
  border-radius: 12px;
  padding: 0.8125rem 1.125rem;
  box-shadow: var(--shadow-md);
}
.rm-portrait__name {
  font-weight: var(--weight-extrabold);
  font-size: 1rem;
  color: var(--navy-900);
}
.rm-portrait__role {
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 2px;
}
/* ---------------------------------------------------------------------
 * Navy hero + overlapping card (Kontakt / OnePager mobile screens)
 * ------------------------------------------------------------------- */
.rm-navy-hero__inner {
  position: relative;
  z-index: 2;
  padding: 2.75rem 1.5rem 5.75rem;
}
.rm-quick {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.375rem;
}
.rm-quick__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 0.625rem;
  border-radius: 10px;
  font-weight: var(--weight-bold);
  font-size: 0.875rem;
  text-decoration: none;
}
.rm-quick__btn--solid {
  background: var(--orange-500);
  color: var(--white);
}
.rm-quick__btn--solid:hover {
  color: var(--white);
  text-decoration: none;
}
.rm-quick__btn--ghost {
  background: transparent;
  color: var(--white);
  border: var(--border-width) solid var(--border-on-navy);
}
.rm-quick__btn--ghost:hover {
  color: var(--white);
  text-decoration: none;
}
.rm-overlap {
  position: relative;
  z-index: 5;
  margin: -3.75rem 1rem 0;
  padding-bottom: 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* ---------------------------------------------------------------------
 * OnePager cards
 * ------------------------------------------------------------------- */
.rm-op-card {
  background: var(--white);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.375rem;
  box-shadow: var(--shadow-xl);
}
.rm-op-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.rm-op-thumb {
  flex: none;
  width: 5.5rem;
  aspect-ratio: 210 / 297;
  border-radius: 8px;
  overflow: clip;
  background: var(--mist-100);
  border: var(--border-width) solid var(--border-subtle);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--iron-400);
}
.rm-op-thumb__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rm-op-eyebrow {
  font-weight: var(--weight-bold);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.rm-op-title {
  font-weight: var(--weight-extrabold);
  font-size: 1.125rem;
  letter-spacing: var(--tracking-snug);
  color: var(--navy-900);
  margin: 0 0 6px;
}
.rm-op-desc {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}
.rm-op-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.125rem;
}
.rm-op-viewlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  color: var(--navy-900);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rm-op-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  justify-content: center;
}
.rm-op-note {
  background: var(--surface-page);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rm-op-note p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}
:root {
  /* Fixed header height (matches the DesignSync header's 76px bar) — pages offset their
     first section by this amount when the header renders solid; Header.astro's
     transparent variant (landing) instead lets the hero supply its own top padding. */
  --header-height: 4.75rem; /* 76px */

  /* Mobile app-shell metrics (#52) — the fixed app header + bottom-bar heights (incl. iOS
     safe-area insets), shared so <main>'s mobile offset (Base.astro) and the footer's
     bottom clearance (Footer.astro) agree with the actual chrome in MobileHeader/MobileNav. */
  --rm-header-h: calc(3.6875rem + max(0.5rem, env(safe-area-inset-top)));   /* 56px bar + 3px progress + pad */
  --rm-nav-h: calc(3.5rem + max(0.75rem, env(safe-area-inset-bottom)));      /* bottom-bar incl. home-indicator */
}
/* box-sizing reset + body margin already come from tokens/base.css. */
html {
  color-scheme: light;
}
/* German typographic quotes „…" for any <q>/<blockquote> — most copy sets „…" literally in
   content per the brand voice (docs/glossary.md / design-system readme §2), this covers the
   semantic-element case too. */
:lang(de) q {
  quotes: "\201E" "\201C" "\201A" "\2018";
}
/* ---------------------------------------------------------------------
   * Scroll motion utilities (docs/decisions.md D19, generalized sitewide by #43).
   * Global on purpose: `.roon-reveal`/`.roon-parallax` are applied to markup that lives in the
   * consuming page's own (differently-scoped) component, so a normal Astro-scoped <style> here
   * could never match it.
   * --------------------------------------------------------------------- */
  .roon-reveal {
    /* Base/fallback state: fully visible. No-JS users, crawlers and every reduced-motion user
       render exactly this — content always readable. */
    opacity: 1;
    translate: 0 0;
  }

  .roon-parallax {
    /* Base/fallback state: natural, static position (the engine sets translate). */
  }

  /* Pre-reveal hidden state, seeded before paint via the .roon-motion class so above-the-fold
     reveals never blink. `--reveal-x`/`--reveal-y` (default `0`/`24px`) and `--reveal-delay`
     (default `0ms`) are set inline per element, mapping the design's `data-reveal-x`/
     `data-reveal-y`/`data-reveal-delay` attributes. */
  .roon-motion .roon-reveal {
    opacity: 0;
    translate: var(--reveal-x, 0) var(--reveal-y, 24px);
    transition:
      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      translate 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  /* Compositing hint for the continuously-animated parallax layers (the drift is driven via the
     CSS `translate` property). Gated so no-JS pays nothing. */
  .roon-motion .roon-parallax {
    will-change: translate;
  }

  /* Belt-and-suspenders: even if the .roon-motion class were ever left on, an OS
     reduced-motion preference must never hold content hidden or animate it. */
  @media (prefers-reduced-motion: reduce) {
    .roon-motion .roon-reveal {
      opacity: 1;
      translate: 0 0;
      transition: none;
    }
    .roon-motion .roon-parallax {
      will-change: auto;
    }
  }