/* ───────────────────────────────────────────────
   Design tokens - Premium & Minimal
   ─────────────────────────────────────────────── */
:root {
  --navy: #0f172a;
  --navy-2: #1e293b;
  --ink: #0f172a;
  --ink-soft: #334155;
  --ink-mute: #556070;
  --border: rgba(15, 23, 42, 0.08);

  --bg: oklch(99.5% 0.004 240);
  --bg-soft: oklch(97.5% 0.006 240);
  --bg-glass: oklch(99.5% 0.004 240 / 0.85);
  /* Stage surface for the Product Vision film — a touch cooler and
     slightly more saturated than --bg-soft, so the film section reads
     as its own moment without breaking the overall palette. */
  --bg-stage: oklch(96.5% 0.012 245);

  /* Surface scale — navy-tinted, replaces #fff / #fdfdfd / #f8fafc / #f1f5f9 */
  --surface: oklch(99.8% 0.003 240);
  --surface-warm: oklch(99% 0.004 240);
  --surface-cool: oklch(97.5% 0.008 240);
  --surface-cool-2: oklch(95.5% 0.01 240);
  --surface-glass-85: oklch(99.8% 0.003 240 / 0.85);
  --surface-glass-90: oklch(99.8% 0.003 240 / 0.9);

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: "Noto Serif Display", "Iowan Old Style", Georgia, serif;
  --font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  --font-serif: "Iowan Old Style", "Charter", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;

  /* Matter color tokens for UI mockups */
  --matter-active: var(--navy);
  --matter-2: oklch(45% 0.09 240);
  --matter-3: oklch(55% 0.07 200);

  /* Active / highlight accent — vibrant green, reads like a live state indicator.
     Used for timer-running signals, inline-accept flashes, and any "live" state. */
  --accent: oklch(74% 0.14 150);
  --accent-soft: oklch(74% 0.14 150 / 0.2);
  --accent-softer: oklch(74% 0.14 150 / 0.1);

  /* Recording indicator — a single, muted red used only on the dictate mic.
     OKLCH-based so it sits consistently alongside the navy/neutral system and
     never reads as signal-red across the rest of the UI. */
  --rec: oklch(58% 0.17 25);

  /* Matter identification palette — muted, navy-adjacent hues for
     per-matter timer/project dots. Consistent lightness and chroma so
     nothing shouts; only hue changes. Meant to read as "discreet
     colour-coding" in a legal tool, not a category chart. */
  --matter-dot-1: oklch(55% 0.09 160);  /* forest */
  --matter-dot-2: oklch(50% 0.09 250);  /* deep blue */
  --matter-dot-3: oklch(62% 0.09 60);   /* brass */
  --matter-dot-4: oklch(48% 0.09 300);  /* aubergine */
  --matter-dot-5: oklch(52% 0.11 25);   /* oxblood */
  --matter-dot-6: oklch(55% 0.08 210);  /* slate */
  --matter-dot-7: oklch(52% 0.09 340);  /* rose noir */

  --shell-max: 1200px;
  --shell-pad: clamp(20px, 5vw, 60px);

  /* Breakpoints (reference only — @media queries still need literal values) */
  --bp-sm: 640px;   /* small phone → phablet */
  --bp-md: 768px;   /* tablet portrait */
  --bp-lg: 1024px;  /* tablet landscape / small desktop */
  --bp-xl: 1280px;  /* desktop */
}

/* ───────────────────────────────────────────────
   Base
   ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
  transition: outline-offset 180ms var(--ease-out-quart);
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ───────────────────────────────────────────────
   Layout shell
   ─────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-left: var(--shell-pad);
  padding-right: var(--shell-pad);
}

/* ───────────────────────────────────────────────
   Reveal on scroll
   -------------------------------------------------
   Base: subtle rise (default). Variants below layer
   on different motion languages for different
   content roles — so a stat number, a display
   heading, and a side-aligned card don't all enter
   the same way. All variants share the same decel
   curves (ease-out-quint/expo); we never bounce.
   ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}
.reveal.d1 { transition-delay: 120ms; }
.reveal.d2 { transition-delay: 220ms; }
.reveal.d3 { transition-delay: 320ms; }
.reveal.d4 { transition-delay: 420ms; }
.reveal.d5 { transition-delay: 520ms; }

/* Variant: rise — bigger travel, slightly slower.
   Use for primary headings and closing moments. */
.reveal.rise {
  transform: translate3d(0, 32px, 0);
  transition-duration: 1100ms;
}

/* Variant: display — travel + blur release.
   Reserved for the few true hero moments on the
   page (savings card, founder card, final CTA).
   Blur collapses in during the last 60% of travel
   so the element "resolves" into focus. */
.reveal.display {
  transform: translate3d(0, 28px, 0);
  filter: blur(10px);
  transition:
    opacity 1200ms var(--ease-out-expo),
    transform 1200ms var(--ease-out-expo),
    filter 900ms var(--ease-out-quint) 120ms;
}
.reveal.display.in {
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Variants: from-left / from-right — directional
   entrance. Smaller X travel than Y travel would
   be, because horizontal motion reads stronger. */
.reveal.from-left  { transform: translate3d(-26px, 6px, 0); }
.reveal.from-right { transform: translate3d( 26px, 6px, 0); }
.reveal.from-left.in,
.reveal.from-right.in { transform: translate3d(0, 0, 0); }

/* Variant: lift — fade + small rise + gentle
   scale from a bottom-left origin. Pairs with
   counter animations on stat values. */
.reveal.lift {
  transform: translate3d(0, 14px, 0) scale(0.965);
  transform-origin: 0% 100%;
  transition:
    opacity 950ms var(--ease-out-quint),
    transform 950ms var(--ease-out-quint);
}
.reveal.lift.in { transform: translate3d(0, 0, 0) scale(1); }

/* Variant: mask — clip-path line-wipe left→right.
   Element stays at full opacity; only the reveal
   edge moves. Reads editorial and deliberate. */
.reveal.mask {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1000ms var(--ease-out-quint);
}
.reveal.mask.in { clip-path: inset(0 0 0 0); }

/* Variant: snap — quick, tight reveal for
   secondary notes and fineprint. */
.reveal.snap {
  transform: translate3d(0, 10px, 0);
  transition-duration: 620ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.rise,
  .reveal.display,
  .reveal.from-left,
  .reveal.from-right,
  .reveal.lift,
  .reveal.mask,
  .reveal.snap {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  * { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ───────────────────────────────────────────────
   Typography helpers
   ─────────────────────────────────────────────── */
.kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
/* Swiss/Didone display scale: Light (300) carries the large sizes, where the
   high-contrast strokes of Noto Serif Display read as refined rather than
   stamped. Mid-size display (.h-section) stays at 300 but with slightly more
   conservative letter-spacing; below ~30px we'd fall back to 400 for
   structural integrity (see .team-name). */
.h-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* Variable-font axis value between Light (300) and Regular (400):
     370 gives the headings just enough weight to feel authored and
     authoritative without falling back into "stamp" territory. */
  font-weight: 370;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
.h-section {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 380;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 26px);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* ───────────────────────────────────────────────
   Blocksatz für Fliesstext
   Justified alignment with automatic hyphenation.
   Restricted to long prose paragraphs only.
   lang="de" on the <html> element enables German hyphenation rules.
   ─────────────────────────────────────────────── */
.team-bio p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

.body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
  text-wrap: pretty;
}

/* ───────────────────────────────────────────────
   Buttons - Minimal Premium
   ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  transition:
    background 260ms var(--ease-out-quart),
    color 260ms var(--ease-out-quart),
    border-color 260ms var(--ease-out-quart),
    box-shadow 260ms var(--ease-out-quart),
    transform 220ms var(--ease-out-quart);
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
@media (min-width: 768px) {
  .btn {
    gap: 8px;
    min-height: 48px;
    padding: 0 28px;
    font-size: 16px;
  }
}
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 90ms; }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.btn-primary {
  background: var(--navy);
  color: var(--surface);
  border: 1px solid var(--navy);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}
.btn-primary:hover { background: var(--surface); color: var(--navy); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12); transform: translateY(-2px); }
.btn-primary:active { box-shadow: 0 3px 10px rgba(15, 23, 42, 0.14); transform: translateY(0) scale(0.985); }
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--navy); background: rgba(15, 23, 42, 0.03); transform: translateY(-2px); }
.btn-ghost:active { background: rgba(15, 23, 42, 0.05); transform: translateY(0) scale(0.985); }
.btn-on-dark {
  background: rgba(255,255,255,0.9);
  color: var(--navy);
  border: 1px solid transparent;
}
.btn-on-dark:hover { background: var(--surface); transform: translateY(-2px); }

/* ───────────────────────────────────────────────
   Navigation
   ─────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 400ms var(--ease-out-quart), backdrop-filter 400ms var(--ease-out-quart), border-color 400ms var(--ease-out-quart);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 12px;
}
@media (min-width: 640px) {
  .nav-inner { height: 80px; gap: 16px; }
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--navy);
}
@media (min-width: 640px) { .nav-brand { font-size: 22px; } }
/* Minimal 4-point star for brand mark */
.nav-brand-mark {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-brand-mark::before, .nav-brand-mark::after {
  content: "";
  position: absolute;
  background: var(--navy);
}
.nav-brand-mark::before { width: 2px; height: 24px; }
.nav-brand-mark::after { width: 24px; height: 2px; }

.nav-links {
  display: none;
  gap: 32px;
  align-items: center;
}
.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
  padding: 8px 0;
  transition: color 260ms var(--ease-out-quart);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 380ms var(--ease-out-quart);
}
.nav-link:hover { color: var(--navy); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 640px) { .nav-right { gap: 16px; } }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
}
.lang-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink-mute);
  padding: 10px 12px;
  margin: -10px -4px;
  transition: color 260ms var(--ease-out-quart);
}
.lang-opt::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 1.5px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 320ms var(--ease-out-quart);
}
.lang-opt:hover { color: var(--navy); }
.lang-opt.active {
  color: var(--navy);
  font-weight: 600;
}
.lang-opt.active::after { transform: scaleX(1); }
.lang-opt[aria-disabled="true"],
.lang-opt.is-disabled,
.lang-opt:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  pointer-events: auto;
}
.lang-opt[aria-disabled="true"]:hover,
.lang-opt.is-disabled:hover,
.lang-opt:disabled:hover {
  color: var(--ink-mute);
}
.nav-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--navy);
  transition: transform 260ms var(--ease-out-quart);
}
.nav-hamburger svg { width: 24px; height: 24px; stroke-width: 1.5; transition: transform 360ms var(--ease-out-quart), opacity 260ms var(--ease-out-quart); }
.nav-hamburger:active { transform: scale(0.92); transition-duration: 80ms; }
.nav-hamburger[aria-expanded="true"] svg { transform: rotate(90deg); }
.nav-cta {
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: var(--radius-sm);
}
@media (min-width: 520px) {
  .nav-cta { padding: 0 20px; font-size: 15px; }
}
/* Tablet (iPad portrait): the hamburger menu is the primary navigation
   entry point, and it already contains a Kontakt action. Hide the
   standalone Kontakt button here so the nav reads as brand | lang | menu
   instead of competing with a duplicate CTA. */
@media (min-width: 640px) and (max-width: 1023px) {
  .nav-cta { display: none; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms var(--ease-out-quart), visibility 360ms var(--ease-out-quart);
  padding: 88px 24px calc(32px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
@media (min-width: 640px) { .mobile-menu { padding-top: 100px; padding-left: 32px; padding-right: 32px; } }

.mobile-menu > *:not(.sr-only) {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms var(--ease-out-expo), transform 520ms var(--ease-out-expo);
}
.mobile-menu.open > *:not(.sr-only) { opacity: 1; transform: translateY(0); }
.mobile-menu.open > .mobile-link:nth-of-type(1) { transition-delay: 80ms; }
.mobile-menu.open > .mobile-link:nth-of-type(2) { transition-delay: 130ms; }
.mobile-menu.open > .mobile-link:nth-of-type(3) { transition-delay: 180ms; }
.mobile-menu.open > .mobile-link:nth-of-type(4) { transition-delay: 230ms; }
.mobile-menu.open > .mobile-menu-footer { transition-delay: 280ms; }
.mobile-menu.open > *:nth-child(7) { transition-delay: 380ms; }

.mobile-link {
  padding: 18px 0;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--navy);
  border-bottom: 1px solid var(--border);
  min-height: 56px;
  display: flex;
  align-items: center;
  transition: color 280ms var(--ease-out-quart), transform 280ms var(--ease-out-quart);
}
.mobile-link:hover { transform: translateX(6px); }
@media (min-width: 640px) { .mobile-link { font-size: 24px; } }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu > * { opacity: 1; transform: none; transition: none; }
  .mobile-menu.open > * { transition-delay: 0s !important; }
}
.mobile-menu-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

/* ───────────────────────────────────────────────
   Hero - Full Background Video
   ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  background: var(--bg);
  padding-top: 120px; /* Offset for fixed nav */
  padding-bottom: clamp(56px, 10vh, 120px);
}

