/*
 * gif Kennzahlenkatalog - Styles
 * Nutzt die globalen Elementor-Kit-Variablen (--color-*, --space-*, --font-family-*,
 * --gutter-*, --container-max) mit Fallback-Werten aus dem Kit-Export, damit die
 * Optik auch ausserhalb des Elementor-Kontexts (z. B. lokale Vorschau) nicht bricht.
 */

/*
 * WICHTIG: Die --gk-* Variablen muessen auf :root stehen, nicht auf .gk-root.
 * .gk-submitbar wird von gif-kennzahlen.js an <body> gehaengt (Portal) und ist
 * damit KEIN Nachfahre von .gk-root mehr - waeren die Variablen nur dort
 * definiert, wuerden alle var(--gk-...) in der Absende-Bar ins Leere laufen
 * (unsichtbarer/transparenter Hintergrund). Auf :root sind sie fuer die
 * gesamte Seite verfuegbar, unabhaengig von der DOM-Position.
 */
:root {
	--gk-primary: var(--color-primary, #0069AF);
	--gk-primary-dark: var(--color-primary-dark, #005088);
	--gk-on-primary: var(--color-on-primary, #FFFFFF);
	--gk-on-primary-muted: var(--color-on-primary-muted, #D4E6FF);
	--gk-accent: var(--color-accent, #FECF00);
	--gk-accent-text: var(--color-accent-text, #6F5900);
	--gk-text: var(--color-text, #1C1B1B);
	--gk-text-muted: var(--color-text-muted, #414751);
	--gk-bg-page: var(--color-bg-page, #FCF9F8);
	--gk-bg-surface: var(--color-bg-surface, #FFFFFF);
	--gk-bg-subtle: var(--color-bg-subtle, #F6F3F2);
	--gk-bg-muted: var(--color-bg-muted, #F0EDEC);
	--gk-border: var(--color-border-gray, #EBE7E7);
	--gk-border-subtle: var(--color-border-subtle, #C0C7D2);
	--gk-secondary: var(--color-secondary, #725C00);
	--gk-secondary-fixed: var(--color-secondary-fixed, #FFE082);
	--gk-on-secondary-fixed: var(--color-on-secondary-fixed, #231B00);
	--gk-tertiary: var(--color-tertiary, #464D63);
	--gk-tertiary-fixed: var(--color-tertiary-fixed, #DAE2FD);
	--gk-primary-fixed: var(--color-primary-fixed, #D1E4FF);

	--gk-font: var(--font-family-default, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--gk-font-heading: var(--font-family-heading, Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--gk-font-mono: var(--font-family-mono, "JetBrains Mono", ui-monospace, Consolas, monospace);

	--gk-2xs: var(--space-2xs, .25rem);
	--gk-xs: var(--space-xs, .5rem);
	--gk-sm: var(--space-sm, .75rem);
	--gk-md: var(--space-md, 1rem);
	--gk-lg: var(--space-lg, 1.5rem);
	--gk-xl: var(--space-xl, 2rem);
	--gk-2xl: var(--space-2xl, 3rem);
	--gk-3xl: var(--space-3xl, 4rem);

	--gk-gutter: var(--gutter-desktop, 1.5rem);
	--gk-gutter-mobile: var(--gutter-mobile, 1rem);
	--gk-container-max: var(--container-max, 80rem);

	/* Fallback, falls JS die tatsaechliche Hoehe nicht messen kann; wird sonst
	   von gif-kennzahlen.js live auf die echte Bar-Hoehe gesetzt. */
	--gk-submitbar-height: 5.5rem;
}

.gk-root {
	display: block;
	max-width: var(--gk-container-max);
	margin-inline: auto;
	padding-inline: var(--gk-gutter-mobile);
	font-family: var(--gk-font);
	color: var(--gk-text);
	box-sizing: border-box;
	/* Sicherheitsnetz: einzelne lange, nicht trennbare Woerter (z. B. deutsche
	   Komposita in Namen/Definitionen) duerfen die Seite nie breiter als den
	   Viewport machen. */
	overflow-wrap: break-word;
}

.gk-root, .gk-root *, .gk-root *::before, .gk-root *::after,
.gk-submitbar, .gk-submitbar *, .gk-submitbar *::before, .gk-submitbar *::after,
.gk-overlay, .gk-overlay *, .gk-overlay *::before, .gk-overlay *::after {
	box-sizing: border-box;
}

/* Verhindert Doppel-Scrollbalken/Hintergrund-Scroll auf Mobil, waehrend das
   Absende-Overlay geoeffnet ist (siehe gif-kennzahlen.js: openOverlay/closeOverlay). */
body.gk-overlay-open {
	overflow: hidden;
}

@media (min-width: 768px) {
	.gk-root {
		padding-inline: var(--gk-gutter);
	}
}

.gk-root button {
	font-family: inherit;
	cursor: pointer;
}

/*
 * Das Theme "Hello Elementor" bringt in reset.css eine eigene Default-Optik fuer
 * Buttons mit: [type=button],[type=submit],button { border: 1px solid #c36;
 * color: #c36; ... } (verifiziert per curl gegen die ausgelieferte reset.css).
 * "[type=button]" hat die gleiche Spezifitaet wie eine einzelne Klasse und laedt
 * NACH unserem Plugin-CSS, gewinnt also die pinke/rote Kante+Schrift.
 *
 * Hier NUR border/box-shadow/outline neutralisiert (die Theme-Regel ist NICHT
 * !important, ein einfaches !important reicht dafuer). background-color/color
 * werden bewusst NICHT hier pauschal gesetzt, sondern erst unten je Element
 * (.gk-chip, .gk-reset, .gk-submit-btn) - sonst wuerde dieser breitere
 * Selektor (Klasse+Typ = hoehere Spezifitaet) die spezifischeren !important-
 * Regeln der einzelnen Komponenten weiter unten ueberstimmen.
 */
.gk-root button,
.gk-submitbar button,
.gk-overlay button {
	border: 1px solid transparent !important;
	border-radius: 0;
}

/* ---------- Filterleiste ---------- */

.gk-filterbar {
	/* Bewusst NICHT sticky (mehr): eine fixierte/klebende Filterleiste konnte
	   auf kleinen Mobil-Viewports Inhalte ueberlagern. Fliesst jetzt normal
	   im Dokument mit. */
	width: 100%;
	max-width: 100%;
	background: var(--gk-bg-page);
	padding-block: var(--gk-sm) 0;
	margin-bottom: var(--gk-xl);
	box-sizing: border-box;
}

.gk-filterbar-inner {
	width: 100%;
	max-width: 100%;
	background: var(--gk-bg-surface);
	border-radius: 0.75rem;
	box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.08);
	padding: var(--gk-md);
	display: flex;
	flex-direction: column;
	gap: var(--gk-md);
	box-sizing: border-box;
}

/*
 * Flex-Items verweigern per Spec ohne "min-width: 0" das Schrumpfen unter die
 * intrinsische Breite ihres Inhalts (bekannter Flexbox-"min-width:auto"-Bug).
 * Genau das war die Ursache dafuer, dass Filterleiste UND Chip-Reihen bei
 * 393px rechts ueber den Viewport hinausliefen, statt zu umbrechen/scrollen.
 * Pauschal fuer alle direkten Kinder der Filterleisten-Flex-Container gesetzt,
 * statt jedes Element einzeln nachzuziehen.
 */
.gk-filterbar-inner > *,
.gk-filter-row > * {
	min-width: 0;
}

.gk-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gk-sm);
	max-width: 100%;
}

.gk-filter-row--top {
	justify-content: space-between;
}

/*
 * Toggle "Weitere Filter": Kategorie- und Ebenen-Chips (die grosse, oft nicht
 * relevante Mehrheit der Filteroptionen) stehen standardmaessig nicht im Weg,
 * halten die Leiste kompakt - siehe .gk-more-filters darunter.
 */
.gk-root .gk-more-filters-toggle {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background-color: transparent !important;
	/* Siehe Kommentar bei .gk-reset - vergroessert die Touch-Trefferflaeche. */
	padding: 0.625rem 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gk-primary) !important;
}

.gk-more-filters-toggle:hover {
	text-decoration: underline;
}

.gk-more-filters-chevron {
	font-size: 0.65rem;
	transition: transform 150ms ease;
}

.gk-more-filters-toggle[aria-expanded="true"] .gk-more-filters-chevron {
	transform: rotate(180deg);
}

.gk-more-filters {
	display: flex;
	flex-direction: column;
	gap: var(--gk-sm);
	padding-top: var(--gk-xs);
	border-top: 1px solid var(--gk-border);
}

.gk-more-filters[hidden] {
	display: none;
}

.gk-filter-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gk-md);
	padding-top: var(--gk-xs);
	border-top: 1px solid var(--gk-border);
}

.gk-search {
	position: relative;
	flex: 1 1 260px;
	max-width: 28rem;
}

.gk-search-icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.9rem;
	line-height: 1;
	opacity: 0.6;
	pointer-events: none;
	/* Muss ueber dem Eingabefeld liegen, DARF aber nie den eingegebenen Text
	   ueberdecken - das regelt allein der linke Innenabstand des Inputs
	   unten (2.5rem), nicht dieser z-index. */
	z-index: 1;
}

/*
 * ".gk-root .gk-search-input" (2 Klassen) + !important auf dem Innenabstand:
 * Hello Elementors reset.css setzt fuer Formularfelder einen eigenen Padding-
 * Wert (gleiches Muster wie bei Buttons/Chips oben dokumentiert). Ohne die
 * zusaetzliche Spezifitaet gewinnt dieser Reset, der linke Innenabstand faellt
 * weg und der Cursor-/Eingabetext beginnt links UNTER dem Lupen-Icon.
 */
.gk-root .gk-search-input {
	position: relative;
	width: 100%;
	height: 2.5rem;
	padding-left: 2.5rem !important;
	padding-right: 0.75rem !important;
	border-radius: 0.5rem;
	border: 1px solid transparent;
	background: var(--gk-bg-subtle);
	color: var(--gk-text);
	font-size: 0.875rem;
	font-family: inherit;
	box-sizing: border-box;
}

.gk-search-input:focus {
	outline: none;
	background: var(--gk-bg-muted);
}

.gk-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	max-width: 100%;
}

.gk-chips-scroll {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.gk-chips--category {
	flex-wrap: nowrap;
	overflow-x: auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding-block: 0.25rem;
	padding-right: 1.75rem;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

/* Sichtbarer Hinweis ("Fade-out"), dass die Kategorie-Chips weitergehen. */
.gk-chips-scroll::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0.25rem;
	width: 2.25rem;
	background: linear-gradient(to right, transparent, var(--gk-bg-surface));
	pointer-events: none;
}

.gk-chips-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--gk-text-muted);
	margin-right: var(--gk-2xs);
}

/*
 * ".gk-root .gk-chip" statt nur ".gk-chip": 2 Klassen schlagen den breiteren
 * Theme-Reset-Selektor oben (1 Klasse + Typ "button") an Spezifitaet, damit
 * die chip-neutral-Optik zuverlaessig gewinnt statt vom Reset "plattgemacht"
 * zu werden.
 */
.gk-root .gk-chip {
	/* chip-neutral: bg-subtle, text-muted, kein farbiger Rahmen */
	flex-shrink: 0;
	border-radius: 9999px;
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1rem;
	background-color: var(--gk-bg-subtle) !important;
	color: var(--gk-text-muted) !important;
	transition: background-color 150ms ease, color 150ms ease;
	white-space: nowrap;
}

.gk-root .gk-chip:hover {
	background-color: var(--gk-bg-muted) !important;
}

.gk-root .gk-chip.is-active {
	background-color: var(--gk-primary) !important;
	color: var(--gk-on-primary) !important;
}

.gk-chip-check {
	margin-right: 0.2rem;
}

/*
 * Cluster-Chips: langer Volltitel auf Desktop, kurze Form auf Mobil (z. B.
 * "Cluster 3: Wirkungen auf weitere Stakeholder, Umwelt und Gesellschaft (41)"
 * -> "Cluster 3 (41)") - der volle Titel allein war bei <=767px breiter als
 * der Viewport und liess den Chip ueberstehen.
 */
.gk-root .gk-chip-short {
	display: none !important;
}

@media (max-width: 767px) {
	.gk-root .gk-chip-full {
		display: none !important;
	}

	.gk-root .gk-chip-short {
		display: inline !important;
	}
}

/*
 * Cluster- und Ebene-Chip-Reihen liefen bei 375px trotz "gk-chip-short" bzw.
 * flex-wrap ueber den rechten Rand hinaus, sobald mehrere Chips zusammen
 * (bzw. ein einzelner, nicht umbrechender Chip - white-space:nowrap oben)
 * breiter als der Viewport waren. Gleiche Loesung wie bei ".gk-chips--category"
 * (siehe oben: nowrap + overflow-x:auto statt wrap) statt weiter zu versuchen,
 * jeden Chip-Text einzeln kurz genug zu halten.
 */
@media (max-width: 767px) {
	.gk-chips--cluster,
	.gk-chips--ebene {
		position: relative;
		flex-wrap: nowrap;
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow-x: auto;
		padding-block: 0.25rem;
		padding-right: 1.75rem;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.gk-chips--cluster::after,
	.gk-chips--ebene::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0.25rem;
		width: 2.25rem;
		background: linear-gradient(to right, transparent, var(--gk-bg-surface));
		pointer-events: none;
	}

	/* Damit die Cluster-Chips ihre eigene volle Zeile bekommen (statt neben
	   dem schrumpfenden Suchfeld zusammengequetscht zu werden) und die
	   Scroll-Zeile tatsaechlich die volle Breite zum Scrollen hat. */
	.gk-search {
		flex-basis: 100%;
	}

	.gk-chips-label {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

.gk-counter {
	font-family: var(--gk-font-mono);
	font-size: 0.8125rem;
	color: var(--gk-text-muted);
	white-space: nowrap;
}

.gk-root .gk-reset {
	background-color: transparent !important;
	/* padding-block statt padding:0 - reine Text-Links wie dieser hatten sonst
	   eine Trefferflaeche von nur der Zeilenhoehe (~19px), deutlich unter der
	   fuer Touch empfohlenen Mindesthoehe von ca. 44px. Vergroessert die
	   Trefferflaeche, ohne die Optik (kein Hintergrund/Rahmen) zu aendern. */
	padding: 0.625rem 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gk-primary) !important;
	white-space: nowrap;
}

.gk-reset:hover {
	text-decoration: underline;
}

/* ---------- Kategorie-Gruppen & Ueberschrift (einklappbar) ---------- */

.gk-list-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--gk-sm);
}

.gk-root .gk-expand-all {
	background-color: transparent !important;
	/* Siehe Kommentar bei .gk-reset - vergroessert die Touch-Trefferflaeche. */
	padding: 0.625rem 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gk-primary) !important;
}

.gk-expand-all:hover {
	text-decoration: underline;
}

.gk-category-group {
	margin-bottom: var(--gk-md);
}

.gk-category-group[hidden] {
	display: none;
}

/*
 * ".gk-root .gk-category-heading" (2 Klassen) statt nur ".gk-category-heading":
 * die Ueberschrift ist jetzt ein <button> (klickbar zum Auf-/Zuklappen) - ohne
 * die zusaetzliche Spezifitaet wuerde der globale Theme-Reset weiter oben
 * (".gk-root button", 1 Klasse + 1 Typ) den abgerundeten Hintergrund ueberschreiben.
 */
.gk-root .gk-category-heading {
	display: flex;
	width: 100%;
	/* Mindesthoehe fuer eine komfortable Touch-Trefferflaeche (~44px) - der
	   reine Inhalt (Icon + Text + Badges) waere sonst bei ca. 35px gelandet. */
	min-height: 2.75rem;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gk-2xs) var(--gk-sm);
	background: var(--gk-border) !important;
	padding: var(--gk-xs) var(--gk-md);
	border-radius: 0.5rem;
	text-align: left;
}

.gk-category-heading-text {
	display: flex;
	align-items: center;
	gap: var(--gk-xs);
	min-width: 0;
	font-family: var(--gk-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gk-text);
	overflow-wrap: break-word;
}

.gk-category-heading-icon {
	color: var(--gk-primary);
}

.gk-category-heading-meta {
	display: flex;
	/* Faellt-Badge + Anzahl-Badge + Chevron duerfen bei 375px nicht ueber den
	   rechten Rand hinauslaufen, wenn beide Badges gleichzeitig sichtbar sind
	   (Kategorie mit Treffern UND bereits vorhandenen Anmerkungen) - wrappen
	   statt ueberlaufen. */
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--gk-xs);
	flex-shrink: 0;
}

.gk-category-count {
	flex-shrink: 0;
	background: var(--gk-bg-surface);
	color: var(--gk-text-muted);
	font-family: var(--gk-font-mono);
	font-size: 0.75rem;
	padding: 0.125rem 0.625rem;
	border-radius: 9999px;
}

/* Zeigt an, dass in einer (ggf. eingeklappten) Kategorie schon kommentiert
   wurde - siehe updateCategoryFilledBadges() in gif-kennzahlen.js. */
.gk-category-filled {
	flex-shrink: 0;
	background: var(--gk-primary-fixed);
	color: var(--gk-primary-dark);
	font-family: var(--gk-font-mono);
	font-weight: 700;
	font-size: 0.75rem;
	padding: 0.125rem 0.625rem;
	border-radius: 9999px;
}

.gk-category-filled[hidden] {
	display: none;
}

.gk-category-chevron {
	flex-shrink: 0;
	color: var(--gk-text-muted);
	font-size: 0.7rem;
	transition: transform 150ms ease;
}

.gk-root .gk-category-heading[aria-expanded="true"] .gk-category-chevron {
	transform: rotate(180deg);
}

/*
 * Bei 375px passten Titel ("KATEGORIE 01 · GOVERNANCE/COMPLIANCE") + Badges
 * ("6 Kennzahlen im Fokus" + Chevron) nicht in eine Zeile: flex-wrap allein
 * liess den Browser den Titel zuerst bis an seine intrinsische (nicht
 * umgebrochene) Breite ausdehnen, bevor er auf die naechste Zeile umbricht -
 * dadurch lief er trotz overflow-wrap rechts raus. Erzwingt stattdessen
 * explizit: Titel = eigene volle Zeile, Badges darunter = eigene volle Zeile.
 */
@media (max-width: 767px) {
	.gk-root .gk-category-heading {
		align-items: flex-start;
	}

	.gk-category-heading-text {
		flex: 1 1 100%;
		font-size: 0.75rem;
		white-space: normal;
		hyphens: auto;
	}

	.gk-category-heading-meta {
		flex: 1 1 100%;
		justify-content: flex-start;
	}
}

/* Enthaelt die Kennzahlen-Zeilen einer Kategorie - per Klick auf die
   Ueberschrift auf-/zugeklappt (siehe setGroupExpanded() in gif-kennzahlen.js). */
.gk-category-body {
	padding-top: var(--gk-md);
}

.gk-category-body[hidden] {
	display: none;
}

/* ---------- Kennzahlen-Zeile ---------- */

.gk-row {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: var(--gk-lg);
	align-items: stretch;
	background: var(--gk-bg-surface);
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	padding: var(--gk-lg);
	margin-bottom: var(--gk-md);
}

.gk-row[hidden] {
	display: none;
}

@media (min-width: 1024px) {
	.gk-row {
		grid-template-columns: 3fr 2fr;
	}
}

/* Innenabstaende auf Mobil spuerbar reduzieren - Desktop-Werte (--gk-lg/--gk-2xl
   usw.) wirken auf 375px zu grosszuegig und kosten wertvolle Breite. */
@media (max-width: 767px) {
	.gk-row {
		padding: var(--gk-md);
		gap: var(--gk-md);
	}

	.gk-filterbar-inner {
		padding: var(--gk-sm);
	}

	.gk-kv {
		padding: var(--gk-sm);
	}

	.gk-name {
		font-size: 1rem;
	}

	/*
	 * iOS Safari zoomt beim Fokussieren automatisch in JEDES Formularfeld mit
	 * einer berechneten Schriftgroesse < 16px hinein - betrifft hier Suchfeld,
	 * Textareas und die Overlay-Felder (Name/E-Mail), alle unter 16px. Deshalb
	 * bewusst absolute 16px statt rem: die Grenze bezieht sich auf den
	 * tatsaechlichen Pixel-Wert, nicht auf die Basis-Schriftgroesse des Themes.
	 */
	.gk-search-input,
	.gk-textarea,
	.gk-input {
		font-size: 16px;
	}
}

.gk-row-left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--gk-md);
	min-width: 0;
}

.gk-row-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gk-xs);
}

.gk-id-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background: var(--gk-primary-fixed);
	color: var(--gk-primary-dark);
	font-family: var(--gk-font-mono);
	font-weight: 700;
	font-size: 0.8125rem;
	padding: 0.125rem 0.625rem;
	border-radius: 0.25rem;
}

.gk-id-badge-dot {
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 9999px;
	background: var(--gk-accent);
	display: inline-block;
}

.gk-name {
	margin: 0;
	font-family: var(--gk-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--gk-text);
	line-height: 1.4;
}

.gk-abk {
	font-family: var(--gk-font-mono);
	font-size: 0.8125rem;
	color: var(--gk-text-muted);
}

.gk-badge {
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 0.125rem 0.5rem;
	border-radius: 0.25rem;
	white-space: nowrap;
}

.gk-badge--alt {
	background: var(--gk-border);
	color: var(--gk-text-muted);
}

.gk-badge--neu {
	background: var(--gk-accent);
	color: var(--gk-accent-text);
}

.gk-alt-bezeichnung {
	margin: 0;
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--gk-text-muted);
}

.gk-definition {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--gk-text-muted);
}

/* Pro-Kennzahl-Toggle fuer Berechnung/Eingangsparameter/Angabe in (.gk-kv
   darunter) - Standard eingeklappt, kuerzt die sichtbare Zeile spuerbar. */
.gk-root .gk-details-toggle {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background-color: transparent !important;
	/* Siehe Kommentar bei .gk-reset - vergroessert die Touch-Trefferflaeche;
	   bei 111 Zeilen faellt eine zu kleine Trefferflaeche hier besonders auf. */
	padding: 0.625rem 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gk-primary) !important;
}

.gk-details-toggle:hover {
	text-decoration: underline;
}

.gk-details-toggle-chevron {
	font-size: 0.65rem;
	transition: transform 150ms ease;
}

.gk-details-toggle[aria-expanded="true"] .gk-details-toggle-chevron {
	transform: rotate(180deg);
}

.gk-kv {
	width: 100%;
	max-width: 100%;
	background: var(--gk-bg-subtle);
	border-radius: 0.5rem;
	padding: var(--gk-md);
	display: flex;
	flex-direction: column;
	gap: var(--gk-2xs);
	font-size: 0.8125rem;
	box-sizing: border-box;
}

.gk-kv[hidden] {
	display: none;
}

.gk-kv-row {
	display: flex;
	align-items: flex-start;
	gap: var(--gk-xs);
	width: 100%;
	max-width: 100%;
}

.gk-kv-label {
	flex-shrink: 0;
	width: 9.5rem;
	font-weight: 600;
	color: var(--gk-text);
}

.gk-kv-value {
	min-width: 0;
	flex: 1 1 auto;
	color: var(--gk-text-muted);
	overflow-wrap: break-word;
	word-break: normal;
}

.gk-kv-value.gk-mono {
	font-family: var(--gk-font-mono);
	color: var(--gk-primary);
	/* Nur ueber overflow-wrap (bricht ein Wort ausschliesslich, wenn es
	   allein schon zu breit fuer die Zeile ist) statt des aelteren
	   word-break:break-word - letzteres kann in Kombination mit einer
	   (durch Flex-Verschachtelung) kollabierten Containerbreite dazu fuehren,
	   dass buchstabenweise umgebrochen wird, wie hier beobachtet. */
	word-break: normal;
}

/*
 * Bei <=767px: Label ueber statt neben dem Wert. "display:block" statt
 * flex-direction:column - vermeidet verschachtelte Flex-Breitenberechnung
 * (Ursache des buchstabenweisen Umbruchs), Wert bekommt garantiert die volle
 * Blockbreite und kann an Leerzeichen normal umbrechen.
 */
@media (max-width: 767px) {
	.gk-kv-row {
		display: block;
	}

	.gk-kv-label {
		display: block;
		width: auto;
		margin-bottom: 0.125rem;
	}

	.gk-kv-value {
		display: block;
		width: 100%;
	}
}

.gk-kv-value.gk-strong {
	font-weight: 600;
	color: var(--gk-text);
}

.gk-ebenen-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	padding-top: var(--gk-2xs);
}

.gk-ebene-chip {
	background: var(--gk-bg-muted);
	color: var(--gk-text-muted);
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.25rem 0.625rem;
	border-radius: 0.25rem;
}

/* ---------- Anmerkungs-Spalte ---------- */

.gk-row-right {
	/* min-width:0 wie bei .gk-row-left: Formularelemente (hier: die Textarea
	   weiter unten) koennen als Grid-/Flex-Item sonst eine "automatische
	   Mindestbreite" > 0 erzwingen und die ganze Zeile ueber den Viewport
	   hinaus breiter machen ("Grid Blowout"). */
	min-width: 0;
	background: var(--gk-bg-subtle);
	border: 1px solid var(--gk-border);
	border-radius: 0.5rem;
	padding: var(--gk-md);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--gk-sm);
	min-height: 100%;
}

.gk-row-right-top {
	display: flex;
	flex-direction: column;
	gap: var(--gk-xs);
}

.gk-right-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gk-xs);
}

.gk-right-label {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gk-text);
}

.gk-right-label-icon {
	color: var(--gk-primary);
}

.gk-draft-status {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--gk-primary);
	white-space: nowrap;
	min-height: 1rem;
}

.gk-draft-status:empty {
	visibility: hidden;
}

.gk-draft-status::before {
	content: '';
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 9999px;
	background: var(--gk-primary);
	display: inline-block;
}

