@import url('https://fonts.verwaltungsportal.de/css/?family=Work+Sans:400,600,700,400i,600i,700i');

* {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: 100%;
    font-family: sans-serif;
    scroll-behavior: smooth;
    background: #ebeced;
    display: flex;
    align-items: start;
    align-content: start;
    justify-content: center;
    min-height: 100vh;
    padding: 30px;
}

@media (min-width: 992px) {
    html {
        padding-top: clamp(30px, 8vw, 100px);
    }
}

body {
    min-height: 660px;
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    color: #3d3d3d;
    font-size: 0.875rem;
    line-height: 1.5;
    background: #ffffff;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    box-shadow: 0 170px 55px -150px rgba(0, 0, 0, 0.2), 0 -120px 55px -150px rgba(0, 0, 0, 0.2);
}

@media (min-width: 690px) {
    body {
        display: flex;
    }

    header {
        width: 45%;
    }

    main:not(#portuna-privacy) {
        width: 55%;
    }
}

a {
    text-decoration: underline;
    transition: 300ms background linear, 300ms color linear;
}

b,
strong {
    font-weight: 600;
}

:is(h1, h2, h3, h4, h5, h6) {
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    font-weight: 400;
    line-height: 1.2;
}

#portuna-privacy {
    padding-top: 30px;
    border-left: clamp(10px, 2vw, 30px) solid #3e7aaf;
}

#portuna-privacy :is(p, ul) {
    margin: 10px 0;
}

#portuna-privacy ul {
    padding-left: 30px;
}

/*header left*/

header {
    background: #3e7aaf url('../img/v2/schreibtisch.jpg') center bottom / 100% auto no-repeat;
    padding: clamp(30px, 8vw, 100px) clamp(30px, 5vw, 55px) 100px clamp(30px, 5vw, 55px);
    font-size: clamp(1rem, 1vw, 1.125rem);
}

@media (max-width: 659px) {
    header {
        background-position: center bottom -3vw;
    }
}

@media (min-width: 430px) and (max-width: 659px) {
    header .small {
        max-width: 150px;
    }
}

@media (min-width: 460px) and (max-width: 689px) {
    body:not(.index) header h1 {
        max-width: 230px;
    }
}

@media (min-width: 570px) and (max-width: 689px) {
    header h1 + p {
        max-width: 230px;
    }
}

@media (min-width: 690px) {
    header {
        padding-bottom: 230px;
        display: grid;
        align-content: center;
        align-items: center;
    }
}

@media (min-width: 690px) and (max-width: 991px) {
    header {
        background-position: right -110px bottom;
        background-size: 640px auto;
    }
}

@media (min-width: 991px) {
    header {
        align-content: end;
        align-items: end;
    }
}

.not-found-page header {
    background: #b1191b;
}

header,
header :is(h1, h2, h3, h4, h5, h6, a) {
    color: #ffffff;
}

header :is(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 15px;
}

header :is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
    font-size: clamp(1.625rem, 5vw, 3.125rem);
    font-weight: 700;
    display: block;
}

header :is(.small, a) {
    font-size: 0.875rem;
}

header .small {
    margin-top: clamp(15px, 4vw, 55px);
}

header a {
    display: inline-block;
    border: 1px solid #ffffff;
    border-radius: 8px;
    color: #ffffff;
    background: #3e7aaf;
    text-decoration: none;
    margin-top: 15px;
    padding: 7px 10px;
}

.not-found-page header a {
    background: #b1191b;
}

header a:is(:hover, :focus) {
    background: rgba(0, 0, 0, 0.3);
}

/*main right*/

main {
    padding: clamp(40px, 10vw, 78px) 30px 30px 30px;
}

main a {
    color: #356997;
}

#logo {
    margin: 0 auto 28px auto;
    display: block;
    width: auto;
    min-height: 53px;
}

@media (max-width: 576px) {
    #logo {
        height: 40px;
        min-height: 40px;
    }
}

