/* ============================================================
   DJINGO DJANGO — Premium DJ Website
   ============================================================ */

:root {
  --bg: #08080a;
  --bg-alt: #0f0f13;
  --bg-card: #17171d;
  --ink: #f3f3f5;
  --ink-dim: #b7b7c0;
  --ink-faint: #7d7d88;
  --line: rgba(255, 255, 255, 0.09);

  --chrome-1: #ffffff;
  --chrome-2: #cfd3d8;
  --chrome-3: #7c828c;

  --accent-blue: #29d1ff;
  --accent-pink: #ff2f92;
  --accent-purple: #8b5cf6;
  --accent-gold: #e8c988;

  --grad-chrome: linear-gradient(180deg, #ffffff 0%, #d7dade 35%, #8b909b 60%, #ffffff 100%);
  --grad-accent: linear-gradient(90deg, var(--accent-blue), var(--accent-purple) 55%, var(--accent-pink));

  --font-display: "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --container: 1200px;
  --radius: 14px;
  --transition-fast: 200ms ease;
  --transition-med: 450ms cubic-bezier(.22,.61,.36,1);
  --transition-slow: 900ms cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
/* Smooth scrolling is handled manually in js/main.js (with header-offset awareness),
   so native scroll-behavior stays auto to avoid double animation. */
html { scroll-behavior: auto; }

section[id], .request[id] {
  scroll-margin-top: 84px;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: #000;
  padding: 12px 18px;
  z-index: 2000;
}
.skip-link:focus { left: 12px; top: 12px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 0.5em;
}

h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.1; }
h3 { font-size: 1.25rem; }

.section-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--accent-blue);
  margin-bottom: 0.8em;
}

.section-lead {
  max-width: 720px;
  color: var(--ink-dim);
  font-size: 1.1rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.85rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.btn-cta {
  background: var(--grad-accent);
  color: #06060a;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
}
.btn-cta:hover, .btn-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.5);
}
.btn-ghost {
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  border-color: rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-outline:hover, .btn-outline:focus-visible {
  border-color: var(--accent-pink);
  color: var(--accent-pink);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(8,8,10,0.35);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), padding var(--transition-fast);
}
.site-header.is-scrolled {
  background: rgba(8,8,10,0.85);
  border-bottom-color: var(--line);
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand { flex-shrink: 0; }
.brand-logo { height: 40px; width: auto; transition: height var(--transition-fast); }
.site-header.is-scrolled .brand-logo { height: 34px; }

.main-nav { margin-left: auto; }
.main-nav ul {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-dim);
  position: relative;
  padding-bottom: 4px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}
.main-nav a:hover, .main-nav a:focus-visible { color: var(--ink); }
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }

.header-cta { flex-shrink: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.6s ease;
  animation: kenburns 16s ease forwards;
}
.hero-slide.is-active { opacity: 1; }
@keyframes kenburns {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; transform: none; }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(139,92,246,0.18), transparent 60%),
    linear-gradient(180deg, rgba(6,6,9,0.55) 0%, rgba(6,6,9,0.65) 45%, rgba(6,6,9,0.92) 100%);
}
.hero-content {
  text-align: center;
  max-width: 880px;
  padding: 120px 24px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-logo { height: 64px; width: auto; margin-bottom: 22px; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5)); }
