/* ===========================================================================
   Eventkalender Franken - behutsame Modernisierung der Oberflaeche
   Angelegt am 06.09.2026 aus dem Audit.
   ===========================================================================

   GRUNDSATZ
   Grundfarben und Logos bleiben. Geaendert wird, was messbar stoert:
   fehlende Zustaende, zu kleine Klickflaechen, zu geringer Kontrast,
   uneinheitliche Radien und Abstaende.

   WARUM SO VIELE !important
   Auf dieser Seite kaempfen mehrere CSS-Quellen gegeneinander. Der Block
   #tdw-css-placeholder kommt aus der Datenbank, haengt mit Prioritaet 100000
   in wp_head und enthaelt allein 133 !important. Dazu kommen 47 <style
   scoped>-Bloecke des Page-Builders, die im Body stehen und damit nach allem
   im Head. Ohne !important greift hier nichts zuverlaessig. Das ist keine
   Nachlaessigkeit, sondern die Anpassung an eine vorgefundene Lage - beim
   Aufraeumen jener Quellen kann es wieder verschwinden.

   AUFBAU
   1. Marken-Token
   2. Fokus und Tastaturbedienung
   3. Schaltflaechen
   4. Filter- und Suchleiste des Kalenders
   5. Trefferseite der Suche
   6. Kleinigkeiten
   7. Suchleiste des Kalenders (gehoert zu assets/ekf-suche.js), mit
      Kategorie-Reitern, Raster gleich hoher und ganz klickbarer Karten
      und Knopf "Naechste 7 Tage"; 7k Tageszeilen, "Unsere Empfehlungen"
      und Bilder hervorgehobener Karten
   ------------------------------------------------------------------------ */


/* --- 1. Marken-Token -------------------------------------------------------
   Die Werte stammen aus den Vektordateien, nicht aus dem alten CSS. Dort
   war keine einzige Farbe deckungsgleich mit dem Logo - sie waren nach
   Augenmass nachgetippt worden. Fundstellen:
     Logo_EKF.svg            #e94190  #61809e
     parts/menu-mobile.php   #f39200  #e94190  #a84d97  #a2c617  #009fe3
   -------------------------------------------------------------------------- */
:root {
	--ekf-pink:        #e94190;   /* Markenwert aus Logo_EKF.svg - bleibt */
	/* Weisse Schrift auf dem Markenpink ergibt 3,73:1 und verfehlt die
	   geforderten 4,5:1. Fuer Flaechen MIT weisser Schrift daher ein
	   minimal tieferer Ton derselben Farbe: 4,68:1. Der Farbton bleibt
	   erkennbar gleich, das Markenpink selbst wird nicht angetastet und
	   steht weiter fuer Akzente ohne Text zur Verfuegung. */
	--ekf-pink-text:   #cd397f;
	--ekf-pink-dunkel: #b62a6d;   /* Hover auf pink-text */
	--ekf-lila:        #a84d97;
	--ekf-lila-dunkel: #8d3c7e;
	--ekf-orange:      #f39200;
	--ekf-orange-tief: #8a5300;   /* nur dort, wo weisser Text darauf steht */
	--ekf-blau:        #009fe3;
	--ekf-gruen:       #a2c617;
	--ekf-schiefer:    #61809e;   /* die Wortmarke */

	--ekf-tinte:       #1f2933;
	--ekf-tinte-leise: #5b6673;
	--ekf-linie:       #d9dfe6;
	--ekf-flaeche:     #ffffff;
	--ekf-grund:       #f2f3f4;

	/* Eine Skala statt ueber dreissig Einzelwerte. */
	--ekf-radius:      6px;
	--ekf-radius-gross:10px;

	--ekf-abstand-1:   4px;
	--ekf-abstand-2:   8px;
	--ekf-abstand-3:   16px;
	--ekf-abstand-4:   24px;
	--ekf-abstand-5:   32px;

	/* Mindestgroesse fuer alles, was mit dem Finger getroffen wird. */
	--ekf-tippziel:    44px;

	--ekf-uebergang:   140ms ease;
}


/* --- 2. Fokus und Tastaturbedienung ---------------------------------------
   Im Bestand stehen 19 Regeln  outline: 0  bzw.  outline: none , zwei davon
   direkt auf :focus, und kein einziges :focus-visible. Wer die Seite per
   Tastatur bedient, sah nicht, wo er steht. Der Ring erscheint nur bei
   Tastaturbedienung, stoert Mausnutzer also nicht.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--ekf-lila) !important;
	outline-offset: 2px !important;
	border-radius: var(--ekf-radius);
}

/* Auf dunklen Flaechen braucht der Ring einen hellen Kern, sonst verschwindet er. */
.td-header-wrap a:focus-visible,
#obereleiste button:focus-visible,
#obereleiste input:focus-visible {
	outline-color: #ffffff !important;
	box-shadow: 0 0 0 6px rgba(168, 77, 151, .55) !important;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}


/* --- 3. Schaltflaechen -----------------------------------------------------
   Im Bestand: 17 Varianten, 153 Regeln, keine einzige transition, dreizehn
   Varianten ohne jeden Zustand. Die vier vorhandenen :hover waren wirkungslos
   (setzten denselben Wert oder wurden ueberstimmt). Deshalb hier ein
   gemeinsames Verhalten fuer alle bekannten Klassen.
   -------------------------------------------------------------------------- */
.Zum-Btn,
.Filter-BTN,
.T-Btn,
.ds-btn,
.tribe-button,
.buttonelement,
.buttonelement2,
#familienknopf,
#heuteknopf,
#morgenknopf,
#weekendknopf,
#sucheButton,
.events-community-submit,
.wpcf7-submit,
.ekf-suche__knopf {
	transition:
		background-color var(--ekf-uebergang),
		border-color var(--ekf-uebergang),
		color var(--ekf-uebergang),
		box-shadow var(--ekf-uebergang),
		transform var(--ekf-uebergang) !important;
	cursor: pointer;
}

/* Ein einheitlicher Radius statt sieben verschiedener, darunter das
   asymmetrische  8px 0 0 0  aus der Zeit um 2015. */
.Zum-Btn,
.Filter-BTN,
#familienknopf,
#heuteknopf,
#morgenknopf,
#weekendknopf,
.events-community-submit,
.wpcf7-submit,
.ekf-suche__knopf {
	border-radius: var(--ekf-radius) !important;
}

/* Gedrueckt-Zustand: ein Hauch Bewegung reicht. */
.Zum-Btn:active,
.Filter-BTN:active,
#familienknopf:active,
#heuteknopf:active,
#morgenknopf:active,
#weekendknopf:active,
.events-community-submit:active,
.wpcf7-submit:active,
.ekf-suche__knopf:active {
	transform: translateY(1px);
}

/* Haupt-CTA der Eventkarten */
.Zum-Btn:hover,
.Zum-Btn:focus-visible {
	background-color: var(--ekf-lila-dunkel) !important;
}

/* Der Filter-Knopf war der schwerste Kontrastfehler der Seite:
   Weiss auf #F48E00 ergibt 2,41:1, gefordert sind 4,5:1. Die Markenfarbe
   bleibt exakt erhalten - stattdessen wird der Text dunkel. Das ergibt
   rund 7:1 und sieht zudem ruhiger aus. */
.Filter-BTN {
	color: var(--ekf-tinte) !important;
	font-weight: 700 !important;
}

/* Heute / Morgen / Wochenende stehen auf dem Schieferblau der Wortmarke.
   Weiss darauf ergibt 4,73:1 und ist damit in Ordnung - hier waere dunkler
   Text mit 3,12:1 eine Verschlechterung. Nachgerechnet, nicht geschaetzt. */
#heuteknopf,
#morgenknopf,
#weekendknopf {
	color: #ffffff !important;
	font-weight: 600 !important;
	min-height: var(--ekf-tippziel) !important;   /* waren 40px */
}
#heuteknopf:hover, #heuteknopf:focus-visible,
#morgenknopf:hover, #morgenknopf:focus-visible,
#weekendknopf:hover, #weekendknopf:focus-visible {
	background-color: #41627f !important;
}
.Filter-BTN:hover,
.Filter-BTN:focus-visible {
	background-color: #d98200 !important;
}

/* Pinke Knoepfe */
#familienknopf,
.wpcf7-submit,
.events-community-submit,
.ekf-suche__knopf,
.ekf-leer__link {
	background-color: var(--ekf-pink-text) !important;
}

#familienknopf:hover,
#familienknopf:focus-visible,
.events-community-submit:hover,
.events-community-submit:focus-visible,
.wpcf7-submit:hover,
.wpcf7-submit:focus-visible,
.ekf-suche__knopf:hover,
.ekf-suche__knopf:focus-visible {
	background-color: var(--ekf-pink-dunkel) !important;
}

/* Klickflaechen: im Bestand 30x30 bis 35x35 Pixel. Der Richtwert liegt bei
   44x44. Betroffen waren Suchknopf, Filterknoepfe und die Blaetterpfeile. */
