/* =========================================================================
   styles.css  --  Struktur und Komponenten von wegweiserbalance.ch.
   Liest nur Tokens aus theme.css. Regeln: agents/DESIGN.md (Raster,
   Fold, Typografie, Bewegung), agents/PERFORMANCE.md.
   Breakpoints: 48rem (Tablet), 64rem (Desktop), 75rem (breit).
   Bewegung (Abschnitt 18): Auftritte beim Laden rein in CSS; Auftritte beim
   Scrollen ueber [data-inview] + .is-in (main.js), Ausgangszustand nur mit
   .js und nur ohne Reduced-Motion-Wunsch, sonst ist alles sofort da.
   ========================================================================= */

/* ---------- 1. Basis ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1.5rem); }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
figure { margin: 0; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
p, li, blockquote, dd { max-inline-size: var(--measure); text-wrap: pretty; }
p, li, dd { hyphens: auto; }

h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: -0.015em;
  text-wrap: balance;
  hyphens: manual;
}
.h2 { font-size: var(--fs-h2); font-weight: 380; letter-spacing: -0.02em; }
.h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.005em; line-height: 1.25; }
.lead { font-size: var(--fs-h3); line-height: 1.4; color: var(--ink-2); max-inline-size: 34ch; }
.note { font-size: var(--fs-small); color: var(--muted); }
.kicker {
  margin: 0 0 1.25rem;
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

a {
  color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out), text-underline-offset var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; text-underline-offset: 0.28em; }
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.icon { display: inline-block; width: 1.15rem; height: 1.15rem; flex: none; }
/* Fenster fuer den Pfeil: er laeuft beim Hover rechts hinaus und links wieder herein. */
.arrow { display: inline-flex; flex: none; overflow: clip; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.75rem 1rem; background: var(--ink); color: var(--bg); border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 2. Raster und Sections (agents/DESIGN.md 5) ------------------ */
.page {
  width: min(100% - 2 * var(--gutter), 80rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.page > * { grid-column: 1 / -1; min-width: 0; }

.section { padding-block: var(--pad-base) calc(var(--pad-base) * 0.7); }
.section--luft { padding-block: var(--pad-luft) calc(var(--pad-luft) * 0.6); }
.section--eng { padding-block: var(--pad-eng); }
.section--tint { background: var(--surface); }

/* ---------- 3. Buttons und Links ----------------------------------------
   Hover: eine dunklere Flaeche wischt von links herein (::before), der Pfeil
   laeuft einmal durch sein Fenster. Nur Transform, nur mit Zeiger. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.8rem 1.35rem;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--brand); color: var(--on-brand);
  font-size: var(--fs-body); font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-instant) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--brand-hover);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--sm { min-height: 2.75rem; padding: 0.55rem 1rem; font-size: var(--fs-small); }
.btn--wide { width: 100%; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--field-line); }
.btn--ghost::before { background: var(--surface); }
.btn--light { background: var(--on-dark); color: var(--brand); }
.btn--light::before { background: var(--accent-dark-hover); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { text-decoration: none; }
  .btn:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
  .btn--ghost:hover { border-color: var(--ink); }
  .btn:hover .arrow .icon { animation: arrow-through 560ms var(--ease-out) both; }
}

.link-arrow {
  display: inline-flex; align-items: baseline; gap: 0.45rem; padding-block: 0.3rem 0.35rem;
  color: var(--ink); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out);
}
.link-arrow::after { content: "\2192"; display: inline-block; transition: transform var(--dur-slow) var(--ease-settle); }
.link-arrow--light { color: var(--accent-dark); }
.link-icon { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); font-weight: 500; text-decoration: none; }
.link-icon span, .link-icon { text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { background-size: 0% 1px; background-position: 100% 100%; }
  .link-arrow:hover::after { transform: translateX(6px); }
  .link-icon:hover { text-decoration: underline; color: var(--brand); }
  .link-icon:hover .icon { animation: nudge 520ms var(--ease-settle); }
}

/* ---------- 4. Header und Menue ---------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  background: rgb(var(--scrim) / 0.92);
  box-shadow: 0 1px 0 var(--line);
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  view-transition-name: site-header;
}
@supports (backdrop-filter: blur(14px)) {
  .header { background: rgb(var(--scrim) / 0.84); backdrop-filter: blur(14px); }
}
.header--over:not(.is-stuck) { background: transparent; box-shadow: none; backdrop-filter: none; }
.header__inner {
  width: min(100% - 2 * var(--gutter), 80rem); height: 100%; margin-inline: auto;
  display: flex; align-items: center; gap: 1.25rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: none; }
/* Huelle dreht main.js mit dem Scrolltempo (--swing), das Bild dreht CSS beim ersten Besuch. */
.brand__compass { display: block; flex: none; transform: rotate(var(--swing, 0deg)); }
.brand__mark { width: 2.4rem; height: 2.4rem; }
/* Helle Varianten nur ueber dem dunklen Kopf der Unterseiten, bis gescrollt wird. */
.brand__mark--light, .brand__word--light { display: none; }
.header--dark:not(.is-stuck) .brand__mark:not(.brand__mark--light),
.header--dark:not(.is-stuck) .brand__word:not(.brand__word--light) { display: none; }
.header--dark:not(.is-stuck) .brand__mark--light,
.header--dark:not(.is-stuck) .brand__word--light { display: block; }
.header--dark:not(.is-stuck) .nav__link,
.header--dark:not(.is-stuck) .header__phone { color: var(--on-dark); }
.header--dark:not(.is-stuck) .nav__link[aria-current="page"] { color: var(--accent-dark); }
.header--dark:not(.is-stuck) .burger { border-color: var(--line-dark); }
.header--dark:not(.is-stuck) .burger span { background: var(--on-dark); }
.header--dark:not(.is-stuck) .header__cta { background: var(--on-dark); color: var(--brand); }
.header--dark:not(.is-stuck) .header__cta::before { background: var(--accent-dark-hover); }
.header--dark:not(.is-stuck) :focus-visible { outline-color: var(--on-dark); }
.brand__word { width: auto; height: 3.1rem; }
@media (max-width: 47.99rem) {
  .brand__mark { width: 2rem; height: 2rem; }
  .brand__word { height: 2.6rem; }
}

.nav { display: none; margin-left: auto; }
.nav__list { display: flex; gap: clamp(1rem, 1.8vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-block; padding-block: 0.4rem;
  color: var(--ink); font-size: var(--fs-small); font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__link[aria-current="page"] { background-size: 100% 2px; color: var(--brand); }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { background-size: 100% 1px; }
}

.header__tools { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.header__phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-width: 2.75rem; min-height: 2.75rem;
  color: var(--ink); font-size: var(--fs-small); font-weight: 600; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .header__phone:hover .icon { animation: ring 600ms var(--ease-out); }
}
.header__phone-nr { display: none; }
.header__cta { display: none; }
.header__cta-long { display: none; }

.burger {
  display: inline-grid; place-content: center; gap: 6px;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--field-line); border-radius: var(--radius);
  background: transparent; cursor: pointer;
}
.burger span { display: block; width: 1.15rem; height: 1.5px; background: var(--ink); }

@media (min-width: 64rem) {
  .nav { display: block; }
  .header__tools { margin-left: 0.5rem; }
  .burger { display: none; }
  .header__cta { display: inline-flex; }
}
@media (min-width: 75rem) {
  .header__phone-nr { display: inline; }
  .header__cta-long { display: inline; }
  .header__cta-short { display: none; }
}

/* Menue als Dialog (DESIGN.md 5), Ein- und Ausblenden mit @starting-style.
   Die Links kommen kurz gestaffelt (Abschnitt 18). */
.menu {
  width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0;
  padding: 0 var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
  border: 0; background: var(--bg); color: var(--ink);
  opacity: 1; transform: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
    overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete;
}
.menu:not([open]) { opacity: 0; transform: translateY(-0.5rem); }
@starting-style { .menu[open] { opacity: 0; transform: translateY(-0.5rem); } }
.menu::backdrop { background: rgb(38 45 31 / 0.35); }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.menu__close {
  display: inline-grid; place-content: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--field-line); border-radius: var(--radius); background: transparent; cursor: pointer;
}
.menu__list { list-style: none; margin: 1.5rem 0 2rem; padding: 0; border-top: 1px solid var(--line); }
.menu__list li { border-bottom: 1px solid var(--line); }
.menu__link { display: block; padding-block: 1rem; color: var(--ink); font-size: var(--fs-h3); font-weight: 500; text-decoration: none; }
.menu__link[aria-current="page"] { color: var(--brand); }
.menu__foot { display: grid; gap: 1rem; }
.menu__phone { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; color: var(--ink); font-weight: 600; text-decoration: none; }

/* ---------- 5. Hero: Melanie randlos, Text auf der Raumseite ------------- */
.hero { position: relative; display: flex; flex-direction: column; background: var(--bg); }
/* overflow: clip statt hidden: hidden machte .hero__media zum Scroll-Container, an dem die
   view()-Zeitleiste des Bildes haengen blieb (motion-check 2026-09-24). */
.hero__media { position: relative; height: 56svh; min-height: 19rem; overflow: clip; }
/* Verlauf oben aus dem Seitengrund: Wortmarke und Navigation bleiben ueber dem Foto
   lesbar, auch wenn sie auf dunklem Haar liegen (Design-Review 2026-09-23). */
.hero__media::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: 1; pointer-events: none;
  height: calc(var(--header-h) + 3rem);
  background: linear-gradient(rgb(var(--scrim) / 0.85), rgb(var(--scrim) / 0));
}
.hero__media picture { width: 100%; height: 100%; transform-origin: 30% 30%; }
/* Hochformat 1086x1448 (Schreibtisch, Ticket 4): der Ausschnitt haelt Kopf und Schultern im Bild. */
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform-origin: 50% 30%; }
.hero__page { padding-block: 1.75rem 2.75rem; }
.hero__title {
  font-size: var(--fs-hero);
  font-weight: 360;
  line-height: var(--lh-display);
  letter-spacing: -0.035em;
  hyphens: manual;
}
.hero__lead { margin: 1.25rem 0 0; font-size: var(--fs-h3); line-height: 1.4; color: var(--ink-2); max-inline-size: 30ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
/* Handy: Hochformat-Foto 1086x1448, Kopf im Quellbild von Dutt y 100 bis Kinn y 700.
   Bildhoehe 96vw: der cover-Ausschnitt zeigt rund 1040 Quellzeilen, Kopf und Schultern
   ganz (User 2026-10-02: «Ihr bild ist noch auf mobile abgeschnitten»; 2026-09-24: «man
   sieht ihr gesicht fast nicht»). Ausschnitt oben (0 Prozent, gemessen 2026-10-10): die
   Stirn liegt 30px unter der Kopfzeile statt 18px bei 8 Prozent, und der Dutt liegt nicht
   mehr unter der Handschrift «Balance» der Wortmarke. Lead in Textgroesse, damit der
   Hauptknopf nahe am ersten Bild bleibt (anti-ai Review 2026-09-24). */
@media (max-width: 47.99rem) {
  .hero__media { height: min(96vw, 62svh); min-height: 15rem; }
  .hero__img { object-position: 50% 0%; }
  .hero__page { padding-block: 1.25rem 2.25rem; }
  .hero__lead { margin-top: 1rem; font-size: var(--fs-body); line-height: var(--lh-text); }
  .hero__actions { margin-top: 1.5rem; }
}

/* Zeilenfenster fuer aufsteigende Titel: Padding haelt Umlaute und Unterlaengen
   im Fenster, der negative Rand gleicht es im Satz aus. */
.rise { display: block; overflow: clip; padding-block: 0.1em 0.16em; margin-block: -0.1em -0.16em; }
.rise__in { display: block; }

/* Ab 48rem: Flaeche bis an alle Kanten, Text rechts auf dem ruhigen Raum,
   Verlauf aus dem Seitengrund mit Richtung (DESIGN.md 2). Das Foto ist hochkant:
   es steht links und laeuft nach rechts weich in die gemessene Wandfarbe aus,
   so liest sich Foto und Flaeche als ein Raum. Gilt ohne Bedingung ans
   Seitenverhaeltnis: vorher zog die Stapel-Ansicht das Hochformat bei 800 bis 1300px
   Breite auf volle Breite, sichtbar blieb Stirn bis Nase (User 2026-09-24).
   Hoehe hoechstens 90vw: bei hohen Fenstern bleibt das Foto fast unbeschnitten. */
@media (min-width: 48rem) {
  .hero { display: grid; align-items: center; min-height: min(100svh, 90vw); }
  .hero__media { position: absolute; inset: 0; height: auto; background: var(--hero-wall); }
  /* Breite an die Hoehe gebunden: breite Bildschirme rechnen das Foto nicht hoch.
     Der Uebergang beginnt nach dem Gesicht (Brillenbuegel bei Quell-x 690, Maske ab
     700 bis 717 je nach Breite) und endet bei 78 statt 84 Prozent: rechts vom Kopf
     stehen Regal und Pflanze, mit dem laengeren Auslauf standen sie als breiter heller
     Schleier neben dem Gesicht. Auslauf endet in allen Breiten vor der Textspalte
     (gemessen 768 bis 1920, Ticket 4, 2026-10-10). */
  .hero__media picture {
    display: block; width: min(50%, 80svh);
    -webkit-mask-image: linear-gradient(90deg, #000 66%, transparent 78%);
    mask-image: linear-gradient(90deg, #000 66%, transparent 78%);
  }
  .hero__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg,
      rgb(var(--scrim) / 0.12) 0%, rgb(var(--scrim) / 0.12) 40%,
      rgb(var(--scrim) / 0.62) 58%, rgb(var(--scrim) / 0.84) 100%);
  }
  /* Seitlich 60 Prozent: wird das Foto schmal beschnitten (768 bis 1100px), rueckt das
     Gesicht nach links und bleibt ganz vor der Maske; bei 35 Prozent lag der rechte
     Brillenbuegel im Auslauf. Links bleibt Luft vor dem Haar (Quell-x 170 zu 205). */
  .hero__img { object-position: 60% 16%; }
  .hero__page { position: relative; z-index: 1; padding-block: calc(var(--header-h) + 2.5rem) 3.5rem; }
  .hero__text { grid-column: 6 / span 7; }
}
@media (min-width: 75rem) {
  .hero__text { grid-column: 7 / span 6; }
}
/* Sehr breit: eine Spalte mehr, sonst bricht der Titel in 6rem als «Jugend-/coaching» um;
   das Foto ist bei dieser Breite laengst ausgelaufen. */
@media (min-width: 100rem) {
  .hero__text { grid-column: 6 / span 7; }
}

/* ---------- 6. Wegweiser: Pfosten mit Kompass und Pfeiltafeln -----------
   Schmal: Pfosten links, alle Tafeln nach rechts. Ab 64rem: Pfosten mittig,
   Tafeln abwechselnd nach rechts und links wie ein Wanderweg-Wegweiser. */
/* Tafeln ragen beim Hover und in der Feder kurz ueber ihre Breite hinaus;
   die Section schneidet an der Bildschirmkante ab, damit nichts seitlich scrollt. */
.wegweiser { overflow-x: clip; }
.wegweiser__page { row-gap: 3rem; align-items: start; }
.wegweiser__text .lead { margin-top: 1.25rem; }
.wegweiser__privacy { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1.5rem; color: var(--ink-2); }
.wegweiser__privacy .icon { margin-top: 0.2em; color: var(--brand); }
.wegweiser__text .note { margin-top: 1rem; }
@media (min-width: 64rem) {
  .wegweiser__text { grid-column: 1 / span 4; padding-top: 4.5rem; }
  .wegweiser__post { grid-column: 5 / span 8; }
  .wegweiser--overview .wegweiser__post { grid-column: 1 / span 8; grid-row: 1; }
  .wegweiser--overview .wegweiser__text { grid-column: 9 / span 4; grid-row: 1; padding-top: 0; }
}

.signpost { position: relative; padding: 0 0 2.5rem 1.4rem; }
.signpost__post {
  position: absolute; left: calc(1.4rem - 3px); top: 1.75rem; bottom: 0; width: 6px;
  border-radius: 3px 3px 0 0; background: var(--brand); transform-origin: 50% 100%;
}
/* Kappe: der Kompass aus dem Logo. Die Nadel-Huelle dreht sich zur Tafel unter
   dem Zeiger (--needle aus main.js) und pendelt dabei aus. */
.signpost__cap {
  position: relative; z-index: 2; display: block; width: 3.75rem; height: 3.75rem;
  margin-left: -1.875rem; padding: 0.4rem; border-radius: 50%;
  background: var(--bg); box-shadow: 0 0 0 2px var(--brand);
}
.signpost__needle { position: relative; display: block; transform: rotate(var(--needle, 0deg)); transition: transform var(--dur-swing) var(--ease-swing); }
.signpost__needle img { width: 100%; height: auto; }
/* Richtungsmarke am Ring: zeigt in Ruhe nach Norden, sonst auf die Tafel. */
.signpost__needle::after {
  content: ""; position: absolute; left: 50%; top: -1.15rem; margin-left: -0.45rem;
  border: 0.45rem solid transparent; border-top-width: 0; border-bottom: 0.8rem solid var(--brand);
}
.signpost__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.signpost__item { position: relative; z-index: 1; max-inline-size: none; }
@media (min-width: 48rem) {
  .signpost__item:nth-child(1) { width: 96%; }
  .signpost__item:nth-child(2) { width: 84%; }
  .signpost__item:nth-child(3) { width: 90%; }
  .signpost__item:nth-child(4) { width: 100%; }
}

.sign {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  padding: 1rem 3.4rem 1.05rem 1.4rem;
  background: var(--brand); color: var(--on-dark); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 1.75rem) 0, 100% 50%, calc(100% - 1.75rem) 100%, 0 100%);
  /* Unterkante wie die Dicke einer Tafel. */
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.16);
  transition: transform var(--dur-slow) var(--ease-settle), background-color var(--dur-fast) var(--ease-out);
}
.sign__label { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
.sign__topics { font-size: var(--fs-small); color: var(--on-dark-2); }
.sign:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent-dark); }
@media (hover: hover) and (pointer: fine) {
  .sign:hover { transform: translateX(0.6rem); background: var(--brand-hover); }
}
.sign:active { transform: translateX(0.3rem) scale(0.99); }
@media (max-width: 29.99rem) {
  .sign { padding-right: 2.6rem; }
}

