/* Der große Scroll-Film „Schuh“ (DESIGN-BRIEF.md, Abschnitt 5a, Runde 2, Texte und Ablauf vom 08.10.2026; Korrekturen Runde 3 und 4). Bühne klebt (sticky),
   Scrollweg 260 vh am Rechner, 220 svh am Handy. Runde 4: überall dieselbe Technik, eine Bildfolge auf Canvas, Fortschritt → Bild, geglättet (js/schuh.js).
   .schuh--quer (Bühne quer, Rechner): Beschriftungen als HTML-Text (Nummer, Name, Zeile) mit feinen Haarlinien (1 px, Papierweiß 70 %) und Punkten;
     zum Schluss gehen sie, der Schuh rückt nach rechts (--schub 0..1 aus dem Scrollweg), „Fünf Teile. Ein Schritt.“ steht links.
   .schuh--hoch (Bühne hochkant, Handy): Nummernpunkte auf den Teilen, der Text in einer Leiste unter dem Schuh (feste Plätze, nichts springt);
     zum Schluss gehen Punkte, Leiste und Titel, der Schuh rückt nach oben (--schluss-dy/-s aus js/schuh.js), der Satz steht darunter, nie über dem Schuh.
   .schuh--statisch (Bewegung reduzieren): Endbild mit allen Beschriftungen, kein Kleben. */

