/* VI Aktionsbanner 1.1 - Frontend (ASCII-only comments) */

.vipb {
	--vipb-serif: "Playfair Display", Georgia, serif;
	--vipb-sans: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--vipb-lavender: #9b8abf;
	display: block;
	width: 100%;
	clear: both;
	font-family: var(--vipb-sans);
	position: relative;
	z-index: 1;
}
.vipb *, .vipb *::before, .vipb *::after { box-sizing: border-box; }
.vipb--inline { border-radius: 18px; overflow: hidden; }

/* ---------- Laufband ---------- */

.vipb-ticker {
	background: var(--vipb-lavender);
	color: #fff;
	overflow: hidden;
	height: 38px;
	display: flex;
	align-items: center;
}
.vipb-ticker__track {
	display: flex;
	width: max-content;
	animation: vipb-marquee var(--vipb-speed, 45s) linear infinite;
}
.vipb-ticker:hover .vipb-ticker__track,
.vipb-ticker:focus-within .vipb-ticker__track { animation-play-state: paused; }
.vipb .vipb-ticker__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vipb .vipb-ticker__list li {
	margin: 0;
	padding: 0 22px;
	white-space: nowrap;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 38px;
}
.vipb .vipb-ticker__list a { color: inherit; text-decoration: none; }
.vipb .vipb-ticker__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vipb-ticker__star { opacity: .85; margin-right: 4px; }
@keyframes vipb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Buehne / Slider ---------- */

.vipb-stage { position: relative; }
.vipb-stage__track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.vipb-stage__track::-webkit-scrollbar { display: none; }
.vipb-stage[data-count="1"] .vipb-stage__track { overflow: hidden; }

.vipb-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	position: relative;
	overflow: hidden;
	background: var(--vipb-bg);
	color: var(--vipb-fg);
}
.vipb-slide__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 270px;
	gap: 40px;
	align-items: center;
}

/* Canva-Grafik: flache Farbe, damit der Grafik-Hintergrund nahtlos anschliesst */
.vipb-slide--image { background: var(--vipb-flat); }
.vipb-slide__media { display: block; align-self: stretch; line-height: 0; }
.vipb-slide__media picture,
.vipb .vipb-slide__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0;
	border-radius: 0;
}

/* Rechte Spalte */
.vipb-slide__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 28px 0;
}
.vipb-cd__label {
	display: block;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--vipb-accent);
}
.vipb-cd__units { display: flex; gap: 8px; }
.vipb-cd__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	background: var(--vipb-box);
	border: 1px solid var(--vipb-box-border);
}
.vipb .vipb-cd__unit b {
	font-family: var(--vipb-serif);
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	color: var(--vipb-fg);
	font-variant-numeric: tabular-nums;
}
.vipb .vipb-cd__unit small {
	margin-top: 5px;
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vipb-accent);
}
.vipb .vipb-slide__btn {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: 15px 30px;
	border-radius: 100px;
	background: var(--vipb-btn-bg);
	color: var(--vipb-btn-fg) !important;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none !important;
	box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .55);
	transition: transform .25s ease, box-shadow .25s ease;
	white-space: nowrap;
}
.vipb .vipb-slide__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6); }
.vipb .vipb-slide__btn:focus-visible,
.vipb .vipb-slide__media:focus-visible,
.vipb .vipb-dot:focus-visible,
.vipb .vipb-ticker__list a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Text + Foto */
.vipb-slide--text .vipb-slide__inner {
	grid-template-columns: minmax(0, 330px) minmax(0, 1fr) 270px;
	min-height: 270px;
}
.vipb-slide--text:not(.vipb-slide--has-photo) .vipb-slide__inner { grid-template-columns: minmax(0, 1fr) 270px; }
.vipb-slide__photo-wrap { align-self: end; line-height: 0; }
.vipb .vipb-slide__photo {
	display: block;
	width: 100%;
	height: auto;
	max-height: 300px;
	object-fit: contain;
	object-position: center bottom;
	margin: 0 0 -6px;
}
.vipb-slide__body { padding: 30px 0; }
.vipb-slide__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--vipb-accent);
}
.vipb .vipb-slide__headline {
	margin: 10px 0 12px;
	padding: 0;
	font-family: var(--vipb-serif);
	font-size: clamp(34px, 4.4vw, 62px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.01em;
	color: var(--vipb-fg);
}
.vipb .vipb-slide__text {
	margin: 0;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--vipb-fg);
	opacity: .92;
}

/* Stoerer-Stern */
.vipb-burst {
	position: absolute;
	z-index: 2;
	top: 14px;
	left: calc(50% - 600px + 215px);
	width: 132px;
	height: 132px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--vipb-burst-bg);
	color: var(--vipb-burst-fg);
	clip-path: polygon(100.0% 50.0%, 90.6% 55.8%, 98.0% 64.1%, 87.3% 67.0%, 92.1% 77.0%, 81.0% 76.8%, 82.7% 87.8%, 72.2% 84.5%, 70.8% 95.5%, 61.6% 89.3%, 57.1% 99.5%, 50.0% 91.0%, 42.9% 99.5%, 38.4% 89.3%, 29.2% 95.5%, 27.8% 84.5%, 17.3% 87.8%, 19.0% 76.8%, 7.9% 77.0%, 12.7% 67.0%, 2.0% 64.1%, 9.4% 55.8%, 0.0% 50.0%, 9.4% 44.2%, 2.0% 35.9%, 12.7% 33.0%, 7.9% 23.0%, 19.0% 23.2%, 17.3% 12.2%, 27.8% 15.5%, 29.2% 4.5%, 38.4% 10.7%, 42.9% 0.5%, 50.0% 9.0%, 57.1% 0.5%, 61.6% 10.7%, 70.8% 4.5%, 72.2% 15.5%, 82.7% 12.2%, 81.0% 23.2%, 92.1% 23.0%, 87.3% 33.0%, 98.0% 35.9%, 90.6% 44.2%);
	transform: rotate(-10deg);
	animation: vipb-wiggle 2.6s ease-in-out infinite;
	pointer-events: none;
}
.vipb-burst__sm { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.vipb-burst__lg { font-family: var(--vipb-serif); font-size: 24px; font-weight: 600; line-height: 1.05; margin-top: 2px; }
@keyframes vipb-wiggle { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.05); } }
@media (max-width: 1240px) { .vipb-burst { left: 215px; } }

