/*
 * Design-Tokens. Bewusst KEINE Webfont-Anfrage (Systemschriften) – passt
 * zur bestehenden DSGVO-Sorgfalt (self-hosted Leaflet) und lädt ohne
 * jeden zusätzlichen Request. Ein Akzent (Waldgrün, aus dem bisherigen
 * Marker-Grün abgeleitet) statt vieler Farben; die Datumsspalte ist der
 * einzige kräftige Blickfang, alles andere bleibt zurückhaltend.
 *
 * Textfarben (Titel/Adresse/Text) werden bewusst mit !important gesetzt:
 * viele Themes definieren globale Regeln wie ".entry-content p{color:...}",
 * die spezifischer sind als einzelne Klassenselektoren und sonst unsere
 * Farben überschreiben (genau das Problem im Screenshot – Text erschien
 * gedämpft/orange statt schwarz). Das ist hier eine bewusste Ausnahme,
 * keine generelle Marotte.
 */
.bh-events{
	--bh-bg:#fff;
	--bh-surface:#faf8f3;
	--bh-text:#1a1b16;
	--bh-muted:#54524a;
	--bh-border:#e7e2d5;
	--bh-accent:#2c3e33;
	--bh-accent-soft:#e9efe9;
	--bh-rust:#a35a30;
	--bh-font-display:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
	--bh-font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	font-family:var(--bh-font-body);
	color:var(--bh-text);
	font-size:16px;
}
.bh-events, .bh-events p, .bh-events h3, .bh-events time, .bh-events span, .bh-events a{
	font-family:var(--bh-font-body);
}

/* Toolbar / Ansicht-Umschalter --------------------------------------- */
.bh-events__search-row{display:flex;justify-content:center;margin-bottom:14px}
.bh-events__search{width:100%;max-width:440px}
.bh-events__search-input{
	width:100%;border:1px solid var(--bh-border);border-radius:999px;
	padding:10px 20px;font-size:.95rem;font-family:var(--bh-font-body);
	color:var(--bh-text)!important;background:var(--bh-bg);
}
.bh-events__search-input::placeholder{color:var(--bh-muted)}
.bh-events__search-input:focus{outline:2px solid var(--bh-accent);outline-offset:1px}
.bh-events__no-results{color:var(--bh-muted)!important;padding:20px 0}

