/* ============================================================
   Koch Lead Engine – Frontend-Styles
   Nutzt die Theme-Tokens (tokens.css); Fallbacks für den Betrieb
   in anderen Themes sind je Variable hinterlegt.
   ============================================================ */

/* ------------------------------------------------------ Honeypot */
.kle-hp { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; }

/* -------------------------------------------------------- Funnel */
.kle-funnel, .kle-rueckruf {
	background: var(--k-weiss, #fff);
	border: 1px solid var(--k-sand-tief, #E9E1D3);
	border-radius: var(--k-radius, 6px);
	box-shadow: var(--k-schatten, 0 10px 30px -12px rgba(0,0,0,.25));
	padding: 1.8rem 1.6rem;
}

.kle-fortschritt {
	display: flex;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--k-text-gedimmt, #6B6257);
}
.kle-fortschritt li {
	flex: 1;
	text-align: center;
	padding: 0.4rem 0.2rem;
	border-bottom: 3px solid var(--k-sand-tief, #E9E1D3);
}
.kle-fortschritt li.ist-aktiv {
	color: var(--k-anthrazit, #23272B);
	border-bottom-color: var(--k-signal, #F5A800);
}

.kle-schritt { display: none; border: 0; margin: 0; padding: 0; }
.kle-schritt.ist-aktiv { display: block; }
.kle-schritt legend {
	font-weight: 800;
	font-size: 1.05rem;
	margin-bottom: 1rem;
	font-family: var(--k-font-display, inherit);
}

.kle-optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.kle-option { position: relative; display: block; cursor: pointer; }
.kle-option input { position: absolute; opacity: 0; }
.kle-option span {
	display: block;
	padding: 0.75rem 0.9rem;
	border: 2px solid var(--k-sand-tief, #E9E1D3);
	border-radius: var(--k-radius, 6px);
	font-weight: 600;
	font-size: 0.92rem;
	text-align: center;
	transition: border-color 150ms ease, background 150ms ease;
}
.kle-option input:checked + span {
	border-color: var(--k-signal, #F5A800);
	background: rgba(245, 168, 0, 0.12);
}
.kle-option input:focus-visible + span { outline: 3px solid var(--k-signal, #F5A800); outline-offset: 2px; }

.kle-feld { margin: 0 0 1rem; }
.kle-feld label, .kle-label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3rem; }
.kle-inline { display: inline-flex; align-items: center; gap: 0.45rem; margin-right: 1.2rem; font-weight: 500; }
.kle-feld input[type="text"],
.kle-feld input[type="tel"],
.kle-feld input[type="email"],
.kle-feld select,
.kle-feld textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--k-sand-tief, #D8D2C6);
	border-radius: var(--k-radius, 6px);
	font: inherit;
	background: #FDFCFA;
}
.kle-feld--consent { font-size: 0.85rem; }
.kle-feld--consent .kle-inline { align-items: flex-start; margin-right: 0; }

.kle-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }

.kle-btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background: var(--k-signal, #F5A800);
	color: var(--k-anthrazit-tief, #17191C);
	border: 0;
	border-radius: var(--k-radius, 6px);
	font-weight: 800;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 150ms ease;
}
.kle-btn:hover { background: var(--k-signal-dunkel, #D18F00); }
.kle-btn--zurueck { background: transparent; border: 2px solid var(--k-sand-tief, #D8D2C6); font-weight: 600; }
.kle-btn--zurueck:hover { background: var(--k-sand, #F4EFE7); }

.kle-status { margin: 1rem 0 0; font-weight: 600; }
.kle-status.ist-erfolg { color: #1B7A38; }
.kle-status.ist-fehler { color: #B00020; }

/* ---------------------------------------------------------- Dock */
.kle-dock {
	position: fixed;
	right: 1.1rem;
	bottom: 1.1rem;
	z-index: 90;
	font-family: var(--k-font-body, system-ui, sans-serif);
}

.kle-dock__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--k-signal, #F5A800);
	color: var(--k-anthrazit-tief, #17191C);
	border: 0;
	border-radius: 999px;
	padding: 0.8rem 1.3rem;
	font-weight: 800;
	font-size: 0.95rem;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.kle-dock__menue {
	display: none;
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.7rem);
	min-width: 240px;
	background: var(--k-anthrazit-tief, #17191C);
	border-radius: var(--k-radius, 8px);
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.kle-dock.ist-offen .kle-dock__menue { display: block; }

.kle-dock__link {
	display: block;
	padding: 0.9rem 1.2rem;
	color: #F7F5F1;
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	border-bottom: 1px solid rgba(247, 245, 241, 0.08);
}
.kle-dock__link:last-child { border-bottom: 0; }
.kle-dock__link:hover { background: rgba(245, 168, 0, 0.15); color: var(--k-signal, #F5A800); }
.kle-dock__link small { display: block; font-weight: 400; font-size: 0.78rem; opacity: 0.65; }

@media (max-width: 600px) {
	.kle-dock { right: 0.75rem; bottom: 0.75rem; }
}