/* ══════════════════════════════════════════════════════════════════════
   Anderer & Gehring — site.css
   Abwechselnd dunkle und helle Bänder. Orange trägt die Pre-Headlines,
   die primären Aktionen und die aktive Station der Schiene.

   Wie die Bänder funktionieren: :root hält die dunklen Werte, `.band--paper`
   setzt DIESELBEN Tokennamen neu. Kein Bauteil kennt eine Hell-Variante,
   alle lesen nur Tokens. Wer ein neues Bauteil baut: keine festen Farben.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Schriften, selbst gehostet ───────────────────────────────────────
   Archivo, Inter und Geist Mono, SIL Open Font License 1.1 (fonts/LICENSE.md).
   Bewusst kein Google-CDN: das Nachladen von fonts.gstatic.com überträgt die
   IP des Besuchers in die USA (LG München I, 3 O 17493/20). ────────────── */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/archivo-latin.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: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin.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: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/geistmono-latin.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/geistmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ──────────────────────────────────────────────────────────── */

:root {
  --ink: #121212;          /* Bandfläche, aus Thomas' CI gemessen */
  --paper: #FAFAFA;        /* Bandfläche der hellen Bänder */
  --signal: #F16304;       /* Thomas' Orange — für Flächen (Knopf, Schiene) */
  --signal-fg: #F16304;    /* dasselbe Orange als Schrift, 5,82:1 auf --ink */
  --signal-hi: #FF7415;    /* dasselbe Orange, eine Spur heller: Hover */
  --signal-wash: rgba(241, 99, 4, .13);  /* Orange als Fläche, hinter dem Netz */
  --text: #F2F2F3;         /* Überschriften */
  --muted: #9AA0A8;        /* Fließtext, AA-geprüft */
  --dim: #82878F;          /* Marker und Ziffern, AA-geprüft */
  --rule: rgba(255, 255, 255, .12);
  --rule-soft: rgba(255, 255, 255, .07);
  --rule-strong: rgba(255, 255, 255, .22);
  --dot: #3A3D42;          /* stiller Punkt der Schiene */

  /* Nur die Check-Seite liest diese vier. Sie stehen trotzdem hier: Tokens
     gehören an eine Stelle, und ein Bauteil, das seine eigene Farbe mitbringt,
     bricht das helle Band, sobald es einmal dort landet. */
  --ink-raise: #171717;    /* Fläche, die sich einen Hauch abhebt: der CTA */
  --tier-ready: #58A55C;
  --tier-mid: #F16304;
  --tier-risk: #D1495B;
  /* Fehlermeldungen im Bewerbungsformular. Eigener Token, weil --tier-risk
     auf Papier nur 4,18:1 erreicht und damit unter WCAG AA fiele. */
  --fehler: #E4707E;

  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-text: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --wrap: 76rem;
  --measure: 40rem;
  --band-y: clamp(5.5rem, 11vw, 10rem);
  --head-h: 4.25rem;
}

/* Das helle Band. Setzt nur Tokens um — keine Bauteilregeln.
   Orange auf Papier braucht einen eigenen Wert: #F16304 erreicht auf #FAFAFA
   nur 3,08:1 und fiele als Schrift unter WCAG AA. #C24A00 liegt bei 4,70:1
   und liest sich dank Simultankontrast als dasselbe Orange. Die Fläche
   (--signal) bleibt unverändert, damit der Knopf überall gleich aussieht. */
.band--paper {
  --ink: var(--paper);
  --text: #16181B;
  --muted: #4E545C;
  --dim: #6C727A;
  --signal-fg: #C24A00;
  --fehler: #B32334;
  --rule: rgba(0, 0, 0, .14);
  --rule-soft: rgba(0, 0, 0, .09);
  --rule-strong: rgba(0, 0, 0, .26);
  --dot: #C4C8CE;
  background: var(--ink);
  color: var(--muted);
}
.band--paper ::selection { background: var(--text); color: var(--paper); }

/* ── Grundlagen ──────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--muted);
  font-family: var(--font-text);
  font-size: clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height: 1.68;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.022em;
  line-height: 1.06;
  text-wrap: balance;
  margin: 0;
}

h2 { font-size: clamp(1.85rem, 1.1rem + 2.6vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); letter-spacing: -.015em; line-height: 1.2; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--signal); color: #121212; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 2px;
}

.u-sr,
.skip:not(:focus) {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus {
  position: fixed;
  z-index: 100;
  top: .75rem; left: .75rem;
  background: var(--text);
  color: var(--ink);
  padding: .6rem 1rem;
  font: 500 .875rem/1 var(--font-text);
  text-decoration: none;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure { max-width: var(--measure); }

/* ── Bausteine ───────────────────────────────────────────────────────── */

/* Die Pre-Headline. Thomas am 12.08.: die kleine Zeile war zu schwach, die
   Überschrift darunter zu stark — und die beiden lasen sich nicht als ein
   Block. Also Schrift statt Marker: gross, orange, normal geschrieben, ohne
   Balken und ohne Versalien, dicht an der Überschrift. */
.kicker {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--signal-fg);
  text-wrap: balance;
  margin: 0 0 .35rem;
}
.kicker--hero { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.5rem); margin-bottom: .5rem; }

.lead {
  font-size: clamp(1.125rem, 1rem + .55vw, 1.375rem);
  line-height: 1.5;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -.008em;
  margin-block: 1.6rem 1.4rem;
  text-wrap: pretty;
}

.punch {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.018em;
  color: var(--text);
  text-wrap: balance;
  margin-top: 2.5rem;
}

/* Zwischenüberschrift innerhalb eines Bandes. Bisher gab es sie nicht: h3 war
   immer Teil eines Bausteins (Station, Person). Sie steht hier nach dem Punch
   und braucht deshalb mehr Luft nach oben als nach unten — sonst liest sich der
   Punch wie eine Dachzeile zur Überschrift statt als Abschluss davor. */
.subhead { margin-top: 3.5rem; }

h2 + .lead, h2 + p, h3 + p { margin-top: 1.5rem; }

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--rule-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: .7rem 1.4rem;
  border: 1px solid var(--btn-bd);
  border-radius: 3px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 500 .9375rem/1.2 var(--font-text);
  letter-spacing: -.005em;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--signal {           /* Orange, Rolle 2 von 3: die primäre Aktion */
  --btn-bg: var(--signal);
  --btn-bd: var(--signal);
  --btn-fg: #121212;
  font-weight: 600;
}
.btn--signal:hover { --btn-bg: var(--signal-hi); --btn-bd: var(--signal-hi); }
.btn--quiet:hover { --btn-bd: var(--text); }

