/*
 * Claude 2026-07-20: dmi_de-Redesign Feinschliff - Angebote-/estatelist-Seite aufs neue Design-System.
 * Behebt den harten Bruch, dass Filter-Sidebar + Pagination noch im alten Realia-ROT standen (die Karten
 * sind bereits neu). Plus ein Seitenkopf ("Aktuelle Angebote"). Rein ADDITIV; nur auf estatelist/indexSuccess
 * geladen. Standard-Akzent = Denkmal (gruen); Tokens aus dmi-base.css.
 */

/* ---- Seitenkopf ---- */
.dmi-listhead { background:#fff; border-bottom:1px solid var(--line); }
.dmi-listhead .container { padding-top:30px; padding-bottom:24px; }
.dmi-listhead .dmi-listhead-eyebrow { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 8px; }
.dmi-listhead h1 { font-family:var(--serif); font-weight:600; color:var(--ink); font-size:clamp(28px,4vw,42px); line-height:1.12; margin:0; }
.dmi-listhead .dmi-listhead-sub { color:var(--slate); font-size:15px; line-height:1.6; margin:8px 0 0; max-width:64ch; }
#estatelist { padding-top:30px; }

/* ---- Filter-Karte (Realia-rotes .panel-filter ueberschreiben) ---- */
#estatelist .panel-filter { background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); overflow:hidden; margin-bottom:22px; }
#estatelist .panel-filter .panel-body { background:#fff; padding:18px 18px 20px; }
#estatelist .panel-filter label,
#estatelist .panel-filter legend { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); border:0; margin:0 0 6px; padding:0; }
#estatelist .panel-filter .form-group { margin-bottom:14px; }
#estatelist .panel-filter fieldset.form-group { margin-top:4px; border:0; }
#estatelist .panel-filter fieldset legend { margin-bottom:8px; }
/* ezmark ersetzt die Checkbox durch ein position:absolute .ez-checkbox -> KEIN flex/gap (das legt die
 * absolute Box ueber die ersten Buchstaben, "lege"/"enkmal"); stattdessen padding-left fuer die Box. */
#estatelist .panel-filter .checkbox { position:relative; }
#estatelist .panel-filter .checkbox label { position:relative; display:inline-block; padding-left:28px; min-height:22px; line-height:22px; text-transform:none; letter-spacing:normal; font-size:14px; font-weight:600; color:var(--ink-soft); }
#estatelist .panel-filter .checkbox .ez-checkbox { position:absolute; left:0; top:0; }
#estatelist .panel-filter .btn[type=submit],
#estatelist .panel-filter .btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; border-radius:var(--r-sm); font-weight:700; font-size:15px; padding:12px 18px; }
#estatelist .panel-filter .btn-primary:hover,
#estatelist .panel-filter .btn-primary:focus,
#estatelist .panel-filter .btn[type=submit]:hover { background:var(--accent-deep); border-color:var(--accent-deep); color:#fff; }

/* ---- Pagination (Realia-Rot -> Akzent) ---- */
#estatelist .pagination { margin:10px 0 0; }
#estatelist .pagination > li > a,
#estatelist .pagination > li > span { color:var(--accent-deep); border-color:var(--line); }
#estatelist .pagination > li > a:hover,
#estatelist .pagination > li > a:focus { background:var(--tint); border-color:var(--edge); color:var(--accent-deep); }
#estatelist .pagination > .active > span,
#estatelist .pagination > .active > a,
#estatelist .pagination > .active > span:hover,
#estatelist .pagination > .active > a:hover { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---- Sidebar-Widgets (1B) + Sticky-Sidebar (folgt der langen Liste) ---- */
/* Ab md die Zeile als Flex fuehren -> die Sidebar-Spalte streckt sich auf die Listenhoehe (align-items:stretch),
 * dadurch kann das .dmi-sidebar-inner ueber die GANZE Liste sticky mitlaufen. order statt push/pull (unter Flex
 * greifen die left/right-Offsets von col-md-push/pull nicht mehr). */
@media (min-width:992px) {
  #estatelist > .row { display:flex; }
  #estatelist > .row > #listdata { order:1; }
  #estatelist > .row > .sidebar { order:2; }
  #estatelist > .row > .col-md-push-9 { left:auto; }
  #estatelist > .row > .col-md-pull-3 { right:auto; left:auto; }
  #estatelist .dmi-sidebar-inner { position:sticky; top:76px; }
}
#estatelist .dmi-side-widget { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 20px; margin-bottom:22px; box-shadow:var(--sh-sm); }
#estatelist .dmi-side-widget h4 { margin:0 0 12px; font-family:var(--serif); font-weight:600; color:var(--accent-deep); font-size:17px; padding-bottom:9px; border-bottom:1px solid var(--edge); }
#estatelist .dmi-side-widget p { font-size:13.5px; line-height:1.55; color:var(--slate); margin:0 0 12px; }
#estatelist .dmi-side-widget ul { list-style:none; padding:0; margin:0; }
#estatelist .dmi-side-widget li { position:relative; padding:7px 0 7px 22px; font-size:13.5px; color:var(--ink-soft); line-height:1.4; border-top:1px solid #f2efe8; }
#estatelist .dmi-side-widget li:first-child { border-top:0; }
#estatelist .dmi-side-widget li::before { content:""; position:absolute; left:0; top:13px; width:8px; height:8px; border-radius:2px; background:var(--accent); opacity:.85; }
#estatelist .dmi-side-phone { display:flex; align-items:center; gap:9px; font-weight:700; font-size:18px; color:var(--accent-deep); font-variant-numeric:tabular-nums; text-decoration:none; margin:0 0 14px; }
#estatelist .dmi-side-phone svg { width:20px; height:20px; color:var(--accent); flex:0 0 auto; }
#estatelist .dmi-side-phone:hover { color:var(--accent); }
#estatelist .dmi-side-btn { display:block; text-align:center; background:var(--accent); color:#fff; text-decoration:none; padding:11px 14px; border-radius:var(--r-sm); font-weight:700; font-size:14px; }
#estatelist .dmi-side-btn:hover, #estatelist .dmi-side-btn:focus { background:var(--accent-deep); color:#fff; text-decoration:none; }

/* ============================================================================
 * Claude 2026-07-21 (Rose): Angebotsliste-Layout umschaltbar (app_estatelist_layout).
 * ========================================================================== */

/* --- sidebar-Layout: 2 Karten je Reihe (war 3 -> in der schmalen col-md-9 gequetscht) --- */
@media (min-width: 992px) {
	.dmi-estatelist--sidebar .dmi-grid-cards { grid-template-columns: repeat(2, 1fr); }
}

/* --- topfilter-Layout: Filter als horizontale Leiste (Karte) ueber voller Breite, 3 Karten/Reihe.
 *     Filter liegt in #estatelist -> die #estatelist .panel-filter-Styles (Labels/Checkboxen/Button)
 *     greifen; hier wird nur die Anordnung von vertikal auf horizontal umgestellt. --- */
.dmi-estatelist--full .dmi-filter-top { margin-bottom:26px; }
.dmi-estatelist--full .dmi-filter-top .panel-filter { margin-bottom:0; }
.dmi-estatelist--full .dmi-filter-top .panel-body { padding:16px 18px; }
/* Selects nebeneinander: die filter-eigenen Bootstrap-Spalten (col-md-12) aufheben */
.dmi-estatelist--full .dmi-filter-top form > .row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 18px; margin:0; }
.dmi-estatelist--full .dmi-filter-top form > .row > [class*="col-"] { width:auto; flex:1 1 240px; float:none; padding:0; }
.dmi-estatelist--full .dmi-filter-top .form-group { margin:0; }
/* Checkboxen + Button in einer Zeile */
.dmi-estatelist--full .dmi-filter-top fieldset.form-group { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.dmi-estatelist--full .dmi-filter-top fieldset legend { margin:0; flex:0 0 auto; }
.dmi-estatelist--full .dmi-filter-top fieldset .row { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; margin:0; }
.dmi-estatelist--full .dmi-filter-top .checkbox-cell { width:auto; }
.dmi-estatelist--full .dmi-filter-top .btn[type=submit],
.dmi-estatelist--full .dmi-filter-top .btn-primary { margin-left:auto; align-self:center; white-space:nowrap; }
@media (max-width: 767px) {
	.dmi-estatelist--full .dmi-filter-top form > .row > [class*="col-"] { flex:1 1 100%; }
	.dmi-estatelist--full .dmi-filter-top .btn-primary { margin-left:0; width:100%; }
}

/* --- farbige Typ-Checkboxen (Denkmal gruen / Pflege honig), analog Klickdummy-/Karten-Welten.
 *     ezmark rendert die Checkbox als Sprite-Bild (.ez-checkbox) - dieses ersetzen wir durch ein
 *     CSS-Kaestchen, das im checked-Zustand pro Typ farbig gefuellt wird (weisser Haken). --- */
#estatelist .panel-filter .checkbox .ez-checkbox {
	width:19px; height:19px; border-radius:5px; border:2px solid var(--line);
	background:#fff !important; background-image:none !important;
	position:absolute; left:0; top:1px; cursor:pointer; transition:background .12s, border-color .12s;
}
#estatelist .panel-filter .checkbox .ez-checkbox.ez-checked::after {
	content:""; position:absolute; left:5px; top:1px; width:5px; height:10px;
	border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
/* Rahmen pro Typ farbig (auch unchecked) */
#estatelist .panel-filter .checkbox label[for="inputDenkmal"] .ez-checkbox { border-color:var(--dk, #2f6b5b); }
#estatelist .panel-filter .checkbox label[for="inputPflege"]  .ez-checkbox { border-color:var(--pf, #a35e1c); }
/* checked -> farbig gefuellt */
#estatelist .panel-filter .checkbox label[for="inputDenkmal"] .ez-checkbox.ez-checked { background:var(--dk, #2f6b5b) !important; border-color:var(--dk, #2f6b5b); }
#estatelist .panel-filter .checkbox label[for="inputPflege"]  .ez-checkbox.ez-checked { background:var(--pf, #a35e1c) !important; border-color:var(--pf, #a35e1c); }

/* Claude 2026-07-21 (Rose): Standort-Selects als weisse Box mit Rahmen (wie Startseite/Kontaktformular)
   statt des unterstrichenen Default-Looks; select2-Chevron bleibt. */
#estatelist .panel-filter .select2-container .select2-choice { height:44px; line-height:42px; padding:0 34px 0 14px; border:1px solid #ccc; border-radius:10px; background:#fff; box-shadow:none; color:var(--ink-soft); }
#estatelist .panel-filter .select2-container.select2-container-active .select2-choice { border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,107,91,.14); }

