/* style.css
   Modern EDM / Big Room DJ site
   Component and page styles
*/

@import url("style-foundation.css");

/* Production fallback: keep background watermark visible even if style-foundation is stale */
body::before{
  background-image:url("images/logo_short_white.png?v=20260218");
  z-index:0;
}

body > main,
body > footer{
  position:relative;
  z-index:1;
}

/* ========== HEADER ========== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
  border-bottom:1px solid rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
  transition: transform .26s ease;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.9rem 1rem; max-width:var(--max-width); margin:0 auto; }
.brand{ display:inline-flex; align-items:center; flex-shrink:0; min-width:0; }
.logo-img{
  max-height:48px;
  height:auto;
  width:auto;
  max-width:320px;
  display:block;
  object-fit:contain;
  aspect-ratio:auto;
  flex-shrink:0;
  filter: drop-shadow(0 6px 18px rgba(127,0,178,0.14));
}

/* NAV */
.main-nav ul{ display:flex; gap:1.1rem; list-style:none; margin:0; padding:0; align-items:center; }
.main-nav a{ font-weight:600; color:var(--muted); padding:0.5rem 0.6rem; border-radius:8px; transition: color .15s ease, transform .12s ease; }
.main-nav a:hover{ color:var(--white); transform: translateY(-2px); text-shadow:0 6px 18px rgba(127,0,178,0.08); }

/* Active page indicator in header nav */
body.page-home .main-nav a[href="index.html"],
body.page-leistungen .main-nav a[href="leistungen.html"],
body.page-rider .main-nav a[href="technical-rider.html"],
body.page-setup .main-nav a[href="technik-setup.html"],
body.page-qa .main-nav a[href="wer-bin-ich.html"],
body.page-gallery .main-nav a[href="galerie.html"],
body.page-availability .main-nav a[href="availability.html"],
body.page-contact .main-nav a[href="contact.html"]{
  color:var(--white);
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: 0 0 0 1px rgba(127,0,178,0.10), 0 0 14px rgba(255,109,0,0.10);
}

/* NAV TOGGLE (checkbox hack) */
.nav-toggle{ display:none; }
.nav-toggle-label{ display:none; width:46px; height:42px; cursor:pointer; position:relative; }
.nav-toggle-label span{ display:block; height:3px; width:28px; margin:6px 0; background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); border-radius:4px; transition: transform .24s ease, opacity .2s ease; }
.nav-toggle:focus + .nav-toggle-label,
.nav-toggle-label:focus-visible{ outline:3px solid rgba(127,0,178,0.35); outline-offset:4px; border-radius:8px; }

/* Screen-reader only helper */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:fixed;
  top:0.75rem;
  left:0.75rem;
  z-index:200;
  padding:0.65rem 0.9rem;
  border-radius:10px;
  background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));
  color:var(--white);
  font-weight:700;
  transform:translateY(-150%);
  transition:transform .2s ease;
}

.skip-link:focus,
.skip-link:focus-visible{
  transform:translateY(0);
}

:target{
  scroll-margin-top:16px;
}

#performance:target,
#sorglos:target,
#bigstage:target{
  scroll-margin-top:-48px;
}

/* ========== COMBINED HERO + ABOUT ========== */
.hero-combined{ margin-top:84px; min-height:72vh; background:transparent; color:var(--white); padding:3.25rem 1.25rem 6rem; border-bottom:1px solid rgba(0,0,0,0.06); position:relative; overflow:visible; z-index:1; }
.hero-combined .hero-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; align-items:start; max-width:var(--max-width); margin:0 auto; position:relative; z-index:2; overflow:visible; }
.left-stack{ display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; text-align:right; gap:1.2rem; padding:0 2rem 0.4rem; height:100%; align-self:start; }
.logo-short{ max-height:320px; max-width:600px; width:100%; height:auto; display:block; margin:0; }
.logo-long-wrap{ position:relative; width:100%; display:flex; align-items:center; justify-content:flex-end; }
.logo-long{ max-width:600px; width:100%; height:auto; display:block; }
.logo-short,
.logo-long,
.logo-long-wrap{
  border-radius:0 !important;
  clip-path:none !important;
}
.about-text{ color:var(--white); max-width:48ch; padding:1rem 0; margin:0; text-align:right; font-size:1.4rem; }
.right-portrait{ display:flex; align-items:flex-start; justify-content:center; padding:0 1.8rem 2.2rem; overflow:hidden; align-self:start; margin-top:-1rem; }
.portrait-wrap{ position:relative; width:100%; max-width:640px; padding:0; overflow:hidden; border-radius:12px; isolation:isolate; contain:paint; }
.portrait-img{ width:100%; display:block; aspect-ratio:2/3; object-fit:cover; border-radius:12px; box-shadow:none; max-height:780px; }

/* Focused moving head-beam + strobe overlay */
.portrait-overlay{
  position:absolute; inset:0; border-radius:12px; pointer-events:none; opacity:0; transition:opacity .18s ease; mix-blend-mode:screen; filter: saturate(140%);
  background: transparent;
  overflow:hidden;
  transform: translateZ(0);
  backface-visibility:hidden;
}

/* Haze/fog layer to make beams and lasers feel volumetric */
.portrait-overlay .haze{
  position:absolute;
  inset:-8%;
  border-radius:16px;
  pointer-events:none;
  z-index:2;
  opacity:0.34;
  mix-blend-mode:screen;
  background:
    radial-gradient(78% 64% at 22% 28%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 74%),
    radial-gradient(74% 70% at 74% 62%, rgba(127,0,178,0.24) 0%, rgba(127,0,178,0.06) 44%, rgba(127,0,178,0) 78%),
    radial-gradient(62% 58% at 44% 84%, rgba(64,112,255,0.2) 0%, rgba(64,112,255,0.04) 46%, rgba(64,112,255,0) 80%);
  filter: blur(18px) saturate(116%);
  transform: scale(1.05);
  animation: hazeDriftSoft 11s ease-in-out infinite paused, hazeBreath 6.5s ease-in-out infinite paused;
}

.portrait-overlay .haze::before,
.portrait-overlay .haze::after{
  content:"";
  position:absolute;
  inset:-10%;
  border-radius:22px;
  pointer-events:none;
}

.portrait-overlay .haze::before{
  opacity:0.28;
  background:
    radial-gradient(58% 42% at 30% 30%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(46% 36% at 68% 56%, rgba(127,0,178,0.16) 0%, rgba(127,0,178,0) 76%);
  filter: blur(20px);
  animation: hazeLayerA 13s ease-in-out infinite paused;
}

.portrait-overlay .haze::after{
  opacity:0.24;
  background:
    radial-gradient(44% 40% at 40% 72%, rgba(64,112,255,0.16) 0%, rgba(64,112,255,0) 76%),
    radial-gradient(52% 34% at 76% 24%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 72%);
  filter: blur(24px);
  animation: hazeLayerB 15s ease-in-out infinite paused;
}


/* Beam elements: top and bottom moving-head cones */
.portrait-overlay .beam{ position:absolute; transform-origin:center top; pointer-events:none; mix-blend-mode:screen; filter: blur(7px) saturate(130%) drop-shadow(0 12px 36px rgba(0,0,0,0.6)); opacity:0.0; z-index:3; }

/* Narrow laser bars with fast scan pattern */
.portrait-overlay .laser{
  position:absolute;
  top:-14%;
  width:1.5%;
  height:132%;
  pointer-events:none;
  z-index:4;
  opacity:0.72;
  mix-blend-mode:screen;
  filter: blur(1.8px) saturate(145%) drop-shadow(0 0 14px rgba(255,255,255,0.42));
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(127,0,178,0.74) 22%, rgba(64,112,255,0.68) 52%, rgba(255,255,255,0.04) 100%);
  transform-origin: center top;
}

.portrait-overlay .laser-1{ left:14%; animation: laserScanA 1.875s ease-in-out 0s infinite paused; }
.portrait-overlay .laser-2{ left:38%; animation: laserScanB 1.875s ease-in-out .08s infinite paused; }
.portrait-overlay .laser-3{ left:62%; animation: laserScanC 1.875s ease-in-out .16s infinite paused; }
.portrait-overlay .laser-4{ left:86%; animation: laserScanD 1.875s ease-in-out .24s infinite paused; }

/* Cone-shaped beams using triangle clip-paths; widths and colors differ per beam */
.portrait-overlay .beam-top{
  top:-8%; height:130%; transform-origin:center top; clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.portrait-overlay .beam-bottom{
  bottom:-12%; height:122%; transform-origin:center bottom; clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}

/* Top beams colors and sizing (smaller cones) */
.beam-top-1{ left:30%; width:48%; background: linear-gradient(180deg, rgba(127,0,178,0.95) 0%, rgba(186,102,255,0.30) 30%, rgba(127,0,178,0.00) 70%); }
.beam-top-2{ left:50%; width:40%; background: linear-gradient(180deg, rgba(255,92,182,0.95) 0%, rgba(255,140,210,0.30) 30%, rgba(255,92,182,0.00) 70%); }
.beam-top-3{ left:70%; width:34%; background: linear-gradient(180deg, rgba(255,109,0,0.95) 0%, rgba(255,166,92,0.30) 30%, rgba(255,109,0,0.00) 70%); }

/* Bottom beams colors and sizing (same palette: white + purple + orange) */
.beam-bottom-1{ left:30%; width:48%; background: linear-gradient(0deg, rgba(255,109,0,0.95) 0%, rgba(255,166,92,0.30) 30%, rgba(255,109,0,0.00) 70%); }
.beam-bottom-2{ left:50%; width:40%; background: linear-gradient(0deg, rgba(255,92,182,0.95) 0%, rgba(255,140,210,0.30) 30%, rgba(255,92,182,0.00) 70%); }
.beam-bottom-3{ left:70%; width:34%; background: linear-gradient(0deg, rgba(127,0,178,0.95) 0%, rgba(186,102,255,0.30) 30%, rgba(127,0,178,0.00) 70%); }


/* Programmed beam sequences with staggered rhythmic pulse for each cone */


.beam-top-1{ animation: beamTopSwingA 5.6s ease-in-out 0s infinite paused, beamRhythm 5.6s ease-in-out 0s infinite paused; }
.beam-top-2{ animation: beamTopSwingB 5.6s ease-in-out .14s infinite paused, beamRhythm 5.6s ease-in-out 0s infinite paused; }
.beam-top-3{ animation: beamTopSwingC 5.6s ease-in-out .28s infinite paused, beamRhythm 5.6s ease-in-out 0s infinite paused; }

.beam-bottom-1{ animation: beamBottomSwingA 7.2s ease-in-out .07s infinite paused, beamRhythmBottom 7.2s ease-in-out 0s infinite paused; }
.beam-bottom-2{ animation: beamBottomSwingB 7.2s ease-in-out .2s infinite paused, beamRhythmBottom 7.2s ease-in-out 0s infinite paused; }
.beam-bottom-3{ animation: beamBottomSwingC 7.2s ease-in-out .33s infinite paused, beamRhythmBottom 7.2s ease-in-out 0s infinite paused; }


@keyframes beamTopSwingA{
  0%,100%{ transform: translateX(-50%) rotate(-30deg) scaleX(0.88); }
  50%{ transform: translateX(-50%) rotate(30deg) scaleX(1.12); }
}
@keyframes beamTopSwingB{
  0%,100%{ transform: translateX(-50%) rotate(28deg) scaleX(0.86); }
  50%{ transform: translateX(-50%) rotate(-30deg) scaleX(1.1); }
}
@keyframes beamTopSwingC{
  0%,100%{ transform: translateX(-50%) rotate(-26deg) scaleX(0.88); }
  50%{ transform: translateX(-50%) rotate(34deg) scaleX(1.14); }
}

@keyframes beamBottomSwingA{
  0%,100%{ transform: translateX(-50%) rotate(30deg) scaleX(0.88); }
  50%{ transform: translateX(-50%) rotate(-30deg) scaleX(1.12); }
}
@keyframes beamBottomSwingB{
  0%,100%{ transform: translateX(-50%) rotate(-28deg) scaleX(0.86); }
  50%{ transform: translateX(-50%) rotate(30deg) scaleX(1.1); }
}
@keyframes beamBottomSwingC{
  0%,100%{ transform: translateX(-50%) rotate(26deg) scaleX(0.88); }
  50%{ transform: translateX(-50%) rotate(-34deg) scaleX(1.14); }
}

@keyframes beamRhythm{
  0%{ opacity:0.58; }
  10%{ opacity:0.76; }
  20%{ opacity:0.88; }
  34%{ opacity:0.64; }
  48%{ opacity:0.84; }
  62%{ opacity:0.6; }
  76%{ opacity:0.8; }
  90%{ opacity:0.66; }
  100%{ opacity:0.58; }
}

@keyframes beamRhythmBottom{
  0%{ opacity:0.54; }
  12%{ opacity:0.68; }
  24%{ opacity:0.8; }
  38%{ opacity:0.62; }
  52%{ opacity:0.86; }
  66%{ opacity:0.58; }
  80%{ opacity:0.74; }
  92%{ opacity:0.6; }
  100%{ opacity:0.54; }
}

@keyframes hazeDriftSoft{
  0%,100%{ transform: translate3d(-1.6%, -1.2%, 0) scale(1.04); }
  33%{ transform: translate3d(1.4%, -0.3%, 0) scale(1.08); }
  66%{ transform: translate3d(-0.8%, 1.2%, 0) scale(1.1); }
}

@keyframes hazeBreath{
  0%,100%{ opacity:0.28; }
  50%{ opacity:0.42; }
}

@keyframes hazeLayerA{
  0%,100%{ transform: translate3d(-1.2%, -0.6%, 0) scale(1.02); opacity:0.22; }
  50%{ transform: translate3d(1.2%, 0.8%, 0) scale(1.08); opacity:0.34; }
}

@keyframes hazeLayerB{
  0%,100%{ transform: translate3d(1%, -0.8%, 0) scale(1.03); opacity:0.2; }
  50%{ transform: translate3d(-1.4%, 1%, 0) scale(1.09); opacity:0.3; }
}

@keyframes laserScanA{
  0%,100%{ transform: translateX(-18%) rotate(-26deg) scaleY(0.9); opacity:0.72; }
  25%{ transform: translateX(2%) rotate(-8deg) scaleY(1.02); opacity:0.72; }
  50%{ transform: translateX(14%) rotate(12deg) scaleY(1.08); opacity:0.72; }
  75%{ transform: translateX(-4%) rotate(-14deg) scaleY(0.96); opacity:0.72; }
}

@keyframes laserScanB{
  0%,100%{ transform: translateX(14%) rotate(24deg) scaleY(0.9); opacity:0.72; }
  25%{ transform: translateX(-2%) rotate(8deg) scaleY(1.02); opacity:0.72; }
  50%{ transform: translateX(-14%) rotate(-12deg) scaleY(1.08); opacity:0.72; }
  75%{ transform: translateX(4%) rotate(16deg) scaleY(0.96); opacity:0.72; }
}

@keyframes laserScanC{
  0%,100%{ transform: translateX(-12%) rotate(-18deg) scaleY(0.9); opacity:0.72; }
  25%{ transform: translateX(4%) rotate(-2deg) scaleY(1.02); opacity:0.72; }
  50%{ transform: translateX(16%) rotate(14deg) scaleY(1.08); opacity:0.72; }
  75%{ transform: translateX(-6%) rotate(-10deg) scaleY(0.96); opacity:0.72; }
}

@keyframes laserScanD{
  0%,100%{ transform: translateX(18%) rotate(26deg) scaleY(0.9); opacity:0.72; }
  25%{ transform: translateX(2%) rotate(10deg) scaleY(1.02); opacity:0.72; }
  50%{ transform: translateX(-12%) rotate(-10deg) scaleY(1.08); opacity:0.72; }
  75%{ transform: translateX(6%) rotate(14deg) scaleY(0.96); opacity:0.72; }
}

/* Strobe pulse overlay (subtle bright flashes) */
.portrait-overlay .strobe{ position:absolute; inset:0; border-radius:12px; pointer-events:none; background: rgba(255,255,255,0.34); mix-blend-mode:screen; opacity:0; transition:opacity .04s linear; filter: blur(5px); z-index:5; animation: strobeProg 3.75s linear infinite paused; }

@keyframes strobeProg{
  0%{ opacity:0; }
  5.5%{ opacity:0; }
  6.25%{ opacity:0.96; }
  7.25%{ opacity:0; }
  24.25%{ opacity:0; }
  25%{ opacity:0.78; }
  26%{ opacity:0; }
  49.25%{ opacity:0; }
  50%{ opacity:1; }
  51%{ opacity:0; }
  74.25%{ opacity:0; }
  75%{ opacity:0.74; }
  76%{ opacity:0; }
  100%{ opacity:0; }
}

/* Activate animations only when the portrait media itself is hovered/focused */
.portrait-wrap picture:hover + .portrait-overlay,
.portrait-wrap picture:focus-within + .portrait-overlay{ opacity:1; }
.portrait-wrap picture:hover + .portrait-overlay .haze,
.portrait-wrap picture:hover + .portrait-overlay .beam,
.portrait-wrap picture:hover + .portrait-overlay .laser,
.portrait-wrap picture:hover + .portrait-overlay .strobe,
.portrait-wrap picture:focus-within + .portrait-overlay .haze,
.portrait-wrap picture:focus-within + .portrait-overlay .beam,
.portrait-wrap picture:focus-within + .portrait-overlay .laser,
.portrait-wrap picture:focus-within + .portrait-overlay .strobe{ animation-play-state:running; }
.portrait-wrap picture:hover + .portrait-overlay .haze::before,
.portrait-wrap picture:hover + .portrait-overlay .haze::after,
.portrait-wrap picture:focus-within + .portrait-overlay .haze::before,
.portrait-wrap picture:focus-within + .portrait-overlay .haze::after{ animation-play-state:running; }
.portrait-wrap picture:hover + .portrait-overlay .strobe,
.portrait-wrap picture:focus-within + .portrait-overlay .strobe{ opacity:1; }
.hero-cta{ display:flex; justify-content:center; margin-top:1.3rem; position:relative; z-index:12; }
.hero-cta-btn{ /* match primary CTA gradient and size */
  background: linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));
  color: var(--white);
  padding: 1.2rem 2.2rem;
  border-radius:12px;
  font-weight:900;
  letter-spacing:1.5px;
  border:none;
  display:inline-block;
  font-size:1.16rem;
  box-shadow:0 10px 30px rgba(127,0,178,0.12);
}

