/* @tillit-feld: css-anfang */ /* @tillit-reihenfolge: 10 */ /* ======================================== TILLIT TOKENS (L0) — die einzige Wurzel Stand: im Backend noch NICHT uebertragen. Ziel-Feld: "CSS - Anfang" (Shop-Design > Erweiterung durch individuelle CSS-Inhalte). WARUM :root UND WARUM DIESES FELD. Bis 2026-08-23 hing der Tokenblock auf der damaligen .sh-page. Folge: Header, Produktkarte und Login konnten ihn nicht erreichen und haben je einen eigenen Namensraum erfunden (--tbh-*, --pk-*, --pv-*, body.a_login). Vier Inseln fuer eine Palette. Auf :root erreichen ihn alle Kontexte — #Header, .catblog, body.a_login, .tb-page. Feld "CSS - Anfang" steht vor dem Werks-CSS; fuer Custom Properties ist das folgenlos, weil kein Werksselektor --tb-* auf :root setzt. Echte Regeln gehoeren deshalb NICHT hierhin, sondern nach "CSS - Ende". REIHENFOLGE BEIM TRANSFER: Diese Datei zuerst. HERKUNFT: pages/startseite/index.html (45 Token) und pages/beratung/index.html (42). 42 byte-identisch, null Wertdrift; die drei --tb-chrome-* standen nur auf der Startseite. Die Begruendungen sind aus beiden Bloecken uebernommen, nicht neu geschrieben. AUSSENWOHNER MIT --tb-PRAEFIX (Vermerk 2026-09-01, Befund B027): die folgenden Namen sind KOMPONENTEN-PARAMETER und wohnen mit Absicht bei ihrer Komponente statt hier — Pruefungen muessen sie nicht als fehlende Token nachsuchen: --tb-cookie-glass tillit-shop-dom.css (Cookie-Banner) --tb-cdrawer-w tillit-shop-dom.css (Vergleichs-Drawer) --tb-cdrawer-glass tillit-shop-dom.css (Vergleichs-Drawer) --tb-compare-mark tillit-shop-dom.css (Produktvergleich) --tb-kat-rand-links/-rechts tillit-shop-dom.css (Katalograster) Alles andere mit --tb-Praefix, was hier nicht steht, gibt es nicht. Offen bleibt die Hebung echter Rollen-Literale nach L0 (--tb-error #cd0a0a, Glas-Dichte 0.85, Ampeltrio) — eigener Termin. ======================================== */ /* ---- @FONT-FACE (Gate A, Kauf 2026-08-26) ---- Systemia Regular (Peregrin Studio, Web-Lizenz) und IBM Plex Mono Regular (npm @ibm/plex-mono 2.5.0, OFL 1.1) — je EIN Schnitt (400), wie in E1/E2 entschieden. Dateien und Lizenzen: assets/fonts/ (siehe README dort). DIE URLS SIND SHOP-PFADE: beide woff2 werden in den Template-Ordner nav/ hochgeladen (Weg laut e-vendo-Support); aus der generierten css/styles.css heisst das ../nav/. Die LOKALE Vorschau laedt diese Pfade nicht — local.css (kein-transfer) wiederholt beide Regeln mit den assets/fonts/-Pfaden und gewinnt lokal, weil sie NACH dieser Datei laedt (gleiche Familie + Deskriptoren: die spaetere @font-face-Regel ersetzt die fruehere, der Shop-Pfad wird lokal nie angefragt). font-display:swap: Text rendert sofort im Fallback (Inter), die Hausschrift tauscht nach. Der Preload des Sans-Schnitts gehoert beim Transfer nach {head_begin_trackingcode}: PFAD-KORREKTUR 2026-08-28 (Injektionstest am Livesystem): hier stand als Preload-Ziel "/nav/Systemia-Regular.woff2". Das ist eine ANDERE URL als die, die das @font-face unten anfragt, und der Unterschied faellt beim Lesen nicht auf: @font-face "../nav/…" loest gegen die generierte https://www.tillit-bikes.shop/4race_de/css/styles.css auf -> https://www.tillit-bikes.shop/4race_de/nav/… Preload "/nav/…" ist absolut ab Wurzel -> https://www.tillit-bikes.shop/nav/… Ein Preload auf die zweite URL waermt eine Datei vor, die niemand anfragt: der Browser laedt die Schrift trotzdem ein zweites Mal und meldet in der Konsole "preloaded but not used". Am Tag des Transfers, unter Zeitdruck, ist das genau die Sorte Fehler, die man nicht mehr findet. Beide Wege gemessen am 2026-08-28: /4race_de/nav/ und /nav/ liefern heute BEIDE 404 — die zwei woff2 sind noch nicht hochgeladen (offener Punkt aus Gate A). Der Shop faellt deshalb zurzeit auf Inter und die generische Monospace zurueck. GLYPHEN-CHECK Retail-Systemia (cmap, 2026-08-26): Euro, Umlaute, Eszett, deutsche Anfuehrungszeichen, Halbgeviert/ Geviert, Apostroph — alles vorhanden. (Der Trial-Schnitt hatte KEIN Euro-Zeichen; der Retail-Schnitt hat es.) */ @font-face { font-family: "Systemia"; src: url("../nav/Systemia-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../nav/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ---- FLAECHEN ---- PAPER IST WEISS (Token-Angleichung 2026-08-21). Der Name bleibt, damit die Rolle lesbar bleibt: --tb-paper ist der Grund der Seite, --tb-white die gehobene Flaeche. Das frueher hier stehende #f6f6f6 war latent, weil jede Sektion --lift traegt und damit ohnehin Weiss zeigt; es waere erst aufgefallen, wenn jemand eine Sektion OHNE --lift anlegt — und dann als Regelbruch. Sektionsgruende sind Weiss, Ink oder Bild. --tb-panel ist entfallen: im ganzen Repo ohne Verwender. --tb-panel-media ist KEIN Sektionsgrund, sondern Bildtechnik: ueber mix-blend-mode:multiply loescht dieses Grau den weissen Bildgrund von Freistellern exakt aus, das Rad bleibt stehen. Nicht als Flaeche verwenden — sonst ist es das erste graue Feld im System. */ --tb-paper: #ffffff; --tb-white: #ffffff; --tb-panel-media: #eaeaea; /* DAS BILDPANEL, EINE QUELLE (2026-09-19). Das Haus fuehrt ZWEI Kartenfamilien mit demselben Panel: .tb-fleet__media (unser Markup, tillit-system.css) und .catblog .item-image / .pic (Werks-Markup, das wir nicht schreiben koennen, tillit-produktkarten.css). Beide Bloecke trugen diese Werte bisher wortgleich in zwei Dateien, mit einem Kommentar auf jeder Seite, dass sie nicht auseinander- laufen duerfen — genau das, was ein Kommentar nicht halten kann. Sie stehen deshalb hier, und zwar als WERTE: die Regeln bleiben in ihren Dateien, weil die Werksfamilie ihre Mobil- und Reduced-Motion-Ausnahmen dort fuehrt und ein Umzug in die spaeter geladene system.css sie schlagen wuerde. NICHT hier, weil sie sich mit Grund unterscheiden: - die Standflaechen-KANTEN (Flotte 15/15/11/10 %, Katalog 20/20/12/9 %). Die Flotte fuellt ihr Panel mit object-fit:cover und beschneidet; der Katalog passt ein (max-width/max-height, mittig im Flex), das Rad steht dort schmaler in der Flaeche. Verschiedene Einpassung heisst verschiedener Fussabdruck — gemessen 2026-09-19. - der AUSLOESER der schmalen Stufe. Der Wert ist derselbe, Katalog schaltet ihn fensterbasiert (unter 880), die Flotte spaltenbasiert (600 bis 1023). Das ist Entscheidung P4 des Kanonisierungsplans und soll so bleiben. */ --tb-panel-ratio: 3/2; --tb-panel-pad: clamp(18px, 2vw, 28px); --tb-panel-pad-narrow: 12px; --tb-panel-stand: radial-gradient(50% 50% at 50% 50%, rgba(15, 15, 15, .21), rgba(15, 15, 15, 0) 72%); /* Der Hover-Zoom der Bildrollen. Vier Verwender im Kanon: Flottenkarte, Produktkarte, Bild-Text-Zeile und seit 24.09.2026 die Link-Kachel des Mosaiks (.tb-mosaic--nav, dort als 'scale', nicht als transform). Nur Scale, kein Lift — Hauskonvention. Zugleich das Mass der Lautstaerke-Regel (Motion-System) fuer ein Bild im festen Rahmen; seitenlokal steht 1.03 als Literal an den Portraits, an der Buehne der Link-Seite und an der angetippten Hero-Haelfte auf Touch (Startseite). */ --tb-panel-zoom: 1.03; /* Eine Rundung fuer das ganze System: Prozesskarten, Testbike-Panels und das Zitat im Statement teilen sie sich. 8px bei 14px Wurzel, in rem gesetzt, damit sie mit der Wurzelgroesse mitwaechst. */ --tb-radius: .5rem; /* ---- FOKUSRING (Entscheidung Max 2026-09-29) ---- EIN Ring fuer das ganze Haus. Vorher 32 Varianten in 59 Regeln: 1, 2 und 3px, Abstaende von -5 bis +6px, fuenf Farben, eckig neben rund. Jetzt: 2px Ink, 3px nach aussen, leicht rund. Auf dunklem Grund Weiss (Komponenten, die das wissen: Fuss, Social, Mosaik, Kopf ueber dem Hero); die Kanonseiten tragen zusaetzlich ihren weissen Halo, der den Ink-Ring auf Ink und Foto sichtbar macht und auf Weiss nicht zu sehen ist. NACH INNEN (-3px) nur, wo ein Container den aeusseren Ring abschneiden oder der Nachbar ihn verdecken wuerde (Drawer, Reiter, Sterne, Zoom, Lightbox, Icon-Knoepfe im Feld). DIE ECKEN: ein outline folgt dem border-radius seines Elements plus outline-offset. --tb-focus-radius ist der Radius des RINGS (6px); das Element braucht aussen 6 - 3 = 3px - genau die Werksrundung, die styles.css:371 jedem Fokus ohnehin gibt - und innen 6 + 3 = 9px, sonst schnitte der Versatz die Ecke auf 0. Elemente mit eigener Form (Pillen, Kreise, Karten) behalten sie; der Ring folgt ihr. */ --tb-focus-width: 2px; --tb-focus-offset: 3px; --tb-focus-inset: -3px; --tb-focus-radius: 6px; --tb-focus-color: var(--tb-ink); /* ---- TEXTSTUFEN ---- Neutral, nicht kuehl abgetoent: Textstufen und Hairlines folgen demselben Neutralwert, damit auf keiner Flaeche ein Farbstich entsteht. */ --tb-ink: #0f0f0f; /* Der Zustand der Ink-Flaeche: eine Stufe heller, damit ein Knopf auf Beruehrung antwortet, ohne die Farbe zu wechseln. Erster Verwender ist die Pillenfamilie in tillit-shop-dom.css, die den Wert bis 2026-08-28 dreimal als Zahl trug. */ --tb-ink-hover: #292929; /* Nachdunkelung 2026-08-30 (Entscheidung Max, an der PDP gefallen, gilt global): ink-1 #141414 -> #111111, ink-2 #3f3f3f -> #363636, muted #6a6a6a -> #585858. Die Ordnung bleibt: ink (Flaechen) < ink-1 (Titel) < copy-ink #292929 (Fliesstext) < ink-2 < muted. Muted auf Weiss steigt von 5,74:1 auf 7,25:1 — die Traggrenze (kein Grau unter 13px) gilt trotzdem weiter. */ --tb-ink-1: #111111; --tb-ink-2: #363636; --tb-muted: #585858; /* ---- HAIRLINES ---- Die Trennlinie des Systems. 1px, nie mehr. Gerahmte Karten gibt es nicht — Hairline-Listen. */ --tb-line: rgba(15, 15, 15, .13); --tb-line-strong: rgba(15, 15, 15, .22); /* ---- AUF INK ---- */ --tb-on-ink: rgba(255, 255, 255, .80); --tb-on-ink-muted: rgba(255, 255, 255, .55); --tb-line-ink: rgba(255, 255, 255, .15); /* ---- AKTIONSFARBE ---- Das alte Marken-Gold, ehem. --tillit-primary. Im Altsystem trug es alles: Eyebrows, Zahlen, Punkte, Rahmen, Buttonflaechen — rund 65 Fundorte. Im neuen System ueberlebt es an GENAU EINER Stelle: dem Chip im Ink-Button (.tb-btn--primary, seit 2026-09-05 die einzige Buttonstimme). Sonst nichts. Der Name sagt die Rolle: er markiert die Aktion. Wer ihn woanders einsetzt, holt den alten Look zurueck. */ --tb-action: #b59472; /* ---- CHROME (Kopfzeilen-Geometrie) ---- HOEHE DES SCHWEBENDEN SHOP-CHROMES. Auf Designsystem- Seiten liegen USP-Band und Headerzeile absolut ueber dem Hero (tillit-shop-header-v2.css, Abschnitt "HEADER V2 – FLOATING") und belegen null Dokumentfluss. Wer mobil etwas unter das Chrome stellen will, muss die Hoehe deshalb selbst kennen. BEWUSST IN ZWEI TEILEN, nicht als eine 83: die beiden Werte haben verschiedene Quellen und bewegen sich unabhaengig. Das Band kommt aus dem redaktionell gepflegten Specialarea-Feld "Header" — dort steht min-height:34px, gemessen sind es mobil 30px, und ein laengerer USP-Text kann es zweizeilig machen. Die Zeile ist Logo plus Polster aus "CSS - Ende". NACH DEM TRANSFER NACHMESSEN: #Header.getBoundingClientRect().bottom bei 390px Breite, dann beide Teilwerte setzen. */ --tb-chrome-band: 30px; --tb-chrome-row: 53px; --tb-chrome-h: calc(var(--tb-chrome-band) + var(--tb-chrome-row)); /* ---- SCHRIFT ---- ENTSCHIEDEN 2026-08-23, GEKAUFT 2026-08-26: Systemia als Hausschrift, IBM Plex Mono als zweite Stimme — beide in EINEM Schnitt (400), beide als woff2 im Template-Ordner nav/. Die @font-face-Regeln stehen am Kopf dieser Datei. Inter bleibt ZWEITER Stack-Eintrag mit Absicht: es ist der Fallback, falls Systemia je ausfaellt — dann rendert die Seite im Shop-Grundton statt im System-Sans. Seit dem Schrift-Abschnitt in tillit-shop-dom.css (L2, 2026-08-26) gilt Systemia auch auf dem WERKS-DOM (body, h1-h6, Formularelemente) — Entscheidung Max: kein Inter mehr, ueberall die Hausschrift, im Shop wie in der Vorschau. VORSCHAU vs. SHOP ab jetzt BEWUSST verschieden: die Vorschau zeigt die gekaufte Systemia, der Shop bis zum Gate-A-Transfer weiter Inter. Wer im Shop nachmisst, misst den alten Stand — die Mono-Grade-Nachmessung (Gate A, letzter Schritt) passiert erst NACH dem Upload. ZWEITE STIMME: alles, was Label ist (Eyebrow, Kennziffer, Fakt), laeuft in Mono — Versalien, weit gesperrt, klein. Damit trennt sich Auszeichnung sichtbar von Aussage, ohne dass dafuer Farbe gebraucht wird. Genau die Aufgabe, die vorher das Gold uebernommen hat. */ --tb-sans: "Systemia", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --tb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --tb-mono-tracking: .05em; /* ---- FLIESSTEXT ---- Kompakteres, ruhigeres Satzbild in Richtung der Ayocin-Referenz, ohne eine zusaetzliche Schrift zu benoetigen. Diese gemeinsamen Werte bilden die Basis fuer Fliesstext und Leads. WURZEL IST 14px (e-vendo-Backend UND local.css), nicht 16. Alle rem-Werte rechnen danach: 1rem = 14px, .72rem = 10,1px. Die Wurzelgroesse ist kein Hebel fuer Schriftgroessen — sie verformt das Design, statt es zu skalieren. GEWICHT: 400 ist der einzige Schnitt des Systems. --tb-copy-weight bleibt als Token bestehen, weil der Bestand ihn liest; neue Komponenten deklarieren ueberhaupt kein font-weight mehr. Siehe den Reset in tillit-base.css. */ --tb-copy-weight: 400; --tb-copy-leading: 1.55; --tb-copy-tracking: -.012em; --tb-lead-leading: 1.48; --tb-lead-tracking: -.016em; --tb-copy-size: clamp(1rem, 1.15vw, 1.08rem); --tb-lead-size: clamp(1.05rem, 1.35vw, 1.16rem); --tb-proof-size: clamp(1.1rem, 1.55vw, 1.32rem); /* ---- LABEL-GRADE ---- ENTSCHEIDUNG MAX 2026-09-01: 0.72rem sind bei 14px-Wurzel 10,08px - als STANDARD-Label zu klein. Zwei Grade, EIN Drehpunkt pro Grad: --tb-font-label (0.78rem = 10,92px): der Standard-Grad der Mono-Auszeichnungsstimme - Filterkoepfe, Spaltenkoepfe, Eyebrows/Kicker und vergleichbare Label-Rollen. --tb-font-label-s (0.72rem = 10,08px): der Mikro-Grad, NUR fuer schwebende Feldlabels und echte Fussnoten-Auszeichnung - keine neuen Verwender ausserhalb dieser zwei Rollen. Der Navigations-Grad der Kopfzeile bleibt bewusst eigenstaendig (Gate-A-dokumentiert) und haengt NICHT an diesen Token. */ --tb-font-label: 0.78rem; --tb-font-label-s: 0.72rem; /* ---- TITEL-RAMPE ---- Bis 2026-08-26 lebten die Displaygroessen NUR als lokale clamp()-Werte in den Komponenten (.tb-head__title in tillit-system.css, #headline der Formularseiten) — es gab keine fluiden Titel-Token. --tb-title-size ist die Seitentitel-Stufe — erster Verwender ist das #headline der Werks-Formularseiten (tillit-shop-dom.css). --tb-display-size ist seit 20.09.2026 der RIESENGRAD (Copy- Durchgang, Entscheidung Max: Riesengrad = Buehnengrad, auch auf Weiss und Ink). Bis dahin stand hier der Wert des normalen Sektionskopfs ohne einen einzigen Leser (reserviert im Checker). Die Kurve ist die alte Mobil-Rampe des Buehnenkopfs (clamp(2.35rem,10.4vw,2.95rem), bis 767) und seine 768er-Rampe (clamp(2.6rem,7.65vw,min(9.0275rem,max(7.85rem,7.1vw)))) in EINEM Ausdruck nach dem Kanon-Muster vom 18.09. (Rampe statt Stufe): 390 -> 40,56 px, 768 -> 58,75, 1440 -> 109,90, ab 1920 -> 126,39. Einziger Unterschied zum Bestand: 541 bis 767 laeuft der Grad stetig (7.65vw) statt bei 41,3 eingefroren zu stehen — die 42-Prozent-Kante bei einem Pixel ist weg. Leser: .tb-head__title--xl in tillit-system.css. */ --tb-display-size: clamp(2.35rem, max(min(10.4vw, 2.95rem), 7.65vw), min(9.0275rem, max(7.85rem, 7.1vw))); --tb-title-size: clamp(2.1rem, 3.4vw, 3.2rem); /* AUSSAGEGRAD (seit 2026-09-06, Statement-Neuschnitt): der Grad, in dem das System eine Aussage setzt - bis dahin nur als lokaler clamp() im Zitat (.tb-quote p). Seit dem Neuschnitt der Statement-Sektion (Canvas "Statement-Sektion", Richtung B) traegt ihn der Absatz des Statements: der Absatz IST dort die Aussage. 42px bei 1440, 24,5px am 390er-Boden. ZEILENGRAD (Token seit 2026-09-06): der Grad einer Zeile, die ueber etwas steht - Modellzeile (.tb-model__name), Zeilentitel (.tb-row__title) und seit dem Titelgrad-Vergleich der Titel des Statements als Vorzeile ueber der Aussage (Entscheidung Max 06.09.2026: "b ist gut" - 0,7 des Aussagegrads, damit die Hierarchie auch nach dem Leselicht steht, wenn Titel und Absatz beide weiss sind). 29,4px bei 1440, 21px am 390er-Boden. Die beiden Altverwender fuehren den Wert noch als lokalen clamp() - ihre Umstellung auf den Token ist ein eigener, sichtbarer Schritt (wie bei --tb-display-size). */ --tb-statement-size: clamp(1.75rem, 3.6vw, 3rem); --tb-row-size: clamp(1.5rem, 2.6vw, 2.1rem); --tb-copy-ink: #292929; --tb-copy-on-ink: rgba(255, 255, 255, .94); /* ---- UNTERSTRICH-KONVENTION ---- Uebernommen aus tillit-feldspiegel-alt.css:33-58, wo die vollstaendige Herleitung steht. EINE Logik fuer Nav, Footer, Drawer, Panel und Seiten-Links: bottom: calc(50% - var(--tb-underline-font) - var(--tb-underline-gap)) "bottom" misst ab der Padding-Box, nicht ab dem Text. Rechnet man den Weg von der Padding-Box-Unterkante bis zur Grundlinie durch, kuerzt sich die Zeilenhoehe heraus und es bleiben zwei Fontkonstanten und der Design-Knopf. Vorteil: unteres Padding UND hoehere Geschwister in Flex-Zeilen (Pfeil-Icons) sind automatisch mit erledigt. em ist hier richtig: der Abstand zur Grundlinie ist eine typografische Groesse und soll mit der Schrift skalieren. Die Linienstaerke bleibt 1px. --tb-underline-font ist eine FONTKONSTANTE (Inhaltsbox/2 minus Unterlaenge) und gilt fuer Inter. NACH DEM WECHSEL AUF SYSTEMIA EINMAL NACHMESSEN. --tb-underline-gap ist der Design-Knopf: groesser = weiter weg vom Text. */ --tb-underline-font: .365em; --tb-underline-gap: .17em; /* ======== MOTION-TOKENS (Kernel v1.0) ======== Verbindlich dokumentiert in docs/strategy/tillit-motion-system.md. Konstanten des Systems liegen unter --tb-*, Instanzwerte pro Element unter --sh-* (--sh-i, --sh-par, --sh-pin-x). DREI KURVEN, nach Ursache getrennt: --tb-ease-entry ist die Auftrittskurve. Die alte (0.16,1,0.3,1) ist so weit nach vorn gezogen, dass ein Element nach einem Zehntel der Laufzeit schon halb da ist (52% nach 150ms bei 1,4s) und die restlichen 0,7s unsichtbar von 0,97 auf 1,0 kriechen — der Hero-Auftritt war deshalb vorbei, bevor man ihn als Auftritt las. Fuer LANGE Auftritte braucht es eine Kurve, die ihre Zeit auch benutzt. Fuer KURZE Reaktionen ist dieselbe Vorwaertslage dagegen richtig: ein Klick soll sofort quittiert werden. Deshalb bleibt die alte Kurve als --tb-ease-snap erhalten, und --sh-cine zeigt darauf — Panel-Blende, Tabline und Bildwechsel behalten ihr Gefuehl. */ --tb-ease-entry: cubic-bezier(0.33, 0.02, 0.24, 1); --tb-ease-snap: cubic-bezier(0.16, 1, 0.3, 1); --tb-ease-state: cubic-bezier(0.22, 0.61, 0.36, 1); /* Dauern nach Ursache benannt, nicht nach Groesse. */ --tb-dur-state: .35s; --tb-dur-click: .5s; --tb-dur-enter: .7s; --tb-dur-stage: 1.1s; --tb-dur-intro: 1s; --tb-dur-drift: 2.6s; /* Wege — alles kommt von unten. Bewusst groesser als der erste Ansatz (12/20/34): mit halbierter Dichte tragen die verbliebenen Auftritte mehr Amplitude, ohne dass die Seite unruhig wird — wenige, deutliche Bewegungen statt vieler kleiner. */ --tb-move-near: 18px; --tb-move-far: 30px; --tb-move-lift: 48px; /* Unschaerfe: zwei Werte, Ende der Skala. */ --tb-blur-soft: 4px; --tb-blur-deep: 10px; /* Takt: zwei Werte in exakter Verdopplung. Der Cap zaehlt in Schritten, nicht in Zeit — damit laeuft eine sechszeilige Liste vollstaendig durch, statt hinten gleichzeitig anzukommen. */ --tb-stag-step: 45ms; --tb-stag-beat: 90ms; --tb-stag-cap: 6; /* ---- INSEL UND BREITBILD (Entscheidung Max 17.09.2026, Canvas "Breitbild-Verhalten": Richtung D plus Buehnenboden aus B; Befund docs/strategy/breitbild-pruefung-2026-09-17.md) ---- Das System wurde bei 390 und 1440 abgenommen; ueber 1440 hatte es keinen Entwurf. Fuenf Kappen (Kanon 1600, Kopfzeile 1460, Footer 1480, Werks-DOM 1400, USP-Band 1200) fielen nur bis 1460 an einer Kante zusammen, jede Schrift-Rampe deckelte zwischen 1070 und 1440, die randlosen Buehnen wuchsen weiter. --tb-col ist seit dem 17.09. DIE Inhaltsbreite des Shops (die "Insel"). Bis dahin stand sie als Werksmass 1400 an der STATION FLUCHTLINIE in tillit-shop-dom.css und galt nur den Werks-DOM- Seiten. Jetzt fahren Kanon-Huelle (.tillit-container, plus 4rem Polster), Werks-DOM-Rahmen (Krume, Listenleiste, Karten- raster, Kopf, Inhaltsrahmen, PDP, Vergleich, Unternavigation), Footer (plus 48px Polster) und der linke Hero-Text der Startseite dasselbe Mass. Die KOPFZEILE NICHT: Wortmarke und Warenkorb bleiben 24px vom Fensterrand (tillit-shop-header-v2.css). Text, Karten und Hairline-Zeilen brauchen die Kante, Fotos und Kopfzeile nicht - komplett randlos (Richtung E) liess bei 2560 Hairline-Zeilen 2500px laufen und den Split-Kopf in zwei Inseln zerfallen. 1700: bei 1920 nur 110px Rand je Seite, wirkt randnah; bei 2560 430px. Unter 1756px Fensterbreite ist die Kanon-Huelle fenster- begrenzt. Bei 1440 aendert sich NICHTS - Hash-Gate ueber alle 56 Vorschauseiten bei 1425 Layoutbreite (1440 mit Scrollbar), 17.09.2026. Einzige messbare Folge ohne Scrollbar (Overlay- Scrollbars, macOS): die Werks-DOM-Rahmen liegen bei exakt 1440 nicht mehr 5px unter der Fensterkante, sondern auf ihr. USP-Band (1200, tillit-shop-specialarea-header.css) bleibt die eine bewusste Ausnahme - offen. --tb-wide WAR die Breitbild-STUFE der Display-Rollen: 1 bis 1919px, 1,15 ab 1920. Der Gedanke dahinter bleibt richtig - eine Rampe entlang 7vw ohne Deckel haette den Hero-Titel auf 3440x1440 mit 241px in ein 1440px hohes Fenster gestellt, und Lesetext waechst ohnehin nie mit, weil Lesegroesse am Abstand zum Auge haengt und nicht an der Monitorbreite. SEIT DEM 18.09.2026 IST DAS TOKEN STILL: keine Regel liest es mehr, und der 1920er Block am Dateiende ist gefallen. Grund war die Kante der Stufe - gemessen bei 1918, 1919, 1920 und 1921 sprang der Hero-Titel von 89,6 auf 103,04 px, der Buehnenkopf von 109,9 auf 126,39: 15 Prozent auf ein Pixel Fensteraenderung, also die Sprungstelle zwischen Nachbarbreiten, die der Pruefplan als Befund fuehrt. An seine Stelle tritt dieselbe Kurve als Rampe, gebaut aus clamp, min und max, Herleitung bei .tb-hero__title in tillit-system.css. Das Token bleibt als Anker der Begruendung stehen; wer es wieder lesen will, hebt damit nur eine Kante zurueck ins System. */ --tb-col: 1700px; --tb-wide: 1; /* ---- BILDBUEHNE ---- Amplitude der scrollgebundenen Tiefe. Stand bisher ausserhalb des Tokenblocks (index.html:325 / beratungsprozess.html:235 (heute pages/beratung/index.html)) und wurde deshalb in keiner Zaehlung mitgefuehrt. 6vh am Prueftstand entschieden (Canvas "Bildbuehnen im Scroll", 2026-08-21): auf der 84vh-Buehne wandert das Bild damit um 6,5 % des Scrollwegs. Nach oben begrenzt: ab 10 % verschiebt sich das Bild je 100px Scroll um mehr als eine Drittel-Zeilenhoehe gegen den stehenden Text — der Punkt, an dem Parallax billig aussieht und den WCAG 2.3.3 meint. Mobil eine Stufe leiser, weil Touch-Flicks ein Vielfaches der Mausrad-Spitze erreichen und der Faktor die Scrollgeschwindigkeit multipliziert. */ --tb-stage-amp: 6vh; /* ---- GEHALTENE BUEHNE (Register .tb-hero--pin, 2026-09-20) ---- Der Hero fordert KEINE zusaetzliche Scrollstrecke, er gibt seine vorhandene ab: .tb-hero ist ohnehin eine Fensterhoehe hoch und bleibt stehen, waehrend die erste Folgesektion ihn nimmt. Die Haltestrecke ist damit genau 1,00 Viewport und kostet null Dokumenthoehe - Seitenlaenge, Anker, LCP und jede abgenommene Messung bleiben gleich. Gemessener Referenzwert (White Desert, awwwards SOTD 11.09.2026): Halt 1,00 vh. Auf flachen Fenstern (Telefon quer, Zoom, 200 % Schrift) ist der Hero hoeher als das Fenster; dann scrollt er erst um die Ueberhoehe mit und haelt an seiner Unterkante (Haftversatz aus initHeroHold, 23.09.2026, Befund H01). Die Tempi unten bleiben dieselben. RESERVE 8vh statt der 6vh von --tb-stage-amp: Hub und Zoom laufen zusammen: bei 900 px Hoehe wandert das Bild 108 px und waechst um 10 %. Mit 6vh blieben oben nur 18 px Deckung, mit 8vh sind es 36 px. Ueber 13 Messpunkte in Chrome 153, Firefox 153 und WebKit 26.5 gibt das Bild an keiner Stelle eine Kante frei. RICHTUNG: das Bild STEIGT (von +4vh nach -8vh), also mit dem Text und langsamer als er. Damit ordnen sich vier Ebenen nach Geschwindigkeit - Kappenzeile, Titel, Fliesszeile, Bild - und die Staffelung wird durchgehend. Der Kanon-Parallax faehrt umgekehrt (nach unten); unter dem Halt waere das eine Gegenbewegung zum Text und laesst die Zeilen bei groesseren Werten kippen. DREI ZEILEN, DREI TEMPI: der Abstand zwischen schnellster und langsamster Zeile ist 99 px auf 900 - sichtbar als Tiefe, zu wenig, um die Zeilengruppe auseinanderzureissen. Die Tempi sind scrollgebunden; wie der Kopf GEHT, steht beim Abgang unten (seit 24.09.2026 eine ausgeloeste Abfolge, keine Blende am Scroll). NAHT: der Verlauf haengt an der VORDERKANTE der Folgeflaeche, nie am Herofuss - am Fuss ist er das Erste, was die hochfahrende Flaeche verdeckt, sichtbar bleibt dann nur ihre harte Kante. Er schrumpft beim Steigen auf null (--tb-seam-ende), weil ein Verlauf konstanter Hoehe als Nebel durch die helle Bildmitte wandert. Weich gehoert er an den dunklen Bildfuss, aus dem er kommt. Mobil eine Stufe leiser im BILD und seit 23.09.2026 (Entscheidung Max, Befund H33) auch in den ZEILEN: Touch-Flicks multiplizieren den Faktor (dieselbe Begruendung wie bei --tb-stage-amp). Vorher blieben die Zeilentempi mobil stehen, waehrend das Bild gedaempft war - gegen das Bild wanderten die Zeilen dann 37-65 % LAUTER als am Desktop (je 100 px Scroll 25/19/15 px statt 18/13/9). Die Mobilwerte im Block am Dateiende stellen das Verhaeltnis Zeile zu Bild wieder auf den Desktop. Der Halt selbst bleibt mobil vollwertig - "Pin nur ab 768px" ist die Restfassung, die der Pin-Canvas vom 22.08.2026 verworfen hat. */ /* RESERVE UND WEG HAENGEN ZUSAMMEN. Der Weg ist eine Zeile (--tb-hero-nach), aber er hat eine Decke: das Bild darf an keinem Punkt eine Kante freigeben. Gerechnet bei 900 px Hoehe und Zoom 1,10 waechst der Kasten um 104 px, je 52 nach oben und unten; mit 8vh Reserve lag die Grenze bei rund -12vh und nur noch 16 px Rest. Deshalb 10vh: -12vh hat damit 36 px Luft, und es bleibt Platz, den Weg noch einmal zu verlaengern. Verstaerkt 20.09. von -8vh auf -12vh (Ansage Max): 16vh Gesamtweg statt 12vh, ein Drittel mehr. */ --tb-hero-reserve: 10vh; --tb-hero-push: 1.1; --tb-hero-von: 4vh; --tb-hero-nach: -12vh; --tb-rise-eyebrow: .36; --tb-rise-title: .3; --tb-rise-lead: .25; /* ABGANG DES KOPFES (2026-09-20, Befund Max "der Herotext bleibt ziemlich stehen und praesent"). Nachgerechnet: der Kopf steigt mit 0,30x, die Folgeflaeche mit 1,00x - sie holt ihn erst bei rund 65 % der Haltestrecke ein. Bis dahin stuende er fast still und truege die ganze Aufmerksamkeit, obwohl die Buehne laengst uebergibt. Er geht deshalb vorher. SEIT 24.09.2026 EINE AUSGELOESTE ABFOLGE, KEINE BLENDE AM SCROLL (Entscheidung Max). Bis dahin liefen Deckkraft und Unschaerfe am Scrollweg mit (0 bis 40 % Desktop, 12 bis 55 % mobil). Wer mitten darin anhielt, liess den Kopf halb durchsichtig und halb verwischt stehen - gesehen auf Road & Gravel, Titel und Lead verschmiert, CTA als Geist. Ein eingefrorener Zwischenstand liest sich als Darstellungsfehler, nicht als Absicht. Jetzt ist der Text an jeder Scrollstelle entweder ganz lesbar oder ganz weg; Zwischenstaende gibt es nur waehrend der kurzen Abfolge. Am Scroll bleiben Bild, Zeilentempi, Naht und Folgeflaeche - ihre Zwischenstaende sehen gut aus. Die Schwellen setzt der Kernel (initHeroHold) als zwei Marken in den Seitenfluss; ein IntersectionObserver schaltet .is-leaving am Hero (kein Scroll-Listener), unter der Rueckkehrschwelle .is-returning. .is-leaving ist DIE Zustandsklasse des Abgangs - Paket 4 haengt den Kontrast-Hof (.tb-hero--hof) daran. HYSTERESE: gehen bei --tb-hero-leave, zurueck erst --tb-hero-hysterese tiefer (mindestens 40 px), damit Stillstehen oder +-5 px Zittern an der Schwelle nie umschaltet. Ausserdem haelt die Geometrie: der Kopf geht spaetestens, wenn die Folgeflaeche noch --tb-hero-vorlauf (Anteil der Fensterhoehe) unter seiner untersten Zeile steht (mit deren Tempo gerechnet) - dort ist der Text also weg, bevor sie ihn erreicht, und bleibt vorher voll lesbar. Mobil entscheidet sie (390x844: 147-226 px Scroll statt vorher ~130 px bis zur unlesbaren Lead), am Desktop die 10 %. Alle drei als Zahl, der Kernel liest sie mit parseFloat: KEIN calc(). Die Abfolge folgt dem Intro: Kappenzeile, Titel (+1 Takt), Lead, CTA und Fuss (+2 Takte), je --tb-hero-leave-dur mit der Auftrittskurve, gesamt 0,88 s; sichtbar ist der Text nach rund 0,7 s weg (die Kurve laeuft lang aus). Deckkraft fuehrt. Unschaerfe NUR auf der Display-Typo (Kappenzeile und Titel), gedeckelt auf --tb-hero-leave-blur und erst in der zweiten Haelfte der eigenen Blende; Lead, CTA und Fuss gehen nur ueber die Deckkraft - Lesetext wird nicht unscharf (Satz 2 des Motion-Systems). DIE SCROLL-UHR (Satz 4: Scroll >= 0,7 s), nicht die Klick-Uhr: der Abgang ist eine Reaktion auf Scrollen. Die erste Fassung (24.09., 0,5 s je Zeile mit der Zustandskurve, gesamt 0,68 s) stand nach 100 ms auf halber Deckkraft und las sich schnappend, nicht als gespiegeltes Intro. Kuerzer als der Auftritt (1,1 s je Zeile) bleibt sie trotzdem. GRENZE: "weg, bevor die Folgeflaeche ihn erreicht" gilt nur fuer LANGSAMES Scrollen - die Abfolge hat eine feste Dauer, die Kante nicht. Gemessen (24.09.2026, zweite Pruefrunde; Chromium, gleich- maessiges Scrollen, Deckkraft in dem Bild, in dem die Kante die Zeile erreicht): 390x844, beim Abgang 110 px Luft unter dem CTA und 190 px unter dem Lead - CTA bis 200 px/s weg (<= 0,07), bei 300 px/s 0,37, bei 400 px/s 0,75; Lead bis 300 px/s weg, bei 400 px/s 0,15, bei 600 px/s 0,53-0,63. SE (74 px Luft): CTA schon bei 150 px/s 0,11-0,13, bei 250 px/s 0,65; Lead bis 250 px/s weg. 1440x900 (168 bis 242 px): CTA bis 350 px/s weg, bei 600 px/s 0,23-0,64. Schon ruhiges Ziehen schiebt die Ink-Kante also ueber einen noch sichtbaren CTA - als saubere Ueberdeckung wie bei gestapelten Karten, nie verschmiert oder eingefroren; die Abfolge laeuft unter der Flaeche zu Ende. Weiter hinaus schoebe die Grenze nur ein groesserer Vorlauf (kostet die Lesestrecke, die Max am 23.09. wollte) oder eine kuerzere Abfolge (gegen Satz 4). */ --tb-hero-leave: .1; --tb-hero-hysterese: .06; --tb-hero-vorlauf: .16; --tb-hero-leave-dur: var(--tb-dur-enter); --tb-hero-leave-blur: 6px; /* Der Schleier hebt mit dem Kopf. Er ist fuer den TEXT da, nicht fuer das Motiv: gemessen an der DEITY-Buehne (20.09.) traegt die Kappenzeile mit dem dortigen Seiten-Schleier 3,40 und mit dem Kanon-Schleier nur 2,45 - aufhellen im Ruhezustand bricht also die Lesbarkeit, das Motiv hat einen sehr hellen Himmel. Sobald der Kopf weg ist, hat der Schleier keine Aufgabe mehr und geht auf diesen Restwert zurueck - erst in der ZWEITEN Haelfte der Abfolge, wenn der Text schon fast weg ist, beim Rueckweg zuerst. Das Bild ist damit genau dann am offensten, wenn nichts mehr mit ihm konkurriert. Nicht auf 0: der Rest traegt weiter die Kopfzeile oben (sie steht ueber der Buehne) und die Tiefe zur Naht hin. KURVE UND DAUER (24.09.2026, Designpruefung Paket 3): der Schleier ist die groesste Helligkeitsaenderung der ganzen Folge - gemessen hellt das Bild um 13 bis 41 % auf (Atherton und DEITY am meisten; Stand 24.09., seit Paket 4 kommt auf vier Seiten der Kontrast-Hof dazu, Messung und offene Entscheidung in tillit-system.css beim Hof). In der ersten Fassung lief er 0,34 s mit der Zustandskurve: 80 % der Aenderung in rund 150 ms, bis 12 Helligkeitsstufen je 50 ms, auf dem Rueckweg ebenso schnell zurueck - ein Lichtschalter. Jetzt hebt er ueber --tb-hero-leave-dur (0,7 s) und sinkt beim Rueckweg ueber --tb-dur-click plus einen Takt (0,59 s; der Text kommt einen Takt spaeter auf dunklen Grund), beide Male mit dieser symmetrischen Kurve (Sinus): sie beginnt und endet weich und hat die flachste Spitze, rechnerisch 1,6-mal die mittlere Steigung. Gemessen auf Atherton (Bildrand, 1440x900): hoechstens 3,7 Stufen je 50 ms beim Abgang, 80 % erst 510 ms nach Beginn der Schleierblende; mit 0,5 s beim Rueckweg stand es genau auf 5,0, daher der Takt dazu. Die Auftrittskurve waere bei 0,7 s rechnerisch schon ueber 5, die Zustandskurve bei 6. Eine Bauteil-Kurve, kein Systemtoken: es gibt keinen zweiten Verwender (Motion-System, Abschnitt 1, "Was hier nicht steht"). */ --tb-hero-scrim-ende: .5; --tb-hero-scrim-kurve: cubic-bezier(0.37, 0, 0.63, 1); --tb-seam: 26vh; /* Anteil der Haltestrecke, nach dem die Naht eine harte Kante ist. Als Zahl, nicht als Prozent: calc darf durch eine Zahl teilen, durch einen Prozentwert nicht. */ --tb-seam-ende: .55; /* ---- LESELICHT ---- Die zweite Zustandsschicht (Motion-System Abschnitt 6, seit 2026-09-06): der Statement-Absatz steht gedaempft und wird hell, sobald die Leselinie ueber ihn laeuft. Zwei Knoepfe: --tb-read-inset ist die Einrueckung der Sichtachse am unteren Fensterrand - die Kante des eingerueckten Fensters IST die Leselinie, 30 % heisst: sie liegt bei 70 % der Fensterhoehe, also unter dem Lesefokus (der Text ist hell, bevor das Auge ihn erreicht). --tb-read-dim ist die Alpha des ungelesenen Textes; nicht unter .4, sonst faellt Weiss auf Ink unter 4:1. */ --tb-read-inset: 30%; --tb-read-dim: .42; /* ---- SEKTIONSRHYTHMUS ---- Der Abstand an jeder Sektionskante. Entscheidung Max 24.09.2026: Variante "Mehr" der Rhythmus-Studie (prototypen/abstand-rhythmus.html, Modell "Breite" mit der Hoehenkopplung aus "Minimal"). Bis dahin hingen alle Polster nur an vh: ein 1440x560-Fenster (DevTools offen) hatte dieselbe Schrift wie 1440x900, aber 67 statt 108 px Luft, und am Telefon sprang der Rhythmus bei 767/768 um bis zu 45 %. Jetzt: --tb-rhythm die Hoehe atmet weiter (12vh), aber nie flacher als 16:9 gerechnet (6.75vw = 12 % von 56,25vw); die Decke ist eine Breitenrampe 64 px bei 390 -> 140 px ab 1587. Kein Breakpoint: schmale Fenster fuehrt die Breite. --tb-section-y der Schritt, Faktor 1.15 = "Mehr" (die Studie verglich 1 / 1.15 / 1.3; nur diese Zahl unterscheidet die Varianten). 124 px bei 1440x900, 112 bei 560, 149 bei 1920x1080, 74 bei 390. --tb-section-y-air Luft-Stufe fuer --air und Statement, 4/3 des Schritts (derselbe Faktor wie frueher 16vh zu 12vh). NAHTREGEL (tillit-system.css, Abschnitt Sektions-Huelle): an einer sichtbaren Flaechenkante (Weiss/Ink) steht die letzte Tinte darueber so weit von der Kante wie die erste darunter - beide Seiten nehmen den groesseren Schritt. Gleichfarbige Folgen addieren. Abgeleitet, ohne eigenes Token (steht an den Regeln): die Bildkante clamp(2.7rem, 18.42vw - 2.431rem, Schritt), 38 px am Telefon, der volle Schritt ab rund 710 px Breite. --tb-head-gap bleibt davon unberuehrt. */ --tb-rhythm: clamp(4.5rem, max(12vh, 6.75vw), clamp(4.571rem, 2.803rem + 6.349vw, 10rem)); --tb-section-y: calc(var(--tb-rhythm) * 1.15); --tb-section-y-air: calc(var(--tb-section-y) * 4 / 3); /* ---- KOPFABSTAND ---- Der Abstand zwischen einem Sektionskopf (.tb-head, .tb-index als Kopf) und dem Block darunter (Liste, Raster, Band, Register). Bis 2026-09-02 setzte jeder Folger seinen eigenen Wert, gemessen bei 1440: 5vh (Flotte, Startseiten-Tabs), 6vh (Bänder, Mosaik, Leasing), 7vh (FAQ, Flottenkarten der Beratung). Entscheidung Max: gleich und grosszuegiger - in zwei Schritten am selben Abend, erst 7,5vh, dann 8,5vh. Bei 900 px Fensterhoehe sind das 76,5 px gegen 54 px im Bestand. Bewusst grosse Ausnahmen bleiben Instanzsache (Prozess-Buehne 12vh, Bikefitting-Raster 13vh, Warum-TilliT-Liste 11vh). */ --tb-head-gap: clamp(4rem, 8.5vh, 6rem); /* ---- FARBSCHEMA ---- Global statt dreimal seitenlokal. Ohne diese Zeile gibt der Browser bei dunklem OS-Theme die Formular-Chrome dunkel aus — Select-Aufklappmenues, Datumsfelder, Scrollbars, Autofill. Das trifft Checkout, Konto und Filterspalte, also genau die Flaechen ohne eigene Kanon-Komponente. Ein echter Dunkelmodus ist nicht vorgesehen: die Marke steht auf Weiss, Ink und Bild. */ color-scheme: light; } /* ======================================== ALIAS-BRUECKE — ENTFALLEN 2026-08-23 Hier standen vier Aliase, die den Altbestand vor dem Abbau des alten :root-Blocks in tillit-feldspiegel-alt.css schuetzen sollten: --tillit-white, --tillit-primary, --tillit-underline-font, --tillit-underline-gap Der Grund war real: die Referenzseiten lasen --tillit-white 59-mal und --tillit-primary 4-mal OHNE Fallback (Gegenprobe: "var(--tillit-white," = null Treffer). Waere der alte Block vorher gefallen, haetten 59 Deklarationen ihre Farbe verloren — weisser Text auf allen Ink-Sektionen. Erledigt statt ueberbrueckt: 73 Deklarationen sind auf --tb-white und --tb-action gezogen, das aktuelle System liest die Alt-Namen nicht mehr. Die Altseiten unter pages/mtb/, pages/road-gravel/kategorie.html und pages/testbikeflotte/ werden spaeter einzeln portiert und duerfen bis dahin brechen — ausdrueckliche Entscheidung, keine Legacy-Fallbacks. Ihre Werte kommen ohnehin weiter aus dem alten :root-Block in tillit-feldspiegel-alt.css, solange der steht. ======================================== */ /* ======================================== MOBIL — bis 767px FLIESSTEXT-GRAD. Entscheidung 2026-08-21: mobil kleiner setzen, dafuer weiter durchschiessen. Stand bis 2026-08-23 doppelt in den beiden Referenzseiten, beide Male mit dem Vermerk "vorlaeufig hier, gehoert in den Kern" — die 14 px kommen aus der Shop-Wurzel, nicht aus einer Seite. Solange der Block dort stand, divergierten die Designsystem-Seiten mobil von Kategorie-, Produkt- und Warenkorbseite. Jetzt gilt er fuer alle. WARUM 0.95rem = 13,3 px UND NICHT WENIGER. Gemessen statt geraten: - Inter hat eine x-Hoehe von 0,55 em. Bei 13,3 px sind das 7,3 px. Eine Garamond braucht dafuer 16,6 px. Die verbreitete 16-px-Regel ist Konvention, keine WCAG-Vorgabe — WCAG kennt gar keine Mindestgroesse. - Zeilenmass in der 347-px-Spalte: 14 px ergeben 50,3 Zeichen, 13,3 px ergeben 53,0. Der Korridor ist 45–75; kleiner ist auf schmaler Spalte also NAEHER an der Mitte, nicht weiter weg. - Die Grenze setzt der Kontrast, nicht die Groesse: --tb-copy-ink (#292929) haelt auf Weiss 14,55:1, --tb-muted (#6a6a6a) nur 5,41:1. Kleiner Grad duennt die Striche im Antialiasing aus; unter 13 px traegt das Grau nicht mehr. Lesetext bleibt deshalb ausnahmslos auf --tb-copy-ink; Muted traegt nur Kennziffern und Labels, also Mono-Mikrotext. - Deutsch deckelt zusaetzlich: die Punkte ueber ae oe ue sitzen oberhalb der x-Hoehe und sind das Erste, was zumatscht. - Abstand zur zweiten Stimme: Mono steht auf 11,2 px. Bei 13,3 bleibt das Verhaeltnis 1,19 und Label und Text bleiben unterscheidbar. Bei 12 px waeren es 1,07 — dann waere die Mono-Ebene funktionslos. DER DURCHSCHUSS MACHT DIE WIRKUNG, NICHT DER GRAD. 1,55 auf 1,7 ist der eigentliche Eingriff: kleiner Satz mit engem Durchschuss wirkt gedraengt, kleiner Satz mit offenem Durchschuss wirkt gesetzt. Leads bleiben straffer (1,6), sie sind groesser. NUR UNTER 768px: der Desktop bleibt Deklaration fuer Deklaration unveraendert, seine Werte sind abgenommen. NACH DEM SCHRIFTWECHSEL PRUEFEN: die x-Hoehen- und Zeichenzahl-Rechnung oben gilt fuer Inter. Systemia bringt eigene Werte mit. REIHENFOLGE: Dieser Block steht als LETZTER der Datei. Mobilbloecke muessen im Quelltext hinter allen min-width-Bloecken stehen — viele Regeln haben dieselbe Spezifitaet wie ihre Basisregel. Der Breitbild-Block (min-width: 1920px) steht deshalb DAVOR; die Regel gilt weiter: nichts dahinter einfuegen. ======================================== */ /* ======================================== HIER STAND DIE BREITBILD-STUFE ab 1920px (17.09.2026, einen Tag lang). Sie schaltete --tb-wide von 1 auf 1,15 und war damit eine Kante: gemessen bei 1918, 1919, 1920 und 1921 px sprang der Hero-Titel von 89,6 auf 103,04, der Buehnenkopf von 109,9 auf 126,39 - 15 Prozent auf ein Pixel Fensteraenderung. Seit dem 18.09. ist daraus eine Rampe geworden, gebaut aus clamp, min und max an den acht Display-Rollen selbst; Muster und Eichung stehen bei .tb-hero__title in tillit-system.css. Die Kurve ist dieselbe, nur ohne Kante: bis 1440 der abgenommene Wert, zwischen rund 1545 und 1780 px der Anstieg, danach steht sie. Die Wahl 1920 statt 1728 ist damit erledigt - eine Rampe braucht keine Grenze, sie endet, wo die Insel endet. ======================================== */ @media (max-width: 767px) { :root { --tb-stage-amp: 4vh; /* Gehaltene Buehne mobil: das BILD wird leiser (Reserve, Weg und Zoom auf zwei Drittel) und seit 23.09.2026 die Zeilen mit ihm (Befund H33, Entscheidung Max): relativ zum Bild genau so laut wie am Desktop. LITERALZAHLEN, kein calc(): der Kernel liest --tb-rise-lead mit parseFloat (Riegel und Abgangsgeometrie). */ --tb-hero-reserve: 7vh; --tb-hero-push: 1.06; --tb-hero-von: 3vh; --tb-hero-nach: -7vh; --tb-rise-eyebrow: .29; --tb-rise-title: .235; --tb-rise-lead: .185; /* Abgang mobil spaeter (24.09.2026): hier entscheidet die Geometrie (--tb-hero-vorlauf), die Obergrenze von 45 % des Halts ist nur ein Netz. Gemessen geht der Kopf auf 390x844 nach 147-226 px Scroll, auf dem SE nach 72-121, auf 430x932 nach 211-266 - jeweils, wenn die Folgeflaeche noch 111 / 75 / 123 px unter dem CTA steht. Die Hysterese mobil etwas groesser, Touch zittert mehr als ein Rad. */ --tb-hero-leave: .45; --tb-hero-hysterese: .07; --tb-seam: 22vh; --tb-copy-size: .95rem; --tb-lead-size: 1rem; --tb-proof-size: 1.05rem; --tb-copy-leading: 1.7; --tb-lead-leading: 1.6; } }