/* ============================================================
   KWK SYSTEM — Produkt-Seite /kunden-werben-kunden/
   Dark + Light Mode · WCAG AA konform
   ============================================================ */

/* ── Gemeinsame Tokens ─────────────────────────────────────── */
.kwk-sys-page {
	--kwk-bg:        var(--opt-blue-dark,    #07101f);
	--kwk-surface:   var(--opt-blue-mid,     #0d1e3a);
	--kwk-border:    rgba(201,168,76,.15);
	--kwk-gold:      #c9a84c;
	--kwk-text:      rgba(245,240,232,.85);
	--kwk-muted:     rgba(245,240,232,.55);
	background: var(--kwk-bg);
	color: var(--kwk-text);
}
[data-theme="light"] .kwk-sys-page {
	--kwk-bg:       #f7f4ee;
	--kwk-surface:  #ffffff;
	--kwk-border:   rgba(156,125,46,.2);
	--kwk-gold:     #9c7d2e;
	--kwk-text:     #16203a;
	--kwk-muted:    rgba(22,32,58,.6);
}

/* ── Typographie ───────────────────────────────────────────── */
.kwk-sys__badge {
	display: inline-block;
	font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
	font-weight: 700; color: var(--kwk-gold);
	padding: .3rem .8rem;
	border: 1px solid var(--kwk-border);
	background: rgba(201,168,76,.06);
	margin-bottom: 1.25rem;
}
[data-theme="light"] .kwk-sys__badge { background: rgba(156,125,46,.06); }

.kwk-sys__h1 {
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	font-weight: 300; line-height: 1.18;
	color: var(--kwk-text);
	margin-bottom: 1.25rem;
}
.kwk-sys__h1 em { font-style: normal; color: var(--kwk-gold); }

.kwk-sys__h2 {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 300; line-height: 1.25;
	color: var(--kwk-text);
	margin-bottom: 1rem;
}

.kwk-sys__lead {
	font-size: 1.05rem; line-height: 1.75;
	color: var(--kwk-muted); max-width: 54ch;
	margin-bottom: 2rem;
}

.kwk-sys__section-label {
	display: block;
	font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--kwk-gold); margin-bottom: .6rem; font-weight: 700;
}

.kwk-sys__note {
	font-size: .75rem; color: var(--kwk-muted);
	margin-top: 1rem; line-height: 1.6;
}

/* ── Buttons ───────────────────────────────────────────────── */
.kwk-sys__btn {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .85rem 1.75rem;
	font-size: .88rem; font-weight: 700; letter-spacing: .04em;
	text-decoration: none; cursor: pointer; border: none;
	transition: all .2s ease;
}
.kwk-sys__btn--primary {
	background: linear-gradient(135deg,#c9a84c,#e8c97a);
	color: #0a1428;
}
.kwk-sys__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,168,76,.35); }
.kwk-sys__btn--outline {
	background: transparent;
	border: 1px solid rgba(201,168,76,.4);
	color: rgba(245,240,232,.8);
}
.kwk-sys__btn--outline:hover { border-color: var(--kwk-gold); color: var(--kwk-gold); }
[data-theme="light"] .kwk-sys__btn--outline { border-color: rgba(156,125,46,.45); color: rgba(22,32,58,.8); }
[data-theme="light"] .kwk-sys__btn--outline:hover { color: var(--kwk-gold); border-color: var(--kwk-gold); }

/* ── HERO ──────────────────────────────────────────────────── */
.kwk-sys__hero {
	padding: 7rem 0 4.5rem;
	background: linear-gradient(165deg, var(--kwk-bg) 60%, rgba(201,168,76,.04));
	border-bottom: 1px solid var(--kwk-border);
}
.kwk-sys__hero-inner {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 3rem; align-items: center;
}
.kwk-sys__hero-actions {
	display: flex; gap: .85rem; flex-wrap: wrap;
	margin-bottom: .75rem;
}

