/* videos.leasing-pilot.de · seitenspezifische Stile (Basis: basis.css) */

/* Hero */
.vhero { padding: 80px 0 200px; }
.vhero__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.vhero__rechts { padding-bottom: 6px; }
.vhero__rechts .hero__text { margin-top: 0; }
.vhero__trias { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Bühne: Player + Details, überlappt den Hero */
.buehne { position: relative; z-index: 2; margin-top: -136px; }
.buehne__raster { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: stretch; }
.player {
  align-self: start;
  padding: 10px;
  border-radius: 16px;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  box-shadow: var(--schatten-fenster);
}
.player video {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: var(--r-mittel);
  background: var(--ink);
}

.details { align-self: start; padding: 30px 30px 30px 34px; }
.detail { animation: detail-ein .35s var(--kurve) both; }
.detail[hidden] { display: none; }
@keyframes detail-ein { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .detail { animation: none; } }
.detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.detail__dauer { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1 var(--text); color: var(--label); font-variant-numeric: tabular-nums; }
.detail__dauer .icon { font-size: 17px; color: var(--icon); }
.detail__titel { margin-top: 18px; font: 700 26px/1.2 var(--kopf); letter-spacing: -.015em; color: var(--ink); }
.detail__text { margin-top: 14px; color: var(--link2); }
.detail__label { margin-top: 24px; color: var(--blau-dunkel); }
.detail__liste { margin-top: 14px; gap: 10px; }
.detail__liste li { line-height: 1.45; padding-top: 2px; }
.player__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 8px 4px 10px; }
.player__weiter { min-height: 44px; padding: 10px 18px; line-height: 1.35; font-size: 15px; cursor: pointer; text-align: left; }
.player__weiter[hidden] { display: none; }

/* Videoliste: 6er-Raster, oben drei Karten, unten zwei breitere */
.vliste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
.vliste > li { grid-column: span 2; display: flex; }
.vliste > li:nth-child(n+4) { grid-column: span 3; }
.vkarte {
  position: relative;
  display: flex; flex-direction: column; width: 100%;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten);
  color: var(--ink); text-decoration: none;
  overflow: hidden;
  transition: transform .25s var(--kurve), box-shadow .25s var(--kurve), border-color .25s var(--kurve);
}
.vkarte::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; z-index: 2;
  background: var(--blau);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .3s var(--kurve);
}
.vkarte:hover { transform: translateY(-3px); box-shadow: var(--schatten-fenster); border-color: var(--hellblau); }
.vkarte[aria-current="true"] { border-color: var(--blau); box-shadow: 0 0 0 1.5px var(--blau), var(--schatten); }
.vkarte[aria-current="true"]::before { transform: scaleY(1); }
.vkarte:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vkarte, .vkarte::before { transition: none; } .vkarte:hover { transform: none; } }

.vkarte__bild { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.vkarte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--kurve); }
.vkarte:hover .vkarte__bild img { transform: scale(1.03); }
.vkarte__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 30, 46, 0) 55%, rgba(5, 30, 46, .45) 100%); pointer-events: none; }
.vkarte__play {
  position: absolute; right: 12px; top: 12px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--blau);
  box-shadow: 0 8px 24px rgba(5, 30, 46, .25);
  font-size: 19px;
  transition: transform .25s var(--kurve), background-color .25s var(--kurve), color .25s var(--kurve);
}
/* Ecke je Poster so gewählt, dass kein Postertext verdeckt wird */
.vkarte__play--links { right: auto; left: 14px; }
.vkarte__play .icon { fill: currentColor; stroke-width: 1.5; margin-left: 3px; }
.vkarte:hover .vkarte__play, .vkarte:focus-visible .vkarte__play { transform: scale(1.08); background: var(--blau); color: var(--weiss); }
.vkarte__dauer, .vkarte__status {
  position: absolute; bottom: 12px; z-index: 1;
  padding: 4px 10px; border-radius: var(--r-klein);
  font: 500 14px/1.2 var(--text); font-variant-numeric: tabular-nums;
}
.vkarte__dauer { right: 12px; background: rgba(5, 30, 46, .82); color: var(--weiss); }
.vkarte__status { left: 14px; display: none; background: var(--blau); color: var(--weiss); }
.vkarte[aria-current="true"] .vkarte__status { display: block; }
.vkarte__text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 26px 26px; }
.vkarte__titel { font: 600 20px/1.3 var(--kopf); letter-spacing: -.01em; color: var(--ink); }
.vkarte__kurz { color: var(--link2); font-size: 16px; line-height: 1.55; }

/* Abschlussband */
.band {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 28px 48px;
  padding: 52px 56px;
  border-radius: var(--r-gross);
  background:
    radial-gradient(ellipse 60% 90% at 85% 20%, rgba(21, 123, 187, .30) 0%, rgba(21, 123, 187, 0) 70%),
    var(--ink);
  box-shadow: var(--schatten-fenster);
}
.band .h2 { margin-top: 8px; }
.band .einleitung { margin-top: 12px; color: var(--blau-auf-dunkel); }
.band__aktionen { display: flex; flex-wrap: wrap; gap: 14px; }

/* Responsiv */
@media (max-width: 1199px) {
  .vhero { padding: 64px 0 180px; }
  .buehne__raster { grid-template-columns: minmax(0, 1fr); }
  .vliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vliste > li, .vliste > li:nth-child(n+4) { grid-column: span 1; }
  .vliste > li:last-child { grid-column: 1 / -1; }
  /* schmalere Karten: Play-Knopf kleiner und näher an die Ecke, damit er keinen Postertext berührt */
  .vkarte__play { width: 40px; height: 40px; top: 8px; right: 8px; font-size: 16px; }
  .vkarte__play--links { right: auto; left: 10px; }
  .vliste > li:last-child .vkarte { flex-direction: row; }
  .vliste > li:last-child .vkarte__bild { flex: 0 0 50%; aspect-ratio: auto; min-height: 100%; }
  .vliste > li:last-child .vkarte__text { justify-content: center; }
  .band { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 899px) {
  .vhero__raster { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 767px) {
  .player__weiter { border-radius: var(--r-gross); }
  .vhero { padding: 44px 0 132px; }
  .buehne { margin-top: -100px; }
  .player { padding: 6px; border-radius: 12px; }
  .player video { border-radius: 8px; }
  .details { padding: 24px 22px 22px 26px; }
  .detail__titel { font-size: 23px; }
  .vliste { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
  .vliste > li:last-child { grid-column: auto; }
  .vliste > li:last-child .vkarte { flex-direction: column; }
  .vliste > li:last-child .vkarte__bild { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .vkarte__text { padding: 20px 22px 22px; }
  .band { padding: 36px 24px; }
  .band__aktionen { width: 100%; }
}