/* =============================================================================
   Entradigm marketing site — shared design system
   -----------------------------------------------------------------------------
   ONE stylesheet shared by every page (index + so-funktionierts + funktionen +
   warum + fuer-agenten, plus the Rest-phase pages once built).

   Standalone static site (Cloudflare Pages, spec §2.5 Option A). NO framework,
   NO build step, NO runtime JS for core pages. Does NOT import the app Worker's
   shell.ts/nav.ts — the tokens below are COPIED from those files (entradigmHost.ts
   :57-64 dark palette + shell.ts :88-133 light palette) so the sign-in bridge
   from entradigm.com → app.entradigm.com feels visually coherent.

   Surface convention (matches the app's theme bifurcation):
     - DARK surface (navy bg + parchment text + raw cyan #3FBFFF accent) — the
       hero / bridge surfaces, continuous with the entradigmHost.ts landing.
     - LIGHT surface (parchment bg + navy text + cyan-on-light #1A6FA8 accent) —
       content bands + /app/* + /legal/*. Raw cyan fails WCAG AA on parchment,
       so links/text on light use --accent (#1A6FA8, 6.31:1).

   Cookieless. CSP-friendly: all style is in this file (no inline handlers).
   ============================================================================= */

:root {
  /* ---- DARK-surface tokens (copied from entradigmHost.ts :57-64) ---- */
  --navy: #0A0E27;
  --navy-elev: #131A3D;
  --navy-line: rgba(244, 239, 230, 0.10);
  --cyan: #3FBFFF;              /* raw cyan — accent on DARK only (9.15:1 on navy) */
  --cyan-soft: rgba(63, 191, 255, 0.14);
  --parchment: #F4EFE6;
  --parchment-soft: rgba(244, 239, 230, 0.62);
  --parchment-mute: rgba(244, 239, 230, 0.45);

  /* ---- LIGHT-surface tokens (conformed to DESIGN-SYSTEM.md §1.1, 2026-06-19) ---- */
  --bg: #F4EFE6;               /* parchment base — aligned to brand Parchment (was #f7f6f1) */
  --bg-elev: #ffffff;
  --fg: #15171c;               /* 15.8:1 on bg ✓AAA */
  --fg-strong: #08090c;        /* 18.4:1 ✓AAA */
  --fg-muted: #50586A;         /* 6.9:1 on bg, 4.8:1 on #fff ✓AA (was #5b6270) */
  --fg-soft: #636A78;          /* 4.75:1 on parchment, 5.4:1 on #fff ✓AA (DS uses #6E7585 for
                                  white-only surfaces; marketing applies it on parchment meta text,
                                  so it is nudged darker to clear AA on bg too — was #8a8f99 = 3.4:1 FAIL) */
  --accent: #1A6FA8;           /* cyan-on-LIGHT (6.0:1 on bg, 5.4:1 on #fff, WCAG AA) */
  --accent-hover: #155985;     /* 8.0:1 — darker on hover (light) */
  --accent-active: #0F4567;    /* pressed */
  --accent-soft: #E0F0F8;
  --accent-soft-hover: #D0E6F3;
  --accent-ring: rgba(26, 111, 168, 0.45);  /* RAISED 0.22→0.45 for a visible 3:1-class focus ring */
  --focus-ring: 0 0 0 3px var(--accent-ring);  /* single focus-ring source (§2.1) */
  --fg-on-accent: #ffffff;     /* 5.4:1 on #1A6FA8 fill ✓AA */
  --border: #E0DACE;
  --border-strong: #C9C2B3;

  /* interaction-surface tokens (replace baked hover hexes — light surface) */
  --bg-sunken: #ECE6D8;        /* recessed wells / tags / inline code (§1.1) */
  --surface-hover: #EFE9DC;    /* generic hover wash on bg-elev */
  --surface-active: #DFD7C5;   /* pressed */
  --surface-subtle: #FAF7EF;   /* tinted wells */

  /* placeholder / "operator to provide" treatment (warn palette from shell.ts) */
  --warn-bg: #fff5d6;
  --warn-border: #f0c75c;
  --warn-fg: #7a5410;

  --success: #1f7a47;

  /* shadow / elevation scale (DESIGN-SYSTEM.md §1.1) */
  --shadow-xs: 0 1px 1px rgba(11, 14, 22, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 14, 22, 0.06), 0 1px 3px rgba(11, 14, 22, 0.04);
  --shadow-md: 0 4px 10px rgba(11, 14, 22, 0.08), 0 2px 4px rgba(11, 14, 22, 0.05);
  --shadow-lg: 0 12px 32px rgba(11, 14, 22, 0.12), 0 4px 8px rgba(11, 14, 22, 0.06);
  --shadow-accent: 0 6px 20px rgba(26, 111, 168, 0.18);  /* primary-CTA hover glow */

  /* radius (softened from 4/8/12 → 6/10/14 per §1.1) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* motion (DESIGN-SYSTEM.md §4) */
  --dur-1: 110ms;              /* color / bg / border */
  --dur-2: 160ms;             /* elevation / transform */
  --dur-3: 240ms;             /* panel / disclosure */
  --ease: cubic-bezier(0.2, 0, 0, 1);  /* brand ease-out, no bounce */
  --lift-1: -1px;
  --lift-2: -2px;
  --press: 0.5px;

  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;

  --maxw: 1100px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.55;
  color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex; flex-direction: column; min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--fg-strong); letter-spacing: -0.015em; line-height: 1.2; }
p { margin: 0 0 12px; }
ul, ol { margin: 0; }

.eyebrow, .section-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}

/* =============================================================================
   SKIP-LINK — first focusable element on every page ("Zum Inhalt springen").
   Visually hidden until focused (keyboard tab), then pinned top-left so a
   keyboard / screen-reader user can jump straight to <main id="main">.
   ============================================================================= */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  padding: 9px 16px; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus, .skip-link:focus-visible {
  top: 8px; outline: 3px solid var(--accent-ring); outline-offset: 2px;
  text-decoration: none; color: #fff;
}

/* =============================================================================
   GLOBAL HEADER / NAV  (canonical markup defined in _partials.md)
   Sticky top-bar on a parchment surface. The brand wordmark is a text
   placeholder ("Entradigm" + ◆) — real SVG logo swap is one edit in the partial.
   ============================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, var(--bg-elev), #fbfaf3);
  border-bottom: 1px solid var(--border);
}
.site-header-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--fg-strong); letter-spacing: -0.01em; text-decoration: none;
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; color: var(--fg-strong); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.brand-mark { color: var(--accent); font-size: 19px; line-height: 1; }
/* Concept A — Threshold/portal horizontal lockup (2026-06-19), inlined as
   <svg class="brand-logo"> in the .brand header anchor (see _partials.md LOGO).
   viewBox 340×72 → height-locked to the header line; width follows aspect ratio.
   The SVG carries its own #1A6FA8 cyan glyph + #08090C navy wordmark; the header
   sits on the light parchment surface so no per-theme override is needed. */
.brand-logo { display: block; height: 28px; width: auto; }

.nav-links {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  margin-left: 8px;
}
.nav-link {
  padding: 7px 12px; border-radius: var(--radius-sm);
  color: var(--fg-muted); font-size: 14px; font-weight: 500;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav-link:hover { color: var(--fg); background: var(--surface-hover); text-decoration: none; }
.nav-link.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nav-cta-group {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto; flex: 0 0 auto;
}
/* Buttons — canonical tokenized state model (DESIGN-SYSTEM.md §2.2 / §5.5).
   Secondary rests at bg-elev + border + shadow-xs; hover lifts + grows shadow;
   active presses back. Every text/bg pair is token-driven so it resolves to a
   WCAG-AA pair on whatever surface the button sits on. Dark-surface overrides
   below remap the tokens so the same markup is AA on navy hero/footer/.dark. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--bg-elev);
  color: var(--fg-strong);
  font-size: 14px; font-weight: 500; font-family: inherit;
  cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}
.btn:hover {
  background: var(--surface-hover); border-color: var(--border-strong);
  color: var(--fg-strong); text-decoration: none;
  transform: translateY(var(--lift-1)); box-shadow: var(--shadow-md);
}
.btn:active { background: var(--surface-active); transform: translateY(var(--press)); box-shadow: var(--shadow-xs); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-xs); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn.primary { background: var(--accent); color: var(--fg-on-accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--fg-on-accent); transform: translateY(var(--lift-1)); box-shadow: var(--shadow-accent); }
.btn.primary:active { background: var(--accent-active); border-color: var(--accent-active); transform: translateY(var(--press)); }

.btn.ghost { border-color: transparent; background: transparent; color: var(--fg-muted); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-hover); color: var(--fg); transform: none; box-shadow: none; }
.btn.ghost:active { background: var(--surface-active); }

.btn.lg { padding: 13px 24px; font-size: 15px; border-radius: var(--radius); }

/* Dark-surface button token remap (DESIGN-SYSTEM.md §1.2 dark theme).
   The .btn family currently sits on the light header + light content bands, but
   the design-system contract is that ONE button markup must read AA on whatever
   surface it lands on. On navy surfaces (.section.dark, .hero, .site-footer) we
   remap the surface/fg/accent tokens to their dark-theme values so a .btn placed
   there resolves to a WCAG-AA pair (operator-flagged contrast fix #1):
     - secondary fill flips to navy-elev + parchment text (14.8:1)
     - ghost text flips to parchment-soft (≥9:1 on navy)
     - primary uses raw cyan + near-navy text (#07101A on #3FBFFF = 9.2:1) */
.section.dark .btn, .hero .btn, .site-footer .btn {
  --bg-elev: var(--navy-elev);
  --surface-hover: rgba(244, 239, 230, 0.06);
  --surface-active: rgba(244, 239, 230, 0.13);
  --fg-strong: var(--parchment);
  --fg: var(--parchment);
  --fg-muted: var(--parchment-soft);
  --border-strong: var(--navy-line);
  --accent: var(--cyan);
  --accent-hover: #6FD0FF;
  --accent-active: #2AA6E8;
  --fg-on-accent: #07101A;        /* near-navy text on cyan: 9.2:1 ✓AAA */
  --accent-ring: rgba(63, 191, 255, 0.55);
  --shadow-accent: 0 0 0 1px rgba(63, 191, 255, 0.30), 0 8px 28px rgba(63, 191, 255, 0.20);
}

/* mobile-nav toggle (CSS-only, checkbox-driven — no JS).
   WHERE the toggle is operable (mobile, ≤860px) the checkbox is the focusable
   control: it is visually hidden but kept in the tab order + accessibility tree
   (NOT `display:none`, NOT the `hidden` attribute — either would drop it from
   the tab order and leave the bare <label>, which is not focusable, keyboard-
   dead). The focus ring is rendered on the adjacent visible <label> via the
   `:focus-visible + .nav-toggle-label` rule. On desktop the nav is always shown,
   so the toggle is irrelevant and is removed from the tab order with display:none
   (see the @media (max-width:860px) block for the mobile re-exposure). */
.nav-toggle {
  /* Desktop: the toggle is irrelevant (nav is always shown), so keep it out of
     the tab order with display:none. The mobile media query below re-exposes it
     as a visually-hidden-but-focusable control paired with the visible label. */
  display: none;
}
.nav-toggle-label {
  display: none; cursor: pointer; margin-left: auto;
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--bg-elev);
  font-size: 13px; font-weight: 600; color: var(--fg);
}
/* keyboard focus indicator: when the (visually hidden) checkbox is focused,
   ring the visible label that immediately follows it in the DOM */
