/* ----------------------------------
   Local Poppins (GDPR-safe)
   Stored under /fonts/poppins/
   ---------------------------------- */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/poppins/poppins-v24-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins/poppins-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins/poppins-v24-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins/poppins-v24-latin-600italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins/poppins-v24-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins/poppins-v24-latin-700italic.woff2') format('woff2');
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:#141414;
  line-height:1.6;
  color:#DECEB4;
  font-size:16px;
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
button, input, select, textarea{font:inherit;color:inherit}
:root{--accent:#DECEB4}
a{color:inherit;text-decoration:none}
.container{max-width:980px;margin:0 auto;padding:0 20px}

/* Header / Nav */
.site-header{position:absolute;top:0;left:0;width:100%;z-index:2000;background:transparent;pointer-events:none}
.site-header .nav,.site-header .header__burger,.site-header .social-menu,.site-header .logo{pointer-events:auto}
.header-container{padding:2% 11%;display:flex}
@media (max-width:991.98px){.header-container{justify-content:center}}
.nav{display:flex;gap:50px;height:fit-content;position:fixed;right:6%;top:20px;z-index:2000}
@media (max-width:1399.98px){.nav{gap:calc(50px - (1399px - 100vw)/((1399 - 1010)/(50 - 16)))}}
@media (max-width:991.98px){.nav{display:none}}
.nav .active{color:#fff}
.nav a{text-shadow:0 0 5px #000}

/* Headings */
h2{font-size:80px;line-height:1.05em;margin-bottom:40px}

/* Hero */
.start-wr{background-color:#141414}
.hero-slider{position:relative;width:100%;height:clamp(560px,100lvh,1400px);overflow:hidden;z-index:1}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.hero-slide.is-active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.92)}
.hero-controls{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;z-index:1200;pointer-events:none}
.hero-controls>*{pointer-events:auto}
.hero-arrow{position:static;width:46px;height:46px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hero-arrow::before{content:'';width:14px;height:14px;border-top:2px solid #DECEB4;border-right:2px solid #DECEB4;opacity:.9}
.hero-arrow:hover::before{opacity:1}
.hero-prev::before{transform:rotate(-135deg)}
.hero-next::before{transform:rotate(45deg)}
.hero-arrow:focus-visible{outline:2px solid rgba(222,206,180,.6);outline-offset:3px}
.hero-dots{position:static;display:flex;gap:10px}
.hero-dots button{width:10px;height:10px;border-radius:50%;background:transparent;border:1px solid #DECEB4;opacity:.85;cursor:pointer}
.hero-dots button.is-active{background:#DECEB4;opacity:1}

/* Social */
.social-menu{position:fixed;top:58%;right:40px;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:1500;justify-content:center;align-items:center;color:#fff}
.social-menu a{color:#fff;font-size:20px;line-height:0;transition:transform .2s}
.social-menu a:hover{transform:scale(1.1);color:#DECEB4}
@media (max-width:768px){
  .social-menu{top:unset;bottom:10px;right:50%;transform:translateX(50%);flex-direction:row;background:rgba(0,0,0,.6);padding:10px 15px;border-radius:25px}
  .social-menu a{font-size:20px}
}

/* Text section */
.text-section{position:relative;width:100%;background:#141414;z-index:2;padding:120px 0}
@media (max-width:767.98px){.text-section{padding:70px 0}}

/* Splash video (header) */
.splash-video-section{position:relative;display:flex;height:790px;overflow:hidden;background:#fff;z-index:0}
@media (max-width:1399.98px){.splash-video-section{height:calc(790px - (1399px - 100vw)/((1399 - 320)/(790 - 190)))}}
.splash-video-section:after{content:'';background-image:url("../img/video-effect.png");background-repeat:repeat;background-position:center;width:100%;position:absolute;height:100%;left:0;background-color:#0a0a0ab8;pointer-events:none;z-index:0}
section.splash-video-section video{width:100%;position:relative;left:-8%}
.video-120{width:120%;position:absolute;align-self:center}
video{max-width:100%;cursor:pointer}

/* Audio section + players */
.audio-section {
  padding: 80px 0;
  background: #141414;
  max-width: 100%; /* Stelle sicher, dass der Inhalt die Breite nicht überschreitet */
}

.audio-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.audio-player {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #e1cbb0;
  padding: 16px 18px;
  margin-bottom: 0;
  background: #1a1a1a;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  max-width: 100%;
  width: 100%;  /* Sicherstellen, dass es nicht über den Rand hinaus geht */
  box-sizing: border-box; 
}
.audio-player._active {
  opacity: 1;
  transform: translateY(0);
}

.audio-player img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  margin-right: 16px;
}

.audio-info {
  flex: 1;
  min-width: 240px;
}

.audio-title {
  font-weight: 500;
  color: #f3e1c8;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.audio-artist {
  display: none !important;
}

.audio-controls {
  width: 100%;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 0;
}

.audio-controls button {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 28px;
  line-height: 0;
  margin-right: 8px;
}

.progress-bar {
  flex: 1;
  height: 4px;
  background: #444;
  border-radius: 2px;
  cursor: pointer;
}

.progress {
  position: relative;
  width: 0;
  height: 100%;
}

.progress::after {
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  content: '';
  background: var(--accent);
  border-radius: 50%;
  left: 100%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  transition: transform 0.2s;
}

.progress-bar:hover .progress::after,
.dragging .progress::after {
  transform: translateY(-50%) scale(1);
}

.audio-controls .timecode {
  min-width: 86px;
  text-align: right;
  font-size: 12px;
  color: #cdbf9e;
  opacity: .95;
}

.audio-player--in-card {
  padding: 16px 18px;
  background: #121212;
  border: 1px solid #3a342c;
}

.audio-player--in-card img {
  width: 60px;
  height: 60px;
  margin-right: 14px;
}

.audio-player--in-card .audio-title {
  font-weight: 500;
  color: #f3e1c8;
}

.audio-player--in-card .audio-artist {
  color: #9f8e7d;
}


/* Official video badge */
.official-video{display:none !important}
.ov-badge{position:absolute;top:16px;right:18px;display:inline-flex;align-items:center;gap:12px;padding:0 !important;background:transparent !important;border-radius:0 !important;box-shadow:none !important;color:#efe9df;font-weight:800;font-size:12px;letter-spacing:.5px;text-transform:uppercase;line-height:1;z-index:5}
.ov-badge .ov-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:26px}
.ov-badge .ov-icon svg{display:block;width:100%;height:100%;fill:currentColor}

/* Artists section */
.artists-section{padding:60px 0;background:#141414}
.artist-list{display:flex;flex-direction:column;gap:32px}
.artist-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: start;
  border: 1px solid #e1cbb0;
  background: #1a1a1a;
  padding: 5px 5px 0 5px;
  gap: 24px;
  width: 100%;
  max-width: 100%; /* Verhindert das Überlaufen */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
  overflow: hidden;
}

.artist-card._active{opacity:1;transform:translateY(0)}
.artist-image{width:180px;height:180px;object-fit:cover;margin:0;grid-column:1;grid-row:auto;align-self:start}
.artist-info{min-width:260px;grid-column:2;padding-top:5px}
.artist-title{font-weight:bold;color:#f3e1c8;margin-bottom:10px;font-size:26px}
.artist-card .artist-info .audio-player {
  max-width: 100%; /* Verhindert das Überlaufen */
  box-sizing: border-box; /* Stellt sicher, dass Padding und Border die Breite nicht überschreiten */
  margin: 0;
}

.artist-card .artist-info .audio-player + .audio-player{margin-top:6px}

/* ICON BAR */
.artist-card .artist-links,
.artist-links{
  grid-column:1 / -1;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  width:100% !important;
  margin-top:0 !important;
  padding:12px 5px 12px !important;
  position:relative !important;
  border-top:1px solid #3a342c !important;
  background:#1a1a1a !important;
}
.artist-link,
.artist-links span.artist-link{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  line-height:0; color:#DECEB4;opacity:.9;transition:transform .2s,opacity .2s;
  font-size:26px; /* steuert SVG-Größe (1em ≈ 26px) */
  overflow:visible; /* verhindert Clipping */
}
.artist-link:hover{opacity:1;transform:translateY(-1px) scale(1.05)}

/* Logo */
.logo img{display:block;height:auto;width:clamp(180px,22vw,460px)}
@media (min-width:1400px){.logo img{width:500px}}
@media (max-width:900px){.logo img{width:clamp(130px,28vw,260px)}}

/* Waves video section */
.splash-video-section-auto{width:100%;height:420px;overflow:hidden}
.splash-video-section-auto video{width:100%;position:fixed;bottom:0;z-index:-1;pointer-events:none}

/* Fanstore */
.fanstore-section{padding:80px 0;background:#141414}

/* Contact */
.contact-section{padding:100px 0;background:url(../img/last.jpg) #000000ad;background-blend-mode:color-burn;background-repeat:no-repeat;background-size:cover;background-position:center}
.contact-container{max-width:800px;margin:0 auto}
.contact-title{margin-bottom:30px;text-align:center;font-weight:600}
.contact-subtitle{line-height:1.5em;text-align:center;font-size:25px;font-weight:600;margin-bottom:50px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:50px;max-width:600px;margin:auto}
.form-group{margin-bottom:20px;opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.form-group._active{opacity:1;transform:translateY(0)}
.form-group.full-width{grid-column:1/3}
.form-group label{display:block;margin-bottom:5px;font-weight:bold}
.form-group input,.form-group textarea{width:100%;padding:12px;background:transparent;border:1px solid #e1cbb0;font-size:1rem;color:#e1cbb0}
.form-group textarea{height:150px;resize:vertical}
.submit-button{grid-column:1/3;background:transparent;border:none;color:var(--accent);font-weight:700;letter-spacing:.15em;text-transform:uppercase;line-height:1;padding:0;height:auto;cursor:pointer;display:inline-block;margin:18px auto 0;-webkit-appearance:none;appearance:none}
.submit-button:hover{opacity:.9;text-decoration:underline}
.submit-button:focus-visible{outline:2px solid rgba(222,206,180,.45);outline-offset:4px;border-radius:2px}

/* Footer */
footer{padding:30px 0;text-align:center;background:#141414;border-top:1px solid #222}
.footer-text{font-size:.8rem}
.footer-links{display:flex;gap:40px;font-size:.7em;justify-content:center;margin:20px auto;opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
.footer-links._active{opacity:1;transform:translateY(0)}

/* Scroll-in anims */
._anim-items{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
._anim-items._active{opacity:1;transform:translateY(0)}

/* Mobile/burger nav — EINZIGER Block */
@media (max-width:991.98px){
  body.lock{overflow:hidden}
  .header__burger{display:block;position:fixed;right:20px;top:20px;width:33px;height:32px;z-index:2100;cursor:pointer;border:1px solid #444;border-radius:2px;background:#141414}
  .header__burger span{background-color:#fae6d1;position:absolute;width:49%;height:2px;left:8px;top:14px;transition:.3s}
  .header__burger:before,.header__burger:after{content:'';background-color:#fae6d1;position:absolute;width:49%;height:2px;left:8px;transition:.3s}
  .header__burger.active span{transform:scale(0)}
  .header__burger.active:before{transform:rotate(45deg);top:14px}
  .header__burger.active:after{transform:rotate(-45deg);bottom:14px}
  .nav{position:fixed;left:0;top:-100%;width:100%;height:100%;overflow:auto;transition:.3s;background:#1b1c1e;list-style:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;z-index:2000}
  .nav.active{top:0}
  .nav a{color:#fff;font-size:20px}
  .ov-badge{top:12px;right:12px}
  .audio-controls{padding-right:80px}
}

/* Form focus/hover */
.form-group input:hover,.form-group textarea:hover,.form-group input:active,.form-group textarea:active,.form-group input:focus-visible,.form-group textarea:focus-visible{background:#141414;transition:.2s}
.form-group input:focus-visible,.form-group textarea:focus-visible{border:1px solid #a359e8;outline:none}

/* Mobile tweaks */
@media (max-width:768px){
  img{max-width:100%}
  h2{font-size:55px}
  .audio-section{padding:40px 0}
  .artist-image{width:150px;height:150px}
  .fanstore-button{margin-top:30px}
  .audio-title{font-size:10px}
  .ov-badge{font-size:10px}
  .audio-controls .timecode{font-size:10px}
}
@media (max-width:390px){h2{font-size:40px}}

/* Release block */
.release-subtext{color:#DECEB4;opacity:.95;margin:-6px 0 16px 0;max-width:760px;line-height:1.6;font-size:16px}
.release-video-wrap{width:100%;max-width:520px;border:1px solid #3a342c;background:#000;margin:0 0 10px 0;aspect-ratio:16/9;overflow:hidden}
.release-video{display:block;width:100%;height:100%;object-fit:cover;filter:contrast(1.02) saturate(1.02)}
@media (max-width:768px){
  .release-video-wrap{max-width:100%}
  .release-subtext{font-size:14px}
}

/* === ICONS (bereinigt & konsolidiert) === */

/* 1) Alte Icon-Font-/Sprite-Reste zuverlässig entfernen */
.social-menu a::before,
.social-menu a::after,
.artist-links .artist-link::before,
.artist-links .artist-link::after{
  content:none !important;
  display:none !important;
  background:none !important;
  -webkit-mask:none !important;
  mask:none !important;
}

/* evtl. FontAwesome/i-Tags ausblenden */
i[class^="fa"], i[class*=" fa-"],
span[class^="fa"], span[class*=" fa-"]{display:none !important}

/* 2) Nur Inline-SVG als sichtbares Icon nutzen */
.artist-link > .icon,
.social-menu a > .icon{display:inline-flex !important}

/* 3) Icon-Grundlayout + vererbbare Farbe */
.icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:1em;height:1em;line-height:0;vertical-align:middle;flex:0 0 auto;
}
.icon svg{width:100%;height:100%;display:block;overflow:visible;shape-rendering:geometricPrecision;text-rendering:geometricPrecision}
.icon svg, .icon svg *{fill:currentColor;stroke:none;vector-effect:none}
/* stroke-Variante für Iconleisten mit .icon-stroke */
.icon-stroke .icon svg, .icon-stroke .icon svg *{fill:none!important;stroke:currentColor!important;stroke-width:1.6px;vector-effect:non-scaling-stroke!important;}
/* 4) Kontextgrößen */
.social-menu a .icon{font-size:1.6em}
/* --- Play/Pause Icons (CSS-only) --- */
.audio-controls button .icon{position:relative;display:inline-block;width:20px;height:20px;}
.audio-controls button.play .icon::before{
  content:"";position:absolute;left:6px;top:4px;width:0;height:0;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;
}
.audio-controls button.pause .icon::before,
.audio-controls button.pause .icon::after{
  content:""!important;position:absolute;top:3px;width:4px;height:14px;background:currentColor;
}
.audio-controls button.pause .icon::before{left:5px;}
.audio-controls button.pause .icon::after{right:5px;}
/* 5) Optionale, minimale Icon-Alignments */
.artist-link[aria-label*="Spotify"] .icon svg{transform:translateY(1px) scale(.98)}
.artist-link[aria-label*="Apple"]   .icon svg{transform:translateY(1px) scale(.98)}
.artist-link[aria-label*="Amazon"]  .icon svg{transform:translateY(1px) scale(1.02)}

/* MI-Icons: Standardfarbe + Hover weiß */
.artist-links .artist-link{
  color: rgba(255,255,255,0.6);
  transition: color .2s ease;
}

.artist-links .artist-link:hover,
.artist-links .artist-link:focus-visible{
  color:#fff;
}

/* Sidebar: Grundfarbe + Hover */
.social-menu a {
  color: #DECEB4;   /* Grundfarbe */
}
.social-menu a:hover {
  color: #ffffff;   /* Hover */
}

/* MI-Icons (Spotify / Apple / Amazon): Grundfarbe + Hover */
.artist-links .artist-link {
  color: #DECEB4;   /* Grundfarbe */
}
.artist-links .artist-link:hover {
  color: #ffffff;   /* Hover */
}

/* SoundCloud Breite + minimal zentrieren & leicht kleiner */
.social-menu a[aria-label*="SoundCloud"] { width: 52px; }           /* vorher 44px */
.social-menu a[aria-label*="SoundCloud"] .icon {
  transform: translateX(1px) scale(.92);
  transform-origin: center;
}
@media (max-width:768px) {
  .artist-card .artist-info .audio-player {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0;
  }
}
@media (max-width:768px) {
  .artist-card .artist-info .audio-player {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden; /* Verhindert das Überlaufen */
  }
}

@media (max-width:768px) {
  .artist-card {
    overflow: hidden; /* Verhindert das Überlaufen der gesamten Karte */
  }

  .artist-card .artist-info {
    overflow: hidden; /* Verhindert das Überlaufen des inneren Bereichs */
  }

  .artist-card .artist-info .audio-player {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden; /* Verhindert das Überlaufen */
  }
}
@media (max-width:768px) {
  .artist-card {
    grid-template-columns: 1fr !important; /* Zwingt das Layout in einer Spalte */
    overflow: hidden; /* Verhindert das Überlaufen */
  }

  .artist-card .artist-info {
    overflow: hidden; /* Verhindert das Überlaufen des inneren Bereichs */
  }

  .artist-card .artist-info .audio-player {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden; /* Verhindert das Überlaufen */
  }
}

/* Mobile Anpassungen für Artist Cards */
@media (max-width:768px) {
  .artist-card {
    display: block !important;  /* Setzt das Grid-Layout auf Block, um die Überlappung zu verhindern */
    width: 100% !important; /* Stellt sicher, dass die Karte die gesamte verfügbare Breite nutzt */
    overflow: hidden; /* Verhindert das Überlaufen */
    padding: 0 !important; /* Entfernt zusätzliche Abstände */
  }

  .artist-card .artist-info {
    width: 100% !important;  /* Verhindert das Überlaufen innerhalb des Containers */
    padding: 10px 0; /* Weniger Padding für kleinere Bildschirme */
  }

  .artist-card .artist-info .audio-player {
    width: 100% !important;  /* Setzt den Player auf 100% der Breite */
    max-width: 100% !important; /* Maximale Breite auf 100% setzen */
    box-sizing: border-box; /* Stellt sicher, dass Padding und Border nicht den Überlauf verursachen */
    margin: 0 !important;
  }

  .artist-image {
    width: 100% !important; /* Bild auf 100% der Breite setzen */
    height: auto !important; /* Erhält das Seitenverhältnis */
    max-width: 100% !important; /* Maximale Breite auf 100% setzen */
  }
}