.bh-events__toolbar-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.bh-events__count{margin:0;font-size:.85rem;color:var(--bh-muted)!important;flex-shrink:0}
.bh-events__sort{margin-right:auto}
.bh-events__sort-select{
	border:1px solid var(--bh-border);border-radius:999px;
	padding:6px 14px;font-size:.82rem;font-family:var(--bh-font-body);
	color:var(--bh-text)!important;background:var(--bh-bg);cursor:pointer;
	-webkit-appearance:menulist;appearance:auto;
}
.bh-events__sort-select:focus{outline:2px solid var(--bh-accent);outline-offset:1px}
.bh-events__toggle{display:inline-flex;background:var(--bh-surface);border:1px solid var(--bh-border);border-radius:999px;padding:3px}
.bh-events__toggle-btn{background:transparent;border:0;padding:7px 18px;font-size:.86rem;cursor:pointer;color:var(--bh-muted);border-radius:999px;transition:background .15s ease,color .15s ease}
.bh-events__toggle-btn[aria-pressed="true"]{background:var(--bh-accent);color:#fff}

/* Karte / Consent-Gate ------------------------------------------------ */
.bh-events__map-wrap{position:relative;margin-bottom:32px;border-radius:10px;overflow:hidden;border:1px solid var(--bh-border)}
/* Höhe per Einstellung (--bh-map-height, Backend "Kartenhöhe") steuerbar;
   clamp() verhindert eine unpraktikabel hohe Karte auf kleinen Screens,
   auch wenn im Backend ein großer Wert eingetragen wurde. */
.bh-events__map{width:100%;height:clamp(240px, var(--bh-map-height, 380px), 70vh);background:var(--bh-surface)}

/* Bekannter Leaflet-in-WordPress-Konflikt: viele Themes setzen global
   img{max-width:100%}, was mit Leaflets eigenen Kachel-Bildern
   kollidiert und Lücken/nicht gefüllte Ränder verursacht. Leaflets
   eigenes CSS bringt zwar eine Gegenregel mit, aber Theme-CSS mit
   höherer Spezifität kann die überschreiben – hier nochmal explizit
   erzwungen, unabhängig von der Ladereihenfolge. */
.bh-events__map img,
.bh-events__map .leaflet-tile,
.bh-events__map .leaflet-marker-icon{
	max-width:none!important;
	max-height:none!important;
}

/* Listen-/Kachel-Grid -------------------------------------------------- */
.bh-events__items{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bh-events__items--list{grid-template-columns:1fr}
.bh-events__items--grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

.bh-event-card{border:1px solid var(--bh-border);border-radius:10px;overflow:hidden;background:var(--bh-bg);display:grid}
.bh-event-card[hidden]{display:none}
.bh-events__items--list .bh-event-card{grid-template-columns:96px 1fr}
.bh-events__items--grid .bh-event-card{grid-template-columns:1fr}
.bh-event-card--abgesagt .bh-event-card__title{text-decoration:line-through;text-decoration-color:var(--bh-rust)}
.bh-event-card--abgesagt .bh-event-card__date{background:#8a8a80}

/* Vergangene Termine: grau/reduziert statt komplett zu fehlen – bleiben
   auffindbar (Suche/Legende wirken weiterhin), sind aber klar als
   "vorbei" erkennbar. Etwas dezenter als abgesagt (keine Durchstreichung,
   da der Termin ja stattgefunden hat), aber deutlich zurückgenommen. */
.bh-event-card--vergangen{ opacity:.6; filter:grayscale(.4); transition:opacity .15s ease,filter .15s ease; }
.bh-event-card--vergangen:hover{ opacity:.85; filter:grayscale(.15); }
.bh-event-card--vergangen .bh-event-card__date{background:#8a8a80}
.bh-event-card__status--vergangen{background:#8a8a80;color:#fff!important}
@media (prefers-reduced-motion:reduce){
	.bh-event-card--vergangen{transition:none}
}

/* Datumsspalte: Wochentag oben, große Tageszahl, ausgeschriebener Monat,
   Uhrzeit mit "Uhr" unten. Einziger kräftiger Akzent der Karte. */
.bh-event-card__date{
	display:none;
	background:var(--bh-accent);
	color:#fff;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:16px 8px;
	text-align:center;
	line-height:1.15;
	gap:1px;
}
.bh-events__items--list .bh-event-card__date{display:flex}
.bh-event-card__weekday{font-size:.72rem;opacity:.8;text-transform:capitalize}
.bh-event-card__day{font-family:var(--bh-font-display);font-size:1.7rem;font-weight:600;margin-top:2px}
.bh-event-card__month{font-size:.72rem;opacity:.92;margin-top:1px;line-height:1.3}
.bh-event-card__year{font-size:.66rem;opacity:.7;margin-top:1px}
.bh-event-card__time{font-size:.7rem;opacity:.85;margin-top:6px}

/* Bild + Datumsbadge: nur in der Kachelansicht sichtbar */
.bh-event-card__media{display:none;position:relative;aspect-ratio:16/10}
.bh-events__items--grid .bh-event-card__media{display:block}
.bh-event-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.bh-event-card__media-date{
	position:absolute;top:10px;left:10px;
	background:var(--bh-accent);color:#fff;
	font-family:var(--bh-font-display);
	font-size:.82rem;padding:4px 10px;border-radius:5px;
}
.bh-events__items--list .bh-event-card__media{display:none}

.bh-event-card__body{padding:14px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}

.bh-event-card__meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:.78rem;color:var(--bh-muted)!important}
.bh-event-card__meta-date{display:none}
.bh-events__items--grid .bh-event-card__meta-date{display:inline}
.bh-event-card__category,.bh-event-card__region{
	display:inline-block;padding:2px 10px;border-radius:20px;font-size:.72rem;
}
.bh-event-card__category{background:var(--bh-accent-soft);color:var(--bh-accent)!important;font-weight:600}
.bh-event-card__region{background:var(--bh-surface);color:var(--bh-muted)!important}
.bh-event-card__status{
	display:inline-block;padding:2px 10px;border-radius:20px;
	font-size:.72rem;font-weight:700;letter-spacing:.02em;
}
.bh-event-card__status--abgesagt{background:#c0392b;color:#fff!important}
.bh-event-card__status--verschoben{background:#a3791f;color:#fff!important}

/* Titel + Aktionen in einer Zeile: nutzt die Breite rechts statt Leerraum,
   macht die Karte dadurch spürbar niedriger. Bricht unter 640px um. */
.bh-event-card__headrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.bh-event-card__title{margin:0;font-family:var(--bh-font-display);font-size:1.15rem;line-height:1.3;font-weight:600;color:var(--bh-text)!important}

.bh-event-card__subline{margin:0;font-size:.9rem;color:var(--bh-muted)!important;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh-event-card__address{color:var(--bh-text)!important;font-weight:500;text-decoration:none;border-bottom:1px solid transparent}
.bh-event-card__address:hover{border-bottom-color:currentColor}
.bh-event-card__excerpt{color:var(--bh-muted)!important}

.bh-event-card__extra{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;margin-top:2px}

.bh-event-card__badges{list-style:none;display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0}
.bh-badge{font-size:.74rem;padding:3px 10px;background:var(--bh-accent-soft);color:var(--bh-accent)!important;border-radius:20px}

.bh-event-card__mobility{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:.83rem;color:var(--bh-muted)!important}
.bh-event-card__mobility-label{color:var(--bh-text)!important;font-weight:600}
.bh-event-card__mobility-distance{color:var(--bh-muted)!important}

.bh-event-card__actions{display:flex;gap:14px;flex-wrap:wrap;flex-shrink:0;align-items:center}
.bh-event-card__link,.bh-event-card__ical{
	font-size:.84rem;color:var(--bh-accent)!important;text-decoration:none;
	border-bottom:1px solid currentColor;padding-bottom:1px;white-space:nowrap;
}
.bh-event-card__ical{color:var(--bh-muted)!important}
.bh-event-card__link:hover,.bh-event-card__ical:hover{opacity:.75}

.bh-event-card__share{
	display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;padding:0;flex-shrink:0;
	border:1px solid var(--bh-border);border-radius:6px;
	background:var(--bh-bg);color:var(--bh-muted)!important;
	cursor:pointer;
}
.bh-event-card__share svg{display:block}
.bh-event-card__share:hover{background:var(--bh-surface);color:var(--bh-accent)!important;border-color:var(--bh-accent)}

.bh-events__empty{color:var(--bh-muted)!important}

/* Regions-Gruppen (mehrere Regionen im Shortcode) ------------------------ */
.bh-events__region-group + .bh-events__region-group{margin-top:32px}
.bh-events__region-title{
	font-family:var(--bh-font-display);font-size:1.15rem;font-weight:600;
	color:var(--bh-text)!important;margin:0 0 14px;
	padding-bottom:8px;border-bottom:2px solid var(--bh-accent-soft);
}

.bh-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Mobil: bessere Lesbarkeit (kleine, "feine" Schrift wirkt auf
   Mobilgeräten schnell zu blass/dünn – hier bewusst dunkler und mit
   etwas mehr Schriftstärke) sowie übersichtlichere, großzügigere
   Darstellung mit größeren Touch-Zielen.
   Datumsspalte wird zum horizontalen Balken oben statt schmaler
   Seitenspalte (in 72px lässt sich Wochentag+Tag+Monat+Jahr+Zeit nicht
   lesbar unterbringen). Adresse wandert ans Ende der Karte (nach
   Titel/Aktionen/Zusatzinfos) – gelöst per "display:contents" auf die
   Subline, damit Adresse und Kurztext unabhängig voneinander im
   Flex-Layout der Karte neu einsortiert werden können, ohne die
   Desktop-Struktur (kombinierte, einzeilige Subline) anzufassen. */
@media (max-width:640px){
	.bh-events{ --bh-muted:#3d3b34; }

	.bh-event-card__excerpt,
	.bh-event-card__subline,
	.bh-event-card__meta,
	.bh-events__count,
	.bh-popup-card__meta,
	.bh-popup-card__address,
	.bh-popup-card__date-sub{ font-weight:500; }

	/* Datumsspalte → horizontaler Balken über der Karte */
	.bh-events__items--list .bh-event-card{grid-template-columns:1fr}
	.bh-event-card__date{
		flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
		align-items:baseline;column-gap:8px;row-gap:2px;
		padding:10px 16px;text-align:left;
	}
	.bh-event-card__weekday,
	.bh-event-card__month,
	.bh-event-card__year,
	.bh-event-card__time{ font-weight:600;opacity:.95;font-size:.78rem; }
	.bh-event-card__day{font-size:1.3rem;margin-top:0}
	.bh-event-card__time::before{content:"· "}

	.bh-event-card__body{padding:16px;display:flex;flex-direction:column}
	.bh-event-card__meta{order:1;row-gap:6px}

	/* headrow (Titel + Aktionen) wird "aufgelöst": Titel bleibt direkt
	   nach den Meta-Angaben, Aktionen wandern separat ans Karten-Ende
	   (siehe .bh-event-card__actions unten) – auf Mobile macht die
	   direkte Titel→Adresse-Abfolge die Karte schneller erfassbar,
	   die Aktionen sind als abschließende "Fußzeile" klarer erkennbar. */
	.bh-event-card__headrow{display:contents}
	.bh-event-card__title{order:2}

	.bh-event-card__subline{display:contents}
	.bh-event-card__address{
		order:3;display:block;margin-top:4px;
		padding-top:0;border-top:0;border-bottom:0;
		white-space:normal;overflow:visible;text-overflow:clip;
	}
	.bh-event-card__excerpt{order:4;display:block;margin-top:3px;white-space:normal}
	.bh-event-card__subline-sep{display:none}
	.bh-event-card__extra{order:5;margin-top:8px}

	/* Aktionszeile: ans Ende, per Abstand statt Trennlinie abgesetzt
	   (schlichter, weniger "zerstückelt" wirkend). Kompaktere Abstände,
	   aber größere Touch-Ziele (WCAG-Empfehlung min. 44×44px). */
	.bh-event-card__actions{
		order:6;gap:14px;row-gap:6px;margin-top:14px;
	}
	.bh-event-card__share{width:36px;height:36px}
	.bh-event-card__link,.bh-event-card__ical{padding:4px 0}

	.bh-events__toggle-btn{padding:9px 18px}
	.bh-events__search-input{padding:11px 18px}
	.bh-events__sort-select{padding:9px 16px;font-size:.85rem}

	.bh-events__items--grid{gap:18px}
}

/* Marker auf der Karte: Tropfenform (Pin), größer und mit garantiert
   weißem Icon (via Filter) statt kleinem Kreis mit ggf. schwer
   erkennbarer Icon-Eigenfarbe. ------------------------------------- */
.bh-marker-pin{
	display:block;
	width:38px;height:38px;
	border-radius:50% 50% 50% 0;
	transform:rotate(-45deg);
	border:2px solid #fff;
	box-shadow:0 2px 8px rgba(0,0,0,.35);
	transition:transform .12s ease;
}
.leaflet-marker-icon:hover .bh-marker-pin{transform:rotate(-45deg) scale(1.08)}
.bh-marker-pin--vergangen{opacity:.55;filter:grayscale(.5)}
.bh-marker-pin__inner{
	position:absolute;
	top:50%;left:50%;
	transform:translate(-50%,-50%) rotate(45deg);
	width:22px;height:22px;
	display:flex;align-items:center;justify-content:center;
}
.bh-marker-pin__inner svg{
	width:20px;height:20px;
	/* Zwingt jede Icon-Eigenfarbe zu reinem Weiß, unabhängig vom
	   hochgeladenen SVG – garantiert Kontrast auf jeder Markerfarbe. */
	filter:brightness(0) invert(1);
}

/* Cluster-Bubble (Leaflet.markercluster) --------------------------------- */
.bh-cluster{
	display:flex;align-items:center;justify-content:center;
	width:36px;height:36px;border-radius:50%;
	background:var(--bh-accent);color:#fff;
	font-family:var(--bh-font-display,serif);font-size:.95rem;font-weight:600;
	border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* Kategorie-Legende über der Karte --------------------------------------- */
.bh-events__map-legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.bh-events__map-legend[hidden]{display:none}
.bh-legend-chip{
	display:inline-flex;align-items:center;gap:6px;
	background:var(--bh-bg);border:1px solid var(--bh-border);border-radius:999px;
	padding:5px 12px;font-size:.8rem;color:var(--bh-text)!important;cursor:pointer;
	font-family:var(--bh-font-body);transition:opacity .15s ease;
}
.bh-legend-chip[aria-pressed="false"]{opacity:.4}
.bh-legend-chip__dot{width:9px;height:9px;border-radius:50%;background:var(--chip-color,#2c3e33);display:inline-block}

/* Kurzes Hervorheben der Listenkarte nach Marker-Klick ------------------- */
.bh-event-card--highlight{animation:bh-flash 1.6s ease}
@keyframes bh-flash{
	0%{box-shadow:0 0 0 3px var(--bh-accent)}
	80%{box-shadow:0 0 0 3px var(--bh-accent)}
	100%{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
	.bh-event-card--highlight{animation:none;box-shadow:0 0 0 3px var(--bh-accent)}
}

/* Popup: eigenes Layout statt Standard-Leaflet-Sprechblase. Nutzt
   dieselbe Font-Variable wie die Karten (statt eines eigenen,
   hart codierten Font-Stacks) und erzwingt lesbare, dunkle Textfarben
   unabhängig vom Theme. */
.leaflet-popup.bh-popup .leaflet-popup-content-wrapper{
	border-radius:10px;
	box-shadow:0 8px 24px rgba(0,0,0,.18);
	padding:0;
}
.leaflet-popup.bh-popup .leaflet-popup-content{
	margin:0;width:280px !important;
	font-family:var(--bh-font-body,-apple-system,sans-serif);
	color:#1a1b16;
}
.leaflet-popup.bh-popup .leaflet-popup-tip{box-shadow:0 2px 6px rgba(0,0,0,.15)}
.bh-popup-card{display:flex;flex-direction:column}
.bh-popup-card__media{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.bh-popup-card__body{padding:13px 15px;display:flex;flex-direction:column;gap:6px}
.bh-popup-card__date{
	font-family:var(--bh-font-display,serif);
	color:#2c3e33!important;font-size:1rem;font-weight:600;
}
.bh-popup-card__date-sub{display:block;font-family:var(--bh-font-body,sans-serif);font-weight:400;font-size:.8rem;color:#54524a!important;margin-top:1px}
.bh-popup-card__title{margin:0;font-size:1.02rem;font-weight:600;line-height:1.35;color:#1a1b16!important}
.bh-popup-card__meta{font-size:.8rem;color:#54524a!important;display:flex;gap:6px;flex-wrap:wrap}
.bh-popup-card__tag{color:#2c3e33!important;font-weight:600}
.bh-popup-card__address{font-size:.82rem;color:#3a3a34!important;margin:0}
.bh-popup-card__address a{color:inherit!important;text-decoration:none;border-bottom:1px solid transparent}
.bh-popup-card__address a:hover{border-bottom-color:currentColor}
.bh-popup-card__badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.bh-popup-card__badge{font-size:.7rem;padding:2px 9px;background:#e9efe9;color:#2c3e33!important;border-radius:20px}
.bh-popup-card__link{margin-top:5px;font-size:.85rem;color:#2c3e33!important;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start}

/* FAQ: bewusst kein Akkordeon mehr (spart keinen SEO-Vorteil mehr, siehe
   Google-Update Mai 2026 – FAQ-Rich-Snippets sind komplett entfernt),
   stattdessen alle Fragen sofort lesbar, kein Klick nötig. */
.bh-events__faq{margin-top:40px;border-top:1px solid var(--bh-border);padding-top:26px}
.bh-events__faq-title{font-family:var(--bh-font-display);font-size:1.25rem;margin:0 0 20px;font-weight:600;color:var(--bh-text)!important}
.bh-faq-item{padding:16px 0;border-bottom:1px solid var(--bh-border)}
.bh-faq-item:last-child{border-bottom:0;padding-bottom:0}
.bh-faq-item__q{margin:0 0 8px;font-family:var(--bh-font-body);font-size:1rem;font-weight:600;color:var(--bh-text)!important}
.bh-faq-item__a{color:var(--bh-muted)!important;font-size:.92rem;line-height:1.6}
.bh-faq-item__a p{margin:0 0 8px}
.bh-faq-item__a p:last-child{margin-bottom:0}