/* ============================================================================
   BETONWATTE - styles.css
   ----------------------------------------------------------------------------
   Everything visual lives here. The colours are pulled straight from the
   artist photo: hot pink, cyan, yellow, orange and electric violet on a
   near-black "misty forest" base. Change a value in :root below and it
   updates everywhere on the page.
   ============================================================================ */

:root {
  /* ---- Colours ---- */
  --bg:        #212322;   /* page background - sleek dark grey (not harsh black) */
  --bg-panel:  #2a2c2a;   /* cards / panels - a touch lighter than the page, so they read as raised */
  --bg-panel2: #303230;
  --ink:       #f4f1ea;   /* main text */
  --muted:     #8f968c;   /* secondary text */
  --line:      rgba(255,255,255,0.10);

  /* The neon accents (from the photo) */
  --pink:   #ff2e9a;
  --cyan:   #1fe3df;
  --yellow: #ffd23f;
  --orange: #ff6a1a;
  --violet: #7b5cff;
  --green:  #3df58a;   /* "now playing" green for the groove button dot */

  /* The signature multi-colour gradient, reused all over */
  --grad: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow), var(--cyan), var(--violet));

  /* ---- Type ---- */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);            /* movement: quick start, long settle */
  --ease-soft: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* fades: even in-out, never snaps */

  /* ---- Layout ---- */
  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1240px;
}

/* ---- Reset / base ---------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
*, *::before, *::after { -webkit-font-smoothing: antialiased; }

html {
  scroll-behavior: smooth;
  /* iPhones "helpfully" boost text they deem too small to read (headings ballooned to
     ~1.6x and "Debut Album" wrapped ugly on Simeon's iPhone 15). The sizes here are all
     deliberate + responsive, so opt out of that auto-inflation. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* keep anchored sections clear of the fixed nav when jumped to from the menu */
#music, #about, #video, #live, #contact { scroll-margin-top: 96px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
  /* a faint vignette + base wash so the page never looks flat-black */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(123,92,255,0.10), transparent 60%),
    radial-gradient(100% 60% at 100% 100%, rgba(31,227,223,0.06), transparent 55%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--pink); color: #fff; }

/* ============================================================================
   BACKGROUND LAYERS
   ============================================================================ */

/* the moving colour blobs that follow the mouse (drawn by script.js) */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.10;          /* ambient drift is barely-there now - mostly just the dark grey; music still makes it pulse (see script.js) */
}

/* film grain - gives the whole thing an artsy, printed texture */
.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* soft glow that trails the cursor (positioned by script.js) */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 380px; height: 380px;
  margin: -190px 0 0 -190px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(255,46,154,0.18), rgba(31,227,223,0.10) 40%, transparent 70%);
  mix-blend-mode: screen;
  transition: opacity 0.4s ease;
  will-change: transform;
}

/* ============================================================================
   HERO UTILITIES  (mini player + DE / EN switch, pinned to the top of the hero
   so they scroll away with it instead of forming a sticky nav bar)
   ============================================================================ */
.hero__util {
  position: absolute;
  top: 26px; right: var(--pad);
  z-index: 5;
  display: inline-flex; align-items: center; gap: 12px;
}

/* mini play indicator (only shows once something is playing) */
.nav__mini {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink);
  font-size: 0.8rem; font-weight: 600;
  transition: border-color 0.25s ease, transform 0.2s ease;
}
.nav__mini[hidden] { display: none; }   /* keep it hidden until playback starts */
.nav__mini:hover { border-color: var(--cyan); transform: translateY(-1px); }
.nav__mini-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.nav__mini-bars i { width: 3px; height: 100%; background: var(--cyan); border-radius: 2px; transform-origin: bottom; }
.nav__mini.is-playing .nav__mini-bars i { animation: eq 0.9s ease-in-out infinite; }
.nav__mini-bars i:nth-child(2) { animation-delay: 0.15s; background: var(--pink); }
.nav__mini-bars i:nth-child(3) { animation-delay: 0.3s;  background: var(--yellow); }
.nav__mini-bars i:nth-child(4) { animation-delay: 0.45s; background: var(--violet); }

@keyframes eq { 0%,100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* ---- DE / EN language switch ---------------------------------------------
   A little segmented pill. The current language is a filled neon chip that slowly
   drifts through the palette (same hueflow as the hero title); the other language
   lights up with the gradient underline borrowed from the main nav links. */
.lang {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10,12,11,0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.lang:hover { border-color: rgba(31,227,223,0.5); }
.lang__opt {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.06em; line-height: 1;
  padding: 6px 11px; border-radius: 999px;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
/* the OTHER language (a real link): brighten + gradient underline on hover */
a.lang__opt::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px;
  background: var(--grad); border-radius: 2px;
  transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--ease);
}
a.lang__opt:hover { color: var(--ink); }
a.lang__opt:hover::after { transform: scaleX(1); }
/* the CURRENT language: filled neon chip with the slow colour drift + soft glow */
.lang__opt.is-active {
  color: #0a0c0b;
  background: var(--grad); background-size: 250% 100%;
  box-shadow: 0 0 16px rgba(255,46,154,0.30);
  animation: hueflow 16s linear infinite;
}

/* ============================================================================
   HERO
   ============================================================================ */
.hero {
  /* vh first as the fallback for pre-2022 browsers (no svh there = no height at all),
     then svh takes over where it exists - it ignores the iOS toolbar shrink */
  min-height: calc(100vh - 122px);
  min-height: calc(100svh - 122px);   /* leave room for the sound wave to sit at the bottom of the first screen */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;                 /* centred horizontally */
  text-align: center;
  padding: 49vh var(--pad) 40px;
  padding: 49svh var(--pad) 40px;   /* title starts where the figure fades out; subtitle + buttons follow below it */
  position: relative;
  isolation: isolate;                  /* faded character backdrop sits behind the text, above the colour field */
}
/* faded character backdrop behind the hero type (desktop + tablet); phones get their own sizing below */
.hero__horns {
  display: block; position: absolute; z-index: -1;
  top: 11%; left: 50%; transform: translateX(-50%);   /* sits below the nav so the headdress doesn't crowd the menu */
  width: min(40vw, 480px); aspect-ratio: 578 / 1124; height: auto; max-height: 84%;   /* box matches the image so the fade always lands at the same point on him (no hands on tall screens) */
  background: url("https://res.cloudinary.com/bakermedia/image/upload/e_trim,f_auto,q_auto/betonwatte-Branding_Image_Transparent.png") center top / contain no-repeat;
  opacity: 0.3;
  /* fade out low on his body so the character dissolves right into the title (a sliver may sit behind the text) */
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 64%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 64%);
  pointer-events: none;
}
.hero__kicker {
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffffff;                    /* keep it essentially white so it stands out clearly */
  margin-top: 28px;                  /* now sits just beneath the title */
  animation: subShimmer 7s ease-in-out infinite;   /* whisper of life, but stays bright */
}
@keyframes subShimmer { 0%, 100% { color: #ffffff; } 50% { color: #e9ebe5; } }
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 8vw, 10.5rem);   /* scales with the viewport so the single word always fits inside the side padding, even on small phones */
  line-height: 0.9;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: row;             /* BETONWATTE always stays on ONE line - it shrinks to fit, never wraps */
  flex-wrap: nowrap;
  justify-content: center;
  white-space: nowrap;
}
.hero__word { display: flex; }     /* the five letters of a word sit in one row */
.hero__title .hero__word span {    /* the individual letters (not the word wrapper) */
  display: inline-block;
  background-image: var(--grad);
  background-size: 1000% 100%;     /* per-letter offset set in JS = one continuous sweep */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
@keyframes hueflow { to { filter: hue-rotate(360deg); } }

/* "Beton" - the colourful half. The hue cycle now lives on these letters (not the whole
   title) so it no longer reaches "watte". */
.hero__title .hero__word--color span { animation: hueflow 16s linear infinite; }

/* "watte" - the second half. Soft warm greys up to a warm white (a very faint warm touch,
   never cream), spread across the letters like "Beton". Instead of a hard sweep it breathes:
   brightness + a hint of warmth + a tiny hue drift, so the tone shifts smoothly - the same
   kind of movement as "Beton", just gentler and on its own warm palette. */
.hero__title .hero__word--mono span {
  background-image: linear-gradient(90deg, #908d88, #c9c6c0, #f7f6f2, #c9c6c0, #908d88);   /* mostly grey/white, only a whisper of warmth; lighter ends so the last "E" isn't dark */
  background-size: 1000% 100%;
  animation: watteFlow 7s ease-in-out infinite;
}
@keyframes watteFlow {
  0%, 100% { filter: brightness(0.97) sepia(0.03) hue-rotate(-4deg); }
  50%      { filter: brightness(1.06) sepia(0.10) hue-rotate(5deg); }
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 80px; }   /* doubled - more air below the subtitle */

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem;
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease), background 0.3s ease, color 0.3s ease;
  will-change: transform;
}
.btn--primary { background: var(--ink); color: #0a0c0b; }
.btn--primary:hover { box-shadow: 0 0 0 2px var(--ink), 0 14px 40px rgba(255,46,154,0.35); }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: transparent; box-shadow: 0 0 0 2px var(--cyan); }
.btn__icon { font-size: 0.8rem; }

/* ============================================================================
   HERO CINEMA MODE  (the performance video takes over the hero)
   ----------------------------------------------------------------------------
   Pressing "Musik abspielen" fades out the figure, the kicker and the button,
   flies the BETONWATTE title up to the top-left corner (the motion itself is in
   script.js), and fades in a full-bleed performance video across the whole hero,
   down to the sound wave. A small control dock (play/pause + volume + ×) appears
   just above the wave; its × reverses all of it.
   ============================================================================ */

/* Full-bleed video layer: over the hero, under the title + top utilities.
   The iframe is deliberately oversized and centred so a 16:9 video always covers
   the hero with no letterbox bars (object-fit can't apply to an <iframe>, so we
   scale + centre it and let the wrapper clip the overflow). */
