/*
 * LM-Diagramme – Gestaltung der Einbettungsseite
 * Keine externen Schriften, keine Inline-Styles (CSP: style-src 'self').
 */

@font-face {
	font-family: "LM Fira Sans";
	src: url("schrift/FiraSans-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "LM Fira Sans";
	src: url("schrift/FiraSans-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

:root {
	--lmd-text: #3b3737;
	--lmd-grau: #6f6a6a;
	--lmd-linie: #ebe8e8;
	--lmd-rot: #b70000;
	color-scheme: light;
}

html {
	background: #ffffff;
}
html[data-hintergrund="transparent"] {
	background: transparent;
}
html.lmd-auto-hoehe {
	overflow: hidden;
}

body {
	margin: 0;
	color: var(--lmd-text);
	font-family: "LM Fira Sans", "Fira Sans", system-ui, sans-serif;
	font-variant-numeric: tabular-nums lining-nums;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}



/* Rahmen: Kopf, Grafik, Fuß
-----------------------------------------------------*/
.lmd {
	max-width: 640px;
	margin: 0 auto;
	padding: 20px 16px 16px;
}
.lmd-titel {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}
.lmd-ohne-kopf {
	padding-top: 8px;
}
.lmd-ohne-kopf .lmd-grafik svg {
	margin-top: 0;
}
.lmd-fuss {
	margin-top: 14px;
	padding-top: 8px;
	border-top: 1px solid var(--lmd-linie);
	color: var(--lmd-grau);
	font-size: 12px;
	line-height: 1.45;
}
.lmd-fuss p {
	margin: 0;
}
.lmd-fuss > * + * {
	margin-top: 4px;
}
.lmd-fuss-zeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 16px;
}
.lmd-fuss .lmd-untertitel {
	margin-left: auto;
	text-align: right;
}
.lmd-fussnote {
	white-space: pre-line;
}
.lmd-fehler {
	margin: 0;
	padding: 16px;
	color: var(--lmd-grau);
	font-size: 14px;
}



/* Grafik
-----------------------------------------------------*/
.lmd-grafik svg {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
	margin: 12px auto 0;
	overflow: visible;
	font-family: inherit;
}
.lmd-hauptzahl {
	font-weight: 600;
}
.lmd-segment {
	cursor: pointer;
	outline: none;
	transition: opacity .2s;
}
.lmd-segment:focus-visible {
	stroke: var(--lmd-text);
	stroke-width: 2;
}
.lmd-gedimmt {
	opacity: .5;
}



/* Säulen
-----------------------------------------------------*/
.lmd-saeulen {
	position: relative;
	margin-top: 12px;
}
.lmd-grafik .lmd-saeulen svg {
	max-width: none;
	margin: 0;
}
.lmd-saeule {
	cursor: pointer;
	outline: none;
	transition: opacity .2s;
}
.lmd-saeule:focus-visible .lmd-saeule-rahmen {
	stroke: var(--lmd-text);
	stroke-width: 1.5;
}
/* Infokasten zur hervorgehobenen Säule */
.lmd-info {
	position: absolute;
	z-index: 1;
	padding: 6px 10px;
	border: 1px solid var(--lmd-linie);
	border-radius: 6px;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	font-size: 13px;
	line-height: 1.45;
	white-space: nowrap;
	pointer-events: none;
}
.lmd-info[hidden] {
	display: none;
}
.lmd-info strong,
.lmd-info span {
	display: block;
}
.lmd-info strong {
	font-weight: 600;
}
.lmd-info-akzent {
	color: var(--lmd-rot);
}
.lmd-info-leise {
	color: var(--lmd-grau);
}
/* Farbschlüssel unter den Säulen */
.lmd-schluessel {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 18px;
	margin: 10px 0 0;
	padding: 0;
	color: var(--lmd-grau);
	font-size: 13px;
	list-style: none;
}
.lmd-schluessel li::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 10px;
	margin-right: 6px;
	border-radius: 2px;
	background: var(--farbe);
}



/* Balken
-----------------------------------------------------*/
.lmd-balken {
	display: grid;
	grid-template-columns: max-content minmax(60px, 1fr) max-content;
	gap: 10px 12px;
	align-items: center;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}
.lmd-balken li {
	display: contents;
}
.lmd-balken-name {
	max-width: 42vw;
	color: var(--lmd-grau);
	text-align: right;
}
.lmd-balken-spur {
	height: 16px;
	border-radius: 3px;
	background: #f1eeee;
	overflow: hidden;
}
.lmd-balken-spur i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 3px;
	transition: width 1s cubic-bezier(.2, .7, .3, 1);
}
.lmd-balken-wert {
	font-weight: 600;
	text-align: right;
}



