(optional style="--delay:120ms") */
.js [data-reveal] {
opacity: 0; transform: translateY(28px);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Scroll-Füllung: Wörter werden beim Scrollen "eingefärbt" —
*/
.js [data-fill] .fw { transition: color 0.25s linear; color: var(--fill-off, rgba(0, 0, 0, 0.16)); }
.js [data-fill] .fw.is-lit { color: inherit; }
/* Laufband, horizontal an Scrollposition gekoppelt —
*/
[data-marquee] { overflow: hidden; }
[data-marquee] .marquee__track { display: flex; width: max-content; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js [data-split] .w-i, .js [data-reveal] { transform: none !important; opacity: 1 !important; transition: none !important; }
.inline-render--float svg { animation: none; }
}
/* ==========================================================================
Liquid-Glass-Buttons — echtes Glas, nicht getönte Fläche
Schichten (wie im Framer-Vorbild, aber in reinem CSS):
1 Körper – äußerer Schatten, hebt den Knopf von der Fläche ab
2 Fläche – Rückgrund brechen (SVG-Filter), weichzeichnen, sättigen
3 Rand – helle Lichtkante oben, dunkle unten: die Glasdicke
4 Schulter – innere Schatten, erzeugen die gewölbte Kante
Die Brechung (--glas-filter) setzt site.js pro Knopfgröße. Kann der Browser
keine SVG-Filter im Rückgrund (alles außer Chromium), bleibt es bei
Weichzeichnen – dann ist es Milchglas statt geschliffenem Glas.
========================================================================== */
.btn--glass {
--glas-blur: 6px;
--glas-hell: 0.10; /* Eigenhelligkeit des Glases, bewusst sehr gering */
position: relative;
isolation: isolate;
background: transparent;
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.14),
0 4px 6px -3px rgba(0, 0, 0, 0.20),
0 14px 24px -12px rgba(0, 0, 0, 0.24);
}
/* Fläche: hier passiert die Brechung */
.btn--glass::before {
content: ""; position: absolute; inset: 0; z-index: -2;
border-radius: inherit;
background: linear-gradient(150deg,
rgba(255, 255, 255, calc(var(--glas-hell) + 0.10)),
rgba(255, 255, 255, calc(var(--glas-hell) * 0.3)) 42%,
rgba(255, 255, 255, calc(var(--glas-hell) + 0.06)));
backdrop-filter: var(--glas-filter, none) blur(var(--glas-blur)) saturate(1.6) brightness(1.04);
-webkit-backdrop-filter: blur(var(--glas-blur)) saturate(1.6) brightness(1.04);
transition: backdrop-filter var(--dur-fast) ease, background var(--dur-fast) ease;
}
/* Rand: die sichtbare Glasdicke */
.btn--glass::after {
content: ""; position: absolute; inset: 0; z-index: -1;
border-radius: inherit; pointer-events: none;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.95),
inset 0 -1px 1px rgba(255, 255, 255, 0.55),
inset 1px 0 0.5px rgba(255, 255, 255, 0.5),
inset -1px 0 0.5px rgba(0, 0, 0, 0.16),
inset 0 9px 12px -8px rgba(0, 0, 0, 0.34),
inset 0 -9px 9px -7px rgba(255, 255, 255, 0.85),
inset 5px 0 8px -7px rgba(0, 0, 0, 0.34),
inset -5px 0 8px -7px rgba(0, 0, 0, 0.26);
}
.btn--glass:hover { --glas-hell: 0.16; --glas-blur: 8px; }
.btn--glass:active { --glas-hell: 0.22; }
/* Schrift: Glas färbt nicht, also trägt die Schrift den Kontrast selbst.
Auf dunklem Grund weiß mit weichem Schatten, auf hellem Grund Ink. */
.btn--glass { color: var(--text); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45); }
.on-dark .btn--glass, .film .btn--glass, .nav.is-on-film .nav__cta {
color: var(--color-pure-white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.btn--glass .btn__arrow { opacity: 0.9; }
/* Auf dunklem Grund ist Glas DUNKLES Glas – so hält es die weiße Schrift.
Gemessen: helles Glas über dem Hero-Bild ergab 3,3:1 im Mittel und 1,6:1
an der hellsten Stelle. Dunkles Glas dreht das um, ohne die Durchsicht
zu verlieren: Man sieht weiter hindurch, es wird nur abgedunkelt. */
.on-dark .btn--glass::before,
.film .btn--glass::before,
.nav.is-on-film .nav__cta::before {
background: linear-gradient(150deg,
rgba(255, 255, 255, 0.14),
rgba(0, 0, 0, 0.42) 46%,
rgba(0, 0, 0, 0.30));
backdrop-filter: var(--glas-filter, none) blur(var(--glas-blur, 6px)) saturate(1.5) brightness(0.72);
-webkit-backdrop-filter: blur(var(--glas-blur, 6px)) saturate(1.5) brightness(0.72);
}
.on-dark .btn--glass:hover::before,
.film .btn--glass:hover::before {
backdrop-filter: var(--glas-filter, none) blur(8px) saturate(1.6) brightness(0.80);
-webkit-backdrop-filter: blur(8px) saturate(1.6) brightness(0.80);
}
/* Ohne Rückgrund-Weichzeichner: deckende Fläche, damit der Knopf erkennbar bleibt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.btn--glass { background: var(--action); color: var(--color-pure-white); text-shadow: none; }
.btn--glass::before, .btn--glass::after { display: none; }
}
/* Wer weniger Transparenz eingestellt hat, bekommt einen klaren, deckenden Knopf */
@media (prefers-reduced-transparency: reduce) {
.btn--glass { background: var(--action); color: var(--color-pure-white); text-shadow: none; }
.btn--glass::before, .btn--glass::after { display: none; }
}
/* Der Navigationsknopf wird erst zu Glas, wenn er über dem Bild liegt –
auf der flachen Parchment-Fläche gibt es nichts zu brechen. */
.nav.is-on-film .nav__cta {
background: transparent;
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.14),
0 4px 6px -3px rgba(0, 0, 0, 0.20);
position: relative; isolation: isolate;
}
.nav.is-on-film .nav__cta::before {
content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
background: linear-gradient(150deg, rgba(255,255,255,0.20), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0.16));
backdrop-filter: var(--glas-filter, none) blur(6px) saturate(1.6) brightness(1.04);
-webkit-backdrop-filter: blur(6px) saturate(1.6) brightness(1.04);
}
.nav.is-on-film .nav__cta::after {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.95),
inset 0 -1px 1px rgba(255,255,255,0.55),
inset 0 9px 12px -8px rgba(0,0,0,0.34),
inset 0 -9px 9px -7px rgba(255,255,255,0.85);
}