/* Reymont B2B - "Futuristisch": Glassmorphism / Sci-Fi-minimal Aufwertung.
   Additive Schicht ueber dem bestehenden Markenlook (Teal/Gold/Cream,
   Playfair-Display-Ueberschriften) - keine Ersetzung der Marke, sondern ein
   Glas-/Blur-/Glow-Vokabular obendrauf: Header/Footer als frosted glass,
   Produktkarten und Buttons mit weichem Leucht-Akzent, dezente
   Hintergrund-Farbverlaeufe fuer Tiefe. Wird zusaetzlich zu custom.css
   geladen (siehe functions.php) - dadurch leicht wieder entfernbar.
*/

/* --- 3D-Modell-Intro nach Altersbestaetigung: das Modell steht kurz
   prominent/drehend im Vordergrund, bevor es sich zurueck in seine kleine
   Hintergrundposition schiebt (Ablauf per JS in functions.php gesteuert,
   Timing hier auf die dortigen setTimeout-Werte abgestimmt: 1.6s Intro,
   danach 0.9s Rueckschieb-Transition). --- */
.b2b-bg-3d-wrap {
	transition: opacity 0.3s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.b2b-bg-3d-wrap.is-intro {
	opacity: 1 !important;
	/* Rotation ist Teil desselben Transforms wie die Skalierung, dreht sich
	   also sichtbar WAEHREND des Rein-/Rausfliegens (nicht erst danach) -
	   zusaetzlich zur fortlaufenden Modell-eigenen Drehung (auto-rotate,
	   siehe functions.php), die waehrend der ganzen Intro-Phase weiterlaeuft. */
	transform: scale(1.55) rotate(1turn);
	z-index: 10000;
}

@media (prefers-reduced-motion: reduce) {
	.b2b-bg-3d-wrap.is-intro {
		transform: none;
	}
}

:root {
	--glass-bg: rgba(255, 255, 255, 0.6);
	--glass-bg-strong: rgba(255, 255, 255, 0.78);
	--glass-border: rgba(255, 255, 255, 0.55);
	--glass-blur: 18px;
	--glow-teal: rgba(31, 110, 88, 0.28);
	--glow-gold: rgba(217, 164, 65, 0.24);
}

/* Ambiente-Hintergrund fuer Tiefe (Voraussetzung fuer glaubwuerdiges Glas -
   ohne Farbvariation dahinter wirkt Blur nur wie ein grauer Schleier).
   Nur auf Seiten OHNE eigenen 3D-Hintergrund (die Startseite hat den schon). */
body:not(.page-has-3d-bg)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(680px circle at 12% 8%, var(--glow-teal), transparent 60%),
		radial-gradient(560px circle at 92% 18%, var(--glow-gold), transparent 55%),
		radial-gradient(720px circle at 50% 100%, rgba(31, 110, 88, 0.12), transparent 60%);
}

/* --- Header: frosted glass statt voller Deckfarbe --- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	/* Hoeher als der Cookie-Banner (z-index 600, siehe custom.css) noetig -
	   das mobile Menue-Modal liegt als Nachfahre IM Header, und da der Header
	   selbst positioniert ist (eigener Stacking-Context), wird jedes noch so
	   hohe z-index des Modals an der eigenen Stacking-Position des Headers
	   gedeckelt. Ohne diesen Wert hier gewinnt der Cookie-Banner optisch
	   gegen das eigentlich viel hoeher gesetzte Menue. */
	z-index: 650;
	background-color: var(--glass-bg-strong) !important;
	border-bottom-color: rgba(227, 217, 198, 0.6) !important;
}

/* Der Blur sitzt bewusst auf einem Pseudo-Element und nicht direkt auf dem
   Header selbst: "backdrop-filter" erzeugt (wie "transform"/"filter"/
   "will-change: transform") einen neuen Containing Block fuer alle
   "position: fixed"-Nachfahren. Das mobile Menue-Overlay des WP-Navigation-
   Blocks liegt als Nachfahre im Header und ist selbst "position: fixed;
   inset: 0" (soll den ganzen Bildschirm abdecken) - lag der Blur direkt auf
   dem Header, wurde dieses Overlay faelschlich auf die kleine Header-Box
   bezogen statt auf den Viewport und erschien dadurch winzig und an
   Textinhalte verschoben, statt als Vollbild-Menue. */
header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	pointer-events: none;
}

