/* ===============================
   FONT STYLES
   =============================== */

/* 👇 Styles for xs, sm, md (up to <992px) */
@media (max-width: 991.98px) {
    .text-zw-1 {
        font-size: 16px !important;
        line-height: 26px !important;
        letter-spacing: 0 !important;
    }

    .text-zw-2 {
        font-size: 30px !important;
        line-height: 36px !important;
        letter-spacing: 1.2px !important;
    }

    .text-zw-3 {
        font-size: 18px !important;
        line-height: 27px !important;
        letter-spacing: 0.9px !important;
    }

    .text-zw-4 {
        font-size: 18px !important;
        line-height: 27px !important;
        letter-spacing: 0.72px !important;
    }

    .text-zw-5 {
        font-size: 24px !important;
        line-height: 30px !important;
        letter-spacing: 0.96px !important;
    }

    .text-zw-6 {
        font-size: 18px !important;
        line-height: 27px !important;
        letter-spacing: 0 !important;
    }

    .text-zw-7 {
        font-size: 36px !important;
        line-height: 48px !important;
        letter-spacing: 1.44px !important;
    }

    .text-zw-8 {
        font-size: 12px !important;
        line-height: 18px !important;
        letter-spacing: 0px !important;
    }

    .text-zw-9 {
        font-size: 16px !important;
        line-height: 24px !important;
        letter-spacing: 0.64px !important;
    }

    .text-zw-10 {
        font-size: 16px !important;
        line-height: 20px !important;
        letter-spacing: 0 !important;
    }

    .text-zw-11 {
        font-size: 18px !important;
        line-height: 24px !important;
        letter-spacing: 0.9px !important;
    }

    .text-zw-12 {
        font-size: 18px !important;
        line-height: 22px !important;
        letter-spacing: 0 !important;
    }

}

/* 👇 Styles for lg and above (≥992px) */
@media (min-width: 992px) {
    .text-zw-1 {
        font-size: 16px !important;
        line-height: 24px !important;
        letter-spacing: 0.64px !important;
    }

    .text-zw-2 {
        font-size: 36px !important;
        line-height: 48px !important;
        letter-spacing: 1.44px !important;
        color: red !important;
    }

    .text-zw-3 {
        font-size: 18px !important;
        line-height: 27px !important;
        letter-spacing: 0.9px !important;
    }

    .text-zw-4 {
        font-size: 18px !important;
        line-height: 27px !important;
        letter-spacing: 0.9px !important;
    }

    .text-zw-5 {
        font-size: 24px !important;
        line-height: 30px !important;
        letter-spacing: 0.96px !important;
    }

    .text-zw-6 {
        font-size: 18px !important;
        line-height: 27px !important;
        letter-spacing: 0 !important;
    }

    .text-zw-7 {
        font-size: 36px !important;
        line-height: 48px !important;
        letter-spacing: 1.44px !important;
    }

    .text-zw-8 {
        font-size: 12px !important;
        line-height: 18px !important;
        letter-spacing: 0px !important;
    }

    .text-zw-9 {
        font-size: 16px !important;
        line-height: 24px !important;
        letter-spacing: 0.64px !important;
    }
}

.zw-hint-text {
    color: #B20000;
}

.zw-box-shadow-1 {
    box-shadow: 2px 2px 8px #0000000A;
}

.zw-font-jd {
    font-family: "JD-Handwriting", serif;
}

.zw-font-default-jd {
    font-family: "Source Sans 3 VF", serif;
}

.fw-zw-1 {
    font-weight:400 !important;
}

.fw-zw-2 {
    font-weight:600 !important;
}

.zw-font-1 { /* fs: 18 - lh: 27 - ls: 0.9 - fw: 600 */
    font-weight: 600;
    letter-spacing: 0.9px;
    font-size: 1.143rem;
    line-height: 1.929rem;
}

.zw-font-2 {
    font-weight: normal;
    letter-spacing: 0.9px;
    font-size: 1.143rem;
    line-height: 1.929rem;
}

