body {
    font-family: "Glegoo", sans-serif;
    margin: 0;
}

h1 {
    font-family: "Orbitron", sans-serif;
}

h2 {
    font-family: "Orbitron", sans-serif;
}

.logo {
    position: fixed;
    top: 20px;
    left: 20px;
}

#sicherhaid {
    margin-top: 12vh;
}

#sicherhaid::after {
    content: "";
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/background.webp');
    background-size: cover;
    z-index: -1;
}

#sicherhaid .chat {
    width: 57%;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5vw;
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

#sicherhaid .chat .buttons {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

#sicherhaid .chat .duo-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1vw;
}

#sicherhaid .chat .duo-box.short {
    column-gap: 0 !important;
    justify-items: center;
}

#sicherhaid .chat .tripple-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
}

#sicherhaid .chat .quatro-box {
    display: flex;
    justify-content: space-between;
}
#sicherhaid .chat .quatro-box .button {
    padding: 1vw;
    border-radius: 1vw;
    background-color: white;
    color: black;
    width: 6vw !important;
}

#sicherhaid .chat .quatro-box .button.active {
    background-color: #e2002b;
    color: white;
}

#sicherhaid .chat .quatro-box .button:hover {
    cursor: pointer;
}

#sicherhaid .chat .ready .message.full.button:hover {
    cursor: pointer;
}

#sicherhaid .chat .message.full.button.full-red:hover,
#sicherhaid .chat .ready .message.full.button.red:hover {
    cursor: pointer;
    border: 4px solid white;
    padding: calc(1vw - 4px);
}

#sicherhaid .chat .message.full.button p {
    text-align: center;
    transition: transform 0.2s;
}

#sicherhaid .chat .duo-box.short .title, #sicherhaid .chat .tripple-box .title {
    width: 10vw !important;
    text-align: center;
    position: relative;
    margin-bottom: 2.5vw;
}

#sicherhaid .chat .message.full.button label {
    width: 100%;
    display: block;
}

#sicherhaid .chat .duo-box.short .title .box, #sicherhaid .chat .tripple-box .title .box {
    position: absolute;
    left: 50%;
    width: 80%;
    transform: translateX(-50%);
    background-color: white;
    border-radius: 1vw;
    color: black;
    text-align: center;
    top: calc(100% - 0.5vw);
    padding: 0.5vw;
}

#sicherhaid .chat .close .message {
    margin-bottom: 0;
}

#sicherhaid .divider {
    height: 2vw;
}

#sicherhaid .chat p .bold, #sicherhaid .chat h1 .bold, #sicherhaid .chat h2 .bold {
    font-weight: bold;
}

#sicherhaid .chat h1 {
    padding: 0;
    margin: 0;
    font-size: 1.8vw;
}

#sicherhaid .chat h2 {
    padding: 0;
    margin: 0;
    font-size: 1.2vw;
}

#sicherhaid .chat p {
    padding: 0;
    margin: 0;
    font-size: 1.2vw;
    line-height: 1.4vw;
}

.message.full.button.form:has(#file) {
    margin-bottom: 0 !important;
    padding: 0;
    max-width: 100%;
}

.message.full.button.form:has(#file) label {
    cursor: pointer;
    padding: 1vw;
}

#login-form {
    width: 400px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 40px auto;
    background-color: #353435;
}

#login-form input {
    outline: none;
    border: none;
    padding: 10px;
    font-family: "Orbitron", sans-serif;
}

#login-form button {
    background-color: #e2002b;
    color: white;
    outline: none;
    border: none;
    padding: 10px;
    font-family: "Orbitron", sans-serif;
}