#sucheButton,
#suchePLZButton,
#sucheTagButton,
#sucheOrtButton {
	min-width: var(--ekf-tippziel) !important;
	min-height: var(--ekf-tippziel) !important;
	background-size: 22px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	border-radius: var(--ekf-radius) !important;
}
#sucheButton {
	color: #ffffff !important;
}
/* Der Lupenknopf liegt absolut positioniert im Suchfeld und wurde bisher
   mit  margin-top: 8px  nach unten geschoben - bei 30 Pixel Hoehe fiel das
   nicht auf. Auf 44 Pixel vergroessert ragte er unten heraus. Gemessen:
   Feld 160-204, Knopf 168-212. Ohne den oberen Abstand deckt er sich genau
   mit dem Feld. */
#sucheButton {
	margin-top: 0 !important;
}

#sucheButton:hover,
#sucheButton:focus-visible {
	background-color: rgba(255, 255, 255, .18) !important;
}

.td-next-prev-wrap a,
.page-nav a,
.page-nav span {
	min-width: var(--ekf-tippziel) !important;
	min-height: var(--ekf-tippziel) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: var(--ekf-radius) !important;
	transition: background-color var(--ekf-uebergang), color var(--ekf-uebergang) !important;
}

/* Das Formular schickte man bisher mit einem 125x31 Pixel grossen,
   fast schwarzen Kaestchen ab - die einzige Stelle der Seite in dieser
   Farbe, und die wichtigste Handlung ueberhaupt. */
.wpcf7-submit,
.events-community-submit {
	background-color: var(--ekf-pink) !important;
	color: #ffffff !important;
	border: 0 !important;
	min-height: var(--ekf-tippziel) !important;
	padding: 0 var(--ekf-abstand-4) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: .01em !important;
}


/* --- 4. Filter- und Suchleiste des Kalenders ------------------------------- */

/* Das Suchfeld hatte weder Rahmen noch sichtbaren Fokus. */
#suche {
	min-height: var(--ekf-tippziel) !important;
	border-radius: var(--ekf-radius) !important;
	padding: 0 var(--ekf-abstand-3) !important;
	font-size: 16px !important;   /* unter 16px zoomt iOS beim Antippen hinein */
}

/* Der Zeitraum stand auf dem Handy ueber den Rand hinaus: der Text braucht
   347 Pixel, das Feld ist 330 breit - die Jahreszahl wurde abgeschnitten.
   Etwas kleinere Schrift und weniger Innenabstand loesen das, ohne die
   Beschriftung kuerzen zu muessen. */
@media (max-width: 767px) {
	/* Die Spezifitaet ist Absicht. Auf #daterange wirken 15 verschiedene
	   font-size-Regeln, die meisten mit !important, und sie stehen als
	   Inline-Bloecke des Page-Builders IM BODY - also hinter jeder Datei aus
	   dem Head. Bei gleicher Spezifitaet gewinnt die spaetere Regel; ein
	   blosses #daterange { ... !important } verliert deshalb. Mit
	   html body davor liegt die Spezifitaet hoeher und die Reihenfolge
	   spielt keine Rolle mehr.
	   Gemessen: Der Text braucht bei 14px 345 Pixel, das Feld ist 330 breit -
	   die Jahreszahl wurde abgeschnitten. Bei 12px passt er. */
	html body #daterange,
	html body input#daterange.flatpickr-input {
		font-size: 12px !important;
		padding-left: var(--ekf-abstand-2) !important;
		padding-right: var(--ekf-abstand-2) !important;
		text-overflow: ellipsis;
	}
}

/* Die Filtergruppen liessen sich nur mit der Maus oeffnen: <span onclick>
   ohne tabindex. Das Markup kann dieses Stylesheet nicht aendern, aber
   wenigstens den Zeiger richtig setzen. */
.filterUeberschrift,
.plusMinus,
.removeFilter {
	cursor: pointer;
}
.removeFilter:hover {
	color: var(--ekf-pink-dunkel);
}


/* --- 5. Trefferseite der Suche --------------------------------------------
   Gehoert zu search.php im selben Verzeichnis. Vorher zeigte die Seite bei
   jeder Eingabe nur Ueberschrift und Fusszeile.
   -------------------------------------------------------------------------- */
.ekf-suche {
	padding-block: var(--ekf-abstand-5);
}

.ekf-suche__kopf {
	max-width: 46rem;
	margin-bottom: var(--ekf-abstand-5);
	padding-bottom: var(--ekf-abstand-4);
	border-bottom: 1px solid var(--ekf-linie);
}

.ekf-suche__titel {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	line-height: 1.2;
	margin: 0 0 var(--ekf-abstand-2);
	color: var(--ekf-schiefer);
	text-wrap: balance;
}
.ekf-suche__begriff {
	color: var(--ekf-pink);
}

.ekf-suche__anzahl {
	margin: 0 0 var(--ekf-abstand-4);
	color: var(--ekf-tinte-leise);
	font-size: .95rem;
}

.ekf-suche__label {
	display: block;
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ekf-tinte-leise);
	margin-bottom: var(--ekf-abstand-1);
}

.ekf-suche__zeile {
	display: flex;
	gap: var(--ekf-abstand-2);
	flex-wrap: wrap;
}

.ekf-suche__feld {
	flex: 1 1 16rem;
	min-height: var(--ekf-tippziel);
	padding: 0 var(--ekf-abstand-3);
	font-size: 16px;
	color: var(--ekf-tinte);
	background: var(--ekf-flaeche);
	border: 1px solid var(--ekf-linie);
	border-radius: var(--ekf-radius);
	transition: border-color var(--ekf-uebergang), box-shadow var(--ekf-uebergang);
}
.ekf-suche__feld:hover {
	border-color: var(--ekf-schiefer);
}
.ekf-suche__feld:focus {
	border-color: var(--ekf-lila);
	box-shadow: 0 0 0 3px rgba(168, 77, 151, .18);
	outline: none;
}

.ekf-suche__knopf {
	min-height: var(--ekf-tippziel);
	padding: 0 var(--ekf-abstand-4);
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	background: var(--ekf-pink-text);
	border: 0;
	border-radius: var(--ekf-radius);
}

.ekf-treffer {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ekf-abstand-4);
	max-width: 52rem;
}

.ekf-treffer__eintrag {
	padding-bottom: var(--ekf-abstand-4);
	border-bottom: 1px solid var(--ekf-linie);
}
.ekf-treffer__eintrag:last-child {
	border-bottom: 0;
}

.ekf-treffer__art {
	margin: 0 0 var(--ekf-abstand-1);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ekf-pink);
}

.ekf-treffer__titel {
	margin: 0 0 var(--ekf-abstand-2);
	font-size: 1.2rem;
	line-height: 1.3;
}
.ekf-treffer__titel a {
	color: var(--ekf-schiefer);
	text-decoration: none;
	transition: color var(--ekf-uebergang);
}
.ekf-treffer__titel a:hover,
.ekf-treffer__titel a:focus-visible {
	color: var(--ekf-pink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ekf-treffer__meta {
	margin: 0 0 var(--ekf-abstand-2);
	font-size: .9rem;
	color: var(--ekf-tinte-leise);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ekf-abstand-1) var(--ekf-abstand-3);
}
.ekf-treffer__datum {
	font-weight: 700;
	color: var(--ekf-tinte);
}

.ekf-treffer__text {
	margin: 0;
	max-width: 42rem;
	line-height: 1.6;
	color: var(--ekf-tinte);
}

.ekf-blaettern {
	margin-top: var(--ekf-abstand-5);
}
.ekf-blaettern ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ekf-abstand-2);
	margin: 0;
	padding: 0;
}
.ekf-blaettern a,
.ekf-blaettern span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ekf-tippziel);
	min-height: var(--ekf-tippziel);
	padding: 0 var(--ekf-abstand-2);
	border: 1px solid var(--ekf-linie);
	border-radius: var(--ekf-radius);
	color: var(--ekf-schiefer);
	text-decoration: none;
	transition: background-color var(--ekf-uebergang), border-color var(--ekf-uebergang), color var(--ekf-uebergang);
}
.ekf-blaettern a:hover,
.ekf-blaettern a:focus-visible {
	background: var(--ekf-schiefer);
	border-color: var(--ekf-schiefer);
	color: #ffffff;
}
.ekf-blaettern .current {
	background: var(--ekf-pink-text);
	border-color: var(--ekf-pink-text);
	color: #ffffff;
	font-weight: 700;
}

/* Leerzustand. Vorher gab es dafuer gar nichts - die Seite endete nach der
   Ueberschrift. */
.ekf-leer {
	max-width: 40rem;
	padding: var(--ekf-abstand-5);
	background: var(--ekf-flaeche);
	border: 1px solid var(--ekf-linie);
	border-radius: var(--ekf-radius-gross);
}
.ekf-leer__satz {
	margin: 0 0 var(--ekf-abstand-3);
	font-size: 1.1rem;
	color: var(--ekf-tinte);
}
.ekf-leer__tipps {
	margin: 0 0 var(--ekf-abstand-4);
	padding-left: 1.2em;
	color: var(--ekf-tinte-leise);
	line-height: 1.7;
}
.ekf-leer__weiter {
	margin: 0;
}
.ekf-leer__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--ekf-tippziel);
	padding: 0 var(--ekf-abstand-4);
	background: var(--ekf-pink-text);
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--ekf-radius);
	transition: background-color var(--ekf-uebergang);
}
.ekf-leer__link:hover,
.ekf-leer__link:focus-visible {
	background: var(--ekf-pink-dunkel);
	color: #ffffff;
}


