/* ===================================================================
   L-D-E LIVEMIX — Studio-Design
   Ersetzt die bisherige app.css vollständig.
   Alle Klassen der alten Datei sind weiter enthalten.
==================================================================== */

/* -------------------------------------------------------------------
   1. TOKENS
------------------------------------------------------------------- */
:root{
  /* Flächen — Blauschwarz statt Neutralgrau, wie unbeleuchtetes Studio */
  --bg:          #04060b;
  --panel:       #0a0e16;
  --panel-2:     #10151f;
  --panel-3:     #171d2a;

  /* Signalfarben aus der Audiotechnik */
  --signal:      #00e5a0;   /* Grün: läuft, live, aktiv */
  --signal-dim:  #00a878;
  --cue:         #22d3ee;   /* Cyan: anklickbar, Navigation */
  --cue-dim:     #0e7490;
  --peak:        #ff3d5a;   /* Rot: offline, Warnung, Peak */
  --violet:      #8b5cf6;   /* Violett: sparsam, nur Sekundäres */

  /* Text */
  --text:        #eef2f7;
  --text-2:      #a8b3c4;
  --muted:       #5d6b80;

  /* Linien und Flächen */
  --line:        rgba(255,255,255,.07);
  --line-2:      rgba(255,255,255,.13);
  --card:        rgba(255,255,255,.028);

  /* Schatten */
  --sh-sm:       0 2px 10px rgba(0,0,0,.5);
  --sh-md:       0 8px 30px -8px rgba(0,0,0,.7);
  --sh-lg:       0 24px 60px -20px rgba(0,0,0,.85);
  --glow-signal: 0 0 24px -4px rgba(0,229,160,.5);
  --glow-cue:    0 0 24px -4px rgba(34,211,238,.45);

  /* Radien — bewusst klein, Hardware hat keine runden Ecken */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 9999px;

  /* Maße */
  --nav-h: 62px;
  --sec-py: clamp(52px, 7vw, 92px);
  --wrap: 1180px;

  /* Schrift */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Kompatibilität mit alten Namen */
  --primary: var(--violet);
  --accent: var(--cue);
  --live: var(--signal);
  --border: var(--line);
  --surface: var(--panel);
  --r-xl: var(--r-lg);
}

/* -------------------------------------------------------------------
   2. GRUNDLAGEN
------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Flächiges Grundrauschen: zwei sehr weiche Lichtquellen,
   damit der Hintergrund nicht als tote Fläche wirkt */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 600px at 12% -5%,  rgba(34,211,238,.07), transparent 60%),
    radial-gradient(800px 500px at 92% 8%,   rgba(139,92,246,.06), transparent 60%);
  pointer-events: none;
}

img{ max-width: 100%; height: auto; }

a{ color: var(--cue); text-decoration: none; }
a:hover{ color: var(--text); }

h1,h2,h3,h4{
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: 700;
}

:focus-visible{
  outline: 2px solid var(--cue);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.container{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

.section{ padding-block: var(--sec-py); position: relative; }

/* Sektionstrenner als dünne Signalleitung mit Kontaktpunkt */
.section + .section::before{
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--wrap));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}

.section-alt{ background: rgba(255,255,255,.012); }

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--signal);
  color: #04060b;
  font-weight: 700;
}
.skip-link:focus{ left: 12px; top: 12px; }


.text-center{ text-align: center; }

/* -------------------------------------------------------------------
   3. SEKTIONSKÖPFE
------------------------------------------------------------------- */
.section-header{ margin-bottom: clamp(28px, 4vw, 48px); }

.section-title{
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  margin-bottom: .35em;
}

.section-title span{
  color: var(--cue);
}

.section-sub{
  margin: 0;
  color: var(--text-2);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  max-width: 62ch;
  margin-inline: auto;
}

/* -------------------------------------------------------------------
   4. KOPFZEILE — angelehnt an die Master-Sektion eines Mischpults
------------------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(4,6,11,.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

/* Feine Signalleitung unter der Navigation */
.site-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
              transparent, var(--cue-dim) 25%, var(--violet) 50%, var(--signal-dim) 75%, transparent);
  opacity: .5;
}

.navbar{ min-height: var(--nav-h); display: flex; align-items: center; }

.navbar .container{
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--nav-h);
  flex-wrap: nowrap;
}

.navbar-brand{
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.brand-live{
  position: relative;
  padding-left: 15px;
  color: var(--signal);
  font-weight: 800;
}

/* LED vor dem Schriftzug */
.brand-live::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
  animation: led-pulse 2.4s ease-in-out infinite;
}

@keyframes led-pulse{
  0%,100%{ opacity: 1; }
  50%    { opacity: .35; }
}

.nav-spacer{ flex: 1; }

.nav-links{
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a{
  display: block;
  padding: 8px 13px;
  font-size: .89rem;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--r-sm);
  position: relative;
  transition: color .18s ease, background .18s ease;
}

.nav-links a:hover{
  color: var(--text);
  background: rgba(255,255,255,.05);
}

