/* ############################################# */
/* ############# WOHNUNGSFINDER ################ */
/* ############################################# */

/* ############# Bootstrap Container definieren ################### */

.container {
    width: 100%;
    padding-right: var(--bs-gutter-x, 1.5rem);
    padding-left: var(--bs-gutter-x, 1.5rem);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 1200px !important;
        /*960px;*/
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1640px !important;
        /*1140px;*/
    }
}

.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    width: 100%;
    padding-right: var(--bs-gutter-x, 1.5rem);
    padding-left: var(--bs-gutter-x, 1.5rem);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {

    .container,
    .container-sm {
        max-width: 540px;
    }
}

@media (min-width: 768px) {

    .container,
    .container-sm,
    .container-md {
        max-width: 720px;
    }
}

@media (min-width: 992px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1140px;
    }
}

/* ############# Plugin Container definieren ################### */

section.wohnungsfinder .tx-container {
    width: 100%;
    max-width: 100% !important;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}

/* ############# Plugin Section ################### */

section.wohnungsfinder {
    padding-top: 0;
    padding-bottom: 0;
    background-color: rgba(200, 177, 0, 0.70);
    border-bottom: 15px solid rgb(200, 177, 0);
}

/* .tx-wohnungsfinder.bg-color {
    background-color: rgba(200,177,0,0.70);
} */

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.tx-wohnungsfinder {
    /* height: 100vh !important; */
    color: #353535;
}

@media (min-width: 768px) {
    .tx-wohnungsfinder {
        height: 100vh;
    }
}

.tx-wohnungsfinder .text {
    /* height: 100vh !important; */
    background-color: #FFF;
    padding-right: 0px;
    padding-left: 0px;
}

.tx-wohnungsfinder .text .filter-container {
    width: 100%;
    background-color: rgba(200, 177, 0, 0.70);
}

.tx-wohnungsfinder .text details {
    width: 100%;
}

@media (min-width: 992px) {
    .tx-wohnungsfinder .text details {
        width: 90%;
        margin-right: 0;
        margin-left: auto;
    }
}

.tx-wohnungsfinder .text .filter-results {
    background-color: #eee7b2;
    border-top: 1px solid rgb(200, 177, 0);
    height: 40px;
    padding-top: 0.5em;
    padding-bottom: unset;
    padding-right: var(--bs-gutter-x, 1.5rem);
    padding-left: var(--bs-gutter-x, 1.5rem);
    font-family: var(--bs-font-sans-serif);
    font-size: 16px;
    font-weight: bold;
    text-align: end;
    color: #C8B100;
}

@media (min-width: 768px) {

    .tx-wohnungsfinder .text,
    .tx-wohnungsfinder .image {
        padding-right: 0;
        padding-left: 0;
        height: 100vh;
        overflow: hidden;
    }
}

/* Grauer Header für die Filter-Gruppen (wie im Bild) */
.filter-header-gray {
    background-color: #b0b0b0;
    /* Ein mittleres Grau, passend zum Bild */
    color: #353535;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 16px;
    width: 100%;
    margin-bottom: 10px;
}

.tx-wohnungsfinder .image {
    background-color: rgba(200, 177, 0, 1);
}

.tx-wohnungsfinder .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
}

.tx-wohnungsfinder .text .filter {
    /* height: 20vh !important; */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 15px;
    padding-bottom: 15px;
}

@media (min-width: 768px) {
    .tx-wohnungsfinder .text .filter {
        height: 200px !important;
        padding-top: unset;
        padding-bottom: unset;
    }
}

.tx-wohnungsfinder .text .list {
    /*  height: 60vh !important; */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .tx-wohnungsfinder text .list {
        height: 80vh !important;
    }
}

