/* === Reset & Layout === */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: 'Outfit', sans-serif;
  background: #000;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Hintergrundvideo */
#bg-video {
  position: fixed;
  top: 0; left: 0;
  min-width: 100vw;
  min-height: 100vh;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  background: #000;
}

/* leichte Verdunkelung */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
  pointer-events: none;
}

/* Slideshow */
.slideshow-banner {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.slideshow-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 40px;
  cursor: pointer;
  z-index: 3;
  user-select: none;
  padding: 0 10px;
}
.arrow.left  { left: 10px; }
.arrow.right { right: 10px; }

/* Hauptinhalt (kein globaler Hintergrund) */
.main-content {
  position: relative;
  z-index: 4;
  max-width: 500px;
  margin: -80px auto 0;
  padding: 20px;
  text-align: center;
  color: white;
  background: none;
}

/* NUR hier der dunkle Glas-Hintergrund (hinter Name/Location/Bio) */
.content-panel {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 20px;
  margin: 0 auto 16px;
  text-align: center;
}

/* Profilbild */
.profile-pic {
  width: 150px; height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ff2b2b;
  margin: -75px auto 20px;
  box-shadow: 0 0 12px rgba(255,0,0,0.35);
  cursor: pointer;
  display: block;
}

.name { font-size: 26px; font-weight: 700; margin-bottom: 5px; font-family:'Playfair Display',serif; }
.location { font-size: 14px; color: #ccc; margin-bottom: 16px; font-family:'Playfair Display',serif; }

/* Interaktionen */
.interaction-row {
  display: flex; justify-content: center; gap: 30px;
  margin: 10px 0 20px; flex-wrap: wrap;
}
.icon-action {
  background: none; border: none; color: white;
  font-size: 16px; display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-weight: 500;
}
.icon-action svg { width: 22px; height: 22px; fill: white; }

/* Follow-Formular */
#follow-form { display: none; margin: 10px auto 20px; text-align: center; }
#follow-form input {
  padding: 8px 12px; border: none; border-radius: 30px;
  outline: none; font-size: 14px; margin-right: 10px;
}
#follow-form button {
  padding: 8px 16px; border: none; border-radius: 30px;
  background: white; color: black; font-weight: bold; cursor: pointer;
}

/* Bio */
.bio { margin: 10px 0 0; display: flex; justify-content: center; text-align: left; }
.bio-list {
  list-style: none; padding-left: 0; display: flex; flex-direction: column;
  gap: 6px; font-size: 15px; font-weight: 300; color: #ddd; font-family:'Playfair Display',serif;
}

/* Signatur (außerhalb des Glas-Panels) */
.signature {
  display: block;
  margin: 6px 0 22px auto;
  width: 220px;
  opacity: 0.95;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
  transition: transform .25s ease, opacity .25s ease;
}
.signature:hover { opacity: 1; transform: scale(1.05); }

/* =========================
   Social Buttons – schwarz transparent, Icon farbig
   ========================= */
.button-list { display: flex; flex-direction: column; gap: 15px; padding-bottom: 30px; }

.icon-button {
  position: relative;
  display: flex; align-items: center;
  justify-content: flex-start;
  gap: 14px; padding: 14px 56px 14px 20px;
  font-size: 16px; font-weight: 600;
  text-decoration: none; border: none;
  border-radius: 40px;
  color: #fff;
  background: rgba(0,0,0,0.6);
  transition: background .25s ease, transform .15s ease, box-shadow .25s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.icon-button:hover {
  background: rgba(0,0,0,0.8);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.brand-logo { width: 24px; height: 24px; filter: none; margin-left: auto; }

/* Rechts eingefärbtes Icon via CSS-Maske */
.icon-button::after {
  content: "";
  position: absolute;
  right: 20px; top: 50%;
  width: 24px; height: 24px;
  transform: translateY(-50%);
  background-color: transparent;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}

/* Markenlogos als <img> ausblenden, wenn wir ::after nutzen */
.icon-button.onlyfans  .brand-logo,
.icon-button.instagram .brand-logo,
.icon-button.tiktok    .brand-logo,
.icon-button.telegram  .brand-logo,
.icon-button.whatsapp  .brand-logo,
.icon-button.threads   .brand-logo,
.icon-button.bestfans  .brand-logo,
.icon-button.maloum    .brand-logo,
.icon-button.fourbased .brand-logo,
.icon-button.amazon    .brand-logo,
.icon-button.projporn  .brand-logo,
.icon-button.hubzter   .brand-logo {
  display: none;
}

/* === Marken-Masken + Farben === */
.icon-button.onlyfans::after {
  background-color: #00AFF0;
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/onlyfans.svg");
          mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/onlyfans.svg");
}
.icon-button.instagram::after {
  background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg");
          mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg");
}
.icon-button.tiktok::after {
  background-color: #EE1D52;
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/tiktok.svg");
          mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/tiktok.svg");
}
.icon-button.telegram::after {
  background-color: #0088cc;
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/telegram.svg");
          mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/telegram.svg");
}
.icon-button.whatsapp::after {
  background-color: #25D366;
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/whatsapp.svg");
          mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/whatsapp.svg");
}
.icon-button.threads::after {
  background-color: #ffffff;
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/threads.svg");
          mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/threads.svg");
}

/* BestFans – GOLDENE KAMERA (lokale Datei img/camera.svg) */
.icon-button.bestfans::after {
  background-color: #FFD700;
  -webkit-mask-image: url("img/camera.svg");
          mask-image: url("img/camera.svg");
}

/* Maloum – Platzhalter */
.icon-button.maloum::after {
  background-color: #FF9900;
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/square.svg");
          mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/square.svg");
}

/* 4 Based – Hashnode-Icon */
.icon-button.fourbased::after {
  background-color: #00bfa5;
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/hashnode.svg");
          mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/hashnode.svg");
}

/* Amazon */
.icon-button.amazon::after {
  background-color: #FF9900;
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/amazon.svg");
          mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/amazon.svg");
}

/* ProjPorn (Herz) */
.icon-button.projporn::after {
  background-color: #e60073;
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/heart.svg");
          mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/heart.svg");
}

/* Hubzter (Firefox-Flamme) */
.icon-button.hubzter::after {
  background-color: #ff5500;
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/firefox.svg");
          mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/firefox.svg");
}

/* Lightbox */
.lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center; align-items: center;
  z-index: 1000;
}
.lightbox-overlay img { max-width: 90%; max-height: 90%; border-radius: 10px; }
.lightbox-close { position: absolute; top: 20px; right: 30px; font-size: 40px; color: white; cursor: pointer; }
.lightbox-actions { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 20px; z-index: 1001; }
.lightbox-actions .icon-action svg { fill: white; width: 22px; height: 22px; }

/* Einheitliche Schrift */
.name, .location, .bio, .bio li { font-family: 'Playfair Display', serif; }


.icon-action {
  display: flex;
  align-items: center;
  gap: 6px; /* Abstand zwischen Zahl und Icon */
}

.gold-icon {
  filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.7));
}