/**
 * SD KI-Sichtbarkeits-Check
 *
 * ============================================================================
 * ANPASSUNG
 *
 * Farben, Schriften und Größen stehen im Block direkt darunter. Schrift und
 * Größe lassen sich auch ohne CSS im Backend setzen: KI-Check → Einstellungen.
 *
 * Ab "Ab hier nichts mehr ändern" folgt nur noch Layout, das auf diese Werte
 * zugreift.
 * ============================================================================
 */

.sd-kic {

	/* --- FARBEN --------------------------------------------------------
	 *
	 * Die Primärfarbe wird in dieser Reihenfolge gesucht:
	 *   1. --sd-kic-accent-override   (Ihr manueller Wert)
	 *   2. --wp--preset--color--*     (aus der theme.json)
	 *   3. per JavaScript gemessen    (Farbe eines Theme-Buttons)
	 *   4. Fallback am Ende der Kette
	 *
	 * Verlässlichster Weg, updatesicher im Theme:
	 *   .sd-kic { --sd-kic-accent-override: #ihrwert; }
	 */

	--sd-kic-accent:
		var( --sd-kic-accent-override,
		var( --wp--preset--color--primary,
		var( --wp--preset--color--accent,
		var( --wp--preset--color--theme-primary,
		#15171a ) ) ) );

	--sd-kic-accent-ink: var( --sd-kic-accent-ink-override, #ffffff );

	/* Farbe beim Überfahren. Gesucht wird in dieser Reihenfolge:
	   eigener Wert aus dem Backend, dann --cta bzw. eine Zweitfarbe aus dem
	   Theme, sonst wird sie per JavaScript aus der Primärfarbe abgeleitet.
	   Ziel ist ein echter Farbwechsel wie bei den übrigen Buttons der Seite,
	   nicht nur ein Aufhellen. */
	--sd-kic-accent-hover:
		var( --sd-kic-accent-hover-override,
		var( --cta,
		var( --wp--preset--color--secondary,
		var( --sd-kic-accent ) ) ) );

	--sd-kic-accent-hover-ink: var( --sd-kic-accent-hover-ink-override, var( --sd-kic-accent-ink ) );
	--sd-kic-accent-2: var( --sd-kic-accent-2-override, var( --sd-kic-accent ) );

	/* Achtung: hier NICHT "inherit" eintragen. Bei Custom Properties macht
	   das die Variable leer, nicht "wie das Theme". Die Folge waere unsichtbare
	   Schrift. Immer einen konkreten Farbwert setzen. */
	--sd-kic-ink: #15171a;
	--sd-kic-muted: #56606a;
	--sd-kic-line: #e2e6ea;
	--sd-kic-line-strong: #c9d0d7;
	--sd-kic-surface: #f6f8f9;
	--sd-kic-paper: #ffffff;

	/* --- AMPEL -----------------------------------------------------------
	 * Bewusst unabhängig von der CI: Status muss lesbar bleiben, auch wenn
	 * die Primärfarbe zufällig grün ist.
	 */

	--sd-kic-pass: #16794a;
	--sd-kic-warn: #a1590a;
	--sd-kic-fail: #b3261e;
	--sd-kic-error: #b3261e;

	--sd-kic-pass-bg: #e8f4ee;
	--sd-kic-warn-bg: #fbf0e2;
	--sd-kic-fail-bg: #fbeceb;

	/* --- SCHRIFT ---------------------------------------------------------
	 * "inherit" übernimmt die Schrift des Themes. Für eine eigene Schrift
	 * hier den vollständigen CSS-Wert eintragen, z. B.:
	 *   --sd-kic-font-display: "Barlow", sans-serif;
	 * Das Plugin lädt selbst keine Webfonts nach.
	 */

	--sd-kic-font-display: inherit;
	--sd-kic-font-body: inherit;
	--sd-kic-weight-display: 700;

	/* Alle Größen hängen an diesem Faktor. Auch im Backend einstellbar. */
	--sd-kic-scale: 1;

	--sd-kic-radius: 10px;
	--sd-kic-radius-sm: 6px;

	/* Mindestabstand nach oben, wenn das Ergebnis angesprungen wird.
	   Eine fixierte Kopfzeile wird zusätzlich automatisch gemessen und
	   berücksichtigt; dieser Wert ist nur die Untergrenze. */
	--sd-kic-scroll-offset: 2rem;

	/* ====================================================================
	 * Ab hier nichts mehr ändern.
	 * ==================================================================== */

	/* Typografische Leiter. Kleinster Wert ist 0.875rem: darunter wird es
	   auf Mobilgeräten unlesbar. */
	--sd-kic-fs-xs: calc( 0.875rem * var( --sd-kic-scale ) );
	--sd-kic-fs-sm: calc( 0.9375rem * var( --sd-kic-scale ) );
	--sd-kic-fs-md: calc( 1.0625rem * var( --sd-kic-scale ) );
	--sd-kic-fs-lg: calc( 1.25rem * var( --sd-kic-scale ) );
	--sd-kic-fs-xl: calc( 1.6rem * var( --sd-kic-scale ) );

	--sd-kic-gap: 1.25rem;
	--sd-kic-pad: 1.5rem;

	max-width: 52rem;
	font-family: var( --sd-kic-font-body );
	font-size: var( --sd-kic-fs-md );
	line-height: 1.6;
	color: var( --sd-kic-ink );
}

/* Der Check muss auch in einem dunklen Abschnitt lesbar sein. Deshalb hat
   jeder Bereich eine eigene helle Flaeche und eine eigene dunkle Schrift,
   statt sich auf das Theme zu verlassen. */
.sd-kic__panel-surface,
.sd-kic__cat,
.sd-kic__form,
.sd-kic__gate,
.sd-kic__score,
.sd-kic__section,
.sd-kic__blind {
	color: var( --sd-kic-ink );
}

.sd-kic *,
.sd-kic *::before,
.sd-kic *::after {
	box-sizing: border-box;
}

/* Listen-Reset. Themes geben ul/li fast immer einen Einzug mit, und der
   verschiebt sonst ganze Blöcke nach rechts. Kein Listenpunkt im Check
   braucht einen Marker: die Statuszeichen sind eigene Elemente.
   Doppelte Selektoren nur, um Theme-Regeln sicher zu überschreiben. */
.sd-kic ul.sd-kic__cats,
.sd-kic ul.sd-kic__findings,
.sd-kic ul.sd-kic__blind-list,
.sd-kic ul.sd-kic__score-stats {
	margin: 0;
	padding: 0;
	list-style: none;
	text-indent: 0;
}

.sd-kic ul.sd-kic__cats > li,
.sd-kic ul.sd-kic__findings > li,
.sd-kic ul.sd-kic__blind-list > li,
.sd-kic ul.sd-kic__score-stats > li {
	margin-left: 0;
	list-style: none;
	text-indent: 0;
}

.sd-kic ul.sd-kic__cats > li::marker,
.sd-kic ul.sd-kic__findings > li::marker,
.sd-kic ul.sd-kic__blind-list > li::marker,
.sd-kic ul.sd-kic__score-stats > li::marker {
	content: "";
}

.sd-kic h2,
.sd-kic h3,
.sd-kic h4 {
	font-family: var( --sd-kic-font-display );
	font-weight: var( --sd-kic-weight-display );
	line-height: 1.2;
}

/* ---------------------------------------------------------------------------
 * Eingabeformular
 * ------------------------------------------------------------------------ */

.sd-kic__headline {
	margin: 0 0 var( --sd-kic-gap );
	font-size: var( --sd-kic-fs-xl );
}

/* Eingabebereich als Karte: sonst steht der Hinweistext darunter direkt auf
   dem Seitenhintergrund und ist auf dunklen Abschnitten nicht lesbar. */
.sd-kic__form {
	padding: var( --sd-kic-pad );
	border: 1px solid var( --sd-kic-line );
	border-radius: var( --sd-kic-radius );
	background: var( --sd-kic-paper );
}

.sd-kic__form .sd-kic__label:first-of-type {
	margin-top: 0;
}

.sd-kic__label {
	display: block;
	margin: 0.9rem 0 0.4rem;
	font-size: var( --sd-kic-fs-sm );
	font-weight: 600;
}

.sd-kic__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.sd-kic__input {
	flex: 1 1 17rem;
	min-width: 0;
	padding: 0.85rem 1rem;
	border: 1px solid var( --sd-kic-line-strong );
	border-radius: var( --sd-kic-radius-sm );
	background: var( --sd-kic-paper );
	font: inherit;
	font-size: var( --sd-kic-fs-md );
	color: var( --sd-kic-ink );
}

.sd-kic__input::placeholder {
	color: var( --sd-kic-muted );
	opacity: 0.75;
}

.sd-kic__input:focus-visible,
.sd-kic__button:focus-visible,
.sd-kic__accordion:focus-visible,
.sd-kic__consent input:focus-visible {
	outline: 2px solid var( --sd-kic-accent );
	outline-offset: 2px;
}

.sd-kic__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0.85rem 1.5rem;
	border: 1px solid var( --sd-kic-accent );
	border-radius: var( --sd-kic-radius-sm );
	background: var( --sd-kic-accent );
	color: var( --sd-kic-accent-ink );
	font: inherit;
	font-size: var( --sd-kic-fs-md );
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease,
		color 0.18s ease, transform 0.15s ease;
}

.sd-kic__button:hover,
.sd-kic__button:focus-visible {
	border-color: var( --sd-kic-accent-hover );
	background: var( --sd-kic-accent-hover );
	color: var( --sd-kic-accent-hover-ink );
	transform: translateY( -1px );
}

.sd-kic__button[disabled] {
	opacity: 0.5;
	transform: none;
	cursor: progress;
}

/* Honeypot: unsichtbar, aber nicht display:none. */
.sd-kic__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sd-kic__note,
.sd-kic__gate-intro {
	margin: 0.7rem 0 0;
	font-size: var( --sd-kic-fs-xs );
	color: var( --sd-kic-muted );
}

.sd-kic__status {
	margin-top: 0.85rem;
	font-size: var( --sd-kic-fs-md );
	scroll-margin-top: var( --sd-kic-scroll-offset );
	color: var( --sd-kic-ink );
}

.sd-kic__status:not( :empty ) {
	padding: 0.85rem 1.1rem;
	border: 1px solid var( --sd-kic-line );
	border-radius: var( --sd-kic-radius-sm );
	background: var( --sd-kic-paper );
}

.sd-kic__status:empty {
	margin-top: 0;
}

.sd-kic__status.is-error {
	border-color: var( --sd-kic-fail );
	background: var( --sd-kic-fail-bg );
	color: var( --sd-kic-error );
	font-weight: 600;
}

/* Die Erfolgsmeldung ist der erste Satz, den man nach dem Freischalten
   liest. Sie bekommt deshalb Fläche statt nur Farbe. */
.sd-kic__status.is-success {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid var( --sd-kic-pass );
	border-radius: var( --sd-kic-radius-sm );
	background: var( --sd-kic-pass-bg );
	color: var( --sd-kic-pass );
	font-size: var( --sd-kic-fs-md );
	font-weight: 600;
	line-height: 1.4;
}

.sd-kic__status.is-success::before {
	content: "\2713";
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background: var( --sd-kic-pass );
	color: #fff;
	font-size: 0.8rem;
	line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Score
 * ------------------------------------------------------------------------ */

.sd-kic__result,
.sd-kic__detail {
	margin-top: var( --sd-kic-gap );
	scroll-margin-top: var( --sd-kic-scroll-offset );
}

.sd-kic__score {
	padding: var( --sd-kic-pad );
	border: 1px solid var( --sd-kic-line );
	border-radius: var( --sd-kic-radius );
	background: var( --sd-kic-paper );
	box-shadow: 0 1px 2px rgba( 16, 24, 32, 0.04 );
}

/* Ampelstufe als lokale Variable. */
.sd-kic__score.is-pass,
.sd-kic__report-intro.is-pass,
.sd-kic__section.is-pass,
.sd-kic__finding.is-pass,
.sd-kic__cat.is-pass {
	--sd-kic-status: var( --sd-kic-pass );
	--sd-kic-status-bg: var( --sd-kic-pass-bg );
}

.sd-kic__score.is-warn,
.sd-kic__report-intro.is-warn,
.sd-kic__section.is-warn,
.sd-kic__finding.is-warn,
.sd-kic__cat.is-warn {
	--sd-kic-status: var( --sd-kic-warn );
	--sd-kic-status-bg: var( --sd-kic-warn-bg );
}

.sd-kic__score.is-fail,
.sd-kic__report-intro.is-fail,
.sd-kic__section.is-fail,
.sd-kic__finding.is-fail,
.sd-kic__cat.is-fail {
	--sd-kic-status: var( --sd-kic-fail );
	--sd-kic-status-bg: var( --sd-kic-fail-bg );
}

.sd-kic__score-main {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

/* Kompakte Kategorienzeile im Report. Ersetzt den Überblick, den vor der
   Freischaltung der Teaser geliefert hat. */
.sd-kic ul.sd-kic__score-stats {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1.25rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --sd-kic-line );
}

.sd-kic__stat.is-pass { --sd-kic-status: var( --sd-kic-pass ); }
.sd-kic__stat.is-warn { --sd-kic-status: var( --sd-kic-warn ); }
.sd-kic__stat.is-fail { --sd-kic-status: var( --sd-kic-fail ); }

.sd-kic__stat-label {
	display: block;
	font-size: var( --sd-kic-fs-xs );
	color: var( --sd-kic-muted );
}

.sd-kic__stat-value {
	display: block;
	margin-top: 0.1rem;
	font-family: var( --sd-kic-font-display );
	font-weight: var( --sd-kic-weight-display );
	font-size: var( --sd-kic-fs-lg );
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
	color: var( --sd-kic-status );
}

.sd-kic__stat-value i {
	font-style: normal;
	font-weight: 400;
	font-size: var( --sd-kic-fs-sm );
	color: var( --sd-kic-muted );
}

.sd-kic__dial {
	flex: none;
	width: 104px;
	height: 104px;
}

.sd-kic__dial-track {
	fill: none;
	stroke: var( --sd-kic-line );
	stroke-width: 8;
}

.sd-kic__dial-value {
	fill: none;
	stroke: var( --sd-kic-status, var( --sd-kic-accent ) );
	stroke-width: 8;
	stroke-linecap: round;
	transform: rotate( -90deg );
	transform-origin: 50% 50%;
	transition: stroke-dashoffset 1.1s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.sd-kic__dial-text {
	fill: var( --sd-kic-status, var( --sd-kic-accent ) );
	font-family: var( --sd-kic-font-display );
	font-weight: var( --sd-kic-weight-display );
	font-size: 30px;
	text-anchor: middle;
}

.sd-kic__dial-sub {
	fill: var( --sd-kic-muted );
	font-size: 11px;
	text-anchor: middle;
}

.sd-kic__score-body {
	min-width: 0;
}

.sd-kic__score-eyebrow {
	margin: 0;
	font-size: var( --sd-kic-fs-xs );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --sd-kic-muted );
}

.sd-kic__score-level {
	margin: 0.15rem 0 0;
	font-family: var( --sd-kic-font-display );
	font-weight: var( --sd-kic-weight-display );
	font-size: var( --sd-kic-fs-lg );
	color: var( --sd-kic-status, var( --sd-kic-ink ) );
}

.sd-kic__score-url {
	margin: 0.25rem 0 0;
	font-size: var( --sd-kic-fs-xs );
	color: var( --sd-kic-muted );
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Messhinweis
 * ------------------------------------------------------------------------ */

.sd-kic__notice {
	display: grid;
	grid-template-columns: 1.6rem 1fr;
	gap: 0.85rem;
	margin-top: var( --sd-kic-gap );
	padding: 1.15rem var( --sd-kic-pad );
	border: 1px solid var( --sd-kic-line );
	border-left: 4px solid var( --sd-kic-warn );
	border-radius: var( --sd-kic-radius );
	background: var( --sd-kic-paper );
	color: var( --sd-kic-ink );
}

.sd-kic__notice-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 999px;
	background: var( --sd-kic-warn-bg );
	color: var( --sd-kic-warn );
	font-size: var( --sd-kic-fs-xs );
	font-weight: 700;
	font-style: italic;
	line-height: 1;
}

.sd-kic__notice-text {
	font-size: var( --sd-kic-fs-sm );
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Kategorien im Teaser
 * ------------------------------------------------------------------------ */

.sd-kic ul.sd-kic__cats {
	margin-top: var( --sd-kic-gap );
	display: grid;
	gap: 0.85rem;
}

/* Wie die Kategorie-Karten im Report: eigene Fläche, eigene Schriftfarbe.
   Sonst stehen sie im Teaser direkt auf dem Seitenhintergrund und sind auf
   dunklen Abschnitten nicht lesbar. */
.sd-kic__cat {
	padding: 1.15rem var( --sd-kic-pad );
	border: 1px solid var( --sd-kic-line );
	border-radius: var( --sd-kic-radius );
	background: var( --sd-kic-paper );
	color: var( --sd-kic-ink );
}

.sd-kic__cat-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.6rem;
}

.sd-kic__cat-label {
	font-weight: 600;
}

.sd-kic__cat-score {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-weight: 600;
	color: var( --sd-kic-status, var( --sd-kic-muted ) );
}

.sd-kic__bar {
	margin: 0.5rem 0;
	height: 8px;
	border-radius: 999px;
	background: var( --sd-kic-line );
	overflow: hidden;
}

.sd-kic__bar span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: var( --sd-kic-status, var( --sd-kic-accent ) );
	transition: width 0.9s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.sd-kic__cat-intro {
	margin: 0.3rem 0 0;
	font-size: var( --sd-kic-fs-xs );
	color: var( --sd-kic-muted );
}

.sd-kic__cat-open {
	margin: 0.2rem 0 0;
	font-size: var( --sd-kic-fs-xs );
	font-weight: 600;
	color: var( --sd-kic-status, var( --sd-kic-muted ) );
}

/* ---------------------------------------------------------------------------
 * Gate
 * ------------------------------------------------------------------------ */

.sd-kic__gate {
	margin-top: var( --sd-kic-gap );
	padding: var( --sd-kic-pad );
	border: 1px solid var( --sd-kic-line );
	border-radius: var( --sd-kic-radius );
	background: var( --sd-kic-surface );
}

.sd-kic__gate-title {
	margin: 0;
	font-size: var( --sd-kic-fs-lg );
}

.sd-kic__gate .sd-kic__input {
	width: 100%;
	flex: none;
	background: var( --sd-kic-paper );
}

.sd-kic__consent {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	margin: 1.15rem 0;
	font-size: var( --sd-kic-fs-xs );
	line-height: 1.55;
}

.sd-kic__consent input {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15rem;
	flex: none;
}

/* ---------------------------------------------------------------------------
 * Report
 * ------------------------------------------------------------------------ */

/* Einordnung: kein weiterer Kasten, sondern eine ruhige Textfläche mit
   farbiger Kante. So bleibt sie vom Score-Block und den Karten darunter
   unterscheidbar, ohne mit ihnen um Aufmerksamkeit zu konkurrieren. */
.sd-kic__report-intro {
	position: relative;
	margin: 1.75rem 0 0;
	padding: 1.15rem 1.35rem 1.15rem 1.5rem;
	border-radius: var( --sd-kic-radius );
	background: var( --sd-kic-paper );
	color: var( --sd-kic-ink );
	overflow: hidden;
}

.sd-kic__report-intro::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	border-radius: 999px;
	background: var( --sd-kic-status, var( --sd-kic-accent ) );
}

.sd-kic__report-intro-eyebrow {
	margin: 0 0 0.35rem;
	font-size: var( --sd-kic-fs-xs );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --sd-kic-status, var( --sd-kic-muted ) );
}

.sd-kic__report-intro-text {
	margin: 0;
	max-width: 40rem;
	font-size: var( --sd-kic-fs-lg );
	font-weight: 500;
	line-height: 1.5;
	text-wrap: pretty;
}

.sd-kic__section {
	margin-top: 1.25rem;
	padding: var( --sd-kic-pad );
	border: 1px solid var( --sd-kic-line );
	border-radius: var( --sd-kic-radius );
	background: var( --sd-kic-paper );
}

/* Schmaler Streifen in der Ampelfarbe: zeigt den Status der Karte, ohne
   die ganze Fläche einzufärben. */
.sd-kic__section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
	margin: 0 0 0.35rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var( --sd-kic-status, var( --sd-kic-line ) );
	font-size: var( --sd-kic-fs-lg );
}

.sd-kic__section-score {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	font-family: var( --sd-kic-font-body );
	font-weight: 600;
	font-size: var( --sd-kic-fs-xs );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var( --sd-kic-status );
	background: var( --sd-kic-status-bg );
}

.sd-kic__section-intro {
	margin: 0.7rem 0 1rem;
	font-size: var( --sd-kic-fs-sm );
	color: var( --sd-kic-muted );
}

.sd-kic ul.sd-kic__findings {
	margin: 0;
	padding: 0;
}

.sd-kic__finding {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: 0.85rem;
	padding: 1rem 0;
	align-items: start;
}

.sd-kic__finding + .sd-kic__finding {
	border-top: 1px solid var( --sd-kic-line );
}

.sd-kic__finding-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	color: var( --sd-kic-status );
	background: var( --sd-kic-status-bg );
	font-size: var( --sd-kic-fs-xs );
	font-weight: 700;
	line-height: 1;
}

.sd-kic__finding-body {
	min-width: 0;
}

.sd-kic__finding-label {
	display: block;
	font-weight: 600;
	font-size: var( --sd-kic-fs-md );
	line-height: 1.45;
}

.sd-kic__finding.is-fail .sd-kic__finding-label {
	color: var( --sd-kic-status );
}

.sd-kic__finding-advice {
	display: block;
	margin-top: 0.3rem;
	font-size: var( --sd-kic-fs-sm );
	line-height: 1.6;
}

.sd-kic__finding-evidence {
	display: block;
	margin-top: 0.5rem;
	padding: 0.4rem 0.65rem;
	border-radius: var( --sd-kic-radius-sm );
	background: var( --sd-kic-surface );
	font-size: var( --sd-kic-fs-xs );
	color: var( --sd-kic-muted );
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Akkordeon
 *
 * Ganze Zeile ist die Schaltfläche, nicht ein Textlink. Mindesthöhe 3rem für
 * Touch. Zustand steht im Text, nicht nur im Pfeil.
 * ------------------------------------------------------------------------ */

.sd-kic__done {
	margin-top: 1.15rem;
}

.sd-kic__accordion {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: 1px solid var( --sd-kic-line );
	border-radius: var( --sd-kic-radius-sm );
	background: var( --sd-kic-surface );
	font: inherit;
	font-size: var( --sd-kic-fs-sm );
	color: var( --sd-kic-ink );
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.sd-kic__accordion-hint {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sd-kic__accordion:hover {
	border-color: var( --sd-kic-line-strong );
	background: var( --sd-kic-paper );
}

.sd-kic__accordion[aria-expanded="true"] {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: transparent;
	background: var( --sd-kic-paper );
}

.sd-kic__accordion-count {
	flex: none;
	min-width: 1.75rem;
	padding: 0.2rem 0.55rem;
	text-align: center;
	border-radius: 999px;
	background: var( --sd-kic-pass-bg );
	color: var( --sd-kic-pass );
	font-size: var( --sd-kic-fs-xs );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sd-kic__accordion-text {
	flex: 1 1 auto;
	font-weight: 600;
}

.sd-kic__accordion-hint {
	flex: none;
	font-size: var( --sd-kic-fs-xs );
	font-weight: 400;
	color: var( --sd-kic-muted );
}

.sd-kic__accordion-chevron {
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 2px solid var( --sd-kic-ink );
	border-bottom: 2px solid var( --sd-kic-ink );
	transform: rotate( -45deg );
	transition: transform 0.2s ease;
}

.sd-kic__accordion[aria-expanded="true"] .sd-kic__accordion-chevron,
.sd-kic__blind-head[aria-expanded="true"] .sd-kic__accordion-chevron {
	transform: rotate( 45deg );
}

/* Aufklappen ueber grid-template-rows: animiert auch bei unbekannter
   Inhaltshoehe, ohne feste Pixelwerte. */
.sd-kic__panel {
	display: grid;
	grid-template-rows: 0fr;
	border: 1px solid var( --sd-kic-line );
	border-top: 0;
	border-radius: 0 0 var( --sd-kic-radius-sm ) var( --sd-kic-radius-sm );
	transition: grid-template-rows 0.28s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.sd-kic__panel[data-open="true"] {
	grid-template-rows: 1fr;
}

.sd-kic__panel-inner {
	overflow: hidden;
}

.sd-kic__panel-inner {
	overflow: hidden;
}

/* Innenabstand wie bei der Schaltfläche darüber: das Statuszeichen steht
   damit auf einer Kante mit dem Zahl-Badge im Kopf.
   Frühere Fassung zog die Liste mit negativen Außenabständen über den Rahmen
   hinaus — das Zeichen klebte dann am Rahmen. */
.sd-kic .sd-kic__panel ul.sd-kic__findings {
	padding: 0 1rem 0.5rem;
}

/* Solange zu, ist der Rahmen unsichtbar: sonst haengt eine leere Linie
   unter der Schaltflaeche. */
.sd-kic__panel[data-open="false"] {
	border-color: transparent;
}

/* ---------------------------------------------------------------------------
 * Blinde Flecken
 *
 * Bewusst dieselbe Zeilenform wie ein echter Befund, aber ohne Ergebnis.
 * Das schraffierte Feld steht für "nicht gemessen", nicht für "verborgen".
 * ------------------------------------------------------------------------ */

.sd-kic__blind {
	margin-top: 2.25rem;
	border: 1px solid var( --sd-kic-line );
	border-radius: var( --sd-kic-radius );
	background: var( --sd-kic-paper );
	overflow: hidden;
}

/* Der Kopf bleibt immer sichtbar und ist gleichzeitig die Schaltfläche. */
.sd-kic__blind-head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: 1rem;
	width: 100%;
	padding: var( --sd-kic-pad );
	border: 0;
	background: none;
	font: inherit;
	color: var( --sd-kic-ink );
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease;
}

.sd-kic__blind-head:hover {
	background: var( --sd-kic-surface );
}

.sd-kic__blind-head:focus-visible {
	outline: 2px solid var( --sd-kic-accent );
	outline-offset: -4px;
}

.sd-kic__blind-body {
	min-width: 0;
}

.sd-kic__blind-head .sd-kic__accordion-chevron {
	margin-top: 0.5rem;
}

.sd-kic__blind-eyebrow {
	display: block;
	font-size: var( --sd-kic-fs-xs );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --sd-kic-muted );
}

.sd-kic__blind-title {
	display: block;
	margin: 0.35rem 0 0.5rem;
	font-family: var( --sd-kic-font-display );
	font-weight: var( --sd-kic-weight-display );
	font-size: var( --sd-kic-fs-lg );
	line-height: 1.2;
}

.sd-kic__blind-lead {
	display: block;
	margin: 0 0 1rem;
	font-size: var( --sd-kic-fs-sm );
	color: var( --sd-kic-muted );
}

/* Der Satz, der das Ergebnis einordnet. Bewusst im sichtbaren Teil und
   farblich abgesetzt: er ist der Grund, warum jemand weiterliest. */
.sd-kic__blind-caveat {
	display: block;
	margin: 0 0 1rem;
	padding: 0.85rem 1.1rem;
	border-left: 3px solid var( --sd-kic-warn );
	border-radius: 0 var( --sd-kic-radius-sm ) var( --sd-kic-radius-sm ) 0;
	background: var( --sd-kic-warn-bg );
	font-size: var( --sd-kic-fs-sm );
	font-weight: 500;
	line-height: 1.55;
	color: var( --sd-kic-ink );
}

.sd-kic__blind-head .sd-kic__accordion-hint {
	display: inline-block;
	font-weight: 600;
	color: var( --sd-kic-accent );
}

.sd-kic ul.sd-kic__blind-list {
	padding: 0 var( --sd-kic-pad ) 0.5rem;
	border-top: 1px solid var( --sd-kic-line );
}

.sd-kic__blind-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.35rem 1rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid var( --sd-kic-line );
}

.sd-kic__blind-label {
	font-weight: 600;
	font-size: var( --sd-kic-fs-md );
}

.sd-kic__blind-reason {
	grid-column: 1;
	font-size: var( --sd-kic-fs-xs );
	color: var( --sd-kic-muted );
}

/* Schraffur statt Ergebniswert. */
.sd-kic__blind-state {
	grid-row: 1;
	grid-column: 2;
	align-self: start;
	padding: 0.3rem 0.7rem;
	border: 1px solid var( --sd-kic-line-strong );
	border-radius: 999px;
	background: repeating-linear-gradient(
		135deg,
		transparent,
		transparent 4px,
		var( --sd-kic-line ) 4px,
		var( --sd-kic-line ) 6px
	);
	font-size: var( --sd-kic-fs-xs );
	font-weight: 600;
	color: var( --sd-kic-muted );
	white-space: nowrap;
}

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

.sd-kic__cta {
	position: relative;
	overflow: hidden;
	margin-top: 1.25rem;
	padding: 2.25rem var( --sd-kic-pad );
	border-radius: var( --sd-kic-radius );
	background: var( --sd-kic-accent );
	color: var( --sd-kic-accent-ink );
}

.sd-kic__cta > * {
	position: relative;
	z-index: 1;
}

.sd-kic__cta-eyebrow {
	margin: 0 0 0.5rem;
	font-size: var( --sd-kic-fs-xs );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

.sd-kic__cta-title {
	margin: 0 0 0.7rem;
	max-width: 30rem;
	font-size: var( --sd-kic-fs-xl );
	color: inherit;
}

.sd-kic__cta-text {
	margin: 0 0 1.6rem;
	max-width: 34rem;
	font-size: var( --sd-kic-fs-sm );
	line-height: 1.65;
	opacity: 0.9;
}

.sd-kic__cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.25rem;
}

.sd-kic__button--invert {
	border-color: var( --sd-kic-accent-ink );
	background: var( --sd-kic-accent-ink );
	color: var( --sd-kic-accent );
}

/* Auf dem Abschluss-Panel steht der Button auf der Primärfarbe. Der Wechsel
   auf dieselbe Hover-Farbe wie die übrigen Buttons hebt sich davon ab. */
.sd-kic__button--invert:hover,
.sd-kic__button--invert:focus-visible {
	border-color: var( --sd-kic-accent-hover );
	background: var( --sd-kic-accent-hover );
	color: var( --sd-kic-accent-hover-ink );
}

/* ---------------------------------------------------------------------------
 * Bewegung
 * ------------------------------------------------------------------------ */

@keyframes sd-kic-in {
	from { opacity: 0; transform: translateY( 10px ); }
	to   { opacity: 1; transform: none; }
}

@keyframes sd-kic-pop {
	0%   { transform: scale( 0.4 ); opacity: 0; }
	70%  { transform: scale( 1.1 ); opacity: 1; }
	100% { transform: scale( 1 ); }
}

@keyframes sd-kic-spin {
	to { transform: rotate( 360deg ); }
}

.sd-kic__animate {
	opacity: 0;
	animation: sd-kic-in 0.5s cubic-bezier( 0.22, 1, 0.36, 1 ) forwards;
	animation-delay: var( --sd-kic-delay, 0ms );
}

.sd-kic__finding-mark {
	animation: sd-kic-pop 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ) backwards;
	animation-delay: var( --sd-kic-delay, 0ms );
}

.sd-kic__spinner {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-right: 0.5rem;
	border: 2px solid var( --sd-kic-line );
	border-top-color: var( --sd-kic-accent );
	border-radius: 999px;
	vertical-align: -0.1em;
	animation: sd-kic-spin 0.7s linear infinite;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media ( max-width: 36rem ) {
	.sd-kic {
		--sd-kic-pad: 1.15rem;
	}

	.sd-kic__score {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.sd-kic__section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
	}

	.sd-kic__score-stats {
		grid-template-columns: 1fr;
		gap: 0.9rem;
	}

	.sd-kic__report-intro {
		padding-left: 1.1rem;
	}

	.sd-kic__blind-item {
		grid-template-columns: 1fr;
	}

	.sd-kic__blind-state {
		grid-row: auto;
		grid-column: 1;
		justify-self: start;
		margin-top: 0.2rem;
	}

	.sd-kic__accordion-hint {
		display: none;
	}

	.sd-kic__section {
		padding: 1.15rem;
	}

	.sd-kic__blind-head {
		padding: 1.15rem;
	}

	.sd-kic ul.sd-kic__blind-list {
		padding-left: 1.15rem;
		padding-right: 1.15rem;
	}

	.sd-kic__button {
		width: 100%;
	}

	.sd-kic__cta-actions .sd-kic__button {
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sd-kic .sd-kic__bar span,
	.sd-kic .sd-kic__dial-value,
	.sd-kic .sd-kic__accordion,
	.sd-kic .sd-kic__accordion-chevron,
	.sd-kic .sd-kic__panel,
	.sd-kic .sd-kic__button {
		transition: none;
	}

	.sd-kic .sd-kic__animate,
	.sd-kic .sd-kic__finding-mark,
	.sd-kic .sd-kic__spinner {
		opacity: 1;
		animation: none;
	}
}

@media print {
	.sd-kic__form,
	.sd-kic__gate,
	.sd-kic__cta,
	.sd-kic__accordion {
		display: none;
	}

	.sd-kic__panel {
		grid-template-rows: 1fr;
		border: 0;
	}

	.sd-kic__animate {
		opacity: 1;
		animation: none;
	}
}