/*
 * Kanu zum Frühstück Gebrauchtmarkt.
 *
 * Die Markenfarben stehen fest verdrahtet, nicht über die Kadence-Palette
 * (wie in paddel-gear.css, siehe GEMEINSAME-KONVENTIONEN.md). Der Grund ist
 * handfest: In der Testumgebung mit der Standardpalette von Kadence war der
 * ganze Markt blau, weil --global-palette1 dort nicht unser Türkis ist. Eine
 * Farbe, die davon abhängt, wie ein Theme gerade eingestellt ist, ist keine
 * Marke.
 *
 * Signalorange steht ausschließlich an den drei Handlungsknöpfen
 * „Anzeige aufgeben", „Jetzt anfragen" und „Alarm aktivieren". Filter
 * sind Bedienelemente (vollrunde Pillen, gewählt = türkise Fläche), der
 * Filterknopf ist ruhig in Petrol.
 *
 * Alles hängt unter .kzf-gm, damit nichts ins Theme ausläuft. Abstände
 * trägt der Abschnitt, nicht die erste Überschrift darin
 * (siehe GEMEINSAME-KONVENTIONEN.md).
 */

.kzf-gm {
	--kzf-tuerkis: #6ac3c8;
	--kzf-tuerkis-tief: #3d9ba1;
	--kzf-tuerkis-hell: #eaf7f8;
	--kzf-dunkel: #1a2f33;
	--kzf-signal: #ff7043;
	--kzf-signal-tief: #e85a2c;
	--kzf-grau: #f3f4f6;
	--kzf-gruen: #16a34a;
	--kzf-rot: #dc2626;
	--kzf-linie: #e3e7e9;
	--kzf-gedaempft: #5f7276;
	--kzf-flaeche: #ffffff;
	--kzf-radius: 14px;
	--kzf-radius-klein: 8px;
	--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: 2rem 0 3rem;
	color: var(--kzf-dunkel);
	font-family: var(--kzf-schrift-text);
	font-weight: 500;
}

.kzf-gm *,
.kzf-gm *::before,
.kzf-gm *::after {
	box-sizing: border-box;
}

/* Browser-[hidden] verliert sonst gegen jede display-Angabe von hier. */
.kzf-gm [hidden] {
	display: none !important;
}

.kzf-gm__unsichtbar {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.kzf-gm__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Überschriften ---------------------------------------------------- */

.kzf-gm :where(h2, h3) {
	font-family: var(--kzf-schrift-titel);
	font-weight: 800;
	color: var(--kzf-dunkel);
	letter-spacing: -0.01em;
}

.kzf-gm__kopf {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.kzf-gm .kzf-gm__titel {
	margin: 0 0 0.5rem;
	font-size: clamp(1.3rem, 3.5vw, 1.75rem);
	line-height: 1.2;
}

/* Das Orange betont ein einzelnes Glied der Überschrift, den Namen der
   Sache, und färbt nie die ganze Zeile. */
.kzf-gm__titel-akzent {
	color: var(--kzf-signal);
}

.kzf-gm__intro {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--kzf-gedaempft);
}

/* Knöpfe ----------------------------------------------------------- */

.kzf-gm .kzf-gm__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.65rem 1.5rem;
	border: 0;
	border-radius: 30px;
	background: var(--kzf-signal);
	font-family: inherit;
	font-size: 0.98rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

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

.kzf-gm .kzf-gm__knopf--gross {
	padding: 0.85rem 1.8rem;
	font-size: 1.05rem;
	align-self: flex-start;
}

.kzf-gm .kzf-gm__knopf[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.kzf-gm .kzf-gm__knopf-ruhig {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.3rem;
	border: 0;
	border-radius: 30px;
	background: var(--kzf-dunkel);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.kzf-gm .kzf-gm__knopf-ruhig:hover,
.kzf-gm .kzf-gm__knopf-ruhig:focus-visible {
	background: var(--kzf-tuerkis-tief);
	color: #fff;
}

.kzf-gm .kzf-gm__knopf-ruhig--gruen { background: var(--kzf-gruen); }
.kzf-gm .kzf-gm__knopf-ruhig--rot { background: var(--kzf-rot); }

.kzf-gm .kzf-gm__textknopf {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 0.92rem;
	color: var(--kzf-gedaempft);
	text-decoration: underline;
	cursor: pointer;
}

.kzf-gm .kzf-gm__textknopf:hover {
	background: none;
	color: var(--kzf-tuerkis-tief);
}

/* Felder ----------------------------------------------------------- */

.kzf-gm__feld {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.88rem;
	color: var(--kzf-gedaempft);
}

.kzf-gm__feld > span {
	font-weight: 600;
}

.kzf-gm__feld--paar > div {
	display: flex;
	gap: 0.4rem;
}

/* „VB" steht unter dem Preisfeld, nicht daneben: sonst wäre dieses eine
   Feld schmaler als alle anderen im Formular. */
.kzf-gm__preiszeile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
}

.kzf-gm__preiszeile .kzf-gm__vb {
	font-size: 0.86rem;
	color: var(--kzf-gedaempft);
}

.kzf-gm__feld--paar > div > * {
	flex: 1 1 0;
	min-width: 0;
}

/*
 * Alle Eingabefelder gleich hoch und gleich breit.
 *
 * Die Auswahl mit :where() hatte keine Gewichtung und verlor gegen die
 * Regeln des Themes: Zahlenfelder kamen 40 Pixel hoch heraus, Auswahllisten
 * 47, und in einer Reihe sah das nach Versehen aus. Deshalb hier eine
 * Auswahl mit Gewicht, eine feste Mindesthöhe und für Auswahllisten ein
 * eigener Pfeil, weil der des Systems die Höhe mitbestimmt.
 */
.kzf-gm input[type="text"],
.kzf-gm input[type="email"],
.kzf-gm input[type="number"],
.kzf-gm select,
.kzf-gm textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	margin: 0;
	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: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--kzf-dunkel);
}

