/* ==========================================================================
   STAYS · Bewegungsebene
   Alles hängt an html.motion-an (nur bei erlaubter Bewegung gesetzt).
   Ohne JS / ohne GSAP bleibt die Seite vollständig statisch lesbar.
   ========================================================================== */

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html.motion-an { scroll-behavior: auto !important; }

/* ---------- Grundzustand im Motion-Modus (GSAP übernimmt) ---------- */
.motion-an .reveal { opacity: 1; transform: none; transition: background 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease; }
.motion-an .zeile-anim, .motion-an .maske > span { opacity: 1; transform: none; animation: none; }
.motion-an .magnet { transition-property: background, color, border-color, box-shadow; }
.motion-an .weg { transition-property: background, border-color; }

/* ---------- Lader (nur beim Einstieg auf der Startseite) ---------- */
.lader { display: none; }
.motion-an .lader {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: var(--nacht); color: var(--putz); clip-path: inset(0 0 0 0);
  animation: lader-notaus 0s linear 5s forwards;
}
.motion-an.von-innen .lader { display: none; }
@keyframes lader-notaus { to { visibility: hidden; opacity: 0; } }
.lader-kern { display: grid; justify-items: center; gap: 1.4rem; }
.lader-kern img { width: clamp(150px, 17vw, 210px); height: auto; }
.lader-kern b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.45rem); letter-spacing: 0.02em; color: var(--greige-hell); font-style: italic; }
.motion-an .lader-kern > * { opacity: 0; transform: translateY(14px); animation: lader-ein 1.1s var(--federn) forwards; }
.motion-an .lader-kern img { transform: scale(0.88) rotate(-25deg); }
.motion-an .lader-kern b { animation-delay: 0.35s; }
@keyframes lader-ein { to { opacity: 1; transform: none; } }
.lader-zeile {
  position: absolute; left: var(--rand); right: var(--rand); bottom: clamp(1.75rem, 6vh, 3.25rem);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: var(--sperrung); text-transform: uppercase;
  line-height: 1.7; color: var(--greige-hell);
}
.lader-zahl {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(3.2rem, 9vw, 7.5rem);
  line-height: 0.8; letter-spacing: -0.03em; text-transform: none; color: var(--akzent-hell); font-variant-numeric: tabular-nums;
}
.lader-balken { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--akzent); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Seitenübergang (Vorhang zwischen den Unterseiten) ---------- */
.uebergang { display: none; }
.motion-an .uebergang {
  position: fixed; inset: 0; z-index: 290; display: grid; place-items: center;
  background: var(--tinte-tief); pointer-events: none;
  transform: translateY(101%);
}
.motion-an .uebergang img { width: 74px; height: auto; opacity: 0.9; }
/* Ankunft von einer anderen Unterseite: Vorhang liegt zunächst über der Seite */
.motion-an.von-innen .uebergang { transform: none; animation: uebergang-notaus 0s linear 2.5s forwards; }
@keyframes uebergang-notaus { to { visibility: hidden; } }

/* ---------- Goldrahmen im Auftakt zeichnet sich ---------- */
.motion-an .auftakt-bild::before { transition: clip-path 1.6s var(--federn); clip-path: inset(0 0 0 0); }
.motion-an .auftakt-bild.rahmen-zu::before { clip-path: inset(0 100% 100% 0); }

/* ---------- Wort-Masken ---------- */
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.3em 0.22em 0.14em; margin: -0.3em -0.22em -0.14em; }
.wi { display: inline-block; will-change: transform; }

/* ---------- Linien der Abschnittsköpfe ---------- */
.motion-an .kopfzeile-abschnitt { position: relative; border-top-color: transparent !important; }
.motion-an .kopfzeile-abschnitt::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--hairline);
  transform: scaleX(var(--linie, 1)); transform-origin: 0 50%;
}
.motion-an .abschnitt--dunkel .kopfzeile-abschnitt::before { background: var(--hairline-dunkel); }
.motion-an .seitenkopf-fuss { position: relative; border-top-color: transparent; }
.motion-an .seitenkopf-fuss::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--hairline);
  transform: scaleX(var(--linie, 1)); transform-origin: 0 50%;
}

