/* ========================================================================== Boots On! Block Theme — extra CSS (Elementor pixel-details) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Caveat:wght@400;600&family=Neonderthaw&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&display=swap'); /* ---------- Global helpers ---------- */ :root { --bootson-ducttape: url("../images/DuctTape.png"); --bootson-poster: url("../images/POSTER_TEXTUR-1024x576.jpg"); --bootson-siebdruck:url("../images/Siebdruck-Textur-298x300.webp"); --bootson-bg-overlay: rgba(0,0,0,0.55); } body { background-color: #000; -webkit-font-smoothing: antialiased; /* overflow-x: clip schneidet horizontal-overflow ab (rotierte Header- Glows erzeugen sonst horizontal-Bloat). vertical bleibt scrollbar. */ overflow-x: clip; } /* ========================================================================== PRESS-PAGE — Mirror-Overrides (2026-05-02) ========================================================================== Die Mirror-Press-Seite embeddet das Original-Press-HTML 1:1. Das Markup enthält ohne max-width:100% → bläst Viewport auf ~1880 px (438 px H-Overflow auf 1440-Desktop). Plus diverse Elementor- Container-Widths sind fixed-px statt responsive. -------------------------------------------------------------------------- */ body.bootson-press img, body.bootson-press picture, body.bootson-press video, body.bootson-press iframe { max-width: 100% !important; height: auto; } body.bootson-press .bootson-elem-section, body.bootson-press .bootson-elem-container, body.bootson-press .bootson-elem-row, body.bootson-press .bootson-elem-column, body.bootson-press .bootson-elem-widget-wrap, body.bootson-press .e-con, body.bootson-press .e-con-inner { max-width: 100%; box-sizing: border-box; } body.bootson-press .bootson-elem-widget-image .bootson-elem-image, body.bootson-press .bootson-elem-widget-image-box .bootson-elem-image-box-img, body.bootson-press .wp-block-image, body.bootson-press figure { max-width: 100%; } body.bootson-press .bootson-elem-widget-image img, body.bootson-press .wp-block-image img { display: block; margin-inline: auto; } /* Neon-Logo im Press-Hero darf nie größer als 600 px werden — sonst dominiert es den Bereich und drückt den restlichen Content nach unten. */ body.bootson-press img[src*="Logo-Neon-Neu-1"], body.bootson-press img[alt*="Boots on! Logo"] { max-width: min(600px, 92vw) !important; } /* Press-spezifischer Container — generous padding + zentriert */ body.bootson-press .bootson-elem-page, body.bootson-press .elementor { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); } /* Press-Mobile-Tweaks */ @media (max-width: 759px) { body.bootson-press h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; line-height: 1.2 !important; } body.bootson-press h3 { font-size: clamp(1.2rem, 4.5vw, 1.5rem) !important; } body.bootson-press p, body.bootson-press li { font-size: clamp(0.95rem, 3.6vw, 1.05rem) !important; } body.bootson-press a.bootson-elem-button { min-height: 44px; padding: 12px 18px !important; } } /* ========================================================================== Responsive-Hardening (Mobile-Lesbarkeit + Touch-Targets, 2026-05-02) ========================================================================== Audit-Befunde: 44 Texte < 13px (Show-Tabelle, Venue-Names, Tickets-Links via Elementor-Var f82f9f7=0.9em→0.7em@mobile). 34 Buttons < 40px Höhe (Video-Playlist-Tabs). Hier mit hoher Spezifizität auf lesbare Mindest- werte zwingen — gilt nur ≤ 767px, Desktop bleibt unverändert. */ @media (max-width: 767px) { /* Elementor-Typografie-Variable f82f9f7 (Show-Tabelle Cells) wird im inline-CSS auf 0.7em (≈ 11–12 px) reduziert. Auf Mobile zu klein für barrierearme Lesbarkeit. Override auf 14 px. */ .bootson-elem-kit-7, body.bootson-elem-kit-7, html body.bootson-elem-kit-7 { --e-global-typography-f82f9f7-font-size: 14px !important; --e-global-typography-f82f9f7-line-height: 1.45 !important; } /* Belt-and-braces für Show-Tabelle direkt */ .bootson-shows-section .bootson-elem-heading-title, .bootson-shows-section p.bootson-elem-heading-title, .bootson-shows-section a.bootson-elem-heading-title, .bootson-shows-section span.bootson-elem-heading-title { font-size: 14px !important; line-height: 1.4 !important; } /* Universal Mobile-Floor: kleinere Elementor-Headings auf min. 14 px anheben. max() picks größeren Wert — Headings, die ohnehin größer sind, bleiben unverändert. */ .bootson-elem-widget-heading p.bootson-elem-heading-title, .bootson-elem-widget-heading span.bootson-elem-heading-title, .bootson-elem-widget-heading a.bootson-elem-heading-title { font-size: max(14px, 1em) !important; } /* Show-Tabelle: Tap-Zone auf 44 px direkt am -Tag (Browser- Reichweite). Inline-block + padding macht den Klickbereich groß genug ohne den Visual-Style zu verändern. */ .bootson-elem-widget-heading a.bootson-elem-heading-title, .bootson-elem-heading-title a { display: inline-block; padding-block: 12px; min-height: 44px; line-height: 1.4; box-sizing: border-box; } /* Newspaper Eyebrow/Byline waren auf 9–10 px (gewollt klein im Zeitungs-Look), aber auf Mobile kratzt das an Lesbarkeit. Floor auf 11 px. Newspaper-Title/Headline bleibt unverändert. */ .newspaper__kicker, .newspaper__byline { font-size: max(11px, 0.65rem) !important; } /* Video-Playlist Tab-Buttons: ausreichendes Touch-Target */ .bootson-elem-widget-video-playlist .e-tab-title, .bootson-elem-widget-video-playlist .e-tab-list button, .bootson-elem-widget-video-playlist [role="tab"] { min-height: 44px !important; padding-block: 8px !important; font-size: 14px !important; } /* Generell: alle Buttons bekommen 44px Touch-Target wenn nicht explizit gesetzt — hilft bei vielen kleinen Theme-Buttons. */ button:not([class*="bk-chip"]):not([class*="bk-faq"]):not(.bootson-news-nav), a.bootson-elem-button, a[class*="bootson-"][class*="-btn"] { min-height: 44px; } } /* Aria-hidden Lightbox darf NICHT zur scrollHeight beitragen (auf Booking-Seite teleporting in body) — fix für „leerer Bereich unter Footer" auch im Booking-Kontext. */ .bootson-lightbox[aria-hidden="true"] { visibility: hidden; } .bootson-lightbox[aria-hidden="false"] { visibility: visible; } /* .bootson-elem-33 bekommt overflow:clip damit absolute positionierte Glow-Children NICHT zur document.scrollHeight beitragen können (Bug 2026-05-02: 429px leerer Bereich unter Footer durch rotierte Header-Glow-Bounding-Boxes). Dieser Clip ist jetzt der EINZIGE Bloat-Schutz — .bootson-header selbst ist auf overflow:visible gesetzt (siehe ~Zeile 872) damit die Spotlights nach OBEN über den Header in den padding-top-Bereich von .bootson-elem-33 ragen können. Plus: padding-top gibt dem Logo Atemraum nach oben — und weil die Spotlights jetzt durch dieses Padding hindurchscheinen, entsteht KEIN schwarzer Streifen mehr (Bug 2026-05-04). */ body > .elementor.bootson-elem-33, body > div.bootson-elem-33 { overflow: clip; padding-top: clamp(20px, 2.5vw, 36px); } /* ---------- Section defaults ---------- */ .bootson-section { position: relative; overflow: hidden; } /* ========================================================================== Konsistenter Vertikalrhythmus für alle Top-Level-Sections (Tom-Feedback 2026-05-02). Vorher waren die padding-block-Werte chaotisch (0–186 px). Eine einzige Custom-Property normalisiert den Atemraum zwischen allen Sections — Look bleibt komplett erhalten, nur das Spacing wird sauber. -------------------------------------------------------------------------- */ :root { --bootson-section-rhythm: clamp(48px, 5.5vw, 80px); } .bootson-hero, .bootson-testimonials, .bootson-social, .bootson-news-section, .bootson-shows, .bootson-about, .bootson-band-section, .bootson-booking-section, .bootson-spotlight-host, body > .bootson-elem-33 > .bootson-elem-element.e-parent, body > .bootson-elem-33 > section.bootson-elem-top-section { padding-block: var(--bootson-section-rhythm) !important; } /* Header braucht KEIN top-padding (Logo sitzt schon in .bootson-elem-33s padding-top für Top-Spacing). Footer hat eigene minimale Höhe. */ .bootson-header { padding-block: 0 !important; } .bootson-footer { padding-block: clamp(8px, 1vw, 14px) !important; } /* ========================================================================== Section-Spacing Mobile (Tom-Feedback 2026-05-02) ========================================================================== Auf Mobile (≤767 px) bekommen alle Top-Level-Sections deutlich mehr Atemraum dazwischen — der dichte Desktop-Rhythmus wirkt auf kleinem Screen gequetscht. Greift sowohl auf die hand-gerollten Bootson-Sections als auch auf Elementor-Top-Sections. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .bootson-section, .bootson-news-section, .bootson-band-section, .bootson-testimonials, .bootson-social, .bootson-shows, .bootson-about, .bootson-booking-section, .bootson-elem-top-section, body > .bootson-elem-33 > .bootson-elem-element.e-parent { margin-block: clamp(40px, 10vw, 72px) !important; } /* erste Section direkt nach Header-Logo: kein extra Top-Margin */ .bootson-header + section, .bootson-header + * { margin-top: 0 !important; } } /* Setlist bleibt im nativen Elementor-Mirror-Layout. Das Original stapelt die beiden Papierseiten mobil vertikal und zeigt sie desktop nebeneinander. */ .bootson-section > .wp-block-group, .bootson-section .wp-block-cover__inner-container { position: relative; z-index: 2; } /* Background texture overlay used on many Elementor sections */ .bootson-bg-siebdruck::before { content: ""; position: absolute; inset: 0; background-image: var(--bootson-siebdruck); background-repeat: repeat; opacity: 0.12; pointer-events: none; z-index: 1; mix-blend-mode: screen; } .bootson-bg-poster::before { content: ""; position: absolute; inset: 0; background-image: var(--bootson-poster); background-size: cover; background-position: center; opacity: 0.25; pointer-events: none; z-index: 1; } /* ---------- Ductape decoration (rotated strips) ---------- */ .bootson-ducttape { position: absolute; width: 260px; height: auto; pointer-events: none; z-index: 3; } .bootson-ducttape--tl { top: -18px; left: -20px; transform: rotate(-12deg); } .bootson-ducttape--tr { top: -18px; right: -20px; transform: rotate(18deg); } .bootson-ducttape--bl { bottom: -18px; left: -20px; transform: rotate(-18deg); } .bootson-ducttape--br { bottom: -18px; right: -20px; transform: rotate(14deg); } /* ---------- Hero ---------- */ .bootson-hero h1 { text-shadow: 0 0 12px rgba(242,41,91,0.6), 0 0 40px rgba(0,252,255,0.25); letter-spacing: -0.02em; line-height: 0.95; } .bootson-hero .bootson-tagline { font-family: 'Roboto Slab', Georgia, serif; font-style: italic; letter-spacing: 0.02em; color: #DBDBDB; } /* Hero-Lichtkegel: weicher & breiter. Die Kegel überlappen sich leicht in der Mitte und reichen weit über die Section-Kanten hinaus (-16vw), damit bei Rotation nie ein unbeleuchteter Rand entsteht. Größerer Blur (56px) + sanfter Gradient-Fade (> 92%) lässt die Kanten in's Schwarz auslaufen, statt abrupt zu enden. Nur dezentes Schwenken (±5°) — mehr "flackern" als "wandern". */ /* Hero-Lichtkegel: VON OBEN nach UNTEN leuchtende Deckenspots. KEIN clip-path (= harte Kante). Stattdessen eine längliche Ellipse als radial-gradient, deren Zentrum knapp OBERHALB des Elements liegt → der Gradient läuft von hell (oben) nach vollständig transparent (unten + seitlich) aus. Durch die elliptische Form entsteht die Kegel-Optik ganz natürlich mit komplett weichen Kanten. Rotation um einen Pivot oben schwenkt den Kegel sanft wie ein motorisierter LED-Par. */ .bootson-hero .bootson-glow { position: absolute; top: 0; height: 100%; pointer-events: none; background-color: transparent; mix-blend-mode: screen; /* Stärke deutlich zurückgenommen — Bild/Video bleibt dominant, die Spots sind nur noch ein subtiler Atmosphären-Layer. */ opacity: 0.55; z-index: 1; will-change: transform, filter; } .bootson-hero .bootson-glow--tr { /* Weite reduziert (70vw → 50vw, Offset −8vw → −4vw) und Alpha-Stops gedämpft, damit der Kegel das Heroframe nur akzentuiert. */ right: -4vw; width: 50vw; background: radial-gradient( ellipse 30% 90% at 66% -6%, rgba(0, 252, 255, 0.50) 0%, rgba(0, 252, 255, 0.26) 22%, rgba(0, 252, 255, 0.10) 48%, rgba(0, 252, 255, 0.03) 74%, rgba(0, 252, 255, 0) 100% ); transform-origin: 66% -6%; animation: bootson-cone-sway-hero-cyan 24s ease-in-out -6s infinite; } .bootson-hero .bootson-glow--bl { left: -4vw; width: 50vw; background: radial-gradient( ellipse 30% 90% at 34% -6%, rgba(255, 170, 0, 0.50) 0%, rgba(255, 170, 0, 0.26) 22%, rgba(255, 170, 0, 0.10) 48%, rgba(255, 170, 0, 0.03) 74%, rgba(255, 170, 0, 0) 100% ); transform-origin: 34% -6%; animation: bootson-cone-sway-hero-orange 28s ease-in-out -13s infinite; } /* Hero-Sway: große Schwenk-Amplitude (±12°) für deutliche Bewegung. Farb-Fading bewusst ENTKOPPELT zwischen Cyan und Orange: – Cyan bleibt im BLAU/CYAN/VIOLETT-Spektrum (hue-rotate 0° → +60°): cyan → blau → violett → blau → cyan – Orange bleibt im ROT/ORANGE/MAGENTA-Spektrum (hue-rotate 0° → -80°): orange → rot → pink → rot → orange Da die beiden Hue-Bereiche sich NIRGENDS überschneiden, zeigen Links- und Rechts-Spot NIE gleichzeitig dieselbe Farbe. Die langen Durations (48s/56s) + versetzte Delays (-6s/-13s) sorgen für ein sehr langsames, ruhiges Atmen. */ /* Saubere pendelnde Rotation um den Origin-Punkt (62% -2% / 38% -2%). Nur zwei Rotations-Endpunkte (0%/100% = -18°, 50% = +18°) → das Licht sweept einmal in einem klaren Bogen von links nach rechts und zurück, ohne Zick-Zack-Zwischenschritte. Farbe/Sättigung laufen in einem zweiten Zyklus mit, aber mit verschobenem Peak (35%/65%), damit die Farbmodulation nicht mit dem Rotations-Peak zusammenfällt — das macht die Bewegung lebendiger, ohne synchrones Flackern. */ /* Header-Spots-Animation: die Spots schwenken IMMER nach innen (Richtung Bühnenmitte) und oszillieren nur zwischen zwei Inward-Winkeln. Nie auf gerade/neutral, nie nach außen. - 0%/100%: rotate 35° nach innen (tiefste Inward-Position, „weit auf die Mitte gerichtet") - 50%: rotate 15° nach innen (flachere Inward-Position, „fast senkrecht") Cyan (rechts) → positive Drehung = inward (nach links/Mitte). Orange (links) → negative Drehung = inward (nach rechts/Mitte). Farbe peaked zeitversetzt (35%/65%) damit Drehung und Farbwechsel nicht synchron zucken. */ @keyframes bootson-cone-sway-hero-cyan { 0%, 100% { transform: rotate(35deg); filter: hue-rotate(0deg) saturate(1.5) brightness(1.00); } 35% { filter: hue-rotate(40deg) saturate(1.7) brightness(1.02); } 50% { transform: rotate(15deg); } 65% { filter: hue-rotate(55deg) saturate(1.8) brightness(1.02); } } @keyframes bootson-cone-sway-hero-orange { 0%, 100% { transform: rotate(-35deg); filter: hue-rotate(0deg) saturate(1.5) brightness(1.00); } 35% { filter: hue-rotate(-55deg) saturate(1.7) brightness(1.02); } 50% { transform: rotate(-15deg); } 65% { filter: hue-rotate(-75deg) saturate(1.8) brightness(1.02); } } /* ---------- Testimonials ---------- */ .bootson-testimonials .wp-block-quote { border-left: 3px solid #F2295B; padding: 0.5rem 1.25rem; margin: 0; background: rgba(255,255,255,0.02); border-radius: 2px; } .bootson-testimonials .wp-block-quote p { font-style: italic; font-size: 1.05rem; line-height: 1.5; color: #DBDBDB; } .bootson-testimonials .wp-block-quote cite { display: block; margin-top: 0.75rem; font-style: normal; font-size: 0.85rem; color: #FF3838; text-transform: uppercase; letter-spacing: 0.08em; } /* ---------- Section headings (consistent with Elementor look) ---------- */ .bootson-section-title { font-family: 'Roboto Slab', Georgia, serif !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.04em; color: #FF3838; text-align: center; margin-bottom: 2rem; position: relative; } .bootson-section-title::after { content: ""; display: block; width: 64px; height: 3px; background: #F2295B; margin: 1rem auto 0; } /* ---------- Shows table ---------- */ .bootson-shows .bootson-show-row { border-bottom: 1px solid #272727; padding: 1rem 0; transition: background 0.2s; } .bootson-shows .bootson-show-row:hover { background: rgba(255,56,56,0.04); } .bootson-shows .bootson-show-date { font-family: 'Roboto Slab', Georgia, serif; font-weight: 700; color: #FF3838; font-size: 1.1rem; letter-spacing: 0.02em; } /* ---------- News cards ---------- */ .bootson-news .wp-block-post-title a { color: #FFFFFF !important; text-decoration: none; transition: color 0.2s; } .bootson-news .wp-block-post-title a:hover { color: #FF3838 !important; } .bootson-news .wp-block-post-featured-image img { transition: transform 0.4s ease, filter 0.4s ease; filter: grayscale(30%) contrast(1.05); } .bootson-news .wp-block-post-featured-image:hover img { transform: scale(1.03); filter: grayscale(0%); } /* ---------- Band members ---------- */ .bootson-band .bootson-member { text-align: center; position: relative; transition: transform 0.25s ease; } .bootson-band .bootson-member:hover { transform: translateY(-4px); } .bootson-band .bootson-member img { border-radius: 6px; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 10px 40px rgba(0,0,0,0.6); } .bootson-band .bootson-member h3 { margin-top: 0.75rem; margin-bottom: 0.15rem; font-family: 'Roboto Slab', Georgia, serif; font-weight: 700; color: #FF3838; letter-spacing: 0.04em; text-transform: uppercase; } .bootson-band .bootson-member .bootson-instrument { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: #ACACAC; } /* ---------- Setlist ---------- */ .bootson-setlist table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .bootson-setlist td { padding: 0.55rem 0.75rem; border-bottom: 1px solid #161616; } .bootson-setlist td:first-child { color: #FFFFFF; font-weight: 700; } .bootson-setlist td:last-child { color: #ACACAC; text-align: right; font-style: italic; } /* ---------- Booking CTA ---------- */ .bootson-booking-cta { position: relative; overflow: hidden; } .bootson-booking-cta .wp-block-button__link { padding: 1rem 2.75rem !important; font-size: 1.05rem; box-shadow: 0 8px 30px rgba(242,41,91,0.35); } /* ---------- Buttons global ---------- */ .wp-block-button__link { transition: background-color 0.2s, transform 0.15s; } .wp-block-button__link:hover { transform: translateY(-1px); } /* ---------- Footer ---------- */ footer.wp-block-group { border-top: 1px solid #161616; } /* ---------- Instagram: photorealistic polaroid grid ---------- */ .bootson-polaroid-grid { /* Flex statt Grid, damit bei weniger als 6 Polaroids die verbleibenden Kacheln zentriert werden (statt links zu kleben). flex-basis entspricht dem früheren 6-Spalten-1fr-Anteil (abzüglich 22px Gap). */ display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 22px; width: 100%; max-width: 1400px; margin: 0 auto; padding: 40px 20px 20px; perspective: 1200px; } .bootson-polaroid-grid > .bootson-polaroid { flex: 0 0 calc((100% - 5 * 22px) / 6); max-width: calc((100% - 5 * 22px) / 6); } .bootson-polaroid { all: unset; display: block; cursor: pointer; --rot: 0deg; transform: rotate(var(--rot)); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), filter 0.35s ease; filter: drop-shadow(0 18px 28px rgba(0,0,0,0.55)) drop-shadow(0 4px 8px rgba(0,0,0,0.35)); } .bootson-polaroid:hover, .bootson-polaroid:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.04); z-index: 5; filter: drop-shadow(0 24px 40px rgba(0,0,0,0.7)) drop-shadow(0 8px 14px rgba(0,0,0,0.45)); } .bootson-polaroid__frame { position: relative; padding: 12px 12px 0; background: linear-gradient(180deg, #fdfdf6 0%, #f1ebd9 100%); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), inset 0 -2px 6px rgba(0,0,0,0.06); } .bootson-polaroid__frame::before { /* subtle paper grain */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.4), transparent 40%), radial-gradient(circle at 80% 85%, rgba(0,0,0,0.05), transparent 50%); mix-blend-mode: multiply; border-radius: 2px; pointer-events: none; } .bootson-polaroid__frame::after { /* strip of tape at top */ content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 70px; height: 20px; background: rgba(220, 210, 180, 0.55); box-shadow: 0 2px 6px rgba(0,0,0,0.2); pointer-events: none; backdrop-filter: blur(1px); } .bootson-polaroid__photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #0a0a0a; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35); } .bootson-polaroid__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92) contrast(0.98) sepia(0.06); transition: filter 0.35s ease; } .bootson-polaroid:hover .bootson-polaroid__photo img { filter: saturate(1.05) contrast(1) sepia(0); } .bootson-polaroid__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 32px; text-shadow: 0 2px 8px rgba(0,0,0,0.9); pointer-events: none; opacity: 0.85; } .bootson-polaroid__caption { padding: 10px 10px 18px; text-align: center; font-family: 'Caveat', 'Permanent Marker', 'Comic Sans MS', cursive; font-size: 1.05rem; color: #3a2e1e; letter-spacing: 0.01em; line-height: 1.15; min-height: 2.6em; display: flex; align-items: center; justify-content: center; } .bootson-polaroid__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; opacity: 0.9; max-width: 100%; } .bootson-polaroid__handle { opacity: 0.85; } /* CTA button under grid — mirrors Original "View on Instagram" */ .bootson-ig-cta { margin: 36px auto 0; text-align: center; } .bootson-ig-btn { display: inline-block; padding: 14px 34px; background: linear-gradient(135deg, #F2295B 0%, #FF3838 50%, #FFAA00 100%); color: #fff !important; text-decoration: none; font-family: 'Roboto Slab', Georgia, serif; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.95rem; border-radius: 2px; box-shadow: 0 10px 28px rgba(242,41,91,0.35), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; border: none; cursor: pointer; } .bootson-ig-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(242,41,91,0.5), inset 0 1px 0 rgba(255,255,255,0.35); filter: brightness(1.05); } /* Lightbox */ .bootson-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: flex-start; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; padding: 40px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .bootson-lightbox[aria-hidden="false"] { opacity: 1; pointer-events: auto; } .bootson-lightbox__close { position: absolute; top: 8px; right: 8px; background: #111; border: none; color: #fff; width: 34px; height: 34px; padding: 0; margin: 0; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.35); transition: background 0.2s, transform 0.2s; } .bootson-lightbox__close svg { width: 16px; height: 16px; display: block; } .bootson-lightbox__close:hover { background: #ff0d23; transform: scale(1.08); } .bootson-lightbox__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: min(90vw, 640px); } .bootson-lightbox__polaroid { position: relative; background: linear-gradient(180deg, #fdfdf6 0%, #f1ebd9 100%); padding: 18px 18px 0; box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 8px 16px rgba(0,0,0,0.4); max-width: 100%; transform: rotate(-1deg); } .bootson-lightbox__photo { max-width: 100%; background: #0a0a0a; } .bootson-lightbox__photo img { display: block; width: 100%; height: auto; max-height: 55vh; object-fit: contain; } .bootson-lightbox__caption { padding: 16px 12px 24px; text-align: center; font-family: 'Caveat', cursive; font-size: 1.15rem; line-height: 1.3; color: #2a241a; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } .bootson-lightbox__caption:empty { padding: 14px 8px; } /* Tom 2026-05-05: Desktop nur 5 Polaroids zeigen statt 6 (6. ausblenden). Tablet (max-width 1024) darf 6 zeigen. Mobile zeigt 4 (siehe Mobile-CSS). */ @media (min-width: 1025px) { .bootson-polaroid-grid > .bootson-polaroid:nth-child(n+6) { display: none !important; } } @media (max-width: 1280px) { .bootson-polaroid-grid { gap: 36px 24px; } .bootson-polaroid-grid > .bootson-polaroid { flex: 0 0 calc((100% - 2 * 24px) / 3); max-width: calc((100% - 2 * 24px) / 3); } } @media (max-width: 640px) { /* Tom 2026-05-05: eine Spur kleiner + größerer Rand-Abstand. Vorher gap 16px / padding 14px → gap 22px / padding 26px. Polaroids schrumpfen entsprechend automatisch. */ .bootson-polaroid-grid { gap: 28px 22px; padding: 28px 26px 16px; } .bootson-polaroid-grid > .bootson-polaroid { flex: 0 0 calc((100% - 1 * 22px) / 2); max-width: calc((100% - 1 * 22px) / 2); } .bootson-polaroid__frame { padding: 7px 7px 0; } .bootson-polaroid__caption { font-size: 0.9rem; padding: 7px 7px 12px; } } /* ---------- Responsive ---------- */ @media (max-width: 767px) { .bootson-ducttape { width: 140px; } .bootson-hero h1 { font-size: clamp(3rem, 18vw, 6rem) !important; } .bootson-section-title { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; } } /* ---------- Shows — Trennstrich-Farbe & zentrierte CTA-Zeile ---------- */ /* Elementor rendert border-style:solid ohne border-color → default currentColor = weiss. Wir setzen eine subtile Trennlinie statt voller Weiß. */ .bootson-elem-1404 .bootson-elem-inner-section .bootson-elem-column > .bootson-elem-element-populated { border-color: rgba(255,255,255,0.18) !important; } /* "Konzert in der Nähe wünschen…" im letzten Shows-Row zentrieren (stand auf text-align:start) */ .bootson-elem-1404 .bootson-elem-element-1f1c93d1, .bootson-elem-1404 .bootson-elem-element-1f1c93d1 .bootson-elem-heading-title { text-align: center !important; } /* ---------- Site Logo — Neon-Flicker ---------- */ /* * Das Neon-Logo (Logo-Neon-Neu-1-scaled.webp) soll wie ein Leuchtreklame-Schild * flackern: gelegentliche Aussetzer, sonst sattes rotes Leuchten. * Wendet sich auf die Custom-Logo--Klasse an (`.custom-logo`) und auch * auf das gleiche Neon-Bild im Hero-Container, falls dort verwendet. */ .custom-logo, .bootson-neon-logo { display: inline-block; animation: bootson-neon-flicker 4.5s infinite; filter: drop-shadow(0 0 4px #FF3838) drop-shadow(0 0 12px rgba(255, 13, 35, 0.9)) drop-shadow(0 0 32px rgba(255, 13, 35, 0.55)); will-change: opacity, filter; } /* Header-Logo: Flicker-Glow als zweite Logo-Schicht HINTER dem statischen Original-Background. `isolation: isolate` erzeugt einen eigenen Stacking- Kontext, sodass die Pseudos mit negativem z-index unter dem In-Flow-Content (.e-con-inner) rendern — ohne dass .e-con-inner zum Containing-Block für die absolut positionierten Hero-Glows (59vw cyan/orange) wird. Zwei Selektoren: (a) Home-Page-Mirror (.bootson-elem-element-39eb635) und (b) die refaktorierten Single-Post-/zukünftigen Home-Header (.bootson-header). */ .bootson-elem-33 .bootson-elem-element.bootson-elem-element-39eb635, .bootson-header { position: relative; isolation: isolate; z-index: 999; /* KEIN overflow:clip mehr am Header — die Spotlight-Glows sind .bootson-header-Children mit top:-300px und sollen NACH OBEN aus dem Header herausragen können (sonst entsteht ein schwarzer Streifen über dem Logo, weil padding-top auf .bootson-elem-33 den Header nach unten schiebt aber die Spots im Header bleiben → leerer schwarzer Band). scrollHeight-Bloat-Schutz (bug 2026-05-02) übernimmt jetzt .bootson-elem-33 { overflow:clip } eine Stufe höher (siehe oben ~Zeile 167) — clipt rotierte Glow-Bounding-Boxes ebenso, ohne den Spots den Weg nach oben zu versperren. */ overflow: visible; } /* Farbgetrennte Flicker-Layer mit CSS mask-image: Background ist das volle Original-Logo; die mask-image begrenzt es auf nur die roten bzw. blauen Logo-Pixel. Drop-shadow castet dann den Halo NUR um die sichtbare (nicht-maskierte) Form — also rot nur um rote Teile, blau nur um blaue Teile. Das Element selbst zeigt drunter weiterhin das komplette, scharfe Original-Logo als Basis. */ .bootson-elem-33 .bootson-elem-element.bootson-elem-element-39eb635::before, .bootson-elem-33 .bootson-elem-element.bootson-elem-element-39eb635::after, .bootson-header::before, .bootson-header::after { content: ""; position: absolute; inset: 0; background-image: url("/wp-content/uploads/2023/11/Logo-Neon-Neu-1-scaled.webp"); /* Logo proportional nach unten verschoben (4% der Header-Höhe) — Desktop 500px → 20px, Mobile 212px → ~8.5px. Verhindert, dass das Logo auf kleinen Headern unten abgeschnitten wird. */ background-position: center calc(50% + 4%); background-repeat: no-repeat; background-size: contain; -webkit-mask-position: center calc(50% + 4%); mask-position: center calc(50% + 4%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; will-change: opacity; z-index: 1; } .bootson-elem-33 .bootson-elem-element.bootson-elem-element-39eb635::before, .bootson-header::before { -webkit-mask-image: url("/wp-content/uploads/2023/11/Logo-Neon-red-shape.webp"); mask-image: url("/wp-content/uploads/2023/11/Logo-Neon-red-shape.webp"); animation: bootson-neon-flicker-red 2.7s infinite; filter: drop-shadow(0 0 10px rgba(255, 30, 40, 0.95)); } .bootson-elem-33 .bootson-elem-element.bootson-elem-element-39eb635::after, .bootson-header::after { -webkit-mask-image: url("/wp-content/uploads/2023/11/Logo-Neon-blue-shape.webp"); mask-image: url("/wp-content/uploads/2023/11/Logo-Neon-blue-shape.webp"); animation: bootson-neon-flicker-blue 3.3s infinite; filter: drop-shadow(0 0 10px rgba(30, 140, 250, 0.95)); } @keyframes bootson-neon-flicker-red { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.55; } 23% { opacity: 0.25; } 80% { opacity: 0.9; } 82% { opacity: 0.6; } 83% { opacity: 1; } } @keyframes bootson-neon-flicker-blue { 0%, 12%, 16%, 45%, 48%, 70%, 100% { opacity: 1; } 14%, 47%, 72% { opacity: 0.55; } 15% { opacity: 0.2; } 88% { opacity: 0.85; } 90% { opacity: 0.55; } 91% { opacity: 1; } } /* ---------- Section-Überschriften: Neon-Flicker ---------- Greift NUR die Section-Titles (Stimmen, Social, Videos, Upcoming Shows, News, Band, Setlist, Booking, About). Das sind alle H3-Elementor- Heading-Widgets — alle anderen Überschriften (H1/H2 in About, Post-Titel, Tabs, etc.) werden explizit ausgeschlossen. */ h3.bootson-elem-heading-title, [data-id="0d9f357"] h4.bootson-elem-heading-title, .bootson-social__title, .bootson-testimonials__title, .bootson-about__title, .bk-section__title, .bk-hero__neon, .bootson-article__title, h1.wp-block-post-title { animation-name: bootson-neon-heading-flicker; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 2.9s; will-change: opacity, text-shadow; /* Einheitliche Neonderthaw-Typografie und rosa-roter Ton für ALLE Section-Titles (auch Elementor-Widgets wie Videos, Shows, News, ...). !important nötig, weil Elementor-Inline-Widget-Styles sonst gewinnen. */ font-family: "Neonderthaw", sans-serif !important; font-weight: 300 !important; line-height: 1 !important; color: #f67a7a !important; /* Neon-Sign-Glow: mehrere rote Schatten-Ringe um den roten Text, ergibt den weichen "Halo"-Effekt einer echten Neonröhre. !important schlägt Elementor-inline-Shadow (z.B. blau bei "Meet the Band"), damit alle Section-Titles gleich rot glühen. */ text-shadow: 0 0 4px rgba(255, 56, 56, 1), 0 0 10px rgba(255, 13, 35, 1), 0 0 22px rgba(255, 13, 35, 0.9), 0 0 42px rgba(255, 13, 35, 0.75), 0 0 70px rgba(255, 13, 35, 0.55), 0 0 110px rgba(255, 13, 35, 0.35) !important; } /* Detail-Page-Headings (Booking-Sections + News-Single H1): mobile-friendly clamp damit Neonderthaw nicht über 4 Zeilen läuft auf 375px-Devices. */ .bk-section__title, .bootson-article__title, h1.wp-block-post-title { font-size: clamp(2.4rem, 7vw, 4.6rem) !important; text-align: center !important; margin: 0 0 8px !important; /* Neonderthaw hat ungewöhnliche Buchstaben-Spacing — Fine-Tune */ letter-spacing: 0.01em !important; } /* Booking-Hero-Neon-Title — riesiges "Booking" als Neon-Sign über der Hero-Polaroid, gleicher Look wie die Booking-CTA-Section auf Home. */ .bk-hero__neon { font-size: clamp(3.2rem, 9vw, 6.5rem) !important; text-align: center !important; margin: 0 0 clamp(20px, 3vw, 36px) !important; letter-spacing: 0.01em !important; animation-name: bootson-neon-flicker-a; animation-duration: 3.4s; animation-delay: -0.7s; } @media (max-width: 540px) { .bk-hero__neon { font-size: clamp(2.6rem, 11vw, 4.0rem) !important; margin-bottom: 20px !important; } } @media (max-width: 540px) { .bk-section__title, .bootson-article__title, h1.wp-block-post-title { font-size: clamp(2.0rem, 9vw, 3.0rem) !important; } } /* Detail-Page-Headings: jeder bekommt eine eigene Flicker-Variante so dass sie beim Scrollen versetzt blinken (gleiches Pattern wie Home-Sections). */ .bk-section:nth-of-type(1) .bk-section__title { animation-name: bootson-neon-flicker-a; animation-duration: 3.1s; animation-delay: -0.4s; } .bk-section:nth-of-type(2) .bk-section__title { animation-name: bootson-neon-flicker-b; animation-duration: 2.7s; animation-delay: -1.3s; } .bk-section:nth-of-type(3) .bk-section__title { animation-name: bootson-neon-flicker-c; animation-duration: 3.3s; animation-delay: -2.1s; } .bk-section:nth-of-type(4) .bk-section__title { animation-name: bootson-neon-flicker-d; animation-duration: 2.5s; animation-delay: -0.9s; } .bk-section:nth-of-type(5) .bk-section__title { animation-name: bootson-neon-flicker-a; animation-duration: 2.9s; animation-delay: -1.7s; } .bk-section:nth-of-type(6) .bk-section__title { animation-name: bootson-neon-flicker-b; animation-duration: 3.5s; animation-delay: -0.6s; } .bk-section:nth-of-type(7) .bk-section__title { animation-name: bootson-neon-flicker-c; animation-duration: 2.3s; animation-delay: -1.4s; } /* Flicker-Desync: jede Section-Heading bekommt eine eigene Kombination aus Dauer, Delay und Keyframe-Variante, damit nicht alle gleichzeitig flackern. Dauer-Werte sind zueinander prim/teilerfremd gewählt, damit die Zyklen nie wieder synchronisieren. */ .bootson-about__title { animation-name: bootson-neon-flicker-a; animation-duration: 3.1s; animation-delay: -0.4s; } .bootson-social__title { animation-name: bootson-neon-flicker-b; animation-duration: 2.7s; animation-delay: -1.3s; } .bootson-testimonials__title { animation-name: bootson-neon-flicker-c; animation-duration: 3.3s; animation-delay: -2.1s; } [data-id="0d9f357"] h4.bootson-elem-heading-title { animation-name: bootson-neon-flicker-d; animation-duration: 2.5s; animation-delay: -0.9s; } /* Elementor-Widget-Titles (Videos, Shows, News, Band, Setlist, Booking, Meet the Band): einheitliche Größe wie Social/Testimonials (67px). */ h3.bootson-elem-heading-title, [data-id="0d9f357"] h4.bootson-elem-heading-title { font-size: 67px !important; text-align: center !important; margin: 0 !important; } /* H3-Section-Headings (Stimmen, Social, Videos, Upcoming Shows, News, Setlist, Booking): abwechselnde Varianten via nth-of-type-Heuristik über die globale Position im Dokument. */ h3.bootson-elem-heading-title { animation-duration: 2.9s; animation-delay: -0.6s; } .bootson-elem-element:nth-of-type(1) h3.bootson-elem-heading-title { animation-name: bootson-neon-flicker-b; animation-duration: 3.7s; animation-delay: -1.7s; } .bootson-elem-element:nth-of-type(2) h3.bootson-elem-heading-title { animation-name: bootson-neon-flicker-c; animation-duration: 2.3s; animation-delay: -0.2s; } .bootson-elem-element:nth-of-type(3) h3.bootson-elem-heading-title { animation-name: bootson-neon-flicker-d; animation-duration: 3.1s; animation-delay: -2.6s; } .bootson-elem-element:nth-of-type(4) h3.bootson-elem-heading-title { animation-name: bootson-neon-flicker-a; animation-duration: 2.7s; animation-delay: -1.1s; } .bootson-elem-element:nth-of-type(5) h3.bootson-elem-heading-title { animation-name: bootson-neon-flicker-b; animation-duration: 3.3s; animation-delay: -0.8s; } .bootson-elem-element:nth-of-type(6) h3.bootson-elem-heading-title { animation-name: bootson-neon-flicker-c; animation-duration: 2.5s; animation-delay: -1.9s; } .bootson-elem-element:nth-of-type(7) h3.bootson-elem-heading-title { animation-name: bootson-neon-flicker-d; animation-duration: 3.5s; animation-delay: -0.5s; } @keyframes bootson-neon-heading-flicker { 0%, 19%, 23%, 54%, 100% { opacity: 1; } 20% { opacity: 0.75; } 22% { opacity: 0.9; } 55% { opacity: 0.6; } 57% { opacity: 1; } 78% { opacity: 0.85; } 80% { opacity: 1; } } /* Vier Flicker-Varianten mit unterschiedlichen Zackenmustern, damit die Headings sich auch dann visuell verschieden verhalten, wenn Dauer + Delay zufällig mal doch gleich laufen. */ @keyframes bootson-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 bootson-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 bootson-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 bootson-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; } } /* Für Users mit reduce-motion-Präferenz: kein Flackern */ @media (prefers-reduced-motion: reduce) { .custom-logo, .bootson-neon-logo, .bootson-elem-33 .bootson-elem-element.bootson-elem-element-39eb635::before, .bootson-elem-33 .bootson-elem-element.bootson-elem-element-39eb635::after, .bootson-header::before, .bootson-header::after, h3.bootson-elem-heading-title, [data-id="0d9f357"] h4.bootson-elem-heading-title, .bootson-social__title, .bootson-testimonials__title, .bootson-about__title { animation: none; } } /* ---------- Footer — eine Zeile (Imprint inline) ---------- */ /* Defensive Reset: Elementor / WP / Hello-Theme können diversen Page- Bottom-Spacing produzieren (margin-bottom auf .elementor, body-padding, min-height: 100vh auf Containern). Wir killen das gezielt damit der Footer wirklich am Page-Ende liegt. ALSO: TOP-Reset (Browser-Default body{margin:8px} verursacht sonst einen schwarzen Streifen oben — bug 2026-05-02). */ html, body { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } body > .elementor.bootson-elem-33, body > div.bootson-elem-33 { margin-bottom: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } .bootson-footer { background-color: #000; display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 0; } .bootson-footer__inner { width: 100%; max-width: 1140px; margin: 0 auto; padding: 7px 16px 0; text-align: center; } .bootson-footer__text { margin: 0; color: #686868; font-family: var(--e-global-typography-text-font-family, "Roboto"), sans-serif; font-weight: var(--e-global-typography-text-font-weight, 400); white-space: nowrap; } .bootson-footer__text a { color: inherit; text-decoration: underline; } .bootson-footer__text a:hover { color: #DBDBDB; } @media (max-width: 767px) { /* Auf Mobile darf umgebrochen werden, damit nichts überläuft */ .bootson-footer__text { white-space: normal; } } /* ---------- Header (bootson-header) ---------- Ersatz für den Elementor-Container .bootson-elem-element-39eb635 + interne Spacer/Glow-Widgets. Das Logo ist Hintergrund, die Flicker-Pseudos liegen oben drüber (::before/::after weiter oben), Sprach-Switch rechts oben, zwei Glows links/rechts. Höhe kam im Original vom 500px-Spacer-Widget, mobile 212px. */ .bootson-header { display: flex; width: 100%; margin-top: 10px; height: 500px; background-image: url("/wp-content/uploads/2023/11/Logo-Neon-Neu-1-scaled.webp"); /* Logo proportional nach unten verschoben (4% der Header-Höhe, passt zur background-position der Flicker-Pseudos ::before/::after). */ background-position: center calc(50% + 4%); background-repeat: no-repeat; background-size: contain; } .bootson-header__lang { position: absolute; top: 20px; right: 20px; z-index: 1000; text-decoration: none; color: inherit; display: block; line-height: 1; /* Touch-Target ≥44×44 für Accessibility (WCAG 2.5.5) */ min-width: 44px; min-height: 44px; padding: 4px 6px; box-sizing: border-box; } .bootson-header__lang img { display: block; width: 25px; height: auto; } .bootson-header__lang-label { display: block; text-align: center; font-family: "Roboto", sans-serif; font-size: 11px; font-weight: 400; margin-top: 4px; color: #DBDBDB; } @media (max-width: 767px) { .bootson-header { height: 212px; } } /* ---------- Decorative Neon-Glows ---------- Wiederverwendbare Cyan/Orange-Radial-Glows, die in mehreren Sections als Atmosphären-Layer hinter Content liegen. Werden via `.bootson-glow` + `--cyan`/`--orange` platziert und brauchen einen positionierten Vorfahren. */ .bootson-glow { position: absolute; top: 0; height: 100%; /* pointer-events:none wichtig → Glow overlayt optisch alles in der Section, blockiert aber keine Klicks/Touch auf Links, Buttons etc. */ pointer-events: none; background-color: transparent; /* Hoher z-index, damit die Spots auch über allen Section-Inhalten (Text, Buttons, Widgets) liegen. Die Section selbst hat isolation:isolate → der Stacking-Context hält den Glow in der Section und er leakt nicht in nachfolgende Sections. */ z-index: 999; /* Bühnenlicht-Look: screen-blend addiert nur Licht (nie Abdunkelung), damit sich der Glow glaubhaft wie ein Spot auf dem dunklen Hintergrund verhält. Opacity dämpft Intensität. */ mix-blend-mode: screen; /* Stärker als vorher (0.7 → 0.85) — die Side-Spots sind jetzt statisch, deshalb dürfen sie etwas intensiver sein, ohne dass die Bewegung ablenkt. */ opacity: 0.85; } /* HEADER-Override: im Header sollen die Spots von OBEN nach UNTEN leuchten (deckenmontierte Stage-Spots). Gradient-Zentrum oberhalb des Elements (y: -6%) + längliche vertikale Ellipse → klarer Top-Down-Kegel mit komplett weichen Kanten. Muss vor den generischen .bootson-glow--*-Rules stehen, weil die Selektoren gleiche Spezifität haben — nein, sie müssen NACH den generischen stehen, um zu overriden. Siehe Reihenfolge unten. */ /* Seitliche Lichtkegel: Kegel-Technik analog zu den Top-Spots (Header), aber Pivot in den oberen SEITEN-Ecken der Section → Strahl fällt diagonal nach unten-innen (~45° zur Bühnenmitte). Radial-Gradient sorgt für Helligkeit am Lampen-Punkt, Conic-Mask schneidet einen Kegel-Wedge (Kern 8°, Soft-Flanken auf 48° gesamt). Rotation schwenkt den Strahl zwischen zwei Inward-Winkeln hin und her. */ .bootson-glow--cyan { right: -300px; top: 0; width: 140vw; height: 180%; /* Farbe via Custom-Property --spot-right-rgb (Default = Cyan). Jede Section kann ihr eigenes Paar setzen, indem sie auf dem Parent --spot-right-rgb und --spot-left-rgb setzt (siehe pro-Section-Blöcke weiter unten). circle 150vh (von 110vh hochgezogen) → größerer Lichtkegel, peak-alpha 0.95 → intensiver. */ background: radial-gradient( circle 150vh at 100% 0%, rgba(var(--spot-right-rgb, 0, 252, 255), 0.95) 0%, rgba(var(--spot-right-rgb, 0, 252, 255), 0.58) 28%, rgba(var(--spot-right-rgb, 0, 252, 255), 0.24) 58%, rgba(var(--spot-right-rgb, 0, 252, 255), 0.07) 82%, rgba(var(--spot-right-rgb, 0, 252, 255), 0) 100% ); -webkit-mask-image: conic-gradient(from 201deg at 100% 0%, transparent 0deg, #000 20deg, #000 28deg, transparent 48deg); mask-image: conic-gradient(from 201deg at 100% 0%, transparent 0deg, #000 20deg, #000 28deg, transparent 48deg); transform-origin: calc(100% - 300px) 0%; /* Side-Spots bewusst ohne Animation — siehe Performance-Hinweis unten. Statische Inward-Pose mit leichter Neigung (25°) als visueller Kompromiss zwischen den 35°/15°-Endpunkten der Top-Spot-Keyframes. */ transform: rotate(25deg); } .bootson-glow--orange { left: -300px; top: 0; width: 140vw; height: 180%; background: radial-gradient( circle 150vh at 0% 0%, rgba(var(--spot-left-rgb, 255, 170, 0), 0.95) 0%, rgba(var(--spot-left-rgb, 255, 170, 0), 0.58) 28%, rgba(var(--spot-left-rgb, 255, 170, 0), 0.24) 58%, rgba(var(--spot-left-rgb, 255, 170, 0), 0.07) 82%, rgba(var(--spot-left-rgb, 255, 170, 0), 0) 100% ); -webkit-mask-image: conic-gradient(from 111deg at 0% 0%, transparent 0deg, #000 20deg, #000 28deg, transparent 48deg); mask-image: conic-gradient(from 111deg at 0% 0%, transparent 0deg, #000 20deg, #000 28deg, transparent 48deg); transform-origin: 300px 0%; transform: rotate(-25deg); } /* Side-Sway: oszilliert zwischen zwei Inward-Winkeln (35° tief / 15° flach), analog zu den Top-Spots. Für den rechts-montierten Cyan-Spot ist „inward" = positive Rotation (Strahl kippt stärker zur Mitte); für den links-montierten Orange-Spot „inward" = negative Rotation. Farbe peaked zeitversetzt (35% / 65%) damit Drehung und Hue nicht synchron zucken. */ @keyframes bootson-cone-sway-side-cyan { 0%, 100% { transform: rotate(35deg); filter: hue-rotate(0deg) saturate(1.5) brightness(1.00); } 35% { filter: hue-rotate(40deg) saturate(1.7) brightness(1.02); } 50% { transform: rotate(15deg); } 65% { filter: hue-rotate(55deg) saturate(1.8) brightness(1.02); } } @keyframes bootson-cone-sway-side-orange { 0%, 100% { transform: rotate(-35deg); filter: hue-rotate(0deg) saturate(1.5) brightness(1.00); } 35% { filter: hue-rotate(-55deg) saturate(1.7) brightness(1.02); } 50% { transform: rotate(-15deg); } 65% { filter: hue-rotate(-75deg) saturate(1.8) brightness(1.02); } } /* ---------- HEADER-Override: Spots von OBEN nach UNTEN ---------- Im Header/Hero-Bereich sollen die Deckenspots klar von oben nach unten leuchten. Gradient-Zentrum knapp oberhalb des Elements (y: -6%), schmale hohe Ellipse (32% × 95%) → sichtbarer Kegel, der nach unten ausläuft. Überschreibt die generischen seitlichen .bootson-glow--*- Regeln nur im Header-Kontext. */ /* Header-Spots: ECHTE Kegel-Form via Conic-Mask. - background: linear-gradient(180deg) → vertikaler Farbabfall (oben hell, unten transparent) - mask-image: conic-gradient von einem Punkt knapp über der Oberkante (y: -2%) → schneidet einen Dreieck-Wedge aus dem Rechteck aus. Tip am Ursprung, öffnet sich ca. 26° nach unten → klassischer Stage-Spot-Kegel: schmal oben (Lampe), breit unten (Lichtteppich). - Seitliche Mask-Edges (transparent → black → transparent) sorgen für weiche Flanken ohne harte Kanten. Höhe 150vh damit der Kegel weit unter das Header-Ende hinausragt; 100vw Breite damit Rotation keine schwarzen Seitenränder erzeugt; z-index 999 (pointer-events:none aus Basis-Regel). */ .bootson-header .bootson-glow--cyan { right: calc(-60vw + 50px); left: auto; top: -300px; width: 180vw; height: 110vh; /* reduziert von 260vh — verhindert leeren Bereich unter Footer (scrollHeight-Bloat), reicht aber noch in den Hero rein für Spotlight-Effekt */ z-index: 999; background: linear-gradient(180deg, rgba(0, 252, 255, 0.92) 0%, rgba(0, 252, 255, 0.52) 28%, rgba(0, 252, 255, 0.22) 58%, rgba(0, 252, 255, 0.06) 82%, rgba(0, 252, 255, 0) 100% ); -webkit-mask-image: conic-gradient(from 156deg at 62% 0%, transparent 0deg, #000 20deg, #000 28deg, transparent 48deg); mask-image: conic-gradient(from 156deg at 62% 0%, transparent 0deg, #000 20deg, #000 28deg, transparent 48deg); transform-origin: 62% 300px; animation: bootson-cone-sway-hero-cyan 34s ease-in-out -6s infinite; } .bootson-header .bootson-glow--orange { left: calc(-60vw + 50px); right: auto; top: -300px; width: 180vw; height: 110vh; /* reduziert von 260vh — verhindert leeren Bereich unter Footer (scrollHeight-Bloat), reicht aber noch in den Hero rein für Spotlight-Effekt */ z-index: 999; background: linear-gradient(180deg, rgba(255, 170, 0, 0.92) 0%, rgba(255, 170, 0, 0.52) 28%, rgba(255, 170, 0, 0.22) 58%, rgba(255, 170, 0, 0.06) 82%, rgba(255, 170, 0, 0) 100% ); -webkit-mask-image: conic-gradient(from 156deg at 38% 0%, transparent 0deg, #000 20deg, #000 28deg, transparent 48deg); mask-image: conic-gradient(from 156deg at 38% 0%, transparent 0deg, #000 20deg, #000 28deg, transparent 48deg); transform-origin: 38% 300px; animation: bootson-cone-sway-hero-orange 40s ease-in-out -13s infinite; } /* ---------- Performance-Modi: reduce-motion + low-power ---------- Zwei Trigger für denselben Effekt (alle Spots statisch, keine Filter, keine GPU-Layer-Hints): (1) OS-weite „Bewegung reduzieren"-Präferenz via prefers-reduced-motion. (2) JS setzt wenn navigator.deviceMemory oder hardwareConcurrency unter einem Schwellwert liegen (siehe bootson-low-power.js). So bleibt die Top-Spot-Animation auf starken Desktops erhalten, aber Low-End-Geräte (inkl. alte iPads, Android Entry-Level) fallen automatisch in den statischen Modus. */ @media (prefers-reduced-motion: reduce) { .bootson-header .bootson-glow--cyan, .bootson-header .bootson-glow--orange, .bootson-glow--cyan, .bootson-glow--orange, .bootson-about__glow--cyan, .bootson-about__glow--orange, .bootson-hero .bootson-glow--tr, .bootson-hero .bootson-glow--bl { animation: none !important; will-change: auto; filter: none !important; } .bootson-header .bootson-glow--cyan { transform: rotate(25deg); } .bootson-header .bootson-glow--orange { transform: rotate(-25deg); } } html.bootson-low-power .bootson-header .bootson-glow--cyan, html.bootson-low-power .bootson-header .bootson-glow--orange, html.bootson-low-power .bootson-glow--cyan, html.bootson-low-power .bootson-glow--orange, html.bootson-low-power .bootson-about__glow--cyan, html.bootson-low-power .bootson-about__glow--orange, html.bootson-low-power .bootson-hero .bootson-glow--tr, html.bootson-low-power .bootson-hero .bootson-glow--bl { animation: none !important; will-change: auto; filter: none !important; } html.bootson-low-power .bootson-header .bootson-glow--cyan { transform: rotate(25deg); } html.bootson-low-power .bootson-header .bootson-glow--orange { transform: rotate(-25deg); } @media (max-width: 767px) { /* Mobile-Override für die Header-Spots: schmalere Ellipse (42%) + steilerer Gradient-Falloff für schärfer definierte Kegelform. Der helle Kern (0.85 statt 0.72) bleibt lokal hell, fällt aber schneller ab (bei 40% schon nur noch 0.22 statt 48%→0.16) → der Kegel wirkt klar konturiert statt ausgewaschen. */ .bootson-header .bootson-glow--cyan { width: 130vw; right: -18vw; height: 70vh; background: linear-gradient(180deg, rgba(0, 252, 255, 0.95) 0%, rgba(0, 252, 255, 0.55) 28%, rgba(0, 252, 255, 0.22) 58%, rgba(0, 252, 255, 0.06) 82%, rgba(0, 252, 255, 0) 100% ); -webkit-mask-image: conic-gradient(from 163deg at 62% -2%, transparent 0deg, #000 14deg, #000 20deg, transparent 34deg); mask-image: conic-gradient(from 163deg at 62% -2%, transparent 0deg, #000 14deg, #000 20deg, transparent 34deg); transform-origin: 62% -2%; } .bootson-header .bootson-glow--orange { width: 130vw; left: -18vw; height: 70vh; background: linear-gradient(180deg, rgba(255, 170, 0, 0.95) 0%, rgba(255, 170, 0, 0.55) 28%, rgba(255, 170, 0, 0.22) 58%, rgba(255, 170, 0, 0.06) 82%, rgba(255, 170, 0, 0) 100% ); -webkit-mask-image: conic-gradient(from 163deg at 38% -2%, transparent 0deg, #000 14deg, #000 20deg, transparent 34deg); mask-image: conic-gradient(from 163deg at 38% -2%, transparent 0deg, #000 14deg, #000 20deg, transparent 34deg); transform-origin: 38% -2%; } /* Mobile-Performance: alle Light-Spots (Top + Side + About) werden STATISCH dargestellt. Keine Keyframe-Animation, kein kontinuierlich veränderter Filter (hue-rotate/saturate) → jede einzelne Animation würde sonst conic-gradient + mix-blend-mode-Composites bei jedem Frame neu rastern, was auf Mobile GPUs (insbesondere iOS Safari) schnell zum Jank führt. Die Kegel bleiben sichtbar in einer leicht nach innen gekippten Ruhe-Pose stehen. */ .bootson-header .bootson-glow--cyan, .bootson-header .bootson-glow--orange, .bootson-glow--cyan, .bootson-glow--orange, .bootson-about__glow--cyan, .bootson-about__glow--orange { animation: none !important; will-change: auto; filter: none !important; } /* Top-Spots: statische Inward-Pose (~Mittel aus 15°/35° Keyframe-Bereich) */ .bootson-header .bootson-glow--cyan { transform: rotate(25deg); } .bootson-header .bootson-glow--orange { transform: rotate(-25deg); } /* Side-Spots rechts (cyan in Testi/Videos, orange in Social/About/...) */ .bootson-glow--cyan, .bootson-about__glow--orange { transform: rotate(25deg); } /* Side-Spots links (orange in Testi/Videos, cyan in Social/About/...) */ .bootson-glow--orange, .bootson-about__glow--cyan { transform: rotate(-25deg); } /* Mobile-Geometrie für Side-Spots: der Desktop-Kegel (300px fixer Offset + circle 150vh + 48°-Wedge) ist für 375px-Viewports zu groß und überlagert Section-Content zu stark. Hier skaliert alles mit vw, der Kegel wird schmaler (34° Wedge) und kompakter (80vh Circle), Opacity runter auf 0.6, damit der Section-Inhalt lesbar bleibt. */ .bootson-glow--cyan, .bootson-glow--orange, .bootson-about__glow--cyan, .bootson-about__glow--orange { width: 140vw; height: 120%; opacity: 0.6; } .bootson-glow--cyan { right: -40vw; transform-origin: calc(100% - 40vw) 0%; background: radial-gradient( circle 80vh at 100% 0%, rgba(var(--spot-right-rgb, 0, 252, 255), 0.85) 0%, rgba(var(--spot-right-rgb, 0, 252, 255), 0.45) 28%, rgba(var(--spot-right-rgb, 0, 252, 255), 0.16) 58%, rgba(var(--spot-right-rgb, 0, 252, 255), 0.04) 82%, rgba(var(--spot-right-rgb, 0, 252, 255), 0) 100% ); -webkit-mask-image: conic-gradient(from 206deg at 100% 0%, transparent 0deg, #000 14deg, #000 20deg, transparent 34deg); mask-image: conic-gradient(from 206deg at 100% 0%, transparent 0deg, #000 14deg, #000 20deg, transparent 34deg); transform: rotate(22deg); } .bootson-glow--orange { left: -40vw; transform-origin: 40vw 0%; background: radial-gradient( circle 80vh at 0% 0%, rgba(var(--spot-left-rgb, 255, 170, 0), 0.85) 0%, rgba(var(--spot-left-rgb, 255, 170, 0), 0.45) 28%, rgba(var(--spot-left-rgb, 255, 170, 0), 0.16) 58%, rgba(var(--spot-left-rgb, 255, 170, 0), 0.04) 82%, rgba(var(--spot-left-rgb, 255, 170, 0), 0) 100% ); -webkit-mask-image: conic-gradient(from 106deg at 0% 0%, transparent 0deg, #000 14deg, #000 20deg, transparent 34deg); mask-image: conic-gradient(from 106deg at 0% 0%, transparent 0deg, #000 14deg, #000 20deg, transparent 34deg); transform: rotate(-22deg); } .bootson-about__glow--cyan { left: -40vw; transform-origin: 40vw 0%; background: radial-gradient( circle 80vh at 0% 0%, rgba(80, 255, 210, 0.85) 0%, rgba(80, 255, 210, 0.45) 28%, rgba(80, 255, 210, 0.16) 58%, rgba(80, 255, 210, 0.04) 82%, rgba(80, 255, 210, 0) 100% ); -webkit-mask-image: conic-gradient(from 106deg at 0% 0%, transparent 0deg, #000 14deg, #000 20deg, transparent 34deg); mask-image: conic-gradient(from 106deg at 0% 0%, transparent 0deg, #000 14deg, #000 20deg, transparent 34deg); transform: rotate(-22deg); } .bootson-about__glow--orange { right: -40vw; transform-origin: calc(100% - 40vw) 0%; background: radial-gradient( circle 80vh at 100% 0%, rgba(200, 80, 255, 0.85) 0%, rgba(200, 80, 255, 0.45) 28%, rgba(200, 80, 255, 0.16) 58%, rgba(200, 80, 255, 0.04) 82%, rgba(200, 80, 255, 0) 100% ); -webkit-mask-image: conic-gradient(from 206deg at 100% 0%, transparent 0deg, #000 14deg, #000 20deg, transparent 34deg); mask-image: conic-gradient(from 206deg at 100% 0%, transparent 0deg, #000 14deg, #000 20deg, transparent 34deg); transform: rotate(22deg); } /* Mobile-Performance: Überschriften-Animationen (Neon-Flicker, etc.) komplett aus. text-shadow-Pulse + filter-Animationen auf Headlines sind auf Mobile-GPUs teuer (jeder Frame = Composite der Schatten- Fläche), und zusammen mit Spot-Gradients + mix-blend-mode wird es schnell zu viel. Gleiche Selektor-Liste wie im reduce-motion-Block. */ .custom-logo, .bootson-neon-logo, .bootson-elem-33 .bootson-elem-element.bootson-elem-element-39eb635::before, .bootson-elem-33 .bootson-elem-element.bootson-elem-element-39eb635::after, .bootson-header::before, .bootson-header::after, h3.bootson-elem-heading-title, [data-id="0d9f357"] h4.bootson-elem-heading-title, .bootson-social__title, .bootson-testimonials__title, .bootson-about__title { animation: none !important; } } /* ---------- Social Section (Instagram-Polaroids) ---------- Ersatz für die Elementor-Section cb94f61. `position: relative` + `isolation` sind nötig, damit die beiden .bootson-glow-Kinder auf diese Section als Containing-Block positioniert werden. Padding-Bottom 45px entspricht dem Original (Section-Padding 15px + Bottom-Spacer 30px), mobil 35px (20px Spacer). */ .bootson-social { position: relative; isolation: isolate; width: 100%; padding: 0 0 45px; } /* Section-Paletten: jede Section setzt ihr eigenes RGB-Paar via Custom-Properties. Die generischen .bootson-glow--cyan/--orange Regeln oben lesen diese Variablen über var() — so bleibt nur eine einzige Gradient-Definition, und jede Section kriegt trotzdem eine eigene Farbmischung. Konvention: --spot-right-rgb ist der Spot an der rechten Seite (Klasse --cyan), --spot-left-rgb der an der linken (Klasse --orange). Werte ohne Alpha-Kanal, nur "R, G, B" — wird in rgba() eingesetzt. */ .bootson-social { /* Social: magenta/hot-pink rechts, cyan links */ --spot-right-rgb: 255, 60, 180; --spot-left-rgb: 0, 230, 255; } /* ---------- Spotlight-Host Sections (Videos, Shows, News, Band, Setlist, Booking) ---------- Die Outer-Elementor-Container kriegen die Klasse .bootson-spotlight-host via PHP-Injection. Wir setzen position:relative + isolation:isolate, damit die absolut positionierten .bootson-glow Lichtkegel innerhalb der Section bleiben und mix-blend-mode nicht in Nachbarsections blutet. overflow bleibt unberührt, damit die Kegel trotz Außen-Positionierung via calc() noch rotieren können — die Kegel sind pointer-events:none und z-index:999 (siehe Basis-.bootson-glow Regel). */ .bootson-spotlight-host { position: relative; isolation: isolate; } /* Per-Section-Paletten für die Spotlight-Host-Sections. Jede Section kriegt ein eigenes Farbpaar — die generischen .bootson-glow--cyan/--orange Gradients lesen die Custom-Properties via var(). So ergibt sich über die Seite ein abwechslungsreicher Stage-Light-Rhythmus trotz statischer Spots. Selektoren greifen auf die stabilen Elementor-Element-IDs bzw. die id="shows" zu, damit keine weiteren Klassen in den PHP-Dateien nötig sind. */ /* Videos: magenta rechts, amber links */ .bootson-elem-element-bfed367 { --spot-right-rgb: 255, 60, 180; --spot-left-rgb: 255, 180, 40; } /* Shows: rot rechts, blau links (Police-Light) */ #shows { --spot-right-rgb: 255, 40, 60; --spot-left-rgb: 60, 130, 255; } /* News: violett rechts, grün links */ .bootson-news-section { --spot-right-rgb: 170, 60, 255; --spot-left-rgb: 60, 255, 140; } /* Band: cyan rechts, pink links */ .bootson-band-section { --spot-right-rgb: 0, 252, 255; --spot-left-rgb: 255, 120, 200; } /* Setlist: amber rechts, violett links */ body .bootson-elem-element-f1791d8.e-con.bootson-spotlight-host { --spot-right-rgb: 255, 180, 40; --spot-left-rgb: 140, 80, 255; padding: 0 !important; margin: 0 !important; } .bootson-social__title { margin: 0; text-align: center; font-family: "Neonderthaw", sans-serif; font-size: 67px; font-weight: 300; line-height: 1; color: #f67a7a; text-shadow: 0 0 14px #FF0D23; } @media (max-width: 767px) { .bootson-social { padding-bottom: 35px; } .bootson-social__title { font-size: 20vw; } } /* ---------- Testimonials Section ---------- 2×2-Grid aus Blockquote-Kacheln, zentriertes Neon-Heading "Stimmen/Voices". Die einzelnen Zitate nutzen eine ::before-"-Marke (Times New Roman 100px) als visuellen Anker, wie im Original-Elementor-Blockquote-Skin "quotation". */ .bootson-testimonials { position: relative; isolation: isolate; width: 100%; padding: 0 0 45px; } .bootson-testimonials__title { margin: 0; text-align: center; font-family: "Neonderthaw", sans-serif; font-size: 67px; font-weight: 300; line-height: 1; color: #f67a7a; text-shadow: 0 0 14px #FF0D23; } .bootson-testimonials__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 40px; row-gap: 20px; padding: 0 10%; margin-top: 24px; } .bootson-quote { margin: 0; } .bootson-quote__body { margin: 0; padding: 0; border: 0; } .bootson-quote__body::before { content: "\201C"; display: block; font-family: "Times New Roman", Times, serif; font-size: 100px; font-weight: 900; line-height: 100px; /* Flow-Höhe auf 60px festklemmen (Elementor-Original), damit die 100px hohe Glyphe den Block nicht in die Höhe treibt – dadurch werden die Kacheln kompakter. */ height: 60px; color: #F9FAFA; } .bootson-quote__text { margin: 15px 0 0; font-family: var(--e-global-typography-text-font-family, "Roboto"), sans-serif; font-weight: var(--e-global-typography-text-font-weight, 400); font-size: 15px; color: #DBDBDB; } .bootson-quote__author { display: block; margin-top: 10px; font-family: var(--e-global-typography-text-font-family, "Roboto"), sans-serif; font-weight: 700; font-size: 18.87px; font-style: normal; color: var(--e-global-color-secondary, #1EA1FA); } @media (max-width: 767px) { .bootson-testimonials { padding-bottom: 35px; } .bootson-testimonials__title { font-size: 20vw; } /* Auf Mobile wird die 2×2-Grid zu einem horizontalen Scroll-Slider. Eine Kachel pro "Seite" mit Scroll-Snap, keine sichtbare Scrollbar. */ .bootson-testimonials__grid { display: flex; grid-template-columns: none; grid-template-rows: none; grid-auto-flow: column; padding: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; column-gap: 0; row-gap: 0; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-padding-inline: 8vw; } .bootson-testimonials__grid::-webkit-scrollbar { display: none; } .bootson-testimonials__grid::before, .bootson-testimonials__grid::after { content: ""; flex: 0 0 8vw; } .bootson-quote { flex: 0 0 84vw; scroll-snap-align: center; padding: 0 2vw; box-sizing: border-box; } } /* ---------- About Section ---------- Aufbau: Neonderthaw-Heading "About", darunter eine Bühne (.stage, 1400px max, zentriert). In der Bühne liegt die blaue Radial-Gradient-Kachel (1° rotiert) mit "BOOTS ON!" + Untertitel + Bandfoto + Fließtext. Die Titel-Blöcke haben mix-blend-mode:multiply mit opacity 0.9, sodass weißer Text auf dem blauen Gradient gedimmt/durchscheinend wirkt. Vier DuctTape-Overlays ankern an den Bühnen-Ecken (±10° rotiert, dunkel gefiltert). Zwei Bühnenlicht-Overlays (cyan links oben, orange rechts unten) nutzen mix-blend-mode:hard-light + opacity 0.5 wie im Original. */ .bootson-about { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px 20px 70px; width: 100%; } .bootson-about__title { margin: 0; text-align: center; font-family: "Neonderthaw", sans-serif; /* Original-Wert: 93px (größer als die übrigen Section-Titles mit 67px). */ font-size: 93px; font-weight: 300; line-height: 1; color: #f67a7a; text-shadow: 0 0 14px #FF0D23; } .bootson-about__stage { position: relative; width: 90vw; max-width: 1400px; margin: 0 auto; } /* Kachel ist im Original 1244px breit in einer 1400px-Bühne (je 78px Seitenrand). Tapes bleiben an die Bühnen-Ecken geankert (1400), die Kachel wird per max-width auf 1244 begrenzt. */ .bootson-about__card { position: relative; display: flex; flex-direction: column; gap: 15px; padding: 20px; width: 100%; max-width: 1244px; margin: 0 auto; background-image: radial-gradient(at center center, #83D0FF 0%, #012D47 100%); transform: rotate(1deg); } .bootson-about__titles { display: flex; flex-direction: column; } /* "BOOTS ON!" + Tagline: weißer Text auf schwarzem Kasten, per mix-blend-mode:multiply + opacity 0.9 wirkt der Block wie dunkelblau durchscheinend über dem Gradient (Original-Look via .trans-overlay). */ .bootson-about__brand, .bootson-about__tagline { background-color: #000; color: #FFFFFF; text-align: center; font-family: "Roboto", sans-serif; font-weight: 900; line-height: 1; mix-blend-mode: multiply; opacity: 0.9; } .bootson-about__brand { margin: 0; padding: 0; font-size: 15vw; letter-spacing: -1.5px; } .bootson-about__tagline { margin: 0; padding: 12px 0 9px; font-size: 6.2vw; text-transform: uppercase; letter-spacing: 0.6px; } /* Blaue Neon-Trennlinie zwischen "BOOTS ON!" und Tagline: simuliert den schmalen hellblauen Streifen, der im Original durch die multiply-Overlays zwischen den beiden Heading-Boxen entsteht. */ .bootson-about__sep { align-self: stretch; height: 3px; margin: 2px 6%; pointer-events: none; } .bootson-about__photo { margin: 0; display: block; } .bootson-about__photo img { display: block; width: 100%; height: auto; } .bootson-about__body { background-color: #000; padding: 24px; text-align: justify; font-family: "Roboto", sans-serif; font-size: 24px; line-height: 36px; font-weight: 700; color: #29688e; } .bootson-about__body p { margin: 0 0 14.4px; } .bootson-about__body p:last-child { margin-bottom: 0; } /* DuctTape-Overlays. Anker an den Ecken der Bühne (1400px max). Original-Werte (gemessen am Live-Site): tapes 253×146px, anker TL top:101/left:43, TR top:110/right:12, BL bottom:46/left:28, BR bottom:37/right:39. 253/1400 = 18.07% Breite. z-index: 3 legt die Tapes über die Card (z-index: 2), damit sie auf die Ecken des "Plakats" "geklebt" wirken. */ .bootson-about__tape { position: absolute; width: 18.07%; height: auto; pointer-events: none; z-index: 3; filter: brightness(0.41) contrast(1.6) saturate(1); } .bootson-about__tape--tl { top: -47px; left: -44px; transform: rotate(-10deg); } .bootson-about__tape--tr { top: -30px; right: -65px; transform: rotate(10deg); } .bootson-about__tape--bl { bottom: -34px; left: -64px; transform: rotate(10deg); } .bootson-about__tape--br { bottom: -41px; right: -29px; transform: rotate(-10deg); } /* Bühnenlicht-Overlays: Lichtkegel von oben, die auf das Plakat fallen. Kegel-Tip oben (schmal), breite Unterseite. transform-origin oberhalb simuliert einen deckenmontierten Spot, der langsam schwenkt. Der Linear-Gradient fadet nach unten transparent aus → keine harte Kante am Section-Rand. Liegt mit z-index 20 über der Card, damit der Scheinwerfer-Effekt die Card trifft. */ .bootson-about__glow { position: absolute; top: 0; /* pointer-events:none → Glow liegt optisch über allem in der About- Section (Titel, Brand, Bandfoto, Text, DuctTape-Kacheln), blockiert aber keine Interaktion darauf. */ pointer-events: none; background-color: transparent; mix-blend-mode: screen; /* Stärker als vorher (0.75 → 0.9) — About-Glows sind jetzt statisch. */ opacity: 0.9; /* Hoher z-index analog zu .bootson-glow → Spot liegt auch über dem höchstgestapelten Section-Content. */ z-index: 999; height: 100%; /* Kein will-change → About-Glows sind jetzt statisch (keine Animation), daher bringt ein GPU-Layer-Hint hier nichts und kostet nur VRAM. */ } .bootson-about__glow--cyan { /* Türkis-Spot von LINKS, Pivot in oberer linker Ecke → diagonaler Strahl nach unten-rechts. Conic-Mask + Radial-Gradient analog zu den Top- und Side-Spots. Element 300px nach links aus dem VP geschoben, Pivot per calc() auf die sichtbare Viewport-Kante gezogen. */ left: -300px; top: 0; width: 140vw; height: 180%; background: radial-gradient( circle 150vh at 0% 0%, rgba(80, 255, 210, 0.95) 0%, rgba(80, 255, 210, 0.58) 28%, rgba(80, 255, 210, 0.24) 58%, rgba(80, 255, 210, 0.07) 82%, rgba(80, 255, 210, 0) 100% ); -webkit-mask-image: conic-gradient(from 111deg at 0% 0%, transparent 0deg, #000 20deg, #000 28deg, transparent 48deg); mask-image: conic-gradient(from 111deg at 0% 0%, transparent 0deg, #000 20deg, #000 28deg, transparent 48deg); transform-origin: 300px 0%; transform: rotate(-25deg); } .bootson-about__glow--orange { /* Tief-Violett-Spot von RECHTS, Pivot in oberer rechter Ecke → diagonaler Strahl nach unten-links. Element 300px nach rechts aus dem VP. */ right: -300px; top: 0; width: 140vw; height: 180%; background: radial-gradient( circle 150vh at 100% 0%, rgba(200, 80, 255, 0.95) 0%, rgba(200, 80, 255, 0.58) 28%, rgba(200, 80, 255, 0.24) 58%, rgba(200, 80, 255, 0.07) 82%, rgba(200, 80, 255, 0) 100% ); -webkit-mask-image: conic-gradient(from 201deg at 100% 0%, transparent 0deg, #000 20deg, #000 28deg, transparent 48deg); mask-image: conic-gradient(from 201deg at 100% 0%, transparent 0deg, #000 20deg, #000 28deg, transparent 48deg); transform-origin: calc(100% - 300px) 0%; transform: rotate(25deg); } @media (max-width: 1024px) { .bootson-about__body { font-size: 18px; line-height: 28px; } } @media (max-width: 767px) { .bootson-about { padding: 16px 16px 30px; } .bootson-about__title { font-size: 20vw; } .bootson-about__card { gap: 8px; padding: 8px; } .bootson-about__brand { font-size: 58px; } .bootson-about__tagline { font-size: 20px; } .bootson-about__body { padding: 11px; font-size: 14px; line-height: 22px; } .bootson-about__tape--tl { top: 60px; } .bootson-about__tape--tr { top: 60px; } .bootson-about__glow--cyan { height: 60vh; } .bootson-about__glow--orange { height: 60vh; } } /* ---------- Hero Section ---------- Direkt unter dem Logo-Header. Drei zentrierte blaue Social-Icons + eine gerahmte 16:9-Video-Kachel mit Poster-Overlay und XL-Play-SVG. */ .bootson-hero { display: flex; flex-direction: column; align-items: center; width: 90%; margin: 0 auto; padding: 25px; box-sizing: border-box; } .bootson-hero__social { list-style: none; margin: 0 0 20px; padding: 0; display: flex; justify-content: center; column-gap: 5px; text-align: center; } /* Tom 2026-05-04: Neon-Glow für Social-Icons (FB/Insta/YT), passend zu den blauen "THE BEST OF NASHVILLE"-Neon-Letters. drop-shadow schichten für realistischen Neon-Look (innerer scharfer Halo + weicher außerer Glow). Hover macht den Glow intensiver. */ .bootson-hero__social-icon { display: inline-flex; align-items: center; justify-content: center; width: 86px; height: 86px; border-radius: 50%; background-color: transparent; color: #1EA1FA; text-decoration: none; transition: filter 0.25s, transform 0.25s; /* dezenter Neon-Hauch — 2 Layer, niedrige Opacity */ filter: drop-shadow(0 0 2px rgba(30, 161, 250, 0.6)) drop-shadow(0 0 8px rgba(30, 161, 250, 0.25)); } .bootson-hero__social-icon:hover { filter: drop-shadow(0 0 3px rgba(30, 161, 250, 0.85)) drop-shadow(0 0 14px rgba(30, 161, 250, 0.45)); transform: scale(1.04); } .bootson-hero__social-icon svg { width: 43px; height: 43px; fill: #1EA1FA; } /* subtiler Flicker — wie bei richtigen Neon-Schildern */ @keyframes bootson-neon-flicker { 0%, 100% { opacity: 1; } 48% { opacity: 1; } 49% { opacity: 0.6; } 50% { opacity: 1; } 62% { opacity: 1; } 63% { opacity: 0.85; } 64% { opacity: 1; } } .bootson-hero__social-icon { animation: bootson-neon-flicker 7s ease-in-out infinite; } .bootson-hero__social-icon:nth-child(2), .bootson-hero__social li:nth-child(2) .bootson-hero__social-icon { animation-delay: 1.2s; } .bootson-hero__social li:nth-child(3) .bootson-hero__social-icon { animation-delay: 2.7s; } .bootson-hero__video { position: relative; width: 100%; margin: 0 0 20px; padding: 13px; background-color: transparent; background-image: linear-gradient(194deg, #272727 37%, #161616 5%); border: 1px solid transparent; border-top-color: #5C5C5C; border-left-color: #5C5C5C; border-radius: 2px; box-shadow: 7px 6px 11px 11px rgba(0, 0, 0, 0.75); box-sizing: border-box; } .bootson-hero__video-el { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; } .bootson-hero__video-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 10px; background-size: cover; background-position: 50% 50%; display: flex; align-items: center; justify-content: center; } .bootson-hero__video-play { appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer; width: 203px; height: 203px; color: #000; } .bootson-hero__video-play svg { width: 100%; height: 100%; fill: #000; } /* Override generiertes WP block-theme :hover (pink/weiß) für das Play-Button - der Button soll beim Hover unverändert transparent bleiben. */ .bootson-hero__video-play:hover, .bootson-hero__video-play:focus, .bootson-hero__video-play:active { background: transparent; color: #000; transform: none; } .bootson-hero__video-play:hover svg, .bootson-hero__video-play:focus svg { fill: #000; } /* ---------- Video-Playlist (Elementor-Mirror) ---------- Elementor Pro's Video-Playlist-Widget JS wird im Mirror nicht geladen; wir übernehmen das per videos-playlist.js. Elementor-CSS versteckt .e-tab-content per Default mit display:none und stylet nur active via JS-Klassen, die wir nicht alle bekommen. Hier erzwingen wir, dass der aktive Tab (vom JS mit .e-active markiert) sichtbar ist und die Iframe-Bühne 16:9 ausfüllt. */ .bootson-elem-widget-video-playlist .e-tabs-content-wrapper .e-tab-content { display: none; } .bootson-elem-widget-video-playlist .e-tabs-content-wrapper .e-tab-content.e-active { display: block !important; width: 100%; height: 100%; } .bootson-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 220px; background: #000; } .bootson-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 767px) { .bootson-hero { width: 100%; padding: 0; } /* Mobile: Abstand über und unter den Social-Icons verkleinern — die Icons rücken näher ans Logo-Header heran und ans Video darunter. Negativer margin-top zieht sie unter den Header-Bottom-Edge, klein gehaltener margin-bottom verkürzt den Abstand zum Video. */ .bootson-hero__social { margin: -10px 0 6px; } .bootson-hero__video { width: 90vw; margin: 8px auto 25px; padding: 7px; } .bootson-hero__video-play { width: 105px; height: 105px; } } /* ---------- Mobile: Band-Member horizontaler Slider ---------- Auf Mobile werden die 6 Band-CTA-Karten in einen horizontalen Scroller umgebaut. Reine CSS-Scroll-Snap-Lösung (kein JS) — der Browser bietet native Touch-Inertia und Snap-Verhalten. Jede Karte ist ~75% Viewport breit (mit Peek auf die nächste) und snappt mittig an. Scrollbar versteckt, damit's clean aussieht. */ /* Mobile Band-Slider: der Slider selbst ist jetzt `.pokercards` — siehe Pokercard-Styles am Ende der Datei. Dieser Block ist bewusst leer gelassen, um die Abschnitts-Nummerierung der Mobile-Fixes zu erhalten. */ /* ---------- Mobile: Video-Playlist Layout-Fix ---------- Elementor stacked den Video-Playlist-Widget auf Mobile standardmäßig vertikal (Video oben, Playlist unten), aber .e-tabs-main-area hat eine fixe Höhe von 77vh und die beiden Kinder (wrapper + content- wrapper) bekommen manchmal keine definierte Höhenverteilung → die Playlist-Items werden abgeschnitten. Hier erzwingen wir den Stapel explizit und geben dem Playlist-Bereich eine eigene, scrollbare Höhe. */ @media (max-width: 767px) { .bootson-elem-widget-video-playlist .e-tabs { display: flex; flex-direction: column; height: auto; } .bootson-elem-widget-video-playlist .e-tabs-main-area { display: flex; flex-direction: column; height: auto !important; min-height: 0; } /* Video-Content-Wrapper zuerst (oben), Playlist-Wrapper danach */ .bootson-elem-widget-video-playlist .e-tabs-content-wrapper { order: 1; width: 100%; aspect-ratio: 16 / 9; min-height: 0; } .bootson-elem-widget-video-playlist .e-tabs-wrapper { order: 2; width: 100%; } /* Playlist-Header (Titel + Video-Anzahl) nicht weggedrückt */ .bootson-elem-widget-video-playlist .e-tabs-header { flex: 0 0 auto; } /* Playlist-Items bekommen eine maximale Höhe + eigenen Scroll, damit der gesamte Widget nicht unendlich lang wird. */ .bootson-elem-widget-video-playlist .e-tabs-items-wrapper { max-height: 50vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .bootson-elem-widget-video-playlist .e-tabs-items { display: flex; flex-direction: column; } /* Einzelne Playlist-Zeile: Thumbnail links, Titel + Dauer rechts, nichts abgeschnitten. */ .bootson-elem-widget-video-playlist .e-tab-title { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 10px; min-width: 0; } .bootson-elem-widget-video-playlist .e-tab-thumbnail { flex: 0 0 96px; width: 96px; max-width: 96px; } .bootson-elem-widget-video-playlist .e-tab-thumbnail img { width: 100%; height: auto; display: block; } .bootson-elem-widget-video-playlist .e-tab-title-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; overflow: hidden; } .bootson-elem-widget-video-playlist .e-tab-title-text button { white-space: normal; text-align: left; width: 100%; } .bootson-elem-widget-video-playlist .e-tab-duration { flex: 0 0 auto; font-size: 12px; opacity: 0.8; } } /* ---------- News Detail (single.php) ---------- */ .bootson-article-wrap { max-width: 820px; margin: 0 auto; padding: 48px 20px 96px; color: #e8e8e8; font-family: "Roboto", sans-serif; line-height: 1.65; } .bootson-article__hero { margin: 0 0 32px; border-radius: 4px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.5); } .bootson-article__hero img { display: block; width: 100%; height: auto; } .bootson-article__head { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.12); } .bootson-article__title, h1.wp-block-post-title { font-family: "Roboto Slab", serif; font-size: clamp(1.6rem, 4.2vw, 2.9rem); font-weight: 600; line-height: 1.15; margin: 0 0 12px; color: #fff; overflow-wrap: break-word; word-break: break-word; hyphens: auto; } @media (max-width: 759px) { .bootson-article__title, h1.wp-block-post-title { font-size: clamp(1.4rem, 5.5vw, 1.8rem); } } .bootson-article__date { margin: 0; font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; color: #FF3838; } .bootson-article__body { font-size: 1.05rem; } .bootson-article__body > * + * { margin-top: 1.1em; } .bootson-article__body h2, .bootson-article__body h3 { font-family: "Roboto Slab", serif; color: #fff; margin-top: 1.6em; line-height: 1.25; } .bootson-article__body h2 { font-size: 1.55rem; } .bootson-article__body h3 { font-size: 1.25rem; } .bootson-article__body p, .bootson-article__body li { color: #d8d8d8; } .bootson-article__body a { color: #FF3838; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .bootson-article__body a:hover { color: #fff; } .bootson-article__body img { max-width: 100%; height: auto; border-radius: 4px; margin: 1.5em auto; display: block; } .bootson-article__body blockquote { margin: 1.8em 0; padding: 16px 20px; border-left: 3px solid #FF3838; background: rgba(255,56,56,0.06); font-family: "Roboto Slab", serif; font-style: italic; color: #fff; } .bootson-article__body ul, .bootson-article__body ol { padding-left: 1.4em; } .bootson-article__body figure { margin: 1.5em 0; } .bootson-article__body figcaption { font-size: 0.85rem; color: #aaa; text-align: center; margin-top: 6px; } /* Neutralise imported Elementor wrappers — let native article styles breathe */ .bootson-article__body .elementor, .bootson-article__body [class*="bootson-elem-element"], .bootson-article__body [class*="bootson-elem-widget"], .bootson-article__body [class*="bootson-elem-container"], .bootson-article__body .e-con, .bootson-article__body .e-con-inner, .bootson-article__body .bootson-elem-widget-container { all: unset; display: block; max-width: 100%; } .bootson-article__body .bootson-elem-heading-title { display: block; } .bootson-article__body .bootson-elem-spacer, .bootson-article__body .bootson-elem-spacer-inner { display: none; } .bootson-article__foot { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); } .bootson-article__back { display: inline-block; padding: 10px 20px; font-family: "Roboto", sans-serif; font-size: 0.95rem; font-weight: 500; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.3); border-radius: 3px; transition: background 0.2s, border-color 0.2s; } .bootson-article__back:hover { background: #FF3838; border-color: #FF3838; } @media (max-width: 640px) { .bootson-article-wrap { padding: 32px 16px 64px; } .bootson-article__head { margin-bottom: 28px; } } body.bootson-single { background: #0a0a0a; color: #e8e8e8; } /* ========================================================================== Mobile Bug-Fixes (visuelles Browser-Debugging 2026-04-24) ========================================================================== Drei Bugs aus Live-DOM-Inspektion bei vw≈506: 1) body_scrollW = 1049px → 543px horizontaler Overflow. Hauptverursacher: News-Loop-Carousel .swiper-wrapper (1984px breit, Slides positioniert via Swiper-Transform). Die Swiper-Slides sind absichtlich vollbreit; .swiper MUSS overflow:hidden haben, damit die Wrapper-Breite den Body nicht aufzieht. Außerdem belt-and- braces global overflow-x:hidden auf html+body, sodass kein anderes Widget mehr scrollen kann. 2) Video-Playlist: Elementor erzwingt auf Mobile flex-direction: column-reverse auf .e-tabs-main-area, das überschreibt unsere column-Regel und kehrt Reihenfolge um. Höhere Spezifität via .bootson-elem-widget-video-playlist.bootson-elem-widget + !important. 3) Diverse Inputs/Tabellen sprengen 100vw. defensives max-width:100% auf table und e-tab-title. */ @media (max-width: 767px) { /* (1) Globaler Horizontal-Overflow-Riegel. body { overflow-x:hidden } ist hier kein Hack, sondern notwendig, weil Swiper die Wrapper-Breite = sumOf(slidesWidth) setzt und Elementor-Loop-Carousel-Slides immer 100vw breit sind → der Container MUSS clippen. */ html, body { max-width: 100%; overflow-x: hidden; } /* (1) Loop-Carousel Swiper: Container clippt, Slides bleiben in Viewport-Breite. */ .bootson-elem-widget-loop-carousel, .bootson-elem-widget-loop-carousel .bootson-elem-widget-container, .bootson-elem-widget-loop-carousel .swiper, .bootson-elem-widget-loop-carousel .bootson-elem-loop-container { max-width: 100%; overflow: hidden; } .bootson-elem-widget-loop-carousel .swiper-wrapper { max-width: 100%; } .bootson-elem-widget-loop-carousel .swiper-slide { max-width: 100vw; box-sizing: border-box; } /* (2) Video-Playlist: Elementor's column-reverse überschreiben. Erhöhte Spezifität (.bootson-elem-widget) + !important. */ .bootson-elem-widget.bootson-elem-widget-video-playlist .e-tabs, .bootson-elem-widget.bootson-elem-widget-video-playlist .e-tabs-main-area { flex-direction: column !important; } /* (2b) Mobile-Width-Override für Playlist siehe weiter unten im "Mobile: Stack layout"-Block (~line 3880) — dort gehört die Regel logisch hin und gewinnt über den Desktop-360px-Override. */ /* (3) Tabellen + Tab-Titel niemals breiter als Viewport. */ .bootson-elem-widget.bootson-elem-widget-video-playlist .e-tab-title { max-width: 100%; box-sizing: border-box; } .bootson-elem-widget-text-editor table { max-width: 100%; table-layout: fixed; word-break: break-word; } /* Sicherheits-Riegel gegen spätere Container-Überbreiten: alle Top-Level-Sektionen dürfen nie über 100vw hinausragen. */ section.bootson-spotlight-host, .bootson-spotlight-host { max-width: 100vw; overflow-x: clip; } } /* ============================================================================ POKERKARTEN — Band-Mitglieder als echte Spielkarten ============================================================================ Reines Eigenbau-Markup (siehe sections/band.php). Container-Queries für Größen-Skalierung, damit die Karten im Mobile-Scroll (~76vw) und im Desktop-Fächer (~22% Section-Breite) gleich gut aussehen. DOM: .pokercards ← Flex-Container (Deck) article.pokercard[data-rank][data-suit][--pokercard-img] .pokercard__corner--tl .pokercard__rank / .pokercard__suit .pokercard__photo ← Court-Card-Foto-Frame .pokercard__caption .pokercard__name .pokercard__role .pokercard__corner--br ← 180° gedreht */ .pokercards { --pokercard-paper: #fdfcf6; --pokercard-ink: #1a1a1a; --pokercard-red: #c8102e; --pokercard-muted: #5a5651; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0; padding: 40px 16px 48px; margin: 0 auto; max-width: 1400px; list-style: none; perspective: 1600px; } /* --- Karte --- */ .pokercard { position: relative; box-sizing: border-box; flex: 0 1 auto; /* Größer (Min 170 → Max 224) und stärker überlappend als vorher. Preferred-Werte so gewählt, dass width und margin-left im gleichen Viewport-Bereich (~1120–1400 px) zwischen Min und Max interpolieren, damit Kartenbreite und Überlapp synchron wachsen. */ width: clamp(170px, 16vw, 224px); margin-left: clamp(-62px, -5vw, -28px); aspect-ratio: 5 / 7; /* Plastischer Grau-Verlauf (oben links heller, unten rechts dunkler) gemischt mit einer feinen SVG-Fractal-Noise-Ebene als Papier-Textur. background-blend-mode: multiply blendet die Noise direkt in den Verlauf rein, sodass das Papier lebendig/faserig wirkt ohne dass die Karte grau-stumpf wird. */ background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient( 135deg, #ffffff 0%, var(--pokercard-paper) 45%, #d9d4c6 100% ); background-size: 180px 180px, 100% 100%; background-repeat: repeat, no-repeat; background-blend-mode: multiply, normal; border: 1.5px solid var(--pokercard-ink); border-radius: clamp(8px, 1.2cqw, 16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 0 0 2.5px rgba(26, 26, 26, 0.35), 0 14px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4); overflow: hidden; isolation: isolate; font-family: "Playfair Display", "Georgia", serif; color: var(--pokercard-ink); container-type: inline-size; container-name: pokercard; } /* Zusätzlicher weicher Radialverlauf auf der Kartenfläche für einen leichten "Glanzpunkt" oben links — verstärkt die 3D-Wirkung. */ .pokercard::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( ellipse at 22% 18%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55% ), radial-gradient( ellipse at 85% 92%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 60% ); border-radius: inherit; mix-blend-mode: soft-light; } .pokercard--red { --pokercard-suit-color: var(--pokercard-red); } .pokercard--black { --pokercard-suit-color: var(--pokercard-ink); } /* --- Foto: Court-Card-Frame mit definierten Insets --- */ .pokercard__photo { position: absolute; top: 13cqw; left: 9.5cqw; right: 9.5cqw; bottom: 13cqw; border-top-left-radius: 70px; border-top-right-radius: 6px; border-bottom-right-radius: 83px; border-bottom-left-radius: 6px; background-color: var(--pokercard-ink); background-image: var(--pokercard-img); background-size: cover; background-position: center 20%; background-repeat: no-repeat; filter: contrast(1.05) saturate(0.95); z-index: 1; overflow: hidden; } /* Verlauf unten auf dem Foto, damit die Name-Outline lesbar bleibt */ .pokercard__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.35) 78%, rgba(0, 0, 0, 0.7) 100%); pointer-events: none; } /* --- Caption: über dem Foto unten, mit Text-Outline --- */ .pokercard__caption { position: absolute; bottom: 25cqw; left: 0; right: 0; padding: 0 8cqw; text-align: center; z-index: 3; pointer-events: none; } .pokercard__name { margin: 0 0 1.5cqw; font-family: "Playfair Display", "Georgia", serif; font-weight: 900; font-size: 12cqw; line-height: 0.95; letter-spacing: 0.015em; text-transform: uppercase; color: #fff; -webkit-text-stroke: 0.35cqw var(--pokercard-ink); paint-order: stroke fill; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.9); } .pokercard__role { margin: 0; font-family: "Georgia", serif; font-style: italic; font-weight: 600; font-size: 4cqw; line-height: 1.15; letter-spacing: 0.06em; color: #fff; -webkit-text-stroke: 0.18cqw var(--pokercard-ink); paint-order: stroke fill; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); } /* --- Eck-Marken (Rang + Suit) --- */ .pokercard__corner { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 10cqw; height: 15cqw; padding: 1cqw 0; /* background: var(--pokercard-paper); */ /* border: 0.8px solid var(--pokercard-ink); */ border-radius: 2px; line-height: 1.1; font-family: "Playfair Display", "Georgia", serif; font-weight: 800; color: var(--pokercard-suit-color); z-index: 4; pointer-events: none; /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); */ font-size: 20px!important; } .pokercard__corner--tl { top: 9cqw; left: 5cqw; } .pokercard__corner--br { bottom: 9cqw; right: 9cqw; transform: rotate(180deg); } .pokercard__rank { font-size: 13cqw; font-weight: 800; letter-spacing: -0.02em; } .pokercard__suit { font-size: 13cqw; margin-top: 0.3cqw; } /* --- Fächer-Rotation + leichte Überlappung (alle Viewports) --- */ .pokercard { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1); transform-origin: 50% 95%; } .pokercard:nth-child(1) { transform: rotate(-9deg) translateY(18px); z-index: 1; } .pokercard:nth-child(2) { transform: rotate(-5deg) translateY(6px); z-index: 2; } .pokercard:nth-child(3) { transform: rotate(-1.5deg) translateY(0); z-index: 3; } .pokercard:nth-child(4) { transform: rotate(2deg) translateY(0); z-index: 4; } .pokercard:nth-child(5) { transform: rotate(5deg) translateY(6px); z-index: 3; } .pokercard:nth-child(6) { transform: rotate(9deg) translateY(18px); z-index: 2; } .pokercard:hover { transform: rotate(0deg) translateY(-18px) scale(1.06) !important; z-index: 10 !important; } /* --- Mobile: 2,5 Karten sichtbar + horizontal scrollbar, Fächer bleibt --- */ @media (max-width: 767px) { .pokercards { padding: 30px 0 40px; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; box-sizing: border-box; justify-content: flex-start; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding-left: 6vw; scrollbar-width: none; } .pokercards::-webkit-scrollbar { display: none; } /* Etwas Luft links/rechts damit die erste Karte nicht am Rand klebt und die letzte beim Ende sauber stoppt */ .pokercards::before, .pokercards::after { content: ""; flex: 0 0 6vw; } .pokercard { /* ~2,0 Karten sichtbar → jede einzelne deutlich größer */ width: calc((100vw - 6vw) / 2.0); margin-left: -14vw; /* starker Überlapp, eng gepackt */ flex: 0 0 auto; scroll-snap-align: center; /* Hand-Karten-Effekt: band-fan.js setzt diese Variablen dynamisch basierend auf der Scroll-Position. Fallback-Werte = statischer Fan. */ --fan-rot: 0deg; --fan-focus: 0; /* 1 = Karte ist im Viewport-Zentrum */ --fan-push: 0; /* -1..1, Vorzeichen = seitliches Wegdrücken */ transform-origin: 50% 110%; transform: translateX(calc(var(--fan-push) * 6vw)) translateY(calc(var(--fan-focus) * -20px)) rotate(calc(var(--fan-rot) * (1 - var(--fan-focus)))) scale(calc(1 + var(--fan-focus) * 0.06)); transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.3, 1); } .pokercard:first-child { margin-left: 0; } /* Fächer-Grundrotation als CSS-Variable (damit JS sie mit --fan-focus abschwächen kann, wenn die Karte "aufsteht"). Mitte stark aufgefächert, Ränder enger. */ .pokercard:nth-child(6n+1) { --fan-rot: -2deg; } .pokercard:nth-child(6n+2) { --fan-rot: -4deg; } .pokercard:nth-child(6n+3) { --fan-rot: -8deg; } .pokercard:nth-child(6n+4) { --fan-rot: 8deg; } .pokercard:nth-child(6n+5) { --fan-rot: 4deg; } .pokercard:nth-child(6n) { --fan-rot: 2deg; } .pokercard:hover, .pokercard:active { transform: rotate(0deg) translateY(-8px) scale(1.04) !important; z-index: 10 !important; } } .bootson-band-section { padding: clamp(40px, 6vw, 90px) 0 clamp(60px, 7vw, 110px); position: relative; } .bootson-band-section__inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } /* ============================================================================ MINI-ZEITUNGEN — News als Zeitungsausschnitte ============================================================================ Sauberes Markup (siehe sections/news.php). Für Swiper bleiben die Klassen `.swiper`, `.swiper-wrapper`, `.swiper-slide`, `.swiper-pagination`, `.bootson-elem-swiper-button-prev/next` erhalten — der Rest ist Eigenbau. DOM: .bootson-news-carousel .swiper > .swiper-wrapper > article.newspaper.swiper-slide .newspaper__masthead .newspaper__edition-line a.newspaper__photo .newspaper__headline .newspaper__kicker / .newspaper__title / .newspaper__byline */ .bootson-news-section { padding: clamp(40px, 6vw, 90px) 0 clamp(20px, 2.5vw, 40px); position: relative; } .bootson-news-section__inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } .bootson-news-carousel { --newspaper-paper: #f1e7ce; --newspaper-ink: #1a1a1a; --newspaper-muted: #6b5d4a; --newspaper-accent: #c8102e; position: relative; } .bootson-news-carousel .swiper { overflow: hidden; /* Großzügiges Padding oben/unten damit die rotierten Ecken (bis 5.4° auf ~320 px ≈ 16 px Überstand) nicht vom Swiper-Clip abgeschnitten werden. Unten zusätzlich Platz für die Pagination. Inline-Padding (links/rechts): die rotated Newspaper-Bounding-Boxes ragen 14-17 px seitlich über die Slide-Bounds — ohne padding-inline beißt der overflow:hidden die Karten links/rechts ab. */ padding: 44px 32px 64px; } .bootson-news-carousel .swiper-wrapper { align-items: center; } /* Slides dürfen ihre gedrehten Ecken in den Nachbar-Slide hineinragen lassen — sonst beisst die Rotation am Slide-Rand ab. */ .bootson-news-carousel .swiper-slide { overflow: visible !important; } /* --- Einzelne Zeitung --- */ .newspaper { box-sizing: border-box; display: flex; flex-direction: column; /* Fixes Blatt-Format 3:4 (wie eine kleine Zeitung) */ aspect-ratio: 3 / 4; height: auto; background: var(--newspaper-paper); background-image: repeating-linear-gradient( 0deg, rgba(43, 38, 32, 0.04) 0px, rgba(43, 38, 32, 0.04) 1px, transparent 1px, transparent 3px ); color: var(--newspaper-ink); border: 1px solid var(--newspaper-ink); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--newspaper-paper), inset 0 0 0 2.5px rgba(26, 26, 26, 0.18), 0 14px 36px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4); overflow: hidden; position: relative; container-type: inline-size; container-name: newspaper; font-family: "Playfair Display", "Times New Roman", serif; text-decoration: none; } /* --- Masthead --- */ .newspaper__masthead { display: flex; align-items: center; justify-content: center; gap: 0.5ch; padding: 8px 8px 4px; border-bottom: 1px solid var(--newspaper-ink); font-family: "Playfair Display", "Times New Roman", serif; font-weight: 900; font-style: italic; font-size: clamp(11px, 6cqw, 20px); line-height: 1; letter-spacing: 0.005em; color: var(--newspaper-ink); text-align: center; flex: 0 0 auto; } .newspaper__star { font-style: normal; font-weight: 400; font-size: 0.8em; color: var(--newspaper-muted); } .newspaper__title-word { white-space: nowrap; } /* --- Edition-Strip --- */ .newspaper__edition-line { padding: 3px 6px 4px; border-bottom: 2.5px double var(--newspaper-ink); font-family: "Georgia", serif; font-weight: 600; font-size: clamp(6px, 1.7cqw, 9.5px); letter-spacing: 0.15em; color: #2b2620; text-transform: uppercase; text-align: center; line-height: 1.2; flex: 0 0 auto; } /* --- Foto (sepia-getönt) --- */ .newspaper__photo { display: block; position: relative; flex: 1 1 auto; min-height: 0; aspect-ratio: 4 / 3; margin: 6px 6px 0; border: 1px solid var(--newspaper-ink); background-color: #d4b896; background-blend-mode: multiply; background-size: cover; background-position: center 25%; background-repeat: no-repeat; overflow: hidden; text-decoration: none; color: inherit; } .newspaper__photo::after { /* leichte Papier-Vignette damit das Foto wie gedruckt wirkt */ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 60%, rgba(43, 38, 32, 0.22) 100%), linear-gradient(180deg, rgba(180, 140, 80, 0.12), rgba(180, 140, 80, 0.18)); mix-blend-mode: multiply; pointer-events: none; } /* Hidden-Label (Screen-Reader) */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* --- Headline-Strip unten --- */ .newspaper__headline { padding: 8px 10px 10px; margin: 0 6px 6px; background-color: var(--newspaper-paper); border-top: 3px double var(--newspaper-ink); border-bottom: 1px solid var(--newspaper-ink); flex: 0 0 auto; text-align: center; /* Platz für 3 Zeilen Headline + Kicker + Byline reservieren, damit kurze Titel die Fotofläche nicht nach unten "aufpumpen" und alle Kacheln gleich aussehen. */ min-height: 30cqw; display: flex; flex-direction: column; justify-content: center; } .newspaper__kicker { display: block; font-family: "Georgia", serif; font-style: italic; font-weight: 400; font-size: clamp(7px, 1.8cqw, 9.5px); letter-spacing: 0.3em; color: var(--newspaper-muted); text-transform: uppercase; margin-bottom: 4px; } .newspaper__title { margin: 0; font-family: "Playfair Display", "Times New Roman", serif; font-weight: 900; font-size: clamp(13px, 3.3cqw, 18px); line-height: 1.15; letter-spacing: -0.005em; color: var(--newspaper-ink); text-transform: uppercase; /* Auf 3 Zeilen begrenzen — verhindert dass lange Headlines die Kachel höher werden lassen als das aspect-ratio. Alle Zeitungen bleiben dadurch identisch hoch. */ display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .newspaper__title a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.25s, color 0.25s; } .newspaper__title a:hover { color: var(--newspaper-accent); background-size: 100% 1px; } .newspaper__byline { display: block; margin-top: 5px; font-family: "Georgia", serif; font-style: italic; font-size: clamp(7px, 1.7cqw, 9.5px); color: var(--newspaper-muted); letter-spacing: 0.05em; } /* --- Nav-Buttons --- */ .bootson-news-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; padding: 0; border: none; background: rgba(26, 26, 26, 0.8); color: #f1e7ce; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; box-shadow: 0 4px 14px rgba(0,0,0,0.4); } .bootson-news-nav:hover { background: rgba(200, 16, 46, 0.92); transform: translateY(-50%) scale(1.08); } .bootson-news-nav svg { width: 20px; height: 20px; fill: currentColor; } .bootson-news-nav--prev { left: -6px; } .bootson-news-nav--next { right: -6px; } @media (max-width: 767px) { .bootson-news-nav { display: none; } } /* --- Pagination --- */ .bootson-news-carousel .swiper-pagination { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; z-index: 4; } .bootson-news-carousel .swiper-pagination-bullet { width: 9px; height: 9px; background: rgba(241, 231, 206, 0.35); opacity: 1; margin: 0 5px; transition: background 0.2s, transform 0.2s; } .bootson-news-carousel .swiper-pagination-bullet-active { background: #f1e7ce; transform: scale(1.25); } /* --- Deutlich sichtbare zufällige Schräglage (7er-Muster) --- */ .newspaper { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1); } /* WICHTIG: .newspaper IST das .swiper-slide (gleiches Element), daher .swiper-slide.newspaper (kein Descendant!). Swiper selbst setzt Transforms nur auf .swiper-wrapper, nicht auf einzelne Slides, also kein Konflikt. !important für den Fall dass Plugins doch draufstyleN. */ .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n+1) { transform: rotate(-4.2deg) translateY(5px) !important; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n+2) { transform: rotate(2.8deg) translateY(-4px) !important; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n+3) { transform: rotate(-1.4deg) translateY(3px) !important; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n+4) { transform: rotate(5.1deg) translateY(-2px) !important; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n+5) { transform: rotate(-3.3deg) translateY(-5px) !important; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n+6) { transform: rotate(1.1deg) translateY(4px) !important; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n) { transform: rotate(-5.4deg) translateY(-1px) !important; } /* Desktop-only Hover-Lift: Karte richtet sich kurz auf */ @media (min-width: 768px) { .newspaper:hover { transform: rotate(0deg) translateY(-8px) scale(1.03) !important; z-index: 3; } } /* Mobile: gleiche Zeitungsidee, aber etwas gedämpft und minimal kleiner. Die Zeitung ist zugleich die Swiper-Slide; Swiper berechnet die Breite. Ein optisches scale() gibt den geneigten Ecken Luft im Clip-Viewport, ohne die Slider-Math zu verändern. */ @media (max-width: 767px) { .bootson-news-carousel .swiper-slide.newspaper { transform-origin: center center; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n+1) { transform: rotate(-2.4deg) translateY(3px) scale(0.94) !important; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n+2) { transform: rotate(1.6deg) translateY(-2px) scale(0.94) !important; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n+3) { transform: rotate(-0.8deg) translateY(2px) scale(0.94) !important; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n+4) { transform: rotate(2.9deg) translateY(-1px) scale(0.94) !important; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n+5) { transform: rotate(-1.9deg) translateY(-3px) scale(0.94) !important; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n+6) { transform: rotate(0.6deg) translateY(2px) scale(0.94) !important; } .bootson-news-carousel .swiper-slide.newspaper:nth-child(7n) { transform: rotate(-3.1deg) translateY(-1px) scale(0.94) !important; } } /* EN-Mirror: Reportage → Featured Story */ html[lang="en"] .newspaper__kicker, html[lang="en-US"] .newspaper__kicker { /* Kicker-Text steht im HTML; Mini-JS unten oder PHP-i18n übersetzt später. Für jetzt belassen wir „Reportage" in beiden Sprachen. */ } /* ---------- Booking-CTA Mobile Layout ---------- Desktop-Default: Heading oben, darunter drei nebeneinander liegende Boxen (Phone · Envelope+Text · WhatsApp). Mobile: Heading oben → „Die Band buchen"-Link direkt drunter → darunter eine einzige Zeile mit den drei Icons. Dazu flatten wir die Elementor-Container per display:contents, sodass die vier Widgets direkte Kinder des Grids werden. */ @media (max-width: 767px) { .bootson-elem-element-b7ae0b0 { flex-direction: column !important; align-items: stretch !important; } .bootson-elem-element-f26b8fa { display: grid !important; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "text text text" "phone env wa"; row-gap: 18px; column-gap: 8px; align-items: center; justify-items: center; padding: 8px 4vw 0 !important; margin: 0 auto !important; width: 100% !important; max-width: 520px; } /* Elementor-Wrapper auflösen, damit die Widgets direkt ins Grid fallen */ .bootson-elem-element-27d237f, .bootson-elem-element-104be49, .bootson-elem-element-2d4630f, .bootson-elem-element-27d237f > .e-con-inner, .bootson-elem-element-104be49 > .e-con-inner, .bootson-elem-element-2d4630f > .e-con-inner { display: contents !important; } .bootson-elem-element-b1fb862 { grid-area: phone; } .bootson-elem-element-0b95526 { grid-area: env; } .bootson-elem-element-5fdf9ec { grid-area: wa; } .bootson-elem-element-567b86e { grid-area: text; text-align: center; padding: 0 4vw; } .bootson-elem-element-567b86e .bootson-elem-heading-title { font-size: clamp(14px, 3.8vw, 18px); line-height: 1.35; } } /* ============================================================ PRE-LAUNCH MOBILE-AUDIT FIXES (Tom 2026-05-04) ============================================================ Aus dem responsive-Audit-Report: Show-Termine kollabieren auf Handy, Setlist-Letter-Stacking, Hero-H1 clipped, Cursive-Headings abgeschnitten, Polaroids überlappen, etc. Alle Fixes hier gesammelt damit man sie als Block versteht/wartet. -------------------------------------------------------------- */ @media (max-width: 767px) { /* --- 1) Hero-H1 auf Booking-Seite überlauft Karte --------- */ .bk-hero__title { font-size: clamp(1.5rem, 6vw, 2.4rem) !important; word-break: keep-all; hyphens: auto; overflow-wrap: break-word; } .bk-hero__poster { padding: clamp(28px, 4vw, 48px) clamp(18px, 4vw, 32px) !important; } /* --- 2) Show-Termine Mobile: Tabelle behalten, nur Spalten glätten --- Der Tabellencharakter bleibt sichtbar; der Orts-Spalte geben wir etwas mehr Platz und halten Datum/Tickets stabil. */ #shows .bootson-elem-1404 :is( .bootson-elem-element-518cdb35, .bootson-elem-element-dcb2c3d, .bootson-elem-element-ffe4072, .bootson-elem-element-7f9a08e, .bootson-elem-element-90e34a4, .bootson-elem-element-e871b38, .bootson-elem-element-a90b135, .bootson-elem-element-3b9b3c8a ) { width: min(calc(100% - 28px), 700px); max-width: calc(100% - 28px); margin-left: auto !important; margin-right: auto !important; } #shows .bootson-elem-1404 :is( .bootson-elem-element-518cdb35, .bootson-elem-element-dcb2c3d, .bootson-elem-element-ffe4072, .bootson-elem-element-7f9a08e, .bootson-elem-element-90e34a4, .bootson-elem-element-e871b38, .bootson-elem-element-a90b135 ) > .bootson-elem-container { display: flex; flex-wrap: nowrap; align-items: stretch; } #shows .bootson-elem-1404 :is( .bootson-elem-element-518cdb35, .bootson-elem-element-dcb2c3d, .bootson-elem-element-ffe4072, .bootson-elem-element-7f9a08e, .bootson-elem-element-90e34a4, .bootson-elem-element-e871b38, .bootson-elem-element-a90b135 ) .bootson-elem-col-33:nth-child(1) { flex: 0 0 27% !important; max-width: 27% !important; } #shows .bootson-elem-1404 :is( .bootson-elem-element-518cdb35, .bootson-elem-element-dcb2c3d, .bootson-elem-element-ffe4072, .bootson-elem-element-7f9a08e, .bootson-elem-element-90e34a4, .bootson-elem-element-e871b38, .bootson-elem-element-a90b135 ) .bootson-elem-col-33:nth-child(2) { flex: 1 1 51% !important; max-width: 51% !important; min-width: 0; } #shows .bootson-elem-1404 :is( .bootson-elem-element-518cdb35, .bootson-elem-element-dcb2c3d, .bootson-elem-element-ffe4072, .bootson-elem-element-7f9a08e, .bootson-elem-element-90e34a4, .bootson-elem-element-e871b38, .bootson-elem-element-a90b135 ) .bootson-elem-col-33:nth-child(3) { flex: 0 0 22% !important; max-width: 22% !important; } #shows .bootson-elem-1404 .bootson-elem-element-518cdb35 .bootson-elem-heading-title { white-space: nowrap !important; font-size: clamp(13px, 3.5vw, 17px) !important; line-height: 1.15; } #shows .bootson-elem-1404 :is( .bootson-elem-element-dcb2c3d, .bootson-elem-element-ffe4072, .bootson-elem-element-7f9a08e, .bootson-elem-element-90e34a4, .bootson-elem-element-e871b38, .bootson-elem-element-a90b135 ) .bootson-elem-heading-title { font-size: clamp(12px, 3.2vw, 14px) !important; line-height: 1.22 !important; } #shows .bootson-elem-1404 :is( .bootson-elem-element-dcb2c3d, .bootson-elem-element-ffe4072, .bootson-elem-element-7f9a08e, .bootson-elem-element-90e34a4, .bootson-elem-element-e871b38, .bootson-elem-element-a90b135 ) .bootson-elem-col-33:nth-child(1) .bootson-elem-heading-title, #shows .bootson-elem-1404 :is( .bootson-elem-element-dcb2c3d, .bootson-elem-element-ffe4072, .bootson-elem-element-7f9a08e, .bootson-elem-element-90e34a4, .bootson-elem-element-e871b38, .bootson-elem-element-a90b135 ) .bootson-elem-col-33:nth-child(3) .bootson-elem-heading-title { white-space: nowrap; } #shows .bootson-elem-1404 :is( .bootson-elem-element-dcb2c3d, .bootson-elem-element-ffe4072, .bootson-elem-element-7f9a08e, .bootson-elem-element-90e34a4, .bootson-elem-element-e871b38, .bootson-elem-element-a90b135 ) .bootson-elem-col-33:nth-child(2) a { overflow-wrap: normal; word-break: normal; } #shows .bootson-elem-1404 .bootson-elem-element-3b9b3c8a .bootson-elem-heading-title { font-size: clamp(12px, 3.4vw, 14px) !important; line-height: 1.25 !important; } /* --- 3) Setlist-Letter-Stacking verhindern ---------------- */ /* Manche Setlist-Cells brachen char-für-char weil break-word aktiv war. word-break: keep-all + nowrap verhindert das. */ .bootson-elem-element-4d1d7aa table td, .bootson-elem-element-4d1d7aa table th, .bootson-setlist td, .bootson-setlist th { word-break: keep-all !important; white-space: nowrap !important; overflow-wrap: normal !important; } /* --- 4) Cursive Section-Headings (Stimmen/Social/About) --- */ /* Headings werden via background-image gerendert. Der Container überdehnt rechts. Width auf 100% mit Bild contain-skaling. */ .bootson-section h2, .bootson-section h3, .bootson-eyebrow, .bootson-elem-heading-title { max-width: 100% !important; overflow-wrap: break-word !important; } /* Cursive PNG-Headings die als img gerendert werden */ [class*="bootson-elem-element"] img[src*="Stimmen"], [class*="bootson-elem-element"] img[src*="Social"], [class*="bootson-elem-element"] img[src*="About"], [class*="bootson-elem-element"] img[src*="Eindruecke"], [class*="bootson-elem-element"] img[src*="Setlist"], [class*="bootson-elem-element"] img[src*="Logo-Neon"] { max-width: 92vw !important; width: auto !important; height: auto !important; object-fit: contain !important; } /* --- 5) Newspaper/Band-Carousel right-edge overflow ------- ACHTUNG: max-width:100% / overflow-x:hidden NICHT auf .swiper-wrapper setzen — der Wrapper muss N×slide-width breit sein damit Swiper's translateX zwischen Slides funktioniert. Sonst landet die nächste Slide off-screen (Bug 2026-05-05). Nur die OUTER-Container clippen. */ .bootson-news-carousel, .bootson-news-carousel .swiper, .bootson-band-carousel, .bootson-band-carousel .swiper { max-width: 100% !important; overflow-x: hidden !important; } .bootson-news-carousel .swiper-slide img, .bootson-band-carousel .swiper-slide img { max-width: 100% !important; height: auto !important; } /* --- 6) Band-Member Polaroids skalieren auf Viewport ------ */ .bootson-band-section .bootson-elem-column, .bootson-band-card, .bootson-band__card { max-width: 100% !important; width: 100% !important; } .bootson-band-section img { max-width: 100% !important; height: auto !important; } /* --- 7) Playlist-Sidebar (rotated label) ausblenden ------- */ .bootson-elem-widget-video-playlist .e-vp__playlist-title, .bootson-elem-widget-video-playlist [class*="playlist-title"] { display: none !important; } /* --- 8) "Gesehen bei" Pills in saubere Zeile ------------- */ .bk-refs--text { justify-content: flex-start !important; gap: 8px !important; padding: 0 4vw !important; } .bk-refs__pill { font-size: 0.78rem !important; padding: 8px 14px !important; } /* --- 9) Hero-Photo Polaroid kleiner skalieren ------------- */ .bk-hero__photo { max-width: 90vw !important; } /* --- 10) Generelle Image-Overflow-Verhinderung ------------ */ main img, section img, article img, figure img { max-width: 100% !important; height: auto !important; } /* --- 11) Press-Page Artikel: rote Headline rutscht über Bild Auf Press-Mirror-Page sind alle Artikel als Elementor-Loop gerendert. Auf Mobile soll Bild über Titel statt drüber. */ body.bootson-press article img { display: block; margin-bottom: 12px; width: 100%; height: auto; } body.bootson-press .bootson-elem-loop-item h2, body.bootson-press .bootson-elem-loop-item h3 { position: static !important; color: var(--accent, #e8734a) !important; font-size: 1.05rem !important; line-height: 1.3 !important; padding: 8px 12px !important; background: rgba(0,0,0,0.4) !important; border-radius: 4px !important; } } /* ============================================================ Booking-Form auf Mobile (kein Blocker mehr — Form rendert) ============================================================ */ @media (max-width: 759px) { /* Form-Karte schlanker, kein dramatischer Tilt */ .bk-paper.bk-calc__form { padding: 22px 16px !important; } .bk-fieldset { padding: 0 !important; border: 0 !important; } .bk-field { margin-bottom: 12px; } .bk-field__label { font-size: 0.86rem; } .bk-input, .bk-select, .bk-textarea { font-size: 16px !important; /* iOS auto-zoom-prevention */ padding: 11px 12px !important; } /* Calc-Output-Karte unter Form, full-width */ .bk-calc__layout { display: flex; flex-direction: column; gap: 16px; } .bk-out { width: 100%; padding: 18px 16px !important; transform: none !important; } .bk-out__big { font-size: 1.5rem !important; } /* Submit-Button volle Breite + große Hit-Area */ .bk-actions .bk-btn--primary, .bk-actions [type="submit"] { width: 100% !important; min-height: 48px !important; font-size: 1rem !important; } } /* ============================================================ Body-Overflow guard — verhindert horizontalen Scroll überall ============================================================ */ html, body { overflow-x: hidden !important; max-width: 100vw; } /* ============================================================ Video-Playlist Widget Layout (Tom 2026-05-04) ============================================================ Elementor's frontend.min.js setzt normally inline-styles auf das Video-Playlist-Widget (display:flex auf .e-tabs-main-area etc.). Da wir das JS nicht laden, muss das Layout hier statisch definiert sein. Sidebar links (Playlist), Hauptvideo rechts. -------------------------------------------------------------- */ .bootson-elem-widget-video-playlist { display: block; } /* Layout matcht Original boots-on.at: - Sidebar RECHTS (row-reverse) - Total height ~430px (Video diktiert, Sidebar passt sich an) - Kompakte Items, scrollbare Liste */ .bootson-elem-widget-video-playlist .e-tabs-main-area { display: flex !important; flex-direction: row-reverse !important; gap: 0; align-items: stretch; height: 430px; max-height: 430px; } .bootson-elem-widget-video-playlist.e-tabs-view-vertical .e-tabs-wrapper { flex: 0 0 360px !important; max-width: 360px !important; background: #2E0000; overflow: hidden; display: flex; flex-direction: column; height: 100%; } .bootson-elem-widget-video-playlist.e-tabs-view-vertical .e-tabs-content-wrapper { flex: 1; background: #000; display: flex; align-items: stretch; justify-content: center; height: 100%; min-width: 0; } /* Video soll volle Höhe + 16:9 einhalten, oder cropping wenn Container zu schmal */ .bootson-elem-widget-video-playlist .e-tab-content[hidden] { display: none !important; } .bootson-elem-widget-video-playlist .e-tab-content:not([hidden]) { width: 100%; height: 100%; position: relative; } .bootson-elem-widget-video-playlist .bootson-video-frame { width: 100%; height: 100%; aspect-ratio: auto !important; position: absolute; inset: 0; } .bootson-elem-widget-video-playlist .bootson-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .bootson-elem-widget-video-playlist .e-tabs-header { flex: 0 0 auto; padding: 16px 20px; background: #000; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .bootson-elem-widget-video-playlist .e-tabs-title { margin: 0; font-size: 1.25rem; line-height: 1.2; } .bootson-elem-widget-video-playlist .e-tabs-videos-count { font-size: 0.85rem; opacity: 0.8; } /* Header-right-side enthält Videos-Count + ein Toggle-Caret-Icon, das normalerweise von Elementor als 16x16 SVG gestylt wird. Ohne die Plugin-CSS rendert es riesig. Begrenzen + neben den Count stellen. */ .bootson-elem-widget-video-playlist .e-tabs-header-right-side { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px; width: auto !important; height: auto !important; flex: 0 0 auto !important; } /* Caret-Down-Toggle entfernt (Tom 2026-05-04) — der Button funktioniert ohne Elementor-JS sowieso nicht und sieht ohne Funktion verloren aus. */ .bootson-elem-widget-video-playlist .e-tabs-toggle-videos-display-button { display: none !important; } /* Shadow-Indicators (Top/Bottom-Fade beim Scrollen): Elementor zeigt sie normalerweise als 24px Gradient. Ohne Plugin-CSS sind sie undefiniert und nehmen Platz weg. Versteckt — Scrollbar reicht als Hint. */ .bootson-elem-widget-video-playlist .shadow-top, .bootson-elem-widget-video-playlist .shadow-bottom { display: none !important; } /* Widget braucht eigenen Hintergrund damit das lila Spotlight-Glow nicht durchschimmert. Original hat dunkelroten Hintergrund. */ .bootson-elem-widget-video-playlist { background: #1a0606; border-radius: 5px; overflow: hidden; position: relative; z-index: 1; } .bootson-elem-widget-video-playlist .e-tabs-items-wrapper { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; -webkit-overflow-scrolling: touch; } .bootson-elem-widget-video-playlist .e-tabs-items-wrapper .shadow-top, .bootson-elem-widget-video-playlist .e-tabs-items-wrapper .shadow-bottom { pointer-events: none; position: sticky; height: 24px; z-index: 2; } .bootson-elem-widget-video-playlist .e-tabs-items { display: flex; flex-direction: column; } .bootson-elem-widget-video-playlist .e-tab-title { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.06); transition: background 0.18s; } .bootson-elem-widget-video-playlist .e-tab-title:hover { background: rgba(255,255,255,0.04); } .bootson-elem-widget-video-playlist .e-tab-title.e-active { background: rgba(255, 56, 56, 0.18); border-left: 3px solid #FF3838; padding-left: 13px; } /* Thumbnails matchen Original boots-on.at: ~80px wide, 16:9, cover. */ .bootson-elem-widget-video-playlist .e-tab-thumbnail { flex: 0 0 80px !important; width: 80px !important; height: 45px !important; min-height: 0 !important; overflow: hidden; border-radius: 2px; background: #111; margin: 0 !important; position: relative; } .bootson-elem-widget-video-playlist .e-tab-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; position: absolute; inset: 0; } /* Play-Icon kleinen Overlay rechts unten auf jedem Thumb (Elementors SVG) */ .bootson-elem-widget-video-playlist .e-tab-thumbnail .icon-play { position: absolute; right: 4px; bottom: 4px; z-index: 2; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); } .bootson-elem-widget-video-playlist .e-tab-thumbnail .icon-play svg { width: 18px; height: 18px; display: block; fill: currentColor; } .bootson-elem-widget-video-playlist .e-tab-title-text { flex: 1; min-width: 0; margin: 0; font-size: 0.9rem; line-height: 1.3; font-weight: 500; } /* Inner