/* ===== SoulKeeper - Level 2: Die Unterwelt (Höhle) =====================
   Struktur/Technik 1:1 aus invitation/Test_DieUnterwelt.html übernommen
   (dortige finale, content-driven Referenzversion) - Test_DieUnterwelt.html
   selbst bleibt unverändert, dies hier ist die Übertragung auf das
   bestehende Theme-System dieser Seite (--accent/--level2-* aus
   css/variables.css statt der dortigen eigenen --uw-*-Testvariablen) und
   auf den bereits vorhandenen echten Inhalt (#programm, siehe index.html +
   css/programm.css).

   Kernprinzip (siehe Test_DieUnterwelt.html für die ausführliche
   Begründung): .unterwelt hat KEINE feste height, nur min-height:100svh.
   Die eigentliche Höhe der Sektion ergibt sich aus #programm, das als
   normaler Dokumentfluss-Inhalt in der Sektion sitzt. Die komplette
   dekorative Kulisse (.level2-decor) ist absolut mit inset:0 positioniert
   und deckt sich dadurch IMMER exakt mit der aktuellen, tatsächlichen Höhe
   der Sektion. Ebene 1 (Licht) + Ebene 2 (Höhleneingang) hängen an der
   1/3-Marke der AKTUELLEN Sektionshöhe (--uw-third), Ebene 3
   (Stalagmiten+Pilze) verteilt sich per top:% über die GESAMTE aktuelle
   Höhe, Ebene 4+5 hängen an den Ecken/Rändern (vw + min()-Obergrenzen,
   dürfen auf schmalen Screens bewusst über den Rand hinausragen).

   Kristalle (Kristall01/02.svg) sind kein Teil von Test_DieUnterwelt.html,
   bleiben aber auf ausdrücklichen Wunsch erhalten - jeweils fest an einem
   bestimmten Ebene4-Wrapper angehängt (Kristall 1 an
   .level2-cave-ebene4-2-2-wrap, Kristall 2 an .level2-cave-ebene4-4-wrap,
   siehe index.html + "Instanz #1/#2" unten) statt unabhängig vom Viewport
   positioniert: DOM-Kind des jeweiligen Wrappers, Position/Größe in %
   relativ zu dessen Box - wandert/skaliert dadurch automatisch mit, wenn
   sich der Wrapper responsiv verschiebt. Die frühere
   Staubpartikel-Ebene (.level2-particle-*) ist entfallen (nicht Teil der
   Testversion, auf Wunsch entfernt statt übernommen). Ebenso entfallen ist
   .level2-cave-hole-glow: deren Aufgabe (Licht scheint durch das Loch in
   Ebene2.svg) übernimmt jetzt vollständig die neue Ebene 1 (Grundebene +
   Overlay-Ellipse hinter der maskierten Ebene2-Silhouette) - ein separates
   Glow-Element würde denselben Effekt doppelt erzeugen. */

/* Wächst mit #programm (Was dich erwartet/Der Ablauf der Nacht) - keine
   feste Höhe mehr, siehe .unterwelt unten. */
#scene-unterwelt {
    background: transparent;
    height: auto;
}

/* Haupt-Sektion - trägt die dynamische Mindesthöhe + die gemeinsamen
   Ebene-1-Variablen (1/3-Anker, Puls-Dauer). isolation:isolate + eigene
   Ebene 3 (siehe css/welt.css: .scene.unterwelt erbt bereits position:
   relative + overflow:hidden von .scene, hier nur die Ergänzungen). */
.unterwelt {
    --uw-third: 33.333%;
    --level2-pulse-duration: 5.5s;

    min-height: 100svh;
    height: auto;
    isolation: isolate;
    background: #000;
    /* Query-Container fuer die Ebene2-Spalt-Korrektur unten (cqw statt vw
       in .level2-cave-ebene2-backdrop) - macht die Breitenbasis dort
       identisch mit der von .level2-decor/.level2-cave-ebene2 (beide 100%
       von .unterwelt), siehe dortiger Kommentar. */
    container-type: inline-size;
}

.level2-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.level2-decor-layer {
    position: absolute;
    inset: 0;
}

/* ===== Puls-Animationen (Ebene 1) ========================================
   base: kräftigeres Heller/Dunkler-Pulsieren der Grundebene (nur
   Helligkeit). beam: zurückhaltenderes Pulsieren für Deckfläche +
   Höhleneingang (Helligkeit + minimales Skalieren) - beide nutzen
   --level2-pulse-duration, bleiben dadurch synchron. */
@keyframes level2-cave-pulse-base {
    0%, 100% { filter: brightness(0.35); }
    50%      { filter: brightness(1.15); }
}

@keyframes level2-cave-pulse-beam {
    0%, 100% { filter: brightness(0.15); transform: scale(1); }
    50%      { filter: brightness(1.06); transform: scale(1.02); }
}

/* ===== EBENE 1 - Lichtquelle (Kreis + schwarze Fläche mit Ellipse) =====
   Pulsierender Kreis: Mittelpunkt horizontal zentriert, vertikal exakt auf
   der 1/3-Marke der aktuellen Sektionshöhe - verschiebt sich automatisch
   mit, wenn die Sektion (durch #programm) wächst/schrumpft. */
.level2-cave-base {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(
        circle at 50% var(--uw-third),
        color-mix(in srgb, white 88%, var(--level2-glow-color) 12%) 0%,
        color-mix(in srgb, white 55%, var(--level2-glow-color) 45%) 9%,
        var(--level2-glow-color) 24%,
        color-mix(in srgb, var(--level2-glow-color) 55%, black) 42%,
        color-mix(in srgb, var(--level2-glow-color) 25%, black) 60%,
        color-mix(in srgb, var(--level2-glow-color) 8%, black) 80%,
        #000000 100%
    );
    animation: level2-cave-pulse-base var(--level2-pulse-duration) ease-in-out infinite;
}

/* Schwarze Fläche: beginnt exakt bei der 1/3-Marke, reicht bis zum
   Sektionsende. Ellipse in vw (nicht % der - variablen - Overlay-Höhe),
   damit das Breite:Höhe-Verhältnis unabhängig von der Sektionshöhe bleibt. */
.level2-cave-overlay {
    position: absolute;
    left: 0;
    top: var(--uw-third);
    width: 100%;
    height: calc(100% - var(--uw-third));
    z-index: 2;
    background-color: #000000;
    background-image: radial-gradient(
        ellipse min(calc(40 * var(--uw)), 620px) min(calc(15 * var(--uw)), 230px) at 50% 7%,
        color-mix(in srgb, white 25%, var(--level2-glow-color) 75%) 0%,
        color-mix(in srgb, var(--level2-glow-color) 60%, black) 30%,
        color-mix(in srgb, var(--level2-glow-color) 25%, black) 55%,
        color-mix(in srgb, var(--level2-glow-color) 8%, black) 75%,
        #000000 92%
    );
    animation: level2-cave-pulse-beam var(--level2-pulse-duration) ease-in-out infinite;
}

/* ===== EBENE 2 - Höhleneingang (Ebene2.svg) ==============================
   Unterkante exakt auf der 1/3-Marke. Backdrop füllt NUR die Felsdecke
   OBERHALB der SVG (nicht dieselbe Fläche wie die SVG selbst), sonst würde
   das ausgesparte "Loch" in der Silhouette unsichtbar.

   Die Hoehe unten MUSS auf derselben Breitenbasis rechnen wie die Hoehe von
   .level2-cave-ebene2 (dort per aspect-ratio aus width:100% abgeleitet) -
   sonst klafft bei bestimmten Fensterbreiten ein Spalt zwischen beiden
   (durch den der pulsierende Kreis von Ebene 1 durchscheint). Frueher stand
   hier 100vw statt 100cqw: vw ist die ROHE Viewport-Breite (inkl. der vom
   Browser fuer den Seiten-Scrollbalken reservierten Spur), waehrend
   width:100% (bei .level2-cave-ebene2, s.u.) die TATSAECHLICH gerenderte,
   um die Scrollbalkenbreite VERKUERZTE Breite von .level2-decor ist -
   genau diese Differenz war der Spalt. 100cqw (Container-Query-Einheit,
   .unterwelt ist als container-type:inline-size deklariert) misst
   stattdessen exakt dieselbe Breite wie width:100%, unabhaengig davon, ob
   gerade ein Scrollbalken sichtbar ist. */