.kzf-gm select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7276' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 16px;
}

.kzf-gm :where(input, select, textarea):focus {
	outline: none;
	border-color: var(--kzf-tuerkis);
	box-shadow: 0 0 0 3px rgba(106, 195, 200, 0.25);
}

.kzf-gm textarea {
	resize: vertical;
	line-height: 1.5;
}

.kzf-gm__zaehler {
	align-self: flex-end;
	font-size: 0.8rem;
	color: var(--kzf-gedaempft);
}

.kzf-gm__zaehler.is-knapp {
	color: var(--kzf-rot);
}

.kzf-gm__haken {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 0.9rem 0 0;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--kzf-gedaempft);
}

.kzf-gm__haken input {
	flex: 0 0 auto;
	margin-top: 0.2rem;
	accent-color: var(--kzf-tuerkis-tief);
}

.kzf-gm__vb {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
	font-size: 0.95rem;
	color: var(--kzf-dunkel);
}

.kzf-gm__klein {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--kzf-gedaempft);
}

.kzf-gm__meldung {
	margin: 0.9rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: var(--kzf-radius-klein);
	background: var(--kzf-tuerkis-hell);
	font-size: 0.92rem;
	line-height: 1.5;
}

.kzf-gm__meldung.is-fehler {
	background: #fdecec;
	color: #8f1d1d;
}

.kzf-gm__meldung.is-ok {
	background: #e8f7ee;
	color: #14532d;
}

/* Formular „Anzeige aufgeben" -------------------------------------- */

.kzf-gm__panel {
	margin: 0 0 2rem;
	padding: 1.25rem;
	border: 1px solid var(--kzf-linie);
	border-radius: var(--kzf-radius);
	background: var(--kzf-flaeche);
	box-shadow: 0 8px 24px rgba(26, 47, 51, 0.06);
}

.kzf-gm .kzf-gm__panel-titel {
	margin: 0 0 0.4rem;
	font-size: 1.25rem;
}

.kzf-gm__panel-text {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--kzf-gedaempft);
}

.kzf-gm__raster-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.kzf-gm__bilder {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
}

.kzf-gm__bild {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border: 2px dashed var(--kzf-linie);
	border-radius: var(--kzf-radius-klein);
	background: var(--kzf-grau);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.kzf-gm__bild:hover,
.kzf-gm__bild:focus-within {
	border-color: var(--kzf-tuerkis);
}

.kzf-gm__bild-leer {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--kzf-gedaempft);
}

