/* ───────────────────────────────────────────────────────────────
base.css — Grundlagen: Farben, Typografie, Header, Footer
Wird von jeder Seite geladen, danach die seiteneigene CSS-Datei.
─────────────────────────────────────────────────────────────── */
:root {
--bg: #0a0a0b;
--bg-soft: #121214;
--fg: #f2f1ee;
--muted: rgba(242, 241, 238, 0.55);
--faint: rgba(242, 241, 238, 0.30);
--line: rgba(242, 241, 238, 0.12);
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
--serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
--header-h: 68px;
--pad-x: clamp(20px, 5vw, 72px);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
/* Auftritte bremsen weich aus, Abgänge ziehen an — dadurch wirkt das
Erscheinen ruhig und das Verschwinden entschlossen */
--ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
--ease-in: cubic-bezier(0.55, 0.06, 0.85, 0.35);
/* Lange, gleichmässige Kurve ohne harten Anriss — für Bewegungen, die
gleiten sollen statt zu schnappen */
--ease-glide: cubic-bezier(0.33, 0.03, 0.16, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background-color: var(--bg);
color: var(--fg);
font-family: var(--sans);
font-weight: 200;
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
overflow-x: hidden;
}
/* ─── Wellenbewegung im Hintergrund ──────────────────────────────
Drei Ebenen: zwei Sätze breiter, weicher Graubänder, die schräg
gegeneinander durchs Bild laufen (das eigentliche Wellenbild), und
darunter eine langsam wandernde Fläche für die Tiefe.
Jede Bandebene wandert um genau eine Wellenlänge — dadurch läuft die
Animation nahtlos durch, ohne Sprung am Ende.
Tempo: --wave-a / --wave-b, Helligkeit: die rgba-Werte.
─────────────────────────────────────────────────────────────── */
:root {
--wave-a: 15s;
--wave-b: 19s;
}
.backdrop {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.wave {
position: absolute;
/* Überstand, damit beim Wandern nie ein Rand frei läuft */
inset: -26vmax;
display: block;
}
/* Jeder Wellenzug läuft doppelt: zwei Kopien wandern gleich schnell in
dieselbe Richtung, um eine halbe Runde gegeneinander versetzt, und blenden
dreieckig gegeneinander über (Summe der beiden bleibt konstant). Der Sprung
am Rundenende fällt dadurch immer in den Moment, in dem die betreffende
Kopie unsichtbar ist — sichtbar bleibt eine endlose, gleichmässige Fahrt. */
.wave-a1, .wave-a2 {
background-image:
repeating-radial-gradient(circle at -110vmax 150vmax,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.11) 4vmax,
rgba(255, 255, 255, 0.02) 9vmax,
rgba(255, 255, 255, 0.07) 12vmax,
rgba(255, 255, 255, 0) 17vmax,
rgba(255, 255, 255, 0.05) 21vmax,
rgba(255, 255, 255, 0) 28vmax),
repeating-radial-gradient(circle at -70vmax 105vmax,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.05) 3vmax,
rgba(255, 255, 255, 0) 9vmax,
rgba(255, 255, 255, 0.028) 11vmax,
rgba(255, 255, 255, 0) 14vmax);
filter: blur(14px);
animation: travel-a var(--wave-a) linear infinite,
crossfade var(--wave-a) linear infinite;
}
.wave-a2 {
animation-delay: calc(var(--wave-a) / -2), calc(var(--wave-a) / -2);
}
.wave-b1, .wave-b2 {
background-image:
repeating-radial-gradient(circle at 175vmax -85vmax,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.08) 3vmax,
rgba(255, 255, 255, 0) 8vmax,
rgba(255, 255, 255, 0.058) 11vmax,
rgba(255, 255, 255, 0.014) 15vmax,
rgba(255, 255, 255, 0) 22vmax),
repeating-radial-gradient(circle at 140vmax -55vmax,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.034) 2vmax,
rgba(255, 255, 255, 0) 11vmax);
filter: blur(18px);
animation: travel-b var(--wave-b) linear infinite,
crossfade var(--wave-b) linear infinite;
}
.wave-b2 {
animation-delay: calc(var(--wave-b) / -2), calc(var(--wave-b) / -2);
}
@keyframes travel-a {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(22vmax * 0.95), calc(22vmax * -0.31), 0); }
}
@keyframes travel-b {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(18vmax * -0.68), calc(18vmax * 0.73), 0); }
}
@keyframes crossfade {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
html::before, html::after, body::before, body::after {
content: '';
position: fixed;
/* Überstand, damit beim Wandern nie ein Rand frei läuft */
inset: -36vmax;
z-index: -1;
pointer-events: none;
}
html::before { will-change: transform; }
/* Unbewegter Schleier über den Wellen: zu den Rändern hin löst sich das
Muster ins Schwarz auf. Bewusst ohne Animation — läge die Maske auf einer
wandernden Ebene, spränge sie am Ende jeder Runde sichtbar zurück. */
body::before {
inset: 0;
background: radial-gradient(125vmax 88vmax at 50% 46%,
rgba(10, 10, 11, 0) 25%,
rgba(10, 10, 11, 0.28) 66%,
rgba(10, 10, 11, 0.62) 100%);
}
/* Der Aufbau aus dem Schwarz läuft über ein einfarbiges Tuch, das sich hebt —
nicht über die Deckkraft der Wellenebenen selbst. Sobald eine Gruppe von
Ebenen als Ganzes durchsichtig wird, muss der Browser sie in jedem Einzel-
bild in einen Zwischenpuffer zeichnen; bei vier grossen weichgezeichneten
Ebenen kostet das die ersten Sekunden nach dem Laden spürbar Leistung —
genau dann, wenn ohnehin alles zum ersten Mal entsteht. */
body::after {
inset: 0;
background: var(--bg);
animation: unveil 2.6s var(--ease-out) both;
}
@keyframes unveil {
from { opacity: 1; }
to { opacity: 0; }
}
/* Feines Rauschen ganz oben auf dem Hintergrund. Ein Verlauf, der über den
halben Bildschirm nur wenige Helligkeitsstufen durchläuft, zeigt bei 8 Bit
sichtbare Streifen; das Rauschen verwischt die Stufenkanten, sodass das
Auge sie zu einem stufenlosen Verlauf mittelt. Liegt hinter allem Inhalt,
die Fotos bleiben also unangetastet. */
html::after {
inset: 0;
opacity: 0.085;
/* Zwei Korngrössen: das feine Korn bricht harte Stufenkanten auf, das
grobe arbeitet gegen die breiten, sehr flachen Verläufe — dort liegen
die Stufen so weit auseinander, dass feines Korn sie nicht erreicht. */
/* Aufbau je Kachel: Rauschen erzeugen, den Rotkanal auf alle Kanäle und
auf Alpha legen, dann hart trennen — dunkle Werte werden schwarz, helle
weiss, die Mitte durchsichtig. Ergibt echtes Korn aus hellen und dunklen
Punkten statt eines grauen Schleiers, ohne den Grundton aufzuhellen. */
background-image:
url("data:image/svg+xml,"),
url("data:image/svg+xml,");
background-size: 240px 240px, 420px 420px;
background-repeat: repeat;
/* Das Korn steht nicht still, sondern springt wie Filmkorn von Bild zu
Bild. Nebenbei arbeitet es dadurch besser gegen Banding: das Auge
mittelt über die Zeit, nicht nur über die Fläche. */
animation: grain 0.34s steps(1, end) infinite;
}
/* Zehn Sprünge pro Runde — die Versätze sind bewusst keine Vielfachen der
Kachelbreite, damit jedes Einzelbild ein anderes Korn zeigt */
@keyframes grain {
0% { background-position: 0px 0px, 0px 0px; }
10% { background-position: -47px 19px, 63px -37px; }
20% { background-position: 83px -61px, -91px 28px; }
30% { background-position: -113px -29px, 17px 113px; }
40% { background-position: 31px 107px, -137px -71px; }
50% { background-position: -79px 67px, 109px 53px; }
60% { background-position: 137px 43px, -43px -119px; }
70% { background-position: -23px -101px, 151px 19px; }
80% { background-position: 97px -13px, -67px 97px; }
90% { background-position: -59px 89px, 79px -47px; }
}
/* Grundschwaden darunter — wandern quer zu beiden Wellenzügen und sorgen
dafür, dass dieselbe Stelle nie zweimal gleich hell ist */
html::before {
background:
radial-gradient(42vmax 30vmax at 28% 32%, rgba(255, 255, 255, 0.055), transparent 70%),
radial-gradient(48vmax 34vmax at 76% 72%, rgba(255, 255, 255, 0.045), transparent 72%),
radial-gradient(26vmax 40vmax at 54% 8%, rgba(255, 255, 255, 0.03), transparent 74%);
filter: blur(55px);
animation: swell 38s ease-in-out infinite alternate;
}
/* Beim Aufrufen der Seite ist alles schwarz; der Hintergrund entsteht erst */
@keyframes appear {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes swell {
from { transform: translate3d(-3%, -2%, 0) scale(1); }
to { transform: translate3d( 4%, 3%, 0) scale(1.08); }
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible {
outline: 1px solid var(--fg);
outline-offset: 4px;
}
/* Kleine Grossbuchstaben-Labels — das wiederkehrende Detail der Seite */
.eyebrow, .nav-links a, .wordmark, .site-footer, .label {
font-size: 0.64rem;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 300;
}
/* Alle grossen Überschriften: fein, kursiv, geschwungen */
h1, h2, .title, .name {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
}
/* ─── Header ─────────────────────────────────────────────────── */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-h);
padding: 0 var(--pad-x);
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
background: linear-gradient(to bottom,
rgba(10, 10, 11, 0.88) 0%,
rgba(10, 10, 11, 0.55) 55%,
rgba(10, 10, 11, 0) 100%);
pointer-events: none;
animation: appear 1.8s var(--ease) 0.35s both;
}
.site-header > * { pointer-events: auto; }
.wordmark {
color: var(--fg);
transition: opacity 0.3s var(--ease);
}
.wordmark:hover { opacity: 0.6; }
.nav-links {
display: flex;
gap: 34px;
}
.nav-links a {
position: relative;
color: var(--muted);
padding: 4px 0;
transition: color 0.3s var(--ease);
}
.nav-links a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.is-current { color: var(--fg); }
/* Hamburger — nur mobil */
.hamburger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 13px;
background: none;
border: none;
cursor: pointer;
z-index: 120;
}
.hamburger span {
display: block;
height: 1px;
width: 100%;
background: var(--fg);
transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
/* ─── Footer ─────────────────────────────────────────────────── */
.site-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 26px var(--pad-x);
color: var(--faint);
border-top: 1px solid var(--line);
animation: appear 2s var(--ease) 1.1s both;
}
.site-footer a { transition: color 0.3s var(--ease); }
.site-footer a:hover { color: var(--fg); }
/* ─── Mobiles Menü ───────────────────────────────────────────── */
@media (max-width: 700px) {
:root { --header-h: 58px; }
.hamburger { display: flex; }
.nav-links {
position: fixed;
inset: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(10, 10, 11, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s var(--ease), visibility 0.4s;
z-index: 110;
}
.nav-links a {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 2.2rem;
letter-spacing: 0.02em;
text-transform: none;
color: var(--fg);
padding: 12px 0;
}
.nav-links a::after { display: none; }
body.nav-open { overflow: hidden; }
body.nav-open .nav-links { opacity: 1; visibility: visible; }
body.nav-open .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}