/* --- 6. Kleinigkeiten ------------------------------------------------------ */

/* Bilder sollen den Kasten nie sprengen. */
.ekf-suche img,
.ekf-treffer img {
	max-width: 100%;
	height: auto;
}

/* Titel der Eventkarten brachen mitten im Wort um ("Sonderausstellun g").
   Ursache ist ein hartes Umbruchverhalten. Sinnvolle Trennung statt
   beliebiger. */
/* Kartentitel brachen mitten im Wort um ("Sonderausstellun g"). Ursache
   ist  word-break: break-word , das an beliebiger Stelle trennt. Die Seite
   traegt lang="de", deshalb kann der Browser richtig trennen, sobald man ihn
   laesst. Die Spezifitaet mit html body ist noetig, weil die Regel aus einem
   Inline-Block im Body kommt und sonst gewinnt. */
html body #ver_veranstaltungen .title,
html body #ver_veranstaltungen .title a,
html body .elementTest .title,
html body .elementTest .title a {
	word-break: normal !important;
	overflow-wrap: break-word !important;
	-webkit-hyphens: auto !important;
	hyphens: auto !important;
}


/* --- 7. Suchleiste des Kalenders ------------------------------------------
   Gehoert zu assets/ekf-suche.js (Spezifikation:
   docs/superpowers/specs/2026-10-07-suchleiste-design.md). Das Skript baut
   eine neue Leiste ueber der alten Suche und setzt erst nach erfolgreichem
   Aufbau die Klasse body.ekf-suche-aktiv. Alles, was die ALTE Oberflaeche
   betrifft, haengt deshalb an dieser Klasse - ohne sie (Fehler,
   ?ekf-suche=aus) bleibt die alte Suche unveraendert sichtbar.

   Die Bausteine selbst (.ekf-sl...) kommen weitgehend ohne !important aus.
   Es steht nur dort, wo Regeln der alten Suche (37461.css u. a., viele
   davon selbst mit !important) oder des Themes dieselben Eigenschaften
   setzen: Breiten von Raster und Karten, die Marken in
   #selectedFilterFromSearch, Absaetze und Ueberschriften (das Theme setzt
   Abstaende und Schrift auf jedes p und h2) und die Eingabefelder, die es
   fuer jedes input[type=search] neu rahmt.

   Farben nur aus Abschnitt 1. Abgeleitet und hier benannt:
   -------------------------------------------------------------------------- */
.ekf-sl,
.ekf-sl-mobil,
.ekf-sl-blatt {
	/* Hover auf Schieferblau - derselbe Wert wie bei #heuteknopf in Abschnitt 3 */
	--ekf-sl-schiefer-tief: #41627f;
	/* 10 % --ekf-schiefer auf Weiss: Hover-Flaeche der Chips */
	--ekf-sl-schiefer-hauch: #eff2f5;
	/* 10 % --ekf-pink-text auf Weiss: Flaeche der aktiven Filter. Schrift
	   darauf in --ekf-pink-dunkel (5,2:1); --ekf-pink-text selbst ergaebe
	   auf diesem Grund nur 4,1:1. */
	--ekf-sl-pink-hauch: #faebf2;
	/* --ekf-tinte mit Deckkraft fuer Schatten und Abdunkelung */
	--ekf-sl-schatten: 0 2px 12px rgba(31, 41, 51, .10);
	--ekf-sl-schleier: rgba(31, 41, 51, .45);

	--ekf-sl-schrift: "Rotis-SansSerif-Std-Regular", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ekf-sl-schrift-fett: "Rotis-SansSerif-Std-Bold", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ekf-sl-chip-hoehe: 40px;

	font-family: var(--ekf-sl-schrift);
	font-size: 16px;
	font-weight: normal;
	color: var(--ekf-tinte);
	line-height: 1.3;
}

/* Rotis liegt als getrennte Familien pro Schnitt vor (Regular, Bold,
   ExtraBold). font-weight: 700 auf "Regular" ergaebe einen kuenstlich
   verdickten Schnitt - fett heisst hier deshalb: andere Familie. */
.ekf-sl strong,
.ekf-sl__suchen,
.ekf-sl__haupt,
.ekf-sl__gruppentitel,
.ekf-sl-blatt h2,
.ekf-sl__wo-knopf.hat-wert,
.ekf-sl__badge,
.ekf-sl__alle-filter,
.ekf-sl__einschicken,
.ekf-sl .filteredElement {
	font-family: var(--ekf-sl-schrift-fett) !important;
	font-weight: normal !important;
}

.ekf-sl button,
.ekf-sl input,
.ekf-sl-mobil button,
.ekf-sl-mobil input,
.ekf-sl-blatt button,
.ekf-sl-blatt input {
	/* Bewusst ohne font-size: Die setzt jeder Baustein selbst, und ein
	   "font: inherit" hier wuerde sie wegen der hoeheren Spezifitaet
	   ueberstimmen. */
	font-family: inherit;
	font-weight: normal;
	font-style: normal;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
}

.ekf-sl [hidden],
.ekf-sl-mobil [hidden],
.ekf-sl-blatt[hidden],
.ekf-sl-blatt [hidden] {
	display: none !important;
}

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

.ekf-sl__icon {
	display: inline-flex;
	flex: none;
	color: var(--ekf-schiefer);
}
.ekf-sl__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}


/* 7a. Die alte Oberflaeche weicht - nur bei erfolgreichem Aufbau ---------- */
body.ekf-suche-aktiv #obereleiste,
body.ekf-suche-aktiv #zeile1,
body.ekf-suche-aktiv #zeile2,
body.ekf-suche-aktiv #ver_filter,
body.ekf-suche-aktiv #ver_filterMobile {
	display: none !important;
}

/* Das Raster bekommt die Breite der weggefallenen Seitenleiste. Das alte CSS
   zieht dafuer je nach Breite 346 bis 405 Pixel ab und schiebt das Raster
   50 bis 200 Pixel nach unten (Platz fuer die alte Datumszeile). */
body.ekf-suche-aktiv #ver_veranstaltungenRight {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-top: 0 !important;
}

/* Die Kachel "Weitere 7 Tage anzeigen" am Ende des Rasters ersetzt der
   Knopf unter der Liste (7h). */
body.ekf-suche-aktiv #ver_veranstaltungen > .elementTest {
	display: none !important;
}


/* 7a-2. Raster mit gleich hohen Karten -------------------------------------
   Das alte Raster reiht Inline-Bloecke mit festen Hoehen (450 Pixel, mit
   Bild 600). Karten ohne Bild - etwa alle vom Crawler - stehen dadurch
   neben hoeheren und die Zeilen werden unruhig. Als Grid wird jede Zeile so
   hoch wie ihre hoechste Karte; "Mehr erfahren" sitzt immer unten.
   Spalten wie bisher bei dieser Kartenbreite: drei auf dem Desktop, zwei
   auf dem Tablet, eine auf dem Handy.

   Die Seitenaufteilung der alten Suche setzt an jedem Kind style.display
   ("inline-block" bzw. "none"). Im Grid wird inline-block ohnehin zum
   Block; die Karten selbst brauchen display: flex mit !important - und
   deshalb eine eigene Regel, die "none" wieder durchsetzt (ganz unten). */
body.ekf-suche-aktiv #ver_veranstaltungen {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ekf-abstand-3);
	align-items: stretch;
}
@media (max-width: 1020px) {
	body.ekf-suche-aktiv #ver_veranstaltungen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 599px) {
	body.ekf-suche-aktiv #ver_veranstaltungen {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Alle Kinder fuellen ihre Zelle; Breiten und Raender des alten CSS
   (calc(33% - 15px), 7,5 Pixel links und rechts, 15 unten) entfallen. */
body.ekf-suche-aktiv #ver_veranstaltungen > * {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	vertical-align: top;
}

/* Karten: Hoehe aus dem Inhalt, Spalte von oben nach unten. Das Datum
   bleibt absolut oben rechts (das alte Skript setzt dessen top je Karte). */
body.ekf-suche-aktiv #ver_veranstaltungen > .element {
	display: flex !important;
	flex-direction: column;
	height: auto !important;
	min-height: 380px;
}
body.ekf-suche-aktiv #ver_veranstaltungen > .element > .readMore {
	position: static !important;
	align-self: flex-end;
	margin-top: auto !important;
	padding-top: var(--ekf-abstand-3);
}

/* Die ganze Karte ist klickbar. Der Titel-Link bekommt eine unsichtbare
   Flaeche ueber die ganze Karte ("stretched link"): Es bleibt ein echter
   Link mit demselben Ziel und target - Mittelklick, Tastatur und
   Screenreader verhalten sich wie bisher. Bild, Titel und "Mehr erfahren"
   fuehren ohnehin zum selben Ziel, nichts anderes in der Karte muss
   eigens klickbar bleiben.
   Das alte CSS setzt beim Ueberfahren transform auf jedes Kind der Karte;
   ein transform macht das Kind zum Bezugsrahmen, und die Flaeche schrumpfte
   auf den Titel. Deshalb hier transform: none - auch das Vergroessern der
   Karte entfaellt, an seine Stelle tritt ein kraeftigerer Schatten. */
