/*
Theme Name: Marcus Alexander
Theme URI: https://marcusalexander.de
Author: Marcus Alexander Studio
Description: Maßgeschneidertes Block-Theme für MARCUS ALEXANDER Design. Modernes Studio-Commerce: klares Weiß, Tinte, Messing-Akzent, Schibsted Grotesk, Fraunces nur noch als №-Akzent. Selbst gehostete Fonts, kein externes Tracking, kein JavaScript-Framework.
Version: 2.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marcusalexander
*/

/* ============================================================
   MARCUS ALEXANDER Design — Galerie / Museum
   Tokens kommen aus theme.json (--wp--preset--*).
   Kurzform-Variablen für Lesbarkeit:
   ============================================================ */

:root {
	--ma-papier: var(--wp--preset--color--paper, #F6F3EC);
	--ma-sand: var(--wp--preset--color--sand, #EDE8DD);
	--ma-karton: var(--wp--preset--color--card, #FCFAF5);
	--ma-tinte: var(--wp--preset--color--ink, #26221A);
	--ma-tinte-s: var(--wp--preset--color--ink-soft, #5C554A);
	--ma-linie: var(--wp--preset--color--line, #D8D1C2);
	--ma-messing: var(--wp--preset--color--brass, #96700F);
	--ma-messing-d: var(--wp--preset--color--brass-strong, #7A5B0C);
	--ma-moos: var(--wp--preset--color--moss, #5A6148);
	/* REDESIGN 2026-07: --ma-serif absichtlich auf die Sans umgebogen —
	   alle Alt-Komponenten werden damit in einem Zug modern. Fraunces
	   lebt weiter als --ma-accent (№, Signatur, Zitate). */
	--ma-serif: var(--wp--preset--font-family--sans, "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif);
	--ma-accent: var(--wp--preset--font-family--fraunces, "Fraunces", Georgia, serif);
	--ma-sans: var(--wp--preset--font-family--sans, "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif);
	--ma-pad-x: clamp(20px, 5vw, 72px);
	--ma-max: 1440px;
	--ma-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

body {
	-webkit-font-smoothing: antialiased;
	background: var(--ma-papier);
	color: var(--ma-tinte);
}

::selection { background: var(--ma-tinte); color: var(--ma-papier); }

img { max-width: 100%; height: auto; }

/* Innenraum-Container für Patterns */
.ma-wrap {
	max-width: var(--ma-max);
	margin-inline: auto;
	padding-inline: var(--ma-pad-x);
}

/* ---------- Typo-Bausteine ---------- */

.ma-eyebrow {
	font-family: var(--ma-sans);
	font-size: 0.72rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ma-messing);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.ma-eyebrow--ink { color: var(--ma-tinte-s); }

.ma-display {
	font-family: var(--ma-sans);
	font-weight: 750;
	font-size: clamp(2.5rem, 1rem + 3.6vw, 3.9rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0;
	text-wrap: balance;
}
.ma-display em,
.ma-h-section em {
	font-family: var(--ma-accent);
	font-style: italic;
	font-weight: 450;
}

.ma-h-section {
	font-family: var(--ma-sans);
	font-weight: 700;
	font-size: clamp(1.7rem, 1rem + 1.7vw, 2.3rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}

.ma-lede {
	font-size: 1.06rem;
	line-height: 1.75;
	color: var(--ma-tinte-s);
	max-width: 44ch;
}

.ma-edition-line {
	font-variant-numeric: tabular-nums;
	font-size: 0.69rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ma-tinte-s);
}

/* Tafel-Bildlegende (kursiv, museal) */
.ma-tafel-legend {
	font-family: var(--ma-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 0.91rem;
	letter-spacing: 0.01em;
	color: var(--ma-tinte-s);
	line-height: 1.6;
}
.ma-tafel-legend .ma-t-no {
	font-style: normal;
	font-family: var(--ma-sans);
	font-size: 0.63rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ma-messing);
	margin-right: 14px;
	vertical-align: 1px;
}

/* ---------- Buttons & Textlinks ---------- */

.ma-btn {
	display: inline-block;
	background: var(--ma-tinte);
	color: var(--ma-papier);
	font-family: var(--ma-sans);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	padding: 14px 28px;
	border: 1.5px solid var(--ma-tinte);
	border-radius: 5px;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}
.ma-btn:hover { background: var(--ma-messing-d); border-color: var(--ma-messing-d); color: var(--ma-papier); }
.ma-btn--ghost { background: transparent; color: var(--ma-tinte); }
.ma-btn--ghost:hover { background: var(--ma-tinte); color: var(--ma-papier); }

.ma-text-link {
	position: relative;
	display: inline-block;
	font-family: var(--ma-sans);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--ma-messing-d);
	text-decoration: none;
	padding-bottom: 4px;
}
.ma-text-link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--ma-messing);
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 300ms var(--ma-ease);
}
.ma-text-link:hover::after { transform: scaleX(0.4); }

/* ---------- Utility-Bar ---------- */

.ma-utility {
	background: var(--ma-tinte);
}
.ma-utility-inner {
	max-width: var(--ma-max);
	margin-inline: auto;
	padding: 10px var(--ma-pad-x) 9px;
	display: flex;
	justify-content: space-between;
	gap: 18px;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	text-transform: none;
	color: rgba(242, 239, 233, 0.92);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
}
.ma-utility-inner b { color: #fff; font-weight: 600; }

/* ---------- Header ---------- */

.ma-header {
	border-bottom: 1px solid var(--ma-linie);
	background: var(--ma-papier);
}
.ma-header-inner {
	max-width: var(--ma-max);
	margin-inline: auto;
	padding: 30px var(--ma-pad-x) 26px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.ma-brand {
	font-family: var(--ma-sans);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ma-tinte);
	text-decoration: none;
	line-height: 1.2;
}
.ma-brand span {
	display: block;
	font-family: var(--ma-sans);
	font-weight: 500;
	font-size: 0.6rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ma-tinte-s);
	margin-top: 4px;
}
.ma-brand:hover { color: var(--ma-messing-d); }

.ma-nav-group {
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 44px);
}

/* Navigation-Block: Versalien, Messing-Unterlinie wächst von links */
.ma-nav .wp-block-navigation-item__content {
	position: relative;
	font-family: var(--ma-sans);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ma-tinte);
	text-decoration: none;
	padding-bottom: 3px;
}
.ma-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--ma-messing);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 300ms var(--ma-ease);
}
.ma-nav .wp-block-navigation-item__content:hover::after,
.ma-nav .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Mini-Cart im Messing-Ton */
.ma-nav-group .wc-block-mini-cart { color: var(--ma-messing-d); }
.ma-nav-group .wc-block-mini-cart__button { color: inherit; }
.ma-nav-group .wc-block-mini-cart__badge {
	background: var(--ma-messing);
	color: var(--ma-papier);
	border-radius: 0;
	border: none;
	font-variant-numeric: tabular-nums;
}

/* ---------- Footer ---------- */

.ma-footer { border-top: 1px solid var(--ma-linie); background: var(--ma-papier); }
.ma-footer-inner {
	max-width: var(--ma-max);
	margin-inline: auto;
	padding: 52px var(--ma-pad-x) 46px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	flex-wrap: wrap;
}
.ma-footer .ma-f-brand {
	font-family: var(--ma-serif);
	font-size: 1rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
}
.ma-footer .ma-f-claim {
	font-family: var(--ma-sans);
	font-style: normal;
	font-size: 0.82rem;
	color: var(--ma-tinte-s);
	margin-top: 8px;
	letter-spacing: 0.02em;
	max-width: 44ch;
}
.ma-footer .ma-f-shipping {
	font-size: 0.72rem;
	color: var(--ma-tinte-s);
	margin-top: 14px;
	max-width: 52ch;
	line-height: 1.8;
}
.ma-footer .ma-f-legal {
	text-align: right;
	font-size: 0.69rem;
	letter-spacing: 0.08em;
	color: var(--ma-tinte-s);
	line-height: 2.1;
}
.ma-footer .ma-f-legal a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--ma-linie);
	padding-bottom: 1px;
	transition: border-color 200ms ease, color 200ms ease;
}
.ma-footer .ma-f-legal a:hover { color: var(--ma-messing-d); border-color: var(--ma-messing); }
.ma-footer .ma-f-copy { font-variant-numeric: tabular-nums; opacity: 0.8; }

/* ---------- Museums-Plakette ---------- */

.ma-plaque { border-top: 1px solid var(--ma-tinte); padding-top: 14px; }
.ma-plaque .ma-p-name {
	font-family: var(--ma-serif);
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--ma-tinte);
}
.ma-plaque .ma-p-sub {
	font-size: 0.69rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ma-tinte-s);
	margin-top: 5px;
}
.ma-plaque .ma-p-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	margin-top: 12px;
}
.ma-plaque .ma-p-price {
	font-size: 0.94rem;
	font-variant-numeric: tabular-nums;
	color: var(--ma-messing);
	letter-spacing: 0.04em;
}

/* (Hero-Video-CSS entfernt — REDESIGN 2026-07, neuer Hero am Dateiende) */

/* Vertikales Mikro-Label an der Bildkante */
.ma-vertical-label {
	position: absolute;
	z-index: 3;
	left: 14px;
	bottom: 22px;
	writing-mode: vertical-rl;
	font-size: 0.58rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--ma-papier);
	text-shadow: 0 0 14px rgba(38, 34, 26, 0.5);
	pointer-events: none;
}
.ma-vertical-label--ink { color: var(--ma-tinte-s); text-shadow: none; }