/* ── Kopf ────────────────────────────────────────────────────────────── */

.head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 18, 18, .82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.head.is-stuck {
  border-bottom-color: var(--rule-soft);
  background: rgba(18, 18, 18, .92);
}
.head__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--head-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  margin-right: auto;
}
.brand__mark { width: auto; height: 1.75rem; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .01em;
  color: var(--text);
  white-space: nowrap;
}
.head__nav {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2rem);
  font-size: .9375rem;
}
.head__nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color .18s ease;
}
.head__nav a:hover { color: var(--text); }
.head__cta { min-height: 2.375rem; padding: .5rem 1.05rem; font-size: .875rem; }

@media (max-width: 47.99em) {
  .head__nav { display: none; }
  .brand__name { display: none; }
  .brand__mark { height: 2rem; }
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  padding-top: clamp(4.5rem, 12vh, 9rem);
  padding-bottom: 0;
}
.hero__claim {
  font-size: clamp(2.2rem, .9rem + 5.1vw, 4.4rem);
  line-height: .99;
  letter-spacing: -.032em;
  max-width: 24ch;
  /* Weder balance noch pretty: der Umbruch nach "Technik." ist gesetzt,
     beide Verfahren zerlegen den zweiten Satz sonst in zwei kurze Reste. */
  text-wrap: wrap;
}
.hero__sub {
  max-width: 34rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  line-height: 1.6;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.25rem;
}
/* Zwei Aktionen passen bis 518 px nebeneinander, darunter bricht die Zeile von
   selbst um — dann stehen sie aber unterschiedlich breit untereinander, und die
   linke Kante ist das Einzige, was sie noch verbindet. Unterhalb der Schwelle
   deshalb bewusst gestapelt und beide auf Spaltenbreite. 33em statt 32.4em als
   Puffer: rendert eine Schrift minimal breiter, soll trotzdem nie der
   ausgefranste Zwischenzustand sichtbar werden. */
@media (max-width: 33em) {
  .hero__actions .btn { width: 100%; }
}

.preview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: clamp(4rem, 9vw, 7rem) auto 0;
  padding-block: 0;
  border-top: 1px solid var(--rule-soft);
}
.preview__item {
  border-right: 1px solid var(--rule-soft);
}
.preview__item a {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: 1.15rem 1rem 1.15rem 0;
  font-size: .875rem;
  color: var(--dim);
  text-decoration: none;
  transition: color .18s ease;
}
.preview__item a:hover { color: var(--text); }
.preview__item a:hover .preview__num { color: var(--text); }
.preview__item:last-child { border-right: 0; }
.preview__item:not(:first-child) a { padding-left: 1rem; }
.preview__num {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--dim);
}
@media (max-width: 47.99em) {
  .preview { grid-template-columns: repeat(2, 1fr); }
  .preview__item:nth-child(2n) { border-right: 0; }
  .preview__item:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
  .preview__item:nth-child(2n+1) a { padding-left: 0; }
}

/* ── Bänder ──────────────────────────────────────────────────────────── */

.band { padding-block: var(--band-y); }

.quote {
  margin: 2.75rem 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 1px solid var(--rule);
}
.quote blockquote { margin: 0; }
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--text);
  text-wrap: pretty;
}
.quote figcaption {
  margin-top: .9rem;
  font-size: .875rem;
  color: var(--dim);
}

/* ── KI-Readiness-Check ──────────────────────────────────────────────── */

