/* Übergang Live-Raum -> Stationsseiten (06.10.2026, raum3). Nur die Ausgangsschicht der Startseite;
   die Ankunft steht in bereiche/ankunft.css. Bewegung fährt uebergang.js per Web Animations. */
.ueb { position: fixed; inset: 0; z-index: 300; overflow: hidden; contain: strict; isolation: isolate; cursor: progress; }
.ueb > * { position: absolute; will-change: transform, opacity; }
.ueb__grund { background: var(--nacht, #070e16); opacity: 0; }
/* Ruhe-Modus mit heller Zielseite: in das warme Weiß der Zielseite blenden statt ins Dunkel */
.ueb--hell .ueb__grund:only-child { background: #f8f3ea; }
.ueb__buehne { overflow: hidden; border-radius: var(--raum-radius, 22px); transform-origin: 0 0; background: var(--navy, #0b1622); }
.ueb__buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* gleiche Verläufe wie auf dem Raum, damit beim Start nichts springt */
.ueb__buehne::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 32, 54, .78) 0%, rgba(13, 32, 54, 0) 26%), linear-gradient(180deg, transparent 55%, rgba(7, 14, 22, .7)); }

/* Ziel = Hero der Stationsseite (Lage wie bereiche/bereich.css .b-hero; object-position setzt uebergang.js je Seite) */
.ueb__ziel { overflow: hidden; opacity: 0; z-index: 2; }
.ueb__ziel img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; will-change: transform; }
.ueb__verlauf { position: absolute; inset: 0; pointer-events: none; }

/* Bausteine: Ziel öffnet sich rund im Kern, mit weicher Kante */
@property --ueb-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ueb-cx { syntax: "<length>"; inherits: false; initial-value: 50vw; }
@property --ueb-cy { syntax: "<length>"; inherits: false; initial-value: 50vh; }
.ueb__ziel--kreis {
  -webkit-mask-image: radial-gradient(circle var(--ueb-r) at var(--ueb-cx) var(--ueb-cy), #000 72%, transparent 100%);
          mask-image: radial-gradient(circle var(--ueb-r) at var(--ueb-cx) var(--ueb-cy), #000 72%, transparent 100%); }

/* Hero-Verläufe der Zielseiten (Werte aus bereiche/<slug>/seite.css .b-hero::after; dort geändert -> hier nachziehen) */
.ueb__verlauf--web { 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%); }
.ueb__verlauf--bausteine { 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%); }
.ueb__verlauf--assistenten { 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) {
  .ueb__verlauf--web { 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%); }
  .ueb__verlauf--bausteine { background: linear-gradient(0deg, #f8f3ea 0%, rgba(248, 243, 234, .55) 45%, rgba(248, 243, 234, .82) 100%); }
  .ueb__verlauf--assistenten { 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%); }
}

/* Figuren (Assistenten): leuchten über dem Grund, dunkle Ränder verschwinden */
.ueb__figur { z-index: 3; transform-origin: 0 0; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 55%, transparent 100%); }
.ueb__figur canvas { display: block; width: 100%; height: 100%; }

/* Vor dem Start treten Beschriftung, Puls und Überschrift kurz zurück */
#bauen.ueb-geht .station__name, #bauen.ueb-geht .station__puls, #bauen.ueb-geht .station::before,
#bauen.ueb-geht .raum__kopf { opacity: 0; transition: opacity .12s var(--weich, ease); }
/* Angebote-Seite (Rückweg in den Raum, 07.10.2026): Beschriftung der Stationen tritt während der Fahrt zurück */
.ang-hero.ueb-geht .station__name, .ang-hero.ueb-geht .station__puls, .ang-hero.ueb-geht .station::before { opacity: 0; transition: opacity .12s var(--weich, ease); }

/* Der Glutnebel (atmosphaere.css) liegt hinter den Inhalten und startet auf der Zielseite bei 0. Während des Übergangs
   tritt er hier zurück, damit Endbild und Anfangsbild gleich hell sind; auf der Zielseite blendet er von selbst auf. */
html.ueb-aktiv .atmo-nebel { opacity: 0 !important; transition: opacity .5s cubic-bezier(.65, 0, .25, 1) !important; }

/* Assistenten (raum4, 07.10.2026): Kamera-Ebene trägt Ziel-Hero, Gruppen-Freisteller und Hero-Verlauf gemeinsam */
.ueb__kamera { z-index: 2; transform-origin: 0 0; will-change: transform; }
.ueb__kamera > * { position: absolute; }
.ueb__gruppe { max-width: none; z-index: 1; }
.ueb__kamera .ueb__verlauf { z-index: 2; }
@property --ueb-rand { syntax: "<length>"; inherits: false; initial-value: 0px; }
.ueb__ziel--kreis.ueb__ziel--rand {
  -webkit-mask-image: radial-gradient(circle var(--ueb-r) at var(--ueb-cx) var(--ueb-cy), #000 72%, transparent 100%),
    linear-gradient(90deg, transparent, #000 var(--ueb-rand), #000 calc(100% - var(--ueb-rand)), transparent),
    linear-gradient(180deg, transparent, #000 var(--ueb-rand), #000 calc(100% - var(--ueb-rand)), transparent);
  -webkit-mask-composite: source-in, source-in;
          mask-image: radial-gradient(circle var(--ueb-r) at var(--ueb-cx) var(--ueb-cy), #000 72%, transparent 100%),
    linear-gradient(90deg, transparent, #000 var(--ueb-rand), #000 calc(100% - var(--ueb-rand)), transparent),
    linear-gradient(180deg, transparent, #000 var(--ueb-rand), #000 calc(100% - var(--ueb-rand)), transparent);
          mask-composite: intersect; }

/* 08.10.2026: weicher Lichtrand um den Kreis der Bausteine (der Kreis selbst ist ein clip-path auf dem Compositor) */
.ueb__ring { left: 0; top: 0; width: 200px; height: 200px; z-index: 3; pointer-events: none; transform-origin: 0 0; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle closest-side, rgba(255, 196, 120, 0) 0%, rgba(255, 196, 120, 0) 84%, rgba(255, 200, 130, .55) 95%, rgba(255, 170, 90, 0) 100%); }