:root {
  --ds-color-bg-primary: #0e0e0f;
  --ds-color-bg-elevated: #181818;
  --ds-color-fg-primary: #f5f5f2;
  --ds-color-fg-muted: #b8b8ad;
  --ds-color-accent-primary: #d4ff3d;
  --ds-color-accent-on-paper: #53660d;
  --ds-color-accent-warn: #ff6a2e;
  --ds-color-divider: #2b2b2b;
  --ds-color-focus-ring: rgba(212, 255, 61, 0.72);
  --ds-color-paper: #f4f4ee;
  --ds-color-paper-muted: #dadad0;
  --ds-color-ink: #101011;
  --ds-color-ink-muted: #4d4d45;
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-pill: 999px;
  --ds-spacing-1: 8px;
  --ds-spacing-2: 16px;
  --ds-spacing-3: 24px;
  --ds-spacing-4: 32px;
  --ds-spacing-5: 40px;
  --ds-spacing-6: 48px;
  --ds-page-x: clamp(20px, 5vw, 64px);
  --ds-border-width: 1px;
  --ds-border-accent-width: 3px;
  --ds-font-family-display: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  --ds-font-family-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-size-testimonial: clamp(20px, 2.5vw, 26px);
  --ds-font-size-meta: 12px;
  --ds-font-weight-testimonial: 650;
  --ds-line-height-testimonial: 1.3;
  --ds-line-height-meta: 1.5;
  --ds-measure-testimonial: 55ch;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--ds-color-bg-primary);
  color: var(--ds-color-fg-primary);
  font-family: var(--ds-font-family-body);
  letter-spacing: 0;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(245, 245, 242, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 245, 242, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 74%);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

img {
  max-width: 100%;
}

::selection {
  background: var(--ds-color-accent-primary);
  color: var(--ds-color-ink);
}

:focus-visible {
  outline: 3px solid var(--ds-color-focus-ring);
  outline-offset: 4px;
}

.skip-link {
  /* Off-screen via transform only -- NOT visibility:hidden/display:none. Both of those
     remove an element from the focus tree entirely (confirmed via CDP: even a
     programmatic el.focus() call fails while visibility:hidden is in effect), which made
     this WCAG 2.4.1 "Bypass Blocks" skip-link permanently unreachable by keyboard on every
     page. transform keeps it focusable while still fully off-canvas at rest. */
  position: fixed;
  left: var(--ds-spacing-2);
  top: var(--ds-spacing-2);
  z-index: 100;
  padding: 10px 12px;
  background: var(--ds-color-accent-primary);
  color: var(--ds-color-ink);
  transform: translateY(-140%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-3);
  min-height: 72px;
  padding: 14px var(--ds-page-x);
  border-bottom: 1px solid var(--ds-color-divider);
  background: rgba(14, 14, 15, 0.94);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--ds-color-fg-primary);
  font-weight: 760;
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 36px;
  height: 36px;
  flex: none;
}

.brand span:last-child {
  white-space: nowrap;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 18px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  color: var(--ds-color-fg-muted);
  font-size: 14px;
  line-height: 20px;
}

.nav a {
  white-space: nowrap;
}

.nav a,
.footer-links a,
.text-link {
  text-decoration: none;
}

.nav a:hover,
.nav a:focus-visible,
.footer-links a:hover,
.footer-links a:focus-visible,
.text-link:hover,
.text-link:focus-visible {
  color: var(--ds-color-fg-primary);
  text-decoration: underline;
  text-decoration-color: var(--ds-color-accent-primary);
}

/* FENNEC header entry -- Sub-Brand-Marke im Mutter-Chrome (R-01a-R-01e,
   00_Company/Branding/.../subbrand-on-mother-domain-gastrecht.md). Sitzt als
   normaler <a> in .nav (nach "Kontakt", vor .is-legal), erbt damit Farbe,
   Hover/Underline und die mobile Register-Panel-Zeile 1:1 von .nav a -- kein
   eigenes Muster. Einziger Zusatz ist die Icon+Label-Ausrichtung. */
.fen-header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fen-header-mark {
  display: block;
  flex: none;
}

/* Aktiv-Zustand (auf /fennec/ bzw. /en/fennec/): identische Lime-Unterstreichung
   wie der Hover-Zustand oben, dauerhaft sichtbar statt nur bei Interaktion. Kein
   Sand-Akzent (R-01a) -- .lang-switch loest "aktiv" separat ueber einen Chip,
   das ist fuer fliessende Hauptnav-Links kein passendes Muster. */
.nav a[aria-current="page"] {
  color: var(--ds-color-fg-primary);
  text-decoration: underline;
  text-decoration-color: var(--ds-color-accent-primary);
}

.hero {
  position: relative;
  display: grid;
  min-height: min(760px, 78svh);
  border-bottom: 1px solid var(--ds-color-divider);
  overflow: hidden;
}

.hero picture,
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero img {
  object-fit: cover;
  object-position: center right;
  filter: saturate(0.88) contrast(1.08);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 14, 15, 0.98) 0%, rgba(14, 14, 15, 0.88) 42%, rgba(14, 14, 15, 0.36) 78%),
    linear-gradient(0deg, rgba(14, 14, 15, 0.9), rgba(14, 14, 15, 0.08) 48%);
}

.hero-content {
  position: relative;
  z-index: 1;
  align-self: end;
  width: min(900px, 100%);
  padding: clamp(92px, 12vw, 148px) var(--ds-page-x) clamp(64px, 9vw, 96px);
}

.eyebrow,
.meta,
.status-label,
.tile-index {
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
}

.eyebrow,
.meta,
.tile-index {
  color: var(--ds-color-accent-primary);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
}

h1 {
  width: 100%;
  max-width: min(820px, 100%);
  margin-top: 16px;
  font-size: clamp(42px, 7.6vw, 86px);
  line-height: 0.96;
}

h2 {
  font-size: clamp(30px, 4.8vw, 56px);
  line-height: 1.04;
}

h3 {
  font-size: 22px;
  line-height: 1.2;
}

.lead {
  width: 100%;
  max-width: 720px;
  margin: 28px 0 0;
  color: var(--ds-color-fg-muted);
  font-size: 18px;
  line-height: 1.62;
}

.pp-subtitle {
  margin: 6px 0 0;
  color: var(--ds-color-fg-muted);
  font-size: 15px;
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-contact-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-spacing-3);
  margin-top: var(--ds-spacing-2);
  font-weight: 720;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--ds-color-fg-primary);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-color-fg-primary);
  font-weight: 720;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
}

.button.primary {
  border-color: var(--ds-color-accent-primary);
  background: var(--ds-color-accent-primary);
  color: var(--ds-color-ink);
}

.button:hover,
.button:focus-visible {
  transform: translate(-1px, -1px);
}

.status-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--ds-color-divider);
}

.status-item {
  min-height: 104px;
  padding: 22px var(--ds-page-x);
  border-right: 1px solid var(--ds-color-divider);
}

.status-item:last-child {
  border-right: 0;
}

.status-label {
  display: block;
  margin-bottom: 10px;
  color: var(--ds-color-fg-muted);
}

.status-item strong {
  display: block;
  color: var(--ds-color-fg-primary);
  font-size: 17px;
  line-height: 1.35;
}

.section {
  padding: clamp(64px, 9vw, 112px) var(--ds-page-x);
}

.section.light {
  background: var(--ds-color-paper);
  color: var(--ds-color-ink);
}

.section-inner {
  width: min(1160px, 100%);
  margin: 0 auto;
}

.narrow {
  width: min(860px, 100%);
}

