/* =============================================================
   SILITUZ – CLEAN THEME CSS (Consolidated)
   - Tokens
   - Base Typography
   - Header/Menu Trigger
   - Theme Slider
   - Layout Polish
   - Components (Menu, Social, Cards, Buttons)
   - Global Hover-Fill (v2)
   - Exceptions (Support Button, Attention Label)
   - Footer "Mehr/More"
   ============================================================= */

/* =============================
   0) TOKENS (Farben/Vars)
   ============================= */
:root{
  --bg:        #020617;   /* slate-950 */
  --text:      #e2e8f0;   /* slate-200 */
  --muted:     #94a3b8;   /* slate-400 */
  --brand:     #10b981;   /* emerald-500 */
  --brand-100: #d1fae5;   /* emerald-100 */
  --brand-300: #6ee7b7;   /* emerald-300 */
  --brand-400: #34d399;   /* emerald-400 */
  --brand-700: #047857;   /* emerald-700 */
  --slate-800: #1e293b;   /* slate-800 */
  --attention: #fcd34d;   /* amber-300 */
  --danger:    #ef4444;   /* red-500 */
}

/* =============================
   1) BASE TYPOGRAPHY
   ============================= */
html, body{ background:var(--bg); color:var(--text); }
:is(h1,h2,h3,h4,h5,h6){ color:var(--brand); font-weight:700; }
:is(p,li,dt,dd){ color:var(--text); }
small, figcaption, .text-muted{ color:var(--muted); }

a{ color:var(--brand-400); text-decoration:underline; text-decoration-color:color-mix(in oklab, var(--brand-400) 30%, transparent); }
a:hover{ color:var(--brand-300); text-decoration-color:var(--brand-400); }

hr, .border-default{ border-color:var(--slate-800) !important; }

/* Cards / Boxen */
.card{
  background-color:rgba(15,23,42,.6) !important; /* slate-900/60 */
  border:1px solid var(--slate-800) !important;
  border-radius:1rem;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  backdrop-filter: blur(6px);
}

/* Headings nicht „weiß-leuchten“ */
:is(h1,h2,h3,h4,h5,h6):hover{ text-shadow:none !important; }

/* =============================
   2) HEADER / MENÜ-TRIGGER
   ============================= */
#snakeBtn, #snakeBtn:hover, #snakeBtn:focus, #snakeBtn:active{
  background:transparent !important; box-shadow:none !important; outline:none !important; border:none !important;
}
.menu-logo{ width:58px; height:58px; display:block; object-fit:contain; background:transparent !important; mix-blend-mode:normal; }
#snakeBtn span{ font-size:1rem; font-weight:600; }

/* =============================
   3) THEME SLIDER
   ============================= */
#themeSlider{ display:none !important; }
#themeThumb{ transition: transform .22s cubic-bezier(.2,.9,.2,1); }

/* =============================
   4) LAYOUT POLISH
   ============================= */
header .logo, header img[alt="Silituz Logo"]{ height:48px; width:auto; }
header video, header img, header svg{ background:transparent !important; }

/* =============================
   5) COMPONENTS
   ============================= */
/* 5.1) Slider-Menü (nur Text grün auf Hover; aktiv mit Emerald-BG) */
#sideMenu nav a{ color:#cbd5e1 !important; background:transparent !important; border-radius:.5rem; transition:color .2s, background-color .2s; }
#sideMenu nav a *{ color:inherit !important; }
#sideMenu nav a:not([aria-current="page"]):hover,
#sideMenu nav a:not([aria-current="page"]):focus-visible{ color:var(--brand) !important; background:transparent !important; }
#sideMenu nav a[aria-current="page"]{
  background-color:rgba(16,185,129,.16) !important; /* emerald-500/16 */
  color:var(--brand-100) !important; /* guter Kontrast */
  box-shadow: inset 0 0 0 1px rgba(16,185,129,.35);
  font-weight:600;
}

