/* Horella typeface — Figtree (humanist sans, warm, high legibility).
   Self-hosted (not loaded from Google's servers): the LG München I ruling
   (Jan. 2022) treats the visitor-IP transmission to Google on page load as
   a GDPR violation, and it would contradict our own Datenschutzerklärung's
   no-third-party claim. Files cover the "latin" Unicode subset only
   (U+0000-00FF, U+2000-206F, U+20AC, ...) - sufficient for German text
   (äöüßÄÖÜ, €, —, „ "); "latin-ext" (Polish/Czech/Vietnamese diacritics
   etc.) was intentionally dropped, we don't need it.
   Weights 400/500/600/700 all resolve to the same variable-font file per
   style (that's exactly what Google's own served CSS does - verified by
   diffing the four @font-face weight declarations, they share two URLs).
   Tabular numerals are enabled per-use via font-feature-settings "tnum". */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-italic-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===========================================================================
   Horella — Color tokens
   Warm, calm, non-corporate. Status is never carried by color alone — always
   paired with an icon + text. All text pairs verified against WCAG 2.1 AA.
   =========================================================================== */
:root {
  /* --- Base palette --- */
  --color-ink: #1c2b28; /* primary text */
  --color-green: #17796b; /* Horella primary */
  --color-green-dark: #0f5a4f; /* hover / press */
  --color-green-tint: #e4f0ed; /* soft green surface (selection, badges) */
  --color-apricot: #f2a65a; /* accent — warmth, highlights, illustration */
  --color-apricot-dark: #d98736; /* accent hover / on-light text-safe-ish */
  --color-apricot-tint: #fcebd6; /* soft accent surface */
  --color-cream: #fbf7f0; /* app background */
  --color-white: #ffffff; /* cards */
  --color-muted: #6b7a77; /* secondary text — 4.6:1 on white */
  --color-border: #e6e1d6; /* hairline borders / dividers */
  --color-border-strong: #d3ccbc; /* stronger divider, input outline */

  /* Status — base */
  --color-success: #2e9e6b;
  --color-success-dark: #1f7a50;
  --color-success-tint: #e1f2e9;
  --color-warning: #e0a11b; /* non-blocking labor-law warning */
  --color-warning-dark: #9a6b08; /* text-safe amber on light */
  --color-warning-tint: #fbefcf;
  --color-danger: #d2553f; /* blocking violation */
  --color-danger-dark: #a93b29;
  --color-danger-tint: #f7e0da;

  /* --- Semantic aliases --- */
  --text-strong: var(--color-ink);
  --text-body: var(--color-ink);
  --text-muted: var(--color-muted);
  --text-on-green: var(--color-white);
  --text-link: var(--color-green);
  --text-link-hover: var(--color-green-dark);

  --surface-app: var(--color-cream);
  --surface-card: var(--color-white);
  --surface-sunken: #f4eee3; /* slightly darker than cream */
  --surface-selected: var(--color-green-tint);

  --border-subtle: var(--color-border);
  --border-default: var(--color-border-strong);
  --border-focus: var(--color-green);

  --action-primary: var(--color-green);
  --action-primary-hover: var(--color-green-dark);
  --action-accent: var(--color-apricot);

  /* Status semantic — use with icon + text, never alone */
  --status-success-fg: var(--color-success-dark);
  --status-success-bg: var(--color-success-tint);
  --status-warning-fg: var(--color-warning-dark);
  --status-warning-bg: var(--color-warning-tint);
  --status-danger-fg: var(--color-danger-dark);
  --status-danger-bg: var(--color-danger-tint);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(23, 121, 107, 0.35);
}
/* ===========================================================================
   Horella — Typography tokens
   Base 17px, line-height 1.5. Scale: 28 / 22 / 18 / 17 / 15 / 13.
   Tabular numerals everywhere times & hours appear.
   =========================================================================== */
