/* KursPilot Member-Bereich – token-basiert, hell/dunkel über CSS-Variablen */
.kp-member {
	--kp-c1: #667eea;
	--kp-c2: #764ba2;
	--kp-accent: #22c55e;
	--kp-radius: 16px;
	--kp-bg: #f4f5f7;
	--kp-surface: #ffffff;
	--kp-surface2: #f8fafc;
	--kp-text: #1f2937;
	--kp-muted: #6b7280;
	--kp-border: #e5e7eb;
	max-width: 1180px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--kp-text);
}
.kp-member * { box-sizing: border-box; }

/* Login */
.kp-login-box { max-width: 420px; background: var(--kp-surface); color: var(--kp-text); padding: 32px; border-radius: var(--kp-radius); border: 1px solid var(--kp-border); box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.kp-login-box h2 { margin-top: 0; }
.kp-login-box label { display: block; color: var(--kp-muted); margin-bottom: 4px; }
.kp-login-box input[type=text], .kp-login-box input[type=password] { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--kp-border); background: var(--kp-surface2); color: var(--kp-text); margin-bottom: 14px; }
.kp-login-box .button, .kp-login-box input[type=submit] { background: linear-gradient(135deg, var(--kp-c1), var(--kp-c2)); border: 0; color: #fff; padding: 11px 22px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.kp-login-links a { color: var(--kp-c1); }

/* Topbar (Overview) */
.kp-topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 20px; }
.kp-logo { max-height: 40px; width: auto; display: block; }
.kp-logo-text { font-size: 20px; font-weight: 800; color: var(--kp-text); }
.kp-topbar-logout { color: var(--kp-muted); text-decoration: none; font-size: 14px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--kp-border); }
.kp-topbar-logout:hover { background: var(--kp-surface); }

/* Overview */
.kp-welcome h2 { font-size: 28px; margin: 0 0 6px; }
.kp-welcome p { color: var(--kp-muted); margin: 0 0 8px; }
.kp-course-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 20px; }
.kp-course-card { display: block; background: var(--kp-surface); border: 1px solid var(--kp-border); border-radius: var(--kp-radius); overflow: hidden; text-decoration: none; color: var(--kp-text); transition: transform .15s ease, box-shadow .15s ease; }
.kp-course-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }
.kp-card-thumb { height: 160px; background-size: cover; background-position: center; background-color: var(--kp-surface2); position: relative; }
.kp-card-badge { position: absolute; top: 10px; right: 10px; background: var(--kp-accent); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.kp-card-info { padding: 16px 18px; }
.kp-card-info h3 { margin: 0 0 12px; font-size: 17px; }
.kp-progress { background: var(--kp-surface2); border: 1px solid var(--kp-border); border-radius: 10px; height: 8px; overflow: hidden; }
.kp-progress-bar { height: 100%; background: var(--kp-accent); border-radius: 10px; transition: width .3s ease; }
.kp-progress-label { font-size: 12px; color: var(--kp-muted); display: block; margin-top: 6px; }
.kp-empty-state { background: var(--kp-surface); border: 1px solid var(--kp-border); color: var(--kp-muted); border-radius: var(--kp-radius); padding: 40px; text-align: center; }

/* Course view */
.kp-course-topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 18px; }
.kp-back { color: var(--kp-c1); text-decoration: none; font-weight: 600; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--kp-border); background: var(--kp-surface); }
.kp-course-topbar h2 { margin: 0; font-size: 18px; grid-column: 1 / -1; order: 3; }
.kp-course-progress { height: 10px; background: var(--kp-surface2); border: 1px solid var(--kp-border); border-radius: 999px; overflow: hidden; }
.kp-course-progress-bar { height: 100%; background: var(--kp-accent); border-radius: 999px; transition: width .3s ease; }
.kp-course-progress-label { font-weight: 700; color: var(--kp-text); font-size: 14px; }
.kp-course-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }

.kp-player-area { background: var(--kp-surface); border: 1px solid var(--kp-border); border-radius: var(--kp-radius); overflow: hidden; }
#kp-player-wrap { background: #000; aspect-ratio: 16 / 9; }
#kp-player-wrap .kp-plyr { width: 100%; height: 100%; }
#kp-player-wrap .kp-embed { width: 100%; height: 100%; }
#kp-player-wrap .kp-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.kp-player-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 320px; color: var(--kp-muted); }
#kp-lesson-detail { padding: 22px 24px; color: var(--kp-text); }
#kp-lesson-detail h3 { margin-top: 0; }
.kp-pdf-btn { display: inline-block; background: var(--kp-surface2); border: 1px solid var(--kp-border); color: var(--kp-text); padding: 9px 16px; border-radius: 10px; text-decoration: none; margin: 10px 0; }
.kp-complete-btn { display: block; margin-top: 16px; background: var(--kp-accent); color: #fff; border: 0; padding: 12px 20px; border-radius: 12px; font-weight: 700; cursor: pointer; transition: filter .15s; }
.kp-complete-btn:hover { filter: brightness(1.05); }
.kp-complete-btn[disabled] { opacity: .55; cursor: not-allowed; filter: none; }
.kp-complete-btn[data-done="1"] { background: #16a34a; }

/* Curriculum sidebar */
.kp-curriculum { background: var(--kp-surface); border: 1px solid var(--kp-border); border-radius: var(--kp-radius); padding: 16px; max-height: 640px; overflow-y: auto; }
.kp-curr-module { margin-bottom: 16px; }
.kp-curr-module-title { color: var(--kp-muted); font-weight: 700; padding: 8px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.kp-curriculum ul { list-style: none; margin: 0; padding: 0; }
.kp-curr-lesson { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; color: var(--kp-text); }
.kp-curr-lesson.unlocked { cursor: pointer; }
.kp-curr-lesson.unlocked:hover { background: var(--kp-surface2); }
.kp-curr-lesson.active { background: var(--kp-surface2); box-shadow: inset 3px 0 0 var(--kp-accent); }
.kp-curr-lesson.locked { opacity: .55; }
.kp-curr-lesson.done .kp-curr-icon { color: var(--kp-accent); }
.kp-curr-icon { width: 20px; text-align: center; }
.kp-curr-name { flex: 1; font-size: 14px; }
.kp-curr-days { font-size: 11px; color: #b45309; background: rgba(251,191,36,.18); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }

@media (max-width: 860px) {
	.kp-course-layout { grid-template-columns: 1fr; }
	.kp-curriculum { max-height: none; }
	.kp-course-topbar { grid-template-columns: 1fr; }
}

/* Danke-Seite */
.kp-thankyou { max-width: 560px; margin: 0 auto; background: var(--kp-surface); border: 1px solid var(--kp-border); color: var(--kp-text); border-radius: 18px; padding: 40px 36px; text-align: center; }
.kp-ty-check { width: 64px; height: 64px; line-height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--kp-accent); color: #fff; font-size: 32px; font-weight: 700; }
.kp-thankyou h2 { margin: 0 0 12px; font-size: 24px; }
.kp-ty-text { color: var(--kp-muted); line-height: 1.6; }
.kp-ty-courses { background: var(--kp-surface2); border: 1px solid var(--kp-border); border-radius: 12px; padding: 16px; margin: 20px 0; text-align: left; }
.kp-ty-label { color: var(--kp-muted); font-size: 13px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .03em; }
.kp-ty-course { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.kp-ty-thumb { width: 48px; height: 32px; border-radius: 6px; background-size: cover; background-position: center; background-color: var(--kp-surface); flex-shrink: 0; }
.kp-ty-course-title { font-weight: 600; }
.kp-ty-btn { display: inline-block; margin-top: 8px; background: linear-gradient(135deg, var(--kp-c1), var(--kp-c2)); color: #fff; text-decoration: none; padding: 13px 28px; border-radius: 12px; font-weight: 700; }
.kp-ty-hint { color: var(--kp-muted); font-size: 13px; margin-top: 18px; line-height: 1.5; }

/* Downloads in der Lektion */
.kp-downloads { margin: 16px 0; }
.kp-downloads-label { color: var(--kp-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.kp-download { display: inline-block; background: var(--kp-surface2); border: 1px solid var(--kp-border); color: var(--kp-text); text-decoration: none; padding: 8px 14px; border-radius: 10px; margin: 0 8px 8px 0; }
.kp-download:hover { background: var(--kp-bg); }

/* Quiz */
.kp-quiz { background: var(--kp-surface2); border: 1px solid var(--kp-border); border-radius: 12px; padding: 18px 20px; margin: 18px 0; }
.kp-quiz h4 { margin: 0 0 12px; }
.kp-quiz-passed { color: var(--kp-accent); font-weight: 600; margin: -4px 0 12px; }
.kp-quiz-q { margin-bottom: 14px; }
.kp-quiz-q p { font-weight: 600; margin: 0 0 8px; }
.kp-quiz-opt { display: block; color: var(--kp-text); padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.kp-quiz-opt:hover { background: var(--kp-surface); border-color: var(--kp-border); }
.kp-quiz-submit { background: var(--kp-accent); color: #fff; border: 0; padding: 11px 20px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.kp-quiz-submit:disabled { opacity: .6; cursor: wait; }
.kp-quiz-result { margin-top: 12px; font-weight: 600; }
.kp-quiz-result.kp-quiz-ok { color: #16a34a; }
.kp-quiz-result.kp-quiz-fail { color: #dc2626; }

/* Zertifikat-Button */
.kp-cert-slot { margin-bottom: 16px; }
.kp-cert-btn { display: block; text-align: center; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; text-decoration: none; padding: 12px 16px; border-radius: 12px; font-weight: 700; }

/* Member-Upload */
.kp-upload { background: var(--kp-surface2); border: 1px solid var(--kp-border); border-radius: 12px; padding: 16px 18px; margin: 18px 0; }
.kp-upload-label { font-weight: 600; margin: 0 0 10px; }
.kp-upload-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.kp-upload-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--kp-surface); border: 1px solid var(--kp-border); border-radius: 8px; padding: 8px 12px; }
.kp-upload-item a { color: var(--kp-text); text-decoration: none; }
.kp-upload-del { background: none; border: 0; color: var(--kp-muted); cursor: pointer; font-size: 14px; }
.kp-upload-del:hover { color: #dc2626; }
.kp-upload-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--kp-c1), var(--kp-c2)); color: #fff; padding: 9px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.kp-upload-status { margin-left: 10px; font-size: 13px; }
.kp-upload-status.ok { color: #16a34a; }
.kp-upload-status.err { color: #dc2626; }

/* Dark-Theme-Feinschliff */
.kp-theme-dark .kp-card-badge,
.kp-theme-dark .kp-complete-btn,
.kp-theme-dark .kp-quiz-submit { color: #06240f; }

/* ── Willkommens-Seite ─────────────────────────────────────────── */
.kp-welcome-page { max-width: 560px; margin: 0 auto; }
.kp-welcome-hero { background: var(--kp-surface); border: 1px solid var(--kp-border); border-radius: var(--kp-radius); padding: 40px 36px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.kp-welcome-logo { max-height: 64px; width: auto; margin: 0 auto 18px; display: block; }
.kp-welcome-brand { display: block; font-size: 22px; font-weight: 800; margin-bottom: 14px; color: var(--kp-text); }
.kp-welcome-hero h1 { margin: 0 0 12px; font-size: 28px; color: var(--kp-text); }
.kp-welcome-text { color: var(--kp-muted); line-height: 1.6; margin: 0 0 22px; }
.kp-welcome-text p { margin: 0 0 10px; }
.kp-welcome-btn { display: inline-block; background: linear-gradient(135deg, var(--kp-c1), var(--kp-c2)); color: #fff; text-decoration: none; padding: 13px 28px; border-radius: 12px; font-weight: 700; }
.kp-welcome-login { max-width: 360px; margin: 0 auto; text-align: left; }
.kp-welcome-login label { display: block; color: var(--kp-muted); margin-bottom: 4px; }
.kp-welcome-login input[type=text], .kp-welcome-login input[type=password] { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--kp-border); background: var(--kp-surface2); color: var(--kp-text); margin-bottom: 14px; }
.kp-welcome-login .button, .kp-welcome-login input[type=submit] { background: linear-gradient(135deg, var(--kp-c1), var(--kp-c2)); border: 0; color: #fff; padding: 11px 22px; border-radius: 10px; cursor: pointer; font-weight: 600; width: 100%; }
.kp-welcome-login .kp-login-links { text-align: center; margin-top: 8px; }
.kp-welcome-login .kp-login-links a { color: var(--kp-c1); }

/* ── Footer ────────────────────────────────────────────────────── */
.kp-footer { margin-top: 36px; padding: 22px 4px 8px; border-top: 1px solid var(--kp-border); text-align: center; color: var(--kp-muted); font-size: 14px; }
.kp-footer-menu, .kp-footer-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 0; margin: 0 0 12px; }
.kp-footer-links { display: flex; }
.kp-footer-menu a, .kp-footer-links a { color: var(--kp-muted); text-decoration: none; }
.kp-footer-menu a:hover, .kp-footer-links a:hover { color: var(--kp-c1); text-decoration: underline; }
.kp-footer-text p { margin: 4px 0; }

/* ── Vorschau-Banner ───────────────────────────────────────────── */
.kp-preview-banner { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }

/* ── Danke-Seite Logo ──────────────────────────────────────────── */
.kp-ty-logo { max-height: 56px; width: auto; margin: 0 auto 18px; display: block; }

/* ── Admin-Hinweis in der Übersicht ────────────────────────────── */
.kp-admin-note { background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; border-radius: 10px; padding: 10px 14px; margin: 0 0 18px; font-size: 14px; }
.kp-card-badge-draft { background: #6b7280; }

/* ── Angebot / CTA (Nicht-Käufer) ──────────────────────────────── */
.kp-offer-cta { background: linear-gradient(135deg, var(--kp-c1), var(--kp-c2)); color: #fff; border-radius: var(--kp-radius); padding: 40px 32px; text-align: center; box-shadow: 0 16px 36px rgba(0,0,0,.12); }
.kp-offer-cta h3 { margin: 0 0 12px; font-size: 24px; color: #fff; }
.kp-offer-cta p { margin: 0 auto 22px; max-width: 520px; line-height: 1.6; opacity: .95; }
.kp-offer-btn { display: inline-block; background: #fff; color: #1f2937; text-decoration: none; padding: 14px 30px; border-radius: 12px; font-weight: 800; font-size: 16px; }
.kp-offer-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }