/* ==========================================================================
   KK FAQ – Übersichtsseite

   Filter und Suche tragen bewusst dieselbe Gestalt wie die Merkmale der
   Customer Cases: Beschriftung darüber, hellblaues Feld, Symbol links,
   weiße Pille mit dem Wert.
   ========================================================================== */

.kkfaq-uebersicht {
	--kkfaq-blau: var( --wp--preset--color--darkblue, #001843 );
	--kkfaq-hellblau: var( --wp--preset--color--lighterblue, #EBEEF6 );
	--kkfaq-perkins: var( --wp--preset--color--perkins, #003087 );
	--kkfaq-weiss: var( --wp--preset--color--background, #fff );
}

/* ---- Leiste ---- */

.kkfaq-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: clamp( 20px, 2.4vw, 38px );
	row-gap: 20px;
	margin-bottom: clamp( 34px, 4vw, 60px );
}

.kkfaq-merkmal {
	min-width: 340px;
}

.kkfaq-merkmal--suche {
	flex: 1 1 340px;
	max-width: 520px;
}

.kkfaq-merkmal__label {
	display: block;
	margin-bottom: 9px;
	font-size: var( --wp--preset--font-size--medium, 16px );
	font-weight: 400;
	line-height: 1.2;
	color: var( --wp--preset--color--foreground, #000 );
}

.kkfaq-merkmal__feld {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px;
	border-radius: 8px;
	background: var( --kkfaq-hellblau );
	color: var( --kkfaq-blau );
	text-decoration: none;
	list-style: none;
}

.kkfaq-merkmal--kategorie .kkfaq-merkmal__feld {
	display: inline-flex;
	cursor: pointer;
}

.kkfaq-merkmal__feld::-webkit-details-marker {
	display: none;
}

.kkfaq-merkmal__symbol {
	display: block;
	flex: 0 0 auto;
	width: 26px;
	margin-left: 8px;
	color: var( --kkfaq-blau );
}

.kkfaq-merkmal__symbol svg {
	display: block;
	width: 100%;
	height: auto;
}

.kkfaq-merkmal__wert {
	display: block;
	padding: 6px 22px;
	border-radius: 6px;
	background: var( --kkfaq-weiss );
	font-size: var( --wp--preset--font-size--medium, 16px );
	font-weight: 700;
	line-height: 1.35;
	color: var( --kkfaq-blau );
	white-space: nowrap;
}

.kkfaq-auswahl[open] > .kkfaq-merkmal__feld .kkfaq-merkmal__wert,
.kkfaq-merkmal__feld:hover .kkfaq-merkmal__wert {
	color: var( --kkfaq-perkins );
}

/* ---- Suchfeld: dieselbe weiße Pille, nur eingabefähig ---- */

.kkfaq-merkmal--suche .kkfaq-merkmal__feld {
	width: 100%;
}

input.kkfaq-suche {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	border: 0;
	outline: 0;
	white-space: normal;
	-webkit-appearance: none;
	appearance: none;
}

input.kkfaq-suche::placeholder {
	color: var( --kkfaq-blau );
	font-weight: 400;
	opacity: 0.55;
}

input.kkfaq-suche::-webkit-search-cancel-button {
	cursor: pointer;
}

.kkfaq-merkmal__feld:focus-within {
	outline: 2px solid var( --kkfaq-perkins );
	outline-offset: 2px;
}

.kkfaq-auswahl > summary:focus-visible {
	outline: 2px solid var( --kkfaq-perkins );
	outline-offset: 2px;
}

/* ---- Aufklappbare Auswahl ---- */

.kkfaq-auswahl {
	position: relative;
}

.kkfaq-auswahl__liste {
	position: absolute;
	z-index: 20;
	top: calc( 100% + 6px );
	left: 0;
	min-width: 100%;
	max-height: min( 60vh, 460px );
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	padding: 18px 0;
	background: var( --kkfaq-hellblau );
	border-radius: 4px;
	box-shadow: 0 18px 30px rgba( 0, 24, 67, 0.12 );
}

.kkfaq-auswahl__eintrag {
	padding: 8px 30px;
	font-size: var( --wp--preset--font-size--medium, 16px );
	font-weight: 700;
	line-height: 1.3;
	color: var( --kkfaq-blau );
	text-decoration: none;
	white-space: nowrap;
}

.kkfaq-auswahl__eintrag--kind {
	padding-left: 52px;
	font-weight: 400;
}

.kkfaq-auswahl__eintrag:hover,
.kkfaq-auswahl__eintrag:focus-visible {
	color: var( --kkfaq-perkins );
	background: rgba( 255, 255, 255, 0.65 );
}

.kkfaq-auswahl__eintrag.is-aktiv {
	background: var( --kkfaq-weiss );
}

.kkfaq-los {
	align-self: flex-end;
	padding: 12px 26px;
	border: 0;
	border-radius: 8px;
	background: var( --kkfaq-perkins );
	color: var( --kkfaq-weiss );
	font-weight: 700;
	cursor: pointer;
}

/* ---- Gruppen ---- */

/* Mindestens 5rem zwischen zwei Kategorien.

   Bewusst padding statt margin: das Theme setzt "* + section" auf
   margin-block-start: 0 !important - ein Aussenabstand kaeme hier also
   nicht an, ohne selbst !important zu setzen.

   Und der allgemeine Geschwister-Kombinator statt "+", damit ein
   ausgefilterter Zweig dazwischen dem ersten sichtbaren Zweig keinen
   Vorlauf verpasst. */
.kkfaq-zweig:not( .is-hidden ) ~ .kkfaq-zweig:not( .is-hidden ) {
	padding-top: max( 5rem, 5vw );
}

.kkfaq-zweig__titel {
	margin: 0 0 clamp( 18px, 2vw, 30px );
}

.kkfaq-block + .kkfaq-block {
	margin-top: clamp( 26px, 3vw, 44px );
}

.kkfaq-block__titel {
	margin: 0 0 12px;
	font-weight: 300;
	color: var( --wp--preset--color--foreground, #000 );
}

/* Die Fragen stehen je nach Kategorie auf unterschiedlicher Ueberschriften-
   ebene (h3 direkt unter der Kategorie, h4 unter einer Unterkategorie). Das
   Thema faerbt h4 grau - hier sollen aber alle Fragen gleich aussehen. */
.kkfaq-uebersicht .kk-faq__q,
.kkfaq-uebersicht .kk-faq__trigger {
	color: var( --kkfaq-blau );
	letter-spacing: normal;
	text-transform: none;
}

.kkfaq-zweig.is-hidden,
.kkfaq-block.is-hidden {
	display: none;
}

.kkfaq-leer {
	margin: 0;
	padding: 22px 0;
	color: var( --kkfaq-blau );
}

.kkfaq-leer[hidden] {
	display: none;
}

@media ( max-width: 600px ) {
	.kkfaq-merkmal,
	.kkfaq-merkmal--suche {
		min-width: 0;
		flex-basis: 100%;
		max-width: none;
	}

	.kkfaq-merkmal--kategorie .kkfaq-merkmal__feld {
		display: flex;
	}

	.kkfaq-merkmal__wert {
		white-space: normal;
	}
}