/* ==================================================================
   Objectflow Katalog - Produkt-Input (Frontend-Erfassung)

   Gestaltung: ObjectFlow-CI wie die Einzeleingabe im Backend
   (Petrol/Tiefsee/Mint/Sand/Tinte, Schrift Sora). Die Tokens sind
   unveraendert aus assets/css/admin.css uebernommen, damit Backend und
   Produkt-Input dieselbe Wahrheit haben - wer dort eine Farbe aendert,
   aendert sie hier mit.

   Die Seite laeuft ohne Theme: templates/produkt-input-seite.php liefert ein
   eigenes HTML-Geruest, VBC_Erfassung dequeued alle Theme-Styles. Dieses
   Stylesheet gestaltet die Seite also komplett allein.

   Mobil zuerst: eine Spalte auf 560px, alle Touch-Ziele >= 44px,
   Eingabeschrift 16px (verhindert den iOS-Zoom beim Fokus), keine
   Funktion, die auf Hover angewiesen ist.

   Die Tokens haengen an ZWEI Stellen: am Body (der Seitenkopf steht
   ausserhalb des Shortcode-Wrappers) und an .vbc-erf selbst (der Shortcode
   kann auch in einer anderen Seite stecken). data-theme="dark" kippt beide.
   ================================================================== */

.vbc-produkt-input-seite,
.vbc-erf {
	--of-font: Sora, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Light (Standard, wie die Einzeleingabe) */
	--of-bg: #F2EFE9;
	--of-surface: #FFFFFF;
	--of-text: #14201F;
	--of-accent: #0F6E6A;
	--of-line: #B8D8D2;

	--of-neutral-100: #14201F;
	--of-neutral-200: #2a3a38;
	--of-neutral-300: #4a5f5c;
	--of-neutral-400: #6f827e;
	--of-neutral-500: #8aa39f;
	--of-neutral-600: #9db5b1;
	--of-neutral-700: #B8D8D2;
	--of-neutral-800: #cfe4df;
	--of-neutral-900: #E3F0ED;

	--of-accent-100: #0A3F3D;
	--of-accent-200: #0A3F3D;
	--of-accent-300: #0F6E6A;
	--of-accent-400: #0F6E6A;
	--of-accent-500: #0F6E6A;
	--of-accent-600: #8FC2BA;
	--of-accent-700: #B8D8D2;
	--of-accent-800: #E3F0ED;
	--of-accent-900: #E3F0ED;

	--of-input-bg: #FFFFFF;
	--of-tip-bg: #14201F;
	--of-tip-text: #E3F0ED;
	--of-error: #9B2C2C;
	/* Eigener Warnton fuer "niedrige AI-Sicherheit" - im Backend gibt es den
	   Zustand nicht, deshalb steht er nicht in admin.css. */
	--of-warning: #8A5A12;

	--of-space-1: 2.8px;
	--of-space-2: 5.6px;
	--of-space-3: 8.4px;
	--of-space-4: 11.2px;
	--of-space-6: 16.8px;
	--of-space-8: 22.4px;

	--of-radius-sm: 4px;
	--of-radius-md: 8px;
	--of-radius-lg: 14px;

	--of-shadow-sm: 0 0 0 1px #B8D8D2;
	--of-shadow: 0 0 0 1px #B8D8D2, 0 6px 18px rgba(20, 32, 31, .10);
	--of-shadow-lg: 0 0 0 1px #B8D8D2, 0 14px 36px rgba(20, 32, 31, .16);

	/* Hoehe des Seitenkopfs: 28px Bildmarke + 2x --of-space-3 + 1px Rand.
	   Die Fortschrittsleiste klebt darunter (top: var(--kopf-h)) - wird der
	   Kopf hoeher, muss dieser Wert mitziehen, sonst klafft eine Luecke
	   zwischen den beiden unscharfen Leisten. */
	--kopf-h: 46px;
}

.vbc-produkt-input-seite[data-theme="dark"],
.vbc-erf[data-theme="dark"] {
	--of-bg: #14201F;
	--of-surface: #1B2A29;
	--of-text: #F2EFE9;
	--of-accent: #B8D8D2;
	--of-line: rgba(184, 216, 210, .25);

	--of-neutral-100: #F2EFE9;
	--of-neutral-200: #E3F0ED;
	--of-neutral-300: #C9D6D3;
	--of-neutral-400: #A9BAB7;
	--of-neutral-500: #8AA39F;
	--of-neutral-600: #8aa39f;
	--of-neutral-700: #4a5f5c;
	--of-neutral-800: #2a3a38;
	--of-neutral-900: #1B2A29;

	--of-accent-100: #E3F0ED;
	--of-accent-200: #B8D8D2;
	--of-accent-300: #8FC2BA;
	--of-accent-400: #66ACA1;
	--of-accent-500: #0F6E6A;
	--of-accent-600: #0F6E6A;
	--of-accent-700: #0A3F3D;
	--of-accent-800: #0A3F3D;
	--of-accent-900: #0A3F3D;

	--of-input-bg: #1B2A29;
	--of-tip-bg: #1B2A29;
	--of-tip-text: #E3F0ED;
	--of-error: #F0A8A8;
	--of-warning: #E0B36A;

	--of-shadow-sm: 0 0 0 1px #2a3a38;
	--of-shadow: 0 0 0 1px #4a5f5c, 0 6px 18px rgba(0, 0, 0, .45);
	--of-shadow-lg: 0 0 0 1px #4a5f5c, 0 16px 40px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------------ */
/* Seitengeruest                                                       */
/* ------------------------------------------------------------------ */

body.vbc-produkt-input-seite {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--of-font);
	font-size: 14px;
	line-height: 1.55;
	color: var(--of-text);
	background: var(--of-bg);
	-webkit-text-size-adjust: 100%;
}

