/* ===== Altersabfrage mit Rauch-Intro ===== */
.b2b-age-gate {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	overflow: hidden;
}

.b2b-fog-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.b2b-age-gate-content {
	position: relative;
	z-index: 2;
	max-width: 420px;
	text-align: center;
	padding: 28px 24px;
	opacity: 0;
	pointer-events: none;
	transform: scale(0.96) translateY(10px);
	animation: b2b-content-in 1s ease 2s forwards;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 20px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
}

@supports (backdrop-filter: blur(1px)) {
	.b2b-age-gate-content {
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(8px);
	}
}

@keyframes b2b-content-in {
	from { opacity: 0; pointer-events: none; transform: scale(0.96) translateY(10px); }
	to { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0); }
}

.b2b-age-gate-logo {
	width: 90px;
	margin: 0 auto 20px;
	display: block;
}

.b2b-age-gate-content h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.6rem;
	margin-bottom: 12px;
}

.b2b-age-gate-content p {
	color: #6B6B6B;
	font-size: 0.95rem;
	margin-bottom: 24px;
}

.b2b-age-gate-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.b2b-age-gate-buttons button {
	border: none;
	border-radius: 999px;
	padding: 13px 26px;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

#b2b-age-yes {
	background: #1F6E58;
	color: #ffffff;
}

#b2b-age-yes:hover {
	background: #1B6E56;
	transform: translateY(-1px);
}

#b2b-age-no {
	background: #ffffff;
	color: #6B6B6B;
	border: 1px solid #E3D9C6;
}

#b2b-age-no:hover {
	color: #3A3A3A;
}

/* ===== 3D-Hintergrund, fix im Viewport, immer sichtbar, dreht sich beim Scrollen (nur Startseite) ===== */
.b2b-hero-transparent {
	position: relative;
}

.b2b-page-backdrop {
	position: fixed;
	inset: 0;
	z-index: -2;
	background: #FAF7F2;
}

.b2b-bg-3d-wrap {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	--b2b-3d-scroll-fade: 1;
	transition: opacity 0.3s ease;
}

/* Nur im Hero voll sichtbar - blendet aus, sobald das Produktraster beginnt,
   damit das 3D-Modell nicht mehr mit Produktkarten/Buttons konkurriert. */
.b2b-bg-3d-wrap.is-ready {
	opacity: calc(0.32 * var(--b2b-3d-scroll-fade));
}

.b2b-bg-3d-wrap model-viewer {
	width: 100%;
	height: 100%;
	--poster-color: transparent;
}

/* Der eingebaute Lade-Balken von <model-viewer> (duenner horizontaler Balken
   oben im Element, siehe model-viewer.min.js #default-progress-bar) soll hier
   nie zu sehen sein: waehrend der Intro-Phase (.is-intro, siehe futuristic.css)
   wird der ganze Wrap auf Vollbild skaliert und einmal komplett gedreht - der
   eigentlich stillstehende Balken wirkt dadurch wie ein rotierender Kreis,
   falls das Modell (GLB) noch nicht fertig geladen ist. Lieber gar keine
   Ladeanzeige als diese optisch kaputt wirkende. */
.b2b-bg-3d-wrap model-viewer::part(default-progress-bar) {
	display: none;
}

@media (max-width: 780px) {
	.b2b-bg-3d-wrap {
		opacity: 0 !important;
	}
}

/* Altersabfrage-Intro und Scroll-Rotation respektieren die Systemeinstellung
   "Bewegung reduzieren" - ohne das war jede Animation hier zwingend, es gab
   keinen Ausweg fuer Nutzer mit Vestibular-Empfindlichkeit. */
@media (prefers-reduced-motion: reduce) {
	.b2b-age-gate-content {
		animation: none !important;
	}

	.b2b-age-gate-content {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}

	.b2b-bg-3d-wrap {
		transition: none;
	}
}