.zw-font-3 { /* fs: 24 - lh: 30 - fw: 600 - ls: 0.96 */
    font-weight: 600;
    letter-spacing: 0.96px !important;
    font-size: 1.143rem;
    line-height: 1.929rem;
}

.zw-font-4 { }

.zw-font-color-1 {
    color: white;
}

.zw-font-color-2 {
    color: #002D55;
}

.zw-v h1 {
    font-weight: 700;
    font-size: 2.571rem;
    line-height: 3.429rem;
    letter-spacing: 0.103rem;
    color: #002D55;
}


/* ===============================
   HEADER SECTION
   =============================== */

.zw-header-cta-emergency {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #B20000;
    color: white;
    width: 500px;
    height: 2.429rem;
    border-radius: 0.286rem;
    font-weight: 600;
    font-size: 1.143rem;
    line-height: 1.714rem;
    letter-spacing: 0.046rem;
    text-decoration: none;
    padding: 0;
}

.zw-header-cta-emergency:hover, .zw-header-cta-emergency:focus {
    background-color: #DB0000 !important;
    color: white !important;
}

.zw-header-cta-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: #002D55;
    width: 13.714rem;
    height: 2.429rem;
    border-radius: 0.286rem;
    border: 2px solid #002D55;
    font-weight: 600;
    font-size: 1.143rem;
    line-height: 1.714rem;
    letter-spacing: 0.046rem;
    text-decoration: none;
    padding: 0;
}

.zw-menu-container {
    height: 4.286rem;
}

.zw-back-button-container {
    position: relative;
    top:-25px;
    gap: 1rem;
}

.zw-back-button {
    height:34px;
    padding:3px 12px 3px 12px;
    border: 1px solid #002D55;
    background: white;
    z-index: 100;
}

.zw-back-button:hover, .zw-back-button:focus-visible {
    background: #F5FAFF;
}

.zw-back-button span {
    padding-left:10px;
}

.header-icons li:hover img,
.header-icons li:focus-visible img {
    filter: brightness(166%);
}

@media (max-width: 575px) {
    .header-icons .dropdown-menu {
        left: 10px !important;
        right: 10px !important;
        top: 60px !important;
        transform: none !important;
    }
}

@media (max-width: 767px) {
    .zw-back-button-container {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ===============================
   STAGE / HERO SECTION
   =============================== */

.zw-stage-bg-wrapper {
    height: 400px;
    overflow: hidden;
    position: relative;
}

.zw-stage-bg-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

.stage-title-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    /*pointer-events: none; /* Ensures overlay doesn't block interactions */
}

.stage-bg-desktop {
    height: 28.571rem;
    background-image: url("../../../images/zwischenversion/img/stage-desktop-large.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain; /* Or use '100% auto' for full-width scaling */
    background-attachment: local;
}

.stage-container-desktop {
    height: 28.571rem;
}


/* ===============================
   FOOTER SECTION
   =============================== */

.zw-footer-container {
    background-color: #002D55;
}

.zw-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px 0;
}

.zw-footer-left,
.zw-footer-middle,
.zw-footer-right {
    width: 332px;
}

.zw-footer-left a:hover, .zw-footer-left a:focus-visible {
    text-decoration: underline;
}

.zw-footer-middle a:hover img,
.zw-footer-right a:hover img,
.zw-footer-middle a:focus-visible img,
.zw-footer-right a:focus-visible img {
    filter: brightness(115%);
}

.zw-footer-middle {
    margin: 0 auto;
}

.zw-footer-column-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zw-footer-column-head img {
    display: block;
}

.zw-footer-column-head h5 {
    padding: 0;
    margin: 0;
}

.zw-footer ul {
    list-style: none;
}

.zw-footer li {
    margin-bottom: 10px;
}

footer a,
footer a:hover {
    color: white;
}


/* ===============================
   FOOTER COMPONENTS
   =============================== */

.zw-footer-middle img {
    max-width: 100%;
    height: auto;
    display: block;
}

.zw-footer-social-media {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.zw-footer-social-media a:hover img, .zw-rating-container:hover {
    filter: brightness(166%);
}

@media (max-width: 991px) {
    .zw-footer-social-media img {
        width: 50px;
    }
}

.insta-grid {
    display: grid;
    max-width: 332px;
    grid-template-columns: repeat(3, 1fr); /* 3 per row */
    gap: 10px; /* 10px consistent gap in both directions */
}

.insta-grid-item {
    max-width: 104px;
    max-height: 104px;
    aspect-ratio: 1 / 1; /* Forces square aspect ratio */
}

.insta-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    overflow: hidden;
    border-radius: 10px;
}

.footer-links li {
    margin-bottom:10px;
}

.footer-links a {
    color: white !important;
}

/* ===============================
   STACK FOOTER
   =============================== */

.zw-stack-footer {
    background-color: #FAFAFA;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px; /* was 40px */
    row-gap: 5px; /* if you want even tighter stacking */
}

.zw-stack-col {
    flex: 0 0 332px;
}


/* ===============================
   RATING SECTION
   =============================== */

.zw-rating-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Arial, sans-serif;
}

