/* =========================
   GLOBAL
========================= */

body {
  margin: 0;
  background: black;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* Scrollbar ausblenden (optional, wie bei dir) */
::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* =========================
   VIDEO CONTAINER
========================= */

.video-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;

  width: 100%;
  padding: 20px;

  transition: padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================
   VIDEO ITEMS
========================= */

.video-item {
  flex: 1 1 160px;
  max-width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;
}

.video-item.small  { flex-grow: 1; }
.video-item.medium { flex-grow: 1.4; }
.video-item.big    { flex-grow: 2; }

video {
  width: 100%;
  height: auto;
  display: block;
}

#eyeextra {
  filter: invert(100%);
}

/* =========================
   VIDEO LABELS
========================= */

.video-label {
  margin-top: 8px;
  font-size: 0.9rem;
  color: white;

  opacity: 0.7;
  letter-spacing: 0.05em;

  transition: opacity 0.2s ease;
}

.video-item:hover .video-label {
  opacity: 1;
}

/* =========================
   RESPONSIVE BREAKPOINTS
========================= */

@media (max-width: 1200px) {
  .video-item {
    flex: 1 1 30%;
  }
}

@media (max-width: 900px) {
  .video-item {
    flex: 1 1 45%;
  }
}

/* =========================
   HANDY / HOCHKANT
========================= */

@media (max-width: 600px), (max-aspect-ratio: 3/4) {
  .video-row {
    flex-direction: column;
    align-items: center;
  }

  .video-item {
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
  }
}

/* =========================
   ARTIST LOGO – VARIANTE A
========================= */

.artist-logo {
  position: fixed;
  top: 24px;
  right: 32px;
  z-index: 1000;

  /* Transform-System */
  --tx: 0px;
  --ty: 0px;

  transform: translate(var(--tx), var(--ty));

  cursor: pointer;
}

/* =========================
   LOGO BILD – BASIS
========================= */

.artist-logo img {
  width: clamp(180px, 20vw, 300px);
  height: auto;

  opacity: 1;
  filter: brightness(90%);

  transition:
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.25s ease,
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover */
.artist-logo:hover img {
  filter: brightness(100%) drop-shadow(0 0 12px rgba(255,255,255,0.35));
}

/* =========================
   VERTIKALE VIDEO-ANSICHT
========================= */

.artist-logo.vertical {
  right: 50%;
  --tx: 50%;
}

.artist-logo.vertical img {
  width: 66vw;
  max-width: none;
}

/* Platz unter Logo für Videos */
.artist-logo.vertical ~ .video-row {
  padding-top: calc(66vw * 0.6);
}

/* =========================
   SCROLL-ZUSTAND
========================= */

.artist-logo.logo-small {
  --ty: -16px;
}

.artist-logo.logo-small img {
  width: 44vw;
}

/* Kombiniert: vertikal + scroll */
.artist-logo.vertical.logo-small img {
  width: 44vw;
}

.artist-logo.vertical.logo-small ~ .video-row {
  padding-top: 96px;
}