.smvk-wizard {
	max-width: 720px;
	margin: 0 auto;
	font-family: inherit;
	color: #1a1a1a;
	box-sizing: border-box;
}

.smvk-wizard *,
.smvk-wizard *::before,
.smvk-wizard *::after {
	box-sizing: border-box;
}

/*
 * Wichtig: Viele WordPress-Themes definieren eigene display-Regeln mit
 * höherer Spezifität als die Browser-Standardregel für [hidden]. Deshalb
 * hier hart erzwingen.
 */
.smvk-wizard [hidden] {
	display: none !important;
}

/*
 * Ebenso härten wir border-radius auf allen interaktiven Elementen ab –
 * manche Themes setzen globale Button-/Card-Styles (z. B. pillenförmige
 * oder runde Buttons) mit höherer Spezifität, die sonst unsere eckige
 * Optik überschreiben.
 */
.smvk-wizard button,
.smvk-wizard .smvk-btn,
.smvk-wizard .smvk-kachel,
.smvk-wizard .smvk-radio-card,
.smvk-wizard .smvk-wizard__progress-num {
	border-radius: 3px !important;
	box-shadow: none !important;
}

/* ── Fortschrittsanzeige (klickbar) ─────────────────────────── */

.smvk-wizard__progress {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24px;
	gap: 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.smvk-wizard__progress-step {
	flex: 1;
	min-width: 56px;
	text-align: center;
	font-weight: 700;
	font-size: 13px;
	color: #999;
	background: none;
	border: none;
	border-bottom: 3px solid #e5e5e5;
	padding: 0 4px 8px;
	cursor: default;
	font-family: inherit;
}

.smvk-wizard__progress-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 3px;
	background: #fff;
	border: 1.5px solid #d5d5d5;
	color: #999;
	font-size: 13px;
	margin-bottom: 4px;
}