.dims {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: 1px solid var(--rule-soft);
}
.dims li {
  padding: 1.1rem clamp(1rem, 2vw, 1.75rem) 1.1rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
/* Englischer Begriff als Überschrift, deutsche Erläuterung darunter: wer
   den Check macht, versteht die Begriffe. Wortlaut aus dem Check selbst,
   damit Seite und Check nicht auseinanderlaufen. */
.dims__en {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.012em;
  color: var(--text);
  margin-bottom: .2rem;
}
.dims__de { font-size: .9375rem; margin: 0; }

.check__go { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.check__note { margin-top: 1rem; font-size: .9375rem; color: var(--dim); }

/* ── Fahrplan und Schiene ────────────────────────────────────────────── */

.fahrplan {
  padding-block: var(--band-y);
  position: relative;
}
.fahrplan__head { margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.fahrplan__head .lead { max-width: 34rem; }

/* Die Schiene gibt es nur am Seitenrand — und nur, wenn dort auch eine freie
   Spur ist. Der Inhalt ist 76rem breit und mittig; die Schiene braucht rund
   5rem plus Abstand. Unterhalb von 88em bleibt davon nichts übrig, und die
   Schiene lief in die Überschriften hinein (gemessen: bei 1280 px 26 px
   Überlappung, bei 1200 px 59 px). Darunter fiel sie früher zudem als
   klebende Querleiste unter den Kopf und bildete eine zweite
   Navigationszeile — Thomas' Kritik vom 12.08.
   Die Ankernavigation übernimmt dort die Stationsleiste im Hero (.preview). */
.rail {
  --rail-progress: 12.5%;
  display: none;
}

@media (min-width: 88em) {
  .rail {
    display: block;
    position: fixed;
    top: 50%;
    /* Nicht am Fensterrand, sondern an der Inhaltsspalte: die rechte Kante
       der Schiene hält 2.5rem Abstand zur Textkante, auf jeder Breite. */
    right: calc(50% + var(--wrap) / 2 - var(--gutter) + 2.5rem);
    z-index: 30;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s;
  }
  .rail.is-live { opacity: 1; visibility: visible; }
  .rail__list {
    list-style: none;
    display: grid;
    grid-auto-rows: minmax(0, auto);
    gap: 1.65rem;
    margin: 0;
    padding: 0 0 0 1.1rem;
    border-left: 1px solid var(--rule);
    position: relative;
  }
  .rail__item { min-width: 0; }
  .rail__item a {
    display: grid;
    grid-template-columns: auto;
    gap: .1rem;
    padding: 0;
    position: relative;
    text-decoration: none;
    color: var(--dim);
    font-size: .8125rem;
    transition: color .3s ease;
  }
  .rail__item.is-active a { color: var(--text); }
  .rail__item a::before {
    content: '';
    position: absolute;
    left: calc(-1.1rem - 3px);
    top: .55em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--dot);
    transition: background-color .3s ease;
  }
  /* Orange, Rolle 3 von 3: die aktive Station */
  .rail__item.is-active a::before { background: var(--signal-fg); }
  .rail__num {
    display: block;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .06em;
  }
  .rail__label {
    white-space: nowrap;
    opacity: 0;
    transition: opacity .3s ease;
  }
  .rail__item.is-active .rail__label,
  .rail__item a:hover .rail__label,
  .rail__item a:focus-visible .rail__label { opacity: 1; }
  .rail__fill {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 1px;
    height: var(--rail-progress);
    background: var(--signal-fg);
    transition: height .45s cubic-bezier(.4, 0, .2, 1);
  }
}

.station { padding-block: clamp(3rem, 7vw, 5.5rem); }
.station + .station { border-top: 1px solid var(--rule-soft); }
.station__grid {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}
/* Ohne eigene Nummer: die trägt allein die Schiene. Zwei Nummernsysteme im
   selben Blickfeld waren Thomas' Punkt 6 vom 12.08. */
.station__title {
  font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.25rem);
  line-height: 1.1;
}
.station__lead {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.015em;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.station__body { max-width: none; }
.station__lead, .station__body > p { max-width: 34rem; }

.parts {
  list-style: none;
  max-width: 44rem;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-soft);
}
.parts li {
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: .9375rem;
  color: var(--muted);
}

@media (max-width: 61.99em) {
  .station__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .station__title br { display: none; }
}

/* ── Arbeitsweise: die zwei Spuren ─────────────────────────────────────
   Bewusst ohne viewBox: die Grafik rechnet damit in CSS-Pixeln, die
   Beschriftungen behalten bei jeder Breite ihre Schriftgröße und schrumpfen
   nicht mit. Nur die beiden Spuren dehnen sich (x2="100%").
   Kein Mono, keine Versalien — genau das hatte Thomas als „Serifenschrift"
   gelesen. Kein Orange: die Grafik ist keine Aktion.                     */

.flow {
  display: block;
  width: 100%;
  max-width: 44rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  color: var(--muted);
  overflow: hidden;
}
.flow__track { stroke: var(--rule-strong); stroke-width: 1.5; fill: none; }
.flow__track--ai { stroke-dasharray: 5 5; }
.flow__return { stroke: currentColor; stroke-width: 1; fill: none; stroke-dasharray: 3 4; }
.flow__head { stroke: currentColor; stroke-width: 1; fill: none; }
.flow text { fill: currentColor; }
.flow__name {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem);
  letter-spacing: -.012em;
}
.flow__note {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: .8125rem;
}
.flow__gate {
  color: var(--text);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: .8125rem;
}

.principles {
  list-style: none;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-soft);
}
.principles li {
  padding: 1.5rem clamp(1rem, 2.5vw, 2rem) 1.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.principles__t {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: -.012em;
  margin-bottom: .35rem;
}
.principles__d { font-size: .9375rem; margin: 0; }

/* ── Vier Säulen ─────────────────────────────────────────────────────── */

.pillars { margin-top: clamp(4.5rem, 9vw, 7rem); }
.pillars__h { max-width: 22ch; }
.pillars__list {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: 1px solid var(--rule-soft);
}
.pillars__list li {
  padding: 1.5rem clamp(1rem, 2vw, 1.75rem) 1.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.pillars__t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--text);
  letter-spacing: -.012em;
  margin-bottom: .35rem;
}
.pillars__d { font-size: .9375rem; margin: 0; }
.pillars .punch { max-width: 46rem; }

/* ── Wer wir sind ────────────────────────────────────────────────────── */

.people {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.person img {
  width: 100%;
  border-radius: 3px;
  filter: grayscale(1) contrast(1.02);
}
.person__role {
  font-size: .875rem;
  color: var(--dim);
  margin: 1.4rem 0 .5rem;
}
.person__name { margin-bottom: .75rem; }
.person p:last-child { font-size: .9375rem; }

/* Die Referenzzeile. Nie der Kundenname, immer das Thema mit KI-Bezug —
   Thomas' Vorgabe vom 12.08. Die Verbindung stellt der Leser selbst her. */
.refline {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.refline__h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.012em;
  color: var(--text);
  margin-bottom: 1.25rem;
}
.refline__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  border-top: 1px solid var(--rule-soft);
}
.refline__list li {
  padding: .85rem clamp(1rem, 2vw, 1.75rem) .85rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: .9375rem;
  color: var(--muted);
}
.refline__note { font-size: .9375rem; max-width: var(--measure); }

/* ── Gespräch ────────────────────────────────────────────────────────── */

.talk {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 55.99em) { .talk { grid-template-columns: minmax(0, 1fr); } }

.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.steps li {
  display: flex;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.steps__num {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--dim);
  padding-top: .2rem;
  flex: none;
}
.steps p { margin: 0; font-size: .9375rem; }

.contact__list { list-style: none; margin: 2rem 0 0; padding: 0; }
.contact__list li { margin-bottom: .6rem; font-size: .9375rem; display: flex; gap: .75rem; }
.contact__tag {
  font-size: .875rem;
  color: var(--dim);
  width: 4.75rem;
  flex: none;
}
.contact__list a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color .18s ease;
}
.contact__list a:hover { border-bottom-color: var(--text); }

/* Die leise Alternative für den, der noch nicht telefonieren will. */
.talk__alt {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  font-size: .9375rem;
  color: var(--dim);
  max-width: var(--measure);
}
.talk__alt a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color .18s ease, border-color .18s ease;
}
.talk__alt a:hover { color: var(--text); border-bottom-color: var(--text); }

.closer {
  margin-top: clamp(4rem, 9vw, 7rem);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--text);
  text-wrap: balance;
}

/* ── Fuß ─────────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
}
.foot__logo { width: clamp(9rem, 16vw, 12rem); height: auto; }
.foot__side { max-width: 30rem; }
.foot__line {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: -.012em;
  margin-bottom: 1rem;
}
.foot__nav { display: flex; gap: 1.5rem; font-size: .875rem; margin-bottom: .75rem; }
.foot__nav a { color: var(--muted); text-decoration: none; }
.foot__nav a:hover { color: var(--text); }
.foot__copy { font-size: .8125rem; color: var(--dim); margin: 0; }

/* ── Rechtsseiten ────────────────────────────────────────────────────── */

