/* ==========================================================================
TOBEY NIZE — RELEASES + YOUTUBE · Zusatz zu style.css
Zwei neue Abschnitte: 03 Releases (Karussell) und 04 YouTube.
⚑ WARUM EINE EIGENE DATEI UND NICHT IN style.css HINEIN
Die style.css ist die vom Boss freigegebene Gestaltung (1549 Zeilen). Sie
bleibt Zeile fuer Zeile unangetastet. Dadurch ist der Rueckbau EIN GRIFF
(siehe unten) statt einer Suche nach fremden Zeilen in einer langen Datei.
Eingebunden wird sie in der index.html NACH style.css — die Reihenfolge
ist Pflicht, weil die eine Nav-Regel ganz unten sonst nicht greift.
⚑ WOHER DIESE DATEI KOMMT
· 03 · RELEASES = Variante C "Seezeichen" — dieselbe Bildidee (Objekte
im Wasser, in die Raumtiefe gestaffelt, jedes mit eigener Wasserlinie
und Spiegelung), aber die Lage jeder Karte wird jetzt GERECHNET statt
in fünf festen Stufen gesetzt. Dadurch wird sie ziehbar.
· 04 · YOUTUBE = Variante A "Die Lichtquelle" — grosse Zahl in Archivo
Black mit eigener Wasserlinie und Spiegelung, darunter die staerksten
Videos als versetzt gestaffelte Baender. Statt sechs jetzt DREI, und
dafuer deutlich groesser.
Diese Datei FUEGT NUR HINZU. Sie ueberschreibt genau EINEN bestehenden
Selektor, und das ist gerechnet: die Navigation ist von drei auf fuenf
Punkte gewachsen und darf auf schmalen Schirmen umbrechen (ganz unten).
Alle Farben stammen aus den Variablen der style.css (--void --abyss --aqua
--aqua-hot --aqua-mid --aqua-deep --foam --haze --dim --mono --mass) oder
sind woertlich dieselben rgba-Werte, die dort schon stehen (etwa der
Farbstich #2c7f95/#1a6379 aus .floor__duo und .figure__cool).
ACTIVATED-Neongruen #12ff00 kommt hier NICHT vor.
⚠ DIE VIER BAUREGELN, jede teuer bezahlt:
1. KEIN CSS-`border`. Trennung entsteht ausschliesslich durch Lichtlinien
(1 px hohe Verlaufsflaechen oder ein SVG-Pfad mit Verlaufs-Strich).
2. NIE mask-image und drop-shadow/filter:blur auf DEMSELBEN Element.
mask-clip steht voreingestellt auf border-box und kappt den Schatten zu
einem sichtbaren Rechteck — daraus entstehen die "billigen Kaesten".
Jedes Bild ist deshalb zweiteilig: aussen die Maske, innen der Filter.
3. KEINE Maske auf einem animierten Element. Bei diesem Bau besonders
heikel, weil die Karten je Bild neu positioniert werden: die Bewegung
sitzt auf `.card`, jede Maske auf einem KIND davon (.card__mark,
.card__mirror). Kein Element traegt beides.
4. Verlaufsmasken exakt 90deg/180deg bzw. to right / to bottom.
↩ RUECKBAU in einem Griff (Stand 2026-08-11, Einbau in die Livefassung):
In der index.html die eine Zeile
entfernen, dazu die zwei Abschnitte und
samt dem Skriptteil "5 · DAS KARUSSELL".
Diese Datei selbst darf liegenbleiben, sie wirkt dann nicht mehr.
⤷ Woran Boss den Ausgangszustand erkennt: die Navigation traegt wieder
DREI Punkte (Spectrum · Footage · Booking) und die Booking-Ueberschrift
liest sich wieder "04 — Booking" statt "05 — Booking".
Der vollstaendige Stand vor dem Einbau liegt zusaetzlich in
_ARCHIV\2026-08-11_vor-karussell-einbau\.
========================================================================== */
/* ==========================================================================
ANKER — die fixe Navigation ist 90–150 px hoch. Ohne diesen Abstand
springt ein Klick auf "Releases"/"YouTube" die Ueberschrift unter die
Leiste. Gilt NUR fuer die zwei neuen Ziele.
========================================================================== */
#releases, #youtube { scroll-margin-top: clamp(90px, 13vh, 150px); }
/* ==========================================================================
03 · RELEASES — DAS GEBOGENE KARUSSELL
DIE GESTALTUNGSIDEE. Die ganze Seite lebt von einem Horizont: eine Linie,
an der jedes Ding bricht und sich spiegelt. Ein Bogen ist die KRUEMMUNG
dieses Horizonts. Deshalb ist das Karussell nicht eine Reihe, die zufaellig
gebogen aussieht — es ist ein Stueck Wasseroberflaeche, das sich vom
Betrachter weg kruemmt. Sechs Objekte treiben darauf.
DIE RECHNUNG (sie steht im JavaScript, hier steht, was sie bedeutet).
Fuer jede Karte ist x der Abstand zur Mitte, gemessen in Schrittweiten
(fliessend, waehrend man zieht). Daraus kommt alles:
y = R − √(R² − x²) Absenkung — der Bogen selbst
dreh = arcsin(x / R) Neigung — tangential zum Bogen
mass = 1 − |x| × 0,085 Ferne — aussen kleiner
dunst= |x| × 0,30 Ferne — aussen blasser und weicher
R ist der Radius in Schrittweiten. Er steht NIRGENDS als Zahl — vorgegeben
ist stattdessen --senke-anteil, also um wie viel die aeusserste sichtbare
Karte absinkt, gemessen in Anteilen ihrer eigenen Hoehe (10 %, Zielband
war 6–12 %). R wird daraus gerechnet. Das haelt die Woelbung auf jeder
Bildschirmbreite gleich und ergibt am Schreibtisch rund 5° Neigung am
sichtbaren Rand — "leicht gebogen", nicht Fischauge.
WARUM GERECHNET STATT CSS-3D. Eine echte perspective/rotateY-Buehne
koppelt Groesse, Position und Neigung fest aneinander: was weiter weg
steht, wird zwangslaeufig genau um den Faktor kleiner, den die
Brennweite vorgibt. Hier sind Absenkung, Neigung, Maßstab und Helligkeit
VIER UNABHAENGIGE REGLER. Nur so laesst sich die Fernwirkung aus Variante C
exakt nachbauen: dort wurde die Boje nicht nur kleiner, sondern auch
blasser, entsaettigter, unschaerfer, und ihre Spiegelung wurde KUERZER —
lauter Dinge, die eine Perspektiv-Matrix nicht kann.
========================================================================== */
.tide {
position: relative;
padding: clamp(74px, 10.5vh, 128px) 0 clamp(70px, 10vh, 128px);
/* Oben und unten farbgleich mit den Nachbarn (#000306): .floor endet dort,
.beam beginnt dort. Sonst sieht man die Naht als Tonstufe — dieselbe
Rechnung wie zwischen .surf__foam und .deep im Bestand. */
background:
radial-gradient(62% 44% at 7% 10%, rgba(26, 99, 121, .26), transparent 68%),
radial-gradient(52% 46% at 95% 84%, rgba(6, 23, 43, .70), transparent 72%),
linear-gradient(180deg, #000306 0%, #01070e 14%, var(--abyss) 46%, #01070e 86%, #000306 100%);
overflow: hidden;
isolation: isolate;
}
/* Lichtschaechte von oben links — gleiche Bauart und gleiche Lichtrichtung
wie .deep__light und .book__light im Bestand. Ohne sie liegt die Buehne
als flache dunkle Flaeche da. */
.tide__light { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.tide__light i {
position: absolute; display: block;
top: -6%; height: 126%;
background: linear-gradient(to bottom, rgba(127, 230, 240, .16), transparent 74%);
filter: blur(42px);
mix-blend-mode: screen;
}
.tide__light i:first-child { left: 4%; width: 16vw; transform: rotate(8deg); opacity: .82; }
.tide__light i:last-child { left: 24%; width: 9vw; transform: rotate(12deg); opacity: .46; }
.tide__head,
.tide__read,
.tide__foot {
position: relative; z-index: 6;
width: min(1320px, 92vw);
margin-left: auto; margin-right: auto;
}
.tide__head { margin-bottom: clamp(26px, 4vh, 46px); }
/* --------------------------------------------------------------------------
DIE BUEHNE — laeuft von Bildschirmkante zu Bildschirmkante.
⚠ KEIN 100vw. Die Buehne ist ein Kind der Sektion, und die Sektion IST
schon so breit wie das Fenster. 100vw wuerde die Breite der Bildlaufleiste
mitzaehlen und dadurch Querlauf erzeugen — ein Fehler, den man erst auf
einem Rechner mit sichtbarer Leiste sieht. Nur Kopf, Anzeige und Fuss
liegen im Innenmass min(1320px, 92vw).
⚠ overflow: clip statt hidden. `hidden` macht aus der Buehne einen
Bildlaufbehaelter; sobald eine Karte per Tabulator Fokus bekommt, die
gerade weit aussen liegt, wuerde der Browser die Buehne INTERN scrollen
und das ganze Bild verschieben. `clip` schneidet ohne Bildlauf. Die Zeile
`hidden` davor bleibt als Rueckfall fuer alte Browser stehen — dort faengt
der Reset im JavaScript den Fall ab.
-------------------------------------------------------------------------- */
.tide__stage {
/* ⚠ Die Kartenbreite haengt an der FENSTERBREITE, nicht an einer festen
Zahl — und das ist Absicht: dadurch bleibt die Zahl der sichtbaren
Karten konstant bei rund fuenf, egal ob 1400 oder 2560 px. Ein fester
Deckel wuerde auf einem breiten Schirm dazu fuehren, dass sechs, sieben,
acht Karten hineinpassen — und dann waere der Moment sichtbar, in dem
die hinterste Karte im Umlauf von rechts nach links springt.
Der zweite Wert 40vh deckelt gegen zu hohe Buehnen auf flachen
Bildschirmen: das Cover ist quadratisch, ohne diese Grenze waere die
Buehne auf einem 2560×1080-Schirm hoeher als das Fenster. */
--cw: clamp(150px, min(23vw, 42vh), 560px);
--pitch-f: 1.16; /* Schrittweite = cw × dieser Wert */
/* ⚠ HIER STEHT KEIN RADIUS, sondern das, was man sehen soll: um wie viel
die aeusserste sichtbare Karte absinkt, in Anteilen ihrer eigenen Hoehe.
Den Radius rechnet das Skript daraus aus (Herleitung steht dort). So ist
die Woelbung auf jeder Bildschirmbreite dieselbe, ohne dass irgendwo ein
zweiter Wert gepflegt werden muesste. Vorgabe war 6–12 %. */
--senke-anteil: .10;
--fern-mass: .085; /* wie schnell es nach aussen kleiner wird */
--fern-hell: .12; /* wie schnell es nach aussen blasser wird */
--kh: clamp(15px, 1.5vw, 20px); /* Hoehe der Kennungszeile, Rueckfall */
position: relative;
z-index: 3;
width: 100%;
overflow: hidden;
overflow: clip;
isolation: isolate;
}
/* Der Dunst, in dem die fernen Karten stehen. Liegt HINTER ihnen und laeuft
an allen vier Seiten auf Null aus — kein Kasten. */
.tide__far {
position: absolute; z-index: 1;
left: 0; right: 0; top: -8%; bottom: 22%;
pointer-events: none;
background:
radial-gradient(46% 84% at 26% 8%, rgba(63, 169, 189, .16), transparent 74%),
radial-gradient(58% 76% at 78% 6%, rgba(26, 99, 121, .26), transparent 74%);
filter: blur(30px);
}
/* ---- die Wasserlinie: EIN gerechneter Bogen ---------------------------
⚠ WARUM EIN DURCHGEHENDER SVG-PFAD UND NICHT SEGMENTE JE KARTE — das war
die eine echte Entwurfsentscheidung dieses Abschnitts, deshalb steht die
Begruendung hier und nicht in einer Fussnote:
Segmente je Karte waeren einfacher (jede Karte bringt ihren Strich mit und
kippt ihn mit). Aber zwischen den Karten liegt Zwischenraum, und dort
waere dann KEINE Linie — man saehe sechs Striche statt einer
Wasseroberflaeche. Wasser hoert zwischen zwei Objekten nicht auf.
Deshalb ein Pfad ueber die volle Buehnenbreite, gezeichnet aus derselben
Formel, aus der auch die Kartenlage kommt: Y(X) = wl + R − √(R² − x²).
Die Karten sitzen damit ZWANGSLAEUFIG auf der Linie — und weil jede Karte
um genau arcsin(x/R) geneigt ist, steht ihre Unterkante TANGENTIAL zur
Kurve. Die Abweichung ueber eine Kartenbreite ist zweiter Ordnung und
betraegt gerechnet rund 2 px; man sieht keine Luecke.
Die Linie ist ortsfest: sie bewegt sich beim Ziehen NICHT. Genau das ist
physikalisch richtig — die Objekte treiben, die Oberflaeche bleibt.
Der seitliche Auslauf kommt aus dem SVG-Farbverlauf des Strichs selbst
(stop-opacity 0 an beiden Enden), NICHT aus einer CSS-Maske. Damit traegt
dieses Element nur den Filter und keine Maske — Bauregel 2 erfuellt. */
.tide__wl {
position: absolute; z-index: 2;
left: 0; top: 0; width: 100%; height: 100%;
pointer-events: none;
overflow: visible;
}
/* ⚠ Nach dem ersten Schuss bei 1400 px verstaerkt: die Linie war zwar
gebogen, aber so duenn, dass die Kruemmung erst beim zweiten Hinsehen
auffiel. Sie ist aber der sichtbare BEWEIS des Bogens — wenn sie
verschwindet, sieht man nur Bilder, die zufaellig unterschiedlich hoch
haengen. Bloom von 15 auf 24 und von .30 auf .42, dazu ein zweiter,
engerer Schein direkt an der Linie. */
.tide__wl .wl-bloom {
fill: none;
stroke: rgba(127, 230, 240, .42);
stroke-width: 24;
filter: blur(17px);
}
.tide__wl .wl-halo {
fill: none;
stroke: rgba(205, 248, 255, .34);
stroke-width: 6;
filter: blur(5px);
}
.tide__wl .wl-core {
fill: none;
stroke: url(#tideWlGrad);
stroke-width: 1.6;
}
/* ---- die Bahn, auf der die Karten liegen ------------------------------ */
.tide__track {
position: relative; z-index: 3;
height: 100%;
}
/* ---- die nahe Wasserflaeche, VOR den Karten ---------------------------
Aus einem gemessenen Befund von Variante C uebernommen: unter einer Reihe
ferner Objekte bleibt sonst eine grosse leere Flaeche ohne Aufgabe. Hier
stehen unscharfe Lichtpunkte auf der nahen Oberflaeche — aus dem Loch wird
Wasser. Nah heisst unscharf, deshalb blur; kein mask-image auf diesem
Element, weil blur und Animation darauf sitzen (Bauregeln 2 und 3).
`atmen` ist der Keyframe aus der style.css, hier wiederverwendet. */
.tide__near {
position: absolute; z-index: 4;
left: 0; right: 0; bottom: -4%; height: 46%;
pointer-events: none;
background:
radial-gradient(16px 8px at 90% 30%, rgba(205, 248, 255, .40), transparent 70%),
radial-gradient(28px 13px at 74% 54%, rgba(127, 230, 240, .30), transparent 72%),
radial-gradient(11px 6px at 61% 36%, rgba(205, 248, 255, .26), transparent 70%),
radial-gradient(36px 16px at 86% 76%, rgba(63, 169, 189, .28), transparent 74%),
radial-gradient(18px 9px at 46% 68%, rgba(127, 230, 240, .20), transparent 72%),
radial-gradient(24px 11px at 20% 82%, rgba(127, 230, 240, .18), transparent 74%),
radial-gradient(13px 7px at 33% 46%, rgba(205, 248, 255, .16), transparent 70%),
radial-gradient(120% 56% at 62% 88%, rgba(26, 99, 121, .18), transparent 78%);
filter: blur(3px);
mix-blend-mode: screen;
animation: atmen 17s ease-in-out infinite alternate;
}
/* ---- die Randaufloesung ----------------------------------------------
Die Seite loest Kanten grundsaetzlich mit Verlaeufen auf, nicht mit
Abschneiden. Zwei Vorhaenge in der Grundfarbe der Sektion, die nach innen
auf Null laufen. Sie tragen eine Maske, bewegen sich aber NICHT und haben
keinen Filter — beide Bauregeln erfuellt.
⚠ SIE SIND KINDER DER SEKTION, NICHT DER BUEHNE, und das ist der ganze
Trick: der senkrechte Verlauf ist woertlich derselbe wie im
Sektionshintergrund und laeuft dadurch ueber GENAU DIESELBE STRECKE.
Nur so trifft an jeder Hoehe die Vorhangfarbe die Hintergrundfarbe exakt
und es entsteht keine Tonstufe. Laege der Vorhang in der Buehne, liefe
sein Verlauf ueber die kuerzere Buehnenhoehe und die Farben wanderten
auseinander — dieselbe Falle wie bei .pose__body im Bestand, wo ein
Verlauf auf einer festen Farbe endete und eine sichtbare Naht erzeugte. */
.tide__veil {
position: absolute; z-index: 5; top: 0; bottom: 0;
width: clamp(70px, 13vw, 240px);
pointer-events: none;
background: linear-gradient(180deg, #000306 0%, #01070e 14%, var(--abyss) 46%, #01070e 86%, #000306 100%);
}
.tide__veil--l {
left: 0;
-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.62) 40%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.62) 40%, transparent 100%);
}
.tide__veil--r {
right: 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.62) 60%, #000 100%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.62) 60%, #000 100%);
}
/* --------------------------------------------------------------------------
DIE KARTE
Aufbau von oben nach unten: Kennung · Cover · Kontaktlicht · Spiegelung.
Der Drehpunkt (transform-origin) sitzt auf der WASSERLINIE, also unten am
Cover. Dadurch bleibt der Beruehrpunkt beim Neigen und Verkleinern genau
dort, wo die gerechnete Kurve verlaeuft — die Karte rutscht nicht von
ihrer Linie ab. Das Skript setzt den Ursprung nach echter Messung.
-------------------------------------------------------------------------- */
.card {
--x: 0; /* Abstand zur Mitte in Schrittweiten (vom Skript) */
--dust: 0; /* Ferne: 0 = nah und klar, 0,86 = fern und im Dunst */
--lum: 1; /* Ferne: Restdeckkraft */
--mh: .46; /* Hoehe der Spiegelung als Anteil der Kartenbreite */
--act: 1; /* 1 = Mitte, 0 = eine Schrittweite daneben */
position: relative;
display: block;
text-decoration: none;
min-width: 0;
}
/* Ab hier gilt: MIT JavaScript wird die Karte absolut gesetzt und gerechnet.
Ohne JavaScript bleibt sie ein normales Flex-Kind (siehe Abschnitt
"OHNE JAVASCRIPT" weiter unten) — dort greift keine dieser Regeln. */
.js .card {
position: absolute;
left: 0; top: 0;
width: var(--cw);
/* Rueckfall, falls das Skript den Ursprung noch nicht gesetzt hat */
transform-origin: 50% calc(var(--kh) + var(--cw));
will-change: transform;
}
/* Kennung — winzig, ueber dem Objekt in der Luft. Dieselbe Rolle wie
.sound__i und .buoy__i im Bestand. Ihre Hoehe geht in den Drehpunkt ein,
deshalb steht sie auf einer festen Zeilenhoehe. */
.card__i {
margin: 0 0 clamp(6px, .9vh, 10px);
height: clamp(9px, .95vw, 11px);
line-height: 1;
font-size: clamp(8px, .72vw, 9.5px);
letter-spacing: .34em;
color: var(--aqua-deep);
opacity: calc(1 - var(--dust) * .42);
}
/* ---- das Objekt selbst -------------------------------------------------
KEINE quadratische Kachel. Die Maske loest Oberkante und beide Flanken in
die Dunkelheit auf — genau wie .floor__band es mit dem Lichtband tut. Nur
die UNTERKANTE bleibt hart: dort bricht das Objekt im Wasser. */
.card__mark {
position: relative; display: block;
aspect-ratio: 1;
overflow: hidden;
opacity: calc(1 - var(--dust) * .20);
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%),
linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
mask-image:
linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%),
linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* Der Filter sitzt auf dem BILD, nicht auf dem maskierten Umschlag.
⚠ height:auto ist hier Pflicht: das traegt width/height-Attribute,
die als Darstellungshinweis wirken. Mit nur width:100% bliebe die Hoehe
auf 640 px stehen und das Bild wuerde gestaucht (im Bestand gemessen und
dokumentiert bei .pose__body img). Hier setzt object-fit zusaetzlich den
Ausschnitt, height:100% fuellt den quadratischen Umschlag. */
.card__mark img {
width: 100%; height: 100%;
object-fit: cover;
filter:
blur(calc(var(--dust) * 2.2px))
brightness(calc(1 - var(--dust) * .30))
saturate(calc(.60 - var(--dust) * .22))
contrast(calc(1 - var(--dust) * .14));
}
/* Farbstich ins Meerwasser. Wortgleich mit .floor__duo aus dem Bestand:
Helligkeit bleibt aus dem Bild, Ton und Saettigung kommen von hier. Die
Cover sind Magenta, Pink und Rot — unbehandelt sind sie in einer
durchgehend tealfarbenen Szene ein Fremdkoerper und sehen aufgeklebt aus. */
.card__duo {
position: absolute; inset: 0;
pointer-events: none;
background: linear-gradient(180deg, #2c7f95 0%, #1a6379 100%);
mix-blend-mode: color;
opacity: calc(.36 + var(--dust) * .40);
}
/* Licht auf der linken Flanke — die Lichtquelle dieser Seite steht links.
Ohne das steht das Objekt in der Szene, aber nicht IN ihrem Licht. */
.card__lift {
position: absolute; inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(205, 248, 255, .16) 0%, rgba(127, 230, 240, .05) 34%, transparent 62%),
linear-gradient(180deg, transparent 46%, rgba(2, 10, 20, .34) 100%);
mix-blend-mode: screen;
}
/* ---- der Kontaktpunkt --------------------------------------------------
Dort, wo die Karte das Wasser trifft. Kein zweiter Strich — die Linie
traegt der durchgehende Bogen. Das hier ist nur das Aufleuchten an der
Bruchstelle, wie .contact im Hero. Es traegt einen Filter und KEINE Maske. */
.card__contact {
position: absolute; left: 4%; right: 4%;
top: calc(var(--kh) + var(--cw) - 7px);
height: 14px;
pointer-events: none;
background: radial-gradient(closest-side,
rgba(226, 251, 255, .58) 0%, rgba(150, 234, 244, .24) 36%, transparent 74%);
filter: blur(6px);
mix-blend-mode: screen;
opacity: calc((1 - var(--dust) * .55) * (.55 + var(--act) * .45));
transition: opacity .45s ease;
}
/* ---- die Spiegelung ----------------------------------------------------
Fenster mit Maske aussen, gekipptes Bild mit Filter innen. Hoehe und
Unschaerfe folgen der Tiefe: nah lang und klar, fern kurz und verwaschen.
Das ist genau der Regler, den eine CSS-3D-Perspektive nicht haette. */
.card__mirror {
position: relative; display: block;
aspect-ratio: 1 / var(--mh);
overflow: hidden;
opacity: calc(1 - var(--dust) * .30);
-webkit-mask-image:
linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.34) 38%, rgba(0,0,0,.10) 66%, transparent 92%),
linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image:
linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.34) 38%, rgba(0,0,0,.10) 66%, transparent 92%),
linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* top:0 und volle Kartenbreite als Hoehe: Das Cover ist quadratisch, die
Kopie kippt in der eigenen Box um deren Mitte. Damit liegt an der
Oberkante des Fensters genau die Unterkante des Originals — die exakte
Spiegelung an der Wasserlinie. */
.card__mirror img {
position: absolute; left: 0; top: 0;
width: 100%; height: auto;
transform: scaleY(-1);
filter:
blur(calc(3.4px + var(--dust) * 5px))
saturate(1.2)
brightness(calc(1.34 - var(--dust) * .40));
animation: schwappen 12s ease-in-out infinite alternate;
}
/* Wasser kuehlt. Ohne diese Ebene ist die Spiegelung waermer als das
Original — dieselbe Korrektur wie .figure__cool im Bestand. */
.card__cool {
position: absolute; inset: 0;
background: linear-gradient(180deg, #2c7f95 0%, #17566b 100%);
mix-blend-mode: color;
opacity: .74;
}
/* Wasserstoerung: zwei Baenderungen mit ungleicher Periode. Bewusst schwach —
stark wirkte im Bestand wie ein Scan-Fehler. */
.card__streaks {
position: absolute; inset: 0;
background:
repeating-linear-gradient(to bottom, transparent 0 3px, rgba(2, 10, 20, .28) 3px 5px),
repeating-linear-gradient(to bottom, transparent 0 11px, rgba(2, 10, 20, .15) 11px 14px);
}
/* ---- die Beschriftung an der Karte ------------------------------------
Sie ist der Name des Links und muss deshalb IMMER im Dokument stehen —
sonst hiesse der Link fuer ein Vorleseprogramm nur "Link". Sichtbar ist
sie aber nur OHNE JavaScript; mit JavaScript uebernimmt die grosse Anzeige
unter der Buehne, damit beim Ziehen nicht sechs Textbloecke mitwandern.
Die Technik ist der uebliche Weg: aus dem Bild nehmen, im Baum lassen. */
.js .card__cap {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.card__cap { display: block; }
.card__t {
display: block;
margin: clamp(12px, 1.8vh, 20px) 0 0;
font-size: clamp(13px, 1.34vw, 17px); font-weight: 500;
line-height: 1.35; letter-spacing: .01em;
color: var(--foam);
}
.card__n {
display: block; margin: 6px 0 0;
font-size: clamp(10px, 1.02vw, 12.5px);
letter-spacing: .10em;
color: #a8c2ce;
}
.card__y {
display: block; margin: 5px 0 0;
font-size: clamp(8.5px, .8vw, 10px);
letter-spacing: .3em; text-transform: uppercase;
color: var(--aqua-deep);
}
/* --------------------------------------------------------------------------
DIE ANZEIGE — welcher Titel gerade in der Mitte liegt.
Ein ruhender Pol, waehrend die Bilder gleiten. Die Zeile wechselt weich,
wenn eine andere Karte einrastet.
-------------------------------------------------------------------------- */
.tide__read { margin-top: clamp(18px, 2.4vh, 32px); }
.tide__now { min-width: 0; }
/* Skala und Bedienhinweis stehen in EINER Zeile unter der Zahl. Zuerst stand
der Hinweis ganz rechts aussen — im Schuss bei 1400 px lag er einsam in
einer leeren Flaeche und las sich wie ein vergessenes Bauteil. */
.tide__meta {
display: flex; align-items: center;
gap: clamp(18px, 3vw, 44px);
flex-wrap: wrap;
}
.tide__t {
margin: 0;
min-height: 1.86em; /* zwei Zeilen Platz: der laengste Titel
bricht um, und ohne diese Hoehe
springt die Skala darunter mit. */
font-family: var(--mass); font-weight: 400;
font-size: clamp(21px, 3.1vw, 46px);
line-height: .93; letter-spacing: -.022em;
text-transform: uppercase;
color: var(--foam);
text-shadow: 0 0 54px rgba(127, 230, 240, .28);
transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.tide__n {
margin: clamp(10px, 1.6vh, 16px) 0 0;
font-size: clamp(10px, 1.05vw, 12.5px);
letter-spacing: .24em; text-transform: uppercase;
color: #a8c2ce;
transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.tide__n b { font-weight: 500; letter-spacing: .12em; color: var(--aqua-hot); }
/* Waehrend des Wechsels: kurz absinken und blasser werden — als taucht der
alte Name weg und der neue kommt hoch. Kein Blinken, kein Springen. */
.tide__read.is-swap .tide__t,
.tide__read.is-swap .tide__n { opacity: 0; transform: translateY(9px); }
/* die Skala: sechs Lichtstriche, der aktive laenger und hell.
Anzeige, kein Bedienelement — bedient wird an den Karten selbst. */
.tide__scale {
display: flex; align-items: center; gap: 10px;
margin: clamp(14px, 2vh, 20px) 0 0;
}
.tide__scale i {
display: block; width: 22px; height: 2px;
background: linear-gradient(90deg, rgba(63, 169, 189, .60), rgba(63, 169, 189, .14));
transition: width .45s cubic-bezier(.2, .7, .2, 1), background .45s ease;
}
.tide__scale i.on {
width: 54px;
background: linear-gradient(90deg, var(--aqua-hot), rgba(127, 230, 240, .20));
}
/* der Bedienhinweis. Verschwindet, sobald zum ersten Mal gezogen wurde —
danach ist er eine Selbstverstaendlichkeit und stoert nur. */
.tide__hint {
display: flex; align-items: center; gap: 12px;
margin: clamp(14px, 2vh, 20px) 0 0;
font-size: 9px; letter-spacing: .38em; text-transform: uppercase;
color: #7794a3;
white-space: nowrap;
transition: opacity .6s ease;
}
.tide__hint i {
display: block; width: 34px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(127, 230, 240, .75));
position: relative; overflow: hidden;
}
.tide__hint i:last-child { background: linear-gradient(90deg, rgba(127, 230, 240, .75), transparent); }
.tide__stage.is-used ~ .tide__read .tide__hint { opacity: 0; }
/* ---- Fussnote der Sektion --------------------------------------------- */
.tide__foot {
margin-top: clamp(30px, 4.6vh, 54px);
padding-top: 20px;
display: flex; align-items: baseline; justify-content: space-between;
gap: 22px; flex-wrap: wrap;
/* Lichtlinie statt Rahmen — dieselbe Bauart wie .foot__bar in style.css */
background: linear-gradient(90deg, rgba(63, 169, 189, .34), rgba(63, 169, 189, .04) 60%, transparent) top left / 100% 1px no-repeat;
}
.tide__sum {
margin: 0;
font-size: clamp(9.5px, .95vw, 11.5px);
letter-spacing: .26em; text-transform: uppercase;
color: var(--haze);
}
.tide__sum b { font-weight: 500; letter-spacing: .12em; color: var(--foam); }
.tide__link {
position: relative; display: inline-block; padding-bottom: 6px;
font-size: clamp(9.5px, .92vw, 11px);
letter-spacing: .26em; text-transform: uppercase;
color: var(--foam); text-decoration: none;
white-space: nowrap;
}
.tide__link::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: linear-gradient(90deg, var(--aqua), transparent);
transform: scaleX(.34); transform-origin: left;
transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.tide__link:hover { color: var(--aqua-hot); }
.tide__link:hover::after { transform: scaleX(1); }
/* --------------------------------------------------------------------------
OHNE JAVASCRIPT — kein Totalausfall.
Bei diesem Bau ist das der kritischste Punkt der ganzen Datei: die Lage
der Karten kommt aus dem Skript. Faellt es aus, laegen sie ohne
Grundstellung alle uebereinander. Deshalb ist die absolute Positionierung
an `.js` gebunden, und die Grundstellung ist eine schlicht lesbare Reihe
im Innenmass, die umbricht. Kein Bildlauf, keine versteckten Inhalte,
jede Karte mit voller Beschriftung.
Die Wasserlinie und die Verlaufsvorhaenge werden dabei ausgeblendet: ohne
gerechnete Kartenlage haetten sie nichts, worauf sie sich beziehen.
-------------------------------------------------------------------------- */
html:not(.js) .tide__stage {
width: min(1320px, 92vw);
margin: 0 auto;
}
html:not(.js) .tide__track {
height: auto;
display: flex; flex-wrap: wrap;
gap: clamp(20px, 3vw, 40px);
}
html:not(.js) .card { flex: 1 1 clamp(180px, 26%, 300px); }
html:not(.js) .tide__wl,
html:not(.js) .tide__veil,
html:not(.js) .tide__near,
html:not(.js) .tide__hint,
html:not(.js) .tide__scale,
html:not(.js) .tide__read { display: none; }
html:not(.js) .card__contact { display: none; }
/* ==========================================================================
04 · YOUTUBE — DIE LICHTQUELLE
Uebernommen aus Variante A. Die groesste Zahl der ganzen Seite steht
koerperlich gross in Archivo Black, hat wie jedes Ding auf dieser Seite
ihre eigene Wasserlinie und ihre Spiegelung, und wirft von oben links
Licht in den Abschnitt.
⚠ Die Randfarben sind Pflicht: .tide endet auf #000306 und .book beginnt
auf #000306. Traefe hier ein anderer Ton auf, saehe man die Naht als
Tonstufe — dieselbe Rechnung wie zwischen Hero und .deep im Bestand.
========================================================================== */
.beam {
position: relative;
padding: clamp(78px, 11vh, 142px) 0 clamp(80px, 12vh, 152px);
background:
radial-gradient(72% 38% at 10% 4%, rgba(26, 99, 121, .28), transparent 68%),
radial-gradient(56% 40% at 94% 78%, rgba(6, 23, 43, .72), transparent 72%),
linear-gradient(180deg, #000306 0%, #01070e 14%, var(--abyss) 46%, #01070e 86%, #000306 100%);
overflow: hidden;
isolation: isolate;
}
/* Der Hof der Lichtquelle. Kein mask-image auf diesem Element — es traegt
einen Filter (Bauregel 2). */
.beam__halo {
position: absolute; z-index: 1; pointer-events: none;
left: -8%; top: -6%; width: 76%; height: 54%;
background: radial-gradient(closest-side,
rgba(205, 248, 255, .17) 0%, rgba(127, 230, 240, .09) 44%, transparent 76%);
filter: blur(50px);
mix-blend-mode: screen;
}
/* Lichtschaechte von oben links — gleiche Bauart wie .book__light. */
.beam__light { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.beam__light i {
position: absolute; display: block;
top: -6%; height: 126%;
background: linear-gradient(to bottom, rgba(127, 230, 240, .16), transparent 72%);
filter: blur(42px);
mix-blend-mode: screen;
}
.beam__light i:first-child { left: 4%; width: 16vw; transform: rotate(8deg); opacity: .8; }
.beam__light i:last-child { left: 23%; width: 9vw; transform: rotate(12deg); opacity: .45; }
/* Die nahe Wasserflaeche dieses Abschnitts. Sie fuellt die Flaechen, die
durch die versetzte Staffelung der drei Baender frei bleiben — dieselbe
Aufgabe wie .surf im Hero: aus dem Loch wird Wasser. */
.beam__near {
position: absolute; z-index: 2; pointer-events: none;
left: 0; right: 0; top: 22%; bottom: 0;
/* ⚠ Reichte zuerst nur ueber die unteren 46 %. Im Schuss ueber die volle
Sektionshoehe war die Folge klar zu sehen: zwischen dem ersten und dem
zweiten Band lag links eine grosse Flaeche voellig ohne Aufgabe. Jetzt
beginnt das Wasser schon unter der grossen Zahl. */
background:
radial-gradient(14px 7px at 88% 12%, rgba(205, 248, 255, .30), transparent 70%),
radial-gradient(26px 12px at 13% 20%, rgba(127, 230, 240, .26), transparent 72%),
radial-gradient(11px 6px at 30% 30%, rgba(205, 248, 255, .22), transparent 70%),
radial-gradient(34px 15px at 19% 41%, rgba(63, 169, 189, .28), transparent 74%),
radial-gradient(16px 8px at 8% 52%, rgba(127, 230, 240, .20), transparent 72%),
radial-gradient(28px 13px at 86% 58%, rgba(127, 230, 240, .22), transparent 72%),
radial-gradient(13px 7px at 66% 70%, rgba(205, 248, 255, .18), transparent 70%),
radial-gradient(36px 16px at 78% 82%, rgba(63, 169, 189, .24), transparent 74%),
radial-gradient(18px 9px at 40% 90%, rgba(127, 230, 240, .16), transparent 72%),
radial-gradient(100% 40% at 20% 34%, rgba(26, 99, 121, .14), transparent 78%),
radial-gradient(110% 40% at 80% 86%, rgba(26, 99, 121, .16), transparent 78%);
filter: blur(3px);
mix-blend-mode: screen;
animation: atmen 19s ease-in-out infinite alternate;
}
.beam__inner {
position: relative; z-index: 5;
width: min(1320px, 92vw);
margin: 0 auto;
}
/* --- die grosse Zahl ---------------------------------------------------
--big steht EINMAL und gilt fuer Zahl und Spiegelung gleichermassen. Nur
so bleiben beide zwangslaeufig gleich gross — getrennt bemasst waeren sie
beim ersten clamp-Sprung auseinandergelaufen. */
.beam__lead { --big: clamp(40px, 11.6vw, 148px); }
.beam__k {
margin: 0 0 clamp(12px, 1.8vh, 20px);
font-size: clamp(9.5px, 1vw, 11.5px);
letter-spacing: .40em; text-transform: uppercase;
color: var(--aqua-mid);
}
.beam__n {
margin: 0;
font-family: var(--mass); font-weight: 400;
font-size: var(--big);
line-height: .84; letter-spacing: -.035em;
color: var(--foam);
text-shadow: 0 0 78px rgba(127, 230, 240, .30);
font-variant-numeric: tabular-nums;
}
/* ihre Wasserlinie. Laeuft ueber die volle Breite und ist links am hellsten —
genau wie .horizon im Hero, wo das Licht auch von links kommt. */
.beam__wl {
position: relative; height: 0; z-index: 2;
pointer-events: none;
}
.beam__wl::before {
content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1.5px;
background: linear-gradient(90deg,
transparent 0%, rgba(205, 248, 255, .34) 3%, rgba(242, 254, 255, .96) 20%,
rgba(205, 248, 255, .66) 46%, rgba(160, 238, 246, .42) 72%,
rgba(127, 230, 240, .22) 92%, transparent 100%);
}
.beam__wl::after {
content: ''; position: absolute; left: 0; right: 0; top: -6vh; height: 12vh;
background:
radial-gradient(50% 50% at 20% 50%, rgba(127, 230, 240, .30), transparent 74%),
radial-gradient(66% 40% at 58% 50%, rgba(63, 169, 189, .18), transparent 78%);
filter: blur(22px);
}
/* ihre Spiegelung. Maske auf dem Umschlag, Unschaerfe auf dem Kind —
dieselbe Zerlegung wie bei .manifest__echo im Hero. Zahl und Kopie haben
dieselbe Schriftgroesse und dieselbe Zeilenhoehe, die Kopie kippt in der
eigenen Box um deren Mitte. Damit liegt an der Oberkante des Fensters
exakt die Unterkante der Originalzeile — die Wasserlinie. */
.beam__echo {
position: relative;
height: calc(var(--big) * .32);
overflow: hidden;
pointer-events: none;
font-size: var(--big);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.46) 0%, rgba(0,0,0,.13) 38%, transparent 72%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,.46) 0%, rgba(0,0,0,.13) 38%, transparent 72%);
}
.beam__echo span {
display: block;
font-family: var(--mass); font-weight: 400;
font-size: 1em;
line-height: .84; letter-spacing: -.035em;
color: rgba(127, 230, 240, .62); /* = --aqua, nur blasser */
font-variant-numeric: tabular-nums;
transform: scaleY(-1);
filter: blur(8px);
}
/* --- die zwei kleineren Messgeraete ------------------------------------
Keine Karten, kein Raster: zwei Werte, jeder an seinem eigenen kurzen
Lichtstrich — dieselbe Bauart wie .book__facts li::before. */
.beam__gauge {
margin: clamp(36px, 5.4vh, 62px) 0 0;
display: flex; flex-wrap: wrap;
gap: clamp(30px, 5.6vw, 92px);
}
.beam__g { position: relative; padding-top: 17px; }
.beam__g::before {
content: ''; position: absolute; left: 0; top: 0;
width: clamp(30px, 4vw, 56px); height: 1px;
background: linear-gradient(90deg, var(--aqua), transparent);
}
.beam__gn {
margin: 0;
font-family: var(--mass); font-weight: 400;
font-size: clamp(22px, 2.9vw, 40px);
line-height: 1; letter-spacing: -.022em;
color: var(--foam);
text-shadow: 0 0 44px rgba(127, 230, 240, .26);
font-variant-numeric: tabular-nums;
}
.beam__gk {
margin: 11px 0 0;
font-size: 9px; letter-spacing: .34em; text-transform: uppercase;
color: var(--aqua-mid);
}
.beam__out {
display: inline-flex; align-items: center; gap: 14px;
margin: clamp(30px, 4.4vh, 52px) 0 0;
font-size: clamp(9.5px, 1vw, 11.5px);
letter-spacing: .30em; text-transform: uppercase;
color: var(--foam); text-decoration: none;
transition: color .35s ease;
}
.beam__out i {
display: block; width: 44px; height: 1px;
background: linear-gradient(90deg, var(--aqua), transparent);
transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.beam__out:hover { color: var(--aqua-hot); }
.beam__out:hover i { width: 74px; }
/* --- die Belege: DREI Baender statt sechs -------------------------------
⚠ DIE EINE AENDERUNG GEGENUEBER VARIANTE A, und sie ist der Grund, warum
dieser Abschnitt jetzt anders aussieht: Mit sechs Videos brauchte es zwei
gleich breite Spalten, und jedes Bild war rund 600 px breit. Mit drei
darf jedes so breit werden, wie es stark ist — und die Breite folgt der
Aufrufzahl: 76 % / 62 % / 48 % des Innenmasses. Das ist dieselbe Aussage
wie die Rangfolge, nur ohne Zahl.
Nichts reiht sich an einer Kante auf: Band 1 steht links, Band 2 rechts,
Band 3 wieder links und eingerueckt. Die Bildunterschrift steht NEBEN dem
Band, nicht darunter — dadurch bleibt keine Flaeche leer, und die Zeilen
liegen wie Logbucheintraege am Rand des Wassers. */
.beam__proof {
position: relative; z-index: 5;
margin: clamp(60px, 8.5vh, 108px) 0 0;
display: grid;
row-gap: clamp(40px, 5.5vh, 78px);
}
.proof {
display: grid;
gap: clamp(20px, 3vw, 48px);
align-items: end;
text-decoration: none;
min-width: 0;
}
/* Band links, Text rechts */
.proof.p1 { grid-template-columns: 72% minmax(0, 1fr); --bri: .96; --tone: .48; }
/* Text links, Band rechts — der Bruch in der Achse */
.proof.p2 { grid-template-columns: minmax(0, 1fr) 58%; --bri: .88; --tone: .54; }
.proof.p2 .proof__stack { order: 2; }
.proof.p2 .proof__cap { order: 1; text-align: right; }
/* Band links, eingerueckt — das kleinste, am weitesten weg */
.proof.p3 { grid-template-columns: 46% minmax(0, 1fr); margin-left: clamp(0px, 9vw, 130px); --bri: .86; --tone: .58; }
/* ⚠ Die Bildunterschrift sitzt auf der WASSERLINIE, nicht am unteren Ende
der Spiegelung. Gemessen im Schuss bei 1400 px: mit blossem
`align-items: end` stand sie 220 px zu tief und sah aus, als schwebe sie
unter dem Bild — dabei soll sie auf derselben Hoehe liegen, in der das
Band ins Wasser bricht.
Die Rechnung: die Spiegelung ist 3,6/16 = 0,225 der Bandbreite hoch, und
die Bandbreite ist der Prozentsatz oben. Prozentwerte in margin beziehen
sich in einem Raster auf die BREITE des Rasters — also genau die Groesse,
auf die sich auch die Bandbreite bezieht. Damit stimmt es bei jeder
Fensterbreite von allein.
p1: 72 % × 0,225 = 16,2 % p2: 58 % × 0,225 = 13,05 %
p3: 46 % × 0,225 = 10,35 % */
.proof.p1 .proof__cap { margin-bottom: 16.20%; }
.proof.p2 .proof__cap { margin-bottom: 13.05%; }
.proof.p3 .proof__cap { margin-bottom: 10.35%; }
.proof__stack { position: relative; display: block; min-width: 0; }
/* Maske aussen (Bauregel 2): Oberkante und beide Flanken loesen sich auf,
die Unterkante bleibt hart — dort ist die Wasserlinie. */
.proof__band {
position: relative; display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, #000 16%, #000 100%),
linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
mask-image:
linear-gradient(to bottom, transparent 0%, #000 16%, #000 100%),
linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* Filter innen. Dieselbe Daempfung wie .floor__band video im Bestand: das
Material ist warmes Buehnenlicht, hier wird es kaltes Licht unter Wasser. */
.proof__band img {
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 50%;
filter: saturate(.84) contrast(1.05) brightness(var(--bri));
transition: filter .55s ease;
}
.proof__tone {
position: absolute; inset: 0; pointer-events: none;
/* woertlich der Verlauf aus .floor__duo */
background: linear-gradient(180deg, #2c7f95 0%, #1a6379 56%, #103f52 100%);
mix-blend-mode: color;
}
.proof__band .proof__tone { opacity: var(--tone); }
/* Wasser kuehlt, es waermt nicht — die Spiegelung ist immer kaelter. */
.proof__mirror .proof__tone { opacity: calc(var(--tone) + .14); }
.proof__glint {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(90% 120% at 16% 0%, rgba(127, 230, 240, .20), transparent 66%),
linear-gradient(180deg, rgba(26, 99, 121, .18) 0%, rgba(2, 10, 20, .24) 100%);
mix-blend-mode: screen;
}
.proof__wl {
position: relative; display: block; height: 0; z-index: 2;
pointer-events: none;
}
.proof__wl::before {
content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1.5px;
background: linear-gradient(90deg,
transparent 0%, rgba(127, 230, 240, .26) 8%, rgba(230, 252, 255, .88) 30%,
rgba(160, 238, 246, .50) 64%, rgba(127, 230, 240, .18) 88%, transparent 100%);
}
.proof__wl::after {
content: ''; position: absolute; left: 0; right: 0; top: -4vh; height: 8vh;
background: radial-gradient(50% 50% at 30% 50%, rgba(127, 230, 240, .24), transparent 74%);
filter: blur(16px);
opacity: .7;
transition: opacity .5s ease;
}
.proof:hover .proof__wl::after { opacity: 1; }
/* Fensterhoehe 3,6/16 der Breite = 40 % der Bandhoehe (16:9). Damit
entspricht sie fast genau dem Verhaeltnis von .floor__mirror im Bestand
(0,42 der Bandhoehe). Etwas grosszuegiger als in Variante A (3,4), weil
hier nur noch drei Baender stehen und jedes mehr Raum tragen darf. */
.proof__mirror {
position: relative; display: block;
width: 100%; aspect-ratio: 16 / 3.6;
overflow: hidden;
-webkit-mask-image:
linear-gradient(to bottom, rgba(0,0,0,.70) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,.09) 62%, transparent 88%),
linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
mask-image:
linear-gradient(to bottom, rgba(0,0,0,.70) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,.09) 62%, transparent 88%),
linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.proof__mirror img {
position: absolute; left: 0; top: 0;
width: 100%; height: auto; aspect-ratio: 16 / 9;
object-fit: cover; object-position: 50% 50%;
transform: scaleY(-1);
/* ⚠ von .58 auf .74 angehoben. Gemessen im Schuss bei 1400 px war die
Spiegelung des ersten Bandes praktisch schwarz — die Videobilder sind
schon im Original dunkle Nachtaufnahmen, und mit .58 blieb nichts uebrig
als ein Schimmern. Die Spiegelung ist auf dieser Seite aber das
Kernelement, nicht Beiwerk. */
filter: blur(6px) saturate(.40) brightness(calc(var(--bri) * .74));
animation: schwappen 15s ease-in-out infinite alternate;
}
.proof__streaks {
position: absolute; inset: 0; pointer-events: none;
background:
repeating-linear-gradient(to bottom, transparent 0 3px, rgba(2, 10, 20, .26) 3px 5px),
repeating-linear-gradient(to bottom, transparent 0 12px, rgba(2, 10, 20, .13) 12px 15px);
}
/* die Bildunterschrift: Messwert oben, Titel darunter, Datum ganz klein.
Ein Logbucheintrag, keine Werbezeile. Sie steht NEBEN dem Band und sitzt
unten buendig — also auf Hoehe des Wassers, in das das Band bricht. */
.proof__cap { display: block; min-width: 0; padding-bottom: clamp(6px, 1.4vw, 22px); }
.proof__v {
display: block;
font-family: var(--mass); font-weight: 400;
font-size: clamp(20px, 2.5vw, 38px);
line-height: 1; letter-spacing: -.022em;
color: var(--foam);
text-shadow: 0 0 46px rgba(127, 230, 240, .26);
font-variant-numeric: tabular-nums;
transition: color .45s ease;
}
.proof__vk {
display: block; margin-top: 10px;
font-size: 9px; letter-spacing: .34em; text-transform: uppercase;
color: var(--aqua-mid);
}
.proof__t {
display: block; margin-top: clamp(16px, 2.4vh, 26px);
font-size: clamp(11.5px, 1.16vw, 14.5px);
line-height: 1.6; letter-spacing: .04em;
color: #cfe2e9;
transition: color .45s ease;
}
.proof__dt {
display: block; margin-top: 10px;
font-size: 9px; letter-spacing: .30em; text-transform: uppercase;
/* --haze statt --dim: im Schuss bei 1400 px war die Zeile in --dim auf
diesem Grund praktisch nicht zu lesen. Dieselbe Korrektur, die Variante A
bereits an zwei Beschriftungen vorgenommen hat. */
color: var(--haze);
}
.proof:hover .proof__v { color: var(--aqua-hot); }
.proof:hover .proof__t { color: var(--foam); }
.proof:hover .proof__band img { filter: saturate(.94) contrast(1.05) brightness(calc(var(--bri) * 1.26)); }
/* ==========================================================================
SCHMALE BILDSCHIRME
Die Umbrueche liegen auf denselben zwei Stufen wie im Bestand: 900 px und
560 px. Es kommt keine dritte dazu.
========================================================================== */
@media (max-width: 900px) {
/* ---- Das Karussell: gleiche Mechanik, engere Reihe -------------------
Der Radius muss hier NICHT angefasst werden — er wird aus der
sichtbaren Breite gerechnet und passt sich von allein an (siehe
--senke-anteil oben). Angepasst werden nur zwei Dinge:
· die Karte wird groesser im Verhaeltnis zum Fenster (56vw statt
21,5vw), sonst waere sie am Handy briefmarkengross;
· die Schrittweite rueckt naeher an die Kartenbreite heran (1,06 statt
1,16). ⚠ Das ist gemessen entstanden: bei 1,14 und 62vw war im Schuss
bei 500 px KEINE Nachbarkarte mehr zu sehen — die Reihe sah aus wie
ein einzelnes Bild, und niemand haette geahnt, dass sich daran ziehen
laesst. Bei 56vw war rechts ein Stueck zu sehen und links fast
nichts (gemessen 82 gegen 56 px, davon 40 px unter dem Randvorhang) —
deshalb 52vw. Jetzt schaut links und rechts je rund 80 px Nachbar
herein. Die aktive Karte ueberlappt ihre Nachbarn dabei leicht, und
das ist richtig so: ein nahes Objekt verdeckt ein fernes. */
.tide__stage {
--cw: min(52vw, 44vh);
--pitch-f: 1.06;
--fern-mass: .10;
--fern-hell: .14;
}
.tide__veil { width: clamp(24px, 8vw, 90px); }
.tide__meta { gap: clamp(14px, 5vw, 28px); }
.tide__foot { gap: 16px; }
/* ---- YouTube: die drei Baender werden voll breit, Text darunter ------
Ein Band neben seinem Text waere auf 420 px zweimal zu schmal. Der
Versatz der Achse bleibt trotzdem erhalten: Band 2 rueckt nach rechts,
Band 3 bleibt links — nur eben untereinander. */
.proof.p1,
.proof.p2,
.proof.p3 {
grid-template-columns: minmax(0, 1fr);
margin-left: 0;
gap: clamp(14px, 3vh, 22px);
}
.proof.p2 .proof__stack { order: 1; }
.proof.p2 .proof__cap { order: 2; text-align: left; }
.proof.p1 { width: 100%; }
.proof.p2 { width: 92%; margin-left: 8%; }
.proof.p3 { width: 86%; }
.proof__cap { padding-bottom: 0; }
.beam__gauge { gap: clamp(26px, 7vw, 44px); }
}
@media (max-width: 560px) {
.tide__stage { --cw: min(52vw, 44vh); }
.tide__foot { flex-direction: column; align-items: flex-start; }
.tide__link { white-space: normal; }
.proof.p2 { width: 100%; margin-left: 0; }
.proof.p3 { width: 100%; }
/* Fuenf Menuepunkte passen auf 375 px nicht in eine Zeile. Statt die
freigegebenen drei anzutasten, darf die Zeile umbrechen und rechts
ausgerichtet bleiben — die Marke links bleibt, wo sie war.
⚠ Das ist die EINZIGE Stelle in dieser Datei, die einen bestehenden
Selektor ergaenzt. Sie ist die Folge der zwei neuen Menuepunkte und
faellt mit ihnen weg.
↩ Rueckbau: diese Regel entfernen. Erkennbar daran, dass die Menuepunkte
auf einem 375-px-Schirm wieder in einer Zeile stehen und ueber den
linken Rand hinauslaufen. */
.nav__right { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
}
/* ==========================================================================
BEWEGUNG AUS — vollstaendig, nicht abgeschwaecht.
Der Block in der style.css kennt meine Elemente nicht; er zaehlt nur die
dortigen Spiegelungen auf. Deshalb steht hier die Fortsetzung.
Die Spiegelungen behalten ihr scaleY(-1) — die Szene bleibt vollstaendig
lesbar, nur die Bewegung faellt weg. Das KARUSSELL BLEIBT BEDIENBAR:
Ziehen, Klicken und Tastatur arbeiten weiter, es gibt nur kein Nachlaufen
und keine Traegheit mehr (das regelt das Skript).
⚠ Bei jeder Umbenennung einer Spiegelung diesen Block mitziehen.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.card__mirror img,
.proof__mirror img,
.tide__near,
.beam__near { animation: none !important; }
.card__mirror img,
.proof__mirror img { transform: scaleY(-1) !important; }
.tide__t, .tide__n, .tide__scale i, .tide__hint,
.card__contact,
.proof__v, .proof__t, .proof__band img,
.proof__wl::after,
.beam__out i, .tide__link::after { transition: none !important; }
}
/* ==========================================================================
PLATTFORM-ZEICHEN
Die Marken-Glyphen liegen als verstecktes SVG-Sprite im Dokument und
werden per