/*
 * mw-components.css — moerserwelt.de
 *
 * Eigene, von Avada/Fusion Builder unabhängige Layout-Komponenten.
 * Grund: Avadas Custom-CSS-Feld (Theme Options) entfernt moderne Properties
 * wie display:grid/gap beim Kompilieren — deshalb eigene Datei, geladen über
 * wp-content/mu-plugins/mw-components-css.php.
 *
 * Namenskonvention: Klassen mw-*, CSS-Variablen --mw-*.
 * Cache: Datei-Änderungen werden automatisch erkannt (siehe mu-plugin),
 * kein manuelles Cache-Leeren nötig.
 *
 * Design "Steinmörser" (Ziel 2) — Rollout Runde 1: reiner CSS-Swap (25.07.2026)
 * Site-weites Farbsystem harmonisiert (Gold bleibt exakt der echte Avada-
 * Ton, Sage neu als helle-Fläche+dunkler-Text-Sekundärfarbe nach Golds
 * Bauregel), Ink/Muted etwas wärmer, site-weiter warmer Seitenhintergrund
 * (neu: body-Regel unten), Typografie-Skala leicht großzügiger, neuer
 * mw-lead-band-Baustein. Bewusst NICHT in dieser Runde: AAWP-Styling
 * (unverändert), Glossar-Grid (D7, braucht eigenes Markup-Update),
 * mw-card-Struktur (neuer __body-Wrapper nur additiv, altes h2-Markup
 * bleibt weiter unterstützt -- kein post_content-Edit in dieser Runde).
 * Details/Entscheidungsverlauf: PROJEKT-WISSEN.md, Design-System-Projekt
 * "moerserwelt.de" auf claude.ai (Karten mw-palette-compare/-harmonized).
 *
 * Nachtrag (25.07.2026, gleicher Tag): mw-card-Struktur doch noch in
 * dieser Sitzung migriert -- alle 3 mw-card-grid-Seiten (86/37/209) nutzen
 * jetzt den __body-Wrapper (post_content-Edit, s. u. Kommentar bei
 * .mw-card__body). Die alten .mw-card h2/.mw-card p-Regeln sind seitdem
 * entfernt, kein Objekt nutzt sie mehr.
 *
 * 🔒 Nachtrag (02.08.2026): Alle --mw-*-Farb-/Radius-Tokens unten sowie das
 * komplette AAWP-Styling sind ab jetzt FINAL EINGEFROREN (Vorbereitung
 * Ziel 3 / theme.json-Basis) -- keine weitere gestalterische Iteration
 * geplant. Vollständige Token-Tabelle mit Rollen: PROJEKT-WISSEN.md,
 * Abschnitt "Design-Tokens & AAWP-Look -- final eingefroren". Ausnahme:
 * A11Y1 (3 offene Kontrastverstöße, separater Korrekturschritt).
 */

:root {
	/* Ink/Muted etwas wärmer (Teil der site-weiten Harmonisierung, betrifft
	   auch AAWP-Texte, die diese Variablen bereits nutzten -- Unterschied
	   ist minimal, reine Ton-in-Ton-Anpassung, keine AAWP-Neugestaltung). */
	--mw-accent: #784910;
	--mw-accent-hover: #5f3a0d;
	--mw-gold: #d69e5a;
	--mw-gold-dark: #ab8b65;
	--mw-ink: #2b2320;
	--mw-muted: #6b6157;
	--mw-save: #4b7a3d;
	--mw-save-hover: #3a5f30;
	--mw-card-bg: #ffffff;
	--mw-card-border: #ece4d6;
	--mw-radius: 16px;
	--mw-radius-sm: 10px;
	--mw-tint: #faf1e4;

	/* Site-weiter warmer Seitenhintergrund (neu, 25.07.2026) statt reinem
	   Weiß -- Grundlage für mw-lead-band unten. */
	--mw-bg: #fbf7f1;

	/* Button-Farben 1:1 aus Avadas eigenen Theme-Options übernommen (Avada
	 * Theme Options -> Buttons, per fusion_options ausgelesen, 20.07.2026),
	 * damit AAWP-Buttons genauso aussehen wie die restlichen Avada-Buttons
	 * der Seite: button_gradient_top_color = normale Hintergrundfarbe,
	 * button_accent_color = Textfarbe, button_gradient_bottom_color = Hover-
	 * Hintergrund. Avadas eigene Buttons nutzen exakt diese Kombination
	 * (siehe kompiliertes Avada-CSS: ".fusion-button-default{background:
	 * var(--button_gradient_top_color);color:var(--button_accent_color)}"). */
	--mw-btn-bg: #e8c090;
	--mw-btn-bg-hover: #d69e5a;
	--mw-btn-text: #784910;

	/* Sage — neue Sekundärfarbe (25.07.2026), nach Golds Bauregel
	   konstruiert: helle Fläche + dunkler Text derselben Familie, gleiche
	   Helligkeitsstufen wie Gold, bewusst niedrigere Sättigung (ruhigerer
	   Sekundär-Akzent, klare Hierarchie Primär/Sekundär). Ersetzt --mw-save
	   als Farbe von .mw-btn--secondary (--mw-save bleibt für AAWP-Preis-
	   Chips erhalten, unverändert). */
	--mw-sage-bg: #c3d4b0;
	--mw-sage-bg-hover: #a8bd92;
	--mw-sage-text: #46592f;

	/* Footer-Textfarben (02.08.2026, Design-System-Runde "Header/Footer/
	 * Titelzeile/Content"): der Footer nutzt --mw-ink als Hintergrund --
	 * keiner der obigen Tokens ist für Text-auf-Dunkel gedacht. Zwei helle
	 * Ableitungen ergänzt (nicht frei erfunden, sondern gegen WCAG AA
	 * geprüft: 11,2:1 bzw. 8,4:1 auf --mw-ink, --mw-gold als Hover-Farbe
	 * bleibt unverändert bei 6,5:1). Vorschlag mit hellem Gegenentwurf
	 * vorgelegt und mit dunkler Variante entschieden (Sebastian: "klare
	 * Abgrenzung gegenüber dem Content darüber"). */
	--mw-footer-text: #e4dbcb;
	--mw-footer-muted: #c9beac;
}

/* Site-weiter warmer Seitenhintergrund (25.07.2026, Design "Steinmörser")
   statt reinem Weiß -- betrifft die ganze Seite, nicht nur mw-*-Bausteine.
   Karten/AAWP-Boxen/mw-shop-intro haben eigene, davon unabhängige Flächen
   (--mw-card-bg/--mw-tint), sehen dadurch nicht "falsch" aus, heben sich
   jetzt eher noch klarer vom Hintergrund ab.
   !important nötig (live verifiziert, 25.07.2026, gleicher Fallstrick wie
   bei h1-h6): Avadas eigenes Inline-<style> im <head> setzt body-background
   über den Selektor "html:not(...):not(...) body" (Spezifität 0,0,2,
   höher als unser einfaches "body" mit 0,0,1) und lädt zusätzlich nach
   unserer externen Datei -- ohne !important bleibt die Seite weiß. */
body {
	background: var(--mw-bg) !important;
}

/* ---------------------------------------------------------------------
 * Globale Typografie-Skala (20.07.2026, Design-Sitzung)
 * Avadas eigene h1-h6-Theme-Options (fusion_options) bleiben unverändert
 * in der DB -- wir überschreiben nur die kompilierten Größen hier in
 * mw-components.css, die als letztes Stylesheet lädt. Bewusst KEIN
 * Antasten von Avadas Dynamic-CSS-Cache-Mechanismus nötig (anders als
 * beim zurückgestellten Button-Radius, s. D2) -- reine Kaskaden-
 * Überschreibung, kein Options-Update.
 * Schriftart bleibt Antic Slab (Headlines)/PT Sans (Fließtext), nur
 * Größen/Zeilenhöhe/Abstände. Grund: H2 war bisher nur 20px, kaum größer
 * als der 14px-Fließtext -- wirkte neben dem größeren mw-hero__title
 * (40px) unausgewogen (Sebastian, 20.07.2026).
 * ------------------------------------------------------------------- */

/* !important nötig (20.07.2026, gefunden nachdem Sebastian meldete: "keine
 * Veränderung"): Avada liefert seine eigene h1-h6-Typografie als Inline-
 * <style id="fusion-stylesheet-inline-css"> im <head>, der NACH unserer
 * externen mw-components.css lädt. Avadas Regel endet auf denselben
 * simplen Element-Selektor (u. a. "...,.search-page-search-form h1,h1{...}")
 * -- bei identischer Spezifität (0,0,1) gewinnt bei Gleichstand die später
 * geladene Regel, also Avadas Original-Wert, nicht unserer. Ohne
 * !important hätte die Datei zwar die richtigen Werte enthalten, aber nie
 * sichtbar gewirkt. */
/* 42→48px, 30→32px (25.07.2026, Design "Steinmörser"): etwas großzügigere
   Skala für einen hochwertigeren, redaktionelleren Eindruck -- Mobil-Werte
   unten proportional mitskaliert. */