/* --- Footer: gleiche Glas-Sprache, egal ob fixiert (Desktop) oder im
   normalen Fluss (Mobile, siehe custom.css Media Query) --- */
footer.wp-block-template-part {
	background-color: var(--glass-bg) !important;
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	border-top: 1px solid var(--glass-border);
}

/* --- Buttons: weicher Leucht-Schein + Glas-Schimmer beim Hover, oben auf
   dem bestehenden Pill-Style aus theme.json. Wie die Karten/der Ambient-
   Hintergrund bewusst nicht auf der Startseite - dort trifft der Glow sonst
   auf die bestehenden harten Farbgrenzen zwischen den Seitenabschnitten
   (weiss/cream) und sieht dort abgeschnitten statt weich aus. */
body:not(.page-has-3d-bg) .wp-element-button,
body:not(.page-has-3d-bg) .button,
body:not(.page-has-3d-bg) a.button {
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.25s ease;
}

body:not(.page-has-3d-bg) .wp-element-button::before,
body:not(.page-has-3d-bg) .button::before,
body:not(.page-has-3d-bg) a.button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.35), transparent 40%);
	pointer-events: none;
}

body:not(.page-has-3d-bg) .wp-element-button:hover,
body:not(.page-has-3d-bg) .button:hover,
body:not(.page-has-3d-bg) a.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px var(--glow-teal);
}

/* --- Produktkarten im Shop-Raster (nicht die Startseite - die hat ihr
   eigenes 3D-Karussell, siehe custom.css) als Glas-Karten --- */
body:not(.page-has-3d-bg) li.product {
	background: var(--glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body:not(.page-has-3d-bg) li.product:hover {
	box-shadow: 0 16px 34px var(--glow-teal);
	border-color: rgba(31, 110, 88, 0.35);
}

/* --- Startseite: pulsierender Ambient-Glow hinter dem 3D-Modell, statt des
   bisher komplett flachen Cream-Hintergrunds (.b2b-page-backdrop kommt aus
   effects.css, wird hier nur um die Farbverlauf-Ebene erweitert). Sitzt per
   z-index -2 hinter dem 3D-Modell (-1), also nur als atmosphaerischer
   Unterton sichtbar, nicht als Ablenkung. --- */
.b2b-page-backdrop {
	overflow: hidden;
	/* Etwas ueberdimensioniert (statt exakt viewport-gross wie das
	   inset:0 aus effects.css), damit der JS-Parallax-Versatz beim
	   Scrollen (siehe functions.php) keine leeren Raender freilegt.
	   position:fixed bleibt wie in effects.css definiert. */
	inset: -40px;
	will-change: transform;
}

.b2b-page-backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px circle at 20% 15%, var(--glow-teal), transparent 65%),
		radial-gradient(700px circle at 85% 75%, var(--glow-gold), transparent 60%);
	animation: b2b-glow-pulse 9s ease-in-out infinite alternate;
}

