/* ============================================================
   DISCOFAMILY – style.css
   Aufbau: Variablen → Basis → Nav → Hero → Sektionen → Footer
   Farben: Hot-Pink #f5327f / #d6007e + Schwarz/Weiß
   Schrift: Oswald (Headlines) + Inter (Text)
   ============================================================ */

:root{
  --pink:#f5327f;
  --pink-deep:#d6007e;
  --pink-soft:#ffe3f1;
  --ink:#0d0810;
  --navy:#16263d;
  --paper:#ffffff;
  --paper-2:#fbf6f9;
  --line:#efe4ec;
  --muted:#736a78;
  --dark-1:#160810;
  --dark-2:#2a0a1d;
  --radius:16px;
  --shadow:0 18px 46px -22px rgba(214,0,126,.32);
}

*{box-sizing:border-box;margin:0;padding:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo,.btn,.kicker,.tag,.evt-date,.nav a.lnk{font-family:'Oswald',sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- NAV ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,border-color .3s}
header.solid{background:rgba(13,8,16,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo-img{height:22px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.nav{display:flex;align-items:center;gap:22px}
.links{display:flex;gap:22px}
.nav a.lnk{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#e8e2ec;position:relative;padding:4px 0}
.nav a.lnk::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--pink);transition:width .25s}
.nav a.lnk:hover::after{width:100%}
.nav a.lnk:hover{color:#fff}

/* Burger-Button (nur Mobil sichtbar) */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
            background:none;border:0;cursor:pointer;padding:10px;z-index:70}
.nav-toggle span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- SOCIAL ICONS ---------- */
.soc{display:flex;align-items:center;gap:10px}
.soc a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
       background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;transition:.2s}
.soc a:hover{background:var(--pink);border-color:var(--pink);transform:translateY(-2px)}
.soc a svg{width:18px;height:18px;fill:currentColor}
/* Hero-Variante: größer + auffälliger */
.soc.big a{width:50px;height:50px;background:var(--pink);border-color:var(--pink);box-shadow:0 10px 24px -10px rgba(245,50,127,.7)}
.soc.big a:hover{background:#fff;color:var(--pink-deep);border-color:#fff}
.soc.big a svg{width:24px;height:24px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
      text-align:center;overflow:hidden;color:#fff;padding:120px 0 90px;
      background:radial-gradient(60% 80% at 50% 42%, #3a0d26 0%, var(--dark-2) 45%, var(--dark-1) 100%)}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(40% 50% at 50% 46%, rgba(245,50,127,.22), transparent 70%);pointer-events:none}

/* Player oben – schlanke Inline-Zeile, KEIN Kasten (steuert Mixcloud) */
.sc-bar{position:absolute;top:90px;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;width:min(86vw,380px)}
.player{display:flex;align-items:center;gap:13px;width:100%;color:#d9d2de;font:600 .7rem 'Oswald';letter-spacing:.12em}
.player .pbtns{display:flex;align-items:center;gap:13px}
.player .pbtn{background:none;border:0;color:#9b91a4;cursor:pointer;font-size:.82rem;line-height:1;transition:color .2s,transform .15s}
.player .pbtn:hover{color:#fff;transform:scale(1.12)}
/* Play = nur ein dezenter Punkt, kein Rahmen-Kasten */
.player .play{width:30px;height:30px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;
              cursor:pointer;color:#fff;background:var(--pink);transition:transform .18s,box-shadow .25s;font-size:.62rem;flex:none;
              box-shadow:0 0 0 0 rgba(245,50,127,.55)}
.player .play:hover{transform:scale(1.08)}
.player .play.playing{animation:pulseRing 1.8s ease-out infinite}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(245,50,127,.5)}70%{box-shadow:0 0 0 12px rgba(245,50,127,0)}100%{box-shadow:0 0 0 0 rgba(245,50,127,0)}}
/* hauchdünne Fortschrittslinie, nimmt den freien Platz */
.player .bar-line{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.player .bar-line i{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--pink),#ff7ab5);border-radius:2px;transition:width .25s linear}
.player .track{color:#efe7f0;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.sc-hint{margin:0 0 7px;font-size:.62rem;color:#9b91a4;text-align:center;letter-spacing:.05em}
#sc-frame{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
@media(max-width:620px){
  .sc-bar{width:min(90vw,320px)}
  .player .track{display:none}
}

/* Equalizer-Kreis */
.equalizer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(80vw,660px);height:min(80vw,660px);z-index:1;opacity:.55}
.equalizer svg{width:100%;height:100%;animation:spin 50s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.hero-inner{position:relative;z-index:3;padding:0 20px;width:100%}
.hero .sub{font:500 1rem 'Oswald';letter-spacing:.4em;text-transform:uppercase;color:var(--pink);margin-bottom:18px}
.hero-logo{display:block;width:min(84vw,720px);height:auto;margin:0 auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.6))}
.hero .genre{font:500 .98rem 'Oswald';letter-spacing:.2em;text-transform:uppercase;color:#d9d2de;line-height:2.2;margin:26px 0 34px}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Oswald';font-weight:600;font-size:.86rem;letter-spacing:.12em;
     text-transform:uppercase;padding:15px 30px;border-radius:999px;cursor:pointer;transition:transform .18s,box-shadow .18s,background .2s;border:0}
.btn-primary{background:var(--pink);color:#fff;box-shadow:0 14px 30px -10px rgba(245,50,127,.7)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:var(--pink);color:var(--pink)}
.scroll-ind{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;color:#cfc6d4;
            font:600 .68rem 'Oswald';letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-ind::after{content:'';width:1px;height:30px;background:linear-gradient(var(--pink),transparent)}

/* ---------- SEKTIONEN ---------- */
section.block{padding:84px 0;position:relative;isolation:isolate;overflow:hidden}

/* Animierte Pink-Aurora hinter den hellen Sektionen – gibt Tiefe statt flachem Weiß */
.has-aurora::before,.has-aurora::after{content:'';position:absolute;z-index:-1;border-radius:50%;
  filter:blur(60px);pointer-events:none;opacity:.5}
.has-aurora::before{width:46vw;height:46vw;max-width:560px;max-height:560px;left:-8vw;top:-6vw;
  background:radial-gradient(circle,rgba(245,50,127,.30),transparent 68%);animation:drift1 18s ease-in-out infinite alternate}
.has-aurora::after{width:40vw;height:40vw;max-width:480px;max-height:480px;right:-10vw;bottom:-8vw;
  background:radial-gradient(circle,rgba(214,0,126,.22),transparent 68%);animation:drift2 22s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(7vw,5vw) scale(1.18)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vw,-4vw) scale(1.12)}}

/* Diagonale Schnitte zu den dunklen Sektionen (Music + Booking) */
#music,#booking{clip-path:polygon(0 30px,100% 0,100% 100%,0 100%);margin-top:-30px;padding-top:114px;z-index:2}

/* Scroll-Reveal: Elemente faden + steigen beim Sichtbarwerden ein (nur wenn JS aktiv) */
html.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  .has-aurora::before,.has-aurora::after{animation:none}
  .equalizer svg{animation:none}
}

/* Genre-Lauftext (Marquee) – dezent, läuft oben aus dem dunklen Hero und unten weich ins Weiß */
.marquee{position:relative;z-index:3;overflow:hidden;padding:12px 0 30px;border:0;
  background:linear-gradient(180deg,#1b0813 0%,#2a0a1d 34%,#6f4258 70%,#e7d9e1 90%,var(--paper) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marquee-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:scrollx 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font:500 .76rem 'Oswald';letter-spacing:.34em;text-transform:uppercase;color:#a99bb3;padding:0 22px}
.marquee span b{color:rgba(245,50,127,.5);font-weight:500}
@keyframes scrollx{to{transform:translateX(-50%)}}
.center{text-align:center}
.kicker{font:600 .8rem 'Oswald';letter-spacing:.24em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:10px}
.h2{font-family:'Oswald';font-weight:700;font-size:clamp(2rem,4.5vw,3rem);letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px}
.lead2{color:var(--muted);max-width:700px;font-size:1.05rem}
.center .lead2{margin:0 auto}

/* BIO + STATS */
.bio-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center;margin-top:26px}
.bio-photo{aspect-ratio:4/3;border-radius:var(--radius);background:linear-gradient(135deg,#1a0f18,var(--pink));position:relative;box-shadow:var(--shadow)}
.bio-photo::after{content:'BANDFOTO FOLGT';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.5);font:600 .8rem 'Oswald';letter-spacing:.24em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.stat b{font:700 2.3rem 'Oswald';color:var(--pink-deep);line-height:1;display:block}
.stat span{color:var(--muted);font-size:.86rem;display:block;margin-top:6px}

/* RELEASES (dunkel) */
#music{background:var(--ink);color:#fff}
#music .kicker{color:var(--pink)}
#music .lead2{color:#b9b0c0}
.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.rel{display:flex;gap:18px;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:16px;transition:.2s}
.rel:hover{background:rgba(245,50,127,.08);border-color:rgba(245,50,127,.4)}
.rel .cover{width:84px;height:84px;border-radius:10px;flex:none;background:linear-gradient(135deg,var(--pink-deep),#3a0d26);display:flex;align-items:center;justify-content:center;color:#fff;font:700 1.6rem 'Oswald'}
.rel h3{font-size:1.1rem;letter-spacing:.04em}
.rel p{color:#b9b0c0;font-size:.86rem;margin-top:3px}
.rel .ply{margin-left:auto;color:var(--pink);font:600 .76rem 'Oswald';letter-spacing:.1em;white-space:nowrap}

/* EVENTS */
.evt{display:flex;align-items:center;gap:24px;padding:20px 4px;border-bottom:1px solid var(--line)}
.evt:first-of-type{border-top:1px solid var(--line)}
.evt-date{flex:none;width:88px;text-align:center}
.evt-date b{display:block;font-size:1.7rem;color:var(--pink-deep);line-height:1}
.evt-date span{font:600 .72rem 'Oswald';letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.evt-main{flex:1}
.evt-main h3{font-size:1.15rem;letter-spacing:.03em}
.evt-main p{color:var(--muted);font-size:.9rem}
.evt .btn{padding:10px 20px;font-size:.74rem}
.evt-note{margin-top:22px;color:var(--muted);font-size:.9rem;text-align:center}

/* TEAM */
#team{background:var(--paper-2)}
/* Kompakte Hinweis-Karten (~halbe Größe): auto-fit packt mehrere pro Reihe */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:34px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card .photo{aspect-ratio:4/5;background:linear-gradient(135deg,#2a1020,var(--pink));position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.card .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .photo img{transform:scale(1.06)}
.card .photo::after{content:'FOTO FOLGT';position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.46);font:600 .58rem 'Oswald';letter-spacing:.18em}
.card .photo.has-img::after{display:none}
.card .photo.has-img::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 45%,rgba(13,8,16,.72))}
.card .photo b{position:relative;z-index:2;color:#fff;font:600 .9rem 'Oswald';letter-spacing:.04em;line-height:1.15;text-align:center;padding:0 8px 11px;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.card .body{padding:11px 12px 13px}
.card .real{color:var(--muted);font-size:.74rem;margin-bottom:8px}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.tag{font:600 .58rem 'Oswald';letter-spacing:.06em;text-transform:uppercase;background:var(--pink-soft);color:var(--pink-deep);border-radius:999px;padding:3px 8px}
.card .links{display:flex;gap:10px;font:600 .68rem 'Oswald';letter-spacing:.04em;color:var(--pink-deep)}

/* GALLERY / REMEMBER – Magenta-Duotone, Hover = Originalfarbe */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:38px}
.tile{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#1a0f18;border:1px solid var(--line)}
.tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(.92) contrast(1.02);transition:filter .45s ease}
.tile .tint{position:absolute;inset:0;background:var(--pink);mix-blend-mode:multiply;opacity:.6;transition:opacity .45s ease;z-index:1;pointer-events:none}
.tile .cap{position:absolute;left:12px;right:12px;bottom:10px;color:#fff;font:600 .78rem 'Oswald';letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.7);z-index:3}
.tile::before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.55));z-index:2;pointer-events:none}
.tile:hover img{filter:none}
.tile:hover .tint{opacity:0}
.gal-empty{margin-top:34px;padding:40px;text-align:center;border:1.5px dashed var(--line);border-radius:var(--radius);color:var(--muted)}

/* BOOKING (dunkel) */
#booking{background:var(--ink);color:#fff}
#booking .kicker{color:var(--pink)}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:42px;align-items:start}
.contact-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:32px}
.contact-card h3{font-size:1.2rem;letter-spacing:.04em;margin-bottom:18px}
.contact-card .row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.94rem}
.contact-card .row:last-child{border:0}
.contact-card .row span:first-child{color:var(--pink);min-width:74px;font:600 .82rem 'Oswald';letter-spacing:.08em}
form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:30px}
label{display:block;font:600 .78rem 'Oswald';letter-spacing:.1em;text-transform:uppercase;margin:14px 0 6px;color:#d9d2de}
form > label:first-of-type{margin-top:0}
input,textarea{width:100%;border:1.5px solid rgba(255,255,255,.16);border-radius:10px;padding:12px 14px;font:400 .96rem 'Inter';background:rgba(255,255,255,.05);color:#fff}
input::placeholder,textarea::placeholder{color:#8a8092}
input:focus,textarea:focus{outline:none;border-color:var(--pink)}
.spam-note{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#b9b0c0;margin:14px 0}
.hp{position:absolute;left:-9999px}
.form-msg{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.92rem}
.form-msg.ok{background:rgba(60,200,120,.15);border:1px solid rgba(60,200,120,.4);color:#bdf5d2}
.form-msg.err{background:rgba(245,50,127,.15);border:1px solid rgba(245,50,127,.4);color:#ffc6e0}

/* FOOTER */
footer{background:#080509;color:#cfc6d4;padding:52px 0 28px}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;align-items:flex-start}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;font:600 .82rem 'Oswald';letter-spacing:.08em;text-transform:uppercase}
footer a:hover{color:var(--pink)}
.other-projects{margin-top:16px;font-size:.78rem;color:#8a8092}
.other-projects a{color:#cfc6d4;text-decoration:underline;text-underline-offset:2px}
.other-projects a:hover{color:var(--pink)}
.copy{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;color:#8a8092;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* COOKIE */
.cookie{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:90;max-width:780px;width:calc(100% - 30px);
        background:#160810;border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 22px 56px -18px rgba(0,0,0,.7);
        padding:20px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:#e8e2ec}
.cookie p{font-size:.86rem;flex:1;min-width:240px}
.cookie b{color:var(--pink)}
.cookie .btns{display:flex;gap:8px}
.cookie .btn{padding:10px 18px;font-size:.74rem}
.btn-text{background:none;border:1.5px solid rgba(255,255,255,.25);color:#cfc6d4}

/* DSGVO-Einwilligung im Formular */
.consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px;font-size:.82rem;color:var(--muted);line-height:1.45;cursor:pointer}
.consent input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--pink)}
.consent a{color:var(--pink-deep);text-decoration:underline}

/* Schmale Sektion (z.B. Termine – bewusst kompakt) */
.block-narrow{padding-top:64px;padding-bottom:64px}
.wrap-narrow{max-width:680px}

/* RESPONSIVE */
@media(max-width:880px){
  .nav-toggle{display:flex}
  .nav{position:fixed;top:68px;right:0;left:0;flex-direction:column;align-items:flex-start;gap:0;
       background:rgba(13,8,16,.98);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1);
       padding:0 24px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
  .nav.open{max-height:80vh;padding:14px 24px 22px}
  .links{display:flex;flex-direction:column;gap:4px;width:100%}
  .nav a.lnk{display:block;padding:13px 0;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav .soc{display:flex;margin-top:16px}
  .bio-grid{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .book-grid{grid-template-columns:1fr}
  .evt{flex-wrap:wrap;gap:14px}
}
/* Team bleibt kompakt: auto-fit regelt die Spalten; auf kleinen Phones 2 pro Reihe */
@media(max-width:420px){ .team-grid{grid-template-columns:1fr 1fr} }