h1 {
	font-size: 48px !important;
	line-height: 1.12 !important;
}

h2 {
	font-size: 32px !important;
	line-height: 1.2 !important;
	margin-top: 1.1em !important;
}

h3 {
	font-size: 22px !important;
	line-height: 1.3 !important;
}

h4 {
	font-size: 18px !important;
}

/* H6-Farbe (#4e931c, Grün) war ein nie erklärter Ausreißer gegenüber
 * H1-H5 (#333333) -- auf die normale Textfarbe neutralisiert. */
h6 {
	color: var(--mw-ink) !important;
}

@media (max-width: 700px) {
	h1 {
		font-size: 38px !important;
	}

	h2 {
		font-size: 26px !important;
	}
}

/* ---------------------------------------------------------------------
 * mw-eyebrow / mw-tag — neue kleine UI-Atome (25.07.2026, Design
 * "Steinmörser"). Eyebrow: Sektions-Kicker (z. B. über Hero-Titeln,
 * bisher ungenutzt, inert bis auf Seiten eingesetzt). Tag: kleine
 * Kategorie-/Themen-Marker, gleiches helle-Fläche+dunkler-Text-Prinzip
 * wie die Buttons.
 * ------------------------------------------------------------------- */

.mw-eyebrow {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--mw-muted);
	margin: 0 0 10px;
}

.mw-tag {
	display: inline-block;
	background: var(--mw-sage-bg);
	color: var(--mw-sage-text);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 11px;
	border-radius: 999px;
}

/* ---------------------------------------------------------------------
 * mw-lead-band — neuer Standard-Intro-Baustein direkt nach dem Hero
 * (25.07.2026, ersetzt mw-intro als Standardfall -- mw-intro selbst
 * bleibt unten unverändert bestehen für evtl. noch vorhandene Einsätze).
 * Bewusst KEIN Rahmen/Radius/Schatten -- kein "Kasten"-Charakter, nur ein
 * leiser Verlauf --mw-bg → --mw-tint → --mw-bg, der im site-weiten warmen
 * Hintergrund aufgeht. Aufrecht, kein Pflicht-Icon, beliebige Textlänge.
 *
 * ⚠️ Bug gefunden + gefixt (25.07.2026, live auf Page 183 entdeckt): Die
 * ursprüngliche Design-System-Vorschau nutzte "margin: 0 -20px", um die
 * Fläche breiter als den Text wirken zu lassen -- das ging von einer
 * angenommenen 20px-Innenpolsterung des umgebenden Containers aus. Auf der
 * echten Avada-Seite stimmt diese Annahme nicht, die Fläche ragte dadurch
 * unkontrolliert breiter heraus als Hero/Überschrift ("sieht doof aus").
 * Kein negativer Rand mehr -- die Fläche ist jetzt exakt so breit wie der
 * Rest des Contents, das reicht für den "kein Kasten"-Effekt völlig aus,
 * da die ganze Seite ohnehin schon den warmen Hintergrund hat. */
.mw-lead-band {
	background: linear-gradient(180deg, var(--mw-bg) 0%, var(--mw-tint) 18%, var(--mw-tint) 82%, var(--mw-bg) 100%);
	padding: 40px 20px;
}
/* max-width-Verlauf (25.07.2026, live auf Page 183 gefunden): 640px
   (Ausgangswert, gegen die 980px-Design-System-Vorschau kalibriert, viel
   zu eng auf der echten ~1122px-Seite) → 780px (korrekt angekommen, aber
   immer noch zu schmal) → 90%/1000px (deutlich breiter) → jetzt 95%/1080px
   (Sebastian: Seitenabstand nochmal halbieren). width:% statt fester
   Pixelwert, damit es mit der tatsächlichen Content-Breite mitskaliert. */
.mw-lead-band p {
	width: 95%;
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
	font-size: 19px;
	line-height: 1.65;
	color: var(--mw-ink);
}
.mw-lead-band strong {
	color: var(--mw-accent);
}

/* ---------------------------------------------------------------------
 * AAWP-Produktboxen: Layout-Klassen des Plugins (aawp-*), nur Farben/
 * Abstände/Formen überschrieben — keine neue Markup-Struktur nötig,
 * AAWP liefert das HTML bereits selbst.
 * ------------------------------------------------------------------- */

.aawp-product {
	position: relative;
	background: var(--mw-card-bg);
	border: 1px solid var(--mw-card-border);
	border-radius: var(--mw-radius);
	box-shadow: 0 2px 10px rgba(40, 30, 10, 0.06);
	padding: 24px !important;
	overflow: hidden;
	transition: box-shadow 0.2s, transform 0.2s;
}

/* Hover-Lift: leichtes Anheben der Karte, dezenter größerer Schatten. */
.aawp-product:hover {
	box-shadow: 0 8px 24px rgba(40, 30, 10, 0.12);
	transform: translateY(-2px);
}

.aawp-product--horizontal {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
}

.aawp-product--horizontal .aawp-product__thumb {
	float: none;
	width: 200px;
	flex: none;
}

.aawp-product--horizontal .aawp-product__content {
	float: none;
	width: auto;
	flex: 1 1 320px;
	padding-left: 0;
}

.aawp-product--horizontal .aawp-product__footer {
	float: none;
	width: 100%;
	clear: both;
}

/* Bug (gefunden 20.07.2026, Post 58 "Mörser - Das Material"): AAWPs eigenes
 * main.css setzt ".aawp .aawp-product--horizontal .aawp-product__footer"
 * (Spezifität 0,3,0, schlägt unsere obige Regel mit 0,2,0) auf
 * "margin-left: 160px; padding-left: 20px" — gedacht für AAWPs eigenes
 * Float-basiertes Horizontal-Layout, wo der Footer neben dem gefloateten
 * Thumbnail eingerückt werden muss. In unserem Flex-Layout (width:100%)
 * führt der zusätzliche margin-left dazu, dass der Footer (und damit der
 * Kauf-Button) 160px über den rechten Kartenrand hinausragt und durch
 * ".aawp-product { overflow: hidden }" komplett unsichtbar abgeschnitten
 * wird — der Button existiert im HTML, ist aber nie zu sehen. Fix: Klasse
 * wiederholt, um AAWPs Spezifität zu schlagen (gleiches Muster wie beim
 * Kauf-Button-Fix weiter unten), margin/padding auf 0 zurückgesetzt. */
.aawp .aawp-product--horizontal .aawp-product__footer.aawp-product__footer {
	margin-left: 0;
	padding-left: 0;
}

/* Bestseller/Neu: Pill-Badge im normalen Textfluss (position:static),
 * schiebt Titel/Bild automatisch nach unten statt sie zu überdecken —
 * mehrere gleichzeitige Pills stapeln sich von selbst nebeneinander/
 * untereinander (siehe Bug-Historie in PROJEKT-WISSEN.md). "--new-releases"
 * ist der tatsächliche PHP-Output in AAWP 5.0.9, "--new" bleibt als
 * Rückfallebene für ältere/abweichende Aufrufe erhalten. */
