/* ═══════════════════════════════════════════════════════════════════════
   GIFANATIX — Shop-Designsystem
   Prototyp 2026-08-20

   Markenfarben laut CLAUDE.md: Navy #121425, Rot #C8102E, Schrift Nunito.

   Kontrast-Regel, die hier durchgehend gilt: Markenrot als Text auf Navy
   erreicht nur 2,8:1 und faellt durch die Pruefung. Rot wird deshalb nur
   als Flaeche benutzt, auf der weisser Text steht (5,9:1), oder auf
   hellem Grund. Nie roter Text auf dunklem Grund.
   ═══════════════════════════════════════════════════════════════════════ */

/* Schriften kommen ueber wp_enqueue_style in gfx/assets.php —
   ein @import hier wuerde sie ein zweites Mal laden. */

/* ── Tokens ─────────────────────────────────────────────────────────── */

:root {
	--navy:        #121425;
	--navy-2:      #1b1e33;
	--navy-3:      #262a44;
	--red:         #c8102e;
	--red-hot:     #e11337;
	--paper:       #ffffff;
	--soft:        #f5f6f8;
	--soft-2:      #eceef3;
	--ink:         #121425;
	--ink-2:       #4a4f60;
	--ink-3:       #686e7d;   /* 5,1:1 auf Weiss, 4,7:1 auf --soft */
	--line:        #e2e4ea;

	--on-dark:     #ffffff;
	--on-dark-2:   #b9bece;
	--on-dark-3:   #8b91a6;

	--shell:       min(1240px, 100% - 2.5rem);
	--radius:      6px;
	--radius-lg:   12px;

	--ease:        cubic-bezier(.22, .61, .36, 1);
	--shadow:      0 2px 8px rgba(18, 20, 37, .07);
	--shadow-lg:   0 18px 44px rgba(18, 20, 37, .16);
}

/* ── Reset ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
	overflow-x: hidden;          /* nichts darf horizontal ausbrechen */
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4 {
	margin: 0;
	line-height: 1.05;
	letter-spacing: -.025em;
	font-weight: 900;
	text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 8.5vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 5.2vw, 3.3rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.5rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 3px;
	border-radius: 3px;
}

.shell { width: var(--shell); margin-inline: auto; }
.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Kopfzeile ──────────────────────────────────────────────────────── */

.topbar {
	background: var(--red);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: center;
	padding: 9px 1rem;
}

.site-head {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(18, 20, 37, .94);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, .09);
	color: var(--on-dark);
}

.site-head__inner {
	width: var(--shell);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 68px;
}

/* Zwei Marken, klare Rollen: das Emblem ist das Zeichen, die Wortmarke
   der Name. Zusammen in der Kopfzeile, damit beide gelernt werden. */
.brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;            /* Tap-Ziel; die Grafiken sind kleiner */
	padding-right: .5rem;
}
.brand img   { max-height: 34px; width: auto; }   /* Notbremse */
.brand__mark { height: 34px; width: auto; }
.brand__word { height: 22px; width: auto; }

@media (max-width: 420px) {
	.brand__word { display: none; }   /* auf schmalen Geräten reicht das Zeichen */
	.brand__mark { height: 32px; }
}

.nav {
	display: flex;
	gap: 1.6rem;
	margin-left: auto;
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.nav a {
	position: relative;
	padding: 6px 0;
	color: var(--on-dark-2);
	transition: color .18s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }

.nav a::after {
	content: '';
	position: absolute;
	left: 0; right: 100%; bottom: 0;
	height: 2px;
	background: var(--red);
	transition: right .24s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }

.head-actions { display: flex; align-items: center; gap: .6rem; }

.nav-toggle {
	display: none;
	margin-left: auto;
	min-width: 44px; min-height: 44px;
	background: none; border: 0; color: #fff;
	font-size: 24px; line-height: 1; cursor: pointer;
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 52px;
	padding: 0 1.7rem;
	border: 2px solid transparent;
	border-radius: var(--radius);
	font-size: 15.5px;
	font-weight: 900;
	letter-spacing: .035em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .16s var(--ease), background .16s var(--ease),
	            border-color .16s var(--ease), color .16s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--red); color: #fff; }        /* 5.9:1 */
.btn--primary:hover { background: var(--red-hot); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.09); }

.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-3); }

.btn--sm { min-height: 44px; padding: 0 1.1rem; font-size: 13.5px; }
.btn--block { width: 100%; }

/* ── Sektionen ──────────────────────────────────────────────────────── */

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--dark { background: var(--navy); color: var(--on-dark); }
.section--soft { background: var(--soft); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Die Rubrik-Marke ist bewusst zurueckhaltend: ein roter Punkt statt
   einer roten Flaeche. Auf einer Seite voller bunter Stickmotive ist
   jede zusaetzliche Signalfarbe eine Konkurrenz zum Produkt. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .9rem;
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.eyebrow::before {
	content: '';
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--red);
	flex: 0 0 auto;
}
/* Ueberall dort, wo dunkler Grund liegt — nicht nur in .section--dark */
.section--dark .eyebrow,
.bundle-banner .eyebrow,
.shop-head .eyebrow { color: var(--on-dark-2); }

.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head p {
	margin-top: .9rem;
	font-size: 1.08rem;
	color: var(--ink-2);
}
.section--dark .section__head p { color: var(--on-dark-2); }

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero {
	position: relative;
	background: var(--navy);
	color: var(--on-dark);
	overflow: hidden;
}

.hero__inner {
	width: var(--shell);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding: clamp(3rem, 7vw, 6rem) 0;
}

.hero__copy { position: relative; z-index: 2; }

.hero h1 { margin-bottom: 1.4rem; }
.hero h1 .line { display: block; }
.hero h1 .accent {
	/* Rot als Flaeche mit weisser Schrift, nicht als roter Text */
	display: inline-block;
	padding: 0 .28em .04em;
	margin-left: -.1em;
	background: var(--red);
	color: #fff;
	transform: skewX(-5deg);
}
.hero h1 .accent > span { display: inline-block; transform: skewX(5deg); }

.hero__lede {
	max-width: 34rem;
	font-size: clamp(1.05rem, 1.6vw, 1.22rem);
	color: var(--on-dark-2);
	margin-bottom: 1.9rem;
}
.hero__lede strong { color: #fff; font-weight: 800; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.2rem; }

.hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem 2.4rem;
	padding-top: 1.6rem;
	border-top: 1px solid rgba(255, 255, 255, .13);
}
.hero__fact strong {
	display: block;
	font-size: 1.75rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
}
.hero__fact span {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--on-dark-3);
}

.hero__media {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 9 / 13;
	background: var(--navy-2);
}
.hero__media video { width: 100%; height: 100%; object-fit: cover; }

.hero__media-tag {
	position: absolute;
	left: 14px; bottom: 14px;
	display: flex; align-items: center; gap: 7px;
	padding: 7px 12px;
	border-radius: 100px;
	background: rgba(18, 20, 37, .82);
	backdrop-filter: blur(8px);
	font-size: 12px; font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase;
}
.hero__media-tag::before {
	content: '';
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--red);
	animation: pulse 2s var(--ease) infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: .45; transform: scale(1.5); }
}

/* ── Laufband: die Design-Wand ──────────────────────────────────────── */

.wall { background: var(--navy); padding: clamp(2.2rem, 4vw, 3.4rem) 0; overflow: hidden; }
.wall__head {
	width: var(--shell);
	margin: 0 auto clamp(1.4rem, 3vw, 2.2rem);
	color: var(--on-dark);
	text-align: center;
}
.wall__head p { color: var(--on-dark-2); margin-top: .7rem; }

.marquee {
	display: flex;
	gap: 10px;
	width: max-content;
	will-change: transform;
}
.marquee + .marquee { margin-top: 10px; }
/* Deutlich langsamer als anfangs: bei 225 Kacheln je Reihe war das
   Tempo so hoch, dass man kein einzelnes Motiv erkennen konnte. */
.marquee--l { animation: slide-l 210s linear infinite; }
.marquee--r { animation: slide-r 240s linear infinite; }

.wall:hover .marquee { animation-play-state: paused; }

@keyframes slide-l { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes slide-r { from { transform: translateX(-50%); }  to { transform: translateX(0); } }

.tile {
	flex: 0 0 auto;
	width: clamp(88px, 12vw, 128px);
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--navy-2);
	transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile:hover { transform: scale(1.09); box-shadow: 0 10px 30px rgba(0,0,0,.45); }

/* ── Produktkarten ──────────────────────────────────────────────────── */

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
}

/* ══ Das hidden-Attribut schlaegt jede Layout-Regel ════════════

   Der Browser gibt [hidden] nur ein schlichtes display:none mit. Jede
   eigene Regel mit einer Klasse ist staerker -- .card { display: flex }
   genuegt, und ein per JavaScript verstecktes Element bleibt sichtbar.

   Genau daran ist die Designsuche gescheitert: sie hat richtig gefiltert
   und 235 Karten auf hidden gesetzt, angezeigt wurden trotzdem alle 253.

   Diese eine Regel gilt fuer alles, was hidden benutzt -- statt fuer
   jeden Fall einzeln nachzubessern. (Die frueheren Einzelregeln weiter
   unten -- .cartpanel[hidden], .buybar[hidden] und die anderen -- sind
   damit ueberfluessig, schaden aber nicht.) */
[hidden] { display: none !important; }

.card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform .22s var(--ease), box-shadow .22s var(--ease),
	            border-color .22s var(--ease);
}
.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--ink-3);
}

.card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--soft);
	overflow: hidden;
}

/* Katalogkacheln zeigen das freigestellte Motiv, nicht den Gi. Der
   Kunde sucht hier nach dem Design — der Stoff drumherum lenkt ab. */
.card__media--art {
	background: #fff;
	display: grid;
	place-items: center;
	padding: 10px;
}
.card__media--art img {
	width: 100%; height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;    /* schluckt den weissen Rand der Vorlage */
}
.card--design:hover .card__media--art img { transform: scale(1.06); }
.card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }

.card__flag {
	position: absolute;
	top: 10px; left: 10px;
	padding: 4px 9px;
	border-radius: 3px;
	background: var(--red);
	color: #fff;
	font-size: 10.5px;
	font-weight: 900;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.card__flag--dark { background: var(--navy); }

.card__body {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .95rem 1.05rem 1.15rem;
	flex: 1;
}
.card__title { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.card__meta  { font-size: 13px; color: var(--ink-3); }
.card__price {
	margin-top: auto;
	padding-top: .5rem;
	font-size: 1.22rem;
	font-weight: 900;
	color: var(--ink);
}
.card__price small { font-size: .68em; font-weight: 700; color: var(--ink-3); }

/* ── Drei Wege ──────────────────────────────────────────────────────── */

.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

.path {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.8rem 1.6rem 1.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--paper);
	transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.path:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.path--feature { border-color: var(--red); border-width: 2px; }

.path__tag {
	position: absolute;
	top: -11px; left: 1.5rem;
	padding: 4px 11px;
	border-radius: 100px;
	background: var(--red);
	color: #fff;
	font-size: 11px; font-weight: 900;
	letter-spacing: .07em; text-transform: uppercase;
}

.path__no {
	font-size: 12px; font-weight: 900;
	letter-spacing: .12em;
	color: var(--ink-3);
	margin-bottom: .5rem;
}
.path h3 { margin-bottom: .55rem; }
.path p { font-size: .96rem; color: var(--ink-2); }

.path__price {
	margin: 1rem 0 1.2rem;
	font-size: 1.9rem; font-weight: 900; line-height: 1;
}
.path__price small { font-size: .5em; font-weight: 700; color: var(--ink-3); }
.path__price del { font-size: .52em; font-weight: 700; color: var(--ink-3); margin-right: .35rem; }
.path .btn { margin-top: auto; }

/* ── Bundle-Banner ──────────────────────────────────────────────────── */

.bundle-banner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding: clamp(1.8rem, 4vw, 3rem);
	border-radius: var(--radius-lg);
	background: var(--navy-2);
	color: var(--on-dark);
}
.bundle-banner h2 { margin-bottom: 1rem; }
.bundle-banner p { color: var(--on-dark-2); }

.bundle-maths {
	margin: 1.4rem 0;
	border-top: 1px solid rgba(255,255,255,.14);
}
.bundle-maths__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem 0;
	border-bottom: 1px solid rgba(255,255,255,.09);
	font-size: .97rem;
}
.bundle-maths__row span:last-child { font-weight: 800; white-space: nowrap; }
.bundle-maths__row--free span:last-child { color: #6ee7a4; }   /* 8.3:1 auf navy */
.bundle-maths__row--total {
	border-bottom: 0;
	padding-top: .9rem;
	font-size: 1.15rem;
	font-weight: 900;
}
.bundle-maths__row--total span:last-child { font-size: 1.5rem; }
.bundle-maths__was { color: var(--on-dark-3); text-decoration: line-through; font-weight: 700; }

.bundle-visual {
	display: grid;
	/* Beide Bilder gleich breit: der Guertel ist die halbe Aussage dieses
	   Angebots. In der schmalen Spalte war von den Textzeilen nichts mehr
	   zu sehen — genau von dem, was hier geschenkt wird. */
	grid-template-columns: 1fr 1fr;
	gap: .9rem;
	align-items: stretch;
}
.bundle-visual figure {
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--navy-3);
}
.bundle-visual img { width: 100%; height: 100%; object-fit: cover; }

/* Der Guertel als Foto, nicht als gezeichneter Balken. Die Bildunterschrift
   liegt darauf, damit beide Bilder gleich hoch bleiben. */
.bundle-visual__belt { position: relative; }
.bundle-visual__belt figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.6rem .8rem .7rem;
	background: linear-gradient(180deg, rgba(18,20,37,0), rgba(18,20,37,.88));
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1.35;
	color: #fff;
	text-align: center;
}

/* ── Zonen-Erklaerung ───────────────────────────────────────────────── */

.zones { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }

.zones__figure {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--soft);
}

.zone-list { display: flex; flex-direction: column; gap: .55rem; }