:root {
  --font-sans:
    "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale (px) */
  --text-2xl: 28px; /* page / screen titles */
  --text-xl: 22px; /* section headers */
  --text-lg: 18px; /* card titles, emphasised body */
  --text-base: 17px; /* body — deliberately large */
  --text-sm: 15px; /* secondary text, dense tables */
  --text-xs: 13px; /* labels, meta, captions */

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-body: 1.5;

  /* Weights — never below 400 */
  --weight-regular: 400;
  --weight-medium: 500; /* labels, buttons */
  --weight-semibold: 600; /* titles, emphasis */
  --weight-bold: 700;

  /* Letter spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-label: 0.02em; /* small all-caps labels */

  /* Numeric feature: apply to any time/hour/money value */
  --numeric-tabular: "tnum" 1, "lnum" 1; /* @kind other */
}

/* Utility: tabular numerals for schedules, timesheets, balances */
.tabular-nums {
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-variant-numeric: tabular-nums;
}
/* ===========================================================================
   Horella — Spacing tokens (4px base grid, generous by design)
   =========================================================================== */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Touch target minimum (iOS + accessible web) */
  --touch-min: 44px;

  /* Common container widths */
  --width-content: 720px; /* forms, wizards */
  --width-shell: 1280px; /* full planner */
}
/* ===========================================================================
   Horella — Radius tokens (soft, friendly — never sharp, never pill-everything)
   =========================================================================== */
:root {
  --radius-xs: 4px; /* chips, small badges */
  --radius-sm: 8px; /* inputs, buttons */
  --radius-md: 12px; /* cards, shift cards */
  --radius-lg: 16px; /* modals, side panels */
  --radius-xl: 24px; /* large illustration surfaces */
  --radius-full: 999px; /* avatars, toggles, pill tags */
}
/* ===========================================================================
   Horella — Elevation & shadow tokens
   Soft, warm-tinted shadows (never hard black). Low elevation everywhere;
   the UI is calm and flat-ish, lifting only interactive/floating surfaces.
   =========================================================================== */
:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(28, 43, 40, 0.06);
  --shadow-sm:
    0 1px 3px rgba(28, 43, 40, 0.08), 0 1px 2px rgba(28, 43, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 43, 40, 0.1);
  --shadow-lg: 0 12px 28px rgba(28, 43, 40, 0.14);
  --shadow-drag: 0 16px 32px rgba(28, 43, 40, 0.22); /* shift card while dragging */

  /* z-layers */
  --z-base: 0; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-dropdown: 200; /* @kind other */
  --z-panel: 300; /* @kind other */ /* side panel */
  --z-modal: 400; /* @kind other */
  --z-toast: 500; /* @kind other */
}
/* ===========================================================================
   Horella — Motion tokens
   Calm and quick. Ease-out for enters, gentle standard for moves. No bounce.
   =========================================================================== */
:root {
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 180ms; /* @kind other */
  --duration-slow: 260ms; /* @kind other */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms; /* @kind other */
    --duration-base: 0ms; /* @kind other */
    --duration-slow: 0ms; /* @kind other */
  }
}
/* ===========================================================================
   Horella — base element defaults. Sets the warm cream canvas and body type.
   =========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* V5-BUILD, 15.08.2026: the Hero-Störer (see .stoerer below) deliberately
   breaks out past the product screenshot's right edge, by design (CD
   mock). At mid-range desktop widths (.wrap is 100% wide below its 1280px
   cap, e.g. ~860-1100px) that breakout pokes past the viewport edge and
   would otherwise create a page-wide horizontal scrollbar. overflow-x
   must be set on both html and body — the root element (html) is what
   document.documentElement.scrollWidth / the browser's own scrollbar
   measure, so body-only clipping isn't enough. This clips only the
   x-axis, only past the viewport edge — it does not affect vertical
   scrolling or normal in-flow content anywhere on the site. */