.hero__video {
  position: absolute; inset: 0;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;                 /* purely a backdrop - controlled by the dock */
  /* the transition here governs the fade OUT (leaving cinema): brisk, so the still frame
     never lingers; the fade IN keeps its long, even build (declared on .is-visible) */
  transition: opacity 1.2s var(--ease-soft);
}
.hero__video.is-visible { opacity: 1; transition: opacity 4.2s var(--ease-soft); }
.hero__video iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, 177.78vh);          /* 16/9 of the viewport height ... */
  height: max(100vh, 56.25vw);          /* ... or 9/16 of its width - whichever covers */
  border: 0;
  pointer-events: none;
}
/* the PORTRAIT cut (script.js picks it on portrait screens): full width at the clip's
   own 9:16 ratio, top edge pinned to the top of the hero - so the head of the frame is
   always in view and only the BOTTOM gets cropped when the screen is shorter than the
   clip (on an upright iPad that crop is bigger; the framing is made for it) */
.hero__video--portrait iframe {
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 177.78vw;                     /* 16/9 of the width - native ratio, no internal bars */
  /* on screens proportionally TALLER than the clip it ends a little above the wave -
     dissolve the clip's own last stretch so that edge always reads deliberate. Where
     the clip overshoots the hero instead (most phones, iPads), the fade sits below
     the visible area and the video simply runs full-bleed. */
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}

/* Entering cinema: the figure + kicker dissolve slowly and EVENLY (soft in-out, so the
   fade never snaps at the start). The button doesn't fade here at all - script.js flies
   it down into the control dock and crossfades the two right on the spot (a real morph). */
.hero .hero__horns { transition: opacity 2.8s var(--ease-soft); }   /* the figure steps aside a touch quicker than the rest */
.hero .hero__kicker { transition: opacity 3.4s var(--ease-soft); }
.hero.is-cinema .hero__horns,
.hero.is-cinema .hero__kicker { opacity: 0; pointer-events: none; }
.hero.is-cinema .hero__actions { pointer-events: none; }

/* The docked title rides above the video. JS also sets these inline so the layer
   order survives the fly-back after .is-cinema has been removed. */
.hero.is-cinema .hero__title { position: relative; z-index: 6; }

/* ---- the primary CTA buttons: a steady, gentle colour ripple (.btn--pulse) ---- */
.btn--pulse { position: relative; overflow: visible; }
/* the little play icon: a soft, rounded cream disc (a shade lighter than the pill, with a
   gentle sheen so it still feels dimensional) and a dark triangle - a real little play
   button, without the rainbow. */
#hero-play .btn__icon {
  display: inline-grid; place-items: center;
  width: 23px; height: 23px; border-radius: 50%;
  margin-left: -3px;
  background: linear-gradient(145deg, #ffffff, #e4dfd3);   /* cream shades -> rounded, dimensional feel */
  color: #1a1c1b; font-size: 0.56rem; padding-left: 1px;   /* dark triangle, optically centred */
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 2px 7px rgba(0,0,0,0.22);
}
/* gentle, colourful rings that keep easing out of the button - a fresh one about every
   1.2s, but each one lingers and fades slowly + smoothly over ~2.4s (linear, so it never
   snaps away suddenly), travelling a good way out uniformly (via inset, so it doesn't
   shoot far to the sides of the wide pill). Two, half a cycle apart, so they overlap. */
.btn--pulse::before, .btn--pulse::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--grad);
  padding: 2px;                                   /* ring thickness */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  animation: ctaRing 2.4s linear infinite;
}
.btn--pulse::after { animation-delay: 1.2s; }
@keyframes ctaRing {
  0%   { inset: 0;     opacity: 0; }
  14%  { opacity: 0.5; }               /* ease in gently ... */
  100% { inset: -20px; opacity: 0; }   /* ... then expand + fade the whole way: slow + smooth */
}
/* the booking submit rings at HALF the cadence of the hero button: each ring is the
   identical 2.4s pulse, but it lives in the first half of a 4.8s cycle and the second
   half is quiet - so a fresh ring every 2.4s instead of every 1.2s, and never two at once. */
#bookform-submit::before, #bookform-submit::after { animation: ctaRingCalm 4.8s linear infinite; }
#bookform-submit::after { animation-delay: 2.4s; }
@keyframes ctaRingCalm {
  0%   { inset: 0;     opacity: 0; }
  7%   { opacity: 0.5; }
  50%  { inset: -20px; opacity: 0; }
  100% { inset: -20px; opacity: 0; }
}

/* ---- the loading fill: pressing play turns the white pill itself into a loading bar.
   The label + play disc fade back (never fully gone) while a colourful fill makes ONE
   smooth, even run across the whole pill (~1.5s). The show starts right as it completes;
   if YouTube genuinely needs longer (bad internet), the pill simply rests fully coloured
   until the real frames are confirmed. Pure transforms/opacity: GPU-composited, no
   looping animation, no per-frame JS. ---- */
