/* ===================================================================== typo-plex.css — die dritte typografische Stimme auf einer echten Seite. --------------------------------------------------------------------- ALLES hier ist unter [data-typo="plex"] gekapselt. Ohne dieses Attribut am passiert nichts. Die 226 anderen Seiten bleiben Byte fuer Byte unveraendert — das ist Absicht und wird nach dem Bau geprueft. WARUM DIE STIMME SO AUSSIEHT Elf Gestaltungsrunden sind daran gescheitert, dass die Kreativitaet in den BUCHSTABEN sass — dort, wo der Leser entziffern muss. Wer wissen will, ob er die Meisterpruefung braucht, will keine Ausdrucksschrift lesen. Also umgedreht: der Lesetext wird ruhig, die Gestaltung wandert in Raster, Rhythmus, Weissraum und Bewegung. Gemessen in design/prototypen/fonts-probe-3.html (16 Familien, sieben Messungen je Familie). Die Zahlen, die entschieden haben: Rolle Schrift Messwert ---------- --------------- ----------------------------------- Lesetext IBM Plex Sans niedrigste Verwechslungsgefahr im ganzen Feld: 55,6 % Hoechstwert ueber I/l, 0/O, rn/m, Paragraf/5, 5/S, a/o (Lineal 100 %, Geist 75,5 %, Archivo 67,9 %, Public Sans 59,1 %). Blende c 3,80 px bei 16 px — die weiteste aller Grotesken im Feld. Ziffernstreuung 0,00 px: tabellarisch von Haus aus. Fuenf echte Schnitte, echte Kursive. Auszeichn. IBM Plex Serif dieselbe Superfamilie. Paragrafzeichen korrekt, voller deutscher Vorrat. Zahlen Sligoil Micro einzige der drei geprueften Monospaces mit DURCHGESTRICHENER NULL: 0 gegen O 33,5 % gegen 88,0 % (Plex Mono) und 68,2 % (Geist Mono). LIZENZ UND HERKUNFT — beide Familien SIL OFL 1.1, beide lokal: IBM Plex (c) 2017 IBM Corp., Reserved Font Name "Plex". Bezogen aus github.com/IBM/plex. Lizenztext liegt unter /fonts/IBMPlex-OFL.txt. Sligoil Ariel Martin Perez, velvetyne.fr. /fonts/Sligoil-OFL.txt. OFFENGELEGT, NICHT VERSTECKT: IBM Plex wird AUCH ueber Google Fonts verteilt. Bezogen wird hier aus IBMs eigenem Repository, ausgeliefert wird lokal, zur Laufzeit geht keine Anfrage nach aussen. Fabi hat das am 2026-08-06 in dieser Kenntnis entschieden. ZWEI HARTE REGELN AUS DEN MESSUNGEN, NICHT AUS GESCHMACK 1. Die Zahlenspur wird NIE kleiner als 15 px gesetzt. Sligoils Nullstrich verschwindet bei 14 px in der Rasterung — dort steigt 0 gegen O von 33,5 auf 80,9 % Aehnlichkeit. 2. Kein synthetisches Fett. Alle Schnitte sind echte Dateien, `font-synthesis: none` erzwingt es. ===================================================================== */ /* ---------------- Lesetext: IBM Plex Sans --------------------------- Nur Regular und SemiBold. Medium, Bold und Kursiv sind auf dieser Seite nirgends angefordert — eine deklarierte und nie geladene Datei ist toter Ballast im Ordner und eine unwahre Angabe im Impressum. */ @font-face { font-family: 'Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexSans-Regular.woff2?v=fc8a58fc') format('woff2'); } @font-face { font-family: 'Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexSans-SemiBold.woff2?v=fc8a58fc') format('woff2'); } /* ---------------- Auszeichnung: IBM Plex Serif --------------------- */ @font-face { font-family: 'Plex Serif'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexSerif-SemiBold.woff2?v=fc8a58fc') format('woff2'); } /* ---------------- Zahlen: Sligoil Micro ---------------------------- */ @font-face { font-family: 'Sligoil'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/Sligoil-Micro.woff2?v=fc8a58fc') format('woff2'); } @font-face { font-family: 'Sligoil'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/Sligoil-MicroMedium.woff2?v=fc8a58fc') format('woff2'); } /* ===================================================================== Ab hier gilt alles NUR unter [data-typo="plex"]. ===================================================================== */ html[data-typo="plex"] { /* Die Ersatzkette traegt hier mehr als ueblich: JEDE Seite zeigt im Sprachumschalter alle acht Sprachen in ihrer eigenen Schrift, also Arabisch und Kyrillisch auf jeder einzelnen Seite. Plex Sans deckt Latein ab; fuer den Rest springt die Systemschrift ein (Segoe UI auf Windows, Noto sonst). Nichts davon wird nachgeladen — die Namen greifen nur, wenn die Schrift lokal vorhanden ist. */ --ff-display: 'Plex Serif', Georgia, 'Times New Roman', serif; --ff-text: 'Plex Sans', system-ui, -apple-system, 'Segoe UI', 'Noto Sans', 'Noto Sans Arabic', sans-serif; --ff-data: 'Sligoil', ui-monospace, 'Consolas', monospace; /* Die Seite uebernimmt die Textschrift auch fuer alles, was im Bestand ueber --ff-sans laeuft (Kopf- und Fussleiste aus Base). */ --ff-sans: var(--ff-text); /* ---------- Grad --------------------------------------------------- Lesetext steht bei 16 px, nicht bei 14. Bei Plex Sans sind das 8,32 px x-Hoehe; bei 14 px waeren es 7,28. Fabis erster Satz war "die schrift muss klarer lesbar sein" — das ist die Stelle. */ --t-xs: 12px; /* Marken in Versalien. Traegt NIE Ziffern. */ --t-sm: 14px; /* Beiwerk ohne Ziffern */ --t-base: 16px; /* LESETEXT */ --t-md: 18px; --t-lg: 22px; /* Zahlen nie unter 15 px — siehe Regel 1 im Kopf dieser Datei. */ --t-zahl-s: 15px; --t-zahl: 17px; --t-zahl-l: 26px; --t-display-sm: 22px; --t-display-md: 28px; --t-display-lg: 44px; /* ---------- Seitenrhythmus ----------------------------------------- Die 4-px-Stufen aus tokens.css bleiben fuer Bauteil-Innenabstaende. Darueber zwei groebere Stufen, ausschliesslich fuer den Abstand ZWISCHEN Registern. Ohne dieses zweite Intervall steht alles gleich weit auseinander und die Ordnung, die das Raster zeigen soll, ist nicht ablesbar. Fabis Wort dafuer war "struckturiert". */ --sp-register: 48px; --sp-block: 72px; /* ---------- Das Raster, das man sehen soll ------------------------- */ --spalten: 12; --rinne: 24px; --rand: 40px; --mass: 66ch; /* Zeilenmass des Lesetextes */ --werk-max: 1280px; } @media (max-width: 900px) { html[data-typo="plex"] { --rand: 20px; --rinne: 16px; --t-display-lg: 32px; /* Zwoelf Linien auf 500 px sind Streifen, kein Raster. Vier. */ --spalten: 4; } } /* ===================== Schriftschicht =============================== */ [data-typo="plex"] body { font-family: var(--ff-text); font-size: var(--t-base); line-height: 1.55; font-synthesis: none; /* Plex Sans hat tabellarische Ziffern von Haus aus; die Angabe haelt den Satz auch dann still, wenn eine Ersatzschrift einspringt. */ font-variant-numeric: tabular-nums; } [data-typo="plex"] h1, [data-typo="plex"] h2, [data-typo="plex"] h3 { font-family: var(--ff-display); font-weight: 600; letter-spacing: -0.012em; color: var(--ink-strong); line-height: 1.15; text-wrap: balance; } [data-typo="plex"] h1 { font-size: var(--t-display-lg); } [data-typo="plex"] h2 { font-size: var(--t-display-md); } [data-typo="plex"] h3 { font-size: var(--t-display-sm); } [data-typo="plex"] p, [data-typo="plex"] li { color: var(--ink-body); /* Deutsche Komposita brechen an Trennstellen, nicht mitten im Wort. `overflow-wrap: anywhere` hat hier einmal "Arbeitskraefteueberlass ung" erzeugt — dieselbe Falle nicht zweimal. */ hyphens: auto; } /* Lesetext bekommt ein Zeilenmass. Eine 1280 px breite Textzeile ist auch in der lesbarsten Schrift unlesbar. */ [data-typo="plex"] .lesetext { max-width: var(--mass); } /* ===================== Marken und Beschriftungen ==================== */ /* Die kleine Beschriftung ueber jedem Wert. Traegt nie Ziffern, darf deshalb unter 15 px stehen. */ [data-typo="plex"] .marke { font-family: var(--ff-data); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted); display: block; } /* ===================== Zahlen ======================================= */ /* Eigene Spur, eigener Grad, ausnahmslos mindestens 15 px — auch in Beschriftungen. "je 10.000 Einwohner" bei 12 px ist genau der Fall, in dem 10.000 und 1O.OOO zusammenfallen. */ [data-typo="plex"] .zahl { font-family: var(--ff-data); font-variant-numeric: tabular-nums; font-size: var(--t-zahl-s); font-weight: 400; color: var(--ink-strong); } [data-typo="plex"] .zahl-gross { font-size: var(--t-zahl-l); font-weight: 500; line-height: 1.1; } [data-typo="plex"] .zahl-mittel { font-size: var(--t-zahl); font-weight: 500; } /* ===================== Das sichtbare Raster ========================= */ /* Zwoelf Spalten als Haarlinien. Die Ordnung, an der sich der Leser festhaelt, ist sonst nur eingehalten und nicht ablesbar. Auf den Linien liegt nichts — sie markieren die Rinnen, der Inhalt steht in den Spalten. */ [data-typo="plex"] .werk { --spaltenbreite: calc((100% - (var(--spalten) - 1) * var(--rinne)) / var(--spalten)); position: relative; max-width: var(--werk-max); margin-inline: auto; padding-inline: var(--rand); } [data-typo="plex"] .werk::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; margin-inline: var(--rand); background-image: repeating-linear-gradient(to right, var(--line-hairline) 0 1px, transparent 1px calc(var(--spaltenbreite) + var(--rinne))); /* Unter dem letzten Inhalt laufen die Linien aus. Ein bis zur Fusszeile durchgezogenes Raster liest sich als abgeschnittene Tabelle; ein auslaufendes liest sich als Leere mit Absicht. */ mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 260px), transparent 100%); } [data-typo="plex"] .werk > * { position: relative; z-index: 1; } /* ===================== Register ===================================== */ /* Ein Register ist ein Abschnitt mit Nummer. Die Nummer steht gross und leise am linken Rand und traegt Ziffern — also Datenspur, >= 15 px. */ [data-typo="plex"] .register { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 var(--rinne); margin-block: var(--sp-block) 0; padding-block-start: var(--space-6); border-block-start: 1px solid var(--line-hairline); } [data-typo="plex"] .register-nr { font-family: var(--ff-data); font-variant-numeric: tabular-nums; font-size: var(--t-zahl-l); font-weight: 400; color: var(--ink-faint); line-height: 1; letter-spacing: -0.02em; } [data-typo="plex"] .register > h2 { margin: 0 0 var(--space-5); } @media (max-width: 700px) { [data-typo="plex"] .register { grid-template-columns: 1fr; } [data-typo="plex"] .register-nr { margin-block-end: var(--space-2); } } /* ===================== Die Aktenzeile =============================== */ /* Merkmal links, Wert rechts, Haarlinie dazwischen. Das ist die Form, in der eine Behoerde eine Auskunft gibt — und genau deshalb liest sie sich als Auskunft und nicht als Werbung. */ [data-typo="plex"] .akte { border-block-start: 1px solid var(--line-hairline); } [data-typo="plex"] .akte-zeile { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: var(--space-2) var(--rinne); align-items: baseline; padding-block: var(--space-4); border-block-end: 1px solid var(--line-hairline); } [data-typo="plex"] .akte-wert { font-size: var(--t-md); font-weight: 600; color: var(--ink-strong); } [data-typo="plex"] .akte-zusatz { grid-column: 2; font-size: var(--t-sm); color: var(--ink-muted); margin: 0; } @media (max-width: 700px) { [data-typo="plex"] .akte-zeile { grid-template-columns: 1fr; } [data-typo="plex"] .akte-zusatz { grid-column: 1; } } /* ===================== Herkunftsleiste ============================== */ /* Quelle, Stand und Pruefstand stehen OBEN, nicht klein unten. Herkunft ist bei einem Produkt, das Auskunft verkauft, das Verkaufsargument — nicht das Kleingedruckte. */ [data-typo="plex"] .herkunft { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; margin-block: var(--space-4) 0; padding-block: var(--space-3); border-block: 1px solid var(--line-hairline); } [data-typo="plex"] .herkunft-punkt { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--ff-data); font-size: var(--t-zahl-s); color: var(--ink-muted); } [data-typo="plex"] .herkunft-punkt::before { content: ''; inline-size: 6px; block-size: 6px; background: var(--brand); flex-shrink: 0; } /* ===================== Was hier nicht steht ========================= */ /* Ehrlichkeit ueber die Grenzen der eigenen Daten liest sich als Kompetenz. Der Abschnitt ist kein Haftungsausschluss im Kleingedruckten, sondern eine Angabe auf Augenhoehe. */ [data-typo="plex"] .grenzen { margin-block-start: var(--sp-register); padding: var(--space-6); background: var(--paper-sunken); border-inline-start: 2px solid var(--line-strong); } [data-typo="plex"] .grenzen ul { list-style: none; padding: 0; margin: var(--space-3) 0 0; } [data-typo="plex"] .grenzen li { position: relative; padding-inline-start: var(--space-5); margin-block-end: var(--space-3); font-size: var(--t-base); max-width: var(--mass); } [data-typo="plex"] .grenzen li::before { content: '\2014'; /* Geviertstrich, kein Aufzaehlungspunkt */ position: absolute; inset-inline-start: 0; color: var(--ink-faint); } /* ===================== Karten und Verweise ========================== */ [data-typo="plex"] .verweis { display: block; padding: var(--space-4); border: 1px solid var(--line-hairline); border-radius: var(--radius-sm); text-decoration: none; color: inherit; background: var(--paper-raised); transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); min-block-size: 44px; } [data-typo="plex"] .verweis:hover { border-color: var(--brand); background: var(--brand-tint); } [data-typo="plex"] .verweis strong { display: block; font-weight: 600; color: var(--ink-strong); margin-block-end: 2px; } [data-typo="plex"] .verweis span { font-size: var(--t-sm); color: var(--ink-muted); } /* ===================== Handlung ===================================== */ /* Eine Akzentfarbe, und sie traegt nur, was wirklich Handlung ist. */ [data-typo="plex"] .tat { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 44px; padding: var(--space-3) var(--space-6); background: var(--brand); color: var(--ink-on-brand); font-weight: 600; text-decoration: none; border-radius: var(--radius-sm); transition: background var(--dur-med) var(--ease-out); cursor: pointer; } [data-typo="plex"] .tat:hover { background: var(--brand-hover); } [data-typo="plex"] .tat-still { background: transparent; color: var(--ink-strong); border: 1px solid var(--line-strong); } [data-typo="plex"] .tat-still:hover { background: var(--paper-sunken); border-color: var(--brand); } /* ===================== Fragen ======================================= */ /* Base gestaltet `details` global als Karte mit Rahmen, Radius, Schatten und einem `!important` auf der Rahmenfarbe beim Ueberfahren. Auf einer Seite, die wie eine Auskunft aussehen soll, ist jede Frage sonst ein eigener Kasten — zehn Kaesten untereinander lesen sich als Formular, nicht als Register. Hier wird das zurueckgesetzt, und zwar nur hier. */ /* `!important` steht hier, weil Base es dort stehen hat (`border` und `border-radius` sind dort mit `!important` gesetzt). Ohne Gegenstueck gewinnt Spezifitaet nicht — nachgeprueft am gebauten Artefakt, nicht angenommen: der erste Versuch ohne `!important` hat sichtbar nichts geaendert. */ [data-typo="plex"] details { background: transparent; border: 0 !important; border-radius: 0 !important; box-shadow: none; padding: 0; margin: 0; overflow: visible; } [data-typo="plex"] details:hover { border-color: transparent !important; box-shadow: none; } [data-typo="plex"] details[open] { border-color: transparent !important; box-shadow: none; } [data-typo="plex"] details summary { background: transparent; border: 0; padding-inline: 0; } [data-typo="plex"] details[open] > summary { color: var(--ink-strong); } /* Die Trennlinie muss den Reset oben ueberstimmen, sonst nimmt `border: 0` sie mit — und zehn Fragen ohne Linie sind eine Liste ohne Ordnung. */ [data-typo="plex"] .frage { border-block-end: 1px solid var(--line-hairline) !important; } [data-typo="plex"] .frage > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); /* Ohne Deckel steht das Pluszeichen bei 1440 px gut tausend Pixel neben der Frage und gehoert optisch nicht mehr dazu. */ max-inline-size: 62ch; min-block-size: 44px; padding-block: var(--space-4); cursor: pointer; font-weight: 600; color: var(--ink-strong); list-style: none; } [data-typo="plex"] .frage > summary::-webkit-details-marker { display: none; } [data-typo="plex"] .frage > summary::after { content: '+'; font-family: var(--ff-data); font-size: var(--t-zahl-s); color: var(--ink-muted); flex-shrink: 0; } [data-typo="plex"] .frage[open] > summary::after { content: '\2212'; } [data-typo="plex"] .frage > div { padding-block-end: var(--space-4); max-width: var(--mass); } /* ===================== Kopf- und Fussleiste ========================= */ /* Base rendert beide global. Hier werden sie nur an die Stimme angepasst, nicht umgebaut — die Navigation soll auf allen Seiten dieselbe sein. */ [data-typo="plex"] header .logo, [data-typo="plex"] header a[href="/"] strong { font-family: var(--ff-display); font-weight: 600; letter-spacing: -0.01em; } [data-typo="plex"] footer { font-size: var(--t-sm); } /* ===================== Fokus ======================================== */ /* Sichtbar, in der Marke, nirgends entfernt. */ [data-typo="plex"] :focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; border-radius: 2px; } /* ===================== Bewegung, die etwas erklaert ================= */ /* Zwei Muster, beide nativ, keine Bibliothek. GSAP waere eine neue Abhaengigkeit UND eine externe Ressource — beides ausgeschlossen. REGEL, TEUER BEZAHLT: Bewegung darf nie die Geometrie tragen, die die Daten traegt. In den Entwuerfen hat sowohl die scroll-getriebene als auch die zeitgesteuerte Variante die Breite einer Datenachse unter realen Bedingungen auf null stehen lassen — einmal, weil das Element unter dem Fensterrand lag, einmal unter `--virtual-time-budget`. Ein leer gezeichnetes Diagramm sieht auf keinem Screenshot falsch aus. Faellt eine Bewegung aus, soll eine Bewegung fehlen — keine Zahl. */ /* 1 - Eintritt: neue Bloecke kommen aus dem Nichts statt zu springen. */ [data-typo="plex"] .tritt-ein { opacity: 1; translate: none; transition: opacity var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out); } @starting-style { [data-typo="plex"] .tritt-ein { opacity: 0; translate: 0 8px; } } /* 2 - Hoehe: Zustandswechsel laufen weich, sonst liest sich der Sprung als Neuladen. */ @supports (interpolate-size: allow-keywords) { html[data-typo="plex"] { interpolate-size: allow-keywords; } } @media (prefers-reduced-motion: reduce) { [data-typo="plex"] .tritt-ein { transition: none; } [data-typo="plex"] .verweis, [data-typo="plex"] .tat { transition: none; } html[data-typo="plex"] { interpolate-size: numeric-only; } } /* ===================================================================== DER BESTAND — die 152 Seiten ausserhalb von /gewerbe/ --------------------------------------------------------------------- Startseite, Wissen, Wachsen, Tools, Rechtliches und die sieben Sprachfassungen benutzen die gemeinsamen Bausteine aus Base: .card, .callout, .quick-facts, .breadcrumb, .disclaimer, .source-badge, table. Statt 152 Dateien umzuschreiben — jede mit dem Risiko, Inhalt zu verlieren — werden hier die BAUSTEINE auf dieselbe Sprache gehoben: flach, Haarlinie statt Kasten, eine Akzentfarbe. Das Markup dieser Seiten bleibt unangetastet. Was die Gewerbe-Seiten voraushaben, ist ihre eigene Ordnung (Akte, Register, Positionsachse); die Stimme ist ab hier ueberall dieselbe. ===================================================================== */ /* Auszeichnung bis h5 — Base setzt h1..h5 gemeinsam, die Regel oben deckte nur h1..h3 ab und h4/h5 waeren als einzige serifenlos geblieben. */ [data-typo="plex"] h4, [data-typo="plex"] h5 { font-family: var(--ff-display); font-weight: 600; letter-spacing: -0.008em; color: var(--ink-strong); } [data-typo="plex"] h4 { font-size: var(--t-lg); } [data-typo="plex"] h5 { font-size: var(--t-md); } /* ---------- Karten: flach, Haarlinie, kein Leuchten ------------------ */ [data-typo="plex"] .card, [data-typo="plex"] .trust-card, [data-typo="plex"] .gewerbe-card { background: var(--paper-raised); border: 1px solid var(--line-hairline); border-radius: var(--radius-sm); box-shadow: none; transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); } [data-typo="plex"] .card:hover, [data-typo="plex"] .trust-card:hover, [data-typo="plex"] .gewerbe-card:hover { border-color: var(--brand); background: var(--brand-tint); box-shadow: none; transform: none; /* kein Anheben — Layout darf nicht springen */ } /* Base zeichnet einen Farbverlauf ueber ::before auf jede Karte. */ [data-typo="plex"] .card::before, [data-typo="plex"] .trust-card::before { display: none; } [data-typo="plex"] .card > strong { font-weight: 600; color: var(--ink-strong); } [data-typo="plex"] .card .subtitle { font-size: var(--t-sm); color: var(--ink-muted); } /* ---------- Hinweiskaesten: Linie links statt Kasten ----------------- */ [data-typo="plex"] .callout { background: var(--paper-sunken); border: 0; border-inline-start: 2px solid var(--line-strong); border-radius: 0; box-shadow: none; backdrop-filter: none; padding: var(--space-4) var(--space-5); } [data-typo="plex"] .callout-info { border-inline-start-color: var(--brand); background: var(--brand-tint); } [data-typo="plex"] .callout-warning { border-inline-start-color: var(--rating-hoch); background: var(--rating-hoch-tint); } [data-typo="plex"] .callout-tip { border-inline-start-color: var(--rating-niedrig); background: var(--rating-niedrig-tint); } /* `display:block` gilt nur fuer die Ueberschriftszeile. Ohne `:first-child` landet jedes betonte Wort MITTEN IM SATZ auf einer eigenen Zeile — dieser Fehler ist in diesem Projekt schon zweimal passiert (.card strong, .warnung strong). */ [data-typo="plex"] .callout > strong:first-child { display: block; margin-block-end: var(--space-2); color: var(--ink-strong); font-weight: 600; } [data-typo="plex"] .callout p strong, [data-typo="plex"] .callout li strong { display: inline; } /* ---------- Auf einen Blick: dieselbe Aktenform wie die Gewerbe-Seiten */ [data-typo="plex"] .quick-facts { background: transparent; border: 0; border-block: 1px solid var(--line-hairline); border-radius: 0; box-shadow: none; padding: var(--space-2) 0 0; } [data-typo="plex"] .quick-facts::before { display: none; } [data-typo="plex"] .quick-facts h2, [data-typo="plex"] .quick-facts h3 { font-family: var(--ff-data); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted); margin-block: var(--space-3) var(--space-2); } /* `display: block` statt Base's `flex`. Im Flex-Kontext wird JEDES Kindelement zu einem eigenen Element — auf den Sprachseiten stand "(Befähigungsnachweis)" dadurch in drei Teilen mit Luecken dazwischen, die Klammern weit weg vom Wort. Als Block fliesst der Satz. Auf den deutschen Seiten aendert sich dadurch nichts Sichtbares: dort folgt auf das fette Label ohnehin nur Fliesstext. */ [data-typo="plex"] .quick-facts li { display: block; border-block-end: 1px solid var(--line-hairline); padding-block: var(--space-3); } [data-typo="plex"] .quick-facts li > strong { margin-inline-end: var(--space-2); } [data-typo="plex"] .quick-facts li:last-child { border-block-end: 0; } [data-typo="plex"] .quick-facts strong { font-weight: 600; color: var(--ink-strong); } /* ---------- Brotkrumen ----------------------------------------------- */ [data-typo="plex"] .breadcrumb { font-size: var(--t-sm); color: var(--ink-muted); padding-block: var(--space-4) var(--space-2); } [data-typo="plex"] .breadcrumb a { color: var(--ink-muted); text-decoration: none; } [data-typo="plex"] .breadcrumb a:hover { color: var(--brand); text-decoration: underline; } [data-typo="plex"] .breadcrumb strong { color: var(--ink-body); font-weight: 500; } /* ---------- Quellenmarke: Wortmarke statt gruener Pille -------------- */ [data-typo="plex"] .source-badge { background: transparent; border: 1px solid var(--line-subtle); border-radius: 2px; color: var(--ink-muted); font-family: var(--ff-data); font-size: var(--t-zahl-s); /* traegt Paragrafen und Ziffern */ padding: 1px var(--space-2); } [data-typo="plex"] .source-badge::before { content: none; } /* ---------- Rechtlicher Hinweis: wie "Was hier nicht steht" ---------- */ [data-typo="plex"] .disclaimer { background: var(--paper-sunken); border: 0; border-inline-start: 2px solid var(--line-strong); border-radius: 0; box-shadow: none; padding: var(--space-5) var(--space-6); font-size: var(--t-sm); color: var(--ink-muted); max-width: 78ch; } [data-typo="plex"] .disclaimer > strong:first-child { color: var(--ink-strong); } /* ---------- Tabellen: Haarlinien, Kopfzeile in Versalien ------------- */ [data-typo="plex"] table { inline-size: 100%; border-collapse: collapse; border-radius: 0; overflow: visible; box-shadow: none; } [data-typo="plex"] th { text-align: start; background: transparent; font-family: var(--ff-data); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted); border-block-end: 1px solid var(--line-subtle); padding: var(--space-3) var(--space-3) var(--space-3) 0; } [data-typo="plex"] td { border-block-end: 1px solid var(--line-hairline); padding: var(--space-3) var(--space-3) var(--space-3) 0; vertical-align: top; } [data-typo="plex"] tr:hover td { background: var(--paper-sunken); } /* ---------- Eingabefelder -------------------------------------------- */ [data-typo="plex"] input, [data-typo="plex"] select, [data-typo="plex"] textarea { font-family: var(--ff-text); font-size: var(--t-base); border-radius: var(--radius-sm); box-shadow: none; } /* ===================================================================== ARABISCH — Sperrung und Versalien sind hier ein Fehler, kein Stil --------------------------------------------------------------------- Die Beschriftungen dieser Seite stehen in Versalien mit 0,09em Sperrung. In arabischer Schrift REISST Sperrung die Verbindung zwischen den Buchstaben auf: aus einem Wort werden Einzelzeichen. Versalien gibt es in der Schrift ohnehin nicht — `text-transform` ist dort wirkungslos und `letter-spacing` schaedlich. Gefunden am gerenderten Bild von /ar/, nicht im Code. ===================================================================== */ [data-typo="plex"] [dir="rtl"] .marke, [data-typo="plex"] [dir="rtl"] .eyebrow, [data-typo="plex"] [dir="rtl"] .quick-facts h2, [data-typo="plex"] [dir="rtl"] .quick-facts h3, [data-typo="plex"] [dir="rtl"] th, [data-typo="plex"][dir="rtl"] .marke, [data-typo="plex"][dir="rtl"] .eyebrow, [data-typo="plex"][dir="rtl"] .quick-facts h2, [data-typo="plex"][dir="rtl"] .quick-facts h3, [data-typo="plex"][dir="rtl"] th { letter-spacing: normal; text-transform: none; /* Die Datenschrift (Sligoil) fuehrt kein Arabisch — ohne diese Zeile rendert die Beschriftung aus einer Ersatzschrift und faellt aus dem Satzbild. Direkt die Textschrift ist ehrlicher. */ font-family: var(--ff-text); font-weight: 600; }