main :is(h1, h2, h3, h4, h5, h6, .text-center),
#globalInfo {
    text-align: center;
}

#globalInfo ul {
    text-align: left;
}

:is(main, .portuna-popup-wrapper) :is(h1, h2, h3, h4, h5, h6) + :is(p, div),
#portuna-update-info > ul,
#buttons {
    margin-top: 10px;
}

main form:not(#changepassword) {
    width: 100%;
    max-width: 320px;
}

main form,
#globalInfo {
    margin: 40px auto 30px auto;
}

#globalInfo {
    padding: 30px;
    width: 100%;
    max-width: 380px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

#globalInfo :is(h1, h2, h3, h4, h5, h6) {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    margin-bottom: 10px;
}

:is(#globalInfo, #changepassword) ul {
    padding-left: 12px;
}

#success::before,
#error::before {
    content: "";
    display: block;
    width: 120px;
    height: 120px;
    margin: 30px auto;
    border-radius: 50%;
    background: center / 60px auto no-repeat;
}

#success::before {
    background-color: #3d8538;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='53.295' viewBox='0 0 70 53.295'%3E%3Cpath id='check' d='M25.673,47.759l-16.7-16.7L3.4,36.623,25.673,58.9,73.4,11.168,67.832,5.6Z' transform='translate(-3.4 -5.6)' fill='%23fff'/%3E%3C/svg%3E%0A");
}

#error::before {
    content: "!";
    color: #ffffff;
    font-weight: 700;
    font-size: 80px;
    line-height: 115px;
    background-color: #b1191b;
}

.g-recaptcha > div {
    margin: 0 auto;
}

/*form*/

main form > div:nth-last-child(2),
#portuna-new-password,
#portuna-update-info,
#buttons .checkbox-design {
    margin-bottom: 20px;
}

main .formGroup + * {
    margin-top: 17px;
}

main .formLabel {
    padding-left: 15px;
    opacity: 0.8;
    position: relative;
    z-index: 1;
}

main .formLabel span,
main #portuna-captcha .formLabel {
    display: none;
}

main .formElement {
    position: relative;
}

main .formLabel + .formElement {
    margin-top: -28px;
}

main #portuna-captcha .formLabel + .formElement {
    margin-top: 0;
}

main input:is([type="text"], [type="password"]) {
    padding: 29px 15px 10px 15px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    font-family: inherit;
    display: block;
    font-size: 1rem;
    color: inherit;
}

main .formGroupError input:is([type="text"], [type="password"]),
main input:is([type="text"], [type="password"]):is([style*="red"], .red) {
    border-color: #b1191b !important;
}

main input:is([style*="green"], .green) {
    border-color: #3d8538 !important;
}

main :is(input, li):is([style*="red"], .red),
.red {
    color: #b1191b !important;
}

main li:is([style*="red"], .red) {
    list-style-type: red-list;
}

@counter-style red-list {
    system: cyclic;
    symbols: "x";
    suffix: " ";
}

main :is(input, li):is([style*="green"], .green)  {
    color: #3d8538 !important;
}

main li[style*="green"] {
    list-style-type: green-list;
}

@counter-style green-list {
    system: cyclic;
    symbols: "\2713";
    suffix: " ";
}

main input::placeholder {
    font-style: italic;
    opacity: 1;
}

main input:is([type="text"], [type="password"]),
.password-wrapper {
    width: 100% !important;
}

main input[type="password"] {
    padding-right: 56px;
}

@media (max-width: 359px) {
    #portuna-login {
        text-align: center;
    }

    #portuna-login > * + * {
        margin-top: 10px;
    }
}

@media (min-width: 360px) {
    #portuna-login {
        display: flex;
        column-gap: 30px;
        align-content: center;
        align-items: center;
    }

    #portuna-login > * {
        width: 50%;
    }

    .index #portuna-button {
        text-align: right;
    }
}

@media (max-width: 575px) {
    #password-left {
        margin-bottom: 20px;
    }
}

