/* ========================================================================= Räumliche Fassung: driftende Farbebenen und vertikales Poster-Laufband. Ergänzt stil.css, ersetzt es nicht. Ohne diese Datei bleibt die Seite die ruhige Grundfassung. Zwei Fassungen, über eine Klasse am geschaltet: .fassung-tiefe Tiefe in der Akzentfläche, Satz bleibt auf ruhigem Grund .fassung-nebel Nebelraum über die ganze Seite Bewegt wird ausschließlich mit transform. Unschärfe steckt in den Texturen, nicht in einem CSS-Filter: filter:blur() auf großen Flächen wird in jedem einzelnen Bild neu gerechnet und bricht auf schwächeren Geräten ein. ========================================================================= */ /* ------------------------------------------------------------ Ebenenraum */ .raum { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; } .ebene { position: absolute; background-repeat: no-repeat; background-size: 100% 100%; will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; } /* Farben laufen wirklich ineinander statt sich nur zu überlagern: auf Schwarz addiert screen, auf Weiß zieht multiply zusammen. */ html[data-theme="dunkel"] .ebene { mix-blend-mode: screen; } html[data-theme="hell"] .ebene { mix-blend-mode: multiply; } /* ------------------------------------------- Fassung: Tiefe in der Fläche */ /* Drei Ebenen im Bereich der Akzentfläche. Sie franst weiter aus als in der Grundfassung, die hinteren Ebenen laufen tiefer in den Weißraum. */ .fassung-tiefe .ebene { top: -12vh; height: 128vh; left: 0; } .fassung-tiefe .ebene--1 { width: calc(var(--spine) * 1.75); opacity: .70; } .fassung-tiefe .ebene--2 { width: calc(var(--spine) * 1.40); opacity: .82; } .fassung-tiefe .ebene--3 { width: calc(var(--spine) * 1.10); opacity: .95; } html[data-theme="hell"] .fassung-tiefe .ebene--1 { background-image: url("wolke1_hell.webp"); } html[data-theme="hell"] .fassung-tiefe .ebene--2 { background-image: url("wolke2_hell.webp"); } html[data-theme="hell"] .fassung-tiefe .ebene--3 { background-image: url("wolke3_hell.webp"); } html[data-theme="dunkel"] .fassung-tiefe .ebene--1 { background-image: url("wolke1_dunkel.webp"); } html[data-theme="dunkel"] .fassung-tiefe .ebene--2 { background-image: url("wolke2_dunkel.webp"); } html[data-theme="dunkel"] .fassung-tiefe .ebene--3 { background-image: url("wolke3_dunkel.webp"); } /* Die feste Grundfläche aus stil.css bleibt als vorderste, scharfe Ebene stehen und gibt der Bewegung einen ruhenden Bezugspunkt. */ .fassung-tiefe .kante { z-index: 1; opacity: .92; } /* ------------------------------------------------ Fassung: Nebelraum */ /* Große, weit überstehende Schwaden über die ganze Fläche. Der Überstand verhindert, dass beim Verschieben eine Kante in den Sichtbereich läuft. */ .fassung-nebel .ebene { left: -22vw; width: 144vw; top: -26vh; height: 152vh; } .fassung-nebel .ebene--1 { opacity: 1; } .fassung-nebel .ebene--2 { opacity: .92; } .fassung-nebel .ebene--3 { opacity: .84; } html[data-theme="hell"] .fassung-nebel .ebene--1 { background-image: url("nebel1_hell.webp"); } html[data-theme="hell"] .fassung-nebel .ebene--2 { background-image: url("nebel2_hell.webp"); } html[data-theme="hell"] .fassung-nebel .ebene--3 { background-image: url("nebel3_hell.webp"); } html[data-theme="dunkel"] .fassung-nebel .ebene--1 { background-image: url("nebel1_dunkel.webp"); } html[data-theme="dunkel"] .fassung-nebel .ebene--2 { background-image: url("nebel2_dunkel.webp"); } html[data-theme="dunkel"] .fassung-nebel .ebene--3 { background-image: url("nebel3_dunkel.webp"); } /* Im Nebelraum entfällt der seitliche Streifen, sonst stünde eine Kante mitten im Raum. */ .fassung-nebel .kante { display: none; } .fassung-nebel .huelle { padding-left: clamp(24px, 6vw, 96px); } /* Ruhe hinter dem Satz. Keine Platte hinter der Textspalte: die hätte zwangsläufig zwei senkrechte Kanten, und genau die soll es in diesem Stil nicht geben. Stattdessen liegt ein bildschirmfüllendes Feld über den Wolken, das in der Mitte deckt und noch **innerhalb** des Sichtfensters vollständig auf null geht. Die Radien sind dafür so gewählt, dass der Verlauf am Fensterrand bereits transparent ist (62 Prozent Breite gegen 50 Prozent Abstand zur Kante) — sonst stünde an der Elementkante eine sichtbare Stufe. */ .beruhigung { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; background: radial-gradient( 62% 54% at 50% 46%, var(--papier) 0%, color-mix(in srgb, var(--papier) 90%, transparent) 34%, color-mix(in srgb, var(--papier) 58%, transparent) 62%, transparent 82%); } .fassung-nebel .beruhigung { display: block; } /* Ohne color-mix (ältere Browser) ein einfacher, ebenso weicher Verlauf. */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .beruhigung { background: radial-gradient(62% 54% at 50% 46%, var(--papier) 0%, transparent 82%); opacity: .88; } } /* Im Nebelraum steht die Kachelflaeche durchscheinend, damit der Raum hinter ihr weiterlaeuft. Unter deckenden Plakaten sieht man das nicht mehr; die Regel bleibt, weil sie den gemessenen Zustand haelt und nichts kostet. */ .fassung-nebel .kachel { background: color-mix(in srgb, var(--flaeche) 55%, transparent); } /* --------------------------------------------------------- Poster-Laufband Eine Reihe, waagerecht. Bis zum 22.08.2026 waren es drei senkrechte Spuren nebeneinander; das war unruhig und lief auf schmalen Geraeten in zwei Zeilen um. Eine Reihe liest sich wie ein Filmstreifen und braucht ein Drittel der Hoehe. Die Hoehe gibt den Ton an: die Kacheln stehen auf 2:3, ihre Breite folgt also aus der Hoehe. */ .laufband { position: relative; height: clamp(210px, 30vh, 330px); overflow: hidden; /* Weiches Auslaufen links und rechts statt einer Schnittkante. */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); } /* Ein echter Scrollbereich, kein animierter Block. Weitergeschoben wird er von einem Laufwerk in raum.js — damit gilt beides zugleich: man kann wischen, ziehen und mit der Tastatur hinein, und wenn niemand anfasst, laeuft es von allein weiter. Die Leiste bleibt verborgen: das weiche Auslaufen an den Raendern und die Bewegung sagen deutlich genug, dass hier etwas laeuft. */ .spur { position: relative; height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* Kein scroll-behavior: smooth — das Laufwerk schreibt jedes Bild einen neuen Wert, und eine weiche Anfahrt darauf ergaebe ein Zittern. */ overscroll-behavior-x: contain; } .spur::-webkit-scrollbar { display: none; } /* Beim Ziehen mit der Maus soll kein Bild aus dem Band gerissen werden. */ .spur[data-zieht] { cursor: grabbing; } .spur img { -webkit-user-drag: none; user-select: none; } /* Der Satz steht im Markup zweimal. Sobald der Bereich die Haelfte seiner Breite durchlaufen hat, zieht das Laufwerk genau diese Haelfte ab — der zweite Satz steht dann da, wo der erste stand. */ .spur__band { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: clamp(10px, 1.2vw, 18px); height: 100%; width: max-content; } /* Die Kachel bekommt ihre Breite aus der Hoehe, nicht aus einer Rasterspalte: in einer waagerechten Reihe gibt es keine Spalten mehr. */ .laufband .kachel { height: 100%; width: auto; aspect-ratio: 2 / 3; } .laufband__hinweis { margin-top: .7rem; color: var(--text-3); font-size: var(--schrift-label); font-weight: 500; letter-spacing: var(--sperr-label); text-transform: uppercase; } /* ----------------------------------------------------- Rücksicht und Fallback */ @media (prefers-reduced-motion: reduce) { .ebene { transform: none !important; } /* Ohne Bewegung laeuft das Laufwerk nicht an (siehe raum.js). Geschoben werden kann weiterhin — dann aber sichtbar, mit Leiste. */ .spur { scrollbar-width: thin; } .spur::-webkit-scrollbar { display: block; height: 6px; } .laufband { -webkit-mask-image: none; mask-image: none; } } /* Auf schmalen Geräten kostet die Bewegung Akku und bringt wenig. */ @media (max-width: 720px) { /* Eine Reihe bleibt eine Reihe, nur flacher. */ .laufband { height: clamp(170px, 26vh, 230px); } .fassung-tiefe .ebene { height: 100vh; top: 0; } }