.vbc-produkt-input-seite *,
.vbc-produkt-input-seite *::before,
.vbc-produkt-input-seite *::after {
	box-sizing: border-box;
}

.vbc-produkt-input-seite h1,
.vbc-produkt-input-seite h5,
.vbc-produkt-input-seite h6 {
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0;
}

.vbc-produkt-input-seite a {
	color: var(--of-accent-300);
	text-decoration: none;
}

.vbc-produkt-input-seite a:hover {
	color: var(--of-accent);
}

.vbc-produkt-input-seite :focus {
	outline: none;
}

.vbc-produkt-input-seite :focus-visible {
	outline: 2px solid var(--of-accent);
	outline-offset: 2px;
}

/* Seitenkopf: klebt oben, unscharfer Grund wie die Leisten der Einzeleingabe */
.vbc-pi-kopf {
	position: sticky;
	top: 0;
	z-index: 30;
	background: color-mix(in srgb, var(--of-surface) 92%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--of-line);
}

.vbc-pi-kopf-innen {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--of-space-3) var(--of-space-6);
	display: flex;
	align-items: center;
	gap: var(--of-space-4);
}

.vbc-pi-kopf-logo {
	width: 104px;
	height: 28px;
	object-fit: contain;
	flex: none;
	display: block;
}

/* Die Bildmarke kommt als inline-SVG (VBC_Admin_Design::bildmarke(), 80x80). */
.vbc-pi-kopf-marke {
	width: 28px;
	height: 28px;
	flex: none;
	display: inline-flex;
	color: var(--of-accent);
}

.vbc-pi-kopf-marke svg {
	width: 100%;
	height: 100%;
	display: block;
}

.vbc-pi-kopf-trenner {
	width: 1px;
	height: 20px;
	background: var(--of-line);
	flex: none;
}

.vbc-pi-kopf-wort {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.015em;
	flex: 1;
	min-width: 0;
	/* Kuerzen statt ueber die Links laufen, wenn der Platz knapp wird. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vbc-pi-kopf-links {
	display: flex;
	align-items: center;
	gap: var(--of-space-4);
	flex: none;
}

.vbc-pi-kopf-links a {
	font-size: 13px;
}

.vbc-pi-kopf-links a.vbc-pi-kopf-abmelden {
	color: var(--of-neutral-400);
}

.vbc-pi-kopf-links a.vbc-pi-kopf-abmelden:hover {
	color: var(--of-text);
}

/* Abgemeldet: Bildmarke gross ueber dem Login */
.vbc-pi-logo-zentriert {
	display: flex;
	justify-content: center;
	padding: var(--of-space-8) var(--of-space-6) 0;
}

.vbc-pi-logo-zentriert img {
	max-width: 220px;
	max-height: 64px;
	object-fit: contain;
}

.vbc-pi-logo-zentriert svg {
	width: 56px;
	height: 56px;
	color: var(--of-accent);
}

.vbc-pi-inhalt {
	flex: 1;
	width: 100%;
}

/* ------------------------------------------------------------------ */
/* Wrapper                                                             */
/* ------------------------------------------------------------------ */

.vbc-erf {
	font-family: var(--of-font);
	color: var(--of-text);
}

.vbc-erf * {
	box-sizing: border-box;
}

/* Die Schritte und alles, was zwischen den Leisten steht. Das Bottom-Padding
   haelt die klebende Aktionsleiste frei. */
.vbc-erf-buehne {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: var(--of-space-8) var(--of-space-6) 132px;
	display: flex;
	flex-direction: column;
	gap: var(--of-space-6);
}

.vbc-erf-schritt {
	display: flex;
	flex-direction: column;
	gap: var(--of-space-6);
}

.vbc-erf-h2 {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0;
}

.vbc-erf h3 {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--of-neutral-400);
	margin: 0;
}

.vbc-erf-hinweis-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--of-neutral-400);
}

/* ------------------------------------------------------------------ */
/* Fortschrittsleiste                                                  */
/* ------------------------------------------------------------------ */

.vbc-erf-fortschritt {
	position: sticky;
	top: var(--kopf-h);
	z-index: 20;
	background: color-mix(in srgb, var(--of-bg) 88%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--of-line);
}

.vbc-erf-fortschritt-innen {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--of-space-4) var(--of-space-6) var(--of-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--of-space-3);
}