.nav-toggle:focus-visible + .nav-toggle-label {
  outline: 3px solid var(--accent-ring); outline-offset: 2px;
  border-color: var(--accent);
}

/* =============================================================================
   SECTION SCAFFOLD — light + dark bands
   ============================================================================= */
main { flex: 1 0 auto; }
.section { padding: 64px 24px; border-top: 1px solid var(--border); }
.section:first-child { border-top: 0; }
.section-inner { max-width: var(--maxw); margin: 0 auto; }
.section-inner.narrow { max-width: 760px; }
.section-inner.mid { max-width: 920px; }

.section h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 600;
  margin-bottom: 16px; max-width: 26ch; line-height: 1.12;
}
.section h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 600;
  margin-bottom: 14px; max-width: 26ch;
}
.section .lede {
  color: var(--fg-muted); font-size: clamp(1rem, 1.8vw, 1.12rem);
  max-width: 62ch; margin-bottom: 28px; line-height: 1.6;
}

/* dark band variant (navy) for emphasis / bridge surfaces */
.section.dark {
  background: var(--navy); color: var(--parchment); border-top-color: var(--navy-line);
}
.section.dark h2 { color: var(--parchment); }
.section.dark .lede { color: var(--parchment-soft); }
.section.dark .section-eyebrow, .section.dark .eyebrow { color: var(--cyan); }
.section.dark a { color: var(--cyan); }

/* tinted light band */
.section.tint { background: linear-gradient(180deg, var(--accent-soft), transparent); }

/* =============================================================================
   HERO (dark, navy surface — inherits the entradigmHost.ts hero treatment)
   ============================================================================= */
.hero {
  background: var(--navy); color: var(--parchment);
  padding: 88px 24px 72px; text-align: center;
}
.hero-inner { max-width: 880px; margin: 0 auto; }
.hero .accent-rule {
  display: block; width: 2px; height: 52px;
  background: var(--cyan); opacity: 0.7; margin: 0 auto 36px;
}
.hero .eyebrow { color: var(--cyan); }
.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 4rem); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.08;
  color: var(--parchment); margin-bottom: 22px;
  max-width: 20ch; margin-left: auto; margin-right: auto;
}
.hero .lede {
  font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--parchment-soft);
  max-width: 62ch; margin: 0 auto 34px; line-height: 1.6;
}
.hero .cta-row {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center;
}
.hero-microcopy {
  margin-top: 26px; font-size: 13px; color: var(--parchment-mute); letter-spacing: 0.02em;
}
.hero .subline {
  margin-top: 18px; font-size: 14px; color: var(--cyan); font-weight: 500;
}

/* dark-surface CTA buttons (cyan-on-navy) — navy text on raw cyan = 9.15:1 ✓AAA;
   parchment on navy for the secondary = 16.6:1. Shared ease/lift model (§2). */
.cta-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: var(--radius);
  background: var(--cyan); color: var(--navy);
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.cta-primary:hover { background: #6FD0FF; text-decoration: none; transform: translateY(var(--lift-1)); box-shadow: 0 0 0 1px rgba(63,191,255,0.30), 0 8px 28px rgba(63,191,255,0.20); }
.cta-primary:active { transform: translateY(var(--press)); box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.cta-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cyan-soft); }
.cta-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: var(--radius);
  background: transparent; color: var(--parchment);
  border: 1px solid var(--navy-line);
  font-size: 15px; font-weight: 500; text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.cta-secondary:hover { border-color: var(--parchment-mute); background: rgba(244,239,230,0.04); text-decoration: none; transform: translateY(var(--lift-1)); }
.cta-secondary:active { transform: translateY(var(--press)); }
.cta-secondary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* =============================================================================
   CHIP / TRUST band
   ============================================================================= */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips.center { justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg-elev);
  font-size: 13px; font-weight: 500; color: var(--fg-muted);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
