/**
 * Sharp Produktkonfigurator (Schaukelhelden)
 *
 * Alles unter .shk gescopet. Farben und Radien als Custom Properties, damit sie
 * sich vom Theme aus überschreiben lassen, ohne diese Datei anzufassen.
 *
 * Schriftgrößen: Basis 16px. Die Skala liegt bewusst 2-3px über der des Themes,
 * weil der Konfigurator Fließtext zum Lesen ist und nicht nur Beschriftung.
 */

.shk {
	--shk-orange: #f36b21;
	--shk-orange-dark: #df5c17;
	--shk-orange-light: #fff4ec;
	--shk-text: #33312f;
	--shk-muted: #77736f;
	--shk-line: #e5e2df;
	--shk-soft: #faf9f8;
	--shk-radius: 3px;

	/*
	 * Werte der Shop-Kachel (`ul.products li.product`), am 25.08.2026 im Browser
	 * ausgemessen, damit die Ergebniskachel dieselbe Sprache spricht. Wer sie
	 * ändert, sollte vorher im Shop nachmessen statt hier zu schätzen:
	 * Titel/Preis Barlow, Fließtext #7a7a7a, Button Open Sans auf #e3e1ec.
	 */
	--shk-loop-ink: #7a7a7a;
	--shk-loop-btn-bg: #e3e1ec;
	--shk-loop-accent: var(--e-global-color-accent, #d8e9d6);
	--shk-content-width: 1400px;

	box-sizing: border-box;
	color: var(--shk-text);
	font-size: 16px;
	line-height: 1.55;
}

/**
 * Contentbreite – nur dort, wo sie sonst niemand setzt.
 *
 * Mit dem Seitentemplate "Elementor Full Width" steht der Shortcode ohne jeden
 * Container direkt zwischen Header und Footer und wäre randlos so breit wie das
 * Fenster. Für diesen Fall baut die Regel unten eine Spalte nach: Inhalt
 * min(100%, --shk-content-width), außen 10px – deshalb das +20px in der
 * max-width, sonst wäre die Spalte um die beiden Innenabstände zu schmal.
 *
 * Die Kit-Breakpoints (1024px/767px) sind absichtlich nicht nachgebaut: sie
 * setzen die Grenze auf den Wert des Breakpoints selbst, was bei einem Fenster
 * dieser Größe dasselbe ist wie die 100% oben.
 */
.shk {
	width: 100%;
	max-width: calc(var(--shk-content-width) + 20px);
	margin-inline: auto;
	padding-inline: 10px;
	margin-top: 1rem;
}

/**
 * ... und wieder aus, wenn schon ein Wrapper die Breite macht.
 *
 * Sonst kommt der Innenabstand zweimal und der Konfigurator steht 20px schmaler
 * als der übrige Seiteninhalt. Drei Fälle, alle real vorhanden:
 *
 *   .e-con / .elementor-widget-container  Shortcode in einem Elementor-Container
 *   .site-main                            Standard-Seitentemplate des Themes –
 *                                         hello-elementor begrenzt .site-main
 *                                         selbst auf die Kit-Breite (auf dev
 *                                         gemessen: 1140px). Genau so liegt die
 *                                         dev-Seite /konfigurator/.
 *
 * Achtung: In diesen Fällen wirkt --shk-content-width nicht mehr – die Breite
 * kommt dann vom Wrapper. Wer den Konfigurator breiter als den Seiteninhalt
 * will, braucht ein randloses Template ("Elementor Full Width"), nicht einen
 * größeren Wert hier.
 */
.e-con .shk,
.elementor-widget-container .shk,
.site-main .shk {
	max-width: none;
	padding-inline: 0;
}

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

/* ---------------------------------------------------------------- Intro */

.shk-intro {
	margin-bottom: 8px;
}

.shk-title {
	margin: 0;
	color: var(--shk-orange);
	font-size: 33px;
	line-height: 1.2;
}

.shk-sub {
	margin: 8px 0 0;
	max-width: 820px;
	color: var(--shk-muted);
	font-size: 16px;
}

/* -------------------------------------------------------------- Stepper */

.shk-stepper {
	display: flex;
	align-items: center;
	margin: 26px 0 22px;
	/* Platz fuer die horizontale Scrollleiste, sonst schneidet sie die
	   Unterlaengen der Schrittlabels an. */
	padding-bottom: 14px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: #d8d5d2 transparent;
}

.shk-stepper::-webkit-scrollbar {
	height: 6px;
}

.shk-stepper::-webkit-scrollbar-track {
	background: transparent;
}

.shk-stepper::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: #d8d5d2;
}

