/**
 * Frontend-Styles „HD Interaktive Karte Österreich“ (SPEC § 4, § 8, § 11).
 *
 * CSS-Kapselung nach SPEC § 4.10: defensiver Reset auf dem Wrapper
 * (all: revert plus explizites Setzen der darstellungsrelevanten
 * Eigenschaften), ausschließlich iko-präfixierte Klassen, keine
 * generischen Element-Selektoren, erhöhte Spezifität (verdoppelte
 * Klasse) für kritische Regeln. Die Karte steht rahmenlos in voller
 * Container-Breite (§ 4.1); Farben kommen als Custom Properties aus
 * dem serverseitigen Style-Block (§ 6 Tab 3).
 */

/* ---------- Wrapper: Reset & Basistypografie ---------- */
.iko-karte.iko-karte {
	all: revert;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--iko-text, #16262b);
	font-family: var(--iko-font, inherit);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	text-align: left;
	letter-spacing: normal;
	-webkit-text-size-adjust: 100%;
}
.iko-karte.iko-karte *,
.iko-karte.iko-karte *::before,
.iko-karte.iko-karte *::after {
	box-sizing: border-box;
}

/*
 * Sichtbare Reihenfolge (Suche, Karte, Liste, Attribution) kommt seit
 * dem WCAG-Audit 2026-09-08 (Befund 4) direkt aus dem Quelltext –
 * die früheren `order`-Regeln entfallen, weil sie Tastatur- und
 * Vorlesereihenfolge von der Anzeige entkoppelt haben (WCAG 1.3.2/2.4.3).
 */

