/* Indie Wandern — Design-Tokens * * Der Entwurf existiert für ein Artboard von 1920 px mit einem 1434-px-Container. * Alle Werte in DESIGN-INTENT.md sind Design-Pixel dieses Artboards. * * `--iw-u` ist ein Design-Pixel. Bei genügend breitem Fenster ist es exakt 1 px, * darunter schrumpft es proportional. Damit stimmen die inneren Verhältnisse * in jeder Fensterbreite, und jeder Wert aus dem Entwurf lässt sich 1:1 schreiben: * * font-size: calc(60 * var(--iw-u)); * * Unter 1024 px greift kein Zoom mehr, sondern eine eigene Skala — sonst wäre * Fließtext auf dem Handy 5 px groß. */ :root { /* 1 Design-Pixel. min() deckelt bei 1 px, damit sehr breite Monitore nicht aufblasen. */ --iw-u: min(1px, calc((100vw - 4rem) / 1434)); /* Boxed-Rahmen. 1440 statt 1434, weil runde Zahl — die 6 px Schlupf nehmen die 1fr-Spalten auf, die Design-Werte bleiben unverändert. */ --iw-container: calc(1440 * var(--iw-u)); --iw-measure: calc(960 * var(--iw-u)); /* Lesebreite zentrierter Absätze */ --iw-gutter: clamp(14px, 1.4vw, 22px); /* ---- Schriftschnitte ---- Was das Adobe-Fonts-Projekt jvq5hen TATSÄCHLICH liefert (Stand 2026-07-13): tosh-a 300 · 400 · 500 · 700 (kein 600, kein 900) hoss-sharp 300 · 400 · 500 · 600 (kein 700, kein 900) Die beiden Familien haben also NICHT dieselbe Bold-Stufe. Ein gemeinsames `--iw-fw-bold` gibt es deshalb nicht mehr — es hat bei Tosh A still auf 500 zurückgesetzt und die Schrift zu dünn gemacht. Ein verlangter Schnitt, den das Kit nicht hat, wird nie zum Fehler: der Browser nimmt den nächsten oder rechnet sich einen faux bold zurecht. Sichtbar wird es nur als falsche Strichstärke. `tests/fontmatrix.js` prüft genau das und ist Teil der Prüfkette. Sollte Tosh A Black (900) im Adobe-Projekt nachaktiviert werden, kann `--iw-fw-tosh-black` wieder auf 900 gehen — und nur diese eine Zeile. */ --iw-fw-light: 300; --iw-fw-regular: 400; --iw-fw-medium: 500; /* Pro Familie, weil sich die Schnitte unterscheiden: */ --iw-fw-hoss-bold: 600; /* Hoss Sharp Bold */ --iw-fw-tosh-bold: 700; /* Tosh A Bold */ --iw-fw-tosh-black: 700; /* Black fehlt im Kit → bis dahin Bold */ /* Alt-Namen, damit bestehende Regeln und die Block-Library weiterlaufen. --iw-fw-bold zeigt auf den Hoss-Wert (dort wird es fast überall benutzt); Tosh-A-Regeln müssen --iw-fw-tosh-bold nehmen. */ --iw-fw-bold: var(--iw-fw-hoss-bold); --iw-fw-display: var(--iw-fw-tosh-bold); --iw-fw-black: var(--iw-fw-tosh-black); /* ---- Typo-Skala (Design-Pixel) ---- */ --iw-fs-display: calc(225 * var(--iw-u)); --iw-lh-display: calc(195 * var(--iw-u)); --iw-fs-title: calc(88 * var(--iw-u)); --iw-lh-title: calc(80 * var(--iw-u)); --iw-fs-nav: calc(72 * var(--iw-u)); --iw-lh-nav: calc(97 * var(--iw-u)); --iw-fs-h2: calc(60 * var(--iw-u)); --iw-lh-h2: 1.2; --iw-lh-h2-tight: calc(64 * var(--iw-u)); --iw-fs-h3: calc(30 * var(--iw-u)); --iw-fs-bigbody: calc(24 * var(--iw-u)); --iw-fs-body: calc(22 * var(--iw-u)); --iw-fs-small: calc(18 * var(--iw-u)); --iw-fs-eyebrow: calc(14 * var(--iw-u)); --iw-fs-button: calc(18 * var(--iw-u)); --iw-fs-pill: calc(16 * var(--iw-u)); --iw-fs-legal: calc(22.5 * var(--iw-u)); --iw-lh-legal: calc(32.19 * var(--iw-u)); --iw-fs-quote: calc(38 * var(--iw-u)); --iw-fs-numeral: calc(72 * var(--iw-u)); /* InDesign-Auto-Leading = 120 %. Das ist enger als jeder Browser-Default und der Hauptgrund, warum ein „ungefähr richtiger" Nachbau falsch aussieht. */ --iw-leading: 1.2; /* Laufweite ist im Entwurf pro Stil gesetzt, nicht global. */ --iw-tr-display: 0.075em; --iw-tr-eyebrow: 0.1em; --iw-tr-button: 0.05em; /* Vertikaler Rhythmus */ --iw-bar: calc(10 * var(--iw-u)); --iw-ridge-h: calc(232 * var(--iw-u)); /* Höhe des Bergkamms. Die Form selbst heißt --iw-ridge (theme.css). */ --iw-header-h: calc(160 * var(--iw-u)); } /* Unter 1024 px kein proportionaler Zoom mehr, sondern eine eigene Skala. */ @media (max-width: 1023px) { :root { --iw-u: 1px; --iw-container: 100%; --iw-measure: 100%; --iw-gutter: 24px; --iw-fs-display: min(calc(64 * var(--iw-u)), 12.5vw); --iw-lh-display: min(calc(58 * var(--iw-u)), 11.4vw); --iw-fs-title: min(calc(40 * var(--iw-u)), 8vw); --iw-lh-title: min(calc(40 * var(--iw-u)), 8vw); --iw-fs-nav: calc(40 * var(--iw-u)); --iw-lh-nav: calc(56 * var(--iw-u)); --iw-fs-h2: calc(32 * var(--iw-u)); --iw-lh-h2-tight: calc(36 * var(--iw-u)); --iw-fs-h3: calc(20 * var(--iw-u)); --iw-fs-bigbody: calc(17 * var(--iw-u)); --iw-fs-body: calc(16 * var(--iw-u)); --iw-fs-small: calc(15 * var(--iw-u)); --iw-fs-eyebrow: calc(11 * var(--iw-u)); --iw-fs-button: calc(14 * var(--iw-u)); --iw-fs-pill: calc(13 * var(--iw-u)); --iw-fs-legal: calc(14 * var(--iw-u)); --iw-lh-legal: calc(20 * var(--iw-u)); --iw-fs-quote: calc(21 * var(--iw-u)); --iw-fs-numeral: calc(44 * var(--iw-u)); --iw-leading: 1.45; /* auf kleinen Zeilenlängen wären 120 % unlesbar */ --iw-ridge-h: calc(64 * var(--iw-u)); --iw-header-h: calc(72 * var(--iw-u)); } } /* --------------------------------------------------------------------------- * Basis-Typografie * ------------------------------------------------------------------------- */ body { font-family: hoss-sharp, ui-sans-serif, system-ui, sans-serif; font-size: var(--iw-fs-body); line-height: var(--iw-leading); hyphens: auto; } /* CSS setzt letter-spacing auch hinter das letzte Zeichen. Bei zentriertem und rechtsbündigem Text verschiebt das die Zeile um die halbe Sperrung nach links. Der negative rechte Rand hebt das auf. */ .iw-display, h1, h2, .iw-h2 { font-family: tosh-a, ui-sans-serif, system-ui, sans-serif; font-weight: var(--iw-fw-display); letter-spacing: var(--iw-tr-display); margin-right: calc(-1 * var(--iw-tr-display)); text-wrap: balance; } h1, .iw-display { font-size: var(--iw-fs-display); line-height: var(--iw-lh-display); } h2, .iw-h2 { font-size: var(--iw-fs-h2); line-height: var(--iw-lh-h2); } .iw-h2--tight { line-height: var(--iw-lh-h2-tight); } /* „WÄHLE DEINEN TRAIL" / „WÄHLE DEIN HOTEL" — der einzige schwerste Schnitt. */ .iw-title-black { font-family: tosh-a, ui-sans-serif, system-ui, sans-serif; font-weight: var(--iw-fw-black); font-size: var(--iw-fs-title); line-height: var(--iw-lh-title); letter-spacing: var(--iw-tr-display); margin-right: calc(-1 * var(--iw-tr-display)); text-transform: uppercase; } h3, .iw-h3 { font-family: hoss-sharp, ui-sans-serif, system-ui, sans-serif; font-weight: var(--iw-fw-bold); font-size: var(--iw-fs-h3); line-height: 1.2; letter-spacing: 0; } p { line-height: var(--iw-leading); } p + p { margin-top: calc(26 * var(--iw-u)); } @media (max-width: 1023px) { .iw-display, h1, h2, .iw-h2, .iw-title-black { margin-right: 0; } }