.vbc-erf-fortschritt-punkte {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Durchgehende Linie hinter den Punkten, an beiden Enden ausgefadet. */
.vbc-erf-fortschritt-punkte::before {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	top: 21px;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--of-line) 36px, var(--of-line) calc(100% - 36px), transparent);
}

/* Die Schaltflaeche ist das Touch-Ziel (44px), der Kreis darin nur 26px. */
.vbc-erf-fortschritt-btn {
	position: relative;
	background: transparent;
	border: 0;
	padding: 9px 2px;
	cursor: pointer;
	min-height: 44px;
	display: grid;
	place-items: center;
	font: inherit;
}

.vbc-erf-fortschritt-schritt {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11.5px;
	font-weight: 500;
	border: 1px solid var(--of-neutral-700);
	background: var(--of-bg);
	color: var(--of-neutral-500);
	transition: box-shadow .2s;
}

.vbc-erf-fortschritt-schritt.ist-aktiv {
	border-color: var(--of-accent);
	color: var(--of-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--of-accent) 18%, transparent);
}

.vbc-erf-fortschritt-schritt.ist-erledigt {
	border-color: var(--of-accent-700);
	background: var(--of-accent-900);
	color: var(--of-accent-300);
}

.vbc-erf-fortschritt-kopf {
	display: flex;
	align-items: baseline;
	gap: var(--of-space-3);
}

.vbc-erf-schritt-nr {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--of-accent-300);
}

.vbc-erf-fortschrittstext {
	margin-left: auto;
	font-size: 11px;
	color: var(--of-neutral-500);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Aktionsleiste unten                                                 */
/* ------------------------------------------------------------------ */

.vbc-erf-leiste {
	position: sticky;
	bottom: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--of-bg) 88%, transparent);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--of-line);
}

.vbc-erf-leiste-innen {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--of-space-3) var(--of-space-6) var(--of-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--of-space-3);
}

.vbc-erf-gespeichert {
	font-size: 11px;
	color: var(--of-neutral-500);
	text-align: center;
	min-height: 1em;
}

.vbc-erf-leiste-btns {
	display: flex;
	align-items: center;
	gap: var(--of-space-2);
}

.vbc-erf-leiste-btns .vbc-erf-btn-weiter {
	margin-left: auto;
}

/* ------------------------------------------------------------------ */
/* Felder                                                              */
/* ------------------------------------------------------------------ */

.vbc-erf-raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--of-space-6) var(--of-space-4);
}

.vbc-erf-feld {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--of-space-2);
	min-width: 0;
}

.vbc-erf-feld-voll {
	grid-column: 1 / -1;
}

.vbc-erf-feld label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
	color: color-mix(in srgb, var(--of-text) 70%, transparent);
}

.vbc-erf-stern {
	color: var(--of-accent);
}

.vbc-erf-input {
	width: 100%;
	/* 44px statt der 36px des Backends: Touch-Ziel. 16px Schrift verhindert,
	   dass iOS beim Fokus in das Feld hineinzoomt. */
	min-height: 44px;
	padding: 9px 11px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--of-text);
	caret-color: var(--of-accent);
	background: var(--of-input-bg);
	border: 1px solid var(--of-line);
	border-radius: var(--of-radius-md);
}

.vbc-erf-input:hover {
	border-color: color-mix(in srgb, var(--of-text) 45%, transparent);
}

.vbc-erf-input:disabled {
	opacity: .45;
}

select.vbc-erf-input {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256' fill='%238aa39f'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 53.66 90.34L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 34px;
}

textarea.vbc-erf-input {
	min-height: 150px;
	line-height: 1.55;
	resize: vertical;
}

/* Pflichtfeld ohne Wert */
.vbc-erf-pflicht-leer .vbc-erf-input,
.vbc-erf-input[aria-invalid="true"] {
	border-color: var(--of-error);
	background: color-mix(in srgb, var(--of-error) 6%, var(--of-input-bg));
}

.vbc-erf-feldfehler {
	font-size: 12px;
	color: var(--of-error);
}

.vbc-erf-feldfehler:empty {
	display: none;
}

/* Niedrige AI-Sicherheit */
.vbc-erf-niedrig {
	border-color: var(--of-warning);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--of-warning) 16%, transparent);
}

.vbc-erf-feldhinweis {
	font-size: 12px;
	color: var(--of-neutral-500);
}

.vbc-erf-feldhinweis a {
	font-size: inherit;
}

/* Herkunftszeichen als Chip (statt nacktem Emoji) */
.vbc-erf-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .01em;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid var(--of-line);
	background: var(--of-neutral-900);
	color: var(--of-neutral-300);
	white-space: nowrap;
	cursor: help;
}

.vbc-erf-badge::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--of-neutral-500);
	flex: none;
}

.vbc-erf-badge.ist-accent {
	background: var(--of-accent-900);
	color: var(--of-accent-300);
	border-color: var(--of-accent-700);
}

.vbc-erf-badge.ist-accent::before {
	background: var(--of-accent);
}

.vbc-erf-badge.ist-warn {
	background: color-mix(in srgb, var(--of-warning) 12%, transparent);
	color: var(--of-warning);
	border-color: color-mix(in srgb, var(--of-warning) 40%, transparent);
}

.vbc-erf-badge.ist-warn::before {
	background: var(--of-warning);
}

/* ------------------------------------------------------------------ */
/* Schaltflaechen                                                      */
/* ------------------------------------------------------------------ */

.vbc-erf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: var(--of-space-3) calc(var(--of-space-3) * 1.6);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	color: var(--of-text);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--of-radius-md);
}

.vbc-erf-btn svg {
	flex: none;
}

.vbc-erf-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.vbc-erf-btn-voll {
	width: 100%;
}

.vbc-erf-btn-primary {
	color: var(--of-accent-300);
	border-color: var(--of-accent);
}

.vbc-erf-btn-primary:hover:not(:disabled) {
	background: color-mix(in srgb, var(--of-accent) 12%, transparent);
}

.vbc-erf-btn-primary:active:not(:disabled) {
	background: color-mix(in srgb, var(--of-accent) 20%, transparent);
}

.vbc-erf-btn-secondary {
	border-color: var(--of-line);
	color: var(--of-text);
}

.vbc-erf-btn-secondary:hover:not(:disabled) {
	border-color: var(--of-accent);
	color: var(--of-accent-300);
}

.vbc-erf-btn-ghost {
	color: var(--of-neutral-400);
}

.vbc-erf-btn-ghost:hover:not(:disabled) {
	color: var(--of-text);
}

.vbc-erf-btn-verwerfen {
	color: var(--of-error);
	border-color: color-mix(in srgb, var(--of-error) 45%, transparent);
}

.vbc-erf-btn-verwerfen:hover:not(:disabled) {
	background: color-mix(in srgb, var(--of-error) 10%, transparent);
}

/* Mehrzeilige Schaltflaeche (z.B. "Veröffentlichen und benachrichtigen …") */
.vbc-erf-btn-mehrzeilig {
	height: auto;
	padding: var(--of-space-4) var(--of-space-6);
	justify-content: flex-start;
	gap: var(--of-space-4);
	text-align: left;
}

.vbc-erf-btn-mehrzeilig .vbc-erf-btn-text {
	white-space: normal;
	line-height: 1.35;
}

.vbc-erf-btnreihe {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--of-space-2);
	flex-wrap: wrap;
}

.vbc-erf-btnspalte {
	display: flex;
	flex-direction: column;
	gap: var(--of-space-3);
}

/* ------------------------------------------------------------------ */
/* Upload-Flaechen und Kacheln                                         */
/* ------------------------------------------------------------------ */

.vbc-erf-fotobereich {
	display: flex;
	flex-direction: column;
	gap: var(--of-space-4);
}

.vbc-erf-fotobtns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--of-space-3);
}

.vbc-erf-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--of-space-2);
	min-height: 96px;
	padding: var(--of-space-4);
	border: 1px dashed var(--of-neutral-700);
	border-radius: var(--of-radius-lg);
	background: var(--of-surface);
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.vbc-erf-drop:hover {
	border-color: var(--of-accent);
	background: color-mix(in srgb, var(--of-accent) 6%, transparent);
}

.vbc-erf-drop svg {
	width: 22px;
	height: 22px;
	color: var(--of-accent);
}

.vbc-erf-drop-text {
	font-size: 13px;
	font-weight: 500;
}

.vbc-erf-drop.ist-gesperrt {
	opacity: .45;
	pointer-events: none;
}

.vbc-erf-drop--pdf {
	grid-column: 1 / -1;
	flex-direction: row;
	min-height: 0;
	padding: var(--of-space-3) var(--of-space-4);
	text-align: left;
}

.vbc-erf-drop--pdf .vbc-erf-drop-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vbc-erf-drop-zusatz {
	font-size: 12px;
	font-weight: 400;
	color: var(--of-neutral-500);
}

/* Hochgeladene PDFs (Schritt 1) */
.vbc-erf-pdfs {
	display: flex;
	flex-direction: column;
	gap: var(--of-space-2);
	margin: var(--of-space-3) 0;
	padding: 0;
	list-style: none;
}

.vbc-erf-pdf {
	display: flex;
	align-items: center;
	gap: var(--of-space-3);
	padding: var(--of-space-2) var(--of-space-3);
	border: 1px solid var(--of-neutral-700);
	border-radius: var(--of-radius-md);
	font-size: 13px;
}

.vbc-erf-pdf svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--of-accent);
}

.vbc-erf-pdf-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.vbc-erf-pdf-name {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vbc-erf-pdf-meta {
	font-size: 12px;
	color: var(--of-neutral-500);
}

.vbc-erf-pdf-entfernen {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.vbc-erf-pdf-entfernen:hover {
	background: color-mix(in srgb, var(--of-accent) 10%, transparent);
}

.vbc-erf-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Kachelraster - je Schritt eine andere Mindestbreite */
.vbc-erf-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: var(--of-space-3);
}

#vbc-erf-thumbs-unterlagen {
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

#vbc-erf-thumbs-titelbild {
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.vbc-erf-thumb {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--of-space-2);
	min-width: 0;
}

