/* =====================================================================
   JB Reitsport · „Noir“ – Startseite (index.html)
   Nur seitenspezifisch, alle Klassen mit Präfix st-. Basis/Komponenten: css/site.css
   Dramaturgie (Review 23.10.): Hero Bebas · Grundsatz zentriert in Serif (globale .quote-stage) · WARUM? im Lichtspalt ·
   Leistungen Bebas · Ablauf Serif · Werte asymmetrisch versetzt · Über mich vollflächig mit Text im Bild ·
   Einblicke Serif · Fragen Bebas · Abschluss Serif. Champagner-Kursiv nur zweimal: „finden.“ und „warum.“
   ===================================================================== */

/* ---------------------------------------------------------------- Hero (150838, eigene Noir-Hero-Fassung) */
.st-hero .hero__media img { object-position: 50% 22%; }
/* Maskenzeilen mit Deckkraft-Blende (hero-line) und die flachen Mobil-Fenster (.hero--split) stehen jetzt global in site.css. */

/* ---------------------------------------------------------------- Grundsatz: globale Zitat-Bühne (.quote-stage, site.css) */
.st-credo .quote em { padding-right: .02em; }

/* ---------------------------------------------------------------- WARUM? – Lichtspalt
   Desktop: das Foto öffnet sich scroll-gekoppelt aus einem Champagner-Lichtspalt (wie Intro und Seitenübergang),
   das Pferd schaut dich an, „Warum?“ füllt sich mit Licht. Mobil: 4:5-Bild, Scrub 1,15 → 1, Wort füllt sich.
   Ruhige Fassung/ohne GSAP: Bild steht, Wort ist gefüllt. */
.st-why { position: relative; padding: 0 0 var(--sec); overflow: hidden; overflow: clip; }
.st-why__stage { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--night); isolation: isolate; }
.st-why__media { position: absolute; inset: 0; }
.st-why__media::after {   /* Abnahme 24.10.: stehendes Korn über dem Fuchs-Close-up (wie .bleed__media::before) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../assets/grain.png") repeat; background-size: 180px 180px; opacity: .1;
}
.st-why__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform-origin: 30% 30%; }
.st-why__shade {   /* jb4: kein Rundum-Schleier mehr, nur noch Grund für das Wort an der Unterkante */
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--night) 0%, rgba(var(--night-rgb), 0) 12%, rgba(var(--night-rgb), 0) 52%, rgba(var(--night-rgb), .66) 78%, var(--night) 100%),
    radial-gradient(ellipse 90% 80% at 50% 34%, rgba(var(--night-rgb), 0) 52%, rgba(var(--night-rgb), .3) 100%);
}
.st-why__slit {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: min(42vw, 460px); height: 1px; margin-left: calc(min(42vw, 460px) / -2);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0), var(--accent) 24%, var(--accent-hi) 50%, var(--accent) 76%, rgba(var(--accent-rgb), 0));
  opacity: 0; pointer-events: none;
}
.st-why__word {
  position: absolute; left: 0; right: 0; bottom: 3%; z-index: 3;
  margin: 0; padding: .06em .02em 0; text-align: center;
  font: 400 33vw/.8 var(--f-display); text-transform: uppercase; letter-spacing: .005em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(var(--accent-rgb), .9);
  background: linear-gradient(0deg, var(--bone), var(--bone)) 50% 100% / 100% 100% no-repeat;   /* gefüllt; GSAP füllt von unten */
  -webkit-background-clip: text; background-clip: text;
  hyphens: manual;
}
@media (min-width: 1024px) {
  .st-why__stage { aspect-ratio: auto; height: clamp(560px, 94svh, 1000px); }
  .st-why__media img { object-position: 50% 30%; }   /* 145956: Augen auf 30 % der Bühne = Höhe des Lichtspalts */
  .st-why__word { font-size: min(31vw, 460px); bottom: 2%; -webkit-text-stroke-width: 1.5px; }
  .st-why__slit { top: 30%; }   /* Öffnungslinie auf Augenhöhe (js/start.js), vorher Bühnenmitte */
}
.st-why__intro { display: grid; gap: 26px; margin-top: clamp(28px, 4vw, 64px); }
.st-why__title { font-size: var(--fs-serif-l); }
.st-why__lead { margin: 0; color: var(--grey); max-width: 44ch; }
.st-why__lead strong { color: var(--bone); }
/* Zusatzrunde: Leitfragen und die sechs Ursachen wohnen auf philosophie.html – hier eine Teaser-Zeile mit Link */
.st-why__teaser {
  display: grid; gap: 18px; justify-items: start;
  margin-top: clamp(40px, 5vw, 72px); padding-top: 22px; border-top: 1px solid var(--line);
}
.st-why__line { margin: 0; max-width: 62ch; color: var(--grey); font-size: 17px; }
.st-why__line .label { display: inline; margin-right: .7em; }
@media (min-width: 1024px) {
  .st-why__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: end; }
  .st-why__lead { padding-bottom: .5em; }
  .st-why__teaser { grid-template-columns: 1fr auto; align-items: baseline; column-gap: 48px; }
  .st-why__line { font-size: 18px; }
}