/* ---------- Schritte / Kriterien: Linie zeichnet sich ---------- */
.motion-an .schritt, .motion-an .kriterium { border-top-color: transparent; }
.motion-an .schritt::before, .motion-an .kriterium::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--hairline);
  transform: scaleX(var(--linie, 1)); transform-origin: 0 50%;
}
.motion-an .kriterium { position: relative; }
.motion-an .abschnitt--dunkel .schritt::before, .motion-an .abschnitt--dunkel .kriterium::before { background: var(--hairline-dunkel); }
.motion-an .fahrplan-schritt::before { transform: scaleX(var(--zug, 1)); transform-origin: 0 50%; }
@media (max-width: 60rem) { .motion-an .fahrplan-schritt::before { transform: scaleY(var(--zug, 1)); transform-origin: 50% 0; } }

/* ---------- Haken zeichnen sich ---------- */
.motion-an .hakenliste li::before { display: none; }
.motion-an .haken {
  display: block; flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.22rem; align-self: flex-start;
  fill: none; stroke: var(--akzent-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.motion-an .abschnitt--dunkel .haken { stroke: var(--akzent-hell); }

/* ---------- Galerie: Querfahrt im Pin ---------- */
.galerie--quer .galerie-leiste { position: relative; overflow: visible; scroll-snap-type: none; cursor: default; will-change: transform; }
.galerie--quer .gal-karte { width: min(36vw, calc((100vh - 24rem - var(--abstand)) * 1.5), 36rem); min-width: 18rem; }
.galerie--quer .galerie-pfeile { display: none; }
.galerie--quer .gal-rahmen img { will-change: transform; }

/* ---------- Gold-/Ziegel-Glanz auf Hauptknöpfen ---------- */
.motion-an .knopf--akzent { position: relative; overflow: hidden; isolation: isolate; }
.motion-an .knopf--akzent::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255,246,238,0.38) 50%, transparent 68%);
  transform: translateX(-130%); animation: glanz 5s ease-in-out 3s 2;
}
@keyframes glanz { 0% { transform: translateX(-130%); } 30%, 100% { transform: translateX(130%); } }

/* ---------- Zeiger (nur feine Zeigegeräte) ---------- */
.zeiger {
  position: fixed; left: 0; top: 0; z-index: 260; pointer-events: none;
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 1px solid var(--akzent); border-radius: 50%; opacity: 0;
  transition: width 0.35s var(--federn), height 0.35s var(--federn), margin 0.35s var(--federn), background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.zeiger.da { opacity: 1; }
.zeiger.ist-link { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(168,101,74,0.14); }
.zeiger.ist-bild { width: 88px; height: 88px; margin: -44px 0 0 -44px; border-color: rgba(244,242,236,0.9); }

/* ---------- Läuft das Skript nicht, bleibt nichts versteckt ---------- */
html.motion-an:not(.motion-js) .fuss-finale .fuss-logo img,
html.motion-an:not(.motion-js) .fuss-finale .fuss-linie { opacity: 1; transform: none; }

/* ---------- Druck ---------- */
@media print {
  .reveal, .wi, .maske > span, .zeile-anim, .gal-karte, .gal-rahmen, .gal-rahmen img, .zahlen li, .schritt, .schritt *, .kriterium, .kriterium *,
  .hakenliste li, .diashow, .dia, .parallax-rahmen, .parallax-rahmen img, .statement .sw, .kicker, .projekt *, .karte, .person, .fahrplan-schritt *,
  .fuss-finale .fuss-logo img, .fuss-finale .fuss-linie, .auftakt-text, .auftakt-bild, .galerie-leiste,
  .reveal > *, .team li, .kontakt-raster > *, .wege > *, .fakten > *, .legende li, .bild-fig figcaption, .karte-fig figcaption,
  .bildraster figcaption, .statement-kicker, .seitenkopf-fuss > *, .auftakt-adresse, .seitenkopf-status, .kopf-zeile, .dia-chip, .auftakt-dial {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .pin-spacer { padding: 0 !important; height: auto !important; }
  .galerie-pin { position: static !important; transform: none !important; }
  .lader, .uebergang, .zeiger { display: none !important; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .lader, .uebergang { display: none !important; }
  .motion-an .knopf--akzent::after { animation: none; }
}