@media (max-width:900px){
  .hero-combined .hero-grid{ grid-template-columns: 1fr; }
  .right-portrait{ order:2; }
  .left-stack{ order:1; padding:1rem 0; align-items:center; text-align:center; }
  .logo-short{
    width:min(86vw, 360px);
    max-width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
  }
  .logo-long{ max-width:360px; }
  .about-text{ max-width:60ch; text-align:center; font-size:1.02rem; }
  .portrait-img{ max-height:420px; aspect-ratio:auto; }
  .hero-cta-btn{ width:100%; max-width:340px; text-align:center; }
}

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.7rem 1.1rem; border-radius:10px; font-weight:700; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
.btn-cta{ background: linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); color:var(--white); box-shadow:0 10px 30px rgba(127,0,178,0.12); }
.btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--white); }
.btn-sm{ padding:0.5rem 0.8rem; font-size:0.95rem; }

.btn:hover,
.btn:focus-visible{
  transform: translateY(-3px);
}

.btn:active{
  transform: translateY(0);
}

.btn-cta:hover,
.btn-cta:focus-visible{
  box-shadow:0 14px 34px rgba(127,0,178,0.22);
}

.btn-ghost:hover,
.btn-ghost:focus-visible,
.btn-ghost:focus-visible{
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.03);
}

/* ========== SECTIONS ========== */
.section-title{ font-size:1.6rem; font-weight:800; margin-bottom:0.45rem; letter-spacing:0.2px; }
.section-sub{ color:var(--muted); margin-bottom:1.2rem; font-size:1rem; }

/* Headings and body text for consistent rhythm */
h1{ font-size:2.2rem; line-height:1.05; margin:0 0 0.6rem; }
h2{ font-size:1.6rem; line-height:1.15; margin:0 0 0.5rem; }
h3{ font-size:1.05rem; line-height:1.2; margin:0 0 0.4rem; }
p{ font-size:1rem; line-height:1.6; margin:0 0 1rem; }
.muted{ color:var(--muted); font-size:0.98rem; }

/* CARDS (services) */
.cards-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1.6rem; margin-top:1.4rem; align-items:stretch; }
.card{ background:linear-gradient(180deg,var(--card-bg),var(--card-contrast)); border-radius:14px; padding:1.2rem; border:1px solid rgba(255,255,255,0.02); box-shadow: 0 10px 36px rgba(0,0,0,0.55); display:flex; flex-direction:column; gap:0.9rem; transition: box-shadow .18s ease, transform .18s ease; height:100%; position:relative; overflow:hidden; will-change: transform; }
.card > a.card-link{ display:flex; flex-direction:column; gap:0.6rem; align-items:flex-start; width:100%; height:100%; color:inherit; text-decoration:none; }
.card > a.card-link *{ pointer-events:auto; }
.card:hover, .card:focus-within { box-shadow: 0 18px 52px rgba(0,0,0,0.5); transform: translateY(-4px); }
.card > a.card-link:hover, .card > a.card-link:focus { background:transparent; }
.card.highlight{ border:1px solid rgba(127,0,178,0.08); background: linear-gradient(180deg, rgba(127,0,178,0.01), rgba(0,0,0,0.01)); }
.price{ font-family:"Orbitron",sans-serif; color:var(--accent-secondary); font-weight:800; }
.recommended-badge{
  display:inline-block;
  margin:0 0 0.45rem;
  padding:0;
  border:0;
  border-radius:0;
  background: linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:0.92rem;
  font-weight:700;
  letter-spacing:0.01em;
  text-transform:none;
  text-shadow:none;
  animation:none;
}

