/* ════════════════════════════════════════════════════
   Robbie Everheart – Gefühle brauchen Refrains
   Keine externen Fonts, keine Libraries.
   ════════════════════════════════════════════════════ */

:root{
  --ink:#0A0410;
  --ink-2:#160A1E;
  --plum:#3B0E38;
  --violet:#7B2A9E;
  --magenta:#FF2E7E;
  --coral:#FF6A3D;
  --sun:#FFC15E;
  --cream:#FFF1E4;
  --muted:rgba(255,241,228,.60);

  --display:"Bodoni 72","Bodoni MT",Didot,"Playfair Display","Times New Roman",serif;
  --sans:"Avenir Next",Avenir,"Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --wrap:1180px;
  --gut:clamp(20px,5vw,56px);
  --sec:clamp(88px,13vw,180px);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .3vw,1.125rem);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

::selection{background:var(--magenta);color:#fff}

:focus-visible{
  outline:2px solid var(--sun);
  outline-offset:4px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--cream);color:var(--ink);padding:.7em 1.2em;
}
.skip:focus{left:12px;top:12px}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}


/* ─────────── Signature: der Sonnenuntergang ───────────
   Liegt fix hinter der Seite. Beim Scrollen wandert der
   Inhalt über die Sonne – sie geht sichtbar unter.       */

.sunset{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

.sunset::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 50% 118%, rgba(255,106,61,.42) 0%, rgba(255,46,126,.24) 32%, rgba(123,42,158,.20) 58%, rgba(10,4,16,0) 78%),
    linear-gradient(180deg,#0A0410 0%,#180722 46%,#2A0A2C 78%,#3B0E38 100%);
}

.sunset__disc{
  position:absolute;left:50%;bottom:-46vmin;
  width:92vmin;height:92vmin;margin-left:-46vmin;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--sun) 0%,var(--coral) 46%,rgba(255,46,126,.35) 68%,rgba(255,46,126,0) 74%);
  opacity:.52;
  filter:blur(2px);
  transform:translateY(var(--sunShift,0px));
  will-change:transform;
}

.sunset__haze{
  position:absolute;left:-10%;right:-10%;bottom:0;height:46vh;
  background:linear-gradient(180deg,rgba(10,4,16,0) 0%,rgba(10,4,16,.55) 55%,rgba(10,4,16,.85) 100%);
}

.sunset__grain{
  position:absolute;inset:-50%;
  opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ─────────── Sticky Bar ─────────── */

.bar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  padding:14px 0;
  background:rgba(10,4,16,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,241,228,.10);
  transform:translateY(-101%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.is-stuck .bar{transform:translateY(0)}

.bar__inner{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}

.bar__mark{
  font-size:.72rem;letter-spacing:.30em;text-transform:uppercase;
  font-weight:600;text-decoration:none;white-space:nowrap;
}

.bar__cta{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  text-decoration:none;white-space:nowrap;
  padding:.62em 1.25em;border-radius:100px;
  color:var(--ink);
  background:linear-gradient(100deg,var(--sun),var(--magenta));
  transition:filter .25s ease;
}
.bar__cta:hover{filter:brightness(1.12)}


/* ─────────── Hero ─────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(104px,14vh,150px) 0 clamp(84px,12vh,120px);
}

.hero__grid{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
}

.eyebrow{
  margin:0 0 clamp(20px,3vw,30px);
  font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}

.wordmark{margin:0;line-height:1}

.wordmark__first{
  display:block;
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(3.5rem,12.4vw,8.6rem);
  letter-spacing:.005em;
  color:#fff;
  text-shadow:0 0 34px rgba(255,46,126,.55),0 0 82px rgba(255,46,126,.28);
}

.wordmark__last{
  display:block;
  margin-top:clamp(4px,.9vw,12px);
  font-size:clamp(.92rem,3.05vw,2.02rem);
  letter-spacing:.335em;
  text-transform:uppercase;
  font-weight:300;
  color:var(--cream);
  text-shadow:0 0 26px rgba(255,193,94,.42);
}

.tagline{
  margin:clamp(20px,3vw,30px) 0 0;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.18rem,2.5vw,1.68rem);
  color:var(--sun);
  line-height:1.35;
}

.rule{
  display:block;
  width:min(260px,64%);
  height:auto;
  margin:clamp(24px,3.6vw,36px) 0;
  fill:none;
  stroke:var(--magenta);
  stroke-width:1.4;
  filter:drop-shadow(0 0 7px rgba(255,46,126,.85));
}
.h2--center + .rule,.rule--center{margin-inline:auto}

.single{
  margin:0;
  font-size:clamp(1.72rem,5.5vw,3.35rem);
  line-height:1.06;
  letter-spacing:-.012em;
  font-weight:700;
  text-transform:uppercase;
}
.single span{display:block}
.single span:last-child{
  color:transparent;
  background:linear-gradient(96deg,var(--sun) 0%,var(--coral) 42%,var(--magenta) 100%);
  -webkit-background-clip:text;background-clip:text;
}

.subline{
  margin:clamp(16px,2.4vw,22px) 0 clamp(28px,4vw,40px);
  color:var(--muted);
  font-size:.94rem;
  letter-spacing:.02em;
}

.cta{
  display:inline-flex;align-items:center;gap:.72em;
  padding:1.02em 2.05em;
  border-radius:100px;
  text-decoration:none;
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--ink);
  background:linear-gradient(100deg,var(--sun) 0%,var(--coral) 48%,var(--magenta) 100%);
  box-shadow:0 0 0 rgba(255,46,126,0),0 14px 40px rgba(255,46,126,.30);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
}
.cta:hover{
  transform:translateY(-3px);
  box-shadow:0 0 30px rgba(255,46,126,.55),0 20px 52px rgba(255,46,126,.38);
}

.cta__tri{
  width:0;height:0;
  border-style:solid;
  border-width:.34em 0 .34em .58em;
  border-color:transparent transparent transparent currentColor;
}

.hero__art{margin:0;position:relative}

.hero__art::after{
  content:"";position:absolute;inset:-14% -10%;z-index:-1;
  background:radial-gradient(58% 48% at 50% 46%,rgba(255,46,126,.42),rgba(255,46,126,0) 70%);
  filter:blur(18px);
}

.hero__art img{
  width:100%;
  border-radius:5px;
  box-shadow:0 34px 90px rgba(0,0,0,.62);
}

.scroll{
  position:absolute;left:50%;bottom:26px;translate:-50% 0;
  width:24px;height:40px;border-radius:100px;
  border:1px solid rgba(255,241,228,.28);
  display:grid;place-items:start center;padding-top:7px;
}
.scroll span{
  width:3px;height:7px;border-radius:3px;background:var(--sun);
  animation:drop 1.9s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes drop{
  0%,12%{transform:translateY(0);opacity:0}
  30%{opacity:1}
  70%,100%{transform:translateY(15px);opacity:0}
}


/* ─────────── Sections ─────────── */

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

.h2{
  margin:0 0 clamp(24px,3.4vw,36px);
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(2.15rem,6.4vw,4.3rem);
  line-height:1;
  letter-spacing:.005em;
}
.h2--center{text-align:center;margin-bottom:clamp(44px,6vw,72px)}

.lead{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.28rem,2.7vw,1.85rem);
  line-height:1.4;
  color:var(--sun);
  margin:0 0 1.15em;
}

.robbie{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:clamp(34px,5.5vw,80px);
  align-items:center;
}

.robbie__img{margin:0;position:relative}
.robbie__img img{
  border-radius:5px;
  box-shadow:0 30px 76px rgba(0,0,0,.6);
}
.robbie__img::after{
  content:"";position:absolute;inset:0;border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(255,241,228,.14);
  pointer-events:none;
}

.robbie__text p{margin:0 0 1.15em;color:rgba(255,241,228,.86)}
.robbie__text p:last-child{margin-bottom:0}


/* ─────────── Songs ─────────── */

.songs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,64px);
  max-width:860px;
  margin-inline:auto;
}

.song{position:relative}

.song__side{
  margin:0 0 .9em;
  font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--magenta);font-weight:600;
}

.song__cover{
  margin:0 0 clamp(18px,2.4vw,26px);
  position:relative;
  border-radius:5px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.song__cover img{width:100%;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.song:hover .song__cover img{transform:scale(1.035)}

.song__play{
  position:absolute;inset:0;
  display:grid;place-items:center;
  color:var(--ink);
  text-decoration:none;
}
.song__play .cta__tri{
  position:relative;z-index:1;
  font-size:1.55rem;
  margin-left:5px;
}
.song__play::before{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:74px;height:74px;border-radius:50%;
  background:linear-gradient(100deg,var(--sun),var(--magenta));
  box-shadow:0 0 34px rgba(255,46,126,.55);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.song__play:hover::before{transform:translate(-50%,-50%) scale(1.09)}

.song__cover--blank{
  aspect-ratio:1080/1919;
  display:grid;place-items:center;
  background:
    radial-gradient(80% 60% at 50% 88%,rgba(255,106,61,.28),rgba(10,4,16,0) 70%),
    linear-gradient(170deg,#26082B 0%,#160720 60%,#0D0514 100%);
  box-shadow:inset 0 0 0 1px rgba(255,241,228,.12),0 24px 60px rgba(0,0,0,.45);
}
.song__cover--blank svg{
  width:34%;height:auto;
  fill:none;stroke:var(--magenta);stroke-width:2;
  opacity:.75;
  filter:drop-shadow(0 0 12px rgba(255,46,126,.7));
}

.song__status{
  margin:0 0 .35em;
  font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.song__status--out{color:var(--sun)}

.song__title{
  margin:0 0 .7em;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.35rem,3.1vw,1.95rem);
  line-height:1.14;
}

.song__links{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5em .75em;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.song__links a,.song__links span{
  display:inline-block;
  padding:.5em 1em;
  border-radius:100px;
  border:1px solid rgba(255,241,228,.24);
  text-decoration:none;
  transition:border-color .25s ease,color .25s ease,background-color .25s ease;
}
.song__links a:hover{border-color:var(--magenta);color:var(--magenta)}
.song__links span{color:rgba(255,241,228,.42);border-style:dashed}


/* ─────────── Follow ─────────── */

.follow{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.8vw,20px);
}

.follow__item{
  display:flex;flex-direction:column;gap:.35em;
  padding:clamp(22px,3vw,34px) clamp(18px,2.2vw,26px);
  border-radius:6px;
  text-decoration:none;
  background:linear-gradient(165deg,rgba(255,241,228,.075),rgba(255,241,228,.02));
  box-shadow:inset 0 0 0 1px rgba(255,241,228,.13);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,background-color .35s ease;
}

.follow__net{
  font-size:clamp(1.02rem,2vw,1.28rem);
  font-weight:600;letter-spacing:.02em;
}
.follow__handle{
  font-size:.74rem;letter-spacing:.12em;
  color:var(--muted);
}

a.follow__item:hover{
  transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px var(--magenta),0 18px 44px rgba(255,46,126,.22);
}
.follow__item:not(a){opacity:.5}


/* ─────────── Footer ─────────── */

.foot{
  padding:clamp(56px,7vw,84px) 0 clamp(30px,4vw,44px);
  border-top:1px solid rgba(255,241,228,.12);
  background:rgba(10,4,16,.55);
}

.foot__inner{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(28px,4vw,48px);
  align-items:start;
}

.foot__mark{
  margin:0;
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.15rem);
  line-height:1.1;
}
.foot__sub{
  margin:.4em 0 0;
  font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--muted);
}

.foot__label{
  margin:0 0 .55em;
  font-size:.63rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);
}
.foot__col p{margin:0 0 .35em;font-size:.92rem}
.foot__col a{text-decoration:none;border-bottom:1px solid rgba(255,241,228,.28);padding-bottom:1px}
.foot__col a:hover{border-color:var(--magenta);color:var(--magenta)}

.foot__copy{
  max-width:var(--wrap);
  margin:clamp(38px,5vw,60px) auto 0;
  padding-inline:var(--gut);
  font-size:.72rem;letter-spacing:.14em;
  color:rgba(255,241,228,.38);
}


/* ─────────── Rechtstexte ─────────── */

.legal{padding:clamp(120px,15vh,180px) 0 var(--sec)}
.legal .wrap{max-width:760px}
.legal h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,3.6rem);line-height:1;margin:0 0 .6em;
}
.legal h2{
  font-size:1.02rem;letter-spacing:.15em;text-transform:uppercase;
  margin:2.6em 0 .8em;color:var(--sun);font-weight:600;
}
.legal p,.legal li{color:rgba(255,241,228,.84)}
.legal p{margin:0 0 1.1em}
.legal ul{padding-left:1.1em;margin:0 0 1.1em}
.legal a{color:var(--sun)}
.legal .back{
  display:inline-block;margin-bottom:2.4em;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
}
.legal .back:hover{color:var(--magenta)}
.legal .note{
  padding:1.1em 1.3em;border-radius:5px;
  background:rgba(255,46,126,.09);
  box-shadow:inset 0 0 0 1px rgba(255,46,126,.3);
  font-size:.9rem;
}


/* ─────────── Motion ─────────── */

.load{opacity:0;transform:translateY(22px)}
.is-ready .load{
  opacity:1;transform:none;
  transition:opacity .85s ease var(--d,0ms),transform .85s cubic-bezier(.22,1,.36,1) var(--d,0ms);
}

.reveal{opacity:0;transform:translateY(30px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1);
}


/* ─────────── Responsive ─────────── */

@media (max-width:900px){
  .hero{min-height:auto;padding-top:clamp(88px,16vh,120px)}
  .hero__grid{grid-template-columns:1fr;gap:clamp(30px,7vw,48px)}
  .hero__art{order:-1;max-width:330px;margin-inline:auto}
  .hero__art img{aspect-ratio:1/1.24;object-fit:cover;object-position:50% 12%}
  .scroll{display:none}

  .robbie{grid-template-columns:1fr;gap:clamp(26px,6vw,40px)}
  .robbie__img{max-width:460px}

  .follow{grid-template-columns:repeat(2,minmax(0,1fr))}

  .foot__inner{grid-template-columns:1fr 1fr}
  .foot__inner > :first-child{grid-column:1/-1}
}

@media (max-width:560px){
  .songs{grid-template-columns:1fr;gap:clamp(44px,10vw,60px);max-width:400px}
  .song__cover{max-width:100%}
  .rule{width:min(220px,80%)}
  .hero__art{max-width:min(280px,66vw)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .load,.reveal{opacity:1;transform:none}
  .sunset__disc{transform:none !important}
}