.legal { padding-block: clamp(4rem, 9vw, 7rem); }
.legal h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); margin-bottom: 2.5rem; }
.legal h2 { font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); margin-top: 3rem; margin-bottom: .9rem; }
.legal h3 { font-size: 1.0625rem; margin-top: 2rem; margin-bottom: .6rem; }
.legal p, .legal li { font-size: .9375rem; }
.legal ul { padding-left: 1.15rem; }
.legal li { margin-bottom: .4rem; }
.legal a { color: var(--text); }
.legal .note {
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 1.15rem 1.35rem;
  margin-bottom: 2.5rem;
  font-size: .875rem;
}

/* ── Check-Seite ──────────────────────────────────────────────────────
   Der KI-Readiness-Check auf check.html: vier Schirme, von denen immer
   genau einer sichtbar ist. Übernommen aus dem Repo KI-Readiness-Check
   (dort src/index.html), wo der Check zuerst als eigenständige Seite
   entstanden ist. Was beim Umzug geändert wurde, steht in
   docs/umsetzung-v1-entscheidungen.md, Abschnitt K.

   Alles hängt an `.check`. Der Check ist Gast auf dieser Seite: er fasst
   nichts ausserhalb seiner Schirme an, und Thomas' Seite bekommt ihn später
   als Kopie. Deshalb auch hier keine festen Farben, nur Tokens — und keine
   halbdurchsichtige Schrift, denn deren gemessener Kontrast ist nicht ihr
   tatsächlicher.
   ─────────────────────────────────────────────────────────────────────── */

/* Die Spalte ist schmaler als der Rest der Seite: ein Schirm ist eine
   Aufgabe, kein Band. Der Wert haengt am <body> dieser einen Seite und
   nicht an :root — dort wuerde er den One-Pager zerlegen. Kopf, Inhalt und
   Fuss lesen ihn gemeinsam: sonst stuende das Logo auf der 76rem-Kante und
   der Text auf einer anderen, und die Seite haette zwei Raster. */
body.page-check { --wrap: 46rem; }

main.check {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(3rem, 9vh, 6rem) var(--gutter) clamp(4rem, 10vh, 7rem);
}

.check .screen { display: none; }
.check .screen.is-active { display: block; animation: chk-rise .4s ease both; }

@keyframes chk-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Der Knopf ist hier meist ein <button>, nicht ein <a>: der zeigt von sich
   aus keinen Zeigefinger. Und .btn ist inline-flex, was `hidden` schlägt —
   ohne diese Zeile bliebe der Zurück-Knopf auf Frage 1 sichtbar. */
.check .btn { cursor: pointer; }
.check .btn[hidden] { display: none; }

/* Kleine Mono-Versalzeile. Auf der Startseite hat Thomas genau diesen Look
   am 12.08. verworfen und durch .kicker ersetzt — dort war er Pre-Headline.
   Hier ist er Label über einem Schirm, eine andere Rolle. Also mitgenommen,
   aber umbenannt, damit er nicht auf die Startseite zurückwandert. */
.chk-eyebrow {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 1.5rem;
}

/* ── Check · 1 · Einstieg ─────────────────────────────────────────────── */

.check .intro__claim {
  font-size: clamp(2.2rem, .9rem + 5.1vw, 3.8rem);
  line-height: .99;
  letter-spacing: -.032em;
}
.check .intro__claim span { color: var(--signal-fg); }
.check .intro__sub {
  max-width: 34rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  line-height: 1.6;
}

.check .facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.check .facts li {
  padding: 1.25rem 1rem 1.25rem 0;
  border-right: 1px solid var(--rule-soft);
}
.check .facts li:last-child { border-right: 0; }
.check .facts li:not(:first-child) { padding-left: 1rem; }
.check .facts b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.1;
}
.check .facts span {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.check .points {
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
}
.check .points li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .85rem;
  font-size: .9875rem;
  line-height: 1.6;
}
.check .points li::before {
  content: '';
  position: absolute;
  left: 0; top: .68em;
  width: 6px; height: 1px;
  background: var(--dim);
}

.check .intro__go { margin-top: clamp(2.5rem, 6vw, 3.25rem); }

/* ── Check · 2 · Fragen ───────────────────────────────────────────────── */

.check .progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .7rem;
}
.check .progress__track { height: 1px; background: var(--rule); }
.check .progress__fill {
  height: 1px;
  background: var(--signal);
  width: 12.5%;
  transition: width .35s cubic-bezier(.2, .7, .3, 1);
}

.check .q { margin-top: clamp(2.5rem, 7vw, 3.75rem); }
.check .q__num {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1rem;
}
.check .q__title {
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.6rem);
  letter-spacing: -.028em;
}
.check .q__de {
  display: block;
  margin-top: .55rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.check .q__ask {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.45;
  color: var(--text);
  letter-spacing: -.008em;
}
.check .q__desc {
  margin-top: 1.75rem;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 1px solid var(--rule);
  font-size: .9375rem;
  line-height: 1.7;
}

/* Schieberegler */

.check .scale { margin-top: clamp(2.75rem, 7vw, 3.5rem); }
.check .scale__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .1rem;
  margin-bottom: 1.5rem;
}
.check .scale__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 2rem + 4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--signal-fg);
  font-variant-numeric: tabular-nums;
}
.check .scale__of {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--dim);
}

.check input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 3px;
  margin: 0;
  border-radius: 2px;
  background: var(--rule);
  cursor: pointer;
}
.check input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--signal);
  cursor: grab;
  transition: transform .15s ease;
}
.check input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.check input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--signal);
  cursor: grab;
}
.check input[type=range]:focus-visible { outline-offset: 8px; }

.check .scale__poles {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  font-size: .8125rem;
  color: var(--muted);
}
.check .scale__poles span:last-child { text-align: right; }

/* Ohne opacity, anders als in der Quelle: --dim auf halber Deckkraft misst
   sich als 5,2:1 und liest sich als 2,4:1. Die Ziffern sind klein genug. */
.check .scale__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--dim);
}

.check .q__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(3rem, 8vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--rule-soft);
}

/* ── Check · 3 · Berechnung ───────────────────────────────────────────── */