.aawp-product__ribbon--bestseller,
.aawp-product__ribbon--new,
.aawp-product__ribbon--new-releases {
	position: static !important;
	display: inline-block;
	background: var(--mw-gold) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 4px 14px !important;
	margin: 0 6px 8px 0 !important;
	font-weight: 700;
	font-size: 11px !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Sale/Angebot: bewusst andere Machart als der Bestseller-Pill — Eck-Banner
 * oben rechts auf der Karte (.aawp-product ist der position:relative-Anker
 * oben). Dadurch bleiben Bestseller-Pill und Sale-Banner klar unterscheidbar
 * und überlappen sich nicht, selbst wenn beide gleichzeitig aktiv sind. */
.aawp-product__ribbon--sale {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	margin: 0 !important;
	background: var(--mw-save) !important;
	color: #fff !important;
	border-radius: 0 var(--mw-radius) 0 10px !important;
	padding: 6px 16px !important;
	font-weight: 700;
	font-size: 11px !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	z-index: 2;
}

.aawp-product__image {
	border-radius: calc(var(--mw-radius) - 4px);
}

.aawp-product__title {
	color: var(--mw-ink);
	font-weight: 700;
}

.aawp-product__title:hover {
	color: var(--mw-accent);
}

.aawp-product__price--current {
	color: var(--mw-accent);
	font-size: 20px;
}

.aawp-product__price--old {
	color: var(--mw-muted);
}

.aawp-product__price--saved {
	background: var(--mw-save);
	color: #fff;
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 13px;
	font-weight: 700;
}

/* Spezifitäts-Hinweis (verifiziert 19.07.2026): AAWPs eigenes main.css
 * definiert u. a. ".aawp .aawp-button.aawp-button--amazon" mit
 * "color/border-color !important" (Spezifität 0,3,0) — live auf moerserwelt
 * bestätigt als tatsächlich gerenderte Button-Klassenkombination
 * ("aawp-button aawp-button--buy aawp-button--amazon rounded ..."). Da
 * mw-components.css im HTML VOR aawp-css lädt, verliert eine gleich hohe
 * Spezifität automatisch den Tie-Break an AAWP. Deshalb hier absichtlich
 * per wiederholter Klasse künstlich höhere Spezifität (0,4,0) erzeugen —
 * funktioniert unabhängig vom konkret konfigurierten button_style. */
.aawp .aawp-button--buy.aawp-button--buy.aawp-button--buy {
	border-radius: 999px !important;
	padding: 10px 22px !important;
	font-weight: 700 !important;
	background: var(--mw-btn-bg) !important;
	background-image: none !important;
	border-color: var(--mw-btn-text) !important;
	color: var(--mw-btn-text) !important;
}

.aawp .aawp-button--buy.aawp-button--buy.aawp-button--buy:hover,
.aawp .aawp-button--buy.aawp-button--buy.aawp-button--buy:focus,
.aawp .aawp-button--buy.aawp-button--buy.aawp-button--buy:active {
	background: var(--mw-btn-bg-hover) !important;
	background-image: none !important;
	border-color: var(--mw-btn-text) !important;
	color: var(--mw-btn-text) !important;
}

/* AAWP blendet je nach button_style ein Icon per ::before ein (z. B.
 * Warenkorb-Symbol bei "aawp-button--icon-black") — passt nicht zum
 * cleanen Avada-Button-Look, deshalb ausgeblendet statt nur überlagert. */
.aawp .aawp-button--icon:before,
.aawp-button--icon:before {
	display: none !important;
	content: none !important;
	background-image: none !important;
	width: 0 !important;
}

/* Vergleichstabelle ([amazon table="..."]) */
.aawp-table {
	border: 1px solid var(--mw-card-border);
	border-radius: var(--mw-radius);
	overflow: hidden;
	font-size: 15px;
}

.aawp-table th {
	background: #f7f0e3;
	color: var(--mw-ink);
	border-bottom: none !important;
	padding: 14px 10px !important;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.aawp-table td {
	border-bottom: 1px solid var(--mw-card-border) !important;
	padding: 16px 10px !important;
}

.aawp-table tr:last-child td {
	border-bottom: none !important;
}

.aawp-table tbody tr:hover td {
	background: #faf6ec;
}

/* Table-Builder-Vergleichstabellen ([amazon table="ID"], eigener Post-Type
 * aawp_table) — andere Markup-Struktur als .aawp-table (display:table statt
 * <table>), daher eigener Block. */
.aawp-tb--desktop,
.aawp-tb--mobile {
	border: 1px solid var(--mw-card-border);
	border-radius: var(--mw-radius);
	overflow: hidden;
	background: var(--mw-card-bg);
}

.aawp-tb__head {
	background: #f7f0e3 !important;
	color: var(--mw-ink);
	font-size: 12px !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-color: var(--mw-card-border) !important;
}

.aawp-tb__data {
	border-color: var(--mw-card-border) !important;
	padding: 16px !important;
}

/* Wichtig: .aawp-tb__row--highlight markiert eine ganze Attribut-ZEILE als
 * hervorgehoben (z. B. „Preis" für alle Produkte) — .aawp-tb__data--highlight
 * dagegen die SPALTE des Bestseller-Produkts über alle Zeilen. Beides sind
 * unterschiedliche Dinge, nicht verwechseln (war hier zuerst vertauscht:
 * Zeilen-Hintergrund machte die Preise anderer Produkte kaum lesbar). */
.aawp-tb__data--highlight {
	background: #fbf6ec;
}

.aawp-tb__row--highlight .aawp-product__price {
	font-weight: 700;
}

.aawp-tb-ribbon {
	position: static !important;
	display: inline-block;
	background: var(--mw-gold) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 3px 12px !important;
	margin-bottom: 8px !important;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.aawp-tb__product {
	border: 1px solid var(--mw-card-border) !important;
	border-radius: var(--mw-radius);
	overflow: hidden;
}

/* Produkt-Grid ([amazon ... grid="2|3"]) — moderne CSS-Grid statt
 * AAWP-Standard-Flex mit negativen Margins. */
/* !important auf display/grid-template-columns nötig: AAWPs eigenes
 * main.css definiert ".aawp-grid{display:flex;flex-flow:row wrap;...}"
 * mit derselben Spezifität (0,1,0) und lädt im HTML NACH mw-components.css
 * -- gewinnt bei Gleichstand automatisch die Kaskade. Ohne !important bleibt
 * der Container also flex+wrap, unser width:auto auf .aawp-grid__item lässt
 * die Boxen dann bei zu wenig Platz (z. B. 3/4-Spalte neben Sidebar) auf
 * 2+1 statt 3-in-einer-Reihe umbrechen (live beobachtet, 20.07.2026). */
.aawp-grid {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 24px;
	margin: 0 !important;
}

/* minmax(0, 1fr) statt reinem 1fr (20.07.2026, zweiter Fix zum selben Bug):
 * eine reine 1fr-Spur hat eine implizite min-width:auto -- sie schrumpft
 * nicht unter die Content-Mindestbreite (Bild+Padding der .aawp-product-Box)
 * und lässt das Grid dann über den Container hinaus in die Sidebar laufen
 * (Sebastian, 20.07.2026: "läuft in die Sidebar über"). minmax(0, 1fr)
 * erlaubt echtes Schrumpfen auf die verfügbare Breite. */
.aawp-grid--col-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.aawp-grid--col-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.aawp-grid__item {
	width: auto !important;
	margin: 0 !important;
}

@media (max-width: 700px) {
	/* !important nötig (20.07.2026): die Basis-Regeln oben tragen seit dem
	 * Sidebar-Überlauf-Fix selbst !important -- eine nicht-!important-Regel
	 * gewinnt dagegen NIE, auch nicht in einer späteren Media Query
	 * (!important schlägt Quellreihenfolge). Ohne dieses !important blieb
	 * das Grid mobil bei 3 Spalten stehen (Sebastian, 20.07.2026: "bricht
	 * mobil gar nicht um"). */
	.aawp-grid--col-2,
	.aawp-grid--col-3 {
		grid-template-columns: 1fr !important;
	}

	.aawp-product--horizontal .aawp-product__thumb {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------
 * Eyebrow-Label + Disclaimer-Footer
 * Struktur/Idee aus dem AAWP-Referenzdesign von gemuese-balkon.de
 * übernommen (Sebastian, 19.07.2026), auf mw-Farben/-Namespace übersetzt.
 * Kein Inter-Font übernommen — moerserwelt läuft auf PT Sans (Theme-Default,
 * hier bewusst nicht überschrieben, damit es sich in den Rest der Seite
 * einfügt). Eyebrow-Text 1:1 wie von Sebastian bestätigt übernommen.
 * ------------------------------------------------------------------- */

.aawp::before {
	content: "Meine Empfehlung für dich:";
	display: block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--mw-accent);
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mw-card-border);
}

/* Achtung: Der Disclaimer-Text ("Letzte Aktualisierung am ...") liegt in
 * AAWP 5.0.9 tatsächlich unter der Klasse .aawp-disclaimer — NICHT unter
 * .aawp__footer (das existiert im Plugin gar nicht) und auch nicht unter
 * .aawp-product__footer (das ist der Preis-/Button-Wrapper einer einzelnen
 * Produktbox, siehe weiter oben). Live auf moerserwelt verifiziert. */
.aawp-disclaimer {
	font-size: 11px;
	color: var(--mw-muted);
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--mw-card-border);
}

/* ---------------------------------------------------------------------
 * mw-tile-grid — Text-Kachel-Raster ohne Bild (Überschrift + Text + Link)
 * Erster Einsatz: Page 209 (Gewürzmischungen), 4 Blöcke in 2 Spalten.
 * Entspricht 1:1 der bisherigen Fusion-Column-Anordnung (kein Card-Rahmen/
 * -Schatten im Original — daher hier bewusst ebenfalls ohne Card-Chrome,
 * reine Struktur-Migration, kein Redesign). Wiederverwendbar für ähnliche
 * Raster (z. B. Gewürz-Glossar, Homepage-Teaser) — dort ggf. mit mehr
 * Spalten bzw. Bild-Variante ergänzen, nicht neu erfinden.
 * ------------------------------------------------------------------- */

.mw-tile-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin: 20px 0;
}

.mw-tile h2 {
	text-align: center;
}

/* Additive Erweiterung (25.07.2026, Design "Steinmörser"): nummerierter
   Kreis + h3-Variante, für Kacheln mit längerem Text linksbündig statt
   zentriert. Ersetzt .mw-tile h2 NICHT -- beide Varianten funktionieren
   parallel, je nachdem welches Markup eine Seite nutzt. Inert bis genutzt. */
.mw-tile__num {
	display: inline-block;
	font-weight: 700;
	font-size: 14px;
	color: var(--mw-accent);
	border: 1.5px solid var(--mw-accent);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	line-height: 27px;
	text-align: center;
	margin-bottom: 12px;
}
.mw-tile h3 {
	font-size: 19px;
	margin: 0 0 8px;
}
.mw-tile p {
	color: var(--mw-muted);
}

@media (max-width: 700px) {
	.mw-tile-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * mw-card-grid — 2x2-Karten-Teaser (Bild + Überschrift + Text + "[mehr]"-Link)
 * Erster Einsatz: Startseite (Page 86), 4 Karten. Entspricht optisch dem
 * Original (fusion_imageframe style_type="dropshadow" hover_type="liftup")
 * — Schatten + Lift-up-Hover auf dem Bild nachgebaut, keine neue Optik.
 * Bild in eigenem .mw-card__image-wrap-Div (wpautop-Falle vermeiden,
 * siehe Claude.md Punkt D2: <img> nie direkt neben <div>).
 * ------------------------------------------------------------------- */

/* auto-fit statt fester Spaltenzahl (20.07.2026 korrigiert): war fest auf
 * repeat(2, 1fr) verdrahtet, passend zum ursprünglichen 4-Karten-2x2-Raster.
 * Seit der Startseiten-Überarbeitung stehen hier nur noch 3 Karten -- bei
 * fester 2-Spalten-Regel bricht das auf 2+1 um. auto-fit füllt die
 * verfügbare Breite automatisch mit so vielen Spalten wie bei mind. 230px
 * pro Karte passen, ohne die Spaltenzahl pro Einsatzort hart zu codieren. */
.mw-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 30px;
	margin: 20px 0;
}

/* Karten-Optik (20.07.2026, Design-Sitzung, angelehnt ans Copilot-Mockup):
 * dieselbe Sprache wie .aawp-product (weiß, Rahmen, Radius, dezenter
 * Schatten, Hover-Lift auf der GANZEN Karte statt nur am Bild) --
 * Wiedererkennung statt eigener Extra-Stil. Vorher: nur zentrierter Text
 * ohne Karten-Charakter (reine 1:1-Struktur-Migration ohne Optik). */
/* display:flex + margin-top:auto auf dem letzten <p> (enthält den Button):
 * drückt den Button an den unteren Kartenrand, unabhängig davon, wie viel
 * Text darüber steht -- CSS-Grid-Zeilen strecken alle .mw-card ohnehin auf
 * gleiche Höhe (Grid-Default align-items:stretch), so stehen alle Buttons
 * einer Reihe auf gleicher Höhe (Sebastian, 20.07.2026: "auf unterschiedlicher
 * Höhe" bemängelt). */
.mw-card {
	display: flex;
	flex-direction: column;
	text-align: center;
	background: var(--mw-card-bg);
	border: 1px solid var(--mw-card-border);
	border-radius: var(--mw-radius);
	box-shadow: 0 2px 10px rgba(40, 30, 10, 0.06);
	overflow: hidden;
	padding-bottom: 24px;
	transition: box-shadow 0.2s, transform 0.2s;
}

.mw-card p:last-child {
	margin-top: auto;
}

.mw-card:hover {
	box-shadow: 0 8px 24px rgba(40, 30, 10, 0.12);
	transform: translateY(-2px);
}

.mw-card__image-wrap {
	margin: 0 0 16px;
}

/* Bild sitzt jetzt randständig oben in der Karte (kein eigener Radius/
 * Schatten mehr am Bild -- das übernimmt die Karte selbst über
 * overflow:hidden + border-radius, klippt automatisch mit). */
/* aspect-ratio + object-fit (21.07.2026, ergänzt für Page 37): Erste Karten
 * (Startseite) nutzten durchgehend manuell auf 16:9 vorbeschnittene Fotos,
 * daher bisher kein erzwungenes Seitenverhältnis nötig. Sobald Karten
 * bestehende Seiten-Thumbnails unterschiedlicher Formate wiederverwenden
 * (z. B. Page 37), sorgt das hier für eine einheitliche Bildhöhe in der
 * Reihe, unabhängig vom Quellformat -- ändert nichts an bereits 16:9-
 * beschnittenen Bildern (Startseite bleibt visuell identisch). */
.mw-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
}