/* ---------------------------------------------------------------- Körperkarte (jb4, neu)
   Ein Pferd im Profil (KI-Studiobild auf Schwarz), darüber die Muskelgruppen als feine Champagnerlinien (SVG im
   Bildmaß, viewBox = Bildpixel). Desktop: Beschriftungen um das Pferd mit Führungslinien, darunter die Erklärung.
   Mobil: Bild randlos, darunter eine Wischreihe der sechs Bereiche und die Erklärung. Erster Blick: die Linien zeichnen
   sich, danach führt die Karte langsam durch die Bereiche, bis du selbst wählst (js/start.js · Körperkarte).
   Ruhige Fassung: Linien blenden ein, keine Führung, kein Puls. */
.st-anat { overflow: clip; }
.st-anat__head { margin-bottom: clamp(28px, 4vw, 56px); }
.st-anat__title { font-size: var(--fs-serif-l); }
.st-anat__title em { font-style: italic; }
.st-anat__hint { margin: 18px 0 0; display: flex; align-items: center; gap: 12px; font: 600 var(--fs-label)/1.3 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--grey); }
.st-anat__hint::before { content: ""; width: 22px; height: 1px; background: var(--accent); flex: none; }
.st-anat__hint-touch { display: none; }
@media (hover: none) { .st-anat__hint-touch { display: inline; } .st-anat__hint-mouse { display: none; } }

.st-anat__body { position: relative; }
.st-anat__stage {
  position: relative; margin: 0 calc(-1 * var(--gutter));
  aspect-ratio: var(--anat-ar, 3 / 2); background: var(--night); overflow: hidden;
}
.st-anat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-anat__stage::after {        /* Bildränder weich ins Seitenschwarz (das Studioschwarz ist minimal heller) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--night), inset 0 0 48px 18px var(--night);
}
.st-anat__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-anat__svg * { vector-effect: non-scaling-stroke; }
/* Muskeln: Kontur zeichnet sich (pathLength = 1), Schraffur der Faserrichtung erscheint beim gewählten Bereich */
.st-anat__muscle {
  fill: transparent; stroke: rgba(var(--accent-rgb), .9); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-inout), stroke .6s var(--ease-std), stroke-width .4s var(--ease-std);
  transition-delay: calc(var(--i, 0) * .09s);
  cursor: pointer; pointer-events: visiblePainted;
}
.st-anat__tendon { fill: none; }
.st-anat__fiber { fill: none; stroke: rgba(var(--accent-rgb), .5); stroke-width: 1; }
.st-anat__fill { fill: rgba(var(--accent-rgb), .0); stroke: none; pointer-events: none; transition: fill .7s var(--ease-std); }
.st-anat__hatch { opacity: 0; pointer-events: none; transition: opacity .8s var(--ease-std); }
.st-anat__zone { transition: opacity .7s var(--ease-std); }
.st-anat.is-drawn .st-anat__muscle { stroke-dashoffset: 0; }
.st-anat.is-drawn .st-anat__zone:not(.is-active) .st-anat__muscle { stroke: rgba(var(--accent-rgb), .34); }
.st-anat__zone.is-active .st-anat__muscle { stroke: var(--accent-hi); stroke-width: 1.5; }
.st-anat__zone.is-active .st-anat__fill { fill: rgba(var(--accent-rgb), .14); }
.st-anat__zone.is-active .st-anat__hatch { opacity: 1; }
.st-anat__zone:hover .st-anat__muscle { stroke: var(--accent-hi); }
/* Markierung am Körper: kleines Quadrat, beim gewählten Bereich mit wanderndem Rahmen (Puls) */
.st-anat__mark { fill: var(--night); stroke: var(--accent); stroke-width: 1.2; opacity: 0; transition: opacity .6s var(--ease-std); }
.st-anat__zone.is-active .st-anat__mark { fill: var(--accent); }
.st-anat.is-drawn .st-anat__mark { opacity: 1; transition-delay: calc(.9s + var(--i, 0) * .09s); }
.st-anat__pulse { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.st-anat__zone.is-active .st-anat__pulse { animation: anat-pulse 2.4s var(--ease-out) infinite; }
@keyframes anat-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
/* Führungslinien zu den Beschriftungen (nur Desktop) */
.st-anat__lead { fill: none; stroke: rgba(var(--bone-rgb), .4); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-inout), stroke .5s var(--ease-std); transition-delay: calc(1s + var(--i, 0) * .09s); display: none; }
.st-anat.is-drawn .st-anat__lead { stroke-dashoffset: 0; }
.st-anat__zone.is-active .st-anat__lead { stroke: var(--accent); }