@media (max-width: 1000px) {
    .logo {
        position: absolute;
    }

    #chatform {
        width: calc(90% - 50px) !important;
        padding: 50px;
    }

    #sicherhaid .chat h1 {
        font-size: 30px;
        line-height: 32px;
    }

    #sicherhaid .chat h2 {
        font-size: 25px;
        line-height: 27px;
    }

    #sicherhaid .chat p {
        font-size: 20px;
        line-height: 25px;
    }

    #sicherhaid .chat .message {
        padding: 20px;
        width: calc(100% - 40px);
    }

    #sicherhaid .chat .message::after {
        top: 99% !important;
        height: 100px !important;
    }
    
    #sicherhaid .chat {
        padding: 40px;
    }
    
    #sicherhaid input {
        padding: 15px !important;
    }

    .message.full.button.form:has(#file) label {
        cursor: pointer;
        padding: 30px !important;
    }

    .message.full.button.form:has(#file) {
        padding: 0 !important;
        width: 100% !important;
    }

    #sicherhaid .chat .quatro-box .button {
        padding: 30px;
        width: 130px !important;
    }

    #sicherhaid .chat .duo-box.short .title .box, #sicherhaid .chat .tripple-box .title .box {
        padding: 40px;
    }

    #sicherhaid button, #sicherhaid .button, #sicherhaid label, #sicherhaid input {
        padding: 30px !important;
        font-size: 20px !important;
    }

    #sicherhaid .button {
        width: calc(100% - 60px) !important;
    }

    #sicherhaid button.button {
        width: 100% !important;
    }
}

#sicherhaid .chat .title {
    background-color: black;
    color: white;
    border-radius: 1vw;
    padding: 1vw;
    width: 60%;
}

#sicherhaid .chat .title.secondary {
    background-color: #e2002b;
    color: white;
    border-radius: 1vw;
    padding: 1vw;
    width: 60%;
}
#sicherhaid .chat .title.secondary.right {
    justify-self: end;
}

#sicherhaid .chat .duo-box .title {
    width: calc(100% - 2vw);
    text-align: center;
}

#sicherhaid .chat .message {
    background-color: white;
    color: black;
    border-radius: 1vw;
    position: relative;
    padding: 1vw;
    max-width: 60%;
    margin-bottom: 2vw;
}

#sicherhaid .chat .message.red {
    color: #e2002b
}

#sicherhaid .chat .message.right {
    align-self: end;
}

#sicherhaid .chat .duo-box .message {
    width: calc(100% - 2vw);
    max-width: unset;
    text-align: center;
}

#sicherhaid .chat .duo-box .message::after {
    content: none;
}

#sicherhaid .chat  .message.full-red {
    color: white;
    background-color: #e2002b;
}

#sicherhaid .chat .message.full {
    max-width: 97%;
}

#sicherhaid .chat .message.full::after {
    content: none;
}

#sicherhaid .chat .message::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 5vw;
    height: 2vw;
    background-repeat: no-repeat;
    background-image: url(/img/message.svg);
}

#sicherhaid .chat .message.right::after {
    left: 100%;
    transform: translateX(-100%) scaleX(-1);
}

#sicherhaid .chat .label {
    font-size: 1.2vw;
    color: white;
}

#sicherhaid .chat .quatro-box .button p {
    text-align: center;
    font-family: 'Orbitron', sans-serif;
}

#sicherhaid .chat .field {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#sicherhaid .chat .field input {
    padding: 1vw;
    border: none;
    font-size: 1.2vw;
    border-radius: 1vw;
}

#sicherhaid .chat .field label {
    padding: 0.2vw 1vw;
    border-radius: 1vw;
    font-size: 1.2vw;
    color: white;
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
}

#sicherhaid .chat .field label span, #sicherhaid .chat .quatro-box + .label span {
    display: none;
    color: #e2002b;
}

#sicherhaid .chat .field:has(.is-invalid) span, #sicherhaid .chat .quatro-box.is-invalid + .label span {
    display: inline;
}

#sicherhaid .chat .ready .button:hover {
    cursor: pointer;
    border: 4px solid #e2002b;
    padding: calc(1vw - 4px);
}

#sicherhaid .chat button {
    width: 100%;
    max-width: 100% !important;
    border: none;
    font-size: 1.2vw;
    line-height: 1.7vw;
    font-family: "Glegoo", sans-serif;
}