.kzf-gm__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kzf-gm__bild.is-arbeit::after {
	content: 'wird verkleinert …';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.8);
	font-size: 0.8rem;
}

.kzf-gm .kzf-gm__bild-weg {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(26, 47, 51, 0.8);
	font-size: 1.1rem;
	line-height: 28px;
	color: #fff;
	cursor: pointer;
}

.kzf-gm__form-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
}

/* Filterleiste und Such-Alarm -------------------------------------- */

.kzf-gm__leiste {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.kzf-gm__filter {
	padding: 1.1rem;
	border: 1px solid var(--kzf-linie);
	border-radius: var(--kzf-radius);
	background: var(--kzf-flaeche);
}

.kzf-gm__pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.kzf-gm__pille {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.42rem 1rem;
	border: 1px solid var(--kzf-linie);
	border-radius: 30px;
	background: var(--kzf-flaeche);
	font-size: 0.93rem;
	font-weight: 400;
	color: var(--kzf-dunkel);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.kzf-gm__pille input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

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

.kzf-gm__pille:focus-within {
	box-shadow: 0 0 0 3px rgba(106, 195, 200, 0.35);
}

.kzf-gm__pille--an,
.kzf-gm__pille:has(input:checked) {
	border-color: var(--kzf-tuerkis);
	background: var(--kzf-tuerkis);
	color: var(--kzf-dunkel);
}

/* Ein Filter je Spalte, alle Spalten gleich breit. */
.kzf-gm__felder {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.8rem;
}

.kzf-gm__filter-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
}

/* Linke Spalte: Filter und Kurzanleitung untereinander. */
.kzf-gm__spalte {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.kzf-gm__ablauf {
	flex: 1 1 auto;
	padding: 1.1rem 1.25rem 1.25rem;
	border: 1px solid var(--kzf-linie);
	border-radius: var(--kzf-radius);
	background: var(--kzf-grau);
}

.kzf-gm .kzf-gm__ablauf-titel {
	margin: 0 0 0.9rem;
	font-size: 1.05rem;
}

.kzf-gm__schritte {
	margin: 0 0 0.9rem;
	padding: 0;
	list-style: none;
	counter-reset: kzf-schritt;
}

.kzf-gm__schritte li {
	position: relative;
	margin: 0 0 0.7rem;
	padding-left: 2.4rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--kzf-gedaempft);
}

.kzf-gm__schritte li::before {
	counter-increment: kzf-schritt;
	content: counter(kzf-schritt);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--kzf-tuerkis);
	font-family: var(--kzf-schrift-titel);
	font-size: 0.85rem;
	font-weight: 800;
	color: var(--kzf-dunkel);
}

.kzf-gm__schritte strong {
	display: block;
	color: var(--kzf-dunkel);
}

.kzf-gm__alarm {
	padding: 1.1rem;
	border-radius: var(--kzf-radius);
	background: var(--kzf-tuerkis-hell);
	border-left: 4px solid var(--kzf-tuerkis);
}

.kzf-gm .kzf-gm__alarm-titel {
	margin: 0 0 0.3rem;
	font-size: 1.08rem;
}

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

.kzf-gm__alarm-form {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.kzf-gm__namen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.kzf-gm__alarm-form .kzf-gm__haken {
	margin-top: 0.2rem;
	font-size: 0.8rem;
}

.kzf-gm__alarm-form .kzf-gm__knopf {
	align-self: flex-start;
}

/* Kartenraster ----------------------------------------------------- */

.kzf-gm__treffer {
	margin: 0 0 0.8rem;
	font-size: 0.9rem;
	color: var(--kzf-gedaempft);
}

.kzf-gm__raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
}

.kzf-gm-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--kzf-linie);
	border-radius: var(--kzf-radius);
	background: var(--kzf-flaeche);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.kzf-gm-karte:hover {
	box-shadow: 0 10px 26px rgba(26, 47, 51, 0.1);
	transform: translateY(-2px);
}