/* jb4 Licht: eine warme Lichtlinie (--bx in % der Bühnenbreite) fährt beim ersten Blick einmal über das Pferd und
   zeichnet dabei die Muskeln frei; danach steht sie beim gewählten Bereich. Wo sie steht, glänzt das Fell
   (vorgerechnete Glanzschicht, mix-blend-mode: screen). Mit dem Finger (mobil) bzw. der Maus lässt sie sich ziehen. */
.st-anat__stage { --bx: -20%; --glanz: 0; --beam: 0; touch-action: pan-y; }
.st-anat__glanz {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  mix-blend-mode: screen; opacity: var(--glanz);
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--bx) - 13%), #000 var(--bx), transparent calc(var(--bx) + 13%));
          mask-image: linear-gradient(90deg, transparent calc(var(--bx) - 13%), #000 var(--bx), transparent calc(var(--bx) + 13%));
}
.st-anat__beam {
  position: absolute; top: 0; bottom: 0; left: var(--bx); width: 1px; margin-left: -.5px; pointer-events: none;
  background: linear-gradient(180deg, rgba(226, 207, 166, 0), rgba(226, 207, 166, .85) 16%, rgba(226, 207, 166, .85) 84%, rgba(226, 207, 166, 0));
  box-shadow: 0 0 16px 3px rgba(255, 214, 160, .32);
  opacity: var(--beam);
}
.st-anat__griff {
  display: none; position: absolute; bottom: 12px; left: var(--bx); width: 34px; height: 34px; margin-left: -17px;
  border: 1px solid rgba(226, 207, 166, .85); background: rgba(var(--night-rgb), .55); pointer-events: none;
  opacity: var(--beam);
}
.st-anat__griff::before, .st-anat__griff::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-left: 1px solid var(--accent-hi); border-bottom: 1px solid var(--accent-hi);
}
.st-anat__griff::before { left: 8px; transform: rotate(45deg); }
.st-anat__griff::after { right: 8px; transform: rotate(-135deg); }
@media (hover: none) { .st-anat.is-drawn .st-anat__griff { display: block; } }
.st-anat__svg { transition: opacity .6s var(--ease-std); }
.js .st-anat:not(.is-drawn) .st-anat__svg { opacity: 0; }
.st-anat.is-sweeping .st-anat__svg {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--bx) - 2%), transparent calc(var(--bx) + 2%));
          mask-image: linear-gradient(90deg, #000 calc(var(--bx) - 2%), transparent calc(var(--bx) + 2%));
}
/* Konturen werden freigelegt statt nachgezeichnet */
.st-anat__muscle { stroke-dasharray: none; stroke-dashoffset: 0; }

/* Bereiche: mobil eine Wischreihe unter dem Bild, Desktop Beschriftungen um das Pferd */
.st-anat__tabs {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  margin: 18px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 2px; scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
}
.st-anat__tabs::-webkit-scrollbar { display: none; }
.st-anat__tab {
  flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px;
  border: 1px solid var(--hair); background: transparent; color: var(--grey); cursor: pointer;
  font: 600 13px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color .3s var(--ease-std), border-color .3s var(--ease-std), background-color .3s var(--ease-std), opacity .6s var(--ease-std);
}
.st-anat__tab-no { font: 400 18px/1 var(--f-display); letter-spacing: .04em; color: var(--accent); padding-top: .1em; }
.st-anat__tab:hover { color: var(--bone); border-color: rgba(var(--accent-rgb), .5); }
.st-anat__tab[aria-selected="true"] { color: var(--bone); border-color: var(--accent); background: rgba(var(--accent-rgb), .07); }
.st-anat__tab:focus-visible { outline-offset: 2px; }

/* Erklärung: Nummer · Titel · Muskeln · Text, Wechsel als kurze Blende */
.st-anat__panels { position: relative; display: grid; margin-top: 26px; }
.st-anat__pane { grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; }
.st-anat__pane[hidden] { display: none !important; }
.st-anat__pane.is-entering { animation: anat-in .7s var(--ease-out) both; }
@keyframes anat-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.st-anat__no { margin: 0; font: 400 20px/1 var(--f-display); letter-spacing: .06em; color: var(--accent); }
.st-anat__no span { color: var(--grey); }
.st-anat__h { margin: 0; font: 400 clamp(32px, 8.6vw, 44px)/1.02 var(--f-serif); letter-spacing: -.012em; color: var(--bone); }
.st-anat__muscles { display: grid; gap: 0; margin: 4px 0 0; border-top: 1px solid var(--line); }
.st-anat__muscles li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--bone); }
.st-anat__muscles i { font: italic 400 17px/1.2 var(--f-serif); color: var(--grey); }
.st-anat__text { margin: 6px 0 0; color: var(--grey); max-width: 52ch; }
.st-anat__progress { display: block; height: 1px; margin-top: 24px; background: var(--line); overflow: hidden; }
.st-anat__progress span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.st-anat__foot { display: grid; gap: 14px; justify-items: start; margin-top: 30px; }
.st-anat__note { margin: 0; font-size: 15px; color: var(--grey); max-width: 52ch; }

