*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

:root{
    --color-green: #013E36;
    --color-background-nav: #014a3f;
}

@font-face {
    font-family: "GreatVibes";
    src: url("fonts/Great_Vibes/GreatVibes-Regular.ttf");
}
 
@font-face {
    font-family: "DancingScript";
    src: url("fonts/DancingScript/static/DancingScript-Regular.ttf");
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

@media only screen and (max-width: 768px){
    
/******************************************/
input{
    font-size: 14px;
}
/* Header */
header{
    background: var(--color-green);
    height: auto;
    padding: 0 10%;
}

#header{
    display: none;
}

#header-mobile{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
}

#header-mobile #logo{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#header-mobile #logo img{
    width: auto;
    height: calc(200px - 40px);
    padding: 0%;
    object-fit: cover;
}

#header-mobile #title{
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#header-mobile #title h1{
    color: white;
}

#header-mobile #header-nav-elemt{
    width: 15%;
    display: flex;
    flex-direction: row;
}

.header-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
    float: right;
    width: 100%;
    padding: 20px 0 10px 0;
 }
 
 .account-icon, .logout-icon {
    color: white;
    font-size: 24px;
    transition: color 0.3s ease;
    float: right;
 }
 
 .account-icon:hover, .logout-icon:hover {
    color: white; 
 }

 /*Zurück-Button*/
.back-button-container {
    display: flex;
    justify-content: flex-start; 
    padding: 20px 10px;
}


.back-button {
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    background-color: var(--color-green, #004d40);
    color: white;
    font-size: 12px; 
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.back-button:hover, .back-button:active {
    background-color: var(--color-dark-green, #00332a);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}


.back-button i {
    font-size: 14px;
}


/* Buttons Nav Elements */
#nav-elements{
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.nav-element {
    width: 150px;
    height: 150px;
    background: #f8f9fa; 
    text-decoration: none;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.nav-element:hover {
    background: var(--color-background-nav);
    color: white;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
}

.nav-element h3 {
    font-size: 18px;
    margin: 10px 0 5px 0;
    color: #343a40;
    transition: color 0.3s ease; 
    text-overflow: ellipsis;
    max-width: 130px;
    word-break: break-word;
}

.nav-element:hover h3 {
    color: white;
}

.nav-element i {
    font-size: 50px;
    color: var(--color-background-nav);
    transition: color 0.3s ease;
}

.nav-element:hover i {
    color: white;
}

.collaps-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 600px;
    max-height: 5000px;
    opacity: 1;
    overflow: hidden;
    padding: 10px 0;
    margin: 10px auto;
    transform: scaleY(1);
    transition: 
        max-height 0.8s ease-in-out, 
        opacity 0.8s ease-in-out, 
        padding 0.6s ease-in-out, 
        margin-top 0.6s ease-in-out, 
        transform 0.8s ease-in-out, 
        box-shadow 0.4s ease-in-out; 
}

.collapsListe{
    flex-direction: column;
    width: 100% !important;
    max-width: 500px !important
}


.collaps-content.collapsed {
    max-height: 0; 
    opacity: 0; 
    padding: 0; 
    margin-top: 0; 
    transform: scaleY(0.95); 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); 
    transition: 
        max-height 0.8s ease-in-out, 
        opacity 0.8s ease-in-out, 
        padding 0.6s ease-in-out, 
        margin-top 0.6s ease-in-out, 
        transform 0.8s ease-in-out, 
        box-shadow 0.4s ease-in-out;
}

.collaps-header {
    cursor: pointer; 
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}


#iconRight1{
    display: none;
}


#iconRight2{
    display: none;
}


#iconRight3{
    display: none;
}


#iconRight10{
    display: none;
}


#iconRight11{
    display: none;
}


#iconRight12{
    display: none;
}

[id^="iconDown"] {
    display: block;
    font-size: 20px;
}

.collaps-content-Liste {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-height: 0px;
    opacity: 0;
    overflow: hidden;
    padding: 0px;
    margin: 10px auto;
    transform: scaleY(1); 
    width: 100%;
}


.collaps-content-Liste.collapsedListe {
    max-height: 5000px; 
    opacity: 1; 
    padding: 0; 
    margin-top: 0; 
    transform: scaleY(0.95); 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); 
    width: 100%;
}

.collaps-content-Liste.collapsedListe table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9em;
    color: #333;
    table-layout: auto;
    white-space: nowrap;
}

.collaps-content-Liste.collapsedListe table thead {
    background-color: var(--color-green);
    color: #ffffff;
}

.collaps-content-Liste.collapsedListe table th {
    position: sticky;
    top: 0;
    background-color: var(--color-green);
    z-index: 10;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
}

.collaps-content-Liste.collapsedListe table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

.collaps-content-Liste table tbody tr:hover {
    background-color: #f5f5f5;
    padding: 10px 0;
}

.collaps-content-Liste table tbody tr:last-child td {
    border-bottom: none;
}

/* Footer */

    footer{
        margin-top: 40px;
        background: var(--color-green);
    }

    footer img{
        width: 40%;
        height: auto;
        margin-left: 30%;
    }

    /*Öffnungszeiten*/
    #oeffnungszeiten{
        padding: 5%;
        text-align: center;
    }

    #oeffnungszeiten h2{
        font-family: "DancingScript";
        font-size: 50px;
        color: white;
        padding: 0 0 30px 0;
    }

    #oeffnungszeiten .tag{
        font-weight: 600;
        padding: 5px 50px;
        font-size: 15px;
        line-height: 150%;
        color: white;
    }

    #oeffnungszeiten .uhrzeit, #oeffnungszeiten #Ruhetag{
        font-size: 14px;
        padding: 10px;
        line-height: 150%;
        color: white;
    }

    #oeffnungszeiten a{
        color: white;
        text-decoration: none;
        font-size: 14px;
    }

    /*Rechtliches im footer*/
    .footer-rechtliches{
        display: flex;
        padding: 15px;
        flex-direction: row;
        gap: 5%;
        justify-content: center;
    }

    .footer-rechtliches a{
        color: white;
        text-decoration: none;
        font-size: 11px;
        
    }

    .footer-rechtliches a:hover{
         color: rgb(173, 173, 173);
    }

#LoginForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

#LoginForm form {
    background: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    margin: 20px;
    border: 1px solid #e0e0e0;
}

#LoginForm label {
    display: block;
    color: #333333;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

#LoginForm input[type="email"],
#LoginForm input[type="password"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 20px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

#LoginForm input[type="email"]:focus,
#LoginForm input[type="password"]:focus {
    background: #ffffff;
    border-color: #004d2c;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 77, 44, 0.1);
}

#LoginForm input[type="submit"] {
    width: 100%;
    padding: 16px;
    background: var(--color-green);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#LoginForm  input[type="submit"]:hover {
    background: var(--color-green);
    transform: translateY(-1px);
}

#LoginForm #pw-label {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: #e0e0e0;
    font-size: 14px;
}

#LoginForm #pw-label a {
    font-size: 13px;
    color: #0969DA;
    text-decoration: none;
    transition: color 0.2s ease;
}

#LoginForm #pw-label a:hover {
    text-decoration: underline;
}

#LoginForm #pw-label label {
    margin: 0;
    width: 50%;
    display: flex;
    align-items: center;
}

#LoginForm p{
    font-weight: 600;
    padding: 10px 0;
    font-size: 14px;
}

/* Passwort vergessen */

.success-message {
    background: rgba(0, 0, 0, 0.85);
    padding: 40px;
    border-radius: 8px;
    color: #ffffff;
    text-align: center;
    max-width: 400px;
    margin: 20px auto;
    line-height: 1.5;
}

/*Überschrift der Seiten*/
.h2 {
    background: var(--color-green);
    color: white;
    padding: 1rem 2rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .h2 h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-align: center;
  }

  /*Formulare*/