/*
 * Alle Kartenbilder gleich groß und formatfüllend, gleich ob Handyfoto
 * einer Privatanzeige oder freigestelltes Produktfoto eines Shops. Das Bild
 * liegt absolut im Kasten; eine Prozenthöhe allein würde der Browser
 * verwerfen, weil der Kasten nur ein Seitenverhältnis hat und keine feste
 * Höhe, und dann zöge jedes Bild seine Karte anders in die Länge.
 */
.kzf-gm-karte__bild {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--kzf-grau);
	overflow: hidden;
}

.kzf-gm-karte__bild img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kzf-gm-karte__platzhalter {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--kzf-grau), var(--kzf-tuerkis-hell));
}

.kzf-gm-karte__marke {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	padding: 0.25rem 0.7rem;
	border-radius: 30px;
	background: var(--kzf-dunkel);
	font-size: 0.76rem;
	font-weight: 600;
	color: #fff;
}

.kzf-gm-karte--partner .kzf-gm-karte__marke {
	background: var(--kzf-tuerkis);
	color: var(--kzf-dunkel);
}

.kzf-gm-karte__marke--statisch {
	position: static;
	display: inline-block;
	align-self: flex-start;
}

.kzf-gm-karte__text {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.9rem 1rem 1.1rem;
}

.kzf-gm-karte__kategorie {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--kzf-tuerkis-tief);
	text-decoration: none;
}

.kzf-gm .kzf-gm-karte__titel {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.3;
}

.kzf-gm-karte__titel a {
	color: inherit;
	text-decoration: none;
}

.kzf-gm-karte__titel a::after {
	/* Die ganze Karte ist klickbar, ohne verschachtelte Links. */
	content: '';
	position: absolute;
	inset: 0;
}

.kzf-gm-karte__titel a:hover {
	color: var(--kzf-tuerkis-tief);
}

.kzf-gm-karte__preis {
	margin: 0.2rem 0 0;
	font-family: var(--kzf-schrift-titel);
	font-size: 1.15rem;
	font-weight: 800;
}

.kzf-gm-karte__meta {
	margin: 0;
	font-size: 0.84rem;
	color: var(--kzf-gedaempft);
}

.kzf-gm__leer,
.kzf-gm__box {
	padding: 1.5rem;
	border-radius: var(--kzf-radius);
	background: var(--kzf-grau);
	line-height: 1.6;
}

.kzf-gm__leer p,
.kzf-gm__box p {
	margin: 0 0 0.6rem;
}

.kzf-gm__box--ok { border-left: 4px solid var(--kzf-gruen); }
.kzf-gm__box--fehler { border-left: 4px solid var(--kzf-rot); }
.kzf-gm__box--frage { border-left: 4px solid var(--kzf-tuerkis); }

.kzf-gm__knopfreihe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0;
}

.kzf-gm__knopfreihe form {
	margin: 0;
}

.kzf-gm__vorschau {
	margin: 1rem 0;
	padding: 1rem;
	border-radius: var(--kzf-radius-klein);
	background: var(--kzf-flaeche);
}

.kzf-gm__vorschau-bilder {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.kzf-gm__vorschau-bilder img {
	width: 32%;
	max-width: 180px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--kzf-radius-klein);
}

.kzf-gm__blaettern {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 2rem 0 3.5rem;
}

.kzf-gm__seite {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--kzf-linie);
	border-radius: 30px;
	color: var(--kzf-dunkel);
	text-decoration: none;
}

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

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

.kzf-gm__luecke {
	padding: 0 0.2rem;
	color: var(--kzf-gedaempft);
}

.kzf-gm__seite--pfeil {
	padding: 0 1rem;
	font-size: 0.92rem;
}

.kzf-gm__hinweis {
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--kzf-linie);
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--kzf-gedaempft);
}

/* Cross-Selling ---------------------------------------------------- */

.kzf-gm-cross {
	margin: 0 0 1.75rem;
	padding: 1.1rem;
	border: 1px solid var(--kzf-linie);
	border-radius: var(--kzf-radius);
	background: var(--kzf-grau);
}

.kzf-gm-cross__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.kzf-gm .kzf-gm-cross__titel {
	margin: 0;
	font-size: 1.08rem;
}

