/* ==========================================================================
   Patrick Thomalla Merch – „Die Bühne nach der Show“
   Teil 1: Kopfleiste, Hero und Kategorie-Kacheln, übernommen aus dem bisherigen Child-Theme
   (salient-child 10/2026), ohne WordPress-/Salient-Regeln. Teil 2 (ab „Neue Ebene“) ergänzt
   Bewegung, Produktkarten, Fußzeile und den Dunkelmodus für die Shop-Bausteine aus site.css.
   ========================================================================== */

/**
 * Markenfarben „Die Bühne nach der Show“ – einzige Quelle (siehe DESIGN.md).
 * Wird von inc/tokens.php auf jeder Seite inline ausgegeben, auch auf der CheckoutWC-Kasse.
 * shop.css, header.css, cart-pill.css und dark.css verweisen nur noch auf diese Werte.
 */
:root {
	--pt-pink: #bf4896;       /* Spotlight-Pink: Weiß darauf ≥ 4,5:1 */
	--pt-pink-warm: #ba4e93;  /* Verlaufsbeginn Kopfleiste, Pille, Footer */
	--pt-pink-text: #a83f86;  /* Pink als Schrift auf Hell ≥ 4,5:1 */
	--pt-lila: #7b4bc7;       /* Vorhang-Lila */
	--pt-gold: #f5c451;       /* Rampenlicht-Gold: Zähler, Fokus, Kicker */
	--pt-rosa: #f29bd2;       /* Neon-Rosa: Pink als Schrift auf Dunkel */
	--pt-ink: #1b1420;        /* Tinte */
	--pt-muted: #6d6474;      /* Tinte gedämpft */
	--pt-puder: #f7f3f8;      /* Puder */
	--pt-ok: #1f7a4d;
	--pt-error: #b4233c;
	--pt-grad: linear-gradient(110deg, var(--pt-pink), var(--pt-lila));
	--pt-grad-warm: linear-gradient(100deg, var(--pt-pink-warm) 0%, var(--pt-pink) 45%, var(--pt-lila) 100%);
	--pt-glow: 0 10px 24px -10px rgba(199, 75, 156, .7);
	--pt-ease: cubic-bezier(.22, 1, .36, 1);
}

/**
 * Kopfbereich „Bühne & Neon“ (inc/header-hero.php): Aktionsleiste, Glas-Header, Hero.
 * Präfix ptmk- = PTM Kopf. Zustände als Attribute am <html>, weil Salient/WPBakery dessen Klassen neu setzen.
 */

.ptmk-on {
	--ptmk-grad: var(--pt-grad-warm); /* Werte aus tokens.css */
	--ptmk-gold: var(--pt-gold);
	--ptmk-glass: rgba(22, 14, 30, .58);
	--ptmk-line: rgba(255, 255, 255, .14);
	--ptmk-ann-h: 0px;
	--ptmk-bar-h: 72px;
	--ptmk-gap: 14px;
	--ptmk-wp: 0px; /* WordPress-Adminleiste */
	/* Platz, den der schwebende Header oben braucht */
	--ptmk-offset: calc(var(--ptmk-wp) + var(--ptmk-ann-h) + var(--ptmk-gap) + var(--ptmk-bar-h) + 18px);
}
html[data-ptmk-promo][data-ptmk-ann] .ptmk-on { --ptmk-ann-h: 38px; }

.ptmk-header, .ptmk-panel { font-family: Poppins, sans-serif; }
.ptmk-panel[hidden] { display: none !important; }

/* ---------- Aktionsleiste ---------- */
.ptmk-announce {
	position: relative;
	z-index: 10001;
	height: 38px;
	background: var(--ptmk-grad);
	color: #fff;
	font: 500 13px/38px Poppins, sans-serif;
	text-align: center;
	overflow: hidden;
}
.ptmk-announce__in {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 0 48px; white-space: nowrap;
}
.ptmk-announce b { font-weight: 700; }
.ptmk-announce code {
	font: 700 11.5px/1 Poppins, sans-serif; letter-spacing: .08em;
	padding: 5px 9px; border-radius: 999px;
	background: rgba(27,20,32,.25); border: 1px dashed rgba(255,255,255,.6);
}
.ptmk-announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ptmk-announce__x {
	position: absolute; right: 8px; top: 7px; width: 24px; height: 24px;
	border: 0; border-radius: 50%; background: rgba(0,0,0,.15); color: #fff;
	cursor: pointer; font-size: 15px; line-height: 24px; padding: 0;
}
.ptmk-announce__short { display: none; }

/* ---------- Schwebender Glas-Header ---------- */
.ptmk-header {
	position: fixed;
	z-index: 10000;
	top: calc(var(--ptmk-wp) + var(--ptmk-ann-h) + var(--ptmk-gap));
	left: 0; right: 0;
	padding: 0 24px;
	pointer-events: none;
	transition: top .35s var(--ptm-ease, ease);
}
html[data-ptmk-scrolled] .ptmk-header { top: calc(var(--ptmk-wp) + 10px); }
.ptmk-header__bar {
	pointer-events: auto;
	max-width: 1240px; margin: 0 auto;
	display: flex; align-items: center; gap: 18px;
	height: 72px; padding: 0 12px 0 26px;
	background: var(--ptmk-glass);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid var(--ptmk-line);
	border-radius: 22px;
	box-shadow: 0 18px 40px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
	transition: height .35s var(--ptm-ease, ease), background .35s, border-radius .35s;
}
/* Helle Seiten ohne Kopfbild: Leiste fast deckend, sonst wirkt das Glas grau */
.ptmk-on:not(.has-stage) .ptmk-header__bar { background: rgba(26, 16, 34, .94); }
html[data-ptmk-scrolled] .ptmk-header__bar {
	height: 58px; background: rgba(22, 14, 30, .82); border-radius: 18px;
}
.ptmk-logo { display: flex; align-items: center; flex: 0 0 auto; }
.ptmk-logo img { display: block; height: 30px; width: auto; transition: height .35s var(--ptm-ease, ease); }
html[data-ptmk-scrolled] .ptmk-logo img { height: 24px; }
.ptmk-logo .ptmk-logo__m { display: none; }

.ptmk-nav { margin-left: auto; }
.ptmk-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ptmk-nav li { list-style: none !important; margin: 0 !important; padding: 0; }
.ptmk-nav li::before, .ptmk-nav li::marker { content: none !important; display: none; }
.ptmk-nav a {
	position: relative;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 9px 16px; border-radius: 999px;
	color: rgba(255,255,255,.86) !important;
	font: 500 14.5px/1 Poppins, sans-serif;
	transition: background .2s, color .2s;
}
.ptmk-nav a:hover { background: rgba(255,255,255,.1); color: #fff !important; }
.ptmk-nav a svg { width: 11px; height: 11px; opacity: .55; }
.ptmk-nav a[aria-current] {
	color: #fff !important;
	background: linear-gradient(rgba(36,20,46,.9), rgba(36,20,46,.9)) padding-box, var(--ptmk-grad) border-box;
	border: 1.5px solid transparent;
	padding: 7.5px 14.5px;
}

.ptmk-actions { display: flex; gap: 8px; align-items: center; }
.ptmk-ibtn {
	position: relative;
	display: inline-grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--ptmk-line);
	background: rgba(255,255,255,.06); color: #fff !important;
	cursor: pointer; padding: 0;
	transition: background .2s, transform .2s;
}
.ptmk-ibtn:hover { background: rgba(255,255,255,.16); }
.ptmk-ibtn svg { width: 19px; height: 19px; }
.ptmk-ibtn--cart { background: var(--ptmk-grad); border-color: transparent; box-shadow: 0 8px 20px -8px rgba(199,75,156,.8); }
/* Hell/Dunkel-Umschalter: Mond im hellen, Sonne im dunklen Design */
.ptmk-theme-btn .ptmk-i-sun,
html[data-ptm-theme="dark"] .ptmk-theme-btn .ptmk-i-moon { display: none; }
html[data-ptm-theme="dark"] .ptmk-theme-btn .ptmk-i-sun { display: block; }
.ptmk-header a:focus-visible, .ptmk-header button:focus-visible, .ptmk-header input:focus-visible,
.ptmk-announce a:focus-visible, .ptmk-announce button:focus-visible, .ptmk-hero a:focus-visible {
	outline: 2px solid var(--ptmk-gold) !important; outline-offset: 3px;
}
.ptmk-badge {
	position: absolute; top: -4px; right: -4px;
	min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
	background: var(--ptmk-gold); color: #2a1a05;
	font: 700 11px/20px Poppins, sans-serif; text-align: center;
	box-shadow: 0 0 0 2px rgba(22,14,30,.9);
}
.ptmk-badge[data-n="0"] { display: none; }
.ptmk-burger { display: none; }

