/**
 * Event-Ansichten (The Events Calendar Overrides): Header, Kategorienfilter,
 * Event-Grid. Konditional geladen (inc/enqueue.php, Stufe 2) auf Event-Archiv,
 * Kategorie-/Stichwortseiten und Single-Event.
 *
 * Desktop-first (Projekt-Konvention). Saisonfarben über --wp--preset--color--*.
 * Die Kachel-Basisklasse .spnkt-event-kachel teilt sich das Grid mit dem
 * event-kategorien-Block (assets/css/blocks/event-kategorien.css).
 */

/* TEC-Wrapper zurücksetzen, damit unser Layout greift. */
.spnkt-events {
	max-width: 100%;
}

/* --- Breadcrumbs (Event-Ansichten) --- */
.spnkt-breadcrumbs {
	margin: 0 0 var(--wp--preset--spacing--mittel, 2rem);
	font-size: var(--wp--preset--font-size--small, 0.75rem);
}

.spnkt-breadcrumbs__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
}

.spnkt-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

/*
 * Pfeil-Trenner (Projekt-Pfeil als Maske, currentColor): zwischen den Krümeln
 * via ::before, zusätzlich als Abschluss nach dem letzten Krümel via ::after.
 * Beide dekorativ (content: "", vom Screenreader ignoriert).
 */
.spnkt-breadcrumbs__item + .spnkt-breadcrumbs__item::before,
.spnkt-breadcrumbs__item:last-child::after {
	content: "";
	width: 1.125em;
	height: 1.125em;
	background-color: currentColor;
	mask-image: url("../images/pfeil.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.spnkt-breadcrumbs__link {
	color: inherit;
	text-decoration: none;
}

.spnkt-breadcrumbs__link:hover,
.spnkt-breadcrumbs__link:focus-visible {
	text-decoration: underline;
}

/*
 * Breadcrumb im Bild-Header (Archiv-Slider und Term-Header): sitzt oberhalb der
 * H1 im Inhalt-Layer und erbt dessen helle Schrift (primary). Etwas Abstand nach
 * unten zur Überschrift; kein eigener Hintergrund (liegt auf dem Bild).
 */
.spnkt-slider__inhalt .spnkt-breadcrumbs,
.spnkt-event-header__inhalt .spnkt-breadcrumbs {
	margin: 0 0 var(--wp--preset--spacing--mini, 1rem);
	color: inherit;
}

/* --- Term-Header (Slider-Stil) --- */
.spnkt-event-header {
	position: relative;
	overflow: hidden;
	min-height: 60vh;
	display: flex;
	align-items: flex-end;
	border-radius: var(--wp--custom--border-radius--regular, 1.3125rem);
}

.spnkt-event-header--ohne-bild {
	background-color: var(--wp--preset--color--secondary, #0d4917);
	min-height: 40vh;
}

.spnkt-event-header__bild {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.spnkt-event-header__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Verdunklung für Lesbarkeit der hellen Schrift (wie Slider). */
.spnkt-event-header__bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

.spnkt-event-header__inhalt {
	position: relative;
	z-index: 1;
	padding: var(--wp--preset--spacing--gross, 5rem);
	color: var(--wp--preset--color--primary, #e2d666);
	max-width: 60rem;
}

.spnkt-event-header__titel {
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: var(--wp--preset--font-size--xx-large, 6rem);
	line-height: 1;
	margin: 0 0 0.3em;
	color: inherit;
}

/* Gleiche Formatierung wie der Archiv-Slider-Text (.spnkt-slider__text). */
.spnkt-event-header__text {
	font-family: var(--wp--preset--font-family--base, sans-serif);
	font-size: 1.875rem;
	line-height: 1.2;
	margin: 0;
	color: inherit;
}

/*
 * Slider-Header auf dem Haupt-Event-Archiv: erbt alle .spnkt-slider-Regeln aus
 * blocks/slider.css (Crossfade, Verdunklung, Inhalt, prefers-reduced-motion).
 * Höhe aber NICHT wie der Startseiten-Slider (100dvh), sondern deckungsgleich
 * mit dem Kategorien-Term-Header (.spnkt-event-header, 60vh).
 *
 * Wichtig: Der Kontext-Selektor .spnkt-events davor ist nötig, damit die
 * min-height-Überschreibung höhere Spezifität hat als die .spnkt-slider-
 * Basisregel (gleiche Klassenzahl). Sonst gewinnt – da slider.css NACH
 * events.css lädt – die geerbte 100dvh-Basishöhe. Der Slider liegt ohnehin
 * immer im .spnkt-events-Wrapper (tribe/events/v2/list.php).
 */
.spnkt-events .spnkt-slider--event-header {
	min-height: 60vh;
	border-radius: var(--wp--custom--border-radius--regular, 1.3125rem);
}

/* --- Kategorienfilter (nur Archiv) --- */

/*
 * Heller, saisonaler Hintergrund (primary) mit Abschnitts-Padding – gleicher
 * Rahmen wie das Event-Grid (.spnkt-event-grid-wrap) darunter, damit Filter und
 * Liste als zusammenhängender heller Block wirken. Kein full-width-Inhalt: die
 * Link-Leiste ist auf die Content-Breite (wide-size) begrenzt und zentriert,
 * exakt wie .spnkt-event-grid.
 */
.spnkt-event-filter {
	background-color: var(--wp--preset--color--primary, #e2d666);
	padding: var(--wp--preset--spacing--abschnitt, 4.5rem);
	padding-block-end: 0;
}

.spnkt-event-filter__liste {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 110rem);
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--mini, 1rem);
}

/*
 * Der Filter liegt jetzt auf hellem primary-Hintergrund. Damit der AKTIVE
 * Zustand sichtbar bleibt (ein voll gefüllter primary-Button verschwände auf
 * primary-Grund), sind die Zustände invertiert:
 *   inaktiv → Outline (transparent, secondary-Rand + -Text)
 *   aktiv   → voll gefüllt (secondary-BG, primary-Text)
 * So hebt sich der aktive Eintrag klar vom hellen Grund und den Outline-Links ab.
 */
.spnkt-event-filter__link {
	display: inline-block;
	padding: 0.5em 1.25em;
	border: 1px solid var(--wp--preset--color--secondary, #0d4917);
	border-radius: var(--wp--custom--border-radius--small, 0.5rem);
	background-color: transparent;
	color: var(--wp--preset--color--secondary, #0d4917);
	text-decoration: none;
	transition: transform 0.2s ease-out;
}

.spnkt-event-filter__link:hover,
.spnkt-event-filter__link:focus-visible {
	transform: scale(1.05);
}

.spnkt-event-filter__link[aria-current="page"] {
	background-color: var(--wp--preset--color--secondary, #0d4917);
	color: var(--wp--preset--color--primary, #e2d666);
}

/* --- Kategorie-Pills in den Event-Kacheln (oberhalb des Titels) --- */

.spnkt-event-kachel__kategorien {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

/*
 * Outline-Pill: Rand + Text erben die helle Kachelschrift (currentColor →
 * primary, saisonabhängig). Kein Hex hardcoden, sonst bricht der Saisonwechsel.
 * Radius/Grösse analog zum Kategorienfilter-Link (visuelle Konsistenz).
 */
.spnkt-event-kachel__kategorie {
	padding: 0.25em 0.85em;
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--border-radius--small, 0.5rem);
	font-size: 0.875rem;
	line-height: 1.2;
}

/* --- Event-Grid (nutzt geteilte spnkt-event-kachel-Klassen) --- */

/* Umgebender Container mit hellem, saisonalem Hintergrund (primary). */
.spnkt-event-grid-wrap {
	background-color: var(--wp--preset--color--primary, #e2d666);
	padding: var(--wp--preset--spacing--abschnitt, 4.5rem);
}

.spnkt-event-grid {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 110rem);
	list-style: none;
	/* margin-block-start = Abschnitts-Abstand; margin-inline: auto zentriert. */
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--abschnitt, 4.5rem);
}

/* Datum/Zeit + Ort untereinander, dezenter Abstand. */
.spnkt-event-kachel__meta {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.spnkt-event-kachel__datum {

}

/* Reine Uhrzeit nie umbrechen (z. B. «14:00 – 17:00 Uhr»). */
.spnkt-event-kachel__zeit {
	white-space: nowrap;
}

.spnkt-event-kachel__ort {

}

.spnkt-event-grid__leer {
	color: var(--wp--preset--color--secondary, #0d4917);
}

/* --- TEC-Pagination (Vor/Zurück, aus list/nav) --- */

/*
 * Sitzt direkt unter dem Grid auf dessen saisonalem primary-Hintergrund.
 * TEC-Default (border-top, Spacer-Padding) zurücksetzen; Links als
 * secondary-Buttons – konsistent zum Kategorienfilter oben.
 */
.spnkt-events .tribe-events-calendar-list-nav {
	background-color: var(--wp--preset--color--primary, #e2d666);
	border-top: 0;
	padding: 0 var(--wp--preset--spacing--abschnitt, 4.5rem) var(--wp--preset--spacing--abschnitt, 4.5rem);
}

/*
 * TEC-Flexraster durch ein 3-Spalten-Grid ersetzen: prev linksbündig,
 * today exakt mittig, next rechtsbündig – unabhängig davon, ob prev/next
 * aktiv sind. TEC-eigene Item-Breiten (33 %/50 %) überschreiben.
 */
.spnkt-events .tribe-events-c-nav__list {
	max-width: var(--wp--style--global--wide-size, 110rem);
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.spnkt-events .tribe-events-c-nav__list-item {
	width: auto;
	margin: 0;
}

.spnkt-events .tribe-events-c-nav__list-item--prev {
	justify-self: start;
}

.spnkt-events .tribe-events-c-nav__list-item--today {
	justify-self: center;
}

.spnkt-events .tribe-events-c-nav__list-item--next {
	justify-self: end;
}

/*
 * Prev/Today/Next teilen ein Button-Styling. Prev und der deaktivierte
 * Zustand sind <button>-Elemente – deshalb Font/Appearance zurücksetzen.
 * Icon (Inline-SVG Caret) und Label per Flex mittig ausrichten.
 */
.spnkt-events .tribe-events-c-nav__prev,
.spnkt-events .tribe-events-c-nav__today,
.spnkt-events .tribe-events-c-nav__next {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 0.5em 1.25em;
	border: 0;
	border-radius: var(--wp--custom--border-radius--small, 0.5rem);
	background-color: var(--wp--preset--color--secondary, #0d4917);
	color: var(--wp--preset--color--primary, #e2d666);
	font: inherit;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	transition: transform 0.2s ease-out;
}

.spnkt-events .tribe-events-c-nav__prev:hover,
.spnkt-events .tribe-events-c-nav__prev:focus-visible,
.spnkt-events .tribe-events-c-nav__today:hover,
.spnkt-events .tribe-events-c-nav__today:focus-visible,
.spnkt-events .tribe-events-c-nav__next:hover,
.spnkt-events .tribe-events-c-nav__next:focus-visible {
	transform: scale(1.05);
	color: var(--wp--preset--color--primary, #e2d666);
}

/* TEC-Caret-SVG ausblenden – wir nutzen unseren eigenen Pfeil (siehe unten). */
.spnkt-events .tribe-events-c-nav__prev-icon-svg,
.spnkt-events .tribe-events-c-nav__next-icon-svg {
	display: none;
}

/*
 * Projekt-Pfeil (assets/images/pfeil.svg) als Maske, damit er die Button-
 * Farbe (currentColor) erbt – identisch zu .spnkt-event-kachel__mehr.
 * Prev zeigt nach links (gespiegelt), next nach rechts.
 */
.spnkt-events .tribe-events-c-nav__prev::before,
.spnkt-events .tribe-events-c-nav__next::after {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	mask-image: url("../images/pfeil.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.spnkt-events .tribe-events-c-nav__prev::before {
	transform: scaleX(-1);
}

/*
 * Deaktivierte Richtung ganz ausblenden (TEC rendert dann <button disabled>).
 * Das ganze <li> verstecken, damit keine leere Grid-Spalte bleibt; die
 * mittlere «Heute»-Spalte bleibt dadurch mittig.
 */
.spnkt-events .tribe-events-c-nav__list-item--prev:has(.tribe-events-c-nav__prev[disabled]),
.spnkt-events .tribe-events-c-nav__list-item--next:has(.tribe-events-c-nav__next[disabled]) {
	visibility: hidden;
}

/* --- Einzel-Event: Header ohne untere Rundung, heller Inhaltsblock --- */

/*
 * TEC rahmt den Single-Event in section#tribe-events-pg-template und begrenzt
 * ihn per Skeleton-CSS auf max-width: 1048px (zentriert, mit tec-spacer-Padding).
 * Das kappt unseren full-bleed-Header. Auf dem Single-Event die Begrenzung
 * aufheben, damit Header und Inhaltsblock die volle .spnkt-main-Breite nutzen.
 * Gescopt via body.single-tribe_events – Archiv/Kategorien laufen über
 * .spnkt-events und sind nicht betroffen.
 */
.single-tribe_events #tribe-events-pg-template {
	max-width: 100%;
	padding: 0;
}

/*
 * Der Bild-Header bleibt full-bleed (volle .spnkt-main-Breite); darunter liegt
 * der helle Lesebereich. Untere Ecken des Headers eckig, damit Bild und heller
 * Grund bündig ineinander übergehen. Nur im Single-Event – die Kategorien-
 * Ansicht behält ihre allseitige Rundung.
 */
.spnkt-single-event .spnkt-event-header {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/*
 * Saisonaler heller Hintergrund (primary) über die volle Breite für den
 * Inhaltsbereich unter dem Bild-Header – gleicher Grund wie das Event-Grid/der
 * Kategorienfilter. Dunkle Schrift (secondary) für den Kontrast, ebenfalls
 * konsistent zu jenen Flächen. Der Bild-Header liegt vorher im selben Article
 * und behält seinen eigenen (dunklen) Kontext. Der Breadcrumb sitzt im Header
 * über der H1 (siehe .spnkt-event-header__inhalt .spnkt-breadcrumbs).
 */
.spnkt-single-event {
	background-color: var(--wp--preset--color--primary, #e2d666);
}

/*
 * Der Lesebereich nutzt den projekteigenen Standard-Container .spnkt-content
 * (layout.css): full-bleed heller primary-Grund, Inhalt zentriert auf die slim-
 * Breite mit responsivem Innerwrap-Padding – wie alle Unterseiten. Kein eigenes
 * Breiten-/Padding-Setup hier nötig.
 *
 * Das Grundlayout ist dunkel (global.css setzt Fliesstext, Überschriften,
 * strong/b etc. direkt auf primary, gelb) – auf dem primary-Grund hier
 * unlesbar. Im Lesebereich (NICHT der Bild-Header) auf secondary (dunkelgrün)
 * zwingen – gleicher Kontrast wie Event-Grid/Filter auf primary. Links
 * behalten die Unterstreichung aus global.css. :where() (Spezifität 0) auf
 * dem Universalselektor, damit tiefer verschachtelte Ausnahmen (z. B. die
 * Tribe-Tickets-Regeln weiter unten) ohne !important dagegenhalten können.
 */
.spnkt-single-event__inhalt,
.spnkt-single-event__inhalt :where(*) {
	color: var(--wp--preset--color--secondary, #0d4917);
}

/*
 * Textmarkierung auf dem primary-Grund invertieren: die globale ::selection
 * (BG primary) wäre hier hellgelb auf hellgelb. Darum dunkler Balken, heller
 * Text – analog zu .is-style-hell ::selection (season.css). Gilt für den ganzen
 * Inhaltsbereich inkl. gelber Buttons (z. B. Event-Ticket-/Anmelde-Buttons).
 * Der Bild-Header ist ausgenommen – dort ist die globale Selektion korrekt.
 */
.spnkt-single-event__inhalt ::selection {
	background: var(--wp--preset--color--secondary, #0d4917);
	color: var(--wp--preset--color--primary, #e2d666);
}

/*
 * Hervorgehobene Meta-Zeile am Anfang des Inhalts: Kategorien-Pills oben rechts,
 * Datum/Zeit und Ort links darunter (je kleines Label + prominenter Wert).
 * Trennlinie nach unten setzt den Block vom Fliesstext ab.
 *
 * Der Wrapper ist eine Flex-Row (align-items: flex-start): Die Daten-Liste
 * (Wann/Wo) links, die Pills rechts – beide starten auf derselben Oberkante,
 * die Pills schieben die Daten also NICHT nach unten. Im Markup stehen die Pills
 * zuerst (Lese-/Tab-Reihenfolge = Kategorie-Einordnung); order dreht die visuelle
 * Reihenfolge. Auf schmalen Viewports bricht die Pill-Zeile über die Daten um.
 */
.spnkt-event-meta {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--mini, 1rem) var(--wp--preset--spacing--mittel, 2rem);
	margin: 0 0 var(--wp--preset--spacing--mittel, 2rem);
	padding: 0 0 var(--wp--preset--spacing--mittel, 2rem);
}

/* Datum und Ort untereinander, links. */
.spnkt-event-meta__daten {
	order: 1;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--mini);
	margin: 0;
}

/*
 * Label und Wert in einer Zeile («Wann: …», «Wo: …»), umbruchsicher auf
 * schmalen Viewports. baseline, damit die grosse Schrift sauber aufsitzt.
 */
.spnkt-event-meta__item {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
}

/*
 * Kategorien-Pills: rechts oben, auf gleicher Höhe wie die Wann-Zeile. Sie
 * beanspruchen nur ihre Inhaltsbreite (flex: 0 0 auto) und weichen auf schmalen
 * Viewports über die Daten (order/wrap).
 */
.spnkt-event-meta__kategorien {
	order: 2;
	flex: 0 0 auto;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5em;
}

/*
 * Gefüllte Pill auf dem hellen primary-Grund: secondary-Hintergrund (dunkel),
 * primary-Schrift (hell) – gleicher Kontrast wie der Zurück-Button. Radius analog
 * zu .spnkt-event-kachel__kategorie und zum Kategorienfilter; Schrift hier grösser
 * (medium), passend zum prominenten Meta-Block.
 */
.spnkt-event-meta__kategorie {
	padding: 0.25em 0.85em;
	border-radius: var(--wp--custom--border-radius--small, 0.5rem);
	background-color: var(--wp--preset--color--secondary, #0d4917);
	color: var(--wp--preset--color--primary, #e2d666);
	font-size: var(--wp--preset--font-size--medium, 1.5625rem);
	line-height: 1.2;
}

/*
 * Label («Wann:»/«Wo:») und Wert teilen sich Schrift und Grösse (PP Woodland,
 * large) und stehen zusammen in einer Zeile – siehe .spnkt-event-meta__item.
 */
.spnkt-event-meta__label,
.spnkt-event-meta__wert {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 2rem);
	font-weight: 700;
	line-height: 1.1;
}

/* Reine Uhrzeit nie umbrechen (z. B. «14:00 – 17:00 Uhr»). */
.spnkt-event-meta__zeit {
	white-space: nowrap;
}

/* --- Einzel-Event: Zweispaltiges Layout (Inhalt + Anmeldung) --- */

/*
 * Inhalt links, Anmelde-/Reservierungsformular rechts (je 1fr). Das Formular
 * hängt Event Tickets nicht an the_content(), sondern an einen Action-Hook –
 * das Template fängt es ab und legt es in .spnkt-event-layout__anmeldung
 * (siehe tribe-events/single-event.php). Die rechte Spalte bleibt auch ohne
 * Formular bestehen (Grid bleibt zweispaltig). Die Meta-Zeile darüber und der
 * Zurück-Link darunter liegen bewusst ausserhalb – sie behalten volle Breite.
 * align-items: start, damit beide Spalten oben bündig starten.
 */
.spnkt-event-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--gross, 5rem);
	align-items: start;
}


/* --- Einzel-Event: RSVP-Ticket (Event Tickets v2) im CD --- */

/*
 * Das RSVP-Markup (#rsvp-now .tribe-common.event-tickets) kommt vom Plugin und
 * bringt eigene weisse Kacheln, graue Rahmen/Trenner und Skeleton-Schriften mit.
 * Hier auf den CD-Look umziehen: Der Container .spnkt-event-layout__anmeldung
 * liefert bereits Rahmen/Rundung/Padding auf primary-Grund – der RSVP-Block wird
 * darin flächenlos (transparent) und erbt die dunkle secondary-Schrift des
 * Lesebereichs. Alle Farben saisonabhängig über die Custom Properties, nie Hex.
 *
 * ⚠️ Spezifität: Die Plugin-Regeln lauten «.event-tickets .tribe-tickets__…»
 * (0-2-0) und laden NACH events.css. Deshalb wird jeder Selektor hier mit dem
 * Body-nahen .spnkt-single-event vorangestellt (→ 0-3-0), damit wir gewinnen,
 * ohne !important. Der weisse Grund kam genau daher (.event-tickets
 * .tribe-tickets__rsvp-wrapper → var(--tec-color-background)).
 */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-common.event-tickets,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-wrapper,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp {
	max-width: 100%;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--wp--preset--color--secondary, #0d4917);
}

/*
 * Zeilen-Layout des Plugins (tribe-common-g-row --gutters, zwei g-col) in eine
 * einfache vertikale Spalte umbauen – im schmalen Randspalten-Container wären
 * zwei Spalten zu eng. Plugin-Gutter-Padding (--tec-spacer-10) zurücksetzen; der
 * Container bringt den Aussenabstand.
 */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--mini, 1rem);
	margin: 0;
	padding: 0;
}

.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-details-wrapper,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-wrapper {
	width: 100%;
	max-width: 100%;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	/* Details/Aktionen linksbündig (Plugin zentriert sie unter 768px). */
	text-align: left;
}

/*
 * Details-Spalte wird per Flex zentriert (Plugin, unter 768px). Da wir stapeln,
 * linksbündig ausrichten – passt zum übrigen Lesefluss der Randspalte.
 */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-details-wrapper {
	display: block;
}

/*
 * Desktop-Trenner des Plugins ist ein linker gestrichelter Rand an der Aktions-
 * Spalte (≥768px). Da wir einspaltig stapeln, weg damit – unsere Trennlinie sitzt
 * oben auf .tribe-tickets__rsvp-actions.
 */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-wrapper {
	border-left: 0;
}

/* Titel «Ticket …» in der Überschriften-Schrift (PP Woodland), secondary. */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-title {
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: var(--wp--preset--font-size--large, 2rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 0.4em;
	color: inherit;
}

/* Beschreibung, Verfügbarkeit, Teilnahme: ruhiger Fliesstext in secondary. */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-description,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-availability,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-attendance {
	font-family: var(--wp--preset--font-family--base, sans-serif);
	font-size: var(--wp--preset--font-size--medium, 1.5625rem);
	line-height: 1.3;
	margin: 0 0 0.3em;
	color: inherit;
}

/*
 * «Teilnehmer»-Zähler (grosse Zahl): auf mittlere Grösse zurücknehmen, damit
 * die «0» nicht wie die dominante Aussage der Box wirkt. Fett + secondary.
 * Der Plugin-Selektor für die Grösse ist
 * «.event-tickets .tribe-tickets__rsvp-attendance-number.…--no-description»
 * (0-3-0). Wir matchen dieselbe Compound-Klasse mit dem .spnkt-single-event-
 * Präfix (0-4-0), damit wir ohne !important gewinnen.
 */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-attendance-number,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-attendance-number.tribe-tickets__rsvp-attendance-number--no-description {
	font-family: var(--wp--preset--font-family--base, sans-serif);
	font-size: var(--wp--preset--font-size--large, 2rem);
	font-weight: 700;
	line-height: 1.1;
	color: inherit;
}

/* «Teilnehmer»-Label unter der Zahl: dezent (small), nicht winzig. */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-attendance-going {
	font-family: var(--wp--preset--font-family--base, sans-serif);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.2;
	color: inherit;
}

/*
 * Trennlinie zwischen Detail- und Aktions-Bereich: der Plugin-Trenner (grau,
 * gestrichelt, .tribe-tickets__rsvp-actions border-top) wird zu einer feinen
 * durchgezogenen secondary-Linie. Plugin-Padding zurücksetzen.
 */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions {
	margin: var(--wp--preset--spacing--mini, 1rem) 0 0;
	padding: var(--wp--preset--spacing--mini, 1rem) 0 0;
	border-top: 1px solid var(--wp--preset--color--secondary, #0d4917);
}

/* «RSVP Here»-Label über den Buttons: Label-Optik, nicht als Riesen-H2. */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-rsvp > span:first-child,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-full-text {
	display: block;
	font-family: var(--wp--preset--font-family--base, sans-serif);
	font-size: var(--wp--preset--font-size--medium, 1.5625rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.5em;
	color: inherit;
}

/*
 * Going/Not-Going-Buttons («Hier reservieren» / «Teilnehmen») und der
 * Formular-Submit als sekundäre Buttons – identisch zum Zurück-Link und zur
 * Pagination (secondary-Grund, primary-Schrift, kleiner Radius, dezenter
 * Hover-Scale). Plugin-Appearance (helle Skeleton-Buttons) zurücksetzen.
 */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-going,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-not-going,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-form-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-width: 0;
	width: auto;
	margin: 0.25em 0.5em 0.25em 0;
	padding: 0.5em 1.25em;
	border: 0;
	border-radius: var(--wp--custom--border-radius--small, 0.5rem);
	background-color: var(--wp--preset--color--secondary, #0d4917);
	color: var(--wp--preset--color--primary, #e2d666);
	font-family: var(--wp--preset--font-family--base, sans-serif);
	font-size: var(--wp--preset--font-size--medium, 1.5625rem);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	transition: transform 0.2s ease-out;
}

.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-going:hover,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-going:focus-visible,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-not-going:hover,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-not-going:focus-visible,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-form-button:hover,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-form-button:focus-visible {
	transform: scale(1.0125);
	color: var(--wp--preset--color--primary, #e2d666);
}

/* Not-Going/Abbrechen als Outline-Variante (secondary-Rand, transparenter Grund). */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-not-going,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-form-button--cancel {
	background-color: transparent;
	color: var(--wp--preset--color--secondary, #0d4917);
	border: 1px solid var(--wp--preset--color--secondary, #0d4917);
}

.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-not-going:hover,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-not-going:focus-visible,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-form-button--cancel:hover,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-form-button--cancel:focus-visible {
	color: var(--wp--preset--color--secondary, #0d4917);
}

/* --- RSVP-Formular (Name/E-Mail/Anzahl) im CD --- */

.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-form-title,
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__form-field-label {
	font-family: var(--wp--preset--font-family--base, sans-serif);
	font-weight: 700;
	color: inherit;
}

/* Text-/E-Mail-Eingaben: secondary-Rahmen auf weissem Grund, kleiner Radius. */
.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__form-field-input {
	width: 100%;
	padding: 0.5em 0.75em;
	border: 1px solid var(--wp--preset--color--secondary, #0d4917);
	border-radius: var(--wp--custom--border-radius--small, 0.5rem);
	background-color: var(--wp--preset--color--background, #fff);
	color: var(--wp--preset--color--secondary, #0d4917);
	font-family: var(--wp--preset--font-family--base, sans-serif);
}

.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__form-field-input:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary, #0d4917);
	outline-offset: 2px;
}

/* --- Reduced Motion: RSVP-Buttons --- */

@media only screen and (prefers-reduced-motion: reduce) {

	.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-going,
	.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-not-going,
	.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-form-button {
		transition: none;
	}

	.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-going:hover,
	.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-going:focus-visible,
	.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-not-going:hover,
	.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-actions-button-not-going:focus-visible,
	.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-form-button:hover,
	.spnkt-single-event .spnkt-event-layout__anmeldung .tribe-tickets__rsvp-form-button:focus-visible {
		transform: none;
	}
}

/* --- Einzel-Event: Zurück-Link --- */

/*
 * Setzt sich mit einer feinen Trennlinie und grosszügigem Abstand vom Fliesstext
 * ab, damit der Ausstieg aus dem Event klar erkennbar ist.
 */
.spnkt-single-event__zurueck {
	margin: var(--wp--preset--spacing--mittel, 5rem) 0 0;
	padding: var(--wp--preset--spacing--mittel, 2rem) 0 0;
}

/*
 * Zurück-Link als Textlink mit vorangestelltem, nach links zeigendem
 * Projekt-Pfeil (currentColor-Maske) – konsistent zur Event-Pagination
 * (.tribe-events-c-nav__prev). Kein Button-Hintergrund, keine Unterstreichung.
 */
.spnkt-single-event__zurueck a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--wp--preset--color--secondary, #0d4917);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.2s ease-out;
}

.spnkt-single-event__zurueck a:hover,
.spnkt-single-event__zurueck a:focus-visible {
	transform: scale(1.05); /* war 1.05 – an dezente Button-Konvention (f97d70d) angeglichen */
	color: var(--wp--preset--color--secondary, #0d4917);
	text-decoration: none;
}

.spnkt-single-event__zurueck a::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	mask-image: url("../images/pfeil.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	transform: scaleX(-1);
}

@media only screen and (prefers-reduced-motion: reduce) {

	.spnkt-event-filter__link {
		transition: none;
	}

	.spnkt-event-filter__link:hover,
	.spnkt-event-filter__link:focus-visible {
		transform: none;
	}

	.spnkt-events .tribe-events-c-nav__prev,
	.spnkt-events .tribe-events-c-nav__today,
	.spnkt-events .tribe-events-c-nav__next {
		transition: none;
	}

	.spnkt-events .tribe-events-c-nav__prev:hover,
	.spnkt-events .tribe-events-c-nav__prev:focus-visible,
	.spnkt-events .tribe-events-c-nav__today:hover,
	.spnkt-events .tribe-events-c-nav__today:focus-visible,
	.spnkt-events .tribe-events-c-nav__next:hover,
	.spnkt-events .tribe-events-c-nav__next:focus-visible {
		transform: none;
	}

	.spnkt-single-event__zurueck a {
		transition: none;
	}

	.spnkt-single-event__zurueck a:hover,
	.spnkt-single-event__zurueck a:focus-visible {
		transform: none;
	}
}

@media only screen and (max-width: 80em) {

	.spnkt-event-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 55em) {

	.spnkt-event-header__inhalt {
		padding: var(--wp--preset--spacing--mittel, 2rem);
	}

	/* Ab Tablet zurück auf die Fliesstext-Grösse – wie .spnkt-slider__text. */
	.spnkt-event-header__text {
		font-size: var(--wp--preset--font-size--medium, 1.5625rem);
	}

	/* Ab Tablet einspaltig: Anmeldeformular rutscht unter den Inhalt. */
	.spnkt-event-layout {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width: 36em) {

	.spnkt-event-grid {
		grid-template-columns: 1fr;
	}

	/*
	 * Mobile: Meta-Block stapelt (column) – Kategorien-Pills zuerst (order 1) über
	 * den Daten (order 2). Negatives margin-bottom an den Pills zieht die Datenzeile
	 * enger heran.
	 */
	.spnkt-event-meta {
		flex-direction: column;
	}

	.spnkt-event-meta__kategorien {
		order: 1;
		align-self: flex-end;
		margin-top: -1em;
	}

	.spnkt-event-meta__daten {
		order: 2;
	}

	/*
	 * Mobile: Label («Wann:»/«Wo:») und Wert untereinander statt nebeneinander –
	 * mehr Platz für die grosse Schrift auf schmalen Viewports.
	 */
	.spnkt-event-meta__item {
		flex-direction: column;
		gap: 0;
	}

	/* Mobile: Label dezenter (normale Strichstärke), der Wert bleibt fett. */
	.spnkt-event-meta__label {
		font-weight: 400;
	}

	/*
	 * Mobile: im Single-Event steht die Uhrzeit unter dem Datum – erzwungener
	 * Umbruch (Zeit als Block), dekoratives «|» dazwischen weg. In den Cards
	 * bleibt der Trenner erhalten.
	 */
	.spnkt-event-meta__trenner {
		display: none;
	}

	.spnkt-event-meta__zeit {
		display: block;
	}
}


/*
 * Kein Button-Look: Plugin-Rahmen/-Hintergrund entfernt, nur Text wie eine
 * H3-Überschrift. Kein Toggle mehr (siehe __content unten), daher auch kein
 * Klick-Cursor.
 */
.tribe-events-c-subscribe-dropdown__button {
	display: inline-flex !important;
	align-items: center;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	cursor: default !important;
}

.tribe-events-c-subscribe-dropdown__button-icon,
.tribe-events-c-subscribe-dropdown__export-icon {
	display: none !important;
}

/*
 * Button-Text wie eine H3 dargestellt (Werte wie die .h3-Utility in
 * global.css).
 */
.tribe-events-c-subscribe-dropdown__button-text {
	font-family: var(--wp--preset--font-family--base) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 700 !important;
	line-height: 1.058em !important;
	color: var(--wp--preset--color--secondary, #0d4917) !important;
	text-decoration: none !important;
}

/*
 * Liste standardmässig aufgeklappt: das Plugin-JS blendet sie per
 * jQuery .hide()/.toggle() (Inline-Style) ein/aus und klappt sie bei Klick
 * ausserhalb automatisch wieder zu. Dauerhaft sichtbar erzwingen und die
 * Klick-Logik damit wirkungslos machen, statt sie zu deaktivieren (kein
 * Theme-JS nötig).
 */
.tribe-events-c-subscribe-dropdown__content {
	display: block !important;
	position: static !important;
}

.tribe-events-c-subscribe-dropdown__list,
.tribe-events-c-subscribe-dropdown__list-item,
.tribe-events-c-subscribe-dropdown__list-item-link {
	padding-left: 0 !important;
	padding-right: 0 !important;
}