html {
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
p {
  margin: 0;
}

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

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

/* Component animations */
@keyframes horella-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes horella-pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes horella-slide-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* Horella marketing site — built directly on the app's design tokens
   (see assets/tokens/). No framework, no build step. */

:root {
  /* --color-muted (#6b7a77) measures 4.2:1 on cream / 4.49:1 on white — just
     under WCAG AA's 4.5:1 for body text despite the token's own "4.6:1 on
     white" comment. Darkened locally for the marketing site only; the app
     token itself is out of scope here (flagged for the design system). */
  --text-muted: #5f6e6b;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-strong);
}
.wordmark .dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-green);
  position: relative;
  flex: none;
}
.wordmark .dot::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 9px;
  background: #fff;
  border-radius: 2px;
  top: 5px;
  left: 12px;
  transform-origin: bottom center;
  transform: rotate(38deg);
}
.wordmark .dot::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 6px;
  background: #fff;
  border-radius: 2px;
  top: 8px;
  left: 12px;
  transform-origin: bottom center;
  transform: rotate(-70deg);
}
.wordmark .name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.wrap {
  width: 100%;
  max-width: var(--width-shell);
  margin: 0 auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(251, 247, 240, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-6);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-1);
  margin: 0 calc(var(--space-1) * -1);
  color: var(--text-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
}
.nav a:not(.btn):hover {
  color: var(--text-link);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-6);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover {
  text-decoration: none;
}
.btn-primary {
  background: var(--action-primary);
  color: var(--text-on-green);
}
.btn-primary:hover {
  background: var(--action-primary-hover);
  color: var(--text-on-green);
}
.btn-ghost {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-strong);
}
.btn-ghost:hover {
  border-color: var(--color-green);
  color: var(--text-link);
}

/* --- Hero --- */
.hero {
  padding: var(--space-20) 0 var(--space-16);
  text-align: center;
}
.hero h1 {
  font-size: 44px;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 820px;
  margin: 0 auto var(--space-5);
}
.hero .lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto var(--space-8);
}
.hero .cta-row {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.hero .cta-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  background: var(--surface-card);
}
.hero-shot {
  margin-top: var(--space-12);
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Sections --- */
.section {
  padding: var(--space-16) 0;
}
.section-alt {
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
/* Same reasoning, applied to the gap before the FAQ: the shared .section's
   own bottom padding (64px) plus .section-head's own margin-bottom (48px)
   stacked with .faq's top padding (72px) left ~184px of dead air where the
   mock has 72px. Scoped to the one .section that precedes .faq (only
   /preise/ has that section). */
.section:has(+ .faq) {
  padding-bottom: 0;
}
.section:has(+ .faq) .section-head:last-child {
  margin-bottom: 0;
}
.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-12);
}
.section-head h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}
.section-head p {
  color: var(--text-muted);
  font-size: var(--text-lg);
}
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-green-dark);
  background: var(--color-green-tint);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

/* --- Vignette (Für wen ist Horella?) --- */
.vignette-card {
  max-width: var(--width-content);
  margin: 0 auto;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.vignette-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.vignette-card p {
  color: var(--text-body);
  font-size: var(--text-lg);
}
.vignette-more {
  max-width: var(--width-content);
  margin: var(--space-6) auto 0;
  text-align: center;
  color: var(--text-muted);
}

/* --- V2-BUILD Delta 4: industry tile grid (icon + name, no links) --- */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.industry-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-2);
  color: var(--text-body);
}
.industry-tile svg {
  color: var(--color-green-dark);
}
.industry-tile span {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
@media (max-width: 860px) {
  .industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Differentiator grid --- */
.diffs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}
/* V2-BUILD Delta 2: "Warum Horella" grows from 4 to 6 cards — explicit
   3x2 desktop / 2-col tablet layout instead of .diffs's own auto-fit
   (which would give 4 across at 1280px, not the ordered 3x2). Scoped to
   this one grid via the extra class; .diffs's other call sites (3-card
   "Damit die Zahlen stimmen") keep auto-fit untouched. */
.diffs.diffs--why {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1180px) {
  /* Tablet, incl. the round's own 1024px proof width. */
  .diffs.diffs--why {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .diffs.diffs--why {
    grid-template-columns: 1fr;
  }
}
.diff-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}
.diff-card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-apricot-tint);
  color: var(--color-apricot-dark);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}
.diff-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.diff-card p {
  color: var(--text-muted);
}

