/**
 * SDH Tarifvergleich (Handwerkerclub-Vorteile).
 *
 * Eine Komponente, zwei Einsatzorte: linke Spalte der oeffentlichen
 * Vorteils-Landingpage (~787 px) und Detailansicht der Dashboard-Vorteilswelt
 * (schmaler, per AJAX nachgeladen). Deshalb entscheidet eine CONTAINER-Query
 * ueber die Darstellung — das Fenster ist in beiden Faellen gleich breit, die
 * Komponente nicht.
 *
 * ZWEI REGELN FUER DIESE DATEI:
 *
 * 1. **Jede Farbe, Groesse und jeder Abstand laeuft ueber eine `--tv-*`-Variable**
 *    mit Fallback-Kette. Nur so ist alles im Elementor-Widget einstellbar UND
 *    greift auch fuer Markup, das per AJAX nachgeladen wird (Dashboard).
 *    Kette: `var(--eigen, var(--familie, var(--erbe, literal)))` —
 *    die `--vw-*`-Stufe sorgt dafuer, dass der Tarifvergleich im Dashboard der
 *    Farbgebung der Vorteilswelt folgt, wenn dort etwas gesetzt wurde.
 * 2. **Standardwerte stehen NUR hier**, nie als `default` im Control: Elementor
 *    schreibt jeden Control-Standard in die gecachte Seiten-CSS. Der Wert stuende
 *    dann zweimal, und eine Aenderung hier bliebe wirkungslos.
 */

/* ==========================================================================
   Breite des Widget-Rahmens — Notwendigkeit, nicht Kosmetik

   Elementor gibt Widgets in einem Container nur `max-width: 100%`, keine
   Breite. In einem Flex-Container muss der Browser die Eigengroesse des
   Kindes deshalb erst ausmessen — und in diesem Messdurchlauf meldet
   `.sdh-tv` wegen `container-type: inline-size` die Breite 0 (genau dafuer
   ist die Containment da, sonst waere die Container-Query zirkulaer). Der
   Inhalt wird also einmal bei 0 px ausgelegt, jedes Wort bricht einzeln um,
   und DIESE Hoehe bleibt am Widget stehen: gemessen 4364 px statt 1201 px,
   der Rest leerer Raum unter der sichtbaren Komponente.

   Eine ausdrueckliche Breite macht den Messdurchlauf ueberfluessig. Sie steht
   am Widget-Rahmen, nicht an `.sdh-tv` — an der Komponente selbst wirkt sie
   nicht, weil dort schon das Containment greift.

   Spezifitaet bewusst niedrig (0,1,0): Elementors eigene Breiten-Einstellung
   (`.elementor-widget.elementor-widget__width-initial`, 0,2,0) muss weiter
   gewinnen, sonst waere das Control im Reiter „Erweitert" wirkungslos.
   ========================================================================== */
.elementor-widget-sdh-club-tarife {
	width: 100%;
}

/* ==========================================================================
   Wurzel
   ========================================================================== */
.sdh-tv {
	container: sdh-tv / inline-size;
	font-size: var(--tv-font-size, 0.9rem);
	line-height: 1.45;
	color: var(--tv-text, var(--sdh-gray-800, #343a40));
}

/* ==========================================================================
   Kopf: Titel + „Schon ab"-Preis
   ========================================================================== */
.sdh-tv-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: var(--tv-head-gap, 20px);
}

/* Logo + Titel als eine Einheit: bricht der Kopf um, wandert die Preis-Plakette
   in die naechste Zeile — nie das Logo weg vom Titel. */
.sdh-tv-head-main {
	display: flex;
	align-items: center;
	gap: var(--tv-logo-gap, 14px);
	min-width: 0;
}

.sdh-tv-title {
	margin: 0;
	/* Groesse kommt aus der Typografie-Gruppe des Widgets — hier nur der Standard. */
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tv-title-color, inherit);
}

/* ==========================================================================
   Anbieter-Logo (o2 / Vodafone / Telekom)

   Logos haben voellig verschiedene Seitenverhaeltnisse — o2 ist rund, das
   Vodafone-Sprechzeichen quadratisch, die Telekom eine breite Wortmarke.
   Deshalb: feste HOEHE, Breite automatisch, dazu eine Deckelung nach rechts,
   damit eine Wortmarke die Ueberschrift nicht wegdrueckt.

   Der Selektor braucht ZWEI Klassen: das Theme setzt `.elementor img
   { height: auto; max-width: 100% }` mit (0,1,1) — bei Gleichstand haette
   Elementors Stylesheet gewonnen, weil es spaeter laedt (siehe v1.50.3).
   ========================================================================== */
