/* ──────────────────────────────────────────────────────────── Eigene, bewusste Anpassungen über den Editorial-Auslieferungszustand Zweck: klar trennen, was Projekt-Anpassung und was Theme-Vorgabe ist. Auslieferungszustand des Themes: siehe main.css (unverändert lassen). ──────────────────────────────────────────────────────────── */ /* Banner-Abstand nach der Kopfzeile verkleinern (Original: 6em 0 4em 0) */ #banner { padding: 2em 0 2em 0; } /* Buchcover links im Text (ed-float): klein, vom Text umflossen. Theme-Basis (float, Abstand) bleibt aus main.css; nur Breite begrenzen. */ .image.left.buchcover { max-width: 250px; } .image.left.buchcover img { width: 250px; } /* Cover-Motiv klein im Fliesstext (13.10.2026, Meldung "Deutsche Aphoristiker im Portrait"): fast quadratisch (1200x1162). Angeklickt oeffnet sich das Bild in seiner Groesse. Polsterbreite des Theme-Kastens (1.5em ≈ 40 px) ist in max-width eingerechnet, sonst schrumpft der Abstand zum Text auf 0 px (box-sizing: border-box — gemessen bei .presse-scan, siehe unten). */ .image.left.motiv-200 { max-width: 240px; } .image.left.motiv-200 img { width: 200px; } /* Buchübersicht /veroeffentlichungen (Variante C, 14.10.2026, Stand 3): Cover in einer FESTEN Box (180 x 270) statt Breite + auto-Hoehe, weil die echten Cover unterschiedliche Seitenverhaeltnisse haben (gemessen 0.59 bis 1.34, eines quer): mit auto-Hoehe wurde jede Karte anders hoch. object-fit: contain zeigt jedes Cover vollstaendig (kein Beschnitt), Hochformate fuellen die Hoehe, Querformate bekommen Luft darunter; grid-auto-rows/min-height halten alle Karten gleich hoch. ⚠ Alle Klassen liegen UNTER .buchliste und heissen bewusst NICHT "buchcover": die Startseite benutzt fuer die SinnBilder-Grafik schon span.image.buchcover.left — eine gleichnamige Regel schlug dort durch (Fund 14.10.2026: Bild wurde hoeher und bekam einen Schatten). Stand 4 (17.10.2026) — feste Maße: Die Karte ist ein Raster aus ZWEI Spalten (links Cover-Kasten 180 x 270, rechts Textspalte); die Textspalte ist eine Flex-Spalte. Dadurch ist die Karte immer gleich hoch (301 px), und alle Cover stehen mit ihrer Oberkante auf der Hoehe der ersten Titelzeile. ⚠ Bewusst KEINE reservierten Zeilen (weder fuer den Titel noch fuer den Info-Block): Michaels Entscheidung 17.10.2026. Jahr/Verlag/ISBN/Preis lassen sich nicht fuer alle Buecher gleich fuellen (nicht fuer jedes Buch ist eine ISBN zu ermitteln, vieles ist nur antiquarisch zu haben und hat keinen festen Preis), und das Erscheinungsjahr soll dicht unter dem Titel stehen, nicht mit grossem Abstand. Folge: die Info-Zeilen beginnen je nach Titellaenge auf etwas unterschiedlicher Hoehe, die freie Flaeche sammelt sich geschlossen unten. Zweispaltig wird erst, wenn jede Karte mindestens 440 px breit werden kann (= Textspalte >= 191 px). Der frueher hier stehende Breakpoint 736 px war zu spaet: gemessen brach die Textspalte bei 1150-768 px Fensterbreite auf 120 px ein (Titel bis 6 Zeilen, Karte wuchs auf 358 px Hoehe). */ .buchliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); grid-auto-rows: 1fr; gap: 22px 26px; align-items: stretch; margin: 0 0 1.5em; } .buchliste .buchkarte { display: grid; grid-template-columns: 180px 1fr; /* Cover-Kasten | Textspalte */ column-gap: 20.5px; /* 16px + eine Freistelle (4,45 px bei 16 px Open Sans) */ background: #fff; border: 1px solid #e4e2de; padding: 14px; min-height: 298px; /* = 270 (Cover) + 2 x 14 Polster */ } .buchliste .buchbild { grid-column: 1; width: 180px; /* feste Breite, 20% groesser als 150px */ } .buchliste .buchdaten { grid-column: 2; display: flex; flex-direction: column; } .buchliste .buchbild img { width: 100%; height: 270px; /* 20% groesser als 225px */ object-fit: contain; object-position: top center; display: block; /* Schatten an der SICHTBAREN Coverkante (filter folgt der Bildform), nicht am Kasten — ein box-shadow haette einen 150x225-Rahmen um das Querformat gezeichnet ("weisser Kasten", gemeldet 14.10.2026). */ filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .22)); } .buchliste .buchdaten h4 { font-family: "Roboto Slab", serif; font-size: 18px; /* +2pt gegenüber 15,5px (1pt = 1,333px) */ line-height: 1.3; margin: 0 0 6px; } .buchliste .buchdaten .buchmeta { font-size: 16px; /* = Fliesstextgroesse der übrigen Seiten (Open Sans) */ line-height: 1.5; color: #6f6f6f; /* Jahr/Verlag/ISBN/Preis stehen dicht unter dem Titel (kein reservierter Kasten, siehe Begruendung im Kopfkommentar). */ margin: 0; } .buchliste .buchdaten .buchaktion { font-size: 16px; /* dito */ margin: .55em 0 0; } .buchliste .buchdaten .buchaktion-offen { color: #a8a6a1; } /* Kein eigener Umschalt-Breakpoint mehr noetig: repeat(auto-fit, minmax(440px, 1fr)) stellt unterhalb der Zweispaltigkeit von selbst auf eine Spalte um (gemessen bis 600 px Fensterbreite: eine Karte, Cover weiterhin 180 x 270). */ /* Porträt-Motiv hoch im Fliesstext (14.10.2026, Meldung "Novalis als Aphoristiker"): Hochformat 569x800, Vorgabe war 250 px HOEHE -> 178 px Breite. Hier wird deshalb die Hoehe festgesetzt, nicht die Breite; die Polsterbreite des Theme-Kastens (1.5em ≈ 40 px) ist in max-width eingerechnet (box-sizing: border-box, gemessen bei .presse-scan). */ .image.left.motiv-hoch-250 { max-width: 220px; } .image.left.motiv-hoch-250 img { height: 250px; width: auto; } /* Zeitungsausschnitt der Presseschau links im Text (06.10.2026). Der Scan ist hoch und schmal (262x669); die Theme-Vorgabe von 40 % Breite ergaebe ueber 500 px Hoehe. Deshalb fest begrenzt — und der Scan ist ein Link auf das PDF, deshalb hier nur die Groesse. ACHTUNG (gemessen): Die Breite des umgebenden span schliesst das Theme-Polster ein (box-sizing: border-box). Mit max-width = Bildbreite stand der Text deshalb mit 0 px Abstand am Bild. Darum hier die Polsterbreite (1.5em ≈ 40 px) dazurechnen. */ .image.left.presse-scan { max-width: 260px; } .image.left.presse-scan img { width: 220px; } /* Querformat-Scan eines ganzen Zeitungsartikels (Artikel 7, 06.10.2026): Der Scan ist 1307x778 — er ist selbst der Artikeltext (per OCR ausgelesen) und nur noch Belegbild. Begrenzung wie oben, Polsterbreite eingerechnet. */ .image.left.presse-scan-quer { max-width: 460px; } .image.left.presse-scan-quer img { width: 420px; } /* Presseschau: der Rückverweis steht UNTER dem schwebenden Zeitungsausschnitt, nicht daneben. Wirkt nur auf Seiten mit body_classes: presse. Der Selektor wurde am DOM gemessen (06.10.2026): der Rückverweis liegt in div.inner > section > div > p — deshalb hier absichtlich ohne die Zwischenebenen, damit ein Vorlagenwechsel die Regel nicht still killt. */ body.presse .inner p:last-child { clear: both; } /* Porträtfoto im Pressetext (06.10.2026) — Querformat, deshalb nur die Breite begrenzen; die Bildunterschrift steht als eigener Text unter dem Bild (kommt aus dem Parameter caption des Shortcodes). */ .image.left.presse-foto { max-width: 300px; } .image.left.presse-foto img { width: 260px; } /* Bildunterschrift im Fliesstext (06.10.2026) — EINHEITLICH mit dem Bildnachweis unterm Startseiten-Banner (#banner .bildnachweis): Open Sans, 10pt, kursiv, rechtsbuendig, ruhiges Grau. Kommt vom Parameter caption="…" des Shortcodes ed-float. Warum ohne eigenes padding-right: die Unterschrift sitzt INNERHALB des schwebenden Kastens, dessen Inhaltsbreite genau das Bild ist — rechts ausgerichtet trifft sie damit die rechte Bildkante. */ .image .bildnachweis { display: block; width: 100%; font-family: "Open Sans", sans-serif; font-size: 10pt; font-style: italic; color: #6a6d75; text-align: right; margin-top: 0.4em; padding: 0; line-height: 1.3; } /* Bildunterschrift OHNE Bild (Artikel 8 der Presseschau, 06.10.2026): Die alte Seite hatte dort eine Unterschrift, aber kein Bild. Gleiche Optik wie .image .bildnachweis, nur über die volle Textbreite. */ .presse-bildnachweis { display: block; font-family: "Open Sans", sans-serif; font-size: 10pt; font-style: italic; color: #6a6d75; text-align: right; margin: 0.4em 0 0; padding: 0; line-height: 1.3; } /* Float-Leck: Ein schwebendes Bild (ed-float) innerhalb EINES Blocks ragt sonst ueber dessen Unterkante hinaus — der nächste Abschnitt beginnt dann NEBEN dem Bild (gemessen 29.09.2026: das SinnBilder- Cover endete 48px UNTERHALB der Sektion, der graue Trennstrich lief dadurch mitten durchs Bild). Warum `clear: both` hier NICHT reicht: es gilt fuer den Block selbst, nicht fuer Floats, die IN ihm liegen. Ein Block umschliesst floatende Kinder nur, wenn er einen eigenen Block-Formatierungskontext bildet (`display: flow-root`) oder ein Clearfix-Element am Ende hat. `flow-root` ist das moderne, saubere Mittel dafuer (kein ::after-Hack). */ .modular-text-blocks, .modular-aktuelles { clear: both; display: flow-root; } /* ══════════════════════════════════════════════════════════════ STARTSEITE: Abstand + Trennlinie zwischen den Modul-Blöcken --------------------------------------------------------------- Befund (gemessen, 29.09.2026): der dritte Block "Aktuelles" klebte mit GENAU 0 px Abstand am zweiten Block "Vorstellung". Ursache: das Theme gibt den Abstand ueber die Regel #main > .inner > section { padding: 6em 0 4em 0; border-top: ... } Auf einer MODULAREN Seite liegen die Module aber eine Ebene TIEFER: base.html.twig umschliesst den ganzen Inhalt in eine zusätzliche
, und die Module sind deren Kinder. Der Theme-Selektor greift nur auf die Uebersektion - die einzelnen Module bekommen davon NICHTS ab. Hier wird die Theme-Regel deshalb fuer die Modul-Bloecke nachgebildet - mit denselben Werten und demselben Trennlinien-Stil wie main.css Z.3452 und den Breakpoints danach (1680 / 1280 / 736). Ausnahme: das erste Kind bleibt ohne Linie und ohne Abstand analog zu '#main > .inner > section:first-of-type'. Auf der Startseite ist das der Banner (Begrüßung + Bildnachweis). ══════════════════════════════════════════════════════════════ */ #main > .inner > section > .modular-text-blocks, #main > .inner > section > .modular-aktuelles { padding: 4em 0 0 0; border-top: solid 2px rgba(210, 215, 217, 0.75); } #main > .inner > section > .modular-text-blocks:first-child, #main > .inner > section > .modular-aktuelles:first-child { padding-top: 0; border-top: 0; } @media screen and (max-width: 1680px) { #main > .inner > section > .modular-text-blocks, #main > .inner > section > .modular-aktuelles { padding-top: 3em; } } @media screen and (max-width: 1280px) { #main > .inner > section > .modular-text-blocks, #main > .inner > section > .modular-aktuelles { padding-top: 2em; } } @media screen and (max-width: 736px) { #main > .inner > section > .modular-text-blocks, #main > .inner > section > .modular-aktuelles { padding-top: 1em; } } /* ══════════════════════════════════════════════════════════════ APHORISMEN-SEITEN (Unterseiten von /aphorismen) --------------------------------------------------------------- Aktivierung: im Frontmatter der Seite die Zeile body_classes: aphorismen-reihe Dann gilt für ALLE Absätze dieser Seite: ruhige Serifen-Kolumne, leicht links gewichtet (8%), in zart sandfarbenem Kästchen mit einem Strich links in derselben Farbfamilie. Gestaltungsentscheidungen (Michael, 26.09.2026): * Schrift Roboto Slab 18px/1.75 — liegt lokal im Theme (kein Google-Request) und ist gut lesbar für ein Publikum der zweiten Lebenshälfte. * max-width 36em (+20% auf Wunsch Michaels, 27.09.2026): laengere Zeilen, damit handgesetzte
nicht durch einen Kastenumbruch zerrissen werden. * Kasten 5,5% Sandton auf Weiss = sichtbar #fbfaf8. * Strich #f0eee7 = dieselbe Farbe, ca. 5% dunkler (Ton in Ton, KEIN Kontraststrich). Wirkt als Kante, nicht als eigenes Element. DOM-Pfad: body.aphorismen-reihe > #wrapper > main#main > div.inner > section > p ══════════════════════════════════════════════════════════════ */ body.aphorismen-reihe main#main div.inner section p { font-family: "Roboto Slab", Georgia, serif; font-size: 1.125rem; /* 18px */ line-height: 1.75; color: #23252b; max-width: 36em; margin-left: 8%; /* bewusst nicht zentriert, nicht bundig */ margin-right: auto; margin-bottom: 1.6em; padding: 1.1em 1.35em 1.1em 1.6em; background: rgba(185, 164, 136, .055); /* sichtbar: #fbfaf8 */ border-left: 3px solid #f0eee7; /* Wunschfarbe, Ton in Ton */ border-radius: 2px; } /* Alternative Strich-Abstufungen: bei Bedarf eine Klasse ZUSÄTZLICH zu "aphorismen-reihe" ins body_classes schreiben, z. B. body_classes: aphorismen-reihe strich-15 */ body.strich-10 main#main div.inner section p { border-left-color: #e2e1df; } body.strich-15 main#main div.inner section p { border-left-color: #d5d4d3; } body.strich-20 main#main div.inner section p { border-left-color: #c9c8c6; } body.strich-25 main#main div.inner section p { border-left-color: #bcbcba; } body.strich-30 main#main div.inner section p { border-left-color: #b0afae; } /* Auf schmalen Fenstern (Tablet/Mobil) wieder zum linken Rand, sonst wird der Text in die Seitenmitte gedrückt. */ @media screen and (max-width: 900px) { body.aphorismen-reihe main#main div.inner section p { margin-left: 0; } } /* ══════════════════════════════════════════════════════════════ BILDNACHWEIS im Banner der Startseite (Wunsch J. Wilbert, 27.09.2026) --------------------------------------------------------------- Der Text kommt aus 01.home/01._welcome/banner.md:
Zeichnung: Hans-Joachim Uthke
Warum als echter Text und nicht per CSS ::after: eine Urheber- nennung MUSS im HTML stehen (Screenreader, Suchmaschinen, Kopieren). Begrenzung: Die ID #banner gibt es NUR im Banner-Modul der Startseite. Kein anderes Element nutzt sie -> das Styling wirkt ausschliesslich dort, ganz ohne body_classes. Ausrichtung: rechtsbuendig zur Grafik, geringer Abstand darueber. ══════════════════════════════════════════════════════════════ */ #banner .bildnachweis { display: block; /* eigene Zeile unter dem Bild */ width: 100%; /* spannt wie das Bild */ font-family: "Open Sans", sans-serif; /* Fliesstext-Schrift des Themes */ font-size: 10pt; /* auf Wunsch 10pt (~13,3px) */ font-style: italic; /* kursiv */ color: #6a6d75; /* ruhiges Grau, nicht schwarz */ text-align: right; /* rechtsbuendig zur Grafik */ margin-top: 0.4em; /* geringer Abstand zur Grafik */ padding: 0; line-height: 1.3; } /* Auf schmalen Fenstern nicht rechtsbuendig quetschen — dort steht das Bild ueber die volle Breite, dann linksbuendig lesbarer. */ @media screen and (max-width: 736px) { #banner .bildnachweis { text-align: left; } } /* ══════════════════════════════════════════════════════════════ KOPFZEILE: Domain "aphoristiker.de" ueberall fett (27.09.2026) --------------------------------------------------------------- Im Theme steht die Domain in innerhalb von