/* --- Feature row (screenshot + text alternating) --- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-16) 0;
}
.feature-row.reverse .feature-copy {
  order: 2;
}
.feature-copy h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}
.feature-copy p {
  color: var(--text-muted);
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}
.feature-copy ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.feature-copy li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-body);
}
.feature-copy li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--color-green);
  flex: none;
}

/* --- CTA band --- */
.cta-band {
  background: var(--color-ink);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-16) 0;
}
.cta-band h2 {
  color: var(--color-white);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}
.cta-band p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-8);
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-12) 0;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-1);
  margin: 0 calc(var(--space-1) * -1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.footer-meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-6);
}

/* --- Pricing (rebuilt 2026-08-10, PREISSEITE-BUILD, CD-approved mock) ---
   Single free-badge card replaces the old two-card layout. Metrics below
   are the mock's own authored values (this is a new, page-specific
   component, not on the shared spacing scale) — DS tokens are used
   everywhere a token already carries that exact value. */
.card-zone {
  display: flex;
  justify-content: center;
  padding: 48px var(--space-6) 0;
}
.price-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 44px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.price-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-green), var(--color-apricot));
}

/* --- V3-BUILD: two full price cards side by side, each carrying its own
   feature list (reuses .price-card unchanged — same width/border/padding
   as the old single-card build, neither is a lighter variant). Footnote
   + CTA sit once, under the pair. Stacked (free card first, source
   order) below the existing 640px breakpoint, side by side from it up —
   each card is now tall enough (own checks list) that the old
   side-by-side-at-390px squeeze from V2-BUILD no longer fits. */
.price-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 880px;
  margin: 0 auto;
}
.price-cards .price-card {
  max-width: none;
  margin: 0;
}
@media (min-width: 640px) {
  .price-cards {
    grid-template-columns: 1fr 1fr;
  }
}
.price-footnote {
  text-align: center;
  margin-top: var(--space-4);
}
.free-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-selected);
  color: var(--color-green-dark);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  padding: 9px 18px;
}
.free-badge svg {
  flex: none;
}
.price-line {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}
.price-line .num {
  font-size: 68px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-feature-settings: var(--numeric-tabular);
}
.price-line .unit {
  font-size: var(--text-base);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}
.price-sub {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.anchor {
  margin-top: var(--space-1);
  font-size: 15px;
  color: var(--text-muted);
}
.anchor strong {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  font-feature-settings: var(--numeric-tabular);
}
.checks {
  margin: var(--space-6) auto 0;
  max-width: 420px;
  text-align: left;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 2px;
}
.checks li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-2) 0;
  font-size: var(--text-base);
  line-height: 1.45;
}
.checks li svg {
  flex: none;
  margin-top: 2px;
}
.checks li:first-child {
  font-weight: var(--weight-semibold);
}
.card-cta {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}
.card-cta .btn {
  min-height: 52px;
  padding: 14px 40px;
  font-size: var(--text-base);
}
.micro {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* --- FAQ (new, 2026-08-10 PREISSEITE-BUILD) --- */
.faq {
  max-width: 680px;
  margin: 0 auto;
  padding: 72px var(--space-6) 88px;
}
.faq h2 {
  font-size: var(--text-2xl);
  text-align: center;
  letter-spacing: var(--tracking-tight);
}
.faq-list {
  margin-top: var(--space-6);
  display: grid;
  gap: 14px;
}
.faq-item {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}
.faq-item h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.faq-item p {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .card-zone {
    padding-top: var(--space-8);
  }
  .price-card {
    padding: var(--space-8) var(--space-5) 26px;
  }
  .price-line {
    gap: var(--space-2);
  }
  .price-line .num {
    font-size: 52px;
  }
  .card-cta .btn {
    width: 100%;
  }
  .faq {
    padding: var(--space-16) var(--space-6) var(--space-16);
  }
}

/* --- Legal / prose pages --- */
.legal-page {
  padding: var(--space-16) 0 var(--space-20);
}
.legal-page .wrap {
  max-width: var(--width-content);
}
.legal-page h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}
.legal-page .stand {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-10);
}
.prose h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}
.prose h2:first-child {
  margin-top: 0;
}
.prose p {
  margin-bottom: var(--space-4);
  color: var(--text-body);
}
.prose strong {
  font-weight: var(--weight-semibold);
}
.prose a {
  text-decoration: underline;
}