/* Landscape on short screens: avoid vertical clipping */
@media (max-height: 600px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: 96px;
    padding-bottom: 48px;
  }
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  mix-blend-mode: darken;
  display: block;
  opacity: 0;
  transition: opacity 1400ms var(--ease-out-quart);
  will-change: opacity;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-enclosure,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button,
.hero-video::-webkit-media-controls-overlay-enclosure {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.hero.is-ready .hero-video {
  opacity: 0.9; /* Reduced opacity so the dark text remains readable on light background */
}
/* Left + bottom fades: video bleeds off to page bg, no hard crop */
.hero-bg::before,
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
/* Left fade — removed as requested */
.hero-bg::before {
  display: none;
}
/* Bottom fade — removed as requested */
.hero-bg::after {
  display: none;
}

/* Mobile: left fade tighter, bottom stronger */
@media (max-width: 1023px) {
  .hero-bg::before {
    display: none;
  }
  .hero-bg::after {
    display: none;
  }
}

.hero-overlay {
  display: none;
}

.hero .shell {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-text {
  max-width: 900px;
}

/* Hero entrance choreography */
.hero-enter {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms var(--ease-out-expo), transform 1000ms var(--ease-out-expo);
  will-change: opacity, transform;
}
.hero.is-ready .hero-enter {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}
.hero.is-ready .hero-enter.he-1 { transition-delay: 200ms; }
.hero.is-ready .hero-enter.he-2 { transition-delay: 340ms; }
.hero.is-ready .hero-enter.he-3 { transition-delay: 480ms; }
.hero.is-ready .hero-enter.he-4 { transition-delay: 620ms; }
.hero.is-ready .hero-enter.he-5 { transition-delay: 760ms; }

@media (prefers-reduced-motion: reduce) {
  .hero-video, .hero-overlay, .hero-enter {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/* Hero-scoped kicker: the single place in the hero where real chroma
   shows up. Picks the teal-blue mid-tones from the video so the
   label feels native to the film — a small discreet signal of the
   brand's hue family, not a marketing "eyebrow." Uppercase + tracked,
   so the extra chroma never feels loud. Contrast on --bg is ~5.8:1,
   clearing WCAG AA for normal text. */
.hero .kicker {
  color: oklch(46% 0.085 238);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 370;
  /* Video-coherent navy: the hero video's deeper pockets sit around
     hue 235–245° with moderate chroma. We shift the title from the
     near-neutral navy (240°/0.02) into a slightly richer navy
     (245°/0.04) so the type reads as *belonging* to the video wash
     rather than stamped onto it. Contrast stays ~14:1 on --bg, well
     above WCAG AA for display text. No text-shadow — contrast comes
     from lightness, not from a softened halo. */
  color: oklch(22% 0.045 248);
  margin-bottom: 24px;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}
@media (min-width: 640px) {
  .hero-title { font-size: clamp(34px, 4.5vw, 52px); hyphens: none; -webkit-hyphens: none; }
}

/* German title needs to be smaller to fit "Sie machen die juristische Arbeit." */
html[lang="de"] .hero-title {
  font-size: clamp(30px, 6.5vw, 42px);
}
@media (min-width: 640px) {
  html[lang="de"] .hero-title {
    font-size: clamp(32px, 4vw, 46px);
  }
}
.hero-lede {
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  /* Slate lede, slightly pulled toward the video's blue family so
     the whole stack — kicker, title, lede — shares one hue
     temperature. Compared to --ink-mute (#556070), chroma ticks up
     from ~0.02 to ~0.035; imperceptible as a swatch, but the block
     as a whole reads more coherent with the cool background. */
  color: oklch(44% 0.035 245);
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 480px;
  font-weight: 400;
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 24px;
}
@media (min-width: 480px) {
  .hero-ctas { flex-direction: row; align-items: center; gap: 16px; margin-bottom: 32px; }
}
.hero-meta {
  font-size: 12px;
  /* Tracks the lede's hue shift — a hair cooler and more chromatic
     than plain --ink-mute so the tagline and footnote read as a
     pair. Stays muted; this is utility text, not a headline. */
  color: oklch(50% 0.025 245);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (min-width: 640px) { .hero-meta { font-size: 13px; } }

@media (min-width: 1024px) {
  .nav-links { display: inline-flex; }
  .nav-hamburger { display: none; }
}

/* ───────────────────────────────────────────────
   Section shell
   ─────────────────────────────────────────────── */
.section {
  position: relative;
  padding-top: clamp(80px, 12vw, 140px);
  padding-bottom: clamp(80px, 12vw, 140px);
  background: var(--bg);
}
.section-tight { padding-top: clamp(60px, 8vw, 100px); padding-bottom: clamp(60px, 8vw, 100px); }
.section-alt { background: var(--bg-soft); }
.section-warm { background: var(--surface-warm); border-top: 1px solid var(--border); }
.section-glass { background: var(--bg-soft); }
.section-dark {
  background: var(--navy);
  color: var(--surface);
}
.section-dark .kicker { color: rgba(255, 255, 255, 0.7); }
.section-dark .h-section { color: var(--surface); }
.section-dark .lede { color: rgba(255, 255, 255, 0.8); }

.section-intro {
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}
.section-intro.left {
  margin-left: 0;
  text-align: left;
}
/* Reduced bottom margin — used where the intro sits tightly above a
   media-heavy component (stats rail, vision film) and the default 48–80px
   gap feels too generous. */
.section-intro.tight {
  margin-bottom: clamp(32px, 5vw, 56px);
}
.section-intro .lede { margin-top: 20px; }

/* ───────────────────────────────────────────────
   Problem Minimal Layout (No Cards)
   ─────────────────────────────────────────────── */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.problem-card {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.problem-card:hover { transform: none; box-shadow: none; }
.problem-title {
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 12px 0;
}
.problem-body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
/* iPad portrait keeps the 1-column editorial stack from mobile: the
   serif body copy needs at least ~55ch to justify cleanly, and a
   3-column grid at 768-1023px collapses each paragraph to ~14ch, which
   produces the "rivers" you see with justified narrow columns. The
   3-column rhythm returns at 1024px where each card clears 300px. */
@media (min-width: 1024px) {
  .problem-grid { grid-template-columns: repeat(3, 1fr); gap: 56px; }
  .problem-card { border-top: none; padding-top: 0; }
}

/* ───────────────────────────────────────────────
   Problem → Essay teaser (inline "read more")
   A restrained, left-aligned text link that sits
   below the 3-column grid and points to the
   long-form founder essay. No box, no border —
   just the same typographic voice as the cards
   above, with an arrow that slides on hover.
   ─────────────────────────────────────────────── */
.problem-followup {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  justify-content: center;
  text-align: center;
}
.problem-followup-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--navy);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.22);
  transition:
    gap 260ms var(--ease-out-quart),
    border-color 260ms var(--ease-out-quart);
}
.problem-followup-link:hover,
.problem-followup-link:focus-visible {
  gap: 14px;
  border-bottom-color: var(--navy);
}
.problem-followup-link:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
  border-radius: 2px;
}
.problem-followup-arrow {
  transition: transform 320ms var(--ease-out-quart);
}
.problem-followup-link:hover .problem-followup-arrow,
.problem-followup-link:focus-visible .problem-followup-arrow {
  transform: translateX(5px);
}

/* Shimmer — a light band glides L→R across the label every ~3s.
   Geometry note: bg-size 400% keeps solid navy on both sides of the
   highlight, so the start/end keyframes look identical and the loop
   is seamless. Position 100% parks the band just off the left edge,
   position 0% parks it just off the right edge — so the animation
   is a clean left-to-right sweep followed by a short hold before the
   loop restarts (no visible jump). */
.problem-followup-label {
  background-image: linear-gradient(
    90deg,
    var(--navy) 0%,
    var(--navy) 42%,
    #cbd5e1 50%,
    var(--navy) 58%,
    var(--navy) 100%
  );
  background-size: 400% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: problem-followup-shimmer 3.2s linear 0.8s infinite;
  will-change: background-position;
}
.problem-followup-link:hover .problem-followup-label,
.problem-followup-link:focus-visible .problem-followup-label {
  animation-play-state: paused;
}

@keyframes problem-followup-shimmer {
  0%   { background-position: 100% 0; }
  60%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-followup-link,
  .problem-followup-arrow { transition: none; }
  .problem-followup-link:hover .problem-followup-arrow,
  .problem-followup-link:focus-visible .problem-followup-arrow { transform: none; }
  .problem-followup-label {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--navy);
            color: var(--navy);
  }
}

/* ───────────────────────────────────────────────
   Market stats — 3-column editorial
   ─────────────────────────────────────────────── */
.market-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.market-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(32px, 5vw, 48px) 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  /* Each stat is its own sizing context so the display word scales to
     the column it actually lives in — not to the viewport. Without this
     the 8vw ceiling overflows narrow 3-col layouts (e.g. 1024–1200px),
     clipping words like "Rückweg." / "Schwund." at the column edge.
     min-width:0 lets grid items shrink below their intrinsic content
     width instead of pushing past the 1fr share. */
  container-type: inline-size;
  min-width: 0;
}
.market-stat:first-child { border-top: none; padding-top: 0; }
.market-stat:last-child  { padding-bottom: 0; }
.market-stat-value {
  font-family: var(--font-display);
  /* Stacked (single-column) layout: scales with viewport since the
     column IS the viewport. The 3-col layout overrides this with cqi
     units further down. */
  font-size: clamp(42px, 8vw, 80px);
  /* Stats sit on the dark section — light text on dark always reads as
     lighter weight than the same stroke on white. We compensate by
     holding this at 400 while all display headings on light surfaces
     drop to 300 Light. */
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--surface);
  font-variant-numeric: tabular-nums;
  /* Failsafe for very long translations — keep the word inside the
     column even if a future copy change blows past the cqi budget. */
  overflow-wrap: break-word;
}
.market-stat-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  max-width: 30ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
/* iPad portrait stacks the stats full-width, so a 30ch cap would
   leave the label floating in empty space and cramp justified text
   into narrow rivers. Relax the cap to a comfortable reading measure
   here; the 30ch rhythm returns at 1024px where the 3-column rail is. */
@media (min-width: 768px) and (max-width: 1023px) {
  .market-stat-label { max-width: 56ch; }
}
.market-stat-source {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-ui);
  margin-top: 4px;
}
.market-stat-source a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.market-stat-source a:hover {
  color: rgba(255, 255, 255, 0.88);
  text-decoration-color: rgba(255, 255, 255, 0.5);
}
.market-stat-source a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
  border-radius: 2px;
}
/* The headline word ("Schwund.", "Rückweg.") scales with 8vw and is
   wider than a third of an iPad-portrait viewport, so the 3-column
   rail would clip it. Stacked at iPad portrait, each statement gets
   full width; the 3-column editorial rail returns at 1024px. */
@media (min-width: 1024px) {
  .market-editorial { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .market-stat {
    /* Reduced inner padding (was 4vw → 2.5vw max 40px). At 1024px the
       shell leaves ~307px per column; 4vw padding ate ~82px of it,
       starving the display word. 2.5vw gives the typography room to
       breathe without the word clipping the rule. */
    padding: 0 clamp(20px, 2.5vw, 40px);
    border-top: none;
    border-left: 1px solid rgba(255,255,255,0.10);
  }
  .market-stat:first-child { border-left: none; padding-left: 0; }
  .market-stat:last-child  { padding-right: 0; }
  /* Scale display word to the COLUMN, not the viewport. 18cqi of a
     ~307px column ≈ 55px; of a 400px column ≈ 72px. That keeps
     "Rückweg." inside the 3-col rail at every desktop size while still
     feeling editorial at 1440px+. Scoped to .market-editorial so the
     benefit-split layout keeps its own viewport-based clamps. */
  .market-editorial .market-stat-value {
    font-size: clamp(44px, 18cqi, 76px);
  }
}

/* ───────────────────────────────────────────────
   Benefit split — 2-row layout on desktop
   Top row: Primary benefit spanning full width
   Bottom row: Secondary benefits side-by-side
   No dividers, clean spacing.
   ─────────────────────────────────────────────── */
.benefit-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 8vw, 64px);
}
.benefit-split .market-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Removed dividers and borders */
}

.benefit-kicker {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}

/* The secondary benefits share a row at 1024px+, where each column
   clears ~34ch for justified serif copy. At iPad portrait there
   isn't enough horizontal room, so the stack stays single-column. */