.check .calc {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.check .calc__ring {
  width: 34px; height: 34px;
  border: 1px solid var(--rule);
  border-top-color: var(--signal);
  border-radius: 50%;
  animation: chk-spin .9s linear infinite;
  margin-bottom: 2rem;
}
@keyframes chk-spin { to { transform: rotate(360deg); } }
.check .calc__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text);
  letter-spacing: -.018em;
}
.check .calc__sub {
  margin-top: .6rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── Check · 4 · Ergebnis ─────────────────────────────────────────────── */

.check .result__head {
  padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
  border-bottom: 1px solid var(--rule-soft);
}
.check .result__score {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-top: 1.25rem;
}
.check .result__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4.5rem, 2rem + 12vw, 8rem);
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--signal-fg);
  font-variant-numeric: tabular-nums;
}
.check .result__of {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem);
  color: var(--dim);
}
.check .tier {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.75rem;
  padding: .5rem .95rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
/* Die Farbe des Punkts setzt das Skript — --tier-ready, --tier-mid oder
   --tier-risk. Sie ist die einzige Stelle, an der die Stufe Farbe trägt. */
.check .tier__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dim);
  flex: none;
}

.check .block { padding-block: clamp(2.75rem, 7vw, 4rem); }
.check .block + .block { border-top: 1px solid var(--rule-soft); }
.check .block__label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.75rem;
}

.check .interp {
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.1875rem);
  line-height: 1.6;
  color: var(--text);
  letter-spacing: -.008em;
  text-wrap: pretty;
}
.check .interp strong { font-weight: 600; color: var(--text); }
.check .interp em { font-style: italic; }
.check .interp__go { margin-top: 1.75rem; }

.check .radar { width: 100%; height: auto; display: block; }
.check .radar__grid { fill: none; stroke: var(--rule-soft); stroke-width: 1; }
.check .radar__axis { stroke: var(--rule-soft); stroke-width: 1; }
.check .radar__area { fill: var(--signal-wash); stroke: var(--signal); stroke-width: 1.5; stroke-linejoin: round; }
.check .radar__dot { fill: var(--signal); }
/* Die Schriftgröße kommt als Attribut aus dem Skript — sie hängt von der
   Bildschirmbreite ab. Hier keine font-size setzen, CSS würde sie schlagen. */
.check .radar__label {
  font-family: var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  fill: var(--muted);
}
.check .radar__ring-num {
  font-family: var(--font-mono);
  fill: var(--dim);
}

.check .bars { list-style: none; margin: 0; padding: 0; }
.check .bars li { padding: .95rem 0; border-bottom: 1px solid var(--rule-soft); }
.check .bars li:last-child { border-bottom: 0; }
.check .bar__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .6rem;
}
.check .bar__name {
  font-size: .9375rem;
  color: var(--text);
  letter-spacing: -.005em;
}
.check .bar__de {
  display: block;
  margin-top: .15rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.4;
}
.check .bar__val {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.check .bar__track { height: 2px; background: var(--rule-soft); }
.check .bar__fill {
  height: 2px;
  background: var(--signal);
  transition: width .7s cubic-bezier(.2, .7, .3, 1);
}
.check .bars li:not(.is-strong) .bar__fill { background: var(--dim); }

.check .cta {
  margin-top: clamp(3rem, 8vw, 4.5rem);
  padding: clamp(2.25rem, 6vw, 3.25rem);
  background: var(--ink-raise);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
}
.check .cta__title {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  letter-spacing: -.028em;
}
.check .cta__sub {
  margin-top: 1.25rem;
  max-width: 32rem;
  font-size: 1rem;
  line-height: 1.6;
}
.check .cta__go { margin-top: 2rem; }
.check .cta__list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Der Abbinder unter dem Ergebnis — nicht der Seitenfuss. Der heisst .foot
   und steht unter jedem Schirm. */
.chk-foot {
  margin-top: clamp(3rem, 8vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--rule-soft);
  font-size: .875rem;
  color: var(--dim);
}
.chk-foot button {
  margin-top: .75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.chk-foot button:hover { color: var(--text); }

/* ── Check · schmale Bildschirme ──────────────────────────────────────
   Auf dem Telefon muss eine Frage vollständig ins erste Fenster passen —
   Text, Regler und der Knopf zum Weiterklicken, ohne Scrollen. Dass der
   Seitenfuss darunter liegt und die Seite deshalb scrollt, ist gewollt.
   Dafür schrumpfen hier alle senkrechten Abstände. Der Fragebildschirm wird
   zusätzlich zu einer Spalte über die volle sichtbare Höhe, damit die
   Navigation auch bei ungewöhnlich langem Text am unteren Rand steht.
   Maßgeblich ist svh, nicht vh: svh rechnet die Browserleiste mit.

   Anders als in der Quelle wird --head-h hier NICHT verkleinert: der Kopf
   dieser Seite schrumpft auf schmalen Bildschirmen nicht, er bleibt bei
   4.25rem. Wer die Zeile zurückholt, rechnet unten 16px zu wenig ab, und
   der Weiter-Knopf rutscht auf kleinen Geräten unter die Kante.
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 34em) {
  main.check { padding: 1.25rem var(--gutter) 1.5rem; }

  /* Einstieg. Die drei Eckdaten bleiben nebeneinander — gestapelt kosten
     sie eine ganze Bildschirmreihe, ohne mehr zu sagen. */
  .chk-eyebrow { margin-bottom: 1rem; }
  .check .intro__claim { font-size: 2rem; }
  .check .intro__sub {
    margin-top: 1rem;
    font-size: .9375rem;
    line-height: 1.5;
  }
  .check .facts { margin-top: 1.4rem; }
  .check .facts li { padding: .8rem .5rem .8rem 0; }
  .check .facts li:not(:first-child) { padding-left: .5rem; }
  .check .facts b { font-size: 1.25rem; }
  .check .facts span { margin-top: .2rem; font-size: .625rem; letter-spacing: .08em; }
  .check .points { margin-top: 1.4rem; }
  .check .points li {
    margin-bottom: .5rem;
    padding-left: 1.1rem;
    font-size: .875rem;
    line-height: 1.5;
  }
  .check .points li::before { width: 5px; }
  .check .intro__go { margin-top: 1.5rem; }

  /* Fragebildschirm: eine Spalte über die volle sichtbare Höhe */
  .check #screen-quiz.is-active {
    display: flex;
    flex-direction: column;
    /* Kopfhöhe, die Polster von main und die Haarlinie unter dem Kopf. */
    min-height: calc(100svh - var(--head-h) - 2.75rem - 1px);
  }
  .check .q {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-top: 1.4rem;
  }
  .check .q__num { margin-bottom: .55rem; }
  .check .q__title { font-size: 1.6rem; letter-spacing: -.024em; }
  .check .q__de { margin-top: .35rem; font-size: .6875rem; }
  .check .q__ask {
    margin-top: .8rem;
    font-size: 1rem;
    line-height: 1.35;
  }
  .check .q__desc {
    margin-top: .95rem;
    padding-left: .9rem;
    font-size: .8125rem;
    line-height: 1.5;
  }

  /* Bleibt Platz übrig, verteilt er sich gleichmäßig um die Skala herum
     statt sich als Loch über den Knöpfen zu sammeln. Das Polster oben ist
     der Mindestabstand, wenn nichts übrig bleibt. */
  .check .scale {
    margin-block: auto;
    padding-top: 1.5rem;
  }
  .check .scale__value { margin-bottom: .8rem; }
  .check .scale__num { font-size: 2.75rem; }
  .check .scale__of { font-size: .875rem; }
  .check .scale__poles { margin-top: .7rem; font-size: .75rem; }
  .check .scale__ticks { margin-top: .3rem; }

  .check .q__nav {
    margin-top: auto;
    padding-top: 1.25rem;
    padding-bottom: .25rem;
    gap: .6rem;
  }
  .check .q__nav .btn { min-height: 2.75rem; padding-inline: 1.1rem; }
  .check #btn-next { flex: 1 1 auto; }

  /* Ergebnis darf scrollen — es ist ein Bericht, keine Eingabe. */
  .check .block { padding-block: 1.75rem; }
  .check .cta { margin-top: 2rem; padding: 1.5rem; }
  .chk-foot { margin-top: 2rem; padding-top: 1.5rem; }
}

