html, body {margin: 0;padding: 0;height: 100%;font-family: Fjalla One, sans-serif;background-image: url('images/pb_background.jpg'); /* Hintergrundbild */background-size: cover;background-position: center;background-repeat: no-repeat;background-attachment: fixed;background-blend-mode: lighten;display: flex;flex-direction: column;background-color: #191718; /* Fallback-Farbe */background-blend-mode: soft-light;}.page-content {flex: 1;display: flex;justify-content: center;width: 100%;}

.container {padding: 15px 20px;width: 100%;max-width: 1200px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);box-sizing: border-box;text-align: center;display: flex;flex-direction: column;align-items: center;}

h1 {color: #ef0461;text-align: center;margin-bottom: 0px;  margin-top: 15px;font-size: clamp(3rem, 2.5vw, 2rem);text-shadow: 0 4px 8px #000;}

.footer {text-align: center;background-color: #191718;font-size: clamp(1.2rem, 1.5vw, 1rem);color: #555;border-top: 1px solid #808080;width: 100%;}

.footer a {color: #808080;text-decoration: none;}

.footer a:hover {color: #ef0461;text-decoration: none;}.mobile-layout .task-grid {display: flex;flex-direction: column;gap: 100px;margin-top: 20px;width: 100%;align-items: center; /* Zentriert die Aufgaben */}.desktop-layout .task-grid {display: flex;flex-direction: row; /* Aufgaben nebeneinander */flex-wrap: wrap;gap: 15px;margin-top: 20px;justify-content: center; /* Zentriert die Aufgaben innerhalb des Containers */align-items: flex-start; /* Unabhängige Höhen für jedes Element */width: 100%;font-size: clamp(1.2rem, 1.5vw, 1rem);}.mobile-layout .task-item-container {width: 100%; /* Füllt die gesamte Bildschirmbreite auf mobilen Geräten */max-width: 100%; /* Verhindert Überschreiten des Bildschirms */background-color: #2a2a2a;border: 1px solid #191718;border-radius: 25px;box-shadow: 0 2px 4px #191718;transition: box-shadow 0.2s ease-in-out;}.desktop-layout .task-item-container {width: 300px; /* Feste Breite für Desktop */background-color: #2a2a2a;border: 1px solid #191718;border-radius: 10px;box-shadow: 0 2px 4px #191718;transition: box-shadow 0.2s ease-in-out;font-size: clamp(1.2rem, 1.5vw, 1rem);height: auto; /* Dynamische Höhe basierend auf Inhalt */}.today-task {border: 2px solid #fe0153  !important; /* Auffälligerer Rand für heutigen Tag */box-shadow: 0 2px 4px #ef0461 !important; /* Hellere Schattierung */}.task-item:nth-child(odd) {background-color: #2a2a2a;}.task-item:nth-child(even) {background-color: #323232; /* Leicht abweichender Hintergrund für jede zweite Aufgabe */}.task-time {margin: 0px;}
.desktop-layout .task-date, .mobile-layout .task-item {font-size: clamp(1.5rem, 1.5vw, 1rem);}
.desktop-layout .task-time {font-size: clamp(1.3rem, 1.5vw, 1rem);}.desktop-layout .task-item div, .mobile-layout .live-status {font-size: clamp(1.1rem, 1.5vw, 1rem);}
.mobile-layout h1 {
  font-size: clamp(6rem, 6vw, 6rem);
  }
  
.mobile-layout .task-date, .mobile-layout .task-item {
  font-size: clamp(1rem, 3vw, 2rem);
  }
  
  .mobile-layout .task-time {
  font-size: clamp(3rem, 3vw, 1rem);}
  .mobile-layout .task-item div, .mobile-layout .live-status {
  font-size: clamp(1rem, 4vw, 2rem);}
  
  .task-date {
display: flex;
    flex-direction: column; /* Vertikale Ausrichtung */
    align-items: center; /* Zentrieren (optional) */
    justify-content: center; /* Vertikale Zentrierung */
    gap: 0; /* Kein zusätzlicher Abstand zwischen den Elementen */
    color: #ef0461;
    font-weight: bold;
    background: #191718;
    border-radius: 10px 10px 0 0;
    padding: 10px 0 5px 0;
	  }
.desktop-layout .task-date {
	border-radius: 10px 10px 0px 0px;
    line-height: 1.0;	  
	}
.mobile-layout .task-date {
	border-radius: 25px 25px 0px 0px;
    line-height: 0.7;	  
	}
.task-item {display: flex; /* Bild und Text vertikal zentrieren */gap: 15px; /* Abstand zwischen Bild und Text */text-align: left; /* Text linksbündig */padding: 15px;border-radius: 0;}.task-item-container a {text-decoration: none;}.desktop-layout .task-item:last-child {border-radius: 0px 0px 10px 10px;}.mobile-layout .task-item:last-child {border-radius: 0px 0px 25px 25px;}.desktop-layout .task-icon {width: 75px; /* Größe des Icons anpassen */flex-shrink: 0; /* Verhindert, dass das Bild skaliert wird */border-radius: 20px;}.mobile-layout .task-icon {width: 150px; /* Größe des Icons anpassen */flex-shrink: 0; /* Verhindert, dass das Bild skaliert wird */border-radius: 20px;}.task-item-container:hover {box-shadow: 0 0px 4px #ef0461;}.task-item div {color: #a2a2a2;}.task-item strong {color: #ef0461;font-weight: bold;}.task-item em {color: #888;font-style: italic;text-align: center;}.highlight-task {background-color: #690d2b !important;}.live-status {color: #d9534f;font-weight: bold;margin: 10px 0px 0px 0px;font-size: clamp(1rem, 2vw, 1.2rem);}.cookie-banner {position: fixed;bottom: 0;left: 0;width: 100%;background-color: #333;color: #fff;padding: 15px;text-align: center;font-size: clamp(0.8rem, 1.5vw, 1rem);display: flex;justify-content: space-between;align-items: center;box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);z-index: 1690d2b;}.cookie-banner p {margin: 0;padding-right: 10px;}.cookie-banner button {background-color: #f1c40f;color: #333;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;font-weight: bold;}.cookie-banner button:hover {background-color: #d4ac0d;}

.task-desc {
	font-family: sans-serif;
	margin-top: 1px;
  margin-bottom: 5px;
}

.task-category {
color: #ded8d8;  
margin-top: 10px;
  margin-bottom: 1px;
  text-transform: uppercase;
}

.desktop-layout .task-desc {
	font-size: clamp(0.9rem, 1vw, 0.9rem);
}

.desktop-layout .task-category {
  font-size: clamp(0.8rem, 1vw, 0.9rem);
}

/* Tooltip-Stile */
.tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    max-width: 200px;
    display: none;
    z-index: 1000;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.tooltip img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 5px;
}

a {
	color: #808080;
}

.task-day {
	
}

.task-dates {
  font-weight: normal;
  font-family: sans-serif;
  color: #a2a2a2;
}

.desktop-layout .task-day {
  margin-top: 5px;
  margin-bottom: 0px;
 }

.desktop-layout .task-dates {
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  margin-top: 0px;
  margin-bottom: 5px;
 }

.mobile-layout .task-dates {
  font-size: clamp(1.5rem, 3vw, 3rem);
  margin-top: 0px;
  margin-bottom: 20px;
 }

.mobile-layout .task-day {
  font-size: clamp(3.5rem, 3vw, 3rem);
  margin-top: 20px;
  margin-bottom: 0px;
}

.task-item-container.no-stream {
    background-color: #1a1a1a; /* Dunklerer Hintergrund */
    color: #666; /* Blassere Schriftfarbe */
    opacity: 0.8; /* Weniger Sichtbar */
    filter: grayscale(50%); /* Graustufen-Effekt */
    transition: opacity 0.3s ease, filter 0.3s ease; /* Animation bei Hover */
}

.task-item-container.no-stream:hover {
    opacity: 1; /* Hebt die Deckkraft bei Hover an */
    filter: none; /* Entfernt den Graustufen-Effekt */
}

.task-item-container.no-stream em {
    color: #999; /* Dezenterer Text für "Noch kein Stream geplant" */
    font-style: italic;
}

.header-banner {
    display: flex;
    justify-content: space-between; /* Bilder links und rechts positionieren */
    align-items: center; /* Text und Bilder vertikal ausrichten */
    padding: 10px 20px; /* Innenabstand */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

.desktop-layout .header-banner {
    margin-bottom: -20px; /* Abstand zur Überschrift */
 }

.mobile-layout .header-banner {
    margin-bottom: -40px; /* Abstand zur Überschrift */
 }

.header-image {
    border-radius: 50%; /* Runde Bilder */
    object-fit: cover; /* Bildinhalt an den Rahmen anpassen */
}

.header-text {
    color: #ef0461; /* Schriftfarbe */
    text-align: center; /* Text zentrieren */
    flex-grow: 1; /* Text nimmt verbleibenden Platz ein */
    margin: 0 10px; /* Abstand zwischen Text und Bildern */
}

.desktop-layout .header-text {
    font-size: clamp(1rem, 1vw, 2rem); /* Dynamische Schriftgröße */
 }

.mobile-layout .header-text {
    font-size: clamp(3rem, 3vw, 3rem); /* Dynamische Schriftgröße */
	margin-bottom: 15px;
 }
 
 .desktop-layout .header-image {
	width: 20px;
	 flex-shrink: 0;
 }
 
 .mobile-layout .header-image {
	width: 40px;
 }

.top-bar {
    display: flex;
    justify-content: center; /* Zentriert die Icons horizontal */
    align-items: center; /* Vertikal ausgerichtet */
    background-color: #191718; /* Hintergrundfarbe */
    padding: 10px; /* Innenabstand */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Schatten */
    position: sticky; /* Fixiert die Leiste am oberen Rand */
	border-bottom: 1px solid #fc549c;
    top: 0;
    z-index: 1000; /* Sicherstellen, dass die Leiste oben bleibt */
}

.social-icon {
    transition: transform 0.2s ease, opacity 0.2s ease; /* Animation bei Hover */
}

.social-icon:hover {
    transform: scale(1.2); /* Leichtes Vergrößern beim Hover */
    opacity: 0.8; /* Etwas transparent */
}
.profile-image-container {
    display: flex;
    justify-content: center; /* Zentriert das Bild horizontal */  
	padding: 20px 0px 0px 0px;
}

.profile-image {
    border-radius: 50%; /* Rundet das Bild zu einem Kreis */
    border: 5px solid #ef0461; /* Rahmenfarbe */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten für mehr Tiefe */
    object-fit: cover; /* Schneidet das Bild zu, ohne es zu verzerren */
}

 .desktop-layout .profile-image {	 
    width: 125px; /* Breite des Kreises */
    height: 125px; /* Höhe des Kreises, identisch zur Breite */

}

 .mobile-layout .profile-image {	 
 flex-shrink: 0;
    width: 250px; /* Breite des Kreises */
    height: 250px; /* Höhe des Kreises, identisch zur Breite */

}

.header-container {
    margin-bottom: 0px;
}

.impressum {
	margin-top: 10px;
	margin-bottom:0px;
}

.copyright {
	margin-bottom: 10px;
	margin-top:0px;
	font-size:15px;
}

.top-bar a {color: #808080;text-decoration: none;}

.top-bar a:hover {color: #ef0461;text-decoration: none;}

.category-container {
	align-content: center;
}

.desktop-layout .instagram {
    width: 20px; /* Größe der Icons */
	height: 20px;
	margin: 0px 10px;
}

.mobile-layout .instagram {
    width: 40px; /* Größe der Icons */
	height: 40px;
	margin: 0px 15px;
}

.instagram {
    background-image: url('images/icon_grey_instagram.png'); /* Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}

.instagram:hover {
    background-image: url('images/icon_pink_instagram.png'); /* Change on hover */
}

.desktop-layout .tiktok {
    width: 20px; /* Größe der Icons */
	height: 20px;
	margin: 0px 10px;
}

.mobile-layout .tiktok {
    width: 40px; /* Größe der Icons */
	height: 40px;
	margin: 0px 15px;
}

.tiktok {
    background-image: url('images/icon_grey_tiktok.png'); /* Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}

.tiktok:hover {
    background-image: url('images/icon_pink_tiktok.png'); /* Change on hover */
}

.desktop-layout .youtube {
    width: 20px; /* Größe der Icons */
	height: 20px;
	margin: 0px 10px;
}

.mobile-layout .youtube {
    width: 40px; /* Größe der Icons */
	height: 40px;
	margin: 0px 15px;
}

.youtube {
    background-image: url('images/icon_grey_youtube.png'); /* Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}

.youtube:hover {
    background-image: url('images/icon_pink_youtube.png'); /* Change on hover */
}

.desktop-layout .twitch {
    width: 20px; /* Größe der Icons */
	height: 20px;
	margin: 0px 10px;
}

.mobile-layout .twitch {
    width: 40px; /* Größe der Icons */
	height: 40px;
	margin: 10px 15px;
}

.twitch {
    background-image: url('images/icon_grey_twitch.png'); /* Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}

.twitch:hover {
    background-image: url('images/icon_pink_twitch.png'); /* Change on hover */
}

.specialevent {
background: #ef0461;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-weight: bold;
  padding: 10px 0 5px 0;
  height: 25px;
  color: #191718;
}