.btn__load {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;                     /* clip the fill to the pill shape */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#hero-play.is-loading .btn__load { opacity: 1; }
.btn__load::before {
  content: "";
  position: absolute; inset: 0;
  /* The fill wears the teal of the performer's outfit in the video (#00c2ae) rather than
     the rainbow gradient - one colour family, in slightly lighter + darker shades laid
     diagonally, with soft painted "blotches" over it so it feels brushed, not striped.
     (It also stretches as the bar grows, which adds to the painted feel.) */
  background:
    radial-gradient(90px 46px at 20% 22%, rgba(255,255,255,0.16), transparent 70%),
    radial-gradient(70px 44px at 62% 82%, rgba(0,72,63,0.22), transparent 70%),
    radial-gradient(110px 56px at 86% 28%, rgba(158,255,241,0.15), transparent 70%),
    radial-gradient(80px 48px at 40% 62%, rgba(0,133,118,0.18), transparent 70%),
    linear-gradient(115deg, #10d3bd 0%, #00c2ae 28%, #009c8b 52%, #00cdb8 74%, #00b1a0 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.5s cubic-bezier(0.35, 0.12, 0.35, 1);   /* one smooth, even run - no hold, no jump */
}
#hero-play.is-loading .btn__load::before { transform: scaleX(1); }
/* label + play disc step back so the pill reads as one big loading bar */
#hero-play > span:not(.btn__load) { transition: opacity 0.45s ease; }
#hero-play.is-loading > span:not(.btn__load) { opacity: 0.3; }
/* and the pulse rings pause while the button is busy */
#hero-play.is-loading::before, #hero-play.is-loading::after { animation: none; opacity: 0; }

/* ---- the little control dock: slides up to sit just above the wave, centred, and
   stays semi-transparent so it never hides the video. Play/pause + volume. ---- */
.hero__dock {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translate(-50%, 0);
  z-index: 6;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(14,16,15,0.42);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 34px rgba(0,0,0,0.34);
  opacity: 0; pointer-events: none;
  /* handover fade - the flying pill does the travelling; the dock is revealed at the very
     spot the pill lands. Same duration + curve as the pill's fade-out (script.js), started
     at the same moment, so the two truly cross - no gap between them. */
  transition: opacity 0.55s ease;
}
.hero.is-dockin .hero__dock { opacity: 1; pointer-events: auto; }
.dock__ctrl {
  width: 36px; height: 36px; border-radius: 50%;
  flex: none;                 /* never let a tight dock squash the circles into ovals */
  display: grid; place-items: center;
  color: var(--ink); font-size: 1.1rem; line-height: 1; font-family: var(--font-body);
  border: 1px solid transparent;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
}
.dock__ctrl:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.dock__ctrl svg { display: block; }
/* the play/pause is the colourful focal point (brand gradient, drifting like the wordmark) */
.dock__ctrl--play {
  width: 42px; height: 42px; font-size: 1rem;
  color: #0a0c0b;
  background: var(--grad); background-size: 220% 100%;
  box-shadow: 0 4px 18px rgba(255,46,154,0.30);
  animation: hueflow 16s linear infinite;
}
.dock__ctrl--play:hover { transform: translateY(-1px); box-shadow: 0 7px 24px rgba(255,46,154,0.42); }
/* the close leans pink so it reads clearly as "leave the video" */
.dock__ctrl--close { font-size: 0.95rem; color: var(--muted); }
.dock__ctrl--close:hover { background: rgba(255,46,154,0.22); color: #fff; }
.dock__sep { width: 1px; height: 20px; flex: none; background: rgba(255,255,255,0.16); margin: 0 2px; }

/* ---- pop-up volume: hover (or tap) the speaker, then drag the slider up / down.
   Dragging to the bottom (0) silences it. ---- */
.dock__vol { position: relative; display: inline-grid; place-items: center; }
.dock__volpop {
  position: absolute; left: 50%; bottom: 100%;      /* sits directly on the button - no hover gap */
  transform: translateX(-50%) translateY(6px);
  width: 44px; height: 118px;
  border-radius: 16px;
  background: rgba(14,16,15,0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 34px rgba(0,0,0,0.42);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.dock__vol:hover .dock__volpop,
.dock__vol:focus-within .dock__volpop,
.dock__vol.is-open .dock__volpop {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* a horizontal range rotated upright, so drag-up = louder (rotation works everywhere) */
.dock__volslider {
  position: absolute; top: 50%; left: 50%;
  width: 96px; height: 20px;
  transform: translate(-50%, -50%) rotate(-90deg);   /* centre it in the pill, then stand it upright */
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer;
}
.dock__volslider::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--cyan), var(--pink));
}
.dock__volslider::-webkit-slider-thumb {
  -webkit-appearance: none; margin-top: -5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.dock__volslider::-moz-range-track { height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--cyan), var(--pink)); }
.dock__volslider::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.45); }

/* ---- the "Ton an" / "Unmute" chip: where the browser demands a real tap before any
   sound (phones, strict desktop Safari), the video starts muted and this bright little
   pill floats just above the dock. One tap = sound on, chip gone. JS toggles .is-on;
   it only ever shows together with the dock (.is-dockin). ---- */
.hero__unmute {
  position: absolute;
  left: 50%; bottom: 92px;                 /* just above the dock (22px + its ~56px + air) */
  transform: translate(-50%, 8px);
  z-index: 6;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(244,241,234,0.94);      /* cream, like the main CTA - unmissable on video */
  color: #0a0c0b;
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.hero.is-dockin .hero__unmute.is-on {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0);
}
.hero__unmute:hover { background: #fff; }

/* ============================================================================
   SOUND WAVE BAND (under the hero - reacts to the music when playing)
   ============================================================================ */
.wave-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.012); }
.wave { display: block; width: 100%; height: 120px; opacity: 0.7; }

/* ============================================================================
   SECTION HEADINGS (shared)
   ============================================================================ */
