/* ============================================================================
   felixihno.com 2027 · site.css · the one stylesheet for every page
   Skin: Regie (warm graphite, hue 80; values from angebot/regie/tokens.css 1.1.0).
   Reference look: heroes/check/HG.html + HGPhone.html (night hero with dot portrait,
   light proof section with the CSS-only demo).

   Rules this file keeps
     · every colour is a token in :root; nothing below it writes a hex value
     · vermilion (--c-verdict) means one thing: the decision. Logo dot (and its echo,
       the H1 full stop), the demo's decision line, the client's decision steps and their
       legend. Nothing else is red; a recommendation is marked with ink weight, not colour.
     · one family in two cuts (Funnel Sans for text, Funnel Display for headings; Felix 15.10.,
       from _neu/w3-durchsicht), IBM Plex Mono only for data, eyebrows and the glyph field
     · mobile first (390 px is the base), fluid type with clamp() between 390 and 1280 px
     · motion: 150–250 ms, --ease; transform and opacity only; all off under reduced motion
     · no JavaScript anywhere: the demo replays through two radio inputs, FAQ is <details>

   Contents
     01 tokens            02 fonts              03 base + type
     04 layout            05 nav                06 buttons + links
     07 section + head    08 hero (night)       09 demo
     10 list              11 showcase card      12 steps
     13 prices            14 report figure      15 FAQ
     16 door              17 footer             18 utilities, motion, print
     19 feld (js/feld.js: the glyph field behind a band)
   ========================================================================== */


/* ── 01 tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* primitives · light */
  --page: #FBFAF9;
  --canvas: #F3F2F0;
  --surface: #FEFEFD;
  --inset: #F8F7F5;
  --hover: #F4F2EF;
  --ink: #201E1B;
  --ink-2: #63605B;
  --ink-3: #706D69;
  --line: #E8E7E4;
  --line-strong: #DDDAD6;
  --vermilion: #D6361B;

  /* primitives · night */
  --n-page: #181715;
  --n-canvas: #1D1C1A;
  --n-surface: #252321;
  --n-hover: #2D2B28;
  --n-ink: #F3F2F0;
  --n-ink-2: #ADAAA6;
  --n-ink-3: #96938D;
  --n-line: #33312E;
  --n-line-strong: #403E3A;
  --n-vermilion: #F1502F;

  /* translucent ink for hairlines and shadows (the only rgba values) */
  --ink-a04: rgba(32, 30, 27, .04);
  --ink-a06: rgba(32, 30, 27, .06);
  --ink-a10: rgba(32, 30, 27, .10);
  --ink-a25: rgba(32, 30, 27, .25);
  --paper-a08: rgba(243, 242, 240, .08);
  --paper-a14: rgba(243, 242, 240, .14);
  --black-a40: rgba(0, 0, 0, .40);

  /* semantic · light (components use only these) */
  --c-bg: var(--canvas);
  --c-surface: var(--surface);
  --c-inset: var(--inset);
  --c-hover: var(--hover);
  --c-text: var(--ink);
  --c-text-2: var(--ink-2);
  --c-text-3: var(--ink-3);
  --c-line: var(--line);
  --c-line-strong: var(--line-strong);
  --c-hairline: var(--ink-a10);            /* 1 px translucent rule: sits on any light ground */
  --c-verdict: var(--vermilion);
  --c-btn-bg: var(--ink);                  /* primary button: dark on light */
  --c-btn-text: var(--page);
  --c-stripe: var(--ink-a06);

  /* type · fluid between 390 and 1280 px viewport */
  --font-sans: 'Funnel Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Funnel Display', 'Funnel Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-display: clamp(2.75rem, 1.983rem + 3.146vw, 4.5rem);      /* 44 → 72  hero H1 */
  --fs-h2: clamp(1.875rem, 1.49rem + 1.57vw, 2.75rem);            /* 30 → 44  section H2 (H1 : H2 = 1.64) */
  --fs-h3: clamp(1.3125rem, 1.230rem + .337vw, 1.5rem);           /* 21 → 24 */
  --fs-lede: clamp(1.0625rem, 1.008rem + .225vw, 1.1875rem);      /* 17 → 19 */
  --fs-read: 1.0625rem;                                           /* 17 body */
  --fs-ui: .9375rem;                                              /* 15 controls, table cells */
  --fs-sm: .875rem;                                               /* 14 meta */
  --fs-mono: .8125rem;                                            /* 13 eyebrow, data */
  --lh-display: 1.0;
  --lh-head: 1.06;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --track-display: -.035em;
  --track-head: -.03em;
  --track-tight: -.015em;
  --w-reg: 400; --w-med: 500; --w-semi: 600;
  --measure: 38em;

  /* space · 4 px grid */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
  --s-7: 1.75rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-14: 3.5rem; --s-16: 4rem;
  --s-20: 5rem; --s-24: 6rem;
  --gutter: clamp(1.25rem, -.174rem + 5.843vw, 4.5rem);           /* 20 → 72 */
  --section-y: clamp(3.5rem, 2.404rem + 4.494vw, 6rem);            /* 56 → 96 */
  --max: 75rem;                                                     /* 1200 */

  /* shape + depth */
  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 20px;
  --ring: 0 0 0 1px var(--c-line);
  --shadow-card: 0 0 0 1px var(--c-line), 0 1px 2px var(--ink-a04);
  --shadow-lift: 0 0 0 1px var(--c-line), 0 24px 48px -28px var(--ink-a25);

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;

  color-scheme: light;
}

/* night scope: one class remaps the semantic tokens, every component follows */
.night {
  --c-bg: var(--n-page);
  --c-surface: var(--n-surface);
  --c-inset: var(--n-canvas);
  --c-hover: var(--n-hover);
  --c-text: var(--n-ink);
  --c-text-2: var(--n-ink-2);
  --c-text-3: var(--n-ink-2);              /* night eyebrow uses ink-2 (contrast ≥ 4.5:1) */
  --c-line: var(--n-line);
  --c-line-strong: var(--n-line-strong);
  --c-hairline: var(--paper-a14);
  --c-verdict: var(--n-vermilion);
  --c-btn-bg: var(--n-ink);                /* primary button: light on night */
  --c-btn-text: var(--n-page);
  --c-stripe: var(--paper-a08);
  --ring: 0 0 0 1px var(--n-line);
  --shadow-card: 0 0 0 1px var(--paper-a08), 0 1px 2px var(--black-a40);
  --shadow-lift: 0 0 0 1px var(--paper-a14), 0 24px 48px -28px var(--black-a40);
  color-scheme: dark;
  background: var(--c-bg);
  color: var(--c-text);
}


