/*!
* Master Css für Alpedia
* Verwendung überall, außer im Checkout
* Modifiziert und Gekürtzt für die Übergangsphase zu Alpdia
*/

/* open-sans-300 - latin */
@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src:
        url("/themes/alpedia/fonts/open-sans-v35-latin-300.woff2") format("woff2"),
        url("/themes/alpedia/fonts/open-sans-v35-latin-300.ttf") format("truetype");
}
/* open-sans-300italic - latin */
@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300;
    src:
        url("/themes/alpedia/fonts/open-sans-v35-latin-300italic.woff2") format("woff2"),
        url("/themes/alpedia/fonts/open-sans-v35-latin-300italic.ttf") format("truetype");
}
/* open-sans-regular - latin */
@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src:
        url("/themes/alpedia/fonts/open-sans-v35-latin-regular.woff2") format("woff2"),
        url("/themes/alpedia/fonts/open-sans-v35-latin-regular.ttf") format("truetype");
}
/* open-sans-italic - latin */
@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 400;
    src:
        url("/themes/alpedia/fonts/open-sans-v35-latin-italic.woff2") format("woff2"),
        url("/themes/alpedia/fonts/open-sans-v35-latin-italic.ttf") format("truetype");
}
/* open-sans-500 - latin */
@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 500;
    src:
        url("/themes/alpedia/fonts/open-sans-v35-latin-500.woff2") format("woff2"),
        url("/themes/alpedia/fonts/open-sans-v35-latin-500.ttf") format("truetype");
}
/* open-sans-500italic - latin */
@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 500;
    src:
        url("/themes/alpedia/fonts/open-sans-v35-latin-500italic.woff2") format("woff2"),
        url("/themes/alpedia/fonts/open-sans-v35-latin-500italic.ttf") format("truetype");
}
/* open-sans-600 - latin */
@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src:
        url("/themes/alpedia/fonts/open-sans-v35-latin-600.woff2") format("woff2"),
        url("/themes/alpedia/fonts/open-sans-v35-latin-600.ttf") format("truetype");
}
/* open-sans-600italic - latin */
@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 600;
    src:
        url("/themes/alpedia/fonts/open-sans-v35-latin-600italic.woff2") format("woff2"),
        url("/themes/alpedia/fonts/open-sans-v35-latin-600italic.ttf") format("truetype");
}
/* open-sans-700 - latin */
@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src:
        url("/themes/alpedia/fonts/open-sans-v35-latin-700.woff2") format("woff2"),
        url("/themes/alpedia/fonts/open-sans-v35-latin-700.ttf") format("truetype");
}
/* open-sans-700italic - latin */
@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 700;
    src:
        url("/themes/alpedia/fonts/open-sans-v35-latin-700italic.woff2") format("woff2"),
        url("/themes/alpedia/fonts/open-sans-v35-latin-700italic.ttf") format("truetype");
}
/* open-sans-800 - latin */
@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 800;
    src:
        url("/themes/alpedia/fonts/open-sans-v35-latin-800.woff2") format("woff2"),
        url("/themes/alpedia/fonts/open-sans-v35-latin-800.ttf") format("truetype");
}
/* open-sans-800italic - latin */
@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 800;
    src:
        url("/themes/alpedia/fonts/open-sans-v35-latin-800italic.woff2") format("woff2"),
        url("/themes/alpedia/fonts/open-sans-v35-latin-800italic.ttf") format("truetype");
}

@font-face {
    font-family: "Arsilon Regular";
    src: url("/themes/alpedia/fonts/arsilon.otf");
}

:root {
    /* Farben */

    --color-gold: rgb(255, 200, 72);
    --color-white: rgb(255, 255, 255);
    --color-light-grey: rgb(240, 240, 240);
    --color-light-light-grey: rgb(245, 245, 245);
    --color-grey: rgb(143, 143, 143);
    --color-dark-dark-blue: rgb(11, 21, 34);
    --color-dark-blue: rgb(20, 38, 63);
    --color-light-blue: rgb(0, 51, 88);
    --color-old-light-blue: rgb(117, 160, 202);
    --color-cyan: rgb(0, 159, 227);
    --color-green: rgb(60, 205, 117);
    --color-light-green: rgb(236, 255, 231);
    --color-dark-green: rgb(0, 130, 49);
    --color-red: rgb(218 0 21);
    --color-bbt: #12539d;
}