/* ---------- Bild-Zoom (langsam, museal) ---------- */

.ma-zoom {
	display: block;
	overflow: hidden;
	background: var(--ma-sand);
}
.ma-zoom img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 800ms ease-out;
}
@media (hover: hover) {
	a.ma-zoom:hover img,
	a:hover > .ma-zoom img,
	.ma-zoom a:hover img { transform: scale(1.04); }
}

/* ---------- Full-Bleed-Band ---------- */

.ma-fullbleed {
	position: relative;
	border-top: 1px solid var(--ma-linie);
	border-bottom: 1px solid var(--ma-linie);
	overflow: hidden;
}
.ma-fullbleed img {
	display: block;
	width: 100%;
	height: clamp(320px, 46vw, 620px);
	object-fit: cover;
}
.ma-fullbleed .ma-vertical-label { left: auto; right: 18px; bottom: 26px; }

/* ---------- Journal (Teaser + Blogliste) ---------- */

.ma-journal {
	max-width: var(--ma-max);
	margin-inline: auto;
	padding: clamp(52px, 7vw, 96px) var(--ma-pad-x) clamp(64px, 8.5vw, 120px);
}
.ma-journal-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
}
.ma-journal-head .ma-h-section { margin-top: 22px; }
.ma-journal-head .ma-lede { margin-top: 16px; }
.ma-journal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	margin-top: clamp(30px, 4vw, 52px);
}
.ma-journal-card {
	position: relative;
	background: var(--ma-karton);
	border: 1px solid var(--ma-linie);
	border-top: 1px solid var(--ma-tinte);
	padding: clamp(30px, 4vw, 56px) clamp(26px, 4vw, 56px) clamp(28px, 3.6vw, 52px);
	overflow: hidden;
}
.ma-journal-card .ma-jc-ghost {
	position: absolute;
	right: 26px;
	top: 18px;
	font-family: var(--ma-serif);
	font-weight: 300;
	font-size: clamp(3.4rem, 6vw, 5.5rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--ma-linie);
	pointer-events: none;
}
.ma-journal-card .ma-jc-kicker {
	font-size: 0.63rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ma-messing);
	margin-bottom: 26px;
	font-variant-numeric: tabular-nums;
}
.ma-journal-card h3,
.ma-journal-card .ma-jc-title {
	font-family: var(--ma-serif);
	font-size: clamp(1.3rem, 1rem + 1vw, 1.95rem);
	font-weight: 400;
	line-height: 1.22;
	margin: 0 0 18px;
	max-width: 20ch;
}
.ma-journal-card .ma-jc-title a { color: var(--ma-tinte); text-decoration: none; }
.ma-journal-card .ma-jc-title a:hover { color: var(--ma-messing-d); }
.ma-journal-card p {
	font-size: 0.91rem;
	color: var(--ma-tinte-s);
	line-height: 1.75;
	margin: 0 0 34px;
	max-width: 46ch;
}

