/* bestSongs.css 

   tech-Stand as of: 08.06.2025 
  Log: ---
  05.05.2025 - AutoPlay  fixed 
  06.05.2025 - icon in Reiter
  18.05.2025 - copy rights *)
  20.05.2025 - Frames + Channels formats
  26.05.2025 - logo with contour + Navi Section in Video Frame
  04.06.2002 - @stanihell_tiktok + Orange Outline on track Select + Header
  05.06.2025 - Oleg mobile view
  08.06.2025 - Song list container ( video Frame auf %: 55% + 33%
  -->
*/


body {
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  background-color: #f4f7fa; /* gray light blue */
  color: #333;
  display: flex;
  // padding-right: 340px; /* Adjust based on the width of the "Now Playing" section */
}

img[src*="logo"] { /* Adjust the selector based on your actual logo image */
  max-width: 100px; /* Adjust this value to your desired width */
  height: auto; /* Maintain aspect ratio */
  
  object-fit: cover; /* Stellt sicher, dass das Bild den Container ausfüllt, ohne sich zu verzerren */
  border-radius: 50%; /* Macht das Bild zu einem Kreis (50% bedeutet perfekter Kreis bei quadratischem Bild) */
}

.header_container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 280px; /* 26% */
  min-height: 50px; /* Mindesthöhe statt fester Höhe */
  padding: 10px 20px;
  background-color: #f0f4f8; /* Neue Hintergrundfarbe */
  z-index: 1000;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  
  justify-content: flex-start; /* Explizit statt 'left' */
  gap: 10px;
  overflow: hidden; /* auto = Verhindert Abschneiden bei zu viel Inhalt */
  
  align-items: flex-start; /* Alte Ausrichtung für Kompatibilität */
  //align-items: center;  // ist bei Oleg anders
}

// Problem: Don't remove and change !  Correct on same 

/* OLEG:  
.header_container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 280px;
  padding: 10px 20px;
  background-color: #f0f4f8; // Helle Hintergrundfarbe wie im Bild 
  z-index: 1000; // Sicherstellen, dass es über anderen Inhalten liegt 
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
*/

.logo_container {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100px;
}
.info_container {
  font-size: 0.9em;
  line-height: 1.4;
  text-align: left;
  padding: 20px;
  width: 100%;
}

/* List of Songs : Anpassung für song_list_container, um Überlappung zu vermeiden */
.song_list_container {
  max-width: 54%; /* SIZE of song_list_container: 2K+FullHD= 55% */
  margin-top: 235px; /* Abstand zu Top Header */
  padding: 20px;
  margin-right: 20px;
  margin-top: 250px;
  box-sizing: border-box;
  position: relative; /* Sicherstellen, dass es nicht durch fixed position beeinflusst wird */
}

/* Aktualisierte CSS für Video-Fenster */
.video-frame {
  max-width: 100%; /* Anpassung an Container-Breite */
  //height: auto; /* Automatische Höhenanpassung */
  
  aspect-ratio: 5 / 3; /* Standard-Seitenverhältnis für YouTube-Videos */

  position: relative;
  
  //width: 100%;
  //max-width: 100%; /* Passt sich der Breite des Containers an */
  //aspect-ratio: 16 / 9; /* Standard-Seitenverhältnis für YouTube-Videos */
  //margin: 0 auto; /* Zentriert das Video */
}
.video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
  
/* Styling für den Now Playing-Abschnitt = big container  ex.: now-playing */
/*   old : springt ! Kein ruhiges [Next] möglich!
.video-big-container {

	//position: fixed; // Fixierte Position: erzeugt Springen des Video-Frames und Knöpfe 
	display: flex; // Flexbox für bessere Kontrolle über den Inhalt 
	flex-direction: column; // Vertikale Anordnung 
	 
	z-index: 1000; // Ensure it stays on top of other elements 

	overflow-x: hidden; // Verhindert horizontales Überlaufen 
	overflow-y: auto; // Ermöglicht vertikales Scrollen bei Bedarf 
	
	background-color: #f0f0f0; // Hintergrundfarbe gray 
	padding: 10px; // Innenabstand 
	border: 1px solid #ccc; // Rahmen 
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

	//width: auto; // Automatische Anpassung an den Inhalt 
	//max-width: 600px; // Maximale Breite, die sich automatisch anpasst 
	min-width: 400px; 
	max-width: 33%; // SIZE of video-big-container container 
	//width: 33%;

	//hight: auto;
	min-hight: 500px;
	//max-hight: 700px;
	max-hight: 500px;
	
	top: 20px; // top Position anpassen 
	margin-top: 150px;
	
	//margin-right:720px;
	right: 210px; // right Position anpassen 
	
	margin-bottom: 200px;
}
*/