.tx-wohnungsfinder .scroll-container {
    background-color: #FFF;
    height: 100vh;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    text-align: right;
    padding-right: 15px;
    padding-left: 15px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

@media (min-width: 768px) {
    .tx-wohnungsfinder .scroll-container {
        height: 74vh;
        padding-right: 15px;
        padding-left: 0px;
        margin-right: 15px;
    }
}

.tx-wohnungsfinder .download-plan {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='download' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23c8b100;%7D .st1%7Bfill:none;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M11.3,15.3C11.3,15.3,11.3,15.3,11.3,15.3c0.1,0.1,0.2,0.2,0.3,0.2c0,0,0,0,0,0c0.1,0,0.3,0.1,0.4,0.1 s0.3,0,0.4-0.1c0,0,0,0,0,0c0.1,0,0.2-0.1,0.3-0.2c0,0,0,0,0,0l3.4-3.3c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L13,12.2v-7 c0-0.6-0.4-1-1-1s-1,0.4-1,1v7l-1.7-1.6c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L11.3,15.3z'/%3E%3Cpath class='st0' d='M18.7,17.8H5.3c-0.6,0-1,0.4-1,1s0.4,1,1,1h13.3c0.6,0,1-0.4,1-1S19.2,17.8,18.7,17.8z'/%3E%3C/g%3E%3Cg id='Rechteck_68'%3E%3Cpath class='st1' d='M1,0h22c0.6,0,1,0.4,1,1v22c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V1C0,0.4,0.4,0,1,0z'/%3E%3Cpath class='st0' d='M24,24H0V0h24V24z M2,22h20V2H2V22z'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
.tx-wohnungsfinder .scroll-container {
    scrollbar-width: auto;
    scrollbar-color: rgba(200, 177, 0, .40) #c8b100;
}

/* Chrome, Edge, and Safari */
.tx-wohnungsfinder .scroll-container::-webkit-scrollbar {
    width: 15px;
    /* height: 60px; */
}

.tx-wohnungsfinder .scroll-container::-webkit-scrollbar-track {
    background: rgba(200, 177, 0, .40);
    width: 15px;
    border-radius: 7.5px;
    border: 1px none #ffffff;
    margin-top: 50px;
    margin-right: 10px;
    margin-bottom: 4vh;
}

.tx-wohnungsfinder .scroll-container::-webkit-scrollbar-thumb {
    background-color: #c8b100;
    width: 10px;
    border-radius: 7.5px;
    border: 0px none #ffffff;
}

.tx-wohnungsfinder table {
    background-color: #FFF;
    position: relative;
    border-collapse: collapse;
    width: 95%;
}

@media (min-width: 992px) {
    .tx-wohnungsfinder table {
        width: 90%;
        float: right;
    }
}

.tx-wohnungsfinder table,
.tx-wohnungsfinder th,
.tx-wohnungsfinder td {
    /* border: 1px solid #C8B100; */
}

.tx-wohnungsfinder #myFilter thead th {
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    /* make the table heads sticky */
    inset-block-start: 0;
    /* "top" *
    top: 0px; /* table head will be placed from the top of the table and sticks to it */
    height: auto;
    cursor: pointer;
}

.tx-wohnungsfinder #myFilter thead tr {
    border-bottom: 1px solid rgba(200, 177, 0, .70);
}

.tx-wohnungsfinder .fltrow td {
    /* background-color: #C8B100;
	border-bottom: 1px solid #C8B100 !important;
    border-top: 1px solid #C8B100;
    border-left: 1px solid #C8B100;
    border-right: 1px solid #C8B100; */
    padding: 0.2em;
}

.tx-wohnungsfinder table.TF th,
.tx-wohnungsfinder table#myFilter th {
    /* height: 35px; */
    font-family: var(--bs-font-sans-serif);
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin: 0;
    background-color: #FFF;
    border: 0;
    border-bottom: 1px solid rgba(200, 177, 0, .70);
    padding: 1em 1em;
    color: #353535;
}

.tx-wohnungsfinder table.TF th:last-child {
    border-right: 0px solid #FFF;
}

.tx-wohnungsfinder table.TF th:last-child img.sort-arrow {
    display: none !important;
}

.tx-wohnungsfinder .table-hover tbody tr:hover {
    color: #353535;
    background-color: #eee7b2;
    cursor: pointer;
}

.tx-wohnungsfinder table.TF td {
    font-family: var(--bs-font-sans-serif);
    font-size: 1rem;
    font-weight: normal;
    text-align: center;
    margin: 0;
    padding: 1em 0em;
    border-bottom: 2px solid #707070;
    text-overflow: ellipsis;
}

/* Neu: Alle Spalten zentrieren außer die letzte */
/* .tx-wohnungsfinder table#myFilter td:not(:last-child) { */
.tx-wohnungsfinder table#myFilter td {
    text-align: center;
}

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.hstack {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
}

.vstack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch;
}

.ps-70 {
    padding-left: 0px;
}

@media (min-width: 576px) {
    .hstack {
        display: block;
    }
}

@media (min-width: 768px) {
    .ps-70 {
        padding-left: 35px;
    }

}

@media (min-width: 992px) {}

@media (min-width: 1200px) {
    .ps-70 {
        padding-left: 70px;
    }

}

/* ############# SLIDER ################### */

.sliders,
.checkboxes,
input {
    font-family: var(--bs-font-sans-serif);
    font-size: 16px;
    font-weight: bold;
    display: flow-root;
}

#rooms-range {
    width: 95%;
    /*400px;*/
    margin: 0 auto;
    /* color: #CCCCCC; */
    /* font-weight: 300; */
}

#qm-range {
    width: 95%;
    /*400px;*/
    margin: 0 auto;
    /* color: #CCCCCC; */
    /* font-weight: 300; */
}

#price-range {
    width: 95%;
    /*400px;*/
    margin: 0 auto;
    /* color: #CCCCCC; */
    /* font-weight: 300; */
}

/* .slider-time,
.slider-time2 {
    font-weight: 400;
} */
/* .slider-price,
.slider-price2 {
    width: 100%;
    margin: 0 auto;
} */

.flat-slider.ui-corner-all,
.flat-slider .ui-corner-all {
    border-radius: 0;
}

.flat-slider.ui-slider {
    margin: 0.5em 0 0.5em 0;
    border: 0;
    background: #FFF;
    border-radius: 10px;
}

.flat-slider:before {
    content: "";
    margin-left: -12px;
    width: 30px;
    height: 20px;
    border: 0;
    background: #FFF;
    border-radius: 10px;
    display: block;
    float: left;
}

