/* ============================================================================
* Boots On! — Neon-Nav LAYOUT-VARIANTE 2 · „Neon-Menüleiste"
*
* Idee: Maximales Aufräumen. Das Logo wird gross + zentriert OBEN als Held
* platziert — nichts überlappt es. Darunter liegen die 7 Schilder in einer
* sauberen, gleichmässig verteilten Menüleiste: EINE Reihe à 7, alle auf
* EXAKT gleicher HÖHE (Aspect-Unterschiede über height statt width neutral-
* isiert), kein Tilt, gemeinsame Baseline — wie eine echte Neon-Menüleiste.
*
* Scope: body.neon-nav-active.neon-var-2 (3 Klassen → schlägt die Basis).
* Wo die Basis !important nutzt (Header-Height, Logo BG/Mask), nutzen wir es
* ebenfalls. Logo-Background + die zwei Flicker-Masken (::before rot /
* ::after blau) werden SYNCHRON auf dieselbe Size/Position gesetzt, sonst
* verläuft der Neon-Flicker.
* ============================================================================ */
/* ----------------------------------------------------------------------------
* NEON FRONT-GLOW (Desktop + Mobile gemeinsam)
* Echtes Neon strahlt nach VORNE über die Röhren und blutet nach aussen — nicht
* nur ein Halo dahinter. Daher legen wir eine zweite, unscharf-aufgehellte Kopie
* des Schilds als ::after VOR das ![]()
und mischen sie additiv (screen). Die
* Bildquelle ist die per PHP am gesetzte CSS-Variable --sign-img.
* pointer-events:none -> der Link darunter bleibt klickbar.
* ----------------------------------------------------------------------------*/
body.neon-nav-active.neon-var-2 .neon-nav-sign::after {
content: "";
position: absolute;
inset: -12%;
background: var(--sign-img) center / contain no-repeat;
filter: blur(6px) brightness(1.5) saturate(1.3);
mix-blend-mode: screen;
opacity: 0.30; /* dezenter Front-Glow (Tom-Wunsch: ~30%) */
pointer-events: none;
z-index: 4;
}
/* ----------------------------------------------------------------------------
* DESKTOP (min-width: 768px)
* Header höher: Logo-Hero-Zone oben + Menüleiste-Streifen unten.
* ----------------------------------------------------------------------------*/
@media (min-width: 768px) {
/* Header-Höhe: grosses Logo (560px) oben + ~150px Menüleiste darunter. */
body.neon-nav-active.neon-var-2 .bootson-header {
height: 760px !important;
overflow: visible !important;
}
/* Logo gross + oben angedockt. Alle drei Layer (BG + rote Maske +
* blaue Maske) auf IDENTISCHE Werte → Flicker bleibt deckungsgleich. */
body.neon-nav-active.neon-var-2 .bootson-header,
body.neon-nav-active.neon-var-2 .bootson-header::before,
body.neon-nav-active.neon-var-2 .bootson-header::after {
background-size: auto 560px !important;
background-position: center top !important;
}
body.neon-nav-active.neon-var-2 .bootson-header::before,
body.neon-nav-active.neon-var-2 .bootson-header::after {
-webkit-mask-size: auto 560px !important;
mask-size: auto 560px !important;
-webkit-mask-position: center top !important;
mask-position: center top !important;
}
/* Lang-Flagge frei + über allem. */
body.neon-nav-active.neon-var-2 .bootson-header__lang {
z-index: 1010 !important;
}
/* --- Menüleiste: gleiche HÖHE für alle Schilder ---------------------- *
* Trick: height am fixieren, img auf height:100% / width:auto →
* jedes Schild exakt gleich hoch, Breite folgt nativem Aspect. So wirkt
* die Leiste uniform trotz unterschiedlicher Seitenverhältnisse.
* Alle Schilder teilen sich EINE Baseline (gemeinsames bottom). */
body.neon-nav-active.neon-var-2 .neon-nav-sign {
top: auto !important;
bottom: 78px !important; /* gemeinsame Baseline der Leiste */
left: auto; right: auto;
/* max-content = DEFINITE Breite (height*aspect), nicht shrink-to-fit:
* verhindert das Clampen rechtsstehender Schilder (z.B. merch @91%),
* deren auto-Breite sonst vom Abstand left→Container-Rand begrenzt würde. */
width: max-content !important;
height: 80px; /* << uniforme Schild-Höhe (an Silhouetten-Breiten angepasst) */
--rot: none;
transform: translateX(-50%); /* horizontal um Ankerpunkt zentriert */
display: flex;
align-items: flex-end; /* Baseline-Ausrichtung */
}
body.neon-nav-active.neon-var-2 .neon-nav-sign img {
width: auto !important;
height: 100% !important;
}
/* Hover: nur Scale, kein Tilt (Leiste bleibt ruhig). */
body.neon-nav-active.neon-var-2 .neon-nav-sign:hover {
transform: translateX(-50%) scale(1.07);
}
/* Horizontale Verteilung — 7 Ankerpunkte (Schild-Mitten) gleichmässig
* über die Breite. Werte als % der Header-Breite; Ränder ~9% Inset,
* damit die Endschilder nicht am Rand kleben. Reihenfolge L→R wie eine
* gelesene Menüzeile. */
body.neon-nav-active.neon-var-2 .neon-nav-sign--live-dates { left: 9.3%; bottom: 78px !important;
--bloom: rgba(255, 86, 30, 0.55); }
body.neon-nav-active.neon-var-2 .neon-nav-sign--music-videos { left: 23.5%; bottom: 78px !important;
--bloom: rgba(0, 211, 211, 0.50); }
body.neon-nav-active.neon-var-2 .neon-nav-sign--socials { left: 35.0%; bottom: 78px !important;
--bloom: rgba(255, 28, 188, 0.55); height: 88px; } /* rundes Badge → etwas grösser für gleiche Mass-Wirkung */
body.neon-nav-active.neon-var-2 .neon-nav-sign--band { left: 47.6%; bottom: 78px !important;
--bloom: rgba(253, 184, 39, 0.58); height: 92px; } /* Band = Centerpiece, am grössten */
body.neon-nav-active.neon-var-2 .neon-nav-sign--news { left: 62.7%; bottom: 78px !important;
--bloom: rgba(255, 176, 56, 0.50); }
body.neon-nav-active.neon-var-2 .neon-nav-sign--setlist { left: 77.1%; bottom: 78px !important;
--bloom: rgba(36, 255, 120, 0.50); }
body.neon-nav-active.neon-var-2 .neon-nav-sign--merch { left: 91.1%; bottom: 78px !important;
--bloom: rgba(190, 111, 254, 0.55); }
/* Band-Hover ebenfalls ohne Tilt. */
body.neon-nav-active.neon-var-2 .neon-nav-sign--band:hover {
transform: translateX(-50%) scale(1.07);
}
/* Etwas kräftigerer, gleichmässiger Bloom für die ruhige Leiste. */
body.neon-nav-active.neon-var-2 .neon-nav-sign img {
filter:
drop-shadow(0 0 10px var(--bloom))
drop-shadow(0 0 26px var(--bloom))
drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}
/* Scroll-Hint näher an die Leiste rücken. */
body.neon-nav-active.neon-var-2 .neon-nav-hint {
bottom: 22px;
}
}
/* ----------------------------------------------------------------------------
* MOBILE (max-width: 767px)
* Gleiche Idee, schmal: Logo gross oben, Schilder als zentrierte Menüliste
* (gleiche Höhe, untereinander zentriert) — ruhig & gestapelt.
* ----------------------------------------------------------------------------*/
@media (max-width: 767px) {
/* Header hoch genug für Logo + 7 gestapelte Schild-Zeilen. */
body.neon-nav-active.neon-var-2 .bootson-header {
height: 860px !important;
overflow: visible !important;
}
body.neon-nav-active.neon-var-2 .bootson-header,
body.neon-nav-active.neon-var-2 .bootson-header::before,
body.neon-nav-active.neon-var-2 .bootson-header::after {
background-size: auto 150px !important;
background-position: center top !important;
}
body.neon-nav-active.neon-var-2 .bootson-header::before,
body.neon-nav-active.neon-var-2 .bootson-header::after {
-webkit-mask-size: auto 150px !important;
mask-size: auto 150px !important;
-webkit-mask-position: center top !important;
mask-position: center top !important;
}
body.neon-nav-active.neon-var-2 .bootson-header__lang {
z-index: 1010 !important;
}
/* Schilder: gleiche Höhe, zentriert gestapelt. height am , img height
* 100% / width auto → uniforme Höhe, kein Clipping am Rand. */
body.neon-nav-active.neon-var-2 .neon-nav-sign {
left: 50% !important;
right: auto !important;
top: auto !important;
width: max-content !important; /* definite Breite (siehe Desktop-Kommentar) */
height: 64px;
--rot: none;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
}
body.neon-nav-active.neon-var-2 .neon-nav-sign img {
width: auto !important;
height: 100% !important;
}
body.neon-nav-active.neon-var-2 .neon-nav-sign:hover {
transform: translateX(-50%) scale(1.05);
}
/* Gestapelte Zeilen — gleichmässiger vertikaler Rhythmus unter dem Logo. */
body.neon-nav-active.neon-var-2 .neon-nav-sign--live-dates { top: 190px !important; bottom: auto; }
body.neon-nav-active.neon-var-2 .neon-nav-sign--music-videos { top: 278px !important; bottom: auto; }
body.neon-nav-active.neon-var-2 .neon-nav-sign--socials { top: 366px !important; bottom: auto; }
body.neon-nav-active.neon-var-2 .neon-nav-sign--band { top: 452px !important; bottom: auto; height: 74px; }
body.neon-nav-active.neon-var-2 .neon-nav-sign--news { top: 548px !important; bottom: auto; }
body.neon-nav-active.neon-var-2 .neon-nav-sign--setlist { top: 636px !important; bottom: auto; }
body.neon-nav-active.neon-var-2 .neon-nav-sign--merch { top: 724px !important; bottom: auto; }
body.neon-nav-active.neon-var-2 .neon-nav-sign--band:hover {
transform: translateX(-50%) scale(1.05);
}
body.neon-nav-active.neon-var-2 .neon-nav-hint { display: none; }
}