/* Container für die gesamte Liste */
#schedule-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Abstand zwischen den Listenelementen */
    padding-bottom: 4rem; /* Abstand zum Footer */
}

/* Einzelnes Listenelement (längliche Kachel) */
.schedule-item {
    /* Glas-Effekt, konsistent mit der Hauptseite */
    background-color: hsla(240, 4%, 15%, 0.4);
    background-image: 
        linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2)), 
        linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2));
    background-size: 4px 4px, 4px 4px;
    background-position: 0 0, 2px 2px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 1rem; /* Etwas weichere Kanten */
    border: 1px solid hsla(0, 0%, 100%, 0.1);
    box-shadow: 0 8px 32px 0 hsla(180, 50%, 10%, 0.37); /* Cyan Schatten */

    /* Layout für den Inhalt */
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Etwas weniger Abstand für das neue Bild */
    transition: all 0.3s ease;
}

.schedule-item:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--cyan-neon);
    box-shadow: 0 10px 40px hsla(180, 90%, 60%, 0.3); /* Cyan Glow */
}

/* NEU: Stil für das Kategoriebild */
.schedule-game-art, .schedule-game-art-placeholder {
    width: 75px;
    height: 100px;
    flex-shrink: 0; /* Verhindert, dass das Bild gequetscht wird */
    border-radius: 0.5rem;
    object-fit: cover;
}

.schedule-game-art-placeholder {
    background-color: var(--dark-secondary);
}

/* Container für Datum und Uhrzeit */
.schedule-time {
    flex-shrink: 0; /* Verhindert, dass dieser Block gequetscht wird */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 180px; /* Etwas schmaler, um Platz für das Bild zu machen */
}

.schedule-date {
    font-family: 'Orbitron', monospace;
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-foreground);
}

.schedule-clock {
    font-size: 1rem;
    color: var(--text-muted-foreground);
}

/* Container für Titel und Kategorie */
.schedule-details {
    flex-grow: 1; /* Nimmt den restlichen Platz ein */
    min-width: 0; /* Wichtig für Text-Umbruch in Flex-Containern */
}

.schedule-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--cyan-neon);
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-category {
    font-size: 1rem;
    color: var(--text-muted-foreground);
    margin: 0;
}

/* Spezieller Stil für die Urlaubs-Nachricht */
.vacation-notice {
    text-align: center;
    font-size: 1.25rem;
    color: var(--cyan-neon);
    font-family: 'Orbitron', monospace;
}