.level2-cave-ebene2-backdrop {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: max(0px, calc(var(--uw-third) - (100cqw * 554 / 1920)));
    z-index: 3;
    background-color: var(--level2-ebene2-color);
}

.level2-cave-ebene2 {
    position: absolute;
    left: 0;
    bottom: calc(100% - var(--uw-third));
    width: 100%;
    aspect-ratio: 1920 / 554;
    z-index: 4;
    background-color: var(--level2-ebene2-color);
    -webkit-mask-image: url('../../sh/img/level2/Ebene2.svg');
    mask-image: url('../../sh/img/level2/Ebene2.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ===== EBENE 3 - Stalagmiten + Pilze =====================================
   top:% relativ zur AKTUELLEN Sektionshöhe (nicht bottom:vh) - nur so
   verteilen sie sich über die GESAMTE schwarze Fläche (nahe der 1/3-Kante
   bis zum Boden), statt sich in einem schmalen Streifen am unteren Rand zu
   stapeln. Breite/Größe bewusst weiterhin in vw/px, nur mit oberem
   px-Deckel (min()) - ohne untere px-Grenze, siehe TODO-20260901-039. */
.level2-stalagmite {
    position: absolute;
    width: min(calc(4 * var(--uw)), 90px);
    aspect-ratio: 134 / 560;
    z-index: 5;
}

.level2-stalagmite-body {
    position: absolute;
    inset: 0;
    background-color: #000000;
    -webkit-mask-image: url('../../sh/img/level2/Ebene3_Stalagmit.svg');
    mask-image: url('../../sh/img/level2/Ebene3_Stalagmit.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Schatten: gespiegelte Kopie (scaleY(-1)), gedreht je nach Bildschirmseite
   (links vom Zentrum im Uhrzeigersinn, rechts dagegen - Licht wirkt, als
   käme es von der Mitte). transform-origin unten = Ansatzpunkt. */
.level2-stalagmite-shadow {
    position: absolute;
    inset: 0;
    background-color: #000000;
    -webkit-mask-image: url('../../sh/img/level2/Ebene3_Stalagmit.svg');
    mask-image: url('../../sh/img/level2/Ebene3_Stalagmit.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0.75;
    transform-origin: 50% 100%;
    transform: scaleY(-1) rotate(var(--shadow-rotate));
}

.level2-stalagmite-1  { left: 6%;  top: 37%; width: min(calc(2.2 * var(--uw)), 48px); --shadow-rotate: 24deg; }
.level2-stalagmite-2  { left: 18%; top: 44%; width: min(calc(2.8 * var(--uw)), 60px); --shadow-rotate: 18deg; }
.level2-stalagmite-3  { left: 33%; top: 39%; width: min(calc(2 * var(--uw)), 42px);  --shadow-rotate: 30deg; }
.level2-stalagmite-4  { left: 12%; top: 52%; width: min(calc(3.2 * var(--uw)), 72px); --shadow-rotate: 20deg; }
.level2-stalagmite-5  { left: 40%; top: 58%; width: min(calc(2.5 * var(--uw)), 54px); --shadow-rotate: 15deg; }
.level2-stalagmite-6  { left: 24%; top: 63%; width: min(calc(3.8 * var(--uw)), 86px); --shadow-rotate: 26deg; }
.level2-stalagmite-7  { left: 8%;  top: 70%; width: min(calc(3 * var(--uw)), 66px);  --shadow-rotate: 22deg; }
.level2-stalagmite-8  { left: 44%; top: 75%; width: min(calc(2.2 * var(--uw)), 48px); --shadow-rotate: 12deg; }
.level2-stalagmite-9  { left: 15%; top: 82%; width: min(calc(4 * var(--uw)), 92px);  --shadow-rotate: 28deg; }
.level2-stalagmite-10 { left: 30%; top: 90%; width: min(calc(3.5 * var(--uw)), 78px); --shadow-rotate: 20deg; }
.level2-stalagmite-11 { right: 8%;  left: auto; top: 38%; width: min(calc(2.2 * var(--uw)), 48px); --shadow-rotate: -20deg; }
.level2-stalagmite-12 { right: 22%; left: auto; top: 45%; width: min(calc(3 * var(--uw)), 64px);  --shadow-rotate: -26deg; }
.level2-stalagmite-13 { right: 12%; left: auto; top: 53%; width: min(calc(2.5 * var(--uw)), 54px); --shadow-rotate: -16deg; }
.level2-stalagmite-14 { right: 34%; left: auto; top: 60%; width: min(calc(3.5 * var(--uw)), 78px); --shadow-rotate: -22deg; }
.level2-stalagmite-15 { right: 18%; left: auto; top: 68%; width: min(calc(2.8 * var(--uw)), 60px); --shadow-rotate: -30deg; }
.level2-stalagmite-16 { right: 28%; left: auto; top: 78%; width: min(calc(3.8 * var(--uw)), 86px); --shadow-rotate: -18deg; }
.level2-stalagmite-17 { right: 10%; left: auto; top: 85%; width: min(calc(3.2 * var(--uw)), 72px); --shadow-rotate: -24deg; }
.level2-stalagmite-18 { right: 40%; left: auto; top: 92%; width: min(calc(2.5 * var(--uw)), 54px); --shadow-rotate: -14deg; }

.level2-mushroom {
    position: absolute;
    aspect-ratio: 394 / 436;
    z-index: 6;
}

.level2-mushroom-glow {
    position: absolute;
    inset: 0;
    filter:
        drop-shadow(0 0 var(--glow-blur, 8px) color-mix(in srgb, var(--level2-pilz-glow-color) 80%, transparent))
        drop-shadow(0 0 calc(var(--glow-blur, 8px) * 2) color-mix(in srgb, var(--level2-pilz-glow-color) 55%, transparent));
}

.level2-mushroom-shape {
    position: absolute;
    inset: 0;
    background-color: var(--level2-pilz-color);
    -webkit-mask-image: url('../img/level2/Pilze.svg');
    mask-image: url('../img/level2/Pilze.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* top:% relativ zur AKTUELLEN Sektionshöhe (wie bei den Stalagmiten) -
   verteilt sich über die GESAMTE schwarze Fläche statt sich am unteren
   Rand zu stapeln, wo Ebene 4/5 sie fast vollständig verdecken würden. */
.level2-mushroom-1  { left: 6%;  top: 39%; height: min(calc(3 * var(--uw)), 40px); }
.level2-mushroom-2  { left: 90%; top: 42%; height: min(calc(2.7 * var(--uw)), 36px); }
.level2-mushroom-3  { left: 70%; top: 46%; height: min(calc(2 * var(--uw)), 24px); --glow-blur: 4px; }
.level2-mushroom-4  { left: 16%; top: 49%; height: min(calc(2.1 * var(--uw)), 25px); --glow-blur: 4px; }
.level2-mushroom-5  { left: 4%;  top: 56%; height: min(calc(2.9 * var(--uw)), 38px); }
.level2-mushroom-6  { left: 94%; top: 59%; height: min(calc(2.4 * var(--uw)), 30px); --glow-blur: 6px; }
.level2-mushroom-7  { left: 25%; top: 53%; height: min(calc(1.8 * var(--uw)), 22px); --glow-blur: 4px; }
.level2-mushroom-8  { left: 82%; top: 63%; height: min(calc(3 * var(--uw)), 40px); }
.level2-mushroom-9  { left: 10%; top: 68%; height: min(calc(2.2 * var(--uw)), 28px); --glow-blur: 6px; }
.level2-mushroom-10 { left: 88%; top: 71%; height: min(calc(2 * var(--uw)), 24px); --glow-blur: 4px; }
.level2-mushroom-11 { left: 36%; top: 74%; height: min(calc(2.7 * var(--uw)), 36px); }
.level2-mushroom-12 { left: 60%; top: 77%; height: min(calc(2.1 * var(--uw)), 25px); --glow-blur: 4px; }
.level2-mushroom-13 { left: 3%;  top: 83%; height: min(calc(3 * var(--uw)), 40px); }
.level2-mushroom-14 { left: 96%; top: 84%; height: min(calc(2.4 * var(--uw)), 30px); --glow-blur: 6px; }
.level2-mushroom-15 { left: 22%; top: 88%; height: min(calc(2 * var(--uw)), 24px); --glow-blur: 4px; }
.level2-mushroom-16 { left: 77%; top: 90%; height: min(calc(2.2 * var(--uw)), 28px); --glow-blur: 6px; }

/* ===== EBENE 4 - mittlere vordere Höhlenschicht ==========================
   min(bevorzugte vw-Breite, Maximalbreite) statt fester vw-Werte - der
   Maximalwert wirkt weiterhin als Deckel gegen Übergröße auf sehr großen
   Bildschirmen; dort dürfen die Elemente bewusst über den Rand
   hinausragen (.unterwelt: overflow:hidden schneidet nur das ab, was über
   die Sektion selbst hinausgeht). Frühere UNTERE px-Grenze (clamp())
   entfernt (TODO-20260901-039): sie verhinderte proportionales
   Mitskalieren bei breiten, aber niedrigen Fenstern. */
.level2-cave-ebene4-1-wrap {
    position: absolute;
    top: calc(-5 * var(--uw));
    right: calc(-3 * var(--uw));
    width: min(calc(66 * var(--uw)), 1150px);
    aspect-ratio: 929 / 265;
    z-index: 7;
}

/* Ebene4_2.svg ist in drei separate Dateien aufgeteilt: Ebene4_2_1.svg oben
   links, Ebene4_2_2.svg unten links, Ebene4_4.svg unten rechts - alle drei
   teilen dieselbe Bild-Proportion (1550/3240). */
.level2-cave-ebene4-2-1-wrap {
    position: absolute;
    left: calc(-2 * var(--uw));
    top: calc(-2 * var(--uw));
    width: min(calc(38 * var(--uw)), 640px);
    aspect-ratio: 1550 / 3240;
    z-index: 7;
}

/* Trägt zusätzlich den Kristall (Instanz #1, siehe unten) auf dem
   Ebene4_2_2-Stein - Kristall-Wrap liegt im DOM (siehe index.html) NACH
   .level2-cave-ebene4-glow, malt dadurch innerhalb dieses ohnehin schon
   isolierten z-index:7-Stapels über der Fels-Silhouette, bleibt aber als
   Teil desselben Stapels weiterhin unter #programm (z-index:20) und Ebene 5
   (z-index:21/22) - genau die gewünschte Reihenfolge Fels < Kristall <
   Inhalt < Ebene 5, ganz ohne einen eigenen, höheren z-index auf dem
   Kristall selbst. */
.level2-cave-ebene4-2-2-wrap {
    position: absolute;
    left: calc(-3 * var(--uw));
    bottom: calc(-2 * var(--uw));
    width: min(calc(42 * var(--uw)), 720px);
    aspect-ratio: 1550 / 3240;
    z-index: 7;
}

/* Obergrenze deutlich angehoben (vorher 320/42vw/720), aus demselben
   Grund wie bei .level2-cave-ebene4-3-wrap oben. Trägt zusätzlich den
   Kristall (Instanz #2, siehe unten) auf dem Ebene4_4-Stein - siehe
   Kommentar bei .level2-cave-ebene4-2-2-wrap zur Layer-Reihenfolge. */
.level2-cave-ebene4-4-wrap {
    position: absolute;
    right: calc(-3 * var(--uw));
    bottom: calc(-2 * var(--uw));
    width: min(calc(54 * var(--uw)), 1040px);
    aspect-ratio: 1550 / 3240;
    z-index: 7;
}

/* Hängt am unteren Rand, ca. 42% ihrer Fläche ragt sichtbar hinein -
   translateY(58%) relativ zur EIGENEN Boxhöhe.
   Obergrenze deutlich angehoben (vorher 360/40vw/620) - bei großen
   Auflösungen lief der alte Max-Wert (620px) schon bei 1550px Fensterbreite
   in seine Obergrenze und blieb auf großen Displays optisch bedeutungslos
   klein. Seitenverhältnis (aspect-ratio) unverändert, wächst/schrumpft
   weiterhin proportional wie die responsive Baumgröße der Oberwelt. */
.level2-cave-ebene4-3-wrap {
    position: absolute;
    left: 24%;
    bottom: 0;
    width: min(calc(50 * var(--uw)), 980px);
    aspect-ratio: 510 / 369;
    transform: translateY(58%);
    z-index: 7;
}

/* Kontur-Leuchten: eigener Wrapper OHNE mask-image, trägt nur den
   drop-shadow-Filter - zieht sich entlang der Alpha-Kante des maskierten
   Kind-Elements. Farbe = --level2-glow-color, dieselbe Theme-Farbe wie der
   pulsierende Kreis in Ebene 1. */
.level2-cave-ebene4-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter:
        drop-shadow(0 0 8px color-mix(in srgb, var(--level2-glow-color) 85%, transparent))
        drop-shadow(0 0 20px color-mix(in srgb, var(--level2-glow-color) 55%, transparent));
}

.level2-cave-ebene4-1-wrap .level2-cave-ebene4-shape,
.level2-cave-ebene4-2-1-wrap .level2-cave-ebene4-shape,
.level2-cave-ebene4-2-2-wrap .level2-cave-ebene4-shape,
.level2-cave-ebene4-4-wrap .level2-cave-ebene4-shape,
.level2-cave-ebene4-3-wrap .level2-cave-ebene4-shape {
    position: absolute;
    inset: 0;
    background-color: var(--level2-ebene4-color);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.level2-cave-ebene4-1-wrap .level2-cave-ebene4-shape   { -webkit-mask-image: url('../../sh/img/level2/Ebene4_1.svg');   mask-image: url('../../sh/img/level2/Ebene4_1.svg'); }
.level2-cave-ebene4-2-1-wrap .level2-cave-ebene4-shape { -webkit-mask-image: url('../img/level2/Ebene4_2_1.svg'); mask-image: url('../img/level2/Ebene4_2_1.svg'); }
.level2-cave-ebene4-2-2-wrap .level2-cave-ebene4-shape { -webkit-mask-image: url('../img/level2/Ebene4_2_2.svg'); mask-image: url('../img/level2/Ebene4_2_2.svg'); }
.level2-cave-ebene4-4-wrap .level2-cave-ebene4-shape   { -webkit-mask-image: url('../img/level2/Ebene4_4.svg');   mask-image: url('../img/level2/Ebene4_4.svg'); }
.level2-cave-ebene4-3-wrap .level2-cave-ebene4-shape   { -webkit-mask-image: url('../../sh/img/level2/Ebene4_3.svg');   mask-image: url('../../sh/img/level2/Ebene4_3.svg'); }

/* ===== EBENE 5 - vorderste Höhlenschicht =================================
   Bleibt unverändert schwarz (kein Theme-Einfluss). Oben durchgehend +
   unten beide Ecken (der untere durchgehende Streifen, Ebene5_4.svg,
   bleibt bewusst der bereits vorhandene, eigenständige Übergang zum
   Höllentor - siehe css/welt.css: .level2-uebergang-hoellentor - und wird
   hier NICHT zusätzlich dupliziert).
   width:100% deckt die volle Sektionsbreite ab.

   Ebene5_1/5_2 sind NICHT mehr Kind von .level2-decor/.unterwelt, sondern
   von .level2-ebene5-front (eigenständiges Kind von #welt-track, siehe
   dortiger Kommentar in css/welt.css) - Ebene 5 ist die vorderste
   Höhlenschicht und soll wie ein Rahmen sowohl vor #programm als auch vor
   den fallenden Seelen (die als Nachfahren der GESCHWISTER-Sektion
   #scene-hades sonst jeden z-index innerhalb von #scene-unterwelt
   aussticht) liegen, statt dahinter zu verschwinden. z-index:21/22 hier
   regelt dabei nur noch die Reihenfolge UNTEREINANDER (Ebene5_1 unter
   Ebene5_2) - dass die Gruppe vor #programm/#scene-hades landet, übernimmt
   bereits .level2-ebene5-front. .level2-ebene5-front bleibt
   pointer-events:none, Klicks/Hover auf dem Inhalt darunter funktionieren
   dadurch weiterhin.

   Ebene5_3 (siehe eigener Kommentar bei .level2-cave-ebene5-3-wrap unten)
   ist die AUSNAHME: sitzt bewusst wieder in .level2-decor/.unterwelt statt
   in .level2-ebene5-front, weil sie sonst auf schmalen Screens
   #programm-Inhalte verdeckt haette. */
.level2-cave-ebene5-1-wrap {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    aspect-ratio: 1920 / 161;
    z-index: 21;
}

.level2-cave-ebene5-2-wrap {
    position: absolute;
    left: 0; bottom: 0;
    width: calc(46 * var(--uw));
    aspect-ratio: 829 / 325;
    z-index: 22;
}

/* Ausnahme innerhalb von Ebene 5: sitzt (anders als 5-1/5-2, siehe
   index.html fuer die Begruendung) wieder als Kind von .level2-decor
   INNERHALB von #scene-unterwelt statt in .level2-ebene5-front - deckte auf
   schmalen Screens sonst #programm-Inhalte zu. z-index deshalb NICHT mehr
   gegen #scene-hades (26), sondern lokal innerhalb von #scene-unterwelts
   eigenem Stacking-Context: hoeher als Kristall/Fels (7), aber niedriger
   als #programm (20) - vor dem Kristall, hinter dem Text. */
.level2-cave-ebene5-3-wrap {
    position: absolute;
    right: 0; bottom: 0;
    width: calc(36 * var(--uw));
    aspect-ratio: 483 / 723;
    z-index: 15;
}

.level2-cave-ebene5-1-wrap .level2-cave-ebene5-shape,
.level2-cave-ebene5-2-wrap .level2-cave-ebene5-shape,
.level2-cave-ebene5-3-wrap .level2-cave-ebene5-shape {
    position: absolute;
    inset: 0;
    background-color: #000000;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.level2-cave-ebene5-1-wrap .level2-cave-ebene5-shape { -webkit-mask-image: url('../../sh/img/level2/Ebene5_1.svg'); mask-image: url('../../sh/img/level2/Ebene5_1.svg'); }
.level2-cave-ebene5-2-wrap .level2-cave-ebene5-shape { -webkit-mask-image: url('../img/level2/Ebene5_2.svg'); mask-image: url('../img/level2/Ebene5_2.svg'); }
.level2-cave-ebene5-3-wrap .level2-cave-ebene5-shape { -webkit-mask-image: url('../../sh/img/level2/Ebene5_3.svg'); mask-image: url('../../sh/img/level2/Ebene5_3.svg'); }

/* ===== Kristalle: Kristall01.svg (Kontur) + Kristall02.svg (Grundform) =====
   Unverändert aus der vorherigen Version übernommen (kein Teil von
   Test_DieUnterwelt.html, auf Wunsch beibehalten) - bewusst OHNE
   Theme-Variablen, feste Lila-Wirkung unabhängig vom gewählten Theme.
   Position/Größe in % relativ zur jeweiligen Wrapper-Box (Ebene4_3-/
   Ebene5_3-Stein) - da sich nur die absolute Größe der Wrapper geändert
   hat (nicht deren Seitenverhältnis), bleiben diese %-Werte unverändert
   gültig. */
@keyframes level2-crystal-pulse {
    0%, 100% {
        opacity: var(--crystal-outline-op-min);
        filter:
            drop-shadow(0 0 var(--crystal-glow-min) var(--crystal-outline-color))
            drop-shadow(0 0 calc(var(--crystal-glow-min) * 2.5) var(--crystal-outline-color))
            drop-shadow(0 0 calc(var(--crystal-glow-min) * 5) var(--crystal-outline-color));
    }
    50% {
        opacity: var(--crystal-outline-op-max);
        filter:
            drop-shadow(0 0 var(--crystal-glow-max) var(--crystal-outline-color))
            drop-shadow(0 0 calc(var(--crystal-glow-max) * 2.5) var(--crystal-outline-color))
            drop-shadow(0 0 calc(var(--crystal-glow-max) * 5) var(--crystal-outline-color));
    }
}

.level2-crystal-ambient-wrap {
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--crystal-ambient-color) 0%, transparent 55%);
    filter: blur(var(--crystal-ambient-blur));
    mix-blend-mode: screen;
    animation: level2-crystal-pulse var(--crystal-pulse-duration) ease-in-out var(--crystal-pulse-delay) infinite;
}

.level2-crystal-wrap {
    --crystal-body-bottom: #D9B8FF;
    --crystal-body-top: #3A1F5C;
    --crystal-body-opacity: 0.55;
    --crystal-outline-color: rgba(191, 102, 255, 0.95);
    --crystal-ambient-color: rgba(180, 110, 255, 0.45);
    --crystal-ambient-blur: 20px;
    --crystal-outline-op-min: 0.65;
    --crystal-outline-op-max: 0.95;
    --crystal-glow-min: 4px;
    --crystal-glow-max: 14px;
    --crystal-pulse-duration: 6.5s;
    --crystal-pulse-delay: 0s;

    position: absolute;
    aspect-ratio: 1097 / 1095;
    pointer-events: none;
}

.level2-crystal-body {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--crystal-body-bottom), var(--crystal-body-top));
    opacity: var(--crystal-body-opacity);
    -webkit-mask-image: url('../img/level2/Kristall02.svg');
    mask-image: url('../img/level2/Kristall02.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.level2-crystal-outline-wrap {
    position: absolute;
    inset: 0;
    animation: level2-crystal-pulse var(--crystal-pulse-duration) ease-in-out var(--crystal-pulse-delay) infinite;
}

.level2-crystal-outline-shape {
    position: absolute;
    inset: 0;
    background-color: var(--crystal-outline-color);
    -webkit-mask-image: url('../img/level2/Kristall01.svg');
    mask-image: url('../img/level2/Kristall01.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.level2-crystal--glow-weak   { --crystal-glow-min: 3px;  --crystal-glow-max: 10px; --crystal-ambient-blur: 16px; }
.level2-crystal--glow-medium { --crystal-glow-min: 4px;  --crystal-glow-max: 14px; --crystal-ambient-blur: 24px; }
.level2-crystal--glow-strong { --crystal-glow-min: 6px;  --crystal-glow-max: 20px; --crystal-ambient-blur: 34px; }

/* Instanz #1: auf dem Stein von Ebene 4 (Ebene4_2_2). Position/Größe (%
   relativ zur Wrapper-Box .level2-cave-ebene4-2-2-wrap, siehe index.html)
   per Alpha-Sampling von Ebene4_2_2.svg ermittelt - liegt auf der größten
   durchgehend deckenden Fläche der Fels-Silhouette, nicht irgendwo im
   transparenten Bereich daneben. Deutlich weiter oben + etwas weiter
   links als frueher (vorher 45%/77%), damit die Unterkante optisch etwa
   auf/knapp unter der Oberkante von Kristall 2 (rechts) liegt - erneut per
   Alpha-Sampling (Ueberdeckung des Kristall-Umrisses mit der Fels-Flaeche)
   geprueft, damit er weiterhin sauber auf dem Stein sitzt statt in der
   Luft zu schweben. */
.level2-crystal-1 {
    --crystal-pulse-duration: 7s;
    --crystal-pulse-delay: -2.3s;
    left: 36%;
    top: 59%;
    transform: translate(-50%, -50%);
    width: 38%;
}

/* Instanz #2: auf dem Stein von Ebene 4 (Ebene4_4). Position/Größe
   ebenfalls per Alpha-Sampling von Ebene4_4.svg ermittelt. */
.level2-crystal-2 {
    --crystal-pulse-duration: 6s;
    --crystal-pulse-delay: -4s;
    left: 60%;
    top: 80%;
    transform: translate(-50%, -50%);
    width: 36%;
}

/* ===== Gesteins-Tönung =====
   Färbt den jeweiligen Stein selbst an (radial-gradient, per Stein-SVG
   maskiert, mix-blend-mode:screen). Dieselben festen Lila-Töne wie die
   Kristalle - gehört zur unveränderten Kristallwirkung, nicht zum Theme. */
@keyframes level2-crystal-tint-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

.level2-crystal-rock-tint {
    position: absolute;
    inset: 0;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mix-blend-mode: screen;
    pointer-events: none;
}

.level2-crystal-rock-tint--ebene4-2-2 {
    background: radial-gradient(
        circle at 36% 59%,
        rgba(190, 120, 255, 0.95) 0%,
        rgba(170, 90, 255, 0.55) 22%,
        transparent 55%
    );
    -webkit-mask-image: url('../img/level2/Ebene4_2_2.svg');
    mask-image: url('../img/level2/Ebene4_2_2.svg');
    animation: level2-crystal-tint-pulse 7s ease-in-out -2.3s infinite;
}

.level2-crystal-rock-tint--ebene4-4 {
    background: radial-gradient(
        circle at 60% 80%,
        rgba(190, 120, 255, 0.95) 0%,
        rgba(170, 90, 255, 0.55) 22%,
        transparent 55%
    );
    -webkit-mask-image: url('../img/level2/Ebene4_4.svg');
    mask-image: url('../img/level2/Ebene4_4.svg');
    animation: level2-crystal-tint-pulse 6s ease-in-out -4s infinite;
}

/* ===== CONTENT-EBENE =====================================================
   Der eigentliche Inhalt (#programm, siehe index.html + css/programm.css)
   liegt im DOKUMENTFLUSS (nicht absolut) -> bestimmt die tatsächliche Höhe
   von .unterwelt. z-index über allen dekorativen Ebenen (max. 10 oben),
   damit Text NIE hinter einem SVG verschwinden kann. */
#programm {
    position: relative;
    z-index: 20;
}

/* ===== Großer Hänge-Kokon über "Was dich erwartet" ========================
   1:1 nach dem Referenz-Screenshot bemessen: dort reicht der Faden über
   fast die gesamte Höhe des ERSTEN Bildschirms (nicht der gesamten, oft
   viele Bildschirme hohen Sektion!), die Kugel hängt unten genau in die
   Kartenreihe hinein. WICHTIG deshalb: top/height in vh (Bezug: Höhe des
   sichtbaren Fensters), NICHT in % (Bezug wäre sonst die GESAMTE
   Sektionshöhe von oft 3000-5000px - ein %-Wert hätte das Element dadurch
   winzig und/oder an der falschen Stelle plaziert, genau der Fehler in der
   vorigen Fassung). Seitenverhältnis der Box bewusst breiter als das native
   SVG (180/320) - dadurch wirkt die Kugel unten sichtbar breiter als hoch,
   wie im Screenshot.

   z-index:25 (über #programm 20). Ebene5_1.svg (oberer Bergkamm-Rahmen,
   css/welt.css: .level2-ebene5-front, z-index:26 in einem KOMPLETT eigenen
   Stacking-Context auf #welt-track-Ebene) sitzt IMMER vor allem innerhalb
   von #scene-unterwelt, unabhängig von jedem z-index hier - der Faden muss
   deshalb nur nah genug an top:0 heranreichen, dann verschwindet sein
   oberes Ende automatisch dahinter: der gewünschte "hängt am Fels"-Effekt,
   ganz ohne zusätzlichen Trick. */
.level2-kokon-hero {
    position: absolute;
    top: calc(-1 * var(--uh));
    left: 50%;
    height: min(calc(90 * var(--uh)), 1010px);
    aspect-ratio: 0.78;
    z-index: 25;
    /* Versatz zur reinen Zentrierung (translateX(-50%)): 55px + 565px nach
       links, danach 510px nach rechts zurück = netto 110px nach links. */
    transform: translateX(calc(-50% - 110px));
    /* Leichter Weichzeichner - der Kokon soll etwas verschwommen wirken. */
    filter: blur(3px);
    background-color: rgba(226, 222, 234, 0.98);
    -webkit-mask-image: url('../img/level2/Spinnenkokons/Spinnenkokon.svg');
    mask-image: url('../img/level2/Spinnenkokons/Spinnenkokon.svg');
    -webkit-mask-position: top center;
    mask-position: top center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ===== Kleiner Spinnenschwarm um den Kokon (js/kokon-spinnen.js) =========
   Canvas statt 60-100 einzelner DOM-/SVG-Elemente (Performance, siehe
   dortiger Kommentar). Box liegt in DENSELBEN vh-Koordinaten wie
   .level2-kokon-hero (siehe dortiger Kommentar: NICHT % wegen der oft
   vielfach höheren Sektion) und teilt denselben horizontalen
   transform-Versatz - dadurch exakt auf den Kokon zentriert, nur breiter
   (deckt dessen "nähere Umgebung" links/rechts mit ab). z-index identisch
   zum Kokon (25) - dieselbe Tiefenebene, rührt an der bestehenden
   Tiefen-/Parallaxenstaffelung nichts. */
.level2-kokon-spinnen-wrap {
    position: absolute;
    top: calc(-1 * var(--uh));
    left: 50%;
    height: min(calc(90 * var(--uh)), 1010px);
    width: min(calc(100 * var(--uw)), 1700px);
    z-index: 25;
    transform: translateX(calc(-50% - 110px));
    pointer-events: none;
}

.level2-kokon-spinnen-wrap canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ===== Großer Netz-Strang neben dem Kokon =================================
   Ebenfalls in vh positioniert (top), aus demselben Grund wie beim Kokon
   oben - muss im ERSTEN Bildschirm neben dem Kokon über der Kartenreihe
   sitzen, nicht irgendwo proportional in der Gesamthöhe der Sektion.
   NetzUntenLinks.svg (Ankerpunkt des Netzes liegt in diesem Asset unten
   links, siehe Original-Kommentar in der SVG-Datei) - dadurch keine
   Spiegelung nötig: der Anker sitzt automatisch nah am Kokon/den Karten,
   die Fäden fächern von dort aus nach rechts auf und reichen bis weit über
   den rechten Bildschirmrand hinaus (.scene hat overflow:hidden, siehe
   css/welt.css - schneidet den Überstand sauber an der Sektionsgrenze ab).
   z:24 = über #programm (20), sitzt dadurch sichtbar VOR den Karten. */
.level2-web-vorne {
    position: absolute;
    top: calc(34 * var(--uh));
    left: 46%;
    width: min(calc(92 * var(--uw)), 1650px);
    aspect-ratio: 1200 / 600;
    z-index: 24;
    opacity: 0.9;
    transform: rotate(-4deg);
    background-color: rgba(220, 216, 232, 0.95);
    -webkit-mask-image: url('../img/level2/SpinnenNetz/NetzUntenLinks.svg');
    mask-image: url('../img/level2/SpinnenNetz/NetzUntenLinks.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ===== Horizontaler Netz-Strang quer über die Höhle =======================
   NetzHorizontal.svg (viewBox 1200x500) spannt bewusst über die GESAMTE
   Bildschirmbreite (left:0, width:100% von .level2-decor = 100% von
   .unterwelt, siehe dortiger Kommentar zu container-type:inline-size) statt
   wie .level2-web-vorne nur einen Ausschnitt zu zeigen. top:60vh = Höhe 60
   der Höhlensektion. z:24 = gleiche Ebene wie .level2-web-vorne, über
   #programm (20). */
.level2-web-horizontal {
    position: absolute;
    top: calc(150 * var(--uh));
    left: 0;
    width: 100%;
    aspect-ratio: 1200 / 500;
    z-index: 24;
    opacity: 0.9;
    background-color: rgba(220, 216, 232, 0.95);
    -webkit-mask-image: url('../img/level2/SpinnenNetz/NetzHorizontal.svg');
    mask-image: url('../img/level2/SpinnenNetz/NetzHorizontal.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ===== Erlösung: Kasten-Nebel, Spinnennetze und Kokon verschwinden ========
   Sobald der Fluch gebrochen ist (html.fluch-gebrochen, siehe js/fluch-
   status.js - deckt Spielsieg, ?fluch=gebrochen UND die Erlösungssequenz/
   das worldFree-Cookie gleichermaßen ab), gelten diese Bilder als Teil des
   Effekts und sollen nicht mehr erscheinen (Vorgabe: "wenn die Welt gerettet
   ist"). [class*="-nebel-"] trifft alle "Karte X/Ablauf/JagdSieger
   einnebeln"-Instanzen oben (deren Klassennamen IMMER "-nebel-" enthalten,
   z.B. .level2-pflicht-nebel-mitte) - bewusst NICHT die allgemeine
   Höhlenatmosphäre (.level2-smoke-corner-N, .level2-smoke-bottom-N - kein
   "-nebel-" im Namen, hängt nicht "an den Kästen", sondern an der Szene
   selbst) und NICHT die Oberwelt-Nebelschichten .nebel-schicht (kein
   "-nebel-" im Namen, siehe css/verfluchung.css für deren eigene Regel). */
html.fluch-gebrochen:not(.erloesung-laeuft) [class*="-nebel-"],
html.fluch-gebrochen:not(.erloesung-laeuft) .level2-web-vorne,
html.fluch-gebrochen:not(.erloesung-laeuft) .level2-web-horizontal,
html.fluch-gebrochen:not(.erloesung-laeuft) .level2-kokon-hero,
html.fluch-gebrochen:not(.erloesung-laeuft) .level2-spinne,
html.fluch-gebrochen:not(.erloesung-laeuft) .level2-spinnenfaden,
html.fluch-gebrochen:not(.erloesung-laeuft) .verfluchte-hexe,
html.fluch-gebrochen:not(.erloesung-laeuft) .level2-kokon-spinnen-wrap {
    display: none;
}

/* ===== Erlösungssequenz: dieselben Elemente blenden weich aus ============
   Während die Sequenz läuft (html.erloesung-laeuft, siehe js/fluch-status.js)
   ist die Welt noch verflucht, Spinne und Schwarm laufen also ganz normal.
   Die HEXE ist hier bewusst nicht mehr dabei: sie startet bei ?state=free
   gar nicht erst (siehe js/hexenflug.js, istGebrochen-Abfrage) - wer über
   diesen Weg zurückkommt, hat sie bereits besiegt, sie darf also auch nicht
   erst noch weich ausblenden müssen.
   Am Nebel-Satz kommt .erloesung-ausblenden dazu und alles verschwindet
   GEMEINSAM und weich - dieselbe Technik und dieselbe Dauer wie beim
   Oberwelt-Nebel (css/verfluchung.css), damit es als EIN Vorgang wirkt statt
   als mehrere Einzelschaltungen. Die harte display:none-Regel oben ist
   solange per :not(.erloesung-laeuft) ausgesetzt (display kann nicht
   transitionieren); js/verlorene-seele.js: erloesungAbgeschlossen nimmt
   .erloesung-laeuft am Ende weg, ab dann greift wieder der normale
   Endzustand.

   Spinne und Spinnenschwarm sind js-erzeugt und laufen in eigenen Schleifen
   weiter - die stoppen ihre Skripte selbst beim Event "welt-befreit" (siehe
   js/spinne.js, js/kokon-spinnen.js). */
html.erloesung-laeuft [class*="-nebel-"],
html.erloesung-laeuft .level2-web-vorne,
html.erloesung-laeuft .level2-web-horizontal,
html.erloesung-laeuft .level2-kokon-hero,
html.erloesung-laeuft .level2-spinne,
html.erloesung-laeuft .level2-spinnenfaden,
html.erloesung-laeuft .level2-kokon-spinnen-wrap {
    transition: opacity 2.5s ease;
}

html.erloesung-laeuft.erloesung-ausblenden [class*="-nebel-"],
html.erloesung-laeuft.erloesung-ausblenden .level2-web-vorne,
html.erloesung-laeuft.erloesung-ausblenden .level2-web-horizontal,
html.erloesung-laeuft.erloesung-ausblenden .level2-kokon-hero,
html.erloesung-laeuft.erloesung-ausblenden .level2-spinne,
html.erloesung-laeuft.erloesung-ausblenden .level2-spinnenfaden,
html.erloesung-laeuft.erloesung-ausblenden .level2-kokon-spinnen-wrap {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    html.erloesung-laeuft [class*="-nebel-"],
    html.erloesung-laeuft .level2-web-vorne,
    html.erloesung-laeuft .level2-web-horizontal,
    html.erloesung-laeuft .level2-kokon-hero,
    html.erloesung-laeuft .level2-spinne,
    html.erloesung-laeuft .level2-spinnenfaden,
    html.erloesung-laeuft .level2-kokon-spinnen-wrap {
        transition: opacity 0.4s ease;
    }
}

/* ===== Nebelbilder (Smoke.png) =============================================
   Rasterbild (img/level2/Smoke.png, 550x300, mit Transparenz) als
   background-image - kein mask-image, das PNG bringt seine eigene weiche
   Kontur/Schattierung schon mit. Gemeinsame Basis für die Eck-Nebel-,
   Boden-Nebel- und Karten-Nebel-Instanzen unten. */
.level2-smoke-bild {
    position: absolute;
    aspect-ratio: 550 / 300;
    pointer-events: none;
    background-image: url('../img/level2/Smoke.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* ----- Nebel-Oben: Instanzen im oberen Bereich der Unterwelt, HINTER
   Ebene5_1.svg (css/welt.css: .level2-ebene5-front, z-index:27 in einem
   eigenen Stacking-Context - schlägt automatisch jeden z-index hier, ganz
   ohne Sondertrick; z:8 reicht deshalb, Hauptsache unterhalb von #programm
   20). Über die GESAMTE Breite (9-12 sind die linksseitigen Instanzen). */
.level2-smoke-corner-1  { top: calc(-1 * var(--uh)); right: 0%;  width: min(calc(20 * var(--uw)), 360px); z-index: 8; opacity: 0.85; }
.level2-smoke-corner-2  { top: calc(3 * var(--uh));  right: 11%; width: min(calc(18 * var(--uw)), 320px); z-index: 8; opacity: 0.75; transform: scaleX(-1); }
.level2-smoke-corner-3  { top: calc(6 * var(--uh));  right: 3%;  width: min(calc(16 * var(--uw)), 280px); z-index: 8; opacity: 0.7;  transform: rotate(3deg); }
.level2-smoke-corner-4  { top: calc(8 * var(--uh));  right: 16%; width: min(calc(15 * var(--uw)), 260px); z-index: 8; opacity: 0.65; transform: scaleX(-1) rotate(-2deg); }
.level2-smoke-corner-5  { top: calc(-2 * var(--uh)); right: 22%; width: calc(650px / 1.5 * var(--stage-scale)); z-index: 8; opacity: 0.8; }
.level2-smoke-corner-6  { top: calc(-7 * var(--uh));  left: 40%;  width: min(calc(22 * var(--uw)), 380px); z-index: 8; opacity: 0.7;  transform: scaleX(-1); }
.level2-smoke-corner-7  { top: calc(-3 * var(--uh)); right: 28%; width: min(calc(19 * var(--uw)), 330px); z-index: 8; opacity: 0.65; transform: rotate(-3deg); }
.level2-smoke-corner-8  { top: calc(2 * var(--uh));  left: 55%;  width: min(calc(21 * var(--uw)), 360px); z-index: 8; opacity: 0.65; transform: scaleX(-1) rotate(2deg); }
.level2-smoke-corner-9  { top: calc(-2 * var(--uh)); left: -2%;  width: calc(620px / 1.5 * var(--stage-scale)); z-index: 8; opacity: 0.8; }
.level2-smoke-corner-10 { top: calc(3 * var(--uh));  left: 10%;  width: min(calc(22 * var(--uw)), 380px); z-index: 8; opacity: 0.72; transform: scaleX(-1); }
.level2-smoke-corner-11 { top: calc(7 * var(--uh));  left: 24%;  width: min(calc(19 * var(--uw)), 330px); z-index: 8; opacity: 0.68; }
.level2-smoke-corner-12 { top: calc(-1 * var(--uh)); left: 32%;  width: min(calc(23 * var(--uw)), 400px); z-index: 8; opacity: 0.72; transform: scaleX(-1) rotate(2deg); }


/* ----- Karte 1 "Kostüm-Pflicht" einnebeln  */
.level2-pflicht-nebel-mitte { position: absolute; top: 50%; left: 50%; width: calc(550px / 1.5 * var(--stage-scale)); transform: translate(-50%, -50%); z-index: 2; opacity: 0.98; filter: brightness(5); }
.level2-pflicht-nebel-versetzt { position: absolute; top: calc(50% - 140px / 1.5 * var(--stage-scale)); left: calc(50% - 135px / 1.5 * var(--stage-scale)); width: calc(350px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }

/* ----- Karte 2 "Hexentrank-Bar" einnebeln  */
.level2-Hexentrank-nebel-mitte { position: absolute; top: 50%; left: 50%; width: calc(250px / 1.5 * var(--stage-scale)); transform: translate(-50%, -50%); z-index: 2; opacity: 0.88; filter: brightness(4); }
.level2-Hexentrank-nebel-versetzt { position: absolute; top: calc(50% - 275px / 1.5 * var(--stage-scale)); left: calc(50% - 50px / 1.5 * var(--stage-scale)); width: calc(450px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }

/* ----- Karte 3 "HoellenPizza" einnebeln  */
.level2-HoellenPizza-nebel-mitte { position: absolute; top: 50%; left: 50%; width: calc(450px / 1.5 * var(--stage-scale)); transform: translate(-50%, -50%); z-index: 2; opacity: 0.98; filter: brightness(5); }
.level2-HoellenPizza-nebel-versetzt { position: absolute; top: calc(50% - 105px / 1.5 * var(--stage-scale)); left: calc(50% - 35px / 1.5 * var(--stage-scale)); width: calc(175px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }

/* ----- Karte 4 "SchaurigeSpiel" einnebeln  */
.level2-SchaurigeSpiel-nebel-mitte { position: absolute; top: 50%; left: 50%; width: calc(250px / 1.5 * var(--stage-scale)); transform: translate(-50%, -50%); z-index: 2; opacity: 0.88; filter: brightness(4); }
.level2-SchaurigeSpiel-nebel-versetzt1 { position: absolute; top: calc(50% - 205px / 1.5 * var(--stage-scale)); left: calc(50% - 50px / 1.5 * var(--stage-scale)); width: calc(450px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }
.level2-SchaurigeSpiel-nebel-versetzt2 { position: absolute; top: calc(50% - 300px / 1.5 * var(--stage-scale)); left: calc(50% + 75px / 1.5 * var(--stage-scale)); width: calc(450px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }

/* ----- Karte 5 "FotoPoint" einnebeln  */
.level2-FotoPoint-nebel-mitte { position: absolute; top: 50%; left: 50%; width: calc(450px / 1.5 * var(--stage-scale)); transform: translate(-50%, -50%); z-index: 2; opacity: 0.98; filter: brightness(5); }
.level2-FotoPoint-nebel-versetzt { position: absolute; top: calc(50% - 105px / 1.5 * var(--stage-scale)); left: calc(50% - 35px / 1.5 * var(--stage-scale)); width: calc(175px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }

/* ----- Karte 6 "Showdown" einnebeln  */
.level2-Showdown-nebel-mitte { position: absolute; top: 50%; left: 50%; width: calc(550px / 1.5 * var(--stage-scale)); transform: translate(-50%, -50%); z-index: 2; opacity: 0.98; filter: brightness(5); }
.level2-Showdown-nebel-versetzt { position: absolute; top: calc(50% - 140px / 1.5 * var(--stage-scale)); left: calc(50% - 135px / 1.5 * var(--stage-scale)); width: calc(350px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }



/* ----- "Der Ablauf der Nacht" einnebeln  */
.level2-DerAblauf-nebel-mitte { position: absolute; top: 50%; left: 50%; width: calc(550px / 1.5 * var(--stage-scale)); transform: translate(-50%, -50%); z-index: 2; opacity: 0.98; filter: brightness(5); }
.level2-DerAblauf-nebel-versetzt1 { position: absolute; top: calc(50% - 880px / 1.5 * var(--stage-scale)); left: calc(50% - 35px / 1.5 * var(--stage-scale)); width: calc(550px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }
.level2-DerAblauf-nebel-versetzt2 { position: absolute; top: calc(50% - 800px / 1.5 * var(--stage-scale)); left: calc(50% + 95px / 1.5 * var(--stage-scale)); width: calc(550px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }
.level2-DerAblauf-nebel-versetzt3 { position: absolute; top: calc(50% - 600px / 1.5 * var(--stage-scale)); left: calc(50% - 0px / 1.5 * var(--stage-scale)); width: calc(350px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }
.level2-DerAblauf-nebel-versetzt4 { position: absolute; top: calc(50% - 640px / 1.5 * var(--stage-scale)); left: calc(50% - 235px / 1.5 * var(--stage-scale)); width: calc(750px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }
.level2-DerAblauf-nebel-versetzt5 { position: absolute; top: calc(50% - 640px / 1.5 * var(--stage-scale)); left: calc(50% + 235px / 1.5 * var(--stage-scale)); width: calc(650px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }
.level2-DerAblauf-nebel-versetzt6 { position: absolute; top: calc(50% - 500px / 1.5 * var(--stage-scale)); left: calc(50% - 35px / 1.5 * var(--stage-scale)); width: calc(650px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }
.level2-DerAblauf-nebel-versetzt7 { position: absolute; top: calc(50% - 400px / 1.5 * var(--stage-scale)); left: calc(50% + 355px / 1.5 * var(--stage-scale)); width: calc(850px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }
.level2-DerAblauf-nebel-versetzt8 { position: absolute; top: calc(50% - 350px / 1.5 * var(--stage-scale)); left: calc(50% - 185px / 1.5 * var(--stage-scale)); width: calc(650px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }
.level2-DerAblauf-nebel-versetzt9 { position: absolute; top: calc(50% - 200px / 1.5 * var(--stage-scale)); left: calc(50% + 135px / 1.5 * var(--stage-scale)); width: calc(850px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }
.level2-DerAblauf-nebel-versetzt10 { position: absolute; top: calc(50% - 150px / 1.5 * var(--stage-scale)); left: calc(50% - 35px / 1.5 * var(--stage-scale)); width: calc(850px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }



/* ----- Karte 7 "JagdSieger" einnebeln  */
.level2-JagdSieger-nebel-mitte { position: absolute; top: 50%; left: 50%; width: calc(550px / 1.5 * var(--stage-scale)); transform: translate(-50%, -50%); z-index: 2; opacity: 0.98; filter: brightness(5); }

.level2-JagdSieger-nebel-versetzt { position: absolute; top: calc(50% - 425px / 1.5 * var(--stage-scale)); left: calc(50% - 50px / 1.5 * var(--stage-scale)); width: calc(550px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.99; filter: brightness(5); }
.level2-JagdSieger-nebel-versetzt2 { position: absolute; top: calc(50% - 425px / 1.5 * var(--stage-scale)); left: calc(50% + 130px / 1.5 * var(--stage-scale)); width: calc(550px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }

.level2-JagdSieger-nebel-versetzt3 { position: absolute; top: calc(50% - 150px / 1.5 * var(--stage-scale)); left: calc(50%); width: calc(650px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }
.level2-JagdSieger-nebel-versetzt4 { position: absolute; top: calc(50% - 225px / 1.5 * var(--stage-scale)); left: calc(50% + 30px / 1.5 * var(--stage-scale)); width: calc(450px / 1.5 * var(--stage-scale)); transform: translate(-50%, 50%); z-index: 2; opacity: 0.95; filter: brightness(5); }







/* ----- Boden-Nebel: dasselbe im UNTEREN Bereich der Unterwelt, HINTER
   Ebene5_4.svg, aber VOR Ebene5_1/5_2 (css/welt.css: .level2-bodennebel-front,
   z-index:26 - eigenständiger Layer GENAU zwischen den beiden, siehe dort
   für die ausführliche Begründung). Über die gesamte Breite, brightness(1.35)
   drückt das von Haus aus graue Smoke.png Richtung Weiß ("eher weiß als
   grau"). */
.level2-smoke-bottom-1  { bottom: calc(-2 * var(--uh)); right: 0%;  width: calc(620px / 1.5 * var(--stage-scale)); z-index: 8; opacity: 0.92; filter: brightness(1.35); }
.level2-smoke-bottom-2  { bottom: calc(3 * var(--uh));  right: 14%; width: min(calc(22 * var(--uw)), 380px); z-index: 8; opacity: 0.88; filter: brightness(1.35); transform: scaleX(-1); }
.level2-smoke-bottom-3  { bottom: calc(7 * var(--uh));  right: 28%; width: min(calc(19 * var(--uw)), 330px); z-index: 8; opacity: 0.85; filter: brightness(1.35); }
.level2-smoke-bottom-4  { bottom: calc(-1 * var(--uh)); left: 42%;  width: min(calc(23 * var(--uw)), 400px); z-index: 8; opacity: 0.9;  filter: brightness(1.35); transform: rotate(2deg); }
.level2-smoke-bottom-5  { bottom: calc(4 * var(--uh));  left: 22%;  width: min(calc(21 * var(--uw)), 360px); z-index: 8; opacity: 0.87; filter: brightness(1.35); transform: scaleX(-1); }
.level2-smoke-bottom-6  { bottom: calc(-2 * var(--uh)); left: -2%;  width: calc(620px / 1.5 * var(--stage-scale)); z-index: 8; opacity: 0.92; filter: brightness(1.35); }
.level2-smoke-bottom-7  { bottom: calc(6 * var(--uh));  left: 8%;   width: min(calc(19 * var(--uw)), 330px); z-index: 8; opacity: 0.85; filter: brightness(1.35); }
.level2-smoke-bottom-8  { bottom: calc(2 * var(--uh));  right: 42%; width: min(calc(20 * var(--uw)), 350px); z-index: 8; opacity: 0.87; filter: brightness(1.35); transform: scaleX(-1) rotate(-2deg); }
.level2-smoke-bottom-9  { bottom: calc(1 * var(--uh));  left: 55%;  width: min(calc(21 * var(--uw)), 360px); z-index: 8; opacity: 0.9;  filter: brightness(1.35); }
.level2-smoke-bottom-10 { bottom: calc(-1 * var(--uh)); right: 55%; width: min(calc(22 * var(--uw)), 380px); z-index: 8; opacity: 0.9;  filter: brightness(1.35); transform: scaleX(-1); }
.level2-smoke-bottom-11 { bottom: calc(5 * var(--uh));  left: 65%;  width: min(calc(19 * var(--uw)), 330px); z-index: 8; opacity: 0.85; filter: brightness(1.35); }
.level2-smoke-bottom-12 { bottom: calc(0 * var(--uh));  right: 8%;  width: min(calc(20 * var(--uw)), 350px); z-index: 8; opacity: 0.88; filter: brightness(1.35); transform: scaleX(-1) rotate(2deg); }

/* ===== Spinne (js/spinne.js) ==============================================
   Aufbau/Prinzip 1:1 aus dem SoulKeeper-Level-2-Bossgegner übernommen
   (SoulKeeper/css/level2-gameplay.css: .l2-feind/.l2-feind-wackel -
   äußerer Wrapper trägt die Blickrichtungs-Rotation, das inneren Kind
   unabhängig davon das Bein-Wackeln, siehe dortiger Kommentar). Position/
   Größe/z-index/Blickrichtung kommen als Inline-Styles aus js/spinne.js
   (exakt wie beim Original-Wrapper), hier nur das visuelle Grundgerüst.
   Kein eigenes pointer-events:none nötig - erbt es von #level2-decor. */
.level2-spinne {
    position: absolute;
    aspect-ratio: 1 / 1;
}

.level2-spinne-wackel {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center;
    animation: level2-spinne-wackel 0.5s ease-in-out infinite alternate;
}

.level2-spinne-shape {
    position: absolute;
    inset: 0;
    background-color: #0d0a10;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--level2-glow-color) 45%, transparent));
    -webkit-mask-image: url('../../sh/img/level2/Spinne.svg');
    mask-image: url('../../sh/img/level2/Spinne.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

@keyframes level2-spinne-wackel {
    0%   { transform: rotate(-3deg); }
    100% { transform: rotate(3deg); }
}

/* ===== Abseil-Faden (js/spinne.js: abseilen) ==============================
   Weißer Faden, hängt an der Stelle, an der die Spinne gerade "auf dem Netz"
   steht (top/left kommen dynamisch als Inline-Styles aus js/spinne.js -
   anders als SoulKeeper/css/level2-gameplay.css: .l2-spinnenfaden, dort
   fest top:0 = Deckenanker, hier lokal an der aktuellen Spinnenposition),
   wächst von dort nach unten. Eigenes, unabhängiges Element (kein Kind der
   Spinne), teilt sich denselben z-index wie der Spinnen-Wrapper (inline
   gesetzt) und steht im DOM VOR ihm, damit die Spinne sichtbar vor dem
   eigenen Faden hängt. */
.level2-spinnenfaden {
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55));
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
    transform: translateX(-50%);
    pointer-events: none;
}

/* ===== Bewegung reduzieren (siehe css/welt.css für dasselbe Muster) =====
   Schaltet die dauerhaften Puls-/Wackel-Animationen der Unterwelt ab
   (Höhlenlicht, Kristall-Glow, Spinnenbein-Wackeln) - betrifft nur
   Endlosschleifen-Animationen, keine kurzen Übergangs-/Feedback-Effekte. */
@media (prefers-reduced-motion: reduce) {
    .level2-cave-base,
    .level2-cave-overlay,
    .level2-crystal-ambient-wrap,
    .level2-crystal-outline-wrap,
    .level2-crystal-rock-tint--ebene4-2-2,
    .level2-crystal-rock-tint--ebene4-4,
    .level2-spinne-wackel {
        animation: none;
    }
}