/* ══════════════════════════════════════════════════════════════════════ LEISTUNGEN — „Der Schacht" Dieselbe Grammatik wie die Startseite: Schiene links, fester Bildplatz rechts, angeheftete Sektionen, Riesenzahl randbrechend. Andere Bedeutung: dort heißt der Wechsel „andere Welt", hier „tiefere Schicht". Deshalb wird der Grund abwärts dunkler und die Farbe verschwindet — man fährt in den Aufbau hinein. ══════════════════════════════════════════════════════════════════════ */ /* ── Auftakt der Unterseiten: gleiche Anlage, mit Bildplatz ── */ /* Der Auftakt hat jetzt eine Bildspalte wie die Startseite, also braucht er auch deren rechten Rand zurück. Vorher stand hier var(--rand): der Satz durfte über die volle Breite laufen, und rechts blieb eine leere Fläche stehen, weil kein Bild darin war. */ .auftakt--unter{ padding-right:calc(var(--bild) + var(--rand) * .7); } .auftakt__mitte{max-width:1240px;width:100%} .auftakt__vor{ margin-top:1.1em; max-width:38ch; font-size:clamp(.94rem,2.2vw,1.25rem); line-height:1.36; color:var(--leise); text-wrap:pretty; } .dach--seite{ font-family:Mono,monospace; font-size:clamp(0.7rem,1.5vw,.72rem); letter-spacing:.3em; text-transform:uppercase; color:var(--leise); margin-bottom:1.1em; } /* ══════════════ DIE SECHS LAGEN ══════════════ FRUEHER: ein Abstieg von Papier bis fast Schwarz — 01 #faf9f7 · 02 #efede8 · 03 #0d0d11 · 04 #e2e0da · 05 #c9c7c1 · 06 #26262b Also Papier, Hellgrau, Schwarz, Grau, Grauer, Dunkelgrau. Der Gedanke war „man faehrt in den Aufbau hinein". Im Bild ergab das aber genau Sadans Befund vom 02.08.: „zu dunkel viel zu grau, schwarz … bitte andere farben". JETZT: jede Schicht hat ihre eigene Farbe, und die Reihe bleibt ueberwiegend hell. Alle Toene sind aus der vorhandenen Palette abgeleitet, keine neue Familie erfunden — die drei Vollfarben sind woertlich --strom, --knall und --gelb, die drei hellen sind deren aufgehellte Verwandte. 01 Technik hellblau — technische Schicht, wie die Messung auf /referenzen/ 02 Struktur sand — das Raster, ruhig 03 KI-Sicht. MAGENTA — die eine laute Schicht, die, wegen der es Mainsicht gibt. Vorher war sie schwarz. 04 Lokal gruen — Ort, Karte 05 Recht violett — Akte 06 Text GELB — endet hell statt dunkel Tinte: auf den fuenf hellen Gruenden #111 (ueber 10:1). Zum Magenta eine Rechnung, die eine Entscheidung erzwungen hat: auf dem vollen --knall #e8005a (Leuchtdichte 0,179) kommt selbst REINES WEISS nur auf 4,59:1, und der Sekundaerton #ffe1ec auf 3,76:1 — fuer 4,5:1 muesste er heller sein als Weiss, das geht nicht. Deshalb traegt die Schicht den ohnehin vorhandenen abgedunkelten Markenton --knall-text #bd0049 (Leuchtdichte 0,1116): Weiss 6,50:1, der Sekundaerton 5,38:1. Keine neue Farbe, nur die richtige aus der Palette. */ .lage--1{--w-grund:#dfe8ff;--w-tinte:#111111;--w-strich:var(--tinte);--w-leise:#3f4763} .lage--2{--w-grund:#f2e9d8;--w-tinte:#141414;--w-strich:var(--tinte);--w-leise:#5a5140} .lage--3{--w-grund:#bd0049;--w-tinte:#ffffff;--w-strich:#ffffff;--w-leise:#ffe1ec} .lage--4{--w-grund:#ddeee2;--w-tinte:#121212;--w-strich:var(--tinte);--w-leise:#3a5145} .lage--5{--w-grund:#e7e2f2;--w-tinte:#121212;--w-strich:var(--tinte);--w-leise:#4a4360} .lage--6{--w-grund:#f4c400;--w-tinte:#111111;--w-strich:var(--tinte);--w-leise:#4a4a4a} .satz--lage{align-self:center} .riese--lage{ font-family:Archivo,sans-serif; font-variation-settings:"wght" 900,"wdth" 118; font-size:clamp(5rem,22vw,19rem); line-height:.72; letter-spacing:-.055em; margin-left:calc(-1 * (var(--schiene) + var(--rand) * .4) - .02em); color:var(--w-tinte); opacity:.16; } /* WAR `color:var(--knall);opacity:.9` — das war richtig, solange die Schicht schwarz war. Jetzt IST der Grund das Magenta, und die Ziffer waere darauf unsichtbar. Weiss, leise gesetzt wie die uebrigen fuenf. */ .lage--3 .riese--lage{color:#ffffff;opacity:.22} .lage__titel{ margin:0; margin-top:-.34em; font-family:Schibsted,sans-serif; font-weight:900; font-size:clamp(1.9rem,6.2vw,4.6rem); line-height:.94; letter-spacing:-.042em; text-wrap:balance; } .lage__text{ margin-top:1.1em; max-width:34ch; font-size:clamp(.92rem,2.1vw,1.14rem); line-height:1.38; color:var(--w-leise); text-wrap:pretty; } .lage__tat{margin-top:1.6em} .lage__tat a{ display:inline-flex; align-items:center; gap:.6em; text-decoration:none; font-family:Schibsted,sans-serif; font-weight:900; font-size:clamp(.95rem,2.2vw,1.24rem); letter-spacing:-.02em; color:var(--knall-text); } .lage__tat span{border-bottom:2px solid currentColor;padding-bottom:.06em} .lage__tat a:hover .pfeil{transform:translateX(.22em)} /* ── Der Bildplatz: dieselbe Spalte wie auf der Startseite. Die Helligkeit folgt dem Abstieg, damit das Foto in seiner Schicht sitzt statt darauf zu kleben. IN FARBE, seit 02.08. Vorher lief jedes der sechs Bilder durch `grayscale(1)`. Die Seite war damit nicht grau GESTALTET, sondern grau GEFILTERT — Sadans Befund „zu grau" hing an dieser einen Funktion, nicht am Entwurf. Material lebt von seiner Farbe: Messing ist gelb, Rost ist rot, Späne sind hell. Was bleibt, ist die Helligkeitsstaffel: sie ordnet die Schichten im Abstieg, und das ist eine Gestaltungsentscheidung, kein Filter aus Verlegenheit. Leichte Sättigung dazu, damit die Bilder auf dem warmen Papier nicht ausbleichen. */ .bild--l1 img{filter:contrast(1.06) saturate(1.06) brightness(1)} .bild--l2 img{filter:contrast(1.08) saturate(1.04) brightness(.98);object-position:42% 50%} .bild--l3 img{filter:contrast(1.12) saturate(1.08) brightness(.84);object-position:56% 50%} .bild--l4 img{filter:contrast(1.06) saturate(1.06) brightness(.96);object-position:50% 66%} .bild--l5 img{filter:contrast(1.06) saturate(1.04) brightness(.98)} .bild--l6 img{filter:contrast(1.1) saturate(1.04) brightness(.82)} /* ══════════════ PAKETE ══════════════ */ .schluss--unter{padding-top:clamp(4rem,14vh,8rem)} .schluss--unter > .dach, .schluss--unter > .zwei{max-width:1240px;margin-inline:auto} .zwei{ margin:0 auto clamp(2.6rem,9vh,4.6rem); max-width:1240px; font-family:Schibsted,sans-serif; font-weight:900; font-size:clamp(2rem,7.4vw,5.6rem); line-height:.94; letter-spacing:-.045em; text-wrap:balance; } .posten__zahl--wort{ font-size:clamp(1.1rem,3.4vw,2.2rem); font-weight:500; letter-spacing:-.02em; color:var(--leise); white-space:nowrap; } /* ══════════════ BEWEGUNG ══════════════ Grundzustand ist das fertige Standbild. Deckkraft ist früh voll, damit beim Stehenbleiben nichts grau aussieht. */ @media (prefers-reduced-motion: no-preference){ @keyframes lage-ein{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} /* Die Riesenziffer hat eine EIGENE Kurve, die bei .16 endet — sonst zieht der Fill-Mode „both" sie dauerhaft auf volle Deckkraft und die schwarze „01" liegt schwarz auf der schwarzen Ueberschrift (25 px Ueberlappung). Die anderen fuenf Schichten bleiben bei .16, weil sie gar keine Animation auf der Ziffer haben. */ @keyframes riese-ein{from{opacity:0;transform:translateY(24px)}to{opacity:.16;transform:none}} .lage--1 .riese--lage{animation:riese-ein .9s var(--schwung) .05s both} .lage--1 .lage__titel{animation:lage-ein .95s var(--schwung) .16s both} .lage--1 .lage__text{animation:lage-ein .9s var(--schwung) .28s both} @supports (animation-timeline: scroll(root)){ @keyframes lage-heben{from{opacity:0;transform:translateY(2.6rem)}44%{opacity:1}to{opacity:1;transform:none}} .lage--2 .satz,.lage--3 .satz,.lage--4 .satz,.lage--5 .satz,.lage--6 .satz{ animation:lage-heben linear both; animation-timeline:scroll(root); animation-range:calc(var(--auftakt) + var(--n) * var(--halt) - 58vh) calc(var(--auftakt) + var(--n) * var(--halt) - 8vh); } } } /* ══════════════ SCHMAL ══════════════ */ @media (max-width:860px){ /* Schmal wandert die Bildspalte nach oben über den Satz (siehe styles.css). Der Auftakt braucht dann oben den Bildplatz und rechts keinen mehr — sonst legt sich das Bild über Logo und Navigation. */ .auftakt--unter{ padding-right:var(--rand); padding-top:calc(var(--bild) + var(--rand) * 1.1); } .riese--lage{font-size:clamp(4rem,26vw,9rem)} .lage__titel{font-size:clamp(1.5rem,8vw,2.4rem)} } /* Die geisterhaften Zahlen dürfen der Überschrift Platz lassen — die volle Farbe in Schicht 03 nicht, sonst kollidiert es. */ .lage--3 .lage__titel{margin-top:-.04em} /* Schicht 03 steht jetzt AUF dem Markenton (vorher auf Schwarz). Der Link kann dort nicht selbst magenta sein — Weiss traegt: 4,59:1. */ .lage--3 .lage__tat a{color:#ffffff} /* Das Standbild ist quer (1400x800), die Auftaktspalte hochkant — ohne eigene Bildlage schnitte der Vorgabewert 62% das Zeichen an. 50% legt das M in die Mitte der Spalte. */ .auftakt__bild img{object-position:50% 50%} /* (Die Film-Regeln des Auftakts sind entfallen — dort steht jetzt DER BOHRKERN, siehe unten am Dateiende und im HTML.) */ } /* ══════════════════════════════════════════════════════════════════════ DER RHYTHMUS DER SECHS SCHICHTEN Sadan, 02.08.: „per design prinzipien komplett ändern und das richtig machen". Gemessen war der Befund eindeutig: sechs Abschnitte von JE EXAKT 1 530 px fuer je rund 180 Zeichen — 8,5 Pixel Seite pro Buchstabe, sechsmal identisch. Das ist woertlich das Anti-Pattern aus TEIL A § 4 der DESIGN-PRINZIPIEN („gestapeltes Sektionen-Template", sein Urteil: „viel freier"), nur mit anderen Farben. Gegenmittel steht in § 3 derselben Datei: „asymmetrische Einzuege, rechtsbuendig versetzte Bloecke". Also bekommt jede Schicht eine eigene Anlage, statt sechsmal denselben Stempel: 01 linksbuendig an der Achse der Einstieg 02 nach rechts versetzt, rechtsbuendig Gegenbewegung 03 mittig und gross, ohne Foto die Kernschicht (Magenta) 04 tief eingerueckt, linksbuendig Versatz 05 nach rechts versetzt, rechtsbuendig Gegenbewegung 06 linksbuendig, Typo am groessten der Abschluss (Gelb) Die Bildspalte und die Schiene bleiben, wo sie sind — sie sind die Grammatik der Seite (§ 6). Versetzt wird der SATZ, nicht das Raster. */ .lage--2 .satz--lage, .lage--5 .satz--lage{ margin-left:auto; max-width:min(38ch,52%); text-align:right; } .lage--2 .lage__text, .lage--5 .lage__text{margin-left:auto} /* Die Riesenziffer bricht dann nach RECHTS aus dem Raster, nicht nach links. */ .lage--2 .riese--lage, .lage--5 .riese--lage{ margin-left:0; margin-right:calc(-1 * var(--rand) * .5); } .lage--4 .satz--lage{margin-left:clamp(2rem,12vw,11rem)} /* 03 ist die Schicht, wegen der es Mainsicht gibt — die traegt am groessten. ⚠️ Hier stand `.lage--3 .bild{display:none}` mit der Begruendung „die Vollfarbe IST das Bild". Das war falsch, und zwar aus zwei Gruenden: ich hatte kurz zuvor selbst ein Foto fuer diese Schicht besorgt und es damit versteckt — und im Ablauf der sechs fehlte plotzlich eines, was nicht als Absicht las, sondern als Fehler (Sadan: „KI-Sichtbarkeit gar kein foto whatt??"). Das Foto ist wieder da. */ .lage--3 .satz--lage{max-width:22ch} .lage--3 .lage__titel{font-size:clamp(2.6rem,10vw,8rem)} .lage--3 .lage__text{font-size:clamp(1.05rem,2.8vw,1.6rem);max-width:26ch} /* 06 schliesst ab, also traegt es am groessten. */ .lage--6 .lage__titel{font-size:clamp(2.2rem,7.6vw,5.8rem)} /* ── Die tote Strecke ── `--halt` ist 100 vh Buehne + 70 vh Verweildauer. Auf der Startseite mit vier Welten traegt das; hier mit sechs Schichten ergab es 6 x 630 px, in denen nichts steht — zusammen fast eine halbe Seitenhoehe Leere. Auf 124 vh gekuerzt: die Buehne bleibt voll, die Verweildauer schrumpft auf 24 vh. Die Scroll-Bereiche der Animationen rechnen mit `--halt`, ziehen also automatisch mit. */ .lage{--halt:124vh} /* ══════════════════════════════════════════════════════════════════════ DER BOHRKERN — der Auftakt zeigt die Seite als Schnitt Warum, steht im HTML am Markup. Hier das Wie: · Jede Schicht traegt Grund UND Tinte ihres Abschnitts unten — dieselben Paare, die der Designscan dort schon freigegeben hat. · Die Versaetze (02/05 nach rechts, 04 leicht eingerueckt) spiegeln die Satzkanten der Abschnitte. In den Luecken scheint das Papier durch — die Schichten liegen AUF der Seite, sie sind kein Vollbild. · 03 ist die dickste Schicht (flex 1.45): die, wegen der es Mainsicht gibt. Die Hierarchie ist die Ehrlichkeit. · Kein Kasten, kein Schatten, keine Rundung — nur Farbe auf Papier. ══════════════════════════════════════════════════════════════════════ */ .kern{ display:flex; flex-direction:column; padding:0; margin:0; background:none; overflow:hidden; } .kern__deckel{ margin:0; flex:none; display:flex; align-items:center; gap:.7em; padding:clamp(.8rem,2vh,1.2rem) clamp(.9rem,2.4vw,1.5rem); font-family:Mono,monospace; font-size:clamp(0.7rem,1.4vw,.68rem); letter-spacing:.22em; text-transform:uppercase; color:var(--leise); --zeichen-w:1.4rem; } .kern__lage{ position:relative; flex:1; display:flex; align-items:center; gap:1em; padding-inline:clamp(.9rem,2.4vw,1.6rem); text-decoration:none; background:var(--kl-grund); color:var(--kl-tinte); } .kern__lage--1{--kl-grund:#dfe8ff;--kl-tinte:#111111} .kern__lage--2{--kl-grund:#f2e9d8;--kl-tinte:#141414;margin-left:18%;justify-content:flex-end} .kern__lage--3{--kl-grund:#bd0049;--kl-tinte:#ffffff;flex:1.45} .kern__lage--4{--kl-grund:#ddeee2;--kl-tinte:#121212;margin-left:8%} .kern__lage--5{--kl-grund:#e7e2f2;--kl-tinte:#121212;margin-left:18%;justify-content:flex-end} .kern__lage--6{--kl-grund:#f4c400;--kl-tinte:#111111} .kern__lage i{ font-style:normal; font-family:Mono,monospace; font-size:clamp(0.7rem,1.3vw,.66rem); letter-spacing:.2em; opacity:.7; } .kern__lage b{ font-family:Schibsted,sans-serif; font-weight:900; font-size:clamp(1.05rem,2.3vw,1.55rem); letter-spacing:-.03em; line-height:1; } .kern__lage--3 b{font-size:clamp(1.25rem,3vw,2rem)} .kern__lage:focus-visible{outline:3px solid currentColor;outline-offset:-4px} @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} .kern__lage{transition:transform .25s var(--schwung)} /* Anfassen heisst herausziehen: die Schicht kommt ein Stueck heraus, wie ein Kernsegment aus der Probe. */ .kern__lage:hover{transform:translateX(-.4rem)} .kern__lage--2:hover,.kern__lage--5:hover{transform:translateX(.4rem)} @keyframes kern-ein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* backwards, NICHT both: mit both haelt die beendete Animation ihr End-Transform fuer immer fest und ueberstimmt die :hover-Regel — die Herauszieh-Geste feuerte nie (gemessen: transform blieb matrix(1,0,0,1, 0,0) trotz :hover; nach animation:none kam -6.4px). Der End-Zustand der Keyframes IST der Naturzustand, backwards verliert also nichts. Dasselbe Muster wie riese-ein in § 7 der DESIGN-PRINZIPIEN. */ .kern__deckel{animation:kern-ein .7s var(--schwung) backwards} .kern__lage--1{animation:kern-ein .7s var(--schwung) .08s backwards} .kern__lage--2{animation:kern-ein .7s var(--schwung) .15s backwards} .kern__lage--3{animation:kern-ein .7s var(--schwung) .22s backwards} .kern__lage--4{animation:kern-ein .7s var(--schwung) .29s backwards} .kern__lage--5{animation:kern-ein .7s var(--schwung) .36s backwards} .kern__lage--6{animation:kern-ein .7s var(--schwung) .43s backwards} } @media (max-width:860px){ /* Schmal liegt der Bildplatz als Streifen oben (styles.css: --bild=26svh ≈ 219 px). Sechs Schichten darin waeren je ~31 px — unter dem 44-px-Tippziel. Deshalb bekommt der Kern hier mehr Hoehe (Praezedenz: .auftakt__bild--geraet auf /referenzen/) und die Versaetze entfallen — sie sind eine Geste fuer breite Schirme. */ .kern{height:min(54svh,430px)} .kern__lage--2,.kern__lage--4,.kern__lage--5{margin-left:0} /* Der Satz darunter rechnet sonst mit --bild (26svh) und laeuft unter den hoeheren Kern. */ .auftakt--unter{padding-top:calc(min(54svh,430px) + var(--rand) * 1.1)} }