/* Office Jack Eckschreibtisch-Konfigurator – Stil "Warm". Alles auf .ojk-root begrenzt. */

.ojk-root {
	--ojk-ink: #231F1B;
	--ojk-body: #4A433C;
	--ojk-muted: #6A6158;
	--ojk-line: #E8E1D7;
	--ojk-line2: #DCD3C7;
	--ojk-line3: #CFC5B8;
	--ojk-divider: #E3DACE;
	--ojk-soft: #F6F2EC;
	--ojk-ph: #EEE7DD;
	--ojk-ph2: #E6DDD0;
	--ojk-sel: #FBF7F1;
	--ojk-label: #8A5A2B;
	--ojk-wall: #BFB3A4;
	--ojk-planbg: #FCFAF6;
	--ojk-accent: #1F5FE0;
	--ojk-accent-dark: #1A50C0;
	--ojk-warn: #B54708;
	--ojk-r1: 8px;
	--ojk-r2: 14px;
	--ojk-r3: 16px;

	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ojk-ink);
	max-width: 1240px;
	margin: 0 auto;
	padding: 20px 0 64px;
	box-sizing: border-box;
	text-align: left;
	letter-spacing: normal;
}

.ojk-root *,
.ojk-root *::before,
.ojk-root *::after { box-sizing: border-box; }

.ojk-root p { margin: 0; }
.ojk-root .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ojk-root svg { display: inline-block; }
.ojk-root [hidden],
.ojk-panel[hidden] { display: none !important; }

/* ---------- Grundbausteine: Theme-Stile neutralisieren ---------- */

.ojk-root button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	color: var(--ojk-ink);
	background: #FFFFFF;
	border: 1px solid var(--ojk-line2);
	border-radius: var(--ojk-r1);
	padding: 0;
	min-height: 0;
	height: auto;
	width: auto;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
	white-space: normal;
}
.ojk-root button:hover { border-color: var(--ojk-line3); background: #FFFFFF; color: var(--ojk-ink); }
.ojk-root button:focus { outline: none; }
.ojk-root button:focus-visible,
.ojk-root a:focus-visible {
	outline: 2px solid var(--ojk-accent);
	outline-offset: 2px;
}
.ojk-root button[aria-pressed="true"],
.ojk-root button[aria-pressed="true"]:hover {
	border: 2px solid var(--ojk-accent);
	background: var(--ojk-sel);
}

.ojk-root a.ojk-a,
.ojk-root .ojk-link {
	color: var(--ojk-accent);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.ojk-root a.ojk-a:hover,
.ojk-root .ojk-link:hover { text-decoration: underline; color: var(--ojk-accent-dark); }

.ojk-root button.ojk-link,
.ojk-root button.ojk-link:hover {
	border: 0;
	background: none;
	padding: 0;
	display: inline;
	font-size: inherit;
	color: var(--ojk-accent);
}

.ojk-test-banner {
	max-width: 1240px;
	margin: 16px auto 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: #FFF4E5;
	color: #7A3E00;
	font-size: 13px;
	font-family: Inter, system-ui, sans-serif;
}

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

.ojk-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
}
.ojk-left {
	flex: 1 1 540px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ojk-right {
	flex: 1 1 460px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ---------- Links: Reiter und Ansichten ---------- */

/* Reiter mittig über dem Bild, Vollbild rechts (Wunsch Bünyamin 30.10.2026: „mehr mittig, damit Kunden das besser sehen“) */
.ojk-viewbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px 16px; }
.ojk-tabs { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ojk-root .ojk-tab {
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
}
.ojk-root .ojk-tab[aria-selected="true"],
.ojk-root .ojk-tab[aria-selected="true"]:hover {
	border: 2px solid var(--ojk-ink);
	background: var(--ojk-soft);
}
.ojk-root .ojk-full {
	min-height: 44px;
	padding: 0 16px 0 14px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	grid-column: 3;
	justify-self: end;
}
.ojk-full svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Bildfläche. Gezeigt wird immer das ganze Bild bis knapp unter die Füße (--ojk-band = 0,932 der Bildhöhe,
   unter 91,7 % ist keine Ebene belegt). Die Fläche ist so hoch, wie es die Breite erlaubt – höchstens --ojk-avail
   (Rest der Bildschirmhöhe); das quadratische Bild (.ojk-frame) füllt sie. Ältere Browser: Fläche 100:91. */
.ojk-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 100 / 91;
	background: #FFFFFF;
	overflow: hidden;
}
.ojk-frame { position: absolute; inset: 0; }
.ojk-stage img,
.ojk-overlays img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.ojk-overlays { position: absolute; inset: 0; }
.ojk-overlays img { opacity: 0; transition: opacity .2s ease; }
.ojk-overlays img.is-on { opacity: 1; }
.ojk-stage.is-mirror .ojk-layer--base,
.ojk-stage.is-mirror .ojk-overlays img { transform: scaleX(-1); }
.ojk-stage.is-loading::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 14px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--ojk-line3);
	border-top-color: var(--ojk-accent);
	animation: ojk-spin .8s linear infinite;
}
@keyframes ojk-spin { to { transform: rotate(360deg); } }

@supports (width: 1cqw) {
	.ojk-panel { container-type: inline-size; }
	.ojk-root .ojk-stage {
		--ojk-h: min(var(--ojk-avail, 200vh), calc(100cqw * var(--ojk-band, 0.932)));
		width: 100%;
		max-width: none;
		margin: 0;
		aspect-ratio: auto;
		height: var(--ojk-h);
	}
	.ojk-frame {
		inset: auto;
		--ojk-s: calc(var(--ojk-h) / var(--ojk-band, 0.932));
		width: var(--ojk-s);
		height: var(--ojk-s);
		left: calc((100cqw - var(--ojk-s)) / 2);
		top: calc(var(--ojk-s) * var(--ojk-y0, 0) * -1);
	}
}