.section-split,
.founder-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  align-items: start;
  gap: clamp(36px, 7vw, 96px);
  width: min(1160px, 100%);
  margin: 0 auto;
}

/* The visual axis begins with the meta label and the first prose line. */
.section-split > div:first-child > .meta:first-child,
.founder-layout > div:first-child > .meta:first-child {
  margin-top: 0;
}

.prose p,
.section p,
.page p,
.page li {
  color: var(--ds-color-fg-muted);
  line-height: 1.72;
}

.prose p:first-child,
.content-section p:first-child {
  margin-top: 0;
}

/* Lime-Akzente auf hellem Grund: abgedunkeltes Lime (#53660d, >= 5.8:1 auf #f4f4ee).
   Reines Lime (#d4ff3d) waere auf Papier ~1.06:1 = unlesbar (Brand-Regel: Lime nie fg auf hell). */
.light .eyebrow,
.light .meta,
.light .tile-index {
  color: var(--ds-color-accent-on-paper);
}

.light p,
.light .tile p {
  color: var(--ds-color-ink-muted);
}

/* Hover/Focus der Text-Links in Light-Sektionen dunkel halten (Basisregel setzt fg-primary = off-white,
   das waere auf Papier unlesbar und ein Fokus-Sichtbarkeitsproblem). */
.light .text-link:hover,
.light .text-link:focus-visible {
  color: var(--ds-color-ink);
  text-decoration-color: var(--ds-color-accent-on-paper);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 40px;
  border: 1px solid var(--ds-color-divider);
  background: var(--ds-color-divider);
}

.grid.two,
.contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tile {
  min-height: 220px;
  padding: 28px;
  background: var(--ds-color-bg-primary);
}

.light .grid {
  border-color: var(--ds-color-paper-muted);
  background: var(--ds-color-paper-muted);
}

.light .tile {
  background: var(--ds-color-paper);
}

.product-tile {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tile p {
  margin: 0;
}

.tile .text-link {
  margin-top: auto;
}

.principle-list {
  display: grid;
  gap: 1px;
  border: 1px solid var(--ds-color-divider);
  background: var(--ds-color-divider);
}

.principle-list article {
  padding: 26px;
  background: var(--ds-color-bg-primary);
}

.principle-list p {
  margin: 14px 0 0;
}

.founder-band {
  border-block: 1px solid var(--ds-color-divider);
  background: var(--ds-color-bg-elevated);
}

.final-cta {
  min-height: 420px;
}

.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.check-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ds-color-divider);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-color-fg-muted);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
}

.page {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
  padding: 88px 0 104px;
}

.page h1 {
  font-size: clamp(40px, 6.4vw, 72px);
}

.content-section {
  margin-top: 52px;
}

.content-section h2 {
  font-size: clamp(26px, 4vw, 36px);
  overflow-wrap: anywhere;
}

address {
  font-style: normal;
  line-height: 1.55;
}

.notice {
  margin-top: 32px;
  padding: 20px;
  border: 1px solid var(--ds-color-accent-warn);
  border-radius: var(--ds-radius-md);
  background: rgba(255, 106, 46, 0.1);
}

.notice.neutral {
  border-color: var(--ds-color-divider);
  background: var(--ds-color-bg-elevated);
}

.notice p {
  margin: 0;
}

.contact-grid {
  display: grid;
  gap: 1px;
  margin-top: 28px;
  border: 1px solid var(--ds-color-divider);
  background: var(--ds-color-divider);
}

.contact-form {
  display: grid;
  gap: 18px;
  max-width: 680px;
  margin-top: 28px;
}

.contact-form label {
  display: grid;
  gap: var(--ds-spacing-1);
  color: var(--ds-color-fg-muted);
  font-size: 14px;
  font-weight: 700;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--ds-color-divider);
  border-radius: var(--ds-radius-sm);
  padding: 13px 14px;
  background: var(--ds-color-bg-elevated);
  color: var(--ds-color-fg-primary);
  font: inherit;
}

.contact-form textarea {
  resize: vertical;
  min-height: 156px;
}

.contact-status,
.contact-fallback {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ds-color-divider);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-bg-elevated);
  color: var(--ds-color-fg-muted);
  font-size: 14px;
  line-height: 1.5;
}

.legal-page a,
.page .text-link {
  color: var(--ds-color-fg-primary);
}

.error-page {
  min-height: calc(100svh - 260px);
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) minmax(200px, 0.8fr) minmax(180px, 0.5fr);
  gap: 28px;
  padding: 34px var(--ds-page-x);
  border-top: 1px solid var(--ds-color-divider);
  color: var(--ds-color-fg-muted);
  font-size: 14px;
}

.footer-brand p,
.footer-meta span {
  margin: 14px 0 0;
  color: var(--ds-color-fg-muted);
  line-height: 1.6;
}

.footer-links,
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-meta {
  align-items: flex-start;
}

@media (max-width: 900px) {
  .site-footer,
  .section-split,
  .founder-layout,
  .status-band {
    grid-template-columns: 1fr;
  }

  /* Header: compact flex row (brand + lang-switch + toggle), panel below.
     Budgeted to fit a 360px viewport in one row. */
  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 8px var(--ds-page-x);
  }

  .brand {
    gap: 10px;
    font-size: 16px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
  }

  /* Nav becomes a full-width panel that sits below the header row */
  .nav {
    display: block;
    order: 10;
    width: 100%;
  }

  /* Nav links: register rows */
  .nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 4px;
    border-bottom: 1px solid var(--ds-color-divider);
    color: var(--ds-color-fg-primary);
    font-size: 17px;
    white-space: normal;
  }

  .nav a:hover,
  .nav a:focus-visible {
    color: var(--ds-color-fg-primary);
    text-decoration: underline;
    text-decoration-color: var(--ds-color-accent-primary);
  }

  /* Legal links: visually separated, reduced prominence */
  .nav a.is-legal {
    min-height: 40px;
    font-size: 14px;
    color: var(--ds-color-fg-muted);
  }

  /* First legal link carries a stronger top separator (first .is-legal after a core link) */
  .nav a:not(.is-legal) + a.is-legal {
    margin-top: 6px;
    border-top: 1px solid var(--ds-color-divider);
  }

  /* Lang-switch: push to the right, vertically centred in the header row */
  .lang-switch {
    align-self: center;
    margin-left: auto;
  }

  /* Touch-target for lang-switch links: slimmer width, full-height target */
  .lang-switch a {
    min-width: 30px;
    min-height: 44px;
    padding: 0 6px;
  }

  /* Toggle button: visible only when JS is present */
  .js .nav-toggle {
    display: inline-flex;
  }

  /* Panel: collapsed by default with JS; animates open. visibility keeps the
     collapsed links out of the tab order (WCAG: no invisible focus targets).
     nav.js sets the exact max-height from scrollHeight for a crisp curve. */
  .js .nav {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 240ms cubic-bezier(0.32, 0.72, 0, 1),
                opacity 240ms cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s 240ms;
  }

  .js .nav.is-open {
    max-height: 520px;
    opacity: 1;
    visibility: visible;
    transition: max-height 240ms cubic-bezier(0.32, 0.72, 0, 1),
                opacity 240ms cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s 0s;
  }

  /* scroll-padding adjusted for shorter mobile header */
  html {
    scroll-padding-top: 64px;
  }

  .status-item {
    border-right: 0;
    border-bottom: 1px solid var(--ds-color-divider);
  }

  .status-item:last-child {
    border-bottom: 0;
  }

  .grid,
  .grid.two,
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .site-header {
    padding: 8px 16px;
  }

  .hero {
    min-height: 660px;
  }

  .hero-content,
  .section-inner,
  .section-split,
  .founder-layout,
  .narrow {
    width: 100%;
    max-width: min(310px, calc(100vw - 48px));
  }

  .page {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 88px 24px 104px;
  }

  .hero-content,
  .section {
    padding-right: 24px;
    padding-left: 24px;
  }

  h1,
  .page h1 {
    font-size: clamp(38px, 11vw, 46px);
  }

  .hero::after {
    background:
      linear-gradient(90deg, rgba(14, 14, 15, 0.98) 0%, rgba(14, 14, 15, 0.9) 66%, rgba(14, 14, 15, 0.7)),
      linear-gradient(0deg, rgba(14, 14, 15, 0.94), rgba(14, 14, 15, 0.2) 44%);
  }

  .button {
    width: 100%;
  }

  .tile,
  .principle-list article {
    min-height: auto;
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Nav panel: no slide animation for users who prefer reduced motion */
  @media (max-width: 900px) {
    .js .nav {
      transition: none;
    }
  }
}