form{
    width: 100%;
}

  .form{
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

.form label {
    width: auto;
    display: inline-block;
    margin: auto;
    vertical-align: top;
    text-align: left;
    margin-bottom: 15px;
    color: black;
    width: 100%;
    display: inline-block;
    text-align: left;
    color: black;
}

.form label.errorMsg {
    width: 60%;
    display: inline-block;
    margin: 0 5px 15px 0;
    vertical-align: top;
    text-align: right;
    color: var(--color-green);
    text-align: right;
    color: red;
}

.form input, .form select, .select-Mitarbeiter select {
    margin-left: 0%;
    width: 100%; 
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 15px;
    appearance: none;
    background: white;
    font-size: 14px;
    color: #333;
    min-height: 10px;
    width: 100%;
    border: 0.5px solid #333;
}

.form input[type="checkbox"]{
    appearance: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

select{
    appearance: none;
    border: 2px solid light-dark(rgb(118, 118, 118));
    background: white;
}

.form .container{
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 20px 10px 0 10px;
}

.container-speisekarte{
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 20px 10px 0 10px;
    width: 100%;
    margin-top: 50px;
}

.container-speisekarte input[type="submit"] {
    width: auto;
    margin-left: auto;
    margin-right: auto;
    background: var(--color-green);
    color: white;
    border: none;
    padding: 10px 20%;
    margin-bottom: 20px;
}

.form input[type="submit"] {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background: var(--color-green);
    color: white;
    border: none;
    padding: 10px 10px;
    margin-bottom: 20px;
}

.checkbox-Mitarbeiter{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
    text-align: center;
}

button{
    width: auto;
    padding: 4px;
    margin: 10px 0;
}

.checkbox-Mitarbeiter input {
    width: 20%;
}

#auswertung {
    width: 100%;
}

 .progress-ring::before {
    content: '';
    position: absolute;
    margin: 0 auto;
    width: 180px;  /* Größe des Lochs */
    height: 180px;
    background: #F4F4F4; /* Hintergrundfarbe des Zentrums */
    border-radius: 50%;
    z-index: 1;
}

#Fortschritt {
    display: none;
    font-size: 2em;
    color: white;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

.progress-ring .zeit{
    display: flex;
    flex-direction: column;
    text-align: center;
    z-index: 2;
    gap: 15px;
}

.zeitGeleistet, .zeitVon{
    font-size: 22px;
    color: black;
    font-weight: bold;
    text-align: center;
}


/* Anfragen */
.create-Anfrage {
    width: 95%;
    max-width: 1200px;
    margin: 25px auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.create-Anfrage form {
    width: 100%;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
}

.create-Anfrage form table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9em;
    color: #333;
    table-layout: auto;
    white-space: nowrap;
}

.create-Anfrage form table thead {
    background-color: var(--color-green);
    color: #ffffff;
}

.create-Anfrage form table th {
    position: sticky;
    top: 0;
    background-color: var(--color-green);
    z-index: 10;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
}

.create-Anfrage form table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

.create-Anfrage form table tbody tr:hover {
    background-color: #f5f5f5;
    padding: 10px 0;
}

.create-Anfrage form table tbody tr:last-child td {
    border-bottom: none;
}

.create-Anfrage input[type="submit"] {
    background-color: var(--color-green);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.create-Anfrage input[type="submit"]:hover {
    font-weight: bold;
}

.create-Anfrage form table td:first-child {
    text-align: center;
    vertical-align: middle;
}

.create-Anfrage form table input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
    position: relative;
    top: -1px;
}


/* Meine Zeitbuchungen */
#calendar {
    width: 100%;
    margin: 20px auto;
    border-radius: 10px;
}
.calendar-header {
    display: flex;
    width: 90%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.calendar-header button {
    padding: 10px 15px;
    font-size: 20px;
    background: var(--color-background-nav);
    color: white;
    border-radius: 5px;
}

.dayHeader{
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.days {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    overflow-x: auto;
}

.day {
    padding: 10px;
    font-weight: 600;
    background: white;
    border: 1px solid #ddd;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    height: 100%;
    max-width: calc(100vw / 7);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.day.today {
    background: var(--color-green);
    color: white;
}

.entry-dot {
    width: 6px;
    height: 6px;
    background-color: #013E36; /* Punktfarbe */
    border-radius: 50%;
    margin: 2px auto 0;
    display: block;
}

.day.today .entry-dot {
    background-color: white;
}

.yellow{
    background: yellow !important;
}

.day:has(.ruhetag) {
    background-color: #e8e8e8;
}

#password-hint{
    padding: 10px 10% 20px 10%;
}

/*Meine Zeiten*/
.zeit-card{
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin: 10px auto;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.zeit-card-row1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.zeit-card-item{
    display: flex;
    flex-direction: row;
}

.zeit-card-item-title{
    width: 175px;
}

.zeit-card-item .zeit{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.zeit-card-item .zeit p{
    text-align: left;
}

.zeit-card-row2, .urlaub-card-row2{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.urlaub-card-item{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.urlaub-card-item .urlaub{
    font-weight: 600;
}

.urlaub-card-item .urlaub-akzeptiert {
    color: #348D34;
}

/* Speisekarte */

.speisekarte-bereich {
    position: relative; 
    padding: 2.5% 5%;
    width: 100%;
}

.speisekarte-bereich img{
    width: 100%;
    height: auto;
}

.speisekarte-bereich::after {
    content: "";
    width: 90%;
    height: 2px;
    background-color: var(--color-green);
    position: absolute;
    bottom: -10px;
    left: 0;
    margin-left: 5%;
}

.speisekarte-bereich h2{
    text-align: center;
    font-family: "DancingScript";
    color: var(--color-green);
    font-size: 50px;
    min-height: 100px;
    height: auto;
    max-height: 300px;
    padding: 2.5%;
}

.speisekarte-bereich{
    background: white;
    border-radius: 10px;
    width: 90%;
    margin: 0 auto;
}

.speisekarte-form-h2{
    text-align: center;
    font-family: "DancingScript";
    color: var(--color-green);
    font-size: 50px;
    min-height: 100px;
    height: auto;
    max-height: 300px;
    padding: 2.5%;
    width: 100%;
    border: none;
    background: white;
    outline: none;
}

.speisekarte-bereich table{  
    width: 100%;
}

.speisekarte-bereich table tr{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.speisekarte-bereich table tr td:nth-child(1){
    width: 80%;
    padding: 2.5%;
    font-size: 30px;
    font-family: "DancingScript";
}

.speisekarte-form-bezeichnung {
    width: 100%;
    padding: 2.5%;
    font-size: 30px;
    font-family: "DancingScript";
    border: none;
    outline: none;
    background: #f4f4f4;
}

.speisekarte-bereich table tr td:nth-child(2){
    width: 20%;
    text-align: center;
    gap: 10px;
}

.preis-container{
    width: 20%;
    text-align: center;
}

.speisekarte-bereich table tr td p{
    font-size: 16px;
    padding: 1% 0%;
    line-height: 160%;
    font-family: sans-serif;
}

.speisekarte-form-beschreibung {
    font-size: 16px;
    padding: 1% 2.5%;
    line-height: 160%;
    font-family: sans-serif;
    outline: none;
    border: none;
    width: 100%;
    height: auto;
    resize: vertical;
    background: #f4f4f4;
}


.speisekarte-bereich table .wahlweise td:nth-child(1){
    padding: 1% 2.5%;
    width: 60%;
}

.speisekarte-bereich table .wahlweise td:nth-child(2){
    width: 40%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 5px;
    align-items: center;
}

.speisekarte-bereich table .wahlweise td h5{
    font-size: 15px;
    padding: 0;
    font-weight: 500;
    font-family: sans-serif;
}
.speisekarte-bereich table .wahlweise td p{
    padding: 0%;
    font-size: 14px;
}
.speisekarte-bereich table .wahlweise td i{
    font-size: 9px;   
    vertical-align: middle;
   
}
.speisekarte-bereich table .wahlweise td{
    font-size: 14px;
}

.wahlweise-container{
    display: flex;
    flex-direction: column;
    padding: 20px 0 0 0;
    width: 100%;
    gap: 10px;
}

.wahlweise{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 0 0 2.5%;
    gap: 20px;
    width: 100%;
    align-items: center;
}

.wahlweise-bezeichnung {
    font-size: 14px;
    padding: 1% 2.5%;
    width: 100%;
    border: none;
    background: #f4f4f4;
    outline: none;
    font-family: sans-serif;
}

.wahlweise-preis {
    font-size: 14px;
    width: 40%;
    border: none;
    background: #f4f4f4;
    outline: none;
    font-family: sans-serif;
}

.wahlweise-icon {
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    width: 1em;
    height: 1em;
}

.add-wahlweise-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 20px 20px 0 20px;
    width: 100%;
}

.wahlweise-bezeichnung-container, .wahlweise-preis-container{
    width: 40%;
}

.remove-wahlweise{
    width: 20%;
    text-align: center;
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.speisekarte-form-row1{
    display: flex;
    flex-direction: row;
}

.speisekarte-form-row2{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.speisekarte-form-section{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.speisekarte-form-item{
    background: #f4f4f4;
    border-radius: 20px;
    padding: 20px;
}

.wahlweise-hinzufuegen-button, .add-button, .add-bereich{
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-green);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    gap: 5px;
    border: none;
}

.container-bereich-button{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.add-button-container, .add-bereich-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.remove-button, .remove-bereich {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.speisekarte-form-content{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wahlweise td {
    font-size: 14px;
    padding: 1% 2.5%;
}

.preis-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 30%;
}

.speisekarte-form-preis {
    font-size: 16px;
    width: 80px;
    text-align: right;
    border: none;
    background: #f4f4f4;
    outline: none;
    padding: 2.5%;
}

.desktop{
    display: none;
}

.Menu-Veranstaltungskalender div{
    padding: 30px 0;
}

/*Liste*/
#Liste{
    display: flex !important;
    flex-direction: column;
    margin: 0 auto;
    padding: 10px 1%;
}

.Liste-Event{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 0;
}

.Liste-Event .Liste-date{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 20%;
}

.liste-header{
    display: none;
}

.Liste-Event .Liste-date .Datum-Tag{
    font-weight: 700;
    font-size: 25px;
}

.Liste-Event .Liste-data{
    display: block;
    width: 80%;
}

.Liste-Event .Liste-data h2{
    cursor: pointer;
}

.Liste-Event .Liste-data h2 a{
    color: #000000;
    text-decoration: none;
    font-size: 20px;
}

.Liste-Event .Liste-data h2 a:hover{
    text-decoration: underline;
}


.addTermin {
    display: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: var(--color-background-nav);
    border: none;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
}

#liste-add-termin{
    display: flex;
}

.addTermin i {
    color: white;
    font-size: 15px;
}

#liste-add-termin{
    margin: 40px auto;
}

.addTermin:hover {
   
    transform: scale(1.05);
}

.addTermin:active {
    transform: scale(0.95);
}

#Menu-Liste, #Menu-Kalender{
    display: none;
}

/* Create Termin */
.form-create-termin{
    width: 90%;
    padding: 5%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
  }

  .Termin-Titel > *, .Termin-Zeit > *{
    width: 100%;
  }

  .Termin-Titel input{
    padding: 15px 10px;
    font-size: 20px;
  }

  #Schicht_Kategorie {
    padding: 15px 10px;
    font-size: 20px;
    color: #757575;
}

  .Termin-Zeit{
        display: flex;
        flex-direction: column;
        gap: 10px;
  }

  .Termin-Zeit .ganztaegig{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
  } 

  .switch {
    position: relative;
    display: inline-block;
    width: 50px !important;
    height: 30px;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .Kontodaten-h4-line {
    position: relative;
    margin-bottom: 1.5em; 
    text-align: left;
  }
  
  .Kontodaten-h4-line::after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 100%;              
    width: 100%;              
    height: 2px;            
    background: var(--color-green);   
    margin-top: 0.5em;      
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: var(--color-background-nav);
  }
  
  input:checked + .slider:before {
    transform: translateX(21px);
  }
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .Termin-Zeit .Termin-beginn, .Termin-Zeit .Termin-ende {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.Termin-Zeit .Termin-beginn p, .Termin-Zeit .Termin-ende p {
    width: 80px;
    margin: 0;
}

.Termin-Zeit .Termin-beginn input, .Termin-Zeit .Termin-ende input {
    padding: 2px;
}

.Termin-Zeit-Input {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.Termin-Wiederholung{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

#weekly-options, #monthly-options, #repeat-end{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

#repeat-end label input[type="number"]{
    width: 30px;
    text-align: center;
} 

.Termin-Veranstalter, .Termin-Location, .Termin-Kategorie{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 20px;
}

.Termin-Veranstalter input, .Termin-Location input, .Termin-Kategorie input{
    width: 100%;
    padding: 10px;
}

#repeat-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#repeat-container select{
    padding: 10px;
}

#form-create-Termin .submit-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 0 20px 0;
}

#form-create-Termin input[type="submit"]{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    background-color: var(--background-color-header);
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.section-header {
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.section-header hr {
    margin: 0;
    border: none;
    border-top: 1px solid #ccc;
}

.section-header h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 0 10px;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    color: #333;
}

.data-save{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
}

.checkbox-save{
    width: 16px !important;
}

.errorMsg {
    background-color: #fce4e4;
    border: 1px solid #fcc2c3;
    color: #cc0033;
    padding: 10px 15px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    margin-top: 5px;
    display: inline-block;
    position: relative;
  }
  
  .errorMsg::before {
    content: '!';
    color: #fff;
    background-color: #cc0033;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    font-weight: bold;
  }
  
  .popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  
  .popup.active {
    display: block !important;
  }
  
  .popup-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
  }
  
  .popup-content a {
    display: inline-block;
    margin: 5px;
    padding: 10px;
    cursor: pointer;
    text-decoration: none;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
  }

  .events{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
}

.event{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.event .Time{
    font-size: 11px;
    color: #5d5d5d;
}

.event .Title{
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.event .Title a{
    font-size: 12px;
    color: #141827;
    text-decoration: none;
}

.event .Title a:hover{
    text-decoration: underline;
}

.container-schicht-anfragen{
    display: flex;
    flex-direction: column;
}


/* Filter */
.filter-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}


.filter-checkbox-container-status, .filter-checkbox-container-mitarbeiter, .filter-checkbox-container-schichtart{
    display: none;
}

.filter-element-header{
    display: flex;
    flex-direction: row;
    gap: 5px;
    width: 100%;
}

.filter-element-header h3{
    font-size: 16px;
    color: #333;
}

.filter-element-header i{
    font-size: 16px;
    color: #333;
    cursor: pointer;
}

.filter-checkbox {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 20px;
}


.filter-checkbox-container-schichtart label, .filter-checkbox-container-mitarbeiter label, .filter-checkbox-container-status label{
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.filter-checkbox-container-schichtart label input, .filter-checkbox-container-mitarbeiter label input, .filter-checkbox-container-status label input{
    width: 15px;
    height: 15px;
}

.Zeiterfassung{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 20px 0 20px;
}

.Zeiterfassung .Zeit, .Code h3{
    text-align: center;
}

.Zeit h1{
    font-size: 80px;
    font-weight: bold;
    display: inline-block;
    perspective: 1000px;
}

.Code h3{
    padding: 0 15%;
}

.keypad {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Abstand zwischen den Reihen */
  align-items: center;
  padding: 32px 24px 0 24px;
  border-radius: 20px;
  width: max-content;
  margin: 0 auto;
}

.dots{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 10px auto;
    gap: 10px;
}

.dot{
    background: #d3d3d3;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.filled{
    background: var(--color-background-nav);
}

.key-row {
  display: flex;
  gap: 16px;
}

.key {
  width: 70px;
  height: 70px;
  font-size: 2rem;
  border: none;
  border-radius: 18px;
  background: var(--color-background-nav);
  color: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: background 0.2s;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.key:active {
  background: #e7eaf0;
}

.key-placeholder {
  width: 70px;
  height: 70px;
  background: transparent;
}


.Zeiterfassung-error, .Zeiterfassung-sucess{
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    z-index: 100;
    font-size: 20px;
    align-items: center;
    display: none;
    opacity: 0;
    transition: opacity 0.5s;
    max-width: max-content;
}

.Zeiterfassung-sucess{
    background: #3DB37C;
}

.Zeiterfassung-error{
    background: #D94B4D;
}

.Zeiterfassung-error i, .Zeiterfassung-sucess i{
    font-size: 45px;
}

.show {
    display: flex;
    opacity: 1;
}

#successOverlay{
    display:none; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100vw; 
    height:100vh; 
    background:rgba(0,0,0,0.2); 
    z-index:9999;
}

#successOverlay .successText{
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%);
    background:#fff;
    color:var(--color-background-nav); 
    font-size:1.3em;
    padding: 24px 38px;
    border-radius: 12px;
    box-shadow:0 4px 18px 0 rgba(0,0,0,0.06);
    width: 70%;
    text-align: center;
    line-height: 150%;
}

#popup-update{
    display: none;
    position: fixed;
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%);
    width: 90%;
    min-height: 80vh;
    height: auto;
    background: white;
    flex-direction: column;
    gap: 40px;
    padding: 40px;
    border-radius: 4px;    
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);  
}

#popup-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
    align-items: center;
}

#popup-header i{
    float: right;
}

#popup-update form{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.popup-data{
    display: flex;
    flex-direction: row;
}

.popup-data label{
    width: 30%;
    text-align: left;
    align-content: center;
    font-size: 14px;
}

.popup-data input{
    width: 70%;
    padding: 5px;
}

#popup-footer{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
}

#popup-footer button{
    padding: 5px 10px;
}

#popup-footer input{
    margin: 10px 0;
    padding: 5px 10px;
    background: var(--color-background-nav);
    color: white;
}




}


@media only screen and (min-width: 769px){
    .desktop{
        display: none;
    }
/******************************************/
/* Header */
header{
    background: var(--color-green);
    max-height: 150px;
    padding: 0 10%;
}

#header-mobile{
    display: none;
}

#header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
}

#header #logo{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
}

#header #logo img{
    width: auto;
    height: calc(150px - 40px);
    padding: 0%;
    object-fit: cover;
}

#header #title{
    width: 70%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#header #title h1{
    color: white;
}

#header #header-nav-elemt{
    width: 15%;
    display: flex;
    flex-direction: row;
}

.header-actions {
    display: flex;
    gap: 20px;
    align-items: center;
    width: 15%;
 }
 
 .account-icon, .logout-icon {
    color: white;
    font-size: 24px;
    transition: color 0.3s ease;
 }
 
 .account-icon:hover, .logout-icon:hover {
    color: white; 
 }

 /*Überschrift der Seiten*/
.h2 {
    background: var(--color-green);
    color: white;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .h2 h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
  }

    /*Zurück-Button*/
    .back-button-container {
        display: flex;
        justify-content: flex-start; 
        padding: 20px 10px;
    }


.back-button {
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    background-color: var(--color-green, #004d40);
    color: white;
    font-size: 14px; 
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.back-button:hover, .back-button:active {
    background-color: var(--color-dark-green, #00332a);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}


.back-button i {
    font-size: 14px;
}


/* Buttons Nav Elements */
#nav-elements{
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: left;
    padding: 20px calc(10% + 20px);
}

.nav-element {
    width: 150px;
    height: 150px;
    background: #f8f9fa; 
    text-decoration: none;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.nav-element:hover {
    background: var(--color-background-nav);
    color: white;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
}

.nav-element h3 {
    font-size: 18px;
    margin: 10px 0 5px 0;
    color: #343a40;
    transition: color 0.3s ease; 
    text-overflow: ellipsis;
    max-width: 130px;
    word-break: break-word;
}

.nav-element:hover h3 {
    color: white;
}

.nav-element i {
    font-size: 50px;
    color: var(--color-background-nav);
    transition: color 0.3s ease;
}

.nav-element:hover i {
    color: white;
}

 #auswertung{
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#collaps12{
    margin: auto;
}


.progress-ring::before {
    content: '';
    position: absolute;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background: #F4F4F4;
    border-radius: 50%;
    z-index: 1;
}

#Fortschritt {
    display: none;
    font-size: 2em;
    color: white;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

.progress-ring .zeit{
    display: flex;
    flex-direction: column;
    text-align: center;
    z-index: 2;
    gap: 15px;
}

.zeitGeleistet, .zeitVon{
    font-size: 22px;
    color: black;
    font-weight: bold;
    text-align: center;

}


.collaps-content {
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 20px;
    flex-wrap: wrap;
    max-height: 5000px;
    opacity: 1;
    overflow: hidden;
    padding: 10px 0;
    transform: scaleY(1);
    transition: 
        max-height 0.8s ease-in-out, 
        opacity 0.8s ease-in-out, 
        padding 0.6s ease-in-out, 
        margin-top 0.6s ease-in-out, 
        transform 0.8s ease-in-out, 
        box-shadow 0.4s ease-in-out; 
}

.collapsListe{
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 500px;
    margin: 0 auto;
}

.collaps-content.collapsed {
    max-height: 0; 
    opacity: 0; 
    padding: 0; 
    margin-top: 0; 
    transform: scaleY(0.95); 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); 
    transition: 
        max-height 0.8s ease-in-out, 
        opacity 0.8s ease-in-out, 
        padding 0.6s ease-in-out, 
        margin-top 0.6s ease-in-out, 
        transform 0.8s ease-in-out, 
        box-shadow 0.4s ease-in-out;
}

.collaps-header {
    cursor: pointer; 
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

#iconRight1, #iconDown1, #iconRight2, #iconDown2, #iconRight3, #iconDown3 {
    font-size: 20px; 
}

#iconDown1 {
    display: block;
}


#iconDown2 {
    display: block;
}

#iconDown3 {
    display: block;
}

#iconRight1{
    display: none;
}


#iconRight2{
    display: none;
}


#iconRight3{
    display: none;
}


#iconRight10{
    display: none;
}


#iconRight11{
    display: none;
}


#iconRight12{
    display: none;
}

.collaps-content-Liste {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-height: 0px;
    opacity: 0;
    overflow: hidden;
    padding: 0px;
    margin: 10px 0;
    transform: scaleY(1); 
}


.collaps-content-Liste.collapsedListe {
    max-height: 5000px; 
    opacity: 1; 
    padding: 0; 
    margin-top: 0; 
    transform: scaleY(0.95); 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); 
}

.collaps-content-Liste.collapsedListe table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9em;
    color: #333;
    table-layout: auto;
    white-space: nowrap;
}

.collaps-content-Liste.collapsedListe table thead {
    background-color: var(--color-green);
    color: #ffffff;
}

.collaps-content-Liste.collapsedListe table th {
    position: sticky;
    top: 0;
    background-color: var(--color-green);
    z-index: 10;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
}

.collaps-content-Liste.collapsedListe table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

.collaps-content-Liste table tbody tr:hover {
    background-color: #f5f5f5;
    padding: 10px 0;
}

.collaps-content-Liste table tbody tr:last-child td {
    border-bottom: none;
}


/* Footer */

    footer{
        margin-top: 40px;
        background: var(--color-green);
    }

    footer img{
        width: 40%;
        height: auto;
        margin-left: 30%;
    }

    /*Öffnungszeiten*/
    #oeffnungszeiten{
        padding: 5%;
        text-align: center;
    }

    #oeffnungszeiten h2{
        font-family: "DancingScript";
        font-size: 50px;
        color: white;
        padding: 0 0 30px 0;
    }

    #oeffnungszeiten .tag{
        font-weight: 600;
        padding: 5px 50px;
        font-size: 15px;
        line-height: 150%;
        color: white;
    }

    #oeffnungszeiten .uhrzeit, #oeffnungszeiten #Ruhetag{
        font-size: 14px;
        padding: 10px;
        line-height: 150%;
        color: white;
    }

    #oeffnungszeiten a{
        color: white;
        text-decoration: none;
        font-size: 14px;
    }

    /*Rechtliches im footer*/
    .footer-rechtliches{
        display: flex;
        padding: 15px;
        flex-direction: row;
        gap: 5%;
        justify-content: center;
    }

    .footer-rechtliches a{
        color: white;
        text-decoration: none;
        font-size: 11px;
        
    }

    .footer-rechtliches a:hover{
         color: rgb(173, 173, 173);
    }

#LoginForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

#LoginForm form {
    background: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    margin: 20px;
    border: 1px solid #e0e0e0;
}

#LoginForm label {
    display: block;
    color: #333333;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

#LoginForm input[type="email"],
#LoginForm input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

#LoginForm input[type="email"]:focus,
#LoginForm input[type="password"]:focus {
    background: #ffffff;
    border-color: #004d2c;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 77, 44, 0.1);
}

#LoginForm input[type="submit"] {
    width: 100%;
    padding: 16px;
    background: var(--color-green);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#LoginForm  input[type="submit"]:hover {
    background: var(--color-green);
    transform: translateY(-1px);
}

#LoginForm #pw-label {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: #e0e0e0;
    font-size: 14px;
}

#LoginForm #pw-label a {
    font-size: 13px;
    color: #0969DA;
    text-decoration: none;
    transition: color 0.2s ease;
}

#LoginForm #pw-label a:hover {
    text-decoration: underline;
}

#LoginForm #pw-label label {
    margin: 0;
    width: 50%;
    display: flex;
    align-items: center;
}

#LoginForm p{
    font-weight: 600;
    padding: 10px 0;
    font-size: 14px;
}

/* Passwort vergessen */

.success-message {
    background: rgba(0, 0, 0, 0.85);
    padding: 40px;
    border-radius: 8px;
    color: #ffffff;
    text-align: center;
    max-width: 400px;
    margin: 20px auto;
    line-height: 1.5;
}

/*Überschrift der Seiten*/
.h2 {
    background: var(--color-green);
    color: white;
    padding: 1rem 2rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .h2 h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-align: center;
  }

  /*Formulare*/
form{
    width: 70%;
    margin: 0 auto;
}

  .form{
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

.form label {
    width: auto;
    display: inline-block;
    margin: auto;
    vertical-align: top;
    text-align: left;
    margin-bottom: 15px;
    color: black;
    width: 100%;
    display: inline-block;
    text-align: left;
    color: black;
}

.form label.errorMsg {
    width: 60%;
    display: inline-block;
    margin: 0 5px 15px 0;
    vertical-align: top;
    text-align: right;
    color: var(--color-green);
    text-align: right;
    color: red;
}

.form input, .form select, .select-Mitarbeiter select {
    margin-left: 0%;
    width: 100%; 
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 15px;
    appearance: none;
    background: white;
    font-size: 14px;
    color: #333;
    min-height: 10px;
    width: 100%;
    border: 0.5px solid #333;
}

.form input[type="checkbox"]{
    appearance: auto;
}

.container-bereich-button{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.add-button-container, .add-bereich-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.remove-button, .remove-bereich {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.wahlweise-hinzufuegen-button, .add-button, .add-bereich{
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-green);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    gap: 5px;
    border: none;
}

.speisekarte-form-content{
    display: flex;
    flex-direction: column;
    gap: 10px;
}


select{
    appearance: none;
    border: 2px solid light-dark(rgb(118, 118, 118));
   
    background: white;
}

.form .container{
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 20px 10px 0 10px;
}

.form input[type="submit"] {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background: var(--color-green);
    color: white;
    border: none;
    padding: 10px 10px;
    margin-bottom: 20px;
}

.checkbox-Mitarbeiter{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
    text-align: center;
}

button{
    width: auto;
    padding: 4px;
    margin: 10px 0;
}

.checkbox-Mitarbeiter input {
    width: 20%;
}


/* Anfragen */
.create-Anfrage {
    width: 95%;
    max-width: 1200px;
    margin: 25px auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.create-Anfrage form {
    width: 100%;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
}

.create-Anfrage form table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9em;
    color: #333;
    table-layout: auto;
    white-space: nowrap;
}

.create-Anfrage form table thead {
    background-color: var(--color-green);
    color: #ffffff;
}

.create-Anfrage form table th {
    position: sticky;
    top: 0;
    background-color: var(--color-green);
    z-index: 10;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
}

.create-Anfrage form table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

.create-Anfrage form table tbody tr:hover {
    background-color: #f5f5f5;
    padding: 10px 0;
}

.create-Anfrage form table tbody tr:last-child td {
    border-bottom: none;
}

.create-Anfrage input[type="submit"] {
    background-color: var(--color-green);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    width: 30%;
    transition: background-color 0.3s ease;
}

.create-Anfrage input[type="submit"]:hover {
    font-weight: bold;
}

.create-Anfrage form table td:first-child {
    text-align: center;
    vertical-align: middle;
}

.create-Anfrage form table input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
    position: relative;
    top: -1px;
}


/* Meine Zeitbuchungen */
#calendar {
    width: 100%;
    margin: 20px auto;
    border-radius: 10px;
}
.calendar-header {
    display: flex;
    width: 90%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

}

.calendar-header button {
    padding: 10px 15px;
    font-size: 20px;
    background: var(--color-background-nav);
    color: white;
    border-radius: 5px;
}