.section-head {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding: 0 var(--pad);
  margin-bottom: 48px;
}
.section-head__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 7.5vw, 5rem); line-height: 1;
  text-align: center;         /* if a title ever has to wrap ("Debut Album"), the lines stay centred */
  background-image: var(--grad); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: saturate(0.6);
  animation: hueflowSoft 16s linear infinite;   /* same moving colour as Booking, a little less saturated */
}
@keyframes hueflowSoft { from { filter: saturate(0.6) hue-rotate(0deg); } to { filter: saturate(0.6) hue-rotate(360deg); } }

/* ============================================================================
   PLAYER
   ============================================================================ */
.player { padding: 120px 0; max-width: var(--maxw); margin: 0 auto; }
.player .section-head { justify-content: center; }   /* "Das Album" centred like the other sections */

/* "stream the music" links shown under the heading */
.listen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; padding: 0 var(--pad); margin: -22px 0 42px; text-align: center; }
.listen__label { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
.listen__link { font-weight: 600; font-size: 0.95rem; border-bottom: 1px solid transparent; transition: color 0.25s ease, border-color 0.25s ease, transform 0.32s var(--ease); }
.listen__link:hover { color: var(--cyan); border-color: var(--cyan); }

.player__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  padding: 0 var(--pad);
}

/* ---- Now playing panel ---- */
.now {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  background: linear-gradient(160deg, var(--bg-panel), var(--bg-panel2));
  align-self: start;
  position: sticky;
  top: 96px;
}
.now__viz {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0.5;
  pointer-events: none;
}
.now__meta { position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.now__index {
  font-family: var(--font-display); font-weight: 800;
  font-size: 3.4rem; line-height: 1;
  background-image: var(--grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.now__title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.now__tag { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 6px; }

/* seek bar */
.seek {
  position: relative;
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.10);
  cursor: pointer;
  margin-top: 8px;
}
.seek__fill { position: absolute; inset: 0; width: 0%; border-radius: 999px; background: var(--grad); background-size: 300% 100%; }
.seek__head {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); transform: translate(-50%, -50%); box-shadow: 0 0 12px rgba(255,255,255,0.6);
}
.seek__times { position: relative; display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* transport */
.transport { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.ctrl {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.1rem; color: var(--ink);
  border: 1px solid var(--line);
  transition: transform 0.2s ease, border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.ctrl:hover { border-color: var(--cyan); transform: translateY(-2px); }
.ctrl.is-active { color: #0a0c0b; background: var(--cyan); border-color: var(--cyan); }
.ctrl--play {
  width: 64px; height: 64px; font-size: 1.3rem;
  background: var(--ink); color: #0a0c0b; border: none;
}
.ctrl--play:hover { box-shadow: 0 0 28px rgba(31,227,223,0.5); }

/* volume */
.volume { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.volume__icon { color: var(--muted); }
.volume input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.12); cursor: pointer;
}
.volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}
.volume input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border: none; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}

/* ---- Track list ---- */
.tracklist { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.track {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease);
}
.track:hover { background: rgba(255,255,255,0.04); transform: translateX(6px); }
.track:hover .track__num { color: var(--ink); }
.track.is-current { background: rgba(255,255,255,0.05); border-color: var(--line); }
.track.is-current .track__title { background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.track__num { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; font-weight: 600; transition: color 0.25s ease; }
.track__main { min-width: 0; }
.track__title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; display: block; }   /* title on its own line */
.track__sub { color: var(--muted); font-size: 0.78rem; margin-top: 2px; display: block; }                 /* grey feat. always on the line below */
.track__right { display: flex; align-items: center; gap: 14px; }
.track__time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85rem; }

/* little equaliser that shows on the playing track */
.track__eq { display: none; align-items: flex-end; gap: 2px; width: 16px; height: 14px; }
.track__eq i { width: 3px; background: var(--cyan); border-radius: 2px; height: 100%; transform-origin: bottom; }
.track.is-playing .track__eq { display: flex; }
.track.is-playing .track__time { display: none; }
.track.is-playing .track__eq i { animation: eq 0.9s ease-in-out infinite; }
.track.is-playing .track__eq i:nth-child(2) { animation-delay: 0.2s; background: var(--pink); }
.track.is-playing .track__eq i:nth-child(3) { animation-delay: 0.4s; background: var(--yellow); }

/* ============================================================================
   ABOUT
   ============================================================================ */
.about {
  max-width: var(--maxw); margin: 0 auto;
  padding: 120px var(--pad) 140px;   /* extra room below, to space it off from Live */
}
/* The bio is now a single centred column. */
.about__copy {
  max-width: 680px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.6vw, 34px);
  text-align: center;
}
.about .section-head { padding: 0; margin-bottom: 0; justify-content: center; }   /* centred; spacing handled by the flex column */
.about__lead { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.2vw, 2.2rem); line-height: 1.25; }
.about__body { color: var(--muted); font-size: 1.05rem; max-width: 60ch; }
.chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chips li {
  font-size: 0.82rem; font-weight: 600;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.chips li:hover { transform: translateY(-2px); border-color: transparent; box-shadow: inset 0 0 0 1px var(--pink); color: var(--pink); }
.chips a { color: inherit; cursor: pointer; display: block; margin: -8px -16px; padding: 8px 16px; }  /* whole pill clickable */

/* ============================================================================
   VIDEO  (a click-to-play performance clip - no heading; sits centred between
   the end of the bio and the live shows)
   ============================================================================ */
/* live's top padding is 20px more than the bio's bottom, so top = bottom + 20 lands the
   box visually dead-centre between them (holds at every breakpoint - the gap is constant). */
.reel { max-width: 880px; margin: 0 auto; padding: 40px var(--pad) 20px; }
.reel__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--bg-panel), var(--bg-panel2));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.reel__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), opacity 0.5s ease;
}
.reel__frame:hover .reel__poster { transform: scale(1.04); }
/* a soft veil so the play button always reads on top of the thumbnail */
.reel__frame::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 50%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.5));
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.reel__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(244, 241, 234, 0.94);
  color: #0a0c0b; font-size: 1.5rem;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), opacity 0.4s ease;
  z-index: 2;
}
.reel__play-icon { margin-left: 5px; }   /* optically centre the triangle */
.reel__frame:hover .reel__play { transform: translate(-50%, -50%) scale(1.07); box-shadow: 0 16px 46px rgba(255, 46, 154, 0.4); }
/* a gentle gradient ring blooms around the play button on hover, echoing the hero CTA */
.reel__play::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: var(--grad); padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0; transition: opacity 0.35s ease;
}
.reel__frame:hover .reel__play::before { opacity: 0.9; }
/* the loaded player fills the frame; once playing, the poster + button step aside */
.reel__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.reel__frame.is-playing .reel__poster,
.reel__frame.is-playing .reel__play,
.reel__frame.is-playing::after { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .reel { padding: 30px var(--pad) 10px; }   /* still top = bottom + 20, so it stays centred on phones */
  .reel__frame { border-radius: 14px; }
  .reel__play { width: 62px; height: 62px; font-size: 1.15rem; }
}
/* pre-2021 browsers (e.g. iOS 14) don't know aspect-ratio: without a stand-in the video
   box and the hero figure would collapse to zero height there */