#sicherhaid .chat .bewerben {
    background-color: #e2002b;
    color: white !important;
}

#footer {
    background-color: #353435;
    color: white;
    padding-bottom: 50px;
}

#footer .logo {
    position: static;
    margin-left: 16.5%;
    width: 9%;
}

#footer .table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 67%;
    margin: auto;
    background-color: #353435;
    gap: 1vw;
}

#footer .table .column {
    display: flex;
    flex-direction: column;
}

#footer h1 {
    font-size: 20px;
}

#footer h2 {
    font-size: 20px;
    font-family: 'Glegoo';
    font-weight: 100;
}

#footer p {
    font-size: 16px;
    font-family: 'Glegoo';
    font-weight: 100;
    margin: 10px 0;
}

#footer a {
    font-size: 16px;
    font-family: 'Glegoo';
    font-weight: 100;
}

#footer a {
    text-decoration: none;
}

#footer .sicherheit {
    width: 10vw;
    margin: 1vw 0;
}

#footer .social-media {
    display: flex;
    justify-content: space-between;
    width: 8vw;
}

#footer .social-media a {
    color: white;
}

#footer .social-media a svg{
    height: 30px;
    fill: white;
}

#footer .symbol-link {
    margin-bottom: 10px;
    color: white;
}

#footer .symbol-link:visited {
    color: white;
}

#footer .link, #footer .link:visited {
    color: white;
}

#footer .symbol-link::before {
    content: "";
    display: inline-block;
    transform: translateY(10px);
    width: 30px;
    height: 30px;
    margin-right: 20px;
}

#footer .link {
    margin: 10px 0;
}

#footer .link:hover, #footer .symbol-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

#footer .link::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 11px;
    margin-right: 5px;
    background: url("data:image/svg+xml,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%227.414%22 height=%2212.828%22 viewBox=%220 0 7.414 12.828%22%3e%3cpath id=%22arrow_link%22 d=%22M5,0,0,5l5,5%22 transform=%22translate%286.414 11.414%29 rotate%28180%29%22 fill=%22none%22 stroke=%22%23fff%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%222%22/%3e%3c/svg%3e") no-repeat left center / contain;
}

#footer .symbol-link:nth-child(3)::before {
    background: url("data:image/svg+xml,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22%3e%3c!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license %28Commercial License%29 Copyright 2024 Fonticons, Inc.--%3e%3cpath fill=%22white%22 d=%22M375.8 275.2c-16.4-7-35.4-2.4-46.7 11.4l-33.2 40.6c-46-26.7-84.4-65.1-111.1-111.1L225.3 183c13.8-11.3 18.5-30.3 11.4-46.7l-48-112C181.2 6.7 162.3-3.1 143.6 .9l-112 24C13.2 28.8 0 45.1 0 64v0C0 300.7 183.5 494.5 416 510.9c4.5 .3 9.1 .6 13.7 .8c0 0 0 0 0 0c0 0 0 0 .1 0c6.1 .2 12.1 .4 18.3 .4l0 0c18.9 0 35.2-13.2 39.1-31.6l24-112c4-18.7-5.8-37.6-23.4-45.1l-112-48zM447.7 480C218.1 479.8 32 293.7 32 64v0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0c0-3.8 2.6-7 6.3-7.8l112-24c3.7-.8 7.5 1.2 9 4.7l48 112c1.4 3.3 .5 7.1-2.3 9.3l-40.6 33.2c-12.1 9.9-15.3 27.2-7.4 40.8c29.5 50.9 71.9 93.3 122.7 122.7c13.6 7.9 30.9 4.7 40.8-7.4l33.2-40.6c2.3-2.8 6.1-3.7 9.3-2.3l112 48c3.5 1.5 5.5 5.3 4.7 9l-24 112c-.8 3.7-4.1 6.3-7.8 6.3c-.1 0-.2 0-.3 0z%22/%3e%3c/svg%3e") no-repeat left center/contain;
}