.hero-kicker {
  font-family: var(--font-display);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--accent-blue);
  margin: 0 0 18px;
}
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.05;
  margin: 0 0 22px;
}
.hero h1 span {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  color: var(--ink-dim);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0 auto 34px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 46px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 20px;
  background: none;
  cursor: pointer;
}
.scroll-hint span {
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 8px;
  margin-left: -2px;
  background: var(--ink);
  border-radius: 2px;
  animation: scrollhint 1.8s ease infinite;
}
@keyframes scrollhint {
  0% { opacity: 1; top: 8px; }
  70% { opacity: 0; top: 22px; }
  100% { opacity: 0; top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint span { animation: none; }
}

/* ============================================================
   REVEAL (scroll animations)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   TRUST
   ============================================================ */
.trust { padding: 70px 0; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.trust-label {
  text-align: center;
  color: var(--ink-faint);
  font-family: var(--font-display);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 28px;
}
.trust-heading {
  text-align: center;
  margin: 0 0 40px;
}

/* ---------- Logo marquee (Referenzen & Partner) ----------
   Pure CSS infinite scroll: the track holds the logo set twice back
   to back and animates from translateX(0) to translateX(-50%); since
   the second half is identical to the first, the loop is seamless.
   Each logo sits on a light chip so it stays crisp and readable
   regardless of the surrounding (dark or light) section background,
   whatever colors the individual logo itself uses. */
.logo-marquee {
  overflow: hidden;
  width: 100%;
  margin-bottom: 46px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.logo-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 28px;
  animation: logo-marquee-scroll 38s linear infinite;
}
.logo-marquee:hover .logo-marquee-track,
.logo-marquee:focus-within .logo-marquee-track {
  animation-play-state: paused;
}
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 12px 26px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.logo-marquee-item img {
  max-height: 70px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { overflow-x: auto; }
  .logo-marquee-track { animation: none; }
  .logo-marquee-item[aria-hidden="true"] { display: none; }
}
@media (max-width: 760px) {
  .logo-marquee-item { height: 74px; padding: 10px 18px; }
  .logo-marquee-item img { max-height: 50px; max-width: 130px; }
  .logo-marquee-track { gap: 18px; animation-duration: 26s; }
}

.trust-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label { color: var(--ink-dim); font-size: 0.9rem; }
.stat-label em { color: var(--ink-faint); font-style: normal; font-size: 0.8rem; }

/* ============================================================
   LEISTUNGEN INTRO
   ============================================================ */
.leistungen-intro { padding: 100px 0 40px; text-align: center; }
.leistungen-intro .section-lead { margin: 0 auto; }

/* ============================================================
   SERVICE SECTIONS
   Full-bleed photo "hero" per section, sliced diagonally on BOTH
   the top and bottom edge (a full parallelogram, not just a
   notched corner) so the next section can never visually run
   into it. Heading sits directly on the image (no color plate —
   just a text-shadow), body copy follows below.
   ============================================================ */
.service { background: var(--bg); padding: 0; position: relative; }
.service--alt { background: var(--bg-alt); }

/* ---- Static section image via background-attachment: fixed ----
   The photo is anchored to the VIEWPORT, spanning the whole section
   behind the heading and the solid card. Because it is fixed to the
   viewport (not scrolled into place), it is ALREADY in position the
   moment the section enters — the scrolling card simply uncovers it,
   the image never "slides in" with the heading. This works now because
   NO ancestor of this element has transform/clip-path/filter (the
   diagonal cuts live on sibling pseudo-elements, not on ancestors),
   which is exactly what used to trap a fixed background and force it to
   scroll. Mobile/reduced-motion fall back to a normal scrolling bg. */
.service-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (prefers-reduced-motion: reduce) {
  .service-hero-bg { background-attachment: scroll; }
}
@media (max-width: 980px), (pointer: coarse) {
  .service-hero-bg { background-attachment: scroll; }
}
/* Readability tint over the image. */
.service-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6,6,9,0.72) 0%, rgba(6,6,9,0.30) 40%, rgba(6,6,9,0) 64%);
  pointer-events: none;
}

.service-hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
/* Diagonal TOP edge of the image reveal: a page-coloured triangle that
   masks the top-right corner of the image so its visible top edge slants
   left-high -> right-low. It sits on the (scrolling, non-pinned) hero, so
   it scrolls away with the section instead of sticking. */
.service-hero::before {
  content: "";
  position: absolute;
  /* 1px up-overlap into the previous card closes the sub-pixel hairline
     where the bright fixed background used to peek through the seam. */
  top: -1px;
  left: 0;
  right: 0;
  height: calc(5vw + 1px);
  z-index: 1;
  background: var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}