@supports not (aspect-ratio: 16 / 9) {
  .reel__frame { padding-top: 56.25%; }      /* the classic 16:9 padding box */
  .hero__horns { height: 84%; }
}

/* ============================================================================
   LIVE
   ============================================================================ */
.live { padding: 160px 0 90px; max-width: 980px; margin: 0 auto; }   /* centred, narrower column with more air above */
.live .section-head { justify-content: center; }
.shows { list-style: none; padding: 0 var(--pad); }
.show {
  display: grid;
  grid-template-columns: 110px 1fr 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  transition: padding-left 0.3s var(--ease);
}
.show:last-child { border-bottom: 1px solid var(--line); }
.show:hover { padding-left: 14px; }
.show__date { font-family: var(--font-display); color: var(--muted); font-size: 0.95rem; }
.show__date b { display: block; font-size: 2rem; color: var(--ink); line-height: 1; }
.show__venue { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.show__cta { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 10px 22px; font-weight: 600; font-size: 0.9rem; transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.3s ease, transform 0.32s var(--ease); }
.show__cta:hover { border-color: var(--pink); color: var(--pink); }

/* shown when there is no upcoming date booked */
.shows__empty { padding: 26px var(--pad); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 1.05rem; }

/* the real upcoming show - gets a highlight */
.show--feature { grid-template-columns: 130px 1fr auto auto; }
.show--feature .show__venue { background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.show__detail { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.85rem; color: var(--muted); margin-top: 8px; }
.show__badge { justify-self: start; align-self: center; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(31,227,223,0.4); border-radius: 999px; padding: 5px 12px; }

/* past highlights: a light, text-only track record under the upcoming show */
.past { padding: 0 var(--pad); margin-top: 72px; }   /* more air between the upcoming show and "Previously" */
.past__head { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.past__list { list-style: none; padding: 0; margin: 0; }
.past__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 16px 0; border-top: 1px solid var(--line); transition: padding-left 0.3s var(--ease); }
.past__row:hover { padding-left: 10px; }
.past__venue { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.past__meta { color: var(--muted); font-size: 0.9rem; }
/* narrow screens: stack venue over meta so every row is consistent (no half-wrapping) */
@media (max-width: 640px) { .past__row { flex-direction: column; align-items: flex-start; gap: 3px; } }

/* ============================================================================
   CONTACT / FOOTER
   ============================================================================ */
.contact { padding: 120px var(--pad) 72px; margin-top: 80px; border-top: 1px solid var(--line); }
.contact__inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.contact__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 7.5vw, 5rem); line-height: 0.95; background-image: var(--grad); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hueflow 16s linear infinite; }
.social { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 40px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.social a { color: var(--muted); transition: color 0.25s ease, transform 0.32s var(--ease); display: inline-block; }
.social a:hover { color: var(--ink); transform: translateY(-2px); }
.social--follow { margin-top: 14px; }   /* second row (socials) - same size as the first */
/* (booking email now lives in the footer base - see .contact__base below) */

/* booking enquiry form */
.bookform { max-width: 640px; margin: 44px auto 8px; text-align: left; display: grid; gap: 16px; }
.bookform__hp { display: none; }   /* spam honeypot - never shown to people */
.bookform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); }
.field > span em { font-style: normal; opacity: 0.55; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 0.98rem; color: var(--ink);
  background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; transition: border-color 0.25s ease, background 0.25s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); background: rgba(255,255,255,0.06); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238f968c' stroke-width='1.5'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; }