/* Journal-Index (Query-Loop in home.html / index.html) */
.ma-journal-index { padding-bottom: 0; }
.ma-journal.ma-journal-listwrap { padding-top: 0; }
ul.ma-journal-list { list-style: none; padding: 0; margin-bottom: 0; }
ul.ma-journal-list li { margin: 0; }
ul.ma-journal-list .ma-journal-card { height: 100%; }
.ma-journal-card .wp-block-post-excerpt__excerpt {
	font-size: 0.91rem;
	color: var(--ma-tinte-s);
	line-height: 1.75;
	max-width: 46ch;
	margin: 0 0 12px;
}
.ma-journal-card .wp-block-post-excerpt__more-link {
	position: relative;
	display: inline-block;
	font-size: 0.69rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ma-messing-d);
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ma-messing);
}
.wp-block-query-pagination {
	margin-top: clamp(28px, 4vw, 44px);
	font-variant-numeric: tabular-nums;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ma-tinte-s);
	text-decoration: none;
}
.wp-block-query-pagination a:hover { color: var(--ma-messing-d); }
.wp-block-query-pagination .page-numbers.current { color: var(--ma-messing-d); }
.ma-backlink { margin-top: clamp(28px, 4vw, 44px); }

/* ---------- Kollektionskopf (/shop/) ---------- */