/* Aufklapp-Panels (Suche, mobiles Menü) – hängen direkt unter der Leiste */
.ptmk-panel {
	pointer-events: auto;
	position: absolute; z-index: 1;
	top: calc(100% + 8px); right: 24px;
	padding: 10px; border-radius: 20px;
	background: rgba(22, 14, 30, .94);
	-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
	border: 1px solid var(--ptmk-line);
	box-shadow: 0 24px 50px -20px rgba(0,0,0,.6);
}
.ptmk-sheet { left: 24px; }
.ptmk-search { display: flex; gap: 8px; width: min(440px, calc(100vw - 48px)); }
.ptmk-search input[type="search"] {
	flex: 1; min-width: 0; height: 48px !important; margin: 0 !important; padding: 0 16px !important;
	border-radius: 14px !important; border: 1px solid var(--ptmk-line) !important;
	background: rgba(255,255,255,.08) !important; color: #fff !important;
	font: 500 16px/1 Poppins, sans-serif !important; box-shadow: none !important;
}
.ptmk-search input::placeholder { color: rgba(255,255,255,.55); }
.ptmk-search__go {
	flex: 0 0 48px; height: 48px; border: 0; border-radius: 14px; padding: 0 !important;
	background: var(--ptmk-grad) !important; color: #fff; cursor: pointer; display: grid; place-items: center;
}
.ptmk-search__go svg { width: 20px; height: 20px; }
.ptmk-sheet a {
	display: flex; justify-content: space-between; align-items: center;
	padding: 15px 16px; border-radius: 14px;
	color: #fff !important; font: 500 16px/1.2 Poppins, sans-serif;
}
.ptmk-sheet a + a { border-top: 1px solid rgba(255,255,255,.07); }
.ptmk-sheet a[aria-current] { background: rgba(199,75,156,.22); }
.ptmk-sheet a svg { width: 12px; height: 12px; margin-left: 8px; opacity: .55; vertical-align: 1px; }

