/* ===== Einladung - Oberwelt (Level 1 aus SoulKeeper) ====================
   Adaptiert aus SoulKeeper/css/level1.css - dieselbe mehrschichtige
   Parallax-Komposition (Mond, zwei Friedhofsebenen, vordere Kamera-Ebene
   mit Ästen), aber OHNE die Kamerafahrt-Choreographie: SoulKeeper zeigt
   Mond/hintere Ebene zunächst in einer Startposition und fährt sie beim
   Levelübergang per transform+transition in ihre Zielposition
   ("eingefahren"). Hier gibt es keinen Übergangs-Moment, der das
   auslösen könnte - deshalb stehen Mond und hintere Ebene direkt in ihrer
   Zielposition (identische Werte wie SoulKeepers --eingefahren-Zustand).
   Ebenso entfällt bei der Kamera-Ebene (Äste) die anfängliche
   translateY(42vh)-Verschiebung - sie steht direkt in Endposition.
   Spielbereich-Anker (leere Container für Gegner) sind komplett
   weggelassen, da diese Seite keine Spiellogik enthält.

   Ebenen von hinten nach vorne (wie im Original, siehe dortige
   Kommentare):
     1. Himmel          (#himmel-hintergrund, css/welt.css)
     2. Mond            (.level1-mond) - eigenständig, kein .scene-Kind
     3. hintere Ebene   (.level1-ebene--hinten, theme-abhängig eingefärbt)
     4. vordere Ebene   (.level1-ebene--vorne, schwarz)
     5. Kamera-Ebene    (.level1-kamera-ebene, Tiefenunschärfe) */

/* ===== Mond ===== */
.level1-mond {
    position: absolute;
    top: calc(88 * var(--uh));
    right: 9%;
    width: min(calc(24 * var(--uw)), 340px);
    aspect-ratio: 1 / 1;
    z-index: 0;
    will-change: transform;
}

.level1-mond-glow {
    position: absolute;
    inset: -12%;
    background: radial-gradient(circle, var(--accent-bright) 0%, var(--accent) 25%, transparent 50%);
    filter: blur(14px);
    opacity: 0.22;
    transition: background var(--theme-transition), opacity var(--theme-transition);
}