/* ==========================================================================
   Product pages (pp-*) — "Paper on a desk"
   The product interiors are warm paper (#faf8f3, petrol accent, serif). Excerpt
   and calculator cards render as light paper inside the dark site layout, so a
   visitor sees the real product interior. Colours below mirror the product build
   token set (paper/ink/petrol/ok/stop/warn). Serif stack matches the guides.
   ========================================================================== */
:root {
  --pp-paper: #faf8f3;
  --pp-surface: #ffffff;
  --pp-ink: #16181d;
  --pp-ink-soft: #4a4f57;
  --pp-muted: #60666e;
  --pp-line: #e6e2d8;
  --pp-accent: #0f5c57;
  --pp-accent-ink: #0a3d39;
  --pp-accent-wash: #eaf2f0;
  --pp-warn-line: #e6a94e;
  --pp-warn-wash: #fdf3e7;
  --pp-warn-ink: #7a5b1e;
  --pp-ok: #2f7d5a;
  --pp-stop: #b23b32;
  --pp-bad: #a8432e;
  --pp-bad-wash: #f7ede9;
  --pp-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --pp-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

.pp-page {
  width: min(1000px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0 104px;
}

.pp-breadcrumb {
  margin: 0 0 22px;
  color: var(--ds-color-fg-muted);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
}

.pp-breadcrumb a {
  color: var(--ds-color-fg-muted);
}

.pp-breadcrumb a:hover,
.pp-breadcrumb a:focus-visible {
  color: var(--ds-color-fg-primary);
  text-decoration-color: var(--ds-color-accent-primary);
}

/* Spec chips: compact monospace facts */
.pp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.pp-chips li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--ds-color-divider);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-color-fg-muted);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.3;
}

/* CTA block: price + button + micro copy */
.pp-cta {
  margin: 40px 0;
  padding: 28px;
  border: 1px solid var(--ds-color-divider);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-bg-elevated);
}

.pp-testimonial {
  margin: var(--ds-spacing-5) 0;
  padding: var(--ds-spacing-3);
  border: var(--ds-border-width) solid var(--ds-color-divider);
  border-left: var(--ds-border-accent-width) solid var(--ds-color-accent-primary);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-bg-elevated);
}

.pp-testimonial h2 {
  margin: 0;
}

.pp-testimonial figure {
  margin: var(--ds-spacing-2) 0 0;
}

.pp-testimonial blockquote {
  max-width: var(--ds-measure-testimonial);
  margin: 0;
  color: var(--ds-color-fg-primary);
  font-family: var(--ds-font-family-display);
  font-size: var(--ds-font-size-testimonial);
  font-weight: var(--ds-font-weight-testimonial);
  line-height: var(--ds-line-height-testimonial);
}

.pp-testimonial blockquote p {
  margin: 0;
}

/* Lange Bewertungen (mehr als zwei, drei Saetze) im Display-Grad gesetzt werden
   zur Werbetafel — genau der Effekt, den die Bewertungsdarstellung vermeiden
   soll. Ein zitiertes Absatzformat bleibt lesbar und behauptet nichts.
   Belegt am Render 2026-08-05: die englische Bewertung fuellt im Display-Grad
   sieben Zeilen, die deutsche zwei. */
.pp-testimonial.is-long blockquote {
  max-width: 68ch;
  font-family: var(--ds-font-family-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.62;
}

.pp-testimonial figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-1) var(--ds-spacing-2);
  margin-top: var(--ds-spacing-3);
  color: var(--ds-color-fg-muted);
  font-family: var(--pp-mono);
  font-size: var(--ds-font-size-meta);
  line-height: var(--ds-line-height-meta);
}

.pp-testimonial figcaption a {
  color: var(--ds-color-fg-primary);
  text-decoration-color: var(--ds-color-accent-primary);
}

.pp-testimonial figcaption a:hover,
.pp-testimonial figcaption a:focus-visible {
  color: var(--ds-color-accent-primary);
}

.pp-price {
  margin: 0;
  color: var(--ds-color-fg-primary);
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 30px;
  font-weight: 760;
  line-height: 1.1;
}

.pp-price-note {
  margin: 10px 0 0;
  max-width: 640px;
  color: var(--ds-color-fg-muted);
  font-size: 14px;
  line-height: 1.6;
}

.pp-cta .actions {
  margin-top: 22px;
}

.pp-offer {
  margin: 12px 0 0;
  color: var(--ds-color-accent-primary);
  font-size: 14px;
  line-height: 1.6;
}

.pp-price-small {
  color: var(--ds-color-fg-muted);
  font-size: 14px;
  font-weight: 400;
}

.pp-lang-notice {
  margin: 24px 0;
  padding: 16px 20px;
  border: 1px solid var(--ds-color-divider);
  border-left: 3px solid var(--ds-color-accent-primary);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-bg-elevated);
  color: var(--ds-color-fg-muted);
  font-size: 15px;
  line-height: 1.65;
}

.pp-micro {
  margin: 18px 0 0;
  color: var(--ds-color-fg-muted);
  font-size: 14px;
  line-height: 1.6;
}

.pp-disclosure {
  margin: 8px 0 0;
  color: var(--ds-color-fg-muted);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.pp-lang-flag {
  margin: 0 0 8px;
  color: var(--ds-color-accent-warn);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
}

/* Hub product cards (cover + facts) */
.pp-product-list {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}

.pp-product-card {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 40px);
  padding: 24px;
  border: 1px solid var(--ds-color-divider);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-bg-elevated);
}

.pp-product-card .pp-cover {
  align-self: start;
  width: 100%;
  height: auto;
  border: 1px solid var(--ds-color-divider);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-bg-primary);
}

.pp-product-card h3 {
  margin: 0;
}

.pp-product-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pp-facts {
  margin: 0;
  padding-left: 18px;
  color: var(--ds-color-fg-muted);
  line-height: 1.6;
}

.pp-facts li {
  margin: 4px 0;
}

/* Paper cards — the product interior on the dark site */
.pp-paper {
  margin: 24px 0;
  padding: 0;
  border: 1px solid var(--pp-line);
  border-radius: var(--ds-radius-md);
  background: var(--pp-paper);
  color: var(--pp-ink);
  overflow: hidden;
}

