/* ==============================================
   CSS Custom Properties
   ============================================== */
:root {
    --color-primary: #005f87;
    --color-primary-alt: #005f90;
    --color-bg-light: #f1f1e9;
    --color-text: #000;
    --color-white: #fff;
    --color-overlay: rgba(0, 0, 0, .75);
    --modal-max-width: 700px;
    --transition-overlay: 1s opacity ease-in-out;
}

/* ==============================================
   HTML-Status
   ============================================== */
html.overflow-hidden {
    overflow: hidden;
}

/* ==============================================
   Off-Canvas Overlay
   ============================================== */
.page-off-canvas {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    display: none;
    z-index: 9999;
    opacity: 0;
    transition: var(--transition-overlay);
}

.off-canvas--open .page-off-canvas {
    display: block;
    opacity: 1;
}

/* ==============================================
   Off-Canvas Inhalt
   ============================================== */
.page-off-canvas__content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-bg-light);
    padding: 1rem;
    width: 100vw;
    max-width: 95vw;
    overflow: scroll;
    max-height: 85vh;
    height: 100vh;

    @media (min-width: 768px) {
        max-width: var(--modal-max-width);
    }
}

.page-off-canvas__content-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* ==============================================
   Schließen-Schaltfläche
   ============================================== */
.page-off-canvas__close-modal-button {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    color: var(--color-primary);
    line-height: 1;
}

.close-modal-button__icon,
.close-modal-button__icon > svg {
    height: 26px;
    width: 26px;
}

/* ==============================================
   Filter: Body & Footer
   ============================================== */
.page-off-canvas .filter-body {
    margin-bottom: 1rem;
}

.page-off-canvas .filter-footer .inner-wrapper {
    display: flex;
    justify-content: end;
}

.page-off-canvas .filter-footer button[type="submit"] {
    background: var(--color-primary-alt);
    color: var(--color-white);
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding: 15px 30px;
    font-size: 1rem;
}

.page-off-canvas .filter-footer button[type="submit"]::before {
    content: url(images/icons/filter-anwenden.svg);
    width: 15px;
    height: 15px;
    display: inline-block;
}

/* ==============================================
   Filter: Select-Wrapper & Dropdown
   ============================================== */
.page-off-canvas .filter-select {
    width: 100%;
}

.page-off-canvas .select-wrapper {
    margin-bottom: 1rem;
    position: relative;
}

.page-off-canvas .select-wrapper .filter-control {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    background: var(--color-white);
    height: 60px;
    padding: 0 0 0 1rem;
    color: var(--color-text);
    border: 1px solid var(--color-text);
    border-bottom: 0;
}

.page-off-canvas .select-wrapper .filter-control.collapsed {
    border-bottom: 1px solid var(--color-text);
}

.page-off-canvas .select-wrapper .filter-control::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: url("images/icons/caret-up.svg");
    object-fit: cover;
}

.page-off-canvas .select-wrapper .filter-control.collapsed::after {
    background: url("images/icons/caret-down.svg");
}

.page-off-canvas .select-wrapper .filter-control + .filter-list {
    background: var(--color-white);
    position: absolute;
    top: 100%;
    z-index: 1;
    width: 100%;
    list-style: none;
    border: 1px solid var(--color-text);
    border-top: 0;
}

/* ==============================================
   Filter: Links & Listen
   ============================================== */
.page-off-canvas .select-wrapper a,
.page-off-canvas .filter-list a {
    color: var(--color-text);
}

.page-off-canvas .filter-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-off-canvas .filter-list ul li {
    display: flex;
}

