/*****************************************colors**************************************************/
:root {
    /*** Colors ***/
    --dark-color: #1A2336;
    --darker-color: #141A2A;
    --light-color: #95A9C4;
    --lighter-color: #A7BDDB;
    --neutral-dark-color: #090C1D;
    --neutral-light-color: #EEECDF;
    /*Warnings*/
    --alert-color: #D25C69;
    --warning-color: #FFC035;
    --ok-color: #44E3A8;
    /*Accent*/
    --accent-1-color:#FFDE51;
    --accent-1-darker-color:#FCC829;
    --accent-2-color:#02D5E6;
    --accent-2-darker-color:#00498E;
    /*Color gradient*/
    --rainbow-1:#A672BD;
    --rainbow-2:#8845B3;
    --rainbow-3:#4D2371;
    --rainbow-4:#013678;
    --rainbow-5:#5469AC;
    --rainbow-6:#024C95;
    --rainbow-7:#006162;
    --rainbow-8:#008380;
    --rainbow-9:#00D5C9;
    --rainbow-10:#44E3A6;
    --rainbow-11:#FF9122;
    --rainbow-12:#FE771A;
    --rainbow-13:#FF7210;
    --rainbow-14:#B56029;
    --rainbow-15:#D5718B;
    --rainbow-16:#D25C69;
    --rainbow-17:#B77890;
    --rainbow-18:#A161CF;
    --rainbow-19:var(--rainbow-1);
    --rainbow-20:var(--rainbow-2);

    /*** Background ***/
    --nav-bg-color: var(--darker-color);
    --main-bg-color: var(--dark-color);
    --light-bg-color: var(--darker-color);
    --button-bg-color: var(--accent-1-color);
    --button-active-bg-color: var(--accent-2-color);
    --button-dark-bg-color: var(--dark-color);
    --button-neutral-bg-color: var(--darker-color);
    --input-bg-color: var(--neutral-light-color);
    /*Shifts*/
    --shift-1-bg-color: var(--rainbow-1);
    --shift-2-bg-color: var(--rainbow-2);
    --shift-3-bg-color: var(--rainbow-3);
    --shift-4-bg-color: var(--rainbow-4);
    --shift-5-bg-color: var(--rainbow-5);
    --shift-6-bg-color: var(--rainbow-6);
    --shift-7-bg-color: var(--rainbow-7);
    --shift-8-bg-color: var(--rainbow-8);
    --shift-9-bg-color: var(--rainbow-9);
    --shift-10-bg-color: var(--rainbow-10);
    --shift-11-bg-color: var(--rainbow-11);
    --shift-12-bg-color: var(--rainbow-12);
    --shift-13-bg-color: var(--rainbow-13);
    --shift-14-bg-color: var(--rainbow-14);
    --shift-15-bg-color: var(--rainbow-15);
    --shift-16-bg-color: var(--rainbow-16);
    --shift-17-bg-color: var(--rainbow-17);
    --shift-18-bg-color: var(--rainbow-18);
    --shift-19-bg-color: var(--rainbow-19);
    --shift-20-bg-color: var(--rainbow-20);

    /*** Color ***/
    --nav-text-color: var(--accent-1-color);
    --nav-text-hover-color: var(--accent-1-darker-color);
    --nav-active-color: var(--accent-2-color);
    --main-text-color: var(--neutral-light-color);
    --negative-text-color: var(--neutral-dark-color);
    --link-text-color:var(--accent-1-color);
    --link-hover-color:var(--accent-1-darker-color);
    /*Shifts*/
    --shift-1-text-color: var(--shift-1-bg-color);
    --shift-2-text-color: var(--shift-2-bg-color);
    --shift-3-text-color: var(--shift-3-bg-color);
    --shift-4-text-color: var(--shift-4-bg-color);
    --shift-5-text-color: var(--shift-5-bg-color);
    --shift-6-text-color: var(--shift-6-bg-color);
    --shift-7-text-color: var(--shift-7-bg-color);
    --shift-8-text-color: var(--shift-8-bg-color);
    --shift-9-text-color: var(--shift-9-bg-color);
    --shift-10-text-color: var(--shift-10-bg-color);
    --shift-11-text-color: var(--shift-11-bg-color);
    --shift-12-text-color: var(--shift-12-bg-color);
    --shift-13-text-color: var(--shift-13-bg-color);
    --shift-14-text-color: var(--shift-14-bg-color);
    --shift-15-text-color: var(--shift-15-bg-color);
    --shift-16-text-color: var(--shift-16-bg-color);
    --shift-17-text-color: var(--shift-17-bg-color);
    --shift-18-text-color: var(--shift-18-bg-color);
    --shift-19-text-color: var(--shift-19-bg-color);
    --shift-20-text-color: var(--shift-20-bg-color);
    /*Warnings*/
    --alarm-text-color: var(--alert-color);
    --warning-text-color: var(--warning-color);
    --ok-text-color: var(--ok-color);
    /*Border*/
    --neutral-border-color: var(--neutral-dark-color);
}