@media (min-width: 768px) {
  .st-anat__stage { margin: 0; }
}
@media (min-width: 1024px) {
  /* Bühne im Bildformat, so groß, wie der Bildschirm es erlaubt; Beschriftungen liegen im Studioschwarz um das Pferd */
  .st-anat__stage { width: min(100%, calc((100svh - var(--header-h) - 120px) * var(--anat-ar-n, 1.5))); margin-inline: auto; }
  .st-anat__lead { display: inline; }
  .st-anat__tabs {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: block; margin: 0; padding: 0; overflow: visible; pointer-events: none;
    width: min(100%, calc((100svh - var(--header-h) - 120px) * var(--anat-ar-n, 1.5))); margin-inline: auto;
    aspect-ratio: var(--anat-ar, 3 / 2);
  }
  .st-anat__tab {
    position: absolute; left: var(--lx); top: var(--ly); pointer-events: auto;
    min-height: 40px; padding: 0 12px; border-color: transparent; background: none; gap: 10px;
    transform: translate(var(--tx, 0), -50%); opacity: 0;
  }
  .st-anat.is-drawn .st-anat__tab { opacity: 1; transition-delay: calc(1.3s + var(--i, 0) * .09s), 0s, 0s, 0s; }
  .st-anat__tab[aria-selected="true"] { background: rgba(var(--night-rgb), .55); border-color: rgba(var(--accent-rgb), .7); }
  .st-anat__tab:hover { border-color: rgba(var(--accent-rgb), .45); }
  .st-anat__panels {
    grid-template-columns: minmax(0, 1fr); max-width: 1180px; margin: 40px auto 0;
  }
  .st-anat__pane { grid-template-columns: 90px minmax(0, 4fr) minmax(0, 5fr); column-gap: 40px; align-items: start; }
  .st-anat__no { grid-row: 1 / span 3; font-size: 56px; line-height: .8; }
  .st-anat__no span { display: block; margin-top: 8px; font-size: 16px; }
  .st-anat__h { grid-column: 2; font-size: clamp(38px, 3vw, 52px); }
  .st-anat__muscles { grid-column: 3; grid-row: 1 / span 3; margin: 0; }
  .st-anat__text { grid-column: 2; margin: 0; font-size: 18px; }
  .st-anat .st-anat__hint { margin-top: 0; }
  .st-anat__foot { max-width: 1180px; margin: 34px auto 0; grid-template-columns: 1fr auto; align-items: center; column-gap: 40px; }
  .st-anat__progress { max-width: 1180px; margin: 30px auto 0; }
}
/* ruhige Fassung: Linien und Markierungen blenden nur ein, kein Puls, keine Führung */
@media (prefers-reduced-motion: reduce) {
  .st-anat__muscle, .st-anat__lead { stroke-dashoffset: 0 !important; opacity: 0; transition: opacity 1s ease, stroke .6s ease; }
  .st-anat.is-drawn .st-anat__muscle, .st-anat.is-drawn .st-anat__lead { opacity: 1; }
  .st-anat__zone.is-active .st-anat__pulse { animation: none; }
  .st-anat__pane.is-entering { animation: hero-fade .5s ease both; }
  .st-anat__progress { display: none; }
  .st-anat__beam, .st-anat__griff { display: none !important; }
  .st-anat__glanz { transition: opacity .8s ease; }
}
.no-anim .st-anat__muscle, .no-anim .st-anat__lead { stroke-dashoffset: 0; }
.no-anim .st-anat__mark, .no-anim .st-anat__tab { opacity: 1; }