#resources .card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}

body.page-home #services .card,
body.page-home #resources .card,
body.page-home #home-gallery .card,
body.page-home #contact .contact-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  border-left:4px solid rgba(127,0,178,0.12);
}

body.page-home #services,
body.page-home #resources{
  position:relative;
  z-index:20;
}

body.page-home #services .card,
body.page-home #resources .card{
  transition: box-shadow .2s ease, transform .2s ease !important;
}

body.page-home #services .card:hover,
body.page-home #services .card:focus-within,
body.page-home #resources .card:hover,
body.page-home #resources .card:focus-within{
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,0.52) !important;
}

body.page-home #contact .contact-card{ padding:1.2rem; }
body.page-home #contact .contact-grid{ grid-template-columns:1fr; }
body.page-home #contact .contact-card{ min-height:220px; }

.home-gallery-media{
  width:100%;
  aspect-ratio:16/10;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:#0c0c0f;
  overflow:hidden;
}

.home-gallery-media img,
.home-gallery-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.home-gallery-desc{
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
  line-height:1.45;
}

.availability-note{
  margin-top:0.8rem;
  padding:0.8rem 0.95rem;
  border-radius:10px;
  background: linear-gradient(90deg, rgba(127,0,178,0.14), rgba(255,109,0,0.10));
  border:1px solid rgba(255,255,255,0.10);
}

.availability-note .muted{
  margin:0;
  color:var(--white);
}

.availability-note,
.availability-board{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.availability-note:hover,
.availability-note:focus-within,
.availability-board:hover,
.availability-board:focus-within{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 16px 42px rgba(0,0,0,0.45);
}

.availability-board{
  margin-top:1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.08);
  border-left:4px solid rgba(127,0,178,0.16);
  border-radius:12px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  overflow:hidden;
}

.availability-board-large{
  margin-top:1.1rem;
}

.availability-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.95rem 1rem;
}

.availability-row + .availability-row{
  border-top:1px solid rgba(255,255,255,0.08);
}

.availability-day{
  margin:0;
  color:var(--muted);
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.2px;
}

.availability-time{
  margin:0;
  font-family:"Orbitron", "Poppins", system-ui, sans-serif;
  font-size:1.15rem;
  font-weight:700;
  color:var(--white);
  white-space:nowrap;
}

@media (max-width:720px){
  .availability-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .availability-time{
    font-size:1.05rem;
  }
}

/* CONTACT GRID */
.contact-grid{ display:grid; grid-template-columns: 1fr 420px; gap:1.1rem; margin-top:1rem; }
.contact-card{ background:var(--card-bg); padding:1rem; border-radius:12px; border:1px solid rgba(255,255,255,0.02); }
.contact-actions{ margin-top:1rem; display:flex; gap:0.6rem; flex-wrap:wrap; }
body.page-home #contact .contact-actions .btn{ min-width:170px; }
.form-actions{ margin-top:0.6rem; display:flex; gap:0.6rem; flex-wrap:wrap; }