.zone-row {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .85rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.zone-row.is-lit { border-color: var(--red); transform: translateX(5px); }

.zone-row__dot {
	flex: 0 0 auto;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--line);
	transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.zone-row.is-lit .zone-row__dot {
	background: var(--red);
	box-shadow: 0 0 0 5px rgba(200, 16, 46, .16);
}

.zone-row__name { font-weight: 800; flex: 1; }
.zone-row__price { font-weight: 900; white-space: nowrap; }
.zone-row__price small { font-weight: 700; color: var(--ink-3); font-size: .78em; }

.zone-row--hero {
	border-left: 4px solid var(--red);
	background: linear-gradient(90deg, rgba(200,16,46,.05), transparent 60%);
}
.zone-row--hero .zone-row__name { display: flex; flex-direction: column; gap: 2px; }
.zone-row__note { font-size: 12.5px; font-weight: 700; color: var(--red); }

/* ── Werkstatt ──────────────────────────────────────────────────────── */

.workshop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.workshop figure {
	margin: 0;
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--navy-2);
}
.workshop video { width: 100%; height: 100%; object-fit: cover; }
.workshop figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 2.4rem .95rem .9rem;
	background: linear-gradient(transparent, rgba(18,20,37,.92));
	color: #fff;
	font-size: 13.5px;
	font-weight: 800;
}

/* ── Gruender ───────────────────────────────────────────────────────── */

.founder { display: grid; grid-template-columns: .4fr .6fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.founder__photo {
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--navy-2);
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder blockquote {
	margin: 0 0 1.3rem;
	font-size: clamp(1.25rem, 2.6vw, 1.75rem);
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -.015em;
}
.founder cite {
	display: block;
	font-style: normal;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--on-dark-3);
}

/* ── Stimmen ────────────────────────────────────────────────────────── */

.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

.voice {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--paper);
}
.voice__stars { color: var(--red); font-size: 15px; letter-spacing: .12em; }
.voice p { font-size: 1rem; color: var(--ink-2); flex: 1; }
.voice__who { display: flex; align-items: center; gap: .75rem; }
.voice__who img {
	width: 42px; height: 42px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--soft-2);
}
.voice__who strong { display: block; font-size: .95rem; }
.voice__who span { font-size: 12.5px; color: var(--ink-3); }

/* ── Instagram ──────────────────────────────────────────────────────── */

.ig-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: .55rem; }
.ig-strip a {
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--navy-2);
	transition: transform .2s var(--ease);
}
.ig-strip a:hover { transform: scale(1.05); }
.ig-strip img { width: 100%; height: 100%; object-fit: cover; }

/* ── FAQ ────────────────────────────────────────────────────────────── */

.faq { max-width: 46rem; }
.faq details {
	border-bottom: 1px solid var(--line);
	padding: 1.05rem 0;
}
.faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	list-style: none;
	cursor: pointer;
	font-size: 1.05rem;
	font-weight: 800;
	min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--red);
	transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: .7rem; color: var(--ink-2); }

/* ── Abschluss-Banner ───────────────────────────────────────────────── */

.closer { text-align: center; }
.closer h2 { margin-bottom: 1rem; }
.closer p { max-width: 36rem; margin-inline: auto; color: var(--on-dark-2); }
.closer__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* ── Fusszeile ──────────────────────────────────────────────────────── */

.site-foot { background: var(--navy); color: var(--on-dark-2); padding: clamp(2.5rem, 5vw, 4rem) 0 1.6rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.foot-grid img { height: 24px; margin-bottom: .9rem; }
.foot-grid h4 {
	margin-bottom: .8rem;
	font-size: 12px; font-weight: 900;
	letter-spacing: .1em; text-transform: uppercase;
	color: #fff;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.foot-grid li a {
	display: flex;
	align-items: center;
	min-height: 34px;            /* ueber dem 24px-Minimum, ohne die Spalte aufzublaehen */
	font-size: .94rem;
	transition: color .16s var(--ease);
}
.foot-grid a:hover { color: #fff; }
.foot-grid p { font-size: .92rem; }

.foot-base a { display: inline-flex; align-items: center; min-height: 32px; }

.foot-base {
	margin-top: 2.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(255,255,255,.1);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	font-size: 13px;
	color: var(--on-dark-3);
}

/* ── Scroll-Reveal ──────────────────────────────────────────────────── */

/* Nur ausblenden, wenn JavaScript laeuft — sonst waere die halbe
   Seite unsichtbar, falls das Skript ausfaellt. Siehe gfx_js_marker()
   in gfx/assets.php. */
.gfx-js [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.gfx-js [data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
[data-reveal][data-delay="5"] { transition-delay: .40s; }

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
	.hero__inner  { grid-template-columns: 1fr; }
	.hero__media  { aspect-ratio: 16 / 11; order: -1; }
	.paths        { grid-template-columns: 1fr; }
	.zones        { grid-template-columns: 1fr; }
	.founder      { grid-template-columns: 1fr; }
	.founder__photo { max-width: 280px; aspect-ratio: 1; }
	.voices       { grid-template-columns: 1fr; }
	.bundle-banner{ grid-template-columns: 1fr; }
	.foot-grid    { grid-template-columns: 1fr 1fr; }
	.ig-strip     { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
	:root { --shell: min(1240px, 100% - 2rem); }

	/* Das geschlossene Menue schaute oben aus dem Bild heraus — der letzte
	   Eintrag „Academies" stand ueber der Topbar und war anklickbar.

	   Ursache: .site-head traegt backdrop-filter. Ein Element mit
	   backdrop-filter wird zum Bezugsrahmen fuer position: fixed —
	   `inset: 68px` mass dadurch ab Header-Oberkante statt ab Fensterkante.
	   Um die Hoehe der Topbar (60 px) verschoben reichte das Hochschieben
	   um -125 % nicht mehr, und die Unterkante blieb 52 px im Bild stehen.

	   Nicht am Prozentwert drehen: der bricht wieder, sobald ein
	   Menuepunkt dazukommt. Stattdessen am Header verankern — der ist
	   ohnehin schon der Bezugsrahmen — und geschlossen hart unsichtbar
	   schalten. visibility und pointer-events sind der eigentliche Fix:
	   sie machen das Menue unabhaengig davon unerreichbar, wo es liegt. */
	.nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: .5rem 1rem 1.2rem;
		background: var(--navy);
		border-bottom: 1px solid rgba(255,255,255,.1);
		font-size: 16px;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		/* Uebergang NUR auf transform. Weder visibility noch opacity duerfen
		   hier mituebergeben werden — beides ist gemessen schiefgegangen:

		   • `visibility 0s linear .28s` blieb nach dem Schliessen dauerhaft
		     auf `visible` stehen. Unsichtbar war das Menue trotzdem, aber
		     seine fuenf Links blieben in der Tab-Reihenfolge und wurden
		     von Screenreadern vorgelesen.
		   • `opacity .2s` lief beim ERSTEN Antippen einer frisch geladenen
		     Seite gar nicht an: das Element ist in dem Moment noch
		     `visibility: hidden`, also nicht gerendert, und der Browser
		     setzt keinen Startwert. Das Menue blieb auf opacity 0 — es
		     oeffnete sich, war aber nicht zu sehen.

		   Beide schalten jetzt hart um. Die Bewegung macht transform. */
		transition: transform .28s var(--ease);
	}
	.nav[data-open="true"] {
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	.nav a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
	.nav a::after { display: none; }

	.nav-toggle  { display: block; }
	.head-actions .btn { display: none; }

	.workshop { grid-template-columns: 1fr; }
	.workshop figure { aspect-ratio: 16 / 10; }
	.grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .8rem; }
	.hero__facts { gap: 1.1rem 1.8rem; }
	.hero__fact strong { font-size: 1.45rem; }
	.hero__cta .btn { flex: 1 1 100%; }
	.bundle-visual { grid-template-columns: 1fr 1fr; gap: .6rem; }
}

@media (max-width: 520px) {
	.foot-grid { grid-template-columns: 1fr; }
	.card__body { padding: .8rem .85rem 1rem; }
	.card__title { font-size: .95rem; }
}

/* Wer Bewegung reduziert haben will, bekommt einen ruhigen Shop. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal] { opacity: 1; transform: none; }
}

/* ── Design-Wand: Kacheln mit Namen ─────────────────────────────────── */

.tile {
	position: relative;
	display: block;
	background: #fff;
	padding: 8px;
}
.tile img {
	width: 100%; height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* Der Name erscheint erst beim Zeigen — im Ruhezustand soll die Wand
   als Bildteppich wirken, nicht als Liste. */
.tile__name {
	position: absolute;
	inset: auto 0 0;
	padding: 6px;
	background: rgba(18, 20, 37, .92);   /* deckend, nicht als Verlauf */
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	opacity: 0;
	transition: opacity .18s var(--ease);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tile:hover .tile__name,
.tile:focus-visible .tile__name { opacity: 1; }

.wall__cta { margin: 1.6rem 0 0; text-align: center; }

/* ── Instagram-Kopfzeile ────────────────────────────────────────────── */

.ig-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.2rem, 3vw, 2rem);
}
.ig-head h2 { margin: 0; }

/* ── Emblem im Abschluss-Banner ─────────────────────────────────────── */

.closer__mark {
	display: block;
	margin: 0 auto 1.2rem;
	width: 78px; height: auto;
	opacity: .95;
}

@media (max-width: 780px) {
	.closer__mark { width: 62px; }
	.tile__name { opacity: 1; font-size: 9.5px; }   /* ohne Hover auf Touch */
}

/* ═══════════════════════════════════════════════════════════════════════
   MARKENZEICHEN
   Das Emblem war bisher nur 26 px hoch in der Kopfzeile — zu klein, um
   sich einzuprägen. Es bekommt jetzt drei Auftritte in aufsteigender
   Größe: Kopfzeile, Wasserzeichen im Hero, eigene Sektion.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero-Wasserzeichen: groß, aber so leise, dass es die Headline nicht
   stört. Es soll wirken wie ein Stempel auf dem Stoff. */
.hero__watermark {
	position: absolute;
	right: -6%;
	top: 50%;
	transform: translateY(-50%);
	width: min(620px, 52vw);
	height: auto;
	opacity: .045;
	pointer-events: none;
	z-index: 0;
}

.markbar { padding-block: clamp(2.5rem, 5vw, 4rem); }

.markbar__grid {
	display: grid;
	grid-template-columns: minmax(0, .32fr) minmax(0, .68fr);
	gap: clamp(1.6rem, 5vw, 4rem);
	align-items: center;
}

.markbar__mark {
	display: grid;
	place-items: center;
	padding: clamp(1.2rem, 3vw, 2.2rem);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .04);
}
.markbar__mark img { width: 100%; max-width: 230px; height: auto; }

.markbar p { color: var(--on-dark-2); }
.markbar__note {
	margin-top: .8rem;
	font-size: .92rem;
	color: var(--on-dark-3);
}

/* ── Bundle: was genau kostenlos ist ────────────────────────────────── */

.bundle-banner h2 em {
	font-style: normal;
	color: #6ee7a4;              /* 8,3:1 auf Navy — dasselbe Grün wie die Zeilen */
}

.bundle-saving {
	margin: -.4rem 0 1.4rem;
	font-size: .95rem;
	font-weight: 800;
	color: #6ee7a4;
}

/* ── Instagram-Reels ────────────────────────────────────────────────── */

.reels {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .8rem;
}

.reel {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--navy-2);
	transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.reel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.reel video { width: 100%; height: 100%; object-fit: cover; }

.reel__play {
	position: absolute;
	top: 10px; right: 10px;
	display: grid; place-items: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: rgba(18, 20, 37, .72);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 11px;
	padding-left: 2px;
}

.reel__cap {
	position: absolute;
	inset: auto 0 0;
	padding: 1.6rem .7rem .65rem;
	background: linear-gradient(transparent, rgba(18, 20, 37, .92));
	background-color: rgba(18, 20, 37, .55);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.25;
}

/* ── Größentabelle als Bild ─────────────────────────────────────────── */

.sizechart { margin: .9rem 0 0; }
.sizechart img {
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
}
.sizechart figcaption {
	margin-top: .5rem;
	font-size: 12.5px;
	color: var(--ink-3);
}

@media (max-width: 1000px) {
	.reels { grid-template-columns: repeat(2, 1fr); }
	.markbar__grid { grid-template-columns: 1fr; }
	.markbar__mark { max-width: 260px; }
}

@media (max-width: 780px) {
	.hero__watermark { width: 78vw; right: -18%; opacity: .05; }
	.reel__cap { font-size: 11px; padding: 1.3rem .55rem .55rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WARENKORB
   Im echten Shop macht das WooCommerce. Hier reicht ein schlanker Ersatz,
   damit der Kaufweg bis zum Ende durchläuft und prüfbar wird.
   ═══════════════════════════════════════════════════════════════════════ */

.cart-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 44px;
	padding: 0 .8rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--radius);
	background: transparent;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	transition: border-color .16s var(--ease), background .16s var(--ease);
}
.cart-link:hover { border-color: #fff; background: rgba(255, 255, 255, .09); }
.cart-link__icon { font-size: 15px; }
.cart-link__count {
	display: grid; place-items: center;
	min-width: 19px; height: 19px;
	padding: 0 5px;
	border-radius: 100px;
	background: var(--red);
	font-size: 11px;
	font-weight: 900;
}
.cart-link__sum { white-space: nowrap; }

.cartpanel { position: fixed; inset: 0; z-index: 200; }
.cartpanel[hidden] { display: none; }

.cartpanel__scrim {
	position: absolute; inset: 0;
	background: rgba(18, 20, 37, .55);
	backdrop-filter: blur(3px);
	animation: cart-fade .2s var(--ease);
}

.cartpanel__box {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(430px, 100%);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -12px 0 40px rgba(18, 20, 37, .22);
	animation: cart-slide .26s var(--ease);
}

@keyframes cart-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cart-slide { from { transform: translateX(100%); } to { transform: none; } }

.cartpanel__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1.1rem 1.2rem;
	border-bottom: 1px solid var(--line);
	font-size: 1.05rem;
}
.cartpanel__x {
	min-width: 40px; min-height: 40px;
	border: 0; border-radius: var(--radius);
	background: transparent;
	font-size: 17px;
	color: var(--ink-2);
	cursor: pointer;
}
.cartpanel__x:hover { background: var(--soft); }

.cartpanel__body { flex: 1; overflow-y: auto; padding: .8rem 1.2rem; }
.cartpanel__empty { padding: 2rem 0; text-align: center; color: var(--ink-3); }

.cartitem {
	display: grid;
	grid-template-columns: 62px 1fr auto;
	gap: .8rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--soft-2);
}
.cartitem:last-child { border-bottom: 0; }
.cartitem img {
	width: 62px; height: 78px;
	object-fit: cover;
	border-radius: 4px;
	background: var(--soft);
}
.cartitem__body strong { display: block; font-size: .95rem; margin-bottom: .3rem; }
.cartitem__body ul { list-style: none; margin: 0; padding: 0; }
.cartitem__body li {
	display: flex; justify-content: space-between; gap: .6rem;
	font-size: 12.5px;
	color: var(--ink-2);
	padding: 1px 0;
}
.cartitem__body em { font-style: normal; color: #1a7f45; font-weight: 800; }
.cartitem__side { text-align: right; }
.cartitem__side span { display: block; font-weight: 900; white-space: nowrap; }
.cartitem__side button {
	margin-top: .3rem;
	border: 0; padding: 4px 0;
	background: none;
	font-size: 12px;
	color: var(--ink-3);
	text-decoration: underline;
	cursor: pointer;
}
.cartitem__side button:hover { color: var(--red); }

.cartpanel__foot {
	padding: 1.1rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
	background: var(--soft);
}
.cartpanel__total {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-bottom: .8rem;
	font-size: 1rem;
	font-weight: 800;
}
.cartpanel__total strong { font-size: 1.4rem; font-weight: 900; }
.cartpanel__more { margin-top: .5rem; color: var(--ink-2); border-color: var(--line); }
.cartpanel__more:hover { border-color: var(--ink-3); background: #fff; }

@media (max-width: 780px) {
	.head-actions .cart-link { display: inline-flex; }   /* bleibt sichtbar */
	.cart-link__sum { display: none; }
	.cartpanel__box { width: 100%; }
}

/* ── Service-Abschnitte ─────────────────────────────────────────────
   Ziele für die Footer-Links. Vorher zeigten die auf Anker, die es
   nicht gab — der Klick landete kommentarlos am Seitenanfang.
   ─────────────────────────────────────────────────────────────────── */

.infogrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 1.1rem;
}

.infocard {
	padding: 1.4rem 1.5rem 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #fff;
	scroll-margin-top: 90px;      /* damit der Anker nicht unter der Kopfzeile landet */
}
.infocard h3 { margin-bottom: .6rem; }
.infocard p { font-size: .95rem; color: var(--ink-2); }

.infocard ul {
	margin: .9rem 0 1rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	font-size: .92rem;
	color: var(--ink-2);
}
.infocard li { display: flex; gap: .55rem; }
.infocard li::before { content: '·'; font-weight: 900; color: var(--red); }
.infocard a:not(.btn) {
	display: inline-flex;
	align-items: center;
	min-height: 28px;              /* lag bei exakt 24 px, zu knapp */
	color: var(--red);
	text-decoration: underline;
}

.infocard__note {
	margin-top: .8rem;
	padding-top: .8rem;
	border-top: 1px solid var(--soft-2);
	font-size: 12.5px;
	color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════════════
   ECHTE STÜCKE
   Fotos fertiger Gis, bevor sie rausgingen. Der Katalog zeigt Motive,
   die Mockups zeigen Studioaufnahmen — hier sieht man Stickerei auf
   echtem Stoff, in echtem Licht. Das ist der Beweis, den kein Rendering
   liefert.
   ═══════════════════════════════════════════════════════════════════════ */

.echt__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .9rem;
}

/* Die Aufnahmen sind hochkant fotografiert — ein Gi am Bügel. Ein
   Querformat-Raster hätte davon nur einen Streifen gezeigt. */
.echt__item {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--soft);
}

.echt__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;   /* das Rückenmotiv sitzt im oberen Drittel */
	transition: transform .5s var(--ease);
}
.echt__item:hover img { transform: scale(1.04); }

