/* KINDLINGER Farbmischung – im Stil des KINDLINGER-Themes (Tokens --k-*). */
.kfm {
	--kfm-ink: var(--k-ink, #111418);
	--kfm-muted: var(--k-muted, #586273);
	--kfm-line: var(--k-line, #e3e5e8);
	--kfm-canvas: var(--k-canvas, #f3f4f6);
	--kfm-navy: var(--k-navy, #0f3d77);
	--kfm-navy-2: var(--k-navy-2, #0a2d5a);
	--kfm-yellow: var(--k-yellow, #fcb900);
	--kfm-soft: var(--k-lime-soft, #fff5d6);
	--kfm-ok: var(--k-ok, #2f7a1f);
	--kfm-err: var(--k-sale, #b52e0e);
	--kfm-r: var(--k-radius, 6px);
	margin: 18px 0 8px;
	width: 100%;
	color: var(--kfm-ink);
	font-size: .95rem;
}
.kfm [hidden], .kfm-dialog [hidden] { display: none !important; }
.kfm-form-off form.cart[hidden], .kfm-form-off .klpa-selection[hidden] { display: none !important; }
.kfm:empty { display: none; }
.kfm button { font: inherit; }
.kfm-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 16px 0; }
.kfm-top > *, .kfm-wish > *, .kfm-calc__body > *, .kfm-field, .kfm-input { min-width: 0; }
.kfm-input input { width: 100%; }

/* Auswahl Standard / Wunschfarbe */
.kfm-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kfm-modes [role=radio] {
	display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; text-align: left;
	background: #fff; color: var(--kfm-ink); border: 1.5px solid var(--kfm-line); border-radius: var(--kfm-r); cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.kfm-modes [role=radio]:hover { border-color: var(--kfm-navy); }
.kfm-modes [role=radio][aria-checked=true] { border-color: var(--kfm-navy); box-shadow: inset 0 0 0 1px var(--kfm-navy); background: #f7f9fc; }
.kfm-modes strong { display: block; font-weight: 700; line-height: 1.25; }
.kfm-modes small { display: block; color: var(--kfm-muted); font-size: .8rem; line-height: 1.3; }
.kfm-dot { flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }
.kfm-dot--std { background: #f6f4ee; }
.kfm-dot--wish { background: conic-gradient(from 20deg, #b54a4c, #db8a4b, #e6c440, #7c9773, #5f87a8, #8d779b, #b54a4c); }

/* Gewählter Farbton */
.kfm-wish { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.kfm-picked {
	display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
	background: var(--kfm-canvas); color: var(--kfm-ink); border: 1.5px dashed #b9bfc8; border-radius: var(--kfm-r);
}
.kfm-picked.is-set { background: #fff; border: 1.5px solid var(--kfm-line); }
.kfm-picked:hover { border-color: var(--kfm-navy); }
.kfm-picked__swatch {
	flex: none; width: 52px; height: 52px; border-radius: var(--kfm-r); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
	background: conic-gradient(from 20deg, #b54a4c, #db8a4b, #e6c440, #7c9773, #5f87a8, #8d779b, #b54a4c);
}
.kfm-picked__text { flex: 1; min-width: 0; }
.kfm-picked__text strong { display: block; font-weight: 700; line-height: 1.3; }
.kfm-picked__text small { display: block; color: var(--kfm-muted); font-size: .8rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; }
.kfm-picked__action { flex: none; font-weight: 700; font-size: .875rem; color: var(--kfm-navy); text-decoration: underline; text-underline-offset: 3px; }

/* Gebinde */
.kfm-packs { display: flex; flex-wrap: wrap; gap: 8px; }
.kfm-packs [role=radio] {
	display: grid; gap: 1px; min-width: 92px; padding: 8px 14px; text-align: center; cursor: pointer;
	background: #fff; color: var(--kfm-ink); border: 1.5px solid var(--kfm-line); border-radius: var(--kfm-r);
}
.kfm-packs [role=radio] strong { font-weight: 700; }
.kfm-packs [role=radio] span { font-size: .8rem; color: var(--kfm-muted); }
.kfm-packs [role=radio][aria-checked=true] { border-color: var(--kfm-navy); box-shadow: inset 0 0 0 1px var(--kfm-navy); background: #f7f9fc; }
.kfm-packs [role=radio][aria-checked=true] span { color: var(--kfm-navy); font-weight: 600; }

.kfm-buyrow { display: flex; gap: 10px; align-items: stretch; }
.kfm-buyrow .kfm-buy { flex: 1; }
.kfm-qty { display: inline-flex; align-items: stretch; border: 1.5px solid var(--kfm-line); border-radius: var(--kfm-r); background: #fff; }
.kfm-qty button { width: 40px; border: 0; background: none; color: var(--kfm-ink); font-size: 1.2rem; cursor: pointer; }
.kfm-qty input { width: 46px; border: 0; text-align: center; font-weight: 700; background: none; -moz-appearance: textfield; }
.kfm-qty input::-webkit-outer-spin-button, .kfm-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kfm-msg { margin: 0; font-size: .85rem; color: var(--kfm-muted); }
.kfm-msg:empty { display: none; }
.kfm-msg.is-error { color: var(--kfm-err); font-weight: 600; }
.kfm-ok { margin: 0; padding: 8px 12px; border-radius: var(--kfm-r); background: #eef6ea; color: var(--kfm-ok); font-weight: 600; font-size: .9rem; }
.kfm-ok a { color: inherit; }
.kfm-fine { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--kfm-muted); }
.kfm-fine a { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.kfm-dialog .kfm-input { border-width: 1px; }
.kfm-dialog .kfm-input input { font-size: .9rem; font-weight: 400; }

/* Mengenrechner */
.kfm-calc { border: 1px solid var(--kfm-line); border-radius: var(--kfm-r); background: #fff; }
.kfm-calc > summary {
	display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 700;
}
.kfm-calc > summary::-webkit-details-marker { display: none; }
.kfm-calc > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .15s; }
.kfm-calc[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.kfm-calc > summary .k-icon { color: var(--kfm-navy); }
.kfm-calc__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 16px 16px; }
.kfm-seg { display: flex; gap: 4px; padding: 4px; background: var(--kfm-canvas); border-radius: var(--kfm-r); }
.kfm-seg [role=tab] { flex: 1; min-height: 38px; padding: 6px 8px; border: 0; border-radius: calc(var(--kfm-r) - 2px); background: none; color: var(--kfm-muted); font-weight: 600; font-size: .875rem; cursor: pointer; }
.kfm-seg [role=tab][aria-selected=true] { background: #fff; color: var(--kfm-ink); box-shadow: 0 1px 2px rgb(21 35 59 / 12%); }
.kfm-field { display: grid; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--kfm-muted); }
.kfm-input { display: flex; align-items: center; border: 1.5px solid var(--kfm-line); border-radius: var(--kfm-r); background: #fff; }
.kfm-input:focus-within { border-color: var(--kfm-navy); }
.kfm-input input { flex: 1; min-width: 0; height: 44px; padding: 0 10px; border: 0; background: none; font-size: 1rem; font-weight: 600; color: var(--kfm-ink); outline: none; }
.kfm-input > span { padding: 0 12px 0 4px; color: var(--kfm-muted); font-weight: 600; }
.kfm-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kfm-counters { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 10px; font-size: .875rem; }
.kfm-counters > div { display: flex; align-items: center; gap: 8px; }
.kfm-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--kfm-line); border-radius: var(--kfm-r); }
.kfm-stepper button { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; font-size: 1.05rem; color: var(--kfm-ink); }
.kfm-stepper output { min-width: 22px; text-align: center; font-weight: 700; }
.kfm-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.kfm-walls { display: grid; gap: 8px; }
.kfm-wall { display: grid; grid-template-columns: 1fr 1fr 36px; gap: 8px; align-items: end; }
.kfm-wall__x { height: 44px; border: 0; background: var(--kfm-canvas); border-radius: var(--kfm-r); cursor: pointer; font-size: 1.1rem; }
.kfm-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--kfm-navy); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kfm-opt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: .875rem; font-weight: 600; }
.kfm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kfm-chips button { min-height: 34px; padding: 4px 12px; border: 1.5px solid var(--kfm-line); border-radius: 999px; background: #fff; color: var(--kfm-ink); font-size: .85rem; font-weight: 600; cursor: pointer; }
.kfm-chips button small { font-weight: 500; color: var(--kfm-muted); }
.kfm-chips button[aria-pressed=true] { border-color: var(--kfm-navy); background: var(--kfm-navy); color: #fff; }
.kfm-chips button[aria-pressed=true] small { color: rgb(255 255 255 / 80%); }
.kfm-result { display: grid; gap: 10px; }
.kfm-need { margin: 0; padding: 12px 14px; border-radius: var(--kfm-r); background: var(--kfm-canvas); color: var(--kfm-muted); font-size: .875rem; }
.kfm-need span { display: block; font-size: .8rem; }
.kfm-need strong { display: block; font-size: 1.6rem; line-height: 1.15; color: var(--kfm-ink); font-weight: 800; letter-spacing: -.01em; }
.kfm-need small { display: block; margin-top: 2px; }
.kfm-reco { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--kfm-r); background: var(--kfm-soft); }
.kfm-reco__items { display: grid; gap: 4px; font-size: .9rem; }
.kfm-reco__label { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kfm-ink); }
.kfm-reco__row { display: flex; justify-content: space-between; gap: 10px; }
.kfm-reco__sum { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgb(17 20 24 / 12%); font-weight: 600; }
.kfm-reco__sum strong { font-size: 1.1rem; }
.kfm-reco small { color: var(--kfm-muted); font-size: .75rem; }
.kfm-reco__take { width: 100%; }
.kfm-note { margin: 0; font-size: .78rem; color: var(--kfm-muted); }
.kfm-note:empty { display: none; }

/* Wortmarke KINDLINGER FARBEN: KINDLINGER in Arial Black schwarz, Streifen in Logofarbe Farben (#f6bf0a) */
.kfm-kl { font-family: "Arial Black", "Arial Bold", Gadget, Arial, sans-serif; font-weight: 900; }
.kfm-wm { display: inline-grid; grid-template-columns: auto; justify-items: stretch; line-height: 1; color: #000; }
.kfm-wm > b { font-size: 1.05rem; letter-spacing: .01em; color: #000; }
.kfm-wm > i { display: block; height: 4px; margin: 3px 0 4px; background: #f6bf0a; }
.kfm-wm > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kfm-wm strong { font-family: Arial, Helvetica, sans-serif; font-style: italic; font-weight: 700; font-size: .85rem; letter-spacing: 0; color: #000; }
.kfm-wm small { font-size: .52rem; font-weight: 800; letter-spacing: .16em; color: var(--kfm-muted, #586273); }
.kfm-wm--lg > b { font-size: 1.5rem; }
.kfm-wm--lg > i { height: 5px; margin: 4px 0 5px; }
.kfm-wm--lg strong { font-size: 1.1rem; }
.kfm-wm--lg small { font-size: .62rem; }

/* Schnellauswahl Wunschfarbe */
.kfm-quick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; border: 1px solid var(--kfm-line); border-radius: var(--kfm-r); background: #fff; }
.kfm-quick__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; font-size: .8rem; font-weight: 700; color: var(--kfm-muted); }
.kfm-quick__head .kfm-link { font-size: .8rem; }
.kfm-quick__sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.kfm-quick > *, .kfm-quick__row > * { min-width: 0; }
.kfm-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kfm-quick__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; min-height: 36px; }
.kfm-quick__load { grid-column: 1 / -1; font-size: .85rem; color: var(--kfm-muted); }
.kfm-chip { aspect-ratio: 1; width: 100%; padding: 0; border: 0; border-radius: var(--kfm-r); cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%); transition: transform .12s, box-shadow .12s; }
.kfm-chip:hover { transform: translateY(-2px); }
.kfm-chip[aria-pressed=true] { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%), 0 0 0 2px #fff, 0 0 0 4px var(--kfm-navy); }
.kfm-discover { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1.5px solid var(--kfm-line); border-radius: var(--kfm-r); background: var(--kfm-canvas); color: var(--kfm-ink); text-align: left; cursor: pointer; }
.kfm-discover:hover { border-color: var(--kfm-navy); }
.kfm-discover > span:nth-child(2) { flex: 1; min-width: 0; }
.kfm-discover strong { display: block; font-weight: 700; }
.kfm-discover small { display: block; font-size: .78rem; color: var(--kfm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kfm-discover > span:last-child { font-size: 1.2rem; color: var(--kfm-navy); }
.kfm-discover__dot { flex: none; width: 32px; height: 32px; border-radius: 50%; background: conic-gradient(from 20deg, #b54a4c, #db8a4b, #e6c440, #7c9773, #5f87a8, #8d779b, #b54a4c); }
@media (max-width: 640px) { .kfm-quick { padding: 12px; } .kfm-quick__row { gap: 6px; min-height: 0; } .kfm-chip { border-radius: 5px; } }

/* Bestellung aus dem Rechner – ersetzt Gebinde/Stückzahl an derselben Stelle */
.kfm-order { display: grid; gap: 10px; padding: 14px 16px; border: 1.5px solid var(--kfm-navy); border-radius: var(--kfm-r); background: #f7f9fc; }
.kfm-order__head { display: flex; align-items: center; gap: 12px; }
.kfm-order__head > span:nth-child(2) { flex: 1; min-width: 0; }
.kfm-order__head small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kfm-navy); }
.kfm-order__head strong { display: block; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.kfm-order__swatch { flex: none; width: 40px; height: 40px; border-radius: var(--kfm-r); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }
.kfm-order__rows { display: grid; gap: 3px; font-size: .9rem; }
.kfm-order__rows > span { display: flex; justify-content: space-between; gap: 10px; }
.kfm-order__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid rgb(15 61 119 / 18%); font-size: .82rem; color: var(--kfm-muted); }
.kfm-order__sum strong { font-size: 1.3rem; color: var(--kfm-ink); }
.kfm-order__buy { width: 100%; }
.kfm-order .kfm-link { font-size: .82rem; }

/* Regler */
.kfm-slider { display: grid; gap: 6px; font-size: .875rem; font-weight: 600; }
.kfm-slider__head { display: flex; justify-content: space-between; gap: 10px; }
.kfm-slider__head output { font-weight: 800; color: var(--kfm-navy); }
.kfm-slider__info { margin-left: 6px; font-size: .78rem; font-weight: 500; color: var(--kfm-muted); white-space: nowrap; }
.kfm-rooms { display: grid; gap: 14px; }
.kfm-room { display: grid; gap: 0; }
.kfm-room + .kfm-room { padding-top: 14px; border-top: 1px solid var(--kfm-line); }
.kfm-room__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: .875rem; }
.kfm-room__head[hidden] { display: none; }
.kfm-room__head .kfm-wall__x { width: 36px; height: 32px; }
.kfm-addroom { margin: 10px 0 6px; }
.kfm-slider input[type=range] {
	--kfm-fill: 50%;
	width: 100%; height: 24px; margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.kfm-slider input[type=range]:focus-visible { outline: 2px solid var(--kfm-navy); outline-offset: 4px; }
.kfm-slider input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--kfm-navy) var(--kfm-fill), var(--kfm-line) var(--kfm-fill)); }
.kfm-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--kfm-navy); box-shadow: 0 1px 3px rgb(21 35 59 / 25%); }
.kfm-slider input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--kfm-line); }
.kfm-slider input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--kfm-navy); }
.kfm-slider input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--kfm-navy); }
.kfm-calc__peek { margin-left: auto; font-weight: 800; color: var(--kfm-navy); }
.kfm-calc__peek:empty { display: none; }
.kfm-calc__peek + * { margin-left: 0; }
.kfm-calc > summary:has(.kfm-calc__peek:not(:empty))::after { margin-left: 12px; }
.kfm-need__empty { display: block; }
.kfm-need__empty.is-error { color: var(--kfm-err); font-weight: 600; }
.kfm-reco__hint { color: var(--kfm-muted); font-size: .875rem; }

/* Datenblätter, Hinweis */
.kfm-docs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 22px; font-size: .875rem; }
.kfm-docs a { color: var(--k-navy, #0f3d77); font-weight: 600; }
.kfm-docs a::before { content: "↓ "; }
.kfm-hint { margin: 8px 0 0; font-size: .85rem; color: var(--k-muted, #586273); }

/* Dialog Farbauswahl */
html.kfm-lock { overflow: hidden; }
.kfm-dialog {
	--kfm-ink: var(--k-ink, #111418); --kfm-muted: var(--k-muted, #586273); --kfm-line: var(--k-line, #e3e5e8); --kfm-canvas: var(--k-canvas, #f3f4f6); --kfm-navy: var(--k-navy, #0f3d77); --kfm-r: var(--k-radius, 6px);
	width: min(1000px, calc(100vw - 32px)); height: min(800px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 12px;
	color: var(--kfm-ink); background: #fff; box-shadow: var(--k-shadow-lg, 0 18px 40px rgb(21 35 59 / 18%)); font-family: var(--k-font, inherit);
	display: none; flex-direction: column; overflow: hidden;
}
.kfm-dialog[open] { display: flex; }
.kfm-dialog::backdrop { background: rgb(15 29 50 / 38%); }
.kfm-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 14px; background: #f6f7f9; border-bottom: 1px solid var(--kfm-line); }
.kfm-eyebrow { margin: 0; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--kfm-muted); }
.kfm-dialog__title h2 { margin: 3px 0 0; font-size: 1.3rem; font-weight: 700; line-height: 1.2; color: var(--kfm-ink); }
.kfm-families__title { margin: 0; padding: 14px 20px 0; font-size: .85rem; font-weight: 600; color: var(--kfm-ink); }
.kfm-dialog .kfm-field { font-weight: 500; font-size: .78rem; }
.kfm-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--kfm-muted); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.kfm-dialog__tools { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 20px 0; }
.kfm-close:hover { background: #fff; color: var(--kfm-ink); }
.kfm-dialog__tools .kfm-field { min-width: 200px; }
.kfm-dialog__tools .kfm-field--grow { flex: 1; }
.kfm-dialog__tools select { height: 44px; padding: 0 10px; border: 1px solid var(--kfm-line); border-radius: var(--kfm-r); background: #fff; font-size: .9rem; font-weight: 500; color: var(--kfm-ink); }
.kfm-families { display: flex; gap: 6px; overflow-x: auto; padding: 8px 20px 12px; scrollbar-width: thin; }
.kfm-families button { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 30px; padding: 3px 11px 3px 5px; border: 1px solid var(--kfm-line); border-radius: 999px; background: #fff; font-size: .8rem; font-weight: 500; color: var(--kfm-ink); cursor: pointer; }
.kfm-families i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }
.kfm-families button[aria-pressed=true] { border-color: var(--kfm-navy); background: #f4f7fb; }
.kfm-dialog__body { flex: 1; overflow-y: auto; padding: 2px 20px 20px; border-top: 1px solid var(--kfm-line); }
.kfm-count { margin: 8px 0; font-size: .78rem; color: var(--kfm-muted); }
.kfm-global h3 { margin: 12px 0 8px; font-size: .9rem; }
.kfm-global { padding-bottom: 6px; border-bottom: 1px dashed var(--kfm-line); }
.kfm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.kfm-tile { display: grid; grid-template-rows: 64px auto; padding: 0; overflow: hidden; text-align: left; cursor: pointer; background: #fff; border: 1px solid var(--kfm-line); border-radius: var(--kfm-r); color: var(--kfm-ink); }
.kfm-tile:hover { border-color: #9aa3af; }
.kfm-tile[aria-pressed=true] { border-color: var(--kfm-navy); box-shadow: 0 0 0 1px var(--kfm-navy); }
.kfm-tile__sw { display: block; border-bottom: 1px solid rgb(0 0 0 / 6%); }
.kfm-tile__t { display: grid; gap: 0; padding: 6px 8px 7px; min-width: 0; }
.kfm-tile__t strong { font-weight: 600; font-size: .76rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kfm-tile__t small { font-size: .7rem; line-height: 1.3; color: var(--kfm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kfm-tile__t small:empty { display: none; }
.kfm-more { display: block; margin: 16px auto 0; }
.kfm-dialog__foot { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--kfm-line); background: #fff; }
.kfm-foot__swatch { flex: none; width: 40px; height: 40px; border-radius: var(--kfm-r); background: var(--kfm-canvas); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }
.kfm-foot__text { flex: 1; min-width: 0; }
.kfm-foot__text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kfm-foot__text small { display: block; color: var(--kfm-muted); font-size: .8rem; }
.kfm-dialog .kfm-large { background: #fff; color: var(--kfm-ink); box-shadow: inset 0 0 0 1px var(--kfm-line); }
.kfm-dialog .kfm-large:hover { background: var(--kfm-canvas); color: var(--kfm-ink); }
.kfm-dialog .button:disabled { opacity: .45; cursor: not-allowed; }

/* Vollbild-Farbe */
.kfm-full { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; }
.kfm-full::backdrop { background: #000; }
.kfm-full .kfm-close { position: absolute; top: 16px; right: 16px; background: rgb(255 255 255 / 90%); }
.kfm-full__label { position: absolute; left: 16px; bottom: 16px; padding: 10px 14px; border-radius: 6px; background: rgb(255 255 255 / 92%); color: #111418; font-family: var(--k-font, inherit); }
.kfm-full__label strong, .kfm-full__label small { display: block; }
.kfm-full__label small { font-size: .78rem; color: #586273; }

@media (max-width: 640px) {
	.kfm-modes { gap: 8px; }
	.kfm-modes [role=radio] { gap: 8px; padding: 8px 10px; }
	.kfm-modes [role=radio] { min-height: 56px; }
	.kfm-grid3 { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
	.kfm-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
	.kfm-dialog__tools .kfm-field { min-width: 0; flex: 1 1 100%; }
	.kfm-tiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
	.kfm-tile { grid-template-rows: 52px auto; }
	.kfm-dialog__head { padding: 12px 12px 10px 14px; }
	.kfm-dialog__title h2 { font-size: 1.15rem; }
	.kfm-dialog__tools { gap: 8px; padding: 10px 12px 0; }
	.kfm-families__title { padding: 10px 12px 0; }
	.kfm-families { padding: 6px 12px 10px; }
	.kfm-dialog__body { padding: 2px 12px 12px; }
	.kfm-dialog__foot { padding: 10px 12px; }
	.kfm-dialog__foot { flex-wrap: wrap; }
	.kfm-dialog__foot .kfm-large { flex: 1; }
	.kfm-dialog__foot .kfm-take { flex: 2; }
	.kfm-foot__text { flex-basis: calc(100% - 56px); }
}
@media (prefers-reduced-motion: reduce) { .kfm * { transition: none !important; } }