/* Vioval-Webseite, Plan 01.1-01, Eigenbau nach taste-skill v2 (Richtung „split-stage“, Saat 515408465).
   Farben aus den eigenen Fotos: Papier aus der Wand des Teamfotos, Salbei für den gemeinsamen Chat,
   Rosé für deinen Raum, Schiefer für den Raum der anderen Person, Waldgrün als tragende Farbe.
   Schrift Switzer, lokal, ITF Free Font License (fonts/Switzer-FFL.txt). Keine Anfrage nach außen. */

@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-VariableItalic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #E9E6E2;
  --paper-step: #DDD9D4;
  --ink: #1E2521;
  --muted: #3E4743;
  --accent: #263D34;
  --accent-ink: #E9E6E2;
  --sage: #B7C8BE;
  --blush: #D6C4B8;
  --slate: #A6B3BC;
  --deep: #263D34;
  --deep-ink: #E3E2DA;
  --accent-press: #1B2D26;
  --paper-hover: #D2CDC7;
  --light: #FFFFFF;
  --foot: #1A201D;

  --font: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  --step-sub: clamp(1.375rem, 1.05rem + 1.4vw, 2.4rem);
  --step-display: clamp(2.5rem, 1rem + 4.4vw, 5rem);

  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(5rem, 12vw, 13rem);
  --pad: clamp(1.5rem, 5vw, 4.5rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
strong, b { font-weight: 500; }
cite { font-style: normal; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; hyphens: none; }
p { max-width: 62ch; text-wrap: pretty; }
/* Rückfall bei sehr großer eingestellter Schrift: ein Wort, das allein nicht in die Zeile passt, bricht um. */
p, li, h1, h2, h3, figcaption { overflow-wrap: break-word; }
p + p { margin-top: 0.9em; }
:target { scroll-margin-top: 1.5rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.rand { padding-inline: var(--margin); }
.kopf { font-size: var(--step-head); line-height: 1.05; letter-spacing: -0.03em; }
.kopf span, .grund h3 span { display: inline-block; }
/* Zeileneinheiten und Knöpfe brechen nicht um, solange die Breite in em reicht. em folgt der Schriftgröße, die jemand
   im Browser eingestellt hat: Mit doppelter Schrift am Handy brechen sie um, statt seitlich überzustehen. */
@media (min-width: 20em) {
  .kopf span, h1 span, .raum h3 span, .knopf, .nummer, .einheit { white-space: nowrap; }
}
.lead { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.015em; max-width: 34ch; }

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.6rem 1.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.knopf--hell { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--accent-press); }
  .knopf--hell:hover { background: var(--light); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .knopf:hover { transform: translateY(-2px); }
}
/* Nach dem Schweben, sonst überschreibt dessen transform den Druck am Desktop. */
.knopf:active { transform: scale(0.97); }

/* ---------- 1. Kopf ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}
.hero__bild {
  position: sticky;
  top: 12px;
  order: -1;
  height: 40svh;
  margin: 0;
  overflow: hidden;
  background: var(--paper-step);
}
.hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 76% 50%;
}
.hero__blatt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--paper);
  padding: 1.25rem 0.5rem 3rem;
}
.wortmarke {
  font-size: var(--step-head);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
}
.hero__text { margin-top: 1.5rem; display: grid; justify-items: center; gap: 1.1rem; }
.hero__text p + p { margin-top: 0; }
h1 {
  font-size: var(--step-display);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--accent);
}
h1 span { display: inline-block; }
.hero__lead, .hero__ziel { max-width: 40ch; }
.hero__text .knopf { margin-top: 0.75rem; }

.ki-leiste {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.15rem 0.35em;
  min-height: 56px;
  padding: 0.6rem 1rem;
  align-items: center;
  align-content: center;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step-small);
  line-height: 1.35;
  letter-spacing: 0;
}

@media (max-width: 56.1875em) {
  .hero__text .knopf { width: 100%; }
  .hero__text > p:last-child { width: 100%; }
}

@media (min-width: 56.25em) {
  .hero {
    grid-template-columns: 45fr 55fr;
    min-height: 100svh;
  }
  .hero__bild { order: 0; height: calc(100svh - 24px); }
  .hero__bild img { object-position: 80% 50%; }
  .hero__blatt { padding: 2rem clamp(1.5rem, 3vw, 3rem) 0; }
  .hero__text { margin-top: clamp(3rem, 20svh, 12rem); }
  .ki-leiste { padding: 0 1.25rem; }
}

/* ---------- 2. Drei Räume ---------- */
.raeume { padding-top: calc(var(--section) / 2); }
.raeume__kopf { display: grid; gap: 1.25rem; padding-bottom: clamp(2rem, 4vw, 3.5rem); }

.raeume__plan { display: grid; grid-template-columns: minmax(0, 1fr); }
.raum { position: relative; }
.raum__text { padding: var(--pad) var(--margin); }
.raum--gemeinsam { background: var(--sage); }
.raum--deiner { background: var(--blush); }
.raum--andere { background: var(--slate); }
.raum h3 { font-size: var(--step-sub); line-height: 1.1; letter-spacing: -0.025em; margin: 1.5rem 0 1rem; }
.raum h3 span { display: inline-block; }
.raum__bild { margin: 0; }
.raum__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; aspect-ratio: 4 / 3; }