.field select option { color: #111; }
.bookform .btn { justify-self: start; margin-top: 24px; }   /* more space between the message field and the submit button */
.bookform__status { font-size: 0.9rem; color: var(--muted); min-height: 1.2em; }
.bookform__status.is-ok { color: var(--cyan); }
.bookform__status.is-err { color: var(--pink); }

/* booking email: quiet and small, tucked under the social links just above the base line */
.contact__mail {
  display: inline-block;
  margin-top: 34px;
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: rgba(143,150,140,0.8);
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.contact__mail:hover { color: var(--ink); border-color: var(--line); }

/* footer base: a slim bottom bar - legal links on the left, the maker credit on the right */
.contact__base {
  max-width: var(--maxw);
  margin: 48px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px 24px;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}
.contact__legal { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.contact__legal a { color: rgba(143,150,140,0.8); transition: color 0.25s ease; }
.contact__legal a:hover { color: var(--ink); }
/* phones: stack the bar centred - legal row first, credit beneath */
@media (max-width: 640px) {
  .contact__base { flex-direction: column; align-items: center; gap: 16px; text-align: center; padding-top: 22px; }
  .contact__legal { justify-content: center; }
}
/* "Website by Baker Media" credit - the lead-in stays the quiet footer grey; only the
   brand name carries Baker Media's purple (#C680FF from bakermedia.co), slightly bolder.
   Hover: lead-in brightens like the other footer links, the brand lifts to the light purple. */
.credit { color: rgba(143,150,140,0.72); font-weight: 500; transition: color 0.25s ease; }
.credit:hover { color: var(--ink); }
.credit__brand { color: #c680ff; font-weight: 600; transition: color 0.25s ease; }
.credit:hover .credit__brand { color: #d9a8ff; }

/* ============================================================================
   LEGAL PAGES (imprint / privacy) - same look, minimal content
   ============================================================================ */
/* the legal / utility pages keep a simple fixed top bar (the homepage has none) */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 16px var(--pad); }
.nav--solid { background: rgba(33,35,34,0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav__brand { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; font-size: 1rem; color: var(--ink); }
.nav__links { display: flex; flex-wrap: wrap; gap: 12px 22px; font-size: 0.92rem; }
.nav__links a { color: var(--muted); transition: color 0.25s ease; }
.nav__links a:hover { color: var(--ink); }
.nav__right { display: flex; align-items: center; }
.legal__wrap { max-width: 760px; margin: 0 auto; padding: 150px var(--pad) 90px; position: relative; }
.legal__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: 1; margin-bottom: 14px; background-image: var(--grad); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hueflow 16s linear infinite; }
.legal__intro { color: var(--muted); margin-bottom: 40px; max-width: 56ch; }
.legal h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 34px 0 10px; }
.legal p { color: var(--ink); opacity: 0.82; margin-bottom: 12px; line-height: 1.65; max-width: 64ch; }
.legal a { color: var(--cyan); }
.legal__meta { line-height: 1.95; font-size: 1.02rem; }
.legal__updated { color: var(--muted); font-size: 0.85rem; margin-top: 44px; }
.legal__foot { max-width: 760px; margin: 0 auto; padding: 28px var(--pad) 60px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; position: relative; }
.legal__foot a { color: var(--muted); transition: color 0.25s ease; }
.legal__foot a:hover { color: var(--ink); }
.legal__foot .credit { margin-left: auto; }   /* push the maker credit to the far right */

/* ============================================================================
   REVEAL ON SCROLL
   ============================================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Section titles lean gently toward the cursor (script.js sets the transform). Declared
   after .reveal so it wins for the Booking title, which carries .reveal itself - the
   opacity part restates the reveal fade so scrolling in still feels soft. */
.section-head__title, .contact__title { transition: opacity 0.8s var(--ease), transform 0.5s var(--ease); will-change: transform; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 880px) {
  .player__grid { grid-template-columns: 1fr; }
  .now { position: relative; top: 0; }
  .nav__mini-label { display: none; }      /* compact "now playing": just the animated bars */
  .nav__mini { padding: 9px 11px; }
  .lang__opt { font-size: 0.68rem; padding: 5px 8px; }
  .nav__links { display: none; }            /* legal pages: just brand + language on phones */
  .show { grid-template-columns: 80px 1fr auto; }
  .show--feature { grid-template-columns: 90px 1fr auto; }
  .show--feature .show__badge { display: none; }
  /* phone About + Live: tighter vertical rhythm than desktop (the big desktop
     paddings would waste a whole screen on a phone) */
  .player { padding-bottom: 56px; }
  .about { padding: 56px var(--pad) 70px; }
  .live { padding-top: 90px; }
}

@media (max-width: 640px) {
  /* phones: lift the DE/EN switch a touch so it sits vertically centred with the docked
     BETONWATTE title in cinema mode (same 640px cut-off as the title's "small" logic) */
  .hero__util { top: 20px; }
  /* keep every section title on ONE line on narrow phones: the widest ("Debut Album",
     Syne 800) needs ~373px at the 2.2rem floor, more than a 393px screen offers - so on
     narrow screens the floor gives way to a size that always fits (7.9vw clears the
     longest title down to the smallest phones; wider than ~410px nothing changes) */
  .section-head__title { font-size: clamp(1.5rem, 7.9vw, 2.2rem); }
}

@media (max-width: 520px) {
  /* phone hero: pull everything up, keep the kicker on one line, add a faint horns backdrop */
  .hero { min-height: calc(100vh - 86px); min-height: calc(100svh - 86px); justify-content: flex-start; padding: 340px var(--pad) 16px; isolation: isolate; }   /* fixed offset clears the fixed figure (was 40svh, which the iOS toolbar shrank so the title overlapped him); vh = old-browser fallback */
  .hero__title { font-size: clamp(1.6rem, 7.5vw, 5rem); }   /* a touch smaller on phones for more breathing room from the edges */
  .hero__kicker { font-size: clamp(0.6rem, 3vw, 0.74rem); letter-spacing: 0.09em; white-space: nowrap; margin-top: 18px; }
  .hero__horns {
    display: block; position: absolute; z-index: -1;
    top: 64px; left: 50%; transform: translateX(-50%);   /* sits high so the face is above the headline */
    width: min(74vw, 348px); height: 290px;              /* a touch smaller */
    /* hero art (betonwatte.png) from Cloudinary: e_trim drops the transparent padding so
       he's perfectly centred; f_auto,q_auto deliver a small optimised WebP/AVIF
       (~125 KB vs ~690 KB) with no visible change */
    background: url("https://res.cloudinary.com/bakermedia/image/upload/e_trim,f_auto,q_auto/betonwatte-Branding_Image_Transparent.png") center top / 100% auto no-repeat;
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 97%);
    pointer-events: none;
  }
  .wave-band { border-top: none; border-bottom: none; }   /* drop the divider line on phones */
  .wave { height: 84px; }                                  /* skinnier wave on phones */
  /* streaming links: centre the label and stack the three services beneath it */
  .listen { flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: 0 0 38px; }
  .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }   /* two buttons side by side */
  .btn { width: auto; justify-content: center; padding: 13px 22px; font-size: 0.9rem; }
  .show { grid-template-columns: 70px 1fr; }
  .show__cta { grid-column: 2; justify-self: start; }
  .bookform__row { grid-template-columns: 1fr; }
  .bookform .btn { justify-self: center; }   /* the submit sits centred on phones */
}

/* ----------------------------------------------------------------------------
   SHORTER DESKTOPS (laptops + 1080p screens: wide but not very tall)
   The hero is centred by default, which looks great on a tall external monitor
   but on a shorter screen the huge title lands right across the figure's face.
   Here we anchor the text lower so the title crosses the body (not the face),
   lift the figure just a touch, and ease the title's max size down one notch.
   The cutoff is ~1100px tall, which is exactly where the centred layout starts
   clearing the face on its own, so really tall monitors keep the original hero.
   ---------------------------------------------------------------------------- */
@media (min-width: 880px) and (max-height: 1100px) {
  .hero { justify-content: flex-start; padding-top: 47vh; padding-top: 47svh; padding-bottom: 40px; }
  .hero__horns { top: 8%; }                                  /* figure a tiny bit higher */
  .hero__kicker { margin-top: 22px; }
  /* cap the title, and on the shortest laptops let height rein it in too, so the
     face keeps clearing the text all the way down the range (his 14" stays 10.5rem) */
  .hero__title { font-size: clamp(2rem, 8vw, 9rem); }
  .hero__actions { margin-top: 60px; }   /* doubled too, matching the base */
}

/* ============================================================================
   COOKIE CONSENT  (the banner is injected by consent.js; it gates the Meta Pixel)
   ============================================================================ */
.consent {
  position: fixed;
  left: 50%;
  bottom: clamp(12px, 3vw, 28px);
  transform: translate(-50%, 150%);
  width: min(700px, calc(100vw - 32px));
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding: 16px 18px;
  background: rgba(17, 20, 15, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.consent.is-open { transform: translate(-50%, 0); opacity: 1; }
.consent__text { flex: 1 1 320px; font-size: 0.86rem; line-height: 1.45; color: var(--ink); }
.consent__more { color: var(--cyan); text-decoration: underline; white-space: nowrap; }
.consent__btns { display: flex; gap: 10px; flex: 0 0 auto; }
.consent__btn {
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
/* Equal prominence: both are solid, same-size pills so "Decline" is just as easy to
   click as "Accept" (an EU consent requirement). Accept keeps the brand gradient. */
.consent__btn--decline { background: rgba(255, 255, 255, 0.18); color: var(--ink); }
.consent__btn--accept { background: var(--grad); color: #0a0c0b; }
.consent__btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
@media (max-width: 520px) {
  .consent { flex-direction: column; align-items: stretch; }
  .consent__text { flex: 0 0 auto; }   /* in the column the 320px basis became a tall empty box - reset it */
  .consent__btn { flex: 1; }
}

/* ============================================================================
   ACCESSIBILITY - respect "reduce motion"
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .hero__title, .contact__title, .section-head__title { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .consent { transition: opacity 0.3s linear; transform: translate(-50%, 0); }
  .consent:not(.is-open) { display: none; }
}