.pp-paper-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--pp-line);
  background: var(--pp-surface);
  color: var(--pp-muted);
  font-family: var(--pp-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pp-paper-head .pp-page-num {
  color: var(--pp-accent);
}

.pp-paper-body {
  padding: 24px clamp(20px, 4vw, 34px);
}

.pp-paper h2,
.pp-paper h3,
.pp-paper h4 {
  font-family: var(--pp-serif);
  color: var(--pp-ink);
  line-height: 1.2;
  letter-spacing: 0;
}

.pp-paper h3 {
  margin: 0 0 12px;
  font-size: 24px;
}

.pp-paper h4 {
  margin: 0 0 8px;
  font-size: 17px;
}

.pp-paper p,
.pp-paper li {
  color: var(--pp-ink-soft);
  line-height: 1.68;
}

.pp-paper p:first-child {
  margin-top: 0;
}

.pp-paper strong {
  color: var(--pp-ink);
}

.pp-paper figure {
  margin: 0;
}

.pp-paper svg {
  display: block;
  width: 100%;
  height: auto;
}

.pp-paper figure img {
  display: block;
  width: 100%;
  height: auto;
}

.pp-paper figcaption {
  margin-top: 12px;
  color: var(--pp-muted);
  font-size: 13px;
  line-height: 1.5;
}

.pp-paper-foot {
  padding: 12px 24px;
  border-top: 1px solid var(--pp-line);
  background: var(--pp-surface);
  color: var(--pp-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* KPI grid inside paper */
.pp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 20px;
}

.pp-kpi {
  padding: 16px;
  border: 1px solid var(--pp-line);
  border-radius: var(--ds-radius-md);
  background: var(--pp-surface);
}

.pp-kpi .n {
  font-family: var(--pp-serif);
  font-size: 28px;
  color: var(--pp-accent-ink);
}

.pp-kpi .l {
  margin-top: 4px;
  color: var(--pp-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Do / Don't 2x2 inside paper */
.pp-proco {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.pp-proco .pp-card {
  padding: 16px 18px;
  border: 1px solid var(--pp-line);
  border-radius: var(--ds-radius-md);
  background: var(--pp-surface);
}

.pp-proco .pp-do {
  border-left: 4px solid var(--pp-accent);
  background: var(--pp-accent-wash);
}

.pp-proco .pp-dont {
  border-left: 4px solid var(--pp-bad);
  background: var(--pp-bad-wash);
}

.pp-proco .pp-card-h {
  margin-bottom: 8px;
  font-family: var(--pp-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pp-proco .pp-do .pp-card-h {
  color: var(--pp-accent-ink);
}

.pp-proco .pp-dont .pp-card-h {
  color: var(--pp-bad);
}

.pp-proco ul {
  margin: 0;
  padding-left: 18px;
}

.pp-proco li {
  font-size: 15px;
  margin: 5px 0;
}

/* Calculator card (live demo) */
.pp-calc {
  margin: 20px 0 0;
  padding: 22px;
  border: 1px solid var(--pp-line);
  border-radius: var(--ds-radius-md);
  background: var(--pp-surface);
}

.pp-calc h3,
.pp-calc h4 {
  margin-top: 0;
  font-family: var(--pp-serif);
  color: var(--pp-ink);
}

.pp-calc .pp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.pp-calc .pp-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
}

.pp-calc label {
  display: block;
  color: var(--pp-ink-soft);
  font-size: 14px;
}

.pp-calc input,
.pp-calc select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  width: 180px;
  max-width: 100%;
  background: var(--pp-paper);
  color: var(--pp-ink);
  text-align: right;
}

.pp-calc select {
  width: auto;
  max-width: 340px;
  text-align: left;
}

.pp-calc .pp-grid2 input,
.pp-calc .pp-grid2 select {
  width: 100%;
  margin-bottom: 10px;
}

.pp-field-error {
  margin: 8px 0 0;
  color: var(--pp-stop);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.pp-calc input[aria-invalid="true"] {
  border-color: var(--pp-stop);
  outline: 2px solid var(--pp-bad-wash);
}

.pp-calc .pp-result {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--pp-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pp-calc .pp-result output {
  color: var(--pp-ink-soft);
  font-size: 15px;
}

.pp-calc .pp-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--pp-line);
}

.pp-calc .pp-result-grid .n {
  font-family: var(--pp-serif);
  font-size: 26px;
  color: var(--pp-accent-ink);
  font-variant-numeric: tabular-nums;
}

.pp-calc .pp-result-grid .l {
  color: var(--pp-muted);
  font-size: 13px;
}

.pp-ampel {
  margin: 14px 0;
}

.pp-ampel .pp-bar {
  position: relative;
  height: 20px;
  border-radius: var(--ds-radius-pill);
  background: var(--pp-line);
  overflow: hidden;
}

.pp-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--pp-ok);
  transition: width 0.2s ease, background 0.2s ease;
}

.pp-fill.mid {
  background: var(--pp-warn-line);
}

.pp-fill.high {
  background: var(--pp-stop);
}

.pp-ampel .pp-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--pp-muted);
  font-size: 13px;
}

.pp-badge-ok {
  color: var(--pp-ok);
  font-weight: 600;
}

.pp-badge-mid {
  color: var(--pp-warn-ink);
  font-weight: 600;
}

.pp-badge-high {
  color: var(--pp-stop);
  font-weight: 600;
}

.pp-formula {
  margin-top: 10px;
  color: var(--pp-muted);
  font-size: 13px;
  line-height: 1.5;
}

.pp-calc noscript {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--pp-warn-line);
  border-radius: var(--ds-radius-md);
  background: var(--pp-warn-wash);
  color: var(--pp-warn-ink);
  font-size: 14px;
  line-height: 1.5;
}

.pp-disclaimer {
  margin: 12px 0 0;
  color: var(--ds-color-fg-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Two-column "for whom / not for whom" */
.pp-audience {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 24px;
  border: 1px solid var(--ds-color-divider);
  background: var(--ds-color-divider);
}

.pp-audience article {
  padding: 24px;
  background: var(--ds-color-bg-primary);
}

.pp-audience h3 {
  margin: 0 0 12px;
}

.pp-audience ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ds-color-fg-muted);
  line-height: 1.6;
}

/* Chapter / contents list */
.pp-toc {
  margin-top: 24px;
  padding-left: 0;
  list-style: none;
  counter-reset: pp-toc;
}

.pp-toc li {
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-color-divider);
  color: var(--ds-color-fg-muted);
  line-height: 1.55;
}

.pp-toc li::before {
  counter-increment: pp-toc;
  content: counter(pp-toc, decimal-leading-zero) "  ";
  color: var(--ds-color-accent-primary);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
}

.pp-toc strong {
  color: var(--ds-color-fg-primary);
}

/* Cross-link card + language link */
.pp-faq details {
  border-bottom: 1px solid var(--ds-color-divider);
  padding: 6px 0;
}

.pp-faq summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 640;
  color: var(--ds-color-fg-primary);
  list-style-position: outside;
}

.pp-faq summary::marker {
  color: var(--ds-color-accent-primary);
}

.pp-faq details p {
  margin: 4px 0 14px;
  max-width: 70ch;
  color: var(--ds-color-fg-muted);
  line-height: 1.65;
}

.pp-crosslink {
  margin: 40px 0 0;
  padding: 24px;
  border: 1px solid var(--ds-color-divider);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-bg-elevated);
}

.pp-crosslink h3 {
  margin: 0 0 10px;
}

.pp-langlink {
  margin: 32px 0 0;
}

/* Knowledge hub entry list — stacked list, not a card grid (see /wissen/, /en/knowledge/). */
.pp-entry-list { margin-top: 40px; border-top: 1px solid var(--ds-color-divider); }
.pp-entry { padding: 30px 0; border-bottom: 1px solid var(--ds-color-divider); }
.pp-entry h3 { margin: 8px 0 12px; font-size: clamp(22px, 3vw, 28px); }
.pp-entry > p:not(.meta) { margin: 0 0 14px; max-width: 72ch; color: var(--ds-color-fg-muted); line-height: 1.7; }

