body {

            font-family: Arial, sans-serif;

            text-align: center;

            margin: 0;

            padding: 0;

            overflow-x: hidden;

        }

        .alert {

            background-color: #ffcccc; /* hellrot */

            color: #333; /* dunkle Schriftfarbe für gute Lesbarkeit */

            padding: 20px; /* Innenabstand */

            text-align: center; /* Text zentrieren */

            font-size: 18px; /* Schriftgröße */

            border: 1px solid #ff0000; /* Roter Rand */

            margin: 10px 0; /* Außenabstand oben und unten */

            border-radius: 5px; /* Abgerundete Ecken */

        }



        .success {

            background-color: #ccffcc; /* hellgrün */

            color: #333; /* dunkle Schriftfarbe für gute Lesbarkeit */

            padding: 20px; /* Innenabstand */

            text-align: center; /* Text zentrieren */

            font-size: 18px; /* Schriftgröße */

            border: 1px solid #00aa00; /* Grüner Rand */

            margin: 10px 0; /* Außenabstand oben und unten */

            border-radius: 5px; /* Abgerundete Ecken */

        }



        .alert p {

            margin: 0; /* Entfernt den Standard-Außenabstand des p-Tags */

        }

        #footer {

            padding: 50px;

        }

        footer {

            font-size: 10px;

            text-align: center;

            padding: 20px;

            background-color: #f0f0f0;

            color: #808080;

        }

        .footeruserdaten {

            font-size: 10px;

            color: #808080;

        }

        .button {

            font-size: 20px;

            color: white; /* Textfarbe */

            padding: 20px;

            margin: 10px 0;

            width: 100%;

            cursor: pointer;

            border: none;

            border-radius: 10px;

            background-color: #8bc53d;

            box-sizing: border-box;

        }

        .button:hover {

            font-size: 20px;

            color: white; /* Textfarbe */

            padding: 20px;

            margin: 10px 0;

            width: 100%;

            cursor: pointer;

            border: none;

            border-radius: 10px;

            background-color: #45a049;

            box-sizing: border-box;

        }

        .buttondabkunde {

            font-size: 20px;

            color: #333; /* Textfarbe */

            padding: 20px;

            margin: 10px;

            width: 80%;

            cursor: pointer;

            border: none;

            border-radius: 10px;

            background-color: #ccc;

        }

        .buttondabstart {

            font-size: 20px;

            color: white; /* Textfarbe */

            padding: 20px;

            margin: 10px;

            width: 80%;

            cursor: pointer;

            border: none;

            border-radius: 10px;

            background-color: #8bc53d;

        }

        .buttondabstart:hover {

            font-size: 20px;

            color: white; /* Textfarbe */

            padding: 20px;

            margin: 10px;

            width: 80%;

            cursor: pointer;

            border: none;

            border-radius: 10px;

            background-color: #45a049;

        }

        .buttondabende {

            font-size: 20px;

            color: rgb(209, 0, 0); /* Textfarbe */

            padding: 20px;

            margin: 10px;

            width: 80%;

            cursor: pointer;

            border: none;

            border-radius: 10px;

            background-color: #8bc53d;

        }

        .buttondabende:hover {

            font-size: 20px;

            color: rgb(209, 0, 0); /* Textfarbe */

            padding: 20px;

            margin: 10px;

            width: 80%;

            cursor: pointer;

            border: none;

            border-radius: 10px;

            background-color: #45a049;

        }

        .buttonsenden {

            font-size: 20px;

            color: white; /* Textfarbe */

            padding: 20px;

            margin: 10px;

            width: 80%;

            cursor: pointer;

            border: none;

            border-radius: 10px;

            background-color: #8bc53d;

        }

        .buttonsenden:hover {

            font-size: 20px;

            color: white; /* Textfarbe */

            padding: 20px;

            margin: 10px;

            width: 80%;

            cursor: pointer;

            border: none;

            border-radius: 10px;

            background-color: #45a049;

        }

        .buttonadministration {

            font-size: 20px;

            padding: 20px;

            margin: 10px 0;

            width: 100%;

            cursor: pointer;

            border: 2px solid #333;

            border-radius: 10px;

            background-color: #FF0000;

            box-sizing: border-box;

        }

        .buttonzeitstempeln {

            font-size: 20px;

            color: white; /* Textfarbe */

            border: none; /* Keine Ränder */

            padding: 20px;

            margin: 10px;

            cursor: pointer;

            border-radius: 10px;

            background-color: #8bc53d;

        }

        .buttonzeitstempeln:hover {

            font-size: 20px;

            color: white; /* Textfarbe */

            border: none; /* Keine Ränder */

            padding: 20px;

            margin: 10px;

            cursor: pointer;

            border-radius: 10px;

            background-color: #45a049;

        }

        .buttonschmal {

            font-size: 16px;

            color: white; /* Textfarbe */

            border: none; /* Keine Ränder */

            padding: 10px;

            margin: 10px;

            cursor: pointer;

            border-radius: 10px;

            background-color: #8bc53d;

            text-decoration: none;

        }

        .buttonschmal:hover {

            background-color: #45a049;

            text-decoration: none;

        }

        .buttonloeschen {

            font-size: 20px;

            padding: 20px;

            margin: 10px;

            cursor: pointer;

            border: 2px solid #333;

            border-radius: 10px;

            background-color: #FF0000;

        }

        .buttonloeschenschmal {

            font-size: 16px;

            padding: 10px;

            margin: 10px;

            cursor: pointer;

            border: none;

            border-radius: 10px;

            background-color: #ccc;

            text-decoration: none;

        }

        .buttonloeschenschmal:hover {

            background-color: #FF0000;

        }

        .buttonlogout {

            font-size: 20px;

            padding: 20px;

            margin: 10px;

            cursor: pointer;

            border: 2px solid #333;

            border-radius: 10px;

            background-color: #ccc;

        }

        .buttonlogout[type="submit"]:hover {

            font-size: 20px;

            padding: 20px;

            margin: 10px;

            cursor: pointer;

            border: 2px solid #333;

            border-radius: 10px;

            background-color: #FF0000;

        }

        .buttonzurueck {

            font-size: 20px;

            padding: 20px;

            margin: 10px;

            cursor: pointer;

            border: 2px solid #333;

            border-radius: 10px;

            background-color: #ccc;

        }

        .menu {

            font-size: 20px;

            margin: 0 auto;

            width: min(calc(100% - 24px), 1180px);

            padding: 20px;

            border: 2px solid #333;

            border-radius: 10px;

            background-color: #f0f0f0;

            box-sizing: border-box;

            overflow: visible;

        }



        @media (max-width: 820px) {

            .menu {

                width: calc(100% - 12px);

                padding: 16px;

            }

        }

        .tabelleauswertungdab {

            font-size: 14px; /* Setzt die Textgröße für die Tabelle */

        }

        .tabelleauswertungdab th, .tabelleauswertungdab td {

            padding: 8px; /* Setzt das Padding für Zellen, um sie kompakter zu machen */

            text-align: left; /* Ausrichtung des Textes in den Zellen */        }

        .labelselect {

            font-size: 20px;

        }

        .readonly-field { /*Ist für labelselect readonly Felder */

            background-color: #ccc; /* Hellgrau */

        }

        .textarea {

             font-size: 20px;

        }

        .start {

            color: #8bc53d; /* Textfarbe für "Start" */

        }



        .end {

            color: #FF0000; /* Textfarbe für "Ende" */

        }

        #login-form {

            display: block;

        }

        .login-form {

            font-size: 20px;

            margin: auto;

            width: 70%;

            padding: 20px;

            border: 2px solid #333;

            border-radius: 10px;

            background-color: #f0f0f0;

        }

        .login-form input[type="text"],

        .login-form input[type="password"],

        .login-form input[type="submit"] {

            font-size: 20px;

            width: 100%;

            padding: 12px 20px;

            margin: 8px 0;

            display: inline-block;

            border: 1px solid #ccc;

            border-radius: 4px;

            box-sizing: border-box;

        }

        .login-form input[type="submit"] {

            font-size: 20px;

            background-color: #8bc53d;

            color: white;

            cursor: pointer;

        }

        .login-form input[type="submit"]:hover {

            font-size: 20px;

            background-color: #45a049;

            color: white;

            cursor: pointer;

        }