.sdh-tv-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.sdh-tv .sdh-tv-logo img {
	display: block;
	width: auto;
	height: var(--tv-logo-height, 36px);
	max-width: var(--tv-logo-maxwidth, 150px);
	/* `contain` statt `cover`: ein Logo darf nie beschnitten werden. */
	object-fit: contain;
	object-position: left center;
}

/* Nur an der gewaehlten Stelle zeigen. Beide stehen im Markup, weil bei
   „Ecke" in der schmalen Ansicht die ganze Tabelle entfaellt — dann muss das
   Logo in den Kopf, und das entscheidet die Container-Query weiter unten. */
.sdh-tv[data-logo="head"] .sdh-tv-logo-corner,
.sdh-tv[data-logo="corner"] .sdh-tv-logo-head,
.sdh-tv[data-logo="none"] .sdh-tv-logo {
	display: none;
}

/* Preis-Plakette im Stil des roten Banner-Badges der Landingpage. */
.sdh-tv-from {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	padding: var(--tv-from-padding, 8px 14px);
	background: var(--tv-from-bg, var(--tv-accent, var(--vw-accent, var(--sdh-accent, #be1623))));
	border-radius: var(--tv-radius, 0px);
	color: var(--tv-from-color, #fff);
	white-space: nowrap;
}

.sdh-tv-from-label {
	font-size: 0.8rem;
	opacity: 0.9;
}

.sdh-tv-from-price {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.1;
	color: inherit;
}

.sdh-tv-from-note {
	font-size: 0.78rem;
	opacity: 0.9;
}

/* ==========================================================================
   Breite Darstellung: Matrix
   ========================================================================== */
.sdh-tv-matrix {
	/* Notausgang: sollte der Container trotz Umschaltpunkt zu schmal sein,
	   scrollt die Tabelle statt die Seite zu sprengen. */
	overflow-x: auto;
}

.sdh-tv-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.sdh-tv-table thead th,
.sdh-tv-table tbody td,
.sdh-tv-table tbody th {
	padding: var(--tv-cell-padding, 10px 12px);
	vertical-align: middle;
	border: 1px solid var(--tv-border, var(--vw-card-border, var(--sdh-gray-200, #e9ecef)));
	overflow-wrap: anywhere;
}

/* Ausrichtung bewusst NICHT in der Sammelregel oben:
   `.sdh-tv-table tbody th` ist (0,1,2) und haette `.sdh-tv-label` (0,1,0)
   geschlagen — die Beschriftungsspalte stand dadurch mittig, waehrend die
   Zwischen-Ueberschrift `.sdh-tv-tr.is-titel th` (0,2,0) links stand. Statt die
   Spezifitaet hochzuschrauben, wird die Ausrichtung hier je Zellenart nach
   KLASSE vergeben: kein Wettstreit, keine Reihenfolge-Abhaengigkeit.
   Beschriftungsspalte und Zwischen-Ueberschrift teilen denselben Wert — nur so
   beginnen „Telefonie & SMS" und „Preise" auf derselben Linie. */
.sdh-tv-table .sdh-tv-label,
.sdh-tv-table .sdh-tv-tr.is-titel th {
	text-align: var(--tv-label-align, left);
}

.sdh-tv-table thead .sdh-tv-col,
.sdh-tv-table tbody .sdh-tv-cell {
	text-align: var(--tv-value-align, center);
}

/* Leere Ecke oben links traegt keine Bedeutung — also auch keinen Rahmen.
   Sie ist in `thead` und wird von der Sammelregel oben (die nur `thead th`
   trifft) absichtlich nicht erfasst; das Padding steht deshalb hier. */
.sdh-tv-corner {
	border: 0;
	background: transparent;
	padding: var(--tv-cell-padding, 10px 12px);
	text-align: left;
	vertical-align: middle;
	/* Die Beschriftungsspalte ist breiter als eine Tarifspalte: dort stehen
	   ganze Leistungsnamen, in den Spalten nur Werte. */
	width: var(--tv-label-width, 34%);
}

.sdh-tv-col {
	background: var(--tv-head-bg, var(--sdh-gray-100, #f8f9fa));
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--tv-col-color, inherit);
}

.sdh-tv-col-name {
	display: block;
}

.sdh-tv-col-sub {
	display: block;
	margin-top: 2px;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--tv-col-sub-color, var(--tv-muted, var(--sdh-gray-600, #6c757d)));
}

/* Hervorgehobene Spalte: Kopf in der Akzentfarbe, Zellen nur zart getoent —
   die Spalte soll auffallen, nicht die Tabelle dominieren. */
.sdh-tv-col.is-featured {
	background: var(--tv-featured-head-bg, var(--tv-accent, var(--vw-accent, var(--sdh-accent, #be1623))));
	color: var(--tv-col-featured-color, #fff);
}

.sdh-tv-col.is-featured .sdh-tv-col-sub {
	color: var(--tv-col-featured-color, #fff);
	opacity: 0.85;
}

.sdh-tv-cell {
	color: var(--tv-value-color, inherit);
}

.sdh-tv-cell.is-featured {
	background: var(--tv-featured-bg, rgba(190, 22, 35, 0.04));
}

.sdh-tv-label {
	font-weight: 500;
	background: var(--tv-label-bg, transparent);
	color: var(--tv-label-color, var(--sdh-gray-600, #6c757d));
}

/* Zusammengefasste Zelle (gilt fuer mehrere Tarife) — leicht abgesetzt, damit
   erkennbar bleibt, dass hier bewusst kein Unterschied besteht. */
.sdh-tv-cell.is-merged {
	background: var(--tv-merged-bg, var(--sdh-gray-100, #f8f9fa));
	font-style: normal;
}

/* Preiszeilen: die Zahl ist die Botschaft. */
.sdh-tv-tr.is-preis .sdh-tv-cell {
	font-size: 1rem;
	font-weight: 700;
	color: var(--tv-preis-color, var(--tv-value-color, inherit));
}

/* Zwischen-Ueberschrift ueber die ganze Breite. */
.sdh-tv-tr.is-titel th {
	background: var(--tv-titel-bg, var(--tv-head-bg, var(--sdh-gray-100, #f8f9fa)));
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tv-titel-color, var(--tv-muted, var(--sdh-gray-600, #6c757d)));
}

.sdh-tv-empty {
	color: var(--tv-empty-color, var(--sdh-gray-500, #adb5bd));
}

.sdh-tv-icon {
	display: inline-flex;
}

.sdh-tv-icon svg {
	width: var(--tv-icon-size, 18px);
	height: var(--tv-icon-size, 18px);
}

.sdh-tv-icon.is-yes {
	color: var(--tv-icon-yes, var(--sdh-success, #27ae60));
}

.sdh-tv-icon.is-no {
	color: var(--tv-icon-no, var(--sdh-gray-500, #adb5bd));
}

/* ==========================================================================
   Schmale Darstellung: Tarif-Chips + Leistungsliste
   Standardzustand = versteckt; die Container-Query unten dreht das um.
   ========================================================================== */
.sdh-tv-compact {
	display: none;
}

.sdh-tv-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

/* Chips: dieselbe Auszeichnung wie die Kategorie-Chips der Vorteilswelt
   (`.sdh-club-chip`), hier aber eigenstaendig einstellbar — auf der
   Landingpage gibt es kein Vorteilswelt-Widget, das die `--vw-*`-Variablen
   setzt. Zwei Klassen im Selektor (0,2,0) schlagen `.sdh-club-chip` (0,1,0);
   fuer den aktiven Zustand braucht es drei (0,3,0), weil `.sdh-club-chip.is-active`
   schon (0,2,0) hat und bei Gleichstand die Ladereihenfolge entscheiden wuerde. */
.sdh-tv .sdh-tv-tab {
	flex: 1 1 auto;
	justify-content: center;
	background: var(--tv-chip-bg, var(--vw-card-bg, #fff));
	border-color: var(--tv-chip-border, var(--tv-border, var(--vw-card-border, var(--sdh-gray-200, #e9ecef))));
	border-radius: var(--tv-chip-radius, var(--vw-chip-radius, 0px));
	color: var(--tv-chip-color, var(--vw-title, var(--sdh-gray-800, #343a40)));
}

.sdh-tv .sdh-tv-tab.is-active {
	background: var(--tv-chip-active-bg, var(--tv-accent, var(--vw-accent, var(--sdh-accent, #be1623))));
	border-color: var(--tv-chip-active-bg, var(--tv-accent, var(--vw-accent, var(--sdh-accent, #be1623))));
	color: var(--tv-chip-active-color, #fff);
}

.sdh-tv-panel[hidden] {
	display: none;
}

.sdh-tv-panel-sub,
.sdh-tv-panel-empty {
	margin: 0 0 12px;
	font-size: 0.85rem;
	color: var(--tv-muted, var(--sdh-gray-600, #6c757d));
}

.sdh-tv-dl {
	margin: 0;
}

.sdh-tv-dl-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--tv-border, var(--vw-card-border, var(--sdh-gray-200, #e9ecef)));
}

.sdh-tv-dl-row:last-child {
	border-bottom: 0;
}

.sdh-tv-dl-row dt {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 400;
	color: var(--tv-label-color, var(--sdh-gray-600, #6c757d));
}

.sdh-tv-dl-row dd {
	flex: 0 1 auto;
	margin: 0;
	text-align: right;
	font-weight: 600;
	overflow-wrap: anywhere;
	color: var(--tv-value-color, inherit);
}

.sdh-tv-dl-row.is-preis dd {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tv-preis-color, var(--tv-value-color, inherit));
}

/* Zwischen-Ueberschrift: Trenner mit Luft auf beiden Seiten. */
.sdh-tv-dl-titel {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--tv-border, var(--vw-card-border, var(--sdh-gray-200, #e9ecef)));
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tv-titel-color, var(--tv-muted, var(--sdh-gray-600, #6c757d)));
}

.sdh-tv-dl-titel:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* ==========================================================================
   Nur fuer Mitglieder: Platzhalter anstelle der Konditionen
   Die Preiszeilen sind serverseitig nicht gerendert — hier steht, warum.
   ========================================================================== */
.sdh-tv-locked {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-top: 20px;
	padding: var(--tv-locked-padding, 20px 24px);
	background: var(--tv-locked-bg, var(--tv-accent, var(--vw-accent, var(--sdh-accent, #be1623))));
	border: var(--tv-locked-border-width, 0px) solid var(--tv-locked-border-color, transparent);
	border-radius: var(--tv-locked-radius, var(--tv-radius, 0px));
	color: var(--tv-locked-color, #fff);
}

.sdh-tv-locked-text {
	flex: 1 1 260px;
	margin: 0;
	/* Groesse kommt aus der Typografie-Gruppe des Widgets — hier nur der Standard. */
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.45;
	color: inherit;
}

.sdh-tv-locked-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--tv-locked-btn-padding, 10px 20px);
	background: var(--tv-locked-btn-bg, #fff);
	border: 1px solid var(--tv-locked-btn-bg, #fff);
	border-radius: var(--tv-locked-btn-radius, var(--tv-radius, 0px));
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: var(--tv-locked-btn-color, var(--tv-accent, var(--sdh-accent, #be1623)));
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sdh-tv-locked-btn:hover,
.sdh-tv-locked-btn:focus {
	background: var(--tv-locked-btn-bg-hover, transparent);
	color: var(--tv-locked-btn-color-hover, var(--tv-locked-btn-bg, #fff));
	text-decoration: none;
}

/* ==========================================================================
   Fuss: Kontakt, CTA, Kleingedrucktes
   ========================================================================== */
.sdh-tv-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--tv-border, var(--vw-card-border, var(--sdh-gray-200, #e9ecef)));
	font-size: 0.9rem;
}

.sdh-tv-contact-item {
	color: var(--tv-contact-color, var(--tv-accent, var(--vw-accent, var(--sdh-accent, #be1623))));
	text-decoration: none;
	font-weight: 600;
}

.sdh-tv-contact-item:hover {
	text-decoration: underline;
}

.sdh-tv-keyword {
	color: var(--tv-muted, var(--sdh-gray-600, #6c757d));
}

/* CTA: erbt `.sdh-club-btn-primary`, wird hier aber eigenstaendig einstellbar.
   Zwei Klassen (0,2,0) schlagen `.sdh-club-btn-primary` (0,1,0), fuer :hover
   braucht es drei (0,3,0) gegen `.sdh-club-btn-primary:hover` (0,2,0). */
.sdh-tv-cta {
	margin-top: 20px;
}

.sdh-tv .sdh-tv-cta {
	padding: var(--tv-cta-padding, 12px 24px);
	background: var(--tv-cta-bg, var(--tv-accent, var(--vw-accent, var(--sdh-accent, #be1623))));
	border-color: var(--tv-cta-bg, var(--tv-accent, var(--vw-accent, var(--sdh-accent, #be1623))));
	border-radius: var(--tv-cta-radius, var(--tv-radius, 0px));
	color: var(--tv-cta-color, #fff);
}

.sdh-tv .sdh-tv-cta:hover,
.sdh-tv .sdh-tv-cta:focus {
	background: var(--tv-cta-bg-hover, var(--sdh-accent-hover, #a81420));
	border-color: var(--tv-cta-bg-hover, var(--sdh-accent-hover, #a81420));
	color: var(--tv-cta-color-hover, var(--tv-cta-color, #fff));
}

.sdh-tv-footnote {
	margin-top: 20px;
	font-size: var(--tv-footnote-size, 0.75rem);
	line-height: 1.5;
	color: var(--tv-footnote-color, var(--tv-muted, var(--sdh-gray-600, #6c757d)));
}

.sdh-tv-footnote p {
	margin: 0 0 6px;
}

.sdh-tv-footnote p:last-child {
	margin-bottom: 0;
}

.sdh-tv-validity {
	font-weight: 600;
}

/* ==========================================================================
   Naht zur Dashboard-Detailansicht
   Der Tarifvergleich sitzt dort zwischen Beschreibung und Aktions-Box. Trenner
   mit Luft auf beiden Seiten (Projektregel: mind. 20px ober- UND unterhalb).
   ========================================================================== */
.sdh-club-benefit-detail-tariffs {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--tv-border, var(--vw-card-border, var(--sdh-gray-200, #e9ecef)));
}

/* ==========================================================================
   Hinweis im Elementor-Editor (im Frontend gibt es ihn nicht)
   ========================================================================== */
.sdh-tv-editor-hint {
	padding: 16px;
	background: var(--sdh-gray-100, #f8f9fa);
	border: 1px dashed var(--sdh-gray-300, #dee2e6);
	border-radius: var(--sdh-radius, 6px);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--sdh-gray-600, #6c757d);
}

/* ==========================================================================
   Umschaltpunkt Matrix ↔ Liste
   EINE Formel, drei Schwellen: Beschriftungsspalte (190px) + Spalten × 150px.
   Unterhalb davon wird eine Spalte so schmal, dass Werte wie „Unlimited"
   zeichenweise umbrechen — dann ist die Liste die ehrlichere Darstellung.
   ========================================================================== */
@container sdh-tv (max-width: 489px) {
	.sdh-tv[data-cols="2"] .sdh-tv-matrix {
		display: none;
	}

	.sdh-tv[data-cols="2"] .sdh-tv-compact {
		display: block;
	}

	/* Ohne Tabelle gibt es keine Ecke: Logo zurueck in den Kopf. Ein
	   Attribut mehr im Selektor (0,4,0) schlaegt die Ausblend-Regel
	   oben (0,3,0) — Container-Queries selbst erhoehen die Spezifitaet nicht. */
	.sdh-tv[data-cols="2"][data-logo="corner"] .sdh-tv-logo-head {
		display: inline-flex;
	}
}

@container sdh-tv (max-width: 639px) {
	.sdh-tv[data-cols="3"] .sdh-tv-matrix {
		display: none;
	}

	.sdh-tv[data-cols="3"] .sdh-tv-compact {
		display: block;
	}

	/* Ohne Tabelle gibt es keine Ecke: Logo zurueck in den Kopf. Ein
	   Attribut mehr im Selektor (0,4,0) schlaegt die Ausblend-Regel
	   oben (0,3,0) — Container-Queries selbst erhoehen die Spezifitaet nicht. */
	.sdh-tv[data-cols="3"][data-logo="corner"] .sdh-tv-logo-head {
		display: inline-flex;
	}
}

@container sdh-tv (max-width: 789px) {
	.sdh-tv[data-cols="4"] .sdh-tv-matrix {
		display: none;
	}

	.sdh-tv[data-cols="4"] .sdh-tv-compact {
		display: block;
	}

	/* Ohne Tabelle gibt es keine Ecke: Logo zurueck in den Kopf. Ein
	   Attribut mehr im Selektor (0,4,0) schlaegt die Ausblend-Regel
	   oben (0,3,0) — Container-Queries selbst erhoehen die Spezifitaet nicht. */
	.sdh-tv[data-cols="4"][data-logo="corner"] .sdh-tv-logo-head {
		display: inline-flex;
	}
}

/* Sehr schmal: Kopfzeile gestapelt, Werte unter die Beschriftung. */
@container sdh-tv (max-width: 380px) {
	.sdh-tv-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.sdh-tv-dl-row {
		flex-direction: column;
		gap: 2px;
	}

	.sdh-tv-dl-row dd {
		text-align: left;
	}

	.sdh-tv-locked {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Ohne Container-Query-Unterstuetzung (alte Browser) bleibt die Matrix stehen
   und scrollt bei Bedarf — nie beides gleichzeitig sichtbar. */
@supports not (container-type: inline-size) {
	.sdh-tv-compact {
		display: none;
	}
}