:root{
  --bg:#08090d;
  --text:#f7f7fb;
  --muted:#a6a8b3;
  --glass:rgba(16,18,24,.68);
  --line:rgba(255,255,255,.10);
  --accent:#8b5cf6;
  --accent2:#22d3ee;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 14% 10%, #211742 0, transparent 34%),
    radial-gradient(circle at 86% 18%, #12354a 0, transparent 31%),
    radial-gradient(circle at 50% 100%, #17132b 0, transparent 42%),
    #07080c;
}
body:before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(circle at 18% 12%, rgba(139,92,246,.24), transparent 30%),
    radial-gradient(circle at 84% 28%, rgba(34,211,238,.16), transparent 28%),
    linear-gradient(to bottom, rgba(3,4,8,.02), rgba(3,4,8,.62));
  backdrop-filter:saturate(110%);
  pointer-events:none;
}
.ambient{
  position:fixed;
  width:34rem;height:34rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,.32), transparent 66%);
  filter:blur(25px);
  left:50%;top:12%;
  transform:translateX(-50%);
  pointer-events:none;
  animation:float 8s ease-in-out infinite;
}
.page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px 18px 42px;
  position:relative;
  z-index:1;
}
.card{
  width:min(100%, 540px);
  padding:28px 20px 20px;
  border:1px solid var(--line);
  border-radius:32px;
  background:linear-gradient(180deg,rgba(18,20,28,.78),rgba(10,11,16,.70));
  backdrop-filter:blur(24px) saturate(130%);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
  box-shadow:0 28px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.05);
}
.hero{text-align:center;padding:8px 8px 20px}
.avatar-wrap{
  width:118px;height:118px;
  margin:0 auto 16px;
  position:relative;
}
.avatar{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:30px;
  border:2px solid rgba(255,255,255,.20);
  box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 0 7px rgba(255,255,255,.04);
}
.eyebrow{
  margin:0 0 6px;
  color:#b8b9c4;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:700;
}
h1{
  margin:0;
  font:700 clamp(2.6rem,10vw,4.5rem)/.95 "Space Grotesk",sans-serif;
  letter-spacing:-.055em;
  background:linear-gradient(110deg,#fff 10%,#d8d4ff 45%,#79e7ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.bio{
  margin:12px 0 15px;
  color:#d0d1d8;
  font-size:.98rem;
}
.mini-tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
}
.mini-tags span{
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#d9dae1;
  font-size:.76rem;
}
.links{display:grid;gap:11px}
.link{
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center;
  gap:12px;
  padding:13px 15px;
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.link:hover{
  transform:translateY(-2px) scale(1.006);
  border-color:rgba(160,130,255,.45);
  background:rgba(255,255,255,.085);
  box-shadow:0 12px 34px rgba(0,0,0,.22),0 0 26px rgba(139,92,246,.12);
}
.icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(34,211,238,.16));
  border:1px solid rgba(255,255,255,.09);
  font-size:1.2rem;
}
.link span:nth-child(2){min-width:0}
.link strong{display:block;font-size:.98rem}
.link small{display:block;margin-top:3px;color:var(--muted);font-size:.76rem}
.link b{font-size:1.15rem;color:#bfc1cc;font-weight:500}
footer{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:20px;
  color:#858793;
  font-size:.72rem;
  letter-spacing:.16em;
}
.dot{opacity:.5}
@keyframes float{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,18px)}
}
@media (max-width:560px){
  .page{padding:14px 12px 28px;align-items:start}
  .card{border-radius:26px;padding:22px 14px 18px}
  .avatar-wrap{width:104px;height:104px}
  .link{padding:12px 13px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}


/* Official brand marks */
.icon img{
  width:22px;
  height:22px;
  display:block;
  object-fit:contain;
}
.icon-instagram{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.icon-tiktok{background:#111}
.icon-discord{background:#5865F2}
.icon-spotify{background:#1DB954}
.icon-steam{background:linear-gradient(135deg,#1b2838,#2a475e)}
.icon-snapchat{background:#FFFC00}
.icon-telegram{background:#229ED9}
.icon-whatsapp{background:#25D366}

/* Foto-Collage im Hintergrund */
.photo-wall{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.bg-photo{
  --rot:0deg;
  --scale:1;
  position:absolute;
  margin:0;
  width:clamp(180px,18vw,285px);
  aspect-ratio:4/5;
  padding:7px;
  border-radius:28px;
  overflow:hidden;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:
    0 28px 78px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.025) inset;
  opacity:0;
  filter:saturate(.95) brightness(.82);
  backdrop-filter:blur(2px);
  transform:rotate(var(--rot)) scale(var(--scale));
  transition:opacity .55s ease, transform .55s ease;
}
.bg-photo.loaded{opacity:.58}
.bg-photo::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:21px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.09),transparent 35%,rgba(0,0,0,.18));
}
.bg-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 42%;
  border-radius:21px;
}
.photo-1{left:max(14px,calc(50% - 690px));top:3vh}
.photo-2{right:max(10px,calc(50% - 700px));top:6vh}
.photo-3{left:max(20px,calc(50% - 625px));top:38vh}
.photo-4{right:max(18px,calc(50% - 635px));top:42vh}

/* Dunkle Zone hinter dem Hauptpanel hält die Links lesbar. */
.page::before{
  content:"";
  position:fixed;
  left:50%;
  top:0;
  width:min(760px,100vw);
  height:100vh;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse at center,rgba(4,5,9,.64),rgba(4,5,9,.26) 58%,transparent 80%);
  pointer-events:none;
  z-index:-1;
}

@media (max-width:1100px){
  .bg-photo{
    width:175px;
    filter:saturate(.9) brightness(.72);
  }
  .bg-photo.loaded{opacity:.40}
  .photo-1{left:-52px;top:1vh}
  .photo-2{right:-55px;top:12vh}
  .photo-3{left:-70px;top:35vh}
  .photo-4{right:-68px;top:48vh}
}

@media (max-width:560px){
  /*
    Mobile: Fotos bewusst deutlich sichtbar lassen.
    Sie liegen größer hinter dem Glas-Panel statt fast komplett
    außerhalb des Bildschirms zu verschwinden.
  */
  .photo-wall{
    overflow:hidden;
  }

  .bg-photo{
    width:54vw;
    min-width:185px;
    max-width:230px;
    padding:5px;
    border-radius:22px;
    filter:saturate(.95) brightness(.78);
    box-shadow:0 18px 48px rgba(0,0,0,.48);
  }

  .bg-photo.loaded{opacity:.48}

  .bg-photo img,
  .bg-photo::after{
    border-radius:17px;
  }

  .photo-1{left:-8vw;top:2vh}
  .photo-2{right:-9vw;top:25vh}
  .photo-3{left:-10vw;top:52vh}
  .photo-4{right:-8vw;top:76vh}

  .page::before{
    width:100vw;
    background:
      radial-gradient(ellipse at center,rgba(4,5,9,.48),rgba(4,5,9,.16) 62%,transparent 88%);
  }

  .card{
    background:linear-gradient(180deg,rgba(18,20,28,.78),rgba(10,11,16,.74));
    backdrop-filter:blur(17px) saturate(125%);
    -webkit-backdrop-filter:blur(17px) saturate(125%);
    border-color:rgba(255,255,255,.13);
  }
}


/* Live status + Spotify */
.live-stack{
  display:grid;
  gap:11px;
  margin:0 0 16px;
}
.status-card,
.spotify-live{
  min-height:76px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.status-card{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:12px;
  align-items:center;
  padding:13px 15px;
}
.status-symbol{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(139,92,246,.26),rgba(34,211,238,.15));
  border:1px solid rgba(255,255,255,.09);
  font-size:1.15rem;
}
.status-copy,.spotify-copy{min-width:0}
.section-kicker{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
  color:var(--muted);
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.14em;
}
.status-copy strong,.spotify-copy strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.95rem;
}
.status-copy small,.spotify-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:3px;
  color:var(--muted);
  font-size:.75rem;
}
.status-pulse{
  width:10px;height:10px;
  border-radius:50%;
  background:#2ee67a;
  box-shadow:0 0 0 0 rgba(46,230,122,.38);
  animation:statusPulse 2.2s ease-out infinite;
}
@keyframes statusPulse{
  0%{box-shadow:0 0 0 0 rgba(46,230,122,.38)}
  65%,100%{box-shadow:0 0 0 10px rgba(46,230,122,0)}
}
.spotify-live{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:13px;
  align-items:center;
  padding:11px 15px 11px 11px;
  color:var(--text);
  text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.spotify-live:hover{
  transform:translateY(-2px);
  border-color:rgba(29,185,84,.45);
  background:rgba(255,255,255,.085);
}
.spotify-cover-wrap{
  width:56px;height:56px;
  position:relative;
  border-radius:15px;
  overflow:hidden;
  display:grid;place-items:center;
  background:#111;
  border:1px solid rgba(255,255,255,.09);
}
.spotify-cover{
  width:100%;height:100%;
  object-fit:cover;
  padding:13px;
}
.spotify-cover.has-art{padding:0}
.spotify-live>b{font-size:1.15rem;color:#bfc1cc;font-weight:500}
.spotify-dot{width:7px;height:7px;border-radius:50%;background:#1DB954}
.spotify-bars{
  position:absolute;
  left:7px;bottom:7px;
  display:flex;
  align-items:end;
  gap:2px;
  height:13px;
  padding:3px 4px;
  border-radius:6px;
  background:rgba(0,0,0,.58);
  opacity:0;
}
.spotify-bars.playing{opacity:1}
.spotify-bars i{display:block;width:2px;height:5px;border-radius:2px;background:#1DB954;animation:eq .7s ease-in-out infinite alternate}
.spotify-bars i:nth-child(2){height:10px;animation-delay:-.25s}
.spotify-bars i:nth-child(3){height:7px;animation-delay:-.48s}
@keyframes eq{to{height:12px}}
.spotify-progress{
  height:3px;
  margin-top:7px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.11);
}
.spotify-progress span{display:block;height:100%;width:0;background:#1DB954;border-radius:inherit;transition:width .8s linear}
.motion-toggle{
  display:none !important;
}

/* Mobile UI: keine versehentlichen grauen Text-Markierungen auf Live-Karten. */
.status-card,
.spotify-live{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* Parallax wird über CSS-Variablen mit Rotation/Scale kombiniert. */
.bg-photo{
  --px:0px;
  --py:0px;
  transform:translate3d(var(--px),var(--py),0) rotate(var(--rot)) scale(var(--scale));
  will-change:transform,opacity;
}
.bg-photo.changing{opacity:0!important;transform:translate3d(var(--px),var(--py),0) rotate(var(--rot)) scale(.91)}

@media (max-width:560px){
  .live-stack{margin-bottom:14px}
  .status-card{padding:11px 12px;grid-template-columns:44px 1fr auto}
  .spotify-live{padding:10px 12px 10px 10px;grid-template-columns:52px 1fr auto}
  .spotify-cover-wrap{width:52px;height:52px}
}


#status-detail[hidden]{display:none !important;}
.motion-toggle{display:none !important;}