/* ============================================================================ bloecke.css — die sechs Kastensorten der Wissensseiten ============================================================================ WARUM ES DIESE DATEI GIBT Betreiber, 2026-08-27: "die einzelnen Karten oder Boxen auch unterschiedliche Farben haben, das sieht alles noch sehr monoton aus und nicht schoen aufbereitet." Entscheidung FB-D-1: "Ja, alle sechs Sorten." Sein Zusatz: "Ich wollte ja auch, dass die Ueberschrift auch eine eigene Farbe hat, dass oben ein Balken ist, wo die Ueberschrift drin ist, dass sich das mehr abhebt. Auch das foerdert dann ein bisschen mehr die Kontraste." DIE REGEL, DIE ALLEM VORGEHT — Betreiber, mehrfach, zuletzt 2026-08-27: "dass der Kontrast von Schriftfarbe zu Hintergrundfarbe immer so stark wie moeglich sein soll." Ausgeschrieben mit Verfahren und Ursachenanalyse: .claude/skills/seitenaufbereitung/SKILL.md WARUM EIGENE DATEI, NICHT ANBAU AN style.css RUNTIME_MASTER_PROMPT.md §10.2 Punkt 9: css/ wird nach Aufgaben gegliedert. Diese Datei hat genau eine Zustaendigkeit: wie ein Kasten seine Sorte zeigt. ============================================================================ DIE ZWEITE FASSUNG DER FARBEN — und warum die erste falsch war ============================================================================ Betreiber am 2026-08-27 zur ersten Fassung: "Die Farben bei dir sind nicht gut, die sind zu weich, zu verblasst, die sind nicht warm genug und der Kontrast von helllila zu leicht dunklerem Lila ist nicht gross genug." ER HAT IN BEIDEM RECHT, UND ES IST NACHGEMESSEN. Die Buntheit (Chroma in Oklab, also das, was ein Auge als "kraeftig" sieht) der ersten Fassung: Abgrenzung #c3d2ce 0,017 <- praktisch farblos Begriff #f4efe6 0,013 <- praktisch farblos Verfahren #7fc7e8 0,086 Anwendung #8fe0c4 0,089 Einordnung #d9aef0 0,102 Wegweiser #f7dd75 0,127 Und die Farbtoene lagen zu fuenf Sechsteln im KALTEN Bereich (178, 313, 170, 229 Grad). Auf einem violetten Grund ist helllila auf dunklerem Lila genau der Fall, den er nennt: die Helligkeit reicht rechnerisch, aber der Farbton trennt nicht. DER FEHLER IM VERFAHREN, nicht nur im Ergebnis: "kraeftig" war als HSL-Saettigung gemessen worden. Die ist bei hellen Farben wertlos - #fff9e5 hat HSL-Saettigung 100 Prozent und ist trotzdem fast weiss. Gemessen wird ab jetzt die Buntheit in Oklab. ============================================================================ KONTRAST — die zweite Fassung ist kraeftiger UND kontrastreicher ============================================================================ Alle 49 Kaesten stehen auf `section--indigo` (#3a3367). Der Kasten legt rgba(0,0,0,.20) darueber: #2e2952. Der Balken legt rgba(0,0,0,.68) darauf: #0f0d1a. Der Balken wurde gegenueber der ersten Fassung deutlich dunkler, damit kraeftige Farben ueberhaupt Platz bekommen - je dunkler der Grund, desto bunter darf die Schrift sein, ohne Kontrast zu verlieren. Sorte Ton neu Buntheit auf Balken auf Kasten --------------------------------------------------------------------- Verfahren Tuerkis #2bcfd3 0,125 10,04:1 7,05:1 Anwendung Frischgruen #58d463 0,189 10,08:1 7,08:1 Einordnung Rose #ff9ecc 0,127 10,08:1 7,08:1 Begriff Warmes Sand #e1b38b 0,076 10,09:1 7,09:1 Wegweiser Gold #fcd402 0,180 13,32:1 9,36:1 Abgrenzung Koralle #ffa492 0,112 10,05:1 7,06:1 ZWEI ZAHLEN, DIE ZUSAMMEN GELESEN WERDEN MUESSEN: schwaechster Kontrast erste Fassung 8,55:1 jetzt 10,04:1 geringste Buntheit erste Fassung 0,013 jetzt 0,076 (6x) Der Kontrast steigt, OBWOHL die Farben kraeftiger werden. Genau das war verlangt. Anforderung waeren 4,5:1 - die wird hier nicht "bestanden", sondern deutlich uebertroffen. FARBTONABSTAENDE, damit sich keine zwei Sorten aehneln (mind. 30 Grad): Abgrenzung 32 -> Begriff 62 -> Wegweiser 95 -> Anwendung 145 -> Verfahren 197 -> Einordnung 350 -> Abgrenzung Kleinster Abstand 30 Grad, groesster 153 Grad. Kein Paar liegt zu nah. ALLE SECHS SIND WAERMER ALS VORHER: Abgrenzung 178 -> 32 · Begriff 82 -> 62 · Anwendung 170 -> 145 Verfahren 229 -> 197 · Einordnung 314 -> 350 (Lila -> Rose) Wegweiser 96 -> 95, dafuer 1,4-fache Buntheit Gerechnet und nachpruefbar: python3 controller/scripts/kontrast_pruefen.py (Zeilen "Kastentitel ...") ============================================================================ WAS DIESE DATEI NICHT AENDERT ============================================================================ Die Kastenflaeche und die Fliesstextfarbe bleiben unangetastet. Damit wird kein einziger Kontrastwert des LESETEXTES beruehrt - nur Kante, Titelzeile und Aufzaehlungszeichen tragen die Unterscheidung. ============================================================================ */ :root{ /* Zweite Fassung, 2026-08-27. Jede Farbe ist der bunteste Ton ihres Farbtons, der auf dem Balken noch mindestens 10:1 haelt. Nicht nach Gefuehl gewaehlt, sondern gesucht - Verfahren im Skill. */ /* AKZENT auf dunklem Grund: linker Rand und Aufzaehlungszeichen. Nur das Gruen ist am 2026-08-28 geaendert worden. Betreiber: "Zum einen gefaellt mir das Gruen nicht, das passt nicht so ganz, das ist zu leuchtend." Gemessen gab ihm die Zahl recht - es war mit Abstand die bunteste der sechs: Gruen 0,189 · Gold 0,180 · Rose 0,127 · Tuerkis 0,125 Koralle 0,112 · Sand 0,076 Es steht jetzt auf 0,125, dem Mass der uebrigen. Der Farbton bleibt, der Kontrast auf der Kartenflaeche auch (6,95:1 statt 7,08:1). */ --sorte-verfahren:#2bcfd3; /* Tuerkis */ --sorte-anwendung:#84ce86; /* Gruen, entschaerft: war #58d463 */ --sorte-einordnung:#ff9ecc; /* Rose */ --sorte-begriff:#e1b38b; /* Warmes Sand */ --sorte-wegweiser:#fcd402; /* Gold */ --sorte-abgrenzung:#ffa492; /* Koralle */ /* --------------------------------------------------------------------- DER KOPFBALKEN IST SEIT 2026-08-28 HELL, nicht mehr dunkel. Betreiber, woertlich: "zum anderen waere es fast besser, haettest du hier einen hellen Balken genommen, damit mehr Kontrasten arbeiten, denn die andere Farbe ist schon dunkel. Also waere es ein heller Balken, vielleicht ein passendes hellblau und dann eine schwarze Schrift oder eine ganz dunkelblaue Schrift." Er hat recht, und es ist mehr als Geschmack. Die alte Fassung setzte dunkle Schrift-auf-dunkel gegen dunkel: abgedunkelter Balken auf dunkler Karte auf dunklem Grund. Drei dunkle Ebenen uebereinander, und der einzige Helligkeitssprung steckte in der Schrift. Ein heller Balken bringt den Sprung dorthin, wo er wirkt - an die Flaeche. WARUM DAS DER FRUEHEREN BEGRUENDUNG NICHT WIDERSPRICHT: die alte Regel "der Balken toent nicht, er dunkelt ab" galt fuer einen Balken, der in der SORTENFARBE getoent war - also mitteldunkel, mit hellem Text darauf. Der senkte den Kontrast wirklich. Ein HELLER Balken mit DUNKLEM Text ist eine andere Bauform, und sie erreicht mehr: 12:1 statt 10:1. Gesucht, nicht gewaehlt (Skill §3.5). Alle sechs tragen DIESELBE Helligkeit (L 0,870) und DIESELBE Buntheit (0,070) - nur der Farbton unterscheidet sie. Deshalb wirkt keine kraeftiger als die andere, und genau das war sein Einwand gegen das Gruen. Kontrast zur Balkenschrift: 11,96 bis 12,64:1 Spanne ueber alle sechs: 0,68 - praktisch gleich --------------------------------------------------------------------- */ /* VIERTE FASSUNG, 2026-08-28 nachmittags, Betreiber (FB-G-5): "Das sind wieder so grell ausgebleichte Farben. Ich haette sie gerne hell, aber schon, dass sie waermer und natuerlicher sind. Also vielleicht eher ins Pastell reingehen." Gesucht in Oklab: Helligkeit 0,84 statt 0,87 (weniger ausgebleicht), Buntheit 0,06 statt 0,07 (Pastell), jeder Farbton 7 bis 20 Grad Richtung Gelb/Orange gedreht (waermer): 197->185, 145->130, 351->10, 63->70, 95->88, 32->45. Kontrast zur Balkenschrift 10,92 bis 11,46:1, zur Kastenflaeche 8,07 bis 8,47:1. Dritte Fassung zum Vergleich: #9de3e4 #b8e1b8 #f9c2da #f6cba5 #e2d4a0 #ffc4b8. */ --balken-verfahren:#9ed8cf; --balken-anwendung:#bed3aa; --balken-einordnung:#efbbc2; --balken-begriff:#e4c4a1; --balken-wegweiser:#dbc99e; --balken-abgrenzung:#edbfab; /* Dunkelblau statt Schwarz - seine zweite Nennung. Gesucht bei L 0,20 und Farbton 275°: dunkel genug fuer 12:1 auf allen sechs Balken, aber erkennbar blau. */ --balkenschrift:#0e1135; } /* --------------------------------------------------------------------------- Die sechs Sorten. Jede setzt nur EINE Variable; alles Weitere haengt daran. So laesst sich eine Farbe an genau einer Stelle aendern. --------------------------------------------------------------------------- */ .kasten--verfahren { --sorte-farbe: var(--sorte-verfahren); --balkenflaeche: var(--balken-verfahren) } .kasten--anwendung { --sorte-farbe: var(--sorte-anwendung); --balkenflaeche: var(--balken-anwendung) } .kasten--einordnung { --sorte-farbe: var(--sorte-einordnung); --balkenflaeche: var(--balken-einordnung) } .kasten--begriff { --sorte-farbe: var(--sorte-begriff); --balkenflaeche: var(--balken-begriff) } .kasten--wegweiser { --sorte-farbe: var(--sorte-wegweiser); --balkenflaeche: var(--balken-wegweiser) } .kasten--abgrenzung { --sorte-farbe: var(--sorte-abgrenzung); --balkenflaeche: var(--balken-abgrenzung) } /* --------------------------------------------------------------------------- Der Kasten mit Sorte: randloser Kopfbalken statt Innenabstand oben. `.kasten` hat in style.css padding und grid-gap. Beides wird hier auf null gesetzt, damit der Balken bis an die Kante laeuft; die Abstaende uebernehmen danach die Kinder selbst. --------------------------------------------------------------------------- */ .kasten--sorte{ padding:0; gap:0; overflow:hidden; /* der Balken folgt der Eckenrundung */ border-left-color:var(--sorte-farbe); } .kasten--sorte > .block__titel{ margin:0; padding:.5rem 1.1rem; background:var(--balkenflaeche); /* je Sorte hell, siehe oben */ color:var(--balkenschrift); /* dunkelblau statt Sortenfarbe */ /* Die Trennlinie entfaellt: zwischen hellem Balken und dunkler Karte ist der Sprung selbst die Trennung. Eine Linie darauf waere Zierat. */ } .kasten--sorte > .block__text{ padding:.75rem 1.1rem 0; } .kasten--sorte > .block__punkte{ padding:.75rem 1.1rem 0 2.2rem; } .kasten--sorte > :last-child{ padding-bottom:.85rem; } /* Ein Kasten ohne Text unter dem Balken darf nicht als nackter Balken enden. */ .kasten--sorte > .block__titel:last-child{ border-bottom:0; padding-bottom:.5rem; } /* --------------------------------------------------------------------------- Aufzaehlungszeichen — Winkel Betreiber 2026-08-27: "Die Aufzaehlungszeichen finde ich gut." Eingesetzt ist der Winkel, der vorgeschlagene von vieren. Er wirkt wie ein Wegweiser und passt damit zu Kaesten, in denen etwas zu tun ist. Gezeichnet aus zwei Raendern eines leeren Elements: null zusaetzliche Dateien, kein fremder Dienst, keine Abhaengigkeit davon, ob eine Schriftdatei das Zeichen fuehrt. Er nimmt die Farbe SEINER Sorte an und traegt sie bis in die Liste hinein. Umstellen auf Strich oder Haken: die Formen stehen unten fertig. --------------------------------------------------------------------------- */ .kasten--sorte .block__punkte{ list-style:none; } .kasten--sorte .block__punkte li{ position:relative; } .kasten--sorte .block__punkte li::before{ content:""; position:absolute; left:-1em; top:.52em; width:.34em; height:.34em; border-right:2px solid var(--sorte-farbe); border-top:2px solid var(--sorte-farbe); transform:rotate(45deg); } /* --------------------------------------------------------------------------- JE SORTE EINE EIGENE FORM - Betreiber-Entscheidung FB-G-1, 2026-08-28. Die Frage vom 27.08. bot vier Formen als Entweder-oder; er hatte sie als Bausteine gelesen, "die man alle nutzen kann". Seine Wahl: je Sorte eine eigene Form nach Vorschlag: anwendung -> Haken (dort steht, was zu tun ist) einordnung -> Strich (dort wird abgewogen, nichts angewiesen) alle uebrigen bleiben beim Winkel (oben). Der Strich ist GEZEICHNET (Balken aus dem Hintergrund), kein Schriftzeichen - damit er nicht an einer Schriftdatei haengt (Seitenaufbereitungs-Skill §5). --------------------------------------------------------------------------- */ .kasten--anwendung .block__punkte li::before{ left:-1.05em;top:.4em;width:.3em;height:.55em; border-right:2px solid var(--sorte-farbe); border-bottom:2px solid var(--sorte-farbe); border-top:0;transform:rotate(40deg); } .kasten--einordnung .block__punkte li::before{ left:-1.05em;top:.72em;width:.55em;height:2px; border:0;transform:none;background:var(--sorte-farbe); } /* --------------------------------------------------------------------------- Helle Sektionen. Die Wissensseiten stehen heute alle auf `section--indigo`, aber die Regel gehoert trotzdem hierher: auf hellem Grund traegt der Balken keine Abdunklung, sonst steht helle Schrift auf hellem Grund. Die Kontrastwerte oben gelten NUR fuer den dunklen Grund. Wandert je ein Kasten in eine helle Sektion, ist die ganze Palette neu zu rechnen - die Sortenfarben sind fuer den dunklen Grund gesucht worden und waeren auf Weiss unlesbar. --------------------------------------------------------------------------- */ .section--light .kasten--sorte{ --balkenflaeche:rgba(16,48,43,.07); } .section--light .kasten--sorte > .block__titel{ color:inherit; } .section--light .kasten--sorte .block__punkte li::before{ border-color:currentColor; } /* --------------------------------------------------------------------------- Schmalformat — 360 px ist der Hauptfall (RUNTIME §4.7) --------------------------------------------------------------------------- */ @media (max-width:420px){ .kasten--sorte > .block__titel{padding:.45rem .85rem} .kasten--sorte > .block__text{padding:.65rem .85rem 0} .kasten--sorte > .block__punkte{padding:.65rem .85rem 0 1.95rem} } /* ========================================================================= AUTORHINWEIS AM ANFANG — FB-C-14, Betreiber 2026-08-27 "Nur den Ort aendern - Hinweis auch an den Anfang." Der vollstaendige Hinweis stand nur am FUSS jeder Wissensseite. Dort liest ihn, wer den Artikel schon hinter sich hat - genau das war sein Einwand: der Rahmen kommt zu spaet. Er steht jetzt zusaetzlich ganz oben, in der Kurzform (erster Satz des unteren Hinweises, wortgleich). KONTRAST GESUCHT, NICHT GEWAEHLT (seitenaufbereitung §0 und §3.5): Flaeche rgba(0,0,0,.18) ueber section--indigo #3a3367 -> #302a54 Creme #f4efe6 auf #302a54 = 11,57:1 gedaempft#c3d2ce auf #302a54 = 8,47:1 Genommen ist CREME. "Maximal moeglich" ist nicht "bestanden" - dieselbe Entscheidung wie bei der Bildunterschrift in css/textbild.css. Untergeordnet wirkt die Zeile ueber GROESSE und Linie, nicht ueber blasse Farbe. Genau das lehrt der Skill: Kontrast senken ist nie das Mittel, um etwas leiser zu machen. */ .autorhinweis-kurz{ max-width:76ch; margin:0 auto 1.9rem; padding:.6rem .95rem; font-size:.8rem; line-height:1.55; color:var(--c-cream); background:rgba(0,0,0,.18); border-left:2px solid var(--c-line); border-radius:var(--radius); } .autorhinweis-kurz strong{font-weight:600} @media (max-width:600px){ .autorhinweis-kurz{font-size:.78rem;padding:.55rem .8rem;margin-bottom:1.5rem} }