.vbc-erf-thumb-bild,
.vbc-erf-thumb-tap {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 1px solid var(--of-line);
	border-radius: var(--of-radius-md);
	background: var(--of-surface);
	overflow: hidden;
	font: inherit;
	transition: border-color .15s, box-shadow .15s;
}

/* Nur die antippbaren Kacheln (Unterlagen, Titelbild) sind Schaltflaechen;
   in Schritt 1 ist die Kachel nur eine Anzeige mit Entfernen-Kreuz. */
.vbc-erf-thumb-tap {
	cursor: pointer;
}

.vbc-erf-thumb-tap:hover {
	border-color: var(--of-accent);
}

.vbc-erf-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vbc-erf-thumb-tap.ist-markiert {
	border-color: var(--of-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--of-accent) 30%, transparent);
}

/* Haken-Overlay der markierten Unterlagen */
.vbc-erf-thumb-check {
	position: absolute;
	inset: 0;
	display: none;
	place-items: center;
	background: color-mix(in srgb, var(--of-accent) 22%, transparent);
}

.vbc-erf-thumb-tap.ist-markiert .vbc-erf-thumb-check {
	display: grid;
}

.vbc-erf-thumb-check span {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--of-accent);
	color: var(--of-surface);
	display: grid;
	place-items: center;
	font-size: 15px;
	line-height: 1;
}

/* Pille "Unterlage" unten links */
.vbc-erf-thumb-badge {
	position: absolute;
	left: var(--of-space-2);
	bottom: var(--of-space-2);
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--of-accent);
	color: var(--of-surface);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.4;
}

/* Titelbild-Leiste ueber die volle Breite */
.vbc-erf-thumb-badge.vbc-erf-thumb-titelbild {
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 0;
	padding: 5px 7px;
	text-align: center;
}

.vbc-erf-thumb-entfernen {
	position: absolute;
	top: var(--of-space-2);
	right: var(--of-space-2);
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 32, 31, .72);
	color: #F2EFE9;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.vbc-erf-titelbild-pfeile,
.vbc-erf-galerie-pfeile {
	display: flex;
	gap: var(--of-space-2);
}

.vbc-erf-titelbild-pfeile button,
.vbc-erf-galerie-pfeile button {
	flex: 1;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
	border: 1px solid var(--of-line);
	border-radius: var(--of-radius-md);
	background: transparent;
	color: var(--of-neutral-400);
	font-size: 13px;
	cursor: pointer;
}

.vbc-erf-titelbild-pfeile button:hover:not(:disabled),
.vbc-erf-galerie-pfeile button:hover:not(:disabled) {
	border-color: var(--of-accent);
	color: var(--of-accent-300);
}

.vbc-erf-titelbild-pfeile button:disabled,
.vbc-erf-galerie-pfeile button:disabled {
	opacity: .4;
	cursor: not-allowed;
}

/* Galerieliste in "Prüfen": Thumb, Dateiname, Pfeile */
.vbc-erf-galerie-zeile {
	display: flex;
	align-items: center;
	gap: var(--of-space-3);
	padding: var(--of-space-2) 0;
	border-bottom: 1px solid var(--of-line);
}

.vbc-erf-galerie-zeile:last-child {
	border-bottom: 0;
}

.vbc-erf-galerie-zeile img {
	width: 56px;
	height: 42px;
	object-fit: cover;
	border-radius: var(--of-radius-sm);
	border: 1px solid var(--of-line);
	flex: none;
}

.vbc-erf-galerie-name {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	color: var(--of-neutral-400);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vbc-erf-galerie-titel-tag {
	flex: none;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--of-accent);
	color: var(--of-surface);
	font-size: 10px;
	font-weight: 500;
}

/* Ausstattungsliste */
.vbc-erf-ausstattung-zeile {
	display: flex;
	align-items: center;
	gap: var(--of-space-3);
	min-height: 44px;
	padding: 0 var(--of-space-3);
	border-radius: var(--of-radius-md);
	font-size: 14px;
	cursor: pointer;
}

.vbc-erf-ausstattung-zeile:hover {
	background: color-mix(in srgb, var(--of-accent) 6%, transparent);
}

.vbc-erf-ausstattung-zeile input {
	width: 18px;
	height: 18px;
	accent-color: var(--of-accent);
	flex: none;
}

.vbc-erf-ausstattung-text {
	flex: 1;
	min-width: 0;
}

.vbc-erf-ausstattung-marker {
	flex: none;
	font-size: 10px;
	color: var(--of-neutral-500);
}

/* ------------------------------------------------------------------ */
/* Ladezustaende                                                       */
/* ------------------------------------------------------------------ */

.vbc-erf-spinner {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid var(--of-neutral-800);
	border-top-color: var(--of-accent);
	animation: vbc-erf-drehen .9s linear infinite;
	flex: none;
}

.vbc-erf-spinner--klein {
	width: 18px;
	height: 18px;
}