.ojk-plan {
	background: var(--ojk-planbg);
	border: 1px solid var(--ojk-line);
	border-radius: var(--ojk-r3);
	padding: 12px;
}
.ojk-plan svg { display: block; width: 100%; height: auto; max-height: 640px; font-family: Inter, system-ui, sans-serif; }
.ojk-plan-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 320px; padding: 24px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ojk-body); }
.ojk-plan-empty p { margin: 0; max-width: 30em; }
.ojk-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 16px;
	font-size: 13px;
	color: var(--ojk-muted);
	margin-top: 10px;
}

/* ---------- Fotos ---------- */

.ojk-photo-main {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #FFFFFF;
	border: 1px solid var(--ojk-line);
	border-radius: var(--ojk-r3);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ojk-photo-main img { width: 100%; height: 100%; object-fit: contain; margin: 0; max-width: none; }
.ojk-photo-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.ojk-root .ojk-photo-thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	padding: 0;
	aspect-ratio: 1 / 1;
	border-radius: var(--ojk-r1);
	overflow: hidden;
	min-height: 44px;
}
.ojk-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }

/* ---------- Rechts: Kopf ---------- */

.ojk-head { display: flex; flex-direction: column; gap: 8px; }
.ojk-root .ojk-h1 {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: var(--ojk-ink);
	text-transform: none;
}
.ojk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 13px; color: var(--ojk-muted); }
.ojk-rating { display: inline-flex; align-items: center; gap: 6px; color: var(--ojk-body); }
.ojk-rating strong { font-weight: 600; color: var(--ojk-ink); }
.ojk-stars { color: #E8A317; letter-spacing: 1px; }
.ojk-sku { font-size: 13px; color: var(--ojk-muted); }

/* ---------- Rechts: Auswahl in Schritten (immer nur einer offen) ---------- */

.ojk-config {
	background: var(--ojk-soft);
	border-radius: var(--ojk-r3);
	padding: 0 20px;
}
.ojk-acc + .ojk-acc { border-top: 1px solid var(--ojk-divider); }
.ojk-root .ojk-acc-h {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}
.ojk-root .ojk-acc-head,
.ojk-root .ojk-acc-head:hover {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 64px;
	padding: 14px 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: 16px;
	text-align: left;
}
.ojk-acc-num {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	background: #FFFFFF;
	color: var(--ojk-ink);
	border: 1px solid var(--ojk-line2);
}
.ojk-acc.is-open .ojk-acc-num { background: var(--ojk-ink); border-color: var(--ojk-ink); color: #FFFFFF; }
.ojk-acc-label { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.ojk-acc-step { font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--ojk-muted); }
.ojk-acc-name { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--ojk-ink); }
.ojk-opt { font-weight: 400; color: var(--ojk-muted); font-size: 13px; }
.ojk-acc-val {
	margin-left: auto;
	min-width: 0;
	font-size: 14px;
	color: var(--ojk-body);
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ojk-acc.is-open .ojk-acc-val { visibility: hidden; }
/* noch nicht gewählt (wie im alten Konfigurator ist nichts vorausgewählt) */
.ojk-acc-val.is-empty { color: var(--ojk-muted); font-weight: 400; }
.ojk-acc.is-missing .ojk-acc-val { color: var(--ojk-warn); font-weight: 600; }
.ojk-acc.is-missing .ojk-acc-num { border-color: var(--ojk-warn); color: var(--ojk-warn); }
.ojk-acc-chev { flex-shrink: 0; fill: none; stroke: var(--ojk-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.ojk-acc-head:hover .ojk-acc-chev { stroke: var(--ojk-ink); }
.ojk-acc.is-open .ojk-acc-chev { transform: rotate(180deg); }

/* Auf- und Zuklappen: Höhe gleitet (grid 0fr → 1fr); geschlossen unsichtbar und nicht per Tab erreichbar */
.ojk-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.ojk-acc.is-open > .ojk-acc-body { grid-template-rows: 1fr; }
.ojk-acc-inner { min-height: 0; overflow: hidden; margin: 0 -4px; visibility: hidden; transition: visibility 0s linear .3s; }
.ojk-acc.is-open .ojk-acc-inner { visibility: visible; transition-delay: 0s; }
.ojk-acc-pad { display: flex; flex-direction: column; gap: 16px; padding: 4px 4px 22px; }

/* Kacheln: in jedem Schritt gleich groß */
.ojk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ojk-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ojk-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ojk-tiles--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ojk-root .ojk-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 52px;
	padding: 10px 6px;
	background: #FFFFFF;
	border: 1px solid var(--ojk-line2);
	border-radius: 10px;
	text-align: center;
}
.ojk-root .ojk-tile:hover { border-color: var(--ojk-line3); background: #FFFFFF; }
.ojk-root .ojk-tile[aria-pressed="true"],
.ojk-root .ojk-tile[aria-pressed="true"]:hover {
	border: 1px solid var(--ojk-accent);
	box-shadow: inset 0 0 0 1px var(--ojk-accent);
	background: #FFFFFF;
}
.ojk-root .ojk-tile--shape[aria-pressed="true"]::after,
.ojk-root .ojk-tile--color[aria-pressed="true"]::after,
.ojk-root .ojk-tile--acc[aria-pressed="true"]::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ojk-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ojk-tile-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ojk-ink); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.ojk-tile-sub { display: block; font-size: 12px; line-height: 1.2; color: var(--ojk-muted); }
.ojk-shape { display: block; }
.ojk-root .ojk-tile--size { padding: 8px 2px; gap: 3px; }
.ojk-tile--size .ojk-tile-name { white-space: nowrap; }
.ojk-root .ojk-tile--color { justify-content: flex-start; padding: 8px 8px 10px; gap: 8px; }
.ojk-tile-sw { display: block; width: 100%; height: 44px; border-radius: 6px; border: 1px solid rgba(35, 31, 27, .12); background-size: cover; background-position: center; }
.ojk-root .ojk-tile--acc { justify-content: flex-start; padding: 10px 6px 12px; gap: 6px; }
.ojk-tile--acc .ojk-tile-name { font-size: 13px; }
.ojk-tile-img { display: block; width: 56px; height: 56px; object-fit: contain; margin: 0; border-radius: 6px; }

.ojk-group { display: flex; flex-direction: column; gap: 8px; }
.ojk-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ojk-ink); }
.ojk-group-note { font-size: 13px; font-weight: 400; color: var(--ojk-muted); white-space: nowrap; }
.ojk-field { display: flex; flex-direction: column; gap: 8px; }
.ojk-field-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ojk-field-label { font-size: 14px; font-weight: 600; }
.ojk-field-note { font-size: 13px; color: var(--ojk-muted); }
.ojk-root .ojk-s { font-size: 13px; line-height: 1.45; color: var(--ojk-muted); }
.ojk-root .ojk-s a.ojk-a { font-size: 13px; }
.ojk-step-actions { display: flex; justify-content: flex-end; }
.ojk-root .ojk-next,
.ojk-root .ojk-next:hover {
	min-height: 44px;
	padding: 0 24px;
	border-radius: 999px;
	border: 1.5px solid var(--ojk-ink);
	background: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}
.ojk-root .ojk-next:hover { background: var(--ojk-sel); }

/* Preis und Kaufbutton unten in der Fläche – eine Zeile, damit sie wenig Platz nimmt */
.ojk-foot {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 -20px;
	padding: 16px 20px 18px;
	background: var(--ojk-soft);
	border-top: 1px solid var(--ojk-divider);
	border-radius: 0 0 var(--ojk-r3) var(--ojk-r3);
}
.ojk-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ojk-total { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.ojk-foot-note { font-size: 13px; line-height: 1.4; color: var(--ojk-muted); }
.ojk-total-ab { font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--ojk-body); }
.ojk-root .ojk-missing { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ojk-warn); }
.ojk-form { margin: 0; flex: 1 1 200px; max-width: 260px; }
.ojk-root .ojk-buy,
.ojk-root .ojk-buy:hover {
	width: 100%;
	height: 52px;
	border: 0;
	border-radius: var(--ojk-r1);
	background: var(--ojk-accent);
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}
.ojk-root .ojk-buy:hover { background: var(--ojk-accent-dark); }
.ojk-root .ojk-buy[disabled] { opacity: .6; cursor: wait; }

