/* CSS: INC-CSS-bestSongs.css
   tech-Stand as of: 24.09.2025
  --- Change-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%
  29.08.2025 - Track Classification and Date // see changeVideoXX()
  24.09.2025 - replaced '//' by brackets  Anomalies solved
  23.10.2025 - Neon animation
  12.02.2026 - Hits Darstellung, Umbenannt
*/

body {
  background: #0b0f14;
  background-color: #373f43;
  font-family: 'Segoe UI', Arial, sans-serif; 
  /* font-family: 'Segoe UI', sans-serif; */
  /*font-family: "Orbitron", 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 {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  width: 100%;
  height: 283px; /* 26% */
  min-height: 50px; /* Mindesthöhe statt fester Höhe */
  padding: 10px 20px;
  /* background-color: #f0f4f8; */
  background-color: #f4f7fa; /* gray light blue */
  z-index: 1000;
  box-sizing: border-box;
  
  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 */
}

/* LOGO: ------------------ */

/* Anpassung der Header Container-Breiten */
.logo_container {
  /* margin: 2px; */
  margin-top: 2px;
  min-width: 400px; /* Mehr Platz für den Frame, verhindert Abschneiden */
  max-width: 450px; /* Erhöht, um 15% breiter als zuvor */
  flex: 0 0 50%; /* Erhöhtes Verhältnis für Logo */
  overflow: visible !important; /* Verhindert Abschneiden im Container */
}

.logo_container h3 {
  font-size: 1.2em;  /* Reduziere die Schriftgröße, falls nötig */
  color: #720707;
  margin: 1px;
}
.logo_container h4 {
  font-size: 0.9em;  /* Reduziere die Schriftgröße, falls nötig */
  color: #552cb5;
  margin: 1px;
}

/* INFO: ------------------------- */

.info_container {
  flex: 0 0 45%; /* Anpassung für ausgewogenes Verhältnis */
  max-width: 450px; /* Weniger Platz, um Logo breiter zu machen */
  
  font-size: 0.9em;
  line-height: 1.4;
  text-align: left;
  margin-left: 5px;
  padding: 4px;
  word-wrap: break-word;
}

.info_container h2 {
  font-size: 1.4em; /* Reduziere die Schriftgröße, falls nötig */
  color: #bb169a;
  margin: 0;
}
.info_container h3 {
  font-size: 0.7em; /* Reduziere die Schriftgröße, falls nötig */
  margin: 0;
}

.channel-title {
  cursor: pointer;
  color: #50025e;
  text-decoration: none;
  background: #D5EDD1;
  font-size: 14px;
  display: block; /* Stellt sicher, dass der gesamte Block als Einheit behandelt wird */
}
.channel-username {
  display: inline-block;
  margin-right: 5px;
  font-size: 0.9em;
}
.channel-label {
  display: inline-block;
  margin-right: 5px;
}
.channel-link {
  font-size: 0.9em;
  display: block; /* Erzwingt einen Umbruch nach dem Label */
  word-break: break-all; /* Ermöglicht Umbruch innerhalb langer URLs */
  margin-top: 2px;
  color: blue;
}

/* SONGs: --------------------- */

/* 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: 240px; /* 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 */
}

/* 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;
  width: 150px; /* Feste Breite für Konsistenz */
}
.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 */
}

/* VIDEO: ----------------- */

/* 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-height: 480px;
    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 {
  /* padding: 3px; */
  /* margin-top: 3px; */
  /* top: 3px; */
  font-size: 15px;
  text-align: left;
  color: darkblue;
}

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


/* === Neon Frame Class mit Glitch-Stil (aktualisiert für volle Abdeckung und weißem Text) === */

.neon-frame {
  background: #1a1a2e !important; /* Dunkles Background */
  background-clip: padding-box; /* Background deckt Padding ab */
  font-family: "Orbitron", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 23px; /*auto; */
  position: relative;
  padding: 11px 24px; /* Erhöhtes Padding als Puffer für Abstand */
  border-radius: 9px;
  overflow: hidden !important; /* Schließt Lücken und verhindert Überhänge */
  max-width: 100%;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.7); /* Grelle blaue Glow */
}

