/** EREL: mit Hilfe von deepseek optimiert am 21.04.2025
 */

* {
  box-sizing: border-box; /* Padding/Margin in Breite inkludieren */
}


/* body: original Code auskommentirt */
body::-webkit-scrollbar
{
   width: 10px;
}


/* folgender Code aus OSK entnommen */
/* ### .haupt:  erstellt Rahmen um das Ganze ### */
.haupt {border:solid 1px #FF0000;}


}

.container #main-Video
{
    position: relative;
    width: 100%;    /* erel, original wert: 100% */ 
    height: 470px;  /* erel, original wert: 470px */
    overflow: hidden;
    outline: none;
}

.playlistBx
{
    position: middle; /* erel, original wert: relative */
    height: 100%;       /* erel, original wert: 100% */
    margin: 50 10px 325 295px;   /* erel, original wert: 0 10px 0 10px */
    /* Y1/x1 ; Y2/X2 */ 
    /* Y1=50: Höhen-Verstellung (Abstand zwischen Listenfeld und Videoframe),*/ 
    /* X1=10px:  ??? weiß nicht wofür */
    /* Y2=300: Höhen-Verstellung, X2=100px: Listenfeld-Abstand zum linken Rand */
    /*border: 1px solid green;*/
}
.playlist
{
    position: absolute;
    width: 30%;      /* erel, original wert: 100%, bestimmt die Breite des Listenfeldes! */
/*    height: calc(100% - 45px);  /* erel, original wert: 100% - 40px */
    height: 300px;  /* erel: bestimmt die Höhe des Listenfeldes */
    overflow-y: scroll;
    border-top: 1px solid #dcdee1;
}
.playlist::-webkit-scrollbar /*erel, alternativen: scrollbar-button, track, track-piece, thumb, corner  */
{
   width: 0px;
}
.playlistBx .row .AllLessons  /* "6 Lessons", AllLessons ersetzt durch OSK */
{
   display: block;
   text-align: left; /*erel: ändert die Position von "Lessons" */
   color: #FFFF00;  /*erel: code für gelb: #FFFF00, original code war: #dcdee1*/
   font-size: 20px; /* erel, original wert: 15px -> ändert Textgröße von "6 Lessons = Summe alle Videos!" */
   font-weight: 70; /* erel, original wert: 700, ändert vermutlich die Intensität der Textfarbe */
   margin-left: 5px; /* erel, original wert: 40px, ändert den linken Rand von "Lessons" */
   line-height: 10px; /* erel, original wert: 40px, ändert den Abstand von "Lessons" nach unten hin */
}


.playlist li
{
   display: flex;
   justify-content: space-between;
   align-items: center;   /*erel, original wert: center */
   list-style: none;
   color: #dcdee1;  /*erel: code für gelb: #FFFF00, original code war: #dcdee1*/
   cursor: pointer;
   border: 1px solid transparent;
   padding: 15px 5px;     /*erel, original wert: 15px 20px */
   border-radius: 5px;
}


.playlist li:hover
{
    border: 0.5px solid #f75543;  /* erel, original wert: 0.5px solid #375666 (alternativen: #f75543, #a32e21) */
}


.playlist li .row span  /*erel: mit color kann man die Farbe der VideoLinks (Listenfelder) ändern  */
{
    font-size: 15px;  /*erel: ändert die Textgröße von den Listenelementen (Videonamen)  */
    font-weight: 400;
    color: #dcdee1;   /* erel, code für gelb: #FFFF00, gold: #FFC125, abgewandelte gelb: #b8b51a, cyan: #00FFFF, abgewandelte cyan: #00E5EE weiss: #ffffff, original wert: #dcdee1 */
    text-decoration: none;
    display: inline-block;
    text-align: left;
}


.playlist li .row span::before
{
    content: '\f01d';
    font-family: FontAwesome; /* durch "FontAwesome" bekommt das Listenfeld die Icons play/pause. Ist in html über "rel="stylesheet"" deklariert */
    color: #dcdee1;
    margin-right: 15px; /*Abstand zwischen play/pause icon und Videolink */
    font-size: 20px;  /*erel: ändert die Aufzählungszeichengröße  */
}


ul li.playing .row span::before
{
    content: '\f28c';
    font-family: FontAwesome;
    color: #fff;
    margin-right: 15px;
    font-size: 15px;  /*erel: ändert nur die erste Aufzählungszeichengröße  */
}


.playlist li.playing .row span
{
   color: #ff0; /*erel: ändert die Schriftfarbe von der Liste (Videonamen)  */
   /*original: #fff, erel: #ff0=gelb */
}


.playlist li span.duration
{
    font-size: 15px;
    font-weight: 400;
    display: inline-block;
    color: #dcdee1;
    text-align: right;
}


.playlist li.playing  /*erel: bewirkt die Grundfarbe der aktiven Video in der Liste */
{
   pointer-events: none;
   background: #1d3541;
   border: 0.5px solid #1d3541;
}

/*EREL. 21.04.2025: vorübergehend auskommentiert!*/
/*
@media(max-width: 1092px){  /*original wert: 1092px. Note: Videogrösse konnte ich nur in html ändern :-) 
    section
    {
        padding: 30px 10px;
    }
*/

/*EREL. 21.04.2025: Mit Hilfe von deepseek eingefügt*/
/* Mobile First Approach */
@media (max-width: 1092px) {
  .container {
    padding: 10px;
    width: 100vw;	/*EREL: Wert war 100vw -> Fehler!? */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  #main-Video {
    width: 100% !important;
    height: auto;
    aspect-ratio: 16/9; /* Video-Proportionen erhalten */
  }
  

/* Dein bestehender Code + diese Ergänzungen */
.playlistBx {
  /*background: rgba(29, 53, 65, 0.7);*/
  border-radius: 8px;
  margin: 0 auto 0;	/*EREL: Abstand Oben L+R Unten  */
  padding: 5px;
  height: 50vh;    /*EREL: der Wert '50vh" muß dem Wert von '.playlist' -> calc(50vh... entsprechen! Sonst passt es nicht */
  overflow-y: auto;    /* Neu */
  width: 100%;         /* Sicherstellen */
}

.playlist {
  position: center;	/*EREL, 21.04.2025: Wert war "absolute;" */
  width: 100%;
  height: calc(50vh - 30px); /* Abzgl. Padding/Header */
  overflow-y: auto;
}

  
}

}

@media(max-width: 650px){
    #main-Video
    {
        height: 300px !important;   /*original wert: 300px */
    }
}
@media(max-width: 500px){
    #main-Video
    {
        height: 280px !important;
    }
}
@media(max-width: 400px){
    #main-Video
    {
        height: 250px !important;
    }
}