body.ekf-suche-aktiv #ver_veranstaltungen > .element {
	position: relative !important;
	cursor: pointer;
	transition: box-shadow var(--ekf-uebergang) !important;
}
body.ekf-suche-aktiv #ver_veranstaltungen > .element,
body.ekf-suche-aktiv #ver_veranstaltungen > .element:hover,
body.ekf-suche-aktiv #ver_veranstaltungen > .element:hover > * {
	transform: none !important;
}
body.ekf-suche-aktiv #ver_veranstaltungen > .element .title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
body.ekf-suche-aktiv #ver_veranstaltungen > .element:hover,
body.ekf-suche-aktiv #ver_veranstaltungen > .element:focus-within {
	box-shadow: 0 6px 22px rgba(31, 41, 51, .22) !important;   /* --ekf-tinte */
}
body.ekf-suche-aktiv #ver_veranstaltungen > .element:hover .title a,
body.ekf-suche-aktiv #ver_veranstaltungen > .element:focus-within .title a {
	text-decoration: underline !important;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}
/* Tastatur: Der Fokus-Ring liegt um die ganze Karte statt nur um den
   Titel. Nur wo der Browser :has() kennt - sonst bleibt der Ring am Link. */
@supports selector(:has(a)) {
	body.ekf-suche-aktiv #ver_veranstaltungen > .element:has(.title a:focus-visible) {
		outline: 3px solid var(--ekf-lila);
		outline-offset: 3px;
	}
	body.ekf-suche-aktiv #ver_veranstaltungen > .element .title a:focus-visible {
		outline: none !important;
		box-shadow: none !important;
	}
}

/* Werbekacheln: eine Zelle wie eine Karte, Motiv mittig */
body.ekf-suche-aktiv #ver_veranstaltungen > .kopiekachel,
body.ekf-suche-aktiv #ver_veranstaltungen > .kopiekachel2,
body.ekf-suche-aktiv #ver_veranstaltungen > .kopiekachel3 {
	display: flex !important;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--ekf-flaeche);
}
body.ekf-suche-aktiv #ver_veranstaltungen > .kopiekachel > a,
body.ekf-suche-aktiv #ver_veranstaltungen > .kopiekachel2 > a,
body.ekf-suche-aktiv #ver_veranstaltungen > .kopiekachel3 > a {
	display: block;
	width: 100%;
}

/* Das breite Band und die Handy-Anzeige gehen ueber die ganze Zeile */
body.ekf-suche-aktiv #ver_veranstaltungen > .kopie,
body.ekf-suche-aktiv #ver_veranstaltungen > .mobileWerbung {
	grid-column: 1 / -1;
	display: block !important;
}
body.ekf-suche-aktiv #ver_veranstaltungen > .kopie img,
body.ekf-suche-aktiv #ver_veranstaltungen > .mobileWerbung img {
	display: block;
	width: 100%;
	height: auto;
}
body.ekf-suche-aktiv #ver_veranstaltungen > .mobileWerbung {
	justify-self: center;
	width: 100% !important;
	max-width: 30rem !important;
}

/* Leere Werbeplaetze ohne Motiv (ekf-suche.js setzt die Klasse) und alles,
   was die Seitenaufteilung ausblendet, belegen keine Zelle. Muss nach den
   display-Regeln oben stehen. */
body.ekf-suche-aktiv #ver_veranstaltungen > .ekf-sl-leer,
body.ekf-suche-aktiv #ver_veranstaltungen > [style*="display: none"],
body.ekf-suche-aktiv #ver_veranstaltungen > [style*="display:none"] {
	display: none !important;
}


/* 7b. Leiste (Desktop) ----------------------------------------------------- */
.ekf-sl {
	position: relative;
	/* Ueber den Karten (Aufklapp-Liste "Wo?") und ueber der Ladeschicht
	   #overlay (9999, dieselbe Ebene in .td-fix-index): Waehrend die Liste
	   laedt, bleibt die Leiste bedienbar - es zaehlt ohnehin nur die letzte
	   Abfrage. Vorher sperrte die Ladeschicht etwa "Fertig" im Ortsfenster. */
	z-index: 10000;
	margin: var(--ekf-abstand-2) 0 var(--ekf-abstand-4);
}

.ekf-sl__leiste {
	display: flex;
	align-items: stretch;
	gap: var(--ekf-abstand-1);
	padding: 6px;
	background: var(--ekf-flaeche);
	border: 1px solid var(--ekf-linie);
	border-radius: var(--ekf-radius-gross);
	box-shadow: var(--ekf-sl-schatten);
}

.ekf-sl__was {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
	padding-left: var(--ekf-abstand-3);
}

/* Das Theme rahmt jedes input[type=search] und setzt eine feste Hoehe. */
.ekf-sl .ekf-sl__feld,
.ekf-sl-mobil .ekf-sl__feld,
.ekf-sl-blatt .ekf-sl__feld {
	-webkit-appearance: none;
	appearance: none;
	width: 100% !important;
	height: auto !important;
	min-height: var(--ekf-tippziel) !important;
	margin: 0 !important;
	padding: 0 var(--ekf-abstand-2) !important;
	font-family: var(--ekf-sl-schrift) !important;
	font-size: 18px !important;   /* unter 16px zoomt iOS beim Antippen hinein */
	line-height: 1.2 !important;
	color: var(--ekf-tinte) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--ekf-radius) !important;
	box-shadow: none !important;
}
.ekf-sl .ekf-sl__feld::placeholder,
.ekf-sl-mobil .ekf-sl__feld::placeholder,
.ekf-sl-blatt .ekf-sl__feld::placeholder {
	color: var(--ekf-tinte-leise);
	opacity: 1;
}

.ekf-sl__wo {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	border-left: 1px solid var(--ekf-linie);
	padding-left: var(--ekf-abstand-1);
}

.ekf-sl__wo-knopf {
	display: inline-flex;
	align-items: center;
	gap: var(--ekf-abstand-2);
	min-width: 12rem;
	max-width: 18rem;
	min-height: var(--ekf-tippziel);
	padding: 0 var(--ekf-abstand-3);
	font-size: 18px;
	color: var(--ekf-tinte-leise);
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: var(--ekf-radius);
	cursor: pointer;
	transition: background-color var(--ekf-uebergang), color var(--ekf-uebergang);
}
.ekf-sl__wo-knopf:hover,
.ekf-sl__wo-knopf[aria-expanded="true"] {
	background: var(--ekf-sl-schiefer-hauch);
	color: var(--ekf-tinte);
}
.ekf-sl__wo-knopf.hat-wert {
	color: var(--ekf-tinte);
}
.ekf-sl__wo-wert {
	flex: 1 1 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ekf-sl__wo-knopf[aria-expanded="true"] .ekf-sl__icon:last-child {
	transform: rotate(180deg);
}

.ekf-sl__suchen {
	flex: 0 0 auto;
	min-height: var(--ekf-tippziel);
	padding: 0 var(--ekf-abstand-4);
	font-size: 18px;
	color: #ffffff;
	background: var(--ekf-pink-text);
	border: 0;
	border-radius: var(--ekf-radius);
	cursor: pointer;
	transition: background-color var(--ekf-uebergang);
}
.ekf-sl__suchen:hover,
.ekf-sl__suchen:focus-visible {
	background: var(--ekf-pink-dunkel);
}

/* Aufklapp-Liste "Wo?" */
.ekf-sl__aufklapp {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;                 /* "Wo?" sitzt rechts in der Leiste */
	width: min(28rem, 80vw);
	max-height: min(32rem, 70vh);
	overflow-y: auto;
	padding: var(--ekf-abstand-3);
	background: var(--ekf-flaeche);
	border: 1px solid var(--ekf-linie);
	border-radius: var(--ekf-radius-gross);
	box-shadow: 0 8px 28px rgba(31, 41, 51, .16);
}
.ekf-sl__aufklapp-fuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ekf-abstand-3);
	margin-top: var(--ekf-abstand-3);
	padding-top: var(--ekf-abstand-3);
	border-top: 1px solid var(--ekf-linie);
}
.ekf-sl__klein {
	margin: 0 !important;
	font-size: 15px !important;
	color: var(--ekf-tinte-leise) !important;
}


/* 7c. Kategorie-Reiter, "Alle Filter" und Chips ------------------------------
   Zeile unter der Suchleiste: Kategorien als Reiter mit Symbol (wie die
   Kategorieleisten grosser Portale), rechts "Alle Filter". Die Zeile hat
   ihre Hoehe von Anfang an, auch bevor die Reiter nach dem ersten Laden
   erscheinen - so springt darunter nichts. */
.ekf-sl__kat-zeile {
	display: flex;
	align-items: center;
	gap: var(--ekf-abstand-3);
	min-height: 74px;
	margin-top: var(--ekf-abstand-3);
	border-bottom: 1px solid var(--ekf-linie);
}
.ekf-sl__kat-liste {
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
	display: flex;
	align-items: flex-end;
	gap: var(--ekf-abstand-1);
	overflow: hidden;
	padding: 6px 6px 0;       /* Platz fuer den Fokus-Ring */
}