.echt__item figcaption {
	position: absolute;
	inset: auto 0 0;
	padding: 1.8rem .85rem .7rem;
	background: linear-gradient(transparent, rgba(18, 20, 37, .9));
	background-color: rgba(18, 20, 37, .4);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.3;
}

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

@media (max-width: 520px) {
	.echt__grid { gap: .6rem; }
	.echt__item figcaption { font-size: 11.5px; padding: 1.5rem .7rem .6rem; }
}

/* ── Paginierung im Katalog ─────────────────────────────────────────
   Der Prototyp lud per Knopf nach. Live laeuft es ueber die normale
   WordPress-Paginierung: das bleibt mit Zurueck-Taste benutzbar und
   jede Seite ist verlinkbar. */
.gfx-seiten {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}
.gfx-seiten .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--ink-2);
	text-decoration: none;
	transition: border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.gfx-seiten a.page-numbers:hover { border-color: var(--ink-3); color: var(--ink); }
.gfx-seiten .page-numbers.current {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;             /* 15,8:1 */
}
.gfx-seiten .page-numbers.dots { border-color: transparent; background: none; }

/* Die Sortierung ist live ein Formular, kein reines Select. */
.shop-meta .sort { display: flex; align-items: center; gap: .5rem; margin: 0; }

/* Kategoriefilter sind live Links statt Knoepfe — gleiche Optik. */
a.filter { text-decoration: none; }


/* ══ Katalogseite — aus css/shop.css des Prototyps ══ */
/* Die Filterleiste und die Kopfzone des Katalogs stehen nicht in
   gifanatix.css, sondern in einem eigenen Stylesheet. Ohne das
   liefen die Kategorielinks als nackter Fliesstext. */

/* ═══════════════════════════════════════════════════════════════════════
   GIFANATIX — Kategorieseite
   Die Aufgabe hier ist Auswahl sichtbar zu machen: 253 Designs sind das
   staerkste Argument der Marke, aber nur wenn man sie auch sieht.
   ═══════════════════════════════════════════════════════════════════════ */

.shop-head {
	background: var(--navy);
	color: var(--on-dark);
	padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}
.shop-head h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: .8rem; }
.shop-head p { max-width: 40rem; color: var(--on-dark-2); }
.shop-head strong { color: #fff; font-weight: 800; }

/* ── Filterleiste ───────────────────────────────────────────────────── */

.filterbar {
	position: sticky;
	top: 68px;
	z-index: 40;
	background: rgba(255,255,255,.97);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}

/* Vorher scrollte die Leiste horizontal — die hinteren Kategorien waren
   damit unsichtbar, ohne dass etwas darauf hinwies. Jetzt bricht sie um,
   und alle 16 stehen da. */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	padding: .8rem 0;
}

.filter {
	flex: 0 0 auto;
	/* min-height allein zentriert nichts — der Text sass am oberen Rand
	   der Pille. Betrifft auch den Desktop. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--line);
	border-radius: 100px;
	background: #fff;
	font-size: 14px;
	font-weight: 800;
	color: var(--ink-2);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.filter:hover { border-color: var(--ink-3); color: var(--ink); }
.filter.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── Kategorien auf dem Handy: aufklappbar ──────────────────────────
   20 Pillen ergaben neun Zeilen = 634 px klebende Leiste. Auf dem
   Desktop bleibt alles wie bisher: der Knopf ist dort ausgeblendet
   und die Liste immer offen. */

.filterbar__knopf { display: none; }

@media (max-width: 780px) {
	.filterbar__knopf {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .6rem;
		width: 100%;
		min-height: 48px;
		padding: 0 .2rem;
		border: 0;
		background: none;
		font: inherit;
		font-size: 14px;
		font-weight: 800;
		color: var(--ink-3);
		cursor: pointer;
		text-align: left;
	}
	.filterbar__knopf strong { color: var(--ink); font-weight: 900; }
	.filterbar__pfeil { flex: 0 0 auto; transition: transform .18s var(--ease); }
	.filterbar__knopf[aria-expanded="false"] .filterbar__pfeil { transform: rotate(-90deg); }

	/* Zugeklappt wird nur per JS-Klasse. Ohne JavaScript bleibt die
	   Liste sichtbar — sonst waere keine Kategorie mehr erreichbar. */
	.filters.is-zu { display: none; }

	.filters {
		max-height: 60vh;
		overflow-y: auto;
		padding: 0 0 .8rem;
		-webkit-overflow-scrolling: touch;
	}
	.filter { min-height: 42px; font-size: 13.5px; padding: 0 .85rem; }
}

/* ── Kopfzeile über dem Raster ──────────────────────────────────────── */

.shop-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.2rem;
	font-size: 14px;
	font-weight: 800;
	color: var(--ink-3);
}

.sort select {
	min-height: 44px;
	padding: 0 .8rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
	cursor: pointer;
}

.shop-more { margin-top: 2.2rem; text-align: center; }

@media (max-width: 520px) {
	.shop-meta { font-size: 13px; }
}

/* ── Filter mit Anzahl ──────────────────────────────────────────────── */

.filter em {
	font-style: normal;
	font-weight: 700;
	opacity: .55;
	margin-left: .25rem;
}

.shop-note {
	display: block;
	margin-top: .9rem;
	font-size: 13px;
	color: var(--ink-3);
}

/* Katalogkacheln duerfen enger stehen — das Motiv traegt sich selbst.
   Hiess frueher #shop-grid; das Markup vergibt aber id="gfx-raster"
   (archive-product.php). Beide Regeln liefen deshalb ins Leere, die
   2-Spalten-Ansicht auf dem Handy griff nie. */
#gfx-raster { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }

@media (max-width: 520px) {
	#gfx-raster { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
}


/* ══ Produktseite — aus css/produkt.css des Prototyps ══ */
/* Dieselbe Falle wie bei shop.css: die Produktseite hat ein
   eigenes Stylesheet. Ohne das laeuft die Seite unformatiert. */

/* ═══════════════════════════════════════════════════════════════════════
   GIFANATIX — Produktseite
   Ergaenzt gifanatix.css. Der Bundle-Block ist hier die wichtigste
   Komponente: er ist der Unterschied zwischen 75 € und 85 € Warenkorb.
   ═══════════════════════════════════════════════════════════════════════ */

.crumbs {
	display: flex; flex-wrap: wrap; gap: .45rem;
	padding: 1.1rem 0;
	font-size: 13px; color: var(--ink-3);
}
.crumbs a:hover { color: var(--ink); }

.pdp {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.6rem, 4vw, 3.4rem);
	align-items: start;
	padding-bottom: clamp(2rem, 5vw, 4rem);
}

/* ── Galerie ────────────────────────────────────────────────────────── */

.pdp__media { position: sticky; top: 88px; }

.pdp__stage {
	margin: 0 0 .7rem;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--soft);
}
.pdp__stage img { width: 100%; height: 100%; object-fit: cover; }

/* Vier Kacheln a 74 px passen bei 375 px knapp in die Reihe, fuenf nicht
   mehr. Statt sie umbrechen zu lassen, wischt man seitlich durch. */