@media (min-width: 576px) {
    #portuna-new-password {
        display: flex;
        column-gap: 30px;
        align-content: center;
        align-items: center;
    }

    #portuna-new-password:not(.disclosed-password) > * {
        width: 50%;
    }

    #portuna-new-password.disclosed-password {
        flex-direction: column-reverse;
    }

    #portuna-new-password.disclosed-password > :first-child {
        margin-top: 30px;
    }
}

#description {
    font-size: 0.75rem;
}

#description p + p {
    margin-top: 4px;
}

/*form error*/

main :is(.formError, #portuna-error) {
    color: #b1191b;
    font-weight: 600;
    margin-bottom: 21px;
}

main .formError :not(ul ul) > li {
    list-style: none;
}

main .formError :not(ul ul) > li::before,
main #portuna-error::before {
    content: "!";
    color: #ffffff;
    background: #b1191b;
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 6px;
}

main .formError :not(ul ul) > li > p:first-child {
    display: inline;
}

/*form button design*/

#portuna-button {
    text-align: center;
}

:is(input[type="submit"], .button-design, .backLink) {
    background: #3d8538 center left 13px no-repeat;
    line-height: 1.2;
    color: #ffffff;
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 8px;
    padding: 14px 15px 14px 40px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 300ms linear, color 300ms linear, border 300ms linear, outline 300ms linear;
}

a.backLink {
    margin-top: 20px;
    background-color: #3e7aaf;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13.634' viewBox='0 0 14 13.634'%3E%3Cpath d='M17.519,10.33H7.483l4.384-4.384a.906.906,0,0,0,0-1.276.9.9,0,0,0-1.267,0L4.68,10.591a.9.9,0,0,0,0,1.267L10.6,17.779a.9.9,0,0,0,1.267-1.267L7.483,12.127H17.519a.9.9,0,1,0,0-1.8Z' transform='translate(-4.417 -4.407)' fill='%23fff'/%3E%3C/svg%3E%0A");
}

#portuna-privacy a.backLink,
#portuna-privacy > p:first-child {
    margin: 0;
}

@media (max-width: 767px) {
    #portuna-privacy > p:first-child {
        margin-bottom: 20px;
    }
}

:is(input[type="submit"].login, .button-design) {
    background-position: center left 11px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16.2' viewBox='0 0 18 16.2'%3E%3Cpath d='M10.1,6.6,8.84,7.86l2.34,2.34H2V12h9.18L8.84,14.34,10.1,15.6l4.5-4.5Zm8.1,10.8H11v1.8h7.2A1.805,1.805,0,0,0,20,17.4V4.8A1.805,1.805,0,0,0,18.2,3H11V4.8h7.2Z' transform='translate(-2 -3)' fill='%23fff'/%3E%3C/svg%3E%0A");
}

:is(input[type="submit"], button).reset {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18.93' viewBox='0 0 16 18.93'%3E%3Cg transform='translate(-4 -2)'%3E%3Cpath id='Pfad_53' data-name='Pfad 53' d='M12,5V2L8,6l4,4V7a6,6,0,0,1,1,11.91v2.02A8,8,0,0,0,12,5Z' fill='%23fff'/%3E%3Cpath id='Pfad_54' data-name='Pfad 54' d='M6,13A5.979,5.979,0,0,1,7.76,8.76L6.34,7.34A8,8,0,0,0,11,20.93V18.91A6.007,6.007,0,0,1,6,13Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
}

:is(input[type="submit"], button).set-password {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='11.399' viewBox='0 0 16 11.399'%3E%3Cpath id='done_FILL0_wght400_GRAD0_opsz48' d='M172.393,363.4a.751.751,0,0,1-.281-.051.779.779,0,0,1-.256-.179l-4.626-4.626a.8.8,0,0,1,0-1.125.741.741,0,0,1,1.073,0l4.089,4.089,9.278-9.278a.777.777,0,1,1,1.1,1.1l-9.84,9.84a.779.779,0,0,1-.256.179A.751.751,0,0,1,172.393,363.4Z' transform='translate(-167 -352)' fill='%23fff'/%3E%3C/svg%3E%0A");
}