@media (min-width: 1024px) {
  .benefit-split {
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(64px, 8vw, 96px);
    column-gap: clamp(40px, 6vw, 64px);
  }
  .benefit-split .benefit-primary {
    grid-column: 1 / -1; /* Spans full width */
    gap: 20px;
    align-items: flex-start;
  }
  .benefit-split .benefit-primary .market-stat-value {
    font-size: clamp(64px, 9vw, 104px);
    line-height: 0.94;
  }
  .benefit-split .benefit-primary .market-stat-label {
    max-width: 75ch; /* Wider since it spans full width */
    font-size: clamp(20px, 2.5vw, 24px);
    line-height: 1.4;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }
  .benefit-split .market-stat.benefit-secondary .market-stat-value {
    font-size: clamp(40px, 5.5vw, 64px);
  }
  .benefit-split .market-stat.benefit-secondary .market-stat-label {
    max-width: 34ch;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.45;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }
}

/* ───────────────────────────────────────────────
   Product Vision Film
   ─────────────────────────────────────────────── */
/* Vision endet tight, weil direkt darunter ein dunkler Abschnitt folgt —
   der Farbwechsel übernimmt die optische Trennung.
   Eigener Stage-Hintergrund markiert den Film-Moment als eigenständig,
   ohne das Palette-Gefühl zu brechen. */
#vision {
  background: var(--bg-stage);
  padding-bottom: clamp(40px, 6vw, 60px);
}

.vision-stage {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1140px;
  overflow: visible; /* Erlaubt weichen Rand / Schatten der Fenster nach aussen */
  isolation: isolate;
  /* Dynamische Höhe, passt sich dem aktiven Container an. */
  height: auto;
  min-height: 480px;
  /* Scope layout to this subtree so the vision-film's width/height
     transitions don't trigger document-wide reflow. (paint removed to prevent shadow clipping) */
  contain: layout;
}
@media (min-width: 768px) {
  .vision-stage { aspect-ratio: 16 / 9.5; min-height: auto; }
}
/* Mobile: Bühne ist hochformatig, gibt dem zentralen Spotlight-Fenster
   genug vertikalen Raum für komfortable Typo, ohne den Abschnitt
   aufzublähen. Statt starrer Aspect-Ratio nutzt sie nun padding/content,
   damit keine riesigen Leerräume entstehen. */
@media (max-width: 767px) {
  .vision-stage { aspect-ratio: auto; min-height: 560px; }
}

.vision-desktop {
  position: absolute;
  inset: 0;
  perspective: 1600px;
  perspective-origin: 50% 40%;
}

/* Always-on Avura pill — runder Timer-Knopf mit umkreisendem Ring.
   Position wird per JS über `top`/`left` gesteuert (Drag-&-Drop), daher
   sind in den Klassen nur noch Scale/Glow/Opacity enthalten. */
.vision-pill {
  position: absolute;
  /* Initial-Position wird gleich in JS gesetzt; als Fallback oben rechts. */
  top: 18px;
  left: calc(100% - 18px - 56px);
  width: 56px;
  height: 56px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.25), inset 0 1px 0 rgba(255,255,255,0.1);
  font-family: var(--font-ui);
  z-index: 25;
  opacity: 0;
  transform: scale(0.9);
  transition:
    top 600ms cubic-bezier(0.16, 1, 0.3, 1),
    left 600ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vision-pill.is-visible {
  opacity: 1;
  transform: scale(1);
}
/* Cursor greift den Pill: leichter Lift + kräftiger Schatten + warmer Highlight. */
.vision-pill.is-grabbed {
  transform: scale(1.08);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.35), 0 0 0 4px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255,255,255,0.1);
  cursor: grabbing;
}
/* In der Mitte angekommen: dezent vergrössert, atmender Highlight. */
.vision-pill.is-center-glow {
  transform: scale(1.15);
  box-shadow: 0 32px 64px rgba(15, 23, 42, 0.35), 0 0 0 6px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.1);
  animation: visionPillPulse 1400ms var(--ease-out-quart) infinite;
}
@keyframes visionPillPulse {
  0%, 100% { box-shadow: 0 32px 64px rgba(15,23,42,0.35), 0 0 0 6px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.1); }
  50%      { box-shadow: 0 32px 64px rgba(15,23,42,0.35), 0 0 0 12px rgba(15,23,42,0.04), inset 0 1px 0 rgba(255,255,255,0.1); }
}
/* Pill schrumpft und verschwindet, während die drei Fenster aufploppen. */
.vision-pill.is-vanish {
  opacity: 0;
  transform: scale(0.4);
  animation: none;
  pointer-events: none;
}

/* Umlaufender warmer Highlight-Ring (conic-gradient Sichel, die rotiert).
   Maske über Prozent, damit der Ring mitwächst, wenn der Pill z.B. in die
   Mitte animiert wird. */
.vision-pill-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    oklch(74% 0.14 150 / 0) 0deg,
    oklch(74% 0.14 150 / 0) 200deg,
    oklch(74% 0.14 150 / 0.85) 340deg,
    var(--accent) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 47%, #000 48%, #000 55%, transparent 56%);
          mask: radial-gradient(circle, transparent 47%, #000 48%, #000 55%, transparent 56%);
  animation: visionPillRing 1800ms linear infinite;
  filter: drop-shadow(0 0 6px oklch(74% 0.14 150 / 0.35));
}
@keyframes visionPillRing {
  to { transform: rotate(360deg); }
}

.vision-pill-time {
  position: relative;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 11px;
  line-height: 1;
  color: rgba(255,255,255,0.95);
}

@media (max-width: 480px) {
  .vision-pill { top: 12px; left: calc(100% - 12px - 48px); width: 48px; height: 48px; }
  .vision-pill-time { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .vision-pill-ring { animation: none; }
}

/* Scene base */
.vision-scene {
  position: absolute;
  inset: 0;
  padding: clamp(18px, 4%, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vision-scene.is-active { opacity: 1; }

/* Window (shares language with .avura-card but slightly tighter) */
.vision-window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.15), 0 4px 12px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  transform-origin: center center;
  will-change: transform, opacity, filter;
}
.vision-window-bar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 12px;
}
.vision-window-title {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* macOS-Style Traffic Lights (Flat & Clean) */
.vision-traffic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.vision-traffic-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.9;
}
.vision-traffic-red,
.vision-traffic-yellow,
.vision-traffic-green { background: var(--surface-cool-2); }
@media (max-width: 639px) {
  .vision-window-mini .vision-window-bar { padding: 12px 16px; gap: 10px; }
  .vision-window-mini .vision-traffic-dot { width: 9px; height: 9px; }
  .vision-window-mini .vision-traffic { gap: 6px; }
}
.vision-window-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

/* --- SCENE 1 layout ---
   Dokument startet gross & zentral, verkleinert sich dann nach links zurück,
   Mail-Fenster öffnet sich rechts. */
.vision-scene-1 { gap: 18px; }
.vision-window-doc {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 70%;
  height: 80%;
  transform: translate(-50%, 0) rotate(-0.3deg);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), width 700ms cubic-bezier(0.16, 1, 0.3, 1), height 700ms cubic-bezier(0.16, 1, 0.3, 1), left 700ms cubic-bezier(0.16, 1, 0.3, 1), top 700ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  will-change: width, height, top, left, transform;
}
.vision-window-doc.is-shrunk {
  /* Dokument zieht sich nach links in den Hintergrund zurück */
  top: 14%;
  left: 4%;
  width: 44%;
  height: 70%;
  transform: translate(0, 0) rotate(-1.2deg) scale(0.96);
  z-index: 1;
  filter: saturate(0.92) brightness(0.98);
}
.vision-window-mail {
  position: absolute;
  top: 18%;
  right: 5%;
  width: 48%;
  height: 72%;
  transform: translate(110%, 6%) rotate(2deg) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}
.vision-window-mail.is-open {
  transform: translate(0, 0) rotate(0.6deg) scale(1);
  opacity: 1;
}
.vision-window-mail.is-sent {
  transform: translate(40%, -60%) rotate(8deg) scale(0.85);
  opacity: 0;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 767px) {
  .vision-window-doc { width: 90%; left: 50%; top: 4%; height: auto; transform: translate(-50%, 0) rotate(-0.3deg); }
  .vision-window-doc.is-shrunk { width: 86%; left: 7%; top: 4%; height: auto; transform: translate(0, 0) rotate(-1deg) scale(0.97); }
  .vision-window-mail { width: 90%; right: 5%; left: auto; top: auto; bottom: 4%; height: auto; }
  .vision-window-mail.is-sent { transform: translate(0, 120%) rotate(4deg) scale(0.9); }
}

/* Doc window innards (abstrahiert) */
.vision-doc-line {
  height: 6px;
  background: var(--surface-cool);
  border-radius: 3px;
}
.vision-doc-line.short { width: 65%; }
.vision-doc-clause {
  padding: 16px 20px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 600ms cubic-bezier(0.16, 1, 0.3, 1), border-color 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vision-doc-clause.is-highlight {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.vision-doc-clause-label {
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.vision-doc-clause-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
  min-height: 1.45em;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}

/* Caret für Szene 2 (Inputs/Outputs der drei Wege) */
.is-typing.vision-mini-input::after,
.is-typing.vision-mini-output::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: currentColor;
  animation: visionTypeCaret 900ms steps(2, end) infinite;
}
@keyframes visionTypeCaret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .is-typing.vision-mini-input::after,
  .is-typing.vision-mini-output::after { animation: none; opacity: 0; }
}

/* Fake-Text Balken für Szene 1 (Klausel, Kommentar, Mail) */
.vision-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--ink-soft);
  opacity: 0.6;
  width: 0;
  max-width: 100%;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vision-bar.is-drawn { width: var(--vision-bar-w, 80%); }
.vision-doc-clause-text .vision-bar { background: var(--ink); opacity: 0.85; height: 7px; }
.vision-doc-comment .vision-bar { background: var(--ink-soft); opacity: 0.4; height: 5px; }
#visionMailSubject .vision-bar { background: var(--ink); opacity: 0.8; height: 8px; border-radius: 4px; }
.vision-mail-body .vision-bar { background: var(--ink-soft); opacity: 0.5; height: 6px; }

/* Absatz-Container für Mail-Body (mehrere Zeilen pro Absatz, Luft zwischen Absätzen) */
.vision-paragraph {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .vision-bar { transition: none; width: var(--vision-bar-w, 80%); }
}
.vision-doc-comment {
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--surface-cool);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-soft);
  min-height: 1.8em;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}

