/* ============================================================================= ÜBERNOMMEN aus design-system/traveto/base.css — NICHT VON HAND ÄNDERN. Quelle ist das Design-System; hier liegt nur ein Spiegel, damit das Theme ohne den Nachbarordner deploybar ist. Ändern heißt: dort ändern, dann »bash deploy/sync-design-system.sh« und committen. ============================================================================= */ /* ============================================================================= TRAVETO — Base Layer Schriftimport, Reset, Element-Defaults, Typo-Rollen, Layout-Primitiven. Setzt tokens.css voraus. ============================================================================= */ /* ----------------------------------------------------------------------------- Schrift — drei variable Familien, drei getrennte Aufgaben. Bricolage Grotesque Display und Ueberschriften. Grotesk mit sichtbaren Tintenfallen, gemischten Strichstaerken und echter opsz-Achse: bei 88px eine andere Zeichnung als bei 30px. Laut genug fuer eine Schlagzeile, ohne Zierschrift zu sein. Archivo Fliesstext und Bedienoberflaeche. Gothic-Werkschrift aus der Linie amerikanischer Wegweiserschriften — grosse x-Hoehe, offene Punzen, bei 12px noch lesbar. Die wdth-Achse traegt das kleine Versalien-Label. JetBrains Mono Daten und deklarierte Werte: Koordinaten, Distanzen, Zeiten, IDs, Hexwerte, Tokennamen, CSS-Werte und Messzahlen. Nie Fliesstext, nie Ueberschrift, nie ein Wort ohne Zahl oder Kennung daneben. ----------------------------------------------------------------------------- */ /* DER SCHRIFTIMPORT STEHT NICHT MEHR HIER, sondern in schriften-cdn.css, und die laden nur die BELEGBLAETTER. Grund: base.css wird ausgeliefert — das Marketing-Theme spiegelt es, die Anwendung importiert es direkt —, und ein @import auf fonts.googleapis.com uebertraegt die IP jedes Nutzers an Google (LG Muenchen I, 3 O 17493/20). Das Theme hat den Import beim Spiegeln entfernt, also die Kopie repariert statt der Quelle; die Anwendung bekam ihn dadurch ungefiltert, mit 21 zusaetzlichen @font-face-Regeln auf fonts.gstatic.com im fertigen Build. Wer base.css ausliefert, bringt seine Schriften selbst mit. */ /* ----------------------------------------------------------------------------- Reset ----------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Graustufen-Antialiasing angefordert. Ob der Browser es liefert, entscheidet er selbst: unter Windows zeichnet Chrome weiterhin Subpixel, und im Rendering sind farbige Saeume messbar. Die Zeile ist eine Bitte, keine Zusage. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--text-body-size); line-height: var(--text-body-lh); letter-spacing: normal; font-synthesis-weight: none; font-variation-settings: "wdth" 100; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } /* Ueberschriften laufen in der Displayschrift. Bis Stueck 2, Runde 5 stand das NUR in den Klassen .t-display/.t-h1/.t-h2/.t-h3 — und die benutzt kein einziges Belegblatt. Alle H1 bis H3 erbten damit --font-text (Archivo), und genau das Merkmal, mit dem PALETTE.md die Abgrenzung gegen Going begruendet (schmale Grotesk mit Tintenfallen gegen normalbreite geometrische), war nirgends gezeichnet. Die Schrift war geladen, sie wurde nur nie angefordert. */ /* Die ELEMENTE tragen ihre Stufe, nicht nur die .t-*-Klassen. Bis Runde 5b setzte base.css hier keine einzige Groesse — jedes Blatt hat seine Ueberschriften deshalb selbst deklariert, und genau dabei sind sie auseinandergelaufen (25 statt 30, 1.05 statt 1.12). Eine Stufe, die nur ueber eine Hilfsklasse erreichbar ist, wird auf Dauer nicht benutzt. */ h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-bold); font-variation-settings: "opsz" var(--opsz-h2), "wdth" var(--wdth-display); } /* Jede Stufe traegt ihr DEKLARIERTES Gewicht (PALETTE.md Paragraph 7: Display 800, H1 700, H2 600, H3 600). Bis Runde 6 gaben die ELEMENTE allen dreien 700, waehrend die gleichnamigen KLASSEN .t-h2/.t-h3 600 setzten — derselbe Rang in zwei Gewichten, je nachdem ob man das Element oder die Hilfsklasse benutzt, und das mitten in der Datei, die beide definiert. */ h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-lh); font-weight: var(--weight-bold); font-variation-settings: "opsz" var(--opsz-h1), "wdth" var(--wdth-display); } h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-lh); font-weight: var(--weight-semibold); font-variation-settings: "opsz" var(--opsz-h2), "wdth" var(--wdth-heading); } h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-lh); font-weight: var(--weight-semibold); font-variation-settings: "opsz" var(--opsz-h3), "wdth" var(--wdth-heading); } /* UEBER EINER UEBERSCHRIFT STEHT LUFT — und zwar EIN Wert, nicht der jeweilige Restrand des Blocks davor. Bis Runde 10 gehoerte dieser Abstand jedem vorangehenden Bauteil einzeln, also niemandem: dieselbe Beziehung mass ueber die sechs Blaetter 34,0 / 36,0 / 39,4 / 41,4 / 52,0 px — und auf fotografie.html 0,0, weil "Und danach ansehen — vergroessert" auf der letzten Zeile der Liste darueber sass. Es ist eine UNTERGRENZE, kein Zuschlag: im normalen Fluss faellt margin-top mit dem margin-bottom des Vorgaengers zusammen, der groessere gewinnt. Wo ein Blatt mehr Luft will, behaelt es sie. */ :is(h2, h3):not(:first-child) { margin-top: var(--kopf-luft); } /* ALLE DREI ACHSEN, nicht nur das Gewicht. In Runde 6 stand hier der Kommentar, dass Element und Hilfsklasse denselben Rang in zwei GEWICHTEN setzten — das wurde repariert. Breite und optische Groesse blieben stehen:

erbte "wdth" 78 aus der Gruppenregel, .t-h2 setzte 88. Gemessen an identischem Text: 223,03 px gegen 253,83 px, ein Unterschied von 13,8 %. Fuenf Blaetter zeichneten ihre H2 als Element, foundation.html als Klasse — dasselbe Wort in zwei Schriftbildern. Eine Achse zu pruefen und die anderen stehen zu lassen ist dieselbe Sorte Fehler wie eine Fundstelle zu pruefen und die anderen stehen zu lassen. */ /* Optische Kante. Grosse Grade tragen eine Vorbreite, die sie sichtbar rechts der Fliesstextkante absetzt. Der negative Erstzeileneinzug holt sie zurueck. Er ist ein KOMPROMISS und kein exakter Ausgleich: die Vorbreite haengt am Anfangsbuchstaben. Bei -0,055em ueberschoss die Korrektur bei Diagonalen (A, V) um bis zu 3 px nach links und unterschoss bei Staemmen (H, n) — gemessene Spanne 177..182 gegen eine Satzkante von 180. WAS DAS MITTEL KANN UND WAS NICHT: text-indent greift ausschliesslich auf die ERSTE Zeile. Eine dreizeilige Ueberschrift behaelt darunter ihre volle Spanne — auf dem Blatt gemessen 179,50 / 182,00 / 180,50, also 2,50 px. Hier stand bis Runde 5 "bei -0,03em bleibt die Spanne unter 2 px"; das war fuer die erste Zeile gemeint und als Zusage fuer die Ueberschrift hingeschrieben. Es korrigiert einen Fehler pro Block, den es pro Zeile gibt. Exakt geht es in CSS nur pro Buchstabe, und das waere teurer als der Fehler. Nicht auf zentrierten Satz: dort gibt es keine linke Satzkante, an der eine Rundung haengen koennte, und die Einrueckung verschoebe nur die Mitte. */ h1, h2 { text-indent: -0.03em; } :is(h1, h2)[style*="center"], .satz--mitte, [align="center"] :is(h1, h2), .b--tinte .satz { text-indent: 0; } /* Umbruch. `pretty` verhindert die EINZELWORTZEILE am Absatzende — mehr nicht: eine letzte Zeile mit einem Fuenftel der Satzbreite bleibt zulaessig. Hier stand dazu "kommt auf dem Blatt dreimal vor (21 / 20 / 24 %)". Die Reihe reproduzierte auf keinem der sechs Blaetter: gemessen sind es 0 / 4 / 2 / 3 / 3 / 10 Faelle, und auf foundation.html geht einer bis 12 %. Eine von Hand nachgezaehlte Reihe in einer geteilten Datei — dieselbe Sorte wie die Reisskanten-Reihe, die Runde 17 aus startseite.html genommen hat. Was zaehlt, ist die Untergrenze, und die misst blatt-pruefung.js Pruefung (9). Hier stand "haelt die letzte Zeile eines Absatzes gefuellt". Das kann die Eigenschaft nicht und tut sie nicht. `balance` gleicht Ueberschriftzeilen aus — aber nur innerhalb eines Zeilenkastens: ein von Hand gesetztes
zerlegt die Ueberschrift in zwei Kontexte, und in keinem davon kann balance noch etwas retten. Deshalb hat dieses Blatt seit Runde 5b KEINE Handumbrueche mehr in h1 und h2. */ p, li { text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; } ul[class], ol[class] { list-style: none; margin: 0; padding: 0; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } /* DIE SPERRUNG WIRD UEBER DIE SIGNETKANTE BEMASST, NIE UEBER DIE BREITE. MARKE.md nennt eine Mindest-Signetkante (64 px), keine Mindestbreite; die Signetkante ist die Hoehe der Datei (sperrung.svg: viewBox 269 x 96). Das Blatt gibt deshalb nur die Kante an, die Breite folgt aus der Datei. Bis Runde 10 stand hier eine feste Hoehe von 64 px — repariert an der einen Fundstelle, an der der Fehler gefunden worden war. Die vier Auftritte auf marke.html trugen die Klasse gar nicht und deklarierten 207 x 72 und 276 x 96; gerendert wurden 207 x 73,86 und 276 x 98,48, weil 207/72 nicht das Seitenverhaeltnis der Datei ist. Eine davon war die Schutzraumfigur, deren Polster "halbe Signethoehe" heisst: 48 px gezeichnet, 49,24 px verlangt. Wer die Breite angibt, gibt die falsche Groesse an. */ img.sperrung { width: auto; height: var(--sperrung-kante, 64px); } button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } table { border-collapse: collapse; width: 100%; } /* Kein eigener Grad: 0,94em ergab 15,04 px und 13,16 px und machte aus drei laufenden Groessen fuenf. Mono laeuft auf dem Grad seiner Umgebung. */ code, kbd, samp, pre { font-family: var(--font-mono); font-size: 1em; } /* Platzhalter benutzt die Sekundaerfarbe, nie --text-disabled: Platzhaltertext ist Text und faellt unter WCAG 1.4.3. */ ::placeholder { color: var(--text-muted); opacity: 1; } hr { border: 0; border-top: var(--border-hairline) solid var(--line); margin: var(--tv-space-4) 0; } a { color: var(--action-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--action-hover); } /* DER DRITTE ZUSTAND FEHLTE IM GANZEN SYSTEM. Deklariert waren a und a:hover; ein a:active gab es auf keinem der sieben Blaetter. Gemessen mit gehaltener Maustaste ueber alle Verweise: Hover und Gedrueckt waren ueberall dieselbe Zeichnung. Was das System an seine Knoepfe anlegt — Ruhe, Hover, Gedrueckt als drei Stufen —, gilt auch fuer einen Verweis. */ a:active { color: var(--action-press); } /* ----------------------------------------------------------------------------- Fokus — Bluete, immer sichtbar. Der Ring folgt der Form des Elements; er fuehrt keinen eigenen Radius ein. ----------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } /* Auf dem dunklen Band die helle Fassung — sonst steht der Ring bei 1,25 : 1. */ .b--tinte :focus-visible, [data-grund="tinte"] :focus-visible { outline-color: var(--focus-ring-hell); } /* DIE UMKEHRFLAECHE SETZT IHRE EIGENEN ROLLEN — EINMAL, FUER ALLES DARIN. Vorher trug .b--tinte nur den hellen Fokusring. Jedes Bauteil darin behielt die Farben der HELLEN Flaeche, und jedes einzelne fiel dort durch: --text-muted #473B35 auf --bg-inverse #382E29 . . . 1,22 : 1 --action-text #7E0938 auf --bg-inverse . . . . . . . 1,25 : 1 --line-strong #584F49 als Kontur . . . . . . . . . . 1,65 : 1 Gemessen an der Marketing-Startseite: acht Textknoten unter der Schranke, alle auf den beiden dunklen Baendern, und der konturierte Knopf im Schlussband war schlicht unsichtbar. Das an jedem Bauteil einzeln zu reparieren waere die Fundstelle statt der Regel. Die Flaeche belegt deshalb die SEMANTISCHEN Token fuer ihren Teilbaum neu — danach stimmt jedes Bauteil darin von selbst, auch jedes kuenftige. */ .b--tinte, [data-grund="tinte"] { --text: var(--text-inverse); --text-muted: var(--text-inverse-muted); --line: var(--line-inverse); --line-strong: var(--text-inverse-muted); /* Die Bluete als SCHRIFT traegt auf dunklem Grund nicht (1,25 : 1); der Hauch schon (6,48 : 1). Die gefuellte Aktionsflaeche bleibt, wie sie ist — --text-on-action darauf ist von der Flaeche her hell. */ --action-text: var(--action-wash); } /* WER AUF DER UMKEHRFLAECHE SEINE EIGENE HELLE FLAECHE MITBRINGT, HOLT SICH DIE HELLEN ROLLEN ZURUECK. Die Neubelegung oben gilt fuer den ganzen Teilbaum — auch fuer Bauteile, die darin einen eigenen hellen Grund malen. Der helle Knopf im Tintenband hat das sofort gezeigt: seine Beschriftung nahm --action-text, das dort auf den Hauch zeigt, und stand mit 2,01 : 1 auf seiner eigenen lichten Flaeche. Ein Kasten, der die Flaeche wechselt, wechselt auch die Rollen zurueck. */ .b--tinte :is(.t-knopf--hell, .t-tafel, .mapcard, .karte), [data-grund="tinte"] :is(.t-knopf--hell, .t-tafel, .mapcard, .karte) { --text: var(--tv-kastanie); --text-muted: var(--tv-kastanie-soft); --line: var(--tv-linen-400); --line-strong: var(--tv-linen-500); --action-text: var(--tv-bluete-text); } /* DER KONTURIERTE KNOPF AUF DER UMKEHRFLAECHE. Es gab ihn nicht. .t-knopf--kontur traegt --text und --line-strong — beide dunkel, beide fuer einen hellen Grund gedacht. Auf --bg-inverse (L* 19,9) ergibt das eine unsichtbare Kontur mit unsichtbarer Schrift; die Marketing- Site hat im Schlussband genau diesen Fall, und die Fusszeile der App ebenso. Die Umkehrflaeche hat ihre eigenen Token: --text-inverse fuer die Schrift, --line-inverse fuer die Linie. Die drei Stufen laufen hier nach OBEN, weil nach unten kein Platz mehr ist: Ruhe durchsichtig, Hover eine helle Spur, Gedrueckt eine Spur mehr plus der bewegungsfreie Schatten. */ .b--tinte .t-knopf--kontur, [data-grund="tinte"] .t-knopf--kontur { background: transparent; color: var(--text); border-color: var(--line); } .b--tinte .t-knopf--kontur:hover, [data-grund="tinte"] .t-knopf--kontur:hover { background: color-mix(in srgb, var(--text-inverse) 10%, transparent); border-color: var(--text-inverse); } .b--tinte .t-knopf--kontur:active, [data-grund="tinte"] .t-knopf--kontur:active { background: color-mix(in srgb, var(--text-inverse) 18%, transparent); border-color: var(--text-inverse); box-shadow: var(--press-inset); transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .b--tinte .t-knopf--kontur:active, [data-grund="tinte"] .t-knopf--kontur:active { transform: none; } } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--action-wash); color: var(--text); } /* Die Markierung hinter Text ist eine kleine gefuellte Flaeche — die einzige in --action-wash. Sie traegt den Pillenradius, weil sie die Form eines Bedienelements hat. Scharfe Ecken gibt es im System gar nicht mehr: die Sonderform des Fremdmaterials ist in PALETTE.md 4 und 8 zurueckgenommen. */ mark { background: var(--action-wash); color: var(--text); border-radius: var(--radius-control); padding: 0.08em 0.4em; margin-inline: -0.1em; } /* ----------------------------------------------------------------------------- Typografie — Rollen Eine einzige Regel traegt die ganze Ebene: letter-spacing bleibt `normal`. Weder gesperrt noch gestaucht, in keiner Groesse. Die einzige Ausnahme ist .t-over, das kleine Versalien-Label. Display 88px steht direkt neben Fliesstext 16px — Faktor 5,5. Laufende Groessen — nach bar.md "setzt ganze Saetze in Absaetzen", nicht nach der Groesse: VIER (25 / 16 / 14 / 12). Das ist M1s Obergrenze; das Referenzmaß sind drei. Hier stand bis Runde 7 "genau drei (16 / 14 / 12)" mit der Begruendung, .t-lead liege ueber 24px — eine Definition, die der Prueflings selbst liefert, misst nichts. .t-lead ist der EINLEITUNGSABSATZ und NUR das. Der Bauteiltitel (Kartentitel, Dialogtitel, Zeilentitel) gehoert NICHT hierher, er steht auf der h3-Stufe; die Aufzaehlung "h3, Kartentitel, Dialogtitel" stand bis Runde 5b faelschlich in dieser Zeile und war der Grund, warum 25 px auf fuenf Blaettern drei Behandlungen trug. Der zweite Teil fehlte hier, obwohl tokens.css und PALETTE.md ihn seit Stueck 2 fuehren — die Datei, die .t-lead definiert, war die letzte, die es nicht wusste. Die frueher hier stehende Zusage "hoechstens zweimal pro Seite" ist gestrichen — siehe tokens.css: eine Zwischenueberschrift darf so oft vorkommen wie es Abschnitte gibt. ----------------------------------------------------------------------------- */ /* Die Hilfsklasse setzt, was das gleichnamige Element setzt — sonst tragen .t-display und h1 (Display 88px) verschiedene Gewichte und opsz. */ .t-display, .t-h1, .t-h2, .t-h3 { font-family: var(--font-display); letter-spacing: normal; text-wrap: balance; } /* ----------------------------------------------------------------------------- EIN GRAD, EIN DURCHSCHUSS. tokens.css paart jede Lesegroesse mit ihrem Durchschuss (25/1,44 · 16/1,60 · 14/1,50 · 12/1,42). Auf dem Blatt lief 12 px an sieben Stellen mit 1,65 und 14 px mit 1,50, 1,60 und 1,65 — von den drei 14er-Werten war einer der deklarierte. Wer eine Groesse setzt, bekommt ihren Durchschuss dazu; wer einen anderen will, deklariert ihn und begruendet ihn. ----------------------------------------------------------------------------- */ [style*="font-size:12px"], [style*="font-size: 12px"] { line-height: var(--text-caption-lh); } /* ----------------------------------------------------------------------------- AVATARSTAPEL — eine Initiale je Person, ueberlappend. Stand bis Runde 14 zweimal lokal, in zwei Massen: 32 px mit --radius-circle auf der Startseite, 30 px mit rohem 50 % auf app-aufnahmen. ANWENDUNG.md nannte den Mangel und verwies ihn auf eine Liste, die ihn nicht fuehrte. Der Traegergrund bleibt lokal: der Ring stellt den Kreis gegen die Flaeche frei, auf der er liegt, und die ist nicht auf jedem Blatt dieselbe. ----------------------------------------------------------------------------- */ .faces { display: flex; } .faces > * { width: 32px; height: 32px; border-radius: var(--radius-circle); border: 2px solid var(--bg-float); background: var(--bg-sunken); display: grid; place-items: center; font-size: var(--text-caption-size); line-height: 1; font-weight: var(--weight-semibold); color: var(--text-muted); } .faces > * + * { margin-left: -10px; } /* DIE INITIALE STEHT IN DER SICHTBAREN SICHEL, NICHT IN DER GANZEN SCHEIBE. Jede Scheibe ausser der letzten ist rechts um 10 px verdeckt; die Glyphe war trotzdem auf die volle Breite von 32 px zentriert und stand damit in einer 22 px breiten Sichel um 5 px zu weit rechts. Gemessen: das "M" hatte links 9,9 px Luft und rechts 1,9 px und stiess bei 1:1 an die Schnittkante, waehrend die letzte, unbeschnittene Scheibe als einzige mittig sass. Das Polster verschiebt die Inhaltsbox um genau die Verdeckung. */ .faces > *:not(:last-child) { padding-right: 10px; } /* ----------------------------------------------------------------------------- KARTENFLAECHE — Bild und Zug liegen deckungsgleich uebereinander. Stand bis Runde 16 ZWEIMAL lokal und byteidentisch (startseite.html, karte.html) — und in karte.html unmittelbar ueber drei Kommentaren, die fuer .t-tafel, .t-over und .pill protokollieren, dass genau das nicht mehr vorkommt. Jedes andere geteilte Bauteil ist zwischen Runde 5b und 14 hierhergewandert; die Flaeche, die ein eigenes Dokument hat (KARTE.md) und der Gegenstand des ganzen Stuecks ist, war die letzte, die es nicht war. Lokal bleibt allein die GEOMETRIE (aspect-ratio gegen feste Hoehe): sie ist der Ausschnitt, gegen den der Routenzug gerechnet ist, und der ist je Blatt ein anderer. Was hier steht, ist Zeichnung, nicht Platzierung. ----------------------------------------------------------------------------- */ /* z-index: 0 SCHLIESST LEAFLETS EBENEN EIN. Ohne eigenen Stapelkontext konkurrieren die Kartenebenen (Leaflet vergibt bis 700) im Stapel des Elternteils — die Tafel stand mit z-index auto DARUNTER und war nicht zu sehen, obwohl sie im Baum stand und an der richtigen Stelle gemessen wurde. */ .mapcard { position: relative; border-radius: var(--radius-surface); overflow: hidden; border: 1px solid var(--line); z-index: 0; /* EINE FLAECHE MIT AUFLAGE BRAUCHT HOEHE FUER DIE AUFLAGE — aber nicht ueber min-height. Auf einer Flaeche mit aspect-ratio rechnet der Browser aus einer Mindesthoehe eine MINDESTBREITE zurueck: mit min-height 420 und 1080/520 wurde das Belegblatt 962 px breit und lief bei 944 px Fenster um 18 px waagerecht ueber. Die Hoehe kommt deshalb aus dem Seitenverhaeltnis selbst, das die Blaetter bei schmalen Breiten aendern. */ } /* 800, nicht 1: die Tafel liegt INNERHALB der Kartenflaeche und konkurriert dort mit Leaflets eigenen Ebenen, die bis 700 gehen (markerPane 600, tooltipPane 650, popupPane 700). Mit z-index 1 lag sie unter den Kacheln — auf dem Belegblatt und der Startseite war sie nicht zu sehen, und die Zustandspruefung meldete dieselben Marken als "hinter der Tafel", weil sie rechnerisch dort lagen. In anwendung.html steht die Tafel NEBEN der Karte; dort genuegte 1, und genau das hat mich hier in die Irre gefuehrt. */ .mapcard .t-tafel { z-index: var(--z-karte-auflage); } /* Die 800 stand hier als Zahl. Sie steht jetzt als Stufe in tokens.css — die Anwendung braucht dieselbe Leiter fuer Dialoge und Leisten, und zwei Stellen, die dieselbe Reihenfolge von Hand fuehren, laufen auseinander. */ /* HIER STANDEN ZWEI REGELN DER GEZEICHNETEN KARTE: .mapcard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover } .mapcard svg { position:absolute; inset:0; width:100%; height:100% } Sie zwangen das Kartenbild und die Zeichnung darueber auf denselben Ausschnitt — genau richtig, solange beides von Hand gemacht war. Seit die Flaechen echtes Leaflet sind, treffen sie etwas anderes: JEDE Kachel ist ein , und die Overlay-Ebene ist ein . Beide wurden damit auf die volle Flaeche der Karte gedehnt; der Routenzug lag nicht mehr dort, wo seine Koordinaten hinzeigen, und war praktisch unsichtbar. Eine Regel, die auf einen Bauteiltyp zielt und dabei jedes Element mit diesem Tag erwischt, ist eine Regel ohne Gegenstand. */ /* ---------- Die Kacheln ------------------------------------------------------ DIE BEHANDLUNG STEHT EINMAL, FUER JEDE KARTE DES SYSTEMS. Sie stand zuerst inline in anwendung.html, an .karte gebunden — die anderen drei Flaechen heissen .mapcard und bekamen deshalb rohe OSM-Kacheln: bunt, laut, und neben der Palette. Der Filter selbst steht in tokens.css, weil er auch fuer das Bauteil im Produkt gilt. -------------------------------------------------------------------------- */ .leaflet-tile-pane { filter: var(--map-kachel-filter); } /* Der Grund unter den Kacheln ist ein Token, kein Fremdwert. Leaflet setzt #ddd — exakt unbunt (a* 0,00 / b* 0,00) und damit die einzige neutrale Flaeche des Systems, ausgerechnet dort, wo W2 Waerme verlangt. Sichtbar ist sie, solange Kacheln fehlen oder nachladen. */ .leaflet-container { background: var(--map-paper); } /* Die Herkunftsangabe ist Pflicht (ODbL) und Teil des Entwurfs, keine Zutat. Deckend, nicht durchscheinend: mit 82 Prozent Deckung wurde die Textschranke gegen die Kachel darunter gemessen und riss bei 1,93 : 1. */ /* ----------------------------------------------------------------------------- DIE ZOOMSTEUERUNG. Sie stand bisher in KEINER Regel dieses Systems — und zwar aus einem Grund, der nur fuer die Belegblaetter gilt: karte.js schaltet sie ab (zoomControl: false), weil ein Blatt einen festen Ausschnitt zeigt. Die ANWENDUNG zeigt sie. Gemessen an /public/map liefen ihre beiden Knoepfe deshalb in Leaflets Vorgabe — `font: bold 18px 'Lucida Console', Monaco, monospace`, eine vierte Familie ausserhalb der drei des Systems, und ein Grad und eine Form, die keine Leiter kennt. Dass ein Bauteil auf allen Blaettern abgeschaltet ist, heisst nicht, dass es das Bauteil nicht gibt. Es heisst, dass niemand hinsieht. Kein eigener Rang: das ist ein Bedienelement in der dichten Stufe. ----------------------------------------------------------------------------- */ .leaflet-bar { border: var(--border-hairline) solid var(--line); border-radius: var(--radius-control); box-shadow: var(--shadow-float); overflow: hidden; } .leaflet-bar a, .leaflet-control-zoom a { width: var(--knopf-hoehe-klein); height: var(--knopf-hoehe-klein); line-height: var(--knopf-hoehe-klein); background: var(--bg-float); color: var(--text); font-family: var(--font-text); font-size: var(--text-body-size); font-weight: var(--weight-semibold); border-bottom: var(--border-hairline) solid var(--line); } .leaflet-bar a:last-child { border-bottom: 0; } .leaflet-bar a:hover { background: var(--bg-sunken); color: var(--text); } .leaflet-bar a:active { background: var(--bg-sunken); box-shadow: var(--press-inset); } /* Leaflet setzt fuer den gesperrten Knopf eine eigene Klasse. Deaktiviert verliert die Farbe ganz (ANWENDUNG.md §4). */ .leaflet-bar a.leaflet-disabled { background: var(--bg-sunken); color: var(--text-disabled); cursor: not-allowed; } /* Der Abstand ist kein Zierrat: die Angabe sass buendig in der Ecke, und der Fokusring ihres Verweises lag damit in fuenf von fuenf geprueften Groessen teilweise ausserhalb des Fensters. Ein Ring, den man nicht ganz sieht, ist kein Fokusmerkmal. */ .leaflet-control-attribution { background: var(--bg-float); color: var(--text-muted); font-size: 10px; padding: 2px 6px; margin: 0 4px 4px 0; border-radius: var(--radius-control); } .leaflet-control-attribution a:focus-visible { outline-offset: 1px; } /* Auch der Link in der Herkunftsangabe ist ein Bedienelement — er kam mit der Bibliothek und hatte deshalb keinen der drei Zustaende. */ .leaflet-control-attribution a { color: var(--action-text); text-decoration: none; } .leaflet-control-attribution a:hover { color: var(--action-hover); text-decoration: underline; } .leaflet-control-attribution a:active { color: var(--action-press); text-decoration: underline; } /* Der Fokusring liegt INNEN: Leaflet macht den Behaelter tastaturbedienbar, und eine randlose Flaeche kann keinen aussenliegenden Ring zeigen. */ .leaflet-container:focus-visible { outline-offset: -3px; } .leaflet-container { font: inherit; } /* ----------------------------------------------------------------------------- KARTENPUNKT — die Rollen, die KARTE.md deklariert. Kern 18 (ausgewaehlt 22, Pausenplatz 12) plus 2 px Hoefchen in --bg-float; box-sizing: border-box, die BREITE ist also Kern + 2 x Ring. Stand bis Runde 13 zweimal lokal, in zwei Fassungen (einmal absolut ueber der Karte mit --radius-circle, einmal inline mit 50 % und eigenem box-sizing) — und das ausgerechnet bei dem Bauteil, dessen Uneinheitlichkeit das Projekt in Runde 10 und 12 zweimal als Befund gefuehrt hat ("ein Zustand in drei Massen"). Was lokal bleibt, ist nur die PLATZIERUNG: absolut auf der Karte, inline in der Legende. ----------------------------------------------------------------------------- */ .pin { width: 22px; height: 22px; box-sizing: border-box; border-radius: var(--radius-circle); border: 2px solid var(--bg-float); background: var(--map-pin); /* Dieselbe zweite, dunkle Haarlinie wie die Marke auf der Karte. Ohne sie zeigt die Legende ein anderes Bauteil als das, was daneben liegt. */ box-shadow: 0 0 0 1px var(--line); } /* Der Ortspunkt traegt die Grundfassung und deklariert nichts weiter — die Klasse steht trotzdem, damit jede Rolle auf dem Blatt einen Namen hat. */ .pin--ort { } .pin--gewaehlt { width: 26px; height: 26px; background: var(--map-pin-selected); } .pin--pause { width: 16px; height: 16px; } .pin--pruefen { background: var(--map-pin-pruefen); } /* Die Luecke ist HOHL, nicht randlos: Kontur innen, Aussenmass bleibt 22, das Hoefchen bleibt — sonst steht dieser eine Pin ohne Freistellung auf der Karte. */ .pin--luecke { background: var(--bg-float); box-shadow: inset 0 0 0 3px var(--danger); } /* ----------------------------------------------------------------------------- ZUSTANDSMARKE — die Pille, die sagt, woran eine Zeile ist. bar.md M5 fuehrt sie ausdruecklich als Bedienelementform (Pillenradius, auch wenn sie nicht klickbar ist). Sie stand bis Runde 12 ZWEIMAL lokal und nirgends geteilt — und die beiden Fassungen setzten die Schrift verschieden in die Pille: startseite ueber Flexzentrierung (Tinte 4,09 px unter der Oberkante), app-aufnahmen ueber line-height: 22px (5,00 px). Gleiche Rolle, gleiches Mass, zwei Zeichnungen, 0,9 px Versatz. .t-knopf (Runde 6), .t-titel (5b), .t-tafel (8) und .t-over (11) sind aus genau diesem Grund hierher gewandert. Die FARBE bleibt lokal: sie ist der Zustand, nicht das Bauteil. ----------------------------------------------------------------------------- */ /* DIE PILLE TRAEGT IHREN EIGENEN GRUND. Ohne ihn haengt ihr Kontrast an der Flaeche, auf der sie gerade liegt: auf der ausgewaehlten Zeile (--action-wash) fiel Bernstein auf 3,39 : 1, waehrend dieselbe Pille auf --bg bei 5,20 : 1 liegt. Ein Statusmerkmal, dessen Lesbarkeit vom Zustand der Zeile abhaengt, sagt genau dann am wenigsten, wenn die Zeile ausgewaehlt ist. */ .pill { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding-inline: 11px; background: var(--bg-float); border-radius: var(--radius-control); border: var(--border-hairline) solid currentColor; font-size: var(--text-over-size); letter-spacing: var(--text-over-ls); text-transform: uppercase; font-weight: var(--weight-semibold); font-variation-settings: "wdth" 110; line-height: 1; white-space: nowrap; color: var(--text-muted); } /* DIE ZUSTAENDE DER PILLE ALS VARIANTEN, NICHT ALS style-ATTRIBUT. startseite.html setzte sie dreimal inline (style="color:var(--success)"). Ein Zustand ist eine Rolle des Bauteils und gehoert deshalb hierher — sonst traegt jedes Blatt seine eigene Fassung, und wer die Rolle verschiebt, muss sie in jedem Blatt suchen. Der Rand ist currentColor: Farbe UND Kontur folgen der Rolle aus einer Deklaration. Die Rollen-Token, nicht die Primitive: keine Komponente greift durch. */ .pill--gebucht { color: var(--success); } .pill--pruefen { color: var(--warning); } .pill--luecke { color: var(--danger); } /* ----------------------------------------------------------------------------- BREITES EINZELGUT ROLLT IN SEINEM EIGENEN KASTEN. Eine Tabelle hat eine Mindestbreite, die aus ihrem Inhalt folgt; ein Fenster von 320 px hat sie nicht. Bis Stueck 4, Runde 7 lief deshalb die SEITE ueber — auf sechs von sieben Blaettern, gemessen bis 301 px Ueberstand. Die Seite darf das nicht; das einzelne breite Ding darf es. ----------------------------------------------------------------------------- */ table { display: block; max-width: 100%; overflow-x: auto; } /* ----------------------------------------------------------------------------- RANDBESCHRIFTUNG — das Leitmotiv des Systems. Messwerte am Rand einer Flaeche, in der Datenschrift, auf der leisen Textfarbe: Position, Abschnitt, Stand. Dasselbe, was am Rand einer Karte steht. Sie stand bis Runde 11 lokal auf EINEM Blatt und war damit keine Marginalie, sondern eine Beschriftung — ein Motiv, das nur dort auftritt, wo es woertlich zutrifft, ist keins. Ausgerechnet karte.html trug null. Kein neuer Grad: 12 px ist die Etikettenstufe, die das System schon fuehrt. ----------------------------------------------------------------------------- */ .marginalie { display: flex; flex-wrap: wrap; gap: 4px var(--tv-space-4); margin: var(--tv-space-2) 0 0; /* KEIN Prosamass. Auf drei Blaettern erbte die Zeile .head p { max-width: 66ch } — ein Satzmass, das auf 12 px Mono zu 453,8 px rechnet statt zu den ~600, fuer die es gedacht ist. Die dreifeldrige Zeile brach dadurch um, das dritte Feld stand allein auf Zeile 2, und ueber ihm lagen 100 px leere Zeile. Genau das Bauteil, dessen Kommentar sagt, es sei "eine Messwertzeile, kein Satz". */ max-width: none; font-size: var(--text-caption-size); line-height: var(--text-caption-lh); color: var(--text-muted); } /* DAS WORT STEHT IN ARCHIVO, DER WERT IN MONO — und zwar auf allen fuenf Blaettern gleich. Bis Runde 12 trug das dritte Feld auf drei von fuenf Blaettern Archivo und auf zweien Mono: dieselbe Sorte Aussage in zwei Schnitten. Die Antwort darauf war "JEDES Feld laeuft in der Datenschrift" — und die geriet in Widerspruch zur Satzregel des Systems (ANWENDUNG.md Abschnitt 7: "Alles, was BENENNT, laeuft in Archivo"). Denn ein Feld benennt oft: "Mast 3,5 Einheiten", "Farben aus den Token", "geaendert vor 3 Std." — letzteres woertlich das Gegenbeispiel des eigenen Registers, gesetzt in JetBrains Mono. Zwei Regeln, die einander widersprechen, sind keine Regel. Die Randzeile traegt jetzt dieselbe Fuegung, die Teil B von foundation.html seit jeher fuehrt: die Beschriftung in der Textschrift, der Wert in .v. Der Befund von Runde 12 bleibt behoben, weil das fuer JEDES Feld JEDES Blattes gilt — nicht weil alles gleich aussieht, sondern weil dieselbe Unterscheidung ueberall dieselbe ist. */ .marginalie > * { font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------------------- DER WERT — die Klasse, mit der ein Blatt sagt "das hier ist ganz ein Wert". Sie ist NICHT die einzige Stelle, an der --font-mono steht: das tun auch .t-data (die Datenzeile, 59-mal auf foundation.html), code/kbd/samp/pre und fuenf lokale Regeln in Belegblaettern (.mono, td.n, .card__m, .streifen span). Hier stand "die einzige Klasse, die die Datenschrift traegt" — 270 Zeilen ueber .t-data in derselben Datei. Was .v einmalig macht, ist die AUSSAGE, nicht die Schrift; geprueft wird ohnehin die berechnete Schriftfamilie, nicht die Klasse. Sie stand bis Stueck 4, Runde 6 FUENFMAL lokal — anwendung.html, startseite.html, app-aufnahmen.html, karte.html, marke.html — und einmal unter anderem Namen (.mono in app-aufnahmen.html). Runde 6 hat zwei davon eingesammelt und hier "zweimal" geschrieben; der Brief-Kritiker hat die drei uebrigen gezaehlt. Ein Kommentar, der eine Zusammenfuehrung behauptet, muss die Fundstellen zaehlen, nicht die erledigten. Wer .v setzt, sagt "das hier ist ganz ein Wert" — und zustand-pruefung.js prueft genau das an der berechneten Schriftfamilie. ----------------------------------------------------------------------------- */ .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------------------- SCHWEBENDE TAFEL — die Karte, die auf einer Kartenflaeche liegt. Bis Runde 8 stand sie zweimal lokal und war dabei zu zwei Bauteilen geworden: startseite 300 x 259,5 px bei 24/24 Einzug oben links ohne Knopf, karte 330 x 245,9 px bei 28/28 unten links mit Knopf. Gleicher Name, zwei Anker, zwei Einzuege, zwei Breiten. Jetzt eine Deklaration; der Anker ist der einzige erlaubte Unterschied und heisst .t-tafel--unten. Die Aliasse .float sind in Runde 9 ENTFERNT; .t-tafel ist der einzige Name. ----------------------------------------------------------------------------- */ .t-tafel { position: absolute; left: var(--tafel-einzug); top: var(--tafel-einzug); width: var(--tafel-breite); background: var(--bg-float); border-radius: var(--radius-surface); padding: 20px 22px 22px; box-shadow: var(--shadow-float); } .t-tafel--unten { top: auto; bottom: var(--tafel-einzug); } /* EINE AUFLAGE, DIE BREITER IST ALS IHRE FLAECHE, IST KEINE AUFLAGE MEHR. --tafel-breite ist ein fester Wert. Bei 320 px Fensterbreite mass die Tafel auf karte.html 300 px in einer 272 px breiten Karte und war 265 von 363 px hoch — 73 Prozent der Flaeche. Der Ausschnitt konnte daraus nichts mehr freihalten: zwei Marken lagen dahinter, und overflow: hidden verbarg, dass die Tafel seitlich hinauslief. Schmal traegt sie deshalb nur, was sie tragen muss: welche Etappe und was zu tun ist. Die Masszahl steht auf denselben Blaettern in der Randbeschriftung oder der Etappenzeile — sie ist dort nicht knapper, sondern an ihrem Platz. Dieselbe Regel wie in anwendung.html unter 420 px Fensterhoehe, nur an der Breite gemessen statt an der Hoehe. */ @media (max-width: 700px) { .mapcard .t-tafel { left: var(--tv-space-2); right: var(--tv-space-2); width: auto; padding: var(--tv-space-2) var(--tv-space-3); } .mapcard .t-tafel > p:not([class]), .mapcard .t-tafel > p[data-tafel] { display: none; } } /* DIE TAFEL MISST GEGEN IHRE KARTE, NICHT GEGEN DAS FENSTER. --tafel-breite ist 300 px fest; die Kartenflaeche schrumpft mit dem Fenster. Wird sie zu klein, deckt die Tafel die Marken zu, von denen sie spricht — dann steht sie UNTER der Flaeche statt auf ihr: eine Beschriftung, die ihren Gegenstand verdeckt, ist keine. Bis Stueck 4, Runde 5 hing die Umschaltung an der FENSTERBREITE (unter 600 px), weil der Fall bei 375 px gefunden worden war. Das ist der Fehler dieses Projekts in Reinform: repariert am gefundenen Ort statt an der gefundenen Regel. Bei einem 900 px breiten Fenster ist die Hero-Karte der Startseite naemlich nur 381,8 x 286,3 px gross — die Tafel (300 x 280,7 zzgl. zweimal Einzug) liegt dann auf der ganzen Flaeche, und alle fuenf Marken verschwanden dahinter, waehrend das Fenster weit ueber der Schranke lag. DER UNTERSCHIED IST DER BAUM, NICHT DIE ROLLE. Hier stand "zwei Rollen": die Randbeschriftung NEBEN der Karte und die aufliegende Tafel IN ihr. Der System-Kritiker hat nachgemessen, dass das nicht traegt — auch die Tafel der Startseite LIEGT auf ihrer Karte (bei 1440 px mit 32,4 % ihrer Flaeche, position: absolute), und ihre Marken sind genauso um sie herum gesetzt wie auf den anderen Blaettern. Der Unterschied ist kein Rollenunterschied, sondern ein STAPELPROBLEM, und der stand schon damals vier Zeilen weiter unten richtig da: (a) Die Tafel ist ein GESCHWISTER der Kartenflaeche (startseite.html, in .kartenblock). Wird sie statisch, faellt sie im normalen Fluss UNTER die Flaeche — genau das Gewuenschte. (b) Die Tafel ist ein KIND der Kartenflaeche (karte.html, app-aufnahmen.html). Wird sie dort statisch, landet sie IM Kartenkasten, und Bild und SVG stehen absolut positioniert und davor im DOM. Fuer sie ist "flach" keine Loesung, sondern der Schaden: eine statische Tafel im Kartenkasten wird von Bild und SVG (beide absolut und davor im DOM) ueberdeckt oder deckt selbst die Karte von oben zu. Genau das ist in Runde 6 passiert, als die Container-Anfrage ohne Unterschied auf beide Rollen lief: auf app-aufnahmen.html verschwand die Tafel samt Knopf unter der Karte, waehrend die Bildunterschrift darunter sie beschrieb. Diese Flaechen bekommen stattdessen ein MINDESTMASS und rollen in ihrem eigenen Kasten — sie duerfen nicht unter die Groesse schrumpfen, bei der ihre Komposition aufgeht. Die Schwelle fuer (a) ist gemessen, nicht gegriffen: Sweep ueber 320 bis 2560 px Fensterbreite, groesste Kartenbreite, bei der noch eine Marke unter der Tafel lag — 465,17 px auf startseite#karte-hero. Aufgerundet 466 px. Runde 6 hatte 460 px gesetzt und die Zahl aus der GROESSE DER TAFEL hergeleitet statt aus der LAGE DER MARKEN; dadurch blieb ein Fenster von 1037 bis 1045 px, in dem die Tafel wieder schwebte und bis zu 24,7 % der Marke --map-pin-selected verdeckte — ausgerechnet der, die sie benennt. In der Bedingung einer Container-Anfrage sind keine Custom Properties erlaubt; die Zahl steht deshalb hier und nirgends sonst. zustand-pruefung.js faehrt 320 bis 2560 px auf JEDER Flaeche ab und entscheidet, dass keine Marke unter der Tafel liegt — bis Runde 6 lief diese Entscheidung nur auf Blaettern mit
, also auf zweien von sieben, und karte.html hat sie deshalb nie gesehen. */ .mapcard, .kartenblock { container-type: inline-size; } @container (max-width: 466px) { .t-tafel--eng466 { position: static; width: auto; margin-top: var(--tv-space-2); box-shadow: none; border: var(--border-hairline) solid var(--line); } } /* ZWEITE FORM: das Bodenblatt auf einem Telefonbildschirm. Es spannt ueber die volle Breite und sitzt unten — dieselbe Idee, andere Flaeche. Es setzt JEDE Eigenschaft zurueck, die es aendert (top UND width): in Runde 8 erbte die lokale Fassung auf app-aufnahmen.html top und width aus der geteilten Regel und wuchs auf 300 x 509 px — die Tafel deckte den ganzen Kartenbildschirm zu, Karte, Zug und alle vier Pins waren unsichtbar, waehrend die Bildunterschrift darunter sie beschrieb. Wer eine Variante schreibt, setzt zurueck, was er aendert. */ .t-tafel--telefon { /* position gehoert dazu: die Variante traegt sie jetzt selbst, damit keine spaetere Regel sie ihr wegnehmen kann. Genau das ist in Runde 6 passiert. */ position: absolute; top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; padding: 14px 16px 16px; } /* ----------------------------------------------------------------------------- KNOPF — eine Deklaration, zwei benannte Hoehen. Bis Runde 6 stand der Knopf fuenfmal lokal in den Blaettern, in zwei Hoehen (52 und 44 px) und zwei Innenmassen (30 und 28 px). Dieselbe Beschriftung "Kostenlos starten" war auf zwei Blaettern 4 px verschieden breit, und die 44er Hoehe existierte nur als Inline-Attribut — in keinem Token, in keinem Dokument. base.css enthielt gar keinen Knopf. Die zwei Hoehen sind ein RANG, kein Zufall: - .t-knopf 52px — die eine primaere Handlung einer Ansicht - .t-knopf--klein 44px — jede weitere Handlung (Navigation, Bauteil) Wer eine primaere Handlung auf 44 setzt, hebt den Rang auf; genau das war auf der Startseite passiert (Portal-Handlung 44 = Navigation 44). ----------------------------------------------------------------------------- */ /* WARNUNG AUS RUNDE 7: hier stand kurz auch ".b" in der Aliasliste. Auf startseite.html ist .b die BANDSEKTION — jedes Band wurde damit zum Knopf (gemessen 176 px hoch). Ein generischer Name gehoert nie in eine geteilte Regel; app-aufnahmen.html heisst seither .knopf statt .b. */ /* DER KNOPF IST EIN BEDIENELEMENT, KEIN ANGEMALTES
. Bis Runde 18 waren alle vier Handlungsflaechen der Startseite blanke /
ohne href, role oder tabindex — auf dem einen Blatt, das laut bar.md KEIN Belegblatt ist, und dessen Register dieselben Flaechen als "Handlungen" zaehlt. Das Register benannte die drei toten href="#", nicht die vier nicht existierenden Bedienelemente. Sie sind jetzt