/*
 * Köck Vorbestellung – Kundenseite (0.15.0).
 * Köck-Grün, klare Linien, durchgehend eckig, die beiden Schriften der Website.
 * Alles hängt an .kvf und berührt sonst nichts auf der Website.
 *
 * Schriftgrößen: Das Theme setzt die Grundschrift der Seite abhängig von der Fensterbreite
 * (rem wäre am Tablet 8,5 px). Darum rechnet das Plugin von „medium“ – das ist die Schriftgröße,
 * die im Browser bzw. System eingestellt ist. Große Systemschrift wirkt damit überall.
 * --kvf-u ist als Länge registriert: Sie wird einmal an .kvf ausgerechnet und so vererbt,
 * verschachtelte Größen multiplizieren sich nicht.
 */

@property --kvf-u { syntax: "<length>"; inherits: true; initial-value: 16px; }

.kvf {
	--kvf-green: var(--jh-accent, #b0c7a6);
	--kvf-tint: var(--jh-tint, #f3f6f1);
	--kvf-line: var(--jh-accent-strong, #7d9c71);
	--kvf-ink: #141414;
	--kvf-muted: #4a4a4a;
	--kvf-faint: #6b6b6b;
	--kvf-red: #b3261e;
	--kvf-red-dark: #8c1d18;
	--kvf-sans: acumin-pro-condensed, "Roboto Condensed", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--kvf-serif: new-spirit-condensed, "Instrument Serif", Georgia, serif;
	--kvf-ease: cubic-bezier(.23, 1, .32, 1);

	font-size: medium;
	--kvf-u: 1em;
	/* Sans: 15 / 17 / 20 / 24 */
	--f15: calc(var(--kvf-u) * .9375);
	--f17: calc(var(--kvf-u) * 1.0625);
	--f20: calc(var(--kvf-u) * 1.25);
	--f24: calc(var(--kvf-u) * 1.5);
	/* Serif: drei Größen */
	--s0: clamp(calc(var(--kvf-u) * 2.75), calc(var(--kvf-u) * 2 + 4vw), calc(var(--kvf-u) * 3.75));
	--s1: clamp(calc(var(--kvf-u) * 2.25), calc(var(--kvf-u) * 1.6 + 2.6vw), calc(var(--kvf-u) * 3.25));
	--s2: calc(var(--kvf-u) * 2);
	--kvf-tap: 44px;
	--kvf-listw: calc(var(--kvf-u) * 45);
	--kvf-stick: max(var(--kvf-navb, 0px), env(safe-area-inset-top, 0px));

	color: var(--kvf-ink);
	font-family: var(--kvf-sans);
	line-height: 1.35;
	letter-spacing: .01em;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
/* iPhone/iPad: Textgröße aus den Systemeinstellungen (Dynamic Type), auf 16 px als Grundmaß umgerechnet. */
@media (pointer: coarse) {
	@supports (font: -apple-system-body) {
		.kvf { font: -apple-system-body; font-family: var(--kvf-sans); --kvf-u: calc(1em * .9412); }
	}
}
/* Sehr große Bildschirme: Schrift wächst leicht mit (der Inhalt der Website bleibt im Theme auf 1440 px). */
@media (min-width: 2000px) {
	.kvf { --kvf-u: min(calc(1em + (100vw - 2000px) / 440), calc(1em * 1.125)); }
}

.kvf > *, .kvf-sheet, .kvf-lb { font-size: var(--f17); }
.kvf *, .kvf *::before, .kvf *::after { box-sizing: border-box; }
.kvf [hidden] { display: none !important; }
:where(.kvf) a { color: inherit; text-underline-offset: 2px; }
:where(.kvf) button { font: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.kvf :focus-visible { outline: 3px solid var(--kvf-ink); outline-offset: 2px; }
.kvf [tabindex="-1"]:focus { outline: none; }
.kvf-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.kvf-center { text-align: center; }
.kvf-nw { white-space: nowrap; }
.kvf-tab, .kvf-price, .kvf-qty, .kvf-sum, .kvf-mini-q, .kvf-total, .kvf-line-s, .kvf-day-d { font-variant-numeric: tabular-nums; }
html.kvf-noscroll, html.kvf-noscroll body { overflow: hidden; height: auto; }

/* Das Theme stylt h2/h3/h4 global – im Plugin zurücksetzen, die Klassen legen das Aussehen fest. */
.kvf h2, .kvf h3, .kvf h4 {
	position: static; top: auto; margin: 0; padding: 0;
	font-family: inherit; font-size: inherit; font-weight: 700;
	letter-spacing: inherit; line-height: 1.2; text-transform: none;
}

.kvf-loading, .kvf-pause { padding: 32px 0; color: var(--kvf-muted); }
.kvf-pause .kvf-lead { color: var(--kvf-ink); }

/* ---------- Schrift ---------- */

.kvf .kvf-title {
	margin: 0 0 8px; font-family: var(--kvf-serif); font-size: var(--s1); font-weight: 300;
	line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance;
}
.kvf .kvf-h4 { margin: 0; font-size: var(--f20); font-weight: 700; line-height: 1.2; }
.kvf .kvf-sub { margin: 0; padding: 32px 0 12px; font-size: var(--f20); font-weight: 700; }
.kvf-lead { margin: 0 0 20px; font-size: var(--f20); line-height: 1.4; }
.kvf-note { margin: 8px 0 0; font-size: var(--f15); line-height: 1.45; color: var(--kvf-muted); text-wrap: pretty; }
.kvf-kicker { display: block; font-size: var(--f15); color: var(--kvf-muted); }
.kvf-link {
	display: inline-flex; align-items: center; justify-content: center; min-height: var(--kvf-tap); min-width: var(--kvf-tap); margin: 0; padding: 0;
	background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left;
}
.kvf-box { margin: 16px 0 0; padding: 14px 16px; font-size: var(--f17); line-height: 1.45; background: #fff; border: 1.5px solid var(--kvf-ink); text-wrap: pretty; }
.kvf-box b { font-weight: 700; }

/* ---------- Knöpfe ---------- */

.kvf-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 52px; padding: 0 24px; font-size: var(--f17); font-weight: 700; letter-spacing: .01em; text-transform: none;
	color: var(--kvf-ink); background: #fff; border: 1.5px solid var(--kvf-ink); cursor: pointer;
	-webkit-appearance: none; appearance: none; text-decoration: none;
}
.kvf-btn:hover { background: var(--kvf-tint); }
.kvf-btn-primary { color: #fff !important; background: var(--kvf-ink); border-color: var(--kvf-ink); }
.kvf-btn-primary:hover { background: #000; }
.kvf-btn:disabled, .kvf-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.kvf-btn.is-busy { opacity: .7; cursor: progress; }
.kvf-btn-danger { color: #fff !important; background: var(--kvf-red-dark); border-color: var(--kvf-red-dark); }
.kvf-btn-danger:hover { background: var(--kvf-red); border-color: var(--kvf-red); }
.kvf-btn-small { min-height: var(--kvf-tap); padding: 0 12px; font-size: var(--f15); }
@media (hover: none) { .kvf-btn:hover { background: #fff; } .kvf-btn-primary:hover { background: var(--kvf-ink); } }

/* ---------- Raster der Website ----------
   Das Formular nimmt die Spalten des Kontaktblocks darunter: links bei 7/48, rechts bis 43/48. */
.kvf {
	--kvf-vw: calc(100vw - var(--scrollbar-width, 0px));
	--kvf-gl: calc(var(--kvf-vw) / 16);
	--kvf-gr: calc(var(--kvf-vw) / 16);
	max-width: none;
	margin: calc(var(--kvf-vw) / 8) var(--kvf-gr) calc(var(--kvf-vw) / 8) var(--kvf-gl);
	padding: 0;
}
@media (max-width: 575px) { .kvf { --kvf-gl: max(16px, calc(var(--kvf-vw) / 16)); --kvf-gr: var(--kvf-gl); } }
@media (min-width: 576px) { .kvf { --kvf-gl: calc(var(--kvf-vw) / 48 * 7); --kvf-gr: calc(var(--kvf-vw) / 48 * 5); margin-top: calc(var(--kvf-vw) / 24); margin-bottom: calc(var(--kvf-vw) / 24); } }
@media (min-width: 1440px) { .kvf { --kvf-gl: 210px; --kvf-gr: 150px; margin-top: 60px; margin-bottom: 60px; } }
#bestellen { scroll-margin-top: 16px; }

.kvf-skip { position: absolute; left: -9999px; top: auto; z-index: 60; padding: 12px 16px; background: var(--kvf-ink); color: #fff !important; font-weight: 700; text-decoration: none; }
.kvf-skip:focus { position: fixed; left: 16px; top: calc(var(--kvf-stick) + 8px); }

/* ---------- Fortschritt ---------- */

.kvf-steps { display: flex; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; font-size: var(--f15); }
.kvf-steps li { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 10px; border-top: 3px solid var(--kvf-tint); color: var(--kvf-muted); }
.kvf-steps li span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em; font-weight: 700; border: 1.5px solid currentColor; }
.kvf-steps li.is-done { border-top-color: var(--kvf-green); }
.kvf-steps li[aria-current="step"] { border-top-color: var(--kvf-ink); color: var(--kvf-ink); font-weight: 700; }
.kvf-steps li[aria-current="step"] span { background: var(--kvf-ink); border-color: var(--kvf-ink); color: #fff; }

.kvf-linkmiss { margin: 0 0 16px; padding: 12px 16px; font-size: var(--f17); color: var(--kvf-ink); background: var(--kvf-tint); border-left: 4px solid var(--kvf-line); }

/* ---------- Oben: persönlich, gewählte Abholung ---------- */

.kvf-pre { display: flex; flex-direction: column; gap: 12px; max-width: var(--kvf-listw); margin: 0 0 20px; }
.kvf-pre:empty, .kvf:not(.is-shop) .kvf-pre { display: none; }
.kvf-hello { padding: 18px 20px 14px; background: var(--kvf-tint); border-left: 4px solid var(--kvf-green); }
.kvf-hello-t { margin: 0; font-size: var(--f20); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.kvf-hello-v { margin: 4px 0 0; font-size: var(--f17); text-wrap: pretty; }
.kvf-hello-a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 12px; }
.kvf-hello-a .kvf-btn { min-height: 48px; }
.kvf-hello:not([hidden]) { animation: kvf-fade .2s var(--kvf-ease) both; }

.kvf-pickup {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center;
	width: 100%; min-height: 64px; margin: 0; padding: 12px 16px;
	text-align: left; background: var(--kvf-tint); border: 0; border-left: 4px solid var(--kvf-green); cursor: pointer;
}
.kvf-pickup-k { grid-column: 1; font-size: var(--f15); color: var(--kvf-muted); }
.kvf-pickup-v { grid-column: 1; font-size: var(--f20); font-weight: 700; line-height: 1.2; }
.kvf-pickup-c { grid-column: 2; grid-row: 1 / span 2; font-size: var(--f15); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Kategorie-Leiste ---------- */

.kvf-tabbar {
	position: sticky; top: var(--kvf-stick); z-index: 40;
	display: flex; align-items: stretch; gap: 8px;
	margin: 0 0 0; background: #fff; border-bottom: 1.5px solid var(--kvf-ink);
}
.kvf:not(.is-shop) .kvf-tabbar { display: none; }
.kvf-tabs { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-padding-inline: 16px; }
/* Sanftes Ausblenden am Rand, solange dort noch Reiter folgen. */
.kvf-tabs.is-fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.kvf-tabs.is-fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
.kvf-tabs.is-fade-l.is-fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.kvf-tabs::-webkit-scrollbar { display: none; }
.kvf-tab {
	position: relative; flex: none; align-self: stretch; display: inline-flex; align-items: center; min-height: 52px; margin: 0; padding: 0 14px; line-height: 1.2;
	font-size: var(--f17); font-weight: 400; white-space: nowrap; color: var(--kvf-muted);
	background: none; border: 0; cursor: pointer;
}
.kvf-tab:first-child { padding-left: 2px; }
.kvf-tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--kvf-ink); opacity: 0; transition: opacity .15s var(--kvf-ease); }
.kvf-tab:first-child::after { left: 2px; }
.kvf-tab[aria-selected="true"] { color: var(--kvf-ink); font-weight: 700; }
.kvf-tab[aria-selected="true"]::after { opacity: 1; }
.kvf.is-searching .kvf-tab[aria-selected="true"] { font-weight: 400; color: var(--kvf-muted); }
.kvf.is-searching .kvf-tab::after { opacity: 0; }
.kvf-tab:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .kvf-tab:hover { color: var(--kvf-ink); } }
.kvf-searchbtn {
	flex: none; align-self: center; width: var(--kvf-tap); height: var(--kvf-tap); display: flex; align-items: center; justify-content: center;
	margin: 0; padding: 0; background: #fff; border: 0; cursor: pointer;
}
.kvf-searchbtn[aria-expanded="true"] { background: var(--kvf-tint); }
.kvf-searchbtn svg { width: 22px; height: 22px; }

/* Suche und Filter */
.kvf-tools { display: flex; flex-direction: column; gap: 14px; padding: 16px 0 4px; }
.kvf-tools:not([hidden]) { animation: kvf-fade .18s var(--kvf-ease) both; }
.kvf .kvf-search { height: 52px; }
.kvf-fgroup-t { display: block; margin: 0 0 6px; font-size: var(--f15); font-weight: 700; color: var(--kvf-muted); }
.kvf-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.kvf-fchip {
	min-height: var(--kvf-tap); padding: 0 14px; font-size: var(--f15); line-height: 1.1; white-space: nowrap;
	display: inline-flex; align-items: center; gap: 6px; color: var(--kvf-ink); background: #fff; border: 1.5px solid var(--kvf-line); cursor: pointer;
}
.kvf-fchip[aria-pressed="true"] { background: var(--kvf-green); border-color: var(--kvf-ink); font-weight: 700; }
.kvf-fchip[aria-pressed="true"]::before { content: "✓"; }
.kvf-fbar { margin: 0; }
.kvf-fnote { margin: 0; font-size: var(--f15); color: var(--kvf-muted); }

/* ---------- Raster: Liste links, Auswahl rechts ---------- */

.kvf-layout { display: block; }
.kvf-main { min-width: 0; }
.kvf-view[data-view="shop"] { display: flex; flex-direction: column; }
.kvf.has-sum.is-shop { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1200px) {
	.kvf-layout { display: grid; grid-template-columns: minmax(0, var(--kvf-listw)) minmax(280px, calc(var(--kvf-u) * 21)); justify-content: space-between; column-gap: 48px; align-items: start; }
	.kvf.has-sum.is-shop { padding-bottom: 0; }
	.kvf.is-check .kvf-layout, .kvf.is-finished .kvf-layout { grid-template-columns: minmax(0, var(--kvf-listw)); justify-content: center; }
}

/* ---------- Bereiche (Reiter) ---------- */

.kvf-panel { padding-top: 28px; }
.kvf-panel:not([hidden]) { animation: kvf-fade .18s var(--kvf-ease) both; }
.kvf-panel-head { margin-bottom: 16px; }
.kvf-panel-head .kvf-note { margin-top: 4px; }
.kvf.is-searching .kvf-panel { padding-top: 24px; animation: none; }
.kvf.is-searching .kvf-panel-head .kvf-note, .kvf.is-searching .kvf-season-head > :not(.kvf-title) { display: none; }
.kvf.is-searching .kvf-panel .kvf-title { font-size: var(--f24); font-family: var(--kvf-sans); font-weight: 700; letter-spacing: 0; }
.kvf-block + .kvf-block .kvf-sub { padding-top: 32px; }
.kvf-empty { margin: 24px 0 0; color: var(--kvf-muted); }

/* Saison */
.kvf-season-head { margin: 0 0 20px; padding: 20px 20px 22px; background: var(--kvf-tint); }
.kvf-season-head .kvf-lead { margin: 6px 0 0; font-size: var(--f17); }
.kvf-season-head .kvf-box { margin-top: 16px; }
.kvf-season-head .kvf-note { margin-top: 10px; }
@media (max-width: 575px) { .kvf-season-head { margin-inline: calc(var(--kvf-gl) * -1) calc(var(--kvf-gr) * -1); padding-inline: var(--kvf-gl) var(--kvf-gr); } }

/* ---------- Artikel: ruhige Liste ---------- */

.kvf-items { border-top: 1px solid var(--kvf-green); container-type: inline-size; font-size: var(--f17); }
.kvf-list-why { margin: 0 0 10px; font-size: var(--f15); font-weight: 700; }
.kvf-item {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas: "main price buy";
	align-items: center; column-gap: 14px;
	min-height: 76px; padding: 12px 10px; margin: 0 -10px;
	/* Trennlinie bündig mit der Liste (nicht mit der getönten Fläche, die 10 px übersteht) */
	background-image: linear-gradient(var(--kvf-green), var(--kvf-green));
	background-size: calc(100% - 20px) 1px; background-position: 10px 100%; background-repeat: no-repeat;
}
.kvf-item.has-img { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "img main price buy"; }
/* Ab Tablet: Menge in fester Spalte – alle Preise stehen bündig untereinander. */
@media (min-width: 576px) {
	.kvf-item { grid-template-columns: minmax(0, 1fr) auto calc(var(--kvf-tap) * 3); column-gap: 24px; }
	.kvf-item.has-img { grid-template-columns: auto minmax(0, 1fr) auto calc(var(--kvf-tap) * 3); }
}
.kvf-item.is-on { background-color: var(--kvf-tint); }
.kvf-item.is-bad { background: #fff; box-shadow: inset 4px 0 0 var(--kvf-red); }
.kvf-item.is-off .kvf-item-line, .kvf-item.is-off .kvf-price { color: var(--kvf-muted); }
.kvf-item-sub { padding-left: 26px; }
.kvf-item-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kvf-item-line { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; line-height: 1.2; }
.kvf .kvf-item-name {
	display: inline; margin: 0; padding: 0; text-align: left; font-size: var(--f20); font-weight: 700; line-height: 1.2;
	background: none; border: 0; cursor: default; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
}
.kvf button.kvf-item-name { cursor: pointer; text-decoration: underline; text-decoration-color: var(--kvf-green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.kvf-item-name .kvf-size { font-weight: 400; color: var(--kvf-muted); font-size: var(--f17); white-space: nowrap; }
.kvf-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: var(--f15); color: var(--kvf-muted); }
.kvf-allerg { letter-spacing: .04em; }
.kvf-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; font-size: var(--f15); font-weight: 600; color: var(--kvf-ink); border: 1.5px solid var(--kvf-line); }
.kvf-min { font-weight: 600; color: var(--kvf-ink); }
.kvf-item-desc { padding-top: 4px; font-size: var(--f15); line-height: 1.45; color: var(--kvf-muted); text-wrap: pretty; }
.kvf-item-why { padding-top: 4px; font-size: var(--f15); font-weight: 700; color: var(--kvf-red-dark); }
.kvf-item.is-off .kvf-item-why { color: var(--kvf-ink); font-weight: 400; }
.kvf-item-why .kvf-link, .kvf-list-why .kvf-link { margin-left: 6px; font-weight: 700; color: var(--kvf-ink); }
.kvf-list-why .kvf-link { margin-left: 0; }
.kvf-item-max { padding-top: 6px; font-size: var(--f15); line-height: 1.4; text-wrap: pretty; }
.kvf-item-max a { display: inline-flex; align-items: center; min-height: var(--kvf-tap); font-weight: 700; white-space: nowrap; }
.kvf-price { grid-area: price; justify-self: end; min-width: 4.2em; text-align: right; font-size: var(--f17); white-space: nowrap; }
.kvf-buy { grid-area: buy; display: flex; justify-content: flex-end; }

/* Menge: eckig. Unausgewählt nur „+“, ausgewählt – Menge + */
.kvf-stepper { display: inline-flex; align-items: stretch; background: #fff; border: 1.5px solid var(--kvf-ink); }
.kvf-step {
	width: var(--kvf-tap); height: var(--kvf-tap); margin: 0; padding: 0; flex: none;
	display: flex; align-items: center; justify-content: center; background: #fff; border: 0; cursor: pointer; color: var(--kvf-ink);
	-webkit-appearance: none; appearance: none;
}
.kvf-step svg { width: 18px; height: 18px; }
.kvf-step:not(:disabled):active { background: var(--kvf-tint); }
.kvf-step:disabled { color: #8a938a; cursor: default; }
.kvf-step:focus-visible { outline-offset: -4px; }
.kvf-step.is-del { color: var(--kvf-muted); }
@media (hover: hover) { .kvf-step:not(:disabled):hover { background: var(--kvf-tint); } .kvf-step.is-del:hover { color: var(--kvf-red-dark); } }
.kvf-item.is-on .kvf-stepper { border-color: var(--kvf-ink); }
.kvf-item.is-on .kvf-step[data-kvf-minus] { border-right: 1.5px solid var(--kvf-ink); }
.kvf-item.is-on .kvf-step[data-kvf-plus] { border-left: 1.5px solid var(--kvf-ink); }
.kvf .kvf-qty {
	width: var(--kvf-tap); height: var(--kvf-tap); margin: 0; padding: 0; flex: none;
	font-family: inherit; font-size: var(--f20); font-weight: 700; text-align: center; color: var(--kvf-ink);
	background: transparent; border: 0; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.kvf .kvf-qty:focus-visible { outline-offset: -4px; }

/* Gruppen (ein Produkt in mehreren Größen) */
.kvf-group { padding: 16px 0 4px; font-size: var(--f20); font-weight: 700; line-height: 1.2; }
.kvf-group.has-img { display: flex; align-items: center; gap: 14px; }

/* Produktbilder (nur, wenn jedes Produkt der Liste eines hat) */
.kvf-thumb { grid-area: img; flex: none; display: block; width: 60px; height: 60px; margin: 0; padding: 0; overflow: hidden; background: var(--kvf-tint); border: 0; cursor: zoom-in; }
.kvf-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 576px) { .kvf-thumb { width: 72px; height: 72px; } }

.kvf-legend { margin: 40px 0 0; font-size: var(--f15); line-height: 1.5; color: var(--kvf-muted); }
.kvf-legend span { font-weight: 700; }

/* Wenig Platz im Verhältnis zur Schrift (schmales Handy, Zoom 200 %, große Systemschrift):
   Name über die ganze Breite, Preis und Menge darunter – zuerst nur bei ausgewählten Artikeln
   (die Mengenwahl ist breiter), bei ganz wenig Platz bei allen. Gemessen an der Liste in em. */
@container (max-width: 19em) {
	.kvf-item.is-on, .kvf-item.is-on.has-img { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "price buy"; row-gap: 8px; }
	.kvf-item.is-on .kvf-thumb { display: none; }
	.kvf-item.is-on .kvf-price { justify-self: start; min-width: 0; text-align: left; }
}
@container (max-width: 15em) {
	.kvf-item, .kvf-item.has-img { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "price buy"; row-gap: 8px; }
	.kvf-item.has-img .kvf-thumb { display: none; }
	.kvf-price { justify-self: start; min-width: 0; text-align: left; }
	.kvf-item-sub { padding-left: 10px; }
}

/* ---------- Ihre Auswahl ---------- */

.kvf-sum { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--kvf-green); color: #000; }
.kvf.is-shop:not(.has-sum) .kvf-sum, .kvf:not(.is-shop) .kvf-sum { display: none; }
.kvf-sum-full { display: none; }
.kvf-sum-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px var(--kvf-gr) calc(12px + env(safe-area-inset-bottom, 0px)) var(--kvf-gl); }
.kvf-sum-n { flex: 1 1 auto; min-width: 0; font-size: var(--f20); font-weight: 700; }
.kvf-sum-bar .kvf-btn { flex: 1 0 auto; max-width: 100%; }
@media (min-width: 576px) { .kvf-sum-bar .kvf-btn { flex: 0 0 auto; } }
.kvf-sum-warn { margin: 0; padding: 0 var(--kvf-gr) 10px var(--kvf-gl); font-size: var(--f15); font-weight: 700; color: var(--kvf-red-dark); }
.kvf.has-sum.is-shop .kvf-sum { animation: kvf-bar-in .24s var(--kvf-ease) both; }
@media (max-width: 1199px) {
	.kvf.kvf-quiet .kvf-sum { animation: none; }
}

@media (min-width: 1200px) {
	.kvf.is-shop .kvf-sum, .kvf.is-shop:not(.has-sum) .kvf-sum {
		display: block; position: sticky; top: calc(var(--kvf-stick) + 72px); left: auto; right: auto; bottom: auto;
		margin-top: 28px; padding: 24px; background: var(--kvf-tint); animation: none;
	}
	.kvf-sum-full { display: block; }
	.kvf-sum-bar { display: block; padding: 0; margin-top: 18px; }
	.kvf-sum-bar .kvf-sum-n { display: none; }
	.kvf-sum-bar .kvf-btn { width: 100%; }
	.kvf-sum-warn { padding: 10px 0 0; }
}
.kvf .kvf-sum-title { margin: 0 0 14px; font-family: var(--kvf-serif); font-size: var(--s2); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
.kvf-sum-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--kvf-green); }
.kvf-sum-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--kvf-green); font-size: var(--f17); }
.kvf-sum-list li > span:first-child { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.kvf-sum-price { white-space: nowrap; }
.kvf-sum-bad { grid-column: 1 / -1; font-size: var(--f15); font-weight: 700; color: var(--kvf-red-dark); }
.kvf-sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; margin-top: -1px; border-top: 2px solid var(--kvf-ink); font-size: var(--f20); font-weight: 700; }
.kvf-sum-pay { margin: 4px 0 0; font-size: var(--f15); color: var(--kvf-muted); }
.kvf-sum-empty { margin: 0; font-size: var(--f17); color: var(--kvf-muted); }

/* ---------- Abholung (Blatt am Handy, Fenster am Computer) ---------- */

.kvf-sheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
.kvf-sheet-back { position: absolute; inset: 0; background: rgba(20, 20, 20, .45); }
.kvf-sheet-panel {
	position: relative; width: 100%; height: 100%; max-height: 100vh; max-height: 100dvh;
	display: flex; flex-direction: column; background: #fff; font-family: var(--kvf-sans); color: var(--kvf-ink);
}
.kvf-sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--kvf-gr) 12px var(--kvf-gl); border-bottom: 1.5px solid var(--kvf-ink); }
.kvf .kvf-sheet-title { font-family: var(--kvf-serif); font-size: var(--s2); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
.kvf-x { flex: none; width: 48px; height: 48px; margin: -4px -12px -4px 0; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.kvf-x svg { width: 22px; height: 22px; }
.kvf-sheet-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 var(--kvf-gr) 24px var(--kvf-gl); }
.kvf-sheet-sec { padding-top: 22px; }
.kvf-sheet-sec > .kvf-note:first-of-type { margin-top: 2px; }
.kvf-sheet-foot {
	flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
	padding: 12px var(--kvf-gr) calc(12px + env(safe-area-inset-bottom, 0px)) var(--kvf-gl); background: var(--kvf-green); color: #000;
}
.kvf-sheet-sum { flex: 1 1 auto; min-width: 0; font-size: var(--f20); font-weight: 700; }
.kvf-sheet-sum.is-todo { font-size: var(--f17); font-weight: 400; }
.kvf-sheet-foot .kvf-btn { flex: none; min-width: 120px; }

@media (min-width: 700px) {
	.kvf-sheet { align-items: center; padding: 32px; }
	.kvf-sheet-panel { width: min(100%, calc(var(--kvf-u) * 36)); height: auto; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
	.kvf-sheet-head, .kvf-sheet-foot { padding-left: 28px; padding-right: 28px; }
	.kvf-sheet-head { padding-top: 18px; }
	.kvf-sheet-body { padding-left: 28px; padding-right: 28px; }
}
/* Querformat am Handy: niedriges Fenster – Kopf und Fuß schlank */
@media (max-height: 500px) {
	.kvf-sheet-head { padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
	.kvf-sheet-foot { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
	.kvf-sheet-head, .kvf-sheet-foot, .kvf-sheet-body { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
}

.kvf-branch-sel { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--kvf-green); }
.kvf-branch-sel > span { display: flex; flex-direction: column; min-width: 0; }
.kvf-branch-n { font-weight: 700; }
.kvf-branch-a { font-size: var(--f15); color: var(--kvf-muted); }
.kvf-branch-x { display: block; margin-top: 2px; font-size: var(--f15); font-weight: 700; }
.kvf-branches { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; }
@media (min-width: 560px) { .kvf-branches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kvf-branch { display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 10px 14px; text-align: left; background: #fff; border: 1.5px solid var(--kvf-line); cursor: pointer; }
.kvf-branch[aria-pressed="true"] { background: var(--kvf-green); border-color: var(--kvf-ink); }
.kvf-branch-ort { grid-column: 1 / -1; margin: 14px 0 0; font-size: var(--f15); font-weight: 700; color: var(--kvf-muted); }
.kvf-branches > .kvf-branch-ort:first-child { margin-top: 0; }

/* Kalender: Raster mit vier Spalten, Köck-Grünlinien */
.kvf-days {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px;
	border-top: 1px solid var(--kvf-line); border-left: 1px solid var(--kvf-line);
}
.kvf-day {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
	min-height: 84px; margin: 0; padding: 8px 10px 10px; text-align: left;
	background: #fff; border: 0; border-right: 1px solid var(--kvf-line); border-bottom: 1px solid var(--kvf-line); cursor: pointer;
}
.kvf-day-wd { font-size: var(--f15); color: var(--kvf-muted); line-height: 1.2; }
.kvf .kvf-day-d { font-family: var(--kvf-serif); font-size: var(--s2); font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.kvf-day-n { margin-top: 4px; font-size: var(--f15); line-height: 1.15; color: var(--kvf-ink); overflow-wrap: break-word; }
.kvf-day[aria-checked="true"] { background: var(--kvf-green); }
.kvf-day[aria-checked="true"] .kvf-day-wd { color: var(--kvf-ink); }
@media (hover: hover) { .kvf-day:not(.is-off):not([aria-checked="true"]):hover { background: var(--kvf-tint); } }
.kvf-day:focus-visible { outline-offset: -3px; z-index: 1; }
.kvf-day.is-off {
	cursor: default; color: rgba(20, 20, 20, .55);
	background: repeating-linear-gradient(135deg, #fff 0 7px, var(--kvf-tint) 7px 8px);
}
.kvf-day.is-off .kvf-day-d { color: rgba(20, 20, 20, .45); }
.kvf-day.is-off .kvf-day-n { color: var(--kvf-muted); }
.kvf-day-run { grid-column: 1 / -1; min-height: 52px; justify-content: center; padding: 10px; }
.kvf-day-run .kvf-day-n { margin: 0; font-size: var(--f15); }
.kvf-day-run b { font-weight: 700; color: var(--kvf-ink); }
.kvf-cal-m { grid-column: 1 / -1; padding: 14px 10px 6px; font-size: var(--f15); font-weight: 700; background: #fff; border-right: 1px solid var(--kvf-line); border-bottom: 1px solid var(--kvf-line); }
.kvf-more { width: 100%; min-height: var(--kvf-tap); margin: 8px 0 0; padding: 0; background: none; border: 0; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 339px) { .kvf-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 259px) { .kvf-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Abholzeit in Blöcken */
.kvf-h4-sub { font-weight: 400; color: var(--kvf-muted); }
.kvf-blocks {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px;
	border-top: 1px solid var(--kvf-line); border-left: 1px solid var(--kvf-line);
}
@media (min-width: 560px) { .kvf-blocks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 259px) { .kvf-blocks { grid-template-columns: minmax(0, 1fr); } }
.kvf-block-b {
	min-height: 60px; margin: 0; padding: 0 14px; text-align: left; font-size: var(--f20); font-weight: 700; white-space: nowrap;
	background: #fff; border: 0; border-right: 1px solid var(--kvf-line); border-bottom: 1px solid var(--kvf-line); cursor: pointer;
}
.kvf-block-b[aria-checked="true"] { background: var(--kvf-green); }
@media (hover: hover) { .kvf-block-b:not([aria-checked="true"]):hover { background: var(--kvf-tint); } }
.kvf-block-b:focus-visible { outline-offset: -3px; }
.kvf-deadend .kvf-note + .kvf-note { margin-top: 8px; }

/* ---------- Reservierung prüfen ---------- */

.kvf-backlink { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--kvf-tap); margin: 0 0 12px; padding: 0; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kvf-view[data-view="check"] { display: flex; flex-direction: column; }
.kvf-pickcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; margin: 12px 0 28px; padding: 18px 20px; background: var(--kvf-green); color: #000; }
.kvf-pickcard-k { font-size: var(--f15); }
.kvf .kvf-pickcard-d { font-family: var(--kvf-serif); font-size: var(--s2); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.kvf-pickcard-s { font-size: var(--f17); }
.kvf-pickcard .kvf-link { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-top: -10px; }
.kvf-pickup-missing { margin: 12px 0 28px; background: #fff; border: 1.5px solid var(--kvf-ink); }

.kvf-lines { border-top: 2px solid var(--kvf-ink); border-bottom: 2px solid var(--kvf-ink); }
.kvf-line { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.kvf-line + .kvf-line { border-top: 1px solid var(--kvf-green); }
.kvf-line-q { flex: none; width: 48px; font-weight: 700; }
.kvf-line-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--f17); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.kvf-line-s { flex: none; white-space: nowrap; }
.kvf-line.is-bad .kvf-line-n { color: var(--kvf-red-dark); }
.kvf-line-why { font-size: var(--f15); font-weight: 700; }
.kvf-line-why .kvf-link { margin-left: 6px; color: var(--kvf-ink); }
.kvf-line-min, .kvf-line-was { font-size: var(--f15); color: var(--kvf-muted); }
.kvf-line-was { font-weight: 700; color: var(--kvf-ink); }
.kvf-line.is-gone .kvf-line-n > :first-child, .kvf-line.is-gone .kvf-line-s { color: var(--kvf-muted); }
.kvf-line.is-gone .kvf-line-s { text-decoration: line-through; }
@media (max-width: 479px) {
	.kvf-line.has-mini { flex-wrap: wrap; gap: 8px 14px; }
	.kvf-line.has-mini .kvf-line-n { order: -1; flex: 1 1 100%; }
	.kvf-line.has-mini .kvf-line-s { margin-left: auto; }
}
.kvf-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; }
.kvf-total span:first-child { font-size: var(--f20); font-weight: 700; }
.kvf .kvf-total span:last-child { font-family: var(--kvf-serif); font-size: var(--s2); font-weight: 300; line-height: 1; white-space: nowrap; }
.kvf-pay { margin: 4px 0 32px; font-size: var(--f15); color: var(--kvf-muted); }

/* Kleine Mengenwahl (prüfen, ändern) – eckig, 44 px */
.kvf-mini { display: inline-flex; align-items: stretch; flex: none; border: 1.5px solid var(--kvf-ink); background: #fff; }
.kvf-mini-b {
	width: var(--kvf-tap); height: var(--kvf-tap); margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;
	background: #fff; border: 0; cursor: pointer; color: var(--kvf-ink); -webkit-appearance: none; appearance: none;
}
.kvf-mini-b svg { width: 16px; height: 16px; }
.kvf-mini-b:first-child { border-right: 1.5px solid var(--kvf-ink); }
.kvf-mini-b:last-child { border-left: 1.5px solid var(--kvf-ink); }
.kvf-mini-b:disabled { color: #8a938a; cursor: default; }
.kvf-mini-b.is-del { color: var(--kvf-muted); }
.kvf-mini-b:focus-visible { outline-offset: -4px; }
@media (hover: hover) { .kvf-mini-b:not(:disabled):hover { background: var(--kvf-tint); } .kvf-mini-b.is-del:hover { color: var(--kvf-red-dark); } }
.kvf-mini-q { display: flex; align-items: center; justify-content: center; min-width: 40px; font-size: var(--f17); font-weight: 700; }

.kvf-msg { margin: 0 0 20px; padding: 14px 16px; font-size: var(--f17); color: var(--kvf-red-dark); border: 1.5px solid var(--kvf-red); }
.kvf-form { display: flex; flex-direction: column; gap: 20px; }
.kvf-field { display: flex; flex-direction: column; gap: 6px; }
.kvf-label { font-size: var(--f17); font-weight: 700; }
.kvf-opt { font-weight: 400; color: var(--kvf-muted); }
.kvf .kvf-input {
	display: block; width: 100%; height: 56px; margin: 0; padding: 0 14px;
	font-family: inherit; font-size: max(16px, var(--f20)); line-height: 1.3; color: var(--kvf-ink);
	background: #fff; border: 1.5px solid var(--kvf-line); border-radius: 0; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.kvf .kvf-textarea { height: 88px; padding: 12px 14px; resize: vertical; }
.kvf .kvf-input[aria-invalid="true"] { border-color: var(--kvf-red); border-width: 2px; }
.kvf-hint { font-size: var(--f15); color: var(--kvf-muted); }
.kvf-err { font-size: var(--f15); font-weight: 700; color: var(--kvf-red-dark); }
.kvf-err:not(.is-soft)::before { content: "! "; }
.kvf-err.is-soft { font-weight: 400; color: var(--kvf-ink); }
.kvf-err .kvf-link { font-weight: 700; }
.kvf-check { display: flex; align-items: center; gap: 12px; min-height: var(--kvf-tap); font-size: var(--f17); cursor: pointer; }
.kvf-check input {
	flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--kvf-ink);
	/* eckig wie der Rest (iOS zeigt sonst einen runden Kreis) */
	-webkit-appearance: none; appearance: none; border: 1.5px solid var(--kvf-ink); border-radius: 0; background: #fff center / 16px 16px no-repeat; cursor: pointer;
}
.kvf-check input:checked { background-color: var(--kvf-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
.kvf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.kvf-submit { width: 100%; min-height: 60px; font-size: var(--f20); }
.kvf-namegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.kvf-namegrid .kvf-namecol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kvf-namegrid .kvf-err { grid-column: 1 / -1; }
@media (max-width: 359px) { .kvf-namegrid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Bestätigung, ansehen, ändern ---------- */

.kvf-done { display: flex; flex-direction: column; max-width: var(--kvf-listw); }
.kvf-done, .kvf-done p, .kvf-lead, .kvf-done-foot p, .kvf-lines { overflow-wrap: anywhere; }
.kvf-done .kvf-title { margin-bottom: 8px; }
.kvf-tick { display: block; width: 56px; height: 56px; margin: 0 auto 16px; color: var(--kvf-ink); }
.kvf-tick circle { stroke-dasharray: 190; animation: kvf-draw .32s var(--kvf-ease) both; }
.kvf-tick path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: kvf-draw-p .2s .26s var(--kvf-ease) both; }
.kvf-pickupbox { display: flex; flex-direction: column; align-items: center; margin: 12px 0 28px; padding: 28px 20px 30px; text-align: center; color: #000; background: var(--kvf-green); border: 1.5px solid var(--kvf-green); }
.kvf-pickupbox.is-cancelled { color: var(--kvf-muted); background: #fff; border-color: var(--kvf-faint); }
.kvf-pb-k { font-size: var(--f15); }
.kvf-pb-wd { padding-top: 6px; font-size: var(--f20); }
.kvf .kvf-pb-d { font-family: var(--kvf-serif); font-size: var(--s0); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.kvf-pickupbox.is-cancelled .kvf-pb-d { text-decoration: line-through; text-decoration-thickness: 2px; }
.kvf-pb-s { padding-top: 12px; font-size: var(--f20); }
.kvf-pb-a { font-size: var(--f15); }
.kvf-done-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: -12px 0 28px; }
.kvf-done-actions .kvf-btn { padding: 0 12px; font-size: var(--f15); }
.kvf-done-actions svg { flex: none; width: 20px; height: 20px; }
@media (max-width: 459px) { .kvf-done-actions { grid-template-columns: minmax(0, 1fr); } }
.kvf-done-foot { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 8px; padding-top: 28px; text-align: center; border-top: 1px solid var(--kvf-green); }
.kvf-done-foot p { margin: 0; line-height: 1.5; }
.kvf-done p a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.kvf .kvf-claim { font-family: var(--kvf-serif); font-size: var(--s2); font-weight: 300; line-height: 1.02; letter-spacing: -0.03em; }

.kvf-manage-until { margin: 0 0 12px; }
.kvf-manage-msg { margin: 0 0 20px; padding: 14px 16px; font-size: var(--f17); background: var(--kvf-tint); }
.kvf-manage-msg.is-err { background: #fff; color: var(--kvf-red-dark); border: 1.5px solid var(--kvf-red); }
.kvf-manage-times { margin-top: 28px; }
.kvf-manage-times .kvf-note { margin-top: 8px; }
.kvf-savebar { margin-top: 24px; }
.kvf-savebar .kvf-btn { width: 100%; }
.kvf-savebar.is-dirty {
	position: sticky; bottom: 0; z-index: 30; margin-inline: calc(var(--kvf-gl) * -1) calc(var(--kvf-gr) * -1);
	padding: 12px var(--kvf-gr) calc(12px + env(safe-area-inset-bottom, 0px)) var(--kvf-gl); background: var(--kvf-green);
	animation: kvf-bar-in .22s var(--kvf-ease) both;
}
@media (min-width: 1200px) { .kvf-savebar.is-dirty { margin-inline: 0; padding-inline: 16px; } }
.kvf-confirm { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.kvf-confirm p { margin: 0; }
.kvf-confirm-a { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- Großansicht eines Produktbilds ---------- */

.kvf-lb { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: flex-end; justify-content: center; }
.kvf-lb-back { position: absolute; inset: 0; background: rgba(20, 20, 20, .55); }
.kvf-lb-panel { --kvf-ar: 1; position: relative; width: 100%; max-height: 100vh; max-height: 100dvh; overflow-y: auto; background: #fff; display: flex; flex-direction: column; animation: kvf-rise .22s var(--kvf-ease) both; }
.kvf-lb-media { position: relative; flex: none; background: #f3f3f1; aspect-ratio: var(--kvf-ar); max-height: 68vh; max-height: 68dvh; }
.kvf-lb-media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s var(--kvf-ease); }
.kvf-lb.is-loading .kvf-lb-media img { opacity: 0; }
.kvf-lb-x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 2; width: var(--kvf-tap); height: var(--kvf-tap); display: flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid var(--kvf-ink); cursor: pointer; }
.kvf-lb-x svg { width: 20px; height: 20px; }
.kvf-lb-cap { padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; }
.kvf .kvf-lb-title { font-family: var(--kvf-serif); font-size: var(--s2); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: break-word; }
.kvf-lb-title .kvf-size { font-family: var(--kvf-sans); font-size: var(--f17); letter-spacing: .01em; }
.kvf-lb-price { margin: 0; font-size: var(--f20); font-weight: 700; }
.kvf-lb-desc { margin: 4px 0 0; font-size: var(--f17); line-height: 1.45; }
.kvf-lb-meta { margin: 4px 0 0; font-size: var(--f15); line-height: 1.5; color: var(--kvf-muted); }
.kvf-lb-sizes { margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--kvf-green); }
.kvf-lb-sizes li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--kvf-green); }
@media (min-width: 768px) {
	.kvf-lb { align-items: center; padding: 32px; }
	.kvf-lb-panel { width: min(760px, max(440px, calc((100vh - 64px - 170px) * var(--kvf-ar)))); max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
	.kvf-lb-media { max-height: calc(100vh - 234px); max-height: calc(100dvh - 234px); }
}
@media (max-height: 520px) and (orientation: landscape) {
	.kvf-lb { padding: 0; align-items: stretch; }
	.kvf-lb-panel { flex-direction: row; width: 100%; max-height: 100vh; max-height: 100dvh; }
	.kvf-lb-media { width: min(60%, calc(100dvh * var(--kvf-ar))); height: 100%; max-height: none; aspect-ratio: auto; }
	.kvf-lb-cap { flex: 1; overflow-y: auto; }
	.kvf .kvf-lb-title { padding-right: 52px; }
}

/* ---------- Bewegung: nur transform/opacity, kurz, ease-out ---------- */

@keyframes kvf-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kvf-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes kvf-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes kvf-back { from { opacity: 0; } to { opacity: 1; } }
@keyframes kvf-bar-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes kvf-num { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes kvf-draw { from { stroke-dashoffset: 190; } to { stroke-dashoffset: 0; } }
@keyframes kvf-draw-p { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
.kvf-view:not([hidden]) { animation: kvf-fade .2s var(--kvf-ease) both; }
.kvf-sheet:not([hidden]) .kvf-sheet-back { animation: kvf-back .2s var(--kvf-ease) both; }
.kvf-sheet:not([hidden]) .kvf-sheet-panel { animation: kvf-up .26s var(--kvf-ease) both; }
@media (min-width: 700px) { .kvf-sheet:not([hidden]) .kvf-sheet-panel { animation: kvf-rise .2s var(--kvf-ease) both; } }
.kvf-num { animation: kvf-num .18s var(--kvf-ease); }

@media (prefers-reduced-motion: reduce) {
	.kvf *, .kvf *::before, .kvf *::after { transition-duration: .01ms !important; }
	.kvf-view:not([hidden]), .kvf-panel:not([hidden]), .kvf-tools:not([hidden]), .kvf-hello:not([hidden]), .kvf-lb-panel,
	.kvf-sheet:not([hidden]) .kvf-sheet-panel, .kvf.has-sum.is-shop .kvf-sum, .kvf-savebar.is-dirty, .kvf-num { animation: kvf-back .15s linear both !important; }
	.kvf-tick circle, .kvf-tick path { animation: none; stroke-dashoffset: 0; }
}
@media (forced-colors: active) {
	.kvf-day[aria-checked="true"], .kvf-block-b[aria-checked="true"], .kvf-fchip[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
	.kvf-tab[aria-selected="true"]::after { background: Highlight; }
}
.kvf-check-h { margin-top: -14px; }

/* Schritte: Wörter kürzen statt überlappen; bei sehr wenig Platz nur die Ziffern (Wörter bleiben für Screenreader). */
.kvf-steps li em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 299px) {
	.kvf-steps li em { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Ganz schmal (Zoom 200 %): ausgewählter Artikel – Preis und Mengenwahl je eine eigene Zeile. */
@container (max-width: 12em) {
	.kvf-item.is-on, .kvf-item.is-on.has-img { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "price" "buy"; }
	.kvf-item.is-on .kvf-buy { justify-content: flex-start; }
}
/* Gründe in den Tageskästchen dürfen bei großer Schrift trennen statt überstehen. */
.kvf-day-n { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* 0.15.0 Nachtrag: „Wieder so reservieren“ – übernommene Positionen zum Anpassen */
.kvf-hello-t:focus { outline: none; }
.kvf-rep { margin: 10px 0 0; padding: 0 10px; background: #fff; border-top: 0; font-size: var(--f17); }
.kvf-rep .kvf-item { min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.kvf-rep .kvf-item:last-child { background-image: none; }
.kvf-rep .kvf-item.is-on { background-color: transparent; }
.kvf-rep .kvf-item-name { font-size: var(--f17); }
.kvf-rep .kvf-item:not(.is-on) .kvf-item-name, .kvf-rep .kvf-item:not(.is-on) .kvf-price { color: var(--kvf-muted); }
@media (min-width: 576px) { .kvf-rep .kvf-item { column-gap: 16px; } }
.kvf-rep-miss { margin: 8px 0 0; font-size: var(--f15); color: var(--kvf-muted); }
.kvf-rep-note { margin: 8px 0 0; font-size: var(--f15); line-height: 1.45; color: var(--kvf-muted); text-wrap: pretty; }

/* Kontakt: Telefon · E-Mail · Kontaktformular – echte Links, 44 px hoch, Nummer und Adresse brechen nicht */
.kvf-contact { display: inline; }
.kvf a.kvf-contact-a { display: inline-flex; flex-wrap: wrap; align-items: center; min-height: var(--kvf-tap); max-width: 100%; font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.kvf-contact-sep { white-space: pre; }
/* Ganz schmal (Zoom 200 %): Liste reicht bis an den Rand des Kastens, damit die Mengenwahl Platz hat. */
@media (max-width: 359px) {
	.kvf-hello { padding-left: 12px; padding-right: 12px; }
	.kvf-rep { margin-left: -12px; margin-right: -12px; padding: 0; }
	.kvf-rep .kvf-item { margin: 0; padding-left: 10px; padding-right: 10px; background-size: calc(100% - 20px) 1px; }
}
/* Wenig Platz: Kontaktwege untereinander statt Zeilen, die mit „·“ beginnen. */
@container (max-width: 17em) {
	.kvf-item-max .kvf-contact { display: flex; flex-direction: column; align-items: flex-start; }
	.kvf-item-max .kvf-contact-sep { display: none; }
}
@media (max-width: 359px) {
	.kvf-contact { display: flex; flex-direction: column; align-items: flex-start; }
	.kvf-contact-sep { display: none; }
}
/* Hinweis bei Höchstmenge: über die ganze Zeile, Preis und Mengenwahl darunter (Telefon und E-Mail bleiben ganz). */
.kvf-item.has-max, .kvf-item.has-max.has-img { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "price buy"; row-gap: 8px; }
.kvf-item.has-max .kvf-thumb { display: none; }
.kvf-item.has-max .kvf-price { justify-self: start; min-width: 0; text-align: left; }

/* 0.16.1: Direktlink von der Sortiment-Seite – der Artikel leuchtet kurz grün auf. */
.kvf .kvf-item.is-linked { animation: kvf-linked 2.4s cubic-bezier(.23, 1, .32, 1) backwards; }
@keyframes kvf-linked { 0%, 35% { background-color: rgba(181, 209, 172, .55); } 100% { background-color: transparent; } }