.pdp__thumbs {
	display: flex;
	gap: .6rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.pdp__thumbs::-webkit-scrollbar { display: none; }
.pdp__thumb { scroll-snap-align: start; }
.pdp__thumb {
	flex: 0 0 auto;
	width: 74px; height: 92px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--soft);
	cursor: pointer;
	transition: border-color .18s var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb.is-active { border-color: var(--red); }

/* ── Kaufbereich ────────────────────────────────────────────────────── */

.pdp__flag {
	display: inline-block;
	margin-bottom: .7rem;
	padding: 4px 10px;
	border-radius: 3px;
	background: var(--navy);
	color: #fff;
	font-size: 11px; font-weight: 900;
	letter-spacing: .08em; text-transform: uppercase;
}

.pdp__title { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-bottom: .7rem; }

.pdp__price { margin-bottom: 1.1rem; }
.pdp__price strong { font-size: 2.1rem; font-weight: 900; letter-spacing: -.02em; }
.pdp__price-note { display: block; font-size: 13px; color: var(--ink-3); margin-top: .15rem; }

.pdp__lede { color: var(--ink-2); margin-bottom: 1.6rem; }

/* ── Optionen ───────────────────────────────────────────────────────── */

.opt { border: 0; padding: 0; margin: 0 0 1.3rem; }

.opt__label {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	width: 100%;
	padding: 0 0 .55rem;
	font-size: 12px; font-weight: 900;
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--ink-3);
}
.opt__aside {
	font-size: 12px; font-weight: 800;
	text-transform: none; letter-spacing: 0;
	color: var(--red); text-decoration: underline;
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip { position: relative; cursor: pointer; }
.chip input {
	position: absolute; opacity: 0;
	width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.chip > span {
	display: flex; align-items: center; gap: .5rem;
	min-height: 46px; min-width: 56px;
	padding: 0 1rem;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	font-weight: 800;
	transition: border-color .16s var(--ease), background-color .16s var(--ease);
}

/* ══════════════════════════════════════════════════════════════════════
   AUSWAHL-ZUSTAND — robuster Selektor
   Die Regel lag vorher auf `input:checked + span`. Bei Radios, die per
   opacity:0 unsichtbar über dem Label liegen, aktualisiert Chromium den
   Nachbar-Selektor nach einem Klick nicht zuverlässig: die abgewählte
   Chip behielt ihren dunklen Hintergrund, bekam aber dunklen Text —
   beide Zustände waren unlesbar.

   `:has()` auf dem Elternelement erzwingt eine saubere Neuberechnung.
   Die alte Regel bleibt als Rückfall für Browser ohne :has() stehen.
   ══════════════════════════════════════════════════════════════════════ */

.chip input:checked + span,
.chip:has(input:checked) > span {
	border-color: var(--navy);
	background: var(--navy);
	color: #fff;
}
.chip input:focus-visible + span,
.chip:has(input:focus-visible) > span { outline: 3px solid var(--red); outline-offset: 2px; }
.chip:hover > span { border-color: var(--ink-3); }
.chip input:checked + span i,
.chip:has(input:checked) > span i { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }

.chip--swatch i {
	width: 18px; height: 18px;
	border-radius: 50%;
	flex: 0 0 auto;
}

/* ── Bundle ─────────────────────────────────────────────────────────── */

.bundle {
	margin: 0 0 1.4rem;
	border: 2px solid var(--red);
	border-radius: var(--radius-lg);
	background: #fff;
	overflow: hidden;
}

.bundle__toggle {
	display: flex; align-items: flex-start; gap: .85rem;
	padding: 1.1rem 1.2rem;
	cursor: pointer;
	transition: background .18s var(--ease);
}
.bundle__toggle:hover { background: #fdf6f7; }

.bundle__toggle input {
	flex: 0 0 auto;
	width: 22px; height: 22px; margin: 3px 0 0;
	accent-color: var(--red);
	cursor: pointer;
}

.bundle__body { flex: 1; min-width: 0; }

.bundle__headline {
	display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
	font-size: 1.12rem; font-weight: 900;
}

.bundle__badge {
	padding: 3px 9px;
	border-radius: 100px;
	background: var(--red);
	color: #fff;                       /* 5.9:1 */
	font-size: 10.5px; font-weight: 900;
	letter-spacing: .06em; text-transform: uppercase;
}

.bundle__pricing { display: flex; align-items: baseline; gap: .6rem; margin-top: .35rem; }
.bundle__was { color: var(--ink-3); text-decoration: line-through; font-size: .95rem; font-weight: 700; }
.bundle__now { font-size: 1.5rem; font-weight: 900; color: var(--red); }  /* rot auf weiss */

.bundle__sub {
	display: block; margin-top: .4rem;
	font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.bundle__sub strong { color: var(--ink); }

.bundle__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .85rem 1rem;
	padding: .3rem 1.2rem 1.2rem;
	border-top: 1px solid var(--soft-2);
}
.bundle__fields[hidden] { display: none; }

.bundle__row { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.bundle__row label {
	font-size: 11.5px; font-weight: 800;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--ink-3);
}
.bundle__row select,
.bundle__row input[type="text"] {
	width: 100%;
	min-height: 46px;
	padding: 9px 11px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font: inherit;
	font-size: 16px;               /* verhindert iOS-Zoom beim Fokus */
	color: var(--ink);
}
.bundle__note { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* ── Personalisierung ───────────────────────────────────────────────── */

.perso {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	margin-bottom: 1.3rem;
	overflow: hidden;
}
.perso summary {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	padding: 1rem 1.2rem;
	min-height: 56px;
	list-style: none;
	cursor: pointer;
	font-weight: 800;
}
.perso summary::-webkit-details-marker { display: none; }
.perso summary em {
	font-style: normal; font-weight: 700;
	font-size: 12px; color: var(--ink-3);
	text-transform: uppercase; letter-spacing: .06em;
	margin-left: .4rem;
}
.perso__hint { font-size: 13px; font-weight: 800; color: var(--red); white-space: nowrap; }

.perso__body { padding: 0 1.2rem 1.2rem; }
.perso__body > p { font-size: .93rem; color: var(--ink-2); margin-bottom: .85rem; }

.perso__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

.perso__row {
	display: flex; align-items: center; gap: .6rem;
	min-height: 46px;
	padding: .5rem .75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	font-size: .93rem;
	transition: border-color .16s var(--ease);
}
.perso__row:hover { border-color: var(--ink-3); }
.perso__row input { width: 19px; height: 19px; accent-color: var(--red); cursor: pointer; }
.perso__row span { flex: 1; }
.perso__row b { font-weight: 800; color: var(--ink-2); }
.perso__row:has(input:checked) { border-color: var(--red); background: rgba(200,16,46,.04); }

/* ── Preisaufstellung ───────────────────────────────────────────────── */

.tally {
	margin: 0 0 1.1rem;
	padding: .9rem 1.1rem;
	border-radius: var(--radius);
	background: var(--soft);
	font-size: .95rem;
}
.tally__row {
	display: flex; justify-content: space-between; gap: 1rem;
	padding: .3rem 0;
}
.tally__row span:last-child { font-weight: 800; white-space: nowrap; }
.tally__row--free span:last-child { color: #1a7f45; }        /* 4.9:1 auf hellgrau */
.tally__row--note {
	padding-top: .5rem;
	font-size: 12.5px;
	color: var(--ink-3);
	display: block;
}
.tally__row--total {
	margin-top: .4rem; padding-top: .7rem;
	border-top: 1px solid var(--line);
	font-size: 1.1rem; font-weight: 900;
}

.pdp__cta { margin-bottom: 1.1rem; }

.trust {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: .45rem;
	font-size: 13.5px; color: var(--ink-2);
}
.trust li { display: flex; gap: .55rem; }
.trust li::before { content: '✓'; color: var(--red); font-weight: 900; }

/* ── Größentabelle ──────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; margin-top: 1.2rem; }   /* Tabelle scrollt in sich */

.size-table {
	width: 100%;
	min-width: 380px;
	border-collapse: collapse;
	font-size: .95rem;
}
.size-table th, .size-table td {
	padding: .75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--line);
}
.size-table th {
	background: var(--navy); color: #fff;
	font-size: 12px; font-weight: 900;
	letter-spacing: .07em; text-transform: uppercase;
}
.size-table td:first-child { font-weight: 900; }
.size-note { margin-top: .8rem; font-size: 13px; color: var(--ink-3); }

/* ── Sticky Kaufleiste (nur Handy) ──────────────────────────────────── */

.buybar {
	display: none;
	position: fixed;
	inset: auto 0 0;
	z-index: 80;
	align-items: center;
	gap: 1rem;
	padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
	background: rgba(255,255,255,.97);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--line);
	box-shadow: 0 -4px 20px rgba(18,20,37,.09);
}
.buybar__price { display: flex; flex-direction: column; line-height: 1.15; }
.buybar__price span { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.buybar__price strong { font-size: 1.25rem; font-weight: 900; }
.buybar .btn { flex: 1; }

/* Der Versand stand bisher nirgends vor dem Warenkorb. Er gehoert neben
   den Endpreis, nicht dahinter — sonst ist die naechste Ueberraschung
   nur um einen Schritt verschoben. */
.buybar__ship {
	display: block;
	margin-top: 1px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink-3);
}
.buybar__ship .woocommerce-Price-amount { font-weight: 800; }

/* ── Responsive ─────────────────────────────────────────────────────── */

/* Die Klasse .gfx-neu steht mit im Selektor, obwohl sie hier nichts
   auswaehlt. Grund: weiter unten stand eine Desktop-Regel `.gfx-neu .pdp`
   ohne Media Query, die diesen Umbruch ausgehebelt hat — die Produktseite
   blieb auf dem Handy zweispaltig (166 px Bild neben 151 px Kaufspalte).
   Gleiche Spezifitaet heisst: wer das nochmal ueberschreiben will, muss es
   absichtlich tun. */
@media (max-width: 900px) {
	/* minmax(0, 1fr) statt 1fr: `1fr` heisst `minmax(auto, 1fr)`, und `auto`
	   laesst die Spalte nicht unter die Inhaltsbreite schrumpfen. Auf der
	   Guertelseite blies die Live-Vorschau die Spalte damit auf 659 px auf —
	   300 px Ueberlauf. Die Desktop-Regel weiter unten macht es genauso. */
	.gfx-neu .pdp,
	.pdp { grid-template-columns: minmax(0, 1fr); }
	.pdp__media,
	.pdp__info { min-width: 0; }
	.pdp__media { position: static; }
	.pdp__stage { aspect-ratio: 1; }
}

@media (max-width: 780px) {
	.bundle__fields { grid-template-columns: 1fr; }
	.perso__grid    { grid-template-columns: 1fr; }
}

/* Die Leiste wird von gfx-basis.js eingeblendet, sobald der echte
   Kaufknopf aus dem Bild gescrollt ist — deshalb `[hidden]` statt eines
   reinen Media Query. Frueher stand hier `body { padding-bottom: 84px }`
   fest verdrahtet: 84 px Leerraum unter JEDER Handy-Seite, fuer eine
   Leiste, die nie ausgegeben wurde. */
.buybar[hidden] { display: none; }

@media (max-width: 780px) {
	.buybar { display: flex; }
	body.gfx-hat-buybar { padding-bottom: 84px; }
}

/* Fehlt noch Farbe oder Groesse, fuehrt der Knopf zum Formular statt in
   den Warenkorb. Das soll man ihm ansehen. */
.buybar .btn.is-wartet { background: var(--navy); border-color: var(--navy); }

/* ── Galerie-Ergaenzungen ───────────────────────────────────────────── */

.pdp__caption {
	margin-top: .6rem;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink-3);
	text-align: center;
}

/* Die Artwork-Kachel zeigt das Motiv freigestellt und hebt sich damit
   bewusst von den drei Gi-Fotos ab. */
.pdp__thumb--art {
	background: #fff;
	border-style: dashed;
	border-color: var(--line);
}
.pdp__thumb--art img { object-fit: contain; padding: 6px; }

/* Wenn das freigestellte Artwort in der grossen Ansicht liegt, soll es
   nicht formatfuellend beschnitten werden. */
.pdp__stage img[src*="preview/"] {
	object-fit: contain;
	background: #fff;
	padding: 6%;
}

/* ── Zweiter Weg: Konfigurator ──────────────────────────────────────── */

.pdp__personalize { margin-bottom: .5rem; }

.pdp__personalize-note {
	margin: 0 0 1.2rem;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink-3);
	text-align: center;
}

@media (max-width: 780px) {
	/* Die Sticky-Leiste uebernimmt den Kauf; der Konfigurator-Link
	   bleibt im Fluss sichtbar, sonst findet ihn auf dem Handy niemand. */
	.pdp__personalize { display: inline-flex; }
}

/* ── Tap-Ziele auf schmalen Geräten ─────────────────────────────────
   Breadcrumb-Links und der Größentabellen-Verweis lagen bei 375 px
   unter 24 px Höhe und damit unter dem WCAG-Minimum.
   ─────────────────────────────────────────────────────────────────── */

.crumbs a,
.crumbs span {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
}

.opt__aside {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 2px;
}

/* Die Bundle-Checkbox ist das wichtigste Bedienelement der Seite —
   sie darf nicht das kleinste sein. */
.bundle__toggle input { width: 26px; height: 26px; }

@media (max-width: 780px) {
	.crumbs { gap: .6rem; }
	.crumbs a { min-height: 34px; }
}

/* ══ WooCommerce-Formular auf der Produktseite ══════════════════════
   Das Kaufformular kommt unveraendert von WooCommerce — nur so feuern
   die Haken, an denen Konfigurator, Groessentabelle und Guertellogik
   haengen. Sein Aussehen kam bisher von Woodmart, das auf eigenen
   Vorlagen entfernt wird. Diese Regeln ersetzen es im Markenlook.
   ═══════════════════════════════════════════════════════════════════ */

/* Ist die Farbe an die Kacheln gekoppelt (gfx-basis.js setzt die Klasse),
   verschwindet die doppelte Zeile aus der Variantentabelle. Das <select>
   bleibt im DOM — die Kaufpruefung von WooCommerce haengt daran. */
.gfx-farbe-gekoppelt table.variations tr.gfx-farbzeile,
.gfx-farbe-gekoppelt .gfx-farbzeile { display: none; }

/* Die Auswahlfelder waren auf dem Handy zu klein und loesten unter 16 px
   den Zoom von iOS Safari aus. */
@media (max-width: 780px) {
	.gfx-neu .pdp__info select,
	.gfx-neu .pdp__info input[type="text"],
	.gfx-neu .pdp__info input[type="number"] {
		min-height: 48px;
		font-size: 16px;
	}
}

/* Die Info-Spalte war zu schmal, der Produktname brach vierzeilig um.
   Nur ab 901 px: auf dem Handy gilt die eine Spalte aus dem Responsive-Block
   weiter oben. Ohne diese Klammer galt die Zweispaltigkeit bis 375 px. */
@media (min-width: 901px) {
	.gfx-neu .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.gfx-neu .pdp__title { overflow-wrap: break-word; }

.gfx-neu .pdp__info form.cart { margin: 1.2rem 0 0; }

/* Variantenauswahl: Label ueber das Feld statt in einer Tabellenzelle */
.gfx-neu .variations { width: 100%; border-collapse: collapse; margin-bottom: .9rem; }
.gfx-neu .variations tr { display: block; margin-bottom: .8rem; }
.gfx-neu .variations th,
.gfx-neu .variations td { display: block; width: 100%; padding: 0; text-align: left; }
.gfx-neu .variations th label {
	display: block;
	margin-bottom: .35rem;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gfx-neu .pdp__info select,
.gfx-neu .pdp__info input[type="text"],
.gfx-neu .pdp__info input[type="number"] {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font: inherit;
	font-size: 16px;          /* unter 16px zoomt iOS beim Fokus */
	color: var(--ink);
}
.gfx-neu .pdp__info select:focus-visible,
.gfx-neu .pdp__info input:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 1px;
	border-color: var(--red);
}

.gfx-neu .reset_variations {
	display: inline-block;
	margin-top: .3rem;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-3);
}

/* Menge und Kaufen nebeneinander */
.gfx-neu .pdp__info .quantity { display: flex; align-items: stretch; gap: .3rem; }
.gfx-neu .pdp__info .quantity input[type="number"] { width: 5rem; text-align: center; }
.gfx-neu .pdp__info .quantity button,
.gfx-neu .pdp__info .quantity .wd-plus,
.gfx-neu .pdp__info .quantity .wd-minus {
	min-width: 48px;
	min-height: 48px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font-weight: 900;
	color: var(--ink-2);
	cursor: pointer;
}

.gfx-neu .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	margin-top: .7rem;
	padding: 0 1.4rem;
	border: 0;
	border-radius: var(--radius);
	background: var(--navy);
	font-size: 15px;
	font-weight: 900;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;              /* 15,8:1 */
	cursor: pointer;
	transition: background-color .16s var(--ease);
}
.gfx-neu .single_add_to_cart_button:hover { background: var(--navy-3); }
.gfx-neu .single_add_to_cart_button.disabled,
.gfx-neu .single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; }

/* Der Konfigurator-Knopf bleibt der rote Hauptweg und kommt zuerst. */
.gfx-neu .pdp__info .gfx-customize-btn { width: 100%; margin-bottom: .6rem; }