@keyframes vbc-erf-drehen {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vbc-erf-spinner {
		animation-duration: 2.4s;
	}
}

/* Wartekarte der Schritte "Analyse" und "Modelldaten suchen" */
.vbc-erf-spinner-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--of-space-4);
	padding: var(--of-space-8) var(--of-space-6);
	border-radius: var(--of-radius-lg);
	background: var(--of-surface);
	box-shadow: var(--of-shadow-sm);
	text-align: center;
}

.vbc-erf-spinner-block p {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	max-width: 36ch;
}

.vbc-erf-spinner-block .vbc-erf-hinweis-text {
	font-weight: 400;
	font-size: 12px;
	color: var(--of-neutral-500);
}

/* Ladezeile mit Balken (Upload, Modelliste) */
.vbc-erf-ladezeile {
	display: flex;
	flex-direction: column;
	gap: var(--of-space-2);
}

.vbc-erf-ladezeile-kopf {
	display: flex;
	align-items: center;
	gap: var(--of-space-3);
	font-size: 12px;
	color: var(--of-neutral-400);
}

.vbc-erf-ladezeile-kopf .vbc-erf-prozent {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

.vbc-erf-ladebalken {
	height: 4px;
	border-radius: 999px;
	background: var(--of-neutral-800);
	overflow: hidden;
}

.vbc-erf-ladebalken span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--of-accent);
	transition: width .2s;
}

/* ------------------------------------------------------------------ */
/* Rueckmeldungen                                                      */
/* ------------------------------------------------------------------ */

.vbc-erf-meldung {
	display: flex;
	align-items: flex-start;
	gap: var(--of-space-3);
	padding: var(--of-space-4);
	border-radius: var(--of-radius-md);
	background: var(--of-accent-900);
	border: 1px solid var(--of-accent-700);
	font-size: 13px;
	line-height: 1.5;
	color: var(--of-accent-100);
}

.vbc-erf-meldung svg {
	flex: none;
	margin-top: 1px;
	width: 16px;
	height: 16px;
}

.vbc-erf-meldung-text {
	flex: 1;
	min-width: 0;
}

.vbc-erf-meldung.ist-fehler {
	background: color-mix(in srgb, var(--of-error) 8%, var(--of-surface));
	border-color: color-mix(in srgb, var(--of-error) 40%, transparent);
	color: var(--of-error);
}

.vbc-erf-meldung .vbc-erf-btn {
	min-height: 36px;
	padding: var(--of-space-2) var(--of-space-3);
	font-size: 13px;
}

.vbc-erf-karte,
.vbc-erf-hinweiskarte {
	padding: var(--of-space-4) var(--of-space-6);
	border-radius: var(--of-radius-md);
	background: var(--of-surface);
	box-shadow: var(--of-shadow-sm);
	font-size: 13px;
	line-height: 1.55;
	color: var(--of-neutral-400);
}

.vbc-erf-hinweiskarte p,
.vbc-erf-karte p {
	margin: 0 0 var(--of-space-2);
}

.vbc-erf-hinweiskarte p:last-child,
.vbc-erf-karte p:last-child {
	margin-bottom: 0;
}

.vbc-erf-hinweiskarte--ki {
	margin-bottom: var(--of-space-6);
}

.vbc-erf-fehlerkarte {
	display: flex;
	flex-direction: column;
	gap: var(--of-space-4);
	padding: var(--of-space-6);
	border-radius: var(--of-radius-lg);
	background: color-mix(in srgb, var(--of-error) 8%, var(--of-surface));
	border: 1px solid color-mix(in srgb, var(--of-error) 40%, transparent);
}

.vbc-erf-fehlerkarte-kopf {
	display: flex;
	align-items: center;
	gap: var(--of-space-2);
	font-size: 14px;
	font-weight: 500;
	color: var(--of-error);
}

.vbc-erf-fehlerkarte-kopf svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.vbc-erf-fehlerkarte p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--of-neutral-300);
}

/* Aufklapper "Felder mit niedriger Sicherheit prüfen" */
.vbc-erf details {
	border: 1px solid var(--of-line);
	border-radius: var(--of-radius-md);
	background: var(--of-surface);
}

.vbc-erf summary {
	display: flex;
	align-items: center;
	gap: var(--of-space-3);
	min-height: 44px;
	padding: 0 var(--of-space-4);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.vbc-erf summary::-webkit-details-marker {
	display: none;
}

.vbc-erf summary::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--of-warning);
	flex: none;
}

.vbc-erf details > div {
	padding: 0 var(--of-space-4) var(--of-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--of-space-6);
}

.vbc-erf-verbrauch-hinweis {
	margin: 0;
	font-size: 11px;
	color: var(--of-neutral-500);
}

/* ------------------------------------------------------------------ */
/* Schritt 9: Zusammenfassung und feste Vorschau                       */
/* ------------------------------------------------------------------ */

