/**
 * KLIO Vitrinen-Konfigurator — Frontend-Gestaltung.
 *
 * Bewusst zurückhaltend und ohne Rahmenwerk, damit sich der Konfigurator in
 * das Theme einfügt. Alle Klassen sind mit klio-vk- vorangestellt, damit sie
 * nicht mit Savoy oder WooCommerce kollidieren. Schriftart und Grundfarbe
 * erbt der Konfigurator vom Theme.
 */

.klio-vk {
	--klio-ink: #282828;
	--klio-text: #777;
	--klio-still: #a3a3a3;
	--klio-linie: #c9c9c9;
	--klio-linie-hell: #e6e6e6;
	--klio-gold: #dc9814;
	--klio-gold-dunkel: #a87310;
	--klio-buehne: #efefef;
	--klio-buehne-hell: #f7f7f6;
	--klio-buehne-dunkel: #e2e3e1;
	/* Abstand nach oben und unten. Der Konfigurator sass sonst direkt am
	   Theme-Kopf und an der Fusszeile. */
	--klio-aussen-oben: 44px;
	--klio-aussen-unten: 56px;
	/* Abstand der klebenden Bühne zur Fensterkante. Wird beim Start aus der
	   tatsächlichen Höhe des klebenden Theme-Kopfs gerechnet. */
	--klio-sticky-abstand: 24px;
	/* Höhe der klebenden Grafik auf schmalen Geräten und die Höhe, auf der
	   der Preis darunter stehen bleibt. Ohne das rutschte er beim Scrollen
	   unter die Grafik, und man stellte die Vitrine ein, ohne zu sehen, was
	   sie kostet.                                  [FESTGELEGT CF 10.11.2026] */
	--klio-buehne-h: min(46vh, 380px);
	--klio-preis-top: calc( var(--klio-sticky-abstand, 24px) + var(--klio-buehne-h) );
	--klio-regel: #2f6076;
	--klio-regel-bg: #eef4f7;
	--klio-warn: #9c4a22;
	--klio-warn-bg: #fbf1ec;
	color: var(--klio-text);
	line-height: 1.6;
	container-type: inline-size;
	container-name: klio;
	padding-block: var(--klio-aussen-oben) var(--klio-aussen-unten);
}

.klio-vk *,
.klio-vk *::before,
.klio-vk *::after { box-sizing: border-box; }

/* Mehrere Bausteine setzen display:flex oder display:grid. Das schlägt die
   eingebaute Regel für das hidden-Attribut — der Erfolgsbildschirm stand
   dadurch von Anfang an sichtbar unter dem Formular, und das Formular wäre
   nach dem Absenden stehen geblieben. */
.klio-vk [hidden] { display: none !important; }

.klio-vk-titel { margin: 0 0 22px; }
.klio-vk-lade,
.klio-vk-hinweis {
	padding: 40px 0;
	color: var(--klio-still);
	text-align: center;
}

/* ---------------------------------------------------------- Aufteilung */
.klio-vk-raster {
	display: grid;
	/* Bedienspalte darf schrumpfen, damit das zweispaltige Layout auch in
	   schmalen Theme-Spalten erhalten bleibt. */
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	gap: 36px;
	align-items: start;
}
/* Rückfallebene für Browser ohne Container-Abfragen. */
@media (max-width: 800px) {
	.klio-vk-raster { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------------------------------------------------------- Bühne */
/* Die Grafik bleibt beim Scrollen stehen — nebeneinander in voller Höhe,
   untereinander als flacher Streifen über den Bedienelementen.
   Die Reihenfolge der Blöcke ist wichtig: Umbruchregeln müssen NACH der
   Grundregel stehen, sonst gewinnt die Grundregel.
   Falls die Grafik trotzdem mitscrollt, hat ein Element des Themes oberhalb
   des Konfigurators ein overflow gesetzt; das hebelt sticky aus und lässt
   sich nur dort beheben. */
.klio-vk-buehne {
	position: sticky;
	top: var(--klio-sticky-abstand, 24px);
	align-self: start;
	z-index: 2;
}

.klio-vk-viewport {
	position: relative;
	/* Licht von oben, Standfläche unten, dazu eine leichte Vignette. Kostet
	   nichts — das rechnet der Browser, nicht die Grafikkarte. */
	background:
		radial-gradient( 120% 90% at 50% 8%, rgba( 255, 255, 255, 0.9 ) 0%, rgba( 255, 255, 255, 0 ) 60% ),
		radial-gradient( 140% 70% at 50% 118%, var(--klio-buehne-dunkel) 0%, rgba( 226, 227, 225, 0 ) 62% ),
		linear-gradient( 180deg, var(--klio-buehne-hell) 0%, var(--klio-buehne) 58%, var(--klio-buehne-dunkel) 100% );
	height: min(72vh, 620px);
	overflow: hidden;
}

/* Eine Spalte: Grafik bleibt oben stehen, aber flacher.

   Die Höhe steht in einer eigenen Variable, weil der Preis sie braucht: er
   klebt auf dem Telefon direkt unter der Grafik und muss wissen, wo die
   aufhört. */
@container klio (max-width: 720px) {
	.klio-vk-raster { grid-template-columns: 1fr; gap: 24px; }
	.klio-vk-viewport { height: var(--klio-buehne-h); max-width: 100%; }
	.klio-vk-fuss { display: none; }
	.klio-vk-preis {
		position: sticky;
		top: var(--klio-preis-top);
		z-index: 1;
		margin: 0;
		padding: 12px 0 10px;
		background: #fff;
		border-bottom: 1px solid var(--klio-linie-hell);
	}
}
@media (max-width: 800px) {
	.klio-vk-viewport { height: var(--klio-buehne-h); max-width: 100%; }
	.klio-vk-mitvideo .klio-vk-viewport { height: var(--klio-buehne-h); }
	.klio-vk-fuss { display: none; }
	.klio-vk-preis {
		position: sticky;
		top: var(--klio-preis-top);
		z-index: 1;
		margin: 0;
		padding: 12px 0 10px;
		background: #fff;
		border-bottom: 1px solid var(--klio-linie-hell);
	}
}
.klio-vk-viewport canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	cursor: grab;
}
.klio-vk-viewport canvas:active { cursor: grabbing; }

.klio-vk-masse {
	position: absolute;
	top: 16px; left: 16px;
	display: flex; flex-direction: column; gap: 5px;
	pointer-events: none;
}
.klio-vk-mc {
	background: #fff;
	padding: 4px 9px;
	font-size: 12px;
	color: var(--klio-text);
	width: max-content;
}
.klio-vk-mc b { color: var(--klio-ink); font-weight: 500; }

/*
 * Medienbereich, fest unter der Grafik: Montagevideo und Fotos.
 *
 * Die Bühne klebt beim Scrollen (position: sticky). Grafik und Medien müssen
 * deshalb zusammen in die Fensterhöhe passen — sonst klebt eine Spalte, deren
 * unteres Ende man nie zu sehen bekommt. Liegt etwas vor, wird die Grafik
 * darum kleiner: das ist der Preis dafür, beides gleichzeitig zu zeigen.
 */
/*
 * Zwei Spalten: der Film links, die Fotos rechts daneben. Unter dem Video
 * gestapelt blieb rechts die halbe Bühnenbreite leer, und die Miniaturen
 * lagen so klein da, dass man nicht erkannte, was drauf ist.
 *
 * Die linke Spalte ist bei 560 px gedeckelt — nicht die Höhe: eine Höhenkappe
 * bei voller Breite lässt das Bild in schwarzen Balken schwimmen, weil das
 * Seitenverhältnis dann nicht mehr zur Fläche passt.
 */
.klio-vk-medien {
	/* Deutlich Luft nach oben: der Medienbereich ist ein eigener Abschnitt und
	   soll nicht an der Bühne kleben. Der Drehhinweis darüber bindet optisch
	   noch an die Grafik, der Abstand muss also größer sein als der zwischen
	   Bühne und Hinweis. */
	margin: 44px 0 0;
	display: grid;
	/* Anteilig statt fest: bei 560 px fürs Video blieben in einer mittelbreiten
	   Themespalte nur noch 44 px je Miniatur übrig — da erkennt niemand mehr,
	   was drauf ist. So schrumpfen beide gemeinsam. Nach oben deckelt
	   max-width, damit das Video auf breiten Bildschirmen nicht aufbläht. */
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	grid-template-areas:
		"buehne minis"
		"unterschrift unterschrift";
	gap: 10px 12px;
	align-items: start;
	max-width: 900px;
}
.klio-vk-mbuehne {
	grid-area: buehne;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #111;
}
.klio-vk-mbuehne video,
.klio-vk-mbuehne img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #111;
}

/* Miniaturen. Das erste Medium ist gewählt, der Rest wartet. */
.klio-vk-minis {
	grid-area: minis;
	display: grid;
	/* Sich selbst einteilend statt fest zweispaltig: in einer schmalen
	   Themespalte werden daraus zwei Reihen à eine Miniatur statt vier
	   Briefmarken. Unter 110 px ist auf einem Montagefoto nichts mehr zu
	   erkennen, das ist die Untergrenze. */
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	align-content: start;
	gap: 8px;
}
.klio-vk-mini {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	cursor: pointer;
	background-color: #d9d9d7;
	background-size: cover;
	background-position: center;
	opacity: 0.55;
	transition: opacity 0.15s;
}
.klio-vk-mini:hover { opacity: 0.85; }
.klio-vk-mini[aria-pressed="true"] {
	opacity: 1;
	outline: 2px solid var(--klio-ink);
	outline-offset: -2px;
}
/* Abspieldreieck auf der Video-Miniatur — sonst ist nicht zu erkennen,
   welche der Miniaturen der Film ist. */
.klio-vk-miniz {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.3 );
}
.klio-vk-miniz::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #fff;
}
/* Beschriftung nur für Vorleseprogramme. */
.klio-vk-minit {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.klio-vk-videoleer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 16 / 9;
	padding: 18px 22px;
	box-sizing: border-box;
	border: 1px dashed var(--klio-linie, #c9c9c4);
	background: repeating-linear-gradient( 135deg,
		transparent, transparent 9px,
		rgba( 0, 0, 0, 0.022 ) 9px, rgba( 0, 0, 0, 0.022 ) 18px );
}
.klio-vk-videoleer-t {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--klio-still);
}
.klio-vk-videoleer-h {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--klio-still);
}
.klio-vk-videoleer-h a { color: inherit; }

.klio-vk-logistik {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--klio-still);
}

.klio-vk-medien figcaption {
	margin-top: 7px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--klio-still);
}
.klio-vk-mitvideo .klio-vk-viewport { height: min(52vh, 440px); }

.klio-vk-fvideo { margin-top: 22px; }
.klio-vk-fvideo video {
	display: block;
	width: 100%;
	max-width: 560px;
	margin-top: 8px;
	background: #111;
}

.klio-vk-ansichten {
	position: absolute;
	top: 16px; right: 16px;
	display: flex; flex-direction: column; gap: 5px; align-items: flex-end;
}
.klio-vk-reihe { display: flex; gap: 1px; background: #fff; }
.klio-vk-vbtn {
	background: #fff;
	border: 0;
	cursor: pointer;
	padding: 7px 12px;
	font: inherit;
	font-size: 11px;
	letter-spacing: 0.11em;
	color: var(--klio-still);
	line-height: 1;
}
.klio-vk-vbtn:hover { color: var(--klio-ink); }
.klio-vk-vbtn[aria-pressed="true"] { color: #fff; background: var(--klio-ink); }
@media (max-width: 620px) {
	.klio-vk-vbtn { padding: 5px 8px; font-size: 10px; letter-spacing: 0.06em; }
}
@container klio (max-width: 560px) {
	/* Zu schmal für nebeneinander — dann stehen die Fotos wieder unter dem
	   Film, aber in drei Spalten statt als Briefmarkenreihe. */
	.klio-vk-medien {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "buehne" "minis" "unterschrift";
		margin-top: 32px;
	}
	/* Unter dem Film teilt sich die volle Breite auf, die Untergrenze
	   von 110 px gilt weiter. */
}
@container klio (max-width: 520px) {
	.klio-vk-vbtn { padding: 5px 8px; font-size: 10px; letter-spacing: 0.06em; }
	.klio-vk-zwei { grid-template-columns: 1fr; }
	.klio-vk-groessen { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

.klio-vk-stand {
	position: absolute;
	left: 18px;
	bottom: 74px;
	margin: 0;
	padding: 6px 10px;
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: var(--klio-ink);
	background: rgba(255, 255, 255, 0.9);
	border-radius: 2px;
	pointer-events: none;
}
@media (max-width: 720px) {
	.klio-vk-stand { left: 10px; bottom: 96px; font-size: 11px; }
}

/* --------------------------------------------------------------- Maßkasten
   Hängt am angeklickten Bauteil und wandert beim Drehen mit. Position setzt
   das Skript; hier steht nur, wie er aussieht. */
.klio-vk-tk {
	position: absolute;
	z-index: 4;
	min-width: 148px;
	padding: 9px 10px 8px;
	background: #fff;
	border: 1px solid var(--klio-linie-hell);
	border-radius: 3px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
	font-size: 12px;
	line-height: 1.35;
}
.klio-vk-tkkopf {
	display: flex; align-items: baseline; gap: 10px;
	margin-bottom: 7px;
}
.klio-vk-tkkopf b {
	flex: 1 1 auto;
	font-weight: 500; font-size: 12.5px; color: var(--klio-ink);
}
.klio-vk-tkzu {
	flex: 0 0 auto;
	padding: 0 2px; border: 0; background: none;
	font-size: 12px; line-height: 1; color: var(--klio-still); cursor: pointer;
}
.klio-vk-tkzu:hover { color: var(--klio-ink); }
.klio-vk-tkfelder { display: flex; flex-direction: column; gap: 5px; }
.klio-vk-tkf { display: flex; align-items: center; gap: 8px; }
.klio-vk-tkf > span {
	flex: 1 1 auto; font-size: 11.5px; color: var(--klio-text);
}
.klio-vk-tkz { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; }
.klio-vk-tkz input {
	width: 4.6em; padding: 3px 5px;
	border: 1px solid var(--klio-linie); border-radius: 2px;
	font: inherit; font-size: 12px; text-align: right;
	font-variant-numeric: tabular-nums; color: var(--klio-ink); background: #fff;
}
.klio-vk-tkz input:focus { outline: 2px solid var(--klio-gold); outline-offset: 0; }
.klio-vk-tkz i { font-style: normal; font-size: 10.5px; color: var(--klio-still); }
.klio-vk-tkprop {
	display: flex; align-items: center; gap: 6px;
	margin-top: 8px; font-size: 11.5px; color: var(--klio-text); cursor: pointer;
}
.klio-vk-tkprop input { margin: 0; accent-color: var(--klio-gold); }
.klio-vk-tkhin {
	margin: 7px 0 0;
	max-width: 190px;
	font-size: 11px; line-height: 1.4; color: var(--klio-still);
}

@media (max-width: 800px) {
	.klio-vk-tk { min-width: 132px; padding: 8px 9px 7px; font-size: 11.5px; }
	.klio-vk-tkhin { max-width: 160px; }
}

.klio-vk-fakten {
	position: absolute;
	left: 16px; right: 16px; bottom: 16px;
	display: flex; gap: 1px; flex-wrap: wrap;
	pointer-events: none;
}
.klio-vk-fk { background: #fff; padding: 7px 12px; display: flex; flex-direction: column; gap: 1px; }
.klio-vk-fkk { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--klio-still); }
.klio-vk-fkv { font-size: 13px; color: var(--klio-ink); }
.klio-vk-heiss { color: var(--klio-warn); }
.klio-vk-mk { display: none; background: #fff; padding: 5px 9px; font-size: 11.5px; color: var(--klio-ink); white-space: nowrap; }
.klio-vk-mkz { color: var(--klio-still); }
.klio-vk-fuss { margin: 8px 0 0; font-size: 11px; color: var(--klio-still); text-align: right; }

/* Auf schmalen Geräten legen sich Maßangaben und Faktenleiste sonst über das
   halbe Bild. Sie rücken zusammen und bleiben einzeilig. Dieser Block steht
   bewusst NACH den Grundregeln — bei gleicher Gewichtung zählt die Reihenfolge. */
@container klio (max-width: 720px) {
	/* Die Ansichtsknöpfe behalten oben die ganze Zeile. Das Maß rückt nach
	   unten über die Faktenleiste, wo noch Platz frei ist. */
	.klio-vk-masse {
		top: auto; bottom: 58px; left: 10px; right: 10px;
		flex-direction: row; flex-wrap: wrap; gap: 4px;
	}
	.klio-vk-mc { display: none; }
	.klio-vk-mk { display: inline-block; }
	.klio-vk-ansichten { top: 10px; right: 10px; }
	.klio-vk-fakten { left: 10px; right: 10px; bottom: 10px; flex-wrap: nowrap; overflow: hidden; }
	.klio-vk-fk { padding: 5px 8px; min-width: 0; }
	.klio-vk-fkk { font-size: 9px; letter-spacing: 0.06em; white-space: nowrap; }
	.klio-vk-fkv { font-size: 11.5px; white-space: nowrap; }
}
@media (max-width: 620px) {
	/* Die Ansichtsknöpfe behalten oben die ganze Zeile. Das Maß rückt nach
	   unten über die Faktenleiste, wo noch Platz frei ist. */
	.klio-vk-masse {
		top: auto; bottom: 58px; left: 10px; right: 10px;
		flex-direction: row; flex-wrap: wrap; gap: 4px;
	}
	.klio-vk-mc { display: none; }
	.klio-vk-mk { display: inline-block; }
	.klio-vk-ansichten { top: 10px; right: 10px; }
	.klio-vk-fakten { left: 10px; right: 10px; bottom: 10px; flex-wrap: nowrap; overflow: hidden; }
	.klio-vk-fk { padding: 5px 8px; min-width: 0; }
	.klio-vk-fkk { font-size: 9px; letter-spacing: 0.06em; white-space: nowrap; }
	.klio-vk-fkv { font-size: 11.5px; white-space: nowrap; }
}

/* ---------------------------------------------------------- Bedienspalte */
.klio-vk-preis { margin: 0 0 4px; font-size: 18px; color: var(--klio-gold); }
.klio-vk-pv { color: var(--klio-still); font-size: 13px; margin-right: 5px; }
.klio-vk-ust { display: block; color: var(--klio-still); font-size: 12px; line-height: 1.5; margin-top: 2px; }
.klio-vk-preis-sonder { font-size: 15px; color: var(--klio-warn); }

/* ---------------------------------------------------------- Schritte */
.klio-vk-fortschritt {
	display: flex; align-items: center; gap: 12px;
	padding: 16px 0 8px;
}
.klio-vk-fst {
	font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--klio-ink); white-space: nowrap;
}
.klio-vk-fsb {
	flex: 1 1 auto; height: 2px; border-radius: 1px;
	background: var(--klio-linie-hell);
}
.klio-vk-fsb > span {
	display: block; height: 100%; border-radius: 1px;
	background: var(--klio-gold);
	transition: width 0.25s ease;
}

.klio-vk-schritt { border-bottom: 1px solid var(--klio-linie-hell); }

/* Die Kopfzeile ist ein echter Knopf — auch die der noch nicht erreichten
   Schritte. Eine Schrittstrecke, die nur vorwärts geht, ist für alle, die
   bloss eine Kleinigkeit ändern wollen, ein Umweg. */
.klio-vk-sk {
	width: 100%;
	display: flex; align-items: center; gap: 12px;
	margin: 0; padding: 13px 0;
	background: none; border: 0;
	font: inherit; color: var(--klio-ink); text-align: left;
	cursor: pointer;
}
.klio-vk-sk:hover .klio-vk-stl { color: var(--klio-gold); }
.klio-vk-sk:focus-visible { outline: 2px solid var(--klio-ink); outline-offset: 2px; }

.klio-vk-snr {
	flex: 0 0 auto;
	width: 22px; height: 22px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; line-height: 1;
	border: 1px solid var(--klio-linie); color: var(--klio-still);
}
.klio-vk-snr-fertig { background: var(--klio-ink); border-color: var(--klio-ink); color: #fff; }
.klio-vk-snr-an { background: var(--klio-gold); border-color: var(--klio-gold); color: #fff; }

.klio-vk-st { flex: 1 1 auto; min-width: 0; }
.klio-vk-stl { display: block; font-size: 13px; }
.klio-vk-stw {
	display: block; font-size: 12.5px; color: var(--klio-still);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.klio-vk-sa { flex: 0 0 auto; font-size: 12px; color: var(--klio-gold); }
.klio-vk-schritt-kommt .klio-vk-stl { color: var(--klio-still); }

.klio-vk-si { padding: 2px 0 20px; }

/* Der offene Schritt ist eine Karte. Er hebt sich von den Zeilen ab, ohne
   dass der Rest verschwindet — man sieht weiter, was schon gewählt ist und
   was noch kommt. */
.klio-vk-schritt-an {
	margin: 18px 0;
	border: 1px solid var(--klio-ink); border-radius: 3px;
	background: #fff;
}
.klio-vk-schritt-an .klio-vk-sk {
	padding: 14px 16px 12px;
	background: var(--klio-buehne-hell);
	cursor: default;
}
.klio-vk-schritt-an .klio-vk-sk:hover .klio-vk-stl { color: var(--klio-ink); }
.klio-vk-schritt-an .klio-vk-stl { font-weight: 600; }
.klio-vk-schritt-an .klio-vk-sa { display: none; }
.klio-vk-schritt-an .klio-vk-si { padding: 6px 16px 18px; }
/* Sonst stehen zwei Linien dicht übereinander: die Trennlinie der Zeile
   darüber und die Oberkante der Karte. */
.klio-vk-schritt:has( + .klio-vk-schritt-an ) { border-bottom: 0; }

/* Zwischenüberschrift in den beiden Schritten, die zwei Entscheidungen
   zusammenfassen. */
.klio-vk-ut {
	font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--klio-still);
	padding: 16px 0 8px;
}
.klio-vk-si > .klio-vk-ut:first-child { padding-top: 6px; }

/* Bewusst kein zweiter schwarzer Balken: der Hauptknopf der Spalte bleibt
   "Angebot anfordern". Weiter ist ein Weg, keine Handlung. */
/* Der Weiter-Knopf ist entfallen: eine Auswahl öffnet den nächsten
   Schritt von selbst. */

.klio-vk-liste { display: flex; flex-direction: column; gap: 6px; }
.klio-vk-zeile { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.klio-vk-groessen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 6px;
}

.klio-vk-kachel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border: 0.8px solid var(--klio-linie);
	background: #fff;
	padding: 9px 13px;
	font-size: 13.5px;
	color: var(--klio-ink);
	cursor: pointer;
	line-height: 1.4;
}
.klio-vk-zeile .klio-vk-kachel,
.klio-vk-groessen .klio-vk-kachel { align-items: center; text-align: center; }
.klio-vk-kachel:hover { border-color: var(--klio-ink); }
.klio-vk-kachel input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px; height: 1px;
}
.klio-vk-kn { white-space: nowrap; }
.klio-vk-kt { font-size: 12px; color: var(--klio-still); }
.klio-vk-kp { font-size: 12.5px; color: var(--klio-text); }
.klio-vk-bald {
	font-size: 10.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--klio-still);
}
.klio-vk-kachel:focus-within { outline: 2px solid var(--klio-gold); outline-offset: 2px; }
.klio-vk-kachel:has(input:checked) { border-color: var(--klio-ink); box-shadow: inset 0 0 0 0.8px var(--klio-ink); }
.klio-vk-kachel:has(input:checked) .klio-vk-kp { color: var(--klio-gold-dunkel); }
.klio-vk-aus { opacity: 0.42; cursor: not-allowed; border-style: dashed; }
.klio-vk-aus:hover { border-color: var(--klio-linie); }
.klio-vk-aus .klio-vk-kp { text-decoration: line-through; }

/* Rückfallebene für Browser ohne :has() */
.klio-vk-kachel input:checked ~ .klio-vk-kn { font-weight: 500; }

.klio-vk-schieber { display: flex; flex-direction: column; gap: 16px; }
.klio-vk-sch { display: flex; flex-direction: column; gap: 6px; }
.klio-vk-sl { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--klio-ink); gap: 12px; }
.klio-vk-zf { display: flex; align-items: baseline; gap: 5px; flex: 0 0 auto; }
.klio-vk-zahl {
	width: 76px; padding: 5px 8px;
	font: inherit; font-size: 13px; text-align: right;
	color: var(--klio-ink); background: #fff;
	border: 1px solid var(--klio-linie-hell); border-radius: 2px;
	-moz-appearance: textfield;
}
.klio-vk-zahl:hover { border-color: var(--klio-linie); }
.klio-vk-zahl:focus { outline: none; border-color: var(--klio-ink); }
.klio-vk-zahl::-webkit-outer-spin-button,
.klio-vk-zahl::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.klio-vk-zme { font-size: 11.5px; color: var(--klio-still); }
.klio-vk-se { display: flex; justify-content: space-between; font-size: 11px; color: var(--klio-still); margin-top: -4px; }
.klio-vk-sch input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 20px;
	background: none;
	cursor: pointer;
	margin: 0;
	padding: 0;
	border: 0;
}
.klio-vk-sch input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--klio-linie); }
.klio-vk-sch input[type="range"]::-moz-range-track { height: 1px; background: var(--klio-linie); }
.klio-vk-sch input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 13px; height: 13px;
	background: var(--klio-ink);
	border: 0; border-radius: 0;
	margin-top: -6px;
}
.klio-vk-sch input[type="range"]::-moz-range-thumb {
	width: 13px; height: 13px;
	background: var(--klio-ink);
	border: 0; border-radius: 0;
}

.klio-vk-hin {
	display: flex; gap: 9px;
	font-size: 12.5px; line-height: 1.5;
	margin: 11px 0 0;
	padding: 9px 12px;
	background: var(--klio-regel-bg);
	color: var(--klio-text);
	border-left: 2px solid var(--klio-regel);
}
.klio-vk-warn { background: var(--klio-warn-bg); border-left-color: var(--klio-warn); }
.klio-vk-rid { color: var(--klio-regel); flex: none; font-size: 11.5px; }
.klio-vk-warn .klio-vk-rid { color: var(--klio-warn); }

.klio-vk-aktion { padding-top: 22px; display: flex; flex-direction: column; gap: 12px; }

/* ---------------------------------------------------------- Anfrageliste */
.klio-vk-hinzu { display: flex; align-items: stretch; gap: 8px; }
.klio-vk-hinzu-menge {
	display: flex; align-items: center; gap: 7px;
	flex: 0 0 auto;
	font-size: 12px; color: var(--klio-still);
}
.klio-vk-hinzu-menge .klio-vk-zahl { width: 62px; }
.klio-vk-hinzu .klio-vk-btn { flex: 1 1 auto; }
.klio-vk-btn-quittung { border-color: var(--klio-gold); color: var(--klio-gold); }

.klio-vk-postab { width: 100%; border-collapse: collapse; }
.klio-vk-postab th {
	font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--klio-still); font-weight: 400; text-align: left;
	padding: 0 10px 8px 0; border-bottom: 1px solid var(--klio-linie);
}
.klio-vk-postab td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--klio-linie-hell); vertical-align: top; }
.klio-vk-postab .klio-vk-r { text-align: right; white-space: nowrap; }
.klio-vk-posname { display: block; font-size: 13.5px; color: var(--klio-ink); }
.klio-vk-posnr { display: block; font-size: 11.5px; color: var(--klio-still); margin-top: 3px; }
.klio-vk-posmenge { width: 62px; text-align: right; }
.klio-vk-possumme { color: var(--klio-ink); font-variant-numeric: tabular-nums; }
.klio-vk-posakt { display: flex; justify-content: flex-end; gap: 14px; white-space: nowrap; }
.klio-vk-link-weg { color: var(--klio-warn); }
.klio-vk-versteckt {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

.klio-vk-possumm { padding-top: 18px; display: flex; flex-direction: column; gap: 7px; }
.klio-vk-summz {
	display: flex; justify-content: space-between; gap: 18px;
	font-size: 13.5px; color: var(--klio-ink);
	font-variant-numeric: tabular-nums;
}
.klio-vk-summz-gut span:last-child { color: var(--klio-gold); }
.klio-vk-summz-gesamt {
	border-top: 1px solid var(--klio-linie); padding-top: 10px; margin-top: 4px;
	font-size: 17px;
}
.klio-vk-summz-klein { font-size: 12px; color: var(--klio-still); }
.klio-vk-summh { margin: 2px 0 0; font-size: 12px; color: var(--klio-still); line-height: 1.5; }
.klio-vk-posaktion { display: flex; align-items: center; gap: 16px; padding-top: 14px; flex-wrap: wrap; }
.klio-vk-posaktion .klio-vk-btn { width: auto; }

.klio-vk-leer { padding: 26px 0; }
.klio-vk-leer-t { margin: 0; font-size: 15px; color: var(--klio-ink); }
.klio-vk-leer-h { margin: 8px 0 0; font-size: 13px; color: var(--klio-still); max-width: 62ch; line-height: 1.6; }

@media (max-width: 620px) {
	.klio-vk-postab thead { display: none; }
	.klio-vk-postab td { display: block; border: 0; padding: 2px 0; }
	.klio-vk-postab tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--klio-linie-hell); }
	.klio-vk-postab .klio-vk-r { text-align: left; }
	.klio-vk-posakt { justify-content: flex-start; padding-top: 6px; }
}
.klio-vk-btn {
	border: 0;
	padding: 15px 22px;
	font: inherit;
	font-size: 16px;
	cursor: pointer;
	background: var(--klio-ink);
	color: #fff;
	text-align: center;
	border-radius: 0;
	width: 100%;
}
.klio-vk-btn:hover { background: #3d3d3d; }
.klio-vk-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.klio-vk-btn-leer {
	background: #fff;
	color: var(--klio-ink);
	border: 0.8px solid var(--klio-linie);
	font-size: 14px;
	padding: 12px 18px;
}
.klio-vk-btn-leer:hover { background: #fff; border-color: var(--klio-ink); }
.klio-vk-meta { font-size: 12.5px; color: var(--klio-still); line-height: 1.8; margin: 4px 0 0; }
.klio-vk-meta b { color: var(--klio-text); font-weight: 400; }

/* ---------------------------------------------------------- Reiter */
.klio-vk-reiter { margin-top: 48px; }
.klio-vk-reiterleiste { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--klio-linie-hell); }
.klio-vk-reiter-btn {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	padding: 16px 20px 13px;
	font: inherit;
	font-size: 14px;
	color: var(--klio-still);
}
.klio-vk-reiter-btn:first-child { padding-left: 0; }
.klio-vk-reiter-btn:hover { color: var(--klio-text); }
.klio-vk-reiter-btn[aria-selected="true"] { color: var(--klio-ink); border-bottom-color: var(--klio-ink); }
.klio-vk-tab { padding-top: 26px; }

.klio-vk-daten { display: flex; flex-direction: column; margin: 0; max-width: 640px; }
.klio-vk-daten > div {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 9px 0; border-bottom: 1px solid var(--klio-linie-hell);
}
.klio-vk-daten dt { color: var(--klio-still); font-size: 13px; flex: none; }
.klio-vk-daten dd { margin: 0; color: var(--klio-ink); font-size: 13px; text-align: right; }

.klio-vk-tabelle { overflow-x: auto; }
.klio-vk-tabelle table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; background: #fff; }
.klio-vk-tabelle thead th {
	text-align: left;
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--klio-still);
	padding: 11px 13px;
	border-bottom: 1px solid var(--klio-linie);
}
.klio-vk-r { text-align: right; white-space: nowrap; }
.klio-vk-tabelle tbody td { padding: 9px 13px; border-bottom: 1px solid var(--klio-linie-hell); vertical-align: top; color: var(--klio-ink); }
.klio-vk-art { color: var(--klio-still); font-size: 12px; }
.klio-vk-sub { font-size: 11.5px; color: var(--klio-still); line-height: 1.45; margin-top: 2px; }
.klio-vk-gr td {
	background: #f4f4f4;
	color: var(--klio-ink);
	font-size: 11px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	padding: 8px 13px;
}
.klio-vk-tabelle tfoot td { padding: 10px 13px; font-size: 13px; color: var(--klio-text); }
.klio-vk-summe td { border-top: 1px solid var(--klio-linie); color: var(--klio-ink); font-size: 16px; padding-top: 14px; }

