/*
  REMbETIX stylesheet

  Purpose:
  - Defines layout, typography, color themes, gallery, player, turntable and
    responsive behavior for the public website.

  Inputs:
  - HTML class names and ids from `Index.html`.
  - Runtime state classes such as `.dark`, `.open`, `.has-photo`,
    `.is-playing`, `.is-muted` and `[aria-current="true"]`.

  Outputs:
  - Visual presentation only. This file does not mutate DOM or load assets.

  Maintenance:
  - Keep structural styles grouped by component where possible.
  - Prefer changing component rules here over injecting inline styles in JS.
*/

:root{
    --ink:#1c1a18; --bg:#f6f1e7; --paper:#fffdfa;
    --brand:#1f5870; --accent:#b76e39; --line:#dfd4bf;
    --shadow:0 10px 20px rgba(30,30,30,.08);
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif;background:var(--bg);color:var(--ink)}
  body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
    background:radial-gradient(100% 100% at 0% 0%, rgba(0,0,0,.03), transparent 60%),
               radial-gradient(100% 100% at 100% 0%, rgba(0,0,0,.02), transparent 60%),
               radial-gradient(100% 100% at 0% 100%, rgba(0,0,0,.02), transparent 60%);
    mix-blend-mode:multiply}
  header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:transparent}
  .header-bg{background:rgba(246,241,231,.9);backdrop-filter:blur(5px)}
  .navwrap{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
           padding:.12rem .8rem;max-width:1120px;margin:0 auto;
           border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:var(--paper);box-shadow:var(--shadow)}
  .brand{display:flex;align-items:center;gap:.4rem;font-size:14px}
  .brand-mark{width:20px;height:20px;border:2px solid #c7a770;border-radius:5px;
    background:conic-gradient(from 45deg,#c7a770,#e9dfc9 30%,transparent 30%) no-repeat;
    -webkit-mask: radial-gradient(circle at 70% 30%, #000 28%, transparent 29%);
    mask: radial-gradient(circle at 70% 30%, #000 28%, transparent 29%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.7)}
  .main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.6rem;align-items:center}
  nav a{text-decoration:none;color:inherit;padding:.1rem .3rem;border-radius:6px;font-size:13px}
  nav a:hover{background:#efe6d5}
  .menu-btn{padding:.18rem .48rem;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:13px}
  .chips{display:flex;gap:.25rem}
  .chips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.2rem .48rem;cursor:pointer;font-size:12px;line-height:1}
  .chips button[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
  @media(max-width:900px){.main-nav{display:none}}
  @media(min-width:900px){.menu-btn{display:none}}
  .drawer{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:2000}
  .drawer.open{display:block}
  .sheet{position:absolute;left:0;right:0;bottom:0;background:var(--paper);padding:16px;border-radius:16px 16px 0 0;box-shadow:var(--shadow);z-index:2100}
  .sheet nav ul{list-style:none;margin:0;padding:0}
  .sheet nav li{border-bottom:1px dashed var(--line)}
  .sheet nav a{display:block;padding:.7rem 0;color:#1b1b1b;text-decoration:none}
  .hero{background:#efe7d6;border-bottom:1px solid var(--line)}
  .hero-inner{max-width:1120px;margin:0 auto;padding:40px 16px 48px}
  .hero h1{margin:0 0 .25rem;font-size:clamp(2rem,4.2vw,3rem)}
  .hero p{margin:0;color:#3e3a33;font-size:clamp(1rem,1.4vw,1.2rem)}
  main{padding:1rem}
  .container{max-width:1120px;margin:0 auto}
  section{margin:1.6rem 0}
  h2{margin:.2rem 0 .6rem;font-weight:800;letter-spacing:.01em}
  .card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem;box-shadow:var(--shadow)}
  .grid{display:grid;gap:1rem}
  @media(min-width:980px){.grid.cols-2{grid-template-columns:1.2fr 1fr}}
  @media(min-width:980px){.grid.cols-2-even{grid-template-columns:1fr 1fr}}
  .members{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
  .members--guests{max-height:0;overflow:hidden;transition:max-height .25s ease,padding .25s ease;margin-top:.25rem;scrollbar-gutter:stable}
  .members--guests.is-expanded{max-height:420px;overflow-y:auto;padding-right:.25rem}
  .guest-toggle{display:block;width:fit-content;margin:.9rem 0 .25rem auto}
  .member{display:flex;gap:.9rem;align-items:flex-start}
  .avatar{flex:0 0 56px;width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,#e9dfc9,#f7f1e4);
          display:grid;place-items:center;font-weight:700;color:#6a5a3c;border:1px solid var(--line)}
  .member h4{margin:.1rem 0 .15rem}
.member .role{color:#6b6f72;font-size:.95rem;margin-bottom:.2rem}
.member .desc{color:#4b4b4b;font-size:.95rem;line-height:1.5}
#bandImageWrap{margin:.8rem 0 1rem}
#bandImageWrap:empty{display:none}
.band-photo{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem}
  .ph{background:#e9dfc9;border:1px dashed #aaa;border-radius:10px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
  .events{display:grid;gap:.8rem}
  .event{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1rem;box-shadow:var(--shadow)}
  .meta{color:#6b6f72}
  .actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
  .btn{display:inline-block;padding:.45rem .8rem;border-radius:999px;text-decoration:none;border:1px solid var(--line);background:#fff;color:#1b1b1b;cursor:pointer;font-size:13px}
  .btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
  form.newsletter{display:grid;gap:.45rem}
  form.newsletter label{display:block;font-weight:600;margin-top:.35rem}
  form.newsletter input[type="email"], form.newsletter input[type="text"]{width:100%;padding:.6rem .75rem;border:1px solid var(--line);border-radius:10px;background:#fff}
  form.newsletter .meta{display:block;margin-top:.35rem;line-height:1.5}
  .success{background:#e6f6ec;border:1px solid #9ed8b5;border-radius:10px;padding:.6rem;margin-top:.5rem}
  :root.dark .success{ color:#000; }
  footer{padding:1rem;background:#eee;border-top:1px solid var(--line)}
  .chips{display:flex;gap:.4rem;flex-wrap:wrap}
  .chip{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .55rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:inherit;text-decoration:none;font-size:13px}
  .chip svg{width:16px;height:16px;display:block}
  /* === Added: avatars with photo fallback === */
.avatar-img{flex:0 0 56px;width:56px;height:56px;border-radius:12px;object-fit:cover;border:1px solid var(--line);background:#f7f1e4;display:none;visibility:visible;}
  .member{position:relative}
  /* === Added: media carousels === */
  .media-box{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:.5rem;display:grid;grid-template-rows:auto 1fr;gap:.5rem}
  .media-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
  .carousel{overflow-x:auto;scroll-snap-type:x mandatory;display:flex;gap:.5rem;padding-bottom:.25rem}
  .carousel::-webkit-scrollbar{height:8px}
  .carousel::-webkit-scrollbar-thumb{background:#cfc6b3;border-radius:999px}
  .carousel-item{
  flex:0 0 auto;
  scroll-snap-align:start;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  display:grid;
  place-items:center;
  width:min(320px,92vw);
}

  .carousel-item img,.carousel-item video,.carousel-item iframe{width:100%;height:100%;object-fit:cover;display:block}
  .media-nav{display:flex;gap:.4rem}
  .media-nav button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:.25rem .5rem;cursor:pointer}

  /* === Media Lightbox (overlay) === */
  #mediaLightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;padding:1rem;z-index:9999}
  #mediaLightbox[hidden]{display:none}
  #mediaLightbox .mlb-content{max-width:92vw;max-height:92vh;outline:none}
  #mediaLightbox img,#mediaLightbox video{max-width:92vw;max-height:92vh;width:auto;height:auto;display:block;background:#000;border-radius:10px}
  #mediaLightbox .mlb-close{position:fixed;top:12px;right:12px;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.6);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;cursor:pointer}
  #mediaLightbox .mlb-close:hover{background:rgba(0,0,0,.8)}
  #mediaLightbox .mlb-close:focus{outline:2px solid #fff;outline-offset:2px}



  /* When a member photo is available, hide the letter avatar and show the image */
  .member.has-photo .avatar{ display:none !important; }
  .member.has-photo .avatar-img{ display:block !important; visibility:visible; }


/* Dark-Mode Variablen */
:root.dark {
  --ink:#f0f0f0;
  --bg:#1c1a18;
  --paper:#2a2927;
  --brand:#6db6d6;
  --accent:#d48a50;
  --line:#555;
  --shadow:0 10px 20px rgba(0,0,0,.6);
}

/* === Full-bleed Karussell + Overlay-Header auf der Kachel === */
.media-box{
  position: relative;
  display:block;              /* altes Grid neutralisieren */
  padding: 0;                 /* kein Innenabstand: Bild füllt die Kachel */
  overflow: hidden;           /* runde Ecken der Kachel clippen das Bild */
  aspect-ratio: 4 / 3;        /* Querformat für die gesamte Kachel */
}

/* Header als Overlay oben auf dem Bild */
.media-box .media-header{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .6rem .8rem;
  color: #fff;
  pointer-events: none;       /* damit Swipen/Klicken auf dem Bild weiter funktioniert */
}

/* Buttons im Overlay klickbar lassen */
.media-box .media-header .media-nav button{
  pointer-events: auto;
  background: rgba(0,0,0,.45);
  color:#fff;
  border:1px solid rgba(255,255,255,.5);
  border-radius:10px;
}

/* dezente Verlaufs-Scrims für Lesbarkeit */
.media-box::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:84px; z-index:2;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
}

/* Karussell füllt die Box komplett */
.media-box .carousel{
  gap: 0;
  padding: 0;
  scroll-snap-type: x mandatory;
  height: 100%;
}

/* Slides füllen die Box */
.media-box .carousel-item,
.media-box > .carousel > .carousel-item{
  flex: 0 0 100%;
  inline-size: 100%;
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
}

/* Medien vollflächig beschneiden */
.media-box .carousel-item > *{
  inline-size:100% !important;
  block-size:100% !important;
  display:block;
  object-fit:cover;
}

/* Speziell: Lite-YouTube-Placeholder (Button) ent-runden & Aspect-Ratio entfernen */
.media-box .carousel-item button{
  border-radius:0 !important;
  aspect-ratio:auto !important;
}

/* Dark-Mode: Overlay-Buttons etwas kräftiger */
:root.dark .media-header .media-nav button{
  background: rgba(0,0,0,.6);
  border-color: rgba(255,255,255,.35);
}

/* === Dark header/footer + improved bulb icon === */
:root.dark .header-bg {
  background: rgba(28,26,24,0.9);
  backdrop-filter: blur(5px);
}
:root.dark footer {
  background:#2a2927;
  border-top:1px solid var(--line);
}

/* Bulb icon styling */
#themeToggle {
  background:none;
  border:none;
  cursor:pointer;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:var(--ink);
}
#themeToggle svg {
  width:22px; height:22px;
  stroke:currentColor;
  stroke-width:1.8;
  fill:none;
}
#themeToggle.light svg .bulb { fill:currentColor; } /* filled in light mode */


/* === Hero Dark Mode === */
:root.dark .hero{
  background:#201f1d;
  border-bottom:1px solid var(--line);
}
:root.dark .hero p{ color:#cfcfcf; }

/* Subtle button hover for theme toggle */
#themeToggle:hover{ transform:translateY(-1px); }
#themeToggle:active{ transform:translateY(0); }

/* Enhanced bulb appearance */
#themeToggle svg{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
#themeToggle .rays{ opacity:0; transition:opacity .2s ease; }
#themeToggle.light .rays{ opacity:.7; }
#themeToggle .highlight{ fill: none; }
#themeToggle.light .highlight{ fill: rgba(255,255,255,.35); }


/* === Unified text palette (max 4 per mode) === */
/* Light mode text tokens */
:root {
  --t1:#1c1a18;  /* primary text */
  --t2:#3e3a33;  /* secondary (subheads/paragraphs) */
  --t3:#6b6f72;  /* meta/muted */
  --t4:#615f58;  /* subtle notes */
}
/* Map base ink to token */
body{ color: var(--t1); }

/* Dark mode text tokens */
:root.dark {
  --t1:#f0f0f0;  /* primary */
  --t2:#cfcfcf;  /* secondary */
  --t3:#a7a7a7;  /* meta */
  --t4:#8a8a8a;  /* subtle */
}

/* Apply tokens consistently */
.hero p{ color: var(--t2) !important; }
.member .role{ color: var(--t3) !important; }
.member .desc{ color: var(--t2) !important; }
.meta{ color: var(--t3) !important; }
.card{ color: var(--t1); }
nav a{ color: inherit; }

/* Ensure language chips readable on white */
.chips button{ color:#1b1b1b; }
.chips button[aria-pressed="true"]{ color:#fff; } /* pressed already has brand bg */

/* Footer social chips readable in dark mode */
:root.dark footer .chip{ background:#ffffff; color:#1b1b1b; border-color:#dddddd; }


/* === Patch: unify dark mode colors for bio long, lineup descriptions, and menu text === */
:root.dark #bioLong,
:root.dark .member .desc,
:root.dark nav a {
  color: var(--t2) !important; /* use secondary text color */
}


/* === Greek touch font concept === */
:root{
  --ff-body: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --ff-display: 'GFS Didot', 'Noto Serif', serif;
  --ff-accent: 'GFS Neohellenic', system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans', sans-serif;
}

/* Override base body font to serif with Greek support */
body{ font-family: var(--ff-body) !important; font-kerning: normal; font-feature-settings: 'liga' 1, 'clig' 1, 'kern' 1; }

/* Display faces for headings and brand mark */
h1, h2, h3, .brand strong{ font-family: var(--ff-display); letter-spacing:.01em; }

/* Subtle accent for navigation and UI controls */
nav a, .chips button, .btn{ font-family: var(--ff-accent); }


#bioLong { white-space: pre-line; }


/* === ff-patch === */
/* === Firefox Fix Patch (injected) === */
.avatar { display:flex; }
.avatar-img { display:none; visibility:visible; }
/* When a member actually has a photo, flip visibility */
.member.has-photo .avatar { display:none !important; }
.member.has-photo .avatar-img { display:block !important; }
/* Ensure carousel media rules apply consistently */
.carousel-item img, .carousel-item video { width:100%; height:100%; object-fit:cover; display:block; }


/* === Force player+turntable stacking at >=650px (mirror carousel behavior) === */
@media (max-width: 650px) {
  .player-wrap { grid-template-columns: 1fr !important; }
  .player-wrap .player-pane { order: 1; }
  .player-wrap .turntable-pane { order: 2; }
}


/* FINAL override for full-bleed media-box carousel (v2) */
.media-box {
  display:block;
  padding:0;
  overflow:hidden;
}
.media-box > .carousel {
  gap:0 !important;
  padding:0 !important;
}
.media-box > .carousel > .carousel-item {
  flex:0 0 100% !important;
  width:100% !important;
  inline-size:100% !important;
  height:100% !important;
  max-height:none !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
}
/* Alle direkten Inhalte in der Slide ebenfalls vollflächig machen */
.media-box > .carousel > .carousel-item > img,
.media-box > .carousel > .carousel-item > video,
.media-box > .carousel > .carousel-item > iframe,
.media-box > .carousel > .carousel-item > button {
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:0 !important;
  aspect-ratio:auto !important;
}


/* === player-fixes === */
/* === Fix: neutral Play/Pause button, no orange background === */
#playBtn{
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--sel, var(--brand)) !important;
}
#playBtn.is-playing{
  background: color-mix(in oklab, var(--sel, var(--brand)) 12%, transparent) !important;
  border-color: var(--sel, var(--brand)) !important;
  color: var(--t1) !important;
}

/* Ensure other control buttons stay clean */
.controls button.primary{
  background: transparent !important;
  color: inherit !important;
  border-color: var(--line) !important;
}

/* === Unify slider styles: seek bar like volume === */
input[type="range"].bar,
.player-volume input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  outline: none;
  margin: 0;
}

/* WebKit thumbs */
input[type="range"].bar::-webkit-slider-thumb,
.player-volume input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sel, var(--brand));
  border: 1px solid color-mix(in oklab, var(--sel, var(--brand)) 60%, black 40%);
  cursor: pointer;
}

/* Firefox thumbs */
input[type="range"].bar::-moz-range-thumb,
.player-volume input[type="range"]::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sel, var(--brand));
  border: 1px solid color-mix(in oklab, var(--sel, var(--brand)) 60%, black 40%);
  cursor: pointer;
}
/* Firefox track */
input[type="range"].bar::-moz-range-track,
.player-volume input[type="range"]::-moz-range-track{
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}


/* === trackcard-sel-fix === */
/* === Selected Track in real track color === */
.track-card[aria-current="true"]{
  outline: none !important;
  border-color: var(--sel) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--sel) 45%, transparent) !important;
  background: color-mix(in oklab, var(--sel) 10%, transparent) !important;
}


/* Dark Mode: Carousel buttons styling */
  :root.dark .media-nav button { background:#000; color:#fff; border-color:#000; filter:none; }
  :root.dark .media-nav button:hover { background:#111; }


/* ====== MUSIC PLAYER UI ====== */

/* === Clean icon buttons & volume slider === */
.btn-icon{
  inline-size:36px; block-size:36px;
  display:inline-grid; place-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color: var(--sel, var(--brand));
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .08s ease;
}
.btn-icon:hover{ background: color-mix(in oklab, var(--sel, var(--brand)) 12%, transparent); }
.btn-icon:active{ transform: translateY(1px); }
.btn-icon svg{ width:18px; height:18px; display:block; }
/* Darkmode: Icons weiß */
:root.dark .btn-icon{
  color: #fff;
  border-color: var(--line);
}

/* Darkmode: Thumb weiß, Strecke bleibt in Trackfarbe */
:root.dark input[type="range"].bar::-webkit-slider-thumb,
:root.dark .player-volume input[type="range"]::-webkit-slider-thumb{
  background: #fff;
  border-color: rgba(0,0,0,0.6);
}
:root.dark input[type="range"].bar::-moz-range-thumb,
:root.dark .player-volume input[type="range"]::-moz-range-thumb{
  background: #fff;
  border-color: rgba(0,0,0,0.6);
}


/* Play/Pause icon swap */
#playBtn .icon-pause{ display:none; }
#playBtn.is-playing .icon-play{ display:none; }
#playBtn.is-playing .icon-pause{ display:block; }

/* Volume button swap when muted */
#volumeBtn .icon-vol-mute{ display:none; }
#volumeBtn.is-muted .icon-vol-up{ display:none; }
#volumeBtn.is-muted .icon-vol-mute{ display:block; }

/* Dezent gestalteter Range-Slider */
.player-volume input[type="range"]{
  -webkit-appearance:none; appearance:none;
  inline-size:140px; height:4px; border-radius:999px;
  background: var(--line);
  outline:none; margin:0;
}
.player-volume input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background: var(--sel, var(--brand));
  border:1px solid color-mix(in oklab, var(--sel, var(--brand)) 60%, black 40%);
  cursor:pointer;
}
.player-volume input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background: var(--sel, var(--brand));
  border:1px solid color-mix(in oklab, var(--sel, var(--brand)) 60%, black 40%);
  cursor:pointer;
}
.player-volume input[type="range"]::-moz-range-track{
  height:4px; border-radius:999px; background:var(--line);
}

/* Remove legacy primary background on controls */
.controls button.primary{ background:transparent !important; color:inherit !important; border-color:var(--line) !important; }

.player-header--full {
  margin-bottom: .6rem;
}
.player-visual {
  position: relative;
  width: 100%;
  height: 72px;
  max-height: 72px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--sel, var(--line)) 28%, var(--line));
  background: color-mix(in oklab, var(--sel, var(--paper)) 10%, transparent);
}
.player-header--full .player-beat-svg {
  width: 100%;
  height: 72px;
  display: block;
}
.player-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: .25rem;
  padding: .35rem .5rem;
  pointer-events: none;
}
.player-overlay .player-title {
  font-size: clamp(1rem, 3vw, 1.4rem);
}
.player-overlay .small {
  font-size: clamp(.8rem, 2.5vw, 1rem);
}
.pbs-bg {
  fill: var(--sel, #1f5870);
  transition: fill 0.4s ease;
}
.pbs-beat {
  fill: var(--sel, #1f5870);
  animation: none !important;
}
#cover,
.player-cover {
  display: none !important;
}

.player-now {
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
}
.player-beat-svg {
  width: 48px;
  height: 48px;
  display: block;
}
.pbs-bg {
  fill: color-mix(in oklab, var(--sel, #1f5870) 18%, var(--paper) 82%);
}
.pbs-beat {
  fill: color-mix(in oklab, var(--sel, #1f5870) 34%, #3e3a33 66%);
}

#musicPlayer{display:grid;gap:1rem}
.player-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem}
@media(max-width:980px){.player-wrap{grid-template-columns:1fr}}
.player-pane,.turntable-pane{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem;box-shadow:var(--shadow)}
.player-pane{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.95rem;
}
.player-header{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:.6rem;
  padding:.75rem .85rem;
  border:1px solid color-mix(in oklab, var(--sel, var(--line)) 28%, var(--line));
  border-radius:12px;
  background:color-mix(in oklab, var(--sel, var(--paper)) 8%, transparent);
}
.player-cover{width:72px;height:72px;border-radius:10px;border:1px solid var(--line);object-fit:cover;background:#eee}
.player-title{font-weight:700}
.player-header .small{color:color-mix(in oklab, var(--sel, var(--t3)) 42%, var(--t3))}
.controls{display:flex;align-items:center;gap:.5rem;margin:.4rem 0}
.controls button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:.4rem .6rem;cursor:pointer}
.controls button.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.controls .btn-icon {
  background: transparent !important;
}
/* Dark mode: prev/next buttons with black bg and white icon */
:root.dark #prevBtn,
:root.dark #nextBtn{ background:#000; color:#fff; border-color:#000; }
:root.dark #prevBtn:hover,
:root.dark #nextBtn:hover{ background:#111; }
.seek{display:grid;gap:.25rem}
input[type="range"].bar{width:100%}
.small{font-size:.9rem;color:var(--t3)}
.track-carousel{overflow-x:auto;scroll-snap-type:x mandatory;display:flex;gap:.6rem;padding:.4rem .2rem;}
.track-carousel::-webkit-scrollbar{height:8px}
.track-carousel::-webkit-scrollbar-thumb{
  background:#cfc6b3;
  border-radius:999px;
}
.track-card{min-width:0;flex:0 0 clamp(180px,38vw,260px);scroll-snap-align:start;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:.6rem;display:grid;grid-template-columns:auto 1fr;gap:.6rem;}.track-card img{width:64px;height:64px;border-radius:8px;border:1px solid var(--line);object-fit:cover}
.track-card .t{font-weight:600}
.track-card[aria-current="true"]{outline:none}
/* shrink-fix ohne Optikänderung */ .player-wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.player-pane,.turntable-pane,.player-header,.controls,.seek,.track-carousel{min-width:0}.controls{flex-wrap:wrap}.controls input[type=range],.seek input[type=range]{flex:1 1 0;min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.player-header--full{margin-bottom:.2rem}
.controls{margin:.1rem 0 0}
.seek{margin-top:.05rem}
.track-carousel-wrap{margin-top:.15rem}
/* Aktiver Track in Trackfarbe */
.track-card[aria-current="true"]{
  border-color: var(--sel);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--sel) 40%, transparent);
  background: color-mix(in oklab, var(--sel) 10%, transparent);
}
/* Grundlook der Slider */
input[type="range"].bar,
.player-volume input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  border-radius:999px;
  background: var(--line);      /* „nicht abgespielter“ Teil */
  outline:none;
  margin:0;
}

/* Thumb (Standard, später Darkmode-Override) */
input[type="range"].bar::-webkit-slider-thumb,
.player-volume input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background: var(--sel, var(--brand));
  border:1px solid color-mix(in oklab, var(--sel, var(--brand)) 60%, black 40%);
  cursor:pointer;
}
input[type="range"].bar::-moz-range-thumb,
.player-volume input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background: var(--sel, var(--brand));
  border:1px solid color-mix(in oklab, var(--sel, var(--brand)) 60%, black 40%);
  cursor:pointer;
}
input[type="range"].bar::-moz-range-track{
  height:4px;
  border-radius:999px;
  background: var(--line);
}

/* ====== SVG TURNTABLE ====== */
.turntable{display:grid;place-items:center}
.turntable svg{max-width:380px;width:100%;height:auto;display:block}
/* Record spin */
.turntable .record{transform-origin:50% 50%;animation:spin 3s linear infinite;animation-play-state:paused}
.turntable.playing .record{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
/* Tonearm */
.tonarm{transform-origin: 66% 32%; transition: transform .6s ease}
.turntable.playing .tonarm{transform: rotate(12deg)} /* arm down */
/* Stylus light blink when playing */
.stylus{opacity:.4;transition:opacity .3s}
.turntable.playing .stylus{opacity:1}


/* Turntable korrekt zentrieren und Abstand entfernen */
.turntable-pane {
  display: flex;
  align-items: center;   /* vertikal zentriert */
  justify-content: center; /* horizontal zentriert */
  flex-direction: column;
}

.turntable {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Optional: eine Mindesthöhe, damit die Zentrierung „sichtbar“ wird */
  min-height: 280px;
  padding: 0;
}

.turntable object {
  max-width: 280px;  /* gewünschte Zielgröße de Platte */
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
transform: translateX(var(--turntable-nudge,0));
}

/* Den leeren Absatz unter der Turntable-Box ausblenden, wenn er leer ist */
.turntable-pane > p.small:empty {
  display: none;
  margin: 0;
}


/* === player-darkmode-final-fix === */
:root.dark .btn-icon,
:root.dark #playBtn,
:root.dark #prevBtn,
:root.dark #nextBtn,
:root.dark #volumeBtn {
  color: #fff !important;
  border-color: var(--line) !important;
  background: transparent !important;
}
:root.dark input[type="range"].bar::-webkit-slider-thumb,
:root.dark .player-volume input[type="range"]::-webkit-slider-thumb,
:root.dark input[type="range"].bar::-moz-range-thumb,
:root.dark .player-volume input[type="range"]::-moz-range-thumb {
  background: #fff !important;
  border-color: rgba(0,0,0,0.6) !important;
}
#seek { background-size: 100% 100%; }