/* ── 02 fonts (self-hosted, OFL) ───────────────────────────────────────────── */
@font-face {
  font-family: 'Funnel Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/FunnelSans-latin-wght.woff2?v=c7de8cbc') format('woff2');
}
@font-face {
  font-family: 'Funnel Display'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/FunnelDisplay-latin-wght.woff2?v=fdffe092') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2?v=79936b18') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2?v=b1c8a895') format('woff2');
}


/* ── 03 base + type ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: var(--s-6);
}
body {
  margin: 0; min-height: 100dvh;
  background: var(--c-bg); color: var(--c-text);
  font: var(--w-reg) var(--fs-read)/var(--lh-body) var(--font-sans);
  font-feature-settings: "ss01" 0;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: var(--w-semi); text-wrap: balance; }
:where(p, li, dd, figcaption, td) { text-wrap: pretty; }
b, strong { font-weight: var(--w-semi); }
::selection { background: color-mix(in oklab, var(--c-text) 14%, transparent); }
:lang(de) { hyphens: manual; }
@media (max-width: 480px) { :where(p, li, dd) { hyphens: auto; } }

.h1 {
  font-size: min(var(--fs-display), 13vw);  /* 320 px: 41.6 px, the hand-set lines still fit */
  line-height: var(--lh-display); font-weight: var(--w-med);
  letter-spacing: var(--track-display);
  margin-inline-start: -.045em;            /* optical edge: the large E/W sits on the text column */
}
/* one display weight: the H2 is smaller than the H1 and never heavier */
.h2 {
  font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: var(--w-med);
  letter-spacing: var(--track-head);
  margin-inline-start: -.03em;
}
.h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--w-semi); letter-spacing: var(--track-tight); }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--c-text-2); max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.muted { color: var(--c-text-2); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* eyebrow / small line: Plex Mono 13 px; carries echt / anonymisiert / erfunden */
.eyebrow {
  display: block;
  font: var(--w-reg) var(--fs-mono)/1.4 var(--font-mono);
  letter-spacing: 0; color: var(--c-text-3);
}
.eyebrow--rule { display: flex; align-items: center; gap: var(--s-3); }
.eyebrow--rule::before { content: ""; width: var(--s-4); height: 1px; background: currentColor; flex: none; }


/* ── 04 layout ─────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: var(--s-6); }
.split { display: grid; gap: var(--s-8); }
.split > .section__head { margin-bottom: 0; }   /* the split's own gap separates head and body */
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-16); align-items: start; }
  .split > .section__head { position: sticky; top: var(--s-8); margin-bottom: 0; }
}
.skip {
  position: absolute; left: var(--s-4); top: var(--s-4); z-index: 10;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-md);
  background: var(--c-btn-bg); color: var(--c-btn-text); font-weight: var(--w-med);
  transform: translateY(-200%); transition: transform var(--dur) var(--ease);
}
.skip:focus-visible { transform: none; }


/* ── 05 nav (sticky bar, no JS) ──────────────────────────────────────────────
   header.top > .wrap > nav.nav : brand · links · CTA · menu (<details>, phone only).
   The bar is sticky and starts transparent; over the first 96 px of scroll a tinted,
   blurred surface and a 1 px rule fade in (scroll timeline). Without scroll timelines
   the bar is tinted from the start (light on light pages, night on night pages).
   header.top.night sits on a night hero (the hero runs up under it). As the hero leaves
   under the bar, the bar turns from night glass to light glass (view timeline --hero,
   exposed to the bar through timeline-scope on <html>).
   All bar colours run through the --bar-* properties (registered, so they interpolate);
   the tokens themselves never change. Phone (< 768 px): brand, a compact "Termin"
   button and the menu button; the menu opens a full panel under the bar.
   ≥ 768 px: links as pills, CTA right.                                              */