/* Unterstrich fährt aus, wie ein Fader */
.nav-links a::after{
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 3px;
  height: 2px;
  background: var(--cue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover::after{ transform: scaleX(1); }

.nav-actions{
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.btn-lang{
  padding: 5px 8px;
  font-size: 1rem;
  line-height: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.btn-lang:hover{ background: rgba(255,255,255,.1); border-color: var(--line-2); }

.btn-links-toggle,
.btn-shoutbox-nav{
  padding: 8px 14px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-links-toggle:hover{ background: rgba(255,255,255,.1); border-color: var(--line-2); }

.btn-shoutbox-nav{
  border-color: rgba(34,211,238,.3);
  color: var(--cue);
}
.btn-shoutbox-nav:hover{
  background: rgba(34,211,238,.12);
  border-color: var(--cue);
  color: var(--text);
}

/* Bootstrap-Dropdown im Studio-Look */
.dropdown-menu{
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 6px;
  min-width: min(208px, calc(100vw - 32px));
  max-width: calc(100vw - 24px);
}
.dropdown-item{
  color: var(--text-2);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: .88rem;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(34,211,238,.12);
  color: var(--text);
}
.dropdown-divider{ border-color: var(--line); margin: 6px 4px; }

/* Hamburger */
.navbar-toggler{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 38px;
  padding: 0 9px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
@media (min-width: 992px){ .navbar-toggler{ display: none; } }

.toggler-bar{
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2){ opacity: 0; }
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile Navigation */
.mobile-nav{
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  padding: 18px clamp(16px,4vw,28px) 30px;
  background: rgba(4,6,11,.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line-2);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .2s ease, visibility .26s;
  z-index: 99;
}
.mobile-nav.is-open{ transform: translateY(0); opacity: 1; visibility: visible; }
@media (min-width: 992px){ .mobile-nav{ display: none; } }

.mobile-nav .nav-links{
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin-bottom: 18px;
}
.mobile-nav .nav-links a{
  padding: 14px 14px;
  font-size: 1rem;
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.mobile-nav .nav-links a:hover{ border-left-color: var(--cue); }
.mobile-nav .nav-links a::after{ display: none; }

.mobile-nav-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* -------------------------------------------------------------------
   5. HERO — kompakt, Text links, Deck rechts
------------------------------------------------------------------- */
.hero{
  position: relative;
  padding-block: clamp(44px, 7vw, 84px);
  overflow: hidden;
}

.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(4,6,11,.62) 0%, rgba(4,6,11,.9) 65%, var(--bg) 100%),
    url("/img/hintergrund1_1.webp") center/cover no-repeat;
  opacity: .5;
}

/* Frequenzraster über dem Hintergrund */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    repeating-linear-gradient(90deg, rgba(34,211,238,.055) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 44px);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}

.hero .container{ position: relative; z-index: 2; }

.hero-content{
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 980px){
  .hero-content{ grid-template-columns: 1fr 1.05fr; }
}

.hero-logo{
  width: 92px;
  height: auto;
  margin-bottom: 14px;
  border-radius: var(--r-sm);
}

.hero-title{
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .3em;
}

.hero-sub{
  margin: 0 0 26px;
  color: var(--text-2);
  font-size: clamp(.98rem, 1.9vw, 1.12rem);
  max-width: 46ch;
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* -------------------------------------------------------------------
   6. SCHALTFLÄCHEN
------------------------------------------------------------------- */
.btn-primary-custom,
.btn-outline-custom{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  font-family: inherit;
  font-size: .93rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .22s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.btn-primary-custom{
  background: var(--signal);
  color: #04060b;
  border: 1px solid var(--signal);
  box-shadow: 0 0 0 rgba(0,229,160,0);
}
.btn-primary-custom:hover{
  transform: translateY(-2px);
  box-shadow: var(--glow-signal);
  color: #04060b;
}

.btn-outline-custom{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
}
.btn-outline-custom:hover{
  transform: translateY(-2px);
  border-color: var(--cue);
  color: var(--cue);
  box-shadow: var(--glow-cue);
}

/* -------------------------------------------------------------------
   7. DECK-GRAFIK IM HERO
   Reines CSS, keine zusätzliche Ladezeit
------------------------------------------------------------------- */
/* Volles Deck: zwei Jogwheels, Displays, Crossfader */
.hero-deck{
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: 20px 18px 16px;
  background: linear-gradient(175deg, var(--panel-2), #070a11);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    var(--sh-lg),
    0 0 70px -30px var(--cue);
}

/* Schraubpunkte in den Ecken */
.hero-deck::before,
.hero-deck::after{
  content: "";
  position: absolute;
  top: 9px;
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 35% 35%, #3a4356, #11151d);
  box-shadow: 0 1px 1px rgba(255,255,255,.08);
}
.hero-deck::before{ left: 9px; }
.hero-deck::after{ right: 9px; }

.deck-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}

.deck-side{ display: grid; gap: 10px; justify-items: center; }

/* LCD-Display ueber jedem Deck */
.deck-display{
  width: 100%;
  padding: 7px 10px;
  background: #04120f;
  border: 1px solid rgba(0,229,160,.28);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .06em;
  color: var(--signal);
  text-shadow: 0 0 8px rgba(0,229,160,.6);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}
.deck-display{ justify-content: center; }

/* Namen können lang sein: eine Zeile, Rest wird abgeschnitten */
.dd-name{
  display: block;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .62rem;
}

/* Deck B in Cyan, damit die beiden Seiten unterscheidbar bleiben */
.deck-display.dd-b{
  background: #04101a;
  border-color: rgba(34,211,238,.3);
  color: var(--cue);
  text-shadow: 0 0 8px rgba(34,211,238,.6);
}

.deck-display .dd-label{ color: var(--signal-dim); }

.jogwheel{
  position: relative;
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background:
    radial-gradient(circle at 50% 42%, #232a38 0%, #141a24 45%, #0b0f16 100%);
  border: 1px solid var(--line-2);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,.95),
    inset 0 2px 3px rgba(255,255,255,.06),
    0 10px 30px -8px rgba(0,0,0,.9);
  display: grid;
  place-items: center;
}

.jogwheel{
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background:
    conic-gradient(from 0deg, #12161f, #1c222f, #12161f, #1c222f, #12161f);
  border: 1px solid var(--line-2);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.9),
    var(--sh-lg);
  display: grid;
  place-items: center;
}

/* Rillen der Platte */
.jogwheel::before{
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: var(--r-full);
  background: repeating-radial-gradient(
    circle at center,
    rgba(255,255,255,.035) 0 1px,
    transparent 1px 5px
  );
}

/* Leuchtring mit Positionsmarke */
.jogwheel::after{
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background: conic-gradient(from 0deg,
              var(--cue) 0deg, rgba(34,211,238,.15) 45deg,
              rgba(139,92,246,.2) 180deg, var(--signal) 320deg, var(--cue) 360deg) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(34,211,238,.55));
  animation: spin 8s linear infinite;
}

/* Deck B dreht langsamer und andersherum */
.deck-side:last-child .jogwheel::after{ animation: spin-rev 11s linear infinite; }
@keyframes spin-rev{ to{ transform: rotate(-360deg); } }

@keyframes spin{ to{ transform: rotate(360deg); } }

.jog-center{
  position: relative;
  z-index: 2;
  width: 38%;
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: inset 0 2px 8px rgba(255,255,255,.05), 0 6px 20px rgba(0,0,0,.7);
}

.jog-bpm{
  font-family: var(--font-mono);
  font-size: clamp(.85rem, 2.4vw, 1.15rem);
  font-weight: 700;
  color: var(--signal);
  line-height: 1.1;
}

.jog-bpm small{
  display: block;
  font-size: .55em;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .08em;
}

/* -------------------------------------------------------------------
   8. VU-METER
------------------------------------------------------------------- */
.vu-meter{
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}

.vu-bar{
  width: 3px;
  background: var(--signal-dim);
  border-radius: 1px;
  height: 20%;
  transition: height .12s ease;
}

/* Läuft nur, wenn app.js dem Status die Klasse stream-active gibt.
   Geschwisterselektor — dadurch ist keine Änderung an app.js nötig. */
.stream-active ~ .vu-meter .vu-bar{
  animation: vu 900ms ease-in-out infinite;
  background: var(--signal);
}
.stream-active ~ .vu-meter .vu-bar:nth-child(1){ animation-delay: 0ms;   }
.stream-active ~ .vu-meter .vu-bar:nth-child(2){ animation-delay: 120ms; }
.stream-active ~ .vu-meter .vu-bar:nth-child(3){ animation-delay: 260ms; }
.stream-active ~ .vu-meter .vu-bar:nth-child(4){ animation-delay: 80ms;  }
.stream-active ~ .vu-meter .vu-bar:nth-child(5){ animation-delay: 340ms; }
.stream-active ~ .vu-meter .vu-bar:nth-child(6){ animation-delay: 200ms; }
.stream-active ~ .vu-meter .vu-bar:nth-child(7){ animation-delay: 420ms; }

@keyframes vu{
  0%,100%{ height: 25%; }
  35%    { height: 95%; }
  60%    { height: 55%; }
}

/* -------------------------------------------------------------------
   9. PLAYER
------------------------------------------------------------------- */
.player-section{ position: relative; }

.stream-status-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}

#streamstatus{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-family: var(--font-mono);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text-2);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  transition: color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

#streamstatus.stream-active{
  color: var(--signal);
  border-color: rgba(0,229,160,.45);
  box-shadow: var(--glow-signal);
}

.player-grid{
  display: grid;
  gap: 20px;
}
@media (min-width: 860px){
  .player-grid{ grid-template-columns: 1fr 1fr; }
}

/* Karten als Kanalzüge: farbige Kante links */
.player-card{
  position: relative;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cue-dim);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: var(--sh-md);
  transition: border-left-color .25s ease, box-shadow .25s ease;
}
.player-card:hover{
  border-left-color: var(--cue);
  box-shadow: var(--sh-md), var(--glow-cue);
}

.player-label{
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}

.player-card iframe{
  border-radius: var(--r-sm);
  background: var(--panel-2);
}

.btn-stream-link,
.btn-hearthis{
  display: inline-block;
  margin-top: 14px;
  padding: 11px 16px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--cue);
  background: rgba(34,211,238,.07);
  border: 1px solid rgba(34,211,238,.22);
  border-radius: var(--r-sm);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-stream-link:hover,
.btn-hearthis:hover{
  background: rgba(34,211,238,.16);
  border-color: var(--cue);
  color: var(--text);
}

.btn-hearthis{ margin-top: 0; margin-bottom: 14px; }

/* -------------------------------------------------------------------
   10. TEAM
------------------------------------------------------------------- */
.team-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}

.dj-card{
  display: flex;
  gap: 16px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--violet);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-left-color .25s ease, background .25s ease;
}
.dj-card:hover{
  transform: translateY(-3px);
  border-left-color: var(--signal);
  background: rgba(255,255,255,.045);
}