.neon-frame h4 {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #FFFFFF !important; /* Weißer Text */
  font-weight: 650;
  font-size: 0.8rem;
  letter-spacing: 0.2px;
  text-shadow: 0 0 5px #800080, 0 0 15px #800080, 0 0 20px #800080, 0 0 30px #940994; /* Strahlende violette Aura */
  white-space: nowrap; /* Verhindert Umbrüche */
  position: relative;
  z-index: 2; /* Über Glitch-Elementen */
}

.neon-frame svg {
  position: absolute;
  top: -2px; /* Erweiterte Offsets für volle Abdeckung */
  left: -5px;
  right: -5px;
  bottom: -5px;
  pointer-events: none;
}

/* Glitch-Effekt für den Rahmen (nur Rahmen, nicht Text) */
.neon-frame::before {
  content: "";
  position: absolute;
  top: 1;
  left: 0;
  right: 0;
  bottom: 1;
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.1), rgba(255, 0, 255, 0.1)); /* Leichter Glitch-Gradient */
  animation: glitchEffect 0.5s linear infinite;
  z-index: 1;
}

@keyframes glitchEffect {
  2%, 64% {
    transform: translate(2px, 0);
  }
  4%, 60% {
    transform: translate(-4px, 0);
  }
  62% {
    transform: translate(0, 0);
  }
}

.neon-frame .dash {
  stroke: #00FFFF; /* Grelle blaue Neon-Linie */
  stroke-width: 1.7;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 1 4;
  filter: url(#glow);
  opacity: 0.98;
  animation: dashmove 5s linear infinite; /* Uhrzeiger-Sinn */
}

.neon-frame .spark {
  stroke: #FF00FF; /* Magenta-rosiger Gegen-Uhrzeiger-Effekt */
  stroke-width: 1.1;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 1 18;
  opacity: 1;
  animation: sparkmove 3s linear infinite reverse; /* Gegen-Uhrzeiger */
}

@keyframes dashmove {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -20; } /* Uhrzeiger: negativ */
}

@keyframes sparkmove {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -20; } /* Gegen-Uhrzeiger: positiv + reverse */
}
	
/* *** OF Neon Frame ****************** */

.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;
}
.hit-entry {
  border: 3px solid #ffb3d9;  /* Rosa/Pink #ffb3d9 Umrandung = klappt nicht wg. besthitslist + .track-list (siehe unten!) */
  padding: 8px;
  margin-bottom: 8px;
  border-radius: 5px;
  background-color: #faedd2 !important;  /* leichter rosa #f7e2dc Hintergrund; #f5d8b0; =leichtes Orange; #fcf2b6 =gelb */
}

/* BEST HITS Section - Rosa Umrandung */
#besthitslist + .track-list li {
  border: 2px solid #6ff7ec !important;  /* Umrandung Pink =#ff69b4 */
  padding: 10px !important;
  margin-bottom: 10px !important;
  border-radius: 6px !important;
  background-color: #faedd2 !important;  /* Leichter rosa Hintergrund: #fff5fb */
}
/* on hover */
#besthitslist + .track-list li:hover {
  border-color: #ff1493 !important;  /* Dunkleres Pink beim Hover */
  background-color: #ffe9f5 !important;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3) !important;
}

.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);
}

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;
}

/*#### for index.html -only */

