/* Allgemeine Stile */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f3e9e3; /* Hellbrauner Hintergrund */
    color: #4a3b31; /* Dunkelbrauner Text */
}

/* Navigationsleiste */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #8b5e3c; /* Dunkelbraun */
    color: white;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar .menu-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar img {
    max-height: 40px;
}

/* Login-Bereich - Versteckt in der mobilen Ansicht */
.login-form {
    display: none;
}

@media (min-width: 769px) {
    .login-form {
        display: flex; /* Zeigt das Login-Formular auf größeren Bildschirmen */
        align-items: center;
        gap: 10px;
    }
}

/* Benachrichtigungen */
.notification-container {
    position: fixed;
    padding: 15px;
    max-width: 90%; /* Maximale Breite auf Mobilgeräten */
    background-color: white;
    color: black;
    border-radius: 8px;
    font-size: 14px;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 1000;
}

/* Hauptcontainer */
.container {
    padding: 10px;
    margin: auto;
}


/* Datum- und Uhrzeit-Container für mobile Ansicht */
@media (max-width: 768px) {
    .date-time-container {
        flex-direction: column; /* Stapelt Elemente nur auf Mobilgeräten */
        gap: 5px;
        text-align: center;
        font-size: 16px;
    }
}


/* Navigation-Buttons */
.navigation-container {
    display: none; /* Versteckt die Navigation auf Mobilgeräten */
}

/* Buchungssystem-Container für mobile Ansicht */
@media (max-width: 768px) {
    .left-container {
        flex: 1; /* Nimmt den verfügbaren Platz ein */
        padding: 10px;
        margin: 0 auto; /* Zentriert den Container */
        background-color: #f7f3e9;
        border: 1px solid #d2b48c;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        /* Entferne die maximale Höhe und ermögliche dynamische Anpassung */
        max-height: none;
        height: auto;

        /* Verhindere das Scrollen im Container */
        overflow-y: hidden;
    }

    /* Stile für das Formular, damit es sich anpasst */
    .left-container form {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Abstand zwischen Formularfeldern */
    }

    /* Eingabefelder */
    .left-container input,
    .left-container select {
        width: 100%; /* Breite anpassen */
        font-size: 16px;
        padding: 10px;
        border: 1px solid #d2b48c;
        border-radius: 5px;
    }

    /* Button */
    .left-container button {
        width: 100%;
        padding: 12px 20px;
        font-size: 16px;
        background-color: #8b4513;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .left-container button:hover {
        background-color: #a0522d;
    }
}

/* Anwesenheitstabelle für mobile Ansicht */
/* Mobile Ansicht */
@media (max-width: 768px) {
    .user-container {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 15px;
        background-color: #f9f7f5;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Kartenähnliches Design */
    }

    /* Header mit Name */
    .user-header {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }

    .user-name {
        font-size: 18px;
        font-weight: bold;
        color: #4a3b31; /* Dunkelbraun */
    }

    /* Körper mit den Terminen */
    .user-body {
        padding-top: 5px;
        border-top: 1px solid #eee;
    }

    .user-row {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
    }

    .label {
        font-weight: bold;
        color: #4a3b31; /* Dunkelbraun */
    }

    .value {
        color: #333; /* Dunkelgrau für die Werte */
    }
}


/* Responsive Layout */
@media (max-width: 768px) {
    /* Container */
    .two-columns {
        flex-direction: column; /* Stapelt Container vertikal */
        gap: 10px;
    }

    .left-container,
    .right-container {
        width: 100%; /* Volle Breite für beide Container */
    }

    /* Tabelle - Mobil */
    .attendance-table,
    .attendance-table th,
    .attendance-table td {
        display: block; /* Block-Darstellung für Mobilgeräte */
        width: 100%;
    }

    .attendance-table td {
        text-align: right;
        position: relative;
        padding-left: 50%;
    }

    .attendance-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: calc(50% - 20px);
        text-align: left;
        font-weight: bold;
    }

    .attendance-table tr {
        margin-bottom: 10px;
        border-bottom: 1px solid #d2b48c;
    }
}