@property --bar-a      { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --bar-alpha  { syntax: '<percentage>'; inherits: false; initial-value: 72%; }
@property --bar-base   { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bar-panel  { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bar-line   { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bar-ink    { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bar-ink-2  { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bar-btn-bg { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bar-btn-ink { syntax: '<color>'; inherits: true; initial-value: transparent; }
:root { --nav-h: 56px; }
@media (min-width: 768px) { :root { --nav-h: 64px; } }
.top {
  --bar-base: var(--c-bg); --bar-alpha: 72%;    /* surface tint; --bar-a (0 → 1) fades it in */
  --bar-panel: var(--c-bg);
  --bar-line: var(--c-hairline);
  --bar-ink: var(--c-text); --bar-ink-2: var(--c-text-2);
  --bar-btn-bg: var(--c-btn-bg); --bar-btn-ink: var(--c-btn-text);
  position: sticky; top: 0; z-index: 20;
  color: var(--bar-ink);
  background: color-mix(in oklab, var(--bar-base) calc(var(--bar-a) * var(--bar-alpha)), transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--bar-line) calc(var(--bar-a) * 100%), transparent);
  view-transition-name: top-bar;
}
.top.night { --bar-alpha: 80%; }
.top :focus-visible { outline-color: var(--bar-ink); }
/* bar motion: colour only, tied to scroll, so it stays on under reduced motion too.
   The two animations never touch the same property: top-tint fades the surface in
   (--bar-a, backdrop), top-to-light swaps the colours. */
@keyframes top-tint {
  from { --bar-a: 0; -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); }
}
@keyframes top-to-light {
  to {
    --bar-base: var(--canvas); --bar-alpha: 72%; --bar-panel: var(--canvas); --bar-line: var(--ink-a10);
    --bar-ink: var(--ink); --bar-ink-2: var(--ink-2); --bar-btn-bg: var(--ink); --bar-btn-ink: var(--page);
  }
}
@supports (animation-timeline: scroll()) {
  .top { animation: top-tint linear both !important; animation-timeline: scroll(root block) !important; animation-range: 0 96px !important; }
}
@supports (animation-timeline: view()) and (timeline-scope: --hero) {
  html:has(.top.night + .hero), html:has(.top.night + main > .hero:first-child) { timeline-scope: --hero; }
  .top.night + .hero, .top.night + main > .hero:first-child { view-timeline: --hero block; }
  .top.night {
    animation: top-tint linear both, top-to-light linear both !important;
    animation-timeline: scroll(root block), --hero !important;
    animation-range: 0 96px, exit calc(100% - 96px) exit calc(100% - 24px) !important;
  }
}
/* a night hero runs up under the bar, so the bar does not cut it */
.top + .hero, .top + main > .hero:first-child { margin-top: calc(var(--nav-h) * -1); padding-top: var(--nav-h); }
/* sub pages: the first section starts close to the bar */
.top + main > .section:first-child { padding-top: var(--s-8); }

.nav { display: flex; align-items: center; gap: var(--s-2); height: var(--nav-h); }
.nav__brand {
  display: inline-flex; align-items: center; gap: var(--s-3); margin-inline-end: auto;
  min-height: 44px; color: inherit; text-decoration: none;
  font-size: 1rem; line-height: 1; font-weight: var(--w-semi); letter-spacing: var(--track-tight);
  view-transition-name: nav-brand;
}
.mark { width: 26px; height: 25px; flex: none; }
.nav .mark { width: 22px; height: 21px; translate: 0 -1px; }   /* optical: the mark's cap sits on the name's cap height */
.mark rect { fill: currentColor; }
.mark .mark__dot { fill: var(--c-verdict); }

/* desktop links: quiet 15/500, a soft pill on hover, the current page clearly held */
.nav__links { display: none; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 var(--s-3); border-radius: 8px;
  font: var(--w-med) var(--fs-ui)/1 var(--font-sans); letter-spacing: -.005em;
  color: var(--bar-ink-2); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__links a[aria-current] { color: var(--bar-ink); background: color-mix(in oklab, var(--bar-ink) 9%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--bar-ink); background: color-mix(in oklab, var(--bar-ink) 6%, transparent); }
  .nav__links a[aria-current]:hover { background: color-mix(in oklab, var(--bar-ink) 9%, transparent); }
}

/* CTA: small and exact; "Termin" on the phone, "Gespräch buchen" from 768 px */
.top .btn { background: var(--bar-btn-bg); color: var(--bar-btn-ink); }
@media (hover: hover) and (pointer: fine) {
  .top .btn:hover { background: color-mix(in oklab, var(--bar-btn-bg) 88%, var(--bar-btn-ink)); }
}
.nav__cta.btn { min-height: 36px; height: 36px; padding: 0 var(--s-3); border-radius: 8px; font-size: var(--fs-sm); }
.nav__cta-long { display: none; }

/* menu button (summary): two strokes that morph into an X (transform, 200 ms) */
.nav__menu { display: block; }
.nav__menu > summary { list-style: none; }
.nav__menu > summary::-webkit-details-marker { display: none; }
.nav__toggle {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-inline-end: -8px;
  border-radius: 8px; cursor: pointer; color: var(--bar-ink); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease);
}
.nav__toggle::before, .nav__toggle::after {
  content: ""; position: absolute; left: 12px; top: 19.25px; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.nav__toggle::before { transform: translateY(-3.25px); }
.nav__toggle::after  { transform: translateY(3.25px); }
.nav__menu[open] > .nav__toggle { background: color-mix(in oklab, var(--bar-ink) 9%, transparent); }
.nav__menu[open] > .nav__toggle::before { transform: translateY(0) rotate(45deg); }
.nav__menu[open] > .nav__toggle::after  { transform: translateY(0) rotate(-45deg); }

/* panel: the full screen under the bar. Large links that settle in 40 ms apart, the
   current page marked with the logo's square (ink), at the foot the button and one
   quiet mono line. The surface fades in (200 ms); closing is instant. */
.nav__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: var(--s-6) var(--gutter) var(--s-6);
  background: var(--bar-panel); color: var(--bar-ink);
  box-shadow: inset 0 1px 0 var(--bar-line);
  transition: opacity var(--dur) var(--ease);
}
.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel li { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.nav__panel li:nth-child(2) { transition-delay: 40ms; }
.nav__panel li:nth-child(3) { transition-delay: 80ms; }
.nav__panel li:nth-child(4) { transition-delay: 120ms; }
.nav__panel li a {
  display: flex; align-items: center; min-height: 56px;
  font-size: clamp(1.75rem, 1.2rem + 2.8vw, 2rem); line-height: 1.1; font-weight: var(--w-med); letter-spacing: -.02em;
  color: var(--bar-ink); text-decoration: none;
}
/* the square hangs in the left margin (8 px square, 8 px gap), so every word keeps one edge */
.nav__panel li a { position: relative; }
.nav__panel li a[aria-current]::before {
  content: ""; position: absolute; left: -16px; top: 50%; translate: 0 -50%;
  width: 8px; height: 8px; border-radius: 2px; background: currentColor;
}
.nav__panel-foot { margin-top: auto; display: grid; gap: var(--s-5); padding-top: var(--s-10); }
.nav__panel-foot .btn { width: 100%; }
.nav__panel-meta {
  display: grid; gap: var(--s-1);
  font: var(--w-reg) var(--fs-mono)/1.5 var(--font-mono); color: var(--bar-ink-2); font-variant-numeric: tabular-nums;
}
.nav__panel-meta a { color: inherit; text-decoration: none; justify-self: start; }
@starting-style {
  .nav__menu[open] .nav__panel { opacity: 0; }
  .nav__menu[open] .nav__panel li { opacity: 0; transform: translateY(8px); }
}
@media (hover: hover) and (pointer: fine) {
  .nav__toggle:hover { background: color-mix(in oklab, var(--bar-ink) 6%, transparent); }
  .nav__panel-meta a:hover { color: var(--bar-ink); }
}

@media (min-width: 768px) {
  .nav { gap: var(--s-4); }
  .nav__links { display: flex; gap: var(--s-1); }
  .nav__cta-long { display: inline; }
  .nav__cta-short { display: none; }
  .nav__menu { display: none; }
}


/* ── 06 buttons + links ────────────────────────────────────────────────────── */
/* .btn = primary: dark on light, light on night (follows .night). 44 px minimum. */
.btn {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6); border-radius: var(--r-lg);
  background: var(--c-btn-bg); color: var(--c-btn-text);
  font: var(--w-med) 1rem/1 var(--font-sans); letter-spacing: var(--track-tight);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(.98); }
/* narrow phones: long button labels wrap instead of overflowing (320 px) */
@media (max-width: 479px) { .btn:not(.btn--sm) { white-space: normal; text-align: center; line-height: 1.25; padding-block: var(--s-2); max-width: 100%; } }
.btn--sm { min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-md); font-size: var(--fs-ui); }
/* ghost: a 1 px ring, no fill (the nav button in the reference) */
.btn--ghost { background: transparent; color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.btn__note { display: block; margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--c-text-2); text-wrap: balance; }

/* text link: hairline underline that firms up on hover; arrow only when it leads to a sub page.
   The arrow link is inline: a long one wraps like text, and the arrow stays on the last word. */
.link {
  color: var(--c-text); font-weight: var(--w-med);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
  text-decoration-color: var(--c-line-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.link--arrow { text-decoration: none; display: inline; padding-block: var(--s-2); }
.link--arrow::after { content: "→"; display: inline-block; margin-inline-start: .35em; transition: transform var(--dur) var(--ease); }

/* hover exists only where a pointer hovers: on touch a tapped state never sticks */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklab, var(--c-btn-bg) 88%, var(--c-btn-text)); }
  .btn--ghost:hover { background: var(--c-hover); box-shadow: inset 0 0 0 1px var(--c-text-3); }
  .link:hover { text-decoration-color: currentColor; }
  .link--arrow:hover::after { transform: translateX(3px); }
}

/* focus: one visible ring on every control, follows the scope's ink */
:where(a, button, summary, label, input, [tabindex]):focus-visible {
  outline: 2px solid var(--c-text); outline-offset: 3px; border-radius: var(--r-sm);
}
.btn:focus-visible { outline-offset: 3px; border-radius: var(--r-lg); }


/* ── 07 section + head ─────────────────────────────────────────────────────── */
.section { padding: var(--section-y) var(--gutter); }
.section > .wrap { padding-inline: 0; max-width: var(--max); }   /* the band carries the gutter, so text never touches its edge */
.section--surface { background: var(--c-surface); box-shadow: 0 -1px 0 var(--c-line), 0 1px 0 var(--c-line); }
/* a surface band already draws its lower rule; the next band does not add a second one */
.section:not(.section--surface) + .section:not(.section--surface):not(.night) { box-shadow: inset 0 1px 0 var(--c-line); }
/* a showing band (surface) sets its cards on inset, so the card still reads as a sheet */
.section--surface :is(.demo__card, .report) { background: var(--c-inset); }
.section__head { display: flex; flex-direction: column; gap: var(--s-4); max-width: 56rem; margin-bottom: var(--s-8); }
.section__head .eyebrow { margin-bottom: calc(var(--s-1) * -1); }
.section__foot { margin-top: var(--s-6); }
@media (min-width: 900px) { .section__head { margin-bottom: var(--s-10); } }
/* sub page intro: the H1 block (the h1 carries .h2 for its size) */
.intro { display: flex; flex-direction: column; gap: var(--s-5); max-width: 48rem; }
.intro .eyebrow { margin-bottom: calc(var(--s-1) * -1); }


/* ── 08 hero (night, dot portrait) ─────────────────────────────────────────── */
/* phone (< 900 px), a magazine cover: the portrait on top at the full text width (max 420 px,
   centred), cut to head and shoulders, fading into the night at the bottom; the text starts
   32 px below it and never overlaps it. ≥ 900 px: portrait anchored bottom right, text bottom
   left, 800 px tall. .hero__portrait is a wrapper (div or picture): the image fills it, and a
   <canvas> (js/signatur.js) sits on top of it (position: absolute; inset: 0) with the same
   object-fit and object-position, so nothing moves when it comes and goes. */
.hero { position: relative; overflow: hidden; padding-bottom: var(--s-10); }
.hero__inner { position: relative; display: flex; flex-direction: column; }
.hero__portrait {
  position: relative; display: block; align-self: center;
  width: 100%; max-width: 26.25rem; aspect-ratio: 4 / 4.1; height: auto; min-height: 0;   /* the ratio wins over the image's own height */
  margin: 0 0 var(--s-7);
  -webkit-mask-image: linear-gradient(180deg, black 66%, transparent 98%);
          mask-image: linear-gradient(180deg, black 66%, transparent 98%);
  pointer-events: none; user-select: none;
}
.hero__portrait > picture { display: block; width: 100%; height: 100%; }
.hero__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.hero__body { position: relative; display: flex; flex-direction: column; gap: var(--s-6); max-width: 40rem; }
.hero__title { display: flex; flex-direction: column; gap: var(--s-4); }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.hero__actions .lede { font-size: var(--fs-lede); }
.hero__place { font-size: var(--fs-sm); color: var(--c-text-2); }
.hero .h1 .rise > span { display: block; }   /* new copy 15.10.: H1 lines may wrap (longer, swappable H1); block keeps text-box trim right */
.hero .h1 .dot { color: var(--c-verdict); }
@media (min-width: 900px) {
  .hero { min-height: 50rem; display: flex; flex-direction: column; padding-bottom: var(--s-12); }
  .hero > .wrap { flex: 1; display: flex; flex-direction: column; }
  .hero__inner { flex: 1; justify-content: flex-end; padding-top: var(--s-14); }
  .hero__portrait {
    position: absolute; right: calc(var(--gutter) * -.45); bottom: calc(var(--s-12) * -1);
    width: min(560px, 46vw); max-width: none; aspect-ratio: 560 / 722; margin: 0;
    -webkit-mask-image: linear-gradient(180deg, black 72%, transparent 99%);
            mask-image: linear-gradient(180deg, black 72%, transparent 99%);
  }
  .hero__portrait img { object-fit: contain; object-position: 50% 50%; }
  .hero__body { max-width: 40rem; gap: var(--s-7); }
  .hero__title { gap: var(--s-6); }
  .hero__actions { gap: var(--s-5); }
}
/* entrance, once on load: the H1 lines settle (320 ms under 6 px, 80 ms apart), the rest
   fades in 200 ms with no delay (no choreography before the button), the portrait image
   resolves in 600 ms without a filter. Text is readable at once with reduced motion. */
.rise { display: block; padding-bottom: .06em; }
.rise > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .rise > span { transition: opacity 320ms var(--ease), translate 320ms var(--ease); transition-delay: 160ms; }
  .rise:nth-child(2) > span { transition-delay: 240ms; }
  .rise:nth-child(3) > span { transition-delay: 320ms; }
  @starting-style { .rise > span { opacity: 0; translate: 0 6px; } }
}
.fade-late { animation: fade var(--dur) var(--ease) both; }
.hero__portrait img { animation: reveal 600ms var(--ease) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }


/* ── 09 demo (CSS only) ────────────────────────────────────────────────────────
   Markup order matters:  input.demo__a, input.demo__b, .demo__stage, .demo__bar
   Default view is the END state (everything visible). Choosing a radio starts the run;
   the other radio restarts it, because A and B keyframes are separate animations.  */
.demo { display: flex; flex-direction: column; gap: var(--s-4); }
.demo__stage { display: flex; flex-direction: column; gap: var(--s-3); }
.demo__card {
  display: flex; flex-direction: column;
  padding: var(--s-6) 1.625rem; border-radius: var(--r-xl);
  background: var(--c-surface); box-shadow: var(--ring);
}
.demo__card--voice { gap: var(--s-4); }
.demo__card--offer { gap: var(--s-1); box-shadow: var(--shadow-lift); }
.demo__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); font-size: var(--fs-sm); }
.demo__card--offer .demo__top { padding-bottom: var(--s-2); }
.demo__title { font-weight: var(--w-semi); }
.demo__meta { color: var(--c-text-3); }
.demo__meta--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.demo__arrow { display: flex; justify-content: center; align-items: center; color: var(--c-text); }
.demo__arrow svg { width: 24px; height: 32px; }
.demo__arrow .demo__arrow-wide { display: none; }

