/* ============================================================
berg.css — "Das Berg-Bett" (Runde 4: echte Bild-Ebenen)
Fester, geschichteter Hintergrund mit Scroll-Aufstieg. Gehoert zu
js/berg.js (liest/schreibt dieselben Custom Properties).
WAS SICH GEGENUEBER RUNDE 3 GEAENDERT HAT
-----------------------------------------
Die drei SVG-Silhouetten-Masken (kamm-fern/-mitte/-nah) sind auf der
STARTSEITE durch fuenf echte Bilder ersetzt (WebP, aus
scrollcraft/builds/leads-plus-aufstieg/bilder-quelle/). Die Farbe kommt
jetzt aus den Bildern, nicht mehr aus background-color + Maske.
Die SVG-Masken bleiben in dieser Datei erhalten, weil die sechs
UNTERSEITEN sie ueber .berg-crest / .berg-trenner weiter benutzen
(und css/layering.css ueber .ly-kamm) — dort aendert sich nichts.
------------------------------------------------------------
EINBAU-VERTRAG (Startseite)
------------------------------------------------------------
1) Direkt nach oeffnen (vor Header/Main/Footer). Reihenfolge im
DOM = Reihenfolge von hinten nach vorn:
2) Body/Main-Regeln (unveraendert gegenueber Runde 3):
body{ background:var(--bg-deep); }
main, header, footer{ position:relative; z-index:1; }
3) Jede Sektion, die am Bett teilnimmt:
data-berg-station="" (Pflicht, sonst ignoriert js/berg.js sie)
data-berg-nebel="0..1" (Ziel-Nebeldichte, Default .35)
data-berg-licht="0..1" (Ziel-Grundaufhellung, 1 = Gipfel, Default .3)
4) Kein .berg-vordergrund mehr im Hero: die Nah-Ebene liegt jetzt im
festen Bett und traegt den Vordergrund ueber die ganze Seite.
5) Unterseiten-Zitat (kein JS, kein Bett noetig, unveraendert):
------------------------------------------------------------
EBENEN-GEOMETRIE — GEMESSEN, NICHT GESCHAETZT
------------------------------------------------------------
Gemessen an den WebP-Dateien selbst (erste Bildzeile mit >0,5 % deckenden
Pixeln = Gipfelhoehe; Rohdaten in der Sichtung des Build-Ordners):
fern-a1.webp Gipfel bei 24,3 % der Bildhoehe von oben
mitte-a2.webp Gipfel bei 26,0 % (RUNDE 4: neues Bild, ersetzt
mitte-a1.webp samt blauem Freistellsaum. Der Hauptgipfel
liegt 10,9 Punkte hoeher im Bild als vorher (36,9 %), die
Ebene ragt dadurch rund 8,5vh weiter herauf. Saum-Messung
an der Silhouettenkante: blauer Saum 55,0 % -> 7,2 % der
Spalten, mittlerer Blaustich +22,2 -> -1,4.
Nachweis: r4-saum.mjs im Build-Ordner.)
nah-a1.webp hoechster Punkt (links) bei 45,9 %
alle drei Unterkante zu 100 % gefuellt (kein transparenter Streifen)
alle fuenf 0,000 % Warmpixel (R > B+12) — Palette eingehalten
Daraus die Boxhoehen. Eine Ebene sitzt bottom:0; ihr Gipfel liegt dann bei
100vh - Boxhoehe * (1 - Gipfelanteil)
ueber dem Viewport-Boden, also von OBEN gemessen:
fern 88vh * (1-0,243) = 66,6vh -> Gipfel ~33 % von oben
mitte 78vh * (1-0,376) = 48,7vh -> Gipfel ~51 % von oben
nah 60vh * (1-0,459) = 32,5vh, Sockel 6vh unter dem Viewport
-> Kante links ~73 % von oben
Die Nah-Kante liegt damit deutlich unter dem Hero-CTA (der auf 1440x900
bei ~62 % endet) — der CTA bleibt ueber den ganzen Hero-Scroll frei,
ohne dass das Bild beschnitten oder gefiltert werden muesste.
Runde 4b: fern war zuerst auf 96vh (Gipfel 27 %) und mitte auf 84vh —
im Screenshot bei 50 % Scroll fuellte die Fern-Kette den halben Schirm
und die Tiefenstaffelung ging verloren. 88/78/60 laesst wieder Himmel
ueber der Kammlinie stehen.
------------------------------------------------------------
PARALLAX-RATEN — 10 bis 30 % Unterschied zwischen Nachbarn
------------------------------------------------------------
Skill-Regel (references/devices.md, "Layered scenes"): benachbarte Ebenen
duerfen sich nur um 10-30 % unterscheiden, Gesamtweg unter ~200 px.
himmel 70px —
fern 90px +28,6 %
mitte 115px +27,8 %
nebel 130px +13,0 %
nah 145px +11,5 %
Alle nach UNTEN (positives translateY): die Welt sinkt, waehrend man
steigt. Nur transform bewegt sich, kein transition:transform auf einer
Ebene (das wuerde jeden Scroll-Frame nachziehen lassen — Skill-Falle 2).
------------------------------------------------------------
CUSTOM PROPERTIES — von js/berg.js auf geschrieben
------------------------------------------------------------
--berg-p 0..1 Seiten-Scroll-Fortschritt, ~0.15/Frame gelerpt
--berg-s 0..1 Seiten-Scroll-Fortschritt ROH (ohne Lerp), auch bei
prefers-reduced-motion — treibt nur das Hoehenband
--berg-nebel 0..1 Nebeldichte, ~0.06/Frame gelerpt
--berg-licht 0..1 Grund-Aufhellung, ~0.06/Frame gelerpt
--berg-mx/-my -1..1 Pointer-Lean, nur (hover:hover) and (pointer:fine)
Alle Defaults stehen unten in :root — faellt js/berg.js aus, bleibt das
Bett auf diesen Werten statisch und lesbar stehen (Notbremse).
============================================================ */
:root{
/* -- SVG-Masken: nur noch fuer Unterseiten-Zitat + .ly-kamm -- */
--berg-src-mini: url("../assets/berg/kamm-mini.svg");
/* -- Live-Werte + Notbremse-Defaults -- */
--berg-p: .35;
--berg-s: .35;
--berg-nebel: .35;
--berg-licht: .3;
--berg-mx: 0;
--berg-my: 0;
--berg-ease: cubic-bezier(.16,1,.3,1);
/* Nebel-Deckelung, s. Kontrast-Rechnung an .berg-nebel weiter unten. */
--berg-nebel-max: .72;
/* Grund-Drift (Paket 2): Deckkraft der --surface-Flaeche am Gipfel. */
--berg-grund-max: 1;
}
/* ---------- Das feste Bett ---------- */
.berg{
position:fixed; inset:0; z-index:0;
pointer-events:none; overflow:hidden;
}
/* ---------- Die Bilder selbst ----------
Jede Ebene ist ein /![]()
statt eines background-image (Begruendung
im Kommentar an der Bett-Markierung in index.html: nur ein ![]()
kann
fetchpriority="low" tragen und damit den ersten Bildaufbau in Ruhe lassen).
object-fit:cover + object-position ersetzt background-size/-position 1:1.
max-width/height:none ist Skill-Falle 1: der globale
img{max-width:100%} aus index.html wuerde die Ebenen sonst auf
Viewport-Breite stauchen und die Berge waeren auf dem Telefon weg. */
.berg picture{ position:absolute; inset:0; display:block }
.berg-bild{
position:absolute; inset:0;
width:100%; height:100%;
max-width:none; max-height:none;
object-fit:cover; object-position:center bottom;
display:block;
}
/* ---------- 1) Himmel ----------
Echtes Bild (Verlauf + Sternenfeld). Die Box ist oben um 120px
ueberhoeht, damit die eigene Parallax-Bewegung (70px nach unten) keine
Kante an der Oberkante freilegt. Der Grundton bleibt zusaetzlich als
background-color stehen: faellt das Bild aus, ist der Himmel weiterhin
--bg-deep und der Text darauf unveraendert lesbar. */
.berg-himmel{
position:absolute; left:0; right:0; bottom:0; top:-120px;
overflow:hidden;
background-color:var(--bg-deep);
transform:translate3d(0, calc(var(--berg-p) * 70px), 0);
}
.berg-himmel .berg-bild{ object-position:center top }
/* ---------- 1b) Grund (Paket 2, scroll-craft-Baustein "drift") ----------
"The page ground shifts colour as you travel": die Grundfarbe des Himmels
wandert mit dem Aufstieg. Eine Flaeche in --surface (#0D1526, Brand-
Palette, keine neue Farbe), Deckkraft = --berg-licht: im Tal (licht 0)
unsichtbar, am Gipfel (licht 1) voll da. mix-blend-mode:lighten hebt nur
die Pixel an, die DUNKLER als --surface sind — das Tiefschwarz des Tals
wird am Gipfel exakt zu --surface, die Sterne (heller) bleiben stehen.
Das ist der Unterschied zu einem Farbfilm: ein klarer, blauer Himmel
statt eines Grauschleiers. Liegt VOR dem Himmel und HINTER allen Ketten,
die Grate stehen also dunkel davor (klarer, nicht diesiger).
Kontrast: die Flaeche wird nie heller als --surface selbst; --text darauf
16,7:1, --muted (.62) rund 9:1, --blue (11 px) 4,9:1 — und die Eyebrows
haben ohnehin ihre eigene Unterlage (layering.css). .berg hat einen
eigenen Stapelkontext (z-index:0), die Mischung bleibt im Bett.
Skill-Regel eingehalten: unsichtbar von Frame zu Frame, deutlich von oben
nach unten, eine Farbfamilie. Bewegt sich nicht (kein Parallax). */
.berg-grund{
position:absolute; inset:0;
background:var(--surface);
mix-blend-mode:lighten;
opacity:calc(var(--berg-licht) * var(--berg-grund-max));
}
/* ---------- 2)+3)+5) Kaemme (fern / mitte / nah) ----------
Gemeinsame Basis: nur Boxhoehe und Bewegung. Das Bild darin ist
.berg-bild (object-fit:cover, an der Unterkante verankert) — dadurch
bleiben die oben gemessenen Gipfelanteile beim Skalieren erhalten. */
.berg-kamm{
/* NACHBESSERUNG RUNDE 1 (Befund NIEDRIG-1): die Ebenen waren exakt
viewportbreit, wandern durch den Pointer-Lean aber bis 16 px zur Seite
(gemessen matrix(1,0,0,1,15.89,0) auf --nah bei Maus ganz rechts) — auf
der Gegenseite blieb ein 16 px breiter Streifen ohne Ebene stehen. Jetzt
je 24 px Ueberstand auf beiden Seiten, also mehr als der groesste Lean
(16 px). Das ist zugleich die Skill-Regel "feste groessere Pixelbreite"
fuer Parallax-Ebenen. */
position:absolute; left:-24px; right:-24px; bottom:0;
max-width:none;
will-change:transform;
}
/* Fern: hinterste Kette. Die Deckkraft haengt an --berg-licht — im Tal
(licht 0) liegt die Kette hinter dem Dunst und ist nur zu ahnen, am
Gipfel (licht 1) steht sie voll da. Das ist die Dramaturgie UND der
Kontrast-Schutz: gemessen liegt das 95.-Perzentil der Bildhelligkeit bei
L=0,109 (5,99:1 gegen --text) und nur die Schneespitze darueber; bei
Deckkraft 0,34 im Hero rutscht auch die Spitze in den sicheren Bereich. */
.berg-kamm--fern{
height:88vh; min-height:480px;
opacity:calc(.30 + .26 * var(--berg-licht));
transform:translate3d(calc(var(--berg-mx) * 6px), calc(var(--berg-p) * 90px), 0);
}
/* Gipfel-Lichtsaum als ::after: liegt in der Baumreihenfolge nach dem ![]()
und malt deshalb darueber. Position 36 % / 24,3 % = die GEMESSENE Lage des
Hauptgipfels im Bild (frueher fest 66,7 % aus der SVG-Zeit). */
.berg-kamm--fern::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(58vh 30vh at 36% 24.3%,
rgba(125,211,252, calc(.16 * var(--berg-licht))) 0%,
rgba(125,211,252, calc(.06 * var(--berg-licht))) 42%,
transparent 72%);
}
/* Mitte: dunkler, mehr Struktur. Volle Deckkraft — gemessenes 95.-Perzentil
L=0,066 (8,21:1 gegen --text), unkritisch. */
.berg-kamm--mitte{
/* RUNDE 4: 78vh -> 68vh. Das neue Bild (mitte-a2) hat den Gipfel bei 26,0 %
statt 36,9 % der Bildhoehe; bei unveraenderter Boxhoehe ragte er 8,5vh
hoeher und schob hellen Schnee unter FAQ-Antwort und Garantie-Kasten
(gemessen bei 390: 4,06:1 und 2,95:1). Mit 68vh liegt der Gipfel wieder
bei 49,7vh von oben, also praktisch auf der alten Hoehe (50,8vh), fuer
die die Textpositionen ausgelegt sind. */
height:68vh; min-height:430px;
opacity:calc(.42 + .30 * var(--berg-licht));
transform:translate3d(calc(var(--berg-mx) * 10px), calc(var(--berg-p) * 115px), 0);
}
/* Nah: Vordergrundgrat mit Baumlinie, fast schwarz (Maximalhelligkeit
L=0,032 = 11,65:1 gegen --text). Liegt VOR dem Nebel — dadurch bleibt der
Talgrund auch bei dichtem Nebel dunkel und der Text darueber lesbar. */
.berg-kamm--nah{
height:60vh; min-height:330px; bottom:-6vh;
transform:translate3d(calc(var(--berg-mx) * 16px), calc(var(--berg-p) * 145px), 0);
}
/* ---------- 4) Nebel ----------
nebel-a1.webp ist eine vollflaechige Nebeltextur auf SCHWARZ (kein
Alphakanal). Einbindung deshalb per mix-blend-mode:screen — Schwarz wird
dabei zu "nichts", die Schwaden addieren sich auf die Ebenen darunter.
Das ist der Grund, warum die vier frueheren Nebel-Versuche mit Alpha
verworfen wurden: sie hatten eine sichtbare Kontur, screen hat keine.
Die weichen Aussenkanten kommen aus der CSS-Maske (oben/unten/links/
rechts), nicht aus dem Bild.
.berg hat z-index:0 und damit einen eigenen Stacking-Kontext — die
Mischung bleibt garantiert innerhalb des Betts und erreicht den
Seiteninhalt (z-index:1) nie.
KONTRAST-DECKEL (--berg-nebel-max: .72), deterministisch statt per
Autoren-Disziplin: gemessene Maximalhelligkeit der Textur L=0,0723.
screen() ueber dem dunkelsten Untergrund ergibt bei voller Deckkraft
rund L=0,078; --muted (rgba(242,245,252,.62)) darauf komponiert kaeme
auf ~4,3:1 und damit UNTER die 4,5:1-Schwelle. Mit dem Deckel 0,72
bleibt der Extremfall darueber; nachgemessen wird trotzdem am
gerenderten Bild (27 Muster, s. Messprotokoll) — diese Rechnung ist die
Untergrenze, nicht der Beleg. */
.berg-nebel{
position:absolute; left:-12%; right:-12%;
top:30vh; height:58vh;
overflow:hidden;
mix-blend-mode:screen;
opacity:calc(var(--berg-nebel) * var(--berg-nebel-max));
/* NUR eine Maskenebene, bewusst: bei zwei Ebenen entscheidet
mask-composite ueber Vereinigung oder Schnittmenge, und der
-webkit-Zweig kennt andere Schluesselwoerter als der Standard — faellt
einer der beiden auf den Default "add" zurueck, waere die Maske
wirkungslos und die Kastenkante sichtbar. Links/rechts braucht es sie
ohnehin nicht: die Box ragt je 12 % ueber den Viewport hinaus, die
harten Seitenkanten liegen also ausserhalb des Bildes. */
-webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 68%, transparent 100%);
mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 68%, transparent 100%);
/* Parallax auf der STANDALONE-Eigenschaft `translate`, Eigendrift auf
`transform`: beide komponieren unabhaengig. Laegen sie auf derselben
Eigenschaft, wuerde die Keyframe-Animation den Scroll-Versatz jeden
Frame ueberschreiben. */
translate:0 calc(var(--berg-p) * 130px);
animation:berg-nebel-drift 64s ease-in-out infinite alternate;
}
.berg-nebel .berg-bild{ object-position:center center }
@keyframes berg-nebel-drift{
from{ transform:translateX(-2.5%) }
to { transform:translateX(2.5%) }
}
/* ---------- 6) Boden ----------
Der Section-Floor-Gradient des Skills, uebersetzt auf ein FESTES Bett:
die Ebenen werden an der Viewport-Unterkante beschnitten, dieser Verlauf
liegt ueber allen und fuehrt sie in den Seitengrund. Er ist zugleich die
Kontrast-Reserve fuer Text am unteren Bildrand. Bewegt sich nicht. */
.berg-boden{
position:absolute; left:0; right:0; bottom:0; height:34vh;
background:linear-gradient(to bottom,
rgba(5,8,15,0) 0%,
rgba(5,8,15,.55) 58%,
rgba(5,8,15,.92) 100%);
}
/* ---------- Signature Move: "Das Hoehenband" ----------
Ein schmales festes Band am rechten Rand, das die Aufstiegsroute zeichnet:
unten das Tal, oben der Gipfel. Der bereits gestiegene Teil ist mit
--blue gefuellt, der Rest bleibt eine feine Linie; eine Marke sitzt auf
der aktuellen Hoehe, die oberste Kerbe leuchtet in --ice, sobald der
Gipfel (Kontakt-Sektion) erreicht ist.
Bewusste Entscheidungen:
- rein dekorativ (aria-hidden, pointer-events:none, keine Links): das
Band aendert weder Tab-Reihenfolge noch Vorlese-Reihenfolge. Navigation
macht die bestehende Navbar.
- haengt an --berg-s (roher Scroll-Wert), nicht an --berg-p: eine
Hoehenanzeige darf nicht nachfedern, und sie muss auch bei
prefers-reduced-motion stimmen (--berg-p steht dort fest auf 0.35).
- keine Zahlen, keine Prozentangabe: die Marke haette sonst eine
Messgroesse behauptet, die es nicht gibt.
- z-index 40: ueber dem Bett (0) und dem Inhalt (1), aber unter
Consent-Banner (50), Island/Mobile-Menue (55) und Navbar (60). */
.berg-band{
position:fixed; right:0; top:22vh; bottom:14vh;
width:34px; z-index:40;
pointer-events:none;
}
.berg-band svg{ width:100%; height:100%; display:block; overflow:visible }
/* Route ungestiegen: feine Linie */
.berg-band .bb-route{
fill:none; stroke:rgba(242,245,252,.14); stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round;
}
/* Route gestiegen: dieselbe Geometrie, per clip-path von unten freigegeben.
inset(top ...) — top faellt von 100 % auf 0 %, gibt also von unten nach
oben frei. Das ist genau die Aufstiegsrichtung. */
.berg-band .bb-trail-clip{
/* RUNDE 3 (Pruefung r3 Nr. 2): Die Fassung aus Runde 2 lautete
inset(0 0 calc(100% - s*100%) 0) — sie gab von OBEN frei, aber der Clip
wirkt im gespiegelten
(index.html:1127) umgekehrt: die Fuellung wuchs sichtbar von unten nach
oben, waehrend die Marke von oben nach unten fuhr. Gemessen bei 1440,
s=0,25: 0 blaue Pixel oberhalb der Marke, 437 darunter — Punkt 4 war
damit nur zur Haelfte erfuellt. Jetzt faellt der OBERE Rand des Clips von
100 % auf 0: Fuellung und Marke laufen gemeinsam von oben nach unten. */
clip-path:inset(calc(100% - var(--berg-s) * 100%) 0 0 0);
}
.berg-band .bb-trail{
fill:none; stroke:var(--blue); stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round;
opacity:.85;
}
/* Kerben = die 14 Stationen. Gleiche Zweiteilung: die gestiegenen leuchten. */
.berg-band .bb-kerbe{ stroke:rgba(242,245,252,.16); stroke-width:1.5; stroke-linecap:round }
.berg-band .bb-kerbe-hell{ stroke:rgba(79,125,249,.75); stroke-width:1.5; stroke-linecap:round }
/* Gipfelkerbe: leuchtet erst, wenn oben angekommen. Sie liegt im
Trail-Clip, kommt also automatisch erst bei --berg-s nahe 1 frei. */
.berg-band .bb-gipfel{ stroke:var(--ice); stroke-width:2; stroke-linecap:round }
/* Die Marke: sitzt auf der aktuellen Hoehe. */
.berg-band .bb-marke{
position:absolute; right:11px;
/* RUNDE 2 (Pruefung r2, NIEDRIG-3): vorher top:calc(100% - s*100%) — eine
Layout-Eigenschaft, die bei jedem Scroll-Frame einen Layout-Shift meldete
(0,0016). Jetzt top:0 plus transform ueber die Bandhoehe (64vh = 100vh -
22vh - 14vh; mobil 74vh, s. unten). */
top:0;
transform:translate3d(0, calc(var(--berg-s) * 64vh), 0); /* oben -> unten (Runde 2) */
will-change:transform;
width:12px; height:12px; margin:-6px -6px 0 0;
border-radius:50%;
background:var(--ice);
box-shadow:0 0 0 4px rgba(125,211,252,.12), 0 2px 6px rgba(5,8,15,.6);
}
/* RUNDE 2 (Pruefung r2, MITTEL-3): waehrend die Service-Rail faehrt, schiebt
sie Kartentext unter das Band (rechte 34 px); dort war das Band der
"Hintergrund" des Texts (3,6:1). js/berg.js setzt html.berg-band-aus, solange
ein pan-Akt im Bild ist; das Band blendet dann aus. Opacity-Uebergang auf
einem festen Deko-Element, keiner Bett-Ebene. */
.berg-band{ transition:opacity .35s var(--berg-ease) }
html.berg-band-aus .berg-band{ opacity:0 }
@media(max-width:900px){
/* Auf dem Telefon schrumpft das Band auf eine Haarlinie ganz am Rand:
sichtbar, aber ausserhalb des 24px-Innenabstands des Inhalts. */
.berg-band{ width:3px; top:16vh; bottom:10vh }
.berg-band svg{ display:none }
.berg-band::before{
content:""; position:absolute; inset:0;
background:rgba(242,245,252,.10);
}
.berg-band .bb-marke{ right:1.5px; width:7px; height:7px; margin:-3.5px -3.5px 0 0; box-shadow:0 0 0 3px rgba(125,211,252,.14); transform:translate3d(0, calc(var(--berg-s) * 74vh), 0) }
}
/* ---------- Unterseiten-Zitat (kein JS, UNVERAENDERT aus Runde 3) ----------
Die sechs Unterseiten benutzen weiterhin die SVG-Maske kamm-mini.svg.
Diese Regeln nicht anfassen, ohne die Unterseiten mitzupruefen. */
.berg-crest{
position:relative; width:100%; height:100px;
pointer-events:none;
background:linear-gradient(to bottom, var(--surface-2) 0%, var(--surface-2) calc(100% - 60px), var(--bg) 100%);
-webkit-mask-image:var(--berg-src-mini); mask-image:var(--berg-src-mini);
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:bottom center; mask-position:bottom center;
-webkit-mask-size:cover; mask-size:cover;
}
.berg-trenner{
position:relative; width:100%; height:50px;
pointer-events:none; opacity:.55;
background:linear-gradient(to bottom, var(--surface-2) 0%, var(--surface-2) calc(100% - 45px), var(--bg) 100%);
-webkit-mask-image:var(--berg-src-mini); mask-image:var(--berg-src-mini);
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:bottom center; mask-position:bottom center;
-webkit-mask-size:cover; mask-size:cover;
}
/* ---------- Kleine Viewports ----------
Zwei Dinge auf einmal: kleinere Bilddateien (1100px breit, zusammen
101 KB statt 400 KB) und ein Bildausschnitt, der den Hauptgipfel wirklich
zeigt. background-size:cover schneidet auf einem 390px-Viewport seitlich
stark zu; mit background-position-x 34 % liegt der Hauptgipfel des
Fern-Bilds (bei 36,5 % der Bildbreite) im sichtbaren Ausschnitt statt
knapp daneben. */
@media(max-width:760px){
.berg-kamm--fern{ height:74vh; min-height:400px }
.berg-kamm--fern .berg-bild{ object-position:34% bottom }
.berg-kamm--fern::after{
background:radial-gradient(46vh 24vh at 40% 24.3%,
rgba(125,211,252, calc(.16 * var(--berg-licht))) 0%,
rgba(125,211,252, calc(.06 * var(--berg-licht))) 42%,
transparent 72%);
}
.berg-kamm--mitte{ height:54vh; min-height:340px } /* Runde 4: wie oben, mobile Entsprechung */
.berg-kamm--mitte .berg-bild{ object-position:62% bottom }
.berg-kamm--nah{ height:40vh; min-height:220px }
.berg-kamm--nah .berg-bild{ object-position:28% bottom }
.berg-nebel{ top:16vh; height:52vh }
.berg-boden{ height:28vh }
}
/* ---------- Reduzierte Bewegung ----------
Harte Abschaltung der Ebenenreise, des Pointer-Lean und der Nebeldrift:
nur noch die Ruhelage bleibt. Nebel und Gipfel-Licht duerfen weiter
zwischen den Stations-Zielwerten wechseln, aber per 600ms-Opacity-
Uebergang statt per Dauer-Lerp (js/berg.js setzt dort direkt die
Zielwerte). Das Hoehenband bleibt aktiv — es ist eine Positionsanzeige,
keine Animation, und haengt an --berg-s, das auch hier dem Scroll folgt. */
@media(prefers-reduced-motion:reduce){
.berg-himmel, .berg-kamm, .berg-nebel{
transform:none !important;
translate:none !important;
animation:none !important;
}
.berg-nebel, .berg-kamm--fern, .berg-kamm--mitte, .berg-grund{
transition:opacity .6s var(--berg-ease) !important;
}
}