/*
 * Kanu & Outdoor Branchenbuch.
 *
 * Farben und Zurückhaltung wie auf der Dealseite und im
 * Packlisten-Generator: Türkis markiert Zugehörigkeit, das Dunkelblaugrün
 * trägt Schrift und Struktur, das Signalorange bleibt Handlungen
 * vorbehalten. Anders als dort werden die Werte hier zuerst aus der
 * Kadence-Palette des Themes bezogen und erst ersatzweise fest gesetzt:
 * Wird die Palette im Customizer geändert, geht das Branchenbuch mit,
 * statt danebenzustehen.
 *
 * Die Kategoriefarben der Karte sind die einzige Ausnahme von der
 * Zurückhaltung. Sie sind keine Zierde, sondern die einzige Auskunft, die
 * eine Nadel auf einer Karte geben kann – und sie stehen deshalb auch in
 * der Filterleiste, damit der Zusammenhang ohne Legende erkennbar ist.
 */

.kzf-bb {
	/* Markenpalette, bevorzugt aus dem Theme */
	--kzf-tuerkis: var(--global-palette1, #6ac3c8);
	--kzf-tuerkis-tief: var(--global-palette2, #3d9ba1);
	--kzf-dunkel: var(--global-palette3, #1a2f33);
	--kzf-signal: var(--global-palette-btn-bg, #ff7043);
	--kzf-signal-tief: #e85a2c;
	--kzf-grau: var(--global-palette8, #f3f4f6);
	--kzf-gruen: #16a34a;
	--kzf-rot: #dc2626;
	--kzf-blau: #e0f2fe;

	/* Abgeleitete Werte */
	--kzf-linie: #e3e7e9;
	--kzf-gedaempft: var(--global-palette5, #5f7276);
	--kzf-flaeche: var(--global-palette9, #ffffff);
	--kzf-radius: 14px;
	--kzf-radius-klein: 8px;

	/* Schriften aus dem Theme, mit den Hausschriften als Rückfall */
	--kzf-schrift-titel: var(--global-heading-font-family, 'Montserrat', sans-serif);
	--kzf-schrift-text: var(--global-body-font-family, 'Inter', sans-serif);

	display: block;
	margin: 2.5rem 0 3rem;
	color: var(--kzf-dunkel);
	font-family: var(--kzf-schrift-text);
}

/*
 * Ausgeblendetes bleibt ausgeblendet.
 *
 * Der Browser blendet [hidden] von sich aus aus – aber mit einer Regel aus
 * seinem eigenen Stylesheet, und die verliert gegen jede display-Angabe von
 * hier. Ohne diese Zeile blieben ausgefilterte Karten stehen, weil
 * .kzf-bb__karte auf display:grid steht: Die Suche zeigte dann die richtige
 * Trefferzahl an und darunter unverändert alle Einträge.
 */
.kzf-bb [hidden] {
	display: none !important;
}

/* Kopf ------------------------------------------------------------- */

.kzf-bb__kopf {
	margin-bottom: 1.75rem;
}

.kzf-bb__titel {
	margin: 0 0 0.6rem;
	font-family: var(--kzf-schrift-titel);
	font-size: clamp(1.75rem, 3.5vw, 2.4rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--kzf-dunkel);
}

/* Das Orange betont ein einzelnes Glied – den Namen der Sache – und
   faerbt nie die ganze Zeile. */
.kzf-bb__titel-akzent {
	color: var(--kzf-signal);
}

.kzf-bb__intro {
	max-width: 68ch;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--kzf-gedaempft);
}

.kzf-bb__leer {
	padding: 2rem;
	border: 1px dashed var(--kzf-linie);
	border-radius: var(--kzf-radius);
	background: var(--kzf-grau);
	line-height: 1.6;
}

/* Suche ------------------------------------------------------------ */

.kzf-bb__suchleiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.kzf-bb__suchfeld {
	flex: 1 1 22rem;
	display: block;
}

.kzf-bb__suchfeld input {
	width: 100%;
	padding: 0.85rem 1.2rem;
	border: 2px solid var(--kzf-linie);
	border-radius: 30px;
	background: var(--kzf-flaeche);
	font-family: inherit;
	font-size: 1.05rem;
	color: var(--kzf-dunkel);
	transition: border-color 0.15s ease;
}

.kzf-bb__suchfeld input:focus {
	outline: none;
	border-color: var(--kzf-tuerkis);
}

.kzf-bb__suchfeld input::placeholder {
	color: var(--kzf-gedaempft);
	opacity: 0.8;
}

.kzf-bb__treffer {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--kzf-gedaempft);
	white-space: nowrap;
}

/* Filter ----------------------------------------------------------- */

.kzf-bb__filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1.75rem;
}

.kzf-bb__pillen,
.kzf-bb__auswahlen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/*
 * Filter sind Bedienelemente und muessen als solche erkennbar sein: eine
 * vollrunde Pille mit Kontur, der gewaehlte Zustand als tuerkise Flaeche.
 * Das Signalorange bleibt hier draussen – es gehoert an die
 * Handlungsaufforderung, nicht an eine Auswahl.
 */
.kzf-bb__pille {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 1rem;
	border: 1px solid var(--kzf-linie);
	border-radius: 30px;
	background: var(--kzf-flaeche);
	font-family: inherit;
	font-size: 0.94rem;
	font-weight: 400;
	color: var(--kzf-dunkel);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.kzf-bb__pille:hover {
	border-color: var(--kzf-tuerkis);
}

.kzf-bb__pille--an {
	border-color: var(--kzf-tuerkis);
	background: var(--kzf-tuerkis);
	color: var(--kzf-dunkel);
}

/* Der Punkt traegt die Kategoriefarbe der Karte – so braucht die Karte
   keine eigene Legende. */
.kzf-bb__punkt {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--kzf-bb-farbe, var(--kzf-tuerkis));
}

.kzf-bb__pille-zahl {
	font-size: 0.8rem;
	color: var(--kzf-gedaempft);
}

.kzf-bb__pille--an .kzf-bb__pille-zahl {
	color: var(--kzf-dunkel);
	opacity: 0.7;
}

.kzf-bb__auswahl select {
	padding: 0.45rem 1rem;
	border: 1px solid var(--kzf-linie);
	border-radius: 30px;
	background: var(--kzf-flaeche);
	font-family: inherit;
	font-size: 0.94rem;
	color: var(--kzf-dunkel);
	cursor: pointer;
}

.kzf-bb__zuruecksetzen,
.kzf-bb__textknopf {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 0.9rem;
	color: var(--kzf-gedaempft);
	text-decoration: underline;
	cursor: pointer;
}

.kzf-bb__zuruecksetzen:hover,
.kzf-bb__textknopf:hover {
	color: var(--kzf-tuerkis-tief);
}

/* Schaltflaechen: vollrund, orange, weisse Schrift – die Form, die das
   Theme fuer Handlungsaufforderungen verwendet. */
.kzf-bb__knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.4rem;
	border: 0;
	border-radius: 30px;
	background: var(--kzf-signal);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.kzf-bb__knopf:hover,
.kzf-bb__knopf:focus-visible {
	background: var(--kzf-signal-tief);
	color: #fff;
}

.kzf-bb__knopf--leise {
	background: var(--kzf-flaeche);
	border: 1px solid var(--kzf-linie);
	color: var(--kzf-dunkel);
}

.kzf-bb__knopf--leise:hover,
.kzf-bb__knopf--leise:focus-visible {
	background: var(--kzf-grau);
	border-color: var(--kzf-tuerkis);
	color: var(--kzf-dunkel);
}

/* Zweispalter: Liste und Karte ------------------------------------- */

.kzf-bb__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.75rem;
	align-items: start;
}

.kzf-bb__split--ohne-karte {
	grid-template-columns: minmax(0, 1fr);
}

.kzf-bb__liste {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-height: 70vh;
	overflow-y: auto;
	padding-right: 0.4rem;
}

/*
 * Die Karte klebt mit, solange man durch die Liste rollt. Ohne das waere
 * sie beim zwanzigsten Eintrag aus dem Bild – und dann ist der halbe
 * Zweck des Zweispalters weg.
 */
.kzf-bb__kartenspalte {
	position: sticky;
	/* Der klebende Kopf von Kadence: 80 Pixel auf dem Rechner. */
	top: 96px;
}

.kzf-bb__map {
	position: relative;
	height: 70vh;
	min-height: 24rem;
	border: 1px solid var(--kzf-linie);
	border-radius: var(--kzf-radius);
	background: var(--kzf-grau);
	overflow: hidden;
}

.kzf-bb__map-vorhang {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2rem;
	text-align: center;
	background: var(--kzf-grau);
}

.kzf-bb__map-text {
	max-width: 34ch;
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--kzf-gedaempft);
}

/* Die Nadeln. Kein Bild, nur ein farbiger Punkt – so gibt es kein
   zweites Buendel Grafiken zu pflegen. */
.kzf-bb__marker-punkt {
	display: block;
	width: 100%;
	height: 100%;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/*
 * Die Nadel wächst mit der Stufe – die Größe kommt aus dem Skript, weil
 * Leaflet den Ankerpunkt kennen muss. Beim kleinsten Punkt wird der weisse
 * Rand mit verkleinert, sonst bliebe vom Farbkern nichts übrig.
 */
.kzf-bb__marker--frei .kzf-bb__marker-punkt {
	border-width: 2px;
}

/*
 * Kanu-Stationen als abgerundetes Viereck. Die Form trägt die
 * Unterscheidung, nicht die Farbe: Fünf verschiedenfarbige Kreise sind für
 * jeden Zehnten unter den Lesern fünf gleiche Kreise.
 */
.kzf-bb__marker--station .kzf-bb__marker-punkt {
	border-radius: 5px;
}

/* Fremde Auszeichnung, als Text. Nie als Logo – siehe portal.php. */
.kzf-bb__siegel {
	display: inline-block;
	margin: 0 0 0.4rem;
	padding: 0.1rem 0.55rem;
	border: 1px solid var(--kzf-tuerkis);
	border-radius: 30px;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--kzf-tuerkis-tief);
}

/* Die Karten in der Liste ------------------------------------------ */

.kzf-bb__karte {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 1rem;
	padding: 1rem;
	border: 1px solid var(--kzf-linie);
	border-left: 4px solid var(--kzf-bb-farbe, var(--kzf-tuerkis));
	border-radius: var(--kzf-radius);
	background: var(--kzf-flaeche);
	transition: box-shadow 0.15s ease;
}

.kzf-bb__karte:hover {
	box-shadow: 0 4px 16px rgba(26, 47, 51, 0.08);
}

/*
 * Die drei Stufen in der Liste.
 *
 * Der Unterschied ist absichtlich zurückhaltend: kein Abzeichen, kein
 * "Premium"-Stempel, keine goldene Umrandung. Ein Verzeichnis, dem man
 * ansieht, wer bezahlt hat, verliert beim Leser genau die Glaubwürdigkeit,
 * die den Eintrag für den Betrieb wertvoll macht. Was die bezahlten Stufen
 * wirklich voraushaben, ist ohnehin sichtbar, ohne dass man es beschriften
 * müsste: ein Bild, mehr Text, eine Telefonnummer – und der Platz weiter
 * oben.
 */
.kzf-bb__karte--premium {
	background: var(--kzf-blau);
	padding: 1.25rem;
}

/* Ohne Bild und ohne Kontaktzeile darf die Karte schmaler sein. */
.kzf-bb__karte--frei {
	padding: 0.85rem 1rem;
}

.kzf-bb__karte:not(:has(.kzf-bb__karte-bild)) {
	grid-template-columns: minmax(0, 1fr);
}

.kzf-bb__karte-bild {
	width: 96px;
	height: 96px;
	border-radius: var(--kzf-radius-klein);
	object-fit: cover;
}

.kzf-bb__label {
	margin: 0 0 0.2rem;
	font-family: var(--kzf-schrift-titel);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kzf-tuerkis-tief);
}

.kzf-bb__name {
	margin: 0 0 0.25rem;
	font-family: var(--kzf-schrift-titel);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
}

.kzf-bb__name-knopf {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--kzf-dunkel);
	text-align: left;
	cursor: pointer;
}