/* The transition triangle must match the colour of the card directly above
   it. After an --alt card (or the repertoire section, also --bg-alt) the
   triangle would otherwise be the darker --bg → visible colour seam. */
.service--alt + .service .service-hero::before,
.repertoire   + .service .service-hero::before { background: var(--bg-alt); }

.service-heading {
  position: relative;
  z-index: 2;
  padding: 110px 24px 140px;
}
.service-heading .section-kicker {
  color: var(--accent-blue);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  font-size: 1.05rem;
}
.service-heading h2 {
  /* No max-width cap: the heading should span the same width as the
     container below it (text column + aside image), not a narrower
     arbitrary column. */
  max-width: 100%;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  color: #fff;
  text-shadow: 0 6px 28px rgba(0,0,0,0.75), 0 2px 10px rgba(0,0,0,0.6);
}

/* ---------- Dummy image placeholders (temporary, swap for real
   photos/videos later — see comments in index.html for exactly
   what to replace on each one). ---------- */
.img-placeholder {
  /* background-image (longhand), not the "background" shorthand:
     the shorthand resets every background-* sub-property it doesn't
     mention (attachment, position, size, ...) to its initial value,
     which was silently forcing .service-hero's background-attachment
     back to "scroll" and breaking the fixed/parallax effect. */
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 18px, rgba(255,255,255,0.018) 18px 36px),
    linear-gradient(160deg, #202028, #101014);
  border: 1px dashed rgba(255,255,255,0.25);
}
.img-placeholder::after {
  content: attr(data-label);
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.4);
  padding: 6px 14px;
  border-radius: 999px;
}
/* Solid content card that scrolls up over the static image and covers
   it (so the text is never see-through on the photo). The diagonal cut
   lives HERE, on the SCROLLING card — not on the pinned image — so the
   slanted edge scrolls away instead of sticking as a corner triangle.
   Top and bottom edges slant the same way (left-high -> right-low). The
   slant offset is in vw (not %), so the ANGLE is identical in every
   section regardless of how tall its text is. */
.service-body {
  position: relative;
  z-index: 1;
  /* Tall enough (>= one full viewport) that the solid card completely
     covers the pinned image as it scrolls up — otherwise the card runs
     out before it reaches the next section and the previous image/card
     stays visible through the gap. */
  min-height: 100vh;
  /* Centre the content column vertically inside the tall card instead of
     letting it stick to the top. The padding stays as a minimum breathing
     margin; justify-content handles the centring for shorter content. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 0 90px;
  background: var(--bg);
  /* Top edge slanted (left-high -> right-low). The BOTTOM edge is flush to
     the section boundary (flat), so the card's lower-left corner reaches
     down to the exact edge of the NEXT background image instead of stopping
     5vw short. That closed the triangular sliver where the PREVIOUS fixed
     image used to peek through under the cut-away lower-left corner. The
     slanted reveal of the next image is still produced by the next section's
     .service-hero::before mask, so the diagonal look is preserved. */
  clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 100%);
}
.service--alt .service-body { background: var(--bg-alt); }
.service-body-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
}
.service-body-grid > .service-aside-img:first-child { order: -1; }
.service-aside-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* contain (not cover): never crop the photo, whatever its aspect
     ratio — the card background fills any leftover letterbox space. */
  object-fit: contain;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.service-copy p {
  color: var(--ink-dim);
  font-size: 1.25rem;
  line-height: 1.7;
}
.service-points {
  list-style: none;
  margin: 30px 0 38px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.service-points li {
  position: relative;
  padding-left: 32px;
  color: var(--ink);
  font-size: 1.15rem;
}
.service-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--grad-accent);
}
.service-copy .btn {
  padding: 17px 34px;
  font-size: 0.95rem;
}
.service-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============================================================
   DIAGONAL TOP for solid (image-less) sections
   ------------------------------------------------------------
   Same slant angle as the service transitions, but here there is
   no photo underneath — just two solid colours. The ::before paints
   a triangle in the PREVIOUS section's colour so that colour appears
   to slant down into this one. top:-1px overlap closes the seam. */