.ekf-sl-kat {
	flex: none;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 72px;
	margin-bottom: -1px;      /* Unterstrich liegt auf der Linie der Zeile */
	padding: 6px 10px 9px;
	font-size: 15px !important;
	line-height: 1.2;
	color: var(--ekf-tinte-leise);
	white-space: nowrap;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: var(--ekf-radius) var(--ekf-radius) 0 0;
	cursor: pointer;
	transition: color var(--ekf-uebergang), border-color var(--ekf-uebergang);
}
.ekf-sl-kat .ekf-sl__icon {
	color: var(--ekf-schiefer);
}
.ekf-sl-kat .ekf-sl__icon svg {
	width: 24px;
	height: 24px;
}
/* Aktiv: Unterstrich und dunklere Schrift - bewusst kein fetter Schnitt,
   der breitere Text liesse die Nachbarn springen. */
.ekf-sl-kat[aria-pressed="true"] {
	color: var(--ekf-tinte);
	border-bottom-color: var(--ekf-schiefer);
}
.ekf-sl-kat[aria-pressed="true"] .ekf-sl__icon {
	color: var(--ekf-sl-schiefer-tief);
}
@media (hover: hover) {
	.ekf-sl-kat:hover {
		color: var(--ekf-tinte);
		border-bottom-color: var(--ekf-linie);
	}
	.ekf-sl-kat[aria-pressed="true"]:hover {
		border-bottom-color: var(--ekf-sl-schiefer-tief);
	}
}
.ekf-sl-kat.ist-verdeckt {
	display: none;
}

/* "Alle Filter": der eine deutliche Einstieg in alle Filter */
.ekf-sl__alle-filter {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--ekf-tippziel);
	padding: 0 16px;
	font-size: 16px !important;
	color: #ffffff;           /* 4,73:1 auf Schieferblau, siehe Abschnitt 3 */
	white-space: nowrap;
	background: var(--ekf-schiefer);
	border: 1px solid var(--ekf-schiefer);
	border-radius: var(--ekf-radius-gross);
	cursor: pointer;
	transition: background-color var(--ekf-uebergang), border-color var(--ekf-uebergang);
}
.ekf-sl__alle-filter .ekf-sl__icon {
	color: #ffffff;
}
.ekf-sl__alle-filter[aria-expanded="true"] {
	background: var(--ekf-sl-schiefer-tief);
	border-color: var(--ekf-sl-schiefer-tief);
}
@media (hover: hover) {
	.ekf-sl__alle-filter:hover {
		background: var(--ekf-sl-schiefer-tief);
		border-color: var(--ekf-sl-schiefer-tief);
	}
}
/* Auf dem Handy steht ein eigener Knopf vorn in der Chip-Zeile */
.ekf-sl__alle-filter--mobil {
	display: none;
}

.ekf-sl__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	font-size: 14px;
	line-height: 1;
	color: #ffffff;
	background: var(--ekf-pink-text);
	border-radius: 999px;
}
.ekf-sl__badge--hell {
	color: var(--ekf-sl-schiefer-tief);
	background: #ffffff;
}

.ekf-sl__schnell {
	margin-top: var(--ekf-abstand-3);
}
.ekf-sl__schnell-zeile,
.ekf-sl__zeit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ekf-abstand-2);
}

.ekf-sl__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--ekf-sl-chip-hoehe);
	padding: 0 14px;
	font-size: 16px;
	line-height: 1.2;
	color: var(--ekf-tinte) !important;   /* das Theme faerbt Links */
	text-decoration: none !important;
	white-space: nowrap;
	background: var(--ekf-flaeche);
	border: 1px solid var(--ekf-linie);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--ekf-uebergang), border-color var(--ekf-uebergang), color var(--ekf-uebergang);
}
.ekf-sl__chip[aria-pressed="true"],
.ekf-sl__chip.ist-aktiv {
	color: #ffffff !important;   /* 4,73:1 auf Schieferblau, siehe Abschnitt 3 */
	background: var(--ekf-schiefer);
	border-color: var(--ekf-schiefer);
}
.ekf-sl__chip[aria-pressed="true"] .ekf-sl__icon,
.ekf-sl__chip.ist-aktiv .ekf-sl__icon {
	color: #ffffff;
}
/* Nur mit echter Maus: Auf dem Handy bliebe der Hover-Zustand nach dem
   Antippen stehen und saehe aus wie eine Auswahl. */
@media (hover: hover) {
	.ekf-sl__chip:hover {
		background: var(--ekf-sl-schiefer-hauch);
		border-color: var(--ekf-schiefer);
	}
	.ekf-sl__chip[aria-pressed="true"]:hover,
	.ekf-sl__chip.ist-aktiv:hover {
		background: var(--ekf-sl-schiefer-tief);
		border-color: var(--ekf-sl-schiefer-tief);
	}
}

/* Auswahl-Chips in Listen: Haken nur, wenn gewaehlt */
.ekf-sl__chip--wahl .ekf-sl__icon {
	display: none;
}
.ekf-sl__chip--wahl[aria-pressed="true"] .ekf-sl__icon {
	display: inline-flex;
}
.ekf-sl__chip--wahl .ekf-sl__icon svg {
	width: 16px;
	height: 16px;
}

/* "Veranstaltung einschicken": ruhig in Schieferblau. Pink bleibt allein
   "Suchen" vorbehalten. Schrift in --ekf-sl-schiefer-tief (6,4:1), weil
   --ekf-schiefer auf Weiss nur 4,1:1 erreicht. */
.ekf-sl__einschicken {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--ekf-sl-chip-hoehe);
	padding: 0 14px;
	font-size: 16px;
	color: var(--ekf-sl-schiefer-tief) !important;
	text-decoration: none !important;
	white-space: nowrap;
	background: var(--ekf-flaeche);
	border: 1px solid var(--ekf-schiefer);
	border-radius: 999px;
	transition: background-color var(--ekf-uebergang), border-color var(--ekf-uebergang);
}
.ekf-sl__einschicken .ekf-sl__icon {
	color: var(--ekf-schiefer);
}
.ekf-sl__einschicken .ekf-sl__icon svg {
	width: 18px;
	height: 18px;
}
@media (hover: hover) {
	.ekf-sl__einschicken:hover {
		background: var(--ekf-sl-schiefer-hauch);
		border-color: var(--ekf-sl-schiefer-tief);
	}
}
/* In der Ergebniszeile ganz rechts */
.ekf-sl__ergebnis .ekf-sl__einschicken {
	margin-left: auto;
}


/* 7d. Aufklappbereich Filter und Chip-Gruppen ------------------------------- */
.ekf-sl__panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ekf-abstand-4);
	margin-top: var(--ekf-abstand-3);
	padding: var(--ekf-abstand-4);
	background: var(--ekf-flaeche);
	border: 1px solid var(--ekf-linie);
	border-radius: var(--ekf-radius-gross);
	box-shadow: var(--ekf-sl-schatten);
}
@media (min-width: 1100px) {
	.ekf-sl__panel {
		grid-template-columns: 1fr 1fr;
	}
}
.ekf-sl__panel-fuss {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
}

.ekf-sl-blatt .ekf-sl__gruppe + .ekf-sl__gruppe {
	margin-top: var(--ekf-abstand-4);
}
.ekf-sl__gruppentitel {
	margin: 0 0 var(--ekf-abstand-2) !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	color: var(--ekf-sl-schiefer-tief) !important;
}

.ekf-sl__suchfeld {
	display: flex;
	align-items: center;
	max-width: 22rem;
	margin-bottom: var(--ekf-abstand-3);
	padding-left: 12px;
	background: var(--ekf-flaeche);
	border: 1px solid var(--ekf-linie);
	border-radius: var(--ekf-radius);
	transition: border-color var(--ekf-uebergang);
}
.ekf-sl__suchfeld:hover,
.ekf-sl__suchfeld:focus-within {
	border-color: var(--ekf-schiefer);
}
.ekf-sl .ekf-sl__feld--klein,
.ekf-sl-blatt .ekf-sl__feld--klein {
	font-size: 16px !important;
}

.ekf-sl__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ekf-abstand-2);
}
.ekf-sl__hinweis {
	margin: var(--ekf-abstand-2) 0 0 !important;
	font-size: 15px !important;
	color: var(--ekf-tinte-leise) !important;
}

.ekf-sl__knopf-leise {
	min-height: var(--ekf-sl-chip-hoehe);
	padding: 0 var(--ekf-abstand-3);
	font-size: 16px;
	color: var(--ekf-sl-schiefer-tief);
	background: transparent;
	border: 1px solid var(--ekf-linie);
	border-radius: var(--ekf-radius);
	cursor: pointer;
	transition: background-color var(--ekf-uebergang), border-color var(--ekf-uebergang);
}
.ekf-sl__knopf-leise:hover {
	background: var(--ekf-sl-schiefer-hauch);
	border-color: var(--ekf-schiefer);
}


/* 7e. Ergebniszeile und aktive Filter ---------------------------------------- */
.ekf-sl__ergebnis {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ekf-abstand-2) var(--ekf-abstand-3);
	margin-top: var(--ekf-abstand-3);
}
.ekf-sl__status {
	margin: 0 !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
	color: var(--ekf-tinte) !important;
}
.ekf-sl__zeitraum {
	color: var(--ekf-tinte-leise);
	font-size: 16px;
}
.ekf-sl.ist-am-laden .ekf-sl__anzahl {
	color: var(--ekf-tinte-leise);
}