/* ---------- Hero „Bühne“ ---------- */
.ptmk-hero {
	position: relative;
	overflow: hidden;
	min-height: 600px;
	padding: calc(var(--ptmk-offset) + 50px) 24px 0;
	color: #fff;
	background: #120a17;
	isolation: isolate;
}
.ptmk-hero__bg {
	position: absolute; inset: 0; z-index: -3;
	width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
	filter: saturate(.85) brightness(.55);
	transform: scale(1.04);
}
.ptmk-hero::before { /* Farbschleier */
	content: ""; position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(60% 80% at 80% 30%, rgba(123,75,199,.45), transparent 70%),
		radial-gradient(50% 70% at 10% 90%, rgba(214,90,169,.45), transparent 70%),
		linear-gradient(180deg, rgba(18,10,23,.55) 0%, rgba(18,10,23,.25) 40%, rgba(18,10,23,.92) 100%);
}
.ptmk-hero::after { /* Spotlight */
	content: ""; position: absolute; z-index: -1;
	top: -30%; right: 12%; width: 46%; height: 140%;
	background: conic-gradient(from 180deg at 50% 0%, transparent 42%, rgba(255,236,200,.16) 50%, transparent 58%);
	filter: blur(6px);
	animation: ptmk-sweep 9s ease-in-out infinite alternate;
	transform-origin: 50% 0;
}
@keyframes ptmk-sweep { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

.ptmk-hero__inner {
	max-width: 1240px; margin: 0 auto;
	display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
	min-height: 380px;
}
.ptmk-eyebrow {
	display: inline-flex; align-items: center;
	margin: 0 0 18px; padding: 9px 16px; border-radius: 999px;
	font: 600 13px/1 Poppins, sans-serif; letter-spacing: .12em; text-transform: uppercase;
}

/* Umlaufender Metall-Rahmen (Idee wie combe-solar.de, in Markenfarben) */
@property --ptmk-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ptmk-metall {
	position: relative; isolation: isolate; overflow: hidden;
	border: 0 !important; background: transparent !important;
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
	box-shadow: 0 10px 24px -12px rgba(199,75,156,.7);
}
.ptmk-metall::before {
	content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
	background: conic-gradient(from var(--ptmk-winkel),
		#ffe3f3 0%, #d65aa9 8%, #4a1b45 17%, #f5c451 26%,
		#7b4bc7 36%, #fff4dc 46%, #c74b9c 57%, #2a1240 68%,
		#e9a6ff 79%, #5a2a8a 89%, #ffe3f3 100%);
	filter: saturate(1.15);
}
.ptmk-metall::after {
	content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit;
	background:
		linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%),
		linear-gradient(180deg, rgba(40,22,52,.94), rgba(20,11,28,.96));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
@media (prefers-reduced-motion: no-preference) {
	.ptmk-metall::before { animation: ptmk-metall 7s linear infinite; }
}
@keyframes ptmk-metall { to { --ptmk-winkel: 360deg; } }
@supports not (background: conic-gradient(from 0deg, red, blue)) {
	.ptmk-metall::before { background: linear-gradient(135deg, #f5c451, #c74b9c 45%, #ffe3f3 60%, #7b4bc7); }
}
.ptmk-hero h1 {
	margin: 0 0 16px; color: #fff !important; text-transform: none !important;
	font: 700 clamp(34px, 5.2vw, 64px)/1.04 Poppins, sans-serif; letter-spacing: -.02em;
}
.ptmk-hero h1 em {
	font-style: normal;
	background: linear-gradient(90deg, #ff8fd2, #d65aa9 40%, #a57bff);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: 0 0 40px rgba(214,90,169,.35);
}
.ptmk-lead { max-width: 30em; margin: 0 0 28px; color: rgba(255,255,255,.78); font: 400 17px/1.6 Poppins, sans-serif; }
.ptmk-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ptmk-btn {
	display: inline-flex; align-items: center; gap: 10px;
	height: 54px; padding: 0 22px; border-radius: 999px;
	font: 600 15px/1 Poppins, sans-serif; color: #fff !important;
	transition: transform .25s var(--ptm-ease, ease), box-shadow .25s;
}
.ptmk-btn:hover { transform: translateY(-2px); }
.ptmk-btn--main { background: var(--ptmk-grad); box-shadow: 0 14px 30px -12px rgba(199,75,156,.9); }
.ptmk-btn--main span { padding: 4px 9px; border-radius: 999px; background: rgba(27,20,32,.28); font-size: 13px; }
.ptmk-btn--glass { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ptmk-btn--glass svg { width: 16px; height: 16px; }

/* Produktkarten rechts */
.ptmk-stack { position: relative; height: 430px; }
.ptmk-card {
	position: absolute; width: 210px;
	padding: 10px 10px 14px; border-radius: 20px;
	background: #fff; color: var(--pt-ink) !important;
	box-shadow: 0 30px 60px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.4);
	transition: transform .35s var(--ptm-ease, ease);
	animation: ptmk-float 6s ease-in-out infinite;
}
.ptmk-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 13px; }
.ptmk-card strong { display: block; margin: 10px 4px 2px; font: 600 13.5px/1.3 Poppins, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptmk-card span { display: block; margin: 0 4px; font: 700 14px/1 Poppins, sans-serif; color: var(--pt-pink-text); }
.ptmk-card:nth-child(1) { left: 0; top: 112px; --r: -7deg; animation-delay: -1s; }
.ptmk-card:nth-child(2) { left: 32%; top: 0; z-index: 2; width: 236px; --r: 2deg; animation-delay: -3s; }
.ptmk-card:nth-child(3) { right: 0; top: 128px; --r: 8deg; animation-delay: -4.5s; }
.ptmk-card:hover { z-index: 3; }
@keyframes ptmk-float {
	0%, 100% { transform: rotate(var(--r)) translateY(0); }
	50% { transform: rotate(var(--r)) translateY(-10px); }
}
.ptmk-tag {
	position: absolute; z-index: 4; left: 24%; bottom: 0;
	padding: 11px 18px; border-radius: 16px;
	font: 500 13px/1.35 Poppins, sans-serif;
}
.ptmk-tag b { color: var(--ptmk-gold); }

/* Kategorie-Leiste unten im Hero */
.ptmk-cats {
	max-width: 1240px; margin: 36px auto 0; padding: 0 0 26px;
	display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
	mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.ptmk-cats::-webkit-scrollbar { display: none; }
/* Ab Tablet: umbrechen statt rechts abgeschnitten (Wischen bleibt am Handy) */
@media (min-width: 691px) {
	.ptmk-cats { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
.ptmk-cats a {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
	height: 42px; padding: 0 16px; border-radius: 999px;
	background: rgba(255,255,255,.08); border: 1px solid var(--ptmk-line);
	color: #fff !important; font: 500 14px/1 Poppins, sans-serif;
	transition: background .2s, border-color .2s;
}
.ptmk-cats a:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }
.ptmk-cats small { color: rgba(255,255,255,.62); font-size: 13px; }
/* Kategorie „Aktion“ (nur im Aktionszeitraum, siehe .ptmk-promo-only) */
.ptmk-cats a.ptmk-cats__promo { background: var(--ptmk-grad); border-color: rgba(245,196,81,.55); font-weight: 600; }
.ptmk-cats a.ptmk-cats__promo:hover { background: var(--ptmk-grad); border-color: var(--ptmk-gold); filter: brightness(1.08); }
.ptmk-cats a.ptmk-cats__promo small { color: rgba(255,255,255,.85); }

/* Aktion nur im Zeitraum (html[data-ptmk-promo] setzt ein Skript im <head>) */
.ptmk-announce, .ptmk-promo-only { display: none !important; }
html[data-ptmk-promo][data-ptmk-ann] .ptmk-announce { display: block !important; }
html[data-ptmk-promo] .ptmk-promo-only { display: inline-flex !important; }
html[data-ptmk-promo] .ptmk-tag.ptmk-promo-only { display: block !important; }

/* Intro darunter verkürzen */
.ptmk-on .ptm-landing__intro .ptm-eyebrow,
.ptmk-on .ptm-landing__intro .ptm-landing__lead,
.ptmk-on .ptm-landing__intro .ptm-btn,
.ptmk-on .ptm-landing__intro a[class*="button"] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.ptmk-hero::after, .ptmk-card { animation: none; }
}

/* ---------- Aktionsbild (ptmk_campaign) ersetzt im Zeitraum Text und Karten ---------- */
.ptmk-campaign { display: none; }
html[data-ptmk-campaign] .ptmk-hero { min-height: 0; padding-top: calc(var(--ptmk-offset) + 28px); }
html[data-ptmk-campaign] .ptmk-hero__bg,
html[data-ptmk-campaign] .ptmk-stack,
html[data-ptmk-campaign] .ptmk-eyebrow,
html[data-ptmk-campaign] .ptmk-lead,
html[data-ptmk-campaign] .ptmk-ctas { display: none !important; }
html[data-ptmk-campaign] .ptmk-hero__inner { display: block; min-height: 0; }
html[data-ptmk-campaign] .ptmk-hero h1 { /* bleibt als Seitenüberschrift für Screenreader */
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html[data-ptmk-campaign] .ptmk-campaign {
	display: block; position: relative;
	max-width: 1240px; margin: 0 auto; aspect-ratio: 2 / 1;
	border-radius: 28px; overflow: hidden;
	background: #2a1d12;
	box-shadow: 0 30px 60px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(245,196,81,.22);
	transition: transform .35s var(--ptm-ease, ease), box-shadow .35s;
}
.ptmk-campaign img { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-ptmk-campaign] .ptmk-campaign:hover { transform: translateY(-3px); box-shadow: 0 36px 70px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(245,196,81,.4); }
.ptmk-campaign:focus-visible { outline: 3px solid var(--pt-gold) !important; outline-offset: 4px; }
html[data-ptmk-campaign] .ptmk-hero .ptmk-cats { margin-top: 22px; }
@media (max-width: 690px) {
	html[data-ptmk-campaign] .ptmk-hero { padding-top: calc(var(--ptmk-offset) + 14px); }
	html[data-ptmk-campaign] .ptmk-campaign { border-radius: 18px; }
	html[data-ptmk-campaign] .ptmk-hero .ptmk-cats { margin-top: 16px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 999px) {
	.ptmk-nav { display: none; }
	.ptmk-actions { margin-left: auto; }
	.ptmk-burger { display: inline-grid; }
	.ptmk-panel { right: 24px; }
	.ptmk-hero__inner { grid-template-columns: 1fr; min-height: 0; gap: 28px; }
	.ptmk-stack { height: 300px; max-width: 520px; width: 100%; margin: 0 auto; }
	.ptmk-card { width: 168px; }
	.ptmk-card:nth-child(2) { width: 190px; left: 30%; }
}

/* ---------- Handy ---------- */
@media (max-width: 690px) {
	html[data-ptmk-promo][data-ptmk-ann] .ptmk-on { --ptmk-ann-h: 34px; }
	.ptmk-announce { height: 34px; font-size: 13px; line-height: 34px; }
	.ptmk-announce__in { padding: 0 36px; justify-content: center; gap: 8px; }
	.ptmk-announce__long { display: none; }
	.ptmk-announce__short { display: inline; }
	.ptmk-announce code { font-size: 11.5px; padding: 4px 7px; }
	.ptmk-announce__x { top: 5px; right: 6px; }

	.ptmk-header { padding: 0 12px; }
	html[data-ptmk-scrolled] .ptmk-header { top: calc(var(--ptmk-wp) + 8px); }
	.ptmk-header__bar { height: 62px; padding: 0 8px 0 12px; border-radius: 20px; gap: 8px; }
	html[data-ptmk-scrolled] .ptmk-header__bar { height: 56px; }
	.ptmk-logo .ptmk-logo__d { display: none; }
	.ptmk-logo .ptmk-logo__m { display: block; height: 40px; }
	html[data-ptmk-scrolled] .ptmk-logo img.ptmk-logo__m { height: 34px; }
	.ptmk-ibtn { width: 44px; height: 44px; }
	.ptmk-panel { right: 12px; }
	.ptmk-sheet { left: 12px; }
	.ptmk-search { width: calc(100vw - 24px); }
	.ptmk-on { --ptmk-bar-h: 62px; --ptmk-gap: 10px; }

	.ptmk-hero { min-height: 0; padding: calc(var(--ptmk-offset) + 14px) 16px 0; }
	.ptmk-eyebrow { margin-bottom: 14px; font-size: 12px; }
	.ptmk-hero h1 { font-size: 34px; margin-bottom: 10px; }
	.ptmk-lead { font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
	/* Reihenfolge mobil: Text → Produktkarten → Button (mittig, nicht volle Breite) */
	.ptmk-hero__inner { display: flex; flex-direction: column; gap: 0; }
	.ptmk-hero__copy { display: contents; }
	.ptmk-eyebrow { align-self: flex-start; }
	.ptmk-hero h1, .ptmk-lead { align-self: stretch; text-align: left; }
	.ptmk-stack { order: 1; margin: 6px 0 0 !important; }
	.ptmk-ctas { order: 2; justify-content: center; margin-top: 14px; }
	.ptmk-ctas { gap: 10px; }
	.ptmk-btn { height: 50px; padding: 0 18px; font-size: 14.5px; }
	.ptmk-btn--main { padding: 0 24px; }
	/* Aktion steht mobil schon in der Leiste oben */
	html[data-ptmk-promo] .ptmk-ctas .ptmk-btn--glass.ptmk-promo-only,
	html[data-ptmk-promo] .ptmk-stack .ptmk-tag.ptmk-promo-only { display: none !important; }

	.ptmk-stack { height: 168px; }
	.ptmk-card { width: 104px; padding: 6px 6px 9px; border-radius: 15px; }
	.ptmk-card img { border-radius: 10px; }
	.ptmk-card strong { font-size: 12px; margin: 7px 2px 2px; }
	.ptmk-card span { font-size: 13px; margin: 0 2px; }
	.ptmk-card:nth-child(1) { left: 4%; top: 30px; }
	.ptmk-card:nth-child(2) { width: 116px; left: calc(50% - 58px); top: 0; }
	.ptmk-card:nth-child(3) { right: 4%; top: 40px; }

	.ptmk-cats { margin-top: 20px; padding-bottom: 20px; margin-right: -16px; }
	.ptmk-cats a { height: 40px; font-size: 13.5px; }
}

/* Sehr schmale Handys: Enddatum in der Leiste weglassen, damit Code und „Zur Aktion“ passen */
@media (max-width: 379px) {
	.ptmk-announce__date { display: none; }
}

/* ==========================================================================
   Patrick Thomalla Merch – Shop-Optik
   ========================================================================== */

:root {
	--ptm-accent: var(--pt-pink); /* Werte aus tokens.css */
	--ptm-accent-text: var(--pt-pink-text);
	--ptm-accent-2: var(--pt-lila);
	--ptm-ink: var(--pt-ink);
	--ptm-muted: var(--pt-muted);
	--ptm-surface: var(--pt-puder);
	--ptm-radius: 20px;
	--ptm-radius-sm: 12px;
	--ptm-shadow: 0 10px 30px -12px rgba(40, 14, 48, .28);
	--ptm-shadow-lg: 0 24px 50px -18px rgba(40, 14, 48, .45);
	--ptm-ease: var(--pt-ease);
}

/* ---------- Einblenden beim Scrollen ---------- */
/* „translate“ statt „transform“, damit Hover-Effekte unabhängig bleiben. */

[data-ptm-js] [data-ptm-reveal],
[data-ptm-js] .ptm-noop {
	opacity: 0;
	translate: 0 24px;
	transition: opacity .7s var(--ptm-ease), translate .7s var(--ptm-ease), transform .5s var(--ptm-ease), box-shadow .5s var(--ptm-ease);
	transition-delay: calc(var(--ptm-i, 0) * 60ms), calc(var(--ptm-i, 0) * 60ms), 0s, 0s;
	/* Fallback, falls das Script nicht lädt */
	animation: ptm-failsafe 0s 2.5s forwards;
}

[data-ptm-js] [data-ptm-reveal].is-visible,
[data-ptm-js] .ptm-noop.is-visible {
	opacity: 1;
	translate: none;
	animation: none;
}

@keyframes ptm-failsafe {
	to { opacity: 1; translate: none; }
}

/* ---------- Landing ---------- */

.ptm-landing {
	padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 7vw, 96px);
}

.ptm-landing__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
	margin-bottom: clamp(24px, 4vw, 44px);
}

.ptm-landing__intro > div {
	max-width: 620px;
}

.ptm-eyebrow {
	display: inline-block;
	margin: 0 0 10px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: linear-gradient(90deg, var(--ptm-accent), var(--ptm-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ptm-landing .ptm-landing__title {
	margin: 0 0 10px;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--ptm-ink);
}

.ptm-landing__lead {
	margin: 0;
	padding: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ptm-muted);
}

/* ---------- Button ---------- */

.ptm-btn,
body .ptm-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px 14px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	color: #fff;
	background: linear-gradient(110deg, var(--ptm-accent), var(--ptm-accent-2), var(--ptm-accent));
	background-size: 220% 100%;
	box-shadow: 0 10px 24px -10px rgba(199, 75, 156, .7);
	transition: background-position .8s var(--ptm-ease), transform .3s var(--ptm-ease), box-shadow .3s var(--ptm-ease);
}

.ptm-btn:hover,
.ptm-btn:focus-visible {
	color: #fff;
	background-position: 100% 0;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -12px rgba(199, 75, 156, .8);
}

.ptm-btn__badge {
	display: inline-grid;
	place-items: center;
	min-width: 32px;
	height: 28px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 13px;
	background: rgba(27, 20, 32, .28);
}

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

.ptm-cats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(220px, 21vw, 300px);
	grid-auto-flow: dense;
	gap: clamp(12px, 1.6vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ptm-cats > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ptm-cat--featured {
	grid-column: span 2;
	grid-row: span 2;
}

.ptm-cat__link {
	--mx: 50%;
	--my: 50%;
	--rx: 0deg;
	--ry: 0deg;
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: var(--ptm-radius);
	background: var(--ptm-surface);
	color: #fff;
	box-shadow: var(--ptm-shadow);
	transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform .5s var(--ptm-ease), box-shadow .5s var(--ptm-ease);
	isolation: isolate;
}

.ptm-cat__link:hover,
.ptm-cat__link:focus-visible {
	color: #fff;
	box-shadow: var(--ptm-shadow-lg);
}

.ptm-cat__link:focus-visible {
	outline: 3px solid var(--ptm-accent);
	outline-offset: 4px;
}

.ptm-cat__media,
.ptm-cat__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ptm-cat__media img {
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.1s var(--ptm-ease), filter .6s var(--ptm-ease);
}

.ptm-cat__link:hover .ptm-cat__media img,
.ptm-cat__link:focus-visible .ptm-cat__media img {
	transform: scale(1.1);
}

/* Lesbarkeits-Verlauf + Spotlight, das der Maus folgt */
.ptm-cat__link::before,
.ptm-cat__link::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.ptm-cat__link::before {
	background: linear-gradient(180deg, rgba(27, 20, 32, 0) 35%, rgba(27, 20, 32, .55) 70%, rgba(27, 20, 32, .88) 100%);
	transition: opacity .5s var(--ptm-ease);
}

.ptm-cat__link::after {
	background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .28), transparent 45%);
	opacity: 0;
	transition: opacity .4s var(--ptm-ease);
}

.ptm-cat__link:hover::after {
	opacity: 1;
}

.ptm-cat__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(16px, 2vw, 26px);
}

.ptm-cat__count {
	align-self: flex-start;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .04em;
	background: rgba(27, 20, 32, .5); /* deckend statt Blur: billiger auf vielen Kacheln */
}

.ptm-cat__name {
	font-size: clamp(18px, 1.7vw, 24px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.ptm-cat--featured .ptm-cat__name {
	font-size: clamp(24px, 3vw, 40px);
}

.ptm-cat__desc {
	max-width: 46ch;
	font-size: 14px;
	line-height: 1.5;
	opacity: .88;
}

.ptm-cat__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .4s var(--ptm-ease), transform .4s var(--ptm-ease);
}

.ptm-cat__link:hover .ptm-cat__cta,
.ptm-cat__link:focus-visible .ptm-cat__cta,
.ptm-cat--featured .ptm-cat__cta {
	opacity: 1;
	transform: none;
}

.ptm-cat__cta span {
	transition: transform .4s var(--ptm-ease);
}

.ptm-cat__link:hover .ptm-cat__cta span {
	transform: translateX(4px);
}

/* „Aktion“-Kachel: volle Breite oben, nur im Aktionszeitraum (html[data-ptmk-promo]) */
.ptm-cat--promo {
	display: none;
	grid-column: 1 / -1;
}

html[data-ptmk-promo] .ptm-cat--promo {
	display: block;
}

.ptm-cat--promo .ptm-cat__link {
	background:
		radial-gradient(90% 120% at 0% 0%, rgba(199, 75, 156, .95), transparent 60%),
		radial-gradient(90% 120% at 100% 100%, rgba(245, 196, 81, .55), transparent 55%),
		var(--ptm-ink);
	box-shadow: var(--ptm-shadow), inset 0 0 0 1.5px rgba(245, 196, 81, .45);
}

.ptm-cat--promo .ptm-cat__link::before {
	opacity: 0;
}

.ptm-cat--promo .ptm-cat__body {
	top: 0;
	right: 48%;
	justify-content: flex-end;
}

.ptm-cat--promo .ptm-cat__name {
	font-size: clamp(26px, 3vw, 40px);
}

.ptm-cat--promo .ptm-cat__desc b {
	letter-spacing: .06em;
}

.ptm-cat--promo .ptm-cat__cta {
	opacity: 1;
	transform: none;
}

.ptm-cat__thumbs {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: clamp(16px, 3vw, 40px);
	display: flex;
	transform: translateY(-50%);
}

.ptm-cat__thumbs img {
	width: clamp(84px, 11vw, 150px);
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 4px solid #fff;
	border-radius: 16px;
	box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .7);
	transition: transform .5s var(--ptm-ease);
}

.ptm-cat__thumbs img + img {
	margin-left: -18px;
}

.ptm-cat__thumbs img:nth-child(odd) { transform: rotate(-5deg); }
.ptm-cat__thumbs img:nth-child(even) { transform: rotate(4deg) translateY(8px); }

.ptm-cat--promo .ptm-cat__link:hover .ptm-cat__thumbs img { transform: rotate(0) translateY(-4px); }

/* „Alle Produkte“-Kachel */
.ptm-cat--all .ptm-cat__link {
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(199, 75, 156, .9), transparent 60%),
		radial-gradient(120% 90% at 100% 100%, rgba(123, 75, 199, .9), transparent 60%),
		var(--ptm-ink);
}

.ptm-cat--all .ptm-cat__link::before {
	opacity: 0;
}

.ptm-cat--all .ptm-cat__cta {
	opacity: 1;
	transform: none;
}

.ptm-cat__sparkles {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
		radial-gradient(1px 1px at 70% 20%, #fff, transparent),
		radial-gradient(2px 2px at 85% 60%, #ffd6f1, transparent),
		radial-gradient(1px 1px at 40% 75%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 60% 45%, #fff, transparent),
		radial-gradient(1px 1px at 12% 85%, #ffd6f1, transparent);
	animation: ptm-twinkle 3.2s ease-in-out infinite alternate;
}

@keyframes ptm-twinkle {
	from { opacity: .35; transform: translateY(0); }
	to   { opacity: 1;   transform: translateY(-6px); }
}
/* Breite der „Alle Produkte“-Kachel füllt die letzte Rasterzeile */
.ptm-cat--span4-2 { grid-column: span 2; }
.ptm-cat--span4-3 { grid-column: span 3; }
.ptm-cat--span4-4 { grid-column: 1 / -1; }

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

@media (max-width: 1000px) {
	.ptm-cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: clamp(200px, 38vw, 300px);
	}

	.ptm-cat--all {
		grid-column: auto;
	}

	.ptm-cat--span2-2 {
		grid-column: 1 / -1;
	}
}

@media (max-width: 690px) {
	.ptm-landing__intro {
		align-items: flex-start;
	}

	.ptm-cats {
		grid-auto-rows: 190px;
	}

	.ptm-cat--featured {
		grid-row: span 1;
	}

	.ptm-cat__desc {
		display: none;
	}

	.ptm-cat--featured .ptm-cat__desc {
		display: block;
	}

	.ptm-cat__cta {
		display: none;
	}

	.ptm-cat--promo .ptm-cat__body {
		right: 0;
		top: auto;
	}

	.ptm-cat--promo .ptm-cat__desc {
		display: block;
		max-width: 62%;
		font-size: 13px;
	}

	.ptm-cat__thumbs {
		top: 16px;
		right: 14px;
		transform: none;
	}

	.ptm-cat__thumbs img {
		width: 64px;
		border-width: 3px;
		border-radius: 11px;
	}

	.ptm-cat__thumbs img:nth-child(n+4) {
		display: none;
	}
}


/* ---------- Fußzeile „Bühne & Neon“ (aus der bisherigen Global Section) ---------- */
.ptmf{
	--g:linear-gradient(100deg,#ba4e93 0%,#bf4896 45%,#7b4bc7 100%);
	--gold:#f5c451;--line:rgba(255,255,255,.12);--muted:rgba(255,255,255,.66);
	position:relative;overflow:hidden;isolation:isolate;
	background:
		radial-gradient(60% 80% at 8% 0%,rgba(214,90,169,.22),transparent 60%),
		radial-gradient(50% 70% at 100% 10%,rgba(123,75,199,.24),transparent 60%),
		linear-gradient(180deg,#1b0f25 0%,#120a19 100%);
	color:#fff;font:400 15px/1.6 Poppins,sans-serif;text-align:left
}
.ptmf::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--g);z-index:1}
.ptmf *{box-sizing:border-box}
.ptmf a{color:inherit;text-decoration:none}
.ptmf__in{max-width:1240px;margin:0 auto;padding:0 32px}
.ptmf ul{list-style:none!important;margin:0!important;padding:0!important}
.ptmf li{margin:0!important;padding:0!important;list-style:none!important}
.ptmf li::before{display:none!important}
.ptmf__h,.ptmf__h4{color:#fff!important;font-family:Poppins,sans-serif!important;text-transform:none!important;letter-spacing:0}

/* Bühne: Live-Teaser */
.ptmf__stage{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
	margin:56px 0 0;padding:28px 32px;border-radius:24px;
	background:linear-gradient(120deg,rgba(214,90,169,.16),rgba(123,75,199,.16));
	border:1px solid var(--line);position:relative;overflow:hidden}
.ptmf__stage::after{content:"";position:absolute;right:-60px;top:-120px;width:320px;height:320px;border-radius:50%;
	background:radial-gradient(circle,rgba(245,196,81,.18),transparent 65%);pointer-events:none}
.ptmf__kicker{display:block;font:600 15px/1.2 Poppins,sans-serif;color:var(--gold);margin:0 0 8px}
.ptmf__h{margin:0!important;font:700 clamp(22px,2.6vw,30px)/1.15 Poppins,sans-serif!important}
.ptmf__h em{font:inherit!important;font-style:normal!important;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.ptmf__btns{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.ptmf__btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;
	font:600 14px/1 Poppins,sans-serif;color:#fff!important;transition:transform .2s,box-shadow .2s,background .2s}
.ptmf__btn--main{background:var(--g);box-shadow:0 12px 28px -12px rgba(199,75,156,.8)}
.ptmf__btn--glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22)}
.ptmf__btn:hover{transform:translateY(-2px)}
.ptmf__btn--glass:hover{background:rgba(255,255,255,.14)}

/* Spalten */
.ptmf__grid{display:grid;grid-template-columns:1.25fr 1.6fr 1fr;gap:48px;padding:52px 0 44px}
.ptmf img.ptmf__logo{display:block;width:240px!important;max-width:100%!important;height:auto!important;margin:0 0 18px!important}
.ptmf__about{color:var(--muted);margin:0 0 20px;max-width:34ch}
.ptmf__shop{display:flex;flex-wrap:wrap;gap:8px}
.ptmf__pill{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;
	border:1px solid var(--line);background:rgba(255,255,255,.04);font:500 13px/1 Poppins,sans-serif;transition:border-color .2s,background .2s}
.ptmf__pill:hover{border-color:rgba(214,90,169,.7);background:rgba(214,90,169,.12)}
.ptmf__h4{margin:0 0 16px!important;font:600 15px/1.2 Poppins,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:rgba(255,255,255,.78)!important}
.ptmf__links{display:grid!important;grid-template-columns:1fr 1fr;gap:10px 28px}
.ptmf__links a,.ptmf__links .wrb-trigger-btn{position:relative;display:inline-block;color:rgba(255,255,255,.86)!important;font:400 14.5px/1.4 Poppins,sans-serif!important;transition:color .2s}
.ptmf__links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:var(--g);
	transform:scaleX(0);transform-origin:left;transition:transform .25s}
.ptmf__links a:hover{color:#fff!important}
.ptmf__links a:hover::after{transform:scaleX(1)}
/* Plugin-Links (Widerruf-Button, Gewährleistung) wie normale Links */
.ptmf .wrb-trigger-btn{background:none!important;padding:0!important;border-radius:0!important;font-weight:400!important;opacity:1!important}
.ptmf .eugl-open{text-decoration:none!important}

.ptmf__pay{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.ptmf__chip{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 8px;border-radius:999px;
	background:rgba(255,255,255,.06);border:1px solid var(--line);font:600 14px/1 Poppins,sans-serif;color:#fff;white-space:nowrap}
.ptmf__ico{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none}
.ptmf__ico svg{display:block;width:18px;height:18px}
.ptmf__ico--pp{background:#fff}
.ptmf__ico--bank{background:var(--g)}
.ptmf__pp{font-style:italic;font-weight:800;letter-spacing:-.01em}
.ptmf__pp b{color:#fff;font-weight:800}
.ptmf__pp b,.ptmf__pp i{font:inherit!important;font-style:italic!important;line-height:inherit!important}
.ptmf__pp i{color:#3fb0ff}
.ptmf__note{color:var(--muted);font-size:14px;margin:0}
.ptmf__note a{text-decoration:underline!important;text-underline-offset:3px}

/* Unterleiste */
.ptmf__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
	padding:20px 0 26px;border-top:1px solid var(--line);color:rgba(255,255,255,.66);font-size:13px}
.ptmf__bar p{margin:0;padding:0}
.ptmf__top{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;
	border:1px solid var(--line);color:rgba(255,255,255,.8)!important;font:500 13px/1 Poppins,sans-serif;transition:border-color .2s}
.ptmf__top:hover{border-color:rgba(255,255,255,.4)}

.ptmf a:focus-visible,.ptmf .wrb-trigger-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

@media (max-width:1000px){
	.ptmf__grid{grid-template-columns:1fr 1fr;gap:40px 32px}
	.ptmf__brand{grid-column:1/-1}
}
@media (max-width:690px){
	.ptmf__in{padding:0 16px}
	.ptmf__stage{margin-top:36px;padding:22px 20px;border-radius:20px}
	.ptmf__btns,.ptmf__btn{width:100%}
	.ptmf__btn{justify-content:center}
	.ptmf__grid{grid-template-columns:1fr;gap:34px;padding:38px 0 30px}
	.ptmf img.ptmf__logo{width:200px!important}
	.ptmf__links{grid-template-columns:1fr 1fr;gap:12px 18px}
	.ptmf__links a,.ptmf__links .wrb-trigger-btn{font-size:14px!important}
	.ptmf__bar{flex-direction:column-reverse;align-items:flex-start;padding-bottom:22px}
}
@media (prefers-reduced-motion:reduce){.ptmf *{transition:none!important}}

/* ==========================================================================
   Neue Ebene (Relaunch 11/2026, ohne WordPress)
   Seitenkopf, Kategorie-Leiste, Produktkarten, Produktseite, Album, Dunkelmodus und Bewegung.
   Regeln aus DESIGN.md: Verlauf nur auf Handlungen, Gold nur als Funke, Tiefe über Licht statt Rahmen,
   Produktfotos bleiben auch im Dunkelmodus auf heller Fläche.
   ========================================================================== */

:root { --head-h: 104px; --pt-photo: #f6f2f8; --pt-card: #fff; --pt-card-line: rgba(40, 14, 48, .08); }
@media (max-width: 690px) { :root { --head-h: 84px; } }

body { font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
h1, h2, h3, h4 { letter-spacing: -.02em; }
a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.ptmk-badge.cart-badge { top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--pt-gold); color: #2a1a05; font: 700 11px/20px Poppins, sans-serif; }
.ptmk-header { transition: top .35s var(--pt-ease); }
.ptmk-header__bar { transition: height .35s var(--pt-ease), background .35s, border-radius .35s; }
.ptmk-logo img { transition: height .35s var(--pt-ease); }
.ptmk-panel { transform-origin: 100% 0; animation: pt-pop .28s var(--pt-ease); }
@keyframes pt-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.toasts { top: calc(var(--head-h) + 6px); z-index: 10002; }
.drawer { z-index: 10010; } .lightbox { z-index: 10020; }

.pt-h2 { margin: 0 0 .35em; font: 700 clamp(26px, 3.4vw, 42px)/1.1 Poppins, sans-serif; letter-spacing: -.02em; color: var(--ink); }
.pt-h2 em, .pt-stage h1 em { font-style: normal; background: linear-gradient(90deg, var(--pt-pink), var(--pt-lila)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-kicker { display: inline-block; margin: 0 0 12px; font: 600 12px/1 Poppins, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--pt-gold); }
.pt-link { display: inline-flex; align-items: center; gap: 6px; font: 600 14.5px/1.2 Poppins, sans-serif; color: var(--accent); text-decoration: none; white-space: nowrap; }
.pt-link span { transition: transform .35s var(--pt-ease); }
.pt-link:hover span { transform: translateX(4px); }
.ptm-landing { padding-top: clamp(36px, 5vw, 64px); }
.ptm-cat__link { text-decoration: none; }
.ptm-cat__media img { transition: transform 1.1s var(--pt-ease); }

/* ---------- Knöpfe: Verlauf als Handlungsfarbe ---------- */
.btn--primary, .btn--glow, .drawer-checkout {
	background: linear-gradient(110deg, var(--pt-pink), var(--pt-lila), var(--pt-pink)); background-size: 220% 100%; color: #fff;
	box-shadow: var(--pt-glow); border-color: transparent;
	transition: background-position .8s var(--pt-ease), transform .3s var(--pt-ease), box-shadow .3s var(--pt-ease);
}
.btn--primary:hover, .btn--glow:hover, .drawer-checkout:hover, .btn--primary:focus-visible, .drawer-checkout:focus-visible {
	/* Verlauf vollständig neu setzen: die Basis-CSS setzt beim Überfahren „background“ als Kurzform und würde den Verlauf sonst löschen (weiße Schrift auf hellem Grund) */
	background: linear-gradient(110deg, var(--pt-pink), var(--pt-lila), var(--pt-pink)); background-size: 220% 100%; background-position: 100% 0;
	color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(199, 75, 156, .8);
}
.btn--primary::after, .drawer-checkout::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); }
.btn--primary[disabled], .btn--primary:disabled { opacity: .55; filter: saturate(.7); }
.btn--ghost:hover { color: var(--ink); }
.btn--light:hover { color: var(--pt-pink); background: #fff; }
.btn--text:hover { color: var(--pt-pink); }
.btn--primary:active { transform: scale(.98); }
.btn.is-done { background: var(--pt-ok); box-shadow: none; }
:focus-visible { outline-color: var(--pt-lila); }

/* ---------- Seitenkopf „Bühne“ (Unterseiten) ---------- */
.page-head.pt-stage {
	position: relative; overflow: hidden; isolation: isolate; color: #fff; background: #120a17;
	padding: calc(var(--head-h) + clamp(36px, 6vw, 72px)) 0 clamp(36px, 5vw, 60px); text-align: center;
}
.pt-stage__bg { position: absolute; inset: -12% 0; z-index: -2; }
.pt-stage__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: saturate(.85) brightness(.5); }
.page-head.pt-stage::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(60% 90% at 80% 20%, rgba(123, 75, 199, .45), transparent 70%), radial-gradient(50% 80% at 10% 100%, rgba(214, 90, 169, .4), transparent 70%), linear-gradient(180deg, rgba(18, 10, 23, .5), rgba(18, 10, 23, .82));
}
.pt-stage h1 { margin: 0; color: #fff; font: 700 clamp(32px, 5vw, 58px)/1.06 Poppins, sans-serif; letter-spacing: -.02em; }
.pt-stage .lead { margin: 14px auto 0; max-width: 40em; color: rgba(255, 255, 255, .8); font-size: 16.5px; }
.pt-stage .crumbs ol { justify-content: center; color: rgba(255, 255, 255, .7); }
.pt-stage .crumbs a { color: rgba(255, 255, 255, .82); }
.pt-stage .crumbs a:hover { color: #fff; }
.is-legal main > :first-child:not(.pt-stage), .is-page main > :first-child:not(.pt-stage) { padding-top: calc(var(--head-h) + clamp(28px, 4vw, 48px)); }

/* ---------- Kategorie-Leiste (klebt unter der Kopfleiste) ---------- */
.pt-catnav { position: sticky; top: calc(var(--head-h) - 22px); z-index: 60; padding: 14px 0; pointer-events: none; }
.pt-catnav__in { pointer-events: none; }
.pt-catnav__list {
	pointer-events: auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
	padding: 8px; margin-inline: -8px; border-radius: 999px;
	background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
	box-shadow: 0 10px 30px -18px rgba(40, 14, 48, .45), inset 0 0 0 1px var(--pt-card-line);
}
.pt-catnav__list::-webkit-scrollbar { display: none; }
.pt-pill {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
	font: 500 14px/1 Poppins, sans-serif; color: var(--ink); text-decoration: none; white-space: nowrap;
	background: var(--pt-card); box-shadow: inset 0 0 0 1px var(--pt-card-line); transition: background .25s, color .25s, box-shadow .25s, transform .25s var(--pt-ease);
}
.pt-pill small { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--soft); color: var(--muted); }
.pt-pill:hover { color: var(--ink); transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--line-2); }
.pt-pill.is-active { background: var(--pt-grad); color: #fff; box-shadow: var(--pt-glow); }
.pt-pill.is-active small { background: rgba(27, 20, 32, .28); color: #fff; }
.pt-pill .icon { width: 14px; height: 14px; }

.pt-allhead { padding-top: clamp(18px, 3vw, 34px); }
.pt-allhead .pt-h2 { margin-bottom: .1em; }
.pt-group { padding-block: clamp(26px, 4vw, 48px); scroll-margin-top: calc(var(--head-h) + 62px); }
.pt-group--flat { padding-top: clamp(14px, 2vw, 22px); }
.pt-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: clamp(16px, 2vw, 24px); }
.pt-group__title { position: relative; margin: 0; padding-bottom: 12px; font: 700 clamp(20px, 2.2vw, 26px)/1.2 Poppins, sans-serif; }
.pt-group__title small { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pt-group__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--pt-grad); }
.pt-count { margin-bottom: 16px; }

/* ---------- Produktkarten ---------- */
.product-grid { gap: clamp(14px, 1.8vw, 24px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
@media (max-width: 560px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.pcard { border-radius: 22px; background: var(--pt-card); box-shadow: 0 1px 0 var(--pt-card-line), 0 12px 28px -22px rgba(40, 14, 48, .5); transition: transform .5s var(--pt-ease), box-shadow .5s var(--pt-ease); }
.pcard-link { display: flex; flex-direction: column; height: 100%; padding: 8px 8px 16px; border-radius: inherit; }
.pcard-link:focus-visible { outline: 3px solid var(--pt-lila); outline-offset: 3px; }
.pcard-media { aspect-ratio: 1; border-radius: 16px; background: linear-gradient(160deg, #f1e4f6, #fbeaf4 55%, #e9dcf8); }
.pcard-img { transition: transform 1.1s var(--pt-ease), opacity .5s var(--pt-ease); }
.pcard-body { padding: 14px 8px 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard-title { margin: 0; font: 600 15.5px/1.35 Poppins, sans-serif; letter-spacing: -.005em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-price { margin: 2px 0 0; }
.pcard-price > span { display: inline-block; padding: 6px 11px; border-radius: 10px; font: 600 15px/1 Poppins, sans-serif; color: var(--accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.pcard-legal { margin: 0; font-size: 12px; color: var(--muted); }
.pcard-delivery, .pt-delivery { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin: auto 0 0; padding: 6px 11px; border-radius: 999px; font: 500 12.5px/1 Poppins, sans-serif; color: var(--ink-2); background: var(--soft); }
.pcard-delivery i, .pt-delivery i { width: 7px; height: 7px; border-radius: 50%; background: var(--pt-pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pt-pink) 22%, transparent); }
.pcard-go {
	position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 999px;
	font: 600 13.5px/1 Poppins, sans-serif; color: #fff; background: rgba(22, 14, 30, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	opacity: 0; transform: translateY(10px); transition: opacity .35s var(--pt-ease), transform .45s var(--pt-ease);
}
.pcard-tags .tag { box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .4); }
.tag--sold { background: #1b1420; color: #fff; }
.tag--sale { background: var(--pt-pink); color: #fff; }
@media (hover: hover) and (pointer: fine) {
	.pcard:hover { transform: translateY(-6px); box-shadow: 0 1px 0 var(--pt-card-line), 0 30px 50px -26px rgba(123, 75, 199, .55); }
	.pcard-link:hover .pcard-img { transform: scale(1.06); }
	.pcard-link:hover .pcard-go, .pcard-link:focus-visible .pcard-go { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
	.pcard { border-radius: 18px; } .pcard-link { padding: 6px 6px 12px; } .pcard-media { border-radius: 13px; }
	.pcard-body { padding: 10px 6px 0; } .pcard-title { font-size: 13.5px; } .pcard-price > span { font-size: 14px; padding: 5px 9px; }
	.pcard-legal { font-size: 11px; } .pcard-delivery { font-size: 11.5px; padding: 5px 9px; }
}
.section--soft { background: var(--soft); }
.usp { border: 0; border-radius: 20px; background: var(--pt-card); box-shadow: 0 1px 0 var(--pt-card-line), 0 12px 28px -22px rgba(40, 14, 48, .5); }
.usp > .icon { color: var(--pt-pink); }
.accordion summary { font-size: 16.5px; }

/* ---------- Produktseite ---------- */
.product-top { padding-top: calc(var(--head-h) + 22px); }
.pt-product { gap: clamp(24px, 4vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.pt-gallery { display: grid; gap: 12px; min-width: 0; }
.pt-gallery__stage { position: relative; min-width: 0; }
.pt-gallery__track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 22px; }
.pt-gallery__track::-webkit-scrollbar { display: none; }
.pt-gallery__slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--pt-photo); cursor: zoom-in; }
.pt-gallery__slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--pt-ease); }
.pt-gallery__rail { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; order: 2; }
.pt-gallery__rail .thumb { width: 64px; height: 64px; border-radius: 14px; opacity: .6; border: 0; box-shadow: inset 0 0 0 0 var(--pt-pink); transition: opacity .25s, transform .3s var(--pt-ease); background: var(--pt-photo); position: relative; }
.pt-gallery__rail .thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2.5px var(--pt-pink); opacity: 0; transition: opacity .25s; }
.pt-gallery__rail .thumb.is-on { opacity: 1; } .pt-gallery__rail .thumb.is-on::after { opacity: 1; }
.pt-gallery__rail .thumb:hover { opacity: 1; transform: translateY(-2px); }
.pt-gallery__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.pt-gallery__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(27, 20, 32, .28); transition: width .3s var(--pt-ease), background .3s; }
.pt-gallery__dots i.is-on { width: 20px; border-radius: 999px; background: var(--pt-pink); }
.pt-gallery .tag--lg { position: absolute; left: 14px; top: 14px; z-index: 2; }
@media (min-width: 960px) {
	.pt-product { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; }
	.product-gallery.pt-gallery { position: static; }
	.pt-gallery.has-rail { grid-template-columns: 72px minmax(0, 1fr); }
	.pt-gallery__rail { order: 0; flex-direction: column; overflow: visible; position: sticky; top: calc(var(--head-h) + 8px); align-self: start; }
	.pt-gallery__rail .thumb { width: 72px; height: 72px; }
	.pt-gallery__track { flex-direction: column; gap: 14px; overflow: visible; scroll-snap-type: none; border-radius: 0; }
	.pt-gallery__slide { flex: none; width: 100%; }
	.pt-gallery__slide:hover img { transform: scale(1.035); }
	.pt-gallery__dots { display: none; }
	.pt-buy { position: sticky; top: calc(var(--head-h) + 8px); }
}
.pt-back { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; margin-bottom: 14px; border-radius: 999px; font: 600 12.5px/1 Poppins, sans-serif; color: var(--accent); background: var(--accent-soft); text-decoration: none; transition: transform .3s var(--pt-ease); }
.pt-back:hover { transform: translateX(-3px); color: var(--accent); }
.product-title { margin: 0 0 .3em; font: 700 clamp(26px, 3vw, 38px)/1.12 Poppins, sans-serif; letter-spacing: -.02em; }
.price-box { margin: 12px 0 22px; padding: 0 0 20px; border-top: 0; border-bottom: 1px solid var(--line); }
.price { font: 700 clamp(28px, 3vw, 36px)/1.1 Poppins, sans-serif; letter-spacing: -.02em; margin: 0 0 8px; }
.price-notes { font-size: 13px; }
.pt-delivery { margin-top: 12px; font-size: 13px; padding: 8px 13px; }
.choose legend { font: 600 12px/1 Poppins, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.seg--chips { gap: 10px; }
.seg-opt--chip span { min-width: 54px; min-height: 46px; justify-content: center; padding: 8px 16px; border-radius: 999px; border: 0; background: var(--pt-card); box-shadow: inset 0 0 0 1.5px var(--line-2); font: 600 14.5px/1 Poppins, sans-serif; transition: box-shadow .25s, background .25s, color .25s, transform .3s var(--pt-ease); }
.seg-opt--chip span small { font-size: 11.5px; }
.seg-opt--chip:not(.is-out):hover span { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--pt-pink); }
.seg-opt--chip input:checked + span { background: var(--pt-grad); color: #fff; box-shadow: var(--pt-glow); border-color: transparent; }
.seg-opt--chip input:checked + span small { color: rgba(255, 255, 255, .85); }
.seg-opt--chip input:focus-visible + span { outline: 3px solid var(--pt-lila); outline-offset: 3px; }
.seg-opt--chip.is-out span { opacity: 1; color: color-mix(in srgb, var(--muted) 70%, transparent); background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--line); text-decoration: line-through; }
.buy-row { margin: 22px 0 18px; }
.qty { background: var(--pt-card); border-color: var(--line-2); }
.pt-cta { min-height: 56px; font-size: 15.5px; }
.buy-facts { font-size: 14px; }
.buy-facts .icon { color: var(--pt-pink); }
.pt-meta { margin: 20px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13.5px; }
.pt-meta div { display: flex; gap: 8px; } .pt-meta dt { font-weight: 600; } .pt-meta dt::after { content: ":"; } .pt-meta dd { margin: 0; color: var(--ink-2); }
.pt-meta a { color: var(--accent); font-weight: 600; text-decoration: none; }
.sold-box { border-radius: 20px; }
.buybar { z-index: 9990; background: color-mix(in srgb, var(--bg) 80%, transparent); }

/* Reiter: ohne Skript stehen alle Abschnitte untereinander */
.pt-tabs { padding-bottom: clamp(48px, 7vw, 96px); }
.pt-tabs__list { display: none; }
.pt-tabs__panel { padding: 22px 0; border-top: 1px solid var(--line); color: var(--ink-2); max-width: 78ch; }
.pt-tabs__h { margin: 0 0 12px; font: 700 20px/1.2 Poppins, sans-serif; }
.pt-tabs__panel .prose > :first-child { margin-top: 0; }
.guarantee-sheet { display: block; max-width: 300px; margin-top: 14px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
[data-ptm-js] .pt-tabs.is-tabs .pt-tabs__list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px; margin-bottom: 8px; border-radius: 999px; background: var(--soft); width: fit-content; max-width: 100%; }
[data-ptm-js] .pt-tabs.is-tabs .pt-tabs__list::-webkit-scrollbar { display: none; }
.pt-tab { flex: 0 0 auto; height: 44px; padding: 0 20px; border-radius: 999px; font: 600 14px/1 Poppins, sans-serif; color: var(--ink-2); white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s; }
.pt-tab:hover { color: var(--ink); }
.pt-tab[aria-selected="true"] { background: var(--pt-card); color: var(--ink); box-shadow: 0 6px 16px -10px rgba(40, 14, 48, .55); }
[data-ptm-js] .pt-tabs.is-tabs .pt-tabs__panel { border-top: 0; padding-top: 18px; animation: pt-panel .5s var(--pt-ease); }
[data-ptm-js] .pt-tabs.is-tabs .pt-tabs__panel[hidden] { display: none; }
[data-ptm-js] .pt-tabs.is-tabs .pt-tabs__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes pt-panel { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Album ---------- */
.pt-album { position: relative; overflow: hidden; isolation: isolate; padding: clamp(64px, 9vw, 130px) 0; background: linear-gradient(180deg, #1b0f25, #120a19); color: #fff; }
.pt-album__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 60% at 22% 50%, rgba(214, 90, 169, .35), transparent 70%), radial-gradient(40% 60% at 85% 30%, rgba(123, 75, 199, .35), transparent 70%); }
.pt-album__in { display: grid; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (min-width: 860px) { .pt-album__in { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } }
.pt-album__cover { position: relative; display: block; width: min(72vw, 420px); margin-inline: auto; aspect-ratio: 1; transform: perspective(1100px) rotateY(var(--ry, -14deg)) rotateX(var(--rx, 4deg)); transition: transform .8s var(--pt-ease); }
.pt-album__cover img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .12); }
.pt-album__disc { position: absolute; inset: 4%; left: 34%; border-radius: 50%; background: repeating-radial-gradient(circle, #1a1a1f 0 2px, #26262d 2px 4px), conic-gradient(from 20deg, #3b3b46, #f29bd2, #7b4bc7, #f5c451, #3b3b46); background-blend-mode: overlay; box-shadow: 0 20px 40px -20px #000; transform: translateX(var(--disc, 14%)) rotate(var(--spin, 0deg)); }
.pt-album__disc::after { content: ""; position: absolute; inset: 41%; border-radius: 50%; background: #120a19; box-shadow: 0 0 0 10px rgba(255, 255, 255, .12); }
.pt-album .pt-h2 { color: #fff; }
.pt-album .pt-h2 em { background-image: linear-gradient(90deg, #ff8fd2, #d65aa9 40%, #a57bff); }
.pt-album__copy p { color: rgba(255, 255, 255, .78); max-width: 34em; }
.pt-album__price { font: 700 28px/1.1 Poppins, sans-serif; color: #fff !important; margin: 18px 0 22px; }
.pt-album__price small { display: block; margin-top: 6px; font: 400 13px/1.3 Poppins, sans-serif; color: rgba(255, 255, 255, .66); }
.ptm-btn { text-decoration: none; }

/* ---------- Formulare, Warenkorb, Kasse, Rechtliches ---------- */
.field { align-content: start; }
.field-row--street { display: grid; gap: 16px 14px; grid-template-columns: minmax(0, 1fr) minmax(88px, 132px); grid-column: 1 / -1; align-items: start; }
.field input:focus, .field textarea:focus, .field select:focus, input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--pt-lila); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pt-lila) 22%, transparent); outline: 0; }
.co-num, .co-steps .is-on { background: var(--pt-grad); color: #fff; }
.legal, .is-legal .prose { max-width: 78ch; }
.is-legal h1 { font: 700 clamp(30px, 4vw, 46px)/1.1 Poppins, sans-serif; }
.is-legal h2 { font: 700 clamp(20px, 2.2vw, 26px)/1.2 Poppins, sans-serif; margin-top: 1.8em; }
.pt-contact { display: grid; gap: clamp(24px, 4vw, 56px); padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 110px); }
@media (min-width: 900px) { .pt-contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; } }
.pt-panel { padding: clamp(20px, 3vw, 34px); border-radius: 24px; background: var(--pt-card); box-shadow: 0 1px 0 var(--pt-card-line), 0 24px 50px -34px rgba(40, 14, 48, .6); }
.pt-aside { display: grid; gap: 14px; }
.pt-aside .pt-panel { padding: 22px; }
.pt-aside h2 { font: 600 16px/1.3 Poppins, sans-serif; margin: 0 0 6px; }
.pt-aside p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.pt-aside .icon { width: 22px; height: 22px; color: var(--pt-pink); margin-bottom: 10px; }

/* ==========================================================================
   Dunkelmodus (Kopfleiste: Mond/Sonne; Startwert folgt dem Gerät)
   ========================================================================== */
html[data-ptm-theme="dark"] {
	color-scheme: dark;
	--bg: #120c17; --surface: #1d1426; --soft: #191021; --soft-2: #281d33;
	--ink: #f6f1f9; --ink-2: #d9cfe0; --muted: #a99db3; --line: #2f2339; --line-2: #4a3a57;
	--accent: #f29bd2; --accent-hover: #ffb8e2; --accent-soft: #3a1c33;
	--aqua: #62d39b; --aqua-soft: #12301f; --danger: #ff8fa3; --danger-soft: #3a141c;
	--focus: #f5c451; --glass: rgba(22, 14, 30, .78);
	--pt-card: #1d1426; --pt-card-line: rgba(255, 255, 255, .08);
	--shadow: 0 10px 30px -12px rgba(0, 0, 0, .7); --shadow-lg: 0 24px 50px -18px rgba(0, 0, 0, .8);
}
html[data-ptm-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-ptm-theme="dark"] ::selection { background: #7b4bc7; color: #fff; }
html[data-ptm-theme="dark"] .pcard, html[data-ptm-theme="dark"] .usp, html[data-ptm-theme="dark"] .pt-panel { box-shadow: inset 0 0 0 1px var(--pt-card-line), 0 18px 40px -28px #000; }
html[data-ptm-theme="dark"] .pcard-media { background: var(--pt-photo); }
html[data-ptm-theme="dark"] .ptm-landing .ptm-landing__title { color: var(--ink); }
html[data-ptm-theme="dark"] .ptm-eyebrow { background-image: linear-gradient(90deg, #f29bd2, #b79bff); }
html[data-ptm-theme="dark"] .pt-h2 em { background-image: linear-gradient(90deg, #ff8fd2, #d65aa9 40%, #a57bff); }
html[data-ptm-theme="dark"] .btn--dark, html[data-ptm-theme="dark"] .chip.is-on, html[data-ptm-theme="dark"] .skip-link { background: #f6f1f9; color: #1b1420; }
html[data-ptm-theme="dark"] .btn--ghost:hover { background: var(--soft-2); }
html[data-ptm-theme="dark"] .alert--ok { color: #9fe6c1; } html[data-ptm-theme="dark"] .alert--error { color: #ffb3c0; }
html[data-ptm-theme="dark"] .toast, html[data-ptm-theme="dark"] .drawer-sheet { background: #1d1426; }
html[data-ptm-theme="dark"] .pt-pill small { background: var(--soft-2); }
html[data-ptm-theme="dark"] .pt-gallery__dots i { background: rgba(27, 20, 32, .35); }
html[data-ptm-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d9cfe0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
/* PayPal-Schaltflächen und das amtliche Gewährleistungsblatt brauchen eine helle Fläche */
html[data-ptm-theme="dark"] [data-paypal-buttons], html[data-ptm-theme="dark"] .pp-box, html[data-ptm-theme="dark"] #paypal-buttons { background: #fff; border-radius: 16px; padding: 12px; color: #1b1420; }

/* ==========================================================================
   Bewegung – nur ohne „Bewegung reduzieren“
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* Hero: Text baut sich gestaffelt auf, Karten fächern sich auf */
	[data-ptm-js] .pt-in { animation: pt-in .9s var(--pt-ease) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
	@keyframes pt-in { from { opacity: 0; translate: 0 26px; filter: blur(6px); } }
	[data-ptm-js] .ptmk-card { opacity: 0; scale: .86; translate: 0 40px; transition: opacity .7s var(--pt-ease), scale .9s var(--pt-ease), translate .9s var(--pt-ease), transform .35s var(--pt-ease); }
	[data-ptm-js] .ptmk-stack.is-in .ptmk-card { opacity: 1; scale: 1; translate: none; }
	[data-ptm-js] .ptmk-stack.is-in .ptmk-card:nth-child(1) { transition-delay: .25s, .25s, .25s, 0s; }
	[data-ptm-js] .ptmk-stack.is-in .ptmk-card:nth-child(2) { transition-delay: .1s, .1s, .1s, 0s; }
	[data-ptm-js] .ptmk-stack.is-in .ptmk-card:nth-child(3) { transition-delay: .4s, .4s, .4s, 0s; }
	.ptmk-stack.is-swap .ptmk-card { opacity: 0 !important; scale: .9 !important; transition-delay: 0s !important; transition-duration: .35s !important; }
	.ptmk-card:hover { animation-play-state: paused; scale: 1.05; }

	/* Bilder: zoomen beim Hereinscrollen zurück und öffnen sich aus einem Ausschnitt */
	@supports (animation-timeline: view()) {
		.pt-clip > img { animation: pt-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
		.pt-gallery__slide.pt-clip { animation: pt-unclip linear both; animation-timeline: view(); animation-range: entry 5% cover 32%; }
		.ptmk-hero__bg { animation: pt-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
		.pt-stage__bg { animation: pt-drift-s linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
		.ptmk-hero__inner, .ptmk-hero .ptmk-cats { animation: pt-sink linear both; animation-timeline: scroll(root); animation-range: 10vh 90vh; }
		.pt-album__cover { animation: pt-turn linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
		.pt-album__disc { animation: pt-disc linear both; animation-timeline: view(); animation-range: entry 20% exit 40%; }
		.ptmf__stage::after { animation: pt-orb linear both; animation-timeline: view(); }
	}
	@keyframes pt-zoom { from { scale: 1.22; } to { scale: 1; } }
	@keyframes pt-unclip { from { clip-path: inset(10% 7% 0 7% round 22px); } to { clip-path: inset(0 0 0 0 round 22px); } }
	@keyframes pt-drift { to { transform: scale(1.16) translateY(9%); } }
	@keyframes pt-drift-s { to { transform: translateY(12%); } }
	@keyframes pt-sink { to { opacity: .25; translate: 0 -34px; } }
	@keyframes pt-turn { from { --ry: -34deg; --rx: 10deg; opacity: .4; } to { --ry: -10deg; --rx: 3deg; opacity: 1; } }
	@keyframes pt-disc { from { --disc: -6%; --spin: -120deg; } to { --disc: 26%; --spin: 200deg; } }
	@keyframes pt-orb { from { translate: 60px -40px; } to { translate: -120px 60px; } }

	/* Übergang zwischen Seiten: das angeklickte Produktbild wandert auf die Produktseite */
	@view-transition { navigation: auto; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--pt-ease); }
	::view-transition-group(pt-product) { animation-duration: .55s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
	::view-transition-old(pt-product), ::view-transition-new(pt-product) { height: 100%; object-fit: cover; overflow: clip; }
	.pt-vt-target { view-transition-name: pt-product; }
	.ptmk-header { view-transition-name: pt-header; }
	::view-transition-group(pt-header) { z-index: 10; }
}
@property --ry { syntax: "<angle>"; inherits: true; initial-value: -14deg; }
@property --rx { syntax: "<angle>"; inherits: true; initial-value: 4deg; }
@property --disc { syntax: "<percentage>"; inherits: true; initial-value: 14%; }
@property --spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

@media (prefers-reduced-motion: reduce) {
	[data-ptm-js] [data-ptm-reveal] { opacity: 1; translate: none; transition: none; animation: none; }
	.ptm-cat__sparkles, .ptmk-metall::before { animation: none; }
	.pcard, .pcard-img, .pt-pill, .ptm-btn, .btn { transition: none; }
}

/* Verweise in Kopf, Hero, Kacheln und Fuß ohne Unterstreichung (site.css unterstreicht Textlinks) */
.ptmk-header a, .ptmk-hero a, .ptmk-cats a, .ptmf a, .pt-catnav a, .pcard a, .ptm-cat a { text-decoration: none; }
.ptmf__note a { text-decoration: underline; }
.product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 690px) { .ptm-cat__name { font-size: 16px; hyphens: auto; overflow-wrap: anywhere; } .ptm-cat__body { padding: 14px; } }
.pt-product { grid-template-columns: minmax(0, 1fr); }
.pt-product > * { min-width: 0; }
@media (min-width: 960px) { .pt-product { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }
/* Widerrufsbutton (§ 356a BGB): als gut sichtbarer Knopf, nicht als Textlink */
.ptmf .ptmf__withdraw{margin-top:22px;height:42px;padding:0 20px;font-size:14px;border-color:rgba(255,255,255,.4)}
.ptmf .ptmf__withdraw:hover{background:rgba(214,90,169,.18);border-color:rgba(214,90,169,.75)}