/* ---------------------------------------------------------------- Leistungen: Filmplakate */
.st-posters { --swipe-w: 82%; }
.st-poster { position: relative; isolation: isolate; display: flex; flex-direction: column; }
.st-poster__img {
  width: 100%; aspect-ratio: 4 / 5; height: auto;
  object-fit: cover; object-position: var(--pos, 50% 40%); border-radius: var(--r);
  background: var(--graphite);
}
.st-poster__shade {
  position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 58%, rgba(var(--night-rgb), .9) 100%);
  pointer-events: none;
}
.st-poster__vtitle { display: none; }
.st-poster__content { position: relative; margin-top: -78px; padding: 0 4px; }
.st-poster__h { margin: 0; }
.st-poster__btn { display: none; }
.st-poster__no { display: block; margin-bottom: 10px; font: 400 26px/1 var(--f-display); letter-spacing: .04em; color: var(--accent); }
.st-poster__title {
  display: block;
  font: 400 clamp(34px, 9.4vw, 56px)/.92 var(--f-display);
  text-transform: uppercase; letter-spacing: .01em; color: var(--bone);
  hyphens: manual; -webkit-hyphens: manual; text-wrap: balance;
}
.st-poster__body p { margin: 16px 0 6px; color: rgba(var(--bone-rgb), .84); max-width: 42ch; font-size: 16px; }
.st-poster__links { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 0 22px; }
/* Mobil/Tablet (Review 3): die angeschnittene Folgekarte zeigt nur Bild und Nummer – Titel, Fließtext und Links
   erscheinen erst, wenn die Karte im Blick ist (.is-near aus js/start.js), sonst standen abgeschnittene Wörter
   („Nach eine…“, „REHAB…“) da */