@keyframes b2b-glow-pulse {
	from { opacity: 0.55; transform: scale(1); }
	to   { opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	.b2b-page-backdrop::after {
		animation: none;
		opacity: 0.8;
	}
}

/* --- Startseite: Kennzahlen-Reihe (618 Zuege / Mesh Coil / 2,0 ml / CE) als
   Glas-Karten mit Icon statt reinem Text. Die Karten/Icons werden per JS
   (siehe functions.php, b2b_stat_cards) an die bestehenden Spalten
   angehaengt, ohne den Seiteninhalt selbst aendern zu muessen. --- */
.b2b-stat-card {
	background: var(--glass-bg);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	padding: 22px 18px !important;
	text-align: center;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.b2b-stat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px var(--glow-teal);
}

.b2b-stat-card-icon {
	width: 36px;
	height: 36px;
	margin: 0 auto 10px;
	color: #1B6E56;
}

.b2b-stat-card-icon svg {
	width: 100%;
	height: 100%;
}

.b2b-stat-card-icon-mesh svg {
	transform: rotate(90deg);
}

/* --- Startseite: B2B/B2C-Zweispalter als Bento-Kacheln statt Fliesstext-
   Spalten. Die B2B-Kachel ist die "Feature"-Kachel (Hauptzielgruppe), etwas
   praesenter als die Privatkunden-Kachel. Icons/Klassen werden per JS
   (functions.php) ergaenzt, der eigentliche Text bleibt unveraendert. --- */
.b2b-bento-row {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 24px;
}

/* Kacheln nicht als zentrierte, komplett eingefasste Box - jede Kachel
   bricht auf ihrer "eigenen" Seite bis zum echten Bildschirmrand aus (kein
   Hintergrund/Rand mehr sichtbar), auf der gegenueberliegenden Seite bleibt
   sie eingerueckt. B2B links buendig, Privatkunden rechts buendig - jeweils
   nur auf der einen Seite, nicht symmetrisch. Kompakter (weniger breit, mehr
   Innenabstand oben/unten) statt langgezogen. */
/* !important noetig: der wp:columns-Block hat "are-vertically-aligned-center"
   gesetzt, wodurch WP-Core selbst "width: 100%" auf
   ".wp-block-column.is-vertically-aligned-center" schreibt (zwei Klassen,
   also hoehere Spezifitaet als unser einzelnes ".b2b-bento-tile"). Ohne
   !important gewinnt Core und die Kachel wird trotzdem 100% breit -
   bekommt aber weiterhin den fuer 56% berechneten Bleed-Rand (siehe
   margin-left/-right unten), wodurch die Seite horizontal ueber den
   Viewport-Rand hinaus scrollt (z.B. iPad 810px breit: sichtbar u.a. am
   verschobenen Header/Menue beim seitlichen Wischen). */
.b2b-bento-tile {
	width: 56% !important;
}

.b2b-bento-row .b2b-bento-tile:nth-child(1) {
	justify-self: start;
	margin-left: calc( 50% - 50vw );
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: none;
}

.b2b-bento-row .b2b-bento-tile:nth-child(2) {
	justify-self: end;
	margin-right: calc( 50% - 50vw );
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: none;
}

@media (max-width: 780px) {
	/* !important noetig, sonst gewinnt die weiter oben stehende
	   ".b2b-bento-tile { width: 56% !important; }" (Desktop/Tablet-Regel)
	   hier trotz Media Query, weil !important media-query-unabhaengig nur
	   nach Spezifitaet/Reihenfolge entscheidet - ohne das blieben die
	   Kacheln auch auf schmalen Handy-Breiten faelschlich bei 56% statt
	   volle Breite zu stapeln. */
	.b2b-bento-tile {
		width: 100% !important;
	}
	.b2b-bento-row .b2b-bento-tile:nth-child(1),
	.b2b-bento-row .b2b-bento-tile:nth-child(2) {
		margin-left: 0;
		margin-right: 0;
		border-radius: 20px;
		border: 1px solid var(--glass-border);
	}
}

.b2b-bento-tile {
	background: var(--glass-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	padding: 56px 34px !important;
	box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.b2b-bento-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px var(--glow-teal);
}

.b2b-bento-tile-icon {
	width: 40px;
	height: 40px;
	color: #1B6E56;
	margin-bottom: 14px;
}

.b2b-bento-tile-icon svg {
	width: 100%;
	height: 100%;
}

/* --- Privatkunden-Kachel spiegelverkehrt zu B2B: Icon, Text und Button
   rechtsbuendig statt linksbuendig, wirkt wie eine Spiegelung der ersten
   Kachel statt einer reinen Kopie. --- */
/* Text bleibt linksbuendig (normale Lesrichtung) - nur die Box selbst ist
   ueber die Position (rechtsbuendig, siehe .b2b-bento-row weiter unten)
   gespiegelt, nicht der Text darin. */

/* --- Bento-Kacheln fliegen seitlich rein statt nur zu faden (Geschaefts-
   kunden von links, Privatkunden von rechts), gestaffelt ueber
   transition-delay (per JS in functions.php gesetzt). ":not(.is-visible)"
   ist hier noetig: ".b2b-bento-tile.b2b-reveal:nth-child(2)" hat wegen der
   Pseudoklasse eine hoehere Spezifitaet (3 Selektoren) als
   ".b2b-reveal.is-visible" weiter unten (2 Selektoren) - ohne die
   Einschraenkung blieb die zweite (Privatkunden-)Kachel dauerhaft um 36px
   nach rechts verschoben, auch nachdem sie eingeblendet war. Das sorgte
   zusaetzlich fuer horizontales Ueberlaufen der Seite auf Tablet-Breiten
   (>780px), z.B. sichtbar am seitlich verschobenen Header/Menue. */
.b2b-bento-tile.b2b-reveal:not(.is-visible) {
	transform: translateX(-36px);
}

.b2b-bento-tile.b2b-reveal:nth-child(2):not(.is-visible) {
	transform: translateX(36px);
}

/* --- Der umschliessende wp:group-Block dieses Abschnitts bringt eine feste
   background-color aus dem Seiteninhalt mit. Ein zweiter, eigener
   Farbverlauf hier wuerde immer als sichtbare Naht zum fixierten Ambient-
   Hintergrund (.b2b-page-backdrop) auffallen, weil einer beim Scrollen
   mitwandert und der andere (fixed) nicht - beide koennen sich also nie
   dauerhaft decken. Sauberste Loesung: komplett transparent, damit exakt
   derselbe fixierte Verlauf durchscheint wie auf dem Rest der Seite -
   dadurch gibt es nur eine einzige, durchgehende Hintergrundebene statt
   mehrerer aneinandergesetzter "Frames". */
.b2b-bento-section {
	background: transparent !important;
}

/* --- Scroll-Reveal: Elemente faden/schweben beim Reinscrollen sanft ein
   (IntersectionObserver setzt "is-visible", siehe functions.php). --- */
.b2b-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.b2b-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* --- Technische Zahlen (Kennzahlen-Grossziffern, Preise) in Monospace fuer
   einen "Tech-Readout"-Akzent - bewusst kein externer Font-Import (die
   Marke haelt Schriften bislang selbst gehostet/system-basiert aus
   Datenschutzgruenden), stattdessen ein Web-sicherer Monospace-Stack. */
.b2b-stat-card h3,
.woocommerce-Price-amount,
.price {
	font-family: "SF Mono", "Cascadia Code", Consolas, "Roboto Mono", monospace;
	font-variant-numeric: tabular-nums;
}

/* --- Mini-Warenkorb: kurzer Puls, sobald sich die Artikelanzahl aendert
   (Klasse wird per JS in functions.php gesetzt, MutationObserver auf das
   Badge - funktioniert unabhaengig davon, ob klassisches AJAX- oder
   Block-basiertes Hinzufuegen ausgeloest hat). --- */
@keyframes b2b-cart-pulse {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.18); box-shadow: 0 0 0 8px var(--glow-teal); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(31, 110, 88, 0); }
}

