/* =========================================================================
   Link in Bio – Streamer One-Pager
   Farbwelt: kaltes Dunkelblau-Grau + Neon-Pink Akzente
   Mobile-first; Desktop-Layout ab 860px via Media-Query.
   ========================================================================= */

:root {
  /* Hintergrund */
  --bg:            #0A0E1A;
  --bg-mid:        #141824;
  --bg-deep:       #070A12;

  /* Akzente */
  --pink:          #FF1B8D;
  --pink-2:        #FF3DAE;
  --pink-live:     #FF2D6E;
  --violet:        #7B2FBF;

  /* Text */
  --text:          #D4D8E0;
  --text-hi:       #F4F5FA;
  --text-mid:      #AEB4C6;
  --text-soft:     #B9BFD0;
  --text-dim:      #8891A8;
  --text-faint:    #5B6178;
  --text-white:    #FFFFFF;

  /* Karten / Panels */
  --card-bg:       rgba(20, 24, 40, 0.55);
  --card-border:   rgba(255, 61, 174, 0.18);
  --panel-border:  rgba(255, 61, 174, 0.14);

  /* Partikelfarben */
  --particle-pink:  rgba(255, 61, 174, 0.9);
  --particle-lilac: rgba(200, 180, 255, 0.85);

  /* Fonts */
  --font-body:     'Manrope', system-ui, sans-serif;
  --font-display:  'Sora', sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--pink-2); text-decoration: none; }
a:hover { color: var(--pink); }

/* =========================================================================
   Hintergrundebene (fixiert, hinter dem Inhalt)
   ========================================================================= */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% -10%,
              var(--bg-mid) 0%, var(--bg) 60%, var(--bg-deep) 100%);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.blob--a {
  top: -15%; left: -20%;
  width: 70vw; height: 70vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(255, 27, 141, 0.38), rgba(255, 27, 141, 0) 65%);
  animation: blobA 22s ease-in-out infinite;
}
.blob--b {
  bottom: -20%; right: -15%;
  width: 75vw; height: 75vw; max-width: 640px; max-height: 640px;
  background: radial-gradient(circle, rgba(123, 47, 191, 0.42), rgba(123, 47, 191, 0) 65%);
  filter: blur(70px);
  animation: blobB 26s ease-in-out infinite;
}
.blob--c {
  top: 35%; left: 30%;
  width: 55vw; height: 55vw; max-width: 480px; max-height: 480px;
  background: radial-gradient(circle, rgba(255, 61, 174, 0.22), rgba(255, 61, 174, 0) 65%);
  animation: blobC 30s ease-in-out infinite;
}

.streak {
  position: absolute;
  top: -40%;
  height: 200vh;
  transform: rotate(24deg);
}
.streak--a {
  left: 20%; width: 140px;
  background: linear-gradient(90deg, rgba(255, 61, 174, 0) 0%, rgba(255, 61, 174, 0.10) 50%, rgba(255, 61, 174, 0) 100%);
  animation: streakDrift 24s ease-in-out infinite;
}
.streak--b {
  right: 10%; width: 90px;
  background: linear-gradient(90deg, rgba(123, 47, 191, 0) 0%, rgba(123, 47, 191, 0.12) 50%, rgba(123, 47, 191, 0) 100%);
  animation: streakDrift 30s ease-in-out infinite reverse;
}

.particles { position: absolute; inset: 0; }
.particle {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 61, 174, 0.8);
  animation: particle var(--dur) ease-in-out var(--delay) infinite;
}

.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, rgba(10, 14, 26, 0) 55%, rgba(7, 10, 18, 0.75) 100%);
}

/* =========================================================================
   Seiten-Container
   ========================================================================= */
.page {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 480px;
  padding: 56px 22px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================================================================
   Header / Hero
   ========================================================================= */
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  margin-bottom: 0;
}

.avatar-wrap {
  position: relative;
  flex: none;
  animation: floatIn 0.7s ease both;
}

.avatar-ring {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  animation: ringPulse 3.2s ease-in-out infinite;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: #0E1120;
  background-image: repeating-linear-gradient(45deg, #141a2e 0 10px, #10152440 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: #5a6178;
  font-weight: 600;
}

.live-badge {
  position: absolute;
  bottom: 4px;
  right: -4px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(12, 15, 26, 0.85);
  border: 1px solid rgba(255, 45, 110, 0.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 16px rgba(255, 45, 110, 0.5);
}
.live-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink-live);
  animation: livePulse 1.4s ease-in-out infinite;
}
.live-badge__text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-white);
}

.header-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 22px;
}