.smvk-wizard__progress-label {
	display: block;
	font-weight: 400;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.smvk-wizard__progress-step.is-active {
	color: #1a1a1a;
	border-bottom-color: var(--smvk-akzent, #ec3013);
}
.smvk-wizard__progress-step.is-active .smvk-wizard__progress-num {
	border-color: var(--smvk-akzent, #ec3013);
	background: var(--smvk-akzent, #ec3013);
	color: #fff;
}

.smvk-wizard__progress-step.is-done {
	color: #1a1a1a;
	border-bottom-color: var(--smvk-akzent, #ec3013);
}
.smvk-wizard__progress-step.is-done .smvk-wizard__progress-num {
	border-color: var(--smvk-akzent, #ec3013);
	background: #fff;
	color: var(--smvk-akzent, #ec3013);
}

.smvk-wizard__progress-step.is-clickable {
	cursor: pointer;
}
.smvk-wizard__progress-step.is-clickable:hover .smvk-wizard__progress-num {
	background: var(--smvk-akzent, #ec3013);
	color: #fff;
}

.smvk-wizard__error {
	background: #fdeceb;
	border: 1px solid #ec3013;
	color: #b31f0a;
	padding: 12px 16px;
	border-radius: 4px;
	margin-bottom: 20px;
	font-size: 14px;
}

/*
 * Feld-Hervorhebung bei Validierungsfehlern: statt nur die Banner-Meldung
 * ganz oben anzuzeigen, wird zusätzlich das konkrete Feld (oder bei
 * Checkboxen/Containern der umgebende Bereich) rot umrandet und die Seite
 * dorthin gescrollt – damit sofort klar ist, welches Feld fehlt.
 */
.smvk-feld-invalid {
	border-color: #c0392b !important;
	box-shadow: 0 0 0 2px rgba( 192, 57, 43, 0.15 ) !important;
}

.smvk-bereich-invalid {
	outline: 2px solid #c0392b;
	outline-offset: 4px;
	border-radius: 6px;
}

.smvk-checkbox-label.smvk-bereich-invalid {
	outline: none;
	border: 1.5px solid #c0392b !important;
	background: #fdeceb !important;
}

.smvk-panel h3 {
	font-size: 19px;
	margin: 0 0 16px;
	line-height: 1.3;
}

.smvk-panel h4 {
	font-size: 15px;
	margin: 16px 0 8px;
}
.smvk-panel h5 {
	font-size: 13px;
	margin: 12px 0 6px;
	color: #555;
}

/* ── Produkt-/Veredelungs-/Positionsgrids ──────────────────── */

.smvk-produkt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px;
}

.smvk-veredelung-grid,
.smvk-position-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 8px;
	margin-bottom: 8px;
}

.smvk-kachel {
	border: 2px solid #e5e5e5;
	border-radius: 6px;
	padding: 12px 8px;
	text-align: center;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.15s ease, transform 0.1s ease;
	-webkit-tap-highlight-color: transparent;
}

.smvk-kachel:active {
	transform: scale(0.98);
}

.smvk-kachel img {
	width: 100%;
	height: 80px;
	object-fit: cover;
	margin-bottom: 8px;
	border-radius: 4px;
	background: #f4f4f4;
}

.smvk-kachel-platzhalter {
	width: 100%;
	height: 80px;
	margin-bottom: 8px;
	border-radius: 4px;
	background: #f4f4f4;
}

.smvk-kachel-titel {
	font-size: 13px;
	font-weight: 600;
}

.smvk-kachel-mass {
	font-size: 11px;
	color: #777;
	margin-top: 4px;
}

.smvk-kachel--klein {
	padding: 10px 6px;
}

.smvk-kachel.is-selected {
	border-color: var(--smvk-akzent, #ec3013);
	background: var(--smvk-akzent-hell, #fdeceb);
}

/* ── Produktwunsch: Radio-Cards ────────────────────────────── */

.smvk-radio-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border: 2px solid #e5e5e5;
	border-radius: 6px;
	padding: 14px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.smvk-radio-card input {
	margin-top: 3px;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.smvk-radio-card span {
	display: block;
}

.smvk-radio-card strong {
	display: block;
	font-size: 14px;
	margin-bottom: 2px;
}

.smvk-radio-card small {
	display: block;
	color: #777;
	font-size: 12px;
	line-height: 1.4;
}

.smvk-radio-card.is-selected {
	border-color: var(--smvk-akzent, #ec3013);
	background: var(--smvk-akzent-hell, #fdeceb);
}

/* ── Positionsliste (Schritt 4) ────────────────────────────── */

.smvk-positionen-liste {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.smvk-positions-eintrag {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #f4f4f4;
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 8px;
	font-size: 13px;
}

.smvk-positions-eintrag__info {
	flex: 1;
}

.smvk-positions-eintrag__entfernen {
	background: none;
	border: none;
	color: #b31f0a;
	font-size: 16px;
	cursor: pointer;
	flex-shrink: 0;
	padding: 2px 6px;
}

.smvk-positionen-formular {
	border: 1px dashed #c4c4c4;
	border-radius: 6px;
	padding: 14px;
	background: #fafafa;
	margin-top: 10px;
}

.smvk-btn--add-position {
	width: 100%;
	background: #fff !important;
	color: #777 !important;
	border: 1px dashed #c4c4c4 !important;
	font-weight: 600;
	font-size: 13px;
	min-height: 42px;
}

.smvk-btn--add-position:hover {
	border-color: var(--smvk-akzent, #ec3013) !important;
	color: var(--smvk-akzent, #ec3013) !important;
}

/* ── Massangabe & Upload ───────────────────────────────────── */

.smvk-massangabe {
	background: #f4f4f4;
	border-left: 4px solid var(--smvk-akzent, #ec3013);
	padding: 12px 14px;
	margin-top: 14px;
	margin-bottom: 14px;
	font-size: 13px;
	border-radius: 0 4px 4px 0;
}

.smvk-massangabe strong {
	display: block;
	margin-bottom: 4px;
}

.smvk-upload-feld {
	border: 2px dashed #c4c4c4;
	border-radius: 6px;
	padding: 28px 14px;
	text-align: center;
	position: relative;
	cursor: pointer;
	background: #fff;
}

.smvk-upload-feld.is-dragover {
	border-color: var(--smvk-akzent, #ec3013);
	background: var(--smvk-akzent-hell, #fdeceb);
}

.smvk-upload-feld input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.smvk-upload-feld p {
	margin: 0 0 4px;
	font-size: 14px;
}

.smvk-hinweis {
	font-size: 12px;
	color: #777;
	margin: 4px 0 12px;
}

.smvk-datei-ausgewaehlt {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f4f4f4;
	border-radius: 4px;
	padding: 8px 12px;
	margin-top: 10px;
	font-size: 13px;
	gap: 10px;
}

.smvk-datei-ausgewaehlt-info {
	display: flex;
	align-items: center;
	gap: 10px;
	overflow: hidden;
}

.smvk-datei-thumbnail {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #d5d5d5;
	background: #fff;
	flex-shrink: 0;
	cursor: pointer;
}

.smvk-datei-icon {
	width: 44px;
	height: 44px;
	border-radius: 4px;
	border: 1px solid #d5d5d5;
	background: #fff;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: #777;
	text-transform: uppercase;
}

.smvk-datei-thumbnail--klein,
.smvk-datei-icon--klein {
	width: 32px !important;
	height: 32px !important;
	font-size: 9px !important;
}

.smvk-datei-ausgewaehlt button {
	background: none;
	border: none;
	color: #b31f0a;
	cursor: pointer;
	font-size: 15px;
	flex-shrink: 0;
}

/* ── Warenkorb-Übersicht (Schritt 1) ────────────────────────── */

.smvk-warenkorb {
	background: #f4f4f4;
	border-radius: 6px;
	padding: 14px;
	margin-bottom: 20px;
}

.smvk-warenkorb h4 {
	margin: 0 0 10px;
	font-size: 14px;
}

.smvk-warenkorb-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.smvk-warenkorb-eintrag {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	border-radius: 4px;
	padding: 10px 12px;
	margin-bottom: 6px;
	font-size: 13px;
}

.smvk-warenkorb-eintrag__entfernen {
	background: none;
	border: none;
	color: #b31f0a;
	cursor: pointer;
	font-size: 15px;
}

.smvk-btn-textlink {
	display: block;
	width: 100%;
	text-align: center;
	background: none;
	border: none;
	color: #777;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
	margin-top: 10px;
	padding: 6px;
}

.smvk-btn-textlink:hover {
	color: var(--smvk-akzent, #ec3013);
}

.smvk-btn--abbrechen-neues-produkt {
	width: 100%;
	margin-top: 20px;
	background: #fff !important;
	color: #1a1a1a !important;
	border: 1.5px solid #c4c4c4 !important;
}

.smvk-btn--abbrechen-neues-produkt:hover {
	border-color: var(--smvk-akzent, #ec3013) !important;
	color: var(--smvk-akzent, #ec3013) !important;
}

.smvk-btn--weiteres-produkt {
	width: 100%;
	margin-top: 14px;
	background: #fff !important;
	color: var(--smvk-akzent, #ec3013) !important;
	border: 1.5px dashed var(--smvk-akzent, #ec3013) !important;
}

.smvk-btn--weiteres-produkt:hover {
	background: var(--smvk-akzent-hell, #fdeceb) !important;
}

.smvk-dpi-warnung {
	background: #fff6e0;
	border: 1px solid #e0b400;
	color: #6b5100;
	padding: 12px 16px;
	border-radius: 4px;
	margin-top: 16px;
	font-size: 13px;
}

/* ── Formularfelder allgemein ──────────────────────────────── */

.smvk-panel label {
	display: block;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 600;
}

.smvk-panel input[type="text"],
.smvk-panel input[type="email"],
.smvk-panel input[type="tel"],
.smvk-panel input[type="number"],
.smvk-panel textarea {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 12px;
	border: 1px solid #c4c4c4;
	border-radius: 6px;
	font-size: 16px; /* min. 16px verhindert Auto-Zoom auf iOS beim Fokussieren */
	font-weight: 400;
}

.smvk-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
	font-size: 13px;
	margin-bottom: 10px;
}

.smvk-checkbox-label input {
	margin-top: 3px;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.smvk-consent-checkbox {
	background: #f9f9f9;
	padding: 12px;
	border-radius: 6px;
}

.smvk-ohne-veredelung-box {
	background: #f4f4f4;
	padding: 14px;
	border-radius: 6px;
	margin-bottom: 16px;
}

.smvk-ohne-veredelung-box strong {
	font-size: 13px;
}

.smvk-zusammenfassung {
	background: #f4f4f4;
	border-radius: 6px !important;
	padding: 16px;
	margin: 20px 0;
	font-size: 13px;
}

/*
 * Bewusst mit div/span statt dl/dt/dd aufgebaut: manche Themes bringen
 * globale Styles für Definitionslisten mit (z. B. Tabellen-Optik mit
 * gestrichelten Trennlinien), die unsere kompakte Kartenoptik überschreiben
 * würden. div/span sind unauffälliger und bleiben unter unserer Kontrolle.
 */
.smvk-zsf-produkt {
	background: #fff !important;
	border-radius: 6px !important;
	padding: 14px !important;
	margin: 0 0 12px !important;
	border: 1px solid #e5e5e5 !important;
}

.smvk-zsf-produkt:last-of-type {
	margin-bottom: 0 !important;
}

.smvk-zsf-zeile {
	display: block !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	border: none !important;
}

.smvk-zsf-zeile:last-child {
	margin-bottom: 0 !important;
}

.smvk-zsf-label {
	font-weight: 700 !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	color: #999 !important;
	margin: 0 0 3px !important;
}

.smvk-zsf-wert {
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: #1a1a1a !important;
	margin: 0 !important;
}

.smvk-zsf-positionen {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin-top: 4px !important;
}

.smvk-zsf-position {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-size: 13px !important;
}

.smvk-zsf-position small {
	color: #777 !important;
	font-size: 11px !important;
}

.smvk-hinweis-preis {
	margin-top: 12px;
	font-size: 12px;
}

.smvk-groessen-tabelle {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 8px;
}

.smvk-groessen-tabelle th,
.smvk-groessen-tabelle td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #e5e5e5;
	font-size: 13px;
}

.smvk-groessen-tabelle input[type="number"] {
	width: 70px;
}

/* ── Navigation ─────────────────────────────────────────────── */

.smvk-wizard__nav {
	display: flex;
	justify-content: space-between;
	margin-top: 24px;
	gap: 12px;
	position: sticky;
	bottom: 0;
	background: #fff;
	padding: 12px 0;
}

.smvk-btn {
	padding: 14px 24px;
	border-radius: 6px;
	border: none;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	min-height: 48px; /* touch-freundlich */
}

.smvk-btn--klein {
	padding: 10px 16px;
	font-size: 13px;
	min-height: 40px;
}

.smvk-btn--position-speichern {
	width: 100%;
	margin-top: 4px;
	background: var(--smvk-akzent, #ec3013) !important;
	color: #fff !important;
	border: none !important;
}

.smvk-btn--position-speichern:hover:not(:disabled) {
	background: var(--smvk-akzent-dunkel, #c92a10) !important;
}

.smvk-btn--position-speichern:disabled {
	background: #e5e5e5 !important;
	color: #999 !important;
	cursor: not-allowed;
}

.smvk-btn--primary {
	background: var(--smvk-akzent, #ec3013);
	color: #fff;
	margin-left: auto;
	flex: 1;
	max-width: 240px;
}

.smvk-btn--primary:hover {
	background: var(--smvk-akzent-dunkel, #c92a10);
}

.smvk-btn--primary:disabled {
	background: #e5a89a;
	cursor: not-allowed;
}

.smvk-btn--secondary {
	background: #fff;
	color: #1a1a1a;
	border: 1px solid #c4c4c4;
}

.smvk-btn--secondary:disabled {
	color: #aaa;
	border-color: #e5e5e5;
	cursor: not-allowed;
}

.smvk-erfolg {
	text-align: center;
	padding: 48px 16px;
}

.smvk-erfolg h3 {
	font-size: 22px;
	margin-bottom: 12px;
}

.smvk-loading {
	color: #777;
	font-size: 14px;
	grid-column: 1 / -1;
}

/* ── Mobile-Optimierung ─────────────────────────────────────── */

@media (max-width: 600px) {
	.smvk-wizard {
		padding: 0 4px;
	}

	.smvk-wizard__progress-label {
		display: none;
	}

	.smvk-wizard__progress-step {
		min-width: 44px;
	}

	.smvk-produkt-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.smvk-veredelung-grid,
	.smvk-position-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.smvk-panel h3 {
		font-size: 17px;
	}

	.smvk-wizard__nav {
		flex-direction: row;
	}

	.smvk-btn--primary {
		max-width: none;
	}

	.smvk-radio-card {
		padding: 12px;
	}
}

@media (max-width: 360px) {
	.smvk-produkt-grid,
	.smvk-veredelung-grid,
	.smvk-position-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}
}

/* ── Button + Modal ([studiomv_konfigurator_button]) ────────── */

.smvk-modal-oeffnen-btn {
	display: inline-block;
	background: var(--smvk-akzent, #ec3013) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 3px !important;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	min-height: 48px;
	white-space: normal !important;
	word-break: keep-all !important;
	overflow-wrap: normal !important;
	line-height: 1.3;
	box-sizing: border-box;
}

/*
 * Falls der Button in einem sehr schmalen Theme-Bereich sitzt (z. B. neben
 * WhatsApp-/Social-Icons in der Kopfzeile), erzwingen wir auf kleinen
 * Bildschirmen eine eigene volle Zeile, statt in einer winzigen Spalte
 * Buchstabe für Buchstabe umzubrechen.
 */
@media (max-width: 782px) {
	.smvk-modal-oeffnen-btn {
		display: block;
		width: 100%;
		max-width: 320px;
		margin: 8px auto;
		text-align: center;
		padding: 12px 16px;
		font-size: 14px;
	}
}

.smvk-modal-oeffnen-btn:hover {
	background: var(--smvk-akzent-dunkel, #c92910) !important;
}

.smvk-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
	z-index: 100000; /* über WP-Admin-Bar und den meisten Theme-Elementen */
}

.smvk-modal-overlay[hidden] {
	display: none !important;
}

.smvk-modal-box {
	position: relative;
	background: #fff;
	border-radius: 8px;
	max-width: 760px;
	width: 100%;
	margin: 32px auto;
	padding: 24px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.smvk-modal-schliessen {
	position: absolute;
	top: -16px;
	right: -16px;
	width: 36px;
	height: 36px;
	border-radius: 3px !important;
	border: 1px solid #e5e5e5 !important;
	background: #fff !important;
	color: #1a1a1a;
	font-size: 16px;
	cursor: pointer;
	z-index: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.smvk-modal-schliessen:hover {
	border-color: var(--smvk-akzent, #ec3013) !important;
	color: var(--smvk-akzent, #ec3013);
}

/* Verhindert Hintergrund-Scrollen, während das Modal offen ist. */
body.smvk-modal-offen {
	overflow: hidden;
}

@media (max-width: 600px) {
	.smvk-modal-overlay {
		padding: 0;
	}

	.smvk-modal-box {
		max-width: none;
		width: 100%;
		min-height: 100%;
		margin: 0;
		border-radius: 0;
		padding: 56px 16px 24px;
	}

	.smvk-modal-schliessen {
		top: 12px;
		right: 12px;
	}
}