/* Nur für Screenreader (Live-Region der Suche). */
.iko-karte.iko-karte .iko-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Suche (JS-Enhancement) ---------- */
.iko-karte.iko-karte .iko-suche {
	margin: 0;
	position: relative;
	z-index: 20; /* Ergebnisse überlappen die Karte darunter. */
}
.iko-karte.iko-karte .iko-suche__flyout {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 6px;
	width: min(420px, 100%);
	max-height: 340px;
	overflow: auto;
	background: var(--iko-card-bg, #fdfdfd);
	border: 1px solid var(--iko-line, #798486);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
	padding: 6px;
	z-index: 21;
}
.iko-karte.iko-karte .iko-suche__flyout[hidden] {
	display: none;
}
.iko-karte.iko-karte .iko-suche__ergebnisse {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}
.iko-karte.iko-karte .iko-suche__treffer-hinweis {
	margin: 0;
	padding: 10px 12px;
	font-size: 13px;
	color: var(--iko-faint, #636f72);
}
.iko-karte.iko-karte .iko-suche__treffer-hinweis[hidden] {
	display: none;
}
/*
 * Treffer sind seit dem WCAG-Audit 2026-09-08 (Befund 13) `role="option"`
 * innerhalb der Listbox; der Fokus bleibt im Eingabefeld, die Markierung
 * wandert per aria-activedescendant. Deshalb kein Button mehr – die
 * Optik bleibt unverändert.
 */
.iko-karte.iko-karte .iko-suche__ergebnis {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--iko-text, #16262b);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	box-shadow: none;
}
.iko-karte.iko-karte .iko-suche__ergebnis:hover {
	background: var(--iko-entry-soft, #d9eceb);
	color: var(--iko-entry-deep, #005a54);
}
/* Per Pfeiltaste markierter Treffer (aria-activedescendant). */
.iko-karte.iko-karte .iko-suche__ergebnis.iko--is-active {
	background: var(--iko-entry-soft, #d9eceb);
	color: var(--iko-entry-deep, #005a54);
	box-shadow: inset 0 0 0 2px var(--iko-focus, #006d66);
}
.iko-karte.iko-karte .iko-suche__ergebnis-meta {
	font-size: 12px;
	font-weight: 500;
	color: var(--iko-faint, #636f72);
	white-space: nowrap;
}
.iko-karte.iko-karte .iko-suche__zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.iko-karte.iko-karte .iko-suche__anzahl {
	font-size: 13px;
	color: var(--iko-faint, #636f72);
	white-space: nowrap;
}
.iko-karte.iko-karte .iko-suche[hidden] {
	display: none;
}
.iko-karte.iko-karte .iko-suche__label {
	display: block;
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--iko-muted, #4d5a5e);
}
.iko-karte.iko-karte .iko-suche__feldwrap {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 420px;
}
.iko-karte.iko-karte .iko-suche__leeren {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: 50%;
	right: 3px;
	transform: translateY(-50%);
	/* Trefferfläche 44 × 44 px (WCAG 2.5.8, Audit-Befund 24). */
	width: 44px;
	height: 44px;
	min-width: 44px;
	max-width: 44px;
	min-height: 44px;
	max-height: 44px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--iko-muted, #4d5a5e);
	cursor: pointer;
	box-shadow: none;
}
.iko-karte.iko-karte .iko-suche__leeren[hidden] {
	display: none;
}
.iko-karte.iko-karte .iko-suche__leeren:hover {
	background: var(--iko-entry-soft, #d9eceb);
	color: var(--iko-entry-deep, #005a54);
}
.iko-karte.iko-karte .iko-suche__leeren:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--iko-card-bg, #fdfdfd), 0 0 0 6px var(--iko-focus, #006d66);
}
/* Nativen Browser-Löschknopf ausblenden – es gibt den eigenen Button. */
.iko-karte.iko-karte .iko-suche__feld::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
.iko-karte.iko-karte .iko-suche__feld {
	width: 100%;
	/*
	 * Mindesthöhe 50 px, damit der 44 px hohe Löschknopf vollständig im
	 * Feld liegt (Audit-Befund 24); rechts entsprechend Platz freihalten.
	 */
	min-height: 50px;
	margin: 0;
	padding: 11px 53px 11px 12px;
	border: 1px solid var(--iko-line, #798486);
	border-radius: 9px;
	background: var(--iko-card-bg, #fdfdfd);
	color: var(--iko-text, #16262b);
	font: inherit;
}
/*
 * Auch `:focus` (nicht nur `:focus-visible`): Nach dem Klick auf den
 * Löschknopf setzt das Skript den Fokus zurück ins Feld – der Ring muss
 * dann sichtbar sein (WCAG 2.4.7, Audit-Befund 23).
 */
.iko-karte.iko-karte .iko-suche__feld:focus,
.iko-karte.iko-karte .iko-suche__feld:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--iko-card-bg, #fdfdfd), 0 0 0 6px var(--iko-focus, #006d66);
}
.iko-karte.iko-karte .iko-suche__treffer {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--iko-muted, #4d5a5e);
	min-height: 1.2em;
}

/* ---------- Gemeindeliste, Skin „Kacheln“ (Zweitzugang, § 9.1) ---------- */
/*
 * Seit 2026-09-10 gibt es zwei Listen-Darstellungen („Skins“, Registratur
 * iko_list_skins()). Alles, was nur für eine von beiden gilt, hängt an
 * `.iko-liste--kacheln` bzw. `.iko-liste--glossar`; gemeinsam genutzte
 * Bausteine (Eintrag, Pfeil, Linkliste, Link) bleiben unqualifiziert,
 * damit beide Skins dieselben Klassen tragen.
 */
.iko-karte.iko-karte .iko-liste--kacheln {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 24px;
	align-items: start;
}
@media (max-width: 719px) {
	.iko-karte.iko-karte .iko-liste--kacheln {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 6px;
	}
}
.iko-karte.iko-karte .iko-liste__eintrag {
	margin: 0;
	padding: 0;
}
.iko-karte.iko-karte .iko-liste__eintrag[hidden] {
	display: none;
}
.iko-karte.iko-karte .iko-liste__akkordeon {
	border: 1px solid var(--iko-line, #798486);
	border-radius: 9px;
	background: transparent;
}
.iko-karte.iko-karte .iko-liste__akkordeon[open] {
	border-color: var(--iko-entry, #008078);
	background: var(--iko-card-bg, #fdfdfd);
	grid-column: 1 / -1;
}
.iko-karte.iko-karte .iko-liste__kopf {
	margin: 0;
	min-height: 48px;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	list-style: none;
	border-radius: 9px;
	color: var(--iko-text, #16262b);
}
.iko-karte.iko-karte .iko-liste__kopf::-webkit-details-marker {
	display: none;
}
.iko-karte.iko-karte .iko-liste__kopf:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--iko-card-bg, #fdfdfd), 0 0 0 6px var(--iko-focus, #006d66);
}
.iko-karte.iko-karte .iko-liste__name {
	font-weight: 700;
	color: inherit;
}
.iko-karte.iko-karte .iko-liste__akkordeon[open] .iko-liste__name {
	color: var(--iko-entry-deep, #005a54);
}
.iko-karte.iko-karte .iko-liste__meta {
	font-size: 12px;
	color: var(--iko-faint, #636f72);
	white-space: nowrap;
	margin-left: auto;
}
.iko-karte.iko-karte .iko-liste__pfeil {
	flex-shrink: 0;
	color: var(--iko-muted, #4d5a5e);
	transition: transform 0.15s ease;
}
.iko-karte.iko-karte .iko-liste__akkordeon[open] .iko-liste__pfeil {
	transform: rotate(180deg);
}
.iko-karte.iko-karte .iko-liste__links {
	list-style: none;
	margin: 0;
	padding: 0 14px 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
@media (prefers-reduced-motion: reduce) {
	.iko-karte.iko-karte .iko-liste__pfeil {
		transition: none;
	}
}

/* ---------- Gemeindeliste, Skin „Glossar“ (Mockup-Abnahme 2026-09-10) ---------- */

/*
 * Sprungleiste A–Z zwischen Karte und Liste. Buchstaben mit Einträgen
 * sind Anker-Links, die übrigen bleiben stiller Text (kein <a>, damit sie
 * beim Durchtabben nicht als Leerlauf auftauchen). Ihre Farbe ist
 * --iko-faint, der Ton dieses Designs für „zurückgenommen“ – er erfüllt
 * die 4,5:1 gegen den Hintergrund, weil auch ein ausgegrauter Buchstabe
 * echter Text bleibt (WCAG 1.4.3).
 */
.iko-karte.iko-karte .iko-liste-az {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
}
@media (max-width: 719px) {
	/* Schmale Schirme: eine Zeile, waagrecht scrollbar statt umbrechend. */
	.iko-karte.iko-karte .iko-liste-az {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
	}
}
.iko-karte.iko-karte .iko-liste-az__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 34px;
	height: 34px;
	margin: 0;
	padding: 0 8px;
	border: 1px solid var(--iko-line, #798486);
	border-radius: 9px;
	background: var(--iko-card-bg, #fdfdfd);
	color: var(--iko-entry-deep, #005a54);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
}
.iko-karte.iko-karte a.iko-liste-az__chip:hover {
	background: var(--iko-entry-soft, #d9eceb);
}
.iko-karte.iko-karte .iko-liste-az__chip:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--iko-card-bg, #fdfdfd), 0 0 0 6px var(--iko-focus, #006d66);
}
.iko-karte.iko-karte .iko-liste-az__chip--leer {
	background: transparent;
	border-color: var(--iko-line-faint, #d6dbdb);
	color: var(--iko-faint, #636f72);
	font-weight: 600;
	cursor: default;
}

.iko-karte.iko-karte .iko-liste--glossar {
	display: block;
	margin: 0;
	padding: 0;
}
.iko-karte.iko-karte .iko-liste__abschnitt {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
/* Kopfzeile je Buchstabe – bewusst KEINE Überschrift (SPEC § 13). */
.iko-karte.iko-karte .iko-liste__buchstabe {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0 4px;
}
.iko-karte.iko-karte .iko-liste__buchstabe-zeichen {
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	color: var(--iko-entry-deep, #005a54);
}
.iko-karte.iko-karte .iko-liste__buchstabe-linie {
	flex: 1 1 auto;
	height: 1px;
	background: var(--iko-line-soft, #c2c8c9);
}
.iko-karte.iko-karte .iko-liste__buchstabe-anzahl {
	font-size: 12px;
	color: var(--iko-faint, #636f72);
	white-space: nowrap;
}
.iko-karte.iko-karte .iko-liste__gruppe {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 44px;
	align-items: start;
}
@media (max-width: 1023px) {
	.iko-karte.iko-karte .iko-liste__gruppe {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 28px;
	}
}
@media (max-width: 719px) {
	.iko-karte.iko-karte .iko-liste__gruppe {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 0;
	}
}
/*
 * Minimal-Zeile statt Kachel: kein Kasten, nur eine feine Trennlinie
 * darunter. Sie öffnet die bestehende Card – das Skript macht aus dem
 * <span> dafür ein Bedienelement (role="button"); ohne JavaScript bleibt
 * die Zeile schlichter Text und die Linkliste darunter sichtbar
 * (<noscript>-Block in includes/frontend/render.php).
 */
.iko-karte.iko-karte .iko-liste--glossar .iko-liste__zeile {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 4px;
	border: 0;
	border-bottom: 1px solid var(--iko-line-faint, #d6dbdb);
	border-radius: 0;
	background: transparent;
	color: var(--iko-text, #16262b);
	font: inherit;
	text-align: left;
	box-shadow: none;
}
.iko-karte.iko-karte .iko-liste--glossar .iko-liste__zeile[role="button"] {
	cursor: pointer;
}
.iko-karte.iko-karte .iko-liste--glossar .iko-liste__zeile[role="button"]:hover {
	background: var(--iko-card-bg, #fdfdfd);
}
.iko-karte.iko-karte .iko-liste--glossar .iko-liste__zeile:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--iko-card-bg, #fdfdfd), 0 0 0 6px var(--iko-focus, #006d66);
}
.iko-karte.iko-karte .iko-liste--glossar .iko-liste__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--iko-entry-deep, #005a54);
}
/*
 * Anzahl der Links als dezente Plakette. Zahl in --iko-muted auf
 * --iko-badge-bg: 6,01:1 (WCAG 1.4.3 verlangt 4,5:1) – nachgerechnet mit
 * iko_contrast_ratio() für die Standardpalette am 2026-09-10.
 */
.iko-karte.iko-karte .iko-liste--glossar .iko-liste__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 20px;
	height: 20px;
	margin-left: auto;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--iko-badge-bg, #e2eeec);
	color: var(--iko-muted, #4d5a5e);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
/* Zeile, deren Card gerade offen ist. */
.iko-karte.iko-karte .iko-liste--glossar .iko--is-active .iko-liste__zeile {
	background: var(--iko-card-bg, #fdfdfd);
}
/*
 * Mit JavaScript zeigt die Card die Links – die Liste im Quelltext bleibt
 * für Suchmaschinen erhalten, wird aber nicht doppelt angezeigt. Der
 * <noscript>-Block der Instanz blendet sie wieder ein.
 */
.iko-karte.iko-karte .iko-liste--glossar .iko-liste__links {
	display: none;
	padding: 8px 4px 14px;
}
/*
 * Mobil klappt die Zeile die Links an Ort und Stelle auf. Sichtbar macht
 * sie allein `aria-expanded` – dasselbe Attribut, das der Screenreader
 * ansagt; das Skript setzt es nur unterhalb von 720 px (darüber öffnet
 * die Zeile den zentrierten Dialog und das Attribut fehlt, womit diese
 * Regel von selbst nicht mehr greift).
 */
.iko-karte.iko-karte .iko-liste--glossar .iko-liste__zeile[aria-expanded="true"] + .iko-liste__links {
	display: flex;
}
.iko-karte.iko-karte .iko-liste--glossar .iko-liste__zeile[aria-expanded="true"] .iko-liste__pfeil {
	transform: rotate(180deg);
}

.iko-karte.iko-karte .iko-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 9px 12px;
	border-radius: 9px;
	background: var(--iko-entry-soft, #d9eceb);
	color: var(--iko-entry-deep, #005a54);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}
.iko-karte.iko-karte .iko-link:hover {
	background: var(--iko-entry, #008078);
	color: var(--iko-card-bg, #fdfdfd);
}
.iko-karte.iko-karte .iko-link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--iko-card-bg, #fdfdfd), 0 0 0 6px var(--iko-focus, #006d66);
}
/*
 * Kategorie auf der hellen Linkfläche: --iko-entry-deep statt
 * --iko-muted; --iko-muted erreicht auf --iko-entry-soft nur 4,24:1
 * (WCAG-Audit 2026-09-08, Befund 17), --iko-entry-deep 6,62:1.
 */
.iko-karte.iko-karte .iko-link__kategorie {
	font-weight: 500;
	font-size: 12px;
	color: var(--iko-entry-deep, #005a54);
}
.iko-karte.iko-karte .iko-link:hover .iko-link__kategorie {
	color: inherit;
}

.iko-karte.iko-karte .iko-attribution {
	margin: 0;
	font-size: 13px;
	color: var(--iko-faint, #636f72);
}
/*
 * „Auf der Karte zeigen“ (Entscheidung Auftraggeber 2026-09-10: dezenter).
 * Der Knopf sieht kleiner aus, bleibt aber genauso gut zu treffen: Die
 * Tippfläche behält ihre 44 px Höhe (WCAG 2.5.8, Audit-Befund 24), nur
 * der sichtbare Rahmen ist mit 30 px niedriger. Er wird deshalb nicht
 * vom Element selbst gezeichnet, sondern von einem Pseudo-Element, das
 * mittig in der Tippfläche liegt.
 */
.iko-karte.iko-karte .iko-liste__zeigen {
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	box-shadow: none;
	padding: 0 10px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--iko-muted, #4d5a5e);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.iko-karte.iko-karte .iko-liste__zeigen::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 30px;
	transform: translateY(-50%);
	border: 1px solid var(--iko-line, #798486);
	border-radius: 9px;
	background: transparent;
	pointer-events: none;
}
.iko-karte.iko-karte .iko-liste__zeigen:hover {
	color: var(--iko-entry-deep, #005a54);
}
.iko-karte.iko-karte .iko-liste__zeigen:hover::before {
	border-color: var(--iko-entry, #008078);
}
.iko-karte.iko-karte .iko-liste__zeigen:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--iko-card-bg, #fdfdfd), 0 0 0 6px var(--iko-focus, #006d66);
}
.iko-karte.iko-karte .iko-attribution__link {
	color: var(--iko-muted, #4d5a5e);
	text-decoration: underline;
}

/* ---------- Karte (rahmenlos, volle Breite, § 4.1) ---------- */
.iko-karte.iko-karte .iko-stage {
	position: relative;
	width: 100%;
	/*
	 * `pan-y` statt `none` (WCAG-Audit 2026-09-08, Befund 14): Ein Finger
	 * scrollt die Seite weiter – die Karte war sonst eine Scroll-Falle.
	 * Zwei Finger (Pinch) und das Ziehen mit gedrückter Maustaste bleiben
	 * dem Kartenskript vorbehalten, weil der Browser bei mehr als einem
	 * Zeiger kein `pan-y` mehr anwendet.
	 */
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	background: transparent;
}
.iko-karte.iko-karte .iko-svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1000 / 520; /* Flächenreservierung, CLS = 0 (§ 9.7). */
	max-height: 70vh;
}
@media (max-width: 600px) {
	.iko-karte.iko-karte .iko-svg {
		aspect-ratio: 1000 / 640;
		max-height: none;
	}
}
.iko-karte.iko-karte .iko-svg:focus {
	outline: none;
}
.iko-karte.iko-karte .iko-svg:focus-visible {
	outline: 3px solid var(--iko-focus, #006d66);
	outline-offset: 2px;
}
/*
 * Zoom-Zeiger über der freien Kartenfläche (Entscheidung 2026-09-10):
 * die eingebauten Zeiger des Browsers, kein eigenes Bild und damit kein
 * externer Request (SPEC § 3). Gesetzt werden sie an der Bühne, damit sie
 * auch für Silhouette und Gemeinden ohne Einträge gelten (die reichen
 * Zeigerereignisse nach oben durch). Gemeinden mit Einträgen und die
 * Zoom-Knöpfe setzen weiter unten ihren eigenen `pointer` und
 * überschreiben den geerbten Zeiger.
 *
 * Welche Klasse gilt, entscheidet das Skript (syncZoomCursor) – es setzt
 * sie nur, solange in die jeweilige Richtung überhaupt noch gezoomt
 * werden kann.
 */
.iko-karte.iko-karte .iko-stage--zoom-in {
	cursor: zoom-in;
}
.iko-karte.iko-karte .iko-stage--zoom-out {
	cursor: zoom-out;
}
/*
 * Beim Ziehen gewinnt die Greifhand – die Regel ist bewusst spezifischer
 * (zwei Klassen am selben Element) als die beiden Zoom-Zeiger darüber.
 */
.iko-karte.iko-karte .iko-stage.iko--dragging {
	cursor: grabbing;
}

/* Silhouetten-Ebenen (§ 4.1): Außengrenze + Landesfläche */
.iko-karte.iko-karte .iko-svg [data-iko-outline] {
	pointer-events: none;
}
.iko-karte.iko-karte .iko-svg .iko-outline-pfad {
	fill: none;
	stroke: var(--iko-outline, #4d5a5e);
	stroke-width: 4;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}
.iko-karte.iko-karte .iko-svg .iko-base-pfad {
	fill: var(--iko-nodata-ghost, #e4efed);
	stroke: none;
	pointer-events: none;
}

.iko-karte.iko-karte .iko-svg .iko-gem {
	stroke: var(--iko-card-bg, #fdfdfd);
	stroke-width: 0.8;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: fill 0.15s ease;
}
.iko-karte.iko-karte .iko-svg .iko-gem--aktiv-flaeche {
	fill: var(--iko-entry, #008078);
	cursor: pointer;
}
.iko-karte.iko-karte .iko-svg .iko-gem--aktiv-flaeche:hover,
.iko-karte.iko-karte .iko-svg .iko-gem--aktiv-flaeche.iko--is-active {
	fill: var(--iko-active, #800008); /* Direkte Eingabe (Tab 3), § 13. */
}
.iko-karte.iko-karte .iko-svg .iko-gem--aktiv-flaeche:focus {
	outline: none;
}
/*
 * Tastaturfokus auf einer Gemeindefläche: zweifarbiger Ring (§ 8.2,
 * WCAG 2.4.11/1.4.11). Ein einfarbiger Rand reicht nicht, weil die
 * Füllfarbe frei wählbar ist und der Ring auf hellen wie dunklen Flächen
 * sichtbar bleiben muss.
 *
 * SVG-Pfade können nur EINE Kontur zeichnen, deshalb die in Browsern
 * übliche Kombination: die eigene Kontur wird zum breiten hellen
 * Innenring (--iko-card-bg, dieselbe Farbe wie die Trennlinien zwischen
 * den Gemeinden), darum legt ein doppelter drop-shadow-Filter ohne
 * Versatz den dunklen Außenring (--iko-focus). CSS-`outline` scheidet
 * aus, weil Browser sie bei SVG-Formen unterschiedlich (teils nur um das
 * Bounding-Rechteck) zeichnen. Kann ein Browser den Filter nicht, bleibt
 * der 4 px breite helle Ring als vollwertiger Fokusindikator bestehen.
 */
.iko-karte.iko-karte .iko-svg .iko-gem--aktiv-flaeche:focus-visible {
	stroke: var(--iko-card-bg, #fdfdfd);
	stroke-width: 4;
	stroke-linejoin: round;
	paint-order: stroke;
	filter: drop-shadow(0 0 1px var(--iko-focus, #006d66)) drop-shadow(0 0 1px var(--iko-focus, #006d66));
}
.iko-karte.iko-karte .iko-svg .iko-gem--leer {
	fill: var(--iko-nodata, #c2dedc);
	pointer-events: none;
}
/* Darstellung „übrige Gemeinden“ (§ 4.9, serverseitige Container-Klasse) */
.iko-karte--others-dimmed .iko-svg .iko-gem--leer {
	fill: var(--iko-nodata-ghost, #e4efed);
}
.iko-karte--others-hidden .iko-svg .iko-gem--leer {
	display: none;
}

.iko-karte.iko-karte .iko-svg .iko-lbl {
	font-size: 11px;
	font-weight: 700;
	fill: var(--iko-card-bg, #fdfdfd);
	pointer-events: none;
	text-anchor: middle;
	paint-order: stroke;
	stroke: var(--iko-entry-deep, #005a54);
	stroke-opacity: 0.55;
	stroke-width: 2.5;
	letter-spacing: 0.01em;
	font-family: var(--iko-font, inherit);
}
@media (max-width: 600px) {
	.iko-karte.iko-karte .iko-svg .iko-lbl {
		display: none;
	}
}

/* Zoom-Buttons (Pflicht-Alternative zu Pinch, § 8.3) */
.iko-karte.iko-karte .iko-zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
}
/* Abgehärtet gegen Theme-Button-Regeln (min-width, Padding, Schatten). */
.iko-karte.iko-karte .iko-zoom .iko-zoom__knopf {
	appearance: none;
	-webkit-appearance: none;
	width: 44px;
	height: 44px;
	min-width: 44px;
	max-width: 44px;
	min-height: 44px;
	max-height: 44px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1px solid var(--iko-line, #798486);
	background: var(--iko-card-bg, #fdfdfd);
	color: var(--iko-text, #16262b);
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: none;
	transform: none;
	text-shadow: none;
}
.iko-karte.iko-karte .iko-zoom .iko-zoom__knopf:hover {
	border-color: var(--iko-entry, #008078);
	color: var(--iko-entry-deep, #005a54);
	background: var(--iko-card-bg, #fdfdfd);
}
.iko-karte.iko-karte .iko-zoom .iko-zoom__knopf:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--iko-card-bg, #fdfdfd), 0 0 0 6px var(--iko-focus, #006d66);
}

/* Ladehinweis / Fehler (§ 8.6) */
.iko-karte.iko-karte .iko-overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
	text-align: center;
	background: transparent;
}
.iko-karte.iko-karte .iko-overlay[hidden] {
	display: none;
}
.iko-karte.iko-karte .iko-overlay .iko-overlay__text {
	margin: 0;
	font-size: 14px;
	color: var(--iko-muted, #4d5a5e);
	max-width: 48ch;
}

/* ---------- Hover-Card / Bottom-Sheet (§ 4.2/§ 4.3) ---------- */
.iko-karte.iko-karte .iko-card {
	position: fixed;
	z-index: 9040;
	width: min(360px, calc(100vw - 24px));
	margin: 0;
	padding: 16px 18px 18px;
	background: var(--iko-card-bg, #fdfdfd);
	border: 1px solid var(--iko-line, #798486);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
	color: var(--iko-text, #16262b);
	font-family: var(--iko-font, inherit);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}
.iko-karte.iko-karte .iko-card[hidden] {
	display: none;
}
.iko-karte.iko-karte .iko-card__titel {
	margin: 0 0 2px;
	padding-right: 36px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.iko-karte.iko-karte .iko-card__meta {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--iko-faint, #636f72);
}
.iko-karte.iko-karte .iko-card__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
.iko-karte.iko-karte .iko-card__links .iko-link {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
/*
 * „Auf der Karte zeigen“ in der Card (Entscheidung 2026-09-10): bewusst
 * keine Pille, sondern eine dezente Textzeile im Ton der Meta-Zeile
 * darüber (--iko-faint auf --iko-card-bg ist ein geprüftes Paar,
 * iko_contrast_pairs() → faint_card). Als bedienbar zu erkennen ist sie
 * an der Unterstreichung beim Überfahren und am üblichen Doppelring beim
 * Tastaturfokus. Die Zeile wirkt schlank, die Tippfläche bleibt aber
 * 44 px hoch (WCAG 2.5.8, Audit-Befund 24) – dasselbe Muster wie beim
 * verkleinerten Knopf im Kachel-Panel.
 */
.iko-karte.iko-karte .iko-card__karte {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-height: 44px;
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--iko-faint, #636f72);
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	box-shadow: none;
}
.iko-karte.iko-karte .iko-card__karte[hidden] {
	display: none;
}
.iko-karte.iko-karte .iko-card__karte:hover {
	color: var(--iko-entry-deep, #005a54);
	text-decoration: underline;
}
.iko-karte.iko-karte .iko-card__karte:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--iko-card-bg, #fdfdfd), 0 0 0 6px var(--iko-focus, #006d66);
}
.iko-karte.iko-karte .iko-card__karte-icon {
	flex-shrink: 0;
}
.iko-karte.iko-karte .iko-card__schliessen {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	min-width: 44px;
	max-width: 44px;
	min-height: 44px;
	max-height: 44px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--iko-bg, #f3f6f5);
	color: var(--iko-text, #16262b);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
}
/*
 * Auch `:focus`: Der Schließknopf wird beim Öffnen der Card programmatisch
 * fokussiert. Nach einem Mausklick auf die Gemeindefläche greift
 * `:focus-visible` dort nicht – der Fokus wäre unsichtbar (WCAG 2.4.7,
 * Audit-Befund 23).
 */
.iko-karte.iko-karte .iko-card__schliessen:focus,
.iko-karte.iko-karte .iko-card__schliessen:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--iko-card-bg, #fdfdfd), 0 0 0 6px var(--iko-focus, #006d66);
}
.iko-karte.iko-karte .iko-card__griff {
	display: none;
}
.iko-karte.iko-karte .iko-scrim {
	position: fixed;
	inset: 0;
	z-index: 9039;
	background: rgba(0, 0, 0, 0.35);
}
.iko-karte.iko-karte .iko-scrim[hidden] {
	display: none;
}
@media (max-width: 719px) {
	.iko-karte.iko-karte .iko-card {
		left: 0 !important;
		right: 0;
		top: auto !important;
		bottom: 0;
		width: 100%;
		border-radius: 18px 18px 0 0;
		padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
		max-height: 70vh;
		overflow: auto;
	}
	.iko-karte.iko-karte .iko-card__griff {
		display: block;
		width: 40px;
		height: 4px;
		border-radius: 2px;
		background: var(--iko-line, #798486);
		margin: 0 auto 12px;
	}
}
/*
 * Zentrierter Dialog (Glossar-Skin ab 720 px, Entscheidung 2026-09-10):
 * dieselbe Card, nur mittig im Sichtfenster statt an einer Fläche. Die
 * Höhe wird begrenzt, damit auch eine lange Linkliste vollständig
 * erreichbar bleibt.
 */
.iko-karte.iko-karte .iko-card--zentriert {
	max-height: calc(100vh - 24px);
	overflow: auto;
}
@media (min-width: 720px) {
	/*
	 * Auf Desktop-Breiten gibt es den Schleier nur beim zentrierten
	 * Dialog; die an einer Gemeindefläche anliegende Card ist kein
	 * modaler Vordergrund und bekommt keinen.
	 */
	.iko-karte.iko-karte .iko-scrim:not(.iko-scrim--modal) {
		display: none !important;
	}
}

/* Leerzustand (§ 4.8) */
.iko-karte.iko-karte.iko-karte--leer,
.iko-karte--leer {
	padding: 16px 0;
	font-size: 15px;
}

/* Reduzierte Bewegung (§ 8.9) */
@media (prefers-reduced-motion: reduce) {
	.iko-karte.iko-karte .iko-svg .iko-gem {
		transition: none;
	}
}