.shk-stepper::-webkit-scrollbar-thumb:hover {
	background: #bdb9b5;
}

.shk .shk-step,
.shk .shk-step:hover,
.shk .shk-step:focus {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	white-space: nowrap;
	box-shadow: none;
}

.shk .shk-step {
	color: #a3a09d;
}

.shk-step .shk-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid #d8d5d2;
	border-radius: 50%;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
}

.shk .shk-step.is-active {
	color: var(--shk-orange);
	font-weight: 700;
}

.shk .shk-step.is-active .shk-circle {
	border-color: var(--shk-orange);
	background: var(--shk-orange);
	color: #fff;
}

.shk .shk-step.is-done {
	color: #5d5a57;
	cursor: pointer;
}

.shk .shk-step.is-done .shk-circle {
	border-color: var(--shk-orange);
	background: #fff;
	color: var(--shk-orange);
}

.shk .shk-step.is-done:hover,
.shk .shk-step.is-done:focus {
	color: var(--shk-orange);
}

.shk .shk-step.is-done:hover .shk-circle {
	background: var(--shk-orange-light);
}

.shk-step:disabled {
	cursor: default;
}

.shk-connector {
	flex: none;
	width: 32px;
	height: 1px;
	margin: 0 9px;
	background: #ddd;
}

/* --------------------------------------------------------------- Layout */

.shk-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 25px;
	align-items: start;
}

.shk-layout[hidden] {
	display: none;
}

.shk-panel {
	border: 1px solid var(--shk-line);
	background: #fff;
}

.shk-panel-head {
	padding: 24px 26px 17px;
	border-bottom: 1px solid #eee;
}