.gallery-section,
.process,
.faq { position: relative; }
.gallery-section::before,
.process::before,
.faq::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: calc(5vw + 1px);
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}
/* Triangle colour = colour of the section directly above. */
.gallery-section::before { background: var(--bg-alt); } /* after festival (--alt) */
.process::before         { background: var(--bg); }     /* after gallery      */
.faq::before             { background: var(--bg-alt); } /* after process (--alt) */
/* Keep each section's content above its diagonal triangle. */
.gallery-section > .container,
.process > .container,
.faq > .container { position: relative; z-index: 2; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-section { padding: 100px 0; background: var(--bg); }
.gallery-section h2 { max-width: 760px; }

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 34px 0 36px;
}
.filter-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.filter-btn:hover { color: var(--ink); border-color: var(--ink); }
.filter-btn.is-active {
  background: var(--grad-accent);
  color: #06060a;
  border-color: transparent;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--bg-card);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-med), filter var(--transition-med);
}
.gallery-item:hover img, .gallery-item:focus-visible img {
  transform: scale(1.08);
  filter: brightness(0.75);
}
.gallery-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}
.gallery-item:hover .gallery-zoom, .gallery-item:focus-visible .gallery-zoom { opacity: 1; }
.gallery-item.is-hidden { display: none; }

/* ============================================================
   PROCESS / ABLAUF
   ============================================================ */
.process { padding: 100px 0; background: var(--bg-alt); }

/* Timeline overview: a gradient line with 5 numbered points. Each point's
   circle uses the section background colour, so it visually "breaks" the
   line running behind it — the line-with-points look from djingodjango.es. */
.proc-timeline {
  list-style: none;
  margin: 48px 0 44px;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.proc-timeline::before {
  content: "";
  position: absolute;
  top: 26px;            /* vertical centre of the 54px circles */
  left: 10%; right: 10%;
  height: 2px;
  background: var(--grad-accent);
  z-index: 0;
}
/* Each step is a BUTTON: circle + label. Clicking it reveals that step's
   detail panel below the timeline (single-select accordion). */
.proc-tl-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0 8px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: center;
  font: inherit;
}
.proc-tl-step:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 4px;
  border-radius: 10px;
}
.proc-tl-num {
  width: 54px; height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--accent-blue);
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--accent-blue);
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.proc-tl-step:hover .proc-tl-num { box-shadow: 0 0 18px rgba(41, 209, 255, 0.4); }
.proc-tl-step.is-open .proc-tl-num {
  background: var(--grad-accent);
  border-color: transparent;
  color: #06060a;
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.5);
}
.proc-tl-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--transition-fast);
}
.proc-tl-step:hover .proc-tl-label,
.proc-tl-step.is-open .proc-tl-label { color: var(--accent-blue); }

/* Detail panels below the timeline. The clicked step reveals its text here,
   full width; opening one closes the others (single-select). */
.proc-panels {
  max-width: 820px;
  margin: 10px auto 0;
}
.proc-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-med);
}
.proc-a.is-open { max-height: 420px; }
.proc-a p {
  margin: 12px 0 0;
  background: var(--bg-card);
  border: 1px solid var(--accent-blue);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(41, 209, 255, 0.15);
  padding: 20px 24px;
  color: var(--ink-dim);
  font-size: 0.98rem;
  line-height: 1.75;
}
@media (max-width: 760px) {
  /* Stack the timeline vertically; drop the horizontal line. */
  .proc-timeline { grid-template-columns: 1fr; gap: 16px; }
  .proc-timeline::before { display: none; }
  .proc-tl-step { flex-direction: row; justify-content: flex-start; gap: 16px; }
  .proc-tl-num { width: 46px; height: 46px; font-size: 0.9rem; }
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  padding: 80px 0;
  background: linear-gradient(120deg, rgba(41,209,255,0.12), rgba(139,92,246,0.14), rgba(255,47,146,0.12));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* ============================================================
   REQUEST FORM
   ============================================================ */
.request { padding: 100px 0; }
.request-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
}
.request-intro p { color: var(--ink-dim); }
.request-contact { margin-top: 24px; }
.request-contact a { color: var(--accent-blue); font-weight: 600; }

