/* ==========================================================================
   Kopfbereich eigener Seiten

   Der ElementsKit-Header ist transparent und in weisser Schrift gebaut - er
   sitzt auf den Elementor-Seiten immer auf einem dunklen Hero-Bild. Auf einer
   weissen Seite war er dadurch weiss auf weiss und damit unsichtbar.

   Deshalb bekommen unsere Seiten denselben dunklen Kopfbereich: Der Seitentitel
   steht in einem Farbverlauf in den Markenfarben, der Header sitzt darauf und
   ist wieder lesbar. Das ist zugleich der Anschluss an die bestehende Gestaltung.

   Gilt ausschliesslich fuer .wp24-standardseite - Elementor-Seiten bleiben
   voellig unberuehrt.
   ========================================================================== */

body.wp24-standardseite main.site-main {
	padding-top: 0;
}

body.wp24-standardseite .page-header {
	/* Unter dem Ratenband beginnen. Ohne diesen Abstand legt sich der ueber
	   die volle Breite gezogene Titelblock ueber das Band und schneidet
	   dessen Text ab. Die Hoehe misst assets/js/header.js. */
	margin-top: var(--wp24-band-h, 0px);
	/* Volle Breite, auch wenn das Theme den Inhalt einschraenkt */
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 2.5rem;
	padding: calc(var(--wp24-header-h, 128px) + 1.5rem) 1.25rem 3rem;
	background:
		radial-gradient(120% 140% at 15% 0%, rgba(83,120,250,.32) 0%, rgba(83,120,250,0) 55%),
		linear-gradient(135deg, #1D274E 0%, #232f5e 55%, #431D68 130%);
	color: #fff;
	overflow: hidden;
}

/* Feine Struktur im Hintergrund, damit die Flaeche nicht tot wirkt */
body.wp24-standardseite .page-header::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

body.wp24-standardseite .page-header > * {
	position: relative;
	z-index: 1;
	max-width: 64rem;
	margin-inline: auto;
}

body.wp24-standardseite .page-header .entry-title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.75rem, 4.2vw, 3rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
}

@media (max-width: 48rem) {
	body.wp24-standardseite .page-header {
		padding: calc(var(--wp24-header-h, 104px) + 1rem) 1rem 2.25rem;
		margin-bottom: 1.75rem;
	}
}

/* Der Inhalt darunter bekommt dieselbe Breite wie auf den Elementor-Seiten */
body.wp24-standardseite .entry-content,
body.wp24-standardseite main.site-main > .entry-content {
	max-width: 64rem;
	margin-inline: auto;
	padding-inline: 1rem;
}


/* ==========================================================================
   webpiloten24 Rechner

   Farben und Schriften stammen aus dem Elementor-Kit der bestehenden Seite,
   damit der Rechner wie ein Teil der Website wirkt und nicht wie ein Fremdkoerper:
     Primary   #1D274E   Secondary #5378FA
     Accent    #65A7E1   Hover     #431D68
     Schrift   Poppins (Ueberschriften) / Rubik (Fliesstext) - per inherit uebernommen

   Mobile first ab 360px. Bedienelemente mindestens 44px.
   Textfarben sind gegenueber dem Kit abgedunkelt, wo das Kit unter 4.5:1 liegt.
   ========================================================================== */

.wp24-rechner {
	--wp24-navy:      #1D274E;
	--wp24-blau:      #5378FA;
	--wp24-hellblau:  #65A7E1;
	--wp24-lila:      #431D68;

	--wp24-bg:        #ffffff;
	--wp24-bg-soft:   #f6f7fb;
	--wp24-bg-card:   #ffffff;
	--wp24-text:      #1D274E;
	--wp24-text-soft: #565E7D;          /* dunkler als #747DA1, sonst unter 4.5:1 */
	--wp24-line:      #dfe3ee;
	--wp24-line-stark:#c3cade;
	--wp24-akzent:    #1D274E;
	--wp24-akzent-bg: #eef2ff;
	--wp24-erfolg:    #0B6E4F;
	--wp24-warn:      #8A5300;
	--wp24-gold:      #B47800;

	--wp24-r:         14px;
	--wp24-r-gross:   20px;
	--wp24-schatten:  0 1px 2px rgba(29,39,78,.05), 0 8px 24px -12px rgba(29,39,78,.18);

	box-sizing: border-box;
	max-width: 64rem;
	margin: 2.5rem auto;
	color: var(--wp24-text);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
	.wp24-rechner {
		--wp24-bg:        #10141f;
		--wp24-bg-soft:   #161c2c;
		--wp24-bg-card:   #1b2234;
		--wp24-text:      #eef1f8;
		--wp24-text-soft: #a8b0c9;
		--wp24-line:      #2b344b;
		--wp24-line-stark:#3c4763;
		--wp24-akzent:    #7d9bff;
		--wp24-akzent-bg: #1c2440;
		--wp24-erfolg:    #4FD1A5;
		--wp24-warn:      #E3AD5C;
		--wp24-gold:      #E8B54B;
		--wp24-schatten:  0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
	}
}

.wp24-rechner *,
.wp24-rechner *::before,
.wp24-rechner *::after { box-sizing: inherit; }

.wp24-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wp24-rechner__lead {
	margin: 0 0 2rem;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--wp24-text-soft);
}

/* ------------------------------------------------------------- Typografie */
/* Das Theme stylt h2/h3 global. Hoehere Spezifitaet, damit der Rechner
   in jedem Theme gleich aussieht - Schriftfamilie wird bewusst geerbt. */

.wp24-rechner .wp24-group,
.wp24-rechner h3.wp24-group {
	display: flex;
	align-items: center;
	gap: .625rem;
	margin: 2.25rem 0 1rem;
	padding: 0;
	font-family: inherit;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp24-text-soft);
}
.wp24-rechner .wp24-group::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--wp24-line);
}
.wp24-rechner .wp24-group:first-child { margin-top: 0; }

.wp24-rechner .wp24-h3,
.wp24-rechner h3.wp24-h3 {
	margin: 0 0 .375rem;
	padding: 0;
	font-family: inherit;
	font-size: 1.1875rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--wp24-text);
	letter-spacing: -.01em;
	text-transform: none;
}