/* Claude 2026-07-21 (Rose): Empty-State (keine Filtertreffer) im dmi-Design statt Realia .no-results. */
.dmi-noresults { text-align:center; max-width:520px; margin:20px auto; padding:40px 28px; background:var(--tint); border:1px solid var(--edge); border-radius:var(--r); }
.dmi-noresults-icon { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:#fff; color:var(--accent); border:1px solid var(--edge); margin-bottom:16px; }
.dmi-noresults h2 { font-family:var(--serif); font-weight:600; font-size:22px; color:var(--accent-deep); margin:0 0 10px; }
.dmi-noresults p { color:var(--ink-soft); font-size:15px; line-height:1.55; margin:0 0 22px; }
.dmi-noresults-actions { display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap; }
.dmi-noresults-btn { display:inline-block; background:var(--accent); color:#fff; text-decoration:none; padding:12px 22px; border-radius:var(--r-sm); font-weight:700; font-size:15px; }
.dmi-noresults-btn:hover, .dmi-noresults-btn:focus { background:var(--accent-deep); color:#fff; text-decoration:none; }
.dmi-noresults-link { color:var(--accent-deep); font-weight:600; text-decoration:none; }
.dmi-noresults-link:hover, .dmi-noresults-link:focus { text-decoration:underline; }