.zw-stars {
    white-space: nowrap;
}

.zw-stars img {
    height: 24px;
    margin-right: 2px;
}

.zw-rating-text {
    font-size: 18px;
    color: #002D55;
}

.zw-rating-text a,
.zw-rating-text a:hover {
    font-size: 18px;
    font-family: "Source Sans 3 VF", serif;
    letter-spacing: 0.9px;
    line-height: 27px;
    color: #002D55;
}

.mt-sm-md-40 {
    margin-top: 40px;
}

@media (min-width: 992px) { /* lg breakpoint */
    .mt-sm-md-40 {
        margin-top: 0;
    }
}

/* ===============================
   Home GRID
   =============================== */

.zw-home-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    container-type: inline-size;
}

.zw-home-grid-item {
    width: 420px;
    min-height: 289px;
    border: none;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 8px #0000000B;
    transition: box-shadow 0.3s;
    background-color: #fff;
    color: #2C2C2C;
    text-align: left;
}

.zw-home-grid-item:not(.zw-not-available):hover,
.zw-home-grid-item:not(.zw-not-available):focus-visible {
    box-shadow: 1px 1px 3px #0000001B;
    color: #2C2C2C;
}

.zw-not-available {
    background-color: #aaa;
}

.zw-home-grid-item-slider {
    width: 100%;
    max-width: 420px;
    min-height: 289px;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
}

.zw-home-icon {
    font-size: 24px;
    margin-bottom: 20px;
    margin-top:10px
}

.zw-home-icon img {
    max-width: 56px;
}

.zw-home-title {
    font-weight: 600;
    margin-bottom: 20px;
}

.zw-home-description {
    flex-grow: 1;
    font-size: 14px;
}

.zw-home-bottom-link {
    position: relative;
    right: -10px;
    float: right;
    clear: both;
}

.zw-home-bottom-link i {
    font-size: 30px;
    color: #013B6F;
}

/* .zw-home-grid-item:not(.zw-not-available):hover .zw-home-bottom-link i,
.zw-home-grid-item:not(.zw-not-available):focus-visible .zw-home-bottom-link i {
    color: #006ECF;
} */

/* */
.zw-home-slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%; /* Adjust height as needed */
}

.zw-home-slider-wrapper {
    display: flex;
    transition: transform 0.3s ease-in-out;
    width: 500%; /* 100% x number of slides */
    height:100%;
}

.zw-home-slider-element {
    width: 100%;
    display: none;
    color: #2C2C2C;
    outline-offset: -2px;
}

.zw-home-slider-dots {
    position: relative;
    bottom: -20px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index:1000;
}

.zw-home-slider-dots .dot {
    border: none;
    padding: 0;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
}

.zw-home-slider-dots .dot.active {
    background: #333;
}

.zw-home-slider-dots .arrow {
    background: none;
    border: none;
    padding: 0;
    top: -12px;
    position: absolute;
    font-size: 30px;
    color: #ccc;
}