@media (min-width: 64rem) {
  .signpost { padding-left: 0; }
  .signpost__post { left: calc(50% - 4px); width: 8px; }
  .signpost__cap { margin-inline: auto; }
  .signpost__list { margin-top: 1.5rem; gap: 1rem; }
  .signpost__item, .signpost__item:nth-child(n) { width: 54%; }
  .signpost__item--right { margin-left: calc(50% - 0.6rem); }
  .signpost__item--left { margin-left: calc(50% + 0.6rem - 54%); }
  .signpost__item--left .sign {
    padding: 1rem 1.4rem 1.05rem 3.4rem; text-align: right;
    clip-path: polygon(1.75rem 0, 100% 0, 100% 100%, 1.75rem 100%, 0 50%);
  }
}
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  .signpost__item--left .sign:hover { transform: translateX(-0.6rem); }
}

/* ---------- 7. Geschichte: dunkle Vollflaeche mit Bild ------------------ */
.story { background: var(--deep); color: var(--on-dark-2); padding-block: var(--pad-luft) var(--pad-base); }
.story--compact { padding-block: var(--pad-base) calc(var(--pad-base) * 0.8); }
/* Wendepunkt: kurze Section auf derselben dunklen Flaeche, der Satz in H1-Groesse
   als zweite Stufe der Seite (Salbei auf deep, Kontrast 8.7). */