.gfx-neu .woocommerce-variation-price { margin: .6rem 0; font-size: 1.2rem; font-weight: 900; }
.gfx-neu .stock { margin-top: .5rem; font-size: 13.5px; color: var(--ink-3); }

/* Meldungen (z. B. „Bitte Variante waehlen") */
.gfx-neu .woocommerce-error,
.gfx-neu .woocommerce-message,
.gfx-neu .woocommerce-info {
	margin: 0 0 1rem;
	padding: .8rem 1rem;
	border-left: 3px solid var(--red);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--soft);
	list-style: none;
	font-size: 14.5px;
}

.crumbs { padding: 1rem 0 .4rem; font-size: 13px; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--red); }
.crumbs span { margin: 0 .35rem; }


/* ══ Academy-Seite — aus css/academy.css des Prototyps ══ */

/* ═══════════════════════════════════════════════════════════════════════
   GIFANATIX — Academy- und Mengenanfrage
   Prototyp 2026-08-31

   Laut CLAUDE.md ist B2B nicht einer von drei Hebeln, sondern der Kern:
   25 Gis in EINEM Gym sind sichtbarer als 25 Gis verteilt über zwanzig.
   Diese Seite hat deshalb genau eine Aufgabe — das Formular ausgefüllt
   zu bekommen. Alles darüber dient nur dazu, dorthin zu führen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────────────── */

.ac-hero {
	background: var(--navy);
	color: var(--on-dark);
	padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
	overflow: hidden;
}
.ac-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.ac-hero h1 {
	margin: .6rem 0 0;
	font-size: clamp(2.4rem, 6.4vw, 4.4rem);
	line-height: .98;
}
.ac-hero h1 .line { display: block; }
.ac-hero h1 .accent span { color: var(--red-hot); }   /* 4,9:1 auf Navy */

.ac-hero .lede {
	max-width: 34rem;
	margin: 1.1rem 0 0;
	font-size: clamp(1rem, 1.9vw, 1.15rem);
	line-height: 1.55;
	color: var(--on-dark-2);
}

.ac-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 1.6rem;
}

/* Drei Zahlen, die alle in der Faktentabelle stehen. Keine erfundene
   Kennzahl — das ist auf einer B2B-Seite besonders heikel, weil ein
   Klub nachfragt. */
.ac-facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.2rem, 3vw, 2.4rem);
	margin: 2.2rem 0 0;
	padding: 1.3rem 0 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.ac-facts li { display: flex; flex-direction: column; gap: .1rem; }
.ac-facts strong {
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	font-weight: 950;
	line-height: 1;
}
.ac-facts span {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--on-dark-3);
}

.ac-hero__shot { margin: 0; }
.ac-hero__shot img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}
.ac-hero__shot figcaption {
	margin-top: .6rem;
	font-size: 12.5px;
	color: var(--on-dark-3);
}

/* ── Was auf den Gi kommt ───────────────────────────────────────────── */

.ac-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 1rem;
}
.ac-card {
	position: relative;
	padding: 1.6rem 1.4rem 1.5rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.ac-card__num {
	display: block;
	font-size: 12px;
	font-weight: 950;
	letter-spacing: .12em;
	color: var(--red);
}
.ac-card h3 { margin: .5rem 0 .5rem; font-size: 1.2rem; line-height: 1.2; }
.ac-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* ── Ablauf ─────────────────────────────────────────────────────────── */

.ac-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.4rem 1.2rem;
	margin: 0;
	padding: 0;
	counter-reset: schritt;
	list-style: none;
}
.ac-steps li {
	counter-increment: schritt;
	padding-top: 1rem;
	border-top: 3px solid var(--soft-2);
}
.ac-steps li::before {
	content: counter(schritt);
	display: block;
	font-size: 12px;
	font-weight: 950;
	letter-spacing: .1em;
	color: var(--red);
}
.ac-steps h3 { margin: .3rem 0 .4rem; font-size: 1.05rem; line-height: 1.25; }
.ac-steps p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

.ac-note {
	max-width: 46rem;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 1.1rem 1.2rem;
	border-left: 3px solid var(--red);
	background: var(--soft);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
}
.ac-note strong { color: var(--ink); }

/* ── Formular ───────────────────────────────────────────────────────── */

.ac-form-wrap {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.ac-form-side h2 { margin: .5rem 0 .8rem; font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.ac-form-side p { color: var(--on-dark-2); line-height: 1.6; }

.trust--dark { color: var(--on-dark-2); }
.trust--dark li::before { color: var(--red-hot); }

.ac-direct {
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: 14.5px;
}
.ac-direct a {
	display: inline-block;
	padding: .35rem 0;
	color: #fff;
	font-weight: 800;
}

.ac-form {
	padding: clamp(1.3rem, 3vw, 2rem);
	background: #fff;
	border-radius: var(--radius-lg);
	color: var(--ink);
	box-shadow: var(--shadow-lg);
}
.ac-form fieldset { margin: 0 0 1.6rem; padding: 0; border: 0; }
.ac-form legend {
	padding: 0;
	margin-bottom: .9rem;
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--red);
}

.ac-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: .8rem;
	margin-bottom: .8rem;
}

.ac-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .8rem; }
.ac-row .ac-field { margin-bottom: 0; }

.ac-field label,
.ac-label {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.ac-field label em,
.ac-label em { font-style: normal; font-weight: 700; text-transform: none; letter-spacing: 0; }

.ac-field input[type="text"],
.ac-field input[type="email"],
.ac-field input[type="tel"],
.ac-field input[type="date"],
.ac-field select,
.ac-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font: inherit;
	font-size: 16px;            /* unter 16px zoomt iOS beim Fokus */
	color: var(--ink);
}
.ac-field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }

/* Das Auswahlfeld bringt sonst das Aussehen des Betriebssystems mit und
   steht als einziges Feld aus der Reihe. */
.ac-field select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2355556a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	cursor: pointer;
}

.ac-field input:focus-visible,
.ac-field select:focus-visible,
.ac-field textarea:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 1px;
	border-color: var(--red);
}

/* Ein Feld, das der Nutzer offen gelassen hat, wird erst NACH dem
   Absendeversuch markiert — nicht beim Tippen. */
.ac-field.is-bad input,
.ac-field.is-bad textarea,
.ac-field.is-bad .ac-chips { border-color: var(--red); }
.ac-field.is-bad .ac-chips { border: 1px solid var(--red); border-radius: var(--radius); padding: 4px; }

/* ── Auswahlchips ───────────────────────────────────────────────────── */

.ac-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ac-chip { position: relative; display: inline-flex; }
.ac-chip input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}
.ac-chip span {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 .95rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-2);
	cursor: pointer;
	transition: border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.ac-chip input:hover + span { border-color: var(--ink-3); }
.ac-chip input:checked + span {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;                 /* 15,8:1 */
}
.ac-chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

.ac-hint {
	margin: .2rem 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-3);
}

/* ── Einwilligung, Fehler, Absenden ─────────────────────────────────── */

.ac-consent {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	margin-bottom: 1rem;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-2);
	cursor: pointer;
}
.ac-consent input { width: 24px; height: 24px; margin-top: 0; flex: 0 0 auto; accent-color: var(--red); }
.ac-consent.is-bad { color: var(--red); }

.ac-errors {
	margin-bottom: 1rem;
	padding: .85rem 1rem;
	border: 1px solid rgba(200, 16, 46, .35);
	border-left: 3px solid var(--red);
	border-radius: var(--radius);
	background: rgba(200, 16, 46, .05);
	font-size: 14px;
}
.ac-errors[hidden] { display: none; }
.ac-errors strong { display: block; color: var(--red); font-size: 13.5px; }
.ac-errors ul { margin: .4rem 0 0; padding: 0; list-style: none; }
.ac-errors li + li { margin-top: .15rem; }
.ac-errors button {
	min-height: 40px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--ink);
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ac-errors button:hover { color: var(--red); }

.ac-fine {
	margin: .8rem 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-3);
	text-align: center;
}

/* ── Bestätigung ────────────────────────────────────────────────────── */

.ac-done {
	grid-column: 1 / -1;
	max-width: 42rem;
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.2rem);
	background: #fff;
	border-radius: var(--radius-lg);
	color: var(--ink);
	text-align: center;
	box-shadow: var(--shadow-lg);
}
.ac-done[hidden] { display: none; }
.ac-done__mark {
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	font-size: 28px;
	font-weight: 900;
}
.ac-done h2 { margin: 0 0 .6rem; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.ac-done p { margin: 0 auto 1.4rem; max-width: 30rem; line-height: 1.6; color: var(--ink-2); }

.ac-done__recap {
	margin: 0 0 1.6rem;
	padding: 1rem 1.1rem;
	background: var(--soft);
	border-radius: var(--radius);
	text-align: left;
	font-size: 14.5px;
}
.ac-done__recap div { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0; }
.ac-done__recap dt, .ac-done__recap span:first-child { color: var(--ink-3); font-weight: 700; }
.ac-done__recap span:last-child { font-weight: 800; text-align: right; }

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 940px) {
	.ac-hero__inner,
	.ac-form-wrap { grid-template-columns: 1fr; }
	.ac-hero__shot { order: -1; max-width: 22rem; }
	.ac-hero__shot img { aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
	.ac-facts { gap: 1rem 1.6rem; }
	.ac-form { padding: 1.1rem; }
	.ac-chip span { font-size: 13.5px; padding: 0 .8rem; }
}


/* ══ Guertel-Bildstrecke — aus css/guertel.css ══ */
.beltshow { margin-top: 1rem; }
.beltshow__stage {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--soft);
	aspect-ratio: 16 / 11;
}
.beltslide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--ease);
}
.beltslide.is-on { opacity: 1; visibility: visible; }
.beltslide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.beltslide figcaption {
	position: absolute;
	inset: auto 0 0;
	padding: 2rem .9rem .8rem;
	background: linear-gradient(transparent, rgba(18, 20, 37, .88));
	background-color: rgba(18, 20, 37, .45);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.35;
}
.beltshow__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(18, 20, 37, .2);
	transition: background .16s var(--ease), transform .16s var(--ease);
}
.beltshow__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.beltshow__nav--prev { left: 10px; padding-right: 3px; }
.beltshow__nav--next { right: 10px; padding-left: 3px; }
.beltshow__dots {
	display: flex;
	justify-content: center;
	gap: .45rem;
	margin-top: .7rem;
}
.beltshow__dot {
	width: 32px;
	height: 24px;              /* Tap-Ziel; der sichtbare Strich ist dünner */
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.beltshow__dot::before {
	content: '';
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 3px;
	background: var(--line);
	transition: background .18s var(--ease);
}
.beltshow__dot.is-on::before { background: var(--red); }
.beltslide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* Hilfssatz unter einem Formularfeld. Erklaert in einer Zeile, was
   gemeint ist — das erspart die Rueckfrage per Mail. */
.gfx-belt-hint {
	display: block;
	margin-top: .3rem;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--ink-3);
}

/* ══ Guertel-Live-Vorschau — aus css/guertel.css ══
   Zeigt beide Enden mit Farbe, Schrift, Garnfarbe und Streifen. */
.beltview {
	position: sticky;
	top: 88px;
	padding: 1.2rem 1.1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: linear-gradient(170deg, #f7f8fa, #eceef3);
}
.beltview__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .6rem;
	margin-bottom: 1.1rem;
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.beltview__hint {
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	font-size: 12.5px;
}
.belt { margin-bottom: 1rem; }
.belt:last-of-type { margin-bottom: .4rem; }
.belt__side {
	display: block;
	margin-bottom: .3rem;
	font-size: 10.5px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.belt__band {
	position: relative;
	display: flex;
	align-items: center;
	height: 80px;
	padding: 0 1rem;
	border-radius: 3px;
	overflow: hidden;
	background: var(--belt-color, #153a8a);
	box-shadow: inset 0 2px 5px rgba(0,0,0,.28),
	            inset 0 -2px 5px rgba(0,0,0,.22),
	            0 2px 6px rgba(18,20,37,.14);
	transition: background .22s var(--ease);
}
.belt__band::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		180deg,
		rgba(255,255,255,.055) 0 1px,
		transparent 1px 4px
	);
	pointer-events: none;
}
.belt__text {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
	font-family: var(--belt-font, 'GFX Segoe Black'), 'Nunito', sans-serif;
	font-size: 85px;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--belt-thread, #ffffff);
	text-align: var(--belt-align, center);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	/* Stickoptik: leichter Schattenwurf, wie ihn Garn auf Stoff wirft */
	text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 -1px 0 rgba(255,255,255,.12);
}
.belt__text[data-font="GFX Old English"]    { font-size: 70px; text-transform: none; }
.belt__text[data-font="Style Script"]       { font-size: 58px; text-transform: none; letter-spacing: .01em; }
.belt__text[data-font="Kaisei Opti"]        { font-size: 64px; text-transform: none; }
.belt__text[data-font="GFX Street Breaker"] { font-size: 62px; }
.belt__text[data-font="Rockwell"]           { font-size: 68px; }
.belt__bar {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 112px;
	height: 100%;
	margin-right: -1rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	padding: 0 9px;
	background: #141414;
	box-shadow: inset 2px 0 6px rgba(0,0,0,.5);
}
.belt__bar i {
	display: block;
	width: 9px;
	height: 74%;
	border-radius: 1px;
	background: var(--belt-thread, #ffffff);
	opacity: 0;
	transform: scaleY(.4);
	transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.belt__bar i.is-on { opacity: 1; transform: none; }
.belt__band[data-color="black"] .belt__bar {
	background: #0a0a0a;
	box-shadow: inset 2px 0 0 rgba(255,255,255,.14), inset 3px 0 8px rgba(0,0,0,.6);
}
/* In der Produktspalte steht die Vorschau ueber dem Produktbild. Die
   Spalte klebt bereits — ein zweites sticky darin waere wirkungslos. */
.pdp__media .beltview {
	position: static;
	top: auto;
	margin-bottom: 1.1rem;
}
.beltview__note {
	margin: .7rem 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink-2);
	text-align: center;
}

/* ══ Variantenwahl von WooCommerce/Woodmart ══
   Woodmart baut fuer die Farbe echte Farbfelder — die Auswahl-Logik
   dahinter ist erprobt und synchronisiert das versteckte <select>.
   Nur das Aussehen kam mit dem Woodmart-Stylesheet, das die neuen
   Vorlagen entfernen. Ohne diese Regeln stand die Farbwahl als nackte
   Wortliste ueber dem Auswahlfeld — doppelt und wirkungslos aussehend.
   Deshalb wird hier neu gestaltet statt versteckt: die Farbfelder
   bleiben das Bedienelement, das Auswahlfeld tritt zurueck. */
.gfx-neu table.variations { width: 100%; margin: 1.2rem 0 0; border: 0; }
.gfx-neu table.variations tbody,
.gfx-neu table.variations tr,
.gfx-neu table.variations th,
.gfx-neu table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}
.gfx-neu table.variations tr + tr { margin-top: .9rem; }
.gfx-neu table.variations th.label label {
	display: block;
	margin-bottom: .4rem;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.gfx-neu .wd-swatches-product {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: .5rem;
}
.gfx-neu .wd-swatch {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;          /* Fingergroesse auf dem Handy */
	padding: .45rem .85rem .45rem .5rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--ink);
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.gfx-neu .wd-swatch:hover { border-color: var(--ink-3); }
.gfx-neu .wd-swatch.wd-active {
	border-color: var(--ink);
	box-shadow: 0 0 0 1px var(--ink);
}
.gfx-neu .wd-swatch .wd-swatch-bg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.18);
	background-size: cover;
	background-position: center;
}
.gfx-neu .wd-swatch .wd-swatch-text { line-height: 1; }
/* Woodmart laedt ein eigenes Swatch-Stylesheet nach, das die Farbnamen
   ausblendet und den Knopf auf eine feste Punktgroesse zwingt. Auf einer
   Seite, die sonst mit beschrifteten Feldern arbeitet, bleibt davon nur
   ein Kreis ohne Namen uebrig. Zwei Klassen tiefer angesetzt, damit die
   Beschriftung wieder gewinnt. */