/* Preview Card */
.kwk-sys__preview-card {
	background: var(--kwk-surface);
	border: 1px solid var(--kwk-border);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
[data-theme="light"] .kwk-sys__preview-card { box-shadow: 0 12px 40px rgba(0,0,0,.1); }
.kwk-sys__preview-header {
	display: flex; align-items: center; gap: .4rem;
	padding: .85rem 1rem;
	background: rgba(201,168,76,.06);
	border-bottom: 1px solid var(--kwk-border);
}
[data-theme="light"] .kwk-sys__preview-header { background: rgba(156,125,46,.06); }
.kwk-sys__preview-dot {
	width: 10px; height: 10px; border-radius: 50%; background: rgba(245,240,232,.2);
}
[data-theme="light"] .kwk-sys__preview-dot { background: rgba(22,32,58,.15); }
.kwk-sys__preview-dot--2 { background: rgba(201,168,76,.5); }
.kwk-sys__preview-dot--3 { background: rgba(34,197,94,.5); }
.kwk-sys__preview-title { font-size: .75rem; color: var(--kwk-muted); margin-left: .4rem; font-weight: 600; }
.kwk-sys__preview-stats {
	display: grid; grid-template-columns: 1fr 1fr 1fr;
	gap: 1px; background: var(--kwk-border);
}
.kwk-sys__preview-stat {
	background: var(--kwk-surface);
	padding: 1.25rem .85rem; text-align: center;
}
.kwk-sys__preview-num {
	display: block; font-size: 1.5rem; font-weight: 700;
	color: var(--kwk-text); line-height: 1.1;
}
.kwk-sys__preview-num--gold { color: var(--kwk-gold); }
.kwk-sys__preview-label { font-size: .67rem; color: var(--kwk-muted); margin-top: .3rem; display: block; }
.kwk-sys__preview-badge {
	text-align: center; padding: .85rem;
	font-size: .78rem; font-weight: 600;
	color: #22c55e;
	background: rgba(34,197,94,.06);
	border-top: 1px solid rgba(34,197,94,.15);
}

/* ── WIE ES FUNKTIONIERT ───────────────────────────────────── */
.kwk-sys__how {
	padding: 5rem 0;
	text-align: center;
}
.kwk-sys__steps {
	display: flex; align-items: flex-start;
	gap: 0; margin-top: 3rem;
	justify-content: center; flex-wrap: wrap;
}
.kwk-sys__step {
	flex: 1; min-width: 160px; max-width: 220px;
	text-align: center; padding: 1.5rem 1rem;
}
.kwk-sys__step-num {
	width: 48px; height: 48px; border-radius: 50%;
	background: linear-gradient(135deg,rgba(201,168,76,.2),rgba(201,168,76,.05));
	border: 1.5px solid rgba(201,168,76,.5);
	color: var(--kwk-gold); font-size: 1.1rem; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
	margin: 0 auto 1rem;
}
[data-theme="light"] .kwk-sys__step-num { background: rgba(156,125,46,.08); }
.kwk-sys__step-title { font-size: .95rem; font-weight: 700; color: var(--kwk-text); margin-bottom: .4rem; }
.kwk-sys__step-text { font-size: .82rem; color: var(--kwk-muted); line-height: 1.65; }
.kwk-sys__step-arrow {
	color: var(--kwk-gold); font-size: 1.5rem; opacity: .4;
	padding-top: 1.25rem; align-self: flex-start;
	flex-shrink: 0;
}

/* ── FEATURES ──────────────────────────────────────────────── */
.kwk-sys__features {
	padding: 5rem 0;
	background: var(--kwk-surface);
	border-top: 1px solid var(--kwk-border);
	border-bottom: 1px solid var(--kwk-border);
}
.kwk-sys__features-inner {
	display: grid; grid-template-columns: 1fr 1.4fr;
	gap: 4rem; align-items: start;
}
.kwk-sys__features-sub { color: var(--kwk-muted); line-height: 1.7; margin-top: .75rem; }
.kwk-sys__feature-list {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.kwk-sys__feature {
	display: flex; gap: .85rem; align-items: flex-start;
	padding: 1.1rem;
	background: rgba(201,168,76,.04);
	border: 1px solid var(--kwk-border);
}
[data-theme="light"] .kwk-sys__feature { background: rgba(156,125,46,.04); }
.kwk-sys__feature-icon { font-size: 1.35rem; flex-shrink: 0; }
.kwk-sys__feature-title {
	font-size: .88rem; font-weight: 700;
	color: var(--kwk-text); margin-bottom: .25rem;
}
.kwk-sys__feature p { font-size: .78rem; color: var(--kwk-muted); line-height: 1.6; margin: 0; }

/* ── FÜR WEN ───────────────────────────────────────────────── */
.kwk-sys__for { padding: 5rem 0; text-align: center; }
.kwk-sys__for-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
	margin-top: 3rem;
}
.kwk-sys__for-item {
	padding: 1.75rem 1.25rem;
	background: var(--kwk-surface);
	border: 1px solid var(--kwk-border);
	text-align: center;
	transition: border-color .2s, transform .2s;
}
.kwk-sys__for-item:hover { border-color: rgba(201,168,76,.4); transform: translateY(-3px); }
[data-theme="light"] .kwk-sys__for-item:hover { border-color: rgba(156,125,46,.4); }
.kwk-sys__for-icon { font-size: 2rem; display: block; margin-bottom: .75rem; }
.kwk-sys__for-title { font-size: .9rem; font-weight: 700; color: var(--kwk-text); margin-bottom: .4rem; }
.kwk-sys__for-text { font-size: .75rem; color: var(--kwk-muted); line-height: 1.6; }

/* ── CTA BAND ──────────────────────────────────────────────── */
.kwk-sys__cta-band {
	padding: 4rem 0;
	background: linear-gradient(135deg,rgba(201,168,76,.08),rgba(201,168,76,.03));
	border-top: 1px solid var(--kwk-border);
	border-bottom: 1px solid var(--kwk-border);
}
[data-theme="light"] .kwk-sys__cta-band { background: rgba(156,125,46,.06); }
.kwk-sys__cta-band-inner {
	display: flex; justify-content: space-between;
	align-items: center; gap: 2rem; flex-wrap: wrap;
}
.kwk-sys__cta-h2 { font-size: 1.6rem; font-weight: 300; color: var(--kwk-text); margin-bottom: .35rem; }
.kwk-sys__cta-sub { color: var(--kwk-muted); font-size: .88rem; }
.kwk-sys__cta-actions { display: flex; gap: .85rem; flex-wrap: wrap; flex-shrink: 0; }

/* ── FAQ ───────────────────────────────────────────────────── */
.kwk-sys__faq { padding: 5rem 0; max-width: 820px; }
.kwk-sys__faq-item {
	border-bottom: 1px solid var(--kwk-border);
	overflow: hidden;
}
.kwk-sys__faq-q {
	padding: 1.25rem 0; cursor: pointer; list-style: none;
	font-size: .95rem; font-weight: 600; color: var(--kwk-text);
	display: flex; justify-content: space-between; align-items: center;
}
.kwk-sys__faq-q::after { content: '+'; font-size: 1.3rem; color: var(--kwk-gold); flex-shrink: 0; transition: transform .2s; }
.kwk-sys__faq-item[open] .kwk-sys__faq-q::after { transform: rotate(45deg); }
.kwk-sys__faq-a {
	padding: 0 0 1.25rem; font-size: .88rem;
	color: var(--kwk-muted); line-height: 1.75; margin: 0;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.kwk-sys__for-grid { grid-template-columns: repeat(2,1fr); }
	.kwk-sys__features-inner { grid-template-columns: 1fr; }
	.kwk-sys__feature-list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.kwk-sys__hero-inner { grid-template-columns: 1fr; }
	.kwk-sys__hero { padding: 5rem 0 3rem; }
	.kwk-sys__steps { flex-direction: column; align-items: center; }
	.kwk-sys__step-arrow { transform: rotate(90deg); padding-top: 0; }
	.kwk-sys__cta-band-inner { flex-direction: column; text-align: center; }
	.kwk-sys__for-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
	.kwk-sys__for-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .kwk-sys__btn, .kwk-sys__for-item { transition: none; } }