/* FOOTER */
.site-footer{
  border-top:1px solid rgba(255,255,255,0.02);
  padding:2rem 0;
  margin-top:3rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (min-height:1000px){
  body.page-impressum .main-legal,
  body.page-datenschutz .main-legal{ padding-bottom:3rem; }
}
.footer-inner{
  display:grid;
  grid-template-columns: auto max-content max-content;
  align-items:center;
  gap:0.9rem 1.5rem;
  padding:0.6rem 1rem;
}
.footer-inner p{ margin:0; }
.footer-links{ display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.footer-links a{ padding:0.4rem 0.62rem; border-radius:8px; background:transparent; transition: background .18s ease, color .18s ease; }
.footer-links a:hover{ background: linear-gradient(90deg, rgba(127,0,178,0.06), rgba(255,109,0,0.04)); }

.footer-social{ display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:0; text-align:left; }
.footer-heading{ display:none; }

/* Keep footer links stable and consistent (no jump animation) */
.site-footer .social,
.site-footer .social:hover{ transform:none; }

/* Force footer links to use footer palette (not global .social accent colors) */
.site-footer .footer-links a.social,
.site-footer .footer-social-links a.social{
  color:var(--muted);
  font-weight:600;
}
.site-footer .footer-links a.social:hover,
.site-footer .footer-social-links a.social:hover{
  color:var(--white);
}

/* Social media links: same visual language as the regular footer links */
.footer-social-links{ display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; justify-content:flex-start; }
.footer-social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.35rem;
  border-radius:8px;
  background:transparent;
  border:0;
  color:inherit;
  line-height:0;
}
.footer-social-links .social-icon{ width:24px; height:24px; display:block; object-fit:contain; }
.footer-social-links a::before{
  content:none;
}

@media (max-width:980px){
  .footer-inner{
    grid-template-columns:1fr;
    gap:0.6rem;
  }
  .footer-inner > p{ order:1; }
  .footer-inner > .footer-links{ order:2; }
  .footer-inner > .footer-social{ order:3; }
  .footer-social{ align-items:flex-start; text-align:left; min-width:0; }
  .footer-social-links{ justify-content:flex-start; }
}

/* TEXT UTILS */
.contact-email a{ color:var(--accent-primary); font-weight:700; }
.contact-card a.social{ color:var(--accent-primary); font-weight:700; }

/* Global social class for all links that should use the accent */
.social{ color:var(--accent-primary); font-weight:700; transition: color .18s ease, transform .18s ease; }
.social:hover{ color:var(--accent-secondary); transform: translateY(-2px); }

/* Modern entrance motion system */
@keyframes revealLift{
  0%{
    opacity:0;
  }
  70%{
    opacity:1;
  }
  100%{
    opacity:1;
  }
}

@keyframes revealSlideDown{
  0%{ opacity:0; transform: translate3d(0,-16px,0) scale(0.99); filter: blur(6px); }
  100%{ opacity:1; transform:none; filter:none; }
}

@keyframes revealTextSweep{
  0%{ opacity:0; transform: translate3d(0,14px,0); letter-spacing:0.6px; filter: blur(6px); }
  100%{ opacity:1; transform:none; letter-spacing:0; filter:none; }
}

.site-header{ animation: revealSlideDown .7s cubic-bezier(.2,.8,.2,1) both; }
.main-nav li{ animation: revealSlideDown .6s cubic-bezier(.2,.8,.2,1) both; }
.main-nav li:nth-child(1){ animation-delay:.06s; }
.main-nav li:nth-child(2){ animation-delay:.1s; }
.main-nav li:nth-child(3){ animation-delay:.14s; }
.main-nav li:nth-child(4){ animation-delay:.18s; }
.main-nav li:nth-child(5){ animation-delay:.22s; }
.main-nav li:nth-child(6){ animation-delay:.26s; }
.main-nav li:nth-child(7){ animation-delay:.3s; }
.main-nav li:nth-child(8){ animation-delay:.34s; }

.hero-combined .left-stack > *,
.hero-combined .right-portrait,
.hero-cta,
.section-title,
.section-sub,
.card,
.legal-card,
.package-box,
.contact-card,
.availability-note,
.availability-board,
.footer-inner > *{
  animation: revealLift .82s cubic-bezier(.2,.78,.2,1) both;
}

.hero-combined .left-stack > *:nth-child(1){ animation-delay:.08s; }
.hero-combined .left-stack > *:nth-child(2){ animation-delay:.14s; }
.hero-combined .left-stack > *:nth-child(3){ animation-delay:.2s; }
.hero-combined .right-portrait{ animation-delay:.22s; }
.hero-cta{ animation-delay:.3s; }

.section-title{ animation: revealTextSweep .74s cubic-bezier(.2,.78,.2,1) both; animation-delay:.1s; }
.section-sub{ animation: revealTextSweep .78s cubic-bezier(.2,.78,.2,1) both; animation-delay:.16s; }

#availability-home .availability-note{ animation-delay:.22s; }
#availability-home .availability-board{ animation-delay:.3s; }
body.page-availability .availability-note{ animation-delay:.2s; }
body.page-availability .availability-board{ animation-delay:.28s; }

.cards-grid .card:nth-child(1){ animation-delay:.08s; }
.cards-grid .card:nth-child(2){ animation-delay:.14s; }
.cards-grid .card:nth-child(3){ animation-delay:.2s; }
.cards-grid .card:nth-child(4){ animation-delay:.26s; }
.cards-grid .card:nth-child(5){ animation-delay:.32s; }
.cards-grid .card:nth-child(6){ animation-delay:.38s; }

.main-legal .package-box:nth-of-type(1){ animation-delay:.08s; }
.main-legal .package-box:nth-of-type(2){ animation-delay:.14s; }
.main-legal .package-box:nth-of-type(3){ animation-delay:.2s; }
.main-legal .package-box:nth-of-type(4){ animation-delay:.26s; }
.main-legal .package-box:nth-of-type(5){ animation-delay:.32s; }
.main-legal .package-box:nth-of-type(6){ animation-delay:.38s; }
.main-legal .package-box:nth-of-type(7){ animation-delay:.44s; }
.main-legal .package-box:nth-of-type(8){ animation-delay:.5s; }
.main-legal .package-box:nth-of-type(9){ animation-delay:.56s; }
.main-legal .package-box:nth-of-type(10){ animation-delay:.62s; }

.footer-inner > *:nth-child(1){ animation-delay:.08s; }
.footer-inner > *:nth-child(2){ animation-delay:.14s; }
.footer-inner > *:nth-child(3){ animation-delay:.2s; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* MAIN LEGAL / PAGES */
.main-legal{ padding-top:5.5rem; padding-bottom:5.5rem; }
.legal-card{ background:var(--card-bg); padding:1.6rem; border-radius:12px; border:1px solid var(--glass-border); max-width:1000px; margin:0 auto; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.page-bottom-cta{ display:flex; justify-content:center; margin-top:1.4rem; }

/* Package box - used on Leistungen to present each package as a large card */
.package-box{ background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008)); padding:1.4rem; border-radius:14px; border:1px solid var(--glass-border); margin:1.1rem 0; box-shadow: 0 14px 36px rgba(0,0,0,0.42); border-left:4px solid rgba(127,0,178,0.08); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.package-box h2{ font-size:1.28rem; margin:0 0 0.6rem; background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; padding:0.08rem 0.2rem; }
.package-box h3{ color:var(--muted); margin-top:0.6rem; }
.package-box p{ margin:0 0 0.8rem; }
.package-box ul{ margin:0.4rem 0 0.8rem 1.1rem; }

.legal-card:hover,
.legal-card:focus-within,
.package-box:hover,
.package-box:focus-within,
.contact-card:hover,
.contact-card:focus-within{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 18px 44px rgba(0,0,0,0.46);
}

/* Q&A page: clearer separation between question and answer */
body.page-qa .package-box h3{
  color: var(--white);
  margin: 1rem 0 0.55rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(127,0,178,0.16), rgba(255,109,0,0.12));
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 700;
}
body.page-qa .package-box p{
  margin: 0 0 0.95rem;
  padding-left: 0.9rem;
  border-left: 2px solid rgba(255,255,255,0.16);
}
body.page-qa .package-box h3 + p{
  margin-top: 0.1rem;
}

/* Contact success FX overlay (haze + beams + lasers) */
.success-fx-card{
  position:relative;
  overflow:hidden;
}

.success-fx-card > *{
  position:relative;
  z-index:2;
}

.success-overlay,
.success-page-overlay{
  position:absolute;
  inset:0;
  border-radius:12px;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease;
  mix-blend-mode:screen;
  z-index:1;
  overflow:hidden;
}

.success-page-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  border-radius:0;
  opacity:0.9;
}

body.page-contact-success > main,
body.page-contact-success > footer{
  position:relative;
  z-index:2;
}

body.page-contact-success .site-header,
body.page-contact-success .skip-link{
  z-index:60;
}

body.page-contact-success .skip-link{
  z-index:200;
}

.success-overlay .haze,
.success-page-overlay .haze{
  position:absolute;
  inset:-10%;
  border-radius:16px;
  opacity:0.32;
  background:
    radial-gradient(75% 60% at 22% 28%, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 74%),
    radial-gradient(70% 66% at 74% 62%, rgba(127,0,178,0.22) 0%, rgba(127,0,178,0.06) 44%, rgba(127,0,178,0) 78%),
    radial-gradient(58% 52% at 44% 84%, rgba(64,112,255,0.18) 0%, rgba(64,112,255,0.04) 46%, rgba(64,112,255,0) 80%);
  filter: blur(16px) saturate(118%);
  animation: hazeDriftSoft 10s ease-in-out infinite paused;
}

.success-page-overlay .haze{
  inset:-14%;
  opacity:0.34;
  filter: blur(22px) saturate(122%);
  animation-play-state:running;
}

.success-overlay .beam,
.success-page-overlay .beam{
  position:absolute;
  width:16%;
  height:130%;
  opacity:0;
  filter: blur(6px) saturate(132%);
}

.success-page-overlay .beam-top{
  top:-8%;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  transform-origin:center top;
}

.success-page-overlay .beam-bottom{
  bottom:-10%;
  clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
  transform-origin:center bottom;
}

.success-page-overlay .beam-top-1{ left:18%; width:14%; background: linear-gradient(180deg, rgba(127,0,178,0.92) 0%, rgba(186,102,255,0.26) 30%, rgba(127,0,178,0.0) 70%); animation: beamTopSwingA 5.6s ease-in-out 0s infinite paused, beamRhythm 5.6s ease-in-out 0s infinite paused; }
.success-page-overlay .beam-top-2{ left:50%; width:12%; background: linear-gradient(180deg, rgba(255,92,182,0.9) 0%, rgba(255,140,210,0.24) 30%, rgba(255,92,182,0.0) 70%); animation: beamTopSwingB 5.6s ease-in-out .12s infinite paused, beamRhythm 5.6s ease-in-out 0s infinite paused; }
.success-page-overlay .beam-top-3{ left:82%; width:10%; background: linear-gradient(180deg, rgba(255,109,0,0.92) 0%, rgba(255,166,92,0.26) 30%, rgba(255,109,0,0.0) 70%); animation: beamTopSwingC 5.6s ease-in-out .24s infinite paused, beamRhythm 5.6s ease-in-out 0s infinite paused; }

