/* Stark-VARG-Konfigurator — Hoope Park
   Farben aus dem CI: Rot #fe2e2e auf #c11a1a, Flächen schwarz. */

.hoope-stark {
	--hs-rot: #fe2e2e;
	--hs-rot-dunkel: #c11a1a;
	--hs-schwarz: #101010;
	--hs-grau: #1c1c1c;
	--hs-linie: #2e2e2e;
	--hs-text: #f2f2f2;
	--hs-text-leise: #a0a0a0;

	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
	gap: 0;
	background: var(--hs-schwarz);
	color: var(--hs-text);
	overflow: hidden;
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 70px;
}

/* ---------- Kopf: Titel und Schrittleiste ueber beiden Spalten ---------- */

.hoope-stark__kopf {
	grid-column: 1 / -1;
	padding: 26px 24px 0;
	background: var(--hs-schwarz);
}

.hoope-stark .hoope-stark__modelltitel.hoope-stark__modelltitel {
	margin: 0 0 16px;
	font-size: clamp( 26px, 3vw, 42px );
	line-height: 1.1;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* ---------- Bühne ---------- */

.hoope-stark__buehne {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	min-height: 340px;
	padding: 20px;
}

.hoope-stark__bild,
.hoope-stark__auflage {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity .28s ease;
}

.hoope-stark__auflage {
	position: absolute;
	left: 20px;
	right: 20px;
	width: calc(100% - 40px);
	pointer-events: none;
}

.hoope-stark__bild.ist-wechselnd { opacity: .25; }

.hoope-stark__modellname {
	position: absolute;
	left: 28px;
	bottom: 20px;
	margin: 0;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hs-text-leise);
}

/* ---------- Steuerung ---------- */

.hoope-stark__steuerung {
	display: flex;
	flex-direction: column;
	background: var(--hs-grau);
	border-left: 1px solid var(--hs-linie);
	min-width: 0;
}

/* Erklaerung unter der Schrittueberschrift. */
.hoope-stark__beschreibung {
	margin: -6px 0 16px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--hs-text-leise);
}

/* Links buendig, umbrechend — bewusst ohne waagerechte Bildlaufleiste. */
.hoope-stark__schritte {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 2px 4px;
	padding: 0;
}

.hoope-stark__reiter {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--hs-text-leise);
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	transition: color .18s ease, border-color .18s ease;
}

.hoope-stark__reiter:hover { color: var(--hs-text); }

.hoope-stark__reiter.ist-aktiv {
	color: #fff;
	border-bottom-color: var(--hs-rot);
}

.hoope-stark__reiter-nr {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	background: #333;
	color: #ddd;
	font-size: 11px;
	font-weight: 700;
}

.hoope-stark__reiter.ist-aktiv .hoope-stark__reiter-nr {
	background: var(--hs-rot);
	color: #fff;
}