.request-form {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
}
.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  /* Tells the browser these controls sit on a dark surface, so the native
     icons render light: the date field's calendar picker and the number
     field's up/down spinner arrows are otherwise drawn near-black and
     vanish on the dark input background. */
  color-scheme: dark;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  background: rgba(41,209,255,0.06);
}
.form-field textarea { resize: vertical; }
.form-field select { cursor: pointer; color-scheme: dark; }
/* The closed <select> box uses the dark theme's light text (readable on
   the dark input background above). Its native dropdown POPUP is a
   separate, OS-drawn surface that many browsers render with a light
   background by default regardless of color-scheme support — without
   this, <option> text inherited the same near-white color and became
   unreadable/unclickable-looking on that light popup. */
.form-field option {
  color: #14141a;
  background: #ffffff;
}

.form-submit { width: 100%; margin-top: 6px; }
.form-note {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-align: center;
}
.form-note a { color: var(--accent-blue); text-decoration: underline; }
.form-status {
  margin-top: 12px;
  text-align: center;
  font-weight: 600;
  color: var(--accent-blue);
  min-height: 1.4em;
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--accent-pink);
}
.form-field .field-error {
  display: none;
  color: var(--accent-pink);
  font-size: 0.78rem;
  margin-top: 6px;
}
.form-field.has-error .field-error { display: block; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding: 70px 0 0; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
}
.footer-logo { height: 34px; margin-bottom: 16px; }
.footer-brand p { color: var(--ink-faint); font-size: 0.9rem; }
.footer-col h3 {
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--ink-faint);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--ink-dim); transition: color var(--transition-fast); }
.footer-col a:hover { color: var(--accent-blue); }
.footer-col a.placeholder-link em { color: var(--ink-faint); font-size: 0.75rem; font-style: normal; }
.footer-social a { display: flex; align-items: center; gap: 10px; }
.social-icon { width: 18px; height: 18px; object-fit: contain; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 20px 0;
  color: var(--ink-faint);
  font-size: 0.82rem;
}

/* ============================================================
   LEGAL PAGES  (Impressum / Datenschutz / AGB)
   Standalone sub-pages that reuse this stylesheet, the header
   and the footer. Content lives in a centred .legal-page column.
   ============================================================ */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  /* Top padding clears the fixed header. */
  padding: 150px 24px 90px;
}
.legal-back {
  display: inline-block;
  margin-bottom: 26px;
  color: var(--ink-dim);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}
.legal-back:hover { color: var(--accent-blue); }
.legal-page h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1.4rem; }
.legal-page h2 {
  font-size: 1.2rem;
  color: var(--accent-blue);
  text-transform: none;
  letter-spacing: 0.4px;
  margin: 2.2rem 0 0.6rem;
}
.legal-page p,
.legal-page li {
  color: var(--ink-dim);
  line-height: 1.8;
  margin: 0 0 0.8rem;
  font-size: 1rem;
}
.legal-page ul { padding-left: 1.4rem; margin: 0 0 0.8rem; }
.legal-page a { color: var(--accent-blue); }
.legal-page a:hover { text-decoration: underline; }
.legal-page strong { color: var(--ink); }
.legal-notice {
  background: rgba(255, 47, 146, 0.08);
  border: 1px solid rgba(255, 47, 146, 0.28);
  border-radius: var(--radius);
  padding: 16px 20px;
  color: var(--accent-pink);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 2.2rem;
}
.legal-header-cta { margin-left: auto; }

/* ============================================================
   EVENT LANDING PAGES  (Oktoberfest, Hochzeit, …)
   Standalone sub-pages that reuse this stylesheet, header & footer.
   ============================================================ */
