/* ================================================= */
/* SCROLLBAR STYLES (Transparent Track)  */
/* ================================================= */

/* FÜR WEBKIT-BASIERTE BROWSER (Chrome, Edge, Safari): Transparente Scrollbalken */
::-webkit-scrollbar {
    width: 10px; 
}
::-webkit-scrollbar-track {
    background: transparent; 
}
::-webkit-scrollbar-thumb {
    background-color: #888888;
    border-radius: 5px; 
}
::-webkit-scrollbar-thumb:hover {
    background-color: #555555;
}

/* ================================================= */
/* SCROLLING EINSTELLUNGEN                 */
/* ================================================= */
html {
    /* Lässt das HTML-Element Scrollen zu */
    overflow-y: auto;
}


/* ================================================= */
/* BASE STYLES & LAYOUT                  */
/* ================================================= */

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #1a1a2e; 
    color: #f0f0f0; 
    line-height: 1.6;
    
    /* SCROLLEN NUR BEI BEDARF */
    overflow-y: auto; 
    
    /* FÜR FIREFOX: Scrollbalken-Stil setzen */
    scrollbar-width: thin; 
    scrollbar-color: #888888 transparent;
}

h1, h2 {
    color: #f0f0f0; 
    border-bottom: 2px solid #FFA500;
    padding-bottom: 5px;
    margin-top: 25px;
}

a {
    color: #00bcd4; 
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ================================================= */
/* ADMIN.PHP STYLES                      */
/* ================================================= */

/* Admin-Zentrierung (übernommen von admin.php) */
.admin-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.admin-container {
    width: 800px; 
    max-width: 95%;
}

/* Admin Tabelle */
table {
    border-collapse: collapse;
    width: 100%; 
    margin-bottom: 20px;
    background-color: #2b2b40; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

th, td {
    border: 1px solid #444; 
    padding: 8px;
    text-align: left;
}

th {
    background-color: #383850; 
}

/* Admin Formulare */
form {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #444;
    background-color: #2b2b40;
}

input[type=text], input[type=file] {
    padding: 4px; 
    margin: 3px; 
    border: 1px solid #555;
    border-radius: 3px;
    background-color: #383850; 
    color: #f0f0f0;
}

button {
    padding: 5px 10px;
    background-color: #FFA500;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: #cc8400;
}

/* ================================================= */
/* TEAM.PHP STYLES (Responsive) - ANGEPASST AUF GRID FÜR 4 SPALTEN */
/* ================================================= */

.team-page body { 
    background-color: #1a1a2e; 
    color: #ccc;
}
.team-page h1, .team-page h2 {
    color: white;
}

/* Container verwendet CSS Grid, um 4 gleichmäßige Spalten zu erzwingen */
.team-container {
    display: grid;
    /* 4 Spalten mit gleicher Breite (1fr) */
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; 
    /* Maximale Breite, die Platz für 4 Karten lässt */
    max-width: 700px; 
    margin: 0 auto;
    justify-content: center; /* Grid zentriert sich nicht mit justify-content, aber der Container ist zentriert */
    padding: 0 10px;
}

.dj-card {
    /* width: 150px; wird durch Grid ignoriert, da es 1fr ist */
    text-align: center;
    border: 1px solid #444;
    padding: 8px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.8);
    background-color: #2b2b40; 
    color: #ccc;
    border-radius: 5px;
}

.dj-card img {
    width: 100px;
    height: 100px;
    object-fit: cover; 
    display: block; 
    margin: 0 auto;
    border-radius: 8px;
}

.dj-name {
    font-weight: bold;
    margin-top: 6px; 
    color: #FFA500; 
    text-shadow: 0 0 5px rgba(255, 165, 0, 0.5);
    font-size: 0.95em; 
}

.dj-wohnort {
    color: white; 
    font-size: 0.9em; 
}


/* Media Query für Bildschirme mit begrenztem Platz (z.B. große Tablets) */
@media (max-width: 700px) {
    .team-container {
        /* Ab 700px nur noch 3 Spalten */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Media Query für Tablets (z.B. mittlere Bildschirme) */
@media (max-width: 500px) {
    .team-container {
        /* Ab 500px nur noch 2 Spalten */
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%; 
    }
}

/* Media Query für sehr kleine Geräte (Smartphones) */
@media (max-width: 350px) {
    .team-container {
        /* Auf sehr kleinen Bildschirmen nur 1 Spalte */
        grid-template-columns: 1fr;
    }
}