@media (max-width: 1023.98px) {
  .js .st-poster__title, .js .st-poster__body { opacity: 0; transition: opacity .5s var(--ease-std); }
  .js .st-poster.is-near .st-poster__title, .js .st-poster.is-near .st-poster__body,
  .js .st-poster:focus-within .st-poster__title, .js .st-poster:focus-within .st-poster__body { opacity: 1; }
  .no-anim .st-poster__title, .no-anim .st-poster__body { opacity: 1; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .st-posters { --swipe-w: 44%; }
  .st-poster__title { font-size: 44px; }
}

@media (min-width: 1024px) {
  .st-posters-wrap .swipe__ui { display: none; }
  .st-posters.swipe__track {
    --open-w: calc((min(100vw, var(--maxw)) - 2 * var(--gutter) - 42px) * 3.2 / 6.2);
    display: flex; gap: 14px;
    max-width: var(--maxw); margin-inline: auto;
    overflow: visible; scroll-snap-type: none;
    height: clamp(580px, 78svh, 820px);
    padding-bottom: 0;
  }
  .st-poster {
    flex: 1 1 0; min-width: 0;
    justify-content: flex-end;
    overflow: hidden; border-radius: var(--r);
    background: var(--graphite);
    transition: flex-grow .95s var(--ease-inout);
  }
  .st-poster.is-open { flex-grow: 3.2; }
  /* Review 3: geschlossene Plakate nicht mehr fast schwarz – Halbdunkel statt Grauschleier, Ausschnitt auf Pferdekopf
     bzw. Gesicht (--pos-c); beim Öffnen fährt die „Kamera“ auf den vollen Bildausschnitt (--pos). */
  .st-poster__img {
    position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0;
    object-position: var(--pos-c, var(--pos, 50% 40%));
    filter: grayscale(.12) brightness(.86);      /* jb4: geschlossene Plakate nur leicht zurückgenommen (vorher .72) */
    transform: scale(1.08);
    transition: filter .9s var(--ease-std), transform 1.6s var(--ease-out), object-position .95s var(--ease-inout);
  }
  .st-poster.is-open .st-poster__img { filter: none; transform: scale(1); object-position: var(--pos, 50% 40%); }
  .st-poster:not(.is-open):hover .st-poster__img { filter: grayscale(.04) brightness(.95); }
  .st-poster__shade {
    inset: 0; aspect-ratio: auto; border-radius: 0;
    background:
      linear-gradient(180deg, rgba(var(--night-rgb), .4) 0%, rgba(var(--night-rgb), 0) 14%),
      linear-gradient(0deg, rgba(var(--night-rgb), .78) 0%, rgba(var(--night-rgb), .34) 28%, rgba(var(--night-rgb), 0) 50%);
  }
  /* große Plakatnummer oben links */
  .st-poster::before {
    content: attr(data-no);
    position: absolute; top: 24px; left: 24px; z-index: 1;
    font: 400 30px/1 var(--f-display); letter-spacing: .02em; color: var(--accent);
    pointer-events: none;
  }
  /* Rücken-Titel wie auf einem Buch-/Filmrücken: Instrument Serif aufrecht statt Bebas-Versalien (Review 3 –
     Bebas senkrecht wirkte wie die bekannte „Expanding Cards“-Vorlage) */
  .st-poster__vtitle {
    display: block; position: absolute; left: 20px; bottom: 28px; z-index: 1;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font: 400 clamp(38px, 3vw, 50px)/1 var(--f-serif); letter-spacing: -.005em;
    color: var(--bone); white-space: nowrap;
    text-shadow: 0 1px 18px rgba(var(--night-rgb), .55);
    transition: opacity .4s var(--ease-std) .35s;
    pointer-events: none;
  }
  .st-poster.is-open .st-poster__vtitle { opacity: 0; transition-delay: 0s; transition-duration: .2s; }
  .st-poster__content {
    position: static; z-index: 1;
    width: var(--open-w); flex: none;
    margin: 0; padding: 0 32px 30px;
  }
  /* ganzes Plakat ist der Knopf (Titel bleibt eine h3 außerhalb des Knopfs) */
  .st-poster__btn { display: block; position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; border-radius: var(--r); background: none; cursor: pointer; }
  .st-poster.is-open .st-poster__btn { cursor: default; }
  .st-poster__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .st-poster__no { display: none; }
  .st-poster__title { position: relative; z-index: 1; font-size: clamp(46px, 4.4vw, 76px); max-width: 100%; }
  .st-poster__title, .st-poster__body {
    opacity: 0; transform: translate3d(0, 16px, 0);
    transition: opacity .35s var(--ease-std), transform .5s var(--ease-out);
  }
  .st-poster__body { position: relative; z-index: 3; visibility: hidden; transition: opacity .35s var(--ease-std), transform .5s var(--ease-out), visibility 0s .35s; }
  .st-poster.is-open .st-poster__title, .st-poster.is-open .st-poster__body {
    opacity: 1; transform: none; visibility: visible;
    transition: opacity .7s var(--ease-std) .42s, transform 1s var(--ease-out) .42s, visibility 0s;
  }
  .st-poster.is-open .st-poster__body { transition-delay: .52s, .52s, 0s; }
  .st-poster__body p { font-size: 18px; max-width: 40ch; margin: 18px 0 8px; }
}
.is-resizing .st-poster, .is-resizing .st-poster * { transition: none !important; }

/* ---------------------------------------------------------------- Ablauf: Schritte + Fotofilm
   Achtung: Sektionen mit position: sticky nie mit overflow: hidden (macht die Sektion zum Scroll-Container,
   der Fotofilm klebt dann nicht) – overflow: clip schneidet genauso ab, ohne Sticky zu brechen. */
.st-steps { overflow: clip; }
.st-steps__grid { display: grid; gap: 0; padding-inline: 0; }
.st-steps__head { padding-inline: var(--gutter); margin-bottom: 36px; }
.st-steps__title { font-size: var(--fs-serif-l); }
.st-steps__media { padding-inline: var(--gutter); margin-bottom: 40px; }
.st-steps__film .fotofilm__frames { aspect-ratio: 4 / 4.4; }
/* Bildregie (Review 3): enger auf Jennifer und ihre Hände am Hinterbein, weniger Kruppe und Flanke; der Ken-Burns-Zug
   (data-zoom, js/site.js) fährt langsam auf die Hände zu. Das Bild ist größer als der Rahmen und links/oben versetzt. */
.st-steps__film .fotofilm__frame {
  inset: auto; left: -2%; top: -8%; width: 114%; height: 114%;
  object-position: 30% 84%; transform-origin: 30% 74%;
}
.st-steps__swipe { position: relative; padding-inline: var(--gutter); }
.st-steps__list { display: grid; }
/* mobil: keine Karten, keine Wisch-Leiste – Ziffer links, Text rechts, Haarlinien wie ein Abspann */
.st-step {
  position: relative;
  display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; align-items: start;
  padding: 26px 0 30px; border-top: 1px solid var(--line);
}
.st-step:last-child { border-bottom: 1px solid var(--line); }
.st-step__no {
  display: block;
  font: 400 clamp(76px, 21vw, 96px)/.78 var(--f-display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--bone-rgb), .42);
  background: linear-gradient(var(--accent), var(--accent));   /* jb4: flaches Champagner statt Messing-Verlauf */
  -webkit-background-clip: text; background-clip: text;
  background-size: 100% 0%; background-repeat: no-repeat; background-position: 50% 100%;
  transition: background-size 1.1s var(--ease-inout), -webkit-text-stroke-color .8s var(--ease-std);
}
.st-step.is-active .st-step__no { background-size: 100% 100%; -webkit-text-stroke-color: rgba(var(--accent-rgb), .0); }
.st-step__title { font: 400 clamp(26px, 7vw, 34px)/1.08 var(--f-serif); letter-spacing: -.01em; margin-bottom: 10px; hyphens: manual; text-wrap: balance; }
.st-step__text p { margin: 0; color: var(--grey); max-width: 40ch; hyphens: manual; -webkit-hyphens: manual; }
.st-steps__rail { display: none; }
.st-steps__foot { display: grid; gap: 22px; justify-items: start; margin-top: 40px; padding-inline: var(--gutter); }
.st-steps__vet { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--grey); max-width: 52ch; font-size: 16px; }
.no-anim .st-step__no { background-size: 100% 100%; -webkit-text-stroke-color: transparent; }

