/**
 * Vorteil-Detailansicht in der Vorteilswelt (`templates/club/partials/benefit-detail.php`).
 *
 * Eigene Datei statt Anbau an `sdh-club.css`: Die Detailansicht ist ein
 * geschlossenes Layout mit eigenem Praefix (`sdh-vd-`), und sie waechst mit den
 * Feldern am Vorteil weiter. In der Sammeldatei waere sie nach dem dritten
 * Ausbau nicht mehr zu finden.
 *
 * Jeder Abschnitt ist ein eigener Container (`.sdh-vd-card`) nach dem
 * Widget-Container-Standard aus der Projekt-CLAUDE.md: weisser Kasten, Rahmen,
 * Kopf mit Trennlinie, Inhalt darunter. Vorher standen alle Abschnitte in einem
 * durchgehenden Textblock mit Trennlinien dazwischen — das las sich als eine
 * lange Wand statt als gegliederte Seite.
 *
 * Standardwerte gehoeren NUR hierher, nicht als `default` in Elementor-Controls:
 * Control-Standards landen in der gecachten Seiten-CSS und waeren spaeter nicht
 * mehr aus dem Stylesheet zu aendern.
 *
 * @package SDH_Core
 */

/* Drei Werte tragen zwei Namen, und das mit Absicht:

   Elementor schreibt die Werte seiner Regler auf den Widget-Wrapper
   (`{{WRAPPER}}`) — also auf einen VORFAHREN von `.sdh-vd`. Wuerde `.sdh-vd`
   denselben Namen hier selbst deklarieren, gaebe die eigene Deklaration den
   geerbten Wert nicht durch: Die Regler waeren wirkungslos, ohne dass man saehe,
   warum. Deshalb schreibt Elementor auf `--vd-*-set`, und `.sdh-vd` nimmt das
   als bevorzugten Wert mit dem Stylesheet-Standard als Rueckfall.

   Werte OHNE Regler (`--vd-border`, `--vd-ink`, …) brauchen den Umweg nicht.
   Und Werte, die nur an einer Stelle gebraucht werden (`--vd-hero-height`,
   `--vd-title`, `--vd-step-num-*`), stehen gar nicht hier, sondern als Rueckfall
   direkt an der Regel — dort stellt sich die Frage nicht. */
