/* ===================================================================== digital bohemian · Design-Tokens 1.0.0 · Stand 07.10.2026 Mathias Ziehengraser · Notizbuch-System Nur Custom Properties mit Präfix --db-. Keine Schriftdateien, keine Komponenten, keine Elementstile. Schriften bindet fonts.css ein, Bausteine stehen in components.css. Quelle der Wahrheit ist die Notizbuch-Website (04_websites/notizbuch/src). Jeder Wert ist dort im Code belegt. Wo die Website zwei Werte für dieselbe Sache hatte, steht hier der Wert der Regel aus _inventar/INVENTAR.md Kapitel 20, mit Verweis (R 20.x). Aufbau 1 Farbe: Grundfarben, Marker, Tisch, Nacht, Zustände, Requisiten 2 Farbe: Rollen (das, was Bausteine benutzen) 3 Schrift: Familien, Gewichte, Fraunces-Achsen 4 Typo-Skala: Lesetext, Überschriften, Handschrift, klein und Versal 5 Abstand und Maß: Skala, Heftrand, Breiten, Tippflächen, Logo 6 Radius 7 Linie und Strich 8 Schatten 9 Textur 10 Drehung 11 Ebenen 12 Bewegung 13 Breakpoints (Doku, Werte für JavaScript) 14 Stufen je Breakpoint, Flächenwechsel, Hochkontrast Lesart der Abschnittsköpfe: [gruppe.untergruppe] ist der Pfad in tokens.json. Ein Kommentar hinter einem Token wird dort zu $description. ===================================================================== */ :root { /* =================================================================== 1 FARBE =================================================================== */ /* [farbe.grund] Papier, Tinte und die Stifte. Die Hexwerte sind die Marke. */ --db-papier: #F5EFE2; /* Grund jedes Blatts, Kopfzeile, Leiste, Unterlage hinter Text */ --db-papier-hell: #FFFDF7; /* Zettel, Belege, Akten, Felder, Pausenknopf, Menü-Zettel */ --db-karton: #FFFFFF; /* Karteikarte und Polaroid: Steckbrief, Karte, FAQ, Tabelle, Formular */ --db-tinte: #15171F; /* Schrift, Rahmen, harte Schatten, Striche */ --db-blei: #4A4845; /* Nebenschrift, Hilfetext, erledigte Reiter */ --db-bleistift: #6E6A64; /* nur Linien und Rahmen, Platzhalter-Stimme, nie Schrift */ --db-kuli: #1E3A8A; /* Links, Handschrift, Fokusrahmen */ --db-filz: #F48418; /* Markenorange: Logo-Punkt, Knopffläche, Striche, Faden. Nie Schrift auf Papier */ --db-filz-hell: #FFB25E; /* kompakter Hover in Kopfzeile und Leiste, Handschrift auf dem Tisch */ --db-filz-text: #A34A00; /* Orange als Schrift: Belegzahlen, Stempel, Pflicht-Sternchen, Fazit */ --db-linie: #D8CDB8; /* gestrichelte Trennlinien, Tabellenzeilen, Kopfzeilen-Unterkante */ --db-fehler: #A3261A; /* Fehlertext, Fehlerrahmen, Fehlerzeichen */ --db-logo-tinte: #11131A; /* nur in den Logodateien, nie als Textfarbe (R 20.7) */ /* [farbe.marker] Auszeichnung und Zettel. Gelb markiert, Post-it ist Fläche (R 20.6). */ --db-gelb: #FFE45C; /* Marker, Etikett Kurze Antwort, Hover Pausenknopf, Fokus auf Dunkel, Sprunglink */ --db-rosa: #FFC2D1; /* Marker, Reiter, Crew-Karte KI, Verwandt-Karte */ --db-gruen: #B8F0D0; /* Marker, Reiter, Crew-Karte, Verwandt-Karte */ --db-postit: #FFF07A; /* Haftzettel: Kundenstimme, Hinweis, Woanders weiterlesen */ --db-postit-2: #FFE9A8; /* zweiter Zettelton, jeder zweite Hinweis */ /* [farbe.heft] Linien im Papier. Alle mit Alpha, sie liegen auf Papier. */ --db-rand: rgba(214, 72, 62, 0.42); /* rote Heftrand-Linie */ --db-rand-karte: rgba(214, 72, 62, 0.5); /* rote Kopflinie der Karteikarte, ersetzt auch 0.45 (R 20.3) */ --db-karo: rgba(52, 86, 150, 0.13); /* Karo laut: Startseite, Bühnen, Social (R 20.2) */ --db-karo-leise: rgba(52, 86, 150, 0.075); /* Karo leise: Lesetext, Dokumente (R 20.2) */ --db-zeile: rgba(30, 58, 138, 0.11); /* Linien der Karteikarte und der Textarea (R 20.4) */ /* [farbe.tisch] Der dunkle Tisch unter dem Blatt: Fuß, Mail-Kopf, dunkle Folien. */ --db-tisch: #1C1A17; /* Grund, auch theme-color und Manifest */ --db-hell: #F7F4EE; /* Schrift und Links auf Dunkel, helles Logo (R 20.8) */ --db-tisch-text: #E9E4DA; /* Fließtext im Fuß */ --db-tisch-leise: #CFC8BB; /* Nebentext im Fuß, Rechtszeile */ --db-tisch-unterstrich: rgba(247, 244, 238, 0.45); /* Unterstreichung der Links auf dem Tisch */ --db-tisch-trennlinie: rgba(233, 228, 218, 0.22); /* feine Linie auf dem Tisch */ /* [farbe.nacht] Die eine Nachtseite. Nur für bewusst gesetzte dunkle Momente. */ --db-nacht: #12152A; /* Grund nachts */ --db-nacht-text: #F2EEE4; /* Schrift nachts */ --db-nacht-kuli: #A9BCFF; /* Handschrift und Links nachts */ --db-marker-nacht: #B5410A; /* nur als Markerfläche nachts, nie als Schrift (R 20.11) */ /* [farbe.zustand] Formular, Fortschritt, Ablage. */ --db-fehler-grund: #FFF6F3; /* Feldgrund bei Fehler */ --db-meldung-grund: #FFF4F1; /* Grund der Fehlermeldung oben im Formular */ --db-meldung-text: #6E180F; /* Text und Links in der Fehlermeldung */ --db-station-aktuell: rgba(244, 132, 24, 0.16); /* aktuelle Station in der Leiste */ --db-station-erledigt: #EFE7D6; /* erledigte Station, Rand in --db-metall */ --db-stempel-gruen: #2F7D4A; /* Stempel live. Nur auf Papier-hell oder Karton (siehe KONTRAST.md) */ /* [farbe.requisit] Dinge auf dem Tisch. Nie Schrift, nie Bedeutungsträger (R 20.38). */ --db-metall: #8E8A84; /* Büroklammer, Geisterfaden, Rand erledigter Station */ --db-aktendeckel: #E8D6AA; /* Aktenrand und Aktenreiter */ --db-klebeband-natur: rgba(232, 214, 170, 0.8); /* Washi-Tape natur (R 20.5) */ --db-klebeband-filz: rgba(244, 132, 24, 0.78); /* Washi-Tape orange (R 20.5) */ --db-klebeband-streifen: rgba(255, 255, 255, 0.16); /* helle Streifen im Tape */ --db-unterlage: rgba(255, 253, 247, 0.9); /* halbdeckendes Papier unter Stempeln (R 20.24) */ --db-trennlinie-blei: rgba(74, 72, 69, 0.35); /* gestrichelte Trennlinie in Karten */ --db-blei-flaeche: rgba(74, 72, 69, 0.28); /* Bleistift-Fläche in Skizzen */ --db-strich-papier: rgba(255, 253, 247, 0.75); /* heller Strich in Skizzen */ --db-zahl-rahmen: rgba(163, 74, 0, 0.45); /* Rahmen der Zahlen-Etiketten */ --db-foto-platzhalter: #DDDDDD; /* Grund, solange ein Foto lädt (im Code #ddd) */ --db-requisit-stift-kappe: #2B2D36; /* Filzstift: Kappe und Griff */ --db-requisit-tasse: #FBF8F1; /* Kaffeetasse */ --db-requisit-kaffee: #6B4423; /* Kaffee */ --db-requisit-schaum: #E9D3B4; /* Milchschaum */ --db-requisit-bildschirm: #1D2B5E; /* Bildschirmfläche im Doodle */ --db-requisit-spirale-draht: #7D7871; /* Spiralbindung, Draht (im Code #7d7871) */ --db-requisit-spirale-glanz: #D9D4CB; /* Spiralbindung, Glanz (im Code #d9d4cb) */ --db-requisit-zwecke-hell: #FF9B9B; /* Reißzwecke, Licht */ --db-requisit-zwecke: #D9363E; /* Reißzwecke, Kopf */ --db-requisit-zwecke-dunkel: #8C1D22; /* Reißzwecke, Schatten */ /* =================================================================== 2 FARBE: ROLLEN Bausteine benutzen diese Namen. Auf dunklen Flächen tauscht Abschnitt 14 sie aus. =================================================================== */ /* [rolle.flaeche] */ --db-flaeche: var(--db-papier); /* Blatt */ --db-flaeche-zettel: var(--db-papier-hell); /* Zettel, Feld, Beleg, Akte */ --db-flaeche-karte: var(--db-karton); /* Karteikarte, Polaroid, Formular */ --db-flaeche-haftzettel: var(--db-postit); /* Post-it */ --db-flaeche-grund: var(--db-tisch); /* was unter dem Blatt liegt */ /* [rolle.text] */ --db-text: var(--db-tinte); /* Lesetext, Überschriften */ --db-text-leise: var(--db-blei); /* Hilfetext, Meta, Brotkrumen */ --db-text-akzent: var(--db-filz-text); /* Zahlen, Stempel, Pflicht-Sternchen */ --db-text-fehler: var(--db-fehler); /* Fehlertext */ --db-text-hand: var(--db-kuli); /* Handschrift: Kicker, Randnotiz, Bildunterschrift */ /* [rolle.aktion] */ --db-link: var(--db-kuli); /* Linkfarbe, bleibt beim Hover */ --db-link-strich: currentColor; /* Unterstreichung in Ruhe */ --db-link-strich-hover: var(--db-filz); /* Unterstreichung beim Hover (R 20.17) */ --db-knopf-flaeche: var(--db-filz); /* jeder orange Knopf (R 20.13) */ --db-knopf-text: var(--db-tinte); /* Beschriftung auf Filz, 6,95 : 1 */ --db-knopf-flaeche-kompakt-hover: var(--db-filz-hell); /* Hover nur für kompakte Leistenknöpfe (R 20.13) */ --db-bedien-flaeche: var(--db-papier-hell); /* Pausenknopf, Leistenknopf */ --db-bedien-flaeche-aktiv: var(--db-gelb); /* Pausenknopf gedrückt und Hover */ --db-rahmen: var(--db-tinte); /* Rahmen von Knopf, Feld, Zettel */ --db-rahmen-leise: var(--db-linie); /* gestrichelte Trennung, Deko */ --db-fokus: var(--db-kuli); /* Fokusrahmen auf hellem Grund */ --db-auszeichnung: var(--db-gelb); /* Marker-Standard */ --db-punkt-farbe: var(--db-filz); /* der orange Punkt, überall gleich */ /* =================================================================== 3 SCHRIFT: DREI STIMMEN Druck (Fraunces) spricht, Text (Bricolage) erklärt, Hand (Caveat) kommentiert. =================================================================== */ /* [schrift.familie] */ --db-schrift-serif: 'Fraunces', Georgia, serif; /* Überschriften, Pointe kursiv */ --db-schrift-text: 'Bricolage Grotesque', system-ui, sans-serif; /* Lesetext, Knöpfe, Formulare, Stempel */ --db-schrift-hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; /* Kicker, Zettel, Bildunterschriften, Navigation */ --db-schrift-code: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Quelltext, selten */ --db-schrift-mail: Helvetica, Arial, sans-serif; /* HTML-Mail heute (MAIL), Vorschlag in DESIGNKONZEPT.md */ --db-schrift-mail-hand: 'Segoe Print', 'Bradley Hand', cursive; /* Handschrift-Ersatz in der Mail, ohne Comic Sans (R 20.9) */ /* [schrift.gewicht] Fraunces in drei Stufen plus Pointe (R 20.40), Caveat mit 600 als Grundwert (R 20.19). Bausteine setzen jedes Gewicht über diese Tokens. */ --db-gewicht-serif-unterzeile: 520; /* Unterzeile unter dem Titel */ --db-gewicht-serif-pointe: 560; /* Pointe kursiv */ --db-gewicht-serif: 640; /* jede Überschrift, Kartensatz, Crew-Name, Verwandt-Link (R 20.40), Website seit 08.10.2026 angeglichen */ --db-gewicht-serif-titel: 680; /* H1 der Startseite, Titel auf Folie und OG */ --db-gewicht-text: 400; /* Lesetext */ --db-gewicht-text-halbfett: 600; /* Reiter in der Leiste, Kartenhinweis, Zettel-Absender. Website-Wert, Auslauf offen (DESIGNKONZEPT 4.4) */ --db-gewicht-text-meldung: 650; /* Text der Fehlermeldung. Website-Wert, Auslauf offen (DESIGNKONZEPT 4.4) */ --db-gewicht-text-mittel: 700; /* Pausenknopf, aktueller Brotkrumen, Sprunglink */ --db-gewicht-text-betont: 720; /* strong, Tabellenkopf */ --db-gewicht-text-fehler: 750; /* Fehlertext am Feld, aktueller Eintrag im Inhaltsverzeichnis. Website-Wert, Auslauf offen (DESIGNKONZEPT 4.4) */ --db-gewicht-text-fett: 800; /* Knopf, Label, Stempel, Reiter, Versal */ --db-gewicht-hand-leicht: 500; /* Wunschzettel */ --db-gewicht-hand: 600; /* Handschrift Standard */ --db-gewicht-hand-titel: 650; /* FAQ-Frage, Titel Passt dazu, Woanders weiterlesen */ --db-gewicht-hand-fett: 700; /* Zahlen, Titel in Handschrift, Etikett */ /* [schrift.achsen] Fraunces-Achsen je Rolle: opsz folgt der Größe, SOFT macht weich, WONK kippt einzelne Buchstaben. */ --db-achsen-titel: 'opsz' 144, 'SOFT' 100, 'WONK' 1; /* H1 Startseite */ --db-achsen-h1: 'opsz' 144, 'SOFT' 80, 'WONK' 1; /* H1 Unterseite */ --db-achsen-h2-buehne: 'opsz' 96, 'SOFT' 80, 'WONK' 1; /* H2 Startseite */ --db-achsen-station: 'opsz' 72, 'SOFT' 80, 'WONK' 1; /* Stationstitel */ --db-achsen-h2: 'opsz' 72, 'SOFT' 70, 'WONK' 1; /* H2 Unterseite */ --db-achsen-akte: 'opsz' 48, 'SOFT' 70, 'WONK' 1; /* Aktentitel */ --db-achsen-unterzeile: 'opsz' 48, 'SOFT' 60, 'WONK' 0; /* Unterzeile */ --db-achsen-pointe: 'opsz' 36, 'SOFT' 80, 'WONK' 1; /* Pointe kursiv */ --db-achsen-klein: 'opsz' 36, 'SOFT' 60; /* Kartensatz, Crew-Name, Verwandt-Link */ --db-achsen-h3: 'opsz' 36, 'SOFT' 50; /* H3 */ /* =================================================================== 4 TYPO-SKALA Lesetext in rem (Zoom bleibt wirksam). Bühnen-Werte in px wie auf der Startseite. =================================================================== */ /* [typo.lesetext] Lesetext nach den Unterseiten (R 20.18). */ --db-text-groesse: 1.0625rem; /* 17 px, ab 760 px 18 px (Abschnitt 14) */ --db-zeilenhoehe: 1.65; /* Lesetext */ --db-zeilenhoehe-buehne: 1.58; /* Bühnen mit wenig Text */ --db-absatz: 1.15em; /* Abstand nach dem Absatz */ --db-absatz-buehne: 1em; /* Absatz auf Bühnen */ --db-listenpunkt: 0.45em; /* Abstand zwischen Listenpunkten */ --db-mass: 38rem; /* Zeilenlänge, rund 70 Zeichen */ --db-text-antwort: 1.12rem; /* Antwortblock auf der Karteikarte */ --db-zeilenhoehe-antwort: 1.6; --db-text-klein: 0.92rem; /* Hilfetext, Brotkrumen */ --db-zeilenhoehe-klein: 1.45; --db-text-fehler-groesse: 0.98rem; /* Fehlertext am Feld */ --db-text-label: 1rem; /* Label im Formular */ --db-text-fuss: 0.95rem; /* Fuß */ --db-text-fuss-klein: 0.88rem; /* Fuß klein, kleinste Lesegröße im System */ --db-zeilenhoehe-fuss: 1.55; /* [typo.ueberschrift] Fraunces, immer text-wrap: balance, nie Silbentrennung. */ --db-titel-groesse: clamp(42px, 11vw, 84px); /* H1 Startseite, ab 1100 px clamp(42px, 6vw, 80px) */ --db-titel-zeilenhoehe: 0.96; --db-titel-sperrung: -0.02em; --db-h2-gross-groesse: clamp(42px, 10vw, 88px); /* H2 groß auf Bühnen */ --db-h2-buehne-groesse: clamp(36px, 8.4vw, 64px); /* H2 Startseite, höchstens 18ch */ --db-h2-buehne-zeilenhoehe: 1.02; --db-h2-buehne-sperrung: -0.012em; --db-station-groesse: clamp(32px, 7.4vw, 50px); /* Stationstitel, höchstens 17ch */ --db-station-zeilenhoehe: 1.04; --db-station-sperrung: -0.01em; --db-h1-groesse: clamp(2.15rem, 1.2rem + 3.6vw, 3.7rem); /* H1 Unterseite, höchstens 21ch */ --db-h1-zeilenhoehe: 1.04; --db-h1-sperrung: -0.015em; --db-h2-groesse: clamp(1.65rem, 1.15rem + 1.7vw, 2.35rem); /* H2 Unterseite, höchstens 24ch */ --db-h2-zeilenhoehe: 1.1; --db-h2-sperrung: -0.01em; --db-h3-groesse: 1.3rem; /* H3 */ --db-h3-zeilenhoehe: 1.2; --db-unterzeile-groesse: clamp(23px, 5.6vw, 36px); /* Unterzeile unter dem Titel, ab 1100 px 32px */ --db-akte-titel-groesse: clamp(24px, 5.4vw, 28px); /* Aktentitel */ --db-karte-satz-groesse: 22px; /* Satz auf der Karte */ --db-pointe-groesse: 21px; /* Pointe kursiv */ --db-mass-titel: 21ch; /* Höchstbreite H1 */ --db-mass-h2: 24ch; /* Höchstbreite H2 */ /* [typo.hand] Caveat. Kleinste Größe 21 px, darunter wird Handschrift unleserlich (KONTRAST.md). */ --db-hand-hallo: clamp(32px, 8vw, 50px); /* Hallo-Zeile über dem Titel */ --db-hand-kicker: clamp(1.6rem, 1.25rem + 1.1vw, 2.05rem); /* Kicker über H1 (R 20.19) */ --db-hand-zitat: clamp(1.65rem, 1.3rem + 1.1vw, 2.15rem); /* Zitat (R 20.20) */ --db-zeilenhoehe-zitat: 1.18; --db-hand-zahl-gross: clamp(42px, 9vw, 62px); /* Belegzahl groß (R 20.23) */ --db-hand-zahl: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem); /* Belegzahl Standard (R 20.23) */ --db-hand-titel-karte: 40px; /* Kartentitel */ --db-hand-nav: 25px; /* Navigation in der Kopfzeile */ --db-hand-nav-menue: 30px; /* Navigation im offenen Menü-Zettel (R 20.15) */ --db-hand-link: 25px; /* Link in Handschrift */ --db-hand-randbemerkung: 23px; /* Randbemerkung */ --db-hand-bildunterschrift: 1.35rem; /* Bildunterschrift am Polaroid (R 20.22) */ --db-hand-zettel: 1.42rem; /* Text auf dem Hinweis-Zettel */ --db-zeilenhoehe-zettel: 1.24; --db-hand-faq: 1.7rem; /* FAQ-Frage */ --db-hand-titel-klein: 1.55rem; /* Tabellentitel, Fuß-Titel */ --db-hand-etikett: 21px; /* Etikett Kurze Antwort, kleinste Handschrift */ /* [typo.klein] Bricolage für Bedienung und Versalien. */ --db-knopf-groesse: 17px; /* Knopf (R 20.12) */ --db-knopf-groesse-klein: 15px; --db-knopf-groesse-gross: 19px; --db-zeilenhoehe-knopf: 1.2; --db-pause-groesse: 15px; /* Pausenknopf (R 20.14), schmal 12.5px zweizeilig */ --db-versal-groesse: 12.5px; /* Reiter in Versalien */ --db-versal-sperrung: 0.1em; --db-stempel-schrift-klein: 12px; /* Stempel klein (R 20.24) */ --db-stempel-schrift: 13px; /* Stempel mittel, Standard */ --db-stempel-schrift-gross: 16px; /* Stempel groß */ --db-stempel-sperrung: 0.16em; /* auch Versalzeile im Mail-Kopf */ /* =================================================================== 5 ABSTAND UND MASS =================================================================== */ /* [abstand.skala] Feste Stufen (R 20.26). Karo und Heftrand bleiben eigene Maße. */ --db-abstand-1: 4px; --db-abstand-2: 8px; --db-abstand-3: 12px; --db-abstand-4: 16px; --db-abstand-5: 24px; --db-abstand-6: 32px; --db-abstand-7: 48px; --db-abstand-8: 64px; --db-abstand-9: 96px; --db-abstand-10: 128px; /* [abstand.abschnitt] Vertikaler Rhythmus, gemessen an der Website. */ --db-abschnitt: clamp(56px, 7vw, 88px); /* unter jedem Abschnitt im Lese-Layout */ --db-abschnitt-buehne-oben: 96px; /* Bühne, ab 1100 px 128px */ --db-abschnitt-buehne-unten: 72px; /* Bühne, ab 1100 px 96px */ --db-seitenkopf-unten: clamp(40px, 6vw, 64px); --db-block-abstand: clamp(56px, 8vw, 96px); /* vor FAQ und großen Blöcken */ --db-akte-abstand: clamp(64px, 8vw, 96px); /* über und unter einer Akte */ --db-formular-abstand: clamp(48px, 7vw, 80px); --db-blatt-unten: clamp(56px, 8vw, 104px); /* Luft am Ende des Blatts */ --db-karteikarte-oben: 30px; /* Platz über der Karteikarte mit Etikett: 18 px Überstand, Drehung und Luft */ /* [abstand.heft] Heftrand und Innenabstände. Zwei Seitenarten, gleiche Namen (R 20.29). */ --db-rand-x: 22px; /* rote Randlinie im Lese-Layout. 760 px: 60px, 1000 px: clamp(64px, 7vw, 84px) */ --db-innen-l: 44px; /* Innenabstand links, Lese-Layout */ --db-innen-r: 18px; /* Innenabstand rechts, Lese-Layout */ --db-rand-x-buehne: 26px; /* rote Randlinie auf Bühnen. 760 px: 64px, 1100 px: 112px */ --db-innen-l-buehne: calc(var(--db-rand-x-buehne) + 36px); /* 760 px: + 44px, 1100 px: + 60px */ --db-innen-r-buehne: 18px; /* 760 px: 44px, 1100 px: 72px */ --db-rand-spalte: 0px; /* Randspalte rechts, erst ab 1000 px */ --db-rand-luecke: 0px; /* Lücke vor der Randspalte, erst ab 1000 px */ --db-breit: 100%; /* Breite für Tabellen, Belege, Karten */ --db-karo-groesse: 22px; /* ab 760 px 24px */ --db-breite-buehne: 1320px; /* größte Breite der Startseite (Tisch) */ --db-breite-blatt: 1180px; /* größte Breite von Blatt, Kopfzeile und Fuß */ --db-breite-mail: 640px; /* größte Breite der HTML-Mail */ /* [abstand.bedienung] Tippflächen und feste Höhen. */ --db-tippflaeche: 44px; /* Hausregel für jedes Bedienelement */ --db-tippflaeche-min: 24px; /* WCAG 2.5.8, nur dokumentierte Ausnahmen (R 20.27) */ --db-feld-hoehe: 48px; /* Formularfeld, Leistenknopf */ --db-knopf-hoehe: 52px; /* Knopf */ --db-knopf-hoehe-gross: 62px; /* großer Knopf */ --db-leiste-h: 64px; /* Register-Leiste unten, mobil und Tablet */ --db-scroll-oben: 120px; /* scroll-padding-top unter der klebenden Kopfzeile */ --db-scroll-marke: 96px; /* scroll-margin-top für Sprungziele */ /* [abstand.logo] Logo und der feste Punkt. */ --db-punkt: 9px; /* der orange Punkt, immer 9 px, nie skaliert */ --db-punkt-x: 3.32%; /* Mitte des Punkts in der Wortmarke, von links */ --db-punkt-y: 28.82%; /* Mitte des Punkts in der Wortmarke, von oben */ --db-logo-breite: 191px; /* Kopf und Fuß ab 760 px */ --db-logo-breite-schmal: clamp(140px, calc(100vw - 180px), 230px); /* Kopf und Fuß unter 760 px, immer gleich groß (Wunsch Mathias, 08.10.2026) */ --db-logo-breite-mini: var(--db-logo-breite-schmal); /* Alias, früher 148 px unter 360 px */ --db-logo-breite-fuss-mobil: var(--db-logo-breite-schmal); /* Alias, Fuß gleich groß wie Kopf */ /* =================================================================== 6 RADIUS Handgeschnitten: vier Ecken, vier Werte. Nichts ist exakt rund außer dem Punkt. =================================================================== */ /* [radius] */ --db-radius-knopf: 14px 10px 16px 9px / 10px 15px 9px 14px; /* Knopf */ --db-radius-zettel: 12px 9px 13px 8px; /* Pausenknopf, Leistenknopf, Menü-Zettel, aufgeklappte Leiste */ --db-radius-zettel-klein: 10px 8px 11px 7px; /* Leisten-CTA */ --db-radius-etikett: 12px 8px 14px 9px; /* Zahlen-Etikett */ --db-radius-meldung: 10px 7px 12px 8px; /* Fehlermeldung, Opt-out-Kasten */ --db-radius-platzhalter: 10px 6px 12px 7px; /* Platzhalter-Stimme */ --db-radius-feld: 9px 6px 10px 6px; /* Formularfeld */ --db-radius-haken: 7px 5px 8px 5px; /* Checkbox */ --db-radius-kreis-hand: 50% 46% 52% 48%; /* Nummernkreis */ --db-radius-schritt: 50% 44% 54% 46% / 46% 54% 44% 52%; /* Schrittkreis ungerade */ --db-radius-schritt-gerade: 46% 54% 48% 52% / 54% 44% 56% 46%; /* Schrittkreis gerade */ --db-radius-reiter: 0 10px 10px 0; /* Register-Reiter am Heftrand */ --db-radius-reiter-akte: 10px 14px 0 0; /* Reiter der Akte */ --db-radius-stempel: 5px; /* Stempel (R 20.24) */ --db-radius-menue-knopf: 8px; /* Menüknopf, Reiter mobil */ --db-radius-logo: 4px; /* Logo-Link, Fokusform */ --db-radius-fokus: 3px; /* Fokusrahmen */ --db-radius-mail-kopf: 12px; /* Kopf der HTML-Mail */ --db-radius-mail: 10px; /* Blöcke und Knopf der HTML-Mail */ --db-radius-punkt: 50%; /* Punkt, Reißzwecke */ /* =================================================================== 7 LINIE UND STRICH =================================================================== */ /* [linie.rahmen] CSS-Rahmen. */ --db-linie-knopf: 2.5px; /* Knopf, Pausenknopf, Menü-Zettel, Leiste */ --db-linie-feld: 2px; /* Formularfeld, Reiter, Nummernkreis */ --db-linie-fehler: 3px; /* Feld mit Fehler, Fehlermeldung */ --db-linie-gestrichelt: 2px; /* gestrichelte Trennung */ --db-linie-tabelle: 1.5px; /* Tabellenzeile, gestrichelt */ --db-linie-heftrand: 2px; /* rote Senkrechte */ --db-linie-zitat: 3px; /* Filz-Linie links am Zitat (R 20.20) */ --db-linie-akte: 6px; /* Aktendeckel links (R 20.37) */ --db-linie-karte-oben: 6px; /* Markerfarbe oben auf Crew- und Verwandt-Karte, Crew heute 5px */ --db-linie-stempel: 2.5px; /* Stempelrand (R 20.24) */ /* [linie.unterstrich] */ --db-unterstrich: 1.5px; /* Link in Ruhe */ --db-unterstrich-hover: 2.5px; /* Link Hover (R 20.17) */ --db-unterstrich-aktuell: 3px; /* aktuelle Seite im Fuß */ --db-unterstrich-abstand: 3px; /* text-underline-offset */ --db-unterstrich-hand: 2px; /* Link in Handschrift */ --db-unterstrich-hand-abstand: 5px; /* [linie.fokus] */ --db-fokus-breite: 3px; --db-fokus-abstand: 4px; /* überall (R 20.32) */ --db-fokus-abstand-feld: 2px; /* Felder mit innen liegendem Rahmen */ /* [linie.strich] SVG-Striche, Werte ohne Einheit für stroke-width. Immer runde Enden und Ecken. */ --db-strich-fein: 1.8; /* Bleistift */ --db-strich: 2.4; /* Tinte, Kuli */ --db-strich-icon: 2.6; /* Menü, Pfeil, Crew-Linien */ --db-strich-faden: 3.2; /* roter Faden, Haken, Wunschmarke */ --db-strich-kritzel: 3.4; /* Kritzel unter H2 */ --db-strich-dick: 3.6; /* Filz */ --db-strich-titel: 5; /* Strich unter dem Titel */ --db-strich-dicker: 5.5; --db-strich-extern: 1.9; /* Zeichen für externe Links */ /* [linie.skizze] Handzeichnung über skizze.js (Klasse .db-r, auf der Website .r). */ --db-skizze-amplitude: 1.5; /* Startseite 1.5, Grundwert im Skript 1.6 */ --db-skizze-abtastung: 5px; /* Schrittweite beim Verwackeln */ --db-skizze-fassungen: 3; /* drei Fassungen je Linie. Getauscht (8 Bilder pro Sekunde) nur auf der Startseite der Website */ /* =================================================================== 8 SCHATTEN Weich heißt: Papier liegt auf Papier. Hart heißt: gedruckt, ohne Unschärfe (R 20.25). =================================================================== */ /* [schatten.weich] */ --db-schatten-blatt: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 30px 60px -20px rgba(0, 0, 0, 0.6); /* Blatt auf dem Tisch */ --db-schatten-akte: 0 1px 2px rgba(0, 0, 0, 0.1), 0 24px 40px -22px rgba(40, 25, 5, 0.55); /* Akte, Case, Formular */ --db-schatten-karte: 0 1px 2px rgba(0, 0, 0, 0.1), 0 18px 30px -18px rgba(40, 25, 5, 0.5); /* Karteikarte, Tabelle, FAQ */ --db-schatten-foto: 0 1px 2px rgba(0, 0, 0, 0.14), 0 16px 30px -14px rgba(40, 25, 5, 0.5); /* Polaroid */ --db-schatten-zettel: 0 1px 1px rgba(0, 0, 0, 0.08), 0 14px 26px -14px rgba(40, 25, 5, 0.45); /* Beleg, Wunschzettel */ --db-schatten-postit: 0 2px 2px rgba(0, 0, 0, 0.08), 0 16px 22px -14px rgba(60, 40, 0, 0.5); /* Post-it, Hinweis */ --db-schatten-kopfzeile: 0 10px 22px -14px rgba(0, 0, 0, 0.55); /* klebende Kopfzeile */ --db-schatten-leiste: 0 -10px 22px -14px rgba(0, 0, 0, 0.55); /* Leiste unten, Schatten nach oben */ --db-schatten-feld: inset 0 2px 0 rgba(21, 23, 31, 0.06); /* Formularfeld */ /* [schatten.hart] */ --db-schatten-hart: 4px 5px 0 var(--db-tinte); /* Knopf, Menü-Zettel, aufgeklappte Leiste */ --db-schatten-hart-hover: 6px 7px 0 var(--db-tinte); /* Knopf Hover */ --db-schatten-hart-klein: 3px 4px 0 var(--db-tinte); /* kleiner Knopf, Kontakt in der Kopfzeile */ --db-schatten-hart-bedien: 3px 3px 0 var(--db-tinte); /* Pausenknopf, Leistenknopf, Leisten-CTA */ --db-schatten-hart-gedrueckt: 1px 1px 0 var(--db-tinte); /* gedrückt, Pause aus */ --db-schatten-reiter: 2px 2px 0 rgba(21, 23, 31, 0.6); /* Register-Reiter */ --db-schatten-etikett: 1px 2px 0 rgba(21, 23, 31, 0.25); /* Etikett Kurze Antwort */ /* [schatten.filter] für Freisteller und Requisiten, als filter: drop-shadow() */ --db-schatten-stift: drop-shadow(3px 4px 0 rgba(21, 23, 31, 0.18)); --db-schatten-freisteller: drop-shadow(0 -2px 0 rgba(255, 255, 255, 0.9)) drop-shadow(0 10px 10px rgba(30, 20, 5, 0.25)); --db-schatten-gast: drop-shadow(0 8px 10px rgba(30, 20, 5, 0.3)); /* [schatten.halo] Papier-Unterlage für Text über Faden und Strichen. Hält Text lesbar. */ --db-halo: 0 0 2px var(--db-papier), 0 0 3px var(--db-papier), 0 0 5px var(--db-papier), 0 0 8px var(--db-papier); /* =================================================================== 9 TEXTUR Bilddateien stehen hier bewusst nicht als url()-Token: Chrome löst einen relativen Pfad in einer Custom Property gegen die Seite auf, nicht gegen diese Datei (geprüft 07.10.2026). Die Dateien schreibt jede CSS-Datei selbst als url(): assets/texturen/papierkorn.webp 256 × 256 px, gekachelt, Alpha bis 0.14 assets/texturen/kaffeering.webp 520 × 520 px, Alpha bis 0.46 Verläufe und Daten-URIs sind ortsunabhängig und stehen deshalb hier. =================================================================== */ /* [textur] */ --db-textur-korn-groesse: 256px; /* Kachelgröße des Papierkorns */ --db-kaffeering-groesse: 130px; /* Kaffeering oben rechts am Blatt, ab 760 px 210px */ --db-kaffeering-deckkraft: 0.55; /* Unterseite. Startseite 0.85 */ --db-kaffeering-dreh: 24deg; --db-textur-karo: linear-gradient(var(--db-karo) 1px, transparent 1px), linear-gradient(90deg, var(--db-karo) 1px, transparent 1px); /* Karo laut */ --db-textur-karo-leise: linear-gradient(var(--db-karo-leise) 1px, transparent 1px), linear-gradient(90deg, var(--db-karo-leise) 1px, transparent 1px); /* Karo leise */ --db-karo-versatz: -1px -1px; /* background-position des Karos */ --db-textur-washi: repeating-linear-gradient(90deg, var(--db-klebeband-streifen) 0 6px, rgba(255, 255, 255, 0) 6px 12px); /* Streifen über dem Tape (R 20.5) */ --db-klebeband-zacken: polygon(0 10%, 3% 0, 6% 12%, 9% 2%, 12% 10%, 88% 4%, 91% 14%, 94% 0, 97% 10%, 100% 4%, 100% 90%, 97% 100%, 94% 88%, 91% 98%, 88% 90%, 12% 96%, 9% 86%, 6% 100%, 3% 90%, 0 98%); /* gerissener Rand */ --db-marker-hoehe: 64%; /* Markerstrich: Höhe der Fläche */ --db-marker-lage: 88%; /* Markerstrich: senkrechte Lage */ --db-textur-spirale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='40' viewBox='0 0 30 40'%3E%3Cellipse cx='15' cy='30' rx='4.6' ry='4.2' fill='%231C1A17'/%3E%3Cpath d='M11.5 30 C 10 10, 20 4, 19.5 30' fill='none' stroke='%237d7871' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M12.6 24 C 12.4 12, 17 8, 18 14' fill='none' stroke='%23d9d4cb' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); /* Spiralbindung, repeat-x */ /* =================================================================== 10 DREHUNG Nichts liegt gerade, aber nichts kippt weit. Bereiche statt Zufall. =================================================================== */ /* [drehung] */ --db-dreh-knopf: -1deg; /* Knopf in Ruhe (R 20.12) */ --db-dreh-knopf-hover: 0.5deg; /* Knopf beim Hover */ --db-dreh-kicker: -1.5deg; /* Kicker, Randbemerkung, Fuß-Titel */ --db-dreh-etikett: -2.5deg; /* Etikett Kurze Antwort */ --db-dreh-steckbrief: -0.8deg; /* Karteikarte mit Antwortblock (R 20.21) */ --db-dreh-formular: -0.3deg; /* Formular */ --db-dreh-flaeche-min: -2deg; /* Bereich für Karten, Zettel, Akten */ --db-dreh-flaeche-max: 1.5deg; --db-dreh-foto-min: -6deg; /* Bereich für Fotos */ --db-dreh-foto-max: 4deg; --db-dreh-hand-min: -2.5deg; /* Bereich für Handschrift */ --db-dreh-hand-max: -1deg; --db-dreh-stempel-min: -9deg; /* Bereich für Stempel */ --db-dreh-stempel-max: 4deg; /* =================================================================== 11 EBENEN Regel: Inhalt liegt nie unter Deko. Text steht auf --db-ebene-inhalt oder höher, Deko darunter. Was Text verdecken könnte, bekommt eine Unterlage (--db-halo). =================================================================== */ /* [ebene] */ --db-ebene-grund: 0; /* Faden, Nachthimmel */ --db-ebene-unterlage: 1; /* Brotkrumen, Bühne, Zackenkante */ --db-ebene-deko: 2; /* Stift am Rand, Halo, Randnotiz, Hero-Bild, Freisteller */ --db-ebene-inhalt: 3; /* Abschnitt, Hero-Text, Nummer, Klebeband */ --db-ebene-requisit: 4; /* Büroklammer, Reißzwecke, Gast. Nur am Rand von Fotos und Karten */ --db-ebene-stift-ruhig: 5; /* ruhiger Stift */ --db-ebene-spirale: 25; /* Spiralbindung */ --db-ebene-kopf: 30; /* Kopf der Startseite */ --db-ebene-menue: 40; /* offenes Menü, Kopfzeile Unterseite */ --db-ebene-kopf-fix: 78; /* klebender Kopf, über Filzstift und Flieger, unter Register und Leiste */ --db-ebene-stift: 70; /* Filzstift, fest */ --db-ebene-flieger: 75; /* fliegender Punkt, Rakete */ --db-ebene-register: 80; /* Register am Heftrand */ --db-ebene-leiste: 85; /* Leiste unten */ --db-ebene-sprung: 100; /* Sprunglink (R 20.31) */ /* =================================================================== 12 BEWEGUNG Stop-Motion: steps() ist Pflicht (R 20.34) für alles Gezeichnete. Einmal erscheinen, dann Ruhe. Ausnahme seit 08.10.2026: Kopfzeile und Leiste gleiten weich (--db-kurve-gleiten), sie sind Werkzeug, keine Zeichnung. Ruhige Fassung über html.db-bewegung-aus, Regeln in BEWEGUNG.md und motion.css. =================================================================== */ /* [bewegung.dauer] */ --db-dauer-druck: 0.12s; /* Knopf: Versatz und Schatten (R 20.12) */ --db-dauer-reiter: 0.15s; /* Reiter, Crew-Karte, Verwandt-Karte */ --db-dauer-drehung: 0.2s; /* Knopf-Drehung, Register erscheint, Menü-Zeichen */ --db-dauer-kopf: 0.24s; /* Rest: Register am Heftrand */ --db-dauer-gleiten: 0.38s; /* Kopfzeile und Leiste gleiten herein und hinaus (Bedienelemente, keine Zeichnung) */ --db-dauer-blenden: 0.26s; /* Kopfzeile und Leiste blenden dabei auf und ab */ --db-dauer-zittern: 0.36s; /* einmal zittern beim Ankommen (R 20.35) */ --db-dauer-markieren: 0.4s; /* Marker zieht sich durch */ --db-dauer-schreiben: 0.5s; /* Kicker schreibt sich */ --db-dauer-landen: 0.62s; /* Foto, Stift, Zettel landen */ --db-dauer-zeichnen: 0.7s; /* Strich zeichnet sich */ --db-dauer-kochen: 0.125s; /* Linien tauschen 8 Mal pro Sekunde */ --db-dauer-schreiben-zeichen: 0.035s; /* Startseite: Dauer je Stufe beim Schreiben */ --db-versatz: 0.16s; /* Versatz gleichzeitig sichtbarer Teile */ --db-versatz-markieren: 0.22s; --db-versatz-zeichnen: 0.06s; /* [bewegung.stufen] */ --db-stufen-1: steps(1, end); /* Schnitt: landen, stempeln, zittern */ --db-stufen-2: steps(2); /* Hover, Druck, kleine Wechsel */ --db-stufen-3: steps(3); /* Knopf-Drehung, Register */ --db-kurve-gleiten: cubic-bezier(0.22, 1, 0.36, 1); /* einzige weiche Kurve: Kopfzeile und Leiste (Bedienelemente gleiten, Zeichnungen springen) */ --db-stufen-markieren: steps(6); --db-stufen-zeichnen: steps(8); --db-stufen-schreiben: steps(12); /* [bewegung.ausloeser] Werte für den IntersectionObserver, von JavaScript lesbar. */ --db-sicht-schwelle: 0.12; --db-sicht-rand: 0px 0px -10% 0px; /* =================================================================== 13 BREAKPOINTS Custom Properties wirken nicht in @media. Die Abfragen stehen in breakpoints.css, die Werte hier sind für JavaScript (getComputedStyle) und für die Doku. Lese-Layout wechselt bei 1000 px, Bühnen und Register bei 1100 px (R 20.28). =================================================================== */ /* [breakpoint] */ --db-bp-mini: 360px; /* darunter: Register kompakter */ --db-bp-klein: 460px; /* darunter: Menü nur als Zeichen */ --db-bp-logo: 760px; /* ab hier Logo 191 px, darunter --db-logo-breite-schmal in Kopf und Fuß */ --db-bp-tablet: 760px; /* ab hier 18 px Lesetext, Karo 24 px, breiter Heftrand */ --db-bp-lesen: 1000px; /* ab hier Randspalte, Blattschatten, Inhaltsverzeichnis */ --db-bp-buehne: 1100px; /* ab hier Register am Heftrand, darunter Leiste unten */ --db-bp-nav: 1280px; /* ab hier Navigation in einer Zeile, darunter Menüknopf */ --db-bp-weit: 1440px; /* ab hier Navigation mit mehr Luft */ } /* ===================================================================== 14 STUFEN JE BREAKPOINT Die Website schaltet diese Tokens genau an diesen Stellen um. ===================================================================== */ /* [stufe.tablet] ab 760 px */ @media (min-width: 760px) { :root { --db-text-groesse: 1.125rem; --db-karo-groesse: 24px; --db-rand-x: 60px; --db-innen-l: 100px; --db-innen-r: 48px; --db-rand-x-buehne: 64px; --db-innen-l-buehne: calc(var(--db-rand-x-buehne) + 44px); --db-innen-r-buehne: 44px; --db-kaffeering-groesse: 210px; } } /* [stufe.lesen] ab 1000 px: Lese-Layout mit Randspalte */ @media (min-width: 1000px) { :root { --db-rand-x: clamp(64px, 7vw, 84px); --db-innen-l: clamp(100px, 10.8vw, 128px); --db-innen-r: clamp(36px, 4.6vw, 56px); --db-rand-spalte: clamp(224px, 24.5vw, 292px); --db-rand-luecke: clamp(36px, 4.6vw, 56px); --db-mass: min(38rem, min(100vw, 1180px) - var(--db-innen-l) - var(--db-innen-r) - var(--db-rand-spalte) - var(--db-rand-luecke) - 24px); --db-breit: calc(var(--db-mass) + var(--db-rand-luecke) + var(--db-rand-spalte)); } } /* [stufe.buehne] ab 1100 px: Bühne mit Register am Heftrand */ @media (min-width: 1100px) { :root { --db-rand-x-buehne: 112px; --db-innen-l-buehne: calc(var(--db-rand-x-buehne) + 60px); --db-innen-r-buehne: 72px; --db-titel-groesse: clamp(42px, 6vw, 80px); --db-unterzeile-groesse: 32px; --db-abschnitt-buehne-oben: 128px; --db-abschnitt-buehne-unten: 96px; } } /* ===================================================================== FLÄCHENWECHSEL Auf dem Tisch und nachts tauschen die Rollen ihre Farbe. Die Grundfarben bleiben. Einsatz: