/* =========================================================================
   Energiekompass – Frontend
   -------------------------------------------------------------------------
   Aufbau der Datei:
     0) Abschirmung gegen das Theme
     1) Farben, Schriften, Grundlagen
     2) Bausteine (Felder, Schalter, Schaltflächen, Karten)
     3) Seitenaufbau
     4) Auswertung, Diagramme, Tabelle
     5) KI-Bereiche
     6) Tastaturbedienung
     7) Responsive

   Farben und Schriften kommen als CSS-Variablen aus den Einstellungen und
   werden im Kopf der Seite gesetzt (siehe EK_Assets). Hier stehen nur die
   Rückfallwerte.
   ========================================================================= */

/* ------------------------------------------------------------------------
   0) Abschirmung gegen das Theme

   Manche Themes setzen Schriften, Farben, Rahmen und Abstände sehr breit.
   Dieser Block stellt für alles innerhalb des Rechners einen neutralen
   Ausgangszustand her. „all: unset“ nimmt geerbte Angaben zurück,
   „display: revert“ stellt das natürliche Anzeigeverhalten wieder her.
   ------------------------------------------------------------------------ */

.ek.ek.ek,
.ek.ek.ek :where(*:not(svg):not(svg *)) {
	all: unset;
	box-sizing: border-box;
	display: revert;
	/* Zusammensetzungen wie „Steckersolargerät" oder „Photovoltaikanlage"
	   sind länger als eine schmale Spalte. Ohne diese Angabe laufen sie aus
	   ihrer Spalte heraus und schieben sich unter das Nachbarelement. */
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Symbole: Themes setzen fill und stroke gern global auf ihre Akzentfarbe.
   Beides wird hier zurueckgeholt - die Symbole uebernehmen die Textfarbe.
   Die Werte werden an die Kindelemente vererbt, weil die Symbolpfade keine
   eigenen fill- und stroke-Angaben tragen. */
.ek.ek.ek :where(svg) {
	display: inline-block;
	vertical-align: middle;
	flex: none;
	fill: none;
	stroke: currentColor;
}

/* Diagramme sind davon ausgenommen: Dort tragen alle Formen ihre eigenen
   Farbangaben. Vererbt werden darf hier nichts, sonst bekaeme etwa eine
   Beschriftung ungewollt eine Kontur. */
.ek.ek.ek .ek-svg {
	fill: none;
	stroke: none;
}

/* Ein Element mit dem Attribut „hidden" ist verborgen – ausnahmslos.
   Ohne diese Regel gewinnt jede eigene Klasse mit „display: grid" oder
   „display: flex" gegen die Browservorgabe [hidden] { display: none }, und
   ein ausgeblendeter Schritt des Assistenten bliebe sichtbar. Das
   „!important" ist hier kein Notnagel, sondern die Zusage, dass „hidden"
   immer wirkt – auch gegen jede spätere Regel dieser Datei.

   Das doppelte [hidden] ist Absicht: Attributauswahl zählt genauso viel wie
   eine Klasse. Einfach geschrieben stünde die Regel bei 0,4,0 gleichauf mit
   jeder eigenen Regel und würde durch ihre frühe Stellung verlieren. Doppelt
   liegt sie bei 0,5,0 und gewinnt unabhängig von der Reihenfolge. */
.ek.ek.ek [hidden][hidden] { display: none !important; }

/* ------------------------------------------------------------------------
   1) Grundlagen
   ------------------------------------------------------------------------ */

.ek.ek.ek {
	--ek-akzent: #1F6B4A;
	--ek-akzent-dunkel: #16523A;
	--ek-akzent-weich: #E4F0EA;
	--ek-akzent-text: #ffffff;
	--ek-text: #14201B;
	--ek-text-leise: #5A6B63;
	--ek-grund: #F5F7F5;
	--ek-flaeche: #ffffff;
	--ek-flaeche-2: #EEF2EF;
	--ek-linie: #DCE4DE;
	--ek-linie-stark: #C3CFC8;
	--ek-warnung: #B4761C;
	--ek-warnung-weich: #FBF1DF;
	--ek-gefahr: #A8342A;
	--ek-gefahr-weich: #FAE9E7;
	--ek-bestand: #8C6239;
	--ek-plan: #1F6B4A;

	--ek-schrift-titel: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--ek-schrift-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--ek-radius: 12px;
	--ek-radius-klein: 8px;
	--ek-radius-gross: 18px;
	--ek-luft: 28px;
	--ek-schatten: 0 1px 2px rgba(20, 32, 27, .05), 0 8px 24px rgba(20, 32, 27, .06);
	--ek-schatten-klein: 0 1px 2px rgba(20, 32, 27, .06);
	--ek-kopf-offset: 0px;

	position: relative;
	display: block;
	margin: 0 0 2.5rem;
	padding: 0;

	/* Sämtliche vererbbaren Eigenschaften werden hier ausdrücklich gesetzt.
	   Grund: Der Reset weiter oben setzt sie auf "inherit"; ohne diese Zeilen
	   würden Angaben des Themes am body (etwa Großschreibung oder Sperrung)
	   in den Rechner hineinwirken. */
	color: var(--ek-text);
	background: var(--ek-grund);
	font-family: var(--ek-schrift-text);
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	line-height: 1.6;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-align: left;
	text-indent: 0;
	text-decoration: none;
	text-shadow: none;
	white-space: normal;
	list-style: none;
	visibility: visible;
	cursor: auto;
	border-radius: var(--ek-radius-gross);
	/* „clip“ schneidet wie „hidden“ ab, erzeugt aber keinen eigenen
	   Scrollbereich – nur so bleiben feststehende Spalten wirksam.
	   „hidden“ davor ist der Rückfall für sehr alte Browser. */
	overflow: hidden;
	overflow: clip;
	-webkit-font-smoothing: antialiased;
}

/* Grundzustand der Elemente innerhalb des Rechners. */
.ek.ek.ek :where(p, h2, h3, h4, ul, ol, li, table, thead, tbody, tr, th, td, figure) {
	display: revert;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	text-align: left;
}

.ek.ek.ek :where(h2, h3, h4) {
	font-family: var(--ek-schrift-titel);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.ek.ek.ek :where(strong, b) { font-weight: 700; }
.ek.ek.ek :where(small) { font-size: 87.5%; }
.ek.ek.ek :where(abbr) { text-decoration: none; }

.ek.ek.ek :where(a) {
	color: var(--ek-akzent);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.ek.ek.ek :where(button) {
	cursor: pointer;
	font: inherit;
	background: none;
	border: 0;
}

.ek.ek.ek :where(input, select, textarea) {
	font: inherit;
	color: inherit;
	background: var(--ek-flaeche);
}

.ek.ek.ek :where(table) {
	border-collapse: collapse;
	width: 100%;
}

/* --- Kopfbereich ------------------------------------------------------- */

.ek.ek.ek .ek-kopf {
	padding: 34px var(--ek-luft) 26px;
	background: var(--ek-flaeche);
	border-bottom: 1px solid var(--ek-linie);
}

.ek.ek.ek .ek-marke {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px;
	margin-bottom: 14px;
	border-radius: 999px;
	background: var(--ek-akzent-weich);
	color: var(--ek-akzent-dunkel);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
}

.ek.ek.ek .ek-kopf__titel {
	font-size: clamp(24px, 3.2vw, 34px);
	margin-bottom: 10px;
}

.ek.ek.ek .ek-kopf__text {
	max-width: 62ch;
	color: var(--ek-text-leise);
	font-size: 15.5px;
	margin-bottom: 18px;
}

.ek.ek.ek .ek-kopf [data-ek-kennwerte-auf] { align-self: start; }

/* Der Kennwerte-Bereich hängt optisch am Kopf, sitzt aber im weißen
   Innenbereich – deshalb dieselben Seitenabstände wie der Kopf. */
.ek.ek.ek .ek-kennwerte { margin: 0 var(--ek-luft) 0; }

/* ------------------------------------------------------------------------
   2) Bausteine
   ------------------------------------------------------------------------ */

/* --- Schritte des Assistenten ------------------------------------------ */

.ek.ek.ek .ek-schritte {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.ek.ek.ek .ek-schritt {
	position: relative;
	background: var(--ek-flaeche);
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius);
	box-shadow: var(--ek-schatten-klein);
	padding: 26px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.ek.ek.ek .ek-schritt__kopf {
	background: transparent;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 20px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--ek-linie);
}

.ek.ek.ek .ek-schritt__marke {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: var(--ek-radius-klein);
	background: var(--ek-akzent-weich);
	color: var(--ek-akzent-dunkel);
}

.ek.ek.ek .ek-schritt__text { flex: 1; min-width: 0; }

.ek.ek.ek .ek-schritt__zaehler {
	display: block;
	margin-bottom: 4px;
	font-family: var(--ek-schrift-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ek-akzent-dunkel);
}

.ek.ek.ek .ek-schritt__titel {
	font-size: 20px;
	margin-bottom: 3px;
	outline-offset: 4px;
}

.ek.ek.ek .ek-schritt__untertitel {
	color: var(--ek-text-leise);
	font-size: 14px;
	line-height: 1.5;
}

.ek.ek.ek .ek-schritt__inhalt {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.ek.ek.ek .ek-schritt__fussnote {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--ek-text-leise);
	font-size: 13px;
	line-height: 1.55;
}

.ek.ek.ek .ek-schritt__fussnote .ek-icon { flex: none; margin-top: 2px; }

.ek.ek.ek .ek-schritt__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ek-linie);
}

/* Auf schmalen Geräten ist „Auswertung ansehen“ breiter als die halbe Zeile.
   Ohne diese Regel schöbe der Knopf sich über den rechten Rand hinaus. */
.ek.ek.ek .ek-schritt__nav .ek-btn { min-width: 0; flex-shrink: 1; }

.ek.ek.ek .ek-schritt__platz { display: block; width: 1px; }

.ek.ek.ek .ek-schritt__stand {
	color: var(--ek-text-leise);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- Fortschrittsleiste ------------------------------------------------ */

.ek.ek.ek .ek-fortschritt {
	background: var(--ek-flaeche);
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius);
	box-shadow: var(--ek-schatten-klein);
	padding: 14px 16px 12px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.ek.ek.ek .ek-fortschritt__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ek.ek.ek .ek-fortschritt__punkt { display: block; }

.ek.ek.ek .ek-fortschritt__knopf {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--ek-text-leise);
	font-family: var(--ek-schrift-text);
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	outline-offset: 2px;
}

.ek.ek.ek .ek-fortschritt__knopf:disabled { cursor: default; opacity: .55; }

.ek.ek.ek .ek-fortschritt__zahl {
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	flex: none;
	border-radius: 50%;
	background: var(--ek-flaeche-2);
	color: var(--ek-text-leise);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ek.ek.ek .ek-fortschritt__punkt.ist-erledigt .ek-fortschritt__zahl {
	background: var(--ek-akzent-weich);
	color: var(--ek-akzent-dunkel);
}

.ek.ek.ek .ek-fortschritt__punkt.ist-aktiv .ek-fortschritt__knopf {
	border-color: var(--ek-akzent);
	background: var(--ek-akzent-weich);
	color: var(--ek-akzent-dunkel);
	font-weight: 700;
}

.ek.ek.ek .ek-fortschritt__punkt.ist-aktiv .ek-fortschritt__zahl {
	background: var(--ek-akzent);
	color: #FFFFFF;
}

/* Schritt, in dem der geführte Einstieg etwas eingetragen hat. */
.ek.ek.ek .ek-fortschritt__punkt.ist-ergaenzt .ek-fortschritt__zahl {
	box-shadow: 0 0 0 2px var(--ek-akzent);
}

.ek.ek.ek .ek-fortschritt__balken {
	height: 4px;
	border-radius: 999px;
	background: var(--ek-flaeche-2);
	overflow: clip;
}

.ek.ek.ek .ek-fortschritt__balken span {
	display: block;
	height: 100%;
	/* Der Anteil kommt aus JavaScript. Siehe dort: eine eigene Eigenschaft
	   statt style.width, weil die Abschirmungsdatei „all: unset !important"
	   setzt und damit gewöhnliche Angaben im style-Attribut überstimmt. */
	width: var(--ek-fortschritt-anteil, 0%);
	border-radius: 999px;
	background: var(--ek-akzent);
	transition: width .25s ease;
}

.ek--ohne-bewegung.ek.ek .ek-fortschritt__balken span { transition: none; }

/* --- Kachelauswahl ----------------------------------------------------- */

.ek.ek.ek .ek-kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.ek.ek.ek .ek-kachel { display: block; cursor: pointer; }

.ek.ek.ek .ek-kachel__eingabe {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ek.ek.ek .ek-kachel__flaeche {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: 8px;
	height: 100%;
	padding: 16px 40px 16px 16px;
	border: 1.5px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche);
	transition: border-color .15s ease, background-color .15s ease;
}

.ek--ohne-bewegung.ek.ek .ek-kachel__flaeche { transition: none; }

.ek.ek.ek .ek-kachel__symbol {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche-2);
	color: var(--ek-text-leise);
}

.ek.ek.ek .ek-kachel__titel {
	font-family: var(--ek-schrift-titel);
	font-size: 15px;
	line-height: 1.3;
	color: var(--ek-text);
}

.ek.ek.ek .ek-kachel__text {
	color: var(--ek-text-leise);
	font-size: 13px;
	line-height: 1.5;
}

.ek.ek.ek .ek-kachel__haken {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ek-akzent);
	color: #FFFFFF;
	opacity: 0;
}

.ek.ek.ek .ek-kachel:hover .ek-kachel__flaeche { border-color: var(--ek-akzent); }

.ek.ek.ek .ek-kachel__eingabe:focus-visible + .ek-kachel__flaeche {
	outline: 3px solid var(--ek-akzent);
	outline-offset: 2px;
}

.ek.ek.ek .ek-kachel__eingabe:checked + .ek-kachel__flaeche {
	border-color: var(--ek-akzent);
	background: var(--ek-akzent-weich);
}

.ek.ek.ek .ek-kachel__eingabe:checked + .ek-kachel__flaeche .ek-kachel__symbol {
	background: var(--ek-akzent);
	color: #FFFFFF;
}

.ek.ek.ek .ek-kachel__eingabe:checked + .ek-kachel__flaeche .ek-kachel__haken { opacity: 1; }

/* --- Zugeklappte Bereiche ---------------------------------------------- */

.ek.ek.ek .ek-klappblock {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	justify-items: start;
}

.ek.ek.ek .ek-klappblock__inhalt {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	width: 100%;
}

/* --- Maßnahmengruppen -------------------------------------------------- */

.ek.ek.ek .ek-massnahmengruppe {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.ek.ek.ek .ek-massnahmenhinweis {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 14px;
	border: 1px dashed var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche-2);
	color: var(--ek-text-leise);
	font-size: 13px;
	line-height: 1.5;
}

.ek.ek.ek .ek-massnahmenhinweis > span { flex: 1; min-width: 160px; }

/* --- Kleine Grafik in der Ergebnisspalte ------------------------------- */

.ek.ek.ek .ek-minigrafik {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--ek-linie);
}

.ek.ek.ek .ek-minigrafik__titel {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--ek-schrift-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ek-text-leise);
}

.ek.ek.ek .ek-grafik--klein { margin: 0; }

.ek.ek.ek .ek-legende--klein { font-size: 12px; gap: 6px 14px; }

.ek.ek.ek .ek-gruppe {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-family: var(--ek-schrift-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ek-text-leise);
}

.ek.ek.ek .ek-gruppe .ek-icon { flex: none; color: var(--ek-akzent-dunkel); }

.ek.ek.ek .ek-gruppe__text {
	margin-top: -16px;
	color: var(--ek-text-leise);
	font-size: 13.5px;
	line-height: 1.55;
}

/* --- Feldkopf ---------------------------------------------------------- */

.ek.ek.ek .ek-feld {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

.ek.ek.ek .ek-feld__kopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3px;
}

.ek.ek.ek .ek-feld__label {
	font-size: 15px;
	font-weight: 600;
}

.ek.ek.ek .ek-feld__hinweis {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: var(--ek-text-leise);
	font-size: 13px;
	line-height: 1.5;
}

.ek.ek.ek .ek-feld__hinweis svg { margin-top: 2px; opacity: .75; }

/* --- Schieberegler ----------------------------------------------------- */

.ek.ek.ek .ek-schieber {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "regler anzeige" "grenzen anzeige";
	gap: 6px 18px;
	align-items: center;
	padding: 12px 16px;
	background: var(--ek-flaeche-2);
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
}

.ek.ek.ek .ek-schieber__regler {
	grid-area: regler;
	width: 100%;
	margin: 0;
	appearance: none;
	/* Sichtbar bleibt die schmale Spur; die Trefferfläche für den Finger ist
	   mit 40 Pixeln aber deutlich größer. */
	height: 40px;
	background: transparent;
	cursor: pointer;
}

.ek.ek.ek .ek-schieber__regler::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: var(--ek-linie-stark);
}

.ek.ek.ek .ek-schieber__regler::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: var(--ek-linie-stark);
}

.ek.ek.ek .ek-schieber__regler::-webkit-slider-thumb {
	appearance: none;
	margin-top: -9px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ek-akzent);
	border: 3px solid var(--ek-flaeche);
	box-shadow: 0 1px 5px rgba(0, 0, 0, .28);
}

.ek.ek.ek .ek-schieber__regler::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ek-akzent);
	border: 3px solid var(--ek-flaeche);
	box-shadow: 0 1px 5px rgba(0, 0, 0, .28);
}

.ek.ek.ek .ek-schieber__anzeige {
	grid-area: anzeige;
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 0 12px;
	background: var(--ek-flaeche);
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
}

.ek.ek.ek .ek-schieber__zahl {
	width: 6.5ch;
	min-height: 42px;
	border: 0;
	padding: 0;
	background: transparent;
	font-family: var(--ek-schrift-titel);
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	-moz-appearance: textfield;
}

.ek.ek.ek .ek-schieber__zahl::-webkit-outer-spin-button,
.ek.ek.ek .ek-schieber__zahl::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ek.ek.ek .ek-schieber__einheit {
	font-size: 13px;
	font-weight: 600;
	color: var(--ek-text-leise);
	white-space: nowrap;
}

.ek.ek.ek .ek-schieber__grenzen {
	grid-area: grenzen;
	display: flex;
	justify-content: space-between;
	color: var(--ek-text-leise);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

/* --- Klappliste -------------------------------------------------------- */

.ek.ek.ek .ek-auswahl {
	position: relative;
	display: flex;
	align-items: center;
}

.ek.ek.ek .ek-auswahl__feld {
	width: 100%;
	appearance: none;
	padding: 13px 44px 13px 15px;
	min-height: 48px;
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche);
	font-size: 15px;
	cursor: pointer;
}

.ek.ek.ek .ek-auswahl svg {
	position: absolute;
	right: 15px;
	pointer-events: none;
	color: var(--ek-text-leise);
}

.ek.ek.ek .ek-auswahl__feld:hover { border-color: var(--ek-linie-stark); }

/* --- Eingabefelder ----------------------------------------------------- */

.ek.ek.ek .ek-eingabe {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
}

.ek.ek.ek .ek-eingabe__label {
	font-size: 13.5px;
	font-weight: 600;
}

.ek.ek.ek .ek-eingabe__feld {
	width: 100%;
	min-height: 48px;
	padding: 12px 15px;
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche);
	font-size: 15px;
}

.ek.ek.ek textarea.ek-eingabe__feld {
	min-height: 108px;
	line-height: 1.55;
	resize: vertical;
}

.ek.ek.ek .ek-eingabe__feld::placeholder { color: var(--ek-text-leise); opacity: .7; }
.ek.ek.ek .ek-eingabe__feld:hover { border-color: var(--ek-linie-stark); }

.ek.ek.ek .ek-eingabe--euro .ek-eingabe__feld { padding-right: 34px; }

.ek.ek.ek .ek-eingabe__einheit {
	position: absolute;
	right: 14px;
	bottom: 14px;
	color: var(--ek-text-leise);
	font-size: 14px;
	font-weight: 600;
	pointer-events: none;
}

.ek.ek.ek .ek-eingabe--plz { grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 14px; }

.ek.ek.ek .ek-eingabe__ergebnis {
	color: var(--ek-text-leise);
	font-size: 13.5px;
	line-height: 1.45;
}

.ek.ek.ek .ek-eingabe__ergebnis strong { color: var(--ek-text); }

.ek.ek.ek .ek-pflicht { color: var(--ek-gefahr); font-weight: 700; }

/* --- Auswahl mit Radioknöpfen ------------------------------------------ */

.ek.ek.ek .ek-wahl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

.ek.ek.ek .ek-wahl__eintrag {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 14px 16px;
	border: 2px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.ek.ek.ek .ek-wahl__eintrag:hover { border-color: var(--ek-linie-stark); }

.ek.ek.ek .ek-wahl__eintrag input {
	appearance: none;
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 2px;
	border: 2px solid var(--ek-linie-stark);
	border-radius: 50%;
	background: var(--ek-flaeche);
}

.ek.ek.ek .ek-wahl__eintrag input:checked {
	border-color: var(--ek-akzent);
	border-width: 6px;
}

.ek.ek.ek .ek-wahl__eintrag:has(input:checked) {
	border-color: var(--ek-akzent);
	background: var(--ek-akzent-weich);
}

.ek.ek.ek .ek-wahl__eintrag span { display: grid; gap: 2px; }
.ek.ek.ek .ek-wahl__eintrag strong { font-size: 14.5px; }
.ek.ek.ek .ek-wahl__eintrag small { color: var(--ek-text-leise); font-size: 12.5px; }

/* --- Schalter ---------------------------------------------------------- */

.ek.ek.ek .ek-schalter { position: relative; display: block; }

.ek.ek.ek .ek-schalter__eingabe {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.ek.ek.ek .ek-schalter__flaeche {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px 18px;
	min-height: 64px;
	border: 2px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche);
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease;
}

.ek.ek.ek .ek-schalter__flaeche:hover { border-color: var(--ek-linie-stark); }

.ek.ek.ek .ek-schalter__eingabe:checked + .ek-schalter__flaeche {
	border-color: var(--ek-akzent);
	background: var(--ek-akzent-weich);
}

.ek.ek.ek .ek-schalter__symbol {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche-2);
	color: var(--ek-text-leise);
}

.ek.ek.ek .ek-schalter__eingabe:checked + .ek-schalter__flaeche .ek-schalter__symbol {
	background: var(--ek-akzent);
	color: var(--ek-akzent-text);
}

.ek.ek.ek .ek-schalter__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ek.ek.ek .ek-schalter__text strong { font-size: 15px; }
.ek.ek.ek .ek-schalter__text span { color: var(--ek-text-leise); font-size: 13px; line-height: 1.5; }

.ek.ek.ek .ek-schalter__knebel {
	position: relative;
	width: 46px;
	height: 26px;
	flex: none;
	border-radius: 999px;
	background: var(--ek-linie-stark);
	transition: background .16s ease;
}

.ek.ek.ek .ek-schalter__knebel::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ek-flaeche);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .16s ease;
}

.ek.ek.ek .ek-schalter__eingabe:checked + .ek-schalter__flaeche .ek-schalter__knebel { background: var(--ek-akzent); }
.ek.ek.ek .ek-schalter__eingabe:checked + .ek-schalter__flaeche .ek-schalter__knebel::after { transform: translateX(20px); }

/* --- Geführter Einstieg -------------------------------------------------

   Der Rechner hat fünf Abschnitte und rund dreißig Eingaben. Dieser Bereich
   steht deshalb ganz oben und lädt zum Loslegen ein, statt sofort ein
   Formular zu zeigen. */

.ek.ek.ek .ek-einstieg {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0 var(--ek-luft) var(--ek-luft);
	padding: var(--ek-luft);
	background: var(--ek-akzent-weich);
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius);
}

.ek.ek.ek .ek-einstieg__kopf { display: flex; align-items: flex-start; gap: 14px; }

.ek.ek.ek .ek-einstieg__symbol {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--ek-radius-klein);
	background: var(--ek-akzent);
	color: var(--ek-akzent-text);
}

.ek.ek.ek .ek-einstieg__text { display: grid; gap: 4px; min-width: 0; max-width: 74ch; }
.ek.ek.ek .ek-einstieg__text strong { font-size: 16px; }
.ek.ek.ek .ek-einstieg__text span { font-size: 13.5px; line-height: 1.6; color: var(--ek-text-leise); }

/* Das Feld trägt den Diktatknopf in der rechten unteren Ecke. */
.ek.ek.ek .ek-einstieg__feld { position: relative; display: block; }

.ek.ek.ek .ek-einstieg__feld textarea {
	display: block;
	width: 100%;
	min-height: 116px;
	padding: 14px 16px;
	padding-right: 60px;
	border: 1px solid var(--ek-linie-stark);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche);
	color: var(--ek-text);
	font-family: var(--ek-schrift-text);
	font-size: 15px;
	line-height: 1.6;
	resize: vertical;
}

.ek.ek.ek .ek-einstieg__feld textarea::placeholder { color: var(--ek-text-leise); opacity: .85; }

.ek.ek.ek .ek-diktat {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ek-linie-stark);
	border-radius: 999px;
	background: var(--ek-flaeche);
	color: var(--ek-text-leise);
	cursor: pointer;
}

.ek.ek.ek .ek-diktat:hover { border-color: var(--ek-akzent); color: var(--ek-akzent); }

/* Läuft die Aufnahme, pulsiert der Knopf – ohne Ton gäbe es sonst keine
   Rückmeldung, dass tatsächlich zugehört wird. */
.ek.ek.ek .ek-diktat.ist-aktiv {
	background: var(--ek-gefahr);
	border-color: var(--ek-gefahr);
	color: #fff;
	animation: ek-mikro 1.4s ease-in-out infinite;
}

/* Eigener Takt statt „ek-pulsieren": Der wächst auf das Anderthalbfache und
   würde den Knopf über den Rand des Feldes schieben. */
@keyframes ek-mikro {
	0%, 100% { box-shadow: 0 0 0 0 rgba(168, 52, 42, .45); }
	60%      { box-shadow: 0 0 0 8px rgba(168, 52, 42, 0); }
}

.ek.ek--ohne-bewegung .ek-diktat.ist-aktiv { animation: none; }

.ek.ek.ek .ek-einstieg__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

.ek.ek.ek .ek-einstieg__fussnote {
	font-size: 12px;
	line-height: 1.5;
	color: var(--ek-text-leise);
}


.ek.ek.ek .ek-einstieg__meldung {
	padding: 12px 16px;
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche);
	border: 1px solid var(--ek-linie);
	font-size: 13.5px;
	line-height: 1.6;
}

.ek.ek.ek .ek-einstieg__meldung.ist-fehler {
	background: var(--ek-gefahr-weich);
	border-color: var(--ek-gefahr);
	color: var(--ek-gefahr);
}

.ek.ek.ek .ek-einstieg__ergebnis {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	padding: 16px;
	background: var(--ek-flaeche);
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
}

.ek.ek.ek .ek-verstanden { display: grid; gap: 8px; }
.ek.ek.ek .ek-verstanden__titel { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ek-text-leise); }
.ek.ek.ek .ek-verstanden__satz { font-size: 15px; line-height: 1.6; }

.ek.ek.ek .ek-fehlend { display: grid; gap: 10px; }
.ek.ek.ek .ek-fehlend__titel { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ek-text-leise); }
.ek.ek.ek .ek-fehlend__liste { display: flex; flex-wrap: wrap; gap: 8px; }

.ek.ek.ek .ek-fehlend__punkt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--ek-warnung);
	border-radius: 999px;
	background: var(--ek-warnung-weich);
	color: var(--ek-warnung);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.ek.ek.ek .ek-fehlend__punkt:hover { background: var(--ek-flaeche); }

.ek.ek.ek .ek-einstieg__hinweise { display: grid; gap: 8px; }

.ek.ek.ek .ek-einstieg__hinweis {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ek-text-leise);
}

.ek.ek.ek .ek-einstieg__hinweis svg { flex: none; margin-top: 2px; color: var(--ek-warnung); }

/* Marktüberblick */
.ek.ek.ek .ek-wege { display: grid; gap: 12px; }
.ek.ek.ek .ek-wege__titel { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ek-text-leise); }

.ek.ek.ek .ek-weg {
	display: grid;
	gap: 4px;
	padding: 12px 14px;
	background: var(--ek-flaeche-2);
	border-radius: var(--ek-radius-klein);
}

.ek.ek.ek .ek-weg strong { font-size: 14px; }
.ek.ek.ek .ek-weg span { font-size: 13px; line-height: 1.6; color: var(--ek-text-leise); }
.ek.ek.ek .ek-weg em { font-style: normal; font-size: 13px; line-height: 1.6; color: var(--ek-warnung); }

.ek.ek.ek .ek-wege__quellen { font-size: 12px; line-height: 1.6; color: var(--ek-text-leise); overflow-wrap: anywhere; }

/* Aus dem Freitext übernommene Felder bleiben kurz gekennzeichnet, damit ein
   Missverständnis auffällt, bevor gerechnet wird. */
.ek.ek.ek .ek-feld.ist-uebernommen .ek-feld__label::after,
.ek.ek.ek .ek-eingabe.ist-uebernommen > .ek-eingabe__label::after,
.ek.ek.ek .ek-schalter.ist-uebernommen .ek-schalter__text strong::after {
	content: "aus Ihrer Beschreibung";
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ek-akzent-weich);
	color: var(--ek-akzent-dunkel);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	vertical-align: middle;
}

.ek.ek.ek .ek-versteckt-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 720px) {
	.ek.ek.ek .ek-einstieg { padding: 16px; margin: 0 var(--ek-luft) 16px; }
	.ek.ek.ek .ek-einstieg__knoepfe .ek-btn { flex: 1 1 100%; }
}

/* --- Rechengrundlagen im Frontend --------------------------------------

   Wer den Rechner ernst nimmt, will die Annahmen sehen und notfalls durch die
   eigenen ersetzen. Der Bereich liegt deshalb gleich unter der Überschrift –
   nicht versteckt am Seitenende. */

.ek.ek.ek .ek-kennwerte {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ek-luft);
	padding: var(--ek-luft);
	margin-bottom: var(--ek-luft);
	background: var(--ek-flaeche);
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius);
}


.ek.ek.ek .ek-kennwerte__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ek-linie);
}

.ek.ek.ek .ek-kennwerte__text { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; max-width: 68ch; }
.ek.ek.ek .ek-kennwerte__text strong { font-size: 16px; }
.ek.ek.ek .ek-kennwerte__text span { font-size: 13.5px; line-height: 1.6; color: var(--ek-text-leise); }

.ek.ek.ek .ek-kennwerte__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }


.ek.ek.ek .ek-kennwerte__meldung {
	padding: 12px 16px;
	border-radius: var(--ek-radius-klein);
	background: var(--ek-akzent-weich);
	color: var(--ek-akzent-dunkel);
	font-size: 13.5px;
	line-height: 1.6;
}

.ek.ek.ek .ek-kennwerte__meldung.ist-fehler {
	background: var(--ek-gefahr-weich);
	color: var(--ek-gefahr);
}

.ek.ek.ek .ek-kennwerte__gruppe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.ek.ek.ek .ek-kennwerte__titel {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ek-schrift-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ek-text-leise);
}

.ek.ek.ek .ek-kennwerte__titel svg { color: var(--ek-akzent); }

.ek.ek.ek .ek-kennwerte__liste {
	display: grid;
	/* „auto-fill" statt „auto-fit": Eine Gruppe mit nur einem Wert zieht ihn
	   sonst über die ganze Breite – das Eingabefeld wäre dann 1.000 Pixel
	   breit für eine zweistellige Zahl. */
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px 20px;
}

.ek.ek.ek .ek-kennwert { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ek.ek.ek .ek-kennwert__label { font-size: 13.5px; font-weight: 600; }

.ek.ek.ek .ek-kennwert__eingabe { display: flex; align-items: center; gap: 8px; }

.ek.ek.ek .ek-kennwert__eingabe input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--ek-linie-stark);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche);
	color: var(--ek-text);
	font-family: var(--ek-schrift-text);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Vom Vorgabewert abweichende Felder bleiben sichtbar gekennzeichnet. */
.ek.ek.ek .ek-kennwert__eingabe input.ist-geaendert {
	border-color: var(--ek-akzent);
	background: var(--ek-akzent-weich);
	font-weight: 700;
}

.ek.ek.ek .ek-kennwert__einheit {
	flex: none;
	max-width: 40%;
	font-size: 12.5px;
	color: var(--ek-text-leise);
	overflow-wrap: anywhere;
}

.ek.ek.ek .ek-kennwert__quelle {
	font-size: 12px;
	line-height: 1.5;
	color: var(--ek-text-leise);
	overflow-wrap: anywhere;
}

.ek.ek.ek .ek-btn.ist-laedt { opacity: .6; cursor: progress; }

@media (max-width: 720px) {
	.ek.ek.ek .ek-kennwerte { padding: 16px; }
	.ek.ek.ek .ek-kennwerte__knoepfe .ek-btn { flex: 1 1 100%; }
}

/* --- Abhängige Bereiche -------------------------------------------------

   Felder, die zu einem abgeschalteten Schalter gehören, erscheinen erst, wenn
   dieser eingeschaltet ist. Der eingerückte linke Rand macht sichtbar, dass
   sie zum Schalter darüber gehören. */

.ek.ek.ek .ek-abhaengig {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ek-luft);
	margin-top: var(--ek-luft);
	padding-left: var(--ek-luft);
	border-left: 2px solid var(--ek-linie);
}


@media (max-width: 460px) {
	.ek.ek.ek .ek-abhaengig { padding-left: 12px; }
}

/* --- Szenarien --------------------------------------------------------- */

.ek.ek.ek .ek-szenarien {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}

.ek.ek.ek .ek-szenario {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border: 2px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche);
	text-align: left;
	min-height: 68px;
	transition: border-color .16s ease, background .16s ease;
}

.ek.ek.ek .ek-szenario:hover { border-color: var(--ek-linie-stark); }
.ek.ek.ek .ek-szenario strong { font-size: 14.5px; }
.ek.ek.ek .ek-szenario span { color: var(--ek-text-leise); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.ek.ek.ek .ek-szenario.ist-aktiv {
	border-color: var(--ek-akzent);
	background: var(--ek-akzent-weich);
}

/* --- Schaltflächen ----------------------------------------------------- */

.ek.ek.ek .ek-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 22px;
	min-height: 48px;
	border-radius: var(--ek-radius-klein);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid transparent;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.ek.ek.ek .ek-btn--haupt {
	background: var(--ek-akzent);
	color: var(--ek-akzent-text);
}

.ek.ek.ek .ek-btn--haupt:hover { background: var(--ek-akzent-dunkel); }

.ek.ek.ek .ek-btn--rand {
	background: var(--ek-flaeche);
	border-color: var(--ek-linie-stark);
	color: var(--ek-text);
}

.ek.ek.ek .ek-btn--rand:hover { border-color: var(--ek-akzent); color: var(--ek-akzent-dunkel); }

.ek.ek.ek .ek-btn--breit { width: 100%; }

/* Kleinere Ausführung für Nebenhandlungen – bleibt mit 40 Pixel Höhe auch
   auf dem Handy sicher zu treffen. */
.ek.ek.ek .ek-btn--klein {
	min-height: 40px;
	padding: 0 16px;
	gap: 8px;
	font-size: 13.5px;
}

.ek.ek.ek .ek-btn--still {
	background: transparent;
	border-color: var(--ek-linie);
	color: var(--ek-text-leise);
}

.ek.ek.ek .ek-btn--still:hover { border-color: var(--ek-linie-stark); color: var(--ek-text); }

.ek.ek.ek .ek-btn[disabled] { opacity: .55; cursor: default; }

/* --- Raster ------------------------------------------------------------ */

.ek.ek.ek .ek-raster {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
}

.ek.ek.ek .ek-raster--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ------------------------------------------------------------------------
   3) Seitenaufbau
   ------------------------------------------------------------------------ */

