/* theme_kov – Skin des plate_events-Plugins. Deckt beide Layout-Varianten ab: die Jahres-Liste (/termine — Filterbar, Jahres-Tabs, Monatsgruppen) und den Teaser (Startseite — .kov-events--teaser, kompakte Vorschau kommender Termine). Die Karten-/Chip-/Datums-Optik lebt vollständig hier (früher aus dem inzwischen entfernten kov-termine-Block). */ .kov-events { padding-block: 2rem; } .kov-events__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: 1.75rem; } /* Header-Typ „Verborgen" (header_layout=100): Seitenkopf liefert z. B. ein kov-pageintro darüber — hier bleiben nur die Aktions-Buttons, rechtsbündig. */ .kov-events__head--actions-only { justify-content: flex-end; } /* Teaser-Variante (Startseite): flächiges Frame (paper-2) liefert den vertikalen Abstand, daher kein eigenes padding-block. Kopf-Abstand + Ghost-Button wie der frühere kov-termine-Teaser. */ .kov-events--teaser { padding-block: 0; } .kov-events__head--teaser { margin-bottom: 2.5rem; } .kov-events__all { flex: none; } /* Datums-Badge im Teaser = früherer kov-termine-Look: dunkelgrün, TAG groß oben, MONAT/JAHR klein darunter (Reihenfolge via order, Markup bleibt Monat/Tag/Jahr). */ .kov-events--teaser .kov-events__date { background: var(--color-forest-800); border: 0; color: #fff; } .kov-events--teaser .kov-events__date-day { order: 1; color: #fff; } .kov-events--teaser .kov-events__date-month { order: 2; margin-top: 0.35rem; color: var(--color-forest-100); } .kov-events--teaser .kov-events__date-year { order: 3; color: var(--color-forest-100); } .kov-events__head-text { flex: 1 1 20rem; min-width: 0; } .kov-events__eyebrow { color: var(--color-forest-700); } .kov-events__intro { margin-top: 1rem; max-width: 42rem; font-size: 1.05rem; line-height: 1.6; color: var(--color-ink-muted); } .kov-events__intro p { margin: 0; } /* Kopf-CTAs (iCal abonnieren / Termin melden) – wie Vorlage */ .kov-events__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; flex: none; } @media (max-width: 575px) { .kov-events__actions { width: 100%; } .kov-events__actions .btn-kov { flex: 1 1 auto; justify-content: center; } } /* Suchzeile – eigenes Formular ÜBER den Filtern (Suche läuft jahresübergreifend, die Filter darunter grenzen ein). Deshalb volle Breite statt Chip-Nachbar. */ .kov-events__searchbar { margin-bottom: 1.25rem; } .kov-events__searchbar .kov-events__search { width: 100%; } .kov-events__searchinfo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0.75rem 0 0; padding-left: 0.25rem; font-size: 0.92rem; color: var(--color-ink-muted); } .kov-events__searchinfo strong { color: var(--color-forest-900); } .kov-events__searchreset { color: var(--color-forest-700); text-underline-offset: 0.2em; } /* Jahres-Tabs */ .kov-events__years { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .kov-events__year { text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .2s ease, color .2s ease; } .kov-events__year:hover { background: var(--color-forest-200); } .kov-events__year.is-active { background: var(--color-forest-800); color: #fff; } /* Der Vergangenheits-Umschalter sitzt in derselben Navigation wie die Jahres-Chips und erbt deren Optik bewusst unveraendert; abgesetzt wird er nur durch die Position am rechten Rand der Leiste (auf schmalen Schirmen laeuft er mit). */ .kov-events__past { margin-left: auto; } @media (max-width: 575.98px) { .kov-events__past { margin-left: 0; } } /* Sticky Filterbar (Vorlage: backdrop-blur) */ .kov-events__filterbar { position: sticky; top: 4.5rem; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.1rem; margin-bottom: 2.5rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-paper, #fff) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--color-line, #e5e5e5) 60%, transparent); } .kov-events__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .kov-events__chip { cursor: pointer; margin: 0; user-select: none; border: 1px solid transparent; } .kov-events__chip input { position: absolute; opacity: 0; width: 0; height: 0; } .kov-events__chip span { line-height: 1; } .kov-events__chip:hover { background: var(--color-forest-200); } .kov-events__chip:has(input:checked) { background: var(--color-forest-800); color: #fff; } .kov-events__chip:has(input:focus-visible) { outline: 2px solid var(--color-forest-700); outline-offset: 2px; } /* --------------------------------------------------------------------------- Kategorie-Farben (sys_category.tx_plateevents_color) --------------------------------------------------------------------------- Die Modifier-Klasse kommt aus dem Farbschlüssel der Kategorie — Kategorie-Namen oder -UIDs tauchen weder hier noch im Template auf. Die konkreten Farbwerte liegen als Theme-Tokens in Scss/Generic/_variables.scss (--chip-*-bg/-fg) und sind damit auch auf der Termin-Detailseite verfügbar (theme.css lädt global). Muster wie bei den bestehenden .chip-Varianten: helle Fläche + dunkle Schrift. Im GEWÄHLTEN Filter-Zustand wird die Schriftfarbe zur Fläche (invertiert) — so bleibt die Kategorie-Zuordnung auch aktiv erkennbar, statt alle Chips auf dasselbe Forest-Grün zu vereinheitlichen. FALLE (verifiziert): Die Selektoren müssen die Basisklasse WIEDERHOLEN (`.kov-events__tag.kov-events__tag--danger`). Das generierte theme.css (bootstrap_package-SCSS-Compiler) wird NACH diesem Skin-Stylesheet geladen — die dortige `.chip`-Regel (background/color) hätte bei gleicher Spezifität (0,1,0) gewonnen und alle Chips blieben einheitlich forest-grün. Die Doppelklasse hebt auf (0,2,0) und gewinnt unabhängig von der Ladereihenfolge; `!important` ist dafür NICHT nötig. -------------------------------------------------------------------------- */ .kov-events__tag.kov-events__tag--primary, .kov-events__chip.kov-events__chip--primary { background: var(--chip-primary-bg); color: var(--chip-primary-fg); } .kov-events__tag.kov-events__tag--secondary, .kov-events__chip.kov-events__chip--secondary { background: var(--chip-secondary-bg); color: var(--chip-secondary-fg); } .kov-events__tag.kov-events__tag--success, .kov-events__chip.kov-events__chip--success { background: var(--chip-success-bg); color: var(--chip-success-fg); } .kov-events__tag.kov-events__tag--info, .kov-events__chip.kov-events__chip--info { background: var(--chip-info-bg); color: var(--chip-info-fg); } .kov-events__tag.kov-events__tag--warning, .kov-events__chip.kov-events__chip--warning { background: var(--chip-warning-bg); color: var(--chip-warning-fg); } .kov-events__tag.kov-events__tag--danger, .kov-events__chip.kov-events__chip--danger { background: var(--chip-danger-bg); color: var(--chip-danger-fg); } .kov-events__tag.kov-events__tag--dark, .kov-events__chip.kov-events__chip--dark { background: var(--chip-dark-bg); color: var(--chip-dark-fg); } .kov-events__tag.kov-events__tag--light, .kov-events__chip.kov-events__chip--light { background: var(--chip-light-bg); color: var(--chip-light-fg); } .kov-events__chip.kov-events__chip--primary:hover { background: color-mix(in srgb, var(--chip-primary-fg) 14%, var(--chip-primary-bg)); } .kov-events__chip.kov-events__chip--secondary:hover { background: color-mix(in srgb, var(--chip-secondary-fg) 14%, var(--chip-secondary-bg)); } .kov-events__chip.kov-events__chip--success:hover { background: color-mix(in srgb, var(--chip-success-fg) 14%, var(--chip-success-bg)); } .kov-events__chip.kov-events__chip--info:hover { background: color-mix(in srgb, var(--chip-info-fg) 14%, var(--chip-info-bg)); } .kov-events__chip.kov-events__chip--warning:hover { background: color-mix(in srgb, var(--chip-warning-fg) 14%, var(--chip-warning-bg)); } .kov-events__chip.kov-events__chip--danger:hover { background: color-mix(in srgb, var(--chip-danger-fg) 14%, var(--chip-danger-bg)); } .kov-events__chip.kov-events__chip--dark:hover { background: color-mix(in srgb, var(--chip-dark-fg) 14%, var(--chip-dark-bg)); } .kov-events__chip.kov-events__chip--light:hover { background: color-mix(in srgb, var(--chip-light-fg) 14%, var(--chip-light-bg)); } .kov-events__chip.kov-events__chip--primary:has(input:checked) { background: var(--chip-primary-fg); color: #fff; } .kov-events__chip.kov-events__chip--secondary:has(input:checked) { background: var(--chip-secondary-fg); color: #fff; } .kov-events__chip.kov-events__chip--success:has(input:checked) { background: var(--chip-success-fg); color: #fff; } .kov-events__chip.kov-events__chip--info:has(input:checked) { background: var(--chip-info-fg); color: #fff; } .kov-events__chip.kov-events__chip--warning:has(input:checked) { background: var(--chip-warning-fg); color: #fff; } .kov-events__chip.kov-events__chip--danger:has(input:checked) { background: var(--chip-danger-fg); color: #fff; } .kov-events__chip.kov-events__chip--dark:has(input:checked) { background: var(--chip-dark-fg); color: #fff; } .kov-events__chip.kov-events__chip--light:has(input:checked) { background: var(--chip-light-fg); color: #fff; } .kov-events__chip.kov-events__chip--primary:has(input:focus-visible), .kov-events__chip.kov-events__chip--secondary:has(input:focus-visible), .kov-events__chip.kov-events__chip--success:has(input:focus-visible), .kov-events__chip.kov-events__chip--info:has(input:focus-visible), .kov-events__chip.kov-events__chip--warning:has(input:focus-visible), .kov-events__chip.kov-events__chip--danger:has(input:focus-visible), .kov-events__chip.kov-events__chip--dark:has(input:focus-visible), .kov-events__chip.kov-events__chip--light:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; } /* „Alle Termine"-Reset-Chip (Link, kein Checkbox) */ .kov-events__chip--all { text-decoration: none; } .kov-events__chip--all.is-active { background: var(--color-forest-800); color: #fff; } .kov-events__chip--all.is-active:hover { background: var(--color-forest-800); } .kov-events__search { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; min-width: 16rem; background: #fff; border: 1px solid var(--color-line, #e5e5e5); border-radius: 999px; color: var(--color-ink-muted); } .kov-events__search input { /* min-width: 0 — sonst schrumpft das Input nicht unter seine Default-Breite (size-Attribut) und die Pille läuft auf schmalen Viewports über. */ flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 0.9rem; color: var(--color-ink); } .kov-events__search .btn-kov { flex: none; } /* Monats-Begrenzung: „Weitere Monate anzeigen" + Fortschrittsangabe */ .kov-events__more { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: -1rem 0 3rem; scroll-margin-top: 7rem; } .kov-events__more-info { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-ink-muted); } /* Monatsgruppen */ .kov-events__month { margin-bottom: 3.5rem; } .kov-events__month-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; } .kov-events__month-title { font-size: 1.9rem; color: var(--color-forest-900); margin: 0; } .kov-events__count { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted); } .kov-events__grid { display: grid; gap: 1.25rem; } @media (min-width: 992px) { .kov-events__grid { grid-template-columns: repeat(2, 1fr); } } /* Karte (aus kov-termine übernommen). Die ganze Karte ist klickbar — per „stretched link": der TITEL-Link (das einzige der Karte) legt sich mit einem ::after über die gesamte Fläche. Bewusst kein zweiter Link und kein JS-Klickhandler: ein Klickhandler auf dem
ist für Tastatur und Screenreader kein Link (kein Ziel in der Statuszeile, kein „in neuem Tab öffnen"), und ein zweiter auf dasselbe Ziel bläht die Linkliste auf. Voraussetzung ist das `position: relative` unten — ohne das spannt sich das ::after über den nächsten positionierten Vorfahren, im Zweifel die ganze Seite. */ .kov-events__card { position: relative; display: flex; gap: 1.5rem; padding: 1.5rem; background: #fff; transition: transform .2s ease, box-shadow .2s ease; } .kov-events__title a::after { content: ""; position: absolute; inset: 0; } /* Hover der GANZEN Karte (nicht mehr nur des Pfeils): leichte Anhebung + Schatten, der Pfeil übernimmt seinen früheren :hover-Zustand. Nur Theme-Tokens. */ .kov-events__card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgb(40 65 48 / 10%); } .kov-events__card:hover .kov-events__arrow { background: var(--color-forest-800); color: #fff; transform: translateY(-1px); } .kov-events__card:hover .kov-events__title { color: var(--color-forest-700); } /* Fokus-Sichtbarkeit: der Ring gehört um die KARTE, nicht nur um den Titeltext — geklickt/aktiviert wird ja die ganze Fläche. Fällt :has() aus (alte Engine), bleibt der Standard-Fokusring des Links stehen: die Regel, die ihn entfernt, steckt selbst in einem :has() und greift dann gar nicht erst. */ .kov-events__card:has(.kov-events__title a:focus-visible) { outline: 2px solid var(--color-forest-700); outline-offset: 3px; border-radius: var(--radius-md); } .kov-events__card:has(.kov-events__title a:focus-visible) .kov-events__title a { outline: none; } /* Der Pfeil ist reine Deko (aria-hidden, kein Link) und darf die Klickfläche des Titel-Links nicht abfangen. */ .kov-events__arrow { position: absolute; top: 1.25rem; right: 1.25rem; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; color: var(--color-forest-700); background: var(--color-forest-50); transition: background .2s ease, color .2s ease, transform .2s ease; } @media (prefers-reduced-motion: reduce) { .kov-events__card, .kov-events__arrow { transition: none; } .kov-events__card:hover { transform: none; } } /* Datums-Badge – wie Vorlage: MONAT (klein) oben / TAG (groß) / JAHR (klein), heller Grund */ .kov-events__date { flex: none; width: 4.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.7rem 0; border-radius: var(--radius-md); background: var(--color-forest-50); color: var(--color-forest-900); border: 1px solid var(--color-forest-100, rgba(40,65,48,.12)); text-align: center; line-height: 1.05; } .kov-events__date-month { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--color-forest-700); } .kov-events__date-day { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--color-forest-900); margin: 0.12rem 0; } .kov-events__date-year { font-size: 0.68rem; color: var(--color-ink-muted); } .kov-events__body { flex: 1; min-width: 0; padding-right: 2.5rem; } .kov-events__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; } .kov-events__tag { font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; } .kov-events__title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; color: var(--color-forest-900); margin-bottom: 0.75rem; } .kov-events__title a { color: inherit; text-decoration: none; } .kov-events__title a:hover { color: var(--color-forest-700); } .kov-events__meta { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; color: var(--color-ink-muted); } .kov-events__meta-row { display: flex; align-items: center; gap: 0.5rem; } .kov-events__meta-icon { flex: none; color: var(--color-forest-700); } /* Anmeldung/Kontakt auf der Karte — dezent, aber deutlich vom Rest der Meta-Zeilen abgesetzt. Entsteht nur, wenn die Felder gefüllt sind (datengetrieben). */ .kov-events__meta-row--registration { font-weight: 600; color: var(--color-forest-800); } .kov-events__meta-row--contact a { color: var(--color-forest-700); text-underline-offset: 0.2em; } .kov-events__meta-row--contact a:hover { color: var(--color-forest-900); } .kov-events__empty { padding: 2rem 0; color: var(--color-ink-muted); } .kov-events__empty-link { color: var(--color-forest-700); text-underline-offset: 0.2em; } /* ---- CTA-Karte am Seitenende („Hinweis für Ortsvereine") ---- Getragen vom nachfolgenden Text-CE (bodytext liefert die .kov-cta-card-Struktur). Helle Grün-Karte, Eyebrow + Titel + Text links, Button rechts (Desktop). */ .kov-cta-card { background: var(--color-forest-50); border: 1px solid var(--color-forest-100, rgba(40,65,48,.12)); border-radius: var(--radius-lg, 18px); padding: 2rem; display: grid; gap: 1rem 2.5rem; align-items: center; } .kov-cta-card .eyebrow, .kov-cta-card__text .eyebrow { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-forest-700); margin-bottom: 0.75rem; } .kov-cta-card h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; color: var(--color-forest-900); margin: 0 0 0.75rem; } .kov-cta-card p { margin: 0; } .kov-cta-card__text p { color: var(--color-ink-muted); line-height: 1.7; max-width: 44rem; } .kov-cta-card__action { margin-top: 0.5rem; } @media (min-width: 768px) { .kov-cta-card { grid-template-columns: 1fr auto; padding: 2.75rem 3rem; } .kov-cta-card__text { grid-column: 1; } .kov-cta-card__action { grid-column: 2; margin-top: 0; justify-self: end; } }