/* ============================================================================ textbild.css — Bilder IM FLIESSTEXT der Wissens- und Themenseiten ============================================================================ WARUM ES DIESE DATEI GIBT Betreiber, 2026-08-26: "wo in dem Text waere es gut, eine Illustration zu haben, um gewisse Massnahmen zu verdeutlichen, die wir dann in den Text einbauen koennen, damit diese ganzen Blocktexte ein wenig aufgelockert werden und verdeutlicht werden durch Illustrationen. Das sollte nicht uebermaessig sein, aber ein bis zwei bis drei Bilder pro Text waere gut." Er hat mehrfach danach gefragt. Es ging bis zum 2026-08-27 technisch nicht: der Seitenbauer kannte nur kasten, raster und hinweis. WARUM EIGENE DATEI, NICHT ANBAU AN style.css ODER bloecke.css RUNTIME_MASTER_PROMPT.md §10.2 Punkt 9: css/ wird nach Aufgaben gegliedert, nicht als eine wachsende Datei gefuehrt. Punkt 1: ein Modul, eine Zustaendigkeit. Diese Datei hat genau eine: wie ein Bild im Fliesstext steht. bloecke.css macht Kastensorten, style.css macht die Seite. Der Zweck laesst sich ohne "und" sagen - das ist die Prueffrage. ============================================================================ DIE KONTRASTREGEL — sie geht allem vor ============================================================================ Betreiber, mehrfach, zuletzt 2026-08-27: "dass der Kontrast von Schriftfarbe zu Hintergrundfarbe immer so stark wie moeglich sein soll." Verfahren: .claude/skills/seitenaufbereitung/SKILL.md Punkt 0. Betroffen ist hier genau eine Schrift: die Bildunterschrift. Nachgerechnet auf den beiden Baendern, auf denen sie wirklich steht: Bildunterschrift auf section--indigo #3a3367 (Wissensseiten) Creme #f4efe6 9,92:1 <- gewaehlt Muted #c3d2ce 7,26:1 Bildunterschrift auf section--petrol #05323c (Themenseiten) Creme #f4efe6 12,00:1 <- gewaehlt Muted #c3d2ce 8,79:1 GEWAEHLT IST CREME, nicht der gedaempfte Ton. Eine Bildunterschrift ist Kleingedrucktes - und genau deshalb war die Versuchung, sie auch farblich zurueckzunehmen. Das waere "bestanden" statt "maximal" gewesen, also der Fehler, den der Skill an Punkt 0 beschreibt. Die Unterschrift hebt sich ueber ihre GROESSE vom Fliesstext ab, nicht ueber weniger Kontrast. Die Farbe steht als var(--c-cream), nicht als fester Wert. Damit dreht sie auf einem hellen Band automatisch mit: .section--light definiert --c-cream auf #10302b um. Ein fester Wert waere dort unsichtbar. Eingetragen in controller/scripts/kontrast_pruefen.py - beide Baender namentlich. Eine Zahl, die nur in einem Kommentar steht, ist keine Pruefung. ============================================================================ WARUM DIESE DATEI AUF JEDER SEITE STEHT, AUCH WO ES KEIN BILD GIBT ============================================================================ Fliesstextbilder kann es nur auf Wissens- und Themenseiten geben: wissenstext() wird ausschliesslich von dort aufgerufen. Die 24 Produktseiten, kuenstler.html und die vier handgepflegten Seiten koennen keines tragen. Trotzdem geht der Verweis in JEDE erzeugte Seite. RUNTIME §10.2 Punkt 9 erlaubt eine Ausnahme von der Aufteilung nur, "wenn ihre Zahl die Ladezeit spuerbar verschlechtert - das ist dann zu MESSEN, nicht anzunehmen." GEMESSEN 2026-08-27: css/style.css 74.175 B css/bloecke.css 11.021 B css/textbild.css 5.273 B roh, 2.459 B komprimiert, EIN zusaetzlicher Abruf Das sind 3 Prozent des heutigen Stylesheet-Gewichts, einmal geholt und danach dreissig Tage im Zwischenspeicher (NGINX: expires 30d). Nicht spuerbar, also gilt die Regel und nicht die Ausnahme. Die Alternative waere ein Schalter an kopf() gewesen. Er haette an jeder Aufrufstelle eine Verzweigung erzeugt und waere zur Falle geworden, sobald doch einmal ein Bild auf einer Produktseite stehen soll - fuer 2,4 KB. ============================================================================ FORMAT ============================================================================ 1:1 bei 1024 x 1024 (BILDSTIL_UND_VERFAHREN_20260826.md §12). Das ist NICHT dasselbe wie bei den Kacheln und Kopfbaendern (16:9, 1280 x 720), und deshalb liegen die Dateien auch in einem anderen Ordner: Medien/Bilder/text/ 1:1, im Fliesstext Medien/Bilder/rubriken/ 16:9, Kachel und Kopfband Der Seitenbauer MISST jede Datei und bricht ab, wenn sie nicht quadratisch oder kleiner als 1024 px ist. Deshalb steht hier kein aspect-ratio als Notnagel: die Masse stimmen, oder es wird gar nicht erst gebaut. ========================================================================= */ /* Die Breite ist bewusst kleiner als die Textspalte (46rem = 736px). Ein Quadrat ueber die volle Spaltenbreite ist 736 px hoch und schiebt den Text vom Bildschirm - das waere das Gegenteil von "auflockern". 24rem laesst Text und Bild als zusammengehoerig lesen. Auf 360 px Breite greift die Begrenzung ohnehin nicht: dort fuellt das Bild die Spalte, und das ist richtig so (RUNTIME §4 Punkt 7, mobil ist der Hauptfall). */ .textbild{ max-width:24rem; margin:1.9rem auto; } /* ========================================================================= KLEIN UND VOM TEXT UMFLOSSEN — angeordnet vom Betreiber 2026-08-27: "Die muessen auch ja nicht so gross sein. Das koennen ja kleine Bilder sein, die vom Text umrahmt werden." 13rem = 208 px. Das ist die Zahl, an der die MINDESTAUFLOESUNG haengt (seiten_bauen.py, BILD_KANTE_MIN_KLEIN = 416 = 2 x 208). Wer hier die Breite aendert, aendert die Pruefung mit - beide Zahlen stehen bewusst nebeneinander und nicht an zwei Orten. Warum float und nicht grid: Der Text soll das Bild WIRKLICH umfliessen, auch ueber mehrere Absaetze hinweg. Das kann in CSS nur float. Ein Grid wuerde das Bild in eine eigene Zeile zwingen - dann ist es klein, aber nicht umflossen, und der Zweck ist verfehlt. */ .textbild--klein{ max-width:13rem; margin:.35rem 0 1.1rem 1.5rem; float:right; } .textbild--klein.textbild--links{ margin:.35rem 1.5rem 1.1rem 0; float:left; } /* MITTE: klein, aber NICHT umflossen. Fuer Stellen, an denen hinter dem Bild kein Fliesstext steht, sondern sofort ein Kasten oder eine Ueberschrift. Dort wuerde ein umflossenes Bild allein in einer sonst leeren Zeile schweben - viel Weissraum daneben, und der Umfluss bringt nichts. Gemessen: ein 208 px hohes Bild braucht rund 550 Zeichen Text neben sich, um sauber abgedeckt zu werden. Wo weniger steht, gilt "mitte". */ .textbild--klein.textbild--mitte{ float:none; margin:1.5rem auto; } /* ========================================================================= WAS NEBEN EINEM UMFLOSSENEN BILD STEHEN DARF - UND WAS NICHT Betreiber, 2026-08-27: "Es gibt ein Bild zum Beispiel bei 'Das Feld waechst mit'. Da hast du ein Bild eingefuegt, das ragt aber dann mit in den Balken rein, was daraus folgt. Ich finde nicht, dass das gut aussieht." Er hat recht, und die Ursache war ein Tippfehler in der Sache: die erste Fassung setzte clear auf `h3`. Die Zwischenueberschriften dieser Seite sind aber `h2.abschnittskopf` (seiten_bauen.py, wissenstext()). Die Regel stand da und griff nie - genau der Fall aus dem Navigations-Skill §5: "Eine CSS-Regel, die dasteht, ist kein Beleg dafuer, dass sie wirkt." NUR FLIESSTEXT DARF UMFLIESSEN. Alles, was eine eigene Einheit mit eigenem Rahmen ist, faengt unterhalb des Bildes an: Zwischenueberschriften sonst ragt das Bild in den naechsten Abschnitt Kaesten und Raster zwei Rahmen nebeneinander sind unruhig, und auf 208 px Restbreite ist ein Kasten nicht lesbar Aufklapper (details) dasselbe, dazu springt beim Oeffnen das Layout Hinweise sie sollen auffallen, nicht ausweichen ========================================================================= */ .stack .abschnittskopf, .stack h2, .stack h3, .stack .kastenreihe, .stack details, .stack .hinweis, .autorhinweis-kurz{clear:both} /* MOBIL IST DER HAUPTFALL (RUNTIME §4 Punkt 7). Unter 34rem = 544 px bleibt neben 208 px Bild keine lesbare Textspalte uebrig: 544 - 208 - 24 Abstand = 312 px, und davon gehen die Seitenraender noch ab. Deshalb faellt der Umfluss dort weg und das Bild wird wieder ein zentrierter Block. */ @media (max-width:34rem){ .textbild--klein, .textbild--klein.textbild--links{ float:none; margin:1.5rem auto; max-width:16rem; } } /* position:relative ist KEIN Schmuck: .ki-hinweis (in style.css) sitzt absolut in der unteren rechten Ecke und braucht diesen Bezugsrahmen. Ohne ihn wandert die Kennzeichnung an den Rand der ganzen Seite. */ .textbild__rahmen{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--c-line); } /* height:auto zusammen mit den width/height-Attributen am : der Browser kennt das Seitenverhaeltnis schon vor dem Laden und haelt den Platz frei. Ohne das springt der Text beim Nachladen nach unten. */ .textbild__rahmen img{ display:block; width:100%; height:auto; } /* Kleiner als der Fliesstext, aber in derselben Farbe - siehe Kontrastregel oben. Die Unterschrift traegt den Sinn des Bildes fuer alle, die es sehen; das alt-Attribut traegt ihn fuer alle, die es nicht sehen. Beides ist noetig, keines ersetzt das andere. */ .textbild__unterschrift{ margin-top:.6rem; font-size:.86rem; line-height:1.55; color:var(--c-cream); } /* Der Abstand oben kommt schon von .stack>*+* (1rem). Steht ein Bild ganz am Anfang eines Textes, waere der zusaetzliche Aussenabstand doppelt. */ .stack>.textbild:first-child{margin-top:0}