/* Mail window innards */
.vision-mail-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.vision-mail-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  min-width: 44px;
}
.vision-mail-val {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-soft);
}
#visionMailSubject {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 16px;
}
.vision-mail-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  flex: 1;
  min-height: 6em;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 10px;
}
.vision-mail-send {
  align-self: flex-end;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: transform 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart);
}
.vision-mail-send.is-pressed {
  transform: scale(0.94);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* --- SCENE 2 layout: Spotlight.
   Jeweils EINE Methode mit Titel-Karte (01/02/03) oben und einem einzelnen
   Fenster mittig. Die drei Fenster teilen sich denselben Spot — nur das
   aktive ist sichtbar. Dadurch wandert der Blick nicht zwischen drei
   Kacheln, sondern bleibt auf einer Sache. */
.vision-scene-2 {
  padding: clamp(18px, 4%, 36px) clamp(14px, 3%, 32px) clamp(14px, 3%, 28px);
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
  gap: clamp(8px, 1.4vw, 14px);
}
@media (max-width: 639px) {
  .vision-scene-2 {
    padding: 14px 12px 14px;
    gap: 8px;
  }
}

/* Spotlight-Container: CSS Grid.
   Alle drei Fenster sitzen im selben Grid-Zellen-Slot (grid-area: 1 / 1).
   So bestimmen alle die Höhe des Containers mit (bzw. der grösste gewinnt),
   aber sie müssen nicht zwischen position: absolute und relative wechseln,
   was zu springenden Animationen führt. */
.vision-grid {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 100%;
  align-items: flex-start;
  justify-items: center;
  transform: translateZ(0);
}
/* Basis-Fenster: kompakt, an Inhalt angepasst. Breite gedeckelt. */
.vision-window-mini {
  grid-area: 1 / 1;
  width: min(460px, 100%);
  max-height: min(92%, 340px);
  height: auto;
  opacity: 0;
  transform: translateY(24px) scale(0.95);
  transition:
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 1;
}
.vision-window-mini.is-in {
  /* Aktives Fenster: Sichtbar und oben. */
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
/* Exit: Fenster sinkt leicht nach oben weg, schneller als der Enter. */
.vision-window-mini.is-out {
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
  transition:
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────────────
   Pro Methode ein eigenes Bewegungs­profil. Ohne diese Overrides
   fühlen sich 01/02/03 wie dreimal dasselbe Fenster an — gleiche
   Kurve, gleiche Richtung, gleiche Dauer. Semantisch passt:
     · A (Keywords) → präzise, getippt, schnell          → quint
     · B (Diktat)   → weich, atmend, kurzer Blur-Tune-In → quart
     · C (Inline)   → entschieden, unmittelbar, "Pop"    → expo
   Specificity (.vision-window-mini.vision-window-x) liegt über den
   generischen Regeln darüber. */

/* A — Keywords: steigt leicht diagonal, setzt sich crisp. Exit gleitet nach links weg. */
.vision-window-mini.vision-window-a {
  transform: translate(10px, 22px) scale(0.96);
  transition:
    transform 720ms var(--ease-out-quint),
    opacity 520ms var(--ease-out-quint),
    filter 520ms var(--ease-out-quint);
}
.vision-window-mini.vision-window-a.is-in {
  transform: translate(0, 0) scale(1);
}
.vision-window-mini.vision-window-a.is-out {
  transform: translate(-22px, -4px) scale(0.98);
  transition:
    transform 420ms var(--ease-out-quart),
    opacity 320ms var(--ease-out-quart);
}

/* B — Diktat: weicher Lift mit sehr kurzem Blur-"tune in". Exit driftet nach oben mit Rest-Blur. */
.vision-window-mini.vision-window-b {
  transform: translateY(28px) scale(0.94);
  filter: blur(3px);
  transition:
    transform 860ms var(--ease-out-quart),
    opacity 640ms var(--ease-out-quart),
    filter 640ms var(--ease-out-quart);
}
.vision-window-mini.vision-window-b.is-in {
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.vision-window-mini.vision-window-b.is-out {
  transform: translateY(-14px) scale(0.985);
  filter: blur(1.5px);
  transition:
    transform 460ms var(--ease-out-quart),
    opacity 380ms var(--ease-out-quart),
    filter 380ms var(--ease-out-quart);
}

/* C — Inline: kleiner Start, entschiedener Pop in die Position. Exit "puffs" leicht nach aussen. */
.vision-window-mini.vision-window-c {
  transform: translateY(14px) scale(0.9);
  transition:
    transform 780ms var(--ease-out-expo),
    opacity 560ms var(--ease-out-expo),
    filter 560ms var(--ease-out-expo);
}
.vision-window-mini.vision-window-c.is-in {
  transform: translateY(0) scale(1);
}
.vision-window-mini.vision-window-c.is-out {
  transform: translateY(-6px) scale(1.035);
  transition:
    transform 400ms var(--ease-out-quint),
    opacity 340ms var(--ease-out-quint);
}
@media (min-width: 900px) {
  .vision-window-mini { 
    width: min(580px, 100%); 
    max-height: min(86%, 420px); 
  }
  .vision-window-mini .vision-window-bar {
    padding: 14px 20px;
    gap: 12px;
  }
  .vision-window-mini .vision-window-body {
    padding: 24px 32px;
    gap: 14px;
  }
  .vision-window-mini .vision-mini-input,
  .vision-window-mini .vision-mini-inline {
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 8px;
  }
  .vision-window-mini .vision-mini-output {
    font-size: 15.5px;
    min-height: 2.8em;
  }
  .vision-window-mini .vision-window-title { 
    font-size: 11px; 
  }
  .vision-window-mini .vision-mini-label { 
    font-size: 10.5px; 
  }
  .vision-window-mini .avura-dictate-mic {
    padding: 10px 14px;
    gap: 12px;
  }
  .vision-window-mini .avura-wave {
    height: 18px;
  }
  .vision-window-mini .avura-wave span:nth-child(1) { height: 8px; }
  .vision-window-mini .avura-wave span:nth-child(2) { height: 12px; }
  .vision-window-mini .avura-wave span:nth-child(3) { height: 18px; }
  .vision-window-mini .avura-wave span:nth-child(4) { height: 10px; }
  .vision-window-mini .avura-wave span:nth-child(5) { height: 14px; }
  .vision-window-mini .avura-wave span:nth-child(6) { height: 9px; display: inline-block; }
  .vision-window-mini .avura-wave span:nth-child(7) { height: 15px; display: inline-block; }

  .vision-window-doc .vision-window-bar,
  .vision-window-mail .vision-window-bar {
    padding: 14px 20px;
  }
  .vision-window-doc .vision-window-body,
  .vision-window-mail .vision-window-body {
    padding: 24px 32px;
    gap: 16px;
  }
  .vision-doc-clause {
    padding: 20px 24px;
    gap: 10px;
  }
  .vision-doc-clause-label {
    font-size: 11px;
  }
  .vision-doc-clause-text {
    font-size: 14px;
    line-height: 1.5;
  }
  .vision-doc-comment {
    padding: 14px 18px;
    font-size: 13px;
    gap: 8px;
  }
  .vision-mail-meta {
    padding-bottom: 10px;
    gap: 12px;
  }
  .vision-mail-label {
    font-size: 10.5px;
    min-width: 52px;
  }
  .vision-mail-val {
    font-size: 13px;
  }
  .vision-mail-body {
    font-size: 14px;
    gap: 20px;
    padding-top: 12px;
  }
  .vision-mail-send {
    padding: 10px 20px;
    font-size: 13px;
  }

  .vision-bar {
    height: 8px;
    border-radius: 4px;
  }
  .vision-doc-clause-text .vision-bar { height: 9px; }
  .vision-doc-comment .vision-bar { height: 7px; }
  #visionMailSubject .vision-bar { height: 10px; border-radius: 5px; }
  .vision-mail-body .vision-bar { height: 8px; }
}

@media (min-width: 1140px) {
  .vision-window-mini { 
    width: min(680px, 100%); 
    max-height: min(88%, 500px); 
  }
  .vision-window-mini .vision-window-bar {
    padding: 18px 24px;
    gap: 16px;
  }
  .vision-window-mini .vision-window-body {
    padding: 32px 40px;
    gap: 18px;
  }
  .vision-window-mini .vision-mini-input,
  .vision-window-mini .vision-mini-inline {
    font-size: 16px;
    padding: 16px 20px;
    border-radius: 10px;
    min-height: 3.2em;
  }
  .vision-window-mini .vision-mini-output {
    font-size: 18px;
    min-height: 3.2em;
  }
  .vision-window-mini .vision-window-title { 
    font-size: 12px; 
  }
  .vision-window-mini .vision-mini-label { 
    font-size: 11.5px; 
  }
  .vision-window-mini .avura-dictate-mic {
    padding: 12px 18px;
    gap: 14px;
    border-radius: 10px;
  }
  .vision-window-mini .avura-wave {
    height: 22px;
    gap: 4px;
  }
  .vision-window-mini .avura-wave span { width: 3px; }
  .vision-window-mini .avura-wave span:nth-child(1) { height: 10px; }
  .vision-window-mini .avura-wave span:nth-child(2) { height: 15px; }
  .vision-window-mini .avura-wave span:nth-child(3) { height: 22px; }
  .vision-window-mini .avura-wave span:nth-child(4) { height: 12px; }
  .vision-window-mini .avura-wave span:nth-child(5) { height: 17px; }
  .vision-window-mini .avura-wave span:nth-child(6) { height: 11px; }
  .vision-window-mini .avura-wave span:nth-child(7) { height: 18px; }

  .vision-window-doc .vision-window-bar,
  .vision-window-mail .vision-window-bar {
    padding: 18px 24px;
  }
  .vision-window-doc .vision-window-body,
  .vision-window-mail .vision-window-body {
    padding: 36px 48px;
    gap: 20px;
  }
  .vision-doc-clause {
    padding: 24px 32px;
    gap: 12px;
    border-radius: 12px;
  }
  .vision-doc-clause-label {
    font-size: 12.5px;
  }
  .vision-doc-clause-text {
    font-size: 16.5px;
    line-height: 1.55;
  }
  .vision-doc-comment {
    padding: 18px 24px;
    font-size: 15px;
    gap: 10px;
    border-radius: 8px;
  }
  .vision-mail-meta {
    padding-bottom: 12px;
    gap: 16px;
  }
  .vision-mail-label {
    font-size: 11.5px;
    min-width: 64px;
  }
  .vision-mail-val {
    font-size: 15px;
  }
  .vision-mail-body {
    font-size: 16.5px;
    gap: 24px;
    padding-top: 16px;
  }
  .vision-mail-send {
    padding: 12px 24px;
    font-size: 14.5px;
    border-radius: 8px;
  }

  .vision-bar {
    height: 10px;
    border-radius: 5px;
  }
  .vision-doc-clause-text .vision-bar { height: 11px; }
  .vision-doc-comment .vision-bar { height: 8px; }
  #visionMailSubject .vision-bar { height: 12px; border-radius: 6px; }
  .vision-mail-body .vision-bar { height: 10px; }

  .vision-pill {
    width: 64px;
    height: 64px;
    left: calc(100% - 24px - 64px);
    top: 24px;
  }
  .vision-pill-time {
    font-size: 13px;
  }
}
@media (max-width: 639px) {
  .vision-window-mini {
    width: 100%;
    max-height: 100%;
  }
}
/* Reduced-Motion-Fallback nutzt ohnehin den statischen Bereich und zeigt
   die vision-stage nicht — diese Klassen sind dann irrelevant. */
@media (prefers-reduced-motion: reduce) {
  .vision-window-mini.is-dim,
  .vision-window-mini.is-active-step { filter: none; }
}

/* Legacy-Klassen aus dem alten Parallel-Modus — werden vom neuen JS nicht
   mehr gesetzt, aber falls doch irgendwo, neutral halten. */
.vision-window-mini.is-dim { opacity: 0.42; filter: saturate(0.75); }
.vision-window-mini.is-active-step {
  box-shadow: 0 32px 64px -16px rgba(15, 23, 42, 0.25), 0 0 0 2px oklch(74% 0.14 150 / 0.55);
}

/* Kompakte innere Typo nur in Scene 2 — alles muss in die Kachel passen. */
.vision-window-mini .vision-window-body {
  padding: 16px 20px;
  gap: 10px;
  overflow: hidden;
}
.vision-window-mini .vision-mini-input,
.vision-window-mini .vision-mini-inline {
  font-size: 13px;
  padding: 10px 14px;
  min-height: 0;
  line-height: 1.4;
}
.vision-window-mini .vision-mini-output {
  font-size: 14px;
  min-height: 0;
  line-height: 1.4;
}
.vision-window-mini .vision-window-title { font-size: 10px; }
.vision-window-mini .vision-mini-label { font-size: 10px; }

/* Mobile: Scene 2 zeigt jeweils genau EIN Fenster im Spotlight-Layout.
   Wir haben deutlich mehr Platz als früher (3-Stack), also wird die
   Typografie wieder auf komfortable Grössen gebracht und die Mic-Pille
   bekommt ihren Rahmen zurück. */
@media (max-width: 639px) {
  .vision-window-mini .vision-window-body {
    padding: 16px 20px;
    gap: 10px;
  }
  .vision-window-mini .vision-mini-input,
  .vision-window-mini .vision-mini-inline {
    padding: 10px 14px;
    font-size: 13px;
    min-height: 2.4em;
    line-height: 1.4;
  }
  .vision-window-mini .vision-mini-output {
    font-size: 14.5px;
    min-height: 2.4em;
    line-height: 1.4;
  }
  .vision-window-mini .vision-mini-divider { margin: 8px 0; }
  .vision-window-mini .vision-mini-label {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .vision-window-mini .vision-window-title { font-size: 11px; }

  /* Mic-Indikator: Pille mit Rand + Wellenform, jetzt in voller Grösse —
     keine Notwendigkeit mehr zu schrumpfen, weil wir Platz haben. */
  .vision-window-mini .avura-dictate-mic {
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: var(--surface-cool);
    border-radius: 8px;
    height: auto;
    margin-bottom: 2px;
    align-self: flex-start;
  }
  .vision-window-mini .avura-rec-dot {
    width: 8px;
    height: 8px;
  }
  .vision-window-mini .avura-wave {
    gap: 3px;
    height: 16px;
  }
  .vision-window-mini .avura-wave span {
    width: 2px;
  }
  .vision-window-mini .avura-wave span:nth-child(1) { height: 6px; }
  .vision-window-mini .avura-wave span:nth-child(2) { height: 10px; }
  .vision-window-mini .avura-wave span:nth-child(3) { height: 14px; }
  .vision-window-mini .avura-wave span:nth-child(4) { height: 8px; }
  .vision-window-mini .avura-wave span:nth-child(5) { height: 11px; }
  .vision-window-mini .avura-wave span:nth-child(6) { height: 7px; display: inline-block; }
  .vision-window-mini .avura-wave span:nth-child(7) { height: 12px; display: inline-block; }
}

/* Mini-window innards */
.vision-mini-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-bottom: -2px;
}
.vision-mini-input {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--surface-cool);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 2.8em;
  line-height: 1.4;
  position: relative;
}
.vision-mini-input:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-mute);
  opacity: 0.4;
  font-style: italic;
}
.vision-mini-output:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-mute);
  opacity: 0.25;
  font-style: italic;
}
.vision-mini-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}
.vision-mini-output {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
  margin-top: 12px;
  min-height: 4em;
}
.vision-mini-output:empty {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 12px 0 0 0;
  margin-top: 0;
  min-height: 2.6em;
}
/* Schneller Reveal: wird genutzt, wenn der Eintrag am Stück aus dem
   Modell zurückkommt (Diktat, Inline) — kein Zeichen-für-Zeichen. */
.vision-mini-output.is-reveal {
  animation: visionOutputReveal 460ms var(--ease-out-quint);
}
@keyframes visionOutputReveal {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vision-mini-output.is-reveal { animation: none; }
}

/* Meta-Chips über dem Eintragstext: Mandat + Zeit werden automatisch
   befüllt, sobald Avura den Eintrag vorschlägt. Clean, ruhig, unauffällig. */
.vision-mini-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.vision-meta-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 9px 4px 10px;
  background: var(--surface-cool);
  border: 1px solid var(--border);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms var(--ease-out-quint), transform 400ms var(--ease-out-quint);
}
.vision-meta-chip.is-filled {
  opacity: 1;
  transform: translateY(0);
}
.vision-meta-label {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 8.5px;
  color: var(--ink-mute);
  font-weight: 500;
}
.vision-meta-value {
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.vision-meta-chip[data-field="matter"] .vision-meta-value {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--navy);
}
@media (max-width: 639px) {
  .vision-meta-chip { padding: 5px 11px; gap: 7px; }
  .vision-meta-label { font-size: 9px; letter-spacing: 0.08em; }
  .vision-meta-value { font-size: 12px; }
  .vision-meta-chip[data-field="matter"] .vision-meta-value { font-size: 13px; }
}

.vision-mini-inline {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-cool);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  line-height: 1.4;
  min-height: 2.8em;
}
.vision-mini-inline .avura-ghost-inline {
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 300ms var(--ease-out-quart);
}
.vision-mini-inline .avura-ghost-inline.is-suggesting {
  opacity: 0.8;
  animation: visionGhostShimmer 1800ms ease-in-out infinite;
}
.vision-mini-inline .avura-ghost-inline.is-shown { opacity: 1; animation: none; }
@keyframes visionGhostShimmer {
  0%, 100% { opacity: 0.75; color: var(--ink-soft); }
  50%      { opacity: 1; color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .vision-mini-inline .avura-ghost-inline.is-suggesting { animation: none; }
}
.vision-mini-inline .avura-dictate-caret { height: 0.9em; vertical-align: -1px; }
.vision-mini-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-mute);
  align-self: flex-start;
}
.vision-kbd {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-cool);
  color: var(--ink);
}
/* Fenster-Titel in Scene 2 reagiert subtil auf aktiven Zustand */
.vision-window-mini .vision-window-title {
  transition: color 220ms var(--ease-out-quart);
}
.vision-window-mini.is-typing .vision-window-title,
.vision-window-mini.is-thinking .vision-window-title {
  color: var(--ink);
}

/* Tab-Press Flash — macht die Inline-Annahme sichtbar */
.vision-window-mini.is-tab .vision-mini-inline {
  animation: visionTabFlash 320ms var(--ease-out-quart);
}
@keyframes visionTabFlash {
  0%   { background: var(--accent-softer); border-color: var(--accent-soft); }
  100% { background: var(--surface-cool); border-color: var(--border); }
}

.vision-accepted-text {
  animation: visionGhostAccept 800ms var(--ease-out-quart) forwards;
  border-radius: 4px;
}
@keyframes visionGhostAccept {
  0%   { background-color: var(--accent-softer); color: var(--accent); }
  50%  { background-color: var(--accent-softer); color: var(--accent); }
  100% { background-color: transparent; color: inherit; }
}

/* Cursor-Pool: 1 Master-Cursor für Szene 1 + 3 separate Cursor für Szene 2
   Alle teilen dasselbe Grund-CSS, nur Position wird per JS gesteuert. */
.vision-cursor {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-9999px, -9999px);
  pointer-events: none;
  z-index: 30;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
  transition: transform 520ms var(--ease-out-quart), opacity 220ms var(--ease-out-quart);
  opacity: 0;
}
.vision-cursor.is-shown { opacity: 1; }
.vision-cursor.is-click {
  transition-duration: 90ms;
}
.vision-cursor.is-drag path { fill: var(--navy); }
/* Auf Mobile spielen die drei Scene-2-Cursor keine Rolle (CTAs sind dort
   ausgeblendet). Wir verstecken sie, damit nichts in die obere linke Ecke
   springt, wenn moveTo() auf ein verstecktes Element zielt. Der Master-Cursor
   für Scene 1 bleibt sichtbar. */
@media (max-width: 639px) {
  .vision-cursor-a,
  .vision-cursor-b,
  .vision-cursor-c { display: none; }
}

/* Click ripple */
.vision-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-9999px, -9999px);
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
  opacity: 0;
  z-index: 19;
}
.vision-ripple.is-go {
  animation: visionRipple 520ms var(--ease-out-quart) forwards;
}
@keyframes visionRipple {
  0%   { transform: translate(var(--x, 0), var(--y, 0)) scale(0.4); opacity: 0.7; }
  100% { transform: translate(var(--x, 0), var(--y, 0)) scale(3.4); opacity: 0; }
}

/* Section-dark overrides removed for light mode */
/* #vision .section-intro { color: var(--surface); }
#vision .kicker { color: rgba(255,255,255,0.72); } */

/* Static fallback (reduced-motion) */
.vision-static-fallback {
  display: none;
  margin-top: 28px;
  color: var(--ink);
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .vision-stage { display: none; }
  .vision-static-fallback {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 820px;
    margin: 0 auto;
  }
  .vision-static-row {
    display: grid;
    grid-template-columns: 90px 20px 1fr;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  }
  .vision-static-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
  }
  .vision-static-arrow { color: var(--ink-mute); text-align: center; }
  .vision-static-entry {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.4;
  }
}

/* ───────────────────────────────────────────────
   Team section
   ─────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.team-card {
  padding: 0;
  text-align: left;
  background: transparent;
  border: none;
}
.team-avatar {
  display: none;
}
/* Solo founder card */
.founder-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1024px;
  margin: 0 auto;
}
.founder-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.founder-header {
  display: flex;
  align-items: center;
  gap: 24px;
}
.founder-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-cool-2);
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founder-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
}
.founder-photo-placeholder svg {
  width: 40px;
  height: 40px;
}
.founder-meta {
  display: flex;
  flex-direction: column;
}
.team-name {
  font-family: var(--font-display);
  font-size: 24px;
  /* At 24px a 300-weight Didone starts to lose structural integrity,
     so we hold this name block at 400 Regular while the display scale
     stays at 300 Light. */
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 4px;
}
.team-role {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0;
}
.team-bio {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--ink-soft);
  margin: 0;
  text-align: left;
}
.team-bio p {
  margin: 0 0 16px;
}
.team-bio p:last-child {
  margin: 0;
}
.team-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--navy);
  margin: 0;
  padding: 0;
  border: none;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
.team-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  text-align: center;
  margin: clamp(40px, 6vw, 56px) 0 0;
}

/* At iPad portrait, the founder photo/bio and the italic quote each
   want ~50% width — but half of ~740px is ~340px, which makes "Sahan
   Hatemo" wrap to two lines and forces the justified quote into ~28ch
   columns with visible rivers. The split layout returns at 1024px
   where each column clears 45ch and the name stays on one line.
   On iPad portrait we gently upsize type for reading comfort without
   introducing a second column. */
@media (min-width: 768px) and (max-width: 1023px) {
  .founder-card { gap: 40px; }
  .founder-photo { width: 104px; height: 104px; }
  .team-name { font-size: 28px; }
  .team-role { font-size: 18px; }
  .team-bio { font-size: 17px; line-height: 1.65; }
  .team-quote { font-size: 24px; line-height: 1.45; }
}
@media (min-width: 1024px) {
  .founder-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .founder-photo {
    width: 104px;
    height: 104px;
  }
  .team-name {
    font-size: 28px;
  }
  .team-role {
    font-size: 18px;
  }
  .team-bio {
    font-size: 17px;
    line-height: 1.65;
  }
  .team-quote {
    font-size: 26px;
    line-height: 1.45;
  }
}

@media (min-width: 768px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; }
}
@media (min-width: 1024px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 60px; }
}

/* ───────────────────────────────────────────────
   Final CTA — quiet closing block.
   Left-aligned, no background card. The invitation
   is a Serif sentence, and the email itself is the
   primary action (large Display link).
   ─────────────────────────────────────────────── */
.cta-close {
  padding: clamp(48px, 9vw, 96px) 0;
  max-width: 720px;
}
.cta-kicker {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(24px, 3vw, 32px);
}
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 370;
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  color: var(--navy);
  text-wrap: balance;
}
.cta-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 clamp(32px, 4vw, 48px);
}
.cta-mail {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 370;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  transition: border-color 220ms var(--ease-out-quart), color 220ms var(--ease-out-quart);
}
.cta-mail:hover,
.cta-mail:focus-visible {
  border-bottom-color: var(--navy);
  color: var(--navy);
}
.cta-mail:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 6px;
  border-radius: 2px;
}
.cta-mail-arrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6em;
  line-height: 1;
  transform: translateY(-2px);
  transition: transform 260ms var(--ease-out-quart);
}
.cta-mail:hover .cta-mail-arrow,
.cta-mail:focus-visible .cta-mail-arrow {
  transform: translate(4px, -2px);
}

/* ───────────────────────────────────────────────
   Footer
   ─────────────────────────────────────────────── */
.footer {
  padding: 60px 0 40px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.footer-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.footer-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-mute);
  margin: 16px 0 0;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: -4px -8px;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 10px 8px;
  transition: color 240ms var(--ease-out-quart);
}
.footer-link:hover { color: var(--navy); }
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-mute);
}
@media (min-width: 768px) {
  .footer-top { flex-direction: row; justify-content: space-between; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

/* ───────────────────────────────────────────────
   WIDGET 1 — Showcase carousel (minimalized)
   ─────────────────────────────────────────────── */
.avura-showcase-shell { position: relative; width: 100%; overflow: hidden; margin-top: 32px; }
@media (min-width: 768px) {
  .avura-showcase-shell { margin-top: 40px; }
}
.avura-showcase {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 16px 7.5vw 32px;
  scroll-padding-inline: 7.5vw;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
@media (min-width: 768px) {
  .avura-showcase { gap: 20px; padding: 20px 4px 40px 4px; scroll-padding-inline: 4px; scroll-snap-type: x proximity; }
}
@media (min-width: 1024px) {
  .avura-showcase { gap: 24px; }
}
.avura-showcase::-webkit-scrollbar { display: none; }
.avura-showcase-fade { display: none; }

/* Desktop affordance: the cursor hints that the strip itself is draggable.
   Kept off on touch-first viewports so mobile tap targets stay clean. */
@media (min-width: 1024px) and (hover: hover) {
  .avura-showcase { cursor: grab; }
  .avura-showcase.is-grabbing {
    cursor: grabbing;
    scroll-snap-type: none; /* Smooth 1:1 drag; snap re-engages on release */
    user-select: none;
    -webkit-user-select: none;
  }
}

.avura-dots { display: flex; justify-content: center; gap: 4px; margin-top: 8px; padding: 4px 0; }
.avura-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  position: relative;
}
.avura-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 280ms var(--ease-out-quart), transform 280ms var(--ease-out-quart);
}
.avura-dot.is-active::before { background: var(--navy); transform: scale(1.15); }
.avura-dot:hover::before { background: var(--ink-mute); }
@media (min-width: 1024px) { .avura-dots { display: none; } }

.avura-card {
  flex: 0 0 85vw;
  max-width: 340px;
  height: 380px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  scroll-snap-align: center;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 450ms var(--ease-out-quart), box-shadow 450ms var(--ease-out-quart), border-color 450ms var(--ease-out-quart);
}
@media (min-width: 640px) {
  .avura-card { flex-basis: 60vw; max-width: 340px; }
}
@media (min-width: 768px) {
  .avura-card { flex: 0 0 320px; max-width: none; height: 380px; padding: 32px; scroll-snap-align: start; align-self: stretch; }
}
.avura-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.09);
  border-color: rgba(15, 23, 42, 0.12);
}

.avura-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin-bottom: 12px; }
.avura-title { font-family: var(--font-ui); font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; color: var(--navy); margin: 0 0 24px 0; }
.avura-demo { flex: 1; display: flex; flex-direction: column; }

.avura-raw, .avura-refined, .avura-line, .avura-style-output, .avura-completion-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
}
.avura-raw { color: var(--ink-soft); }
.avura-refined { color: var(--navy); }
.avura-divider { height: 1px; background: var(--border); margin: 16px 0; }