.ekf-sl__zuruecksetzen {
	min-height: var(--ekf-sl-chip-hoehe);
	padding: 0 var(--ekf-abstand-1);
	font-size: 16px;
	color: var(--ekf-sl-schiefer-tief);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.ekf-sl__zuruecksetzen:hover {
	color: var(--ekf-tinte);
}

.ekf-sl__leer {
	max-width: 40rem;
	margin: var(--ekf-abstand-3) 0 0 !important;
	padding: var(--ekf-abstand-3) var(--ekf-abstand-4);
	font-size: 17px !important;
	color: var(--ekf-tinte) !important;
	background: var(--ekf-flaeche);
	border: 1px solid var(--ekf-linie);
	border-radius: var(--ekf-radius-gross);
}

/* Die Marken der alten Suche, umgezogen in die Ergebniszeile. Das alte CSS
   setzt Rahmen, Abstaende, float und ein Vergroessern beim Ueberfahren. */
.ekf-sl #selectedFilterFromSearch {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--ekf-abstand-2);
}
.ekf-sl #selectedFilterFromSearch:empty {
	display: none !important;
}
.ekf-sl .filteredElement {
	display: inline-flex !important;
	align-items: center;
	gap: 2px;
	width: auto !important;
	min-height: 36px;
	margin: 0 !important;
	padding: 0 2px 0 14px !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	color: var(--ekf-pink-dunkel) !important;
	background: var(--ekf-sl-pink-hauch) !important;
	border: 1px solid var(--ekf-pink-text) !important;
	border-radius: 999px !important;
	transform: none !important;
}
.ekf-sl .removeFilter {
	float: none !important;
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 !important;
	font-size: 0 !important;       /* das "x" der alten Suche ... */
	line-height: 1 !important;
	color: var(--ekf-pink-dunkel) !important;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--ekf-uebergang), color var(--ekf-uebergang);
}
/* ... wird ein gezeichnetes Kreuz aus zwei Strichen. Ein Schriftzeichen
   "×" saesse je nach Schrift ausser der Mitte (siehe 7i). */
.ekf-sl .removeFilter::before,
.ekf-sl .removeFilter::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 2px;
	margin: -1px 0 0 -6.5px;
	background: currentColor;
	border-radius: 1px;
	transform: rotate(45deg);
}
.ekf-sl .removeFilter::after {
	transform: rotate(-45deg);
}
.ekf-sl .removeFilter:hover,
.ekf-sl .removeFilter:focus-visible {
	color: #ffffff !important;
	background: var(--ekf-pink-text);
}


/* 7f. Handy (bis 850 px, dieselbe Grenze wie das alte CSS) ------------------- */
.ekf-sl-mobil {
	display: none;
}

@media (max-width: 850px) {
	.ekf-sl,
	.ekf-sl-mobil,
	.ekf-sl-blatt {
		--ekf-sl-chip-hoehe: var(--ekf-tippziel);
	}

	/* position: sticky braucht Vorfahren ohne overflow: hidden. Das Theme
	   setzt es auf #td-outer-wrap; clip schneidet genauso ab, macht das
	   Element aber nicht zum Scrollbereich - die Leiste kann kleben.
	   Browser ohne clip (Safari vor 16) behalten hidden; dort rollt die
	   Leiste einfach mit. */
	body.ekf-suche-aktiv #td-outer-wrap {
		overflow: clip !important;
	}

	.ekf-sl-mobil {
		position: sticky;
		top: 0;
		z-index: 10001;           /* ueber der Leiste (10000), die darunter durchrollt */
		display: flex;
		align-items: center;
		gap: var(--ekf-abstand-2);
		padding: var(--ekf-abstand-2) 0;
		background: var(--ekf-grund);
		/* Der Grund reicht ueber den Seitenrand hinaus, damit darunter
		   durchrollende Karten nicht seitlich hervorschauen. */
		box-shadow: 0 0 0 100vmax var(--ekf-grund);
		clip-path: inset(0 -100vmax);
	}
	.ekf-sl-mobil .ekf-sl__was {
		padding-left: 0;
		background: var(--ekf-flaeche);
		border: 1px solid var(--ekf-linie);
		border-radius: var(--ekf-radius-gross);
	}
	.ekf-sl-mobil .ekf-sl__was:focus-within {
		border-color: var(--ekf-schiefer);
	}
	.ekf-sl-mobil__los {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: var(--ekf-tippziel);
		height: var(--ekf-tippziel);
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: var(--ekf-radius);
		cursor: pointer;
	}
	.ekf-sl-mobil .ekf-sl__feld {
		padding-left: 0 !important;
	}

	.ekf-sl {
		margin-top: 0;
	}
	/* Auf dem Handy keine Kategorie-Zeile - die Kategorien stehen im Blatt.
	   Der Filterknopf rueckt vorn in die Chip-Zeile. */
	.ekf-sl .ekf-sl__leiste,
	.ekf-sl .ekf-sl__kat-zeile,
	.ekf-sl .ekf-sl__panel {
		display: none !important;
	}
	.ekf-sl .ekf-sl__alle-filter--mobil {
		display: inline-flex;
	}
	.ekf-sl__schnell {
		margin-top: var(--ekf-abstand-1);
	}
	/* Filterknopf und Schnellfilter waagerecht scrollbar statt umbrechend.
	   Innenabstand, damit der Fokus-Ring nicht abgeschnitten wird. */
	.ekf-sl__schnell-zeile {
		flex-wrap: nowrap;
		width: auto;
		margin: 0 -6px;
		padding: 6px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.ekf-sl__zeit {
		flex-wrap: nowrap;
	}
	/* Einschicken: in der Ergebniszeile klein ans Ende */
	.ekf-sl__ergebnis .ekf-sl__einschicken {
		padding: 0 12px;
		font-size: 15px !important;
	}
	.ekf-sl__schnell-zeile::-webkit-scrollbar {
		display: none;
	}
	.ekf-sl__chip {
		flex: none;
	}
	.ekf-sl__status {
		font-size: 17px !important;
	}
	.ekf-sl .filteredElement {
		min-height: var(--ekf-tippziel);
	}
	.ekf-sl .removeFilter {
		width: var(--ekf-tippziel);
		height: var(--ekf-tippziel);
	}
}
@media (max-width: 599px) {
	/* Schmal: Trefferzahl allein in der ersten Zeile, der Rest darunter */
	.ekf-sl__status {
		width: 100%;
	}
	.ekf-sl__ergebnis .ekf-sl__einschicken {
		margin-left: 0;
	}
}


/* 7g. Blatt von unten (Handy) ------------------------------------------------ */
html.ekf-sl-gesperrt,
html.ekf-sl-gesperrt body {
	overflow: hidden !important;
}

.ekf-sl-blatt {
	position: fixed;
	inset: 0;
	z-index: 10000;            /* ueber dem schwebenden Knopf (9999) */
}
.ekf-sl-blatt__schleier {
	position: absolute;
	inset: 0;
	background: var(--ekf-sl-schleier);
	opacity: 0;
	transition: opacity 200ms ease;
}
.ekf-sl-blatt__flaeche {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-height: 88vh;
	max-height: 88dvh;
	background: var(--ekf-flaeche);
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -8px 28px rgba(31, 41, 51, .18);
	transform: translateY(100%);
	transition: transform 220ms ease;
}
.ekf-sl-blatt.ist-offen .ekf-sl-blatt__schleier {
	opacity: 1;
}
.ekf-sl-blatt.ist-offen .ekf-sl-blatt__flaeche {
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.ekf-sl-blatt__schleier,
	.ekf-sl-blatt__flaeche {
		transition: none;
	}
}