/* Kleine Geräte mit niedrigem Fenster (etwa 360 x 640). Hier reicht der
   Zuschnitt oben nicht — die längste Frage bräuchte 685 px. Deshalb noch
   eine Stufe enger. */
@media (max-width: 34em) and (max-height: 41em) {
  .check .intro__claim { font-size: 1.75rem; }
  .check .intro__sub { margin-top: .8rem; font-size: .875rem; }
  .check .facts { margin-top: 1.1rem; }
  .check .facts li { padding-block: .65rem; }
  .check .points { margin-top: 1.1rem; }
  .check .points li { margin-bottom: .4rem; font-size: .8125rem; }
  .check .intro__go { margin-top: 1.2rem; }

  .check .q { margin-top: .8rem; }
  .check .q__num { margin-bottom: .4rem; }
  .check .q__title { font-size: 1.4rem; }
  .check .q__de { margin-top: .25rem; }
  .check .q__ask { margin-top: .55rem; font-size: .9375rem; line-height: 1.3; }
  .check .q__desc { margin-top: .65rem; font-size: .765625rem; line-height: 1.42; }
  .check .scale { padding-top: .9rem; }
  .check .scale__value { margin-bottom: .5rem; }
  .check .scale__num { font-size: 2.1rem; }
  .check .scale__poles { margin-top: .55rem; }
  .check .q__nav { padding-top: .9rem; }
}

/* ── Bewerbungsformular ───────────────────────────────────────────────
   vertriebsassistenz.html und vertriebsassistenz-schritt-2.html: der
   Nachbau eines Jotform Card Forms in der CI dieser Seite. Die Vorlage
   wurde vermessen; die Maße stehen in
   docs/umsetzung-v1-entscheidungen.md, Abschnitt N.

   Der Aufbau in einem Satz: alle Karten liegen als ein breiter Streifen
   nebeneinander, der beim Weiter um genau eine Kartenbreite nach links
   rückt — waagerecht 300 ms `ease`, senkrecht 300 ms `ease-in-out`, weil
   die Karte gleichzeitig neu eingemittet wird. Getrennte Zeitkurven
   heißt: zwei Elemente. `.bw__reihe` trägt die Waagerechte, `.bw__streifen`
   die Senkrechte.

   Ohne JavaScript greift keine dieser Regeln: dann stehen die Karten
   untereinander und die Seite ist ein gewöhnliches Formular. Alles, was
   den Streifen betrifft, hängt deshalb an `[data-js="an"]`.

   Schwarze Balken oben und unten sind keine Zier. Das Hintergrundfoto hat
   zwei helle Lichtbänder; kleine Schrift darüber wäre nicht mehr AA-fest,
   und der Prüflauf würde es nicht merken, weil er Bilder nicht sieht — er
   liest Hintergrundfarben. Kopf und Fuß stehen deshalb auf --ink, und das
   Foto trägt nur die Fläche dazwischen, auf der die Karte liegt.
   ─────────────────────────────────────────────────────────────────────── */

/* Der Streifen wird per Transform verschoben, nicht gescrollt: die Seite
   selbst steht still. */
html.bw-fest, html.bw-fest body { height: 100%; overflow: hidden; }