.zw-home-slider-dots .arrow.left {
    left: 0;
}

.zw-home-slider-dots .arrow.right {
    right: 0;
}

.zw-home-slider-dots .arrow:hover {
    color: #333;
}

.zw-home-slider-link {
    margin-top:16px;
    background-color: #FF3D00;
    font-weight: 600;
    width: 100%;
    min-height: 34px;
    line-height: 32px !important;
    color: #FFFFFF !important;
    padding:0;
}

.zw-home-slider-element:not(.zw-not-available):hover .zw-home-slider-link,
.zw-home-slider-element:not(.zw-not-available):focus-visible .zw-home-slider-link {
    background-color: #FF5C29;
}

@container (930px <= width < 1310px) {
    .zw-home-grid-item-slider {
        max-width: 840px;
    }
    .zw-home-slider-container {
        max-width: 420px;
        margin: auto;
    }
}

/* 👇 Styles for lg and above (≥992px) jdboxnav responsive extra styles */
@media (max-width: 991.98px) {

    .zw-home-grid-container-responsive {
        padding: 0 0 80px 0;
    }

}

@media (min-width: 992px) {

    .zw-home-grid-container-responsive {
        padding: 0 0 80px 0;
    }
    .zw-home-nonews .zw-home-grid-container-responsive {
        margin-top: -80px;
    }

}

/* Images and Icons */

.zw-dl-icon {
    width:20px !important;
    height:20px !important;
    margin-right:3px;
}

.dl-link {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Abstand zwischen Icon und Text */
}


/* Notfall-Seite */

.zw-phone-container {
    background-color: white;
    box-shadow: 2px 2px 8px #0000000A;
    display: flex;
    align-items: center;
    gap: 15px; /* Abstand zwischen Icon und Text */
}

.zw-phone-icon-container {
    background-color: #B20000;
    height: 80px;
    width: 83px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Icon soll nicht schrumpfen */
}

.zw-phone-special-text {
    color: #2C2C2C;
    font-weight: 700;
}

.zw-phone-text-container {
    flex: 1; /* Nimmt verbleibenden Platz ein */
}

/* Testament */

.zw-testament-font-color-1 {
    color: #2C2C2C !important;
}

.zw-testament-enumeration {
    padding:20px 0 0 20px;
}

.zw-testament-enumeration .number-container {
    position: relative;
    display: inline-block;
}

.zw-testament-enumeration .number-container img {
    position: relative;
    z-index: 1;
    display: block;
}

.zw-testament-enumeration .number-container .dot {
    position: absolute;
    bottom: 0;
    left: 15px;
    width: 20px; /* ggf. anpassen */
    height: 20px; /* ggf. anpassen */
    z-index: 0;
}

.zw-testament-blue-bg {
    background-color: #0058A7;
}

.zw-testament-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    gap: 10px;
}

.zw-testament-handwriting-bg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.testament-btn-white {
    letter-spacing: 0;
    color:black;
    background-color: #fff;
}

.testament-btn-white:hover, .testament-btn-white:focus-visible {
    color:black !important;
    background-color: #F5FAFF;
}

.zw-testament-faq-container {
    border: 1px solid #2C2C2C;
    background-color: #fff;
    padding:20px
}

#testamentsteps .card-header {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}

#testamentsteps .number {
    width: 40px;
    flex: 0 0 40px;
}

#testamentsteps h5 {
    margin: 0;
}

@media (min-width: 768px) {
    .zw-testament-content-wrapper {
        height: 230px;
    }

    .zw-testament-handwriting-bg {
        background-image: url("/assets/images/testament/handwriting.svg");
        background-repeat: no-repeat;
        background-position: top right;
        background-size: auto;
    }

    #testamentsteps .card-header {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    #testamentsteps .card-body.padded {
        padding-left: 80px;
    }
}

/* Login */