/* Full-bleed hero with background photo + dark overlay + centred copy. */
.event-hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.event-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.event-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,6,9,0.72) 0%, rgba(6,6,9,0.55) 45%, rgba(6,6,9,0.9) 100%);
}
.event-hero-content {
  position: relative;
  z-index: 1;
  max-width: 820px;
  padding: 140px 24px 90px;
}
.event-hero .section-kicker { color: var(--accent-blue); }
.event-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: #fff;
  text-shadow: 0 6px 28px rgba(0,0,0,0.75);
  margin: 8px 0 14px;
}
.event-hero-sub {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  margin: 0 0 30px;
}
.event-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Generic content section on the sub-page. */
.event-section { padding: 90px 0; }
.event-section--alt { background: var(--bg-alt); }
.event-section .section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.event-lead {
  max-width: 800px;
  margin: 20px auto 0;
  text-align: center;
  color: var(--ink-dim);
  font-size: 1.1rem;
  line-height: 1.75;
}

/* Card grid used for Features / Spiele / Deko. */
.event-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.event-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.event-card:hover { border-color: var(--accent-blue); transform: translateY(-4px); }
.event-card--highlight {
  border-color: var(--accent-pink);
  box-shadow: 0 0 0 1px rgba(255, 47, 146, 0.25);
}
.event-card-icon { font-size: 2rem; line-height: 1; display: block; margin-bottom: 14px; }
.event-card h3 { font-size: 1.2rem; margin: 0 0 8px; }
.event-card p { margin: 0; color: var(--ink-dim); font-size: 0.95rem; line-height: 1.65; }

/* Simple photo gallery (no lightbox dependency). */
.event-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.event-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.event-cta-band { text-align: center; }
.event-cta-band .event-lead { margin-bottom: 28px; }

@media (max-width: 980px) {
  .event-cards { grid-template-columns: repeat(2, 1fr); }
  .event-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .event-cards { grid-template-columns: 1fr; }
}

/* ── Diagonal transitions between event sub-page sections ──
   Same slant as the main page; the triangle is painted in the colour of
   the section directly above, so it appears to slant down into this one. */
.event-section { position: relative; }
.event-section > .container { position: relative; z-index: 2; }
.event-section + .event-section--alt::before,
.event-section--alt + .event-section::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: calc(5vw + 1px);
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}
.event-section + .event-section--alt::before { background: var(--bg); }
.event-section--alt + .event-section::before { background: var(--bg-alt); }

