/* Konzetto Leadership Selbsttest – Navy #19345e / Gold #ccb18c. Schriften kommen vom Theme (Sora / Inter), Fallback System. */
.kls{
	--navy:#19345e; --navy-d:#0e2142; --gold:#ccb18c; --ink:#f4f1ea; --mute:rgba(244,241,234,.74); --line:rgba(204,177,140,.38); --err:#ffb4a8;
	font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	color:var(--ink); line-height:1.55; font-size:17px; box-sizing:border-box; container-type:inline-size; container-name:kls;
}
.kls *,.kls *::before,.kls *::after{box-sizing:border-box}
.kls .kls-shell{
	position:relative; overflow:hidden; isolation:isolate;
	background:linear-gradient(160deg,var(--navy) 0%,var(--navy-d) 100%);
	border-top:3px solid var(--gold);
	padding:clamp(28px,5vw,64px) clamp(20px,4vw,56px);
	max-width:1120px; margin:0 auto;
}
.kls .kls-deco{position:absolute; z-index:-1; right:-180px; top:-160px; width:640px; height:640px; fill:none; stroke:var(--gold); stroke-width:1; opacity:.16; pointer-events:none}
.kls h2,.kls h3{font-family:"Sora","Inter",system-ui,sans-serif; font-weight:400; color:var(--ink); margin:0}
.kls p{margin:0 0 1em; color:var(--ink)}
.kls a{color:var(--gold); text-underline-offset:3px}
.kls .kls-kicker{font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 1.2em}
.kls .kls-title{font-size:clamp(2.1rem,6vw,4rem); line-height:1.02; letter-spacing:.04em; margin:0 0 .35em}
.kls .kls-sub{font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-size:1.5rem; color:var(--gold); margin-bottom:1.2em}
.kls .kls-h{font-size:clamp(1.7rem,4vw,2.6rem); letter-spacing:.02em; margin:.1em 0 .5em}
.kls .kls-note{font-size:.9rem; color:var(--mute); border-left:2px solid var(--gold); padding-left:14px; margin:1.4em 0}
.kls .kls-title:focus,.kls .kls-h:focus,.kls .kls-done:focus{outline:none}

/* Intro */
.kls .kls-intro{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start}
.kls .kls-form,.kls .kls-coach{background:rgba(255,255,255,.05); border:1px solid var(--line); padding:clamp(20px,3vw,32px)}
.kls .kls-form h3{font-size:1.25rem; margin-bottom:1.1em; letter-spacing:.02em}
.kls .kls-field{margin-bottom:1.1em}
.kls label{display:block}
.kls .kls-field label{font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:.4em}
.kls input[type=text],.kls input[type=email],.kls textarea{
	width:100%; font:inherit; color:var(--ink); background:rgba(7,18,40,.55); border:1px solid var(--line); border-radius:0; padding:.8em .9em; min-height:48px; margin:0; box-shadow:none;
}
.kls textarea{resize:vertical; min-height:96px}
.kls input[type=text]:focus,.kls input[type=email]:focus,.kls textarea:focus{outline:2px solid var(--gold); outline-offset:2px; border-color:var(--gold)}
.kls input[aria-invalid=true]{border-color:var(--err)}
.kls .kls-hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.kls .kls-check{display:flex; gap:12px; align-items:flex-start; margin:1.2em 0 1em; font-size:.88rem; color:var(--mute)}
.kls .kls-check input{flex:none; width:22px; height:22px; margin:2px 0 0; accent-color:var(--gold)}
.kls .kls-check input:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.kls .kls-check label{text-transform:none; letter-spacing:0; font-size:.88rem; color:var(--mute); margin:0}
.kls .kls-err{color:var(--err); font-size:.88rem; margin:.4em 0 0}
.kls .kls-err--box{border:1px solid var(--err); padding:.7em .9em; margin:1em 0}

