/* Tutor LMS brand adaptation. Core LMS behaviour and templates stay intact. */

/*
 * Map Tutor's default blue/grey palette onto the BIO ZAHN tokens.
 * Declared on body so it wins over Tutor's inline :root variables.
 */
body {
	--tutor-color-primary: var(--bz-forest);
	--tutor-color-primary-rgb: var(--bz-forest-rgb);
	--tutor-color-primary-hover: var(--bz-deep);
	--tutor-color-warning: var(--bz-gold);
	--tutor-color-warning-rgb: var(--bz-gold-rgb);
	--tutor-color-gray-10: var(--bz-sand);
	--tutor-color-gray: var(--bz-card-border);
	--tutor-border-color: var(--bz-card-border);
	--tutor-body-color: var(--bz-ink);
	--tutor-color-muted: var(--bz-muted-ink);
	--tutor-color-hints: var(--bz-muted-ink);
	--tutor-color-subdued: var(--bz-muted-ink);
	--tutor-color-secondary: var(--bz-ink);
	--tutor-color-success: var(--bz-success);
	--tutor-color-success-rgb: var(--bz-success-rgb);
}

/* Tutor hard-codes these utility colours instead of using its variables; several are below 4.5:1 on ivory and sand. */
body .tutor-color-muted,
body .tutor-course-topic-summary {
	color: var(--bz-muted-ink);
}

body .tutor-color-secondary {
	color: var(--bz-ink);
}

body .tutor-color-success {
	color: var(--bz-success);
}

/* Rating stars use muted gold instead of Tutor's bright orange (#ed9700). */
body .tutor-ratings-stars,
body .tutor-star-rating-group,
body .tutor-ratings-stars [class*="tutor-icon-star"],
body .tutor-color-warning,
body .tutor-password-strength-hint .text.medium {
	color: var(--bz-gold);
}

body .tutor-bg-warning,
body .tutor-ratings-progress-bar .tutor-progress-value,
body .tutor-password-strength-hint .indicator span.medium::before {
	background-color: var(--bz-gold);
}

body .tutor-wrap,
body .tutor-course-single-content-wrapper,
body .tutor-dashboard,
body .tutor-dashboard-content,
body .tutor-course-details-page {
	color: var(--bz-ink);
	font-family: var(--bz-font-ui);
}

/* Distinguish lesson completion clearly from secondary Tutor controls. */
body .tutor-topbar-complete-btn .tutor-topbar-mark-btn {
	border-color: var(--bz-forest) !important;
	background: var(--bz-forest) !important;
	color: var(--bz-ivory) !important;
}

body .tutor-topbar-complete-btn .tutor-topbar-mark-btn:hover,
body .tutor-topbar-complete-btn .tutor-topbar-mark-btn:focus-visible {
	border-color: var(--bz-deep) !important;
	background: var(--bz-deep) !important;
	color: var(--bz-ivory) !important;
}

body .tutor-course-single-sidebar-title,
body .tutor-course-single-sidebar-wrapper,
body .tutor-course-single-content-wrapper,
body .tutor-course-single-sidebar-wrapper a {
	color: var(--bz-ink);
}

body .tutor-course-topic-single-header {
	background-color: var(--bz-forest) !important;
	color: var(--bz-ivory) !important;
}

body .tutor-course-topic-single-header .tutor-course-topic-single-header-title,
body .tutor-course-topic-single-header .tutor-iconic-btn {
	color: var(--bz-ivory) !important;
}

body .tutor-course-topic-title,
body .tutor-course-topic-item.is-active .tutor-course-topic-item-title,
body .tutor-nav-link.is-active {
	color: var(--bz-forest) !important;
}

body .tutor-nav-link.is-active {
	border-color: var(--bz-forest) !important;
}

body .tutor-wrap .tutor-color-primary,
body .tutor-wrap .tutor-color-primary-60,
body .tutor-course-topic-item.is-active .tutor-icon,
body .tutor-download-certificate .tutor-iconic-btn-outline {
	color: var(--bz-forest) !important;
}

body .tutor-download-certificate .tutor-iconic-btn-outline {
	border-color: var(--bz-forest) !important;
}

