/* Rückweg (07.10.2026): Zurück-Knopf der Stationsseiten und die Schichten des Zoom-Outs (start-v2/rueckweg.js).
   Geladen auf Start-, Angebote- und Stationsseiten. */

/* ---------- Schichten: Hero der Station ohne Text (Endbild des Zoom-Ins = Startbild des Zoom-Outs) ---------- */
.rw-bruecke, .rw-schicht { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: #070e16; }
.rw-bruecke { z-index: 2147482000; }                 /* Kind von <html>, vor dem ersten Bild */
.rw-schicht { z-index: 2147482000; cursor: progress; pointer-events: auto; }   /* im body: liegt über Kopf und Ball, unter der Nachtlicht-Folie */
.rw--hell { background: #f8f3ea; }
.rw-hero { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.rw-hero img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; will-change: transform; }
.rw-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.rw-hero img.rw-fertig { object-fit: fill; }   /* schon im Ausschnitt der Stationsseite gerechnet */

/* Hero-Verläufe der Stationen (Werte aus bereiche/<slug>/seite.css .b-hero::after, wie ankunft.css/uebergang.css) */
.rw-verlauf--web::after { background:
  linear-gradient(90deg, rgba(248, 243, 235, .9) 0%, rgba(248, 243, 235, .72) 26%, rgba(248, 243, 235, .18) 48%, rgba(248, 243, 235, 0) 60%),
  linear-gradient(180deg, rgba(248, 243, 235, .55) 0%, rgba(248, 243, 235, 0) 16%),
  linear-gradient(0deg, #f8f3eb 0%, rgba(248, 243, 235, 0) 22%); }
.rw-verlauf--bausteine::after { background:
  linear-gradient(90deg, rgba(248, 243, 234, .9) 0%, rgba(248, 243, 234, .62) 30%, rgba(248, 243, 234, 0) 58%),
  linear-gradient(0deg, #f8f3ea 0%, rgba(248, 243, 234, 0) 30%),
  linear-gradient(180deg, rgba(248, 243, 234, .55) 0%, rgba(248, 243, 234, 0) 16%); }
.rw-verlauf--assistenten::after { background:
  linear-gradient(90deg, rgba(7, 14, 22, .9) 0%, rgba(7, 14, 22, .62) 30%, rgba(7, 14, 22, 0) 50%),
  linear-gradient(180deg, rgba(7, 14, 22, .45) 0%, rgba(7, 14, 22, 0) 22%),
  linear-gradient(0deg, #070e16 0%, rgba(7, 14, 22, 0) 24%); }
@media (max-width: 600px) {
  .rw-verlauf--web::after { background: linear-gradient(180deg, rgba(248, 243, 235, .84) 0%, rgba(248, 243, 235, .72) 42%, rgba(248, 243, 235, .1) 64%, rgba(248, 243, 235, 0) 82%, #f8f3eb 100%); }
  .rw-verlauf--bausteine::after { background: linear-gradient(0deg, #f8f3ea 0%, rgba(248, 243, 234, .55) 45%, rgba(248, 243, 234, .82) 100%); }
  .rw-verlauf--assistenten::after { background: linear-gradient(180deg, rgba(7, 14, 22, .65) 0%, rgba(7, 14, 22, 0) 24%), linear-gradient(0deg, #070e16 0%, rgba(7, 14, 22, 0) 34%); }
}

/* Ankunft: bis das Brückenbild dekodiert ist, wird nichts Inhaltliches gezeichnet */
html.rueck-warten .rw-bruecke, html.rueck-warten body { visibility: hidden; }
html.rueck--hell.rueck-warten { background: #f8f3ea; }
html.rueck-warten:not(.rueck--hell) { background: #070e16; }

/* Nachtlicht-Platzhalter: Die Brücke hängt an <html>, die echte Folie (.atmo-nachtlicht) liegt im isolierten body und
   färbt sie nicht. Solange die Brücke steht, färbt dieser Platzhalter (gleiche Werte wie atmosphaere.css). */
html.rueck::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; mix-blend-mode: multiply;
  background: color-mix(in srgb, var(--atmo-nachtlicht-voll, rgb(255, 176, 104)) calc(var(--atmo-nachtlicht-staerke, 1) * 100%), #fff); }
html.rueck:has(.atmo-nachtlicht):not(:has(> .rw-bruecke))::after { content: none; }
/* Während der Ankunft keine eigenen Auftakt-Bewegungen der Herkunftsseite (sonst stimmt das Endbild nicht) */
html.rueck .ang-buehne, html.rueck .ang-hero__kopf h1, html.rueck .ang-hero__kopf .eyebrow, html.rueck .ang-hero__wahl { animation: none; }
html.rueck .atmo-nebel { opacity: 0 !important; transition: none !important; }
/* Erst nach der gesamten Rückfahrt wieder zeichnen: sonst startet z. B. der Cookie-Blur mitten im Zoom. */
html.rueck-kamera .atmo-nebel { opacity: 0 !important; transition: none !important; }
html.rueck-kamera .sba, html.rueck-kamera .sbe { display: none !important; }

/* ---------- Zurück-Knopf ---------- */
.b-zurueck { display: inline-flex; align-items: center; gap: .55rem; align-self: flex-start; margin-top: 2.2rem; padding: .5rem 1rem .5rem .75rem;
  border-radius: 999px; font: 600 .78rem/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--creme, #f6f1e7); background: rgba(7, 14, 22, .38); border: 1px solid rgba(246, 241, 231, .22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .35s, border-color .35s, color .35s, transform .35s cubic-bezier(.65, 0, .25, 1); }
.b-zurueck__pfeil { display: inline-block; font-size: 1rem; line-height: 1; transition: transform .35s cubic-bezier(.65, 0, .25, 1); }
.b-zurueck:hover, .b-zurueck:focus-visible { background: var(--orange, #ee7b2d); border-color: var(--orange, #ee7b2d); color: #0b1622; }
.b-zurueck:hover .b-zurueck__pfeil { transform: translateX(-3px); }
.b-zurueck + .b-stationen { margin-top: 1.4rem; }
/* helle Seiten */
.seite-hell .b-zurueck { color: #1b2733; background: rgba(255, 255, 255, .55); border-color: rgba(27, 39, 51, .16); }
.seite-hell .b-zurueck:hover, .seite-hell .b-zurueck:focus-visible { background: var(--orange, #ee7b2d); border-color: var(--orange, #ee7b2d); color: #fff; }

/* schwebend unten links (der Assistent-Ball sitzt unten rechts), erscheint, sobald der Hero aus dem Bild ist */
.b-zurueck--schwebend { position: fixed; z-index: 66; margin: 0; left: max(1.1rem, env(safe-area-inset-left)); bottom: max(1.35rem, env(safe-area-inset-bottom));
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(14px); pointer-events: none; visibility: hidden;
  transition: opacity .45s cubic-bezier(.65, 0, .25, 1), transform .45s cubic-bezier(.65, 0, .25, 1), visibility 0s .45s, background .35s, color .35s; }
.b-zurueck--schwebend.sichtbar { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.seite-hell .b-zurueck--schwebend { box-shadow: 0 14px 40px rgba(91, 64, 32, .18); }
@media (max-width: 600px) {
  .b-zurueck { margin-top: 1.6rem; font-size: .72rem; }
  /* mobil reicht die Sprechblase des Balls bis an den linken Rand: Knopf darüber, auf Höhe der Ball-Oberkante */
  .b-zurueck--schwebend { padding: .55rem .8rem; bottom: calc(max(1.1rem, env(safe-area-inset-bottom)) + 72px + 12px); }
  .b-zurueck--schwebend .b-zurueck__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .b-zurueck, .b-zurueck--schwebend, .b-zurueck__pfeil { transition: none; } }
@media print { .b-zurueck, .rw-bruecke, .rw-schicht { display: none; } }

/* Exakter Verlauf des gemessenen Heros, ausschließlich auf der Übergangsschicht. */
.rw-hero[style*="--zoom-verlauf"]::after { background-image: var(--zoom-verlauf); }