/* ── Die Reise: Vollbild-Vorstellung im Takt ───────────────────────────────
   reise.js setzt --schlag (Dauer eines Schlags) und schaltet auf jedem Schlag
   .schlag (auf der Takt-Eins zusätzlich .eins). Alle Verzögerungen sind
   Vielfache von --schlag, so sitzt jede Bewegung auf der Musik. */
html.auf-reise { overflow: hidden; }
/* Während der Reise tritt die Seite zurück, nur Himmel und Visualizer bleiben dahinter */
.spur, .kopf { transition: opacity .9s ease, filter .9s ease; }
html.auf-reise .spur, html.auf-reise .kopf { opacity: 0; pointer-events: none; }
.reise {
  --schlag: .56s;
  position: fixed; inset: 0; z-index: 120; overflow: hidden;
  perspective: 1400px; perspective-origin: 50% 45%;
  background: radial-gradient(120% 100% at 50% 45%, rgba(5, 7, 18, .32), rgba(5, 7, 18, .82));
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s;
  color: var(--text);
}
.reise.an { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.reise-raum { position: absolute; inset: 0; transform-style: preserve-3d; }

/* Puls auf den Schlägen: ein Ring in der Mitte, auf der Eins kräftiger */
.reise-ring { position: absolute; left: 50%; top: 46%; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); opacity: 0; pointer-events: none; }
.reise.eins .reise-ring { animation: reise-ring calc(var(--schlag) * 1.6) cubic-bezier(.2, .7, .3, 1); }
@keyframes reise-ring { 0% { transform: scale(.55); opacity: .7; border-width: 6px; } 100% { transform: scale(1.7); opacity: 0; border-width: 1px; } }

