/* KeliraKIWebseitenAnalyse – Frontend-Formular. Erbt Akzentfarbe vom Theme. */
.kwa {
	--kwa-accent: #22d3ee;
	--kwa-accent-contrast: #00131a;
	--kwa-radius: 14px;
	max-width: 680px;
	margin: 1.5rem auto;
	padding: clamp(1.1rem, 3vw, 2rem);
	background: #fff;
	color: #14181f;
	border: 1px solid #e4e8ef;
	border-radius: var(--kwa-radius);
	box-shadow: 0 10px 30px rgba(10, 18, 38, .08);
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}
.kwa *, .kwa *::before, .kwa *::after { box-sizing: border-box; }
.kwa__head { text-align: center; margin-bottom: 1.2rem; }
.kwa__title { margin: 0 0 .35rem; font-size: clamp(1.25rem, 3.5vw, 1.7rem); }
.kwa__subtitle { margin: 0; color: #667085; }

/* Formular */
.kwa__form { display: grid; gap: .85rem; }
.kwa__field { display: grid; gap: .3rem; }
.kwa__field > span { font-weight: 600; font-size: .9rem; }
.kwa__field input {
	width: 100%; padding: .7rem .85rem; font-size: 1rem;
	border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; color: inherit;
}
.kwa__field input:focus { outline: 2px solid var(--kwa-accent); border-color: var(--kwa-accent); background: #fff; }
.kwa__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kwa__check { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; color: #475467; }
.kwa__check input { margin-top: .2rem; flex: 0 0 auto; }
.kwa__check a { color: var(--kwa-accent); }
.kwa__captcha { margin: .2rem 0; }
.kwa__err { color: #b42318; font-size: .9rem; background: #fef3f2; border: 1px solid #fecdca; padding: .55rem .7rem; border-radius: 8px; }

.kwa__btn {
	appearance: none; cursor: pointer; border: 0; border-radius: 10px;
	padding: .8rem 1.2rem; font-size: 1rem; font-weight: 700;
	background: var(--kwa-accent); color: var(--kwa-accent-contrast);
	transition: filter .15s ease;
}
.kwa__btn:hover { filter: brightness(1.06); }
.kwa__btn:disabled { opacity: .65; cursor: default; }

/* Fortschritt */
.kwa__progress { text-align: center; padding: 1.5rem 0; }
.kwa__spinner { width: 40px; height: 40px; margin: 0 auto 1rem; border: 4px solid #e4e8ef; border-top-color: var(--kwa-accent); border-radius: 50%; animation: kwa-spin 1s linear infinite; }
@keyframes kwa-spin { to { transform: rotate(360deg); } }
.kwa__bar { height: 10px; background: #e4e8ef; border-radius: 999px; overflow: hidden; }
.kwa__bar-fill { height: 100%; background: var(--kwa-accent); width: 5%; transition: width .4s ease; }
.kwa__step { margin: .7rem 0 0; color: #667085; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .kwa__spinner { animation: none; } }

/* Ergebnis */
.kwa__scoreboard { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.kwa__ring { width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.kwa__ring-in { width: 88px; height: 88px; background: #fff; border-radius: 50%; display: grid; place-items: center; text-align: center; }
.kwa__ring-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.kwa__ring-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #667085; }
.kwa__doms { flex: 1 1 240px; display: grid; gap: .6rem; }
.kwa__dom-top { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 600; }
.kwa__dom-bar { height: 8px; background: #e4e8ef; border-radius: 999px; overflow: hidden; margin-top: .2rem; }
.kwa__dom-bar span { display: block; height: 100%; border-radius: 999px; }

.kwa__summary { background: #f5f7fb; border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1.1rem; }
.kwa__summary p { margin: 0 0 .6rem; } .kwa__summary p:last-child { margin: 0; }
.kwa__h4 { margin: 1rem 0 .6rem; font-size: 1.1rem; }
.kwa__finds { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.kwa__find { display: flex; gap: .65rem; padding: .7rem .8rem; border-radius: 10px; border: 1px solid #eef0f4; background: #fff; }
.kwa__find p { margin: .2rem 0 0; font-size: .88rem; color: #475467; }
.kwa__find .kwa__fix { color: #0b6b5e; }
.kwa__find-ic { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .8rem; }
.kwa__find--fail .kwa__find-ic { background: #dc2626; }
.kwa__find--warn .kwa__find-ic { background: #f59e0b; }
.kwa__allgood { background: #ecfdf3; color: #027a48; padding: .8rem 1rem; border-radius: 10px; }
.kwa__more { margin-top: .7rem; } .kwa__more summary { cursor: pointer; color: var(--kwa-accent); font-weight: 600; }
.kwa__more .kwa__finds { margin-top: .6rem; }

.kwa__cta { margin-top: 1.3rem; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.kwa__pdf { color: var(--kwa-accent); font-weight: 600; text-decoration: none; }
.kwa__pdf:hover { text-decoration: underline; }
.kwa__powered { margin-top: 1.1rem; text-align: center; font-size: .75rem; color: #98a2b3; }
.kwa__powered a { color: inherit; }