/* ============================================================ DRKNSD — Styles v5 Schwarz / Weiss. Eckig, harte Kanten, keine Rundungen. Reduziert auf Hero + Projektnamen. Keine Trennlinien, keine kleinen Beitexte. Eine Schriftstaerke fuer alles. v5: EINE Bewegungskurve und drei Zeitstufen fuer die ganze Seite, alle Abstaende auf dem 4/8er Raster. Typografie, Farben und Kantenhaerte bleiben unveraendert. ============================================================ */ :root { color-scheme: dark; --bg: #000000; --fg: #ffffff; --dim: #6f6f6f; --soft: #d6d6d6; --void: #050505; --scrim: 0, 0, 0; --scrim-top: 0.4; --scrim-bottom: 0.5; --logo-invert: 0; /* Satzbreite der Seite. Bis 15.09.2026 ein fester Riegel von 1600px: auf einem breiten Schirm standen Hero und Werkliste ueber die volle Breite, alles dazwischen (Latest Projects, Selected Works, die Projektseiten, die Fussmarke) blieb in diesem Riegel stehen und sass als schmales Band in der Mitte (Leon 01.10.2026: "die Hero-Seite sehr breit und die Portfolio Section sehr breit und dann die Sachen dazwischen haben quasi eine fixe Breite ... waere geil wenn das auch sich dann groesser skalieren wuerde, also wenn die Videos dann groesser werden wuerden"; zur Fussmarke: "die ist auch so eingerueckt, sollte aber alles einheitlich sein"). Jetzt waechst das Mass mit dem Fenster. Die untere Schranke von 1600px haelt alle Fenster bis 1684px exakt auf dem alten Stand — dort war nie der Riegel wirksam, sondern der Seitenrand, und ein kleineres Mass wuerde die Seite dort schmaler machen statt breiter. Die obere Schranke steht, damit Fliesstext auch auf einer Leinwand lesbar bleibt; die Textspalten haben darueber hinaus ihre eigenen ch-Grenzen. */ --maxw: clamp(1600px, 95vw, 2400px); /* Eine Kurve fuer alles, damit die Seite als ein Koerper reagiert */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 200ms; --t-base: 300ms; --t-slow: 400ms; --pad: 24px; /* Hoehe der Marke oben rechts auf den Unterseiten (30px Bild + 2x4px Polster). Der Film darunter rechnet seinen Abstand daraus, damit er auf keiner Unterseite unter Back und Marke laeuft (Leon 02.10.2026: "so ruecken, dass das Logo und das Back nicht ins Video reinragt bei keiner der Unterseiten"). */ --head-h: 38px; /* ---- Abstandsleiter ---- Leon 13.08.: "Check mal alle Spaces zwischen den Seiten ist das alles Apple Design konform von den Abstaenden etc? Teilweise etwas unbalanciert." Er hat recht, und der Grund war messbar: die Sektionen standen auf drei verschiedenen Systemen gleichzeitig. Latest rechnete in vh (7vh/8vh), die Unterseiten in vw (8vw/10vw), Works in festen Prozent der Hoehe, dazu einzelne feste Werte. vh und vw wachsen aber in verschiedene Richtungen — auf einem breiten, flachen Laptopschirm wurde der eine Abstand gross und der andere klein, obwohl beide dasselbe trennen sollten. Genau das liest sich als unbalanciert. Jetzt eine Leiter, eine Achse (Breite), alle Endwerte Vielfache von 8. Vier Stufen reichen fuer die ganze Seite: --gap-s Bloecke innerhalb einer Sektion --gap-m zusammengehoerende Sektionen --gap-l Regelabstand zwischen zwei Sektionen --gap-xl die grosse Zaesur */ --gap-s: clamp(24px, 3vw, 48px); --gap-m: clamp(40px, 5vw, 72px); --gap-l: clamp(64px, 8vw, 120px); --gap-xl: clamp(96px, 12vw, 176px); /* Kantenlaenge des Wuerfel-Hosts. Steht hier, weil sich die Zeile unter dem Wuerfel daran haengt: schriebe man das Mass zweimal, liefe der Abstand beim naechsten Anfassen auseinander. */ /* Deckel von 820 auf 1040 (01.10.2026, Leon: "wenn wir es relativ breit anschauen ... dass sich das alles so sauber skaliert"). Der Wuerfel muss in die Fensterhoehe passen, deshalb bleibt vmin das Mass — auf einem breiten, flachen Schirm bindet ohnehin die Hoehe und es aendert sich nichts. Nur auf hohen grossen Schirmen stand vorher der Deckel im Weg und der Wuerfel blieb klein, waehrend ringsum alles mitwuchs. */ --cube-size: clamp(320px, 68vmin, 1040px); /* Typo aus dem Logo (Leon 12.08.: "die haupt schriftart soll die gleiche sein wie das drknsd logo"). Die Wortmarke im Logo wurde gegen die schweren kursiven Grotesken gemessen: Umriss von DRKNSD auf gleiche Hoehe und Breite normiert und die Deckung gerechnet. Figtree Black Italic deckt 0,82, Inter 0,80, Montserrat nur 0,72 — Montserrat war also wirklich die falsche Familie und ist raus. Alles auf der Seite laeuft in dieser Familie, nur in zwei Staerken. */ --font: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Nur fuer die technische Kleinstbeschriftung an der Hero. Monospace, damit Ziffern in einer festen Spur laufen und der hochzaehlende Counter nicht zappelt. */ /* Martian Mono statt Roboto Mono (Leon 07.08.: "zu rund und zu duenn, wir wollen eher was Eckiges, Kantiges"). Gerade Abstriche, flache Bogen, quadratische Punzen — liest sich als Geraetebeschriftung. Im schmalen Schnitt (wdth 75), sonst ist die neunstellige Zahl breiter als der Wuerfel. */ --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Bright Side: gleiche Seite, gedrehte Werte. Alles laeuft ueber diese Variablen, deshalb kippt der Schalter die komplette Seite auf einmal. */ html.bright { /* Muss mitwandern. Stand vorher nur einmal fest auf `dark` in :root, also hat der Bright Mode dem System weiter "diese Seite ist dunkel" gemeldet — iOS hat die Statusleiste dann in Weiss beschriftet, auf einer weissen Seite (Leon 25.08.2026). */ color-scheme: light; --bg: #ffffff; --fg: #000000; --dim: #9b9b9b; --soft: #2e2e2e; --void: #f2f2f2; --scrim: 255, 255, 255; /* Oben kraeftiger, damit Logo, Navigation und Schalter in Schwarz auch ueber dem dunklen Hero-Bild lesbar bleiben. */ --scrim-top: 0.82; --scrim-bottom: 0.35; --logo-invert: 1; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Die Grundfarbe steht auf html UND body. iOS malt den Bereich hinter der Statusleiste und den Ueberzug beim Verscrollen aus der Wurzel, und wenn dort nichts Deckendes steht, nimmt Safari Weiss. overscroll-behavior nimmt den Gummizug am oberen Rand ganz heraus. Genau der hat Leon den weissen Streifen gezeigt (25.08.: "wenn ich auf der Webseite hochscrolle, dann sieht man auch einen weissen Hintergrund"). Ohne Gummizug gibt es keine Flaeche mehr, die ueber dem Dokument aufgehen und etwas anderes zeigen koennte. */ html { -webkit-text-size-adjust: 100%; background: var(--bg); overscroll-behavior-y: none; } body { background: var(--bg); color: var(--fg); font-family: var(--font); font-weight: 700; line-height: 1.35; overflow-x: hidden; overscroll-behavior-y: none; /* Bis zur Unterkante der Notch-Region durchziehen. Ohne viewport-fit und dieses Polster sass die Kopfzeile darunter und darueber blieb eine fremde Flaeche stehen. */ min-height: 100svh; -webkit-font-smoothing: antialiased; transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease); } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; } /* Kleintext-Basis: gleiche Familie, gleiche Schraege, nur kleiner. Ersetzt die duenne, weit gesperrte Variante aus v3. */ .ui { font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.02em; } /* Magnetischer Cursor blendet den System-Cursor aus (nur Desktop, per JS-Klasse) Die Liste war abzaehlbar: body, a, .magnetic. Alles andere behielt seinen eigenen Zeiger — Knoepfe und der Modus-Schalter bekommen vom Browser `cursor: pointer`, Textbloecke `text`, der Wuerfel-Host `grab`. Beim Fahren ueber diese Stellen blitzte der echte Zeiger auf, obwohl nur das Viereck zu sehen sein soll (Leon 01.10.2026: "irgendwie sieht man beim Bewegen manchmal so den richtigen Cursor, da soll man ja eigentlich nur das Viereck sehen"). Jetzt deckt die Regel jedes Element ab. `!important` ist noetig, weil einzelne Bausteine ihren Zeiger selbst setzen (z.B. `.mode-switch` mit `cursor: pointer`, `.hero-cube` mit `grab`) und dabei die hoehere Spezifitaet haben. Der Griff-Zeiger am Wuerfel faellt damit weg — das Viereck ist der Zeiger der Seite, das ist Absicht. */ body.cursor-on, body.cursor-on * { cursor: none !important; } /* Waehrend des Intros wird nicht gescrollt */ body.intro-lock { overflow: hidden; } /* ---------- Streifen hinter der Statusleiste ---------- Die Seite laeuft mit `viewport-fit=cover` bis unter die Notch. Welche Farbe iOS dort zeigt, haengt sonst allein an `theme-color`, und darauf ist kein Verlass: Safari zieht den Wert beim Umschalten nicht immer nach, dann steht ueber einer schwarzen Seite ein weisser Balken (Leon 25.08.2026: "dieser weisse Bereich oben sieht Kacke aus, muss immer je nach Schalter im Ton der Seite"). Deshalb malt die Seite den Streifen selbst, in `var(--bg)`. Damit folgt er dem Schalter zwangslaeufig und blendet mit derselben Kurve um wie der Rest. z-index 300 liegt ueber allem, auch ueber der Intro-Ebene (200) — sonst waere der Streifen genau waehrend der Startanimation wieder fremd. Auf Geraeten ohne Notch ist `env(safe-area-inset-top)` gleich 0, dann ist der Streifen nicht da. */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 300; pointer-events: none; transition: background-color var(--t-slow) var(--ease); } /* ============================================================ Intro — Wuerfel Kleines schwarzes Viereck wackelt, dreht sich in die Tiefe, wird als Wuerfel lesbar, rast auf den Betrachter zu und entlaesst ihn in der Hero. ============================================================ */ .intro { position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* kein inset-Shorthand: iOS < 14.5 kennt es nicht */ z-index: 200; background: #000000; /* schwarz — Safe-Area-Streifen oben/unten bleiben so dunkel */ transition: opacity var(--t-slow) var(--ease); } .intro.done { opacity: 0; pointer-events: none; } .intro.off { display: none; } /* Waehrend der Drehung faehrt die Kopfzeile schon mit ein, also muss sie in dieser Zeit ueber dem Intro liegen statt darunter (Leon 13.08.). Danach nimmt intro.js Klasse und Inline-Werte wieder weg und die Leiste sitzt wie immer auf ihrer eigenen Ebene. */ .topbar.intro-riding { z-index: 205; } /* Cube-Animation laeuft auf einem Canvas-Element (per JS erzeugt). Kein CSS preserve-3d — iOS Safari unterstuetzt es nicht zuverlaessig. */ /* ---------- Koernung ueber der ganzen Seite ---------- Liegt ueber allem Inhalt (hoechster Inhalts-z-index ist 60), aber unter dem Box-Cursor (100) und dem Intro (200) — der Zeiger soll scharf bleiben. Die Kachel baut grain.js einmal und haengt sie als Hintergrundbild an, hier steht nur Lage und Staerke. Der Mischmodus ist NICHT beliebig. overlay stand hier zuerst und war auf dieser Seite wirkungslos: overlay rechnet unterhalb der Mitte 2 mal Grundwert mal Auflage, und der Grundwert ist hier reines Schwarz. Null mal irgendwas bleibt null — gemessen kam auf den dunklen Flaechen exakt 0,00 Streuung heraus, also gar kein Korn. Dasselbe gilt fuer soft-light und multiply auf Schwarz. Deshalb: screen auf der dunklen Seite, das kann Schwarz aufhellen. Auf der hellen Seite kann screen umgekehrt nichts mehr ausrichten (Weiss bleibt Weiss), dort traegt multiply das Korn. */ .page-grain { position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* Ueber der Intro-Ebene (200), nicht darunter. Lag das Korn nur auf der Seite, fehlte es waehrend der Startanimation und kam in dem Moment dazu, in dem die Intro-Ebene weggenommen wird — gemessen ein Sprung von 4 bis 9 Stufen ueber die ganze Flaeche. Klein, aber auf einem glatten Verlauf sichtbar, und es war der letzte Rest des Uebergangs (Leon 01.09.). */ z-index: 210; pointer-events: none; mix-blend-mode: screen; opacity: 0.055; background-repeat: repeat; } html.bright .page-grain { mix-blend-mode: multiply; opacity: 0.045; } /* ---------- Magnetischer Box-Cursor ---------- */ .box-cursor { position: fixed; top: 0; left: 0; width: 16px; height: 16px; /* Immer weiss: der difference-Blend dreht ihn auf der Bright Side automatisch nach schwarz. Mit var(--fg) waere er dort unsichtbar. */ border: 1.5px solid #ffffff; z-index: 100; pointer-events: none; transform: translate(-50%, -50%); /* Breite und Hoehe stehen hier BEWUSST nicht mehr im transition. cursor.js setzt sie jeden Frame neu und faehrt sie selbst weich nach; eine CSS-Blende darueber laeuft der eigenen Nachfuehrung hinterher und addiert ihre 200ms obendrauf. Genau das war das zaehe Gefuehl beim Zurueckschnappen (Leon 11.08.: "dauert zu lange, besonders zurueck auf Cursorgroesse"). */ transition: border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); mix-blend-mode: difference; } .box-cursor.hidden { opacity: 0; } /* ---------- Top Bar ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: var(--pad); padding-top: max(var(--pad), env(safe-area-inset-top)); /* Die Leiste liegt ueber die volle Breite, ist aber bis auf Logo und Navigation durchsichtig. Ohne das fing sie nach dem Sprung auf WORKS die Maus ueber der ersten Namenszeile ab (14.09.2026: GG Poker, Deutschland, Adieu liessen sich nicht hovern). */ pointer-events: none; /* Faehrt beim Runterscrollen aus dem Bild und beim Hochscrollen wieder ein (topbar.js setzt is-away). Stand bis 01.10.2026 nur am Handy, jetzt auf jeder Breite (Leon: "kannst du diese Header-Sektion beim Runterscrollen verschwinden lassen und beim Hochscrollen wieder auftauchen lassen"). Nur transform und opacity, damit im Layout nichts springt. */ transition: transform 360ms var(--ease), opacity 260ms var(--ease); will-change: transform; } .topbar.is-away { transform: translateY(-110%); opacity: 0; pointer-events: none; } .topbar a, .topbar button, .topbar .magnetic { pointer-events: auto; } /* Marke und Navigation stehen negativ zu dem, was hinter ihnen liegt (Leon 01.10.2026: "es waere auch nicht schlecht wenn Works und Contact und das Logo auch so negativ sind, wenn es auf schwarz ist dass es dann hell wird, weil sonst wird es manchmal einfach schlecht zu sehen, besonders wenn man die Videos jetzt darueber hat"). difference statt einer Modusabfrage: die Leiste liegt ueber Filmen und ueber der Seite, und nur der Blend rechnet gegen das, was wirklich dahinter liegt. Eine Umschaltung nach Modus traf den Fall Video nicht — im Bright Mode stand die schwarze Marke auf dunklem Bild. Darum sind Schrift und Logo hier fest weiss: difference dreht Weiss auf hellem Grund selbst nach Schwarz. Waere das Logo schon schwarz (mode.js tauscht die Datei), kaeme auf weissem Grund wieder Weiss heraus. Die Umschaltung in mode.js ueberspringt die Kopfzeile deshalb. Bekannte Grenze: auf mittlerem Grau wird der Unterschied klein. */ .topbar { mix-blend-mode: difference; } .topbar nav a { color: #ffffff; } .topbar .logo-box img { filter: none; } /* Ohne Kasten (Leon 11.08.: "kasten um das drknsd braucht man nicht oben im header"). Das Zeichen ist selbst schon ein Rahmen, der zweite drumherum war ein Rahmen um einen Rahmen. Das Polster bleibt, sonst klebt die Marke an der Bildkante. */ .logo-box { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 12px; line-height: 0; gap: 5px; } /* Das Original-Lockup traegt den Schriftzug selbst, deshalb steht darunter kein getippter Text mehr (Leon 11.08.: "nutz ueberall das original logo was ich dir gegeben habe"). Es ist hochformatig, bei den alten 24px waere es keine 21px breit und der Schriftzug nicht mehr lesbar — daher ueber die Hoehe groesser gestellt. */ .logo-box img { height: 46px; width: auto; display: block; } .topbar nav { display: flex; gap: 8px; } .topbar nav a { display: inline-block; padding: 8px 12px; font-size: 13px; font-weight: 800; font-style: italic; letter-spacing: 0.02em; text-transform: uppercase; } /* ---------- Hero ---------- */ .hero { position: relative; height: 100vh; height: 100svh; width: 100%; overflow: hidden; } .hero .hero-room, .hero .hero-fallback { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } /* Das Fallback liegt im DOM nach dem Raum und wuerde ihn sonst verdecken. Es ist nur die Grundfarbe darunter. */ .hero .hero-room { z-index: 1; display: block; } /* Der Lichtschein liegt ueber dem Wuerfel (z-index 3), aber vor den Beschriftungen (4) — die stehen im DOM danach und bleiben damit obenauf, sonst wuerde der Schein ueber die FIG-Zeilen laufen. screen statt normalem Auftragen: der Schein soll ADDIEREN, sonst legt er nur einen milchigen Schleier ueber den Wuerfel. */ .hero .hero-glow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 4; display: block; pointer-events: none; mix-blend-mode: screen; } .hero .hero-fallback { background: var(--void); z-index: 0; } .hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; /* ueber dem Video, unter dem Logo */ background: linear-gradient(180deg, rgba(var(--scrim),var(--scrim-top)) 0%, rgba(var(--scrim),0) 35%, rgba(var(--scrim),var(--scrim-bottom)) 100%); pointer-events: none; } /* Uebergang Hero -> Works: der Nullraum ist unten noch aufgehellt, die Works-Sektion beginnt in var(--bg). Ohne Verlauf steht dort ein klarer Strich (Leon 07.08.). Diese Blende faehrt die untere Haelfte der Hero genau auf --bg herunter, also exakt auf die Farbe des naechsten Abschnitts. Zwei Stopps in der Mitte biegen die Kurve, sonst liest sich der lineare Abfall selbst wieder als Kante. */ .hero::before { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 55%; z-index: 2; /* Die Blende darf erst spaet zupacken: der Schatten des Wuerfels liegt bei rund 73% dieser Bahn und wurde von der alten Kurve zu drei Vierteln weggeloescht (Leon 07.08.: "man sieht den irgendwie nicht mehr"). Der Endpunkt bleibt exakt --bg, die Kante zur Works-Sektion ist also weiterhin zu. */ background: linear-gradient(180deg, rgba(var(--scrim), 0) 0%, rgba(var(--scrim), 0.12) 50%, rgba(var(--scrim), 0.45) 76%, var(--bg) 100%); pointer-events: none; } /* Wuerfel zentriert in der Hero, an der Stelle wo vorher das Logo stand. Quadratisch, damit die Perspektive nicht kippt. */ .hero-cube { position: absolute; top: 50%; left: 50%; /* --bob setzt room.js, --scroll-s und --scroll-y ebenfalls. Scale laeuft beim Scrollen von 1.0 auf ~0.68, damit der Wuerfel kleiner wird wenn der User nach unten scrollt (Leon 11.08.2026). */ transform: translate(-50%, -50%) translateY(var(--bob, 0px)) translateY(var(--scroll-y, 0px)) scale(var(--scroll-s, 1)); z-index: 3; width: var(--cube-size); height: var(--cube-size); /* Der Wuerfel nimmt die Geste selbst an, ringsum bleibt gescrollt */ touch-action: none; -webkit-tap-highlight-color: transparent; } /* Keine Greifhand. Auf dieser Seite gibt es genau einen Zeiger, den Kasten — ein zweiter Systemcursor ueber dem Wuerfel bricht das (Leon 11.08.: "da soll nur der Kasten Cursor sein"). Dass der Wuerfel greifbar ist, zeigt er selbst: er nimmt beim Hovern Fahrt auf und skaliert an. */ /* Die Skalierung liegt auf dem Canvas, nicht auf dem Host: der Host traegt bereits das Zentrier-translate und wuerde davon springen. */ .hero-cube .cube-canvas { display: block; width: 100%; height: 100%; /* Gaussische Unschaerfe: nur ein Hauch, der Wuerfel soll plastisch wirken und nicht unscharf (Leon 07.08.: 1.2px war zu stark). */ filter: blur(0.4px); transition: transform var(--t-base) var(--ease), filter var(--t-base) var(--ease); } /* Hover: der Wuerfel nimmt die Naehe des Zeigers an, bevor man greift. Klein gehalten, es ist ein Hinweis auf Greifbarkeit, kein Effekt. */ @media (hover: hover) and (pointer: fine) { .hero-cube.hot .cube-canvas { transform: scale(1.03); } } /* Die Videoquelle haengt im DOM, damit iOS sie dekodiert, ist aber nicht zu sehen — sichtbar wird sie nur als Textur im WebGL. */ .hero-cube .cube-video-src { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Ohne WebGL bleibt die Wortmarke stehen */ .hero-cube.cube-fallback { background: url("../media/drknsd_logo_white.png") center / contain no-repeat; filter: invert(var(--logo-invert)); } /* Kein Invert-Filter mehr: mode.js laedt die passende Originaldatei (weiss oder schwarz). Invertieren stimmte nur solange das Logo auf der Seitenfarbe liegt — auf der Projektseite sitzt es ueber dem Film und wurde im Bright Mode schwarz auf schwarz (Leon 11.08.). Ueber Medien traegt es einen weichen Schatten, damit es auf hellen wie dunklen Bildern steht. */ .logo-box.on-media img { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)) drop-shadow(0 4px 10px rgba(0,0,0,0.35)); } /* Leon 02.10.2026: "das Back und Dark and Side Logo nimmt noch zu viel Platz ein". Die Marke auf den Unterseiten stand auf derselben Hoehe wie im Kopf der Startseite und schob sich am Handy ueber das Video. Auf den Unterseiten steht sie frei im Bild und darf kleiner sein, auf der Startseite bleibt sie wie sie ist. --head-h rechnet die Hoehe fuer den Abstand zum Film weiter unten. */ .logo-box.on-media { padding: 4px 6px; mix-blend-mode: difference; } /* Gleiche Begruendung wie beim Back-Knopf und wie in der Kopfzeile der Startseite: die Marke steht fest ueber der Seite und laeuft beim Scrollen von schwarzem Filmbereich auf die helle Platte. Mit den Schlagschatten blieb dort ein grauer Kasten stehen. mode.js laesst on-media bewusst weiss, difference dreht sie auf hellem Grund selbst nach schwarz. */ .logo-box.on-media img { height: 30px; filter: none; } /* ---------- Works / Textwand ---------- */ /* Die Werkliste ist so hoch wie ihr Inhalt. Bis 14.09.2026 war sie fest eine Bildschirmhoehe und die Namen standen mittig darin: bei Leons Fenster (1467x1032) blieben ueber und unter dem Block je 182 Punkte Schwarz, zusammen mit dem Abstand der Latest-Sektion 299 Punkte bis zum ersten Namen (Leon: "den Abstand zwischen dieser Latest Projects Region und diesem Portfolio ... finde ich zu gross"). */ .works { position: relative; display: flex; flex-direction: column; overflow: hidden; } /* Alle Projektnamen als ein fliessender Block, vertikal zentriert */ .work-cloud { flex: 1 1 auto; display: flex; align-items: center; padding: var(--gap-s) var(--pad); overflow: hidden; } .work-cloud-inner { width: 100%; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(40px, 6.9vw, 104px); line-height: 0.98; letter-spacing: -0.03em; color: var(--dim); white-space: normal; word-spacing: 0.03em; } /* Kleine Zeile ueber der Werkliste. Nicht alles darin ist eine DRKNSD-Produktion, bei einigen hat Specter Berlin nur Regie gefuehrt (Leon 14.09.2026: "ueber dem Portfolio muss einmal stehen DRKNSD Productions and Works by Specter Berlin ... in klein"). Gleiche Schrift wie die Kopfzeile der Mailzeile. */ .works-kicker { margin: 0; padding: var(--gap-s) var(--pad) 0; font-family: var(--mono); font-stretch: 75%; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); } .work-word { color: var(--dim); transition: color var(--t-base) var(--ease), opacity var(--t-base) var(--ease); white-space: nowrap; /* Stapelreihenfolge gegen das Vorschaufenster (z-index 40): die Namen liegen darunter, der gerade gehoverte darueber. Damit deckt das Video die Wand ab, laesst aber genau das Wort frei, zu dem es gehoert (Leon 11.08.: "wenn das Video das Wort ueberdeckt, soll es hinter dem Wort stehen, ueber den anderen aber drueber"). */ position: relative; z-index: 1; } /* Trenner ist das Hashtag aus der Wortmarke, kursiv und in der Groesse der Projektnamen. */ .work-sep { color: var(--dim); font-style: italic; } /* Der angewaehlte Name leuchtet, der Rest dimmt weiter runter. Das galt bisher nur fuer Zeigergeraete — auf dem Handy waehlt aber der Scroll aus, und dort stand der Name zu dem die Vorschau lief in genau demselben Grau wie alle anderen (Leon 13.08.: "am Handy wenn man durch die Projekte scrollt muss das was angewaehlt ist und von dem eine Vorschau gezeigt wird sich hervorheben durch staerkere Farbe. Klares weis oder schwarz"). var(--fg) ist genau das: reines Weiss im dunklen Modus, reines Schwarz im hellen. */ .work-cloud.has-hover .work-word { opacity: 0.32; } .work-cloud.has-hover .work-word.is-active { opacity: 1; color: var(--fg); z-index: 45; } /* ---------- Hero-Beschriftung links und rechts vom Wuerfel ---------- Klein, ruhig, auf Hoehe der Wuerfelmitte. Links die Views-Zahl aus der YouTube API, rechts die Ortsmarke. */ /* Leon 07.08.2026: "mach diese Texte eher wie so ein Micrographic Ding, nicht so wie Schrift." Micrographics = technische Kleinstbeschriftung als Gestaltungsmittel: Messgeraete, Schaltplaene, Typenschilder. Deshalb Monospace statt der kursiven Hausschrift, Index-Kennung vor jedem Block, Koordinaten als Textur und alles auf einem engen Stapel. Es liest sich als Markierung am Objekt, nicht als Satz. Alles bleibt voll deckend weiss (Leon 07.08.), die Staffelung laeuft ueber Groesse und Laufweite, nicht ueber Graustufen. */ .hero-meta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-stretch: 75%; color: var(--fg); text-transform: uppercase; white-space: nowrap; pointer-events: none; } .hero-meta-left { left: clamp(20px, 5vw, 88px); } .hero-meta-right { right: clamp(20px, 5vw, 88px); text-align: right; align-items: flex-end; } /* Anrisskante ueber dem Block — kurz wie ein Skalenstrich, nicht als Trennlinie durchs Bild. */ .hero-meta::before { content: ""; width: 16px; height: 1px; background: var(--fg); margin-bottom: 4px; } /* Laufweiten deutlich enger als bei Roboto Mono: Martian Mono bringt den Weissraum schon in der Glyphe mit, die alten Werte rissen die Zeilen auseinander. Gewichte eine Stufe hoeher, damit nichts duenn wirkt. */ /* Alles slim (Leon 02.09.: "ich glaub ich wuerde die alle duenn machen. Alles slim und schlank und duenn"): die Micrographics laufen eine Gewichtsstufe leichter, Werte in 500 statt 700. Martian Mono liegt in 500/600/700 vor, leichter geht ohne neue Schriftdatei nicht. */ .meta-tag { font-size: 9px; font-weight: 500; letter-spacing: 0.13em; } /* Die Zahl laeuft sekundenweise hoch. Ohne tabellarische Ziffern wackelt bei jedem Takt die ganze Zeile, weil die 1 schmaler ist als die 8. font-variant-numeric reicht dafuer nicht ueberall, deshalb zusaetzlich das OpenType-Feature direkt. */ .meta-val { font-size: clamp(13px, 1.3vw, 17px); font-weight: 500; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .meta-sub { font-size: 9px; font-weight: 500; letter-spacing: 0.1em; } /* Die mittlere Stufe (.meta-sub--mid, "AND WORKS") ist am 02.10.2026 raus: die Zeile rechts am Wuerfel steht jetzt in EINER Groesse und klappt zwischen ihren beiden Angaben um, siehe index.html und micro.js claimFlap. */ /* Trenner zwischen zwei Angaben: ein Punkt auf halber Hoehe, wie auf einem Typenschild. Als Element statt als Zeichen, damit die Laufweite ihn nicht mitzieht. */ .meta-sep { display: inline-block; width: 3px; height: 3px; margin: 0 8px; background: var(--fg); vertical-align: 0.12em; } /* Waehrend der Wuerfel zurueckfaehrt liegen die Beschriftungsbloecke ueber der Intro-Ebene, damit sie sich schon aufbauen koennen. NUR der z-index wird angehoben, die Position bleibt `absolute`. Hier stand vorher `position: fixed` mit der Annahme, `fixed` sitze in dieser Phase exakt wo `absolute` sass. Das stimmt nur, solange Hero und Viewport gleich hoch sind. Auf dem iPhone ist die Hero 100svh, also OHNE die eingeblendete URL-Leiste, waehrend `fixed` gegen den vollen Viewport rechnet. Die Bloecke sassen dadurch um die Hoehe der URL-Leiste zu tief und sprangen am Intro-Ende nach oben — gemessen 90 Bildpunkte (Leon 25.08.2026: "ein Sprung, als wuerde sich nach der Animation eine Ebene aktivieren"). Der z-index allein reicht: .hero ist zwar position:relative, hat aber z-index auto und keinen Transform, bildet also keinen Stacking Context. Die Kinder konkurrieren direkt mit dem Intro (z-index 200) auf der Wurzelebene. */ .hero-meta.over-intro, .hero-stats.over-intro, .hero-tag.over-intro { z-index: 205; } /* ============================================================ Aufloesung der Wortmarke ueber dem Wuerfel (Leon 03.09.2026, seit 15.09. oben) Sie haengt am selben Mass wie der Wuerfel (--cube-size), damit der Abstand zu seiner Unterkante auf jedem Format derselbe bleibt. Das Schweben und die Verkleinerung beim Scrollen macht sie NICHT mit: diese Variablen setzt room.js am Wuerfel-Host, ein Geschwister kommt nicht an sie heran, und alle anderen Beschriftungen in der Hero stehen aus demselben Grund still. pointer-events: none ist Pflicht, die Zeile liegt im Quadrat des Wuerfel-Hosts und wuerde dort sonst den Griff abfangen. ============================================================ */ .hero-tag { position: absolute; left: 50%; /* Seit 15.09.2026 ueber dem Wuerfel (Leon), spiegelbildlich zur alten Lage unten: die Unterkante der Zeile steht 0.42 der Kantenlaenge ueber der Mitte, die hoechste Ecke des Wuerfels bei 0.414. Herleitung der alten Lage: die tiefste Ecke des Wuerfels steht bei 0.414 dieser Laenge unter der Mitte (Lage: Koerperdiagonale nach unten vorn, bei 1440x900 gemessene 701px gegen 448px Mitte). Weiter oben liefe die Zeile bei jeder Drehung ins Bild, weiter unten steht sie im unteren Panel-Streifen. Der Streifen faengt bei rund Fensterhoehe minus 152px an, das ist auf kurzen Fenstern die engere Grenze, siehe Medienabfrage unten. */ bottom: calc(50% + var(--cube-size) * 0.52); transform: translateX(-50%); z-index: 4; pointer-events: none; text-align: center; opacity: 0; transition: opacity var(--t-slow) var(--ease); } .hero-tag.revealed { opacity: 1; } .hero-tag .meta-tag { /* Eine Spur groesser und heller als die Beschriftungen an den Seiten: sie benennt die Marke selbst, ist also keine Fussnote. Der Abstand zwischen den Zeichen ist der Ton der Seite. */ font-family: var(--mono); font-stretch: 75%; font-size: 9px; font-weight: 500; letter-spacing: 0.13em; text-indent: 0.13em; color: var(--fg); white-space: nowrap; } /* it's DARKINSIDE <-> DRKNSD als Abflugtafel (Leon 15.09.2026): die wegfallenden Buchstaben klappen durch und schrumpfen auf null, der Rest steht still und rueckt mittig zusammen. */ .hero-tag .flap-col { display: inline-block; overflow: hidden; vertical-align: bottom; transition: max-width 0.32s var(--ease), opacity 0.22s var(--ease); } .hero-tag .flap-col.gone { max-width: 0 !important; opacity: 0; } /* Kurze Fenster: der Panel-Streifen unten sitzt in fester Hoehe ueber der Kante, der Wuerfel schrumpft mit dem Fenster. Ab hier reicht der Platz zwischen beiden nicht mehr, also rueckt die Zeile naeher an den Wuerfel. Lieber dicht am Wuerfel als im Streifen. */ /* Nur im Querformat: dort misst sich der Wuerfel an der Hoehe und frisst den Platz nach unten auf. Im Hochformat haengt seine Groesse an der Breite, unter ihm ist reichlich Luft, und die Zeile darf auf ihrem Regelabstand bleiben. */ @media (max-height: 860px) and (min-aspect-ratio: 1/1) { .hero-tag { bottom: calc(50% + var(--cube-size) * 0.48); } } @media (max-height: 700px) and (min-aspect-ratio: 1/1) { .hero-tag { bottom: calc(50% + var(--cube-size) * 0.44); } } /* ============================================================ Ausklappbare Zusatzinfos (Leon 11.08.: "infos koennen sich auch ab und zu auf und zuklappen, also nur die zahl und dann kommen auf einmal die anderen infos dazu und gehen dann wieder weg … automatisch und auf hover") Geklappt wird ueber `grid-template-rows: 0fr → 1fr`, NICHT ueber max-height. Bei max-height muesste man einen Wert raten: zu klein schneidet ab, zu gross macht die Bewegung am Ende zaeh, weil sie Zeit fuer Hoehe verbraucht die es nicht gibt. Mit dem Grid-Trick faehrt der Kasten exakt auf seine echte Hoehe. ============================================================ */ /* Der `grid-template-rows: 0fr → 1fr` Trick funktioniert hier NICHT: die Bloecke sind Flex-Container, dort loest `1fr` gegen den freien Raum auf — und den gibt es in einer nach Inhalt wachsenden Spalte nicht. Gemessen blieb der offene Kasten auf 6 Bildpunkten stehen, also nur das Polster. Deshalb ueber max-height, aber ohne Ratewert: micro.js misst die echte Hoehe und setzt sie. */ /* Die Klappkaesten haengen AUSSERHALB des Flusses, `position: absolute` direkt unter ihrem Wirt. Vorher standen sie als letztes Kind im Fluss und wuchsen ueber `max-height` von 0 auf ihre Hoehe. Die Beschriftungsbloecke sind aber unten verankert (`bottom: 9vh` auf dem Handy), also hat jedes Aufklappen den ganzen Block nach OBEN geschoben und beim Zuklappen wieder zurueck. Gemessen: 90 Layout-Spruenge in 24 Sekunden, der Block wanderte staendig um 10 Bildpunkte hin und her, und zwar endlos, weil die Automatik im Takt weiterlaeuft. Das ist das "es springt rum", das Leon mehrfach gemeldet hat (25.08.2026) — es lag nie am Intro, sondern hier. Ausserhalb des Flusses kann das Aufklappen die Hoehe des Wirts nicht mehr veraendern, also bewegt sich nichts mehr. Die Klappbewegung selbst bleibt wie sie war. */ .meta-more { display: block; position: absolute; top: 100%; left: 0; right: 0; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 420ms var(--ease), opacity 260ms var(--ease); } /* Bezugsrahmen fuer die Klappkaesten. Ohne das wuerden sie an der naechsten positionierten Ebene weiter oben haengen und quer ueber die Seite springen. */ .meta-face, .hstat { position: relative; } .meta-more-in { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; } .meta-more.is-open { opacity: 1; } /* Die Bloecke am unteren Hero-Rand klappen nach OBEN auf. Nach unten liefen die Zusatzzeilen aus der Hero heraus und wurden an der Kante beschnitten (Leon 02.09.: "dann rutschen manchmal die Infos aus dem Bild raus ... auf der Hero-Seite soll alles sichtbar sein"). */ .hero-stats .meta-more { top: auto; bottom: 100%; } .hero-stats .meta-more .meta-more-in { padding-top: 0; padding-bottom: 6px; } .meta-more-in b { font-weight: 700; font-size: 9px; letter-spacing: 0.1em; color: var(--fg); } .meta-more-in span { font-size: 9px; font-weight: 500; letter-spacing: 0.1em; color: var(--dim); } /* Der rechte Block ist rechtsbuendig gesetzt, die Zusatzzeilen auch */ .hero-meta-right .meta-more-in { align-items: flex-end; } @media (prefers-reduced-motion: reduce) { .meta-more { transition: none; } } /* Zahlen reissen kurz auf (micro.js setzt die Klasse). Zwei Kopien der Zahl als Pseudoelemente, jede zeigt nur ihre Haelfte und faehrt in die Gegenrichtung — dieselbe Mechanik wie bei den Auftraggebern. Der echte Text bleibt dabei unangetastet, deshalb kann der Zaehler ungestoert weiterlaufen. */ .meta-val.num-tear { position: relative; } .meta-val.num-tear::before, .meta-val.num-tear::after { content: attr(data-ghost); position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: inherit; pointer-events: none; } .meta-val.num-tear::before { clip-path: inset(0 0 54% 0); animation: numTearA 300ms steps(3, end); } .meta-val.num-tear::after { clip-path: inset(46% 0 0 0); animation: numTearB 300ms steps(3, end); } /* Ausschlaege halbiert (Leon 02.09.: "wackelt so hart links, rechts ... sie sollen so ein bisschen in ihrem eigenen Bereich bleiben"). Der Riss bleibt lesbar, verlaesst die eigene Spalte aber nicht mehr. */ @keyframes numTearA { 0% { transform: translateX(0); opacity: 1; } 35% { transform: translateX(-3px); opacity: 0.9; } 65% { transform: translateX(2px); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } } @keyframes numTearB { 0% { transform: translateX(0); opacity: 1; } 35% { transform: translateX(2px); opacity: 0.95; } 65% { transform: translateX(-2px); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .meta-val.num-tear::before, .meta-val.num-tear::after { display: none; } } /* Leuchte vor dem Wort LIVE (micro.js setzt sie). Sie sitzt auf der Grundlinie wie der Trenner, ist aber rund und blinkt — der Trenner markiert eine Trennung, die Leuchte einen Zustand. Bewusst nur der Punkt: ein blinkendes Wort liest sich als Fehlermeldung. */ @keyframes liveBeat { 0%, 46% { opacity: 1; } 55%, 96% { opacity: 0.18; } 100% { opacity: 1; } } .live-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; margin-right: 5px; background: var(--fg); vertical-align: 0.06em; animation: liveBeat 1.6s var(--ease) infinite; } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } /* Die Bloecke treten erst nach dem Intro auf und schreiben sich dann Zeile fuer Zeile auf (micro.js). Vorher stuende dort der Platzhalter aus dem HTML und spraenge beim Nachladen um. .loaded bleibt als Notnagel drin: faellt micro.js aus, zeigt youtube.js den Block trotzdem, nur eben ohne Auftritt. */ .hero-meta { opacity: 0; transition: opacity var(--t-slow) var(--ease); } .hero-meta.revealed, .hero-meta-left.loaded { opacity: 1; } /* Schreibkopf: blinkender Block am Ende der Zeile, solange sie laeuft. Nur waehrend der Bewegung, danach steht die Zeile ruhig da. */ @keyframes microCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .decoding::after { content: "\25AE"; margin-left: 0.12em; animation: microCaret 480ms steps(1, end) infinite; } /* ============================================================ Creed — der Text der Firma zwischen Wuerfel und Werkliste (Leon 03.09.2026) Zwei ungleiche Spalten: links nur die Kopfzeile als Beschriftung, rechts der Satz. Kein gleichmaessiges Raster und kein Kasten, der Abschnitt hat genau ein starkes Zeichen, und das ist die Schlusszeile in der Schrift der Wortmarke. Seit 01.10.2026 ist der Abschnitt die letzte Sektion: er steht hinter der Werkliste und vor der Mailzeile. Abstaende: am Rechner oben und unten --gap-l (Leon 01.10.2026: "du kannst diesem About-Text oben und unten ein bisschen mehr Luft geben auf der Web-Version", und zusaetzlich "ein bisschen mehr Platz auch zwischen dem Text und Hello Tag"). Vorher oben --gap-s und unten --gap-m, das war als Zwischensektion gedacht; als Schlussabschnitt stand der Text zu eng zwischen Namenswand und Mailadresse. Am Handy genau andersherum, siehe die Regel in der 860er Abfrage. ============================================================ */ .creed { padding: var(--gap-l) var(--pad) var(--gap-l); } .creed-inner { max-width: var(--maxw); margin: 0 auto; display: grid; /* Die schmale Spalte traegt nur die Kopfzeile. Sie ist die Satzkante der Seite, nicht eine zweite Textspalte, deshalb so eng. */ grid-template-columns: minmax(0, 0.62fr) minmax(0, 2fr); gap: clamp(20px, 3vw, 56px); align-items: start; } /* Die Micrographic-Kopfzeile ist raus (Leon 03.09.2026: "diese Micrographic-Ueberschrift ueber den Text braucht es nicht"). Die schmale Spalte bleibt als Einzug stehen, sie ist die Satzkante der Seite. Der Text steht dadurch nicht an der Bildkante, sondern hat links Luft, und die Schlusszeile darunter faengt genau dort an. */ .creed-col { /* Nur die rechte Spalte, die linke bleibt der Einzug. */ grid-column: 2; display: flex; flex-direction: column; /* Absatzabstand, nicht Sektionsabstand: die drei Absaetze sollen als ein Text lesbar bleiben und nicht in drei Bloecke zerfallen. */ gap: clamp(14px, 1.5vw, 24px); } .creed-body { margin: 0; /* Zeilenlaenge ueber die Schriftgroesse begrenzt, wie beim Einleitungstext davor. Ueber die volle Spaltenbreite gezogen laesst sich der Absatz nicht mehr lesen. */ max-width: 30em; font-size: clamp(16px, 1.28vw, 22px); line-height: 1.5; font-weight: 700; color: color-mix(in srgb, var(--fg) 76%, transparent); } /* Ein Schlagwort je Absatz in voller Helligkeit und kursiv, damit die laute Stimme der Schlusszeile schon im Text vorkommt und nicht erst ganz unten (Leon 03.09.2026: "dass es sich durch den ganzen Text durchzieht ... dass man wirklich hier und da mal haengen bleibt"). Bewusst nur die Helligkeit und die Kursive, keine zweite Schrift und keine Farbe: der Absatz bleibt ein Absatz, es fallen nur drei Stellen auf. Der Wortlaut aendert sich dabei nicht, es kommen nur dazu. */ .creed-body b { font-weight: 900; font-style: italic; letter-spacing: -0.01em; /* 02.10.2026, Leon: die Hervorhebungen duerfen fett bleiben, aber nicht weiss, das stach aus dem grauen Absatz heraus. Keine eigene Farbe mehr, sie erben die 76 Prozent von .creed-body. */ color: inherit; } /* Das eine starke Zeichen des Abschnitts. Gleiche Machart wie die Wortmarke von Latest Projects: zweizeilig, kursiv, die zweite Zeile eingerueckt, damit der Block eine Treppe hat statt zweier linksbuendiger Zeilen. */ .creed-kick { /* Ueber beide Spalten, also ab der Satzkante der Seite (Leon 03.09.2026: "vom Placement irgendwie noch nicht so geil"). Vorher hing sie in der rechten Spalte und lief nach rechts aus dem Textblock heraus, waehrend links unter der Kopfzeile nichts stand. Jetzt liegt sie als Grundlinie unter dem eingerueckten Text, faengt dort an wo die Sektion anfaengt und hat Platz bis zum Rand. */ grid-column: 1 / -1; display: flex; flex-direction: column; /* Reihenfolge beachten: die Kurzform `margin` wuerde ein davor stehendes margin-top wieder auf 0 setzen. */ margin: clamp(30px, 3.6vw, 64px) 0 0; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(26px, 3.9vw, 62px); line-height: 0.88; letter-spacing: -0.04em; color: color-mix(in srgb, var(--fg) 42%, transparent); } /* Nur der Schlusssatz steht in voller Helligkeit. Beide Zeilen gleich hell waeren zwei Ansagen, gemeint ist eine mit Anlauf. */ .creed-kick b:last-child { margin-left: clamp(16px, 2.4vw, 46px); color: var(--fg); } @media (max-width: 860px) { /* Am Handy soll der Block hoeher sitzen (Leon 01.10.2026, mit Pfeil auf dem Bildschirmfoto: "am Handy den Text hier hoch"). Gemessen bei 390 Punkten: zwischen dem letzten Namen der Werkliste und dem ersten Satz lagen 141 Punkte, davon 40 von hier und 101 aus dem unteren Rand der Werkliste. Beide muessen runter, mit den 40 allein blieben 117 stehen. Der untere Rand der Werkliste wird nur gekuerzt, wenn About direkt folgt: endet die Seite mit der Namenswand, braucht sie ihre Luft. Unten bleibt --gap-m: die groessere Luft zur Mailadresse wollte Leon ausdruecklich nur am Rechner. */ .creed { padding-top: 0; padding-bottom: var(--gap-m); } .works:has(+ .creed) { padding-bottom: var(--gap-m); } /* Auf dem Handy untereinander: zwei Spalten liessen fuer den Text keine lesbare Zeile mehr uebrig. */ .creed-inner { grid-template-columns: 1fr; gap: 0; } /* Die Kennung SECTION 01 / ABOUT (.creed-inner::before) ist raus (14.09.2026): mit Latest Projects vor dem Abschnitt stimmte die Nummer nicht mehr, und die Seite fuehrt seit Leons Reduktion ("Section 02 AI-driven wegmachen") gar keine Sektionsnummern mehr. Bitte nicht zurueckbauen. */ /* Auf dem Handy gibt es keinen Einzug mehr, also faengt der Text an derselben Kante an wie die Schlusszeile. */ .creed-col { grid-column: 1; gap: 12px; } .creed-body { max-width: none; line-height: 1.45; } /* Die Schlusszeile ist das eine starke Zeichen des Blocks und stand mit 26 Punkten kaum ueber dem Text, dazu brach "FUTURE." allein um. Jetzt doppelt so gross wie der Text, und die erste Zeile bricht ausgeglichen (THAT'S THE / UNSTOPPABLE FUTURE.). Die Obergrenze 34 ist gemessen: bis dahin passt "UNSTOPPABLE FUTURE." bei 375 und 390 Punkten Breite in eine Zeile, darueber wuerde es drei Zeilen und das Einzelwort kaeme zurueck. Die Marke bleibt in einer Zeile. */ .creed-kick { margin: 26px 0 0; font-size: clamp(28px, 8.2vw, 34px); line-height: 0.94; letter-spacing: -0.035em; } .creed-kick b { text-wrap: balance; } .creed-kick b:last-child { margin-left: 0.55em; white-space: nowrap; } } /* ============================================================ Latest — Featured-Arbeiten zwischen Hero und Portfolio ============================================================ */ /* Deutlich kompakter (Leon 11.08.: "latest projects nimmt viel zu viel platz ein"). Vorher 12vh oben und 16vh unten plus 22vh Versatz an der kleinen Kachel — die Sektion war ueber zwei Bildschirme hoch, obwohl nur zwei Arbeiten darin stehen. */ .latest { /* Steht seit 14.09.2026 direkt unter der Hero. Oben --gap-m wie vorher der Creed an dieser Stelle: die Hero faehrt unten schon per Blende auf --bg, ein voller Regelabstand liesse die Marke losgeloest stehen, und die Kopfzeile SECTION 02 darueber gibt es nicht mehr. Unten nur --gap-s: die Seitenspalte der Buehne haelt ohnehin die Hoehe des laengsten Werks frei, mit --gap-m standen gemessen 132 Punkte bis zum Creed (Ziel 90 bis 120). */ padding: var(--gap-m) var(--pad) var(--gap-s); } /* ============================================================ Ueberschrift als Marke (Leon 13.08.: "die ueberschrift von latest projects sieht lame aus ... muss eher wie ein logo in unserem micro graphic style kommen"). Zweizeilig, die zweite Zeile eingerueckt, damit der Block eine Kante hat statt zweier linksbuendiger Zeilen. Seit 14.09.2026 steht nur noch die Wortmarke (Leon: "diesen Rennstreifen, diese Zielgerade da wegmachen, den Barcode wegmachen, dieses Nummer 1 bis 05 wegmachen, dieses GIF mit dem Kopf, der sich dreht, wegmachen, Section 02 AI-driven wegmachen"). Mit dem Markup sind die Regeln fuer .latest-logo-row, .ll-head, das Schachbrett an der Marke, .ll-foot mit Barcode und Kapsel sowie .latest-cards/.lcard (Kopf-Loop) raus. Bitte nicht zurueckbauen. ============================================================ */ /* Die Marke steht links auf der Satzkante der Seite. */ .latest-logo { max-width: var(--maxw); margin: 0 auto clamp(26px, 3.4vw, 46px); } /* .ll-mark bleibt fuer die (abgeschaltete) Bitcoin-Zusage in brand.js. */ .ll-mark { display: flex; align-items: center; gap: clamp(8px, 1vw, 18px); } .ll-word { display: flex; flex-direction: column; margin: 0; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(34px, 5.6vw, 86px); line-height: 0.82; letter-spacing: -0.045em; color: var(--fg); } /* Die zweite Zeile rueckt ein und traegt damit die Treppe, die im Moodmaterial jede Marke hat. */ .ll-word b:last-child { margin-left: clamp(14px, 2.2vw, 40px); } /* ============================================================ Einleitung (derzeit ohne Text, siehe index.html) ============================================================ */ .latest-lead { max-width: var(--maxw); margin: 0 auto clamp(26px, 3.4vw, 46px); } /* Zwei gleich hohe Panels nebeneinander (Leon 12.08.: "der ganze teil nimmt zu viel platz ein durch das hochkant gasag. mach ein layout was weniger platz schluckt und mehr in den micrographic style passt"). Das Hochformat war der Hoehentreiber: eine 4/5-Kachel neben einer 16/9-Kachel zieht die ganze Zeile auf ihre Hoehe, dazu kam der Versatz. Beide laufen jetzt im selben Breitbild und die Sektion ist so hoch wie ihre Kacheln. */ .latest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: start; max-width: var(--maxw); margin: 0 auto; } /* ------------------------------------------------------------ Latest als Buehne (Leon 13.08.2026) Ueberschrift, kurzer Text, dann EINE grosse Flaeche mit vier durchlaufenden Loops und den Angaben daneben. ------------------------------------------------------------ */ /* Der Text sitzt an der linken Kante unter der Ueberschrift, nicht in der Mitte der Spalte: die Sektion hat eine Satzkante, und die ist die der Ueberschrift. Deshalb die volle Breite als Rahmen und die Zeilenlaenge ueber die Schriftgroesse begrenzen. */ .latest-intro { width: 100%; margin: 0; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.5; font-weight: 700; color: color-mix(in srgb, var(--fg) 74%, transparent); } /* Buehne ueber die ganze Breite (Leon 01.10.2026: "wenn das Video, was dort zu sehen ist, einmal ueber die komplette Breite geht, sozusagen von der Seite, dass es wirklich gross ist"). Vorher stand der Film in der breiteren von zwei Spalten (1.62fr zu 1fr) und die Angaben daneben: in Leons Fenster waren das 855 von 1419 Punkten Breite. Jetzt liegt alles untereinander, der Film nimmt die ganze Fensterbreite, Titel und Werte stehen darunter. Die Spaltenaufteilung und mit ihr .feature-side, .feature-main, .feature-title und .feature-kicker sind raus. */ .feature { display: block; max-width: var(--maxw); margin: 0 auto; } /* Kein Rahmen. Der 1px Strich stand als heller Faden links und rechts neben dem Loop und las sich als Fehler, nicht als Fassung (Leon 01.09.: "dieser leichte weisse Rahmen bei dem Latest Project um das Vorschau-Video kann weg", "links und rechts noch so kleine weisse Striche"). Gemessen war er es auch: auf 1440 lag die Helligkeit an x=24 und x=861 bei 64 bzw. 57 gegen 10 im Bild daneben. Das Bild steht jetzt allein, ohne Rahmen und seit 02.10.2026 auch ohne Schatten (Leon: "unter dem Latest Project Video ist so ein kleiner Schatten, den braucht man nicht, generell die Kacheln brauchen keine Schatten"). Geprueft wird das von qa/check_schatten.py. */ .feature-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 0; /* Schwarz, auch solange noch nichts dekodiert ist. Weiss um ein Bild liest Leon als Fehler, nicht als helles Design. */ background: #000; } /* Von Kante zu Kante: der Film tritt aus dem Satzspiegel heraus, die Titel darunter bleiben darin. 50% bezieht sich auf die Spalte, 50vw auf das Fenster, die Differenz ist genau der Seitenrand. body hat overflow-x: hidden, eine waagerechte Leiste kann daraus nicht entstehen. Die Hoehe ist 16/9 der ganzen Breite, aber gedeckelt: ungedeckelt waere die Flaeche in Leons Fenster (1467x1032) 825 Punkte hoch und die Titel darunter stuenden ausserhalb des Bildes — dann versteht niemand, dass die Filme zu den Titeln gehoeren. Mit dem Deckel stehen Film und Liste zusammen in einem Fenster, der Loop laeuft als breites Band (gemessen 2.09:1) statt 16/9. object-fit: cover an .fclip schneidet mittig, die Loops liegen ohnehin in verschiedenen Formaten vor. */ .feature--wide .feature-stage { width: 100vw; margin-left: calc(50% - 50vw); height: min(calc(100vw * 9 / 16), 68svh); aspect-ratio: auto; } .feature-link { position: absolute; inset: 0; display: block; } /* Alle vier Loops liegen uebereinander und laufen mit. Nur der aktive ist sichtbar — ein Wechsel per src-Tausch beginnt sonst mit einem schwarzen Frame, weil der neue Film erst laden muss. */ .fclip { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 900ms var(--ease), transform 1400ms var(--ease); pointer-events: none; will-change: opacity, transform; } .fclip.is-on { opacity: 1; transform: scale(1); z-index: 2; } /* Das weichende Bild geht nach innen weg, das kommende von aussen herein. Beide gleichzeitig aufblenden wuerde nur ueberlagern. */ .fclip.is-out { opacity: 0; transform: scale(0.965); z-index: 1; } .fclip video, .fclip img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Die Werte aus data.js, Monospace, klein. Dieselbe Klasse benutzt die Werkliste weiter unten (latest-list.js), deshalb bleibt sie hier. Die Beschriftungen RELEASED, FORMAT, ARTIST, RUNTIME, VIEWS sind seit 14.09.2026 raus (Leon: "die Daten an sich noch lassen, aber quasi die Ueberschriften dafuer wegnehmen"). */ .fstat-val { font-family: var(--mono); font-stretch: 75%; text-transform: uppercase; font-size: clamp(12px, 1.05vw, 15px); font-weight: 500; letter-spacing: 0.01em; color: var(--fg); } /* ------------------------------------------------------------ Die Titel unter der Buehne (Leon 01.10.2026) ------------------------------------------------------------ Vorher eine Reiterzeile in 20px, alle Titel nebeneinander — Leon: "diese kleinen Schriften, die da drunter stehen, entweder man macht die viel viel fetter und groesser, dass sie auch so komplett ueber den Screen gehen". Jetzt eine Zeile je Werk, der Titel in Anzeigegroesse links, die Werte in Monospace rechts an der Satzkante: damit spannt jede Zeile ueber die ganze Breite. Das laufende Werk steht hell, die anderen stark gedimmt — dieselbe Lesart wie in der Werkliste weiter unten, wo die Namen durch die feste Vorschau laufen. Keine Trennlinien zwischen den Zeilen: die Zeile selbst ist die Struktur (Leon 14.09.2026). */ .feature-list { display: flex; flex-direction: column; margin-top: clamp(16px, 1.8vw, 30px); } .ftab { display: flex; align-items: baseline; justify-content: space-between; gap: clamp(16px, 2vw, 44px); width: 100%; padding: clamp(4px, 0.5vw, 10px) 0; background: none; border: 0; text-align: left; /* Seit 01.10.2026 ein und kein