.dayHeader{
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.days {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.day {
    padding: 10px;
    font-weight: 600;
    background: white;
    border: 1px solid #ddd;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    height: 100%;
    max-width: calc(100vw / 7);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.day.today {
    background: var(--color-green);
    color: white;
}

.entry-dot {
    width: 6px;
    height: 6px;
    background-color: #013E36;
    border-radius: 50%;
    margin: 2px auto 0;
    display: block;
}

.day.today .entry-dot {
    background-color: white;
}

.day:has(.ruhetag) {
    background-color: #e8e8e8;
}

#password-hint{
    padding: 10px 10% 20px 10%;
}

/* Speisekarte */
.speisekarte-form{
    width: 80%;
}

.speisekarte-bereich{
    background: white;
    border-radius: 10px;
    width: 90%;
    margin: 0 auto;
    position: relative; 
    padding: 2.5% 5%;
}

.speisekarte-bereich img{
    width: 100%;
    height: auto;
}

.speisekarte-bereich::after {
    content: "";
    width: 90%;
    height: 2px;
    background-color: var(--color-green);
    position: absolute;
    bottom: -10px;
    left: 0;
    margin-left: 5%;
}

.speisekarte-bereich h2{
    text-align: center;
    font-family: "DancingScript";
    color: var(--color-green);
    font-size: 50px;
    min-height: 100px;
    height: auto;
    max-height: 300px;
    padding: 2.5%;
}

.speisekarte-form-h2{
    text-align: center;
    font-family: "DancingScript";
    color: var(--color-green);
    font-size: 50px;
    min-height: 100px;
    height: auto;
    max-height: 300px;
    padding: 2.5%;
    width: 100%;
    border: none;
    outline: none;
}

.speisekarte-bereich .speisekarte-form-section{  
    width: 100%;
}

.speisekarte-bereich .speisekarte-form-section .speisekarte-form-item{
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #f4f4f4;
    border-radius: 10px;
    margin: 10px auto;
    padding: 20px 5%;
}

.speisekarte-bereich .speisekarte-form-row1-left{
    width: 80%;
    padding: 2.5%;
    font-size: 30px;
    font-family: "DancingScript";
}

.speisekarte-form-row1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    margin: 10px auto;
    padding: 20px 5%;
}

.speisekarte-form-row2{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.speisekarte-form-bezeichnung {
    width: 100%;
    padding: 2.5%;
    font-size: 30px;
    font-family: "DancingScript";
    border: none;
    outline: none;
    background: #f4f4f4;
}

.speisekarte-bereich table tr td:nth-child(2){
    width: 20%;
    text-align: center;
    gap: 10px;
}

.preis-container{
    width: 20%;
    text-align: center;
}

.speisekarte-bereich table tr td p{
    font-size: 16px;
    padding: 1% 0%;
    line-height: 160%;
    font-family: sans-serif;
}

.speisekarte-form-beschreibung {
    font-size: 16px;
    padding: 1% 2.5%;
    line-height: 160%;
    font-family: sans-serif;
    outline: none;
    border: none;
    width: 100%;
    height: auto;
    resize: vertical;
    background: #f4f4f4;
}


.speisekarte-bereich table .wahlweise .wahlweise-bezeichnung-container{
    padding: 1% 2.5%;
    width: 60%;
}

.speisekarte-bereich table .wahlweise .wahlweise-preis-container{
    width: 40%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 5px;
    align-items: center;
}

.speisekarte-bereich table .wahlweise h5{
    font-size: 15px;
    padding: 0;
    font-weight: 500;
    font-family: sans-serif;
    background: #f4f4f4;
}

.speisekarte-bereich table .wahlweise td p{
    padding: 0%;
    font-size: 14px;
    background: #f4f4f4;
}
.speisekarte-bereich table .wahlweise .wahlweise-preis-container i{
    font-size: 9px;   
    vertical-align: middle;
   
}
.speisekarte-bereich table .wahlweise div{
    font-size: 14px;
    background: #f4f4f4;
}

.wahlweise-container{
    display: flex;
    flex-direction: column;
    padding: 20px 0 0 0;
    width: 100%;
    gap: 10px;
}

.wahlweise{
    display: flex;
    flex-direction: row;
    padding: 0 0 0 2.5%;
    gap: 20px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.add-wahlweise-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.remove-wahlweise{
    width: 20%;
    text-align: center;
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.wahlweise-bezeichnung {
    font-size: 14px;
    padding: 1% 2.5%;
    width: 100%;
    border: none;
    outline: none;
    font-family: sans-serif;
}

.wahlweise-preis {
    font-size: 14px;
    width: 50px;
    border: none;
    outline: none;
    font-family: sans-serif;
}

.wahlweise-icon {
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    width: 1em;
    height: 1em;
}


.wahlweise td {
    font-size: 14px;
    padding: 1% 2.5%;
}

.preis-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 30%;
}

.speisekarte-form-preis {
    font-size: 16px;
    width: 80px;
    text-align: right;
    border: none;
    outline: none;
    padding: 2.5%;
    background: #f4f4f4;
}

.container-speisekarte{
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 20px 10px 0 10px;
    width: 100%;
    margin-top: 50px;
}

.container-speisekarte input[type="submit"] {
    width: auto;
    margin-left: auto;
    margin-right: auto;
    background: var(--color-green);
    color: white;
    border: none;
    padding: 10px 20%;
    margin-bottom: 20px;
}

.delete-button-container{
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-button {
    background-color: #e74c3c; /* Rot */
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px; /* Abstand zwischen Icon und Text */
}

.remove-button i {
    font-size: 16px; /* Größe des Icons */
}

.remove-button:hover {
    background-color: #c0392b; /* Dunkleres Rot beim Hover */
}



.Menu-Veranstaltungskalender {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 20px;
    padding: 0 10px;
    width: 80%;
    margin: 10px auto;
    height: 50px;
    border: 1px solid #efefef;
}

.Menu-Veranstaltungskalender p {
    color: #141827;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    position: relative;
    padding-bottom: 3px;
}

.Menu-Veranstaltungskalender p a{
    text-decoration: none;
    color: #141827;
}

.Menu-Veranstaltungskalender p::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: black;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}

.Menu-Veranstaltungskalender p:hover::after,
.Menu-Veranstaltungskalender p.active::after {
    transform: scaleX(1);
}

#Menu-Liste, #Menu-Kalender, #Menu-Admin {
    display: flex;
}

input[type="month"] {
    font-size: 1rem;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
  }
  
  input[type="month"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
  }

  #Liste{
    display: none;
}

/*Liste*/
#Liste{
    display: none;
    padding: 10px 1%;
    width: 80%;
    margin: 50px auto;
    height: auto;
    max-width: 1024px;
}

.Liste-Event{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 0;
}

.Liste-Event .Liste-date{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 20%;
}

.Liste-Event .Liste-date .Datum-Tag{
    font-weight: 700;
    font-size: 25px;
}

.Liste-Event .Liste-data{
    display: block;
    width: 80%;
}

.Liste-Event .Liste-data h2{
    cursor: pointer;
}

.Liste-Event .Liste-data h2 a{
    color: #000000;
    text-decoration: none;
    font-size: 20px;
}

.Liste-Event .Liste-data h2 a:hover{
    text-decoration: underline;
}

.addTermin {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: var(--color-background-nav);
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;

}

.addTermin i {
    color: white;
    font-size: 20px;
}

#liste-add-termin{
    margin: 40px auto;
}


.addTermin:hover {
   
    transform: scale(1.05);
}

.addTermin:active {
    transform: scale(0.95);
}

.desktop {
    display: flex;
}

.mobile{
    display: none;
}

.ruhetag .Title{
    font-size: 12px;
    color: #141827;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event{
    background: #f9f9f9;
    border-radius: 10px;
    padding: 10px 5px;
}

.event .Title a{
    font-size: 12px;
    color: #141827;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event .Title a:hover{
    text-decoration: underline;
}

 /* Create Termin */
 .form-create-termin{
    width: 70%;
    max-width: 800px;
    padding: 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
  }

  .Termin-Titel > *, .Termin-Zeit > *{
    width: 100%;
  }

  .Termin-Titel input{
    padding: 15px 10px;
    font-size: 20px;
  }

  .Termin-Zeit{
        display: flex;
        flex-direction: column;
        gap: 10px;
  }

  .Termin-Zeit .ganztaegig{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
  } 

  .switch {
    position: relative;
    display: inline-block;
    width: 50px !important;
    height: 30px;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .Kontodaten-h4-line {
    position: relative;
    margin-bottom: 1.5em; 
    text-align: left;
  }
  
  .Kontodaten-h4-line::after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 100%;              
    width: 100%;              
    height: 2px;            
    background: var(--color-green);   
    margin-top: 0.5em;      
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: var(--color-background-nav);
  }
  
  input:checked + .slider:before {
    transform: translateX(21px);
  }
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .Termin-Zeit .Termin-beginn, .Termin-Zeit .Termin-ende {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.Termin-Zeit .Termin-beginn p, .Termin-Zeit .Termin-ende p {
    width: 80px;
    margin: 0;
}

.Termin-Zeit .Termin-beginn input, .Termin-Zeit .Termin-ende input {
    padding: 2px;
}

.Termin-Zeit-Input {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.Termin-Wiederholung{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

#weekly-options, #monthly-options, #repeat-end{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

#repeat-end label input[type="number"]{
    width: 30px;
    text-align: center;
} 

.Termin-Veranstalter, .Termin-Location, .Termin-Kategorie{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 20px;
}

.Termin-Veranstalter input, .Termin-Location input, .Termin-Kategorie input{
    width: 100%;
    padding: 10px;
}

#repeat-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#repeat-container select{
    padding: 10px;
}

#form-create-Termin .submit-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 0 20px 0;
}

#form-create-Termin input[type="submit"]{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    background-color: var(--background-color-header);
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.section-header {
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.section-header hr {
    margin: 0;
    border: none;
    border-top: 1px solid #ccc;
}

.section-header h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 0 10px;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    color: #333;
}

.data-save{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    color: #333;
}

.checkbox-save{
    width: 18px !important;
    accent-color: var(--background-color-header);
    color: white;
}

.errorMsg {
    background-color: #fce4e4;
    border: 1px solid #fcc2c3;
    color: #cc0033;
    padding: 10px 15px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    margin: 10px 0;
    display: inline-block;
    position: relative;
  }
  
  .errorMsg::before {
    content: '!';
    color: #fff;
    background-color: #cc0033;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    font-weight: bold;
  }

  .popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  
  .popup.active {
    display: block !important;
  }
  
  .popup-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
  }
  
  .popup-content a {
    display: inline-block;
    margin: 5px;
    padding: 10px;
    cursor: pointer;
    text-decoration: none;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
  }


  .events{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
}

.event{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.event .Time{
    font-size: 11px;
    color: #5d5d5d;
}

.event .Title{
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#Schicht_Kategorie {
    padding: 15px 10px;
    font-size: 20px;
    color: #757575;
}

.liste-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.container-schicht-anfragen{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}


/* Filter */
.filter-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.filter-element-header:hover{
    cursor: pointer;
}


.filter-checkbox-container-status, .filter-checkbox-container-mitarbeiter, .filter-checkbox-container-schichtart{
    display: none;
}

.filter-element-header{
    display: flex;
    flex-direction: row;
    gap: 5px;
    width: 100%;
}

.filter-element-header h3{
    font-size: 16px;
    color: #333;
}

.filter-element-header i{
    font-size: 16px;
    color: #333;
    cursor: pointer;
}

.filter-checkbox {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 20px;
}


.filter-checkbox-container-schichtart label, .filter-checkbox-container-mitarbeiter label, .filter-checkbox-container-status label{
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.filter-checkbox-container-schichtart label input, .filter-checkbox-container-mitarbeiter label input, .filter-checkbox-container-status label input{
    width: 15px;
    height: 15px;
}

/*Meine Zeiten*/
.zeit-card{
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin: 10px auto;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.zeit-card-row1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.zeit-card-row2, .urlaub-card-row2{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zeit-card-item{
    display: flex;
    flex-direction: row;
}

.zeit-card-item-title{
    width: 175px;
}

.zeit-card-item .zeit{
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.zeit-card-item .zeit p{
    text-align: left;
}


.urlaub-card-item{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.urlaub-card-item .urlaub{
    font-weight: 600;
}

.urlaub-card-item .urlaub-akzeptiert {
    color: #348D34;
}

.Zeiterfassung{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10%;
    padding: 40px 10% 0 10%;
}

.Zeiterfassung .Zeit, .Code h3{
    text-align: center;
}

.Zeit h1{
    font-size: 80px;
    font-weight: bold;
    display: inline-block;
    perspective: 1000px;
}

.Code, .Zeit{
    text-align: center;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}


.Code h3{
    padding: 0 15%;
}

.keypad {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Abstand zwischen den Reihen */
  align-items: center;
  padding: 32px 24px 0 24px;
  border-radius: 20px;
  /* width: max-content; */
  margin: 0 auto;
}

.dots{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 10px auto;
    gap: 10px;
}

.dot{
    background: #d3d3d3;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.filled{
    background: var(--color-background-nav);
}

.key-row {
  display: flex;
  gap: 16px;
}

.key {
  width: 70px;
  height: 70px;
  font-size: 2rem;
  border: none;
  border-radius: 18px;
  background: var(--color-background-nav);
  color: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: background 0.2s;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.key:active {
  background: #e7eaf0;
}

.key-placeholder {
  width: 70px;
  height: 70px;
  background: transparent;
}

.Zeiterfassung-error, .Zeiterfassung-sucess{
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    z-index: 100;
    font-size: 20px;
    align-items: center;
    display: none;
    opacity: 0;
    transition: opacity 0.5s;
    max-width: max-content;
}

.Zeiterfassung-sucess{
    background: #3DB37C;
}

.Zeiterfassung-error{
    background: #D94B4D;
}

.Zeiterfassung-error i, .Zeiterfassung-sucess i{
    font-size: 45px;
}

.show {
    display: flex;
    opacity: 1;
}

#successOverlay{
    display:none; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100vw; 
    height:100vh; 
    background:rgba(0,0,0,0.2); 
    z-index:9999;
}

#successOverlay .successText{
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%);
    background:#fff;
    color:var(--color-background-nav); 
    font-size:1.3em;
    padding: 24px 38px;
    border-radius: 12px;
    box-shadow:0 4px 18px 0 rgba(0,0,0,0.06);
    text-align: center;
    line-height: 150%;
}


#popup-update{
    display: none;
    position: fixed;
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%);
    width: 40%;
    background: white;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 4px;  
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);  
}

#popup-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
    align-items: center;
}

#popup-header i{
    float: right;
}

#popup-update form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.popup-data{
    display: flex;
    flex-direction: row;
}

.popup-data label{
    width: 40%;
    text-align: left;
    align-content: center;
    font-size: 14px;
}

.popup-data input{
    width: 60%;
    padding: 5px;
}

#popup-footer{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
}

#popup-footer button{
    padding: 5px 10px;
}

#popup-footer input{
    margin: 10px 0;
    padding: 5px 10px;
    background: var(--color-background-nav);
    color: white;
}

}


@media only screen and (min-width: 1024px){
    
/******************************************/
/* Header */
header{
    background: var(--color-green);
    max-height: 150px;
    padding: 0 10%;
}
#header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
}

#header #logo{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
}

#header #logo img{
    width: auto;
    height: calc(150px - 40px);
    padding: 0%;
    object-fit: cover;
}

#header #title{
    width: 70%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#header #title h1{
    color: white;
}

#header #header-nav-elemt{
    width: 15%;
    display: flex;
    flex-direction: row;
}

.header-actions {
    display: flex;
    gap: 20px;
    align-items: center;
    width: 15%;
 }
 
 .account-icon, .logout-icon {
    color: white;
    font-size: 24px;
    transition: color 0.3s ease;
 }
 
 .account-icon:hover, .logout-icon:hover {
    color: white; 
 }

 /*Überschrift der Seiten*/
.h2 {
    background: var(--color-green);
    color: white;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .h2 h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
  }

    /*Zurück-Button*/
    .back-button-container {
        display: flex;
        justify-content: flex-start; 
        padding: 20px 70px;
    }


.back-button {
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    background-color: var(--color-green, #004d40);
    color: white;
    font-size: 14px; 
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.back-button:hover, .back-button:active {
    background-color: var(--color-dark-green, #00332a);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}


.back-button i {
    font-size: 14px;
}


/* Buttons Nav Elements */
#nav-elements{
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: left;
    padding: 20px calc(10% + 20px);
}

.nav-element {
    width: 150px;
    height: 150px;
    background: #f8f9fa; 
    text-decoration: none;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.nav-element:hover {
    background: var(--color-background-nav);
    color: white;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
}

.nav-element h3 {
    font-size: 18px;
    margin: 10px 0 5px 0;
    color: #343a40;
    transition: color 0.3s ease; 
    text-overflow: ellipsis;
    max-width: 130px;
    word-break: break-word;
}

.nav-element:hover h3 {
    color: white;
}

.nav-element i {
    font-size: 50px;
    color: var(--color-background-nav);
    transition: color 0.3s ease;
}

.nav-element:hover i {
    color: white;
}

.collaps-content {
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 20px;
    flex-wrap: wrap;
    max-height: 5000px;
    opacity: 1;
    overflow: hidden;
    padding: 10px;
    transform: scaleY(1);
    transition: 
        max-height 0.8s ease-in-out, 
        opacity 0.8s ease-in-out, 
        padding 0.6s ease-in-out, 
        margin-top 0.6s ease-in-out, 
        transform 0.8s ease-in-out, 
        box-shadow 0.4s ease-in-out; 
}

.collapsListe{
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
}


.collaps-content.collapsed {
    max-height: 0; 
    opacity: 0; 
    padding: 0; 
    margin-top: 0; 
    transform: scaleY(0.95); 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); 
    transition: 
        max-height 0.8s ease-in-out, 
        opacity 0.8s ease-in-out, 
        padding 0.6s ease-in-out, 
        margin-top 0.6s ease-in-out, 
        transform 0.8s ease-in-out, 
        box-shadow 0.4s ease-in-out;
}

.collaps-header {
    cursor: pointer; 
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

#iconRight1, #iconDown1, #iconRight2, #iconDown2, #iconRight3, #iconDown3 {
    font-size: 20px; 
}

#iconRight1 {
    display: none; 
}

#iconDown1 {
    display: block;
}

#iconRight2 {
    display: none;
}

#iconDown2 {
    display: block;
}

#iconRight3 {
    display: none;
}

#iconDown3 {
    display: block;
}

.collaps-content-Liste {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-height: 0px;
    opacity: 0;
    overflow: hidden;
    padding: 0px;
    margin: 10px auto;
    transform: scaleY(1); 
    width: 100%;
}


.collaps-content-Liste.collapsedListe {
    max-height: 5000px; 
    opacity: 1; 
    padding: 0; 
    margin-top: 0; 
    transform: scaleY(0.95); 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); 
}

.collaps-content-Liste.collapsedListe table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9em;
    color: #333;
    table-layout: auto;
    white-space: nowrap;
}