.ma-coll-head {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--ma-linie);
}
.ma-coll-head-inner {
	max-width: var(--ma-max);
	margin-inline: auto;
	padding: clamp(52px, 7vw, 100px) var(--ma-pad-x) 40px;
}
.ma-coll-head h1 {
	font-family: var(--ma-serif);
	font-size: clamp(2.8rem, 1rem + 7vw, 7.5rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.015em;
	margin: 26px 0 0;
}
.ma-coll-sub {
	margin-top: 26px;
	font-size: 0.91rem;
	color: var(--ma-tinte-s);
	max-width: 52ch;
}
.ma-ghost-no {
	position: absolute;
	right: 34px;
	bottom: -42px;
	font-family: var(--ma-serif);
	font-weight: 300;
	font-size: clamp(8rem, 16vw, 14.5rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--ma-linie);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* Editionsprinzip-Panel (Sand, ohne Schatten) */
.ma-coll-note {
	background: var(--ma-sand);
	padding: clamp(36px, 4.5vw, 58px) var(--ma-pad-x) clamp(38px, 4.8vw, 62px);
}
.ma-coll-note-inner { max-width: var(--ma-max); margin-inline: auto; }
.ma-coll-note h2, .ma-coll-note h3 {
	font-family: var(--ma-serif);
	font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
	margin: 18px 0 16px;
}
.ma-coll-note p {
	font-size: 0.91rem;
	color: var(--ma-tinte-s);
	line-height: 1.8;
	max-width: 62ch;
	margin: 0;
}
.ma-cn-rule { width: 56px; border-top: 1px solid var(--ma-tinte); margin-top: 30px; }

/* ---------- Studio-Seite ---------- */

.ma-studio-hero {
	max-width: var(--ma-max);
	margin-inline: auto;
	padding: clamp(56px, 7.5vw, 110px) var(--ma-pad-x) clamp(48px, 6vw, 90px);
	display: grid;
	grid-template-columns: 1fr minmax(240px, 360px);
	gap: clamp(32px, 6vw, 90px);
}
.ma-studio-hero h1 {
	font-family: var(--ma-serif);
	font-size: clamp(2.2rem, 1rem + 4.4vw, 4.75rem);
	font-weight: 300;
	line-height: 1.08;
	margin: 28px 0 0;
	letter-spacing: -0.01em;
}
.ma-studio-hero-side {
	align-self: end;
	font-size: 0.81rem;
	line-height: 2.05;
	color: var(--ma-tinte-s);
	border-top: 1px solid var(--ma-tinte);
	padding-top: 18px;
	font-variant-numeric: tabular-nums;
}
.ma-studio-hero-side b {
	display: block;
	color: var(--ma-tinte);
	font-size: 0.66rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

/* Kennzahlen-Band */
.ma-facts {
	border-top: 1px solid var(--ma-linie);
	border-bottom: 1px solid var(--ma-linie);
}
.ma-facts-inner {
	max-width: var(--ma-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.ma-fact {
	padding: clamp(26px, 3.2vw, 46px) clamp(20px, 3vw, 48px) clamp(24px, 3vw, 42px);
	border-right: 1px solid var(--ma-linie);
}
.ma-fact:last-child { border-right: none; }
.ma-fact .ma-f-num {
	font-family: var(--ma-serif);
	font-weight: 300;
	font-size: clamp(2.1rem, 1rem + 2.6vw, 4.1rem);
	line-height: 1;
	color: var(--ma-messing);
	font-variant-numeric: tabular-nums;
}
.ma-fact .ma-f-label {
	margin-top: 14px;
	font-size: 0.69rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ma-tinte-s);
}

/* Studio-Fließtext + Editionskarte + №-Ghost */
.ma-studio-body {
	position: relative;
	max-width: var(--ma-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(300px, 560px) 1fr;
	gap: clamp(40px, 7vw, 100px);
	padding: clamp(52px, 7vw, 100px) var(--ma-pad-x);
	border-bottom: 1px solid var(--ma-linie);
	overflow: hidden;
}
.ma-watermark {
	position: absolute;
	right: -30px;
	top: 16px;
	font-family: var(--ma-serif);
	font-weight: 300;
	font-size: clamp(14rem, 36vw, 32.5rem);
	line-height: 1;
	color: var(--ma-tinte);
	opacity: 0.035;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	user-select: none;
}
.ma-prose { position: relative; }
.ma-prose p {
	font-size: 0.97rem;
	line-height: 1.85;
	color: var(--ma-tinte);
	margin: 0 0 26px;
}
.ma-prose p:first-child::first-letter {
	font-family: var(--ma-serif);
	font-weight: 300;
	font-size: 4rem;
	line-height: 0.8;
	float: left;
	padding: 8px 14px 0 0;
	color: var(--ma-messing);
}
.ma-prose p.ma-muted { color: var(--ma-tinte-s); }
.ma-prose em { font-family: var(--ma-serif); font-style: italic; }

/* Editionskarte mit Signatur + MA-Rundstempel */
.ma-edition-card-wrap {
	position: relative;
	align-self: start;
	padding: clamp(20px, 4vw, 60px) 0 40px clamp(0px, 3vw, 40px);
}
.ma-edition-card {
	position: relative;
	background: var(--ma-karton);
	border: 1px solid var(--ma-linie);
	box-shadow: 14px 18px 0 0 var(--ma-sand);
	padding: clamp(28px, 3.2vw, 44px) clamp(28px, 3.4vw, 46px) clamp(26px, 2.8vw, 38px);
	max-width: 420px;
}
.ma-edition-card .ma-ec-brand {
	font-size: 0.6rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--ma-tinte-s);
	margin-bottom: 34px;
}
.ma-edition-card .ma-ec-no {
	font-family: var(--ma-serif);
	font-weight: 300;
	font-size: clamp(3rem, 5vw, 4.5rem);
	line-height: 1;
	color: var(--ma-messing);
	font-variant-numeric: tabular-nums;
	margin-bottom: 26px;
}
.ma-edition-card .ma-ec-line {
	border-top: 1px solid var(--ma-linie);
	padding-top: 18px;
	font-size: 0.75rem;
	color: var(--ma-tinte-s);
	line-height: 1.8;
}
.ma-edition-card .ma-ec-sig {
	margin-top: 26px;
	font-family: var(--ma-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 1.5rem;
	color: var(--ma-tinte);
	transform: rotate(-2deg);
	transform-origin: left;
}
.ma-edition-card .ma-ec-sig-label {
	font-size: 0.6rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ma-tinte-s);
	margin-top: 10px;
}
.ma-stamp {
	position: absolute;
	width: 112px;
	bottom: -20px;
	right: -22px;
	transform: rotate(-12deg);
	pointer-events: none;
}

/* Prozess-Sektion */
.ma-process {
	max-width: var(--ma-max);
	margin-inline: auto;
	padding: clamp(52px, 7vw, 96px) var(--ma-pad-x) clamp(64px, 8.5vw, 120px);
}
.ma-process .ma-h-section { margin-top: 22px; }
.ma-process-media {
	position: relative;
	margin-top: clamp(30px, 4vw, 52px);
	overflow: hidden;
	background: var(--ma-sand);
}
.ma-process-media video,
.ma-process-media img {
	display: block;
	width: 100%;
	height: clamp(300px, 40vw, 560px);
	object-fit: cover;
}
.ma-process-media video { position: relative; z-index: 2; }
.ma-process-media .ma-poster-fallback {
	position: absolute;
	inset: 0;
	z-index: 1;
	height: 100%;
}
.ma-process-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--ma-linie);
	margin-top: clamp(30px, 4vw, 52px);
}
.ma-step {
	padding: clamp(28px, 3.4vw, 48px) clamp(22px, 3vw, 44px) 8px;
	border-right: 1px solid var(--ma-linie);
}
.ma-step:first-child { padding-left: 0; }
.ma-step:last-child { border-right: none; padding-right: 0; }
.ma-step .ma-s-no {
	font-family: var(--ma-serif);
	font-weight: 300;
	font-size: 3.75rem;
	color: transparent;
	-webkit-text-stroke: 1px var(--ma-messing);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	margin-bottom: 28px;
}
.ma-step h3 {
	font-family: var(--ma-serif);
	font-size: 1.55rem;
	font-weight: 400;
	margin: 0 0 14px;
}
.ma-step p {
	font-size: 0.88rem;
	line-height: 1.75;
	color: var(--ma-tinte-s);
	max-width: 36ch;
	margin: 0;
}

/* ---------- Journal-Einzelbeitrag / Seiten ---------- */

.ma-article {
	max-width: var(--ma-max);
	margin-inline: auto;
	padding: clamp(52px, 7vw, 96px) var(--ma-pad-x) clamp(64px, 8vw, 110px);
}
.ma-article-inner { max-width: 680px; }
.ma-article .wp-block-post-title,
.ma-article-title {
	font-family: var(--ma-serif);
	font-weight: 300;
	font-size: clamp(2rem, 1rem + 3.2vw, 3.6rem);
	line-height: 1.1;
	margin: 22px 0 0;
}
.ma-article .wp-block-post-date {
	font-size: 0.66rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ma-tinte-s);
	font-variant-numeric: tabular-nums;
	margin-top: 22px;
}
.ma-article .wp-block-post-content,
.ma-article .entry-content {
	margin-top: clamp(28px, 4vw, 48px);
	font-size: 0.99rem;
	line-height: 1.85;
	color: var(--ma-tinte);
}
.ma-article .wp-block-post-content p { margin: 0 0 24px; }

/* ---------- Scroll-Reveals — nur CSS, museal dezent ---------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ma-reveal {
			animation: ma-view-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 36%;
		}
		@keyframes ma-view-rise {
			from { opacity: 0; transform: translateY(22px); }
			to { opacity: 1; transform: none; }
		}
	}
}

/* Hero-Load-Choreografie: siehe WOW-UPGRADE 2026-07 am Dateiende */

/* ---------- Fokus sichtbar, markenfarben ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--ma-messing);
	outline-offset: 2px;
}

/* ---------- Allgemeine Block-Feinheiten ---------- */

.wp-block-button__link,
button[type="submit"] {
	border-radius: 5px !important;
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.92rem;
	font-weight: 600;
	transition: background-color 200ms ease, color 200ms ease;
}
hr.wp-block-separator { border-color: var(--ma-linie); opacity: 1; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.ma-studio-body { grid-template-columns: 1fr; }
	.ma-edition-card-wrap { padding-left: 0; }
	.ma-facts-inner { grid-template-columns: repeat(2, 1fr); }
	.ma-fact:nth-child(2) { border-right: none; }
	.ma-fact { border-bottom: 1px solid var(--ma-linie); }
	.ma-fact:nth-child(3), .ma-fact:nth-child(4) { border-bottom: none; }
}

@media (max-width: 860px) {
	.ma-hero { grid-template-columns: 1fr; }
	.ma-hero-stage { border-left: none; border-top: 1px solid var(--ma-linie); }
	.ma-exhibit-row { grid-template-columns: 1fr; }
	.ma-exhibit { border-right: none; border-bottom: 1px solid var(--ma-linie); }
	.ma-exhibit:last-child { border-bottom: none; }
	.ma-studio-teaser { grid-template-columns: 1fr; }
	.ma-journal-grid { grid-template-columns: 1fr; }
	.ma-studio-hero { grid-template-columns: 1fr; }
	.ma-process-grid { grid-template-columns: 1fr; }
	.ma-step { border-right: none; border-bottom: 1px solid var(--ma-linie); padding-left: 0; padding-bottom: 34px; }
	.ma-step:last-child { border-bottom: none; }
	.ma-overlap-head { margin-bottom: 0; }
	.ma-ghost-no { font-size: 7rem; bottom: -22px; }
}

@media (max-width: 560px) {
	.ma-utility-inner span:last-child { display: none; }
	.ma-header-inner { padding-top: 20px; padding-bottom: 18px; }
	.ma-footer-inner { flex-direction: column; align-items: flex-start; }
	.ma-footer .ma-f-legal { text-align: left; }
	.ma-facts-inner { grid-template-columns: 1fr; }
	.ma-fact { border-right: none; border-bottom: 1px solid var(--ma-linie); }
	.ma-fact:nth-child(3) { border-bottom: 1px solid var(--ma-linie); }
	.ma-fact:last-child { border-bottom: none; }
	.ma-stage-media video,
	.ma-stage-media > img { min-height: 300px; }
	.ma-stamp { width: 88px; right: -10px; }
}

/* ============================================================
   Reduced Motion — globaler Schalter: alles ruhig
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	/* Videos: nur Posterbild zeigen */
	.ma-stage-media video,
	.ma-process-media video { display: none; }
	.ma-zoom img { transform: none !important; }

	/* WOW-UPGRADE 2026-07: alle neuen Bewegungen hart aus.
	   (Die Regeln selbst stehen ohnehin nur in no-preference-Blöcken;
	   das hier ist der doppelte Boden — Scroll-Timelines ignorieren
	   animation-duration, deshalb explizit animation: none.) */
	.ma-mask-inner,
	.ma-hero .ma-stage-media,
	.ma-header,
	.ma-header-inner,
	.ma-brand span,
	.ma-fullbleed img,
	.ma-exhibit .ma-zoom img,
	.ma-process-media .ma-poster-fallback,
	.ma-reveal {
		animation: none !important;
	}
	.ma-mask-inner { transform: none !important; }
	.ma-hero .ma-stage-media { clip-path: none !important; }

	/* View Transitions: kein Crossfade bei reduzierter Bewegung */
	@view-transition { navigation: none; }
	::view-transition-old(root),
	::view-transition-new(root) { animation: none !important; }
}