.ek.ek.ek .ek-koerper {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	grid-template-areas: "haupt seite";
	gap: 28px;
	padding: 28px var(--ek-luft);
	align-items: start;
}

.ek.ek.ek .ek-haupt {
	grid-area: haupt;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
}

.ek.ek.ek .ek-seite {
	grid-area: seite;
	position: sticky;
	top: calc(var(--ek-kopf-offset, 0px) + 24px);
}

/* --- Ergebnisspalte ---------------------------------------------------- */

.ek.ek.ek .ek-ergebnis {
	background: var(--ek-flaeche);
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius);
	box-shadow: var(--ek-schatten);
	padding: 22px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.ek.ek.ek .ek-ergebnis__kopf {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ek-linie);
	font-family: var(--ek-schrift-titel);
	font-size: 17px;
	font-weight: 600;
}

.ek.ek.ek .ek-ergebnis__kopf svg { color: var(--ek-akzent); }

.ek.ek.ek .ek-ergebnis__punkt {
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--ek-akzent);
	opacity: 0;
	transition: opacity .2s ease;
}

.ek.ek.ek .ek-ergebnis__punkt.ist-aktiv { opacity: 1; animation: ek-pulsieren 1s ease-in-out infinite; }

@keyframes ek-pulsieren {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.5); opacity: .45; }
}

/* --- Zeitraumwahl ------------------------------------------------------ */

.ek.ek.ek .ek-zeitwahl {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

.ek.ek.ek .ek-zeitwahl__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ek-text-leise);
}

.ek.ek.ek .ek-zeitwahl__knoepfe {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}

.ek.ek.ek .ek-zeit {
	display: grid;
	place-items: center;
	min-height: 42px;
	border-radius: var(--ek-radius-klein);
	border: 1px solid var(--ek-linie);
	background: var(--ek-flaeche);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.ek.ek.ek .ek-zeit:hover { border-color: var(--ek-linie-stark); }

.ek.ek.ek .ek-zeit.ist-aktiv {
	background: var(--ek-akzent);
	border-color: var(--ek-akzent);
	color: var(--ek-akzent-text);
}

.ek.ek.ek .ek-zeitwahl__einheit {
	color: var(--ek-text-leise);
	font-size: 12px;
	text-align: right;
}

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

.ek.ek.ek .ek-kennzahlen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ek.ek.ek .ek-kennzahl {
	display: grid;
	gap: 3px;
	padding: 14px 16px;
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche-2);
}

.ek.ek.ek .ek-kennzahl__label {
	font-size: 12.5px;
	color: var(--ek-text-leise);
	line-height: 1.35;
}

.ek.ek.ek .ek-kennzahl__wert {
	font-family: var(--ek-schrift-titel);
	font-size: 19px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ek.ek.ek .ek-kennzahl--gross {
	background: var(--ek-akzent-weich);
	border-color: var(--ek-akzent);
	padding: 18px 20px;
}

.ek.ek.ek .ek-kennzahl--gross .ek-kennzahl__wert {
	font-size: clamp(26px, 3.4vw, 34px);
	color: var(--ek-akzent-dunkel);
	letter-spacing: -.02em;
}

.ek.ek.ek .ek-kennzahl--gross.ist-negativ {
	background: var(--ek-warnung-weich);
	border-color: var(--ek-warnung);
}

.ek.ek.ek .ek-kennzahl--gross.ist-negativ .ek-kennzahl__wert { color: var(--ek-warnung); }

.ek.ek.ek .ek-kennzahl__zusatz {
	font-size: 12.5px;
	color: var(--ek-text-leise);
	line-height: 1.45;
}

.ek.ek.ek .ek-kennzahl--gut .ek-kennzahl__wert { color: var(--ek-akzent-dunkel); }

/* --- Bilanztabelle in der Spalte --------------------------------------- */

.ek.ek.ek .ek-bilanz {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	background: var(--ek-linie);
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	overflow: hidden;
}

.ek.ek.ek .ek-bilanz__zeile {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) auto auto;
	gap: 10px;
	align-items: center;
	padding: 10px 14px;
	background: var(--ek-flaeche);
	font-size: 13px;
}

.ek.ek.ek .ek-bilanz__zeile--kopf {
	background: var(--ek-flaeche-2);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ek-text-leise);
}

.ek.ek.ek .ek-bilanz__label { min-width: 0; }
.ek.ek.ek .ek-bilanz__ist { color: var(--ek-bestand); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ek.ek.ek .ek-bilanz__soll { color: var(--ek-plan); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.ek.ek.ek .ek-ergebnis__aktionen { display: grid; gap: 10px; }

/* ------------------------------------------------------------------------
   4) Auswertung
   ------------------------------------------------------------------------ */

.ek.ek.ek .ek-auswertung,
.ek.ek.ek .ek-anfrage {
	padding: 0 var(--ek-luft) 28px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.ek.ek.ek .ek-auswertung__kopf { padding-top: 10px; }

.ek.ek.ek .ek-auswertung__kopf h3 {
	font-size: clamp(21px, 2.6vw, 27px);
	margin-bottom: 6px;
}

.ek.ek.ek .ek-auswertung__kopf p {
	color: var(--ek-text-leise);
	font-size: 15px;
	max-width: 70ch;
}

.ek.ek.ek .ek-karte {
	background: var(--ek-flaeche);
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius);
	box-shadow: var(--ek-schatten-klein);
	padding: 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.ek.ek.ek .ek-karte--leise { background: var(--ek-flaeche-2); box-shadow: none; }

.ek.ek.ek .ek-karte__titel {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ek-linie);
}

.ek.ek.ek .ek-karte__titel svg { color: var(--ek-akzent); }

.ek.ek.ek .ek-karte__text {
	margin-top: -6px;
	color: var(--ek-text-leise);
	font-size: 14px;
	line-height: 1.6;
	max-width: 76ch;
}

.ek.ek.ek .ek-grafik { width: 100%; overflow-x: auto; }
/* Kein min-width: Die Grafik wird serverseitig genau in der gemessenen
   Containerbreite gezeichnet. Ein Mindestmaß würde den Browser wieder zum
   Skalieren zwingen und damit alle Beschriftungen mitvergrößern. */
.ek.ek.ek .ek-svg { display: block; width: 100%; height: auto; font-family: var(--ek-schrift-text); }

.ek.ek.ek .ek-legende { display: flex; flex-wrap: wrap; gap: 18px; }

.ek.ek.ek .ek-legende__eintrag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ek-text-leise);
}

.ek.ek.ek .ek-legende__eintrag i {
	width: 14px;
	height: 4px;
	border-radius: 2px;
	background: var(--ek-linie-stark);
}

.ek.ek.ek .ek-legende__eintrag i[data-ek-legende="bestand"] { background: var(--ek-bestand); }
.ek.ek.ek .ek-legende__eintrag i[data-ek-legende="plan"] { background: var(--ek-plan); }

/* --- Hinweise ---------------------------------------------------------- */

.ek.ek.ek .ek-hinweis {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 14px 16px;
	border: 1px solid var(--ek-warnung);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-warnung-weich);
	color: #6E4A11;
	font-size: 13.5px;
	line-height: 1.55;
}