/* Abschluss-Link im gedimmten Fliesstext sichtbar abheben (Blast Radius: nur .pp-section > p). */
.pp-section > p .text-link { color: var(--ds-color-fg-primary); }

.pp-section {
  margin-top: 56px;
}

.pp-section > h2 {
  font-size: clamp(26px, 4vw, 38px);
}

.pp-section > p {
  color: var(--ds-color-fg-muted);
  line-height: 1.72;
}

@media (max-width: 760px) {
  .pp-product-card {
    grid-template-columns: 1fr;
  }

  .pp-kpi-grid,
  .pp-proco,
  .pp-audience,
  .pp-calc .pp-grid2,
  .pp-calc .pp-result-grid {
    grid-template-columns: 1fr;
  }

  .pp-calc .pp-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .pp-calc input,
  .pp-calc select {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .pp-page {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 72px 24px 104px;
  }

  .pp-paper-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .pp-paper-head span {
    min-width: 0;
  }
}

/* Language switcher — displayed after the main <nav> inside .site-header.
   Uses existing design tokens; no new colours. The active-language link is
   highlighted via the aria-current attribute so screen readers and sighted
   users get the same signal without a redundant class. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0;
  flex: none;
  border: 1px solid var(--ds-color-divider);
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 28px;
  padding: 0 8px;
  color: var(--ds-color-fg-muted);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.lang-switch a:first-child {
  border-right: 1px solid var(--ds-color-divider);
}

.lang-switch a[aria-current="page"] {
  background: var(--ds-color-bg-elevated);
  color: var(--ds-color-fg-primary);
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
  color: var(--ds-color-fg-primary);
  background: var(--ds-color-bg-elevated);
  text-decoration: none;
}

/* Mobile nav toggle — hidden by default (desktop + no-JS). Shown only when .js
   is present on <html> (set by nav.js before first paint) and within ≤900px. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-color-fg-muted);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle:hover,
.nav-toggle:focus-visible,
.nav-toggle[aria-expanded="true"] {
  color: var(--ds-color-fg-primary);
  background: var(--ds-color-bg-elevated);
}

/* Score motif (Orchestrating AI Agents): self-contained dark-petrol SVG exhibit.
   On narrow screens the figure becomes a swipeable region; direction:rtl anchors
   the initial view on the right, so the HUMAN-approves ring (the meaning carrier)
   is visible without swiping. The SVG itself restores ltr. */
.pp-score {
  --pp-score-bg: #082f2b;
  --pp-score-line: #1b524c;
  --pp-score-label: #9fc4be;
  --pp-score-note: #faf8f3;
  --pp-score-connector: #2c635d;
  --pp-score-converge: #3f6f69;
  --pp-score-approval: #d98a3d;
  --pp-score-approval-text: #e8a45f;
  --pp-score-font-family: var(--ds-font-family-display);
  margin: 24px 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  direction: rtl;
  border-radius: var(--ds-radius-md);
}

.pp-score svg {
  display: block;
  width: 100%;
  min-width: 880px;
  height: auto;
  direction: ltr;
}

.pp-score:focus-visible {
  outline: 3px solid var(--ds-color-focus-ring);
  outline-offset: 4px;
}

/* ==========================================================================
   FENNEC subpage (fen-*) — "Gastrecht" (guest-right).
   Header/Footer/Skip-Link/Focus-Ring/::selection stay Lime everywhere on the
   site, including on this page — that Mutter-Chrome is outside `.fen`. Inside
   `.fen` (the <main>), Sand fully replaces the accent through exactly ONE
   token rebinding below; every component that reads --ds-color-accent-primary
   (.eyebrow, .meta, .tile-index, .text-link underline, focus ring) turns Sand
   automatically. Do not add a second accent declaration anywhere in .fen.
   No `.light` section here (R-03): the FENNEC mark has no light variant, so
   the section rhythm alternates bg-primary <-> bg-elevated instead of paper.
   Source: FENNEC-Unterseite Gestaltungskonzept v1 (@Brand, 2026-07-19),
   rules R-01..R-13; implemented by @Prog per @Neo delegation, same date.
   ========================================================================== */
.fen {
  /* New literals permitted by R-02: --fen-sand, --fen-sand-ink, the three
     --fen-state-*. Everything else in this section must be var()-references
     to existing --ds-* tokens. */
  --fen-sand: #e0a64c; /* 8.9:1 on #0e0e0f */
  --fen-sand-ink: #7a5b1e; /* 5.7:1 on #f4f4ee — reserved for a future light surface, unused today */
  --fen-state-stop: var(--ds-color-accent-warn); /* reuses the existing warn token, not a new colour */
  --fen-state-mid: var(--fen-sand); /* identical to Sand on purpose — the amber state costs no 4th colour */
  --fen-state-go: #6fbf73; /* 8.6:1 on #0e0e0f — the one genuinely new state colour */
  --ds-color-accent-primary: var(--fen-sand);
  /* 0.85, not 0.72 (R-A6): rechnerisch AA-konform bei 0.72, aber der Ring rendert matter als
     die Text-Link-Unterstreichung darunter — @Brand-Nachbesserung. */
  --ds-color-focus-ring: rgba(224, 166, 76, 0.85);
}

.fen-hero {
  padding-top: clamp(96px, 12vw, 140px);
  border-top: 0;
}

.fen-wordmark {
  display: block;
  height: 64px;
  width: auto;
}

.fen-hero h1 {
  margin-top: 28px;
}

.fen-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 30px;
}

/* Every non-hero .fen section gets exactly one hairline from its predecessor;
   alternating background carries the rest of the rhythm (§2.2). */
.fen-section {
  border-top: 1px solid var(--ds-color-divider);
}

.fen-elevated {
  background: var(--ds-color-bg-elevated);
}

/* ---- S2: 90-day track + hopper (§3.6, §3.3) ------------------------------ */
/* Ein Raster statt zwei (Punkt 3, @Brand-Entscheidung): --fen-fields ist die EINZIGE Quelle
   fuer die Feldzahl der Leiste. Tick-Muster (::after), Sprungweite (fennec.js, liest denselben
   Custom-Property-Wert per getComputedStyle) und implizit die Hopper-/Tagesfeld-Position (siehe
   Kommentar bei .fen-hopper-outer) rechnen alle dagegen. Vorher: das Tick-Muster war fest auf
   90 verdrahtet, nur die Sprunganimation kannte den 30er-Wert separat — zwei Quellen, die nur
   zufaellig denselben Breakpoint (560px) trafen. */
.fen-track {
  position: relative;
  margin-top: var(--ds-spacing-4);
  --fen-fields: 90;
}

@media (max-width: 560px) {
  .fen-track {
    --fen-fields: 30; /* ein Feld = 3 Tage auf schmalen Viewports */
  }
}

/* B2 (@Brand-Blocker-Anhang): der Fuchs wurde bei kleinen Tageswerten am linken Rand der
   Leiste amputiert, weil .fen-track-rail overflow:hidden traegt und links/rechts KEIN
   Innenabstand existierte. --fen-hopper-pad reserviert diesen Abstand rechnerisch (mindestens
   die halbe Hopper-Breite, siehe .fen-hopper unten) und --fen-day-pos remappt die Tagesposition
   EINMALIG auf die dadurch gepolsterte Innenbreite — Tick-Reveal (clip-path), Sand-Leiste
   (.fen-track-elapsed) und Hopper-Position lesen alle aus --fen-day-pos, nie mehr direkt aus
   --fen-day-pct. Das schliesst zugleich Tag 90 (rechter Rand) mit ein, nicht nur Tag 1/2.
   fennec.js dupliziert dieselbe Formel in Pixeln fuer die Sprunganimation (HOPPER_PAD_PX muss
   mit --fen-hopper-pad hier uebereinstimmen), damit Ruheposition (CSS) und Animationsziel (JS)
   nie auseinanderlaufen. */
