/* =========================================================================== ROUTE A — UNTERSEITE „ENERGIESIEGEL" --------------------------------------------------------------------------- Familienverhaeltnis zur abgenommenen Startseite („Lastgang"): IDENTISCH Tokens, Archivo/Poppins an denselben Breiten, Typo- und Abstandsskala, Duotone-Grade ueber alle Bilder, Header und Footer zeichengleich, vier Beschleunigungskurven, Gelb als Linie/Kante/Punkt und genau EINE Flaeche. EIGEN Die Startseite misst eine stetige, FALLENDE Groesse (Verbrauchs- index 100 → 65) und zeichnet sie als Kurve. Diese Seite misst nichts, sie BELEGT. Ihre Groesse ist deshalb diskret und STEIGEND: die Pruefstufe 1 → 4. In derselben linken Spalte, in der die Startseite eine fallende Zahl fuehrt, steht hier ein quadratisches Stempelfeld. Runder Messpunkt ↔ quadratischer Stempel. Gezogene Linie ↔ gesetzter Abdruck. =========================================================================== */ /* --- 1) TOKEN-SCHICHT — 1:1 aus elementor/tokens.css ---------------------- */ :root { --dgfe-blue-50:#eef4fb; --dgfe-blue-100:#d4e2f3; --dgfe-blue-200:#a9c4e6; --dgfe-blue-300:#7ea7d9; --dgfe-blue-400:#4285c1; --dgfe-blue-500:#0c4da2; --dgfe-blue-600:#0a3f85; --dgfe-blue-700:#073166; --dgfe-blue-800:#052448; --dgfe-blue-900:#031629; --dgfe-navy-50:#eaecf2; --dgfe-navy-100:#c8cdde; --dgfe-navy-200:#9099b9; --dgfe-navy-300:#586795; --dgfe-navy-400:#37406e; --dgfe-navy-500:#1c244b; --dgfe-navy-600:#161d3c; --dgfe-navy-700:#10162d; --dgfe-navy-800:#0a0e1e; --dgfe-navy-900:#04060f; /* !!! yellow-500 NIE als Text auf Weiss (1,33:1). Gelber Text = yellow-800. */ --dgfe-yellow-50:#fffbe6; --dgfe-yellow-100:#fff5bd; --dgfe-yellow-200:#ffeb84; --dgfe-yellow-300:#ffe24a; --dgfe-yellow-400:#ffe05a; --dgfe-yellow-500:#ffde59; --dgfe-yellow-600:#d9b837; --dgfe-yellow-700:#a88a25; /* real 3,32:1 — nicht fuer Text */ --dgfe-yellow-800:#7a6418; /* 5,73:1 — gelber Text auf Weiss */ --dgfe-yellow-900:#4d3f0d; --dgfe-neutral-50:#f7f7f8; --dgfe-neutral-100:#e9eaeb; --dgfe-neutral-200:#d0d1d3; --dgfe-neutral-300:#abacaf; --dgfe-neutral-400:#808285; --dgfe-neutral-500:#6b6c6f; --dgfe-neutral-600:#595a5d; --dgfe-neutral-700:#3f4042; --dgfe-neutral-800:#28292b; --dgfe-neutral-900:#131415; --dgfe-color-heading: var(--dgfe-navy-500); --dgfe-color-link: var(--dgfe-blue-500); --dgfe-color-error:#8a1c1c; --dgfe-color-error-bg:#fef4f4; --dgfe-color-success:#1c5b34; --dgfe-color-success-bg:#f0f7f3; --dgfe-color-focus-ring: var(--dgfe-yellow-500); --dgfe-space-xs:.25rem; --dgfe-space-sm:.5rem; --dgfe-space-md:1rem; --dgfe-space-lg:1.5rem; --dgfe-space-xl:2rem; --dgfe-space-2xl:3rem; --dgfe-space-3xl:4rem; --dgfe-radius-sm:4px; --dgfe-radius-md:6px; --dgfe-radius-lg:12px; --dgfe-shadow-sm:0 1px 2px rgba(15,23,42,.06); --dgfe-shadow-md:0 4px 12px rgba(28,36,75,.15); --dgfe-shadow-lg:0 10px 28px rgba(28,36,75,.22); --dgfe-tap-target-mobile:44px; --dgfe-cta-z:9990; --dgfe-skip-z:10000; /* ========================================================================== TYPO-SKALA — eine Leiter, zehn Stufen. -------------------------------------------------------------------------- Verhaeltnis √2, das DIN-476-Papierverhaeltnis, abgetastet an Halbschritten (2^(1/4) = 1,1892). Damit ist jede zweite Stufe exakt √2 auseinander und jede vierte Stufe exakt das Doppelte: 12 · 24 · 48 · 96. Anker ist 12px — genau die Untergrenze. Keine Stufe faellt je darunter, auf keiner Breite. Stufe 1440px 390px 320px Rolle fs-1 12,0 12,0 12,0 Mikro-Reserve: der Anker der Leiter und die harte Untergrenze. Zurzeit unbenutzt. fs-2 14,3 14,3 14,3 Beischrift: Eyebrow, Register, Bildunterschrift, Feldkennung, Knopf, Navigation, Fusszeile fs-3 17,0 17,0 17,0 Fliesstext, Kartentext, Tabelle, Liste fs-4 20,2 20,2 20,2 Vorspann / Lead fs-5 24,0 21,0 20,8 H4 / Kartentitel fs-6 28,5 22,2 21,8 H3 fs-7 33,9 23,7 23,0 H2 klein / Sektionstitel fs-8 40,3 25,4 24,4 H2 fs-9 48,0 27,0 25,6 H1 / Kennzahl fs-10 67,9 30,0 27,5 Display / Hero-Zeile Stufe 10 laesst den Halbschritt (57,1) bewusst aus und nimmt den vollen √2-Sprung ab H1. Auf Displaygroesse ist ein Halbschritt ueber eine Seite hinweg nicht mehr unterscheidbar — dort trennt erst der ganze Schritt. Die Stufen 1-4 stehen fest: der Textbereich schrumpft auf dem Telefon nicht, dort braucht er eher mehr. Erst ab Stufe 5, wo die Schrift zur Ueberschrift wird, laeuft die Leiter ein. Vorher war auch Stufe 4 fluid — dann lag der Vorspann bei 390px auf 17,2px und damit auf demselben Grad wie der Fliesstext darunter: eine Stufe, die nichts mehr unterscheidet. Warum die Beischrift auf Stufe 2 sitzt und nicht auf Stufe 1: sie laeuft fast durchweg als gesperrte Schmalversalie (.cond, wdth 70, +.15em). Versalien wirken bei gleicher Punktgroesse kleiner, gesperrte lesen sich zusaetzlich langsamer. 14,3px gesperrte Schmalversalien entsprechen etwa 11,5px normalem Text — die Untergrenze ist damit real eingehalten, nicht nur rechnerisch. Warum der Anzeigebereich zum Telefon hin so stark einlaeuft: die Hero-Zeilen sind im Markup von Hand in Zeilen zerlegt (.lm > i, fuer die Zeilenmaske), jede Zeile muss also einzeilig bleiben — sie darf nicht umbrechen. Die laengste davon, „für Ihren Energieeinkauf.", passt bei 390px nur bis 32,8px, bei 360px nur bis 30,0px. Und .dsp trennt zwar deutsche Komposita (hyphenate-limit-chars: 13 7 6), aber „FÖRDERUNG" hat neun Buchstaben und faellt unter diese Grenze — es kann gar nicht brechen. Der Anzeigegrad am unteren Ende ist damit nicht frei waehlbar, sondern vom Inhalt bestimmt. Die Rampe laeuft deshalb von 320px bis 1440px und wird nicht schon bei 390px angehalten. ========================================================================== */ --fs-1: 0.75rem; --fs-2: 0.8938rem; --fs-3: 1.0625rem; --fs-4: 1.2625rem; --fs-5: clamp(1.3rem, 1.2429rem + 0.2857vw, 1.5rem); --fs-6: clamp(1.3625rem, 1.2429rem + 0.5982vw, 1.7813rem); --fs-7: clamp(1.4375rem, 1.2429rem + 0.9732vw, 2.1188rem); --fs-8: clamp(1.525rem, 1.2411rem + 1.4196vw, 2.5188rem); --fs-9: clamp(1.6rem, 1.2rem + 2.0vw, 3rem); --fs-10: clamp(1.7188rem, 0.9973rem + 3.6071vw, 4.2438rem); } /* --- 2) SEITEN-SCHICHT — zeichengleich zur Startseite --------------------- */ :root { --paper: #ffffff; --paper-2: color-mix(in srgb, var(--dgfe-navy-50) 62%, white); --ink: var(--dgfe-navy-400); --ink-strong: var(--dgfe-navy-500); --ink-quiet: var(--dgfe-navy-300); --ink-accent: var(--dgfe-yellow-800); --ink-n: #ffffff; --ink-n-muted: color-mix(in srgb, white 80%, var(--dgfe-navy-500)); --ink-n-quiet: color-mix(in srgb, white 60%, var(--dgfe-navy-500)); --rule: color-mix(in srgb, var(--dgfe-navy-500) 16%, transparent); --rule-2: color-mix(in srgb, var(--dgfe-navy-500) 30%, transparent); --rule-n: color-mix(in srgb, var(--dgfe-yellow-500) 24%, transparent); --rule-n2: color-mix(in srgb, var(--dgfe-yellow-500) 45%, transparent); --page: 1560px; --gut: clamp(16px, 3.2vw, 52px); --axis: clamp(46px, 6vw, 104px); --colgap: clamp(14px, 1.6vw, 26px); --header-h: 68px; --header-h-sm: 54px; /* Der Anschnitt muss GENAU bis an die Fensterkante reichen, nicht darueber hinaus. Das Blatt ist min(--page, 100vw - 2*--gut) breit und mittig, der Rand daneben also max(--gut, (100vw - --page)/2). Die alte Formel (--gut + 9vw) war geraten: bei 1440 schob sie jedes angeschnittene Bild 130 px hinter die Fensterkante, wo `overflow-x: clip` es stumm abschnitt. Aus dem 4:5-Kasten wurde dadurch sichtbar ein 2:3-Kasten. */ --bleed: max(var(--gut), calc((100vw - var(--page)) / 2)); /* --- Dichte-Skala: Abstand einer KANTE zum Text darin ------------------- Drei Stufen, alle Endpunkte aus der Abstandsskala oben (md/lg/xl/2xl), keine frei gegriffenen Zahlen. Zielwerte, gegen die gemessen wird: mindestens 20 px bei 1440 px, mindestens 14 px bei 390 px — kein Text beruehrt eine Kante. --inset-line 16 … 24 px an einer einzelnen Haarlinie (Trennlinie, Kopfzeile, Bandkante) --inset-row 16 … 32 px Registerzeile zwischen zwei Trennlinien --inset-box 24 … 48 px umrandeter oder gefuellter Kasten Bei 1440 px sind das 22,3 / 28,8 / 34,6 px, bei 390 px 16 / 16 / 24 px. Die Staffelung ist nicht dekorativ: je mehr Kanten ein Element einschliessen, desto mehr Luft braucht der Text darin, sonst liest sich der Kasten als Klammer um den Satz statt als Feld, in dem er steht. */ --inset-line: clamp(var(--dgfe-space-md), 1.55vw, var(--dgfe-space-lg)); --inset-row: clamp(var(--dgfe-space-md), 2vw, var(--dgfe-space-xl)); --inset-box: clamp(var(--dgfe-space-lg), 2.4vw, var(--dgfe-space-2xl)); --secY: clamp(50px, 5.6vw, 86px); --secY-lg: clamp(64px, 7.2vw, 108px); --secY-sm: clamp(30px, 3.2vw, 46px); /* Dieselben vier Kurven mit denselben vier Aufgaben wie auf der Startseite. `--e-point` traegt hier nicht den Messpunkt, sondern den Stempelabdruck: dasselbe leichte Ueberschwingen, nur mit umgekehrter Richtung (von oben herab statt aus dem Nichts heraus). */ --e-draw: cubic-bezier(.19,.72,.14,1); --e-rise: cubic-bezier(.16,1,.3,1); --e-shut: cubic-bezier(.58,.02,.28,1); --e-point: cubic-bezier(.34, 1.06, .3, 1); --t-draw: 1100ms; --t-rise: 720ms; --t-shut: 860ms; --t-point: 420ms; --t-ui: 200ms; /* Die Kartei hat eine eigene Kurve und eine eigene Dauer, und beide sind eine Korrektur: der Anlauf des Vorgaengers zaehlte die vier Stufen in 2,66 s durch und lief dabei auf `--e-rise` — einer Eintrittskurve, die hart anfaengt und lang ausrollt. Fuer einen ZUSTANDSWECHSEL ist das die falsche Kurve; er soll weich anlaufen UND weich enden. `--e-card` ist deshalb symmetrisch, und mit 860 ms fuer den Schub plus Pausen, die von Schritt zu Schritt laenger werden (1500 / 2100 / 2800 ms statt 620 / 1020 / 1020), braucht der Durchlauf 6,4 s statt 2,7 s: er faengt an, wird ruhiger und kommt zur Ruhe, statt durchzuticken. */ --e-card: cubic-bezier(.62, 0, .28, 1); --t-card: 860ms; --ff-dsp: "Archivo", "Helvetica Neue", Arial, sans-serif; --ff-txt: "Poppins", "Segoe UI", system-ui, sans-serif; } /* --- 3) Reset / Basis ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); overflow-x: clip; } body { margin: 0; overflow-x: clip; background: var(--paper); font-family: var(--ff-txt); font-size: var(--fs-3); font-weight: 300; line-height: 1.62; color: var(--ink); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } figure { margin: 0; } p { margin: 0; text-wrap: pretty; } /* Trennung gehoert an den FLIESSTEXT, nicht an eine Liste von Bauteilen. Vorher stand `hyphens: auto` nur auf neun handverlesenen Klassen (Abschnitt 16); die Hauptspalte — `.measure`, `.lead`, jeder gewoehnliche Absatz — war nicht dabei. Zusammen mit `text-wrap: pretty` erzeugte das bei 390 px eine Treppe: `pretty` verteilt die letzten Zeilen um, um kein Hurenkind zu lassen, und wenn nichts getrennt werden darf, bleiben dabei vier kurze Zeilen hintereinander stehen. Gemessen am Absatz „Der Prozess ist bewusst schlank …" bei 390 px: 275 / 243 / 265 / 146 / 205 / 178 / 138 px. Dieselbe Regel wie beim Rest der Seite, nur eine Ebene tiefer angesetzt: 8 Zeichen Mindestlaenge, 4 auf jeder Seite. `.cond` nimmt sie wieder zurueck — das sind die Versalzeilen mit 0,15em Laufweite, in denen ein Trennstrich ein Fleck waere. */ p, li, figcaption, .lead, .measure, .measure-sm, .measure-xs { hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 8 4 4; } .cond { hyphens: manual; overflow-wrap: normal; } ul, ol { margin: 0; padding: 0; list-style: none; } h1,h2,h3,h4 { margin: 0; color: var(--dgfe-color-heading); font-weight: 600; } a { color: var(--dgfe-color-link); text-underline-offset: 3px; } strong,b { font-weight: 500; color: var(--ink-strong); } :focus-visible { outline: 2px solid var(--dgfe-color-focus-ring); outline-offset: 2px; border-radius: 2px; } .skip { position: absolute; left: var(--gut); top: 8px; z-index: var(--dgfe-skip-z); transform: translateY(-220%); background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500); font: 600 var(--fs-2)/1 var(--ff-txt); text-decoration: none; padding: 14px 20px; border-radius: 3px; min-height: 44px; display: inline-flex; align-items: center; } .skip:focus { transform: translateY(0); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- 4) Typografie — identisch zur Startseite ---------------------------- */ .dsp { font-family: var(--ff-dsp); font-variation-settings: "wdth" 116, "wght" 700; font-weight: 700; text-transform: uppercase; line-height: .96; letter-spacing: -.018em; text-wrap: balance; color: var(--ink-strong); } /* „ENERGIEWIRTSCHAFT." ist mit 18 Zeichen das laengste Wort der Seite und braucht in Archivo wdth 116 das 13,13-fache seiner Schriftgroesse an Breite. Die Inhaltsspalte misst 802 px bei 1440 und 314 px bei 390. Beide Grenzen der Skala sind daraus gerechnet, nicht geschaetzt: 802 / 13,13 = 61 px → 3,7rem; 314 / 13,13 = 23,9 px → 1,4rem. Deshalb sitzt diese Ueberschrift eine Stufe kleiner als die der Startseite („ENERGIEKOSTEN", 13 Zeichen). Ohne diese Rechnung schneidet die Zeilenmaske (.lm, overflow:hidden) das Wort einfach ab. */ /* NACHGERECHNET, weil die Inhaltsspalte schmaler geworden ist (Abschnitt 5, Spaltenabstand zur Achse). Die alte Skala 4,2vw / 3,7rem war fuer die Spalte OHNE diesen Abstand gerechnet; mit ihm brach „ENERGIEWIRTSCHAFT." zwischen 1025 und 1400 px sowie bei 375 px in DREI getrennte Zeilen um — `hyphens: auto` trennt das Wort dann lieber, als es ueberlaufen zu lassen, und aus der einzeiligen Maske wird ein Block. Genau dieser Fehler steht als Nr. 2 in Abschnitt 5; er kam zurueck, weil sich die Groesse, aus der er gerechnet war, geaendert hat. Neu gerechnet, nicht geschaetzt. Gemessen: das Wort misst das 13,11-fache seiner Schriftgroesse (776 px bei 59,2 px). Die Textspalte des Heros ist zwischen 1025 und 1391 px genau 0,5415 · Fensterbreite (0,936 Blatt − 0,06 Achse − 0,023 Spaltenabstand, davon 0,67 minus 0,03 Hero-Spalt). Daraus: 0,5395 / 13,11 = 0,0412 → 4,0vw mit Reserve Deckel 3,55rem = 56,8 px → 745 px Wort in 777 px Spalte (1440 px) Sockel 1,25rem = 20,0 px → 262 px Wort in 275 px Spalte ( 375 px) Der Sockel ist der Grund, warum die Skala unten von 1,4 auf 1,25rem geht: bei 375 px (iPhone SE) haette 1,4rem nicht mehr gepasst. */ .h1 { font-size: var(--fs-9); letter-spacing: -.028em; } .h2 { font-size: var(--fs-9); letter-spacing: -.022em; } /* `hyphens: auto` ist hier kein Feinschliff, sondern Pflicht: die Zwischenueberschriften dieser Seite sind deutsche Komposita („Energieverantwortliche", „Energieeffizienzmaßnahmen"), und ein Wort mit 22 Zeichen passt bei 390 px in keine Spalte. Ohne Trennung laeuft es stumm aus dem Kasten heraus. `overflow-wrap` ist das Netz darunter, falls der Browser fuer `de` keine Trennmuster hat. */ .h3 { font-family: var(--ff-dsp); font-variation-settings: "wdth" 108, "wght" 650; font-weight: 600; text-transform: uppercase; font-size: var(--fs-4); line-height: 1.16; letter-spacing: .002em; color: var(--ink-strong); text-wrap: balance; hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 9 5 4; } /* Auch die grossen Ueberschriften brauchen Trennung: „UNTERNEHMENSGRÖSSE" misst bei 47,5 px 714 px und steht in einer 619 px breiten Spalte. Ohne `hyphens` bricht `overflow-wrap` das Wort ohne Trennstrich mitten im Wort um („UNTERNEHMENSGRÖ / SSE"). Mit Trennung wird daraus „UNTERNEHMENS-GRÖSSE". `hyphenate-limit-chars` ist das noetige Gegengewicht: ohne die Grenze trennt der Browser auch kurze Woerter, und aus „IHREM" wurde in der Zeile „IN 3 SCHRITTEN ZU IH-REM ENERGIESIEGEL" ein Trennstrich nach zwei Buchstaben. 9 Zeichen Mindestlaenge, 5 davor, 4 danach — die Komposita bleiben trennbar, die kurzen Woerter nicht. */ .dsp { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 9 5 4; } .cond { font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; line-height: 1.3; font-variant-numeric: tabular-nums; } .num { font-family: var(--ff-dsp); font-variation-settings: "wdth" 110, "wght" 700; font-weight: 700; line-height: .88; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .num .u { font-size: var(--fs-4); font-weight: 500; font-variation-settings: "wdth" 88, "wght" 500; letter-spacing: 0; margin-left: .14em; } /* .06em waren bei halber Schriftgroesse 1,4 px — die Staffel las sich „ab59,99". Ein Vorsatzwort braucht einen echten Wortabstand. */ .num .pfx { font-size: var(--fs-4); font-weight: 500; font-variation-settings: "wdth" 88, "wght" 500; margin-right: .46em; letter-spacing: 0; } .eyebrow { display: block; font-size: var(--fs-2); color: var(--ink-accent); } .lead { font-size: var(--fs-4); line-height: 1.58; font-weight: 300; } .measure { max-width: 62ch; } .measure-sm { max-width: 46ch; } .measure-xs { max-width: 34ch; } .cap { font-family: var(--ff-dsp); font-variation-settings: "wdth" 74, "wght" 500; font-size: var(--fs-2); line-height: 1.45; letter-spacing: .04em; color: var(--ink-quiet); margin-top: 10px; /* figcaption ist kein

und faellt deshalb nicht unter die Basisregel. Ohne das stand bei 390 px „Maßnahme" allein in der zweiten Zeile. */ text-wrap: pretty; } .hd { margin-bottom: clamp(14px, 1.5vw, 22px); } /* Ein Rastfeld ist ein eigener Formatierungskontext, der Aussenabstand des letzten Kindes faellt also nicht heraus. Steht die Ueberschrift allein in ihrer Spalte, trug sie damit 22 px totes Feld unter sich her — und genau diese 22 px verschoben die mit `align-self: end` untengesetzte Nebenspalte gegen die Ueberschrift. Abstand gehoert zwischen zwei Dinge, nicht ans Ende. */ .hd:last-child { margin-bottom: 0; } .hd + .lead, .hd + p { margin-top: clamp(16px, 1.8vw, 26px); } .eyebrow + .dsp { margin-top: clamp(14px, 1.4vw, 20px); } /* --- 4b) Der Grundwechsel laeuft ueber die TOKEN, nicht ueber Selektoren --- Vorher stand hier eine handgepflegte Liste: `.on-navy .dsp`, `.on-navy .h3`, `.on-navy strong`, `.on-navy b`, `.on-navy .cap`, `.on-navy .eyebrow`, `.on-navy a`. Jedes Bauteil, das seine Farbe selbst setzt und nicht in dieser Liste steht, faellt auf den hellen Grundwert zurueck und steht damit Navy auf Navy — Kontrast 1,0, der Text ist schlicht nicht da. Genau dieser Fehler ist auf dieser Seite schon einmal aufgetreten (``, Abschnitt 5 Nr. 1 im README) und wurde damals durch EINEN Selektor geflickt. Ein Flicken pro Fundstelle heisst: der naechste Fund kommt. Die eigentliche Ursache ist, dass die Umschaltung auf der falschen Ebene sass. `.on-navy { color: … }` vererbt zwar, aber jede Elementregel schlaegt Vererbung — `h1,h2,h3,h4 { color: var(--dgfe-color-heading) }` (0,0,1) gewinnt gegen JEDE geerbte Farbe, ganz gleich wie spezifisch der Vorfahr war. Eine blosse Ueberschrift ohne .dsp/.h3 waere also unsichtbar gewesen. Deshalb wird jetzt nicht mehr die Farbe der Kinder gesetzt, sondern die BEDEUTUNG der Token umdefiniert: „kraeftige Tinte" heisst auf diesem Grund Weiss. Jede Regel der Seite, die `var(--ink-strong)`, `var(--ink)`, `var(--ink-quiet)`, `var(--ink-accent)`, `var(--dgfe-color-heading)`, `var(--dgfe-color-link)`, `var(--rule)` oder `var(--rule-2)` benutzt — auch jede, die es erst morgen tut —, ist damit automatisch richtig, ohne dass jemand einen Selektor nachtragen muss. Die Flaeche sagt, was Tinte ist; die Bauteile fragen nur noch danach. ------------------------------------------------------------------------ */ .on-navy { --ink: var(--ink-n-muted); --ink-strong: var(--ink-n); --ink-quiet: var(--ink-n-quiet); --ink-accent: var(--dgfe-yellow-500); --dgfe-color-heading: var(--ink-n); --dgfe-color-link: var(--dgfe-yellow-500); --rule: var(--rule-n); --rule-2: var(--rule-n2); color: var(--ink); } /* Bleibt als eigene Regel stehen, weil sie kein Farb-, sondern ein Gewichtsproblem loest: 500 wirkt auf dunklem Grund fetter als auf hellem. */ .on-navy strong, .on-navy b { font-weight: 400; } /* Die Gegenrichtung: helle Inseln IN einem dunklen Abschnitt schalten die Token wieder zurueck. Ohne das erbt die gelbe Flaeche weisse Tinte und waere ihrerseits unlesbar — derselbe Fehler, nur spiegelverkehrt. Die beiden Regeln zusammen sind das ganze System: eine Flaeche erklaert ihre Tinte, und wer eine neue Flaeche baut, erklaert sie mit. */ .on-paper { --ink: var(--dgfe-navy-400); --ink-strong: var(--dgfe-navy-500); --ink-quiet: var(--dgfe-navy-300); --ink-accent: var(--dgfe-yellow-800); --dgfe-color-heading: var(--dgfe-navy-500); --dgfe-color-link: var(--dgfe-blue-500); --rule: color-mix(in srgb, var(--dgfe-navy-500) 16%, transparent); --rule-2: color-mix(in srgb, var(--dgfe-navy-500) 30%, transparent); color: var(--ink); } /* --- 5) Raster: linke Pruefspalte + 12 Spalten --------------------------- Dasselbe Blatt wie auf der Startseite. Die linke Spalte hat dieselbe Breite, dieselbe Haarlinie, denselben Teilstrich — nur einen anderen Inhalt (siehe Abschnitt 5b). ------------------------------------------------------------------------ */ .sec { position: relative; } .sec--paper { background: var(--paper); --wipe-bg: var(--paper); --rul: var(--rule); } .sec--paper2 { background: var(--paper-2); --wipe-bg: var(--paper-2); --rul: var(--rule); } .sec--navy { background: var(--dgfe-navy-500); --wipe-bg: var(--dgfe-navy-500); --rul: var(--rule-n); } /* Der Abstand zwischen Achse und Satzspiegel steht als GRID-SPALTENABSTAND, nicht als Innenrand des Inhalts. Das ist die ehrlichere Stelle: gemeint ist der Zwischenraum zweier Spalten, und die Achsenspalte behaelt dabei ihre Breite `--axis` unveraendert. Vorher stand hier gar nichts, und das war der Fehler: die Haarlinie hatte 14,4 px Luft zu ihren EIGENEN Beschriftungen links (8 px auf dem Telefon), aber 0 px zum Fliesstext rechts — nachgemessen standen 63 Textelemente bei 1440 px und 108 bei 390 px exakt auf der Linie. Eine Linie, an der der Satz klebt, liest sich als Rahmen um den Text. Sie soll aber eine ACHSE sein, an der etwas abgetragen wird, und eine Achse beruehrt ihre Messwerte nicht. Die Werte kommen aus der Abstandsskala, nicht aus dem Gefuehl: `space-md` (1rem) unten, `space-xl` (2rem) oben, dazwischen fluid. Das ist auf beiden Seiten rund das Doppelte des jeweiligen Innenabstands (32 gegen 14,4 am Schreibtisch, 16 gegen 8 auf dem Telefon) — die Linie hat damit erkennbar mehr Luft nach aussen als nach innen und kippt nicht zum Rahmen. */ .sheet { width: min(var(--page), 100% - 2 * var(--gut)); margin-inline: auto; display: grid; grid-template-columns: var(--axis) minmax(0, 1fr); column-gap: clamp(var(--dgfe-space-lg), 2.6vw, var(--dgfe-space-2xl)); } .sheet__body { min-width: 0; padding-block: var(--secY); } .sec--tall .sheet__body { padding-block: var(--secY-lg); } .sec--flat .sheet__body { padding-block: 0; } .axis { position: relative; border-right: 1px solid var(--rul); padding-top: var(--apad, var(--secY)); padding-right: var(--inset-line); display: flex; flex-direction: column; align-items: flex-end; } .sec--tall { --apad: var(--secY-lg); } .sec--flat { --apad: 0px; } .hero { --apad: clamp(44px, 5.6vw, 92px); } .axis__tick { position: absolute; top: calc(var(--apad, var(--secY)) + 17px); right: -6px; width: 13px; height: 1px; background: var(--rule-2); } .sec--navy .axis__tick { background: var(--rule-n2); } .sec--flat .axis__tick { display: none; } /* --- 5b) Das Rueckgrat: das Stempelfeld --------------------------------- Wo die Startseite eine fallende Indexzahl fuehrt, steht hier ein quadratisches Pruefstempelfeld mit der Stufe. Es steigt 1 → 4 und ist gesetzt, nicht gezeichnet: gefuellte Flaeche, gelbe Fusskante. ------------------------------------------------------------------------ */ .axis__stamp { width: 36px; height: 36px; flex: none; display: grid; place-items: center; position: relative; background: var(--dgfe-navy-500); color: #fff; font-family: var(--ff-dsp); font-variation-settings: "wdth" 110, "wght" 700; font-weight: 700; font-size: var(--fs-3); line-height: 1; font-variant-numeric: tabular-nums; } .axis__stamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--dgfe-yellow-500); } .sec--navy .axis__stamp { background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500); } .sec--navy .axis__stamp::after { background: var(--dgfe-navy-500); } .axis__unit { margin-top: 9px; font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-quiet); text-align: right; } .sec--navy .axis__unit { color: var(--ink-n-quiet); } .axis__name { margin-top: 16px; font-size: var(--fs-2); letter-spacing: .18em; color: var(--ink-quiet); writing-mode: vertical-rl; transform: rotate(180deg); } .sec--navy .axis__name { color: var(--ink-n-quiet); } /* Im Abschluss steht die Achse nicht auf flachem Navy, sondern ueber einem Foto unter 86 % Navy — und dieses Foto ist hell (weisse Roboterarme, genau an der Stelle der Achsspalte). Nachgemessen gegen den hellsten Grundpixel unter den beiden Beschriftungen: `--ink-n-quiet` erreicht dort 4,16:1 und 4,03:1 und faellt damit unter die 4,5:1 fuer Kleintext. Das ist KEIN Nebeneffekt der Einfaerbung — im Duotone ist derselbe Pixel genauso hell, der Verstoss stand schon vorher da und faellt nur jetzt auf, weil dieses Bild neu nachgemessen wurde. `--ink-n-muted` bringt an derselben Stelle 6,46:1. Es ist derselbe Ton, den die Fusszeile dieses Abschnitts (`.endmark span`) ohnehin traegt — der Abschluss wird dadurch in sich einheitlicher, nicht bunter. */ .closer .axis__unit, .closer .axis__name { color: var(--ink-n-muted); } .g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colgap); row-gap: clamp(30px, 3.6vw, 60px); } .c1-4{grid-column:1/5} .c1-5{grid-column:1/6} .c1-6{grid-column:1/7} .c1-7{grid-column:1/8} .c1-8{grid-column:1/9} .c1-9{grid-column:1/10} .c1-12{grid-column:1/-1} .c2-7{grid-column:2/8} .c3-8{grid-column:3/9} .c3-9{grid-column:3/10} .c5-12{grid-column:5/-1} .c6-12{grid-column:6/-1} .c7-12{grid-column:7/-1} .c8-12{grid-column:8/-1} .c9-12{grid-column:9/-1} .bleed { margin-right: calc(-1 * var(--bleed)); } /* --- 6) Bildgradation — derselbe Grade wie auf der Startseite ------------ Er liegt hier auch auf den vier Siegelmarken. Die Marken kommen von Haus aus in Gruen, Silber und Gold; ungegradet waeren sie drei Fremdfarben in einer Palette, die nur Navy, Blau und Gelb kennt. Durch denselben Grade werden Foto und Siegel EINE Serie — und die Stufe steht dort, wo sie hingehoert: in der Beschriftung. ------------------------------------------------------------------------ */ .ph { position: relative; isolation: isolate; overflow: hidden; background: var(--dgfe-navy-500); } .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.17) brightness(1.06); mix-blend-mode: luminosity; } .ph--3x4 { aspect-ratio: 3/4; } .ph--4x5 { aspect-ratio: 4/5; } .ph--4x3 { aspect-ratio: 4/3; } .ph--16x9 { aspect-ratio: 16/9; } .ph--3x2 { aspect-ratio: 3/2; } .ph__shut { position: absolute; inset: 0; z-index: 3; background: var(--wipe-bg); transform: translateY(-101%); pointer-events: none; } figure > .cap { padding-right: var(--bleed); } /* --- 6b) Farbe im Scroll-Fluss ------------------------------------------- VORHER: die Farbe kam beim Ueberfahren mit der Maus. Das ist ersetzt, und zwar aus zwei Gruenden. Der eine ist eine Beobachtung von Stef („die Farben stimmen nicht, wenn man hoovert"), der andere ist strukturell: ein Hover-Effekt existiert auf dem Telefon gar nicht, und genau dort wird diese Seite gelesen. Ein Bild, das nur mit Maus Farbe bekommt, hat fuer die Haelfte der Leser keine. JETZT: das Bild ist grau, wenn es unten hereinkommt, und faerbt sich, waehrend es zur Bildmitte wandert. Der Fortschritt haengt an der SCROLL-POSITION, nicht an einer Dauer: p = (Fensterhoehe − Bildmitte) / (Fensterhoehe / 2) also 0, solange die Bildmitte auf der Fensterunterkante steht, und 1, sobald sie die Fenstermitte erreicht. Weil p aus einer Position gerechnet wird und nicht aus einer Uhr, folgt die Faerbung dem Scroll-TEMPO von selbst: schnell gewischt heisst schnell gefaerbt, langsam heisst langsam, angehalten heisst angehalten. Es wird nirgends eine Geschwindigkeit gemessen. Deshalb steht auf `.ph--live img.ph__color` auch KEINE `transition` — eine Uebergangsdauer wuerde der Scroll-Position genau die Traegheit hinzufuegen, die hier nicht hingehoert. NACH OBEN HINAUS ENTSAETTIGT ES WIEDER. Die Kurve ist symmetrisch, mit einem Plateau in der Mitte: d = |Bildmitte − Fenstermitte| / (Fensterhoehe / 2) p = (1 − d) / (1 − 0,4), auf 0…1 begrenzt Volle Farbe also, solange die Bildmitte im mittleren 40 % der Fensterhoehe steht — bei 900 px Fenster ein Plateau von 360 px Scrollweg, davor und danach je 270 px Verlauf. Nachgemessen ueber einen vollen Durchlauf von der Fensterunterkante bis zur Oberkante. ES WAR ZUERST ANDERS GEBAUT — die Farbe rastete und blieb stehen. Das ist verworfen, nachdem ich beide Fassungen als Vollbild nebeneinandergelegt und ANGESEHEN habe. Mit Rastung steht die durchgelesene Seite am Ende mit vier Motiven in voller Eigenfarbe da: vier warme Aufnahmen (Mittelwert R 180 / G 138 / B 114) in einer kuehlen Navy-Grau-Seite. Genau das ist der groesste Einzelverraeter aus dem Playbook (1.1, „ungegradete Stockfotos"): das Bild liest sich als hineingelegt, nicht als bestellt. Der einheitliche Grade ueber allen Bildern ist der teuerste Posten dieses Auftritts, und eine Farbmechanik, die ihn am Ende dauerhaft ausschaltet, verkauft ihn fuer einen Effekt. Mit der symmetrischen Kurve gilt statt dessen: Farbe ist an den BLICK gebunden, nicht an die Vergangenheit. Was man ansieht, ist farbig; was man gelesen hat, gehoert wieder zur Serie. Jede Standbild-Aufnahme, jeder Ausdruck und jede PDF-Fassung der Seite zeigt damit weiterhin die Serie. Flackern entsteht dabei nicht: p ist eine stetige Funktion der POSITION. Scrollt man zurueck, laeuft derselbe Wert denselben Weg rueckwaerts — es gibt keinen Zustand, der umspringen koennte. TECHNIK. Nicht durch Zuruecknehmen des Grades: der Duotone entsteht aus `filter` UND `mix-blend-mode: luminosity`, und `mix-blend-mode` ist eine diskrete Eigenschaft — sie kann nicht weich uebergehen, der Wechsel waere ein Schnitt. Stattdessen liegt eine zweite, ungegradete Kopie desselben Bildes darueber (gleiche URL, also derselbe Cache-Eintrag und kein zweiter Request). Bewegt wird ausschliesslich `opacity`, ueber die Eigenschaft `--tint`. Sichtbarkeit haengt NICHT allein an `opacity`: solange nichts eingefaerbt ist, steht die Kopie auf `visibility: hidden` und ist damit auch fuer Suche und Sprachausgabe aus dem Weg. Erst wenn wirklich gefaerbt wird, setzt JavaScript `.is-tinting`. Nur `.ph--live` bekommt das. Seit 2026-08-05 sind das ALLE fuenf inhaltlichen Fotos der Seite, nicht mehr vier: die vier grossen Motive UND das Abschlussbild. Ausgenommen bleiben zwei Gruppen, und beide aus einem Grund, der nichts mit dem Effekt zu tun hat: - Die sechs PARTNERLOGOS. Das sind Marken Dritter. Graustufe ist dort Gleichbehandlung; ein farbiges Logo unter fuenf grauen liest sich als Bevorzugung, und das ist eine Aussage, die wir nicht machen wollen. - Die vier SIEGEL der Stufenkartei. Das sind Zeichnungen, keine Fotos. Sie tragen ohnehin ihre eigene Farbe (siehe 13b), und ein Duotone ueber einer Marke waere schlicht falsch. Das ABSCHLUSSBILD ist jetzt dabei. Es liegt unter 86 % Navy und traegt den gesamten Schlusstext — der Kontrast ist deshalb nicht geglaubt, sondern im VOLLFARBIGEN Zustand je Textkasten gegen den hellsten Grundpixel unter diesem Kasten nachgemessen. Zahlen im README 12. ------------------------------------------------------------------------ */ .ph img.ph__color { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; filter: none; mix-blend-mode: normal; opacity: 0; visibility: hidden; pointer-events: none; } .ph--live img.ph__color { opacity: var(--tint, 0); } .ph--live.is-tinting img.ph__color { visibility: visible; } /* WAS BEIM NACHMESSEN HERAUSKAM, UND WARUM DIE VIER LIVE-KAESTEN ANDERS GEBAUT SIND ALS DIE UEBRIGEN. Der Verdacht war, im Farbzustand bleibe ein Rest Grade stehen. Das ist NICHT so: der Endzustand ist gegen dasselbe Bild ohne jede Behandlung Pixel fuer Pixel verglichen worden — 390.182 Pixel, groesste Kanalabweichung 0. Am Ende steht wirklich das Original. Falsch war die MITTE, und zwar messbar falsch. Der Duotone entsteht, indem ein Graustufenbild per `mix-blend-mode: luminosity` gegen Navy liegt: das Ergebnis traegt den Farbton von Navy, ist also kraeftig BLAU gestochen. Die vier Motive sind warm (Mittelwert R 180 / G 138 / B 114). Blendet man Warm ueber Blau ein, loeschen sich die beiden Buntheiten auf halbem Weg gegenseitig aus. Nachgemessen an der mittleren Buntheit, jeweils in Prozent des Originals: Deckkraft 0 % → 56 % (der Duotone, blau, gewollt) Deckkraft 25 % → 31 % ← der Durchhaenger, flaches Grau Deckkraft 50 % → 38 % Deckkraft 75 % → 65 % Deckkraft 100 % → 100 % Das Bild wird auf dem Weg zur Farbe also erst einmal FARBLOSER als es grau war. Bei der alten Hover-Loesung sah man diesen Durchhaenger bei jedem Mausdurchgang kurz aufblitzen — das ist die Beobachtung „die Farben stimmen nicht". An die Scroll-Position gebunden waere es schlimmer geworden: der Durchhaenger saesse dann genau dort, wo das Bild ins Bild kommt, und man saehe ihn ueber eine lange Scroll-Strecke. DIE URSACHE IST DIE SCHICHTFOLGE, NICHT DIE UEBERBLENDUNG. Weil der Navy-Ton als BACKDROP unter dem Graubild liegt, bleibt er waehrend der ganzen Ueberblendung in voller Staerke stehen. Er muss stattdessen zurueckgehen, waehrend die Farbe kommt. Also liegt das Navy bei den vier Live-Kaesten nicht mehr darunter, sondern als eigene Lage DARUEBER, und sie wird von derselben Groesse `--tint` gefuehrt: `mix-blend-mode: color` (Ton und Buntheit von der Quelle, Helligkeit vom Untergrund) ist die Umkehrung von `mix-blend-mode: luminosity` (Helligkeit von der Quelle, Ton und Buntheit vom Untergrund). Navy ueber Grau per `color` ergibt Pixel fuer Pixel dasselbe wie Grau ueber Navy per `luminosity` — der RUHEZUSTAND aendert sich also nicht, nachgemessen mit 0 Kanalabweichung. Aenderbar ist jetzt nur seine Staerke. UND DIE UEBERBLENDUNG LAEUFT IN ZWEI HAELFTEN, NICHT IN EINER. Beides gleichzeitig zu bewegen half nicht, im Gegenteil: nachgemessen fiel die Buntheit bei 25 % Deckkraft auf 24 % statt auf 31 %. Der Grund ist arithmetisch und nicht zu umgehen — ein blau gestochenes Bild kann nicht in ein warmes uebergehen, ohne unterwegs durch Unbunt zu laufen. Die Buntheit MUSS durch Null. Zu entscheiden ist nur, ob sie das sauber tut oder als Matsch aus zwei einander aufhebenden Stichen. Deshalb teilt sich der Weg an der Haelfte: --tint 0 … 0,5 das Navy geht ab (Duotone → neutrales Grau) --tint 0,5 … 1 die Farbe kommt auf (neutrales Grau → Original) Bei 0,5 steht damit ein SAUBERES Graustufenbild — ein gueltiger Zustand, nicht ein Zwischending. Jeder Zwischenzustand ist jetzt entweder „Duotone in halber Staerke" oder „Grau mit halber Farbe"; keiner ist eine Mischung aus zwei gegenlaeufigen Farbstichen. Gelesen wird es als das, was es ist: dem Bild wird erst die Hausfarbe abgenommen, dann bekommt es seine eigene. */ .ph--live img:not(.ph__color) { mix-blend-mode: normal; } .ph--live .ph__duo { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--dgfe-navy-500); mix-blend-mode: color; opacity: clamp(0, calc(1 - 2 * var(--tint, 0)), 1); } .ph--live img.ph__color { opacity: clamp(0, calc(2 * var(--tint, 0) - 1), 1); } /* --- 7) Knoepfe — 1:1 ---------------------------------------------------- */ .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 14px 26px; font-family: var(--ff-dsp); font-variation-settings: "wdth" 90, "wght" 650; font-weight: 600; font-size: var(--fs-2); letter-spacing: .11em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; transition: border-color var(--t-ui) var(--e-shut); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sweep, var(--dgfe-navy-500)); transform: scaleX(0); transform-origin: left center; transition: transform 360ms var(--e-draw); } @media (hover: hover) and (pointer: fine) { .btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); } } .btn__a { transition: transform 280ms var(--e-draw); } @media (hover: hover) and (pointer: fine) { .btn:hover .btn__a, .btn:focus-visible .btn__a { transform: translateX(6px); } } .btn--primary { background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500); border-color: var(--dgfe-yellow-500); --sweep: #fff; } .btn--blue { background: var(--dgfe-blue-500); color: #fff; --sweep: var(--dgfe-navy-500); } .btn--ghost { background: transparent; color: var(--dgfe-navy-500); border-color: var(--rule-2); --sweep: var(--dgfe-yellow-500); } @media (hover: hover) and (pointer: fine) { .btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--dgfe-yellow-500); } } .btn--onnavy { background: transparent; color: #fff; border-color: var(--rule-n2); --sweep: var(--dgfe-blue-500); } @media (hover: hover) and (pointer: fine) { .btn--onnavy:hover, .btn--onnavy:focus-visible { border-color: var(--dgfe-blue-500); } } .btn--sm { /* Schmaler als vorher (war 11px 18px). Der Knopf sitzt in der Kopfzeile neben vier Navigationspunkten und hat dort zu viel Gewicht gezogen. Die 44px Mindesthoehe bleiben: das ist die Untergrenze fuer ein Tippziel (WCAG 2.5.8), daran wird nicht gespart. Nur die Polsterung links und rechts gibt nach. */ min-height: 44px; padding: 9px 14px; font-size: var(--fs-2); } /* --- 8) Header — zeichengleich, nur die Anzeige misst etwas anderes ------ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--dgfe-cta-z); height: var(--header-h); background: var(--dgfe-neutral-50); border-bottom: 1px solid var(--rule); transition: height var(--t-ui) var(--e-shut), box-shadow var(--t-ui) var(--e-shut); } .site-header.is-condensed { height: var(--header-h-sm); box-shadow: 0 1px 0 var(--rule-2); } .site-header__in { height: 100%; width: min(var(--page), 100% - 2 * var(--gut)); margin-inline: auto; display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); } .brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; } .brand svg { height: 28px; width: auto; display: block; transition: height var(--t-ui) var(--e-shut); } .site-header.is-condensed .brand svg { height: 23px; } /* Anzeige im Header: auf der Startseite faellt der Verbrauchsindex mit dem Scrollen. Hier steigt die Pruefstufe. Anzeigewert, keine Animation — laeuft deshalb auch bei prefers-reduced-motion. */ .readout { margin-left: clamp(14px, 2.4vw, 40px); display: flex; align-items: baseline; gap: 8px; padding-left: clamp(14px, 2.4vw, 40px); border-left: 1px solid var(--rule); margin-right: auto; } .readout__k { font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-quiet); } .readout__v { font-size: var(--fs-3); color: var(--ink-strong); font-family: var(--ff-dsp); font-variation-settings: "wdth" 104, "wght" 700; font-variant-numeric: tabular-nums; } .nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 34px); } .nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-2); font-weight: 400; text-decoration: none; color: var(--ink-strong); border-bottom: 2px solid transparent; transition: color var(--t-ui) var(--e-shut), border-color var(--t-ui) var(--e-shut); } /* Swiss Direkt ist eine Partnerseite, keine vierte Leistungsseite. Sie steht deshalb hinter einer Haarlinie, eine Stufe kleiner und in `--ink` statt `--ink-strong` — erreichbar, aber nicht gleichrangig. Die Kennzeichnung „Partner" sitzt als Eyebrow darueber, damit die Absetzung nicht allein an Groesse und Ton haengt. `.nav a.nav__part` und nicht `.nav__part`: `.nav a` traegt `align-items` und `font-size` schon mit zwei Stellen Spezifitaet — eine einzelne Klasse kaeme dagegen nicht an, und der Kasten bliebe einzeilig. */ .nav a.nav__part { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; position: relative; font-size: var(--fs-2); color: var(--ink); margin-left: clamp(2px, .5vw, 10px); padding-left: clamp(13px, 1.4vw, 24px); } .nav a.nav__part::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 1px; height: 24px; background: var(--rule-2); } .nav__partk { font-size: var(--fs-2); line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-quiet); } @media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--dgfe-color-link); } } /* Aktive Seite. Gelb allein traegt die Aussage nicht: #FFDE59 erreicht gegen den Kopfzeilen-Grund #F7F7F8 nachgemessen 1,24:1, und WCAG 2.2 (1.4.11) verlangt 3:1 fuer ein Merkmal, das einen Zustand anzeigt. Der Navy-Saum unter der gelben Kante bringt 13,98:1; das schwerere Gewicht ist der zweite, farbunabhaengige Hinweis. Steht nach `.nav a.nav__part`, damit die Partnerseite, wenn sie die aktive ist, ihren Ton wieder abgibt. */ .nav a[aria-current="page"] { color: var(--ink-strong); font-weight: 600; border-bottom-width: 2px; border-bottom-color: var(--dgfe-yellow-500); box-shadow: 0 1px 0 var(--dgfe-navy-500); } .nav .btn { border-bottom-width: 1px; } .nav-toggle { display: none; } /* --- 9) Hero ------------------------------------------------------------- Gleicher Bau wie auf der Startseite (Titel links, Foto rechts ueber die Blattkante), aber der Unterbau ist ein anderer: dort liegt die erste Kurve, hier liegt der Siegelkopf — die vier Stufen des Gegenstands, den die Seite verhandelt. ------------------------------------------------------------------------ */ .hero { margin-top: var(--header-h); } .hero .sheet__body { padding-block: 0; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 33%); column-gap: clamp(20px, 3vw, 56px); } .hero__txt { padding-block: clamp(44px, 5.6vw, 92px) clamp(30px, 3.4vw, 52px); align-self: center; } /* Kein `max-width` in ch: die Zeilenmaske (.lm, overflow:hidden) ist genau so breit wie dieser Kasten und schneidet ein laengeres Wort ab. Der Umbruch steht ohnehin fest, er ist von Hand in zwei .lm-Zeilen gesetzt. */ .hero .h1 { color: #fff; max-width: 100%; } .hero__lead { margin-top: clamp(18px, 2vw, 30px); color: var(--ink-n-muted); max-width: 44ch; } .hero__act { margin-top: clamp(26px, 3vw, 42px); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero__meta { margin-top: clamp(24px, 2.6vw, 38px); padding-top: var(--inset-line); border-top: 1px solid var(--rule-n); font-size: var(--fs-2); letter-spacing: .05em; color: var(--ink-n-quiet); } .hero__media { position: relative; overflow: hidden; margin-right: calc(-1 * var(--bleed)); } .hero__media .ph { position: absolute; inset: 0; } /* Die Pruefstrecke: das Messsystem dieser Seite, einmal ganz gezeigt. Auf der Startseite liegt an dieser Stelle der erste Kurvenabschnitt — er kuendigt an, womit die Seite misst. Hier stehen statt dessen die vier Pruefstufen, die die linke Spalte anschliessend Abschnitt fuer Abschnitt abzaehlt. Gleiche Aufgabe, anderes Instrument. */ .pstr { margin-right: calc(-1 * var(--bleed)); padding: clamp(22px, 2.6vw, 34px) var(--bleed) clamp(30px, 3.6vw, 50px) 0; border-top: 1px solid var(--rule-n); } .pstr__hd { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-yellow-500); } .pstr__hd em { font-style: normal; color: var(--ink-n-quiet); } .pstr__row { margin-top: clamp(18px, 2vw, 28px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 30px); } .pstr__i { padding-top: var(--inset-line); border-top: 1px solid var(--rule-n2); display: grid; gap: clamp(11px, 1.2vw, 15px); justify-items: start; } .pstr__w { font-size: var(--fs-2); letter-spacing: .16em; color: #fff; } .pstr__d { font-size: var(--fs-2); line-height: 1.45; color: var(--ink-n-quiet); } /* --- 10) Randschrift — das ambiente Band -------------------------------- Auf der Startseite laufen zwischen den Abschnitten Messbaender: die Kurve, jedes Mal messbar tiefer. Diese Seite hat keine Kurve. Ihr Gegenstueck ist die Randschrift des Siegels, abgerollt zur Geraden: derselbe Text, der auf der Marke rundherum steht, zwischen zwei Haarlinien, mit der Teilung einer Skala. Eingezogen mit derselben Schreiber-Blende wie die Kurve. ------------------------------------------------------------------------ */ .rand__plot { position: relative; overflow: hidden; border-block: 1px solid var(--rul); padding-block: var(--inset-line); display: grid; gap: 9px; } .rand__t { white-space: nowrap; font-size: var(--fs-2); letter-spacing: .32em; color: var(--ink-quiet); } .rand__ticks { display: block; width: 100%; height: 7px; } .rand__ticks line { stroke: var(--rule-2); } .rand__edge { position: absolute; left: 0; top: -1px; width: clamp(48px, 7vw, 108px); height: 2px; background: var(--dgfe-yellow-500); } .wipe { position: absolute; inset: 0; z-index: 4; background: var(--wipe-bg); transform-origin: right center; transform: scaleX(0); pointer-events: none; } /* --- 11) Registerbilanz — die vier Zahlen ------------------------------- Nicht die Haarlinien-Tafel der Startseite: dort haengen die Zahlen an einer Oberkante und sind gleich gross. Hier sind es Stempelabdruecke, einer gross und drei klein. Gross ist die Zahl, die dieses Register tatsaechlich zaehlt: umgesetzte Massnahmen. Die drei anderen sind ihre Folgen. ------------------------------------------------------------------------ */ /* Die grosse Zahl stand vorher als hohe Spalte neben den drei kleinen und wurde von ihnen auf deren Gesamthoehe gezogen: 530 px Kasten fuer 216 px Inhalt, also 261 px Loch mitten in einem umrandeten Feld. Ein Loch neben einem Feld liest sich als Absicht, ein Loch IM Feld als Versehen. Die Ordnung „eine gross, drei klein" bleibt — sie steht jetzt ueber statt neben ihnen, und die grosse Zahl bekommt ihre Beschriftung auf dieselbe Grundlinie gesetzt. */ .bil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; } .bil__i { position: relative; border: 1px solid var(--rule); padding: clamp(16px, 1.9vw, 26px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(14px, 1.8vw, 26px); background: var(--paper); } .bil__i::before { content: ""; position: absolute; left: -1px; top: -1px; width: clamp(30px, 3.4vw, 52px); height: 3px; background: var(--dgfe-yellow-500); } .bil__big { grid-column: 1 / -1; } .bil__big p { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(11px, 2.2vw, 36px); } .bil__k { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); } .bil__v { font-size: var(--fs-8); color: var(--ink-strong); } .bil__big .bil__v { font-size: var(--fs-9); } .bil__n { display: block; margin-top: 11px; font-size: var(--fs-2); line-height: 1.45; color: var(--ink); } .bil__big .bil__n { font-size: var(--fs-3); max-width: 44ch; margin-top: 0; } /* Partnerband */ .plog { margin-top: clamp(34px, 4vw, 56px); border-top: 1px solid var(--rule); padding-top: var(--inset-row); } .plog__k { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); } /* `gap` allein liess die Reihe bei 1440 nach 60 % der Breite aufhoeren und rechts ein Loch stehen. `space-between` setzt das erste Logo buendig auf die Textkante und das letzte auf die Blattkante — beide Raender fluchten damit mit allem darueber und darunter. */ .plog__row { margin-top: clamp(16px, 1.8vw, 24px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(20px, 2.4vw, 34px); } .plog__row img { max-height: 30px; width: auto; filter: grayscale(1) contrast(.85) brightness(.72); opacity: .8; } /* --- 12) Laufkarte — die drei Schritte ---------------------------------- Nummeriert, weil es eine echte Reihenfolge ist. Waagerechte Stationen mit Stempelfeldern statt der senkrechten Nummernzeilen der Startseite. ------------------------------------------------------------------------ */ .lauf { border-top: 1px solid var(--rule-2); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .lauf__s { position: relative; padding: clamp(24px, 2.8vw, 36px) clamp(14px, 1.8vw, 30px) clamp(6px, 1vw, 12px) 0; } .lauf__s + .lauf__s { border-left: 1px solid var(--rule); padding-left: clamp(16px, 2vw, 34px); } .sq { width: 34px; height: 34px; flex: none; display: grid; place-items: center; position: relative; background: var(--dgfe-navy-500); color: #fff; font-family: var(--ff-dsp); font-variation-settings: "wdth" 110, "wght" 700; font-weight: 700; font-size: var(--fs-2); line-height: 1; font-variant-numeric: tabular-nums; } .sq::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--dgfe-yellow-500); } .on-navy .sq { background: transparent; color: var(--dgfe-yellow-500); box-shadow: inset 0 0 0 1px var(--rule-n2); } .on-navy .sq::after { background: var(--dgfe-yellow-500); } .lauf__t { margin-top: clamp(16px, 1.8vw, 22px); } .lauf__d { margin-top: 11px; font-size: var(--fs-3); } /* --- 13) DER PRUEFBOGEN — die Signature --------------------------------- Die eine laute Stelle. Links das Blatt: sechs Positionen, jede mit ihrem Stempelfeld, die der Reihe nach gesetzt werden. Rechts das Ausstellungs- feld — die EINE gelbe Flaeche der Seite. In ihr sitzt die Marke selbst, in einem Navy-Feld und damit im selben Duotone wie jedes Foto. ------------------------------------------------------------------------ */ .bogen { border: 1px solid var(--rule-n); background: var(--dgfe-navy-600); } .bogen__hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding: var(--inset-line) var(--inset-row); border-bottom: 1px solid var(--rule-n); font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-yellow-500); } .bogen__hd b { color: var(--dgfe-yellow-500); font-weight: inherit; } .bogen__hd em { font-style: normal; color: var(--ink-n-quiet); } .bogen__body { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); } .bogen__list { border-right: 1px solid var(--rule-n); } /* Das Stempelfeld traegt die Positionsnummer selbst. Eine zweite Spalte „Pos. 01" daneben haette dieselbe Zahl ein zweites Mal gesagt. */ .bogen__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px clamp(14px, 1.8vw, 24px); align-items: start; padding: var(--inset-row); border-top: 1px solid var(--rule-n); } .bogen__row:first-child { border-top: 0; } .bogen__row .sq { width: 40px; font-size: var(--fs-2); } .bogen__row .h3 { padding-top: .5em; } /* Ohne Deckel lief die Zeile im einspaltigen Bogen (768-1024 px) auf 78 Zeichen — ueber der Grenze, ab der das Auge die naechste Zeile sucht. */ .bogen__row p { margin-top: 9px; font-size: var(--fs-3); line-height: 1.5; max-width: 72ch; } .bogen__out { padding: var(--inset-row); } /* Das Ausstellungsfeld blieb beim Scrollen stehen. Mit dem Rondell ist es von 503 auf 862 px gewachsen und passt bei einem 900-px-Fenster nicht mehr in den Raum unter dem Kopf (810 px). Ein `sticky`-Block, der hoeher ist als sein Fenster, klebt oben fest und schiebt sein unteres Ende dauerhaft aus dem Bild — die Widerrufs-Notiz waere beim Lesen der sechs Positionen nie zu sehen gewesen. Es klebt deshalb nur noch dort, wo es auch hineinpasst; darunter steht es einfach oben in seiner Spalte, was bei einer 862 px hohen Box neben einer 919 px hohen Liste ohnehin fast dasselbe Bild ergibt. */ /* `min-width: 0` ist hier kein Zierrat. Ein Rastfeld steht voreingestellt auf `min-width: auto` und kann damit von seinem Inhalt breiter gedrueckt werden als seine Spalte — das ist der Weg, auf dem ein Bauteil neben den Bildschirm geraet, ohne dass `documentElement.scrollWidth` es meldet (Playbook 4.2). Die Stufenkartei haengt in dieser Spalte, und ihr Navy-Band zieht mit negativem Aussenrand ueber die Kante der gelben Flaeche hinaus. Beides zusammen soll strukturell nicht ueberlaufen koennen, nicht nur zufaellig nicht ueberlaufen. */ .bogen__stick { display: grid; gap: clamp(14px, 1.7vw, 20px); align-self: start; min-width: 0; } .bogen__stick > * { min-width: 0; } /* `max-width` steht bewusst NICHT auf `.rond__band`: das Band zieht mit `margin-inline: calc(-1 * var(--ipad))` absichtlich ueber den Innenrand der gelben Flaeche hinaus. Ein Deckel von 100 % wuerde diese Rechnung ueberschreiben — der Kasten waere dann `--ipad` schmaler und saesse links statt buendig. Ueberlaufsicher ist das Band ueber seinen Elternteil. */ .issue, .rond { min-width: 0; max-width: 100%; } .rond__band, .rond__stack { min-width: 0; } /* Nachgezogen: mit der Stufenkartei und der Dichte-Korrektur ist der Block auf max. 1.145 px gewachsen (nachgemessen ueber 768-1920 px Breite). Er passt damit erst ab 1.145 + 68 (Kopf) + 22 (Abstand) = 1.235 px Fensterhoehe unter den festen Kopf. Die Schwelle ist genau diese Rechnung plus 15 px Reserve — geraten ist sie nicht. Klebt er frueher, schiebt er sein unteres Ende dauerhaft aus dem Bild und die Widerrufs-Notiz waere nie zu sehen (dieselbe Begruendung wie in 8.6). */ @media (min-height: 1250px) { .bogen__stick { position: sticky; top: calc(var(--header-h) + 22px); } } .bogen__note { font-size: var(--fs-2); line-height: 1.5; color: var(--ink-n-quiet); } /* Die eine gelbe Flaeche. Sie ist eine helle Insel im dunklen Abschnitt und traegt deshalb `.on-paper` (siehe 4b) — ohne das erbte sie weisse Tinte. Eine Abweichung gegenueber dem Papier-Satz: auf Gelb kommt `--ink-quiet` als navy-300 nur auf 4,14:1 und faellt durch. Auf dieser einen Flaeche ist die leise Tinte deshalb angemischtes Navy (6,25:1) — derselbe Wert, den die Monatsachse darunter ohnehin schon benutzt. */ .issue { background: var(--dgfe-yellow-500); --ink-quiet: color-mix(in srgb, var(--dgfe-navy-500) 78%, transparent); /* Als eigener Wert, weil das Navy-Band der Stufenkartei ihn wieder herauszieht (`margin-inline: calc(-1 * var(--ipad))`) und dafuer denselben Zahlenwert braucht — geraten waere er falsch. */ --ipad: var(--inset-box); padding: var(--ipad); } /* Kopfleiste der gelben Flaeche. Sie war eine einzelne kleine Marke links in einem sonst leeren gelben Streifen — das las sich als Rest, nicht als Kopf. Jetzt traegt sie wie die Kopfleiste des Pruefbogens darueber (`.bogen__hd`) zwei Angaben, links und rechts, und spannt damit ueber ihre ganze Breite. */ .issue__k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-navy-500); } .issue__k em { font-style: normal; color: var(--ink-quiet); } /* Kurz und in Versalien, weil es die Schlusszeile der Seite ist. Ein ganzer Satz in Versalien waere hier ein Schrei gewesen; der Satz steht darunter im Fliesstext. */ .issue__t { margin-top: clamp(14px, 1.7vw, 20px); font-family: var(--ff-dsp); font-variation-settings: "wdth" 110, "wght" 700; font-weight: 700; text-transform: uppercase; line-height: 1.02; letter-spacing: -.014em; font-size: var(--fs-6); color: var(--dgfe-navy-500); } .issue__d { margin-top: 12px; font-size: var(--fs-2); line-height: 1.55; color: var(--dgfe-navy-500); } .issue__d strong { color: var(--dgfe-navy-500); font-weight: 500; } .issue__life { margin-top: clamp(16px, 1.9vw, 24px); padding-top: var(--inset-line); border-top: 1px solid color-mix(in srgb, var(--dgfe-navy-500) 30%, transparent); } .issue__lk { font-size: var(--fs-2); letter-spacing: .16em; color: var(--dgfe-navy-500); } .mo { margin-top: 11px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; } .mo b { display: block; height: 13px; background: var(--dgfe-navy-500); } .mo__x { margin-top: 8px; display: flex; justify-content: space-between; font-size: var(--fs-2); letter-spacing: .13em; color: color-mix(in srgb, var(--dgfe-navy-500) 72%, transparent); } /* --- 13b) DIE STUFENKARTEI — vier Boegen in einer Lade ------------------ VORGAENGER UND WARUM ER WEG IST. Hier lag ein Rondell: die vordere Marke im Zentrum, die drei anderen klein auf einer Kreisbahn darum herum, in einem dunklen Kasten mitten in der gelben Flaeche. Angesehen (Aufnahmen in vier Zustaenden) traegt es nicht, und zwar aus drei Gruenden: 1. Drei kleine Scheiben auf einer Kreisbahn, zwei davon am Rand angeschnitten, lesen sich als STREUUNG, nicht als Staffel. Ein Kreis hat keine Richtung — er sagt „diese vier gehoeren zusammen", aber nicht „diese vier bauen aufeinander auf". Genau das Zweite ist die Aussage. 2. Ein dunkler Kasten in der gelben Box ist ein Kasten im Kasten. Die gelbe Flaeche ist die EINE laute Stelle der Seite; ein zweiter Rahmen darin halbiert sie. 3. Die Form setzte darauf, dass man die vier Marken unterscheiden kann. Kann man nicht: Starter und Standard tragen dasselbe Gruen `#497f2d` und dieselbe Zeichnung (nachgemessen an den Quelldateien, 12,4 % Pixelunterschied gegen 44-45 % bei den uebrigen Paaren). Eine Form, die von sichtbarer Verschiedenheit lebt, kann mit diesem Material nicht funktionieren. WAS JETZT DASTEHT. Vier Karten, flach hintereinander in einer Lade, wie Boegen in einem Register: jede traegt oben ihren Kopf (Stempelfeld mit der Ziffer, Name), die gewaehlte ist HERAUSGEZOGEN und zeigt ihre Marke in voller Groesse. Die Karten darueber und darunter liegen als Koepfe auf Kante. Man sieht damit auf einen Blick, an welcher Stelle der Staffel man steht — zwei Koepfe oben, einer unten heisst Stufe 3 —, ohne dass eine einzige Farbe etwas erklaeren muesste. Die Stufe spricht ueber ANORDNUNG und BESCHRIFTUNG, nicht ueber den Farbton der Marke. Das ist nicht neu erfunden, sondern die Handschrift dieser Seite: der Pruefbogen daneben ist genau das, ein Register aus nummerierten Positionen mit Stempelfeldern. Die Kartei benutzt dasselbe Alphabet (`.sq`: gefuellt heisst gesetzt, hohl heisst noch nicht) und dieselbe Haarlinie als Trennung. Beim Wechsel schiebt sich die gewaehlte Karte an ihren Platz und DECKT die vorige zu — die abgelegte Marke geht wirklich weg, sie kreist nicht weiter am Rand. Bewegt wird ausschliesslich `transform: translateY`. ZWEI ABWEICHUNGEN, beide wie bisher und weiter begruendet: 1. Die Siegel laufen NICHT durch den Duotone-Grade. Der Grade macht alle vier zu demselben Grau; die Marke saehe dann bei jeder Stufe gleich aus. Der Grade bleibt ausnahmslos auf allen FOTOS — ein Siegel ist kein Foto. 2. Die Lade liegt auf NAVY. Auf gelbem Grund verlieren Silber (`#b4b4b4`) und Gold (`#cea724`) fast jeden Kontrast. Neu ist, dass sie als BAND ueber die volle Breite der gelben Flaeche laeuft und deren Rand beruehrt: ein Streifen, kein Kasten. Damit ist der „Kasten im Kasten" weg, ohne dass die Marken ihren Grund verlieren. ------------------------------------------------------------------------ */ .rond { margin-top: clamp(14px, 1.7vw, 20px); } /* Das Band laeuft bis an die Kante der gelben Flaeche — es zieht den Innenrand der Box wieder heraus. `container-type` macht seine eigene Breite messbar: Kartenhoehe, Kopfhoehe und Markendurchmesser sind Prozentwerte DIESES Bandes (`cqw`), nicht des Fensters. Dadurch stimmen die Verhaeltnisse in jeder Spaltenbreite, ohne einen einzigen Bruchpunkt. */ .rond__band { margin-inline: calc(-1 * var(--ipad)); background: var(--dgfe-navy-500); padding-block: var(--inset-line); container-type: inline-size; /* Der Kopf ist zugleich das Bedienfeld und darf deshalb nie unter 46 px fallen (Tap-Target 44 px plus Haarlinie). `--mark` ist die HOEHE der Marke, nicht ihre Breite. Das ist kein Detail: die vier Siegel-SVGs sind mit 117,09 × 119,16 mm hochkant, ueber die Breite gerechnet blieben unter jeder Marke 12 px totes Feld stehen und die Karte waere nicht mehr genau `--open` hoch. Ueber die Hoehe geht die Rechnung auf. Die Masse stehen am BAND, nicht am Stapel: die Anzeige darunter ist ein Geschwister des Stapels und braucht denselben Innenrand `--cpad`, sonst stiesse sie an die Bandkante. */ --strip: clamp(46px, 15cqw, 56px); --cpad: var(--inset-row); /* 84cqw statt 74: die Marke ist der Grund, warum es diese Flaeche gibt, und sie hatte auf dem Telefon 37 px Luft neben sich stehen. Die Rechnung, die die Grenze setzt: die SVGs sind 117,09 × 119,16 mm hoch, die Breite ist also 0,9826 · Hoehe, und daneben muessen zweimal `--cpad` passen. 360 px: Band 222 → 186,5 hoch → 183,2 breit in 190 verfuegbar 390 px: Band 252 → 211,7 hoch → 208,0 breit in 220 verfuegbar 430 px: Band 292 → 245,3 hoch → 241,0 breit in 260 verfuegbar Ab 768 px greift der Deckel von 292 px, am Schreibtisch aendert sich also nichts. Auf dem Telefon waechst die vordere Marke von 186 auf 212 px. */ --mark: min(84cqw, 292px); --open: calc(var(--strip) + 2 * var(--cpad) + var(--mark)); } .rond__stack { position: relative; height: calc(3 * var(--strip) + var(--open)); /* Die unterste Karte hat keine Nachfolgerin, die ihren Koerper zudeckt — die Lade selbst schneidet ihn ab. Ohne das stuenden zwei Marken gleichzeitig offen. */ overflow: hidden; } /* Jede Karte ist volle Kartenhoehe hoch — auch die zugeklappten. Sichtbar bleibt von ihnen nur der Kopf, weil die naechste Karte den Rest verdeckt. Deshalb muss NICHTS in der Hoehe animiert werden: es wandern nur die Positionen, und das ist ein `translateY`. */ .rond__card { position: absolute; left: 0; right: 0; top: 0; height: var(--open); background: var(--dgfe-navy-500); border-top: 1px solid var(--rule-n); transform: translateY(var(--y, 0px)); transition: transform var(--t-card) var(--e-card); will-change: transform; } /* Die Ausgangslage steht vollstaendig im CSS: ohne JavaScript liegt die Kartei korrekt auf Stufe 1 aufgeschlagen. JavaScript ueberschreibt beim Wechsel nur `--y`. */ .rond__card:nth-child(1) { --y: 0px; z-index: 1; } .rond__card:nth-child(2) { --y: var(--open); z-index: 2; } .rond__card:nth-child(3) { --y: calc(var(--open) + 1 * var(--strip)); z-index: 3; } .rond__card:nth-child(4) { --y: calc(var(--open) + 2 * var(--strip)); z-index: 4; } /* Der Kopf IST der Knopf. Vier Knoepfe, keine getrennte Leiste darunter — die Karte, die man anfasst, ist die Karte, die aufgeht. */ .rond__head { width: 100%; height: var(--strip); display: flex; align-items: center; gap: clamp(10px, 3cqw, 15px); padding-inline: var(--cpad); background: transparent; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; } .rond__head .sq { width: 30px; height: 30px; font-size: var(--fs-2); } .rond__hl { font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600; font-weight: 600; text-transform: uppercase; font-size: var(--fs-2); letter-spacing: .14em; color: var(--ink-quiet); transition: color var(--t-ui) var(--e-shut); } /* Gefuellt heisst gesetzt — dieselbe Lesart wie beim Pruefstempel `.sq` und beim Massnahmenquadrat `.kat__m`. */ .rond__head[aria-current="true"] .sq { background: var(--dgfe-yellow-500); color: var(--dgfe-navy-500); box-shadow: none; } .rond__head[aria-current="true"] .sq::after { background: var(--dgfe-navy-500); } .rond__head[aria-current="true"] .rond__hl { color: var(--ink-strong); font-variation-settings: "wdth" 70, "wght" 700; } @media (hover: hover) and (pointer: fine) { .rond__head:hover .rond__hl { color: var(--ink-strong); } } .rond__head:focus-visible { outline-offset: -3px; } .rond__body { padding: var(--cpad); } .rond__mark { height: var(--mark); width: auto; max-width: 100%; margin-inline: auto; } /* Die aufgeschlagene Karte traegt an ihrer Oberkante dieselbe kurze gelbe Kante wie die Randschrift-Baender der Seite (`.rand__edge`) — Gelb als Linie, nicht als Flaeche. Sie ist das zweite, vom Stempelfeld unabhaengige Merkmal dafuer, welche Karte offen liegt. */ .rond__card:has(.rond__head[aria-current="true"])::before { content: ""; position: absolute; left: 0; top: -1px; width: clamp(44px, 22cqw, 96px); height: 2px; background: var(--dgfe-yellow-500); } /* Die Anzeige steht UNTER der Lade und nennt die aufgeschlagene Stufe mit Nummer und Betriebsgroesse. Sie steht bewusst ausserhalb der Karten: so ist die Kartenhoehe eine reine Rechnung aus Kopf und Marke und haengt an keiner Textzeile, die je nach Breite zwei- oder dreizeilig umbricht. Fuer die Sprachausgabe ist sie ausgeblendet — dieselbe Angabe steht vollstaendig im `aria-label` jedes Kopfes, und zweimal dasselbe zu hoeren hilft niemandem. */ .rond__now { margin-top: clamp(11px, 3.4cqw, 16px); padding: var(--inset-line) var(--cpad) 0; border-top: 1px solid var(--rule-n); display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; } .rond__nk { font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-accent); } .rond__nd { flex: 1 0 100%; font-size: var(--fs-2); line-height: 1.4; color: var(--ink-quiet); } /* --- 14) Massnahmenkatalog ---------------------------------------------- Sechs gleichrangige Eintraege, weil sie tatsaechlich gleichrangig sind. Keine Kacheln, keine Nummern: sie haben keine Reihenfolge. Statt des Haekchens der Startseite traegt jeder Eintrag die Marke dieser Seite, das leere Stempelquadrat. ------------------------------------------------------------------------ */ .kat { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3.4vw, 60px); border-top: 1px solid var(--rule); } .kat__i { padding-block: var(--inset-row); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px clamp(12px, 1.4vw, 18px); } /* Die Marke dieser Seite als Aufzaehlungszeichen: ein gesetzter Abdruck, nicht das Haekchen der Startseite. Gefuellt, nicht hohl — ein hohles Quadrat liest sich als „noch nicht erledigt", und diese Massnahmen sind anerkannt, nicht offen. */ .kat__m { width: 13px; height: 13px; margin-top: .34em; background: var(--dgfe-yellow-500); box-shadow: inset 0 0 0 1px var(--dgfe-yellow-800); } .kat__i p { grid-column: 2; margin-top: 10px; font-size: var(--fs-3); } /* --- 15) Pruefvermerke --------------------------------------------------- */ .verm { border-top: 1px solid var(--rule-n); } /* 12rem waren fuer eine 9-px-Beschriftung zu viel: der laengste Schluessel („Stichprobenprüfung") misst 113 px, der Rest war Loch, und die Wertspalte fiel auf 44 Zeichen. 9,5rem geben ihr 48 zurueck. */ .verm__r { display: grid; grid-template-columns: fit-content(46%) minmax(0, 1fr); gap: 6px clamp(16px, 2.4vw, 44px); align-items: baseline; padding-block: var(--inset-row); border-bottom: 1px solid var(--rule-n); } .verm__k { font-size: var(--fs-2); letter-spacing: .16em; color: var(--dgfe-yellow-500); } .verm__v { font-size: var(--fs-3); line-height: 1.5; } /* --- 16) Die Staffel — vier Stufen, ein Blatt --------------------------- Keine vier gleichen Karten. Ein Registerblatt mit vier Eintraegen; die Marke links macht jeden Eintrag ohne Farbcode unterscheidbar. ------------------------------------------------------------------------ */ .staffel { border-top: 1px solid var(--rule-2); } .staffel__hd { display: grid; grid-template-columns: var(--stf); gap: clamp(12px, 1.8vw, 30px); padding-block: var(--inset-line); border-bottom: 1px solid var(--rule-2); font-size: var(--fs-2); letter-spacing: .16em; color: var(--ink-quiet); } /* Die vier Siegelmarken standen hier zuerst als Zeilenmarke links. Durch den gemeinsamen Grade sehen sie aber alle vier gleich aus — sie trugen also keine Information, nur Flaeche. Sie sind heraus; die Marke selbst steht dafuer genau EINMAL auf der Seite, gross, im Ausstellungsfeld. */ .staffel { /* 8,5rem waren 136 px fuer einen Preis, der mit Vorsatzwort und Einheit 130 px misst — er stiess an die Kante des eigenen Feldes. */ --stf: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 9.5rem) minmax(0, 14rem); } /* `align-items: center` hatte in jeder Zeile vier verschieden hohe Felder jeweils um ihre eigene Mitte gedreht: Stufenname, Verbrauchslage, Preis und Knopfbeschriftung standen auf vier Grundlinien innerhalb von 12 px. In einer Vergleichstabelle ist genau das die Zeile, die man waagerecht liest. `baseline` setzt die drei Textfelder auf eine Linie; nur der Knopf bleibt mittig, weil ein 44-px-Feld an einer Textgrundlinie kippen wuerde. */ .staffel__r { display: grid; grid-template-columns: var(--stf); gap: 10px clamp(14px, 2vw, 34px); align-items: baseline; padding-block: var(--inset-row); border-bottom: 1px solid var(--rule); transition: background-color var(--t-ui) var(--e-shut); } .staffel__r .btn { align-self: center; } @media (hover: hover) and (pointer: fine) { .staffel__r:hover { background: color-mix(in srgb, var(--dgfe-navy-500) 3%, transparent); } } .staffel__t { display: block; font-family: var(--ff-dsp); font-variation-settings: "wdth" 108, "wght" 650; font-weight: 600; text-transform: uppercase; color: var(--ink-strong); font-size: var(--fs-3); line-height: 1.14; } .staffel__s { display: block; margin-top: 7px; font-size: var(--fs-2); line-height: 1.45; } .staffel__u { font-size: var(--fs-2); line-height: 1.45; } .staffel__p { text-align: left; } .staffel__pv .u, .staffel__pv .pfx, .vgl__pv .u, .vgl__pv .pfx { font-size: var(--fs-2); } .staffel__pv { font-size: var(--fs-5); color: var(--ink-strong); white-space: nowrap; } /* Ein „+" gehoert an seine Zahl, eine Einheit steht daneben. Deshalb nur hier ein echter Wortabstand — sonst las sich der Preis als „59,99 €mtl.". */ .staffel__pv .u { margin-left: .42em; } /* Die Zahl bekommt eine feste, rechtsbuendige Box. Ohne sie schiebt "129,99" die Einheit um 15 px weiter nach rechts als "59,99", und die vier gestapelten Staffelzeilen stehen sichtbar versetzt. ⚠ Dieselbe Stelle gibt es auf der Siegeluebersicht. Dort war sie am 24.08. gerichtet, hier nicht — eine Datei angefasst, die Zwillingsseite vergessen. */ .staffel__pv .z { display: inline-block; min-width: 5.7ch; text-align: right; font-variation-settings: normal; font-variant-numeric: tabular-nums; } .staffel__pn { display: block; margin-top: 7px; font-size: var(--fs-2); line-height: 1.35; color: var(--ink-quiet); } .staffel__r .btn { width: 100%; white-space: nowrap; } .stl { display: none; } /* Der Grund, warum vorher geprueft wird. Gelb als Kante, nicht als Flaeche. `align-self: start`: als gestrecktes Rastfeld lief die gelbe Kante 33 px ueber ihren letzten Satz hinaus ins Leere. Eine Kante endet dort, wo das endet, was sie kennzeichnet. */ .warum { border-left: 3px solid var(--dgfe-yellow-500); padding-left: var(--inset-row); align-self: start; } .warum p + p { margin-top: 13px; } /* Die Einleitung „In jeder Stufe enthalten" stand vorher IM ersten Aufzaehlungspunkt („In jeder Stufe enthalten: DGfE-Siegel-Nutzung*"), waehrend die drei anderen Punkte nackt dastanden. Gelesen ergab das eine Liste, deren erster Punkt seine eigene Ueberschrift mitspricht. Sie steht jetzt als Schluesselzeile darueber, in derselben Form wie die uebrigen Schluesselzeilen der Seite (.bil__k, .plog__k, .verm__k). */ .incl__k { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-quiet); margin-top: clamp(16px, 1.8vw, 22px); } .incl__k + .incl { margin-top: clamp(10px, 1.1vw, 14px); } .incl { margin-top: clamp(16px, 1.8vw, 22px); display: grid; gap: var(--dgfe-space-md); } .incl li { display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 12px; font-size: var(--fs-3); line-height: 1.5; align-items: start; } .incl i { width: 11px; height: 11px; margin-top: .42em; background: var(--dgfe-yellow-500); box-shadow: inset 0 0 0 1px var(--dgfe-yellow-800); } /* Fliesstext in schmalen Spalten: dieselbe Begruendung wie bei .h3. Woerter wie „Zeitschaltuhren/Bewegungsmelder" oder „Energieeffizienzmassnahmen" sind breiter als die Spalte, in der sie stehen. */ .bogen__row p, .kat__i p, .lauf__d, .pstr__d, .staffel__u, .staffel__s, .bil__n, .verm__v, .issue__d, .bogen__note { hyphens: auto; overflow-wrap: break-word; /* Ohne Grenze trennte der Browser auch da, wo nichts zu gewinnen ist: „Ge-sellschaft", „so-fern". Zwei Buchstaben vor dem Strich sind kein Umbruch, sondern ein Fleck. 8 Zeichen Mindestlaenge, 4 auf jeder Seite — aus „Ge-sellschaft" wird „Gesell-schaft", „sofern" bleibt ganz. */ hyphenate-limit-chars: 8 4 4; } /* --- 17) Pruefmarke aus der Wort-Bild-Marke ------------------------------ */ .markdots { display: flex; gap: 7px; margin-bottom: clamp(16px, 1.8vw, 24px); } .markdots b { display: block; width: 10px; height: 10px; border-radius: 50%; } /* Schwarz-Rot-Gold, wie die drei Punkte der Wort-Bild-Marke, auf Stefs Ansage. Bis zum 27.08.2026 standen hier Navy und Blau aus der Hausfarbtafel; die Punkte lasen sich damit als Schwarz-Blau-Gelb. Die Werte sind bewusst dieselben festen Hexwerte wie im Logo (#222222/#FF3131) und keine Token: fuer das Rot der Marke gibt es keinen Token, und zwei Quellen fuer dieselbe Farbe laufen frueher oder spaeter auseinander. Gold ist --dgfe-yellow-500 und damit ohnehin schon #FFDE59. */ .markdots b:nth-child(1) { background: #222222; } .markdots b:nth-child(2) { background: #FF3131; } .markdots b:nth-child(3) { background: var(--dgfe-yellow-500); } /* --- 18) Abschluss + Footer — 1:1 --------------------------------------- */ .closer { position: relative; overflow: hidden; } /* War ein Inline-`style` mit demselben Wert. Als Klasse laesst er sich per Media-Query wieder anfassen — genau das, was ein Inline-`style` nie kann (Playbook 4.1). */ .closer__act { margin-top: clamp(26px, 3vw, 42px); } .closer__bg { position: absolute; inset: 0; z-index: 0; } .closer__bg .ph { position: absolute; inset: 0; } .closer__bg::after { content: ""; position: absolute; inset: 0; z-index: 2; background: color-mix(in srgb, var(--dgfe-navy-500) 86%, transparent); } .closer > .sheet { position: relative; z-index: 2; } .endmark { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px, 3vw, 42px); } .endmark i { width: 15px; height: 15px; flex: none; background: var(--dgfe-yellow-500); box-shadow: 0 0 0 5px color-mix(in srgb, var(--dgfe-yellow-500) 22%, transparent); } .endmark span { font-size: var(--fs-2); letter-spacing: .17em; color: var(--ink-n-muted); } .site-footer { background: var(--dgfe-navy-500); color: var(--ink-n-muted); } .site-footer .sheet__body { padding-block: clamp(44px, 5vw, 76px); } .foot { display: grid; grid-template-columns: 1.7fr 1fr 1.3fr; gap: clamp(28px, 4vw, 68px); } .foot svg { height: 32px; width: auto; display: block; margin-bottom: var(--dgfe-space-lg); } /* Buchstaben weiss, damit sie auf dem Navy-Fuss lesbar sind. Die drei Punkte behalten Schwarz-Rot-Gold, auf Stefs Ansage. GEMESSEN: #222222 auf #1c244b ergibt 1,06:1 -- der schwarze Punkt ist auf dem dunklen Grund praktisch nicht zu sehen. Rueckbau, falls doch sichtbar gewuenscht: circle:first-of-type wieder auf #fff. */ .foot svg path { fill: #fff; } .foot__k { font-size: var(--fs-2); letter-spacing: .17em; color: var(--dgfe-yellow-500); margin-bottom: var(--dgfe-space-lg); } .foot__nm { font-size: var(--fs-3); color: #fff; font-weight: 400; line-height: 1.3; } .foot p, .foot address { font-size: var(--fs-2); line-height: 1.65; font-style: normal; } .foot__ls { display: grid; gap: 2px; } .foot .foot__ls a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-2); color: color-mix(in srgb, white 82%, var(--dgfe-navy-500)); text-decoration: none; transition: color var(--t-ui) var(--e-shut); } @media (hover: hover) and (pointer: fine) { .foot .foot__ls a:hover { color: #fff; } } .foot__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--dgfe-space-lg); } .foot__bar { margin-top: clamp(34px, 4vw, 56px); padding-top: var(--dgfe-space-lg); border-top: 1px solid var(--rule-n); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: var(--fs-2); color: var(--ink-n-quiet); } /* --- 19) Bewegung: vier Gesten, jede mit einem Grund --------------------- Blende — Bilder werden von oben aufgezogen (wie Startseite) Zeile — Ueberschriften fahren maskiert von unten (wie Startseite) Schreiber — die Randschrift wird aufgezogen (wie die Kurve) Stempel — Felder kommen VON OBEN herab und setzen sich auf Der Stempel ist die einzige eigene Geste. Er benutzt dieselbe Kurve wie der Messpunkt der Startseite, laeuft aber in die andere Richtung: der Messpunkt waechst aus dem Nichts, der Stempel kommt von oben herunter. ------------------------------------------------------------------------ */ [data-count] { display: inline-block; font-variant-numeric: tabular-nums; } .lm { display: block; overflow: hidden; /* Oben UND unten polstern, sonst kappt die Maske die Umlautpunkte der Versalien. Die negativen Aussenabstaende nehmen die Polsterung optisch wieder zurueck, der Zeilenabstand bleibt also unveraendert. */ padding-top: .16em; margin-top: -.16em; padding-bottom: .06em; margin-bottom: -.06em; } .lm i { display: block; font-style: normal; } .grp > *:nth-child(1){--i:0} .grp > *:nth-child(2){--i:1} .grp > *:nth-child(3){--i:2} .grp > *:nth-child(4){--i:3} .grp > *:nth-child(5){--i:4} .grp > *:nth-child(6){--i:5} .grp > *:nth-child(7){--i:6} .grp > *:nth-child(8){--i:7} .motion .lm:nth-of-type(1){--i:0} .motion .lm:nth-of-type(2){--i:1} .motion .ph__shut { transform: translateY(0); } .motion .b-da .ph__shut { transform: translateY(-101%); transition: transform var(--t-shut) var(--e-shut) var(--sd, 0ms); } .motion .ph img { scale: 1.075; } .motion .b-da .ph img { scale: 1; transition: scale 1300ms var(--e-shut) var(--sd, 0ms); } .motion .wipe { transform: scaleX(1); } .motion .b-da .wipe { transform: scaleX(0); transition: transform var(--t-draw) var(--e-draw); } /* Stempel: von oben herab, minimal ueberschwingend */ .motion .sq { opacity: 0; scale: 1.45; } .motion .b-da .sq { opacity: 1; scale: 1; transition: opacity var(--t-point) var(--e-point) var(--md, 0ms), scale var(--t-point) var(--e-point) var(--md, 0ms); } .bogen__row:nth-child(1) .sq { --md: 120ms } .bogen__row:nth-child(2) .sq { --md: 240ms } .bogen__row:nth-child(3) .sq { --md: 360ms } .bogen__row:nth-child(4) .sq { --md: 480ms } .bogen__row:nth-child(5) .sq { --md: 600ms } .bogen__row:nth-child(6) .sq { --md: 720ms } .lauf__s:nth-child(1) .sq { --md: 100ms } .lauf__s:nth-child(2) .sq { --md: 260ms } .lauf__s:nth-child(3) .sq { --md: 420ms } /* --- 20) Breakpoints ----------------------------------------------------- */ @media (max-width: 1024px) { :root { --page: 900px; } .hero__grid { grid-template-columns: 1fr; } .hero__media { min-height: clamp(220px, 44vw, 340px); margin-top: 4px; } .hero .h1 { max-width: 100%; } .bogen__body { grid-template-columns: 1fr; } .bogen__list { border-right: 0; border-bottom: 1px solid var(--rule-n); } .foot { grid-template-columns: 1fr 1fr; } /* Schluessel und Wert nebeneinander brauchen Platz fuer beide. Unterhalb von 1025 blieben dem Wert 18-29 Zeichen je Zeile — die Beschriftung gehoert dann ueber den Wert, nicht daneben. */ .verm__r { grid-template-columns: 1fr; } /* Unter der Desktop-Schwelle ist die 5/12-Spalte kein Seitenstreifen mehr, sondern ein 36-Zeichen-Schacht. Der Block nimmt dort die volle Breite. */ .warum { grid-column: 1 / -1; max-width: 66ch; } /* Vier Spalten, nicht fuenf: die Siegelspalte ist entfallen. Blieb sie in dieser Regel stehen, rutschte die Stufenspalte in ein 60-px-Feld. */ /* 7rem waren 112 px — „Endpreis nach Prüfung" braucht 118 und brach um. Eine Fussnote, die in jeder der vier Zeilen anders umbricht, zerlegt die Spalte, die man senkrecht vergleichen soll. */ .staffel { --stf: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 8.75rem) minmax(0, 11.5rem); } .staffel__r .btn { padding-inline: 14px; } } /* Die Kopfzeile kippt frueher als das Raster — wie auf der Startseite und aus demselben Grund. Bisher stand die Schwelle hier auf 767. Mit der vierten Vorschau (Swiss Direkt) braucht die Navigation 920 statt 795 px; bei 768 stehen 719 zur Verfuegung, und der gelbe Knopf liefe wieder hinter die Fensterkante. Der Hamburger traegt deshalb bis 1024 px. */ @media (max-width: 1024px) { .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--dgfe-neutral-50); border-bottom: 1px solid var(--rule-2); padding: 6px var(--gut) 16px; box-shadow: var(--dgfe-shadow-md); } /* Author-Styles schlagen das UA-`display:none` von [hidden] — sonst steht das Mobilmenue dauerhaft offen. */ .nav[hidden] { display: none; } .nav a { min-height: 48px; border-bottom: 1px solid var(--rule); } /* Im aufgeklappten Menue wird aus der senkrechten Haarlinie eine waagerechte ueber die volle Breite: dieselbe Aussage („ab hier etwas anderes"), nur in der Achse, in der das Menue laeuft. Der Eintrag DAVOR gibt dafuer seine eigene Trennlinie ab — sonst stehen zwei Haarlinien 12 px uebereinander und lesen sich als Fehler statt als Gruppenwechsel. */ .nav a.nav__part { margin-left: 0; padding-left: 0; margin-top: 12px; padding-top: 13px; } .nav a.nav__part::before { left: 0; right: 0; top: 0; width: auto; height: 1px; translate: none; } .nav a:has(+ .nav__part) { border-bottom: 0; } .nav .btn { margin-top: 10px; justify-content: center; } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; margin-left: auto; padding: 0 11px; background: transparent; border: 1px solid var(--rule-2); border-radius: 3px; cursor: pointer; } .nav-toggle b { display: block; height: 1.5px; background: var(--ink-strong); } } /* Das schmale Tablet, 768-900 px. Hier kippt die Seite, und zwar an drei Stellen, die bei 1025 und bei 390 beide in Ordnung sind. ---------------- */ @media (max-width: 900px) { /* Der Kopf passte nicht mehr: Marke + Anzeige + drei Links + Knopf brauchen 795 px, bei 768 stehen 719 zur Verfuegung. Der gelbe Knopf lief hinter die Fensterkante und war nicht mehr anklickbar. Die Anzeige ist der einzige Teil, der nichts bedient — sie geht als erste. */ .readout { display: none; } /* Vier Spalten fuer je 20 Zeichen. Zwei Spalten fuer je 40 lesen sich besser, und der Pruefweg ist die Stelle, an der die Seite ihr Messsystem erklaert. */ .pstr__row { grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 30px); } } @media (max-width: 767px) { /* 48 statt 44 px: das Stempelfeld misst 28 px, und der Innenabstand zur Haarlinie muss auch mobil den Zielwert halten (>= 14 px). 28 + 16 + 1 Rahmen = 45 px, 48 gibt der Rechnung Reserve. */ :root { --axis: 48px; --header-h: 60px; --header-h-sm: 52px; --bleed: var(--gut); } .g { row-gap: 26px; } .c1-4,.c1-5,.c1-6,.c1-7,.c1-8,.c1-9,.c2-7,.c3-8,.c3-9, .c5-12,.c6-12,.c7-12,.c8-12,.c9-12 { grid-column: 1 / -1; } /* `text-wrap: balance` schlaegt in schmalen Spalten um. Der Balancierer verengt den Kasten so lange, bis die Zeilen gleich lang sind — und in einer 220-290 px breiten Spalte (20-26 Zeichen) greift dabei sofort `hyphens: auto` und liefert einen Trennstrich-Umbruch, wo der normale Zeilenfall ganz ohne Trennung ausgekommen waere. Nachgemessen bei 390 px, Zeilenbreiten in px: „Energie-Policy unterzeichnen" balance [ 87, 224] pretty [152, 154] „Energieverbrauch erfassen" balance [124, 176] pretty [195, 96] „LED-Beleuchtung eingeführt" balance [132, 172] pretty [177, 117] „Heiz- und Kühlgrenzen def." balance [ 89, 235] pretty [229, 95] Die linke Spalte sind die Tuerme: eine erste Zeile mit 87 px in einem 252 px breiten Kasten ist keine Zeile, sondern eine Silbe. Und die drei unteren Faelle traegt `balance` einen Trennstrich ein, wo rechts gar keiner noetig ist. Ueber alle Zwischenueberschriften ausgezaehlt liefert der normale Zeilenfall bei 390 px in 7 von 9 Faellen den besseren Umbruch, bei 360 px in 6 von 8. `pretty` und nicht `auto`: ueber alle 19 Zwischenueberschriften bei 360 und 390 px sind beide zeichengleich — bis auf einen Fall, und den loest `pretty` besser. „ENERGIESPARMODUS FÜR / GERÄTE" (238/72) wird zu „ENERGIESPARMODUS / FÜR GERÄTE" (197/113); eine Praeposition bleibt bei ihrem Wort statt am Zeilenende zu haengen. Die grossen Ueberschriften (`.dsp`) behalten `balance`: dort sind die Kaesten breit genug, und da gewinnt der Balancierer in JEDEM Fall — bei „Fair nach Unternehmensgröße" zwei Zeilen zu 256/255 px statt drei zu 146/244/116. */ .h3 { text-wrap: pretty; } .axis { padding-right: var(--inset-line); } .axis__name { display: none; } .axis__stamp { width: 28px; height: 28px; font-size: var(--fs-2); } /* Bei 390 px ist die Pruefspalte 44 px breit. „GEGENSTAND" braucht in Versalien rund 50 px und lief nach links aus der Spalte heraus, in den Seitenrand. Das Stempelfeld traegt die Stufe allein; die Woerter stehen vollstaendig im Prüfweg im Hero. Genau so haelt es die Startseite mit ihrer Einheit auch. */ .axis__unit { display: none; } .axis__tick { top: calc(var(--apad, var(--secY)) + 13px); } .hero__media { margin-right: calc(-1 * var(--gut)); } /* Das Band laeuft weiter bis an die Fensterkante — seine Haarlinie soll das auch. Der TEXT darin darf es nicht: mit `padding-right: 0` endete der rechte Pruefschritt 6 px vor der Fensterkante. Der Innenrand haelt ihn im Satzspiegel, die Linie laeuft trotzdem durch (Rand liegt innerhalb der Rahmenbox). */ .pstr { margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); } .pstr__row { gap: clamp(18px, 4.6vw, 28px); } /* Ein 4:5-Kasten ueber die volle Blattbreite waere bei 767 px 873 px hoch — ein Bild, an dem man dreimal wischt. Der Kasten wird gedeckelt, das Bild beschneidet sich selbst (object-fit: cover). Bei 390 px greift der Deckel nicht, dort ist der Kasten 413 px hoch. */ .ph--4x5, .ph--3x4 { max-height: 76vh; } .bil { grid-template-columns: 1fr; } .bil__big { grid-column: auto; } .bil__big .bil__n { margin-top: 0; } .plog__row { gap: 20px 28px; justify-content: flex-start; } .plog__row img { max-height: 24px; } .lauf { grid-template-columns: 1fr; } .lauf__s { padding-right: 0; padding-bottom: clamp(18px, 4vw, 24px); } .lauf__s + .lauf__s { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; } .bogen__stick { position: static; } /* Der Prüfbogen: Stempelfeld 40 px, Innenrand 2 × 14, Spalte 14 — dem Text blieben bei 390 px 232 px, also 31 Zeichen je Zeile. `display: contents` loest den Wrapper auf, so dass Ueberschrift und Absatz eigene Rastfelder werden: die Ueberschrift bleibt neben dem Stempel stehen, der Absatz laeuft darunter ueber beide Spalten und bekommt 286 px zurueck. */ .bogen__row > div { display: contents; } .bogen__row > div > p { grid-column: 1 / -1; margin-top: 12px; } .kat { grid-template-columns: 1fr; } .verm__r { grid-template-columns: 1fr; } /* --- Die Staffel bei 390 px ------------------------------------------ Vorher stapelte jede Stufe acht Zeilen untereinander (Name, Groesse, Beschriftung, Verbrauchslage, Beschriftung, Preis, Fussnote, Knopf). Vier Stufen ergaben 1.100 px, in denen der Preis jedes Mal woanders stand — vergleichen liess sich da nichts mehr, und genau dafuer ist eine Staffel da. Der Preis steht jetzt auf derselben Zeile wie der Name und rechtsbuendig: alle vier Preise bilden dadurch eine senkrechte Spalte, die man mit einem Blick abfaehrt. Die Kante fluchtet mit dem Knopf darunter und mit dem Blattrand. --------------------------------------- */ .staffel__hd { display: none; } .staffel { --stf: minmax(0, 1fr) fit-content(38%); } .staffel__r { gap: 0 clamp(12px, 3.2vw, 16px); align-items: baseline; padding-block: clamp(20px, 5vw, 26px); } /* Die Betriebsgroesse bekommt die ganze Zeilenbreite statt der Restspalte neben dem Preis. Grund, nachgemessen bei 390 px: die Restspalte ist 152 px breit, „50-249 Mitarbeitende" braucht 157 — als EINZIGE der vier Stufen brach sie um und machte ihre Zeile 20 px hoeher als die drei anderen. In einer Staffel, die man senkrecht vergleicht, ist eine Zeile, die aus der Reihe faellt, teurer als eine Zeile mehr. Voll ausgeschrieben passen alle vier bei 360, 390 und 430 px einzeilig. `display: contents` loest den Namenskasten auf, damit Name und Groesse eigene Rastfelder werden. */ .staffel__r > div { display: contents; } .staffel__t { grid-column: 1; grid-row: 1; } .staffel__s { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; } .staffel__p { grid-column: 2; grid-row: 1; margin-top: 0; text-align: right; } .staffel__u { grid-column: 1 / -1; margin-top: 14px; } .staffel__r .btn { grid-column: 1 / -1; margin-top: 16px; align-self: stretch; } .staffel__t { font-size: var(--fs-2); } .staffel__pv { font-size: var(--fs-4); } /* Ein Preis mit „ab" und „€ mtl." braucht keine Ueberschrift „Orientierung". */ .staffel__p .stl { display: none; } /* 8 px Versalien mit 0,15em Laufweite sind unter der Lesbarkeitsgrenze und tanzen aus der Reihe der uebrigen Schluesselzeilen (.bil__k, .verm__k, .plog__k) heraus, die alle auf 9 px stehen. */ .stl { display: block; font-family: var(--ff-dsp); font-variation-settings: "wdth" 70, "wght" 600; font-weight: 600; text-transform: uppercase; font-size: var(--fs-2); letter-spacing: .14em; color: var(--ink-quiet); margin-bottom: 6px; } .foot { grid-template-columns: 1fr; } } /* Telefone: zwei linksbuendige Knoepfe verschiedener Breite lassen zwei fast fluchtende Kanten stehen — der Hauptknopf endete 39 px vor dem Satzrand. Auf voller Breite ist die Kante eindeutig; die Rangfolge traegt weiterhin Flaeche gegen Kontur. ---------------------------------------------------- */ @media (max-width: 560px) { .hero__act { display: grid; grid-template-columns: 1fr; gap: 12px; } .hero__act .btn { width: 100%; } /* Der Kopf einer Pruefbogen-Position stand neben seinem 40-px-Stempelfeld in einer 198 px schmalen Spalte. Fuer Versalien in Archivo wdth 108 ist das zu wenig: „ENERGIEVERANTWORTLICHE PERSON BENENNEN" zerfiel in ENERGIEVERANT- / WORTLICHE / PERSON BENENNEN, „EIN KLEINES ENERGIEZIEL FESTLEGEN" in EIN KLEINES / ENERGIE- / ZIEL FESTLEGEN. Eine Zeile, die nur aus einer Trennsilbe besteht, liest sich als Turm, nicht als Zeile. Das Stempelfeld steht deshalb ueber der Ueberschrift statt daneben, und die bekommt die volle Zeilenbreite (198 → 252 px, +27 %). Erfunden ist das nicht: die Laufkarte (`.lauf__s`) haelt es auf dieser Seite mobil schon genauso — Stempel, Ueberschrift, Text untereinander. */ .bogen__row { grid-template-columns: minmax(0, 1fr); gap: 0; } .bogen__row .h3 { padding-top: 0; margin-top: 12px; } .bogen__row > div > p { margin-top: 9px; } /* Derselbe Grund wie beim Hero-Knopfpaar (Abschnitt 7.1): ein Knopf, der 8 px vor dem Satzrand endet, liest sich als misslungene Flucht, nicht als eigene Breite. Gemessen bei 390 px: Knopf 88 → 366, Textspalte darueber 88 → 374. Auf voller Breite ist die Kante eindeutig. */ .closer__act .btn { width: 100%; justify-content: center; } /* Ein Knopf auf voller Breite ist ein Flex-Kasten mit zwei Kindern: Beschriftung und Pfeil. „Energiesiegel anfragen" misst einzeilig 199 px; zur Verfuegung stehen bei 390 px 210, bei 360 px nur 180 und bei 320 px 140. Unterhalb von 390 bricht die Beschriftung also um — und dann schiebt `justify-content: center` die beiden Kinder auseinander: die Beschriftung stand links, der Pfeil einsam rechts daneben. Das liest sich als Fehler. Als Textfluss bleiben beide zusammen und mittig, und der umgebrochene Zustand sieht aus wie Absicht. Die Hoehe bleibt ueber dem Tap-Target: 15 px Innenrand oben und unten plus 17,6 px Zeile plus Rahmen = 49,6 px. Der seitliche Innenrand faellt dabei von 26 auf 12 px. Bei mittiger Beschriftung auf voller Breite ist er ohnehin nur noch eine Untergrenze, und er entscheidet ueber den Umbruch: Beschriftung 199 px plus 8 px Abstand plus 12 px Pfeil sind 219 px. Mit 26 px Rand stehen bei 360 px nur 204 zur Verfuegung — es passte die Beschriftung, aber nicht mehr der Pfeil, und der stand dann allein in der zweiten Zeile. Mit 12 px sind es 232, und bei 320 px (192) bricht es sauber an der Wortfuge: „ENERGIESIEGEL" / „ANFRAGEN →". */ .hero__act .btn, .closer__act .btn { display: block; text-align: center; line-height: 1.35; padding-block: 15px; padding-inline: 12px; } .hero__act .btn .btn__a, .closer__act .btn .btn__a { display: inline-block; margin-left: 8px; } } /* --- 21) Reduced Motion: alles sichtbar, ohne einen einzigen Scroll ------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .motion .r, .motion .rq, .motion .grp > *, .motion .sq { opacity: 1 !important; translate: none !important; scale: none !important; } .motion .lm i { translate: none !important; } .motion .ph__shut { transform: translateY(-101%) !important; } .motion .ph img { scale: 1 !important; } .motion .wipe { transform: scaleX(0) !important; } /* Die Kartei haelt an und blaettert sich auf: aus dem Stapel wird ein Register. Alle vier Karten stehen offen nebeneinander, jede mit ihrem Kopf UND ihrer Marke — nichts liegt mehr unter etwas anderem, nichts wartet auf eine Bewegung. Zwei Spalten, nicht vier: vier Marken nebeneinander waeren auf dem Telefon je 62 px breit und damit unter der Grenze, ab der die Umschrift noch als Schrift zu erkennen ist. Bedienbar bleibt alles: die Koepfe wechseln weiter die Auswahl, nur ohne Fahrt. Die gewaehlte Karte traegt zusaetzlich zum gefuellten Stempelfeld eine gelbe Kante mit Navy-Saum — Sichtbarkeit haengt nie an einem einzigen Merkmal. */ .rond__stack { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-n); } .rond__card { position: static; height: auto; transform: none !important; transition: none !important; will-change: auto; border-top: 0; } .rond__card:has(.rond__head[aria-current="true"]) { box-shadow: inset 0 0 0 2px var(--dgfe-yellow-500); } /* Zwei Karten je Reihe: die Marke misst sich jetzt an der halben Bandbreite, nicht mehr an der ganzen. */ .rond__band { --mark: min(32cqw, 132px); } /* Keine Einfaerbung. Die Bilder stehen in ihrem RUHEZUSTAND, und der ist der Duotone — nicht die Farbe. Begruendung, in dieser Reihenfolge: 1. Der einheitliche Grade ueber allen Bildern ist der groesste gestalterische Einzelposten dieser Seite. Die Farbe ist der Effekt, der darauf sitzt. Faellt der Effekt weg, bleibt der Entwurf stehen, nicht umgekehrt. 2. Wer Bewegung abschaltet, bekommt damit exakt dieselbe Komposition wie jede Standbild-Aufnahme dieser Seite — eine Serie aus einer Hand, kein Sondersatz. 3. Es geht keine Information verloren: keine Aussage der Seite haengt an einer Farbe im Bild. Ueber dem Abschlussbild steht zwar Text, aber der liest sich in beiden Zustaenden gleich gut — der schlechteste Kasten kommt im Duotone wie in Vollfarbe auf 6,46:1 (verlangt 4,5:1). Es faellt hier also nichts weg, was jemand braucht. `display: none` statt `opacity: 0`, damit die Kopie in diesem Fall gar nicht erst im Weg steht. Der Navy-Kasten `.ph__duo` bleibt dabei auf voller Deckkraft: ohne geschriebenes `--tint` steht er per Vorgabewert auf 1, und das ist genau der Ruhezustand. */ .ph img.ph__color { display: none; } } .foot__claim { margin-top: 4px; font-weight: 500; } .foot__traeger { margin-top: 6px; font-size: var(--fs-2); opacity: .85; } :root { /* --- Zeiten ------------------------------------------------------- Kurz fuer alles, was auf eine Eingabe antwortet. Lang nur fuer die Spur, weil die eine Aufzeichnung ueber Zeit darstellt und sonst nicht als solche gelesen wird. */ --b-antwort: 180ms; /* Knopf, Feld, Reiter: sofort spuerbar */ --b-aufdecken: 420ms; /* Text wird sichtbar */ --b-ausziehen: 520ms; /* Register faehrt heraus */ --b-zaehlen: 900ms; /* Anzeige laeuft auf ihren Wert */ --b-aufziehen:1100ms; /* Spur zeichnet sich */ /* --- Kurven ------------------------------------------------------- Geraete haben Traegheit und Daempfung, keine Gummibaender. Der Ueberschwinger im Bestand lag bei 44 %. Ein echter Zeiger schwingt einmal um wenige Prozent ueber und steht dann. */ --b-ruhe: cubic-bezier(.22, .61, .36, 1); /* kommt an, keine Spitze */ --b-zeiger: cubic-bezier(.34, 1.06, .3, 1); /* 6 % ueber, einmal */ --b-schiene: cubic-bezier(.16, .84, .28, 1); /* Schublade auf Schiene */ --b-spur: cubic-bezier(.42, 0, .28, 1); /* Schreiber, gleichmaessig */ /* Wie weit ein Register herausfaehrt. Als Variable, weil es am Telefon weniger ist: dort ist der Weg kuerzer und die Geste kleiner. */ --b-auszug: 14px; } @media (max-width: 767px) { :root { --b-auszug: 8px; } } /* =================================================================== 1 · AUFDECKEN Text wird sichtbar, ohne sich zu bewegen. Statt zu fahren, hebt sich der Text aus dem Hintergrund heraus: er kommt aus geringerem Kontrast auf vollen. Auf einem Blatt liest sich das wie Tinte, die anzieht. Es gibt keinen Umbruch, keine Verschiebung, nichts, was das Layout waehrend der Bewegung anfasst. `clip-path` statt `opacity` waere die Alternative, aber die schneidet Unterlaengen an, wenn die Zeilenhoehe eng ist. Farbe ist hier sauberer. =================================================================== */ [data-auf] { opacity: .001; transition: opacity var(--b-aufdecken) var(--b-ruhe) var(--b-halt, 0ms); } [data-auf].b-da { opacity: 1; } /* Eine Gruppe deckt in Lesereihenfolge auf, aber deutlich enger gestaffelt als der Bestand (70 ms). 70 ms mal acht Elemente sind 560 ms, in denen die Seite fortlaufend zappelt. 34 ms halten die Gruppe als Gruppe zusammen und lesen sich als ein Vorgang, nicht als acht. */ [data-auf] { --b-halt: calc(var(--b-nr, 0) * 34ms); } /* =================================================================== 2 · AUFZIEHEN Eine Spur zeichnet sich, links nach rechts. Das ist das einzige Verhalten, das laenger als eine halbe Sekunde dauern darf, und es hat einen Grund: ein Lastgang IST eine Aufzeichnung ueber Zeit. Sich links nach rechts zu schreiben ist keine Verzierung, das ist die Sache selbst. `--b-laenge` setzt das Skript aus `getTotalLength()`, weil die echte Pfadlaenge nicht im Vorhinein bekannt ist. =================================================================== */ [data-spur] { stroke-dasharray: var(--b-laenge, 1000); stroke-dashoffset: var(--b-laenge, 1000); transition: stroke-dashoffset var(--b-aufziehen) var(--b-spur) var(--b-halt, 0ms); } [data-spur].b-da { stroke-dashoffset: 0; } /* Eine Flaeche unter der Spur folgt ihr nach, nicht gleichzeitig: die Schraffur kommt erst, wenn die Spur ueber ihr steht. */ [data-flaeche] { opacity: .001; transition: opacity 520ms var(--b-ruhe) calc(var(--b-aufziehen) * .55); } [data-flaeche].b-da { opacity: 1; } /* Marken auf der Spur (Spitze, Schwelle) erscheinen, nachdem die Spur dort vorbeigekommen ist. `--b-bei` ist der Anteil 0..1 der Spurlaenge, an dem die Marke sitzt. */ [data-marke] { opacity: .001; transition: opacity 260ms var(--b-ruhe) calc(var(--b-aufziehen) * var(--b-bei, .5) + 120ms); } [data-marke].b-da { opacity: 1; } /* =================================================================== 3 · ZAEHLEN Eine Anzeige laeuft auf ihren echten Wert und haelt. Das Zaehlen selbst macht das Skript. Hier steht nur, was waehrenddessen gilt: waehrend eine Anzeige laeuft, sitzt sie in Tabellenziffern, damit die Zeile nicht bei jedem Zwischenwert die Breite wechselt. Ohne das wackelt alles rechts daneben mit. =================================================================== */ [data-zaehl] { font-variant-numeric: tabular-nums; } /* Waehrend des Laufs steht die Anzeige eine Spur zurueck und wird beim Erreichen des Werts voll. So ist sichtbar, wann sie steht. */ [data-zaehl].b-laeuft { opacity: .72; } [data-zaehl] { transition: opacity 200ms var(--b-ruhe); } /* =================================================================== 4 · AUSZIEHEN Ein Register faehrt auf seiner Schiene heraus. Genau eine Achse. Kein Massstab, keine Deckkraft, keine Drehung. Eine Schublade laeuft in ihrer Fuehrung, sonst ist es keine Schublade. `translate` statt `transform`, damit es sich nicht mit einem `transform` schlaegt, das die Seite fuer die Anordnung schon nutzt. =================================================================== */ [data-auszug] { translate: 0 var(--b-auszug); opacity: .001; transition: translate var(--b-ausziehen) var(--b-schiene) var(--b-halt, 0ms), opacity var(--b-ausziehen) var(--b-ruhe) var(--b-halt, 0ms); } [data-auszug].b-da { translate: 0 0; opacity: 1; } /* Waagerecht, fuer alles, was seitlich einsortiert ist: Kolonne rechts auf der Grossverbraucher-Seite, Maszregeln auf der KMU-Seite. */ [data-auszug="quer"] { translate: calc(var(--b-auszug) * -1) 0; } [data-auszug="quer"].b-da { translate: 0 0; } /* =================================================================== 5 · QUITTIEREN Eine Lampe bestaetigt kurz und bleibt. Fuer Zustandswechsel, die der Nutzer ausgeloest hat: ein gewaehltes Paket, ein ausgefuelltes Pflichtfeld, ein Schritt im Formular. Der Zeiger ist das einzige, was hier ueberschwingen darf, und um 6 %. =================================================================== */ [data-quitt] { transition: background-color var(--b-antwort) var(--b-ruhe), border-color var(--b-antwort) var(--b-ruhe), color var(--b-antwort) var(--b-ruhe); } [data-quitt][aria-pressed="true"], [data-quitt][aria-selected="true"], [data-quitt]:has(:checked) { scale: 1; transition: scale 240ms var(--b-zeiger); } /* =================================================================== BERUEHRUNG STATT ZEIGEN Zwei getrennte Sachen, die oft verwechselt werden: a) Hover-Stile gehoeren in @media (hover: hover). Sonst wendet ein Telefon sie beim Antippen an und laesst sie haengen. Das steht in den Seitendateien, weil dort die Selektoren stehen. b) Wo Hover Inhalt zeigt, der sonst nicht da ist, braucht Beruehrung einen eigenen Weg. Hier ist er: auf Zeigegeraeten deckt Hover auf, auf Beruehrgeraeten ist es von vornherein da. Nicht als Notloesung, sondern weil auf einem Telefon ohnehin ein Element im Bild steht und nicht zwoelf, es also Platz hat. =================================================================== */ @media (hover: hover) and (pointer: fine) { [data-zeigt] { opacity: .001; transition: opacity var(--b-antwort) var(--b-ruhe); } :is(:hover, :focus-within) > [data-zeigt], [data-zeigt]:is(:hover, :focus-within) { opacity: 1; } } @media not all and (hover: hover) { /* Beruehrung: der Inhalt steht. Kein Antippen noetig, kein haengender Zustand moeglich. */ [data-zeigt] { opacity: 1; } } /* Die Instrumente, die vorher unter 1024 bzw. 767 px verschwunden sind, kommen zurueck. Nicht in ihrer breiten Form: die Anzeige setzt sich unter die Grafik und wird einzeilig, die Achsenbeschriftung wird kurz. Vorhandensein ist die Parität, nicht die Anordnung. */ @media (max-width: 1023px) { .readout { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .75rem; padding-top: .625rem; border-top: 1px solid var(--b-linie, rgba(28,36,75,.14)); position: static; inset: auto; width: 100%; } .readout > * { flex: 0 0 auto; } } /* =================================================================== REDUZIERTE BEWEGUNG Nicht "kuerzer", sondern aus. Wer das einstellt, hat oft einen vestibulaeren Grund, und eine schnelle Bewegung ist dann nicht besser als eine langsame. Wichtig: alles muss im Endzustand stehen. Ein Element, das seinen Endzustand ueber eine Klasse bekommt, die das Skript setzt, waere sonst dauerhaft unsichtbar. Deshalb hier ohne Klasse auf sichtbar. =================================================================== */ @media (prefers-reduced-motion: reduce) { [data-auf], [data-auszug], [data-flaeche], [data-marke], [data-zeigt] { opacity: 1 !important; translate: none !important; } [data-spur] { stroke-dashoffset: 0 !important; } [data-auf], [data-auszug], [data-flaeche], [data-marke], [data-spur], [data-quitt], [data-zaehl] { transition-duration: 1ms !important; transition-delay: 0ms !important; } } /* Verweis auf eine Seite, die noch Entwurf ist: sieht aus wie ein Link, ist keiner, weil das Ziel nicht oeffentlich ist. Zum Freischalten wieder daraus machen. */ .ist-entwurf { opacity: .62; font-weight: 400; } [data-entwurf] { cursor: default; } /* Die Wortmarke wird nicht grossgeschaltet. .cond, .eyebrow und .dsp setzen Versalien; darin wuerde aus DGfE ein DGFE, und das kleine f gehoert zum "fuer". Ein Markenname traegt seine Schreibweise auch in einer Versalzeile. */ .wm { text-transform: none; }