.b2b-cart-pulse {
	animation: b2b-cart-pulse 0.5s ease-out;
}

/* --- Reduced-Motion: Hover-Transform/Reveal/Puls deaktivieren, Glow bleibt --- */
@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.button,
	a.button,
	ul.products li.product,
	.b2b-stat-card,
	.b2b-bento-tile {
		transition: none;
	}
	.wp-element-button:hover,
	.button:hover,
	a.button:hover,
	.b2b-stat-card:hover,
	.b2b-bento-tile:hover {
		transform: none;
	}
	.b2b-reveal,
	.b2b-bento-tile.b2b-reveal,
	.b2b-bento-tile.b2b-reveal:nth-child(2) {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.b2b-cart-pulse {
		animation: none;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

/* --- Mobiles Vollbild-Menue: Glas-Look statt reiner weisser Flaeche mit
   drei kleinen Links oben rechts. Logo oben (per CSS-Variable, siehe
   functions.php - der Navigation-Block rendert sein Markup selbst, ein
   <img>-Tag laesst sich da nicht direkt reinschreiben), grosse zentrierte
   Links mit Unterstreich-Effekt, dezente Eintritts-Animation. --- */
.wp-block-navigation__responsive-container.is-menu-open {
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(234, 244, 241, 0.94)) !important;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}

.wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	opacity: 0;
	transform: scale(0.97);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	opacity: 1;
	transform: scale(1);
}

.wp-block-navigation__responsive-container-content::before {
	content: "";
	display: block;
	width: 150px;
	height: 92px;
	background-image: var(--site-logo-url);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 0 56px;
}

.wp-block-navigation__responsive-container-content ul.wp-block-navigation__container {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	font-size: 1.6rem !important;
	font-family: "Playfair Display", Georgia, serif;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	position: relative;
	padding: 6px 4px;
}

.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 2px;
	background: #1B6E56;
	transition: left 0.25s ease, right 0.25s ease;
}

.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover::after,
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus::after {
	left: 0;
	right: 0;
}

.wp-block-navigation__responsive-container-close {
	background: var(--glass-bg-strong);
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
	padding: 10px !important;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container-content {
		transition: none;
		opacity: 1;
		transform: none;
	}
}