.schuh { position: relative; height: 260vh; margin-top: clamp(1rem, 3vw, 2rem); }
.schuh__buehne { position: sticky; top: var(--kopf-hoehe); height: calc(100vh - var(--kopf-hoehe)); height: calc(100svh - var(--kopf-hoehe)); overflow: hidden; background: #050505; --schub: 0; }
.schuh__canvas, .schuh__endbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.schuh--statisch .schuh__canvas { display: none; }
/* quer: das Canvas ist 20 % breiter als die Bühne und ragt links hinaus (dunkel gefüllt, js/schuh.js zeichnet das Bild versetzt); zum Schluss rückt es um 20 % der
   Bühne nach rechts, der Schuh macht links Platz, und am Rand erscheint keine Naht */
.schuh--bilder.schuh--quer .schuh__canvas { left: -20%; width: 120%; transform: translateX(calc(var(--schub) * 16.667%)); }
/* hoch: Canvas und Nummernpunkte rücken zum Schluss gemeinsam nach oben (wenn nötig etwas kleiner), so dass der Satz darunter frei steht */
.schuh--bilder.schuh--hoch .schuh__canvas, .schuh--bilder.schuh--hoch .schuh__punkte { transform-origin: 50% 0;
  transform: translateY(calc(var(--schub) * var(--schluss-dy, 0px))) scale(calc(1 + var(--schub) * (var(--schluss-s, 1) - 1))); }

/* Titel oben links (hoch: geht zum Schluss mit den Beschriftungen, js/schuh.js setzt die Deckkraft) */
.schuh__titel { position: absolute; left: var(--rand); top: clamp(.9rem, 2.6vh, 1.5rem); z-index: 2; margin: 0; display: grid; gap: .05rem; color: var(--kino-text); pointer-events: none; }
.schuh__titel-ueber { font-size: var(--fs-klein); color: var(--kino-grau); letter-spacing: .05em; }
.schuh__titel-name { font-weight: 300; font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; }
.schuh__titel-hinweis { margin-top: .4rem; font-size: 13px; color: var(--kino-grau); }

/* quer: Haarlinien und Punkte (zum Schluss geht die Deckkraft mit dem Scrollweg, js/schuh.js) */
.schuh__linien { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.schuh--hoch .schuh__linien { display: none; }
.schuh__linien line { stroke: rgba(245, 241, 234, .7); stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 320ms var(--ease-licht); }
.schuh__linien circle { fill: rgba(245, 241, 234, .7); opacity: 0; transition: opacity 320ms var(--ease-licht); }
.schuh__linien .ist-da { opacity: 1; }

/* Beschriftungen: Nummer, Name fett, Zeile. quer: Lage links/rechts/oben/unten vom Anker (js/schuh.js setzt left/top) */
.schuh__beschriftungen { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.schuh__label { position: absolute; margin: 0; font-size: 13.5px; line-height: 1.3; letter-spacing: .01em; color: var(--kino-text); white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: opacity 320ms var(--ease-licht), transform 320ms var(--ease-licht); }
.schuh__label.ist-da { opacity: 1; transform: none; }
.schuh__nr { color: var(--kino-grau); margin-right: .45em; font-variant-numeric: tabular-nums; }
.schuh__name { font-weight: 500; }
.schuh__zeile { display: block; color: var(--kino-grau); }
.schuh__label--links { translate: -100% -50%; text-align: right; }   /* Text steht links vom Anker, rechte Kante am Punkt x */
.schuh__label--rechts { translate: 0 -50%; }
.schuh__label--oben { translate: -50% -100%; text-align: center; }   /* Text steht über dem Anker, x = Mitte, y = Unterkante */
.schuh__label--unten { translate: -50% 0; text-align: center; }

/* hoch: Nummernpunkte auf den Teilen (js/schuh.js setzt transform: translate auf den Anker) */
.schuh__punkte { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
.schuh--hoch .schuh__punkte { display: block; }
.schuh__punkt, .schuh--hoch .schuh__nr { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 10.5px; font-weight: 500; line-height: 1;
  letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--kino-text); background: rgba(22, 21, 19, .8); box-shadow: inset 0 0 0 1px rgba(245, 241, 234, .72); }
.schuh__punkt { position: absolute; left: 0; top: 0; margin: -11px 0 0 -11px; box-shadow: inset 0 0 0 1px rgba(245, 241, 234, .72), 0 1px 8px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity 320ms var(--ease-licht); }
.schuh__punkt.ist-da { opacity: 1; }
/* hoch: die Leiste unter dem Schuh, feste Plätze (05 und 01 teilen sich den ersten: die Laufsohle gilt in der Drehung, der Senkel in der Trennung) */
.schuh--hoch .schuh__beschriftungen { inset: auto var(--rand) clamp(.8rem, 2.2svh, 1.3rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "a b" "c d"; gap: .65rem 1rem; align-items: start; }
.schuh--hoch .schuh__beschriftungen::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--rand)); right: calc(-1 * var(--rand)); top: -2.2rem;
  bottom: calc(-1 * clamp(.8rem, 2.2svh, 1.3rem)); background: linear-gradient(to top, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .74) 58%, rgba(5, 5, 5, 0) 100%);
  opacity: 0; transition: opacity 320ms var(--ease-licht); }
.schuh--hoch .schuh__beschriftungen.hat-text::before { opacity: 1; }
.schuh--hoch .schuh__label { position: relative; translate: none; text-align: left; white-space: normal; font-size: 12.5px; line-height: 1.32; padding-left: 30px; min-height: 22px; transform: translateY(4px); }
.schuh--hoch .schuh__label.ist-da { transform: none; }
.schuh--hoch .schuh__label[data-nr="05"], .schuh--hoch .schuh__label[data-nr="01"] { grid-area: a; }
.schuh--hoch .schuh__label[data-nr="02"] { grid-area: b; }
.schuh--hoch .schuh__label[data-nr="03"] { grid-area: c; }
.schuh--hoch .schuh__label[data-nr="04"] { grid-area: d; }
.schuh--hoch .schuh__nr { position: absolute; left: 0; top: -2px; margin: 0; }   /* derselbe Punkt wie auf dem Schuh */
.schuh--hoch .schuh__name { display: block; }

/* Schlussbild in der freien Fläche neben bzw. unter dem Schuh, Link zur Anfrage (unsichtbar nicht fokussierbar); Deckkraft folgt dem Scrollweg (--schluss) */
.schuh__schluss { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; gap: .9rem; padding: var(--rand); text-align: center; color: var(--kino-text);
  opacity: 0; visibility: hidden; transition: opacity 500ms var(--ease-licht), visibility 0s linear 500ms; }
