/* ============================================================================
 * Boots On! — Neon-Nav-Overlay (Vegas-Style, 6 Sektionen)
 *
 * ANSATZ: KEINE Modifikation des Original-Headers oder Heros.
 * Die 6 Schilder werden absolute-positioniert INNERHALB des originalen
 * .bootson-header (der ist sowieso position:relative) und schweben so wie
 * Neonschilder an einer Wand um das existierende Logo.
 *
 * Reihenfolge:
 *   Top-Row:    1. Live-Dates    2. Music-Videos    3. Socials
 *   Bottom-Row: 4. News          5. Band            6. Setlist
 *
 * Revert: `wp option update bootson_neon_nav_enabled 0` (Datei kann bleiben)
 * ============================================================================ */

body.neon-nav-active {
	--sign-live-dates:      #FF2E5F;
	--sign-music-videos:    #C026FF;
	--sign-socials:         #00E5FF;
	--sign-news:            #FFD89D;
	--sign-band:            #FFB728;
	--sign-setlist:         #42FFB5;
}

/* Original-Header bekommt NUR overflow:visible damit Schilder, die über den
 * Header-Rand hinausragen, sichtbar bleiben. Sonst: 100% original. */
body.neon-nav-active .bootson-header {
	overflow: visible !important;
	z-index: 999;
}

/* ============================================================================
 * Base-Sign (gemeinsame Mechanik) — alle als position:absolute Overlay
 * ============================================================================ */

body.neon-nav-active .neon-nav-sign {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 250ms ease;
	will-change: transform, filter;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	line-height: 1;
	white-space: nowrap;
	isolation: isolate;
	z-index: 1000;  /* über dem Logo-Background, unter dem Lang-Switcher (1001) */
}
body.neon-nav-active .neon-nav-sign:hover {
	transform: var(--hover-transform, scale(1.05)) !important;
	filter: brightness(1.15);
	z-index: 1002;
}
/* Wand-Light-Spill (Sign färbt das Logo/Wand dahinter ein) */
body.neon-nav-active .neon-nav-sign::before {
	content: '';
	position: absolute;
	inset: -40px;
	background: radial-gradient(ellipse at center, var(--wall-spill, transparent) 0%, transparent 65%);
	filter: blur(18px);
	z-index: -1;
	pointer-events: none;
	opacity: 0.65;
}

/* ============================================================================
 * SIGN 1: LIVE-DATES — top-left, hot pink Vegas-Marquee
 * ============================================================================ */
body.neon-nav-active .neon-nav-sign--live-dates {
	top: 20px;
	left: 4%;
	font-family: 'Bungee Shade', cursive;
	font-size: 26px;
	letter-spacing: 0.04em;
	color: #FFEEF3;
	padding: 14px 22px 10px;
	transform: rotate(-5deg);
	--hover-transform: rotate(-5deg) translateY(-3px) scale(1.05);
	--wall-spill: rgba(255,46,95,0.55);
	background: radial-gradient(ellipse at center, rgba(40,8,16,0.6) 0%, rgba(15,5,8,0.9) 100%);
	border: 4px double var(--sign-live-dates);
	border-radius: 5px;
	box-shadow:
		0 14px 28px rgba(0,0,0,0.6), 0 6px 12px rgba(0,0,0,0.4),
		0 0 6px var(--sign-live-dates), 0 0 14px var(--sign-live-dates),
		0 0 30px rgba(255,46,95,0.6), 0 0 60px rgba(255,46,95,0.3),
		inset 0 0 12px rgba(255,46,95,0.4), inset 0 0 24px rgba(255,46,95,0.2);
	text-shadow:
		0 0 1px #fff, 0 0 3px #fff,
		0 0 8px var(--sign-live-dates), 0 0 18px var(--sign-live-dates), 0 0 32px var(--sign-live-dates);
	animation-name: bo-neon-flicker-a;
	animation-duration: 3.1s;
	animation-delay: -0.4s;
}

/* ============================================================================
 * SIGN 2: MUSIC-VIDEOS — top-center, magenta TV-Cabinet
 * ============================================================================ */
