/* Flyer AI proofing: entirely namespaced to the AI order panel. */
.ai__preflight,
.ai__proof {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid #d7e4e4;
  border-radius: 12px;
  color: #17434a;
  background: #f2f8f8;
  font-size: .84rem;
  line-height: 1.55;
}
.ai__preflight[hidden], .ai__proof[hidden] { display: none !important; }
.ai__preflight > strong, .ai__proof > strong { display: block; color: #045b62; margin-bottom: .35rem; }
.ai__preflight ul { margin: .4rem 0 0 1.1rem; padding: 0; }
.ai__preflight li + li { margin-top: .35rem; }
.ai__proof { background: #fff; }
.ai__proof p { margin: 0 0 .7rem; color: #597377; }
.ai__proof h4 { margin: .7rem 0 .3rem; font-size: .83rem; color: #045b62; }
.ai__proof-item { display: grid; grid-template-columns: minmax(5.5rem, 28%) minmax(0, 1fr); column-gap: .7rem; padding: .45rem 0; border-bottom: 1px solid #e9efef; }
.ai__proof-item > span:first-child { color: #688083; font-size: .78rem; }
.ai__proof-item > span:last-child { font-weight: 550; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 520px) { .ai__proof-item { grid-template-columns: 1fr; row-gap: .15rem; } }

.ai__proof-item.is-fixed { background: #fff8e6; border-radius: 6px; padding-inline: .5rem; margin-block: .15rem .35rem; }
.ai__proof-item.is-fixed > span:first-child { color: #8a5a00; }
.ai__proof .ai__proof-debug { margin: .7rem 0 0; font-size: .75rem; color: #8a9a9d; }

/* 1.51.0: KI-Entwurf – the quiet cart button says why it is not ready yet */
.vk-buy__why {
	display: none;
	margin: var(--space-2) 0 0;
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	color: var(--color-text-muted);
	text-align: center;
}

.wizard--card.is-untaken .vk-buy .vk-buy__why {
	display: block;
}

/* 1.51.4: KI-Guthaben as a line above «KI-Guthaben: 47 von 50 übrig» (like the chat credit) */
.vk-credit {
	--vk-tone: var(--color-success, #12805C);
	--vk-tone-text: var(--color-success, #12805C);
	display: grid;
	gap: var(--space-1);
	margin-top: var(--space-3);
	justify-self: stretch; /* 1.52.4: full width – the theme's .vk-gen sets its items to the start, so it was only as wide as its label */
}

.vk-credit[hidden] {
	display: none;
}

.vk-credit[data-tone="low"] {
	--vk-tone: #E8890C;
	--vk-tone-text: #A85F00;
}

.vk-credit[data-tone="crit"] {
	--vk-tone: var(--color-error);
	--vk-tone-text: var(--color-error);
}

.vk-credit__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	font-size: var(--fs-xs);
	line-height: 1.2;
	color: var(--color-text-muted);
}

.vk-credit__num {
	color: var(--vk-tone-text);
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
	transition: color 300ms var(--ease-out);
}

.vk-credit__track {
	display: block;
	height: 4px;
	border-radius: var(--radius-pill);
	background: var(--color-border);
	overflow: hidden;
}

.vk-credit__fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--vk-tone);
	transition:
		width 600ms var(--ease-out),
		background-color 300ms var(--ease-out);
}

.vk-credit + .vk-gen__meta {
	margin-top: var(--space-1);
}

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

/* 1.52.7: big view – the picture alone on the dark backdrop (before: a light box around it), the page behind does
   not scroll, and the side switch lies small on the picture, top right (with a mouse it comes up on hover). */
html.is-zoom-open,
html.is-zoom-open body {
	overflow: hidden;
}

dialog.vk-zoom--bare {
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: var(--space-4);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: hidden;
	overscroll-behavior: contain;
}

dialog.vk-zoom--bare[open] {
	display: grid;
	place-items: center;
}

dialog.vk-zoom--bare::backdrop {
	background: rgb(8 18 19 / 0.88);
}

.vk-zoom--bare .vk-zoom__close {
	position: fixed;
	top: var(--space-4);
	right: var(--space-4);
	z-index: 2;
}

.vk-zoom--bare .vk-zoom__stage {
	width: 100%;
	height: 100%;
	outline: none; /* it takes the focus on opening (so ← / → work), without a ring around the whole screen */
	pointer-events: none; /* a click beside the picture lands on the dialog and closes it */
}

.vk-zoom--bare .vk-zoom__frame {
	position: relative;
	width: min(calc(100vw - 2 * var(--space-4) - 2 * var(--space-12)), calc((100dvh - 2 * var(--space-4)) * var(--vk-ratio)));
	pointer-events: auto;
}

.vk-zoom--bare .vk-zoom__stage:focus-visible {
	box-shadow: none; /* the theme's focus ring would frame the whole screen */
}

.vk-zoom--bare .vk-zoom__card {
	width: 100%;
	box-shadow: 0 24px 64px rgb(0 0 0 / 0.45);
	will-change: transform;
}

.vk-zoom__flip {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: 2rem;
	padding: 0 var(--space-3) 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-secondary);
	color: var(--color-on-secondary);
	font: inherit;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	transition:
		background-color 300ms var(--ease-out),
		color 300ms var(--ease-out),
		opacity 300ms var(--ease-out),
		transform 300ms var(--ease-out);
}

.vk-zoom__flip[hidden] {
	display: none;
}

/* Both words sit in the same place, only one is visible – the button keeps the width of the longer one. */
.vk-zoom__flip-text {
	display: grid;
}

.vk-zoom__flip-text > span {
	grid-area: 1 / 1;
	text-align: center;
}

.vk-zoom__flip[data-to="back"] [data-flip-to="front"],
.vk-zoom__flip[data-to="front"] [data-flip-to="back"] {
	visibility: hidden;
}

.vk-zoom__flip .icon {
	--icon-size: 1rem;
	width: 1rem;
	height: 1rem;
	transition: transform var(--dur-slow) var(--ease-out);
}

/* 1.52.20: hover only with a mouse – on phones the lime stayed after a tap */
@media (hover: hover) and (pointer: fine) {
	.vk-zoom__flip:hover {
		background: var(--c-lime-400, #BADD00);
		color: var(--c-key-900, #1D1D1B);
	}

	.vk-zoom__flip:hover .icon {
		transform: rotate(-180deg);
	}
}

.vk-zoom__flip:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

@media (hover: hover) and (pointer: fine) {
	.vk-zoom__flip {
		opacity: 0;
		transform: translateY(-4px);
	}

	.vk-zoom__frame:is(:hover, :focus-within) .vk-zoom__flip {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 767px) {
	.vk-zoom--bare .vk-zoom__frame {
		width: min(calc(100vw - 2 * var(--space-4)), calc((100dvh - 2 * var(--space-4) - var(--space-12) - var(--vk-zoom-legend, 0px)) * var(--vk-ratio)));
	}
}

/* --------------------------------------------------------------------------
   1.52.38: Hilfslinien in the big view. The picture is always the whole print file and never moves or changes size;
   the button (top left, like the flip button top right) only draws the lines on it. The legend's place below is
   always kept, so switching never changes the picture's size.
   -------------------------------------------------------------------------- */
dialog.vk-zoom--bare {
	--vk-zoom-legend: 3.5rem;
	padding-bottom: calc(var(--space-4) + var(--vk-zoom-legend)); /* the legend's place */
}

@media (min-width: 768px) {
	.vk-zoom--bare .vk-zoom__frame {
		width: min(calc(100vw - 2 * var(--space-4) - 2 * var(--space-12)), calc((100dvh - 2 * var(--space-4) - var(--vk-zoom-legend)) * var(--vk-ratio)));
	}
}

.vk-zoom__card .vk-zoom__art {
	inset: 0;
	width: 100%;
	height: 100%;
}

.vk-zoom__lines {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}

.vk-zoom__frame.is-guides .vk-zoom__lines {
	opacity: 1;
}

.vk-zoom__lines > span {
	position: absolute;
}

/* The band that is cut off: thin see-through stripes over the design (it is part of the print file). */
.vk-zoom__bleed {
	inset: 0;
	background: var(--guide-hatch);
	clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--zbx) var(--zby), var(--zbx) calc(100% - var(--zby)), calc(100% - var(--zbx)) calc(100% - var(--zby)), calc(100% - var(--zbx)) var(--zby), var(--zbx) var(--zby));
}

.vk-zoom__trim {
	inset: var(--zby) var(--zbx);
	box-shadow: 0 0 0 1px var(--color-text), 0 0 0 var(--guide-halo) rgb(255 255 255 / 0.7);
}

.vk-zoom__safe {
	inset: var(--zsy) var(--zsx);
	border: var(--guide-line) dashed var(--c-cyan-500);
}

.vk-zoom__guides {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 2rem;
	padding: 0 var(--space-3) 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-secondary);
	color: var(--color-on-secondary);
	font: inherit;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	transition:
		background-color 300ms var(--ease-out),
		color 300ms var(--ease-out),
		opacity 300ms var(--ease-out),
		transform 300ms var(--ease-out);
}

.vk-zoom__guides:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Small switch in the button: the thumb slides. */
.vk-zoom__sw {
	position: relative;
	flex: none;
	width: 1.75rem;
	height: 1rem;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 0.3);
	transition: background-color 300ms var(--ease-out);
}

.vk-zoom__sw::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--c-white, #fff);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
	transition: transform 300ms var(--ease-out), background-color 300ms var(--ease-out);
}

.vk-zoom__guides[aria-pressed="true"] .vk-zoom__sw {
	background: var(--c-lime-400, #BADD00);
}

.vk-zoom__guides[aria-pressed="true"] .vk-zoom__sw::after {
	transform: translateX(0.75rem);
	background: var(--c-key-900, #1D1D1B);
}

@media (hover: hover) and (pointer: fine) {
	.vk-zoom__guides:hover {
		background: var(--c-lime-400, #BADD00);
		color: var(--c-key-900, #1D1D1B);
	}

	.vk-zoom__guides:hover .vk-zoom__sw {
		background: rgb(29 29 27 / 0.25);
	}

	.vk-zoom__guides[aria-pressed="true"]:hover .vk-zoom__sw {
		background: var(--c-key-900, #1D1D1B);
	}

	.vk-zoom__guides[aria-pressed="true"]:hover .vk-zoom__sw::after {
		background: var(--c-lime-400, #BADD00);
	}

	/* Like the flip button: shown when the mouse is over the picture (and always while switched on). */
	.vk-zoom__guides {
		opacity: 0;
		transform: translateY(-4px);
	}

	.vk-zoom__frame:is(:hover, :focus-within) .vk-zoom__guides,
	.vk-zoom__guides[aria-pressed="true"] {
		opacity: 1;
		transform: none;
	}
}

.vk-zoom__legend {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-1) var(--space-4);
	padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px));
	color: rgb(255 255 255 / 0.86);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-base) var(--ease-out);
}

.vk-zoom__legend[aria-hidden="false"] {
	opacity: 1;
}

.vk-zoom__legend .vk-legend__item {
	color: inherit;
	white-space: normal;
}

.vk-zoom__legend .vk-legend__key--trim {
	border-top-color: var(--c-white, #fff);
}

.vk-zoom__dims {
	width: 100%;
	text-align: center;
	font-size: var(--fs-xs);
	color: rgb(255 255 255 / 0.6);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
	dialog.vk-zoom--bare {
		--vk-zoom-legend: 5rem;
	}
}

/* 1.52.16: the side that faces away is also hidden (switched in the middle of the turn). Some views – a page saved as
   PDF or a full-page screenshot – ignore backface-visibility and showed the back mirrored over the front. */
.vk-card .vk-face {
	transition:
		border-radius var(--dur-base) var(--ease-out),
		background-color var(--dur-slow) var(--ease-out),
		visibility 0s linear calc(var(--dur-flip) / 2);
}

.vk-card:not(.is-back) .vk-face--back,
.vk-card.is-back .vk-face--front {
	visibility: hidden;
}

/* 1.52.21: «KI entscheidet» – the last style tile and the style line without a picture */
.vk-style--auto .vk-style__img {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--space-1);
	padding: var(--space-2);
	background: var(--color-secondary-soft, #E6F1F1);
	color: var(--color-secondary);
	text-align: center;
}

.vk-style--auto .vk-style__img .icon {
	width: 1.5rem;
	height: 1.5rem;
}

.vk-style--auto .vk-style__img span {
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	color: var(--color-text-muted);
}

.vk-pick-style__thumb.is-auto {
	display: grid;
	place-items: center;
	background: var(--color-secondary-soft, #E6F1F1);
	color: var(--color-secondary);
}

.vk-pick-style__thumb.is-auto .icon {
	width: 1.375rem;
	height: 1.375rem;
}


/* --------------------------------------------------------------------------
   1.52.25 «Ihre Angaben» of business cards: one text per row, each with an
   arrow that moves it to the other side (sheet-angaben.js). The arrow points
   to the other side: right/left when the sides stand next to each other,
   down/up when they are stacked.
   -------------------------------------------------------------------------- */
.vk-angaben .vk-sidecard__fields--list {
	grid-template-columns: minmax(0, 1fr);
}

.vk-angaben .vk-sidecard__fields--list > .vk-sidecard__cell {
	grid-column: 1 / -1;
	border-radius: var(--radius-control);
}

.vk-angaben .vk-sidecard__fields--list .input {
	padding-inline-end: calc(var(--space-2) + 2.75rem);
}

.vk-sidecard__mv {
	position: absolute;
	z-index: 1;
	top: calc(var(--control-h) / 2);
	right: var(--space-2);
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--color-secondary);
	cursor: pointer;
	translate: 0 -50%;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
	--icon-size: var(--icon-sm);
}

.vk-sidecard__mv[hidden] {
	display: none;
}

@media (hover: hover) {
	.vk-sidecard__mv:hover {
		background: var(--color-secondary-soft);
	}
}

.vk-sidecard__mv:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vk-sidecard__mv .icon {
	rotate: 90deg; /* Stacked: the front points down to the back … */
	transition: rotate var(--dur-base) var(--ease-out);
}

[data-angaben-list="back"] .vk-sidecard__mv .icon {
	rotate: -90deg; /* … and the back up to the front. */
}

@container angaben (min-width: 46rem) {
	.vk-sidecards.is-two .vk-sidecard__mv .icon {
		rotate: 0deg;
	}

	.vk-sidecards.is-two [data-angaben-list="back"] .vk-sidecard__mv .icon {
		rotate: 180deg;
	}
}

.vk-angaben .vk-sidecard__fields--list > .vk-sidecard__cell.is-moved {
	animation: vk-angaben-moved 1.2s var(--ease-out);
}

.vk-sidecard__empty {
	margin: 0;
	color: var(--color-text-subtle);
	font-size: var(--fs-sm);
}

.vk-sidecard__empty[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.vk-sidecard__mv .icon {
		transition: none;
	}

	.vk-angaben .vk-sidecard__fields--list > .vk-sidecard__cell.is-moved {
		animation: none;
	}
}

/* 1.52.39: the colours read from the uploaded logo, as small dots in the file line (no extra box). */
.vk-upload__colors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-3);
	margin-top: var(--space-1);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.vk-upload__colors[hidden] {
	display: none;
}

.vk-upload__colors b {
	font-weight: var(--fw-medium, 500);
	color: var(--color-text);
}

.vk-upload__color {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-variant-numeric: tabular-nums;
}

.vk-upload__color i {
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
}

/* 1.52.39: the logo preview is always a square (wide and tall logos sit inside it, with a little air). */
[data-card-upload="logo"] .vk-upload__thumb.has-page {
	width: 4.5rem;
	max-width: none;
	height: 4.5rem;
	aspect-ratio: 1;
}

[data-card-upload="logo"] .vk-upload__thumb.has-page img {
	inset: 6px;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
}

/* 1.52.44: guests – the drafts stay in this browser only; signing in keeps them in «Mein Konto». */
.vk-ai__guest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3, 12px);
	margin-top: var(--space-3, 12px);
	padding-top: var(--space-3, 12px);
	border-top: 1px solid var(--color-border, #dce5e5);
}
.vk-ai__guest p {
	flex: 1 1 17.5rem;
	margin: 0;
	font-size: 0.9rem;
}
.vk-ai__guest p span { color: var(--color-text-muted, #52696a); }
.vk-ai__guest-go {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 8px);
}

/* --------------------------------------------------------------------------
   1.52.44: zoom in the big view. The bar sits on top (− 100 % + Einpassen); 100 % = real size of the print file.
   The picture gets its width from the script; bigger than the screen, the stage scrolls.
   -------------------------------------------------------------------------- */
dialog.vk-zoom--bare:has(.vk-zoom__bar) {
	padding-top: calc(var(--space-4) + 3.25rem + env(safe-area-inset-top, 0px));
}

.vk-zoom--bare .vk-zoom__stage.is-sized {
	display: flex;
	overflow: auto;
	padding: var(--space-4);
	pointer-events: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.vk-zoom--bare .vk-zoom__stage.is-sized .vk-zoom__frame {
	flex: none;
	width: var(--vk-zw);
	margin: auto;
	transition: width 320ms var(--ease-out);
}

.vk-zoom__bar {
	position: fixed;
	top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
	left: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1);
	border-radius: var(--radius-pill);
	background: #203435;
	color: var(--c-white, #fff);
	transform: translateX(-50%);
}

.vk-zoom__bar button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-width: 2.25rem;
	height: 2.25rem;
	margin: 0;
	padding: 0 var(--space-3);
	border: 0;
	border-radius: var(--radius-pill);
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out);
}

.vk-zoom__bar button:disabled {
	opacity: 0.35;
	cursor: default;
}

.vk-zoom__bar button svg {
	width: 1rem;
	height: 1rem;
}

.vk-zoom__bar .vk-zoom__pct {
	min-width: 4rem;
	font-variant-numeric: tabular-nums;
}

.vk-zoom__bar .vk-zoom__pct.is-real {
	background: var(--color-accent, #badd00);
	color: var(--c-black, #000);
}

.vk-zoom__bar .vk-zoom__fit {
	font-weight: var(--fw-medium, 500);
}

.vk-zoom__bar button:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

@media (hover: hover) and (pointer: fine) {
	.vk-zoom__bar button:not(:disabled):hover {
		background: rgb(255 255 255 / 0.18);
	}

	.vk-zoom__bar .vk-zoom__pct.is-real:hover {
		background: var(--color-accent, #badd00);
	}
}

@media (max-width: 520px) {
	.vk-zoom__bar {
		left: var(--space-3);
		max-width: calc(100vw - 4.75rem);
		overflow-x: auto;
		scrollbar-width: none;
		transform: none;
	}

	.vk-zoom__bar::-webkit-scrollbar {
		display: none;
	}

	.vk-zoom__bar button {
		padding: 0 0.5625rem;
	}

	.vk-zoom__bar .vk-zoom__pct {
		min-width: 3.375rem;
	}

	.vk-zoom__bar .vk-zoom__fit span {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vk-zoom--bare .vk-zoom__stage.is-sized .vk-zoom__frame {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   1.52.45: Falzflyer – fold lines and page names on the open sheet, «Falten ansehen» (fold-view.js).
   -------------------------------------------------------------------------- */
/* 1.55.6: one layer per side on the card – it turns with the paper (1px over its face, the other side hidden). */
.vk-card > .vk-folds {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(1px);
	transition: visibility 0s linear calc(var(--dur-flip) / 2);
}

.vk-card > .vk-folds--back {
	transform: rotateY(180deg) translateZ(1px);
}

.vk-card:not(.is-back) > .vk-folds--back,
.vk-card.is-back > .vk-folds--front {
	visibility: hidden;
}

.vk-folds__v,
.vk-folds__h {
	position: absolute;
}

.vk-folds__v {
	top: calc(-1 * var(--space-2));
	bottom: calc(-1 * var(--space-2));
	border-left: 1.5px dashed var(--c-magenta-500, #e6007e);
}

.vk-folds__h {
	right: calc(-1 * var(--space-2));
	left: calc(-1 * var(--space-2));
	border-top: 1.5px dashed var(--c-magenta-500, #e6007e);
}

.vk-folds__name {
	position: absolute;
	top: 0;
	bottom: 0;
	display: grid;
	place-content: center;
	gap: 2px;
	padding: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: 1.25;
	text-align: center;
	transition: opacity var(--dur-base) var(--ease-out);
}

.vk-folds__name b {
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

.vk-folds__name small {
	font-variant-numeric: tabular-nums;
}

.vk-folds.has-art .vk-folds__name {
	opacity: 0;
}

.vk-foldplay {
	position: absolute;
	bottom: var(--space-2);
	left: var(--space-3);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 2.25rem;
	padding: 0 var(--space-3) 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-secondary);
	color: var(--color-on-secondary);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	box-shadow: var(--shadow-xs);
	cursor: pointer;
	transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out);
}

.vk-foldplay svg {
	width: 1.125rem;
	height: 1.125rem;
}

@media (hover: hover) and (pointer: fine) {
	.vk-foldplay:hover {
		background: var(--c-lime-400, #badd00);
		color: var(--c-black, #000);
	}
}

.vk-foldplay:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.vk-foldplay:disabled {
	opacity: 0.6;
	cursor: default;
}

.vk-foldview {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	background: var(--color-surface-alt);
}

.vk-foldview[hidden],
.vk-stage.is-slim :is(.vk-folds, .vk-foldplay, .vk-foldview) {
	display: none;
}

.vk-fv__holder {
	position: relative;
	perspective: 2200px;
	transform-style: preserve-3d;
}

.vk-fv__sheet {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 700ms var(--ease-out);
}

.vk-fv__p {
	position: absolute;
	top: 0;
	transform-style: preserve-3d;
	transition: transform 900ms var(--ease-out);
}

.vk-fv__face {
	position: absolute;
	inset: 0;
	background-color: var(--c-white, #fff);
	background-repeat: no-repeat;
	box-shadow: 0 1px 3px rgb(10 30 30 / 0.14);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.vk-fv__face.is-in {
	background-color: var(--color-surface, #f6f8f8);
	transform: rotateY(180deg);
}

.vk-fv__face.is-empty {
	display: grid;
	place-items: center;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

.vk-pick__icon--fold {
	color: var(--color-secondary);
}

.vk-pick__icon--fold svg {
	width: 2.25rem;
	height: 1.5rem;
	overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
	.vk-fv__sheet,
	.vk-fv__p {
		transition: none;
	}
}

/* 1.52.46: Falzflyer – the page names say what goes where (no «erscheint hier» note over them); the size line
   moves to the middle, «Falten ansehen» keeps the left corner. */
.vk-scene:has(.vk-folds) .vk-face__empty {
	display: none;
}

/* 1.52.49: Falzflyer – no size line on the stage: the page names give every width, the price box the open size
   (at the bottom «Falten ansehen» and the zoom button take the room, at the top it ran into the wide sheet). */
.vk-stage__box:has(.vk-foldplay) .vk-stage__size {
	display: none;
}

/* 1.52.47: over a design the fold lines show only with «Hilfslinien» (the page names hide already). */
.vk-folds.has-art:not(.is-guides) :is(.vk-folds__v, .vk-folds__h) {
	opacity: 0;
}

.vk-folds__v,
.vk-folds__h {
	transition: opacity var(--dur-base) var(--ease-out);
}

/* 1.52.49: Falzflyer – the folds in the big view and their key in both legends (1.52.56: own switch «Falzlinien»). */
.vk-zoom__foldlines {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}

.vk-zoom__frame.is-folds .vk-zoom__foldlines {
	opacity: 1;
}

.vk-zoom__foldlines > span {
	position: absolute;
}

.vk-zoom__foldlines > .vk-zoom__fold {
	width: 0;
	margin-left: calc(var(--guide-line) / -2);
	border-left: var(--guide-line) dashed var(--c-magenta-500, #e6007e);
	box-shadow: 0 0 0 var(--guide-halo) rgb(255 255 255 / 0.55);
}

.vk-zoom__foldlines > .vk-zoom__fold.is-h {
	width: auto;
	height: 0;
	margin: calc(var(--guide-line) / -2) 0 0;
	border-top: var(--guide-line) dashed var(--c-magenta-500, #e6007e);
	border-left: 0;
}

.vk-legend__key--fold {
	height: 0;
	border-top: var(--guide-line) dashed var(--c-magenta-500, #e6007e);
}

/* 1.52.56: Hilfslinien and Falzlinien side by side, top left of the big picture. */
.vk-zoom__toggles {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.vk-zoom__toggles .vk-zoom__guides {
	position: static;
}

.vk-zoom__legend:not(.is-guides) .vk-legend__item:not(.is-fold),
.vk-zoom__legend:not(.is-folds) .vk-legend__item.is-fold {
	display: none;
}

/* 1.52.74: tools under the menu field – plain rows, no extra frames. */
.ai-mt { margin: calc(-1 * var(--space-1, .25rem)) 0 var(--space-3, .75rem); }
.ai-mt__lead { margin: calc(-1 * var(--space-2, .5rem)) 0 var(--space-3, .75rem); padding-left: calc(var(--space-4, 1rem) + var(--control-border, 1px)); font-size: var(--fs-sm, .875rem); line-height: var(--lh-snug, 1.4); color: var(--color-text-muted, #597377); }
.ai-mt__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, .5rem); }
.ai-mt__price { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); }
.ai-mt__select { width: auto; min-width: 6.5rem; min-height: 0; height: var(--control-h-sm, 2.25rem); padding-block: 0; font-size: var(--fs-sm, .875rem); }
.ai-mt__undo { padding: 0; border: 0; background: none; color: var(--color-text-muted, #597377); font: inherit; font-size: var(--fs-sm, .875rem); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ai-mt__undo[hidden] { display: none; }
.ai-mt__status { min-height: 1.2em; margin: var(--space-2, .5rem) 0 0; padding-left: calc(var(--space-4, 1rem) + var(--control-border, 1px)); font-size: var(--fs-sm, .875rem); line-height: var(--lh-snug, 1.4); color: var(--color-text-muted, #597377); }
.ai-mt__status:empty { display: none; }

.ai-mt__chips { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem); margin: calc(-1 * var(--space-1, .25rem)) 0 var(--space-3, .75rem); }
.ai-mt__chip { padding: .3rem .75rem; border: 1px solid var(--color-border, #d7e4e4); border-radius: 999px; background: var(--color-surface, #fff); color: var(--color-text, #17434a); font: inherit; font-size: var(--fs-xs, .8rem); line-height: 1.3; cursor: pointer; transition: border-color var(--dur-fast, .15s) ease, background-color var(--dur-fast, .15s) ease; }
@media (hover: hover) {
	.ai-mt__chip:hover { border-color: var(--color-primary, #045b62); }
}
.ai-mt__chip:focus-visible { outline: 2px solid var(--color-primary, #045b62); outline-offset: 2px; }

.ai-mt__preview { margin: var(--space-3, .75rem) 0 0; }
.ai-mt__pnote { margin: var(--space-2, .5rem) 0 0; font-size: var(--fs-sm, .875rem); line-height: var(--lh-snug, 1.4); color: var(--color-text-muted, #597377); }
.ai-mt__pnote.is-warn { color: var(--color-danger, #b3261e); }
.ai-mt__pnote[hidden], .ai-mt__sheets[hidden] { display: none; }
.ai-mt__sheets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3, .75rem); margin: var(--space-3, .75rem) 0 0; transition: opacity var(--dur-fast, .15s) ease; }
.ai-mt__sheets.is-stale { opacity: .45; }
.ai-mt__sheet { margin: 0; }
.ai-mt__sheet.is-wide { grid-column: 1 / -1; }
.ai-mt__sheet img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.ai-mt__sheet figcaption { margin-top: var(--space-1, .25rem); font-size: var(--fs-xs, .8rem); color: var(--color-text-muted, #597377); text-align: center; }
.ai-mt .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 1.52.75: «Speisekarte hochladen» – a button that opens the file picker (the input stays reachable by keyboard). */
.ai-mt__upload { position: relative; cursor: pointer; }
.ai-mt__file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.ai-mt__upload:focus-within { outline: 2px solid var(--color-primary, #045b62); outline-offset: 2px; }
.ai-mt.is-busy .ai-mt__row { opacity: .6; pointer-events: none; }
/* On the Falzflyer page the tools sit in the grid of the side card: full width, close to their field. */
.vk-sidecard__fields > .ai-mt,
.vk-sidecard__fields > .ai-mt__chips { grid-column: 1 / -1; margin-top: calc(-1 * var(--space-3, .75rem)); margin-bottom: 0; }

/* 1.52.76: the design chat in the KI panel – one frame, 20px inside; the chat itself has no second frame. */
.ai-chatbox { display: grid; gap: var(--space-3, .75rem); margin: 0 0 var(--space-4, 1rem); padding: 20px; border: 1px solid var(--color-border, #d7e4e4); border-radius: 12px; background: var(--color-surface, #fff); }
.ai-chatbox__head { display: flex; align-items: flex-start; gap: var(--space-3, .75rem); }
.ai-chatbox__icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--color-primary, #045b62); background: var(--color-primary-soft, rgb(4 91 98 / 8%)); }
.ai-chatbox__icon svg { width: 1.1rem; height: 1.1rem; }
.ai-chatbox__lead { margin: 0; font-size: var(--fs-sm, .875rem); line-height: var(--lh-snug, 1.4); color: var(--color-text-muted, #597377); }
.ai-chatbox__open { justify-self: start; }
.ai-chatbox.is-open .ai-chatbox__open { justify-self: end; }
.ai-chatbox__done { margin: 0; font-size: var(--fs-sm, .875rem); line-height: var(--lh-snug, 1.4); color: var(--color-text, #17434a); }
.ai-chatbox__done[hidden], .ai-chatbox__panel[hidden] { display: none; }
.ai-chatbox__panel { padding-top: var(--space-3, .75rem); border-top: 1px solid var(--color-border, #d7e4e4); }
.ai-chatbox__lead[hidden] { display: none; }