/* theme-wi-video_v4.css — Video panels sizing + frame (Wüstenrot) */

/* Defaults (anpassbar) */
.process-tabs{ --media-col: 600px; --media-max: 100%; }
/* Beispiel-Abweichung: Schritt 3 größer */
#step-3{ --media-col: 700px; }

/* Grid-Override NUR in der Prozess-Sektion (stärker + !important) */
.process-tabs .grid.grid-2{
  grid-template-columns: var(--media-col) 1fr !important;  /* Video | Text */
}
@media (max-width: 1024px){
  .process-tabs .grid.grid-2{ grid-template-columns: 1fr !important; }
}

/* Fallback falls Grid-Klasse leicht abweicht */
.process-tabs [data-panel] > .grid{
  grid-template-columns: var(--media-col) 1fr;
}

/* 16:9 Medienrahmen */
.media16x9{
  position: relative;
  width: min(100%, var(--media-max));
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.media16x9 > video{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}

/* Luft zum Text */
.process-tabs [data-panel] .media16x9{ margin-bottom: 12px; }
@media (min-width: 980px){
  .process-tabs [data-panel] .media16x9{ margin-bottom: 0; }
}


/* === Width Enforcement (moved from inline to external) ===
   Stelle die Videokachel-Breite nur hier ein: */
:root{ --video-col: 720px; } /* <== Breite anpassen */

@media (min-width: 980px){
  .process-tabs [data-panel] .grid,
  .process-tabs .panel .grid.grid-2{
    display:grid !important;
    align-items:start !important;
    grid-template-columns: var(--video-col) 1fr !important;
  }
  .process-tabs [data-panel] .grid > :first-child{
    width: var(--video-col) !important;
    max-width: var(--video-col) !important;
    min-width: 0 !important;
  }
  .process-tabs [data-panel] .grid > :first-child *,
  .process-tabs [data-panel] .grid > :first-child .media16x9,
  .process-tabs [data-panel] .grid > :first-child video{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
  }
  .process-tabs .media16x9{ aspect-ratio:16/9; }
}