/* -------------------------------------------------------------------------
 * Gestaltung der geretteten Divi-Landingpages
 *
 * Gehoert zu includes/landingpage-gestaltung.php.
 *
 * Leitgedanke: Wer hier landet, hat ein kaputtes Geraet in der Hand und sucht
 * sein Modell. Die Geraeteauswahl ist der Hauptdarsteller, alles andere
 * stuetzt sie. Deshalb traegt sie als einziger Block einen eigenen Grund und
 * eine Nummer; der Rest bleibt ruhig.
 *
 * Die Farben stammen aus dem Haus: #02628F ist das Blau aus dem Kopfbereich
 * der Startseite, #0E1A22 die Schriftfarbe des Themes.
 * ------------------------------------------------------------------------- */

.edvr-lp-kopf,
.edvr-lp-wahl,
.edvr-lp-schluss {
	--lp-blau:      #02628F;
	--lp-blau-tief: #013E5E;
	--lp-tinte:     #0E1A22;
	--lp-gedaempft: #55697A;
	--lp-linie:     #E2E8ED;
	--lp-papier:    #F4F7FA;
}

/* -------------------------------------------------------------------------
 * Kopfbereich
 *
 * EIGENE HANDSCHRIFT, NICHT DIE DES VORBILDS
 *
 * Der erste Entwurf nach dem Wettbewerbsvergleich sah dem Vorbild zu aehnlich:
 * runde Pillen, weicher Farbverlauf, vier grosse bunte Zahlen nebeneinander.
 * Jonas: „Jetzt sieht das zu sehr aus wie das Beispiel."
 *
 * Diese Fassung kommt aus dem eigenen Geschaeft. Eine Werkstatt mit Tresen
 * arbeitet mit Formularen, Aushaengen und klaren Kanten - nicht mit weichen
 * Verlaeufen. Deshalb:
 *
 *   - Kanten statt Pillen (6 px Radius, nicht 999)
 *   - eine durchgezogene Oberkante in Hausblau statt Farbverlauf
 *   - der Preis als Aushang rechts, mit eigener Umrandung
 *   - die Zusagen als Liste mit Haarlinien, nicht als bunte Zahlenreihe
 *   - Ziffern in Tabellenbreite, damit Preise untereinander fluchten
 * ------------------------------------------------------------------------- */

.edvr-lp-kopf {
	margin: 0 0 44px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--lp-linie);
	border-top: 3px solid var(--lp-blau);
	border-radius: 6px;
	overflow: hidden;
}

.edvr-lp-kopf h1 {
	margin: 0;
	padding: 30px 34px 0;
	font-size: clamp(1.85rem, 3.1vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	text-wrap: balance;
	max-width: 24ch;
}

.edvr-lp-fakten {
	display: grid;
	gap: 0;
	padding: 0;
}

.edvr-lp-fakten__satz {
	margin: 14px 0 0 !important;
	padding: 0 34px 26px;
	max-width: 58ch;
	font-size: 1.06rem;
	line-height: 1.55;
	color: var(--lp-gedaempft);
}

/* Die Preistafel. Eigene Flaeche, eigene Umrandung - sie ist der Aushang,
   nicht Teil des Fliesstextes. */
.edvr-lp-tafel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	margin: 0 34px 26px;
	padding: 20px 24px;
	background: #F6F9FB;
	border: 1px solid var(--lp-linie);
	border-left: 3px solid var(--lp-blau);
	border-radius: 4px;
}

.edvr-lp-ab {
	margin: 0 !important;
	display: grid;
	gap: 1px;
	flex: 1 1 auto;
}

.edvr-lp-ab__label {
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lp-gedaempft);
}

.edvr-lp-ab__wert {
	font-size: 2.05rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.03em;
	color: var(--lp-tinte);
	font-variant-numeric: tabular-nums;
}

.edvr-lp-ab__zusatz {
	font-size: .82rem;
	color: var(--lp-gedaempft);
}