#footer .symbol-link:nth-child(4)::before {
    background: url("data:image/svg+xml,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232.08%22 height=%2224.833%22 viewBox=%220 0 32.08 24.833%22%3e%3cg transform=%22translate%281.04 0.75%29%22%3e%3crect data-name=%22Rechteck 11%22 width=%2230%22 height=%2223.333%22 rx=%222%22 fill=%22none%22 stroke=%22%23fff%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22/%3e%3cpath data-name=%22Pfad 100%22 d=%22M3,7,18,17,33,7%22 transform=%22translate%28-3 -3.667%29%22 fill=%22none%22 stroke=%22%23fff%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22/%3e%3c/g%3e%3c/svg%3e") no-repeat left center/contain;
}

#footer .symbol-link:nth-child(5)::before {
    background: url("data:image/svg+xml,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2231.711%22 height=%2230.063%22 viewBox=%220 0 31.711 30.063%22%3e%3cg id=%22anfahrt%22 transform=%22translate%280.75 0.993%29%22%3e%3cline id=%22Linie_121%22 data-name=%22Linie 121%22 y2=%220.016%22 transform=%22translate%2823.684 6.215%29%22 fill=%22none%22 stroke=%22%23fff%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22/%3e%3cpath id=%22Pfad_639%22 data-name=%22Pfad 639%22 d=%22M20.316,19.331,14.79,11.437a6.316,6.316,0,1,1,11.052,0l-5.526,7.895%22 transform=%22translate%283.368 -2.064%29%22 fill=%22none%22 stroke=%22%23fff%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22/%3e%3cpath id=%22Pfad_640%22 data-name=%22Pfad 640%22 d=%22M14.842,5.184,12.474,4,3,8.737V29.263l9.474-4.737,9.474,4.737,9.474-4.737V21.368%22 transform=%22translate%28-3 -0.942%29%22 fill=%22none%22 stroke=%22%23fff%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22/%3e%3cline id=%22Linie_122%22 data-name=%22Linie 122%22 y2=%2220.526%22 transform=%22translate%289.474 3.058%29%22 fill=%22none%22 stroke=%22%23fff%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22/%3e%3cline id=%22Linie_123%22 data-name=%22Linie 123%22 y2=%227.895%22 transform=%22translate%2818.947 20.426%29%22 fill=%22none%22 stroke=%22%23fff%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22/%3e%3c/g%3e%3c/svg%3e") no-repeat left center/contain;
}

#footer .symbol-link:nth-child(5)::before {
    background: url("data:image/svg+xml,%3csvg id=%22parking%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2230%22 height=%2230%22 viewBox=%220 0 30 30%22%3e%3crect id=%22Rechteck_1898%22 data-name=%22Rechteck 1898%22 width=%2230%22 height=%2230%22 rx=%222.27%22 fill=%22%23f6e81e%22/%3e%3cpath id=%22Pfad_3920%22 data-name=%22Pfad 3920%22 d=%22M6.36,20.669V5a.711.711,0,0,1,.272-.559.983.983,0,0,1,.7-.242H11.94a5.489,5.489,0,0,1,3.78,1.255A5.02,5.02,0,0,1,17.126,9.4v.2a4.99,4.99,0,0,1-1.512,3.962,5.685,5.685,0,0,1-3.871,1.27H8.84v5.837a.68.68,0,0,1-.363.6,1.663,1.663,0,0,1-.892.227,1.678,1.678,0,0,1-.877-.227A.665.665,0,0,1,6.36,20.669Zm2.48-7.833h3.024a2.8,2.8,0,0,0,2.087-.756,3.266,3.266,0,0,0,.726-2.314V9.48a3.221,3.221,0,0,0-.726-2.3,2.8,2.8,0,0,0-2.087-.756H8.84Z%22 transform=%22translate%283.257 2.148%29%22 fill=%22%23e52829%22/%3e%3c/svg%3e") no-repeat left center / contain;
}