.sdh-vd {
	--vd-accent: var(--vd-accent-set, var(--sdh-accent, #be1623));
	--vd-muted: var(--vd-muted-set, var(--sdh-gray-600, #6c757d));

	--vd-border: var(--vd-border-set, var(--sdh-gray-200, #e9ecef));
	--vd-ink: var(--vd-ink-set, var(--sdh-gray-800, #343a40));
	/* Ohne `-set`: Die hellen Flaechen (Code-Feld, Kopfbild ohne Bild) haben
	   jeweils einen eigenen Regler — ein zusaetzlicher Sammelschalter waere ein
	   toter Haken. */
	--vd-surface: var(--sdh-gray-100, #f8f9fa);
	--vd-radius: var(--vd-radius-set, var(--sdh-radius-lg, 10px));

	/* Breite der rechten Spalte. Als Variable, damit Regler und Stylesheet
	   denselben Wert nennen. */
	--vd-rail: var(--vd-rail-set, 340px);

	/* Abstand zwischen den Containern. Einmal gesetzt, ueberall benutzt —
	   senkrecht wie waagerecht, damit das Raster ruhig wirkt. */
	--vd-gap: var(--vd-gap-set, 20px);

	display: flex;
	flex-direction: column;
	gap: var(--vd-gap);

	/* Container-Query statt Media-Query: Das Widget kann in verschiedenen
	   Spaltenbreiten stehen — die Fensterbreite sagt nichts darueber aus, wie
	   viel Platz die Detailansicht wirklich hat. */
	container-type: inline-size;
	container-name: sdh-vd;
}

/* Klebende rechte Spalte: Ein Vorfahr mit `overflow: hidden` wird zum
   Scroll-Container fuer `position: sticky`. Das Element klebt dann an einem
   Kasten, der selbst nie scrollt, und bewegt sich nie — es sieht aus, als waere
   sticky kaputt. `overflow: clip` schneidet genauso ab, erzeugt aber KEINEN
   Scroll-Container. Kennt ein Browser `clip` nicht, bleibt `hidden` stehen: das
   Layout stimmt weiterhin, nur das Mitwandern entfaellt. */
.sdh-club-vorteilswelt {
	overflow: clip;
}

/* ==========================================================================
   Container (Grundform aller Abschnitte)
   ========================================================================== */
.sdh-vd-card {
	background: var(--vd-card-bg, #fff);
	border: var(--vd-card-border-width, 1px) solid var(--vd-border);
	border-radius: var(--vd-radius);
	/* Clipping: Die Trennlinien des Schritt-Rasters ragen bewusst 1 px nach
	   links und oben heraus und werden hier abgeschnitten (siehe „Anleitung"). */
	overflow: hidden;
}

.sdh-vd-card-head {
	padding: var(--vd-head-padding, 18px 24px);
	background: var(--vd-head-bg, transparent);
	border-bottom: 1px solid var(--vd-border);
}

.sdh-vd-card-head h5 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--vd-head-color, var(--vd-ink));
}

.sdh-vd-card-body {
	padding: var(--vd-body-padding, 24px);
}

/* ==========================================================================
   Kopf
   ========================================================================== */
.sdh-vd-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--vd-hero-height, 200px);
	padding: var(--vd-hero-padding, 28px);
	border-radius: var(--vd-radius);
	background-color: var(--vd-hero-bg, var(--vd-surface));
	background-image: var(--vd-hero-image);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Heller Schleier von links wie auf der oeffentlichen Landingpage: Die Schrift
   bleibt dunkel und liest sich auch auf einem hellen Bild. Ein dunkler Schleier
   mit weisser Schrift waere sicherer, wuerde aber neben derselben Seite im
   Frontend fremd wirken.

   Deshalb ist der Schleier links fast deckend und laeuft erst spaet aus — er
   muss auch ein weisses Produktfoto tragen. */
.sdh-vd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0.97) 0%,
		rgba(255, 255, 255, 0.93) 40%,
		rgba(255, 255, 255, 0.55) 68%,
		rgba(255, 255, 255, 0) 100%
	);
}

/* Ohne Bild braucht es keinen Schleier — nur einen ruhigen Kasten wie die
   uebrigen Container. */
.sdh-vd-hero--plain {
	min-height: 0;
	padding: 24px 28px;
	background-color: #fff;
	border: 1px solid var(--vd-border);
}
.sdh-vd-hero--plain::before {
	display: none;
}

.sdh-vd-hero-body {
	position: relative;
	z-index: 1;
	/* Der Text bleibt in der linken Haelfte, damit er nicht in den hellen
	   Auslauf des Schleiers hineinlaeuft. */
	max-width: 34em;
}

.sdh-vd-eyebrow {
	display: block;
	margin-bottom: 8px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vd-eyebrow, var(--vd-accent));
}

/* `cqi` = 1 % der Container-Breite. Die Groesse skaliert damit mit dem Platz,
   den die Ansicht wirklich hat, und braucht keine zweite Regel in der
   Container-Query. Genau die waere sonst staerker als eine im Widget
   eingestellte Schriftgroesse und wuerde sie auf schmalen Breiten aushebeln. */
.sdh-vd-title {
	margin: 0;
	/* Erst der feste Wert, dann der skalierende: Kennt ein Browser `cqi` nicht,
	   verwirft er die zweite Zeile und behaelt die erste. Ohne sie bliebe die
	   Ueberschrift auf der geerbten Groesse stehen. */
	font-size: 1.6rem;
	font-size: clamp(1.3rem, 3.2cqi, 1.6rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--vd-title, var(--vd-ink));
}

.sdh-vd-hero-partner {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--vd-muted);
}

/* Eine Klasse mehr als noetig: Elementor setzt `.elementor img { height: auto }`
   mit (0,1,1) — gleich spezifisch wie eine einfache Klasse. Bei Gleichstand
   entscheidet die Ladereihenfolge, und Elementors Stylesheet kommt spaeter. */
.sdh-vd .sdh-vd-hero-logo {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--vd-border);
	padding: 4px;
}

/* ==========================================================================
   Zwei Spalten

   Beide Spalten liegen in DERSELBEN Rasterzeile. Dadurch ist der Rasterbereich
   der rechten Spalte so hoch wie die linke, und `position: sticky` hat den Weg,
   den es zum Mitwandern braucht. Stuende „Weitere Vorteile" als zweite Zeile
   darunter im selben Raster, waere der Bereich der rechten Spalte nur so hoch
   wie ihr Inhalt — sticky bliebe wirkungslos. Deshalb steht dieser Block
   ausserhalb des Rasters, als eigener Container unter beiden Spalten.

   Im HTML kommt die rechte Spalte ZUERST. Das ist Absicht: Faellt das Layout
   auf eine Spalte zusammen, steht die Einloese-Karte damit ohne weiteres Zutun
   oben — wer einen Vorteil oeffnet, will einloesen, nicht erst lesen. Auf
   breiten Bildschirmen setzen `grid-column`/`grid-row` sie wieder nach rechts.
   ========================================================================== */
.sdh-vd-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--vd-rail);
	gap: var(--vd-gap);
	align-items: start;
}

