/* =============================================================================
 * VES Kneipp – Theme Overrides (VES-13)
 * Primary: #44546A
 * ========================================================================== */

.w2b-course-group-description ul {
    list-style-position: inside;
    margin-left: 20px !important;
    list-style: disc;
}

:root {
	--ves-primary: #44546a;
	--ves-primary-rgb: 68, 84, 106;
	--ves-accent: #a5ce78;
	--ves-header-h: 88px;
	--ves-header-h-mobile: 70px;
	--ves-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html,
body {
	background-color: #fff;
}

/* ---------------------------------------------------------------------------
 * Home Revolution Slider: Höhe früh reservieren (grid 1240×1000)
 * Verhindert Content-Rutsch vor Slider-Init → stabile Scroll-Reveals
 * --------------------------------------------------------------------------- */

body.home .ce_revolutionslider .rs-container,
body.home .ce_revolutionslider .fullwidthbanner-container,
body.home .ce_revolutionslider .tp-banner {
	width: 100%;
	aspect-ratio: 1240 / 1000;
	max-height: 1000px;
	min-height: min(1000px, calc(100vw * 1000 / 1240));
	background-color: #2a3544;
}

@media (max-width: 767px) {
	body.home .ce_revolutionslider .rs-container,
	body.home .ce_revolutionslider .fullwidthbanner-container,
	body.home .ce_revolutionslider .tp-banner {
		min-height: min(1000px, calc(100vw * 1000 / 1240));
	}
}

/* ---------------------------------------------------------------------------
 * Header: kompakter, Glas/Blur, Primary-Blau
 * --------------------------------------------------------------------------- */

header.original {
	position: fixed;
	z-index: 1030;
}

.header,
.header.original,
.stickyheader .header.cloned {
	background-color: rgba(var(--ves-primary-rgb), 0.78) !important;
	-webkit-backdrop-filter: blur(16px) saturate(1.25);
	backdrop-filter: blur(16px) saturate(1.25);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 6px 24px rgba(36, 48, 64, 0.18);
	transition:
		line-height 0.35s var(--ves-ease),
		background-color 0.35s ease,
		box-shadow 0.35s ease,
		backdrop-filter 0.35s ease;
}

/* Desktop: Logo & Headerhöhe deutlich kleiner als ThemeDesigner 145px */
@media only screen and (min-width: 768px) {
	.header.original {
		line-height: var(--ves-header-h) !important;
	}

	.header.original .logo {
		width: 128px !important;
		height: var(--ves-header-h) !important;
		transition: width 0.35s var(--ves-ease), height 0.35s var(--ves-ease);
	}

	.header.original .logo a {
		background-size: contain;
		background-position: left center;
	}

	.header.original .smartmenu .smartmenu-trigger {
		height: var(--ves-header-h) !important;
	}

	.stickyheader .header.cloned {
		line-height: 70px !important;
	}

	.stickyheader .header.cloned .logo {
		width: 90px !important;
		height: 70px !important;
	}

	.stickyheader .smartmenu .smartmenu-trigger {
		height: 70px !important;
	}

	body:not(.home) div#contentwrapper {
		margin-top: calc(var(--ves-header-h) + 8px);
	}
}

/* Sticky-Header: etwas kräftigerer Glas-Look */
body.fixed-header .stickyheader .header.cloned {
	background-color: rgba(var(--ves-primary-rgb), 0.88) !important;
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	backdrop-filter: blur(18px) saturate(1.3);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 8px 28px rgba(36, 48, 64, 0.22);
}

body.fixed-header header.original {
	display: none !important;
}

/* Mobile Logo etwas ruhiger */
@media only screen and (max-width: 767px) {
	.header .logo {
		width: 96px !important;
		height: var(--ves-header-h-mobile) !important;
	}

	.header {
		line-height: var(--ves-header-h-mobile) !important;
	}

	body:not(.home) div#contentwrapper {
		margin-top: calc(var(--ves-header-h-mobile) + 8px);
	}
}

