body {
    margin: 0;
}

@font-face {
    font-family: 'PortalPlatz';
    font-style: normal;
    font-weight: normal;
    src: local('PortalPlatz'),local('PortalPlatz-Regular'),
 url('../media/font/PortalPlatz.woff') format('woff'),
 url('../media/font/PortalPlatz.ttf') format('truetype');
}

@font-face {
    font-family: 'PortalPlatz';
    font-style: normal;
    font-weight: bold;
    src: local('PortalPlatz Bold'),local('PortalPlatz-Bold'),
 url('../media/font/PortalPlatz-Bold.woff') format('woff'),
 url('../media/font/PortalPlatz-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Kalam';
    font-style: normal;
    font-weight: normal;
    src: local('Kalam Regular'),local('Kalam-Regular'),
 url('../media/font/kalam-regular.woff2') format('woff2'),
 url('../media/font/kalam-regular.ttf') format('truetype');
}

p {
    font-family: PortalPlatz;
    font-size: 16px;
    line-height: 28px;
    font-weight: normal;
    color: #808080;
    margin-top: 15px;
    margin-bottom: 15px;
}

h1 {
    font-family: PortalPlatz;
    font-size: 24px;
    color: #00AAFF;
    margin-top: 20px;
    margin-bottom: 50px;
}

h2 {
    font-family: PortalPlatz;
    font-size: 24px;
    color: #00AAFF;
}

h3 {
    font-family: PortalPlatz;
    font-size: 18px;
    color: #004099;
}

h4 {
    font-family: PortalPlatz;
    font-size: 24px;
    color: #00AAFF;
}

h5 {
    font-family: PortalPlatz;
    font-size: 24px;
    color: #00AAFF;
}

h6 {
    font-family: PortalPlatz;
    font-size: 24px;
    color: #00AAFF;
}

a {
    text-decoration: none;
    font-family: PortalPlatz;
    font-size: 16px;
    line-height: 28px;
    color: #00AAFF;
}

a:hover {
    color: #004099;
}

a:active {
    color: #004099;
}

a:focus {
    color: #004099;
}

span {
    font-family: PortalPlatz;
    font-size: 16px;
    color: #808080;
    line-height: 20px;
}

ul {
    list-style-type: disc;
    margin-top: 30px;
    margin-bottom: 30px;
}

li {
    font-family: PortalPlatz;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 28px;
    color: #808080;
}

label {
    font-family: PortalPlatz;
    font-size: 16px;
    color: #808080;
    font-weight: normal;
    line-height: 20px;
    margin-bottom: 8px;
}

input {
    font-family: PortalPlatz;
    font-size: 16px;
    line-height: 28px;
    color: #808080;
    padding: 5px 10px;
    border: 1px solid #d0d9df;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
}

textarea {
    font-family: PortalPlatz;
    font-size: 16px;
    line-height: 28px;
    color: #808080;
    padding: 5px 10px;
    border: 1px solid #d0d9df;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
}

.ContentWrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
    padding: 50px;
}

@media only screen and (min-width:501px) and (max-width: 1000px) {
    .ContentWrap {
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media only screen and (max-width:500px) {
    .ContentWrap {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.Button {
    font-family: PortalPlatz;
    font-size: 16px;
    color: #ffffff;
    background-color: #00AAFF;
    padding: 10px 20px;
    border-style: none;
    border-radius: 20px;
    box-shadow: 0px 3px 5px rgba(0, 51, 77, 0.25) , inset 0px -2px 5px rgba(0, 51, 77, 0.25) , inset 0px 5px 3px rgba(255, 255, 255, 0.3);
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 20px;
    display: inline-flex;
    font-weight: normal;
}

.Button:active {
    box-shadow: 0px 4px 8px rgba(0, 51, 77, 0.25) , inset 0px -2px 5px rgba(0, 51, 77, 0.25) , inset 0px 5px 3px rgba(255, 255, 255, 0.25);
    transform: scale(1.02);
    transition: 0.3s;
}

.Button:focus {
    box-shadow: 0px 4px 8px rgba(0, 51, 77, 0.25) , inset 0px -2px 5px rgba(0, 51, 77, 0.25) , inset 0px 5px 3px rgba(255, 255, 255, 0.25);
    transform: scale(1.02);
    transition: 0.3s;
}

.Button:hover {
    box-shadow: 0px 4px 8px rgba(0, 51, 77, 0.25) , inset 0px -2px 5px rgba(0, 51, 77, 0.25) , inset 0px 5px 3px rgba(255, 255, 255, 0.25);
    transform: scale(1.02);
    transition: 0.3s;
    color: #ffffff;
}

.WrapContent50Wrapper {
    display: flex;
    padding-left: 25px;
    padding-right: 25px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1650px;
}

@media (min-width:750px) and (max-width: 1000px) {
    .WrapContent50Wrapper {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width:749px) {
    .WrapContent50Wrapper {
        display: block;
        padding: 25px 0;
    }
}

.WrapContent50 {
    width: 50%;
    padding: 50px 25px;
}

@media (max-width:500px) {
    .WrapContent50 {
        width: auto;
        padding: 25px 20px;
    }
}

@media (min-width:501px) and (max-width:749px) {
    .WrapContent50 {
        width: auto;
        padding: 25px;
    }
}

.HeaderWrap {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.LogoHeader {
    width: auto;
    height: 75px;
    margin-right: 15px;
}

.HeaderLogoWrap {
    display: flex;
}

.HeaderLogoTextUnter {
    color: #808080;
    margin-top: 5px;
    margin-bottom: 0;
    line-height: 16px;
}

.HeaderLogoTextOben {
    font-size: 24px;
    color: #00AAFF;
    margin-bottom: 0;
    margin-top: 10px;
    font-weight: bold;
}

@media (max-width:500px) {
    .HeaderLogoTextWrap {
        display: block;
    }
}

footer {
    background-color: #e5eef2;
}

.FooterWrapper {
    display: flex;
}

.FooterInfoWrap {
    width: 30%;
    min-width: 337px;
}

.FooterLogoWrap {
    display: flex;
}

.FooterLogo {
    width: auto;
    height: 100px;
    margin-right: 15px;
}

.FooterBrand {
    margin-top: 0;
    margin-bottom: 0;
}

.FooterLogoTxt {
    line-height: 20px;
}

@media only screen and (max-width:500px) {
    .FooterInfoWrap {
        width: auto;
        min-width: auto;
    }
}

.H2Recht {
    margin-top: 50px;
    font-size: 18px;
    color: #004099;
}

.TxtGrau {
    color: #808080;
}

.TxtCenter {
    text-align: center;
}

.Header {
    box-shadow: 0px -15px 30px 20px rgba(102, 134, 153, 0.25);
}

.StartTitle {
    text-align: center;
    padding-top: 100px;
    padding-bottom: 100px;
}

.BetaSign {
    color: #ffab00;
    text-transform: uppercase;
    border: 2px solid #ffab00;
    border-radius: 10px;
    display: inline-flex;
    padding: 5px 15px;
}

.FormStartTitle {
    padding: 10px;
    border-style: none;
    border-radius: 10px;
    width: 100%;
}

.FormStartTitle::placeholder {
    color: #c4c4c4;
}

.FormStartTitle::-ms-input-placeholder {
    color: #c4c4c4;
}

.SubmitStartTitle {
    border-style: none;
    border-radius: 10px;
    background-color: #004099;
    color: #ffffff;
    padding: 10px 15px;
    box-shadow: 0px 3px 5px rgba(0, 51, 77, 0.25) , inset 0px -2px 5px rgba(0, 51, 77, 0.25) , inset 0px 5px 3px rgba(255, 255, 255, 0.3);
    cursor: pointer;
    margin: 0 0 0 -20px;
    font-weight: normal;
}

.SubmitStartTitle:hover {
    background-color: #00aaff;
}

.FormStart {
    display: flex;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 75px;
    box-shadow: 0px 7px 20px rgba(102, 134, 153, 0.25);
    border-radius: 10px;
}

.TxtKalam {
    font-family: Kalam;
    color: #000000;
    font-size: 18px;
}

.StartTitlePfeilWrap {
    width: 30px;
    height: 30px;
    position: relative;
    min-width: 30px;
    min-height: 30px;
}

#StartTitlePfeilStiel {
    position: absolute;
}

#StartTitlePfeilSpitze {
    position: absolute;
}

.StartTitleTxtGeschriebenWrap {
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
    margin-top: 25px;
}

.StartTitleTxtGeschriebenWrapper {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.StartTitleTxt {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.BGGrau {
    background-color: #e5eef2;
}

.StartPortaleOverviewLogo {
    width: 150px;
    height: auto;
}

.BGVerlauf {
    background-image: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(239, 243, 247) 100%);
}

.ImageFit {
    width: 100%;
    object-fit: cover;
    height: 100%;
    display: block;
}

.Relative {
    position: relative;
}

.StartPortal3DImg {
    max-height: 500px;
}

.StartPortal3DSchatten {
    width: 100%;
    margin-top: -50px;
    max-width: 300px;
    opacity: 0.2;
}

.StartPortal3DWrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.Width100prc {
    width: 100%;
}

.FlexCenterVertikal {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width:749px) {
    .WrapContent50WrapperReverse {
        display: flex;
        flex-direction: column-reverse;
    }
}

.WrapContent50TxtWrap {
    margin-top: 100px;
    margin-bottom: 100px;
}

@media only screen and (max-width:749px) {
    .WrapContent50TxtWrap {
        margin-top: 25px;
        margin-bottom: 0;
    }
}

.StartEintragZentralWrap {
    width: calc(50vw - 75px);
    max-width: 500px;
    max-height: 500px;
    position: relative;
    height: calc(50vw - 75px);
}

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

@media only screen and (max-width:749px) {
    .StartEintragZentralWrap {
        width: calc(100vw - 40px);
        height: calc(100vw - 40px);
    }
}

#StartEintragZentralPP {
    position: absolute;
    width: 15%;
    height: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

#StartEintragZentralGoogle {
    width: 15%;
    height: auto;
    position: absolute;
    top: 10%;
    right: 10%;
}

#StartEintragZentralGooglePfeilStiel {
    position: absolute;
    width: 10%;
    height: 10%;
    top: 30%;
    right: 25%;
    transform: rotate(25deg);
}

#StartEintragZentralGooglePfeilSpitze {
    width: 10%;
    position: absolute;
    height: 10%;
    top: 30%;
    right: 25%;
    transform: rotate(25deg);
}

.Formular {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    padding: 25px;
    box-shadow: 0px 14px 30px rgba(0, 51, 77, 0.25) , inset 0px -3px 8px rgba(0, 51, 77, 0.15) , inset 0px 7px 8px #ffffff , inset 0px 4px 5px rgb(244, 248, 249);
    border-radius: 20px;
    background-image: linear-gradient(180deg, rgb(244, 248, 249) 0%, rgb(255, 255, 255) 100%);
}

.FormularFeldWrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
    width: 100%;
    position: relative;
}

.FormularFeldFlexWrapper {
    display: flex;
    column-gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.FormularWidth50pct {
    width: calc(50% - 5px);
}

.FormularWidth30pct {
    width: calc(30% - 5px);
}

.FormularWidth70pct {
    width: calc(70% - 5px);
}

.MarginBottom50px {
    margin-bottom: 50px;
}

.FormularCheckbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    min-width: 30px;
    min-height: 30px;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-color: #ffffff;
    cursor: pointer;
    margin-left: 0;
}

.FormularCheckbox:checked {
    background-color: #ffffff;
}

.FormularCheckbox:checked:before {
    content: url('/media/Check.svg');
    color: #00aaff;
    position: absolute;
    left: 5px;
    width: 18px;
    height: 18px;
    top: 3px;
    animation: checkbox-check 0.5s forwards;
}

@keyframes checkbox-check {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0% 0 0);
    }
}