.raum__coach {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-step);
}
.raum__coach img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Nur das obere Bild blendet, Viola bleibt darunter stehen: So scheint beim Tausch kein Grund durch. */
.raum__coach .ist-valerian { opacity: 0; transition: opacity var(--t-ui) ease; }
body:has(.wahl input[value="valerian"]:checked) .raum__coach .ist-valerian { opacity: 1; }

.raeume__wahl {
  display: grid;
  gap: 1.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.raeume__wahl p + p { margin-top: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.wahl__knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  border-radius: 999px;
  background: var(--paper-step);
  color: var(--ink);
  font-size: var(--step-lead);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}
.wahl__knopf input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wahl__knopf img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex: none; }
.wahl__knopf:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.wahl__knopf:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.wahl__knopf:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .wahl__knopf:not(:has(input:checked)):hover { background: var(--paper-hover); }
}

@media (min-width: 56.25em) {
  .raeume__kopf { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .raeume__kopf h2 { grid-column: 1 / 7; }
  .raeume__kopf .lead { grid-column: 8 / 13; }
  .raeume__plan { grid-template-columns: 45fr 55fr; }
  .raum--gemeinsam { grid-column: 1 / -1; display: grid; grid-template-columns: 45fr 55fr; }
  .raum--gemeinsam .raum__text { align-self: center; }
  .raum--gemeinsam .raum__bild img { aspect-ratio: auto; min-height: 30rem; }
  .raum__text { padding: var(--pad); }
  .raum--deiner .raum__text, .raum--andere .raum__text { max-width: 38rem; }
  .raeume__wahl { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .raeume__wahl > :nth-child(1) { grid-column: 1 / 6; }
  .raeume__wahl > :nth-child(2) { grid-column: 6 / 10; }
  .raeume__wahl > :nth-child(3) { grid-column: 10 / 13; }
}

/* ---------- 3. und 4.: geteilte Bühne ---------- */
.buehne { display: grid; grid-template-columns: minmax(0, 1fr); }
.buehne__teil { display: contents; }
.buehne__lesen { padding: clamp(2.5rem, 8vw, 4rem) var(--margin) calc(var(--section) / 2); }
.buehne__bild { position: relative; margin: 0; overflow: hidden; background: var(--paper-step); }
.buehne__bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.buehne__bild--viola img { object-position: 46% 40%; }
.buehne__teil:nth-child(2) .buehne__bild img { object-position: 42% 40%; }
.buehne__teil--privat .buehne__bild img { object-position: 60% 50%; }
.buehne__teil:nth-child(1) .buehne__bild { order: 1; }
.buehne__teil:nth-child(1) .buehne__lesen { order: 2; }
.buehne__teil:nth-child(2) .buehne__bild { order: 3; }
.buehne__teil:nth-child(2) .buehne__lesen { order: 4; }
.buehne__teil:nth-child(3) .buehne__bild { order: 5; }
.buehne__teil:nth-child(3) .buehne__lesen { order: 6; }
.buehne__teil--privat .buehne__lesen { background: var(--blush); }

.brief { max-width: 46ch; }
.brief .kopf { margin: 1.5rem 0 1.25rem; }
.brief__koepfe { display: flex; }
.brief__koepfe img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.brief__koepfe img + img { margin-left: 6px; }
.brief__coach strong { font-size: var(--step-lead); letter-spacing: -0.015em; }

.schmal { max-width: 36ch; }
.schmal .kopf { margin-bottom: 1.5rem; }
.schmal__erst { font-weight: 500; }
.hilfe-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

@media (min-width: 56.25em) {
  .buehne { grid-template-columns: 45fr 55fr; }
  .buehne__lesen { grid-column: 1; order: 0 !important; display: flex; align-items: center; min-height: 100svh; padding: var(--section) var(--pad) calc(var(--section) / 2); }
  .buehne__teil:nth-child(1) .buehne__lesen { padding-top: calc(var(--section) / 2); }
  .buehne__bild { grid-column: 2; order: 0 !important; position: sticky; top: 0; height: 100svh; align-self: start; }
  .buehne__bild img { aspect-ratio: auto; }
  .schmal { padding-left: 0; }
}

/* ---------- 5. Warum nicht einfach ChatGPT? ---------- */
.warum { background: var(--deep); color: var(--deep-ink); padding-block: calc(var(--section) * 0.75); }
.warum :focus-visible { outline-color: var(--deep-ink); }
.warum__raster { display: grid; gap: 2.5rem; }
.warum__kopf { display: grid; gap: 1.25rem; align-content: start; }
.warum__kopf .kopf { color: var(--paper); }
.gruende { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.grund h3 { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.015em; color: var(--paper); margin-bottom: 0.75rem; }
.grund p { max-width: 54ch; }

@media (min-width: 56.25em) {
  .warum__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .warum__kopf { grid-column: 1 / 6; position: sticky; top: 2rem; align-self: start; }
  .gruende { grid-column: 7 / 13; padding-top: 0.5rem; }
}
@media (min-width: 68.75em) {
  .warum__kopf { grid-column: 1 / 5; }
  .gruende { grid-column: 6 / 12; }
}

/* ---------- 6. Wo wir aufhören, Hilfe ---------- */
.grenzen { display: grid; grid-template-columns: minmax(0, 1fr); }
.grenzen__text { padding: calc(var(--section) / 2) var(--margin); }
.grenzen__text .kopf { margin-bottom: 1.5rem; }
.hilfe { background: var(--blush); padding: var(--pad) var(--margin); }
.hilfe__titel { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 1rem; font-weight: 500; }
.hilfe p { max-width: 44ch; }
.nummer {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.3rem;
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration-color: rgba(30, 37, 33, 0.45);
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
.nummer--klein { font-size: inherit; padding-block: 0.55rem; margin-block: 0.25rem; } /* 8px zwischen zwei Hilfetelefonen, gegen Fehltipps */
.hilfe__weitere { line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { .nummer:hover { text-decoration-color: currentColor; color: var(--accent); } }

@media (min-width: 56.25em) {
  .grenzen { grid-template-columns: 45fr 55fr; }
  .grenzen__text { padding: calc(var(--section) / 2) var(--pad) calc(var(--section) / 2) var(--margin); }
  .hilfe { display: flex; flex-direction: column; justify-content: center; padding: var(--section) var(--pad) calc(var(--section) / 2); }
}

/* ---------- 7. Fachleute ---------- */
.fachleute { display: grid; gap: 3rem; padding-block: calc(var(--section) / 2); }
.fachleute__kopf { display: grid; gap: 2.5rem; align-content: start; }
.fachleute__mensch h3, .buecher h3 { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 0.75rem; }
.buecher__einstieg { font-weight: 500; }
.buecher__liste { margin-top: 1rem; }
.buecher__liste a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-block: 0.6rem;
  text-decoration: none;
}
.buecher__liste cite { font-weight: 500; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .buecher__liste a:hover cite { text-decoration-color: currentColor; } }
.buecher__hinweis { margin-top: 1.25rem; font-size: var(--step-small); letter-spacing: 0; color: var(--muted); max-width: 52ch; }

@media (min-width: 56.25em) {
  .fachleute { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .fachleute__kopf { grid-column: 1 / 6; }
  .buecher { grid-column: 7 / 13; max-width: 40rem; }
  .buecher__liste a { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1.5rem; min-height: 2.75rem; padding-block: 0.35rem; }
  .buecher__liste cite { text-align: right; }
}

/* ---------- 8. Eure Daten ---------- */
.daten { background: var(--slate); padding-block: calc(var(--section) * 0.6); }
.daten__raster { display: grid; gap: 2rem; }
.daten__text p { max-width: 40ch; break-inside: avoid; }
.daten__text p + p { margin-top: 1.25rem; }
.daten a { font-weight: 500; }

@media (min-width: 56.25em) {
  .daten__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .daten__raster h2 { grid-column: 1 / 4; }
  .daten__text { grid-column: 5 / 13; columns: 2; column-gap: 3.5rem; }
  .daten__text p + p { margin-top: 0; }
  .daten__text p { margin-bottom: 1.25rem; }
}

/* ---------- 9. So fangt ihr an ---------- */
.anfangen { padding-top: calc(var(--section) / 2); }
.anfangen .kopf { margin-bottom: clamp(2rem, 5vw, 4rem); }
.schritte { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.schritt h3 { font-size: var(--step-sub); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 0.6rem; }
.schritt p { max-width: 40ch; }
.schritt__knopf { margin-top: 1.25rem; }

.schluss { position: relative; margin-top: calc(var(--section) / 2); }
.schluss__bild { margin: 0; height: 70svh; overflow: hidden; }
.schluss__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 45%; }
.schluss__text { background: var(--deep); color: var(--deep-ink); padding: 2.5rem var(--margin) 3rem; display: grid; gap: 1.75rem; }
.schluss__text :focus-visible { outline-color: var(--deep-ink); }
.einladung figcaption { margin-bottom: 0.6rem; }
.einladung blockquote { margin: 0; }
.einladung blockquote p { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.015em; color: var(--paper); max-width: 30ch; }

@media (min-width: 56.25em) {
  .anfangen > .rand { display: grid; grid-template-columns: 45fr 55fr; align-items: start; }
  .anfangen .kopf { position: sticky; top: 2rem; margin-bottom: 0; padding-right: var(--pad); }
  .schritte { padding-left: var(--pad); }
  .schritt:nth-child(2) { margin-left: 4vw; }
  .schritt:nth-child(3) { margin-left: 8vw; }
  .schritt:nth-child(4) { margin-left: 12vw; }
  .schritt p { margin-left: 0.2rem; }
  .schluss { height: 90svh; min-height: 36rem; }
  .schluss__bild { position: absolute; inset: 0; height: auto; }
  .schluss__bild img { filter: brightness(0.82); }
  .schluss__bild::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 14, 12, 0.62) 0%, rgba(10, 14, 12, 0.4) 40%, rgba(10, 14, 12, 0) 62%); /* neutraler Schleier unter Text auf dem Foto, erlaubte Ausnahme. taste-skill-ignore */
  }
  /* Wer mehr Kontrast eingestellt hat, liest auf fast fester Fläche. */
  @media (prefers-contrast: more) {
    .schluss__bild::after { background: linear-gradient(90deg, rgba(10, 14, 12, 0.85) 0%, rgba(10, 14, 12, 0.8) 50%, rgba(10, 14, 12, 0.2) 70%); } /* taste-skill-ignore */
  }
  .schluss__text {
    position: absolute;
    left: var(--margin);
    bottom: 12svh;
    width: min(44%, 36rem);
    padding: 0;
    background: none;
    color: var(--paper);
  }
}

/* ---------- 10. Für Fachleute ---------- */
.kontakt { background: var(--sage); padding-block: calc(var(--section) * 0.6); }
.kontakt .kopf { margin-bottom: 1.5rem; }
.kontakt__text { font-size: var(--step-body); line-height: 1.5; letter-spacing: -0.01em; max-width: 52ch; }
.kontakt__zeile { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: none; }
.kontakt__mail {
  display: inline-block;
  font-size: min(var(--step-head), 8.4vw);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 400;
  text-decoration-thickness: 0.05em;
  text-decoration-color: rgba(30, 37, 33, 0.35);
  min-height: 44px;
  padding-block: 0.15em;
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .kontakt__mail:hover { color: var(--accent); text-decoration-color: currentColor; } }
@media (min-width: 56.25em) {
  .kontakt > .rand { display: grid; grid-template-columns: 45fr 55fr; align-items: end; }
  .kontakt__text { padding-right: var(--pad); }
  .kontakt__zeile { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; padding-left: var(--pad); }
}

/* ---------- 11. Fuß ---------- */
.fuss { position: relative; min-height: 88svh; overflow: hidden; color: var(--paper); background: var(--foot); }
.fuss__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 18%; filter: brightness(0.62); }
.fuss__inhalt { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 88svh; padding: var(--margin); }
.fuss__name { font-size: 26vw; line-height: 0.8; letter-spacing: -0.06em; font-weight: 500; margin-left: -0.04em; max-width: none; }
.fuss__hilfe { margin-top: 1.5rem; max-width: none; }
.fuss__hilfe .nummer { display: inline; min-height: 0; padding-block: 0; font-size: inherit; text-decoration-color: rgba(233, 230, 226, 0.5); }
.fuss__zeile { margin-top: 0.5rem; font-size: var(--step-small); letter-spacing: 0; max-width: 90ch; }
/* Mitten im Satz: Tippfläche über ein unsichtbares Feld, damit die Zeile nicht höher wird als ihre Nachbarn */
.fuss__hilfe .nummer, .fuss__zeile a { position: relative; }
.fuss__hilfe .nummer::after, .fuss__zeile a::after { content: ""; position: absolute; inset: -0.875rem -0.25rem; }
.fuss :focus-visible { outline-color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .fuss .nummer:hover { color: var(--light); } }
@media (min-width: 56.25em) {
  .fuss, .fuss__inhalt { min-height: 100svh; }
  .fuss__bild { object-position: 50% 22%; }
  .fuss__name { font-size: 22vw; }
}

/* ---------- Bewegung: Inhalt bleibt ohne Skript sichtbar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* Einmal ankommen, unter fünf Sekunden: Dauerbewegung neben Text bräuchte eine Pause-Taste (WCAG 2.2.2). */
  .hero__bild img { animation: ankommen 4.5s var(--ease-soft) both; transform-origin: 70% 40%; }
  .buehne__bild img, .schluss__bild img { transform: scale(1.06); transition: transform 1600ms var(--ease-soft); }
  .js .buehne__bild.is-in img, .js .schluss__bild.is-in img { transform: none; }
  html { scroll-behavior: smooth; }
}
/* Signatur „Slow crossfade“: Ab 900px blendet das stehende Foto der Bühne über, sobald links der passende
   Abschnitt die Bildmitte erreicht. Nur mit Skript und ohne Wunsch nach weniger Bewegung, sonst schiebt
   sich wie bisher jedes Foto über das vorige. */