.kzf-gm-cross__anzeige {
	font-size: 0.72rem;
	color: var(--kzf-gedaempft);
}

.kzf-gm-cross__text {
	margin: 0.3rem 0 0.9rem;
	font-size: 0.9rem;
	color: var(--kzf-gedaempft);
}

/*
 * So viele Kacheln nebeneinander, wie bei 130 Pixeln Mindestbreite
 * hineinpassen: auf dem Handy zwei, bei 1024 fünf, bei 1440 acht. Vorher
 * lag die Grenze bei 150 Pixeln, und auf dem Handy stand eine Kachel pro
 * Zeile, was die Seite endlos lang machte.
 */
.kzf-gm-cross__reihe {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 0.75rem;
}

.kzf-gm-cross__deal {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0.2rem;
	padding: 0.6rem;
	border-radius: var(--kzf-radius-klein);
	background: var(--kzf-flaeche);
	color: var(--kzf-dunkel);
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}

.kzf-gm-cross__deal:hover {
	box-shadow: 0 6px 18px rgba(26, 47, 51, 0.1);
	color: var(--kzf-dunkel);
}

.kzf-gm-cross__bild {
	position: relative;
	display: block;
	aspect-ratio: 1;
	margin-bottom: 0.3rem;
}

/*
 * Absolut im Kasten, nicht mit height: 100%. Eine Prozenthöhe braucht eine
 * feste Höhe am Elternteil; der Kasten hat aber nur ein Seitenverhältnis,
 * also ignorierte der Browser die Angabe und das Bild zog die Kachel in die
 * Länge. Genau daran waren die Kacheln unterschiedlich hoch.
 */
.kzf-gm-cross__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kzf-gm-cross__rabatt {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.15rem 0.5rem;
	border-radius: 30px;
	background: var(--kzf-dunkel);
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
}

/* Zwei Zeilen für den Namen, damit alle Kacheln gleich hoch bleiben. */
.kzf-gm-cross__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.3rem;
	font-size: 0.85rem;
	line-height: 1.35;
}

.kzf-gm-cross__preis {
	font-weight: 700;
}

.kzf-gm-cross__shop {
	font-size: 0.78rem;
	color: var(--kzf-gedaempft);
}

.kzf-gm-cross__mehr {
	display: inline-block;
	margin-top: 0.9rem;
	font-size: 0.9rem;
	color: var(--kzf-dunkel);
}

/* Detailseite ------------------------------------------------------ */

.kzf-gm__zurueck {
	display: inline-block;
	margin-bottom: 1rem;
	font-size: 0.9rem;
	color: var(--kzf-gedaempft);
	text-decoration: none;
}

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

.kzf-gm-detail__ueberschrift {
	margin: 0.5rem 0 1.25rem;
}

.kzf-gm-detail__oben {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.kzf-gm-detail__bild {
	aspect-ratio: 4 / 3;
	border-radius: var(--kzf-radius);
	background: var(--kzf-grau);
	overflow: hidden;
}

.kzf-gm-detail__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kzf-gm-detail__bild--leer {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kzf-gedaempft);
}

.kzf-gm-detail__daumen {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.kzf-gm .kzf-gm-detail__daumen-knopf {
	width: 80px;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--kzf-radius-klein);
	background: var(--kzf-grau);
	overflow: hidden;
	cursor: pointer;
}

.kzf-gm .kzf-gm-detail__daumen-knopf:hover {
	background: var(--kzf-grau);
}

.kzf-gm .kzf-gm-detail__daumen-knopf.is-an {
	border-color: var(--kzf-tuerkis);
}

.kzf-gm-detail__daumen-knopf img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kzf-gm-detail__info {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.kzf-gm-detail__preis {
	margin: 0;
	font-family: var(--kzf-schrift-titel);
	font-size: 1.9rem;
	font-weight: 800;
}

.kzf-gm-detail__fakten {
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
	font-size: 0.95rem;
	line-height: 1.7;
}

.kzf-gm-detail__beschreibung {
	margin: 2rem 0;
}

.kzf-gm .kzf-gm-detail__beschreibung h2 {
	margin: 0 0 0.6rem;
	font-size: 1.25rem;
}

.kzf-gm-detail__beschreibung p {
	margin: 0;
	line-height: 1.7;
	white-space: normal;
}

/* Größere Bildschirme ---------------------------------------------- */

@media (min-width: 560px) {
	.kzf-gm__raster {
		grid-template-columns: repeat(2, 1fr);
	}

	.kzf-gm__raster-form {
		grid-template-columns: repeat(2, 1fr);
	}

	.kzf-gm__feld--breit {
		grid-column: 1 / -1;
	}

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

	.kzf-gm__feld--paar > div {
		display: flex;
	}

	.kzf-gm__panel {
		padding: 1.75rem;
	}
}

@media (min-width: 900px) {
	.kzf-gm__kopf {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
	}

	.kzf-gm__kopf .kzf-gm__knopf--gross {
		flex: 0 0 auto;
	}

	.kzf-gm__raster {
		grid-template-columns: repeat(3, 1fr);
	}

	/*
	 * stretch statt start: Die Kurzanleitung links wächst bis zur Höhe des
	 * Such-Alarms rechts. Vorher endete die linke Spalte früher, und
	 * daneben stand eine weiße Fläche ohne Zweck.
	 */
	.kzf-gm__leiste {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: stretch;
	}

	/*
	 * Drei Spalten, zwei Zeilen: Sechs Filter nebeneinander wären so
	 * schmal, dass „Alle Anzeigen" abgeschnitten würde, und auto-fit
	 * ergab vier plus zwei, also eine halb leere zweite Zeile.
	 */
	.kzf-gm__felder {
		grid-template-columns: repeat(3, 1fr);
	}

	.kzf-gm-detail__oben {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

/* Fuß: Nachbarbereiche und Magazin ---------------------------------- */

.kzf-gm-fuss {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--kzf-linie);
}

.kzf-gm-fuss__block + .kzf-gm-fuss__block {
	margin-top: 2.5rem;
}

/*
 * Schlicht und kräftig wie die Überschrift der Werkzeug-Kacheln auf den
 * Revierseiten. Der türkise Strich, der hier zwischenzeitlich stand, kommt
 * dort nicht vor und hätte zwei Stellen mit gleicher Aufgabe verschieden
 * aussehen lassen.
 */
.kzf-gm .kzf-gm-fuss__titel {
	margin: 0 0 1.25rem;
	font-size: clamp(1.3rem, 2.6vw, 1.6rem);
}

.kzf-gm-fuss__reihe {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.kzf-gm-fuss__karte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.1rem;
	border: 1px solid var(--kzf-linie);
	border-radius: var(--kzf-radius);
	background: var(--kzf-flaeche);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.kzf-gm-fuss__karte:hover {
	box-shadow: 0 10px 26px rgba(26, 47, 51, 0.1);
	transform: translateY(-2px);
}

/*
 * Werkzeug-Kacheln wie im mu-plugin kzf-werkzeug-kacheln, das auf den
 * Revierseiten steht: weiße Karte, türkise Markenzeile, kurzer Titel,
 * Beschreibung, oranger Knopf. Maße und Farben sind von dort übernommen,
 * damit beide Stellen gleich aussehen.
 */
.kzf-gm-fuss__reihe--werkzeuge {
	grid-template-columns: 1fr;
	gap: 14px;
}

.kzf-gm-werkzeug {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px;
	border: 1px solid #edf2f7;
	border-radius: 8px;
	background: var(--kzf-flaeche);
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.kzf-gm-werkzeug:hover,
.kzf-gm-werkzeug:focus-within {
	border-color: var(--kzf-tuerkis);
	transform: translateY(-2px);
}

.kzf-gm-werkzeug__marke {
	font-family: var(--kzf-schrift-titel);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--kzf-tuerkis);
}

.kzf-gm .kzf-gm-werkzeug__titel {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--kzf-dunkel);
}

.kzf-gm-werkzeug__titel a {
	color: inherit;
	text-decoration: none;
}

/* Die ganze Kachel ist klickbar, ohne verschachtelte Verweise. */
.kzf-gm-werkzeug__titel a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.kzf-gm-werkzeug__text {
	margin: 0;
	flex-grow: 1;
	font-size: 14px;
	line-height: 1.5;
	color: #718096;
}

.kzf-gm-werkzeug__knopf {
	align-self: flex-start;
	margin-top: 4px;
	padding: 8px 18px;
	border-radius: 30px;
	background: var(--kzf-signal);
	font-size: 15px;
	color: #fff;
	transition: background-color 0.18s ease;
}

.kzf-gm-werkzeug:hover .kzf-gm-werkzeug__knopf,
.kzf-gm-werkzeug:focus-within .kzf-gm-werkzeug__knopf {
	background: var(--kzf-signal-tief);
}

/*
 * Beitragskarten: Bild oben randlos, Text mit Innenabstand. Diese Regeln
 * waren beim Umbau der Werkzeug-Kacheln versehentlich mit herausgefallen,
 * dadurch stand ein hochformatiges Filmplakat 366 Pixel hoch neben zwei
 * Bildern mit 128 und 144 Pixeln.
 */
/*
 * Der Innenabstand steht an der Karte, und das Bild bricht mit negativen
 * Rändern aus ihm aus. Vorher trugen die Textelemente eigene Ränder, und
 * die Regel für die Kartenüberschrift weiter unten setzte sie wieder auf
 * null: Der Titel klebte am Rand, die Rubrik darüber nicht.
 */
.kzf-gm-fuss__karte--beitrag {
	padding: 0 1.1rem 1.1rem;
	overflow: hidden;
}

/*
 * Fester Kasten im Verhältnis 16:9, das Bild absolut darin. Eine
 * Prozenthöhe allein genügt nicht: Sie braucht eine feste Höhe am
 * Elternteil, ein Seitenverhältnis reicht dem Browser nicht.
 */
.kzf-gm-fuss__bild {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	margin: 0 -1.1rem 0.8rem;
	background: var(--kzf-grau);
	overflow: hidden;
}

.kzf-gm-fuss__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kzf-gm .kzf-gm-fuss__karte-titel {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.3;
}

.kzf-gm-fuss__karte-titel a {
	color: inherit;
	text-decoration: none;
}

/* Die ganze Karte ist klickbar, ohne verschachtelte Verweise. */
.kzf-gm-fuss__karte-titel a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.kzf-gm-fuss__karte-titel a:hover {
	color: var(--kzf-tuerkis-tief);
}

.kzf-gm-fuss__karte-text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--kzf-gedaempft);
}