.demo__wave { display: flex; align-items: center; gap: 4px; height: 44px; }
.demo__w { display: inline-block; width: 4px; border-radius: 2px; background: var(--c-text); transform-origin: center; height: 22px; }
.demo__w:nth-child(20n+1)  { height: 22px; } .demo__w:nth-child(20n+2)  { height: 38px; }
.demo__w:nth-child(20n+3)  { height: 30px; } .demo__w:nth-child(20n+4)  { height: 44px; }
.demo__w:nth-child(20n+5)  { height: 26px; } .demo__w:nth-child(20n+6)  { height: 36px; }
.demo__w:nth-child(20n+7)  { height: 20px; } .demo__w:nth-child(20n+8)  { height: 40px; }
.demo__w:nth-child(20n+9)  { height: 28px; } .demo__w:nth-child(20n+10) { height: 34px; }
.demo__w:nth-child(20n+11) { height: 24px; } .demo__w:nth-child(20n+12) { height: 42px; }
.demo__w:nth-child(20n+13) { height: 30px; } .demo__w:nth-child(20n+14) { height: 22px; }
.demo__w:nth-child(20n+15) { height: 36px; } .demo__w:nth-child(20n+16) { height: 26px; }
.demo__w:nth-child(20n+17) { height: 40px; } .demo__w:nth-child(20n+18) { height: 18px; }
.demo__w:nth-child(20n+19) { height: 32px; } .demo__w:nth-child(20n+20) { height: 28px; }
.demo__w:nth-child(10n+1) { animation-delay: 0s; }   .demo__w:nth-child(10n+2) { animation-delay: .1s; }
.demo__w:nth-child(10n+3) { animation-delay: .2s; }  .demo__w:nth-child(10n+4) { animation-delay: .3s; }
.demo__w:nth-child(10n+5) { animation-delay: .4s; }  .demo__w:nth-child(10n+6) { animation-delay: .5s; }
.demo__w:nth-child(10n+7) { animation-delay: .6s; }  .demo__w:nth-child(10n+8) { animation-delay: .7s; }
.demo__w:nth-child(10n+9) { animation-delay: .8s; }  .demo__w:nth-child(10n+10) { animation-delay: .9s; }

