/* ===================================================================== * VERANSTALTUNGEN (Events Manager) — Terminliste, Kategorie-Seiten, * Termin-Detailseite. * * Geladen ausschliesslich auf den Termin-Ansichten (inc/enqueue.php, * tpw_veranstaltungen_styles). Das Stylesheet laeuft als LETZTES im Kopf, * nach style.css und rahmen.css — bei gleicher Spezifitaet gewinnt es also. * * GRUNDSATZ: Fremdes Markup wird NICHT angefasst (Update-Sicherheit, * DESIGN-RAHMEN Paginierungs-Absatz). Die Karten-Struktur kommt aus den * Format-Optionen des Plugins und traegt eigene tpw-*-Klassen; alles, was * hier auf `.em`-Klassen zielt, ist reines Nachziehen von Plugin-Vorgaben. * * ----------------------------------------------------------------------- * WARUM HIER SO VIEL `!important` UND `.em.pixelbones` STEHT * * Events Manager legt seine gesamte Ausgabe in einen Behaelter * `.em.pixelbones` und bringt darin ein komplettes fremdes Typo-System mit * ("PXL Bones"), das seine Werte AUSNAHMSLOS mit `!important` setzt: * * .em.pixelbones h1…h6 { margin-bottom: 20px !important; * font-weight: 300 !important; } * .em.pixelbones h3 { font-size: calc(var(--font-size) + 20px) * !important; letter-spacing: -1px !important; } * .em.pixelbones p, … ul, … dl { margin-bottom: 25px !important; } * .em.pixelbones ul { list-style: circle inside !important; * padding-left: 0 !important; } * * Das war die eigentliche Ursache der Rueckmeldung aus Runde 1 („Titel zu * gross", „Bloecke globig"): Der Kartentitel stand nicht mit den hier * gesetzten 1.34rem da, sondern mit **29,5 px in Gewicht 300** und 20 px * Abstand darunter, die Monatsueberschrift mit 35,5 px, und JEDES `

` der * Karte trug 25 px Aussenabstand. Gemessen im Dev, nicht geschaetzt. * * Gegen ein fremdes `!important` hilft nur ein eigenes — dieselbe Lage wie * bei der Paginierung im DESIGN-RAHMEN und beim Buchen-Knopf (unten). Und es * braucht zusaetzlich die hoehere Spezifitaet: `.em.pixelbones h3` ist * (0,2,1) und schlaegt ein blosses `.tpw-tkarte-titel` (0,1,0) auch bei * gleichem `!important`. Mit vorangestelltem `.em.pixelbones` steht es * (0,3,0) zu (0,2,1) — gewonnen. * * Wo das Plugin seine Werte ueber CSS-Variablen bezieht, wird stattdessen * die VARIABLE gesetzt (Abschnitt 0) — das ist der leisere Weg und braucht * kein `!important`. * * Kein Plugin wurde angefasst. * * INHALT * 0. Plugin-Variablen auf die CI ziehen * 1. Einleitung ueber der Liste * 1b. Kategorie-Filter (Chip-Zeile) * 2. Terminkarte (Liste + Kategorie-Seiten) * 3. Statuskennzeichen (ausgebucht / abgesagt) * 4. Monats-Zwischenueberschriften * 5. Kategorie-Seite * 6. Termin-Detailseite * 7. Buchungsformular * 8. Mobil * ===================================================================== */ /* ===================================================================== * 0. PLUGIN-VARIABLEN AUF DIE CI ZIEHEN * * PXL Bones ist variablengesteuert und bringt eine graue Grundstimmung mit: * Rahmen `#bbbbbb`, Feldkonturen `#d1d1d1`, Sekundaertext `#555555`, Akzent * ein blaues `hsl(220,86%,57%)`. **Grauflaechen und Fremdfarben sind nach * Rahmen 1/2 tabu.** Ein Satz Variablen zieht das an der Wurzel gerade und * wirkt auf ALLE Plugin-Bausteine — auch auf die, die hier gar nicht * einzeln vorkommen. Kein `!important` noetig, keine neuen Farbwerte. * ===================================================================== */ .em.pixelbones { --accent-color: var(--tpw-gruen); --accent-color-hover: var(--tpw-gruen-dunkel); --text-color-normal: var(--tpw-ink); --text-color-richer: var(--tpw-ink); --text-color-softer: var(--tpw-ink-soft); --border-color: var(--tpw-linie-rand); --border-color-softer: var(--tpw-feld-rand); --background-color-softer: var(--tpw-surface-2); --code-background: var(--tpw-surface); --input-padding: 12px 14px; --button-primary-color: #fff; /* Neutrale Haarlinie fuer Zustands-Chips. Abgeleitet aus dem * Text-Grauton --tpw-ink-soft (#5c6350) — Rahmen 2 laesst „neutrale * Text-Grautoene" ausdruecklich zu, verboten sind nur graue FLAECHEN. * Der Chip bleibt darum weiss und wird nur ueber Kante und Schrift * neutral. */ --tpw-kante-neutral: rgba(92,99,80,.34); } /* ===================================================================== * 1. KOPFZONE DER LISTE — Einleitung * * RUECKMELDUNG RUNDE 2: „Ich finde das oben bei der Eventliste noch nicht * schoen — inhaltlich ja korrekt, halt einfach nicht schoen." * * Der Befund: ueber der Liste standen DREI gleich laute Bloecke ohne * Zusammenhang — Seitentitel, ein fuenfzeiliger Vorspann in Vorspanngroesse, * und darunter eine lose Reihe Chips, die auf 840 px Spaltenbreite ueber zwei * Zeilen unterschiedlicher Laenge umbrach. Kein Element ordnete sich einem * anderen unter. * * VORBILD IST DER KOPF VON /unsere-tiere/ (archive-tier.php, .str-intro): * dort steht links eine knappe Textsaeule (Eyebrow, Ueberschrift, EIN Satz) * und rechts die Sprungnavigation — und beides liegt zusammen auf der zarten * Flaeche --tpw-surface, die den Kopf als eigene Zone vom Inhalt abhebt. * Uebernommen wird davon genau das, was hier traegt: der Vorspann wird kurz * und leise, und die Chips bekommen dieselbe getoente Flaeche, damit sie als * EIN Block lesen statt als sechs schwimmende Pillen (Abschnitt 1b). * * DIE RANGFOLGE IST DAMIT: Titel (laut) — ein Vorspannsatz (leise) — eine * Servicezeile (noch leiser) — der Filterblock (gegliedert) — die Liste. * * Der Text selbst ist gekuerzt (em-paket/phase-b.php): die Aufzaehlung * „Besuche, Fuehrungen, Waschbaerbesuche, Eselerlebnisse" ist entfallen, weil * die Chip-Zeile zwei Zeilen darunter GENAU diese Arten aufzaehlt — mit * Anzahl und als Link. Zweimal dieselbe Liste ist keine zweite Information. * ===================================================================== */ .entry-content .tpw-termine-intro { max-width: 62ch; margin-bottom: .55em; font-size: 1.06rem; line-height: 1.7; color: var(--tpw-ink-soft); } .entry-content .tpw-termine-intro b, .entry-content .tpw-termine-intro strong { color: var(--tpw-ink); } /* Die Servicezeile (Saison, Gutscheine, Kindergeburtstag) traegt Hinweise, * keine Kernaussage — sie steht darum in Fliesstextgroesse unter dem * Vorspann und nicht mit ihm auf einer Stufe. */ .entry-content .tpw-termine-service { max-width: 66ch; margin-bottom: 0; font-size: .95rem; line-height: 1.65; color: var(--tpw-ink-soft); } /* ===================================================================== * 1b. KATEGORIE-FILTER (Chip-Zeile) * * Uebernommen von der Tieruebersicht /unsere-tiere/ — dort steht ueber den * Baendern genau diese Kombination: Versal-Label + Reihe weisser Chips mit * gruener Haarkontur (`.str-jump-lab` / `.str-chips` / `.str-chip` in * css/tiere.css). Werte sind bewusst 1:1 uebernommen und nicht neu * erfunden: 1.5px --tpw-feld-rand, --r-btn, 8/12 Polster, 0.88rem/600, * Hover = Flaeche --tpw-surface-2 + Kontur --tpw-gruen. * * Der AKTIVE Chip folgt der aktiven Seite der Paginierung (DESIGN-RAHMEN, * Paginierungs-Absatz): gefuellt --tpw-gruen, Text weiss — die Flaeche IST * die Auszeichnung, darum keine zusaetzliche Unterstreichung. * * Das Markup kommt aus inc/veranstaltungen.php und steht ausserhalb des * `.em.pixelbones`-Behaelters — hier braucht es also kein `!important`. * ===================================================================== */ /* RUNDE 3 — DIE ZEILE IST EIN BLOCK GEWORDEN. * * Frei auf Weiss standen die sechs Chips als lose Reihe da, die auf 840 px * ueber zwei ungleich lange Zeilen umbrach; zusammen mit Titel und Vorspann * ergab das drei unverbundene Bloecke („noch nicht schoen"). Auf der zarten * Flaeche --tpw-surface lesen sie als EIN gegliederter Block — genau so, wie * die Sprungchips auf /unsere-tiere/ auf der Kopfflaeche liegen. Die Flaeche * ist keine neue Farbe (Stufe 2 der Palette, Rahmen 1) und keine Grauflaeche; * die Chips selbst bleiben weiss und heben sich dadurch erst richtig ab. */ .entry-content .tpw-tfilter { margin: clamp(20px, 2.6vw, 26px) 0 clamp(30px, 4vw, 42px); padding: clamp(14px, 1.8vw, 18px) clamp(15px, 2vw, 20px); background-color: var(--tpw-surface); border-radius: var(--r-card); } /* Auf der KATEGORIE-Seite ist der Block das erste Element des Inhalts und * stiess ohne diesen Abstand direkt an die Unterkante des Seitentitels — * Titel und Versal-Label lagen aufeinander (`.page-title` traegt * `margin-bottom: 0`, die Kopfzeile ebenfalls). */ .entry-content > .tpw-tfilter:first-child { margin-top: clamp(18px, 2.4vw, 24px); } .entry-content .tpw-tfilter-lab { margin: 0 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; line-height: 1.2; color: var(--tpw-gruen-dunkel); } .tpw-tfilter-chips { display: flex; flex-wrap: wrap; gap: 8px; } .entry-content a.tpw-tfilter-chip, .entry-content a.tpw-tfilter-chip:link, .entry-content a.tpw-tfilter-chip:visited { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px solid var(--tpw-feld-rand); border-radius: var(--r-btn); background: #fff; color: var(--tpw-ink); font-size: .88rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease; } .entry-content a.tpw-tfilter-chip:hover, .entry-content a.tpw-tfilter-chip:active { background: var(--tpw-surface-2); border-color: var(--tpw-gruen); color: var(--tpw-gruen-dunkel); text-decoration: none; } .entry-content a.tpw-tfilter-chip:focus-visible { outline: none; border-color: var(--tpw-gruen); box-shadow: var(--tpw-fokus-halo); } /* Die Zahl sagt, wie viele KOMMENDE Termine hinter dem Chip liegen — ohne * sie muesste man jede Kategorie einzeln aufmachen, um zu sehen, ob sich * der Weg lohnt. Sie ordnet sich dem Namen unter: kleiner, in der * Sekundaerfarbe, mit eigener zarter Flaeche statt eines zweiten Rahmens. */ .tpw-tfilter-chip .tpw-tfilter-n { display: inline-block; min-width: 1.5em; padding: 1px 5px; border-radius: 4px; background: var(--tpw-surface); font-size: .76rem; font-weight: 700; text-align: center; color: var(--tpw-gruen-dunkel); } /* Aktiver Chip = aktive Seite der Paginierung. */ .entry-content a.tpw-tfilter-chip--aktiv, .entry-content a.tpw-tfilter-chip--aktiv:link, .entry-content a.tpw-tfilter-chip--aktiv:visited, .entry-content a.tpw-tfilter-chip--aktiv:hover, .entry-content a.tpw-tfilter-chip--aktiv:active { background: var(--tpw-gruen); border-color: var(--tpw-gruen); color: #fff; } .tpw-tfilter-chip--aktiv .tpw-tfilter-n { background: rgba(255,255,255,.22); color: #fff; } /* ===================================================================== * 2. TERMINKARTE * * ZIEL DER RUNDE 2: ÜBERSICHT, nicht Kachel-Galerie. Die Liste ist ein * Verzeichnis — man ueberfliegt sie nach Datum und Titel. Darum steht der * Titel jetzt auf h4-Niveau (1.06rem, dieselbe Stufe wie `h4` in * style.css) statt auf den 29,5 px, die das Plugin erzwang; Polster, * Kartenabstand und Meta-Zeile sind zusammengezogen, und der Anriss ist auf * zwei Zeilen begrenzt. Eine Karte ist damit rund 160 px hoch statt 250. * * Bezugspunkt bleibt die Terminkarte der Startseite (.tpw-start-tcard in * css/startseite.css Abschnitt 9): weisse Flaeche, 1px --tpw-linie-stark, * --r-card, Hover = 2px Lift + kraeftigerer Rand. * * Die Bildspalte ist quadratisch (aspect-ratio 1) — die Termin-Beitragsbilder * liegen als Thumbnails quadratisch vor, ein 16/9-Ausschnitt wuerde sie * beschneiden. * ===================================================================== */ .tpw-tliste, .em-events-list-grouped .em-list-inner, .entry-content .em-events-list { display: block; } /* RUNDE 3 — VON DER KARTE ZUR ZEILE. * * Rueckmeldung: „Ist mir generell noch ein bissl zu heavy … weniger Kanten, * Weissraum statt Kastigkeit." * * Runde 2 hatte die Kachel zwar verkleinert, aber sie blieb eine Kachel: jede * der 34 Zeilen trug einen geschlossenen Rahmen, einen eigenen Radius und * einen Lift beim Ueberfahren. Auf einer Uebersichtsseite ergibt das 34 * konkurrierende Kasten — die Kante zaehlt optisch genauso viel wie der * Inhalt, den sie umschliesst. * * Der Rahmen faellt darum ganz weg. Was die Zeilen trennt, ist eine * HAARLINIE zwischen ihnen (--tpw-linie, die zarteste der drei Linienstufen) * — dieselbe Bauweise wie die Datenzeilen nach Rahmen 11, wo ebenfalls nur * Haarlinien und kein Kasten steht. Statt 34 geschlossener Formen steht damit * ein durchgehendes Verzeichnis, und der frei gewordene Platz geht in * Zeilenpolster: 18 px oben und unten statt 14 px innerhalb eines Rahmens. * * Ohne seitliches Polster beginnt jede Zeile exakt an der Textkante der Seite * — Titel, Vorspann, Monatsueberschrift und Terminzeile stehen auf EINER * Fluchtlinie. Im Kasten taten sie das nicht (16 px Versatz). * * KEIN LIFT MEHR: eine Zeile, die sich anhebt, verhaelt sich wie eine Karte. * Die Rueckmeldung gibt der Titel-Link (Farbwechsel + Unterstreichung), der * ohnehin das Ziel traegt. */ .tpw-tkarte { display: grid; grid-template-columns: 116px 1fr; gap: clamp(16px, 2vw, 22px); align-items: center; margin: 0; padding: 18px 0; background-color: transparent; border: 0; border-bottom: 1px solid var(--tpw-linie); border-radius: 0; } /* Schliesst die Liste mit der letzten Zeile ab, bleibt der Strich darunter * weg — er haette nichts mehr zu trennen. Das greift auf den Kategorie-Seiten * (dort endet `#_CATEGORYNEXTEVENTS` mit der letzten Zeile). Auf der * Gesamtliste folgt danach noch die Paginierung des Plugins; dort BLEIBT der * Strich stehen und trennt Verzeichnis und Blaetterleiste — im Dev * nachgesehen, nicht angenommen. */ .tpw-tkarte:last-child { border-bottom: 0; } /* Bildspalte -------------------------------------------------------- */ .tpw-tkarte-bild { display: block; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 1 / 1; background-color: var(--tpw-surface); line-height: 0; } .tpw-tkarte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Ersatzflaeche ohne Beitragsbild: Tag gross, Monat als Versal-Label — * dieselbe Datumsmarke wie im Termine-Band der Startseite. */ .tpw-tkarte-platzhalter { display: grid; place-content: center; width: 100%; height: 100%; text-align: center; line-height: 1.05; /* Die getoente Flaeche gehoert AN DIE MARKE und nicht an ihren Behaelter: * `.tpw-tkarte-bild` ist ein ``, und Events Manager erklaert * `.em.pixelbones a { background-color: … !important }` — der Behaelter * bleibt also zwangsweise durchsichtig. Aufgefallen ist es an den * Kategorie-Seiten, als dort in Runde 5 jede Zeile die Marke trug — ohne * Flaeche stuenden die Ziffern ohne Halt in der ersten Spalte. Die Marke ist * seit dem Nachtrag wieder ueberall nur der `{no_image}`-Fall, die Flaeche * bleibt trotzdem an ihr: der naechste Termin ohne Beitragsbild braucht sie * genauso. Werte wie im Termine-Band der Startseite (--tpw-surface, * --r-card): dieselbe Marke, dieselbe Gestalt. */ background-color: var(--tpw-surface); border-radius: var(--r-card); } .tpw-tkarte-platzhalter b { display: block; font-size: 1.7rem; font-weight: 800; color: var(--tpw-gruen-dunkel); } .tpw-tkarte-platzhalter span { display: block; margin-top: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--tpw-gruen-dunkel); } /* Textspalte -------------------------------------------------------- */ .tpw-tkarte-text { min-width: 0; } /* Titel auf h4-Niveau. Alle vier Eigenschaften sind Konter gegen die * `!important`-Werte von `.em.pixelbones h3` (29,5 px / 300 / -1px * Laufweite / 20 px Abstand darunter). */ .em.pixelbones .tpw-tkarte-titel, .entry-content .tpw-tkarte-titel { margin: 0 !important; font-size: 1.06rem !important; font-weight: 700 !important; line-height: 1.32 !important; letter-spacing: -.005em !important; } .em.pixelbones .tpw-tkarte-titel a:link, .em.pixelbones .tpw-tkarte-titel a:visited { color: var(--tpw-ink) !important; text-decoration: none; } .em.pixelbones .tpw-tkarte-titel a:hover, .em.pixelbones .tpw-tkarte-titel a:focus { color: var(--tpw-gruen-dunkel) !important; text-decoration: underline; } /* HOECHSTPUNKT-MARKE — Rueckmeldung Runde 3: „wenn wir eine veranstaltung als * highlight markiert haben, koennte sie in der Liste auch leicht besonders * sein … machs nicht zu komplex." * * Bewusst simpel gehalten und genau zwei Zeichen: eine feine gruene Kante * links an der Zeile (unten) und dieses kleine Versal-Label ueber dem Titel. * Form und Werte sind das Versal-Label der Datenzeilen (Rahmen 11) — * 0.68rem / 700 / .13em Laufweite — nur ohne Kasten, weil es hier IN der * Zeile steht und nicht davor. * * Das Wort ist „Aktuell" und nicht „Highlight" oder „Tipp": genau so heisst * der Eyebrow des Bandes auf der Startseite, das von derselben Kategorie * gesteuert wird (mu-plugins/tierpark-startseite.php, tpw_start_sc_aktuell). * Dieselbe Auszeichnung soll auf beiden Seiten denselben Namen tragen. * * KEINE UMSORTIERUNG: die Zeile bleibt an ihrem Datumsplatz. Eine Liste, die * nach Datum gelesen wird, darf ihre Chronologie nicht fuer eine Betonung * aufgeben — sonst sucht man den Termin an der falschen Stelle. */ .em.pixelbones .tpw-tkarte-marke, .entry-content .tpw-tkarte-marke { margin: 0 0 5px !important; font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .13em !important; line-height: 1.2 !important; text-transform: uppercase; color: var(--tpw-gruen-dunkel); } /* KEINE gruene Kante mehr (Rueckmeldung: „das highlight gefaellt mir nicht, * weil es die zeile einrueckt"). Eine Kante an nur einer Zeile verschiebt * deren Inhalt gegen alle anderen — und die Fluchtlinie aller Zeilen ist * genau das, was die Liste in Runde 3 ruhig gemacht hat. Der Akzent lebt * darum allein im Versal-Label: null Layout-Verschiebung, ein Zeichen statt * zwei. Die Klasse `tpw-tkarte--top` bleibt als Haken im Markup stehen. */ /* DATUM ALS VORZEILE — AUF BEIDEN BREITEN GLEICH (Nachtrag-Runde). * * Bis hierher stand das Datum am Schirm UNTER dem Titel (als erste Angabe der * Meta-Zeile) und mobil per `order` DARUEBER. Zwei Anordnungen fuer dieselbe * Angabe in derselben Liste — die Vorzeile gilt jetzt ueberall. Sie ist im * Format ein eigenes `

` geworden (em-paket/phase-b.php), die mobile * `order`-Umstellung ist damit entfallen. * * WERTE: 0.82rem in der Signalfarbe bei Gewicht 600. Das ist bewusst NICHT die * Groesse der Meta-Zeile (0.85rem) — die Vorzeile steht ueber dem Titel und * waere in gleicher Groesse eine zweite Ueberschrift; ein Hauch kleiner bleibt * sie die Einordnung, die sie ist. Gewicht 600 und nicht 700: der Titel * darunter traegt 700, zwei fette Elemente uebereinander heben sich auf. Die * Signalfarbe bindet das Datum an die Datumsmarke der Karten ohne Bild. * * `margin` mit `!important`: das `

` steht in der Plugin-Ausgabe, und * `.em.pixelbones p` erklaert dort 25px Abstand mit `!important`. */ .em.pixelbones .tpw-tkarte-wann, .entry-content .tpw-tkarte-wann { margin: 0 0 4px !important; font-size: .82rem !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--tpw-gruen-dunkel); } /* Meta-Zeile: seit dem Nachtrag traegt sie nur noch den BEITRAG — das Datum ist * die Vorzeile darueber. Die Punkt-Trennung bleibt als Regel stehen (sie greift, * sobald eine zweite Angabe dazukommt); Punkte statt Striche, weil Striche mit * den Haarlinien der Zeilentrennung konkurriert haetten. * * `:empty` ist die Sicherung: das Format haengt die Meta-Zeile an * `{bookings_open}`, sie entsteht ohne offene Buchung also gar nicht — bleibt * sie doch einmal ohne Inhalt, ist sie keine leere Zeile. * * DER ORT IST RUNDE 3 ENTFALLEN (Rueckmeldung: „in der liste braucht der * veranstaltungsort nicht angezeigt werden"). Er stand bei JEDEM der 34 * Termine mit demselben Wortlaut da — „Gnadenhof Tierpark Wolfsgraben" — und * hat damit keinen Termin von einem anderen unterschieden, aber jede Zeile * verlaengert. Auf der Detailseite steht er weiterhin in den Eckdaten, dort * mit Link auf die Anfahrt. Entfernt ist er im FORMAT (em-paket/phase-b.php), * nicht per `display: none` — ausgeblendetes Markup bleibt sonst im Quelltext * und in der Vorlesereihenfolge stehen. */ .em.pixelbones .tpw-tkarte-meta, .entry-content .tpw-tkarte-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 15px; margin: 5px 0 0 !important; font-size: .85rem !important; line-height: 1.45 !important; } .tpw-tkarte-meta:empty { display: none; } .tpw-tkarte-meta > span { position: relative; } .tpw-tkarte-meta > span + span::before { content: ''; position: absolute; left: -9px; top: .62em; width: 3px; height: 3px; border-radius: 50%; background-color: var(--tpw-linie-rand); } /* ZWEI MONATSFORMEN, EINE SICHTBAR (Runde 4). * * Das Format liefert den Monat zweimal — ausgeschrieben („September") und * abgekuerzt („Sep."), siehe em-paket/phase-b.php. Auf dem Schirm steht die * lange Form, mobil die kurze; umgeschaltet wird unten im 640px-Block. * * WARUM ZWEI FORMEN UND NICHT EINE MITTLERE: die Vorzeile steht mobil in einer * 245 px schmalen Textspalte. Sie ist seit dem Nachtrag kuerzer geworden * (Beitrag und Endzeit sind heraus), der Umbruch ist damit nicht mehr * unvermeidlich — aber „So., 23. September" ist mit dem langen Monat rund 60 px * breiter als mit „Sep.", und dieser Platz gehoert mobil dem Titel. Auf dem * Schirm ist der Platz da, und dort ist der ausgeschriebene Monat die ruhigere * Form. * * `display: none` und nicht `visibility`/`clip`: so ist die verborgene Form * auch aus dem Vorlesefluss heraus — es liest immer nur EIN Monat. */ .tpw-tkarte-monat-kurz { display: none; } .tpw-tkarte-preis { font-weight: 600; color: var(--tpw-ink-soft); } /* ANRISS AUF EINE ZEILE (Runde 3). Zwei Zeilen waren in dieser Liste keine * Einordnung, sondern eine Wiederholung: 13 Waschbaer-Termine tragen * denselben Anriss, fuenf Fuehrungen ebenfalls — untereinander gelesen stand * derselbe Satz sechsmal doppelzeilig auf dem Schirm. Eine Zeile sagt, worum * es geht, und laesst die Liste eine Liste bleiben; der ganze Text steht * einen Klick weiter. Das Format liefert dafuer nur noch 18 statt 22 Woerter * (em-paket/phase-b.php), damit die Kuerzung im Text und nicht erst im * Ueberlauf passiert. */ .em.pixelbones .tpw-tkarte-anriss, .entry-content .tpw-tkarte-anriss { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin: 5px 0 0 !important; max-width: 68ch; font-size: .92rem !important; line-height: 1.55 !important; color: var(--tpw-ink-soft); } /* Handlungen -------------------------------------------------------- */ .em.pixelbones .tpw-tkarte-aktionen, .entry-content .tpw-tkarte-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 15px; margin: 11px 0 0 !important; line-height: 1.2 !important; } /* Gefuellter Knopf nach Rahmen 7: Flaeche und Rahmen --tpw-gruen-dunkel, * Text weiss, Hover --tpw-gruen-tief. Bewusst nicht ueber .link-button * mitgenommen, damit die Termin-Ansichten unabhaengig von der Reihenfolge * der Stylesheets stehen. * * `!important` an Flaeche/Farbe/Schatten ist auch hier ein KONTER: Events * Manager erklaert `.em.pixelbones a { color/background-color/box-shadow * !important }` und macht damit JEDEN Link innerhalb seiner Ausgabe * flaechenlos — ohne Konter stand der Buchen-Knopf als weisser Kasten mit * gruener Schrift da, optisch ein Outline-Knopf, obwohl er die Haupthandlung * ist. * * Der Knopf ist gegenueber Runde 1 kleiner (9/17 statt 11/20, 0.9rem statt * 0.95rem): in einer Uebersichtszeile ist er ein Zeilen-Element, nicht der * Abschluss einer Kachel. Der grosse Knopf nach Rahmen 7 (13/24, 0.98rem) * steht auf der Detailseite, wo er die Haupthandlung der SEITE ist. */ .tpw-tkarte-buchen, .tpw-termin-buchen { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--tpw-gruen-dunkel); border-radius: var(--r-btn); background-color: var(--tpw-gruen-dunkel) !important; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color .25s ease, border-color .25s ease; } .tpw-tkarte-buchen { padding: 9px 17px; font-size: .9rem; } .tpw-termin-buchen { padding: 13px 24px; font-size: .98rem; } .tpw-tkarte-buchen:link, .tpw-tkarte-buchen:visited, .tpw-termin-buchen:link, .tpw-termin-buchen:visited { color: #fff !important; } .tpw-tkarte-buchen:hover, .tpw-tkarte-buchen:focus, .tpw-termin-buchen:hover, .tpw-termin-buchen:focus { background-color: var(--tpw-gruen-tief) !important; border-color: var(--tpw-gruen-tief); color: #fff !important; } .tpw-tkarte-buchen:focus-visible, .tpw-termin-buchen:focus-visible { outline: none; box-shadow: var(--tpw-fokus-halo) !important; } /* Der Konter braucht nicht nur `!important`, sondern auch die hoehere * Spezifitaet: die Plugin-Regel ist `.em.pixelbones a` (0,2,1) und schlaegt * ein blosses `.tpw-tkarte-buchen` (0,1,0) auch dann, wenn beide `!important` * tragen. Mit dem vorangestellten Behaelter steht es 0,3,1 zu 0,2,1. */ .em.pixelbones a.tpw-tkarte-buchen, .em.pixelbones a.tpw-tkarte-buchen:link, .em.pixelbones a.tpw-tkarte-buchen:visited, .em.pixelbones a.tpw-termin-buchen, .em.pixelbones a.tpw-termin-buchen:link, .em.pixelbones a.tpw-termin-buchen:visited { background-color: var(--tpw-gruen-dunkel) !important; color: #fff !important; } .em.pixelbones a.tpw-tkarte-buchen:hover, .em.pixelbones a.tpw-tkarte-buchen:focus, .em.pixelbones a.tpw-termin-buchen:hover, .em.pixelbones a.tpw-termin-buchen:focus { background-color: var(--tpw-gruen-tief) !important; border-color: var(--tpw-gruen-tief); color: #fff !important; } .em.pixelbones a.tpw-tkarte-buchen:focus-visible, .em.pixelbones a.tpw-termin-buchen:focus-visible { box-shadow: var(--tpw-fokus-halo) !important; } /* Zweitweg als Textlink, nicht als zweiter Knopf — zwei gleich starke * Knoepfe nebeneinander haetten keine Rangfolge mehr. Der Zweitweg soll das * tiefere Gruen des Rahmens tragen und nicht das hellere Link-Gruen; auch * hier steht die Plugin-Regel im Weg. */ .tpw-tkarte-mehr { font-size: .9rem; font-weight: 700; } .em.pixelbones a.tpw-tkarte-mehr:link, .em.pixelbones a.tpw-tkarte-mehr:visited { color: var(--tpw-gruen-dunkel) !important; text-decoration: none; border-bottom: 1.5px solid var(--tpw-linie-rand); padding-bottom: 2px; } .em.pixelbones a.tpw-tkarte-mehr:hover, .em.pixelbones a.tpw-tkarte-mehr:focus { border-bottom-color: var(--tpw-gruen); } /* ===================================================================== * 3. STATUSKENNZEICHEN * * Der Chip ist NEUTRAL GRAU, nicht gruen: Gruen ist auf dieser Seite die * Farbe des Handelns (Datum, Buchen-Knopf, Zweitweg). Ein gruener Chip an * einem Termin, den man nicht mehr buchen kann, ist ein widerspruechliches * Signal. Form bleibt das Versal-Label der Datenzeilen (Rahmen 11): weisse * Flaeche, 1.5px Kontur, 0.68rem/700/.13em — nur eben in der neutralen * Kante aus Abschnitt 0. Keine Graufl aeche (Rahmen 1), kein neuer Farbwert. * * Rot bleibt der Funktionsfarbe vorbehalten und steht darum nur an * „Abgesagt" (Rahmen 12: zerstoerende/negative Zustaende). * ===================================================================== */ .tpw-tkarte-status { display: inline-flex; align-items: center; padding: 6px 11px; border: 1.5px solid var(--tpw-kante-neutral); border-radius: var(--r-btn); background-color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; color: var(--tpw-ink-soft); } .tpw-tkarte-status--abgesagt { border-color: var(--tpw-fehler); color: var(--tpw-fehler); } /* RESTPLATZ-BADGE (Runde 5) — „Noch 2 Plätze frei" / „Nur noch 1 Platz frei". * * WANN es erscheint, entscheidet die mitwachsende Schwelle im Theme * (inc/veranstaltungen.php, Abschnitt 4: ab max(2, 10 % der Kapazitaet)) — * hier geht es nur um die Gestalt. * * KEINE WARNFARBE. Die Palette kennt genau ein funktionales Rot, und das * gehoert Fehlern (Rahmen 12, --tpw-fehler); ein neues Bernstein/Orange waere * eine Farbe mehr im System und dazu ein Alarm, den die Aussage nicht hergibt. * Das Badge steht darum auf der hellen CI-Flaeche mit dunkelgruener Schrift — * dieselben zwei Werte, aus denen auch die Filter-Chips und die Datumsmarke * gebaut sind. * * ES IST FLAECHIG, waehrend „Ausgebucht"/„Abgesagt" bordierte weisse Kaestchen * sind: das eine ist ein Hinweis auf ein OFFENES Angebot, die anderen sind * Endzustaende. Zwei Formen fuer zwei Bedeutungen, ohne dass eine dritte Farbe * dafuer noetig wird. * * Der Text bleibt in Normalschrift und OHNE Versalien (anders als die * Statuskaestchen): er traegt eine ZAHL, und Zahlen liest man in Versalien * schlechter. */ .tpw-tkarte-frei { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: var(--r-btn); background-color: var(--tpw-surface); font-size: .8rem; font-weight: 600; line-height: 1.2; color: var(--tpw-gruen-dunkel); } /* AUSGEBUCHTE KARTE — Rueckmeldung Runde 1: „ausgebuchte events sollten * NICHT gruen hinterlegt sein — das ist ja wie ein hervorheben." * * Genau richtig: die gruene Flaeche aus Runde 1 (--tpw-surface-2) hob die * Karte optisch heraus, obwohl sie zurueckstehen soll. Sie steht jetzt auf * demselben weissen Grund wie jede andere Zeile und tritt ueber ZWEI gezielte * Daempfungen zurueck: * * 1. Titel und Datum verlieren ihre Signalfarben und gehen in den * gedeckten Text-Grauton --tpw-ink-soft, * 2. kein Buchen-Knopf — der kommt schon aus dem Format, es gibt dort * nichts zu holen. * * Die dritte Daempfung aus Runde 2 (hellere Kante) ist gegenstandslos * geworden: seit Runde 3 hat keine Zeile mehr einen Rahmen, nur noch die * gemeinsame Haarlinie zwischen den Zeilen — und die gehoert der Liste, nicht * der einzelnen Zeile. * * KEIN `opacity`-Trick: das war der Fehler des Ist-Zustands (`opacity: .4` * auf der ganzen Karte) — er senkt den Textkontrast unter jede Schwelle und * sagt nicht, WARUM die Karte anders aussieht. --tpw-ink-soft (#5c6350) auf * Weiss liegt bei 6,4:1 und bleibt voll lesbar (AA auch im Kleintext). * * Der Zweitweg „Weitere Informationen" bleibt bewusst gruen: er ist die * einzige verbleibende Handlung und braucht seine Erkennbarkeit. Eine * gedaempfte Link-Farbe waere hier ein Bedienbarkeits-Ruecksschritt. */ .em.pixelbones .tpw-tkarte--voll .tpw-tkarte-titel a:link, .em.pixelbones .tpw-tkarte--voll .tpw-tkarte-titel a:visited { color: var(--tpw-ink-soft) !important; } .em.pixelbones .tpw-tkarte--voll .tpw-tkarte-titel a:hover, .em.pixelbones .tpw-tkarte--voll .tpw-tkarte-titel a:focus { color: var(--tpw-ink) !important; } .tpw-tkarte--voll .tpw-tkarte-wann { color: var(--tpw-ink-soft); } .tpw-tkarte--voll .tpw-tkarte-meta > span + span::before { background-color: var(--tpw-kante-neutral); } /* ===================================================================== * 4. MONATS-ZWISCHENUEBERSCHRIFTEN * * Events Manager gruppiert monatlich (dbem_event_list_groupby = monthly) * und gibt je Gruppe ein

aus. Es bekommt die Headline-Signatur aus * Rahmen 4 — den kurzen gruenen Strich darueber. Ein Eyebrow-Text kaeme * hier nicht hin: der Monatsname IST das Label. * * Groesse und Gewicht sind Konter gegen `.em.pixelbones h2` (35,5 px in * Gewicht 300 mit -1px Laufweite). Der Monat fuehrt die Gruppe, ist aber * kein Seitentitel — 1.4rem reichen ueber Karten von 1.06rem. * ===================================================================== */ .entry-content .em.pixelbones > h2, .entry-content .em.pixelbones .em-list-inner > h2 { margin: clamp(26px, 3.4vw, 40px) 0 12px !important; font-size: clamp(1.22rem, 1.9vw, 1.4rem) !important; font-weight: 800 !important; line-height: 1.22 !important; letter-spacing: -.01em !important; color: var(--tpw-ink); } .entry-content .em.pixelbones > h2::before, .entry-content .em.pixelbones .em-list-inner > h2::before { content: ''; display: block; width: var(--tpw-sig-breite); height: var(--tpw-sig-dicke); margin: 0 0 11px; background: var(--tpw-gruen); } .entry-content .em.pixelbones > h2:first-child, .entry-content .em.pixelbones .em-list-inner > h2:first-child { margin-top: 0 !important; } /* ===================================================================== * 5. KATEGORIE-SEITE * * RUECKMELDUNG RUNDE 3: „die filter-kategorien haben ein full width layout, * mit sehr grossem bild." * * BEIDES GESTIMMT — und beides hatte eine andere Ursache. * * 1. FULL WIDTH. Die Terminuebersicht (Seite `dbem_events_page`) laeuft auf * `template-centered.php`, also in der Lesespalte von 840 px. Die * Kategorie-Seite (`dbem_categories_page`) stand auf * `template-fullwidth.php` und damit auf 1216 px — ein und dieselbe Liste * in zwei verschiedenen Spaltenbreiten, je nachdem ob ein Filter aktiv * ist. Repariert ist das nicht hier im Stylesheet, sondern an der Wurzel: * die Seite steht jetzt auf derselben Vorlage wie die Uebersicht * (em-paket/phase-b.php, mit Rueckweg). Eine CSS-Klammer haette die * Spalte optisch verengt, waehrend die Vorlage weiter Fullwidth sagt. * * 2. DAS GROSSE BILD IST GANZ ENTFALLEN — nicht nur verkleinert. Grund ist * nicht die Groesse, sondern der Inhalt: `EM_Category::get_image_url()` * liefert bei JEDER dieser Kategorien exakt dasselbe Foto, das darunter * schon auf jeder Terminzeile steht. Im Dev nachgesehen, nicht vermutet: * Fuehrung -> Besuch.jpg (= Bild aller 5 Zeilen) * Waschbaerenbesuch -> Waschbaerenbesuch.jpeg (= Bild aller Zeilen) * Esel-Workshop -> Esel-Workshop-5.jpeg (= Bild aller Zeilen) * Eselwanderung -> Eselwanderung-unterwegs.jpg (= Bild aller Zeilen) * Auf der Kategorieseite „Fuehrung" stand dasselbe Kamel-Foto damit * SECHSMAL: einmal 840 x 420 als Aufmacher und fuenfmal in den Zeilen. * Das ist genau das Argument, mit dem in Runde 2 schon * `#_EVENTCATEGORIESIMAGES` von der Detailseite geflogen ist — „zweimal * dasselbe Foto auf einer Seite ist keine Information". Die Regeln fuer * `.tpw-kat-bild` sind darum ersatzlos gestrichen; entfernt ist der * Platzhalter im FORMAT (em-paket/phase-b.php), nicht per `display:none`. * ===================================================================== */ /* RUNDE 4 — DAS KATEGORIEBILD IST ZURUECK, ABER KLEIN. * „wir koennen das Kategoriebild (dezent, nicht full width) nutzen." * * Gewaehlt ist die SCHMALE SPALTE NEBEN DEM TEXT und nicht das flache * Querformat ueber der Seite. Grund ist der Inhalt (Runde 3, gilt weiter): das * Kategoriebild ist bei jeder dieser Kategorien dasselbe Foto, das darunter auf * jeder Terminzeile steht. Ein Bild, das man schon kennt, darf die Seite nicht * anfuehren — als 200px-Spalte neben zwei Saetzen ist es sichtbar * untergeordnet, waehrend ein Band ueber die ganze Spalte, auch flach, wieder * das erste waere, was man sieht. * * Die Anatomie ist die des Terminkopfes (Abschnitt 6) und der * Tiergruppen-Buehne: offenes Raster ohne Kartenflaeche, Bild mit --r-card und * Ambient-Schatten. Nur die Spaltenverhaeltnisse sind umgekehrt — hier fuehrt * der Text, dort das Bild. */ .tpw-kat-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); column-gap: clamp(20px, 3vw, 32px); row-gap: 18px; align-items: center; } /* Ohne Bild traegt der Text die ganze Spalte — dieselbe Technik wie beim * Terminkopf, damit im Markup keine zweite Zustandsklasse noetig ist. */ .tpw-kat-kopf:not(:has(.tpw-kat-bild)) { grid-template-columns: minmax(0, 1fr); } /* Bild NACH dem Text im Raster, aber VOR ihm im Quelltext waere die falsche * Reihenfolge fuers Vorlesen — darum steht das Bild im Markup zuerst und wird * hier nach rechts gesetzt. Ein Wechsel der Vorlesereihenfolge findet nicht * statt: das Bild ist rein dekorativ. */ .tpw-kat-bild { order: 2; overflow: hidden; border-radius: var(--r-card); box-shadow: var(--tpw-shadow-soft); line-height: 0; } .em.pixelbones .tpw-kat-bild img, .entry-content .tpw-kat-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 !important; border-radius: 0; box-shadow: none; } .tpw-kat-text { max-width: 66ch; } /* Nicht jede Kategorie hat einen gepflegten Beschreibungstext * (`#_CATEGORYNOTES`). Ohne diese Regel bleibt ein leerer Behaelter stehen * und schiebt den Abstand des Eyebrows ein zweites Mal auf. */ .tpw-kat-text:empty { display: none; } /* KEIN TEXT — KEIN KOPF. Auch dann nicht, wenn ein Bild da waere. * * Rueckmeldung Design-Runde 5, und der Befund lag genau hier: „bei Herbstfest * habe ich die Kategorie gemeint … hat keinen Text, Bild wirkt lost." Die * Kategorie „Herbstfest" hat ein gepflegtes Kategoriebild, aber keine * Beschreibung — oben auf der Seite stand damit ein Foto ganz allein neben * einer leeren Textspalte. Ein Bild ohne den Satz, den es begleitet, ist keine * Information; es sieht nur nach einem Fehler aus. * * Die Regel ist ABSICHTLICH allgemein und nicht auf diese eine Kategorie * gemuenzt: von 16 Veranstaltungskategorien tragen neun keinen Text, und * mehrere davon (Adventfest, Weihnachten, die beiden Fuehrungs-Varianten) * bekommen jedes Jahr wieder Termine. Sobald einer davon wieder ansteht, ist * seine Kategorieseite erreichbar — und soll dann ohne Text ordentlich * aussehen und nicht nach einem verlorenen Foto. */ .tpw-kat-kopf:has(.tpw-kat-text:empty) { display: none; } .em.pixelbones .tpw-kat-text p { margin: 0 0 1.1em !important; font-size: 1.02rem !important; line-height: 1.75 !important; color: var(--tpw-ink-soft); } .em.pixelbones .tpw-kat-text > :first-child { margin-top: 0 !important; } .em.pixelbones .tpw-kat-text > :last-child { margin-bottom: 0 !important; } .em.pixelbones .tpw-kat .tpw-kat-eyebrow { margin: clamp(28px, 3.6vw, 40px) 0 14px !important; } /* Hat die Kategorie weder Beschreibungstext noch Bild, steht ueber dem Eyebrow * schon der Abstand des Filterblocks — zusammen waren das ueber 80 px Leere * zwischen Chips und „Termine". Der Abstand gehoert dann dem Block darueber. */ .em.pixelbones .tpw-kat > .tpw-kat-kopf:has(.tpw-kat-text:empty) + .tpw-kat-eyebrow { margin-top: 0 !important; } .em.pixelbones .tpw-kat-titel { margin: 0 0 clamp(14px, 2vw, 20px) !important; font-size: clamp(1.22rem, 1.9vw, 1.4rem) !important; font-weight: 800 !important; line-height: 1.22 !important; letter-spacing: -.01em !important; color: var(--tpw-ink); } /* Der Leerhinweis des Plugins ist eine nackte Textzeile — hier bekommt er * dieselbe ruhige Flaeche wie der Leerzustand des Termine-Bands. */ .tpw-tliste .em-events-no-results, .tpw-tliste > p:only-child { margin: 0 !important; padding: 24px 26px; background-color: var(--tpw-surface); border-radius: var(--r-card); color: var(--tpw-ink-soft); } /* ===================================================================== * 6. TERMIN-DETAILSEITE * * VERTIKALE RHYTHMIK (Rueckmeldung Runde 1: „schaut noch nicht polished * aus"). Die Seite hatte keinen gemeinsamen Takt, weil jeder Abstand vom * Plugin kam: 25 px unter jedem `

`, 20 px unter jeder Ueberschrift, * 35,5 px grosse Ueberschriften in Gewicht 300 mitten im Fliesstext. Die * Stufen sind jetzt gesetzt und gleich benannt wie im uebrigen Theme: * * Abschnittswechsel clamp(30px, 4vw, 44px) * Ueberschrift → Text 12px * Absatz → Absatz 1.15em * * Maßstab fuer den Kopf ist die Tiergruppen-Buehne (css/tiere.css, * `.tier-buehne`): offenes zweispaltiges Raster ohne Kartenflaeche, Bild * links als gerade gesetzte Flaeche mit --r-card und Ambient-Schatten, * rechts Eyebrow + Datenzeilen. * ===================================================================== */ .em.pixelbones .tpw-termin-abgesagt, .entry-content .tpw-termin-abgesagt { margin: 0 0 clamp(20px, 2.6vw, 28px) !important; padding: 14px 18px; border: 2px solid var(--tpw-fehler); border-radius: var(--r-btn); background-color: #fff; font-weight: 700; color: var(--tpw-fehler); } .tpw-termin-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .88fr); column-gap: clamp(28px, 4vw, 54px); row-gap: clamp(22px, 3vw, 30px); align-items: stretch; margin: 0 0 clamp(30px, 4vw, 44px); } /* Beitragsbild wie die Buehnen der Website: gerade gesetzt (Rahmen 6), * --r-card, Ambient-Schatten --tpw-shadow — identisch zu * `.tier-buehne-media`. * * DAS LOCH UNTER DEM BILD (Runde 1) — die Eckdaten-Spalte daneben ist mit * Eyebrow, bis zu fuenf Datenzeilen, Knopf und Kalenderweg rund 440 px * hoch, das 3/2-Bild blieb bei 280 px stehen: darunter klaffte ein leeres * Feld von der Hoehe eines halben Absatzes, und der Kopf hatte keine * gemeinsame Unterkante. Eine festere Bildproportion loest das nicht — die * Spaltenhoehe haengt davon ab, WIE VIELE Datenzeilen ein Termin hat * (Herbstfest hat keinen Beitrag, andere keinen Ort). * * Darum ist 4/3 hier eine MINDESTHOEHE, keine feste Proportion: der * Platzhalter `::before` setzt sie, das Bild liegt absolut darueber und * fuellt per `object-fit: cover` genau die Hoehe, auf die das Raster die * Spalte zieht. Beide Spalten enden damit immer auf derselben Linie, und * der Ausschnitt bleibt in jedem Fall zwischen 4/3 und etwa 1/1. */ .tpw-termin-bild { position: relative; overflow: hidden; border-radius: var(--r-card); line-height: 0; box-shadow: var(--tpw-shadow); background-color: var(--tpw-surface); } .tpw-termin-bild::before { content: ''; display: block; padding-top: 75%; /* 4/3 als Untergrenze */ } .tpw-termin-bild img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; } /* Ohne Beitragsbild steht der Eckdaten-Block allein und soll nicht als * schmale Saeule im Nichts haengen. */ .tpw-termin-kopf:not(:has(.tpw-termin-bild)) { grid-template-columns: minmax(0, 1fr); max-width: 640px; } /* Eckdaten als Datenzeilen nach Rahmen 11 — Werte 1:1 aus der globalen * Komponente `.tpw-datenzeilen` (style.css 14.4), damit der Steckbrief * eines Termins genauso aussieht wie der eines Tiers: zwei Spalten * 14ch/1fr, Zeilenpolster 11px, Versal-Label links, Trennung * ausschliesslich per Haarlinie. Keine Zebra-Streifen, keine * Vollrahmen-Tabelle, keine senkrechten Linien. * * Die Label-Zeile traegt 4px zusaetzliches Kopfpolster (also 15/11) statt * der `line-height: 1.9` aus Runde 1: die grosse Zeilenhoehe hat das * Versal-Label optisch mittig gesetzt, wo es auf der Grundlinie des Werts * sitzen soll — genau der Grund, warum die Zeilen „unfein" wirkten. */ .em.pixelbones .tpw-termin-eck .tpw-eyebrow { margin: 0 0 14px !important; } .em.pixelbones .tpw-termin-daten, .entry-content .tpw-termin-daten { display: grid; grid-template-columns: 14ch 1fr; column-gap: 16px; margin: 0 !important; border-top: 1px solid var(--tpw-linie-mittel); } .em.pixelbones .tpw-termin-daten dt, .em.pixelbones .tpw-termin-daten dd, .entry-content .tpw-termin-daten dt, .entry-content .tpw-termin-daten dd { margin: 0 !important; border-bottom: 1px solid var(--tpw-linie); } .em.pixelbones .tpw-termin-daten dt, .entry-content .tpw-termin-daten dt { padding: 15px 0 11px; font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .13em !important; text-transform: uppercase; line-height: 1.3 !important; color: var(--tpw-gruen-dunkel); } .em.pixelbones .tpw-termin-daten dd, .entry-content .tpw-termin-daten dd { padding: 11px 0; font-size: .98rem !important; line-height: 1.5 !important; color: var(--tpw-ink); } /* Das Plugin liefert Kategorien als