.gfx-neu .wd-swatches-product .wd-swatch { width: auto; height: auto; }
.gfx-neu .wd-swatches-product .wd-swatch.wd-bg .wd-swatch-text { display: inline; }
.gfx-neu table.variations select {
	width: 100%;
	max-width: 320px;
	min-height: 44px;
	padding: .55rem .8rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm, 8px);
	background: #fff;
	font: inherit;
	font-weight: 700;
	color: var(--ink);
}
/* Wo Farbfelder stehen, ist das Auswahlfeld nur noch die Krücke fuer
   Tastatur und Formularabsendung — es muss nicht zweimal danebenstehen. */
.gfx-neu td.value.with-swatches select { display: none; }
.gfx-neu .reset_variations {
	display: inline-block;
	margin-top: .5rem;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink-3);
}

/* Farbfelder auf der Produktseite — Ansichtswahl, kein Bestellfeld. */
.pdp__colors { margin: 1rem 0 0; padding: 0; border: 0; }
.pdp__colors legend {
	padding: 0 0 .4rem;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* ══════════════════════════════════════════════════════════════════════
   WARENKORB

   Der Warenkorb bleibt WooCommerce — Mengenfelder, Gutschein,
   Versandrechner und Kasse haengen an dessen Markup und Skripten. Was
   fehlte, war nur das Aussehen: auf eigenen Vorlagen faellt das
   Woodmart-Stylesheet weg, und uebrig blieb eine nackte Tabelle in einer
   sonst durchgestalteten Seite.
   ══════════════════════════════════════════════════════════════════════ */

.gfx-korb { margin-top: 1.4rem; }

.gfx-korb .woocommerce-notices-wrapper:empty { display: none; }

.gfx-korb .woocommerce-message,
.gfx-korb .woocommerce-info,
.gfx-korb .woocommerce-error {
	margin: 0 0 1.2rem;
	padding: .9rem 1.1rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--red, #c8102e);
	border-radius: var(--radius-sm, 8px);
	background: #fff;
	font-size: 13.5px;
	font-weight: 700;
	list-style: none;
}
.gfx-korb .woocommerce-message a,
.gfx-korb .woocommerce-info a { color: var(--red, #c8102e); }

/* ── Die Tabelle ───────────────────────────────────────────────────── */

.gfx-korb table.shop_table {
	width: 100%;
	margin: 0 0 1.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 12px);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}

.gfx-korb table.shop_table th {
	padding: .85rem 1rem;
	background: #f5f5f9;
	border-bottom: 1px solid var(--line);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ink-3);
	text-align: left;
}

.gfx-korb table.shop_table td {
	padding: 1rem;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
	font-size: 14px;
}
.gfx-korb table.shop_table tr:last-child td { border-bottom: 0; }

.gfx-korb .product-remove { width: 44px; text-align: center; }
.gfx-korb .product-remove a {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #f0f0f6;
	color: var(--ink-3);
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
}
.gfx-korb .product-remove a:hover { background: var(--red, #c8102e); color: #fff; }

.gfx-korb .product-thumbnail { width: 92px; }
.gfx-korb .product-thumbnail img {
	width: 76px;
	height: auto;
	border-radius: 7px;
	border: 1px solid var(--line);
	display: block;
}

.gfx-korb .product-name a {
	font-weight: 900;
	font-size: 15px;
	color: var(--ink);
	text-decoration: none;
}
.gfx-korb .product-name a:hover { color: var(--red, #c8102e); }

/* Die Konfigurationsdaten unter dem Produktnamen: Groesse, Farbe,
   jede Stickstelle. Bei einem personalisierten Gi ist das die halbe
   Bestellung — sie muss lesbar bleiben, nicht als Fliesstext kleben. */
.gfx-korb .variation,
.gfx-korb dl.variation {
	margin: .5rem 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink-2);
}
.gfx-korb dl.variation dt {
	float: left;
	clear: left;
	margin-right: .35rem;
	font-weight: 800;
	color: var(--ink-3);
}
.gfx-korb dl.variation dd { margin: 0 0 .15rem; }
.gfx-korb dl.variation dd p { margin: 0; }

.gfx-korb .product-price,
.gfx-korb .product-subtotal { font-weight: 800; white-space: nowrap; }

.gfx-korb .quantity { display: inline-flex; align-items: center; }
.gfx-korb .quantity input[type="number"],
.gfx-korb .quantity .qty {
	width: 62px;
	min-height: 44px;
	padding: .4rem .5rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm, 8px);
	text-align: center;
	font: inherit;
	font-weight: 800;
}

/* ── Aktionszeile: Gutschein und Aktualisieren ─────────────────────── */

.gfx-korb td.actions {
	padding: 1rem;
	background: #fafafd;
}
.gfx-korb .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	margin-bottom: .8rem;
}
.gfx-korb .coupon label { display: none; }
.gfx-korb input[type="text"],
.gfx-korb input[type="email"],
.gfx-korb input[type="tel"],
.gfx-korb select {
	min-height: 44px;
	padding: .55rem .8rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm, 8px);
	background: #fff;
	font: inherit;
}

.gfx-korb .button,
.gfx-korb button[type="submit"] {
	min-height: 44px;
	padding: .7rem 1.3rem;
	border: 0;
	border-radius: var(--radius-sm, 8px);
	background: var(--ink);
	color: #fff;
	font: 800 13.5px/1 inherit;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gfx-korb .button:hover { background: #23263f; color: #fff; }
.gfx-korb .button:disabled,
.gfx-korb .button[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Summen und Kasse ──────────────────────────────────────────────── */

.gfx-korb .cart_totals {
	max-width: 460px;
	margin-left: auto;
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 12px);
	background: #fff;
}
.gfx-korb .cart_totals h2 {
	margin: 0 0 .9rem;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.gfx-korb .cart_totals table { width: 100%; border-collapse: collapse; }
.gfx-korb .cart_totals th,
.gfx-korb .cart_totals td {
	padding: .55rem 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: none;
	font-size: 14px;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
}
.gfx-korb .cart_totals td { text-align: right; font-weight: 800; }
.gfx-korb .cart_totals .order-total th,
.gfx-korb .cart_totals .order-total td {
	border-bottom: 0;
	padding-top: .8rem;
	font-size: 18px;
	font-weight: 900;
}

.gfx-korb .wc-proceed-to-checkout { margin-top: 1rem; }
.gfx-korb .wc-proceed-to-checkout .button,
.gfx-korb .checkout-button {
	display: flex;
	width: 100%;
	min-height: 52px;
	background: var(--red, #c8102e);
	font-size: 15px;
}
.gfx-korb .wc-proceed-to-checkout .button:hover,
.gfx-korb .checkout-button:hover { background: #a90d27; }

.gfx-korb .shipping-calculator-form { margin-top: .7rem; }
.gfx-korb .shipping-calculator-button {
	font-size: 13px;
	font-weight: 800;
	color: var(--red, #c8102e);
}
.gfx-korb .woocommerce-shipping-destination { font-size: 12.5px; color: var(--ink-2); }

/* ── Leerer Warenkorb ──────────────────────────────────────────────── */

.gfx-korb .cart-empty,
.gfx-korb .wc-empty-cart-message {
	margin: 0 0 1rem;
	font-size: 15px;
	color: var(--ink-2);
}
.gfx-korb .return-to-shop { margin-top: 1rem; }

.gfx-korb-leer-hinweis {
	margin: .4rem 0 1.4rem;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 46ch;
}
.gfx-korb-leer-cta { display: flex; flex-wrap: wrap; gap: .7rem; }

.trust--korb { margin-top: 1.6rem; }

@media (max-width: 760px) {
	/* Auf dem Handy wird aus jeder Zeile eine Karte. Eine sechsspaltige
	   Tabelle ist dort nicht lesbar, und WooCommerce liefert die
	   Spaltennamen ohnehin als data-title mit. */
	.gfx-korb table.shop_table thead { display: none; }
	.gfx-korb table.shop_table,
	.gfx-korb table.shop_table tbody,
	.gfx-korb table.shop_table tr,
	.gfx-korb table.shop_table td { display: block; width: 100%; }

	.gfx-korb table.shop_table tr.cart_item {
		position: relative;
		margin-bottom: .8rem;
		padding: .4rem 0;
		border: 1px solid var(--line);
		border-radius: var(--radius-lg, 12px);
	}
	.gfx-korb table.shop_table tr.cart_item td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		border-bottom: 0;
		padding: .45rem 1rem;
	}
	.gfx-korb table.shop_table tr.cart_item td::before {
		content: attr(data-title);
		font-size: 11px;
		font-weight: 900;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--ink-3);
	}
	.gfx-korb .product-remove {
		position: absolute;
		top: .4rem;
		right: .4rem;
		width: auto;
		padding: 0;
	}
	.gfx-korb .product-remove::before { content: none; }
	.gfx-korb .product-thumbnail::before { content: none; }
	/* Ohne Beschriftung bleibt nur das Bild in der Zeile — es gehoert
	   nach links, sonst sitzt es unter dem Entfernen-Knopf oben rechts. */
	.gfx-korb .product-thumbnail { justify-content: flex-start; padding-top: .8rem; }
	.gfx-korb .product-thumbnail img { width: 92px; }
	.gfx-korb .product-name { flex-wrap: wrap; }

	.gfx-korb .cart_totals { max-width: none; }
	.gfx-korb .coupon { flex-direction: column; align-items: stretch; }
	.gfx-korb .coupon input[type="text"],
	.gfx-korb .coupon .button { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   KASSE

   Nur Aussehen. Das Formular kommt unveraendert aus WooCommerce, daran
   haengen Stripe, PayPal, Apple Pay und Google Pay mit eigenen Feldern
   und teils eigenen iframes.

   Deshalb hier bewusst keine Regeln auf Breite oder Hoehe der
   Zahlungsbereiche und nichts mit position — was die Anbieter
   einbetten, soll sich verhalten duerfen, wie es will. Gestaltet werden
   die eigenen Felder, die Tabelle und die Knoepfe.
   ══════════════════════════════════════════════════════════════════════ */

.gfx-kasse { margin-top: 1.4rem; }

.gfx-kasse .woocommerce-notices-wrapper:empty { display: none; }
.gfx-kasse .woocommerce-message,
.gfx-kasse .woocommerce-info,
.gfx-kasse .woocommerce-error {
	margin: 0 0 1.2rem;
	padding: .9rem 1.1rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--red, #c8102e);
	border-radius: var(--radius-sm, 8px);
	background: #fff;
	font-size: 13.5px;
	font-weight: 700;
	list-style: none;
}

/* ── Zwei Spalten: Angaben links, Bestellung rechts ────────────────── */

.gfx-kasse form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(1.2rem, 3vw, 2.4rem);
	align-items: start;
}
/* Alles, was WooCommerce ausserhalb der beiden Spalten einhaengt —
   Express-Zahlung, versteckte Felder, Trenner — laeuft ueber die volle
   Breite. Sonst zerreisst es das Raster. */
.gfx-kasse form.checkout > *:not(#customer_details):not(.checkout-order-review) {
	grid-column: 1 / -1;
}
.gfx-kasse #customer_details { grid-column: 1; }
.gfx-kasse .checkout-order-review { grid-column: 2; }

.gfx-kasse h3,
.gfx-kasse #order_review_heading {
	margin: 0 0 .9rem;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* ── Formularfelder ────────────────────────────────────────────────── */

.gfx-kasse .woocommerce-billing-fields,
.gfx-kasse .woocommerce-shipping-fields,
.gfx-kasse .woocommerce-additional-fields {
	margin-bottom: 1.4rem;
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 12px);
	background: #fff;
}

.gfx-kasse .form-row {
	display: block;
	margin: 0 0 .9rem;
	padding: 0;
}
.gfx-kasse .form-row label {
	display: block;
	margin-bottom: .3rem;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--ink-2);
}
.gfx-kasse .form-row .required { color: var(--red, #c8102e); text-decoration: none; }

.gfx-kasse input[type="text"],
.gfx-kasse input[type="email"],
.gfx-kasse input[type="tel"],
.gfx-kasse input[type="password"],
.gfx-kasse input[type="number"],
.gfx-kasse textarea,
.gfx-kasse select {
	width: 100%;
	min-height: 46px;
	padding: .6rem .8rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm, 8px);
	background: #fff;
	font: inherit;
	color: var(--ink);
}
.gfx-kasse textarea { min-height: 90px; padding: .7rem .8rem; }
.gfx-kasse input:focus,
.gfx-kasse textarea:focus,
.gfx-kasse select:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgba(18, 20, 37, .08);
}
.gfx-kasse .woocommerce-invalid input { border-color: var(--red, #c8102e); }

/* Zwei Felder nebeneinander, wo WooCommerce es vorsieht. */
@media (min-width: 620px) {
	.gfx-kasse .form-row-first,
	.gfx-kasse .form-row-last {
		display: inline-block;
		width: calc(50% - .45rem);
		vertical-align: top;
	}
	.gfx-kasse .form-row-first { margin-right: .8rem; }
}

/* select2 bringt eigenes CSS mit — hier nur die Hoehe angleichen,
   damit es neben den anderen Feldern nicht springt. */
.gfx-kasse .select2-container .select2-selection--single { height: 46px; }
.gfx-kasse .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 44px;
}

.gfx-kasse .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-weight: 700;
}
.gfx-kasse .woocommerce-form__label-for-checkbox input { width: auto; min-height: 0; }

/* ── Bestellübersicht rechts ───────────────────────────────────────── */

.gfx-kasse .checkout-order-review > #order_review,
.gfx-kasse #order_review {
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 12px);
	background: #fff;
}

.gfx-kasse table.shop_table {
	width: 100%;
	margin: 0 0 1rem;
	border: 0;
	border-collapse: collapse;
}
.gfx-kasse table.shop_table th,
.gfx-kasse table.shop_table td {
	padding: .6rem 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: none;
	font-size: 14px;
	text-align: left;
	vertical-align: top;
}
.gfx-kasse table.shop_table thead th {
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.gfx-kasse table.shop_table td:last-child,
.gfx-kasse table.shop_table th:last-child { text-align: right; }
.gfx-kasse .product-total,
.gfx-kasse .cart-subtotal td,
.gfx-kasse .order-total td { font-weight: 800; white-space: nowrap; }
.gfx-kasse .order-total th,
.gfx-kasse .order-total td {
	border-bottom: 0;
	padding-top: .8rem;
	font-size: 18px;
	font-weight: 900;
}

/* Die Konfiguration pro Artikel — bei einem personalisierten Gi ist das
   die halbe Bestellung und muss lesbar bleiben. */
.gfx-kasse .variation,
.gfx-kasse dl.variation {
	margin: .4rem 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ink-2);
}
.gfx-kasse dl.variation dt { font-weight: 800; color: var(--ink-3); }
.gfx-kasse dl.variation dd { margin: 0 0 .15rem; }
.gfx-kasse dl.variation dd p { margin: 0; }

/* ── Zahlarten ─────────────────────────────────────────────────────── */

.gfx-kasse #payment { background: none; }
.gfx-kasse ul.payment_methods {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	border: 0;
}
.gfx-kasse ul.payment_methods > li {
	margin-bottom: .5rem;
	padding: .8rem .9rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm, 8px);
	background: #fff;
}
.gfx-kasse ul.payment_methods > li > label {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
}
.gfx-kasse ul.payment_methods > li img {
	max-height: 24px;
	width: auto;
	vertical-align: middle;
}
.gfx-kasse .payment_box {
	margin: .7rem 0 0;
	padding: .8rem .9rem;
	border-radius: var(--radius-sm, 8px);
	background: #f6f6fa;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-2);
}
.gfx-kasse .payment_box p:last-child { margin-bottom: 0; }

.gfx-kasse .woocommerce-privacy-policy-text {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ink-2);
}