.ek.ek.ek .ek-hinweis svg { flex: none; margin-top: 2px; }

/* --- Posten und Annahmen ----------------------------------------------- */

.ek.ek.ek .ek-posten,
.ek.ek.ek .ek-annahmen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	background: var(--ek-linie);
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	overflow: hidden;
}

.ek.ek.ek .ek-posten__zeile,
.ek.ek.ek .ek-annahmen__zeile {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 15px;
	background: var(--ek-flaeche);
	font-size: 13.5px;
}

.ek.ek.ek .ek-karte--leise .ek-posten__zeile,
.ek.ek.ek .ek-karte--leise .ek-annahmen__zeile { background: var(--ek-flaeche); }

.ek.ek.ek .ek-posten__label,
.ek.ek.ek .ek-annahmen__label { min-width: 0; }

.ek.ek.ek .ek-posten__wert,
.ek.ek.ek .ek-annahmen__wert {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* Auf schmalen Bildschirmen brechen Beschriftung und Wert untereinander um,
   sonst schiebt ein langer Wert die Zeile aus dem Rahmen. */
@media (max-width: 460px) {
	.ek.ek.ek .ek-posten__zeile,
	.ek.ek.ek .ek-annahmen__zeile {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 3px;
	}

	.ek.ek.ek .ek-posten__wert,
	.ek.ek.ek .ek-annahmen__wert {
		text-align: left;
		white-space: normal;
	}
}

.ek.ek.ek .ek-posten__zusatz {
	display: block;
	color: var(--ek-akzent-dunkel);
	font-size: 12px;
	font-weight: 500;
}

/* --- Tabelle ----------------------------------------------------------- */

.ek.ek.ek .ek-tabellenrahmen {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
}

.ek.ek.ek .ek-tabelle { min-width: 720px; font-size: 13px; font-variant-numeric: tabular-nums; }

.ek.ek.ek .ek-tabelle th {
	padding: 11px 12px;
	background: var(--ek-flaeche-2);
	border-bottom: 2px solid var(--ek-linie);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ek-text-leise);
	white-space: nowrap;
}

.ek.ek.ek .ek-tabelle td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--ek-linie);
	white-space: nowrap;
}

.ek.ek.ek .ek-tabelle tr:last-child td { border-bottom: 0; }
.ek.ek.ek .ek-tabelle tbody tr:hover td { background: var(--ek-flaeche-2); }
.ek.ek.ek .ek-tabelle .ek-rechts { text-align: right; }
.ek.ek.ek .ek-tabelle th.ek-rechts { text-align: right; }
.ek.ek.ek .ek-tabelle .ek-hervor td { background: var(--ek-akzent-weich); font-weight: 600; }

.ek.ek.ek .ek-tabelle__grund {
	display: block;
	color: var(--ek-text-leise);
	font-size: 11.5px;
	white-space: normal;
}

/* ------------------------------------------------------------------------
   5) KI-Bereiche
   ------------------------------------------------------------------------ */

.ek.ek.ek .ek-ki-kasten {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	padding: 18px 20px;
	border: 1px dashed var(--ek-akzent);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-akzent-weich);
}

.ek.ek.ek .ek-ki-kasten__kopf {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	color: var(--ek-akzent-dunkel);
}

.ek.ek.ek .ek-ki-kasten__kopf--knopf {
	width: 100%;
	cursor: pointer;
	text-align: left;
	outline-offset: 3px;
}

.ek.ek.ek .ek-ki-kasten__kopf--knopf strong { flex: 1; min-width: 0; }

.ek.ek.ek .ek-ki-kasten__pfeil {
	display: grid;
	place-items: center;
	flex: none;
	transition: transform .18s ease;
}

.ek--ohne-bewegung.ek.ek .ek-ki-kasten__pfeil { transition: none; }

.ek.ek.ek [data-ek-klapp-auf][aria-expanded="true"] .ek-ki-kasten__pfeil { transform: rotate(180deg); }

.ek.ek.ek .ek-ki-kasten__inhalt {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.ek.ek.ek .ek-ki-kasten__text {
	color: var(--ek-text-leise);
	font-size: 13.5px;
	line-height: 1.55;
	max-width: 72ch;
}

.ek.ek.ek .ek-ki-kasten__zeile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
}

.ek.ek.ek .ek-ki-kasten__ergebnis {
	display: grid;
	gap: 10px;
	padding: 15px 17px;
	background: var(--ek-flaeche);
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	font-size: 13.5px;
	line-height: 1.6;
}

.ek.ek.ek .ek-ki-marke {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ek-flaeche-2);
	color: var(--ek-text-leise);
	font-size: 11.5px;
	font-weight: 600;
}

.ek.ek.ek .ek-karte--ki { border-color: var(--ek-akzent); }

.ek.ek.ek .ek-kitext {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.ek.ek.ek .ek-kitext h5 {
	font-family: var(--ek-schrift-titel);
	font-size: 18px;
	font-weight: 600;
}

.ek.ek.ek .ek-kitext p { font-size: 15px; line-height: 1.65; max-width: 74ch; }

.ek.ek.ek .ek-kitext__block { display: grid; gap: 8px; }

.ek.ek.ek .ek-kitext__titel {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ek-text-leise);
}

.ek.ek.ek .ek-kitext ul { display: grid; gap: 8px; }

.ek.ek.ek .ek-kitext li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.55;
	list-style: none;
}

.ek.ek.ek .ek-kitext li svg { flex: none; margin-top: 3px; }
.ek.ek.ek .ek-kitext li.ist-gut svg { color: var(--ek-akzent); }
.ek.ek.ek .ek-kitext li.ist-risiko svg { color: var(--ek-warnung); }

.ek.ek.ek .ek-pakete {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
}

.ek.ek.ek .ek-paket {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: 8px;
	padding: 16px 18px;
	background: var(--ek-flaeche);
	border: 2px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	text-align: left;
	transition: border-color .15s ease;
}

.ek.ek.ek .ek-paket:hover { border-color: var(--ek-akzent); }

.ek.ek.ek .ek-paket__aufwand {
	display: inline-flex;
	align-self: start;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--ek-flaeche-2);
	color: var(--ek-text-leise);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ek.ek.ek .ek-paket__name { font-family: var(--ek-schrift-titel); font-size: 16.5px; font-weight: 600; }
.ek.ek.ek .ek-paket__kurz { color: var(--ek-text); font-size: 13.5px; line-height: 1.5; }
.ek.ek.ek .ek-paket__grund { color: var(--ek-text-leise); font-size: 12.5px; line-height: 1.5; }

.ek.ek.ek .ek-paket__knopf {
	margin-top: 4px;
	padding: 10px 14px;
	min-height: 42px;
	border-radius: var(--ek-radius-klein);
	background: var(--ek-akzent);
	color: var(--ek-akzent-text);
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
}

/* --- Anfrage ----------------------------------------------------------- */

.ek.ek.ek .ek-anfragepreis {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-radius: var(--ek-radius-klein);
	background: var(--ek-akzent-weich);
	border: 1px solid var(--ek-akzent);
}

.ek.ek.ek .ek-anfragepreis__text {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: var(--ek-akzent-dunkel);
}