/* * {
    font-family: "Open Sans", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    color: var(--color-dark-blue);
} */

/* Scrollbar */

/* ::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent; 
}

::-webkit-scrollbar-thumb {
    background: var(--color-light-grey); 
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-grey); 
} */

/* CONTENT Allgemein */

.font-family--arsilon {
    font-family: "Arsilon Regular";
}

/* .bi {
    line-height: 1;
} */

.bi--circle {
    text-align: center;
    border-radius: 50%;
    width: 1.8em;
    height: 1.8em;
}

.bi--circle::before {
    font-size: 0.9em;
    line-height: 1.8em;
    vertical-align: -0.325em;
}

/* a {
    color: inherit;
}

a:hover {
    color: inherit;
} */

hr {
    color: var(--color-grey);
}

/* .wrapper {
    position: relative;
    width: 100%;
    background-color: var(--color-light-grey);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.normalContent {
    width: 100%;
    padding: 0 1.5rem;
    transition: width, padding 0.3s ease;
}

@media (min-width: 576px) {
    .normalContent {
        width: 100%;
        padding: 0 3rem;
    }
}

@media (min-width: 768px) {
    .normalContent {
        width: 80%;
        max-width: 100rem;
        padding: 0;
    }
}

.fullwidthContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fullwidthContent > .row {
    width: 80%;
    max-width: 100rem;
} */

.bg-color--gold {
    background-color: var(--color-gold) !important;
}

.bg-color--white {
    background-color: var(--color-white) !important;
}

.bg-color--grey {
    background-color: var(--color-grey) !important;
}

.bg-color--light-grey {
    background-color: var(--color-light-grey) !important;
}

.bg-color--cyan {
    background-color: var(--color-cyan) !important;
}

.bg-color--light-blue {
    background-color: var(--color-light-blue) !important;
}

.bg-color--dark-blue {
    background-color: var(--color-dark-blue) !important;
}

.bg-color--dark-dark-blue {
    background-color: var(--color-dark-dark-blue) !important;
}

.bg-color--red {
    background-color: var(--color-red) !important;
}

.bg-color--green {
    background-color: var(--color-green) !important;
}

.bg-color--light-green {
    background-color: var(--color-light-green) !important;
}

.bg-color--dark-green {
    background-color: var(--color-dark-green) !important;
}

.bg-color--bbt {
    background-color: var(--color-bbt) !important;
}

.color--gold {
    color: var(--color-gold) !important;
}

.color--white {
    color: var(--color-white) !important;
}

.color--light-grey {
    color: var(--color-light-grey) !important;
}

.color--grey {
    color: var(--color-grey) !important;
}

.color--dark-dark-blue {
    color: var(--color-dark-dark-blue) !important;
}

.color--dark-blue {
    color: var(--color-dark-blue) !important;
}

.color--light-blue {
    color: var(--color-light-blue) !important;
}

.color--old-light-blue {
    color: var(--color-old-light-blue) !important;
}

.color--cyan {
    color: var(--color-cyan) !important;
}

.color--green {
    color: var(--color-green) !important;
}

.color--light-green {
    color: var(--color-light-green) !important;
}

.color--dark-green {
    color: var(--color-dark-green) !important;
}

.color--bbt {
    color: var(--color-bbt) !important;
}

.color--black {
    color: #000 !important;
}

.border-color--gold {
    border: solid 1px var(--color-gold) !important;
}

.border-color--white {
    border: solid 1px var(--color-white) !important;
}

.border-color--grey {
    border: solid 1px var(--color-grey) !important;
}

.border-color--light-grey {
    border: solid 1px var(--color-light-grey) !important;
}

.border-color--cyan {
    border: solid 1px var(--color-cyan) !important;
}

.border-color--light-blue {
    border: solid 1px var(--color-light-blue) !important;
}

.border-color--dark-blue {
    border: solid 1px var(--color-dark-blue) !important;
}

.border-color--dark-dark-blue {
    border: solid 1px var(--color-dark-dark-blue) !important;
}

.border-color--red {
    border: solid 1px var(--color-red) !important;
}

.border-color--bbt {
    border: solid 1px var(--color-bbt) !important;
}

/* BOOTSTRAP Erweiterung */

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-max-content {
    width: max-content;
}