.vbc-erf-abschluss {
	display: flex;
	flex-direction: column;
	gap: var(--of-space-3);
	padding: var(--of-space-6);
	border-radius: var(--of-radius-lg);
	background: var(--of-surface);
	box-shadow: var(--of-shadow-sm);
}

.vbc-erf-abschluss-kicker {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--of-accent-300);
}

.vbc-erf-abschluss-titel {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
}

.vbc-erf-abschluss-meta {
	font-size: 13px;
	color: var(--of-neutral-400);
}

.vbc-erf-abschluss-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--of-space-2);
}

.vbc-erf-chip {
	font-size: 11px;
	font-weight: 500;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--of-accent-900);
	color: var(--of-accent-300);
	border: 1px solid var(--of-accent-700);
}

/* Offene Felder: transparente Flaeche - --of-neutral-900 ist im dunklen
   Theme derselbe Wert wie --of-surface und waere dort unsichtbar. */
.vbc-erf-chip.ist-offen {
	background: transparent;
	color: var(--of-neutral-400);
	border-color: var(--of-line);
}

.vbc-erf-vorschau-fest {
	display: flex;
	flex-direction: column;
	gap: var(--of-space-4);
	padding-top: var(--of-space-4);
	border-top: 1px solid var(--of-line);
}

.vbc-erf-vorschau-fest-kopf {
	display: flex;
	align-items: baseline;
	gap: var(--of-space-3);
}

.vbc-erf-vorschau-vollbild {
	margin-left: auto;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	color: var(--of-accent-300);
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Overlays                                                            */
/* ------------------------------------------------------------------ */

.vbc-erf-overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--of-space-6);
	background: rgba(20, 32, 31, .55);
}

.vbc-erf-overlay--arbeit {
	z-index: 70;
	background: rgba(20, 32, 31, .6);
}

.vbc-erf-overlay-karte {
	display: flex;
	flex-direction: column;
	gap: var(--of-space-4);
	width: 100%;
	max-width: 400px;
	padding: var(--of-space-8);
	border-radius: var(--of-radius-lg);
	background: var(--of-surface);
	box-shadow: var(--of-shadow-lg);
}

.vbc-erf-overlay-karte h5 {
	font-size: 17px;
}

.vbc-erf-overlay-karte p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--of-neutral-400);
}

.vbc-erf-arbeit-karte {
	align-items: center;
	text-align: center;
	max-width: 320px;
}

.vbc-erf-arbeit-karte .vbc-erf-spinner {
	width: 30px;
	height: 30px;
}

.vbc-erf-arbeit-karte p {
	color: var(--of-neutral-300);
}

/* Vollbild-Vorschau */
.vbc-erf-overlay--vorschau {
	padding: 0;
	background: var(--of-bg);
	align-items: stretch;
}

.vbc-erf-overlay-karte-voll {
	max-width: none;
	width: 100%;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	gap: 0;
}

.vbc-erf-vorschau-kopf {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	gap: var(--of-space-3);
	padding: var(--of-space-3) var(--of-space-6);
	background: var(--of-surface);
	border-bottom: 1px solid var(--of-line);
	font-size: 14px;
	font-weight: 500;
}

.vbc-erf-vorschau-schliessen {
	margin-left: auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--of-radius-md);
	background: transparent;
	color: var(--of-neutral-400);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.vbc-erf-vorschau-schliessen:hover {
	color: var(--of-text);
}

#vbc-erf-vorschau-inhalt {
	flex: 1;
	overflow-y: auto;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: var(--of-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--of-space-6);
}

/* Vorschau-Inhalt (Overlay und feste Karte teilen die Bausteine) */
.vbc-erf-vorschau-karte {
	border-radius: var(--of-radius-lg);
	background: var(--of-surface);
	box-shadow: var(--of-shadow-sm);
	overflow: hidden;
}

.vbc-erf-vorschau-karte-inhalt {
	display: flex;
	flex-direction: column;
	gap: var(--of-space-4);
	padding: var(--of-space-6);
}

.vbc-erf-vorschau-bild {
	aspect-ratio: 4 / 3;
	border-radius: var(--of-radius-lg);
	background: linear-gradient(160deg, var(--of-neutral-900), var(--of-bg));
	display: grid;
	place-items: center;
	overflow: hidden;
	color: var(--of-neutral-500);
	font-size: 12px;
}

.vbc-erf-vorschau-karte .vbc-erf-vorschau-bild {
	border-radius: 0;
}

.vbc-erf-vorschau-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vbc-erf-vorschau-kicker {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--of-accent-300);
}

.vbc-erf-vorschau-titel {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.015em;
}

.vbc-erf-vorschau-karte .vbc-erf-vorschau-titel {
	font-size: 20px;
}

.vbc-erf-vorschau-meta {
	font-size: 13px;
	color: var(--of-neutral-400);
}

.vbc-erf-vorschau-preis {
	font-size: 20px;
	font-weight: 500;
	color: var(--of-accent-300);
}

.vbc-erf-vorschau-karte .vbc-erf-vorschau-preis {
	font-size: 17px;
}

.vbc-erf-vorschau-preis del {
	font-size: .75em;
	color: var(--of-neutral-500);
	margin-right: var(--of-space-2);
}

