/* MemberJet Pro – Premium-Kursdesigns
   Muster exakt wie im Core (templates.css): CSS-Variablen + Schrift auf
   .mjet-page[data-mjet-template="…"] überschreiben, dazu wenige gezielte
   Zusatzregeln. Lädt NACH templates.css (Abhängigkeit memberjet-templates).
   Die gemeinsame Basis (Typografie, Gutenberg-Video/Bild/Audio, Embeds)
   erbt aus den .mjet-page-Regeln des Core. */

/* =========================================================
   AURORA – dunkel & elegant (tiefes Nachtblau, Gold-Akzent)
   ========================================================= */
.mjet-page[data-mjet-template="aurora"] {
	--mjet-accent: #d4af5a;
	--mjet-accent-dark: #b8933e;
	--mjet-ok: #58c48f;
	--mjet-border: #2b3757;
	--mjet-muted: #97a3c4;
	--mjet-radius: 10px;
	--mjet-ink: #e9edf8;
	--mjet-surface: #1a2440;
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
	background: #101830;
	color: var(--mjet-ink);
	padding: 32px clamp(16px, 4vw, 48px);
	border-radius: 16px;
}
.mjet-page[data-mjet-template="aurora"] h1,
.mjet-page[data-mjet-template="aurora"] h2,
.mjet-page[data-mjet-template="aurora"] h3,
.mjet-page[data-mjet-template="aurora"] h4 {
	color: var(--mjet-ink);
}
.mjet-page[data-mjet-template="aurora"] a { color: var(--mjet-accent); }
.mjet-page[data-mjet-template="aurora"] .mjet-module { color: var(--mjet-accent); }
.mjet-page[data-mjet-template="aurora"] .mjet-btn {
	color: #101830 !important;
	font-weight: 700;
}
.mjet-page[data-mjet-template="aurora"] .mjet-card,
.mjet-page[data-mjet-template="aurora"] .mjet-tutor__msg--tutor {
	background: var(--mjet-surface);
}
.mjet-page[data-mjet-template="aurora"] .mjet-locked {
	background: var(--mjet-surface);
}
.mjet-page[data-mjet-template="aurora"] .mjet-complete {
	background: var(--mjet-surface);
}
.mjet-page[data-mjet-template="aurora"] .mjet-complete:hover {
	background: #223055;
}
.mjet-page[data-mjet-template="aurora"] .mjet-lesson__drip,
.mjet-page[data-mjet-template="aurora"] .mjet-badge {
	background: #223055;
	color: var(--mjet-ink);
}
.mjet-page[data-mjet-template="aurora"] .mjet-badge--off {
	background: #3d2430;
	color: #f1b8c4;
}
.mjet-page[data-mjet-template="aurora"] .mjet-quiz__q.is-correct { background: rgba(88, 196, 143, 0.12); }
.mjet-page[data-mjet-template="aurora"] .mjet-quiz__q.is-wrong { background: rgba(220, 38, 38, 0.16); }
.mjet-page[data-mjet-template="aurora"] .mjet-tutor__msg--user { background: #2a3a66; }
.mjet-page[data-mjet-template="aurora"] .mjet-tutor__input,
.mjet-page[data-mjet-template="aurora"] .mjet-discussion__input {
	background: var(--mjet-surface);
	color: var(--mjet-ink);
}
/* Multimedia: Bilder/Videos bekommen auf der dunklen Bühne einen feinen Rahmen. */
.mjet-page[data-mjet-template="aurora"] .mjet-lesson-view__content img,
.mjet-page[data-mjet-template="aurora"] .mjet-lesson-view__content video,
.mjet-page[data-mjet-template="aurora"] .mjet-lesson-view__content iframe {
	border: 1px solid var(--mjet-border);
	box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}
.mjet-page[data-mjet-template="aurora"] .mjet-lesson-view__content audio {
	border-radius: 999px;
	background: var(--mjet-surface);
}

/* =========================================================
   BOUTIQUE – luxuriös (Serifen, Creme, Bordeaux)
   ========================================================= */
.mjet-page[data-mjet-template="boutique"] {
	--mjet-accent: #7a1f2e;
	--mjet-accent-dark: #5c1622;
	--mjet-border: #e7dcc4;
	--mjet-muted: #8c8066;
	--mjet-radius: 4px;
	--mjet-ink: #29211a;
	--mjet-surface: #f8f2e4;
	font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	background: #fdf9ef;
	color: var(--mjet-ink);
	padding: 28px clamp(16px, 4vw, 44px);
	border: 1px solid var(--mjet-border);
}
.mjet-page[data-mjet-template="boutique"] .mjet-lesson-view,
.mjet-page[data-mjet-template="boutique"] .mjet-course { max-width: 700px; }
.mjet-page[data-mjet-template="boutique"] .mjet-btn {
	border-radius: 0;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 13px;
	padding: 12px 22px;
}
.mjet-page[data-mjet-template="boutique"] .mjet-module {
	color: var(--mjet-accent);
	letter-spacing: 0.12em;
}
.mjet-page[data-mjet-template="boutique"] .mjet-card { background: #fffdf7; }
.mjet-page[data-mjet-template="boutique"] .mjet-quiz { background: var(--mjet-surface); }
/* Multimedia: gerahmte Galerie-Anmutung, kursive Bildunterschriften. */
.mjet-page[data-mjet-template="boutique"] .mjet-lesson-view__content img,
.mjet-page[data-mjet-template="boutique"] .mjet-lesson-view__content video {
	border-radius: 2px;
	border: 1px solid var(--mjet-border);
	padding: 6px;
	background: #fffdf7;
}
.mjet-page[data-mjet-template="boutique"] .mjet-lesson-view__content figcaption {
	font-style: italic;
}
.mjet-page[data-mjet-template="boutique"] .mjet-lesson-view__content blockquote {
	border-left-width: 1px;
	padding-left: 28px;
}

/* =========================================================
   CAMPUS – klar & akademisch (kühles Grau, sattes Grün)
   ========================================================= */
.mjet-page[data-mjet-template="campus"] {
	--mjet-accent: #17694b;
	--mjet-accent-dark: #104f38;
	--mjet-border: #d9e0e6;
	--mjet-muted: #5c6873;
	--mjet-radius: 8px;
	--mjet-ink: #182028;
	--mjet-surface: #f1f5f7;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mjet-page[data-mjet-template="campus"] .mjet-lesson-view__content h2 {
	padding-bottom: 8px;
	border-bottom: 2px solid var(--mjet-border);
	letter-spacing: -0.01em;
}
.mjet-page[data-mjet-template="campus"] .mjet-module {
	color: var(--mjet-accent);
	font-weight: 600;
}
.mjet-page[data-mjet-template="campus"] .mjet-lessons { background: #ffffff; }
.mjet-page[data-mjet-template="campus"] .mjet-quiz { background: var(--mjet-surface); }
.mjet-page[data-mjet-template="campus"] .mjet-btn { border-radius: 6px; }
/* Multimedia: ruhiger Schattenwurf statt Rahmen. */
.mjet-page[data-mjet-template="campus"] .mjet-lesson-view__content img,
.mjet-page[data-mjet-template="campus"] .mjet-lesson-view__content video,
.mjet-page[data-mjet-template="campus"] .mjet-lesson-view__content iframe {
	box-shadow: 0 10px 26px -14px rgba(24, 32, 40, 0.35);
}

/* =========================================================
   Responsiv (Muster wie Core: eine gezielte Mobile-Stufe)
   ========================================================= */
@media (max-width: 600px) {
	.mjet-page[data-mjet-template="aurora"],
	.mjet-page[data-mjet-template="boutique"] {
		padding: 18px 14px;
		border-radius: 10px;
	}
	.mjet-page[data-mjet-template="boutique"] .mjet-btn {
		letter-spacing: 0.04em;
	}
}