/* at rest the track is a quiet 2 px rule, never the heaviest line on the page */
.demo__track { height: 2px; border-radius: 1px; background: var(--c-line); overflow: hidden; }
.demo__prog { height: 100%; background: var(--c-text-3); transform-origin: left; }

.demo__quote { font-size: 1rem; line-height: var(--lh-body); color: var(--c-text-2); font-style: italic; hanging-punctuation: first; }
.demo__chunk:nth-child(1) { animation-delay: .20s; } .demo__chunk:nth-child(2) { animation-delay: .58s; }
.demo__chunk:nth-child(3) { animation-delay: .96s; } .demo__chunk:nth-child(4) { animation-delay: 1.33s; }
.demo__chunk:nth-child(5) { animation-delay: 1.71s; } .demo__chunk:nth-child(6) { animation-delay: 2.09s; }
.demo__chunk:nth-child(7) { animation-delay: 2.47s; } .demo__chunk:nth-child(8) { animation-delay: 2.84s; }
.demo__chunk:nth-child(9) { animation-delay: 3.22s; }

.demo__rows { display: flex; flex-direction: column; }
.demo__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: baseline;
  padding-block: 10px; font-size: var(--fs-sm); box-shadow: inset 0 -1px 0 var(--c-line);
}
.demo__row > :first-child { grid-column: 1 / -1; }          /* phone: the item on its own line, amounts below */
@media (min-width: 560px) {
  .demo__row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .demo__row > :first-child { grid-column: auto; }
}
.demo--compact .demo__row { grid-template-columns: minmax(0, 1fr) auto; }
.demo--compact .demo__row > :first-child { grid-column: 1 / -1; }
.demo__qty, .demo__price { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--c-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo__price { text-align: right; }
.demo__row:nth-child(1) { animation-delay: 2.1s; } .demo__row:nth-child(2) { animation-delay: 2.5s; }
.demo__row:nth-child(3) { animation-delay: 2.9s; } .demo__row:nth-child(4) { animation-delay: 3.7s; }
.demo__done { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; font-size: var(--fs-sm); animation-delay: 4.3s; }
.demo__done::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c-verdict); }