.vbc-erf-vorschau-badge {
	display: inline-block;
	margin-left: var(--of-space-2);
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--of-accent-900);
	border: 1px solid var(--of-accent-700);
	font-size: 11px;
	font-weight: 500;
	vertical-align: middle;
}

.vbc-erf-vorschau-kennzahlen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--of-space-4);
	margin: 0;
	font-size: 13px;
}

.vbc-erf-vorschau-kennzahlen dt,
.vbc-erf-vorschau-kennzahlen dd {
	margin: 0;
	padding: var(--of-space-2) 0;
	border-bottom: 1px solid var(--of-line);
}

.vbc-erf-vorschau-kennzahlen dt {
	color: var(--of-neutral-500);
}

.vbc-erf-vorschau-beschreibung {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--of-neutral-300);
}

.vbc-erf-vorschau-karte .vbc-erf-vorschau-beschreibung {
	font-size: 13px;
}

.vbc-erf-vorschau-ausstattung {
	margin: 0;
	padding-left: var(--of-space-6);
	font-size: 13px;
	line-height: 1.6;
	color: var(--of-neutral-300);
}

.vbc-erf-vorschau-galerie {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--of-space-2);
}

.vbc-erf-vorschau-galerie img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--of-radius-sm);
	display: block;
}

/* ------------------------------------------------------------------ */
/* Anmeldung (nicht eingeloggt)                                        */
/* ------------------------------------------------------------------ */

.vbc-erf-login {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: var(--of-space-8) var(--of-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--of-space-4);
}

.vbc-erf-login form {
	display: flex;
	flex-direction: column;
	gap: var(--of-space-4);
	padding: var(--of-space-8);
	border-radius: var(--of-radius-lg);
	background: var(--of-surface);
	box-shadow: var(--of-shadow-sm);
}

.vbc-erf-login p {
	margin: 0;
}

.vbc-erf-login label {
	display: block;
	font-size: 12px;
	color: color-mix(in srgb, var(--of-text) 70%, transparent);
}

.vbc-erf-login input[type="text"],
.vbc-erf-login input[type="password"] {
	width: 100%;
	min-height: 44px;
	margin-top: var(--of-space-2);
	padding: 9px 11px;
	font-family: inherit;
	font-size: 16px;
	color: var(--of-text);
	background: var(--of-input-bg);
	border: 1px solid var(--of-line);
	border-radius: var(--of-radius-md);
}

.vbc-erf-login .login-remember label {
	display: flex;
	align-items: center;
	gap: var(--of-space-2);
	font-size: 13px;
}

.vbc-erf-login .login-submit input[type="submit"] {
	width: 100%;
	min-height: 44px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--of-accent-300);
	background: transparent;
	border: 1px solid var(--of-accent);
	border-radius: var(--of-radius-md);
	cursor: pointer;
}

.vbc-erf-login .login-submit input[type="submit"]:hover {
	background: color-mix(in srgb, var(--of-accent) 12%, transparent);
}

.vbc-erf-hinweis {
	margin: 0;
	padding: var(--of-space-4);
	border-radius: var(--of-radius-md);
	background: var(--of-accent-900);
	border: 1px solid var(--of-accent-700);
	font-size: 13px;
	line-height: 1.5;
	color: var(--of-accent-100);
}

.vbc-erf-hinweis.ist-fehler {
	background: color-mix(in srgb, var(--of-error) 8%, var(--of-surface));
	border-color: color-mix(in srgb, var(--of-error) 40%, transparent);
	color: var(--of-error);
}

.vbc-erf-hinweis.ist-abgemeldet {
	background: var(--of-surface);
	border-color: var(--of-line);
	color: var(--of-neutral-400);
}

/* ------------------------------------------------------------------ */
/* Enge Bildschirme                                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 400px) {
	.vbc-pi-kopf-innen {
		gap: var(--of-space-2);
	}

	.vbc-pi-kopf-logo {
		width: 64px;
	}

	.vbc-pi-kopf-trenner {
		display: none;
	}

	.vbc-pi-kopf-wort {
		font-size: 13px;
	}

	.vbc-pi-kopf-links {
		gap: var(--of-space-3);
	}

	.vbc-pi-kopf-links a {
		font-size: 12px;
	}

	.vbc-erf-btn {
		padding-left: var(--of-space-3);
		padding-right: var(--of-space-3);
	}

	/* "Verwerfen" in der Aktionsleiste wird zum Icon-Button; die Beschriftung
	   bleibt fuer Screenreader im DOM. */
	.vbc-erf-btn-knapp {
		width: 44px;
		padding-left: 0;
		padding-right: 0;
	}

	.vbc-erf-btn-knapp .vbc-erf-btn-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.vbc-erf-vorschau-kennzahlen {
		grid-template-columns: 1fr;
	}

	.vbc-erf-vorschau-kennzahlen dt {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

@media (max-width: 340px) {
	.vbc-erf-fortschritt-schritt {
		width: 23px;
		height: 23px;
		font-size: 11px;
	}
}