.fen-track {
  /* Runde 4 (2026-07-19, querformatige Silhouette, viewBox 64x48): die neue Standardbreite
     (53.3333px bei 40px Renderhoehe, siehe .fen-hopper unten) braucht deutlich mehr
     Randabstand als das vormals hochformatige Ohr-Icon (10px breit -> 6px Pad reichte). Pad
     ist auf die halbe DESKTOP-Breite aufgerundet (27px statt exakt 26.6667px) und bleibt eine
     einzige, breakpoint-unabhaengige Konstante — bei der schmaleren Mobil-Groesse (42.6667px,
     siehe @media unten) ist 27px automatisch weiterhin ausreichend (>halbe Mobil-Breite),
     nie zu wenig. */
  --fen-hopper-pad: 27px;
  --fen-day-pos: calc(
    var(--fen-hopper-pad) + var(--fen-day-pct, 0%) -
      (var(--fen-day-pct, 0%) / 100%) * (2 * var(--fen-hopper-pad))
  );
}

/* Day 1..90 lookup table (deterministic: n/90 * 100, 4 decimals). Generated
   once, not per-build — this is a fixed 90-entry table, not day-specific
   content. Selects --fen-day-pct for whichever single .fen-day-N class is
   present on .fen-track; the server renders the build-time-correct one,
   JS swaps it if the client-computed day differs (see fennec.js). */
.fen-track.fen-day-1 { --fen-day-pct: 1.1111%; }
.fen-track.fen-day-2 { --fen-day-pct: 2.2222%; }
.fen-track.fen-day-3 { --fen-day-pct: 3.3333%; }
.fen-track.fen-day-4 { --fen-day-pct: 4.4444%; }
.fen-track.fen-day-5 { --fen-day-pct: 5.5556%; }
.fen-track.fen-day-6 { --fen-day-pct: 6.6667%; }
.fen-track.fen-day-7 { --fen-day-pct: 7.7778%; }
.fen-track.fen-day-8 { --fen-day-pct: 8.8889%; }
.fen-track.fen-day-9 { --fen-day-pct: 10.0000%; }
.fen-track.fen-day-10 { --fen-day-pct: 11.1111%; }
.fen-track.fen-day-11 { --fen-day-pct: 12.2222%; }
.fen-track.fen-day-12 { --fen-day-pct: 13.3333%; }
.fen-track.fen-day-13 { --fen-day-pct: 14.4444%; }
.fen-track.fen-day-14 { --fen-day-pct: 15.5556%; }
.fen-track.fen-day-15 { --fen-day-pct: 16.6667%; }
.fen-track.fen-day-16 { --fen-day-pct: 17.7778%; }
.fen-track.fen-day-17 { --fen-day-pct: 18.8889%; }
.fen-track.fen-day-18 { --fen-day-pct: 20.0000%; }
.fen-track.fen-day-19 { --fen-day-pct: 21.1111%; }
.fen-track.fen-day-20 { --fen-day-pct: 22.2222%; }
.fen-track.fen-day-21 { --fen-day-pct: 23.3333%; }
.fen-track.fen-day-22 { --fen-day-pct: 24.4444%; }
.fen-track.fen-day-23 { --fen-day-pct: 25.5556%; }
.fen-track.fen-day-24 { --fen-day-pct: 26.6667%; }
.fen-track.fen-day-25 { --fen-day-pct: 27.7778%; }
.fen-track.fen-day-26 { --fen-day-pct: 28.8889%; }
.fen-track.fen-day-27 { --fen-day-pct: 30.0000%; }
.fen-track.fen-day-28 { --fen-day-pct: 31.1111%; }
.fen-track.fen-day-29 { --fen-day-pct: 32.2222%; }
.fen-track.fen-day-30 { --fen-day-pct: 33.3333%; }
.fen-track.fen-day-31 { --fen-day-pct: 34.4444%; }
.fen-track.fen-day-32 { --fen-day-pct: 35.5556%; }
.fen-track.fen-day-33 { --fen-day-pct: 36.6667%; }
.fen-track.fen-day-34 { --fen-day-pct: 37.7778%; }
.fen-track.fen-day-35 { --fen-day-pct: 38.8889%; }
.fen-track.fen-day-36 { --fen-day-pct: 40.0000%; }
.fen-track.fen-day-37 { --fen-day-pct: 41.1111%; }
.fen-track.fen-day-38 { --fen-day-pct: 42.2222%; }
.fen-track.fen-day-39 { --fen-day-pct: 43.3333%; }
.fen-track.fen-day-40 { --fen-day-pct: 44.4444%; }
.fen-track.fen-day-41 { --fen-day-pct: 45.5556%; }
.fen-track.fen-day-42 { --fen-day-pct: 46.6667%; }
.fen-track.fen-day-43 { --fen-day-pct: 47.7778%; }
.fen-track.fen-day-44 { --fen-day-pct: 48.8889%; }
.fen-track.fen-day-45 { --fen-day-pct: 50.0000%; }
.fen-track.fen-day-46 { --fen-day-pct: 51.1111%; }
.fen-track.fen-day-47 { --fen-day-pct: 52.2222%; }
.fen-track.fen-day-48 { --fen-day-pct: 53.3333%; }
.fen-track.fen-day-49 { --fen-day-pct: 54.4444%; }
.fen-track.fen-day-50 { --fen-day-pct: 55.5556%; }
.fen-track.fen-day-51 { --fen-day-pct: 56.6667%; }
.fen-track.fen-day-52 { --fen-day-pct: 57.7778%; }
.fen-track.fen-day-53 { --fen-day-pct: 58.8889%; }
.fen-track.fen-day-54 { --fen-day-pct: 60.0000%; }
.fen-track.fen-day-55 { --fen-day-pct: 61.1111%; }
.fen-track.fen-day-56 { --fen-day-pct: 62.2222%; }
.fen-track.fen-day-57 { --fen-day-pct: 63.3333%; }
.fen-track.fen-day-58 { --fen-day-pct: 64.4444%; }
.fen-track.fen-day-59 { --fen-day-pct: 65.5556%; }
.fen-track.fen-day-60 { --fen-day-pct: 66.6667%; }
.fen-track.fen-day-61 { --fen-day-pct: 67.7778%; }
.fen-track.fen-day-62 { --fen-day-pct: 68.8889%; }
.fen-track.fen-day-63 { --fen-day-pct: 70.0000%; }
.fen-track.fen-day-64 { --fen-day-pct: 71.1111%; }
.fen-track.fen-day-65 { --fen-day-pct: 72.2222%; }
.fen-track.fen-day-66 { --fen-day-pct: 73.3333%; }
.fen-track.fen-day-67 { --fen-day-pct: 74.4444%; }
.fen-track.fen-day-68 { --fen-day-pct: 75.5556%; }
.fen-track.fen-day-69 { --fen-day-pct: 76.6667%; }
.fen-track.fen-day-70 { --fen-day-pct: 77.7778%; }
.fen-track.fen-day-71 { --fen-day-pct: 78.8889%; }
.fen-track.fen-day-72 { --fen-day-pct: 80.0000%; }
.fen-track.fen-day-73 { --fen-day-pct: 81.1111%; }
.fen-track.fen-day-74 { --fen-day-pct: 82.2222%; }
.fen-track.fen-day-75 { --fen-day-pct: 83.3333%; }
.fen-track.fen-day-76 { --fen-day-pct: 84.4444%; }
.fen-track.fen-day-77 { --fen-day-pct: 85.5556%; }
.fen-track.fen-day-78 { --fen-day-pct: 86.6667%; }
.fen-track.fen-day-79 { --fen-day-pct: 87.7778%; }
.fen-track.fen-day-80 { --fen-day-pct: 88.8889%; }
.fen-track.fen-day-81 { --fen-day-pct: 90.0000%; }
.fen-track.fen-day-82 { --fen-day-pct: 91.1111%; }
.fen-track.fen-day-83 { --fen-day-pct: 92.2222%; }
.fen-track.fen-day-84 { --fen-day-pct: 93.3333%; }
.fen-track.fen-day-85 { --fen-day-pct: 94.4444%; }
.fen-track.fen-day-86 { --fen-day-pct: 95.5556%; }
.fen-track.fen-day-87 { --fen-day-pct: 96.6667%; }
.fen-track.fen-day-88 { --fen-day-pct: 97.7778%; }
.fen-track.fen-day-89 { --fen-day-pct: 98.8889%; }
.fen-track.fen-day-90 { --fen-day-pct: 100.0000%; }