:is(input[type="submit"], button):is(:hover, :focus) {
    background-color: #316b2d;
}

a.backLink:is(:hover, :focus) {
    background-color: #2c577d;
}

/*form visible buttons*/

button {
    cursor: pointer;
    display: inline-block;
    background: center / 24px auto no-repeat;
}

button.visible {
    border: none;
    position: absolute;
    z-index: 2;
    right: 7px;
    top: calc(50% - 20px);
    height: 40px;
    width: 40px;
    line-height: 40px;
    padding: 0 8px;
    border-radius: 6px;
    transition: 300ms background-color linear, 300ms color linear;
    background-position-y: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='15' viewBox='0 0 22 15'%3E%3Cpath d='M51,267.75a4.23,4.23,0,1,0-3.013-1.237A4.092,4.092,0,0,0,51,267.75Zm-.009-1.45a2.687,2.687,0,0,1-1.982-.818,2.716,2.716,0,0,1-.812-1.987,2.687,2.687,0,0,1,.818-1.982,2.716,2.716,0,0,1,1.987-.812,2.687,2.687,0,0,1,1.982.818,2.716,2.716,0,0,1,.813,1.988,2.687,2.687,0,0,1-.818,1.982A2.716,2.716,0,0,1,50.994,266.3ZM51,271a11.2,11.2,0,0,1-6.6-2.075A12.641,12.641,0,0,1,40,263.5a12.641,12.641,0,0,1,4.4-5.425,11.534,11.534,0,0,1,13.2,0A12.641,12.641,0,0,1,62,263.5a12.641,12.641,0,0,1-4.4,5.425A11.2,11.2,0,0,1,51,271Z' transform='translate(-40 -256)' fill='%233D3D3D'/%3E%3C/svg%3E%0A");
}

button.visible:is(:hover, :focus, .visibleOff) {
    background-color: #356997;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='15' viewBox='0 0 22 15'%3E%3Cpath d='M51,267.75a4.23,4.23,0,1,0-3.013-1.237A4.092,4.092,0,0,0,51,267.75Zm-.009-1.45a2.687,2.687,0,0,1-1.982-.818,2.716,2.716,0,0,1-.812-1.987,2.687,2.687,0,0,1,.818-1.982,2.716,2.716,0,0,1,1.987-.812,2.687,2.687,0,0,1,1.982.818,2.716,2.716,0,0,1,.813,1.988,2.687,2.687,0,0,1-.818,1.982A2.716,2.716,0,0,1,50.994,266.3ZM51,271a11.2,11.2,0,0,1-6.6-2.075A12.641,12.641,0,0,1,40,263.5a12.641,12.641,0,0,1,4.4-5.425,11.534,11.534,0,0,1,13.2,0A12.641,12.641,0,0,1,62,263.5a12.641,12.641,0,0,1-4.4,5.425A11.2,11.2,0,0,1,51,271Z' transform='translate(-40 -256)' fill='%23fff'/%3E%3C/svg%3E%0A");
}