.success-page-overlay .beam-bottom-1{ left:18%; width:14%; background: linear-gradient(0deg, rgba(255,109,0,0.92) 0%, rgba(255,166,92,0.26) 30%, rgba(255,109,0,0.0) 70%); animation: beamBottomSwingA 7.2s ease-in-out .06s infinite paused, beamRhythmBottom 7.2s ease-in-out 0s infinite paused; }
.success-page-overlay .beam-bottom-2{ left:50%; width:12%; background: linear-gradient(0deg, rgba(255,92,182,0.9) 0%, rgba(255,140,210,0.24) 30%, rgba(255,92,182,0.0) 70%); animation: beamBottomSwingB 7.2s ease-in-out .18s infinite paused, beamRhythmBottom 7.2s ease-in-out 0s infinite paused; }
.success-page-overlay .beam-bottom-3{ left:82%; width:10%; background: linear-gradient(0deg, rgba(127,0,178,0.92) 0%, rgba(186,102,255,0.26) 30%, rgba(127,0,178,0.0) 70%); animation: beamBottomSwingC 7.2s ease-in-out .3s infinite paused, beamRhythmBottom 7.2s ease-in-out 0s infinite paused; }

.success-overlay .beam-1,
.success-page-overlay .beam-1{
  left:10%;
  background: linear-gradient(180deg, rgba(127,0,178,0.9) 0%, rgba(186,102,255,0.25) 30%, rgba(127,0,178,0) 70%);
  animation: beamTopSwingA 5.8s ease-in-out 0s infinite paused;
}

.success-overlay .beam-2,
.success-page-overlay .beam-2{
  left:48%;
  background: linear-gradient(180deg, rgba(255,109,0,0.9) 0%, rgba(255,166,92,0.24) 30%, rgba(255,109,0,0) 70%);
  animation: beamTopSwingC 5.8s ease-in-out .2s infinite paused;
}

.success-overlay .laser,
.success-page-overlay .laser{
  position:absolute;
  top:-14%;
  width:0.55%;
  height:132%;
  opacity:0.68;
  filter: blur(1.8px) saturate(145%);
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(127,0,178,0.7) 24%, rgba(64,112,255,0.66) 56%, rgba(255,255,255,0.04) 100%);
  transform-origin: center top;
}

.success-overlay .laser-1,
.success-page-overlay .laser-1{ left:14%; animation: laserScanA 1.9s ease-in-out 0s infinite paused; }
.success-overlay .laser-2,
.success-page-overlay .laser-2{ left:38%; animation: laserScanB 1.9s ease-in-out .08s infinite paused; }
.success-page-overlay .laser-3{ left:62%; animation: laserScanC 1.9s ease-in-out .16s infinite paused; }
.success-page-overlay .laser-4{ left:86%; animation: laserScanD 1.9s ease-in-out .24s infinite paused; }

.success-fx-card:hover .success-overlay,
.success-fx-card:focus-within .success-overlay{
  opacity:1;
}

.success-fx-card:hover .success-overlay .haze,
.success-fx-card:hover .success-overlay .beam,
.success-fx-card:hover .success-overlay .laser,
.success-fx-card:focus-within .success-overlay .haze,
.success-fx-card:focus-within .success-overlay .beam,
.success-fx-card:focus-within .success-overlay .laser{
  animation-play-state:running;
}

.success-fx-card:hover .success-overlay .beam,
.success-fx-card:focus-within .success-overlay .beam{
  opacity:0.9;
}

body.page-contact-success .success-page-overlay .beam,
body.page-contact-success .success-page-overlay .haze,
body.page-contact-success .success-page-overlay .laser{
  animation-play-state:running;
}

body.page-contact-success .success-page-overlay .beam{
  opacity:0.82;
}

/* Galerie */
.gallery-filters{
  display:flex;
  flex-wrap:wrap;
  gap:0.55rem;
  margin:1rem 0 1.15rem;
}

.gallery-filter-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color:var(--muted);
  font:inherit;
  font-weight:600;
  border-radius:999px;
  padding:0.42rem 0.82rem;
  cursor:pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.gallery-filter-btn:hover{
  color:var(--white);
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.06);
}

.gallery-filter-btn.is-active{
  color:var(--white);
  border-color: rgba(255,255,255,0.28);
  background: linear-gradient(90deg, rgba(127,0,178,0.34), rgba(255,109,0,0.3));
}

.gallery-grid{
  column-count:3;
  column-gap:1rem;
  margin-top:1.2rem;
}

.gallery-item{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  display:inline-block;
  width:100%;
  margin:0;
  margin-bottom:1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012));
  border:1px solid var(--glass-border);
  border-radius:12px;
  padding:0.45rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.38);
  scroll-margin-top:100px;
}

.gallery-item.reveal-on-scroll{
  opacity:0;
  transform: translate3d(0,34px,0) scale(0.965);
  filter: blur(10px) saturate(88%);
  transition:
    opacity .72s cubic-bezier(.22,.72,.2,1),
    transform .72s cubic-bezier(.22,.72,.2,1),
    filter .72s cubic-bezier(.22,.72,.2,1);
  will-change: opacity, transform, filter;
}

.gallery-item.reveal-on-scroll.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

.gallery-item.is-filtered-out{
  display:none !important;
}

.gallery-media{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0c0c0f;
  cursor:zoom-in;
}

.gallery-media::before{
  content:none;
}

.gallery-item.is-video .gallery-media::after,
.gallery-item.is-photo .gallery-media::after{
  position:absolute;
  top:0.55rem;
  left:0.55rem;
  z-index:3;
  padding:0.2rem 0.52rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.24);
  background:rgba(7,7,10,0.72);
  color:var(--white);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.03em;
  line-height:1;
  pointer-events:none;
}

.gallery-item.is-video .gallery-media::after{
  content:"VIDEO";
}

.gallery-item.is-photo .gallery-media::after{
  content:"FOTO";
}

.gallery-media img,
.gallery-media video{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
}

.gallery-media video{
  background:#000;
}

.gallery-lightbox-media{
  cursor:default;
  width:min(100%, 920px);
  margin:0 auto;
}

.gallery-lightbox-media img,
.gallery-lightbox-media video{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:78vh;
  margin:0 auto;
  object-fit:unset;
  border-radius:10px;
}

.gallery-lightbox-media video{
  background:transparent;
}

.gallery-item figcaption{
  margin:0.52rem 0.2rem 0.12rem;
  color:var(--muted);
  font-size:0.95rem;
  line-height:1.45;
}

.gallery-item figcaption .service-link,
.gallery-lightbox-caption .service-link{
  color:var(--white);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,0.35);
  transition: color .16s ease, border-color .16s ease;
}

.gallery-item figcaption .service-link:hover,
.gallery-lightbox-caption .service-link:hover{
  color:var(--accent-secondary);
  border-bottom-color: rgba(255,109,0,0.75);
}

.gallery-item figcaption .track-title,
.gallery-lightbox-caption .track-title{
  font-family:"Orbitron","Poppins",sans-serif;
  font-weight:700;
  letter-spacing:0.2px;
  color:var(--white);
}

.gallery-item figcaption .track-artist,
.gallery-lightbox-caption .track-artist{
  color:rgba(255,255,255,0.92);
  font-weight:600;
}