/* Der Knopf: rechteckig mit leicht gebrochener Kante. Kein Pillenradius -
   das ist die Form des Vorbilds, nicht unsere. */
.edvr-lp-cta {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 14px 28px;
	background: var(--lp-blau);
	border-radius: 4px;
	font-size: 1.02rem;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	white-space: nowrap;
	transition: background .14s ease;
}

.edvr-lp-cta:hover,
.edvr-lp-cta:focus-visible {
	background: var(--lp-blau-tief);
	color: #fff;
}

.edvr-lp-cta__pfeil {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

/* Die Zusagen als Fusszeile der Karte. Gleichrangig, durch Haarlinien
   getrennt, in Textgroesse - eine Auskunft, kein Werbebanner. */
.edvr-lp-zahlen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--lp-linie);
	background: #FBFCFD;
}

.edvr-lp-zahl {
	padding: 16px 20px 17px;
	border-left: 1px solid var(--lp-linie);
}

.edvr-lp-zahl:first-child {
	border-left: 0;
	padding-left: 34px;
}

.edvr-lp-zahl dt {
	font-size: .98rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--lp-tinte);
	font-variant-numeric: tabular-nums;
}

.edvr-lp-zahl dd {
	margin: 2px 0 0;
	font-size: .82rem;
	line-height: 1.35;
	color: var(--lp-gedaempft);
}

@media (prefers-reduced-motion: reduce) {
	.edvr-lp-cta { transition: none; }
}

/* -------------------------------------------------------------------------
 * Die Geraeteauswahl
 *
 * Der einzige Block mit eigenem Grund. Er soll als Werkzeug lesbar sein und
 * nicht als weiterer Inhaltsabschnitt.
 * ------------------------------------------------------------------------- */

.edvr-lp-wahl {
	margin: 36px 0 44px;
	padding: 28px 28px 30px;
	background: var(--lp-papier);
	border: 1px solid var(--lp-linie);
	border-radius: 14px;
}

.edvr-lp-wahl__titel {
	margin: 0 0 6px;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	letter-spacing: -.01em;
	color: var(--lp-tinte);
}

.edvr-lp-wahl__hilfe {
	margin: 0;
	max-width: 58ch;
	font-size: .98rem;
	color: var(--lp-gedaempft);
}

/* Die Kacheln stehen im getoenten Block, deshalb ohne eigenen Rahmen -
   sonst Kasten im Kasten. Die weisse Flaeche traegt sie allein. */
.edvr-lp-wahl .edvr-dk-raster {
	margin: 22px 0 0;
}

.edvr-lp-wahl .edvr-dk {
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(14, 26, 34, .06);
}

.edvr-lp-wahl .edvr-dk:hover,
.edvr-lp-wahl .edvr-dk:focus-visible {
	border-color: var(--lp-blau);
	box-shadow: 0 10px 24px -14px rgba(2, 98, 143, .7);
}

/* -------------------------------------------------------------------------
 * Die uebrigen Abschnitte
 *
 * Die Ueberschriften stehen bisher ohne Abstand im Textfluss. Eine duenne
 * Linie darueber trennt die Abschnitte, ohne jeden Block einzurahmen.
 * ------------------------------------------------------------------------- */

.entry-content > h2 {
	margin-top: 54px;
	padding-top: 26px;
	border-top: 1px solid var(--lp-linie, #E2E8ED);
	letter-spacing: -.015em;
	text-wrap: balance;
}

/* Fliesstext laeuft auf volle Breite, wie Ueberschriften und Raster.

   Hier stand zwischendurch eine Begrenzung auf 72 Zeichen und eine graue
   Farbe fuer den ersten Absatz nach jeder Ueberschrift. Typografisch war das
   vertretbar, auf dieser Seite sah es falsch aus: Neben Ueberschriften und
   Rastern, die bis zum Rand laufen, wirkte der schmale Textblock wie ein
   Fehler, und zwei verschiedene Textfarben untereinander wie ein Versehen.

   Einheitlich ist hier wichtiger als ideal. */

/* -------------------------------------------------------------------------
 * Vertikaler Rhythmus
 *
 * Vorher hatte jedes Element seinen eigenen Abstand: 0 px vor der
 * Modellauswahl (der Text klebte am Kasten), 16 px vor dem Akkordeon, 24 px
 * vor den Produktkacheln, 30 px vor den uebrigen Rastern. Das entstand, weil
 * jede Regel einzeln dazukam.
 *
 * Drei Groessen reichen:
 *
 *   54 px  vor einer neuen Ueberschrift (neuer Abschnitt)
 *   34 px  vor einem Block (Kasten, Raster, Kachelreihe, Akkordeongruppe)
 *   20 px  zwischen Absaetzen
 * ------------------------------------------------------------------------- */

.entry-content > .et_pb_row,
.entry-content > .edvr-dk-raster,
.entry-content > details.edvr-dacc:first-of-type {
	margin-top: 34px;
}

.entry-content > .et_pb_row {
	margin-bottom: 8px;
}

/* Ein Akkordeon direkt nach einem anderen bleibt gestapelt - die Gruppe ist
   ein Block, nicht vier. */
.entry-content > details.edvr-dacc + details.edvr-dacc {
	margin-top: 8px;
}

/* Nach der letzten Akkordeonzeile wieder voller Blockabstand. */
.entry-content > details.edvr-dacc + :not(details) {
	margin-top: 34px;
}

/* -------------------------------------------------------------------------
 * Abschluss
 * ------------------------------------------------------------------------- */

.edvr-lp-schluss {
	margin: 56px 0 8px;
	padding: 34px 32px 32px;
	background: linear-gradient(170deg, var(--lp-blau) 0%, var(--lp-blau-tief) 100%);
	border-radius: 14px;
	color: #fff;
}

.edvr-lp-schluss h2 {
	margin: 0 0 10px;
	border: 0;
	padding: 0;
	color: #fff;
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	letter-spacing: -.015em;
}

.edvr-lp-schluss p {
	margin: 0;
	max-width: 56ch;
	color: rgba(255, 255, 255, .88);
	line-height: 1.55;
}

.edvr-lp-schluss__wege {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 22px 0 0;
}

.edvr-lp-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 8px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	color: #fff;
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.edvr-lp-knopf:hover,
.edvr-lp-knopf:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
}

.edvr-lp-knopf--haupt {
	background: #fff;
	border-color: #fff;
	color: var(--lp-blau-tief);
}

.edvr-lp-knopf--haupt:hover,
.edvr-lp-knopf--haupt:focus-visible {
	background: #EAF4FA;
	color: var(--lp-blau-tief);
	transform: translateY(-1px);
}

.edvr-lp-schluss__ort {
	margin-top: 18px !important;
	font-size: .92rem;
	color: rgba(255, 255, 255, .75) !important;
}

@media (prefers-reduced-motion: reduce) {
	.edvr-lp-knopf { transition: none; }
	.edvr-lp-knopf--haupt:hover { transform: none; }
}

@media (max-width: 680px) {
	.edvr-lp-kopf h1 { padding: 22px 20px 0; }
	.edvr-lp-fakten__satz { padding: 0 20px 20px; }
	.edvr-lp-tafel { margin: 0 20px 20px; padding: 16px 18px; }
	.edvr-lp-zahl { padding: 14px 18px; border-left: 0; border-top: 1px solid var(--lp-linie); }
	.edvr-lp-zahl:first-child { padding-left: 18px; border-top: 0; }
	.edvr-lp-zahlen { grid-template-columns: 1fr; }
	.edvr-lp-cta { width: 100%; justify-content: center; }
	.edvr-lp-wahl { padding: 20px 16px 22px; border-radius: 10px; }
	.edvr-lp-schluss { padding: 26px 20px 24px; border-radius: 10px; }
	.edvr-lp-belege { gap: 12px 22px; }
	.edvr-lp-lead p { font-size: 1.1rem; }
	.edvr-lp-schluss__wege .edvr-lp-knopf { flex: 1 1 100%; }
}