/* 5.2) Seitenmenü-Brand "SILITUZ" */
.side-brand{ color:#cbd5e1; text-shadow:0 0 1px var(--brand), 0 0 8px rgba(16,185,129,.45); }

/* 5.3) Hauptnavigation/Seitennamen (außerhalb SideMenu) */
.main-nav a{ color:#cbd5e1 !important; }
.main-nav a:hover{ color:var(--brand) !important; }

/* 5.4) SideMenu – Social Icons unten */
#sideMenu .border-t a{ color:#cbd5e1 !important; transition:color .25s ease; }
#sideMenu .border-t a:hover, #sideMenu .border-t a:focus-visible{ color:var(--brand) !important; }

/* 5.5) CTA Buttons (z. B. Instagram testen) */
.cta-ig{ color:#cbd5e1 !important; }
.cta-ig:hover, .cta-ig:focus-visible{ color:#ffffff !important; }

/* 5.6) Footer Mitte & Icons rechts */
/* Standard: grau (steht schon weiter oben definiert) */

/* Hover: Mitte-Link emerald-500 */
.footer-center a:hover,
.footer-center a:focus-visible {
  color: #10b981 !important; /* emerald-500 */
}

.footer-right .icon{ color:#cbd5e1 !important; }
.footer-right .icon:hover{ color:var(--brand) !important; }

/* 5.7) Willkommens-Buttons (Index) */
.welcome-btn{ background:transparent !important; color:#cbd5e1 !important; }
.welcome-btn .relative{ transition:color .3s ease; }
.welcome-btn:hover .relative, .welcome-btn:focus-visible .relative{ color:#cbd5e1 !important; }

/* 5.8) Tabs (Über Silituz & Socials) */
.tab-btn{ background:transparent !important; color:#cbd5e1 !important; border:none !important; }
.tab-btn .relative{ transition:color .3s ease; }
.tab-btn:hover .relative, .tab-btn:focus-visible .relative{ color:#ffffff !important; }

/* =============================
   6) GLOBAL HOVER-FILL (v2)
   – Wenn innerhalb einer .group ein emerald-Fülllayer existiert,
     färbe den Vordergrundtext (relative/z-10/fg) auf slate-300.
   ============================= */
:root{ --slate-300:#cbd5e1; }

.group:hover:has([class*="bg-emerald-5"], [class*="bg-emerald-6"], [class*="bg-emerald-7"], .fillbar-emerald),
.group:focus-within:has([class*="bg-emerald-5"], [class*="bg-emerald-6"], [class*="bg-emerald-7"], .fillbar-emerald){}

.group:hover:has([class*="bg-emerald-5"], [class*="bg-emerald-6"], [class*="bg-emerald-7"], .fillbar-emerald) :is(.fg,.relative,.z-10,h1,h2,h3,h4,h5,h6,.btn-title),
.group:focus-within:has([class*="bg-emerald-5"], [class*="bg-emerald-6"], [class*="bg-emerald-7"], .fillbar-emerald) :is(.fg,.relative,.z-10,h1,h2,h3,h4,h5,h6,.btn-title){
  color:var(--slate-300) !important;
}
.group:hover:has([class*="bg-emerald-5"], [class*="bg-emerald-6"], [class*="bg-emerald-7"], .fillbar-emerald) .keep-white,
.group:focus-within:has([class*="bg-emerald-5"], [class*="bg-emerald-6"], [class*="bg-emerald-7"], .fillbar-emerald) .keep-white{ color:#ffffff !important; }

/* Optionaler Fallback ohne :has(): markiere Container mit .hover-fill */
.hover-fill:hover :is(.fg,.relative,.z-10,h1,h2,h3,h4,h5,h6,.btn-title),
.hover-fill:focus-within :is(.fg,.relative,.z-10,h1,h2,h3,h4,h5,h6,.btn-title){ color:var(--slate-300) !important; }
.hover-fill:hover .keep-white, .hover-fill:focus-within .keep-white{ color:#fff !important; }

/* =============================
   7) EXCEPTIONS
   ============================= */
/* 7.1) Support-Button (roter Fill, Text: normal grau → hover schwarz) */
#tipeeeButton{ position:relative; isolation:isolate; border-radius:.75rem; background:var(--brand); }
#tipeeeButton .fillbar{ position:absolute; inset:0; width:0; background:var(--danger); transition:width .7s ease-out; z-index:0; }
#tipeeeButton:hover .fillbar, #tipeeeButton:focus-visible .fillbar{ width:100%; }
#tipeeeButton .label-normal{ position:relative; z-index:1; color:#cbd5e1 !important; transition:opacity .3s; }
#tipeeeButton .label-hover{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; color:#000 !important; opacity:0; transition:opacity .3s; }
#tipeeeButton:hover .label-normal{ opacity:0; }
#tipeeeButton:hover .label-hover{ opacity:1; }

/* 7.2) Gallery: Attention/Achtung – immer gelb */
.attention-label{ color:var(--attention) !important; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }

/* =============================
   8) FOOTER – "Mehr / More"
   ============================= */
.footer-more{
  background:transparent !important;
  color:#9ca3af !important; /* slate-400 */
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.footer-more:hover, .footer-more:focus-visible{
  background-color:var(--brand) !important; /* emerald-500 */
  color:#ffffff !important; /* weiß */
  animation: footer-wobble .35s ease-in-out;
}
/* keyframes footer-wobble sind bereits in deinem Projekt vorhanden – sonst hier ergänzen. */

/* Index-Share Tabs (Über Silituz & Socials) transparent */
.tab-btn {
  background: transparent !important;
  color: #cbd5e1 !important;           /* slate-300 */
  border: none !important;
}
.tab-btn:hover,
.tab-btn:focus-visible {
  color: #ffffff !important;           /* weiß beim Hover */
  background: transparent !important;
  text-decoration: none;
}

/* Willkommen-Buttons (Index: Über Silituz & Socials) 
   → komplett transparent, ohne Rahmen/Hintergrund */
.welcome-btn {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.welcome-btn:hover,
.welcome-btn:focus-visible {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Musik – Plattformen-Grid (wie Socials) */
#music-platforms .platform{
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem .8rem;
  border-radius:.75rem;
  background:transparent;
  color:#cbd5e1; /* slate-300 */
  transition: color .2s ease, transform .2s ease;
}
#music-platforms .platform .icon{
  width:28px; height:28px; flex:0 0 28px; display:inline-grid; place-items:center;
}
#music-platforms .platform img{
  width:100%; height:100%; object-fit:contain;
  filter: grayscale(100%); opacity:.9;
  transition: filter .2s ease, opacity .2s ease;
}
#music-platforms .platform:hover{ color:#10b981; transform: translateY(-1px); }
#music-platforms .platform:hover img{ filter:none; opacity:1; }

/* VORERST NICHT KLICKBAR – später diese 2 Zeilen löschen */
#music-platforms .platform-link{ pointer-events:none; cursor:default; }

/* Musik Plattformen – Grundlook (wie zuvor) */
#music-platforms .platform{
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem .8rem; border-radius:.75rem;
  background:transparent; color:#cbd5e1; /* Text */
  transition: transform .2s ease, opacity .2s ease;
}
#music-platforms .platform .icon{ width:28px; height:28px; display:inline-grid; place-items:center; }
#music-platforms .platform .label{ font-size:.95rem; }
#music-platforms .platform:hover{ transform: translateY(-1px); }

/* WICHTIG: Nur das Icon bekommt die Markenfarbe */
#music-platforms .platform .icon { color: var(--brand, #cbd5e1); }

/* Links – vorerst deaktiviert; später löschen, um klickbar zu machen */
#music-platforms .platform-link{ pointer-events:none; cursor:default; }

/* ===== Markenfarben (Primärfarben, pragmatisch gewählt) ===== */
#music-platforms .brand-tiktok      .icon { --brand:#25F4EE; }  /* TikTok cyan (statt 2-Farbverlauf) */
#music-platforms .brand-douyin      .icon { --brand:#FF0050; }  /* Douyin pink/rot Akzent */
#music-platforms .brand-spotify     .icon { --brand:#1DB954; }
#music-platforms .brand-applemusic  .icon { --brand:#FA233B; }  /* Apple Music Pink/Red */
#music-platforms .brand-amazonmusic .icon { --brand:#232F3E; }  /* Amazon dunkelblau/grau */
#music-platforms .brand-youtubemusic.icon { --brand:#FF0000; }  /* Falls ohne Leerzeichen geschrieben */
#music-platforms .brand-youtubemusic .icon { --brand:#FF0000; }
#music-platforms .brand-anghami     .icon { --brand:#6A1B9A; }  /* Violett (vereinfachte Brand) */
#music-platforms .brand-awa         .icon { --brand:#111111; }  /* Schwarz */
#music-platforms .brand-claromusica .icon { --brand:#ED1C24; }  /* Rot */
#music-platforms .brand-deezer      .icon { --brand:#000000; }  /* Schwarz (Multi-Bar später möglich) */
#music-platforms .brand-fizy        .icon { --brand:#FFD400; }  /* Gelbpunkt-Anmutung */
#music-platforms .brand-gracenote   .icon { --brand:#0072BC; }
#music-platforms .brand-iheartradio .icon { --brand:#C6002B; }
#music-platforms .brand-jiosaavn    .icon { --brand:#20C997; }  /* Türkisgrün */
#music-platforms .brand-joox        .icon { --brand:#00E676; }  /* Neon-grün */
#music-platforms .brand-kkbox       .icon { --brand:#00A0FF; }
#music-platforms .brand-kuack       .icon { --brand:#00AEEF; }
#music-platforms .brand-linemusic   .icon { --brand:#00C300; }  /* LINE-Grün */
#music-platforms .brand-lissen      .icon { --brand:#00B3FF; }  /* pragm. blau */
#music-platforms .brand-netease     .icon { --brand:#D43C33; }  /* NetEase Cloud Music Rot */
#music-platforms .brand-pandora     .icon { --brand:#005FF9; }  /* Blau */
#music-platforms .brand-qobuz       .icon { --brand:#000000; }  /* Schwarz */
#music-platforms .brand-tencent     .icon { --brand:#1DA1F2; }  /* Blau (vereinfachte TME-Anmutung) */
#music-platforms .brand-tidal       .icon { --brand:#000000; }  /* Schwarz */
#music-platforms .brand-touchtunes  .icon { --brand:#00E5FF; }  /* Cyan */
#music-platforms .brand-trebel      .icon { --brand:#FFD400; }  /* Gelb */
#music-platforms .brand-triller7digital .icon { --brand:#FF1CAE; } /* Pink/Magenta */
#music-platforms .brand-wynkhungama .icon { --brand:#E60019; }  /* Rot (Wynk) */
#music-platforms .brand-youseetelmore .icon { --brand:#39B54A; } /* Grün (YouSee) */
#music-platforms .brand-zingmp3     .icon { --brand:#7A1EA1; }  /* Violett */

/* Optional: Hover – Icon etwas heller ohne Brand zu verfälschen */
#music-platforms .platform:hover .icon { filter: brightness(1.1); }

/* Upcoming Releases */
#upcoming-releases .release-card{
  background-color: rgba(15,23,42,.9); /* slate-900/90 */
  border: 1px solid #1e293b;           /* slate-800 */
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#upcoming-releases .release-card:hover{
  transform: translateY(-2px);
  border-color: rgba(16,185,129,.45);  /* emerald-500/45 */
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
#upcoming-releases .release-cover img{
  display:block; width:100%; height:200px; object-fit:cover;
}
#upcoming-releases .release-body{ padding: .9rem 1rem 1rem; }
#upcoming-releases .release-title{
  font-weight: 800; font-size: 1.05rem; line-height:1.25;
  color:#10b981; /* emerald-500 */
  margin: .25rem 0 .35rem;
}
#upcoming-releases .release-meta{
  color:#94a3b8; /* slate-400 */
  font-size:.9rem; margin-bottom:.6rem;
}
#upcoming-releases .release-audio{
  width: 100%; height: 36px; margin:.25rem 0 .25rem;
  filter: saturate(110%);
}
/* optionale Buttons (derzeit auskommentiert im HTML) */
#upcoming-releases .release-actions{
  margin-top:.65rem; display:flex; gap:.5rem; flex-wrap:wrap;
}
#upcoming-releases .btn.ghost{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .7rem; border-radius:.6rem;
  border:1px dashed #334155; color:#cbd5e1; background:transparent;
  pointer-events:none; opacity:.6; /* deaktiviert, bis Links da sind */
}
/* Timezone Switcher – schlicht */
#upcoming-releases .tz-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .8rem;
  justify-content:center; margin-bottom:1rem;
}
#upcoming-releases .tz-label{ color:#94a3b8; }         /* slate-400 */
#upcoming-releases .tz-select{
  background:#0b1220; color:#e2e8f0; border:1px solid #1e293b;
  border-radius:.6rem; padding:.4rem .6rem; min-width: 220px;
}
#upcoming-releases .tz-select:focus{ outline:none; box-shadow:0 0 0 2px rgba(16,185,129,.35); }
#upcoming-releases .tz-note{ color:#64748b; }          /* slate-500 */

/* Releases – Cover-Handling */
#upcoming-releases .release-cover{
  background: rgba(2,6,23,.6);      /* dezenter dunkler Hintergrund */
  aspect-ratio: 1 / 1;               /* quadratisches Fenster */
  overflow: hidden;
  display: grid;
  place-items: center;
}
#upcoming-releases .release-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* Standard: füllt, kann beschneiden */
}

/* Per-Item Opt-in: vollständiges Motiv zeigen */
#upcoming-releases .release-cover.is-contain img{
  object-fit: contain;               /* kein Beschnitt */
  padding: 6%;                       /* minimaler Rand, wirkt hochwertig */
  background: transparent;
}