/* mw-card__body-Wrapper (25.07.2026 eingeführt, 25.07.2026 zum alleinigen
   Markup migriert) -- Titel als h3 statt h2, eigener Wrapper-Div für
   Text/Button. Das frühere h2/p-Direktkind-Markup (ohne eigenen Wrapper,
   Titel als h2) wurde auf allen 3 damaligen mw-card-grid-Seiten (Startseite
   86, Gewürzwelt 37, Gewürzmischungen 209) durch dieses Markup ersetzt --
   keine Seite nutzt die alte Variante mehr, die zwischenzeitlich parallel
   unterstützten .mw-card h2/.mw-card p-Regeln wurden deshalb entfernt. */
.mw-card__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.mw-card__body h3 {
	margin: 10px 0 8px;
}
.mw-card__body p {
	color: var(--mw-muted);
	font-size: 15px;
	margin: 0 0 14px;
	padding: 0;
}
.mw-card__body > *:last-child {
	margin-top: auto;
}

@media (max-width: 700px) {
	.mw-card-grid {
		grid-template-columns: 1fr;
	}
}

/* Modifier für Reihen mit viel Fließtext pro Karte (21.07.2026, Sebastian:
 * "Currys und Masalas" hatte bei 4 Karten nebeneinander zu wenig Breite
 * für den Text). Bewusst als Modifier statt Änderung an .mw-card-grid
 * selbst -- die Startseite (3 Karten, kurzer Text) bleibt dadurch beim
 * bisherigen auto-fit-Verhalten, nur Page 209 (4 Karten) erzwingt 2x2.
 * Erster Einsatz: Page 209 "Gewürzmischungen". */
.mw-card-grid--2col {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 700px) {
	.mw-card-grid--2col {
		grid-template-columns: 1fr;
	}
}

/* Additiv (03.08.2026, Blog-Archiv-Template): Meta-Zeile (Datum) unter dem
   Exzerpt einer .mw-card -- keine Änderung an .mw-card/.mw-card__body
   selbst, nur ein neues optionales Kind. Nutzt automatisch die schon
   bestehende ".mw-card__body > *:last-child{margin-top:auto}"-Regel, sitzt
   dadurch bündig am Kartenboden, genau wie bisher der Button. */
.mw-card__meta {
	font-size: 12px;
	color: var(--mw-muted);
}

/* ---------------------------------------------------------------------
 * mw-pagination — nummerierte Seiten-Navigation für Archive/Listen
 * (03.08.2026, erster Einsatz: Blog-Archiv-Template). Gleiche Pillen-
 * Sprache wie mw-btn/mw-jump-nav (helle Fläche + dunkler Text für den
 * aktiven Zustand), keine neue Farbe erfunden.
 * ------------------------------------------------------------------- */
.mw-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	flex-wrap: wrap;
}
.mw-pagination li {
	margin: 0;
}
.mw-pagination a,
.mw-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	color: var(--mw-ink);
}
.mw-pagination a:hover {
	background: var(--mw-tint);
	color: var(--mw-accent);
}
.mw-pagination .current {
	background: var(--mw-btn-bg);
	color: var(--mw-btn-text);
	font-weight: 700;
}
.mw-pagination .dots {
	color: var(--mw-muted);
}

/* ---------------------------------------------------------------------
 * mw-glossary-grid — 4-spaltiges Kachel-Glossar (Bild + Überschrift + Text)
 * Erster Einsatz: Gewürz-Glossar (Page 183), 26 Einträge.
 *
 * ÜBERARBEITET (25.07.2026, Design "Steinmörser", löst D7). Vorher: reine
 * Struktur-Migration ohne eigene Optik (zentrierter Text, planes Bild,
 * Blocksatz -- Blocksatz erzeugte bei 4 engen Spalten unruhige Wort-
 * abstände, Sebastians Hauptkritikpunkt). Jetzt: getönte Zelle (kein
 * Rahmen/Schatten), randständiges Bild (3:2) über volle Zellenbreite,
 * linksbündiger Text.
 *
 * ⚠️ Bewusst REINE CSS-Umstellung, KEIN post_content-Edit auf Page 183:
 * Das bestehende Markup pro Eintrag ist historisch <h3>, dann
 * .mw-glossary__image-wrap, dann <p> (Titel VOR dem Bild). Die neue
 * Bild-oben-Optik wird per display:flex + order auf den drei direkten
 * Kindern erreicht -- die DOM-Reihenfolge bleibt unangetastet, nur die
 * visuelle Reihenfolge ändert sich. Der Eintrag "Majoran" hat laut Live-
 * Content gar kein Bild (bekannte Lücke, Backlog C6) -- dafür sorgt
 * :not(:has(...)) automatisch für den fehlenden oberen Bild-Abstand,
 * ebenfalls ohne Markup-Änderung.
 * ------------------------------------------------------------------- */

.mw-glossary-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 20px 0;
}

.mw-glossary-item {
	display: flex;
	flex-direction: column;
	background: var(--mw-tint);
	border-radius: var(--mw-radius-sm);
	overflow: hidden;
}

/* !important nötig -- die globale h3-Regel weiter oben trägt selbst
   !important (Avada-Ladereihenfolge-Fix), sonst würde sie trotz höherer
   Spezifität hier gewinnen. */