.turn { margin-top: -1px; padding-block: 0 var(--pad-base); background: var(--deep); }
.turn__line {
  margin: 0; max-inline-size: none;
  font-size: var(--fs-h1); font-weight: 360; line-height: var(--lh-display); letter-spacing: -0.03em;
  color: var(--accent-dark); hyphens: manual;
}
@media (min-width: 64rem) { .turn__line { grid-column: 2 / span 11; } }
.story__page { row-gap: 2.5rem; align-items: center; }
.story__media { overflow: clip; border-radius: var(--radius-img); }
.story__img { width: 100%; border-radius: var(--radius-img); }
@media (max-width: 47.99rem) {
  .story__img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 72%; }
}
.story__title { color: var(--on-dark); margin-bottom: 1.5rem; }
.story__subtitle { color: var(--on-dark); margin: 2.5rem 0 0.5rem; }
.story__text p { color: var(--on-dark-2); }
.story__text .link-arrow { margin-top: 1.25rem; }
.story :focus-visible { outline-color: var(--accent-dark); }
@media (min-width: 48rem) {
  .story__media { grid-column: 1 / span 5; }
  .story__text { grid-column: 7 / span 6; }
}
@media (min-width: 64rem) {
  .story__media { grid-column: 1 / span 5; }
  .story__text { grid-column: 7 / span 6; }
}

/* ---------- 8. Angebot: drei Wege mit Preis in der Zeile ----------------
   Ganze Zeile klickbar (Link im Titel, ::after deckt die Zeile). Hover und
   Tastaturfokus: die Zeile laeuft von unten dunkel voll. */
.offers__page { row-gap: 2rem; }
.offers__head { display: grid; gap: 0.6rem; }
.offers__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.005em; line-height: 1.25; }
.offers__free { margin: 0; font-weight: 600; color: var(--brand); }
.offers__list { --bleed: 0rem; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.offer {
  position: relative; isolation: isolate; max-inline-size: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main go" "price price";
  gap: 1rem 1.5rem; align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.offer::before {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--bleed)); z-index: -1;
  background: var(--deep); border-radius: var(--radius);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* Trennlinie als eigenes Element, damit sie sich beim Auftritt zeichnen kann. */
.offer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line); transform-origin: 0 50%;
}
.offer__main { grid-area: main; }
.offer__title a {
  color: var(--ink); text-decoration: none;
  font-size: var(--fs-h2); font-weight: 380; line-height: 1.12; letter-spacing: -0.02em;
  transition: color var(--dur-fast) var(--ease-out);
}
.offer__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.offer__title a:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 6px; border-radius: 2px; }
.offer__text { margin: 0.6rem 0 0; color: var(--ink-2); transition: color var(--dur-fast) var(--ease-out); }
.offer__price { grid-area: price; margin: 0; }
.offer__amount { display: block; font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink); transition: color var(--dur-fast) var(--ease-out); }
.offer__meta { display: block; font-size: var(--fs-small); color: var(--muted); transition: color var(--dur-fast) var(--ease-out); }
.offer__go {
  grid-area: go; display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border-radius: 50%; box-shadow: inset 0 0 0 1px var(--field-line); color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* Tastaturfokus: die ganze Zeile wird dunkel, dazu ein heller Ring um den Titel
   (Salbei auf deep 8.7:1). */
.offer:has(a:focus-visible)::before { transform: scaleY(1); }
.offer:has(a:focus-visible) .offer__title a, .offer:has(a:focus-visible) .offer__amount { color: var(--on-dark); }
.offer:has(a:focus-visible) .offer__text, .offer:has(a:focus-visible) .offer__meta { color: var(--on-dark-2); }
.offer:has(a:focus-visible) .offer__go { background: var(--accent-dark); color: var(--deep); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .offer:hover::before { transform: scaleY(1); }
  .offer:hover .offer__title a, .offer:hover .offer__amount { color: var(--on-dark); }
  .offer:hover .offer__text, .offer:hover .offer__meta { color: var(--on-dark-2); }
  .offer:hover .offer__go { background: var(--accent-dark); color: var(--deep); box-shadow: none; }
  .offer:hover .offer__go .icon { animation: arrow-through 560ms var(--ease-out) both; }
}
.offer:active::before { transform: scaleY(1); }
.offers__where { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
@media (min-width: 48rem) {
  .offer { grid-template-columns: minmax(0, 1fr) 12rem auto; grid-template-areas: "main price go"; column-gap: 2.5rem; }
  .offer__price { text-align: right; }
}
@media (min-width: 64rem) {
  .offers__list { --bleed: 1.5rem; }
  .offers__head { grid-column: 1 / span 8; }
  .offer { padding-inline: 0; }
}

/* ---------- 9. Stimmen --------------------------------------------------- */
.voices__page { row-gap: 2.5rem; align-items: end; }
.voice { margin: 0; }
.voice__quote { margin: 0; }
.voice__quote p { margin: 0; color: var(--ink-2); }
.voice--lg .voice__quote p {
  font-size: var(--fs-h2); font-weight: 350; line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ink); max-inline-size: 30ch; hyphens: manual;
}
.voice--md .voice__quote p { font-size: var(--fs-h3); line-height: 1.45; color: var(--ink); max-inline-size: 48ch; }
.voice__who { margin-top: 1rem; font-size: var(--fs-small); color: var(--muted); }
/* Leuchtstift in grossen Zitaten (User 2026-09-24: «keywords speziell markieren wie
   marker»): flaches Band in hellem Salbei #c1d0a9 (--accent-dark) hinter der unteren
   Haelfte der Woerter, gerade Kanten. Kein Pinselstrich: Rida 2026-09-24 «Jeder KI
   flyer hat dieses muster im moment». Bricht es um, bekommt jede Zeile ihr Band.
   Text bleibt ink (Kontrast 9.6 auf dem Salbei). */
.hl {
  /* Kleiner Ueberstand links und rechts, der gleiche negative Rand hebt ihn im
     Satz auf: keine groesseren Wortabstaende. */
  padding-inline: 0.1em; margin-inline: -0.1em;
  color: inherit;
  background: linear-gradient(var(--accent-dark), var(--accent-dark)) 0 88% / 100% 0.55em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Zwei Winkel wie die Tafelspitzen, in Salbei; pendeln beim Auftritt ein. */
.voice__mark { display: block; width: clamp(3.5rem, 2.5rem + 3vw, 5rem); margin-bottom: 1.25rem; color: var(--sage); transform-origin: 30% 70%; }
.voice__mark svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 8.5; stroke-linecap: square; stroke-linejoin: miter; }
.voices__side .link-arrow { margin-top: 1.5rem; }
@media (min-width: 64rem) {
  .voices__lead { grid-column: 1 / span 8; }
  .voices__side { grid-column: 10 / span 3; }
  .voices--single .voices__lead { grid-column: 2 / span 10; }
}

/* ---------- 10. Abschluss mit Handschrift -------------------------------- */
.cta-band {
  padding-block: clamp(4rem, 8vw, 7rem) clamp(3.5rem, 7vw, 6rem);
  background: var(--brand); color: var(--on-dark-2);
}
.cta-band__page { row-gap: 1.25rem; align-items: end; }
/* Handschrift als Bild mit Alt-Text (Kontrast Salbei auf Olive 4.8). */
.cta-band__script { width: min(100%, 38rem); height: auto; margin: 0 0 0.5rem -0.5rem; }
.cta-band__title { font-size: var(--fs-h2); font-weight: 380; letter-spacing: -0.02em; color: var(--on-dark); max-inline-size: 18ch; }
.cta-band__text { margin: 0; color: var(--on-dark-2); max-inline-size: 40ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 0.5rem; }
.cta-band .link-icon { color: var(--on-dark); }
.cta-band :focus-visible { outline-color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) {
  .cta-band .link-icon:hover { color: var(--accent-dark-hover); }
}
@media (min-width: 64rem) {
  .cta-band__script { grid-column: 1 / span 6; }
  .cta-band__title { grid-column: 1 / span 6; }
  .cta-band__text { grid-column: 8 / span 5; grid-row: 2; align-self: end; }
  .cta-band__actions { grid-column: 8 / span 5; grid-row: 3; }
}

/* ---------- 11. Kopf der Unterseiten ------------------------------------ */
/* Ohne Fotos fuer die Unterseiten ein randloser dunkler Kopf mit hellem Titel
   (anti-ai Review 2026-09-24: der cremefarbene Textkopf wirkte wie eine Textseite).
   Die Kopfzeile liegt transparent und hell darueber (.header--dark). */
.page-head {
  padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) clamp(3rem, 6vw, 5rem);
  background: var(--deep); color: var(--on-dark-2);
}
.page-head .kicker { color: var(--accent-dark); }
.page-head__title { color: var(--on-dark); font-size: var(--fs-h1); font-weight: 360; line-height: var(--lh-display); letter-spacing: -0.03em; max-inline-size: 20ch; }
.page-head__lead { margin: 1.5rem 0 0; font-size: var(--fs-h3); line-height: 1.4; color: var(--on-dark-2); max-inline-size: 38ch; }
.page-head :focus-visible { outline-color: var(--accent-dark); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0 0 2rem; padding: 0; font-size: var(--fs-small); color: var(--on-dark-2); }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--on-dark-2); }
.crumbs a { color: var(--on-dark-2); }