.gk-textarea {
	/* Feste Hoehe statt nur "rows" (Browser berechnen rows-Hoehe je nach eigener
	   Default-Line-Height leicht unterschiedlich) - ~4 Zeilen bei 0.8125rem/1.5. */
	height: 6.5rem;
	width: 100%;
	/* Formularelemente bekommen von Haus aus eine "automatische Mindestbreite" >
	   0, die width:100% ignorieren kann, sobald der Elternkontext (hier: Grid)
	   Platz knapp bemisst - explizit auf 0 setzen, sonst droht Ueberlauf ueber
	   den Viewport hinaus auf schmalen Screens. */
	min-width: 0;
	resize: none;
	overflow-y: auto;
	border-radius: 0.5rem;
	border: 1px solid var(--gk-border);
	background: var(--gk-bg-surface);
	color: var(--gk-text);
	padding: var(--gk-sm);
	font-family: inherit;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.gk-textarea:focus {
	outline: 2px solid var(--gk-primary);
	outline-offset: 1px;
}

.gk-row-right-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gk-xs);
	font-size: 0.75rem;
	color: var(--gk-text-muted);
}

.gk-char-count {
	font-family: var(--gk-font-mono);
	white-space: nowrap;
}

/* ---------- Keine Treffer / Erfolg / Fehler ---------- */