button.visible.visibleOff {
    background-position-y: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18.205' viewBox='0 0 20 18.205'%3E%3Cpath d='M57.636,209.2l-3.818-3.75a8.829,8.829,0,0,1-1.8.489,12.015,12.015,0,0,1-2.023.17,10.42,10.42,0,0,1-6.023-1.852A10.856,10.856,0,0,1,40,199.3a10.313,10.313,0,0,1,1.261-2.307,12.919,12.919,0,0,1,1.966-2.148l-2.864-2.864.955-.977,17.2,17.2ZM50,203.159a4.43,4.43,0,0,0,.682-.057,2.378,2.378,0,0,0,.614-.17L46.364,198a2.783,2.783,0,0,0-.17.614,4.14,4.14,0,0,0-.057.682,3.7,3.7,0,0,0,1.136,2.75A3.758,3.758,0,0,0,50,203.159Zm6.318.909-2.932-2.932a3,3,0,0,0,.352-.852,3.974,3.974,0,0,0,.125-.989A3.841,3.841,0,0,0,50,195.432a4.205,4.205,0,0,0-.977.114,2.747,2.747,0,0,0-.864.364l-2.5-2.523a10.305,10.305,0,0,1,2.034-.636,11.237,11.237,0,0,1,2.42-.273,10.26,10.26,0,0,1,5.943,1.852A10.739,10.739,0,0,1,60,199.3a11.228,11.228,0,0,1-1.523,2.659A10.977,10.977,0,0,1,56.318,204.068Zm-3.932-3.932-3.227-3.227a2.387,2.387,0,0,1,1.364-.1,2.479,2.479,0,0,1,1.227.648,2.865,2.865,0,0,1,.727,1.17A2.4,2.4,0,0,1,52.386,200.136Z' transform='translate(-40 -191)' fill='%23fff'/%3E%3C/svg%3E%0A");
}

/*form checkbox*/

.checkbox-design {
    position: relative;
    min-height: 26px;
    padding-left: 1px;
}

.checkbox-design input {
    position: absolute;
    opacity: 0;
    width: 26px;
    height: 26px;
    z-index: 2;
    cursor: pointer;
}

.checkbox-design label {
    position: relative;
    padding-left: 36px;
    display: block;
    cursor: pointer;
}

.checkbox-design label::after,
.checkbox-design label::before {
    content: "";
    display: inline-block;
    position: absolute;
}

.checkbox-design label::after {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: #ffffff;
    width: 26px;
    height: 26px;
    top: 0;
    left: 0;
    border-radius: 8px;
    transition: border 300ms linear;
}

.checkbox-design label:hover::after {
    border-color: #3e7aaf;
}

.checkbox-design:focus-within label::after {
    outline: 1px solid #262626;
    border: 1px solid #262626 !important;
}

.checkbox-design label::before {
    left: 7px;
    top: 8px;
    width: 12px;
    height: 8px;
    border-left: 2px solid #3d8538;
    border-bottom: 2px solid #3d8538;
    transform: rotate(-45deg) scale(0);
    z-index: 1;
    transition: transform 200ms linear;
}

.checkbox-design input[type="checkbox"]:checked + label::before {
    transform: rotate(-45deg) scale(1);
}

/*popup*/

.portuna-popup-wrapper {
    content: "";
    display: block;
    position: fixed;
    z-index: 110;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
    animation: popupFadeIn 300ms ease 1 forwards;
}

@keyframes popupFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.portuna-popup-window {
    margin: 0 !important;
    padding: 30px;
    background: #ffffff;
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 968px;
    max-height: 96vh;
    width: calc(100% - 30px);
    z-index: 10;
    border-radius: 8px;
    box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.1);
    transform: translateX(-50%) translateY(-50%);
    transition: opacity 300ms linear, top 300ms linear;
}

.portuna-popup-overflow {
    overflow-y: auto;
    max-height: calc(96vh - 120px);
}

.portuna-popup-cancel {
    cursor: pointer;
    border-radius: 50px;
    display: block;
    width: 30px;
    height: 30px;
    color: #ffffff;
    background: #3e7aaf url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 96 960 960' width='48'%3E%3Cpath d='M249 862.566 193.434 807l231-231-231-231L249 289.434l231 231 231-231L766.566 345l-231 231 231 231L711 862.566l-231-231-231 231Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px auto no-repeat;
    border: none;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 0;
    text-align: center;
}

.portuna-popup-cancel img {
    display: none;
}

.portuna-popup-cancel:is(:hover, :focus) {
    animation: shake 1s ease 1;
}

@keyframes shake {
    30% {
        transform: scale(1.2);
    }
    40%, 60% {
        transform: rotate(-20deg) scale(1.2);
    }
    50% {
        transform: rotate(20deg) scale(1.2);
    }
    70% {
        transform: rotate(0deg) scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}