.gallery-item.is-video .gallery-media{
  border-color: rgba(255,255,255,0.08);
}

.ratio-3-4{ aspect-ratio:3/4; }
.ratio-4-3{ aspect-ratio:4/3; }
.ratio-16-9{ aspect-ratio:16/9; }
.ratio-9-16{ aspect-ratio:9/16; }
.ratio-2-3{ aspect-ratio:2/3; }
.ratio-3-2{ aspect-ratio:3/2; }

@media (max-width:980px){
  .gallery-grid{ column-count:2; column-gap:0.9rem; }
}

@media (max-width:720px){
  .gallery-grid{ column-count:1; column-gap:0; }
}

/* Gallery lightbox */
body.lightbox-open{ overflow:hidden; }

.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:140;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background: rgba(7,7,9,0.56);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.gallery-lightbox[hidden]{ display:none; }

.gallery-lightbox-panel{
  width:min(96vw, 1080px);
  max-height:92vh;
  overflow:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(20,20,24,0.94), rgba(16,16,20,0.9));
  box-shadow: 0 30px 80px rgba(0,0,0,0.56);
  padding:0.85rem;
}

.gallery-lightbox-close{
  margin-left:auto;
  margin-bottom:0.6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:42px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color:var(--white);
  cursor:pointer;
  font-size:1.1rem;
  font-weight:700;
}

.gallery-lightbox-media{
  width:min(100%, 920px);
  margin:0 auto;
}

.gallery-lightbox-caption{
  margin:0.7rem auto 0.25rem;
  width:min(100%, 920px);
  color:var(--muted);
  font-size:0.98rem;
  line-height:1.5;
}

/* Improve tap targets and spacing on small screens */
@media (max-width:720px){
  .main-legal{ padding-top:4rem; padding-bottom:3rem; }
  .legal-card{ padding:1rem; margin:0 1rem; }
  .package-box{ padding:1rem; margin:0.8rem 0; }
  h1{ font-size:1.9rem; }
  h2{ font-size:1.15rem; }
  p{ font-size:0.98rem; }
  /* Ensure primary CTAs are easy to tap on mobile */
  .contact-card .btn{ width:100%; display:block; }
  .btn{ min-height:44px; }
}

@media (max-width:480px){
  .header-inner{ padding:0.5rem 0.9rem; }
  .container{ padding-left:0.9rem; padding-right:0.9rem; }
  .package-box{ padding:0.9rem; }
}

/* Expanded glass effect in content areas */
.card,
.legal-card,
.package-box,
.contact-card{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* CONTACT FORM */
.contact-form{ margin-top:0.6rem; display:grid; gap:0.75rem; }
.contact-form label{ display:block; font-weight:600; color:var(--muted); font-size:0.95rem; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="number"], .contact-form input[type="date"], .contact-form input[type="time"], .contact-form input[type="datetime-local"], .contact-form select, .contact-form textarea{ width:100%; padding:0.7rem 0.9rem; border-radius:10px; border:1px solid var(--glass-border); background: rgba(255,255,255,0.02); color:var(--white); font-size:0.98rem; }
.contact-form textarea{ min-height:120px; resize:vertical; }
.contact-form select{ appearance:none; background: rgba(255,255,255,0.03); color:var(--white); }
.contact-form select option{ background-color: var(--bg); color:var(--white); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{ outline:3px solid rgba(127,0,178,0.14); outline-offset:3px; }
.contact-form .form-row{ display:flex; gap:0.6rem; }
.contact-form .form-row .col{ flex:1; }
.hp-field{ position:absolute; left:-9999px; opacity:0; pointer-events:none; }

@media (max-width:720px){
  .contact-form .form-row{ flex-direction:column; }
}

/* RESPONSIVE */
@media (max-width:1100px){
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
  .contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width:720px){
  body{ overflow-x:hidden; }
  .header-inner{
    padding:0.45rem 0.9rem;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:0.5rem;
  }

  .brand{ order:1; margin-right:auto; }

  .header-book{
    order:2;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:inline-flex;
    padding:0.42rem 0.66rem;
    min-height:34px;
    font-size:0.8rem;
    white-space:nowrap;
    z-index:122;
  }

  .nav-toggle{
    display:block;
    position:absolute;
    right:0.9rem;
    top:0.45rem;
    width:42px;
    height:42px;
    opacity:0;
    margin:0;
    z-index:124;
    cursor:pointer;
  }

  .nav-toggle-label{
    order:3;
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.03);
    position:relative;
    z-index:123;
    cursor:pointer;
  }

  .nav-toggle-label span{
    position:absolute;
    left:10px;
    width:22px;
    height:2.5px;
    margin:0;
    display:block;
  }

  .nav-toggle-label span:nth-child(1){ transform:translateY(-6px); }
  .nav-toggle-label span:nth-child(2){ transform:translateY(0); }
  .nav-toggle-label span:nth-child(3){ transform:translateY(6px); }

  .main-nav{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:auto;
    width:min(86vw, 360px);
    background:linear-gradient(180deg, rgba(7,7,9,0.985), rgba(7,7,9,0.985));
    padding-top:4.9rem;
    z-index:121;
    max-height:100dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(100%);
    transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
    border-left:1px solid rgba(255,255,255,0.12);
  }

  .main-nav ul{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0.75rem;
    padding:1rem;
    margin:0;
  }

  .main-nav li{
    width:100%;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    animation:none !important;
  }

  .main-nav a,
  .main-nav a.social{
    display:block;
    width:100%;
    color:var(--white) !important;
    font-size:1rem;
    padding:0.72rem 0.78rem;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.04);
  }

  .nav-toggle:checked ~ .main-nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0);
    transition: opacity .24s ease, transform .24s ease;
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(1){ transform:translateY(0) rotate(45deg); }
  .nav-toggle:checked + .nav-toggle-label span:nth-child(2){ opacity:0; transform:scale(0.6); }
  .nav-toggle:checked + .nav-toggle-label span:nth-child(3){ transform:translateY(0) rotate(-45deg); }

  .cards-grid{ grid-template-columns: 1fr; }

  /* Keep header logo reasonably sized on small screens */
  .logo-img{ max-height:38px; max-width:138px; width:auto; height:auto; }

  .main-legal{ padding-top:4.8rem; padding-bottom:3rem; }
  .legal-card{ padding:1rem; margin:0; }
  .footer-links{ row-gap:0.35rem; }
  .footer-social{ width:100%; min-width:0; align-items:flex-start; text-align:left; }
  .footer-social-links{ justify-content:flex-start; }
  .footer-social-links a{ width:auto; }
}

/* Resources specific styling */
.resources .card{ border-left:4px solid rgba(127,0,178,0.12); background: linear-gradient(180deg, rgba(127,0,178,0.02), rgba(0,0,0,0.02)); }
.resources .card h3{ color:var(--white); }
.resources .card .muted{ color:rgba(255,255,255,0.75); }
.resources .btn-sm{ background: linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); color:var(--white); border:none; }

/* Primary small button used across site (same look as resources cards) */
.btn-sm.primary{ background: linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); color:var(--white); border:none; padding:0.45rem 0.9rem; border-radius:8px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.btn-sm.primary:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(127,0,178,0.08); }

/* Ensure small action buttons within cards align to the bottom so cards line up visually */
.cards-grid .card .btn-sm{ margin-top: auto; align-self: flex-start; }
.card > a.card-link .btn-sm{ margin-top: auto; align-self: flex-start; }