.ekf-sl-blatt__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ekf-abstand-3);
	padding: var(--ekf-abstand-2) var(--ekf-abstand-2) var(--ekf-abstand-2) var(--ekf-abstand-3);
	border-bottom: 1px solid var(--ekf-linie);
}
.ekf-sl-blatt h2 {
	margin: 0 !important;
	font-size: 20px !important;
	line-height: 1.2 !important;
	color: var(--ekf-tinte) !important;
}
.ekf-sl-blatt__zu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ekf-tippziel);
	height: var(--ekf-tippziel);
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--ekf-radius);
	cursor: pointer;
}
.ekf-sl-blatt__zu .ekf-sl__icon {
	color: var(--ekf-tinte);
}
.ekf-sl-blatt__inhalt {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--ekf-abstand-3);
}
.ekf-sl-blatt .ekf-sl__suchfeld {
	max-width: none;
}
.ekf-sl__einschicken--blatt {
	margin-top: var(--ekf-abstand-4);
}
.ekf-sl-blatt__fuss {
	display: flex;
	gap: var(--ekf-abstand-2);
	padding: var(--ekf-abstand-2) var(--ekf-abstand-3);
	padding-bottom: calc(var(--ekf-abstand-2) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--ekf-linie);
}
/* Nur auf der Vorschau: Platz fuer deren Hinweisbalken am unteren Rand */
.ekf-sl-blatt.mit-vorschau-balken .ekf-sl-blatt__fuss {
	padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
.ekf-sl-blatt__fuss button {
	padding: 0 12px;
	white-space: nowrap;
}
@media (max-width: 359px) {
	.ekf-sl-blatt__fuss button {
		white-space: normal;
	}
}
.ekf-sl__haupt {
	flex: 1 1 auto;
	min-height: var(--ekf-tippziel);
	padding: 0 var(--ekf-abstand-3);
	font-size: 16px;
	color: #ffffff;
	background: var(--ekf-pink-text);
	border: 0;
	border-radius: var(--ekf-radius);
	cursor: pointer;
	transition: background-color var(--ekf-uebergang);
}
.ekf-sl__haupt:hover,
.ekf-sl__haupt:focus-visible {
	background: var(--ekf-pink-dunkel);
}


/* 7h. "Naechste 7 Tage" unter der Liste ------------------------------------
   Zweitrangiger Knopf: weiss mit schieferblauem Rahmen. Die Schrift in
   --ekf-sl-schiefer-tief, weil --ekf-schiefer auf Weiss nur 4,1:1 erreicht. */
.ekf-sl-weiter {
	--ekf-sl-schiefer-tief: #41627f;     /* wie oben in Abschnitt 7 */
	--ekf-sl-schiefer-hauch: #eff2f5;
	display: flex;
	justify-content: center;
	margin: var(--ekf-abstand-4) 0 var(--ekf-abstand-5);
}
.ekf-sl-weiter[hidden] {
	display: none !important;
}
.ekf-sl-weiter__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	min-height: 48px;
	padding: 8px var(--ekf-abstand-4);
	font-family: "Rotis-SansSerif-Std-Bold", "Segoe UI", system-ui, -apple-system, sans-serif;
	font-weight: normal;
	font-size: 18px;
	line-height: 1.25;
	color: var(--ekf-sl-schiefer-tief);
	text-align: center;
	letter-spacing: normal;
	text-transform: none;
	background: var(--ekf-flaeche);
	border: 2px solid var(--ekf-schiefer);
	border-radius: var(--ekf-radius);
	cursor: pointer;
	transition: background-color var(--ekf-uebergang), border-color var(--ekf-uebergang);
}
.ekf-sl-weiter__knopf .ekf-sl__icon {
	display: inline-flex;
	color: var(--ekf-schiefer);
}
.ekf-sl-weiter__knopf .ekf-sl__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}
.ekf-sl-weiter__wann {
	font-family: "Rotis-SansSerif-Std-Regular", "Segoe UI", system-ui, -apple-system, sans-serif;
	color: var(--ekf-tinte);
}
@media (hover: hover) {
	.ekf-sl-weiter__knopf:hover {
		background: var(--ekf-sl-schiefer-hauch);
		border-color: var(--ekf-sl-schiefer-tief);
	}
}
.ekf-sl-weiter__punkt[hidden] {
	display: none;
}
@media (max-width: 850px) {
	.ekf-sl-weiter__knopf {
		width: 100%;
		min-height: var(--ekf-tippziel);
	}
	/* Schmal: Zeitraum immer in eine eigene Zeile, ohne Trennpunkt */
	.ekf-sl-weiter__punkt {
		display: none;
	}
	.ekf-sl-weiter__wann {
		flex-basis: 100%;
	}
}

/* Seitenzaehlung unter dem Raster: Die alten Knoepfe (setPagination im
   Skript 39958) standen in einer Serifenschrift. Das alte CSS gibt
   #ver_paginator die Schrift "Rotis-SansSerif-Std-Bold-Std-Bold" - einen
   Namen, den es nicht gibt; "inherit" erbte genau diesen Tippfehler (bemerkt
   18.10.2026). Deshalb die Hausschrift ausdruecklich. */
body.ekf-suche-aktiv #ver_paginator,
body.ekf-suche-aktiv #ver_paginator button {
	font-family: "Rotis-SansSerif-Std-Bold", "Segoe UI", system-ui, sans-serif !important;
}


/* --- 7i. Schrift senkrecht mittig in Knoepfen und Chips --------------------
   Rotis hat ungleiche Ober- und Unterlaengen: Ascent 0,69 em, Descent
   0,31 em, Versalhoehe 0,69 em. Der Browser mittelt den ganzen
   Schriftkasten, die Buchstaben sassen dadurch um (0,69 - 0,31 - 0,69) / 2
   = -0,155 em zu hoch - bei 16 px knapp 3 Pixel. Gemessen am 07.10.2026 im
   Browser: Lage der Grundlinie aus dem Textlauf (Range) und den
   Schriftmassen (Canvas), verglichen mit der Mitte des Knopfs.

   Abhilfe: Jede Beschriftung steckt in einem eigenen span (.ekf-sl__text).
   text-box schneidet es auf Versalhoehe bis Grundlinie zu; Flexbox
   zentriert dann genau die Buchstaben. Wo der Browser text-box nicht kennt
   (Firefox, Safari vor 18.2), gleicht eine Verschiebung um denselben Wert
   aus. Symbole sind 20 Pixel grosse Kaesten und werden von Flexbox ohnehin
   mittig gesetzt. */
.ekf-sl .ekf-sl__text,
.ekf-sl-mobil .ekf-sl__text,
.ekf-sl-blatt .ekf-sl__text,
.ekf-sl-weiter .ekf-sl__text,
.ekf-sammlung .ekf-sl__text,
.ekf-sl .filteredElement > span:first-child {
	display: block;
	line-height: 1 !important;
	text-box: trim-both cap alphabetic;
}
@supports not (text-box: trim-both cap alphabetic) {
	.ekf-sl .ekf-sl__text,
	.ekf-sl-mobil .ekf-sl__text,
	.ekf-sl-blatt .ekf-sl__text,
	.ekf-sl-weiter .ekf-sl__text,
	.ekf-sammlung .ekf-sl__text,
	.ekf-sl .filteredElement > span:first-child {
		position: relative;
		top: .155em;
	}
}

/* Knoepfe, die bisher nicht als Flexbox angelegt waren */
.ekf-sl__suchen,
.ekf-sl__knopf-leise,
.ekf-sl__zuruecksetzen,
.ekf-sl__haupt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Der Ort im Knopf "Wo?" wird mit ... gekuerzt (overflow: hidden). Nach dem
   Zuschnitt schnitte das auch die Unterlaengen ab (g, p) - deshalb Raum
   nach oben und unten, der die Hoehe nicht veraendert. */
.ekf-sl .ekf-sl__wo-wert {
	padding-block: .3em;
	margin-block: -.3em;
}

/* Kategorie-Reiter: Symbol und Name mit festem Abstand untereinander */
.ekf-sl-kat {
	gap: 7px;
}

/* "Naechste 7 Tage": auf dem Handy zwei Zeilen - nach dem Zuschnitt
   braucht es mehr Zeilenabstand */
.ekf-sl-weiter__knopf {
	row-gap: 9px;
}

/* Eingabefelder: Dort greift text-box nicht. Derselbe Ausgleich als
   ungleicher Innenabstand - der Inhalt rueckt um 0,155 em nach unten. */
.ekf-sl .ekf-sl__feld,
.ekf-sl-mobil .ekf-sl__feld,
.ekf-sl-blatt .ekf-sl__feld {
	box-sizing: border-box !important;
	padding-top: .31em !important;
	padding-bottom: 0 !important;
}

/* Familie: Link nach frankenkids.de, kleiner Pfeil nach draussen */
.ekf-sl__chip--extern .ekf-sl__icon:last-child svg {
	width: 14px;
	height: 14px;
}
.ekf-sl__chip--extern .ekf-sl__icon:last-child {
	color: var(--ekf-tinte-leise);
}


/* --- 7j. Sammelkarten -------------------------------------------------------
   Beitraege mit einer Sammlung von Tipps ("Ausgeh-Tipps fuer Franken"),
   erkannt in ekf-suche.js. Die Karte bleibt eine Zelle im Raster, wird aber
   als Stapel gezeichnet, zeigt statt Kategorie und Datumskasten "n Tipps ·
   bis ...", die naechsten drei Tipps und einen Knopf zur ganzen Liste. */
.ekf-sammlung {
	--ekf-sl-schiefer-tief: #41627f;     /* wie oben in Abschnitt 7 */
	--ekf-sl-schiefer-hauch: #eff2f5;
	--ekf-sl-pink-hauch: #faebf2;
	--ekf-sl-stapel:
		0 12px 0 -6px var(--ekf-flaeche),
		0 12px 0 -5px var(--ekf-linie),
		0 22px 0 -11px var(--ekf-grund),
		0 22px 0 -10px var(--ekf-linie);
}

/* Zwei versetzte Lagen hinter der Karte. Als Schatten gezeichnet statt als
   Pseudo-Elemente: Schatten liegen immer hinter der Karte, unabhaengig von
   den Ebenen der Seite, und ::after der Karte bleibt frei. Sie ragen 7 und
   12 Pixel unter die Karte - weniger als der Zeilenabstand des Rasters. */
body.ekf-suche-aktiv #ver_veranstaltungen > .element.ekf-sammlung {
	box-shadow: 0 2px 10px rgba(31, 41, 51, .10), var(--ekf-sl-stapel) !important;
}
body.ekf-suche-aktiv #ver_veranstaltungen > .element.ekf-sammlung:hover,
body.ekf-suche-aktiv #ver_veranstaltungen > .element.ekf-sammlung:focus-within {
	box-shadow: 0 6px 22px rgba(31, 41, 51, .22), var(--ekf-sl-stapel) !important;
}

