s, siehe
js/level1-szene.js), etwas kleiner/gedämpfter - wirkt dadurch weiter
entfernt. */
.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;
/* Rotation (nur Grabsteine, siehe js/level1-szene.js) dreht sich um die
Unterkante statt die Elementmitte - wirkt dadurch wie ein Stein, der
an seinem Fuß im Boden steckt und nach oben wegkippt, statt sich "in
der Luft" um seinen Mittelpunkt zu drehen. Verankerungspunkt bleibt
so bei jeder Neigung exakt derselbe. */
transform-origin: bottom center;
}
/* Vordere Ebene:
![]()
-Tags, bleiben schwarz wie die Original-SVGs. bottom
kommt jetzt pro Instanz von js/level1-szene.js (bodenKantenHoeheVorne,
passend zur Kurve von Boden01.svg statt eines pauschalen Werts).
transform-origin wie bei der hinteren Ebene: Rotation kippt um den
Fußpunkt, damit der Verankerungspunkt bei jeder Neigung exakt bleibt. */
.level1-grabsteine--vorne .level1-grabstein,
.level1-baeume--vorne .level1-baum {
display: block;
transform-origin: bottom center;
}
/* ===== Zombiehände ===== */
/* Bugfix (schwebende Hände bei schmalem Fenster): Bezugsbox war vorher
inset:0 - relativ zur GANZEN Szene (100vh, unabhängig von der
Fensterbreite). .level1-boden--vorne wird bei schmalem Fenster aber
flacher (feste aspect-ratio, width:100%) - die Hände blieben auf ihrer
festen Scene-Höhe stehen, während der Boden darunter schrumpfte, und
schwebten dadurch zunehmend über ihm. Jetzt dieselbe Bezugsbox wie
.level1-boden--vorne/.level1-grabsteine--vorne/.level1-baeume--vorne
(bottom:16%, aspect-ratio 1200/235) - skaliert automatisch mit der
tatsächlichen Bodenhöhe mit, exakt wie bei den Bäumen/Grabsteinen. */
.level1-haende {
position: absolute;
left: 0;
bottom: 16%;
width: 100%;
aspect-ratio: 1200 / 235;
pointer-events: none;
}
/* Erlöste Seelen (Level 3, Soulkeeper besiegt): Zombiehände bleiben
verborgen, während die Kamera zurück durch die Oberwelt fährt (siehe
js/level3-outro.js: starte()/beende()) - blenden erst wieder ein, wenn
der Abspann fertig durchgelaufen oder übersprungen wurde. */
.level1-haende--versteckt {
display: none;
}
/* bottom:27% statt der rohen Bodenkanten-Höhe (~30-32% an dieser Stelle,
siehe BODEN01_KANTE in js/level1-szene.js) - ein kleiner Sicherheits-
abstand 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-5 Punkte) statt eines
großen: die Hand-Grafik füllt ihre Vorlage fast vollständig aus (kaum
Leerraum am unteren Rand), ein größerer Abzug würde sichtbar
Handballen/Handgelenk im Boden versenken statt nur die Grundlinie
sauber zu schließen. */
.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);
}
/* ===== Spielbereich ===== */
/* Bewusst unsichtbar (keine Border/Background) - reiner Anker-Container
für spätere Ausbaustufen (Gegner, Schussmechanik, Spieler-Animationen),
damit künftiges Gameplay hier andocken kann, ohne die Parallax-Ebenen
selbst anzufassen. Grenzen halten die Mitte der Szene frei von
Grabsteinen/Bäumen (siehe Positionslisten in js/level1-szene.js). */
.level1-spielbereich {
position: absolute;
left: 28%;
right: 28%;
bottom: 0;
top: 35%;
/* Nachbesserung: seit Paket 3 gibt es drei übereinanderliegende
Instanzen dieser Klasse (hinten/mitte-vorne/nah, siehe index.html
und js/level1-gameplay.js: containerFuerTiefe) - als leere, aber
positionierte Boxen fingen sie standardmäßig (pointer-events:auto)
JEDE Klick-Koordinate in ihrem Bereich ab, auch dort, wo gerade keine
Kreatur drin war. Der jeweils vordere Container blockierte dadurch
systematisch Klicks auf Kreaturen in den Ebenen dahinter. Container
selbst jetzt "klick-transparent" - .l1-feind-hitbox/die SVG-Pfade der
Kreaturen setzen pointer-events pro Element wieder gezielt auf
auto/visiblePainted (siehe css/level1-gameplay.css), bleiben also
weiterhin klickbar. */
pointer-events: none;
}
/* ===== Ebene 5: Kamera-Ebene (Äste, Tiefenunschärfe) ===== */
/* Liegt vor ALLEM anderen (auch vor dem Mond) - dürfen laut Vorgabe über
den Mondbereich laufen. Leichte Unschärfe simuliert eine sehr kamera-
nahe Tiefenschärfe-Ebene, der Fokus soll nicht auf den Ästen liegen.
z-index:4 ist bereits der höchste Wert innerhalb von #scene-level1 (die
Sektion selbst ist per .scene z-index:1, damit schon vor Himmel/Mond/
hinterer Ebene, die alle z-index:0 haben) - das Stacking war also nie
das Problem. Der Grund, warum Äste "in den Farbverlauf rutschten": jede
.scene hat overflow:hidden (siehe css/base.css) und hat den nach oben
über den Szenenrand hinausragenden Teil (top:-X%) hart abgeschnitten.
#scene-level1 bekommt daher hier gezielt overflow:visible - #story
(der äußere Rahmen, siehe css/base.css) schneidet als letzte
Sicherheitsgrenze weiterhin am Viewport-Rand ab, es gibt also kein
Scrollbar-Risiko. */
#scene-level1 {
overflow: visible;
}
/* Startet deutlich tiefer (translateY nach unten verschoben) und fährt
beim Übergang Himmel→Level 1 gemeinsam mit Mond/hinterer Ebene in ihre
Zielposition hoch (.level1-kamera-ebene--eingefahren, ausgelöst
zeitgleich mit .story-track--level1 - siehe js/main.js/js/levelkarte.js).
Vorher stand hier gar kein transform/transition - die Äste hingen fest
an ihrer Endposition, ohne die für ganz kameranahe Elemente erwartete,
auffällige Bewegung "von unten heran". Ein einzelnes transform auf dem
Container bewegt links+rechts gemeinsam, ohne dass .level1-ast--links/
--rechts ihre unterschiedlichen top-Werte (siehe unten) einzeln
animieren müssten. */
.level1-kamera-ebene {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
transform: translateY(calc(42 * var(--uh)));
transition: transform 4s cubic-bezier(0.65, 0, 0.35, 1);
}
.level1-kamera-ebene--eingefahren {
transform: translateY(0);
}
.level1-ast {
position: absolute;
width: min(calc(40 * var(--uw)), 560px);
filter: blur(2.5px) brightness(0.75);
}
/* -4% (alter Wert) lag lokal betrachtet SPÄTER/tiefer als die Mond-
Zielposition (top:88vh auf #story-track bezogen entspricht umgerechnet
auf die 100vh-lokale Höhe von #scene-level1 ca. top:-12%) - der Ast
hing also unterhalb des Mondbereichs statt darüber. Eigene, größere
Breite (statt der geteilten .level1-ast-Breite) und noch weiter oben,
damit er deutlich weiter ins Bild ragt. */
.level1-ast--links {
left: -8%;
top: -45%;
width: min(calc(50 * var(--uw)), 680px);
}
/* Ast02.svg ist (Pixel-Analyse bestätigt: Ansatzpunkt oben im
Original-Bild liegt bei ca. 29% von links, nicht gespiegelt) bereits
korrekt seitenverkehrt zu Ast01.svg gezeichnet - das zusätzliche
scaleX(-1) hat das wieder umgedreht und den Ast dadurch falsch herum
aussehen lassen. Kein Fehler in der SVG-Datei selbst, nur in dieser
Regel - deshalb hier entfernt statt die Datei anzupassen. Deutlich
höher (-32%) als der linke Ast, damit er klar über der Mond-Position
(~-12% lokal) liegt. */
.level1-ast--rechts {
right: -8%;
top: -32%;
}
@media (max-width: 560px) {
.level1-mond {
right: 6%;
/* Auf dem Handy bewusst zurückhaltender gewachsen als auf dem
Desktop (nicht die vollen 1,5-2x) - sonst wird der Mond auf
schmalen Screens unverhältnismäßig groß. */
width: min(calc(30 * var(--uw)), 190px);
}
.level1-spielbereich,
.level1-spielbereich-hexenfern {
left: 12%;
right: 12%;
}
}