/* Hero-Video an die warme Palette angleichen */
.ma-stage-media video {
	filter: none;
}

/* ============================================================
   WOW-UPGRADE 2026-07
   Bewegungssprache: langsam & schwer (600–1200ms),
   cubic-bezier(0.16,1,0.3,1), nur transform/opacity/clip-path
   (Ausnahme lt. Audit: Header-Padding/-Hintergrund, 120px-Range).
   Alles aus bei prefers-reduced-motion (Block weiter oben).
   ============================================================ */

:root {
	--ma-wow-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- (1) Lenis-Grundlagen ---------- */

html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- (6) Sticky-Header mit Verwandlung ---------- */

/* WP wrappt den Header-Part in <header class="wp-block-template-part">;
   ohne display:contents würde sticky an dessen (kleiner) Box kleben. */
header.wp-block-template-part { display: contents; }

.ma-header {
	position: sticky;
	top: 0;
	z-index: 90;
}
body.admin-bar .ma-header { top: 32px; }

@supports (animation-timeline: scroll(root)) {
	@media (prefers-reduced-motion: no-preference) {
		.ma-header {
			animation: ma-header-verdichten linear both;
			animation-timeline: scroll(root);
			animation-range: 0 120px;
		}
		.ma-header-inner {
			animation: ma-header-schrumpfen linear both;
			animation-timeline: scroll(root);
			animation-range: 0 120px;
		}
		.ma-brand span {
			animation: ma-brand-sub-weg linear both;
			animation-timeline: scroll(root);
			animation-range: 0 120px;
		}
	}
}
/* Ohne from-Keyframe: Startwert = jeweiliger (responsiver) Ist-Zustand */
@keyframes ma-header-verdichten {
	to { background-color: var(--ma-karton); }
}
@keyframes ma-header-schrumpfen {
	to { padding-top: 14px; padding-bottom: 12px; }
}
@keyframes ma-brand-sub-weg {
	to { opacity: 0; }
}

/* ---------- (5) Typo-Masken: Grundgerüst ---------- */

.ma-mask {
	display: block;
	overflow: hidden;
}
.ma-mask-inner { display: block; }

/* Scroll-getriggerte Masken-Reveals + nachlaufende Fades.
   Nur wo view() existiert — sonst bleibt alles statisch sichtbar. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		.ma-mask-inner {
			animation: ma-mask-rise var(--ma-wow-ease) both;
			animation-timeline: view();
			animation-range: entry 5% entry 45%;
		}
		/* Staffelung pro Zeile — Scroll-Pendant zu 0/80/160ms */
		.ma-mask:nth-child(2) .ma-mask-inner { animation-range: entry 13% entry 53%; }
		.ma-mask:nth-child(3) .ma-mask-inner { animation-range: entry 21% entry 61%; }

		/* Nachfolgende Elemente: weicher Fade, ~+150ms versetzt */
		.ma-gallery-head .ma-eyebrow,
		.ma-gallery-head .ma-lede,
		.ma-gallery-head .ma-text-link,
		.ma-journal-head .ma-eyebrow,
		.ma-journal-head .ma-lede,
		.ma-journal-head .ma-text-link,
		.ma-studio-side > *,
		.ma-exhibit-num,
		.ma-exhibit .ma-plaque,
		.ma-journal-card,
		.ma-process .ma-eyebrow {
			animation: ma-follow-rise var(--ma-wow-ease) both;
			animation-timeline: view();
			animation-range: entry 15% entry 60%;
		}
	}
}

/* ---------- (2)+(3) Bild-Parallax + Clip-Reveal (CSS-only) ---------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/* Rahmen fixieren, Bild auf 115% Höhe (Parallax-Reserve) */
		.ma-fullbleed { height: clamp(320px, 46vw, 620px); }
		.ma-fullbleed img { height: 115%; }
		.ma-exhibit .ma-zoom { aspect-ratio: 10 / 11; }
		.ma-exhibit .ma-zoom img { height: 115%; object-fit: cover; }
		.ma-process-media .ma-poster-fallback { height: 115%; }

		.ma-fullbleed img,
		.ma-exhibit .ma-zoom img,
		.ma-process-media .ma-poster-fallback {
			animation:
				ma-parallax linear both,
				ma-clip-reveal var(--ma-wow-ease) both;
			animation-timeline: view(), view();
			animation-range: cover 0% cover 100%, entry 0% entry 60%;
			/* add: Parallax addiert sich auf den Hover-Zoom (transform),
			   statt ihn zu überschreiben */
			animation-composition: add, replace;
		}
	}
}

