* {
    box-sizing: border-box;
}

.FEHead {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10vw;
}

.FEBanner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 5vw;
}

.FEDivWrapper {
    display: flex;
    justify-content: center;
}

.FEAWrapperx2 {
    width: 22rem;
    height: 22rem;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    display: flex;
    margin: auto;
}

.FEAWrapper {
    width: 22rem;
    height: 22rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: wrap;
}

.FEA {
    width: inherit;
    height: inherit;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.FETextWrapper {
    width: 22rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3vh;
    margin: auto;
    text-align: center;
}

.FEButtonWrapper {
    width: 22rem;
    height: 4rem;
    margin: auto;
}

.FEButton {
    border: none;
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
    margin: 0 auto;
    cursor: pointer;
}

.LanguageButtonsWrapper {
    width: 100%;
    height: 100%;
}

.LoginLanguageWrapperWrapper {
    position: absolute;
    top: 2rem;
    right: 0;
    width: 3rem;
    height: 2rem;
    display: flex;
    flex-wrap: wrap;
}

.Gutschein-Container {
    flex: 0 1 33%;
    justify-content: center;
    align-items: center;
}

.flex-container {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.DefaultFont {
    font-family: Arial;
    text-align: center;
}

.DefaultFont2 {
    font-family: Arial;
    text-align: center;
}

.FEDetailsContainer {
    width: 30rem;
    height: auto;
}

.FELeftContainer {
    width: 100%;
    height: 27rem;
    display: flex;
    justify-content: center;
}

.FERightContainer {
    width: 100%;
    height: auto;
}

.FEImageContainerx3 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 20rem;
    height: 25rem;
}

.FEImageContainerx2 {
    width: 20rem;
    height: 20rem;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    margin-top: 2rem;
}

.FETextContainer {
    display: none;
}

.FETextAreaContainer {
    width: 90%;
    height: auto;
    margin-left: 1rem;
    margin-bottom: 1rem;
    margin-top:4rem;
}

.FEDetailsButton {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: transparent;
    border: none;
    outline: none;
}

.FEDetailsImageWrapper {
    width: 20rem;
    height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: wrap;
}

.FEDetailsBWrapper {
    width: 20rem;
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.FEDetailsTextWrapper {
    width: 20rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2rem;
}

.HeadCont {
    width: 50%;
    min-height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-container {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ContentCont {
    width: 100%;
}

.HalfContentCont {
    width: 50%;
}

.ButtonContainer {
    flex: 0 1 33%;
    justify-content: center;
    align-items: center;
}

.DatenContainer {
    width: 100%;
}

.MainContainer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.FEHead {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10vw;
}

.FEBestBanner {
    display: flex;
    flex-flow: row;
    justify-content: center;
}

.FEBestBanner2 {
    min-width: 10vw;
    min-height: 5vh;
    border-bottom: solid;
    display: flex;
    align-items: center;
    justify-content: center;
}

.FEBestMain {
    display: flex;
    justify-content: center;
}

.FEBestDiv {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding-top: 1%;
}

.FEBestDiv2 {
    width: 100%;
    margin: auto;
    min-height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.FEBestImageWrapper {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: wrap;
}

.FEBestTextWrapper {
    width: 100%;
    height: 4rem;
    margin: auto;
    margin-top: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3vh;
    padding-bottom: 3vh;
}

.FEBestTextWrapper2 {
    width: 100%;
    height: 4rem;
    margin: auto;
    margin-bottom: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3vh;
}

.FEBestDiv3 {
    display: inline-flex;
    padding-top: 1%;
}

.FEBestTextWrapper3 {
    width: 100%;
    padding-top: 5%;
}

.FEBestInputWrapper {
    width: 100%;
    padding-top: 1%;
}

.FEBestInputWrapper2 {
    display: inline-flex;
    width: 100%;
    padding-top: 1%;
}

.FEBestDiv4 {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
}

.FEBestButtonWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.FEBestButton {
    padding: 1rem 3rem 1rem 3rem;
    border: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.FEAnrede {
    width: 98%;
}

.FEVorname {
    width: 98%;
}

.FENachname {
    width: 98%;
}

.FEStrasse {
    width: 98%;
}

.FENummer {
    width: 98%;
}

.FEPLZ {
    width: 98%;
}

.FEOrt {
    width: 98%;
}

.FELand {
    width: 98%;
}

.FEEmail {
    width: 98%;
}

.SecWrap {
    padding-top: 3rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

.DivBetween {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.DivCenter {
    width: 100%;
    display: flex;
    justify-content: center;
}



.FEBestDiv5 {
    width: 50%;
    height: 20rem;
}

/* hide standard inputs */
input[type='radio']:checked,
input[type='radio']:not(:checked) {
    background: transparent;
    position: relative;
    visibility: hidden;
    margin: 0;
    padding: 0;
    display:none;
}

input[type='radio'] + label {
    cursor: pointer;
}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
    border-radius: 30px;
}

input[type='radio']:hover + label::before {
    background: #ddd;
}

/* add custom inputs with ::before */
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    content: ' ';
    display: inline-block;
    width: 17px;
    height: 17px;
    position: relative;
    top: 4px;
    background: white;
    
}


.HeadCont {
    width: 50%;
    min-height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-container {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ContentCont {
    width: 100%;
}

.HalfContentCont {
    width: 50%;
}

.ButtonContainer {
    flex: 0 1 33%;
    justify-content: center;
    align-items: center;
}

.FEErrorText {
    width: 100%;
    display: flex;
    justify-content: center;
}

.FEErrorFont {
    color: red;
    font-size: 2rem;
    text-align: center;
}

.FEHead {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10vw;
}

.FEGestBanner {
    display: flex;
    flex-flow: row;
    justify-content: center;
}

.FEGestTextWrapper {
    min-width: 10vw;
    min-height: 5vh;
    border-bottom: solid;
    display: flex;
    align-items: center;
    justify-content: center;
}

.FEGestTextWrapper2x2 {
    display: flex;
    flex-flow: row;
    justify-content: center;
}

.FEGestDiv {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
    padding-left: 3vw;
}

.FEGestDiv2 {
    width: 18rem;
    height: 18rem;
    display: flex;
    margin: auto;
    border: 3px solid transparent;
}

.FEGestDiv3 {
    width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: wrap;
}

.FEGestArea {
    padding: 1%;
    width: 89.7%;
    height: 20rem;
    resize: none;
}

.FEErrorSection {
    width: 100%;
    display: flex;
    justify-content: center;
}

.FEGestDiv4 {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
}

.FEGestDiv5 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.FEGestButton {
    padding: 1rem 3rem 1rem 3rem;
    border: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

button:focus, button:focus-visible, button:active, .focus-button:focus, .focus-button:focus-visible, .focus-button:active {
    outline: 2px solid orange !important;
}

.SecWrap {
    padding-top: 3rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

.DivBetween {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.DivCenter {
    width: 100%;
    display: flex;
    justify-content: center;
}

.HeadCont {
    width: 50%;
    min-height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-container {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ContentCont {
    width: 100%;
}

.HalfContentCont {
    width: 50%;
}

.ButtonContainer {
    flex: 0 1 33%;
    justify-content: center;
    align-items: center;
}

.DatenContainer {
    width: 100%;
}

.MainContainer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.FEHead {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10vw;
}

.FEBestBanner {
    display: flex;
    flex-flow: row;
    justify-content: center;
}

.FEBestBanner2 {
    min-width: 10vw;
    min-height: 5vh;
    border-bottom: solid;
    display: flex;
    align-items: center;
    justify-content: center;
}

.FEBestMain {
    display: flex;
    justify-content: center;
}

.FEUbDiv {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding-top: 3rem;
}

.FEUbTextWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.FEUbDiv2 {
    width: 100%;
    padding-top: 2rem;
    padding-left:2rem;
}

.FEUbDiv3 {
    width: 100%;
    display: flex;
    justify-content: center;
}

.FEUbDiv4 {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.FEUbTextWrapper2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33%;
}

.FEUbAWrapper {
    display: flex;
    justify-content: center;
    padding-top: 8rem;
}

.FEUbDiv5 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.FEUbDiv6 {
    width: 100%;
    display: flex;
    justify-content: center;
}


@media screen and (min-width: 900px) {
    .FEUbDiv2 {
        display: flex;
        justify-content: center;
        width: 50%;
        padding-top: 6rem;
        padding-left:0;
    }

    .flex-container {
        width: 50%;
    }

    .LoginLanguageWrapperWrapper {
        flex-wrap: nowrap;
        right: 2rem;
        width: 8rem;
    }

    .FEDetailsContainer {
        width: 55rem;
        height: 35rem;
        display: flex;
    }

    .FELeftContainer {
        width: 25rem;
        height: 35rem;
        display: flex;
        justify-content: center;
    }

    .FERightContainer {
        width: 28rem;
        height: 35rem;
    }

    .FEImageContainerx3 {
        margin-top: 2rem;
    }

    .FEImageContainerx2 {
        margin-top: 0;
    }

    .FETextContainer {
        display: block;
        width: 100%;
        height: 2rem;
        margin-top: 2rem;
    }

    .FETextAreaContainer {
        height: auto;
        margin-left: 0;
        margin-bottom: 0;
        margin-top:0;
    }

    .HeadCont {
        width: 25%;
    }

    .ContentCont {
        width: 50%;
    }

    .HalfContentCont {
        width: 25%;
    }

    .flex-container {
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        align-items: center;
        width: 50%;
    }

    .Vorlagen-Container {
        flex: 0 1 33%;
        justify-content: center;
        align-items: center;
    }

    .ButtonContainer {
        flex: 0 1 33%;
        justify-content: center;
        align-items: center;
    }

    .DatenContainer {
        width: 50rem;
    }

    .MainContainer {
        width: 50%;
    }

    .FEAnrede {
        width: 20%;
        padding-top: 1rem;
    }

    .FEVorname {
        width: 39.3%;
        padding-top: 1rem;
    }

    .FENachname {
        width: 39.3%;
        padding-top: 1rem;
    }

    .FEStrasse {
        width: 69%;
        padding-top: 1rem;
    }

    .FENummer {
        width: 30%;
        padding-top: 1rem;
    }

    .FEPLZ {
        width: 25%;
        padding-top: 1rem;
    }

    .FEOrt {
        width: 38%;
        padding-top: 1rem;
    }

    .FELand {
        width: 35%;
        padding-top: 1rem;
    }

    .FEEmail {
        width: 99.5%;
        padding-top: 1rem;
    }

    .FEErrorFont {
        font-size: 3rem;
    }

    .DivBetween {
        width: 50%;
    }

    .DivCenter {
        width: 45%;
    }

    .FEBestDiv2 {
        width: 20rem;
        margin: auto;
        height: 20rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .FEBestTextWrapper {
        width: 100%;
        height: 4rem;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 3vh;
        padding-bottom: 3vh;
    }

    .FEBestTextWrapper2 {
        width: 100%;
        height: 4rem;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 3vh;
    }

    .FEBestImageWrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: wrap;
    }

    .FEBestDiv5 {
        width: 100%;
        height: auto;
        display: initial;
    }

    .FEWrapper {
        display: flex;
        justify-content: space-between;
    }

    .HeadCont {
        width: 25%;
    }

    .ContentCont {
        width: 50%;
    }

    .HalfContentCont {
        width: 25%;
    }

    .flex-container {
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        align-items: center;
        width: 50%;
    }

    .Vorlagen-Container {
        flex: 0 1 33%;
        justify-content: center;
        align-items: center;
    }

    .ButtonContainer {
        flex: 0 1 33%;
        justify-content: center;
        align-items: center;
    }

    .FEErrorText {
        width: 50%;
    }

    .DivBetween {
        width: 50%;
    }

    .DivCenter {
        width: 50%;
    }

    .HeadCont {
        width: 25%;
    }

    .ContentCont {
        width: 50%;
    }

    .HalfContentCont {
        width: 25%;
    }

    .flex-container {
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        align-items: center;
        width: 50%;
    }

    .Vorlagen-Container {
        flex: 0 1 33%;
        justify-content: center;
        align-items: center;
    }

    .ButtonContainer {
        flex: 0 1 33%;
        justify-content: center;
        align-items: center;
    }

    .DatenContainer {
        width: 70%;
    }

    .MainContainer {
        width: 50%;
    }

    .nowrap {
        white-space: nowrap;
    }
}