body.neon-nav-active .neon-nav-sign--music-videos {
	top: 18px;
	left: 50%;
	font-family: 'Monoton', cursive;
	font-size: 28px;
	letter-spacing: 0.08em;
	color: #F9DCFF;
	padding: 14px 22px 12px;
	transform: translateX(-50%) rotate(2deg);
	--hover-transform: translateX(-50%) rotate(2deg) translateY(-3px) scale(1.06);
	--wall-spill: rgba(192,38,255,0.55);
	background: radial-gradient(ellipse at center, rgba(40,8,50,0.7) 0%, rgba(15,5,20,0.9) 100%);
	border: 3px solid var(--sign-music-videos);
	border-radius: 18px;
	box-shadow:
		0 14px 28px rgba(0,0,0,0.6), 0 6px 12px rgba(0,0,0,0.4),
		0 0 6px var(--sign-music-videos), 0 0 14px var(--sign-music-videos),
		0 0 32px rgba(192,38,255,0.6), 0 0 60px rgba(192,38,255,0.3),
		inset 0 0 14px rgba(192,38,255,0.35), inset 0 0 26px rgba(192,38,255,0.18);
	text-shadow:
		0 0 1px #fff, 0 0 3px #fff,
		0 0 8px var(--sign-music-videos), 0 0 18px var(--sign-music-videos), 0 0 32px var(--sign-music-videos);
	animation-name: bo-neon-flicker-c;
	animation-duration: 3.3s;
	animation-delay: -2.1s;
}

/* ============================================================================
 * SIGN 3: SOCIALS — top-right, cyan Hexagon
 * (etwas tiefer + nach links versetzt, damit kein Konflikt mit dem
 *  originalen Lang-Switcher der bei top:20,right:20 sitzt)
 * ============================================================================ */
body.neon-nav-active .neon-nav-sign--socials {
	top: 70px;
	right: 4%;
	font-family: 'Audiowide', 'Limelight', cursive;
	font-size: 24px;
	letter-spacing: 0.06em;
	color: #DFFFFF;
	padding: 14px 24px 10px;
	transform: rotate(-2deg);
	--hover-transform: rotate(-2deg) translateY(-3px) scale(1.06);
	--wall-spill: rgba(0,229,255,0.55);
	background: radial-gradient(ellipse at center, rgba(0,30,40,0.7) 0%, rgba(0,15,20,0.9) 100%);
	border: 3px solid var(--sign-socials);
	border-radius: 4px;
	clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
	box-shadow:
		0 0 6px var(--sign-socials), 0 0 14px var(--sign-socials),
		0 0 30px rgba(0,229,255,0.6), 0 0 60px rgba(0,229,255,0.3),
		inset 0 0 14px rgba(0,229,255,0.35), inset 0 0 26px rgba(0,229,255,0.18);
	text-shadow:
		0 0 1px #fff, 0 0 3px #fff,
		0 0 8px var(--sign-socials), 0 0 18px var(--sign-socials), 0 0 32px var(--sign-socials);
	filter: drop-shadow(0 14px 28px rgba(0,0,0,0.6)) drop-shadow(0 4px 10px rgba(0,0,0,0.4));
	animation-name: bo-neon-flicker-b;
	animation-duration: 2.7s;
	animation-delay: -1.3s;
}

/* ============================================================================
 * SIGN 4: NEWS — bottom-left, cream-amber Newspaper-Style
 * ============================================================================ */
body.neon-nav-active .neon-nav-sign--news {
	bottom: 20px;
	left: 4%;
	font-family: 'Cinzel', serif;
	font-weight: 900;
	font-size: 22px;
	letter-spacing: 0.18em;
	color: #FFF6E0;
	padding: 12px 36px 10px;
	transform: rotate(4deg);
	--hover-transform: rotate(4deg) translateY(-3px) scale(1.05);
	--wall-spill: rgba(255,216,157,0.55);
	background: radial-gradient(ellipse at center, rgba(50,30,5,0.7) 0%, rgba(15,8,2,0.9) 100%);
	border-top: 3px solid var(--sign-news);
	border-bottom: 3px solid var(--sign-news);
	border-left: 1px solid var(--sign-news);
	border-right: 1px solid var(--sign-news);
	box-shadow:
		0 14px 28px rgba(0,0,0,0.6), 0 6px 12px rgba(0,0,0,0.4),
		0 0 4px var(--sign-news), 0 0 12px var(--sign-news),
		0 0 28px rgba(255,216,157,0.55), 0 0 52px rgba(255,216,157,0.25),
		inset 0 0 12px rgba(255,216,157,0.3);
	text-shadow:
		0 0 1px #fff, 0 0 3px #fff,
		0 0 8px var(--sign-news), 0 0 18px var(--sign-news), 0 0 32px var(--sign-news);
	animation-name: bo-neon-flicker-d;
	animation-duration: 3.3s;
	animation-delay: -0.8s;
}

/* ============================================================================
 * SIGN 5: BAND — bottom-center, warm gold-orange Allura-Cursive
 * ============================================================================ */
body.neon-nav-active .neon-nav-sign--band {
	bottom: 14px;
	left: 50%;
	font-family: 'Allura', cursive;
	font-size: 52px;
	color: #FFF1C9;
	padding: 8px 18px 6px;
	transform: translateX(-50%) rotate(-3deg);
	--hover-transform: translateX(-50%) rotate(-3deg) translateY(-3px) scale(1.06);
	--wall-spill: rgba(255,183,40,0.55);
	text-shadow:
		0 0 1px #fff, 0 0 3px #fff,
		0 0 8px var(--sign-band), 0 0 18px var(--sign-band),
		0 0 32px var(--sign-band), 0 0 60px rgba(255,183,40,0.6);
	animation-name: bo-neon-flicker-a;
	animation-duration: 2.9s;
	animation-delay: -1.7s;
}
body.neon-nav-active .neon-nav-sign--band::after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 12%; right: 12%;
	height: 0;
	border-top: 2px solid var(--sign-band);
	border-radius: 50% 50% 50% 50% / 100% 100% 0 0;
	box-shadow:
		0 -2px 4px var(--sign-band),
		0 -6px 14px rgba(255,183,40,0.7),
		0 -10px 28px rgba(255,183,40,0.4);
	transform: rotate(-1deg);
}

/* ============================================================================
 * SIGN 6: SETLIST — bottom-right, mint green Cinzel-Italic
 * ============================================================================ */
body.neon-nav-active .neon-nav-sign--setlist {
	bottom: 20px;
	right: 4%;
	font-family: 'Cinzel', serif;
	font-style: italic;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.12em;
	color: #DFFFEC;
	padding: 12px 40px 10px;
	transform: rotate(5deg);
	--hover-transform: rotate(5deg) translateY(-3px) scale(1.05);
	--wall-spill: rgba(66,255,181,0.55);
	background: radial-gradient(ellipse at center, rgba(10,30,20,0.7) 0%, rgba(5,15,10,0.9) 100%);
	border: 3px solid var(--sign-setlist);
	border-radius: 6px;
	box-shadow:
		0 14px 28px rgba(0,0,0,0.6), 0 6px 12px rgba(0,0,0,0.4),
		0 0 4px var(--sign-setlist), 0 0 12px var(--sign-setlist),
		0 0 28px rgba(66,255,181,0.6), 0 0 52px rgba(66,255,181,0.3),
		inset 0 0 12px rgba(66,255,181,0.3);
	text-shadow:
		0 0 1px #fff, 0 0 3px #fff,
		0 0 8px var(--sign-setlist), 0 0 18px var(--sign-setlist), 0 0 32px var(--sign-setlist);
	animation-name: bo-neon-flicker-c;
	animation-duration: 2.7s;
	animation-delay: -2.4s;
}
body.neon-nav-active .neon-nav-note-l,
body.neon-nav-active .neon-nav-note-r {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: var(--sign-setlist);
	text-shadow: 0 0 6px var(--sign-setlist), 0 0 14px var(--sign-setlist);
	font-style: normal;
}
body.neon-nav-active .neon-nav-note-l { left: 12px; }
body.neon-nav-active .neon-nav-note-r { right: 12px; }

/* ============================================================================
 * Scroll-Hint unter dem Header — als position:absolute am unteren Rand
 * (absolut innerhalb des Headers, am unteren Rand)
 * ============================================================================ */
body.neon-nav-active .neon-nav-hint {
	position: absolute;
	bottom: -38px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255,255,255,0.45);
	font-family: 'Roboto Slab', Georgia, serif;
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 700;
	z-index: 1000;
	pointer-events: none;
	white-space: nowrap;
	animation: bo-neon-hint-bounce 2.5s ease-in-out infinite;
}
@keyframes bo-neon-hint-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 6px); }
}