.kzf-bb__name-knopf:hover {
	color: var(--kzf-tuerkis-tief);
}

.kzf-bb__ort,
.kzf-bb__kurz {
	margin: 0 0 0.35rem;
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--kzf-gedaempft);
}

.kzf-bb__gewaesser,
.kzf-bb__marken {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 0.5rem;
}

.kzf-bb__marke {
	padding: 0.15rem 0.6rem;
	border-radius: 30px;
	background: var(--kzf-grau);
	font-size: 0.78rem;
	color: var(--kzf-gedaempft);
}

.kzf-bb__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.kzf-bb__preis {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--kzf-dunkel);
}

/* Sterne. Das Bild ist fuer das Auge, die Zahl daneben ist die
   eigentliche Angabe – fuenf gleiche Zeichen sagen einem Screenreader
   nichts. */
.kzf-bb__sterne {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}

.kzf-bb__sterne-bild {
	color: var(--kzf-signal);
	letter-spacing: 0.05em;
}

.kzf-bb__sterne-text,
.kzf-bb__sterne--leer {
	font-size: 0.82rem;
	color: var(--kzf-gedaempft);
}

.kzf-bb__nichts {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--kzf-gedaempft);
}

/* Die Fenster ------------------------------------------------------ */

.kzf-bb__dialog,
.kzf-bb__lightbox {
	width: min(46rem, 92vw);
	max-height: 88vh;
	padding: 0;
	border: 0;
	border-radius: var(--kzf-radius);
	background: var(--kzf-flaeche);
	color: var(--kzf-dunkel);
	font-family: var(--kzf-schrift-text);
	overflow: visible;
}