/* ---------- (7a) Button: Messing-Wisch von links ---------- */

.ma-btn {
	position: relative;
	overflow: hidden;
}
.ma-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ma-messing-d);
	clip-path: inset(0 100% 0 0);
	transition: clip-path 600ms var(--ma-wow-ease);
}
.ma-btn--ghost::before { background: var(--ma-tinte); }
.ma-btn:hover::before,
.ma-btn:focus-visible::before { clip-path: inset(0 0 0 0); }
/* Label liegt über dem Wisch und hebt sich 2px */
.ma-btn .ma-btn-label {
	position: relative;
	z-index: 1;
	display: inline-block;
	transition: transform 600ms var(--ma-wow-ease);
}
.ma-btn:hover .ma-btn-label,
.ma-btn:focus-visible .ma-btn-label { transform: translateY(-2px); }
/* Alt-Hover neutralisieren, sonst schlägt der Instant-Farbwechsel
   den Wisch: Fläche bleibt, ::before übernimmt den Farbauftritt. */
.ma-btn:hover { background: var(--ma-tinte); border-color: var(--ma-tinte); }
.ma-btn--ghost { transition: background-color 200ms ease, color 450ms ease 120ms; }
.ma-btn--ghost:hover { background: transparent; color: var(--ma-papier); }

/* ---------- (7b) Textlink: Linie läuft rechts raus, kommt links rein ---------- */

.ma-text-link { overflow: hidden; }
.ma-text-link::after {
	transform: translateX(0);
	transition: transform 450ms var(--ma-wow-ease);
}
.ma-text-link:hover::after { transform: translateX(112%); }
.ma-text-link::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--ma-messing);
	transform: translateX(-112%);
	transition: transform 450ms var(--ma-wow-ease) 90ms;
}
.ma-text-link:hover::before { transform: translateX(0); }

/* ---------- (7c) Preis wechselt bei Karten-Hover auf Messing-dunkel ---------- */

.ma-plaque .ma-p-price { transition: color 400ms ease; }
.ma-exhibit a:hover .ma-p-price { color: var(--ma-messing-d); }
ul.products li.product .price { transition: color 400ms ease; }
.woocommerce ul.products li.product a:hover .price,
ul.products li.product a:hover .price { color: var(--ma-messing-d) !important; }

/* ---------- (8) View Transitions — progressiv, killt den weißen Flash ---------- */

@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 300ms;
	animation-timing-function: ease;
}

/* Exhibit-Teaser (Startseite) ↔ erstes Galeriebild der PDP.
   PDP-Seite wird über body.ma-product-{slug} gekoppelt (functions.php). */
.ma-vt-leuchte-eins { view-transition-name: product-leuchte-eins; }
.ma-vt-uebertopf-terra { view-transition-name: product-uebertopf-terra; }
.ma-vt-objekt-drei { view-transition-name: product-objekt-drei; }
body.ma-product-leuchte-eins .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
	view-transition-name: product-leuchte-eins;
}
body.ma-product-uebertopf-terra .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
	view-transition-name: product-uebertopf-terra;
}
body.ma-product-objekt-drei .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
	view-transition-name: product-objekt-drei;
}

/* ---------- (9) Hero-/Seitenkopf-Load-Choreografie (zeitbasiert) ---------- */

@media (prefers-reduced-motion: no-preference) {

	/* Headline-Zeilen aus der Maske: 0 / 80 / 160ms */
	.ma-hero .ma-mask-inner,
	.ma-studio-hero .ma-mask-inner,
	.ma-coll-head .ma-mask-inner,
	.ma-journal-index .ma-mask-inner {
		animation: ma-mask-rise 750ms var(--ma-wow-ease) both;
	}
	.ma-hero .ma-mask:nth-child(2) .ma-mask-inner,
	.ma-studio-hero .ma-mask:nth-child(2) .ma-mask-inner,
	.ma-coll-head .ma-mask:nth-child(2) .ma-mask-inner,
	.ma-journal-index .ma-mask:nth-child(2) .ma-mask-inner {
		animation-delay: 80ms;
	}
	.ma-hero .ma-mask:nth-child(3) .ma-mask-inner,
	.ma-studio-hero .ma-mask:nth-child(3) .ma-mask-inner,
	.ma-coll-head .ma-mask:nth-child(3) .ma-mask-inner,
	.ma-journal-index .ma-mask:nth-child(3) .ma-mask-inner {
		animation-delay: 160ms;
	}

	/* Eyebrow sofort, Lede + Button + Seitenkopf-Nebentexte +300ms */
	.ma-hero-copy .ma-eyebrow {
		animation: ma-follow-rise 700ms var(--ma-wow-ease) both;
	}
	.ma-hero-copy .ma-lede,
	.ma-hero-copy .ma-btn,
	.ma-studio-hero .ma-eyebrow,
	.ma-studio-hero-side,
	.ma-coll-head .ma-eyebrow,
	.ma-coll-sub,
	.ma-journal-index .ma-eyebrow,
	.ma-journal-index .ma-lede {
		animation: ma-follow-rise 700ms var(--ma-wow-ease) 300ms both;
	}

	/* Video-Bühne: Clip-Reveal, 1.1s, +200ms */
	.ma-hero .ma-stage-media {
		animation: ma-stage-reveal 1100ms var(--ma-wow-ease) 200ms both;
	}
}

/* ---------- WOW-Keyframes (global, laufen nur wo zugewiesen) ---------- */

@keyframes ma-mask-rise {
	from { transform: translateY(112%); }
	to { transform: translateY(0); }
}
@keyframes ma-follow-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}
@keyframes ma-parallax {
	/* Bild ist 115% hoch und oben verankert:
	   −12% → 0 entspricht −6%…+6% um die Mitte, ohne Kanten freizulegen */
	from { transform: translateY(-12%); }
	to { transform: translateY(0%); }
}
@keyframes ma-clip-reveal {
	/* scale-Property (nicht transform), damit es nicht mit dem
	   Parallax-transform kollidiert */
	from { clip-path: inset(10% 6%); scale: 1.1; }
	to { clip-path: inset(0% 0%); scale: 1; }
}
@keyframes ma-stage-reveal {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0% 0); }
}

/* ---------- Reduced Motion: View Transitions final abschalten.
   Muss NACH @view-transition{navigation:auto} stehen — bei
   @view-transition gewinnt die letzte zutreffende Regel. ---------- */

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}