/* ── Oktoberfest photo-card grid (image on top, title + text below) ── */
.okt-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.okt-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.okt-card:hover { border-color: var(--accent-blue); transform: translateY(-4px); }
.okt-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--bg-alt);
}
.okt-card-body { padding: 20px 22px 24px; }
.okt-card-body h3 { font-size: 1.2rem; margin: 0 0 8px; }
.okt-card-body p { margin: 0; color: var(--ink-dim); font-size: 0.95rem; line-height: 1.65; }
@media (max-width: 980px) { .okt-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .okt-cards { grid-template-columns: 1fr; } }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(4,4,6,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-img {
  max-width: min(90vw, 1100px);
  max-height: 78vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.lightbox-caption { color: var(--ink-dim); font-size: 0.95rem; }
.lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  font-size: 2.2rem;
  line-height: 1;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.6rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 10px 16px;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}
.lightbox-nav:hover { opacity: 1; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }

/* ============================================================
   FAQ  (grid of clickable bullet points, expand on click)
   ============================================================ */
.faq { padding: 100px 0; background: var(--bg); }
.faq h2 { margin-top: 8px; }
.faq-lead {
  max-width: 720px;
  margin: 16px 0 0;
  color: var(--ink-dim);
  font-size: 1.02rem;
  line-height: 1.6;
}
.faq-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.faq-item:hover { border-color: rgba(255, 255, 255, 0.2); }
.faq-item.is-open {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px rgba(41, 209, 255, 0.25);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  padding: 13px 15px;
  cursor: pointer;
}
.faq-q:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.faq-q-text { flex: 1; }
/* Bullet marker: accent triangle that rotates open */
.faq-marker {
  flex-shrink: 0;
  width: 0; height: 0;
  border-left: 8px solid var(--accent-pink);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform var(--transition-fast);
}
.faq-item.is-open .faq-marker { transform: rotate(90deg); }
/* +/- toggle drawn with pseudo-elements */
.faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 14px; height: 14px;
}
.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  background: var(--accent-blue);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.faq-toggle::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-toggle::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }
.faq-item.is-open .faq-toggle::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
/* Answer panel */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-med);
}
.faq-item.is-open .faq-a { max-height: 440px; }
.faq-a p {
  margin: 0;
  padding: 0 15px 15px 33px;
  color: var(--ink-dim);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ============================================================
   MUSIK-REPERTOIRE  (categories around a central vinyl record)
   ============================================================ */
/* margin-top:-1px closes the hairline where the motto section's fixed image
   used to peek through the seam (same idea as the service 1px overlap; both
   sections are --bg-alt, so the overlap is invisible). Reduced top padding
   pulls the repertoire up so it sits closer to the motto card above it. */
.repertoire {
  padding: 34px 0 100px;
  background: var(--bg-alt);
  position: relative;
  z-index: 1;
  margin-top: -1px;
}
.repertoire h2 { margin-top: 8px; }
.repertoire-lead {
  max-width: 780px;
  margin: 16px 0 0;
  color: var(--ink-dim);
  font-size: 1.02rem;
  line-height: 1.6;
}
/* Accordion grid (clickable genre cards, expand on click) — mirrors FAQ */
.rep-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
}
.rep-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.rep-item:hover { border-color: rgba(255, 255, 255, 0.2); }
.rep-item.is-open {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px rgba(41, 209, 255, 0.25);
}
.rep-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  padding: 13px 15px;
  cursor: pointer;
}
.rep-q:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.rep-q-text { flex: 1; }
/* Bullet marker: accent triangle that rotates open */
.rep-marker {
  flex-shrink: 0;
  width: 0; height: 0;
  border-left: 8px solid var(--accent-pink);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform var(--transition-fast);
}
.rep-item.is-open .rep-marker { transform: rotate(90deg); }
/* +/- toggle drawn with pseudo-elements */
.rep-toggle {
  position: relative;
  flex-shrink: 0;
  width: 14px; height: 14px;
}
.rep-toggle::before,
.rep-toggle::after {
  content: "";
  position: absolute;
  background: var(--accent-blue);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.rep-toggle::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
.rep-toggle::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }
.rep-item.is-open .rep-toggle::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
/* Answer panel */
.rep-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-med);
}
.rep-item.is-open .rep-a { max-height: 440px; }
.rep-a p {
  margin: 0;
  padding: 0 15px 15px 33px;
  color: var(--ink-dim);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .service { padding-top: 70px; }
  .service-hero { min-height: 72vh; clip-path: polygon(0% 0%, 100% 16%, 100% 100%, 0% 84%); }
  .service-heading { padding: 56px 24px 72px; }
  .service-heading h2 { font-size: clamp(1.8rem, 6.5vw, 2.6rem); }
  .service-body-grid { grid-template-columns: 1fr; gap: 30px; }
  .service-body-grid > .service-aside-img:first-child { order: 0; }
  .service-aside-img { aspect-ratio: 16/9; }

  .request-grid { grid-template-columns: 1fr; gap: 40px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .faq-grid { grid-template-columns: repeat(2, 1fr); }
  .rep-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .trust-stats { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
}

@media (max-width: 760px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }

  .main-nav.is-open {
    display: block;
    position: fixed;
    top: 68px;
    left: 0; right: 0;
    background: rgba(8,8,10,0.98);
    border-bottom: 1px solid var(--line);
    padding: 20px 24px 30px;
  }
  .main-nav.is-open ul { flex-direction: column; gap: 20px; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .proc-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .rep-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta-band-inner { flex-direction: column; text-align: center; }
  .hero-content { padding-top: 140px; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .request-form { padding: 22px; }
}