/* ============================================================================
 * Flicker-Animations
 * ============================================================================ */
@keyframes bo-neon-flicker-a {
	0%,14%,17%,49%,64%,100%{opacity:1} 15%{opacity:0.7} 16%{opacity:0.95}
	50%{opacity:0.55} 52%{opacity:1} 65%{opacity:0.85} 82%{opacity:0.5} 84%{opacity:1}
}
@keyframes bo-neon-flicker-b {
	0%,8%,27%,41%,73%,100%{opacity:1} 9%{opacity:0.6} 11%{opacity:0.9}
	28%{opacity:0.4} 30%{opacity:1} 42%{opacity:0.8} 74%{opacity:0.65} 76%{opacity:1}
}
@keyframes bo-neon-flicker-c {
	0%,33%,47%,68%,89%,100%{opacity:1} 34%{opacity:0.5} 36%{opacity:0.9}
	48%{opacity:0.75} 69%{opacity:0.4} 71%{opacity:1} 90%{opacity:0.6} 93%{opacity:1}
}
@keyframes bo-neon-flicker-d {
	0%,5%,39%,56%,81%,100%{opacity:1} 6%{opacity:0.85} 40%{opacity:0.55} 42%{opacity:1}
	57%{opacity:0.7} 59%{opacity:0.95} 82%{opacity:0.5} 85%{opacity:1}
}

/* ============================================================================
 * Mobile — Header ist nur 212px hoch, Schilder müssen viel kleiner sein
 * ============================================================================ */
@media (max-width: 880px) {
	body.neon-nav-active .neon-nav-sign--live-dates    { top: 8px;  left: 2%;  font-size: 14px; padding: 8px 12px 6px; }
	body.neon-nav-active .neon-nav-sign--music-videos  { top: 8px;  font-size: 14px; padding: 8px 12px 6px; }
	body.neon-nav-active .neon-nav-sign--socials       { top: 60px; right: 2%; font-size: 12px; padding: 8px 14px 6px; }
	body.neon-nav-active .neon-nav-sign--news          { bottom: 8px; left: 2%;  font-size: 11px; padding: 6px 18px 4px; letter-spacing: 0.1em; }
	body.neon-nav-active .neon-nav-sign--band          { bottom: 4px; font-size: 28px; padding: 2px 12px; }
	body.neon-nav-active .neon-nav-sign--setlist       { bottom: 8px; right: 2%; font-size: 12px; padding: 6px 22px 4px; letter-spacing: 0.08em; }
	body.neon-nav-active .neon-nav-hint                { bottom: -28px; font-size: 9px; letter-spacing: 0.25em; }
}

@media (prefers-reduced-motion: reduce) {
	body.neon-nav-active .neon-nav-sign { animation: none !important; }
}

/* ============================================================================
 * BOOKING-SECTION-GRADIENT (Restoration eines verloren gegangenen Backgrounds)
 *
 * Die Booking-CTA-Section ganz unten auf der Seite hatte mal einen Rot-Blau-
 * Verlauf-Hintergrund den Tom erinnert. Aktuell zeigt sie nur die Body-Brick-
 * Wand durch — daher hier wieder als linear-gradient mit Brand-Pink
 * (#F2295B) → Logo-Blau (#1EA1FA). Diagonal 135°.
 *
 * WICHTIG: Spezifität muss höher sein als Elementors Lazy-Load-Regel
 *   .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload)
 * (= 5 Klassen-Spezifität). Mit allen Element-Klassen gechained kommen wir
 * auf 6 Klassen und gewinnen.
 *
 * Nicht gescoped auf body.neon-nav-active — soll auch bei deaktivierter
 * Neon-Nav greifen weil das ein Restaurations-Fix vom Original-Look ist.
 * ============================================================================ */
.bootson-elem-element.bootson-elem-element-b7ae0b0.e-con-full.e-flex.e-con.e-parent {
	background-image: linear-gradient(135deg,
		rgba(242,41,91,0.65) 0%,
		rgba(180,40,90,0.45) 35%,
		rgba(40,70,150,0.45) 65%,
		rgba(30,140,250,0.65) 100%
	) !important;
}