.dj-avatar{
  flex-shrink: 0;
  width: 76px; height: 76px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
}

.dj-avatar img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.dj-name{
  margin: 0 0 2px;
  font-size: 1.04rem;
  font-weight: 700;
}

.dj-role{
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--signal);
  text-transform: uppercase;
}

.dj-bio{
  margin: 0;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--text-2);
}

.dj-bio em{ color: var(--text); font-style: italic; }

/* -------------------------------------------------------------------
   11. SENDEPLAN + FLYER
------------------------------------------------------------------- */
.flyer-figure{
  max-width: 1000px;
  margin: 0 auto 36px;
  padding: 0;
}

.flyer-trigger{
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  position: relative;
  cursor: zoom-in;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-lg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}

.flyer-trigger::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, var(--cue), var(--violet) 55%, rgba(255,255,255,.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.flyer-trigger picture,
.flyer-modal picture{ display: block; line-height: 0; }

.flyer-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

.flyer-zoom{
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 3;
  padding: 8px 13px;
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1;
  color: var(--text);
  background: rgba(4,6,11,.8);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .28s ease, transform .28s ease;
}

.flyer-trigger:hover,
.flyer-trigger:focus-visible{
  transform: translateY(-4px);
  box-shadow: var(--sh-lg), var(--glow-cue);
}
.flyer-trigger:hover .flyer-zoom,
.flyer-trigger:focus-visible .flyer-zoom{ opacity: 1; transform: translateY(0); }

/* Sendezeiten */
.sendezeiten{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 276px), 1fr));
  gap: 16px;
  max-width: 1000px;
  margin-inline: auto;
}

.sendezeit-card{
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal-dim);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.sendezeit-card.sz-alt{ border-left-color: var(--cue-dim); }

.sz-icon{ display: inline-block; font-size: 1.2rem; margin-bottom: 6px; }

.sz-week{
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
}

.sz-list{ margin: 0; }

.sz-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.sz-row:first-child{ border-top: 0; }

.sz-row dt{ font-weight: 600; color: var(--signal); font-size: .9rem; }
.sendezeit-card.sz-alt .sz-row dt{ color: var(--cue); }

.sz-row dd{
  margin: 0;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: clamp(.8rem, 3.4vw, .92rem);
  color: var(--text);
}

.sendeplan-claim{
  margin: 26px 0 0;
  text-align: center;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--text);
}

.sendeplan-cta{ margin-top: 22px; text-align: center; }

.flyer-credit{
  margin: 24px 0 0;
  text-align: center;
  font-size: .72rem;
  color: var(--muted);
}

