body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: #2c3e50;
}

table {
    width: 100%;
    border-collapse: collapse;
}

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

th {
    background-color: #f2f2f2;
}


form {
           margin-right: 10px; 
     }

a {
    display: inline-block; /* Link als Blockelement */
    margin-top: 10px; /* Abstand zum Button */
    color: #3498db;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.input-field {
    padding: 8px; /* Standard Padding */
    border: 1px solid #ccc; /* Standard Border */
    border-radius: 4px; /* Standard Border-Radius */
    width: 100%; /* Breite auf 100% setzen */
    box-sizing: border-box; /* Box-Sizing für Padding und Border */
    background-color: white; /* Hintergrundfarbe auf weiß setzen */
    color: black; /* Textfarbe auf schwarz setzen */
}

/* Optional: Stil für Input-Felder im Fokus */
.input-field:focus {
    border-color: #3498db; /* Farbe ändern beim Fokussieren */
    outline: none; /* Entfernen des Standard-Fokus-Rahmens */
    background-color: #f0f8ff; /* Optional: Heller Hintergrund beim Fokussieren */
}

.submit-button {
    padding: 5px 10px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Stil für den Submit-Button im Hover-Zustand */
.submit-button:hover {
    background-color: #2980b9; /* Dunklerer Farbton bei Hover */
}

input[type="password"] {
    width: 100%; /* Eingabefelder gleich lang */
    padding: 10px; /* Padding für die Eingabefelder */
    margin-bottom: 10px; /* Abstand zwischen den Eingabefeldern */
    border: 1px solid #ccc; /* Rahmen für die Eingabefelder */
    border-radius: 5px; /* Abgerundete Ecken */
}

input[type="text"] {
    width: 100%; /* Eingabefelder gleich lang */
    padding: 10px; /* Padding für die Eingabefelder */
    margin-bottom: 10px; /* Abstand zwischen den Eingabefeldern */
    border: 1px solid #ccc; /* Rahmen für die Eingabefelder */
    border-radius: 5px; /* Abgerundete Ecken */
}

input[type="submit"] {
            padding: 10px; /* Padding für den Button */
            background-color: #3498db; /* Hintergrundfarbe */
            color: white; /* Textfarbe */
            border: none; /* Kein Rahmen */
            border-radius: 5px; /* Abgerundete Ecken */
            cursor: pointer; /* Zeiger-Cursor */
            width: 196px; /* Button gleich lang wie Eingabefelder */
        }


input[type="button"] {
    padding: 10px; /* Padding für den Button */
    background-color: #3498db; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    border: none; /* Kein Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger-Cursor */
    width: 196px; /* Button gleich lang wie Eingabefelder */
}

/* Stil für den Submit-Button */
input[type="button"],
.submit-button {
    padding: 5px 10px; /* Padding für den Button */
    background-color: #3498db; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    border: none; /* Kein Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger-Cursor */
    font-size: 16px; /* Schriftgröße */
}

/* Stil für den Submit-Button */
input[type="submit"],
.submit-button {
    padding: 5px 10px; /* Padding für den Button */
    background-color: #3498db; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    border: none; /* Kein Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger-Cursor */
    font-size: 16px; /* Schriftgröße */
}

/* Stil für den Link, der wie ein Button aussieht */
a.button-link {
    text-decoration: none; /* Textunterstreichung entfernen */
}

a.button-link button {
    padding: 5px 10px; /* Padding für den Button */
    background-color: #3498db; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    border: none; /* Kein Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger-Cursor */
    font-size: 16px; /* Schriftgröße */
    width: 196px; 
}

/* Optional: Stil für den Button im Hover-Zustand */
a.button-link button:hover,
input[type="submit"]:hover {
    background-color: #2980b9; /* Dunklerer Farbton bei Hover */
}

/* Optional: Stil für den Button im Hover-Zustand */
a.button-link button:hover,
input[type="submit"]:hover {
    background-color: #2980b9; /* Dunklerer Farbton bei Hover */
}

.header-container {
    display: flex;
    justify-content: space-between; /* Platz zwischen Überschrift und Button */
    align-items: center; /* Vertikale Ausrichtung */
    padding: 10px;
}

.hamburger {
    cursor: pointer;
    display: none; /* Standardmäßig ausblenden */
    width: 30px;
    height: 30px;
    position: relative;
}

.hamburger div {
    background-color: #3498db;
    height: 4px;
    width: 100%;
    position: absolute;
    transition: all 0.3s;
}

.hamburger div:nth-child(1) {
    top: 0;
}

.hamburger div:nth-child(2) {
    top: 10px; /* Striche enger zusammen */
}

.hamburger div:nth-child(3) {
    top: 20px;
}

.menu-button {
    padding: 5px 10px; /* Padding für den Button */
    background-color: #3498db; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    border: none; /* Kein Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger-Cursor */
    font-size: 16px; /* Schriftgröße */
    position: relative; /* Position relativ für das Dropdown */
}

.menu {
    display: none; /* Standardmäßig ausblenden */
    position: absolute;
    top: 90px; /* Direkt unter dem Button */
    right: 0;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 1000;
    width: 240 px; /* Breite des Menüs */
}

.menu a {
    display: block; /* Links untereinander anzeigen */
    padding: 10px 15px; /* Padding für die Links */
    text-decoration: none;
    color: #3498db;
}

.menu a:hover {
    background-color: #f0f0f0;
}

/* CSS für mobile Geräte */
@media (max-width: 417px) {
    .menu {
        top: 130px; /* Direkt unter dem Button */
    }
}

@media (max-width: 620px ) and ( min-width: 418px ) {
    .menu {
        top: 110px; /* Direkt unter dem Button */
    }
}


/* Zeile wird rot, wenn der Workshop voll ist */
tr.full {
    background-color: #ffdddd;   /* hell‑rot, gut lesbar */
}

        
/*            .hamburger {
               display: inline-block; /* Hamburger-Menü anzeigen */
 /*           }
            .menu-button {
                display: none; /* Menü-Button auf Mobilgeräten ausblenden */
/*            }
            
        }

        /* CSS für Desktop */
        @media (min-width: 622px) {
            .menu {
                top: 90px; /* Direkt unter dem Button */
            }
        }
/*        
            .menu-button {
                display: inline-block; /* Menü-Button auf Desktop anzeigen */
 /*           }
        }