.kzf-bb__dialog::backdrop,
.kzf-bb__lightbox::backdrop {
	background: rgba(26, 47, 51, 0.55);
}

.kzf-bb__dialog-inhalt {
	max-height: 88vh;
	padding: 2rem;
	overflow-y: auto;
	border-radius: var(--kzf-radius);
}

/*
 * Der Schliessknopf.
 *
 * `padding: 0` ist hier das Entscheidende und kein Aufräumen: Kadence legt
 * allen Schaltflächen einen Innenabstand von 1,4em auf. Der ist breiter als
 * die 2,2rem, die der Knopf messen soll — und weil der Innenabstand die
 * Breite nach unten begrenzt, wurde aus dem Kreis eine Ellipse (44 × 35 px).
 * Ohne den Abstand stimmen Breite und Höhe wieder überein.
 *
 * Das Zeichen sitzt über `place-items` in der Mitte statt über line-height:
 * Ein × hat andere Schriftmasse als eine Ziffer, und eine geratene
 * Zeilenhöhe verschiebt es je nach Schriftart nach oben oder unten.
 */
.kzf-bb__schliessen {
	position: absolute;
	top: 0.6rem;
	right: 0.8rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	min-width: 0;
	padding: 0;
	/*
	 * Haarlinie statt randlos: Die Fläche kommt aus der Kadence-Palette und
	 * ist auf dieser Installation fast weiss — der Kreis wäre auf dem weissen
	 * Fenster unsichtbar, und beim Überfahren spränge er unvermittelt
	 * türkis an. Mit der Linie ist die Form schon vorher da. Dieselbe
	 * Zurückhaltung wie bei den Filterpillen.
	 */
	border: 1px solid var(--kzf-linie);
	border-radius: 50%;
	background: var(--kzf-grau);
	font-family: inherit;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--kzf-dunkel);
	cursor: pointer;
	/* Den Schattenfokus des Themes abräumen; der eigene steht unten. */
	box-shadow: none;
	transition: background-color 0.15s ease;
}