/* Was bei einer Sammlung in die Irre fuehrt oder ersetzt wird */
body.ekf-suche-aktiv #ver_veranstaltungen > .ekf-sammlung > .category,
body.ekf-suche-aktiv #ver_veranstaltungen > .ekf-sammlung > .leftrightcornerDate,
body.ekf-suche-aktiv #ver_veranstaltungen > .ekf-sammlung > .tipp,
body.ekf-suche-aktiv #ver_veranstaltungen > .ekf-sammlung > .times,
body.ekf-suche-aktiv #ver_veranstaltungen > .ekf-sammlung > .veranstaltungort,
body.ekf-suche-aktiv #ver_veranstaltungen > .ekf-sammlung > .readMore {
	display: none !important;
}
/* Bild flacher, Titel ohne Platz fuer den Datumskasten */
body.ekf-suche-aktiv #ver_veranstaltungen > .ekf-sammlung .eventPicture {
	height: 150px !important;
}
body.ekf-suche-aktiv #ver_veranstaltungen > .ekf-sammlung > .title {
	width: auto !important;
	margin-top: 12px !important;
	margin-bottom: 0 !important;
	padding-right: 25px !important;
}

/* "4 Tipps · bis 15. Nov" - wie die aktiven Filter in der Ergebniszeile */
body.ekf-suche-aktiv #ver_veranstaltungen .ekf-sammlung__marke {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 30px;
	margin: 18px 25px 0 !important;
	padding: 0 12px;
	font-family: "Rotis-SansSerif-Std-Bold", "Segoe UI", system-ui, sans-serif;
	font-size: 13px !important;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ekf-pink-dunkel);
	background: var(--ekf-sl-pink-hauch);
	border: 1px solid var(--ekf-pink-text);
	border-radius: 999px;
}
.ekf-sammlung__marke .ekf-sl__icon {
	color: currentColor;
}
.ekf-sammlung__marke .ekf-sl__icon svg {
	width: 16px;
	height: 16px;
}

/* Die naechsten Tipps */
body.ekf-suche-aktiv #ver_veranstaltungen .ekf-sammlung__liste {
	display: grid;
	gap: 2px;
	/* unten Abstand zum Knopf, der mit margin-top: auto nach unten rueckt */
	margin: 14px 17px 18px !important;
	padding: 0 !important;
	list-style: none !important;
	line-height: 1.25;
}
body.ekf-suche-aktiv #ver_veranstaltungen .ekf-sammlung__liste > li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
body.ekf-suche-aktiv #ver_veranstaltungen .ekf-sammlung__liste > li::before {
	content: none !important;
}
.ekf-sammlung__tipp {
	/* ueber der Klickflaeche der ganzen Karte (z-index 1), damit der Tipp
	   sein eigenes Ziel oeffnet */
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 8px;
	color: inherit !important;
	text-decoration: none !important;
	border-radius: var(--ekf-radius);
	transition: background-color var(--ekf-uebergang);
}
@media (hover: hover) {
	a.ekf-sammlung__tipp:hover {
		background: var(--ekf-sl-schiefer-hauch);
	}
	a.ekf-sammlung__tipp:hover .ekf-sammlung__titel {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}
.ekf-sammlung__tag {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	font-family: "Rotis-SansSerif-Std-Regular", "Segoe UI", system-ui, sans-serif;
	color: var(--ekf-sl-schiefer-tief);
	background: var(--ekf-sl-schiefer-hauch);
	border-radius: var(--ekf-radius);
}
.ekf-sammlung__tag-zahl,
.ekf-sammlung__tag-monat {
	display: block;
	line-height: 1;
	text-box: trim-both cap alphabetic;
}
.ekf-sammlung__tag-zahl {
	font-family: "Rotis-SansSerif-Std-Bold", "Segoe UI", system-ui, sans-serif;
	font-size: 18px;
}
.ekf-sammlung__tag-monat {
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.ekf-sammlung__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.ekf-sammlung__titel,
.ekf-sammlung__meta {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ekf-sammlung__titel {
	-webkit-line-clamp: 2;
	font-family: "Rotis-SansSerif-Std-Bold", "Segoe UI", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.25;
	color: var(--ekf-sl-schiefer-tief);
}
.ekf-sammlung__meta {
	-webkit-line-clamp: 2;
	font-family: "Rotis-SansSerif-Std-Regular", "Segoe UI", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.3;
	color: var(--ekf-tinte-leise);
}

/* Gerade keine kommenden Tipps */
body.ekf-suche-aktiv #ver_veranstaltungen .ekf-sammlung__leer {
	margin: 14px 25px 18px !important;
	font-family: "Rotis-SansSerif-Std-Regular", "Segoe UI", system-ui, sans-serif;
	font-size: 15px !important;
	line-height: 1.35;
	color: var(--ekf-tinte-leise);
}

/* Knopf zur ganzen Liste - ersetzt "Mehr erfahren" */
body.ekf-suche-aktiv #ver_veranstaltungen .ekf-sammlung__cta {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--ekf-tippziel);
	margin: auto 25px 22px !important;
	padding: 0 20px;
	font-family: "Rotis-SansSerif-Std-Bold", "Segoe UI", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1;
	color: #ffffff !important;        /* 4,73:1 auf Schieferblau */
	text-decoration: none !important;
	background: var(--ekf-schiefer);
	border-radius: 999px;
	transition: background-color var(--ekf-uebergang);
}
.ekf-sammlung__cta .ekf-sl__icon {
	color: #ffffff;
}
.ekf-sammlung__cta .ekf-sl__icon svg {
	width: 18px;
	height: 18px;
}
@media (hover: hover) {
	body.ekf-suche-aktiv #ver_veranstaltungen .ekf-sammlung__cta:hover {
		background: var(--ekf-sl-schiefer-tief);
	}
}


/* --- 7k. Tageszeilen, "Unsere Empfehlungen", Bilder ------------------------
   Rueckmeldung der Kundin (10/2026), Gegenstueck in ekf-suche.js
   ("Tage trennen und Unsere Empfehlungen"). */

/* Vor jedem neuen Tag eine Zeile ueber die ganze Breite - damit beginnt der
   Tag in einer neuen Reihe. Die Seitenaufteilung blendet auch die Zeilen
   per style.display aus; die Regel unten setzt "none" wieder durch. */
body.ekf-suche-aktiv #ver_veranstaltungen > .ekf-tag {
	grid-column: 1 / -1;
	display: flex !important;
	align-items: baseline;
	gap: 8px;
	margin: var(--ekf-abstand-4) 0 0 !important;
	padding: 0 2px 10px;
	font-family: "Rotis-SansSerif-Std-Bold", "Segoe UI", system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #41627f;                       /* Schieferblau, tief: 5,8:1 auf dem Grund */
	border-bottom: 3px solid #b3cbd3;     /* die Farbe der Datumskaesten */
}
body.ekf-suche-aktiv #ver_veranstaltungen > .ekf-tag[style*="display: none"],
body.ekf-suche-aktiv #ver_veranstaltungen > .ekf-tag[style*="display:none"] {
	display: none !important;
}
.ekf-tag__vorsatz {
	color: var(--ekf-pink-dunkel);          /* 5,3:1 auf dem Grund; pink-text reicht dort nicht */
}
.ekf-tag__punkt {
	color: var(--ekf-tinte-leise);
}

/* Hervorgehobene Karten mit Bild: pinker statt blauer Rahmen (das alte
   Skript setzt "3px solid #7491ae" als style an der Karte). */
body.ekf-suche-aktiv #ver_veranstaltungen > .element.elementWithPicture {
	border-color: var(--ekf-pink) !important;
}

/* Der Schriftzug "Unsere Empfehlungen" nur auf der Startseite und nur,
   solange hervorgehobene Karten mit Bild zu sehen sind. */
body.ekf-suche-aktiv #unsereempfehlungen {
	display: none !important;
}
body.ekf-suche-aktiv.home #ver_veranstaltungenRight.ekf-mit-empfehlungen > #unsereempfehlungen {
	display: block !important;
}

/* Bilder hervorgehobener Karten ganz zeigen. Das alte CSS schnitt sie auf
   231 Pixel Hoehe zu (object-fit: cover, Mitte); bei der Anzeige
   "Handmade & Kreativmarkt" fehlte dem Schriftzug "Herzlmarkt" oben der
   Rand. Jetzt 270 Pixel - ein Bild im Format 3:2 fuellt bei drei Spalten
   die ganze Breite - und contain: Andere Formate stehen vollstaendig in der
   Flaeche, mit freiem Rand daneben. Der Datumskasten sitzt unter dem Bild;
   sein top setzt das alte Skript je Karte auf 231 + 2,5 Pixel. Die
   Sammelkarte behaelt ihr flaches Bild (7j). */
body.ekf-suche-aktiv #ver_veranstaltungen > .elementWithPicture:not(.ekf-sammlung) .eventPicture {
	height: 270px !important;
	object-fit: contain !important;
}
body.ekf-suche-aktiv #ver_veranstaltungen > .elementWithPicture:not(.ekf-sammlung) > .leftrightcornerDate {
	top: 272.5px !important;
}