/* Fallback ohne Backdrop-Filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.header,
	.header.original,
	.stickyheader .header.cloned {
		background-color: rgba(var(--ves-primary-rgb), 0.94) !important;
	}
}

/* ---------------------------------------------------------------------------
 * Navigation: etwas mehr Luft, saubere Hover-States
 * --------------------------------------------------------------------------- */

.mainmenu ul li {
	margin-right: 30px !important;
}

.header .mainmenu ul.level_1 > li > a.a-level_1 {
	position: relative;
	transition: color 0.25s ease, opacity 0.25s ease;
}

.header .mainmenu ul.level_1 > li > a.a-level_1 > span {
	position: relative;
}

.header .mainmenu ul.level_1 > li > a.a-level_1 > span::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background: var(--ves-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s var(--ves-ease);
	opacity: 0.95;
}

.header .mainmenu ul.level_1 > li > a.a-level_1:hover > span::after,
.header .mainmenu ul.level_1 > li > a.a-level_1.trail > span::after,
.header .mainmenu ul.level_1 > li > a.a-level_1.active > span::after {
	transform: scaleX(1);
}

/* Dropdown-Hinweis (Top-Level) */
.header .mainmenu ul.level_1 > li.submenu > a.a-level_1 > span,
.header .mainmenu a.a-level_1.submenu > span,
.header .mainmenu a.ves-has-dropdown > span {
	padding-right: 1.35em;
}

.header .mainmenu ul.level_1 > li.submenu > a.a-level_1 > span::before,
.header .mainmenu a.a-level_1.submenu > span::before,
.header .mainmenu a.ves-has-dropdown > span::before {
	content: "\f107";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	speak: none;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-52%);
	font-size: 0.95em;
	line-height: 1;
	opacity: 1;
	color: #fff;
	transition: transform 0.25s var(--ves-ease), opacity 0.25s ease;
}

.header .mainmenu ul.level_1 > li.submenu:hover > a.a-level_1 > span::before,
.header .mainmenu ul.level_1 > li.submenu.open > a.a-level_1 > span::before,
.header .mainmenu a.a-level_1.submenu:hover > span::before,
.header .mainmenu a.ves-has-dropdown:hover > span::before {
	opacity: 1;
	transform: translateY(-40%);
}

/* Nested Dropdowns in geöffnetem Menü (Level 2+) – Pfeil nach rechts klarer */
.header .mainmenu ul ul li.submenu > a.submenu,
.header .mainmenu ul ul li.submenu > a {
	padding-right: 1.75rem !important;
}

.header .mainmenu ul ul li a.submenu:after {
	content: "\f105" !important;
	font-family: FontAwesome !important;
	right: 12px !important;
	opacity: 0.75;
	color: inherit;
}

/* Smartmenu / Mobile-Panel */
.smartmenu-content .mod_navigation li.submenu > a.submenu > span,
.smartmenu-content .mod_navigation a.submenu > span {
	position: relative;
	padding-right: 1.2em;
}

.smartmenu-content .mod_navigation li.submenu > a.submenu > span::after,
.smartmenu-content .mod_navigation a.a-level_1.submenu > span::after {
	content: "\f107";
	font-family: FontAwesome;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.75em;
	opacity: 0.8;
}

.mainmenu ul li a i {
	left: -19px;
	translate: none;
	transform: none !important;
	width: auto !important;
	padding-top: 3px;
}

.level_1 > li.last.hasIcon {
	top: -6px !important;
}

nav.mod_navigation.mainmenu > ul > li:first-child > ol:first-child > li:first-child .mainmenu_link span {
	display: none;
}

nav.mod_navigation.mainmenu ul li:first-child li:first-child .mainmenu_link i {
	position: relative !important;
	transform: none !important;
}

/* ---------------------------------------------------------------------------
 * Link-Boxen / Content-Polishing
 * --------------------------------------------------------------------------- */

.verein-box .content:before {
	font-size: 1.5em;
	position: relative;
	display: block;
	content: "";
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("https://ves.web2business.de/files/cto_layout/themedesigner/uploads/logo_ves_weiss.png");
	top: -12px;
	left: 50%;
	margin-left: -35px;
	height: 45px;
	background-position: 55%;
}

