/*
 * Kundenstimmen-Galerie
 *
 * Bewusst dieselbe Formensprache wie der Zitat-Block (weiße Karte, 1px
 * #E1E4E7, blaues Anführungszeichen, Attribution in Blau-Dunkel) — es sind
 * dieselben Inhalte in anderer Menge, nicht ein zweites Gestaltungssystem.
 * Kein Rot: Referenzen sind Beleg, kein Handlungsaufruf.
 */

.mb-kg-titel {
	font-size: 1.9rem;
	margin: 0 0 10px;
}
.mb-kg-einleitung {
	max-width: 680px;
	margin: 0 0 28px;
	color: var(--wp--preset--color--grau-dunkel, #595959);
}

/* ===== Filterleiste ===== */
.mb-kg-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}

/* 1.22.0 — zweite Filterachse (Rolle). Die Beschriftung macht erst klar,
   dass es zwei verschiedene Achsen sind und nicht eine lange Reihe. */
.mb-kg-filter-label {
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5A6570;
	margin-right: 2px;
	/* Auf dem Telefon steht die Beschriftung über der Reihe, nicht davor —
	   sonst bleibt für den ersten Knopf kaum Platz. */
	flex: 0 0 auto;
}
@media (max-width: 480px) {
	.mb-kg-filter-label {
		flex: 1 0 100%;
		margin-bottom: 2px;
	}
}
.mb-kg-filter-rollen {
	margin-bottom: 14px;
}
.mb-kg-filter-btn {
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid #E1E4E7;
	background: #fff;
	color: var(--wp--preset--color--blau-dunkel, #00325E);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* 1.33.0 — Hover gefüllt statt nur umrandet.
 *
 * Vorher setzte diese Regel nur Rahmen und Hintergrund. Die Textfarbe kam
 * dann von Kadence: Das Mutter-Theme stylt `button:hover` MIT Textfarbe,
 * und `button:hover` (0,1,1) ist spezifischer als unsere Klasse
 * `.mb-kg-filter-btn` (0,1,0) — also gewann Kadence und färbte die Schrift
 * weiß auf fast weißem Grund. Deshalb steht die Textfarbe hier jetzt
 * ausdrücklich; dasselbe Muster an allen anderen Knöpfen, siehe CHANGELOG.
 *
 * Gefüllt statt hell: So sprechen Überfahren und Ausgewählt dieselbe
 * Sprache und unterscheiden sich nur durch die Dauer. */
.mb-kg-filter-btn:hover {
	border-color: var(--wp--preset--color--blau, #004C99);
	background: var(--wp--preset--color--blau, #004C99);
	color: #fff;
}
.mb-kg-filter-btn.is-aktiv {
	background: var(--wp--preset--color--blau, #004C99);
	border-color: var(--wp--preset--color--blau, #004C99);
	color: #fff;
}
.mb-kg-filter-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--blau, #004C99);
	outline-offset: 2px;
}
.mb-kg-status {
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.78rem;
	color: var(--wp--preset--color--grau, #969696);
	margin: 0 0 20px;
	min-height: 1.2em; /* verhindert Sprünge, wenn der Text erscheint */
}

/* ===== Anordnung ===== */
.mb-kg-liste {
	display: grid;
	gap: 20px;
}
.mb-kg.is-raster .mb-kg-liste {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	align-items: start;
}
.mb-kg.is-liste .mb-kg-liste {
	grid-template-columns: 1fr;
	max-width: 760px;
}

/* ===== Karte ===== */
.mb-kg-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #E1E4E7;
	border-radius: 16px;
	overflow: hidden;
	margin: 0;
	transition: box-shadow 0.18s;
}
.mb-kg-karte:hover { box-shadow: 0 14px 30px rgba(14, 27, 38, 0.10); }

.mb-kg-foto {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--blau-hell, #EEF4FA);
}
.mb-kg-foto img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* Projektregel: Porträts werden nie beschnitten. */
	display: block;
}

.mb-kg-inhalt {
	padding: 24px 26px 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.mb-kg-mark {
	font-family: 'Sora', sans-serif;
	font-size: 2.2rem;
	line-height: 0.6;
	font-weight: 800;
	color: var(--wp--preset--color--blau) !important;
	margin-bottom: 12px;
}
.mb-kg-text {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	flex: 1;
}
.mb-kg-text p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink, #0E1B26);
}
.mb-kg-attr {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--grau, #969696);
}
.mb-kg-person { color: var(--wp--preset--color--blau-dunkel, #00325e); }

/* Liste: Foto seitlich statt oben — mehr Textbreite, weniger Scrollweg. */
.mb-kg.is-liste .mb-kg-karte.hat-foto { flex-direction: row; }
.mb-kg.is-liste .mb-kg-foto {
	width: 170px;
	min-width: 170px;
	aspect-ratio: auto;
	height: auto;
}
.mb-kg.is-liste .mb-kg-inhalt { justify-content: center; }

/* ===== „Mehr lesen" — natives details/summary, kein JS ===== */
.mb-kg-details { margin: 0; }
.mb-kg-details summary {
	cursor: pointer;
	list-style: none;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink, #0E1B26);
}
.mb-kg-details summary::-webkit-details-marker { display: none; }
.mb-kg-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--blau, #004C99);
	outline-offset: 3px;
	border-radius: 4px;
}
.mb-kg-more,
.mb-kg-less {
	display: inline-block;
	margin-left: 6px;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--wp--preset--color--blau);
	white-space: nowrap;
}
.mb-kg-less { display: none; }
.mb-kg-details[open] .mb-kg-more { display: none; }
.mb-kg-details[open] .mb-kg-less { display: inline-block; }
.mb-kg-details[open] .mb-kg-kurz { display: none; } /* sonst steht der Anreißer doppelt */
.mb-kg-voll {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink, #0E1B26);
}

/* Ausgeblendete Karten beim Filtern */
.mb-kg-karte[hidden] { display: none !important; }

@media (max-width: 640px) {
	.mb-kg.is-raster .mb-kg-liste { grid-template-columns: 1fr; }
	.mb-kg.is-liste .mb-kg-karte.hat-foto { flex-direction: column; }
	.mb-kg.is-liste .mb-kg-foto {
		width: 140px;
		min-width: 0;
		aspect-ratio: 4 / 5;
		margin: 22px auto 0;
		border-radius: 12px;
		overflow: hidden;
	}
	.mb-kg-titel { font-size: 1.4rem; }
}