/* Altbestand, damit nichts bricht */
.sendeplan-card{
  max-width: 620px;
  margin-inline: auto;
  padding: 30px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.sendeplan-icon{ font-size: 2rem; display: block; margin-bottom: 10px; }

/* -------------------------------------------------------------------
   12. VORAUSSETZUNGEN
------------------------------------------------------------------- */
.voraussetzung-card{
  max-width: 760px;
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.voraussetzung-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .2s ease;
}
.voraussetzung-trigger:hover{ background: rgba(255,255,255,.04); }

.vt-inner{ display: flex; align-items: center; gap: 14px; }

.vt-img{
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
}

.vt-title{ margin: 0; font-size: .98rem; font-weight: 600; }

.vt-chevron{
  color: var(--cue);
  font-size: .8rem;
  transition: transform .28s ease;
}
.voraussetzung-trigger[aria-expanded="true"] .vt-chevron{ transform: rotate(180deg); }

.voraussetzung-body{
  padding: 4px 20px 20px;
  border-top: 1px solid var(--line);
}
.voraussetzung-body p{
  margin: 12px 0 0;
  font-size: .9rem;
  color: var(--text-2);
  padding-left: 16px;
  border-left: 2px solid var(--line-2);
}

/* -------------------------------------------------------------------
   13. STATIONEN
------------------------------------------------------------------- */
.stationen-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.station-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  font-size: .91rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease;
}
.station-card:hover{
  color: var(--text);
  border-color: var(--cue);
  background: rgba(34,211,238,.07);
  transform: translateX(3px);
}

.station-icon{ font-size: 1.05rem; opacity: .8; }

/* -------------------------------------------------------------------
   14. EVENTS
------------------------------------------------------------------- */
.events-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.event-card{
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .25s ease, transform .25s ease;
}
.event-card:hover{ border-color: var(--line-2); transform: translateY(-3px); }

.event-badge{
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet);
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: var(--r-full);
}

.event-badge.badge-running{
  color: var(--signal);
  background: rgba(0,229,160,.1);
  border-color: rgba(0,229,160,.32);
}

.event-title{ margin: 0 0 8px; font-size: 1.12rem; }

.event-desc{ margin: 0 0 14px; font-size: .89rem; color: var(--text-2); }

.event-links{ display: flex; flex-direction: column; gap: 6px; }

.event-link{ font-size: .87rem; font-weight: 600; }

/* -------------------------------------------------------------------
   15. BEWERTUNG
------------------------------------------------------------------- */
.rating-inner{
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  padding: 32px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.rating-heading{ font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin-bottom: .4em; }

.rating-sub{ margin: 0 0 20px; color: var(--text-2); font-size: .93rem; }

/* Sterne rückwärts, damit Hover nach links greift */
.star-rating{
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 6px;
  margin-bottom: 14px;
}

.star{
  font-size: 2rem;
  line-height: 1;
  color: var(--panel-3);
  cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}
.star:hover,
.star:hover ~ .star,
.star.selected{
  color: var(--signal);
  transform: scale(1.12);
}

#rating-panel p{ margin: 0; font-size: .9rem; color: var(--text-2); }
#rating-value{ font-family: var(--font-mono); color: var(--signal); font-size: 1.1rem; }

/* -------------------------------------------------------------------
   16. PARTNER
------------------------------------------------------------------- */
.partner-section{ padding-block: var(--sec-py); }

.partner-iframe-container{
  width: 100%;
  height: 600px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--panel);
}
.partner-iframe-container iframe{ width: 100%; height: 100%; border: none; display: block; }

/* -------------------------------------------------------------------
   17. FUSSZEILE
------------------------------------------------------------------- */
.site-footer{
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: 26px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.footer-grid{
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  margin-bottom: 36px;
}
@media (min-width: 760px){
  .footer-grid{ grid-template-columns: 1.6fr 1fr 1fr; }
}

.footer-brand-text{
  display: block;
  margin-bottom: 12px;
  font-size: 1.12rem;
  font-weight: 700;
}

.footer-desc{
  margin: 0 0 18px;
  font-size: .88rem;
  color: var(--text-2);
  max-width: 46ch;
}

.footer-social{ display: flex; flex-wrap: wrap; gap: 8px; }

.footer-social-btn{
  padding: 9px 15px;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-2);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.footer-social-btn:hover{
  color: var(--text);
  border-color: var(--cue);
  background: rgba(34,211,238,.1);
}

.footer-col-title{
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}

.footer-list{ list-style: none; margin: 0; padding: 0; }
.footer-list li{ margin-bottom: 8px; }
.footer-list a{ font-size: .88rem; color: var(--text-2); }
.footer-list a:hover{ color: var(--cue); }

.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

#visitCounter{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
}
#visitCounter span{ color: var(--text-2); }

.footer-legal{ display: flex; gap: 18px; }
.footer-legal a{ font-size: .82rem; color: var(--muted); }
.footer-legal a:hover{ color: var(--cue); }

/* -------------------------------------------------------------------
   18. SHOUTBOX
------------------------------------------------------------------- */
.shoutbox-offcanvas{
  width: min(420px, 92vw) !important;
  background: var(--panel);
  border-left: 1px solid var(--line-2);
  color: var(--text);
}

.shoutbox-offcanvas .offcanvas-header{ border-bottom: 1px solid var(--line); }
.shoutbox-offcanvas .btn-close{ filter: invert(1) grayscale(1); opacity: .7; }

.shoutbox-messages{
  overflow-y: auto;
  min-height: 200px;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shoutbox-msg{ display: flex; gap: 10px; align-items: flex-start; }

.shoutbox-avatar{
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--bg);
  background: var(--cue);
  border-radius: var(--r-sm);
}