/* Punkte */
.vipb-stage__dots {
	position: absolute;
	z-index: 3;
	right: calc(50% - 600px + 20px);
	bottom: 14px;
	width: 270px;
	display: flex;
	gap: 7px;
}
@media (max-width: 1240px) { .vipb-stage__dots { right: 20px; } }
.vipb .vipb-dot {
	width: 8px;
	height: 8px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: rgba(255, 255, 255, .45);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
	cursor: pointer;
	transition: width .3s ease, background .3s ease;
}
.vipb .vipb-dot.is-active { width: 22px; background: #fff; }

/* ---------- Handy ---------- */

@media (max-width: 767px) {
	.vipb-ticker { height: 34px; }
	.vipb .vipb-ticker__list li { font-size: 11px; line-height: 34px; padding: 0 16px; }

	.vipb-slide__inner,
	.vipb-slide--text .vipb-slide__inner,
	.vipb-slide--text:not(.vipb-slide--has-photo) .vipb-slide__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 0;
		min-height: 0;
	}
	.vipb-slide__aside {
		align-items: center;
		text-align: center;
		padding: 20px 16px 38px;
	}
	.vipb-cd__label { margin-bottom: 8px; }
	.vipb-cd__unit { width: 56px; height: 56px; }
	.vipb .vipb-cd__unit b { font-size: 22px; }

	.vipb-slide__body { order: 1; padding: 28px 20px 0; text-align: center; }
	.vipb-slide--text .vipb-slide__aside { order: 2; padding-bottom: 20px; }
	.vipb-slide__photo-wrap { order: 3; padding: 0 40px; }
	.vipb .vipb-slide__photo { max-height: 210px; margin: 0 auto -4px; }
	.vipb-slide--text:not(.vipb-slide--has-photo) .vipb-slide__aside { padding-bottom: 38px; }
	.vipb-slide--has-photo .vipb-slide__photo-wrap { padding-bottom: 30px; }

	.vipb-burst { top: auto; left: auto; right: 12px; bottom: 44px; width: 108px; height: 108px; }
	.vipb-burst__sm { font-size: 8.5px; }
	.vipb-burst__lg { font-size: 19px; }
	.vipb-stage__dots { right: auto; left: 50%; width: auto; transform: translateX(-50%); bottom: 12px; }
}

/* ---------- Farbschemata ---------- */

.vipb-theme--burgund {
	--vipb-flat: #650d25;
	--vipb-bg: radial-gradient(ellipse at 30% 60%, #7a1531 0%, #650d25 45%, #4f061c 100%);
	--vipb-fg: #fff;
	--vipb-accent: #d9cdf0;
	--vipb-btn-bg: #fff;
	--vipb-btn-fg: #650d25;
	--vipb-box: rgba(255, 255, 255, .1);
	--vipb-box-border: rgba(255, 255, 255, .2);
	--vipb-burst-bg: #9b8abf;
	--vipb-burst-fg: #fff;
}
.vipb-theme--lavendel {
	--vipb-flat: #9b8abf;
	--vipb-bg: #9b8abf;
	--vipb-fg: #fff;
	--vipb-accent: #f3edf9;
	--vipb-btn-bg: #1a1318;
	--vipb-btn-fg: #fff;
	--vipb-box: rgba(255, 255, 255, .16);
	--vipb-box-border: rgba(255, 255, 255, .3);
	--vipb-burst-bg: #650d25;
	--vipb-burst-fg: #fff;
}
.vipb-theme--dunkel {
	--vipb-flat: #1a1318;
	--vipb-bg: #1a1318;
	--vipb-fg: #fff;
	--vipb-accent: #c4b5e6;
	--vipb-btn-bg: #9b8abf;
	--vipb-btn-fg: #fff;
	--vipb-box: rgba(255, 255, 255, .08);
	--vipb-box-border: rgba(255, 255, 255, .16);
	--vipb-burst-bg: #9b8abf;
	--vipb-burst-fg: #fff;
}
.vipb-theme--creme {
	--vipb-flat: #ede8f5;
	--vipb-bg: #ede8f5;
	--vipb-fg: #3a3040;
	--vipb-accent: #7d6aa8;
	--vipb-btn-bg: #650d25;
	--vipb-btn-fg: #fff;
	--vipb-box: #fff;
	--vipb-box-border: rgba(58, 48, 64, .1);
	--vipb-burst-bg: #650d25;
	--vipb-burst-fg: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.vipb-ticker__track,
	.vipb-burst { animation: none !important; }
	.vipb-ticker { overflow-x: auto; scrollbar-width: none; }
	.vipb .vipb-slide__btn { transition: none; }
}