/* Das Grundmaterial der Seite.
ERZEUGT VON werkzeug/material.py - NICHT VON HAND AENDERN.
Hier steht nur, was auf jeder Seite gilt. Was eine einzelne Abbildung
braucht, steht bei ihr im Stylesheet der Seite.
Drei Regeln halten das zusammen:
1 Ein Licht. Alles faellt von oben links ein. Glanz sitzt oben, Schatten
unten rechts, ohne Ausnahme.
2 Zwei Kanten. Ein Koerper hat oben eine helle und unten eine dunkle -
erst beide zusammen machen aus einer Flaeche einen gefraesten Gegenstand.
3 Zwei Schatten. Einer eng am Rand, einer weit darunter. Ein einzelner
Schatten laesst ein Ding schweben statt stehen. */
/* --- Das Korn ---------------------------------------------------------------
Ein Bildschirm hat keine Oberflaeche. Jede Flaeche ist mathematisch glatt,
und genau das liest das Auge als billig. Ein sehr feines Korn ueber der
ganzen Seite nimmt diese Glattheit heraus, ohne dass man es benennen kann -
man sieht es nicht, man vermisst es nur, wenn es fehlt.
Es haengt an html::after und nicht an body::after: body::after ist auf der
Startseite schon belegt. Ohne Mischmodus, weil eine fixierte Ebene mit
mix-blend-mode die ganze Seite bei jedem Bild neu zusammensetzen laesst -
auf schwachen Geraeten kostet das mehr, als das Korn bringt. */
html::after{
content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
opacity:.055;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
background-size:160px 160px}
/* Wo jemand Bewegung abbestellt hat, ist auch das Korn eine Unruhe zu viel */
@media(prefers-reduced-motion:reduce){html::after{opacity:.03}}
/* Der picture-Wrapper aus werkzeug/bilder.py darf keine eigene Box aufmachen,
sonst verschiebt er alles, was heute auf das img zielt - etwa .sr-bild mit
position:absolute. Die Regel steht hier und nicht in bilder.py, weil diese
Datei von material.py erzeugt wird: ein Anhaengen von aussen waere beim
naechsten Lauf wieder weg. */
picture{display:contents}
/* Die Vorlagen sind unsichtbar und nehmen keinen Platz ein */
.m-defs{position:absolute;width:0;height:0;overflow:hidden}
/* --- Oberflaechen fuer Zeichnungen. Jede Seite kann sie benutzen. --- */
.m-koerper{fill:url(#mStahl);filter:url(#mFase)}
.m-glanz{fill:url(#mGlanz)}
.m-guss{fill:url(#mGuss);filter:url(#mFase)}
.m-glas{fill:url(#mGlas)}
.m-glas-kante{fill:none;stroke:url(#mKante);stroke-width:1.2}
.m-papier{fill:url(#mPapier);stroke:rgba(224,239,250,.55);stroke-width:1.3;stroke-linejoin:round}
.m-kante-fein{fill:none;stroke:url(#mKante);stroke-width:1}
.m-schliff{fill:#FFFFFF;filter:url(#mSchliff);opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.m-steht{filter:url(#mBoden)}
.m-leuchtet{filter:url(#mLeuchten)}
/* --- Die Schaltflaeche: das einzige Bauteil, das auf jeder Seite steht --- */
/* --- Die Schaltflaechen ------------------------------------------------------
Rueckmeldung: die Riffelung stoert. Zu Recht. Sie war als Schliff gedacht,
ein repeating-linear-gradient mit 4px Abstand - aber echter Schliff liegt
unter der Erkennungsschwelle. Bei 4px sieht man die Streifen einzeln, und
dann ist es Cord und kein Metall. Ausserdem legt die Seite ohnehin Filmkorn
ueber alles: die Textur war doppelt gemoppelt.
An ihrer Stelle steht jetzt ein Lichtmodell aus drei Schichten:
1 Ein Glanzpunkt oben links, der zur Mitte hin abfaellt. Er macht aus
der Flaeche einen gewoelbten Koerper - das Auge liest die Kruemmung,
ohne dass man sagen koennte, woran.
2 Ein kurzer Glanz auf der Oberkante, der nach einem Drittel erlischt.
3 Ruecklicht an der Unterkante: der Grund wirft Licht zurueck. Das ist
das Detail, das einen Gegenstand von einem farbigen Rechteck trennt -
eine tote Unterkante sieht immer nach Aufkleber aus.
Dazu ein Koerperverlauf mit fuenf Halten statt zwei, damit der Abfall
nicht linear ist. Und die beiden Kanten aus Regel 2 bleiben. */
/* --- Das Chassis -------------------------------------------------------------
Ein Knopf traegt .knopf und sagt mit data-ton, welche Fassung er ist.
Vorher las das Stilblatt die Fassung aus der Umgebung ab (".hero
.btn-primary" ist Graphit) - und diese Listen musste jemand pflegen.
Genau dort stand schon einmal der Fehler, den der Quelltext der
Startseite dokumentiert: in zwei Eintraegen fehlte das ::after, und ein
Knopf war unsichtbar. Zwei weitere Eintraege, .ak-schluss und .rf-cta,
zeigten zuletzt auf Markup, das es nirgends mehr gibt.
Zwei Klassen Spezifitaet bleiben noetig: die Seiten setzen denselben
Grund noch einmal mit zwei Klassen, und der Attributselektor muss
gleichauf stehen. Er gewinnt, weil diese Datei zuletzt im Kopf liegt.
Gemessen: oberhalb von zwei Klassen setzt niemand einen Grund.
Ein Knopf ohne data-ton bekommt Blau. Nicht aus Bequemlichkeit, sondern
als Fangnetz: ein vergessenes Attribut soll einen falsch gefaerbten
Knopf ergeben, keinen unsichtbaren. */
.knopf[data-ton="blau"],.knopf:not([data-ton]){
background:
radial-gradient(88% 118% at 30% -22%,rgba(255,255,255,.46) 0%,rgba(255,255,255,.15) 30%,rgba(255,255,255,0) 62%),
linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.09) 13%,rgba(255,255,255,.02) 30%,rgba(255,255,255,0) 42%),
linear-gradient(0deg,rgba(198,228,255,.26) 0%,rgba(198,228,255,.06) 15%,rgba(198,228,255,0) 33%),
linear-gradient(180deg,#63A9FF 0%,#4491F5 13%,#3182EE 37%,#2570D6 62%,#1D60BE 86%,#18539F 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.38),
inset 0 -1px 0 rgba(6,32,66,.45),
0 0 0 1px rgba(255,255,255,.14),
0 1px 3px rgba(6,20,27,.2),
0 12px 34px -8px rgba(47,128,237,.62)}
.knopf[data-ton="blau"]:hover,.knopf:not([data-ton]):hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.38),
inset 0 -1px 0 rgba(6,32,66,.45),
0 0 0 1px rgba(255,255,255,.22),
0 2px 5px rgba(6,20,27,.22),
0 22px 56px -8px rgba(47,128,237,.74)}
/* Drei Fassungen derselben Schaltflaeche: Blau, Graphit, Weiss. Alle drei
bekommen dieselben zwei Kanten und denselben Schliff. Welche ein Knopf
traegt, steht am Knopf und nicht mehr an seinem Behaelter. */
/* Graphit: Kopfzeile, Hero, Cockpit, Abschluss */
.knopf[data-ton="graphit"]{
background:
radial-gradient(88% 118% at 30% -20%,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 32%,rgba(255,255,255,0) 62%),
linear-gradient(180deg,rgba(255,255,255,.21) 0%,rgba(255,255,255,.07) 14%,rgba(255,255,255,.015) 32%,rgba(255,255,255,0) 44%),
linear-gradient(0deg,rgba(150,192,232,.23) 0%,rgba(150,192,232,.055) 16%,rgba(150,192,232,0) 34%),
linear-gradient(180deg,#3E4850 0%,#2A343B 14%,#172026 38%,#0B1116 62%,#070C10 86%,#04070A 100%);
box-shadow:
0 1px 0 rgba(255,255,255,.44) inset,
0 -1px 0 rgba(0,0,0,.75) inset,
0 0 0 1px rgba(47,128,237,.20),
0 2px 4px -1px rgba(2,8,12,.5),
0 14px 30px -14px rgba(2,8,12,.7),
0 8px 30px -8px rgba(47,128,237,.42)}
.knopf[data-ton="graphit"]:hover{
box-shadow:
0 1px 0 rgba(255,255,255,.52) inset,
0 -1px 0 rgba(0,0,0,.75) inset,
0 0 0 1px rgba(47,128,237,.34),
0 3px 6px -1px rgba(2,8,12,.55),
0 18px 38px -14px rgba(2,8,12,.72),
0 14px 44px -8px rgba(47,128,237,.62)}
/* Weiss auf dunklem Grund: Vier Wege, Abschluss, Beweis, Zusammenarbeit */
.knopf[data-ton="weiss"]{
background:
radial-gradient(88% 118% at 30% -20%,rgba(255,255,255,1) 0%,rgba(255,255,255,.66) 30%,rgba(255,255,255,0) 62%),
linear-gradient(0deg,rgba(112,152,194,.24) 0%,rgba(112,152,194,.06) 16%,rgba(112,152,194,0) 34%),
linear-gradient(180deg,#FFFFFF 0%,#F9FBFD 13%,#EDF2F7 37%,#DFE7EF 62%,#D3DDE7 86%,#CAD5E1 100%);
box-shadow:
0 1px 0 rgba(255,255,255,1) inset,
0 -1px 0 rgba(37,55,69,.2) inset,
0 0 0 1px rgba(255,255,255,.22),
0 2px 4px -1px rgba(0,0,0,.4),
0 14px 32px -16px rgba(0,0,0,.62),
0 10px 40px -10px rgba(120,196,255,.42)}
.knopf[data-ton="weiss"]:hover{
box-shadow:
0 1px 0 rgba(255,255,255,1) inset,
0 -1px 0 rgba(37,55,69,.2) inset,
0 0 0 1px rgba(255,255,255,.34),
0 3px 6px -1px rgba(0,0,0,.44),
0 18px 38px -16px rgba(0,0,0,.66),
0 16px 54px -10px rgba(120,196,255,.62)}
/* --- Das Lineal -------------------------------------------------------------
Die Massleiste an der Unterkante der Kopfzeile. Sie war auf der Startseite
gebaut und stand dort allein - auf keiner der sechs anderen Seiten.
Gemessen lohnt sie sich dort, wo es etwas zu messen gibt:
index 25916 px Scrollweg, 14 Abschnitte
fallstudien 23895 px, 8 Abschnitte
creative-engine 13123 px, 14 Abschnitte
datenschutz 7440 px, keine Abschnitte -> nur Fuellstand
danke, impressum, check unter 1600 px -> kein Band
Die Gestalt steht hier, damit sie einen Ort hat. Das Verhalten schreibt
werkzeug/lineal.py in jede Seite - inline, wie alles Skript in diesem
Projekt.
Rueckfallwerte sind Pflicht, nicht Vorsicht: --font-technik fehlt auf
fallstudien, --ease-re fehlt auf creative-engine. Ohne Rueckfall waere die
Beschriftung dort ohne Schrift und der Uebergang ohne Kurve. */
.lineal{position:absolute;left:0;right:0;bottom:-1px;height:2px;
pointer-events:none;background:rgba(37,55,69,.08)}
.lineal-fuell{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);
background:linear-gradient(90deg,var(--cta-blue,#2F80ED),var(--electric-cyan,#66E3FF));
box-shadow:0 0 10px rgba(102,227,255,.35)}
/* Die Striche sind weg (Inhaber, 2026-09-22, Doc 64): senkrecht zum Balken
haben sie nur irritiert. Die Marken bleiben im Markup, damit das Band
seine Kapitel weiter kennt. */
.lineal-tick{display:none;position:absolute;top:-4px;width:1px;height:10px;margin-left:-.5px;
background:rgba(37,55,69,.22);
transition:background .3s var(--ease-re,cubic-bezier(.22,.61,.36,1)),
height .3s var(--ease-re,cubic-bezier(.22,.61,.36,1))}
.lineal-tick::after{content:attr(data-k);position:absolute;top:13px;left:50%;
transform:translateX(-50%);
font-family:var(--font-technik,var(--font-body,system-ui));
font-size:8px;letter-spacing:.18em;text-transform:uppercase;
color:var(--blue-steel,#5A7085);white-space:nowrap;opacity:0;
transition:opacity .3s var(--ease-re,cubic-bezier(.22,.61,.36,1))}
.lineal-tick.on{background:var(--cta-blue,#2F80ED)}
.lineal-tick.hier{background:var(--electric-cyan,#66E3FF);height:12px}
#hdr:hover .lineal-tick.hier::after{opacity:.85}
/* Am Rand richtet sich die Beschriftung nach innen aus.
Sie steht sonst mittig ueber ihrem Strich und bricht nicht um. Der
letzte Strich sitzt aber bei 100 Prozent - eine Beschriftung von bis
zu 22 Zeichen ragte dort mit ihrer halben Breite ueber die Seite
hinaus und machte sie breiter als das Fenster. Gemessen auf
creative-engine: 62 px waagerechter Ueberlauf, obwohl kein
sichtbares Element ueber den Rand ging - die Beschriftung ist
durchsichtig, aber sie belegt Platz.
Die Klassen setzt werkzeug/lineal.py beim Platzieren. */
.lineal-tick.rand-r::after{left:auto;right:0;transform:none}
.lineal-tick.rand-l::after{left:0;transform:none}
@media(max-width:820px){.lineal-tick::after{display:none}}
@media(prefers-reduced-motion:reduce){
.lineal-fuell,.lineal-tick{transition:none}
}
/* --- Das Typenschild ---------------------------------------------------------
Das kleine Schild an einer Maschine: Typ, Nummer, Leistung. Angeschraubt,
nicht aufgedruckt.
Es ist der Gegensatz zur Punze aus Stufe 3, und beide zusammen ergeben
die Logik: die Punze geht IN den Koerper hinein, das Schild sitzt DARAUF.
Deshalb hat das Schild die Kanten eines erhabenen Teils - hell oben,
dunkel unten - und seine Schrift ist graviert, also andersherum: dunkler
Buchstabe, heller Lichtsaum an der unteren Lippe der Rille.
Der Begriff stand schon im Haus. Die Karte im Beweis-Karussell heisst
.ga-schild, und ihr Etikett hat bereits Schildmasse: 9,5 px, versal,
0,2 em gesperrt. Es hatte nur keinen Koerper.
Zwei Werkstoffe wie bei der Fassung. Ein Schild auf Guss ist aus
dunklerem Material als eines auf Stahl - sonst klebt es auf, statt zu
sitzen. */
.typenschild{display:inline-flex;align-items:baseline;gap:.75em;
--ecke:4px;padding:.5em .8em .45em;
border-radius:var(--ecke) var(--ecke) calc(var(--ecke) * 3.4) var(--ecke);
font-family:var(--font-technik,var(--font-body,system-ui));
font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
white-space:nowrap}
.typenschild,[data-werkstoff="stahl"] .typenschild{
background:linear-gradient(148deg,#F4F7FA 0%,#DDE4EB 26%,#EFF3F7 52%,#C9D3DC 78%,#E6EBF0 100%);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
0 -1px 0 rgba(37,55,69,.18) inset,
0 1px 2px rgba(14,28,38,.14),
0 8px 18px -12px rgba(14,28,38,.4);
color:rgba(37,55,69,.74);
text-shadow:0 1px 0 rgba(255,255,255,.8)}
[data-werkstoff="guss"] .typenschild,.typenschild[data-werkstoff="guss"]{
background:linear-gradient(148deg,#2C3A46 0%,#1C2833 26%,#25333F 52%,#131D26 78%,#22303B 100%);
box-shadow:0 1px 0 rgba(214,240,255,.16) inset,
0 -1px 0 rgba(0,0,0,.6) inset,
0 1px 2px rgba(1,5,8,.4),
0 8px 18px -12px rgba(1,5,8,.6);
color:rgba(159,220,251,.7);
text-shadow:0 1px 0 rgba(0,0,0,.6)}
/* Typ, Nummer, Leistung - in dieser Reihenfolge, durch feine Striche
getrennt wie die Felder eines gestanzten Schilds. */
.typenschild b{font-weight:600;letter-spacing:.2em}
.typenschild u{text-decoration:none;opacity:.62}
.typenschild i{font-style:normal;opacity:.62}
.typenschild>*+*{padding-left:.75em;border-left:1px solid currentColor;
border-left-color:color-mix(in srgb,currentColor 22%,transparent)}
/* --- Die Fassung -------------------------------------------------------------
Das Gehaeuse, in dem ein Bildschirmfoto sitzt. Ein nacktes Browserfenster
mit Schlagschatten sieht aus wie das jeder anderen Seite; ein Bild in
dieser Fassung sieht nach diesem Haus aus.
ERFUNDEN IST HIER NICHTS. Die Fassung stand fertig auf fallstudien.html
als .vt-gehaeuse - mit der schweren Ecke, einem neunfach gestuften
Stahlverlauf, zwei Kanten, drei Schatten und einer Wange dahinter, die im
Raum zuruecksteht. Sie hatte nur keinen Namen und stand ein zweites Mal,
anders gebaut, als .sr-panel auf der Startseite.
ZWEI WERKSTOFFE, EINE FORM
Die beiden vorhandenen Gehaeuse sind aus verschiedenem Material: das eine
polierter Stahl, das andere dunkler Guss. Beides steht in der
Materiallehre, beides ist richtig - je nachdem, worauf es liegt. Also
nicht eins davon wegwerfen, sondern die Form teilen und den Werkstoff
ansagen, genau wie beim Knopf die Fassung.
DIE ECKE
Ein Verhaeltnis fuer alle: 1 zu 3,4. Die Ecke unten rechts ist die
lichtferne - an einem Gussteil waere sie die abgeschliffene. Gemessen
stand hier vorher 2,86 am Gehaeuse, 3,40 an der Vitrine und 2,75 an der
Wange; jetzt ist es ueberall 3,40, abgeleitet aus --ecke. */
.fassung{position:relative;--ecke:14px;
padding:clamp(5px,.5vw,8px);
border-radius:var(--ecke) var(--ecke) calc(var(--ecke) * 3.4) var(--ecke);
transform-style:preserve-3d;backface-visibility:hidden}
.fassung[data-werkstoff="stahl"]{
background:linear-gradient(148deg,#FDFEFF 0%,#E4EAF0 11%,#A9B6C1 25%,#FAFCFD 38%,
#C6D0D9 50%,#8D9BA8 63%,#EFF3F7 76%,#9FADB9 88%,#D5DDE4 100%);
box-shadow:0 1px 0 rgba(255,255,255,.95) inset,
0 -1px 0 rgba(20,34,46,.22) inset,
0 0 0 1px rgba(255,255,255,.3) inset,
0 0 0 1px rgba(46,58,70,.16),
0 2px 6px -2px rgba(1,5,8,.4),
0 26px 48px -26px rgba(1,5,8,.7),
0 60px 90px -50px rgba(1,5,8,.85)}
.fassung[data-werkstoff="guss"]{
background:linear-gradient(148deg,#334656 0%,#22323F 14%,#152230 34%,
#0F1B26 52%,#0C161F 72%,#1A2836 88%,#101C27 100%);
box-shadow:0 1px 0 rgba(214,240,255,.16) inset,
0 -1px 0 rgba(0,0,0,.6) inset,
0 0 0 1px rgba(46,58,70,.5),
0 2px 6px -2px rgba(1,5,8,.55),
0 26px 48px -26px rgba(1,5,8,.75),
0 60px 90px -50px rgba(1,5,8,.9)}
/* Der Schirm liegt in der Fassung, nicht darauf: der Innenschatten oben ist
die Kante, unter die er geschoben wurde. */
.fassung-schirm{position:relative;overflow:hidden;isolation:isolate;
border-radius:calc(var(--ecke) * .72) calc(var(--ecke) * .72)
calc(var(--ecke) * 2.45) calc(var(--ecke) * .72);
box-shadow:inset 0 2px 7px rgba(1,5,8,.36),
inset 0 0 0 1px rgba(20,34,46,.32),
0 1px 0 rgba(255,255,255,.66),
0 -1px 0 rgba(37,55,69,.08) inset}
/* Die Wange steht im Raum dahinter. Ohne sie ist das Gehaeuse eine Flaeche
mit Rand; mit ihr ist es ein Koerper, der Tiefe hat. */
.fassung-wange{position:absolute;left:3px;top:-1px;right:-8px;bottom:-6px;
z-index:-1;transform:translateZ(-13px);
border-radius:calc(var(--ecke) * 1.15) calc(var(--ecke) * 1.15)
calc(var(--ecke) * 3.9) calc(var(--ecke) * 1.15);
background:linear-gradient(128deg,#8B99A6 0%,#6B7A87 34%,#4E5C69 70%,#748491 100%);
box-shadow:0 0 0 1px rgba(20,34,46,.34),0 12px 22px -14px rgba(1,5,8,.5)}
.fassung[data-werkstoff="guss"] .fassung-wange{
background:linear-gradient(128deg,#2A3844 0%,#1B2731 34%,#121C25 70%,#22303C 100%)}
/* --- Der Messwert -----------------------------------------------------------
Wert, Einheit, Grundlage - in dieser Reihenfolge, immer.
Zahlen sind die Substanz dieser Firma, und sie hatten bisher sechs
Bauformen fuer dieselbe Sache. Gezaehlt ueber alle Seiten: 25 Messwerte
in sechs Gestalten, und nur zwei davon nennen ihre Grundlage.
Das Vorbild stand schon da, im Beweis-Karussell der Startseite:
~315h
Buerozeit zurueck im Monat, von 500 auf rund 185
Wert, Einheit, Grundlage. Mehr braucht es nicht, und weniger ist eine
Behauptung statt einer Messung.
Diese Regel setzt KEINE Schriftgroessen. Ein Messwert steht mal 40 px
hoch im Karussell und mal 104 px im Kurz-Check; die Groesse gehoert an
den Ort, die Form gehoert hierher. Was sie festlegt: die Reihenfolge,
die Grundlinie, die Anzeigeschrift fuer den Wert, die Brotschrift fuer
die Grundlage, und Tabellenziffern.
Wer einen neuen Messwert schreibt, schreibt ihn so - und er sitzt. */
.messwert{display:flex;align-items:baseline;flex-wrap:wrap;
font-family:var(--font-display);line-height:1;
font-variant-numeric:tabular-nums}
.messwert>b{font-weight:400;letter-spacing:-.03em}
.messwert>u{text-decoration:none}
.messwert>span{flex-basis:100%;font-family:var(--font-body);letter-spacing:0}
/* --- Die Zaehlschrift -------------------------------------------------------
Der Quelltext der Startseite behauptete an einer Stelle: "FAQ-Ziffern in
Mono, der Zaehlschrift dieser Seite". Beides stimmte nicht. Es gibt kein
Mono im Projekt - ausgeliefert werden Inter und Spectral - und
--font-technik, das dort steht, ist zeichengleich mit --font-body.
Gemessen wurde deshalb erst, ob es ueberhaupt ein Problem gibt. Ergebnis:
ein kleines, und nur an einer Stelle.
Spectral zweistellige Zahlen schwanken um 0,00 px in der Breite.
Die Ziffern sind schon gleich breit. Nichts zu tun.
Inter dieselbe Messung ergibt 4,81 px bei 10 px Schriftgroesse.
Eine Zahl, die hochzaehlt, wackelt dort sichtbar.
Die Zaehlschrift ist also kein Schriftschnitt, sondern ein Ziffernsatz:
Inter mit Tabellenziffern. Das ausgelieferte Inter kann sie - 1111111111
waechst von 162,70 auf 259,38 px, wenn man sie einschaltet.
Der Name stand schon im Haus: drei Unterseiten kennen eine Klasse .zahl.
Nur benutzt hat sie niemand, und die Startseite loeste dasselbe mit
achtzehn eigenen Selektoren, von denen vierzehn ins Leere zeigten. */
.zahl{font-variant-numeric:tabular-nums}
/* --- Die Kapitelmarke -------------------------------------------------------
Das Zeichen plus ein Etikett, vor jeder Ueberschrift. Siebzehnmal auf drei
Seiten - das ist die Stelle, an der aus einer Seite ein Takt wird.
Gemessen lag hier weniger Chaos als erwartet und trotzdem genug: vierzehn
der siebzehn trugen schon dieselbe Schrift in derselben Groesse. Die Drift
sass in der Farbe und in drei Ausreissern.
Farben fuenf Werte fuer zwei Aussagen. Auf dunklem Grund standen
#81D4FA und #9FDCFB nebeneinander - dreissig Einheiten
auseinander, also kein Unterschied, den jemand gemeint hat.
Groesse 19 px vierzehnmal, dazu 20, 23 und 12 px. Die drei stehen
strukturell genau wie die anderen: ein span vor einer
Ueberschrift. Also dieselbe Sache, nur verrutscht.
ABWEICHUNG VOM PLAN, MIT ABSICHT
Im Plan stand "Etikett in der Technikschrift", also Mono und versal. Das
war geschrieben, bevor gemessen war. Das Haus hat laengst eine Stimme fuer
die Kapitelmarke - 19 px, gemischt, in der Anzeigeschrift - und vierzehn von
siebzehn sprechen sie schon. Die gegen ein Mono-Versal-Etikett zu
tauschen hiesse, etwas Eigenes gegen etwas Uebliches einzutauschen.
Bleibt also die Schrift; neu sind das Zeichen und ein Satz Farben.
Zur Anzeigeschrift: --font-display nennt zuerst "The Seasons". Die Datei
dazu gibt es im Projekt nicht, und kein @font-face laedt sie. Gemessen
rendert die Variable zeichengleich mit Spectral. Wer die Seite baut und
The Seasons lokal installiert hat, sieht also etwas anderes als jeder
Besucher. Das ist eine Entscheidung, keine Aufraeumarbeit - deshalb steht
es hier als Notiz und nicht als Aenderung.
Das Zeichen ist hier nicht gepraegt, sondern voll. Eine Punze braucht
einen Koerper, in den sie geht - auf dem Grund der Seite gibt es keinen.
Es nimmt die Farbe des Etiketts ueber currentColor, und genau dafuer
wurde es in Stufe 1 ueberhaupt zum Vektor.
Kein display, kein Rand, kein Abstand nach aussen: die Abschnitte bringen
ihre eigenen Abstaende mit, und die sollen bleiben. Das Zeichen haengt als
inline-Element in der Zeile, damit sich am Kasten der Marke nichts
aendert - er wird nur breiter. */
.kapitel{font-family:var(--font-display);font-size:19px;font-weight:400;
letter-spacing:.01em;text-transform:none;color:var(--kap-farbe,#2F80ED)}
.kapitel svg.kz{height:.82em;width:auto;flex:none;
vertical-align:-.1em;margin-right:.42em}
.kapitel[data-grund="dunkel"]{--kap-farbe:#9FDCFB}
.kapitel[data-ton="glut"]{--kap-farbe:#D9663A}
.kapitel[data-ton="glut"][data-grund="dunkel"]{--kap-farbe:#FFB088}
/* --- Der Pfeil --------------------------------------------------------------
Ein Zeichen fuer alle. Vorher standen 43 Pfeile von Hand im Markup, in zwei
Pfadvarianten und zehn verschiedenen Huellen: Strichstaerke 1.6, 1.8 und 2,
mal mit stroke-linejoin, mal ohne, mal mit Groesse im Attribut, meist ohne.
Gemessen kam derselbe Pfeil auf der Startseite mit 1,00 px Strich heraus,
auf der Creative Engine mit 1,33 und im Kurz-Check mit 1,20. Drei Gewichte
fuer dieselbe Geste - nichts, was jemand entschieden haette.
Der Strich waechst mit dem Zeichen: 1.6 in einem Kasten von 24 ergibt bei
15 px genau ein Pixel. Nach dieser Rechnung hat die Startseite schon
gezeichnet, und die Unterseiten ziehen jetzt nach.
Die Klasse heisst pfeil und nicht pf. Kurz war sie schon vergeben: .pf ist
auf der Startseite ein Abschnitt mit min-height:100vh, und die Pfeile
wuchsen prompt auf 805 Pixel Hoehe. Ein Bauteilname muss dem ganzen Haus
gehoeren, nicht nur der Datei, in der man ihn gerade schreibt.
svg.pfeil, nicht .pfeil: eine Seite, die ihren Pfeil anders will, kommt mit zwei
Klassen darueber. Das soll sie koennen - aber als Entscheidung, nicht aus
Versehen. */
svg.pfeil{fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
/* --- Die Punze ---------------------------------------------------------------
Das Zeichen, in den Knopf geschlagen statt auf ihn gelegt.
Zwei Lagen desselben Pfades: die untere hell und um ein Stueck nach unten
versetzt, die obere dunkel und deckend. Daraus liest das Auge eine
Vertiefung - Schatten oben, Licht unten. Das ist genau umgekehrt zum
Koerper des Knopfes, der oben glaenzt, und darum liest man es als
eingeschlagen und nicht als aufgeklebt. Regel 1 der Seite bleibt gewahrt:
ein Licht, von oben links.
Zwei