/* ---------- 12. Leistungsseiten ------------------------------------------ */
.audience__page { row-gap: 2rem; }
.audience__list { display: grid; gap: 2rem var(--col-gap); }
/* Linien als eigene Elemente, damit sie sich beim Auftritt ziehen (Abschnitt 18). */
.audience__item { position: relative; padding-top: 1.25rem; }
.audience__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--brand); transform-origin: 0 50%; }
.audience__item p { margin-top: 0.6rem; color: var(--ink-2); }
@media (min-width: 48rem) { .audience__list { grid-template-columns: 5fr 7fr; } }

.themes__page { row-gap: 1.5rem; }
.themes__list { margin: 0; columns: 2 18rem; column-gap: var(--col-gap); }
.theme { position: relative; padding-block: 1.25rem; break-inside: avoid; }
.theme::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.theme__title { font-weight: 600; }
.theme__text { margin: 0.35rem 0 0; color: var(--ink-2); }
.theme__test { display: table; margin-top: 0.3rem; padding-block: 0.3rem; font-size: var(--fs-small); font-weight: 600; }
@media (min-width: 64rem) {
  .themes__title { grid-column: 1 / span 4; }
  .themes__list { grid-column: 5 / span 8; }
}

.setting__page { row-gap: 1.5rem; }
@media (min-width: 64rem) {
  .setting__title { grid-column: 1 / span 5; }
  .setting__text { grid-column: 7 / span 6; }
}

.checklist { list-style: none; margin: 1rem 0 0; padding: 0; columns: 2 17rem; column-gap: var(--col-gap); }
.checklist li { display: flex; gap: 0.6rem; align-items: flex-start; padding-block: 0.35rem; break-inside: avoid; }
.checklist .icon { margin-top: 0.25em; color: var(--brand); }
.checklist--light .icon { color: var(--accent-dark); }
.checklist--light li { color: var(--on-dark-2); }
.background__page { row-gap: 0.5rem; }

.limit { margin: 0; padding-left: 1rem; border-left: 3px solid var(--sage); font-size: var(--fs-small); color: var(--muted); }

/* ---------- 13. Ueber mich ------------------------------------------------ */
.page-head--portrait { padding-bottom: 0; }
.about-head { row-gap: 2rem; align-items: end; }
.about-head__crumbs ol { margin-bottom: 0; }
.setting__sub { margin: 2.5rem 0 0.75rem; }
.about-head__img { width: 100%; border-radius: var(--radius-img); }
@media (min-width: 48rem) {
  .about-head__crumbs { grid-column: 1 / -1; }
  .about-head__text { grid-column: 1 / span 7; padding-bottom: var(--pad-eng); }
  .about-head__media { grid-column: 8 / span 5; }
}
.voices-list__grid { margin-top: 2.5rem; columns: 2 22rem; column-gap: calc(var(--col-gap) * 2); }
.voices-list__grid { list-style: none; padding: 0; }
.voices-list__item { padding-block: 1.5rem; border-top: 1px solid var(--line); break-inside: avoid; max-inline-size: none; }
.voices-list__item:first-child { column-span: all; padding-block: 0 2.5rem; border-top: 0; }
.articles__page { row-gap: 1.5rem; }
.articles__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.articles__list li { max-inline-size: none; }
.article-link {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 1rem; border-bottom: 1px solid var(--line);
  color: var(--ink); font-weight: 500; text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), padding var(--dur-base) var(--ease-out);
}
.article-link .icon { color: var(--brand); transition: transform var(--dur-slow) var(--ease-settle); }
@media (hover: hover) and (pointer: fine) {
  .article-link:hover { color: var(--brand); }
  .article-link:hover .icon { transform: translate(3px, -3px); }
}
@media (min-width: 64rem) {
  .articles__page > :first-child { grid-column: 1 / span 4; }
  .articles__list { grid-column: 6 / span 7; }
}

/* ---------- 14. Selbsttests ------------------------------------------------ */
.steps { counter-reset: step; list-style: none; margin: 1rem 0 0; padding: 0; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.6rem;
  padding-block: 0.7rem; border-top: 1px solid var(--line);
}
.steps li::before { content: counter(step); color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tafel im Kopf der Testseite: Ziel und Dauer wie auf einem Wanderweg-Wegweiser.
   Die angeklickte Tafel der Startseite verwandelt sich in diese (main.js). */
.sign--head {
  display: inline-grid; justify-self: start; margin: 0 0 1.75rem; padding: 0.7rem 3rem 0.75rem 1.1rem;
  view-transition-name: test-sign; cursor: default;
}
.sign--head .sign__label { font-size: var(--fs-body); font-weight: 600; }
.page-head .sign--head { background: var(--accent-dark); color: var(--deep); box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.1); }
.page-head .sign--head .sign__topics { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .sign--head:hover { transform: none; }
}

.notice {
  margin: 0; padding: 1.1rem 1.25rem; font-size: var(--fs-small);
  background: var(--surface); border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0;
}
.notice__title { margin: 0 0 0.35rem; font-weight: 600; }
.quiz__notice { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0 0 1.25rem; font-size: var(--fs-small); color: var(--ink-2); }
.quiz__notice .icon { margin-top: 0.15em; color: var(--brand); }
.quiz__notice a { color: var(--ink); font-weight: 600; }
/* Die wartenden Aussagen stehen 3rem neben der Spalte: an der Section abschneiden,
   sonst wird die Seite breiter als das Fenster (DESIGN.md 6). */
.quiz-section { overflow-x: clip; }
.quiz, .result { grid-column: 1 / -1; scroll-margin-top: calc(var(--header-h) + 1rem); }
@media (min-width: 64rem) { .quiz, .result { grid-column: 1 / span 9; } }

/* ---------- Ablauf: eine Aussage pro Bildschirm (Variante B, 2026-09-24) ----
   Ohne JavaScript bleibt die Liste weiter unten. Mit .js stehen alle Aussagen
   im selben Rasterfeld (Hoehe der laengsten, nichts springt), sichtbar ist
   nur .is-current. Darueber Zaehler und Weg, darunter Zurueck und Weiter. */