.flat-slider:after {
    content: "";
    margin-right: -9px;
    width: 30px;
    height: 20px;
    border: 0;
    background: #FFF;
    border-radius: 10px;
    display: block;
    float: right;
}

.flat-slider.ui-slider-horizontal {
    height: 20px;
}

.flat-slider .ui-slider-handle {
    width: 16px;
    height: 16px;
    background: rgba(200, 177, 0, 1);
    border-radius: 50%;
    border: none;
    cursor: grab !important;
    /* box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); */
}

.flat-slider.ui-slider-horizontal .ui-slider-handle {
    top: 50%;
    margin-top: -8px;
}

.flat-slider.ui-slider-horizontal span.ui-slider-handle {
    /*  margin-left: 3px; */
}

.flat-slider.ui-slider-horizontal span.ui-slider-handle:last-child {
    /* margin-left: -16px; */
}

.flat-slider .ui-slider-handle:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
}

.flat-slider .ui-slider-handle:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

.flat-slider .ui-slider-range {
    /* border: 0; */
    border-radius: 0px;
    background: rgba(200, 177, 0, 0.40);
    border: 0px solid #FFF;
}

.flat-slider.ui-slider-horizontal .ui-slider-range {
    top: 2px;
    height: calc(100% - 4px);
}

.checkboxes .cbFloorFlt {
    width: 20px;
    height: 20px;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #ffffff;
    margin: 0.5em 0 0.5em 0;
}

.tx-wohnungsfinder label {
    display: inline-block;
    margin-bottom: 0rem;
    margin-right: 0.25rem;
}

.tx-wohnungsfinder input,
.tx-wohnungsfinder input[type="number"] {
    appearance: none;
    height: 24px;
    background: #FFF;
    border-radius: 0px;
    border: none;
    padding: 0 0em;
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tx-wohnungsfinder input:focus-visible,
.tx-wohnungsfinder input[type="number"]:focus-visible {
    border: 1px solid #FFF;
    outline: none;
}

.tx-wohnungsfinder input[type="number"].slider-rooms,
.tx-wohnungsfinder input[type="number"].slider-rooms2 {
    background: transparent;
}

.tx-wohnungsfinder input[type="number"].slider-rooms {
    text-align: left;
}

.tx-wohnungsfinder input[type="number"].slider-rooms2 {
    text-align: right;
}

.tx-wohnungsfinder input[type="number"].slider-qm,
.tx-wohnungsfinder input[type="number"].slider-qm2,
.tx-wohnungsfinder input[type="number"].slider-price,
.tx-wohnungsfinder input[type="number"].slider-price2 {
    text-align: center;
}

.tx-wohnungsfinder input.slider-qm,
.tx-wohnungsfinder input.slider-qm2,
.tx-wohnungsfinder input.slider-price,
.tx-wohnungsfinder input.slider-price2 {
    text-align: center;
}

.tx-wohnungsfinder input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #FFF;
    border-radius: 0px;
}

.tx-wohnungsfinder input[type=checkbox]:checked {
    background: #FFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.08' height='11.393' viewBox='0 0 16.08 11.393'%3E%3Cpath id='Pfad_716' data-name='Pfad 716' d='M3,9.571l5.857,4.414L16.271,5' transform='translate(-1.6 -3.592)' fill='none' stroke='%23c8b100' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    /* background-size: cover; */
}

/* AB HIER NICHT MEHR ÄNDERN */

.ui-slider {
    position: relative;
    text-align: left;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

/* For IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
    filter: inherit;
}

.ui-slider-horizontal {
    height: .8em;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em;
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em;
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
    bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
    top: 0;
}

/* ############# FILTER ################### */


.tx-wohnungsfinder .filter {
    /* background-color: rgba(200,177,0,0.70); */
}

.tx-wohnungsfinder details[open] ~ #filter-results {
    display: none;
}

.tx-wohnungsfinder summary {
    background-color: #eee7b2;
    border-bottom: 1px solid rgb(200, 177, 0);
    display: list-item;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='23' viewBox='0 0 22 23'%3E%3Cg id='Filter' transform='translate(1)'%3E%3Cg id='Filter-2' data-name='Filter'%3E%3Cline id='Linie_53' data-name='Linie 53' x2='20' transform='translate(0 3.5)' fill='none' stroke='%23c8b100' stroke-linecap='round' stroke-width='2'/%3E%3Cline id='Linie_54' data-name='Linie 54' x2='20' transform='translate(0 11.669)' fill='none' stroke='%23c8b100' stroke-linecap='round' stroke-width='2'/%3E%3Cline id='Linie_55' data-name='Linie 55' x2='20' transform='translate(0 19.75)' fill='none' stroke='%23c8b100' stroke-linecap='round' stroke-width='2'/%3E%3Cg id='Ellipse_19' data-name='Ellipse 19' transform='translate(2.5)' fill='%23fff' stroke='%23c8b100' stroke-width='2'%3E%3Ccircle cx='3.5' cy='3.5' r='3.5' stroke='none'/%3E%3Ccircle cx='3.5' cy='3.5' r='2.5' fill='none'/%3E%3C/g%3E%3Cg id='Ellipse_20' data-name='Ellipse 20' transform='translate(11.5 8)' fill='%23fff' stroke='%23c8b100' stroke-width='2'%3E%3Ccircle cx='3.5' cy='3.5' r='3.5' stroke='none'/%3E%3Ccircle cx='3.5' cy='3.5' r='2.5' fill='none'/%3E%3C/g%3E%3Cg id='Ellipse_21' data-name='Ellipse 21' transform='translate(2.5 16)' fill='%23fff' stroke='%23c8b100' stroke-width='2'%3E%3Ccircle cx='3.5' cy='3.5' r='3.5' stroke='none'/%3E%3Ccircle cx='3.5' cy='3.5' r='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: 90% center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: var(--bs-gutter-x, 1.5rem);
    padding-left: var(--bs-gutter-x, 1.5rem);
    font-family: var(--bs-font-sans-serif);
    font-size: 16px;
    font-weight: bold;
    color: #C8B100;

}