.bw {
  --bw-slot: 100%;          /* Breite einer Kartenspur, Anteil der Bühne */
  --bw-rand: 0%;            /* Vorlauf, damit die aktive Spur mittig steht */
  --bw-n: 0;                /* Nummer der aktiven Karte */
  --bw-mitte: 0px;          /* halbe Höhe der aktiven Karte, von JS gesetzt */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--ink);
  background-image: url("../img/beton-formular.jpg");
  background-image: image-set(url("../img/beton-formular.webp") type("image/webp"),
                              url("../img/beton-formular.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bw[data-js="an"] { height: 100dvh; min-height: 0; }

/* ── Kopf und Fuß: die beiden schwarzen Balken ───────────────────────── */

.bw__kopf {
  flex: 0 0 auto;
  background: var(--ink);
  padding: .85rem var(--gutter);
}
.bw__kopf .brand__mark { height: 1.6rem; }

.bw__fuss {
  flex: 0 0 auto;
  background: var(--ink);
  padding: 1rem var(--gutter) 1.15rem;
  text-align: center;
}
.bw__recht {
  margin: 0;
  font-size: .8125rem;
  color: var(--dim);
}
.bw__recht a { color: var(--muted); }
.bw__recht a:hover { color: var(--text); }
.bw__recht span { padding-inline: .5rem; }

/* ── Die Bühne ───────────────────────────────────────────────────────── */

.bw__buehne { flex: 1 1 auto; }

.bw[data-js="an"] .bw__buehne {
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.bw[data-js="an"] .bw__streifen {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(50% - var(--bw-mitte));
  transition: top .3s ease-in-out;
}
.bw[data-js="an"] .bw__reihe {
  display: flex;
  align-items: flex-start;
  transform: translateX(calc(var(--bw-rand) - var(--bw-n) * var(--bw-slot)));
  transition: transform .3s ease;
}

/* Ohne JavaScript: Karten untereinander, gewöhnliches Formular. */
.bw__reihe { padding-block: clamp(2rem, 6vw, 4rem); }
.bw-card + .bw-card { margin-top: 1.75rem; }

.bw[data-js="an"] .bw__reihe { padding-block: 0; }
.bw[data-js="an"] .bw-card + .bw-card { margin-top: 0; }

/* ── Die Karte ───────────────────────────────────────────────────────── */

.bw-card {
  flex: 0 0 var(--bw-slot);
  max-width: var(--bw-slot);
  padding-inline: clamp(1rem, 4vw, 3.375rem);
}
.bw[data-js="an"] .bw-card {
  opacity: 0;
  transition: opacity .15s ease, transform .3s ease;
}
.bw[data-js="an"] .bw-card.is-aktiv { opacity: 1; }

/* 52rem = 832 px, die weisse Textflaeche der Vorlage. Die Karte darf breiter
   werden als die Spalte des One-Pagers, aber nicht ueber die Buehne laufen:
   eine Optionszeile ueber 1300 px liest sich nicht mehr als Zeile. */
.bw-card__blatt {
  position: relative;
  max-width: 52rem;
  margin-inline: auto;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .55);
}

.bw-card__inhalt {
  padding: 1.7rem clamp(1.25rem, 3vw, 2.7rem) 1.4rem;
}
/* Zu hohe Karten scrollen innerhalb der weißen Fläche, damit die Leiste
   sichtbar bleibt. Die Höhe der Bühne setzt JS — sie ist exakt, `100dvh`
   wäre es nicht: Kopf und Fuß liegen darüber und darunter. */
.bw[data-js="an"] .bw-card__inhalt {
  max-height: calc(var(--bw-hoehe, 100dvh) - 5.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bw[data-js="an"] .bw-hero {
  max-height: calc(var(--bw-hoehe, 100dvh) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bw-card__frage {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + .55vw, 1.4rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--text);
  margin: 0 0 .35rem;
}
.bw-card__frage .bw-pflicht { color: var(--signal-fg); }
.bw-card__hinweis {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 1.1rem;
}
.bw-card__frage + .bw-felder,
.bw-card__frage + .bw-optionen { margin-top: 1.1rem; }

/* ── Textkarten ──────────────────────────────────────────────────────── */

.bw-text { color: var(--muted); }
.bw-text h2 {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  line-height: 1.25;
  margin-bottom: .9rem;
}
.bw-text h3 {
  font-size: 1.0625rem;
  margin-top: 1.6rem;
  margin-bottom: .5rem;
}
.bw-text p { font-size: .9375rem; line-height: 1.62; }
.bw-text ul { margin: 0 0 1.15em; padding-left: 1.15rem; }
.bw-text li { font-size: .9375rem; line-height: 1.6; margin-bottom: .45rem; }
.bw-text strong { color: var(--text); font-weight: 600; }
.bw-text a { color: var(--text); }
.bw-luecke {
  color: var(--signal-fg);
  font-family: var(--font-mono);
  font-size: .8125rem;
}

/* Die fünf Punkte des Bewerbungsvideos. Nummer und Text stehen zusammen,
   damit die Karte lesbar bleibt, wenn sie scrollt. */
.bw-punkte { list-style: none; margin: 1.2rem 0 0; padding: 0; counter-reset: bw-punkt; }
.bw-punkte li {
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 1.1rem;
  font-size: .9375rem;
  line-height: 1.6;
}
.bw-punkte li::before {
  counter-increment: bw-punkt;
  content: counter(bw-punkt) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--signal-fg);
}
.bw-punkte b { color: var(--text); font-weight: 600; }

.bw-kopieren {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  margin-top: .4rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  font: 500 .875rem/1.2 var(--font-text);
  cursor: pointer;
}
.bw-kopieren:hover { border-color: var(--text); }

/* ── Felder ──────────────────────────────────────────────────────────── */

.bw-felder { display: grid; gap: .75rem; }
.bw-felder--zwei { grid-template-columns: 1fr 1fr; }
@media (max-width: 34em) { .bw-felder--zwei { grid-template-columns: 1fr; } }

.bw-feld { display: block; }
.bw-feld__label {
  display: block;
  font-size: .75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--dim);
  margin-bottom: .35rem;
}
.bw-feld input,
.bw-feld textarea {
  width: 100%;
  padding: .6rem .85rem;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  background: var(--ink);
  color: var(--text);
  font: 400 1rem/1.5 var(--font-text);
}
.bw-feld input { min-height: 2.95rem; }
.bw-feld textarea { min-height: 6.5rem; resize: vertical; }
.bw-feld input::placeholder,
.bw-feld textarea::placeholder { color: var(--dim); }
.bw-feld input:focus,
.bw-feld textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 2px var(--signal-wash);
}

.bw-gruppe { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.bw-gruppe > legend { padding: 0; }

/* ── Optionen ────────────────────────────────────────────────────────── */

.bw-optionen { display: grid; gap: .4rem; margin: 0; padding: 0; border: 0; }
.bw-option {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .7rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
}
.bw-option:hover { border-color: var(--rule-strong); }
.bw-option input { margin: .2rem 0 0; accent-color: var(--signal); flex: 0 0 auto; }
.bw-option.is-gewaehlt { border-color: var(--signal); }

.bw-extra { margin-top: .5rem; }
.bw-extra[hidden] { display: none; }

/* ── Fehlermeldung ───────────────────────────────────────────────────── */

.bw-fehler {
  margin: .6rem 0 0;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--fehler);
}
.bw-fehler[hidden] { display: none; }

/* ── Die Leiste unter der Karte ──────────────────────────────────────── */

.bw-leiste {
  display: flex;
  background: var(--ink);
}
.bw-leiste__knopf {
  flex: 1 1 50%;
  min-height: 3.625rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 600 .9375rem/1.2 var(--font-display);
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.bw-leiste__knopf:hover { color: var(--text); }
/* Orange als Block in der rechten Hälfte, nicht als ganze Leiste: 832 x 58
   px durchgehend orange wären die größte orange Fläche der Seite.
   Die Schrift ist --ink und nicht weiß: Weiß auf #F16304 erreicht 3,22:1
   und fiele unter WCAG AA, #121212 liegt bei 5,82:1. Dieselbe Regel wie
   bei .btn--signal auf der Startseite. */
.bw-leiste__knopf--weiter {
  background: var(--signal);
  color: var(--ink);
}
.bw-leiste__knopf--weiter:hover { background: var(--signal-hi); color: var(--ink); }
.bw-leiste__knopf--allein { flex: 1 1 100%; }

/* Der Hinweis „Enter drückt weiter". Erscheint erst, wenn das Feld gefüllt
   ist — vorher wäre er eine Anleitung ins Leere. */
.bw-enter {
  position: absolute;
  right: 1rem;
  bottom: 4rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--ink);
  padding: .25rem .55rem;
  border-radius: 2px;
  pointer-events: none;
}
.bw-enter[hidden] { display: none; }

/* ── Willkommen und Abbinder ─────────────────────────────────────────── */

/* Die Maske hinter dem Willkommenstext. rgba(0,0,0,.55) ist keine
   Geschmacksfrage: selbst wenn an der hellsten Stelle des Fotos reines
   Weiss laege, blieben weisse Schrift und Maske bei 4,74:1 und damit ueber
   WCAG AA. Der Prueflauf rechnet das an der tatsaechlichen Vorlage nach —
   er sieht Bilder sonst nicht. */
.bw-hero {
  max-width: 48rem;
  margin-inline: auto;
  background: rgba(0, 0, 0, .55);
  border-radius: 6px;
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.bw-hero__titel {
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.5rem);
  line-height: 1.08;
  color: #FFFFFF;
  margin-bottom: 1rem;
}
.bw-hero__sub {
  max-width: 34rem;
  margin-inline: auto;
  font-size: clamp(1rem, .95rem + .45vw, 1.2rem);
  line-height: 1.55;
  color: #FFFFFF;
}
.bw-hero__go { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* ── Der geschlossene Bogen ──────────────────────────────────────────────
   Formular 1 nimmt seit dem 27.08.2026 nichts mehr entgegen: die Seite
   traegt nur noch eine Meldung. Kein Skript, kein Streifen, keine Karten —
   deshalb greift keine der `[data-js="an"]`-Regeln, und die eine Karte
   braucht ihre Mitte selbst.
   ─────────────────────────────────────────────────────────────────────── */

.bw__buehne--zu {
  display: grid;
  place-items: center;
  padding-block: clamp(2rem, 6vw, 4rem);
}

/* Das Zeichen ueber der Meldung. Orange als Flaeche nur als Hauch
   (--signal-wash), die Form selbst als Strich — orange Flaechen bleiben
   den Knoepfen vorbehalten. Farben stehen hier und nicht als
   Praesentationsattribut im SVG: `var()` wirkt dort nicht. */
.bw-zeichen {
  display: block;
  margin: 0 auto clamp(1.1rem, 3vw, 1.5rem);
  color: var(--signal);
}
.bw-zeichen__grund { fill: var(--signal-wash); }
.bw-zeichen__strich {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.bw-zeichen__punkt { fill: currentColor; }
/* Voll über die Breite des Textblocks, wie in der Vorlage. */
.bw-start {
  display: block;
  width: 100%;
  min-height: 3.5rem;
  border: 0;
  border-radius: 0;
  background: var(--signal);
  color: var(--ink);
  font: 600 1.0625rem/1.2 var(--font-display);
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease;
}
.bw-start:hover { background: var(--signal-hi); }

/* ── Fortschritt ─────────────────────────────────────────────────────── */

.bw__fortschritt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin-bottom: .9rem;
}
.bw__fortschritt[hidden] { display: none; }
.bw__spur { display: flex; align-items: center; gap: 0; }
.bw__punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot);
  transition: background-color .25s ease, transform .25s ease;
}
.bw__punkt.is-fertig { background: var(--signal); }
.bw__punkt.is-aktiv { background: var(--signal); transform: scale(1.7); }
.bw__strich {
  width: clamp(12px, 3vw, 26px);
  height: 1px;
  background: var(--rule);
}
.bw__strich.is-fertig { background: var(--signal); }
.bw__zaehler {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── Honigtopf ───────────────────────────────────────────────────────── */

/* Nicht display:none — das lesen die besseren Bots aus und lassen das Feld
   in Ruhe. Aus dem Blickfeld geschoben und aus dem Tabpfad genommen. */
.bw-honig {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Ohne JavaScript ─────────────────────────────────────────────────── */

.bw__ohne-js { padding: 0 clamp(1rem, 4vw, 3.375rem) clamp(2rem, 6vw, 4rem); }
.bw[data-js="an"] .bw__ohne-js { display: none; }

/* ── Schmale Bildschirme ─────────────────────────────────────────────
   Die Vorlage wechselt hier das Muster: die Karte füllt fast den Schirm,
   die Nachbarn lugen an den Rändern hervor und stehen kleiner. Dafür ist
   eine Kartenspur schmaler als die Bühne, und der Streifen bekommt einen
   Vorlauf, damit die aktive Spur trotzdem mittig steht. ──────────────── */

@media (max-width: 47.99em) {
  .bw[data-js="an"] { --bw-slot: 84%; --bw-rand: 8%; }
  .bw[data-js="an"] .bw-card:not(.is-aktiv) { transform: scale(.86); }
  .bw-card { padding-inline: .5rem; }
  .bw-card__inhalt { padding: 1.35rem 1.15rem 1.15rem; }
  .bw-leiste__knopf { min-height: 3.25rem; font-size: .875rem; letter-spacing: .1em; }
  .bw-enter { display: none; }
  .bw__fuss { padding: .8rem 1rem 1rem; }
}


/* ── Bewegung nur dort, wo sie etwas bedeutet ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .rail__fill { display: none; }
  .rail__list { border-left-color: var(--rule); }
  @media (min-width: 88em) {
    .rail { opacity: 1; visibility: visible; }
  }
}