/* Klenkes Anfrage-Konfigurator */
.klk-konf {
	--k-yellow: #DED15F;
	--k-bg: #171719;
	--k-bg-alt: #1A1A1C;
	--k-card: #222224;
	--k-line: #2D2D30;
	--k-grey: #5C5C5E;
	--k-text: #A7A7A7;
	--k-white: #FFFFFF;
	position: relative;
	min-height: 780px;
	font-family: Ubuntu, system-ui, sans-serif;
	color: var(--k-white);
	background: var(--k-bg);
	overflow: hidden;
	isolation: isolate;
	text-align: left;
}
.klk-konf *, .klk-konf *::before, .klk-konf *::after { box-sizing: border-box; }

/* ---------- Szene ---------- */
.klk-konf__scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.klk-konf__scene svg { display: block; width: 100%; height: 100%; }
.klk-sky-a { stop-color: #1d1d21; }
.klk-sky-b { stop-color: #171719; }
.klk-konf__scene.is-night .klk-sky-a { stop-color: #0f1018; }
.klk-konf__scene.is-night .klk-sky-b { stop-color: #15151c; }
.klk-ground { fill: #141416; }
.klk-skyline rect, .klk-skyline path, .klk-dom * { fill: #1c1c20; }
.klk-sun { fill: #DED15F; opacity: .08; }
.klk-moon { fill: #f3eeb8; opacity: .85; }
.klk-moon-cut { fill: #11121a; }
.klk-stars circle { fill: #fff; opacity: .55; }
.klk-world { transition: transform .6s cubic-bezier(.2, .7, .2, 1); transform-origin: 0 0; }

.klk-facade { fill: #3d3d43; stroke: #46464c; stroke-width: 1.2; transition: fill .4s; }
.klk-facade.is-glass { fill: #303a46; }
.klk-facade.is-light { fill: #46464e; }
.klk-facade.is-metal { fill: #33363b; }
.klk-facade.is-warm { fill: #3d3934; }
.klk-facade.is-back { fill: #2c2c31; }
.klk-roof { fill: #2b2b2f; stroke: #46464c; stroke-width: 1.2; }
.klk-chimney, .klk-parapet, .klk-balcony, .klk-canopy { fill: #2b2b2f; stroke: #46464c; stroke-width: 1; }
.klk-door { fill: #252528; stroke: #4c4c52; stroke-width: 1; }
.klk-door.is-glass { fill: url(#klkGlass); opacity: .9; }
.klk-mullion, .klk-antenna { stroke: #4c4c52; stroke-width: 1.5; fill: none; }
.klk-knob { fill: var(--k-yellow); }
.klk-win { fill: url(#klkGlass); stroke: #22252a; stroke-width: 1; transition: fill .4s; }
.klk-win.is-shop { fill: url(#klkGlass); }
.klk-win.is-lit { fill: #DED15F; fill-opacity: .7; }
.klk-shine { stroke: rgba(255, 255, 255, .28); stroke-width: 1.4; stroke-linecap: round; fill: none; transition: opacity .6s; }
.klk-win-hl { fill: none; stroke: var(--k-yellow); stroke-width: 2; }
.klk-tag, .klk-sign-txt, .klk-ghost-q text, .klk-bubble text { font-family: Ubuntu, sans-serif; fill: var(--k-yellow); font-size: 13px; font-weight: 500; }
.klk-sign { fill: #1f1f22; stroke: var(--k-yellow); stroke-width: 1; }
.klk-sign-txt { text-anchor: middle; font-size: 11px; letter-spacing: .14em; }
.klk-awning { fill: var(--k-yellow); }
.klk-awning.is-alt { fill: #2b2b2f; }
.klk-tables path { stroke: #5C5C5E; stroke-width: 2; fill: #2b2b2f; }
.klk-cross rect { fill: #1f1f22; stroke: #4c8f6a; stroke-width: 1.5; }
.klk-cross path { stroke: #63c08b; stroke-width: 4; stroke-linecap: round; }
.klk-rib { stroke: #3c3f45; stroke-width: 1; }
.klk-rib.is-door { stroke: #50545b; }
.klk-rolldoor { fill: #2a2c30; stroke: #50545b; }
.klk-clock { fill: #f3eeb8; stroke: #46464c; }
.klk-clock-hand { stroke: #171719; stroke-width: 1.5; stroke-linecap: round; }
.klk-flagpole { stroke: #5C5C5E; stroke-width: 2; }
.klk-flag { fill: var(--k-yellow); }

.klk-bld { animation: klk-pop .45s cubic-bezier(.2, .7, .2, 1); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes klk-pop { from { opacity: .3; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Schmutz */
.klk-dirt { transition: opacity 1.2s ease; }
.klk-smudge { fill: #7a6538; }
.klk-smudge.is-dust { fill: #a9a39a; }
.klk-streak { fill: #6b5932; opacity: .35; }
.klk-paint { fill: #d8d2c4; opacity: .7; }
.klk-dustcloud { fill: #a9a39a; opacity: .18; }
.klk-konf__scene[data-dirt="1"] .klk-win:not(.is-lit) { fill: #535048; }
.klk-konf__scene[data-dirt="2"] .klk-win:not(.is-lit) { fill: #4e4637; }
.klk-konf__scene[data-dirt="3"] .klk-win:not(.is-lit) { fill: #463c2b; }
.klk-konf__scene[data-dirt="2"] .klk-shine, .klk-konf__scene[data-dirt="3"] .klk-shine { opacity: 0; }

/* Requisiten */
.klk-gondola-box { fill: var(--k-yellow); }
.klk-rope { stroke: #8a8a8f; stroke-width: 1.2; fill: none; }
.klk-worker-head { fill: #e2c9a6; }
.klk-worker-body { fill: #2b2b2f; }
.klk-squeegee { stroke: #ffffff; stroke-width: 2; stroke-linecap: round; }
.klk-gondola { animation: klk-bob 3.4s ease-in-out infinite; }
@keyframes klk-bob { 50% { transform: translateY(-6px); } }
.klk-stair-tower { fill: url(#klkGlass); stroke: #4c4c52; opacity: .95; }
.klk-stair-line { stroke: var(--k-yellow); stroke-width: 2; fill: none; stroke-linejoin: round; }
.klk-bucket path:first-child { fill: var(--k-yellow); }
.klk-mop { stroke: #b9b9bd; stroke-width: 2; stroke-linecap: round; fill: none; }
.klk-machine ellipse { fill: #5C5C5E; }
.klk-machine rect { fill: var(--k-yellow); }
.klk-roll rect, .klk-roll circle { fill: #a5523a; }
.klk-roll path { stroke: #6f3020; fill: none; }
.klk-scaffold path { stroke: #8a7a3a; stroke-width: 2; }
.klk-scaffold .klk-plank { stroke: #b39b42; stroke-width: 4; }
.klk-scaffold .klk-brace { stroke-width: 1.2; opacity: .7; }
.klk-crane path { stroke: var(--k-yellow); stroke-width: 2; fill: none; }
.klk-crane .klk-rope { stroke: #8a8a8f; stroke-width: 1; }
.klk-hook { fill: #5C5C5E; }
.klk-bubble path { fill: #222224; stroke: var(--k-yellow); stroke-width: 1.4; }
.klk-bubble text { text-anchor: middle; }
.klk-person circle { fill: #e2c9a6; }
.klk-person-body { fill: var(--k-yellow); }
.klk-tree circle { fill: #26302a; }
.klk-trunk { fill: #3a2f26; }
.klk-measure path { stroke: var(--k-yellow); fill: none; }
.klk-measure text { fill: var(--k-yellow); text-anchor: middle; font-family: Ubuntu, sans-serif; font-weight: 500; stroke: none; }

/* Sauber! */
.klk-konf__scene.is-clean .klk-dirt { opacity: 0; }
.klk-sparkles path { fill: #f4e87c; opacity: 0; transform-box: fill-box; transform-origin: center; animation: klk-spark 2.4s ease-in-out infinite; }
@keyframes klk-spark { 0%, 100% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.15); } 55% { opacity: .2; transform: scale(.7); } }

.klk-konf__chips { position: absolute; right: 24px; top: 24px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 46%; }
.klk-konf__chips span { font-size: 13px; color: var(--k-white); background: rgba(34, 34, 36, .85); border: 1px solid var(--k-line); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }

/* ---------- Karte / Formular ---------- */
.klk-konf__card { position: relative; z-index: 1; width: min(600px, 100%); padding: 56px 48px 48px; background: linear-gradient(90deg, rgba(23, 23, 25, .97) 0%, rgba(23, 23, 25, .92) 85%, rgba(23, 23, 25, 0) 100%); min-height: 780px; }
.klk-konf__progress { height: 3px; background: var(--k-line); margin-bottom: 18px; }
.klk-konf__progress span { display: block; height: 100%; background: var(--k-yellow); transition: width .5s ease; }
.klk-konf__meta { font-size: 14px; color: var(--k-yellow); font-weight: 500; margin-bottom: 10px; }
.klk-konf__title { font-size: 34px; line-height: 1.15; font-weight: 500; margin: 0 0 10px; color: var(--k-white); outline: none; }
.klk-konf__sub { font-size: 16px; line-height: 1.5; color: var(--k-text); margin: 0 0 26px; }
.klk-konf__sub a { color: var(--k-yellow); }
.klk-konf__body { display: flex; flex-direction: column; gap: 22px; }

.klk-konf__tiles { display: grid; grid-template-columns: 1fr; gap: 10px; }
.klk-konf__tiles.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.klk-konf__tile { appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; background: var(--k-card); border: 1px solid var(--k-line); color: var(--k-white); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, transform .15s; min-height: 64px; }
.klk-konf__tile:hover { border-color: var(--k-grey); background: #262628; }
.klk-konf__tile:focus-visible, .klk-konf__seg-btn:focus-visible, .klk-konf__next:focus-visible, .klk-konf__back:focus-visible { outline: 2px solid var(--k-yellow); outline-offset: 2px; }
.klk-konf__tile:active { transform: scale(.985); }
.klk-konf__tile.is-on { border-color: var(--k-yellow); background: #2a2a2b; }
.klk-konf__tile-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #2D2D30; color: var(--k-yellow); transition: background-color .2s, color .2s; }
.klk-konf__tile.is-on .klk-konf__tile-ico { background: var(--k-yellow); color: #171719; }
.klk-konf__tile-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.klk-konf__tile-label { font-size: 16px; font-weight: 500; line-height: 1.3; }
.klk-konf__tile-desc { font-size: 13.5px; color: var(--k-text); line-height: 1.35; }
.klk-konf__tiles.is-compact .klk-konf__tile { padding: 12px 14px; min-height: 52px; }
.klk-konf__tiles.is-compact .klk-konf__tile-ico { width: 38px; height: 38px; }
.klk-konf__tiles.is-compact .klk-konf__tile-ico svg { width: 22px; height: 22px; }
.klk-konf__tile-check { margin-left: auto; flex: none; width: 22px; height: 22px; border: 1px solid var(--k-grey); display: flex; align-items: center; justify-content: center; color: transparent; }
.klk-konf__tile.is-on .klk-konf__tile-check { background: var(--k-yellow); border-color: var(--k-yellow); color: #171719; }

.klk-konf__field { display: flex; flex-direction: column; gap: 10px; }
.klk-konf__label { font-size: 15px; color: var(--k-white); font-weight: 500; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.klk-konf__val { color: var(--k-yellow); font-weight: 500; }
.klk-konf__opt { color: var(--k-grey); font-weight: 400; font-size: 13px; }
.klk-konf__hint, .klk-konf__note { font-size: 13.5px; color: var(--k-text); margin: 0; }
.klk-konf__note { margin-top: 4px; }

.klk-konf__seg { display: flex; flex-wrap: wrap; gap: 8px; }
.klk-konf__seg-btn { appearance: none; font: inherit; font-size: 14.5px; color: var(--k-white); background: var(--k-card); border: 1px solid var(--k-line); padding: 11px 16px; border-radius: 999px; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; min-height: 44px; }
.klk-konf__seg-btn:hover { border-color: var(--k-grey); }
.klk-konf__seg-btn.is-on { background: var(--k-yellow); border-color: var(--k-yellow); color: #171719; font-weight: 500; }

.klk-konf__range { display: flex; align-items: center; gap: 16px; }
.klk-konf__range input[type=range] { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; height: 4px; background: var(--k-line); border-radius: 2px; outline: none; }
.klk-konf__range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--k-yellow); border: 5px solid var(--k-bg); box-shadow: 0 0 0 1px var(--k-yellow); cursor: grab; }
.klk-konf__range input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--k-yellow); border: 5px solid var(--k-bg); box-shadow: 0 0 0 1px var(--k-yellow); cursor: grab; }
.klk-konf__range input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--k-yellow); }
.klk-konf__num { display: flex; align-items: center; gap: 6px; background: var(--k-card); padding: 0 12px; height: 44px; color: var(--k-text); font-size: 14px; }
.klk-konf__num input { width: 64px; background: transparent; border: 0; color: var(--k-white); font: inherit; font-size: 15px; text-align: right; outline: none; -moz-appearance: textfield; }
.klk-konf__num input::-webkit-outer-spin-button, .klk-konf__num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.klk-konf__input { width: 100%; font: inherit; font-size: 16px; color: var(--k-white); background: var(--k-card); border: 1px solid transparent; padding: 15px 18px; border-radius: 0; outline: none; transition: border-color .2s; }
.klk-konf__input:focus { border-color: var(--k-yellow); }
.klk-konf__input::placeholder { color: #77777a; }
.klk-konf__input.is-plz { max-width: 200px; letter-spacing: .1em; }
.klk-konf__input[type=date] { color-scheme: dark; max-width: 240px; }
textarea.klk-konf__input { resize: vertical; min-height: 90px; }
.klk-konf__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.klk-konf__check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--k-text); line-height: 1.5; cursor: pointer; }
.klk-konf__check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--k-yellow); flex: none; }
.klk-konf__check a { color: var(--k-yellow); }
.klk-konf__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.klk-konf__summary { border-top: 1px solid var(--k-line); padding-top: 14px; font-size: 14px; color: var(--k-text); }
.klk-konf__summary summary { cursor: pointer; color: var(--k-white); font-weight: 500; }
.klk-konf__summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 14px 0 0; }
.klk-konf__summary dt { color: var(--k-grey); }
.klk-konf__summary dd { margin: 0; color: var(--k-white); }

.klk-konf__msg { min-height: 1px; color: #ffb4a8; font-size: 14px; }
.klk-konf__msg:empty { display: none; }
.klk-konf__nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; }
.klk-konf__back { appearance: none; background: transparent; border: 0; color: var(--k-text); font: inherit; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 0; min-height: 44px; }
.klk-konf__back:hover { color: var(--k-white); }
.klk-konf__next { appearance: none; background: transparent; border: 0; color: var(--k-white); font: inherit; font-size: 17px; font-weight: 500; display: inline-flex; align-items: center; gap: 18px; cursor: pointer; padding: 0; }
.klk-konf__circle { width: 58px; height: 58px; border-radius: 50%; background: var(--k-yellow); color: #171719; display: flex; align-items: center; justify-content: center; transition: transform .25s, opacity .2s; }
.klk-konf__next:hover .klk-konf__circle { transform: rotate(45deg); }
.klk-konf__next.is-disabled { opacity: .45; cursor: not-allowed; }
.klk-konf__next.is-disabled:hover .klk-konf__circle { transform: none; }
.klk-konf__next.is-loading .klk-konf__circle { animation: klk-spin 1s linear infinite; }
@keyframes klk-spin { to { transform: rotate(360deg); } }

.klk-konf__done { display: flex; flex-direction: column; gap: 6px; padding-top: 40px; }
.klk-konf__done-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--k-yellow); color: #171719; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.klk-konf__done-ico svg { width: 34px; height: 34px; }


/* Theme-Button-Stile (z. B. Hello Elementor) innerhalb des Konfigurators neutralisieren */
.klk-konf button, .klk-konf [type=button] { white-space: normal; text-transform: none; letter-spacing: normal; line-height: 1.35; font-family: inherit; border-radius: 0; box-shadow: none; text-decoration: none; -webkit-user-select: none; user-select: none; width: auto; max-width: 100%; }
.klk-konf button:hover, .klk-konf button:focus, .klk-konf [type=button]:hover, .klk-konf [type=button]:focus { text-decoration: none; box-shadow: none; }
.klk-konf .klk-konf__tile, .klk-konf .klk-konf__tile:hover, .klk-konf .klk-konf__tile:focus { color: var(--k-white); }
.klk-konf .klk-konf__tile:focus:not(:hover):not(.is-on) { background: var(--k-card); border-color: var(--k-line); }
.klk-konf .klk-konf__tile.is-on, .klk-konf .klk-konf__tile.is-on:hover, .klk-konf .klk-konf__tile.is-on:focus { background: #2a2a2b; border-color: var(--k-yellow); color: var(--k-white); }
.klk-konf .klk-konf__seg-btn:hover, .klk-konf .klk-konf__seg-btn:focus { background: var(--k-card); color: var(--k-white); }
.klk-konf .klk-konf__seg-btn.is-on, .klk-konf .klk-konf__seg-btn.is-on:hover, .klk-konf .klk-konf__seg-btn.is-on:focus { background: var(--k-yellow); border-color: var(--k-yellow); color: #171719; }
.klk-konf .klk-konf__back, .klk-konf .klk-konf__back:hover, .klk-konf .klk-konf__back:focus, .klk-konf .klk-konf__next, .klk-konf .klk-konf__next:hover, .klk-konf .klk-konf__next:focus { background: transparent; border: 0; padding-left: 0; padding-right: 0; }
.klk-konf .klk-konf__back { color: var(--k-text); padding: 10px 0; }
.klk-konf .klk-konf__back:hover, .klk-konf .klk-konf__back:focus { color: var(--k-white); }
.klk-konf .klk-konf__next, .klk-konf .klk-konf__next:hover, .klk-konf .klk-konf__next:focus { color: var(--k-white); padding: 0; }
.klk-konf .klk-konf__tile-txt { flex: 1 1 auto; min-width: 0; }
.klk-konf .klk-konf__tile-label, .klk-konf .klk-konf__tile-desc { overflow-wrap: anywhere; hyphens: auto; }
.klk-konf .klk-konf__tile { padding: 16px 18px; border-radius: 0; text-align: left; }
.klk-konf .klk-konf__tiles.is-compact .klk-konf__tile { padding: 12px 14px; }
.klk-konf .klk-konf__seg-btn { padding: 11px 16px; border-radius: 999px; font-size: 14.5px; line-height: 1.3; text-align: center; }
.klk-konf input[type=range] { padding: 0; border: 0; }

/* ---------- Responsiv ---------- */
@media (max-width: 900px) {
	.klk-konf { min-height: 0; }
	.klk-konf__scene { position: relative; height: 300px; }
	.klk-konf__scene svg { position: absolute; inset: 0; }
	.klk-konf__chips { left: 16px; right: 16px; top: 14px; max-width: none; justify-content: flex-start; }
	.klk-konf__chips span { font-size: 12px; padding: 5px 10px; }
	.klk-konf__card { width: 100%; min-height: 0; padding: 28px 20px 40px; background: var(--k-bg); }
	.klk-konf__title { font-size: 26px; }
	.klk-konf__tiles.cols-2 { grid-template-columns: 1fr; }
	.klk-konf__grid2 { grid-template-columns: 1fr; }
	.klk-konf__nav { position: sticky; bottom: 0; background: linear-gradient(0deg, var(--k-bg) 70%, rgba(23, 23, 25, 0)); padding: 14px 0 6px; margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.klk-world, .klk-bld, .klk-gondola, .klk-sparkles path, .klk-dirt, .klk-konf__progress span { animation: none !important; transition: none !important; }
	.klk-sparkles path { opacity: 1; }
}
.klk-bld.is-ghost { opacity: .8; }