.mw-glossary-item h3 {
	order: 2;
	text-align: left;
	font-size: 15px !important;
	margin: 10px 16px 6px;
}

.mw-glossary-item:not(:has(.mw-glossary__image-wrap)) h3 {
	margin-top: 18px;
}

.mw-glossary__image-wrap {
	order: 1;
	margin: 0;
	line-height: 0;
}

.mw-glossary__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
}

.mw-glossary-item p {
	order: 3;
	text-align: left;
	font-size: 13px;
	color: var(--mw-muted);
	margin: 0 16px 16px;
	line-height: 1.45;
}

@media (max-width: 900px) {
	.mw-glossary-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	.mw-glossary-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * mw-btn / mw-btn-list — dezente Link-Buttons für interne Verlinkungen
 * Erster Einsatz: Page 13 ("Der Mörser"). Nutzt dieselben Button-Farben
 * wie die AAWP-Kauf-Buttons (--mw-btn-bg/--mw-btn-bg-hover/--mw-btn-text,
 * 1:1 aus Avadas eigenen Theme-Options übernommen) — keine neue Farbe
 * erfunden, fügt sich in den Rest der Seite ein.
 * ------------------------------------------------------------------- */

.mw-btn-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0;
	margin: 16px 0;
}

.mw-btn-list li {
	margin: 0;
}

.mw-btn {
	display: inline-block;
	background: var(--mw-btn-bg);
	color: var(--mw-btn-text);
	padding: 10px 20px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease;
}

.mw-btn:hover {
	background: var(--mw-btn-bg-hover);
	color: var(--mw-btn-text);
}

/* Sekundär-Variante — Sage statt Save-Grün (25.07.2026, Design "Steinmörser").
 * Vorher: dunkle Fläche + weißer Text (inkonsistent mit dem primären
 * .mw-btn, das schon immer hell+dunkler Text war). Jetzt: gleiches Prinzip
 * wie Gold -- helle Fläche + dunkler Text, nur andere Farbfamilie/niedrigere
 * Sättigung als ruhigerer Sekundär-Akzent. */
.mw-btn--secondary {
	background: var(--mw-sage-bg);
	color: var(--mw-sage-text);
}

.mw-btn--secondary:hover {
	background: var(--mw-sage-bg-hover);
	color: var(--mw-sage-text);
}

/* ---------------------------------------------------------------------
 * mw-shop-intro — Willkommens-Box für Shop-artige Seiten
 * Vorbild: gemuese-balkon.de/shop (".gb-shop-intro", von Sebastian
 * ausdrücklich als gewünschtes Vorbild genannt) — reine Struktur/Optik
 * übernommen (Rahmen + Radius + Tönung), Farben komplett auf Mörserwelt
 * umgestellt (--mw-gold statt gb-Grün, keine gb-Farben übernommen).
 * ------------------------------------------------------------------- */

.mw-shop-intro {
	border: 2px solid var(--mw-gold);
	border-radius: 16px;
	background: var(--mw-tint);
	padding: 24px 28px;
	margin-bottom: 40px;
}

.mw-shop-intro h2 {
	margin-top: 0 !important;
}

.mw-shop-intro p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * mw-intro — zentrierter Einleitungstext mit dezentem Hintergrund
 * War im ursprünglichen Copilot-Mockup so vorgesehen ("Einleitung ...
 * zentriert, mit leichtem Hintergrund"), bisher nie umgesetzt -- der Text
 * stand bisher als reiner, ungestalteter Fließtext direkt unter dem Hero
 * (Sebastian, 20.07.2026: "passt gar nicht zum Rest der Seite"). Gleiche
 * Tönung wie .mw-shop-intro, aber ohne Rahmen und mit größerer, zentrierter
 * Schrift -- liest sich als "Lead-Absatz", nicht als Box/Kasten.
 * Erster Einsatz: Startseite (Page 86), direkt unter dem Hero.
 * ------------------------------------------------------------------- */

.mw-intro {
	background: var(--mw-tint);
	border-radius: var(--mw-radius);
	padding: 32px 40px;
	margin: 0 0 30px;
	text-align: center;
}

.mw-intro p {
	font-size: 18px;
	line-height: 1.6;
	color: var(--mw-ink);
	margin: 0 0 12px;
}

.mw-intro p:last-child {
	margin-bottom: 0;
}

.mw-intro strong {
	color: var(--mw-accent);
}

@media (max-width: 700px) {
	.mw-intro {
		padding: 24px;
	}

	.mw-intro p {
		font-size: 16px;
	}
}

/* Generisches 3-Spalten-Raster, um mehrere unabhängige AAWP-Shortcodes
 * nebeneinander anzuordnen (nicht zu verwechseln mit aawp-grid--col-3,
 * das INNERHALB eines einzelnen AAWP-Shortcodes mehrere Produkte anordnet). */
.mw-cols-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 20px 0;
}

@media (max-width: 700px) {
	.mw-cols-3 {
		grid-template-columns: 1fr;
	}
}

/* Beitragsbild auf dem Shop (Page 930) bewusst ausblenden (nicht entfernen
 * — Attachment/SEO-Bindung bleibt erhalten, siehe PROJEKT-WISSEN.md).
 * Gezielt nur imageframe-2 (= das dynamische Beitragsbild aus Section 1169),
 * NICHT .fusion-image-element generell, da diese Klasse auch das Logo im
 * Header (imageframe-1) trägt. Shop hat keinen mw-hero (nutzt mw-shop-intro
 * als Anker stattdessen), daher weiterhin eigene page-id-Regel nötig. */
body.page-id-930 .fusion-image-element:has(.imageframe-2) {
	display: none;
}

/* ⚠️ Generalisiert (21.07.2026, nachdem bei Page 37 vergessen wurde, die
 * seiten-spezifische Regel zu ergänzen -- Sebastian meldete "Foto oben ist
 * zweimal vorhanden"): Statt für jede neue mw-hero-Page eine eigene
 * body.page-id-*-Regel zu pflegen (Fehlerquelle, siehe Page 37), greift
 * dieser Selektor automatisch auf JEDER Page/Startseite mit mw-hero --
 * Section 1169 zeigt sonst das dynamisch gebundene Beitragsbild (imageframe-2)
 * ein zweites Mal, obwohl der Hero dasselbe Motiv schon explizit im eigenen
 * post_content zeigt. Ersetzt die vorherigen Einzel-Regeln für Page 86 + 13. */
body:has(.mw-hero) .fusion-image-element:has(.imageframe-2) {
	display: none;
}

/* ---------------------------------------------------------------------
 * Sidebar-CSS-Sonderregeln für Startseite/Der Mörser/Shop (20.07.2026)
 * ENTFERNT (20.07.2026, noch am selben Tag): Sebastian hat in Avadas
 * eigenen Theme Options die globale Sidebar-Zuweisung für Pages/Posts
 * deaktiviert ("pages_global_sidebar"/"posts_global_sidebar" bzw.
 * verwandte Einstellung) -- Avada rendert den Content-Bereich dadurch
 * site-weit (nicht nur auf diesen drei Seiten) automatisch als sauberes
 * volles 1/1-Layout statt 3/4+1/4-Split, sobald keine Sidebar zugewiesen
 * ist. Betrifft jetzt alle 13 Pages, alle 22 Posts und den Shop gleich --
 * kein Bedarf mehr für seiten-spezifische CSS-Überschreibungen. Details
 * in PROJEKT-WISSEN.md, Abschnitt "Sidebar site-weit nativ entfernt".
 * ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * mw-recipe-ingredients — Zutatenliste in Rezept-Posts (Pesto/Currypasten)
 * Erster Einsatz: Post 254 (Bärlauch Pesto). Original war eine reine
 * Text-Zeile pro Zutat, per wpautop zu <br>-getrennten Zeilen in einem
 * Absatz gerendert (kein Bullet-Marker sichtbar). Hier bewusst als echtes
 * <ul><li> ausgezeichnet (besser für Screenreader/Recipe-Schema), aber
 * ohne Listenpunkt gestylt — Optik bleibt identisch zum bisherigen
 * Zeilen-Stapel, keine Redesign-Neuerung.
 * ------------------------------------------------------------------- */

.mw-recipe-ingredients {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}

.mw-recipe-ingredients li {
	margin: 0;
}

/* ---------------------------------------------------------------------
 * mw-cols-2 — generisches 2-Spalten-Raster (Bild+Bild oder Text+Bild)
 * Erster Einsatz: Post 1052 (Swing Kräutermühle). Entspricht 1:1 den
 * ursprünglichen Fusion-Rows mit zwei "1_2"-Spalten nebeneinander —
 * reine Struktur-Migration, keine neue Optik. Analog zu mw-cols-3
 * (dort 3 Spalten für unabhängige AAWP-Boxen), hier für Bild-Paare.
 * ------------------------------------------------------------------- */
.mw-cols-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-items: center;
	margin: 20px 0;
}

.mw-cols-2 .mw-cols-image {
	border-radius: var(--mw-radius);
	max-width: 100%;
	height: auto;
}