.ek.ek.ek .ek-anfragepreis__betrag {
	font-family: var(--ek-schrift-titel);
	font-size: 26px;
	font-weight: 700;
	color: var(--ek-akzent-dunkel);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ek.ek.ek .ek-formular {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.ek.ek.ek .ek-formular__zeile {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.ek.ek.ek .ek-einwilligung {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 14px 16px;
	border: 1px solid var(--ek-linie);
	border-radius: var(--ek-radius-klein);
	background: var(--ek-flaeche-2);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ek-text-leise);
	cursor: pointer;
}

.ek.ek.ek .ek-einwilligung input {
	appearance: none;
	width: 22px;
	height: 22px;
	flex: none;
	margin-top: 1px;
	border: 2px solid var(--ek-linie-stark);
	border-radius: 5px;
	background: var(--ek-flaeche);
	cursor: pointer;
}

.ek.ek.ek .ek-einwilligung input:checked {
	background: var(--ek-akzent);
	border-color: var(--ek-akzent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
	background-size: 15px;
	background-position: center;
	background-repeat: no-repeat;
}

.ek.ek.ek .ek-honigtopf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ek.ek.ek .ek-formular__aktionen { display: flex; flex-wrap: wrap; gap: 12px; }

.ek.ek.ek .ek-formular__meldung { font-size: 14px; line-height: 1.55; }
.ek.ek.ek .ek-formular__meldung.ist-gut { color: var(--ek-akzent-dunkel); font-weight: 600; }
.ek.ek.ek .ek-formular__meldung.ist-fehler { color: var(--ek-gefahr); font-weight: 600; }

/* --- Fußzeile ---------------------------------------------------------- */

.ek.ek.ek .ek-fuss {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 18px var(--ek-luft) 24px;
	border-top: 1px solid var(--ek-linie);
	color: var(--ek-text-leise);
	font-size: 12.5px;
	line-height: 1.55;
}

.ek.ek.ek .ek-fuss svg { flex: none; margin-top: 2px; opacity: .7; }

.ek.ek.ek .ek--hinweisbox { padding: 24px; }

/* --- Ladeschicht ------------------------------------------------------- */

.ek.ek.ek .ek-ladeschicht {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 14px;
	background: rgba(255, 255, 255, .72);
	backdrop-filter: blur(2px);
	z-index: 8;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ek-text-leise);
}


.ek.ek.ek .ek-spinner {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid var(--ek-linie);
	border-top-color: var(--ek-akzent);
	animation: ek-drehen .8s linear infinite;
}

@keyframes ek-drehen { to { transform: rotate(360deg); } }

.ek.ek.ek.ek--ohne-bewegung * { animation: none !important; transition: none !important; }

/* ------------------------------------------------------------------------
   6) Tastaturbedienung
   ------------------------------------------------------------------------ */

.ek.ek.ek :where(button, input, select, textarea, a, [tabindex]):focus-visible {
	outline: 3px solid var(--ek-akzent);
	outline-offset: 2px;
	border-radius: var(--ek-radius-klein);
}

.ek.ek.ek .ek-schalter__eingabe:focus-visible + .ek-schalter__flaeche {
	outline: 3px solid var(--ek-akzent);
	outline-offset: 2px;
}

.ek.ek.ek .ek-wahl__eintrag input:focus-visible {
	outline: 3px solid var(--ek-akzent);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------------
   7) Responsive
   ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ek.ek.ek .ek-koerper {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "seite" "haupt";
		gap: 24px;
	}

	.ek.ek.ek .ek-seite { position: static; }
	.ek.ek.ek { --ek-luft: 22px; }
}

@media (max-width: 720px) {
	.ek.ek.ek { --ek-luft: 16px; font-size: 15.5px; border-radius: 0; }

	.ek.ek.ek .ek-schritt { padding: 20px 18px; }
	.ek.ek.ek .ek-karte { padding: 20px 18px; }
	.ek.ek.ek .ek-ergebnis { padding: 18px; }

	.ek.ek.ek .ek-schritt__kopf { gap: 12px; padding-bottom: 16px; margin-bottom: 18px; }
	.ek.ek.ek .ek-schritt__marke { width: 40px; height: 40px; }
	.ek.ek.ek .ek-schritt__titel { font-size: 18px; }
	.ek.ek.ek .ek-schritt__nav { margin-top: 20px; padding-top: 16px; }
	.ek.ek.ek .ek-kacheln { grid-template-columns: minmax(0, 1fr); }
	.ek.ek.ek .ek-fortschritt__text { display: none; }
	.ek.ek.ek .ek-fortschritt__knopf { padding: 4px 6px; }

	.ek.ek.ek .ek-eingabe--plz { grid-template-columns: minmax(0, 1fr); gap: 8px; }

	.ek.ek.ek .ek-kennzahlen { grid-template-columns: minmax(0, 1fr); }

	.ek.ek.ek .ek-schieber {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "anzeige" "regler" "grenzen";
		gap: 10px;
	}

	.ek.ek.ek .ek-schieber__anzeige { justify-self: start; }

	.ek.ek.ek .ek-ki-kasten__zeile { grid-template-columns: minmax(0, 1fr); }

	.ek.ek.ek .ek-formular__aktionen .ek-btn { width: 100%; }

	.ek.ek.ek .ek-anfragepreis { flex-direction: column; align-items: flex-start; gap: 8px; }
	.ek.ek.ek .ek-anfragepreis__betrag { font-size: 23px; }

}

/* Bis 460 Pixel bleibt für den Beschreibungstext eines Schalters neben
   Symbol und Kippschalter zu wenig Platz (gemessen 86 bis 116 Pixel). Der Text
   rückt deshalb in eine eigene Zeile über die volle Breite. „display: contents"
   löst dafür die Zwischenhülle auf, ohne dass die Auszeichnung geändert werden
   muss. */
@media (max-width: 460px) {
	.ek.ek.ek .ek-schalter__flaeche {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"symbol titel  titel"
			"text   text   knebel";
		align-items: center;
		gap: 8px 12px;
		padding: 14px 15px;
	}

	.ek.ek.ek .ek-schalter__symbol { grid-area: symbol; width: 34px; height: 34px; }
	.ek.ek.ek .ek-schalter__text { display: contents; }

	/* Lange Zusammensetzungen werden nach den deutschen Trennregeln getrennt,
	   statt hart mitten im Wort umzubrechen. Voraussetzung ist lang="de" am
	   Dokument – das setzt WordPress aus den Spracheinstellungen. */
	.ek.ek.ek .ek-schalter__text strong {
		grid-area: titel;
		font-size: 14.5px;
		hyphens: auto;
	}

	.ek.ek.ek .ek-schalter__text span { grid-area: text; }
	.ek.ek.ek .ek-schalter__knebel { grid-area: knebel; justify-self: end; }

	/* Schalter ohne Beschreibungstext: Der Kippschalter rückt dann in die
	   erste Zeile, damit keine leere Zeile entsteht. */
	.ek.ek.ek .ek-schalter__text:not(:has(span)) ~ .ek-schalter__knebel,
	.ek.ek.ek .ek-schalter__flaeche:not(:has(.ek-schalter__text span)) .ek-schalter__knebel {
		grid-row: 1;
		grid-column: 3;
	}
}

@media (max-width: 420px) {
	.ek.ek.ek .ek-zeitwahl__knoepfe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
	.ek.ek.ek .ek-zeit { min-height: 40px; font-size: 13px; }
	.ek.ek.ek .ek-kennzahl--gross .ek-kennzahl__wert { font-size: 26px; }
}