/* non-clickable chips get a subtle lift so the surface feels alive (FIX #2) */
.chip:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(var(--lift-1)); }
.chip::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.section.dark .chip { border-color: var(--navy-line); background: var(--navy-elev); color: var(--parchment-soft); }
.section.dark .chip:hover { border-color: var(--parchment-mute); box-shadow: var(--shadow-sm); }
.section.dark .chip::before { background: var(--cyan); }

/* =============================================================================
   GRID + CARDS
   ============================================================================= */
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
/* depth + life on hover — the "boxes with depth" the operator asked for (FIX #2).
   These cards are not links; the lift is a tasteful affordance, not a click cue. */
.card:hover { box-shadow: var(--shadow-md); transform: translateY(var(--lift-2)); border-color: var(--border-strong); }
.section.dark .card:hover { border-color: var(--parchment-mute); }
.card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--fg-strong); }
.card p { font-size: 14px; color: var(--fg-muted); line-height: 1.6; margin: 0; }
.card .card-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px; display: block;
}
.section.dark .card { background: var(--navy-elev); border-color: var(--navy-line); }
.section.dark .card h3 { color: var(--parchment); }
.section.dark .card p { color: var(--parchment-soft); }
.section.dark .card .card-eyebrow { color: var(--cyan); }

/* "pain → resolved" card: keyword bolded in cyan */
.card.pain p strong { color: var(--accent); font-weight: 600; }
.section.dark .card.pain p strong { color: var(--cyan); }

/* roadmap label on a card */
.roadmap-tag {
  display: inline-block; margin-bottom: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--bg-sunken); color: var(--fg-muted);
}

/* =============================================================================
   NUMBERED STEPS (how-it-works)
   ============================================================================= */
ol.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 24px; }
ol.steps li {
  display: flex; align-items: flex-start; gap: 20px;
  padding-left: 18px; border-left: 2px solid var(--accent-soft);
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
ol.steps li:first-child { border-left-color: var(--accent); }
/* the left rail brightens + the row nudges toward its content on hover (FIX #2) */
ol.steps li:hover { border-left-color: var(--accent); transform: translateX(3px); }
.step-num {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent);
  flex: 0 0 34px; padding-top: 2px; font-variant-numeric: tabular-nums;
}
.step-body h3 { font-size: 17px; font-weight: 600; color: var(--fg-strong); margin-bottom: 6px; }
.step-body p { font-size: 14px; color: var(--fg-muted); line-height: 1.6; max-width: 60ch; margin: 0; }
.step-body .step-control {
  display: block; margin-top: 6px; font-size: 13px; color: var(--accent); font-weight: 500;
}

/* =============================================================================
   HONESTY NOTE (callout)
   ============================================================================= */