/* Modifier statt Änderung an .mw-cols-2 selbst, damit die generische
 * 2-Spalten-Komponente überall sonst (z. B. Post 1052) neutral bleibt.
 * Erster Einsatz: Blog-Teaser auf der Startseite -- Sebastian bemängelte,
 * dass die Kachel "wenig auffällt" (20.07.2026). Gleiche Sprache wie
 * .mw-shop-intro (Gold-Rahmen + Tint-Hintergrund), Wiederverwendung statt
 * neuer Farbe. */
.mw-cols-2--tint {
	background: var(--mw-tint);
	border: 2px solid var(--mw-gold);
	border-radius: var(--mw-radius);
	padding: 24px 28px;
}

@media (max-width: 700px) {
	.mw-cols-2 {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * mw-hero — Foto-Hero mit Overlay-Text (Titel/Subline/Buttons)
 * Bewusst GENERISCH gebaut (nicht startseiten-spezifisch benannt/gestylt),
 * damit sich das Konzept später auf weitere Pages/Posts ausweiten lässt.
 * Erster Einsatz: Startseite (Page 86), innerhalb der bestehenden 3/4-
 * Spalte -- kein Eingriff in die globale Titelzeile/Header (M4 bleibt
 * bewusst unangetastet, siehe PROJEKT-WISSEN.md). Nutzt die bereits
 * vorhandenen mw-btn/mw-btn-list-Klassen für die Buttons, keine neue
 * Button-Komponente. Bild-<img> braucht die Klasse "skip-lazyload"
 * (Substring-Match, von Avadas eigenem the_content-Lazyload-Filter
 * ausgewertet, siehe class-fusion-images.php::apply_lazy_loading()) --
 * sonst wird auch ein fetchpriority="high"-Bild von Avada nachträglich
 * auf das SVG-Platzhalter+data-src-Muster umgeschrieben und der LCP-
 * Vorteil geht verloren.
 * ------------------------------------------------------------------- */

.mw-hero {
	position: relative;
	border-radius: var(--mw-radius);
	overflow: hidden;
	margin: 0 0 30px;
}

.mw-hero__media {
	position: relative;
	aspect-ratio: 16 / 9;
}

.mw-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Dunkler Verlauf von unten, damit weißer Text auf jedem Foto lesbar
 * bleibt, unabhängig vom konkreten Bildinhalt -- kein Kontrast-Glücksspiel
 * pro eingesetztem Foto. */
.mw-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(20, 14, 6, 0.85) 0%, rgba(20, 14, 6, 0.45) 45%, rgba(20, 14, 6, 0) 75%);
}

.mw-hero__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px;
	max-width: 640px;
}

/* font-weight:700 (20.07.2026, Sebastian: Titel wirkte "etwas dünn" über
 * dem Foto) -- Antic Slab liegt hier nur als "Regular" (400) self-hosted
 * vor (keine eigene Bold-Datei, Google Fonts bietet für diese Familie auch
 * keine an), der Browser erzeugt also ein synthetisches Fett. Ausreichend
 * für den gewünschten Kontrast-/Wirkungs-Effekt über dem Hero-Foto. */
/* font-size/line-height hier ebenfalls !important (20.07.2026): die globale
 * h2-Regel trägt selbst !important (Avada-Ladereihenfolge-Fix) -- ohne
 * !important hier würde sie trotz .mw-hero__titles höherer Spezifität
 * gewinnen und den Hero-Titel auf 30px schrumpfen. */
.mw-hero__title {
	color: #fff;
	font-size: 40px !important;
	font-weight: 700;
	line-height: 1.15 !important;
	margin: 0 0 12px;
}

/* Additiv (25.07.2026, Design "Steinmörser"): Eyebrow-Label über dem
   Hero-Titel, in Gold statt der Standard-Muted-Farbe (lesbar auf dem
   dunklen Foto-Scrim). Inert bis eine Seite tatsächlich ein
   <div class="mw-eyebrow"> im Hero-Content einsetzt -- kein bestehendes
   Markup betroffen, bewusst konservativ noch ohne Aspect-Ratio-/Scrim-
   Änderungen aus dem Mockup (die hätten bestehende Hero-Fotos auf den 5
   Live-Seiten anders beschnitten, nicht Teil dieser reinen CSS-Runde). */
.mw-hero__content .mw-eyebrow {
	color: var(--mw-gold);
}

.mw-hero__subtitle {
	color: #fff;
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 20px;
	opacity: 0.92;
}

.mw-hero__actions {
	margin: 0;
}

@media (max-width: 700px) {
	.mw-hero__content {
		padding: 20px;
		max-width: 100%;
	}

	.mw-hero__title {
		font-size: 28px !important;
	}
}

/* ---------------------------------------------------------------------
 * mw-inline-figure — Bilder innerhalb von Fließtext (rechts/links
 * eingerückt). Ersetzt den bisherigen rohen WordPress-"alignright"/
 * "alignleft"-Float ohne eigene Gestaltung. Generisch für Fließtext-
 * Bilder auf jeder Seite gedacht, nicht Page-13-spezifisch.
 * Bug gefunden (20.07.2026, Page 13 "Der Mörser"): Ein Fließtext-Bild
 * nutzte versehentlich die Klasse mw-card__image (gedacht für die
 * Startseiten-Kacheln, dort bewusst width:100%) -- dadurch wurde es auf
 * die volle Textspaltenbreite gestreckt ("richtig dick", Sebastian).
 * mw-inline-figure ist eine eigenständige Klasse, keine Wiederverwendung
 * von mw-card__image.
 * ------------------------------------------------------------------- */

.mw-inline-figure {
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(40, 30, 10, 0.08);
	max-width: 45%;
	height: auto;
}

.mw-inline-figure.alignright {
	float: right;
	margin: 6px 0 20px 28px;
}

.mw-inline-figure.alignleft {
	float: left;
	margin: 6px 28px 20px 0;
}

@media (max-width: 700px) {
	.mw-inline-figure {
		max-width: 100%;
		float: none;
		margin: 0 0 20px;
	}
}

/* ---------------------------------------------------------------------
 * Shop-Menüpunkt optisch abgehoben (20.07.2026, Sebastian-Wunsch)
 * Zwei eigene CSS-Anläufe (Pillen-Button per Hand, dann kleiner skaliert)
 * wirkten beide zu wuchtig -- Ursache: eigenes padding/Icon addierten sich
 * zu Avadas Menü-Innenabstand hinzu, statt ihn zu ersetzen. Sebastian
 * zeigte gemuese-balkon.de/shop als gewünschtes Vorbild -- dort live
 * geprüft: kein eigenes CSS, sondern Avadas **native** "Menüpunkt als
 * Button"-Funktion (Meta-Feld "style" = "fusion-button-small", erzeugt die
 * Klassen "fusion-button button-default button-small"). Jetzt genauso
 * gelöst (Meta auf Menüpunkt 965 gesetzt) -- kein eigenes CSS mehr nötig,
 * Avadas eigene, bereits gut austarierte Button-Maße greifen jetzt direkt.
 * Farbe kommt automatisch aus denselben Avada-Button-Theme-Options wie der
 * Rest der Seite (button_gradient_top_color/button_accent_color) -- "die
 * passende MW-Farbe" ergibt sich von selbst, ohne eigene Farbdefinition.
 * Icon weiterhin das native Custom-Icon-Set-Icon "shopping-bag-solid"
 * (Font-CSS über mw-components-css.php eingebunden, s. dort).
 * ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * mw-jump-nav — dezente Sprung-Navigation zu Seitenabschnitten
 * (20.07.2026, Sebastian-Wunsch: Ersatz für eine echte Sidebar auf
 * Kategorie-Seiten wie dem Shop, angelehnt an das Kategorien-Sprungmenü
 * bei gemuese-balkon.de/shop -- dort als echte Sidebar-Spalte gelöst, hier
 * bewusst ohne Sidebar, da bei nur wenigen Kategorien eine ganze Spalte
 * (v. a. mobil) unnötig viel Platz kostet). Bewusst zurückhaltender als
 * mw-btn/mw-btn-list (die sind für Kaufen/Handeln-CTAs reserviert) --
 * Sprung-Navigation soll sich optisch klar von "Kaufen"-Buttons
 * unterscheiden, damit beides nicht verwechselt wird. Erster Einsatz:
 * Shop (930).
 * ------------------------------------------------------------------- */

/* scroll-margin-top statt fixer Zielposition (20.07.2026, Sebastian:
 * Sprung landete direkt am Produkt, Überschrift als Orientierung fehlte)
 * -- der Browser positioniert ein Anker-Ziel sonst exakt an der
 * Fensteroberkante, ohne Puffer. Generisch auf alle Überschriften mit id
 * angewendet (nicht nur die drei Shop-Kategorien), damit jeder künftige
 * mw-jump-nav-Einsatz automatisch mitprofitiert. Wirkt sich nur beim
 * Anker-Sprung selbst aus, kein sichtbarer Effekt sonst.
 * ------------------------------------------------------------------- */

h2[id],
h3[id] {
	scroll-margin-top: 105px;
}

.mw-jump-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 30px;
}

