/* ════════════════════════════════════════════════════════════════════════════ websites.css — /leistungen/websites ──────────────────────────────────────────────────────────────────────────── ─── Die Bauordnung dieser Datei ──────────────────────────────────────────── Diese Seite ist fünfmal gescheitert. Immer an denselben Stellen. Jede Regel unten ist die Narbe eines Fehlers, nicht eine Vorliebe. R1 RUHE IST DER GRUNDZUSTAND. Was hier ohne Bedingung steht, ist der fertige, ruhende Zustand — er IST das Dokument und gleichzeitig die Fassung für prefers-reduced-motion. Bewegung hängt AUSSCHLIESSLICH an html[data-bewegung="ja"], gesetzt von websites.js. Deshalb gibt es keinen reduced-motion-Sonderblock. R2 perspective UND das gedrehte Element sind Eltern und DIREKTES Kind. R3 filter und opacity NIE auf einem Element mit transform-style:preserve-3d. R4 KEINE Endlosanimation. Kein Bauteil läuft in einer Schleife — das liest sich wie ein GIF. Bewegung kommt aus der Scrollposition oder einmalig. R5 Jede klebende Sektion trägt --laenge IM MARKUP. R6 Kein Platzhaltertext als Schmuck. Ein Platzhalter [ … ] steht sichtbar oder er steht nicht. ─── Gliederung ───────────────────────────────────────────────────────────── 1 Seitenrahmen 2 Abschnitt 1 · Hero — Sternenfeld, Satz, Bauteil 01, Erklärstriche 3 Abschnitt 2 · Die Reihenfolge — leer 4 Abschnitt 3 · Terminal I — leer 5 Abschnitt 4 · Die sechs Wege — leer 6 Abschnitt 5 · Die Bootsfahrt — leer 7 Abschnitt 6 · Die Zusage — leer 8 Abschnitt 7 · Terminal II — leer 9 Abschnitt 8 · Das Protokoll — leer 10 Abschnitt 9 · Der Bericht — leer Farben, Schriften, Größenstufen: ausschließlich Tokens aus tokens.css. ════════════════════════════════════════════════════════════════════════════ */ /* ══ 1 · Seitenrahmen ══════════════════════════════════════════════════════ */ /* Kein padding-top: der Hero ist Nacht und läuft absichtlich unter der durchsichtigen Leiste durch. Den Abstand hält die Bühne selbst. */ .arc-web{background:var(--n0);color:var(--on-night);position:relative} /* ══ 1b · Der Sternhintergrund ═════════════════════════════════════════════ EIN Feld für die ganze Seite, fest im Fenster. Nicht eines je Bühne: fünf Leinwände mit je rund 500 Punkten kosten 2500 Kreise pro Bild, und an den Bühnengrenzen wäre eine Naht zu sehen. So läuft der Grund wirklich durch — kein Abschnitt bringt einen eigenen Hintergrund mit, keine Fläche, kein Kasten, kein Verlauf. Getrennt wird ausschließlich durch Akzente. */ /* Ein ist ein replaced element: mit inset:0 allein behält es seine intrinsische Größe von 300 × 150 und wird nicht gestreckt. width/height müssen ausdrücklich dabeistehen. */ .wb-nacht{position:fixed;inset:0;width:100%;height:100%;z-index:0; pointer-events:none;background:var(--n0)} /* Alles Inhaltliche liegt darüber. Ohne das verschwindet es hinter dem Grund. */ .wb-hero,.wb-s{position:relative;z-index:1} /* ══ 2 · Abschnitt 1 · Hero ════════════════════════════════════════════════ Die Seite rollt, aber das Bild bleibt stehen: die Bühne klebt, und der Rollweg treibt nur die Bildfolge. --laenge im Markup bestimmt, wie lang. Der Ablauf, eine reine Funktion von p: p 0,00 … 0,06 Ruhe. Der Satz steht, das Bauteil wartet auf Bild 1 p 0,04 … 0,20 Der Satz geht, das Bauteil wächst auf voll p 0,16 … 0,84 Die Bildfolge, Bild 1 → 140 p 0,86 … 1,00 Die Striche zeichnen sich nach links, dann die Marken */ .wb-hero{position:relative;height:var(--laenge,340vh);z-index:1} .wb-buehne{position:sticky;top:0;height:100svh;overflow:hidden; display:grid;place-items:center} /* Der Satzspiegel: ein Feld über die ganze Breite, 1320 × 506 wie der viewBox der Striche. Der Satz sitzt links, das Bauteil rechts, und die Marken nehmen später genau den Platz ein, den der Satz freigibt. */ .wb-feld{position:relative;z-index:1;width:100%;max-width:calc(var(--spalte) + 140px); margin-inline:auto;padding-inline:var(--rand);aspect-ratio:1320/506; margin-top:44px} /* ── Der Satz ── */ /* Der Satz sitzt links und bleibt dort. Er blendet nur aus — kein Wandern: nichts an der Seite soll sich verschieben, damit der Eindruck bleibt, man stehe still und sehe der Geschichte an einem Fleck zu. Was sich bewegt, ist der Hintergrund und das Bauteil selbst. */ .wb-satz{position:absolute;left:var(--rand);top:50%;translate:0 -50%; width:40%;max-width:34rem;opacity:var(--satz-o,1)} .wb-aufschrift{margin:0 0 20px;font:500 var(--t-mark)/1 var(--f-b); letter-spacing:.16em;text-transform:uppercase;color:var(--on-night-mute)} .wb-satz h1{margin:0 0 22px;font:300 var(--t-h1)/1.1 var(--f-b); letter-spacing:-.028em;text-wrap:balance;color:var(--on-night)} .wb-lead{margin:0 0 26px;font:400 var(--t-lead)/1.42 var(--f-b); letter-spacing:-.012em;color:var(--on-night)} .wb-preis{margin:0;font:400 var(--t-body)/1.55 var(--f-b);color:var(--on-night-mute)} .wb-preis strong{color:var(--on-night);font-weight:500} /* ── Das Bauteil ── Freigestellt heißt frei: kein Rahmen, kein Kasten, kein Lichtsaum. Der Grund ist überall derselbe Nachtgrund wie auf Startseite und Preisen — das Bauteil steht in den Sternen, nicht in einem eigenen Schimmer. right:0 statt right:var(--rand): es sitzt am äußeren Feldrand, und dadurch liegt seine rechte Kante IMMER genau auf viewBox-x 1320 — unabhängig davon, wie breit --rand gerade rechnet. Genau darauf sind die Strichanker bezogen. Es wächst um seinen RECHTEN Rand — so bleibt es am Platz und drängt nicht in den Text, während es größer wird. */ .wb-teil{position:absolute;right:0;top:50%;width:68.18%; translate:0 -50%;transform:scale(var(--teil-s,1));transform-origin:100% 50%} /* Die Weichzeichnung greift nur an der Bruchstelle des Clips und ist dort Bruchteile einer Sekunde lang zu sehen — siehe websites.js. Sonst 0, also ohne Kosten. */ .wb-teil img{display:block;width:100%;height:auto; filter:blur(calc(var(--weich,0) * 1px))} /* ── Die Erklärstriche ── Linien und Beschriftung sind HTML, nicht im Bild: markierbar, vorlesbar, in einem Zug änderbar, ohne dass ein Clip neu erzeugt werden muss. Der viewBox ist 1320 × 506. Die Ankerpunkte liegen an der LINKEN Kante der vier Platten (im 900er Bild bei x 207 · 220 · 285 · 232, plus 420 Versatz, weil das Bild rechts sitzt). Ordnet ein neuer Clip die Schichten anders, sind das die acht Zahlen, die angepasst werden. */ .wb-striche{position:absolute;inset:0;width:100%;height:100%;z-index:2; overflow:visible;pointer-events:none} .wb-striche path{fill:none;stroke:color-mix(in oklab,var(--nadel) 55%,transparent); stroke-width:1.1;stroke-dasharray:var(--l,320);stroke-dashoffset:0} .wb-striche circle{fill:var(--nadel);opacity:1} .wb-marken{position:absolute;left:var(--rand);top:0;width:26%;height:100%; z-index:2;margin:0;padding:0;list-style:none;text-align:right} .wb-marken li{position:absolute;left:0;right:0;translate:0 -50%;opacity:1} .wb-marken b{display:block;font:500 .96rem/1.25 var(--f-b);letter-spacing:-.008em; color:var(--on-night);margin-bottom:.22em} .wb-marken span{display:block;font:400 .82rem/1.38 var(--f-b);color:var(--on-night-mute)} /* Knapp über der Umbruchschwelle ist das Feld nur rund 390 px hoch, der engste Ankerabstand also 63 px. Mit der vollen Textgröße blieben davon 4 px Luft — zu wenig, um sich auf Schriftmetriken zu verlassen. Eine Stufe kleiner macht daraus 9 px, ohne dass sich auf breiten Schirmen etwas ändert. */ @media (max-width:1200px){ .wb-marken b{font-size:.88rem} .wb-marken span{font-size:.76rem} } /* ══ 3 · Die vier Schichtbühnen ════════════════════════════════════════════ A Prisma · B Grundriss · C Säulen · D Schild. Alle vier gleich gebaut: ein Abschnitt von 220 vh, darin eine klebende Bühne von 100 vh. Man scrollt, die Bühne bleibt stehen, das Objekt verändert sich. Der Auftrag an das Skript ist klein: es setzt --q von 0 bis 1 und ein Merkmal data-ruht, sobald die Bewegung durch ist. Alles Weitere steht hier. Animiert werden ausschließlich transform, opacity und Maskenpositionen. KEIN eigener Hintergrund. Der Sternhintergrund aus 1b läuft durch und ist rund um jedes Objekt sichtbar. Getrennt wird nur durch Akzente — die Haarlinie unter dem Absatz und die Linien an den Marken. */ /* Grundzustand (R1): die vier Bühnen stehen untereinander, jede vollständig und fertig lesbar. Die waagerechte Bahn, das Kleben und die Leiste kommen erst im Bewegungsfall dazu — im min-width-Block weiter unten. */ .wb-quer{position:relative;z-index:1} .wb-bahn{position:relative;z-index:1} .wb-s-buehne{display:grid;place-items:center;padding:9vh 0} /* ── Die Checkpoint-Leiste ── Dieselbe Mechanik wie die Ablauf-Schiene der Startseite, nur um 90 Grad gedreht: eine Haarlinie, eine Füllung im Akzent, vier Punkte. Die Punkte sitzen auf --p = i/(n-1), also genau dort, wo die zugehörige Bühne im Fahrweg steht — 0, ⅓, ⅔, 1. Die Füllung ist --f = x/(n-1) und damit dasselbe Maß: was die Bahn gefahren ist, steht auch in der Leiste. Nur im Bewegungsfall: gestapelt trägt jede Bühne ihre Überschrift selbst, dann wäre die Leiste eine zweite Gliederung ohne Aufgabe. */ .wb-leiste{display:none} .wb-s-feld{position:relative;width:100%;max-width:calc(var(--spalte) + 140px); margin-inline:auto;padding-inline:var(--rand);display:grid;align-items:center; grid-template-columns:minmax(0,32rem) minmax(0,1fr);gap:clamp(28px,4vw,72px)} /* ── Der Text ── */ .wb-s-satz{max-width:32rem} .wb-s-satz h2{margin:0 0 18px;font:400 clamp(1.6rem,1.2rem + 1.6vw,2.6rem)/1.14 'Source Serif 4',Georgia,serif;letter-spacing:-.014em;text-wrap:balance; color:var(--on-night)} .wb-s-lauf{margin:0;font:400 var(--t-body)/1.6 var(--f-b);color:var(--on-night-mute); max-width:34ch;text-wrap:pretty} /* Die einzige Trennung im Abschnitt: eine Haarlinie im Akzent, die von links aufzieht. Keine Fläche, kein Rahmen. */ .wb-s-strich{margin:26px 0 0;border:0;height:1px;background:var(--nadel); opacity:.5;transform:scaleX(1);transform-origin:0 50%} /* ── Die Marken ── Echter Text im ausgelieferten HTML: markierbar, vorlesbar, für Suchmaschinen lesbar. Die Linie daneben ist Dekoration und trägt keine Aussage. */ .wb-s-marken{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px} .wb-s-marken li{position:relative;font:400 .76rem/1.35 var(--f-m);letter-spacing:.07em; text-transform:uppercase;color:var(--on-night-mute);opacity:1} .wb-s-marken li::after{content:"";position:absolute;left:calc(100% + 14px);top:50%; width:var(--lang,72px);height:1px;background:var(--nadel);opacity:.45; transform:scaleX(1);transform-origin:0 50%} @media (max-width:1023px){ .wb-s-marken li::after{display:none} } /* ── Das Objekt ── Freigestellt, ohne Rahmen, ohne Kasten. Es darf am rechten Rand überstehen. perspective liegt HIER, das gedrehte Bild ist direktes Kind (R2). */ .wb-s-teil{margin-right:calc(var(--rand) * -.55);perspective:1400px} /* Die Motive sind FREIGESTELLT ausgeliefert — der Weg, den der Auftrag als den besseren nennt. Damit fällt hier jede Maskengeometrie weg, die vorher nur Grauschleier verdecken sollte. Gemessen statt geraten: eine Flutfüllung vom Bildrand nimmt nur, was mit dem Rand zusammenhängt UND heller als 206 im dunkelsten Kanal ist. Die Schwelle ist keine Vorliebe — zwischen 250 und 200 wächst der abgetragene Anteil bei allen vier Motiven nur um 0,5 bis 4,4 Prozentpunkte, das Feld ist also frei von weißen Brücken ins Objekt hinein. Bei der Tresortür 242, weil ihre helle Oberkante sonst mitgegangen wäre (geprüft, nicht vermutet). Bei ihr blieb danach ein EINGESCHLOSSENER Weißstreifen an der Unterkante stehen: der Bodenschatten trennt ihn vom Bildrand, die Flut kommt nicht heran. Weil er diagonal läuft, trifft ihn kein waagerechter Schnitt ohne die Tür zu beschneiden — abgetragen wurde deshalb spaltenweise von unten nach oben, bis fünf dunkle Pixel in Folge die echte Unterkante melden (Tiefe 4 bis 80 px, Median 12), plus ein Pixel weicher Rand. Danach auf die Silhouette beschnitten und auf 1200 px verkleinert; die Kantenglättung kommt aus dem Verkleinern, nicht aus einer Kennlinie. Kein Pixel im Inneren wird umgerechnet — daher keine blockigen Flecken aus vormultipliziertem Alpha. Vier Motive, 777 kB. Gestapelt entscheidet die BREITE, nicht die Höhe: die Motive sind hochkant, und eine Höhenschranke ließ links davon eine halbe Zeile leer stehen. Im Fluss gibt es keinen Grund, auf Fensterhöhe zu begrenzen — 30 rem breit, mittig, Höhe nach Seitenverhältnis. */ .wb-s-teil img{display:block;width:min(100%,30rem);height:auto; margin-inline:auto} /* Die früheren Sonderfälle — 24 % Bodenmaske beim Prisma-Fuß, das gemessene Polygon am Schild — sind mit den freigestellten Motiven weggefallen. Kein Motiv braucht mehr eine eigene Regel. */ /* Der Wischer steht NICHT hier, sondern im min-width-Block weiter unten. Grund ist Spezifität: .wb-s[data-wischer="hoch"] .wb-s-teil img ist (0,4,1), ein .wb-s-teil img in einer Schmal-Regel nur (0,1,1) — und ein Media Query erhöht die Spezifität nicht. Eine Schmal-Überschreibung könnte die Maske also nie abschalten. Bliebe dabei ein --q von einem früheren breiten Stand stehen, wäre das Säulenbild in der Schmal-Fassung unsichtbar — und mit ihm die Rangliste, die der Abschnitt behauptet. */ /* ── Die Station ohne Bild ── Die erste stellt die These auf und nennt die vier Schichten als Marken — sie braucht kein Motiv, die Aufzählung IST ihr Bild. Eine zweispaltige Bahn mit leerer rechter Hälfte sähe nach vergessenem Inhalt aus, also eine Spalte, mittig gesetzt, eine Stufe größer: eine Titelkarte vor der Reihe. */ .wb-s[data-ohne-bild="ja"] .wb-s-feld{grid-template-columns:minmax(0,1fr)} .wb-s[data-ohne-bild="ja"] .wb-s-satz{max-width:44rem;margin-inline:auto} .wb-s[data-ohne-bild="ja"] h2{font-size:clamp(1.9rem,1.3rem + 2.1vw,3.1rem)} .wb-s[data-ohne-bild="ja"] .wb-s-lauf{max-width:44ch; font-size:clamp(1.02rem,.98rem + .3vw,1.18rem)} /* ── Die Pointe im vierten Abschnitt ── Sie kommt zuletzt und bleibt stehen. Vorher lief eine rote Haarlinie quer über die Bahn: die Pointe war absolut auf 34 % der Feldhöhe gesetzt, damit sie über den Säulen saß. Mit den hochkanten Motiven liegt diese Höhe mitten im Absatz — Linie und Satz lagen über dem Text. Jetzt steht sie im Fluss unter den Marken, in der Textspalte, ohne Linie. */ .wb-s-quer{grid-column:1;margin:22px 0 0;font:400 .74rem/1.4 var(--f-m); letter-spacing:.06em;color:var(--on-night);opacity:1} .wb-s-quer span{display:block} /* ── Die Lichtlinien im vierten Abschnitt ── Sie kommen von links, sind unterschiedlich lang und hören an der Tür auf. Kein Aufprall, kein Funke, keine Farbe, kein Zähler. Die Tür reagiert nicht — ein Ding, das sich wehren muss, wirkt bedroht; ein Ding, an dem etwas endet, wirkt sicher. Sie laufen nur, solange die Bühne im Bild ist: eine Endlosanimation auf einer Seite, die man nicht sieht, ist Rechenlast ohne Aussage (R4). */ .wb-s-linien{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden} .wb-s-linien i{position:absolute;left:0;height:1px;width:var(--b,20%); background:linear-gradient(90deg,transparent,var(--nadel-hell)); opacity:0;transform:translateX(-100%)} /* ── Bewegung ───────────────────────────────────────────────────────────── Ab hier gilt nur, was das Skript treibt. Ohne data-bewegung="ja" bleibt alles auf den ruhenden Werten oben stehen — vollständig und lesbar. Die Breitenbedingung steht HIER, an der Regel selbst, und nicht als Überschreibung in der Schmal-Fassung weiter unten. Der Grund ist Spezifität: [data-bewegung="ja"] .wb-marken li ist (0,2,1), ein bloßes .wb-marken li nur (0,1,1) — und ein Media Query erhöht die Spezifität NICHT. Eine Schmal-Regel könnte diese Zeile also nie schlagen, egal in welcher Reihenfolge sie steht. Genau daran blieben die Beschriftungen unter 1024 px unsichtbar; dort sind auch die Striche ausgeblendet, die Vier-Schichten-Aussage hatte damit gar keinen Träger mehr. */ /* ══ Der Scroll-Effekt der Schichten ══════════════════════════════════════ Diese Regeln gelten in BEIDEN Fassungen — quer wie gestapelt. Sie standen vorher im Breiten-Block; damit war die Schmal-Fassung stumm, obwohl der Effekt dort genauso trägt. Was den Unterschied macht, ist nur die Quelle von --q: quer der Fahrweg der Bahn, gestapelt die Höhe des Motivs im Fenster (websites.js). Der Grundzustand bleibt der Endzustand — var(--q,1) heißt: ohne Zeiger steht alles fertig da, und bei prefers-reduced-motion greift [data-bewegung] nie. */ /* ── Der Wischer ── Eine weiche Maskenkante, die über das Bild läuft. Waagerecht für die Platte und das Strömen, senkrecht für die stehenden Platten des Inhalts — sie ziehen vom Boden auf. Für die Übersicht und die Tür kein Wischer: die eine hat kein Motiv, die andere steht von Anfang an ruhig da. */ [data-bewegung="ja"] .wb-s-teil img{ --w:calc(var(--q,1) * 122% - 11%); -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--w) - 9%),transparent var(--w)); mask-image:linear-gradient(90deg,#000 calc(var(--w) - 9%),transparent var(--w))} [data-bewegung="ja"] .wb-s[data-wischer="hoch"] .wb-s-teil img{ -webkit-mask-image:linear-gradient(0deg,#000 calc(var(--w) - 9%),transparent var(--w)); mask-image:linear-gradient(0deg,#000 calc(var(--w) - 9%),transparent var(--w))} [data-bewegung="ja"] .wb-s[data-wischer="nein"] .wb-s-teil img{ -webkit-mask-image:none;mask-image:none} /* Die Haarlinie zieht sich mit dem Wischer auf, nicht davor. */ [data-bewegung="ja"] .wb-s-strich{transform:scaleX(var(--q,1)); transition:transform .18s linear} /* Die Marken erscheinen erst, wenn die Bewegung zur Ruhe gekommen ist — versetzt um 90 ms. Der Versatz hängt hier an der Zeit und nicht am Scrollen, weil er auf einen Zustandswechsel reagiert: data-ruht kippt einmal, und beim Zurückscrollen kippt es sauber zurück. */ [data-bewegung="ja"] .wb-s-marken li{opacity:0;transform:translateY(6px); transition:opacity .5s var(--ease) calc(var(--i,0) * 90ms), transform .5s var(--ease) calc(var(--i,0) * 90ms)} [data-bewegung="ja"] .wb-s-marken li::after{transform:scaleX(0); transition:transform .55s var(--ease) calc(var(--i,0) * 90ms + 120ms)} [data-bewegung="ja"] .wb-s[data-ruht="ja"] .wb-s-marken li{opacity:1;transform:none} [data-bewegung="ja"] .wb-s[data-ruht="ja"] .wb-s-marken li::after{transform:scaleX(1)} /* Die Pointe zuletzt, 300 ms nach der vierten Marke. */ [data-bewegung="ja"] .wb-s-quer{opacity:0; transition:opacity .6s var(--ease) .3s} [data-bewegung="ja"] .wb-s[data-ruht="ja"] .wb-s-quer{opacity:1;transition-delay:.66s} @media (min-width:1024px){ [data-bewegung="ja"] .wb-satz{transition:none} /* Die Striche liegen im Bewegungsfall zu Beginn ungezeichnet da. --s läuft von 0 auf 1; jede Linie startet später als die vorige, das rechnet das Skript in vier eigene Werte um. */ [data-bewegung="ja"] .wb-striche path{stroke-dashoffset:calc(var(--l,320) * (1 - var(--s,0)))} [data-bewegung="ja"] .wb-striche circle{opacity:var(--s,0)} [data-bewegung="ja"] .wb-marken li{opacity:var(--m,0)} /* ── Die Querbahn ─────────────────────────────────────────────────────── Senkrecht gerollt, waagerecht gefahren. Der Abschnitt ist n × 190 vh hoch, die Bühne klebt, und der Rollweg verschiebt die Bahn um je eine Fensterbreite. Jede Bühne steht 68 Prozent ihres Segments still — dort läuft ihre eigene Bewegung — und fährt im Rest zur nächsten. Die Bahn ist n-mal so breit wie die Bühne, jedes Feld also 100 / n. Verschoben wird um -100 % / n der BAHN, das ist genau eine Bühnenbreite; ein vw wäre falsch, weil vw die Bildlaufleiste mitzählt. overflow:hidden je Feld: das Objekt darf am rechten Rand überstehen (margin-right ist negativ), und ohne Beschnitt ragte es in das nächste Feld hinein und wäre während der Fahrt doppelt zu sehen. */ [data-bewegung="ja"] .wb-quer{height:var(--laenge,950vh)} [data-bewegung="ja"] .wb-quer-buehne{position:sticky;top:0;height:100svh; overflow:hidden} /* z-index 3: die Bahn liegt VOR dem Ringfeld (2). Nur so deckt die Panzertür die sechs Karten ab, statt sie durchscheinen zu lassen. Der Rest der Bahn ist durchsichtig, der Ring ist also weiter zu sehen — und nach dem Tausch ist die Tür ohnehin auf Deckkraft 0. */ /* Sobald der Ring bedienbar ist, nimmt die Bahn keine Zeiger mehr an. Sie liegt auf z-index 3 und deckte damit auch jeden Griff ab — der Ring ließ sich nicht mehr drehen. Die Deckung braucht sie nur fürs Bild. */ [data-bewegung="ja"] .wb-quer[data-bedienbar="ja"] .wb-bahn{pointer-events:none} [data-bewegung="ja"] .wb-bahn{z-index:3;display:flex;height:100%; width:calc(var(--n,4) * 100%); transform:translate3d(calc(var(--x,0) * -100% / var(--n,4)),0,0); will-change:transform} [data-bewegung="ja"] .wb-bahn .wb-s{flex:0 0 calc(100% / var(--n,4)); height:100%;overflow:hidden;display:grid;place-items:center; padding-top:clamp(120px,16vh,180px)} [data-bewegung="ja"] .wb-bahn .wb-s-buehne{width:100%;padding:0} /* Auf der Bühne gilt die Höhe des Fensters, nicht die des Motivs: oben liegt die Leiste, unten soll Luft bleiben. Alle vier bekommen dieselbe Bildhöhe, sonst hätte jeder Abschnitt ein anderes Maß — die Tresortür kommt mit 385 px Kantenlänge, das Gitter mit 1200. width:auto ist hier keine Kleinigkeit: mit width:100 % wäre die Box breiter als das Motiv, und der Wischer maskiert die BOX. Er lief dann erst auf Leerraum und traf das Motiv gestaucht. Aspektrichtige Box heißt: die Maske sitzt am Motiv. object-fit:contain bleibt als Netz gegen Verzerrung, wenn max-width greift. */ [data-bewegung="ja"] .wb-bahn .wb-s-teil img{width:auto;max-width:100%; height:min(calc(100svh - 300px),620px); object-fit:contain;object-position:100% 50%; margin-left:auto;margin-right:0} /* ── Die Leiste ── */ [data-bewegung="ja"] .wb-leiste{display:block;position:absolute;z-index:3; left:50%;translate:-50% 0;top:clamp(94px,11vh,126px); width:100%;max-width:calc(var(--spalte) + 140px); padding-inline:var(--rand);pointer-events:none} /* --vor ist die Anlaufstrecke LINKS vom ersten Punkt, --ueber der Überstand hinter dem letzten. Die Schiene reicht über beide Enden hinaus; der Strahl fährt die Anlaufstrecke zuerst und am Ende hinten hinaus. */ [data-bewegung="ja"] .wb-leiste-innen{position:relative; --vor:clamp(30px,3.4vw,58px);--ueber:clamp(24px,2.6vw,44px)} [data-bewegung="ja"] .wb-leiste-schiene{position:absolute;top:0; left:calc(-1 * var(--vor));right:calc(-1 * var(--ueber)); height:1px;background:var(--nadel);opacity:.24} /* Der Strahl ist GESCHWISTER der Schiene, nicht ihr Kind: die Schiene steht auf 24 Prozent Deckkraft, und die erbte er mit — daran war er unsichtbar. Drei Abschnitte, je 0 bis 1: --a die Anlaufstrecke, --b die Spannweite zwischen erstem und letztem Punkt, --c der Überstand. Deshalb width und nicht scaleX: Anlauf und Überstand sind feste Längen, die Spannweite ist ein Prozentsatz — eine Skalierung kann beides nicht zugleich treffen. */ [data-bewegung="ja"] .wb-leiste-fuell{position:absolute;top:0; left:calc(-1 * var(--vor));height:1px;background:var(--nadel-hell); box-shadow:0 0 9px color-mix(in oklab,var(--nadel-hell) 45%,transparent); width:calc(var(--a,0) * var(--vor) + var(--b,0) * 100% + var(--c,0) * var(--ueber))} [data-bewegung="ja"] .wb-leiste-punkte{position:relative;height:42px; margin:0;padding:0;list-style:none} [data-bewegung="ja"] .wb-leiste-punkte li{position:absolute;top:0; left:calc(var(--p,0) * 100%);translate:-50% 0; display:grid;justify-items:center;gap:13px;opacity:.38; transition:opacity .45s var(--ease)} [data-bewegung="ja"] .wb-leiste-punkte i{width:7px;height:7px;margin-top:-3px; border-radius:50%;background:var(--on-night-mute); transition:background-color .3s var(--ease),transform .4s var(--ease)} [data-bewegung="ja"] .wb-leiste-punkte span{font:400 .68rem/1 var(--f-m); letter-spacing:.1em;text-transform:uppercase;color:var(--on-night); white-space:nowrap} [data-bewegung="ja"] .wb-leiste-punkte li[data-an="ja"]{opacity:1} [data-bewegung="ja"] .wb-leiste-punkte li[data-an="ja"] i{ background:var(--nadel-hell);transform:scale(1.35)} /* Erster und letzter Punkt bleiben auf ihrer Marke — nur die Beschriftung rückt nach innen, sonst stünde sie halb außerhalb des Satzspiegels. */ [data-bewegung="ja"] .wb-leiste-punkte li:first-child span{ transform:translateX(calc(50% - 4px))} [data-bewegung="ja"] .wb-leiste-punkte li:last-child span{ transform:translateX(calc(-50% + 4px))} /* ── Die vier Schichtbühnen ── Grundzustand oben ist der Endzustand: Wischer voll, Marken sichtbar, Haarlinie gezogen. Erst hier wird daraus eine Bewegung. Bei prefers-reduced-motion greift dieser Block nie — dann zeigt jeder Abschnitt seinen Endzustand, statt leer zu bleiben. */ /* Wischer, Haarlinie, Marken und Pointe stehen jetzt ausserhalb dieses Blocks — sie gelten in beiden Fassungen. Hier bleibt nur, was die Querbahn allein braucht. */ /* B · Die Platte dreht sich um die senkrechte Achse. Höchstens sechs Grad über den ganzen Abschnitt — mehr wirkt wie ein Karussell. */ [data-bewegung="ja"] .wb-s[data-dreht="ja"] .wb-s-teil img{ transform:rotateY(calc((var(--q,1) - .5) * 6deg))} /* Die Lichtlinien im fünften Abschnitt laufen nur, solange die Bühne im Bild ist. */ [data-bewegung="ja"] .wb-s[data-sicht="ja"] .wb-s-linien i{ animation:wb-strahl var(--d,3.4s) linear var(--v,0s) infinite} } @keyframes wb-strahl{ 0% { opacity:0; transform:translateX(-100%) } 7% { opacity:.8 } 30% { opacity:.8; transform:translateX(var(--z,300%)) } 36%,100% { opacity:0; transform:translateX(var(--z,300%)) } } /* ══ 7 · Abschnitt 7 · Der Übergang in den Stilring ════════════════════════ Die Naht zwischen der Sicherheitsstation und dem Ring. Fünf Akte, alles reine Funktion der Scrollposition p, alles umkehrbar. Bewegt werden ausschließlich transform und opacity. ── Die Geometrie ───────────────────────────────────────────────────────── Gesetzt, nicht gemessen — mit Begründung, weil der Auftrag sie mir überlässt: --karte-b Kartenbreite. clamp(19rem, 30vw, 30rem): bei 1440 px sind das 432 px, also 30 % der Bühne. Die Überschrift der vordersten Karte steht damit bei rund 28 px — lesbar, keine Miniatur. Unter 30 vw bliebe von den Nachbarn nichts übrig, über 30 rem drängt die vorderste Karte die seitlichen aus dem Bild. --karte-h 4/3 wie in umlauf.html. Eine Seitenvorschau ist breiter als hoch. --radius 0,9 × Kartenbreite. Beim regelmäßigen Sechseck wäre der Radius 0,866 × Seitenlänge, die Nachbarn stießen dann Kante an Kante zusammen. 0,9 legt einen sichtbaren Spalt dazwischen, ohne den Ring auseinanderzuziehen. --tiefe 1700 px perspective, aus umlauf.html übernommen. Flacher wirkt die 60-Grad-Karte wie ein gekippter Streifen, tiefer verschwindet die Räumlichkeit. ── Die drei Tausch-Zahlen (Akt III) ────────────────────────────────────── Blende und Karte sind bei p 0,55 dieselbe Linie. Damit sie es sind, leiten sich alle drei Werte aus DERSELBEN Quelle ab und stehen nicht zweimal da: x-Achse die Mitte der Bühne — der Ring ist zentriert Höhe --karte-h Kante --linie-farbe Der Versatz zwischen Stationslage und Kartenmitte wird zur Laufzeit GEMESSEN (websites.js) — an denselben Rechtecken, die der Browser ausliefert, statt an Prozentwerten, die nur an einer Fensterbreite stimmen. Grundkurve ist --ease für die ganze Seite. Zwei Akte weichen ab, begründet an ihrer Regel: Akt I fährt mit kurven.raus (Masse, die ankommt und nicht nachfedert), Akt II schließt mit kurven.rein (eine Blende beschleunigt zum Schluss, sie bremst nicht). */ /* Die Geometrie hängt an der Querbahn, weil die Akte in IHRER Bühne laufen. Kein eigener Abschnitt, keine eigene Höhe — eine Bühne, ein Bild, eine Scrollposition. */ .wb-quer{ /* Größer als zuerst geplant, aus zwei Gründen: der Auftrag verlangt, dass man auf der vordersten Karte eine Überschrift LIEST, und die Panzertür schrumpft beim Schließen auf diese Höhe — je kleiner die Karte, desto mehr verliert die Tür unterwegs. Der zweite Term ist der Deckel gegen die Fensterhöhe. Ohne ihn hängt die Karte allein an der Breite, während Kopfband und Schild an der Höhe hängen: auf einem 1440 × 720 lief die Karte in beide hinein. 340 px sind Kopfband, Schildband und zwei Atemabstände. */ --karte-b:min(clamp(21rem,34vw,33rem),calc((100svh - 340px) / .95)); --karte-h:calc(var(--karte-b) * .95); --radius:calc(var(--karte-b) * .9); --tiefe:1700px; --neig:-6deg; --ring-x:62%; --ring-y:46%; --linie-b:2px; --linie-farbe:var(--on-night)} /* Der Halter. Breit liegt er absolut über der Bühne — dieselbe Geometrie wie ohne ihn, alle Ringteile beziehen sich weiter auf inset:0. Schmal wird er zur eigenen klebenden Bühne, siehe Schmal-Fassung. */ /* Das Feld liegt mit inset:0 über der ganzen Bühne. Solange die Bahn fährt, hat es dort nichts zu suchen: die sechs Karten standen sonst schon bei Schicht 01 bis 04 im Bild und druckten durch die freigestellte Tür hindurch. visibility statt opacity — das nimmt sie aus dem Bild UND aus dem Zeiger, und der Schnitt fällt nicht auf, weil sich am Ring in diesem Bild nichts bewegt. data-akte schreibt der Zeichner, sobald die Bahn steht. */ .wb-ring-feld{position:absolute;inset:0;z-index:2;pointer-events:none; visibility:hidden} .wb-quer[data-akte="ja"] .wb-ring-feld{visibility:visible} .wb-ring-halter{position:absolute;inset:0} .wb-quer[data-bedienbar="ja"] .wb-ring-feld{pointer-events:auto} /* ── Akt II · Der Satz ── Er sitzt links im Satzspiegel und wandert nicht — Klasse Enthüllen, nur Deckkraft. Verschöbe er sich, läse sich das als Bewegung der Seite. */ .wb-ring-satz{position:absolute;left:var(--rand);top:50%;translate:0 -50%; z-index:4;width:min(34rem,42%);opacity:var(--satz-o,0)} .wb-ring-wende{margin:0;font:300 clamp(1.5rem,1.1rem + 1.5vw,2.4rem)/1.16 var(--f-b); letter-spacing:-.026em;text-wrap:balance;color:var(--on-night)} /* ── Akt I + II · Die Panzertür der Station ── Es gibt kein zweites Standbild. Die Tür, die fünf Stationen lang gehalten hat, ist die Tür, die zur Linie wird — ein Klon darunter hätte dasselbe Bild zweimal gezeigt und an der Naht einen Sprung gehabt. --rg-* schreibt der Zeichner. Vorgabe ist Identität, also die Stationslage: ohne gelaufenen Akt steht die Tür genau da, wo die Station sie hat. */ [data-bewegung="ja"] .wb-quer .wb-s[data-block="06-sicherheit"] .wb-s-teil img{ transform:translate(calc(var(--rg-tx,0) * 1px),calc(var(--rg-ty,0) * 1px)) scaleX(var(--rg-sx,1)) scaleY(var(--rg-sy,1)); opacity:var(--rg-o,1)} /* Der Satz der Station geht, damit der Satz der Wende an seine Stelle kann. Er wandert nicht — er blendet ab. */ [data-bewegung="ja"] .wb-quer .wb-s[data-block="06-sicherheit"] .wb-s-satz{ opacity:var(--st-o,1)} /* Die Leiste hat ihre Aufgabe erfüllt, sobald die Bahn steht. Zwei Fortschrittsanzeigen gleichzeitig wären zwei Geschichten. */ [data-bewegung="ja"] .wb-quer .wb-leiste{opacity:var(--leiste-o,1)} /* ── Akt II → III · Die Wendelinie ── Das leerste Bild der Seite. Zwei Pixel breit, so hoch wie die Karte, in der hellen Kantenfarbe. Kein Schein, kein Halo — der Auftrag verbietet die Ankündigung, und eine Linie mit Leuchten ist eine Ankündigung. */ .wb-wende{position:absolute;left:var(--ring-x);top:var(--ring-y);z-index:2; width:var(--linie-b);height:var(--karte-h); translate:-50% -50%;transform:scaleY(var(--we-s,1)); background:var(--linie-farbe); opacity:var(--we-o,0);pointer-events:none} /* ── Der Ring ── perspective hier, der gedrehte Körper ist direktes Kind (R2). Weder filter noch opacity auf dem Körper — er trägt preserve-3d (R3). */ /* pointer-events und cursor erst, wenn der Ring steht. Vorher liegt die Fläche über der ganzen Bühne und der Greifzeiger versprach eine Bedienung, die es während Akt I–III nicht gibt. */ .wb-umlauf{position:absolute;inset:0;z-index:1; perspective:var(--tiefe);perspective-origin:var(--ring-x) var(--ring-y); touch-action:pan-y;user-select:none;pointer-events:none} .wb-quer[data-bedienbar="ja"] .wb-umlauf{pointer-events:auto;cursor:grab} .wb-umlauf:focus-visible{outline:2px solid var(--nadel);outline-offset:-4px} .wb-umlauf[data-greift="ja"]{cursor:grabbing} /* translateZ(-1 × --radius) auf dem Körper, +--radius auf der Fläche: die vorderste Karte steht damit bei NETTO z 0 und wird von der Perspektive nicht vergrößert. Das ist keine Kosmetik, es ist die Bedingung für den Tausch — bei z = +389 px rendert die Karte 27 % größer als ihr CSS-Kasten, und die Linie der Blende träfe die Linie der Karte um genau diese 27 % daneben. Die Nachbarn liegen dadurch hinten (z = −0,5 × Radius), werden kleiner und dunkler: der Ring wird zum Körper, ohne dass eine Skalierung nachhilft. */ .wb-ring-koerper{position:absolute;left:var(--ring-x);top:var(--ring-y);width:0;height:0; transform-style:preserve-3d; /* translateZ VOR rotateY: die Zurücksetzung darf nicht mitdrehen. Stand sie hinter der Drehung, lief sie im gedrehten Koordinatensystem — dann kreiste der ganze Körper um die Bühnenmitte, statt dass die Karten um die Ringmitte kreisen, und keine Karte kam je vorne an. */ transform:translate(-50%,-50%) rotateX(var(--neig)) translateZ(calc(-1 * var(--radius))) rotateY(calc(var(--dreh,0) * 1deg))} /* Die Flächen tragen filter und opacity, also KEIN preserve-3d (R3) — sie haben auch keine 3D-Kinder, die es bräuchten. --z ist der Radius je Fläche: in Akt IV fahren die fünf hinteren von 0 auf --radius heraus. Vor Akt IV stehen sie hinter der vordersten Karte, nicht im Nichts (Akt IV, erster Absatz). */ /* Die Vorgabewerte SIND der Zustand vor Akt I, nicht ein neutraler Nullpunkt: die fünf hinteren stehen klein, dunkel und bei 8 % Deckkraft hinter der vordersten, und alle sechs stehen hochkant, weil noch keine aufgegangen ist. Vorher standen sie ohne gelaufenen Zeichner als sechs deckende flache Karten übereinander — sichtbar im Einzelbild vor dem ersten rAF-Lauf und bei jedem Einstieg mitten in die Seite. */ .wb-flaeche{position:absolute;left:50%;top:50%;padding:0;cursor:pointer; --auf:1;--z:0;--k-o:.08; backface-visibility:hidden;-webkit-backface-visibility:hidden; width:var(--karte-b);height:var(--karte-h); margin-left:calc(var(--karte-b) / -2); margin-top:calc(var(--karte-h) / -2); border:1px solid color-mix(in oklab,var(--linie) calc(35% + var(--vorn,0) * 65%),transparent); border-radius:5px;overflow:hidden;background:var(--n1); /* Reihenfolge ist hier die ganze Sache: erst auf die Ringposition drehen, dann auf den Radius hinaus, und ERST DANN um die eigene Achse aufgehen. Stünde die Öffnungsdrehung vorn, liefe translateZ im gedrehten Koordinatensystem — nach rotateY(90deg) zeigt die lokale z-Achse in +x, und die Karte wanderte um einen Radius zur Seite statt zum Betrachter. Gemessen war das ein 67 px breiter Streifen 251 px neben der Wendelinie: der Tausch wäre sichtbar gewesen, also genau der Fehler, den der Auftrag als den einen ausschließt. */ transform:rotateY(calc(var(--i) * 60deg)) translateZ(calc(var(--z,0) * var(--radius))) rotateY(calc(var(--auf,0) * 90deg)); /* --bunt ist der Farbmoment, in den Ring hineingerechnet: 0 bis p 0,90, dann 1. Die Entwürfe tragen ihre Gestaltung von Anfang an — Raster, Schrift, Helligkeit —, nur die Sättigung kommt mit dem Schlag. Damit geht die Karte in Akt III grau auf, wie der Auftrag es verlangt, und es entsteht trotzdem kein zweiter Farbort. */ filter:brightness(calc(.42 + var(--vorn,0) * .58)) saturate(calc((.55 + var(--vorn,0) * .45) * var(--bunt,0))); transition:filter .26s linear; opacity:calc(var(--k-o,1) * var(--z,0)); box-shadow:0 calc(30px + var(--vorn,0) * 40px) calc(60px + var(--vorn,0) * 60px) -30px rgba(0,0,0,calc(.5 + var(--vorn,0) * .4))} /* Die vorderste Karte ist von Anfang an draußen und deckend — sie ist die, die aus der Blende aufgeht. */ .wb-flaeche:first-child{--z:1;--k-o:1} .wb-flaeche:focus-visible{outline:2px solid var(--nadel);outline-offset:3px} /* Die beleuchtete Kante. Solange die Karte hochkant steht (--auf 1), IST ihre linke Kante die Wendelinie — gleiche Breite, gleiche Farbe, gleiche Höhe. Sie verschwindet, während die Karte aufgeht. Damit wird an der Kante getauscht und nicht auf der Fläche: es gibt in keinem Einzelbild zwei Oberflächen gleichzeitig. */ .wb-flaeche::before{content:"";position:absolute;left:0;top:0;bottom:0;z-index:3; width:var(--linie-b);background:var(--linie-farbe); opacity:var(--auf,0);pointer-events:none} /* Die hinteren Flächen dunkeln ab — das macht aus dem Karussell einen Körper. Ein Verlauf, keine Deckkraft: Deckkraft ließe den Grund durchscheinen. */ .wb-flaeche::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(7,10,20,0) 40%,rgba(7,10,20,.55)); opacity:calc(1 - var(--vorn,0))} /* ── Die graue Kartenfläche ── Der Pflichtzustand aus Akt III: die Karte geht GRAU auf. Alle sechs zeigen dieselbe Seite — Selke, gleiche Überschriften, gleiche Struktur. Nur so ist später sichtbar, dass die Gestaltung wechselt und nicht der Inhalt. Fotos und Preise stehen als sichtbare Platzhalter. Nichts erfunden, nichts geschätzt. Alle Maße hängen an --karte-b, nicht an rem: die Karte ist eine verkleinerte Seite, und darin müssen die Verhältnisse stimmen, nicht die Punktgrößen. */ .wb-karte{position:absolute;inset:0;display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:auto auto auto auto minmax(0,1fr); gap:calc(var(--karte-b) * .028);align-content:start; padding:calc(var(--karte-b) * .062);background:#15171C;text-align:left; /* Die Karte hat eine feste Fläche (inset:0). Was nicht passt, wird beschnitten und läuft nicht über den Rand hinaus in die Nachbarkarte. */ overflow:hidden} .wb-karte-kopf{grid-column:1/-1;grid-row:1;display:flex;align-items:baseline;gap:.6em} .wb-karte-kopf b{font:600 calc(var(--karte-b) * .052)/1 var(--f-b); letter-spacing:-.02em;color:#C8CBD2} /* Die Grautöne der Karte sind gegen #15171C auf AA gerechnet: #868C99 ergibt 5,37:1, #A8ACB4 7,8:1. Die vorigen #5C6068 und #6E727C lagen bei 2,84 und 3,72 — für sichtbare Platzhalter, die der Auftrag ausdrücklich verlangt, ist das zu wenig. Grau bleibt es trotzdem: Akt III fordert die graue Karte. */ .wb-karte-kopf span{font:400 calc(var(--karte-b) * .026)/1 var(--f-m); letter-spacing:.1em;text-transform:uppercase;color:#868C99} /* Jedes Feld liegt fest in Zeile und Spalte. Ohne das entscheidet die automatische Verteilung, und ein Element über die ganze Breite (Titel, Linie) rutscht hinter das Foto, weil seine Zeile dort nicht mehr frei ist. Genau das sah man als verschobene und übereinanderliegende Schrift. */ .wb-karte-h1{grid-column:1/-1;grid-row:2; font:300 calc(var(--karte-b) * .066)/1.12 var(--f-b); letter-spacing:-.024em;color:#DCDEE3} .wb-karte-abs{grid-column:1;grid-row:3; font:400 calc(var(--karte-b) * .03)/1.5 var(--f-m); color:#868C99} /* Die Linie trennt Text von Liste — sie gehört in die Textspalte. Über die ganze Breite würde sie durch das Foto laufen. */ .wb-karte-linie{grid-column:1;grid-row:4;height:1px;background:#2A2D34} .wb-karte-liste{grid-column:1;grid-row:5;display:grid; gap:calc(var(--karte-b) * .016);align-content:start} .wb-karte-liste span{display:flex;justify-content:space-between;gap:1em; font:400 calc(var(--karte-b) * .028)/1.3 var(--f-b);color:#A8ACB4} .wb-karte-liste i{font-style:normal;font-family:var(--f-m);color:#868C99} .wb-karte-foto{grid-column:2;grid-row:3/6;display:grid;place-items:center; border:1px dashed #3A3E46;border-radius:3px; background-image:var(--bild,none);background-size:cover; background-position:50% 50%;background-repeat:no-repeat;overflow:hidden; font:400 calc(var(--karte-b) * .028)/1 var(--f-m);color:#868C99} .wb-karte-foto i{font-style:normal} .wb-karte-foto[data-foto]{border-style:solid;border-color:transparent} .wb-karte-foto[data-foto] i{display:none} .wb-karte-nr{position:absolute;right:calc(var(--karte-b) * .05); bottom:calc(var(--karte-b) * .05);z-index:2; font:500 calc(var(--karte-b) * .034)/1 var(--f-m);letter-spacing:.14em; color:#868C99} /* ══ Die sechs Entwürfe ════════════════════════════════════════════════════ Alle sechs zeigen dieselbe Seite: Selke, Handyreparatur Dresden (erfunden). Gleiche Überschrift, gleiche Leistungen, gleiche Platzhalter. Nur die Gestaltung wechselt — anders wäre der Beweis kaputt. Je Richtung gilt das Prinzip aus Material, Abschnitt 8, samt der verbotenen Zutat. Sie steht als Kommentar an der Regel, weil sie beim nächsten Eingriff genauso gilt wie heute. Die Maße hängen an --karte-b, nicht an rem: die Karte ist eine verkleinerte Seite, darin müssen die Verhältnisse stimmen und nicht die Punktgrößen. Farbe tragen sie erst nach dem Schlag (siehe --bunt). Was hier NICHT steht: das Fenster mit zwei scrollbaren Seiten je Entwurf. Das ist der nächste Schritt; bis dahin ist die Karte die Vorschau. */ /* ── 01 · Streng redaktionell ── Serife, zweispaltig, Haarlinien, viel Weißraum. Verboten: keine Karten, keine Rundungen — deshalb hat hier kein Element einen Radius und keine Fläche einen Rahmen. Die Ordnung macht die Linie. */ [data-stil="01"] .wb-karte{background:#F7F5EF; grid-template-columns:1fr 1fr; padding:calc(var(--karte-b) * .075) calc(var(--karte-b) * .07)} [data-stil="01"] .wb-karte-kopf{border-bottom:1px solid #1B1A16; padding-bottom:calc(var(--karte-b) * .022);justify-content:space-between} [data-stil="01"] .wb-karte-kopf b{font-family:'Source Serif 4',Georgia,serif; font-weight:400;color:#1B1A16;letter-spacing:0} [data-stil="01"] .wb-karte-kopf span{color:#6B6659} [data-stil="01"] .wb-karte-h1{font:400 calc(var(--karte-b) * .082)/1.06 'Source Serif 4',Georgia,serif;letter-spacing:-.012em;color:#1B1A16; grid-column:1/-1;text-wrap:balance} [data-stil="01"] .wb-karte-abs{color:#4A463C; font:400 calc(var(--karte-b) * .028)/1.55 'Source Serif 4',Georgia,serif} [data-stil="01"] .wb-karte-linie{background:#C9C2B2} [data-stil="01"] .wb-karte-liste span{color:#1B1A16; border-bottom:1px solid #DDD8CA;padding-bottom:calc(var(--karte-b) * .012); font-family:'Source Serif 4',Georgia,serif} [data-stil="01"] .wb-karte-liste i{color:#6B6659} [data-stil="01"] .wb-karte-foto{border:0;border-left:1px solid #C9C2B2; border-radius:0;color:#5F5B50;align-items:start;justify-items:start; padding-left:calc(var(--karte-b) * .035)} [data-stil="01"] .wb-karte-foto[data-foto]{border-left:1px solid #C9C2B2; padding-left:0;margin-left:calc(var(--karte-b) * .035)} [data-stil="01"] .wb-karte-nr{color:#8A8578} /* ── 02 · Verspielt ── Kräftige Flächen, runde Formen, warme Farbe, große Schrift. Verboten: kein Farbverlauf, kein Schlagschatten — die Fläche wirkt aus sich, nicht aus einem Licht, das niemand sieht. */ [data-stil="02"] .wb-karte{background:#2A1E4A; grid-template-columns:1.1fr 1fr;gap:calc(var(--karte-b) * .034)} [data-stil="02"] .wb-karte-kopf b{color:#FFF3E2; font-size:calc(var(--karte-b) * .06);letter-spacing:-.03em} [data-stil="02"] .wb-karte-kopf span{color:#C4A9FF;letter-spacing:.06em} [data-stil="02"] .wb-karte-h1{font-weight:600;color:#FFF3E2; font-size:calc(var(--karte-b) * .078);letter-spacing:-.03em} [data-stil="02"] .wb-karte-abs{color:#C4A9FF} [data-stil="02"] .wb-karte-linie{background:#5CE1B8;height:3px; border-radius:2px;width:38%} [data-stil="02"] .wb-karte-liste span{background:#3B2C64;color:#FFF3E2; border-radius:999px;padding:calc(var(--karte-b) * .010) calc(var(--karte-b) * .032); font-weight:500} [data-stil="02"] .wb-karte-liste i{color:#F4A03C} [data-stil="02"] .wb-karte-foto{border:0;border-radius:50%; background-color:#F4A03C; color:#2A1E4A;aspect-ratio:1;align-self:center;justify-self:center; width:86%;height:auto;font-weight:500} [data-stil="02"] .wb-karte-nr{color:#5CE1B8} /* ── 03 · Brutalistisch ── Sichtbares Raster, harte Kanten, EINE Schriftart in drei Größen, Schwarzweiß plus ein Signalton. Verboten: keine Bilder — der Fotoplatz ist deshalb eine beschriftete Fläche und kein Rahmen, der ein Bild verspricht. */ [data-stil="03"] .wb-karte{background:#EDEDED;gap:0;padding:0; grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto 1fr; font-family:var(--f-m)} [data-stil="03"] .wb-karte > *{border:1px solid #111;margin:-1px 0 0 -1px; padding:calc(var(--karte-b) * .028)} [data-stil="03"] .wb-karte-kopf{background:#111;gap:.5em} [data-stil="03"] .wb-karte-kopf b{color:#EDEDED;font-family:var(--f-m); font-weight:500;letter-spacing:.02em;font-size:calc(var(--karte-b) * .042)} [data-stil="03"] .wb-karte-kopf span{color:#FF5A2B} [data-stil="03"] .wb-karte-h1{font:500 calc(var(--karte-b) * .062)/1.05 var(--f-m); letter-spacing:-.01em;color:#111;text-transform:uppercase} [data-stil="03"] .wb-karte-abs{color:#111;grid-row:3; font-size:calc(var(--karte-b) * .026)} [data-stil="03"] .wb-karte-linie{display:none} [data-stil="03"] .wb-karte-liste{gap:0;padding:0;border:0;margin:0;grid-row:4} [data-stil="03"] .wb-karte-liste span{border-top:1px solid #111; padding:calc(var(--karte-b) * .02) calc(var(--karte-b) * .028); font-family:var(--f-m);color:#111;font-size:calc(var(--karte-b) * .028)} [data-stil="03"] .wb-karte-liste i{color:#C42D00} [data-stil="03"] .wb-karte-foto{grid-row:3/5;background-color:#FF3B00;color:#111; border-radius:0;font-weight:500;align-items:end;justify-items:start} /* 03 verbietet keine Fotos mehr — aber es verbietet Farbe. Das Bild kommt in Graustufen mit angehobenem Kontrast herein: dieselbe Aufnahme, brutalistisch gelesen. Die Signalfarbe bleibt dem Text und den Flächen. */ [data-stil="03"] .wb-karte-foto[data-foto]{filter:grayscale(1) contrast(1.12); border:1px solid #111} [data-stil="03"] .wb-karte-nr{color:#111;background:#EDEDED; padding:0 calc(var(--karte-b) * .012)} /* ── 04 · Dunkel und filmisch ── Vollbild, wenig Text, ein Bild trägt alles, tiefe Schatten. Verboten: kein Neon, kein Glasflächen-Effekt — die Tiefe kommt aus dem Schatten, nicht aus einer Leuchtschicht. */ /* Drei Zeilen: das Bild trägt die ganze Fläche, Titel und Preise sitzen darunter in EIGENEN Zeilen. Standen beide in derselben, lag der Titel auf den Preisen. */ [data-stil="04"] .wb-karte{background:#08090C;padding:0;gap:0; grid-template-columns:1fr;grid-template-rows:1fr auto auto} [data-stil="04"] .wb-karte-foto{grid-column:1;grid-row:1/4;border:0; border-radius:0;background-color:#14171D;color:#8C95A3;align-items:start; padding:calc(var(--karte-b) * .05);justify-items:start; box-shadow:inset 0 calc(var(--karte-b) * -.34) calc(var(--karte-b) * .3) calc(var(--karte-b) * -.06) #08090C} [data-stil="04"] .wb-karte-kopf{grid-row:1;align-self:start;z-index:2; padding:calc(var(--karte-b) * .05) calc(var(--karte-b) * .05) 0} [data-stil="04"] .wb-karte-kopf b{color:#EEF2F8;font-weight:400; letter-spacing:.24em;text-transform:uppercase; font-size:calc(var(--karte-b) * .034)} [data-stil="04"] .wb-karte-kopf span{color:#7E8794} [data-stil="04"] .wb-karte-h1{grid-row:2;z-index:2;color:#EEF2F8; font-weight:300;font-size:calc(var(--karte-b) * .072); padding:0 calc(var(--karte-b) * .05);max-width:15ch} [data-stil="04"] .wb-karte-abs, [data-stil="04"] .wb-karte-linie{display:none} [data-stil="04"] .wb-karte-liste{grid-row:3;z-index:2;grid-auto-flow:column; align-self:end;padding:calc(var(--karte-b) * .03) calc(var(--karte-b) * .05) calc(var(--karte-b) * .05)} [data-stil="04"] .wb-karte-liste span{display:block;color:#9AA3B0; font-size:calc(var(--karte-b) * .026)} [data-stil="04"] .wb-karte-liste i{display:block;color:#EEF2F8} [data-stil="04"] .wb-karte-nr{color:#7E8794} /* ── 05 · Hell und leicht ── Weiß, viel Luft, dünne Schrift, EIN Akzent. Verboten: keine Kacheln, keine Symbolreihe — die Ruhe entsteht aus dem Abstand, nicht aus einem Raster gleich großer Kästchen. */ [data-stil="05"] .wb-karte{background:#fff; padding:calc(var(--karte-b) * .085);gap:calc(var(--karte-b) * .038); grid-template-columns:1.3fr 1fr} [data-stil="05"] .wb-karte-kopf b{color:#1B1B1F;font-weight:400; letter-spacing:-.01em} [data-stil="05"] .wb-karte-kopf span{color:#6B6B78;letter-spacing:.14em} [data-stil="05"] .wb-karte-h1{font-weight:200;color:#1B1B1F; font-size:calc(var(--karte-b) * .078);letter-spacing:-.028em} [data-stil="05"] .wb-karte-abs{color:#6B6B78; font:400 calc(var(--karte-b) * .028)/1.6 var(--f-b)} [data-stil="05"] .wb-karte-linie{background:#E8E8EE;width:100%} [data-stil="05"] .wb-karte-liste{gap:calc(var(--karte-b) * .020)} [data-stil="05"] .wb-karte-liste span{color:#1B1B1F;font-weight:300} [data-stil="05"] .wb-karte-liste i{color:#3B6FE0} [data-stil="05"] .wb-karte-foto{border:0;border-radius:50%; background-color:#EFF3FC;color:#6B6B78;aspect-ratio:1;width:82%;height:auto; align-self:center;justify-self:end;grid-row:3/6} [data-stil="05"] .wb-karte-nr{color:#C3C3CC} /* ── 06 · Räumlich ── Tiefe durch Überlappung und Versatz, gekippte Ebenen, Schichtung. Verboten: keine 3D-Maschine, keine Perspektivverzerrung der Schrift — die Ebenen sind geschert, die Schrift steht aufrecht darauf. */ [data-stil="06"] .wb-karte{background:#0F1318; padding:calc(var(--karte-b) * .06);grid-template-columns:1fr 1fr; gap:calc(var(--karte-b) * .026)} [data-stil="06"] .wb-karte-kopf{position:relative;z-index:4} [data-stil="06"] .wb-karte-kopf b{color:#DCE7F2} [data-stil="06"] .wb-karte-kopf span{color:#7FA6C6} [data-stil="06"] .wb-karte-h1{position:relative;z-index:3;color:#DCE7F2; background:#1B2732;transform:skewY(-3deg); padding:calc(var(--karte-b) * .026) calc(var(--karte-b) * .03); margin-right:calc(var(--karte-b) * .16)} [data-stil="06"] .wb-karte-abs{position:relative;z-index:2;color:#8FB4D2; background:#26384A;transform:skewY(-3deg) translateX(calc(var(--karte-b) * .05)); padding:calc(var(--karte-b) * .022) calc(var(--karte-b) * .03); grid-column:1/-1;margin-right:calc(var(--karte-b) * .06)} [data-stil="06"] .wb-karte-linie{display:none} [data-stil="06"] .wb-karte-liste{position:relative;z-index:3;grid-column:1; gap:calc(var(--karte-b) * .010)} [data-stil="06"] .wb-karte-liste span{background:#33495F;color:#DCE7F2; padding:calc(var(--karte-b) * .009) calc(var(--karte-b) * .026); transform:skewY(-3deg)} [data-stil="06"] .wb-karte-liste span:nth-child(2){margin-left:calc(var(--karte-b) * .04)} [data-stil="06"] .wb-karte-liste span:nth-child(3){margin-left:calc(var(--karte-b) * .08)} [data-stil="06"] .wb-karte-liste i{color:#9FC3E0} [data-stil="06"] .wb-karte-foto{border:0;background-color:#7396B0;color:#06090C; border-radius:0;transform:skewY(-3deg);grid-row:4/6; margin-left:calc(var(--karte-b) * -.06)} [data-stil="06"] .wb-karte-nr{color:#7FA6C6;z-index:5} /* ══ Das Fenster ═══════════════════════════════════════════════════════════ Die Karte wächst hierher. Kein zentriertes Modal mit einem Bildschirmfoto — das wäre eine Lightbox, und die sind von 2013. Der Ring bleibt bei 12 % dahinter stehen, damit sichtbar ist, woher das Fenster kommt. Der Rahmen links spricht Arcturis, das Fenster rechts spricht den Entwurf. Ohne diese Trennung laufen sechs Handschriften ineinander und der Besucher weiß am Ende nicht mehr, wessen Stimme er gerade liest. */ .wb-blick{position:fixed;inset:0;z-index:120;display:grid;place-items:center; padding:clamp(16px,3.4vh,40px); visibility:hidden;pointer-events:none} .wb-blick[data-offen="ja"]{visibility:visible;pointer-events:auto} /* Solange das Fenster offen ist, tritt die Seitenkopfleiste ab. Sie liegt fix auf z-index 100 über allem und fing sonst die Klicks auf die Reiterleiste des Fensters ab — samt Schließen-Knopf. */ [data-blick="offen"] .arc-kopf, [data-blick="offen"] .arc-sprung{opacity:0;pointer-events:none; transition:opacity .2s var(--ease)} /* Der Grund als eigene Schicht. Er darf blenden — hängt er, ist er höchstens unsichtbar, aber nie im Weg. */ .wb-blick::before{content:"";position:absolute;inset:0; background:color-mix(in oklab,#05070C 88%,transparent); opacity:0;transition:opacity .32s var(--ease)} .wb-blick[data-offen="ja"]::before{opacity:1} /* Das Wachsen. --bk-* schreibt das Skript aus dem Rechteck der geklickten Karte: die Schale startet dort und fährt auf ihr eigenes Maß. Eine reine transform-Bewegung, also kein Layoutlauf je Bild. */ .wb-blick-schale{position:relative;display:grid; grid-template-columns:minmax(0,1fr) clamp(19rem,25vw,25rem); width:min(1420px,100%);height:min(880px,100%); background:var(--nacht);border:1px solid var(--linie); box-shadow:0 40px 120px -40px rgba(0,0,0,.8);overflow:hidden; transform:translate(var(--bk-tx,0),var(--bk-ty,0)) scale(var(--bk-s,1)); transition:transform .52s var(--ease)} /* Zu: leicht zurückgesetzt, damit das Schließen nicht bloß ein Ausblenden ist. */ .wb-blick[data-offen="nein"] .wb-blick-schale{--bk-s:.9} /* Die Schale nimmt beim Öffnen den Fokus (sie ist der Dialog). Ein sichtbarer Ring darauf wäre falsch — die Bedienelemente darin haben ihren eigenen. */ .wb-blick-schale:focus{outline:none} .wb-blick-fenster{position:relative;display:flex;flex-direction:column; min-width:0;min-height:0;background:var(--w-grund,#fff)} /* Die Reiterleiste ist der Fensterrahmen, nicht Teil des Entwurfs: sie bleibt in Arcturis-Grau, sonst wäre sie die siebte Handschrift. */ .wb-blick-reiter{display:flex;align-items:center;gap:2px;flex:0 0 auto; padding:0 10px;background:#0C1016;border-bottom:1px solid var(--linie)} .wb-blick-reiter button{appearance:none;background:none;border:0;cursor:pointer; font:500 12px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase; color:var(--on-night-mute);padding:14px 16px;position:relative; transition:color .2s var(--ease)} .wb-blick-reiter button::after{content:"";position:absolute;left:16px;right:16px; bottom:0;height:1px;background:var(--nadel-hell);transform:scaleX(0); transition:transform .28s var(--ease)} .wb-blick-reiter button:hover{color:var(--on-night)} .wb-blick-reiter button[aria-selected="true"]{color:var(--on-night)} .wb-blick-reiter button[aria-selected="true"]::after{transform:scaleX(1)} .wb-blick-stil{margin-left:auto;flex:0 1 auto;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 11px/1 var(--f-m);letter-spacing:.14em; text-transform:uppercase;color:var(--on-night-mute);opacity:.7} /* min-height:0 ist hier kein Detail, sondern die ganze Rollbarkeit: ein Flex-Kind mit overflow wächst sonst über seinen Container hinaus, statt zu rollen — die Seite wäre dann 2500 px hoch und die Schäle mit ihr. */ .wb-blick-rollfeld{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden; /* Benannter Container: die Vorschauseiten richten sich nach DIESER Breite. Ohne Namen träfe eine @container-Abfrage den nächsten Vorfahren mit container-type — und das ist im Vollbild eine andere Schale. */ container:rollfeld / inline-size; /* Der Kopf liegt hier, nicht in den Seiten — also braucht das Rollfeld die Seitenmaße und die Schrift des Entwurfs. */ --wp:clamp(28px,4.4vw,64px); font-family:var(--w-f,var(--f-b));color:var(--w-text,#15171B); scroll-behavior:smooth;background:var(--w-grund,#fff); scrollbar-width:thin;scrollbar-color:var(--w-leise,#999) transparent} .wb-blick-rollfeld:focus-visible{outline:2px solid var(--nadel);outline-offset:-2px} /* ── Der Rahmen: unsere Stimme ── */ .wb-blick-rand{display:flex;flex-direction:column;gap:18px;min-width:0; min-height:0;padding:clamp(24px,3.2vh,38px);background:var(--nacht-tief); border-left:1px solid var(--linie);overflow-y:auto} .wb-blick-nr{font:400 11px/1 var(--f-m);letter-spacing:.18em; color:var(--nadel-hell);margin:0} .wb-blick-titel{font:300 clamp(1.5rem,2.2vw,2rem)/1.12 var(--f-b); letter-spacing:-.02em;color:var(--on-night);margin:0} .wb-blick-text{font:400 15px/1.6 var(--f-b);color:var(--on-night-mute);margin:0; text-wrap:pretty} .wb-blick-arg{display:flex;flex-direction:column;gap:8px} .wb-blick-kopf{font:500 10px/1 var(--f-m);letter-spacing:.18em; text-transform:uppercase;color:var(--on-night-mute);margin:0;opacity:.75} .wb-blick-rand ul{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:7px} .wb-blick-rand li{font:400 14px/1.45 var(--f-b);color:var(--on-night); padding-left:18px;position:relative;text-wrap:pretty} .wb-blick-rand li::before{content:"";position:absolute;left:0;top:.62em; width:9px;height:1px;background:var(--nadel-hell)} .wb-blick-gegen li::before{background:var(--on-night-mute);opacity:.6} /* Der Schließen-Knopf sitzt in der Leiste, nicht im rollenden Rand: die Leiste ist flex:0 0 auto und damit immer sichtbar, komme was wolle. */ .wb-blick-zu{display:flex;align-items:center;gap:8px;margin-left:14px; appearance:none;cursor:pointer;background:transparent; border:1px solid var(--linie);color:var(--on-night); font:500 11px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase; padding:9px 13px;transition:border-color .2s var(--ease),background-color .2s var(--ease)} .wb-blick-zu svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.6} .wb-blick-zu:hover{border-color:var(--nadel);background:rgba(255,255,255,.05)} .wb-blick-zu:focus-visible{outline:2px solid var(--nadel);outline-offset:2px} /* ══ Die Seiten ════════════════════════════════════════════════════════════ Struktur und Abstände stehen hier EINMAL. Was die sechs Entwürfe wechseln, sind Variablen und eine Handvoll Sonderregeln — mehr braucht es nicht, und weniger Gemeinsames hieße, dass sich unbemerkt auch der Inhalt unterscheidet. Der Beweis der Sektion hängt daran, dass er das nicht tut. Die Maße hängen an --wp (Seitenpolster), nicht an festen px: das Fenster ist je nach Bildschirm verschieden breit, und eine Seite, die darin nicht atmet, verkauft keinen Entwurf. */ .wb-w{--wp:clamp(28px,4.4vw,64px); display:flex;flex-direction:column;gap:clamp(48px,7vw,104px); padding-bottom:clamp(48px,7vw,104px); background:var(--w-grund,#fff);color:var(--w-text,#15171B); font-family:var(--w-f,var(--f-b))} .wb-w + .wb-w{border-top:1px solid var(--w-linie,rgba(0,0,0,.1))} .wb-w-kopf{display:flex;align-items:center;gap:clamp(20px,3vw,40px); padding:clamp(18px,2.4vw,28px) var(--wp); border-bottom:1px solid var(--w-linie,rgba(0,0,0,.1))} .wb-w-kopf b{font:var(--w-marke,600 19px/1 var(--w-f,var(--f-b))); letter-spacing:-.01em;color:var(--w-text,#15171B)} .wb-w-nav{display:flex;gap:clamp(14px,1.8vw,26px);margin-left:auto} .wb-w-nav button{appearance:none;-webkit-appearance:none;background:none; border:0;padding:0;cursor:pointer; font:400 14px/1 var(--w-f,var(--f-b));color:var(--w-leise,#6B7080); border-bottom:1px solid transparent; transition:color .25s var(--ease),border-color .25s var(--ease)} .wb-w-nav button:hover{color:var(--w-text,#15171B); border-bottom-color:var(--w-akzent,currentColor)} .wb-w-nav button:focus-visible{outline:2px solid var(--w-akzent,#15171B); outline-offset:3px} /* 03 kennt keine feinen Linien: dort schaltet der Punkt auf die Signalfarbe. */ [data-stil="03"] .wb-w-nav button:hover{color:#FF5A2B; border-bottom-color:transparent} .wb-w-knopf{display:inline-block;align-self:start;cursor:default; padding:14px 24px;border-radius:var(--w-radius,0); background:var(--w-akzent,#15171B);color:var(--w-auf-akzent,#fff); font:500 15px/1 var(--w-f,var(--f-b))} .wb-w-knopf-klein{padding:10px 16px;font-size:13px;margin-left:0} .wb-w-held{display:grid;grid-template-columns:1.05fr 1fr; gap:clamp(24px,3.4vw,52px);align-items:center;padding:0 var(--wp)} .wb-w-held-satz{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px); align-items:start;min-width:0} /* max-width und Trennung sind kein Feinschliff, sondern der Grund, warum „Displaywechsel" nicht mehr unter dem Foto verschwindet: die Satzspalte ist ein Flex-Kind mit align-items:start, ihre Querbreite also die INHALTSBREITE. Ein einzelnes langes Wort in 4 rem ist breiter als die Spalte, lief über den Rand hinaus und landete hinter dem Bild der Nachbarspalte. */ .wb-w :is(h1,.wb-w-h1){margin:0;font:var(--w-h1,300 clamp(2.4rem,4.6vw,4rem)/1.05 var(--w-f,var(--f-b))); letter-spacing:var(--w-h1-sperr,-.03em);color:var(--w-text,#15171B); text-wrap:balance;position:relative; max-width:100%;overflow-wrap:break-word; -webkit-hyphens:auto;hyphens:auto} .wb-w h2{margin:0 0 clamp(18px,2.2vw,32px); font:var(--w-h2,400 clamp(1.4rem,2.2vw,2rem)/1.15 var(--w-f,var(--f-b))); letter-spacing:-.02em;color:var(--w-text,#15171B)} .wb-w-vor{margin:0;font:400 clamp(15px,1.15vw,17px)/1.55 var(--w-f,var(--f-b)); color:var(--w-leise,#6B7080);max-width:40ch;text-wrap:pretty} .wb-w-leise{margin:0;font:400 14px/1.55 var(--w-f,var(--f-b)); color:var(--w-leise,#6B7080)} /* Die Krume ist die erste Zeile der Unterseite und saß direkt auf der Naht zum Abschnitt darüber. Der Abstand gehört an sie, nicht an die Sektion: die sechs Handschriften polstern ihren Heldenbereich unterschiedlich. */ .wb-w-krume{margin:clamp(16px,2vw,30px) 0 0;font:400 11px/1 var(--f-m); letter-spacing:.16em; text-transform:uppercase;color:var(--w-leise,#6B7080)} /* Der Bildplatz. Er bleibt eine beschriftete Fläche, bis die Fotos da sind — nichts erfinden, nichts schätzen, und ein grauer Kasten ohne Beschriftung sähe aus wie ein Ladefehler. */ /* Der Bildplatz. Ohne Foto eine beschriftete Fläche, mit Foto der Deckel darüber: --bild trägt die Datei, data-foto schaltet die Beschriftung ab. Kein , weil Stil 04 das Bild über background-position parallax führt und Stil 05 es im Kreis beschneidet — beides geht am Hintergrund ohne zweite Schachtel. */ .wb-w-bild{display:grid;place-items:center;aspect-ratio:4/3;position:relative; background-color:var(--w-platz,#EDEEF1); background-image:var(--bild,none);background-size:cover; background-position:50% 50%;background-repeat:no-repeat; border-radius:var(--w-radius,0); color:var(--w-leise,#6B7080);font:400 12px/1 var(--f-m);letter-spacing:.12em; overflow:hidden} .wb-w-bild i{font-style:normal} .wb-w-bild[data-foto] i{display:none} .wb-w-bild-gross{aspect-ratio:5/4} .wb-w-leist,.wb-w-stimmen,.wb-w-schritte,.wb-w-preis,.wb-w-wort{padding:0 var(--wp)} .wb-w-gitter{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,32px)} .wb-w-fach{display:flex;flex-direction:column;gap:10px;align-items:start; padding:var(--w-fach-p,0);background:var(--w-fach,transparent); border-radius:var(--w-radius,0)} .wb-w-fach .wb-w-bild{width:100%;aspect-ratio:1;margin-bottom:4px} .wb-w-fach b{font:500 17px/1.2 var(--w-f,var(--f-b));color:var(--w-text,#15171B)} .wb-w-fach i{font:400 15px/1.2 var(--w-f,var(--f-b));font-style:normal; color:var(--w-akzent,#15171B)} .wb-w-nr{font:500 12px/1 var(--f-m);letter-spacing:.14em; color:var(--w-akzent,#15171B)} .wb-w-stimmen blockquote{margin:0;padding:var(--w-fach-p,0); background:var(--w-fach,transparent);border-radius:var(--w-radius,0); font:var(--w-zitat,400 17px/1.5 var(--w-f,var(--f-b)));color:var(--w-text,#15171B)} .wb-w-liste{list-style:none;margin:0;padding:0;display:flex; flex-direction:column} .wb-w-liste li{display:flex;justify-content:space-between;gap:20px; padding:16px 0;border-bottom:1px solid var(--w-linie,rgba(0,0,0,.1)); font:400 16px/1.3 var(--w-f,var(--f-b))} .wb-w-liste b{font-weight:500;color:var(--w-text,#15171B)} .wb-w-liste i{font-style:normal;color:var(--w-akzent,#15171B)} .wb-w-absatz{margin:0;max-width:58ch; font:400 clamp(16px,1.2vw,18px)/1.65 var(--w-f,var(--f-b)); color:var(--w-leise,#6B7080);text-wrap:pretty} .wb-w-kontakt{display:grid;grid-template-columns:1fr 1fr; gap:clamp(24px,3.4vw,52px);align-items:center;padding:0 var(--wp)} .wb-w-fuss{display:flex;justify-content:space-between;gap:20px; padding:clamp(20px,2.4vw,30px) var(--wp) 0; border-top:1px solid var(--w-linie,rgba(0,0,0,.1)); font:400 13px/1 var(--w-f,var(--f-b));color:var(--w-leise,#6B7080)} /* ══ Die sechs Handschriften im Fenster ════════════════════════════════════ Je Richtung das Prinzip aus Material, Abschnitt 8 — und die verbotene Zutat als Kommentar an der Regel, weil sie beim nächsten Eingriff genauso gilt. Was hier steht, sind fast nur Variablen. Wo eine Struktur wechseln muss, steht darunter der Grund. */ /* ── 01 · Streng redaktionell ── Verboten: keine Karten, keine Rundungen. */ [data-stil="01"] .wb-w, [data-stil="01"].wb-blick-rollfeld{--w-grund:#F7F5EF;--w-text:#1B1A16;--w-leise:#6B6659; --w-akzent:#1B1A16;--w-auf-akzent:#F7F5EF;--w-platz:#EAE6DA; --w-linie:#D6D0C0;--w-radius:0;--w-f:'Source Serif 4',Georgia,serif; --w-h1:400 clamp(2.6rem,5vw,4.4rem)/1.03 'Source Serif 4',Georgia,serif; --w-h1-sperr:-.015em; --w-h2:400 clamp(1.4rem,2.1vw,1.9rem)/1.15 'Source Serif 4',Georgia,serif; --w-marke:400 21px/1 'Source Serif 4',Georgia,serif; --w-zitat:400 18px/1.55 'Source Serif 4',Georgia,serif} /* Zweispaltig gesetzt, wie eine Wochenzeitung. Keine Fläche trägt hier etwas — die Ordnung macht die Linie. */ [data-stil="01"] .wb-w-absatz{columns:2;column-gap:clamp(28px,3vw,52px); max-width:none} [data-stil="01"] .wb-w-stimmen blockquote{border-left:1px solid #D6D0C0; padding-left:20px} [data-stil="01"] .wb-w-knopf{border:1px solid #1B1A16;background:transparent; color:#1B1A16} [data-stil="01"] .wb-w-fach .wb-w-bild{aspect-ratio:3/2} /* ── 02 · Verspielt ── Verboten: kein Farbverlauf, kein Schlagschatten. */ [data-stil="02"] .wb-w, [data-stil="02"].wb-blick-rollfeld{--w-grund:#2A1E4A;--w-text:#FFF3E2;--w-leise:#C4A9FF; --w-akzent:#5CE1B8;--w-auf-akzent:#21173C;--w-platz:#3B2C64; --w-linie:rgba(196,169,255,.24);--w-radius:22px;--w-fach:#352755; --w-fach-p:clamp(16px,1.6vw,24px); --w-h1:600 clamp(2.6rem,5.2vw,4.6rem)/1.02 var(--f-b);--w-h1-sperr:-.035em; --w-h2:600 clamp(1.5rem,2.3vw,2.1rem)/1.12 var(--f-b); --w-marke:600 21px/1 var(--f-b)} [data-stil="02"] .wb-w-bild{border-radius:22px} [data-stil="02"] .wb-w-fach .wb-w-bild{border-radius:50%} [data-stil="02"] .wb-w-knopf{border-radius:999px;font-weight:600; padding:16px 30px} [data-stil="02"] .wb-w-nr{background:#F4A03C;color:#21173C;border-radius:999px; padding:6px 12px} /* ── 03 · Brutalistisch ── Verboten: keine Bilder. Der Bildplatz wird deshalb zur beschrifteten Signalfläche und nicht zum Rahmen, der ein Foto verspricht, das nie kommt. */ [data-stil="03"] .wb-w, [data-stil="03"].wb-blick-rollfeld{--w-grund:#EDEDED;--w-text:#111;--w-leise:#111; --w-akzent:#C42D00;--w-auf-akzent:#EDEDED;--w-platz:#111; --w-linie:#111;--w-radius:0;--w-f:var(--f-m); --w-h1:500 clamp(2.2rem,4.2vw,3.6rem)/1.02 var(--f-m);--w-h1-sperr:-.01em; --w-h2:500 clamp(1.2rem,1.8vw,1.6rem)/1.1 var(--f-m); --w-marke:500 18px/1 var(--f-m);--w-zitat:400 15px/1.45 var(--f-m); gap:0} [data-stil="03"] .wb-w :is(h1,.wb-w-h1){text-transform:uppercase} [data-stil="03"] .wb-w-held,[data-stil="03"] .wb-w-kontakt{gap:0; border-bottom:1px solid #111;padding:0} [data-stil="03"] .wb-w-held-satz{padding:var(--wp);gap:18px; border-right:1px solid #111} [data-stil="03"] .wb-w-bild{background-color:#111;color:#EDEDED;aspect-ratio:auto; min-height:100%;align-items:end;justify-items:start;padding:var(--wp)} /* Graustufen, harte Kante, kein Radius — das Foto wird zum Klischee, nicht zur Stimmung. */ [data-stil="03"] .wb-w-bild[data-foto]{filter:grayscale(1) contrast(1.15)} [data-stil="03"] .wb-w-leist,[data-stil="03"] .wb-w-stimmen, [data-stil="03"] .wb-w-schritte,[data-stil="03"] .wb-w-preis, [data-stil="03"] .wb-w-wort{padding:var(--wp);border-bottom:1px solid #111} [data-stil="03"] .wb-w-gitter{gap:0} [data-stil="03"] .wb-w-fach,[data-stil="03"] .wb-w-stimmen blockquote{ padding:clamp(16px,1.8vw,24px);border:1px solid #111;margin:-1px 0 0 -1px} [data-stil="03"] .wb-w-fach .wb-w-bild{aspect-ratio:2/1;min-height:0; background-color:#C42D00;color:#EDEDED;padding:12px} [data-stil="03"] .wb-w-knopf{border:2px solid #111;background:#C42D00; color:#EDEDED;font-weight:500} /* ── 04 · Dunkel und filmisch ── Verboten: kein Neon, kein Glasflächen-Effekt. Die Tiefe kommt aus dem Schatten, nicht aus einer Leuchtschicht. */ [data-stil="04"] .wb-w, [data-stil="04"].wb-blick-rollfeld{--w-grund:#08090C;--w-text:#EEF2F8;--w-leise:#8C95A3; --w-akzent:#EEF2F8;--w-auf-akzent:#08090C;--w-platz:#14171D; --w-linie:rgba(238,242,248,.12);--w-radius:0; --w-h1:200 clamp(2.8rem,5.6vw,5rem)/1.02 var(--f-b);--w-h1-sperr:-.04em; --w-h2:300 clamp(1.4rem,2.2vw,2rem)/1.12 var(--f-b); --w-marke:400 17px/1 var(--f-b);--w-zitat:300 19px/1.5 var(--f-b)} [data-stil="04"] .wb-w-kopf b{letter-spacing:.24em;text-transform:uppercase; font-size:14px} /* Vollbild: ein Bild trägt alles, der Satz liegt darauf. Damit er auch lesbar darauf liegt, trägt das Bild einen Verlauf nach unten — nicht der Satz einen Schatten. Ein Schriftschatten wäre ein Zugeständnis, ein Verlauf ist Teil des Bildes. */ [data-stil="04"] .wb-w-held{grid-template-columns:1fr;padding:0;position:relative; min-height:min(74vh,620px)} [data-stil="04"] .wb-w-held .wb-w-bild::before{content:"";position:absolute; inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,#08090C 1%,rgba(8,9,12,.88) 24%, rgba(8,9,12,.35) 54%,rgba(8,9,12,0) 76%)} [data-stil="04"] .wb-w-held .wb-w-bild{grid-area:1/1;aspect-ratio:auto; height:100%;box-shadow:inset 0 -180px 200px -60px #08090C} [data-stil="04"] .wb-w-held-satz{grid-area:1/1;align-self:end;z-index:2; padding:var(--wp)} [data-stil="04"] .wb-w-knopf{border:1px solid rgba(238,242,248,.4); background:transparent;color:#EEF2F8} [data-stil="04"] .wb-w-fach .wb-w-bild{aspect-ratio:3/4} /* ── 05 · Hell und leicht ── Verboten: keine Kacheln, keine Symbolreihe. Die Ruhe entsteht aus dem Abstand, nicht aus gleich großen Kästchen. */ [data-stil="05"] .wb-w, [data-stil="05"].wb-blick-rollfeld{--w-grund:#fff;--w-text:#1B1B1F;--w-leise:#6B6B78; --w-akzent:#3B6FE0;--w-auf-akzent:#fff;--w-platz:#F3F5FA; --w-linie:#E8E8EE;--w-radius:0; --w-h1:200 clamp(2.6rem,5.2vw,4.6rem)/1.05 var(--f-b);--w-h1-sperr:-.035em; --w-h2:200 clamp(1.5rem,2.3vw,2.1rem)/1.15 var(--f-b); --w-marke:400 20px/1 var(--f-b);--w-zitat:200 20px/1.5 var(--f-b); gap:clamp(72px,10vw,150px)} [data-stil="05"] .wb-w-bild{border-radius:50%;aspect-ratio:1} [data-stil="05"] .wb-w-bild-gross{border-radius:50%} [data-stil="05"] .wb-w-gitter{grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,64px)} [data-stil="05"] .wb-w-fach{gap:14px} [data-stil="05"] .wb-w-fach b{font-weight:300;font-size:19px} [data-stil="05"] .wb-w-knopf{border:1px solid #3B6FE0;background:transparent; color:#3B6FE0;font-weight:400} [data-stil="05"] .wb-w-stimmen blockquote{border-bottom:1px solid #E8E8EE; padding-bottom:20px} /* ── 06 · Räumlich ── Verboten: keine 3D-Maschine, keine Perspektivverzerrung der Schrift. Die Ebenen sind geschert, die Schrift steht aufrecht darauf. */ [data-stil="06"] .wb-w, [data-stil="06"].wb-blick-rollfeld{--w-grund:#0F1318;--w-text:#DCE7F2;--w-leise:#8FB4D2; --w-akzent:#7FC4F2;--w-auf-akzent:#0F1318;--w-platz:#3E576F; --w-linie:rgba(220,231,242,.14);--w-radius:0; --w-h1:400 clamp(2.4rem,4.8vw,4.2rem)/1.05 var(--f-b);--w-h1-sperr:-.03em; /* Die Platte etwas heller: die Platzhalterschrift steht darauf und muss lesbar bleiben, bis die Fotos da sind. */ --w-h2:400 clamp(1.4rem,2.2vw,2rem)/1.12 var(--f-b); --w-marke:500 19px/1 var(--f-b);--w-fach:#1B2732; --w-fach-p:clamp(16px,1.8vw,26px)} [data-stil="06"] .wb-w :is(h1,.wb-w-h1){background:#1B2732;transform:skewY(-2.5deg); padding:clamp(16px,2vw,28px) clamp(20px,2.4vw,34px); margin-right:clamp(20px,4vw,70px);position:relative;z-index:3} [data-stil="06"] .wb-w-vor{background:#26384A;transform:skewY(-2.5deg); padding:clamp(14px,1.6vw,22px) clamp(20px,2.4vw,34px); margin-left:clamp(16px,3vw,54px);max-width:44ch;position:relative;z-index:2} [data-stil="06"] .wb-w-bild{transform:skewY(-2.5deg)} [data-stil="06"] .wb-w-fach{transform:skewY(-2.5deg)} [data-stil="06"] .wb-w-fach:nth-child(2){margin-top:clamp(14px,2vw,30px)} [data-stil="06"] .wb-w-fach:nth-child(3){margin-top:clamp(28px,4vw,60px)} [data-stil="06"] .wb-w-knopf{transform:skewY(-2.5deg);position:relative;z-index:4} [data-stil="06"] .wb-w-stimmen blockquote{transform:skewY(-2.5deg)} /* 05 verbietet Kacheln — die Ruhe kommt aus dem Abstand. Dort steht die Bewertung offen, nur eine Linie unten trennt sie von der nächsten. */ [data-stil="05"] .wb-w-stimmen blockquote{background:none;border:0; border-bottom:1px solid var(--w-linie);border-radius:0; padding:0 0 clamp(16px,2vw,24px)} [data-stil="05"] .wb-w-stimmen cite{border-top:0;padding-top:4px} [data-stil="06"] .wb-w-stimmen blockquote:nth-child(2){margin-top:clamp(14px,2vw,30px)} [data-stil="06"] .wb-w-stimmen blockquote:nth-child(3){margin-top:clamp(28px,4vw,60px)} /* ══ Das Material des Musterbetriebs ═════════════════════════════════════════════════ Logo, vier Bewertungen, drei Festpreise — alles erfunden. Die Dateipfade unter assets/saxo/ heißen weiter so; ein Ordnername ist kein Seiteninhalt. Alles, was hier gestaltet wird, arbeitet mit den --w-Token des jeweiligen Entwurfs: eine Regel, sechs Handschriften. Ausnahmen stehen ausdrücklich beim Entwurf. */ /* ── Das Logo ──────────────────────────────────────────────────────────── Als Hintergrund im ::before der Wortmarke, nicht als eigenes : es ist Schmuck neben einem Namen, der als Text dasteht — und so trägt jede der sechs Handschriften es ohne sechs Bildmarken im Markup. Zwei Fassungen. Das echte Logo ist für dunklen Grund gezeichnet: die untere Hälfte des S ist Silber und verschwindet auf Weiß. Für die hellen Entwürfe liegt daneben eine Fassung in Graphit. */ .wb-w-kopf b,.wb-karte-kopf b{display:inline-flex;align-items:center;gap:.48em} .wb-w-kopf b::before,.wb-karte-kopf b::before{content:"";flex:none; width:1.6em;height:1.6em; background:url(/assets/saxo/logo.png) center/contain no-repeat} [data-stil="01"] .wb-w-kopf b::before,[data-stil="01"] .wb-karte-kopf b::before, [data-stil="05"] .wb-w-kopf b::before,[data-stil="05"] .wb-karte-kopf b::before{ background-image:url(/assets/saxo/logo-tinte.png)} /* 03: dieselbe Aufnahme des Logos, aber ohne Farbe — Schwarzweiß plus EIN Signalton ist die Regel dieses Entwurfs. Die Entscheidung fällt nach UNTERGRUND, nicht nach Entwurf: der Kopfbalken der Ringkarte ist schwarz, der Kopf der großen Seite hell. Eine gemeinsame Regel lässt das Logo auf einer der beiden Flächen verschwinden. */ [data-stil="03"] .wb-karte-kopf b::before{ filter:grayscale(1) brightness(1.35) contrast(1.1)} [data-stil="03"] .wb-w-kopf b::before{ background-image:url(/assets/saxo/logo-tinte.png); filter:grayscale(1) contrast(1.15)} /* ── Der Kopf fährt mit ────────────────────────────────────────────────── Im Fenster liegen zwei Seiten untereinander, also standen zwei Kopfleisten im Rollfeld — eine oben, eine mitten drin, was wie ein Fehler aussieht. Jetzt klebt der Kopf seiner Seite oben fest: der Anrufen-Knopf fährt mit, und beim Übergang zur zweiten Seite schiebt deren Kopf den ersten hinaus. Eine Leiste sichtbar, immer die richtige. Getrübt, nicht deckend: bei 04 liegt ein Vollbild direkt unter dem Kopf, und ein Balken quer darüber nähme dem Entwurf seine Aussage. */ .wb-w-kopf{position:sticky;top:0;z-index:6; margin-bottom:clamp(24px,3.4vw,48px); background:color-mix(in oklab,var(--w-grund,#fff) 90%,transparent); -webkit-backdrop-filter:blur(9px) saturate(1.08); backdrop-filter:blur(9px) saturate(1.08)} /* 04 trägt ein Vollbild direkt unter dem Kopf, 03 ein Raster ohne Luft — beide wollen keinen Abstand darunter. */ [data-stil="03"] .wb-w-kopf,[data-stil="04"] .wb-w-kopf{margin-bottom:0} /* 03 kennt keine Trübung — dort ist der Kopf eine Fläche mit harter Kante. */ [data-stil="03"] .wb-w-kopf{background:var(--w-grund); -webkit-backdrop-filter:none;backdrop-filter:none} /* ── Vier Bewertungen ──────────────────────────────────────────────────── Je Bewertung ein Blatt: Sterne, Satz, Name — in dieser Reihenfolge und mit Luft dazwischen. Als zwei nackte Zeilen sah es aus wie ein Formular, das noch lädt. Der Name sitzt unten hinter einer Haarlinie, damit der Blick zuerst den Satz nimmt und dann die Quelle. Die Sterne sind ein Bild mit Beschriftung (role="img"), damit eine Vorlesehilfe „Vier von fünf Sternen“ sagt und nicht acht Sonderzeichen buchstabiert. */ /* Vier in einer Reihe, nicht zwei mal zwei: die vier Stimmen sind ein Band, kein Raster. Zwei Klassen im Selektor, weil die Schmal-Fassung weiter unten .wb-w-gitter auf eine Spalte stellt — dasselbe Element trägt beide Klassen, und die spätere Regel hätte gewonnen. Und der Bruch hängt am CONTAINER, nicht am Fenster: die Bewertungen liegen im Rollfeld der Vorschau, das viel schmaler ist als der Bildschirm. Ein @media-Bruchpunkt maß den Bildschirm und stellte im 915 px breiten Rollfeld zwei Spalten — die zwei Reihen, die niemand wollte. */ .wb-w-gitter.wb-w-stimmgitter{grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(9px,1.2cqi,18px);align-items:stretch} @container rollfeld (max-width:620px){ .wb-w-gitter.wb-w-stimmgitter{grid-template-columns:repeat(2,minmax(0,1fr))} } @container rollfeld (max-width:380px){ .wb-w-gitter.wb-w-stimmgitter{grid-template-columns:1fr} } /* Vier Karten neben einander sind schmal: Satz und Sterne folgen der Containerbreite, nicht der Bildschirmbreite. */ .wb-w-stimmen blockquote{font-size:clamp(.78rem,1.05cqi,.95rem)} .wb-w-stimmen blockquote{display:grid;grid-template-rows:auto 1fr auto; gap:clamp(10px,1.1vw,15px);height:100%; padding:clamp(16px,1.7vw,24px); font-size:.94em;line-height:1.5; background:color-mix(in oklab,var(--w-text,#15171B) 5%,var(--w-grund,#fff)); border:1px solid var(--w-linie,rgba(0,0,0,.1)); border-radius:var(--w-radius,0)} .wb-w-stimmen blockquote p{margin:0;font:inherit;color:inherit;text-wrap:pretty} .wb-w-sterne{font-size:.92em;line-height:1;letter-spacing:.14em; color:var(--w-akzent,#15171B)} .wb-w-stimmen cite{font-style:normal;align-self:end; padding-top:clamp(10px,1.2vw,14px); border-top:1px solid var(--w-linie,rgba(0,0,0,.1)); font:500 13px/1.3 var(--w-f,var(--f-b));letter-spacing:.02em; color:var(--w-leise,#6B7080)} /* 01 setzt keine Flächen, es setzt Linien: dort steht die Bewertung offen in der Spalte, nur die Haarlinie links trägt sie. */ [data-stil="01"] .wb-w-stimmen blockquote{background:none;border:0; border-left:1px solid var(--w-linie); padding:0 0 0 clamp(16px,1.8vw,24px)} [data-stil="03"] .wb-w-stimmen blockquote{border-radius:0;margin:-1px 0 0 -1px; background:none;border:1px solid #111} [data-stil="06"] .wb-w-stimmen blockquote{transform:skewY(-2.5deg)} /* 05 verbietet Kacheln — die Ruhe kommt aus dem Abstand. Dort steht die Bewertung offen, nur eine Linie unten trennt sie von der nächsten. */ [data-stil="05"] .wb-w-stimmen blockquote{background:none;border:0; border-bottom:1px solid var(--w-linie);border-radius:0; padding:0 0 clamp(16px,2vw,24px)} [data-stil="05"] .wb-w-stimmen cite{border-top:0;padding-top:4px} /* ── Die Bewertungen: Name und Sterne, das Zitat im Fenster ──────────────── In Ruhe steht auf der Karte nur, was zählt: Sterne und Name. Der Satz liegt darin, aber auf Höhe 0 — sichtbar wird er im aufgeschlagenen Fenster. Mechanik wie die Musterseiten der Startseite: das Feld zieht zum Zeiger, was darunter liegt schlägt auf, geschlossen wird erst beim Verlassen des ganzen Gitters. Das FELD hält die Ruhehöhe, damit das Blatt beim Aufschlagen aus dem Fluss gehen kann, ohne dass das Gitter springt — --ruh misst das Skript, der clamp ist nur die Rückfallebene. */ .wb-w-stimme{position:relative;display:grid; min-height:var(--ruh,clamp(74px,8cqi,104px)); transform:translate3d(var(--mx,0px),var(--my,0px),0); transition:transform 320ms var(--ease)} .wb-w-stimmgitter blockquote{grid-template-rows:auto auto auto;align-content:start; gap:clamp(6px,.7vw,11px);cursor:pointer;-webkit-tap-highlight-color:transparent; transition:transform 440ms var(--ease),box-shadow 440ms var(--ease), opacity 320ms var(--ease),border-color 320ms var(--ease), border-radius 440ms var(--ease),padding 440ms var(--ease)} .wb-w-stimmgitter blockquote:focus-visible{outline:2px solid var(--w-akzent,#15171B); outline-offset:2px} .wb-w-stimmgitter cite{align-self:start;border-top:0;padding-top:0} .wb-w-stimme-satz{display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0; transition:opacity 200ms var(--ease)} .wb-w-stimme-satz > p{min-height:0} /* 06 staffelt die Bewertungen wie seine Fächer. Die Regel hing an nth-child der Zitate — die haben jetzt je ein Feld für sich. */ [data-stil="06"] .wb-w-stimme:nth-child(2) > blockquote{margin-top:clamp(14px,2vw,30px)} [data-stil="06"] .wb-w-stimme:nth-child(3) > blockquote{margin-top:clamp(28px,4vw,60px)} /* Aufgeschlagen: das Blatt geht aus dem Fluss und wird zum Fenster. Die linken zwei öffnen nach rechts, die rechten zwei nach links — so bleibt es in jedem Fall im Rollfeld. */ .wb-w-stimme[data-auf="ja"]{z-index:40} .wb-w-stimmgitter[data-offen]:not([data-offen="0"]) .wb-w-stimme[data-auf="nein"] > blockquote{opacity:.16} .wb-w-stimme[data-auf="ja"] > blockquote{position:absolute;top:50%;height:auto; width:min(21rem,220%);z-index:40;border-radius:16px; padding:clamp(18px,2vw,26px);overflow:visible; border-color:color-mix(in oklab,var(--w-akzent,#15171B) 34%,var(--w-linie,rgba(0,0,0,.12))); box-shadow:0 3.4em 7em -2.4em rgba(20,18,15,.5),0 .6em 1.6em -1em rgba(20,18,15,.26)} .wb-w-stimme[data-auf="ja"][data-stimme="1"] > blockquote, .wb-w-stimme[data-auf="ja"][data-stimme="2"] > blockquote{ left:0;transform-origin:0 50%;transform:translateY(-50%)} .wb-w-stimme[data-auf="ja"][data-stimme="3"] > blockquote, .wb-w-stimme[data-auf="ja"][data-stimme="4"] > blockquote{ right:0;transform-origin:100% 50%;transform:translateY(-50%)} .wb-w-stimme[data-auf="ja"] .wb-w-stimme-satz{order:2;grid-template-rows:1fr; opacity:1;transition-delay:120ms} .wb-w-stimme[data-auf="ja"] cite{order:3;align-self:end; padding-top:clamp(10px,1.2vw,14px); border-top:1px solid var(--w-linie,rgba(0,0,0,.1))} /* 01, 03 und 05 setzen auf der Karte keine Fläche. Ein Fenster ohne Fläche liest sich über dem Text darunter nicht — hier bekommt es eine. */ [data-stil="01"] .wb-w-stimme[data-auf="ja"] > blockquote, [data-stil="05"] .wb-w-stimme[data-auf="ja"] > blockquote{ background:var(--w-grund,#fff);border:1px solid var(--w-linie); padding:clamp(18px,2vw,26px)} [data-stil="03"] .wb-w-stimme[data-auf="ja"] > blockquote{ background:var(--w-grund,#EDEDED);border:2px solid #111;border-radius:0; margin:0;box-shadow:12px 12px 0 #111} [data-stil="06"] .wb-w-stimme[data-auf="ja"] > blockquote{margin-top:0} /* Tippen: kein Fenster, die Karte klappt an ihrem Platz auf — wie die Musterseiten unter 900 px. Der Magnet ruht. */ .wb-w-stimmgitter[data-tipp="ja"] .wb-w-stimme{min-height:0;transform:none} .wb-w-stimmgitter[data-tipp="ja"] .wb-w-stimme[data-auf="ja"] > blockquote, .wb-w-stimmgitter[data-tipp="ja"] .wb-w-stimme[data-auf="ja"][data-stimme="3"] > blockquote, .wb-w-stimmgitter[data-tipp="ja"] .wb-w-stimme[data-auf="ja"][data-stimme="4"] > blockquote{ position:relative;top:auto;left:auto;right:auto;width:auto; transform:none;box-shadow:none} .wb-w-stimmgitter[data-tipp="ja"][data-offen]:not([data-offen="0"]) .wb-w-stimme[data-auf="nein"] > blockquote{opacity:1} @container rollfeld (max-width:620px){ .wb-w-stimme{min-height:0;transform:none} .wb-w-stimme[data-auf="ja"] > blockquote, .wb-w-stimme[data-auf="ja"][data-stimme="3"] > blockquote, .wb-w-stimme[data-auf="ja"][data-stimme="4"] > blockquote{ position:relative;top:auto;left:auto;right:auto;width:auto; transform:none;box-shadow:none} .wb-w-stimmgitter[data-offen]:not([data-offen="0"]) .wb-w-stimme[data-auf="nein"] > blockquote{opacity:1} } @media (prefers-reduced-motion:reduce){ .wb-w-stimme{transform:none!important;transition:none} .wb-w-stimmgitter blockquote{transition:none} } /* ── Die Naht: ein Blatt schiebt über das andere ───────────────────────── Die Bewertungen bleiben stehen, der Kontakt fährt darüber; auf der Leistungsseite bleibt die Preisliste stehen und „Über uns“ fährt darüber. Zwei Blätter, kein Verschwinden — dieselbe Sprache wie die Blätter auf der Startseite von Arcturis. Der obere Rand ist nicht 0: darüber klebt der Seitenkopf, und zwei klebende Dinge auf derselben Höhe verdecken sich. Das obere Blatt trägt seinen eigenen Grund — ohne den scheint das stehende durch. */ /* ── Die Naht: ein Blatt schiebt über das andere ────────────────────────── ZWEI Nähte auf zwei Seiten, nicht vier: die Bewertungen fahren über die Leistungen, „Über uns" fährt über die Preisliste. Mehr wäre keine Figur mehr, sondern ein Verfahren. Und NICHT mit position:sticky. Sticky heftet ein Element erst, wenn es kürzer ist als sein Rollfeld — die Leistungen mit drei Bildern und der Ablauf mit drei Schritten sind höher. Dann heftet es an der falschen Kante, das Blatt danach deckt die eine Hälfte zu und lässt die andere stehen: die Lücken und die vertauschte Reihenfolge in den Bildern. Stattdessen ein echtes Blatt: es liegt eine Kante über dem Abschnitt davor, trägt seinen eigenen Grund, wirft nach oben Schatten — und hebt sich beim Einfahren um wenige Pixel. Der Hub kommt aus --par, das der Rollhandler ohnehin je Bild schreibt (0 in der Mitte, 1 am unteren Rand). Kein zweiter Rechenweg, keine Lücke, weil nichts aus dem Fluss genommen wird. */ .wb-w-blatt{position:relative;z-index:2; /* Der Satz der Seite ist ein Flex-Stapel mit Zeilenabstand. Ein negatives margin-top zieht zuerst DIESEN Abstand ab — erst was darüber hinausgeht, ist Überlappung. Ohne die Lücke in der Rechnung stand das Blatt einfach 28 px unter dem Abschnitt davor. */ /* --naht-luft schreibt das Skript aus dem gemessenen Zeilenabstand; der Wert hier ist nur die Rückfallebene, wenn kein Skript läuft. */ --naht-luft:clamp(40px,5.4vw,68px); --naht-ueber:var(--naht-deck,clamp(92px,10.5vw,140px)); --naht-hub:calc(var(--naht-deck,clamp(92px,10.5vw,140px)) * .68); margin-top:calc((var(--naht-luft) + var(--naht-ueber)) * -1); padding-top:clamp(44px,6.4vw,88px);padding-bottom:clamp(40px,6vw,80px); background:var(--w-grund,#fff); border-top:1px solid var(--w-linie,rgba(0,0,0,.1)); border-top-left-radius:var(--w-radius,0); border-top-right-radius:var(--w-radius,0); box-shadow:0 -18px 44px -22px rgba(0,0,0,.28); /* 1 = angekommen (volle Deckung), 0 = eben erst hereingekommen (das Blatt liegt um den Hub tiefer, es deckt noch nichts). Der Wert kommt aus --naht, nicht aus --par. */ translate:0 calc((1 - var(--naht,1)) * var(--naht-hub)); /* Der Hub kommt je Bild aus --par. Ein Übergang darauf würde jeden neuen Wert erneut über 0,6 s anfahren — das Ergebnis ist ein Wert, der nie ankommt und praktisch stillsteht. Nur die Deckkraft darf weich sein. */ transition:opacity .6s var(--ease); will-change:transform} /* 03 kennt keinen Schatten und keine Rundung — dort ist die Naht eine Linie. */ [data-stil="03"] .wb-w-blatt{box-shadow:none;border-top:2px solid #111; translate:none} /* 06 schert: die Naht schert mit, sonst liegt eine gerade Kante in einem Entwurf, der keine geraden Kanten hat. */ [data-stil="06"] .wb-w-blatt{box-shadow:none; border-top:1px solid var(--w-linie); /* Scherung in transform, Hub in translate: beide Eigenschaften wirken nacheinander, ohne sich zu überschreiben. */ transform:skewY(-1.2deg)} @media (prefers-reduced-motion:reduce){ .wb-w-blatt{translate:none!important} } /* 06 schert alles, also trägt die Naht dort eine Kante statt eines Schattens. */ [data-stil="06"] .wb-w-stimmen,[data-stil="06"] .wb-w-preis, [data-stil="06"] .wb-w-kontakt,[data-stil="06"] .wb-w-wort{ box-shadow:none;border-top:1px solid var(--w-linie)} /* ── Über uns ──────────────────────────────────────────────────────────── Ein Leitsatz groß, darunter zwei Spalten Text: der Leitsatz trägt die Haltung, die Spalten tragen das Verfahren. */ .wb-w-leitsatz{margin:0 0 clamp(22px,2.6vw,36px);max-width:34ch; font:var(--w-h2,300 clamp(1.4rem,1.1rem + 1.4vw,2.1rem)/1.18 var(--w-f,var(--f-b))); letter-spacing:-.02em;color:var(--w-text,#15171B);text-wrap:balance} .wb-w-wort-satz{display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:clamp(20px,2.6vw,44px)} .wb-w-wort-satz .wb-w-absatz{max-width:46ch} /* ── Die Preisliste ────────────────────────────────────────────────────── Drei Spalten: Leistung, Dauer, Festpreis. Zahlen rechts und in der Schreibmaschine mit gleicher Ziffernbreite — eine Preisliste liest man spaltenweise, nicht zeilenweise. */ .wb-w-tab{width:100%;border-collapse:collapse;text-align:left; font:400 15px/1.4 var(--w-f,var(--f-b))} .wb-w-tab th[scope="col"]{padding:0 0 12px; font:400 11px/1.3 var(--f-m);letter-spacing:.12em;text-transform:uppercase; color:var(--w-leise,#6B7080);border-bottom:1px solid var(--w-linie,rgba(0,0,0,.1))} .wb-w-tab th[scope="row"]{padding:15px 0;font-weight:500; color:var(--w-text,#15171B); border-bottom:1px solid var(--w-linie,rgba(0,0,0,.1))} .wb-w-tab td{padding:15px 0;color:var(--w-leise,#6B7080); border-bottom:1px solid var(--w-linie,rgba(0,0,0,.1))} .wb-w-tab thead th:nth-child(2),.wb-w-tab tbody td:nth-child(2){text-align:right; font-family:var(--f-m);font-size:.92em;font-variant-numeric:tabular-nums; white-space:nowrap} .wb-w-tab thead th:last-child,.wb-w-tab tbody td:last-child{text-align:right; white-space:nowrap} .wb-w-tab tbody td:last-child b{font-family:var(--f-m);font-weight:400; font-size:1.06em;font-variant-numeric:tabular-nums; color:var(--w-text,#15171B)} /* 03 rastert auch die Tabelle: geteilte Linien, keine Luft. */ [data-stil="03"] .wb-w-tab th,[data-stil="03"] .wb-w-tab td{ border:1px solid #111;margin:-1px 0 0 -1px;padding:12px} [data-stil="03"] .wb-w-tab th[scope="col"]{background:#111;color:#EDEDED} /* 02 rundet, also runden auch die Preiszeilen — aber nur die Zahl. */ [data-stil="02"] .wb-w-tab tbody td:last-child b{color:var(--w-akzent)} /* Karte 04: derselbe Verlauf wie auf der großen Seite, damit Titel und Preise auf dem Bild lesbar bleiben. Als zweite Hintergrundschicht über dem Foto, nicht als Pseudoelement: die Karte ist ein im 3D-Körper und soll keine weitere Ebene bekommen. */ [data-stil="04"] .wb-karte-foto[data-foto]{ background-image:linear-gradient(to top,#08090C 2%,rgba(8,9,12,.86) 26%, rgba(8,9,12,.3) 56%,rgba(8,9,12,0) 74%),var(--bild); background-size:100% 100%,cover; background-position:50% 50%,50% 50%} /* ══ Je Entwurf eine Bewegung ══════════════════════════════════════════════ Die Animation ist hier kein Schmuck, sie IST das Argument. Wer durch alle sechs klickt, hat den Unterschied gespürt statt gelesen — deshalb genau eine charakteristische Bewegung je Richtung und keine zweite daneben. data-da schreibt der Rollhandler, sobald ein Block ins Fenster kommt; --par ebenso. Bei prefers-reduced-motion greift nichts davon, weil der ganze Block hinter [data-bewegung="ja"] steht. Der Startzustand hängt ausdrücklich an data-da="nein", nicht am bloßen Vorhandensein des Merkmals: setzt niemand das Merkmal — kein Skript, kein Bild, ein Fenster, das nie gerollt wird — stehen alle Blöcke fertig da. Vorher blieben sie in ihrem Startzustand stecken, und bei 05 ist das eine halb aufgezogene Maske: der Blendeffekt in jedem Element. */ [data-bewegung="ja"] .wb-w [data-da]{ transition:opacity .6s var(--ease),transform .6s var(--ease)} [data-bewegung="ja"] .wb-w [data-da="nein"]:not(.wb-w-blatt){opacity:0; transform:translateY(26px)} /* Die Blätter sind ausgenommen: sie tragen ihre eigene Bewegung (den Hub der Naht) und würden von transform:none stillgelegt. */ [data-bewegung="ja"] .wb-w [data-da="ja"]:not(.wb-w-blatt){opacity:1;transform:none} [data-bewegung="ja"] .wb-w .wb-w-blatt[data-da="ja"]{opacity:1} [data-bewegung="ja"] .wb-w .wb-w-blatt[data-da="nein"]{opacity:0} /* 01 · Keine Bewegung außer einer gezogenen Unterstreichung — das IST die Aussage. Die Blöcke stehen einfach da. */ [data-bewegung="ja"] [data-stil="01"] .wb-w [data-da]:not(.wb-w-blatt){opacity:1; transform:none;transition:none} [data-bewegung="ja"] [data-stil="01"] .wb-w .wb-w-blatt[data-da]{opacity:1} [data-bewegung="ja"] [data-stil="01"] .wb-w :is(h1,.wb-w-h1)::after{content:""; position:absolute;left:0;right:0;bottom:-.14em;height:1px;background:#1B1A16; transform:scaleX(0);transform-origin:left; transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .15s} [data-bewegung="ja"] [data-stil="01"] .wb-w [data-da="ja"] h1::after{transform:scaleX(1)} /* 02 · Elemente landen mit leichtem Überschwingen. */ [data-bewegung="ja"] [data-stil="02"] .wb-w [data-da]{ transition:opacity .42s var(--ease), transform .62s cubic-bezier(.34,1.42,.5,1)} [data-bewegung="ja"] [data-stil="02"] .wb-w [data-da="nein"]{ transform:translateY(38px)} [data-bewegung="ja"] [data-stil="02"] .wb-w-fach, [data-bewegung="ja"] [data-stil="02"] .wb-w-stimmen blockquote{ transition:opacity .38s var(--ease) calc(var(--i,0) * 90ms), transform .58s cubic-bezier(.34,1.42,.5,1) calc(var(--i,0) * 90ms)} [data-bewegung="ja"] [data-stil="02"] [data-da="nein"] .wb-w-fach, [data-bewegung="ja"] [data-stil="02"] [data-da="nein"] blockquote{ transform:translateY(26px);opacity:0} [data-bewegung="ja"] [data-stil="02"] [data-da="ja"] .wb-w-fach, [data-bewegung="ja"] [data-stil="02"] [data-da="ja"] blockquote{ transform:none;opacity:1} /* 03 · Harte Schnitte, gar keine Übergänge. Ein Block ist da oder nicht. */ [data-bewegung="ja"] [data-stil="03"] .wb-w [data-da]:not(.wb-w-blatt){transform:none; transition:opacity 0s} [data-bewegung="ja"] [data-stil="03"] .wb-w [data-da="nein"]{opacity:0} [data-bewegung="ja"] [data-stil="03"] .wb-w [data-da="ja"]{opacity:1} /* 04 · Langsame Bildparallaxe. --par läuft von -1 (Block kommt) über 0 (Mitte) nach 1 (Block geht); 7 % Versatz sind genug, um Tiefe zu lesen, und wenig genug, dass kein Rand frei wird — das Bild ist dafür um 14 % höher. */ [data-bewegung="ja"] [data-stil="04"] .wb-w [data-da]:not(.wb-w-blatt){transform:none; transition:opacity .9s var(--ease)} [data-bewegung="ja"] [data-stil="04"] .wb-w-bild{overflow:hidden} [data-bewegung="ja"] [data-stil="04"] [data-par]:not(.wb-w-blatt){ background-position:50% calc(50% + var(--par,0) * 7%)} [data-bewegung="ja"] [data-stil="04"] .wb-w-held .wb-w-bild{ transform:translateY(calc(var(--par,0) * -3.5%)) scale(1.08)} /* 05 · Weiche Maskenenthüllung von unten. Kein Schieben, kein Verblassen — die Fläche wird freigelegt. Die Maske ist doppelt so hoch wie der Block: die untere Hälfte ist deckend, die obere läuft aus. mask-position 0 0 legt die AUSLAUFENDE Hälfte auf den Block (Startzustand), 0 100% die deckende (Endzustand). Vorher war es umgekehrt gerechnet — der Endzustand blieb oben halb durchsichtig, und das sah in jedem Element aus wie ein Blendeffekt. */ [data-bewegung="ja"] [data-stil="05"] .wb-w .wb-w-blatt[data-da]{ -webkit-mask-image:none;mask-image:none} [data-bewegung="ja"] [data-stil="05"] .wb-w [data-da="nein"]:not(.wb-w-blatt){opacity:1;transform:none; -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 30%,#000 50%,#000 100%); mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 30%,#000 50%,#000 100%); -webkit-mask-size:100% 200%;mask-size:100% 200%; -webkit-mask-position:0 0;mask-position:0 0; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; transition:-webkit-mask-position 1s var(--ease),mask-position 1s var(--ease)} [data-bewegung="ja"] [data-stil="05"] .wb-w [data-da="ja"]:not(.wb-w-blatt){opacity:1;transform:none; -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 30%,#000 50%,#000 100%); mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 30%,#000 50%,#000 100%); -webkit-mask-size:100% 200%;mask-size:100% 200%; -webkit-mask-position:0 100%;mask-position:0 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; transition:-webkit-mask-position 1s var(--ease),mask-position 1s var(--ease)} /* 06 · Ebenen mit verschiedenen Geschwindigkeiten. Die Scherung bleibt, der Versatz kommt dazu — deshalb steht skewY in jeder Regel mit drin. */ [data-bewegung="ja"] [data-stil="06"] .wb-w [data-da]:not(.wb-w-blatt){transform:none; transition:opacity .7s var(--ease)} [data-bewegung="ja"] [data-stil="06"] .wb-w :is(h1,.wb-w-h1){ transform:skewY(-2.5deg) translateY(calc(var(--par,0) * -22px))} [data-bewegung="ja"] [data-stil="06"] .wb-w-vor{ transform:skewY(-2.5deg) translateY(calc(var(--par,0) * -46px))} [data-bewegung="ja"] [data-stil="06"] [data-par]:not(.wb-w-blatt){ transform:skewY(-2.5deg) translateY(calc(var(--par,0) * 30px))} [data-bewegung="ja"] [data-stil="06"] .wb-w-fach{ transform:skewY(-2.5deg) translateY(calc(var(--par,0) * calc(-14px - var(--i,0) * 12px)))} /* ── Kopf, Schild, Hinweis, Takte ── Alles liegt VOR dem Ring, nicht darin — sonst dreht die Schrift mit. */ .wb-ring-kopf{position:absolute;left:0;right:0;top:clamp(64px,8vh,96px); z-index:4;padding-inline:var(--rand);text-align:center; opacity:var(--kopf-o,0);pointer-events:none} .wb-ring-kopf h2{margin:0 auto;max-width:30ch; font:400 clamp(1.15rem,.95rem + .7vw,1.7rem)/1.18 var(--f-b); letter-spacing:-.024em;text-wrap:balance;color:var(--on-night)} /* Ab 1280 px steht der Satz LINKS neben dem Ring statt über ihm. Über den Karten war er in ihnen: der Ring füllt die Bühne mittig, und je größer der Schirm, desto weiter wächst die vorderste Karte in das Kopfband hinein. Die Breite ist die freie Lücke bis zur linken Nachbarkarte, nicht geraten: deren projizierte Außenkante liegt bei 0,95 × Kartenbreite links der Ringmitte (0,779 für den Radius, 0,25 für die halbe gedrehte Kartenbreite, das Ganze um die Perspektive verkleinert). 20 px sind der Atemabstand. Auf Kartenmitte, also auf --ring-y: der Satz steht neben den Karten, nicht über ihnen. Die 56 px Einzug lassen den linken Pfeil davor stehen — er sitzt auf derselben Höhe und läge sonst im Satz. */ @media (min-width:1280px){ .wb-ring-kopf{left:calc(var(--rand) + 56px);right:auto; top:var(--ring-y);translate:0 -50%; padding-inline:0;text-align:left; width:min(24rem,max(14rem,calc(var(--ring-x) - var(--karte-b) * .92 - var(--rand) - 76px)))} .wb-ring-kopf h2{margin:0;max-width:24ch} } .wb-schild{position:absolute;left:var(--ring-x);bottom:clamp(60px,10vh,108px); translate:-50% 0;z-index:4;width:min(30rem,86vw);text-align:center; opacity:var(--schild-o,0);pointer-events:none} .wb-schild-titel{display:block; font:500 clamp(1.05rem,.9rem + .6vw,1.45rem)/1.25 var(--f-b); letter-spacing:-.018em;color:var(--on-night)} .wb-schild-nr{display:block;margin-top:8px;font:400 .76rem/1 var(--f-m); letter-spacing:.1em;color:var(--on-night-mute)} .wb-schild-text{display:block;margin:13px auto 0;max-width:44ch; font:400 .9rem/1.55 var(--f-b);font-style:normal;color:var(--on-night-mute)} .wb-pfeil{position:absolute;top:var(--ring-y);translate:0 -50%;z-index:5; width:46px;height:46px;border-radius:50%; border:1px solid var(--linie);background:rgba(12,18,32,.72); color:var(--on-night);cursor:pointer;display:grid;place-items:center; opacity:var(--pfeil-o,0);pointer-events:none; transition:border-color .3s var(--ease),background-color .3s var(--ease)} .wb-quer[data-bedienbar="ja"] .wb-pfeil{pointer-events:auto} .wb-pfeil:hover{border-color:var(--nadel);background:rgba(19,28,48,.9)} .wb-pfeil:focus-visible{outline:2px solid var(--nadel);outline-offset:3px} .wb-pfeil[data-seite="links"]{left:clamp(12px,3vw,34px)} .wb-pfeil[data-seite="rechts"]{right:clamp(12px,3vw,34px)} .wb-pfeil svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6} .wb-hinweis{position:absolute;left:var(--ring-x);bottom:clamp(24px,4.4vh,44px); translate:-50% 0;z-index:4;margin:0; display:flex;align-items:center;gap:10px;white-space:nowrap; font:400 .74rem/1 var(--f-m);letter-spacing:.06em;color:var(--on-night-mute); opacity:var(--hinweis-o,0);pointer-events:none; transition:opacity .5s var(--ease)} .wb-hinweis svg{width:20px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4} .wb-quer[data-beruehrt="ja"] .wb-hinweis{opacity:0} /* Die Takte treten an die Stelle des Hinweises, sobald er weg ist — derselbe Platz, keine zweite Zeile. */ .wb-takte{position:absolute;left:var(--ring-x);bottom:clamp(24px,4.4vh,44px); translate:-50% 0;z-index:4;display:flex;gap:7px;opacity:0; transition:opacity .4s var(--ease)} .wb-quer[data-beruehrt="ja"] .wb-takte{opacity:var(--schild-o,0)} .wb-takte i{width:26px;height:2px;border-radius:1px;background:var(--linie); transition:background-color .3s var(--ease)} .wb-takte i[data-an="ja"]{background:var(--nadel)} /* ── Die Wahl ── Im Fluss unter der Bühne, nicht in der Choreografie: sie ist das Ergebnis. */ .wb-wahl-block{position:relative;z-index:1} .wb-wahl{position:relative;z-index:1;max-width:calc(var(--spalte) + 140px); margin-inline:auto; padding:clamp(56px,9vh,96px) var(--rand) clamp(64px,11vh,120px); display:grid;gap:14px;text-align:center} .wb-wahl-satz{margin:0;font:400 var(--t-lead)/1.45 var(--f-b); letter-spacing:-.012em;color:var(--on-night)} .wb-wahl-stil{margin:0;font:400 .82rem/1.4 var(--f-m);letter-spacing:.08em; color:var(--nadel)} .wb-wahl-stil[data-gewaehlt="nein"]{display:none} .wb-wahl-dank{margin:0;font:400 .84rem/1.55 var(--f-b);color:var(--on-night-mute)} /* ══ Der Farbmoment ════════════════════════════════════════════════════════ Farbe entsteht auf dieser Seite genau EINMAL: bei p 0,90 in Abschnitt 7. Davor ist der Akzent grau, danach blau. Der Schalter ist ein Merkmal am , also eine Umschaltung an einer Stelle und kein zweiter Ort. Umgesetzt über die Akzenttoken selbst. Das ist der Grund, warum er die ganze Seite erfasst — Erklärstriche, Marken, Haarlinien, die Leiste — ohne dass an dreißig Stellen eine Regel dazukommt. Der Übergang hängt NICHT am Token: Eigenschaftswerte gehen keinen Übergang. Er hängt an den Trägern, und nur an denen, die den Akzent wirklich führen — 260 ms linear, ein Schlag, kein Verlaufen. */ [data-farbe="grau"]{--nadel:#6C7488;--nadel-hell:#9AA3B4;--glut:#8C8C90} [data-farbe="blau"] .wb-flaeche{--bunt:1} [data-farbe] .wb-s-strich, [data-farbe] .wb-s-marken li::after, [data-farbe] .wb-s-linien i, [data-farbe] .wb-leiste-schiene, [data-farbe] .wb-leiste-fuell, [data-farbe] .wb-leiste-punkte li[data-an="ja"] i, [data-farbe] .wb-quer .wb-aufschrift::before, [data-farbe] .wb-takte i, [data-farbe] .wb-wahl-stil{ transition:background-color .26s linear,box-shadow .26s linear,color .26s linear} [data-farbe] .wb-striche path{transition:stroke .26s linear} [data-farbe] .wb-striche circle{transition:fill .26s linear} /* ── Ohne Bewegung: keine Bühne (Abschnitt 9) ── Die Panzertür steht, darunter der Ring als Raster aus sechs Karten, jede anklickbar, Farbe von Anfang an. Kein Argument fehlt, kein Inhalt fehlt. Der Ring wird dabei nicht "abgeschaltet", er wird flach: perspective weg, preserve-3d weg, Gitter statt Radius. */ @media (prefers-reduced-motion:reduce){ .wb-wende,.wb-pfeil,.wb-hinweis,.wb-takte{display:none} /* Das Fenster bleibt bedienbar, nur ohne Wachsen: die Argumente sind der Grund, warum es existiert, und die fehlen sonst ganz. */ .wb-blick,.wb-blick-schale{transition:none} .wb-blick-schale{transform:none} .wb-blick-rollfeld{scroll-behavior:auto} .wb-ring-satz{position:static;translate:none;width:auto;opacity:1; max-width:calc(var(--spalte) + 140px);margin:0 auto clamp(30px,5vh,54px); padding-inline:var(--rand)} .wb-ring-kopf{position:static;left:auto;right:auto;width:auto;translate:none; text-align:center;padding-inline:var(--rand); opacity:1;pointer-events:auto; margin-bottom:clamp(28px,4.6vh,48px)} .wb-umlauf{position:static;inset:auto;perspective:none;cursor:auto; max-width:calc(var(--spalte) + 140px);margin-inline:auto; padding-inline:var(--rand)} .wb-ring-koerper{position:static;translate:none;transform:none; transform-style:flat;width:auto;height:auto; display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:clamp(16px,2.4vw,26px)} .wb-flaeche{position:static;margin:0;width:auto;height:auto; aspect-ratio:4/3;transform:none;filter:none;opacity:1;box-shadow:none; border-color:var(--linie)} .wb-flaeche::before,.wb-flaeche::after{display:none} .wb-schild{position:static;translate:none;width:auto;opacity:1; margin:clamp(28px,4.6vh,48px) auto 0} } /* ── Schmal ─────────────────────────────────────────────────────────────── Die Schwelle ist keine Geschmacksfrage, sondern eine Rechnung. Die vier Marken sitzen auf Prozentwerten der FELDHÖHE, und die kommt über aspect-ratio aus der Viewport-BREITE. Ihre Texthöhe steht dagegen fest in rem: Überschrift + zwei Zeilen Beschreibung ≈ 59 px. Der engste Ankerabstand ist 59,3 % → 75,5 %, also 16,2 % der Feldhöhe. Damit nichts überlappt, muss 0,162 × Feldhöhe ≥ 59 px sein — Feldhöhe ≥ 364 px, also Viewport ≳ 950 px. Bei 899 px kollidierten die Beschriftungen deshalb im Band bis 1000 px und lasen sich als ein Textblock. 1023 px ist derselbe Punkt, an dem start.css und analyse.css die Leiste auf das Menü umschalten — eine Schwelle für den ganzen Auftritt. Darunter wird der Hero ein gewöhnlicher Abschnitt: Satz, Bild, Liste. Die Striche fallen weg — auf der Breite sind sie Fadenkreuze ohne Aussage. */ @media (max-width:1023px){ .wb-hero{height:auto} .wb-buehne{position:static;height:auto;display:block;padding:calc(56px + 7vh) 0 9vh} .wb-feld{position:relative;aspect-ratio:auto;margin-top:0;display:grid;gap:34px} .wb-satz,.wb-teil,.wb-marken{position:static;width:auto;translate:none;transform:none} .wb-satz{max-width:none;opacity:1} .wb-striche{display:none} .wb-marken{height:auto;display:grid;gap:18px;text-align:left} .wb-marken li{position:static;translate:none;opacity:1} /* ── Der Hero als klebende Bühne ── Dieselbe Choreographie wie in der Breiten-Fassung, senkrecht gestellt: der Satz oben geht, das Bauteil wächst in den freien Platz, und am Ende blenden die vier Marken genau dort ein, wo der Satz stand. Satz und Marken liegen deshalb in DERSELBEN Gitterzelle. Die Zeile ist so hoch wie der höhere von beiden und rührt sich beim Wechsel nicht — lägen sie untereinander, sprang das Bauteil in dem Moment, in dem die Marken Platz brauchen. Nur im Bewegungsfall. Ohne ihn bleibt der Hero der gewöhnliche Abschnitt von oben (Satz, Bild, Liste), und bei prefers-reduced-motion greift [data-bewegung="ja"] nie. */ [data-bewegung="ja"] .wb-hero{height:var(--laenge-schmal,320vh)} /* grid-template-rows und align-items:stretch statt place-items:center: eine implizite auto-Zeile richtet sich nach dem Inhalt, und ein height:100 % des Kindes bezieht sich dann auf genau diese Inhaltshöhe — die Zeile wuchs auf 691 px in einer 540 px hohen Bühne, das Bauteil lief unten heraus. Eine 1fr-Zeile ist unabhängig vom Inhalt so hoch wie der Platz. */ [data-bewegung="ja"] .wb-hero .wb-buehne{position:sticky;top:0;height:100svh; display:grid;grid-template-rows:minmax(0,1fr); align-items:stretch;justify-items:center;overflow:hidden; padding:calc(56px + 3vh) 0 4vh} [data-bewegung="ja"] .wb-hero .wb-feld{height:auto;min-height:0; gap:clamp(12px,2.4vh,24px);grid-template-rows:auto minmax(0,1fr)} [data-bewegung="ja"] .wb-hero .wb-satz, [data-bewegung="ja"] .wb-hero .wb-marken{grid-row:1;grid-column:1; align-self:start} [data-bewegung="ja"] .wb-hero .wb-satz{opacity:var(--satz-o,1)} [data-bewegung="ja"] .wb-hero .wb-marken li{opacity:var(--m,0)} /* Das Bauteil wächst nach OBEN, in den Platz, den der Satz freigibt — wie oben um seine feste Kante, nur ist die hier die untere. */ [data-bewegung="ja"] .wb-hero .wb-teil{grid-row:2;grid-column:1;min-height:0; transform:scale(var(--teil-s,1));transform-origin:50% 100%} [data-bewegung="ja"] .wb-hero .wb-teil img{width:100%;height:100%; object-fit:contain;object-position:50% 100%} /* Die fünf Schichtbühnen: alles senkrecht. Bild oben, Text darunter, Marken als Liste. Kein Kleben, keine Drehung, keine Lichtlinien — der Wischer läuft aber auch hier (siehe Scroll-Effekt weiter oben). Das Stapeln selbst steht schon im Grundzustand — hier nur die Spalte. */ .wb-s-feld{grid-template-columns:1fr;gap:30px} /* ── Die senkrechte Fortschrittsleiste ── Dieselbe Mechanik wie oben, nur zurückgedreht: eine Haarlinie in der Gasse links, eine Füllung im Akzent, ein Punkt je Station. Die Punkte sitzen hier NICHT auf gleichen Abständen wie in der Waagerechten — gestapelt sind die fünf Abschnitte unterschiedlich hoch, und ein Punkt auf einem Fünftel der Höhe stünde irgendwo im Absatz. Also trägt jede Station ihren Punkt selbst, an ihrer Aufschrift. Genauso hält es die Landingpage in ihrer Schmal-Fassung. Beschriftungen braucht die Leiste deshalb auch nicht: die Aufschrift steht direkt neben dem Punkt und sagt dasselbe. Die Füllung ist eine LÄNGE in Pixeln, kein Anteil — sie reicht bis zur Leselinie, und die trifft einen Punkt genau dann, wenn seine Aufschrift sie erreicht. Ein Prozentsatz könnte das bei ungleichen Höhen nicht. */ [data-bewegung="ja"] .wb-quer{--gasse:26px} [data-bewegung="ja"] .wb-quer .wb-s-feld{ padding-left:calc(var(--rand) + var(--gasse))} [data-bewegung="ja"] .wb-leiste{display:block;position:absolute;z-index:2; left:calc(var(--rand) + var(--gasse)/2);top:0;bottom:0;width:1px; pointer-events:none} [data-bewegung="ja"] .wb-leiste-innen{position:relative;height:100%} [data-bewegung="ja"] .wb-leiste-schiene{position:absolute;left:0;top:0; bottom:0;width:1px;background:var(--nadel);opacity:.24} [data-bewegung="ja"] .wb-leiste-fuell{position:absolute;left:0;top:0; width:1px;height:var(--v,0px);background:var(--nadel-hell); box-shadow:0 0 9px color-mix(in oklab,var(--nadel-hell) 45%,transparent)} [data-bewegung="ja"] .wb-leiste-punkte{display:none} [data-bewegung="ja"] .wb-quer .wb-aufschrift{position:relative} [data-bewegung="ja"] .wb-quer .wb-aufschrift::before{content:""; position:absolute;left:calc(-1 * var(--gasse)/2);top:.5em; width:7px;height:7px;translate:-50% -50%;border-radius:50%; background:var(--on-night-mute);opacity:.45; transition:background-color .3s var(--ease),opacity .3s var(--ease), transform .4s var(--ease)} [data-bewegung="ja"] .wb-s[data-an="ja"] .wb-aufschrift::before{ background:var(--nadel-hell);opacity:1;transform:scale(1.35)} .wb-s-satz{max-width:none;order:2} .wb-s-teil{order:1;margin-right:0;perspective:none} /* Die Pointe kommt zuletzt. Ohne eigenes order bliebe sie auf dem Vorgabewert 0 und stünde vor Bild UND Überschrift — die Antwort vor der Frage. */ .wb-s-quer{order:3;margin-top:24px} .wb-s-linien{display:none} /* ── Abschnitt 7 unter 1024 px ── Die Bühne läuft mit halber Skala und ohne Akt I (Abschnitt 9): auf einem Telefon gibt es keine Stationslage, von der die Tür herkommen könnte — die Querbahn ist dort gestapelt. Also beginnt die Choreografie beim Schließen. --laenge halbiert, Ringkarte auf Fensterbreite, keine Unschärfe. Gewischt statt gezogen besorgt derselbe Zeigercode; touch-action:pan-y lässt das senkrechte Rollen durch. */ /* height, nicht --laenge: die Länge steht inline im Markup, und ein Inline-Stil schlägt auch eine Regel im Media Query. Derselbe Griff wie beim Hero mit --laenge-schmal. */ /* Das Fenster schmal: der Rahmen wandert unter die Vorschau. Kein Argument fällt weg — nebeneinander bliebe für beides zu wenig, untereinander für jedes genug. */ .wb-blick{padding:0} /* Die Zeilen explizit: 1fr auto hieße, der Rand bekommt seine INHALTSHÖHE und das Fenster den Rest — bei fünf Argumenten bleiben davon 150 px übrig. max-height am Rand hilft nicht, weil die Zeile trotzdem mit der vollen Inhaltshöhe gerechnet wird. Also gibt das Raster die Aufteilung vor und der Rand rollt in seinem Anteil. */ .wb-blick-schale{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) minmax(0,42%); width:100%;height:100%;border:0} .wb-blick-rand{border-left:0;border-top:1px solid var(--linie);gap:14px} .wb-w-held,.wb-w-kontakt{grid-template-columns:1fr} .wb-w-gitter{grid-template-columns:1fr} [data-stil="03"] .wb-w-held-satz{border-right:0;border-bottom:1px solid #111} [data-stil="06"] .wb-w :is(h1,.wb-w-h1),[data-stil="06"] .wb-w-vor{margin-inline:0} .wb-quer{--karte-b:min(78vw,22rem,calc((100svh - 300px) / .95)); --ring-x:50%;--ring-y:48%;--tiefe:1100px} /* Gestapelt gibt es keine Bahn, an deren Ende die Akte laufen könnten — also bekommt der Ring seine eigene klebende Bühne hinter den fünf Stationen. 300 vh: Akt I und II fallen hier weg (Abschnitt 9, "ohne Akt I"), die Tür bleibt oben in ihrer Station stehen. Was bleibt, ist die Wende ab der Linie: Karte auf, Ring, Farbe. */ /* Gestapelt liegt das Feld im Fluss hinter den Stationen und überdeckt nichts — dort ist es immer sichtbar. */ /* 480 vh: 300 für die Akte, 180 Standzeit für die Hand. Dieselbe Rechnung wie breit — ein einzelner Bildschirm Standzeit ist zu wenig, um einen Ring anzufassen, an dem man gerade vorbeiscrollt. */ .wb-ring-feld{position:relative;inset:auto;height:480vh;--akt:.625; pointer-events:auto;visibility:visible} .wb-ring-halter{position:sticky;top:0;height:100svh;overflow:hidden} /* Der Satz der Wende teilt sich die Gasse mit der Leiste: die Schiene läuft senkrecht bei --rand + Gasse/2, und ein Block, der bei --rand anfängt, bekommt sie mitten durch den ersten Buchstaben. Also rückt er um die ganze Gasse ein, genau wie die Stationsfelder (.wb-s-feld) darüber. Der Rückfallwert ist 0: --gasse gibt es nur bei eingeschalteter Bewegung, und ohne Bewegung steht auch keine Leiste da, an der man einrücken müsste. */ .wb-ring-satz{left:calc(var(--rand) + var(--gasse,0px));right:var(--rand); width:auto;top:clamp(96px,14vh,150px);translate:none} .wb-ring-kopf{top:clamp(80px,12vh,120px)} .wb-schild{bottom:clamp(52px,9vh,88px)} .wb-pfeil{width:40px;height:40px} } /* ══ Luft unter den überschobenen Abschnitten ══════════════════════════════ Das Blatt deckt beim Überschieben rund 65 px ab und hebt sich dabei um 38 px. Ohne Reserve sind das gedeckte Zeilen: die letzte Zeile von „Was wir reparieren" lag halb unter den Bewertungen. Diese Regel steht am ENDE der Datei, nicht bei der Naht. Die sechs Handschriften setzen weiter oben ihre eigenen Polster — 03 zum Beispiel ein knappes —, und bei gleicher Spezifität gewinnt die spätere Regel. Weiter oben wurde die Reserve genau dort weggeräumt, wo sie am nötigsten ist. */ .wb-w{--naht-deck:clamp(92px,10.5vw,140px)} /* Das Polster ist so groß wie die DECKUNG, nicht 34 px kleiner. Die 34 px waren als verdeckte Kartenkante gedacht — bei 03 sitzt die Preiszeile aber ohne eigenes Innenmaß an der Kante, und das Blatt schnitt sie ab. Deckt das Polster die volle Strecke, schiebt das Blatt über Weißraum: die Figur bleibt, der Inhalt bleibt lesbar. */ .wb-w .wb-w-leist, .wb-w .wb-w-preis, .wb-w .wb-w-schritte{padding-bottom:calc(var(--naht-deck) + 8px)} /* Der Hinweis unter den Bewertungen im Entwurfsfenster: er gehört Arcturis, nicht dem Entwurf — kleiner Satz in der Schrift des Entwurfs, gedämpft. */ .wb-w-stimmen-fuss{margin:clamp(14px,1.6vw,22px) 0 0; font:400 clamp(.72rem,.95cqi,.86rem)/1.55 var(--w-f,var(--f-b)); color:var(--w-text,#15171B);opacity:.72;max-width:56ch}