/* grazybeats_style.css */

/* === Globale Variablen und Basis-Reset === */
:root {
    --color-bg-dark: #1a1a2e;        /* Dunkler Hintergrund */
    --color-bg-light: #2A2A4A;       /* Leichterer Hintergrund/Karten */
    --color-primary: #FF5722;        /* Akzentfarbe (Orange/Grazybeats-Vibe) */
    --color-secondary: #00BCD4;      /* Sekundäre Akzentfarbe (Cyan/Neon) */
    --color-text-light: #E9E4F0;     /* Helle Schrift */
    --color-border: #444466;         /* Leichte Border/Trennung */
    --transition-speed: 0.3s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    line-height: 1.6;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--color-bg-dark);
}

h1, h2, h3 {
    color: var(--color-secondary);
    margin-bottom: 15px;
}

/* --- Formular- & Admin-Styling (admin.html, bearbeiten.html) --- */

.container:not(.schedule-container) { 
    max-width: 900px;
    background-color: var(--color-bg-light);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
/* Lade-Spinner für den Sendeplan */
.schedule-container.loading {
    min-height: 100px; /* Platzhalter, damit die Seite nicht springt */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    color: #007bff;
    text-align: center;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #007bff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
form {
    background-color: #3e3e5c; 
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

label { font-weight: 600; }

input[type="text"], 
input[type="time"], 
textarea, 
select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    background-color: #4a4a6e;
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.time-group { display: flex; gap: 20px; }
.time-group > div { flex: 1; }
.time-group label { margin-top: 0; }

/* Buttons */
.save-button, .edit-btn, .delete-btn, .cancel-button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color var(--transition-speed);
}
.save-button { background-color: var(--color-primary); color: white; }
.save-button:hover { background-color: #e54c1c; }

.edit-btn { background-color: var(--color-secondary); color: var(--color-bg-dark); }
.edit-btn:hover { background-color: #00a4b7; }

.delete-btn { background-color: #dc3545; color: white; margin-left: 5px;}
.delete-btn:hover { background-color: #c82333; }

.cancel-button { background-color: #6c757d; color: white; }
.cancel-button:hover { background-color: #5a6268; }

/* --- Admin-Liste --- */
.sendungen-liste { margin-top: 15px; }
.sendung-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;
}
.show-info { flex-grow: 1; margin-right: 15px; }
.show-info h3 { color: var(--color-primary); margin-bottom: 5px; }
.show-info p { color: #bdbdbd; font-size: 0.9em; margin: 2px 0; }


/* --- User-Sendeplan Styling (sendeplan.html) --- */
.week-display { text-align: center; margin-bottom: 40px; }

.day-schedule {
    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-bg-light);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
}
.day-schedule h2 {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.show-card {
    display: flex;
    background-color: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: transform var(--transition-speed);
}
.show-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 189, 212, 0.3);
}

.show-time {
    background-color: var(--color-primary);
    color: white;
    padding: 20px;
    flex-shrink: 0;
    text-align: center;
    width: 140px;
    font-size: 1.1em;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.show-details { padding: 15px; flex-grow: 1; display: flex; align-items: center; }
.show-image { width: 300px; height: 150px; margin-right: 15px; border-radius: 4px; object-fit: cover; border: 2px solid var(--color-secondary); }
.show-text-content h3 { margin: 0 0 5px 0; color: var(--color-secondary); font-size: 1.4em; }
.show-text-content .dj { font-style: italic; color: #a0a0c0; margin-bottom: 8px; }


/* grazybeats_style.css - GALLERY ANZEIGE KORRIGIERT UND MIT PULS */

/* 1. Galerie-Container */
#image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}

/* 2. Basis-Stil für alle Vorschaubilder */
.gallery-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    border: 3px solid transparent; /* Platzhalter für den späteren Rahmen */
    border-radius: 5px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s; /* Glatte Übergänge */
}

/* 3. Hover-Effekt */
.gallery-thumbnail:hover {
    transform: scale(1.05);
}

/* 4. Animations-Definition: Pulsierender Effekt */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(0, 123, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

/* 5. Wichtig: Stil für das aktuell ausgewählte Bild (Final und Animiert) */
.gallery-thumbnail.selected {
    border: 3px solid #007bff; /* Blauer Hauptrahmen (kann in Ihre Wunschfarbe geändert werden) */
    transform: scale(1.05); /* Bleibt leicht vergrößert */
    animation: pulse 1.5s infinite; /* Wendet die Puls-Animation an */
}

/* grazybeats_style.css */

#drop-zone {
    /* Aktueller Style ist: border: 2px dashed #ccc; padding: 20px; text-align: center; cursor: pointer; 
background: #222; */
    
    /* Hintergrundfarbe ändern (z.B. dunkleres Grau) */
    background: #222; 
    
    /* Randfarbe und Stil ändern (z.B. eine dicke, gepunktete, blaue Linie) */
    border: 3px dotted #fff; 
    
    /* Rand abrunden */
    border-radius: 8px; 
    
    /* Größe der Zone (falls nötig) */
    min-height: 100px; 
    
    /* Textfarbe ändern (wenn der Hintergrund dunkler wird) */
    color: #fff; 
}
/* grazybeats_style.css */

#drop-zone {
    /* Schriftart ändern (ersetzen Sie 'Arial' durch Ihre gewünschte Schriftart) */
    font-family: 'Arial', sans-serif;
    
    /* Schriftgröße ändern (z.B. größer für bessere Sichtbarkeit) */
    font-size: 1.1em;
    
    /* Schriftgewicht ändern (fetter oder normal) */
    font-weight: normal; 
    
    /* Zeilenhöhe anpassen */
    line-height: 1.4;
}

/* Optional: Die Schrift für den Hervorhebungs-Zustand ändern (wenn man das Bild darüber zieht) */
#drop-zone.highlight {
    background-color: #222; /* Ein helles Blau, wenn man drüber zieht */
    border-color: #; /* Dunkelblau für den Rahmen */
}

/* grazybeats_style.css */

/* Entfernt den Standardrahmen und das Standard-Padding vom <fieldset>-Element */
fieldset {
    border: none; /* Entfernt den Rahmen */
    padding: 0;   /* Optional: Setzt den internen Abstand zurück, falls nicht benötigt */
    margin: 0;    /* Optional: Setzt den externen Abstand zurück */
}

/* ========================================================= */
/* MEDIA QUERY FÜR MOBILE ANSICHT (Zusätzliche Regeln) */
/* ========================================================= */
@media (max-width: 768px) {
    /* 1. Generelle Formatierung der Sendungseinträge */
    /* Dies zielt auf den Hauptcontainer einer einzelnen Sendung ab */
    .sendungs-eintrag { /* PASSE DIESEN KLASSENNAMEN AN! */
        /* Stellt sicher, dass das Element die volle Breite einnimmt */
        width: 100% !important; 
        /* Entfernt alle Float- oder Flexbox-Regeln, die die Stapelung verhindern */
        float: none !important; 
        display: block !important;
        box-sizing: border-box; /* Wichtig, damit Padding und Border zur Breite gehören */
        min-height: auto;
    }
    
    /* 2. Formatierung der inneren Elemente (Uhrzeit und Bild) */
    
    /* Box für die Uhrzeit */
    .uhrzeit-box { /* PASSE DIESEN KLASSENNAMEN AN! */
        width: 100% !important; /* Volle Breite für die Uhrzeit */
        float: none !important;
        text-align: center;
        padding-bottom: 10px; /* Abstand zur Trennung vom Bild */
        font-size: 1.5em; /* Uhrzeit größer machen */
    }

    /* Bildbox muss jetzt auch die volle Breite einnehmen */
    .bild-box, 
    .sendungs-bild { /* PASSE DIESE KLASSENNAMEN AN! */
        width: 100% !important; 
        float: none !important;
        height: auto !important; /* Höhe automatisch anpassen */
        max-width: 100%;
    }

    /* Sicherstellen, dass die Bilder responsiv sind */
    .sendungs-bild img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    /* Die Hauptüberschrift anpassen, damit sie nicht zu groß ist */
    .week-display {
        font-size: 1.5em;
        padding: 5px;
    }
}

/* ========================================================= */
/* MEDIA QUERY FÜR MOBILE ANSICHT (max. 768px) */
/* Stellt sicher, dass die Show-Cards stapeln */
/* ========================================================= */
@media (max-width: 768px) {
    
    /* 1. Show Card: Deaktiviert das horizontale Flex-Layout */
    .show-card {
        /* WICHTIG: Erzwingt das Stapeln der Elemente untereinander */
        display: block !important; 
        width: 100% !important;
        /* Die Ecken unten müssen auf mobilen Geräten ebenfalls abgerundet werden, 
           da die Uhrzeit jetzt die volle Breite einnimmt */
        border-radius: 8px; 
    }
    
    /* 2. Show Time (Uhrzeit): Nimmt die volle Breite ein */
    .show-time {
        /* Überschreibt die feste Breite von 140px */
        width: 100% !important; 
        /* Überschreibt flex-shrink: 0, wenn nötig */
        flex-shrink: 1 !important; 
        /* Setzt die Ecken oben links/rechts auf 8px und unten auf 0 */
        border-radius: 8px 8px 0 0; 
        padding: 15px 0; /* Etwas weniger vertikales Padding auf Handy */
    }

    /* 3. Show Details: Passt sich an und nimmt volle Breite ein */
    .show-details {
        /* Wichtig: Entfernt Flex-Eigenschaften und überschreibt Ränder/Padding */
        display: block !important; 
        padding: 10px;
    }
    
    /* 4. Show Image: Stapelt sich und nimmt die volle Breite ein */
    .show-image {
        /* Überschreibt die feste Breite von 300px */
        width: 100% !important; 
        height: auto !important; /* Passt die Höhe proportional an */
        max-width: 100%;
        margin-right: 0; /* Entfernt den rechten Rand, da Bild nun oben/unten steht */
        margin-bottom: 10px; /* Fügt Abstand zum Text hinzu */
        object-fit: contain; /* Stellt sicher, dass das Bild sichtbar ist, ohne zu beschneiden */
    }
    
    /* 5. Bild-Tag: Sorgt für korrektes Skalieren */
    .show-image img {
        width: 100%;
        height: auto;
    }
}