.shell {
  width: 100%;
  max-width: 1400px;      /* ab hier wird gedeckelt */
  margin-inline: auto;    /* zentriert auf der Seite */
  padding-inline: 1.5rem; /* etwas Abstand links/rechts auf kleineren Screens */
}

/* Player mit Rahmen & (jetzt hellem) Rahmen */
.player-card {
  background: radial-gradient(circle at top left, #eee, #fff 60%);
  border-radius: 1.25rem;
  padding: 1rem;
  border: 2px solid rgba(255, 255, 255, 1); 
  box-shadow: 0 24px 60px rgba(333, 333, 333, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.video-frame {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: #aaaaaa;
  border: 1px solid rgba(205, 205, 205, 1); 
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 1); /* heller Rahmen */
  isolation: isolate;
}

/* feiner Innenrahmen, auch hell */
.video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255, 255, 255, 1);
  pointer-events: none;
}

/* Video (Poster) leicht heller am Anfang */
.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(1.08);              /* leicht aufgehellt */
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* Hover: Bild noch heller + ganz leichtes Zoomen */
.video-frame:hover video {
  filter: brightness(1.18);
  transform: scale(1.01);
}

/* Play-Button in der Mitte, mit hellem Hover */
.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.6));
  cursor: pointer;
  font-size: 3rem;
  color: white;
  z-index: 2;
}

.play-overlay:hover {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.75));
}

@media (max-width: 1400px) {
  .player-card { width: 100%; padding: 20px; }
}
@media (max-width: 991px) {
  .player-card { width: 100%; padding: 0px; border-radius:1rem;}
  .video-frame { box-shadow: 0 12px 20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 1);
}
@media (max-width: 767px) {
  .player-card { width: 100%; padding: 0px; border-radius: 0.5rem; }
  .shell {width: 100%; max-width: 100%;  margin-inline: ´´auto; padding-inline: 0rem } 
  .video-frame { box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 1);
}