/* ==========================================================================
   BLACKY 3D CAN — Cinematic Energy-Drink Landing Page
   ========================================================================== */

:root {
	--blacky-bg: #0a0a0a;
	--blacky-bg-deep: #050505;
	--blacky-accent: #c0c0c0;
	--blacky-accent-soft: rgba(192, 192, 192, 0.6);
	--blacky-bolt: #c8c8d0;            /* lightning yellow */
	--blacky-bolt-glow: #ffd84d;
	--blacky-energy: #6a39ff;          /* energy purple */
	--blacky-text: #f5f5f5;
	--blacky-text-muted: rgba(245, 245, 245, 0.55);
	--blacky-line: rgba(255, 255, 255, 0.08);
	--blacky-headline-font: "Bebas Neue", "Oswald", "Impact", sans-serif;
	--blacky-body-font: "Outfit", "Inter", "Helvetica Neue", sans-serif;
}

.blacky-3d-app,
.blacky-3d-app *,
.blacky-3d-app *::before,
.blacky-3d-app *::after {
	box-sizing: border-box;
}

body:has(.blacky-3d-app) {
	margin: 0;
	background: var(--blacky-bg);
	color: var(--blacky-text);
	overflow-x: hidden;
	font-family: var(--blacky-body-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.blacky-3d-app {
	position: relative;
	width: 100%;
	background: var(--blacky-bg);
	color: var(--blacky-text);
	font-family: var(--blacky-body-font);
	line-height: 1.5;
	overflow: hidden;
}

/* Grain overlay (very subtle) */
.blacky-3d-app::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: 0.045;
	z-index: 100;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
}

.blacky-3d-app::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
}

/* ==========================================================================
   SECTION BACKGROUND TINT LAYER (between sections, SPYLT-style hard switches)
   ========================================================================== */
.blacky-bg-tint {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: var(--blacky-bg);
	transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}
.blacky-bg-tint::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.04) 0%, transparent 60%);
}

/* ==========================================================================
   LOADING SCREEN
   ========================================================================== */
.blacky-loader {
	position: fixed;
	inset: 0;
	background: var(--blacky-bg-deep);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.8s ease, visibility 0.8s ease;
}
.blacky-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.blacky-loader__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.blacky-loader__logo {
	font-family: var(--blacky-headline-font);
	font-size: 64px;
	letter-spacing: 0.3em;
	color: var(--blacky-text);
	animation: blackyPulse 2s ease-in-out infinite;
}
@keyframes blackyPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.blacky-loader__bar    { width: 240px; height: 1px; background: rgba(255,255,255,0.1); overflow: hidden; }
.blacky-loader__fill   { width: 0%; height: 100%; background: var(--blacky-bolt); transition: width 0.2s ease-out; box-shadow: 0 0 12px var(--blacky-bolt-glow); }
.blacky-loader__percent { font-size: 11px; letter-spacing: 0.4em; color: var(--blacky-text-muted); font-feature-settings: "tnum"; }

/* ==========================================================================
   TOP PROGRESS BAR
   ========================================================================== */
.blacky-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.04); z-index: 200; }
.blacky-progress__fill {
	width: 0%; height: 100%;
	background: linear-gradient(90deg, var(--blacky-bolt), var(--blacky-bolt-glow));
	box-shadow: 0 0 8px var(--blacky-bolt-glow);
	transition: width 0.05s linear;
}

/* ==========================================================================
   ENERGY METER (vertical, right edge)
   ========================================================================== */
.blacky-meter {
	position: fixed;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 14px;
	pointer-events: none;
	mix-blend-mode: screen;
}
.blacky-meter__track {
	width: 3px;
	height: 220px;
	background: rgba(255,255,255,0.08);
	position: relative;
	overflow: hidden;
}
.blacky-meter__fill {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0%;
	background: linear-gradient(0deg, var(--blacky-bolt) 0%, var(--blacky-bolt-glow) 50%, #ffffff 100%);
	box-shadow: 0 0 16px var(--blacky-bolt-glow), 0 0 32px var(--blacky-bolt);
	transition: height 0.08s linear;
}
.blacky-meter__label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 9px;
	letter-spacing: 0.5em;
	color: var(--blacky-text-muted);
	text-transform: uppercase;
}
@media (max-width: 900px) { .blacky-meter { display: none; } }

/* ==========================================================================
   3D CANVAS + PARTICLES + SPARKS
   ========================================================================== */
.blacky-canvas-wrap {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;                          /* startet unsichtbar — wird per IntersectionObserver eingeblendet */
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.blacky-canvas-wrap.is-active { opacity: 1; }
#blacky-canvas    { display: block; width: 100%; height: 100%; }
.blacky-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.blacky-sparks { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.blacky-spark {
	position: absolute;
	width: 4px; height: 4px;
	background: var(--blacky-bolt-glow);
	border-radius: 50%;
	box-shadow: 0 0 8px var(--blacky-bolt-glow), 0 0 18px var(--blacky-bolt);
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   MEGA-TYPE (background headline behind the can in Story section)
   ========================================================================== */
.blacky-mega-type {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: screen;
	transition: opacity 0.6s ease;
}
.blacky-mega-type__word {
	font-family: var(--blacky-headline-font);
	font-size: clamp(180px, 28vw, 460px);
	letter-spacing: 0.02em;
	line-height: 0.85;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255,255,255,0.15);
	font-weight: 700;
	text-transform: uppercase;
	user-select: none;
	white-space: nowrap;
	background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

/* ==========================================================================
   SCROLL HINT
   ========================================================================== */
.blacky-scroll-hint {
	position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
	z-index: 10; font-size: 10px; letter-spacing: 0.5em;
	color: var(--blacky-text-muted);
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	transition: opacity 0.5s ease;
}
.blacky-scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
.blacky-scroll-hint__line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--blacky-accent-soft), transparent); position: relative; overflow: hidden; }
.blacky-scroll-hint__line::after { content: ""; position: absolute; top: -40px; left: 0; width: 100%; height: 40px; background: linear-gradient(to bottom, transparent, var(--blacky-bolt-glow)); animation: blackyScrollLine 2s ease-in-out infinite; }
@keyframes blackyScrollLine { 0% { transform: translateY(0); } 100% { transform: translateY(80px); } }

/* ==========================================================================
   SECTIONS LAYOUT
   ========================================================================== */
.blacky-sections { position: relative; z-index: 3; width: 100%; }
.blacky-section {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 80px 6vw;
}
.blacky-section__inner {
	width: 100%; max-width: 580px;
	display: flex; flex-direction: column; gap: 28px;
	position: relative; z-index: 4;
}
.blacky-section__inner--left  { margin-right: auto; }
.blacky-section__inner--right { margin-left: auto; }
.blacky-section__inner--center { margin: 0 auto; text-align: center; align-items: center; max-width: 720px; }
.blacky-section__inner--split { max-width: 100%; flex-direction: row; align-items: center; gap: 6vw; }
.blacky-hero-text { max-width: 580px; display: flex; flex-direction: column; gap: 28px; }

/* ==========================================================================
   MARQUEE TICKER
   ========================================================================== */
.blacky-marquee {
	position: relative;
	z-index: 3;
	overflow: hidden;
	padding: 24px 0;
	border-top: 1px solid var(--blacky-line);
	border-bottom: 1px solid var(--blacky-line);
	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.blacky-marquee__track {
	display: inline-flex;
	white-space: nowrap;
	gap: 32px;
	align-items: center;
	animation: blackyMarquee 38s linear infinite;
	will-change: transform;
}
.blacky-marquee--reverse .blacky-marquee__track { animation-direction: reverse; }
@keyframes blackyMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.blacky-marquee__item {
	font-family: var(--blacky-headline-font);
	font-size: clamp(22px, 2.5vw, 40px);
	letter-spacing: 0.06em;
	color: var(--blacky-text);
	text-transform: uppercase;
}
.blacky-marquee__sep {
	color: var(--blacky-bolt-glow);
	font-size: clamp(20px, 2vw, 32px);
	text-shadow: 0 0 12px var(--blacky-bolt);
	flex-shrink: 0;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.blacky-eyebrow {
	font-size: 11px;
	letter-spacing: 0.45em;
	color: var(--blacky-bolt-glow);
	font-weight: 500;
	text-transform: uppercase;
	display: flex; align-items: center; gap: 8px;
}

.blacky-bolt {
	display: inline-block;
	color: var(--blacky-bolt-glow);
	text-shadow: 0 0 8px var(--blacky-bolt), 0 0 16px var(--blacky-bolt);
	animation: blackyBoltPulse 2.4s ease-in-out infinite;
}
@keyframes blackyBoltPulse {
	0%, 100% { opacity: 1; text-shadow: 0 0 8px var(--blacky-bolt), 0 0 16px var(--blacky-bolt); }
	50%      { opacity: 0.75; text-shadow: 0 0 4px var(--blacky-bolt); }
}

.blacky-headline {
	font-family: var(--blacky-headline-font);
	font-size: clamp(56px, 10vw, 148px);
	line-height: 0.92;
	letter-spacing: 0.01em;
	color: var(--blacky-text);
	margin: 0; font-weight: 700; text-transform: uppercase;
}
.blacky-headline--md { font-size: clamp(44px, 7vw, 96px); }
.blacky-headline--xl { font-size: clamp(64px, 12vw, 180px); }
.blacky-headline__line { display: block; overflow: hidden; }
.blacky-headline__line--accent,
.blacky-headline__accent-line {
	background: linear-gradient(180deg, #ffffff 0%, var(--blacky-bolt-glow) 50%, var(--blacky-bolt) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 24px rgba(200, 200, 215, 0.18));
}

.blacky-subline {
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.55;
	color: var(--blacky-text-muted);
	margin: 0; max-width: 480px; font-weight: 300;
}
.blacky-subline--muted  { color: rgba(245,245,245,0.4); font-size: 14px; }
.blacky-subline--center { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   CTAs
   ========================================================================== */
.blacky-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.blacky-cta-row--center { justify-content: center; }
.blacky-cta {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 32px;
	font-family: var(--blacky-body-font);
	font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
	text-decoration: none;
	border-radius: 0;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative; overflow: hidden;
	border: 1px solid transparent;
}
.blacky-cta--primary { background: var(--blacky-text); color: var(--blacky-bg); }
.blacky-cta--primary:hover { background: var(--blacky-bolt-glow); color: var(--blacky-bg); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(200, 200, 215, 0.28); }
.blacky-cta--ghost { background: transparent; color: var(--blacky-text); border-color: var(--blacky-line); }
.blacky-cta--ghost:hover { border-color: var(--blacky-bolt-glow); color: var(--blacky-bolt-glow); transform: translateY(-2px); }

/* ==========================================================================
   STICKER BADGES (Energy Section)
   ========================================================================== */
.blacky-stickers {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	opacity: 0;            /* faded in by scroll */
	transition: opacity 0.5s ease;
}
.blacky-section--energy.is-active .blacky-stickers { opacity: 1; }

.blacky-sticker {
	position: absolute;
	width: 120px; height: 120px;
	border-radius: 50%;
	background: var(--blacky-bolt-glow);
	color: #0a0a0a;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: var(--blacky-headline-font);
	text-align: center;
	letter-spacing: 0.05em;
	box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(200, 200, 215, 0.4);
	clip-path: polygon(
		50% 0%, 60% 8%, 70% 4%, 78% 14%, 88% 12%,
		92% 22%, 100% 30%, 96% 40%, 100% 50%, 96% 60%,
		100% 70%, 92% 78%, 88% 88%, 78% 86%, 70% 96%,
		60% 92%, 50% 100%, 40% 92%, 30% 96%, 22% 86%,
		12% 88%, 8% 78%, 0% 70%, 4% 60%, 0% 50%,
		4% 40%, 0% 30%, 8% 22%, 12% 12%, 22% 14%,
		30% 4%, 40% 8%
	);
	animation: blackyStickerFloat 6s ease-in-out infinite;
}
.blacky-sticker b { font-size: 26px; font-weight: 700; line-height: 1; }
.blacky-sticker span { font-size: 9px; font-weight: 500; letter-spacing: 0.2em; margin-top: 4px; opacity: 0.7; }

.blacky-sticker--1 { top: 12%;  left: 8%;  transform: rotate(-12deg); animation-delay: 0s;   }
.blacky-sticker--2 { top: 18%;  right: 12%; transform: rotate(15deg);  animation-delay: -1.5s; }
.blacky-sticker--3 { bottom: 22%; left: 14%; transform: rotate(8deg);   animation-delay: -3s;   width: 100px; height: 100px; }
.blacky-sticker--4 { bottom: 14%; right: 8%; transform: rotate(-20deg); animation-delay: -2s;   background: #fff; color: #0a0a0a; }
.blacky-sticker--5 { top: 48%;  left: 4%;  transform: rotate(-5deg);  animation-delay: -4s;   width: 90px; height: 90px; background: #fff; color: #0a0a0a; }

@keyframes blackyStickerFloat {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -12px; }
}

@media (max-width: 900px) {
	.blacky-stickers { display: none; }
}

/* ==========================================================================
   BIG STATS (Nutrition section count-up)
   ========================================================================== */
.blacky-bigstats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	padding: 12px 0 8px;
}
.blacky-bigstat__value {
	font-family: var(--blacky-headline-font);
	font-size: clamp(56px, 6vw, 96px);
	line-height: 1;
	color: var(--blacky-text);
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.blacky-bigstat__value em {
	font-style: normal;
	font-size: 0.32em;
	letter-spacing: 0.2em;
	color: var(--blacky-bolt-glow);
	text-transform: uppercase;
	margin-left: 4px;
}
.blacky-count { font-feature-settings: "tnum"; }
.blacky-bigstat__label {
	font-size: 11px;
	letter-spacing: 0.3em;
	color: var(--blacky-text-muted);
	text-transform: uppercase;
	margin-top: 8px;
	display: flex; align-items: center; gap: 6px;
}

/* ==========================================================================
   NUTRITION TABLE
   ========================================================================== */
.blacky-nutrition { display: flex; flex-direction: column; padding-top: 16px; max-width: 480px; }
.blacky-nutrition__row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--blacky-line); font-size: 14px; }
.blacky-nutrition__row--sub { padding-left: 16px; font-size: 13px; color: var(--blacky-text-muted); }
.blacky-nutrition__row span { color: var(--blacky-text-muted); }
.blacky-nutrition__row b    { color: var(--blacky-text); font-weight: 500; font-feature-settings: "tnum"; }

.blacky-meta-row { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 8px; }
.blacky-meta { font-size: 13px; color: var(--blacky-text); font-feature-settings: "tnum"; }
.blacky-meta span { display: block; font-size: 10px; letter-spacing: 0.35em; color: var(--blacky-bolt-glow); margin-bottom: 4px; }

.blacky-footer-note { margin-top: 32px; font-size: 11px; color: rgba(245,245,245,0.3); letter-spacing: 0.05em; max-width: 560px; }

/* ==========================================================================
   CTA SECTION — Pulse Glow around the can
   ========================================================================== */
.blacky-section--cta {
	position: relative;
}
.blacky-section--cta::before {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 60vmin; height: 60vmin;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200, 200, 215, 0.22) 0%, rgba(200, 200, 215, 0.06) 35%, transparent 70%);
	z-index: 1;
	animation: blackyCtaPulse 3.6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes blackyCtaPulse {
	0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.6; }
	50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1;   }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
	.blacky-section { min-height: auto; padding: 100px 6vw 60px; text-align: left; }
	.blacky-section__inner,
	.blacky-section__inner--left,
	.blacky-section__inner--right { margin: 0; max-width: 100%; }
	.blacky-section__inner--center { text-align: center; }
	.blacky-section__inner--split { flex-direction: column; align-items: flex-start; }
	.blacky-canvas-wrap { opacity: 0.35; }
	.blacky-headline       { font-size: clamp(48px, 13vw, 96px); }
	.blacky-headline--md   { font-size: clamp(40px, 10vw, 72px); }
	.blacky-headline--xl   { font-size: clamp(56px, 16vw, 120px); }
	.blacky-mega-type__word { font-size: clamp(120px, 38vw, 280px); }
	.blacky-marquee__item   { font-size: 20px; }
}

/* ==========================================================================
   FORMS — Order, Wholesale, Contact
   ========================================================================== */
.blacky-section__inner--wide { max-width: 920px; }

.blacky-form {
	width: 100%;
	max-width: 720px;
	margin: 32px auto 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
}
.blacky-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.blacky-form__field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.blacky-form__field--full { grid-column: 1 / -1; }
.blacky-form__field > span {
	font-size: 10px;
	letter-spacing: 0.3em;
	color: var(--blacky-text-muted);
	text-transform: uppercase;
	font-weight: 500;
}
.blacky-form__field input,
.blacky-form__field select,
.blacky-form__field textarea {
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--blacky-line);
	color: var(--blacky-text);
	padding: 14px 16px;
	font: inherit;
	font-size: 14px;
	font-family: var(--blacky-body-font);
	border-radius: 2px;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.blacky-form__field input:focus,
.blacky-form__field select:focus,
.blacky-form__field textarea:focus {
	outline: none;
	border-color: var(--blacky-bolt-glow);
	background: rgba(255,255,255,0.06);
}
.blacky-form__field textarea { resize: vertical; min-height: 80px; font-family: var(--blacky-body-font); }
.blacky-form__submit-row {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 8px;
}
/* ============================================================
   FORM STATUS MESSAGE (Success/Error)
   Geteilt von Kontakt-Widget + Produkt-Anfrage + Order + Wholesale.
   Idle = unsichtbar. Erst beim Status-Wechsel als Box mit Icon
   + sanfter Slide-In-Animation. Bewusst gross genug, damit der
   User nicht uebersieht "Mail ist raus".
   ============================================================ */