.callout {
  background: var(--accent-soft); border: 1px solid #c8d4f1;
  border-radius: var(--radius); padding: 18px 22px; color: var(--fg);
  font-size: 15px; line-height: 1.6;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.callout:hover { box-shadow: var(--shadow-sm); transform: translateY(var(--lift-1)); border-color: var(--accent); }
.callout strong { color: var(--fg-strong); }

/* =============================================================================
   PLACEHOLDER CARD — the visible "OPERATOR TO PROVIDE — do not fabricate"
   dashed-border scaffold. Mirrors the app's .banner-placeholder warn palette.
   EVERY fabrication-risk surface (logos, testimonials, case studies, metrics,
   screenshots, pricing) renders as one of these so it is impossible to mistake
   placeholder for real content. Content ethics HARD RULE.
   ============================================================================= */
.placeholder-card {
  border: 2px dashed var(--warn-border);
  background: var(--warn-bg);
  border-radius: var(--radius);
  padding: 24px 22px;
  color: var(--warn-fg);
}
.placeholder-card .placeholder-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.placeholder-card .placeholder-tag::before { content: '⚑'; font-size: 13px; line-height: 1; }
.placeholder-card h3 { color: var(--warn-fg); font-size: 16px; margin-bottom: 8px; }
.placeholder-card p { color: var(--warn-fg); font-size: 14px; line-height: 1.55; margin: 0 0 8px; }
.placeholder-card p:last-child { margin-bottom: 0; }
.placeholder-card .placeholder-hint {
  font-size: 13px; opacity: 0.85; margin-top: 8px;
  font-family: var(--font-mono);
}
.placeholder-card ul { margin: 8px 0 0 18px; font-size: 13px; }
.placeholder-card ul li { margin-bottom: 4px; }
/* placeholder on a dark band keeps the warn treatment so it still reads as a flag */
.section.dark .placeholder-card { color: var(--warn-fg); }

/* =============================================================================
   CODE / CURL recipe tiles (for Für Agenten)
   ============================================================================= */
.code-block {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  background: #11131a; border-radius: var(--radius-sm);
  border: 1px solid var(--navy-line);
}
.code-block code {
  background: transparent; color: #e7e9ee; padding: 0;
  font-family: var(--font-mono); font-size: 13px; white-space: pre; line-height: 1.6;
}
.code-block .c-cmt { color: #7d8aa5; }
.code-block .c-cyan { color: var(--cyan); }

.agent-tile {
  background: var(--navy-elev); border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
/* navy tile lift on hover; cyan-ring glow reads on the dark surface (FIX #2) */
.agent-tile:hover {
  transform: translateY(var(--lift-2)); border-color: rgba(63, 191, 255, 0.40);
  box-shadow: 0 0 0 1px rgba(63, 191, 255, 0.25), 0 10px 30px rgba(0, 0, 0, 0.45);
}
.agent-tile h3 { color: var(--parchment); font-size: 16px; margin-bottom: 6px; }
.agent-tile .tile-method {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--cyan); margin-bottom: 10px; display: block; word-break: break-all;
}
.agent-tile p { color: var(--parchment-soft); font-size: 14px; margin-bottom: 12px; }
.agent-tile .tile-link { color: var(--cyan); font-size: 14px; font-weight: 500; }

/* inline mono token */
code.inline {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--bg-sunken); padding: 1px 6px; border-radius: var(--radius-xs); color: var(--fg-strong);
}
.section.dark code.inline { background: rgba(244,239,230,0.10); color: var(--parchment); }

/* =============================================================================
   ICP / persona block
   ============================================================================= */
.persona {
  border-left: 3px solid var(--accent); padding-left: 18px;
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.persona:hover { transform: translateX(3px); }
.persona h3 { font-size: 16px; margin-bottom: 6px; }
.persona .persona-job { font-style: italic; color: var(--fg-muted); margin-bottom: 8px; font-size: 14px; }
.persona p { font-size: 14px; color: var(--fg-muted); line-height: 1.6; margin: 0; }

/* =============================================================================
   GLOBAL FOOTER (4 columns + honest trust strip) — markup in _partials.md
   Dark navy surface, continuous with the hero/bridge.
   ============================================================================= */
.site-footer {
  flex-shrink: 0;
  background: var(--navy); color: var(--parchment-mute);
  border-top: 1px solid var(--navy-line);
  padding: 48px 24px 32px;
  font-size: 13px;
}
.site-footer-cols {
  max-width: var(--maxw); margin: 0 auto 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px;
}
.footer-col-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--parchment-soft); margin-bottom: 12px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col ul a { color: var(--parchment-mute); font-size: 14px; }
.footer-col ul a:hover { color: var(--parchment); text-decoration: underline; }

.footer-trust-strip {
  max-width: var(--maxw); margin: 0 auto 22px;
  padding: 14px 0; border-top: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line);
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  font-size: 12px; color: var(--parchment-soft); font-weight: 500;
}
.footer-trust-strip span { display: inline-flex; align-items: center; gap: 6px; }
.footer-trust-strip span::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); display: inline-block;
}

.site-footer-meta {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  font-size: 12px; color: var(--parchment-mute);
}
.site-footer-brand {
  font-family: var(--font-display); font-weight: 600; color: var(--parchment);
  display: inline-flex; align-items: center; gap: 6px;
}
.site-footer-brand .brand-mark { color: var(--cyan); }
.site-footer-meta a { color: var(--parchment-mute); }
.site-footer-meta a:hover { color: var(--parchment); text-decoration: underline; }
.site-footer-meta .meta-spacer { margin-left: auto; }