/* ── Intro: Worte landen auf den Schlägen, dann der Count-in ── */
.reise-intro { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4vh; text-align: center; }
.reise-intro p { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(38px, 7.4vw, 120px); letter-spacing: -.03em; line-height: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .28em; padding: 0 5vw; }
.reise-wort { display: inline-block; opacity: 0; animation: reise-wort calc(var(--schlag) * .9) cubic-bezier(.16, 1, .3, 1) calc(var(--schlag) * var(--n)) both; }
.reise-wort.farbe { color: transparent; background: linear-gradient(104deg, var(--gold), var(--pink) 50%, var(--violett)); -webkit-background-clip: text; background-clip: text; }
@keyframes reise-wort { 0% { opacity: 0; transform: translateZ(-600px) scale(1.6); filter: blur(14px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; } }
.reise-zaehler { position: relative; height: clamp(70px, 12vw, 150px); width: 100%; }
.reise-zaehler .reise-wort { position: absolute; left: 50%; top: 0; font-family: var(--display); font-weight: 800; font-size: clamp(70px, 12vw, 150px); line-height: 1;
  color: var(--gold); text-shadow: 0 0 40px rgba(255, 197, 85, .5); animation-name: reise-zahl; animation-duration: var(--schlag); }
@keyframes reise-zahl { 0% { opacity: 0; transform: translateX(-50%) scale(2.2); } 25% { opacity: 1; transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scale(.7); } }
.reise-intro.geht { animation: reise-weg calc(var(--schlag) * .9) ease-in both; }
@keyframes reise-weg { to { opacity: 0; transform: translateZ(400px); filter: blur(10px); } }

/* ── Eine Kachel: Bühne + Text ── */
.reise-szene {
  position: absolute; inset: clamp(64px, 10vh, 120px) clamp(16px, 5vw, 90px) clamp(84px, 12vh, 130px);
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: clamp(22px, 3.4vw, 64px); align-items: center;
  transform-style: preserve-3d;
}
.reise-buehne {
  position: relative; width: 100%; max-height: 100%; aspect-ratio: 16 / 10; border-radius: clamp(18px, 2.4vw, 34px); overflow: hidden;
  background: #0b0e1c; border: 1px solid color-mix(in srgb, var(--f) 45%, transparent);
  box-shadow: 0 40px 120px -40px color-mix(in srgb, var(--f) 70%, transparent), 0 0 0 1px rgba(255, 255, 255, .05);
  animation: reise-rein calc(var(--schlag) * 1.6) cubic-bezier(.16, 1, .3, 1) both;
}
.reise-bild { position: absolute; inset: 0; }
/* die Kopie der Kachelszene braucht dieselben Grundregeln wie in der Kachel */
.reise-bild .bild > div, .reise-bild .bild > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes reise-rein {
  0% { opacity: 0; transform: translateZ(-1800px) rotateY(var(--dreh)) rotateX(14deg) scale(.7); filter: blur(16px) saturate(.4); }
  45% { opacity: 1; filter: blur(2px) saturate(1); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* Schlag-Puls auf der Bühne */
.reise.schlag .reise-szene:not(.geht) .reise-buehne { animation: reise-rein calc(var(--schlag) * 1.6) cubic-bezier(.16, 1, .3, 1) both, reise-puls calc(var(--schlag) * .8) ease-out; }
.reise.eins .reise-szene:not(.geht) .reise-buehne { animation: reise-rein calc(var(--schlag) * 1.6) cubic-bezier(.16, 1, .3, 1) both, reise-puls-eins var(--schlag) ease-out; }
@keyframes reise-puls { 0% { scale: 1.012; } 100% { scale: 1; } }
@keyframes reise-puls-eins { 0% { scale: 1.03; box-shadow: 0 40px 160px -30px var(--f), 0 0 0 2px color-mix(in srgb, var(--f) 70%, transparent); } 100% { scale: 1; } }

.reise-text { position: relative; display: flex; flex-direction: column; gap: 14px; max-height: 100%; overflow-x: hidden; overflow-y: auto; padding: 6px 4px;
  scrollbar-width: none; overscroll-behavior: contain; }
.reise-text::-webkit-scrollbar { display: none; }   /* scrollbar bleibt bedienbar, aber unsichtbar */
.reise, .reise-raum, .reise-szene { scrollbar-width: none; }
.reise ::-webkit-scrollbar { display: none; }
.reise-text > * { opacity: 0; animation: reise-text calc(var(--schlag) * 1.2) cubic-bezier(.16, 1, .3, 1) both; }
.reise-nr { font: 600 13px/1 ui-monospace, monospace; letter-spacing: .14em; color: var(--f); animation-delay: calc(var(--schlag) * 1) !important; }
.reise-text h2 { margin: 0; font-size: clamp(34px, 4.4vw, 68px); line-height: 1; letter-spacing: -.03em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; animation-delay: calc(var(--schlag) * 2) !important; }
.reise-art { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--f); animation-delay: calc(var(--schlag) * 3) !important; }
.reise-lang { margin: 0; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.65; color: var(--text); max-width: 46ch; animation-delay: calc(var(--schlag) * 4) !important; }
.reise-los { align-self: flex-start; margin-top: 8px; padding: 12px 22px; border-radius: 999px; text-decoration: none; font-family: var(--display); font-weight: 700;
  color: #0b0e1c; background: var(--f); box-shadow: 0 10px 34px -10px var(--f); animation-delay: calc(var(--schlag) * 6) !important; transition: transform .2s; }
.reise-los:hover { transform: translateY(-2px); }
@keyframes reise-text { 0% { opacity: 0; transform: translateX(60px); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: none; } }

/* Abgang auf Schlag 15: die Bühne fliegt an der Kamera vorbei, der Text wischt weg */
.reise-szene.geht .reise-buehne { animation: reise-raus calc(var(--schlag) * .95) cubic-bezier(.6, 0, .9, .4) both; }
.reise-szene.geht .reise-text > * { animation: reise-text-raus calc(var(--schlag) * .6) ease-in both !important; }
@keyframes reise-raus { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateZ(700px) rotateY(calc(var(--dreh) * -.6)) scale(1.15); filter: blur(14px); } }
@keyframes reise-text-raus { to { opacity: 0; transform: translateX(-50px); filter: blur(6px); } }

/* ── Abschluss ── */
.reise-ende { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; padding: 0 6vw;
  animation: reise-wort calc(var(--schlag) * 1.4) cubic-bezier(.16, 1, .3, 1) both; }
.reise-ende h2 { margin: 0; font-size: clamp(36px, 6vw, 92px); letter-spacing: -.03em; }
.reise-ende p { margin: 0; font-size: clamp(17px, 1.6vw, 22px); color: var(--text-leise); }
.reise-ende-knoepfe { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.reise-nochmal { font: inherit; font-weight: 600; color: var(--text); background: none; border: 1px solid var(--kante-hell); border-radius: 999px; padding: 15px 26px; cursor: pointer; }
.reise-ende.geht { animation: reise-weg .6s ease-in both; }

/* ── Bedienung ── */
.reise-leiste { position: absolute; left: 50%; bottom: clamp(18px, 4vh, 40px); translate: -50% 0; display: flex; align-items: center; gap: 14px; z-index: 3; }
.reise-fortschritt { display: flex; gap: 5px; }
.reise-fortschritt i { width: clamp(14px, 2.4vw, 34px); height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.reise-fortschritt i b { display: block; height: 100%; width: 0; background: #fff; }
.reise-fortschritt i.fertig b { width: 100%; }
.reise-fortschritt i.jetzt b { animation: reise-balken calc(var(--schlag) * 16) linear both; }
@keyframes reise-balken { to { width: 100%; } }
.reise-pause { font-size: 17px !important; }
/* Pause: alles hält an, wo es ist */
.reise.pausiert *, .reise.pausiert *::before, .reise.pausiert *::after { animation-play-state: paused !important; }
.reise.pausiert .reise-pause { background: rgba(255, 255, 255, .22); }
.reise-pausiert-hinweis { position: absolute; left: 50%; top: clamp(18px, 3.4vh, 32px); translate: -50% 0; z-index: 3; font: 700 13px/1 var(--display), sans-serif;
  letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); opacity: 0; transition: opacity .3s; pointer-events: none; }
.reise.pausiert .reise-pausiert-hinweis { opacity: 1; }
.reise-knopf, .reise-zu { font: 300 26px/1 var(--display), sans-serif; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--kante-hell);
  background: rgba(255, 255, 255, .07); color: var(--text); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.reise-knopf:hover, .reise-zu:hover { background: rgba(255, 255, 255, .16); }
.reise-zu { position: absolute; top: clamp(14px, 3vh, 28px); right: clamp(14px, 3vw, 32px); z-index: 3; font-size: 30px; }
.reise.am-ende .reise-leiste { opacity: .4; }
.reise-ansage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── Hochformat: Bühne oben, Text darunter, Seitenverhältnis passend ── */
@media (orientation: portrait), (max-width: 760px) {
  .reise-szene { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; align-content: start; gap: 22px;
    inset: clamp(70px, 9vh, 96px) 16px clamp(88px, 12vh, 110px); }
  .reise-buehne { aspect-ratio: 4 / 3.4; max-height: 40vh; justify-self: center; }
  .reise-text { gap: 10px; }
  .reise-text h2 { font-size: clamp(30px, 8vw, 46px); }
  @keyframes reise-text { 0% { opacity: 0; transform: translateY(30px); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: none; } }
}
/* flaches Querformat (Handy quer) */
@media (orientation: landscape) and (max-height: 520px) {
  .reise-szene { inset: 54px 60px 64px; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 1fr); }
  .reise-text h2 { font-size: 28px; }
  .reise-lang { font-size: 14.5px; line-height: 1.5; }
}

/* Weniger Bewegung gewünscht: nur weiche Überblendungen */
.reise.ruhig .reise-buehne, .reise.ruhig .reise-text > *, .reise.ruhig .reise-wort, .reise.ruhig .reise-ende { animation: none !important; opacity: 1; transform: none; filter: none; }
.reise.ruhig .reise-szene.geht, .reise.ruhig .reise-intro.geht { opacity: 0; transition: opacity .4s; }