.juradirekt-login {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.juradirekt-login .login-box {
    max-width: 400px;
    width: 100%;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
}

.juradirekt-login .login-box h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.juradirekt-login .login-box small {
    display: block;
    margin-bottom: 20px;
    color: #888;
}

.juradirekt-login .form-group {
    text-align: left;
}

.juradirekt-login .form-check-label {
    margin-left: 5px;
}

.juradirekt-login .forgot-password {
    float: right;
    font-size: 12px;
    margin-top: 5px;
}

.juradirekt-login .register-link {
    margin-top: 15px;
    font-size: 12px;
}

.juradirekt-login .grey {
    color: #949494;
}

.juradirekt-login .has-error .form-control {
    border-color: #a94442;
    box-shadow: none;
}

.juradirekt-login .help-block {
    color: #a94442;
    font-size: 12px;
    margin-top: 5px;
}

.juradirekt-login .alert-danger {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 4px;
}

.juradirekt-login .sms-code-box {
    max-width: 450px;
    width: 100%;
    padding: 30px;
    border: 1px solid #ddd !important;
    border-radius: 4px;
    background-color: #fff;
    text-align: center;
}

.juradirekt-login .sms-code-box input {
    border: 1px solid #ddd !important;
    border-radius: 4px;
    text-align: center;
}

.juradirekt-login .sms-code-box input:focus {
    border: 1px solid #002D55 !important;
}

/* DNO */

.dno {
    font-size: 18px;
    line-height: 27px;
}

.dno .card {
    background-color: #002D55;
    transition: box-shadow .5s;
    box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.14), 0 2px 9px 0 rgba(62, 57, 107, 0.12);
}

.dno .card:hover, .dno .card:focus-visible {
    background-color: #003366;
    box-shadow: 0 5px 15px 0 rgba(62, 57, 107, 0.2), 0 2px 9px 0 rgba(62, 57, 107, 0.18);
}

.dno .primary-text-color {
    color: white;
}

.dno-header {
    display: flex;
    align-items: start;
    width: 100%;
}

.dno-header i {
    flex-grow: 1;
    text-align: right;
}

.dno.nav-pills hr {
    border-color: #002D55;
}

/* rechtliche Servies */

.right-service-box {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #eee;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #fff;
}
.right-logo-container {
    flex: 0 0 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}
.right-logo-container img {
    width: 100%;
    max-width: 260px;
    height: auto;
}
.right-text-content {
    flex: 1;
    min-width: 250px;
    margin-left:50px;
    display: flex;
    flex-direction: column;
}
.right-highlight {
    font-weight: 600;
}
.right-text-content ul {
    list-style-type: none;
    padding-left: 0;
}
.right-partner-btn {
    background-color: var(--brand-color) !important;
    color: var(--brand-text-color) !important;
    margin-top: 15px;
    min-width: 308px;
    float: right;
    font-size: 18px !important;
    line-height: 27px !important;
    letter-spacing: 0 !important;
    font-weight: 600;
    padding: 0.5rem;
    border: none;
    opacity: 1;
    align-self: self-end;
    margin-top: auto;
}
.right-partner-btn:hover, .right-partner-btn:focus-visible {
    opacity: 0.8;
}
.right-check-lines li {
    display: flex;
    gap: 0.33rem;
    line-height: 27px !important;
    margin-top: .5rem;
}
.right-check-lines li i:first-child {
    color: var(--brand-color);
    margin-top: .33rem;
}
@media (max-width: 992px) {

    .right-service-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .right-logo-container {
        flex: 0 0 auto;
        width: 100%;
        min-height:80px;
        padding-right: 0;
        margin-bottom: 15px;
        justify-content: center;
        aspect-ratio: auto;
    }

    .right-logo-container img {
        max-width: 50%;
    }

    .right-partner-btn {
        float: none;
        display: block;
        width: 100%;
        text-align: center;
    }

    .right-text-content {
        margin-left:0;
    }

}

/* Freigabecenter */

.zw-fmf-head-blue {
    background-color: #0058A7;
    height:40px;
    width:100%;
    color: #fff !important;
    padding:10px;
}

