/* Zwei Gestaltungen neben dem Bestand. Gewählt wird über data-design am , gesetzt von einem kurzen Skript im Kopf der Seite (siehe _shell.html) aus `?design=` oder localStorage. Ohne Attribut gilt der Bestand aus app.css — diese Datei fügt nichts hinzu, solange nichts gewählt ist, und ist deshalb gefahrlos immer geladen. Beide Gestaltungen bestehen fast nur aus Tokenwerten. Das ist der Sinn der Gestaltungsknöpfe in app.css: Farbe, Rundung und Schrift stehen an einer Stelle, und die 1600 Zeilen Aufbau bleiben eine Fassung. Die Regeln unter dem Tokenblock sind die Ausnahmen, bei denen ein Token nicht reicht — jede mit Begründung. Kontraste sind nachgerechnet, nicht geschätzt (Verhältnis nach WCAG, Ziel 4.5:1 für Text und 3:1 für Grafik). Die Zahlen stehen bei den Paletten. Der Kopfbereich mit dem Foto trägt in app.css seine eigene Farbgruppe — helle Schrift, aufgehellte Zustandsfarben —, weil der Schleier das Foto dort dunkel hält. 'Instrument' lässt sie stehen. 'Tagblatt' hat sie bis zum 11.09.2026 ebenfalls stehen lassen und hatte damit einen schwarzen Block über jeder Papierseite; es kehrt sie jetzt um, samt Schleier, Kacheln und Bilddeckung — siehe den Abschnitt am Ende des Tagblatt-Blocks. */ /* ============================================================================ A · Tagblatt — hell, Papier, Serifentitel Warum überhaupt hell: das Portal läuft am Berg auf dem Handy, und dort ist mittags eine dunkle Oberfläche schlecht zu lesen. Kein Weiss als Grund, sondern ein warmes Papier — reines Weiss flimmert unter Sonne und lässt die Karten nicht mehr vom Grund abheben. Die Karte ist heller als der Grund, nicht dunkler: so liegt der Inhalt oben. Gemessen gegen Grund #f5f2ec: ink 15.6:1, ink-2 7.9:1, muted 4.0:1, Verweisblau 5.4:1. Zonen 3.8 / 4.7 / 4.4 / 4.5 / 6.5:1 — alle über 3:1. Sportfarben auf der Kartenfläche 5.2 bis 6.7:1. Die Zonenfarben sind NICHT die des Bestands. Die stehen in app.css mit ihren Kontrasten gegen #0d0d0d dokumentiert; auf Papier fällt Z3-Gelb (#f9d71c) auf 1.4:1 und ist damit unsichtbar. Sie sind darum eigene, abgedunkelte Töne — und halten die Reihenfolge blau, grün, gelb, orange, rot bei, weil Z3 gegen Z4 die Grenze ist, um die es in diesem Projekt geht. ============================================================================ */ :root[data-design="tagblatt"] { color-scheme: light; /* Farben aus Marios Vorlage (Bildschirmfoto, 22.09.2026), Pixel fuer Pixel gemessen: Seite #f8fbfe, Karten #fafcff mit Rand #e0ecf8, Schrift Marineblau #0c3c74, Nebentext #4f6f9d, Beschriftungen #8ca4c4, Akzent #0a78f0. Vorher war die Gestaltung cremefarbenes Papier (#f5f2ec). */ --plane: #f8fbfe; --surface: #fafcff; --rail: #f8fcfe; --ink: #0c3468; --ink-2: #4f6f9d; --muted: #8ca4c4; --grid: #e3ecf6; --axis: #b9cbe2; --ring: #e0ecf8; --s1: #0a78f0; --s2: #b8431a; --s3: #0f7a55; --s4: #8a5c00; --s5: #a83a63; --s6: #0a6b0a; --s7: #5b4fc4; --s8: #b8474a; --z1: #1683b5; --z2: #227d2d; --z3: #8a6d00; --z4: #a85c0a; --z5: #a81f24; --good: #0a7a0a; --warn: #8a6200; --crit: #a82a2a; --crit-text: #a82a2a; --track: #eaf2fb; --rf: .8; --on-akzent: #fff; /* Auf Papier trägt die Fläche, nicht der Rand: ein feiner Schlagschatten hebt die Karte ab, wo im Dunkeln der hellere Grund das tut. */ --schatten-fein: 0 1px 2px rgba(12,52,104,.06); --schatten-hoch: 0 6px 20px rgba(12,52,104,.12); /* Sportfarbe für Text auf einer Marke nach SCHWARZ aufhellen, nicht nach weiss: die Pille ist hell, eine nach weiss gemischte Farbe verschwindet darin. */ --abz-mix: #14130f; /* Serifen nur für Titel. Nichts geladen — die Liste ist, was auf macOS und iOS ohnehin da ist, mit Georgia als Rückfall auf Windows. */ --font-kopf: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif; } /* Karten heben sich über den Schatten ab, nicht nur über den Rand. */ :root[data-design="tagblatt"] .card { box-shadow: var(--schatten-fein); } /* Titel dürfen in einer Serifenschrift etwas grösser stehen: sie wirkt bei gleicher Punktzahl kleiner als eine Grotesk, und das Gewicht 650 hat sie nicht. */ :root[data-design="tagblatt"] .head h1 { font-weight: 600; letter-spacing: -.01em; } :root[data-design="tagblatt"] .card h2, :root[data-design="tagblatt"] .detail h3, :root[data-design="tagblatt"] .cal-month h3 { font-weight: 600; font-size: 16px; } /* Die Zeile über der Fusszeile und die Tabellenlinien waren für dunkel gedacht und liegen auf Papier zu schwer. */ :root[data-design="tagblatt"] tbody tr + tr { border-top-color: var(--grid); } /* --------------------------------------------------------------------------- Der Kopfbereich mit dem Foto (11.09.2026) Er war die eine Stelle, die diese Gestaltung NICHT angefasst hat: app.css gibt ihm eine eigene, dunkle Farbgruppe, weil der Schleier das Foto in jeder Gestaltung dunkel hält und weisse Schrift darauf lesbar sein muss. Auf Papier stand damit ein schwarzer Block über jeder Seite (Mario: «bi ?design=tagblatt isch dä header no z'dunkel»). Jetzt gehört der Kopf zur Gestaltung: das Foto bleibt, aber als Untergrund — ein Papierschleier darüber, das Bild auf ein Fünftel gedämpft, und die Schrift dunkel wie überall sonst. Das Bild sagt dann noch, wo man ist, und drängt sich nicht mehr auf. Nachgerechnet auf der Platte: sie deckt 0.3, der Weichzeichner mittelt den Untergrund darunter. Gemessen wurde die Leuchtdichte hinter der Platte für alle fünf Bilder — im Mittel 0.22 bis 0.41, das dunkelste Zehntel unter 0.04. Für eine grössere dunkle Partie mit 0.05 ergibt die Mischung 0.33, und --ink darauf 6.5:1. --ink-2 käme dort auf 3.2:1 und das Verweisblau auf 3.8:1 — beide zu wenig, deshalb steht der ganze Titelblock in --ink. Wer das Blau der Augenbraue zurückwill, braucht 0.5 Deckung. Die Kacheln decken mehr (0.82), sie tragen Zahlen und keine Fliesstext-Zeile. --------------------------------------------------------------------------- */ :root[data-design="tagblatt"] .head { /* Dieselben Werte wie die Seite. Sie stehen hier noch einmal und werden nicht geerbt, weil app.css sie auf .head ausdrücklich setzt. */ --ink: #0c3468; --ink-2: #4f6f9d; --muted: #8ca4c4; --s1: #0a78f0; --good: #0a7a0a; --warn: #8a6200; --crit: #a82a2a; --crit-text: #a82a2a; --ring: #e0ecf8; --track: #eaf2fb; color: var(--ink); background: var(--surface); box-shadow: var(--schatten-fein); } /* Das Foto steht voll da, ohne Schleier darüber. Zwei Anläufe gingen anders: erst auf ein Fünftel gedämpft («ez gseht mä d'bilder gar nid»), dann mit einem Papierschleier darüber («bilder sind immerno z'hell»). Beides war derselbe Fehler — das ganze Bild aufhellen, damit ein Textblock darauf lesbar wird. Lesbar wird die Schrift jetzt über ihre EIGENE Fläche: der Titelblock bekommt eine Papierplatte, wie die Kacheln darunter längst eine haben. Das Bild bleibt das Bild, und die Platte liegt darauf. Im Dunkeln bleibt es beim Verlauf: dort deckt weisse Schrift mit Schattenhof ein dunkles Foto ohne eigene Fläche, und eine Platte wäre ein Kasten zu viel. */ :root[data-design="tagblatt"] .head-schleier { background: none; } :root[data-design="tagblatt"] .head-text { padding: 12px 14px; border-radius: calc(12px * var(--rf)); /* .3 auf Marios Ansage. Dafür trägt der Weichzeichner mehr: er mittelt den Untergrund, und eine gemittelte Fläche ist ruhiger als eine scharfe bei gleicher Helligkeit. Der Preis steht in der Zeile darunter — bei so wenig Deckung hält nur noch die kräftige Textfarbe, die gedämpfte und das Verweisblau fallen unter 4.5:1. Der ganze Titelblock steht deshalb in --ink. */ background: rgba(255,254,251,.3); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border: 1px solid rgba(255,254,251,.38); } /* Augenbraue, Überschrift und Untertitel alle in der kräftigen Farbe: über einer Platte mit 0.3 Deckung ist alles andere zu blass. Die Augenbraue verliert damit ihr Blau — sie ist hier eine Ortsangabe und keine Zustandsfarbe, das trägt sie. */ :root[data-design="tagblatt"] .head-text, :root[data-design="tagblatt"] .head-text .head-oben, :root[data-design="tagblatt"] .head-text p { color: var(--ink); } /* Die Augenbraue steht in app.css in einem nach WEISS aufgehellten Blau, damit sie auf dem Foto leuchtet. Auf Papier verschwindet sie damit; die Farbe setzt die Regel weiter unten mit dem Rest des Titelblocks. */ :root[data-design="tagblatt"] .head-oben { text-shadow: none; } /* Die Schlagschatten der Schrift sind schwarze Höfe für weissen Text. */ :root[data-design="tagblatt"] .head h1, :root[data-design="tagblatt"] .head p { text-shadow: none; } /* Die Kacheln im Kopf sind dunkles Glas. Auf Papier helles. */ /* Die Kacheln liegen über einem sichtbaren Foto und müssen ihre Zahlen selbst tragen: dichter als im Dunkeln, wo sie nur über einem Verlauf liegen. */ :root[data-design="tagblatt"] .k-kachel { background: rgba(250,252,255,.86); border-color: #e0ecf8; } :root[data-design="tagblatt"] .k-klick:hover { background: rgba(250,252,255,.96); border-color: #b9cbe2; } :root[data-design="tagblatt"] .k-fuss { border-top-color: #e0ecf8; } /* Das Fragezeichen in der Ecke, ebenfalls dunkles Glas. */ :root[data-design="tagblatt"] .head-hilfe { background: rgba(255,254,251,.66); border-color: rgba(26,26,23,.18); } :root[data-design="tagblatt"] .head-hilfe:hover { border-color: rgba(26,26,23,.4); } /* ============================================================================ B · Instrument — schwarz, eckig, Zahlen in Monospace Die Gegenrichtung: kein Papier, sondern ein Messgerät. Grund ist reines Schwarz, die Flächen liegen knapp darüber, Ränder sind deutlicher, Rundungen fast weg (--rf .2 lässt aus 11 px noch 2 px). Zahlen stehen in Monospace, damit Spalten und Zeitangaben untereinander stehen — bei einer Tabelle mit Dauer und Höhe ist das der ganze Punkt. Gemessen gegen Grund #000: ink 18.5:1, ink-2 8.2:1, muted 4.4:1, Verweisblau 8.0:1. Zonen 10.4 / 11.4 / 16.1 / 10.8 / 6.4:1. Auf reinem Schwarz sind die Farben des Bestands zu satt — sie sind hier eine Spur heller und kühler. Keine Schatten. Ein Schlagschatten auf Schwarz ist nicht sichtbar und tut nur so; die Trennung macht der Rand. ============================================================================ */ :root[data-design="instrument"] { color-scheme: dark; --plane: #000; --surface: #0c0d0f; --rail: #08090a; --ink: #eef1f4; --ink-2: #9aa3ad; --muted: #6b747d; --grid: #1b1f25; --axis: #2c333b; --ring: rgba(238,241,244,.16); --s1: #4ea3ff; --s2: #ff7a45; --s3: #2fc98f; --s4: #f0b429; --s5: #f472a0; --s6: #3ec93e; --s7: #a99bff; --s8: #ff8585; --z1: #3cc4f5; --z2: #4cd964; --z3: #ffe14d; --z4: #ffa640; --z5: #ff4d55; --good: #3ec93e; --warn: #ffc043; --crit: #ff5c5c; --crit-text: #ff5c5c; --track: rgba(238,241,244,.08); --rf: .2; --on-akzent: #000; /* Kein Schatten, sondern eine Kante. --schatten-hoch trägt in app.css das Kurzinfofenster; ohne Ersatz stünde es randlos im Schwarz. */ --schatten-fein: none; --schatten-hoch: 0 0 0 1px var(--ring); --abz-mix: white; --font-zahl: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; } /* Monospace läuft breiter als die Grotesk. Ohne diese beiden Regeln stösst die grosse Kachelzahl an ihre Ellipse — '10:40 h' war der Fall, der es zeigte. */ :root[data-design="instrument"] .k-wert { font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -.02em; } :root[data-design="instrument"] .tile .v, :root[data-design="instrument"] .hw .v { font-size: 19px; letter-spacing: -.02em; } /* Beschriftungen weiter gesperrt: das ist der Zug, der eine Skala von einer Überschrift unterscheidet. */ :root[data-design="instrument"] .tile .k, :root[data-design="instrument"] .hw .k, :root[data-design="instrument"] .k-kachel .k-titel { letter-spacing: .1em; } /* Auf reinem Schwarz sind die Kacheln über dem Foto zu hell und schwimmen. */ :root[data-design="instrument"] .k-kachel { background: rgba(0,0,0,.46); border-color: rgba(238,241,244,.18); } /* Tabellenlinien tragen hier die Struktur, weil die Rundung weg ist. */ :root[data-design="instrument"] tbody tr + tr { border-top-color: var(--grid); } /* Zahlenspalten in Tabellen ebenfalls in Monospace — sonst gilt die Monospace nur für die grossen Kennzahlen, und gerade in einer Tabelle mit Dauer und Höhe ist das Untereinanderstehen der Punkt. Erkannt über :not(:first-child) und nicht über eine Klasse: es gibt keine. Die Regel darüber richtet jede Zelle rechts aus und nimmt nur die erste Spalte davon aus — rechts ausgerichtet heisst hier also 'Zahl'. Kommt einmal eine Tabelle mit Text in der zweiten Spalte, ist das die Stelle, an der es auffällt. Die Fussnote der Summenzeile gehört mit dazu. */ :root[data-design="instrument"] tbody td:not(:first-child), :root[data-design="instrument"] tfoot td:not(:first-child) { font-family: var(--font-zahl); font-size: 12px; }