.blacky-form__msg {
	font-size: 13px;
	color: var(--blacky-text-muted);
	min-height: 0;
	flex: 1;
}
.blacky-form__msg.is-success,
.blacky-form__msg.is-error {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 18px;
	padding: 16px 20px 16px 18px;
	border-radius: 14px;
	border: 1.5px solid currentColor;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	min-height: 0;
	position: relative;
	overflow: hidden;
	animation: blacky-msg-in .42s cubic-bezier(.22,.9,.3,1.05) both;
}
.blacky-form__msg.is-success::before,
.blacky-form__msg.is-error::before {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: currentColor;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 15px;
	line-height: 1;
	margin-top: -1px;
}
.blacky-form__msg.is-success {
	color: #4ad987;
	background: rgba(74, 217, 135, .10);
}
.blacky-form__msg.is-success::before {
	content: "\2713"; /* ✓ */
	color: #06160d;
}
.blacky-form__msg.is-error {
	color: #ff7575;
	background: rgba(255, 95, 95, .10);
}
.blacky-form__msg.is-error::before {
	content: "!";
	color: #1a0606;
}
@keyframes blacky-msg-in {
	from { opacity: 0; transform: translateY(-8px) scale(.985); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* Sende-Button wirkt "live" waehrend der Submission */
.blacky-btn.is-sending,
button.is-sending {
	opacity: .72;
	cursor: progress;
}
.blacky-form__note {
	font-size: 11px;
	color: rgba(245,245,245,0.4);
	letter-spacing: 0.02em;
	line-height: 1.55;
	max-width: 580px;
	margin: 0;
}

/* PACK SELECTOR (Order widget) */
.blacky-packs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 8px;
}
.blacky-pack {
	background: rgba(255,255,255,0.03);
	border: 2px solid var(--blacky-line);
	color: var(--blacky-text);
	padding: 22px 18px;
	cursor: pointer;
	font: inherit;
	font-family: var(--blacky-headline-font);
	text-align: left;
	border-radius: 4px;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow: hidden;
}
.blacky-pack:hover {
	border-color: var(--blacky-accent-soft);
	background: rgba(255,255,255,0.05);
	transform: translateY(-2px);
}
.blacky-pack.is-selected {
	border-color: var(--blacky-bolt-glow);
	background: rgba(200, 200, 215, 0.08);
	box-shadow: 0 0 0 1px var(--blacky-bolt-glow), 0 8px 24px rgba(200, 200, 215, 0.15);
}
.blacky-pack.is-selected::before {
	content: "✓";
	position: absolute;
	top: 10px; right: 12px;
	color: var(--blacky-bolt-glow);
	font-family: var(--blacky-body-font);
	font-size: 16px;
	font-weight: 700;
}
.blacky-pack__qty {
	font-size: 48px;
	line-height: 1;
	color: var(--blacky-text);
	letter-spacing: 0.02em;
}
.blacky-pack__unit {
	font-size: 10px;
	letter-spacing: 0.3em;
	color: var(--blacky-text-muted);
	text-transform: uppercase;
	font-family: var(--blacky-body-font);
}
.blacky-pack__badge {
	position: absolute;
	top: -1px; left: -1px;
	background: var(--blacky-bolt-glow);
	color: #0a0a0a;
	font-family: var(--blacky-body-font);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
	padding: 4px 10px;
	border-radius: 0 0 4px 0;
}

/* USP LIST (Wholesale widget) */
.blacky-usp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.blacky-usp-list li { font-size: 14px; color: var(--blacky-text); display: flex; gap: 10px; align-items: center; }

/* LOCATOR */
.blacky-locator { margin-top: 32px; }
.blacky-locator__filters {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.blacky-locator__search {
	flex: 1;
	min-width: 280px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--blacky-line);
	color: var(--blacky-text);
	padding: 14px 18px;
	font: inherit;
	font-family: var(--blacky-body-font);
	border-radius: 2px;
}
.blacky-locator__search:focus { outline: none; border-color: var(--blacky-bolt-glow); }
.blacky-locator__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.blacky-locator__chip {
	background: transparent;
	border: 1px solid var(--blacky-line);
	color: var(--blacky-text-muted);
	padding: 10px 18px;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	font-family: var(--blacky-body-font);
	border-radius: 24px;
	transition: all 0.2s ease;
}
.blacky-locator__chip:hover { border-color: var(--blacky-accent-soft); color: var(--blacky-text); }
.blacky-locator__chip.is-active {
	border-color: var(--blacky-bolt-glow);
	background: var(--blacky-bolt-glow);
	color: #0a0a0a;
	font-weight: 600;
}
.blacky-locator__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.blacky-locator__item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 16px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--blacky-line);
}
.blacky-locator__item:last-child { border-bottom: none; }
.blacky-locator__item-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.blacky-locator__name { font-family: var(--blacky-headline-font); font-size: 22px; color: var(--blacky-text); letter-spacing: 0.02em; }
.blacky-locator__addr { font-size: 13px; color: var(--blacky-text-muted); }
.blacky-locator__cat {
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--blacky-bolt-glow);
	padding: 6px 12px;
	border: 1px solid var(--blacky-line);
	border-radius: 24px;
}
.blacky-locator__link {
	font-size: 12px;
	color: var(--blacky-bolt-glow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid var(--blacky-line);
	border-radius: 2px;
	transition: all 0.2s ease;
}
.blacky-locator__link:hover { background: var(--blacky-bolt-glow); color: #0a0a0a; border-color: var(--blacky-bolt-glow); }
.blacky-locator__empty {
	text-align: center;
	color: var(--blacky-text-muted);
	font-size: 14px;
	padding: 32px;
}
.blacky-locator__cta {
	margin-top: 32px;
	padding: 24px;
	background: rgba(255,255,255,0.03);
	border-radius: 4px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.blacky-locator__cta span { font-size: 14px; color: var(--blacky-text); }

@media (max-width: 900px) {
	.blacky-form__grid          { grid-template-columns: 1fr; }
	.blacky-locator__item       { grid-template-columns: 1fr; }
	.blacky-locator__cat, .blacky-locator__link { justify-self: start; }
	.blacky-section__inner--wide { max-width: 100%; }
}

/* ==========================================================================
   SLOSH-HERO v2 (Text-Block links, Dose rechts, Sticker top-right)
   ========================================================================== */
.blacky-slosh--v2 {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: 4vw;
	padding: 100px 6vw 80px;
	font-family: var(--blacky-body-font);
	box-sizing: border-box;
}
.blacky-slosh--v2 *, .blacky-slosh--v2 *::before, .blacky-slosh--v2 *::after { box-sizing: border-box; }

.blacky-slosh__text-block {
	display: flex; flex-direction: column; gap: 28px;
	max-width: 640px;
	z-index: 3; position: relative;
}
.blacky-slosh__eyebrow {
	font-size: 11px;
	letter-spacing: 0.4em;
	color: var(--blacky-bolt-glow);
	text-transform: uppercase;
	font-weight: 500;
	display: inline-flex; align-items: center; gap: 8px;
}
.blacky-slosh__headline {
	font-family: var(--blacky-headline-font);
	font-size: clamp(64px, 9vw, 168px);
	line-height: 0.92;
	letter-spacing: 0.005em;
	color: var(--blacky-text);
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
}
.blacky-slosh__headline-line { display: block; }
.blacky-slosh__headline-line.is-accent {
	background: linear-gradient(180deg, #ffffff 0%, var(--blacky-bolt-glow) 60%, var(--blacky-bolt) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 24px rgba(200, 200, 215, 0.2));
}
.blacky-slosh__subline {
	font-size: clamp(15px, 1.3vw, 18px);
	color: var(--blacky-text-muted);
	max-width: 480px;
	margin: 0;
	line-height: 1.55;
}
.blacky-slosh__cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.blacky-slosh--v2 .blacky-slosh__can-wrap {
	width: 100%;
	height: clamp(500px, 75vh, 820px);
	position: relative;
	z-index: 2;
}
.blacky-slosh--v2 .blacky-slosh__can-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

/* v2 spezifische Sticker-Positionierung */
.blacky-slosh--v2 .blacky-slosh__sticker {
	width: 140px; height: 140px;
	top: 8%; right: 5%;
}
.blacky-slosh--v2 .blacky-slosh__sticker-center { font-size: 19px; }

@media (max-width: 900px) {
	.blacky-slosh--v2 { grid-template-columns: 1fr; padding: 80px 5vw 60px; gap: 24px; }
	.blacky-slosh--v2 .blacky-slosh__can-wrap { height: 70vw; min-height: 380px; }
	.blacky-slosh--v2 .blacky-slosh__sticker { width: 90px; height: 90px; top: 50px; right: 16px; }
	.blacky-slosh--v2 .blacky-slosh__sticker-center { font-size: 13px; }
}

/* ==========================================================================
   SLOSH-STYLE HERO v1 (Legacy split-mega-type — bleibt für Kompatibilität)
   ========================================================================== */
.blacky-slosh:not(.blacky-slosh--v2) {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	justify-items: center;
	padding: 80px 4vw;
	font-family: var(--blacky-body-font);
	box-sizing: border-box;
}
.blacky-slosh *,
.blacky-slosh *::before,
.blacky-slosh *::after { box-sizing: border-box; }

/* Top Marquee Bar */
.blacky-slosh__bar {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 32px;
	overflow: hidden;
	display: flex; align-items: center;
	z-index: 4;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
}
.blacky-slosh__bar-track {
	display: inline-flex;
	white-space: nowrap;
	gap: 24px;
	align-items: center;
	animation: blackySloshMarquee 50s linear infinite;
	padding: 0 12px;
}
.blacky-slosh__bar-track span { flex-shrink: 0; }
.blacky-slosh__bar-sep { opacity: 0.6; }
@keyframes blackySloshMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Corner Sparkles */
.blacky-slosh__sparkle {
	position: absolute;
	font-size: 28px;
	z-index: 5;
	pointer-events: none;
	animation: blackySloshSparkle 3s ease-in-out infinite;
}
.blacky-slosh__sparkle--tl { top: 50px;  left: 24px; }
.blacky-slosh__sparkle--tr { top: 50px;  right: 24px; animation-delay: -0.8s; }
.blacky-slosh__sparkle--bl { bottom: 24px; left: 24px; animation-delay: -1.5s; }
.blacky-slosh__sparkle--br { bottom: 24px; right: 24px; animation-delay: -2.2s; }
@keyframes blackySloshSparkle {
	0%, 100% { transform: scale(1) rotate(0); opacity: 0.7; }
	50%      { transform: scale(1.3) rotate(180deg); opacity: 1; }
}

/* Round Sticker top-right */
.blacky-slosh__sticker {
	position: absolute;
	top: 5%;
	right: 4%;
	width: 160px; height: 160px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	z-index: 6;
	clip-path: polygon(
		50% 0%, 60% 8%, 70% 4%, 78% 14%, 88% 12%,
		92% 22%, 100% 30%, 96% 40%, 100% 50%, 96% 60%,
		100% 70%, 92% 78%, 88% 88%, 78% 86%, 70% 96%,
		60% 92%, 50% 100%, 40% 92%, 30% 96%, 22% 86%,
		12% 88%, 8% 78%, 0% 70%, 4% 60%, 0% 50%,
		4% 40%, 0% 30%, 8% 22%, 12% 12%, 22% 14%,
		30% 4%, 40% 8%
	);
	box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
.blacky-slosh__sticker-svg {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	animation: blackySloshStickerSpin 18s linear infinite;
}
@keyframes blackySloshStickerSpin {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}
.blacky-slosh__sticker-center {
	position: relative;
	z-index: 2;
	text-align: center;
	font-family: var(--blacky-headline-font);
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0.05em;
}

/* Mega Text */
.blacky-slosh__text {
	font-family: var(--blacky-headline-font);
	font-size: clamp(120px, 22vw, 360px);
	line-height: 0.85;
	letter-spacing: -0.02em;
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	user-select: none;
	z-index: 2;
	position: relative;
}
.blacky-slosh__text--left  { justify-self: end;   text-align: right; padding-right: 0.5em; }
.blacky-slosh__text--right { justify-self: start; text-align: left;  padding-left: 0.5em;  }

/* 3D Can Wrap */
.blacky-slosh__can-wrap {
	width: clamp(280px, 32vw, 520px);
	height: clamp(420px, 60vh, 720px);
	position: relative;
	z-index: 3;
}
.blacky-slosh__can-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

/* Doodle decorations */
.blacky-slosh__doodle {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	opacity: 0.7;
}
.blacky-slosh__doodle--swirl1 { width: 110px; bottom: 22%; left: 6%;  animation: blackySloshWobble 4s ease-in-out infinite; }
.blacky-slosh__doodle--swirl2 { width:  90px; top:    24%; right: 8%; animation: blackySloshWobble 5s ease-in-out infinite reverse; }
.blacky-slosh__doodle--bolt   { width:  40px; bottom: 32%; right: 12%; animation: blackySloshWobble 3.6s ease-in-out infinite; }
@keyframes blackySloshWobble {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50%      { transform: translateY(-8px) rotate(3deg); }
}

@media (max-width: 900px) {
	.blacky-slosh           { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 60px 4vw; }
	.blacky-slosh__text     { font-size: clamp(64px, 18vw, 140px); }
	.blacky-slosh__text--left, .blacky-slosh__text--right { justify-self: center; text-align: center; padding: 0; }
	.blacky-slosh__can-wrap { width: 80vw; height: 70vw; }
	.blacky-slosh__sticker  { width: 100px; height: 100px; top: 50px; right: 12px; }
	.blacky-slosh__sticker-center { font-size: 13px; }
}

/* ==========================================================================
   BUNTA-STYLE SECTION (inline section)
   ========================================================================== */
.blacky-bunta {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px 4vw;
	font-family: var(--blacky-body-font);
	box-sizing: border-box;
}
.blacky-bunta *,
.blacky-bunta *::before,
.blacky-bunta *::after { box-sizing: border-box; }

/* Mega-Text in background */
.blacky-bunta__mega {
	position: absolute;
	font-family: var(--blacky-headline-font);
	font-size: clamp(48px, 7vw, 120px);
	line-height: 0.95;
	letter-spacing: -0.01em;
	font-weight: 700;
	text-transform: uppercase;
	z-index: 1;
	user-select: none;
	pointer-events: none;
}
.blacky-bunta__mega--left  { left:  5vw; top: 50%; transform: translateY(-50%); text-align: right;  }
.blacky-bunta__mega--right { right: 5vw; top: 50%; transform: translateY(-50%); text-align: left;   }

/* Quote-Blöcke (kleiner Text, mid-layer) */
.blacky-bunta__quote {
	position: absolute;
	z-index: 3;
	font-size: clamp(13px, 1.2vw, 16px);
	color: var(--blacky-text-muted);
	line-height: 1.6;
	font-style: italic;
	max-width: 220px;
	padding: 16px 0;
	letter-spacing: 0.01em;
}
.blacky-bunta__quote-dash {
	display: block;
	color: var(--blacky-bolt-glow);
	margin-bottom: 10px;
	font-size: 18px;
	font-style: normal;
}
.blacky-bunta__quote--left  { left: 5vw;  bottom: 18%; text-align: left;  }
.blacky-bunta__quote--right { right: 5vw; top: 18%;    text-align: right; }
.blacky-bunta__quote--right .blacky-bunta__quote-dash { text-align: right; }

/* 3D Can center */
.blacky-bunta__can-wrap {
	width: clamp(280px, 35vw, 560px);
	height: clamp(480px, 80vh, 820px);
	position: relative;
	z-index: 2;
}
.blacky-bunta__can-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

/* Wavy Sticker Badges */
.blacky-bunta__sticker {
	position: absolute;
	width: 120px; height: 120px;
	border-radius: 50%;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	z-index: 5;
	font-family: var(--blacky-headline-font);
	text-align: center;
	letter-spacing: 0.04em;
	clip-path: polygon(
		50% 0%, 60% 8%, 70% 4%, 78% 14%, 88% 12%,
		92% 22%, 100% 30%, 96% 40%, 100% 50%, 96% 60%,
		100% 70%, 92% 78%, 88% 88%, 78% 86%, 70% 96%,
		60% 92%, 50% 100%, 40% 92%, 30% 96%, 22% 86%,
		12% 88%, 8% 78%, 0% 70%, 4% 60%, 0% 50%,
		4% 40%, 0% 30%, 8% 22%, 12% 12%, 22% 14%,
		30% 4%, 40% 8%
	);
	animation: blackyBuntaSticker 6s ease-in-out infinite;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.blacky-bunta__sticker b    { font-size: 28px; line-height: 1; }
.blacky-bunta__sticker span { font-size: 9px; letter-spacing: 0.2em; margin-top: 6px; opacity: 0.8; font-family: var(--blacky-body-font); }
.blacky-bunta__sticker--tr { top: 12%;  right: 12%; transform: rotate(15deg);  animation-delay: 0s; }
.blacky-bunta__sticker--bl { bottom: 12%; left: 12%; transform: rotate(-12deg); animation-delay: -3s; }
@keyframes blackyBuntaSticker {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -10px; }
}

@media (max-width: 900px) {
	.blacky-bunta { padding: 60px 4vw; }
	.blacky-bunta__mega  { font-size: clamp(28px, 9vw, 60px); }
	.blacky-bunta__mega--left  { left:  3vw; }
	.blacky-bunta__mega--right { right: 3vw; }
	.blacky-bunta__can-wrap    { width: 70vw; height: 90vw; }
	.blacky-bunta__sticker     { width: 90px; height: 90px; }
	.blacky-bunta__sticker b   { font-size: 20px; }
	.blacky-bunta__sticker--tr { top: 4%;   right: 4%; }
	.blacky-bunta__sticker--bl { bottom: 4%; left: 4%; }
	.blacky-bunta__quote { display: none; }
}

/* ==========================================================================
   BUNTA-HERO WIDGET (kompletter Hero-Bereich für Elementor)
   Self-contained, scoped via CSS-Variablen die im Widget-Container gesetzt sind.
   ========================================================================== */
.blacky-bh {
	position: relative;
	width: 100%;
	overflow: hidden;
	font-family: var(--blacky-body-font);
	box-sizing: border-box;
	color: var(--bh-text, #f4f1e6);
}
.blacky-bh *, .blacky-bh *::before, .blacky-bh *::after { box-sizing: border-box; }

/* Loader */
.blacky-bh__loader {
	position: absolute;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bh-bg, #0e0e10);
	transition: opacity 0.8s ease, visibility 0.8s ease;
}
.blacky-bh__loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.blacky-bh__loader-logo {
	font-family: var(--blacky-headline-font);
	font-size: clamp(48px, 7vw, 96px);
	letter-spacing: 0.02em;
	color: var(--bh-text, #f4f1e6);
	font-weight: 700;
	animation: bhLogoIntro 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes bhLogoIntro {
	0%   { opacity: 0; transform: translateY(40px) scale(0.96); }
	60%  { opacity: 1; transform: translateY(0) scale(1); }
	100% { opacity: 1; transform: translateY(-15vh) scale(0.4); }
}

/* Header */
.blacky-bh__header {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 32px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
}
.blacky-bh__nav-left {
	display: flex;
	gap: 24px;
	flex: 1; min-width: 0;
}
.blacky-bh__nav-left a {
	color: var(--bh-text, #f4f1e6);
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.2s ease;
}
.blacky-bh__nav-left a:hover { color: var(--bh-accent, #c8c8d0); }
.blacky-bh__brand {
	font-family: var(--blacky-headline-font);
	font-size: clamp(24px, 2.4vw, 36px);
	letter-spacing: 0.04em;
	color: var(--bh-text, #f4f1e6);
	font-weight: 700;
}
.blacky-bh__nav-right { flex: 1; display: flex; justify-content: flex-end; }
.blacky-bh__cta-btn {
	background: var(--bh-accent, #c8c8d0);
	color: var(--bh-accent-text, #0a0a0a);
	padding: 11px 22px;
	border-radius: 28px;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.2em;
	font-size: 11px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	white-space: nowrap;
}
.blacky-bh__cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Stage */
.blacky-bh__stage {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 100px 5vw 80px;
}

.blacky-bh__mega {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--blacky-headline-font);
	font-size: clamp(56px, 9vw, 156px);
	line-height: 0.92;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}
.blacky-bh__mega--left  { left:  4vw; text-align: right; }
.blacky-bh__mega--right { right: 4vw; text-align: left;  }

.blacky-bh__can {
	width: clamp(280px, 32vw, 480px);
	height: clamp(540px, 70vh, 760px);
	position: relative;
	z-index: 2;
}
.blacky-bh__can canvas { display: block; width: 100% !important; height: 100% !important; }

/* Sticker */
.blacky-bh__sticker {
	position: absolute;
	width: 130px; height: 130px;
	background: var(--bh-accent, #c8c8d0);
	color: var(--bh-accent-text, #0a0a0a);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 5;
	font-family: var(--blacky-headline-font);
	text-align: center;
	letter-spacing: 0.04em;
	clip-path: polygon(
		50% 0%, 60% 8%, 70% 4%, 78% 14%, 88% 12%,
		92% 22%, 100% 30%, 96% 40%, 100% 50%, 96% 60%,
		100% 70%, 92% 78%, 88% 88%, 78% 86%, 70% 96%,
		60% 92%, 50% 100%, 40% 92%, 30% 96%, 22% 86%,
		12% 88%, 8% 78%, 0% 70%, 4% 60%, 0% 50%,
		4% 40%, 0% 30%, 8% 22%, 12% 12%, 22% 14%,
		30% 4%, 40% 8%
	);
	animation: bhSticker 5s ease-in-out infinite;
	box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.blacky-bh__sticker b    { font-size: 26px; line-height: 1; }
.blacky-bh__sticker span { font-size: 9px; font-family: ui-monospace, monospace; letter-spacing: 0.2em; margin-top: 6px; opacity: 0.85; }
.blacky-bh__sticker--tr { top: 14%;   right: 16%; transform: rotate(14deg); animation-delay: 0s; }
.blacky-bh__sticker--bl { bottom: 14%; left: 16%; transform: rotate(-12deg); animation-delay: -2.5s; }
@keyframes bhSticker {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -12px; }
}

@media (max-width: 900px) {
	.blacky-bh__header     { padding: 14px 16px; }
	.blacky-bh__nav-left a { display: none; }
	.blacky-bh__brand      { font-size: 22px; }
	.blacky-bh__cta-btn    { padding: 9px 14px; font-size: 9px; }
	.blacky-bh__mega       { font-size: clamp(32px, 11vw, 64px); }
	.blacky-bh__mega--left  { left:  3vw; top: 14%; transform: none; }
	.blacky-bh__mega--right { right: 3vw; bottom: 14%; top: auto; transform: none; }
	.blacky-bh__can        { width: 60vw; height: 80vw; }
	.blacky-bh__sticker    { width: 88px; height: 88px; }
	.blacky-bh__sticker b  { font-size: 18px; }
	.blacky-bh__sticker--tr { top: 6%; right: 6%; }
	.blacky-bh__sticker--bl { bottom: 6%; left: 6%; }
}

/* ==========================================================================
   MEGA-HERO WIDGET (Charlie's-Style: Mega-Text + drehende Dose vorne)
   ========================================================================== */
.blacky-mh {
	position: relative;
	width: 100%;
	min-height: 100vh;
	background: var(--mh-bg, #0a0a0c);
	overflow: hidden;
	z-index: 0;
	isolation: isolate;  /* New stacking context — interne z-index bleiben drin */
	padding: clamp(80px, 8vh, 140px) 5vw clamp(50px, 6vh, 100px);
	display: flex;
	flex-direction: column;
	font-family: var(--blacky-body-font, 'Outfit'), sans-serif;
	color: var(--mh-subline, #a8a8b0);
}
.blacky-mh *, .blacky-mh *::before, .blacky-mh *::after { box-sizing: border-box; }

/* Subtiles Spotlight hinter der Dose — radial Akzentfarbe, hebt die Dose hervor */
.blacky-mh::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background:
		radial-gradient(ellipse 55% 50% at 50% 52%, rgba(200, 200, 215, 0.07) 0%, transparent 65%),
		radial-gradient(ellipse 80% 60% at 50% 100%, rgba(200, 200, 215, 0.04) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* Vignette an den Rändern für mehr Tiefe */
.blacky-mh::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 100%);
	pointer-events: none;
	z-index: 0;
}

.blacky-mh > * { position: relative; z-index: 1; }

.blacky-mh__eyebrow {
	position: relative;
	z-index: 5;
	color: var(--mh-accent, #c8c8d0);
	font-size: clamp(11px, 0.85vw, 13px);
	letter-spacing: 0.3em;
	font-weight: 700;
	text-transform: uppercase;
	font-family: ui-monospace, 'SF Mono', monospace;
	margin-bottom: clamp(20px, 3vh, 40px);
	transform: translateY(calc(var(--mh-scroll, 0) * -140px));
	opacity: calc(1 - var(--mh-scroll, 0) * 2);
}

.blacky-mh__sticker {
	position: absolute;
	top: 7%;
	right: 6%;
	z-index: 6;
	width: var(--mh-sticker-sz, 130px);
	height: var(--mh-sticker-sz, 130px);
	border-radius: 50%;
	background: var(--mh-accent, #c8c8d0);
	color: var(--mh-accent-text, #0a0a0c);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	transform-origin: 50% 50%;
	transform:
		translate3d(calc(var(--mh-scroll, 0) * 100px), calc(var(--mh-scroll, 0) * -220px), 0)
		rotate(calc(var(--mh-sticker-rot, 10deg) + var(--mh-scroll, 0) * 25deg))
		scale(calc(1 - var(--mh-scroll, 0) * 0.15));
	opacity: calc(1 - var(--mh-scroll, 0) * 2);
	font-weight: 800;
	box-shadow: 0 8px 32px rgba(200, 200, 215, 0.25);
}
.blacky-mh__sticker b    { font-size: clamp(20px, 1.6vw, 26px); line-height: 1; font-family: var(--blacky-headline-font, 'Bebas Neue'), sans-serif; letter-spacing: 0.04em; }
.blacky-mh__sticker span { font-size: clamp(8px, 0.65vw, 10px); letter-spacing: 0.18em; margin-top: 5px; font-family: ui-monospace, monospace; opacity: 0.85; }

.blacky-mh__stage {
	position: relative;
	flex: 1;
	min-height: 65vh;
	width: 100%;
}

.blacky-mh__text {
	position: relative;
	z-index: 1;
	font-family: 'Unbounded', var(--blacky-headline-font, 'Bebas Neue'), 'Impact', sans-serif;
	font-size: max(3rem, var(--mh-text-size, 0px), 17vw);
	line-height: 0.92;
	letter-spacing: -0.045em;
	font-weight: 900;
	text-transform: uppercase;
	text-align: center;
	user-select: none;
	pointer-events: none;
	white-space: nowrap;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	paint-order: stroke fill;
}

.blacky-mh__text--outline {
	color: transparent;
	-webkit-text-stroke: var(--mh-stroke-w, 2px) var(--mh-stroke, #222227);
	text-stroke: var(--mh-stroke-w, 2px) var(--mh-stroke, #222227);
	position: absolute;
	top: 8%;
	left: 4%;
	text-align: left;
	transform:
		translate3d(calc(var(--mh-scroll, 0) * -200px), calc(var(--mh-scroll, 0) * -340px), 0)
		rotate(calc(-4deg + var(--mh-scroll, 0) * -8deg))
		scale(calc(1 - var(--mh-scroll, 0) * 0.15));
	transform-origin: 0% 50%;
	opacity: calc(1 - var(--mh-scroll, 0) * 1.5);
}

.blacky-mh__text--fill {
	color: var(--mh-fill, #1a1a1f);
	position: absolute;
	bottom: 4%;
	right: 4%;
	text-align: right;
	transform:
		translate3d(calc(var(--mh-scroll, 0) * 200px), calc(var(--mh-scroll, 0) * -440px), 0)
		rotate(calc(3deg + var(--mh-scroll, 0) * 8deg))
		scale(calc(1 - var(--mh-scroll, 0) * 0.15));
	transform-origin: 100% 50%;
	opacity: calc(1 - var(--mh-scroll, 0) * 1.5);
}

.blacky-mh__can {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Pinned bis scroll 30%, dann krasse Exit: fliegt nach oben + skaliert + rotiert weg */
	transform:
		translate(-50%, calc(-50% + max(0, (var(--mh-scroll, 0) - 0.3)) * -400px))
		scale(calc(1 - max(0, (var(--mh-scroll, 0) - 0.3)) * 1.1))
		rotate(calc(max(0, (var(--mh-scroll, 0) - 0.3)) * -25deg));
	transform-origin: 50% 50%;
	opacity: calc(1 - max(0, (var(--mh-scroll, 0) - 0.3)) * 2.5);
	width: max(var(--mh-can-width, 0px), 360px, 42vw);
	height: max(480px, var(--mh-can-height, 78vh));
	max-height: 90vh;
	z-index: 3;
	pointer-events: none;
	filter:
		drop-shadow(0 35px 55px rgba(0,0,0,0.65))
		drop-shadow(0 0 90px rgba(200, 200, 215, 0.10));
	transition: filter 0.4s ease;
}
.blacky-mh__can canvas { display: block; width: 100% !important; height: 100% !important; }

.blacky-mh__footer {
	position: relative;
	z-index: 5;
	margin-top: clamp(24px, 4vh, 60px);
	text-align: center;
	transform: translateY(calc(var(--mh-scroll, 0) * -90px));
	opacity: calc(1 - var(--mh-scroll, 0) * 2.4);
}

.blacky-mh__subline {
	color: var(--mh-subline, #a8a8b0);
	font-size: clamp(14px, 1.05vw, 17px);
	margin: 0 0 clamp(16px, 2vh, 24px);
	letter-spacing: 0.02em;
	line-height: 1.5;
	font-weight: 400;
}

.blacky-mh__ctas {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.blacky-mh__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	font-family: var(--blacky-body-font, 'Outfit'), sans-serif;
	border-radius: 2px;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	cursor: pointer;
	border: 2px solid transparent;
}

.blacky-mh__cta--primary {
	background: var(--mh-accent, #c8c8d0);
	color: var(--mh-accent-text, #0a0a0c);
}
.blacky-mh__cta--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(200, 200, 215, 0.35);
}

.blacky-mh__cta--ghost {
	background: transparent;
	border-color: rgba(255,255,255,0.25);
	color: rgba(255,255,255,0.85);
}
.blacky-mh__cta--ghost:hover {
	border-color: var(--mh-accent, #c8c8d0);
	color: var(--mh-accent, #c8c8d0);
}

.blacky-mh__scroll-hint {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,0.4);
	font-size: 9px;
	letter-spacing: 0.3em;
	font-family: ui-monospace, monospace;
	font-weight: 600;
	pointer-events: none;
	opacity: calc(1 - var(--mh-scroll, 0) * 4);
}
.blacky-mh__scroll-dot {
	animation: blacky-mh-scroll-dot 1.8s ease-in-out infinite;
}
@keyframes blacky-mh-scroll-dot {
	0%   { transform: translateY(0);  opacity: 1; }
	60%  { transform: translateY(8px); opacity: 0; }
	100% { transform: translateY(0);  opacity: 0; }
}

@media (max-width: 768px) {
	.blacky-mh                { padding: 60px 4vw 50px; }
	.blacky-mh__text          { font-size: clamp(3.5rem, 22vw, 8rem); letter-spacing: -0.025em; }
	.blacky-mh__can           { width: 78vw; height: 60vh; }
	.blacky-mh__sticker       { width: 78px; height: 78px; top: 4%; right: 5%; }
	.blacky-mh__sticker b     { font-size: 16px; }
	.blacky-mh__sticker span  { font-size: 7px; }
	.blacky-mh__eyebrow       { font-size: 10px; margin-bottom: 16px; }
	.blacky-mh__cta           { padding: 12px 20px; font-size: 11px; flex: 1 0 auto; }
}

/* --- MEGA-HERO ENTRY ANIMATION --- */
/* Initial-State: alles unsichtbar/leer; .is-entered triggert die Animationen */
.blacky-mh:not(.is-entered) .blacky-mh__eyebrow,
.blacky-mh:not(.is-entered) .blacky-mh__sticker,
.blacky-mh:not(.is-entered) .blacky-mh__text,
.blacky-mh:not(.is-entered) .blacky-mh__can,
.blacky-mh:not(.is-entered) .blacky-mh__subline,
.blacky-mh:not(.is-entered) .blacky-mh__cta,
.blacky-mh:not(.is-entered) .blacky-mh__scroll-hint {
	opacity: 0;
}
/* Can ist hidden bis GLB geladen ist (verhindert leeren canvas + weißer flash beim WebGL init) */
.blacky-mh__can {
	background: transparent;
	will-change: opacity, transform;
}
.blacky-mh__can canvas {
	background: transparent !important;
}
.blacky-mh__can:not(.is-can-loaded) {
	opacity: 0;
	visibility: hidden;
}
.blacky-mh__can.is-can-loaded {
	visibility: visible;
}
.blacky-mh:not(.is-entered) .blacky-mh__text {
	opacity: 0;
}

/* Trigger: staggered animation sequence
   "backwards" wo Transform-Animation mit Scroll-Parallax-Transform kollidieren würde
   (Sticker, Eyebrow): nach Animations-Ende übernimmt die CSS-Regel wieder.
   "both" wo es keinen Konflikt gibt (Can: nur filter/opacity, Mega-Text: nur clip-path) */
.blacky-mh.is-entered .blacky-mh__can.is-can-loaded { animation: mh-can-rise-in   1.4s cubic-bezier(0.16,1,0.3,1)     backwards; }
.blacky-mh.is-entered .blacky-mh__eyebrow     { animation: mh-eyebrow-clear    0.9s cubic-bezier(0.16,1,0.3,1)     0.20s backwards; }
.blacky-mh.is-entered .blacky-mh__text--outline { animation: mh-text-fly-left  1.2s cubic-bezier(0.34,1.2,0.64,1)  0.35s backwards; }
.blacky-mh.is-entered .blacky-mh__text--fill    { animation: mh-text-fly-right 1.2s cubic-bezier(0.34,1.2,0.64,1)  0.50s backwards; }
.blacky-mh.is-entered .blacky-mh__sticker     { animation: mh-sticker-pop      0.9s cubic-bezier(0.34,1.7,0.64,1)  0.95s backwards; }
.blacky-mh.is-entered .blacky-mh__subline     { animation: mh-slide-up         0.9s cubic-bezier(0.16,1,0.3,1)     1.15s both; }
.blacky-mh.is-entered .blacky-mh__cta--primary{ animation: mh-cta-pop          0.8s cubic-bezier(0.34,1.56,0.64,1) 1.35s backwards; }
.blacky-mh.is-entered .blacky-mh__cta--ghost  { animation: mh-cta-pop          0.8s cubic-bezier(0.34,1.56,0.64,1) 1.50s backwards; }
.blacky-mh.is-entered .blacky-mh__scroll-hint { animation: mh-slide-up         0.7s cubic-bezier(0.16,1,0.3,1)     1.80s both; }

/* no-anim (reduced-motion / Editor): keine Entry-Delays, alles direkt sichtbar */
.blacky-mh.no-anim *,
.blacky-mh.no-anim *::before,
.blacky-mh.no-anim *::after { animation: none !important; }
.blacky-mh.no-anim .blacky-mh__can,
.blacky-mh.no-anim .blacky-mh__can:not(.is-can-loaded)      { opacity: 1; }
.blacky-mh.no-anim .blacky-mh__text     { opacity: 1; transform: none; }
.blacky-mh.no-anim .blacky-mh__eyebrow,
.blacky-mh.no-anim .blacky-mh__sticker,
.blacky-mh.no-anim .blacky-mh__subline,
.blacky-mh.no-anim .blacky-mh__cta,
.blacky-mh.no-anim .blacky-mh__scroll-hint { opacity: 1; }

@keyframes mh-slide-up {
	0%   { opacity: 0; transform: translateY(40px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes mh-slide-left {
	0%   { opacity: 0; transform: translateX(-30px); }
	100% { opacity: 1; transform: translateX(0); }
}
@keyframes mh-curtain {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes mh-sticker-pop {
	0%   { opacity: 0; transform: rotate(10deg) scale(0.3); }
	60%  { opacity: 1; transform: rotate(10deg) scale(1.15); }
	100% { opacity: 1; transform: rotate(10deg) scale(1); }
}
@keyframes mh-can-rise-in {
	/* Deutliche Rise-Animation: kommt klar von unten hoch */
	0% {
		opacity: 0;
		transform: translate(-50%, calc(-50% + 280px)) scale(0.8);
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.blacky-loader__logo,
	.blacky-scroll-hint__line::after,
	.blacky-marquee__track,
	.blacky-sticker,
	.blacky-bolt,
	.blacky-mh__sticker,
	.blacky-mh__scroll-dot,
	.blacky-section--cta::before { animation: none !important; }
	* { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   MEGA-HERO BG MESH + NOISE + DECORATIONS + PILL-BUTTONS + CUSTOM CURSOR
   ========================================================================== */

/* Multi-radial Mesh-Gradient als Background-Atmosphäre.
   Ersetzt die einfachen ::before/::after spotlights mit reichhaltigerem Look */
.blacky-mh::before {
	background:
		radial-gradient(ellipse 60% 50% at 50% 52%, rgba(200, 200, 215, 0.10) 0%, transparent 60%),
		radial-gradient(ellipse 38% 36% at 12% 28%, rgba(220, 60, 120, 0.06) 0%, transparent 65%),
		radial-gradient(ellipse 36% 34% at 88% 70%, rgba(60, 100, 220, 0.06) 0%, transparent 65%),
		radial-gradient(ellipse 80% 50% at 50% 100%, rgba(200, 200, 215, 0.05) 0%, transparent 70%),
		linear-gradient(180deg, rgba(20,20,28,0.4) 0%, transparent 35%, transparent 65%, rgba(20,20,28,0.5) 100%);
}

/* Subtile Film-Grain-Textur via SVG turbulence (data URI) */
.blacky-mh {
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	background-size: 220px 220px;
	background-repeat: repeat;
}

/* --- IMAGES (Polaroid-Style, getiltet, hinter dem Mega-Text) --- */
.blacky-mh__image {
	position: absolute;
	z-index: 2;
	border-radius: 18px;
	overflow: hidden;
	box-shadow:
		0 28px 60px rgba(0,0,0,0.6),
		0 4px 16px rgba(0,0,0,0.3);
	transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.blacky-mh__image img,
.blacky-mh__image-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	border-radius: 18px;
}
.blacky-mh__image-placeholder {
	background: linear-gradient(180deg, #1c1c24 0%, #0e0e14 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(220, 220, 235, 0.35);
	font-family: ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.25em;
	text-align: center;
	border: 1px solid rgba(220, 220, 235, 0.1);
}
.blacky-mh__image-num   { display: none; }
.blacky-mh__image-label { display: block; }
.blacky-mh__image-label small { display: none; }



/* Hover: nur leichter scale-up, Rotation bleibt fast wie original */
.blacky-mh__image--1:hover {
	transform: rotate(-5deg) scale(1.04);
	transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.blacky-mh__image--2:hover {
	transform: rotate(4deg) scale(1.04);
	transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

/* --- BADGE (rotierender Kreistext links) --- */
.blacky-mh__badge {
	position: absolute;
	left: 4%;
	top: 50%;
	z-index: 4;
	color: var(--mh-accent, #c8c8d0);
	width: max(var(--mh-badge-sz, 0px), 140px, 11vw);
	height: max(var(--mh-badge-sz, 0px), 140px, 11vw);
	transform:
		translateY(-50%)
		translate3d(calc(var(--mh-scroll, 0) * -120px), calc(var(--mh-scroll, 0) * -150px), 0)
		scale(calc(1 - var(--mh-scroll, 0) * 0.2));
	opacity: calc(1 - var(--mh-scroll, 0) * 1.8);
	pointer-events: none;
}
.blacky-mh__badge svg {
	display: block;
	width: 100%;
	height: 100%;
	animation: mh-badge-rotate 22s linear infinite;
}
@keyframes mh-badge-rotate {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* --- SCRIBBLES (Slosh-Style Decorations, dark/gold version) --- */
.blacky-mh__scribble {
	position: absolute;
	z-index: 2;
	color: var(--mh-accent, #c8c8d0);
	pointer-events: none;
	opacity: calc(0.7 * (1 - var(--mh-scroll, 0) * 2));
}
.blacky-mh__scribble--1 { /* squiggle line top center */
	top: 15%; left: 32%;
	width: 90px; height: 30px;
	transform: rotate(-6deg) translateY(calc(var(--mh-scroll, 0) * -140px));
	animation: mh-scribble-bob 4s ease-in-out infinite;
}
.blacky-mh__scribble--2 { /* sparkle star bottom right */
	bottom: 22%; right: 24%;
	width: 38px; height: 38px;
	transform: rotate(8deg) translateY(calc(var(--mh-scroll, 0) * -150px));
	animation: mh-scribble-twinkle 2.5s ease-in-out infinite;
}
.blacky-mh__scribble--3 { /* cross-circle mid-left */
	top: 38%; left: 18%;
	width: 28px; height: 28px;
	transform: rotate(15deg) translateY(calc(var(--mh-scroll, 0) * -120px));
	animation: mh-scribble-bob 3.5s ease-in-out -1s infinite;
}
@keyframes mh-scribble-bob {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -8px; }
}
@keyframes mh-scribble-twinkle {
	0%, 100% { opacity: calc(0.7 * (1 - var(--mh-scroll, 0) * 2)); scale: 1; }
	50%      { opacity: calc(0.3 * (1 - var(--mh-scroll, 0) * 2)); scale: 0.85; }
}

/* --- PILL-BUTTONS (Charlie's-Style: cream pill mit dark text) --- */
.blacky-mh__cta {
	border-radius: 999px;
	padding: 18px 36px;
	font-size: 13px;
	letter-spacing: 0.12em;
	font-weight: 700;
	border: 2px solid transparent;
	background: transparent;
	color: inherit;
	transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, border-color 0.25s ease, box-shadow 0.3s ease;
	min-width: 180px;
}
.blacky-mh__cta--primary {
	background: #f6efd9;            /* cream wie Charlie's */
	color: #0a0a0c;
	border-color: #f6efd9;
}
.blacky-mh__cta--primary:hover {
	background: var(--mh-accent, #c8c8d0);
	border-color: var(--mh-accent, #c8c8d0);
	color: #0a0a0c;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(200, 200, 215, 0.35);
}
.blacky-mh__cta--ghost {
	background: transparent;
	border-color: rgba(246, 239, 217, 0.4);
	color: #f6efd9;
}
.blacky-mh__cta--ghost:hover {
	background: rgba(246, 239, 217, 0.08);
	border-color: #f6efd9;
	color: #f6efd9;
	transform: translateY(-2px);
}

/* --- CUSTOM CURSOR (Charlie's-Style minimal: Ring + zentraler Punkt) --- */
.blacky-mh { cursor: auto; }
.blacky-mh a, .blacky-mh button, .blacky-mh__cta { cursor: pointer; }

.blacky-mh__cursor {
	position: absolute;
	top: 0; left: 0;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
	border: 1.5px solid rgba(220, 220, 235, 0.65);
	background: transparent;
	pointer-events: none;
	opacity: 0;
	z-index: 40;
	transition: opacity 0.22s ease, width 0.28s cubic-bezier(0.34,1.56,0.64,1), height 0.28s cubic-bezier(0.34,1.56,0.64,1), margin 0.28s cubic-bezier(0.34,1.56,0.64,1), border-color 0.22s ease, background 0.22s ease;
	mix-blend-mode: difference;
	will-change: transform, opacity;
}
.blacky-mh__cursor.is-visible { opacity: 1; }
.blacky-mh__cursor.is-hover {
	width: 80px; height: 80px;
	margin: -40px 0 0 -40px;
	border-color: rgba(220, 220, 235, 0.95);
	background: rgba(220, 220, 235, 0.08);
}

.blacky-mh__cursor-dot {
	position: absolute;
	top: 0; left: 0;
	width: 6px; height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: var(--mh-accent, #c8c8d0);
	pointer-events: none;
	opacity: 0;
	z-index: 100;
	transition: opacity 0.2s ease;
	box-shadow: 0 0 8px rgba(220, 220, 235, 0.6);
	will-change: transform, opacity;
}
.blacky-mh__cursor-dot.is-visible { opacity: 1; }

/* Touch-Devices: keinen Custom-Cursor — Default-System-Cursor anzeigen */
@media (hover: none), (pointer: coarse) {
	.blacky-mh, .blacky-mh a, .blacky-mh button, .blacky-mh__cta { cursor: auto; }
	.blacky-mh__cursor { display: none; }
}

/* Mobile adjustments für neue Elemente */
@media (max-width: 768px) {
	.blacky-mh__badge        { width: 90px; height: 90px; left: 3%; }
	
	
	.blacky-mh__scribble--1  { display: none; }
	.blacky-mh__scribble--2  { width: 26px; height: 26px; bottom: 18%; right: 16%; }
	.blacky-mh__scribble--3  { display: none; }
	.blacky-mh__cta          { padding: 14px 22px; }
}

/* Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
	.blacky-mh__badge svg,
	.blacky-mh__scribble,
	.blacky-mh__cursor { animation: none !important; }
}

/* ==========================================================================
   MEGA-HERO BG-PATTERN (Charlie's-Style textured, dark version)
   ========================================================================== */
/* Visible Dot-Grid Pattern: feines Punktraster über dem dark BG */
.blacky-mh {
	background-image:
		/* Dot-Grid: subtile Gold-Punkte 1px alle 22px */
		radial-gradient(circle at center, rgba(200, 200, 215, 0.08) 1px, transparent 1.2px),
		/* Noise: SVG turbulence als Grain */
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	background-size: 22px 22px, 200px 200px;
	background-position: 0 0, 0 0;
	background-repeat: repeat, repeat;
}

/* Brand-Watermark BLACKY-Initial 'B' diagonal getiltet als grosses Wasserzeichen */
.blacky-mh__bgmark {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	font-family: 'Unbounded', var(--blacky-headline-font, 'Bebas Neue'), sans-serif;
	font-weight: 900;
	font-size: clamp(20rem, 30vw, 40rem);
	line-height: 0.7;
	color: rgba(200, 200, 215, 0.018);
	letter-spacing: -0.06em;
	top: -8%;
	right: -3%;
	transform: rotate(-12deg);
	user-select: none;
	mix-blend-mode: screen;
}


/* Performance: will-change auf animierte Elemente */
.blacky-mh__can,
.blacky-mh__text,
.blacky-mh__sticker,
.blacky-mh__badge,
.blacky-mh__image,
.blacky-mh__eyebrow,
.blacky-mh__footer { will-change: transform, opacity; }

/* ==========================================================================
   MEGA-HERO v4: KRASSER BG + ENTRY für alles + Premium Depth
   ========================================================================== */

/* --- KRASSERER HOCHWERTIGER BACKGROUND --- */
/* Mehrere atmosphärische Layer: animierte Hot-Spots, diagonal Light-Rays,
   verstärktes Grain. Alles GPU-effizient via transform/opacity. */
.blacky-mh::before {
	background:
		/* Pulsing Gold-Spot center */
		radial-gradient(ellipse 60% 55% at 50% 52%, rgba(200, 200, 215, 0.16) 0%, transparent 55%),
		/* Magenta hot-spot links oben */
		radial-gradient(ellipse 45% 40% at 8% 22%, rgba(220, 60, 140, 0.12) 0%, transparent 60%),
		/* Cyan hot-spot rechts unten */
		radial-gradient(ellipse 42% 38% at 92% 78%, rgba(60, 140, 220, 0.10) 0%, transparent 60%),
		/* Bottom Glow */
		radial-gradient(ellipse 90% 60% at 50% 105%, rgba(200, 200, 215, 0.08) 0%, transparent 55%),
		/* Top deepen */
		linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 25%, transparent 70%, rgba(0,0,0,0.55) 100%);
	animation: mh-bg-pulse 9s ease-in-out infinite;
}
@keyframes mh-bg-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.9; transform: scale(1.04); }
}

/* Diagonale Light-Ray-Streifen (subtil) */
.blacky-mh::after {
	background:
		repeating-linear-gradient(
			115deg,
			transparent 0,
			transparent 90px,
			rgba(200, 200, 215, 0.025) 90px,
			rgba(200, 200, 215, 0.025) 92px,
			transparent 92px,
			transparent 180px
		),
		/* Outer vignette */
		radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%);
}

/* Watermark BIGGER + besser sichtbar */
.blacky-mh__bgmark {
	font-size: clamp(28rem, 42vw, 60rem);
	color: rgba(200, 200, 215, 0.028);
	top: -12%;
	right: -8%;
	letter-spacing: -0.08em;
}

/* --- ENTRY-ANIMATIONEN für ALLE Elemente: Bilder, Badge, Scribbles, BG-Mark --- */
.blacky-mh:not(.is-entered) .blacky-mh__image,
.blacky-mh:not(.is-entered) .blacky-mh__badge,
.blacky-mh:not(.is-entered) .blacky-mh__scribble,
.blacky-mh:not(.is-entered) .blacky-mh__bgmark {
	opacity: 0;
}

.blacky-mh.is-entered .blacky-mh__bgmark      { animation: mh-fade-in       2.0s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
.blacky-mh.is-entered 
.blacky-mh.is-entered 
.blacky-mh.is-entered .blacky-mh__badge       { animation: mh-badge-in      0.9s cubic-bezier(0.34,1.56,0.64,1) 1.05s backwards; }
.blacky-mh.is-entered .blacky-mh__scribble--1 { animation: mh-fade-in       0.7s cubic-bezier(0.16,1,0.3,1) 1.20s both; }
.blacky-mh.is-entered .blacky-mh__scribble--2 { animation: mh-fade-in       0.7s cubic-bezier(0.16,1,0.3,1) 1.35s both; }
.blacky-mh.is-entered .blacky-mh__scribble--3 { animation: mh-fade-in       0.7s cubic-bezier(0.16,1,0.3,1) 1.50s both; }

.blacky-mh.no-anim .blacky-mh__image,
.blacky-mh.no-anim .blacky-mh__badge,
.blacky-mh.no-anim .blacky-mh__scribble,
.blacky-mh.no-anim .blacky-mh__bgmark { opacity: 1; }

@keyframes mh-fade-in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes mh-img-from-left {
	0%   { opacity: 0; transform: translate3d(-220px, 60px, 0) rotate(-25deg) scale(0.5); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-7deg) scale(1); }
}
@keyframes mh-img-from-right {
	0%   { opacity: 0; transform: translate3d(220px, -60px, 0) rotate(25deg) scale(0.5); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(6deg) scale(1); }
}
@keyframes mh-badge-in {
	0%   { opacity: 0; transform: translateY(-50%) scale(0.3) rotate(-90deg); }
	100% { opacity: 1; transform: translateY(-50%) scale(1)   rotate(0deg); }
}

/* --- PREMIUM DEPTH für die Dose --- */
.blacky-mh__can {
	filter:
		drop-shadow(0 28px 50px rgba(0,0,0,0.6))
		drop-shadow(0 0 60px rgba(200, 200, 215, 0.12));
}

/* Floor-Shadow (glow ellipse unter der Dose, gibt mehr Tiefe) */
.blacky-mh__stage::after {
	content: '';
	position: absolute;
	bottom: 8%;
	left: 50%;
	width: clamp(160px, 26vw, 380px);
	height: 30px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(200, 200, 215, 0.18) 0%, transparent 70%);
	filter: blur(8px);
	z-index: 2;
	pointer-events: none;
	animation: mh-floor-pulse 4s ease-in-out infinite;
}
@keyframes mh-floor-pulse {
	0%, 100% { opacity: 0.7; transform: translateX(-50%) scaleX(1); }
	50%      { opacity: 1;   transform: translateX(-50%) scaleX(1.08); }
}

/* --- CTAs: noch satter und Charlie's-näher --- */
.blacky-mh__cta {
	padding: 18px 38px;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
}
.blacky-mh__cta--primary {
	box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.blacky-mh__cta--ghost {
	color: #f6efd9;
	border-color: rgba(246, 239, 217, 0.5);
}


/* KRASSE Entry-Keyframes — Mega-Text slide-in from sides, eyebrow blur clear, cta pop */
@keyframes mh-text-fly-left {
	0%   { opacity: 0; transform: translate3d(-320px, -40px, 0) rotate(-20deg) scale(0.85); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-4deg) scale(1); }
}
@keyframes mh-text-fly-right {
	0%   { opacity: 0; transform: translate3d(320px, 40px, 0) rotate(20deg) scale(0.85); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(3deg) scale(1); }
}
@keyframes mh-eyebrow-clear {
	0%   { opacity: 0; transform: translateX(-50px); filter: blur(6px); letter-spacing: 0.5em; }
	100% { opacity: 1; transform: translateX(0); filter: blur(0); letter-spacing: 0.3em; }
}
@keyframes mh-cta-pop {
	0%   { opacity: 0; transform: translateY(40px) scale(0.7); }
	70%  { opacity: 1; transform: translateY(0) scale(1.06); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* ==========================================================================
   MEGA-HERO RESPONSIVE — Ultra-wide Screens (>1920px)
   ========================================================================== */
@media (min-width: 1920px) {
	.blacky-mh {
		padding-left:  calc((100vw - 1800px) / 2 + 5vw) !important;
		padding-right: calc((100vw - 1800px) / 2 + 5vw) !important;
	}
	.blacky-mh__text {
		font-size: clamp(4.5rem, 14vw, 18rem);
	}
}
@media (min-width: 2560px) {
	.blacky-mh__text {
		font-size: clamp(6rem, 10vw, 16rem);
	}
}


/* ==========================================================================
   KOPF-GRAFIK (Optionaler Mascot)
   ========================================================================== */
.blacky-mh__head {
	position: absolute;
	z-index: 5;
	transform: translate(-50%, -50%) rotate(var(--head-rot, 0deg));
	pointer-events: none;
	filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
}
.blacky-mh__head img {
	width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   FOOTER-AREA Polish (Subline + CTAs aufräumen)
   ========================================================================== */
.blacky-mh__footer {
	padding: 24px 16px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.blacky-mh__subline {
	font-size: clamp(15px, 1.1vw, 18px);
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 28px;
	font-weight: 500;
}
.blacky-mh__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	align-items: center;
}
.blacky-mh__cta {
	min-width: 200px;
	padding: 18px 38px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.16em;
}

/* ==========================================================================
   GLOBAL SITEWIDE CURSOR + Sprudel-Trail
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
	body { cursor: auto; }
	body a, body button, body input, body textarea, body select, body [role="button"] { cursor: pointer; }
}

.blacky-global-cursor {
	position: fixed;
	top: 0; left: 0;
	width: 40px; height: 40px;
	margin: -20px 0 0 -20px;
	border-radius: 50%;
	border: 1.5px solid rgba(220, 220, 235, 0.7);
	pointer-events: none;
	z-index: 9990;
	opacity: 0;
	mix-blend-mode: difference;
	transition: opacity 0.25s ease, width 0.28s cubic-bezier(0.34,1.56,0.64,1), height 0.28s cubic-bezier(0.34,1.56,0.64,1), margin 0.28s cubic-bezier(0.34,1.56,0.64,1), background 0.22s ease, border-color 0.22s ease;
	will-change: transform, opacity;
}
.blacky-global-cursor.is-on { opacity: 1; }
.blacky-global-cursor.is-hover {
	width: 72px; height: 72px;
	margin: -36px 0 0 -36px;
	background: rgba(220, 220, 235, 0.1);
	border-color: rgba(220, 220, 235, 1);
}

.blacky-global-cursor-dot {
	position: fixed;
	top: 0; left: 0;
	width: 5px; height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e8e8ec 0%, #ffffff 50%, #b8b8c4 100%);
	box-shadow: 0 0 8px rgba(220, 220, 235, 0.7);
	pointer-events: none;
	z-index: 9990;
	opacity: 0;
	transition: opacity 0.22s ease;
	will-change: transform, opacity;
}
.blacky-global-cursor-dot.is-on { opacity: 1; }

.blacky-global-trail {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	pointer-events: none;
	z-index: 9989;
	overflow: hidden;
}



@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
	.blacky-global-cursor,
	.blacky-global-cursor-dot,
	.blacky-global-trail { display: none !important; }
	/* cursor:auto !important raus 2026-05-29 — ueberschrieb .blacky-btn cursor:pointer */
}


/* ==========================================================================
   MEGA-HERO MOBILE + TABLET RESPONSIVE (Final Pass)
   ========================================================================== */
@media (max-width: 1024px) {
	.blacky-mh__text             { font-size: clamp(3rem, 12vw, 8rem); }
	.blacky-mh__can              { width: clamp(260px, 55vw, 420px); height: clamp(360px, 55vh, 600px); }
	
	
	.blacky-mh__badge            { width: 100px; height: 100px; }
	.blacky-mh__sticker          { width: 80px; height: 80px; }
}
@media (max-width: 768px) {
	.blacky-mh                   { padding: 30px 4vw 60px; min-height: 100vh; }
	.blacky-mh__stage            { min-height: 60vh; }
	.blacky-mh__text--outline    {
		position: absolute; top: 6%; left: 0; right: 0;
		text-align: center; font-size: 16vw !important;
		transform: rotate(-2deg) translate3d(0, calc(var(--mh-scroll, 0) * -240px), 0);
	}
	.blacky-mh__text--fill       {
		position: absolute; bottom: 6%; left: 0; right: 0;
		text-align: center; font-size: 16vw !important;
		transform: rotate(1deg) translate3d(0, calc(var(--mh-scroll, 0) * -320px), 0);
	}
	.blacky-mh__can              { width: 65vw !important; height: 45vh !important; max-height: 60vh; }
	
	
	.blacky-mh__badge            { width: 70px !important; height: 70px !important; left: 3%; top: 60%; }
	.blacky-mh__sticker          { top: 3%; right: 3%; }
	.blacky-mh__sticker b        { font-size: 11px; }
	.blacky-mh__sticker span     { font-size: 6px; }
	.blacky-mh__scribble--1      { display: none; }
	.blacky-mh__scribble--3      { display: none; }
	.blacky-mh__head             { display: none; }
	.blacky-mh__footer           { padding: 16px 8px 0; }
	.blacky-mh__subline          { font-size: 13px; margin-bottom: 14px; }
	.blacky-mh__cta              { padding: 12px 18px; font-size: 10px; min-width: 0; flex: 1 1 45%; }
	.blacky-mh__ctas             { gap: 8px; }
	.blacky-mh__bgmark           { font-size: 15rem; }
	.blacky-mh__eyebrow          { font-size: 9px; margin-bottom: 14px; }
}
@media (max-width: 480px) {
	.blacky-mh__text             { font-size: clamp(2rem, 16vw, 5rem); }
	.blacky-mh__can              { width: 85vw; }
	.blacky-mh__badge            { width: 60px; height: 60px; }
}


/* ==========================================================================
   KOPF-GRAFIK Entry-Animation (Pop-In mit Bounce + Rotation)
   ========================================================================== */
.blacky-mh:not(.is-entered) .blacky-mh__head {
	opacity: 0;
}
.blacky-mh.is-entered .blacky-mh__head {
	animation: mh-head-pop 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 0.80s backwards;
}
.blacky-mh.no-anim .blacky-mh__head { opacity: 1; animation: none; }

@keyframes mh-head-pop {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) rotate(calc(var(--head-rot, 0deg) + 90deg)) scale(0.2);
	}
	65% {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(calc(var(--head-rot, 0deg) - 15deg)) scale(1.15);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(var(--head-rot, 0deg)) scale(1);
	}
}

/* Kopf: leichtes Float beim Scrollen, fliegt am Ende weg */
.blacky-mh__head {
	transform:
		translate(-50%, calc(-50% + var(--mh-scroll, 0) * -80px))
		rotate(calc(var(--head-rot, 0deg) + var(--mh-scroll, 0) * 15deg));
	opacity: calc(1 - max(0, (var(--mh-scroll, 0) - 0.3)) * 2.5);
	transition: opacity 0.3s ease;
}


/* ==========================================================================
   SILVER-SHIMMER ANIMATION — animierter Glanz auf metallischen Elementen
   ========================================================================== */

/* Sticker bekommt metallic silver gradient + animated shine sweep */
.blacky-mh__sticker {
	background: linear-gradient(135deg,
		#e8e8ec 0%,
		#ffffff 30%,
		#c8c8d0 55%,
		#ffffff 75%,
		#a8a8b4 100%) !important;
	background-size: 200% 200%;
	color: #0a0a0c !important;
	box-shadow:
		0 8px 24px rgba(220, 220, 235, 0.25),
		0 0 0 1px rgba(255, 255, 255, 0.3) inset,
		0 2px 4px rgba(0,0,0,0.3) inset;
	position: relative;
	overflow: hidden;
}
.blacky-mh__sticker::after {
	content: '';
	position: absolute;
	top: 0; left: -50%;
	width: 200%; height: 100%;
	background: linear-gradient(110deg,
		transparent 35%,
		rgba(255, 255, 255, 0.85) 50%,
		transparent 65%);
	transform: translateX(-100%) skewX(-10deg);
	animation: mh-silver-sweep 4.5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes mh-silver-sweep {
	0%, 25%   { transform: translateX(-100%) skewX(-10deg); }
	60%, 100% { transform: translateX(100%) skewX(-10deg); }
}

/* Badge bekommt silver dotted stroke ring */
.blacky-mh__badge {
	color: #e0e0ea !important;
}

/* CTA Primary: cream-silver pill mit shine */
.blacky-mh__cta--primary {
	background: linear-gradient(135deg, #f6efd9 0%, #ffffff 50%, #e8dfc0 100%) !important;
	color: #0a0a0c !important;
	border-color: transparent !important;
	box-shadow:
		0 4px 14px rgba(0,0,0,0.5),
		0 0 0 1px rgba(255,255,255,0.4) inset !important;
	position: relative;
	overflow: hidden;
}
.blacky-mh__cta--primary::after {
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(110deg,
		transparent 30%,
		rgba(255, 255, 255, 0.9) 50%,
		transparent 70%);
	transition: left 0.6s ease;
	pointer-events: none;
}
.blacky-mh__cta--primary:hover::after {
	left: 100%;
}
.blacky-mh__cta--primary:hover {
	transform: translateY(-3px);
	box-shadow:
		0 10px 28px rgba(0,0,0,0.6),
		0 0 0 2px rgba(255, 255, 255, 0.6) inset !important;
}

/* Global Cursor → Silber statt Gold */
.blacky-global-cursor-dot {
	background: linear-gradient(135deg, #ffffff, #c8c8d8) !important;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
}


/* ==========================================================================
   PREMIUM CAN SHADOW — mehr Tiefe + dezent metallic reflection
   ========================================================================== */
.blacky-mh__can {
	filter:
		drop-shadow(0 40px 60px rgba(0, 0, 0, 0.7))
		drop-shadow(0 0 100px rgba(220, 220, 235, 0.18))
		drop-shadow(0 0 200px rgba(180, 180, 220, 0.08)) !important;
}

/* ==========================================================================
   BACKGROUND DEPTH — mehr atmosphärische Tiefe
   ========================================================================== */
.blacky-mh::before {
	background:
		radial-gradient(ellipse 65% 55% at 50% 52%, rgba(220, 220, 235, 0.13) 0%, transparent 55%),
		radial-gradient(ellipse 50% 45% at 8% 22%, rgba(180, 100, 200, 0.10) 0%, transparent 60%),
		radial-gradient(ellipse 45% 40% at 92% 78%, rgba(80, 140, 220, 0.10) 0%, transparent 60%),
		radial-gradient(ellipse 80% 50% at 50% 100%, rgba(220, 220, 235, 0.06) 0%, transparent 55%),
		linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 25%, transparent 70%, rgba(0,0,0,0.6) 100%) !important;
	animation: mh-bg-pulse 11s ease-in-out infinite !important;
}

/* ==========================================================================
   ANIMATED SCROLL HINT — schicker Mouse-Icon + scroll-down Arrow
   ========================================================================== */
.blacky-mh__scroll-hint {
	bottom: 30px !important;
	color: rgba(220, 220, 235, 0.6) !important;
	font-size: 10px !important;
	letter-spacing: 0.4em !important;
}
.blacky-mh__scroll-dot {
	animation: mh-scroll-dot 1.8s ease-in-out infinite !important;
}
@keyframes mh-scroll-dot {
	0%   { transform: translateY(0); opacity: 0; }
	30%  { opacity: 1; }
	70%  { transform: translateY(8px); opacity: 1; }
	100% { transform: translateY(10px); opacity: 0; }
}


/* ==========================================================================
   MOBILE FINAL POLISH — Phone (≤480), Tablet portrait (≤768)
   ========================================================================== */
@media (max-width: 768px) {
	/* CTAs sollen schön nebeneinander oder gestackt sein */
	.blacky-mh__ctas {
		flex-direction: column !important;
		align-items: stretch;
		gap: 10px !important;
	}
	.blacky-mh__cta {
		flex: 1 1 100% !important;
		text-align: center;
		min-width: 0;
	}
	/* Sticker nicht zu klein auf Mobile */
/* mobile sticker size — Slider steuert */
	/* Badge nur dann zeigen wenn Platz */
	.blacky-mh__badge {
		width: 80px !important;
		height: 80px !important;
		opacity: 0.8;
	}
}

@media (max-width: 480px) {
	.blacky-mh                   { padding: 25px 4vw 70px !important; }
	.blacky-mh__text--outline    { top: 4% !important; }
	.blacky-mh__text--fill       { bottom: 30% !important; }
	.blacky-mh__can              { width: 75vw !important; height: 42vh !important; }
	.blacky-mh__badge            { display: none !important; }  /* zu eng auf 480 */
	.blacky-mh__scribble         { display: none !important; }
}

/* ==========================================================================
   CREATIVE POLISH PASS 2026-05-19 — Cream Pills, Silver Shimmer, Particles
   ========================================================================== */

/* --- CTA PRIMARY: Cream-Silver Pill, Charlie's-style with shine sweep --- */
.blacky-mh__cta--primary {
	background: linear-gradient(135deg, #f5f5f0 0%, #ffffff 45%, #e2e2e8 100%) !important;
	color: #0a0a0c !important;
	border-radius: 999px !important;
	padding: 16px 32px !important;
	font-weight: 800 !important;
	letter-spacing: 0.16em !important;
	border: none !important;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-shadow:
		0 2px 0 rgba(255,255,255,0.6) inset,
		0 -2px 0 rgba(0,0,0,0.08) inset,
		0 8px 24px rgba(255,255,255,0.18),
		0 14px 32px rgba(0,0,0,0.35);
	transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
}
.blacky-mh__cta--primary::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.65s cubic-bezier(0.16,1,0.3,1);
	pointer-events: none;
	mix-blend-mode: overlay;
	z-index: 1;
}
.blacky-mh__cta--primary:hover {
	transform: translateY(-3px) scale(1.02) !important;
	box-shadow:
		0 2px 0 rgba(255,255,255,0.7) inset,
		0 -2px 0 rgba(0,0,0,0.08) inset,
		0 12px 32px rgba(255,255,255,0.32),
		0 22px 52px rgba(0,0,0,0.5) !important;
}
.blacky-mh__cta--primary:hover::before {
	transform: translateX(120%);
}

/* --- CTA GHOST: Subtle silver border-glow on hover --- */
.blacky-mh__cta--ghost {
	border-radius: 999px !important;
	padding: 16px 32px !important;
	letter-spacing: 0.16em !important;
	font-weight: 700 !important;
	border-width: 1.5px !important;
	transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.blacky-mh__cta--ghost:hover {
	transform: translateY(-3px) scale(1.02) !important;
	box-shadow: 0 0 24px rgba(200,200,215,0.25), inset 0 0 18px rgba(200,200,215,0.12);
}

/* --- STICKER: Silver gradient + sweep shimmer --- */
.blacky-mh__sticker {
	background: linear-gradient(135deg, #e8e8ec 0%, #ffffff 50%, #b8b8c4 100%) !important;
	color: #0a0a0c !important;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.4) inset,
		0 4px 18px rgba(255,255,255,0.18),
		0 14px 36px rgba(0,0,0,0.45) !important;
}
.blacky-mh__sticker::after {
	content: '';
	position: absolute;
	inset: -10%;
	background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.85) 50%, transparent 65%);
	transform: translateX(-120%);
	animation: mh-silver-sweep 4.5s ease-in-out 1.5s infinite;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: screen;
}
.blacky-mh__sticker > * { position: relative; z-index: 2; }

@keyframes mh-silver-sweep {
	0%, 18% { transform: translateX(-120%); }
	42%     { transform: translateX(120%); }
	100%    { transform: translateX(120%); }
}

/* --- Floating ambient particles (CSS-only, ultra-light) --- */
.blacky-mh__ambient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}
.blacky-mh__ambient::before,
.blacky-mh__ambient::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 200%;
	top: -50%;
	left: 0;
	background-image:
		radial-gradient(circle at 12% 18%, rgba(200,200,215,0.30) 0%, transparent 0.18%),
		radial-gradient(circle at 78% 28%, rgba(200,200,215,0.35) 0%, transparent 0.14%),
		radial-gradient(circle at 32% 62%, rgba(200,200,215,0.25) 0%, transparent 0.16%),
		radial-gradient(circle at 88% 78%, rgba(200,200,215,0.30) 0%, transparent 0.14%),
		radial-gradient(circle at 46% 88%, rgba(200,200,215,0.22) 0%, transparent 0.18%),
		radial-gradient(circle at 62% 42%, rgba(200,200,215,0.32) 0%, transparent 0.12%),
		radial-gradient(circle at 8% 76%, rgba(200,200,215,0.20) 0%, transparent 0.20%),
		radial-gradient(circle at 96% 12%, rgba(200,200,215,0.28) 0%, transparent 0.15%);
	background-size: 100% 100%;
	animation: mh-ambient-drift 28s linear infinite;
	mix-blend-mode: screen;
	opacity: 0.6;
}
.blacky-mh__ambient::after {
	animation-duration: 44s;
	animation-direction: reverse;
	opacity: 0.45;
	transform: scale(1.4);
}

@keyframes mh-ambient-drift {
	0%   { transform: translateY(0); }
	100% { transform: translateY(-25%); }
}

/* --- Scroll-driven subtle BG hue shift (deeper as you scroll) --- */
.blacky-mh {
	background-color:
		hsl(
			calc(240 + var(--mh-scroll, 0) * -10),
			calc(6% - var(--mh-scroll, 0) * 4%),
			calc(4% - var(--mh-scroll, 0) * 2%)
		);
}

/* --- Premium can shadow / glow under can --- */
.blacky-mh__can {
	filter:
		drop-shadow(0 12px 28px rgba(0,0,0,0.55))
		drop-shadow(0 32px 48px rgba(0,0,0,0.35))
		drop-shadow(0 0 64px rgba(200,200,215,0.10));
}

/* --- Image hover: just a tiny tilt, no flat --- */


/* --- z-index protection: Stotage menu always on top --- */
.pxl-header-sticky #pxl-header,
.pxl-header-sticky .pxl-header-wrap,
header.pxl-header,
.elementor-location-header,
.elementor-location-header > * {
	z-index: 9999 !important;
	position: relative;
}
.blacky-mh {
	z-index: 0 !important;
	isolation: isolate !important;
}

/* --- Mobile: simpler / fewer animations --- */
@media (max-width: 768px) {
	.blacky-mh__ambient { opacity: 0.5; }
	.blacky-mh__cta--primary {
		padding: 14px 24px !important;
		font-size: 11px !important;
	}
	.blacky-mh__cta--ghost {
		padding: 14px 24px !important;
		font-size: 11px !important;
	}
}
@media (max-width: 480px) {
	.blacky-mh__ambient { display: none; }
	.blacky-mh__sticker::after { animation: none; }
}

/* --- Respect prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
	.blacky-mh__sticker::after,
	.blacky-mh__ambient::before,
	.blacky-mh__ambient::after { animation: none !important; }
}

/* ==========================================================================
   POLISH PASS 2 — 2026-05-19 13:35 — Hero shrink + Zoom-stable text + Sticky-pin
   ========================================================================== */

/* --- Hero shrinks: 100vh -> 82vh, Bilder kleiner --- */
.blacky-mh {
	min-height: 82vh !important;
	padding: clamp(60px, 6vh, 100px) 5vw clamp(40px, 5vh, 80px) !important;
}

/* Bilder kleiner: 22vw -> 17vw default */



/* --- Mega-Text Zoom-Stable: oberer Cap damit Text bei zoom-out NICHT wächst --- */
.blacky-mh__text {
	font-size: clamp(3rem, max(var(--mh-text-size, 0px), 16vw), 16rem) !important;
}

/* --- Hero Sticky-Pin: Hero bleibt sticky bis User durchscrollt, dann slidet er weg --- */
.blacky-mh {
	position: sticky;
	top: 0;
}
/* Outer wrapper bekommt extra Höhe damit die Sticky-Wirkung greift */
.elementor-element:has(> .elementor-widget-container > .blacky-mh),
.elementor-widget:has(> .elementor-widget-container > .blacky-mh) {
	min-height: 130vh;
}

/* --- Mobile: Sticky deaktivieren (zu eng) --- */
@media (max-width: 768px) {
	.blacky-mh {
		position: relative !important;
		min-height: 90vh !important;
	}
	.elementor-element:has(> .elementor-widget-container > .blacky-mh),
	.elementor-widget:has(> .elementor-widget-container > .blacky-mh) {
		min-height: auto;
	}
	.blacky-mh__text {
		font-size: clamp(2.5rem, 18vw, 7rem) !important;
	}
}

/* --- Can: etwas kleiner damit Hero kompakter wirkt --- */
.blacky-mh__can {
	width: max(var(--mh-can-width, 0px), 320px, 38vw) !important;
	height: max(420px, var(--mh-can-height, 70vh)) !important;
	max-height: 82vh !important;
}

/* ==========================================================================
   BUBBLE CURSOR V2 — Charlie's-Style: SVG circles, cluster spawns, more variety
   ========================================================================== */

/* Override the old div-style — now bubble is an <svg> */
svg
svg.blacky-global-bubble circle {
	transition: none;
}


/* ==========================================================================
   POLISH PASS 3 — 2026-05-19 14:00 — Sticky-Pin raus, Hero kompakt, Widget-Slider Support
   ========================================================================== */

/* --- Sticky-Pin entfernen — verursachte leeren schwarzen Raum nach Hero --- */
.blacky-mh {
	position: relative !important;
	top: auto !important;
}
.elementor-element:has(> .elementor-widget-container > .blacky-mh),
.elementor-widget:has(> .elementor-widget-container > .blacky-mh) {
	min-height: auto !important;
}

/* --- Hero-Höhe wird vom Widget-Slider gesteuert via --mh-height (default 78vh) --- */
.blacky-mh {
	min-height: var(--mh-height, 78vh) !important;
	height: var(--mh-height, 78vh) !important;
	max-height: var(--mh-height, 78vh) !important;
}
@media (max-width: 768px) {
	.blacky-mh {
		min-height: 88vh !important;
		height: auto !important;
		max-height: none !important;
	}
}

/* --- CTAs muss sichtbar sein im viewport: absolut positionieren am unteren rand --- */
.blacky-mh__ctas {
	position: absolute !important;
	bottom: clamp(40px, 6vh, 80px) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 10 !important;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
}


/* --- Scroll-Hint nach oben verschieben damit er nicht mit den CTAs überlappt --- */
.blacky-mh__scroll-hint {
	bottom: 10px !important;
	opacity: 0.4;
}
@media (max-width: 768px) {
	.blacky-mh__scroll-hint { display: none !important; }
}



/* --- Scroll-hint kleiner und nach unten ganz an den rand --- */
.blacky-mh__scroll-hint {
	bottom: 4px !important;
	font-size: 8px !important;
	opacity: 0.25;
}

/* ==========================================================================
   POLISH PASS 4 — 2026-05-19 14:15 — CTAs revert + Sticker entkoppeln
   ========================================================================== */



/* --- Sticker: Quadratisch, Größe vom Slider (Default 110px wenn nichts gesetzt) --- */
/* sticker forced-min entfernt — Slider steuert Größe */

/* ==========================================================================
   POLISH PASS 5 — 2026-05-19 14:30 — CTAs hard-force column, bgmark default hidden
   ========================================================================== */



/* --- bgmark Default: ausgeblendet wenn nicht explizit via Toggle aktiviert --- */
/* (Per PHP wird der Element nur gerendert wenn show_bgmark='yes') */
/* ==========================================================================
   POLISH PASS 6 — 2026-05-19 14:35 — CTAs final: NEBENEINANDER auf Desktop, column nur mobile
   ========================================================================== */
.blacky-mh .blacky-mh__ctas {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 14px !important;
	justify-content: center !important;
	align-items: center !important;
	width: max-content !important;
	max-width: 90vw !important;
}
.blacky-mh .blacky-mh__ctas .blacky-mh__cta {
	white-space: nowrap !important;
	flex: 0 0 auto !important;
}
@media (max-width: 768px) {
	.blacky-mh .blacky-mh__ctas {
		flex-direction: column !important;
		bottom: 30px !important;
		width: calc(100% - 12vw) !important;
	}
}


/* ==========================================================================
   EMERGENCY FIX 2026-05-19 16:08 — Sticker absolute + Header z-index
   ========================================================================== */
.blacky-mh__sticker {
	position: absolute !important;
}
/* Header schutz: nicht durch Hero verdeckt */
.pxl-header-sticky #pxl-header,
.pxl-header-sticky .pxl-header-wrap,
header.pxl-header,
.elementor-location-header,
.elementor-location-header > *,
#pxl-header {
	z-index: 9999 !important;
	position: relative;
}
.blacky-mh {
	z-index: 0 !important;
	isolation: isolate !important;
}

/* ==========================================================================
   TARGETED FIX 2026-05-19 16:20 — 6 spezifische issues, keine layout-disruption
   ========================================================================== */

/* 1) Mega-Text "OWNS" weniger hoch (war top:8%) */
.blacky-mh__text--outline {
	top: 18% !important;
}

/* 2) Dose etwas kleiner default */
.blacky-mh__can {
	height: max(420px, 68vh) !important;
	max-height: 75vh !important;
}

/* 3) Sticker = Logo-Blob-Form; ::after-Glanz folgt automatisch via Parent-Clip */
.blacky-mh__sticker {
	overflow: hidden !important;
	clip-path: url(#blacky-blob) !important;
	-webkit-clip-path: url(#blacky-blob) !important;
	border-radius: 0 !important;
}
.blacky-mh__sticker::after {
	border-radius: 0 !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
}

/* 4) Footer (subline + CTAs): klares Layout, kein Overlap */
.blacky-mh__footer {
	position: relative !important;
	z-index: 30 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 16px !important;
	margin-top: auto !important;
	padding-bottom: 30px !important;
}
.blacky-mh__subline {
	margin: 0 0 4px !important;
	font-size: clamp(13px, 1vw, 16px);
	color: var(--mh-subline, #a8a8b0);
	text-align: center;
	order: 1 !important;
}
.blacky-mh .blacky-mh__footer .blacky-mh__ctas {
	order: 2 !important;
	position: relative !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
}

/* 5) Image hover: KEINE Rotation, KEIN Scale */


/* 6) FOUC fix — alles unsichtbar bis is-entered */
.blacky-mh:not(.is-entered) .blacky-mh__can,
.blacky-mh:not(.is-entered) .blacky-mh__sticker,
.blacky-mh:not(.is-entered) .blacky-mh__badge,
.blacky-mh:not(.is-entered) .blacky-mh__scribble,
.blacky-mh:not(.is-entered) .blacky-mh__head,
.blacky-mh:not(.is-entered) .blacky-mh__image,
.blacky-mh:not(.is-entered) .blacky-mh__text,
.blacky-mh:not(.is-entered) .blacky-mh__footer {
	opacity: 0 !important;
	visibility: hidden !important;
}
.blacky-mh.is-entered .blacky-mh__footer {
	visibility: visible !important;
	opacity: 1 !important;
	animation: mh-fade-in 0.8s cubic-bezier(0.16,1,0.3,1) 1.0s both;
}

/* ==========================================================================
   IMAGE HOVER FIX 2026-05-19 17:05 — KEINE Hover-Transform, Bilder bleiben wie sie sind
   ========================================================================== */
/* Bild 1 (links): sanfte +1deg Rotation beim Hover, slow transition */
.blacky-mh__image {
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.blacky-mh__image--1:hover {
	transform:
		translate3d(calc(var(--mh-scroll, 0) * -180px), calc(var(--mh-scroll, 0) * -180px), 0)
		rotate(calc(-6deg + var(--mh-scroll, 0) * -15deg))
		scale(calc(1 - var(--mh-scroll, 0) * 0.18 + 0.01)) !important;
}
.blacky-mh__image--2:hover {
	transform:
		translate3d(calc(var(--mh-scroll, 0) * 180px), calc(var(--mh-scroll, 0) * -180px), 0)
		rotate(calc(8deg + var(--mh-scroll, 0) * 15deg))
		scale(calc(1 - var(--mh-scroll, 0) * 0.18 + 0.01)) !important;
}

/* ==========================================================================
   CURSOR FIX 2026-05-20 — Nativer Mauszeiger (Bubble-Cursor deaktiviert)
   2026-05-29: pauschale cursor:auto !important raus, weil sie
   .blacky-btn cursor:pointer ueberschrieben hat. Nur noch positive
   pointer-Regel fuer Links/Buttons.
   ========================================================================== */
a, button, .blacky-mh__cta, [role="button"], input[type="submit"] {
	cursor: pointer !important;
}
/* Ring komplett weg */
.blacky-global-cursor,
.blacky-global-cursor-dot {
	display: none !important;
}
/* Trail (Sprudel-Container) bleibt sichtbar */
.blacky-global-trail {
	display: block !important;
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9990;
}

/* ==========================================================================
   BUBBLE CURSOR — GSAP-controlled (2026-05-20), kein CSS-Animation-Konflikt
   ========================================================================== */


/* ==========================================================================
   CANVAS WHITE-FLASH FIX 2026-05-20 — opacity fade statt weiß
   ========================================================================== */
.blacky-mh__can:not(.is-can-loaded) {
	background: #0a0a0c !important;
}
.blacky-mh__can:not(.is-can-loaded) canvas {
	opacity: 0 !important;
}
.blacky-mh__can.is-can-loaded {
	background: transparent !important;
}
.blacky-mh__can.is-can-loaded canvas {
	opacity: 1 !important;
	transition: opacity 0.5s ease-out;
}

/* ==========================================================================
   STICKER DEFAULT 2026-05-20 — position absolute, default rechts unten, Slider override
   ========================================================================== */
.blacky-mh__sticker {
	position: absolute;
	/* Default-Position rechts unten — Elementor-Slider überschreiben das */
	top: auto;
	left: auto;
	bottom: 15%;
	right: 8%;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	overflow: hidden;
	clip-path: url(#blacky-blob);
}

/* ==========================================================================
   STICKER SIZE+PADDING FINAL 2026-05-20 — Slider steuert voll, box-sizing fix
   ========================================================================== */
.blacky-mh__sticker {
	box-sizing: border-box;
	flex-shrink: 0;
}

/* ==========================================================================
   BUBBLE CURSOR CLEAN 2026-05-20 — JS steuert per inline transform, kein CSS-Konflikt
   ========================================================================== */
.blacky-global-trail {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9990;
}
.blacky-global-bubble {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	will-change: transform, opacity;
	/* KEIN transform hier — JS setzt es inline */
}

/* ==========================================================================
   BUBBLE FLOAT KEYFRAME 2026-05-20 — appear, hold, float up + fade
   ========================================================================== */

/* ==========================================================================
   BUBBLE FLOAT KEYFRAME V2 2026-05-20 — left/top positioniert, nur translateY animiert
   ========================================================================== */
@keyframes blacky-bubble-float {
	0%   { opacity: 0; transform: translateY(0) scale(0.3); }
	20%  { opacity: 1; transform: translateY(-8px) scale(1); }
	100% { opacity: 0; transform: translateY(-75px) scale(1.25); }
}

/* ==========================================================================
   NATIVE CURSOR — Sprudel-Cursor deaktiviert (2026-05-20).
   2026-05-29: pauschale cursor:auto !important raus, ueberschrieb
   .blacky-btn cursor:pointer. Nur noch positive Pointer-Regel.
   ========================================================================== */
a, button, .blacky-mh__cta, [role="button"], input[type="submit"], .blacky-mh__can { cursor: pointer !important; }
.blacky-global-cursor, .blacky-global-cursor-dot, .blacky-global-trail, .blacky-global-bubble { display: none !important; }

/* ==========================================================================
   MOBILE RESPONSIVE — FINAL CLEAN BLOCK 2026-05-20
   Komplettes Mega-Hero Layout für Handy + Tablet
   ========================================================================== */

/* ---------- Tablet + Mobile (<= 768px) ---------- */
@media (max-width: 768px) {
	.blacky-mh {
		min-height: 90vh !important;
		height: auto !important;
		max-height: none !important;
		padding: 80px 5vw 36px !important;
		display: flex !important;
		flex-direction: column !important;
	}
	/* Stage nimmt verfügbaren Platz */
	.blacky-mh__stage { flex: 1 1 auto !important; min-height: 50vh !important; }
	/* Mega-Text kleiner + sauber positioniert */
	.blacky-mh__text { font-size: clamp(3rem, 19vw, 6rem) !important; letter-spacing: -0.02em !important; }
	.blacky-mh__text--outline { top: 8% !important; left: 3% !important; }
	.blacky-mh__text--fill    { bottom: 20% !important; right: 3% !important; }
	/* Dose zentriert, passende Größe */
	.blacky-mh__can {
		width: 66vw !important;
		max-width: 320px !important;
		height: auto !important;
		max-height: 60vh !important;
		top: 46% !important;
		left: 50% !important;
	}
	/* Sticker klein in der Ecke */
	.blacky-mh__sticker {
		width: 70px !important;
		height: 70px !important;
		top: 7% !important;
		right: 4% !important;
		bottom: auto !important;
		left: auto !important;
		padding: 6px !important;
	}
	.blacky-mh__sticker b    { font-size: 15px !important; }
	.blacky-mh__sticker span { font-size: 6.5px !important; }
	/* Badge klein */
	.blacky-mh__badge { width: 64px !important; height: 64px !important; }
	/* Clutter ausblenden auf Mobile */
	.blacky-mh__scribble, .blacky-mh__bgmark, .blacky-mh__head { display: none !important; }
	/* Footer: Subline + CTAs gestackt, mittig */
	.blacky-mh__footer {
		padding-bottom: 24px !important;
		gap: 14px !important;
	}
	.blacky-mh__subline { font-size: 13px !important; padding: 0 10px !important; text-align: center !important; }
	.blacky-mh .blacky-mh__footer .blacky-mh__ctas {
		flex-direction: column !important;
		gap: 10px !important;
		width: 84% !important;
		max-width: 320px !important;
		margin: 0 auto !important;
	}
	.blacky-mh__cta {
		width: 100% !important;
		text-align: center !important;
		justify-content: center !important;
		padding: 14px 20px !important;
	}
	/* Eyebrow */
	.blacky-mh__eyebrow { font-size: 10px !important; }
}

/* ---------- Kleine Handys (<= 480px) ---------- */
@media (max-width: 480px) {
	.blacky-mh {
		min-height: 88vh !important;
		padding: 70px 4vw 30px !important;
	}
	.blacky-mh__text { font-size: clamp(2.6rem, 20vw, 4.5rem) !important; }
	.blacky-mh__text--outline { top: 6% !important; }
	.blacky-mh__text--fill    { bottom: 24% !important; }
	.blacky-mh__can {
		width: 72vw !important;
		max-width: 260px !important;
		top: 44% !important;
	}
	.blacky-mh__sticker { width: 58px !important; height: 58px !important; }
	.blacky-mh__sticker b    { font-size: 13px !important; }
	.blacky-mh__sticker span { font-size: 6px !important; }
	.blacky-mh__badge { width: 54px !important; height: 54px !important; }
	.blacky-mh__subline { font-size: 12px !important; }
	.blacky-mh__cta { font-size: 11px !important; padding: 13px 18px !important; }
}

/* ==========================================================================
   MOBILE FIX 2 2026-05-20 — Bilder/Badge weg, Text kleiner, Sticker rein
   (basierend auf echtem Handy-Screenshot)
   ========================================================================== */
@media (max-width: 768px) {
	/* Hero clippt Überlauf sauber */
	.blacky-mh { overflow: hidden !important; }
	/* Bilder + Badge auf Mobile komplett ausblenden (zu viel Clutter, überlagern) */
	
	/* Mega-Text kleiner damit er nicht so stark überläuft */
	.blacky-mh__text { font-size: clamp(2.4rem, 14vw, 4.5rem) !important; }
	.blacky-mh__text--outline { top: 12% !important; left: 4% !important; }
	.blacky-mh__text--fill    { bottom: 26% !important; right: 4% !important; }
	/* Dose mittig + etwas größer da jetzt Platz ist */
	.blacky-mh__can {
		width: 70vw !important;
		max-width: 300px !important;
		top: 42% !important;
	}
	/* Sticker komplett sichtbar, weiter reingerückt */
	.blacky-mh__sticker {
		width: 66px !important;
		height: 66px !important;
		top: 6% !important;
		right: 6% !important;
		bottom: auto !important;
		left: auto !important;
	}
}

@media (max-width: 480px) {
	.blacky-mh__text { font-size: clamp(2rem, 15vw, 3.5rem) !important; }
	.blacky-mh__can { width: 74vw !important; max-width: 250px !important; }
	.blacky-mh__sticker { width: 58px !important; height: 58px !important; right: 5% !important; }
}

/* ==========================================================================
   MOBILE FIX 3 2026-05-20 — Bilder WIEDER rein (klein, Ecken), Dose GRÖSSER
   ========================================================================== */
@media (max-width: 768px) {
	/* Bilder + Badge wieder sichtbar */
	
	/* Bild 1 klein unten links */
	
	/* Bild 2 klein oben rechts */
	
	/* Badge klein unten rechts */
	.blacky-mh__badge {
		width: 58px !important;
		height: 58px !important;
	}
	/* Dose deutlich GRÖSSER auf Mobile */
	.blacky-mh__can {
		width: 86vw !important;
		max-width: 380px !important;
		height: auto !important;
		max-height: 64vh !important;
		top: 44% !important;
	}
}

@media (max-width: 480px) {
	.blacky-mh__can {
		width: 90vw !important;
		max-width: 330px !important;
	}
}

/* ==========================================================================
   MOBILE FIX 4 2026-05-20 — HOHE Specificity schlägt Elementor-Slider
   (Dose groß, Bilder oben in Ecken, Bottom nur Subline+CTAs)
   ========================================================================== */
@media (max-width: 768px) {
	/* Dose GROSS — html body .elementor prefix = specificity (0,3,2) schlägt Slider (0,3,1) */
	html body .elementor .elementor-element .blacky-mh .blacky-mh__can {
		width: 86vw !important;
		max-width: 380px !important;
		height: auto !important;
		max-height: 58vh !important;
		top: 40% !important;
		left: 50% !important;
	}
	/* Bild 1 — oben links, klein */
	
	/* Bild 2 — oben rechts, klein */
	
	/* Sticker — klein, mittig-oben unter den Bildern, NICHT am Rand abgeschnitten */
	html body .elementor .elementor-element .blacky-mh .blacky-mh__sticker {
		width: 62px !important;
		height: 62px !important;
		top: 30% !important;
		right: 5% !important;
		bottom: auto !important;
		left: auto !important;
	}
	/* Badge auf Mobile ausblenden (zu viel im engen Raum) */
	html body .elementor .elementor-element .blacky-mh .blacky-mh__badge { display: none !important; }
	/* Bottom-Bereich sauber: nur Subline + CTAs */
	.blacky-mh__footer { padding-bottom: 28px !important; }
}

@media (max-width: 480px) {
	html body .elementor .elementor-element .blacky-mh .blacky-mh__can {
		width: 90vw !important;
		max-width: 340px !important;
		top: 40% !important;
	}
	}

/* ==========================================================================
   MOBILE FIX 5 2026-05-20 — Dose tiefer + Sticker weg von Dose (sauberer staffeln)
   ========================================================================== */
@media (max-width: 768px) {
	html body .elementor .elementor-element .blacky-mh .blacky-mh__can {
		top: 48% !important;
		max-height: 54vh !important;
	}
	/* Sticker oben rechts, klar getrennt von der Dose */
	html body .elementor .elementor-element .blacky-mh .blacky-mh__sticker {
		top: 8% !important;
		right: 5% !important;
	}
	/* Bilder etwas kleiner + höher, klar in den Ecken */
	
	
	/* Mega-Text Position so dass Dose mittig frei steht */
	.blacky-mh__text--outline { top: 14% !important; }
	.blacky-mh__text--fill    { bottom: 24% !important; }
}

/* ==========================================================================
   MOBILE FIX 6 2026-05-20 — Dose-Container PORTRAIT (hoch) statt height:auto
   (height:auto machte Container flach 340x170 -> Dose winzig)
   ========================================================================== */
@media (max-width: 768px) {
	html body .elementor .elementor-element .blacky-mh .blacky-mh__can {
		width: 80vw !important;
		max-width: 360px !important;
		height: 56vh !important;      /* HOHER Portrait-Container für die hohe Dose */
		max-height: 56vh !important;
		top: 46% !important;
		left: 50% !important;
	}
}
@media (max-width: 480px) {
	html body .elementor .elementor-element .blacky-mh .blacky-mh__can {
		width: 86vw !important;
		max-width: 330px !important;
		height: 52vh !important;
		max-height: 52vh !important;
	}
}

/* ==========================================================================
   MOBILE FIX 7 2026-05-20 — Dose tiefer, Bild 1 weiter runter-links
   ========================================================================== */
@media (max-width: 768px) {
	html body .elementor .elementor-element .blacky-mh .blacky-mh__can {
		top: 52% !important;
	}
	
}

/* ==========================================================================
   MOBILE FIX 8 2026-05-20 — Bilder Transform neutralisieren, sauber positioniert
   (left:0% + Parallax-Transform schob Bild 1 off-screen auf x:-207)
   ========================================================================== */
@media (max-width: 768px) {
	
	
}

/* ==========================================================================
   IMAGE BASE POSITIONS RESTORED 2026-05-20 — Desktop-Standardposition
   (responsive Controls überschreiben das per Gerät via !important)
   ========================================================================== */
.blacky-mh__image--1 {
	bottom: 6%;
	left: 3%;
	top: auto;
	right: auto;
	transform:
		translate3d(calc(var(--mh-scroll, 0) * -180px), calc(var(--mh-scroll, 0) * -180px), 0)
		rotate(calc(-7deg + var(--mh-scroll, 0) * -15deg))
		scale(calc(1 - var(--mh-scroll, 0) * 0.18));
	opacity: calc(1 - var(--mh-scroll, 0) * 1.8);
}
.blacky-mh__image--2 {
	top: 11%;
	right: 4%;
	bottom: auto;
	left: auto;
	transform:
		translate3d(calc(var(--mh-scroll, 0) * 180px), calc(var(--mh-scroll, 0) * -180px), 0)
		rotate(calc(7deg + var(--mh-scroll, 0) * 15deg))
		scale(calc(1 - var(--mh-scroll, 0) * 0.18));
	opacity: calc(1 - var(--mh-scroll, 0) * 1.8);
}

/* ==========================================================================
   MOBILE IMAGE DEFAULTS 2026-05-20 — größer + Bild 1 weiter unten
   (normale Specificity -> Elementor responsive Controls überschreiben das)
   ========================================================================== */
@media (max-width: 768px) {
	.blacky-mh__image--1 {
		width: 38vw !important;
		max-width: 165px !important;
		top: 52% !important;
		bottom: auto !important;
		left: 1% !important;
		right: auto !important;
		transform: rotate(-5deg) !important;
	}
	.blacky-mh__image--2 {
		width: 38vw !important;
		max-width: 165px !important;
		top: 13% !important;
		bottom: auto !important;
		right: 1% !important;
		left: auto !important;
		transform: rotate(5deg) !important;
	}
}
@media (max-width: 480px) {
	.blacky-mh__image--1 { width: 42vw !important; max-width: 150px !important; top: 56% !important; }
	.blacky-mh__image--2 { width: 42vw !important; max-width: 150px !important; top: 11% !important; }
}

/* ==========================================================================
   MOBILE IMAGE SIZE FORCE 2026-05-20 — hohe Specificity schlägt alten Slider-Wert
   ========================================================================== */
@media (max-width: 768px) {
	html body .elementor .elementor-element .blacky-mh .blacky-mh__image--1,
	html body .elementor .elementor-element .blacky-mh .blacky-mh__image--2 {
		width: 38vw !important;
		max-width: 165px !important;
	}
}
@media (max-width: 480px) {
	html body .elementor .elementor-element .blacky-mh .blacky-mh__image--1,
	html body .elementor .elementor-element .blacky-mh .blacky-mh__image--2 {
		width: 42vw !important;
		max-width: 150px !important;
	}
}

/* ==========================================================================
   BLACKY BUTTON — handgezeichneter Marker-Button + Text-Slide-Hover
   Geteiltes Komponenten-CSS: "Blacky Button"-Widget UND Hero-CTAs.
   ========================================================================== */
.blacky-btn {
	--bb-ink:      #0d0d0f;
	--bb-paper:    #f4f4f2;
	--bb-stroke:   #f4f4f2;
	--bb-stroke-w: 3px;
	--bb-text:     #f4f4f2;
	--bb-radius:   30px;
	--bb-lift:     5px;
	--bb-slide:    0.42s;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 16px 34px;
	cursor: pointer;
	background: transparent;
	border: none;
	color: var(--bb-text);
	font-family: var(--blacky-body-font, 'Outfit'), sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1);
	-webkit-tap-highlight-color: transparent;
}
/* Handgezeichnete Kante: SVG-Rough-Filter auf Pseudo-Element (#blacky-rough).
   So bleibt der Text scharf UND es skaliert mit jeder Größe/Textlänge. */
.blacky-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--bb-ink);
	border: var(--bb-stroke-w) solid var(--bb-stroke);
	border-radius: var(--bb-radius);
	filter: url(#blacky-rough);
}
.blacky-btn:hover { transform: translateY(calc(var(--bb-lift) * -1)); }
.blacky-btn:active { transform: translateY(-1px); }

/* Fenster mit fixer Höhe — Text klippt oben/unten */
.blacky-btn__label { position: relative; z-index: 2; display: block; overflow: hidden; height: 1.25em; }
/* Cursor-Fix: ohne explizites pointer auf die Kinder zeigt der Browser ueber
   dem Text-Inhalt den I-Beam (text). Erzwingt Hand-Cursor ueber dem ganzen Button.
   !important damit es gegen die Cursor-Reset-Regeln gewinnt. */
.blacky-btn, .blacky-btn * { cursor: pointer !important; }
.blacky-btn[disabled], .blacky-btn[disabled] * { cursor: not-allowed !important; }
.blacky-btn__swap  { display: flex; flex-direction: column; transition: transform var(--bb-slide) cubic-bezier(0.6,0.02,0.2,1); }
.blacky-btn__swap span { display: block; height: 1.25em; line-height: 1.25em; white-space: nowrap; }
.blacky-btn:hover .blacky-btn__swap { transform: translateY(-1.25em); }

/* Varianten */
.blacky-btn--ghost::before  { background: transparent; }
.blacky-btn--marker .blacky-btn__label { font-family: 'Permanent Marker', cursive; letter-spacing: 0.02em; text-transform: none; }
.blacky-btn--pill   { --bb-radius: 999px; }
.blacky-btn--square { --bb-radius: 6px; }

.blacky-btn-wrap { display: block; }

@media (prefers-reduced-motion: reduce) {
	.blacky-btn, .blacky-btn__swap { transition: none; }
	.blacky-btn:hover { transform: none; }
	.blacky-btn:hover .blacky-btn__swap { transform: none; }
}

/* ---- Hero-CTAs nutzen dieselbe Komponente (.blacky-btn) ---- */
.blacky-mh__ctas .blacky-btn { font-size: clamp(13px, 1vw, 16px); }
@keyframes blacky-btn-pop {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
.blacky-mh.is-entered .blacky-mh__ctas .blacky-btn {
	animation: blacky-btn-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) backwards;
}
.blacky-mh.is-entered .blacky-mh__ctas .blacky-btn:nth-child(1) { animation-delay: 1.35s; }
.blacky-mh.is-entered .blacky-mh__ctas .blacky-btn:nth-child(2) { animation-delay: 1.50s; }
.blacky-mh.no-anim .blacky-mh__ctas .blacky-btn { animation: none; }

/* ==========================================================================
   STICKER (32 MG) — exakte Logo-Blob-Form statt Kreis.
   clip-path clippt automatisch auch den ::after-Glanz auf dieselbe Form.
   Drop-Shadow folgt der Blob-Silhouette (statt eckigem box-shadow).
   ========================================================================== */
.blacky-mh .blacky-mh__sticker {
	clip-path: url(#blacky-blob);
	-webkit-clip-path: url(#blacky-blob);
	border-radius: 0 !important;
	box-shadow: none !important;
	filter: drop-shadow(0 10px 20px rgba(0,0,0,0.45));
}

/* ==========================================================================
   BLACKY SOCIAL ICONS — Widget für Header & überall
   ========================================================================== */
.blacky-social { display: inline-flex; align-items: center; gap: 14px; }
.blacky-social__link {
	color: var(--bb-icon-color, #f4f4f2);
	display: inline-flex;
	transition: color 0.2s ease, transform 0.2s ease;
	line-height: 0;
}
.blacky-social__link:hover { color: var(--bb-icon-hover, #c9ccd2); transform: translateY(-3px); }
.blacky-social__link svg { width: var(--bb-icon-size, 22px); height: var(--bb-icon-size, 22px); display: block; }

/* Marker-Kreis Variante — Icon im handgezeichneten Kreis (Brand-Style) */
.blacky-social--marker .blacky-social__link {
	width: calc(var(--bb-icon-size, 22px) + 24px);
	height: calc(var(--bb-icon-size, 22px) + 24px);
	align-items: center;
	justify-content: center;
	position: relative;
}
.blacky-social--marker .blacky-social__link::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 3px solid currentColor;
	border-radius: 50%;
	filter: url(#blacky-rough);
}
.blacky-social--marker .blacky-social__link svg { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
	.blacky-social__link { transition: none; }
	.blacky-social__link:hover { transform: none; }
}

/* ==========================================================================
   BUTTON HOVER-TEXTFARBE — optional, via --bb-text-hover
   ========================================================================== */
.blacky-btn__label { transition: color 0.22s ease; }
.blacky-btn:hover .blacky-btn__label { color: var(--bb-text-hover, var(--bb-text)); }

/* ==========================================================================
   STICKER — eigene Hintergrund-Grafik (ausgeschnittene Logo-Form als PNG).
   Hintergrund/Clip werden inline (!important) im Render gesetzt; hier nur
   Glanz aus + Drop-Shadow entlang der PNG-Silhouette + Rotation-Variable.
   (BG-Farbe ohne Grafik kommt aus dem bestehenden „Sticker Hintergrund"-Control.)
   ========================================================================== */
.blacky-mh__sticker--has-image { filter: drop-shadow(0 10px 18px rgba(0,0,0,0.4)); }
.blacky-mh__sticker--has-image::after { display: none !important; }

/* ==========================================================================
   BLACKY HEADER — kompletter Header (Logo + Nav + CTA + Social), responsiv.
   Hover-Strich handgezeichnet (#blacky-rough). Mobil: Burger-Dropdown.
   ========================================================================== */
.blacky-header {
	--bh-bg: rgba(10,10,12,0.6);
	--bh-nav: #f4f4f2;
	--bh-nav-hover: #ffffff;
	--bh-underline: #c9ccd2;
	--bh-logo-h: 42px;
	--bh-blur: 8px;
	position: relative;
	background: var(--bh-bg);
	-webkit-backdrop-filter: blur(var(--bh-blur));
	backdrop-filter: blur(var(--bh-blur));
	width: 100%;
	z-index: 50;
	transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.blacky-header.is-sticky { position: sticky; top: 0; z-index: 9998; }
/* Hintergrund erst beim Scrollen (BG-sticky-only) */
.blacky-header--bg-sticky { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.blacky-header--bg-sticky.is-stuck { background: var(--bh-bg); -webkit-backdrop-filter: blur(var(--bh-blur)); backdrop-filter: blur(var(--bh-blur)); }

.blacky-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 16px 28px;
}
.blacky-header__logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--bh-nav); flex-shrink: 0; }
.blacky-header__logo img { max-height: var(--bh-logo-h); width: auto; display: block; }
.blacky-header__logo-ph { font-family: 'Permanent Marker', cursive; font-size: 24px; letter-spacing: 1px; opacity: 0.5; }

.blacky-header__collapse { display: flex; align-items: center; flex: 1; gap: 24px; }
.blacky-nav { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.blacky-nav li { list-style: none; margin: 0; }
.blacky-nav a {
	position: relative; display: inline-block;
	font-family: var(--blacky-body-font, 'Outfit'), sans-serif;
	font-size: 14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--bh-nav); text-decoration: none; opacity: 0.82; padding: 6px 0;
	transition: opacity 0.2s ease, color 0.2s ease;
}
.blacky-nav a:hover { opacity: 1; color: var(--bh-nav-hover); }
.blacky-nav a::after {
	content: ""; position: absolute; left: -2px; right: -2px;
	bottom: calc(var(--bh-ul-gap, 2px) * -1);
	height: var(--bh-ul-h, 3px);
	background: var(--bh-underline); filter: url(#blacky-rough-2); pointer-events: none;
}
.blacky-header--ul-none .blacky-nav a::after { display: none; }
.blacky-header--ul-drawn .blacky-nav a::after { transform: scaleX(0); transform-origin: left center; transition: transform 0.34s cubic-bezier(0.6,0.02,0.2,1); }
.blacky-header--ul-drawn .blacky-nav a:hover::after { transform: scaleX(1); }
.blacky-header--ul-fade .blacky-nav a::after { opacity: 0; transition: opacity 0.25s ease; }
.blacky-header--ul-fade .blacky-nav a:hover::after { opacity: 1; }
.blacky-header--ul-slide .blacky-nav a::after { transform: translateX(-101%); transition: transform 0.3s ease; }
.blacky-header--ul-slide .blacky-nav a:hover::after { transform: translateX(0); }

.blacky-header__right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.blacky-header__right .blacky-btn { padding: 12px 24px; font-size: 13px; }
.blacky-social__img { width: var(--bb-icon-size, 22px); height: var(--bb-icon-size, 22px); object-fit: contain; display: block; }

/* Desktop-Layout via Grid — display:contents macht nav + right zu Grid-Zellen → echtes Zentrieren */
@media (min-width: 901px) {
	.blacky-header__inner { display: grid; align-items: center; }
	.blacky-header__collapse { display: contents; }
	/* alle drei in DERSELBEN Grid-Zeile halten (sonst rutscht Nav/Aktionen bei Logo-mittig nach unten) */
	.blacky-header__logo, .blacky-nav, .blacky-header__right { grid-row: 1; }

	/* Standard: Logo | Nav | Aktionen */
	.blacky-header--layout-standard .blacky-header__inner  { grid-template-columns: auto 1fr auto; }
	.blacky-header--layout-standard .blacky-header__logo   { grid-column: 1; justify-self: start; }
	.blacky-header--layout-standard .blacky-nav            { grid-column: 2; }
	.blacky-header--layout-standard .blacky-header__right  { grid-column: 3; justify-self: end; margin-left: 0; }
	.blacky-header--layout-standard.blacky-header--nav-left   .blacky-nav { justify-self: start; }
	.blacky-header--layout-standard.blacky-header--nav-center .blacky-nav { justify-self: center; }
	.blacky-header--layout-standard.blacky-header--nav-right  .blacky-nav { justify-self: end; }
	/* echtes Seiten-Zentrum bei nav-center: gleiche Außenspalten */
	.blacky-header--layout-standard.blacky-header--nav-center .blacky-header__inner { grid-template-columns: 1fr auto 1fr; }

	/* Logo mittig: Nav links | Logo Mitte | Aktionen rechts */
	.blacky-header--layout-logocenter .blacky-header__inner { grid-template-columns: 1fr auto 1fr; }
	.blacky-header--layout-logocenter .blacky-nav           { grid-column: 1; justify-self: start; }
	.blacky-header--layout-logocenter .blacky-header__logo  { grid-column: 2; justify-self: center; }
	.blacky-header--layout-logocenter .blacky-header__right { grid-column: 3; justify-self: end; margin-left: 0; }
}

.blacky-header__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto; }
.blacky-header__burger span { width: 24px; height: 2px; background: var(--bh-nav); display: block; transition: transform 0.25s ease, opacity 0.2s ease; }
.blacky-header.is-open .blacky-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.blacky-header.is-open .blacky-header__burger span:nth-child(2) { opacity: 0; }
.blacky-header.is-open .blacky-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
	.blacky-header__burger { display: inline-flex; }
	.blacky-header__collapse {
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: flex-start; gap: 18px;
		background: var(--bh-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
		padding: 0 28px;
		max-height: 0; opacity: 0; overflow: hidden;
		transition: max-height 0.42s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, padding 0.42s ease;
		border-top: 1px solid rgba(255,255,255,0);
	}
	.blacky-header.is-open .blacky-header__collapse { max-height: 80vh; opacity: 1; padding: 22px 28px; border-top-color: rgba(255,255,255,0.08); }
	.blacky-nav { flex-direction: column; gap: 14px; margin: 0; width: 100%; position: static; transform: none; }
	.blacky-header--nav-center .blacky-nav, .blacky-header--nav-right .blacky-nav { position: static; transform: none; margin: 0; }
	.blacky-header__right { margin-left: 0; flex-wrap: wrap; }
	.blacky-header.is-open .blacky-nav li { animation: blacky-nav-in 0.4s ease backwards; }
	.blacky-header.is-open .blacky-nav li:nth-child(2) { animation-delay: 0.05s; }
	.blacky-header.is-open .blacky-nav li:nth-child(3) { animation-delay: 0.10s; }
	.blacky-header.is-open .blacky-nav li:nth-child(4) { animation-delay: 0.15s; }
	.blacky-header.is-open .blacky-nav li:nth-child(5) { animation-delay: 0.20s; }
}
@keyframes blacky-nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.blacky-header__collapse, .blacky-nav a::after, .blacky-header__burger span { transition: none; }
	.blacky-header.is-open .blacky-nav li { animation: none; }
}
/* Beim Aufklappen (Burger): Header bekommt dunklen Blur-Hintergrund — auch wenn BG sonst transparent ist */
.blacky-header.is-open { background: var(--bh-bg); -webkit-backdrop-filter: blur(var(--bh-blur)); backdrop-filter: blur(var(--bh-blur)); }

/* Mobile-Dropdown: Hintergrund blurren wie der Header oben.
   WICHTIG (verschachtelter backdrop-filter): Solange das Header-Element SELBST
   einen backdrop-filter hat, wird der Blur des darunter aufgeklappten Dropdowns
   (ein Kind-Element) abgeschnitten — das Kind sampelt nur den (leeren) Backdrop
   des gefilterten Eltern-Elements, daher kam vorher nur die Tönung, kein Blur.
   Lösung: beim offenen Menü den Filter VOM HEADER nehmen, dann greift der eigene
   backdrop-filter des Dropdowns gegen den Seiteninhalt. Die Bar bleibt dunkel
   getönt (--bh-bg), das Dropdown wird gefrostet wie oben. */
@media (max-width: 900px) {
	/* Hintergrund-Scroll sperren solange das Menü offen ist (Standard bei
	   Vollbild-Mobile-Menüs). touch-action/overscroll blocken Touch zuverlässig. */
	html.blacky-nav-locked, html.blacky-nav-locked body { overflow: hidden !important; touch-action: none !important; overscroll-behavior: none !important; }

	/* Filter von Header UND Theme-Wrapper (.pxl-header-elementor-main, bg-blur)
	   wegnehmen solange das Menü „locked" ist. Ein gefilterter Vorfahre würde
	   sonst den Blur des Dropdowns abschneiden.
	   - transition:none -> sofortiges Umschalten, KEIN animate-to-none-Aufblitzen
	     beim Öffnen.
	   - gekoppelt an html.blacky-nav-locked (NICHT .is-open): die Klasse wird vom
	     JS beim Schließen erst verzögert entfernt, damit der Filter während der
	     Schließ-Animation weg bleibt -> KEIN Blur-Flash beim Schließen. */
	html.blacky-nav-locked .blacky-header,
	html.blacky-nav-locked .pxl-header-elementor-main {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		transition: none !important;
	}
	html.blacky-nav-locked .blacky-header { background: transparent !important; }

	/* Logo + Burger über den Frost-Layer der Bar heben. */
	html.blacky-nav-locked .blacky-header__logo,
	html.blacky-nav-locked .blacky-header__burger {
		position: relative;
		z-index: 1;
	}
	/* Bar (Logo/X-Bereich): eigener gefrosteter Layer (KEIN Vorfahre des Dropdowns
	   -> kein nested-filter-Konflikt). Dunkler getönt (User-Wunsch). */
	html.blacky-nav-locked .blacky-header__inner::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background: rgba(10, 10, 12, 0.8);
		-webkit-backdrop-filter: blur(var(--bh-blur));
		backdrop-filter: blur(var(--bh-blur));
		pointer-events: none;
	}
	/* Dropdown gefrostet + dunkler. */
	html.blacky-nav-locked .blacky-header__collapse {
		background: rgba(10, 10, 12, 0.8);
		-webkit-backdrop-filter: blur(var(--bh-blur));
		backdrop-filter: blur(var(--bh-blur));
	}
}
/* Icon-Library-Icon (Font) Größe folgt dem Social-Größe-Regler */
.blacky-social__link i { font-size: var(--bb-icon-size, 22px); line-height: 1; }
.blacky-social--marker .blacky-social__link i { position: relative; z-index: 1; }
/* Defensive: keine fremden Rahmen/Schatten am Header (dünne Linie oben/unten) */
.blacky-header, .elementor-widget-blacky_header > .elementor-widget-container { border: 0; box-shadow: none; }
@media (max-width: 900px) {
	.blacky-header__right { margin-top: 12px; width: 100%; }
}

/* ==========================================================================
   BLACKY HOVER-TITEL (Reveal Titles) — Outline-Titel, Bild klappt beim Hover
   zwischen den Wörtern auf (inline-grid 0fr→1fr) + Zoom/Fade.
   ========================================================================== */
.blacky-reveal {
	--br-stroke: #3a3a40;
	--br-stroke-w: 1px;
	--br-fill: transparent;
	--br-fill-hover: #f4f4f2;
	--br-img-h: 70px;
	--br-speed: 0.45s;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}
.blacky-reveal__title {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	font-family: 'Unbounded', var(--blacky-headline-font, 'Bebas Neue'), sans-serif;
	font-size: clamp(38px, 7vw, 96px);
	font-weight: 800;
	line-height: 1.04;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	text-decoration: none;
	color: var(--br-fill);
	-webkit-text-fill-color: var(--br-fill);
	-webkit-text-stroke: var(--br-stroke-w) var(--br-stroke);
	transition: -webkit-text-fill-color var(--br-speed) ease, color var(--br-speed) ease, opacity 0.3s ease;
	cursor: pointer;
}
.blacky-reveal__title:hover {
	color: var(--br-fill-hover);
	-webkit-text-fill-color: var(--br-fill-hover);
}
/* Gefüllt-Modus: durchgehend gefüllt, keine Outline */
.blacky-reveal--solid .blacky-reveal__title { color: var(--br-fill-hover); -webkit-text-fill-color: var(--br-fill-hover); -webkit-text-stroke: 0; }
/* Andere Titel beim Hover abdunkeln */
.blacky-reveal--dim:hover .blacky-reveal__title:not(:hover) { opacity: 0.32; }
/* Mobil: lange Titel umbrechen lassen statt überlaufen */
@media (max-width: 600px) {
	.blacky-reveal__title { flex-wrap: wrap; }
}
.blacky-reveal__txt { white-space: nowrap; }
/* Bild-Reveal: max-width 0 → Wert klappt die Breite zwischen den Wörtern auf
   (funktioniert inline, anders als der grid-fr-Trick) */
.blacky-reveal__imgwrap {
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	margin: 0 0.14em;
	max-width: 0;
	transition: max-width var(--br-speed) cubic-bezier(.645,.045,.355,1);
}
.blacky-reveal__img {
	height: var(--br-img-h);
	width: auto;
	display: block;
	object-fit: cover;
	border-radius: 10px;
	opacity: 0;
	transform: scale(0.85);
	transition: opacity var(--br-speed) ease, transform var(--br-speed) cubic-bezier(.645,.045,.355,1);
}
.blacky-reveal__title:hover .blacky-reveal__imgwrap { max-width: var(--br-img-maxw, 340px); }
.blacky-reveal__title:hover .blacky-reveal__img { opacity: 1; transform: scale(1); }
/* Effekt-Varianten */
.blacky-reveal--fx-tilt .blacky-reveal__img { transform: scale(0.8) rotate(-6deg); }
.blacky-reveal--fx-tilt .blacky-reveal__title:hover .blacky-reveal__img { transform: scale(1) rotate(-3deg); }
.blacky-reveal--fx-fade .blacky-reveal__img { transform: none; }
.blacky-reveal--fx-fade .blacky-reveal__title:hover .blacky-reveal__img { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.blacky-reveal__imgwrap, .blacky-reveal__img, .blacky-reveal__title { transition: none; }
}

/* ==========================================================================
   UTILITY: handgezeichnete Kante für BELIEBIGE Elemente.
   Im Elementor-Widget unter Erweitert → CSS-Klassen eintragen: "blacky-edge".
   Wirkt auf jeden Rand/Hintergrund (z.B. BR Heading mit eigenem Rahmen).
   ========================================================================== */
/* Highlight-Wort-Boxen → EXAKT die Button-Kante: Rand auf ::before mit vollem
   #blacky-rough-Filter (Text bleibt scharf, weil nur das ::before gefiltert wird). */
.blacky-edge .pxl-title--highlight,
.blacky-edge-alt .pxl-title--highlight { display: inline-block; position: relative; border-color: transparent !important; border-radius: 30px !important; }
.blacky-edge .pxl-title--highlight::before,
.blacky-edge-alt .pxl-title--highlight::before { content: ""; position: absolute; inset: 0; border: 2px solid currentColor; border-radius: 30px; filter: url(#blacky-rough); pointer-events: none; }
.blacky-edge-pill .pxl-title--highlight { display: inline-block; border-radius: 999px !important; }

/* Generische Kante (Container / ganzer Heading-Rahmen) → weiche, leicht
   irreguläre Rundung (kein Filter, sonst wackelt großer Text zu stark). */
.blacky-edge,
.blacky-edge > .elementor-widget-container,
.blacky-edge .pxl-item--title { border-radius: 24px 32px 26px 30px / 32px 24px 30px 26px !important; }

.blacky-edge-alt,
.blacky-edge-alt > .elementor-widget-container,
.blacky-edge-alt .pxl-item--title { border-radius: 32px 24px 30px 26px / 24px 32px 26px 30px !important; }

.blacky-edge-pill,
.blacky-edge-pill > .elementor-widget-container,
.blacky-edge-pill .pxl-item--title { border-radius: 999px !important; }

/* ==========================================================================
   BLACKY SCROLL-SCALE — Center-Bild skaliert beim Scrollen (sticky-pinned),
   Seitenbilder fahren hoch. Fortschritt --scs-p (0..1) kommt aus
   blacky-scroll-scale.js (jeden Frame frisch berechnet → stabil, kein Glitch).
   ========================================================================== */
.blacky-scs {
	--scs-p: 0;
	--scs-start: 0.7;
	--scs-end: 1;
	--scs-center-w: 60vw;
	--scs-side-w: 22vw;
	--scs-col-gap: 28px;
	--scs-travel: 320px;
	--scs-radius: 14px;
	position: relative;
	height: 220vh;
}
.blacky-scs__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.blacky-scs__center {
	position: relative;
	z-index: 2;
	width: var(--scs-center-w);
	max-width: 1200px;
	transform: scale(calc(var(--scs-start) + (var(--scs-end) - var(--scs-start)) * var(--scs-p)));
	transform-origin: center center;
	will-change: transform;
}
.blacky-scs__clink { display: block; text-decoration: none; }
.blacky-scs__img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	border-radius: var(--scs-radius);
}
.blacky-scs__img--ph {
	aspect-ratio: 16 / 9;
	display: flex; align-items: center; justify-content: center;
	background: #1a1a20; color: #777;
	font-family: var(--blacky-body-font, 'Outfit'), sans-serif; font-size: 14px;
}
.blacky-scs__col {
	position: absolute;
	bottom: 0;
	z-index: 1;
	width: var(--scs-side-w);
	max-width: 460px;
	display: flex;
	flex-direction: column;
	gap: var(--scs-col-gap, 28px);
	will-change: transform;
}
.blacky-scs__col-img { width: 100%; height: auto; display: block; border-radius: var(--scs-radius); }
.blacky-scs__col--left  { left: 3%;  transform: translateY(calc((1 - var(--scs-p)) * var(--scs-travel))); }
.blacky-scs__col--right { right: 3%; transform: translateY(calc((1 - var(--scs-p)) * var(--scs-travel) + 80px)); }
/* Titel-Overlay (zwei überlappende Zeilen) */
.blacky-scs__title {
	--scs-tsize: 5.5vw;
	position: absolute; left: 0; right: 0; bottom: -3%;
	text-align: center; line-height: 0.82;
	font-family: 'Unbounded', var(--blacky-headline-font, 'Bebas Neue'), sans-serif;
	font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em;
	pointer-events: none; z-index: 3;
}
.blacky-scs__t1, .blacky-scs__t2 { display: block; font-size: var(--scs-tsize); }
.blacky-scs__t1 { color: #f4f4f2; }
.blacky-scs__t2 { color: #d8401a; margin-top: -0.34em; }

@media (max-width: 768px) {
	.blacky-scs { height: 180vh; }
	.blacky-scs__center { --scs-center-w: 86vw; }
	.blacky-scs__side   { --scs-side-w: 40vw; }
}

/* ==========================================================================
   BLACKY VIDEO SCALE — Video/Bild startet klein + abgerundet und skaliert
   beim Scrollen gepinnt auf Vollbild. Stabiler Ersatz für Stotage
   „BR Section Scale". Fortschritt --vs-p (0..1) kommt aus
   blacky-video-scale.js (jeden Frame frisch → kein Hängen, kein Spillover).
   Breite/Höhe/Rundung werden zwischen Start- und End-Werten interpoliert.
   ========================================================================== */
.blacky-vs {
	--vs-p: 0;        /* Scroll-Fortschritt 0..1 (von JS gesetzt) */
	--vs-ws: 20;      /* Start-Breite in %  */
	--vs-hs: 28;      /* Start-Höhe in %    */
	--vs-rs: 30;      /* Start-Rundung in px */
	--vs-we: 100;     /* End-Breite in %    */
	--vs-he: 100;     /* End-Höhe in %      */
	--vs-re: 0;       /* End-Rundung in px  */
	position: relative;
	height: 200vh;
}
.blacky-vs__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #0a0a0a;
}
/* Der skalierende Rahmen: Breite/Höhe/Rundung interpolieren via --vs-p.
   (start + (end - start) * p) * Einheit  — unitless * Einheit ist gültiges calc(). */
.blacky-vs__frame {
	position: relative;
	width:  calc((var(--vs-ws) + (var(--vs-we) - var(--vs-ws)) * var(--vs-p)) * 1%);
	height: calc((var(--vs-hs) + (var(--vs-he) - var(--vs-hs)) * var(--vs-p)) * 1%);
	border-radius: calc((var(--vs-rs) + (var(--vs-re) - var(--vs-rs)) * var(--vs-p)) * 1px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: width, height;
	box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.blacky-vs__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.blacky-vs__media--ph {
	align-items: center;
	justify-content: center;
	display: flex;
	background: #1a1a20;
	color: #777;
	font-family: var(--blacky-body-font, 'Inter'), sans-serif;
	font-size: 14px;
}
.blacky-vs__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.35;
	z-index: 2;
}
.blacky-vs__text {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6vw;
	pointer-events: none;
}
/* Text erst gegen Ende einblenden (während auf Vollbild skaliert wird) */
.blacky-vs--fade-text .blacky-vs__text {
	opacity: calc((var(--vs-p) - 0.55) / 0.45);
	transform: translateY(calc((1 - var(--vs-p)) * 30px));
}
.blacky-vs__title {
	margin: 0;
	font-family: var(--blacky-headline-font, 'Bebas Neue'), sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 0.92;
	color: #f4f4f2;
}
.blacky-vs__title pc { color: #c0c0c0; }
.blacky-vs__subtitle {
	margin: 0.6em 0 0;
	font-family: var(--blacky-body-font, 'Inter'), sans-serif;
	font-size: clamp(14px, 1.4vw, 20px);
	color: #c2c2c2;
	max-width: 46ch;
}
/* --- Ton-Button (1:1 vom alten BR-Section-Scale-Tweak übernommen) ------ */
.blacky-vs .blacky-bss-sound {
	position: absolute;
	right: 24px;
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	pointer-events: auto;
}
.blacky-vs .blacky-bss-sound__btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	background: rgba(10,10,12,.78);
	color: #fff;
	border: 1.5px solid rgba(255,255,255,.7);
	border-radius: 255px 14px 235px 14px / 14px 235px 14px 255px;
	font-family: "Bebas Neue","Inter",sans-serif;
	font-size: 15px;
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
	margin: 0;
}
.blacky-vs .blacky-bss-sound__btn:hover {
	background: rgba(10,10,12,.95);
	border-color: #fff;
	transform: translateY(-2px);
}
.blacky-vs .blacky-bss-sound__btn svg { flex: 0 0 20px; display: block; }
.blacky-vs .blacky-bss-sound__lbl { line-height: 1; }
/* Active-State (Ton an): invertiert weiss */
.blacky-vs .blacky-bss-sound.is-on .blacky-bss-sound__btn {
	background: rgba(255,255,255,.96);
	color: #0a0a0a;
	border-color: #fff;
}
.blacky-vs .blacky-bss-sound.is-on .blacky-bss-sound__btn:hover { background: #fff; }
/* Wenn Ton an ist: visuelles Hint dass Klick irgendwo = stumm */
.blacky-vs__sticky:has(.blacky-bss-sound.is-on) { cursor: pointer; }

@media (max-width: 768px) {
	.blacky-vs { height: 170vh; }
	.blacky-vs { --vs-ws: 60; --vs-hs: 22; }
}
@media (max-width: 720px) {
	.blacky-vs .blacky-bss-sound { right: 12px; }
	.blacky-vs .blacky-bss-sound__btn { padding: 10px 16px; font-size: 13px; }
	.blacky-vs .blacky-bss-sound__btn .blacky-bss-sound__lbl { display: none; }
}

/* ==========================================================================
   PERFORMANCE / LOADING-FLASH FIX (2026-05-29)
   Verhindert weisses Flackern wenn Three.js noch nicht initialisiert ist.
   Canvas hat alpha:true -> der DARUNTERLIEGENDE Container muss dunkel sein.
   Plus Hardware-Acceleration-Hints fuer fluessiges Scrollen.
   ========================================================================== */
.blacky-mh,
.blacky-mh__can,
.blacky-pi__main {
	background-color: #0a0a0a;
}
/* Explicit transparent statt Browser-Default (manche Browser malen Canvas
   initial weiss bevor der erste GL-Frame kommt). */
.blacky-mh canvas,
.blacky-pi__main canvas,
canvas.blacky-canvas { background: transparent; }

/* content-visibility:auto wieder raus (2026-05-29) — hatte die Scroll-Hoehen-
   Berechnung des Stotage Image-Scroll-Widgets verfaelscht (Mittelbild-Tweak
   greift dann nicht mehr richtig). Performance-Win war es nicht wert. */

/* iOS Safari Momentum-Scroll + Overscroll-Behaviour fuer fluessiges Scrollen.
   -webkit-overflow-scrolling:touch ist auf body wichtig wenn der Body je
   overflow-scroller wird (z.B. bei Nav-Open). */
html { -webkit-text-size-adjust: 100%; }
body {
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: none;
}

/* CRITICAL fuer iOS Safari: Canvas darf vertikalen Page-Scroll NICHT abfangen.
   touch-action: pan-y laesst vertikale Touch-Drags durch den Canvas zur Seite
   durchscrollen, alles andere (zoom/horizontal) bleibt vom Canvas gehandelt.
   Wenn das fehlt, kann iOS Safari beim Touch-Down auf dem 3D-Modell die
   ganze Seite nicht mehr scrollen. */
.blacky-mh canvas,
.blacky-pi__main canvas,
canvas.blacky-canvas {
	touch-action: pan-y;
}