.tx-wohnungsfinder summary::marker {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.095' height='11.047' viewBox='0 0 20.095 11.047'%3E%3Cg id='Pfeil' transform='translate(18.681 1) rotate(90)'%3E%3Cpath id='Pfad_93' data-name='Pfad 93' d='M8.633,0,0,8.633l8.633,8.633' fill='none' stroke='%23c8b100' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");

}

.tx-wohnungsfinder details>summary {

    list-style: none;
}

.tx-wohnungsfinder summary::-webkit-details-marker {
    display: none
}

.tx-wohnungsfinder summary::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.095' height='11.047' viewBox='0 0 20.095 11.047'%3E%3Cg id='Pfeil' transform='translate(1.414 10.047) rotate(-90)'%3E%3Cpath id='Pfad_93' data-name='Pfad 93' d='M8.633,0,0,8.633l8.633,8.633' fill='none' stroke='%23c8b100' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
    margin-right: 0.5rem;
}

.tx-wohnungsfinder details[open] summary::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.095' height='11.047' viewBox='0 0 20.095 11.047'%3E%3Cg id='Pfeil' transform='translate(18.681 1) rotate(90)'%3E%3Cpath id='Pfad_93' data-name='Pfad 93' d='M8.633,0,0,8.633l8.633,8.633' fill='none' stroke='%23c8b100' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
    margin-right: 0.5rem;
}

.tx-wohnungsfinder .col-filter {
    /* background-color: rgba(200,177,0,0.70); */
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.sort-arrow {
    position: absolute;
    display: inline !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0 0 0 5px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.606' height='11.12' viewBox='0 0 11.606 11.12'%3E%3Cg id='Gruppe_84' data-name='Gruppe 84' transform='translate(0.707)'%3E%3Cg id='pfeil_nach_unten' data-name='pfeil nach unten' transform='translate(0 4.61)'%3E%3Cpath id='pfeil_nach_unten-2' data-name='pfeil nach unten' d='M1107,7741.94l5.1,5.1,5.1-5.1' transform='translate(-1107 -7741.94)' fill='none' stroke='%23232626' stroke-width='2'/%3E%3C/g%3E%3Cline id='Linie_43' data-name='Linie 43' y1='9.835' transform='translate(5.096)' fill='none' stroke='%23232626' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A") !important;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
}

.descending {
    display: inline;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.606' height='11.12' viewBox='0 0 11.606 11.12'%3E%3Cg id='Gruppe_84' data-name='Gruppe 84' transform='translate(0.707)'%3E%3Cg id='pfeil_nach_unten' data-name='pfeil nach unten' transform='translate(0 4.61)'%3E%3Cpath id='pfeil_nach_unten-2' data-name='pfeil nach unten' d='M1107,7741.94l5.1,5.1,5.1-5.1' transform='translate(-1107 -7741.94)' fill='none' stroke='%23232626' stroke-width='2'/%3E%3C/g%3E%3Cline id='Linie_43' data-name='Linie 43' y1='9.835' transform='translate(5.096)' fill='none' stroke='%23232626' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A") !important;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
}

.ascending {
    display: inline;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.606' height='11.12' viewBox='0 0 11.606 11.12'%3E%3Cg id='Gruppe_85' data-name='Gruppe 85' transform='translate(10.899 11.12) rotate(180)'%3E%3Cg id='pfeil_nach_unten' data-name='pfeil nach unten' transform='translate(0 4.61)'%3E%3Cpath id='pfeil_nach_unten-2' data-name='pfeil nach unten' d='M1107,7741.94l5.1,5.1,5.1-5.1' transform='translate(-1107 -7741.94)' fill='none' stroke='%23232626' stroke-width='2'/%3E%3C/g%3E%3Cline id='Linie_43' data-name='Linie 43' y1='9.835' transform='translate(5.096)' fill='none' stroke='%23232626' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A") !important;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;

}

/* ############# MODAL ################### */

/* Actual modal */
.modal-xl {
    height: 90vh;
    max-width: 90vw !important;
    width: 90vw !important;
    left: 3vw;
    top: 5vh;
}

@media (min-width: 768px) {
    .modal-xl {
        left: 0;
        top: 0;
    }
}

@media (min-width: 992px) {
    .modal-xl {
        height: 90vh;
        max-width: 90vw !important;
        width: 90vw !important;
        top: 1vh;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        height: 90vh;
        /* calc((90vw/16)*9); */
        max-width: 90vw !important;
        width: 90vw !important;
    }
}

/* Modal content */
.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    /* width: 100%; */
    pointer-events: auto;
    background: #FFF;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 0.3rem;
    outline: 0;
    /* 
    height: calc((90vw/16)*9);
    max-width: 90vw !important;
    width: 90vw !important; */
}

