/* ══ Gestaltung „Farbregal, blaues Menü" ═══════════════════════════════════ Das Stylesheet der Website — **das einzige**. Bis zum 2026-08-24 stand daneben ein zweiter Entwurf („heutiger Stand"); der Verlag hat entschieden, und er ist entfernt (Vorgang #9). Diese Datei hieß bis dahin `design-farbregal.css`. ⚠ **Kommentare, die auf `style.css` verweisen, meinen den entfallenen Entwurf** — dort stand die jeweils gleichlautende Regel. Wo eine solche Fundstelle noch etwas erklärt, steht sie inzwischen in CLAUDE.md; wo sie nur Geschichte ist, ist sie stehengeblieben. **Neue Verweise dieser Art gibt es nicht mehr:** Es gibt keine zweite Datei, in der man nachsehen könnte. Der Gedanke: Die Seite wird von den Buchfarben getragen. Jeder Titel hat eine aus seinem Cover abgeleitete Basisfarbe (`Book.accent_color`); die Templates geben sie als `--akzent` an jeder Buchkachel mit. Damit die Farben wirken, tritt alles andere zurück: ein dunkles Band als Kopf, weißer Grund, keine zweite Zierfarbe. Erkennbar als Nachfolger von zuklampen.de: Raleway/Open Sans, Versalnavigation, Verlagsblau als Akzent. Anders als dort: asymmetrisches Raster statt gleichgroßer Kacheln, Farbfläche statt Weißraum. ⚠ **Die Klassennamen stammen aus dem abgelösten Entwurf und sind noch nicht angeglichen** — `.slider` ist kein Schieber, sondern die Farbwand, `.slider__slide` ein Feld darin. Das Umbenennen berührt Vorlagen, Stylesheet und die Kommentare, die auf die Namen verweisen; es steht aus. */ /* ── Schriften (selbst gehostet, keine Google-Fonts-Einbindung) ── */ @font-face { font-family:'Raleway'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/raleway-regular.woff2') format('woff2'); } @font-face { font-family:'Raleway'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/raleway-700.woff2') format('woff2'); } @font-face { font-family:'Raleway'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/raleway-italic.woff2') format('woff2'); } @font-face { font-family:'Open Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/opensans-regular.woff2') format('woff2'); } @font-face { font-family:'Open Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/opensans-700.woff2') format('woff2'); } @font-face { font-family:'Open Sans'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/opensans-italic.woff2') format('woff2'); } :root { --blau: #003D7A; /* Verlagsblau aus logo-blue.svg – Akzent und Verweise */ /* Zierlinien und Flächen, die AUF dem Menüband liegen: das Verlagsblau wäre dort auf dem blauen Band unsichtbar (Kontrast 1,0). Ein aufgehelltes Weiß trägt dagegen auf beiden Bändern. */ --auf-menue: rgba(255,255,255,.32); /* ── Die Kachel der Kachelstreifen (Vorgang #220) ── Miriam Hirschauer am 2026-08-26: „Die Cover sind recht groß in der Übersicht. Dadurch gehen weniger in eine Zeile und es wird weniger wuselig. Wenn sie 10–20 % größer werden, sollte das gut aussehen." ⚠ **150 px sind gemessen, nicht die Mitte ihres Fensters.** Entschieden hat es das Telefon: Bei 375 px passen heute 2,32 Kacheln ins Bild, bei 143 px noch 2,13, bei 150 px 2,05 — und bei 156 px (ihrer Obergrenze) **1,98**. Dort kippt die zweite Kachel unter „ganz sichtbar", und mit ihr der Anschnitt der dritten, an dem man sieht, dass es weitergeht. Am Schreibtisch bringt 150 px genau das Gewünschte: 8 Kacheln werden 7. ⚠ **Die Höhe muss mit, sonst passiert nichts.** Die Cover sitzen mit `object-fit: contain` in der Box; ihr Verhältnis ist hochkant, es begrenzt also die **Höhe**. Eine breitere Box allein ließe sie unverändert — gemessen an zwei Umschlägen, die heute 105 und 127 px breit sind, nicht 130. 180 × 150/130 = 208. ⚠ **Ein Token, weil die Zahl vierfach dastand** (`flex`, `width`, zweimal `max-width`). Wer eine davon ändert und die anderen übersieht, bekommt eine Kachel, die breiter ist als ihr Cover — und sucht den Fehler im Bild. */ --kachel: 150px; --kachel-cover: 208px; --dunkel: #0f2132; /* dunkler Grundton: Überschriften, Rahmen, Menübänder */ /* Farbe der Menübänder in Kopf und Fuß – ausgelagert, damit die Spielart „Farbregal mit blauem Menü" sie allein austauschen kann (siehe Ende dieser Datei). Alles außerhalb der Bänder bleibt dadurch unberührt. */ /* Kopf- und Fußband. ⚠ **Nicht `--dunkel`**: Was daran hängt (Überschriften, Rahmen der Kategorieknöpfe, Suchformular) bleibt dunkel, die Bänder tragen das Verlagsblau — so hat der Verlag am 2026-08-24 entschieden. Der Ton stammt aus `logo-blue.svg`. */ --menue: #003D7A; --grau: #f7f7f7; --text: #222222; --leise: #6a7480; --raleway: 'Raleway', system-ui, sans-serif; --opensans: 'Open Sans', system-ui, sans-serif; /* Rückfall, falls eine Kachel ohne --akzent auskommen muss – dasselbe Verlagsblau wie oben, damit nirgends ein zweiter Blauton auftaucht. */ --akzent: #003D7A; /* Breite einer Textspalte. ⚠ **Die Zahl ist gemessen, nicht übernommen.** Open Sans in 16 px setzt hier 8,97 px je Zeichen (nachgemessen über eine Probe aus 59 Zeichen, auf drei Seiten gleich); 39 rem sind 624 px und damit **70 Zeichen** je Zeile. Empfohlen sind 45–75; deutsche Prosa mit ihren Zusammensetzungen liegt gern am oberen Rand. ⚠ **Sie ist eingeführt worden, weil Fließtext ohne eigene Spalte über die volle Containerbreite lief.** Gemessen am 2026-08-24: Pressestimme und Autorenbiografie **133 Zeichen**, die Vita auf der Buchseite 121, die Buchbeschreibung 100. Bei 133 Zeichen verliert das Auge beim Rücksprung die Zeile — das ist kein Geschmack, sondern der Grund, aus dem es die Empfehlung gibt. ⚠ **Wer eine neue Stelle mit Fließtext baut, nimmt dieses Token.** Eine zweite hingeschriebene Breite wäre die nächste Stelle, an der es auseinanderläuft — `.seite-text` stand auf 46 rem, `.news-detail` auf 760 px, und beide meinten dasselbe. */ --textbreite: 39rem; /* ── Schriftgrade ───────────────────────────────────────────────────────── ⚠ **Eine Skala, seit dem 2026-08-24 — vorher waren es 43 Werte.** Gemessen im Stylesheet: 43 verschiedene `font-size`-Angaben in rem, die Schritte dazwischen meist 1–5 %. Acht Grade lagen zwischen 11,8 und 13,6 px, vier zwischen 15,7 und 16,5; allein auf der Startseite standen 16 verschiedene. **Das war keine Skala, sondern ein Kontinuum** — und ein Unterschied von 0,3 px ist keine Entscheidung, sondern ein Versehen, das sich fortpflanzt. Die neun Stufen sind **nicht gerechnet, sondern an den vorhandenen Rollen ausgerichtet**: Jede sitzt dort, wo im Bestand ohnehin ein Häufungspunkt lag. Deshalb ist die größte Zuordnung nur 5,6 % entfernt — bei einem 11-px-Label 0,2 px, beim Seitentitel 1,6 px. | Stufe | rem | px | Rolle | |---|---|---|---| | 1 | 0,70 | 11,2 | kleinste Marken: Rollen, Zählungen, Aufschriften | | 2 | 0,78 | 12,5 | Kleingedrucktes: Urheber und Preis der Kachel, Daten | | 3 | 0,85 | 13,6 | Menüband, Anrisse, kleiner Fließtext | | 4 | 0,92 | 14,7 | Sekundärtext neben dem Fließtext | | 5 | 1,00 | 16,0 | **Fließtext** | | 6 | 1,10 | 17,6 | Kartentitel, Bandüberschriften | | 7 | 1,25 | 20,0 | Zwischenüberschriften | | 8 | 1,45 | 23,2 | große Zitate | | 9 | 1,90 | 30,4 | Seitentitel | ⚠ **Eine Größe steht bewusst außerhalb**, weil sie keine Schrift bemisst, sondern eine Form: `.buchfahne` (0,52 rem — die Breite des Fähnchens hängt über `line-height` an ihr). Bis zum 14.09.2026 war es auch der Platzhalter der Rasterkachel. Wer sie in die Skala zwingt, verschiebt keine Schrift, sondern eine Geometrie. ⚠ **Die vier `clamp()`-Größen der Bühne bleiben ebenfalls außen vor.** Sie wachsen mit der Fensterbreite; eine Stufe ist ein fester Wert. Beides zusammenzubringen hieße, die eine oder die andere Eigenschaft aufzugeben. ⚠ **Wer einen Schriftgrad setzt, nimmt eine Stufe.** Eine hingeschriebene Zahl ist die 44. — und in zwei Monaten wieder ein Kontinuum. */ /* ⚠ **Die ganze Skala ist am 2026-08-31 um 15 % angehoben worden** (Vorgang #189). Miriam Hirschauer auf die beiden vorgelegten Fassungen: „größer insgesamt ist besser." Gefragt war, ob es reicht, wenn nur die großen Stufen wachsen — die Antwort war nein. ⚠ **Der Faktor ist nicht gewählt, sondern der des Musters.** Sie hat eine Fassung gesehen, in der die drei großen Stufen um rund 15 % standen (1,45 / 1,68 / 2,20 rem), und die als zu klein beurteilt — aber nicht die Stufen, sondern den Umfang. 1,15 auf alle neun trifft die gesehenen Werte wieder (1,44 / 1,67 / 2,19) und zieht den Rest nach. Ein neuer Faktor hätte ihre Beurteilung entwertet. ⚠ **Die Verhältnisse bleiben, weil alle mit demselben Faktor gehen.** Eine Skala, bei der die kleinen Stufen stärker wachsen als die großen, wäre eine andere Skala — und die hat niemand vorgelegt. */ --schrift-1: 0.80rem; --schrift-2: 0.90rem; --schrift-3: 0.98rem; --schrift-4: 1.06rem; --schrift-5: 1.15rem; --schrift-6: 1.27rem; --schrift-7: 1.44rem; --schrift-8: 1.67rem; --schrift-9: 2.19rem; } * { box-sizing: border-box; } /* ⚠ **Der Fließtext hängt an keiner Stufe, sondern hier — und genau das war die Frage von Vorgang #189.** „Reicht es, wenn die großen Überschriften wachsen, oder soll auch der Fließtext größer werden?" Antwort: auch er. 16 → 18 px, also dieselben rund 15 % wie die Skala; DuMont, das Vorbild aus der Meldung, setzt ihn auf 18. ⚠ **In Pixeln, nicht in rem — und das ist der Grund, warum die Seite nicht einfach zoomt.** `rem` hängt an der Wurzel, nicht am Body; Abstände, Raster und `--textbreite` bleiben also, wo sie sind. Nur die Schrift wächst. ⚠ **Die Zeilenlänge wird dadurch besser, nicht schlechter.** `--textbreite` ist auf 624 px gerechnet; bei 16 px standen dort gemessene 74 Zeichen je Zeile, also über den empfohlenen 75 — bei 18 px sind es rund 65, die Mitte des Bereichs 45 bis 75. **Wer die Breite mitwachsen lässt, macht das zunichte.** */ body { margin: 0; font-family: var(--opensans); font-size: 18px; line-height: 1.6; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; } /* ⚠ **`display: block` ist hier kein Schönheitsstrich, sondern die Behebung eines sichtbaren Fehlers** (→ Vorgang #87, 14.08.2026). Ohne ihn ist ein Bild ein Textzeichen: Es sitzt auf der Schriftlinie, und darunter bleibt der Platz für Unterlängen stehen. Der Coverkasten der damaligen Rasterkachel war dadurch **höher als das Bild** — gemessen 157,8 gegen 151,2 px, also 6,6 px Überstand —, und weil der weiße 1-px-Ring am Behälter hängt, zeichnete er ein Rechteck, das unten über den Umschlag hinausstand. Gemeldet als „Rechteck unter dem Cover“. ⚠ **`style.css` hatte die Zeile von Anfang an** (dort Zeile 61). Der Fehler steckte also nicht in einer Gestaltungsentscheidung, sondern in einer fehlenden Zeile beim Nachbauen des Zurücksetzens — und er blieb unsichtbar, solange niemand eine farbige Fläche hinter die Bilder legte. */ img { display: block; max-width: 100%; } h1, h2, h3, h4 { font-family: var(--raleway); font-weight: 400; margin: 0; } p { margin: 0 0 1rem; } a { color: var(--blau); } .container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; } /* ══ Kopf ══ Der heutige Stand hat drei Bänder übereinander (Servicezeile, weißer Logobereich, blaue Navigation). Hier wird daraus ein einziges dunkles Band: die Servicezeile entfällt, Logo und Navigation rücken zusammen. */ .topbar { display: none; } .site-header { /* ⚠ `--band` statt `--menue`: Die Startseite kann den Kopf umfärben, wenn ein Bühnenplatz eine eigene Farbe trägt (Vorgang #191). Siehe base.html — Kopfleiste und Menüband müssen gemeinsam wechseln, das Logo liegt über der Grenze. */ background: var(--band, var(--menue)); padding: 1.1rem 0 0.4rem; } /* ⚠ **Das Logo steht rechts** (Vorgang #184, Miriam Hirschauer 24.08.2026: „Logo an rechten Rand versetzen"). Das kehrt die gewohnte Leserichtung um — Marke links, Navigation rechts —, ist aber ausdrücklich gewünscht. Ein Zusammenstoß mit dem Klappknopf droht dabei **nicht**: Der sitzt im Menüband, und das ist ein eigenes `