/* New: grok3 */
.video-big-container {
    display: flex;
    flex-direction: column;
    position: fixed; /* Fixed position to prevent shifting */
	
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	
    //min-width: 400px;
	min-width: 33%;
    max-width: 33%;
	
	min-hight: 500px;
    max-height: 700px; /* Enforce max height */
	//max-height: 60%; /* Enforce max height: it makes a scrool-bar on oversize */
	
    top: 20px; /* Fixed top position */
    right: 210px; /* Fixed right position */
}

#now-playing-title {
  font-size: 16px;
  text-align: left;
  color: darkblue;
}


.eye-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  margin-left: 10px;
  margin-bottom: 10px;
}

.trackListEntrySelected {
  background-color: #d3e3f1;
  /*border-bottom: 4px solid #ff6200;  Dicke orange Linie unten */
   outline: 4px solid #ff6200; /* Dicke orange Linie um das gesamte Element */
}
.track-list li {
  padding: 10px;
  margin-bottom: 5px;
}

h1, h2, h3 {
  color: #2e4a62;
}
ul {
  list-style-type: none;
  padding-left: 0;
}
.song-title {
  cursor: pointer;
  color: #50025e;
  text-decoration: none;
}
.song-title:hover {
  text-decoration: underline;
}
.channel-title {
  cursor: pointer;
  color: #50025e;
  text-decoration: none;
  background: #D5EDD1; 
  font-size: 15px      
}
.channel-title:hover {
  text-decoration: underline;
}

.video-link {
  display: block;
  font-size: 0.9em;
  color: #666;
  margin-top: 5px;
  text-decoration: none;
}
.video-link:hover {
  color: #2e4a62;
}
iframe {
  width: 100%;
  height: 347px;
  border: none;
}

.song-number {
  font-weight: bold;
  margin-right: 10px;
}
.hit-mark {
  background-color: #00FF00;
  font-weight: bold;
  padding: 2px 4px;
}

.autoplay-container {
  margin-top: 10px;
  font-size: 0.9em;
}
.autoplay-container input {
  margin-right: 5px;
}

.autoplay-controls, .video-controls {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.video-controls button {
  padding: 5px 10px;
  background-color: #2e4a62;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.video-controls button:hover {
  background-color: #50025e;
}

li {
  margin-bottom: 5px;
  padding: 5px;
  background: white;
  border-radius: 5px;
  transition: transform 0.2s;
}
li:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* right Sections */
.section_nav {
  position: fixed;
  top: 5px; /* vom to Rand: anpassen je nach Höhe : ?muss wegen Laptop höher (150px) liegen? */
  right: 20px; /* Rechtsbündig mit Padding */
  //display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 5px;
  background-color: #e9ecef;
  z-index: 1;
  box-sizing: border-box;
}
.section_nav nav {
  max-width: 150px; /* Feste Breite für die Liste, anpassen nach Bedarf */
}
.section_nav h2 {
  margin: 0 0 5px 0;
  //font-size: 1em;
  font-size: 1.2em;
  color: #2e4a62;
}
.section_nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8em;
}
.section_nav li {
  margin: 0;
}
.section_nav a {
  color: #2e4a62;
  text-decoration: none;
  padding: 5px 10px;
  background-color: #fff;
  border-radius: 5px;
  transition: background-color 0.2s;
  display: block; /* Sicherstellen, dass der gesamte Bereich klickbar ist */
}
.section_nav a:hover {
  background-color: #50025e;
  color: #fff;
}
.section_nav li[style*="background-color: #f5e9c9"] a {
  background-color: #f5e9c9; /* Beibehaltung des ursprünglichen Hintergrunds */
}

