/* 05 als ein Fenster, das sich umbaut (21.10.2026 spät, Markup in skripte/bauen.py, Bewegung in quelle/morph05.js).
   Die Bühne (Fenster und Satz darunter) bleibt in der linken Spalte stehen wie das Logbuch rechts, gleiche Oberkante. Die Punkte sind
   unsichtbare Stationen von fast einer Bildschirmhöhe: sie geben die Scrollstrecke und dem Logbuch ihre Mitte. Der Satz der jeweiligen
   Station steht unter dem Fenster; zwischen zwei Stationen ist er weg, beim Ankommen erscheint der nächste (Deckkraft und Lage schreibt
   das Skript direkt an jeden Text). */
.ist-morph .morph-spalte { position: relative; }
.ist-morph .morph-halter { position: absolute; top: 0; bottom: 0; left: 0; right: clamp(20px, 3vw, 56px); }   /* rechts der Innenabstand der Spalte */
.ist-morph .morph-buehne { position: sticky; top: calc(var(--kopf) + clamp(28px, 5vh, 64px)); }
.ist-morph .morph-stationen { gap: 0; }
.ist-morph .morph-stationen .merkmal { height: var(--station, 92vh); }
.ist-morph .morph-stationen .merkmal:last-child { height: calc(var(--station, 92vh) * .75); }   /* am Ende nicht nachlaufen */
.ist-morph .merkmal-kurs { display: none; }
.ist-morph .morph-texte { position: relative; margin-top: 28px; min-height: calc(4 * 1.34em); font-size: clamp(19px, 13px + .6vw, 27px); }
.ist-morph .morph-text { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; will-change: opacity, transform; }
.ist-morph .morph-text .merkmal-satz { margin: 0; }
.ist-morph .morph-titel { display: none; }
html:not(.js) .ist-morph .morph-text[data-i="0"] { opacity: 1; }

@media (max-width: 860px) {
  .ist-morph .morph-spalte { padding-left: 0; }
  .ist-morph .morph-halter { right: 0; }
  .ist-morph .morph-buehne { top: calc(var(--kopf) + 10px); }
  .ist-morph .morph-stationen .merkmal { height: var(--station, 78vh); }
  .ist-morph .merkmal-tafel.mit-see { aspect-ratio: 5 / 4; }
  .ist-morph .morph-texte { margin-top: 16px; min-height: 8.6em; font-size: 17px; }
  /* am Handy fehlt das Logbuch: der Titel steht mit seiner Boje über dem Satz */
  .ist-morph .morph-titel { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 400 21px/1.18 var(--schrift); letter-spacing: -.02em; color: var(--sand); text-wrap: balance; }
  .ist-morph .morph-boje { position: relative; flex: none; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sand); }
  .ist-morph .morph-boje::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--sonne); }
  .ist-morph .morph-text .merkmal-satz { color: var(--leise); font-size: 17px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) { .ist-morph .morph-text { will-change: auto; } }
/* die Stationen tragen Titel und Satz nur für Screenreader, auch am Handy (dort macht abschnitte.css die Titel sonst sichtbar) */
.ist-morph .morph-stationen .merkmal-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }