/* TEN Tarifrechner (ab 2.7.0) */
.ten-tr {
	--ten-primary: #2e71bc;
	--ten-accent: #22534a;
	--ten-bg: #f2f7fa;
	--ten-radius: 14px;
	position: relative;
	box-sizing: border-box;
	max-width: none;
	margin: 0 auto;
	color: var(--ten-primary);
	line-height: 1.4;
}
.ten-tr *, .ten-tr *::before, .ten-tr *::after {box-sizing: border-box;font-size: var(--fs-p);}
.ten-tr [hidden] { display: none !important; }
.ten-tr .screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ten-tr__karte-produkt button.ten-tr__btn--gefuellt {font-weight: 500;font-size: var(--fs-p);}
.ten-tr__karte-produkt a.ten-tr__btn--rahmen {font-size: var(--fs-h5);}

/* ---------- Rechner ---------- */
.ten-tr__form {
	/* Bild ueber die volle Viewport-Breite, ca. 70vh hoch; Inhalt im 90 %-Container. */
	position: relative; display: flex; align-items: center;
	width: 100vw; margin-left: calc(50% - 50vw);
	min-height: 70vh; padding: 2rem 0; overflow: hidden;
}
body:has(.ten-tr__form) { overflow-x: clip; }

.ten-tr__bilder {position: absolute;inset: 0;height: 70vh;}
.ten-tr__bild {
	position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease;
	background-size: cover; background-position: center;
}
.ten-tr__bild.is-active { opacity: 1; }

.ten-tr__container {
	position: relative;
	z-index: 1;
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	margin-top: 30vh;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(1, 1fr);
	flex-direction: column;
	/* justify-content: center; */
	/* align-items: flex-start; */
	gap: 35px;
}
.ten-tr__karte {
	position: relative;
	width: 600px;
	min-width: 340px;
	margin: 0;
	padding: 2.75rem 3rem 3rem;
	border-radius: var(--ten-radius);
	background: var(--ten-primary);
	color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
	grid-column-start: 2;
}
.ten-tr__titel {
	margin: 0 0 2rem; color: #fff; font-size: clamp(1.8rem, 3.4vw, 3rem);
	font-weight: 700; line-height: 1.1; letter-spacing: .01em;
}
.ten-tr__zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ten-tr__gruppe { justify-content: flex-start; gap: 1.25rem; margin-bottom: 1.6rem; }

/* Schalter Privat / Gewerbe */
.ten-tr__schalter { position: relative; display: inline-block; width: 60px; height: 28px; cursor: pointer; }
.ten-tr__schalter input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ten-tr__schalter-bahn { position: absolute; inset: 0; border-radius: 28px; background: #fff; transition: background .2s; }
.ten-tr__schalter-bahn::before {
	content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px;
	border-radius: 50%; background: var(--ten-primary); transition: transform .2s;
}
.ten-tr__schalter input:checked + .ten-tr__schalter-bahn::before { transform: translateX(32px); }
.ten-tr__schalter input:focus-visible + .ten-tr__schalter-bahn { outline: 3px solid #fff; outline-offset: 3px; }

/* Mitglied ja/nein */
.ten-tr__mitglied { margin: 0 0 1.75rem; padding: 0; border: 0; justify-content: flex-start; flex-wrap: wrap; }
.ten-tr__mitglied legend {float: left;padding: 0;margin-right: auto;font-size: var(--fs-p);}
.ten-tr__mitglied .ten-tr__radio + .ten-tr__radio { margin-left: 1.5rem; }
.ten-tr__radio { position: relative; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.ten-tr__radio input {position: absolute;opacity: 0;}
.ten-tr__radio span::before {
	content: ""; display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin-right: .6rem;
	border: 1px solid #fff; border-radius: 50%; background: transparent;
}
.ten-tr__radio input:checked + span::before { background: #fff; box-shadow: inset 0 0 0 3px var(--ten-primary); }
.ten-tr__radio input:focus-visible + span::before { outline: 3px solid #fff; outline-offset: 3px; }

/* Energie-Tabs */
.ten-tr__tabs {
	display: flex; margin: 0 0 2rem; padding: 0; border: 2px solid #fff; border-radius: 12px;
	background: #fff; overflow: hidden;
}
.ten-tr__tab { position: relative; flex: 1 1 0; text-align: center; cursor: pointer; }
.ten-tr__tab input { position: absolute; opacity: 0; }
.ten-tr__tab span {
	display: block; padding: 1.05rem .5rem; color: var(--ten-primary); border-radius: 10px;
	transition: background .2s, color .2s;
}
.ten-tr__tab input:checked + span { background: var(--ten-primary); color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.ten-tr__tab input:focus-visible + span { outline: 3px solid var(--ten-primary); outline-offset: -3px; }

/* Regler */
.ten-tr__block { margin-top: 1.4rem; }
.ten-tr__personen-wert { font-variant-numeric: tabular-nums; }
.ten-tr__regler {
	--ten-fill: 30%;
	width: 100%; height: 26px; margin: .75rem 0 0; padding: 0; background: transparent;
	-webkit-appearance: none; appearance: none; cursor: pointer;
}
.ten-tr__regler::-webkit-slider-runnable-track {
	height: 2px; border-radius: 2px;
	background: linear-gradient(to right, #fff var(--ten-fill), rgba(255, 255, 255, .55) var(--ten-fill));
}
.ten-tr__regler::-moz-range-track { height: 2px; background: rgba(255, 255, 255, .55); }
.ten-tr__regler::-moz-range-progress { height: 2px; background: #fff; }
.ten-tr__regler::-webkit-slider-thumb {
	-webkit-appearance: none; width: 24px; height: 24px; margin-top: -11px; border-radius: 50%;
	background: var(--ten-primary); border: 2px solid #fff;
}
.ten-tr__regler::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ten-primary); border: 2px solid #fff; }
.ten-tr__regler:focus-visible::-webkit-slider-thumb { outline: 3px solid #fff; outline-offset: 3px; }
.ten-tr__regler:focus-visible::-moz-range-thumb { outline: 3px solid #fff; outline-offset: 3px; }

.ten-tr__verbrauch-lbl { display: block; }
.ten-tr__hinweis {display: block;max-width: 22em;margin-top: .6rem;font-size: var(--fs-p-s);line-height: 1.25;}
.ten-tr__eingabe {
	display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
	padding: .75rem 1rem; border-radius: 12px; background: #fff; color: var(--ten-primary); white-space: nowrap;
}
.ten-tr__verbrauch-feld {
	width: 5.2em;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--blue)!important;
	font: inherit;
	text-align: right;
	box-shadow: none;
	outline-offset: 4px;
	outline: none;
	border: unset!important;
}

/* Buttons */
.ten-tr__btn {
	display: inline-block;
	padding: 1.2rem 3.2rem;
	border: 2px solid var(--ten-primary);
	border-radius: 20px;
	background: var(--ten-primary);
	color: #fff;
	font-size: var(--fs-h4);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	letter-spacing: .04em;
	grid-column-start: 2;
	grid-row-start: 2;
	width: max-content;
	/* transition: background .2s, color .2s; */
}
.ten-tr__btn:hover, .ten-tr__btn:focus-visible { background: #fff; color: var(--ten-primary); }
.ten-tr__btn:focus-visible { outline: 3px solid var(--ten-primary); outline-offset: 2px; }
.ten-tr__btn[disabled] { opacity: .6; cursor: progress; }
.ten-tr__btn--senden {
	/* position: absolute; */
	/* left: 0; */
	/* bottom: 0; */
	/* padding: 1.2rem 3.2rem; */
	/* font-size: clamp(1.3rem, 2.4vw, 2rem); */
	/* font-weight: 700; */
	/* letter-spacing: .04em; */
	/* grid-column-start: 5; */
	/* grid-row-start: 2; */
	/* width: max-content; */
	/* border-radius: 20px; */
}
.ten-tr__btn--rahmen { background: transparent; color: var(--ten-primary); font-weight: 700; letter-spacing: .03em; padding: .8rem 2.2rem; font-size: 1.15rem; }
.ten-tr__btn--rahmen:hover, .ten-tr__btn--rahmen:focus-visible { background: var(--ten-primary); color: #fff; }
.ten-tr__btn--klein { padding: .55rem 1.3rem; background: transparent; color: var(--ten-primary); }
.ten-tr__btn--klein.is-active { background: var(--ten-primary); color: #fff; }

.ten-tr__status { min-height: 1.4em; margin: .5rem 0 0; color: #b32d2e; }

/* ---------- Ergebnis ---------- */
.ten-tr__ergebnis { width: 90%; max-width: 1450px; margin: 0 auto; padding: 5% 0; }
.ten-tr__kopf {display: flex;align-items: flex-start;justify-content: space-between;gap: 1.5rem;flex-wrap: wrap;margin-bottom: 7rem;}
.ten-tr__ergebnis-titel { margin: 0; color: var(--ten-primary); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 700; }
.ten-tr__ergebnis-titel:focus { outline: none; }
.ten-tr__zurueck {
	padding: 0; border: 0; background: none; color: var(--ten-primary); font-size: .95rem;
	text-decoration: underline; text-align: right; cursor: pointer;
}
.ten-tr__karten {display: flex;/* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */gap: 2.5rem;/* max-width: 1000px; */margin: 0 auto;flex-direction: row;flex-wrap: wrap;align-content: flex-start;justify-content: center;align-items: stretch;}
.ten-tr__leer { grid-column: 1 / -1; text-align: center; }
.ten-tr__karte-produkt {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 2px solid var(--ten-accent);
	border-radius: var(--ten-radius);
	background: var(--ten-bg);
	width: 28%;
}
.ten-tr__stoerer {
	position: absolute;
	left: 7.5%;
	bottom: calc(100% + 2px);
	padding: .7rem 1.4rem;
	border-radius: 12px 12px 0 0;
	background: var(--ten-primary);
	color: #fff;
	white-space: nowrap;
}
.ten-tr__kartenkopf { padding: 1.75rem 1.75rem 2rem; border-radius: 12px 12px 0 0; background: var(--ten-accent); color: #fff; }
.ten-tr__produktname {margin: 0 0 1.5rem;color: #fff;font-size: var(--fs-h4)!important;font-weight: 700;letter-spacing: .02em;min-height: 90px;line-height: 1.25em;}
.ten-tr__kopfpreis { display: flex; align-items: center; gap: 1.4rem; }
.ten-tr__icon {flex: 0 0 auto;width: 84px;height: 84px;object-fit: contain;}
.ten-tr__preistext {display: flex;flex-direction: column;align-items: flex-start;margin: 0 auto;}
.ten-tr__preis {font-size: var(--fs-h3);line-height: 1.1;font-weight: 700;}
.ten-tr__preisinfo {font-size: var(--fs-p-s);}

.ten-tr__kartenkoerper { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 1.75rem; padding: 1.75rem; }
.ten-tr__eckdaten { width: 100%; }
.ten-tr__kv { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
.ten-tr__kv span:first-child {font-weight: 700;}
.ten-tr__kv span:last-child { text-align: right; }
.ten-tr__haken {margin: 0;padding: 0 0 23px 0!important;list-style: none!important;align-self: stretch;}
.ten-tr__haken li { position: relative; padding: .2rem 0 .2rem 2.4rem; }
.ten-tr__haken li::before {
	content: ""; position: absolute; left: .2rem; top: .45rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
	background: var(--ten-primary)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.7 2.7L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.ten-tr__kartenkoerper .ten-tr__btn--rahmen { margin-top: auto; }
.ten-tr__steuer { margin: 2rem 0 0; text-align: center; font-weight: 700; font-size: .95rem; }
.ten-tr__steuer--detail { margin-top: 1.75rem; text-align: left; }

/* ---------- Tarifdetails (Dialog) ---------- */
html.ten-tr-offen { overflow: hidden; }
.ten-tr__dialog {
	width: min(1100px, 94vw); max-height: 92vh; padding: 0; overflow: hidden;
	border: 2px solid var(--ten-accent); border-radius: var(--ten-radius); background: var(--ten-bg); color: var(--ten-primary);
}
.ten-tr__dialog::backdrop { background: rgba(10, 30, 45, .6); }
.ten-tr__dialog-inner {padding: 3.25rem; display: flex; flex-direction: column; max-height: calc(92vh - 4px);}
.ten-tr__dialog-kopf { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 2rem; flex: 0 0 auto; }
.ten-tr__dialog-kopf h2 { margin: 0 auto 0 0; color: var(--ten-primary); font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 700; }
.ten-tr__dialog-tabs { display: flex; gap: 1.25rem; }
.ten-tr__dialog-tabs button, .ten-tr__dialog-tabs a {
    font-size: var(--fs-h5);
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 10px;
}
.ten-tr__dialog-zu {width: 2.5rem;height: 2.5rem;border: 0;background: none;color: var(--ten-primary);font-size: 2rem;line-height: 1;cursor: pointer;position: absolute;right: 0;top: 0;}
.ten-tr__dialog-body { display: grid; grid-template-columns: minmax(240px, 5fr) 8fr; gap: 2.5rem; align-items: start; flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.ten-tr__dialog-links { overflow-y: auto; max-height: 100%; }
.ten-tr__kartenkopf--detail { border-radius: var(--ten-radius); }
.ten-tr__kartenkopf--detail .ten-tr__kartenkopf { padding: 0 0 1.5rem; background: none; }
.ten-tr__kartenkopf--detail .ten-tr__eckdaten { margin-top: 1.5rem; }
.ten-tr__dialog-links .ten-tr__haken {margin-top: 1.75rem;list-style: none;padding-left: 0;}
.ten-tr__abschluss-hinweis, .ten-tr__deaktiviert { margin: 1.25rem 0 0; padding: .9rem 1.1rem; border: 2px solid var(--ten-primary); border-radius: 10px; color: var(--ten-primary); font-weight: 700; text-align: center; }
.ten-tr--hinweis { max-width: 90%; margin: 0 auto; }

.ten-tr__dialog-inhalt { color: #111; align-self: stretch; min-height: 0; overflow-y: auto; }
.ten-tr__abschnitt { margin-bottom: 1.75rem; }
.ten-tr__abschnitt h4 { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; color: #000; }
.ten-tr__wysiwyg > :first-child { margin-top: 0; }
.ten-tr__wysiwyg > :last-child { margin-bottom: 0; }
.ten-tr__unterlagen { margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.ten-tr__unterlagen a { color: #000; text-decoration: underline; }

.ten-tr__pd-gruppe { margin-bottom: 2.25rem; }
.ten-tr__pd-titel {margin: 0 0 1.5rem;color: var(--ten-primary);font-size: var(--fs-p)!important;/* font-weight: 400; */}
.ten-tr__pd { display: grid; grid-template-columns: minmax(9rem, 1fr) 2fr; gap: 1rem; margin-bottom: .6rem; }
.ten-tr__pd-l { font-weight: 700; }
.ten-tr__pd-w {display: flex;flex-direction: column;font-size: var(--fs-p-s);}
.ten-tr__fett { font-weight: 700; }
.ten-tr__abschlag-hinweis {margin: 0;padding: 1rem 1.25rem!important;border: 1px solid var(--ten-primary);border-radius: 12px;color: #111;}

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
	/* Mobil: Bild oben (4:3), darunter der Rechner mit 5 % Abstand ringsum. */
	.ten-tr__form { display: block; min-height: 0; padding: 0; overflow: visible; background: none; }
	.ten-tr__bilder {position: relative;inset: auto;width: 100%;/* aspect-ratio: 3 / 4; */overflow: hidden;height: 30vh;}
	.ten-tr__container { display: block; width: 90%; margin: 5% auto; }
	.ten-tr__zurueck {margin-left: auto;}
	.ten-tr__karte { width: 100%; min-width: 0; padding: 1.75rem 1.5rem 2rem; }
	.ten-tr__karten {display: flex;flex-direction: column;align-items: stretch;justify-content: flex-start;gap: 5rem;}
	.ten-tr__karte-produkt { width: 100%;}
	.ten-tr__produktname {margin: 0 0 1.5rem;/* color: #fff; */font-size: var(--fs-h2)!important;/* font-weight: 700; *//* letter-spacing: .02em; *//* position: static; *//* display: block; *//* width: 100%; */margin: 0;/* padding: 1rem; */}
	.ten-tr__preis {font-size: var(--fs-c-100);}
	.ten-tr__zeile { flex-wrap: wrap; }
	.ten-tr__mitglied legend { float: none; width: 100%; margin-bottom: .6rem; }
	.ten-tr__mitglied .ten-tr__radio + .ten-tr__radio { margin-left: 1.5rem; }
	.ten-tr__dialog-body { grid-template-columns: 1fr; grid-template-rows: auto; gap: 1.5rem; overflow-y: auto; }
	.ten-tr__dialog-links { overflow: visible; max-height: none; }
	.ten-tr__dialog-inhalt { overflow: visible; }
	.ten-tr__dialog-inner { padding: 1.25rem; }
	.ten-tr__pd { grid-template-columns: 1fr; gap: .1rem; }
	.ten-tr__kopf {margin-bottom: 6rem;width: 100%;}
}

@media (prefers-reduced-motion: reduce) {
	.ten-tr__bild, .ten-tr__schalter-bahn::before, .ten-tr__btn { transition: none; }
}

/* ---------- Tarifrechner deaktiviert (ab 2.11.0) ---------- */
.ten-tr__sperrhinweis { margin: 1.5rem 0 0; padding: .8rem 1rem; border: 2px solid #fff; border-radius: 10px; color: #fff; font-weight: 700; text-align: center; }
.ten-tr.is-gesperrt .ten-tr__personen,
.ten-tr.is-gesperrt .ten-tr__verbrauch,
.ten-tr.is-gesperrt .ten-tr__mitglied { opacity: .45; filter: grayscale(1); pointer-events: none; }
.ten-tr.is-global-aus .ten-tr__karte { opacity: .6; filter: grayscale(.85); }
.ten-tr.is-global-aus .ten-tr__gruppe,
.ten-tr.is-global-aus .ten-tr__tabs { pointer-events: none; }
.ten-tr.is-gesperrt .ten-tr__btn--senden[disabled],
.ten-tr.is-gesperrt .ten-tr__btn--senden[disabled]:hover { background: var(--ten-primary); color: #fff; opacity: .5; cursor: not-allowed; }

/* Produktfarben je Energieart (zentral im CSS, nicht mehr im Backend) */
.ten-tr[data-energie="gas"] { --ten-accent: #9e8a2b; }
.ten-tr[data-energie="waerme"] { --ten-accent: #c45e26; }

/* Preisdetails: Abschnitte mit grauer Linie, Preise und Berechnung in unterschiedlichen Größen */
.ten-tr__pd-abschnitt { padding: 1rem 0; }
.ten-tr__pd-abschnitt + .ten-tr__pd-abschnitt { border-top: 1px solid #d9d9d9; }
.ten-tr__pd-kopf, .ten-tr__pd-calc { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ten-tr__pd-kopf .ten-tr__pd-l, .ten-tr__pd-summe { font-size: var(--fs-p); font-weight: 700; }
.ten-tr__pd-summe small { font-size: var(--fs-p-s); font-weight: 400; }
.ten-tr__pd-calc { margin-top: .35rem; }
.ten-tr__pd-l--calc { font-size: var(--fs-p-s); font-weight: 400; }
.ten-tr__pd-calc .ten-tr__pd-w { align-items: flex-end; text-align: right; }
.ten-tr__pd-zeile, .ten-tr__pd-zeile strong { font-size: var(--fs-p-s); }
.ten-tr__pd-zeile strong { font-weight: 700; }
.ten-tr__op { margin: 0 .5em; font-size: var(--fs-p-s); }
@media (max-width: 600px) {
	.ten-tr__pd-calc { flex-direction: column; gap: .15rem; }
	.ten-tr__pd-calc .ten-tr__pd-w { align-items: flex-start; text-align: left; }
}

/* Preisdetails: Berechnung als Aufklapper */
.ten-tr__pd-calc { display: block; margin-top: .35rem; }
.ten-tr__pd-calc > summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; color: var(--ten-primary); }
.ten-tr__pd-calc > summary::-webkit-details-marker { display: none; }
.ten-tr__pd-calc > summary::before { content: ""; width: .5em; height: .5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .2s; flex: 0 0 auto; }
.ten-tr__pd-calc[open] > summary::before { transform: rotate(45deg); }
.ten-tr__pd-calc > summary:focus-visible { outline: 3px solid var(--ten-primary); outline-offset: 2px; }
.ten-tr__pd-calc[open] > .ten-tr__pd-w { margin-top: .5rem; }