.kurse-box .content:before {
	font-size: 1.5em;
	position: relative;
	display: block;
	content: "\f19d";
	font-family: FontAwesome;
	top: 0;
	height: 45px;
}

.wissenswertes-box .content:before {
	font-size: 1.5em;
	position: relative;
	display: block;
	content: "\f05a";
	font-family: FontAwesome;
	top: 0;
	height: 45px;
}

.ves-link-box {
	overflow: hidden;
	transition:
		transform 0.45s var(--ves-ease),
		box-shadow 0.45s var(--ves-ease);
	will-change: transform;
}

.ves-link-box:hover {
	transform: translateY(-6px);
}

.ves-link-box .content:before {
	font-size: 50px;
	height: 1.2em;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center;
	margin: 0;
	left: 0;
}

.ves-link-box .content .headline {
	opacity: 1 !important;
	transform: none !important;
	-webkit-transform: none !important;
}

.mod_w2b_course_group_reader .w2b-course-list .w2b-course-item .w2b-course-title h3 {
	color: var(--ves-primary);
}

.mod_w2b_course_list .w2b-course-group .w2b-course-group-title a {
	color: var(--ves-primary);
}

.mod_w2b_course_list .w2b-course-group {
	transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ves-ease);
}

.mod_w2b_course_list .w2b-course-group:hover {
	background-color: rgba(var(--ves-primary-rgb), 0.03);
	box-shadow: 0 8px 24px rgba(var(--ves-primary-rgb), 0.08);
}

.bg-lightgray {
	background: #fff !important;
}

.ce_download:not(.ce_download_small) {
	background: none;
	padding: 16px 0;
	cursor: pointer;
}

.ce_download:not(.ce_download_small) a:hover {
	color: #3c3c42;
}

.ks_vorstand .ce_accordionStart .accordion {
	padding-right: 40px;
	padding-left: 40px;
}

.ks_vorstand .ce_accordionStart .accordion .autogrid_row .column {
	display: flex;
	justify-content: center;
}

.ks_vorstand .ce_accordionStart .accordion .autogrid_row .column .ce_text {
	width: 230px;
}

.kurse-img-pos .imagebox {
	background-position: top center;
}

.bildunsp-img-pos .imagebox {
	background-position: 0 -525px;
}

.wissenswertes_tabs .tabs {
	max-width: 1240px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	padding-right: 40px;
	padding-left: 40px;
}

.wissenswertes_tabs .tabs ul li {
	border: 1px solid #eae9e9;
	background-color: transparent !important;
	box-shadow: none !important;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.wissenswertes_tabs .tabs ul li:not(.active) {
	border-top: 1px solid #eae9e9;
}

.wissenswertes_tabs .tabs ul li.active {
	position: relative;
	border-bottom: 1px solid var(--ves-accent) !important;
	z-index: 1;
}

.wissenswertes_tabs .tabs ul li:not(:first-of-type) {
	margin-left: 5px;
}

.wissenswertes_tabs .panes {
	padding: 0 !important;
	background-color: transparent !important;
}

.wissenswertes_tabs_row {
	max-width: 1240px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 40px;
	padding-left: 40px;
}

/* ---------------------------------------------------------------------------
 * Viewport-Reveal – nur .ves-reveal (von JS gesetzt, nur unter dem Fold).
 * Kein pauschales Ausblenden von Content-Elementen.
 * --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
	#contentwrapper .ves-reveal {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
		transition: opacity 0.8s ease, transform 0.8s ease;
		will-change: opacity, transform;
	}

	#contentwrapper .ves-reveal.ves-in,
	#contentwrapper .ves-done {
		opacity: 1;
		transform: none;
	}

	#contentwrapper .ves-done {
		transition: none;
		will-change: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ves-reveal,
	.ves-link-box,
	.header,
	.header.original,
	.stickyheader .header.cloned {
		transition: none !important;
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.ves-link-box:hover {
		transform: none;
	}

	.header .mainmenu ul.level_1 > li > a.a-level_1 > span::after {
		transition: none;
	}
}