/* ==== 02-brand/design-v6/fonts-v6.css ==== */ /* ============================================================================= JG-HAUSDESIGN v6 „Rotstift“ · SCHRIFTEN (Stand 30.10.2026) Einzige Schriften für neue Seiten und Dokumente: Literata Überschriften, Wortmarke, Zahlen, Beispielblätter, Buchtext Schibsted Grotesk Fließtext, Bedienelemente, Tabellen, Formulare Mynerve nur kurze Randnotizen in Karmin (höchstens fünf Wörter) Quelle: Fontsource 5.3.0 (@fontsource-variable/literata, @fontsource-variable/schibsted-grotesk, @fontsource/mynerve). Lizenz: SIL Open Font License 1.1, Texte in fonts/OFL-*.txt. Pfade relativ zu dieser Datei. Selbst gehostet, keine Anfrage an Google Fonts oder andere Dienste. latin-ext lädt per unicode-range nur, wenn solche Zeichen vorkommen; Kursivschnitte nur bei Kursivsatz. Einzeldateien (Decks, Karten, Versand): python3 scripts/embed-fonts-v6.py ========================================================================== */ /* ---------- Literata (variabel: opsz 7–72, wght 200–900) ---------- */ @font-face { font-family: 'Literata Variable'; font-style: normal; font-display: swap; font-weight: 200 900; src: url('fonts/literata-latin-opsz-normal.woff2') format('woff2-variations'); 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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Literata Variable'; font-style: normal; font-display: swap; font-weight: 200 900; src: url('fonts/literata-latin-ext-opsz-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Kursiv nur, wo der Inhalt es verlangt (Werktitel, Zitierbeispiele, Buchtext) */ @font-face { font-family: 'Literata Variable'; font-style: italic; font-display: swap; font-weight: 200 900; src: url('fonts/literata-latin-opsz-italic.woff2') format('woff2-variations'); 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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Literata Variable'; font-style: italic; font-display: swap; font-weight: 200 900; src: url('fonts/literata-latin-ext-opsz-italic.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Schibsted Grotesk (variabel: wght 400–900) ---------- */ @font-face { font-family: 'Schibsted Grotesk Variable'; font-style: normal; font-display: swap; font-weight: 400 900; src: url('fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2-variations'); 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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk Variable'; font-style: normal; font-display: swap; font-weight: 400 900; src: url('fonts/schibsted-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Schibsted Grotesk Variable'; font-style: italic; font-display: swap; font-weight: 400 900; src: url('fonts/schibsted-grotesk-latin-wght-italic.woff2') format('woff2-variations'); 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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk Variable'; font-style: italic; font-display: swap; font-weight: 400 900; src: url('fonts/schibsted-grotesk-latin-ext-wght-italic.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Mynerve (400): nur Randnotizen, nie vorladen, nie in versteckten Texten ---------- */ @font-face { font-family: 'Mynerve'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/mynerve-latin-400-normal.woff2') format('woff2'); 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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Mynerve'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/mynerve-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Ersatzschriften mit angeglichenen Maßen gegen Layoutsprünge ---------- Werte aus der Design-Richtung Rotstift (Abschnitt 2.2, fontTools 4.68.0, Näherungen, im Browser per CLS-Messung zu bestätigen). Auf Android fehlen Georgia und Arial; dort greift die generische Ersatzschrift. */ @font-face { font-family: 'Literata Ersatz'; src: local('Georgia Bold'), local('Georgia-Bold'); font-weight: 500 900; size-adjust: 95%; ascent-override: 124%; descent-override: 32%; line-gap-override: 0%; } @font-face { font-family: 'Literata Ersatz'; src: local('Georgia'); font-weight: 200 499; size-adjust: 111%; ascent-override: 106%; descent-override: 28%; line-gap-override: 0%; } @font-face { font-family: 'Schibsted Ersatz'; src: local('Arial'), local('ArialMT'); font-weight: 400 599; size-adjust: 104.7%; ascent-override: 93.3%; descent-override: 24.6%; line-gap-override: 0%; } @font-face { font-family: 'Schibsted Ersatz'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 900; size-adjust: 102.2%; ascent-override: 95.6%; descent-override: 25.2%; line-gap-override: 0%; } /* ==== 02-brand/design-v6/tokens.css ==== */ /* ============================================================================= JG-HAUSDESIGN v6 „Rotstift“ · DESIGN-TOKENS (Stand 30.10.2026) Verbindlich: 02-brand/brand-design-system-v6.md. Gestaltungsquelle: 04-projects/thesislotse/03-marke/02-design-richtung.md (Anhang A). Tinte ist der Stoff des Gegenübers (Zahlen, Text, Unternehmen). Karmin ist Jörgs Beitrag (Randnotiz, Prüfvermerk, Hauptaktion). Papier ist die Arbeitsfläche. Regeln: Farbwerte stehen nur in dieser Datei. Alle anderen Dateien verwenden Variablen. Namen bleiben stabil; ein neuer Name braucht einen Eintrag in der Abbildungstabelle der v6-Doku. Kontraste (WCAG 2.x) stehen in der v6-Doku, Abschnitt „Farben und Kontraste“. Breakpoints (in em, Medienabfragen können keine Variablen lesen): kompakt max-width 22.99em · schmal max-width 25.99em · mittel min-width 40em · groß min-width 64em · breit min-width 80em ========================================================================== */ :root { color-scheme: light; /* ---------- Papier und Tinte ---------- */ --farbe-papier: #F2F4F7; /* Seitengrund, kühles Papier, kein Creme */ --farbe-blatt: #FFFFFF; /* Blätter: Karten, Formulare, Hinweise, Folien-Karten */ --farbe-flaeche: #E6EAF0; /* abgesetzte Flächen: Tabellenkopf, Code, Platzhalter */ --farbe-seitengrund: var(--farbe-papier); /* KI OS und Dashboards: Weiß (ki-os-theme-v6.css), Druck: Weiß */ --farbe-tinte: #121A2B; /* Text, Überschriften, Zahlen, Fokus, Fuß */ --farbe-tinte-2: #3F4A5C; /* Lead, Nebentext */ --farbe-tinte-3: #586273; /* Meta, Hilfetexte, Feldränder; als Text ab 13 px */ --farbe-linie: #C9D0DA; /* Haarlinien, nur Schmuck, trägt nie Information */ --farbe-linie-mittel: #7A8496; /* gestrichelte Rahmen, Grafikgrau, mindestens 3:1 */ --farbe-linie-stark: var(--farbe-tinte-3); /* Ränder von Eingabefeldern */ /* ---------- Rotstift: Jörgs Beitrag ---------- */ --farbe-karmin: #C8102E; /* Randnotiz, Prüfvermerk, Korrektur, Hauptaktion, aktueller Bereich */ --farbe-karmin-tief: #9E0E27; /* Hover und aktiver Zustand der Hauptaktion */ --farbe-auf-karmin: #FFFFFF; /* ---------- Auf Tinte (Fuß, Abschlussfolie) ---------- */ --farbe-auf-tinte: #F2F4F7; --farbe-auf-tinte-2: #B5BECC; /* ---------- Status (Funktionsschicht): nie Karmin, nie Farbe allein ---------- */ --farbe-fehler: #B42318; --farbe-fehler-flaeche: #FCEDEB; --farbe-achtung: #8A5A00; --farbe-achtung-flaeche: #FBF1DC; --farbe-info: #2B4C7E; --farbe-info-flaeche: #E8EEF7; --farbe-erfolg: #1D6B46; --farbe-erfolg-flaeche: #E6F2EB; --farbe-auswahl: #F7D9DE; /* ::selection; nur mit Tinte-Text */ /* ---------- Diagramme: Reihen nie in Karmin, Karmin nur als Anmerkung ---------- */ --farbe-diagramm-1: var(--farbe-tinte); /* erste Reihe, meist Ist oder Ausgangslage */ --farbe-diagramm-2: #4F6A8F; /* Schiefer: zweite Reihe, meist Plan oder mit Maßnahme */ --farbe-diagramm-3: #9A6B12; /* Ocker: dritte Reihe, nie als Text auf Papier */ --farbe-diagramm-4: var(--farbe-linie-mittel); --farbe-diagramm-anmerkung: var(--farbe-karmin); --farbe-diagramm-raster: var(--farbe-linie); --farbe-diagramm-achse: var(--farbe-tinte-3); --farbe-diagramm-grenze: var(--farbe-linie-mittel); --farbe-diagramm-kritisch: var(--farbe-fehler-flaeche); /* ---------- Fokus ---------- */ --farbe-fokus: var(--farbe-tinte); --farbe-fokus-auf-dunkel: var(--farbe-auf-tinte); --fokus-breite: 3px; --fokus-abstand: 3px; /* ---------- Schriften ---------- */ --schrift-display: 'Literata Variable', 'Literata Ersatz', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --schrift-text: 'Schibsted Grotesk Variable', 'Schibsted Ersatz', 'Helvetica Neue', Arial, sans-serif; --schrift-hand: 'Mynerve', 'Bradley Hand', 'Segoe Print', cursive; --schrift-code: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --gewicht-normal: 400; --gewicht-manuskript: 420; --gewicht-mittel: 550; --gewicht-titel: 560; --gewicht-zahl: 600; --gewicht-marke: 650; --gewicht-fett: 700; /* ---------- Schriftgrößen Web, fließend 360–1440 px ---------- */ --text-xs: clamp(0.8125rem, 0.7917rem + 0.0926vw, 0.875rem); /* 13–14 px Meta, Tabellenkopf */ --text-s: clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem); /* 15–16 px Labels, Dachzeilen */ --text-m: clamp(1.0625rem, 1.0208rem + 0.1852vw, 1.1875rem); /* 17–19 px Fließtext */ --text-l: clamp(1.1875rem, 1.1042rem + 0.3704vw, 1.4375rem); /* 19–23 px Lead */ --text-xl: clamp(1.375rem, 1.2083rem + 0.7407vw, 1.875rem); /* 22–30 px H3, Kartentitel */ --text-2xl: clamp(1.75rem, 1.4167rem + 1.4815vw, 2.75rem); /* 28–44 px H2 */ --text-3xl: clamp(1.875rem, 1.4167rem + 2.037vw, 3.25rem); /* 30–52 px H1 Unterseiten */ --text-4xl: clamp(2.25rem, 1.5833rem + 2.963vw, 4.25rem); /* 36–68 px große H2, Statements */ --text-hand: clamp(1.3125rem, 1.1667rem + 0.6481vw, 1.75rem); /* 21–28 px Randnotizen */ --text-summe: clamp(2.5rem, 2.1667rem + 1.4815vw, 3.5rem); /* 40–56 px Ergebnis, Kennzahl groß */ --text-claim: clamp(2.25rem, 1.4rem + 4vw, 6rem); /* Rückfall; im Hero clamp(2.25rem, 11cqi, 6.25rem) (komponenten.css) */ --zeilenhoehe-text: 1.6; --zeilenhoehe-lead: 1.5; --zeilenhoehe-h3: 1.2; --zeilenhoehe-titel: 1.1; --zeilenhoehe-claim: 1; --zeilenhoehe-hand: 1.1; --laufweite-claim: -0.028em; --laufweite-titel: -0.015em; --laufweite-h3: -0.01em; --laufweite-zahl: -0.02em; /* ---------- Abstände ---------- */ --abstand-1: 0.25rem; --abstand-2: 0.5rem; --abstand-3: 0.75rem; --abstand-4: 1rem; --abstand-5: 1.5rem; --abstand-6: 2rem; --abstand-7: 3rem; --abstand-8: 4.5rem; --abstand-9: 7rem; --abstand-abschnitt: clamp(3.5rem, 2.1667rem + 5.9259vw, 7.5rem); --polster-blatt: clamp(1.5rem, 1.25rem + 1.1111vw, 2.25rem); /* 24–36 px Blätter, Formulare */ --polster-blatt-gross: clamp(1.5rem, 0.5rem + 4.4444vw, 4.5rem); /* 24–72 px große Blätter */ --polster-fuss: clamp(3rem, 2.3333rem + 2.963vw, 5rem); /* 48–80 px oben im Fuß */ --polster-held: clamp(1.5rem, 0.8333rem + 2.963vw, 3.5rem); /* 24–56 px über dem Hero */ --abstand-raster: clamp(2rem, 1rem + 4.4444vw, 6rem); /* Lesespalte zu Randspalte */ /* ---------- Raster und Breiten ---------- */ --breite-seite: 82rem; /* 1312 px Inhaltsbreite */ --breite-text: 40rem; /* Lesespalte, rund 70 Zeichen */ --breite-lead: 46ch; --breite-rand: clamp(13rem, 11.3333rem + 7.4074vw, 18rem); /* Randspalte für Notizen: 208–288 px */ --breite-formular: 40rem; --breite-rechner: 60rem; --rand: clamp(1rem, 0.5rem + 2.2222vw, 2.5rem); /* Seitenrand 16–40 px */ --spalte: clamp(1rem, 0.6667rem + 1.4815vw, 2rem); /* Spaltenabstand 16–32 px */ --kopf-hoehe: 4.25rem; /* ---------- Bediengrößen ---------- */ --hoehe-knopf: 3rem; /* 48 px Knöpfe und Felder */ --hoehe-knopf-gross: 3.25rem; /* 52 px Hauptknöpfe mobil */ --hoehe-ziel: 2.75rem; /* 44 px Bedienziele */ --hoehe-ziel-klein: 1.5rem; /* 24 px Links in Listen (WCAG 2.5.8) */ --groesse-auswahl: 1.25rem; /* 20 px native Radios und Kästchen */ --groesse-kreis: 3.5rem; /* 56 px Kreis im Ablauf */ --breite-klammer: 0.75rem; /* Randklammer */ /* ---------- Radien, Linien, Schatten ---------- */ --radius-0: 0; /* Blätter, Karten, Tabellen, Hinweise: Papier hat Ecken */ --radius-1: 2px; /* Knöpfe, Felder, Etiketten */ --radius-2: 4px; /* Stempel */ --radius-rund: 50%; /* nur Kreise im Ablauf und Radiopunkte */ --linie-haar: 1px solid var(--farbe-linie); --linie-feld: 1.5px solid var(--farbe-linie-stark); --linie-stark: 2px solid var(--farbe-tinte); --linie-karte: 4px solid var(--farbe-tinte); --linie-blatt: 6px solid var(--farbe-tinte); --linie-auf-tinte: 1px solid color-mix(in srgb, var(--farbe-auf-tinte) 18%, transparent); --stift-breite: 2.5px; --schatten-blatt: 0 1px 1px rgb(18 26 43 / 0.06), 0 3px 8px rgb(18 26 43 / 0.05), 0 26px 50px -26px rgb(18 26 43 / 0.34); --schatten-karte: 0 1px 1px rgb(18 26 43 / 0.05), 0 14px 30px -20px rgb(18 26 43 / 0.28); --schatten-menue: 0 28px 40px -28px rgb(18 26 43 / 0.4); --schatten-knopf: 4px 4px 0 var(--farbe-tinte); --schatten-knopf-hover: 5px 5px 0 var(--farbe-tinte); --schatten-knopf-aktiv: 1px 1px 0 var(--farbe-tinte); --schatten-knopf-klein: 3px 3px 0 var(--farbe-tinte); /* ---------- Bewegung und Ebenen ---------- */ --dauer-kurz: 140ms; --dauer-mittel: 280ms; --dauer-strich: 450ms; --kurve-aus: cubic-bezier(0.2, 0.7, 0.2, 1); --kurve-stift: cubic-bezier(0.55, 0.08, 0.35, 1); --ebene-kopf: 40; --ebene-menue: 45; --ebene-sprunglink: 100; /* ---------- Druck, A4 (gilt über .dokument in vorlagen/dokument-a4.html) ---------- */ --druck-text: 10.5pt; --druck-klein: 9pt; --druck-meta: 8pt; --druck-lead: 12.5pt; --druck-titel: 34pt; --druck-h1: 26pt; --druck-h2: 17pt; --druck-h3: 12.5pt; --druck-dachzeile: 11.5pt; /* Karmin als Text ab 15 px: 11,5 pt entspricht 15,3 px */ --druck-zahl: 26pt; --druck-hand: 16pt; --druck-zeilenhoehe: 1.5; --druck-rand-oben: 24mm; --druck-rand-unten: 22mm; --druck-rand-links: 22mm; --druck-rand-rechts: 20mm; --druck-randspalte: 44mm; --druck-spaltenabstand: 8mm; /* ---------- Folie 16:9 (px bei 1280 × 720; für 1920 × 1080 alles × 1,5) ---------- */ --folie-breite: 1280px; --folie-hoehe: 720px; --folie-rand-x: 72px; --folie-rand-oben: 56px; --folie-rand-unten: 32px; --folie-spalte: 24px; --folie-titel: 64px; --folie-h2: 42px; --folie-h3: 24px; --folie-lead: 22px; --folie-text: 18px; --folie-text-klein: 15px; --folie-meta: 13px; --folie-dachzeile: 15px; --folie-zahl: 96px; --folie-zahl-klein: 48px; --folie-hand: 30px; --folie-zitat: 44px; /* ---------- LinkedIn (px) ---------- */ --kachel-hoch-breite: 1080px; --kachel-hoch-hoehe: 1350px; --kachel-quer-breite: 1200px; --kachel-quer-hoehe: 627px; --kachel-rand: 80px; --kachel-rand-quer: 56px; --kachel-titel: 92px; --kachel-titel-quer: 58px; --kachel-text: 32px; --kachel-text-quer: 24px; --kachel-dachzeile: 28px; --kachel-dachzeile-quer: 22px; --kachel-hand: 46px; --kachel-hand-quer: 34px; --kachel-meta: 22px; --kachel-meta-quer: 17px; /* ---------- Weitere Formate (px). Karussell und Quote-Card nutzen das Hochformat oben. ---------- */ --format-banner-breite: 1584px; --format-banner-hoehe: 396px; /* LinkedIn-Profilbanner */ --format-quadrat-breite: 1080px; --format-quadrat-hoehe: 1080px; /* Instagram quadratisch */ --format-ig-hoch-breite: 1080px; --format-ig-hoch-hoehe: 1350px; /* Instagram Hochformat */ --format-produkt-breite: 740px; --format-produkt-hoehe: 500px; /* Produktbild CopeCart und Shops */ --format-titelbild-breite: 1920px; --format-titelbild-hoehe: 1080px; /* Google-Unternehmensprofil, Titelbild */ --banner-rand: 56px; --banner-schutz-links: 33%; /* Profilfoto-Zone links unten bleibt frei */ --banner-titel: 54px; --banner-dachzeile: 22px; --banner-hand: 36px; --banner-meta: 18px; --produkt-rand: 40px; --produkt-titel: 44px; --produkt-dachzeile: 17px; --produkt-meta: 15px; } /* Im Druck ist das Papier das echte Blatt: Seitengrund Weiß, keine graue Fläche. */ @media print { :root { --farbe-seitengrund: var(--farbe-blatt); } } /* ============================================================================= FORMEN DER ROTSTIFT-ZEICHEN (farblose Masken; die Farbe kommt über background-color aus einem Token, meist --farbe-karmin). Striche behalten mit vector-effect ihre Breite. Frei nach klassischen Korrekturzeichen (Duden, DIN 16511), nicht normgetreu. ========================================================================== */ :root { /* Stiftlinie: Hervorhebung, aktueller Bereich, Wortmarke, Pfeil-Link */ --maske-stiftlinie: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 8%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M2 5.4 C 30 3.2, 70 4.6, 98 2.6%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); /* Doppelte Unterstreichung: „Das zählt“, höchstens einmal je Fläche */ --maske-doppelt: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 12%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M2 4.4 C 30 2.6, 70 4, 98 2.2 M5 10 C 35 8.4, 66 9.6, 95 8.2%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); /* Randklammer: Randnotiz, Prüfvermerk, Einordnung */ --maske-randklammer: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M10 2 C 5 2, 4 4, 4 9 L 4.6 91 C 4.6 96, 5.6 98, 10.4 98%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); /* Roter Faden: verbindet Schritte, senkrecht und waagerecht */ --maske-faden-y: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 1000%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M20 0 C 8 80, 32 160, 20 250 S 8 420, 21 500 S 33 680, 20 750 S 9 920, 20 1000%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); --maske-faden-x: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1000 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 22 C 80 9, 160 33, 250 20 S 420 8, 500 22 S 680 35, 750 20 S 920 9, 1000 20%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); /* Häkchen: Lob, geprüft, „Das mache ich“; im Status-Einsatz in Erfolgsgrün */ --maske-haken: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 32%27%3E%3Cpath d=%27M4 18 C 8 20, 12 24, 15 29 C 20 18, 28 9, 37 3%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); /* Pfeilstrich: Pfeil-Link, Verweis von der Notiz zur Stelle */ --maske-pfeil: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 20%27%3E%3Cpath d=%27M2 11 C 12 9.5, 24 10.5, 35 9.6 M 28 4 L 36 9.8 L 28.5 15.5%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); /* Einfügezeichen: fehlende Angabe */ --maske-einfuegung: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M2.5 13.5 C 4.5 10, 6.4 6.4, 8 3 C 9.6 6.4, 11.5 10, 13.5 13.5%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); /* Plus und Minus als Stiftstriche: FAQ */ --maske-plus: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 12.4 C 9 11.6, 15 12.6, 20 11.8 M 12.2 4 C 11.6 9, 12.6 15, 11.8 20%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E"); --maske-minus: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 12.4 C 9 11.6, 15 12.6, 20 11.8%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E"); /* Kringel: Beleg oder Zahl prüfen */ --maske-kringel: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 64%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M152 8 C 110 0, 36 2, 14 18 C -4 31, 12 54, 74 60 C 136 66, 196 54, 193 33 C 190 15, 158 6, 116 6%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); /* Pfeil der Auswahlliste */ --maske-auswahl: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 10%27%3E%3Cpath d=%27M2 2.5 L 8 8 L 14 2.5%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); /* Farbige Bilder der Rotstift-Zeichen (Karmin #C8102E, Haken-Erfolg #1D6B46). Standard für alle Zeichen, weil Chrome-PDFs CSS-Masken über rund 200 px Breite in macOS Vorschau als volle Fläche zeigen (Test 30.10.2026). Die Masken oben bleiben für den Kontrastmodus (forced-colors). */ --bild-doppelt: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 12%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M2 4.4 C 30 2.6, 70 4, 98 2.2 M5 10 C 35 8.4, 66 9.6, 95 8.2%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); --bild-randklammer: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M10 2 C 5 2, 4 4, 4 9 L 4.6 91 C 4.6 96, 5.6 98, 10.4 98%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); --bild-faden-y: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 1000%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M20 0 C 8 80, 32 160, 20 250 S 8 420, 21 500 S 33 680, 20 750 S 9 920, 20 1000%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); --bild-faden-x: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1000 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 22 C 80 9, 160 33, 250 20 S 420 8, 500 22 S 680 35, 750 20 S 920 9, 1000 20%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); --bild-haken: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 32%27%3E%3Cpath d=%27M4 18 C 8 20, 12 24, 15 29 C 20 18, 28 9, 37 3%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%273.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); --bild-pfeil: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 20%27%3E%3Cpath d=%27M2 11 C 12 9.5, 24 10.5, 35 9.6 M 28 4 L 36 9.8 L 28.5 15.5%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); --bild-einfuegung: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M2.5 13.5 C 4.5 10, 6.4 6.4, 8 3 C 9.6 6.4, 11.5 10, 13.5 13.5%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); --bild-plus: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 12.4 C 9 11.6, 15 12.6, 20 11.8 M 12.2 4 C 11.6 9, 12.6 15, 11.8 20%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E"); --bild-minus: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 12.4 C 9 11.6, 15 12.6, 20 11.8%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E"); --bild-kringel: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 64%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M152 8 C 110 0, 36 2, 14 18 C -4 31, 12 54, 74 60 C 136 66, 196 54, 193 33 C 190 15, 158 6, 116 6%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); --bild-haken-erfolg: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 32%27%3E%3Cpath d=%27M4 18 C 8 20, 12 24, 15 29 C 20 18, 28 9, 37 3%27 fill=%27none%27 stroke=%27%231D6B46%27 stroke-width=%273.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); --bild-haken-tinte: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 32%27%3E%3Cpath d=%27M4 18 C 8 20, 12 24, 15 29 C 20 18, 28 9, 37 3%27 fill=%27none%27 stroke=%27%23121A2B%27 stroke-width=%273.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); /* Als Bild mit fester Farbe (deshalb hier): Stiftlinie in Karmin #C8102E, Auswahlpfeil in Tinte #121A2B */ --bild-stiftlinie: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 8%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M2 5.4 C 30 3.2, 70 4.6, 98 2.6%27 fill=%27none%27 stroke=%27%23C8102E%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); --bild-auswahl: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 10%27%3E%3Cpath d=%27M2 2.5 L 8 8 L 14 2.5%27 fill=%27none%27 stroke=%27%23121A2B%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); }