@media (min-width: 1024px) {
  .st-steps__grid {
    grid-template-columns: 5fr 7fr; column-gap: clamp(48px, 6vw, 112px);
    grid-template-areas: "media head" "media list" "media foot";
    grid-template-rows: auto auto 1fr;
    padding-inline: var(--gutter);
  }
  .st-steps__head { grid-area: head; padding: 0; margin-bottom: 40px; }
  .st-steps__media { grid-area: media; padding: 0; margin: 0; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
  .st-steps__film .fotofilm__frames { aspect-ratio: 4 / 5.2; max-height: calc(100svh - var(--header-h) - 120px); width: auto; }
  .st-steps__swipe { grid-area: list; padding: 0; }
  .st-steps__list { padding: 0 0 0 44px; }
  .st-step { grid-template-columns: clamp(150px, 13vw, 210px) 1fr; column-gap: 28px; padding: 34px 0 40px; }
  .st-step__no { font-size: clamp(120px, 10vw, 176px); }
  .st-step__title { font-size: clamp(32px, 2.6vw, 42px); padding-top: 4px; }
  .st-step__text p { font-size: 18px; }
  .st-steps__rail { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
  .st-steps__rail-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: 50% 0; transform: scaleY(0); }
  .no-gsap .st-steps__rail-fill { transform: none; opacity: .5; }
  .st-steps__foot { grid-area: foot; padding: 0 0 0 44px; margin-top: 36px; align-content: start; }
}

/* ---------------------------------------------------------------- Über mich (jb4): zwei Porträts statt Text im Bild
   Kein Schleier: links Jenny lächelnd mit dem Rappen (150403), rechts Text und darunter das zweite Bild (145656) im
   Querformat. Mobil: Porträt, Text, zweites Bild eingerückt. */
.st-about__grid { display: grid; row-gap: 0; }
.st-about__portrait { position: relative; margin: 0 calc(-1 * var(--gutter)); overflow: hidden; aspect-ratio: 4 / 5; background: var(--graphite); }
.st-about__portrait img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 30% 30%; }
.st-about__content { position: relative; padding-top: 36px; }
.st-about__content .eyebrow { margin-bottom: 22px; }
.st-about__title { font-size: clamp(52px, 14vw, 84px); line-height: .96; margin-bottom: 26px; }
.st-about__text { max-width: 44ch; color: rgba(var(--bone-rgb), .88); }
.st-about__text em { font-family: var(--f-serif); font-size: 1.16em; line-height: 1; color: var(--bone); }
.st-about__stat { margin: 30px 0 22px; padding-top: 24px; border-top: 1px solid var(--line); }
.st-about__stat .stat__num { font-size: clamp(80px, 8vw, 128px); }
/* Werte nur noch als Teaser-Zeile (Zuhause: ueber-mich.html#umgang) */
.st-about__values { margin: 0 0 22px; max-width: 44ch; color: rgba(var(--bone-rgb), .88); font: italic 400 clamp(21px, 1.7vw, 25px)/1.3 var(--f-serif); }
.st-about__values a { display: inline-block; padding-block: 8px; margin-block: -8px; color: var(--accent-hi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(var(--accent-rgb), .5); }
.st-about__values a:hover { text-decoration-color: var(--accent); }
.st-about__second { width: 84%; justify-self: end; margin: 44px 0 0; }
.st-about__second .figure__frame { aspect-ratio: 3 / 2; }
.st-about__second .figure__frame img { object-position: 30% 40%; }
@media (min-width: 768px) {
  .st-about__portrait { margin: 0; }
}
@media (min-width: 1024px) {
  .st-about__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2vw, 32px);
    grid-template-rows: auto 1fr; align-items: start;
  }
  /* Porträt so hoch wie Text + zweites Bild (stretch), mindestens fast ein Bildschirm */
  .st-about__portrait { grid-column: 1 / span 5; grid-row: 1 / span 2; aspect-ratio: auto; align-self: stretch; height: auto; min-height: clamp(620px, 88svh, 900px); }
  .st-about__content { grid-column: 7 / span 6; grid-row: 1; padding-top: clamp(8px, 3svh, 40px); }
  .st-about__content > * { max-width: 500px; }
  .st-about__title { font-size: clamp(60px, 4.9vw, 92px); }
  .st-about__text { font-size: 19px; }
  .st-about__second { grid-column: 7 / span 4; grid-row: 2; align-self: end; justify-self: stretch; width: auto; margin: 56px 0 0; }
  .st-about__second .figure__cap { margin-top: 12px; }
}

/* ---------------------------------------------------------------- Einblicke: Filmstreifen */
.st-film { overflow: hidden; overflow: clip; }
.st-film__head { display: grid; gap: 16px; justify-items: start; margin-bottom: clamp(36px, 4.5vw, 64px); }
.st-film__title { font-size: var(--fs-serif-l); }
.st-film__lead { margin: 0; color: var(--grey); }
@media (min-width: 1024px) {
  .st-film__head { grid-template-columns: 1fr auto; align-items: end; column-gap: 48px; }
  .st-film__lead { grid-column: 1; }
  .st-film__more { grid-column: 2; grid-row: 1 / 3; align-self: end; }
}
/* Zusatzrunde: ruhige Reihe statt Filmstreifen mit Perforation – fünf Kacheln in Noir-Hero-Fassung, Desktop als
   versetzte Reihe (2. und 4. tiefer), mobil Wisch-Leiste. Kein Scrub, keine Randnummern. */