/* --- 404 --- */
.notfound {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
}
.notfound h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}
.notfound p {
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

@media (max-width: 860px) {
  .diffs {
    grid-template-columns: 1fr;
  }
  .feature-row,
  .feature-row.reverse .feature-copy {
    grid-template-columns: 1fr;
    order: initial;
  }
  .feature-row {
    display: block;
  }
  .feature-row .feature-copy {
    margin-bottom: var(--space-6);
  }
  .hero h1 {
    font-size: 32px;
  }
  .nav a:not(.btn) {
    display: none;
  }
}

/* ==========================================================================
   CD import (V5-BUILD, 15.08.2026) — Hero-Störer, verbatim from
   design/ui_kits/web/2026-08-15_Hero_Stoerer.html. Values are the CD file's
   own numbers (position, rotation, radii, shadow, colours) — not re-derived.
   `--shadow-sticker` does not resolve in this site's tokens, so the literal
   value the CD file itself renders with is used instead (see report).
   The `.on-shot-m` variant is scoped under the site's existing mobile-hero
   breakpoint (860px, see `.hero h1` above) — the CD file ships this as a
   second static 375px frame, not as a live media query, so the breakpoint
   itself is this build's addition, not a CD value.
   ========================================================================== */
.shot-wrap {
  position: relative;
  isolation: isolate;
}
.stoerer {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--color-apricot);
  color: var(--color-ink);
  padding: 22px 26px;
  border-radius: 26px;
  box-shadow: 0 10px 22px rgba(28, 43, 40, 0.2);
  border: 2px solid #fff;
  transform: rotate(-9deg);
  transform-origin: center;
}
.stoerer::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px dashed rgba(28, 43, 40, 0.32);
  border-radius: 19px;
  pointer-events: none;
}
.stoerer b {
  display: block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.12;
  max-width: 8.6em;
}
.stoerer i {
  display: block;
  font-style: normal;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 5px;
  color: #3a2a12;
}
.stoerer.on-shot-d {
  top: -48px;
  right: -40px;
}
@media (max-width: 860px) {
  .stoerer.on-shot-m {
    top: -36px;
    right: -6px;
    padding: 15px 17px;
    border-radius: 19px;
  }
  .stoerer.on-shot-m::before {
    inset: 4px;
    border-radius: 14px;
  }
  .stoerer.on-shot-m b {
    font-size: 15.5px;
    max-width: 8.4em;
  }
  .stoerer.on-shot-m i {
    font-size: 12px;
    margin-top: 3px;
  }
}

/* ==========================================================================
   CD import (V5-BUILD, 15.08.2026) — pricing page restyle, verbatim from
   design/ui_kits/web/2026-08-15_Preisseite.html. Scoped under body.page-preise
   because the CD file reuses selectors the home page already defines with
   different values (.hero, .checks, .micro, .faq/.faq-list/.faq-item) — see
   §4 of the round prompt. `.btn`/`.btn-lg` are scoped to `.cta-zone`/`.dark`
   specifically, not to `.page-preise` alone, because the shared header/footer
   (unmodified, same markup as every other v5 page) also sit inside
   body.page-preise and use `.btn.btn-primary` — a blanket `.page-preise .btn`
   override would have restyled the header's CTA too.
   Tokens that do not resolve in this site's own token files
   (`--text-muted-on-cream`, `--text-muted-on-inverse`, `--surface-inverse`)
   are replaced with the literal values the CD file itself renders with — see
   report. All other custom properties below resolve to the same value in
   www/assets/tokens/*.css already, unchanged.
   ========================================================================== */
.page-preise .hero {
  text-align: center;
  padding: 64px 24px 0;
}
.page-preise .hero h1 {
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
  /* max-width/margin reset: the shared .hero h1 rule (820px / 0 auto 20px)
     would otherwise leak through on properties the CD file doesn't set —
     CD's own reset zeroes these, so 0/none is the CD-rendered value here too. */
  max-width: none;
  margin: 0;
}
.page-preise .hero .lede {
  margin-top: 14px;
  color: #5d6b67; /* --text-muted-on-cream, CD token — does not resolve here */
  font-size: 19.5px;
  text-wrap: pretty;
  /* max-width/margin-x reset: same leak as above, from the shared .hero .lede
     rule (620px / auto centering + 32px bottom margin). */
  max-width: none;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}