/* the run: A and B are identical keyframes under different names, so switching restarts */
@keyframes demoInA { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes demoInB { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes demoProgA { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes demoProgB { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes demoWaveA { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes demoWaveB { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.demo__a:checked ~ .demo__stage :is(.demo__chunk, .demo__row, .demo__done) { animation-name: demoInA; animation-duration: .45s; animation-timing-function: var(--ease); animation-fill-mode: both; }
.demo__b:checked ~ .demo__stage :is(.demo__chunk, .demo__row, .demo__done) { animation-name: demoInB; animation-duration: .45s; animation-timing-function: var(--ease); animation-fill-mode: both; }
.demo__a:checked ~ .demo__stage .demo__prog { animation: demoProgA 3.8s linear both; }
.demo__b:checked ~ .demo__stage .demo__prog { animation: demoProgB 3.8s linear both; }
.demo__a:checked ~ .demo__stage .demo__w { animation-name: demoWaveA; animation-duration: .95s; animation-timing-function: ease-in-out; animation-iteration-count: 4; animation-fill-mode: backwards; }
.demo__b:checked ~ .demo__stage .demo__w { animation-name: demoWaveB; animation-duration: .95s; animation-timing-function: ease-in-out; animation-iteration-count: 4; animation-fill-mode: backwards; }

/* the control: label for A first; once A ran, the label for B ("Nochmal") takes its place,
   and after B the label .demo__play--again-a (for A) says "Nochmal", so it never falls back
   to the first label. The labels live either in .demo__bar (text labels under the stage) or
   as the round play button inside the voice card's .demo__top (homepage). */
.demo__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); }
.demo__play {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px;
  cursor: pointer; font-size: var(--fs-ui); font-weight: var(--w-med); color: var(--c-text);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.demo__bar .demo__play { border-radius: var(--r-sm); }
.demo__play svg { width: 14px; height: 14px; flex: none; transition: transform var(--dur) var(--ease); }
.demo__bar .demo__play:active svg { transform: scale(.9); }
.demo__play--again { display: none; }
.demo__a:checked ~ :is(.demo__bar, .demo__stage) .demo__play--first { display: none; }
.demo__a:checked ~ :is(.demo__bar, .demo__stage) .demo__play--again { display: inline-flex; }
.demo__a:checked ~ :is(.demo__bar, .demo__stage) .demo__play--again-a { display: none; }
.demo__b:checked ~ :is(.demo__bar, .demo__stage) .demo__play--first { display: none; }
.demo__b:checked ~ :is(.demo__bar, .demo__stage) .demo__play--again-a { display: inline-flex; }
.demo__a:focus-visible ~ :is(.demo__bar, .demo__stage) .demo__play,
.demo__b:focus-visible ~ :is(.demo__bar, .demo__stage) .demo__play { outline: 2px solid var(--c-text); outline-offset: 4px; }
/* round play button inside the voice card: the familiar "play this voice note" gesture */
.demo__card--voice .demo__top { justify-content: flex-start; align-items: center; }
.demo__card--voice .demo__meta { margin-inline-start: auto; }
.demo__card--voice .demo__play {
  flex: none; width: 44px; height: 44px; justify-content: center; gap: 0;
  border-radius: 50%; background: var(--c-btn-bg); color: var(--c-btn-text);
}
.demo__card--voice .demo__play svg { width: 16px; height: 16px; translate: 1px 0; }   /* optical centre of the triangle */
.demo__card--voice .demo__play:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .demo__bar .demo__play:hover { color: var(--c-text-2); }
  .demo__bar .demo__play:hover svg { transform: translateX(2px); }
  .demo__card--voice .demo__play:hover { background: color-mix(in oklab, var(--c-btn-bg) 88%, var(--c-btn-text)); }
}

@media (min-width: 900px) {
  .demo__stage { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.2fr); gap: var(--s-5); align-items: stretch; }
  .demo__arrow .demo__arrow-tall { display: none; }
  .demo__arrow .demo__arrow-wide { display: block; width: 40px; height: 24px; }
  .demo__row, .demo__done { font-size: var(--fs-ui); }
}
/* compact size: the same component inside a card or a narrow column */
.demo--compact .demo__stage { display: flex; flex-direction: column; gap: var(--s-3); }
.demo--compact .demo__arrow .demo__arrow-tall { display: block; }
.demo--compact .demo__arrow .demo__arrow-wide { display: none; }


/* ── 10 list (the pixel of the F is the bullet) ────────────────────────────── */
.list { list-style: none; padding: 0; display: grid; gap: var(--s-4); max-width: var(--measure); }
.list > li { position: relative; padding-left: var(--s-6); }
.list > li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: var(--s-2); height: var(--s-2); border-radius: 2px; background: var(--c-text);
}
.list > li > b:first-child { color: var(--c-text); }
.list--muted > li { color: var(--c-text-2); }


/* ── 11 showcase card (startseiten-karte, strategy/showcase-vorlage) ───────────
   eyebrow (Art · Kennzeichnung) · title ≤ 8 words · still 4:3 · one sentence · "Ansehen".
   The whole card is clickable through the link's ::after overlay; no nested links. */
.cards { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
/* the still runs edge to edge at the top with one rule below it, so there is no frame
   inside the card's frame */
.card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: 0 0 var(--s-6); border-radius: var(--r-xl);
  background: var(--c-surface); box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: var(--shadow-lift); }
}
.card:has(.card__link:focus-visible) { outline: 2px solid var(--c-text); outline-offset: 3px; }
.card__media {
  aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--c-inset); box-shadow: inset 0 -1px 0 var(--c-line);
}
.card .eyebrow { text-wrap: balance; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
/* no picture yet, or a case without an image: a quiet striped panel with one mono line */
.card__media--text {
  display: flex; align-items: flex-end; padding: var(--s-4);
  background: var(--c-inset) repeating-linear-gradient(135deg, var(--c-stripe) 0 1px, transparent 1px 9px);
  font: var(--w-reg) var(--fs-mono)/1.5 var(--font-mono); color: var(--c-text-2);
}
.card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-1) var(--s-6) 0; flex: 1; }
.card__title { font-size: var(--fs-h3); line-height: 1.2; font-weight: var(--w-semi); letter-spacing: var(--track-tight); }
.card__text { color: var(--c-text-2); font-size: var(--fs-ui); line-height: var(--lh-body); }
.card__link { margin-top: auto; padding-top: var(--s-2); align-self: flex-start; }
.card__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.card__link:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }


/* ── 12 steps (Ansehen · Prüfen · Bauen · Loslassen) ──────────────────────────
   phone: a vertical timeline; ≥ 900 px: four columns on one rule.
   .step--decision puts the vermilion square where the owner decides. */
.steps { list-style: none; padding: 0; display: grid; }
.step { position: relative; display: grid; align-content: start; gap: var(--s-1); padding: 0 0 var(--s-8) var(--s-8); }   /* start: rows never stretch, so the four columns share their lines */
.step::before { content: ""; position: absolute; left: 4px; top: var(--s-3); bottom: 0; width: 1px; background: var(--c-line-strong); }
.step:last-child::before { content: none; }
.step__mark { position: absolute; left: 0; top: .5rem; width: 9px; height: 9px; border-radius: 2px; background: var(--c-text); }
.step--decision .step__mark { background: var(--c-verdict); }
.step__verb { font-size: var(--fs-h3); line-height: 1.2; font-weight: var(--w-semi); letter-spacing: var(--track-tight); }
.step__when { font: var(--w-reg) var(--fs-mono)/1.5 var(--font-mono); color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.step__text { margin-top: var(--s-2); color: var(--c-text-2); font-size: var(--fs-ui); line-height: var(--lh-body); }
.step__who { margin-top: var(--s-2); font-size: var(--fs-sm); font-weight: var(--w-med); }
.steps__foot { margin-top: var(--s-2); padding-top: var(--s-4); box-shadow: inset 0 1px 0 var(--c-line); font: var(--w-reg) var(--fs-mono)/1.6 var(--font-mono); color: var(--c-text-2); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-8); }
  .step { padding: var(--s-8) 0 var(--s-8); }
  .step::before { left: 0; right: calc(var(--s-8) * -1); top: calc(.5rem + 4px); bottom: auto; width: auto; height: 1px; }
  .step:last-child::before { content: ""; right: 0; }
  .step__mark { top: .5rem; }
}