.fen-track-rail {
  /* Runde 4: 56px = 40px Hopper-Standardhoehe + 10px Sprungscheitel (§3.3) + 6px Luft, damit
     der Sprung das Ohr nie an der overflow:hidden-Kante beschneidet (siehe .fen-hopper unten). */
  position: relative;
  height: 56px;
  overflow: hidden;
}

.fen-track-rail::before {
  /* Grundlinie (§3.6): 1px divider, volle Breite — unabhaengig vom Tagesstand. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-bottom: 1px solid var(--ds-color-divider);
}

/* Vergangene-Tage-Ticks (§3.6): 1px breit, 6px hoch, jedes fuenfte FELD (nicht mehr fest jeder
   fuenfte Tag) 10px hoch — bei --fen-fields:30 also alle 15 Tage, siehe .fen-track weiter oben
   (Punkt 3). Kuenftige Tage bleiben ohne Ticks ("leerer Weg — das ist die ehrlichste Darstellung
   von noch offen"). Beide repeating-linear-gradient-Layer bleiben auf VOLLER Rail-Breite (100%)
   berechnet, damit die 1/--fen-fields-Periode korrekt bleibt; sichtbar gemacht wird nur der
   verstrichene Anteil per clip-path (nicht per Elementbreite — sonst wuerde sich die Periode mit
   dem Fortschritt mitskalieren und die Ticks liefen zu dicht zusammen). Das Reveal rechnet gegen
   --fen-day-pos (gepolstert, siehe .fen-track oben), nicht mehr gegen das rohe --fen-day-pct. */
.fen-track-rail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background-repeat: repeat-x, repeat-x;
  background-position: bottom left, bottom left;
  background-image:
    repeating-linear-gradient(
      to right,
      var(--ds-color-divider) 0 1px,
      transparent 1px calc(500% / var(--fen-fields, 90))
    ),
    repeating-linear-gradient(
      to right,
      var(--ds-color-divider) 0 1px,
      transparent 1px calc(100% / var(--fen-fields, 90))
    );
  background-size: 100% 10px, 100% 6px;
  clip-path: inset(0 calc(100% - var(--fen-day-pos, 0%)) 0 0);
}

/* Elapsed time as a filled Sand strip along the baseline — a clock, not a
   goal-completion bar (§3.6: this is time passed, not the 300€ target).
   Position is read from --fen-day-pos (the padding-aware remap of --fen-day-pct, see .fen-track
   above), set by the .fen-day-N class on the ancestor .fen-track below — NOT via an inline
   `style` attribute. This site ships a strict CSP (`style-src 'self'`, no 'unsafe-inline'),
   which blocks inline style="" attributes outright; a class-per-day lookup keeps the correct,
   build-time day position fully CSS-driven and no-JS-safe without touching CSP. JS (fennec.js)
   re-selects the class if the client-computed day differs from the server-rendered one; it never
   writes inline style for this value either — same CSP reasoning. The bar's right edge lands
   exactly on the hopper's centre (both read the same --fen-day-pos), so the fox visibly stands
   ON its filled field instead of next to it (B2). */
.fen-track-elapsed {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: var(--fen-day-pos, 0%);
  background: var(--ds-color-accent-primary);
}

.fen-hopper-outer {
  position: absolute;
  left: var(--fen-day-pos, 0%);
  bottom: 0;
  width: 53.3333px;
  margin-left: -26.6667px;
}

/* Toggled via classList during the jump sequence only (fennec.js) — a class,
   not an inline style, so it stays inside style-src 'self' (no
   'unsafe-inline' needed). */
.fen-hopper-outer.is-animating {
  will-change: left;
}

.fen-hopper-inner {
  display: block;
}

/* fennec-hopper.svg v4 (Runde 4, 2026-07-19): querformatige Silhouette, viewBox 64 x 48
   (Verhaeltnis 4:3). Standard-Renderhoehe ist jetzt 40px (bisher 32px); Breite ergibt sich aus
   dem exakten viewBox-Verhaeltnis (40 * 64/48 = 53.3333px) statt eines gerundeten Ganzzahl-Werts,
   damit preserveAspectRatio nie sichtbar letterboxt. Bei 40px Stehhoehe + 10px Sprungscheitel
   (§3.3) + 6px Luft bleibt die Figur innerhalb der jetzt 56px hohen, overflow:hidden
   .fen-track-rail (40+10=50<=56) — das Ohr wird beim Sprung nicht abgeschnitten. */
.fen-hopper {
  display: block;
  width: 53.3333px;
  height: 40px;
}

.fen-track-labels {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--ds-color-fg-muted);
}

.fen-track-labels .fen-track-day {
  color: var(--ds-color-accent-primary);
}

@media (prefers-reduced-motion: reduce) {
  .fen-hopper-outer,
  .fen-hopper-inner {
    transition: none !important;
  }
}

@media (max-width: 400px) {
  /* Mindest-Renderhoehe 32px (bisher 24px), Breite wieder exakt aus dem viewBox-Verhaeltnis
     (32 * 64/48 = 42.6667px). --fen-hopper-pad (27px, s.o.) bleibt unveraendert — es ist bereits
     groesszuegiger als die halbe Breite hier (21.3333px), also weiterhin sicher gegen Beschnitt
     an Tag 1/90. */
  .fen-hopper {
    width: 42.6667px;
    height: 32px;
  }

  .fen-hopper-outer {
    width: 42.6667px;
    margin-left: -21.3333px;
  }
}

/* ---- S2: status register (§2.4) ------------------------------------------ */
.fen-stand {
  margin-top: var(--ds-spacing-2);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ds-color-fg-muted);
}

.fen-register {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--ds-spacing-4);
  border: 1px solid var(--ds-color-divider);
}

.fen-register-cell {
  min-height: 120px;
  padding: var(--ds-spacing-3);
  border-right: 1px solid var(--ds-color-divider);
}

.fen-register-cell:last-child {
  border-right: 0;
}

.fen-register-label {
  margin: 0 0 10px;
}