.h-max-content {
    height: max-content;
}

.h-unset {
    height: unset !important;
}

.h-fit {
    height: fit-content;
}

@media (min-width: 768px) {
    .w-md-10 {
        width: 10% !important;
    }

    .w-md-15 {
        width: 15% !important;
    }

    .w-md-20 {
        width: 20% !important;
    }

    .w-md-30 {
        width: 30% !important;
    }

    .w-md-40 {
        width: 40% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-60 {
        width: 60% !important;
    }

    .w-md-70 {
        width: 70% !important;
    }

    .w-md-80 {
        width: 80% !important;
    }

    .w-md-85 {
        width: 85% !important;
    }

    .w-md-90 {
        width: 90% !important;
    }

    .w-md-max-content {
        width: max-content !important;
    }

    .w-md-unset {
        width: unset !important;
    }
}

.shadow-lg-soft {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08) !important;
}

.border-dashed {
    --bs-border-style: dashed;
}

.flex-0 {
    flex: 0;
}

.flex-1 {
    flex: 1;
}

.hover-pointer:hover {
    cursor: pointer;
}

.hover-default:hover {
    cursor: default;
}

.hover-option {
    transition: background-color 0.1s ease;
}

.hover-option:hover {
    background-color: var(--color-light-grey);
}

.text-nowrap-hidden {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-floating--ap > label {
    font-weight: 700;
    transition: all 0.2s ease;
}

.form-floating--ap > .form-control,
.form-select {
    color: var(--color-dark-blue);
    background-color: var(--color-light-grey);
    border: none;
    border-radius: 0;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

.form-floating--ap > .form-control:focus,
.form-select:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
}

.form-control:focus + label {
    font-weight: normal;
}

.form-select:focus + label {
    font-weight: normal;
}

.form-select--trans {
    background-color: var(--color-white);
    border-bottom: solid 1px var(--color-dark-blue);
}

.form-select--trans:focus {
    border-bottom: solid 1px var(--color-dark-blue);
}

.form-check--alp {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.form-check-input--alp {
    width: 2.5em !important;
    height: 1.2em !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.form-check-input--alp:focus {
    border-color: var(--color-light-blue) !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23003358'/%3e%3c/svg%3e") !important;
}

.form-check-input--alp:checked {
    background-color: var(--color-light-blue) !important;
    border-color: var(--color-light-blue) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-check-label--alp {
    display: unset;
    max-width: unset;
    margin-bottom: unset;
    font-weight: unset;
}

.form-switch--reverse {
    flex-direction: row-reverse;
    padding-left: 0;
    padding-right: 2.5em;
}

.rounded-4-5 {
    border-radius: calc(var(--bs-border-radius-xl) * 1.5) !important;
}

.p-4-5 {
    padding: 2rem !important;
}

.py-2-5 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.hover-text-decoration-none:hover {
    text-decoration: none !important;
}

.text-nobreak {
    white-space: nowrap;
}

.text-break {
    white-space: wrap !important;
}

/* Form validation light, aus Bootstrap adaptiert */

form.validated input:invalid {
    border: solid 1px var(--color-red) !important;
}

form.validated input[type="checkbox"]:invalid::before {
    border: solid 1px var(--color-red) !important;
}

form.validated input[type="checkbox"]:invalid + label {
    color: var(--color-red) !important;
}

form.validated input[type="radio"]:invalid::before {
    border: solid 1px var(--color-red) !important;
}

form.validated input[type="radio"]:invalid + label {
    color: var(--color-red) !important;
}

.ol--cyan {
    margin-bottom: 0;
    counter-reset: item;
    list-style-type: none;
    padding-left: 1.5rem;
}

.ol--cyan li {
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.ol--cyan li:last-of-type {
    margin-bottom: 0;
}

.ol--cyan li::before {
    content: counter(item);
    counter-increment: item;
    position: absolute;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    left: -1.3rem;
    top: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--color-cyan);
    border-radius: 50%;
    z-index: -1;
}

/* Default Alert & Modifikationen */

.alert-alp {
    position: relative;
    padding: 1rem 1rem 1rem 3.2rem;
    background-color: var(--color-light-grey);
}

.alert-alp::before {
    content: "\F430";
    font-family: "bootstrap-icons";
    font-size: 1.2rem;
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.alert-alp--error {
    background-color: var(--color-red);
    color: var(--color-white);
}

.alert-alp--error::before {
    content: "\F332";
}

.alert-alp--warn {
    background-color: var(--color-gold);
}

.alert-alp--warn::before {
    content: "\F332";
}

.alert-alp--warn-trans {
    padding-left: 2.2rem;
    background-color: transparent;
}

.alert-alp--warn-trans::before {
    content: "\F332";
    color: var(--color-gold);
    left: 0;
}

.alert-alp--note-trans {
    padding-left: 2.2rem;
    background-color: transparent;
}

.alert-alp--note-trans::before {
    content: "\F332";
    color: var(--color-cyan);
    left: 0;
}

.alert-alp--fulls {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.alert-alp--fulls::after {
    content: "";
    position: fixed;
    top: -50vh;
    right: -50vw;
    bottom: -50vh;
    left: -50vw;
    z-index: -1;
}

/* accordion override */

.accordion-button-alp {
    color: black;
    font-size: 1.5rem;
    padding-inline: 0;
}

.accordion-button-alp:not(.collapsed) {
    color: inherit;
    background-color: white;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button-alp:focus {
    box-shadow: none;
}

.accordion-button::after {
    margin-left: 1rem;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath stroke='black' stroke-width='1.25' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1.5rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath stroke='black' stroke-width='1.25' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

.accordion-body-alp {
    padding: 0;
}

/* CONTENT Komponenten */

.btn-alp {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    padding: 1.3rem 2.5rem;
    border: none;
    background-color: var(--color-light-grey);
    font-weight: 700;
    letter-spacing: 0.02rem;
    white-space: nowrap;
    transition: all 0.3s ease;
    text-decoration: none !important;
    border-radius: 0;
}

.btn-alp:hover {
    filter: brightness(95%);
    -webkit-filter: brightness(95%);
}

.btn-alp:focus {
    outline: 0;
    box-shadow: none;
}

.btn-alp:disabled {
    background-color: var(--color-grey);
}

.btn-alp--slider {
    color: var(--color-dark-blue);
    background-color: var(--color-gold);
}

.btn-alp--gold {
    color: var(--color-white);
    background-color: var(--color-gold);
}

.btn-alp--gold-liefer {
    color: var(--color-dark-blue);
    background-color: var(--color-gold);
}

.btn-alp--dark-blue {
    color: var(--color-white);
    background-color: var(--color-dark-blue);
}

.btn-alp--cyan {
    color: var(--color-white);
    background-color: var(--color-cyan);
    text-transform: uppercase;
}

.btn-alp--cyan:disabled {
    background-color: var(--color-grey);
}

.btn-alp--light-grey {
    color: var(--color-dark-blue);
    background-color: var(--color-light-grey);
}

.btn-alp--grey {
    color: var(--color-white);
    background-color: var(--color-grey);
}

.btn-alp--light-white {
    color: var(--color-dark-blue);
    background-color: var(--color-white);
    border: solid 1px var(--color-light-grey);
}

.btn-alp--dark-white {
    color: var(--color-dark-blue);
    background-color: var(--color-white);
    border: solid 1px var(--color-dark-blue);
}

.btn-alp--trans-absolute {
    color: inherit;
    background-color: transparent;
    padding: 0;
}

.btn-alp--trans-absolute:hover {
    color: inherit;
    background-color: transparent;
    filter: none;
    -webkit-filter: none;
}

.btn-alp--tertiary {
    background-color: transparent;
}

.btn-alp--bi {
    font-family: "bootstrap-icons";
}

.btn-alp--arrow-left {
    position: relative;
}

.btn-alp--arrow-left::after {
    display: inline-block;
    font-family: "bootstrap-icons" !important;
    -webkit-font-smoothing: antialiased;
    content: "\F284";
    font-size: 2rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
}

.btn-alp--arrow-right {
    position: relative;
}

.btn-alp--arrow-right::after {
    display: inline-block;
    font-family: "bootstrap-icons" !important;
    -webkit-font-smoothing: antialiased;
    content: "\F285";
    font-size: 2rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
}

.cyan-link {
    text-decoration: none;
    color: var(--color-cyan);
}

.cyan-link:hover {
    color: var(--color-cyan);
}

.inherit-link {
    color: inherit;
}

label.required::before {
    content: "*";
    color: var(--color-red);
    font-size: 0.8rem;
    float: inline-start;
}

input:focus-visible,
select:focus-visible {
    outline: none;
}

input::placeholder {
    color: var(--color-grey);
    font-size: 0.9rem;
}

.selectOption {
    padding: 0.7rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-grey);
}

.inputNumber {
    position: relative;
}

.inputNumber input {
    padding: 0.7rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-grey);
    text-align: center;
    width: 9rem;
}

.inputNumber .add {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    font-size: 1.2em;
}

.inputNumber .substract {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    font-size: 1.2em;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    -webkit-appearance: none;
}

input[type="text"] {
    padding: 0.7rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-grey);
}

textarea {
    padding: 0.7rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-grey);
    resize: none;
}

.ul--cyanUsp {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ul--cyanUsp li::before {
    display: inline-block;
    font-family: "bootstrap-icons";
    content: "\F633";
    color: var(--color-cyan);
    vertical-align: -0.125em;
    padding-right: 0.5rem;
    font-size: 1rem;
}

.ul--cyanUsp li {
    display: flex;
}

/* Dialog */

dialog {
    padding: 1.5rem;
    z-index: 1;
    border: none;
}

dialog:not([open]) {
    display: none;
}

dialog[open] {
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    padding: 0 1.5rem;
    border: 0;
    background: var(--color-white);
    z-index: 10;
}

.dialog__header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: var(--color-white);
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.dialog__header span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialog__header svg {
    width: 2rem;
    height: auto;
    flex-shrink: 0;
}

.dialog__header > svg:hover {
    cursor: pointer;
}

dialog input[type="search"] {
    position: relative;
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    margin-bottom: 1rem;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%2716%27%20fill%3D%27currentColor%27%20class%3D%27bi%20bi-search%27%20viewBox%3D%270%200%2016%2016%27%3E%0A%20%20%3Cpath%20d%3D%27M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001c.03.04.062.078.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1.007%201.007%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200z%27%2F%3E%0A%3C%2Fsvg%3E")
        no-repeat 1rem center;
}

dialog > input[type="search"] {
    margin-bottom: 3rem;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 576px) {
    dialog[open] {
        width: 100%;
    }
}

.dialog-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    padding: 1rem;
    --dialog-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background: transparent var(--dialog-close-bg) center/1rem auto no-repeat;
    border: 0;
    cursor: pointer;
}

/* Dialog: Energieeffizienzklasse */

.eec-dialog__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    padding-right: 3.5rem;
}

.eec-dialog__header > * {
    text-align: left;
}

.eec-dialog__header > span {
    font-size: 1.5rem;
    font-weight: bold;
}

.eec-dialog__header > a .fa {
    color: #55cd73;
}

.eec-dialog__content {
    display: flex;
    justify-content: center;
}

.eec-dialog__content img {
    width: 36rem;
    max-width: 100% !important;
}
.manufacturer-dialog__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    padding-right: 3.5rem;
}

.manufacturer-dialog__header > * {
    text-align: left;
}

.manufacturer-dialog__header > span {
    font-size: 1.5rem;
    font-weight: bold;
}

.manufacturer-dialog__header > a .fa {
    color: #55cd73;
}

.manufacturer-dialog__content {
    padding: 10px;
    margin: 10px;
    width: 100%;
}
/* Anpassung Progressbar aus Bootstrap */

.progress {
    box-shadow: none;
    -webkit-box-shadow: none;
}

.progress-bar {
    box-shadow: none;
    -webkit-box-shadow: none;
}

/* Anpassung Modal aus Bootstrap  */

/* .modal-backdrop {
    background-color: #15273E;
    opacity: 0.6;
} */

/* Utility Placeholder  */

.placeholder\:text-14px::placeholder {
    font-size: 14px;
}

/* dropdown.js  */

.megamenu-trigger-icon-open {
    display: none;
}

.megamenu-open > .megamenu-trigger-icon-open {
    display: block;
}

.megamenu-open > .megamenu-trigger-icon-closed {
    display: none !important;
}

/* header */

header .header-flex-not-important {
    display: flex;
}

header button,
header input,
header select,
header optgroup,
header textarea,
header ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
}

header *,
header ::after,
header ::before,
header ::backdrop,
header ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
}