/* ── 13 prices ─────────────────────────────────────────────────────────────── */
/* one highlighted package card, the rest as ruled lines; all figures tabular */
.prices { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 900px) { .prices { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-12); } }
.price-card {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6); border-radius: var(--r-xl);
  background: var(--c-surface); box-shadow: var(--shadow-lift);
}
.price-card__name { font-size: var(--fs-ui); font-weight: var(--w-semi); }
.price-card__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding-top: var(--s-3); box-shadow: inset 0 1px 0 var(--c-text); }
/* the recommended package: a heavier ink rule above the price, no colour (vermilion is the decision) */
.price-card--pick .price-card__figure { box-shadow: inset 0 2px 0 var(--c-text); }
.price-card__amount { font-size: clamp(2.5rem, 2.17rem + 1.35vw, 3.25rem); line-height: 1; font-weight: var(--w-semi); letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.price-card__basis { color: var(--c-text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.price-card__text { color: var(--c-text-2); font-size: var(--fs-ui); }

.price-lines { list-style: none; padding: 0; }
.price-lines > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; align-content: start; gap: var(--s-1) var(--s-6);
  padding-block: var(--s-4); box-shadow: inset 0 -1px 0 var(--c-line);
}
.price-lines > li:first-child { box-shadow: inset 0 1px 0 var(--c-text), inset 0 -1px 0 var(--c-line); }
.price-lines__what { font-weight: var(--w-semi); }
.price-lines__amount { font-variant-numeric: tabular-nums; font-weight: var(--w-med); text-align: right; white-space: nowrap; }
.price-lines__more { grid-column: 1 / -1; color: var(--c-text-2); font-size: var(--fs-ui); line-height: var(--lh-body); }

/* facts: short dt/dd rows (Brutto, Online, Bezahlung, Ende …); .facts--card inside a price card */
.facts { display: grid; }
.facts > div { display: grid; gap: 2px; padding-block: var(--s-3); box-shadow: inset 0 -1px 0 var(--c-line); }
.facts > div:first-child { box-shadow: inset 0 1px 0 var(--c-text), inset 0 -1px 0 var(--c-line); }
.facts dt { color: var(--c-text-2); font-size: var(--fs-sm); }
.facts dd { font-weight: var(--w-med); font-variant-numeric: tabular-nums; line-height: var(--lh-snug); }
.facts--card { font-size: var(--fs-ui); }
.facts--card > div:first-child { box-shadow: inset 0 1px 0 var(--c-line), inset 0 -1px 0 var(--c-line); }
@media (min-width: 641px) {
  .facts > div { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
  .facts--card > div { grid-template-columns: 6rem minmax(0, 1fr); }
}


/* ── 14 report figure (Monatsbericht; port of angebot .ag-bericht) ──────────────
   The hatched band marks invented numbers. Ink only: nothing here is a decision.
   One square per inquiry: <span class="marks" style="--n:7">, the count is data, not colour. */
.report { padding: var(--s-2) var(--s-4) var(--s-5); border-radius: var(--r-xl); background: var(--c-surface); box-shadow: var(--shadow-card); }
.report__badge { margin: 0 calc(var(--s-2) * -1) var(--s-5); padding: var(--s-2); border-radius: var(--r-lg); background: var(--c-inset) repeating-linear-gradient(135deg, var(--c-stripe) 0 1px, transparent 1px 9px); box-shadow: inset 0 0 0 1px var(--c-line); }
.report__badge span { display: inline-block; padding: var(--s-1) var(--s-3); border-radius: var(--r-sm); background: var(--c-surface); box-shadow: var(--ring); font-size: var(--fs-sm); font-weight: var(--w-semi); line-height: var(--lh-snug); }
.report__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); margin-bottom: var(--s-4); }
.report__title { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--track-tight); }
.report__meta { color: var(--c-text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.report__table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); line-height: var(--lh-snug); border-top: 1px solid var(--c-text); }
.report__table :is(th, td) { padding: var(--s-2) 0; text-align: left; vertical-align: baseline; font-weight: var(--w-reg); box-shadow: inset 0 -1px 0 var(--c-line); }
.report__table thead th { color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--w-med); }
.report__table tbody th { padding-right: var(--s-3); }
.report__table .is-marks { width: 1%; padding-right: var(--s-4); }
.report__table .is-num { width: 1%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--w-med); }
.marks {
  --step: calc(var(--s-2) + .1875rem);
  display: inline-block; width: calc(var(--n, 1) * var(--step) - .1875rem); height: var(--s-2);
  background: repeating-linear-gradient(90deg, var(--c-text) 0 var(--s-2), transparent var(--s-2) var(--step));
}
/* counted squares as elements: <span class="marks"><i style="--i:0"></i>…</span>. --i is the
   square's place in the whole figure (a hook for a count-in); .is-base = counted in week 1,
   .is-new = above that baseline. Without any motion the squares simply stand. */
.report { --sq: 6px; --sq-gap: 2px; }   /* 23 squares + "+4" fit a 320 px screen */
@media (min-width: 375px) { .report { --sq: var(--s-2); --sq-gap: .1875rem; } }
.marks:has(> i) { display: inline-flex; gap: var(--sq-gap, .1875rem); width: auto; background: none; vertical-align: baseline; }
.marks > i { flex: none; width: var(--sq, var(--s-2)); height: var(--sq, var(--s-2)); border-radius: 1px; background: var(--c-text); }
.marks > i.is-base { background: var(--c-line-strong); }
/* the strip under the table: this month's total at the same scale, the week-1 baseline
   receding in light grey, the new ones in full ink, the difference written next to them */
.report__strip { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.report__strip .marks { grid-row: 1; }
.report__strip-diff { grid-row: 1; font: var(--w-med) var(--fs-ui)/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--c-text); }
.report__strip-base {
  grid-row: 2; grid-column: 1 / -1; justify-self: start;
  width: calc(var(--base, 1) * (var(--sq) + var(--sq-gap)) - var(--sq-gap)); white-space: nowrap;   /* the rule spans exactly the grey squares */
  padding-top: var(--s-1); box-shadow: inset 0 1px 0 var(--c-text-3);
  font: var(--w-reg) var(--fs-mono)/1.4 var(--font-mono); color: var(--c-text-2); font-variant-numeric: tabular-nums;
}
.report__sub { display: block; margin-top: 2px; color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--w-reg); }
.report__table tfoot tr.is-sum :is(th, td) { padding-top: var(--s-3); box-shadow: inset 0 1px 0 var(--c-text), inset 0 -1px 0 var(--c-line); font-weight: var(--w-semi); }
.report__table tfoot tr:not(.is-sum):not(.is-diff) :is(th, td) { color: var(--c-text-2); }
.report__table tfoot tr.is-diff :is(th, td) { padding-top: var(--s-3); box-shadow: none; font-weight: var(--w-semi); }
.report__table tfoot tr.is-diff td { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--track-tight); }
.report__notes { margin-top: var(--s-5); display: grid; gap: var(--s-4); }
.report__notes dt { color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--w-med); }
.report__notes dd { margin-top: var(--s-1); font-size: var(--fs-ui); line-height: var(--lh-body); }
@media (min-width: 641px) {
  .report { padding: var(--s-2) var(--s-6) var(--s-6); }
  .report__badge { margin-inline: calc(var(--s-4) * -1); }
}