.shk-kicker {
	color: var(--shk-orange);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.shk-question {
	margin: 6px 0 5px;
	font-size: 24px;
	line-height: 1.28;
}

.shk-hint-text {
	margin: 0;
	color: var(--shk-muted);
	font-size: 16px;
}

/* -------------------------------------------------------------- Kacheln */

.shk-options {
	display: grid;
	gap: 15px;
	padding: 22px 26px 26px;
}

/**
 * minmax(0, 1fr) statt 1fr ist hier Pflicht, nicht Geschmack: Ein 1fr-Track hat
 * als Untergrenze die Min-Content-Breite seines Inhalts. Das Theme setzt auf
 * jedem <button> white-space: nowrap (hello-elementor/assets/css/reset.css) —
 * damit ist die Min-Content-Breite einer Kachel ihre laengste Textzeile, die
 * Spalten wachsen ueber den Panelrand hinaus und die Kacheln stehen im
 * Ergebnis unterschiedlich breit nebeneinander. Die 0-Untergrenze nimmt dem
 * Track diesen Boden; das noetige Umbrechen erlaubt .shk-option weiter unten.
 */
.shk-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shk-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/**
 * Wichtig: Hintergrund und Textfarbe müssen für JEDEN Zustand explizit gesetzt
 * werden. Die Kacheln sind <button>-Elemente, und Themes färben Buttons beim
 * Hover gern selbst ein – ohne eigene Angabe schlägt das durch und der Text
 * wird unlesbar. Deshalb auch die .shk-Verdopplung: sie hebt die Spezifität
 * über die Theme-Regeln.
 *
 * Aus demselben Grund steht hier white-space: normal. Das Theme setzt auf
 * Buttons nowrap; das vererbt sich auf Überschrift, Beschreibung und Zähler
 * und macht jede Kachel so breit wie ihre längste Zeile.
 */
.shk .shk-option {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Grid-Items haben min-width: auto – ohne die 0 kann der Inhalt die Spalte aufdrücken. */
	min-width: 0;
	padding: 0;
	white-space: normal;
	overflow-wrap: break-word;
	border: 1px solid #d9d6d3;
	border-radius: var(--shk-radius);
	background: #fff;
	color: var(--shk-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.shk .shk-option:hover,
.shk .shk-option:focus {
	border-color: var(--shk-orange);
	background: #fffaf6;
	color: var(--shk-text);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .07);
}

.shk .shk-option:focus-visible {
	outline: 2px solid var(--shk-orange);
	outline-offset: 2px;
}

.shk .shk-option.is-selected,
.shk .shk-option.is-selected:hover,
.shk .shk-option.is-selected:focus {
	border: 2px solid var(--shk-orange);
	background: var(--shk-orange-light);
	color: var(--shk-text);
}

/**
 * Kachelflaeche.
 *
 * Bild- und Schema-Kacheln teilen sich dasselbe Seitenverhaeltnis (das der
 * Renderings, 360x190). Vorher hatten die SVG-Kacheln eine feste Hoehe von
 * 115px, waehrend die Bildkacheln mit der Spaltenbreite mitwuchsen – Holzart
 * und Oberflaeche standen dadurch sichtbar kleiner da als alle Schritte davor.
 * Feste Hoehe scheidet auch fuer die Bilder aus: je nach Spaltenbreite bliebe
 * oben und unten ein grauer Streifen stehen.
 */
.shk-option-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 360 / 190;
	border-bottom: 1px solid #eee;
	background: var(--shk-soft);
}

.shk-option-visual svg {
	width: 88%;
	height: 88%;
}

.shk .shk-option-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.shk-option-text {
	display: block;
	padding: 13px 15px 15px;
}

/* Textfarben fest verdrahten, damit sie in keinem Button-Zustand kippen. */
.shk .shk-option-text strong {
	display: block;
	margin-bottom: 4px;
	color: var(--shk-text);
	font-size: 17px;
}

.shk .shk-option-desc {
	display: block;
	color: var(--shk-muted);
	font-size: 13px;
	line-height: 1.45;
}

.shk .shk-option-count {
	display: block;
	margin-top: 7px;
	color: #8d8884;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
}

.shk-check {
	position: absolute;
	top: 9px;
	right: 10px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: var(--shk-orange);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.shk-option.is-selected .shk-check {
	display: flex;
}

/* -------------------------------------------------------------- Aktionen */

.shk-actions {
	display: flex;
	/* Umbrechen erlaubt: auf schmalen Schirmen passen Hinweistext und der
	   (vom Theme nicht umbrechbare) Button sonst nicht nebeneinander und
	   machen das ganze Panel breiter als das Fenster. */
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 15px 26px;
	border-top: 1px solid #eee;
}

.shk-actions-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.shk .shk-btn {
	display: inline-block;
	padding: 11px 22px;
	border: 0;
	border-radius: var(--shk-radius);
	font: inherit;
	font-size: 14px;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
}

.shk .shk-btn-primary,
.shk a.shk-btn-primary {
	background: var(--shk-orange);
	color: #fff;
}

.shk .shk-btn-primary:hover,
.shk .shk-btn-primary:focus,
.shk a.shk-btn-primary:hover,
.shk a.shk-btn-primary:focus {
	background: var(--shk-orange-dark);
	color: #fff;
	text-decoration: none;
}

.shk .shk-btn-primary:disabled,
.shk .shk-btn-primary:disabled:hover {
	background: #e5e2df;
	color: #918d89;
	cursor: not-allowed;
}

.shk .shk-btn-back {
	padding-left: 0;
	background: none;
	color: var(--shk-muted);
}

.shk .shk-btn-back:hover,
.shk .shk-btn-back:focus {
	background: none;
	color: var(--shk-orange);
	text-decoration: underline;
}

.shk-note {
	color: #9b9691;
	font-size: 13px;
}

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

.shk-summary {
	position: sticky;
	top: 15px;
	border: 1px solid var(--shk-line);
	background: #fff;
}

.shk-summary-head {
	padding: 18px 20px 15px;
	border-bottom: 1px solid #eee;
}

.shk-summary-head h4 {
	margin: 0 0 6px;
	font-size: 18px;
}

.shk-counter {
	margin: 0;
	color: var(--shk-muted);
	font-size: 14px;
}

.shk-counter strong {
	color: var(--shk-orange);
	font-size: 17px;
}

.shk-summary-body {
	padding: 11px 20px 18px;
}

.shk-summary-item {
	padding: 9px 0;
	border-bottom: 1px solid #eee;
}

.shk-summary-item:last-of-type {
	border-bottom: 0;
}

.shk-summary-label {
	color: #9b9691;
	font-size: 12px;
	text-transform: uppercase;
}

.shk-summary-value {
	margin-top: 3px;
	font-size: 14px;
}

.shk-summary-value em {
	color: #9b9691;
	font-style: normal;
	font-size: 12px;
}

.shk-summary-value.is-empty {
	color: #bbb;
}

.shk-help {
	margin-top: 16px;
	padding-top: 15px;
	border-top: 1px solid #eee;
}

.shk-help strong {
	font-size: 14px;
}

.shk-help p {
	margin: 5px 0 8px;
	color: var(--shk-muted);
	font-size: 13px;
}

.shk-help a {
	color: var(--shk-orange);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

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

.shk-result[hidden] {
	display: none;
}

.shk-result-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid #eee;
}

.shk-result-head h3 {
	margin: 5px 0 0;
	font-size: 26px;
}

.shk-count {
	color: var(--shk-orange);
	font-weight: 700;
}

.shk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 11px;
}

.shk-chip {
	padding: 6px 10px;
	border: 1px solid #ddd;
	background: var(--shk-soft);
	font-size: 12px;
}

.shk .shk-chip button,
.shk .shk-chip button:hover,
.shk .shk-chip button:focus {
	padding: 0 0 0 6px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	box-shadow: none;
}

.shk .shk-chip button {
	color: #7d7975;
}

.shk .shk-chip button:hover,
.shk .shk-chip button:focus {
	color: var(--shk-orange);
}

.shk-products {
	display: grid;
	/* Gleiche Begründung wie bei den Kacheln: kein Min-Content-Boden im Track. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

/*
 * Rahmen wie im Shop-Raster: 1px in Weiss, also unsichtbar, und erst beim
 * Hover in der Akzentfarbe. Das Weiss ist kein Versehen – es hält den Platz
 * frei, damit die Kachel beim Hover nicht um einen Pixel springt.
 */
.shk-product {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1px solid #fff;
	border-radius: 16px;
	background: #fff;
	transition: border-color 250ms linear;
}

.shk-product:hover {
	border-color: var(--shk-loop-accent);
}

/**
 * Bildfläche im Seitenverhältnis der Quelle, nicht in fester Höhe.
 *
 * Alle Shop-Thumbnails sind 400×300 (`woocommerce_thumbnail`, harter Zuschnitt),
 * also 4:3. Vorher stand hier eine feste Höhe von 190px mit object-fit: cover —
 * in einer rund 290px breiten Kachel entspricht das einem Zuschnitt von oben und
 * unten: bei den Schaukelfotos fehlten Querbalken und Sitze, bei den Maßskizzen
 * (z. B. „Wunschschaukel Spielraum") die Höhenlinien. Mit dem Verhältnis der
 * Quelle passt das Bild exakt in die Fläche, ohne Zuschnitt und ohne Rand.
 */
.shk-product-image {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	background: #f5f4f2;
	overflow: hidden;
}

/**
 * contain, nicht cover: hätte ein Produktbild später doch ein anderes Verhältnis
 * (anderer Thumbnail-Zuschnitt im Shop, Bild ohne generierte Größe), wird es
 * eingepasst statt beschnitten. „Nichts angeschnitten" ist hier die wichtigere
 * Eigenschaft als eine randlos gefüllte Fläche; der Hintergrund der Fläche
 * fängt den Rest ab.
 */
.shk-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.shk-product-image svg {
	width: 88%;
	height: 88%;
}

.shk-product-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/*
 * Wie `.woocommerce-loop-product__title`: Barlow 800 in 20px/24px und in der
 * gedämpften Textfarbe – im Shop ist der Produktname bewusst nicht schwarz.
 */
.shk-product-body h4 {
	margin: 0;
	padding: 10px 0;
	color: var(--shk-loop-ink);
	font-family: Barlow, sans-serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 24px;
	overflow-wrap: break-word;
}

/**
 * Bullet Points wie in den Shop-Rastern (.sharp-extra-desc dort).
 *
 * list-style und padding stehen explizit da: Themes und Resets nehmen <ul> im
 * Fließtext gern die Punkte und den Einzug weg, und ohne Punkte liest sich die
 * Liste als vier zusammenhanglose Zeilen.
 */
.shk .shk-product-bullets {
	margin: 0 0 16px;
	padding: 0 0 0 15px;
	color: var(--shk-loop-ink);
	font-size: 16px;
	line-height: normal;
	list-style: disc outside;
}

.shk .shk-product-bullets li {
	margin: 0;
	padding: 0;
	overflow-wrap: break-word;
}

/*
 * Punkte in der Textfarbe, nicht in Orange. Im Shop-Raster sind sie grau; das
 * Orange hier war der auffälligste Unterschied zwischen den beiden Kacheln.
 */
.shk .shk-product-bullets li::marker {
	color: var(--shk-loop-ink);
}

/*
 * Nur fetter, nicht dunkler – genau wie im Shop. Ein dunkleres Strong würde die
 * Kachel gegenüber derselben Kachel auf der Kategorieseite kontrastreicher
 * machen, und die beiden sollen nebeneinander gleich aussehen.
 */
.shk .shk-product-bullets strong,
.shk .shk-product-bullets b {
	color: var(--shk-loop-ink);
	font-weight: 700;
}

/*
 * Die gewählte Konfiguration. Diese Zeile hat im Shop-Raster keine Entsprechung
 * – dort gibt es keine Auswahl zu erklären. Sie bleibt trotzdem, weil sie sagt,
 * *warum* dieses Produkt hier auftaucht. Nur die Trennlinie ist weg: sie war das
 * einzige Stück Chrom, das die Shop-Kachel nicht hat.
 */
.shk-product-meta {
	margin: 0 0 4px;
	color: var(--shk-muted);
	font-size: 12px;
	line-height: 1.5;
}

/*
 * Button links, Preis rechts – `.sh-loop-cta` aus dem Theme. `margin-top: auto`
 * drückt die Zeile an den Kachelboden, damit sie über alle Kacheln einer Reihe
 * auf einer Linie liegt, egal wie viele Bullet Points darüber stehen.
 */
.shk-product-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 16px;
}

/* Preis wie `.sh-loop-price`: Barlow 20px, bewusst nicht fett. */
.shk-price {
	margin: 0;
	color: var(--shk-loop-ink);
	font-family: Barlow, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 30px;
	white-space: nowrap;
}

/*
 * Der graue Button aus dem Shop-Raster ("Ausführung wählen"), nicht der orange
 * Primärbutton. Damit sieht die Ergebniskachel aus wie ihr Gegenstück auf der
 * Kategorieseite. Der orange Primärbutton bleibt für die Schritte im
 * Fragebaum – dort ist er die einzige Aktion, hier ist er es nicht.
 */
.shk .shk-product .shk-btn-loop {
	flex-shrink: 0;
	padding: 10px 16px;
	border: 0;
	border-radius: 3px;
	background: var(--shk-loop-btn-bg);
	color: var(--shk-loop-ink);
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 16px;
	text-align: center;
}

.shk .shk-product .shk-btn-loop:hover,
.shk .shk-product .shk-btn-loop:focus-visible {
	background: var(--shk-orange);
	color: #fff;
}

.shk-result-note {
	margin-top: 22px;
	padding: 19px 21px;
	border: 1px dashed #ddd;
	background: var(--shk-soft);
	color: var(--shk-muted);
	font-size: 14px;
}

.shk-result-note strong {
	color: var(--shk-text);
}

.shk-empty {
	padding: 30px 24px;
	border: 1px dashed #ddd;
	background: var(--shk-soft);
	text-align: center;
}

.shk-empty strong {
	font-size: 17px;
}

.shk-empty p {
	margin: 9px 0 17px;
	color: var(--shk-muted);
	font-size: 14px;
}

/* ----------------------------------------------------- Laden und Fehler */

.shk-loading,
.shk-error {
	margin: 18px 0;
	color: var(--shk-muted);
	font-size: 15px;
}

.shk-error[hidden] {
	display: none;
}

.shk-error a {
	color: var(--shk-orange);
	font-weight: 700;
}

/* ------------------------------------------------- Ladezustand (Skeleton) */

/**
 * Warum ueberhaupt ein Skeleton?
 *
 * Der Shortcode liefert nur die Huelle, gefuellt wird sie aus dem REST-Index
 * (~240 KB). Bis der da ist, standen Stepper, Panel und Aktionszeile leer auf
 * der Seite: ein Kasten mit zwei Trennlinien, dazu ein bereits sichtbarer
 * "Weiter"-Button, den man noch nicht druecken kann. Das las sich wie ein
 * Fehler, nicht wie "laedt" — 2-3 Sekunden lang.
 *
 * Jetzt zeigt die Huelle waehrenddessen einen Platzhalter in genau der Form,
 * die danach kommt (erster Schritt: Gestelltyp, drei Kacheln), und das echte
 * Layout bleibt weg, bis es Inhalt hat.
 *
 * Gesteuert ueber die Klasse .is-loading am Root, nicht ueber das
 * hidden-Attribut: hidden verwaltet das JS selbst (Panel gegen Ergebnis), da
 * kaemen sich zwei Mechanismen ins Gehege.
 */

.shk.is-loading .shk-stepper,
.shk.is-loading .shk-layout {
	display: none;
}

.shk-skeleton {
	display: none;
}

.shk.is-loading .shk-skeleton {
	display: block;
}

/* Die Flaechen selbst: ein Grau, ueber das ein hellerer Streifen wandert. */
.shk-sk-bar,
.shk-sk-pill,
.shk-sk-visual,
.shk-sk-btn {
	display: block;
	border-radius: var(--shk-radius);
	background-color: #eeecea;
	background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: shk-shimmer 1.4s ease-in-out infinite;
}

@keyframes shk-shimmer {
	from { background-position: 150% 0; }
	to   { background-position: -50% 0; }
}

.shk-sk-stepper {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 26px 0 22px;
	padding-bottom: 14px;
}

/*
 * Zwei Pillen, nicht vier: im ersten Schritt zeigt der echte Stepper genau zwei
 * Eintraege ("1 Gestelltyp" und "Ergebnis"), er waechst erst mit dem Weg mit.
 * Die 28px Hoehe ist die des echten Schrittkreises — mit den 13px einer Textzeile
 * war die Platzhalter-Zeile 15px flacher und das Panel rutschte beim Wechsel nach.
 */
.shk-sk-pill {
	height: 28px;
	border-radius: 14px;
}

.shk-sk-pill-1 { width: 118px; flex: 0 1 118px; }
.shk-sk-pill-2 { width: 92px;  flex: 0 1 92px; }

/* Spaltenmasse wie .shk-layout, damit der Wechsel keinen Sprung macht. */
.shk-sk-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 25px;
	align-items: start;
}

