/* ========================================================================== STUDIO KONTUR – Design-Tokens Alle Farben, Schriften, Abstände, Rahmen und Schatten zentral an einer Stelle. Für einen echten Kunden: hier Farben/Schriften tauschen, der Rest folgt. ========================================================================== */ /* --- Schriften (lokal, SIL Open Font License, Lizenzen in assets/fonts/) --- Syne nur im Schnitt 800 (statisch, 15 KB statt 47 KB variabel) – die Display-Schrift wird ausschließlich extrafett gesetzt. */ @font-face { font-family: "Syne"; src: url("../fonts/syne-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; } /* Ersatzschrift mit angepasster Breite: verhindert, dass die Wortmarke vor dem Laden überläuft */ @font-face { font-family: "Syne Ersatz"; src: local("Arial Black"), local("Arial Bold"), local("Arial"); size-adjust: 104%; } :root { /* --- Farben: Papier, Tinte, eine einzige Farbe (Blau) --- */ --papier: #f4f4ef; --papier-2: #e8e8e1; --tinte: #0c0c0d; --tinte-2: #3a3a3d; /* Sekundärtext, 10,3 : 1 auf Papier */ --tinte-3: #5a5a5e; /* feine Linien auf Schwarz (keine Schrift) */ --papier-matt: #c9c9c2; /* Sekundärtext auf Schwarz, 12 : 1 */ --blau: #2b3bff; /* Weiß auf Blau 6,6 : 1 · Blau auf Papier 6,0 : 1 */ --blau-tief: #1b27d9; /* gedrückter Zustand */ --blau-hell: #dfe2ff; /* Hinterlegung, nie als Textfarbe */ --weiss: #ffffff; --linie: rgb(12 12 13 / 0.16); /* sichtbare Rasterlinien */ /* Fehlerzustände bleiben bewusst im Farbkonzept: schwarzes Etikett, gestrichelter Rahmen, blasses Blau */ --fehler-grund: var(--blau-hell); /* --- Schriften --- */ --schrift-display: "Syne", "Syne Ersatz", "Arial Black", sans-serif; --schrift-text: "Instrument Sans", "Segoe UI", system-ui, sans-serif; --schrift-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --schrift-serif: "Instrument Serif", Georgia, "Times New Roman", serif; /* --- Schriftgrößen (fluid) --- */ --fs-mini: 0.75rem; --fs-label: 0.8125rem; --fs-klein: 0.9375rem; --fs-text: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --fs-lead: clamp(1.2rem, 1.05rem + 0.75vw, 1.75rem); --fs-h4: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); --fs-h3: clamp(1.35rem, 1.15rem + 0.9vw, 2rem); --fs-gross: clamp(1.6rem, 1.1rem + 2.4vw, 3.25rem); --fs-h2: clamp(2.6rem, 1.2rem + 6vw, 7rem); --fs-zitat: clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem); /* Wortmarke: Breite der Zeilen in em (Syne 800, gemessen) → Schriftgröße = Spaltenbreite / Faktor */ --wm-faktor-1: 6.62; /* STUDIO */ --wm-faktor-2: 7.58; /* KONTUR */ --wm-faktor-voll: 14.5; /* STUDIO KONTUR einzeilig (Fußzeile) */ /* mobil vierzeilig in Silben: STU / DIO / KON / TUR */ --wm-faktor-stu: 3.52; --wm-faktor-dio: 3.12; --wm-faktor-kon: 3.92; --wm-faktor-tur: 3.7; /* --- Laufweiten & Zeilenhöhen --- */ --lh-eng: 0.86; --lh-titel: 1.05; --lh-text: 1.6; --lw-mono: 0.06em; --lw-display: -0.01em; /* --- Abstände --- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem; --rand: clamp(1rem, 0.6rem + 1.8vw, 2.5rem); /* Seitenrand des Inhalts */ --kapitel-abstand: clamp(4rem, 2.5rem + 6vw, 9rem); --textbreite: 62ch; /* --- Rahmen & Schatten (neo-brutalistisch, hart) --- */ --rahmen: 3px; --rahmen-duenn: 1.5px; --rahmen-dick: 5px; --schatten-v: 6px; --schatten: var(--schatten-v) var(--schatten-v) 0 0 var(--tinte); --schatten-gross: 12px 12px 0 0 var(--tinte); --schatten-blau: var(--schatten-v) var(--schatten-v) 0 0 var(--blau); /* --- Layout --- */ --seitenleiste: 6.5rem; /* Breite der Kapitel-Leiste ab 64rem */ --kopfleiste: 3.75rem; /* Höhe der Kopfleiste mobil */ --fokus-farbe: var(--blau); --fokus-breite: 3px; /* --- Bewegung --- */ --dauer-kurz: 120ms; --dauer: 220ms; --kurve: cubic-bezier(0.2, 0.8, 0.2, 1); --laufband-dauer: 38s; /* --- Raster: sichtbare Hauptlinien --- mobil: nur die Außenlinien (Inhalte laufen über die volle Breite, keine Linie quer durch den Text) ab 48rem: a | b | c | d | e (Linien bei 0 · 3/12 · 5/12 · 10/12 · 1) → Zonen 3 | 2 | 5 | 2 */ --raster-spalten: [a] minmax(0, 1fr) [b c d] minmax(0, 3fr) [e]; --linie-1: 0%; --linie-2: 0%; --linie-3: 100%; } @media (min-width: 48rem) { :root { --raster-spalten: [a] minmax(0, 3fr) [b] minmax(0, 2fr) [c] minmax(0, 5fr) [d] minmax(0, 2fr) [e]; --linie-1: 25%; --linie-2: 41.6667%; --linie-3: 83.3333%; } }