/* Widget timer */
.avura-timer-widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; flex: 1; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02); }
.avura-timer-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-mute); margin-bottom: 12px; }
.avura-status { display: flex; align-items: center; gap: 8px; }
.avura-status .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-mute);
  position: relative;
  transition: background 320ms var(--ease-out-quart);
}
.avura-status .dot.paused { background: var(--ink-mute); }
.avura-status .dot.running { background: var(--navy); }
.avura-status .dot.running::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--navy);
  animation: avuraPulse 1800ms var(--ease-out-expo) infinite;
}
@keyframes avuraPulse {
  0% { transform: scale(1); opacity: 0.55; }
  80% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .avura-status .dot.running::after { animation: none; display: none; }
}
.avura-add {
  position: relative;
  color: var(--navy);
  font-size: 20px;
  line-height: 1;
  padding: 8px;
  margin: -8px;
}
.avura-add::before {
  content: "";
  position: absolute;
  inset: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.avura-time { font-family: var(--font-ui); font-size: 28px; color: var(--navy); font-weight: 300; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.avura-matter { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; }
.avura-bottom { display: flex; justify-content: space-between; margin-top: auto; }
.icon-btn, .avura-arrow-btn {
  position: relative;
  color: var(--ink-soft);
  padding: 8px;
  transition: color 260ms var(--ease-out-quart), transform 220ms var(--ease-out-quart);
}
.icon-btn::before, .avura-arrow-btn::before {
  content: "";
  position: absolute;
  inset: -10px;
  min-width: 44px;
  min-height: 44px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.icon-btn:hover, .avura-arrow-btn:hover { color: var(--navy); }
.icon-btn:active, .avura-arrow-btn:active { transform: scale(0.92); transition-duration: 80ms; }
.icon-btn.is-primary { color: var(--navy); font-weight: bold; }
.avura-right-stack { display: flex; align-items: center; }
.avura-tdot { width: 4px; height: 4px; border-radius: 50%; background: var(--navy); margin: 0 2px; opacity: 0.2; transition: opacity 300ms var(--ease-out-quart); }
.avura-tdot.is-active { opacity: 1; }
.avura-left-controls { display: flex; gap: 8px; }
.avura-right-controls { display: flex; gap: 4px; }

.avura-ghost-inline { color: var(--ink-soft); opacity: 0.65; }
.avura-style-label, .avura-prev-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin-bottom: 12px; }
.avura-style-pills { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.avura-style-pill { padding: 4px 12px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--ink-soft); }
.avura-style-pill.active { background: var(--navy); color: var(--surface); border-color: var(--navy); }
.avura-prev-list { display: flex; flex-direction: column; gap: 8px; }
.avura-prev-item { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-soft); }

/* Dictate card */
.avura-demo-dictate { gap: 14px; }
.avura-dictate-mic {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  align-self: flex-start;
}
.avura-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-mute);
  position: relative;
  flex: none;
  transition: background 260ms var(--ease-out-quart);
}
.avura-dictate-mic.is-recording .avura-rec-dot {
  background: var(--rec);
}
.avura-rec-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--rec);
  opacity: 0;
}
.avura-dictate-mic.is-recording .avura-rec-dot::after {
  animation: avuraRecPulse 1600ms var(--ease-out-quart) infinite;
}
@keyframes avuraRecPulse {
  0% { transform: scale(1); opacity: 0.55; }
  75% { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}
.avura-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}
.avura-wave span {
  display: block;
  width: 2px;
  background: var(--ink-mute);
  border-radius: 2px;
  transform-origin: center;
  opacity: 0.3;
  transform: scaleY(0.2);
  transition: background 260ms var(--ease-out-quart), opacity 260ms var(--ease-out-quart), transform 260ms var(--ease-out-quart);
}
.avura-dictate-mic.is-recording .avura-wave span {
  background: var(--navy);
  opacity: 0.75;
  animation: avuraWave 900ms var(--ease-out-quart) infinite;
}
.avura-wave span:nth-child(1) { animation-delay: 0ms;  height: 6px;  }
.avura-wave span:nth-child(2) { animation-delay: 120ms; height: 12px; }
.avura-wave span:nth-child(3) { animation-delay: 240ms; height: 16px; }
.avura-wave span:nth-child(4) { animation-delay: 360ms; height: 10px; }
.avura-wave span:nth-child(5) { animation-delay: 480ms; height: 14px; }
.avura-wave span:nth-child(6) { animation-delay: 600ms; height: 8px;  }
.avura-wave span:nth-child(7) { animation-delay: 720ms; height: 11px; }
@keyframes avuraWave {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .avura-rec-dot::after { animation: none; display: none; }
  .avura-wave span { animation: none; transform: scaleY(0.6); }
}
.avura-dictate-raw {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-soft);
  background: var(--bg);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  line-height: 1.45;
  min-height: 2.9em;
}
.avura-dictate-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(2px);
  animation: avuraDictateWord 260ms var(--ease-out-quart) forwards;
  margin-right: 0.28em;
}
@keyframes avuraDictateWord {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.avura-dictate-caret {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: var(--navy);
  opacity: 0.55;
  margin-left: 1px;
  vertical-align: -1px;
  animation: avuraCaret 900ms steps(2) infinite;
}
@keyframes avuraCaret {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .avura-dictate-word { animation: none; opacity: 1; transform: none; }
  .avura-dictate-caret { animation: none; opacity: 0; }
}
.avura-dictate-arrow { color: var(--navy); opacity: 0.35; align-self: center; font-size: 16px; line-height: 1; }
.avura-dictate-refined {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--navy);
}

/* Desktop navigation arrows for the showcase carousel.
   Hidden below 1024px where the dots + swipe are the primary affordance.
   Opacity is toggled via the `.visible` class from JS based on scroll position. */
.avura-nav-arrow {
  position: absolute;
  top: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition:
    opacity 260ms var(--ease-out-quart),
    transform 260ms var(--ease-out-quart),
    background 260ms var(--ease-out-quart),
    box-shadow 260ms var(--ease-out-quart),
    border-color 260ms var(--ease-out-quart);
  -webkit-backdrop-filter: saturate(150%) blur(6px);
  backdrop-filter: saturate(150%) blur(6px);
  z-index: 2;
}
.avura-nav-arrow-left { left: 12px; }
.avura-nav-arrow-right { right: 12px; }
.avura-nav-arrow.visible { opacity: 1; pointer-events: auto; }
.avura-nav-arrow:hover {
  background: var(--surface);
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
  transform: translateY(-50%) scale(1.06);
}
.avura-nav-arrow:active { transform: translateY(-50%) scale(0.96); }
.avura-nav-arrow:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.avura-nav-arrow svg { display: block; }
@media (min-width: 1024px) {
  .avura-nav-arrow { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .avura-nav-arrow,
  .avura-nav-arrow:hover,
  .avura-nav-arrow:active { transition: opacity 200ms linear; transform: translateY(-50%); }
}

/* Carousel mobile-specific padding handled on .avura-showcase base rule (7.5vw) */

/* ───────────────────────────────────────────────
   WIDGET 2 — Value calculator (minimalized)
   ─────────────────────────────────────────────── */
.avura-savings { width: 100%; max-width: 900px; margin: 0 auto; }
.avura-savings-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin-bottom: 16px; text-align: center; }
.avura-savings-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); font-weight: 380; letter-spacing: -0.015em; text-align: center; margin-bottom: 16px; color: var(--navy); }
.avura-savings-text { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--ink-soft); margin: 0 auto 48px; max-width: 600px;text-align: center; }

.avura-card-calc { display: flex; flex-direction: column; gap: 40px; align-items: stretch; background: transparent; }
/* iPad portrait has plenty of horizontal room for sliders + result
   side-by-side. Going row at 768px keeps the calculator on one screen
   instead of forcing a long vertical scroll past three stacked sliders. */
@media (min-width: 768px) {
  .avura-card-calc { flex-direction: row; gap: 48px; align-items: stretch; }
}
@media (min-width: 1024px) {
  .avura-card-calc { gap: 60px; }
}
.avura-sliders { flex: 1; display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 768px) { .avura-sliders { gap: 32px; } }
.avura-slider-row { display: flex; flex-direction: column; gap: 10px; }
.avura-slider-header { display: flex; justify-content: space-between; align-items: baseline; }
.avura-slider-label { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.avura-slider-val { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Larger hit-area on range thumb for touch */
.avura-savings input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; outline: none; touch-action: pan-y; cursor: pointer; }
.avura-savings input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--border); border-radius: 2px; }
.avura-savings input[type=range]::-moz-range-track { height: 2px; background: var(--border); border-radius: 2px; }
.avura-savings input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -13px; border-radius: 50%; background: var(--navy); cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2); border: 3px solid var(--surface); transition: transform 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart); }
.avura-savings input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28); }
.avura-savings input[type=range]::-webkit-slider-thumb:active { transform: scale(1.04); }
.avura-savings input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); cursor: pointer; border: 3px solid var(--surface); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2); transition: transform 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart); }
.avura-savings input[type=range]::-moz-range-thumb:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28); }
.avura-savings input[type=range]::-moz-range-thumb:active { transform: scale(1.04); }
@media (min-width: 1024px) {
  .avura-savings input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10px; border-width: 2px; }
  .avura-savings input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-width: 2px; }
}

.avura-divider-v { width: 1px; background: var(--border); display: none; }
/* Show the vertical divider alongside the row layout (iPad portrait+). */
@media (min-width: 768px) { .avura-divider-v { display: block; } }
.avura-chart-col { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
@media (min-width: 768px) { .avura-chart-col { gap: 32px; } }
.avura-result-row { display: flex; flex-direction: column; gap: 10px; }
.avura-result-label { font-size: 13px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.02em; }
.avura-result-value { font-family: var(--font-serif); font-style: italic; font-size: clamp(36px, 9vw, 56px); color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
/* Once the calculator sits in a two-column layout (768+), the result
   shares its column with the chart — so the large 9vw setting would
   overflow. Reuse the tighter desktop scale from here on. */
@media (min-width: 768px) { .avura-result-value { font-size: clamp(32px, 4.2vw, 48px); } }

.avura-chart { display: flex; align-items: flex-end; gap: 6px; height: 60px; }
@media (min-width: 768px) { .avura-chart { gap: 8px; height: 80px; } }
@media (max-width: 767px) {
  .avura-chart { display: none; }
  .avura-chart-col { gap: 16px; }
  .avura-result-row { gap: 6px; }
  .avura-result-label { font-size: 12px; }
}
.avura-bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 8px; min-width: 0; }
.avura-bar {
  width: 100%;
  flex: 1 1 auto;
  min-height: 2px;
  background: var(--border);
  transform: scaleY(0.03);
  transform-origin: bottom;
  transition: transform 500ms var(--ease-out-quart), background 260ms var(--ease-out-quart);
  border-radius: 4px 4px 0 0;
  will-change: transform;
}
.avura-bar.highlight { background: var(--navy); box-shadow: 0 0 12px rgba(15, 23, 42, 0.1); }
.avura-bar-lbl { font-size: 12px; color: var(--ink-soft); text-align: center; letter-spacing: 0.01em; }

.avura-savings-foot { margin-top: clamp(32px, 5vw, 48px); font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--ink-soft); padding-top: clamp(24px, 4vw, 32px); border-top: 1px solid var(--border); }
@media (min-width: 768px) { .avura-savings-foot { font-size: 16px; } }

/* ───────────────────────────────────────────────
   Contact form (replaces the legacy mailto CTA).
   Visual language follows the existing .cta-* tokens
   (navy ink, generous whitespace, quiet borders).
   ─────────────────────────────────────────────── */
.contact-form {
  margin-top: clamp(32px, 4.5vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.2vw, 20px);
  max-width: 560px;
}
@media (min-width: 640px) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .contact-form .contact-field-wide { grid-column: 1 / -1; }
}
.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-field > label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contact-input {
  width: 100%;
  font: inherit;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition:
    border-color 200ms var(--ease-out-quart),
    box-shadow 200ms var(--ease-out-quart),
    background 200ms var(--ease-out-quart);
}
.contact-input::placeholder { color: var(--ink-mute); opacity: 0.8; }
.contact-input:hover { border-color: rgba(15, 23, 42, 0.18); }
.contact-input:focus,
.contact-input:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
  background: var(--surface-warm);
}
.contact-textarea { min-height: 120px; resize: vertical; }
.contact-errors {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--rec);
  background: oklch(58% 0.17 25 / 0.06);
  border-radius: var(--radius-sm);
  list-style: none;
  color: var(--ink);
  font-size: 14px;
}
.contact-errors li { margin: 2px 0; }
.contact-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.contact-actions .btn-primary { padding: 12px 22px; border-radius: var(--radius-pill); }
.contact-success {
  grid-column: 1 / -1;
  margin: 0 0 8px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--accent-softer);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 15px;
}
.contact-form .hp {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ───────────────────────────────────────────────
   Legal pages (Impressum / Datenschutzerklärung)
   Long-form prose rendered from Markdown. Reuses the site's
   typographic tokens so it feels native, not bolted on.
   ─────────────────────────────────────────────── */
.legal-section { padding-top: clamp(96px, 14vh, 160px); }
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  color: var(--ink);
}
.legal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 32px;
}
.legal-body {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 56px 0 16px;
}
.legal-body h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
  margin: 32px 0 10px;
}
.legal-body p { margin: 0 0 18px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body em { color: var(--ink-mute); font-style: italic; }
.legal-body ul,
.legal-body ol { margin: 0 0 20px; padding-left: 22px; }
.legal-body li { margin: 6px 0; }
.legal-body li::marker { color: var(--ink-mute); }
.legal-body a {
  color: var(--ink);
  border-bottom: 1px solid rgba(15, 23, 42, 0.3);
  transition: border-color 200ms var(--ease-out-quart);
}
.legal-body a:hover { border-bottom-color: var(--ink); }
.legal-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}
.legal-body blockquote {
  margin: 24px 0;
  padding: 4px 18px;
  border-left: 3px solid var(--ink-mute);
  color: var(--ink-mute);
  font-style: italic;
}
.legal-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 2px 6px;
  background: var(--surface-cool);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink);
}
.legal-body pre {
  margin: 20px 0;
  padding: 16px 18px;
  background: var(--surface-cool);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
}
.legal-body pre code { background: transparent; border: 0; padding: 0; }
.legal-body table {
  width: 100%;
  margin: 20px 0 28px;
  border-collapse: collapse;
  font-size: 15px;
}
.legal-body thead th {
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.legal-body tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--ink-soft);
}
.legal-body tbody tr:last-child td { border-bottom: 0; }