.shoutbox-bubble{
  flex: 1;
  padding: 10px 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.shoutbox-meta{
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.shoutbox-text{ font-size: .89rem; word-break: break-word; }

.shoutbox-form .form-control{
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: var(--r-sm);
}
.shoutbox-form .form-control:focus{
  background: var(--panel-2);
  border-color: var(--cue);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(34,211,238,.14);
}
.shoutbox-form .form-control::placeholder{ color: var(--muted); }

.shoutbox-form .btn-primary{
  background: var(--signal);
  border-color: var(--signal);
  color: #04060b;
  font-weight: 700;
}
.shoutbox-form .btn-primary:hover{
  background: var(--signal-dim);
  border-color: var(--signal-dim);
  color: #04060b;
}

.shoutbox-form .form-text{ color: var(--muted); font-size: .74rem; }

/* -------------------------------------------------------------------
   19. MODALS
------------------------------------------------------------------- */
.modal-content{
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--text);
  overflow: hidden;
}

.modal-header{ border-bottom: 1px solid var(--line); }
.modal-title{ font-size: 1rem; font-weight: 700; }
.modal .btn-close{ filter: invert(1) grayscale(1); opacity: .7; }

.flyer-modal-img{ display: block; width: 100%; height: auto; }

/* -------------------------------------------------------------------
   20. MOBIL
------------------------------------------------------------------- */
@media (max-width: 575.98px){
  .hero-logo{ width: 72px; }
  .hero-deck{ max-width: 240px; }
  .flyer-trigger, .flyer-img{ border-radius: var(--r-md); }
  .flyer-zoom{ opacity: 1; transform: none; }
  .dj-card{ padding: 15px; gap: 13px; }
  .dj-avatar{ width: 64px; height: 64px; }
  .player-card, .sendezeit-card, .event-card{ padding: 17px; }
  .partner-iframe-container{ height: 520px; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }
  .btn-primary-custom, .btn-outline-custom{ width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------
   21. BEWEGUNG REDUZIEREN
------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .jogwheel::after{ animation: none; }
  .brand-live::before{ animation: none; }
}

/* ===================================================================
   22. AUSBAU — Hardware-Elemente
==================================================================== */

/* --- Crossfader zwischen den Decks --- */
.deck-mid{
  display: grid;
  gap: 12px;
  justify-items: center;
  align-content: center;
}

.channel-fader{
  position: relative;
  width: 26px;
  height: 128px;
  background: linear-gradient(180deg, #0a0d13, #141924);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.9);
}

/* Schlitz */
.channel-fader::before{
  content: "";
  position: absolute;
  left: 50%; top: 10px; bottom: 10px;
  width: 3px;
  transform: translateX(-50%);
  background: #04060b;
  border-radius: 2px;
  box-shadow: inset 0 0 3px rgba(0,0,0,1);
}

/* Regler */
.fader-cap{
  position: absolute;
  left: 50%;
  width: 22px; height: 13px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #4a5568, #232a38);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.2);
  animation: fader-move 7s ease-in-out infinite;
}
.fader-cap::after{
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: var(--signal);
  box-shadow: 0 0 5px var(--signal);
}

@keyframes fader-move{
  0%,100%{ top: 62px; }
  30%    { top: 24px; }
  65%    { top: 88px; }
}

.crossfader{
  position: relative;
  width: 118px;
  height: 22px;
  background: linear-gradient(180deg, #0a0d13, #141924);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.9);
}
.crossfader::before{
  content: "";
  position: absolute;
  top: 50%; left: 9px; right: 9px;
  height: 3px;
  transform: translateY(-50%);
  background: #04060b;
  border-radius: 2px;
}
.xf-cap{
  position: absolute;
  top: 50%;
  width: 13px; height: 18px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #4a5568, #232a38);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.2);
  animation: xf-move 9s ease-in-out infinite;
}
.xf-cap::after{
  content: "";
  position: absolute;
  top: 3px; bottom: 3px; left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--cue);
  box-shadow: 0 0 5px var(--cue);
}
@keyframes xf-move{
  0%,100%{ left: 52px; }
  35%    { left: 12px; }
  70%    { left: 92px; }
}

/* --- Pad-Matrix unter den Decks --- */
.pad-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  width: 100%;
  margin-top: 12px;
}

.pad{
  aspect-ratio: 1.5;
  border-radius: var(--r-xs);
  background: #10151f;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.pad.on-cue    { background: rgba(34,211,238,.22);  border-color: rgba(34,211,238,.5);  box-shadow: 0 0 12px -2px var(--cue); }
.pad.on-signal { background: rgba(0,229,160,.22);   border-color: rgba(0,229,160,.5);   box-shadow: 0 0 12px -2px var(--signal); }
.pad.on-violet { background: rgba(139,92,246,.22);  border-color: rgba(139,92,246,.5); }

/* --- Sektionsköpfe als Displayfeld --- */
.section-header{
  position: relative;
}

.section-title{
  display: inline-block;
  position: relative;
  padding-bottom: 12px;
}

/* Wellenform unter jeder Überschrift */
.section-title::after{
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 96px; height: 12px;
  background: repeating-linear-gradient(90deg,
              var(--cue) 0 2px, transparent 2px 6px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  opacity: .55;
}

/* --- Sektionstrenner als Wellenform --- */
.section + .section::before{
  height: 14px;
  background:
    repeating-linear-gradient(90deg,
      var(--line-2) 0 2px, transparent 2px 9px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  opacity: .6;
}

/* --- Karten als Rack-Module --- */
.player-card,
.dj-card,
.sendezeit-card,
.event-card,
.rating-inner,
.voraussetzung-card{
  position: relative;
  background: linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    var(--sh-md);
}

/* --- DJ-Karten als Kanalzug mit Fader und LED-Kette --- */
.dj-card{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 15px;
  align-items: start;
}

.dj-strip{
  display: grid;
  gap: 6px;
  justify-items: center;
  padding-left: 4px;
  border-left: 1px solid var(--line);
  align-self: stretch;
}

.dj-led{
  display: grid;
  gap: 3px;
  padding-top: 2px;
}
.dj-led span{
  width: 5px; height: 5px;
  border-radius: 1px;
  background: var(--panel-3);
}
.dj-card:hover .dj-led span:nth-child(1){ background: var(--signal); box-shadow: 0 0 6px var(--signal); }
.dj-card:hover .dj-led span:nth-child(2){ background: var(--signal); box-shadow: 0 0 6px var(--signal); }
.dj-card:hover .dj-led span:nth-child(3){ background: var(--cue);    box-shadow: 0 0 6px var(--cue); }

.dj-fader{
  position: relative;
  width: 14px;
  flex: 1;
  min-height: 54px;
  background: #0a0d13;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.9);
}
.dj-fader::after{
  content: "";
  position: absolute;
  left: 50%; top: 38%;
  width: 12px; height: 8px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #4a5568, #232a38);
  border-radius: 1px;
  box-shadow: 0 1px 4px rgba(0,0,0,.8);
  transition: top .35s cubic-bezier(.2,.8,.2,1);
}
.dj-card:hover .dj-fader::after{ top: 8%; }

.dj-avatar{
  width: 84px; height: 84px;
  position: relative;
}

/* Leuchtkante am Avatar beim Überfahren */
.dj-avatar::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(34,211,238,0);
  transition: box-shadow .25s ease;
  pointer-events: none;
}
.dj-card:hover .dj-avatar::after{ box-shadow: inset 0 0 0 1px var(--cue), 0 0 18px -6px var(--cue); }

/* --- Stationen als Preset-Taster --- */
.station-card{
  position: relative;
  padding-left: 34px;
  background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--sh-sm);
}
.station-card::before{
  content: "";
  position: absolute;
  left: 14px; top: 50%;
  width: 6px; height: 6px;
  transform: translateY(-50%);
  border-radius: var(--r-full);
  background: var(--panel-3);
  transition: background .2s ease, box-shadow .2s ease;
}
.station-card:hover::before{
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
}
.station-card .station-icon{ display: none; }

/* --- Buttons wie Hardware-Taster --- */
.btn-primary-custom{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 14px -4px rgba(0,229,160,.6);
}
.btn-primary-custom:active{ transform: translateY(1px); }

.btn-outline-custom{
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.btn-outline-custom:active{ transform: translateY(1px); }

/* --- Stream-Status als Pegelfeld --- */
#streamstatus{
  background: linear-gradient(180deg, #0a0d13, #12161f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#streamstatus.stream-active{
  background: linear-gradient(180deg, #04120f, #072019);
}

.vu-meter{
  padding: 5px 9px;
  height: 30px;
  background: #04060b;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  box-shadow: inset 0 0 10px rgba(0,0,0,.9);
}
.vu-bar{ width: 4px; }

/* --- Player-Karten mit Modulkopf --- */
.player-label{
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.player-label::after{
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 42px; height: 1px;
  background: var(--cue);
  box-shadow: 0 0 8px var(--cue);
}

/* --- Fußzeile mit Rack-Kante --- */
.site-footer{
  position: relative;
  background: linear-gradient(180deg, var(--panel), #06080d);
}
.site-footer::before{
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cue-dim), var(--violet), var(--signal-dim), transparent);
  opacity: .55;
}

/* --- Mobil: Deck kompakter --- */
@media (max-width: 620px){
  .hero-deck{ padding: 15px 12px 12px; }
  .deck-row{ gap: 8px; }
  .jogwheel{ max-width: 110px; }
  .channel-fader{ height: 92px; width: 22px; }
  .crossfader{ width: 84px; }
  @keyframes xf-move{
    0%,100%{ left: 36px; }
    35%    { left: 8px; }
    70%    { left: 64px; }
  }
  .deck-display{ font-size: .56rem; padding: 5px 7px; }
  .dj-card{ grid-template-columns: auto 1fr; }
  .dj-strip{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .fader-cap, .xf-cap{ animation: none; }
}

/* ===================================================================
   23. SEHR SCHMALE DISPLAYS (bis 400 px)
   Getestet gegen 320 px Breite.
==================================================================== */
@media (max-width: 400px){

  /* Ränder schmaler, sonst bleibt zu wenig Inhalt */
  .container{ padding-inline: 12px; }

  /* Deck: Jogwheels weg, nur Displays, Pads und Crossfader.
     Zwei Wheels nebeneinander sind bei dieser Breite unlesbar. */
  .hero-deck{ padding: 12px 10px; }

  .deck-row{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .deck-side .jogwheel,
  .deck-side .channel-fader{ display: none; }

  .deck-mid{
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 4px;
  }

  .pad-grid{ gap: 4px; margin-top: 0; }
  .pad{ aspect-ratio: 1.7; }

  .crossfader{ width: 100%; }
  @keyframes xf-move{
    0%,100%{ left: 44%; }
    35%    { left: 4px; }
    70%    { left: calc(100% - 17px); }
  }

  .deck-display{
    font-size: .58rem;
    padding: 6px 8px;
    letter-spacing: .03em;
  }

  /* Kopfzeile entlasten */
  .navbar .container{ gap: 8px; }
  .navbar-brand{ font-size: .95rem; }
  .nav-actions{ gap: 5px; }
  .btn-lang{ padding: 4px 6px; font-size: .9rem; }
  .btn-links-toggle{ padding: 7px 10px; font-size: .78rem; }

  /* Typografie zurücknehmen */
  .hero-title{ font-size: clamp(1.7rem, 9vw, 2.2rem); }
  .hero-sub{ font-size: .93rem; }
  .section-title{ font-size: clamp(1.35rem, 7vw, 1.7rem); }

  /* Karten: Innenabstände kleiner */
  .player-card,
  .sendezeit-card,
  .event-card,
  .dj-card,
  .rating-inner{ padding: 14px; }

  .rating-inner{ padding: 24px 14px; }

  /* Sendezeiten untereinander statt nebeneinander */
  .sz-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .sz-row dd{ font-size: .88rem; }

  /* Zähler umbrechen lassen */
  #visitCounter{ font-size: .72rem; line-height: 1.8; }

  /* Partner-Rahmen niedriger */
  .partner-iframe-container{ height: 460px; }

  /* Sterne kleiner, sonst brechen sie um */
  .star{ font-size: 1.7rem; }
  .star-rating{ gap: 3px; }

  /* Modale Fenster randlos */
  .modal-dialog{ margin: 8px; }

  /* Eingebettete Fremdinhalte dürfen nicht herausragen */
  iframe{ max-width: 100%; }
}

/* Sicherheitsnetz: nichts darf den Bildschirm sprengen */
img, iframe, video, table, pre{ max-width: 100%; }

/* ===================================================================
   24. RASTER-ELEMENTE DÜRFEN SCHRUMPFEN
   Ohne min-width:0 wachsen Grid- und Flex-Kinder über ihren
   Anteil hinaus, sobald der Inhalt breiter ist. Das war die
   Ursache für das seitliche Schieben auf schmalen Displays.
==================================================================== */
.sendezeiten > *,
.team-grid > *,
.player-grid > *,
.events-grid > *,
.stationen-grid > *,
.footer-grid > *,
.hero-content > *,
.deck-row > *{
  min-width: 0;
}

.sz-row{ min-width: 0; flex-wrap: wrap; }
.sz-row dt,
.sz-row dd{ min-width: 0; }

.sendezeit-card,
.sz-list,
.dj-card > *{ min-width: 0; }

/* Lange Wörter und URLs brechen um statt zu überstehen */
.dj-bio,
.event-desc,
.sz-week,
.footer-desc,
.shoutbox-text,
.section-sub,
.hero-sub{ overflow-wrap: anywhere; }

/* ===================================================================
   25. SICHTBARKEIT — muss am Ende stehen und gewinnen
   Ohne !important überschreiben spätere Layoutregeln wie
   .nav-links{display:flex} diese Klasse wieder.
==================================================================== */
.desktop-only{ display: none !important; }

@media (min-width: 992px){
  .desktop-only{ display: flex !important; }
}

/* ===================================================================
   26. KOPFZEILE AUF SCHMALEN DISPLAYS
==================================================================== */
@media (max-width: 991.98px){

  /* Logo links, Bedienelemente rechts, alles in einer Zeile */
  .navbar .container{ gap: 10px; }
  .navbar-brand{ font-size: 1rem; }
  .nav-actions{ gap: 6px; margin-left: auto; }

  /* Links-Auswahl steckt im Hamburger-Menü, doppelt braucht es sie nicht */
  .nav-actions .dropdown{ display: none; }
}

@media (max-width: 400px){
  .navbar-brand{ font-size: .92rem; }
  .brand-live{ padding-left: 13px; }
  .brand-live::before{ width: 7px; height: 7px; }
  .btn-lang{ padding: 4px 5px; font-size: .85rem; }
  .navbar-toggler{ width: 36px; height: 34px; padding: 0 8px; }
}

/* ===================================================================
   27. HERO KOMPAKTER AUF KLEINEN DISPLAYS
==================================================================== */
@media (max-width: 480px){

  .hero{ padding-block: 26px 34px; }

  /* Hintergrund zurücknehmen, sonst frisst er den Text */
  .hero-bg{ opacity: .45; }
  .hero::after{ opacity: .5; }

  .hero-logo{
    width: 112px;
    margin-bottom: 12px;
  }

  .hero-title{
    font-size: clamp(1.55rem, 8vw, 2rem);
    margin-bottom: .35em;
  }

  .hero-sub{
    font-size: .88rem;
    line-height: 1.55;
    margin-bottom: 20px;
  }

  .hero-actions{ gap: 9px; }

  .btn-primary-custom,
  .btn-outline-custom{
    padding: 12px 18px;
    font-size: .88rem;
  }

  /* Abstände zwischen den Abschnitten zurücknehmen */
  .section{ padding-block: 38px; }
  .section-header{ margin-bottom: 22px; }
  .section-sub{ font-size: .88rem; }
}

/* ===================================================================
   28. LÄUFT GERADE
==================================================================== */
.nowplaying{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto 26px;
  padding: 16px 20px;
  background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal-dim);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--sh-md);
  transition: border-left-color .3s ease, box-shadow .3s ease;
}

.nowplaying[hidden]{ display: none; }

/* Sendet ein echter DJ, leuchtet die Kante */
.nowplaying.np-live{
  border-left-color: var(--signal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--sh-md), var(--glow-signal);
}

.np-art-wrap{
  position: relative;
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
}

/* Platzhalter liegt hinter dem Bild, nicht daneben */
.np-art-wrap::before{
  content: "♪";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
}

/* Das Bild deckt die Fläche vollständig ab */
.np-art{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 1;
}
.np-art[hidden]{ display: none; }

.np-info{ min-width: 0; }

.np-label{
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.np-live .np-label{ color: var(--signal); }

.np-title{
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-artist{
  margin: 0;
  font-size: .87rem;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wellenform rechts */
.np-wave{
  display: flex;
  align-items: center;
  gap: 3px;
  height: 32px;
}
.np-wave span{
  width: 3px;
  height: 22%;
  border-radius: 1px;
  background: var(--panel-3);
}

/* Bewegt sich nur, wenn ein DJ live sendet */
.np-live .np-wave span{
  background: var(--signal);
  animation: np-wave 1100ms ease-in-out infinite;
}
.np-live .np-wave span:nth-child(1){ animation-delay:   0ms; }
.np-live .np-wave span:nth-child(2){ animation-delay: 130ms; }
.np-live .np-wave span:nth-child(3){ animation-delay: 310ms; }
.np-live .np-wave span:nth-child(4){ animation-delay:  70ms; }
.np-live .np-wave span:nth-child(5){ animation-delay: 420ms; }
.np-live .np-wave span:nth-child(6){ animation-delay: 190ms; }
.np-live .np-wave span:nth-child(7){ animation-delay: 350ms; }
.np-live .np-wave span:nth-child(8){ animation-delay:  40ms; }
.np-live .np-wave span:nth-child(9){ animation-delay: 260ms; }
.np-live .np-wave span:nth-child(10){ animation-delay: 470ms; }

@keyframes np-wave{
  0%,100%{ height: 22%; }
  40%    { height: 90%; }
  70%    { height: 45%; }
}

@media (max-width: 620px){
  .nowplaying{
    grid-template-columns: auto 1fr;
    gap: 13px;
    padding: 13px 15px;
  }
  .np-wave{ display: none; }
  .np-art-wrap{ width: 54px; height: 54px; }
  .np-art-wrap::before{ font-size: 1.25rem; }
  .np-title{ font-size: .94rem; }
}

@media (prefers-reduced-motion: reduce){
  .np-live .np-wave span{ animation: none; height: 50%; }
}

/* ===================================================================
   29. PLATZHALTER FÜR EXTERNE INHALTE
   Erscheint, bis der Besucher dem Laden zustimmt.
==================================================================== */
.extern-platzhalter{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 150px;
  padding: 22px 18px;
  text-align: center;
  background:
    linear-gradient(168deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
}

.ep-text{
  margin: 0;
  max-width: 40ch;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text-2);
}
.ep-text strong{ color: var(--text); font-weight: 600; }

.extern-laden{
  padding: 11px 20px;
  font-family: inherit;
  font-size: .87rem;
  font-weight: 700;
  color: #04060b;
  background: var(--signal);
  border: 1px solid var(--signal);
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 14px -6px rgba(0,229,160,.6);
  transition: transform .18s ease, box-shadow .22s ease;
}
.extern-laden:hover{
  transform: translateY(-2px);
  box-shadow: var(--glow-signal);
}
.extern-laden:active{ transform: translateY(1px); }

/* Nachgeladene Rahmen sollen aussehen wie die vorherigen */
.player-card iframe{
  border-radius: var(--r-sm);
  background: var(--panel-2);
}

@media (max-width: 480px){
  .extern-platzhalter{ min-height: 130px; padding: 18px 14px; }
  .ep-text{ font-size: .78rem; }
}

/* ===================================================================
   30. NACH OBEN
==================================================================== */
.to-top{
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 90;

  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;

  font-size: .82rem;
  line-height: 1;
  color: var(--signal);

  background: linear-gradient(180deg, var(--panel-2), #0a0d13);
  border: 1px solid rgba(0,229,160,.32);
  border-radius: var(--r-sm);
  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    var(--sh-md);

  transition: transform .22s cubic-bezier(.2,.8,.2,1),
              box-shadow .25s ease,
              border-color .25s ease,
              opacity .25s ease;
}

.to-top[hidden]{
  display: none;
}

.to-top:hover,
.to-top:focus-visible{
  transform: translateY(-3px);
  border-color: var(--signal);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    var(--sh-md),
    var(--glow-signal);
}

.to-top:active{
  transform: translateY(1px);
}

/* Auf dem Handy etwas kleiner und weiter aus der Ecke */
@media (max-width: 480px){
  .to-top{
    width: 42px;
    height: 42px;
    right: 12px;
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce){
  .to-top{ transition: none; }
  .to-top:hover{ transform: none; }
}

/* ===================================================================
 *  LOGIN / REGISTRIERUNG
 = *================================================================== */

.btn-auth-nav {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border: 1px solid rgba(0, 229, 160, .45);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 229, 160, .18), rgba(0, 229, 160, .05));
  color: #00e5a0;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}

.btn-auth-nav:hover,
.btn-auth-nav:focus-visible {
  background: rgba(0, 229, 160, .28);
  box-shadow: 0 0 14px rgba(0, 229, 160, .35);
  transform: translateY(-1px);
  outline: none;
}

.btn-auth-nav .auth-nav-label {
  max-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav-actions .btn-auth-nav {
  width: 100%;
  justify-content: center;
  padding: .7rem 1rem;
  font-size: .95rem;
}

.auth-modal .modal-content {
  background: #0b0b18;
  border: 1px solid rgba(0, 229, 160, .25);
  border-radius: 16px;
  color: #e8e8f2;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.auth-modal .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.auth-modal .modal-title {
  color: #fff;
  margin: 0;
}

.auth-modal .btn-close {
  filter: invert(1) grayscale(1);
  opacity: .7;
}

.auth-modal .modal-body {
  padding: 1.4rem 1.5rem 1.6rem;
}

/* Tabs */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  padding: .3rem;
  margin-bottom: 1.2rem;
  background: rgba(255, 255, 255, .04);
  border-radius: 999px;
}

.auth-tab {
  padding: .55rem .8rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #9aa0b5;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.auth-tab:hover { color: #e8e8f2; }

.auth-tab.is-active {
  background: linear-gradient(135deg, #00e5a0, #00b5c8);
  color: #05121a;
}

/* Meldungen */
.auth-msg {
  margin-bottom: 1rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  font-size: .88rem;
  line-height: 1.4;
  border: 1px solid transparent;
}

.auth-msg-ok {
  background: rgba(0, 229, 160, .12);
  border-color: rgba(0, 229, 160, .4);
  color: #7cf5cd;
}

.auth-msg-error {
  background: rgba(255, 82, 110, .12);
  border-color: rgba(255, 82, 110, .4);
  color: #ff9aae;
}

.auth-msg-info {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
  color: #cfd3e2;
}

/* Felder */
.auth-field { margin-bottom: 1rem; }

.auth-field label {
  display: block;
  margin-bottom: .35rem;
  font-size: .82rem;
  font-weight: 600;
  color: #b9bed2;
  letter-spacing: .02em;
}

.auth-field input {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-size: .95rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-field input::placeholder { color: #6a7089; }

.auth-field input:focus {
  outline: none;
  border-color: rgba(0, 229, 160, .6);
  box-shadow: 0 0 0 3px rgba(0, 229, 160, .15);
}

.auth-pass-wrap { position: relative; }

.auth-pass-wrap input { padding-right: 2.8rem; }

.auth-pass-toggle {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #8b91a8;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.auth-pass-toggle:hover,
.auth-pass-toggle.is-on { color: #00e5a0; }

.auth-hint {
  display: block;
  margin-top: .35rem;
  font-size: .76rem;
  color: #7f859c;
}

/* Checkboxen */
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: .2rem 0 1.2rem;
  font-size: .82rem;
  line-height: 1.45;
  color: #b9bed2;
  cursor: pointer;
}

.auth-check input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: .15rem;
  accent-color: #00e5a0;
  cursor: pointer;
}

.auth-check a { color: #00e5a0; }

/* Buttons */
.auth-submit {
  width: 100%;
  padding: .8rem 1rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #00e5a0, #00b5c8);
  color: #05121a;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: filter .2s ease, transform .15s ease;
}

.auth-submit:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.auth-submit:disabled {
  opacity: .6;
  cursor: progress;
}

.auth-logout {
  background: linear-gradient(135deg, #ff5a6e, #c8324a);
  color: #fff;
}

.auth-switch {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .84rem;
  color: #8b91a8;
}

.auth-link {
  border: none;
  background: none;
  padding: 0;
  color: #00e5a0;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* Eingeloggt-Ansicht */
.auth-account { text-align: center; }

.auth-account-hello {
  margin-bottom: 1.2rem;
  font-size: 1rem;
  color: #cfd3e2;
}

.auth-account-hello strong { color: #00e5a0; }

@media (max-width: 575.98px) {
  .auth-modal .modal-body { padding: 1.1rem 1.1rem 1.3rem; }
}