/* ============================================================
   REDESIGN 2026-07 — Moderner Studio-Commerce (Startseite v2)
   Produkt-first, klares Weiß, Messing als einziger Akzent.
   Fraunces nur noch als №-Akzent (--ma-accent).
   ============================================================ */

/* №-Akzent — überall gleich */
.ma-no {
	font-family: var(--ma-accent);
	font-style: italic;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* ---------- Hero v2: Copy links, Produktbild rechts ---------- */

.ma-hero {
	max-width: var(--ma-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
	padding: clamp(40px, 5.5vw, 72px) var(--ma-pad-x) clamp(44px, 6vw, 80px);
}
.ma-hero-copy .ma-eyebrow { margin-bottom: 18px; }
.ma-hero-copy .ma-display { margin-bottom: 22px; }
.ma-hero-copy .ma-lede { margin-bottom: 32px; max-width: 48ch; }
.ma-cta-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: clamp(26px, 3.5vw, 40px);
}
.ma-fact-row {
	display: flex;
	gap: clamp(16px, 2.6vw, 30px);
	flex-wrap: wrap;
	color: var(--ma-tinte-s);
	font-size: 0.88rem;
}
.ma-fact-row b { color: var(--ma-tinte); font-weight: 600; }

.ma-hero-visual { position: relative; }
/* Bildstrecke: 2 versetzte Spalten — Fertigung + Objekte statt Einzelfoto */
.ma-hero-mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	align-items: start;
}
.ma-mo-col { display: flex; flex-direction: column; gap: 14px; }
.ma-mo-col--versetzt { padding-top: 38px; }
.ma-hero-mosaic a { display: block; overflow: hidden; border-radius: 8px; }
.ma-hero-mosaic img,
.ma-hero-mosaic video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 400ms var(--ma-wow-ease);
}
.ma-mo-tall img { aspect-ratio: 3 / 4; }
.ma-mo-short img,
.ma-mo-short video { aspect-ratio: 1 / 1; }
@media (hover: hover) {
	.ma-hero-mosaic a:hover img,
	.ma-hero-mosaic a:hover video { transform: scale(1.04); }
}
.ma-ed-chip {
	position: absolute;
	left: 16px;
	bottom: 16px;
	background: rgba(255, 255, 255, 0.94);
	border-radius: 5px;
	padding: 9px 14px;
	font-size: 0.83rem;
	font-weight: 600;
	color: var(--ma-tinte);
	box-shadow: 0 2px 12px rgba(25, 23, 20, 0.12);
}
.ma-ed-chip .ma-no { color: var(--ma-messing); margin-right: 6px; }

/* Hero-Load: Bild weich rein (Copy-Choreografie kommt aus dem WOW-Block) */
@media (prefers-reduced-motion: no-preference) {
	.ma-hero-visual {
		animation: ma-follow-rise 800ms var(--ma-wow-ease) 150ms both;
	}
}

/* ---------- Trust-Strip ---------- */

.ma-trust-strip {
	border-top: 1px solid var(--ma-linie);
	border-bottom: 1px solid var(--ma-linie);
	background: var(--ma-papier);
}
.ma-trust-strip-inner {
	max-width: var(--ma-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 22px var(--ma-pad-x);
}
.ma-trust-strip-inner > div {
	font-size: 0.84rem;
	color: var(--ma-tinte-s);
	text-align: center;
}
.ma-trust-strip-inner b {
	display: block;
	color: var(--ma-tinte);
	font-weight: 600;
	font-size: 0.88rem;
	margin-bottom: 2px;
}

/* ---------- Sektionen + Kopfzeile ---------- */

.ma-sec {
	max-width: var(--ma-max);
	margin-inline: auto;
	padding: clamp(48px, 6.5vw, 80px) var(--ma-pad-x) 0;
}
.ma-sec:last-of-type { padding-bottom: clamp(48px, 6.5vw, 80px); }
.ma-sec-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: clamp(26px, 3.6vw, 40px);
}
.ma-sec-head .ma-eyebrow { margin-bottom: 10px; }
.ma-sec-head .ma-lede { margin-top: 10px; font-size: 0.97rem; }

/* ---------- Produktraster (4-up, Editions-Badges) ---------- */

.ma-grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.ma-card a { text-decoration: none; color: inherit; display: block; }
.ma-card .ma-imgbox {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 7px;
	background: var(--ma-sand);
}
.ma-card .ma-imgbox img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 350ms var(--ma-wow-ease);
}
@media (hover: hover) {
	.ma-card a:hover .ma-imgbox img { transform: scale(1.035); }
}
.ma-badge {
	white-space: nowrap;
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.94);
	border-radius: 4px;
	padding: 5px 10px;
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--ma-tinte);
	font-variant-numeric: tabular-nums;
}
.ma-badge--low { color: var(--ma-messing-d); }
.ma-card .ma-c-meta { display: block; padding: 14px 2px 0; }
.ma-card .ma-c-cat,
.ma-card .ma-c-name,
.ma-card .ma-c-price { display: block; }
.ma-card .ma-c-cat {
	font-size: 0.72rem;
	color: var(--ma-tinte-s);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 500;
}
.ma-card .ma-c-name {
	font-weight: 650;
	font-size: 1.02rem;
	margin: 3px 0 2px;
	color: var(--ma-tinte);
}
.ma-card .ma-c-price {
	font-size: 0.94rem;
	color: var(--ma-tinte);
	font-variant-numeric: tabular-nums;
	transition: color 300ms ease;
}
.ma-card a:hover .ma-c-price { color: var(--ma-messing-d); }
.ma-card .ma-c-price .ma-no {
	color: var(--ma-tinte-s);
	font-size: 0.85rem;
	margin-left: 8px;
}

/* ---------- Kategorie-Kacheln ---------- */

.ma-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.ma-tile {
	position: relative;
	display: block;
	border-radius: 8px;
	overflow: hidden;
}
.ma-tile img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3.4;
	object-fit: cover;
	transition: transform 400ms var(--ma-wow-ease);
}
@media (hover: hover) {
	.ma-tile:hover img { transform: scale(1.04); }
}
.ma-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 17, 13, 0.55), rgba(20, 17, 13, 0) 55%);
}
.ma-tile .ma-t-label {
	position: absolute;
	left: 20px;
	bottom: 16px;
	z-index: 2;
	color: #fff;
	font-weight: 650;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}