.gk-no-results {
	text-align: center;
	color: var(--gk-text-muted);
	padding: var(--gk-2xl) 0;
}

.gk-success,
.gk-error {
	border-radius: 0.75rem;
	padding: var(--gk-md) var(--gk-lg);
	margin-top: var(--gk-xl);
}

.gk-success {
	display: flex;
	flex-direction: column;
	gap: var(--gk-md);
	background: var(--gk-bg-subtle);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.gk-error {
	display: flex;
	align-items: center;
	gap: var(--gk-md);
}

.gk-success[hidden],
.gk-error[hidden] {
	display: none;
}

.gk-success-header {
	display: flex;
	align-items: center;
	gap: var(--gk-md);
}

/* Leere Liste (kein Erfolg bisher, oder Reset) nicht als leere Box mit
   Rahmen/Hintergrund anzeigen. */
.gk-success-list:empty {
	display: none;
}

.gk-success-icon {
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 9999px;
	background: var(--gk-primary-fixed);
	color: var(--gk-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
}

.gk-success-text h4 {
	margin: 0 0 0.25rem;
	font-family: var(--gk-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--gk-text);
}

.gk-success-text p {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--gk-text-muted);
}

.gk-error {
	background: #FBE9E7;
	color: #8a1f11;
	font-size: 0.875rem;
	font-weight: 600;
}

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

.gk-bottom-spacer {
	height: var(--gk-submitbar-height);
}

/* ---------- Absende-Bar (fixiert) ---------- */

.gk-submitbar {
	/* Wird von gif-kennzahlen.js zusaetzlich direkt an <body> gehaengt, damit
	   position:fixed garantiert relativ zum Viewport bleibt und nicht durch
	   irgendeinen verschachtelten Elementor-Container beeinflusst wird. */
	position: fixed !important;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	width: 100%;
	z-index: 99999;
	background-color: var(--gk-bg-surface) !important;
	border-top: 1px solid var(--gk-border);
	box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
	padding: 0.875rem var(--gk-gutter-mobile);
	font-family: var(--gk-font);
	box-sizing: border-box;
	overflow-wrap: break-word;
}

@media (min-width: 768px) {
	.gk-submitbar {
		padding-inline: var(--gk-gutter);
	}
}

.gk-submitbar-inner {
	max-width: var(--gk-container-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--gk-sm);
	/* Sicherheitsnetz fuer die dreispaltige Zeile ab 640px (Zaehler, Hinweis,
	   Button): reicht der Platz nicht (z. B. bei 768px mit langem Zaehlertext),
	   wird umgebrochen statt die Inhalte zusammenzuquetschen/zu ueberlappen. */
	flex-wrap: wrap;
}

@media (min-width: 640px) {
	.gk-submitbar-inner {
		flex-direction: row;
		align-items: center;
	}
}

/* Unter 640px eindeutig umbrechen statt gedrungen in eine Zeile zu pressen:
   Zaehler und Button jeweils als eigene volle Zeile, Button mittig. */
@media (max-width: 639px) {
	.gk-submit-count {
		justify-content: center;
		font-size: 0.8125rem;
	}

	.gk-submitbar .gk-submit-btn {
		width: 100%;
		justify-content: center;
	}
}

.gk-submit-count {
	display: flex;
	align-items: center;
	gap: var(--gk-xs);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--gk-text);
}