.kzf-bb__schliessen:hover {
	border-color: var(--kzf-tuerkis);
	background: var(--kzf-tuerkis);
}

/*
 * Sichtbarer Fokus, aber ein passender. Das Fenster setzt den Fokus beim
 * Öffnen von sich aus auf dieses Element — das ist richtig so, sonst wüsste
 * eine Tastaturbedienung nicht, wo sie ist. Nur soll es dann nicht nach
 * einem Fehler aussehen: ein türkiser Ring auf Abstand statt des blauen
 * Kastens, den der Browser sonst zeichnet.
 */
.kzf-bb__schliessen:focus {
	outline: none;
	box-shadow: none;
}

.kzf-bb__schliessen:focus-visible {
	outline: 2px solid var(--kzf-tuerkis-tief);
	outline-offset: 2px;
	box-shadow: none;
}

.kzf-bb__lightbox {
	width: min(60rem, 94vw);
	background: transparent;
}

.kzf-bb__lightbox img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 86vh;
	border-radius: var(--kzf-radius);
	object-fit: contain;
}

/* Das Profil ------------------------------------------------------- */

.kzf-bb__profil-titel {
	margin: 0 0 0.4rem;
	font-family: var(--kzf-schrift-titel);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.2;
}

.kzf-bb__profil-text {
	margin: 1.25rem 0;
	font-size: 1rem;
	line-height: 1.65;
}