.sdh-vd-main {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--vd-gap);
}

.sdh-vd-aside {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: var(--vd-gap);
	position: sticky;
	top: 16px;
}

@container sdh-vd (max-width: 820px) {
	.sdh-vd-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.sdh-vd-main,
	.sdh-vd-aside {
		grid-column: 1;
		grid-row: auto;
	}
	.sdh-vd-aside {
		position: static;
	}
	/* `min()` statt eines festen Werts: Eine im Widget eingestellte kleinere
	   Hoehe bleibt erhalten, eine groessere wird hier gedeckelt. Ein fester Wert
	   haette den Regler auf schmalen Breiten wirkungslos gemacht. */
	.sdh-vd-hero {
		min-height: min(var(--vd-hero-height, 200px), 160px);
		padding: 20px;
	}
	/* Auf schmalen Breiten deckt der Text die ganze Flaeche ab — der Schleier
	   muss dann ueberall tragen, nicht nur links. */
	.sdh-vd-hero::before {
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.86) 0%,
			rgba(255, 255, 255, 0.94) 100%
		);
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.sdh-vd-layout {
			grid-template-columns: minmax(0, 1fr);
		}
		.sdh-vd-main,
		.sdh-vd-aside {
			grid-column: 1;
			grid-row: auto;
		}
		.sdh-vd-aside {
			position: static;
		}
	}
}

/* ==========================================================================
   „Ihr Vorteil" — die Einloese-Karte
   ========================================================================== */
/* Diese eine Karte darf lauter sein als der Rest der Seite: Sie traegt den
   Grund, warum jemand den Vorteil geoeffnet hat. Roter Kopf und roter Rahmen —
   und deshalb bleibt alles andere auf der Seite ruhig. Zwei gleich laute Karten
   waeren wieder keine.

   BEWUSST OHNE SCHATTEN. Die Betonung kommt aus Farbe und Rahmen, nicht aus
   einer Tiefenwirkung. */
.sdh-vd-action {
	background: var(--vd-action-bg, #fff);
	border-color: var(--vd-action-border, var(--vd-accent));
}

.sdh-vd-action .sdh-vd-card-head {
	background: var(--vd-action-head-bg, var(--vd-accent));
	border-bottom-color: var(--vd-action-head-bg, var(--vd-accent));
}
.sdh-vd-action .sdh-vd-card-head h5 {
	color: var(--vd-action-head-color, #fff);
}

/* Gesperrt oder noch nicht gestartet: kein Rot, sonst verspricht die Karte
   etwas, das sie nicht einloest. */
.sdh-vd-action--locked,
.sdh-vd-action--upcoming,
.sdh-vd-action--none {
	border-color: var(--vd-border);
}
.sdh-vd-action--locked .sdh-vd-card-head,
.sdh-vd-action--upcoming .sdh-vd-card-head,
.sdh-vd-action--none .sdh-vd-card-head {
	background: var(--vd-surface);
	border-bottom-color: var(--vd-border);
}
.sdh-vd-action--locked .sdh-vd-card-head h5,
.sdh-vd-action--upcoming .sdh-vd-card-head h5,
.sdh-vd-action--none .sdh-vd-card-head h5 {
	color: var(--vd-ink);
}

.sdh-vd-action-value {
	margin: 0 0 16px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--vd-ink);
}

.sdh-vd-action-note {
	margin: 12px 0 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--vd-muted);
}
.sdh-vd-action-note:first-child {
	margin-top: 0;
}