/* ── 15 FAQ (<details>, native, first one open) ────────────────────────────── */
.faq { max-width: 48rem; }
.faq__item { box-shadow: inset 0 -1px 0 var(--c-line); }
.faq__item:first-child { box-shadow: inset 0 1px 0 var(--c-text), inset 0 -1px 0 var(--c-line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 56px; padding-block: var(--s-4); cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: var(--w-semi); line-height: var(--lh-snug);
  transition: color var(--dur-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform var(--dur) var(--ease);
}
.faq__item[open] > .faq__q::after { transform: translateY(2px) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .faq__q:hover { color: var(--c-text-2); } }
.faq__q:focus-visible { outline-offset: -2px; }
.faq__a { padding: 0 var(--s-10) var(--s-5) 0; color: var(--c-text-2); max-width: var(--measure); }
.faq__item[open] > .faq__a { animation: fade var(--dur-slow) var(--ease); }


/* ── 16 door (So geht es los / Kontakt) ─────────────────────────────────────── */
.door { display: grid; gap: var(--s-6); max-width: 48rem; }
.door__list { display: grid; }
.door__list > div { display: grid; gap: var(--s-1); padding-block: var(--s-3); box-shadow: inset 0 -1px 0 var(--c-line); }
.door__list > div:first-child { box-shadow: inset 0 1px 0 var(--c-text), inset 0 -1px 0 var(--c-line); }
.door__list dt { color: var(--c-text-2); font-size: var(--fs-ui); }
.door__list dd { font-weight: var(--w-med); font-variant-numeric: tabular-nums; }
.door__note { color: var(--c-text-2); font-size: var(--fs-ui); }
@media (min-width: 641px) { .door__list > div { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; } }

/* callout (draft notice, objection right, a rule worth its own box) */
.callout {
  display: grid; gap: var(--s-2); max-width: 44rem;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  background: var(--c-inset); box-shadow: inset 0 0 0 1px var(--c-line-strong);
}
.callout__title { font-weight: var(--w-semi); color: var(--c-text); }
.callout p { color: var(--c-text-2); }

/* one quiet mono fact line under a rule */
.monoline {
  padding-top: var(--s-4); box-shadow: inset 0 1px 0 var(--c-line);
  font: var(--w-reg) var(--fs-mono)/1.6 var(--font-mono); color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}


/* ── 17 footer ─────────────────────────────────────────────────────────────── */
.foot { padding-block: var(--s-10) var(--s-12); box-shadow: inset 0 1px 0 var(--c-line); font-size: var(--fs-sm); color: var(--c-text-2); }
.foot__grid { display: grid; gap: var(--s-6); }
.foot__who { display: flex; align-items: center; gap: var(--s-3); color: var(--c-text); font-weight: var(--w-med); }
.foot__who .mark { width: 18px; height: 17px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); list-style: none; padding: 0; }
.foot__nav a {
  display: inline-flex; align-items: center; min-height: 32px; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--c-line-strong);
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .foot__nav a:hover { color: var(--c-text); text-decoration-color: currentColor; } }
.foot__nav a[aria-current="page"] { color: var(--c-text); text-decoration: none; }
.foot__legal { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .foot__grid { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4) var(--s-10); }
  .foot__nav { justify-content: flex-end; }
  .foot__legal { grid-column: 1 / -1; }
}


/* ── 18 utilities, motion, print ───────────────────────────────────────────── */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mt-4 { margin-top: var(--s-4); } .mt-8 { margin-top: var(--s-8); }

/* page transitions: Chrome and Safari crossfade between pages and keep the brand and the
   button in place; Firefox navigates normally. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur); animation-timing-function: var(--ease); }
}

/* shared keyframes: only the start state is named, the end is the element's own */
@keyframes grow-x { from { scale: 0 1; } }
@keyframes grow-y { from { scale: 1 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .demo__play { display: none !important; }   /* nothing to replay: the end state stands; the bar's link stays */
}

/* ── 19 feld (js/feld.js) ──────────────────────────────────────────────────────
   A band with data-feld gets a canvas as its first child: glyphs in the band's own ink, the
   system behind the page. The band becomes a stacking context, its content sits above the
   canvas. The edges fade over a fixed 48 px (a percentage would eat the free rows of a tall
   phone band) so two bands never meet in a hard line; a hero fades only at the bottom. Without the script there is no canvas and no change. */
[data-feld] { position: relative; isolation: isolate; }
[data-feld] > .wrap { position: relative; z-index: 1; }
.feld {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 48px, black calc(100% - 48px), transparent);
          mask-image: linear-gradient(180deg, transparent, black 48px, black calc(100% - 48px), transparent);
  transition: opacity 900ms var(--ease);
}
.hero > .feld { -webkit-mask-image: linear-gradient(180deg, black calc(100% - 120px), transparent); mask-image: linear-gradient(180deg, black calc(100% - 120px), transparent); }
@starting-style { .feld { opacity: 0; } }

@media print {
  .feld { display: none; }
  .nav, .demo__bar, .demo__play, .skip, .btn { display: none !important; }
  .night { background: none; color: var(--ink); --c-text: var(--ink); --c-text-2: var(--ink-2); --c-verdict: var(--vermilion); }
  .hero__portrait { display: none; }
  .card, .report, .faq__item, .step, .price-card { break-inside: avoid; }
}

/* [FEHLT]/[OFFEN]-Platzhalter: überall gleich, ~16 px, gestrichelt statt Flächengelb (Review 15.10.) */
mark.fehlt { font-size: 1rem !important; line-height: 1.4; font-weight: 400; font-family: inherit; letter-spacing: 0; background: rgb(255 214 0 / .18); color: inherit; border: 1.5px dashed #c9a400; border-radius: 4px; padding: 0 4px; overflow-wrap: anywhere; }

/* Belege-Karten (Start + Über mich) */
.belege__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); list-style: none; margin: var(--s-8) 0 0; padding: 0; }
@media (min-width: 720px) { .belege__grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719.98px) { .belege__grid { grid-template-columns: minmax(0, 1fr); } }
.beleg { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: none; }
.beleg[data-freigabe]:not([data-freigabe="ja"]) { display: none; }
.beleg__logo { height: 40px; width: 96px; border-radius: var(--r-sm); background: var(--c-line); }
.beleg__logo--anon { background: none; }
.beleg__kicker { margin: 0; font-size: var(--fs-sm); font-weight: var(--w-semi); letter-spacing: .06em; font-variant-caps: all-small-caps; color: var(--c-text-2); }
.beleg__fig { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: var(--w-semi); letter-spacing: var(--track-tight); color: var(--c-verdict); text-wrap: balance; }
.beleg__name { margin: 0; font-size: var(--fs-sm); font-weight: var(--w-semi); }
.beleg__text { margin: 0; color: var(--c-text-2); }
.belege__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); margin-top: var(--s-8); color: var(--c-text-2); font-size: var(--fs-sm); }
.belege__since { margin: 0; }
.belege__marks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); list-style: none; margin: 0; padding: 0; }
.wordmark { display: flex; align-items: center; height: 32px; font-size: var(--fs-read); font-weight: var(--w-semi); letter-spacing: var(--track-tight); color: var(--c-text-3); filter: grayscale(1); }
.belege__system { margin: var(--s-4) 0 0; max-width: var(--measure); color: var(--c-text-2); }
.beleg__kicker .nocaps { font-variant-caps: normal; text-transform: none; }