.page-preise .cta-zone .btn,
.page-preise .dark .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--color-green);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 12px 26px;
  font-weight: 600;
  font-size: 16px;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.page-preise .cta-zone .btn:hover,
.page-preise .dark .btn:hover {
  background: var(--color-green-dark);
  color: #fff;
}
.page-preise .cta-zone .btn.btn-lg,
.page-preise .dark .btn.btn-lg {
  min-height: 56px;
  padding: 16px 34px;
  font-size: 17.5px;
}
.page-preise .cards {
  max-width: 920px;
  margin: 0 auto;
  padding: 52px 24px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.page-preise .card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 36px 34px 34px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.page-preise .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-green);
}
.page-preise .card.paid {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}
.page-preise .card.paid::before {
  background: linear-gradient(90deg, var(--color-green), var(--color-apricot));
}
.page-preise .card-head {
  min-height: 132px;
}
.page-preise .price {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.page-preise .price-unit {
  margin-top: 8px;
  font-size: 16.5px;
  color: #5d6b67; /* --text-muted-on-cream, CD token — does not resolve here */
  font-weight: 500;
}
.page-preise .price-scope {
  margin-top: 4px;
  font-size: 16.5px;
  color: var(--color-muted);
}
.page-preise .rule {
  height: 1px;
  background: var(--color-border);
  margin: 0 0 22px;
}
.page-preise .checks {
  list-style: none;
  display: grid;
  gap: 14px;
  /* margin/max-width reset: the shared .checks rule (24px auto 0 / 420px)
     would otherwise leak through — CD's own reset zeroes these. */
  margin: 0;
  max-width: none;
}
.page-preise .checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.45;
  text-wrap: pretty;
  /* padding reset: the shared .checks li rule (8px 0) would otherwise leak
     through on top of the 14px grid gap above. */
  padding: 0;
}
.page-preise .checks li svg {
  flex: none;
  margin-top: 3px;
}
.page-preise .checks li:first-child {
  font-weight: 600;
}
.page-preise .footnote {
  text-align: center;
  font-size: 14.5px;
  color: var(--color-muted);
  padding: 20px 24px 0;
}
.page-preise .cta-zone {
  text-align: center;
  padding: 34px 24px 0;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.page-preise .micro {
  font-size: 14.5px;
  color: var(--color-muted);
}
.page-preise .faq {
  max-width: 760px;
  margin: 0 auto;
  padding: 88px 24px 96px;
}
.page-preise .faq h2 {
  font-size: 32px;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.page-preise .faq-list {
  margin-top: 28px;
  display: grid;
  gap: 14px;
}
.page-preise .faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.page-preise .faq-item h3 {
  font-size: 17px;
  font-weight: 600;
}
.page-preise .faq-item p {
  margin-top: 7px;
  color: #5d6b67; /* --text-muted-on-cream, CD token — does not resolve here */
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}
.page-preise .faq-item p .tnum {
  font-feature-settings: "tnum" 1;
}
.page-preise .dark {
  background: #14332c; /* --surface-inverse, CD token — does not resolve here */
  color: #fff;
  text-align: center;
  padding: 80px 24px;
}
.page-preise .dark h2 {
  /* color reset: the shared h1,h2,h3,h4 rule sets color: var(--text-strong)
     (dark ink) directly on h2, which beats inherited color even though
     .dark itself sets color:#fff — CD's dark band needs the heading white. */
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.page-preise .dark p {
  margin-top: 10px;
  color: #c9d6d1; /* --text-muted-on-inverse, CD token — does not resolve here */
  font-size: 17px;
}
.page-preise .dark .btn {
  margin-top: 28px;
}
.page-preise .dark .btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}
@media (max-width: 820px) {
  .page-preise .hero {
    padding-top: 40px;
  }
  .page-preise .hero h1 {
    font-size: 36px;
  }
  .page-preise .hero .lede {
    font-size: 17px;
  }
  .page-preise .cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-top: 32px;
    max-width: 520px;
  }
  .page-preise .card {
    padding: 28px 22px 26px;
  }
  .page-preise .card-head {
    min-height: 0;
  }
  .page-preise .price {
    font-size: 42px;
  }
  .page-preise .rule {
    margin-top: 22px;
  }
  .page-preise .cta-zone .btn {
    width: 100%;
  }
  .page-preise .faq {
    padding: 64px 24px 72px;
  }
  .page-preise .faq h2 {
    font-size: 26px;
  }
  .page-preise .dark {
    padding: 60px 24px;
  }
  .page-preise .dark h2 {
    font-size: 27px;
  }
  .page-preise .dark .btn {
    width: 100%;
  }
}

/* ==========================================================================
   CD import (V6-HERO, 15.08.2026) — two-column home hero, verbatim from
   design/ui_kits/web/2026-08-15_Hero_Stoerer.html (.hero-d l.138–162,
   .hero-m l.173–193). Scoped under body.page-home; the shared .hero,
   .hero h1, .hero .lede, .hero .cta-row, .hero .cta-note, .shot, .hero-shot
   rules above (l.443–485) are left untouched — the pricing page and the
   feature-row images further down this page still use them. Every property
   those rules set that CD does not is explicitly reset below to the value
   CD's own file renders with (§5.4 of the round prompt).
   The mock illustration (browser bar + day grid) reuses class names that
   already mean something else on this page (.shot, .dot, .pill, .grid,
   .col, .day, .sh — see §4) and is renamed with an hs- prefix; .a/.g/.ghost
   modifiers do not collide and keep their CD names. .shot-wrap/.stoerer/
   .on-shot-d/.on-shot-m are the existing v5 elements and are not touched.
   .hs-d-only/.hs-m-only are new helper classes (not from CD) used to switch
   the CD strings that differ between the 1440 and 375 static frames at the
   860px breakpoint (§5.3) — both variants exist in the markup at all times,
   only visibility toggles.
   Token substitutions, where a CD var(--…) does not resolve here, or
   resolves to a different value than the CD file's own :root declares:
   --text-muted-on-cream (not defined here) → literal #5d6b67
   --color-apricot-deep (not defined here; this site's --color-apricot-dark
     is a different colour, #d98736) → literal #de8b33, the CD file's own value
   --color-apricot-tint (defined here, but at #fcebd6 — the CD file's own
     :root declares #fdefdd) → literal #fdefdd, the CD file's own value
   All other custom properties below resolve to the same value in
   www/assets/tokens/*.css already, unchanged.
   ========================================================================== */
body.page-home .hero {
  text-align: left;
  padding: 0;
}
body.page-home .hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 64px;
  align-items: center;
  padding: 76px 56px 88px;
  /* V6-FIX, 15.08.2026 (§3): CD's own hero width (1440px frame, 56px side
     padding = 1328px content) instead of the site-wide --width-shell
     (1280px) — home hero only. padding-left/right are already 56px via the
     shorthand above; the mobile override below (20px) is likewise already
     covered by its own padding shorthand. */
  max-width: 1440px;
}
body.page-home .hero h1 {
  margin-top: 20px;
  max-width: none;
  font-size: 60px;
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
}
body.page-home .hero .lede {
  margin-top: 18px;
  margin-bottom: 0;
  max-width: 30em;
  font-size: 20px;
  line-height: 1.55;
  color: #5d6b67; /* --text-muted-on-cream, CD token — does not resolve here */
  text-wrap: pretty;
}
body.page-home .hero .cta-row {
  margin-top: 32px;
  justify-content: flex-start;
  gap: 12px;
}
body.page-home .hero .cta-note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--color-muted);
}