/*****************************************Body**************************************************/
html, body {
    margin: 0;
    padding: 0;
    color: var(--neutral-light-color);
    background-color: var(--main-bg-color);
}

html {
    height: 100%;
}

body {
    font-family: Arial, "Times New Roman", Calibri, sans-serif;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--link-text-color);
}

a:hover {
    color: var(--link-hover-color);
}

/*****************************************Header**************************************************/
header {
    background: var(--nav-bg-color);
}

.header-image {
    width: 100%;
    max-height: 700px;
    object-fit: cover;
    object-position: center center;
    display: block;
    margin: 0 auto;
}

.h-menu input {
    position: absolute;
    opacity: 0;
}

nav {
    background: var(--nav-bg-color);
    font-size: 2rem;
    display: flex;
    align-content: center;
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin-top: -5px;
    z-index: 1;
    padding: 10px 0 10px 0;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    margin-top: 0;
}

nav a {
    color: var(--nav-text-color);
    text-decoration: none;
    margin-left: 1vw;
}

nav a:hover {
    color: var(--nav-text-hover-color);
}

nav span {
    color: var(--nav-active-color);
    text-decoration: none;
    margin-left: 1vw;
    cursor: default;
}

/********************************************content***********************************************/
.content {
    flex: 2 0 auto;
    padding: 0 10px;
}

.add-top-padding {
    padding-top: 60px;
}

.message {
    margin-top: 10px;
    position: sticky;
    top: 40px;
    border: none;
    border-radius: 3px;
}


/*** general colors ***/
.error {
    border: solid .1rem var(--neutral-border-color);
    background-color: var(--alarm-text-color);
}

#error {
    color: var(--alarm-text-color);
}

.success {
    border: solid .1rem var(--neutral-border-color);
    background-color: var(--ok-color);
}

.color_success {
    color: var(--ok-text-color);
}

.free {
    background-color: var(--ok-color);
}

.input-field {
    background-color: var(--input-bg-color);
}

.bg_light {
    background-color: var(--light-bg-color);
}


/*** Shift Boxes ***/
h2, h3, h4 {
    margin: -15px 0 -5px 0;
}

.shift_counter {
    font-size: 75%;
    line-height: 0;
}

.shift_1_bg_color {
    background-color: var(--shift-1-bg-color);
    color: var(--main-text-color);
}

.shift_1_text_color {
    color: var(--shift-1-text-color);
}

.shift_2_bg_color {
    background-color: var(--shift-2-bg-color);
    color: var(--main-text-color);
}

.shift_2_text_color {
    color: var(--shift-2-text-color);
}

.shift_3_bg_color {
    background-color: var(--shift-3-bg-color);
    color: var(--main-text-color);
}

.shift_3_text_color {
    color: var(--shift-3-text-color);
}

.shift_4_bg_color {
    background-color: var(--shift-4-bg-color);
    color: var(--main-text-color);
}

.shift_4_text_color {
    color: var(--shift-4-text-color);
}

.shift_5_bg_color {
    background-color: var(--shift-5-bg-color);
    color: var(--main-text-color);
}

.shift_5_text_color {
    color: var(--shift-5-text-color);
}

.shift_6_bg_color {
    background-color: var(--shift-6-bg-color);
    color: var(--main-text-color);
}

.shift_6_text_color {
    color: var(--shift-6-text-color);
}

.shift_7_bg_color {
    background-color: var(--shift-7-bg-color);
    color: var(--main-text-color);
}

.shift_7_text_color {
    color: var(--shift-7-text-color);
}

.shift_8_bg_color {
    background-color: var(--shift-8-bg-color);
    color: var(--main-text-color);
}

.shift_8_text_color {
    color: var(--shift-8-text-color);
}

.shift_9_bg_color {
    background-color: var(--shift-9-bg-color);
    color: var(--main-text-color);
}

.shift_9_text_color {
    color: var(--shift-9-text-color);
}

.shift_10_bg_color {
    background-color: var(--shift-10-bg-color);
    color: var(--main-text-color);
}

.shift_10_text_color {
    color: var(--shift-10-text-color);
}

.shift_11_bg_color {
    background-color: var(--shift-11-bg-color);
    color: var(--main-text-color);
}

.shift_11_text_color {
    color: var(--shift-11-text-color);
}

.shift_12_bg_color {
    background-color: var(--shift-12-bg-color);
    color: var(--main-text-color);
}

.shift_12_text_color {
    color: var(--shift-12-text-color);
}

.shift_13_bg_color {
    background-color: var(--shift-13-bg-color);
    color: var(--main-text-color);
}