/* Buttons */
.kls .kls-btn{
	display:inline-block; font:inherit; font-family:"Sora","Inter",sans-serif; font-size:.95rem; letter-spacing:.06em; text-decoration:none; text-align:center; cursor:pointer;
	border:1px solid var(--gold); border-radius:0; padding:.95em 1.6em; min-height:48px; transition:background .15s,color .15s;
}
.kls .kls-btn--gold{background:var(--gold); color:var(--navy-d)}
.kls .kls-btn--gold:hover{background:#dcc5a4}
.kls .kls-btn--ghost{background:transparent; color:var(--gold)}
.kls .kls-btn--ghost:hover{background:rgba(204,177,140,.14)}
.kls .kls-btn--lg{padding:1.1em 2em; font-size:1.05rem}
.kls .kls-btn:focus-visible,.kls .kls-link:focus-visible,.kls .kls-pill input:focus-visible+span{outline:2px solid #fff; outline-offset:3px}
.kls .kls-btn[disabled]{opacity:.6; cursor:progress}
.kls .kls-form .kls-btn{width:100%}
.kls .kls-link{background:none; border:0; color:var(--gold); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:.5em 0}

/* Test */
.kls .kls-test{max-width:820px; margin:0 auto}
.kls .kls-progress{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:0; margin:0 0 2em}
.kls .kls-progress li{border-top:3px solid rgba(204,177,140,.25); padding-top:8px; font-size:.78rem; letter-spacing:.06em; color:var(--mute)}
.kls .kls-progress li.is-done{border-color:var(--gold)}
.kls .kls-progress li.is-now{border-color:var(--gold); color:var(--gold)}
.kls .kls-legend{list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px; padding:0; margin:0 0 1.6em; font-size:.8rem; color:var(--mute)}
.kls .kls-legend b{color:var(--gold); font-weight:600; margin-right:2px}
.kls .kls-q{border:0; border-top:1px solid var(--line); margin:0; padding:1.4em 0 1.2em; min-width:0}
.kls .kls-q legend{float:left; width:100%; padding:0; margin:0 0 .9em; font-size:1.12rem; line-height:1.45; color:var(--ink)}
.kls .kls-q legend+*{clear:both}
.kls .kls-scale{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; max-width:460px}
.kls .kls-pill{position:relative; cursor:pointer}
.kls .kls-pill input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.kls .kls-pill span{display:flex; align-items:center; justify-content:center; min-height:48px; border:1px solid var(--line); font-family:"Sora","Inter",sans-serif; font-size:1.05rem; color:var(--gold); background:rgba(255,255,255,.03); transition:background .12s,color .12s}
.kls .kls-pill:hover span{background:rgba(204,177,140,.18)}
.kls .kls-pill input:checked+span{background:var(--gold); color:var(--navy-d); border-color:var(--gold); font-weight:600}
.kls .kls-cap{min-height:1.6em; margin:.6em 0 0; font-size:.85rem; color:var(--mute)}
.kls .kls-q--missing{border-top-color:var(--err)}
.kls .kls-q--missing legend{color:var(--err)}
.kls .kls-nav{display:flex; justify-content:space-between; gap:12px; margin-top:1.4em}

/* Ergebnis */
.kls .kls-resultwrap{max-width:900px; margin:0 auto}
.kls .kls-compass{max-width:620px; margin:0 auto 1em; text-align:center}
.kls .kls-radar{display:block; width:100%; height:auto; overflow:visible}
.kls .kls-r{fill:none; stroke:var(--gold); stroke-opacity:.22}
.kls .kls-r--out{stroke-opacity:.5}
.kls .kls-ax{stroke:var(--gold); stroke-opacity:.4; fill:none}
.kls .kls-poly{fill:rgba(204,177,140,.28); stroke:var(--gold); stroke-width:2.2; stroke-linejoin:round}
.kls .kls-dot{fill:var(--gold); stroke:var(--navy-d); stroke-width:2}
.kls .kls-lab{fill:var(--ink); font-family:"Sora","Inter",sans-serif; font-size:15px}
.kls .kls-val{fill:var(--gold); font-size:14px}
.kls .kls-scalehint{font-size:.78rem; color:var(--mute); margin:0}
.kls .kls-summary{font-size:1.1rem; max-width:720px; margin:1.2em auto 1.8em; text-align:center}
.kls .kls-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.kls .kls-card{border:1px solid var(--line); background:rgba(255,255,255,.04); padding:22px 22px 18px}
.kls .kls-card h3{font-size:1.1rem; letter-spacing:.04em; color:var(--gold)}
.kls .kls-big{font-family:"Sora","Inter",sans-serif; font-size:2.6rem; line-height:1.1; margin:.2em 0 .3em}
.kls .kls-big small{font-size:1rem; color:var(--mute)}
.kls .kls-bar{height:6px; background:rgba(204,177,140,.2); margin-bottom:.8em}
.kls .kls-bar i{display:block; height:100%; background:var(--gold)}
.kls .kls-meta{font-size:.85rem; color:var(--mute); margin-bottom:.8em}
.kls .kls-meta--total{text-align:center; margin-top:1.4em}
.kls .kls-refl{font-size:.9rem; color:var(--ink); margin:0}
.kls .kls-refl span{display:block; color:var(--gold); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.2em}
.kls .kls-cta{margin-top:2.4em; padding:clamp(22px,4vw,40px); border:1px solid var(--gold); background:rgba(204,177,140,.08); text-align:center}
.kls .kls-cta h3{font-size:1.5rem; margin-bottom:.5em}
.kls .kls-cta p{max-width:560px; margin-left:auto; margin-right:auto}
.kls .kls-cta .kls-coach{text-align:left; margin-top:1.4em; background:transparent; border:0; padding:0}
.kls .kls-done h3{font-size:1.3rem}
.kls .kls-again{text-align:center; margin:1.4em 0 0}

@container kls (max-width:760px){
	.kls .kls-intro{grid-template-columns:minmax(0,1fr)}
	.kls .kls-cards{grid-template-columns:minmax(0,1fr)}
	.kls .kls-deco{right:-300px; top:-240px}
	.kls .kls-progress li span{display:none}
	.kls .kls-nav{flex-direction:column-reverse}
	.kls .kls-nav .kls-btn{width:100%}
	.kls .kls-lab{font-size:17px} .kls .kls-val{font-size:16px}
}
@media (max-width:760px){ .kls{font-size:16px} }
@media (prefers-reduced-motion:reduce){.kls *{transition:none!important}}