.mw-jump-nav__label {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--mw-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-right: 4px;
}

.mw-jump-nav a {
	display: inline-block;
	flex: none;
	background: var(--mw-tint);
	color: var(--mw-accent);
	border: 1px solid var(--mw-card-border);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s, border-color 0.2s;
}

.mw-jump-nav a:hover {
	background: var(--mw-btn-bg);
	border-color: var(--mw-btn-bg);
	color: var(--mw-btn-text);
}

/* Mobil: feste Zeile mit horizontalem Scroll statt Umbruch -- verhindert,
 * dass die Pillen bei mehr Kategorien mehrere Zeilen hoch stapeln und die
 * Seite "vollstopfen" (Sebastian-Wunsch), plus kleinere, dezentere Maße. */
@media (max-width: 700px) {
	.mw-jump-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 6px;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.mw-jump-nav a {
		font-size: 12px;
		padding: 4px 12px;
	}
}

/* ---------------------------------------------------------------------
 * Doppeltes Beitragsbild bei mw-hero auf POSTS vermeiden (21.07.2026)
 * Anders als bei Pages (dort .fusion-image-element mit imageframe-2 aus
 * Section 1169) zeigen einzelne Posts das Beitragsbild über Avadas
 * klassisches Post-Slideshow-Feature (.fusion-post-slideshow, mit
 * Zurück/Vor-Navigation + Lightbox) oberhalb von post_content. Sobald ein
 * Post einen eigenen mw-hero mit demselben Bild bekommt, muss dieses
 * Slideshow-Element seiten-spezifisch ausgeblendet werden (Markup bleibt
 * erhalten, nur versteckt) -- gleiches Prinzip wie body.page-id-* bei
 * Pages, hier body.postid-* (WordPress-Standard-Body-Klasse für Posts).
 * Erster Einsatz: Post 58 "Mörser - Das Material". */
body.postid-58 .fusion-post-slideshow {
	display: none;
}

/* ---------------------------------------------------------------------
 * Site-weite Post-Bereinigung (21.07.2026, Sebastian-Entscheidung):
 * Avadas klassisches Post-Template zeigt den Beitragstitel doppelt
 * (H1 aus der globalen Titelleiste + eigenes H2.entry-title direkt
 * über dem Inhalt) und dazu eine rein chronologische Zurück/Vor-
 * Navigation ohne thematischen Mehrwert (interne Verlinkung ist über
 * "Ähnliche Beiträge" + das "Der Mörser"-Menü bereits abgedeckt).
 * ⚠️ Bewusst auf body.single-post beschränkt: .entry-title kommt auf
 * der Blog-Übersicht (Page 116) pro Teaser 14x vor und darf dort NICHT
 * versteckt werden (sonst verschwinden alle Beitragstitel im Blog-
 * Archiv). Live geprüft: Blog-Übersicht zeigt weiterhin 14 Teaser-
 * Titel, kein body.single-post dort vorhanden. */
body.single-post .entry-title.fusion-post-title {
	display: none;
}

body.single-post .single-navigation {
	display: none;
}

/* ---------------------------------------------------------------------
 * Header/Nav/Titelzeile/Footer — Ziel-3-Theme-Bausteine (03.08.2026)
 * Konsolidiert aus components/mw-header-nav.html, mw-titlebar.html,
 * mw-footer.html und mw-page-anatomy.html -- diese vier Vorschauseiten
 * hatten die Klassen unten dreifach/mehrfach mit leicht abweichenden
 * Werten dupliziert (z. B. __inner-Padding 18px vs. 14px, Logo-Größe
 * 21px vs. 19px). mw-header-nav.html war der Erstentwurf und ist hier
 * als verbindliche Referenz übernommen; die Vorschauseiten laden diese
 * Datei bereits und behalten nur noch ihre demo-eigenen Extra-Styles
 * (Toggle-Buttons, .note-Kästen, Scroll-/Phone-Demo-Rahmen) lokal.
 * ------------------------------------------------------------------- */

.mw-site-header {
	background: #fff;
	border-bottom: 1px solid var(--mw-card-border);
}
.mw-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 28px;
	max-width: 1100px;
	margin: 0 auto;
	transition: padding 0.25s ease;
}
.mw-site-header.is-stuck .mw-site-header__inner {
	padding: 10px 28px;
}
.mw-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--mw-ink);
	font-family: 'Lora', serif;
	font-weight: 700;
	font-size: 21px;
	transition: font-size 0.25s ease;
}
.mw-site-header.is-stuck .mw-logo {
	font-size: 17px;
}
.mw-logo__mark {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--mw-btn-bg);
	flex: none;
	transition: width 0.25s ease, height 0.25s ease;
}
.mw-site-header.is-stuck .mw-logo__mark {
	width: 26px;
	height: 26px;
}
.mw-nav {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mw-nav > li {
	position: relative;
}
.mw-nav > li > a {
	display: block;
	padding: 10px 14px;
	color: var(--mw-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	border-radius: 8px;
	white-space: nowrap;
}
.mw-nav > li > a:hover,
.mw-nav > li:hover > a {
	color: var(--mw-accent);
	background: var(--mw-tint);
}
.mw-nav__button {
	background: var(--mw-btn-bg) !important;
	color: var(--mw-btn-text) !important;
	padding: 10px 22px !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
}
.mw-nav__button:hover {
	background: var(--mw-btn-bg-hover) !important;
}
.icon-btn {
	width: 34px;
	height: 34px;
	border: 1px solid var(--mw-card-border);
	border-radius: 8px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex: none;
	color: var(--mw-ink);
	text-decoration: none;
}
.icon-btn i {
	font-size: 15px;
}
.mw-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	background: #fff;
	border: 1px solid var(--mw-card-border);
	border-radius: var(--mw-radius-sm);
	box-shadow: 0 10px 28px rgba(40, 30, 10, 0.14);
	padding: 8px;
	margin: 8px 0 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s, transform 0.15s;
	z-index: 30;
}
.has-dropdown:hover > .mw-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mw-dropdown li a {
	display: block;
	padding: 9px 14px;
	border-radius: 6px;
	color: var(--mw-ink);
	font-size: 14px;
	text-decoration: none;
}
.mw-dropdown li a:hover {
	background: var(--mw-tint);
	color: var(--mw-accent);
}
.has-submenu {
	position: relative;
}
.mw-submenu {
	position: absolute;
	top: 0;
	left: 100%;
	min-width: 250px;
	background: #fff;
	border: 1px solid var(--mw-card-border);
	border-radius: var(--mw-radius-sm);
	box-shadow: 0 10px 28px rgba(40, 30, 10, 0.14);
	padding: 8px;
	margin: 0 0 0 6px;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateX(6px);
	transition: opacity 0.15s, transform 0.15s;
}
.has-submenu:hover > .mw-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}
.has-submenu > a::after {
	content: "›";
	margin-left: 6px;
	color: var(--mw-muted);
}
.has-dropdown > a::after {
	content: "⌄";
	margin-left: 5px;
	font-size: 12px;
	color: var(--mw-muted);
}

.mw-titlebar {
	background: var(--mw-tint);
	border-bottom: 1px solid var(--mw-card-border);
}
.mw-titlebar__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 22px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.mw-titlebar h1 {
	margin: 0;
	font-size: 28px;
}