/* Punkte
-----------------------------------------------------*/
.lmd-punkte {
	margin-top: 12px;
}
.lmd-punkte-gesamt {
	margin: 0 0 10px;
	color: var(--lmd-text);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}
.lmd-punkte-feld {
	display: grid;
	grid-template-columns: repeat(var(--spalten, 15), 1fr);
	gap: 5px;
	max-width: 340px;
	margin: 0 auto;
}
.lmd-punkte-feld i {
	aspect-ratio: 1;
	border-radius: 50%;
	cursor: pointer;
	transition: transform .35s cubic-bezier(.2, .7, .3, 1.3), opacity .2s;
}
.lmd-punkte-start i {
	transform: scale(0);
}
.lmd-punkte .lmd-schluessel li {
	cursor: pointer;
	outline: none;
	transition: opacity .2s;
}
.lmd-punkte .lmd-schluessel li:focus-visible {
	text-decoration: underline;
}



/* Durchschnittslinie (Säulen)
-----------------------------------------------------*/
.lmd-schnitt {
	stroke: var(--lmd-text);
	stroke-width: 1;
	stroke-dasharray: 4 3;
}
/* Schlüssel-Eintrag mit gestrichelter Linie statt Farbfeld */
.lmd-schluessel li.lmd-schluessel-schnitt::before {
	width: 18px;
	height: 0;
	border-top: 1.5px dashed var(--lmd-text);
	border-radius: 0;
	background: none;
	vertical-align: middle;
}



/* Karte
-----------------------------------------------------*/
.lmd-karte {
	position: relative;
	margin-top: 12px;
}
.lmd-grafik .lmd-karte svg {
	max-width: 400px;
	margin: 0 auto;
}
.lmd-land {
	stroke: #ffffff;
	stroke-width: .8;
	stroke-linejoin: round;
	cursor: pointer;
	outline: none;
	transition: fill .6s ease, opacity .2s;
}
.lmd-land:not([tabindex]) {
	cursor: default;
}
.lmd-land:focus-visible {
	stroke: var(--lmd-text);
	stroke-width: 1.5;
}
.lmd-land-wert {
	font-weight: 600;
	pointer-events: none;
	transition: opacity .3s;
}
/* Stadtstaaten: heller Rand um die Schrift */
.lmd-land-wert-rand {
	stroke: #ffffff;
	stroke-width: 3px;
	stroke-linejoin: round;
	paint-order: stroke;
}
.lmd-versteckt {
	opacity: 0;
}
.lmd-karte-zusatz {
	margin: 6px 0 0;
	color: var(--lmd-grau);
	font-size: 13px;
	text-align: center;
}



/* Legende
-----------------------------------------------------*/
.lmd-legende {
	display: grid;
	grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
	gap: 12px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.lmd-legende li {
	padding-top: 7px;
	border-top: 5px solid var(--farbe);
	color: var(--lmd-grau);
	font-size: 13px;
	text-align: center;
	cursor: default;
	transition: opacity .2s;
}
.lmd-legende strong {
	display: block;
	margin-top: 2px;
	color: var(--lmd-text);
	font-size: clamp(15px, 4.2vw, 18px);
	font-weight: 600;
	white-space: nowrap;
}
.lmd-legende-name {
	display: block;
	white-space: nowrap;
}
/* Gesetzt per Skript, sobald ein Eintrag nicht in eine Zeile passt: dann alle zweizeilig */
.lmd-legende.lmd-umbruch .lmd-legende-name {
	white-space: normal;
}
.lmd-legende.lmd-umbruch .lmd-legende-anteil {
	display: block;
}
/* Ab vier Einträgen auf schmalen Flächen zweispaltig */
@media (max-width: 460px) {
	.lmd-legende.lmd-viele {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}



/* Nur für Screenreader
-----------------------------------------------------*/
.lmd-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.lmd-segment,
	.lmd-saeule,
	.lmd-balken-spur i,
	.lmd-punkte-feld i,
	.lmd-land,
	.lmd-land-wert,
	.lmd-legende li {
		transition: none;
	}
}