.name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.5px;
  line-height: 1.05;
  color: var(--text-hi);
  text-shadow: 0 0 18px rgba(255, 27, 141, 0.55), 0 0 40px rgba(255, 27, 141, 0.3);
}

.handle {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--pink-2);
}

.bio {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-mid);
  text-wrap: pretty;
  max-width: 320px;
}

/* =========================================================================
   Body-Grid (Links + Info-Panels)
   ========================================================================= */
.body-grid {
  width: 100%;
  margin-top: 32px;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  height: 100%;
}

/* ---- Link-Karten ---- */
.card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 13px 18px;
  border-radius: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  color: #E8EAF0;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: floatIn 0.6s ease both;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 34px rgba(255, 27, 141, 0.4);
  border-color: rgba(255, 61, 174, 0.7);
}

/* Gestaffelte Einblende-Verzögerungen */
.card--twitch    { animation-delay: 0.20s; }
.card--youtube   { animation-delay: 0.26s; }
.card--discord   { animation-delay: 0.32s; }
.card--kofi      { animation-delay: 0.38s; }
.card--instagram { animation-delay: 0.44s; }

/* Twitch-Karte: hervorgehobener Look NUR im Live-Zustand (body.is-live).
   Offline verhält sie sich wie ein normaler Button (erbt von .card). */
body.is-live .card--twitch {
  background: linear-gradient(135deg, rgba(123, 47, 191, 0.30), rgba(255, 27, 141, 0.22));
  border: 1px solid rgba(255, 61, 174, 0.55);
  box-shadow: 0 0 28px rgba(255, 27, 141, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.is-live .card--twitch:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 42px rgba(255, 27, 141, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 61, 174, 0.9);
}

.card__icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 61, 174, 0.08);
  border: 1px solid rgba(255, 61, 174, 0.22);
  color: #E8EAF0;
}
/* Twitch-Icon leuchtet nur im Live-Zustand pink */
body.is-live .card__icon--twitch {
  background: rgba(255, 27, 141, 0.16);
  border: 1px solid rgba(255, 61, 174, 0.4);
  color: var(--pink-2);
  box-shadow: 0 0 14px rgba(255, 27, 141, 0.4);
}

.card__text { flex: 1; min-width: 0; }
.card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-white);
}
.card__sub {
  display: block;
  font-size: 12.5px;
  color: var(--text-mid);
  margin-top: 2px;
}
/* etwas hellerer Untertitel nur im Live-Zustand */
body.is-live .card__sub--bright { color: #C9CDDC; }

.card__arrow { color: var(--text-dim); }
/* pinker Pfeil nur im Live-Zustand */
body.is-live .card__arrow--twitch { color: var(--pink-2); }

/* =========================================================================
   Info-Panels
   ========================================================================= */
.panels {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  width: 100%;
  margin-top: 14px;
}

.panel {
  background: var(--card-bg);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 26px 28px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.panel--grow { flex: 1; }

.panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.panel__head--wide { margin-bottom: 16px; }

.panel__bar {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(var(--pink), var(--violet));
  box-shadow: 0 0 10px rgba(255, 27, 141, 0.6);
}
.panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.3px;
  color: var(--text-hi);
}
.panel__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-soft);
  text-wrap: pretty;
}
.panel__text--sm {
  font-size: 14.5px;
  line-height: 1.6;
}

/* nur auf Desktop sichtbarer Fülltext in der Link-Spalte */
.filler-panel {
  display: none;
  margin-top: 4px;
  flex: 1;
  flex-direction: column;
}