/* small accessibility focus */
a:focus{ outline:3px solid rgba(127,0,178,0.14); outline-offset:3px; border-radius:6px; }

/* Homepage mobile spacing normalization (final override) */
@media (max-width:720px){
  body.page-home .hero-combined{
    margin-top:72px;
    min-height:auto;
    padding:1.2rem 0 2rem;
  }

  body.page-home .hero-combined .hero-grid{
    gap:0.75rem;
    padding:0 1rem;
  }

  body.page-home .left-stack{
    padding:0;
    gap:0.8rem;
  }

  body.page-home .logo-short{ width:min(84vw, 320px); }
  body.page-home .logo-long{ max-width:min(84vw, 320px); }

  body.page-home .about-text{
    font-size:0.98rem;
    line-height:1.55;
    margin:0;
    padding:0;
  }

  body.page-home .right-portrait{
    padding:0;
    margin-top:0;
  }

  body.page-home .portrait-wrap{ border-radius:10px; }
  body.page-home .portrait-img{ max-height:none; border-radius:10px; }

  body.page-home .hero-cta{
    margin-top:0.9rem;
    padding:0 1rem;
  }

  body.page-home .hero-cta-btn{
    width:100%;
    max-width:340px;
    padding:0.95rem 1rem;
    font-size:1rem;
    letter-spacing:0.6px;
  }

  body.page-home #services.container,
  body.page-home #resources.container,
  body.page-home #availability-home.container,
  body.page-home #home-gallery.container,
  body.page-home #contact.container{
    padding:2rem 1rem;
  }

  body.page-home .section-title{ margin-bottom:0.3rem; }
  body.page-home .section-sub{
    margin-bottom:0.8rem;
    font-size:0.95rem;
    line-height:1.45;
  }

  body.page-home .cards-grid{
    gap:1rem;
    margin-top:0.8rem;
  }

  body.page-home .card,
  body.page-home #contact .contact-card{
    padding:1rem;
    min-height:0;
    gap:0.7rem;
  }

  body.page-home .home-gallery-media{ aspect-ratio:4/3; }
  body.page-home .home-gallery-desc{ font-size:0.92rem; }

  body.page-home #contact .contact-actions{
    margin-top:0.75rem;
    gap:0.5rem;
  }

  body.page-home #contact .contact-actions .btn{
    width:100%;
    min-width:0;
  }

  body.page-home #availability-home .availability-board{ margin-top:0.75rem; }
}

@media (max-width:420px){
  body.page-home .hero-combined{ padding-top:1rem; }

  body.page-home .hero-combined .hero-grid,
  body.page-home #services.container,
  body.page-home #resources.container,
  body.page-home #availability-home.container,
  body.page-home #home-gallery.container,
  body.page-home #contact.container{
    padding-left:0.85rem;
    padding-right:0.85rem;
  }

  body.page-home .hero-cta-btn{ font-size:0.96rem; }
}

/* Final navigation + hero sizing stabilization */
@media (max-width:720px){
  body.nav-open{ overflow:hidden; }

  .site-header{ z-index:160; }
  .site-header.is-hidden{ transform:translateY(-110%); }

  .site-header .header-inner{
    min-height:58px;
    padding:0.45rem 0.9rem;
  }

  .site-header .brand{ max-width:46vw; }

  .site-header .header-book{
    left:50%;
    transform:translateX(-50%);
    max-width:44vw;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:0.78rem;
  }

  .site-header .nav-toggle{
    top:50%;
    right:0.9rem;
    transform:translateY(-50%);
  }

  .site-header .nav-toggle-label{
    position:absolute;
    top:50%;
    right:0.9rem;
    margin:0;
    transform:translateY(-50%);
  }

  .site-header .main-nav{
    top:0;
    right:0;
    left:auto;
    width:min(72vw, 290px);
    height:100dvh;
    padding:5rem 0.85rem 1rem;
    border-left:1px solid rgba(255,255,255,0.2);
    box-shadow:-20px 0 42px rgba(0,0,0,0.4), inset 1px 0 0 rgba(255,255,255,0.08);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
      linear-gradient(180deg, rgba(18,18,24,0.78), rgba(10,10,14,0.72));
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    transform:translateX(104%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .site-header .main-nav ul{ padding:0; gap:0.62rem; }

  .site-header .main-nav a,
  .site-header .main-nav a.social{
    min-height:38px;
    display:inline-flex;
    width:168px;
    max-width:100%;
    align-items:center;
    justify-content:center;
    text-align:center;
    white-space:nowrap;
    padding:0.56rem 0.72rem;
    font-size:0.95rem;
    border:1px solid rgba(255,255,255,0.30);
    background:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.12));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  }

  .site-header .nav-toggle:checked ~ .main-nav{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
}

@media (min-width:721px){
  .site-header .main-nav{
    position:static;
    width:auto;
    height:auto;
    padding:0;
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    border-left:0;
    box-shadow:none;
    background:transparent;
  }
}

/* Hero/info sizing across 1080p, 1440p, 4K and mobile */
body.page-home .hero-combined{
  margin-top:84px;
  min-height:clamp(560px, 70vh, 860px);
  padding:clamp(2rem, 3.4vw, 3.35rem) 1.25rem clamp(2.8rem, 5vw, 6rem);
}

body.page-home .hero-combined .hero-grid{
  max-width:min(1280px, calc(100vw - 2.5rem));
  gap:clamp(1rem, 2vw, 2rem);
  align-items:center;
}

body.page-home .left-stack{
  gap:clamp(0.75rem, 1.2vw, 1.3rem);
  padding:0 clamp(0.2rem, 1vw, 1.4rem) 0.25rem;
}

body.page-home .logo-short{
  width:min(100%, clamp(300px, 33vw, 540px));
  max-height:none;
}

body.page-home .logo-long{
  width:min(100%, clamp(300px, 33vw, 560px));
  max-width:none;
}

body.page-home .about-text{
  max-width:50ch;
  font-size:clamp(1rem, 0.78rem + 0.72vw, 1.28rem);
  line-height:1.55;
}

body.page-home .right-portrait{
  padding:0 clamp(0.3rem, 1.5vw, 1.6rem) clamp(0.5rem, 1.8vw, 2.2rem);
  margin-top:0;
}

body.page-home #services.container,
body.page-home #resources.container,
body.page-home #availability-home.container,
body.page-home #home-gallery.container,
body.page-home #contact.container{
  max-width:min(1280px, calc(100vw - 2.5rem));
}

@media (min-width:1920px){
  body.page-home .hero-combined .hero-grid,
  body.page-home #services.container,
  body.page-home #resources.container,
  body.page-home #availability-home.container,
  body.page-home #home-gallery.container,
  body.page-home #contact.container{
    max-width:1360px;
  }

  body.page-home .about-text{ max-width:52ch; }
}

@media (max-width:1180px){
  body.page-home .hero-combined{
    min-height:auto;
    padding-bottom:3.2rem;
  }

  body.page-home .hero-combined .hero-grid{ grid-template-columns:1fr; }

  body.page-home .left-stack{
    order:1;
    align-items:center;
    text-align:center;
    padding:0;
  }

  body.page-home .right-portrait{
    order:2;
    padding:0;
  }

  body.page-home .about-text{
    max-width:62ch;
    text-align:center;
  }
}