.kzf-bb__profil-text p {
	margin: 0 0 0.8rem;
}

/* Die Galerie: drei Bilder nebeneinander, unter 600 Pixeln gestapelt. */
.kzf-bb__galerie {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.6rem;
	margin: 1.25rem 0;
}

.kzf-bb__galerie:empty {
	display: none;
}

.kzf-bb__galerie-feld {
	padding: 0;
	border: 0;
	border-radius: var(--kzf-radius-klein);
	background: var(--kzf-grau);
	cursor: zoom-in;
	overflow: hidden;
}

.kzf-bb__galerie-feld img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.kzf-bb__galerie-feld:hover img {
	transform: scale(1.04);
}

.kzf-bb__block {
	margin: 1.5rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kzf-linie);
}

.kzf-bb__block-titel {
	margin: 0 0 0.6rem;
	font-family: var(--kzf-schrift-titel);
	font-size: 1rem;
	font-weight: 800;
}

.kzf-bb__zeiten {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.94rem;
	line-height: 1.7;
	color: var(--kzf-gedaempft);
}

.kzf-bb__kontakt {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.5rem 0;
}

.kzf-bb__beanspruchen {
	display: block;
	margin-top: 1.5rem;
	font-size: 0.85rem;
}

.kzf-bb__hinweis {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--kzf-gedaempft);
}

/* Formulare -------------------------------------------------------- */

.kzf-bb__form {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	align-items: flex-start;
}

.kzf-bb__feld {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
}

.kzf-bb__feld-text {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--kzf-gedaempft);
}

.kzf-bb__eingabe {
	width: 100%;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--kzf-linie);
	border-radius: var(--kzf-radius-klein);
	background: var(--kzf-flaeche);
	font-family: inherit;
	font-size: 0.98rem;
	color: var(--kzf-dunkel);
}

.kzf-bb__eingabe:focus {
	outline: none;
	border-color: var(--kzf-tuerkis);
}

.kzf-bb__haken {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--kzf-gedaempft);
}