@media (min-width: 992px) {
    /* .modal-content { */
    /* background: linear-gradient(to left, rgba(75,92,93,0.10) 65%, #FFF 35%); */
    /* } */
}

/* Modal header */
/* Top section of the modal w/ title and dismiss */
/* Den Header-Bereich aufräumen */
/* 1. Den Header als Flex-Container sauber ausrichten */
.modal-header {
    display: flex !important;
    align-items: center !important;
    /* justify-content: space-between; kann hier bleiben oder weg */
    padding: 1rem 1.5rem !important;
}

.modal-header .btn-close {
    /* Das hier schiebt den Button nach rechts, auch wenn der Titel fehlt */
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0.5rem !important;
    z-index: 1070 !important;
    cursor: pointer !important;
    position: relative;
    opacity: 1 !important;
}

/* 3. Falls der Titel stört (du hast ihn auf display: none) */
.modal-title {
    display: none !important;
}

/* Modal body */
.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0;
    margin-top: -25px;

}

.modal-body .container {
    /* width: 70vw;
    max-width: none;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto; */

}

.modal-body .text {
    /* padding-left: 70px; */
    overflow: inherit;
    height: 100% !important;
    align-self: start;
}

.modal-body .text .h2,
.modal-body .text h2 {
    font-family: var(--bs-font-sans-serif);
    font-size: 35px;
    font-weight: normal;
    color: #c8b100;
    padding-left: 0px;
}

@media (min-width: 1200px) {

    .modal-body .text .h2,
    .modal-body .text h2 {
        font-size: 70px;
    }
}

.modal-body .text .h4,
.modal-body .text h4 {
    font-family: var(--bs-font-sans-serif);
    font-size: 18px;
    font-weight: bold;
    color: #c8b100;
    padding-left: 0px;
}

@media (min-width: 768px) {

    .modal-body .text .h4,
    .modal-body .text h4 {
        padding-left: 35px;
    }
}

@media (min-width: 1200px) {

    .modal-body .text .h4,
    .modal-body .text h4 {
        padding-left: 70px;
    }
}

.modal-body .text p,
.modal-body .text table {
    font-family: var(--bs-font-sans-serif);
    font-size: 18px;
    font-weight: normal;
    color: #353535;
    padding-left: 0px;
}

@media (min-width: 768px) {

    .modal-body .text p,
    .modal-body .text table {
        padding-left: 35px;
    }
}

@media (min-width: 1200px) {

    .modal-body .text p,
    .modal-body .text table {
        padding-left: 70px;
    }
}

.modal-body .text .qm-table tr {
    padding: 0.25rem;
    vertical-align: top;
    border-bottom: 1px solid #707070;
}

/* Linke Spalte: Explizit linksbündig und ohne Einzug */
.modal-body .text .qm-table tr td:first-child {
    text-align: left;
}

.modal-body .text .qm-table tr:last-child {
    border-bottom: 0px solid #707070;
}

.modal-body .text .qm-table tr td:last-child {
    text-align: right;
}

.modal-body .text .location-image img {
    width: 30vh;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.modal-body .text a {
    padding-left: 0px;
    text-align: right;
    /* font-size: 1.25vw !important; */
    width: 100%;
}

@media (min-width: 768px) {
    .modal-body .text a {
        padding-left: 35px;
        text-align: right;
    }
}

@media (min-width: 1200px) {
    .modal-body .text a {
        padding-left: 70px;
        text-align: right;
    }
}

.modal-body .text a.icon-download {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.815' height='19.225' viewBox='0 0 18.815 19.225'%3E%3Cg id='download' transform='translate(9.282 -0.959)'%3E%3Cpath id='Pfad_107' data-name='Pfad 107' d='M4897.653-2603.158v11.163l-4.012-3.931' transform='translate(-4897.527 2605.616)' fill='none' stroke='%23C8B100' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3Cpath id='Pfad_108' data-name='Pfad 108' d='M4893.641-2603.158v11.163l4.012-3.931' transform='translate(-4893.516 2605.616)' fill='none' stroke='%23C8B100' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3Cpath id='Pfad_106' data-name='Pfad 106' d='M0,0H15.815' transform='translate(-7.782 18.684)' fill='none' stroke='%23C8B100' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: 15px center;
    padding-left: unset;
    padding-right: 20px !important;
}

.modal-body .text a.icon-download:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.815' height='19.225' viewBox='0 0 18.815 19.225'%3E%3Cg id='download' transform='translate(9.282 -0.959)'%3E%3Cpath id='Pfad_107' data-name='Pfad 107' d='M4897.653-2603.158v11.163l-4.012-3.931' transform='translate(-4897.527 2605.616)' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3Cpath id='Pfad_108' data-name='Pfad 108' d='M4893.641-2603.158v11.163l4.012-3.931' transform='translate(-4893.516 2605.616)' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3Cpath id='Pfad_106' data-name='Pfad 106' d='M0,0H15.815' transform='translate(-7.782 18.684)' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.modal-body .text a.icon-request {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='16' viewBox='0 0 23 16'%3E%3Cg id='Rechteck_11' data-name='Rechteck 11' fill='none' stroke='%23c8b100' stroke-linecap='round' stroke-width='3'%3E%3Crect width='23' height='16' rx='3' stroke='none'/%3E%3Crect x='1.5' y='1.5' width='20' height='13' rx='1.5' fill='none'/%3E%3C/g%3E%3Cpath id='Pfad_82' data-name='Pfad 82' d='M0-1,10.576,7.491,21.152-1' transform='translate(0.924 2.538)' fill='none' stroke='%23c8b100' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: 15px center;
    padding-left: unset;
    padding-right: 20px !important;
}