nav h2 {
  font-size: 1.2em;
  margin-bottom: 5px;
  text-align: center;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px; /* Abstand zwischen Listenelementen */
}
nav ul li {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
}
nav ul li a {
  color: #2e4a62;
  text-decoration: none;
  font-weight: 500;
}
nav ul li a:hover {
  text-decoration: underline;
}

.nav-buttons button {
  background-color: #2e4a62;
  color: white;
  border: none;
  padding: 8px 16px;
  margin: 0 2px; /* Abstand zwischen Knöpfen von 5px auf 2px reduziert */
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.2s;
}
.nav-buttons button:hover {
  background-color: #50025e;
}
.nav-buttons button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.section-drop-list {
	  font-size: middle;
	  font-weight: bold;
	  padding: 5px;
	  width: 150px;
	  background-color: #f5e9c9;
	  border: 1px solid #ccc;
	  border-radius: 4px;
}
.section-drop-list option[disabled] {
	  font-weight: bold;
}
#topButton {
  background-color: lightgray;
  font-weight: bold; /* Fett für den Button-Text */
  font-size: middle;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.topButton:hover {
  background-color: #d3d3d3;
}

/* Responsive Anpassungen: ============================================================== */
@media (max-width: 600px) {
	.video-big-container { /* big video container */
		max-width: 100%; /* Vollständige Breite auf kleinen Bildschirmen */
		position: static; /* Entfernt fixe Position auf kleinen Bildschirmen */
		margin: 10px 0; /* Abstand oben/unten */
	}
}
/*
@media (max-width: 480px) {
  .song_list_container {
	max-width: 100%; /* Volle Breite auf sehr kleinen Geräten */
	padding: 5px;
  }

  .video-frame {
	max-width: 100%;
	padding: 0 5px; /* Kleiner Padding für ästhetische Ränder */
	box-sizing: border-box;
  }
} */ 

@media (max-width: 768px) { /* OLEG ? */
  .song_list_container {
	max-width: 90%; /* Mehr Platz auf kleineren Bildschirmen */
	margin-right: 0; /* Entfernt den rechten Margin auf Mobilgeräten */
	padding: 10px;
  }

  .video-frame {
	max-width: 100%; /* Nutzt die volle Breite des Containers */
  }
}  