.mw-search {
	display: flex;
	gap: 0;
	flex: none;
}
.mw-search input[type=search] {
	border: 1px solid var(--mw-card-border);
	border-right: none;
	border-radius: 999px 0 0 999px;
	padding: 10px 18px;
	font-size: 14px;
	font-family: inherit;
	width: 220px;
	background: #fff;
	color: var(--mw-ink);
}
.mw-search input[type=search]::placeholder {
	color: var(--mw-muted);
}
.mw-search button {
	border: 1px solid var(--mw-btn-text);
	background: var(--mw-btn-bg);
	color: var(--mw-btn-text);
	border-radius: 0 999px 999px 0;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.mw-search button:hover {
	background: var(--mw-btn-bg-hover);
}
.mw-search--sm input[type=search] {
	width: 150px;
	padding: 7px 14px;
}
.mw-search--sm button {
	padding: 7px 14px;
}

.mw-breadcrumb-row {
	max-width: 1100px;
	margin: 0 auto;
	padding: 12px 28px;
	font-size: 13px;
	color: var(--mw-muted);
}
.mw-breadcrumb-row a {
	color: var(--mw-muted);
	text-decoration: none;
}
.mw-breadcrumb-row a:hover {
	color: var(--mw-accent);
	text-decoration: underline;
}
.mw-breadcrumb-row .sep {
	margin: 0 6px;
	color: var(--mw-card-border);
}

.utility-row {
	max-width: 1100px;
	margin: 0 auto;
	padding: 12px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.mw-site-footer {
	border-radius: var(--mw-radius) var(--mw-radius) 0 0;
	overflow: hidden;
	background: var(--mw-ink);
	color: #f2ece3;
}
.mw-site-footer__cols {
	max-width: 1100px;
	margin: 0 auto;
	padding: 44px 28px 32px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.mw-site-footer h3 {
	color: #fff;
	font-family: 'Lora', serif;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 16px;
}
.mw-site-footer ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.mw-site-footer li {
	margin: 0 0 9px;
}
.mw-site-footer a {
	text-decoration: none;
	font-size: 14px;
	color: var(--mw-footer-text);
}
.mw-site-footer a:hover {
	text-decoration: underline;
	color: var(--mw-gold);
}
.mw-site-footer p {
	font-size: 13px;
	line-height: 1.6;
	margin: 0;
	color: var(--mw-footer-muted);
}
.mw-site-footer__copy {
	padding: 18px 28px;
	text-align: center;
	font-size: 12.5px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--mw-footer-muted);
}
.mw-site-footer__copy a {
	text-decoration: none;
	color: var(--mw-footer-muted);
}
.mw-site-footer__copy a:hover {
	text-decoration: underline;
	color: var(--mw-gold);
}
.mw-site-footer__copy .sep {
	margin: 0 8px;
	opacity: 0.5;
}

@media (max-width: 800px) {
	.mw-site-footer__cols {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Mobil (≤800px) — echte Media-Query für Header/Nav/Titelzeile (03.08.2026)
 * Bisher existierte das komplette Mobil-Verhalten NUR als interaktive
 * Vorführung in den vier Vorschauseiten (Demo-Klassen .frame.is-mobile /
 * .phone__viewport, ausschließlich per JS-Toggle-Button gesetzt) — 1:1 auf
 * den Server portiert (Zweck dieser Datei, s. Kommentar oben) bliebe die
 * Desktop-Nav auf einem echten Handy unverändert stehen. Diese Regeln
 * greifen jetzt unabhängig von den Demo-Toggle-Klassen, rein auf Basis der
 * echten Viewport-Breite. Werte (Header-Innenabstand 12px 16px, Logo
 * 17px/26px) aus dem bereits gezeigten Sticky-Shrink-Verhalten übernommen,
 * keine neue Optik erfunden.
 * ------------------------------------------------------------------- */
@media (max-width: 800px) {
	.mw-nav {
		display: none;
	}
	.mw-mobile-toggle {
		display: flex;
	}
	.mw-site-header__inner {
		padding: 12px 16px;
	}
	.mw-logo {
		font-size: 17px;
	}
	.mw-logo__mark {
		width: 26px;
		height: 26px;
	}
	.mw-titlebar__inner,
	.utility-row {
		flex-direction: column;
		align-items: stretch;
		padding: 14px 16px;
	}
	.mw-titlebar__inner .mw-search,
	.utility-row .mw-search {
		display: none;
	}
	.mw-breadcrumb-row {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ---------------------------------------------------------------------
 * Mobiles Dropdown-Panel-Muster — generisch, wiederverwendbar (03.08.2026)
 * Aus der interaktiven Vorführung in mw-header-nav.html übernommen (dort
 * bisher an .phone/.frame-Demo-Klassen gebunden, hier ohne Bindung an
 * irgendeine Demo-Klasse). Panel klappt von oben unter den Header, Scrim
 * schließt per Klick, Untermenüs als Tap-Akkordeon, Icon-Suche blendet ein
 * schmales Suchfeld unter dem Header ein. Reines CSS+HTML zeigt nur die
 * Optik (Grundzustand geschlossen) — das Auf/Zu-Verhalten braucht
 * zusätzlich das JS-Snippet unten.
 * .mw-mobile-panel/.mw-scrim sind bewusst position:fixed (echtes Theme,
 * volle Seite) — eine Demo, die das Panel innerhalb eines verkleinerten
 * Phone-Frames zeigen will, überschreibt das lokal auf position:absolute
 * (siehe mw-header-nav.html, dort als demo-eigener Zusatz dokumentiert).
 * ------------------------------------------------------------------- */
.mw-mobile-toggle {
	display: none;
}
.mw-mobile-search-panel {
	display: none;
	padding: 10px 16px;
	background: #fff;
	border-bottom: 1px solid var(--mw-card-border);
}
.mw-mobile-search-panel.is-open {
	display: block;
}
.mw-mobile-search-panel .mw-search {
	width: 100%;
}
.mw-mobile-search-panel input[type=search] {
	width: 100%;
}
.mw-scrim {
	position: fixed;
	inset: 0;
	background: rgba(20, 14, 6, 0.35);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s;
	z-index: 40;
}
.mw-scrim.is-open {
	opacity: 1;
	visibility: visible;
}
.mw-mobile-panel {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background: #fff;
	border-bottom: 1px solid var(--mw-card-border);
	transform: translateY(-100%);
	transition: transform 0.25s ease;
	z-index: 45;
	max-height: 100%;
	overflow-y: auto;
}
.mw-mobile-panel.is-open {
	transform: translateY(60px);
}
.mw-mobile-nav {
	list-style: none;
	margin: 0;
	padding: 14px;
}
.mw-mobile-nav li {
	border-bottom: 1px solid var(--mw-card-border);
}
.mw-mobile-nav li:last-child {
	border-bottom: none;
}
.mw-mobile-nav a {
	display: flex;
	justify-content: space-between;
	padding: 12px 4px;
	color: var(--mw-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}
.mw-mobile-nav__sub {
	list-style: none;
	margin: 0 0 6px;
	padding: 0 0 0 14px;
	display: none;
}
.mw-mobile-nav .has-open > .mw-mobile-nav__sub {
	display: block;
}
.mw-mobile-nav__sub a {
	font-weight: 400;
	font-size: 13px;
	padding: 8px 4px;
}
.mw-mobile-nav__caret {
	color: var(--mw-muted);
	cursor: pointer;
}
.mw-mobile-nav .mw-nav__button {
	background: var(--mw-btn-bg);
	color: var(--mw-btn-text);
	border-radius: 999px;
	padding: 8px 16px !important;
	justify-content: center;
	font-weight: 700;
}

/*
 * So im echten Theme einbinden (JS) — kein eigenes Framework nötig, reines
 * Vanilla-JS, z. B. als kleines Inline-Script im Header-Template oder
 * eigene mw-header.js im Child-Theme. Erwartet data-mw-toggle/data-mw-panel/
 * data-mw-scrim (Hamburger ↔ Panel ↔ Scrim) sowie data-mw-search-toggle/
 * data-mw-search-panel (Icon-Suche) mit demselben Schlüsselwert, z. B.
 * data-mw-toggle="main" + data-mw-panel="main" + data-mw-scrim="main".
 *
 * document.querySelectorAll('[data-mw-toggle]').forEach(function (btn) {
 *   var key = btn.getAttribute('data-mw-toggle');
 *   var panel = document.querySelector('[data-mw-panel="' + key + '"]');
 *   var scrim = document.querySelector('[data-mw-scrim="' + key + '"]');
 *   btn.addEventListener('click', function () {
 *     var open = panel.classList.toggle('is-open');
 *     scrim.classList.toggle('is-open', open);
 *     btn.setAttribute('aria-expanded', open);
 *   });
 *   scrim.addEventListener('click', function () {
 *     panel.classList.remove('is-open');
 *     scrim.classList.remove('is-open');
 *   });
 * });
 * document.querySelectorAll('[data-mw-search-toggle]').forEach(function (btn) {
 *   var key = btn.getAttribute('data-mw-search-toggle');
 *   var panel = document.querySelector('[data-mw-search-panel="' + key + '"]');
 *   btn.addEventListener('click', function () { panel.classList.toggle('is-open'); });
 * });
 * document.querySelectorAll('.mw-mobile-nav__caret').forEach(function (caret) {
 *   caret.addEventListener('click', function (ev) {
 *     ev.preventDefault();
 *     caret.closest('li').classList.toggle('has-open');
 *   });
 * });
 */

/* ---------------------------------------------------------------------
 * shop-category — Kategorie-Trennung im Shop (03.08.2026, löst D5/C7-
 * Struktur, s. Design-System-Karte "Shop-Seitenstruktur"). Klare
 * Trennung per Trennlinie + großzügigem Abstand zwischen den drei
 * Shop-Kategorien (Mörser/Zubehör/Bücher) -- vorher beliebig gestapelt.
 * Erste Kategorie ohne Linie/oberen Abstand (direkt unter Intro/
 * Sprung-Navigation). __head/__head h2/__head p bewusst mit aufgenommen
 * (Design-System-Vorlage), aktuell aber inert -- Page 930 hat noch
 * keine Einleitungssätze pro Kategorie (nicht ungefragt erfunden,
 * s. BACKLOG D5/C7), nur die reinen <h2>-Überschriften sind aktiv im
 * Einsatz. Bei Bedarf später einfach befüllbar, ohne neues CSS.
 * ------------------------------------------------------------------- */
.shop-category {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--mw-card-border);
}
.shop-category:first-of-type {
	margin-top: 36px;
	padding-top: 0;
	border-top: none;
}
.shop-category__head {
	margin: 0 0 24px;
}
.shop-category__head h2 {
	margin: 0 0 8px;
}
.shop-category__head p {
	color: var(--mw-muted);
	margin: 0;
	max-width: 65ch;
}