.modal-body .text a.icon-request:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='16' viewBox='0 0 23 16'%3E%3Cg id='Rechteck_11' data-name='Rechteck 11' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-width='3'%3E%3Crect width='23' height='16' rx='3' stroke='none'/%3E%3Crect x='1.5' y='1.5' width='20' height='13' rx='1.5' fill='none'/%3E%3C/g%3E%3Cpath id='Pfad_82' data-name='Pfad 82' d='M0-1,10.576,7.491,21.152-1' transform='translate(0.924 2.538)' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/svg%3E%0A");
}

@media (min-width: 768px) {

    .modal-body .text a.icon-download,
    .modal-body .text a.icon-request {
        padding-right: unset;
        padding-left: 50px !important;
    }
}

.modal-body .images {
    background: none;
    overflow: inherit;
    height: 100% !important;
    align-self: center;
}

@media (min-width: 768px) {
    .modal-body .images {
        padding-left: 50px !important;
    }
}

.modal-body .images .img-fluid {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

@media (min-width: 768px) {
    .modal-body .images .img-fluid {
        width: auto !important;
        /*height: 80vh !important;*/
        max-height: 80vh !important;
    }
}

.carousel-control-next,
.carousel-control-prev {
    background-color: transparent;
    border: none;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    display: inline-block;
    width: 50px !important;
    height: 50px !important;
    background: no-repeat 50%/100% 100%;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cg id='button_previ' data-name='button prev' transform='translate(40 60) rotate(180)'%3E%3Crect id='Rechteck' data-name='Rechteck' width='40' height='60' transform='translate(40 60) rotate(180)' fill='%23fff' opacity='0.59'/%3E%3Cg id='Pfeil' transform='translate(29.5 45) rotate(180)'%3E%3Cpath id='Pfeil' data-name='Pfeil' d='M15,0,0,15,15,30' fill='none' stroke='%23c8b100' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E ") !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg id='button_next' data-name='button next' xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Crect id='Rechteck' data-name='Rechteck' width='40' height='60' transform='translate(40 60) rotate(180)' fill='%23fff' opacity='0.59'/%3E%3Cg id='Pfeil' transform='translate(29.5 45) rotate(180)'%3E%3Cpath id='Pfeil' data-name='Pfeil' d='M15,0,0,15,15,30' fill='none' stroke='%23c8b100' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.carousel-indicators li {
    display: inline-block;
    width: 10px !important;
    height: 10px !important;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #c8b100 !important;
    border-radius: 10px;
}

.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #c8b100;
}

ol li::before {
    /* position: absolute;
    left: 0;
    counter-increment: li;
    content: counter(li) ". "; */
    display: none !important;
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
    color: #c8b100;
    text-decoration: none;
    outline: 0;
    opacity: .9;
}

/* Footer */
.modal-footer {
    /*  display: none !important; */
}

/* NUR für dein Anfrage-Modal den Footer wieder einblenden */
#requestModal .modal-footer {
    display: flex !important;
    /* Aktiviert das Flex-Layout von Bootstrap */
    justify-content: flex-end;
    /* Schiebt die Buttons nach rechts */
    gap: 10px;
    /* Kleiner Abstand zwischen den Buttons */
    border-top: 1px solid #dee2e6;
    /* Dezente Trennlinie */
}

/* ########## FIXES NUR FÜR DAS ANFRAGE-MODAL (#requestModal) ########## */

/* 1. Modal-Größe und Zentrierung */
#requestModal .modal-dialog {
    max-width: 700px;
    margin-top: 2rem;
    /* Alternative zu top: 100px für bessere Responsivität */
}

/* 2. Gesamthöhe begrenzen */
#requestModal .modal-content {
    max-height: 85vh !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Verhindert, dass das ganze Modal scrollt */
    border: none;
}