/* Auswahl zurücksetzen – unten links im Bild, gefüllt und gut lesbar wie im bisherigen Konfigurator
   (dort unten links: grauer Knopf, 16 px fett). Steht im weißen Bereich unter dem Teppich. */
.ojk-root .ojk-reset,
.ojk-root .ojk-reset:hover {
	position: absolute;
	left: 16px;
	bottom: 16px;
	bottom: calc(16px + var(--ojk-lift, 0px)); /* angehoben, solange das Bild unten aus dem Fenster ragt */
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px 0 14px;
	transition: bottom .25s ease, background-color .15s, border-color .15s;
	border: 1px solid var(--ojk-line2);
	border-radius: 999px;
	background: var(--ojk-soft);
	font-size: 15px;
	font-weight: 600;
	color: var(--ojk-ink);
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(35, 31, 27, .08);
}
.ojk-root .ojk-reset:hover { background: #EFE8DE; border-color: var(--ojk-line3); }
.ojk-reset svg { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ojk-reset-short { display: none; }
/* Schmales Bild (unter 700 px, z. B. Fenster um 1024–1150 px und Handy): kurzer Knopf „Zurücksetzen“ dicht in der Ecke.
   Gemessen an allen 160 Bildebenen (30.10.): frei ist unten links die Fläche links der Linie x = Bildzeile − 50 %,
   ab 92 % Bildhöhe die ganze Zeile – der lange Knopf passt dort erst ab ca. 690 px Bildbreite. */
@container (max-width: 699px) {
	.ojk-root .ojk-reset,
	.ojk-root .ojk-reset:hover { left: 6px; bottom: calc(6px + var(--ojk-lift, 0px)); min-height: 32px; padding: 0 10px 0 8px; gap: 5px; font-size: 13px; }
	.ojk-reset svg { width: 14px; height: 14px; }
	.ojk-reset-long { display: none; }
	.ojk-reset-short { display: inline; }
}

/* Hinweis nach dem Zurücksetzen, unten mittig, mit „Rückgängig“ */
.ojk-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 100002;
	display: flex;
	align-items: center;
	gap: 16px;
	width: max-content;
	max-width: calc(100vw - 32px);
	padding: 8px 8px 8px 18px;
	border-radius: 10px;
	background: var(--ojk-ink);
	color: #FFFFFF;
	font-size: 14px;
	line-height: 1.3;
	box-shadow: 0 10px 28px rgba(35, 31, 27, .25);
	transform: translateX(-50%);
	animation: ojk-toast-in .2s ease-out;
}
.ojk-toast[hidden] { display: none; }
@keyframes ojk-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
.ojk-root .ojk-undo,
.ojk-root .ojk-undo:hover {
	min-height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 7px;
	background: rgba(255, 255, 255, .14);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}
.ojk-root .ojk-undo:hover { background: rgba(255, 255, 255, .26); }
.ojk-root .ojk-undo:focus-visible { outline-color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .ojk-toast { animation: none; } }

.ojk-root .ojk-usp { margin: 0; padding: 0 4px; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ojk-body); }
.ojk-root .ojk-usp li { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ojk-root .ojk-usp li::before { content: none; }
.ojk-usp svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--ojk-label); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ojk-notices:empty { display: none; }
.ojk-noscript { padding: 16px; background: var(--ojk-soft); border-radius: var(--ojk-r2); }

@media (prefers-reduced-motion: reduce) {
	.ojk-acc-body,
	.ojk-acc-inner,
	.ojk-acc-chev { transition: none; }
}

/* ---------- Produktseite ---------- */

