/* ============================================================================= Kategorie-Hub "Geburtsblumen" (/geburtsblumen/) Handgeschriebenes CSS, bewusst AUSSERHALB des Vite-/Tailwind-Builds – gleiches Muster wie css/post-meta.css. Grund: neue Tailwind-Utility-Klassen landen erst nach "npm run build" im Bundle; der Hub soll aber ohne Build deploybar sein. Alle hier verwendeten Design-Tokens liefert das bestehende Theme-Bundle (dist/assets/main-*.css) bereits in :root aus. Die Grundtypografie kommt aus dem Tailwind-Typography-Plugin: das Template verwendet exakt denselben prose-Klassensatz wie single.php, der Hub-Text liest sich damit wie ein Artikel. Diese Datei ergänzt nur, was auf Kategorieseiten fehlt, weil es dort bisher nie gebraucht wurde: 1. Lesbare Zeilenlänge für einen Langtext ohne TOC-Sidebar 2. Tabellen – liegen sonst in src/pages-css/single.css (nur single.php) 3. FAQ-Akkordeon – liegt sonst in src/components-css/faq-accordion.css, das über single.css eingebunden wird. Das zugehörige JS kommt dagegen aus src/main.js und läuft auf JEDER Seite. Ohne diesen Port würde ein FAQ-Block im Hub-Text als unformatierte Absätze erscheinen. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. Textkörper -------------------------------------------------------------------------- */ /* max-w-none nimmt prose die 65ch-Begrenzung; ohne Ersatz liefe der Text über die volle Containerbreite (bis 1280 px). Die Artikel-Textspalte in single.php ist durch die TOC-Sidebar rund 950-1000 px breit – 56rem/896px liegt in derselben Grössenordnung und bleibt bei 2600-3200 Wörtern gut lesbar. */ .gb-hub-description { max-width: var(--container-4xl, 56rem); } /* Vorspann zwischen H1 und Kalender: die ein bis zwei Absaetze, die im Beschreibungstext vor der ersten h2 stehen. Etwas groesser und ruhiger als der Fliesstext darunter – er beantwortet die Frage "wo bin ich hier", der Rest des Textes beantwortet die inhaltlichen Fragen. Der Block traegt dieselben Klassen wie der untere Textteil (.gb-hub-description + prose-Kette); alles hier sind nur Zusaetze. */ .gb-hub-intro { margin-bottom: var(--spacing-8, 2rem); } /* Auf dem Telefon NICHT vergroessern: bei 358px Textbreite werden aus vier Zeilen sonst zehn, und der Kalender rutscht unter die Falz. Der Vorspann soll die Seite eroeffnen, nicht sie fuellen. */ .gb-hub-intro p { font-size: 1.0625rem; line-height: 1.65; color: var(--color-neutral-700, #3e423e); } @media (min-width: 640px) { .gb-hub-intro p { font-size: 1.1875rem; line-height: 1.7; } } .gb-hub-intro > :first-child { margin-top: 0; } .gb-hub-intro > :last-child { margin-bottom: 0; } /* Sprungmarken (FAQ, Inhaltsverzeichnis, Monats-Anker) nicht an den Rand kleben */ .gb-hub-description h2, .gb-hub-description h3, .gb-hub-description h4 { scroll-margin-top: 1.5rem; } /* Links wie im Artikel-Layout (src/pages-css/single.css) */ .gb-hub-description a { text-decoration: underline; } .gb-hub-description a:hover { text-decoration: none; } /* ----------------------------------------------------------------------------- 2. Tabellen (Monatsübersicht: Monat / Hauptblume / Zweitblume / Sternzeichen) Optik wie im Artikel-Layout, aber ohne display:block auf dem : gescrollt wird der Wrapper .gb-table-wrap (vom Template erzeugt), die Tabellen-Semantik bleibt für Screenreader und Suchmaschinen erhalten. -------------------------------------------------------------------------- */ .gb-table-wrap { margin: 2em 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; /* Rahmen + Radius wie bei .category-post-card: auf schmalen Viewports wird die Tabelle rechts abgeschnitten – als gerahmtes Panel liest sich das als scrollbarer Bereich und nicht als kaputtes Layout. */ border: 1px solid var(--color-neutral-200, #e6e9e6); border-radius: var(--radius-card, 0.75rem); } /* Der Bereich ist per Tastatur fokussierbar (tabindex="0") – Fokus sichtbar machen. */ .gb-table-wrap:focus-visible { outline: 2px solid var(--color-primary-600, #3f7d3f); outline-offset: 2px; } .gb-hub-description table { width: 100%; max-width: 100%; margin: 0; text-align: left; border-collapse: collapse; /* Notfallpfad, wenn der Wrapper fehlt – Begruendung im Block darunter. */ display: block; overflow-x: auto; } /* Warum die Mindestbreite am Wrapper haengt und die Tabelle daneben einen eigenen Notfallpfad bekommt: blumengruss_wrap_wide_tables() hat drei Wege, die OHNE .gb-table-wrap enden – die Zeichenkette "gb-table-wrap" steht schon im Text, preg_replace liefert null (Backtrack-Limit, nachgestellt und bestaetigt), oder verschachtelte Tabellen lassen den Wrapper schon am inneren Tabellenende schliessen. Dann gibt es kein Element, das Mehrbreite wegscrollen koennte, und weil im Theme nirgends overflow-x:hidden steht, scrollt das GANZE Dokument horizontal. Die Mindestbreite nur an den Wrapper zu haengen reicht dafuer NICHT: an den beiden echten Hubtabellen gemessen (390px-Viewport, Container 358px) liegt die intrinsische Mindestbreite bei 473px bzw. 490px – wesentlich getrieben von white-space:nowrap auf den Kopfzellen. Ohne min-width rendern sie 652px und 778px, das Dokument scrollt mit 794px also unveraendert weiter. Deshalb zusaetzlich display:block + overflow-x:auto auf der Tabelle selbst: fehlt der Wrapper, scrollt die Tabelle sich selbst, das Dokument bleibt bei 390px. Im Regelfall (Wrapper vorhanden) wird beides hier zurueckgenommen: display wieder table, damit die Tabellensemantik fuer Screenreader erhalten bleibt – genau der Grund, aus dem der Wrapper dem display:block-Ansatz aus src/pages-css/single.css vorgezogen wurde – und gescrollt wird der Wrapper. 44rem/704px ist an der Monatstabelle gemessen (4 Spalten: Monat, Hauptblume, Zweitblume, Sternzeichen): darunter brechen die Zellen um und die Tabelle wird auf 375px-Viewports rund ein Drittel höher (821px statt 604px) bei ungleichen Zeilenhöhen. Bei 768px passt sie noch ohne Scrollen. */ .gb-hub-description .gb-table-wrap table { display: table; overflow-x: visible; min-width: 44rem; } .gb-hub-description thead { background-color: var(--color-neutral-50, #f7f8f7); } .gb-hub-description thead th { font-family: var(--font-sans); font-size: var(--text-sm, 0.875rem); font-weight: 600; line-height: 1.4; color: var(--color-neutral-700, #4a4f4a); padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem); border-bottom: 1px solid var(--color-neutral-300, #d5dad5); white-space: nowrap; } .gb-hub-description tbody tr { border-bottom: 1px solid var(--color-neutral-200, #e6e9e6); } .gb-hub-description tbody tr:last-child { border-bottom: 0; } .gb-hub-description tbody tr:hover { background-color: var(--color-neutral-50, #f7f8f7); } .gb-hub-description tbody th, .gb-hub-description tbody td { font-family: var(--font-sans); font-size: var(--text-sm, 0.875rem); line-height: 1.55; padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem); vertical-align: top; } /* Zeilenkopf (z. B. der Monatsname) hebt sich ab und bricht nicht um. */ .gb-hub-description tbody th { font-weight: 600; color: var(--color-neutral-900, #303430); white-space: nowrap; } .gb-hub-description caption { caption-side: bottom; font-size: var(--text-sm, 0.875rem); color: var(--color-neutral-500, #7e837e); text-align: left; padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem) 0; } /* ----------------------------------------------------------------------------- 3. FAQ-Akkordeon 1:1-Port von src/components-css/faq-accordion.css (dort mit @apply geschrieben, hier als reines CSS mit denselben Tailwind-Werten). Bewusst auf .gb-hub-description begrenzt, damit nichts ausserhalb des Hub-Textes beeinflusst wird. Markup-Vertrag siehe schortcode/faq.php. -------------------------------------------------------------------------- */ .gb-hub-description [itemtype*="FAQPage"] > * + * { margin-top: 0.75rem; /* space-y-3 */ } .gb-hub-description .accordion { border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: var(--radius-xl, 1rem); overflow: hidden; background-color: #fff; transition: box-shadow 200ms var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)); } .gb-hub-description .accordion:hover { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); } .gb-hub-description .accordion .question { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 1rem 1.25rem; text-align: left; font-size: var(--text-base, 1rem); line-height: var(--text-base--line-height, 1.5); font-weight: var(--font-weight-medium, 500); color: var(--color-gray-900, #101828); cursor: pointer; user-select: none; /* Dieselbe Eigenschaftsliste, die Tailwinds transition-colors im Artikel erzeugt. Sichtbar aendert sich nur die Hintergrundfarbe; die Liste steht hier trotzdem vollstaendig, damit der berechnete Stil auf dem Hub und im Artikel Zeichen fuer Zeichen derselbe ist (nachgemessen mit _infra/hub-track/v3/faq-compare.js). */ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-duration: 200ms; transition-timing-function: var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)); } .gb-hub-description .accordion .question:hover, .gb-hub-description .accordion .question.active { background-color: var(--color-gray-50, #f9fafb); } /* NUR AUF DEM HUB: die Frage ist hier ein Schalter (role="button", tabindex="0", siehe functions/faq-markup.php) und braucht deshalb einen sichtbaren Fokus. In den Artikeln ist sie ein reiner

mit delegiertem Klick und gar nicht fokussierbar – dieser bekannte Mangel des Themes wird hier bewusst NICHT nachgebaut, aber auch nicht in den Artikeln geaendert. outline-offset ist negativ, weil .accordion overflow:hidden hat und einen aussen liegenden Rahmen abschneiden wuerde. */ .gb-hub-description .accordion .question:focus-visible { outline: 2px solid var(--color-primary-600, #097f23); outline-offset: -2px; background-color: var(--color-gray-50, #f9fafb); } /* Plus-/Minus-Icon */ .gb-hub-description .accordion .question .plus { position: relative; width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-left: 1rem; } .gb-hub-description .accordion .question .plus::before, .gb-hub-description .accordion .question .plus::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--color-gray-500, #6a7282); border-radius: var(--radius-full, 9999px); transition: transform 300ms var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)); } .gb-hub-description .accordion .question .plus::before { width: 0.75rem; height: 0.125rem; } .gb-hub-description .accordion .question .plus::after { width: 0.125rem; height: 0.75rem; } .gb-hub-description .accordion .question.active .plus::after { transform: translate(-50%, -50%) rotate(90deg); } /* Antwort – wird von src/components/faq-accordion.js per inline max-height geöffnet */ .gb-hub-description .accordion .answer { max-height: 0; overflow: hidden; transition: max-height 300ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1)); } .gb-hub-description .accordion .answer > div { padding: 0 1.25rem 1.25rem; color: var(--color-gray-600, #4a5565); line-height: var(--leading-relaxed, 1.625); } .gb-hub-description .accordion .answer p { margin: 0; } .gb-hub-description .accordion .answer p + p { margin-top: 0.75rem; } /* Inline-Style aus dem Ursprungs-Markup neutralisieren (siehe schortcode/faq.php) */ .gb-hub-description .accordion .answer[style*="display: none"] { display: block !important; } /* ----------------------------------------------------------------------------- 4. Beitragsraster unter dem Hub-Text -------------------------------------------------------------------------- */ .gb-hub-posts { margin-top: var(--spacing-12, 3rem); padding-top: var(--spacing-10, 2.5rem); border-top: 1px solid var(--color-neutral-200, #e6e9e6); } /* ----------------------------------------------------------------------------- 5. Kalender der Geburtsblumen (parts/geburtsblumen-kalender.php) Zwoelf Monatskarten, seit der Ueberarbeitung DIREKT UNTER DER H1 und damit oberhalb des Hub-Textes: der Kalender ist der Navigationsknoten der Rubrik. Eigene gb-kalender*-Klassen statt Tailwind-Utilities: neue Utilities landen erst nach "npm run build" im Bundle, dieses Stylesheet wird dagegen direkt mit filemtime-Version ausgeliefert. Alle Farben stammen aus den bereits im Theme-Bundle vorhandenen :root-Tokens (oklch); die Hex-Fallbacks sind die exakten sRGB-Umrechnungen dieser Tokens. AUFBAU EINER KARTE (dritte Fassung) ┌────────────────────┐ │ Foto ODER Platte │ 3:2 – dasselbe Verhaeltnis wie die Beitrags- │ │ karten weiter unten (--aspect-card) │ [akt.]│ Zeichen "aktuell" oben rechts │ Mai [folgt]│ Monat unten links, Zeichen "folgt" unten rechts ├────────────────────┤ │ Maiglöckchen │ Hauptblume – Serife, 20px: die Antwort │ Convallaria majalis│ botanischer Name, kursiv │ │ │ und Weißdorn … │ zweite Blume – ohne Wortmarke davor │ Stier, Zwillinge │ Sternzeichen – ohne Wortmarke davor │ ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ │ │ Zum Monat → │ nur bei veroeffentlichten Monaten └────────────────────┘ WAS SICH IN DIESER FASSUNG GEAENDERT HAT UND WARUM Der Owner-Einwand lautete: die Beschriftungen seien "irgendwie zu klein, ich verstehe nicht, was hier nicht stimmt". Gemessen an der zweiten Fassung stimmte dreierlei nicht: 1. Die untere Kartenhaelfte war eine Datentabelle im Kleinformat: eine Spalte Wortmarken ("Zweite Blume", "Sternzeichen") neben einer Spalte Werte, zwoelfmal wiederholt, dazu ein elfmal wiederholtes "Beitrag folgt". Vier Schriftgroessen zwischen 11 und 17px auf 100px Hoehe. 2. Die Karte sprach eine andere typografische Sprache als der Rest der Seite. Die Beitragskarte des Themes (.category-post-card, direkt darunter im selben Raster) setzt ihren Titel in der SERIFE, 18px/600, den Fliesstext in 14px/1.6 neutral-600, das Innenmass auf 1.25–1.5rem und trennt die Fusszeile mit einem Haarstrich. Der Kalender setzte alles serifenlos, 11–17px, Innenmass 0.75rem. Nebeneinander liest sich das eine als Karte und das andere als Datenblatt – ohne dass man den Unterschied benennen kann. 3. Die Platte fuer fehlende Fotos (helle Flaeche, duenner Innenrahmen, blasse Zeichnung) war genau das Bild, das ein Browser bei einem kaputten Bild zeigt. Daraus diese Fassung: - Die Karte uebernimmt das Mass der Beitragskarte: 3:2-Bild, Innenmass 1.25rem ab 1024px, Titel in der Serife, Fusszeile mit Haarstrich. Der Titel ist mit 20px eine Stufe groesser als bei der Beitragskarte (dort 18px), weil hier ein einzelnes Wort steht und kein umbrechender Satz – und weil genau dieser Punkt beanstandet wurde. - Die Wortmarken sind visuell weg, im Markup aber als

geblieben (Klasse gb-kalender__label, visuell verborgen). Screenreader lesen weiter "Zweite Blume: Weissdorn"; die Legende fuer das Auge steht einmal im Vorspann ueber dem Raster statt zwoelfmal in den Karten. - "Beitrag folgt" ist keine Textzeile mehr, sondern ein kleines Zeichen auf dem Bild, rechts neben dem Monatsnamen – dieselbe Ebene wie das Zeichen "aktuell". Damit verschwindet eine ganze Zeile aus elf Karten. - grid-auto-rows: 1fr haelt ALLE Karten auf gleicher Hoehe, nicht nur die einer Reihe. Ohne diese Zeile waren bei 390px Breite zwei der sechs Reihen 15px hoeher als die uebrigen (gemessen: 304 gegen 319px). Der Monatsname bleibt AUF dem Bild: das spart pro Karte eine Zeile und macht aus der Karte ein Kalenderblatt – Motiv mit aufgedrucktem Monat. Kontraste (WCAG 2.1, 1.4.3 – gemessen gegen #fff und gegen neutral-50): neutral-600 #505650 7,53:1 / 7,23:1 – botanische Namen, Sternzeichen neutral-700 #3e423e 10,23:1 / 9,81:1 – zweite Blume neutral-900 #1c1f1c 16,64:1 / 15,96:1 – Blumenname, Monat auf Platte primary-700 #006516 7,31:1 / 7,01:1 – Status "Zum Monat" #fff auf primary-700 7,31:1 – Zeichen "aktuell" Monat und Zeichen "folgt" stehen auf dem Verlaufsschleier (bis rgba(0,0,0,.68)) bzw. auf eigener Flaeche rgba(0,0,0,.55) plus text-shadow; neutral-500 (4,73:1) wird durchgehend gemieden. Raster: 2 Spalten, ab 640px 3, ab 1024px 4. Unter 360px eine Spalte. -------------------------------------------------------------------------- */ .gb-kalender { margin: 0 0 var(--spacing-12, 3rem); } .gb-kalender__titel { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--color-neutral-900, #1c1f1c); margin: 0 0 0.375rem; scroll-margin-top: 1.5rem; } /* Vorspann und Legende in einem. Die Legende steht hier EINMAL, damit die Karten ohne die Wortmarken "Zweite Blume"/"Sternzeichen" auskommen. Zeilenlaenge begrenzt, sonst laeuft der Satz bei 1280px ueber die volle Containerbreite und liest sich schlecht. */ .gb-kalender__intro { font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.55; color: var(--color-neutral-600, #505650); max-width: 68ch; margin: 0 0 var(--spacing-6, 1.5rem); } @media (min-width: 768px) { .gb-kalender__titel { font-size: 1.75rem; } } /* role="list" steht zusaetzlich im Markup: Safari/VoiceOver nimmt einer Liste mit list-style:none sonst die Listensemantik. */ .gb-kalender__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* Alle Reihen gleich hoch, nicht nur die Karten EINER Reihe. Ohne diese Zeile richtet sich jede Reihe nach ihrem laengsten Text; bei 390px waren dadurch zwei von sechs Reihen 15px hoeher (304 gegen 319px). */ grid-auto-rows: 1fr; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } /* Sehr schmale Geraete (Galaxy Fold zugeklappt): zwei Spalten waeren unter 120px Kartenbreite. Dann lieber eine Spalte. */ @media (max-width: 359px) { .gb-kalender__grid { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 640px) { .gb-kalender__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.125rem; } } @media (min-width: 1024px) { .gb-kalender__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-card-gap, 1.5rem); } } .gb-kalender__item { display: flex; margin: 0; padding: 0; } /* Karte: Basis fuer beide Zustaende. Als (veroeffentlicht) oder als
(Monat folgt noch) gerendert – das
ist damit nicht fokussierbar und faellt aus der Tab-Reihenfolge heraus, ohne tabindex="-1" zu brauchen. Die Saison-Variablen setzen die Modifier weiter unten. */ .gb-kalender__karte { /* Eine einzige Tonung fuer alle Monate ohne Foto. Warmes Papier statt des fast weissen neutral-50 der zweiten Fassung: eine helle Flaeche mit blasser Zeichnung war vom Bild eines fehlgeschlagenen Ladevorgangs nicht zu unterscheiden. */ --gb-platte-von: var(--color-accent-50, #fffbeb); --gb-platte-bis: var(--color-neutral-200, #e2e8e2); --gb-platte-strich: var(--color-neutral-600, #505650); position: relative; display: flex; flex-direction: column; width: 100%; background-color: #fff; border: 1px solid var(--color-neutral-200, #e2e8e2); border-radius: var(--radius-card, 0.75rem); /* Haelt Foto, Schleier und Saisonkappe in der Kartenrundung. */ overflow: hidden; color: inherit; text-decoration: none; } /* Laufender Monat: Ring als Pseudo-Element statt dickerem Rahmen oder box-shadow. Aendert kein Layout und kollidiert nicht mit dem Hover-Schatten oder dem Fokus-Outline. z-index, weil .gb-kalender__media positioniert ist und ohne ihn spaeter in der Baumreihenfolge ueber dem Ring laege. */ .gb-kalender__karte.is-current::before { content: ''; position: absolute; inset: 0; z-index: 2; border: 2px solid var(--color-primary-600, #097f23); border-radius: inherit; pointer-events: none; } /* Veroeffentlicht: weiss, mit Schatten, hebt sich beim Hover an. */ a.gb-kalender__karte { box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.14), 0 1px 3px -1px rgba(0, 0, 0, 0.08); transition: border-color 200ms var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow 200ms var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)), transform 200ms var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)); } a.gb-kalender__karte:hover, a.gb-kalender__karte:focus-visible { border-color: var(--color-primary-600, #097f23); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.22); transform: translateY(-2px); } a.gb-kalender__karte:focus-visible { outline: 2px solid var(--color-primary-600, #097f23); outline-offset: 3px; } a.gb-kalender__karte:hover .gb-kalender__foto, a.gb-kalender__karte:focus-visible .gb-kalender__foto { transform: scale(1.05); } /* Noch nicht veroeffentlicht: getoente Flaeche, kein Schatten. Bewusst KEIN gestrichelter Rahmen mehr – solange erst ein Monat online ist, waeren elf gestrichelte Karten das dominante Motiv des Rasters und die Seite saehe unfertig aus. Der Unterschied traegt jetzt die Flaeche (weiss + Schatten gegen getoent + flach) und die Statuszeile. */ .gb-kalender__karte.is-pending { background-color: var(--color-neutral-50, #f8fbf8); } /* --- Bildbereich: Foto oder Platte, immer gleiche Hoehe -------------------- */ .gb-kalender__media { position: relative; /* Fester Rahmen: die Karte hat ihre Endhoehe, bevor ein Bild geladen ist. Kein Nachruecken des Rasters (CLS). 3:2 statt der bisherigen 5:3 – dasselbe Verhaeltnis wie .category-post-card__image, damit Kalender und Beitragsraster auf derselben Seite dieselbe Kartenform haben. Die Fotos liegen als 690x450 (1,533) vor, der Beschnitt betraegt also 2%. */ aspect-ratio: var(--aspect-card, 3 / 2); overflow: hidden; background-color: var(--color-neutral-100, #f0f5f0); } /* Verlaufsschleier unter dem Monatsnamen. Als ::before, damit er VOR den echten Kindern gemalt wird und Monat und Badge darueber liegen. */ .gb-kalender__media::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient( to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.28) 32%, rgba(0, 0, 0, 0) 62% ); pointer-events: none; } /* Auf der Platte steht der Monat in dunkler Tinte – kein Schleier noetig. */ .gb-kalender__media--platte::before { content: none; } .gb-kalender__media picture { display: block; width: 100%; height: 100%; } .gb-kalender__foto { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1)); } /* Botanik-Platte (Rueckfallebene, greift auf dieser Installation nicht mehr). ZWEITE FASSUNG. Die erste war eine helle Flaeche mit duennem Innenrahmen und einer Zeichnung bei 55% Deckung – genau das Bild, das ein Browser zeigt, wenn eine Datei fehlt. Jetzt: warmes Herbarpapier, KEIN Innenrahmen (der war der eigentliche "Bild kaputt"-Hinweis), Zeichnung auf 66% der Hoehe und in kraeftiger Tinte. Das liest sich als gewaehlte Illustration. */ .gb-kalender__platte { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(160deg, var(--gb-platte-von) 0%, var(--gb-platte-bis) 100%); } .gb-kalender__platte-zeichnung { position: relative; width: auto; height: 66%; max-height: 7rem; color: var(--gb-platte-strich); opacity: 0.85; /* Ein Stueck nach oben, damit die Zeichnung nicht in den Monatsnamen laeuft. */ transform: translateY(-7%); } /* --- Monatsname und die beiden Zeichen auf dem Bild ------------------------ */ .gb-kalender__monat { position: absolute; left: 0.6875rem; right: 0.6875rem; bottom: 0.4375rem; margin: 0; /* Rechts bleibt Platz fuer das Statuszeichen, damit sich Monatsname und Zeichen beim laengsten Monat (September) nicht ueberlagern. */ padding-right: 2.75rem; font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.35); } .gb-kalender__media--platte .gb-kalender__monat { color: var(--color-neutral-900, #1c1f1c); text-shadow: none; } .gb-kalender__jetzt { position: absolute; top: 0.5rem; right: 0.5rem; font-family: var(--font-sans); font-size: 0.625rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background-color: var(--color-primary-700, #006516); border-radius: var(--radius-full, 9999px); padding: 0.1rem 0.5rem; } /* Statuszeichen unten rechts – EIN Platz fuer beide Zustaende. Vorher stand der Status als Textzeile im Kartenkoerper: "Zum Monat" bei einer, "Beitrag folgt" bei elf Karten. Das kostete eine Zeile, und weil nur eine Karte veroeffentlicht ist, war es elfmal derselbe Satz. Jetzt tragen beide Zustaende dasselbe kleine Zeichen an derselben Stelle: die zwoelf Karten haben damit denselben Aufbau und dieselbe Hoehe, ohne dass irgendwo Platz reserviert werden muss. */ .gb-kalender__marke { position: absolute; right: 0.5rem; bottom: 0.5rem; font-family: var(--font-sans); font-size: 0.625rem; font-weight: 600; line-height: 1.6; letter-spacing: 0.04em; border-radius: var(--radius-full, 9999px); padding: 0.1rem 0.5rem; } /* Folgt noch: dunkle Pille, zurueckhaltend. */ .gb-kalender__marke--folgt { color: #fff; background-color: rgba(0, 0, 0, 0.55); } /* Auf der Platte gibt es keinen Verlaufsschleier – dort dunkle Schrift auf heller Pille, damit der Kontrast erhalten bleibt. */ .gb-kalender__media--platte .gb-kalender__marke--folgt { color: var(--color-neutral-800, #2d302d); background-color: rgba(255, 255, 255, 0.78); } /* Veroeffentlicht: gruene Pille mit Pfeil. Bewusst ohne Wort – "zum Monat" waere bei 640px neben "September" (dem laengsten Monatsnamen) nicht mehr untergebracht, und der Pfeil ist im Kartenraster das gelaeufige Zeichen fuer "hier geht es weiter". Der Linkname der Karte steht ohnehin im aria-label, das Zeichen ist deshalb aria-hidden. */ .gb-kalender__marke--live { color: #fff; background-color: var(--color-primary-700, #006516); padding: 0.1rem 0.5rem; } .gb-kalender__marke--live::after { content: '\2192'; display: block; line-height: 1.6; transition: transform 200ms var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)); } a.gb-kalender__karte:hover .gb-kalender__marke--live::after, a.gb-kalender__karte:focus-visible .gb-kalender__marke--live::after { transform: translateX(0.15rem); } /* --- Textteil ------------------------------------------------------------- */ /* Innenmass und Zeilenabstand wie bei .category-post-card__content (1.25rem / gap 0.75rem). Auf zwei Spalten bei 390px waeren 1.25rem zu viel – dort 0.875rem, sonst bliebe von 173px Kartenbreite zu wenig Textbreite. */ .gb-kalender__text { display: flex; flex-direction: column; flex: 1 1 auto; gap: 0.625rem; padding: 0.875rem 0.875rem 1rem; font-family: var(--font-sans); } .gb-kalender__blume { margin: 0; } /* Hauptblume = Kartentitel. Serife wie .category-post-card__title, aber eine Stufe groesser (20px statt 18px): hier steht ein einzelnes Wort und kein umbrechender Satz, und genau die Groesse war der Einwand des Owners. */ .gb-kalender__blume-name { display: block; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-neutral-900, #1c1f1c); transition: color 200ms var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)); } a.gb-kalender__karte:hover .gb-kalender__blume-name, a.gb-kalender__karte:focus-visible .gb-kalender__blume-name { color: var(--color-primary-700, #006516); } /* Botanischer Name: kursiv nach botanischer Konvention */ .gb-kalender__botanisch { display: block; margin-top: 0.125rem; font-size: 0.75rem; font-style: italic; line-height: 1.35; color: var(--color-neutral-600, #505650); } /* Der botanische Name der ZWEITEN Blume laeuft in derselben Zeile weiter, sonst waere die Karte wieder vier Zeilen tief. */ .gb-kalender__botanisch--inline { display: inline; margin-top: 0; } /* Zweite Blume und Sternzeichen. Keine Wortmarken mehr im Bild – die
sind da, aber visuell verborgen (siehe .gb-kalender__label). Deshalb hier ein schlichter Block statt des bisherigen zweispaltigen Rasters. */ .gb-kalender__daten { margin: 0; } .gb-kalender__daten dd { margin: 0; } .gb-kalender__zweit { font-size: 0.8125rem; line-height: 1.45; color: var(--color-neutral-700, #3e423e); } .gb-kalender__zeichen { font-size: 0.8125rem; line-height: 1.45; color: var(--color-neutral-600, #505650); } /* Zwei Selektoren tief, weil ".gb-kalender__daten dd { margin: 0 }" darueber steht und sonst gewinnt (0,1,1 gegen 0,1,0). */ .gb-kalender__daten .gb-kalender__zeichen { margin-top: 0.1875rem; } /* "und" ist nur die sichtbare Bruecke zum Namen darueber (im Markup aria-hidden). Etwas leiser als der Blumenname selbst. */ .gb-kalender__und { color: var(--color-neutral-600, #505650); } /* November: einziger Monat ohne belastbare Zweitblume */ .gb-kalender__leer { font-style: italic; color: var(--color-neutral-600, #505650); } /* Visuell verborgen, fuer Screenreader vorhanden. Der Kalender ist seit dem Umbau des Hubtextes die einzige Quelle fuer Zweitblume und Sternzeichen – die Feldnamen duerfen deshalb nicht aus dem Markup verschwinden, nur aus dem Bild. Das
ist absolut positioniert und faellt damit aus dem Textfluss der
. */ .gb-kalender__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Der Textteil endet mit dem Sternzeichen. Eine Fusszeile gibt es nicht mehr – der Status steht als Zeichen auf dem Bild (siehe .gb-kalender__marke). */ /* Ab drei Spalten ist Platz fuer das volle Mass der Beitragskarte. */ @media (min-width: 640px) { .gb-kalender__text { gap: 0.6875rem; padding: 1rem 1rem 1.125rem; } .gb-kalender__monat { left: 0.875rem; right: 0.875rem; bottom: 0.5625rem; font-size: 1.375rem; } .gb-kalender__jetzt, .gb-kalender__marke { font-size: 0.6875rem; padding: 0.125rem 0.5625rem; } .gb-kalender__jetzt { top: 0.625rem; right: 0.625rem; } .gb-kalender__marke { right: 0.625rem; bottom: 0.625rem; } .gb-kalender__blume-name { font-size: 1.1875rem; } .gb-kalender__botanisch { font-size: 0.8125rem; } /* Der botanische Name der zweiten Blume eine Stufe kleiner als der der Hauptblume. Das ist die richtige Rangfolge – und es entscheidet bei 1280px darueber, ob "und Schneeglöckchen Galanthus nivalis" (die laengste der zwoelf Zeilen) noch auf eine Zeile passt. Tut sie es nicht, ist wegen grid-auto-rows:1fr das GANZE Raster eine Zeile hoeher. */ .gb-kalender__botanisch--inline { font-size: 0.75rem; } .gb-kalender__zweit, .gb-kalender__zeichen { font-size: 0.875rem; line-height: 1.5; } .gb-kalender__monat { padding-right: 3.25rem; } } @media (min-width: 1024px) { .gb-kalender__text { gap: 0.75rem; padding: 1.25rem 1.25rem 1.375rem; } .gb-kalender__blume-name { font-size: 1.25rem; } } @media (prefers-reduced-motion: reduce) { a.gb-kalender__karte, .gb-kalender__blume-name, .gb-kalender__foto, .gb-kalender__marke--live::after { transition: none; } a.gb-kalender__karte:hover, a.gb-kalender__karte:focus-visible { transform: none; } a.gb-kalender__karte:hover .gb-kalender__foto, a.gb-kalender__karte:focus-visible .gb-kalender__foto, a.gb-kalender__karte:hover .gb-kalender__marke--live::after, a.gb-kalender__karte:focus-visible .gb-kalender__marke--live::after { transform: none; } } /* ----------------------------------------------------------------------------- 6. Inhaltsverzeichnis (kamaTOC) im Hub Das Verzeichnis wird NICHT per Shortcode erzeugt – WordPress laesst do_shortcode() auf Term-Beschreibungen nicht laufen, und kama_contents_shortcode() schneidet den Shortcode auf Archiven ohnehin heraus (is_singular()-Pruefung). Das Template ruft stattdessen direkt \Kama\WP\Kama_Contents::make_contents() auf. Markup und Klassen sind damit BUCHSTÄBLICH dieselben wie im Artikel – es ist derselbe Generator. Das Layout uebernehmen die Tailwind-Utilities aus single.php (lg:grid, lg:grid-cols-[var(--spacing-60)_1fr] usw.). Sie liegen bereits im site-weiten Bundle, weil single.php sie benutzt und Tailwind alle PHP- Dateien scannt – ein neuer Build ist dafuer nicht noetig. Einziger Unterschied zum Artikel: dort schiebt src/pages/single.js das .kamatoc-wrapper zur Laufzeit in die Sidebar und nimmt ihm die Klasse "hidden". Dieses Skript wird auf Kategorie-Archiven nicht eingebunden. Auf einem Archiv bestimmt das Template die Ausgabereihenfolge aber selbst – der Wrapper steht also von vornherein an der richtigen Stelle, und statt JS genuegt eine Regel, die "hidden" ab 1024px ueberstimmt. Kein zweites Skript, kein Umhaengen im DOM, keine Textverschiebung nach dem Laden. Der Selektor gewinnt ueber Spezifitaet (1,1,0 gegen 0,1,0 bei .hidden), nicht ueber die Ladereihenfolge. Die mobile Variante ist ein
und braucht kein JS (natives Aufklappen). Sie steht im selben