/* ---- Tags ---- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.tag {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pink-2);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 27, 141, 0.10);
  border: 1px solid rgba(255, 61, 174, 0.3);
}

/* ---- Stream-Zeiten ---- */
.schedule {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.schedule__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.schedule__row--divided {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.schedule__day {
  color: var(--text);
  font-weight: 600;
}
.schedule__time {
  color: var(--pink-2);
  font-family: var(--font-display);
  font-weight: 600;
}
.schedule__time--off { color: var(--text-dim); }

/* ---- FAQ ---- */
.faq {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq__q {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-hi);
}
.faq__a {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
}

/* =========================================================================
   Footer
   ========================================================================= */
.footer {
  margin: 36px 0 0;
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}
.footer__heart { color: var(--violet); }

/* =========================================================================
   Desktop-Layout (ab 860px)
   ========================================================================= */
@media (min-width: 860px) {
  .page {
    max-width: 1040px;
    padding: 72px 32px 52px;
  }

  .header {
    flex-direction: row;
    gap: 40px;
    margin-bottom: 44px;
  }

  .avatar-ring { width: 200px; height: 200px; }

  .header-text {
    align-items: flex-start;
    text-align: left;
    margin-top: 0;
  }

  .name { font-size: 52px; }
  .bio  { font-size: 16px; max-width: 440px; }

  .body-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    margin-top: 4px;
    align-items: start;
  }

  .filler-panel { display: flex; }

  .panels {
    gap: 18px;
    margin-top: 0;
  }
}

/* =========================================================================
   Reduzierte Bewegung respektieren
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================
   Keyframes
   ========================================================================= */
@keyframes blobA {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.15); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes blobB {
  0%   { transform: translate(0, 0) scale(1.1); }
  50%  { transform: translate(-50px, 40px) scale(1); }
  100% { transform: translate(0, 0) scale(1.1); }
}
@keyframes blobC {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, 50px) scale(1.2); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes streakDrift {
  0%   { transform: translate(-10%, -10%) rotate(24deg); }
  50%  { transform: translate(10%, 10%) rotate(24deg); }
  100% { transform: translate(-10%, -10%) rotate(24deg); }
}
@keyframes ringPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 27, 141, 0.55),
                0 0 22px 4px rgba(255, 27, 141, 0.45),
                inset 0 0 12px rgba(255, 27, 141, 0.25);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 27, 141, 0),
                0 0 40px 10px rgba(255, 27, 141, 0.6),
                inset 0 0 16px rgba(255, 27, 141, 0.35);
  }
}
@keyframes livePulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 45, 110, 0.7); }
  50%      { transform: scale(1.25); box-shadow: 0 0 0 7px rgba(255, 45, 110, 0); }
}
@keyframes particle {
  0%   { transform: translateY(0) scale(1);      opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(-120px) scale(0.4); opacity: 0; }
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   LIVE-Umschalter (unsichtbare Checkbox) + hidden-Badge
   ========================================================================= */

/* Badge im hidden-Zustand sicher ausblenden (überstimmt display:flex) */
.live-badge[hidden] { display: none; }

/* Unsichtbare, klickbare Ecke oben links – nur zum manuellen Umschalten */
.live-toggle {
  position: fixed;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: default;
  z-index: 100;
}

/* =========================================================================
   Showcase: Highlights (YouTube-Embeds) + Clip-Reel (Video)
   ========================================================================= */
.showcase {
  width: 100%;
  margin-top: 44px;
}

/* Abschnitts-Überschrift mit Neon-Balken */
.section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.section-head--spaced { margin: 36px 0 22px; }

.section-head__bar {
  width: 4px;
  height: 24px;
  border-radius: 2px;
  background: linear-gradient(var(--pink), var(--violet));
  box-shadow: 0 0 12px rgba(255, 27, 141, 0.7);
}
.section-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.2px;
  color: var(--text-hi);
  text-shadow: 0 0 16px rgba(255, 27, 141, 0.4);
}

/* Grid der Highlight-Kacheln: mobil 1 Spalte, Desktop 3 (s. Media-Query) */
.highlights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

/* Facet-Kachel mit abgeschrägten Ecken + Neon-Rand */
.facet-tile {
  --facet: 16px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    var(--facet) 0, calc(100% - var(--facet)) 0,
    100% var(--facet), 100% calc(100% - var(--facet)),
    calc(100% - var(--facet)) 100%, var(--facet) 100%,
    0 calc(100% - var(--facet)), 0 var(--facet)
  );
  background: rgba(20, 24, 40, 0.6);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  transition: transform .25s ease, box-shadow .25s ease;
}
.facet-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 38px rgba(255, 27, 141, 0.5);
}
.facet-tile--clip:hover {
  box-shadow: 0 0 44px rgba(255, 27, 141, 0.55);
}

/* Leuchtender Gradient-Rand entlang der abgeschrägten Form (Mask-Trick) */
.facet-tile__edge {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  clip-path: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg,
    rgba(255, 61, 174, 0.9),
    rgba(123, 47, 191, 0.5) 40%,
    rgba(255, 61, 174, 0.15) 60%,
    rgba(255, 61, 174, 0.8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Dezenter Glanz-Overlay */
.facet-tile__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0) 78%,
    rgba(123, 47, 191, 0.20) 100%);
}

/* 16:9-Mediencontainer für iframe/video */
.facet-tile__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.facet-tile__media--clip { background: var(--bg); }

.facet-tile__media iframe,
.facet-tile__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.facet-tile__media video { object-fit: cover; }

/* Titelzeile unter dem Highlight */
.facet-tile__caption { padding: 14px 16px; }
.facet-tile__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-hi);
}

/* Desktop: Highlights in 3 Spalten */
@media (min-width: 860px) {
  .highlights-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}