/* ---------------------------------------------------------- Formular */
.klio-vk-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.klio-vk-form-kopf { margin: 0 0 4px; max-width: 52ch; }
.klio-vk-feld { display: flex; flex-direction: column; gap: 5px; }
.klio-vk-feld label { font-size: 12.5px; color: var(--klio-text); }
.klio-vk-feld input,
.klio-vk-feld textarea {
	font: inherit;
	font-size: 14px;
	color: var(--klio-ink);
	background: #fff;
	border: 0.8px solid var(--klio-linie);
	padding: 11px 13px;
	width: 100%;
	border-radius: 0;
}
.klio-vk-feld input:focus,
.klio-vk-feld textarea:focus { border-color: var(--klio-ink); outline: none; }
.klio-vk-feld textarea { resize: vertical; min-height: 84px; }
.klio-vk-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .klio-vk-zwei { grid-template-columns: 1fr; } }
.klio-vk-topf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.klio-vk-fehler {
	margin: 0;
	padding: 10px 13px;
	background: var(--klio-warn-bg);
	border-left: 2px solid var(--klio-warn);
	color: var(--klio-warn);
	font-size: 13px;
}
.klio-vk-klein { font-size: 12px; color: var(--klio-still); line-height: 1.55; margin: 0; }
.klio-vk-opt { color: var(--klio-still); }