.shk-sk-panel,
.shk-sk-summary {
	border: 1px solid var(--shk-line);
	background: #fff;
}

.shk-sk-head {
	padding: 24px 26px 17px;
	border-bottom: 1px solid #eee;
}

.shk-sk-bar-kicker   { height: 10px; width: 132px; margin-bottom: 12px; }
.shk-sk-bar-question { height: 21px; width: 62%;   margin-bottom: 10px; }
.shk-sk-bar-hint     { height: 13px; width: 84%; }

/* minmax(0, 1fr), nicht 1fr — siehe die Begruendung bei .shk-cols-*. */
.shk-sk-options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px;
	padding: 22px 26px 26px;
}

.shk-sk-option {
	min-width: 0;
	border: 1px solid var(--shk-line);
	border-radius: var(--shk-radius);
	overflow: hidden;
}

/* Dasselbe Seitenverhaeltnis wie .shk-option-visual (Renderings 360x190). */
.shk-sk-visual {
	width: 100%;
	aspect-ratio: 360 / 190;
	border-radius: 0;
	border-bottom: 1px solid #eee;
}

.shk-sk-bar-label { height: 15px; width: 68%; margin: 13px 15px 8px; }
.shk-sk-bar-desc  { height: 12px; width: 86%; margin: 0 15px 15px; }