.schuh__schluss.ist-da { opacity: var(--schluss, 1); visibility: visible; transition: opacity 500ms var(--ease-licht), visibility 0s; }
.schuh--bilder .schuh__schluss, .schuh--bilder .schuh__schluss.ist-da { transition: none; }
.schuh--bilder.schuh--quer .schuh__schluss { inset: 0 auto 0 0; width: 50%; place-content: center start; text-align: left; padding-right: clamp(1rem, 3vw, 2.5rem); }
.schuh--bilder.schuh--hoch .schuh__schluss { place-content: end center; padding-bottom: clamp(1.6rem, 7svh, 3.5rem);
  background: linear-gradient(to top, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .62) 24%, rgba(5, 5, 5, 0) 44%); }
.schuh__schluss-titel { margin: 0; font-weight: 300; font-size: clamp(2.3rem, 1.4rem + 4.2vw, 5.2rem); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.schuh__schluss-zeile { margin: 0; color: var(--kino-grau); text-wrap: pretty; }
.schuh__schluss-zeile a { color: var(--kino-text); font-weight: 500; }

/* Bewegung reduzieren und ohne JavaScript: Endbild, Beschriftungen alle da, Schlussbild darunter als normaler Block, kein Kleben */
.schuh--statisch, .no-js .schuh { height: auto; }
.schuh--statisch .schuh__buehne, .no-js .schuh__buehne { position: relative; top: auto; height: auto; aspect-ratio: 16 / 9; }
.schuh--statisch.schuh--hoch .schuh__buehne { aspect-ratio: 3 / 4; }
.schuh--statisch .schuh__label, .schuh--statisch .schuh__linien line, .schuh--statisch .schuh__linien circle { opacity: 1; transform: none; transition: none; }
.schuh--statisch .schuh__punkt { opacity: 1; transition: none; }
/* Handy: die Leiste steht unter dem Bild (js/schuh.js setzt sie hinter die Bühne), mit allen fünf Beschriftungen */
.schuh--statisch.schuh--hoch .schuh__beschriftungen { position: relative; inset: auto; margin: 1.1rem var(--rand) 0; grid-template-areas: "a b" "c d" "e e"; }
.schuh--statisch.schuh--hoch .schuh__beschriftungen::before { display: none; }
.schuh--statisch.schuh--hoch .schuh__label[data-nr="01"] { grid-area: a; }
.schuh--statisch.schuh--hoch .schuh__label[data-nr="05"] { grid-area: e; }
/* Schlussbild als Block unter dem Bild: bei Bewegung reduzieren verschiebt js/schuh.js das Element hinter die Bühne, ohne JavaScript steht die noscript-Fassung dort */
.schuh--statisch .schuh__schluss, .schuh__schluss--ohne { position: relative; inset: auto; width: auto; opacity: 1; visibility: visible; background: none; place-content: center; text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) var(--rand); transition: none; }
.no-js .schuh__buehne .schuh__schluss { display: none; }
.schuh__endbild--ohne { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 760px) {
  .schuh { height: 220svh; }   /* Runde 4: Bildfolge statt Stufen, ~220 svh Scrollweg */
  .schuh__titel-hinweis { font-size: 12px; }
  .no-js .schuh__buehne { aspect-ratio: 16 / 9; }   /* ohne JavaScript liegt nur das Querformat-Endbild im HTML */
}
@media (prefers-reduced-motion: reduce) {
  .schuh__label, .schuh__linien line, .schuh__linien circle, .schuh__punkt, .schuh__schluss, .schuh--hoch .schuh__beschriftungen::before { transition: none; }
  .schuh--bilder .schuh__canvas, .schuh--bilder .schuh__punkte { transform: none; }
}