.zw-fmf-head-infobox {
    border: 2px solid #808080;
    padding: 10px;
}

/* */

.zw-fmf-container {
    --zw-fmf-gap: 2rem;
    width: 100%;
    max-width: none;        /* if you had a max-width elsewhere */
    margin: 0;              /* remove any auto-margins */
    /* only vertical padding — no left/right padding */
    padding: var(--zw-fmf-gap) 0;
}

/* the grid itself needs no changes — gap only applies between items */
.zw-fmf-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zw-fmf-gap);
}

/* —— Grid Item / Wrapper —— */
.zw-fmf-item {
    flex: 0 1 calc((100% - 2 * var(--zw-fmf-gap)) / 3);
    background: #fff;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1024px) {
    .zw-fmf-item {
        flex: 0 1 calc((100% - var(--zw-fmf-gap)) / 2);
    }
}

/* 1 per row on small screens below ~600px */
@media (max-width: 767px) {
    .zw-fmf-item {
        flex: 0 1 100%;
    }
}

/* —— Item Headline —— */
.zw-fmf-item-title {
    margin: 0 0 0;
    font-size: 1.2rem;
    color: #005bbb;    /* blue headline */
    line-height: 1.2;
}

/* —— Entries Container —— */
.zw-fmf-entries {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-grow: 1;
}

.zw-fmf-entries > .zw-fmf-entry:first-child {
    margin-top: 0.75rem;
}