/* Мобильная адаптация  OLEG ########################################### */
  @media (max-width: 768px) {
	.video-frame {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 200px;
	  z-index: 1000;
	  background: #000;
	  padding: 0 !important;
	  margin: 0 !important;
	  box-sizing: border-box;
	}

	.video-frame iframe {
	  margin: 0 !important;
	  padding: 0 !important;
	  height: 200px !important;
	  max-height: 50vh;
	}

	.video-big-container {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  z-index: 1000;
	  background: #f4f7fa;
	  padding: 10px;
	  margin-bottom: 5px;
	  box-sizing: border-box;
	}

	.video-big-container h5 {
	  display: none;
	}

	.video-controls {
	  position: fixed !important;
	  top: 200px !important;
	  left: 0;
	  right: 0;
	  width: 100%;
	  background-color: #f0f4f8;
	  z-index: 1001;
	  display: flex;
	  justify-content: center;
	  flex-wrap: wrap;
	  margin: 0 !important;
	  padding: 4px 0 !important;
	  gap: 4px !important;
	}

	.video-controls button {
	  margin: 0 !important;
	  padding: 8px 12px;
	  font-size: 14px;
	}

	.autoplay-container {
	  display: none !important;
	}

	body {
	  padding-top: 260px !important;
	  display: flex;
	  flex-direction: column;
	  padding-right: 0;
	  overflow-x: hidden;
	  text-align: left;
	}

	body::before {
	  content: "";
	  position: fixed;
	  top: 200px;
	  left: 0;
	  width: 100%;
	  height: 110px;
	  background: #f4f7fa;
	  z-index: 1000;
	}

	.header_container {
	  margin-top: 50px; /* 300px STANI */
	  /*margin-bottom: 0px;*/
	  order: 0;
	  /* position: flex;  // Logo Ischgesaet! */
	  position: relative; //relative Logo + text kommen
	  //height: auto;
	  height: 130px;;
	  padding: 10px;
	  flex-direction: column;
	  text-align: left;
	}

	.song_list_container {
	  margin-top: 0px;
	  order: 2;
	  max-width: 100%;
	  padding: 10px;
	  margin-right: 0;
	  text-align: left;
	}

	.section_nav {
	  display: none !important; /* wird ausgeblendet */
	  order: 3;
	  position: relative;
	  width: 100%;
	  margin-top: 15px;
	  padding: 0;
	  background-color: transparent;
	}

	.section_nav nav {
	  max-width: 100%;
	  width: 100%;
	  text-align: center;
	}

	.section_nav h2 {
	  display: none !important;
	}

	.section_nav ul {
	  display: flex;
	  flex-direction: column;
	  gap: 5px;
	  padding: 0;
	  margin: 0;
	  text-align: left;
	}

	.section_nav li {
	  width: 100%;
	  margin: 0;
	  padding: 0;
	  text-align: left;
	}

	.section_nav a {
	  display: block;
	  width: 100%;
	  padding: 10px 15px;
	  margin: 0;
	  border-radius: 5px;
	  background-color: #fff;
	  box-sizing: border-box;
	  text-align: left;
	}

	.section_nav li[style*="background-color: #f5e9c9"] a {
	  background-color: #f5e9c9;
	}

	.track-list {
	  text-align: left;
	}

	.track-list li {
	  font-size: 16px;
	  padding: 12px;
	  margin-bottom: 8px;
	  line-height: 1.5;
	  word-break: break-word;
	}

	.track-list li:hover {
	  transform: none;
	}

	.song-number,
	.song-title {
	  font-size: 16px;
	  text-align: left;
	}

	.song-number {
	  margin-right: 12px;
	}

	.song-title {
	  display: inline-block;
	  margin-bottom: 5px;
	}

	.video-link {
	  font-size: 14px;
	}

	h2,
	h3 {
	  font-size: 1.5em;
	  margin-bottom: 15px;
	}

	html {
	  scroll-behavior: smooth;
	}

	.trackListEntrySelected {
	  outline-offset: -2px;
	}

	.section-drop-list,
	#sections.section-drop-list,
	#topButton {
	  width: 100% !important;
	  font-size: 16px !important;
	  margin: 0 !important;
	  padding: 6px !important;
	  box-sizing: border-box;
	}

	.section-drop-list {
	  position: fixed;
	  top: 250px;
	  left: 50%;
	  transform: translateX(-50%);
	  z-index: 1002;
	}

	#topButton {
	  position: fixed;
	  top: 295px;
	  left: 50%;
	  transform: translateX(-50%);
	  z-index: 1002;
	}

	label[for="sections"] {
	  display: none !important;
	}

	table {
	  width: 100%;
	  margin: 10px 0 0 0 !important;
	}

	table td {
	  display: block;
	  width: 100% !important;
	  padding: 5px 0 !important;
	}

	.logo_container {
	  //margin-top: 5px;
	  display: flex;
	  align-items: center;
	  gap: 12px;
	  //margin-bottom: 0px;
	  flex-wrap: nowrap;
	}

	.logo_container h3 {
	  display: inline-block;
	  margin: 0;
	  font-size: 16px;
	  line-height: 1.2;
	}

	.logo_container a,
	.logo_container img {
	  display: inline-block;
	}

	.logo_container img {
	  margin-top: 20px; // verschieben zum Text mitte "Welcome to Stani Hell -Channel!"
	  height: 40px; // LOGO Grösse in Mobile Vesion
	  width: auto;
	}

	.info_container {
	  display: none !important;
	}

  } /* End of "Мобильная адаптация  OLEG" 768px */