/* Legal links row in the footer — sits below the main .footer-bottom
   line so existing layout stays unchanged. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--ink-mute);
}

/* ───────────────────────────────────────────────
   Blog
   -------------------------------------------------
   Editorial, long-read journal voice — not a
   templated card grid. Reuses the design tokens
   from the top of this file so the blog feels
   native rather than bolted on.

   Signature moves:
    - Left-aligned masthead with kicker + italic
      serif deckline (matches market-stat-label).
    - First post in the list is a "feature" row
      (wide media, large title, full excerpt).
    - Follow-up posts are rule-separated lane
      entries: meta left, story right. No cards.
    - Detail page: breadcrumb + title + italic
      lede + meta, a cropped cover that fits the
      first viewport alongside the hero, ragged-left
      body prose (no justification, no hyphenation,
      no drop-cap), a single hairline above a mixed-
      case share row.
   ─────────────────────────────────────────────── */
.blog-section {
  padding-top: clamp(96px, 14vh, 160px);
  padding-bottom: clamp(56px, 10vw, 96px);
}

/* The detail page reads as a wider single column than the legal
   pages. Widened to 1080px per request. */
.shell-narrow {
  max-width: 1080px;
}

/* Masthead --------------------------------------------------------- */
.blog-header {
  max-width: none;
  margin: 0 0 clamp(40px, 6vw, 72px);
  text-align: left;
  display: grid;
  gap: 18px;
  padding-bottom: clamp(32px, 5vw, 48px);
  border-bottom: 1px solid var(--border);
}
.blog-header .eyebrow {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.blog-title {
  font-family: var(--font-display);
  /* Match the site-wide .h-display axis value (370) so the blog
     masthead reads as the same voice as the home page hero and the
     section headings — not a louder, display-page variant. */
  font-weight: 370;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.blog-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 48ch;
  text-wrap: pretty;
}

/* Filters — newspaper ressorts, not pills.
   The pill treatment (border-radius + surface-cool background on
   active) was the loudest generic-template marker on the page.
   Rubriken in a paper are tracked caps with a hairline underline
   on the active section; we do the same thing — Navy on active,
   muted ink on rest, hairline underline carries the state. */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0 0 clamp(40px, 6vw, 64px);
  align-items: baseline;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.blog-filter {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  min-height: 40px;
  padding: 10px 16px 8px;
  font-weight: 500;
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms var(--ease-out-quart);
}
.blog-filter:hover { color: var(--navy); }
.blog-filter:first-of-type { padding-left: 0; }
.blog-filter.is-active {
  color: var(--navy);
  font-weight: 600;
}
/* Active-state rule: a short hairline under the word, matching the
   language-toggle pattern already used in the nav (see DE/EN). */
.blog-filter.is-active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 1px;
  background: var(--navy);
}
.blog-filter:first-of-type.is-active::after { left: 0; }
/* Thin vertical rule between adjacent filters — cleaner than a
   centered bullet for an all-caps sans, and reads as "ressort |
   ressort | ressort" the way a newsroom nav does. */
.blog-filter + .blog-filter::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 16px;
  margin-left: -8px;
  background: var(--border);
  vertical-align: middle;
}

/* Index / Category list -------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.blog-grid > .blog-card + .blog-card { border-top: none; }

/* Each post is a story row, not a card. No border box, no shadow.
   The visual grouping comes from the hairline above, the meta column
   on the left, and the headline column on the right. */
.blog-card {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  transition: background 250ms var(--ease-out-quart);
}
.blog-card:hover { background: var(--surface-cool); }

.blog-card-link {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 24px);
  padding: clamp(16px, 2vw, 24px) clamp(12px, 1.5vw, 16px);
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 8px;
}

/* Media sits above the body on phones, left on tablet+. Softly framed,
   not shadowed; hover is a slow, restrained zoom. */
.blog-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-cool);
  border-radius: 8px;
}
.blog-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out-quint);
}
.blog-card:hover .blog-card-media img { transform: scale(1.025); }
/* Placeholder: when a post has no cover image we draw a quiet
   filing-card pattern instead of the old "empty state with a
   green dot" shape — which read as a generic AI empty-state
   illustration. Two hairline grid lines (a horizontal register
   + a left margin rule, like a ledger page) tinted toward the
   navy surface. No color accents, no decorative mark. */
.blog-card-media-placeholder {
  position: relative;
  display: block;
  background:
    /* Left margin rule, 1px */
    linear-gradient(to right,
      var(--border) 0,
      var(--border) 1px,
      transparent 1px) 48px 0 / 100% 100% no-repeat,
    /* Horizontal register lines at 32px spacing, 0.04 alpha */
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent 31px,
      oklch(55% 0.02 240 / 0.05) 31px,
      oklch(55% 0.02 240 / 0.05) 32px),
    var(--surface-cool);
}
/* Small tabular-nums mark in the lower corner — reads as a
   filing/Aktenzeichen reference, not decoration. */
.blog-card-placeholder-mark {
  position: absolute;
  inset: auto auto 14px 14px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.blog-card-placeholder-mark::after {
  content: "Avura";
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  min-width: 0;
}
.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
/* Running filing number — reads as N°01, N°02 … in tabular
   numerals so successive entries line up visually. Navy with a
   thin leader rule after it (right border on the span itself)
   to separate it from the category tag without a bullet. */
.blog-card-index {
  color: var(--navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  padding-right: 12px;
  border-right: 1px solid var(--border);
  margin-right: -2px;
}
.blog-card-cat {
  color: var(--ink);
  font-weight: 600;
}
.blog-card-meta time { font-variant-numeric: tabular-nums; }
.blog-card-title {
  font-family: var(--font-display);
  font-weight: 370;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.blog-card-excerpt {
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Feature row: first post gets the full editorial treatment. Media
   dominates, title is allowed to breathe to the display scale. */
@media (min-width: 720px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .blog-grid > .blog-card:first-child {
    grid-column: 1 / -1;
  }
  .blog-grid > .blog-card:first-child .blog-card-link {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
    padding-top: clamp(8px, 1vw, 16px);
    padding-bottom: clamp(40px, 5vw, 56px);
  }
  .blog-grid > .blog-card:first-child .blog-card-media {
    aspect-ratio: 16 / 7;
    border-radius: 12px;
  }
  .blog-grid > .blog-card:first-child .blog-card-title {
    font-size: clamp(40px, 5vw, 64px);
    max-width: 24ch;
  }
  .blog-grid > .blog-card:first-child .blog-card-excerpt {
    font-size: clamp(17px, 1.6vw, 19px);
    max-width: 60ch;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* Pagination: editorial — "Seite 2 / 5" in the middle, minimal arrows
   flanking it. No pill borders; the underline on the label is the tell. */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blog-pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 0;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.06em;
  border: 0;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms var(--ease-out-quart);
}
.blog-pagination-link:hover { color: var(--ink-mute); }
.blog-pagination-link.is-disabled {
  color: var(--ink-mute);
  opacity: 0.4;
  cursor: not-allowed;
}
.blog-pagination-info {
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

/* Empty state — quiet, aligned to the masthead's left edge. */
.blog-empty {
  max-width: 560px;
  margin: clamp(32px, 5vw, 56px) 0;
  text-align: left;
  padding: 0;
  border: 0;
  background: transparent;
}
.blog-empty-title {
  font-family: var(--font-display);
  font-weight: 370;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 14px;
}
.blog-empty-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 48ch;
}

.blog-breadcrumb {
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 160ms var(--ease-out-quart);
}
.blog-breadcrumb:hover { color: var(--ink); }

/* Detail --------------------------------------------------------- */
/* Hero rhythm: breadcrumb + title + lede + meta + a cropped
   cover image should land together in the first viewport, the
   way the home-page hero does. The reader arrives and sees the
   whole "arrival" block without scrolling; scrolling then
   reveals the body. The padding-top is kept deliberately modest
   (10vh cap) so this fold budget isn't blown by the top rule. */
.blog-post-header {
  padding-top: clamp(40px, 8vh, 80px);
  padding-bottom: 0;
}
/* .blog-post-main hosts the meta row + body + share footer.
   Its padding-top is the breathing moment after the cover image:
   medium, not generous. The meta row (byline) sits first, then a
   short margin pushes the body down. Padding-bottom is generous
   because it separates the article from the share/related strip
   below. */
.blog-post-main {
  padding-top: clamp(24px, 3.5vw, 48px);
  padding-bottom: clamp(40px, 6vw, 72px);
}
.blog-post-breadcrumb {
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 clamp(20px, 3vw, 32px);
}
.blog-post-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 clamp(12px, 1.5vw, 16px);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.blog-post-excerpt {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 clamp(16px, 2.5vw, 24px);
  max-width: none;
}
/* Meta row — byline position.
   Lives between the cover and the body, not under the hero excerpt.
   It reads as the entry-point into the prose: "filed on this date,
   takes this long, written by this person — here we go." Because
   it is the first element of .blog-post-main, the section-tight
   padding-top above supplies the air after the cover; the meta
   itself only needs a margin-bottom to push the body down. No
   border — a hairline here would have felt like an editorial-
   template divider. Mixed-case, normal tracking keeps it calm. */
.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink-mute);
  margin: 0 0 clamp(20px, 3vw, 32px);
  padding: 0;
  border: 0;
}
.blog-post-meta time { font-variant-numeric: tabular-nums; }
.blog-post-meta [aria-hidden="true"] {
  color: var(--ink-mute);
  opacity: 0.4;
}

/* Cover: dynamically cropped so the hero block (title + lede +
   meta + cover) fits together inside the first viewport the way
   the home-page hero does — no matter the photo's aspect ratio.
   The image is cropped via object-fit: cover so a 4:3, 3:2 or
   16:9 cover all read as a calm horizontal band.
   - width stays at the prose column's maximum (960px) on wide
     viewports so the cover opens the story, not a thumbnail.
   - height is locked by clamp(32vh, 45vw, 55vh): never less
     than a third of the viewport (so the photo has presence),
     never more than 55% (so a strip of body text always peeks
     up from below as a "scroll me" cue). */
.blog-post-cover {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}
.blog-post-cover img {
  display: block;
  width: 100%;
  height: clamp(200px, 35vw, 40vh);
  min-height: 24vh;
  border-radius: 12px;
  border: 1px solid var(--border);
  object-fit: cover;
  object-position: center;
}

/* Body copy: ragged-left (left-aligned) with hyphenation off.
   Justified Hanken Grotesk on a ~760px prose column produced rivers
   of whitespace and a trail of mid-word hyphens — the single
   biggest source of visual noise on the page. Ragged prose is what
   serious long-read publications (The New Yorker, Stripe Press,
   NYT Magazine) do on the web, and it is meaningfully quieter. The
   body rides on .legal-body, so only the overrides live here. */
.blog-post-body {
  font-family: var(--font-ui);
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.75;
  color: var(--ink);
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.blog-post-body > p { margin: 0 0 1.2em; }
/* Markdown authors sometimes start the body with "# Some Heading".
   Without this override, browser defaults turn it into a second
   gigantic hero that competes with the post title. Downgrade it to
   a quiet section-level heading used only as a mid-article break. */
.blog-post-body h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: clamp(32px, 3.5vw, 44px) 0 clamp(12px, 1.5vw, 16px);
  text-align: left;
  max-width: none;
  text-wrap: balance;
}
/* When an H1 opens the body — the "# Kicker" author pattern that
   mostly echoes the post title — hide it visually. The heading stays
   in the DOM for screen readers and for the document outline, but
   the eye starts on the first real paragraph. Removing the kicker
   was the third-largest source of visual noise (after justified body
   and the drop cap): it introduced a fourth italic-serif voice in a
   row — excerpt, meta, cover, kicker — before the prose began. */
.blog-post-body > h1:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* H2 and H3 inherit from .legal-body but we tighten their rhythm so
   they breathe against the justified prose. */
.blog-post-body h2 {
  margin: clamp(36px, 4vw, 48px) 0 clamp(12px, 1.6vw, 16px);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
  text-wrap: wrap;
}
.blog-post-body h3 {
  margin: clamp(24px, 2.6vw, 32px) 0 clamp(8px, 1vw, 12px);
  text-align: left;
  text-wrap: balance;
}
/* Blockquote: a pulled serif quotation. Hierarchy is carried by
   the font switch alone — no side-stripe, no double ruling above
   and below. Two rules in a long read were twice as many moments
   of interruption as necessary; a single hairline above is enough
   to mark the shift, and the return to body font marks the exit. */
.blog-post-body blockquote {
  margin: clamp(32px, 4vw, 44px) 0;
  padding: clamp(16px, 2vw, 20px) 0 0;
  border-top: 1px solid var(--border);
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.45;
  color: var(--ink);
  text-align: left;
  hyphens: manual;
}
.blog-post-body blockquote p { margin: 0 0 0.6em; }
.blog-post-body blockquote p:last-child { margin-bottom: 0; }
.blog-post-body blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* Section break: a centred hairline. The "§" ornament that sat
   here before was a literal "look at me" sign in the middle of a
   long read — which is the opposite of what a section break is
   supposed to do. */
.blog-post-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  width: 96px;
  height: 0;
  margin: clamp(36px, 5vw, 48px) auto;
}
.blog-post-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms var(--ease-out-quart);
}
.blog-post-body a:hover {
  text-decoration-color: var(--ink);
}
.blog-post-body ul,
.blog-post-body ol { text-align: left; }
.blog-post-body img,
.blog-post-body video,
.blog-post-body iframe {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: clamp(28px, 3vw, 36px) 0;
}
.blog-post-body figure {
  margin: clamp(28px, 3vw, 36px) 0;
  text-align: left;
}
.blog-post-body figure img { margin: 0; }
.blog-post-body figcaption {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-mute);
  text-align: left;
}
/* Wide embedded content (tables, fenced code) should scroll horizontally
   rather than push the whole page wider. Wrap blocks we don't control —
   pre/code from Markdown — so the scroll happens inside them. */