/* ------------------------------------------------- Anfrage als Beleg
   Der Aufbau folgt dem, was in einer Museumsverwaltung ohnehin
   herumgereicht wird: Kopf mit Nummer und Preis, darunter die
   Konfiguration als Tabelle, dann die Kontaktdaten. */

.klio-vk-anf { display: flex; flex-direction: column; gap: 0; }

.klio-vk-beleg { border: 1px solid var(--klio-linie-hell); border-bottom: 0; }

.klio-vk-bkopf {
	background: var(--klio-ink); color: #fff;
	padding: 20px 24px;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
	flex-wrap: wrap;
}
.klio-vk-bkopf-l { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.klio-vk-bkopf-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.klio-vk-bueber { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #b0b0b0; }
.klio-vk-btitel { font-size: 20px; line-height: 1.25; }
.klio-vk-bpreis { font-size: 23px; color: var(--klio-gold); white-space: nowrap; }
.klio-vk-bpreis-sonder { font-size: 15px; color: #e8b866; }
.klio-vk-bust { font-size: 11px; color: #b0b0b0; }

.klio-vk-bkoerper { display: flex; gap: 28px; padding: 24px; align-items: flex-start; }
.klio-vk-bdaten { flex-grow: 1; min-width: 0; }
.klio-vk-bliste { margin: 0; display: flex; flex-direction: column; }
.klio-vk-bz {
	display: flex; gap: 14px; padding: 8px 0;
	border-bottom: 1px solid #f2f2f2;
}
.klio-vk-bz:last-child { border-bottom: 0; }
.klio-vk-bz dt { flex: 0 0 auto; width: 150px; font-size: 12.5px; color: var(--klio-still); margin: 0; }
.klio-vk-bz dd { margin: 0; font-size: 13.5px; color: var(--klio-ink); min-width: 0; }
.klio-vk-bwege { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; }

.klio-vk-link {
	background: none; border: 0; padding: 0;
	font: inherit; font-size: 13px;
	color: var(--klio-gold-dunkel);
	border-bottom: 1px solid currentColor;
	cursor: pointer;
}
.klio-vk-link:hover { color: var(--klio-ink); }

.klio-vk-bbild {
	flex: 0 0 auto; width: 230px;
	background: var(--klio-buehne);
	display: grid; place-items: center;
	padding: 12px; min-height: 180px;
}
.klio-vk-bbild img { max-width: 100%; max-height: 270px; object-fit: contain; display: block; }

.klio-vk-anf-kontakt {
	border: 1px solid var(--klio-linie-hell); border-bottom: 0;
	padding: 26px 24px;
	display: flex; flex-direction: column; gap: 16px;
}
.klio-vk-anf-kopf { display: flex; flex-direction: column; gap: 5px; }
.klio-vk-anf-h { margin: 0; font-size: 18px; font-weight: 400; color: var(--klio-ink); }
.klio-vk-anf-p { margin: 0; font-size: 13.5px; line-height: 1.55; max-width: 66ch; }
.klio-vk-zwei-eng { gap: 12px; grid-template-columns: 110px minmax(0, 1fr); }

/* Datenschutzhinweis über dem Absendeknopf. Klein, aber lesbar — er gehört
   zum Formular, nicht in die Fußnoten. */
.klio-vk-anf-ds {
	margin: 0 0 14px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--klio-still);
}
.klio-vk-anf-ds a { color: var(--klio-text); text-decoration: underline; }
.klio-vk-anf-ds a:hover { color: var(--klio-ink); }

.klio-vk-anf-fuss {
	border: 1px solid var(--klio-linie-hell);
	background: #fafafa;
	padding: 18px 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	flex-wrap: wrap;
}
.klio-vk-anf-fusstext { display: flex; flex-direction: column; gap: 2px; }
.klio-vk-anf-fussstark { font-size: 14px; color: var(--klio-ink); }
.klio-vk-anf-fussklein { font-size: 12.5px; color: var(--klio-text); }
.klio-vk-btn-gold { background: var(--klio-gold); }
.klio-vk-btn-gold:hover { background: var(--klio-gold-dunkel); }

/* ------------------------------------------------------- Bestätigung */

.klio-vk-fertig { display: flex; flex-direction: column; gap: 26px; padding: 8px 0 4px; }

.klio-vk-fkopf { display: flex; gap: 18px; align-items: flex-start; }
.klio-vk-fhaken {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
	background: var(--klio-gold); color: #fff;
	display: grid; place-items: center;
}
.klio-vk-fh { margin: 0 0 6px; font-size: 22px; font-weight: 400; color: var(--klio-ink); }
.klio-vk-fp { margin: 0; font-size: 14.5px; line-height: 1.55; max-width: 62ch; }
.klio-vk-fp strong { color: var(--klio-ink); font-weight: 400; }

.klio-vk-fnummer {
	border: 1px solid var(--klio-linie-hell);
	padding: 18px 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.klio-vk-fnummer-l { display: flex; flex-direction: column; gap: 4px; }
.klio-vk-fueber { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--klio-still); }
.klio-vk-fnr { font-size: 26px; font-weight: 400; color: var(--klio-ink); letter-spacing: 0.02em; }
.klio-vk-fklein { font-size: 12.5px; color: var(--klio-text); }
.klio-vk-fbild {
	flex: 0 0 auto; width: 88px; height: 88px;
	background: var(--klio-buehne);
	display: grid; place-items: center;
}
.klio-vk-fbild img { max-width: 78px; max-height: 78px; object-fit: contain; display: block; }

.klio-vk-fweiter { display: flex; flex-direction: column; gap: 12px; }
.klio-vk-fschritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.klio-vk-fschritt {
	display: flex; flex-direction: column; gap: 6px;
	border-top: 2px solid var(--klio-linie-hell); padding-top: 11px;
}
.klio-vk-fschritt-jetzt { border-top-color: var(--klio-ink); }
.klio-vk-fwann { font-size: 12px; color: var(--klio-still); }
.klio-vk-fschritt-jetzt .klio-vk-fwann { color: var(--klio-gold); }
.klio-vk-fwas { font-size: 14px; color: var(--klio-ink); }
.klio-vk-fwie { font-size: 12.5px; line-height: 1.5; }

.klio-vk-ffuss {
	border-top: 1px solid var(--klio-linie-hell); padding-top: 18px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	flex-wrap: wrap;
}
.klio-vk-fperson { display: flex; align-items: center; gap: 12px; }
.klio-vk-finit {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
	background: var(--klio-buehne); color: var(--klio-text);
	display: grid; place-items: center; font-size: 13.5px;
}
.klio-vk-fpt { display: flex; flex-direction: column; gap: 2px; }
.klio-vk-fpname { font-size: 13.5px; color: var(--klio-ink); }
.klio-vk-fpkontakt { font-size: 12.5px; }
.klio-vk-fertig .klio-vk-btn { width: auto; }

/* Schmale Spalten: Bild unter die Daten, Reihen einspaltig. */
@container klio (max-width: 640px) {
	.klio-vk-bkoerper { flex-direction: column; gap: 20px; }
	.klio-vk-bbild { width: 100%; min-height: 150px; }
	.klio-vk-bz { flex-direction: column; gap: 2px; padding: 7px 0; }
	.klio-vk-bz dt { width: auto; }
	.klio-vk-fschritte { grid-template-columns: 1fr; gap: 16px; }
	.klio-vk-anf-fuss .klio-vk-btn { width: 100%; }
	.klio-vk-zwei-eng { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.klio-vk-bkoerper { flex-direction: column; gap: 20px; }
	.klio-vk-bbild { width: 100%; min-height: 150px; }
	.klio-vk-fschritte { grid-template-columns: 1fr; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.klio-vk * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------- Oberfläche */
/*
 * RAL-Auswahl. Eine Farbe für Vitrinenboden UND Sockel — darum eine Reihe
 * Farbtupfer statt der üblichen Kacheln mit Text: man wählt hier nach dem
 * Auge, nicht nach der Beschreibung. Die Nummer steht unter dem Tupfer,
 * weil verbindlich die RAL-Nummer ist und nicht der Bildschirmton.
 */
.klio-vk-farben {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 2px 0 4px;
}
.klio-vk-farbe {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	border-radius: 3px;
	padding: 4px 3px 3px;
	border: 1px solid transparent;
}
.klio-vk-farbe input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.klio-vk-farbtupf {
	width: 34px;
	height: 34px;
	border-radius: 2px;
	/* Der Rand trennt helle Töne vom weissen Hintergrund — ohne ihn
	   verschwindet RAL 9016 komplett. */
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.22 );
}
.klio-vk-farbnr {
	font-size: 10px;
	letter-spacing: 0.04em;
	color: var(--klio-still);
	font-variant-numeric: tabular-nums;
}
.klio-vk-farbe:hover { border-color: var(--klio-linie); }
.klio-vk-farbe-an { border-color: var(--klio-text); }
.klio-vk-farbe-an .klio-vk-farbnr { color: var(--klio-text); }
.klio-vk-farbe input:focus-visible ~ .klio-vk-farbtupf {
	outline: 2px solid var(--klio-text);
	outline-offset: 2px;
}

/* Fusszeile unter einer Auswahlgruppe — eine Eigenschaft, die für alle
   Varianten gilt und darum auf keine Kachel gehört. */
.klio-vk-gruppenfuss {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--klio-still);
}

/* ----------------------------------------------------------------- Bemaßung
   Die Maßzahlen liegen über der Grafik und werden bei jedem Bild an ihren
   Punkt in der Szene gesetzt. Sie fangen keine Klicks ab — darunter liegt das
   Modell, das man anklicken können muss. */
.klio-vk-bem {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.klio-vk-bml {
	position: absolute;
	transform: translate(-50%, -50%);
	padding: 1px 5px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.86);
	color: var(--klio-ink);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	white-space: nowrap;
	/* Bis die erste Projektion gelaufen ist, steht die Zahl in der linken
	   oberen Ecke. Lieber unsichtbar als kurz an der falschen Stelle. */
	opacity: 0;
	transition: opacity 120ms linear;
}

.klio-vk-bml[data-klio-steht] { opacity: 1; }

/* Steht ÜBER der Auswahl, nicht darunter: dass H die Höhe ist, muss man
   lesen, bevor man auf eine Kachel mit drei nackten Zahlen klickt. */
.klio-vk-gruppenkopf {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--klio-still);
}

/* Die abgeleitete Objektraumhöhe steht etwas zurück: sie wird angezeigt,
   nicht eingegeben. */
.klio-vk-mc-ab b { font-weight: 500; }
.klio-vk-mc-ab { color: var(--klio-still); }

/* Spezifikationstabelle: zwei Spalten statt fünf. */
.klio-vk-merkmal { color: var(--klio-still); width: 38%; }


/* ---------------------------------------------------------- Anfrageliste
   in der Bedienspalte. Je Zeile eine maßstäbliche SVG-Skizze — ein zweites
   WebGL-Bild je Zeile wäre zu teuer, und ohne Bild sieht eine Zeile aus wie
   die nächste. */
.klio-vk-mehrfach { margin: 6px 0 0; font-size: 12px; color: var(--klio-still); line-height: 1.5; }
.klio-vk-kurz {
	border: 1px solid var(--klio-linie);
	border-radius: 3px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: var(--klio-buehne-hell);
}
.klio-vk-kurzkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.klio-vk-kurzueber {
	font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--klio-still);
}
.klio-vk-kurzzahl { font-size: 11.5px; color: var(--klio-still); }
.klio-vk-poslist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.klio-vk-pos {
	display: flex; align-items: center; gap: 8px;
	background: #fff; border: 1px solid var(--klio-linie-hell); border-radius: 3px;
	padding: 5px 7px;
}
.klio-vk-posbild {
	flex: 0 0 auto; width: 46px; height: 34px; border-radius: 2px;
	background: var(--klio-buehne); display: block;
}
.klio-vk-skizze { display: block; width: 100%; height: 100%; }
.klio-vk-poswer { flex: 1 1 60px; min-width: 0; line-height: 1.35; }
.klio-vk-poswer b { display: block; font-weight: 400; font-size: 12.5px; color: var(--klio-ink); }
.klio-vk-poswer > span {
	display: block; font-size: 11px; color: var(--klio-still);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.klio-vk-pos .klio-vk-posmenge { flex: 0 0 auto; width: 3.4em; padding: 4px 5px; font-size: 12px; text-align: right; }
.klio-vk-poszeile {
	flex: 0 0 auto; width: 5.2em; text-align: right;
	font-size: 12.5px; color: var(--klio-ink); font-variant-numeric: tabular-nums;
}
.klio-vk-posik {
	flex: 0 0 auto; border: 0; background: none; cursor: pointer;
	color: var(--klio-still); font-size: 13px; line-height: 1; padding: 4px; border-radius: 2px;
}
.klio-vk-posik:hover { color: var(--klio-ink); }
.klio-vk-posik:focus-visible { outline: 2px solid var(--klio-ink); outline-offset: 1px; }
.klio-vk-kurzsumme {
	display: flex; justify-content: space-between; gap: 12px;
	border-top: 1px solid var(--klio-linie-hell); margin-top: 4px; padding-top: 7px;
	font-size: 13px; color: var(--klio-ink); font-variant-numeric: tabular-nums;
}
.klio-vk-kurzgesamt { font-size: 15px; }
.klio-vk-kurzvorteil { font-size: 11.5px; color: var(--klio-gold-dunkel); margin: 2px 0 0; line-height: 1.5; }
/* Der Rüstanteil steht als Hinweis, nicht als Abzug — er darf trotzdem
   auffallen, sonst liest ihn niemand. */
.klio-vk-summh-gut { color: var(--klio-gold-dunkel); }
.klio-vk-metatr { color: var(--klio-gold-dunkel); }