.st-film__track { --swipe-w: 72%; --swipe-gap: 14px; }
.st-film__frame { position: relative; margin: 0; }
.st-film__img { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--graphite); }
.st-film__img:focus-visible { outline-offset: 2px; }
.st-film__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.st-film__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(var(--night-rgb), .2), rgba(var(--night-rgb), 0) 34%); }
.st-film__frame:hover .st-film__img img, .st-film__img:focus-visible img { transform: scale(1.04); }
/* Endnote 8,4: Bildunterschriften waren 12-px-Versalien in Grau – jetzt ruhige Serif-Kursiv, gut lesbar, eine
   Versal-Zeile weniger je Bildschirm */
.st-film__frame figcaption {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font: italic 400 clamp(17px, 1.25vw, 19px)/1.3 var(--f-serif); letter-spacing: 0; color: rgba(var(--bone-rgb), .86);
}
.st-film__swipe .swipe__track { scroll-padding-inline: var(--gutter); }
@media (min-width: 768px) { .st-film__track { --swipe-w: 40%; } }
@media (min-width: 1024px) {
  .st-film__swipe .swipe__track {
    grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto;
    gap: clamp(16px, 1.6vw, 28px); overflow: visible; scroll-snap-type: none;
    max-width: var(--maxw); margin-inline: auto; padding-bottom: 72px;
  }
  .st-film__frame { align-self: start; }
  .st-film__frame:nth-child(2), .st-film__frame:nth-child(4) { margin-top: 72px; }
  .st-film__frame:nth-child(3) .st-film__img { aspect-ratio: 4 / 5.6; }
  .st-film__swipe .swipe__ui { display: none; }
}

/* ---------------------------------------------------------------- Fragen */
.st-faq__grid { display: grid; gap: 40px; }
.st-faq__title { font-size: var(--fs-serif-xl); line-height: .98; margin-bottom: 24px; }
/* Abnahme 24.10.: Fragen im Stil von fragen.html – Ziffer (Kontur, füllt sich offen) · Serif-Frage · Plus */
.st-faq__list .acc__btn {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; column-gap: 14px; align-items: center;
  min-height: 84px; padding: 22px 0;
  font: 400 clamp(23px, 6.2vw, 28px)/1.16 var(--f-serif); letter-spacing: -.008em; color: var(--bone);
}
.st-faq__list .acc__btn:hover { color: var(--bone); }
.st-faq__list .acc__btn:hover .st-faq__q { color: var(--accent-hi); }
.st-faq__q { text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; transition: color .25s var(--ease-std); }
.st-faq__no {
  align-self: start; padding-top: .14em;
  font: 400 24px/1 var(--f-display); letter-spacing: .04em;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb), .8);
  transition: color .7s var(--ease-std), -webkit-text-stroke-color .7s var(--ease-std);
}
.st-faq__list .acc__btn[aria-expanded="true"] .st-faq__no { color: var(--accent); -webkit-text-stroke-color: transparent; }
.st-faq__list .acc__inner > * { padding-left: 54px; }
@media (min-width: 768px) {
  .st-faq__list .acc__btn { grid-template-columns: 64px minmax(0, 1fr) 44px; column-gap: 22px; min-height: 96px; padding: 28px 0; }
  .st-faq__no { font-size: 32px; }
  .st-faq__list .acc__inner > * { padding-left: 86px; }
}
@media (min-width: 1024px) { .st-faq__list .acc__btn { font-size: clamp(26px, 2.1vw, 34px); } }
@media (min-width: 1024px) {
  .st-faq__grid { grid-template-columns: 5fr 7fr; column-gap: 64px; }
}

/* ---------------------------------------------------------------- Abschluss (150811, eigene Noir-Fassung) */
/* Finale-Szene: .cta-band--finale (site.css), Bildausschnitt über style="--pos/--pos-m" an der Sektion */

/* ---------------------------------------------------------------- ruhige Fassung */
@media (prefers-reduced-motion: reduce) {
  .st-poster, .st-poster__img { transition-duration: .01s !important; }
  .st-poster__img { transform: none !important; }
  .st-poster__title, .st-poster__body { transform: none !important; }
  .st-step__no { transition: background-size 0s, -webkit-text-stroke-color .8s ease; }
  .st-steps__rail-fill { transform: none; opacity: .5; }
  .st-film__img img { transition: none; }
  .st-film__frame:hover .st-film__img img { transform: none; }
}