@media (min-width: 56.25em) and (prefers-reduced-motion: no-preference) {
  .buehne--blende .buehne__teil:nth-child(1) .buehne__lesen { grid-row: 1; }
  .buehne--blende .buehne__teil:nth-child(2) .buehne__lesen { grid-row: 2; }
  .buehne--blende .buehne__teil:nth-child(3) .buehne__lesen { grid-row: 3; }
  .js .buehne--blende .buehne__bild[data-reveal] {
    grid-row: 1 / span 3;
    opacity: 0;
    transform: none;
    transition: opacity 1600ms var(--ease-soft);
  }
  /* Stapel wie Abzüge: feste Reihenfolge, sichtbar ist jedes Foto bis zum aktuellen. Darunter liegt immer ein
     volles Bild, also scheint beim Wechsel kein Grund durch, auch nicht beim Zurücklesen oder Überspringen. */
  .js .buehne--blende .buehne__teil:nth-child(2) .buehne__bild { z-index: 2; }
  .js .buehne--blende .buehne__teil:nth-child(3) .buehne__bild { z-index: 3; }
  .js .buehne--blende .buehne__bild.ist-sichtbar[data-reveal] { opacity: 1; }
  .js .buehne--blende .buehne__bild img { transform: scale(1.05); transition: transform 7000ms var(--ease-soft); }
  .js .buehne--blende .buehne__bild.ist-sichtbar img { transform: none; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes ankommen { from { transform: scale(1.06); } }

/* Hinweis beim Start (16.10.2026, Max: Seite wie abgenommen, erst der Klick in den Chat erklärt). */
.hinweis { width: min(34rem, calc(100vw - 32px)); max-width: none; padding: clamp(1.5rem, 5vw, 2.5rem); border: 0; border-radius: 1rem; background: var(--paper); color: var(--ink); box-shadow: 0 24px 64px rgba(10, 14, 12, 0.35); }
.hinweis::backdrop { background: rgba(10, 14, 12, 0.6); }
.hinweis h2 { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; margin-bottom: 1rem; }
.hinweis p { margin-bottom: 0.9rem; max-width: none; }
.hinweis a { color: var(--accent); text-underline-offset: 0.15em; position: relative; white-space: nowrap; }
.hinweis a::after { content: ""; position: absolute; inset: -0.875rem -0.25rem; }
.hinweis form { margin-top: 1.5rem; }
.hinweis .knopf { border: 0; font: inherit; cursor: pointer; }