/* ==========================================================================
   EXPAND / COLLAPSE – Profile & Best Hits
   Verbesserte Version – Stand: Februar 2026
   Ziel: Kein Overlap, sauberes Zuklappen, flüssige Animation
   Speziell: Best Hits als rosa Block (Hintergrund pink/rosa, nicht dunkelgrau)
   ========================================================================== */

	/* === Die eigentlichen Inhalts-Container (Profile & Best Hits) === */
	.expand-content-profile,
	.expand-content-ownership,
	.expand-content-besthits {
	  /* Initialzustand: komplett kollabiert */
	  display: none;
	  max-height: 0;
	  opacity: 0;
	  overflow: hidden;
	  
	  /* Wichtige Basis-Styles */
	  padding: 0 20px;
	  margin: 0;
	  background-color: #f9fafb;
	  border: 1px solid #e2e8f0;
	  border-radius: 8px;
	  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	  
	  /* Transition – alle wichtigen Eigenschaften animieren */
	  transition: 
		max-height    0.38s cubic-bezier(0.4, 0, 0.2, 1),
		opacity       0.38s ease-out,
		padding       0.38s ease-out,
		margin        0.38s ease-out,
		box-shadow    0.38s ease-out;
	  
	  /* Performance-Optimierung */
	  will-change: max-height, opacity, padding, margin, box-shadow;
	  transform: translateZ(0); /* force hardware acceleration in manchen Browsern */
	}

	/* === Geöffneter Zustand (wird von JS dynamisch gesteuert) === */
	.expand-content-profile.visible,
	.expand-content-ownership.visible,
	.expand-content-besthits.visible {
	  opacity: 1;
	  /* max-height wird von JavaScript gesetzt → KEIN fester Wert hier! */
	  padding: 24px 20px;           /* mehr Innenabstand im geöffneten Zustand */
	  margin: 12px 0;               /* Abstand zu umliegenden Elementen */
	  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
	}

	/* === Die Expand-Bar (Überschrift / Klickfläche) === */
	.expand-bar-profile,
	.expand-bar-ownership,
	.expand-bar-besthits {
	  cursor: pointer;
	  user-select: none;
	  
	  padding: 14px 18px;
	  margin: 16px 0 6px;
	  
	  color: #f7fafc;
	  font-weight: 600;
	  font-size: 1.05rem;
	  letter-spacing: 0.4px;
	  
	  border-radius: 8px;
	  border: 1px solid rgba(0,0,0,0.15);
	  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
	  
	  transition: all 0.22s ease;
	  position: relative;
	  overflow: hidden;
	  display: block;  /* Explizit als Block-Element */
	}

	/* Speziell für Profile-Bar: Dunkles Grau (wie zuvor) */
	.expand-bar-profile {
	  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
	  border-color: #4a5568;
	}
	/* ownership (auch Dunkles Grau?) */
	.expand-bar-ownership {
	  background: linear-gradient(135deg, #4a6591 0%, #1a202c 100%);
	  border-color: #4a5568;
	}	
	/* Speziell für Best-Hits-Bar: Rosa Block (Pink-Gradient) */
	.expand-bar-besthits {
	  background: linear-gradient(135deg, #ff69b4 0%, #ffc0cb 100%);  /* Hot Pink zu Light Pink */
	  border-color: #ffb6c1;  /* Hellrosa Border */
	  color: #2c3e50;  /* Dunkler Text für Kontrast (nicht weiß, da Hintergrund hell) */
	}

	/* Hover- & Active-Effekt – Allgemein */
	.expand-bar-profile:hover,
	.expand-bar-ownership:hover,
	.expand-bar-besthits:hover {
	  transform: translateY(-1px);
	  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
	}

	.expand-bar-profile:active,
	.expand-bar-ownership:active,
	.expand-bar-besthits:active {
	  transform: translateY(1px);
	  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	}

	/* Hover für Profile (dunkler Grau) */
	.expand-bar-profile:hover {
	  background: linear-gradient(135deg, #3b4a5e 0%, #2d3748 100%);
	}
	/* Hover für Ownership (dunkler Grau?) */
	.expand-bar-ownership:hover {
	  background: linear-gradient(135deg, #3b4a5e 0%, #2d3748 100%);
	}
	/* Hover für Best Hits (helleres Rosa) */
	.expand-bar-besthits:hover {
	  background: linear-gradient(135deg, #ff85c0 0%, #ffd1dc 100%);
	}

	/* Optional: kleiner Pfeil / Icon (kann mit ::after gemacht werden) */
	.expand-bar-profile::after,
	.expand-bar-ownership::after,
	.expand-bar-besthits::after {
	  content: '▼';
	  margin-left: 10px;
	  font-size: 0.9em;
	  opacity: 0.7;
	  transition: transform 0.3s ease;
	}

	.expand-content-profile.visible ~ .expand-bar-profile::after,
	.expand-content-ownership.visible ~ .expand-bar-ownership::after,
	.expand-content-besthits.visible ~ .expand-bar-besthits::after {
	  /* Achtung: ~ funktioniert nur wenn Bar NACH Content kommt!
		 Besser: JS-Klasse .expanded auf die Bar setzen */
	  transform: rotate(180deg);
	}
	
/* ==========================================================================
   SONDERKLASSE: Neon-Kranz Glow (gelb-neon um den Text)
   ========================================================================== */

	glow-text-cyan {
	  position: relative;
	  color: #111111;                    /* dunkler Basis-Text für Kontrast */
	  font-weight: 700;                  /* fetter Text wirkt bei Neon stärker */
	  text-shadow: 
		0 0 5px  #00f0ff,               /* heller Cyan-Kern */
		0 0 10px #00f0ff,
		0 0 20px #00f0ff,
		0 0 35px rgba(0, 240, 255, 0.7),
		0 0 50px rgba(0, 240, 255, 0.5);
	  animation: cyan-neon-kranz 3.2s infinite alternate ease-in-out;
	  letter-spacing: 0.6px;
	  padding: 3px 8px;                  /* Luft um den Text für runden Kranz */
	  display: inline-block;
	  border-radius: 6px;
	}

	/* Pulsierender Cyan-Neon-Effekt */
	@keyframes cyan-neon-kranz {
	  0% {
		text-shadow: 
		  0 0 4px  #00f0ff,
		  0 0 8px  #00f0ff,
		  0 0 16px #00f0ff,
		  0 0 30px rgba(0, 240, 255, 0.6),
		  0 0 40px rgba(0, 240, 255, 0.4);
		box-shadow: 
		  inset 0 0 8px rgba(0, 240, 255, 0.4),
		  0 0 18px rgba(0, 240, 255, 0.5);
	  }
	  100% {
		text-shadow: 
		  0 0 10px  #00ffff,
		  0 0 20px  #00f0ff,
		  0 0 40px  #00f0ff,
		  0 0 60px  rgba(0, 240, 255, 0.9),
		  0 0 80px  rgba(0, 240, 255, 0.7);
		box-shadow: 
		  inset 0 0 14px rgba(0, 240, 255, 0.6),
		  0 0 30px  rgba(0, 240, 255, 0.9),
		  0 0 50px  rgba(0, 240, 255, 0.7);
	  }
	}

	/* Hover: Intensiver und schneller */
	.glow-text-cyan:hover {
	  animation: cyan-neon-kranz 2s infinite alternate ease-in-out;
	  text-shadow: 
		0 0 12px  #00ffff,
		0 0 25px  #00f0ff,
		0 0 50px  #00f0ff,
		0 0 70px  rgba(0, 240, 255, 1),
		0 0 90px  rgba(0, 240, 255, 0.8);
	  box-shadow: 
		inset 0 0 18px rgba(0, 240, 255, 0.7),
		0 0 40px  rgba(0, 240, 255, 1),
		0 0 60px  rgba(0, 240, 255, 0.8);
	}

	/* Optionale extremere Variante (sehr hell & stark) */
	.glow-text-cyan.neon-extreme {
	  color: #000000;
	  background: rgba(0, 0, 0, 0.2);
	  padding: 5px 12px;
	  border-radius: 8px;
	  animation-duration: 2.6s;
	  text-shadow: 
		0 0 8px  #00ffff,
		0 0 16px #00f0ff,
		0 0 35px #00f0ff,
		0 0 55px rgba(0, 240, 255, 0.9),
		0 0 75px rgba(0, 240, 255, 0.7);
	}

	
/* Classification styling ------------------ */
.musicClassification {
    background-color: #e0ffff; /* Light Cyan */
    color: #2e4a62; /* Darker text for contrast */
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 5px;
    font-size: 0.8em;
}

.lyricsClassification {
    background-color: #ffe4e1; /* Light Pink */
    color: #2e4a62; /* Darker text for contrast */
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 5px;
    font-size: 0.8em;
}
.dateClassification {
    background-color: #d3d3d3; /* Light Gray */
    color: #2e4a62; /* Darker text for contrast */
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 5px;
    margin-top: 2px;
    font-size: 0.8em;
    display: inline-block;
}	


/* Responsive Anpassungen: 
============================================================== */

/* ############################# 
   Мобильная адаптация - OLEG 
  ############################## */
  
/* für sehr schmale Geräte (z. B. < 480px) */
@media (max-width: 480px) {
	
  .video-big-container {
    height: 25px; /* Noch kleinere Höhe */
    margin: 3px 0;
  }

  .musicClassification,
  .lyricsClassification,
  .dateClassification {
    font-size: 0.5em; /* Noch kleiner für extreme Enge */
    padding: 1px 2px;
    margin-left: 2px;
  }

  .track-item,
  p {
    font-size: 0.65em;
    max-height: 30px; /* Strengere Höhe-Begrenzung */
    gap: 1px;
  }
  
	/* Thema: Expand: */
   .expand-content-profile,
   .expand-content-besthits {
    padding: 0 12px;
    border-radius: 6px;
  }
  .expand-content-profile.visible,
  .expand-content-besthits.visible {
    padding: 16px 12px;
  }
  .expand-bar-profile,
  .expand-bar-besthits {
    padding: 12px 14px;
    font-size: 0.98rem;
  }  
  
} /* of @media (max-width: 480px)  */

  
@media (max-width: 600px) {
  .video-big-container { /* Big video container verkleinern */
    max-width: 100%; /* Vollständige Breite */
    height: 40px; /* Reduzierte Höhe für kompakteres Layout (von 40px auf 30px) */
    position: static; /* Entfernt fixe Position */
    margin: 5px 0; /* Kleinerer Abstand oben/unten */
    /*display: flex; */ /* Flex für bessere Anpassung */
    align-items: center; /* Zentriert Inhalt */
  }

/* Verkleinern der Classifications (markierter Bereich) */
  .musicClassification,
  .lyricsClassification,
  .dateClassification {
    font-size: 0.7em; /* Kleinere Schriftgröße für engeres Layout */
    padding: 1px 3px; /* Reduziertes Padding (von 2px 5px) */
    border-radius: 2px; /* Kleinerer Radius für kompakteren Look */
    margin-left: 3px; /* Weniger Abstand links */
    display: inline-block; /* Behält Inline, aber verhindert Überlappung */
  }
  
  /* Optional: Gesamten Track-Container anpassen, falls er existiert (z. B. .track-item oder ähnlich) */
  .track-item { /* Ersetze durch deinen genauen Selector, falls anders */
    max-height: 25px; /* Maximale Höhe begrenzen */
    overflow: hidden; /* Versteckt Überfluss */
    white-space: nowrap; /* Text in einer Zeile halten */
    text-overflow: ellipsis; /* Kürzt langen Text mit ... */
  }
  
} /* of @media (max-width: 600px) */
  

/* OLEG STD */
@media (max-width: 768px) {
	
	.video-frame {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 250px;
	  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: 250px !important;
	  max-height: 50vh;
	}
    
    .now-playing-block {
        top: 0px;
	    left: 0;
        max-height: 0px; 
        position: static;
    }

    .expand-bar-profile {
         display: none;
    }

    /* Oleg: */
	.video-big-container {
	  position: flex;
      /* position: flex; BESTE Einstellung zur Zeit */
      /*display: flex; static*/
      /* display: flex;*/
	  top: 0;
	  left: 0;
	  width: 100%;
      max-width: 100%; 
	  max-height: 0px;
      /*height: 0px; */
	  z-index: 1000;
	  background: #f4f7fa;
	  padding: 10px;
	  margin-bottom: 5px;
	  /* box-sizing: border-box;*/
	}
    
	.video-big-container h5 {
	  display: none;
	  top: 0;
	   /*margin: 0 !important; */
	   /*justify-content: bottom; */
	}
    
    .header_container {
	  margin-top: 50px; 
	  /*margin-bottom: 0px;*/
	  order: 0;
	  /* position: flex; */ /* Logo disapeare by flex ! */
	  position: relative;  /*relative Logo + text kommen*/
	  
	  /*height: auto; */
	  height: 100px;
	  padding: 5px;
	  flex-direction: column;
	  text-align: left;
	}
    .header_container {
	  display: none;  /* ausschalten !*/
	}
	
	/*aus schalten */
	.neon-frame {
	  display: none;
	}
	.now-playing-title {
	  height: 40px;
	}
	
	/* Verkleinern der Classifications (markierter Bereich) */
	  .musicClassification,
	  .lyricsClassification,
	  .dateClassification {
		font-size: 0.6em; /* Kleinere Schriftgröße (von 0.8em) */
		padding: 1px 3px; /* Reduziertes Padding für Enge */
		border-radius: 2px; /* Kleinerer Radius */
		margin-left: 3px; /* Weniger Abstand */
		line-height: 1.1; /* Reduzierte Zeilenhöhe für kompakteres Layout */
		display: inline-block;
	  }
	  
	.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;
	}
	
	.song_list_container {
	  margin-top: 5px;
	  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;
	}
    
    /* TRACKS: */
    
	.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;
	}
    
    /* Track-Text und Container anpassen (angenommen, der Track-Name ist in <p> oder .track-item) */
	.track-item, /* Ersetze durch deinen genauen Selector, falls anders */
      p { /* Allgemein für Track-Text */
        font-size: 0.75em; /* Kleinere Schrift für Track-Namen */
        line-height: 1.2; /* Reduzierte Zeilenhöhe */
        white-space: normal; /* Erlaubt Umbrüche für schmale Screens */
        text-overflow: ellipsis; /* Kürzt langen Text mit ... */
        overflow: hidden; /* Versteckt Überfluss */
        max-height: 40px; /* Maximale Höhe begrenzen */
        display: flex; /* Flex für bessere Anpassung */
        flex-direction: column; /* Stapelt Inhalt vertikal, macht es enger */
        gap: 2px; /* Weniger Abstand zwischen Elementen */
      }  
      
	.trackListEntrySelected {
	  outline-offset: -2px;
	}      

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

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

	.song-title {
	  display: inline-block;
	  margin-bottom: 5px;
	}
    
    /* End of Tracks --- */

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

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

	html {
	  scroll-behavior: smooth;
	}

	.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 -----  */
	
	.logo_container {
	  display: none !important;
	}
		
	/* Anpassung der Header Container-Breiten */
	/*
	.logo_container {
	  display: flex;
	  align-items: center;
	  gap: 10px;
	  min-width: 250px;
	  max-width: 345px; // Erhöht um 15% (von 300px), jetzt im Haupt-CSS 
	  flex: 0 0 45%; // 45% Basis – macht Logo breiter 
	  flex-wrap: wrap;
	}
	*/
	.logo_text_block {
	  margin-top: 2px;
	  /*margin-left: 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: 10px; /* verschieben zum Text mitte "Welcome to Stani Hell -Channel!"*/
	  height: 40px; /* LOGO Grösse in Mobile Vesion */
	  width: auto;
	}

    /* --- info_container -----  */
	
	.info_container {
	  display: none !important;
	}

	.info_container h2 {
	  font-size: 1.4em; /* Reduziere die Schriftgröße, falls nötig */
	  color: #bb169a;
	  margin: 0;
	}
	.info_container h3 {
	  font-size: 0.7em; /* Reduziere die Schriftgröße, falls nötig */
	  margin: 0;
	}
	

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