.collaps-content-Liste.collapsedListe table thead {
    background-color: var(--color-green);
    color: #ffffff;
}

.collaps-content-Liste.collapsedListe table th {
    position: sticky;
    top: 0;
    background-color: var(--color-green);
    z-index: 10;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
}

.collaps-content-Liste.collapsedListe table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

.collaps-content-Liste table tbody tr:hover {
    background-color: #f5f5f5;
    padding: 10px 0;
}

.collaps-content-Liste table tbody tr:last-child td {
    border-bottom: none;
}

/* Footer */

    footer{
        margin-top: 40px;
        background: var(--color-green);
    }

    footer img{
        width: 40%;
        height: auto;
        margin-left: 30%;
    }

    /*Öffnungszeiten*/
    #oeffnungszeiten{
        padding: 5%;
        text-align: center;
    }

    #oeffnungszeiten h2{
        font-family: "DancingScript";
        font-size: 50px;
        color: white;
        padding: 0 0 30px 0;
    }

    #oeffnungszeiten .tag{
        font-weight: 600;
        padding: 5px 50px;
        font-size: 15px;
        line-height: 150%;
        color: white;
    }

    #oeffnungszeiten .uhrzeit, #oeffnungszeiten #Ruhetag{
        font-size: 14px;
        padding: 10px;
        line-height: 150%;
        color: white;
    }

    #oeffnungszeiten a{
        color: white;
        text-decoration: none;
        font-size: 14px;
    }

    /*Rechtliches im footer*/
    .footer-rechtliches{
        display: flex;
        padding: 15px;
        flex-direction: row;
        gap: 5%;
        justify-content: center;
    }

    .footer-rechtliches a{
        color: white;
        text-decoration: none;
        font-size: 11px;
        
    }

    .footer-rechtliches a:hover{
         color: rgb(173, 173, 173);
    }

#LoginForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

#LoginForm form {
    background: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    margin: 20px;
    border: 1px solid #e0e0e0;
}

#LoginForm label {
    display: block;
    color: #333333;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

#LoginForm input[type="email"],
#LoginForm input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

#LoginForm input[type="email"]:focus,
#LoginForm input[type="password"]:focus {
    background: #ffffff;
    border-color: #004d2c;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 77, 44, 0.1);
}

#LoginForm input[type="submit"] {
    width: 100%;
    padding: 16px;
    background: var(--color-green);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#LoginForm  input[type="submit"]:hover {
    background: var(--color-green);
    transform: translateY(-1px);
}

#LoginForm #pw-label {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: #e0e0e0;
    font-size: 14px;
}

#LoginForm #pw-label a {
    font-size: 13px;
    color: #0969DA;
    text-decoration: none;
    transition: color 0.2s ease;
}

#LoginForm #pw-label a:hover {
    text-decoration: underline;
}

#LoginForm #pw-label label {
    margin: 0;
    width: 50%;
    display: flex;
    align-items: center;
}

#LoginForm p{
    font-weight: 600;
    padding: 10px 0;
    font-size: 14px;
}

/* Passwort vergessen */

.success-message {
    background: rgba(0, 0, 0, 0.85);
    padding: 40px;
    border-radius: 8px;
    color: #ffffff;
    text-align: center;
    max-width: 400px;
    margin: 20px auto;
    line-height: 1.5;
}

/*Überschrift der Seiten*/
.h2 {
    background: var(--color-green);
    color: white;
    padding: 1rem 2rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .h2 h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-align: center;
  }

  /*Formulare*/
form{
    width: 40%;
    margin: 0 auto;
}

  .form{
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .Meine-Zeiten{
    width: 90% !important;
    max-width: 1000px;
  }

.form label {
    width: auto;
    display: inline-block;
    margin: auto;
    vertical-align: top;
    text-align: left;
    margin-bottom: 15px;
    color: black;
    width: 100%;
    display: inline-block;
    text-align: left;
    color: black;
}

.form label.errorMsg {
    width: 100%;
    display: inline-block;
    margin: 0 5px 15px 0;
    vertical-align: top;
    text-align: right;
    color: var(--color-green);
    text-align: left;
    color: red;
}

.form input, .form select, .select-Mitarbeiter select {
    margin-left: 0%;
    width: 100%; 
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.form input[type="checkbox"]{
    appearance: auto;
}

select{
    appearance: none;
    border: 2px solid light-dark(rgb(118, 118, 118));
    background: white;
}

.form .container{
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 20px 10px 0 10px;
}

.form input[type="submit"] {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    background: var(--color-green);
    color: white;
    border: none;
    padding: 10px 10px;
    margin-bottom: 20px;
}

.checkbox-Mitarbeiter{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
    text-align: center;
}

button{
    width: auto;
    padding: 4px;
    margin: 10px 0;
}

.checkbox-Mitarbeiter input {
    width: 20%;
}

.Meine-Zeiten .uebersicht{
    width: 800px;
}


/* Anfragen */
.create-Anfrage {
    width: 95%;
    max-width: 1200px;
    margin: 25px auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.create-Anfrage form {
    width: 100%;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
}

.create-Anfrage form table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9em;
    color: #333;
    table-layout: auto;
    white-space: nowrap;
}

.create-Anfrage form table thead {
    background-color: var(--color-green);
    color: #ffffff;
}

.create-Anfrage form table th {
    position: sticky;
    top: 0;
    background-color: var(--color-green);
    z-index: 10;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
}

.create-Anfrage form table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

.create-Anfrage form table tbody tr:hover {
    background-color: #f5f5f5;
    padding: 10px 0;
}

.create-Anfrage form table tbody tr:last-child td {
    border-bottom: none;
}

.create-Anfrage input[type="submit"] {
    background-color: var(--color-green);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.create-Anfrage input[type="submit"]:hover {
    font-weight: bold;
}

.create-Anfrage form table td:first-child {
    text-align: center;
    vertical-align: middle;
}

.create-Anfrage form table input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
    position: relative;
    top: -1px;
}


/* Meine Zeitbuchungen */
#calendar {
    width: 100%;
    margin: 20px auto;
    border-radius: 10px;
}
.calendar-header {
    display: flex;
    width: 90%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    max-width: 1000px;
}
.calendar-header button {
    padding: 10px 15px;
    font-size: 20px;
    background: var(--color-background-nav);
    color: white;
    border-radius: 5px;
}

.dayHeader{
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.days {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.day {
    padding: 15px;
    font-weight: 600;
    background: white;
    border: 1px solid #ddd;
    text-align: left;
    cursor: pointer;
    font-size: 25px;
    box-sizing: border-box;
    max-width: calc(80vw / 7);
    justify-content: flex-start;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.day.today {
    background: var(--color-green);
    color: white;
}

.entry-dot {
    width: 6px;
    height: 6px;
    background-color: #013E36;
    border-radius: 50%;
    margin: 10px auto 0;
    display: block;
}

.day.today .entry-dot {
    background-color: white;
}

.yellow{
    background: yellow !important;
}

#password-hint{
    padding: 10px 10% 20px 10%;
}

.mobile {
    display: none;
}

/*Meine Zeiten*/
.zeit-card{
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin: 10px auto;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.zeit-card-row1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.zeit-card-row2, .urlaub-card-row2{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zeit-card-item{
    display: flex;
    flex-direction: row;
}

.zeit-card-item-title{
    width: 175px;
}

.zeit-card-item .zeit{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.zeit-card-item .zeit p{
    text-align: left;
}


.urlaub-card-item{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.urlaub-card-item .urlaub{
    font-weight: 600;
}

.urlaub-card-item .urlaub-akzeptiert {
    color: #348D34;
}


.Zeiterfassung{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0px;
    padding: 40px 10% 0 10%;
}

#successOverlay{
    display:none; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100vw; 
    height:100vh; 
    background:rgba(0,0,0,0.2); 
    z-index:9999;
}

#successOverlay .successText{
   position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%);
    background:#fff;
    color:var(--color-background-nav); 
    font-size:1.3em;
    padding: 24px 38px;
    border-radius: 12px;
    box-shadow:0 4px 18px 0 rgba(0,0,0,0.06);
    text-align: center;
    line-height: 150%;
}

}