
.accordion {
    background-color: white;
    color: black;
    cursor: pointer;
    padding: 1em;
    width: 100%;
    border: none;
    border-bottom: 1px solid #818181;
    text-align: left;
    outline: none;
    font-size: 1em;
    font-weight: bold;
    font-family: "Noto Sans";
    margin-bottom: .5em;
}

.active, .accordion:hover, .accordion:focus { color: #4268F9; }

.accordion::after {
    content: var(--icon-3eck-b);
    float: right;
    rotate: 90deg;
    padding: .4em;
}
.active::after { rotate: -90deg; }

.panel {
    padding: 0 1em;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


.noscroll { overflow: hidden; }
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
}
.modal {
    width: 90%;
    max-height: 90%;
    left: 5%;
    top: 5%;
    position: absolute;
    overflow: hidden;
    border-radius: .5em;
    background-color: white;
}
.overlayBody {
    max-height: 90%;
    overflow-y: scroll;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    padding: .5rem;

    h2     { margin-bottom: 0; font-size: 1em; }
    h3, h4 { margin-bottom: 0; margin-top: .4em; font-size: .9em; }
    p, li  { margin: 1em 0; font-size: .9em; }
    h4     { text-decoration: underline; font-weight: normal; }
}
.overlayHead {
    justify-content: space-between;
    align-items: center;
    padding: .5em;

    h1 { font-size: 1.2em; margin: .5em 0; }
}

h2  { font-size: 2em; margin: 0 }
#jobangebot { align-items: center; p:last-of-type { margin-bottom: 0; } }

.beschreibung {
    grid-template-columns: 1fr 5fr;
    line-height: 1.8em;

    ul { margin: 0; list-style-image: var(--icon-3eck-p); }
    li { padding-left: .2em; }
}

form { gap: 2.5rem; }

.angaben { align-items: center; justify-content: space-between; p { margin: 0; } }

.eingabe, .captcha {
    border: 1px solid #c7c7c7;
    border-radius: .375em;
    background-color: white;

    &:hover   { outline: 1px solid dimgray; }
    &:focus   { outline: 1px solid #4268F9; }
}
.eingabe { padding: .375rem .75rem; }

.PItem label::after { content: "*"; color: #4268F9; }
.center             { align-items: center; text-align: center; }
.info > div         { width: 20%; }
.error              { color: red; font-size: 1.2em; }