.gk-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 9999px;
	background: var(--gk-accent);
	display: inline-block;
	flex-shrink: 0;
}

.gk-submit-hint {
	display: none;
	align-items: center;
	gap: var(--gk-xs);
	font-size: 0.8125rem;
	color: var(--gk-text-muted);
}

@media (min-width: 768px) {
	.gk-submit-hint {
		display: flex;
	}
}

.gk-submitbar .gk-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gk-xs);
	/* Garantiert eine Touch-Trefferflaeche von mind. ~44px, unabhaengig von
	   Padding/Zeilenhoehe des Labels. */
	min-height: 2.75rem;
	background-color: var(--gk-primary) !important;
	color: var(--gk-on-primary) !important;
	font-weight: 600;
	font-size: 0.875rem;
	border-radius: 0.25rem;
	padding: 0.625rem 1.5rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
	transition: background-color 150ms ease;
	white-space: nowrap;
}

.gk-submitbar .gk-submit-btn:hover {
	background-color: var(--gk-primary-dark) !important;
}

.gk-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---------- Absende-Overlay (modal) ---------- */

/*
 * Scroll-Strategie: .gk-overlay selbst ist der fixierte, ueber die gesamte
 * Viewport-Hoehe scrollende Container (padding oben/unten statt align-items:
 * center) - dadurch wird bei hohem Inhalt (z. B. viele ausgefuellte
 * Anmerkungen) die ganze Flaeche inkl. Panel gescrollt und nichts oben/unten
 * abgeschnitten, auch nicht auf kleinen Mobil-Viewports.
 */