body .tutor-download-certificate .tutor-iconic-btn-outline:hover,
body .tutor-download-certificate .tutor-iconic-btn-outline:focus-visible {
	background-color: var(--bz-forest) !important;
	color: var(--bz-ivory) !important;
}

.bz-preview-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 1rem auto;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--bz-forest);
	background: var(--bz-card-background);
	color: var(--bz-ink);
	font: 400 0.9rem/1.5 var(--bz-font-ui);
}

.bz-preview-notice strong {
	color: var(--bz-forest);
}

.bz-preview-notice a {
	color: var(--bz-accent-dark);
	font-weight: 700;
}

.bz-member-track {
	display: grid;
	gap: 0.4rem;
	margin: 0 0 1rem;
	color: var(--bz-ink);
	font-family: var(--bz-font-ui);
}

.bz-member-track select {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--bz-card-border);
	border-radius: var(--bz-radius-small);
	background-color: var(--bz-card-background);
	color: var(--bz-ink);
	font: inherit;
}

.bz-member-track select:focus-visible {
	outline: 2px solid var(--bz-gold);
	outline-offset: 2px;
}

.bz-member-track small,
.bz-verification small {
	color: var(--bz-muted-ink);
	font-size: 0.8rem;
}

/* Dentist proof upload; site.js shows it only when "Zahnärztin / Zahnarzt" is chosen. */
.bz-verification {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.4rem;
	margin: 0 0 1rem;
	padding: 1rem;
	border: 1px dashed rgba(var(--bz-gold-rgb), .7);
	border-radius: var(--bz-radius-small);
	background: rgba(var(--bz-gold-rgb), .06);
	color: var(--bz-ink);
	font-family: var(--bz-font-ui);
}

.bz-verification[hidden] {
	display: none;
}

.bz-verification input[type="file"] {
	width: 100%;
	max-width: 100%;
	font: inherit;
}

body .tutor-course-details-title,
body .tutor-course-title,
body .tutor-dashboard-content h1,
body .tutor-dashboard-content h2,
body .tutor-course-content h2 {
	color: var(--bz-forest);
	font-family: var(--bz-font-editorial);
	font-weight: 500;
}

body .tutor-course-card,
body .tutor-card,
body .tutor-course-content-list,
body .tutor-course-content-inner {
	border-color: var(--bz-card-border);
	background-color: var(--bz-card-background);
}

/* Only primary buttons are filled; outline, secondary, and ghost variants keep Tutor's lighter treatment. */
body .tutor-btn {
	border-radius: var(--bz-radius-small);
	font-family: var(--bz-font-ui);
	font-weight: 600;
}

body .tutor-btn-primary,
body a.tutor-btn-primary,
body button.tutor-btn-primary {
	border-color: var(--bz-forest);
	background-color: var(--bz-forest);
	color: var(--bz-ivory);
}

body .tutor-btn-primary:hover,
body a.tutor-btn-primary:hover,
body button.tutor-btn-primary:hover {
	border-color: var(--bz-deep);
	background-color: var(--bz-deep);
	color: var(--bz-ivory);
}

body .tutor-btn-outline-primary {
	border-color: var(--bz-forest);
	color: var(--bz-forest);
}

body .tutor-btn-outline-primary:hover,
body .tutor-btn-outline-primary:focus-visible {
	background-color: var(--bz-forest);
	color: var(--bz-ivory);
}

/* Tutor's grey ghost text (#757c8e) is below 4.5:1 on ivory. */
body .tutor-btn-ghost {
	color: var(--bz-forest);
}

body .tutor-btn-ghost:hover,
body .tutor-btn-ghost:focus-visible {
	color: var(--bz-accent-dark);
}

body .tutor-course-progress,
body .tutor-progress-bar,
body .tutor-course-completion-bar {
	background-color: var(--bz-sage);
}

body .tutor-course-progress .tutor-progress-value,
body .tutor-progress-bar .tutor-progress-value,
body .tutor-course-completion-bar .tutor-progress-value {
	background-color: var(--bz-forest);
}