.kzf-bb__haken input {
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

/*
 * Der Honigtopf. Nicht display:none – manche Skripte ueberspringen genau
 * das. Er steht ausserhalb des Bildes und ist fuer Screenreader
 * ausgeblendet.
 */
.kzf-bb__honig {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.kzf-bb__sternwahl {
	display: flex;
	gap: 0.2rem;
}

.kzf-bb__stern {
	padding: 0 0.1rem;
	border: 0;
	background: none;
	font-size: 1.9rem;
	line-height: 1;
	color: var(--kzf-gedaempft);
	cursor: pointer;
}

.kzf-bb__stern--an,
.kzf-bb__stern:hover {
	color: var(--kzf-signal);
}

.kzf-bb__meldung {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

.kzf-bb__meldung--ok {
	color: var(--kzf-gruen);
}

.kzf-bb__meldung--fehler {
	color: var(--kzf-rot);
}

.kzf-bb__bildzeile {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}

.kzf-bb__bildvorschau {
	width: 72px;
	height: 54px;
	border-radius: var(--kzf-radius-klein);
	object-fit: cover;
	background: var(--kzf-grau);
}

.kzf-bb__bildvorschau[hidden] {
	display: none;
}

/* Der Abschluss ---------------------------------------------------- */

.kzf-bb__oeko {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--kzf-linie);
}

.kzf-bb__oeko-titel {
	margin: 0 0 1.5rem;
	font-family: var(--kzf-schrift-titel);
	font-size: 1.35rem;
	font-weight: 800;
}

.kzf-bb__beitraege {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-bottom: 2.5rem;
}

.kzf-bb__beitrag-link {
	display: block;
	height: 100%;
	border: 1px solid var(--kzf-linie);
	border-radius: var(--kzf-radius);
	background: var(--kzf-flaeche);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: box-shadow 0.15s ease;
}

.kzf-bb__beitrag-link:hover {
	box-shadow: 0 4px 16px rgba(26, 47, 51, 0.08);
}

.kzf-bb__beitrag-bild {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.kzf-bb__beitrag-text {
	padding: 1rem 1.1rem 1.25rem;
}

.kzf-bb__beitrag-titel {
	margin: 0 0 0.4rem;
	font-family: var(--kzf-schrift-titel);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.3;
}

.kzf-bb__beitrag-auszug {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--kzf-gedaempft);
}

.kzf-bb__beitrag-datum {
	margin: 0;
	font-size: 0.78rem;
	color: var(--kzf-gedaempft);
}

/* Der Weg ins Magazin, mittig unter den drei Beiträgen. */
.kzf-bb__mehr {
	margin: 0 0 2.5rem;
	text-align: center;
}

/*
 * Drei Werkzeuge nebeneinander, aber nie zwei plus eines verwaistes: Bei
 * 18rem passen auf dem Rechner drei in eine Zeile, darunter bricht die
 * Reihe geschlossen auf eine Spalte um. Der auto-fit mit 20rem hatte bei
 * mittleren Breiten eine einzelne Karte in die zweite Zeile geschoben.
 */
.kzf-bb__werkzeuge {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-bottom: 2.5rem;
}

/*
 * Jedes der drei Werkzeuge bekommt seine eigene Fläche, damit sie sich
 * nebeneinander unterscheiden: Grau für die Packliste, das seichte Blau der
 * Dealseite, ein türkiser Anflug für die Termine. Bei 16 % war der
 * Unterschied zum Grau daneben nicht mehr zu sehen.
 */
.kzf-bb__werkzeug--termine {
	background: color-mix(in srgb, var(--kzf-tuerkis) 26%, var(--kzf-flaeche));
}

@media (max-width: 60rem) {
	.kzf-bb__werkzeuge {
		grid-template-columns: minmax(0, 1fr);
	}
}

.kzf-bb__werkzeug {
	padding: 1.75rem;
	border-radius: var(--kzf-radius);
	background: var(--kzf-grau);
}

.kzf-bb__werkzeug--deals {
	background: var(--kzf-blau);
}

.kzf-bb__werkzeug-titel {
	margin: 0 0 0.5rem;
	font-family: var(--kzf-schrift-titel);
	font-size: 1.2rem;
	font-weight: 800;
}

.kzf-bb__werkzeug-text {
	margin: 0 0 1.1rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--kzf-gedaempft);
}

.kzf-bb__b2b {
	padding: 1.75rem;
	border: 1px solid var(--kzf-linie);
	border-radius: var(--kzf-radius);
	text-align: center;
}

/* Die drei Stufen nebeneinander */

.kzf-bb__stufen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 2rem 0 1.25rem;
	text-align: left;
}

.kzf-bb__stufe {
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--kzf-linie);
	border-radius: var(--kzf-radius);
	background: var(--kzf-flaeche);
}

/*
 * Die mittlere Stufe ist die, die für die meisten Betriebe passt, und
 * bekommt deshalb den türkisen Rahmen. Die Signalfarbe bleibt der
 * Schaltfläche vorbehalten.
 */
.kzf-bb__stufe--basis {
	border-color: var(--kzf-tuerkis);
	border-width: 2px;
}

.kzf-bb__stufe--premium {
	background: var(--kzf-blau);
	border-color: var(--kzf-blau);
}

.kzf-bb__stufe-name {
	margin: 0 0 0.15rem;
	font-family: var(--kzf-schrift-titel);
	font-size: 1.05rem;
	font-weight: 800;
}

.kzf-bb__stufe-preis {
	margin: 0 0 1rem;
	font-family: var(--kzf-schrift-titel);
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--kzf-tuerkis-tief);
}

.kzf-bb__stufe-liste {
	flex: 1 1 auto;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.kzf-bb__stufe-zeile {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.3rem 0;
	font-size: 0.88rem;
	line-height: 1.45;
}

.kzf-bb__stufe-zeichen {
	flex: 0 0 1rem;
	font-weight: 500;
	color: var(--kzf-gruen);
}

/*
 * Was eine Stufe nicht enthält, steht blass da statt zu fehlen. Nur so
 * lassen sich die drei Spalten Zeile für Zeile vergleichen – und nur so
 * sieht ein Betrieb, was ihm der nächste Schritt brächte.
 */
.kzf-bb__stufe-zeile--fehlt {
	color: var(--kzf-gedaempft);
	opacity: 0.55;
}

.kzf-bb__stufe-zeile--fehlt .kzf-bb__stufe-zeichen {
	color: var(--kzf-gedaempft);
}

.kzf-bb__stufe .kzf-bb__knopf {
	justify-content: center;
}

.kzf-bb__b2b-fuss {
	margin: 0;
	font-size: 0.85rem;
	color: var(--kzf-gedaempft);
}

.kzf-bb__b2b-titel {
	margin: 0 0 0.5rem;
	font-family: var(--kzf-schrift-titel);
	font-size: 1.2rem;
	font-weight: 800;
}

.kzf-bb__b2b-text {
	max-width: 60ch;
	margin: 0 auto 1.1rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--kzf-gedaempft);
}

/* Kleinere Bildschirme --------------------------------------------- */

@media (max-width: 900px) {
	/*
	 * Unter 900 Pixeln stapelt sich alles, und die Karte kommt zuerst:
	 * Auf dem Telefon steht meist die Frage "was ist in der Naehe" vor
	 * der Frage "wer ist das". Sie wird dabei niedriger – eine Karte,
	 * die den ganzen Bildschirm fuellt, laesst die Liste darunter
	 * verschwinden.
	 */
	.kzf-bb__split {
		grid-template-columns: minmax(0, 1fr);
	}

	.kzf-bb__kartenspalte {
		position: static;
		order: -1;
	}

	.kzf-bb__map {
		height: 46vh;
		min-height: 18rem;
	}

	.kzf-bb__liste {
		max-height: none;
		overflow: visible;
		padding-right: 0;
	}

	.kzf-bb__beitraege {
		grid-template-columns: minmax(0, 1fr);
	}

	.kzf-bb__stufen {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.kzf-bb__galerie {
		grid-template-columns: minmax(0, 1fr);
	}

	.kzf-bb__karte {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.kzf-bb__karte-bild {
		width: 72px;
		height: 72px;
	}

	.kzf-bb__dialog-inhalt {
		padding: 1.5rem 1.25rem;
	}
}

/* Rueckfall, falls das Theme die Klasse nicht mitbringt. */
.kzf-bb .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
	.kzf-bb * {
		transition: none !important;
	}
}