/* --- Code --------------------------------------------------------------- */
.sdh-vd-code {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.sdh-vd-code code {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 11px 12px;
	background: var(--vd-code-bg, var(--vd-surface));
	border: 1px dashed var(--vd-code-border, var(--sdh-gray-400, #ced4da));
	border-radius: var(--vd-btn-radius, var(--sdh-radius, 6px));
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--vd-code-color, var(--vd-ink));
	/* Ein langer Code darf umbrechen statt die Karte zu sprengen. */
	overflow-wrap: anywhere;
}

/* Der Kopieren-Knopf ist ein Hauptknopf und nimmt deshalb dieselben Variablen —
   ein eigener Regler-Satz waere eine zweite Wahrheit fuer dieselbe Form. */
.sdh-vd-copy {
	flex: 0 0 auto;
	padding: 0 14px;
	background: var(--vd-btn-bg, var(--vd-accent));
	border: 0;
	border-radius: var(--vd-btn-radius, var(--sdh-radius, 6px));
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vd-btn-color, #fff);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.sdh-vd-copy:hover {
	background: var(--vd-btn-bg-hover, var(--sdh-accent-hover, #a81420));
	color: var(--vd-btn-color-hover, var(--vd-btn-color, #fff));
}

/* --- Knoepfe -------------------------------------------------------------
   Bewusst zurueckhaltend: kleinere Schrift, weniger Innenabstand, halbfett
   statt fett. Ein Knopf muss auffindbar sein, nicht laut — und in einer 340 px
   schmalen Spalte stehen schnell drei davon untereinander. Die Betonung traegt
   der rote Kartenkopf, nicht die Knopfgroesse. */
.sdh-vd-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	padding: var(--vd-btn-padding, 9px 14px);
	background: var(--vd-btn-bg, var(--vd-accent));
	border: var(--vd-btn-border-width, 1px) solid var(--vd-btn-border, var(--vd-accent));
	border-radius: var(--vd-btn-radius, var(--sdh-radius, 6px));
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--vd-btn-color, #fff);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sdh-vd-action-btn:first-child {
	margin-top: 0;
}
.sdh-vd-action-btn:hover {
	background: var(--vd-btn-bg-hover, var(--sdh-accent-hover, #a81420));
	border-color: var(--vd-btn-border-hover, var(--vd-btn-bg-hover, var(--sdh-accent-hover, #a81420)));
	color: var(--vd-btn-color-hover, #fff);
	text-decoration: none;
}
.sdh-vd-action-btn svg {
	width: 15px;
	height: 15px;
	transition: transform 0.2s ease;
}
.sdh-vd-action-btn:hover svg {
	transform: translateX(3px);
}

/* Zweitrangiger Weg (z. B. „Zum Shop" neben einem Code, „Zur Partnerseite"):
   gleiche Form, weniger Gewicht — zwei gleich laute Knoepfe nebeneinander sagen
   nicht mehr, welcher der richtige ist. */
.sdh-vd-action-btn--ghost {
	background: var(--vd-btn2-bg, transparent);
	border-color: var(--vd-btn2-border, var(--vd-accent));
	color: var(--vd-btn2-color, var(--vd-accent));
}
.sdh-vd-action-btn--ghost:hover {
	background: var(--vd-btn2-bg-hover, var(--vd-accent));
	border-color: var(--vd-btn2-border-hover, var(--vd-btn2-border, var(--vd-accent)));
	color: var(--vd-btn2-color-hover, #fff);
}

/* --- Fusszeile: Gueltigkeit --------------------------------------------- */
.sdh-vd-action-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Trenner mit Luft auf beiden Seiten (Projektregel). */
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--vd-border);
	font-size: 0.82rem;
	color: var(--vd-muted);
}
.sdh-vd-action-foot svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}
.sdh-vd-action-foot.is-urgent {
	color: var(--vd-accent);
	font-weight: 600;
}

/* ==========================================================================
   Fliesstext
   ========================================================================== */
.sdh-vd-lead {
	margin: 0 0 18px;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--vd-ink);
}
.sdh-vd-lead:last-child {
	margin-bottom: 0;
}

/* Redaktions-HTML aus den Text-Editor-Feldern. Bewusst genuegsam: Der Text soll
   sich lesen wie der Rest des Dashboards, nicht wie eine fremde Seite. */
.sdh-vd-rte {
	font-size: 0.94rem;
	line-height: 1.65;
	color: var(--vd-muted);
}
.sdh-vd-rte > :first-child {
	margin-top: 0;
}
.sdh-vd-rte > :last-child {
	margin-bottom: 0;
}
.sdh-vd-rte p {
	margin: 0 0 1em;
}
.sdh-vd-rte h2,
.sdh-vd-rte h3,
.sdh-vd-rte h4,
.sdh-vd-rte h5,
.sdh-vd-rte h6 {
	margin: 1.4em 0 0.5em;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vd-ink);
}
.sdh-vd-rte strong {
	color: var(--vd-ink);
}
.sdh-vd-rte a {
	color: var(--vd-link, var(--vd-accent));
	text-decoration: underline;
}
.sdh-vd-rte ul,
.sdh-vd-rte ol {
	margin: 0 0 1em;
	padding-left: 1.3em;
}
.sdh-vd-rte li {
	margin-bottom: 0.4em;
}
.sdh-vd-rte img {
	height: auto;
	border-radius: var(--sdh-radius, 6px);
}

/* ==========================================================================
   Anleitung

   Das Raster sitzt direkt im Container, ohne `.sdh-vd-card-body`: Die Schritte
   bringen ihren Innenabstand selbst mit, und die Trennlinien sollen bis an den
   Rand des Containers laufen.

   Die Linien entstehen NICHT ueber `border-left` am jeweils zweiten und
   folgenden Element — das haette bei fuenf Schritten in drei Spalten dem
   vierten (erstes Element der zweiten Zeile) eine Linie an den linken
   Containerrand gemalt. Stattdessen traegt JEDER Schritt seine Linien als
   Schatten 1 px nach links und nach oben; die der ersten Spalte und der ersten
   Zeile fallen aus dem Container heraus und werden von dessen `overflow: hidden`
   abgeschnitten. Das stimmt bei jeder Spaltenzahl von selbst — und bei jeder
   Zahl von Schritten, ohne dass das CSS wissen muss, wo umgebrochen wird.
   ========================================================================== */
.sdh-vd-steps-grid {
	display: grid;
	/* `auto-fit`, nicht `auto-fill`: Bei einem einzigen Schritt sollen keine
	   leeren Spuren stehen bleiben — anders als beim Karten-Raster, wo eine
	   gleichbleibende Kartenbreite wichtiger ist als eine gefuellte Zeile. */
	grid-template-columns: repeat(auto-fit, minmax(var(--vd-step-min, 210px), 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sdh-vd-step {
	/* Ziffer und Text sind zwei Kaesten. In den schmalen Spalten des Rasters
	   stehen sie uebereinander, faellt das Raster auf eine Spalte, nebeneinander
	   (siehe Container-Query unten). Dieselbe Auszeichnung, zwei Anordnungen. */
	display: flex;
	flex-direction: column;
	/* Kein `gap`: Den Abstand zum Text bringt die Ziffer mit ihrem eigenen
	   Trenner mit (siehe unten). Zwei Quellen fuer denselben Abstand liefen
	   beim naechsten Umbau auseinander. */
	gap: 0;
	padding: 24px;
	overflow: hidden;
	box-shadow: -1px 0 0 var(--vd-border), 0 -1px 0 var(--vd-border);
}

/* Die Ziffer ist ein eigener Kasten, kein Schatten hinter dem Text.

   Absolut positioniert lag sie zwar huebsch dahinter, aber sobald ein Schritt
   zwei Zeilen brauchte oder die Spalte schmal wurde, lief der Text darueber.
   Platz zu reservieren haette die Ziffernhoehe raten muessen — und die ist im
   Widget einstellbar, also nicht bekannt. Als eigener Kasten kann es die
   Ueberlappung grundsaetzlich nicht mehr geben, bei jeder Ziffergroesse und
   jeder Textlaenge.

   `line-height: 0.8` holt die Luft heraus, die eine so grosse Zahl sonst ueber
   und unter sich mitbringt. */
/* Die Ziffer traegt ihren Trenner selbst — mit 20 px Luft auf beiden Seiten
   (Projektregel: kein Inhalt klebt an einer Linie). 2,5 rem in der Akzentfarbe:
   gross genug, um die Abfolge auf einen Blick zu zeigen, klein genug, um dem
   Text nicht die Aufmerksamkeit zu nehmen. Farbe und Groesse bleiben am Widget
   einstellbar. */
.sdh-vd-step-num {
	flex: 0 0 auto;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--vd-border);
	font-size: var(--vd-step-num-size, 2.5rem);
	font-weight: var(--vd-step-num-weight, 800);
	line-height: 1;
	color: var(--vd-step-num-color, var(--vd-accent));
	pointer-events: none;
	user-select: none;
}

/* Der Schritt-Text traegt `.sdh-vd-rte` und sonst NICHTS: dieselbe Groesse,
   Dicke und Farbe wie jeder andere Fliesstext der Ansicht. Bis v1.77.3 stand
   hier eine Regel, die den ersten Absatz fett und dunkel setzte — damit gab es
   auf einer Seite drei Textformen, ohne dass die dritte etwas bedeutet haette.
   `margin-top: 0` fuer das erste Kind bringt `.sdh-vd-rte` bereits mit. */

@container sdh-vd (max-width: 620px) {
	.sdh-vd-steps-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Eine Spalte heisst: viel Breite, wenig Hoehe uebrig. Ziffer und Text
	   stehen deshalb nebeneinander statt uebereinander — sonst haette jeder
	   Schritt eine halbe Bildschirmhoehe fuer sich beansprucht. */
	.sdh-vd-step {
		flex-direction: row;
		/* `stretch`, damit der senkrechte Trenner ueber die ganze Hoehe des
		   Schrittes laeuft und nicht nur ueber die der Ziffer. */
		align-items: stretch;
		padding: 20px;
	}
	/* Nebeneinander wandert der Trenner mit: aus der Linie unter der Ziffer
	   wird eine neben ihr, mit denselben 20 px Luft auf beiden Seiten.
	   Eine eigene Groesse braucht es hier nicht mehr — 2,5 rem passen auch
	   in eine schmale Spalte.

	   Feste Spur, damit die Textkanten aller Schritte untereinander fluchten
	   — auch beim Sprung von 9 auf 10. */
	.sdh-vd-step-num {
		min-width: 1.6em;
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: 0;
		padding-right: 20px;
		margin-right: 20px;
		border-right: 1px solid var(--vd-border);
		text-align: center;
	}
	.sdh-vd-step-body {
		min-width: 0;
	}
}

/* ==========================================================================
   Bedingungen & FAQ — zugeklappt, damit sie den Code nicht verdraengen
   ========================================================================== */
.sdh-vd-legal .sdh-vd-card-body {
	/* Die Zeilen bringen ihren Abstand selbst mit; vollstaendiger Innenabstand
	   oben und unten liesse zwischen Kartenkopf und erster Zeile eine Luecke. */
	padding: 4px 24px;
}

.sdh-vd-details + .sdh-vd-details {
	border-top: 1px solid var(--vd-border);
}

.sdh-vd-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 0;
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--vd-ink);
	cursor: pointer;
	list-style: none;
}
/* Das eigene Dreieck weg — der Pfeil rechts uebernimmt. */
.sdh-vd-details > summary::-webkit-details-marker {
	display: none;
}
.sdh-vd-details > summary::marker {
	content: "";
}
.sdh-vd-details > summary:hover {
	color: var(--vd-accent);
}
.sdh-vd-details > summary svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--vd-muted);
	transition: transform 0.2s ease;
}
.sdh-vd-details[open] > summary svg {
	transform: rotate(180deg);
}

/* Abstand unten, damit der aufgeklappte Text nicht auf der naechsten Linie sitzt. */
.sdh-vd-details[open] > .sdh-vd-rte {
	padding-bottom: 18px;
}

/* ==========================================================================
   PDF (rechte Spalte, zwischen Vorteil und Partner)
   ========================================================================== */
.sdh-vd-pdf-file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background: var(--vd-surface);
	border: 1px solid var(--vd-border);
	border-radius: var(--sdh-radius, 6px);
}

.sdh-vd-pdf-icon {
	flex: 0 0 auto;
	display: flex;
	color: var(--vd-accent);
}
.sdh-vd-pdf-icon svg {
	width: 26px;
	height: 26px;
}

/* `min-width: 0` ist Pflicht: Ohne sie schrumpft der Textblock nie unter seinen
   Inhalt, und ein langer Dateiname sprengt die Karte. */
.sdh-vd-pdf-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sdh-vd-pdf-name {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--vd-ink);
	overflow-wrap: anywhere;
}

.sdh-vd-pdf-size {
	margin-top: 2px;
	font-size: 0.78rem;
	color: var(--vd-muted);
}

/* Zwei gleichrangige Wege zum selben Dokument — sie stehen deshalb enger
   beieinander als sonst ein Knopf zum Text darueber. */
.sdh-vd-pdf .sdh-vd-action-btn + .sdh-vd-action-btn {
	margin-top: 8px;
}

/* ==========================================================================
   Partner (rechte Spalte)
   ========================================================================== */
.sdh-vd-partner {
	--vd-partner-color: var(--vd-border);
	/* Die CI-Farbe des Partners faerbt nur diese Kante. Flaechig eingesetzt
	   kaempfte sie gegen das Rot der Einloese-Karte direkt darueber, und zwei
	   konkurrierende Signalfarben heben sich gegenseitig auf. */
	border-top: 3px solid var(--vd-partner-color);
}

.sdh-vd-partner-logo {
	margin-bottom: 14px;
}
.sdh-vd .sdh-vd-partner-logo img {
	width: auto;
	max-width: 150px;
	max-height: 60px;
	height: auto;
	object-fit: contain;
}

.sdh-vd-partner-name {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vd-ink);
}

.sdh-vd-partner-slogan {
	margin: 6px 0 0;
	font-size: 0.9rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--vd-muted);
}

.sdh-vd-contact {
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--vd-border);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.87rem;
	color: var(--vd-muted);
}
.sdh-vd-contact li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	line-height: 1.45;
}
.sdh-vd-contact svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	/* Auf die erste Textzeile ausgerichtet statt auf die Mitte des Eintrags:
	   Eine mehrzeilige Adresse haette das Symbol sonst nach unten gezogen. */
	margin-top: 2px;
	color: var(--sdh-gray-500, #adb5bd);
}
.sdh-vd-contact a {
	color: var(--vd-muted);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.sdh-vd-contact a:hover {
	color: var(--vd-accent);
	text-decoration: underline;
}

/* ==========================================================================
   Weitere Vorteile (volle Breite, unter beiden Spalten)

   Bewusst ohne eigene Rasterformel: Der Block benutzt `.sdh-club-benefits-grid`
   Wort fuer Wort wie die Uebersicht. Genau dafuer steht er hier unten in voller
   Breite — in der 340 px schmalen rechten Spalte waeren die Karten unter ihre
   Mindestbreite gerutscht.
   ========================================================================== */

/* ==========================================================================
   Bewegung zurueckhaltend
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.sdh-vd-action-btn,
	.sdh-vd-action-btn svg,
	.sdh-vd-details > summary svg,
	.sdh-vd-copy {
		transition: none;
	}
}