/* Dezente Politur oben auf dem Kadence/WooCommerce-Export – Farbpalette unveraendert */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* WordPress-Core-Regel fehlt komplett im statischen Export (nur Kadences eigenes
   Override "border:none;padding-left:0" wurde mitkopiert) - alle 56 Elemente
   mit has-text-align-center standen dadurch linksbuendig statt zentriert,
   u.a. die komplette "Warum heilige Steine?"-Sektion. */
.has-text-align-center {
	text-align: center;
}
.has-text-align-right {
	text-align: right;
}
.has-text-align-left {
	text-align: left;
}

/* Mobiler Hamburger-Button: Kadence-Standardfarbe (#4A5568, blasses Graublau) hat
   auf dem dunklen Lila-Header kaum Kontrast und wirkt wie zufaellige graue Striche
   statt einem erkennbaren Menue-Icon. Auf den Gold-Akzent der Seite umgestellt. */
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:focus {
	color: #c9a84c;
}
.mobile-toggle-open-container .menu-toggle-open:hover,
.mobile-toggle-open-container .menu-toggle-open:focus-visible {
	color: #e8d5a3;
}

/* kadence-global.css setzt "ul{list-style:disc}" nach der WooCommerce-Regel,
   dadurch tauchten Aufzaehlungspunkte vor den Produktkarten im Shop-Grid auf */
ul.products,
ul.products li,
ul.tabs,
ul.tabs li {
	list-style: none;
}

/* .wp-block-column hat "flex: 0 1 auto" (kein grow) - bei kurzen Texten bleibt
   die Karte schmaler als ihre Nachbarn, obwohl jede Spalte ohnehin allein in
   ihrer Zeile steht (Container ist ueberall schmaler als 2 Karten nebeneinander) */
.wp-block-columns.is-layout-flex > .wp-block-column {
	flex: 1 1 100%;
}

h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading,
h4.wp-block-heading {
	letter-spacing: 0.3px;
}

p.wp-block-paragraph {
	line-height: 1.65;
}

/* Produktkarten auf der Startseite (die drei umrandeten wp-block-group-Boxen) */
.wp-block-group[style*="border-color:#4a2060"] {
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wp-block-group[style*="border-color:#4a2060"]:hover {
	transform: translateY(-4px);
	border-color: #c9a84c;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(201, 168, 76, .15);
}

/* Produktbilder: sanfter Zoom + Tiefe statt platter Flaeche */
.wp-block-image img,
figure.wp-block-image img {
	transition: transform .4s ease, box-shadow .4s ease;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.wp-block-group[style*="border-color:#4a2060"]:hover .wp-block-image img {
	transform: scale(1.035);
}

/* Buttons: fuehlbarer Hover statt reinem Farbwechsel */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button {
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	transform: translateY(-2px);
	filter: brightness(1.12);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}

/* Testimonial-Zitate: etwas mehr Tiefe im Kartenlook + dekoratives Anfuehrungszeichen */
.wp-block-quote {
	position: relative;
	overflow: visible;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.wp-block-quote:hover {
	border-color: #e8d5a3;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.wp-block-quote::before {
	content: "\201C";
	position: absolute;
	top: -22px;
	left: 20px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 72px;
	line-height: 1;
	color: #c9a84c;
	opacity: .55;
	pointer-events: none;
}

/* Icon-"Badges" statt nackter Emojis (Warum-heilige-Steine-Icons: 40px,
   Unsere-Werte-Icons: 44px, Team-Icons: 60px - alle teilen dieselben Klassen,
   Groesse skaliert automatisch mit "em" relativ zur jeweiligen font-size) */
p.wp-block-paragraph[style*="font-size:40px"],
p.wp-block-paragraph[style*="font-size:44px"],
p.wp-block-paragraph[style*="font-size:60px"] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	margin: 0 auto 16px auto !important;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #3d1a6e, #1e0a3c 70%);
	border: 1px solid #4a2060;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(201, 168, 76, .12);
	transition: transform .25s ease, border-color .25s ease;
}
.wp-block-group[style*="border-color:#4a2060"]:hover p.wp-block-paragraph[style*="font-size:44px"] {
	transform: scale(1.08);
	border-color: #c9a84c;
}

/* Produktbeschreibung-Tab: Panel hat einen eigenen Hintergrund (wirkt wie ein
   gerahmter Kasten), aber kadence-woocommerce.css gibt ihm nur 1em links/rechts
   und gar kein padding oben/unten - Text klebte an der Kante. Dazu sichtbarer
   Rahmen samt abgerundeten Ecken, damit es wirklich wie eine Karte aussieht. */
.woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 32px !important;
	border-width: 1px;
	border-style: solid;
	border-radius: 8px;
}

/* Hauptnavigation: Unterstreichung waechst beim Hover statt nur Farbwechsel */
#site-navigation .menu-item > a {
	position: relative;
}
#site-navigation .menu-item > a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 2px;
	height: 2px;
	background: #c9a84c;
	transition: left .25s ease, right .25s ease;
}
#site-navigation .menu-item > a:hover::after,
#site-navigation .menu-item.current-menu-item > a::after {
	left: 8%;
	right: 8%;
}

/* Mobiles Ausklapp-Menue (Ersatz fuer Kadences #mobile-drawer, das bei der
   WordPress-zu-statisch-Migration verloren ging - siehe mobile-nav.js, das
   die Links aus #primary-menu hierher kopiert). Nur <=1024px sichtbar, exakt
   die Kadence-Breakpoint-Grenze, an der .site-header-wrap ausgeblendet wird. */
#mobile-nav-panel {
	display: none;
}
#mobile-nav-backdrop {
	display: none;
}
@media (max-width: 1024px) {
	#mobile-nav-panel {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		background: #1e0a3c;
		box-shadow: 0 12px 24px rgba(0, 0, 0, .5);
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
		z-index: 9999;
	}
	#mobile-nav-panel.is-open {
		max-height: 400px;
	}
	/* Dimmt den Rest der Seite, solange das Menue offen ist - sonst schneidet der
	   goldene Panel-Rahmen optisch durch den Seiteninhalt darunter (siehe Marcus'
	   Meldung "Strich dadurch": die Hero-Ueberschrift stand direkt unter der
	   Panel-Kante, ungedimmt sah das wie eine Linie mitten durch den Text aus). */
	#mobile-nav-backdrop {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0);
		pointer-events: none;
		transition: background .3s ease;
		z-index: 9998;
	}
	#mobile-nav-backdrop.is-open {
		background: rgba(0, 0, 0, .55);
		pointer-events: auto;
	}
	#mobile-nav-panel ul {
		list-style: none;
		margin: 0;
		padding: 8px 0;
	}
	#mobile-nav-panel ul li {
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}
	#mobile-nav-panel ul li:last-child {
		border-bottom: none;
	}
	#mobile-nav-panel ul li a {
		display: block;
		padding: 14px 24px;
		color: #e8d5a3 !important;
		text-decoration: none;
		font-size: 16px;
	}
	#mobile-nav-panel ul li a:hover,
	#mobile-nav-panel ul li.current-menu-item a {
		color: #c9a84c !important;
		background: rgba(201, 168, 76, .08);
	}
}