.hs-shot {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hs-shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: #f7f3ec;
}
.hs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border-strong);
}
.hs-shot-bar span {
  margin-left: 8px;
  font-size: 13px;
  color: var(--color-muted);
  font-weight: 500;
}
.hs-shot-body {
  padding: 16px;
}
.hs-shot-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.hs-shot-head b {
  font-size: 16px;
  font-weight: 700;
}
.hs-pill {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-green-dark);
  background: var(--color-green-tint);
  border-radius: var(--radius-full);
  padding: 5px 11px;
}
.hs-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.hs-col {
  display: grid;
  gap: 8px;
  align-content: start;
}
.hs-day {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  text-align: center;
  padding-bottom: 2px;
}
.hs-sh {
  border-radius: var(--radius-sm);
  padding: 8px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  border-left: 3px solid var(--color-green);
  background: var(--color-green-tint);
  color: var(--color-green-dark);
}
.hs-sh em {
  display: block;
  font-style: normal;
  font-weight: 500;
  color: #5d6b67; /* --text-muted-on-cream, CD token — does not resolve here */
  font-size: 11.5px;
  margin-top: 2px;
}
.hs-sh.a {
  border-left-color: #de8b33; /* --color-apricot-deep, CD's own value — see note above */
  background: #fdefdd; /* --color-apricot-tint, CD's own value — see note above */
  color: #7a4a10;
}
.hs-sh.a em {
  color: #8a5c24;
}
.hs-sh.g {
  background: #f1efe9;
  border-left-color: var(--color-border-strong);
  color: #5d6b67; /* --text-muted-on-cream, CD token — does not resolve here */
}
.hs-sh.ghost {
  background: repeating-linear-gradient(135deg, #f4f1ea, #f4f1ea 6px, #ede9e0 6px, #ede9e0 12px);
  border-left-color: var(--color-border-strong);
  color: var(--color-muted);
  font-weight: 500;
}

.hs-m-only {
  display: none;
}

@media (max-width: 860px) {
  body.page-home .hero .wrap {
    display: block;
    padding: 28px 20px 40px;
  }
  body.page-home .hero h1 {
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  body.page-home .hero .lede {
    margin-top: 12px;
    font-size: 16.5px;
    max-width: none;
  }
  body.page-home .hero .cta-row {
    margin-top: 22px;
    display: grid;
    gap: 10px;
  }
  body.page-home .hero .cta-row .btn {
    width: 100%;
  }
  body.page-home .shot-wrap {
    margin-top: 46px;
  }
  .hs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hs-d-only {
    display: none;
  }
  .hs-m-only {
    display: block;
  }
}

/* ==========================================================================
   V6-HERO, 15.08.2026 — minimal mobile menu, all eight pages. Below 860px
   the shared `.nav a:not(.btn) { display: none }` rule above hides Preise/
   Anmelden entirely; this restores them in a slide-down panel. No CD source
   — Detlef specified the values directly in the round prompt (§5.5). Uses
   only tokens already defined above; no new colours or radii.
   ========================================================================== */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  min-height: 44px;
  min-width: 44px;
  place-items: center;
  cursor: pointer;
}
.site-header {
  position: relative;
}
.mobile-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-cream);
  border-bottom: 1px solid var(--border-subtle);
  padding: 8px 0;
}
.mobile-nav a {
  display: block;
  min-height: 48px;
  padding: 12px var(--space-6);
  font-size: 17px;
  color: var(--color-ink);
}
.mobile-nav a:not(:first-child) {
  border-top: 1px solid var(--border-subtle);
}
@media (max-width: 860px) {
  .nav-toggle {
    display: grid;
  }
  .mobile-nav:not([hidden]) {
    display: block;
  }
  .site-header .nav .btn {
    display: none;
  }
}
.mobile-nav[hidden] {
  display: none;
}

/* V6-FIX, 15.08.2026 — CD mobile header variant: below 860px the header CTA
   (hidden above via .site-header .nav .btn) moves into the panel as its
   third entry (§2). Keeps normal .btn.btn-primary appearance; the plain
   links' hairline border-top must not apply to it. */
.mobile-nav .mobile-nav-cta {
  display: flex;
  margin: 8px var(--space-6) 12px;
  width: calc(100% - 2 * var(--space-6));
  border-top: 0;
}