.ma-tile .ma-t-count {
	position: absolute;
	right: 20px;
	bottom: 19px;
	z-index: 2;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

/* ---------- Studio-Band (Warm-Sand, Einmann-Anker) ---------- */

.ma-studio-band {
	background: var(--ma-sand);
	margin-top: clamp(48px, 6.5vw, 80px);
}
.ma-studio-band-inner {
	max-width: var(--ma-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
	padding: clamp(48px, 6.5vw, 80px) var(--ma-pad-x);
}
.ma-studio-band img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 4.6;
	object-fit: cover;
	border-radius: 8px;
}
.ma-studio-band .ma-eyebrow { margin-bottom: 14px; }
.ma-studio-band p {
	color: var(--ma-tinte-s);
	max-width: 56ch;
	margin: 16px 0 0;
	line-height: 1.75;
}
.ma-studio-band .ma-btn { margin-top: 26px; }
.ma-studio-band em {
	font-family: var(--ma-accent);
	font-style: italic;
	font-weight: 480;
	color: var(--ma-tinte);
}
/* Bei langem Text: Bild oben ausrichten statt mittig quetschen */
.ma-studio-band-inner { align-items: start; }
.ma-studio-band img { position: sticky; top: 90px; }
.ma-studio-band .ma-sig {
	color: var(--ma-tinte-s);
	font-size: 0.88rem;
	margin-top: 30px;
}
.ma-studio-band .ma-sig .ma-no { font-size: 1.05rem; color: var(--ma-tinte); }

/* ---------- Technik-Statement (3D-Druck offensiv) ---------- */

.ma-tech-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}
.ma-tech-copy p {
	color: var(--ma-tinte-s);
	line-height: 1.75;
	max-width: 58ch;
	margin: 0 0 18px;
}
.ma-tech-copy p:last-child { margin-bottom: 0; }
.ma-tech-copy em {
	font-family: var(--ma-accent);
	font-style: italic;
	font-weight: 480;
	color: var(--ma-tinte);
}
@media (max-width: 900px) {
	.ma-tech-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ---------- Journal-Karten: ruhiger (Redesign-Overrides) ---------- */

.ma-journal-card {
	background: var(--ma-papier);
	border: 1px solid var(--ma-linie);
	border-top: 1px solid var(--ma-linie);
	border-radius: 7px;
	transition: border-color 200ms ease;
}
.ma-journal-card:hover { border-color: var(--ma-messing); }
.ma-journal-card .ma-jc-ghost { display: none; }
.ma-journal-card .ma-jc-kicker { letter-spacing: 0.1em; margin-bottom: 14px; }
.ma-journal-card h3,
.ma-journal-card .ma-jc-title {
	font-weight: 650;
	letter-spacing: -0.01em;
}
.ma-journal-grid { gap: 24px; }
.ma-journal-grid--solo { grid-template-columns: 1fr; }
.ma-journal-grid--solo .ma-journal-card { max-width: 760px; }

/* ---------- Newsletter-Band (dunkel, Startseite) ---------- */

.ma-nl-band {
	background: var(--ma-tinte);
	color: #f2efe9;
	margin-top: clamp(48px, 6.5vw, 80px);
}
.ma-nl-band-inner {
	max-width: var(--ma-max);
	margin-inline: auto;
	display: grid;
	/* minmax(0,…): sonst floort die Spalte auf die intrinsische
	   Formularbreite und erzeugt mobilen Overflow */
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
	padding: clamp(40px, 5.5vw, 64px) var(--ma-pad-x);
}
.ma-nl-band h2 {
	color: #fff;
	font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}
.ma-nl-band .ma-nl-band-sub {
	color: #b8b2a6;
	margin: 10px 0 0;
	font-size: 0.95rem;
}
.ma-nl-band .ma-nl-row { display: flex; gap: 10px; }
/* Flex-Items duerfen unter Inhaltsbreite schrumpfen — sonst mobiler Overflow */
.ma-nl-form input[type="email"] { min-width: 0; width: 0; }
.ma-nl-form button[type="submit"] { flex-shrink: 0; }
.ma-nl-band input[type="email"] {
	flex: 1;
	padding: 13px 16px;
	border-radius: 5px;
	border: 1px solid #454038;
	background: #232019;
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
}
.ma-nl-band input[type="email"]::placeholder { color: #8c857a; }
.ma-nl-band button[type="submit"] {
	padding: 13px 24px;
	border-radius: 5px;
	border: 0;
	background: var(--ma-messing);
	color: #fff;
	font: inherit;
	font-weight: 650;
	cursor: pointer;
	transition: background-color 200ms ease;
}
.ma-nl-band button[type="submit"]:hover { background: #b0850f; }
.ma-nl-band .ma-nl-hp { position: absolute; left: -9999px; }
.ma-nl-band .ma-nl-msg { color: #b8b2a6; font-size: 0.85rem; margin: 10px 0 0; min-height: 1.2em; }

/* ---------- View-Transition-Kopplung für die zwei neuen Karten ---------- */

.ma-vt-vase-strom { view-transition-name: product-vase-strom; }
.ma-vt-huelle-kant { view-transition-name: product-huelle-kant; }
body.ma-product-vase-strom .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
	view-transition-name: product-vase-strom;
}
body.ma-product-huelle-kant .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
	view-transition-name: product-huelle-kant;
}

/* ---------- Responsive (Startseite v2) ---------- */

@media (max-width: 1000px) {
	.ma-grid4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.ma-hero { grid-template-columns: 1fr; gap: 32px; }
	.ma-trust-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.ma-tiles { grid-template-columns: 1fr; }
	.ma-studio-band-inner { grid-template-columns: 1fr; gap: 28px; }
	.ma-nl-band-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.ma-grid4 { grid-template-columns: 1fr; }
}

/* Mengenrabatt-Hinweis (PDP) */
.ma-volume-note {
	font-size: 0.88rem;
	color: var(--ma-messing-d);
	background: var(--ma-sand);
	border-radius: 5px;
	padding: 10px 14px;
	margin: 0 0 14px;
}

/* Sprachumschalter (Topbar) */
.ma-lang { white-space: nowrap; }
.ma-lang a { color: rgba(242, 239, 233, 0.75); text-decoration: none; font-weight: 600; }
.ma-lang a:hover, .ma-lang a.is-active { color: #fff; }
.ma-lang i { font-style: normal; margin: 0 6px; opacity: 0.5; }