/* —— Single Person Entry —— */
.zw-fmf-entry {
    margin-bottom:5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height:60px;

    background-color:#F7F7F7;

    padding: 0.5rem 1rem;

    border-right: 8px solid #005bbb;

    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.zw-fmf-person-info {
    display: flex;
    flex-direction: column;
}

/* —— Person Text —— */
.zw-fmf-name {
    font-weight: 600;
    color: #003366;
}

.zw-fmf-email {
    font-size: 0.85rem;
    color: #555;
}

/* ——  —— */

.fmf {
    font-size:18px;
}

.zw-fmf-person-grid form {
    display: contents;
}

/* now your items truly are direct children */
.zw-fmf-person-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.zw-fmf-foreigner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.zw-fmf-person-grid form > .item {
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 8px #0000000B;
    background-color: #fff;
}

.zw-fmf-person-grid form > .item.full-width {
    grid-column: 1 / -1;
}

.zw-fmf-person-grid form > .item > .head-title {
    color: #2C2C2C;
}

.zw-fmf-person-grid form > .item > .head-image {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.zw-fmf-person-grid form > .item > .head-image img {
    display: block;
}

.zw-fmf-person-grid form > .item > .head-image span {
    text-align: right;
    white-space: normal;
    line-height: 1.4;
}

.zw-fmf-person-grid form > .item > .head-text {
    color: #2C2C2C;
}

.zw-fmf-person-grid form > .item > .buttons {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.zw-fmf-person-grid form > .item > .buttons > button {
    all: unset;
    display: block;
    background-color: #B20000;
    height:37px;
    text-align: center;
    width:50%;
    color:#fff !important;
    cursor: pointer;
}

.zw-fmf-person-grid form > .item > .buttons > button:disabled {
    opacity: 0.6;             /* “greyed-out” look */
    cursor: not-allowed;      /* forbidden cursor */
    background-color: #e0e0e0;
    color: #888;
    border: 1px solid #bbb;
    /* optionally prevent hover/focus effects: */
    pointer-events: none;
}

.zw-fmf-person-grid form > .item > .buttons > .blue {
    background-color:#002D55;
}

.zw-fmf-person-grid form > .item > .buttons > .red {
    background-color:#B20000;
}

.zw-fmf-person-grid form > .item > .buttons > .green {
    background-color:#259008;
}

.zw-fmf-person-grid form > .item > .buttons > .grey {
    background-color:#808080;
}

.zw-fmf-form-group {
    margin: 1em 0;
}

.zw-fmf-form-label {
    display: block;
    margin-bottom: 0.25em;
    font-weight: 600;
    color: #333;
}

.zw-fmf-select-wrapper {
    position: relative;
}

.zw-fmf-form-select {
    width: 100%;
    padding: 0.5em 0 0.5em 0.75em;
    font-size: 0.9rem;
    line-height: 1.2;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    appearance: none;          /* remove native arrow */
    -webkit-appearance: none;  /* for Safari/Chrome */
}

.zw-fmf-form-select:disabled {
    opacity: 0.6;              /* visually “greyed out” */
    cursor: not-allowed;       /* show the forbidden cursor */
    background-color: #f5f5f5; /* lighter background */
    /* any other styling… */
}

.zw-fmf-select-icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 29px;
    height: 29px;
    pointer-events: none;
    color: #666;
}

.zw-fmf-tel-input-container {
    width: 100%;
}

.zw-fmf-person-grid > h2 {
    grid-column: 1 / -1;
}

@media (max-width: 993px) {
    .zw-fmf-person-grid {
        grid-template-columns: 1fr;
    }

    .zw-fmf-select-icon {
        position: absolute;
        right: 0;
        top: 0;
        width: 42px;
        height: 42px;
        pointer-events: none;
        color: #666;
    }
}

.impersonation-wrapper {
    border: 4px solid #2d6cdf;
    border-radius: 8px;
    margin: 1rem;
    overflow: hidden;
    background: #f9fbff;
}

.impersonation-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2d6cdf;
    color: #fff;
    padding: 0.5rem 1rem;
}

.impersonation-banner strong {
    font-weight: 600;
}

.impersonation-content {
    padding: 1rem;
}

.notifications-menu-header {
    display: flex;
    width: 100%;
    padding-right: 1.5rem;
    justify-content: space-between;
    align-items: center;
}

.notifications-menu-infoline {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 1.5rem;
}

.notification-bubble {
    position: absolute;
    top: -1rem;
    right: -0.5rem;
    border-radius: 99999px;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold !important;
}

.notification-tag {
    font-weight: bold !important;
}

.badge-notification {
    background-color: #B20000 !important;
}

.navmaillist a {
    color: #002D55;
}

.navmaillist a:hover div,
.navmaillist a:focus-visible div,
.grey-hover:hover,
.grey-hover:focus-visible {
    background-color: #f5f7fa;
}

.flip-x {
    transform: scaleX(-1);
}

.btn-warning, .btn-warning:focus, .btn-warning:hover, .btn-warning:active,
.btn-danger, .btn-danger:focus, .btn-danger:hover, .btn-danger:active {
    color: #002D55 !important;
}

.rechtliche-familie-card {
    color: #002D55;
}

.rechtliche-familie-card:hover .btn-success,
.rechtliche-familie-card:focus-visible .btn-success {
    background-color: #0058A7 !important;
}

.notfall-points > div {
    width: 100%;
    text-align: center;
    border-radius: 4px;
    background-color: #0058A7;
    color: white;
    font-weight: 600;
    font-size: 24px !important;
    line-height: 30px !important;
    letter-spacing: 0.96px !important;
}

.notfall-points {
    margin-top: 1rem;
}

.notfall-points ul {
    list-style: none;
    padding: 0;
}

.notfall-points ul li {
    display: flex;
    gap: 0.33rem;
    line-height: 27px !important;
    margin-top: .5rem;
}

.notfall-points li i:first-child {
    color: #B20000;
    margin-top: .33rem;
}

.notfall-card .card-body {
    display: flex;
    flex-direction: column;
    color: #002D55;
}

.notfall-card-link {
    margin-top: auto;
    color: #0058A7;
}

.on-off {
    border: 1px solid #002D55;
    border-radius: 4px;
    text-transform: uppercase;
}

#aenderungsantrag a {
    padding-right: 50px;
}

#aenderungsantrag a:after {
    font-family: "feather";
    content: "\e844";
    color: #BDBDBD;
    font-size: 30px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.flat-right {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.flat-left {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}