/* Zeitwohnwelt – Ergänzungen zum Findeo-Template */

:root {
	--zww-green: #5b9c33;
	--zww-text: #555;
	--zww-muted: #888;
	--zww-border: #e8e8e8;
	--zww-bg-soft: #f7f7f7;
}


/* Header-Logo: Anzeigegröße wie auf beta.zeitwohnwelt.de (~230x70px bei 260x79px Originaldatei) */
#logo img { max-height: 70px; width: auto; }
/* das breitere Logo braucht etwas weniger Abstand zum Menü, sonst bricht die Navigation um (Wert wie im Beta-Projekt) */
#logo { margin-right: 30px; }
/* Template reserviert .left-side/.right-side fest mit 65%/35% für einen mehrteiligen Header-Widget-Bereich;
   unser Header hat rechts nur den Merkliste-Button, wodurch links kaum noch Platz für Logo+Navigation bleibt
   und die Navigation umbricht. Rechts reicht fester Platz für den einen Button, links den Rest zuweisen
   (width: auto statt fest berechnet lässt dem Float bei schmaler Fensterbreite zu wenig Platz). */
@media (min-width: 992px) {
	#header .right-side { width: 160px; }
	#header .left-side { width: calc(100% - 160px); }
}

/* Fußzeilen-Logo: wächst mit der Bildschirmbreite bis zur Originalgröße (220px); weißer Bildhintergrund wird ausgeblendet */
#footer img.footer-logo { max-height: none; width: 160px; height: auto; max-width: 100%; mix-blend-mode: multiply; }
@media (min-width: 768px) { #footer img.footer-logo { width: 190px; } }
@media (min-width: 1200px) { #footer img.footer-logo { width: 220px; } }

.zww-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

h1.zww-hero-title { font-size: 40px; color: #fff; margin-bottom: 35px; text-align: center; }
#titlebar h1 { font-size: 28px; line-height: 1.3; margin: 0; }
.property-title h1 { font-size: 26px; line-height: 1.35; margin: 0 0 6px; }
/* Platz für den absolut positionierten Mietpreis reservieren, damit lange Titel nicht darunter laufen */
@media (min-width: 768px) { .property-title { padding-right: 230px; } }

/* Alle Auswahlboxen im Suchdialog auf die Höhe von Eingabefeld und Button bringen (55px) */
.main-search-form .chosen-container .chosen-single { height: 55px; line-height: 55px; }

/* Suchgebiete auf der Startseite */
.zww-regions { margin-bottom: 20px; }
.zww-region-box { background: #fff; border: 1px solid var(--zww-border); border-radius: 4px; padding: 22px 26px; margin-bottom: 30px; box-shadow: 0 1px 6px rgba(0,0,0,0.05); }
.zww-region-box h3 { font-size: 18px; margin: 0 0 12px; color: var(--zww-green); }
.zww-region-box ul { list-style: none; margin: 0; padding: 0; }
.zww-region-box li a { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--zww-border); color: #333; }
.zww-region-box li:last-child a { border-bottom: 0; }
.zww-region-box li a:hover { color: var(--zww-green); }
.zww-region-box li a span { color: var(--zww-muted); font-size: 13px; }

/* Filter */
.zww-filter { background: var(--zww-bg-soft); border-radius: 4px; padding: 25px 25px 5px; margin-bottom: 30px; }
.zww-filter label { font-size: 13px; margin-bottom: 6px; color: var(--zww-text); }
.zww-filter input, .zww-filter .chosen-container { margin-bottom: 20px; }
/* Buttons auf Höhe und Größe der Eingabefelder (Feld beginnt 33px unter der Beschriftung) */
.zww-filter .row .zww-filter-actions { display: flex; justify-content: flex-end; align-items: flex-start; gap: 10px; padding-top: 33px; margin-bottom: 20px; }
.zww-filter .zww-filter-actions .button { display: inline-flex; justify-content: center; align-items: center; height: 51px; margin: 0; padding: 0 22px; line-height: 1; border-width: 1px; border-style: solid; }
.zww-filter .zww-filter-actions .button:not(.border) { border-color: transparent; }
.zww-tabs { list-style: none; margin: -5px 0 25px; padding: 0; display: flex; gap: 6px; border-bottom: 1px solid #e0e0e0; }
.zww-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 16px; font-size: 15px; color: #555; cursor: pointer; transition: color .2s, border-color .2s; }
.zww-tabs button i { margin-right: 6px; }
.zww-tabs button:hover { color: var(--zww-green); }
.zww-tabs button[aria-selected="true"] { color: var(--zww-green); border-bottom-color: var(--zww-green); font-weight: 600; }
.zww-number-link { margin: 0; padding-top: 15px; border-top: 1px solid #eee; font-size: 14px; color: var(--zww-muted); text-align: left; }
.zww-number-link i { margin-right: 4px; }
.zww-number-link a { font-weight: 600; white-space: nowrap; }
.zww-tab-hint { font-size: 13px; color: var(--zww-muted); margin: -5px 0 20px; }
.zww-filter .row .zww-filter-actions-start { justify-content: flex-start; }
/* Erweiterte Suchoptionen (Checkboxen): an den grauen Filter-Hintergrund angleichen statt weiß/Schatten des Templates */
.zww-filter .more-search-options-container { background-color: transparent; box-shadow: none; }
.zww-result-count { margin-bottom: 20px; color: var(--zww-muted); }

/* Objektkarten */
.listing-details li i { margin-right: 4px; }
.listing-item img { object-fit: cover; }
/* Bild füllt immer die volle Höhe der Karte, auch wenn der Text daneben umbricht */
.list-layout .listing-img-container { height: auto; align-self: stretch; position: relative; min-height: 220px; }
.list-layout .listing-img-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
	.list-layout .listing-img-container { min-height: 240px; }
}
/* Graue Detailleiste reicht bis zur Unterkante der Karte */
.list-layout .listing-content { display: flex; flex-direction: column; }
.list-layout ul.listing-details { display: block; flex: 1 0 auto; margin-bottom: 0; }
.carousel .listing-img-container img { height: 230px; width: 100%; }

.listing-badges span:not(.featured) { background-color: var(--zww-green); }

/* Preis hinter dem Ort: wie listing-address stylen, nicht wie der weiße Bild-Overlay.
   Nur in der breiten (nebeneinander) Listenansicht anzeigen, analog zum Detailbutton,
   der auch nur dort erscheint - in der gestapelten Hochkant-Karte (Grid, Karussell,
   schmale Liste) steht der Preis bereits als Overlay im Bild. */
.listing-title .listing-price { display: none; color: #909090; position: relative; top: -7px; margin-left: 12px; }
.listing-title .listing-price i { font-style: normal; }
@media (min-width: 768px) {
	.list-layout .listing-title .listing-price { display: inline; top: -5px; }
}

/* Exposé */
.zww-expose-link { color: #000; margin-right: 20px; }
.zww-expose-link:hover { color: var(--zww-green); }
.zww-details li span { font-weight: 600; }
.zww-other-info { font-size: 14px; color: var(--zww-muted); }
.zww-agent { padding-left: 0 !important; }
.zww-small-label { font-size: 12px; margin-bottom: 4px; }
.zww-inquiry .notification { margin-bottom: 15px; }
.zww-privacy label { font-size: 12px; line-height: 1.5; }
.zww-privacy { margin: 10px 0; }

/* CMS-Inhalte */
.zww-content { margin-bottom: 55px; }
.zww-content img { max-width: 100%; height: auto; }
.zww-content table { width: 100%; margin-bottom: 20px; }
.zww-content td, .zww-content th { padding: 6px 8px; border-bottom: 1px solid var(--zww-border); vertical-align: top; }
.zww-content .zww-link-columns { list-style: none; margin: 0 0 20px; padding: 0; column-count: 3; column-gap: 30px; }
.zww-content .zww-link-columns li { break-inside: avoid; margin: 0 0 8px; }
@media (max-width: 991px) { .zww-content .zww-link-columns { column-count: 2; } }
@media (max-width: 575px) { .zww-content .zww-link-columns { column-count: 1; } }
.zww-form fieldset { border: 0; padding: 0; margin: 0 0 25px; }
.zww-form legend { font-size: 18px; border-bottom: 1px solid var(--zww-border); margin-bottom: 20px; padding-bottom: 8px; width: 100%; }
.zww-form label { font-size: 14px; }
.zww-form .help-text { font-size: 12px; color: var(--zww-muted); margin-top: -12px; margin-bottom: 15px; }
.zww-form .checkboxes label { font-size: 14px; }
.zww-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; margin-bottom: 20px; }
.zww-form .notification.notice p { margin: 0; }
.zww-form .field-error { color: #c0392b; font-size: 13px; margin-top: -12px; margin-bottom: 15px; }

/* Bootstrap-3-Grid nutzt Floats: wächst ein Feld durch eine Fehlermeldung,
   verschieben sich sonst die Felder dahinter in derselben Zeile. Flexbox
   bricht Spalten anhand der Breite um, nicht anhand der Höhe. */
.zww-form .row.with-forms { display: flex; flex-wrap: wrap; align-items: flex-start; }

.button.zww-filter-toggle { display: none; margin-bottom: 20px; }

@media (max-width: 767px) {
	.button.zww-filter-toggle { display: block; }
	.zww-filter { display: none; }
	.zww-filter.open { display: block; }
	.zww-filter .zww-filter-actions .button { flex: 1 1 100%; }
	.zww-filter .row .zww-filter-actions { padding-top: 0; }
	.zww-tabs { gap: 0; }
	.zww-tabs li { flex: 1 1 50%; }
	.zww-tabs button { width: 100%; padding: 8px 4px; font-size: 14px; white-space: nowrap; }
}

@media (max-width: 991px) {
	/* Buttons stehen ab dieser Breite neben der Sortierung (col-sm-6) – daher auf
	   deren Feldhöhe ausgerichtet bleiben, statt (wie früher als eigene volle Zeile) bündig oben. */
	.zww-filter .row .zww-filter-actions { justify-content: flex-start; flex-wrap: wrap; }
	h1.zww-hero-title { font-size: 30px; }
}

@media print {
	#header-container, #footer, .sidebar .widget-button, .zww-inquiry, #backtotop, .property-slider-nav { display: none !important; }
}