.kzf-gm-fuss__mehr {
	margin-top: auto;
	padding-top: 0.7rem;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--kzf-tuerkis-tief);
}

.kzf-gm-fuss__rubrik {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--kzf-tuerkis-tief);
}

.kzf-gm-fuss__datum {
	font-size: 0.82rem;
	color: var(--kzf-gedaempft);
}

.kzf-gm-fuss__alle {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.92rem;
	color: var(--kzf-dunkel);
}

/*
 * auto-fit statt fester Dreiteilung: Fehlt ein Nachbarplugin oder gibt es
 * erst zwei Beiträge, verteilen sich die vorhandenen Karten über die ganze
 * Breite, statt eine Lücke stehen zu lassen.
 */
@media (min-width: 560px) {
	.kzf-gm-fuss__reihe {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}

	/*
	 * Zwei Spalten, wie in der Vorlage. Vier Kacheln nebeneinander wären zu
	 * schmal: Der Beschreibungstext braucht rund 30 Zeichen je Zeile, sonst
	 * zerfällt er in Silben.
	 */
	.kzf-gm-fuss__reihe--werkzeuge {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Bei ungerader Zahl zieht sich die letzte Kachel über beide Spalten.
	 * Fünf Werkzeuge ergeben sonst zwei volle Zeilen und darunter eine
	 * halbe, und genau solche Lücken sollen nicht stehen bleiben.
	 */
	.kzf-gm-werkzeug:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* ---------- Takt des Newsletters (Rhythmusfrage) ---------- */

.kzf-gm__takt {
	border: 0;
	padding: 0;
	margin: 0.6rem 0 0;
}

.kzf-gm__takt legend {
	padding: 0;
	margin-bottom: 0.3rem;
	font-weight: 600;
}