body .woocommerce .button,
body .woocommerce button.button,
body .woocommerce a.button,
body .woocommerce input.button {
	border: 1px solid var(--bz-forest);
	border-radius: var(--bz-radius-small);
	background-color: var(--bz-forest);
	color: var(--bz-ivory);
	font-family: var(--bz-font-ui);
	font-weight: 600;
}

body .woocommerce .button:hover,
body .woocommerce button.button:hover,
body .woocommerce a.button:hover,
body .woocommerce input.button:hover {
	border-color: var(--bz-deep);
	background-color: var(--bz-deep);
	color: var(--bz-ivory);
}

body .tutor-wrap a:focus-visible,
body .tutor-wrap button:focus-visible,
body .tutor-dashboard a:focus-visible,
body .woocommerce a:focus-visible,
body .woocommerce button:focus-visible,
body .woocommerce input:focus-visible {
	outline: 2px solid var(--bz-gold);
	outline-offset: 3px;
}

/*
 * Browser translation (e.g. Chrome Translate) wraps button text in <font> elements. Tutor's enroll
 * script reads data-course-id from the clicked element, so clicks on the wrapped text sent an empty
 * course ID ("Invalid course ID"). Route every click to the button itself.
 */
body .tutor-course-list-enroll *,
body .tutor-btn * {
	pointer-events: none;
}

/* WooCommerce sale badge: Kadence hard-codes its default blue. */
body.woocommerce span.onsale,
body .woocommerce span.onsale {
	background-color: var(--bz-forest);
	color: var(--bz-ivory);
}

/* ---- Redesign: course catalog cards ---- */
body .tutor-course-card {
	overflow: hidden;
	border: 0 !important;
	border-radius: var(--bz-radius-small);
	background: var(--bz-card-background);
	box-shadow: var(--bz-shadow-card);
	transition: transform var(--bz-speed) var(--bz-ease), box-shadow var(--bz-speed) var(--bz-ease);
}

body .tutor-course-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--bz-shadow-lift);
}

body .tutor-course-card .tutor-course-thumbnail {
	overflow: hidden;
}

body .tutor-course-card .tutor-course-thumbnail img {
	transition: transform .6s var(--bz-ease);
}

body .tutor-course-card:hover .tutor-course-thumbnail img {
	transform: scale(1.06);
}

body .tutor-course-card .tutor-card-body {
	padding: 22px 22px 8px;
}

body .tutor-course-card .tutor-course-name,
body .tutor-course-card .tutor-course-name a {
	color: var(--bz-forest);
	font: 500 23px/1.2 var(--bz-font-editorial);
	text-decoration: none;
}

body .tutor-course-card .tutor-card-footer {
	padding: 16px 22px 22px;
	border-top: 1px solid var(--bz-card-border);
	background: transparent;
}