.FormularCheckboxWrap {
    display: flex;
}

.FormularCheckboxTextDSGVO {
    margin-top: 0;
    margin-bottom: 30px;
}

.FormularAnmeldenIcon {
    width: 30px;
    height: 30px;
    margin-right: 15px;
}

.Height50px {
    height: 50px;
}

.FormularIconPlatzhalter {
    width: 45px;
    height: 1px;
}

.AnmeldenTxt {
    margin-top: 50px;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.TxtHellgrau {
    color: #b3b3b3;
}

@media (max-width:500px) {
    .FormularMobile2zeilig {
        flex-direction: column;
    }
}

@media only screen and (max-width:500px) {
    .FormularMobile2zeilig div {
        width: 100%;
    }
}

@media (max-width:500px) {
    .FormularAnmeldeIconMobil2zeilig {
        margin-bottom: 88px;
    }
}

input::placeholder {
    color: #d3d3d3;
}

textarea::placeholder {
    color: #d3d3d3;
}

.FormularError {
    color: #cc0000;
    line-height: 20px;
}

.autocomplete-items {
    background-color: #ffffff;
    border: 1px solid #d0d9df;
    border-radius: 5px;
}

.autocomplete-items > div {
    padding-left: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: PortalPlatz;
    color: #808080;
    cursor: pointer;
}

.autocomplete-items > div:hover {
    background-color: #f4f8f9;
}

.autocomplete-active {
    background-color: #f4f8f9;
}

.Flex {
    display: flex;
}

.FormularAnmeldeIconKategorie {
    margin-top: 35px;
}

.MarginBottom200px {
    margin-bottom: 200px;
}

.MarginTop50px {
    margin-top: 50px;
}

.Input0 {
    height: 0;
    border-style: none;
    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 0;
    border: none;
}

.CheckboxConfirm {
    position: absolute;
    left: -100vw;
}

.CaptchaImg {
    border-style: none;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-left: 2px;
}

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

.InfoButton {
    color: #ffffff;
    background-color: #e3ecee;
    border-radius: 25px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    cursor: pointer;
    font-size: 14px;
}

.InfoMeldung {
    padding: 10px;
    background-color: rgba(242, 252, 252, 0.75);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    position: absolute;
    bottom: 100%;
    border-radius: 20px;
    right: 0;
    box-shadow: inset 0px 3px 0px #ffffff , 0px 5px 15px rgba(0, 51, 77, 0.15) , inset 0px -3px rgba(186, 211, 211, 0.5);
    display: none;
}

.InfoClose {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #c1ced1;
    cursor: pointer;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    text-align: center;
}

.AniInfoMeldung {
}

.DatenschutzMenu {
    height: 100px;
    display: flex;
    align-items: center;
    padding-bottom: 0;
    padding-right: 0;
}

.DatenschutzMenu ul {
    display: flex;
    list-style-type: none;
    padding-left: 0;
    overflow: scroll;
}

.DatenschutzMenu li {
    margin-right: 30px;
    background-color: #c2d5d9;
    color: #ffffff;
    padding: 10px;
    border-radius: 30px;
    white-space: nowrap;
}

.MaxWidth550px {
    max-width: 550px;
}

.FaqTitelbereich {
    min-height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Titelbild {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.TitelbereichWrap {
    display: flex;
    position: relative;
    z-index: 10;
    align-items: center;
}

.Badge {
    box-shadow: 0px 5px 15px rgba(0, 51, 77, 0.1) , inset -2px -5px 8px rgba(17, 56, 67, 0.1) , inset 3px 5px 5px #ffffff;
    background-image: radial-gradient(circle at center, rgb(255, 255, 255) 0%, rgb(237, 244, 246) 80%, #b6ccd2 100%);
}

.TitleImg {
    height: 50px;
    width: 50px;
    border-radius: 35px;
    padding: 10px;
    margin-right: 15px;
    object-fit: contain;
}

.FaqTitelbereich h1 {
    color: #004099;
    margin-bottom: 0;
    margin-top: 0;
}

.ArtikelWrap {
    max-width: 800px;
    width: calc(100% - 365px);
}

.ArtikelInhaltsverzeichnisWrap {
    min-width: 275px;
    align-self: flex-start;
    max-width: 350px;
}

.ArtikelWrapper {
    display: flex;
    gap: 50px;
    justify-content: space-evenly;
    flex-direction: row-reverse;
}

.FieldWrap {
    border-radius: 20px;
    box-shadow: 0px 14px 30px rgba(0, 51, 77, 0.20) , inset 0px -3px 8px rgba(0, 51, 77, 0.15) , inset 0px 7px 8px #ffffff , inset 0px 4px 5px rgb(244, 248, 249);
    background-image: linear-gradient(180deg, #f4f8f9 0%, rgb(255, 255, 255) 100%);
    padding: 20px;
}

.ArtikelInhaltsverzeichnisList {
    padding-left: 20px;
    margin-bottom: 0;
}

.ListBG {
    background-color: #F0F4F7;
    border-radius: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 0px 14px 30px rgba(0, 51, 77, 0.10) , inset 0px -3px 8px rgba(0, 51, 77, 0.15) , inset 0px 7px 8px #ffffff , inset 0px 4px 5px rgb(244, 248, 249);
}

.ListBG li {
    color: #555555;
}

.ImgCitationWrap {
    box-shadow: 0px 14px 30px rgba(0, 51, 77, 0.10);
    border-radius: 20px;
    background-color: #004099;
    width: fit-content;
}

.ImgCitationImg {
    /* width: 100% */
    border-radius: 20px;
    display: block;
}

.ImgCitationTxt {
    color: #ffffff;
    padding-left: 20px;
    display: block;
    padding-bottom: 15px;
    padding-top: 15px;
    font-size: 16px;
}

.ArtikelImg {
    max-height: 500px;
    object-fit: contain;
    width: 100%;
}

.MaxHeight800px {
    max-height: 800px;
}

@media only screen and (max-width:998px) {
    .ArtikelWrapper {
        flex-direction: column;
    }

    .ArtikelWrap {
        width: auto;
    }
}

.ListIcon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.ListIconWrap {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 10px;
    margin-right: 10px;
}

.FlexCenterHorizontal {
    display: flex;
    align-items: center;
}

.PaddingLeft20px {
    padding-left: 20px;
}