/* Selektor-Präfix .kpw:is(#kpw-scope, .kpw) hebt die Spezifität auf ID-Niveau, damit Theme-/Builder-Stile nicht durchschlagen. */
.kpw:is(#kpw-scope, .kpw) {
	--kpw-navy: #283a6b;
	--kpw-blue: #5bbde4;
	--kpw-blue-soft: #e3f2fa;
	--kpw-yellow: #f0c05a;
	--kpw-purple: #4c4a8e;
	--kpw-text: #283a6b;
	--kpw-radius: 14px;
	color: var(--kpw-text) !important;
	line-height: 1.45;
	font-size: max(14px, 1em);
	scroll-margin-top: 100px;
}
.kpw:is(#kpw-scope, .kpw) *, .kpw:is(#kpw-scope, .kpw) *::before, .kpw:is(#kpw-scope, .kpw) *::after { box-sizing: border-box; }
/* Schutz gegen Theme-/Builder-Stile (Farben, Schrift von h2/h3/h4, p, li, a) */
.kpw:is(#kpw-scope, .kpw) :where(h2, h3, h4, p, li, span, strong, small, a, button) { color: inherit !important; font-family: inherit; letter-spacing: normal; text-shadow: none; }
.kpw:is(#kpw-scope, .kpw) :where(h2, h3, h4) { text-transform: none; }
.kpw:is(#kpw-scope, .kpw) :where(h2, h3, h4, p, li, span, strong, small, a, button, summary) { font-size: max(14px, 1em); }
.kpw:is(#kpw-scope, .kpw) :where(ol, ul, li) { list-style: none !important; }
.kpw:is(#kpw-scope, .kpw) :where(li)::marker { content: none; }
.kpw:is(#kpw-scope, .kpw) :where(li)::before { content: none; }
.kpw:is(#kpw-scope, .kpw) :where(a):hover { color: inherit !important; }

/* Verlauf */
.kpw:is(#kpw-scope, .kpw) .kpw-trail { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kpw:is(#kpw-scope, .kpw) .kpw-trail[hidden] { display: none; }
.kpw:is(#kpw-scope, .kpw) .kpw-trail-item { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; border: 1px solid #d6e3ee !important; background: #fff !important; border-radius: 10px !important; padding: 6px 10px !important; cursor: pointer !important; font: inherit !important; color: var(--kpw-text) !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1.3 !important; height: auto !important; width: auto !important; box-shadow: none !important; background-image: none !important; text-shadow: none !important; margin: 0 !important; text-align: left !important; max-width: 260px !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-trail-item:hover { border-color: var(--kpw-blue) !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-trail-q { font-size: max(14px, .75em); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kpw:is(#kpw-scope, .kpw) .kpw-trail-a { font-size: max(14px, .85em); font-weight: 700; }

/* Karte */
.kpw:is(#kpw-scope, .kpw) .kpw-card { background: #fff !important; border: 2px solid var(--kpw-blue); border-radius: var(--kpw-radius); padding: clamp(20px, 4vw, 40px); box-shadow: none; animation: kpw-in .25s ease-out; }
@keyframes kpw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kpw:is(#kpw-scope, .kpw) .kpw-card { animation: none; } }

.kpw:is(#kpw-scope, .kpw) .kpw-q { margin: 0; font-size: clamp(max(14px, 1.35rem), 3vw, 1.9rem); font-style: italic; font-weight: 800; color: var(--kpw-navy) !important; line-height: 1.2; outline: none; }
.kpw:is(#kpw-scope, .kpw) .kpw-text { margin: .4rem 0 0; opacity: .85; }
.kpw:is(#kpw-scope, .kpw) .kpw-note { position: relative; margin: 1.1rem 0 0; padding: 12px 16px 12px 44px; background: var(--kpw-purple) !important; color: #fff !important; border-radius: 16px; font-size: max(14px, .95em); }
.kpw:is(#kpw-scope, .kpw) .kpw-note::before { content: "!"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #fff !important; color: var(--kpw-purple) !important; font-weight: 800; font-size: 14px; display: grid; place-items: center; }

/* Antworten */
.kpw:is(#kpw-scope, .kpw) .kpw-answers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5rem; }
.kpw:is(#kpw-scope, .kpw) .kpw-btn { font: inherit !important; font-weight: 700 !important; font-size: max(14px, 1rem) !important; letter-spacing: .02em !important; border: 2px solid var(--kpw-navy) !important; background: #fff !important; color: var(--kpw-navy) !important; padding: 12px 26px !important; border-radius: 10px !important; cursor: pointer !important; min-height: 48px !important; text-transform: none !important; line-height: 1.3 !important; height: auto !important; width: auto !important; box-shadow: none !important; background-image: none !important; text-shadow: none !important; margin: 0 !important; transition: transform .12s, background .12s, color .12s !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-btn:hover { transform: translateY(-1px) !important; background: var(--kpw-blue-soft) !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-btn.is-primary { background: var(--kpw-blue) !important; border-color: var(--kpw-blue) !important; color: #fff !important; min-width: 120px !important; text-transform: uppercase !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-btn.is-secondary { background: var(--kpw-navy) !important; color: #fff !important; min-width: 120px !important; text-transform: uppercase !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-btn.is-primary:hover, .kpw:is(#kpw-scope, .kpw) .kpw-btn.is-secondary:hover { filter: brightness(.9) !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-btn:disabled { opacity: .4 !important; cursor: not-allowed !important; transform: none !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-btn:focus-visible, .kpw:is(#kpw-scope, .kpw) .kpw-link:focus-visible, .kpw:is(#kpw-scope, .kpw) .kpw-res:focus-visible, .kpw:is(#kpw-scope, .kpw) .kpw-trail-item:focus-visible { outline: 3px solid var(--kpw-yellow) !important; outline-offset: 2px !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-answers.is-many .kpw-btn { flex: 1 1 180px !important; }

/* Ergebnisse */
.kpw:is(#kpw-scope, .kpw) .kpw-sections { display: grid; gap: 10px; margin-top: 1.5rem; }
.kpw:is(#kpw-scope, .kpw) .kpw-section { background: var(--kpw-blue-soft) !important; border-radius: 12px; padding: 0 !important; margin: 0 !important; border: 0 !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-section-head { display: flex !important; align-items: center; gap: 12px; padding: 16px 18px !important; margin: 0 !important; cursor: pointer; list-style: none !important; border-radius: 12px; background: none !important; color: var(--kpw-navy) !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-section-head::-webkit-details-marker { display: none; }
.kpw:is(#kpw-scope, .kpw) .kpw-section-head::marker { content: none; }
.kpw:is(#kpw-scope, .kpw) .kpw-section-head::before, .kpw:is(#kpw-scope, .kpw) .kpw-section-head::after { content: none !important; display: none !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-section-head, .kpw:is(#kpw-scope, .kpw) .kpw-section-head:focus, .kpw:is(#kpw-scope, .kpw) .kpw-section-head:active, .kpw:is(#kpw-scope, .kpw) .kpw-section:focus, .kpw:is(#kpw-scope, .kpw) .kpw-section:focus-within { outline: none !important; border: 0 !important; box-shadow: none !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-section-head:focus-visible { outline: 3px solid var(--kpw-yellow) !important; outline-offset: -3px !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-section-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kpw:is(#kpw-scope, .kpw) .kpw-section-title { margin: 0 !important; padding: 0 !important; font-size: max(14px, 1.1rem) !important; font-weight: 800 !important; line-height: 1.25 !important; color: var(--kpw-navy) !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-section-sub { margin: 2px 0 0; font-size: max(14px, .85em); font-style: italic; opacity: .8; }
.kpw:is(#kpw-scope, .kpw) .kpw-section-count { flex: 0 0 auto; font-size: max(14px, .8em); font-weight: 600; opacity: .7; white-space: nowrap; }
.kpw:is(#kpw-scope, .kpw) .kpw-chevron { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.kpw:is(#kpw-scope, .kpw) .kpw-section[open] .kpw-chevron { transform: rotate(-135deg) translate(-2px, -2px); }
.kpw:is(#kpw-scope, .kpw) .kpw-section > .kpw-groups { padding: 0 18px 18px; margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .kpw:is(#kpw-scope, .kpw) .kpw-chevron { transition: none; } }
.kpw:is(#kpw-scope, .kpw) .kpw-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px 18px; margin-top: 12px; }
.kpw:is(#kpw-scope, .kpw) .kpw-group-title { margin: 0 0 6px; font-size: max(14px, .78rem); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--c) !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kpw:is(#kpw-scope, .kpw) .kpw-list li { margin: 0; }
.kpw:is(#kpw-scope, .kpw) .kpw-res { display: flex !important; gap: 10px !important; align-items: flex-start !important; padding: 8px 10px !important; background: #fff !important; border-radius: 10px !important; color: var(--kpw-text) !important; text-decoration: none !important; border: 1px solid transparent !important; box-shadow: none !important; }
.kpw:is(#kpw-scope, .kpw) a.kpw-res:hover { border-color: var(--c) !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-num { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--c) !important; color: #fff !important; font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.kpw:is(#kpw-scope, .kpw) .kpw-res-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kpw:is(#kpw-scope, .kpw) .kpw-group, .kpw:is(#kpw-scope, .kpw) .kpw-list, .kpw:is(#kpw-scope, .kpw) .kpw-list li { min-width: 0; }
.kpw:is(#kpw-scope, .kpw) .kpw-res-name { font-weight: 700; font-size: max(14px, .95em); }
.kpw:is(#kpw-scope, .kpw) .kpw-res-body, .kpw:is(#kpw-scope, .kpw) .kpw-q, .kpw:is(#kpw-scope, .kpw) .kpw-section-title, .kpw:is(#kpw-scope, .kpw) .kpw-trail-a { overflow-wrap: break-word; hyphens: auto; }
.kpw:is(#kpw-scope, .kpw) .kpw-res-sub { font-size: max(14px, .8em); opacity: .75; }
.kpw:is(#kpw-scope, .kpw) .kpw-res-go { color: var(--c) !important; font-weight: 700; }

/* Wichtig-Box */
.kpw:is(#kpw-scope, .kpw) .kpw-important { margin-top: 1.5rem; padding: 18px 22px; background: var(--kpw-purple) !important; color: #fff !important; border-radius: 22px; }
.kpw:is(#kpw-scope, .kpw) .kpw-important-title { display: block; font-size: max(14px, 1.3rem); text-transform: uppercase; margin-bottom: 4px; }
.kpw:is(#kpw-scope, .kpw) .kpw-important p { margin: 0; }

/* Navigation */
.kpw:is(#kpw-scope, .kpw) .kpw-nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e6eef4; }
.kpw:is(#kpw-scope, .kpw) .kpw-nav:empty { display: none; }
.kpw:is(#kpw-scope, .kpw) .kpw-link { background: none !important; border: 0 !important; padding: 4px 0 !important; font: inherit !important; font-weight: 600 !important; color: var(--kpw-navy) !important; cursor: pointer !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1.3 !important; height: auto !important; width: auto !important; box-shadow: none !important; background-image: none !important; text-shadow: none !important; margin: 0 !important; }
.kpw:is(#kpw-scope, .kpw) .kpw-link:hover { color: var(--kpw-blue) !important; }

@media (max-width: 560px) {
	.kpw:is(#kpw-scope, .kpw) .kpw-btn.is-primary, .kpw:is(#kpw-scope, .kpw) .kpw-btn.is-secondary { flex: 1 1 0 !important; }
	.kpw:is(#kpw-scope, .kpw) .kpw-section-head { padding: 14px !important; }
	.kpw:is(#kpw-scope, .kpw) .kpw-section > .kpw-groups { padding: 0 14px 14px; }
	.kpw:is(#kpw-scope, .kpw) .kpw-section-count { display: none; }
}
.kpw:is(#kpw-scope, .kpw) .kpw-section[open] > .kpw-section-head { border-radius: 12px 12px 0 0; }