body .tutor-course-card .tutor-btn {
	min-height: 44px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

body .tutor-course-filter-wrapper,
body .tutor-course-archive-filters-wrap {
	margin-bottom: 24px;
}

/* ---- Redesign: course details ---- */
body .tutor-course-details-page {
	padding-top: clamp(28px, 4vw, 56px);
	padding-bottom: clamp(48px, 6vw, 88px);
}

body .tutor-course-details-header .tutor-course-details-title {
	font-size: var(--bz-text-h1);
	line-height: 1.05;
}

body .tutor-course-thumbnail,
body .tutor-course-details-page .tutor-course-thumbnail img {
	border-radius: var(--bz-radius-small);
}

body .tutor-single-course-sidebar .tutor-sidebar-card,
body .tutor-single-course-sidebar .tutor-card {
	overflow: hidden;
	border: 0;
	border-top: 3px solid var(--bz-gold);
	background: var(--bz-card-background);
	box-shadow: var(--bz-shadow-card);
}

body .tutor-course-details-tab .tutor-nav {
	border-bottom: 1px solid var(--bz-card-border);
}

body .tutor-accordion-item {
	border-color: var(--bz-card-border);
	background: var(--bz-card-background);
}

body .tutor-accordion-item-header {
	color: var(--bz-forest);
	font-weight: 600;
}

/* ---- Redesign: student dashboard ---- */
body .tutor-dashboard {
	padding-top: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(48px, 6vw, 80px);
}

body .tutor-dashboard .tutor-frontend-dashboard-header {
	padding: 24px;
	border-radius: var(--bz-radius-small);
	background: var(--bz-deep);
	color: var(--bz-ivory);
}

body .tutor-dashboard .tutor-frontend-dashboard-header * {
	color: var(--bz-ivory);
}

body .tutor-dashboard .tutor-frontend-dashboard-header .tutor-btn-primary {
	border-color: var(--bz-gold-light);
	background: var(--bz-gold-light);
	color: var(--bz-deep);
}

body .tutor-dashboard-left-menu .tutor-dashboard-menu-item-link {
	border-radius: var(--bz-radius-small);
	transition: background-color var(--bz-speed) var(--bz-ease), color var(--bz-speed) var(--bz-ease);
}

body .tutor-dashboard-left-menu .tutor-dashboard-menu-item-link:hover {
	background: rgba(var(--bz-forest-rgb), .08);
}

body .tutor-dashboard-content .tutor-card {
	border: 0;
	border-top: 3px solid var(--bz-gold);
	box-shadow: var(--bz-shadow-card);
	transition: transform var(--bz-speed) var(--bz-ease);
}

body .tutor-dashboard-content .tutor-card:hover {
	transform: translateY(-3px);
}

body .tutor-round-box {
	background: var(--bz-forest) !important;
	color: var(--bz-gold-light) !important;
}

/* ---- Redesign: lesson attachments ---- */
body .tutor-course-attachment {
	border-color: var(--bz-card-border);
	background: var(--bz-card-background);
	transition: border-color var(--bz-speed) var(--bz-ease), transform var(--bz-speed) var(--bz-ease);
}

body .tutor-course-attachment:hover {
	border-color: var(--bz-forest);
	transform: translateY(-2px);
}

/* Course details header as a full-width forest band, matching the page title bands. */
body .tutor-course-details-page .tutor-course-details-header {
	position: relative;
	margin-bottom: clamp(28px, 4vw, 48px);
	padding: clamp(32px, 4vw, 56px) 0;
	background: var(--bz-deep);
	box-shadow: 0 0 0 100vmax var(--bz-deep);
	clip-path: inset(0 -100vmax);
	color: var(--bz-ivory);
}

body .tutor-course-details-page {
	padding-top: 0;
}

body .tutor-course-details-page .tutor-course-details-header .tutor-course-details-title,
body .tutor-course-details-page .tutor-course-details-header .tutor-meta,
body .tutor-course-details-page .tutor-course-details-header .tutor-meta a,
body .tutor-course-details-page .tutor-course-details-header .tutor-btn-ghost,
body .tutor-course-details-page .tutor-course-details-header .tutor-btn-ghost span {
	color: var(--bz-ivory) !important;
}

body .tutor-course-details-page .tutor-course-details-header .tutor-ratings-stars,
body .tutor-course-details-page .tutor-course-details-header .tutor-ratings-stars [class*="tutor-icon-star"] {
	color: var(--bz-gold-light);
}

body .tutor-course-details-page .tutor-course-details-header .tutor-btn-ghost:hover {
	color: var(--bz-gold-light) !important;
}

body.single-courses .content-area {
	margin-top: 0;
}

body .tutor-course-details-page .tutor-course-details-header .tutor-course-details-info,
body .tutor-course-details-page .tutor-course-details-header .tutor-course-details-info * {
	color: var(--bz-card-muted) !important;
}

/* ======================================================================
 * Lesson player (client feedback): warm surfaces instead of Tutor's cool grey,
 * a framed video stage, a readable content column, and brand-coloured controls.
 * ====================================================================== */

/* Video player (Plyr) controls: muted gold instead of the default bright blue. */
body {
	--plyr-color-main: var(--bz-gold);
	--plyr-video-control-color: var(--bz-ivory);
	--plyr-video-control-color-hover: var(--bz-ivory);
	--plyr-range-fill-background: var(--bz-gold-light);
}

body .plyr__control--overlaid {
	padding: 22px;
	background: rgba(var(--bz-gold-rgb), .92);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

body .plyr__control--overlaid:hover,
body .plyr__control--overlaid:focus-visible {
	background: var(--bz-gold);
}

/* Sidebar: warm card surface, clear active lesson, no empty cool-grey block. */
body .tutor-course-single-sidebar-wrapper {
	border-right: 1px solid var(--bz-card-border);
	background: var(--bz-card-background) !important;
}

body .tutor-course-single-sidebar-title {
	padding: 22px 22px 18px !important;
	border-bottom: 2px solid var(--bz-gold);
	background: var(--bz-deep) !important;
}

body .tutor-course-single-sidebar-title,
body .tutor-course-single-sidebar-title * {
	color: var(--bz-ivory) !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

body .tutor-course-single-sidebar-wrapper .tutor-accordion-item {
	border: 0;
	border-bottom: 1px solid var(--bz-card-border);
	background: transparent;
}

body .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header {
	padding: 18px 44px 18px 22px;
	background: var(--bz-sand) !important;
	color: var(--bz-forest) !important;
	font-weight: 600;
}

body .tutor-course-single-sidebar-wrapper .tutor-accordion-item-body {
	padding: 6px 0;
	background: transparent;
}

body .tutor-course-topic-item a {
	padding: 13px 22px !important;
	border-left: 3px solid transparent;
	color: var(--bz-ink) !important;
	transition: background-color var(--bz-speed) var(--bz-ease), border-color var(--bz-speed) var(--bz-ease);
}

body .tutor-course-topic-item a:hover {
	background: rgba(var(--bz-forest-rgb), .06) !important;
}

body .tutor-course-topic-item.is-active a {
	border-left-color: var(--bz-gold);
	background: rgba(var(--bz-forest-rgb), .09) !important;
}

body .tutor-course-topic-item.is-active .tutor-course-topic-item-title {
	font-weight: 600;
}

/* Topic header bar above the video. */
body .tutor-course-topic-single-header {
	padding: 14px clamp(16px, 2.4vw, 32px) !important;
	border-bottom: 1px solid rgba(var(--bz-gold-rgb), .45);
	background: var(--bz-deep) !important;
}

body .tutor-course-topic-single-header .tutor-course-topic-single-header-title {
	font-family: var(--bz-font-editorial);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 500;
}

/* Video stage: deep backdrop, video capped in width so it never fills the whole screen. */
body .tutor-video-player-wrapper {
	padding: clamp(16px, 2.5vw, 36px) clamp(16px, 3vw, 48px);
	background:
		radial-gradient(ellipse 60% 80% at 50% 0, rgba(var(--bz-gold-rgb), .14), transparent 70%),
		var(--bz-deep);
}

body .tutor-video-player-wrapper .tutor-video-player {
	max-width: 1080px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--bz-radius);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}

/* Tabs (Übersicht / Übungsdateien / Notes). */
body .tutor-course-spotlight-wrapper .tutor-course-spotlight-nav {
	position: sticky;
	top: 0;
	z-index: 5;
	border-bottom: 1px solid var(--bz-card-border);
	background: var(--bz-card-background);
}

body .tutor-course-spotlight-nav .tutor-nav-link {
	padding-block: 16px;
	color: var(--bz-muted-ink);
	font-weight: 600;
}

/* Lesson text: a framed reading column instead of loose text in empty space. */
body .tutor-course-spotlight-tab {
	padding: clamp(24px, 3vw, 44px) clamp(16px, 3vw, 40px) !important;
}

body .tutor-course-spotlight-tab .tutor-tab-item.is-active {
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(24px, 3.5vw, 48px);
	border-top: 3px solid var(--bz-gold);
	background: var(--bz-card-background);
	box-shadow: var(--bz-shadow-card);
}

body .tutor-course-spotlight-tab .tutor-tab-item > .tutor-container,
body .tutor-course-spotlight-tab .tutor-tab-item .tutor-container {
	max-width: none;
	padding: 0;
}

body .tutor-course-spotlight-tab .tutor-lesson-content-area,
body .tutor-course-spotlight-tab .tutor-tab-item p,
body .tutor-course-spotlight-tab .tutor-tab-item li {
	color: var(--bz-ink);
	font-size: 16.5px;
	line-height: 1.8;
}

body .tutor-course-spotlight-tab .tutor-tab-item h2,
body .tutor-course-spotlight-tab .tutor-tab-item h3 {
	margin: 1.4em 0 .5em;
	color: var(--bz-forest);
	font-family: var(--bz-font-editorial);
	font-weight: 500;
}

/* Previous / next band and the completion bar. */
body .tutor-course-topic-single-footer {
	padding: 18px clamp(16px, 3vw, 40px) !important;
	border-top: 1px solid var(--bz-card-border);
	background: var(--bz-sand) !important;
}

body .tutor-course-topic-single-footer .tutor-btn {
	min-height: 44px;
	padding-inline: 22px;
	border: 1px solid var(--bz-forest);
	background: transparent;
	color: var(--bz-forest);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

body .tutor-course-topic-single-footer .tutor-btn:hover,
body .tutor-course-topic-single-footer .tutor-btn:focus-visible {
	background: var(--bz-forest);
	color: var(--bz-ivory);
}

body .tutor-spotlight-mobile-progress-complete {
	border-top: 1px solid var(--bz-card-border);
	background: var(--bz-card-background) !important;
}

/* Administrator preview notice: compact and warm. */
body .bz-preview-notice {
	margin: 0;
	padding: 12px clamp(16px, 2.4vw, 32px);
	border-left: 0;
	border-bottom: 1px solid var(--bz-card-border);
	background: var(--bz-sand);
	font-size: 13.5px;
}

/* Inside the reading card, use its full width instead of Tutor's centred 8/12 column. */
body .tutor-course-spotlight-tab .tutor-tab-item .tutor-row {
	margin-inline: 0;
}

body .tutor-course-spotlight-tab .tutor-tab-item [class*="tutor-col-"] {
	flex: 0 0 100%;
	max-width: 100%;
	padding-inline: 0;
}

/* Lesson rows sit on the warm sidebar surface, not on white. */
body .tutor-course-single-sidebar-wrapper .tutor-accordion-item-body,
body .tutor-course-single-sidebar-wrapper .tutor-course-topic-item {
	background: transparent !important;
}

/* ======================================================================
 * Course catalog (client feedback): one course per row instead of a dense grid.
 * ====================================================================== */
@media (min-width: 768px) {
	html:not(.bz-view-grid) body .tutor-course-list.tutor-grid {
		grid-template-columns: 1fr !important;
		gap: clamp(24px, 3vw, 40px);
		max-width: 1100px;
		margin-inline: auto;
	}

	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		min-height: 300px;
	}

	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card .tutor-course-thumbnail {
		grid-row: 1 / 3;
		height: 100%;
	}

	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card .tutor-course-thumbnail > a,
	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card .tutor-course-thumbnail .tutor-ratio {
		display: block;
		height: 100%;
		padding-top: 0 !important;
	}

	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card .tutor-course-thumbnail img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card .tutor-course-thumbnail .tutor-ratio,
	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card .tutor-course-thumbnail > a {
		position: relative;
		min-height: 300px;
	}

	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card .tutor-card-body {
		align-self: center;
		padding: clamp(28px, 3.5vw, 48px) clamp(28px, 3.5vw, 48px) 12px;
		border-top: 3px solid var(--bz-gold);
	}

	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card .tutor-course-name,
	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card .tutor-course-name a {
		font-size: clamp(26px, 2.4vw, 34px);
		line-height: 1.12;
	}

	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card .tutor-card-footer {
		grid-column: 2;
		padding: 18px clamp(28px, 3.5vw, 48px) clamp(28px, 3.5vw, 40px);
		border-top: 0;
	}

	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card .tutor-card-footer .tutor-btn {
		width: auto;
		padding-inline: 28px;
	}

	html:not(.bz-view-grid) body .tutor-course-list .tutor-course-card .tutor-course-bookmark {
		position: absolute;
		top: 14px;
		left: 14px;
		right: auto;
		z-index: 2;
	}
}

/* Catalog: use the wide layout on large screens instead of Kadence's 1290px column. */
body.post-type-archive-courses .content-container.site-container,
body.tax-course-category .content-container.site-container {
	max-width: calc(var(--bz-wide-width) + 48px);
}

@media (min-width: 768px) {
	body .tutor-course-list.tutor-grid {
		max-width: 100%;
	}
}

/* ---- E2E test fixes (2026-10-08) ---- */

/* Course page tab bar: stick below the sticky site header instead of sliding over it. */
@media (min-width: 691px) {
	body .tutor-is-sticky {
		top: 74px !important;
		z-index: 40 !important;
	}

	.admin-bar .tutor-is-sticky {
		top: 106px !important;
	}
}

/* Course sidebar card body: Tutor hard-codes a blue-grey (#f4f6f9). */
body .tutor-sidebar-card .tutor-card-body {
	background: transparent !important;
}

/* Lessons without a video: hide the empty dark video stage. */
body .tutor-video-player-wrapper:not(:has(video, iframe, .plyr, .tutor-video-player-container)) {
	display: none;
}

/* Quiz timer icon: muted gold instead of red. */
body .tutor-quiz-header [class*="tutor-icon-clock"],
body .tutor-quiz-time-remaining .tutor-icon-circle,
body .quiz-time-remaining-progress-circle svg circle {
	color: var(--bz-gold);
	stroke: var(--bz-gold);
}

/* Curriculum accordion on the course page: warm header instead of Tutor grey-blue. */
body .tutor-course-details-page .tutor-accordion-item-header {
	background: var(--bz-sand) !important;
	color: var(--bz-forest);
}

/* ======================================================================
 * Tutor LMS 4: map its design tokens (blue brand scale, grey surfaces, Nunito)
 * onto BIO ZAHN. Applied on the page and on every [data-tutor-theme] wrapper,
 * so the new dashboard, modals and tours follow the brand in light and dark OS mode.
 * ====================================================================== */
html:root,
html[data-tutor-theme],
html [data-tutor-theme] {
	--tutor-brand-50: #f2f5f2;
	--tutor-brand-100: #e5ebe6;
	--tutor-brand-200: #cfd9d1;
	--tutor-brand-300: #b3c2b6;
	--tutor-brand-400: #8a9e8f;
	--tutor-brand-500: #4f6656;
	--tutor-brand-600: #293a30;
	--tutor-brand-700: #1d3027;
	--tutor-brand-800: #182920;
	--tutor-brand-900: #12201a;
	--tutor-brand-950: #0c1611;
	--tutor-surface-base: var(--bz-ivory);
	--tutor-font-family-body: var(--bz-font-ui);
	--tutor-font-family-heading: var(--bz-font-editorial);
	color-scheme: light;
}

/* The new dashboard keeps the warm page background and brand typography. */
body .tutor-dashboard-isolated-page-wrapper {
	background: var(--bz-ivory);
	font-family: var(--bz-font-ui);
}

body .tutor-dashboard-isolated-page-wrapper h1,
body .tutor-dashboard-isolated-page-wrapper h2,
body .tutor-dashboard-isolated-page-wrapper h3 {
	color: var(--bz-forest);
	font-family: var(--bz-font-editorial);
	font-weight: 500;
}

/* Tutor 4 dashboard stat cards: brand colours for icons and figures (teal/amber by default). */
body .tutor-stat-card {
	border-top: 3px solid var(--bz-gold);
	box-shadow: var(--bz-shadow-card);
}

body .tutor-stat-card-icon,
body .tutor-stat-card-active .tutor-stat-card-icon,
body .tutor-stat-card-completed .tutor-stat-card-icon {
	color: var(--bz-forest);
}

body .tutor-stat-card-time-spent .tutor-stat-card-icon {
	color: var(--bz-gold);
}

body .tutor-stat-card [class*="value"],
body .tutor-stat-card [class*="count"],
body .tutor-stat-card [class*="number"] {
	color: var(--bz-forest) !important;
	font-family: var(--bz-font-editorial);
	font-size: 34px;
	font-weight: 500;
}

/*
 * Dashboard → Kurse (client feedback 2026-11-02): Tutor Pro adds an older "Neuer Kurs" button (icon
 * font no longer loaded) next to Tutor's own one. Only Tutor's button with the plus icon stays.
 */
.tutor-dashboard-my-courses .tutor-dashboard-create-course {
	display: none !important;
}