.hoope-stark__formular {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.hoope-stark__gruppe {
	flex: 1;
	overflow-y: auto;
	padding: 18px 20px;
	min-height: 0;
}

/* Doppelte Klasse: das Theme setzt Farbe, Groesse und Grossschreibung
   fuer h3 mit eigener Spezifitaet — die muss hier uebertroffen werden. */
.hoope-stark .hoope-stark__titel.hoope-stark__titel {
	margin: 0 0 14px;
	font-size: 19px;
	line-height: 1.3;
	color: #fff;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 700;
}

/* ---------- Unterreiter (Federung) ---------- */

.hoope-stark__unterreiter {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.hoope-stark__unterreiter-knopf {
	padding: 6px 16px;
	background: #262626;
	border: 1px solid var(--hs-linie);
	color: var(--hs-text-leise);
	font-size: 13px;
	cursor: pointer;
}

.hoope-stark__unterreiter-knopf.ist-aktiv {
	background: var(--hs-rot-dunkel);
	border-color: var(--hs-rot);
	color: #fff;
}

/* ---------- Optionskarten ---------- */

.hoope-stark__karten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}

.hoope-stark__karte {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #262626;
	border: 1px solid var(--hs-linie);
	cursor: pointer;
	overflow: hidden;
	transition: border-color .18s ease, background .18s ease;
}

.hoope-stark__karte:hover { border-color: #555; }

.hoope-stark__karte input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.hoope-stark__karte:has(input:checked) {
	border-color: var(--hs-rot);
	background: #2f2020;
}

.hoope-stark__karte:has(input:focus-visible) {
	outline: 2px solid var(--hs-rot);
	outline-offset: 2px;
}

.hoope-stark__karte-bild {
	width: 100%;
	height: auto;
	display: block;
	background: #000;
}

.hoope-stark__karte-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 11px;
}

.hoope-stark__karte-name {
	font-size: 13px;
	color: #fff;
	font-weight: 600;
}

.hoope-stark__karte-preis {
	font-size: 12px;
	color: var(--hs-text-leise);
}

.hoope-stark__karte:has(input:checked) .hoope-stark__karte-preis { color: var(--hs-rot); }

/* Farbwahl */

.hoope-stark__karte.ist-farbe {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
}

.hoope-stark__punkt {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #4a4a4a;
}

.hoope-stark__karte.ist-farbe:has(input:checked) .hoope-stark__punkt { border-color: #fff; }
.hoope-stark__karte.ist-farbe .hoope-stark__karte-text { padding: 0; }

/* ---------- Reifen ---------- */

.hoope-stark__karten.ist-gruppiert {
	grid-template-columns: 1fr;
	gap: 12px;
}

.hoope-stark__marke {
	background: #262626;
	border: 1px solid var(--hs-linie);
	overflow: hidden;
}

.hoope-stark__marke-bild {
	width: 100%;
	height: auto;
	display: block;
	background: #000;
}

.hoope-stark__marke-kopf {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 6px;
	flex-wrap: wrap;
}

.hoope-stark__marke-logo { height: 18px; width: auto; }

.hoope-stark__marke-name {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.hoope-stark__marke-profil {
	font-size: 12px;
	color: var(--hs-text-leise);
	margin-left: auto;
}

.hoope-stark__varianten {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--hs-linie);
}

.hoope-stark__variante {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 12px;
	background: #262626;
	cursor: pointer;
}

.hoope-stark__variante input { position: absolute; opacity: 0; pointer-events: none; }
.hoope-stark__variante:has(input:checked) { background: #2f2020; box-shadow: inset 2px 0 0 var(--hs-rot); }
.hoope-stark__variante-name { font-size: 12px; color: #fff; }
.hoope-stark__variante-preis { font-size: 12px; color: var(--hs-text-leise); }
.hoope-stark__variante:has(input:checked) .hoope-stark__variante-preis { color: var(--hs-rot); }

.hoope-stark__hinweis {
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--hs-text-leise);
	border-left: 2px solid var(--hs-linie);
	padding-left: 10px;
}

/* ---------- Zusammenfassung ---------- */

.hoope-stark__liste {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	margin: 0 0 20px;
	font-size: 14px;
}

.hoope-stark__liste dt { color: var(--hs-text-leise); }
.hoope-stark__liste dd { margin: 0; color: #fff; }

.hoope-stark__anzahlung {
	background: #222;
	border: 1px solid var(--hs-linie);
	padding: 14px 16px;
	margin-bottom: 16px;
}

.hoope-stark__anzahlung h4 { margin: 0 0 8px; font-size: 15px; color: #fff; }

.hoope-stark__anzahlung-text {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--hs-text-leise);
}

.hoope-stark__anzahlung-text strong { color: var(--hs-text); }

.hoope-stark__zahlwahl { display: grid; gap: 8px; }

.hoope-stark__zahlart {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	background: #262626;
	border: 1px solid var(--hs-linie);
	cursor: pointer;
}

.hoope-stark__zahlart input { position: absolute; opacity: 0; pointer-events: none; }
.hoope-stark__zahlart:has(input:checked) { border-color: var(--hs-rot); background: #2f2020; }
.hoope-stark__zahlart-name { font-size: 13.5px; font-weight: 600; color: #fff; }
.hoope-stark__zahlart-hinweis { font-size: 12px; color: var(--hs-text-leise); }

.hoope-stark__betrag { margin-top: 12px; }
.hoope-stark__betrag label { display: block; font-size: 13px; margin-bottom: 5px; color: var(--hs-text-leise); }

.hoope-stark__betrag-feld { display: flex; align-items: center; gap: 8px; }

.hoope-stark__betrag-feld input {
	width: 150px;
	padding: 8px 10px;
	background: #1a1a1a;
	border: 1px solid var(--hs-linie);
	color: #fff;
	font-size: 15px;
}

.hoope-stark__betrag-waehrung { color: var(--hs-text-leise); }

.hoope-stark__betrag-rest { margin: 7px 0 0; font-size: 12.5px; color: var(--hs-text-leise); }
.hoope-stark__betrag-rest.ist-fehler { color: #ff8a8a; }

.hoope-stark__haendler {
	margin: 0;
	padding: 12px 14px;
	background: #2a1414;
	border-left: 3px solid var(--hs-rot);
	font-size: 13px;
	color: var(--hs-text);
}

.hoope-stark__haendler a { color: var(--hs-rot); }

/* ---------- Fuß ---------- */

.hoope-stark__fuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 20px;
	background: #151515;
	border-top: 1px solid var(--hs-linie);
}

.hoope-stark__summe { display: flex; flex-direction: column; }

.hoope-stark__summe-wert {
	font-size: 23px;
	font-weight: 700;
	color: #fff;
	line-height: 1.15;
}

.hoope-stark__summe-zusatz { font-size: 11.5px; color: var(--hs-text-leise); }

.hoope-stark__knoepfe { display: flex; gap: 8px; }

.hoope-stark__knopf {
	padding: 11px 24px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.hoope-stark__knopf--weiter,
.hoope-stark__knopf--bestellen {
	background: var(--hs-rot);
	color: #fff;
}

.hoope-stark__knopf--weiter:hover,
.hoope-stark__knopf--bestellen:hover {
	background: #fff;
	color: var(--hs-schwarz);
}

.hoope-stark__knopf--zurueck {
	background: transparent;
	border-color: var(--hs-linie);
	color: var(--hs-text-leise);
}

.hoope-stark__knopf--zurueck:hover { color: #fff; border-color: #666; }

/* ---------- Schmale Schirme ---------- */

@media (max-width: 1024px) {
	.hoope-stark { grid-template-columns: 1fr; }
	.hoope-stark__steuerung { border-left: 0; border-top: 1px solid var(--hs-linie); }
	.hoope-stark__gruppe { max-height: none; }
}

@media (max-width: 560px) {
	.hoope-stark__karten { grid-template-columns: 1fr 1fr; }
	.hoope-stark__varianten { grid-template-columns: 1fr; }
	.hoope-stark__fuss { flex-direction: column; align-items: stretch; }
	.hoope-stark__knoepfe { justify-content: stretch; }
	.hoope-stark__knopf { flex: 1; }
}

/* -------------------------------------------------------------------------
 * Seite drumherum schwarz
 *
 * Greift nur auf Seiten mit Konfigurator (Body-Klasse aus dem Plugin), damit
 * keine andere Seite betroffen ist. Avadas Zackenkante ("ausgerissenes
 * Papier") wird ueber ihre Fuellfarbe mitgeschwaerzt — sie ist ein SVG,
 * dessen fill sich per CSS umfaerben laesst.
 * ---------------------------------------------------------------------- */

body.hoope-stark-seite,
body.hoope-stark-seite #main,
body.hoope-stark-seite .fusion-footer,
body.hoope-stark-seite #wrapper,
body.hoope-stark-seite .fusion-page-title-bar {
	background-color: #000 !important;
}

body.hoope-stark-seite #main .post-content,
body.hoope-stark-seite #content {
	background: transparent !important;
}

/* Zackenkante: Fuellung auf Schwarz. Avada legt sie als SVG mit fill-Attribut
   an — dort schlaegt das Attribut das CSS nicht, deshalb beides setzen. */
body.hoope-stark-seite .fusion-separator svg,
body.hoope-stark-seite .fusion-separator svg path,
body.hoope-stark-seite .fusion-separator svg polygon,
body.hoope-stark-seite .fusion-separator .fusion-separator-border,
body.hoope-stark-seite .fusion-title-sep {
	fill: #000 !important;
	color: #000 !important;
	border-color: #000 !important;
}

/* Text auf der schwarzen Seite lesbar halten. */
body.hoope-stark-seite #main h1,
body.hoope-stark-seite #main h2,
body.hoope-stark-seite #main h3,
body.hoope-stark-seite #main p {
	color: #f2f2f2;
}