.ojk-product-wrap.site-content { padding-left: 16px; padding-right: 16px; }
/* Shop-Kopf auf dieser Seite: beim Runterscrollen weg, beim Hochscrollen wieder da (Klasse setzt das JS) */
body.ojk-produktseite.ojk-hdr-anim .whb-header.whb-sticked .whb-main-header { transition: transform .25s ease; }
body.ojk-produktseite.ojk-hdr-hidden .whb-header.whb-sticked .whb-main-header { transform: translateY(-110%); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
	body.ojk-produktseite.ojk-hdr-anim .whb-header.whb-sticked .whb-main-header { transition: none; }
}
.ojk-breadcrumb { max-width: 1240px; margin: 14px auto 0; font-family: Inter, system-ui, sans-serif; font-size: 13px; color: #6A6158; }
.ojk-breadcrumb .woocommerce-breadcrumb { margin: 0; font-size: 13px; }
.ojk-product-more { max-width: 1240px; margin: 0 auto 64px; }
.ojk-product-more:empty { display: none; }

/* ---------- Desktop: breiter, Bild links groß und mitlaufend (sticky), Auswahl rechts ---------- */

@media (min-width: 1024px) {
	.ojk-root,
	.ojk-product-wrap > .ojk-breadcrumb,
	.ojk-product-wrap > .ojk-test-banner {
		/* Breite unabhängig vom Theme-Container: bis 1240 px wie bisher, auf großen Bildschirmen bis 1600 px
		   (dann je Seite mind. 110 px frei, z. B. für das Trusted-Shops-Siegel links) */
		--ojk-w: min(1600px, max(min(1240px, calc(100vw - 48px)), calc(100vw - 220px)));
		width: var(--ojk-w);
		max-width: none;
		position: relative;
		left: 50%;
		margin-left: calc(var(--ojk-w) / -2);
		margin-right: 0;
	}
	.ojk-grid { flex-wrap: nowrap; gap: 40px; }
	.ojk-left {
		flex: 1 1 0;
		min-width: 0;
		position: sticky;
		top: calc(var(--ojk-top, 0px) + 8px);
		transition: top .25s ease;
		gap: 8px;
		/* Bildschirmhöhe minus Admin-Leiste, Reiter-Leiste und Abstände */
		--ojk-avail: calc(100vh - var(--ojk-base, 0px) - var(--ojk-vbar, 44px) - 32px);
	}
	.ojk-right { flex: 0 0 clamp(400px, 28%, 460px); min-width: 0; }
	.ojk-root .ojk-h1 { font-size: 30px; }
	@supports not (width: 1cqw) {
		.ojk-stage { width: min(100%, calc(var(--ojk-avail) / 0.91)); margin: 0 auto; }
	}
	.ojk-plan svg { max-height: calc(var(--ojk-avail) - 70px); }
	.ojk-photo-main { aspect-ratio: 100 / 91; max-height: calc(var(--ojk-avail) - 74px); }
	@supports (width: 1cqw) {
		.ojk-left { container-type: inline-size; }
		/* Draufsicht und Fotos genauso hoch wie die Bildfläche */
		.ojk-root #ojk-panel-plan,
		.ojk-root #ojk-panel-fotos {
			display: flex;
			flex-direction: column;
			height: min(var(--ojk-avail), calc(100cqw * 0.93));
		}
		.ojk-root #ojk-panel-plan .ojk-plan { flex: 1 1 auto; min-height: 0; display: flex; }
		.ojk-root #ojk-panel-plan .ojk-plan svg { height: 100%; max-height: none; }
		.ojk-root #ojk-panel-fotos .ojk-photo-main { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; max-height: none; }
		.ojk-root #ojk-panel-fotos .ojk-photo-thumbs { flex: 0 0 auto; }
	}
}