.gfx-kasse .place-order { margin-top: 1rem; }
.gfx-kasse #place_order,
.gfx-kasse .button.alt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	padding: .9rem 1.4rem;
	border: 0;
	border-radius: var(--radius-sm, 8px);
	background: var(--red, #c8102e);
	color: #fff;
	font: 900 15px/1 inherit;
	cursor: pointer;
}
.gfx-kasse #place_order:hover,
.gfx-kasse .button.alt:hover { background: #a90d27; }

.gfx-kasse .button {
	min-height: 46px;
	padding: .7rem 1.2rem;
	border: 0;
	border-radius: var(--radius-sm, 8px);
	background: var(--ink);
	color: #fff;
	font: 800 13.5px/1 inherit;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ── Danke-Seite ───────────────────────────────────────────────────── */

.gfx-kasse .woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin: 0 0 1.4rem;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 12px);
	background: #fff;
	list-style: none;
}
.gfx-kasse .woocommerce-order-overview li {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.gfx-kasse .woocommerce-order-overview li strong {
	display: block;
	margin-top: .2rem;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}

/* ── Handy ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.gfx-kasse form.checkout { grid-template-columns: 1fr; }
	.gfx-kasse #customer_details,
	.gfx-kasse .checkout-order-review { grid-column: 1 / -1; }
	/* Die Bestellübersicht zuerst: auf dem Handy will man sehen, was man
	   kauft, bevor man ein Formular ausfuellt. */
	.gfx-kasse .checkout-order-review { order: -1; }
}

/* ══ Designsuche im Katalog ══════════════════════════════════════════
   Filtert die geladenen Karten im Browser. Deshalb sitzt sie neben dem
   Trefferzaehler und nicht als eigener Block ueber dem Raster: sie ist
   ein Filter, keine zweite Seite. */

.shop-suche {
	position: relative;
	flex: 1 1 280px;
	max-width: 420px;
	display: flex;
	align-items: center;
}