/* =============================
   9) MUSIC PLATFORMS – CLEAN GRID FIX
   ============================= */

/* Clean text-only list mit Markenpunkt */
#music-platforms .platform{
  --dot: var(--brand, #94a3b8);        /* fällt auf die Markenfarbe zurück */
  display:flex; align-items:center; gap:.65rem;
  padding:.55rem .8rem; border-radius:.75rem;
  color:#cbd5e1; background:transparent;
  transition: color .2s ease, transform .2s ease;
}
#music-platforms .platform:hover{ transform:translateY(-1px); color:var(--brand, #10b981); }

/* Falls irgendwo noch <i>/<img>/<svg> drin ist: verstecken */
#music-platforms .platform i,
#music-platforms .platform img,
#music-platforms .platform svg{ display:none !important; }
/* =============================
   MUSIC PLATFORMS – KONFETTI (final)
   ============================= */
#music-platforms a.confetti-enabled{
  position: relative;   /* Bezugsbox */
  overflow: visible;
}

#music-platforms a.confetti-enabled .confetti{
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: currentColor;     /* nimmt Text-/Hoverfarbe */
  opacity: 1;
  transform: translate(0,0) rotate(0);
  animation: confetti-fly var(--d) cubic-bezier(.2,.8,.2,1) forwards;
  pointer-events: none;
  z-index: 5;
}