.fen-register-value {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ds-color-fg-primary);
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 760;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.fen-register-note {
  margin: 8px 0 0;
  color: var(--ds-color-fg-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Ampel: three 12px squares, only the active one filled (R-04) — colour is
   reinforcement, never the sole carrier; the word ("Rot"/"Gelb"/"Grün")
   always ships alongside. */
.fen-state-dots {
  display: inline-flex;
  gap: 6px;
}

.fen-state-dot {
  /* Quadrate, keine Kreise (A1): border-radius bewusst 0, nicht --ds-radius-sm — Kreise sind
     auf dieser Domain den Avataren vorbehalten, das Register-Idiom bleibt streng orthogonal. */
  width: 12px;
  height: 12px;
  border: 1px solid var(--ds-color-divider);
  border-radius: 0;
}

.fen-state-dot.is-active {
  border-color: currentColor;
  background: currentColor;
}

.fen-state-dot[data-variant="stop"].is-active {
  color: var(--fen-state-stop);
}

.fen-state-dot[data-variant="mid"].is-active {
  color: var(--fen-state-mid);
}

.fen-state-dot[data-variant="go"].is-active {
  color: var(--fen-state-go);
}

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

  .fen-register-cell {
    border-right: 0;
    border-bottom: 1px solid var(--ds-color-divider);
  }

  .fen-register-cell:last-child {
    border-bottom: 0;
  }
}

/* ---- S4: the two agents (§2.5) ------------------------------------------- */
.fen-agents {
  margin-top: var(--ds-spacing-4);
  border-top: 1px solid var(--ds-color-divider);
}

.fen-agent-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.28fr) minmax(0, 1fr);
  gap: var(--ds-spacing-3);
  padding: var(--ds-spacing-3) 0;
  border-bottom: 1px solid var(--ds-color-divider);
}

.fen-agent-handle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--ds-color-accent-primary);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
}

.fen-agent-bullet {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  background: var(--ds-color-accent-primary);
}

.fen-agent-body h3 {
  margin: 0 0 8px;
}

.fen-agent-body p {
  margin: 0 0 12px;
  color: var(--ds-color-fg-muted);
  line-height: 1.6;
}

.fen-agent-body ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ds-color-fg-muted);
  line-height: 1.6;
}

.fen-agent-body li {
  margin: 4px 0;
}

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

/* ---- S5: post cards (§2.6) ------------------------------------------------ */
/* Fester Statusslot (Punkt 4, @Brand-Entscheidung): EIN dauerhaft vorhandenes Element fuer
   Loading- und Fehlertext (vormals zwei getrennte, beide per [hidden] komplett aus dem Fluss
   genommene Elemente — dadurch rutschte der Inhalt nach dem Verschwinden von "Aktualisiere …"
   sichtbar hoch). min-height reserviert eine Monospace-Zeile + Abstand permanent, unabhaengig
   vom Inhalt; fennec.js setzt/leert ausschliesslich textContent, nie [hidden]. Im Normalfall ist
   der Slot leer, aber vorhanden — siehe .fen-live-note:empty unten. */
.fen-live-note {
  min-height: 18px;
  margin: 0 0 var(--ds-spacing-2);
  color: var(--ds-color-fg-muted);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 18px;
}

/* Leerzustand (Punkt 6): die 280px-CLS-Reservierung gehoert an den Statusslot oben, nicht an
   die Liste — im Leerzustand (kein Live-Refresh, der eine laengere Liste nachladen koennte)
   waere sie ein sichtbares Loch. :has() ist fuer diesen rein optischen Zweck unkritisch
   (Chrome/Firefox/Safari 2023+); Fallback ohne :has()-Support ist schlicht die alte, etwas
   grosszuegigere Leerraum-Reservierung — keine Bruchstelle. */
.fen-posts {
  min-height: 280px;
  margin: var(--ds-spacing-2) 0 0;
  padding: 0;
  list-style: none;
}

.fen-posts:has(.fen-posts-empty) {
  min-height: 0;
}

.fen-post {
  margin: 0 0 var(--ds-spacing-2);
  padding: var(--ds-spacing-3);
  border: 1px solid var(--ds-color-divider);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-bg-elevated);
}

.fen-post-meta {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--ds-color-fg-muted);
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
}

.fen-post-platform {
  color: var(--ds-color-accent-primary);
}

.fen-post-text {
  max-width: 68ch;
  margin: 0 0 14px;
  color: var(--ds-color-fg-primary);
  font-size: 16px;
  line-height: 1.68;
  white-space: pre-line;
}

.fen-post p:last-child {
  margin-bottom: 0;
}

.fen-posts-empty {
  padding: var(--ds-spacing-3);
  border: 1px solid var(--ds-color-divider);
  border-radius: var(--ds-radius-md);
}

/* Mono-Label (Punkt 6, A2): unterscheidet den Leerzustand vom Fehlerzustand allein durch die
   Form, nicht nur durch den Wortlaut. */
.fen-posts-empty .meta {
  margin: 0;
}

.fen-posts-empty p:not(.meta) {
  margin: 8px 0 0;
  color: var(--ds-color-fg-muted);
}

@media (max-width: 560px) {
  .fen-post-text {
    max-width: none;
  }
}

/* ---- Lesbarkeit der .fen-Prosa (@Brand-Auflage A1, 2026-08-01) ------------
   Das Designsystem hat die Zeilenlaengendisziplin an mehreren Stellen (z. B.
   .pp-entry > p mit 72ch), die .fen-Fliesstexte nahmen als einzige nicht daran
   teil: In der 1160px-Spalte liefen sie auf ~140-150 Zeichen und damit weit
   ueber den Bereich, in dem das Auge die naechste Zeile noch sicher findet.
   Gemessen an einer bestehenden Regel, nicht an einem neuen Geschmack.

   Ausgenommen sind die Elemente, die keine Prosa sind: .fen-channels ist eine
   Flex-Zeile, .fen-stand und .fen-register-* sind kurze Registerzeilen. */
.fen .section-inner > p:not(.fen-channels):not(.fen-stand):not(.fen-live-note) {
  max-width: 72ch;
}

/* ---- Beweisfiguren in der .fen-Prosa (2026-08-01) -------------------------
   Zwei Bausteine fuer die Serien-Landeseiten, beide ohne neue Farbe: Sie
   erben Sand ueber currentColor bzw. den Seitengrund. */

/* Das FENNEC-Zeichen im Fliesstext, in echter Groesse. Grund: Der Satz "das
   Zeichen steht oben in der Navigationsleiste" laeuft mobil ins Leere — dort
   ist die Navigation hinter "Menue" eingeklappt und die Marke unsichtbar
   (Review-BLOCKER 3). Ein Beweiszeiger, der auf etwas Unsichtbares zeigt,
   beweist nichts. Die Geometrie ist dieselbe wie im Header; scripts/check.js
   prueft JEDE Kopie im Dokument gegen die Referenzdatei. */
.fen-mark-proof {
  width: clamp(96px, 22vw, 144px);
  height: auto;
  margin: var(--ds-spacing-3) 0 var(--ds-spacing-2);
  color: var(--fen-sand);
}

/* Standbild aus dem Compositor mit Pruefsumme darunter. Der Bildgrund des
   Renders ist exakt --ds-color-bg-primary (#0e0e0f), deshalb steht die Figur
   nur in einer nicht-erhoehten Sektion nahtlos — in .fen-elevated (#181818)
   waere die Kante sichtbar. */
.fen-figure {
  margin: var(--ds-spacing-4) 0 0;
}

.fen-figure img {
  display: block;
  width: min(720px, 100%);
  height: auto;
}

.fen-figure figcaption {
  margin-top: var(--ds-spacing-2);
  max-width: 72ch;
  color: var(--ds-color-fg-muted);
  font-size: 14px;
  line-height: 1.6;
}

.fen-figure .fen-figure-hash {
  display: block;
  margin-top: 6px;
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}