.shk-sk-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 15px 26px;
	border-top: 1px solid #eee;
}

/* Hoehe wie ein echter .shk-btn: 11px Innenabstand + 14px Zeile. */
.shk-sk-btn-back { height: 37px; width: 96px; }
.shk-sk-btn-next { height: 37px; width: 104px; }

.shk-sk-summary {
	padding: 18px 20px 20px;
}

.shk-sk-summary .shk-sk-bar {
	height: 13px;
	width: 100%;
	margin-bottom: 14px;
}

.shk-sk-bar-sumhead {
	height: 17px;
	width: 58%;
	margin-bottom: 18px;
}

.shk-sk-summary .shk-sk-bar:last-child {
	margin-bottom: 0;
	width: 72%;
}

/* Der Spinner in der Statuszeile. */
.shk-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 9px;
	vertical-align: -2px;
	border: 2px solid #ddd9d5;
	border-top-color: var(--shk-orange);
	border-radius: 50%;
	animation: shk-spin 0.8s linear infinite;
}

@keyframes shk-spin {
	to { transform: rotate(360deg); }
}

/**
 * Wer Bewegung abbestellt hat, bekommt sie nicht. Die Flaechen bleiben als
 * ruhiges Grau stehen, der Spinner als Ring — die Aussage "hier kommt gleich
 * etwas" traegt die Form, nicht die Animation.
 */