.page-off-canvas .filter-list ul li a {
    padding: 1rem;
    width: 100%;
    text-decoration: none;
}
.page-off-canvas .filter-list ul li a:focus-visible,
.page-off-canvas .filter-list ul li:hover a {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ==============================================
   Filter: Standort-Formular
   ============================================== */
.page-off-canvas .content-inner-branches .filter-form {
    margin-top: 2rem;
}

.page-off-canvas .content-inner-branches .filter-form .inner-wrapper {
    display: flex;
    justify-content: end;
    padding: 1rem 0;
}

.page-off-canvas .content-inner-branches .filter-form button[type="submit"] {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 1rem 1.2rem;
}

/* ==============================================
   Filter: Checkboxen
   ============================================== */
.page-off-canvas .checkbox-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.page-off-canvas .checkbox-wrapper .form-check.form-check-inline {
    width: 100%;
    margin: 0 0 0.5rem 0;
    padding: 0;

    @media (min-width: 768px) {
        width: 50%;
    }
}

.page-off-canvas .custom-control-label {
    width: 100%;
    margin: 0 !important;
    padding-left: 30px;
}

.page-off-canvas .custom-control-label::before,
.page-off-canvas .custom-control-label::after {
    content: none;
}

.page-off-canvas .custom-control-input {
    position: absolute;
    top: 100%;
}

.page-off-canvas .custom-control-input + .custom-control-label::before {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 22px;
    object-fit: cover;
    background: url('images/icons/checkbox-unchecked.svg');
}

.page-off-canvas .custom-control-input:checked + .custom-control-label::before {
    background: url('images/icons/checkbox-checked.svg');
}

/* ==============================================
   Sticky Flyout
   ============================================== */

.button-toggle-flyout {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 10px;
    display: inline-flex;
    border: 1px solid var(--color-white);
    align-items: center;
    gap: 10px;
    width: 100%;
    position: relative;

    @media (min-width: 1440px) {
        flex-direction: column;
        gap: 5px;
        padding: 20px 20px 40px 20px;
        border-top-left-radius: 24px;
        margin-top: -20px;
    }
}

.button-toggle-flyout:last-child {
    @media (min-width: 1440px) {
        padding: 20px;
    }
}

.button-toggle-flyout__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;

    @media (min-width: 576px) {
        width: 24px;
        height: 24px;
    }

    @media (min-width: 1440px) {
        width: 48px;
        height: 48px;
    }
}

.button-toggle-flyout__icon img {
    width: 20px;
    height: 20px;

    @media (min-width: 1440px) {
        width: 48px;
        height: 48px;
    }
}

.button-toggle-flyout__chevron {
    object-fit: contain;
    width: 16px;
    height: 16px;
    display: inline-flex;

    @media (min-width: 576px) {
        display: none;
    }
}

.button-toggle-flyout__label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;

    @media (min-width: 576px) {
        display: none;
    }

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

/* ==============================================
   Bild-Text-Teaser
   ============================================== */
.page-off-canvas .pict-text-teaser {
    margin-top: 20px;

    @media (min-width: 768px) {
        display: flex;
        gap: 20px;
    }
}
.page-off-canvas .pict-text-teaser .left-wrapper,
.page-off-canvas .pict-text-teaser .right-wrapper {
    width: 100%;

    @media (min-width: 768px) {
        width: 50%;
    }
}

.page-off-canvas .pict-text-teaser figure,
.page-off-canvas .pict-text-teaser .img-copy-wrapper,
.page-off-canvas .pict-text-teaser .img-copy-wrapper img {
    width: 100% !important;
    height: auto !important;
}

.page-off-canvas .pict-text-teaser .date-info-bar .telefon,
.page-off-canvas .pict-text-teaser .date-info-bar .fax,
.page-off-canvas .pict-text-teaser .date-info-bar .e-mail {
    display: flex;
    gap: 15px;
}

.page-off-canvas .pict-text-teaser .date-info-bar .telefon::before {
    content: url(images/icons/telefon.svg);
    width: 20px;
}

.page-off-canvas .pict-text-teaser .date-info-bar .fax::before {
    content: url(images/icons/fax.svg);
    width: 20px;
}

.page-off-canvas .pict-text-teaser .date-info-bar .e-mail::before {
    content: url(images/icons/mail.svg);
    width: 20px;
}

/* ==============================================
   Teaser-Box: Kontakt
   ============================================== */
.page-off-canvas .teaser-box.contact {
    margin-top: 30px;
}

.page-off-canvas .teaser-box.contact .header-wrapper {
    width: 100%;
    border-bottom: 1px solid #222;
    display: flex;
}

.page-off-canvas .teaser-box.contact .header-wrapper h3 {
    font-size: 1.25rem;
    display: block;
}

.page-off-canvas .teaser-box .box-inner-width-sm {
    width: 100%;

}