.gk-overlay {
	position: fixed !important;
	inset: 0;
	z-index: 100000;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--gk-xl) var(--gk-gutter-mobile);
	font-family: var(--gk-font);
}

.gk-overlay[hidden] {
	display: none;
}

.gk-overlay-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.6);
}

.gk-overlay-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 34rem;
	margin-inline: auto;
	background: var(--gk-bg-surface);
	border-radius: 0.75rem;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
	display: flex;
	flex-direction: column;
	overflow-wrap: break-word;
}

.gk-overlay-header {
	padding: var(--gk-lg);
	border-bottom: 1px solid var(--gk-border);
}

.gk-overlay-title {
	margin: 0;
	font-family: var(--gk-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--gk-text);
}

.gk-overlay-body {
	padding: var(--gk-lg);
	display: flex;
	flex-direction: column;
	gap: var(--gk-lg);
}

.gk-overlay-list {
	list-style: none;
	margin: 0;
	padding: var(--gk-sm);
	max-height: 14rem;
	overflow-y: auto;
	border: 1px solid var(--gk-border);
	border-radius: 0.5rem;
	background: var(--gk-bg-subtle);
	display: flex;
	flex-direction: column;
	gap: var(--gk-xs);
}

.gk-overlay-item {
	padding-block: var(--gk-2xs);
	border-bottom: 1px solid var(--gk-border);
}