.level1-mond-bild {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.level1-mond-tint {
    position: absolute;
    inset: 0;
    background: var(--accent);
    -webkit-mask-image: url('../../sh/img/level1/Mond.png');
    mask-image: url('../../sh/img/level1/Mond.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    mix-blend-mode: color;
    opacity: 0.8;
    transition: background var(--theme-transition);
}

/* ===== hintere Friedhofsebene ===== */
.level1-ebene--hinten {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(50 * var(--uh));
    top: calc(130 * var(--uh));
    z-index: 0;
    will-change: transform;
}

.level1-hinten-untergrund {
    position: absolute;
    left: 0;
    width: 100%;
    top: 100%;
    height: calc(100 * var(--uh));
    background: linear-gradient(to bottom, var(--level1-grau) 0, var(--level1-grau) calc(15 * var(--uh)), var(--level2-hoehle-bg) calc(25 * var(--uh)));
    transition: background var(--theme-transition);
}

/* Eigenständiges Kind von #welt-track statt von #scene-level1 (siehe
   index.php für die ausführliche Begründung: nur so gewinnt sie zuverlässig
   gegen die aufsteigenden Seelen aus dem Geschwister-Stacking-Context
   #scene-hades). top:100vh statt des früheren inset:0 - Oberwelt beginnt
   exakt bei 100vh innerhalb von #welt-track (100vh Himmel davor, siehe
   css/welt.css), height:100vh repliziert dieselbe Boxgröße, die inset:0
   vorher relativ zu #scene-level1 ergab. Alle Kind-Elemente (Boden/
   Grabsteine/Bäume/Hände) bleiben unverändert relativ zu DIESER Box
   positioniert, nur ihr Bezugsrahmen ist jetzt hier statt in #scene-level1
   definiert. z-index:2 (statt vorher 3, lokal zu #scene-level1) - muss nur
   noch > 1 sein, um gegen #scene-hades (z-index:1) zu gewinnen; bleibt
   dabei weiterhin über Mond/hinterer Ebene (beide z-index:0). */
.level1-ebene--vorne {
    position: absolute;
    top: calc(100 * var(--uh));
    left: 0;
    width: 100%;
    height: calc(100 * var(--uh));
    z-index: 2;
    /* Deckt (auch an transparenten Stellen) die volle Oberwelt-Box ab und
       liegt per z-index:2 über #scene-level1 (z-index:1, siehe css/welt.css)
       - ohne pointer-events:none fängt dieser rein dekorative, aria-hidden
       Layer sämtliche Klicks in der Oberwelt ab, bevor sie z.B. den Button
       "Hinab in die Unterwelt" (Kind von #scene-level1) erreichen. */
    pointer-events: none;
}

.level1-boden {
    position: absolute;
    left: 0;
    width: 100%;
    aspect-ratio: 1200 / 235;
    display: block;
    pointer-events: none;
}

.level1-boden--hinten {
    bottom: 0;
    background-color: var(--level1-grau);
    transition: background-color var(--theme-transition);
    -webkit-mask-image: url('../../sh/img/level1/Boden02.svg');
    mask-image: url('../../sh/img/level1/Boden02.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.level1-boden--vorne {
    bottom: 16%;
}

.level1-grabsteine,
.level1-baeume {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.level1-grabsteine--hinten,
.level1-baeume--hinten {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1200 / 235;
}

.level1-grabsteine--vorne,
.level1-baeume--vorne {
    top: auto;
    right: 0;
    bottom: 16%;
    left: 0;
    width: 100%;
    aspect-ratio: 1200 / 235;
}

.level1-grabstein,
.level1-baum {
    position: absolute;
}

.level1-grabsteine--hinten .level1-grabstein,
.level1-baeume--hinten .level1-baum {
    background-color: var(--level1-grau);
    transition: background-color var(--theme-transition);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom center;
    mask-position: bottom center;
    opacity: 0.85;
    transform-origin: bottom center;
}

.level1-grabsteine--vorne .level1-grabstein,
.level1-baeume--vorne .level1-baum {
    display: block;
    transform-origin: bottom center;
}

/* ===== Zombiehände ===== */
/* Bezugsbox wie .level1-grabsteine--vorne/.level1-baeume--vorne: dieselbe
   Box wie .level1-boden--vorne (bottom:16%, aspect-ratio 1200/235) statt
   des geerbten inset:0 (volle 100vh-Szene). Vorher war "bottom" bei
   .level1-hand relativ zur GANZEN Szene (100vh, unabhängig von der
   Fensterbreite) - Boden01.svg selbst wird aber bei schmalem Fenster
   flacher (feste aspect-ratio, width:100%). Die Hände blieben dadurch auf
   ihrer festen Scene-Höhe stehen, während der Boden darunter schrumpfte -
   ab einer bestimmten Breite schwebten sie sichtbar über dem (dann zu
   kurzen) Boden statt daraus hervorzukommen. Jetzt skaliert ihre Position
   automatisch mit der tatsächlichen Bodenhöhe mit. */
.level1-haende {
    position: absolute;
    left: 0;
    bottom: 16%;
    width: 100%;
    aspect-ratio: 1200 / 235;
    pointer-events: none;
}

/* bottom:27% statt der rohen Bodenkanten-Höhe (~30-32% an dieser Stelle,
   siehe BODEN01_KANTE in js/friedhof.js) - ein kleiner Sicherheitsabstand
   unter die Kurve, in derselben Art wie bei den JS-platzierten
   Grabsteinen/Bäumen (dort SICHERHEITS_ABSTAND unter der Kurve), nur hier
   direkt als CSS-Wert, weil die Hände statische HTML-Elemente sind. Ohne
   diesen Abstand sitzt der Handrücken praktisch genau auf der Kurve statt
   ein Stück im Boden zu stecken und wirkt dadurch leicht darüber
   schwebend. Bewusst nur ein kleiner Abzug (3 Punkte) statt eines
   grossen: die Hand-Grafik fuellt ihre Vorlage fast vollstaendig aus
   (kaum Leerraum am unteren Rand), ein groesserer Abzug wuerde sichtbar
   Handballen/Handgelenk im Boden versenken statt nur die Grundlinie
   sauber schliessen zu lassen.

   width: die frühere Form clamp(28px, calc(5 * var(--uw)), 56px) griff am
   Referenzgerät (--stage-scale:1) bereits mit der OBEREN Grenze: der
   Mittelwert (5 * var(--uw) = 64px bei scale:1) lag schon über dem Deckel
   (56px), wodurch die Hand real IMMER auf 56px capte - unabhängig von
   --stage-scale, exakt die in TODO-20260901-039 gemeldete +13%-Abweichung
   bei breiten, niedrigen Fenstern. calc(56px * var(--stage-scale)) liefert
   bei scale:1 denselben Wert wie bisher (56px, Referenzoptik unverändert),
   skaliert von dort aber rein proportional zu --stage-scale statt über
   einen (hier ohnehin nie wirksamen) vw-Mittelwert. */
.level1-hand {
    position: absolute;
    bottom: 27%;
    width: calc(56px * var(--stage-scale));
}

.level1-hand--links {
    left: 46.5%;
    transform: rotate(-4deg);
}

.level1-hand--rechts {
    left: 49.5%;
    transform: rotate(5deg);
}

/* ===== Kamera-Ebene (Äste, Tiefenunschärfe) ===== */
/* overflow:visible auf der Szene selbst (statt des Original-
   .scene-overflow:hidden) - die Äste ragen bewusst über die Oberkante
   hinaus in den vorherigen Abschnitt hinein (siehe SoulKeeper-Kommentar:
   "dürfen laut Vorgabe über den Mondbereich laufen").

   margin-bottom: negativ um --oberwelt-kuerzung (siehe css/variables.css)
   - die Oberwelt braucht (anders als im Spiel) nicht mehr die volle
   Sichthöhe: die unteren 16% dieser Szene sind ohnehin garantiert leer
   (Boden01.svg/Gräber/Hände sitzen bei bottom:16%/26%, siehe oben/unten),
   dieser Streifen wird hier "aufgeholt" - die nachfolgende Unterwelt-Szene
   rückt entsprechend nach oben und deckt ihn ab. Ändert NICHTS an der
   eigentlichen Boden-/Grabstein-/Hände-Position (die bleiben exakt wie
   bisher, alle intern per position:absolute zur eigenen Szenen-Box) - nur
   wo die NÄCHSTE Szene im Dokumentfluss beginnt, verschiebt sich nach
   oben. Muss synchron bleiben mit der Gesamthöhe von #welt-track
   (css/welt.css, selbe Variable). */
#scene-level1 {
    overflow: visible;
    margin-bottom: calc(-1 * var(--oberwelt-kuerzung));
}

.level1-kamera-ebene {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    will-change: transform;
}

.level1-ast {
    position: absolute;
    width: min(calc(40 * var(--uw)), 560px);
    filter: blur(2.5px) brightness(0.75);
}

.level1-ast--links {
    left: -8%;
    top: -45%;
    width: min(calc(50 * var(--uw)), 680px);
}

.level1-ast--rechts {
    right: -8%;
    top: -32%;
}

/* Kompaktes "Mobile"-Layout per @media(max-width) entfernt (2026-08-24,
   Bühnen-Nachbesserung) - siehe css/dialog.css fuer die Begruendung.
   .level1-mond skaliert bereits ueber min(calc(24*var(--uw)), 340px) proportional mit der Buehne mit (siehe oben). */