@keyframes confetti-fly{
  to{
    transform: translate(var(--x), var(--y)) rotate(var(--r));
    opacity: 0;
  }
}

/* OPTIONAL: nur Namen, keine Punkte/Icons */
#music-platforms .platform::before{ content: none !important; }
#music-platforms .platform i,
#music-platforms .platform img,
#music-platforms .platform svg{ display:none !important; }

/* 🎉 Party-Tüten-Cursor für Konfetti-Links */
#music-platforms a.confetti-enabled:hover {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E🎉%3C/text%3E%3C/svg%3E") 6 20, auto;
}

/* 🎉 Konfetti-Basis */
#music-platforms a.confetti-enabled{
  position: relative; /* Bezugsbox für Partikel */
  overflow: visible;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E🎉%3C/text%3E%3C/svg%3E") 6 20, auto;
}

#music-platforms a.confetti-enabled .confetti{
  position:absolute;
  width:6px; height:6px; border-radius:2px;
  background: currentColor; /* wird per JS auf bunt überschrieben */
  opacity:1; transform: translate(0,0) rotate(0);
  animation: confetti-fly var(--d) cubic-bezier(.2,.8,.2,1) forwards;
  pointer-events:none;
  z-index:5;
}

@keyframes confetti-fly{
  to{ transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity:0; }
}

/* ✨ kurzer „Wackelstoß“ beim Burst */
#music-platforms a.confetti-enabled.shake-once{
  animation: confetti-wobble .28s ease-out;
}
@keyframes confetti-wobble{
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-3.5deg); }
  60%  { transform: rotate(2.5deg); }
  100% { transform: rotate(0deg); }
}

.site-footer {
  background-color: #020617 !important;  /* gleich wie Header/Shoutout */
  color: var(--text) !important;
  border-top: 1px solid #1e293b !important;
}