/**
* bsdimmo modern frontend skin
*
* Bootstrap-free design for the com_bsdimmo property list and detail pages.
* Everything is scoped under #bsdimmo-overview-wrapper (immos views) and
* #bsdimmo-details-wrapper (immo detail view) so it never touches the rest
* of the Cassiopeia template (which still legitimately loads Bootstrap for
* menus/other modules).
*
* Two kinds of rules live here:
* 1) A re-skin of the Bootstrap-ish grid/utility class names still used
* inside the ~20 shared field partials (tmpl/immo/partials/*.php) that
* were intentionally left untouched - .row/.col-md-N/.col-xs-N/.name/
* .value/.well/.btn/.modal/.control-group etc. Re-defining what those
* classes mean here removes the visual (and load-time) dependency on
* Bootstrap without having to touch ~20 data-mapping files that carry
* no real risk-reward in a hand rewrite.
* 2) New "bsdm-" prefixed component classes used by the fully rewritten
* immos/kachel.php, immos/default.php and immo/default.php templates.
*
* The --bsdm-* custom properties are also redeclared per-section below (on
* #bsdimmo-overview-wrapper, .bsdm-search, .bsdm-featured, .bsdm-notice) for
* historical reasons, but the :root declaration here is what actually makes
* them resolve reliably: several widgets (select2's dropdown, the share
* "joomla-dialog" popups, and this notice module's own modal) get their
* content portaled out to by their JS, landing outside every one of
* those wrapper elements - only a :root-level definition reaches them via
* normal inheritance.
*/
:root {
--bsdm-accent: #0d7d6f;
--bsdm-accent-dark: #095e53;
--bsdm-accent-contrast: #ffffff;
--bsdm-ink: #1a1d1f;
--bsdm-muted: #6b7280;
--bsdm-line: #e6e5e1;
--bsdm-surface: #ffffff;
--bsdm-bg: #f7f7f5;
--bsdm-radius: 14px;
--bsdm-radius-sm: 8px;
--bsdm-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 24px -12px rgba(20, 20, 20, .16);
--bsdm-shadow-hover: 0 4px 10px rgba(20, 20, 20, .06), 0 16px 32px -12px rgba(20, 20, 20, .22);
}
#bsdimmo-overview-wrapper,
#bsdimmo-details-wrapper {
--bsdm-accent: #0d7d6f;
--bsdm-accent-dark: #095e53;
--bsdm-accent-contrast: #ffffff;
--bsdm-ink: #1a1d1f;
--bsdm-muted: #6b7280;
--bsdm-line: #e6e5e1;
--bsdm-surface: #ffffff;
--bsdm-bg: #f7f7f5;
--bsdm-radius: 14px;
--bsdm-radius-sm: 8px;
--bsdm-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 24px -12px rgba(20, 20, 20, .16);
--bsdm-shadow-hover: 0 4px 10px rgba(20, 20, 20, .06), 0 16px 32px -12px rgba(20, 20, 20, .22);
--bsdm-gap: 1.5rem;
font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--bsdm-ink);
background: transparent;
}
#bsdimmo-overview-wrapper *,
#bsdimmo-details-wrapper * {
box-sizing: border-box;
}
#bsdimmo-overview-wrapper h1,
#bsdimmo-details-wrapper h1 {
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
font-weight: 700;
letter-spacing: -.01em;
margin: 0 0 1.25rem;
}
#bsdimmo-overview-wrapper h2,
#bsdimmo-details-wrapper h2 {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 .85rem;
padding-bottom: .6rem;
border-bottom: 1px solid var(--bsdm-line);
}
#bsdimmo-overview-wrapper h3,
#bsdimmo-details-wrapper h3 {
font-size: .95rem;
font-weight: 700;
margin: 0 0 .6rem;
}
#bsdimmo-overview-wrapper a,
#bsdimmo-details-wrapper a {
color: inherit;
text-decoration: none;
}
/* ---------------------------------------------------------------------- *
* 1) Re-skin of the legacy grid/utility classes used inside the shared
* field partials (preise, flaechen, geo, anbieter, ausstattung, ...).
* ---------------------------------------------------------------------- */
#bsdimmo-overview-wrapper .row,
#bsdimmo-details-wrapper .row {
display: flex;
flex-wrap: wrap;
margin: 0;
width: auto;
}
#bsdimmo-overview-wrapper [class*=" col-"],
#bsdimmo-overview-wrapper [class^="col-"],
#bsdimmo-details-wrapper [class*=" col-"],
#bsdimmo-details-wrapper [class^="col-"] {
padding: 0;
width: 100%;
}
#bsdimmo-overview-wrapper .col-md-2, #bsdimmo-details-wrapper .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
#bsdimmo-overview-wrapper .col-md-4, #bsdimmo-details-wrapper .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
#bsdimmo-overview-wrapper .col-md-6, #bsdimmo-details-wrapper .col-md-6 { flex: 0 0 50%; max-width: 50%; }
#bsdimmo-overview-wrapper .col-md-8, #bsdimmo-details-wrapper .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
#bsdimmo-overview-wrapper .col-md-12, #bsdimmo-details-wrapper .col-md-12 { flex: 0 0 100%; max-width: 100%; }
@media (max-width: 640px) {
#bsdimmo-overview-wrapper [class*="col-xs-"],
#bsdimmo-overview-wrapper [class*="col-md-"],
#bsdimmo-details-wrapper [class*="col-xs-"],
#bsdimmo-details-wrapper [class*="col-md-"] {
flex: 0 0 100%;
max-width: 100%;
}
}
/* key/value rows (".row" whose two children are ".name" + ".value") */
#bsdimmo-overview-wrapper .row:has(> .name),
#bsdimmo-details-wrapper .row:has(> .name) {
align-items: baseline;
gap: .5rem;
padding: .5rem 0;
border-bottom: 1px solid var(--bsdm-line);
}
#bsdimmo-overview-wrapper .row:has(> .name):last-child,
#bsdimmo-details-wrapper .row:has(> .name):last-child {
border-bottom: 0;
}
#bsdimmo-overview-wrapper .name,
#bsdimmo-details-wrapper .name {
color: var(--bsdm-muted);
font-size: .82rem;
}
#bsdimmo-overview-wrapper .value,
#bsdimmo-details-wrapper .value {
font-weight: 600;
text-align: right;
margin-left: auto;
}
/* panels rendered by the shared partials: */
#bsdimmo-overview-wrapper .row[class*="bsdimmo-"],
#bsdimmo-details-wrapper .row[class*="bsdimmo-"] {
background: var(--bsdm-surface);
border: 1px solid var(--bsdm-line);
border-radius: var(--bsdm-radius);
box-shadow: var(--bsdm-shadow);
padding: 1.25rem 1.35rem;
margin-bottom: var(--bsdm-gap);
}
#bsdimmo-overview-wrapper .row.bsdimmo-gallery,
#bsdimmo-overview-wrapper .row.bsdimmo-googlemaps,
#bsdimmo-details-wrapper .row.bsdimmo-gallery,
#bsdimmo-details-wrapper .row.bsdimmo-googlemaps {
padding: 0;
overflow: hidden;
}
/* .well used for the "Anbieter"-notice box and the legacy contact modal body */
#bsdimmo-overview-wrapper .well,
#bsdimmo-details-wrapper .well {
background: var(--bsdm-surface);
border: 1px solid var(--bsdm-line);
border-radius: var(--bsdm-radius);
box-shadow: var(--bsdm-shadow);
padding: 1.25rem 1.35rem;
margin-bottom: var(--bsdm-gap);
}
/* buttons used by the buttons/kontaktformular/weitereanhange partials */
#bsdimmo-overview-wrapper .btn,
#bsdimmo-details-wrapper .btn {
display: inline-flex;
align-items: center;
gap: .4rem;
appearance: none;
border: 1px solid var(--bsdm-line);
background: var(--bsdm-surface);
color: var(--bsdm-ink);
font-size: .88rem;
font-weight: 600;
line-height: 1;
padding: .65rem 1.1rem;
border-radius: 999px;
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
#bsdimmo-overview-wrapper .btn:hover,
#bsdimmo-details-wrapper .btn:hover {
box-shadow: var(--bsdm-shadow-hover);
transform: translateY(-1px);
}
#bsdimmo-overview-wrapper .btn-primary,
#bsdimmo-details-wrapper .btn-primary {
background: var(--bsdm-accent);
border-color: var(--bsdm-accent);
color: var(--bsdm-accent-contrast);
}
#bsdimmo-overview-wrapper .btn-primary:hover,
#bsdimmo-details-wrapper .btn-primary:hover {
background: var(--bsdm-accent-dark);
border-color: var(--bsdm-accent-dark);
}
#bsdimmo-overview-wrapper .btn-toolbar,
#bsdimmo-details-wrapper .btn-toolbar {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
#bsdimmo-overview-wrapper .pull-right,
#bsdimmo-details-wrapper .pull-right {
margin-left: auto;
}
/* contact form (default_kontaktformular.php) */
#bsdimmo-overview-wrapper .control-group,
#bsdimmo-details-wrapper .control-group {
margin-bottom: 1rem;
}
#bsdimmo-overview-wrapper .control-label label,
#bsdimmo-details-wrapper .control-label label {
display: block;
font-size: .82rem;
font-weight: 600;
color: var(--bsdm-muted);
margin-bottom: .35rem;
}
#bsdimmo-overview-wrapper .control-label .star,
#bsdimmo-details-wrapper .control-label .star {
color: var(--bsdm-accent);
}
#bsdimmo-overview-wrapper .controls input[type="text"],
#bsdimmo-overview-wrapper .controls textarea,
#bsdimmo-details-wrapper .controls input[type="text"],
#bsdimmo-details-wrapper .controls textarea {
width: 100%;
border: 1px solid var(--bsdm-line);
border-radius: var(--bsdm-radius-sm);
padding: .65rem .8rem;
font: inherit;
color: var(--bsdm-ink);
background: var(--bsdm-bg);
}
#bsdimmo-overview-wrapper .controls input:focus,
#bsdimmo-overview-wrapper .controls textarea:focus,
#bsdimmo-details-wrapper .controls input:focus,
#bsdimmo-details-wrapper .controls textarea:focus {
outline: 2px solid var(--bsdm-accent);
outline-offset: 1px;
background: var(--bsdm-surface);
}
#bsdimmo-overview-wrapper .form-legal-check,
#bsdimmo-details-wrapper .form-legal-check {
display: flex;
align-items: flex-start;
gap: .5rem;
}
#bsdimmo-overview-wrapper .form-legal-check .control-label,
#bsdimmo-details-wrapper .form-legal-check .control-label {
order: 2;
margin: 0;
}
#bsdimmo-overview-wrapper .form-legal-check .control-label label,
#bsdimmo-details-wrapper .form-legal-check .control-label label {
font-weight: 400;
color: var(--bsdm-ink);
}
#bsdimmo-overview-wrapper .form-legal-check .controls,
#bsdimmo-details-wrapper .form-legal-check .controls {
order: 1;
padding-top: .2rem;
}
/* legacy Bootstrap modal markup (contact popup / 360 tour videos) */
#bsdimmo-overview-wrapper .modal,
#bsdimmo-details-wrapper .modal {
background: rgba(20, 20, 20, .55);
}
#bsdimmo-overview-wrapper .modal-content,
#bsdimmo-details-wrapper .modal-content {
border: 0;
border-radius: var(--bsdm-radius);
box-shadow: var(--bsdm-shadow-hover);
overflow: hidden;
}
#bsdimmo-overview-wrapper .modal-header,
#bsdimmo-details-wrapper .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--bsdm-line);
padding: 1rem 1.25rem;
}
#bsdimmo-overview-wrapper .modal-title,
#bsdimmo-details-wrapper .modal-title {
font-weight: 700;
}
#bsdimmo-overview-wrapper .modal-body,
#bsdimmo-details-wrapper .modal-body {
padding: 1.25rem;
}
#bsdimmo-overview-wrapper .close,
#bsdimmo-details-wrapper .close {
appearance: none;
border: 0;
background: none;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
color: var(--bsdm-muted);
}
/* attachment/link lists (default_weitereanhange.php) */
#bsdimmo-overview-wrapper ul.attached,
#bsdimmo-details-wrapper ul.attached {
list-style: none;
margin: 0 0 .5rem;
padding: 0;
display: flex;
flex-direction: column;
gap: .4rem;
}
#bsdimmo-overview-wrapper ul.attached a,
#bsdimmo-details-wrapper ul.attached a {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--bsdm-accent-dark);
font-weight: 600;
}
#bsdimmo-overview-wrapper ul.attached a:hover,
#bsdimmo-details-wrapper ul.attached a:hover {
text-decoration: underline;
}
/* icon glyphs used across facts/badges */
#bsdimmo-overview-wrapper [class*="bsdimmo-"]:not(.btn),
#bsdimmo-details-wrapper [class*="bsdimmo-"]:not(.btn) {
color: var(--bsdm-accent);
}
/* ---------------------------------------------------------------------- *
* 1b) mod_bsdimmo_search re-skin (default-bs3.php layout override).
* The field partials under modules/mod_bsdimmo_search/tmpl/fields/bs3/
* were intentionally left untouched (same reasoning as the property
* partials above) - Bootstrap 3 btn-group/dropdown/input-group markup,
* a jQuery UI range slider, and select2 for the Ausstattung multi-
* select. Scoped under .bsdm-search (wrapper added by the override).
* ---------------------------------------------------------------------- */
.bsdm-search {
--bsdm-accent: #0d7d6f;
--bsdm-accent-dark: #095e53;
--bsdm-ink: #1a1d1f;
--bsdm-muted: #6b7280;
--bsdm-line: #e6e5e1;
--bsdm-surface: #ffffff;
--bsdm-bg: #f7f7f5;
--bsdm-radius: 14px;
--bsdm-radius-sm: 8px;
--bsdm-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 24px -12px rgba(20, 20, 20, .16);
font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--bsdm-ink);
}
.bsdm-search * {
box-sizing: border-box;
}
.bsdm-search .row {
display: flex;
flex-wrap: wrap;
margin: 0 -.4rem;
}
.bsdm-search .col-md-12 {
flex: 0 0 100%;
max-width: 100%;
padding: 0 .4rem;
}
.bsdm-search-field {
margin-bottom: .9rem;
}
.bsdm-search-field > small {
display: block;
font-size: .78rem;
font-weight: 600;
color: var(--bsdm-muted);
margin-bottom: .35rem;
}
/* dropdown-toggle btn-group fields (Nutzungsart, Objektart, Vermarktungsart,
Verwaltung technisch, Umkreis) */
.bsdm-search .btn-group {
display: flex;
flex-wrap: nowrap;
width: 100%;
position: relative;
}
.bsdm-search .btn-group.btn-block .dropdown-toggle {
flex: 1 1 auto;
justify-content: space-between;
}
/* plain multi-button toggle groups (Miete/Kauf, Neubau/Altbau, ...) split
the row evenly; the small round "clear" link (id ends in -remove) stays
its natural width. */
.bsdm-search .btn-group.btn-block > .btn:not([id$="-remove"]) {
flex: 1 1 0;
justify-content: center;
}
.bsdm-search .input-group .btn-group,
.bsdm-search .input-group-btn {
position: relative;
display: flex;
flex-wrap: nowrap;
flex: 0 0 auto;
}
.bsdm-search .btn {
appearance: none;
display: inline-flex;
align-items: center;
gap: .4rem;
border: 1px solid var(--bsdm-line);
background: var(--bsdm-surface);
color: var(--bsdm-ink);
font: inherit;
font-size: .86rem;
font-weight: 600;
line-height: 1;
padding: .7rem .9rem;
cursor: pointer;
transition: background-color .12s ease, border-color .12s ease;
}
.bsdm-search .btn:hover {
background: var(--bsdm-bg);
}
.bsdm-search .btn.active {
background: var(--bsdm-accent);
border-color: var(--bsdm-accent);
color: #fff;
}
.bsdm-search .btn-group .btn:first-child,
.bsdm-search .input-group .form-control {
border-top-left-radius: var(--bsdm-radius-sm);
border-bottom-left-radius: var(--bsdm-radius-sm);
}
.bsdm-search .btn-group .btn:last-child,
.bsdm-search .input-group-btn .btn:last-child {
border-top-right-radius: var(--bsdm-radius-sm);
border-bottom-right-radius: var(--bsdm-radius-sm);
}
.bsdm-search .btn-group .btn + .btn,
.bsdm-search .input-group .btn + .btn,
.bsdm-search .input-group > .btn,
.bsdm-search .input-group > .btn-group,
.bsdm-search .input-group > .input-group-btn {
border-left: 0;
}
.bsdm-search .caret {
display: inline-block;
width: 0;
height: 0;
margin-left: auto;
border-top: 5px solid currentColor;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
opacity: .6;
}
.bsdm-search .dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 40;
margin-top: .35rem;
padding: .4rem;
list-style: none;
background: var(--bsdm-surface);
border: 1px solid var(--bsdm-line);
border-radius: var(--bsdm-radius-sm);
box-shadow: var(--bsdm-shadow);
max-height: 320px;
overflow-y: auto;
}
.bsdm-search .dropdown-menu.bsdm-open {
display: block;
}
.bsdm-search .dropdown-menu li a {
display: block;
padding: .55rem .6rem;
border-radius: var(--bsdm-radius-sm);
font-size: .88rem;
cursor: pointer;
color: var(--bsdm-ink);
}
.bsdm-search .dropdown-menu li a:hover {
background: var(--bsdm-bg);
color: var(--bsdm-accent-dark);
}
/* plain text inputs (places, verwtechn text, umkreis text, sliders' text) */
.bsdm-search .form-control {
width: 100%;
border: 1px solid var(--bsdm-line);
background: var(--bsdm-surface);
color: var(--bsdm-ink);
font: inherit;
font-size: .88rem;
padding: .7rem .8rem;
}
.bsdm-search .form-control:focus {
outline: 2px solid var(--bsdm-accent);
outline-offset: -1px;
}
.bsdm-search .input-group {
display: flex;
flex-wrap: nowrap;
width: 100%;
}
.bsdm-search .input-group .form-control {
flex: 1 1 auto;
min-width: 0;
}
/* jQuery UI range sliders (Zimmer/Fläche/Preis) */
/* jquery-ui-1.12.1.slider.min.css is loaded per-field (kaufpreis_slider.php
etc addStyleSheet() their own copy) and its .ui-state-default rule keeps
winning the border/background cascade despite lower selector specificity
- !important throughout, same reasoning as the select2 rules below. */
.bsdm-search .ui-slider {
position: relative !important;
height: 4px !important;
background: var(--bsdm-line) !important;
border-radius: 999px !important;
margin: 1.1rem .5rem .6rem !important;
}
.bsdm-search .ui-slider-range {
position: absolute !important;
top: 0 !important;
height: 100% !important;
background: var(--bsdm-accent) !important;
border-radius: 999px !important;
}
.bsdm-search .ui-slider-handle {
position: absolute !important;
top: 50% !important;
width: 16px !important;
height: 16px !important;
margin-left: -8px !important;
transform: translateY(-50%) !important;
background: #fff !important;
border: 2px solid var(--bsdm-accent) !important;
border-radius: 50% !important;
cursor: grab !important;
outline: none !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25) !important;
}
.bsdm-search .ui-slider-handle:active {
cursor: grabbing;
}
/* select2 (Ausstattung multi-select) */
.bsdm-search .select2-container {
width: 100% !important;
}
.bsdm-search .select2-selection--multiple {
border: 1px solid var(--bsdm-line) !important;
border-radius: var(--bsdm-radius-sm) !important;
min-height: 44px !important;
padding: .25rem !important;
}
.bsdm-search .select2-selection__choice {
background: var(--bsdm-bg) !important;
border: 1px solid var(--bsdm-line) !important;
border-radius: 999px !important;
color: var(--bsdm-ink) !important;
padding: .15rem .6rem !important;
}
.bsdm-search .select2-selection__choice__remove {
color: var(--bsdm-muted) !important;
margin-right: .35rem !important;
}
.bsdm-search .select2-selection--single {
border: 1px solid var(--bsdm-line) !important;
border-radius: var(--bsdm-radius-sm) !important;
height: 44px !important;
padding: .1rem .25rem !important;
display: flex !important;
align-items: center;
}
.bsdm-search .select2-selection--single .select2-selection__rendered {
color: var(--bsdm-ink) !important;
line-height: normal !important;
padding-left: .5rem !important;
}
.bsdm-search .select2-selection--single .select2-selection__arrow {
height: 42px !important;
}
/* thomasimmos.php's greenBGHandler flags a select2 box once a value is
picked (Objektart/Schlafzimmer/Bäder/Bundesland/Städte/Umkreis). */
.bsdm-search .select2-selection.bsdm-search-select2-active {
border-color: var(--bsdm-accent) !important;
background: color-mix(in srgb, var(--bsdm-accent) 8%, var(--bsdm-surface)) !important;
}
/* The open dropdown/results panel is appended to by select2 itself
(not a descendant of .bsdm-search), so these must stay unscoped. */
.select2-dropdown {
border-color: var(--bsdm-line) !important;
border-radius: var(--bsdm-radius-sm) !important;
overflow: hidden;
}
.select2-results__option--highlighted[aria-selected] {
background: var(--bsdm-accent) !important;
}
.select2-search__field {
border-color: var(--bsdm-line) !important;
}
/* submit / reset */
.bsdm-search-actions {
display: flex;
gap: .6rem;
margin-top: .5rem;
}
.bsdm-search-actions .btn {
flex: 1 1 50%;
justify-content: center;
border-radius: 999px;
padding: .8rem 1rem;
font-size: .92rem;
}
.bsdm-search-actions .btn-primary {
background: var(--bsdm-accent);
border-color: var(--bsdm-accent);
color: #fff;
}
.bsdm-search-actions .btn-primary:hover {
background: var(--bsdm-accent-dark);
border-color: var(--bsdm-accent-dark);
}
/* compact multi-column layout (thomasimmos.php layout - a denser search
form than default-bs3's stacked one-field-per-row list) */
.bsdm-search-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem .9rem;
align-items: end;
}
@media (min-width: 768px) {
.bsdm-search-grid { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 992px) {
.bsdm-search-grid { grid-template-columns: repeat(12, 1fr); }
}
.bsdm-search-grid-item small {
display: block;
font-size: .78rem;
font-weight: 600;
color: var(--bsdm-muted);
margin-bottom: .35rem;
}
/* toggle-button pairs (Miete/Kauf, Neubau/Altbau, Meerblick) reuse the same
.btn-group look as the default-bs3 layout's dropdown fields. */
.bsdm-search .btn-group .btn.active {
background: var(--bsdm-accent);
border-color: var(--bsdm-accent);
color: #fff;
}
/* ---------------------------------------------------------------------- *
* 1c) mod_bsdimmo_featured re-skin (slick carousel of property cards).
* Slick itself (slick.css/slick.js) stays - it's a plain carousel
* library, not Bootstrap - only the per-slide card markup and the
* arrow/dot theme are re-skinned here, scoped under .bsdm-featured.
* ---------------------------------------------------------------------- */
.bsdm-featured {
--bsdm-accent: #0d7d6f;
--bsdm-accent-dark: #095e53;
--bsdm-ink: #1a1d1f;
--bsdm-muted: #6b7280;
--bsdm-line: #e6e5e1;
--bsdm-surface: #ffffff;
--bsdm-bg: #f7f7f5;
--bsdm-radius: 14px;
--bsdm-radius-sm: 8px;
--bsdm-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 24px -12px rgba(20, 20, 20, .16);
--bsdm-shadow-hover: 0 4px 10px rgba(20, 20, 20, .06), 0 16px 32px -12px rgba(20, 20, 20, .22);
font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--bsdm-ink);
padding-bottom: 2.75rem;
position: relative;
}
.bsdm-featured * {
box-sizing: border-box;
}
.bsdm-featured .row {
display: flex;
flex-wrap: wrap;
margin: 0 -.5rem;
}
.bsdm-featured .col-xs-6,
.bsdm-featured .col-md-6 {
flex: 0 0 50%;
max-width: 50%;
padding: 0 .3rem;
}
.bsdm-featured .text-left { text-align: left; }
.bsdm-featured .text-right { text-align: right; }
.bsdm-fcard {
display: block !important; /* slick sets its own display on slides */
padding: 0 .6rem;
cursor: pointer;
}
.bsdm-fcard-inner {
background: var(--bsdm-surface);
border: 1px solid var(--bsdm-line);
border-radius: var(--bsdm-radius);
box-shadow: var(--bsdm-shadow);
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.bsdm-fcard:hover .bsdm-fcard-inner {
transform: translateY(-3px);
box-shadow: var(--bsdm-shadow-hover);
}
.bsdm-fcard-media {
position: relative;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
overflow: hidden;
}
.bsdm-fcard-badge {
position: absolute;
top: .65rem;
left: .65rem;
z-index: 2;
background: var(--bsdm-accent);
color: #fff;
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: .28rem .6rem;
border-radius: 999px;
}
.bsdm-fcard-badge--rent { background: #b5772f; }
.bsdm-fcard-link {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 20, 20, 0);
color: #fff;
font-size: 1.6rem;
opacity: 0;
transition: opacity .2s ease, background-color .2s ease;
}
.bsdm-fcard:hover .bsdm-fcard-link {
opacity: 1;
background: rgba(15, 20, 20, .35);
}
.bsdm-fcard-address {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: .4rem .6rem;
background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
color: #fff;
font-size: .78rem;
text-align: center;
}
.bsdm-fcard-body {
padding: 1rem 1.1rem 1.2rem;
}
.bsdm-fcard-facts {
display: flex;
flex-direction: column;
gap: .1rem;
margin-bottom: .6rem;
}
.bsdm-fcard-facts .row {
justify-content: space-between;
padding: .3rem 0;
border-bottom: 1px solid var(--bsdm-line);
font-size: .82rem;
}
.bsdm-fcard-facts .row:last-child {
border-bottom: 0;
}
.bsdm-fcard-facts .name {
color: var(--bsdm-muted);
}
.bsdm-fcard-facts .value {
font-weight: 600;
}
.bsdm-fcard-title {
font-size: .96rem;
font-weight: 700;
line-height: 1.35;
margin: 0 0 .35rem;
}
.bsdm-fcard-title a:hover {
text-decoration: underline;
}
.bsdm-fcard-teaser {
color: var(--bsdm-muted);
font-size: .84rem;
line-height: 1.5;
margin: 0;
}
.bsdm-featured-more {
text-align: center;
margin-top: 1.5rem;
}
.bsdm-featured-more .btn {
display: inline-flex;
align-items: center;
appearance: none;
border: 1px solid var(--bsdm-accent);
background: var(--bsdm-accent);
color: #fff;
font: inherit;
font-size: .9rem;
font-weight: 600;
padding: .7rem 1.4rem;
border-radius: 999px;
cursor: pointer;
transition: background-color .12s ease;
}
.bsdm-featured-more .btn:hover {
background: var(--bsdm-accent-dark);
border-color: var(--bsdm-accent-dark);
}
/* slick arrows/dots */
.bsdm-featured .slick-prev,
.bsdm-featured .slick-next {
width: 2.4rem;
height: 2.4rem;
background: var(--bsdm-surface);
border: 1px solid var(--bsdm-line);
border-radius: 50%;
box-shadow: var(--bsdm-shadow);
z-index: 3;
}
.bsdm-featured .slick-prev { left: -1.1rem; }
.bsdm-featured .slick-next { right: -1.1rem; }
.bsdm-featured .slick-prev:before,
.bsdm-featured .slick-next:before {
color: var(--bsdm-ink);
opacity: 1;
font-size: 1.1rem;
}
.bsdm-featured .slick-prev:hover,
.bsdm-featured .slick-next:hover {
background: var(--bsdm-bg);
}
.bsdm-featured .slick-dots {
bottom: -2.4rem;
}
.bsdm-featured .slick-dots li button:before {
font-size: .5rem;
color: var(--bsdm-line);
opacity: 1;
}
.bsdm-featured .slick-dots li.slick-active button:before {
color: var(--bsdm-accent);
}
/* ---------------------------------------------------------------------- *
* 1d) mod_bsdimmo_notice re-skin (Merkzettel/watchlist sidebar box).
* The root wrapper's FIRST class must stay bsdnotice_container_ -
* NoticeController::getMarkup() re-renders this module server-side and
* bsdnotice.js does `jQuery('.' + firstClass).replaceWith(...)` to swap
* it in live after add/remove, so that class is load-bearing, not
* decorative. .bsdm-notice is added as a second class purely for CSS.
* ---------------------------------------------------------------------- */
.bsdm-notice {
--bsdm-accent: #0d7d6f;
--bsdm-accent-dark: #095e53;
--bsdm-ink: #1a1d1f;
--bsdm-muted: #6b7280;
--bsdm-line: #e6e5e1;
--bsdm-surface: #ffffff;
--bsdm-bg: #f7f7f5;
--bsdm-radius: 14px;
--bsdm-radius-sm: 8px;
--bsdm-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 24px -12px rgba(20, 20, 20, .16);
font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--bsdm-ink);
display: block;
}
.bsdm-notice * {
box-sizing: border-box;
}
.bsdm-notice-head {
display: inline-flex;
align-items: center;
gap: .5rem;
appearance: none;
border: 1px solid var(--bsdm-accent);
background: var(--bsdm-accent);
color: #fff;
font: inherit;
font-size: .88rem;
font-weight: 600;
padding: .65rem 1.1rem;
border-radius: 999px;
cursor: pointer;
width: 100%;
justify-content: center;
}
.bsdm-notice-head:hover {
background: var(--bsdm-accent-dark);
border-color: var(--bsdm-accent-dark);
}
.bsdm-notice-head img {
width: 16px;
height: 16px;
filter: brightness(0) invert(1);
}
.bsdm-notice-content {
margin-top: .75rem;
}
.bsdm-notice-empty {
color: var(--bsdm-muted);
font-size: .85rem;
padding: .75rem 0;
text-align: center;
}
.bsdm-notice-list {
display: flex;
flex-direction: column;
gap: .6rem;
margin-bottom: .75rem;
}
.bsdm-notice-item {
display: flex;
gap: .65rem;
background: var(--bsdm-surface);
border: 1px solid var(--bsdm-line);
border-radius: var(--bsdm-radius-sm);
box-shadow: var(--bsdm-shadow);
padding: .55rem;
position: relative;
}
.bsdm-notice-thumb {
flex: 0 0 64px;
width: 64px;
height: 64px;
border-radius: 6px;
overflow: hidden;
background: var(--bsdm-bg);
}
.bsdm-notice-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bsdm-notice-info {
flex: 1 1 auto;
min-width: 0;
}
.bsdm-notice-title {
display: block;
font-size: .85rem;
font-weight: 700;
line-height: 1.3;
color: var(--bsdm-ink);
margin-bottom: .2rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bsdm-notice-title:hover {
text-decoration: underline;
}
.bsdm-notice-price {
font-size: .84rem;
font-weight: 700;
color: var(--bsdm-accent-dark);
}
.bsdm-notice-facts {
font-size: .76rem;
color: var(--bsdm-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bsdm-notice-desc {
font-size: .76rem;
color: var(--bsdm-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bsdm-notice-remove {
flex: 0 0 auto;
align-self: flex-start;
appearance: none;
border: 0;
background: none;
color: var(--bsdm-muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
padding: .2rem;
}
.bsdm-notice-remove:hover {
color: #c0392b;
}
.bsdm-notice-actions {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.bsdm-notice .btn,
.bsdm-notice-modal .btn {
display: inline-flex;
align-items: center;
appearance: none;
border: 1px solid var(--bsdm-line);
background: var(--bsdm-surface);
color: var(--bsdm-ink);
font: inherit;
font-size: .82rem;
font-weight: 600;
padding: .55rem .9rem;
border-radius: 999px;
cursor: pointer;
}
.bsdm-notice .btn:hover,
.bsdm-notice-modal .btn:hover {
background: var(--bsdm-bg);
}
.bsdm-notice .btn-primary,
.bsdm-notice-modal .btn-primary {
background: var(--bsdm-accent);
border-color: var(--bsdm-accent);
color: #fff;
}
.bsdm-notice .btn-primary:hover,
.bsdm-notice-modal .btn-primary:hover {
background: var(--bsdm-accent-dark);
border-color: var(--bsdm-accent-dark);
}
/* icon-only trigger (popover.php layout) */
.bsdm-notice-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--bsdm-surface);
border: 1px solid var(--bsdm-line);
box-shadow: var(--bsdm-shadow);
cursor: pointer;
color: var(--bsdm-accent);
font-size: 1.3rem;
}
.bsdm-notice-icon:hover {
background: var(--bsdm-bg);
}
.bsdm-notice-icon-badge {
position: absolute;
top: -.3rem;
right: -.3rem;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 .3rem;
border-radius: 999px;
background: var(--bsdm-accent);
color: #fff;
font-size: .68rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.bsdm-notice-icon--left .bsdm-notice-icon-badge {
right: auto;
left: -.3rem;
}
/* modal body (icon+modal layout - content is portaled into
by the web component, so it never sits inside .bsdm-notice in the DOM;
:root-level --bsdm-* custom properties above are what make colors resolve
here regardless). */
.bsdm-notice-modal {
font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--bsdm-ink);
}
.bsdm-notice-modal * {
box-sizing: border-box;
}
/* share-dialog form (rendered inside a , escapes .bsdm-notice
in the DOM the same way select2's dropdown does - kept unscoped so it
still gets styled wherever the dialog mounts it). */
.bsdnoticemodule-share-form .control-group {
margin-bottom: 1rem;
}
.bsdnoticemodule-share-form .control-label label {
display: block;
font-size: .82rem;
font-weight: 600;
color: var(--bsdm-muted, #6b7280);
margin-bottom: .35rem;
}
.bsdnoticemodule-share-form .control-label .star {
color: var(--bsdm-accent, #0d7d6f);
}
.bsdnoticemodule-share-form .controls input[type="text"],
.bsdnoticemodule-share-form .controls textarea {
width: 100%;
border: 1px solid var(--bsdm-line, #e6e5e1);
border-radius: 8px;
padding: .65rem .8rem;
font: inherit;
}
.bsdnoticemodule-share-form .form-legal-check {
display: flex;
align-items: flex-start;
gap: .5rem;
}
.bsdnoticemodule-share-form .form-legal-check .control-label {
order: 2;
margin: 0;
}
.bsdnoticemodule-share-form .form-legal-check .control-label label {
font-weight: 400;
color: var(--bsdm-ink, #1a1d1f);
}
.bsdnoticemodule-share-form .form-legal-check .controls {
order: 1;
padding-top: .2rem;
}
.bsdnoticemodule-share-form button[type="submit"] {
appearance: none;
border: 1px solid #0d7d6f;
background: #0d7d6f;
color: #fff;
font: inherit;
font-weight: 600;
padding: .65rem 1.2rem;
border-radius: 999px;
cursor: pointer;
}
.bsdnoticemodule-share-form button[type="submit"]:hover {
background: #095e53;
}
/* ---------------------------------------------------------------------- *
* 2) New "bsdm-" component classes for the rewritten templates.
* ---------------------------------------------------------------------- */
.bsdm-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.bsdm-result-count {
color: var(--bsdm-muted);
font-size: .95rem;
}
.bsdm-empty {
background: var(--bsdm-surface);
border: 1px dashed var(--bsdm-line);
border-radius: var(--bsdm-radius);
padding: 3rem 1.5rem;
text-align: center;
color: var(--bsdm-muted);
font-size: 1.1rem;
}
/* card grid (immos/kachel.php + immos/default.php outer chrome) */
.bsdm-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--bsdm-gap);
margin-bottom: 2rem;
list-style: none;
padding: 0;
}
.bsdm-grid--detailed {
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}
.bsdm-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bsdm-surface);
border: 1px solid var(--bsdm-line);
border-radius: var(--bsdm-radius);
box-shadow: var(--bsdm-shadow);
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.bsdm-card:hover {
transform: translateY(-3px);
box-shadow: var(--bsdm-shadow-hover);
}
.bsdm-card-media {
position: relative;
aspect-ratio: 4 / 3;
background: var(--bsdm-bg);
overflow: hidden;
}
.bsdm-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.bsdm-card:hover .bsdm-card-media img {
transform: scale(1.04);
}
.bsdm-card-media-empty {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--bsdm-muted);
font-size: 2rem;
}
.bsdm-badge {
position: absolute;
top: .75rem;
left: .75rem;
background: var(--bsdm-ink);
color: #fff;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: .32rem .65rem;
border-radius: 999px;
z-index: 2;
}
.bsdm-badge--sale { background: var(--bsdm-accent); }
.bsdm-badge--rent { background: #b5772f; }
.bsdm-notice-btn {
position: absolute;
top: .6rem;
right: .6rem;
z-index: 2;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, .92);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--bsdm-shadow);
color: var(--bsdm-ink);
text-decoration: none;
}
.bsdm-notice-btn:hover {
background: #fff;
}
.bsdm-card-body {
display: flex;
flex-direction: column;
gap: .6rem;
padding: 1.1rem 1.25rem 1.3rem;
flex: 1;
}
.bsdm-card-price {
font-size: 1.25rem;
font-weight: 700;
color: var(--bsdm-accent-dark);
}
.bsdm-card-price small {
font-size: .68rem;
font-weight: 600;
color: var(--bsdm-muted);
text-transform: uppercase;
letter-spacing: .03em;
display: block;
margin-bottom: .1rem;
}
.bsdm-card-title {
font-size: 1.02rem;
font-weight: 700;
line-height: 1.35;
margin: 0;
}
.bsdm-card-title a:hover {
text-decoration: underline;
}
.bsdm-card-location {
display: flex;
align-items: center;
gap: .4rem;
color: var(--bsdm-muted);
font-size: .86rem;
}
.bsdm-card-teaser {
color: var(--bsdm-muted);
font-size: .88rem;
line-height: 1.5;
margin: 0;
}
.bsdm-facts {
display: flex;
flex-wrap: wrap;
gap: .5rem 1rem;
list-style: none;
margin: 0;
padding: .7rem 0 0;
border-top: 1px solid var(--bsdm-line);
}
.bsdm-facts li {
display: flex;
align-items: center;
gap: .35rem;
font-size: .84rem;
font-weight: 600;
}
.bsdm-card-actions {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: auto;
padding-top: .8rem;
}
.bsdm-card-actions .btn {
padding: .55rem .95rem;
font-size: .82rem;
}
.bsdm-panel-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--bsdm-gap);
}
/* detail page hero */
.bsdm-hero {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.bsdm-hero-heading h1 {
margin-bottom: .35rem;
}
.bsdm-hero-location {
display: flex;
align-items: center;
gap: .4rem;
color: var(--bsdm-muted);
font-size: .95rem;
}
/* the admin-configured scaffold grid (immo/default.php) - keeps the same
1..12 sizing the layout builder already stores, just as CSS Grid instead
of Bootstrap floats. */
.bsdm-scaffold-row {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--bsdm-gap);
margin-bottom: var(--bsdm-gap);
align-items: start;
}
@media (max-width: 780px) {
.bsdm-scaffold-row {
grid-template-columns: 1fr;
}
}
.bsdm-scaffold-col {
min-width: 0;
}
/* The admin layout builder sometimes stores a legacy Bootstrap classattr
string (e.g. "col-xs-8 col-sm-8 col-md-8 col-lg-8") directly on a scaffold
column IN ADDITION to bsdm-scaffold-col. Those class names are also
targeted above by the .col-md-N re-skin (flex: 0 0 N%), which - applied
here - fights the grid-column span and collapses the column to a sliver.
Reset those properties on the grid item itself; grid-column keeps sizing
it via data-span regardless of which legacy classes tag along. */
#bsdimmo-details-wrapper .bsdm-scaffold-col[class*="col-"],
#bsdimmo-overview-wrapper .bsdm-scaffold-col[class*="col-"] {
flex: initial;
width: auto;
max-width: none;
}
.bsdm-scaffold-col > .bsdimmo-details-gallery,
.bsdm-scaffold-col > .bsdimmo-details-buttons {
margin-bottom: var(--bsdm-gap);
}
.bsdm-scaffold-col[data-span="1"] { grid-column: span 1; }
.bsdm-scaffold-col[data-span="2"] { grid-column: span 2; }
.bsdm-scaffold-col[data-span="3"] { grid-column: span 3; }
.bsdm-scaffold-col[data-span="4"] { grid-column: span 4; }
.bsdm-scaffold-col[data-span="5"] { grid-column: span 5; }
.bsdm-scaffold-col[data-span="6"] { grid-column: span 6; }
.bsdm-scaffold-col[data-span="7"] { grid-column: span 7; }
.bsdm-scaffold-col[data-span="8"] { grid-column: span 8; }
.bsdm-scaffold-col[data-span="9"] { grid-column: span 9; }
.bsdm-scaffold-col[data-span="10"] { grid-column: span 10; }
.bsdm-scaffold-col[data-span="11"] { grid-column: span 11; }
.bsdm-scaffold-col[data-span="12"] { grid-column: span 12; }
.bsdm-panel-heading {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 .85rem;
padding-bottom: .6rem;
border-bottom: 1px solid var(--bsdm-line);
}
/* pagination (joomla.searchtools + pagination links render plain