/* =============================================================================
   MOTION — entrance + scroll-reveal (FIX #2)
   Tasteful, CSS-only, progressive-enhancement. The default (no-animation) state
   of every element is its natural, fully-visible layout — animations only ENHANCE.
   Disabled wholesale by the prefers-reduced-motion block at the foot of the file.
   ============================================================================= */

/* On-load entrance: hero content fades + rises once. The element's resting CSS
   is opacity:1 / no transform, so removing the animation (reduced-motion) leaves
   it fully visible — no content is ever hidden behind the animation. A short
   `backwards` fill paints the start frame without a layout flash; the brief fade
   resolves within ~0.5s and never blocks reading. */
@keyframes entrance-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .eyebrow,
.hero h1,
.hero .lede,
.hero .cta-row,
.hero .subline,
.hero-microcopy {
  animation: entrance-up var(--dur-3) var(--ease) backwards;
}
.hero h1            { animation-delay: 40ms; }
.hero .lede         { animation-delay: 90ms; }
.hero .cta-row      { animation-delay: 140ms; }
.hero .subline      { animation-delay: 190ms; }
.hero-microcopy     { animation-delay: 230ms; }

/* Scroll-reveal: sections gently rise into view as they scroll up. Gated ENTIRELY
   behind @supports (animation-timeline: view()) — unsupporting browsers never see
   the opacity:0 start state, so content is fully visible by default there. No JS,
   no IntersectionObserver, no FOUC. */
@supports (animation-timeline: view()) {
  @keyframes reveal-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  main > .section {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  /* the first section above the fold should not start hidden */
  main > .section:first-child { animation: none; }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 860px) {
  .site-header-inner { flex-wrap: wrap; gap: 10px; }
  /* re-expose the toggle checkbox: visually hidden but FOCUSABLE + in the tab
     order (no display:none, no hidden attr). The visible label carries the
     focus ring via the .nav-toggle:focus-visible + .nav-toggle-label rule. */
  .nav-toggle {
    display: block; position: absolute;
    width: 1px; height: 1px; opacity: 0; margin: 0;
  }
  .nav-toggle-label { display: inline-block; }
  .nav-links {
    order: 3; flex-basis: 100%; flex-direction: column; align-items: flex-start;
    gap: 2px; margin-left: 0;
    max-height: 0; overflow: hidden; transition: max-height 0.2s ease;
  }
  .nav-toggle:checked ~ .nav-links { max-height: 520px; padding: 8px 0; }
  .nav-link { width: 100%; }
  .nav-cta-group { margin-left: 0; }
}

@media (max-width: 640px) {
  .hero { padding: 60px 20px 48px; }
  .section { padding: 44px 20px; }
  .site-footer { padding: 36px 20px 24px; }
  ol.steps li { gap: 14px; }
  .site-footer-meta .meta-spacer { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* kill ALL transitions + animations (entrance, scroll-reveal, shimmer, etc.) */
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* neutralize every hover/active lift + reveal/entrance offset added in FIX #2 so
     no element relies on motion to reach its final, fully-visible resting state */
  .btn:hover, .btn:active,
  .cta-primary:hover, .cta-primary:active,
  .cta-secondary:hover, .cta-secondary:active,
  .card:hover, .chip:hover, .callout:hover, .agent-tile:hover,
  ol.steps li:hover, .persona:hover {
    transform: none !important;
  }
  /* defensively force reveal/entrance targets to their visible end state in case a
     UA honours animation-timeline but not the reduced-motion animation reset */
  .hero .eyebrow, .hero h1, .hero .lede, .hero .cta-row, .hero .subline,
  .hero-microcopy, main > .section {
    opacity: 1 !important; transform: none !important;
  }
}