@media (prefers-reduced-motion: reduce) {
	.shk-sk-bar,
	.shk-sk-pill,
	.shk-sk-visual,
	.shk-sk-btn,
	.shk-spinner {
		animation: none;
		background-image: none;
	}
}

/* --------------------------------------------------------------- Responsiv */

@media (max-width: 1000px) {
	.shk-layout {
		/* minmax(0, …) auch hier – sonst hält der breiteste Panelinhalt
		   (Aktionszeile, lange Produktnamen) die Spalte auf und das Panel
		   ragt aus dem Fenster. */
		grid-template-columns: minmax(0, 1fr);
	}

	.shk-sk-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.shk-summary {
		position: static;
	}

	.shk-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.shk-title {
		font-size: 27px;
	}

	.shk-question {
		font-size: 21px;
	}

	.shk-cols-2,
	.shk-cols-3,
	.shk-sk-options {
		grid-template-columns: minmax(0, 1fr);
	}

	.shk-products {
		grid-template-columns: minmax(0, 1fr);
	}

	.shk-panel-head,
	.shk-options,
	.shk-actions,
	.shk-sk-head,
	.shk-sk-options,
	.shk-sk-actions {
		padding-left: 18px;
		padding-right: 18px;
	}

	.shk-connector {
		width: 14px;
		margin: 0 5px;
	}

	.shk-result-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.shk-result-head h3 {
		font-size: 23px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shk-option {
		transition: none;
	}
}

.shk-error-detail {
	display: block;
	margin-top: 4px;
	color: #9b9691;
	font-size: 13px;
}