.wp24-rechner .wp24-label,
.wp24-rechner legend.wp24-label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 .5rem;
	padding: 0;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp24-text);
	text-transform: none;
	letter-spacing: normal;
}

.wp24-hilfe {
	margin: 0 0 .75rem;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--wp24-text-soft);
}

/* --------------------------------------------------------------- Formular */

.wp24-feld { margin: 0 0 1.5rem; padding: 0; border: 0; }

.wp24-karten {
	display: grid;
	grid-template-columns: 1fr;
	gap: .625rem;
}
@media (min-width: 34rem) { .wp24-karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 54rem) { .wp24-karten { grid-template-columns: repeat(3, 1fr); } }

.wp24-karte {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	min-height: 44px;
	padding: .875rem 1rem;
	border: 1.5px solid var(--wp24-line);
	border-radius: var(--wp24-r);
	background: var(--wp24-bg-card);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.wp24-karte:hover {
	border-color: var(--wp24-hellblau);
	box-shadow: var(--wp24-schatten);
}

.wp24-karte input {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin: .125rem 0 0;
	accent-color: var(--wp24-blau);
}

/* Auswahl nicht nur ueber Farbe: Rahmenstaerke + Hintergrund + Haken */
.wp24-karte:has(input:checked) {
	border-color: var(--wp24-blau);
	border-width: 1.5px;
	background: var(--wp24-akzent-bg);
	box-shadow: inset 0 0 0 1px var(--wp24-blau);
}
.wp24-karte:has(input:focus-visible) {
	outline: 3px solid var(--wp24-blau);
	outline-offset: 2px;
}

.wp24-karte__inhalt { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.wp24-karte__titel  { font-weight: 600; line-height: 1.35; }
.wp24-karte__hilfe  { font-size: .8125rem; color: var(--wp24-text-soft); line-height: 1.45; }

/* Zahlenfelder */
.wp24-stepper { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.wp24-stepper__btn {
	width: 44px; height: 44px;
	font-size: 1.25rem; line-height: 1;
	border: 1.5px solid var(--wp24-line-stark);
	border-radius: var(--wp24-r);
	background: var(--wp24-bg-card);
	color: var(--wp24-text);
	cursor: pointer;
}
.wp24-stepper__btn:hover { border-color: var(--wp24-blau); color: var(--wp24-blau); }

.wp24-stepper input,
.wp24-feld--number input,
.wp24-feld--select select {
	min-height: 46px;
	padding: .5rem .875rem;
	font-family: inherit;
	font-size: 1rem;              /* unter 16px zoomt iOS beim Fokus */
	font-variant-numeric: tabular-nums;
	color: var(--wp24-text);
	background: var(--wp24-bg-card);
	border: 1.5px solid var(--wp24-line-stark);
	border-radius: var(--wp24-r);
}
.wp24-stepper input { width: 6.5rem; text-align: center; font-weight: 600; }
.wp24-feld--number input { width: 100%; max-width: 14rem; font-weight: 600; }
.wp24-feld--select select { width: 100%; max-width: 26rem; }

.wp24-input-wrap { display: flex; align-items: center; gap: .625rem; }
.wp24-suffix, .wp24-stepper__suffix { color: var(--wp24-text-soft); font-size: .9375rem; font-weight: 500; }

.wp24-rechner :is(input, select, button, a, summary):focus-visible {
	outline: 3px solid var(--wp24-blau);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- Ergebnis */

.wp24-ergebnis {
	margin-top: 2.5rem;
	border-radius: var(--wp24-r-gross);
	background: var(--wp24-bg-soft);
	border: 1px solid var(--wp24-line);
	box-shadow: var(--wp24-schatten);
	overflow: hidden;
}
.wp24-ergebnis__inner { padding: 1.5rem; }
@media (min-width: 40rem) { .wp24-ergebnis__inner { padding: 2rem; } }

/* Marktspanne - bewusst zurueckhaltend, der Garantiepreis ist der Held */
.wp24-spanne__label {
	margin: 0 0 .375rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp24-text-soft);
}
.wp24-spanne__wert {
	margin: 0;
	font-size: clamp(1.5rem, 5.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp24-text-soft);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.wp24-spanne__bis { font-size: .55em; font-weight: 500; }
.wp24-spanne__einheit { font-size: .65em; font-weight: 600; }
.wp24-spanne__typisch {
	margin: .375rem 0 0;
	font-size: .875rem;
	color: var(--wp24-text-soft);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- Garantiepreis */

.wp24-garantie {
	position: relative;
	margin: 1.75rem 0 0;
	padding: 1.5rem;
	color: #fff;
	background: linear-gradient(135deg, var(--wp24-navy) 0%, #2a3766 60%, var(--wp24-lila) 140%);
	border-radius: var(--wp24-r-gross);
	overflow: hidden;
}
@media (min-width: 40rem) { .wp24-garantie { padding: 1.75rem 2rem; } }

.wp24-garantie__badge {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	margin: 0 0 .875rem;
	padding: .3125rem .75rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp24-navy);
	background: #FFD34D;
	border-radius: 999px;
}

.wp24-garantie__label {
	margin: 0 0 .125rem;
	font-size: .9375rem;
	color: rgba(255,255,255,.82);
}
.wp24-garantie__preis {
	margin: 0;
	font-size: clamp(2.5rem, 11vw, 4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.wp24-garantie__einheit { font-size: .45em; font-weight: 700; margin-left: .125rem; }
.wp24-garantie__netto { font-size: .3em; font-weight: 500; color: rgba(255,255,255,.7); margin-left: .375rem; }

.wp24-garantie__vergleich {
	margin: .75rem 0 0;
	font-size: .9375rem;
	color: rgba(255,255,255,.85);
	font-variant-numeric: tabular-nums;
}
.wp24-garantie__vergleich strong { color: #FFD34D; }

.wp24-garantie__frist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin: 1.25rem 0 0;
	padding: .75rem .875rem;
	font-size: .9375rem;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: var(--wp24-r);
}
.wp24-garantie__frist strong { color: #FFD34D; }
.wp24-garantie__tage {
	padding: .1875rem .5rem;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--wp24-navy);
	background: #FFD34D;
	border-radius: 999px;
	white-space: nowrap;
}

.wp24-garantie__hinweis {
	margin: .875rem 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: rgba(255,255,255,.7);
}

/* Tabellen scrollen im eigenen Container, nie der Seitenkoerper */
.wp24-tabelle-wrap {
	margin: 1.75rem 0 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--wp24-line);
	border-radius: var(--wp24-r);
	background: var(--wp24-bg-card);
}
.wp24-tabelle {
	width: 100%;
	min-width: 21rem;
	border-collapse: collapse;
	font-size: .9375rem;
}
.wp24-tabelle th, .wp24-tabelle td {
	padding: .6875rem .875rem;
	text-align: left;
	border-bottom: 1px solid var(--wp24-line);
}
.wp24-tabelle tr:last-child th,
.wp24-tabelle tr:last-child td { border-bottom: 0; }
.wp24-tabelle thead th {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wp24-text-soft);
	background: var(--wp24-bg-soft);
}
.wp24-tabelle td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wp24-tabelle tbody th { font-weight: 500; }
.wp24-tabelle abbr { text-decoration: none; color: var(--wp24-gold); font-weight: 700; cursor: help; }

/* Fahrplan */
.wp24-fahrplan { margin-top: 2rem; }
.wp24-fahrplan__liste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .625rem; }
.wp24-fahrplan__schritt {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .25rem .875rem;
	padding: .875rem 1rem;
	background: var(--wp24-bg-card);
	border: 1px solid var(--wp24-line);
	border-radius: var(--wp24-r);
}
.wp24-fahrplan__woche {
	grid-row: span 3;
	align-self: start;
	min-width: 4rem;
	padding: .3125rem .5rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
	color: #fff;
	background: var(--wp24-navy);
	border-radius: 999px;
}
.wp24-fahrplan__wir { font-weight: 600; line-height: 1.4; }
.wp24-fahrplan__du  { font-size: .875rem; color: var(--wp24-text-soft); }
.wp24-fahrplan__aufwand { font-size: .8125rem; font-weight: 700; color: var(--wp24-erfolg); }

/* Vergleich */
.wp24-vergleich { margin-top: 2rem; }
.wp24-vergleich__zeile {
	display: flex; flex-wrap: wrap; gap: .25rem .875rem;
	padding: .75rem 0; border-bottom: 1px solid var(--wp24-line);
}
.wp24-vergleich__zeile:last-child { border-bottom: 0; }
.wp24-vergleich__weg { font-weight: 600; min-width: 12rem; }
.wp24-vergleich__hinweis { font-size: .875rem; color: var(--wp24-text-soft); flex: 1 1 16rem; }

/* Hinweise */
.wp24-hinweise { margin-top: 1.5rem; display: grid; gap: .5rem; }
.wp24-hinweis {
	margin: 0;
	padding: .75rem .875rem;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--wp24-text);
	background: var(--wp24-bg-card);
	border-left: 3px solid var(--wp24-gold);
	border-radius: 0 var(--wp24-r) var(--wp24-r) 0;
}

/* Aufruf */
.wp24-cta { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--wp24-line); }
.wp24-cta p { margin: .25rem 0 0; color: var(--wp24-text-soft); }
.wp24-cta__aktionen { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.125rem; }

.wp24-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 48px; padding: .6875rem 1.375rem;
	font-family: inherit;
	font-size: 1rem; font-weight: 600; text-decoration: none;
	border: 1.5px solid var(--wp24-navy);
	border-radius: var(--wp24-r);
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.wp24-btn--primary { background: var(--wp24-navy); color: #fff; }
.wp24-btn--primary:hover { background: var(--wp24-lila); border-color: var(--wp24-lila); color: #fff; box-shadow: var(--wp24-schatten); }
.wp24-btn--ghost { background: transparent; color: var(--wp24-navy); }
.wp24-btn--ghost:hover { background: var(--wp24-akzent-bg); color: var(--wp24-navy); }
.wp24-btn--pdf {
	background: transparent; color: var(--wp24-text);
	border-color: var(--wp24-line-stark); border-style: dashed;
}
.wp24-btn--pdf:hover { border-color: var(--wp24-navy); border-style: solid; }

@media (prefers-color-scheme: dark) {
	.wp24-btn--primary { background: var(--wp24-blau); border-color: var(--wp24-blau); color: #0b1020; }
	.wp24-btn--primary:hover { background: var(--wp24-hellblau); border-color: var(--wp24-hellblau); color: #0b1020; }
	.wp24-btn--ghost { color: var(--wp24-akzent); border-color: var(--wp24-akzent); }
}

.wp24-disclaimer { margin: 1.5rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--wp24-text-soft); }

/* --------------------------------------------------------------- Quellen */

.wp24-quellen {
	margin-top: 1rem;
	padding: .875rem 1.125rem;
	font-size: .875rem;
	background: var(--wp24-bg-soft);
	border: 1px solid var(--wp24-line);
	border-radius: var(--wp24-r);
}
.wp24-quellen summary {
	cursor: pointer; font-weight: 600; min-height: 44px;
	display: flex; align-items: center; color: var(--wp24-text);
}
.wp24-quellen__liste { margin: .75rem 0 0; padding-left: 1.25rem; display: grid; gap: .5rem; }
.wp24-quellen__liste a { color: var(--wp24-akzent); }
.wp24-quellen__belegt { display: block; color: var(--wp24-text-soft); font-size: .8125rem; }
.wp24-quellen__hinweise { margin: .75rem 0 0; padding-left: 1.25rem; color: var(--wp24-text-soft); }
.wp24-quellen__stand { margin: .75rem 0 0; color: var(--wp24-text-soft); font-size: .8125rem; }

/* --------------------------------------------------------- Werkzeugliste */

.wp24-werkzeuge {
	list-style: none; margin: 1.75rem 0; padding: 0;
	display: grid; gap: .875rem; grid-template-columns: 1fr;
}
@media (min-width: 36rem) { .wp24-werkzeuge { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .wp24-werkzeuge { grid-template-columns: repeat(3, 1fr); } }

.wp24-werkzeug a {
	display: flex; flex-direction: column; gap: .375rem;
	height: 100%; padding: 1.25rem;
	text-decoration: none; color: #1D274E;
	background: #fff;
	border: 1.5px solid #dfe3ee;
	border-radius: 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wp24-werkzeug a:hover { border-color: #5378FA; box-shadow: 0 8px 24px -12px rgba(29,39,78,.28); }
.wp24-werkzeug__icon  { font-size: 1.625rem; }
.wp24-werkzeug__titel { font-weight: 700; }
.wp24-werkzeug__text  { font-size: .875rem; color: #565E7D; line-height: 1.5; }

.wp24-fehler { padding: .75rem; border: 2px dashed #c00; color: #c00; border-radius: 8px; }

/* Bewegung nur, wenn der Nutzer sie zulaesst */
@media (prefers-reduced-motion: reduce) {
	.wp24-rechner *, .wp24-rechner *::before, .wp24-rechner *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ==========================================================================
   Split-Layout nach den Gestaltungsmustern aus der Referenzanalyse (G-S):
   Muster 2 - Optionen scrollen, das Ergebnis bleibt stehen.
   Muster 5 - auf dem Handy eine feste Leiste in der Daumenzone.
   ========================================================================== */

.wp24-layout { display: block; }

@media (min-width: 62rem) {
	.wp24-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 23rem;
		gap: 2.5rem;
		align-items: start;
	}
	.wp24-panel {
		position: sticky;
		top: 1.5rem;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.wp24-panel {
	margin-top: 2rem;
	border-radius: var(--wp24-r-gross);
	background: var(--wp24-bg-soft);
	border: 1px solid var(--wp24-line);
	box-shadow: var(--wp24-schatten);
}
@media (min-width: 62rem) { .wp24-panel { margin-top: 0; } }

.wp24-panel__inner { padding: 1.25rem; }
.wp24-panel .wp24-garantie { margin-top: 1rem; }
.wp24-panel .wp24-garantie__preis { font-size: clamp(2.25rem, 9vw, 3rem); }

.wp24-detail { margin-top: 2.5rem; }
.wp24-bloecke > * + * { margin-top: 0; }

/* Zaehlwerk-Animation beim Preiswechsel (Muster 1) */
.wp24-zaehlt { animation: wp24-puls .45s ease; }
@keyframes wp24-puls {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.045); }
	100% { transform: scale(1); }
}
.wp24-garantie__preis { display: inline-block; transform-origin: left center; }

/* Feste Leiste auf dem Handy - Preis immer in der Daumenzone */
.wp24-mobilbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .625rem .875rem calc(.625rem + env(safe-area-inset-bottom));
	color: #fff;
	background: var(--wp24-navy);
	box-shadow: 0 -6px 24px -12px rgba(0,0,0,.5);
}
@media (min-width: 62rem) { .wp24-mobilbar { display: none !important; } }

.wp24-mobilbar__preis { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.wp24-mobilbar__label { font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.wp24-mobilbar__preis strong { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.wp24-btn--klein { min-height: 44px; padding: .5rem 1rem; font-size: .9375rem; white-space: nowrap; }
.wp24-mobilbar .wp24-btn--primary { background: #FFD34D; border-color: #FFD34D; color: var(--wp24-navy); }

/* Platz schaffen, damit die Leiste nichts verdeckt */
body.wp24-hat-leiste { padding-bottom: 4.75rem; }
@media (min-width: 62rem) { body.wp24-hat-leiste { padding-bottom: 0; } }

/* Muster 4 - groessere Sprünge, weniger Rahmen im Panel */
.wp24-panel .wp24-spanne__label { font-size: .75rem; }
.wp24-panel .wp24-spanne__wert { font-size: 1.25rem; font-weight: 600; }
.wp24-panel .wp24-spanne__typisch { font-size: .8125rem; }

/* ---------------------------------------------------- Leistungsumfang
   Steht direkt unter dem Preis. Der Kunde soll die Grenze sehen, bevor
   er anfragt - nicht erst im Angebot. */

.wp24-umfang { margin-top: 2rem; }

.wp24-umfang__grenze {
	display: flex; flex-wrap: wrap; gap: .625rem;
	margin: 1rem 0 1.25rem;
}
.wp24-umfang__kennzahl {
	display: flex; flex-direction: column; gap: .125rem;
	padding: .625rem .875rem;
	background: var(--wp24-akzent-bg);
	border: 1px solid var(--wp24-line);
	border-radius: var(--wp24-r);
	flex: 1 1 12rem;
}
.wp24-umfang__kennzahl em {
	font-style: normal; font-size: .6875rem; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--wp24-text-soft);
}
.wp24-umfang__kennzahl b { font-size: .9375rem; font-weight: 600; }

.wp24-umfang__spalten { display: grid; grid-template-columns: 1fr; gap: .875rem; }
@media (min-width: 40rem) { .wp24-umfang__spalten { grid-template-columns: 1fr 1fr; } }

.wp24-umfang__spalte {
	padding: .875rem 1rem;
	background: var(--wp24-bg-card);
	border: 1px solid var(--wp24-line);
	border-radius: var(--wp24-r);
}
.wp24-umfang__spalte--ja   { border-left: 3px solid var(--wp24-erfolg); }
.wp24-umfang__spalte--nein { border-left: 3px solid var(--wp24-gold); }

.wp24-rechner .wp24-umfang__titel {
	margin: 0 0 .5rem; padding: 0;
	font-family: inherit; font-size: .75rem; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase; color: var(--wp24-text-soft);
}
.wp24-umfang__spalte ul,
.wp24-umfang__technik ul,
.wp24-umfang__regeln ul,
.wp24-umfang__nie ul { margin: 0; padding-left: 1.125rem; font-size: .875rem; line-height: 1.55; }
.wp24-umfang__spalte li { margin-bottom: .25rem; }
.wp24-umfang__spalte--ja li::marker   { color: var(--wp24-erfolg); }
.wp24-umfang__spalte--nein li::marker { color: var(--wp24-gold); }

.wp24-umfang__warnung {
	margin: .875rem 0 0; padding: .75rem .875rem;
	font-size: .875rem; line-height: 1.5; font-weight: 500;
	background: var(--wp24-bg-card);
	border-left: 3px solid var(--wp24-warn);
	border-radius: 0 var(--wp24-r) var(--wp24-r) 0;
}

.wp24-umfang__technik, .wp24-umfang__regeln {
	margin-top: 1rem; padding: .875rem 1rem;
	background: var(--wp24-bg-card);
	border: 1px solid var(--wp24-line);
	border-radius: var(--wp24-r);
}
.wp24-umfang__technik p { margin: 0 0 .5rem; font-size: .9375rem; }

.wp24-umfang__nie {
	margin-top: 1rem; padding: .75rem 1rem;
	font-size: .875rem;
	background: var(--wp24-bg-soft);
	border: 1px solid var(--wp24-line);
	border-radius: var(--wp24-r);
}
.wp24-umfang__nie summary {
	cursor: pointer; font-weight: 600; min-height: 44px;
	display: flex; align-items: center; color: var(--wp24-text);
}
.wp24-umfang__nie ul { margin-top: .625rem; }

/* ------------------------------------------------- Klappbare Feldgruppen
   Damit der Rechner kurz bleibt: Hauptentscheidungen offen, Details zugeklappt.
   Die Vorauswahl wirkt trotzdem - wer nichts aufklappt, bekommt ein sinnvolles Ergebnis. */

.wp24-gruppe {
	margin: 1.25rem 0;
	border: 1.5px solid var(--wp24-line);
	border-radius: var(--wp24-r);
	background: var(--wp24-bg-card);
	overflow: hidden;
}
.wp24-gruppe[open] { border-color: var(--wp24-line-stark); }

.wp24-gruppe__kopf {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	min-height: 52px;
	padding: .75rem 1rem;
	cursor: pointer;
	list-style: none;
	background: var(--wp24-bg-soft);
}
.wp24-gruppe__kopf::-webkit-details-marker { display: none; }
.wp24-gruppe__kopf:hover { background: var(--wp24-akzent-bg); }

.wp24-gruppe__titel {
	font-size: .8125rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--wp24-text-soft);
}
.wp24-gruppe__mehr {
	display: inline-flex; align-items: center; gap: .375rem;
	font-size: .8125rem; font-weight: 600; white-space: nowrap;
	color: var(--wp24-blau);
}
.wp24-gruppe__mehr::after { content: "▾"; font-size: .75rem; }
.wp24-gruppe[open] .wp24-gruppe__mehr::after { content: "▴"; }
.wp24-gruppe[open] .wp24-gruppe__mehr { color: var(--wp24-text-soft); }

.wp24-gruppe__inhalt { padding: 1.125rem 1rem .5rem; }
.wp24-gruppe__inhalt .wp24-feld:last-child { margin-bottom: .75rem; }

.wp24-umfang__vertrag {
	margin-top: 1rem; padding: .875rem 1rem;
	background: var(--wp24-bg-card);
	border: 1px solid var(--wp24-line);
	border-left: 3px solid var(--wp24-blau);
	border-radius: 0 var(--wp24-r) var(--wp24-r) 0;
}
.wp24-umfang__vertragsart {
	margin: 0 0 .5rem; font-size: .9375rem; font-weight: 700; color: var(--wp24-blau);
}
.wp24-umfang__vertrag ul { margin: 0; padding-left: 1.125rem; font-size: .875rem; line-height: 1.55; }
.wp24-umfang__vertrag li { margin-bottom: .375rem; }
.wp24-umfang__quelle {
	margin: .625rem 0 0; font-size: .75rem; color: var(--wp24-text-soft); font-style: italic;
}

/* ==========================================================================
   Balkendiagramme

   Ein Farbton fuer alle Balken, ein hervorgehobener in Gold. Es ist ein
   Groessenvergleich, keine kategoriale Einfaerbung - deshalb keine bunte Palette.
   Farben mit dem Validator geprueft (Helligkeit, Chroma, Farbfehlsichtigkeit,
   Kontrast): hell #5378FA / #B8860B, dunkel #6688F2 / #B08430.
   Jeder Balken traegt Beschriftung und Wert - Farbe allein traegt nie die Aussage.
   ========================================================================== */

.wp24-chart {
	--chart-balken:  #5378FA;
	--chart-hervor:  #B8860B;
	--chart-spur:    #eef1f8;
	--chart-text:    #1D274E;
	--chart-leise:   #565E7D;
	--chart-linie:   #dfe3ee;

	margin: 2rem 0;
	padding: 1.25rem;
	border: 1px solid var(--chart-linie);
	border-radius: 16px;
	background: #fff;
	font-size: 1rem;
	color: var(--chart-text);
}

@media (prefers-color-scheme: dark) {
	.wp24-chart {
		--chart-balken: #6688F2;
		--chart-hervor: #B08430;
		--chart-spur:   #1e2637;
		--chart-text:   #eef1f8;
		--chart-leise:  #a8b0c9;
		--chart-linie:  #2b344b;
		background: #161c2c;
	}
}

.wp24-chart__titel {
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--chart-text);
}

.wp24-chart__plot { display: grid; gap: .625rem; }

.wp24-chart__zeile {
	display: grid;
	grid-template-columns: 1fr;
	gap: .25rem;
	align-items: center;
}
@media (min-width: 34rem) {
	.wp24-chart__zeile { grid-template-columns: minmax(6rem, 11rem) 1fr auto; gap: .75rem; }
}

.wp24-chart__label {
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--chart-text);
	overflow-wrap: anywhere;
}

.wp24-chart__balkenraum {
	display: block;
	height: 20px;
	background: var(--chart-spur);
	border-radius: 4px;
	overflow: hidden;
}

.wp24-chart__balken {
	display: block;
	height: 100%;
	background: var(--chart-balken);
	/* Rundung nur am Datenende, der Nullpunkt bleibt an der Grundlinie verankert. */
	border-radius: 0 4px 4px 0;
}

.wp24-chart__zeile.is-hervor .wp24-chart__balken { background: var(--chart-hervor); }
.wp24-chart__zeile.is-hervor .wp24-chart__label,
.wp24-chart__zeile.is-hervor .wp24-chart__wert { font-weight: 700; }

.wp24-chart__wert {
	font-size: .9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--chart-text);
	text-align: right;
}

.wp24-chart__hinweis {
	margin: 1rem 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--chart-leise);
}

.wp24-chart__tabelle {
	margin-top: 1rem;
	font-size: .875rem;
}
.wp24-chart__tabelle summary {
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
	font-weight: 600;
	color: var(--chart-leise);
}
.wp24-chart__quelle { margin: .625rem 0 0; font-size: .75rem; color: var(--chart-leise); }

@media (prefers-reduced-motion: reduce) {
	.wp24-chart * { transition: none !important; animation: none !important; }
}

/* ----------------------------------------------------- Uebersichtslisten */

.wp24-uebersicht__titel {
	margin: 2.5rem 0 1rem;
	font-size: 1.375rem;
	font-weight: 700;
	color: #1D274E;
}
.wp24-uebersicht__titel span { font-weight: 500; color: #565E7D; font-size: .8em; }

.wp24-uebersicht {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: .75rem;
	grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .wp24-uebersicht { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .wp24-uebersicht { grid-template-columns: repeat(3, 1fr); } }

.wp24-uebersicht > li { margin: 0; }
.wp24-uebersicht a {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	height: 100%;
	padding: 1rem 1.125rem;
	text-decoration: none;
	color: #1D274E;
	background: #fff;
	border: 1.5px solid #dfe3ee;
	border-radius: 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wp24-uebersicht a:hover {
	border-color: #5378FA;
	box-shadow: 0 8px 24px -14px rgba(29,39,78,.35);
}
.wp24-uebersicht__titel-zeile { font-weight: 700; line-height: 1.35; }
.wp24-uebersicht__text { font-size: .875rem; line-height: 1.5; color: #565E7D; }

@media (prefers-color-scheme: dark) {
	.wp24-uebersicht__titel { color: #eef1f8; }
	.wp24-uebersicht a { background: #1b2234; border-color: #2b344b; color: #eef1f8; }
	.wp24-uebersicht__text { color: #a8b0c9; }
}


/* --------------------------------------------------------------------------
   Ratenzahlung ohne Zinsen
   Steht unter dem Garantiepreis. Bewusst ruhig gehalten: Der Festpreis bleibt
   die Hauptaussage, die Rate ist das Angebot fuer die, die ihn nicht auf
   einmal aufbringen koennen.
   -------------------------------------------------------------------------- */
.wp24-raten {
	margin-top: 1.5rem;
	padding: 1.25rem 1.25rem 1.5rem;
	border: 1px solid var(--wp24-linie, #dde3f2);
	border-radius: var(--wp24-radius, 14px);
	background: var(--wp24-flaeche, #f7f9fe);
}

.wp24-raten__titel {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp24-primaer, #1D274E);
}

.wp24-raten__lead { margin: 0 0 1rem; font-size: .95rem; line-height: 1.55; }

/* Zwei Kacheln, nicht vier: Der Block steht in der schmalen Ergebnisspalte,
   dort waren vier Spalten auf 260 Pixel unleserlich gequetscht. */
.wp24-raten__zahlen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem;
	margin: 0 0 .875rem;
}

.wp24-raten__zahlen > div {
	padding: .625rem .75rem;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--wp24-linie, #dde3f2);
}

.wp24-raten__zahlen dt {
	margin: 0 0 .2rem;
	font-size: .75rem;
	line-height: 1.3;
	color: var(--wp24-text-leise, #5b6785);
}

.wp24-raten__zahlen dd {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp24-primaer, #1D274E);
	font-variant-numeric: tabular-nums;
}

.wp24-raten__summe { background: var(--wp24-primaer, #1D274E) !important; border-color: var(--wp24-primaer, #1D274E) !important; }
.wp24-raten__summe dt { color: #b9c6e8; }
.wp24-raten__summe dd { color: #fff; }

.wp24-raten__gleich {
	margin: 0 0 1.25rem;
	padding: .625rem .75rem;
	border-left: 3px solid var(--wp24-akzent, #65A7E1);
	font-size: .875rem;
	line-height: 1.55;
	color: var(--wp24-text-leise, #5b6785);
}

.wp24-raten h4 {
	margin: 1rem 0 .4rem;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--wp24-primaer, #1D274E);
}

.wp24-raten__liste { margin: 0; padding-left: 1.15rem; font-size: .875rem; line-height: 1.6; }
.wp24-raten__liste li { margin-bottom: .3rem; }
.wp24-raten__liste--haken li { color: var(--wp24-text-leise, #5b6785); }

.wp24-raten__recht {
	margin: 1rem 0 0;
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--wp24-text-leise, #5b6785);
}

.wp24-raten__mehr { margin: .875rem 0 0; font-size: .9rem; }

/* Hinweis fuer Betraege unterhalb der Ratenschwelle. */
.wp24-raten-klein {
	margin-top: 1.25rem;
	padding: .875rem 1rem;
	border-left: 3px solid var(--wp24-akzent, #65A7E1);
	border-radius: 0 10px 10px 0;
	background: var(--wp24-flaeche, #f7f9fe);
	font-size: .9rem;
	line-height: 1.6;
}


/* --------------------------------------------------------------------------
   Festpreis-Pakete  [wp24_pakete]

   Der Baustein steht auch auf Seiten OHNE .wp24-rechner - etwa auf der
   Elementor-Startseite. Die Farbvariablen werden deshalb hier noch einmal
   gesetzt, mit exakt denselben Werten wie oben in .wp24-rechner. Keine
   zusaetzliche Farbe: Navy #1D274E, Blau #5378FA, Hellblau #65A7E1.
   -------------------------------------------------------------------------- */

.wp24-pakete {
	--wp24-navy:      #1D274E;
	--wp24-blau:      #5378FA;
	--wp24-hellblau:  #65A7E1;

	--wp24-bg-soft:   #f6f7fb;
	--wp24-bg-card:   #ffffff;
	--wp24-text:      #1D274E;
	--wp24-text-soft: #565E7D;
	--wp24-line:      #dfe3ee;
	--wp24-erfolg:    #0B6E4F;
	--wp24-warn:      #8A5300;
	--wp24-gold:      #B47800;
	--wp24-r:         14px;
	--wp24-r-gross:   20px;

	margin: 2.5rem 0;
	padding: 1.5rem 1.25rem 1.75rem;
	background: var(--wp24-bg-soft);
	border: 1px solid var(--wp24-line);
	border-radius: var(--wp24-r-gross);
	color: var(--wp24-text);
}

.wp24-pakete .wp24-pakete__titel {
	margin: 0 0 .5rem;
	font-size: clamp(1.25rem, 2.6vw, 1.625rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp24-navy);
}

.wp24-pakete__lead {
	margin: 0 0 1.25rem;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--wp24-text-soft);
	max-width: 46rem;
}

/* --- kompakte Kachelreihe --- */

.wp24-pakete__reihe {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .875rem;
	grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .wp24-pakete__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .wp24-pakete__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wp24-pakete--kurz .wp24-paket {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0;
	padding: 1.125rem 1.125rem 1.25rem;
	background: var(--wp24-bg-card);
	border: 1.5px solid var(--wp24-line);
	border-radius: var(--wp24-r);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wp24-pakete--kurz .wp24-paket:hover {
	border-color: var(--wp24-blau);
	box-shadow: 0 8px 24px -14px rgba(29,39,78,.35);
}

.wp24-paket__name {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp24-text-soft);
}

.wp24-paket__preis { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.wp24-paket__preis strong {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--wp24-navy);
	font-variant-numeric: tabular-nums;
}
.wp24-paket__preis small { font-size: .75rem; color: var(--wp24-text-soft); }

.wp24-paket__punkte {
	list-style: none;
	margin: .25rem 0 auto;
	padding: 0;
	font-size: .875rem;
	line-height: 1.5;
}
.wp24-paket__punkte li {
	position: relative;
	margin: 0 0 .3rem;
	padding-left: 1.1rem;
}
.wp24-paket__punkte li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: var(--wp24-hellblau);
}

.wp24-paket__link {
	align-self: flex-start;
	margin-top: .5rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--wp24-navy);
}

/* --- ausfuehrliche Variante --- */

.wp24-pakete__liste { display: grid; gap: 1rem; }

.wp24-paket--voll {
	padding: 1.125rem 1.125rem 1.25rem;
	background: var(--wp24-bg-card);
	border: 1px solid var(--wp24-line);
	border-radius: var(--wp24-r);
}

.wp24-paket__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	padding-bottom: .625rem;
	border-bottom: 1px solid var(--wp24-line);
}
.wp24-pakete .wp24-paket--voll .wp24-paket__name {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp24-navy);
}

.wp24-paket__kennzahlen {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .875rem 0;
}
.wp24-paket__kennzahlen > div {
	flex: 1 1 11rem;
	padding: .5rem .75rem;
	background: var(--wp24-bg-soft);
	border: 1px solid var(--wp24-line);
	border-radius: 10px;
}
.wp24-paket__kennzahlen dt {
	margin: 0 0 .15rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp24-text-soft);
}
.wp24-paket__kennzahlen dd { margin: 0; font-size: .9375rem; font-weight: 600; }

.wp24-paket__spalten { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 40rem) { .wp24-paket__spalten { grid-template-columns: 1fr 1fr; } }

.wp24-paket__spalte {
	padding: .75rem .875rem;
	background: var(--wp24-bg-soft);
	border: 1px solid var(--wp24-line);
	border-radius: var(--wp24-r);
}
.wp24-paket__spalte--ja   { border-left: 3px solid var(--wp24-erfolg); }
.wp24-paket__spalte--nein { border-left: 3px solid var(--wp24-gold); }

.wp24-pakete .wp24-paket__spaltentitel {
	margin: 0 0 .4rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp24-text-soft);
}
.wp24-paket__spalte ul { margin: 0; padding-left: 1.125rem; font-size: .875rem; line-height: 1.55; }
.wp24-paket__spalte li { margin-bottom: .2rem; }
.wp24-paket__spalte--ja li::marker   { color: var(--wp24-erfolg); }
.wp24-paket__spalte--nein li::marker { color: var(--wp24-gold); }

.wp24-paket__warnung {
	margin: .875rem 0 0;
	padding: .75rem .875rem;
	font-size: .875rem;
	line-height: 1.5;
	background: var(--wp24-bg-soft);
	border-left: 3px solid var(--wp24-warn);
	border-radius: 0 var(--wp24-r) var(--wp24-r) 0;
}

.wp24-pakete__nie {
	margin-top: 1rem;
	padding: .75rem 1rem;
	font-size: .875rem;
	background: var(--wp24-bg-card);
	border: 1px solid var(--wp24-line);
	border-radius: var(--wp24-r);
}
.wp24-pakete__nie summary {
	cursor: pointer;
	font-weight: 600;
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--wp24-text);
}
.wp24-pakete__nie ul { margin: .625rem 0 0; padding-left: 1.125rem; line-height: 1.55; }

/* --- Ratenzahlung und Abschluss --- */

.wp24-pakete__raten {
	margin: 1.25rem 0 0;
	padding: .75rem .875rem;
	font-size: .9375rem;
	line-height: 1.6;
	background: var(--wp24-bg-card);
	border-left: 3px solid var(--wp24-hellblau);
	border-radius: 0 var(--wp24-r) var(--wp24-r) 0;
}
.wp24-pakete__raten a { color: var(--wp24-navy); font-weight: 600; }

.wp24-pakete__mehr { margin: .875rem 0 0; font-size: .9375rem; }
.wp24-pakete__mehr a { color: var(--wp24-navy); font-weight: 600; }

@media (prefers-color-scheme: dark) {
	.wp24-pakete {
		--wp24-bg-soft:   #161c2c;
		--wp24-bg-card:   #1b2234;
		--wp24-text:      #eef1f8;
		--wp24-text-soft: #a8b0c9;
		--wp24-line:      #2b344b;
		--wp24-navy:      #eef1f8;
		--wp24-erfolg:    #4FD1A5;
		--wp24-warn:      #E3AD5C;
		--wp24-gold:      #E8B54B;
	}
	.wp24-pakete__raten a,
	.wp24-pakete__mehr a,
	.wp24-paket__link { color: #7d9bff; }
}

/* Links im Baustein.
   Das Theme setzt global  a { text-decoration: none !important }  - ein
   Unterstrich ueber text-decoration ist dort also chancenlos. Die Linien
   unten sind deshalb echte Rahmen: sichtbare Klickflaeche, ohne die
   Theme-Regel zu ueberschreiben. Farbe bleibt navy, Linie hellblau. */
.wp24-pakete .wp24-paket__link,
.wp24-pakete .wp24-pakete__raten a,
.wp24-pakete .wp24-pakete__mehr a {
	color: var(--wp24-navy);
	font-weight: 600;
	border-bottom: 2px solid var(--wp24-hellblau);
	padding-bottom: 1px;
	transition: border-color .15s ease;
}
.wp24-pakete .wp24-paket__link:hover,
.wp24-pakete .wp24-pakete__raten a:hover,
.wp24-pakete .wp24-pakete__mehr a:hover {
	border-bottom-color: var(--wp24-blau);
}

@media (prefers-color-scheme: dark) {
	.wp24-pakete .wp24-paket__link,
	.wp24-pakete .wp24-pakete__raten a,
	.wp24-pakete .wp24-pakete__mehr a { color: #7d9bff; }
}


/* --------------------------------------------------------------------------
   Ratenzahlung — die ausfuehrliche Erklaerung unter dem Rechner
   -------------------------------------------------------------------------- */
.wp24-ratendetails {
	margin: 2rem 0 0;
	padding: 1.5rem;
	border: 1px solid var(--wp24-linie, #dde3f2);
	border-radius: var(--wp24-radius, 14px);
	background: #fff;
}

.wp24-ratendetails > h3 {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp24-primaer, #1D274E);
}

.wp24-ratendetails__spalten {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem 2rem;
}

@media (min-width: 46rem) {
	.wp24-ratendetails__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wp24-ratendetails h4 {
	margin: 0 0 .5rem;
	font-size: .95rem;
	font-weight: 700;
	color: var(--wp24-primaer, #1D274E);
}

/* Farbe ausdruecklich setzen: Der Block erbte sonst die helle Schrift des
   dunklen Ergebnisfelds und war auf weissem Grund praktisch unsichtbar. */
.wp24-ratendetails ul {
	margin: 0;
	padding-left: 1.15rem;
	font-size: .9rem;
	line-height: 1.65;
	color: var(--wp24-text, #26314d);
}

.wp24-ratendetails li { margin-bottom: .45rem; }

.wp24-ratendetails__recht {
	margin: 1.25rem 0 0;
	padding: .875rem 1rem;
	border-left: 3px solid var(--wp24-akzent, #65A7E1);
	border-radius: 0 10px 10px 0;
	background: var(--wp24-flaeche, #f7f9fe);
	font-size: .85rem;
	line-height: 1.6;
	color: var(--wp24-text-leise, #5b6785);
}

.wp24-ratendetails__mehr { margin: 1rem 0 0; font-size: .95rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Theme-Ueberschreibungen fuer den Ratenblock

   Das Theme setzt eigene Regeln fuer h3 und fuer Absaetze im Ergebnisfeld.
   Ohne diese Zeilen erschien die Ueberschrift riesig und schwarz, und der
   Einleitungssatz stand in einem so hellen Grau, dass er nicht lesbar war.
   Gleiche Ursache wie seinerzeit bei den Fusszeilen-Ueberschriften.
   -------------------------------------------------------------------------- */
.wp24-raten h3.wp24-raten__titel,
.wp24-panel .wp24-raten__titel,
.wp24-raten__titel {
	font-size: 1.0625rem !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: #1D274E !important;
	margin: 0 0 .5rem !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.wp24-raten p.wp24-raten__lead,
.wp24-panel .wp24-raten__lead,
.wp24-raten__lead {
	font-size: .875rem !important;
	line-height: 1.55 !important;
	color: #26314d !important;
	margin: 0 0 .875rem !important;
}

.wp24-raten .wp24-raten__gleich,
.wp24-panel .wp24-raten__gleich {
	color: #3d4a6b !important;
	font-size: .8125rem !important;
	background: rgba(255, 255, 255, .7);
	border-radius: 0 8px 8px 0;
}

.wp24-raten .wp24-raten__zahlen dt { color: #5b6785 !important; }
.wp24-raten .wp24-raten__zahlen dd { color: #1D274E !important; }

.wp24-raten p.wp24-raten__mehr,
.wp24-panel .wp24-raten__mehr { font-size: .8125rem !important; margin: .75rem 0 0 !important; }

.wp24-raten .wp24-raten__mehr a,
.wp24-raten .wp24-raten__gleich strong { color: #1D274E !important; }

/* --------------------------------------------------------------------------
   Links im Ratenblock erkennbar machen

   Das Theme setzt global a { text-decoration: none !important }. Ein Link,
   der sich nur durch die Farbe vom Fliesstext unterscheidet, verstoesst gegen
   WCAG 1.4.1 — Farbe darf nicht das einzige Unterscheidungsmerkmal sein.
   Deshalb eine Linie über border-bottom, die das !important nicht betrifft.
   -------------------------------------------------------------------------- */
.wp24-raten__mehr a,
.wp24-ratendetails__mehr a,
.wp24-raten-klein a,
.wp24-raten__gleich a {
	border-bottom: 2px solid currentColor;
	padding-bottom: 1px;
}

.wp24-raten__mehr a:hover,
.wp24-ratendetails__mehr a:hover,
.wp24-raten-klein a:hover,
.wp24-raten__mehr a:focus-visible,
.wp24-ratendetails__mehr a:focus-visible,
.wp24-raten-klein a:focus-visible {
	border-bottom-color: var(--wp24-akzent, #65A7E1);
}