.shift_13_text_color {
    color: var(--shift-13-text-color);
}

.shift_14_bg_color {
    background-color: var(--shift-14-bg-color);
    color: var(--main-text-color);
}

.shift_14_text_color {
    color: var(--shift-14-text-color);
}

.shift_15_bg_color {
    background-color: var(--shift-15-bg-color);
    color: var(--main-text-color);
}

.shift_15_text_color {
    color: var(--shift-15-text-color);
}

.shift_16_bg_color {
    background-color: var(--shift-16-bg-color);
    color: var(--main-text-color);
}

.shift_16_text_color {
    color: var(--shift-16-text-color);
}

.shift_17_bg_color {
    background-color: var(--shift-17-bg-color);
    color: var(--main-text-color);
}

.shift_17_text_color {
    color: var(--shift-17-text-color);
}

.shift_18_bg_color {
    background-color: var(--shift-18-bg-color);
    color: var(--main-text-color);
}

.shift_18_text_color {
    color: var(--shift-18-text-color);
}

.shift_19_bg_color {
    background-color: var(--shift-19-bg-color);
    color: var(--main-text-color);
}

.shift_19_text_color {
    color: var(--shift-19-text-color);
}

.shift_20_bg_color {
    background-color: var(--shift-20-bg-color);
    color: var(--main-text-color);
}

.shift_20_text_color {
    color: var(--shift-20-text-color);
}

.shift_title {
    font-size: 25px;
    font-weight: bold;
    margin: 20px;
}

.validation-img {
    max-width: 12px;
    max-height: 12px;
}

section {
    padding: 5px;
}

.border {
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    margin: 20px;
    padding: 20px;
}

.no-list-style {
    list-style-type: none;
}

.chart {
    margin-bottom: 40px;
    border: solid;
}

.pointer {
    cursor: pointer;
}
input[type="text"],
input[type="email"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid var(--neutral-border-color);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: var(--input-bg-color);
}

input[type="checkbox"] {
    width: auto;
    margin: 10px 0 8px;
    display: inline-block;
    border: 1px solid var(--neutral-border-color);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: var(--input-bg-color);
}

input[type="submit"] {
    width: 100%;
    background-color: var(--button-bg-color);
    color: var(--negative-text-color);
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: var(--button-neutral-bg-color);
}

/* Buttons, Filters, Informations */
.signUpButton {
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: var(--input-bg-color);
    color: var(--negative-text-color);
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.signUpButton:hover {
    background-color: var(--button-neutral-bg-color);
    color: var(--main-text-color);
}


.filter {
    padding: 5px 10px;
    margin-right: 10px;
    background-color: var(--button-bg-color);
    border-radius: 5px;
    border-color: var(--negative-text-color);
    border-style: solid;
    text-decoration: none;
    color: var(--negative-text-color);
}

.active {
    background-color: var(--button-active-bg-color);
    color: var(--negative-text-color);
}

.filter, .info {
    margin-bottom: 10px;
}

.filters_section, .infos_section {
    margin-right: 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.filter:hover {
    filter: brightness(85%);
}

.filter-label {
    margin-right: 10px;
    font-weight: bold;
}

.hidden, #hidden {
    display: none;
}


/* Content-Grid */
.grid-container {
    display: flex;
    flex-wrap: wrap;
}

.grid-item {
    flex: 0 0 100%; /* Alle Elemente nehmen die volle Breite ein */
}

/*********************************************footer**********************************************/

footer {
    flex: 3 0 auto;
    grid-column: 1;
    background-color: var(--main-bg-color);
    bottom: 0;
    position: sticky;
    max-height: 4vw;
}

address {
    display: flex;
    justify-content: flex-end;
    align-content: center;
}

.footer-icon {
    max-height: 3vw;
    max-width: 3vw;
    margin: 0.5vh;
}

/*************************************** Wide ****************************************************/
@media (min-width: 800px) {
    .shift_title {
        font-size: 30px;
    }

    .infos_section, .filters_section {
        display: inline-block;
    }

    .filters {
        display: grid;
        grid-template-columns: repeat(2, auto);
    }

    .filter_summary {
        grid-row: span 2;
    }

    .filter_grid {
        display: grid;
        grid-template-columns: repeat(3, auto);
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, auto);
    }

    .shift_counter {
        display: inline;
    }
}

@media (min-width: 1280px) {
    .shift_title {
        font-size: 40px;
    }
    .infos_section {
        position: absolute;
        top: 10px;
        opacity: 0.8;
    }

    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
    }
}

@media (min-width: 1600px) {
    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
}

@media (min-width: 1920px) {
    .infos_section {
        max-width: 960px;
    }

    body {
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    .footer-icon {
        max-height: 56px;
        max-width: 56px;
        margin: 8px;
    }

    nav a {
        margin-left: 19px;
    }
}