/* 3. Header Fixes */
#requestModal .modal-header {
    flex-shrink: 0;
    /* Header bleibt oben */
    background-color: #f8f9fa;
    padding: 0.75rem 1.25rem !important;
}

#requestModal .modal-title {
    display: block !important;
    font-size: 1.25rem;
}

/* 4. Body-Struktur */
#requestModal .modal-body {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    /* Padding wird über Unterelemente gesteuert */
    margin-top: 0 !important;
    /* Korrektur für globalen -25px Fehler */
    overflow: hidden;
}

/* 5. Fixierte Objekt-Vorschau (KEIN SCROLLEN) */
#requestModal .selection-preview {
    flex-shrink: 0;
    padding: 1.25rem 1.25rem 0.5rem 1.25rem;
    background: #fff;
}

#requestModal #selected-units-list {
    max-height: none !important;
    overflow: visible !important;
}

/* 6. Scrollbarer Formular-Bereich */
#requestModal form#wf-contact-form {
    overflow-y: auto !important;
    /* Nur hier wird gescrollt */
    padding: 0.5rem 1.25rem 1.25rem 1.25rem;
    flex-grow: 1;
}

/* 7. Button-Leiste am Ende des Formulars */
#requestModal .d-flex.justify-content-end {
    margin-bottom: 0.5rem;
}

/* ############# ACCORDION STYLES ################### */

/* 1. DER LINIEN-KILLER: Neutralisiert die von DataTables generierte technische Zelle */
table.dataTable tr.shown+tr td {
    padding: 0;
    border: none;
    outline: none;
    /* Falls ein Fokus-Rahmen entsteht */
    box-shadow: none;
}

.table.dataTable thead th {
    position: sticky !important;
    top: 0;
    z-index: 1000 !important;
    /* Brücke oben */
    background-color: #ffffff !important;
    /* Kein Durchscheinen */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
    /* Optische Trennung beim Scrollen */
}

/* Die Spalte für das Icon */
td.details-control {
    text-align: center;
    cursor: pointer;
    width: 30px;
    font-size: 1.2rem;
    color: #0058bb;
    /* Dein Siemens/Energy Blau */
    vertical-align: middle;
}

/* Das Plus-Zeichen im Standardzustand */
td.details-control:before {
    content: "\002B";
    /* Unicode für Plus */
    font-weight: bold;
}

/* Wechsel zum Minus-Zeichen, wenn die Zeile die Klasse .shown hat */
tr.shown td.details-control:before {
    content: "\2212";
    /* Unicode für Minus */
}

/* Styling für die aufgeklappte "Child-Row" - Hintergrund nur für die Zeile */
tr.shown+tr {
    background-color: transparent !important;
    /* Hintergrund kommt vom .accordion-inner */
}

.accordion-inner {
    display: block;
    /* Erzwingt Block-Level für sauberes Fading */
    border: none;
    /* Entferne testweise alle Border, um zu sehen ob es daran liegt */
    background-color: #fcfcfc;
    /* Nutze lieber einen Margin, um Abstand zu den Linien der Haupttabelle zu halten */
    margin: 0;
    position: relative;
    z-index: 10;
}

.qm-table {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Der Loader-Inhalt im Accordion */
.accordion-inner.is-loading {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Optional: Verhindert, dass beim Klick Text markiert wird */
.clickable-row {
    user-select: none;
}

/***** offene Spalte bleibt oben im Accordion stehen! *********/
/* Nur wenn die Zeile .shown UND .is-sticky ist, klebt sie fest */
#myFilter tbody tr.shown.is-sticky td {
    position: -webkit-sticky;
    position: sticky;
    top: 53px;
    z-index: 100 !important;
    background-color: #ffffff !important;
    border-bottom: 2px solid #C8B100 !important;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

/* Der Header muss immer sticky bleiben, damit die Spaltennamen sichtbar sind */
#myFilter thead th {
    position: sticky;
    top: 0;
    z-index: 110 !important;
    background-color: #C8B100 !important;
}

/* Den Fix für die Tabellen-Struktur lassen wir global drin, 
   da er die Tabelle stabiler macht */
#myFilter {
    border-collapse: separate !important;
    border-spacing: 0;
}

/***** END: offene Spalte bleibt oben im Accordion stehen! *********/

/* --- Das kleine Feedback-Popup --- */
.addedItems-mini-info {
    position: absolute;
    background-color: #333333;
    color: #ffffff;
    padding: 8px 12px;
    /* Etwas mehr Padding für zwei Zeilen */
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    /*min-width: 130px;*/
    /* Breite leicht erhöht */
    z-index: 10000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    display: none;
    line-height: 1.4;
    /* Bessere Lesbarkeit der zwei Zeilen */
}

/* Dreieck am Popup */
.addedItems-mini-info::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333333 transparent transparent transparent;
}

/* --- Der Counter / Badge --- */
.addedItems-count {
    display: inline-block;
    min-width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    text-align: center;
    transition: all 0.3s ease;
    font-size: 0.85em;
    margin-left: 5px;
    vertical-align: middle;
}