/* Vollbild: der ganze Konfigurator füllt den Bildschirm, rechts wird innerhalb gescrollt */
.ojk-root.is-full {
	position: fixed;
	inset: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 16px 24px 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #FFFFFF;
	z-index: 100000;
	--ojk-w: 100%;
}
.ojk-root.is-full::backdrop { background: #FFFFFF; }
html.ojk-noscroll,
html.ojk-noscroll body { overflow: hidden !important; }
/* im Vollbild: oben 16 px Innenabstand + 8 px, unten 24 px frei */
.ojk-root.is-full .ojk-left { --ojk-avail: calc(100vh - var(--ojk-vbar, 44px) - 56px); }

/* ---------- Tablet und Handy: gestapelt, Ansicht bleibt oben stehen ---------- */

@media (max-width: 1023px) {
	.ojk-grid { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 24px; }
	.ojk-left, .ojk-right { display: contents; }
	.ojk-o1 { order: 1; } .ojk-o2 { order: 2; margin-bottom: -12px; } .ojk-o3 { order: 3; } .ojk-o4 { order: 4; } .ojk-o5 { order: 5; }
	/* v0.9.4: Kurzbeschreibung nach dem Bild (gleiche Stufe wie das Bild, steht im HTML danach), Meta ganz unten.
	   Vorher hatte der Meta-Block keine Stufe (= 0) und stand auf dem Handy über dem Titel. */
	.ojk-o3b { order: 3; } .ojk-o6 { order: 6; }

	.ojk-panel.ojk-o3:not(#ojk-panel-fotos) {
		position: sticky;
		top: var(--ojk-top, 0px);
		z-index: 30;
		background: #FFFFFF;
		padding: 6px 0 8px;
		box-shadow: 0 10px 12px -12px rgba(35, 31, 27, .35);
		transition: top .25s ease;
		--ojk-avail: 40vh;
	}
	@supports not (width: 1cqw) {
		.ojk-panel .ojk-stage { width: min(100%, calc(40vh / 0.91)); margin: 0 auto; }
	}
	.ojk-root .ojk-full,
	.ojk-panel.ojk-o3 .ojk-legend { display: none; }
	.ojk-root .ojk-reset,
	.ojk-root .ojk-reset:hover { left: 6px; bottom: 6px; min-height: 32px; padding: 0 10px 0 8px; gap: 5px; font-size: 13px; }
	.ojk-reset svg { width: 14px; height: 14px; }
	.ojk-reset-long { display: none; }
	.ojk-reset-short { display: inline; }
	.ojk-viewbar { grid-template-columns: minmax(0, 1fr); }
	.ojk-tabs { grid-column: 1; }
	.ojk-plan { padding: 6px; }
	.ojk-plan svg { max-height: 40vh; }
}
@media (max-width: 640px) {
	.ojk-root { padding-top: 12px; }
	/* drei Reiter in einer Zeile auf dem Handy */
	.ojk-tabs { gap: 6px; }
	.ojk-root .ojk-tab { padding: 0 12px; }
	.ojk-root .ojk-h1 { font-size: 28px; }
	.ojk-config { padding: 0 16px; }
	.ojk-foot { margin: 0 -16px; padding: 14px 16px 16px; }
	.ojk-total { font-size: 26px; }
	.ojk-form { max-width: none; }
}
@media (max-width: 480px) {
	.ojk-tiles--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Draufsicht mit Maßen klein unten rechts im Bild (v0.7.0, Wunsch Bünyamin 04.11.2026) ----------
   Breite setzt das JS (größte Karte, die den Teppich nicht berührt). Passt sie nicht, steht sie in Schritt „Größe“. */
.ojk-root .ojk-mini {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 1;
	width: auto;
	padding: 8px;
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--ojk-line);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(35, 31, 27, .08);
	font-family: Inter, system-ui, sans-serif;
	color: var(--ojk-ink);
	pointer-events: none;
}
.ojk-mini svg { display: block; max-width: none; font-family: Inter, system-ui, sans-serif; overflow: visible; }
.ojk-mini-cap { margin: 0 0 4px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; color: var(--ojk-muted); }
.ojk-root .ojk-mini-note { margin: 4px 0 0; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--ojk-body); }
.ojk-mini-inline { display: none; }
.ojk-root.ojk-mini-below .ojk-stage .ojk-mini { display: none; }
.ojk-root.ojk-mini-below .ojk-mini-inline { display: block; }
.ojk-root.ojk-mini-below .ojk-mini-inline:empty { display: none; }
.ojk-root .ojk-mini-inline .ojk-mini { position: static; width: max-content; max-width: 100%; margin: 0 auto; box-shadow: none; background: #FFFFFF; }
.ojk-mini-inline .ojk-mini svg { max-width: 100%; height: auto; }

/* Schritt „Größe“: zwei Reihen deutlich als zwei Felder (Nummer → Häkchen, Symbol der Seite, „noch wählen“) */
.ojk-root .ojk-size-hint { margin-top: -4px; }
.ojk-field-head { align-items: center; }
.ojk-field-no {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	background: #FFFFFF;
	border: 1px solid var(--ojk-line3);
	color: var(--ojk-body);
}
.ojk-field-no svg { fill: none; stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ojk-field.is-done .ojk-field-no { background: var(--ojk-accent); border-color: var(--ojk-accent); }
.ojk-field.is-next .ojk-field-no { background: var(--ojk-ink); border-color: var(--ojk-ink); color: #FFFFFF; }
/* als Nächstes zu wählen: Kacheln mit zart blauem Rand – zeigt ohne Text, wo es weitergeht */
.ojk-root .ojk-field.is-next .ojk-tile:not([aria-pressed="true"]) { border-color: #A9C1F3; }
.ojk-root .ojk-dim { font-size: 14px; font-weight: 600; color: var(--ojk-ink); }
.ojk-field-ic { display: block; flex-shrink: 0; margin-right: -2px; }
.ojk-field-todo { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ojk-accent); }

/* Schritt 1 wie im bisherigen Konfigurator: Überschrift je Form, Kacheln mit den alten Symbolbildern (v0.7.6) */
.ojk-group-head--form { color: var(--ojk-label); }
.ojk-root .ojk-tile--form { padding: 8px 6px 10px; gap: 4px; }
.ojk-tile-form { display: block; width: 64px; height: 64px; object-fit: contain; margin: 0 auto; mix-blend-mode: multiply; }

/* Eckig rechts: Symbol des alten Konfigurators gespiegelt (v0.7.9) */
.ojk-tile-form.is-mirror { transform: scaleX(-1); }

/* ---------- Eigenes Maß / Sondergröße (v0.8.2, Wunsch Bünyamin 04.11.2026) ----------
   Kachel über die ganze Breite unter den Standardgrößen (gestrichelt = „frei wählbar“), darunter Länge und Tiefe in cm. */
.ojk-root .ojk-tile--cust {
	grid-column: 1 / -1;
	flex-direction: row;
	justify-content: flex-start;
	gap: 8px;
	min-height: 44px;
	padding: 10px 12px;
	border-style: dashed;
	text-align: left;
}
.ojk-root .ojk-tile--cust[aria-pressed="true"],
.ojk-root .ojk-tile--cust[aria-pressed="true"]:hover { border-style: solid; }
.ojk-tile--cust .ojk-tile-sub { margin-left: auto; text-align: right; }
.ojk-cust-ic { display: block; flex-shrink: 0; fill: none; stroke: var(--ojk-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ojk-cust {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: #FFFFFF;
	border: 1px solid var(--ojk-line2);
	border-radius: 10px;
}
.ojk-cin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.ojk-cin { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ojk-root .ojk-cin-lab { display: block; margin: 0; padding: 0; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--ojk-body); }
.ojk-cin-box { position: relative; display: block; }
.ojk-root .ojk-cin input[type="text"] {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	max-width: none;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 40px 0 12px;
	font: inherit;
	font-size: 16px; /* 16 px: iPhone zoomt beim Tippen nicht hinein */
	font-weight: 600;
	line-height: 44px;
	letter-spacing: normal;
	color: var(--ojk-ink);
	background: #FFFFFF;
	border: 1px solid var(--ojk-line3);
	border-radius: 8px;
	box-shadow: none;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.ojk-root .ojk-cin input[type="text"]:focus { border-color: var(--ojk-accent); box-shadow: 0 0 0 1px var(--ojk-accent); }
.ojk-cin-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; line-height: 1; color: var(--ojk-muted); pointer-events: none; }
.ojk-cin-hint { font-size: 12px; line-height: 1.2; color: var(--ojk-muted); }
.ojk-root .ojk-cin.is-bad input[type="text"] { border-color: var(--ojk-warn); box-shadow: 0 0 0 1px var(--ojk-warn); }
.ojk-cin.is-bad .ojk-cin-hint { color: var(--ojk-warn); }
.ojk-root .ojk-cin-msg { font-size: 13px; line-height: 1.4; color: var(--ojk-body); }
.ojk-root .ojk-cin-msg:empty,
.ojk-root .ojk-s:empty { display: none; }
.ojk-cin-err { color: var(--ojk-warn); font-weight: 600; }

/* ---------- v0.9.0: Titelbild als Start-Ansicht ----------
   Bis zur ersten Wahl zeigt die Fläche das ganze Titelbild (quadratisch, --ojk-band = 1), ohne Draufsicht-Karte. */
.ojk-stage.is-cover .ojk-mini { display: none; }
.ojk-stage.is-cover .ojk-layer--base { object-position: 50% 50%; }

/* ---------- v0.9.0: Fotostrecke (alle Produktfotos groß, sichtbar, dazu das Video) ---------- */
.ojk-gallery { max-width: 1240px; margin: 48px auto 56px; padding: 0 16px; }
.ojk-gallery-h { font-size: 24px; line-height: 1.25; color: var(--ojk-ink); margin: 0 0 20px; }
.ojk-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ojk-gallery-item { margin: 0; background: #FFFFFF; border: 1px solid var(--ojk-line); border-radius: var(--ojk-r2); overflow: hidden; aspect-ratio: 1 / 1; }
.ojk-gallery-item img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; margin: 0; }
.ojk-gallery-video { background: #000000; display: flex; align-items: center; }
.ojk-gallery-video iframe,
.ojk-gallery-video .cmplz-placeholder-element,
.ojk-gallery-video > div { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
@media (max-width: 640px) {
	.ojk-gallery { margin: 32px auto 40px; }
	.ojk-gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.ojk-gallery-h { font-size: 20px; }
}

/* v0.9.1: Der Konfigurator ersetzt bei WoodMart den Block „Galerie + Kaufbox“. Der leere Block selbst wird ausgeblendet –
   nur auf der Konfigurator-Produktseite (Body-Klasse ojk-produktseite). Kurzbeschreibung/Meta: Design vom Theme. */
body.ojk-produktseite .product-image-summary-wrap { display: none; }
.ojk-root .ojk-wc-info { padding: 0 4px; font-size: 14px; }
/* v0.9.4: Abstand regelt die Spalte (gap), nicht der Rand der WooCommerce-Kurzbeschreibung */
.ojk-root .ojk-excerpt .woocommerce-product-details__short-description { margin: 0; }
.ojk-root .ojk-wc-info:empty { display: none; }

/* ---------- v0.9.5: Galerie – „Ansicht“ steckt in der Bildreihe (Wunsch Bünyamin 06.11.2026) ----------
   Eine Bildfläche für Fotos und Konfiguration, darunter die Bildreihe (1. „Ansicht“, dann alle Fotos).
   Die Fläche ist genau so breit wie das Bild: keine weißen Streifen links/rechts („aus einem Guss“). */
@supports (width: 1cqw) {
	.ojk-root .ojk-stage {
		--ojk-w: min(100cqw, calc(var(--ojk-avail, 200vh) / var(--ojk-band, 0.932)));
		width: var(--ojk-w);
		margin: 0 auto;
	}
	.ojk-root .ojk-frame { left: calc((var(--ojk-w) - var(--ojk-s)) / 2); }
}
@media (min-width: 1024px) {
	.ojk-left { gap: 0; }
}

/* Foto groß: füllt die ganze Fläche (Fotos sind quadratisch – oben/unten werden je ca. 3 % abgeschnitten) */
.ojk-root .ojk-gal-photo { position: absolute; inset: 0; z-index: 3; background: var(--ojk-soft); }
.ojk-root .ojk-gal-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: 50% 50%; border: 0; border-radius: 0; }
.ojk-root .ojk-stage.is-photo .ojk-reset,
.ojk-root .ojk-stage.is-photo .ojk-mini { display: none; }
.ojk-root .ojk-stage.is-photo::after { display: none; }

/* Pfeile links/rechts im Bild (Desktop beim Darüberfahren, Touch immer) */
.ojk-root .ojk-gal-nav,
.ojk-root .ojk-gal-nav:hover {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--ojk-ink);
	box-shadow: 0 2px 10px rgba(35, 31, 27, .16);
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity .2s ease, background-color .15s;
}
.ojk-root .ojk-gal-nav:hover { background: #FFFFFF; }
.ojk-root .ojk-gal-prev { left: 12px; }
.ojk-root .ojk-gal-next { right: 12px; }
.ojk-root .ojk-stage:hover .ojk-gal-nav,
.ojk-root .ojk-gal-nav:focus-visible { opacity: 1; }
.ojk-gal-nav svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none) {
	.ojk-root .ojk-gal-nav,
	.ojk-root .ojk-gal-nav:hover { opacity: 1; width: 38px; height: 38px; }
	.ojk-root .ojk-gal-prev { left: 8px; }
	.ojk-root .ojk-gal-next { right: 8px; }
}

/* Vollbild: runder Knopf oben rechts im Bild (vorher Leiste über dem Bild) */
.ojk-root .ojk-full,
.ojk-root .ojk-full:hover {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--ojk-ink);
	box-shadow: 0 2px 10px rgba(35, 31, 27, .16);
	grid-column: auto;
	justify-self: auto;
}
.ojk-root .ojk-full[hidden] { display: none; }

/* Bildreihe: so breit wie das Bild, größere Vorschaubilder (96 px), waagerecht scrollbar */
.ojk-gal-thumbs {
	display: flex;
	gap: 8px;
	width: min(100%, calc(var(--ojk-avail, 200vh) / 0.932));
	margin: 10px auto 0;
	padding: 2px 2px 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}
.ojk-root .ojk-gal-thumb,
.ojk-root .ojk-gal-thumb[aria-pressed],
.ojk-root .ojk-gal-thumb:hover {
	position: relative;
	display: block;
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--ojk-line2);
	border-radius: 10px;
	background: var(--ojk-soft);
	scroll-snap-align: start;
	text-decoration: none;
}
.ojk-root .ojk-gal-thumb:hover { border-color: var(--ojk-line3); }
.ojk-root .ojk-gal-thumb::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 2px solid transparent; border-radius: inherit; pointer-events: none; }
.ojk-root .ojk-gal-thumb.is-on::after { border-color: var(--ojk-accent); }
.ojk-root .ojk-gal-thumb img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border: 0; border-radius: 0; }

/* „Ansicht“: zeigt die aktuelle Konfiguration; vor der ersten Wahl ein Symbol */
.ojk-gal-mini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 18px; background: #FFFFFF; color: var(--ojk-label); }
.ojk-root .ojk-gal-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ojk-gal-mini.is-mirror img { transform: scaleX(-1); }
.ojk-gal-mini svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ojk-gal-mini:not(.is-empty) svg { display: none; }
.ojk-gal-lab {
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 6px;
	z-index: 1;
	padding: 2px 6px;
	border-radius: 999px;
	background: rgba(35, 31, 27, .82);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

@media (max-width: 1023px) {
	.ojk-root .ojk-gal-thumbs { margin-top: -14px; }
}
@media (max-width: 640px) {
	.ojk-root .ojk-gal-thumb,
	.ojk-root .ojk-gal-thumb[aria-pressed],
	.ojk-root .ojk-gal-thumb:hover { flex-basis: 76px; width: 76px; height: 76px; }
	.ojk-gal-lab { font-size: 10px; left: 4px; right: 4px; bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
	.ojk-root .ojk-gal-nav { transition: none; }
}

/* ---------- v0.9.6: Bildreihe als Leiste mit Vollbild, dezenter Zoom (Wunsch Bünyamin 06.11.2026) ----------
   Leiste = Bildreihe (scrollt) + Vollbild-Knopf rechts daneben. Der Knopf lag vorher im Bild über dem Text der Formbilder.
   Breite wie die Bildfläche: --ojk-band setzt das Skript am Konfigurator (Zoom = kleinerer Ausschnitt = breitere Fläche). */
.ojk-gal-bar {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: min(100%, calc(var(--ojk-avail, 200vh) / var(--ojk-band, 0.932)));
	margin: 10px auto 0;
}
.ojk-root .ojk-gal-bar .ojk-gal-thumbs { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; }
.ojk-root .ojk-gal-bar .ojk-full,
.ojk-root .ojk-gal-bar .ojk-full:hover {
	position: static;
	flex: 0 0 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 72px;
	height: 96px;
	min-height: 0;
	margin: 2px 0 0;
	padding: 0 4px;
	border: 1px solid var(--ojk-line2);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--ojk-ink);
	box-shadow: none;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	white-space: normal;
}
.ojk-root .ojk-gal-bar .ojk-full:hover { border-color: var(--ojk-line3); background: var(--ojk-soft); }
.ojk-root .ojk-gal-bar .ojk-full[hidden] { display: none; }
.ojk-full-lab { display: block; }
@media (max-width: 1023px) {
	/* Handy/Tablet: Vollbild gibt es dort nicht (auch nicht im Bild – die v0.9.5-Regel hatte das Ausblenden überschrieben) */
	.ojk-root .ojk-full,
	.ojk-root .ojk-full:hover,
	.ojk-root .ojk-gal-bar .ojk-full,
	.ojk-root .ojk-gal-bar .ojk-full:hover { display: none; }
	/* gleiche Höhenvorgabe wie die Bildfläche oben (40vh) – sonst ist die Leiste einige Pixel breiter als das Bild */
	.ojk-root .ojk-gal-bar { margin-top: -14px; --ojk-avail: 40vh; }
}
@media (max-width: 640px) {
	.ojk-root .ojk-gal-bar .ojk-full { height: 76px; }
}

/* Zoom: Bild, Fläche und Leiste gleiten bei einer Auswahl sanft in die neue Größe (Klasse setzt das Skript für 0,45 s) */
.ojk-root.is-zooming .ojk-stage,
.ojk-root.is-zooming .ojk-gal-bar { transition: width .4s ease, height .4s ease; }
.ojk-root.is-zooming .ojk-frame { transition: width .4s ease, height .4s ease, left .4s ease, top .4s ease; }
@media (prefers-reduced-motion: reduce) {
	.ojk-root.is-zooming .ojk-stage,
	.ojk-root.is-zooming .ojk-gal-bar,
	.ojk-root.is-zooming .ojk-frame { transition: none; }
}

/* ---------- v0.9.7: Überschrift über den Schritten (Wunsch Bünyamin 06.11.2026: „damit der Kunde versteht, hier fängt ein Konfigurator an“) ---------- */
.ojk-config-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 0 16px;
	border-bottom: 1px solid var(--ojk-divider);
}
.ojk-config-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ojk-ink);
	color: #FFFFFF;
}
.ojk-config-ico svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ojk-config-txt { min-width: 0; }
.ojk-root .ojk-config-h {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ojk-ink);
}
.ojk-root .ojk-config-sub { margin: 3px 0 0; font-size: 14px; line-height: 1.4; color: var(--ojk-body); }
@media (max-width: 640px) {
	.ojk-config-head { padding: 16px 0 14px; gap: 10px; }
	.ojk-config-ico { width: 36px; height: 36px; }
	.ojk-root .ojk-config-h { font-size: 18px; }
}