.shop-suche input[type="search"] {
	width: 100%;
	min-height: 44px;
	padding: .6rem 2.4rem .6rem .95rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
	-webkit-appearance: none;
	appearance: none;
}
.shop-suche input[type="search"]::-webkit-search-cancel-button { display: none; }
.shop-suche input[type="search"]:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgba(18, 20, 37, .07);
}
.shop-suche input[type="search"]::placeholder { color: #9a9aae; }

.shop-suche__leeren {
	position: absolute;
	right: 8px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: #ececf3;
	color: var(--ink-2);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
.shop-suche__leeren:hover { background: var(--red, #c8102e); color: #fff; }

.shop-leer {
	margin: 2rem 0 0;
	text-align: center;
	font-size: 15px;
	color: var(--ink-2);
}
.shop-leer__reset {
	margin-left: .5rem;
	padding: .45rem .9rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font: 800 13px/1 inherit;
	color: var(--ink);
	cursor: pointer;
}
.shop-leer__reset:hover { border-color: var(--ink-3); }

/* Der Kopf des Katalogs traegt jetzt drei Dinge: Zaehler, Suche,
   Sortierung. Auf schmalen Geraeten untereinander. */
.shop-meta { flex-wrap: wrap; gap: .8rem; }

@media (max-width: 700px) {
	.shop-suche { flex: 1 1 100%; max-width: none; order: -1; }
}

/* Dreiecksmarke neben der Wortmarke in der Fusszeile. */
.foot-mark {
	width: 34px;
	height: 34px;
	margin-right: .6rem;
	vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════════
   KONTAKTSEITE

   Zwei Spalten: Formular links, direkte Wege rechts. Die Formularfelder
   selbst erben die ac-*-Regeln der Academy-Seite — dasselbe Aussehen,
   eine Stelle zum Pflegen.
   ══════════════════════════════════════════════════════════════════════ */

.kontakt {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: clamp(1.2rem, 3vw, 2.6rem);
	align-items: start;
	margin-top: 1.6rem;
}

/* Kein Rahmen hier: .ac-form bringt Kasten, Rundung und Schatten schon
   mit. Zwei ineinandergesetzte weisse Kaesten sahen nach Versehen aus. */
.kontakt__form { min-width: 0; }

.kontakt__seite { display: grid; gap: 1rem; }

.kontakt-karte {
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 12px);
	background: #fff;
}
.kontakt-karte h2 {
	margin: 0 0 .8rem;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.kontakt-karte__zeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .4rem 1rem;
	margin: 0 0 .5rem;
	font-size: 14px;
}
.kontakt-karte__zeile span {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.kontakt-karte__zeile a { font-weight: 800; color: var(--ink); word-break: break-word; }
.kontakt-karte__zeile a:hover { color: var(--red, #c8102e); }
.kontakt-karte .trust { margin: 0; }
.kontakt-karte p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

.kontakt-karte--b2b { border-left: 4px solid var(--red, #c8102e); }
.kontakt-karte--b2b .btn { margin-top: .6rem; }

.kontakt-fehler {
	margin: 0 0 1.2rem;
	padding: .9rem 1.1rem;
	border: 1px solid #f0c9d0;
	border-left: 4px solid var(--red, #c8102e);
	border-radius: var(--radius-sm, 8px);
	background: #fdf2f4;
	font-size: 13.5px;
	line-height: 1.55;
	color: #7a1020;
}
.kontakt-fehler p { margin: .35rem 0 0; }
.kontakt-fehler a { color: var(--red, #c8102e); font-weight: 800; }

/* ── Nach dem Absenden ─────────────────────────────────────────────── */

.kontakt-fertig {
	max-width: 620px;
	margin-top: 1.4rem;
	padding: clamp(1.4rem, 4vw, 2.4rem);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 12px);
	background: #fff;
}
.kontakt-fertig__haken {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: #eef8f1;
	color: #1d6b3a;
	font-size: 24px;
	line-height: 1;
}
.kontakt-fertig h2 { margin: 0 0 .5rem; }
.kontakt-fertig p { margin: 0 0 1.2rem; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.kontakt-fertig__cta { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ── Handy ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
	/* Wer auf „Kontakt" tippt, will schreiben — nicht erst lesen.
	   Deshalb bleibt das Formular oben und die Karten rutschen darunter. */
	.kontakt { grid-template-columns: 1fr; }
}

/* ══ Materialangaben unter dem Produkt ═══════════════════════════════
   Fuenf Karten statt einer Aufzaehlung. Eine Zahl allein sagt einem
   Kunden nichts — neben jeder steht deshalb, was sie auf der Matte
   bedeutet. */

.gfx-material { border-top: 1px solid var(--line); }

.gfx-material__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: .9rem;
	margin-top: 1.6rem;
}

.gfx-material__karte {
	padding: 1.2rem 1.2rem 1.3rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 12px);
	background: #fff;
}

.gfx-material__wert {
	display: inline-block;
	margin-bottom: .6rem;
	padding: .3rem .6rem;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.gfx-material__kopf {
	display: block;
	margin-bottom: .35rem;
	font-size: 15.5px;
	font-weight: 900;
	color: var(--ink);
}

.gfx-material__karte p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-2);
}

@media (max-width: 560px) {
	.gfx-material__grid { grid-template-columns: 1fr; gap: .7rem; }
	.gfx-material__karte { padding: 1rem; }
}

/* ══ Bilderlauf der getragenen Gis ════════════════════
   Alle Aufnahmen sitzen uebereinander in der Mitte der Buehne; die
   seitliche Verschiebung setzt das Skript. Deshalb steht hier nur die
   Buehne selbst, das Format der Bilder und die Bedienelemente.

   Die Buehne ist breiter als ein einzelnes Bild, damit die Nachbarn
   Platz haben. Ihre Hoehe richtet sich nach dem Bild, nicht umgekehrt --
   sonst schneidet ein hochkantes Foto oben oder unten ab. */

.gfx-lauf {
	margin: 1.6rem 0 0;
}

.gfx-lauf__buehne {
	position: relative;
	height: 460px;
	overflow: hidden;
	border-radius: var(--radius-lg, 12px);
	background: linear-gradient(180deg, #ececed 0%, #dcdce1 100%);
	cursor: grab;
	touch-action: pan-y;          /* senkrecht scrollen bleibt moeglich */
	-webkit-user-select: none;
	user-select: none;
	outline-offset: 3px;
}
.gfx-lauf.is-ziehen .gfx-lauf__buehne { cursor: grabbing; }

.gfx-lauf__bild {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	aspect-ratio: 2 / 3;
	transform: translate(-50%, 0);
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

/* Vor dem ersten Lauf des Skripts liegen alle Bilder aufeinander. Ohne
   diese Zeile blitzt der Stapel kurz auf. */
.gfx-lauf:not(.is-bereit) .gfx-lauf__bild:not(:first-child) { opacity: 0; }

.gfx-lauf.is-bereit .gfx-lauf__bild {
	transition: transform .42s cubic-bezier(.22, .61, .36, 1),
	            opacity   .42s ease,
	            filter    .42s ease;
}
/* Waehrend des Ziehens folgt das Bild dem Finger sofort. Eine
   Ueberblendung wuerde sich dabei wie Verzoegerung anfuehlen. */
.gfx-lauf.is-ziehen .gfx-lauf__bild { transition: none; }

.gfx-lauf__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-md, 10px);
	background: #e4e4e9;
}

/* Das vordere Bild bekommt einen Schatten -- er ist es, der die Tiefe
   erzeugt. Ohne ihn sehen die Nachbarn nur kleiner aus, nicht weiter
   hinten. */
.gfx-lauf__bild.is-vorn img {
	box-shadow: 0 18px 40px rgba(18, 20, 37, .28);
}

/* ── Pfeile ── */
.gfx-lauf__pfeil {
	position: absolute;
	top: 50%;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	padding: 0 0 3px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 3px 12px rgba(18, 20, 37, .2);
	color: var(--ink);
	font-size: 27px;
	line-height: 1;
	cursor: pointer;
	transition: background .16s ease, transform .16s ease;
}
.gfx-lauf__pfeil:hover { background: #fff; transform: scale(1.07); }
.gfx-lauf__pfeil:active { transform: scale(.96); }
.gfx-lauf__pfeil--zurueck { left: 10px; }
.gfx-lauf__pfeil--vor     { right: 10px; }

.gfx-lauf__zeichen {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 70;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: rgba(18, 20, 37, .74);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	opacity: 0;
	transform: scale(.85);
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
}
.gfx-lauf__zeichen.is-an { opacity: 1; transform: scale(1); }

/* ── Leiste darunter: Farbreiter und Standanzeige ── */
.gfx-lauf__leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem 1rem;
	margin-top: .8rem;
}

.gfx-lauf__reiter {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.gfx-lauf__reiter-knopf {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 36px;
	padding: .4rem .85rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--ink-2);
	font: 800 12.5px/1 inherit;
	letter-spacing: .02em;
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.gfx-lauf__reiter-knopf:hover { border-color: var(--ink-3); color: var(--ink); }
.gfx-lauf__reiter-knopf.is-an {
	border-color: var(--ink);
	background: var(--ink);
	color: #fff;
}

/* Der Punkt zeigt die Gi-Farbe. Weiss braucht einen Rand, sonst
   verschwindet er auf dem weissen Knopf. */
.gfx-lauf__punkt {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px rgba(18, 20, 37, .35);
}
.gfx-lauf__punkt--weiss   { background: #fff; }
.gfx-lauf__punkt--schwarz { background: #16171d; }
.gfx-lauf__punkt--blau    { background: #1f4fa8; }

.gfx-lauf__stand {
	margin: 0;
	flex: 1 1 200px;
	min-width: 0;
	text-align: right;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ink-3);
}

.gfx-lauf figcaption {
	margin-top: .7rem;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink-2);
}

/* Ohne die Koerpermasse des Models sagt ein Foto nichts darueber, wie
   der Gi bei einem selbst sitzt. */
.gfx-lauf__mass {
	display: block;
	margin-top: .3rem;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .03em;
	color: var(--ink-3);
}

@media (max-width: 900px) {
	.gfx-lauf__buehne { height: 400px; }
}

@media (max-width: 700px) {
	.gfx-lauf__buehne { height: 380px; }
	.gfx-lauf__pfeil { width: 44px; height: 44px; margin-top: -22px; font-size: 25px; }
	.gfx-lauf__pfeil--zurueck { left: 6px; }
	.gfx-lauf__pfeil--vor     { right: 6px; }
	.gfx-lauf__leiste { justify-content: flex-start; }
	.gfx-lauf__stand { flex-basis: 100%; text-align: left; }
}

@media (max-width: 420px) {
	.gfx-lauf__buehne { height: 340px; }
}

/* Wer Bewegung abgestellt hat, bekommt keinen Selbstlauf (das regelt
   das Skript) und keine Ueberblendung. */
@media (prefers-reduced-motion: reduce) {
	.gfx-lauf.is-bereit .gfx-lauf__bild { transition: none; }
}

/* ══ Dateianhang im Kontaktformular ══════════════════════════════════
   Das echte Dateifeld ist unsichtbar, aber vorhanden — der Knopf ist
   nur sein Label. So bleibt die Tastaturbedienung erhalten, ohne das
   Aussehen des Betriebssystems mitzuschleppen. */

.gfx-datei {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .7rem;
	padding: .8rem;
	border: 1.5px dashed var(--line);
	border-radius: var(--radius-sm, 8px);
	background: #fafafd;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}
.gfx-datei:hover { border-color: var(--ink-3); background: #f5f5fa; }
.gfx-datei:focus-within { border-color: var(--ink); border-style: solid; }

.gfx-datei input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.gfx-datei__knopf {
	flex: 0 0 auto;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	padding: .55rem 1rem;
	border-radius: var(--radius-sm, 8px);
	background: var(--ink);
	color: #fff;
	font: 800 13px/1 inherit;
	white-space: nowrap;
}

.gfx-datei__text {
	flex: 1 1 160px;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ink-2);
	word-break: break-word;
}
.gfx-datei__text.is-warn { color: var(--red, #c8102e); font-weight: 800; }

.gfx-datei__fein { margin-top: .5rem; }

@media (max-width: 520px) {
	.gfx-datei { gap: .5rem; }
	.gfx-datei__knopf { width: 100%; justify-content: center; }
	.gfx-datei__text { flex-basis: 100%; }
}


/* ── Befristete Aktionen ────────────────────────────────────────────────
   Gesteuert aus gfx/aktion.php. Laeuft keine Aktion, greift keine dieser
   Regeln — die Klassen werden dann gar nicht erst ausgegeben.

   Zum Kontrast: Weiss auf Markenrot sind 5,9:1 und bestehen die Pruefung.
   Markenrot als TEXT auf Navy waeren 2,8:1 und faellt durch. Deshalb hat
   jede Aktionsflaeche einen eigenen Grund, nie nur eine rote Schrift.    */

.topbar--aktion {
	background: var(--red-hot);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5ch;
	flex-wrap: wrap;
}
.topbar--aktion strong {
	font-weight: 900;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Weihnachten laeuft auf Navy, damit die Leiste nicht mit der roten
   Einfuehrungsphase verwechselt wird. Der Bestellschluss bleibt rot —
   er ist die eine Zahl, auf die es dann ankommt. */
.gfx-aktion--weihnachten .topbar--aktion {
	background: var(--navy);
	color: var(--on-dark);
}
.gfx-aktion--weihnachten .topbar--aktion strong {
	color: #fff;
	background: var(--red);
	padding: .1em .5em;
	border-radius: 3px;
	text-decoration: none;
}

/* Zusatz in der Hero-Lede. Steht auf dunklem Grund, deshalb heller
   Text auf halbtransparentem Rot statt roter Schrift. */
.hero__aktion {
	display: inline-block;
	margin-top: .6rem;
	padding: .3em .7em;
	border-radius: 4px;
	background: var(--red);
	color: #fff;
	font-size: .82em;
	font-weight: 800;
	letter-spacing: .01em;
}

/* Etikett auf der Katalogkarte, direkt unter dem Preis. */
.card__badge {
	align-self: flex-start;
	margin-top: .15rem;
	padding: .18em .55em;
	border-radius: 3px;
	background: var(--red);
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Der Satz unter dem Preis auf der Produktseite. Hier entscheidet sich
   der Kauf — die Kopfzeile ist beim Scrollen laengst weg. */
.pdp__aktion {
	margin: -.6rem 0 1.1rem;
	padding: .55rem .8rem;
	border-left: 3px solid var(--red);
	background: var(--soft);
	color: var(--ink-2);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
}

/* Im Warenkorb steht der Hinweis ueber der Liste, nicht unter einem
   Preis — der negative Abstand von der Produktseite passt dort nicht. */
.gfx-korb__aktion { margin: 0 0 1.4rem; }

/* In der Kaufleiste ist kein Platz fuer den ganzen Satz, deshalb nur
   das Etikett. Die Leiste steht auf hellem Grund, also rote Schrift
   statt roter Flaeche — auf Weiss sind das 5,9:1. */
.buybar__aktion {
	display: block;
	color: var(--red);
	font-weight: 800;
	font-size: 11.5px;
	letter-spacing: .03em;
	text-transform: uppercase;
	margin-top: .1rem;
}

@media (max-width: 640px) {
	.topbar--aktion { font-size: 11.5px; line-height: 1.35; }
	.hero__aktion   { font-size: .78em; }
}

/* ══ Rechtsseiten ═════════════════════════════════════════════════════
   Impressum, Datenschutz, AGB, Widerruf. Lange Fließtexte, die
   tatsächlich gelesen werden — meist von jemandem, der etwas Bestimmtes
   sucht. Deshalb enge Zeilenlänge, klare Überschriften und genug Luft
   zwischen den Abschnitten, damit sich Sprungziele finden lassen. */

.recht {
	max-width: 44rem;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--ink-2);
}

.recht h2 {
	margin: 2.6rem 0 .7rem;
	font-size: 20px;
	line-height: 1.3;
	color: var(--ink);
	scroll-margin-top: 90px;
}
.recht h2:first-child { margin-top: 0; }

.recht p { margin: 0 0 1rem; }
.recht ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.recht li { margin-bottom: .5rem; }
.recht strong { color: var(--ink); }
.recht a { color: var(--red, #c8102e); }

/* Anschriftenblöcke: eingerückt und abgesetzt, damit sie sich vom
   Fließtext lösen — man sucht sie, statt sie zu lesen. */
.recht-block {
	padding: .9rem 1.1rem;
	border-left: 3px solid var(--line);
	background: #fafafd;
	border-radius: 0 8px 8px 0;
}

/* Begriff und Erklärung nebeneinander, auf dem Handy untereinander. */
.recht-liste { margin: 0 0 1.4rem; }
.recht-liste dt {
	margin-top: .9rem;
	font-weight: 800;
	color: var(--ink);
}
.recht-liste dd { margin: .15rem 0 0; }

@media (min-width: 720px) {
	.recht-liste {
		display: grid;
		grid-template-columns: 13rem 1fr;
		gap: .35rem 1.2rem;
	}
	.recht-liste dt { margin-top: 0; }
	.recht-liste dd { margin: 0; }
}

/* Quernavigation über den vier Seiten. */
.recht-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 2rem;
}
.recht-nav__link {
	min-height: 38px;
	display: inline-flex;
	align-items: center;
	padding: .45rem .95rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	font: 800 13px/1 inherit;
	color: var(--ink-2);
	text-decoration: none;
	transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.recht-nav__link:hover { border-color: var(--ink-3); color: var(--ink); }
.recht-nav__link.is-an {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

/* Fehlende Pflichtangabe — soll auffallen, nicht sich einfügen. */
.recht-hinweis {
	margin: 0 0 2rem;
	padding: .9rem 1.1rem;
	border: 1.5px solid var(--red, #c8102e);
	border-radius: 10px;
	background: #fff5f6;
	max-width: 44rem;
}
.recht-hinweis strong { display: block; color: var(--red, #c8102e); }
.recht-hinweis p { margin: .3rem 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.recht-luecke {
	background: #ffe8ea;
	color: var(--red, #c8102e);
	padding: .1em .4em;
	border-radius: 4px;
	font-weight: 800;
}

/* Muster-Widerrufsformular: sieht aus wie ein Formular, damit klar ist,
   dass man es ausfüllen und abschicken kann. */
.recht-formular {
	margin: 1.2rem 0 1.6rem;
	padding: 1.2rem 1.3rem;
	border: 1.5px dashed var(--line);
	border-radius: 10px;
	background: #fafafd;
	font-size: 14.5px;
}
.recht-formular p { margin: 0 0 .7rem; }
.recht-formular__linie {
	border-bottom: 1px solid var(--ink-3);
	margin-bottom: 1.1rem !important;
}

.recht-stand {
	margin-top: 2.6rem !important;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--ink-3);
}

/* Rechtshinweis über dem Bestellknopf. Klein, aber lesbar — er soll
   nicht schreien, aber auch nicht versteckt wirken. */
.gfx-kasse-recht {
	margin: 0 0 .9rem;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ink-3);
}
.gfx-kasse-recht a {
	color: var(--ink-2);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.gfx-kasse-recht a:hover { color: var(--red, #c8102e); }

/* Lange deutsche Komposita in großen Überschriften.
   „Widerrufsbelehrung" braucht bei 41 px mehr Platz, als ein 375-px-
   Bildschirm hat. Mit lang="de-DE" trennt der Browser jetzt selbst;
   break-word bleibt als Netz für den Fall, dass kein Trennwörterbuch
   vorhanden ist. */
.section__head h1 {
	overflow-wrap: break-word;
	hyphens: auto;
}

@media (max-width: 480px) {
	.recht ~ * h1,
	.section__head h1 { font-size: clamp(30px, 8.5vw, 42px); }
}

/* ══ Fotos groß ansehen ═════════════════════════════════════════════
   Vollbild für den Abschnitt „Gis, die schon draußen sind". Die Kachel
   zeigt einen 3/4-Ausschnitt, hier steht das ganze Foto — deshalb
   object-fit: contain und nicht cover.
   ═══════════════════════════════════════════════════════════════════ */

/* Der Auslöser ist ein Knopf, damit er mit der Tastatur erreichbar ist.
   Er füllt die Kachel und bringt keine eigene Optik mit. */
.echt__lupe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}
.echt__lupe:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: -3px;
}

/* Die Bildunterschrift liegt über dem Knopf — Tipper sollen trotzdem
   durchgehen, sie ist reine Beschriftung. */
.echt__item figcaption { pointer-events: none; }

.lupe {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr auto;
	align-items: center;
	gap: .4rem;
	padding: 3.6rem .5rem 1rem;
	background: rgba(12, 13, 26, .97);
	backdrop-filter: blur(6px);
}
.lupe[hidden] { display: none; }

body.hat-lupe { overflow: hidden; }

.lupe__buehne {
	grid-column: 1 / -1;
	grid-row: 1;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	height: 100%;
}
.lupe__buehne img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--radius);
}

.lupe__zu,
.lupe__pfeil {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.lupe__zu:hover,
.lupe__pfeil:hover { background: rgba(255, 255, 255, .18); }
.lupe__zu:focus-visible,
.lupe__pfeil:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.lupe__zu {
	position: absolute;
	top: .9rem;
	right: .9rem;
}
.lupe__pfeil { grid-row: 1; z-index: 1; }
.lupe__pfeil--zurueck { grid-column: 1; }
.lupe__pfeil--vor     { grid-column: 3; }

.lupe__bu {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .8rem;
	padding-top: .7rem;
	color: var(--on-dark);
	font-size: 14px;
	font-weight: 800;
	text-align: center;
}
.lupe__zaehler {
	flex: 0 0 auto;
	color: var(--on-dark-2);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Auf dem Handy zählt jeder Pixel Bildfläche: die Pfeile liegen über
   den Rändern des Fotos statt daneben. */
@media (max-width: 780px) {
	.lupe {
		grid-template-columns: 1fr;
		padding: 3.4rem .6rem calc(1rem + env(safe-area-inset-bottom));
	}
	.lupe__buehne { grid-column: 1; }
	.lupe__pfeil {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(12, 13, 26, .55);
	}
	.lupe__pfeil--zurueck { left: .6rem; }
	.lupe__pfeil--vor     { right: .6rem; }
	.lupe__bu { grid-column: 1; font-size: 13px; }
}

/* ══ 404: vier Wege weiter ════════════════════════════════════════════ */
.vierkant {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: .8rem;
	max-width: 54rem;
}

.vierkant__karte {
	display: block;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 12px);
	background: var(--paper);
	text-decoration: none;
	transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.vierkant__karte:hover {
	transform: translateY(-2px);
	border-color: var(--ink-3);
	box-shadow: 0 10px 26px rgba(18, 20, 37, .1);
}
.vierkant__karte strong {
	display: block;
	margin-bottom: .25rem;
	font-size: 15.5px;
	color: var(--ink);
}
.vierkant__karte span {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-2);
}