.blog-post-body pre,
.blog-post-body table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  hyphens: manual;
}
.blog-post-body table { display: block; }

/* Colophon: the closing row of an article. Kept deliberately quiet
   — a hairline divider in the standard border colour (not ink), a
   mixed-case label, and a row of text-link actions separated by
   thin bullet dividers. The old treatment used a bold ink-coloured
   rule and ALL-CAPS letter-spaced buttons, which read as an
   attention demand at the end of a long read rather than a calm
   afterword. */
.blog-share {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: clamp(56px, 8vw, 88px) 0 0;
  padding: clamp(20px, 3vw, 28px) 0 0;
  border-top: 1px solid var(--border);
  border-bottom: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute);
}
.blog-share-label {
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0;
  font-size: 14px;
  margin: 0 6px 0 0;
  flex-shrink: 0;
}
.blog-share-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  border: 0;
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: text-decoration-color 180ms var(--ease-out-quart);
}
.blog-share-btn:hover { text-decoration-color: var(--ink); }
.blog-share-btn.is-copied {
  color: oklch(45% 0.09 150);
  text-decoration-color: oklch(45% 0.09 150);
}
/* Thin bullet divider between consecutive share actions. */
.blog-share-btn + .blog-share-btn::before {
  content: "·";
  display: inline-block;
  width: 18px;
  margin-left: -18px;
  margin-right: 0;
  color: var(--ink-mute);
  opacity: 0.4;
  font-size: 14px;
  letter-spacing: 0;
  text-align: center;
  pointer-events: none;
  text-decoration: none;
}

/* Related: framed as a "Weiterlesen" appendix, not a card grid. */
.blog-related {
  border-top: 1px solid var(--border);
  margin-top: clamp(56px, 8vw, 88px);
  padding-top: clamp(40px, 6vw, 64px);
}
.blog-related-title {
  font-family: var(--font-display);
  font-weight: 370;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 clamp(20px, 3vw, 28px);
  text-align: left;
  max-width: 24ch;
}
.blog-related .blog-grid { border-top: 1px solid var(--border); }

/* ───────────────────────────────────────────────
   Blog — responsive adaptations
   -------------------------------------------------
   Mobile-first for a prose-heavy layout: the
   narrow column is the source of truth, wider
   viewports add editorial width and two-column
   feature rows. Breakpoints mirror --bp-sm/md/lg.
   ─────────────────────────────────────────────── */

/* ≤ 639px — phones.
   Masthead stays left-aligned and compact. Filters turn into a
   horizontal scroll-lane (same pattern as before) so long category
   lists never wrap to an orphaned line. Cover bleeds edge-to-edge
   on the detail page for a magazine-style opener. */
@media (max-width: 639px) {
  .blog-section {
    padding-top: clamp(88px, 12vh, 120px);
    padding-bottom: clamp(48px, 8vw, 72px);
  }
  .blog-header {
    gap: 14px;
    padding-bottom: 28px;
    margin-bottom: 32px;
  }
  .blog-title { max-width: 16ch; }
  .blog-intro { max-width: none; font-size: 17px; }

  .blog-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    margin: 0 calc(-1 * var(--shell-pad)) 32px;
    padding: 4px var(--shell-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-height: 44px;
  }
  .blog-filters::-webkit-scrollbar { display: none; }
  .blog-filter {
    scroll-snap-align: start;
    padding: 10px 14px;
    min-height: 44px;
  }
  .blog-filter + .blog-filter::before { margin-left: -4px; margin-right: 10px; }
  .blog-filter:first-of-type { padding-left: 0; }

  /* Story rows sit tight; the first (feature) entry keeps slightly
     more breathing room so it still reads as the lead. */
  .blog-card-link {
    padding: 24px 16px;
    gap: 18px;
  }
  .blog-card-media { aspect-ratio: 16 / 10; border-radius: 6px; }
  .blog-grid > .blog-card:first-child .blog-card-media { aspect-ratio: 4 / 3; }
  .blog-card-body { gap: 10px; }
  .blog-card-title { font-size: clamp(24px, 7vw, 30px); }
  .blog-grid > .blog-card:first-child .blog-card-title { font-size: clamp(28px, 8vw, 36px); }
  .blog-card-excerpt { font-size: 15px; -webkit-line-clamp: 2; line-clamp: 2; }
  .blog-card-meta { font-size: 10px; letter-spacing: 0.12em; gap: 10px; }

  .blog-pagination {
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 40px;
    padding-top: 24px;
  }
  .blog-pagination-info {
    order: -1;
    flex-basis: 100%;
    text-align: center;
    padding-bottom: 6px;
  }
  .blog-pagination-link { flex: 1; min-width: 44%; padding: 10px 8px; }

  /* Detail — hero block follows the same fold budget as desktop:
     title + lede + cropped cover land together in the first
     viewport. Meta then greets the reader on the next scroll step.
     Cover bleeds to the viewport edges for a magazine-style opener. */
  .blog-post-header {
    padding-top: clamp(32px, 8vh, 64px);
    padding-bottom: 0;
  }
  .blog-post-title { font-size: clamp(26px, 8vw, 36px); }
  .blog-post-excerpt { font-size: 16px; }
  .blog-post-meta {
    font-size: 12px;
    letter-spacing: 0;
    gap: 4px 14px;
    margin: 0 0 20px;
  }
  .blog-post-cover {
    padding: 0 var(--shell-pad);
    margin: 0;
  }
  .blog-post-cover img {
    height: 35vh;
    min-height: 200px;
    max-height: 40vh;
    border-radius: 8px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
  .blog-post-body { font-size: 17px; }

  .blog-share {
    padding-top: 18px;
    gap: 4px 16px;
    font-size: 14px;
  }
  .blog-share-label {
    flex-basis: 100%;
    margin: 0 0 6px;
  }
  .blog-share-btn {
    padding: 12px 0;
    min-height: 48px;
    font-size: 14px;
    letter-spacing: 0;
  }
  .blog-share-btn + .blog-share-btn::before {
    width: 16px;
    margin-left: -16px;
  }

  .blog-related { margin-top: clamp(40px, 6vw, 56px); padding-top: clamp(28px, 5vw, 40px); }
}

/* ≤ 380px — very narrow (iPhone SE, folded foldables).
   The first-child feature image goes slightly taller (more vertical
   presence on a tiny screen), and headings clamp tighter. */
@media (max-width: 380px) {
  .blog-title { font-size: clamp(36px, 11vw, 48px); }
  .blog-grid > .blog-card:first-child .blog-card-media { aspect-ratio: 3 / 2; }
}

/* 640px – 767px — large phones / phablets.
   Same single-column rhythm as phone; slightly more padding between
   rows so the hairline dividers don't feel cramped. */
@media (min-width: 640px) and (max-width: 767px) {
  .blog-card-link { padding: clamp(16px, 2vw, 24px) clamp(12px, 1.5vw, 16px); gap: 22px; }
  .blog-post-title { font-size: clamp(30px, 6vw, 42px); }
}

/* 768px – 1023px — tablet portrait.
   Grid becomes 2 columns. First card spans full width. */
@media (min-width: 768px) and (max-width: 1023px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .blog-grid > .blog-card:first-child {
    grid-column: 1 / -1;
  }
  .blog-card-link {
    gap: 24px;
    padding: clamp(20px, 3vw, 32px) clamp(16px, 2vw, 24px);
  }
  .blog-grid > .blog-card:first-child .blog-card-link {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
  }
  .blog-card-media { aspect-ratio: 4 / 3; }
  .blog-grid > .blog-card:first-child .blog-card-media { aspect-ratio: 16 / 9; }
}

/* ≥ 1024px — desktop.
   Feature row + lane rows at full scale. Share colophon flows on a
   single line with generous spacing. */
@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .blog-section { padding-top: clamp(112px, 14vh, 160px); }
  .blog-card-media { aspect-ratio: 5 / 4; }

  .blog-share {
    gap: 4px 24px;
  }
  .blog-share-label { margin-right: 14px; }
}

/* ≥ 1200px — large desktop.
   Slight scale bumps on the masthead and feature row for editorial
   impact on 16"+ screens. */
@media (min-width: 1200px) {
  .blog-title { font-size: clamp(64px, 6.5vw, 96px); }
  .blog-grid > .blog-card:first-child .blog-card-title { font-size: clamp(48px, 4.5vw, 64px); }
}

/* Short landscape viewports — tighten hero so it doesn't dominate. */
@media (max-height: 600px) and (orientation: landscape) {
  .blog-section,
  .blog-post-header { padding-top: clamp(48px, 9vh, 80px); }
  .blog-header { margin-bottom: 28px; padding-bottom: 24px; }
}

/* Reduced motion — strip the zoom and the hover-background fade so
   motion-sensitive users don't get a surprise transition. */
@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card-media img,
  .blog-filter,
  .blog-share-btn,
  .blog-pagination-link {
    transition: none !important;
  }
  .blog-card:hover { background: transparent; }
  .blog-card:hover .blog-card-media img { transform: none; }
}

/* Forced-colors (Windows high-contrast).
   Hairlines need to stay visible, and the translucent filter
   background disappears — fall back to system tokens. */
@media (forced-colors: active) {
  .blog-grid > .blog-card + .blog-card,
  .blog-pagination,
  .blog-related,
  .blog-share {
    border-top-color: CanvasText !important;
  }
  .blog-filter.is-active {
    color: LinkText;
  }
  .blog-filter.is-active::after {
    background: LinkText;
  }
  .blog-post-body a {
    text-decoration-color: CanvasText;
  }
}

/* Print — long-form blog posts deserve a print pass. Strip the
   chrome, enlarge the body measure, keep the editorial justification
   so a printed column looks like a magazine page. */
@media print {
  .nav,
  .mobile-menu,
  .footer,
  .blog-share,
  .blog-pagination,
  .blog-filters,
  .blog-related { display: none !important; }

  body { background: #fff; color: #000; }

  .blog-section,
  .blog-post-header { padding-top: 0; padding-bottom: 0; }
  .blog-post-cover { margin: 12pt 0; padding: 0; }
  .blog-post-cover img {
    border: 0;
    border-radius: 0;
    max-height: 70vh;
    object-fit: contain;
  }

  .blog-post-title { font-size: 32pt; color: #000; }
  .blog-post-excerpt { font-size: 14pt; color: #333; font-style: italic; }
  .blog-post-meta { font-size: 10pt; color: #555; letter-spacing: 0; }
  .blog-post-body { font-size: 11pt; color: #000; line-height: 1.55; }

  .blog-post-body h1,
  .blog-post-body h2,
  .blog-post-body h3 { break-after: avoid-page; page-break-after: avoid; color: #000; }
  .blog-post-body img,
  .blog-post-body table,
  .blog-post-body pre,
  .blog-post-body blockquote { break-inside: avoid; page-break-inside: avoid; }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 85%;
    color: #555;
    word-break: break-all;
  }
  .blog-breadcrumb::after,
  .nav-brand[href]::after { content: ""; }
}