.gk-overlay-item:last-child {
	border-bottom: none;
}

.gk-overlay-item-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--gk-xs);
}

.gk-overlay-item-name {
	font-family: var(--gk-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--gk-text);
	min-width: 0;
	overflow-wrap: break-word;
}

.gk-overlay-item-text {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--gk-text-muted);
	overflow-wrap: break-word;
}

.gk-overlay-counter {
	margin: 0;
	font-family: var(--gk-font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gk-text-muted);
}

.gk-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.gk-field label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gk-text);
}

.gk-input {
	width: 100%;
	height: 2.5rem;
	padding-inline: 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--gk-border);
	background: var(--gk-bg-subtle);
	color: var(--gk-text);
	font-size: 0.875rem;
	font-family: inherit;
}

.gk-input:focus {
	outline: 2px solid var(--gk-primary);
	outline-offset: 1px;
	background: var(--gk-bg-muted);
}

.gk-input.is-invalid {
	border-color: #8a1f11;
	background: #FBE9E7;
}

.gk-field-error {
	font-size: 0.75rem;
	font-weight: 600;
	color: #8a1f11;
}

.gk-field-error[hidden] {
	display: none;
}

.gk-field--checkbox {
	gap: 0.5rem;
}

.gk-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--gk-text-muted);
	cursor: pointer;
}

.gk-checkbox-label input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.15rem;
	accent-color: var(--gk-primary);
}

.gk-checkbox-label.is-invalid input[type="checkbox"] {
	outline: 2px solid #8a1f11;
	outline-offset: 2px;
}

.gk-checkbox-label a {
	color: var(--gk-primary);
	text-decoration: underline;
}

.gk-overlay-footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gk-sm);
	padding: var(--gk-lg);
	border-top: 1px solid var(--gk-border);
}

@media (max-width: 479px) {
	.gk-overlay-footer {
		flex-direction: column;
	}

	.gk-overlay-title {
		font-size: 1.125rem;
	}
}

.gk-overlay-panel .gk-btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gk-xs);
	font-weight: 600;
	font-size: 0.875rem;
	border-radius: 0.25rem;
	padding: 0.625rem 1.5rem;
	transition: background-color 150ms ease, border-color 150ms ease;
	white-space: nowrap;
}

.gk-overlay-panel .gk-btn--solid {
	background-color: var(--gk-primary) !important;
	color: var(--gk-on-primary) !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.gk-overlay-panel .gk-btn--solid:hover {
	background-color: var(--gk-primary-dark) !important;
}

.gk-overlay-panel .gk-btn--solid:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.gk-overlay-panel .gk-btn--outline {
	background-color: transparent !important;
	border: 1px solid var(--gk-primary) !important;
	color: var(--gk-primary) !important;
}

.gk-overlay-panel .gk-btn--outline:hover {
	background-color: var(--gk-bg-subtle) !important;
}