/* ---------- v0.9.8: Video in der Bildreihe, lange Produktnamen (Livegang 19378, Bünyamin 06.11.2026) ---------- */
/* Video groß: Vorschaubild + „Video abspielen“; YouTube lädt erst nach dem Klick (2-Klick-Lösung) */
.ojk-root .ojk-gal-video { position: absolute; inset: 0; z-index: 3; background: #000000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ojk-root .ojk-gal-video[hidden] { display: none; }
.ojk-root .ojk-gal-video .ojk-vid-poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; opacity: .55; border: 0; border-radius: 0; }
.ojk-vid-start { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 420px; padding: 0 20px; text-align: center; }
.ojk-root .ojk-vid-play,
.ojk-root .ojk-vid-play:hover {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 22px 0 18px;
	border: 0;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--ojk-ink);
	font-size: 16px;
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.ojk-root .ojk-vid-play:hover { background: var(--ojk-soft); }
.ojk-vid-play svg { fill: currentColor; }
.ojk-root .ojk-vid-note { margin: 0; font-size: 13px; line-height: 1.4; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.ojk-root .ojk-gal-video iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; }
.ojk-root .ojk-gal-video.is-playing .ojk-vid-start,
.ojk-root .ojk-gal-video.is-playing .ojk-vid-poster { display: none; }
.ojk-root .ojk-stage.is-video .ojk-reset,
.ojk-root .ojk-stage.is-video .ojk-mini { display: none; }
.ojk-root .ojk-stage.is-video::after { display: none; }
/* Video-Vorschau in der Reihe */
.ojk-root .ojk-gal-thumb--video img { opacity: .85; }
.ojk-gal-play { position: absolute; left: 50%; top: 40%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ojk-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.ojk-gal-play svg { fill: currentColor; margin-left: 2px; }

/* Lange Produktnamen (19378: 122 Zeichen) kleiner, damit die Überschrift nicht 5 Zeilen hoch wird – Name bleibt gleich */
.ojk-root .ojk-h1.ojk-h1--lang { font-size: 24px; line-height: 1.25; }
@media (max-width: 640px) {
	.ojk-root .ojk-h1.ojk-h1--lang { font-size: 21px; }
}

/* ---------- v0.9.10 (Wunsch Bünyamin 06.11.2026): Handy/Tablet – weniger scrollen ----------
   Gilt nur, wenn die Seite gestapelt ist (bis 1023 px). Desktop bleibt unverändert.
   1. Kurzbeschreibung (Lieferzeit + Merkmale) unter den Konfigurator statt zwischen Bild und Konfigurator –
      der Kunde kommt nach dem Bild sofort zu Schritt 1. Gleiche Stufe wie die Vorteile-Liste, steht im HTML davor.
   2. Miniatur „Konfigurator“ ausblenden: Kunden hielten sie für den Knopf zum Konfigurieren. Die Konfigurator-Ansicht
      bleibt erreichbar: jede Auswahl springt dorthin, außerdem Pfeile und Wischen im Bild. */
@media (max-width: 1023px) {
	.ojk-o3b { order: 5; }
	.ojk-root .ojk-gal-thumb.ojk-gal-thumb--ansicht,
	.ojk-root .ojk-gal-thumb.ojk-gal-thumb--ansicht[aria-pressed],
	.ojk-root .ojk-gal-thumb.ojk-gal-thumb--ansicht:hover { display: none; }
}

/* ---------- v0.9.11 (Wunsch Bünyamin 07.11.2026): Schritt-Köpfe kräftiger ----------
   Nur die Kopfzeilen der Schritte. Kacheln, Sterne und übrige Texte bleiben wie bisher.
   - „Schritt x von y“ dunkler: #564E46 (7,3 : 1 auf Beige statt 5,4 : 1)
   - erledigter Pflichtschritt (Klasse is-done, gesetzt in renderSteps): blauer Kreis mit weißem Haken statt Nummer
   - gewählter Wert rechts im erledigten Schritt dunkel und halbfett */
.ojk-root .ojk-acc-step { color: #564E46; }
.ojk-root .ojk-acc.is-done:not(.is-open) .ojk-acc-num {
	background: var(--ojk-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
	border-color: var(--ojk-accent);
	color: transparent;
}
.ojk-root .ojk-acc.is-done .ojk-acc-val { color: var(--ojk-ink); font-weight: 500; }

/* ---------- v0.12.2 (v0.13.2 korrigiert): Breite Bildschirme – Bildreihe senkrecht links neben dem Bild (Wunsch Bünyamin 07.11.2026) ----------
   Vorher war das Bild nur so breit wie hoch (Bildschirmhöhe) und links/rechts davon blieb weiße Fläche ungenutzt.
   Jetzt: Bildreihe als Spalte links → das Bild bekommt die volle Höhe (die Leiste darunter entfällt), die Auswahlkarte
   rechts bekommt den Rest der Breite (bis 620 px). Gilt für Eckschreibtisch und Standard-Schreibtische, erst ab 1280 px. */
@media (min-width: 1280px) {
	/* v0.13.2: Raster als Bezugsgröße (cqw) – die Bildbreite richtet sich nach der echten Breite des Konfigurators */
	.ojk-root .ojk-grid { justify-content: center; container-type: inline-size; }
	.ojk-root .ojk-left {
		flex: 0 0 auto;
		container-type: normal;
		flex-direction: row;
		align-items: flex-start;
		gap: 12px;
		--ojk-avail: calc(100vh - var(--ojk-base, 0px) - 32px);
	}
	.ojk-root.is-full .ojk-left { --ojk-avail: calc(100vh - 56px); }
	/* Bildbreite: so groß wie die Höhe erlaubt, aber rechts bleiben mindestens 460 px für die Auswahl (96 Bildreihe + 12 + 40 Abstand + 460) */
	.ojk-root #ojk-panel-foto {
		flex: 0 0 auto;
		width: min(calc(var(--ojk-avail) / var(--ojk-band, 0.932)), calc(100cqw - 608px));
	}
	.ojk-root .ojk-gal-bar {
		order: -1;
		flex: 0 0 96px;
		width: 96px;
		flex-direction: column;
		margin: 0;
		max-height: var(--ojk-avail);
	}
	.ojk-root .ojk-gal-bar .ojk-gal-thumbs {
		flex-direction: column;
		flex-wrap: nowrap;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: calc(var(--ojk-avail) - 84px);
		padding: 0;
		scrollbar-width: thin;
	}
	.ojk-root .ojk-gal-bar .ojk-gal-thumb { flex: 0 0 auto; width: 96px; height: 96px; }
	.ojk-root .ojk-gal-bar .ojk-full,
	.ojk-root .ojk-gal-bar .ojk-full:hover { flex: 0 0 auto; width: 96px; height: 72px; }
	.ojk-root .ojk-right { flex: 1 1 460px; max-width: 620px; }
}