.quiz__status, .quiz__nav, .quiz__keys { display: none; }
.js .quiz__status { display: block; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.js .quiz__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.quiz__count { margin: 0; font-size: var(--fs-small); color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Weg: die Linie skaliert als SVG mit der Breite, Halte, Wegweiser und Kompass
   liegen als HTML darueber und behalten ihre Groesse. selbsttest.js setzt sie
   per left/top auf die Punkte der Linie und --p fuer die gelaufene Strecke. */
.trail { padding-top: 2.5rem; }
.trail__box { position: relative; }
.trail__svg { display: block; width: 100%; height: auto; overflow: visible; }
.trail__line, .trail__walked { fill: none; stroke-width: 3; stroke-linecap: round; }
.trail__line { stroke: var(--field-line); stroke-dasharray: 0.5 9; }
.trail__walked { stroke: var(--brand); stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
@media (max-width: 47.99rem) {
  .trail__line, .trail__walked { stroke-width: 7; }
  .trail__line { stroke-dasharray: 1 20; }
}
.trail__stop, .trail__sign, .trail__walker { position: absolute; }
.trail:not(.is-ready) .trail__stop,
.trail:not(.is-ready) .trail__sign,
.trail:not(.is-ready) .trail__walker { visibility: hidden; }
.trail__stop {
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--field-line);
}
.trail__stop.is-passed { background: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
/* Wegweiser am Ende: Fuss des Pfostens (x 6 von 34) steht auf dem letzten Punkt. */
.trail__sign { width: 34px; height: 44px; margin: -44px 0 0 -6px; }
.trail__sign svg { display: block; width: 100%; height: 100%; overflow: visible; }
.trail__plate { fill: var(--surface-2); transform-origin: 6px 12px; }
.trail__post { fill: none; stroke: var(--field-line); stroke-width: 3; stroke-linecap: round; }
.trail__sign.is-reached .trail__plate { fill: var(--accent-dark); }
.trail__sign.is-reached .trail__post { stroke: var(--brand); }
/* Kompass aus dem Logo auf hellem Grund, damit die Linie unter ihm aufhoert. */
.trail__walker { z-index: 1; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 4px var(--bg); }
.trail__walker img { display: block; width: 100%; height: 100%; }
@media (max-width: 47.99rem) {
  .trail { padding-top: 2rem; }
  .trail__walker { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .trail__stop { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
  .trail__sign { width: 26px; height: 34px; margin: -34px 0 0 -4.6px; }
}

.quiz__list { list-style: none; margin: 0; padding: 0; }
.js .quiz__list { display: grid; }
.js .quiz .question { grid-area: 1 / 1; padding-block: 0; border-top: 0; }
.js .quiz .question:not(.is-current) { visibility: hidden; opacity: 0; pointer-events: none; }
.js .quiz .question__nr { display: none; }
.js .quiz .question__text {
  display: block; margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
  font-size: var(--fs-h2); font-weight: 380; line-height: 1.16; letter-spacing: -0.015em;
  color: var(--ink); max-inline-size: 26ch; text-wrap: balance;
}
.js .quiz[data-state="done"] .quiz__list,
.js .quiz[data-state="done"] .quiz__next,
.js .quiz[data-state="done"] .quiz__keys { display: none; }
.quiz__next { margin-left: auto; }
.quiz__back .arrow { transform: scaleX(-1); }
.quiz__back:disabled { visibility: hidden; }
.quiz__next:disabled { background: var(--surface-2); color: var(--muted); cursor: default; }
.quiz__next:disabled::before { content: none; }
.quiz__keys { margin: 0.75rem 0 0; font-size: var(--fs-small); color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .js .quiz__keys { display: block; }
}
@media (max-width: 47.99rem) {
  .js .quiz__nav .btn { flex: 1 1 8rem; }
}
.question { max-inline-size: none; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.question__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.question__text { display: flex; gap: 0.9rem; align-items: baseline; margin-bottom: 1rem; padding: 0; font-weight: 500; line-height: 1.45; }
/* Nummer im Kreis; beantwortet fuellt er sich und pendelt kurz ein. */
.question__nr {
  flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--brand);
  color: var(--brand); font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.question.is-answered .question__nr { background: var(--brand); color: var(--on-brand); }
.scale { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-left: 2.8rem; }
.scale__opt { position: relative; flex: 1 1 6.5rem; }
/* Radio ohne eigene Darstellung (appearance: none) ueber der ganzen Option:
   Tap-Ziel ist die volle Flaeche, Fokusring am Radio selbst. Keine Deckkraft 0,
   weil die Pruefwerkzeuge opacity-0-Elemente fuer Screenshots sichtbar schalten. */
.scale__opt input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; border: 0;
  border-radius: var(--radius); cursor: pointer;
}
.scale__opt input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.scale__face {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 0.7rem 0.6rem; min-height: 2.75rem;
  border: 1px solid var(--field-line); border-radius: var(--radius);
  font-size: var(--fs-small); text-align: center; line-height: 1.3;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.scale__opt input:checked + .scale__face { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.scale__opt input:active + .scale__face { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .scale__opt input:hover + .scale__face { border-color: var(--ink); }
}
/* Staffel: so viele Balken gefuellt wie der Wert, auf der gewaehlten Flaeche hell. */
.meter { flex: none; width: 22px; height: 16px; }
.meter__bar { fill: var(--line); transition: fill var(--dur-fast) var(--ease-out); }
.meter__bar.is-on { fill: var(--brand); }
.scale__opt input:checked + .scale__face .meter__bar { fill: var(--sage); }
.scale__opt input:checked + .scale__face .meter__bar.is-on { fill: var(--on-brand); }
/* Liste ohne JavaScript, Handy: die fuenf Stufen bleiben eine Zeile, unter 360px
   untereinander (anti-ai Review 2026-09-24). */
@media (max-width: 35.99rem) {
  .scale { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.35rem; padding-left: 0; }
  .scale__face { justify-content: center; min-height: 3.25rem; padding: 0.45rem 0.15rem; font-size: var(--fs-kicker); font-weight: 600; line-height: 1.2; }
}
@media (max-width: 22.49rem) {
  .scale { grid-auto-flow: row; }
  .scale__face { min-height: 2.75rem; font-size: var(--fs-small); }
}
/* Ablauf: fuenf grosse Flaechen nebeneinander, Staffel oben, Wort unten; am
   Handy fuenf breite Zeilen untereinander, Daumen-freundlich. */
.js .quiz .scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; padding-left: 0; }
.js .quiz .scale__face {
  align-items: flex-start; justify-content: space-between; gap: 1rem;
  min-height: 6.5rem; padding: 1rem; text-align: left;
  font-size: var(--fs-body); font-weight: 600; line-height: 1.2;
}
@media (max-width: 47.99rem) {
  .js .quiz .scale { grid-template-columns: 1fr; grid-auto-flow: row; gap: 0.5rem; }
  .js .quiz .scale__face { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; min-height: 3.5rem; padding: 0.6rem 1rem; }
}
/* Smiley-Skala (alle vier Tests, t.faces): fuenf Gesichter in einer Reihe,
   auch am Handy; die Sprechblase ist die Flaeche, das Wort klein darunter.
   Gewaehlt: Blase in Markenfarbe, Gesicht hell (Feder pick wie bei der Staffel). */
.scale.scale--faces,
.js .quiz .scale.scale--faces {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row;
  gap: clamp(0.25rem, 1.5vw, 1rem); max-width: 40rem; padding-left: 0;
}
.scale--faces .scale__face,
.js .quiz .scale--faces .scale__face {
  flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.35rem;
  min-height: 0; padding: 0.35rem 0.1rem 0.45rem;
  border-color: transparent; background: transparent; color: var(--muted);
  font-size: var(--fs-small); font-weight: 500; line-height: 1.2; text-align: center;
}
.face { width: clamp(3.25rem, 11vw, 5.75rem); height: auto; overflow: visible; }
/* Handy: fuenf Spalten um 67px, «manchmal» passt nur in der kleineren Schrift. */
@media (max-width: 35.99rem) {
  .scale--faces .scale__face,
  .js .quiz .scale--faces .scale__face { font-size: var(--fs-kicker); }
}
.face__bubble { fill: var(--accent-dark); stroke: var(--sage); stroke-width: 1.2; transition: fill var(--dur-fast) var(--ease-out), stroke var(--dur-fast) var(--ease-out); }
.face__line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-fast) var(--ease-out); }
.face__dot, .face__tear { fill: var(--ink); transition: fill var(--dur-fast) var(--ease-out); }
.scale--faces .scale__opt input:checked + .scale__face { background: transparent; border-color: transparent; color: var(--ink); font-weight: 700; }
.scale--faces .scale__opt input:checked + .scale__face .face__bubble { fill: var(--brand); stroke: var(--brand); }
.scale--faces .scale__opt input:checked + .scale__face .face__line { stroke: var(--on-brand); }
.scale--faces .scale__opt input:checked + .scale__face .face__dot,
.scale--faces .scale__opt input:checked + .scale__face .face__tear { fill: var(--on-brand); }
@media (hover: hover) and (pointer: fine) {
  .scale--faces .scale__opt input:hover + .scale__face { border-color: transparent; color: var(--ink); }
  .scale--faces .scale__opt input:hover + .scale__face .face__bubble { fill: var(--accent-dark-hover); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .face { transition: transform var(--dur-base) var(--ease-settle); }
  .scale--faces .scale__opt input:hover + .scale__face .face { transform: translateY(-3px) rotate(-5deg); }
}

.quiz__privacy { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 1rem; font-size: var(--fs-small); color: var(--muted); }
.quiz__privacy .icon { margin-top: 0.15em; color: var(--brand); }

.result {
  margin-top: 2.5rem; padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--surface); border-top: 4px solid var(--brand); border-radius: var(--radius);
}
.result:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.result__head { display: grid; gap: 1.25rem 2rem; align-items: center; }
@media (min-width: 40rem) { .result__head { grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem); } }
.result__title { font-size: var(--fs-h3); font-weight: 500; }
.result__score { margin: 0.4rem 0 0; font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Anzeige: Halbkreis mit Melanies drei Stufen, die Nadel pendelt auf den
   Punktestand ein (--angle aus selbsttest.js), danach faerbt sich die Stufe. */
.gauge { width: 100%; max-width: 15rem; }
.gauge__svg { width: 100%; height: auto; overflow: visible; }
.gauge__seg { fill: none; stroke: var(--surface-2); stroke-width: 16; transition: stroke var(--dur-slow) var(--ease-out) 1s; }
.result[data-result-level="low"] .gauge__seg--low,
.result[data-result-level="mid"] .gauge__seg--mid,
.result[data-result-level="high"] .gauge__seg--high { stroke: var(--brand); }
/* Ruhige Feder statt Kompass-Schwung: bei «deutlichen Hinweisen» darf nichts wippen. */
.gauge__needle { transform-origin: 100px 100px; transform: rotate(var(--angle, -90deg)); transition: transform var(--dur-settle) var(--ease-settle) 120ms; }
.gauge__needle path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.gauge__needle circle { fill: var(--ink); }
.gauge__scale { display: flex; justify-content: space-between; margin: 0.35rem 0 0; font-size: var(--fs-small); color: var(--muted); max-inline-size: none; }
.result__label { margin: 1.5rem 0 0.5rem; font-size: var(--fs-h2); font-weight: 380; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.result__sub { margin: 2rem 0 0.5rem; }
.result__domains { list-style: none; margin: 0; padding: 0; }
.result__domains li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 5rem; gap: 0.25rem 1.5rem; align-items: baseline;
  padding-block: 0.7rem; border-bottom: 1px solid var(--line); max-inline-size: none;
}
@media (max-width: 35.99rem) {
  .result__domains li { grid-template-columns: minmax(0, 1fr) auto; }
  .result__domain { grid-column: 1 / -1; }
}
.result__domain { font-weight: 500; }
.result__domain-val { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.result__tag { text-align: right; font-weight: 600; color: var(--brand); }
.result__closing { margin-top: 1.5rem; font-size: var(--fs-small); color: var(--ink-2); }
.result__next { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.result__next-title { margin-bottom: 0.25rem; font-size: var(--fs-h3); font-weight: 500; color: var(--ink); }
.result__next .btn { margin-top: 1rem; }
.result__again { margin: 1.5rem 0 0; }

.help__list { margin: 0; padding-left: 1.2rem; }
.help__list li { margin-bottom: 0.6rem; }
.help .notice { margin-bottom: 1.75rem; background: var(--bg); }
.help__theme { margin-top: 1.75rem; }
.help .setting__text .link-icon { margin-top: 1rem; }
.others__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.others__list li { max-inline-size: none; }
.sign--small { padding: 0.8rem 3rem 0.8rem 1.1rem; }
.sign--small .sign__label { font-size: var(--fs-body); }

/* ---------- 15. Kontakt und Formular -------------------------------------- */
.contact { padding-top: clamp(2.5rem, 5vw, 4rem); }
.contact__page { row-gap: 3rem; align-items: start; }
.contact__person { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.contact__person picture { flex: none; }
.contact__img { width: 5.5rem; height: 6.875rem; object-fit: cover; object-position: 35% 20%; border-radius: var(--radius-img); }
.contact__name { margin: 0; font-weight: 600; }
.contact__name span { display: block; font-weight: 400; font-size: var(--fs-small); color: var(--muted); }
.contact__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.contact__big {
  display: inline-flex; align-items: center; gap: 0.75rem;
  color: var(--ink); font-size: var(--fs-h3); font-weight: 500; text-decoration: none; font-variant-numeric: tabular-nums;
}
.contact__big .icon { width: 1.4rem; height: 1.4rem; color: var(--brand); }
@media (hover: hover) and (pointer: fine) {
  .contact__big:hover { color: var(--brand); }
  .contact__big:hover .icon { animation: ring 600ms var(--ease-out); }
}
.contact__label { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.contact__region { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-small); color: var(--muted); }
.contact__region .icon { margin-top: 0.15em; }
@media (min-width: 64rem) {
  .contact__direct { grid-column: 1 / span 4; }
  .form { grid-column: 6 / span 7; }
}

.form__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.form__legend { padding: 0; margin-bottom: 0.5rem; }
.form__required { margin: 0 0 1.5rem; font-size: var(--fs-small); color: var(--muted); }
.field { display: grid; gap: 0.4rem; margin-bottom: 1.35rem; }
.field label { font-weight: 500; }
.field input, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.75rem 0.95rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--field-line); border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-text); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.field--error input, .field--error textarea { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.field__hint { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.field__error { margin: 0; padding-left: 0.6rem; border-left: 3px solid var(--brand); font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.req { color: var(--brand); }
.opt { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.form-alert { margin-bottom: 1.5rem; padding: 1rem 1.25rem; background: var(--surface); border-left: 3px solid var(--brand); }
.form-alert__title { margin: 0 0 0.35rem; font-weight: 600; }
.form-alert ul { margin: 0; padding-left: 1.1rem; }
.form__promise { margin: 0.25rem 0 0.9rem; font-weight: 500; }
.form__note { margin-top: 1rem; font-size: var(--fs-small); color: var(--muted); }
.cf-turnstile { margin-bottom: 1.25rem; }

/* ---------- 16. Rechtliches und Textseiten --------------------------------- */
.prose h2 { margin: 2.25rem 0 0.5rem; font-size: var(--fs-h3); font-weight: 600; }
.prose h2:first-child { margin-top: 0; }
.placeholder { padding: 0.1rem 0.35rem; background: var(--surface-2); border-radius: 3px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.link-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }

/* ---------- 17. Footer mit Notfallnummern ---------------------------------- */
.footer { padding-block: clamp(3rem, 6vw, 5rem) 2rem; background: var(--deep); color: var(--on-dark-2); font-size: var(--fs-small); }
.footer a { color: var(--on-dark); }
.footer :focus-visible { outline-color: var(--accent-dark); }
.footer__page { row-gap: 2.5rem; }
.emergency { display: grid; gap: 1rem; padding: 1.5rem clamp(1.25rem, 3vw, 2rem); background: var(--deep-2); border-radius: var(--radius); }
.emergency__title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--on-dark); }
.emergency__list { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; list-style: none; margin: 0; padding: 0; }
.emergency__list li { display: flex; align-items: baseline; gap: 0.6rem; }
.emergency__nr { color: var(--accent-dark) !important; font-size: var(--fs-h3); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.emergency__limit { margin: 0; }
@media (min-width: 64rem) {
  .emergency { grid-template-columns: auto 1fr; align-items: center; column-gap: 2.5rem; }
  .emergency__limit { grid-column: 2; }
}
.footer__logo { width: 9rem; }
.footer__title { margin: 0 0 0.9rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-2); }
.footer__list { display: grid; gap: 0.55rem; list-style: none; margin: 0; padding: 0; }
.footer__muted { color: var(--on-dark-2); }
.footer__bottom {
  display: grid; justify-items: start; gap: 0.75rem 2.5rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line-dark);
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer__legal a, .footer__list a { display: inline-block; padding-block: 0.3rem; }
/* Credit der Agentur (agents/CREDIT.md): Schrift und Groesse des Footers, Farbe
   wie die Notfallnummern (--accent-dark, 8.7:1 auf --deep), Herz in currentColor.
   In der Mitte (User 2026-09-27): am Handy und Tablet als eigene Zeile unter
   Copyright und Rechtslinks, ab 64rem zwischen beiden. DOM-Reihenfolge bleibt
   die Handy-Reihenfolge (DESIGN.md 5). */
.footer .credit { justify-self: center; padding-block: 0.3rem; color: var(--accent-dark); text-align: center; text-decoration: none; }
.credit .icon { width: 1.1em; height: 1.1em; margin-inline-start: 0.1em; vertical-align: -0.2em; }
@media (hover: hover) and (pointer: fine) {
  .footer .credit:hover { color: var(--accent-dark-hover); text-decoration-line: underline; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .credit:hover .icon { animation: beat 520ms var(--ease-settle); }
}
@media (min-width: 48rem) {
  .footer__bottom { grid-template-columns: 1fr auto; align-items: baseline; }
  .footer__legal { justify-self: end; }
  .footer .credit { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .footer__bottom { grid-template-columns: 1fr auto 1fr; }
  .footer__legal { grid-area: 1 / 3; }
  .footer .credit { grid-area: 1 / 2; }
}
@media (min-width: 48rem) {
  .footer__brand { grid-column: 1 / -1; }
  .footer__col { grid-column: span 6; }
}
@media (min-width: 64rem) {
  .footer__brand { grid-column: 1 / span 5; }
  .footer__col { grid-column: span 3; }
  .footer__brand + .footer__col { grid-column: 7 / span 3; }
}

/* =========================================================================
   18. Bewegung: «einpendeln» (agents/DESIGN.md 6, Konzept-Satz theme.css)
   - Auftritt beim Laden: Hero (Bild setzt sich, Titelzeilen steigen,
     Lead und Knoepfe folgen), Unterseiten-Kopf, Kompass beim ersten Besuch.
   - Auftritt beim Scrollen ([data-inview] -> .is-in): Wegweiser, Bild der
     Geschichte, Wendepunkt, Trennlinien und Pfeilkreise der Wege,
     Anfuehrungszeichen, Handschrift im Abschluss. Nie Fliesstext.
   - Scroll-gekoppelt (ohne JS): das Hero-Bild zieht beim Wegscrollen nach.
   - Bedienung: Knoepfe, Tafeln, Wege, Optionen, Nadel (Abschnitte oben).
   - Seitenwechsel: Cross-Document View Transition, Tafel -> Testkopf.
   Alles Raeumliche nur unter no-preference; unter reduce bleibt nur Deckkraft.
   ========================================================================= */
@keyframes arrow-through {
  0% { transform: translateX(0); }
  45% { transform: translateX(130%); }
  46% { transform: translateX(-130%); }
  100% { transform: translateX(0); }
}
@keyframes nudge { 30% { transform: translateX(3px); } }
@keyframes beat { 30% { transform: scale(1.2); } }
@keyframes ring { 15%, 45% { transform: rotate(-12deg); } 30%, 60% { transform: rotate(10deg); } 75% { transform: rotate(0deg); } }
@keyframes rise-in { from { transform: translateY(112%); } }
@keyframes enter-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes hero-settle { from { transform: scale(1.12); } }
@keyframes hero-drift { to { transform: scale(1.08) translateY(4%); } }
@keyframes compass-find { from { transform: rotate(-140deg); } }
@keyframes pop { from { transform: scale(0.55); } }
@keyframes pick { from { transform: scale(0.9); } }
/* Kompass auf dem Weg: schwingt bei jedem Halt aus und pendelt ein. */
@keyframes swing { from { transform: rotate(-40deg); } }
/* Wegweiser am Ziel: die Tafel klappt vom Pfosten aus auf. */
@keyframes plate-in { from { transform: scaleX(0); } }
/* Tafel waechst aus ihrem Anfang heraus, die Pfeilspitze voraus (gleiche Punktzahl wie
   die Pfeilform in Abschnitt 6, damit clip-path Punkt fuer Punkt interpoliert). */
@keyframes sign-wipe { from { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); } }
@keyframes result-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-sign-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: no-preference) {
  /* Sprunglinks («Zu den Selbsttests») gleiten, damit man den Wegweiser aufgehen sieht. */
  html { scroll-behavior: smooth; }

  /* --- Auftritt Startseite ------------------------------------------------ */
  .hero__img { animation: hero-settle 1500ms var(--ease-out-expo) both; }
  .hero .rise__in { animation: rise-in var(--dur-settle) var(--ease-out-expo) 300ms both; }
  .hero .rise + .rise .rise__in { animation-delay: 420ms; }
  .hero__lead { animation: enter-up 1000ms var(--ease-out-expo) 640ms both; }
  .hero__actions { animation: enter-up 1000ms var(--ease-out-expo) 780ms both; }
  /* Foto links (ab 48rem): zieht beim Wegscrollen leicht nach. */
  @media (min-width: 48rem) {
    @supports (animation-timeline: view()) {
      .hero__media picture { animation: hero-drift linear both; animation-timeline: view(); animation-range: cover 50% cover 100%; }
    }
  }

  /* --- Menue: Links kommen kurz gestaffelt (selten bedient, unter 400 ms) -- */
  .menu[open] .menu__list li { animation: enter-up 420ms var(--ease-out-expo) both; }
  .menu[open] .menu__list li:nth-child(2) { animation-delay: 40ms; }
  .menu[open] .menu__list li:nth-child(3) { animation-delay: 80ms; }
  .menu[open] .menu__list li:nth-child(4) { animation-delay: 120ms; }
  .menu[open] .menu__list li:nth-child(5) { animation-delay: 160ms; }
  .menu[open] .menu__list li:nth-child(n + 6) { animation-delay: 200ms; }

  /* --- Auftritt Unterseiten ----------------------------------------------- */
  .page-head .rise__in { animation: rise-in 1000ms var(--ease-out-expo) 80ms both; }
  .page-head__lead.enter { animation: enter-up 900ms var(--ease-out-expo) 260ms both; }
  .sign--head { animation: sign-wipe 900ms var(--ease-out-expo) 60ms both; }
  /* Kam die Seite ueber die Tafel (View Transition), uebernimmt die Verwandlung. */
  .vt-in .sign--head { animation: none; }

  /* --- Kompass im Kopf: beim ersten Besuch sucht er Norden ------------------ */
  .intro .brand__mark { animation: compass-find var(--dur-swing) var(--ease-swing) 300ms both; }

  /* --- Wegweiser: Pfosten waechst, Kompass landet, Tafeln fahren aus dem Pfosten
     in ihre Richtung heraus, Pfeilspitze voraus (User 2026-09-24: «direkt von links
     nach rechts anstatt das ausklappen»; vorher raeumliches Aufschwingen). --- */
  .signpost__post { transition: transform 900ms var(--ease-out-expo); }
  .signpost__cap { transition: opacity 300ms var(--ease-out) 380ms, transform var(--dur-settle) var(--ease-settle) 380ms; }
  .signpost__needle img { transition: transform var(--dur-swing) var(--ease-swing) 480ms; }
  .signpost .sign { transition: transform var(--dur-slow) var(--ease-settle), background-color var(--dur-fast) var(--ease-out), clip-path 900ms var(--ease-out-expo); }
  .signpost__item:nth-child(1) .sign { transition-delay: 0ms, 0ms, 520ms; }
  .signpost__item:nth-child(2) .sign { transition-delay: 0ms, 0ms, 640ms; }
  .signpost__item:nth-child(3) .sign { transition-delay: 0ms, 0ms, 760ms; }
  .signpost__item:nth-child(4) .sign { transition-delay: 0ms, 0ms, 880ms; }
  .js .signpost:not(.is-in) .signpost__post { transform: scaleY(0); }
  .js .signpost:not(.is-in) .signpost__cap { opacity: 0; transform: translateY(-1.5rem) scale(0.6); }
  .js .signpost:not(.is-in) .signpost__needle img { transform: rotate(-150deg); }
  .js .signpost:not(.is-in) .sign { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); }
  @media (min-width: 64rem) {
    /* Nach links zeigende Tafeln wachsen vom Pfosten nach links (Punktfolge wie ihre Pfeilform). */
    .js .signpost:not(.is-in) .signpost__item--left .sign { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%, 100% 50%); }
  }

  /* --- Geschichte: das Bild oeffnet sich wie ein Fenster ------------------ */
  .story__media { clip-path: inset(0 0 0 0); transition: clip-path 1200ms var(--ease-out-expo); }
  .story__img { transition: transform 1400ms var(--ease-out-expo); }
  .js .story__media:not(.is-in) { clip-path: inset(14% 10% 14% 10%); }
  .js .story__media:not(.is-in) .story__img { transform: scale(1.22); }
  .turn .rise__in { transition: transform var(--dur-settle) var(--ease-out-expo) 100ms; }
  .turn .rise + .rise .rise__in { transition-delay: 230ms; }
  .js .turn:not(.is-in) .rise__in { transform: translateY(112%); }

  /* --- Wege: Linien zeichnen sich, Pfeilkreise pendeln ein ----------------- */
  .offer::after { transition: transform 1000ms var(--ease-out-expo); }
  .offer__go { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-settle) var(--ease-settle) 240ms; }
  .offer:nth-child(2)::after { transition-delay: 140ms; }
  .offer:nth-child(2) .offer__go { transition-delay: 0ms, 0ms, 0ms, 380ms; }
  .offer:nth-child(3)::after { transition-delay: 280ms; }
  .offer:nth-child(3) .offer__go { transition-delay: 0ms, 0ms, 0ms, 520ms; }
  .js .offers__list:not(.is-in) .offer::after { transform: scaleX(0); }
  .js .offers__list:not(.is-in) .offer__go { transform: scale(0); }

  /* --- Unterseiten: Linien ziehen sich wie Wegmarken, Haken setzen sich ---- */
  .audience__item::before, .theme::before { transition: transform 900ms var(--ease-out-expo); }
  .audience__item:nth-child(2)::before, .theme:nth-child(2)::before { transition-delay: 90ms; }
  .theme:nth-child(3)::before { transition-delay: 180ms; }
  .theme:nth-child(4)::before { transition-delay: 270ms; }
  .theme:nth-child(5)::before { transition-delay: 360ms; }
  .theme:nth-child(n + 6)::before { transition-delay: 450ms; }
  .js [data-inview]:not(.is-in) > .audience__item::before,
  .js [data-inview]:not(.is-in) > .theme::before { transform: scaleX(0); }
  .checklist .icon path { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--ease-out); }
  .checklist li:nth-child(2) .icon path { transition-delay: 90ms; }
  .checklist li:nth-child(3) .icon path { transition-delay: 180ms; }
  .checklist li:nth-child(4) .icon path { transition-delay: 270ms; }
  .checklist li:nth-child(5) .icon path { transition-delay: 360ms; }
  .checklist li:nth-child(6) .icon path { transition-delay: 450ms; }
  .checklist li:nth-child(n + 7) .icon path { transition-delay: 540ms; }
  .js .checklist[data-inview]:not(.is-in) .icon path { stroke-dashoffset: 24; }

  /* --- Stimmen: Anfuehrungszeichen pendelt ein ----------------------------- */
  .voice__mark { transition: opacity 300ms var(--ease-out), transform var(--dur-settle) var(--ease-settle); }
  .js [data-inview]:not(.is-in) > .voice__mark { opacity: 0; transform: translateY(0.75rem) scale(0.6) rotate(-14deg); }
  /* Leuchtstift zieht nach dem Zitatzeichen von links auf, die zweite Stelle danach. */
  .hl { transition: background-size 800ms var(--ease-out-expo) 450ms; }
  .hl ~ .hl { transition-delay: 850ms; }
  .js [data-inview]:not(.is-in) .hl { background-size: 0% 0.55em; }

  /* --- Abschluss: die Handschrift schreibt sich von links nach rechts ----- */
  .cta-band__script {
    /* Schmale Kante (48 bis 52 Prozent): die Feder schreibt, statt breit zu wischen. */
    -webkit-mask-image: linear-gradient(90deg, #000 48%, transparent 52%);
    mask-image: linear-gradient(90deg, #000 48%, transparent 52%);
    -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
    -webkit-mask-position: 0 0; mask-position: 0 0;
    transition: -webkit-mask-position 1500ms var(--ease-inout) 200ms, mask-position 1500ms var(--ease-inout) 200ms;
  }
  .js .cta-band:not(.is-in) .cta-band__script { -webkit-mask-position: 100% 0; mask-position: 100% 0; }

  /* --- Selbsttest: Auswahl, Nummer, Ergebnis -------------------------------- */
  .scale__opt input:checked + .scale__face { animation: pick 460ms var(--ease-settle); }
  .question.is-answered .question__nr { animation: pop 560ms var(--ease-settle); }
  .result:not([hidden]) { animation: result-in var(--dur-slow) var(--ease-out) both; }

  /* --- Selbsttest-Ablauf: Aussagen gleiten, der Kompass wandert ------------
     Die neue Aussage kommt von der Seite, in die man geht; die alte weicht zur
     anderen aus und wird erst nach ihrer Bewegung unsichtbar (visibility spaet). */
  .js .quiz .question {
    transition: opacity 380ms var(--ease-out), transform 640ms var(--ease-out-expo), visibility 0s linear 0s;
  }
  .js .quiz .question:not(.is-current) {
    transition: opacity 220ms var(--ease-out), transform 380ms var(--ease-out), visibility 0s linear 380ms;
  }
  .js .quiz .question[data-side="after"] { transform: translateX(3rem); }
  .js .quiz .question[data-side="before"] { transform: translateX(-3rem); }
  .trail__walker { transition: left 900ms var(--ease-settle), top 900ms var(--ease-settle); }
  .trail__walker.is-moving img { animation: swing 1000ms var(--ease-settle) both; }
  .trail__walked { transition: stroke-dashoffset 900ms var(--ease-out-expo); }
  .trail__stop { transition: background-color var(--dur-base) var(--ease-out) 450ms, box-shadow var(--dur-base) var(--ease-out) 450ms; }
  .trail__sign.is-reached .trail__plate { animation: plate-in 700ms var(--ease-settle) 380ms both; }

  /* --- Seitenwechsel ------------------------------------------------------- */
  ::view-transition-old(root) { animation: vt-out 240ms var(--ease-in) both; }
  ::view-transition-new(root) { animation: vt-in 560ms var(--ease-out-expo) both; }
  ::view-transition-group(test-sign) { animation-duration: 620ms; animation-timing-function: var(--ease-out-expo); }
  /* Tafel-Uebergang: die alte Tafel verschwindet sofort, die neue fliegt in ihrer
     echten Groesse links verankert (keine zwei Texte uebereinander, Review 2026-09-24). */
  ::view-transition-old(test-sign), ::view-transition-new(test-sign) {
    width: 100%; height: 100%; object-fit: none; object-position: left center; mix-blend-mode: normal;
  }
  ::view-transition-old(test-sign) { animation: vt-sign-out 160ms var(--ease-in) both; }
  ::view-transition-new(test-sign) { animation: none; }
}

/* Cross-Document View Transitions: Chrome 126+, Safari 18.2+; sonst normaler
   Seitenwechsel. Kopf bleibt stehen (eigener Name), Rest blendet. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  /* Keine Lage- und Drehbewegung; Zustaende bleiben ueber Farbe erkennbar. */
  *, *::before, *::after { scroll-behavior: auto !important; }
  .btn::before, .offer::before { transition: none; }
  .sign:hover, .sign:active, .signpost__item--left .sign:hover { transform: none; }
  .signpost__needle, .gauge__needle { transition: none; }
  .btn:active, .scale__opt input:active + .scale__face { transform: none; }
  /* Ablauf: Aussagen blenden nur, der Kompass springt ohne Weg und Schwung. */
  .js .quiz .question { transition: opacity var(--dur-fast) var(--ease-out); }
  .btn:hover .arrow .icon, .offer:hover .offer__go .icon, .link-icon:hover .icon,
  .header__phone:hover .icon, .contact__big:hover .icon { animation: none; }
  .link-arrow:hover::after, .article-link:hover .icon { transform: none; }
  .result:not([hidden]) { animation: fade-in var(--dur-base) var(--ease-out) both; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --- WhatsApp schwebend unten rechts, auf allen Seiten -------------------
   Markenfarbe statt WhatsApp-Gruen (ein Akzent), Radius wie alles Bedienbare.
   Klick oeffnet den Chat direkt (main.js). */
.wa-float {
  position: fixed; z-index: 40;
  right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius);
  background: var(--brand); color: var(--on-brand);
  box-shadow: 0 6px 18px rgb(32 37 26 / 0.22);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-settle);
}
.wa-float .icon { width: 1.6rem; height: 1.6rem; }
/* Der Footer endet ueber dem Knopf; sonst liegt der Knopf am Seitenende auf der
   Schlusszeile (bei 1280 und 1366 gemessen mit agents/tools/credit-check.mjs). */
.footer { padding-block-end: calc(3.5rem + 2 * max(1rem, env(safe-area-inset-bottom))); }
.wa-float:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) {
  .wa-float:hover { background: var(--brand-hover); transform: translateY(-2px); }
  .wa-float:hover .icon { animation: nudge 520ms var(--ease-settle); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: background-color var(--dur-fast) var(--ease-out); }
  .wa-float:hover { transform: none; }
  .wa-float:hover .icon { animation: none; }
}
@media print { .wa-float { display: none; } }

/* ---------- 19. Cookie-Hinweis (js/cookie-hinweis.js, Ticket 4) -------------
   Nur ein Hinweis, keine Wahl: die Site laedt nichts Optionales. Karte in der
   Flaeche der Site, unten links, Olive nur im Knopf. Kommt mit derselben Feder
   wie die Tafeln (einpendeln), erst nach 5,5 s und einer halben Bildschirmhoehe
   Scroll, nie ueber dem Hero-Knopf. Solange sie steht, rutscht der
   WhatsApp-Knopf am Handy darueber und der Fuss endet ueber ihr (Credit frei).
   Kontraste: ink/bg 14.3, brand/bg 7.1, on-brand/brand 7.1. */
.cookie {
  position: fixed; z-index: 45;
  left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid; gap: 0.6rem;
  padding: 0.9rem 1rem 0.9rem 1.15rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgb(32 37 26 / 0.14);
  font-size: var(--fs-small); line-height: 1.45;
  animation: cookie-in var(--dur-settle) var(--ease-settle) both, fade-in var(--dur-base) var(--ease-out) both;
}
.cookie[hidden] { display: none; }
.cookie:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cookie__text { margin: 0; }
.cookie__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
@keyframes cookie-in { from { transform: translateY(1.25rem); } }
@media (min-width: 48rem) {
  .cookie { right: auto; max-inline-size: 30rem; }
}
@media (max-width: 47.99rem) {
  .hat-cookie .wa-float { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--cookie-h, 0px) + 0.75rem); }
}
.hat-cookie { scroll-padding-bottom: calc(var(--cookie-h, 0px) + 2rem); }
.hat-cookie .footer { padding-block-end: calc(var(--cookie-h, 0px) + 3.5rem + 3 * max(1rem, env(safe-area-inset-bottom))); }
@media (prefers-reduced-motion: reduce) {
  .cookie { animation: fade-in var(--dur-base) var(--ease-out) both; }
}
@media print { .cookie { display: none; } }