/* Wenn Objekte drin sind -> Signalrot */
.addedItems-count.badge-active {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    padding: 0 4px;
    /* Flexibler für zwei- oder dreistellige Zahlen */
    border-radius: 50%;
    /* Kreisform */
    font-weight: bold;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* Kleiner Trenner innerhalb des Popups (für die JS-Anzeige) */
.addedItems-mini-info hr {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid #555;
}

/* Verhindert, dass das Modal vom Sticky-Header verdeckt wird */
#requestModal {
    top: 100px;
    /* Hier die Höhe deines Headers eintragen */
}

/* Sorgt dafür, dass der dunkle Hintergrund (Backdrop) trotzdem oben beginnt */
.modal-backdrop {
    z-index: 1040;
    /* Standard Bootstrap */
}

#requestModal {
    z-index: 1050;
    /* Über dem Backdrop, aber unter extrem hohen Header-Z-Indizes falls nötig */
}

/* Korrektur für die mobile Ansicht */
@media (max-width: 991px) {
    #requestModal {
        top: 70px;
        /* Oft ist der Header mobil etwas schmaler */
    }
}

/* Versteckt die eigentliche Checkbox, wie von Bootstrap vorgesehen */
.btn-check:checked + .btn-outline-primary {
    background-color: #c8b100; /* Dein Gold-Ton */
    border-color: #c8b100;
    color: #fff;
}

/* --- DAS KONKRETE FORMULAR-DESIGN --- */
/* --- FORMULAR DESIGN --- */
.form-mode {
    background-color: #ffffff;
    color: #444444; /* Deine gewünschte Textfarbe */
    border: 1px solid #dee2e6;
    padding: 15px;
}

/* Titel & X-Button oben rechts */
.form-mode h2 {
    font-family: serif;
    color: #444444;
    margin: 0 0 15px 0;
}
.form-mode .btn-close {
    margin-top: -10px;
}

/* --- FELDER & SCHRIFT BEIM TIPPEN --- */
.form-mode .form-control, 
.form-mode .form-select {
    background-color: #f2f2f2; /* Hellgrau */
    color: #444444;           /* Dunkelgrauer Text */
    border: none;
    border-radius: 0;
}

/* Fokus-Zustand: Damit die Schrift beim Tippen AUCH dunkelgrau bleibt */
.form-mode .form-control:focus {
    background-color: #f2f2f2; 
    color: #444444;           /* Hier war der Fehler (jetzt fest Dunkelgrau) */
    outline: 1px solid #c8b100;
    box-shadow: none;
}

/* Platzhalter-Text */
.form-mode .form-control::placeholder {
    color: #888888;
}

/* --- GEMERKTE OBJEKTE (BADGES) --- */
.inline-unit-list .badge {
    font-weight: normal;
    background-color: #f8f9fa;
    color: #444444; /* Textfarbe wie restliches Formular */
    border: 1px solid #ddd;
    padding: 5px 10px;
}

/* Das Lösch-X hinter den Wohnungen (NICHT MEHR ROT) */
.inline-unit-list .btn-remove-unit {
    cursor: pointer;
    color: #444444; /* Gleiche Textfarbe wie oben */
    font-weight: bold;
    font-style: normal;
    font-size: 1.2rem;
    line-height: 1;
    margin-left: 5px;
}

.inline-unit-list .btn-remove-unit:hover {
    color: #000000; /* Nur beim Drüberfahren etwas dunkler */
}

/* Checkboxen */
.form-mode .form-check-input {
    border: 1px solid #444;
}

/* ############################################################ */
/* ERWEITERTER BS5 PATCH - OPTIMIERT FÜR WOHNUNGSFINDER V12     */
/* ############################################################ */

/* 1. Globaler Box-Sizing Fix für alle Formular-Elemente */
.tx-wohnungsfinder *,
.tx-wohnungsfinder *::before,
.tx-wohnungsfinder *::after {
    box-sizing: border-box !important;
}

/* 2. Fix für jQuery UI Slider (Zentrierung & Sichtbarkeit) */
.flat-slider.ui-slider {
    overflow: visible !important;
    display: flex;
    align-items: center;
}

.flat-slider .ui-slider-handle {
    box-sizing: border-box !important;
    top: 50% !important;
    margin-top: -8px !important;
    cursor: grab !important;
    z-index: 3;
}

/* 3. Korrektur der Schienen-Enden (:before/:after) */
.flat-slider:before,
.flat-slider:after {
    float: none !important;
    position: absolute;
    top: 0;
}

.flat-slider:before {
    left: -12px;
}

.flat-slider:after {
    right: -9px;
}

/* 4. Input-Felder (Zahlen) BS5-Reset */
.tx-wohnungsfinder input[type="number"] {
    appearance: auto;
    -moz-appearance: textfield;
    background-color: #fff;
    line-height: normal;
    padding: 2px 5px !important;
}

/* 5. Modal-Zentrierung & BS5 Close-Button */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
}


@media (min-width: 768px) {
    .modal-xl {
        left: auto !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 6. Fix für die klickbaren Tabellenzeilen */
.tx-wohnungsfinder .table-hover tbody tr {
    transition: background-color 0.2s ease-in-out;
}