/**
 * 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-on.admin-bar { --ptmk-wp: 32px; }
@media (max-width: 782px) { .ptmk-on.admin-bar { --ptmk-wp: 46px; } }
@media (max-width: 600px) { .ptmk-on.admin-bar { --ptmk-wp: 0px; } } /* dort scrollt die Adminleiste mit */

/* Salient-Kopf aus; Abstände für den schwebenden Header */
.ptmk-on #header-outer,
.ptmk-on #header-space,
.ptmk-on #search-outer { display: none !important; }
.ptmk-on #ajax-content-wrap { padding-top: var(--ptmk-offset); }
.ptmk-on.ptm-shop-landing #ajax-content-wrap { padding-top: 0; }

/* Seiten mit Salient-Seitenkopf (z. B. Kategorien): Kopfbild reicht unter den Header */
.ptmk-on #ajax-content-wrap:has(> #page-header-wrap:first-child) { padding-top: 0; }
.ptmk-on #page-header-wrap,
.ptmk-on #page-header-bg { height: auto !important; }
.ptmk-on #page-header-bg { padding: calc(var(--ptmk-offset) + 8px) 0 44px !important; min-height: 0 !important; }
.ptmk-on #page-header-bg .container,
.ptmk-on #page-header-bg .row,
.ptmk-on #page-header-bg .span_6 { position: relative !important; top: auto !important; transform: none !important; height: auto !important; }
.ptmk-on #page-header-bg::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(18,10,23,.55), rgba(18,10,23,.15) 50%, rgba(18,10,23,.6));
}
.ptmk-on #page-header-bg .page-header-bg-image-wrap { z-index: 0 !important; }
.ptmk-on #page-header-bg .container { z-index: 2 !important; }

.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(.ptm-shop-landing):not(:has(#page-header-bg)) .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 small { color: rgba(255,255,255,.62); font-size: 13px; }

/* ---------- 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; }

/* 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; }
}

/* ---------- 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 38px 0 12px; justify-content: flex-start; 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; }

	.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; }
}