/* Shared application palette; legacy aliases preserve existing components. */
:root {
  color-scheme: light; --content-max: 1180px; --content-gutter: 2rem;
  --azure: var(--accent-blue); --azure-dark: var(--accent-hover); --azure-light: var(--accent-blue); --azure-soft: var(--accent-soft);
  --slate: var(--text-primary); --muted: var(--text-secondary); --background: var(--bg); --line: var(--border);
  --brand-ink: var(--text-primary);
  --bg: #F8F5EF; --card-bg: #FFFFFF; --surface: #FBFAF7; --border: #DDD6C8;
  --text-primary: #182433; --text-secondary: #6F766F; --text-tertiary: #6F766F;
  --accent-blue: #0F766E; --accent-hover: #115E59; --accent-soft: #CCFBF1;
  --status-new: #15803D; --status-new-bg: #EAF6EE;
  --warning-text: #855411; --status-changed: #B7791F; --status-changed-bg: #FFF4DF;
  --status-removed: #C2410C; --status-removed-bg: #FFF0E8;
  --just-detected: #0F766E; --just-detected-bg: #CCFBF1;
  --filter-bg: #FBFAF7; --filter-hover-bg: #CCFBF1;
  --header-bg: rgba(252, 251, 248, .97); --header-line: #EFEAE0; --focus-ring: rgba(15, 118, 110, .4);
  --install-bg: #E6F3F1; --install-border: #C7DFDB; --install-ink: #153B3A;
  --install-hover-bg: #D7ECE8; --install-focus: #49B8AE;
  --card-shadow: 0 2px 6px rgba(24, 36, 51, .035); --button-ink: #FFFFFF;
}
:root[data-theme="dark"] {
  color-scheme: dark; --brand-ink: #FFFFFF;
  --bg: #0B1117; --card-bg: #111A22; --surface: #151F29; --border: #23303A;
  --text-primary: #E8EDF2; --text-secondary: #8793A3; --text-tertiary: #8793A3;
  --accent-blue: #2DD4BF; --accent-hover: #5EEAD4; --accent-soft: rgba(45, 212, 191, .14);
  --status-new: #22C55E; --status-new-bg: rgba(34, 197, 94, .12);
  --warning-text: #F59E0B; --status-changed: #F59E0B; --status-changed-bg: rgba(245, 158, 11, .12);
  --status-removed: #EF4444; --status-removed-bg: rgba(239, 68, 68, .12);
  --just-detected: #2DD4BF; --just-detected-bg: rgba(45, 212, 191, .14);
  --filter-bg: #151F29; --filter-hover-bg: rgba(45, 212, 191, .14);
  --header-bg: rgba(17, 26, 34, .97); --header-line: #1E2A34; --focus-ring: rgba(45, 212, 191, .5);
  --install-bg: #29434A; --install-border: #3A5960; --install-ink: #E6F4F2;
  --install-hover-bg: #345159; --install-focus: #4FD1C5;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, .12); --button-ink: #0B1117;
}

/* Keep centered headers stationary when switching between short and scrollable pages. */
html { background: var(--bg); scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
body {
  background: var(--bg);
  color: var(--text-primary);
  transition: background-color .18s ease, color .18s ease;
}

a { color: var(--accent-blue); }
a:hover { color: var(--accent-hover); }
h1, h2, h3, dt, label { color: var(--text-primary); }
.muted, small { color: var(--text-secondary); }

.site-header {
  display: block;
  width: 100%;
  min-height: 68px;
  padding: .3rem 0;
  background: var(--header-bg);
  border-top: 4px solid var(--accent-blue);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: blur(14px);
}
.site-header-inner {
  display: grid;
  grid-template-columns: minmax(240px, auto) minmax(0, 1fr);
  align-items: center;
  gap: .25rem 1rem;
  width: min(calc(100% - var(--content-gutter)), var(--content-max));
  min-height: 58px;
  margin: 0 auto;
}
.site-header-inner > .header-primary { align-self: start; }

.header-primary { display: flex; align-items: center; justify-content: space-between; min-width: 0; }
.monitoring-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 36px;
  margin-bottom: .15rem;
  padding: .3rem .65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: .7rem;
  white-space: nowrap;
}
.listings-header .monitoring-strip {
  min-height: 22px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.listings-header .monitoring-dot { background: var(--status-new); }
.listings-header .monitoring-provider-count {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.listings-header .monitoring-provider-count::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--status-new);
}
.monitoring-strip-scan, .monitoring-metric { display: inline-flex; align-items: center; gap: .3rem; }
.monitoring-dot, .monitoring-metric i { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--accent-blue); }
.monitoring-healthy i { background: var(--status-new); }
.monitoring-attention { color: var(--status-changed); }
.monitoring-attention i { background: var(--status-changed); }
.monitoring-delayed { color: var(--status-removed); }
.monitoring-delayed i { background: var(--status-removed); }
.monitoring-strip-link { margin-left: auto; font-weight: 700; }
.header-actions { display: flex; align-items: center; gap: .45rem; }
.mobile-header-utilities { display: none; }
.mobile-admin-menu-toggle, .mobile-admin-menu { display: none; }
.brand { display: inline-flex; align-items: center; flex: none; min-width: 0; color: var(--text-primary); }
.brand:hover { color: var(--text-primary); }
.brand .brand-logo { display: block; width: auto; height: 60px; max-width: 100%; object-fit: contain; }
.brand .brand-logo-dark { display: none; }
html[data-theme="dark"] .brand .brand-logo-light { display: none; }
html[data-theme="dark"] .brand .brand-logo-dark { display: block; }

.site-nav { justify-content: flex-end; flex-wrap: wrap; gap: .1rem; min-width: 0; }
.site-nav > * { flex-shrink: 0; }
.header-primary .brand { max-width: 100%; }
.header-actions { flex-shrink: 0; }
.site-nav .theme-toggle { flex: 0 0 auto; margin-left: .4rem; }
.site-nav a, .site-nav .link {
  min-height: 38px;
  padding: .45rem .65rem;
  color: var(--text-primary);
  border-radius: 7px;
  font-size: .9rem;
  font-weight: 700;
}
.site-nav a:hover, .site-nav .link:hover { color: var(--accent-blue); background: var(--surface); }
.site-nav .admin-link { margin-left: .25rem; }
.locale-switcher { margin-left: .35rem; }
.locale-switcher a { min-height: auto; padding: .2rem; }
.locale-switcher a[aria-current="true"] { color: var(--text-primary); }

.menu-toggle {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card-bg);
  color: var(--text-primary);
}
.menu-toggle:hover { background: var(--surface); border-color: var(--accent-blue); color: var(--accent-blue); }
.menu-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu-toggle span { width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.theme-toggle {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-template-columns: repeat(2, 27px);
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 32px;
  min-height: 32px;
  padding: 2px 3px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-tertiary);
  vertical-align: middle;
  box-shadow: inset 0 1px 2px rgba(36, 54, 83, .06);
  cursor: pointer;
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.theme-toggle::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--card-bg);
  box-shadow: 0 1px 4px rgba(36, 54, 83, .18);
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1), background-color 220ms ease, box-shadow 220ms ease;
}
.theme-toggle span { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; color: var(--text-tertiary); transition: color 220ms ease; }
.theme-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-icon-sun { color: var(--accent-blue); }
.theme-toggle:hover { border-color: var(--accent-blue); box-shadow: inset 0 1px 2px rgba(36, 54, 83, .04); }
.theme-toggle:active::before { transform: scale(.92); }
.theme-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
:root[data-theme="dark"] .theme-toggle { border-color: var(--border); background: var(--surface); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
:root[data-theme="dark"] .theme-toggle::before { transform: translateX(27px); background: var(--accent-blue); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun { color: var(--text-tertiary); }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon { color: var(--button-ink); }
:root[data-theme="dark"] .theme-toggle:hover { border-color: var(--accent-blue); }
:root[data-theme="dark"] .theme-toggle:active::before { transform: translateX(27px) scale(.92); }


main { width: min(calc(100% - var(--content-gutter)), var(--content-max)); max-width: var(--content-max); margin: 1.25rem auto 0; padding: 0; }
.listing-shell {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.listing-overview {
  display: block;
  margin: 0 0 .55rem;
  padding: .45rem .65rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.dashboard-cards { display: grid; grid-template-columns: repeat(4, 1fr); }
.dashboard-cards > article { min-width: 0; padding: .1rem .5rem; border: 0; border-right: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
.dashboard-cards > article:last-child { border-right: 0; }
.dashboard-cards b {
  display: block;
  color: var(--text-primary);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 1.08rem;
  line-height: 1.1;
}
.dashboard-cards span { display: block; margin-top: .1rem; color: var(--text-secondary); font-size: .62rem; }
.dashboard-cards [data-metric="new"] b { color: var(--status-new); }
.dashboard-cards [data-metric="removed"] b { color: var(--status-removed); }

.listing-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
  margin-bottom: .65rem;
}
.listing-controls .filters { flex: 1 1 auto; min-width: 0; margin: 0; }
.listing-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}
.last-detection {
  flex: 0 0 auto;
  margin: 0;
  color: var(--text-secondary);
  font-size: .7rem;
  white-space: nowrap;
}
.last-detection strong { color: var(--text-primary); }
.filters-more-toggle { display: none; }
.advanced-filters { display: contents; }
@media (min-width: 761px) {
  #listing-filters .counted-filter { flex: 1 1 150px; width: 150px; min-width: 0; }
}
@media (max-width: 760px) {
  #listing-filters .counted-filter { width: 100%; min-width: 0; }
}
.filters-more-toggle {
  justify-content: center;
  text-align: center;
  min-height: 34px;
  padding: .4rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--filter-bg);
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: 700;
}
.filters-more-toggle::after { content: "+"; margin-left: .4rem; color: var(--accent-blue); font-size: 1rem; line-height: .7; }
.filters-more-toggle[aria-expanded="true"]::after { content: "−"; }
.filters-more-toggle:hover { border-color: var(--accent-blue); background: var(--filter-hover-bg); color: var(--accent-blue); }
.filters-more-toggle:active { transform: translateY(1px); }
.filters-more-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .75rem;
  padding: .2rem 0 .35rem;
  overflow: visible;
}
.filters > * { flex: 0 1 auto; width: auto; }
.filters select, .filters input {
  min-height: 34px;
  max-width: 170px;
  padding: .4rem 1.4rem;
  text-align: center;
  text-align-last: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--card-bg);
  color: var(--text-primary);
  font-size: .78rem;
}
.filters select { flex: 0 1 130px; min-width: 105px; }
.filters select[name="provider"] { flex-basis: 150px; min-width: 135px; }
.filters select[name="region"] { flex-basis: 130px; min-width: 115px; }
.filters select[name="postal_code"] { flex-basis: 110px; min-width: 95px; }
.filters select[name="rooms"] { flex-basis: 115px; min-width: 100px; }
.filters select[name="rent_range"] { flex-basis: 155px; min-width: 135px; max-width: 175px; }
.filters select[name="status"] { flex-basis: 120px; min-width: 105px; }
.filters select option { text-align: left; }
.counted-filter {
  position: relative;
  flex: 0 1 130px;
  min-width: 105px;
}
.counted-filter[data-filter-name="provider"] { flex-basis: 165px; min-width: 145px; }
.counted-filter[data-filter-name="region"] { flex-basis: 135px; min-width: 120px; }
.counted-filter[data-filter-name="location"] { flex-basis: 150px; min-width: 130px; }
.counted-filter[data-filter-name="postal_code"] { flex-basis: 115px; min-width: 100px; }
.counted-filter[data-filter-name="rooms"] { flex-basis: 120px; min-width: 105px; }
.counted-filter[data-filter-name="area_range"] { flex-basis: 145px; min-width: 125px; }
.counted-filter[data-filter-name="rent_range"] { flex-basis: 160px; min-width: 140px; }
.counted-filter[data-filter-name="status"] { flex-basis: 125px; min-width: 110px; }
.counted-filter-trigger {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 14px;
  align-items: center;
  gap: .45rem;
  width: 100%;
  min-height: 34px;
  padding: .4rem .65rem .4rem .85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--filter-bg);
  color: var(--text-primary);
  font-size: .78rem;
  text-align: center;
}
.counted-filter-trigger::before { content: ""; width: 14px; height: 14px; }
.counted-filter-trigger:hover,
.counted-filter-trigger[aria-expanded="true"] {
  border-color: var(--accent-blue);
  background: var(--filter-hover-bg);
  color: var(--text-primary);
}
.counted-filter-trigger:focus-visible {
  border-color: var(--accent-blue);
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}
.counted-filter-label { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.counted-filter-option-count {
  min-width: 24px;
  padding: .12rem .35rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-blue);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .68rem;
  text-align: center;
}
.counted-filter-trigger svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}
.counted-filter-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.counted-filter-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + .35rem);
  left: 0;
  width: max(100%, 230px);
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
.counted-filter-menu[hidden] { display: none; }
.counted-filter-menu-wide { width: 360px; }
.price-range-menu { width: 300px; padding: .75rem; }
.price-range-title { display: block; margin-bottom: .55rem; color: var(--text-primary); font-size: .78rem; }
.price-range-slider { position: relative; width: 100%; height: 34px; margin: 0 0 .4rem; }
.price-range-track {
  position: absolute;
  top: 15.5px;
  right: 0;
  left: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}
.price-range-track span { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: var(--accent-blue); }
.price-range-slider input[type="range"] {
  position: absolute;
  top: 7px;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 0;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  pointer-events: none;
}
.price-range-slider input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  border: 0;
  background: transparent;
}
.price-range-slider input[type="range"]::-moz-range-track {
  width: 100%;
  height: 3px;
  border: 0;
  background: transparent;
}
.price-range-slider input[type="range"]::-moz-range-progress { background: transparent; }
.price-range-slider input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7.5px;
  appearance: none;
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue);
  cursor: grab;
  pointer-events: auto;
}
.price-range-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue);
  cursor: grab;
  pointer-events: auto;
}
.price-range-slider input[type="range"]:focus-visible { outline: none; }
.price-range-slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus-ring); }
.price-range-slider input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--focus-ring); }
.price-range-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: .5rem; }
.price-range-fields label { min-width: 0; color: var(--text-secondary); font-size: .65rem; font-weight: 700; }
.price-range-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .25rem;
  min-height: 36px;
  margin-top: .2rem;
  padding: 0 .5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--filter-bg);
}
.price-range-input:focus-within { border-color: var(--accent-blue); box-shadow: inset 0 0 0 2px var(--focus-ring); }
.price-range-input i { color: var(--text-secondary); font-style: normal; font-size: .72rem; }
.price-range-input input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .76rem;
  text-align: right;
}
.price-range-separator { align-self: end; padding-bottom: .55rem; color: var(--text-secondary); }
.location-filter-menu { width: 410px; }
.location-filter-options { display: block; }
.location-filter-all { margin-bottom: .2rem; }
.location-filter-group { border-top: 1px solid var(--border); }
.location-filter-parent-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; }
.location-filter-parent { border-radius: 0; }
.location-filter-parent.is-partial .counted-filter-check {
  border-color: var(--accent-blue);
  background: linear-gradient(var(--accent-blue), var(--accent-blue)) center / 7px 2px no-repeat;
}
.location-filter-expand {
  display: grid;
  place-items: center;
  width: 32px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
}
.location-filter-expand:hover,
.location-filter-expand:focus-visible { border-color: transparent; background: var(--surface); color: var(--text-primary); }
.location-filter-expand svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 160ms ease; }
.location-filter-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.location-filter-children {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .2rem;
  padding: .1rem .25rem .45rem 1rem;
}
.location-filter-children[hidden] { display: none; }
.location-filter-children-label {
  grid-column: 1 / -1;
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.location-filter-child { min-width: 0; }
.location-filter-child[hidden], .location-filter-group[hidden], .location-browse-actions[hidden] { display: none; }
.location-municipality[hidden] { display: none; }
.location-municipality { grid-column: 1 / -1; }
.location-municipality.is-partial .counted-filter-check { background: linear-gradient(var(--accent-blue), var(--accent-blue)) center / 7px 2px no-repeat; }
.location-search-header { display: flex; gap: .4rem; padding: .4rem; }
.location-search-header input { min-width: 0; width: 100%; font-size: .85rem; }
.location-search-header button { padding: .3rem .7rem; font-size: 1.2rem; }
.location-filter-options[hidden], .location-search-results[hidden], .location-selected-chips[hidden] { display: none; }
.location-filter .location-search-header { position: relative; display: block; }
.location-filter .location-search-header input { display: block; width: 100%; max-width: none; min-width: 0; box-sizing: border-box; border-radius: 7px; padding-right: 2.2rem; background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border); box-shadow: none; }
.location-search-header input::-webkit-search-cancel-button { -webkit-appearance: none; }
.location-filter .location-search-header [data-location-clear] { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary); font-size: 1rem; box-shadow: none; }
.location-search-header [data-location-clear][hidden] { display: none; }
.location-filter .location-search-header [data-location-clear]:hover { color: var(--text-primary); background: var(--surface); }
.location-selected-chips { display: flex; flex-wrap: wrap; gap: .3rem; padding: .15rem .4rem .45rem; }
.location-selected-chips .applied-filter-chip { min-height: 28px; border: 0; padding: .2rem .5rem; }
.location-search-results { display: grid; gap: .15rem; }
.location-filter .location-search-result { grid-template-columns: minmax(0, 1fr) auto; }
.location-filter .counted-filter-option-label { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.location-browse-actions { display: flex; flex-wrap: wrap; gap: .3rem; grid-column: 1 / -1; }
.location-browse-actions button { font-size: .72rem; padding: .3rem .5rem; background: var(--surface); color: var(--text-primary); }
.location-browse-actions button[aria-pressed="true"] { border-color: var(--accent-blue); }
.location-browse-note, .location-filter-children > select { grid-column: 1 / -1; margin: .2rem 0; }
.location-filter-children .counted-filter-option-label { white-space: normal; font-size: .75rem; }
.location-filter-menu { max-height: min(650px, 75vh); overflow-y: auto; }
/* Bottom bar of the location dropdown: the "All districts and states" link on every screen,
   pinned so it stays visible while the list scrolls; the Apply button is phone-only. */
.location-picker-footer { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .6rem; border-top: 1px solid var(--border); background: var(--card-bg); }
.location-picker-footer button { display: none; }
.location-picker-footer:not(:has(a)) { display: none; }
.location-regions-link { color: var(--accent-blue); font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.location-regions-link:hover { text-decoration: underline; }
@media (max-width: 639px) {
  .location-filter .location-search-header input { font-size: 16px; }
  .location-filter .location-search-header { flex: 0 0 auto; }
  .location-picker-scroll { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
  .location-picker-footer { display: flex; flex: 0 0 auto; justify-content: space-between; position: static; padding: .5rem .25rem 0; border-top: 1px solid var(--border); background: var(--surface); }
  .location-picker-footer button { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem 1.1rem; border-radius: 8px; font-size: .85rem; }
  .search-console #listing-filters .location-filter .location-filter-menu:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
  .search-console #listing-filters .location-filter .location-filter-menu {
    position: fixed; inset: auto 0 0; width: 100%; max-width: 100%;
    max-height: 82dvh; height: 82dvh; transform: none !important;
    z-index: 1001; border-radius: 18px 18px 0 0;
    padding: .7rem .7rem max(.7rem, env(safe-area-inset-bottom));
    box-shadow: 0 -10px 50px #0005; background: var(--surface);
  }
  .location-search-header { position: sticky; top: -.7rem; background: var(--surface); z-index: 2; }
  body:has(.location-filter-menu:not([hidden])) { overflow: hidden; }
}
.counted-filter[data-filter-name="postal_code"] .counted-filter-menu { width: 330px; }
.counted-filter[data-filter-name="postal_code"] .counted-filter-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.counted-filter-options { display: grid; gap: .2rem; }
.counted-filter-options-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.counted-filter-option {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  width: 100%;
  min-height: 34px;
  padding: .35rem .4rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-primary);
  font-size: .76rem;
  text-align: left;
}
/* The provider search box hides non-matching options via the `hidden` attribute;
   without this, `display: grid` above (same specificity as the UA `[hidden]`
   rule, but from the author stylesheet) wins the tie and keeps them visible. */
.counted-filter-option[hidden] { display: none; }
.counted-filter-option:hover,
.counted-filter-option:focus-visible {
  border-color: transparent;
  background: var(--surface);
  color: var(--text-primary);
}
.counted-filter-option.is-empty:not(.is-selected),
.counted-filter-option:disabled,
.counted-filter-option:disabled:hover {
  border-color: transparent;
  background: var(--surface);
  color: var(--text-secondary);
  opacity: .72;
  filter: none;
  cursor: not-allowed;
}
.counted-filter-check {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.counted-filter-option.is-selected .counted-filter-check {
  border-color: var(--accent-blue);
  background: var(--accent-blue);
  box-shadow: inset 0 0 0 3px var(--card-bg);
}
.counted-filter-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.counted-filter-actions { display: flex; justify-content: flex-end; margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--border); }
.counted-filter-apply {
  min-height: 32px;
  padding: .35rem .8rem;
  border: 1px solid var(--accent-blue);
  border-radius: 8px;
  background: var(--accent-blue);
  color: var(--button-ink);
  font-size: .74rem;
  font-weight: 700;
}
.counted-filter-apply:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.advanced-filters .counted-filter:last-child .counted-filter-menu { right: 0; left: auto; }
.listing-controls .filters select:hover { border-color: var(--accent-blue); }
.listing-controls .filters select:focus,
.listing-controls .filters select:focus-visible {
  border-color: var(--accent-blue);
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}
.filters input { width: 120px; padding-right: .75rem; }
.filters .price-range-input input { width: 100%; padding: 0; }
.filters input::placeholder { color: var(--text-secondary); opacity: 1; }
.filter-submit {
  order: -1;
  min-height: 34px;
  gap: .35rem;
  padding: .4rem .85rem;
  border-color: var(--text-primary);
  border-radius: 999px;
  background: var(--text-primary);
  color: var(--bg);
  font-size: .78rem;
}
.filter-submit:hover { border-color: var(--accent-blue); background: var(--accent-blue); }
.filter-submit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.filter-reset {
  order: -1;
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 96px;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: .4rem .85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--filter-bg);
  color: var(--status-removed);
  font-size: .78rem;
  font-weight: 700;
}
.filter-reset:hover { color: var(--card-bg); background: var(--status-removed); }
.filter-reset::before { content: "×"; margin-right: .3rem; font-size: 1rem; line-height: .7; }
.filter-reset.is-disabled {
  opacity: .38;
  filter: blur(.25px);
  pointer-events: none;
  cursor: not-allowed;
}
.applied-filter-list {
  padding-inline: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 10px;
}
.applied-filter-list:not(:has(.applied-filter-chip)) .applied-filter-clear { display: none; }
.applied-filter-create-alert {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  margin-left: auto;
  padding: 4px 12px;
  border: 1px solid var(--accent-blue);
  border-radius: 999px;
  background: var(--accent-blue);
  color: var(--button-ink);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.pwa-install-control[hidden] { display: none; }
.listing-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-left: auto; }
.pwa-install-control { position: relative; flex: 0 0 auto; }
.pwa-install-action {
  display: inline-flex;
  min-width: 170px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  padding: .35rem .8rem;
  border: 1px solid var(--install-border);
  background: var(--install-bg);
  color: var(--install-ink);
  border-radius: 10px;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.pwa-install-action:hover { background: var(--install-hover-bg); color: var(--install-ink); }
.pwa-install-action:focus-visible { outline: 3px solid var(--install-focus); outline-offset: 2px; }
.pwa-install-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwa-install-tip {
  position: absolute;
  z-index: 30;
  top: calc(100% + .4rem);
  right: 0;
  width: min(260px, calc(100vw - 2rem));
  padding: .6rem .7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.4;
}
.applied-filter-create-alert:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--button-ink); }
.applied-filter-create-alert:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; color: var(--button-ink); }
@media (max-width: 639px) {
  body:has(.listing-shell .applied-filter-create-alert) main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .listing-shell .applied-filter-create-alert {
    position: fixed;
    z-index: 45;
    right: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 50%;
    width: min(calc(100% - 80px), 300px);
    min-height: 42px;
    justify-content: center;
    margin: 0;
    padding: 0 16px;
    /* Same look as the hero's "Alarm erstellen" on the desktop listing page:
       solid teal, bold light text and a soft teal shadow. */
    border: 1px solid var(--accent-blue);
    border-radius: 999px;
    background: var(--accent-blue);
    color: var(--button-ink);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--accent-blue) 24%, transparent);
    font-size: .82rem;
    font-weight: 700;
    transform: translateX(-50%);
  }
  .listing-shell .applied-filter-create-alert:hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: var(--button-ink);
  }
  .listing-shell .applied-filter-create-alert:active {
    transform: translateX(-50%) translateY(1px);
  }
}
.applied-filter-chip {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--filter-hover-bg);
  color: var(--text-primary);
  font-size: .7rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}
.applied-filter-chip:hover {
  background: var(--filter-hover-bg);
}
.applied-filter-chip:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.applied-filter-remove {
  color: var(--accent-blue);
  font-size: .9rem;
  font-weight: 700;
  line-height: .8;
}
/* Same content width as the listings page, so the shared filter bar fits one row. */
.notification-shell { max-width: none; }
.notification-guidance { margin-top: .8rem; color: var(--text-secondary); font-size: .8rem; line-height: 1.5; }
.notification-guidance p { margin: 0 0 .35rem; }
.notification-guidance ul { margin: 0; padding-left: 1.2rem; }
.notification-actions { display: grid; gap: 1.4rem; margin: 1.4rem 0 1rem; }
.notification-create-form { display: grid; gap: 1.4rem; margin: 0; }
.notification-step > form, .notification-connection form { margin: 0; }
.notification-step-title, .notification-step-title label { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 650; }
.notification-step-title { margin: 0 0 .7rem; }
.notification-step-number { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; border-radius: 50%; background: var(--border); color: var(--text-secondary); font-size: .75rem; }
.notification-step > input { width: min(100%, 420px); box-sizing: border-box; }
.notification-step > input:disabled { color: var(--text-secondary); background: var(--surface); border-color: var(--border); }
.notification-connect-button { display: inline-flex; align-items: center; gap: .5rem; }
.notification-connect-button svg { width: 18px; height: 18px; }
.notification-inline-note { display: flex; align-items: flex-start; gap: .35rem; margin-top: .45rem; font-size: .75rem; color: var(--text-secondary); }
.notification-inline-note svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.notification-guidance summary { cursor: pointer; padding-block: .4rem; }
.notification-guidance[open] summary { margin-bottom: .3rem; }
.notification-empty { padding: 1rem; border: 1px dashed var(--border); border-radius: 10px; color: var(--text-secondary); font-size: .85rem; }
.notification-actions p { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--text-secondary); }
.notification-connection { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; color: var(--text-secondary); font-size: .8rem; }
.notification-event-types { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.notification-event-type-option { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--text-primary); }
.notification-event-type-option input { width: 16px; height: 16px; accent-color: var(--accent-blue); }
.notification-shell .saved-searches-page { margin-top: 1rem; }
.listing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.listing-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.listing-column-item { min-width: 0; }
.listing-column-item > article > .listing-card-main,
.listing-column-item > details > summary > .listing-card-main {
  height: 155px;
  min-height: 155px;
  display: grid;
  grid-template-rows: 20px 22px 17px 80px 16px;
}
.listing-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: .5rem;
  min-width: 0;
  padding: 11px 13px 10px;
  overflow: hidden;
  border: 0;
  border-left: 3px solid var(--accent-blue);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.listing-card:hover { transform: translateY(-1px); box-shadow: 0 7px 24px rgba(36, 54, 83, .14); }
.listing-address-group { display: block; align-self: start; }
.listing-group-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 2px; }
.listing-group-title > h2 { margin: 0; }
.listing-unit-count { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 3px 8px; border-radius: 999px; background: #eae6d9; color: #4a4536; font-size: 9.5px; line-height: 1.2; font-weight: 750; letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; }
.listing-unit-count > svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .listing-unit-count { background: #2d2a1f; color: #c9bd8f; }
:root[data-theme="dark"] .listing-unit-count > svg { opacity: .88; }
.listing-address-group > summary .listing-card-main { min-width: 0; flex: 1; }
.listing-address-group > summary .listing-facts { flex-wrap: wrap; }
.listing-address-group > summary .listing-rent { white-space: normal; }
.listing-address-group > summary { display: flex; justify-content: space-between; align-items: stretch; gap: .5rem; cursor: pointer; list-style: none; }
.listing-address-group > summary::-webkit-details-marker { display: none; }
.listing-address-group > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.listing-address-group[open] > summary > .listing-card-aside > .listing-chevron { transform: rotate(90deg); }
.listing-address-group .listing-group-units { margin-top: .5rem; }
.listing-address-group .listing-group-units > .listing-card { border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: .65rem 0; background: transparent; }
.listing-address-group .listing-group-units > .listing-card:hover { transform: none; box-shadow: none; }
.listing-group-units .listing-location, .listing-group-units .listing-updated { display: none; }
.listing-group-units .listing-card-badges:empty { display: none; }
.listing-group-units .listing-facts { border-top: 0; margin-top: .35rem; padding-top: 0; }
.listing-address-group .listing-bulk-badge { background: var(--status-changed-bg); color: var(--warning-text); }
:root[data-theme="dark"] .listing-card:hover { box-shadow: 0 7px 25px rgba(0, 0, 0, .38); }
.listing-card.status-new { border-left-color: var(--status-new); }
.listing-card.status-changed { border-left-color: var(--status-changed); }
.listing-card.status-reappeared { border-left-color: var(--status-changed); }
.listing-card.status-removed { border-left-color: var(--status-removed); }
.listing-card.status-unknown { border-left-color: var(--status-changed); }
.listing-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.listing-card-main { flex: 1 1 auto; min-width: 0; }
.listing-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 7px; }
.listing-status {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-blue);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.listing-status.status-new { background: var(--status-new-bg); color: var(--status-new); }
.listing-status.status-changed { background: var(--status-changed-bg); color: var(--status-changed); }
.listing-status.status-reappeared, .listing-status.status-unknown { background: var(--status-changed-bg); color: var(--status-changed); }
.listing-status.status-removed { background: var(--status-removed-bg); color: var(--status-removed); }
.just-detected {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--just-detected-bg);
  color: var(--just-detected);
  font-size: 9.5px;
  font-weight: 700;
}
.just-detected i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: just-detected-pulse 1s ease-in-out infinite alternate;
}
@keyframes just-detected-pulse { from { opacity: 1; } to { opacity: .3; } }
.listing-card h2 {
  margin: 0 0 2px;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 14.5px;
  line-height: 1.3;
  letter-spacing: 0;
}
.listing-location, .listing-updated { margin: 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.3; }
.listing-location { margin-bottom: 8px; }
.listing-location-primary { color: var(--text-primary); font-weight: 600; }
/* Each card is a size container, so its spec row can adapt to the card's own width. */
.listing-card { container: listing-card / inline-size; }
/* min-width: 0 keeps a long unbreakable value from widening the card's grid column. */
.listing-card .listing-facts { min-width: 0; }
/* Card bottom: one spec row, rent · contribution · rooms · area, as labelled columns.
   Equal columns line up across the cards of the grid (a column only widens for an unusually
   long value). Labels and values in regular weight, all values in the same colour. */
.listing-facts.listing-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(min-content, 1fr));
  margin: 0;
  padding: 8px 0 0; /* reset the generic dl card styles (app.css) */
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--border);
  line-height: 1.2;
}
.listing-spec { min-width: 0; padding: 0 8px; border-left: 1px solid var(--border); }
.listing-spec:first-child { padding-left: 0; border-left: 0; }
.listing-spec dt {
  margin: 0 0 3px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.listing-spec dd {
  margin: 0;
  color: var(--text-primary);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}
.listing-spec dd small { display: inline; margin: 0; color: var(--text-secondary); font-family: inherit; font-size: 11px; font-weight: 400; }
.listing-updated { margin-top: .1875rem; color: var(--text-tertiary); font-size: .6875rem; }
.listing-card-aside { display: flex; flex: 0 0 18px; flex-direction: column; align-items: flex-end; justify-content: space-between; min-width: 18px; }
.listing-chevron { width: 18px; height: 18px; fill: none; stroke: var(--text-tertiary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.listing-secondary { text-align: right; }
.listing-secondary strong { display: block; color: var(--text-primary); font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; font-size: .9375rem; }
.listing-secondary small { display: block; margin: 0; color: var(--text-tertiary); font-size: .7rem; }
.listing-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.35rem 0 .75rem; }
.listing-section-heading h2 { margin: 0; color: var(--text-secondary); font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; }
.listing-sort-note { color: var(--text-secondary); font-size: .78rem; }
.listing-sort { margin-left: auto; }
.listing-sort-select { min-width: 170px; min-height: 36px; padding: .35rem 2rem .35rem .8rem; color: var(--text-primary); background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: .78rem; }
.listing-sort-select:hover { border-color: var(--accent-blue); }
.listing-empty { grid-column: 1 / -1; padding: 2.5rem 1rem; border: 1px dashed var(--border); border-radius: 12px; color: var(--text-secondary); text-align: center; }
.listing-refresh-note { margin: 1rem 0 0; color: var(--text-tertiary); font-size: .68rem; text-align: center; }

.pagination { color: var(--text-secondary); font-size: .8rem; }
.pagination .button { min-height: 34px; padding: .4rem .75rem; border-radius: 8px; background: var(--accent-blue); }

.cards article, article, .login, dl, .table { background: var(--card-bg); border-color: var(--border); box-shadow: var(--card-shadow); }
.table { border-color: var(--border); }
.notification-failure-panel { margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.notification-failure-panel > summary { cursor: pointer; color: var(--text-primary); font-weight: 750; }
.notification-failure-panel[open] > summary { margin-bottom: .85rem; }
.notification-failure-panel h3 { margin: 1rem 0 .55rem; font-size: .9rem; }
.notification-root-cause { margin: 0 0 .75rem; padding: .7rem .8rem; border-left: 4px solid var(--status-changed); border-radius: 8px; color: var(--text-primary); background: var(--status-changed-bg); }
.notification-root-cause span { color: var(--text-secondary); font-size: .8rem; }
.notification-failure-table code { color: var(--status-changed); font-size: .75rem; }
.notification-failure-table small { display: block; margin-top: .15rem; color: var(--text-secondary); }
.monitoring-heading { margin-bottom: .75rem; }
.monitoring-heading-actions { display: flex; align-items: center; gap: .55rem; }
.live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 30px;
  padding: .3rem .75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--status-new-bg);
  color: var(--status-new);
  font: inherit;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
}
.applied-filter-caption, .applied-filter-clear { color: var(--text-secondary); font-size: .75rem; }
.applied-filter-clear { margin-left: .25rem; text-decoration: underline; text-underline-offset: .15rem; }
.applied-filter-clear:hover { color: var(--accent-blue); }
.applied-filter-clear:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 3px; }

.listing-live-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; min-width: 0; }
.listing-status-panel { gap: 0; padding: 0 .3rem; border-radius: 12px; background: var(--status-new-bg); font-size: .72rem; }
.listing-status-panel .live-status-pill { background: transparent; min-height: 28px; padding: .15rem .45rem; font-size: inherit; }
.listing-status-metrics { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; padding: .15rem .45rem; }
.listing-status-scanned { color: var(--text-secondary); }
.listing-status-providers { display: inline-flex; align-items: center; gap: .4rem; border-left: 1px solid var(--border); padding-left: .65rem; color: var(--status-new); text-decoration: none; }
.listing-status-providers:hover { text-decoration: underline; }
.listing-status-providers.needs-attention { color: var(--status-changed); }
@media (min-width: 761px) {
  .listing-status-metrics { border-left: 1px solid var(--border); }
}
@media (max-width: 760px) {
  .listing-status-panel { width: 100%; grid-column: 1 / -1; flex-wrap: nowrap; box-sizing: border-box; }
  .listing-status-panel .listing-status-metrics { flex: 1; justify-content: space-between; font-size: clamp(.6rem, 2.5vw, .72rem); gap: .25rem; }
  .listing-status-panel .listing-status-providers { padding-left: .35rem; gap: .2rem; }
  .listing-status-panel .live-status-pill small { display: inline; }
}
.live-status-pill:hover { border-color: var(--status-new); }
.live-status-pill:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.live-status-pill small { margin-left: .35rem; color: var(--text-secondary); font-size: .75rem; font-weight: 500; }
.live-status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: currentColor;
  animation: live-status-pulse 3s ease-in-out infinite;
}
.live-status-pill.is-paused { border-color: var(--border); background: var(--surface); color: var(--text-secondary); }
.live-status-pill.is-paused .live-status-dot { animation: none; }
.listing-shell .live-status-dot { width: 8px; height: 8px; margin-inline: 4px; animation: none; }
.listing-shell .live-status-dot::before,
.listing-shell .live-status-dot::after {
  content: ''; position: absolute; inset: -1px; border: 1px solid currentColor;
  border-radius: 50%; pointer-events: none; opacity: 0;
  animation: live-radar-ripple 3.6s ease-out infinite;
}
.listing-shell .live-status-dot::after { animation-delay: 1.8s; }
.listing-shell .is-paused .live-status-dot::before,
.listing-shell .is-paused .live-status-dot::after,
.listing-shell .is-reconnecting .live-status-dot::before,
.listing-shell .is-reconnecting .live-status-dot::after { animation: none; opacity: 0; }
@keyframes live-radar-ripple {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(2.5); opacity: 0; }
}
.live-status-pill.is-reconnecting { border-color: var(--status-changed); background: var(--status-changed-bg); color: var(--status-changed); }
@keyframes live-status-pulse {
  0%, 100% { opacity: .65; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.08); }
}
.badge.running { color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 12%, var(--card-bg)); }
.provider-health-item.health-running { border-left: 3px solid var(--accent-blue); }
.monitoring-overview-strip { margin-bottom: .55rem; }
.monitoring-listing-overview { margin-bottom: .65rem; }
.monitoring-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin: 0 0 .7rem; }
.monitoring-summary article { min-height: 0; padding: .85rem 1rem; border-top-width: 1px; }
.system-summary-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.monitoring-summary .system-summary-heading h2 { margin: 0; }
.system-health-dot { display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--health-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--health-color) 14%, transparent); }
.system-health-dot.is-healthy { --health-color: #24966c; }
.system-health-dot.is-warning { --health-color: #d7a315; }
.system-health-dot.is-failed { --health-color: #dc5050; }
.monitoring-summary .system-components { display: flex; gap: 1rem; flex-wrap: wrap; }
.system-components > span { display: inline-flex; align-items: center; gap: .4rem; }
.system-components .system-health-dot { width: 6px; height: 6px; flex-basis: 6px; box-shadow: none; }
.monitoring-summary article h2 { margin: 0 0 .35rem; font-size: .82rem; }
.monitoring-summary .badge { margin: 0 0 .3rem; font-size: .7rem; }
.monitoring-summary small { display: block; color: var(--text-secondary); font-size: .68rem; line-height: 1.35; }
.monitoring-panel { margin: 0 0 .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); box-shadow: var(--card-shadow); overflow: clip; }
.monitoring-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 42px; padding: .55rem .75rem; color: var(--text-primary); font-size: .82rem; font-weight: 750; cursor: pointer; list-style-position: inside; }
.monitoring-panel > summary:hover { background: var(--surface); }
.monitoring-panel[open] > summary { border-bottom: 1px solid var(--border); }
.monitoring-panel-summary-meta { color: var(--text-secondary); font-size: .68rem; font-weight: 500; text-align: right; }
.compact-monitoring-details { gap: .6rem; margin: 0; padding: .65rem; }
.compact-monitoring-details article { padding: .7rem; }
.compact-monitoring-details h2 { margin-bottom: .45rem; font-size: .82rem; }
.compact-monitoring-details dl { grid-template-columns: minmax(110px, .8fr) 1.2fr; gap: .25rem .6rem; font-size: .72rem; }
.provider-health-list { padding: .45rem; }
.provider-health-item { margin-bottom: .35rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); overflow: clip; }
.provider-health-item:last-child { margin-bottom: 0; }
.provider-health-item > summary { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(110px, .75fr) minmax(180px, 1fr) minmax(190px, 1.1fr) minmax(130px, .8fr); align-items: center; gap: .55rem; min-height: 48px; padding: .45rem .65rem; color: var(--text-primary); font-size: .72rem; cursor: pointer; list-style-position: inside; }
.provider-health-item > summary:hover { background: var(--card-bg); }
.provider-health-item > summary small, .provider-health-name small { display: block; margin-top: .12rem; color: var(--text-secondary); font-size: .62rem; }
.provider-health-item.health-warning { border-left: 3px solid var(--status-changed); }
.provider-health-item.health-failed { border-left: 3px solid var(--status-removed); }
.provider-health-item.health-healthy { border-left: 3px solid var(--status-new); }
.provider-health-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: .75rem; padding: .65rem; border-top: 1px solid var(--border); background: var(--card-bg); }
.provider-health-details dl { grid-template-columns: minmax(105px, .65fr) 1.35fr; gap: .25rem .5rem; margin: 0; padding: 0; border: 0; box-shadow: none; font-size: .7rem; }
.provider-health-action { display: flex; align-items: center; }
.provider-run-button { min-width: 92px; white-space: nowrap; }
.notification-delivery-content, .crawl-log-content { padding: .7rem; }
.notification-delivery-content h3 { margin: .75rem 0 .45rem; font-size: .82rem; }
.notification-delivery-table { min-width: 900px; }
.notification-failure-summary { margin-top: .65rem; padding: .55rem; border: 1px solid var(--border); border-radius: 8px; }
.notification-failure-summary > summary { cursor: pointer; color: var(--text-primary); font-size: .75rem; font-weight: 700; }
.monitoring-generated-at { margin-top: .65rem; font-size: .68rem; text-align: right; }
th { color: var(--text-primary); background: var(--surface); }
th, td { border-bottom-color: var(--border); }
tbody tr:hover td { background: var(--surface); }
input, select { color: var(--text-primary); background: var(--card-bg); border-color: var(--border); }
footer { border-top-color: var(--border); color: var(--text-secondary); }

/* Admin pages (Analytics, Alert overview) use the full content width, like Monitoring. */
.statistics-page { margin-inline: auto; }
.statistics-heading { margin-bottom: 1rem; }
.statistics-heading h1 { margin-bottom: .25rem; }
.statistics-heading p { margin: 0; }
.statistics-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.statistics-tiles article {
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
.statistics-tiles b {
  display: block;
  color: var(--text-primary);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 1.45rem;
  line-height: 1.1;
}
.statistics-tiles span { display: block; margin-top: .3rem; color: var(--text-secondary); font-size: .78rem; }
.statistics-ranking { margin-top: 1.25rem; }
.statistics-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.statistics-section-heading h2 { margin: 0; font-size: 1rem; }
.statistics-section-heading span { color: var(--text-secondary); font-size: .72rem; }
.statistics-ranking ol { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); box-shadow: var(--card-shadow); list-style: none; }
.statistics-ranking li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.statistics-ranking li:last-child { border-bottom: 0; }
.statistics-ranking li > div { min-width: 0; }
.statistics-ranking li strong { display: block; overflow-wrap: anywhere; color: var(--text-primary); font-size: .86rem; }
.statistics-ranking li span { display: block; margin-top: .15rem; overflow-wrap: anywhere; color: var(--text-secondary); font-size: .72rem; }
.statistics-ranking li > b { flex: 0 0 auto; color: var(--text-primary); font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; }
.statistics-ranking .statistics-empty { display: block; color: var(--text-secondary); text-align: center; }
.statistics-note { margin: .8rem 0 0; color: var(--text-tertiary); font-size: .7rem; }

.saved-searches-page { max-width: 980px; margin-inline: auto; }
.saved-searches-heading { margin-bottom: 1rem; }
.saved-searches-heading h1 { margin-bottom: .25rem; }
.saved-searches-heading p { margin: 0; color: var(--text-secondary); }
.saved-search-panel { padding: 1.25rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.saved-search-panel h2 { margin: 0 0 1rem; font-size: 1rem; }
.saved-search-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.saved-search-form label { min-width: 0; font-size: .78rem; }
.saved-search-form .field-wide { grid-column: span 2; }
.saved-search-form input, .saved-search-form select { min-width: 0; color: var(--text-primary); background: var(--card-bg); border-color: var(--border); }
.saved-search-form .notification-filter-select { width: 100%; min-height: 34px; padding: .4rem 1.4rem; text-align: center; text-align-last: center; border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; }
.saved-search-form .notification-filter-select option { text-align: left; }
.saved-search-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.saved-search-actions button { min-width: 150px; }
.saved-search-notice, .saved-search-empty { padding: 1rem; border: 1px dashed var(--border); border-radius: 10px; color: var(--text-secondary); background: var(--surface); }
.saved-search-list { margin-top: 1.5rem; }
.saved-search-list > h2 { margin-bottom: .75rem; font-size: 1rem; }
.saved-search-card { margin-bottom: .75rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-left: 4px solid var(--accent-blue); border-radius: 10px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.saved-search-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.saved-search-card-heading h3 { margin: 0; font-size: 1rem; }
.saved-search-card-heading p { margin: .2rem 0 0; color: var(--text-secondary); font-size: .78rem; }
.saved-search-card-heading form { margin: 0; }
.saved-search-remove { min-height: 34px; padding: .4rem .75rem; border-color: var(--status-removed); color: var(--status-removed); background: transparent; font-size: .76rem; }
.saved-search-remove:hover { border-color: var(--status-removed); color: var(--status-removed); background: var(--status-removed-bg); }
.saved-search-criteria { display: flex; flex-wrap: wrap; gap: .45rem; margin: .85rem 0 0; padding: 0; }
.saved-search-criteria div { display: inline-flex; gap: .3rem; padding: .3rem .55rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .75rem; }
.saved-search-criteria dt { color: var(--text-secondary); font-weight: 600; }
.saved-search-criteria dt::after { content: ":"; }
.saved-search-criteria dd { margin: 0; color: var(--text-primary); }

@media (max-width: 760px) {
  .saved-search-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .statistics-tiles article { padding: .8rem; }
  .statistics-tiles b { font-size: 1.2rem; }
  .statistics-ranking li { padding: .7rem .8rem; }
  .saved-search-panel { padding: 1rem; }
  .saved-search-form { grid-template-columns: 1fr; }
  .saved-search-form .field-wide { grid-column: auto; }
  .saved-search-actions button { width: 100%; }
  .saved-search-card-heading { align-items: stretch; flex-direction: column; }
  .saved-search-remove { width: 100%; }
}
.legal-page article, .legal-document { border-radius: 10px; background: var(--card-bg); box-shadow: var(--card-shadow); }
/* German compounds ("Datenschutzerklärung") are wider than a small phone: hyphenate, and break a long word (a URL) as a last resort. */
.legal-page article, .legal-document { overflow-wrap: anywhere; hyphens: auto; }
.login-page { background: var(--bg); }
.login-page .login {
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-blue);
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
.login-brand { justify-content: center; margin: 0 auto 1rem; }
.login-page footer { background: transparent; }

button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--focus-ring); }

@media (min-width: 1380px) {
  :root { --content-max: 1280px; }
  .listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .site-header { padding: .35rem 0; }
  .site-header-inner { grid-template-columns: 1fr; gap: .35rem; }
  .listings-header .site-header-inner { grid-template-columns: 1fr; gap: .35rem; }
  .site-nav { justify-content: flex-start; width: 100%; overflow-x: auto; border-top: 1px solid var(--border); padding-top: .35rem; }
  .site-nav a, .site-nav .link { white-space: nowrap; }
  .listing-controls { align-items: flex-end; flex-direction: column-reverse; gap: .3rem; }
  .listing-controls .filters { width: 100%; }
  .monitoring-heading { align-items: flex-start; flex-direction: column; }
  .monitoring-heading-actions { justify-content: space-between; width: 100%; }
  .live-status-pill small { display: none; }
  .listing-meta { justify-content: flex-end; width: 100%; }
}

@media (max-width: 639px) {
  .listing-grid { grid-template-columns: 1fr; }
  .listing-column { display: contents; }
}

@media (max-width: 639px) {
  html.mobile-filter-panel-open,
  body.mobile-filter-panel-open { overflow: hidden; overscroll-behavior: none; }
  .last-detection { padding-right: .1rem; font-size: .64rem; }
  .site-header {
    --mobile-header-row-height: 70px;
    position: relative;
    min-height: auto;
    padding: .35rem 0 0;
    border-bottom: 0;
  }
  .site-header { position: sticky; z-index: 50; top: 0; }
  .site-header::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(4px + .35rem + var(--mobile-header-row-height));
    right: 0;
    left: 0;
    height: 1px;
    background: var(--border);
    pointer-events: none;
  }
  .listings-header::after { top: calc(.35rem + var(--mobile-header-row-height)); }
  .site-header-inner, .listings-header .site-header-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: min(100% - 1.25rem, 420px); min-height: 0; }
  .header-primary { grid-column: 1; grid-row: 1; }
  .site-header > .site-header-inner > .mobile-header-utilities { grid-column: 1; grid-row: 1; z-index: 2; align-self: center; justify-self: end; }
  .header-primary { align-items: center; width: 100%; min-height: var(--mobile-header-row-height); gap: .75rem; }
  .listings-header .header-primary { gap: 0; }
  .header-primary .brand { flex: 0 1 auto; }
  .menu-toggle { display: none; }
  .site-nav { display: flex; align-items: center; align-content: center; flex-wrap: wrap; gap: .1rem; min-height: 56px; margin-top: 0; padding-block: .5rem; border-top: 0; overflow: visible; }
  .site-nav.is-open { display: flex; }
  .listings-header .monitoring-strip {
    display: flex;
    justify-content: flex-start;
    gap: .25rem .5rem;
    min-height: 24px;
    margin: .15rem 0;
    padding: 0;
    font-size: .64rem;
  }
  .monitoring-strip-link { display: none; }
  .monitoring-strip-scan, .monitoring-metric { min-width: 0; }
  .monitoring-strip-scan span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .monitoring-overview-strip { flex-wrap: wrap; justify-content: flex-start; }
  .monitoring-overview-strip .monitoring-provider-count { margin-right: auto; }
  .monitoring-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitoring-panel > summary { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .monitoring-panel-summary-meta { text-align: left; }
  .provider-health-item > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .provider-health-item > summary > span:nth-child(n+3) { display: none; }
  .provider-health-details { grid-template-columns: 1fr; }
  .provider-health-action { justify-content: flex-end; }
  .compact-monitoring-details { grid-template-columns: 1fr; }
  .site-header .site-nav {
    min-height: 64px;
    max-height: 260px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 230ms ease, min-height 230ms ease, opacity 130ms ease 100ms, padding 230ms ease;
  }
  .site-header .site-nav[data-anonymous="true"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 32px;
    gap: 0;
    height: 40px;
    min-height: 40px;
    padding-block: 4px;
    box-sizing: border-box;
    align-items: center;
    align-content: center;
  }
  .site-header .site-nav[data-anonymous="true"] > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: .2rem .25rem;
    text-align: center;
  }
  .site-header .site-nav:not([data-anonymous="true"]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 32px;
    gap: 0;
    height: 40px;
    min-height: 40px;
    padding-block: 4px;
    box-sizing: border-box;
  }
  .site-header .site-nav:not([data-anonymous="true"]) > a,
  .site-header .site-nav:not([data-anonymous="true"]) > form { min-width: 0; }
  .site-header .site-nav:not([data-anonymous="true"]) > a,
  .site-header .site-nav:not([data-anonymous="true"]) .link {
    justify-content: center;
    width: 100%;
    padding-inline: .35rem;
    text-align: center;
    white-space: normal;
  }
  .site-header .site-nav:not([data-anonymous="true"]) > a:nth-child(1) { grid-column: 1; grid-row: 1; }
  .site-header .site-nav:not([data-anonymous="true"]) > a:nth-child(2) { grid-column: 2; grid-row: 1; }
  .site-header .site-nav:not([data-anonymous="true"]) > .mobile-overflow-nav { display: none; }
  .site-header .site-nav[data-anonymous="true"] > a:first-child { grid-column: 1; grid-row: 1; }
  .site-header .site-nav[data-anonymous="true"] > a:nth-child(2) { grid-column: 2; grid-row: 1; }
  .site-header .site-nav > .locale-switcher,
  .site-header .site-nav > .theme-toggle { display: none; }
  .site-header .site-nav[data-anonymous="true"] .admin-link {
    grid-column: 3;
    grid-row: 1;
    justify-self: stretch;
    margin-left: 0;
    text-align: center;
  }
  .site-header .mobile-header-utilities {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
  }
  .site-header .mobile-header-utilities .locale-switcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
  }
  .site-header .mobile-header-utilities .locale-switcher a {
    padding: .2rem;
    color: var(--text-primary);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
  }
  .site-header .mobile-header-utilities .locale-switcher a:hover { color: var(--accent-blue); }
  .site-header .mobile-admin-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    gap: 3px;
    border: 0;
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-primary);
  }
  .site-header .mobile-admin-menu-toggle span { width: 15px; height: 2px; border-radius: 2px; background: currentColor; }
  .site-header .mobile-admin-menu-toggle:hover,
  .site-header .mobile-admin-menu-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-blue); }
  .site-header .mobile-admin-menu-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
  .site-header .mobile-admin-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + .35rem);
    right: .625rem;
    display: none;
    width: min(260px, calc(100vw - 1.25rem));
    padding: .35rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
  }
  .site-header .mobile-admin-menu.is-open { display: grid; }
  .site-header .mobile-admin-menu a,
  .site-header .mobile-admin-menu .link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: .55rem .7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: .84rem;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
  }
  .site-header .mobile-admin-menu a:hover,
  .site-header .mobile-admin-menu .link:hover { background: var(--surface); color: var(--accent-blue); }
  .site-header .mobile-admin-menu form { margin: 0; border-top: 1px solid var(--border); }
  .listings-header .site-nav {
    max-height: 180px;
  }
  .listings-header .menu-toggle {
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(.96);
    transition: opacity 100ms ease, transform 230ms ease, visibility 0s linear 100ms;
  }
  .listings-header .listing-controls {
    width: 100%;
    max-height: 240px;
    margin: 0;
    padding-bottom: .5rem;
    opacity: 1;
    overflow: hidden;
    transition: max-height 230ms ease, opacity 200ms ease, padding 230ms ease;
  }
  .mobile-header-collapsed .site-header .site-nav,
  .mobile-listing-chrome-collapsed .listings-header .site-nav {
    min-height: 0;
    max-height: 0;
    padding-block: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 230ms ease, min-height 230ms ease, opacity 180ms ease, padding 230ms ease;
  }
  .mobile-listing-chrome-collapsed .listings-header .listing-controls {
    max-height: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
  }
  .mobile-header-collapsed .site-header .menu-toggle,
  .mobile-listing-chrome-collapsed .listings-header .menu-toggle {
    display: inline-flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition: opacity 100ms ease 180ms, transform 230ms ease 180ms, visibility 0s;
  }
  .mobile-header-collapsed .site-header .mobile-header-utilities,
  .mobile-listing-chrome-collapsed .listings-header .mobile-header-utilities { display: none; }
  .site-nav .admin-link { margin-left: auto; }
  main { width: min(100% - 1.25rem, 420px); margin-top: .65rem; }
  body:has(.site-nav[data-anonymous="true"]) main { margin-top: 0; }
  .listing-overview { padding: .45rem .3rem; }
  .dashboard-cards > article { padding-inline: .2rem; }
  .dashboard-cards b { font-size: 1rem; }
  .dashboard-cards span { font-size: .56rem; line-height: 1.2; }
  .listing-section-heading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .listing-section-heading h2 { align-self: center; }
  .listing-sort, .listing-sort-note { justify-self: end; text-align: right; }
  .listing-sort-select { width: min(180px, 100%); min-width: 0; }
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: 0; padding: 0; overflow: visible; }
  .filters > *, .filters select, .filters select[name], .filters input, .counted-filter { width: 100%; max-width: none; min-width: 0; }
  .filters select, .filters input, .filter-submit, .filter-reset, .filters-more-toggle, .counted-filter-trigger { min-height: 34px; font-size: .72rem; }
  .filter-reset { order: initial; justify-content: center; padding-inline: .55rem; }
  .filters-more-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .advanced-filters {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    padding: .5rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
  }
  .advanced-filters.is-open { display: grid; }
  /* Every filter cell is already a full-width row on mobile (see .filters below),
     so each dropdown just matches its own trigger's full width -- not the 2x-width
     popover this used to need back when filters sat two-to-a-row in a grid. */
  .counted-filter-menu { width: 100%; max-width: 100%; }
  .counted-filter[data-filter-name="provider"] .counted-filter-menu { right: 0; left: auto; }
  .counted-filter[data-filter-name="region"] .counted-filter-menu { right: auto; left: 0; }
  .counted-filter[data-filter-name="location"] .counted-filter-menu { right: auto; left: 0; }
  .location-filter-children { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counted-filter[data-filter-name="postal_code"] .counted-filter-menu { right: auto; left: 0; }
  .counted-filter[data-filter-name="postal_code"] .counted-filter-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counted-filter[data-filter-name="rooms"] .counted-filter-menu,
  .counted-filter[data-filter-name="rent_range"] .counted-filter-menu { right: 0; left: auto; }
  .counted-filter[data-filter-name="area_range"] .counted-filter-menu,
  .counted-filter[data-filter-name="status"] .counted-filter-menu { right: auto; left: 0; }
  .counted-filter-options-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listings-header .listing-controls.has-open-filter { max-height: 620px; overflow: visible; }
  .listings-header .listing-controls.has-open-filter .counted-filter-menu:not([hidden]) {
    display: flex;
    flex-direction: column;
    max-height: var(--mobile-filter-menu-max-height, calc(100dvh - 8px));
    overflow: hidden;
  }
  .listings-header .listing-controls.has-open-filter .counted-filter-options {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .listings-header .listing-controls.has-open-filter .counted-filter-actions { flex: 0 0 auto; }
  .listing-grid { gap: 10px; }
  .listing-card { gap: .5rem; padding: 11px 13px 10px; }
  .listing-card h2 { font-size: 14.5px; }
  .listing-facts { gap: .5rem; }
  .pagination { flex-wrap: wrap; justify-content: center; text-align: center; }
}

@media (max-width: 360px) {
  .theme-toggle { width: 62px; height: 32px; min-height: 32px; grid-template-columns: repeat(2, 27px); }
  .menu-toggle { width: 36px; height: 36px; min-height: 36px; }
  .listing-card-aside { min-width: 18px; }
  .listing-location { overflow-wrap: anywhere; }
}

.mobile-results-count { display: none; }
.mobile-scan-time, .mobile-provider-health { display: none; }
@media (min-width: 640px) {
  .listing-shell .listing-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem 1rem; }
  .listing-section-heading .listing-status-panel { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
  .listing-status-panel .listing-status-scanned, .listing-status-panel .desktop-provider-health { display: none; }
  .listing-status-panel .mobile-scan-time, .listing-status-panel .mobile-provider-health { display: inline; }
  .listing-status-panel .listing-status-metrics { flex: 1; min-width: 0; border-left: 0; flex-wrap: nowrap; }
  .listing-status-panel .listing-status-metrics::before { content: '·'; color: var(--text-secondary); }
  .listing-status-panel .listing-status-providers { margin-left: auto; border-left: 0; text-align: right; }
  .listing-section-heading .mobile-results-count { display: block; color: var(--text-secondary); font-size: .78rem; }
  .listing-section-heading .listing-sort { justify-self: end; margin: 0; }
}
@media (max-width: 639px) {
  .listing-status-panel .listing-status-scanned, .listing-status-panel .desktop-provider-health { display: none; }
  .listing-status-panel .mobile-scan-time, .listing-status-panel .mobile-provider-health { display: inline; }
  .listing-status-panel { font-size: .72rem; padding-inline: .3rem; }
  .listing-status-panel .live-status-pill { padding-inline: .25rem; gap: .25rem; }
  .listing-status-panel .listing-status-metrics { flex-wrap: nowrap; min-width: 0; padding-inline: 0; gap: .25rem; justify-content: flex-start; font-size: clamp(.6rem, 2.5vw, .72rem); }
  .listing-status-panel .listing-status-metrics::before { content: '·'; color: var(--text-secondary); }
  .listing-status-panel .listing-status-providers { border-left: 0; padding-left: .25rem; gap: .2rem; margin-left: auto; text-align: right; }
  .monitoring-heading-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .monitoring-heading-actions .pwa-install-control,
  .monitoring-heading-actions .pwa-install-action,
  body { --mobile-content-width: min(calc(100% - 1.25rem), 420px); --mobile-section-gap: .65rem; }
  .site-header-inner, .listings-header .site-header-inner, main { width: var(--mobile-content-width); box-sizing: border-box; }
  main { margin-top: var(--mobile-section-gap); }
  .listing-shell, .listing-controls, .listing-grid { min-width: 0; }
  .listings-header .listing-controls { box-sizing: border-box; padding-inline: 0; }
  .listing-shell .listing-section-heading { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: .45rem; margin: 0 0 var(--mobile-section-gap); }
  .listing-section-heading .listing-status-panel { grid-column: 1 / -1; min-width: 0; margin: 0; }
  .mobile-results-count { display: block; min-width: 0; color: var(--text-secondary); font-size: .75rem; overflow-wrap: anywhere; }
  .listing-heading-actions { grid-column: 2; display: block; width: 100%; margin: 0; }
  .listing-section-heading .listing-sort { position: relative; grid-column: auto; display: block; width: 100%; min-width: 0; max-width: none; margin: 0; }
  .listing-section-heading .listing-sort::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .75rem;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text-primary);
    border-bottom: 1.5px solid var(--text-primary);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }
  .listing-sort .listing-sort-select { width: 100%; min-width: 0; box-sizing: border-box; }
  .pwa-install-tip {
    position: fixed;
    z-index: 200;
    top: auto;
    right: auto;
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: 50%;
    width: min(calc(100vw - 2rem), 360px);
    box-sizing: border-box;
    padding: .85rem 1rem;
    transform: translateX(-50%);
    border-color: var(--install-border);
    background: var(--install-bg);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .22);
    color: var(--install-ink);
    font-size: .82rem;
  }
  .listing-sort .listing-sort-select {
    -webkit-appearance: none;
    appearance: none;
    max-width: none;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin: 0;
    padding: 0 1.7rem 0 .65rem;
    line-height: 1;
    font-size: .72rem;
  }
  .listing-shell .applied-filter-list { margin: 0 0 var(--mobile-section-gap); padding-inline: 0; }
  #listing-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #listing-filters > .filters-more-toggle { grid-column: auto; justify-self: stretch; width: 100%; box-sizing: border-box; gap: .35rem; padding: .3rem .65rem; }
  #listing-filters > .filters-more-toggle::after { display: none; }
  .filters-more-toggle svg { width: 16px; height: 16px; flex: 0 0 16px; }
  #listing-filters > .counted-filter .counted-filter-trigger { grid-template-columns: minmax(0, 1fr) 12px; padding-inline: .4rem; gap: .2rem; }
  #listing-filters > .counted-filter .counted-filter-trigger::before { display: none; }
  #listing-filters > .counted-filter .counted-filter-menu { width: min(300px, calc(100vw - 24px)); }
  .listings-header:has(.has-advanced-filters) { position: relative; top: auto; }
  .listings-header .listing-controls.has-advanced-filters { max-height: none; overflow: visible; opacity: 1; pointer-events: auto; }
  #listing-filters .advanced-filters { grid-template-columns: minmax(0, 1fr); padding: .5rem 0 0; border: 0; background: transparent; }
  #listing-filters .advanced-filters > :last-child { grid-column: 1 / -1; }
  #listing-filters .advanced-filters .counted-filter-menu:not([hidden]) { position: static; width: 100%; max-height: none; margin-top: .4rem; transform: none; box-sizing: border-box; }
  #listing-filters .advanced-filters .counted-filter-options { max-height: 35dvh; overflow-y: auto; }
  #listing-filters > .filters-more-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
}

.site-header { min-height: 0; padding-block: .2rem; border-top-width: 2px; }
.login-page { border-top: 2px solid var(--accent-blue); }
@media (min-width: 901px) {
  .site-header { padding-block: .1rem; }
  .site-header-inner { min-height: 50px; }
  .brand .brand-logo { height: 50px; }
  .site-nav a, .site-nav .link {
    min-height: 34px;
    padding-block: .35rem;
  }
}
@media (max-width: 639px) {
  .site-header { padding-block: .1rem; --mobile-header-row-height: 42px; }
  .brand .brand-logo { height: 38px; }
  .site-header::after, .listings-header::after { top: calc(2px + .1rem + var(--mobile-header-row-height)); }
  .public-header .site-header-inner > .brand { min-height: var(--mobile-header-row-height); }
}
body:has(.listing-shell) main { margin-top: .65rem; }
@media (max-width: 639px) {
  body:has(.listing-shell) main { margin-top: 0; }
}
.listing-hero { display: none; }
@media (min-width: 640px) {
  .listing-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 230px;
    height: clamp(230px, 27vw, 350px);
    margin: 0 0 .75rem;
    overflow: hidden;
    border-radius: 16px;
    background-image:
      linear-gradient(90deg, rgba(250, 252, 248, .94) 0%, rgba(250, 252, 248, .72) 28%, rgba(250, 252, 248, 0) 58%),
      url('/static/listing-hero-light.jpg?v=20261004-1');
    background-position: center;
    background-size: cover;
    box-shadow: var(--card-shadow);
    isolation: isolate;
  }
  :root[data-theme="dark"] .listing-hero {
    background-image:
      linear-gradient(90deg, rgba(5, 18, 31, .94) 0%, rgba(5, 18, 31, .7) 30%, rgba(5, 18, 31, 0) 60%),
      url('/static/listing-hero-dark.jpg?v=20260922-1');
  }
  .listing-hero-content {
    width: min(43%, 480px);
    padding: clamp(1.5rem, 3vw, 2.75rem);
    color: #102B3B;
  }
  :root[data-theme="dark"] .listing-hero-content { color: #F4FAFA; }
  .listing-hero h1 {
    max-width: 12ch;
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.75rem);
    line-height: 1.04;
    letter-spacing: -.035em;
  }
  .listing-hero p {
    max-width: 40ch;
    margin: .8rem 0 1.15rem;
    color: inherit;
    font-size: clamp(.86rem, 1.2vw, 1rem);
    line-height: 1.45;
  }
  .listing-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 1.15rem;
    border-radius: 999px;
    background: var(--accent-blue);
    color: var(--button-ink);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--accent-blue) 24%, transparent);
    transition: background-color .16s ease;
  }
  /* Same hover as "Create alert from filters": darker accent, no lift or glow. */
  .listing-hero-cta:hover { background: var(--accent-hover); color: var(--button-ink); }
  .listing-hero-cta:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
  }
}

.listing-shell > .listing-status-panel {
  display: inline-flex; align-items: center; width: auto; max-width: 100%;
  flex-wrap: wrap; gap: .1rem; margin: 0 0 .55rem; padding: .15rem .5rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-secondary); box-sizing: border-box;
}
.listing-shell > .listing-status-panel .listing-status-metrics { flex: 0 1 auto; flex-wrap: wrap; gap: .4rem; border: 0; padding-inline: 0; }
.listing-shell > .listing-status-panel .listing-status-providers { margin-left: 0; padding-left: .4rem; border: 0; }
.listing-shell > .listing-status-panel .live-status-pill { color: var(--accent-blue); min-height: 26px; }
.listing-shell > .listing-status-panel .live-status-dot { background: var(--accent-blue); }
.search-console { padding: .7rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); box-shadow: var(--card-shadow); margin-bottom: .6rem; min-width: 0; }
.search-console .listing-controls { margin: 0; }
.search-console .filters { padding: 0; }
.search-console .applied-filter-list { margin: .6rem 0 0; padding: .55rem 0 0; border-top: 1px solid var(--border); }
.search-console .applied-filter-chip { background: var(--accent-soft); color: var(--accent-blue); font-size: .73rem; font-weight: 500; }
.search-console .counted-filter-trigger { min-height: 36px; border-color: var(--border); box-shadow: none; font-weight: 600; }
.search-console .counted-filter-trigger .counted-filter-label { display: none; }
/* This ::before is repurposed here to show real label text via `content:
   attr(...)`, but the base rule above still applies its own `height: 14px`
   (sized for the blank 14x14 decorative spacer it's used as everywhere else)
   -- fine for the old, smaller mobile font, but it clips anything taller
   (e.g. this breakpoint's 16px anti-zoom text) since overflow stays hidden
   here for the ellipsis truncation. Reset to auto so the box sizes to the
   real text's line height instead. */
.search-console #listing-filters .counted-filter-trigger::before { display: block; content: attr(data-console-summary); width: auto; height: auto; grid-column: 1 / 3; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-console #listing-filters .counted-filter-trigger:not([data-console-summary])::before { content: attr(data-console-label); }
.search-console #listing-filters .counted-filter-trigger { grid-template-columns: minmax(0, 1fr) 0 14px; padding-inline: .7rem; }
.search-console .counted-filter-trigger[aria-expanded="true"] { border-color: var(--accent-blue); background: var(--accent-soft); }
.listing-shell .listing-section-heading { margin: .5rem 0; gap: .5rem; }
.listing-status-desktop { display: none; }
@media (min-width: 640px) {
  .listing-shell > .listing-status-mobile { display: none; }
  .listing-shell .listing-section-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 46px;
    margin: .55rem 0 .7rem;
    padding: .3rem .7rem .3rem .8rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    box-sizing: border-box;
  }
  .listing-section-heading .mobile-results-count {
    display: block;
    color: var(--text-primary);
    font-size: .78rem;
    font-weight: 650;
    white-space: nowrap;
  }
  .listing-section-heading .listing-status-desktop {
    display: inline-flex;
    grid-column: auto;
    justify-self: start;
    width: auto;
    min-width: 0;
    margin-left: .25rem;
    padding: 0 0 0 .75rem;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
  }
  .listing-section-heading .listing-status-desktop .live-status-pill {
    min-height: 32px;
    padding: .15rem .4rem;
    color: var(--accent-blue);
  }
  .listing-section-heading .listing-status-desktop .listing-status-metrics {
    flex: 0 1 auto;
    min-width: 0;
    padding-inline: .25rem;
    border-left: 0;
    flex-wrap: nowrap;
  }
  .listing-section-heading .listing-status-desktop .listing-status-metrics::before {
    content: '·';
    color: var(--text-secondary);
  }
  .listing-section-heading .listing-status-desktop .listing-status-providers {
    margin-left: 0;
    padding-left: .45rem;
    border-left: 0;
    white-space: nowrap;
  }
  .listing-section-heading .listing-heading-actions {
    grid-column: auto;
    justify-self: end;
    margin-left: 0;
  }
  .listing-section-heading .listing-sort-select {
    box-sizing: border-box;
    width: 135px;
    min-width: 135px;
    max-width: 135px;
    min-height: 34px;
    height: 34px;
    padding: .35rem .8rem .35rem .35rem;
    border: 0;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: none;
    font-size: .68rem;
  }
  .listing-section-heading .listing-status-desktop { font-size: .78rem; }
  .filter-panel #listing-filters .location-search-input,
  .filter-panel #listing-filters .counted-filter-trigger,
  .filter-panel .room-pill { font-size: .82rem; }
  .filter-panel .mobile-room-any { font-size: .78rem; }
}
.listing-shell .listing-card { border: 1px solid var(--border); border-left-width: 3px; border-radius: 11px; box-shadow: var(--card-shadow); }
.listing-shell .listing-card.status-new { border-left-color: var(--accent-blue); }
.listing-shell .listing-card.status-active { border-left-color: #60A5FA; }
.listing-shell .listing-card.status-changed, .listing-shell .listing-card.status-reappeared { border-left-color: var(--status-changed); }
.listing-shell .listing-card.status-removed { border-left-color: var(--status-removed); }
.listing-shell .listing-status.status-new { background: #CCFBF1; color: #0F766E; }
.listing-shell .listing-status.status-active { background: #DBEAFE; color: #1E40AF; }
.listing-shell .just-detected { background: #FEF3C7; color: #92400E; }
.listing-shell .just-detected i { background: #D97706; }
:root[data-theme="dark"] .listing-shell .listing-status.status-new { background: rgba(45, 212, 191, .16); color: #5EEAD4; }
:root[data-theme="dark"] .listing-shell .listing-status.status-active { background: rgba(96, 165, 250, .16); color: #93C5FD; }
:root[data-theme="dark"] .listing-shell .just-detected { background: rgba(245, 158, 11, .16); color: #FCD34D; }
:root[data-theme="dark"] .listing-shell .just-detected i { background: #F59E0B; }
.listing-shell .listing-card h2 { font-weight: 650; }
.listing-shell .listing-card:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-blue) 9%, transparent); }
.listing-shell .pagination .button { color: var(--button-ink); }
:root:not([data-theme="dark"]) .listing-shell .listing-status-providers.needs-attention,
:root:not([data-theme="dark"]) .listing-shell .listing-status.status-changed { color: #855411; }
@media (max-width: 639px) {
  .search-console { padding: .45rem; border-radius: 12px; }
  .listing-shell .search-console .applied-filter-list { margin: .5rem 0 0; padding-top: .5rem; }
  .listing-shell > .listing-status-panel { width: 100%; font-size: .72rem; padding: .1rem .35rem; border-radius: 12px; }
  .listing-shell > .listing-status-panel .listing-status-metrics { flex: 1; font-size: inherit; }
  .listing-shell > .listing-status-panel .listing-status-providers { margin-left: auto; }
  .search-console #listing-filters .counted-filter-trigger { grid-template-columns: 14px minmax(0, 1fr) 14px; padding-inline: .45rem; gap: .2rem; }
  .search-console #listing-filters .counted-filter-trigger::before { grid-column: 2; text-align: center; }
  .search-console #listing-filters .counted-filter-trigger > svg { grid-column: 3; }
  .search-console .filters-more-toggle { justify-content: center; text-align: center; }
  .search-console .listing-controls.has-open-filter { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .just-detected i { animation: none; }
  .live-status-dot { animation: none; }
  .listing-shell .live-status-dot::before,
  .listing-shell .live-status-dot::after { animation: none; opacity: 0; }
}

/* Fixed compact top-level cards; expanded unit rows keep their natural height. */
.listing-column-item > .listing-card { box-sizing: border-box; }
.listing-column-item > article > .listing-card-main > .listing-card-badges,
.listing-column-item > details > summary > .listing-card-main > .listing-card-badges { grid-row: 1; margin: 0; flex-wrap: nowrap; align-self: start; }
.listing-column-item > article > .listing-card-main > h2,
.listing-column-item > details > summary > .listing-card-main > .listing-group-title { grid-row: 2; margin: 0; align-self: center; }
.listing-column-item > article > .listing-card-main > h2,
.listing-column-item > details > summary .listing-group-title > h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.listing-column-item > details > summary .listing-group-title { flex-wrap: nowrap; min-width: 0; }
.listing-column-item > details > summary .listing-group-title > h2 { min-width: 0; }
.listing-column-item > article > .listing-card-main > .listing-location,
.listing-column-item > details > summary > .listing-card-main > .listing-location { grid-row: 3; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.listing-column-item > article > .listing-card-main > .listing-facts,
.listing-column-item > details > summary > .listing-card-main > .listing-facts { grid-row: 4; margin: 0; padding-top: 8px; flex-wrap: nowrap; align-self: stretch; }


/* Desktop filter panel: one compact, always-expanded row on the main listings
   page (~100px tall including padding). Placed at the end of the file so any
   equal-specificity ties against older `.search-console #listing-filters ...`
   / `#listing-filters ...` rules resolve in this block's favor via source
   order, instead of requiring every conflict to be hand-specificity-matched. */
.filter-panel {
  /* Single source of truth for every padding/gap inside the filter panel,
     mobile and desktop alike -- breakpoints below only change column counts,
     never these values. */
  --filter-pad: 8px;
  --filter-gap: 6px;
  padding: var(--filter-pad);
}
/* Wide enough that Rent/Area/Contribution/Availability's 5 preset pills ("Any"
   plus 4 values) stay on one row instead of wrapping inside the popover --
   the trigger cells themselves are much narrower (see .filter-cell-* below)
   so this only affects the popover, not the row of triggers. */
.filter-panel .price-range-menu { width: 380px; }
/* Desktop only (mobile overrides position to fixed/full-width further down
   this file, so left/right here are moot there). Both rules below override
   .advanced-filters .counted-filter:last-child .counted-filter-menu (further
   up this file), which right-anchors every filter here because each cell
   happens to be its own wrapper's only child, so ":last-child" matches all
   of them, not just the intended last one. Match that rule's specificity (it
   has no ID) by adding #listing-filters so these actually win instead of
   being silently overridden back to it.
   Area/Contribution have enough room to their right at common desktop widths
   to open flush against their own LEFT edge (matching Rent) without running
   off screen. Available from/Providers sit far enough right in the row that
   the same left-anchor would push their 380px popover off the right edge of
   the viewport -- anchoring those two to their own RIGHT edge instead keeps
   them flush against their own trigger while staying fully on screen. */
.filter-panel #listing-filters [data-filter-name="area"] .counted-filter-menu,
.filter-panel #listing-filters [data-filter-name="contribution"] .counted-filter-menu {
  left: 0;
  right: auto;
}
.filter-panel #listing-filters [data-filter-name="availability"] .counted-filter-menu,
.filter-panel #listing-filters [data-filter-name="provider"] .counted-filter-menu {
  left: auto;
  right: 0;
}
.filter-panel .filters {
  display: flex;
  flex-wrap: wrap;
  /* Every filter cell's visible content is now just its control (the field
     labels are visually hidden, see .filter-field-label below), so a plain
     center alignment keeps every cell's control on one shared baseline. */
  align-items: center;
  gap: var(--filter-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.filter-cell { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
/* Explicit order (rather than relying on DOM position) since the mobile "more
   filters" collapse below needs Rooms/Area/Contribution/Availability/Providers
   grouped into one contiguous wrapper element while Location+Rent stay outside
   it -- .advanced-filters is display:contents here on desktop, so each cell's
   own order still applies as if it were a direct child of .filter-panel .filters. */
.filter-cell-location { flex: 1 1 150px; min-width: 150px; order: 1; }
.filter-cell-rooms { flex: 0 0 auto; order: 2; }
.filter-cell-rent { flex: 0 0 135px; order: 3; }
.filter-cell-area { flex: 0 0 135px; order: 4; }
.filter-cell-contribution { flex: 0 0 135px; order: 5; }
.filter-cell-availability { flex: 0 0 135px; order: 6; }
.filter-cell-providers { flex: 0 0 135px; order: 7; }
.filter-panel .filters-more-toggle { order: 8; }
.filter-panel .advanced-filters {
  order: 9;
  /* Overrides the generic .advanced-filters gap/padding (.45rem/.5rem, further
     up this file, shared with the notification page) so the "more filters"
     box's own internal rhythm matches the rest of the panel exactly. */
  gap: var(--filter-gap);
  padding: var(--filter-pad);
}
/* Kept in the DOM (and still wired to aria-label/aria-labelledby) for screen
   readers; visually hidden since the controls themselves are self-explanatory
   in this compact desktop layout. */
.filter-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.filter-panel .counted-filter { flex: 1 1 auto; width: 100%; min-width: 0; }
/* #listing-filters .counted-filter (min-width:761px, defined earlier in this
   file) fixes every counted-filter at 150px via an ID selector; matching its
   specificity here (id + 2 classes beats id + 1 class) is the only way to opt
   this page's cells out of that width without touching the shared, ID-scoped
   rule the notification page's flex layout still depends on. */
#listing-filters .filter-cell .counted-filter { flex: 1 1 auto; width: 100%; min-width: 0; }

/* Location: the trigger button becomes a real, always-visible search input. */
.location-input-shell { position: relative; display: flex; align-items: center; }
.location-search-icon { position: absolute; left: .75rem; width: 16px; height: 16px; fill: none; stroke: var(--text-tertiary); stroke-width: 2; pointer-events: none; }
.location-search-input {
  width: 100%;
  min-height: 40px;
  padding: .5rem .75rem .5rem 2.1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--filter-bg);
  color: var(--text-primary);
  font: inherit;
  font-size: .78rem;
  text-align: center;
  appearance: none;
}
.location-search-input::-webkit-search-cancel-button { display: none; }
.location-search-input:hover { border-color: var(--accent-blue); }
.location-search-input:focus, .location-search-input[aria-expanded="true"] {
  border-color: var(--accent-blue);
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}
.location-search-input::placeholder { color: var(--text-secondary); opacity: 1; }
.location-display-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: .82rem;
  white-space: nowrap;
  pointer-events: none;
}
.location-placeholder-mobile { display: none; }
.location-search-input:not(:placeholder-shown) + .location-display-placeholder { display: none; }
.location-clear-btn {
  position: absolute;
  right: .5rem;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
}
.location-clear-btn:hover { color: var(--text-primary); background: var(--surface); }
/* The shared `button, .button { display: inline-flex }` reset is an AUTHOR-origin
   rule, which beats the UA stylesheet's `[hidden] { display: none }` regardless of
   specificity (origin is checked before specificity in the cascade) - so the clear
   button needs its own explicit [hidden] rule to actually disappear when empty. */
.location-clear-btn[hidden] { display: none; }
.location-field .location-filter-menu { top: calc(100% + .4rem); width: max(100%, 340px); }
.location-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  min-height: 0;
}
.location-selected-chips:empty { display: none; }
.location-selected-chips .applied-filter-chip { background: var(--accent-soft); color: var(--accent-blue); border: 0; min-height: 26px; padding: .2rem .55rem; }

/* Providers: the trigger is the same real search input as Location's (shares
   the `.location-search-input` class), just inside its own popover/listbox. */
/* .search-console #listing-filters .counted-filter-trigger (unconditional, defined
   earlier in this file) rewrites every trigger into a compact single-line summary
   via ::before plus a 3-column grid, and Location's and Provider's inputs both
   keep the shared `counted-filter-trigger` class so the existing dropdown/menu JS
   still recognizes them. Re-declare at matching specificity (.search-console
   #listing-filters .X) so this panel's own layout wins the tie via this block's
   position at the end of the file. */
.search-console #listing-filters .location-search-input::before { content: none; display: none; }
.search-console #listing-filters .location-search-input { grid-template-columns: none; padding-inline: 0; padding: .5rem .75rem .5rem 2.1rem; }
/* One resting-control style shared by the location/provider input and the six
   range number inputs (via .filter-panel .price-range-input below): 40px tall,
   8px radius, --border/--filter-bg. Declared here (matching specificity to
   `.search-console .counted-filter-trigger`'s min-height and
   `.counted-filter-trigger`'s border-radius, both defined earlier) so this
   panel's own values win instead of the shared trigger/dropdown defaults. */
.search-console #listing-filters .location-search-input {
  width: 100%;
  max-width: none;
  height: 34px;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--filter-bg);
}
.provider-menu { display: flex; flex-direction: column; gap: .5rem; width: max(100%, 320px); }
.provider-options { max-height: 260px; overflow-y: auto; }

/* Rooms: discrete multi-select pills instead of a range slider. Wrapped in one
   bordered frame (matching the other filter cells' single-box appearance --
   .counted-filter-trigger / .location-search-input) with its own visible
   "Rooms" label, instead of individually-bordered pills floating with no
   enclosing frame and only a screen-reader-only label. */
.room-pills-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 34px;
  min-height: 34px;
  padding: .2rem .6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--filter-bg);
  box-sizing: border-box;
}
.room-pills-frame-label {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.room-pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }
.room-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  min-height: 26px;
  padding: 0 .35rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
}
.room-pill:hover { border-color: var(--accent-blue); }
.room-pill:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.room-pill.is-selected { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--button-ink); }

/* Rent / area / contribution: back to a compact trigger + popover (matching
   Provider here, and the notification page's own filter console), so the
   selected range shows directly in the trigger's own label - e.g. "Rent ·
   ≤ €1,200" - via the shared price-filter script, with no separate always-
   visible field/slider taking up row height. Popover, slider and field
   markup all reuse the shared, unconditional .counted-filter-trigger /
   .price-range-* rules the notification page already depends on; only the
   trigger's own height/radius/background need matching to this panel's
   other controls here. */
.search-console #listing-filters .filter-cell-rent .counted-filter-trigger,
.search-console #listing-filters .filter-cell-area .counted-filter-trigger,
.search-console #listing-filters .filter-cell-contribution .counted-filter-trigger,
.search-console #listing-filters .filter-cell-availability .counted-filter-trigger,
.search-console #listing-filters .filter-cell-providers .counted-filter-trigger {
  height: 34px;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--filter-bg);
}
/* Moved out of the panel into the results row below it (.listing-heading-actions). */

/* Rent/area popovers: quick presets ("≤ X" for rent, "≥ X" for area) above
   the existing custom min/max fields. Reuses the shared .price-range-menu/
   -title/-fields/-input styling below it unchanged; only the new preset
   chips and the small "custom range" divider label need their own rules.
   Shared by both filters (not "rent-"/"area-" scoped) so they stay visually
   identical, per-request, without duplicating the same rules twice. */
.price-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .65rem; }
.price-preset {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--filter-bg);
  color: var(--text-primary);
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.price-preset:hover { border-color: var(--accent-blue); }
.price-preset:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.price-preset.is-selected { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--button-ink); }
.price-custom-label {
  display: block;
  margin-bottom: .3rem;
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
/* Area's fields put the number first and "m²" after (unlike rent/contribution's
   "€" prefix), so the unit needs the trailing grid column instead of the
   leading one the base .price-range-input rule sets up. */
.price-range-input-suffix { grid-template-columns: minmax(0, 1fr) auto; }
.price-range-input-suffix i { margin-left: .3rem; }
/* Availability's fields are a plain day count with no leading currency/unit icon. */
.price-range-input-plain { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 639px) {
  /* Location + Rent stay visible side by side; the remaining filters occupy
     two-column rows below Rooms in the always-visible .advanced-filters grid.
     The 50%-minus-half-gap split keeps two equal columns against the panel's
     --filter-gap (see .filter-panel above -- not redeclared here on purpose). */
  .filter-cell-location, .filter-cell-rent { flex: 1 1 calc(50% - var(--filter-gap) / 2); min-width: 0; }
  .filter-panel .filters-more-toggle { display: flex; flex: 1 1 100%; }
  /* Keep the Listings grid two-column; the Notifications page retains its own
     single-column expanded layout. */
  .filter-panel #listing-filters .advanced-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--filter-pad);
    gap: var(--filter-gap);
  }
  .filter-panel .advanced-filters .filter-cell-rooms,
  .filter-panel .advanced-filters .filter-cell-area,
  .filter-panel .advanced-filters .filter-cell-contribution,
  .filter-panel .advanced-filters .filter-cell-availability,
  .filter-panel .advanced-filters .filter-cell-providers { min-width: 0; }
  /* Two-to-a-row triggers here have less room than the full-width Location/Rent
     row above, so a smaller label avoids "Available from" ellipsis-truncating. */
  .filter-panel .advanced-filters .counted-filter-trigger { font-size: 13px; }
  /* Every filter menu overlays the full screen (fixed to the viewport) instead
     of being confined to its own half-width column -- #listing-filters
     .advanced-filters .counted-filter-menu (position:static, further up this
     file, sized for the notification page's single-column layout) and the
     base .counted-filter-menu (width:100% of its own trigger) would otherwise
     cap it to that trigger's column width. Location keeps its own dedicated
     full-height bottom sheet (further up this file) untouched. `top` here is
     just the pre-JS fallback -- sizeOpenFilterMenu (listings.html) sets the
     real inline `top`/`max-height` from the trigger's own position so the
     menu opens right under whichever filter was clicked, not pinned low. */
  .filter-panel #listing-filters .counted-filter-menu:not([hidden]):not(.location-filter-menu) {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 72px;
    bottom: auto;
    width: auto;
    max-width: none;
    max-height: 70dvh;
    overflow-y: auto;
    transform: none !important;
    z-index: 1001;
    border-radius: 14px;
    box-shadow: 0 10px 40px #0005;
  }
  body:has(.filter-panel .counted-filter-menu:not([hidden]):not(.location-filter-menu)) { overflow: hidden; }
  /* Matches the left padding (already reserved for the search icon) on the
     right too, so text-align:center centers "PLZ" in the visible box itself
     instead of in a content area that's shifted right by the icon's space.
     #listing-filters .location-search-input (further up this file) already
     sets padding with an ID selector -- match it to win here. */
  .filter-panel #listing-filters .location-search-input { padding-right: 2.1rem; }
  /* Rooms' label + 5 pills need the full row to stay legible; Area/Contribution/
     Available-from/Providers then pair up cleanly as two 2x2 rows below it.
     #listing-filters ID selectors elsewhere (this file) already claim the
     ":last-child" (Providers) for a full-width span meant for the notification
     page's 3-item version -- match that specificity to cancel it here. */
  .filter-panel #listing-filters .advanced-filters .filter-cell-rooms { grid-column: 1 / -1; }
  .filter-panel #listing-filters .advanced-filters .filter-cell-providers { grid-column: auto; }
  /* iOS Safari auto-zooms the page on focusing any text input smaller than
     16px. The earlier `.filters select, .filters input, ... { font-size:
     .72rem }` rule (11.52px) at this same breakpoint triggers that on every
     filter text field -- Location, Providers, and the Rent/Area/Contribution
     min/max number fields. Same specificity as that rule (.filters input),
     so this wins purely by appearing later in the file. */
  .filters input { font-size: 16px; }
  /* The Location/Providers search boxes must stay at 16px here (iOS Safari
     zooms on focusing any smaller text input) -- so instead of shrinking
     them to match everything else, bring the rest of the filter bar's text
     UP to that same 16px on this breakpoint, keeping the whole row visually
     uniform. Same specificity as the rules being overridden (.counted-filter-
     trigger / .room-pill / .room-pills-frame-label), so this wins purely by
     appearing later in the file. */
  .counted-filter-trigger, .room-pill, .room-pills-frame-label { font-size: 16px; }
}
/* Mobile compact filters */
.mobile-room-any, .mobile-more-chevron { display: none; }
@media (max-width: 639px) {
  .filter-panel #listing-filters { gap: 6px; }
  .filter-panel .filter-cell-location, .filter-panel .filter-cell-rent { width: 100%; min-width: 0; }
  .filter-panel .filter-cell-location { grid-column: 1; order: 1; }
  .filter-panel .filter-cell-rent { grid-column: 2; order: 2; }
  .filter-panel .filter-cell-rooms { grid-column: 1 / -1; order: 3; width: 100%; min-width: 0; }
  .filter-panel #listing-filters > .filters-more-toggle { grid-column: 1 / -1; order: 4; }
  .filter-panel #listing-filters > .advanced-filters { display: grid; order: 4; }
  .filter-panel #listing-filters .location-search-input { box-sizing: border-box; height: 44px; min-height: 44px; border-radius: 11px; padding: 0 2.5rem; text-align: left; background: var(--filter-bg); }
  .filter-panel .location-search-icon { left: 14px; width: 19px; height: 19px; }
  .filter-panel #listing-filters .filter-cell-rent .counted-filter-trigger { box-sizing: border-box; height: 44px; min-height: 44px; padding-inline: 14px; border-radius: 11px; }
  .filter-panel #listing-filters .filter-cell-rent .counted-filter-trigger::before { text-align: center; }
  .filter-panel .room-pills-frame { display: flex; flex-direction: column; align-items: stretch; height: auto; padding: 0; border: 0; background: transparent; gap: 0; }
  .filter-panel .room-pills-frame-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .filter-panel .room-pills { display: flex; flex-wrap: nowrap; gap: 6px; padding: 0; border: 1px solid var(--border); border-radius: 11px; background: var(--filter-bg); }
  .filter-panel .room-pill { display: inline-flex; flex: 1 1 0; min-width: 0; width: auto; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 8px; font-size: .9375rem; background: color-mix(in srgb, var(--accent-blue) 5%, transparent); color: var(--text-primary); }
  .filter-panel .mobile-room-any { flex-grow: 1.8; font-size: 13px; }
  .filter-panel .room-pill.is-selected, .filter-panel .mobile-room-any[aria-pressed="true"] { background: var(--accent-blue); color: var(--button-ink); }
  .filter-panel .room-pill:disabled { opacity: .45; }
  .filter-panel #listing-filters > .filters-more-toggle { box-sizing: border-box; height: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--accent-blue); border-radius: 11px; background: var(--card-bg); color: var(--accent-blue); justify-content: flex-start; gap: 10px; font-size: .875rem; }
  .filter-panel #listing-filters > .filters-more-toggle span { flex: 1; text-align: left; }
  .filter-panel #listing-filters > .filters-more-toggle .mobile-more-chevron { display: block; }
  .filter-panel #listing-filters > .filters-more-toggle[aria-expanded="true"] > svg:first-child { transform: none; }
  .filter-panel #listing-filters .advanced-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0; /* same 6px rhythm as every other gap in the panel */
  }
  .filter-panel #listing-filters .advanced-filters .counted-filter-trigger {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) 12px;
    min-height: 44px;
    padding-inline: 8px;
    gap: 4px;
    font-size: 13px;
  }
  .filter-panel #listing-filters .advanced-filters .counted-filter-trigger::before { grid-column: 1; }
  .filter-panel #listing-filters .advanced-filters .counted-filter-trigger > svg { grid-column: 2; }
  .filter-panel #listing-filters .location-search-input,
  .filter-panel #listing-filters .filter-cell-rent .counted-filter-trigger,
  .filter-panel .room-pills,
  .filter-panel #listing-filters > .filters-more-toggle,
  .filter-panel #listing-filters .advanced-filters .counted-filter-trigger { border: 0; }
  .filter-panel #listing-filters .location-search-input,
  .filter-panel #listing-filters .filter-cell-rent .counted-filter-trigger,
  .filter-panel #listing-filters > .filters-more-toggle,
  .filter-panel #listing-filters .advanced-filters .counted-filter-trigger {
    background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
  }
  .filter-panel .room-pills { background: transparent; }
}
@media (max-width: 639px) {
  .location-display-placeholder { justify-content: center; font-size: 16px; }
  .location-placeholder-desktop { display: none; }
  .location-placeholder-mobile { display: inline; }
}

/* Desktop compact filters use the same quiet, borderless teal surface as the
   mobile controls. Keep the panel itself outlined so the row still reads as
   one filter group, and retain a visible keyboard focus ring. */
@media (min-width: 640px) {
  .filter-panel #listing-filters .location-search-input,
  .filter-panel #listing-filters .filter-cell-rent .counted-filter-trigger,
  .filter-panel #listing-filters .filter-cell-area .counted-filter-trigger,
  .filter-panel #listing-filters .filter-cell-contribution .counted-filter-trigger,
  .filter-panel #listing-filters .filter-cell-availability .counted-filter-trigger,
  .filter-panel #listing-filters .filter-cell-providers .counted-filter-trigger,
  .filter-panel .room-pills-frame {
    border: 0;
    background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
  }
  .filter-panel .room-pill {
    border: 0;
    background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
  }
  .filter-panel .room-pills-frame {
    padding: 0;
    background: transparent;
  }
  .filter-panel .room-pills-frame-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .filter-panel .room-pills {
    flex-wrap: nowrap;
    gap: 2px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    box-sizing: border-box;
  }
  .filter-panel .room-pill {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 6px;
  }
  .filter-panel .mobile-room-any {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 72px;
    padding-inline: .35rem;
    font-size: .78rem;
  }
  .filter-panel .room-pill:hover {
    border-color: transparent;
    background: var(--filter-hover-bg);
    color: var(--text-primary);
  }
  .filter-panel .room-pill.is-selected,
  .filter-panel .mobile-room-any[aria-pressed="true"] {
    background: var(--accent-blue);
    color: var(--button-ink);
  }
  .filter-panel #listing-filters .location-search-input:hover { border-color: transparent; background: var(--filter-hover-bg); }
  .filter-panel #listing-filters .location-search-input:focus,
  .filter-panel #listing-filters .location-search-input[aria-expanded="true"] {
    border-color: transparent;
    outline: 3px solid var(--focus-ring);
    outline-offset: 1px;
    box-shadow: none;
  }
}

/* Borderless listings search: surface contrast and shadow provide separation,
   while keyboard focus remains explicit and the listing status stripe stays. */
.listing-shell .filter-panel.search-console {
  border: 0;
  box-shadow: 0 3px 14px color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.filter-panel .counted-filter-menu,
.filter-panel #listing-filters .advanced-filters,
.filter-panel .price-range-input,
.filter-panel .price-preset,
.filter-panel .counted-filter-check,
.filter-panel .location-filter-group,
.filter-panel .counted-filter-actions,
.filter-panel .location-picker-footer {
  border: 0;
}
.filter-panel .counted-filter-menu {
  box-shadow: 0 10px 30px color-mix(in srgb, var(--text-primary) 16%, transparent);
}
.filter-panel .price-range-input,
.filter-panel .price-preset,
.filter-panel .counted-filter-check {
  background: color-mix(in srgb, var(--accent-blue) 5%, var(--surface));
}
.filter-panel .price-range-input:focus-within {
  border-color: transparent;
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  box-shadow: none;
}
.filter-panel .price-preset:hover { border-color: transparent; background: var(--filter-hover-bg); }
.filter-panel .price-preset.is-selected,
.filter-panel .counted-filter-option.is-selected .counted-filter-check {
  border-color: transparent;
  background: var(--accent-blue);
  box-shadow: none;
}
.search-console .applied-filter-list { border-top: 0; }

.listing-shell .listing-card {
  --listing-status-stripe: var(--accent-blue);
  border: 0;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.listing-shell .listing-column-item > .listing-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--listing-status-stripe);
}
.listing-shell .listing-card.status-new { --listing-status-stripe: var(--accent-blue); }
.listing-shell .listing-card.status-active { --listing-status-stripe: #60A5FA; }
.listing-shell .listing-card.status-changed,
.listing-shell .listing-card.status-reappeared { --listing-status-stripe: var(--status-changed); }
.listing-shell .listing-card.status-removed { --listing-status-stripe: var(--status-removed); }
.listing-shell .listing-facts { border-top: 0; }
.listing-shell .listing-card:hover {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-blue) 13%, transparent);
}

/* List/Map view switch in the results row. */
.listing-view-toggle { display: inline-flex; flex: 0 0 auto; padding: 2px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; }
.listing-view-toggle a { display: inline-flex; align-items: center; gap: .3rem; min-height: 30px; padding: 0 .65rem; color: var(--text-secondary); border-radius: 8px; font-size: .78rem; font-weight: 600; text-decoration: none; }
.listing-view-toggle a:hover { color: var(--text-primary); }
.listing-view-toggle a[aria-current="page"] { color: var(--button-ink); background: var(--accent-blue); }
.listing-view-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Listings map: approximate postal-code markers on basemap.at tiles. */
.listing-map-section { margin: 0 0 1.5rem; }
.listings-map { height: min(70vh, 680px); min-height: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--card-shadow); overflow: hidden; z-index: 0; }
.listing-map-note { margin: .5rem 0 0; color: var(--text-secondary); font-size: .75rem; }
:root[data-theme="dark"] .listings-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
.listings-map .leaflet-control-attribution { font-size: 10px; }
.map-count-marker { display: grid; place-items: center; color: var(--button-ink); background: var(--accent-blue); border: 2px solid var(--card-bg); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); font-weight: 700; font-size: 12px; }
.map-count-marker.has-new { background: var(--status-new); }
.map-count-marker:hover { background: var(--accent-hover); }
.listings-map .leaflet-popup-content-wrapper, .listings-map .leaflet-popup-tip { color: var(--text-primary); background: var(--card-bg); }
.listings-map .leaflet-popup-content { margin: 12px 14px; font: inherit; }
.map-popup-heading { margin: 0 0 .4rem; font-weight: 700; font-size: .85rem; }
.map-popup-list { max-height: 240px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.map-popup-list li { padding: .4rem 0; border-top: 1px solid var(--border); }
.map-popup-title { display: block; color: var(--text-primary); font-weight: 600; font-size: .8rem; line-height: 1.3; }
.listings-map a.map-popup-title { color: var(--accent-blue); }
.map-popup-facts { display: block; margin-top: .15rem; color: var(--text-secondary); font-size: .74rem; }
.map-popup-new { display: inline-block; margin-bottom: .15rem; padding: 0 .35rem; color: var(--status-new); background: var(--status-new-bg); border-radius: 6px; font-size: .68rem; font-weight: 700; }
.listings-map a.map-popup-more { display: block; margin-top: .5rem; padding-top: .45rem; color: var(--accent-blue); border-top: 1px solid var(--border); font-size: .78rem; font-weight: 600; }
.leaflet-bar a { color: var(--text-primary); background: var(--card-bg); border-color: var(--border); }
.leaflet-bar a:hover { background: var(--surface); }
.leaflet-bar a.leaflet-disabled { color: var(--text-tertiary); background: var(--card-bg); }
.listings-map .leaflet-control-attribution { color: var(--text-secondary); background: color-mix(in srgb, var(--card-bg) 85%, transparent); }
.listings-map .leaflet-control-attribution a { color: var(--accent-blue); }
@media (max-width: 639px) {
  .site-header .site-nav > a.nav-map-link { display: none; }
  .listing-shell .listing-heading-actions { display: flex; justify-content: flex-end; gap: 6px; }
  /* Icon-only on phones so the sort select keeps its width; the text stays as the accessible name. */
  .listing-view-toggle a { gap: 0; padding: 0 .55rem; font-size: 0; }
  .listing-view-toggle svg { width: 16px; height: 16px; }
  .listing-shell .listing-section-heading { grid-template-columns: minmax(0, 1fr) auto; }
  .listing-shell .listing-heading-actions { width: auto; }
  .listing-shell .listing-heading-actions .listing-sort { flex: 0 0 155px; width: 155px; }
  .listings-map { height: 62dvh; min-height: 340px; border-radius: 12px; }
}

/* Desktop sort select styled like the mobile one: bordered card, custom chevron,
   36px tall to match the List/Map switch beside it. */
@media (min-width: 640px) {
  .listing-section-heading .listing-sort { position: relative; margin: 0; }
  .listing-section-heading .listing-sort::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .75rem;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text-primary);
    border-bottom: 1.5px solid var(--text-primary);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }
  .listing-section-heading .listing-sort-select {
    -webkit-appearance: none;
    appearance: none;
    width: 175px;
    min-width: 175px;
    max-width: 175px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0 1.7rem 0 .65rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    line-height: 1;
    font-size: .72rem;
  }
  .listing-section-heading .listing-sort-select:hover { border-color: var(--accent-blue); }
}

/* Approximate (postal-code area) markers vs exact building markers from the address register. */
.map-count-marker.is-approximate { color: var(--accent-blue); background: color-mix(in srgb, var(--card-bg) 88%, transparent); border: 2px dashed var(--accent-blue); box-shadow: none; }
.map-count-marker.is-approximate.has-new { color: var(--status-new); border-color: var(--status-new); background: color-mix(in srgb, var(--card-bg) 88%, transparent); }
.map-count-marker.is-approximate:hover { background: var(--card-bg); }
.map-popup-approximate { margin: -.2rem 0 .4rem; color: var(--text-secondary); font-size: .72rem; font-style: italic; }

/* Sort only applies to the list; kept in the DOM (hidden) while the map view is shown. */
.listing-section-heading .listing-sort[hidden] { display: none; }

/* Map markers: centred count, coloured like the card labels (Just detected = amber,
   New = teal-green, Active = blue). The .leaflet-marker-icon prefix outranks leaflet.css,
   which is loaded on demand after this file and would otherwise force display:block. */
.leaflet-marker-icon.map-count-marker,
.map-legend i {
  --marker-color: #2563EB;
  --marker-ink: #FFFFFF;
}
.leaflet-marker-icon.map-count-marker.is-new, .map-legend i.is-new { --marker-color: #0F766E; }
.leaflet-marker-icon.map-count-marker.is-just-detected, .map-legend i.is-just-detected { --marker-color: #D97706; }
:root[data-theme="dark"] .leaflet-marker-icon.map-count-marker,
:root[data-theme="dark"] .map-legend i { --marker-color: #60A5FA; --marker-ink: #0B1117; }
:root[data-theme="dark"] .leaflet-marker-icon.map-count-marker.is-new,
:root[data-theme="dark"] .map-legend i.is-new { --marker-color: #2DD4BF; }
:root[data-theme="dark"] .leaflet-marker-icon.map-count-marker.is-just-detected,
:root[data-theme="dark"] .map-legend i.is-just-detected { --marker-color: #F59E0B; }
.leaflet-marker-icon.map-count-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  color: var(--marker-ink);
  background: var(--marker-color);
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.leaflet-marker-icon.map-count-marker > span { display: block; line-height: 1; }
.leaflet-marker-icon.map-count-marker:hover { background: var(--marker-color); filter: brightness(1.1); }
/* Approximate position (street middle / postcode area): dashed ring filled with a light
   tint of the status colour, so it still reads as active/new, not as disabled. */
.leaflet-marker-icon.map-count-marker.is-approximate,
.leaflet-marker-icon.map-count-marker.is-approximate:hover {
  color: color-mix(in srgb, var(--marker-color) 75%, var(--text-primary));
  background: color-mix(in srgb, var(--marker-color) 22%, var(--card-bg));
  border: 2px dashed var(--marker-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.map-legend i.is-approximate {
  box-sizing: border-box;
  background: color-mix(in srgb, var(--marker-color) 22%, var(--card-bg));
  border: 1.5px dashed var(--marker-color);
}
.map-popup-just-detected { display: inline-block; margin-bottom: .15rem; padding: 0 .35rem; color: #92400E; background: #FEF3C7; border-radius: 6px; font-size: .68rem; font-weight: 700; }
:root[data-theme="dark"] .map-popup-just-detected { color: #FCD34D; background: rgba(245, 158, 11, .16); }
.map-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .5rem 0 0; color: var(--text-secondary); font-size: .75rem; }
.map-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--marker-color); }

/* Footer: a card aligned to the content column (same width formula as main), styled
   like the filter panel above it; logo + disclaimer left, legal links as pills right. */
.site-footer {
  box-sizing: border-box;
  width: min(calc(100% - var(--content-gutter)), var(--content-max));
  max-width: var(--content-max);
  margin: 2.5rem auto 1.5rem;
  padding: 0;
  border-top: 0;
  color: var(--text-secondary);
  font-size: .8rem;
}
.site-footer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2.5rem;
  padding: 1.1rem 1.4rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}
.footer-about { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.footer-logo { display: inline-flex; flex: 0 0 auto; }
.footer-logo .brand-logo { display: block; width: auto; height: 28px; }
.footer-logo .brand-logo-dark { display: none; }
.site-footer .footer-about p { max-width: 64ch; margin: 0; padding-left: 1.25rem; border-left: 1px solid var(--border); line-height: 1.5; }
.site-footer .footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.site-footer .footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 .85rem;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.site-footer .footer-links a:hover { color: var(--accent-blue); border-color: var(--accent-blue); }
.site-footer .footer-links a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 900px) {
  .site-footer-card { grid-template-columns: minmax(0, 1fr); }
  .footer-about { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .site-footer .footer-about p { padding-left: 0; border-left: 0; }
  .site-footer .footer-links { justify-content: flex-start; }
}
@media (max-width: 639px) {
  .site-footer { width: var(--mobile-content-width, calc(100% - 1.25rem)); margin: 1.5rem auto 1rem; }
  .site-footer-card { padding: 1rem; border-radius: 12px; }
  .footer-logo .brand-logo { height: 24px; }
}

/* Operations (/operations): calmer desktop tables, Apply matching its dropdowns,
   and a phone layout where log/delivery rows become labelled cards. */
.operations-page .crawl-log-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: .2rem 0 .6rem; }
.operations-page .crawl-log-filters select { min-width: 190px; height: 34px; min-height: 34px; box-sizing: border-box; }
.operations-page .crawl-log-filters .crawl-log-apply {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; min-height: 34px; min-width: 110px; box-sizing: border-box;
  padding: 0 1.1rem; border-radius: 999px; font-size: .78rem; font-weight: 650; line-height: 1;
}
.operations-page .crawl-log-table th,
.operations-page .crawl-log-table td,
.operations-page .notification-delivery-table th,
.operations-page .notification-delivery-table td { padding: .55rem .7rem; font-size: .8rem; line-height: 1.4; vertical-align: top; }
.operations-page .crawl-log-table td small { display: block; color: var(--text-secondary); font-size: .7rem; }
.operations-page .crawl-log-table .log-items { min-width: 230px; }
.operations-page .crawl-log-table .log-message { min-width: 200px; color: var(--text-secondary); }
.operations-page .crawl-log-table td:first-child { white-space: nowrap; }

@media (max-width: 639px) {
  .operations-page .monitoring-heading { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: .75rem; }
  .operations-page .monitoring-heading h1 { font-size: 1.55rem; line-height: 1.15; }
  .operations-page .monitoring-heading .muted { margin: .3rem 0 0; font-size: .8rem; line-height: 1.45; }
  .operations-page .monitoring-heading-actions { flex: 0 0 auto; }
  .operations-page .monitoring-overview-strip { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .3rem .9rem; padding: .5rem .7rem; }
  .operations-page .monitoring-overview-strip > * { white-space: nowrap; }
  .operations-page .monitoring-panel > summary { flex-wrap: wrap; gap: .15rem .6rem; }
  .operations-page .monitoring-panel-summary-meta { font-size: .72rem; }
  .operations-page .compact-monitoring-details { gap: .5rem; padding: .5rem; }
  .operations-page .compact-monitoring-details article { padding: .65rem .75rem; border-radius: 10px; }
  .operations-page .compact-monitoring-details dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .3rem .6rem; font-size: .78rem; }

  .operations-page .crawl-log-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .operations-page .crawl-log-filters select { min-width: 0; width: 100%; }
  .operations-page .crawl-log-filters .crawl-log-apply { min-width: 0; padding: 0 .9rem; }

  /* Tables -> one labelled card per row. */
  .operations-page .table:has(.crawl-log-table, .notification-delivery-table) { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .operations-page :is(.crawl-log-table, .notification-delivery-table),
  .operations-page :is(.crawl-log-table, .notification-delivery-table) tbody { display: block; width: 100%; }
  .operations-page :is(.crawl-log-table, .notification-delivery-table) thead,
  .operations-page :is(.crawl-log-table, .notification-delivery-table) tr:has(> th) { display: none; }
  .operations-page :is(.crawl-log-table, .notification-delivery-table) tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .45rem .8rem;
    margin: 0 0 .5rem; padding: .7rem .8rem;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--card-shadow);
  }
  .operations-page :is(.crawl-log-table, .notification-delivery-table) td { display: block; min-width: 0; padding: 0; border: 0; font-size: .8rem; white-space: normal; overflow-wrap: anywhere; }
  .operations-page :is(.crawl-log-table, .notification-delivery-table) td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: .1rem;
    color: var(--text-secondary); font-size: .66rem; font-weight: 650; letter-spacing: .03em; text-transform: uppercase;
  }
  .operations-page .crawl-log-table .log-items,
  .operations-page .crawl-log-table .log-message,
  .operations-page .notification-delivery-table .log-message { grid-column: 1 / -1; min-width: 0; }
  .operations-page .crawl-log-table .log-message.is-empty { display: none; }
  .operations-page .crawl-log-table .log-provider { font-weight: 650; }
  .operations-page :is(.crawl-log-table, .notification-delivery-table) tr.table-empty { display: block; }
  .operations-page :is(.crawl-log-table, .notification-delivery-table) tr.table-empty td { color: var(--text-secondary); }
  .operations-page .pagination { flex-wrap: wrap; justify-content: center; gap: .5rem; }
}
@media (max-width: 639px) {
  /* Heading actions were a full-width two-column grid (install + refresh); keep them content-sized. */
  .operations-page .monitoring-heading .monitoring-heading-actions { display: flex; width: auto; min-width: 0; grid-template-columns: none; gap: .4rem; }
  .operations-page .monitoring-overview-strip .monitoring-provider-count { margin-right: 0; }
  /* An older rule gives these tables a 900px minimum width. */
  .operations-page :is(.crawl-log-table, .notification-delivery-table) { min-width: 0; }
  .operations-page :is(.crawl-log-table, .notification-delivery-table) tr.table-empty td { width: auto; }
  /* Log card: provider + severity header, then started / result / duration, then HTTP / requests. */
  .operations-page .crawl-log-table tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operations-page .crawl-log-table td:nth-child(2) { order: -2; grid-column: span 2; font-size: .9rem; }
  .operations-page .crawl-log-table td:nth-child(3) { order: -1; justify-self: end; }
  .operations-page .crawl-log-table td:nth-child(2)::before,
  .operations-page .crawl-log-table td:nth-child(3)::before { content: none; }
  .operations-page .crawl-log-table td:nth-child(7) { grid-column: span 2; }
  .operations-page .crawl-log-table .log-items,
  .operations-page .crawl-log-table .log-message { grid-column: 1 / -1; }
  .operations-page .crawl-log-table .badge { padding: .1rem .5rem; font-size: .7rem; }
}
@media (max-width: 639px) {
  .operations-page .crawl-log-table td:first-child { white-space: normal; }
}

/* Tablets / iPad (640–1219px; the one-row desktop bar needs ~1208px): a fixed two-row bar instead of ad-hoc wrapping.
   Row 1: Location (fills) + room pills + Rent. Row 2: the four detail filters as
   equal columns. A zero-height full-width flex item after Rent forces the break. */
@media (min-width: 640px) and (max-width: 1219px) {
  .filter-panel #listing-filters::after {
    content: "";
    order: 3;
    flex: 0 0 100%;
    height: 0;
  }
  /* The break line would add a second row gap; space row 2 with a margin instead. */
  .filter-panel #listing-filters { row-gap: 0; }
  .filter-panel #listing-filters .filter-cell-location { flex: 1 1 120px; min-width: 0; order: 1; }
  .filter-panel #listing-filters .filter-cell-rooms { flex: 0 0 auto; order: 2; }
  .filter-panel #listing-filters .filter-cell-rent { flex: 0 0 150px; order: 3; }
  .filter-panel #listing-filters .filter-cell-area { order: 4; }
  .filter-panel #listing-filters .filter-cell-contribution { order: 5; }
  .filter-panel #listing-filters .filter-cell-availability { order: 6; }
  .filter-panel #listing-filters .filter-cell-providers { order: 7; }
  .filter-panel #listing-filters :is(.filter-cell-area, .filter-cell-contribution, .filter-cell-availability, .filter-cell-providers) {
    flex: 1 1 0;
    min-width: 0;
    margin-top: var(--filter-gap);
  }
  .filter-panel #listing-filters :is(.filter-cell-area, .filter-cell-contribution, .filter-cell-availability, .filter-cell-providers) .counted-filter,
  .filter-panel #listing-filters :is(.filter-cell-area, .filter-cell-contribution, .filter-cell-availability, .filter-cell-providers) .counted-filter-trigger {
    width: 100%;
  }
}

/* iPad / tablet (640–900px): same header as desktop — 50px logo with the menu beside it,
   instead of the stacked layout the 900px breakpoint applies (phones keep their own). */
@media (min-width: 640px) and (max-width: 900px) {
  .site-header { padding-block: .1rem; }
  .site-header-inner,
  .listings-header .site-header-inner { grid-template-columns: minmax(auto, max-content) minmax(0, 1fr); gap: .25rem 1rem; min-height: 50px; }
  .brand .brand-logo { height: 50px; }
  .site-nav { justify-content: flex-end; width: auto; overflow-x: visible; border-top: 0; padding-top: 0; }
  .site-nav a, .site-nav .link { min-height: 34px; padding-block: .35rem; }
}

/* Hero: the height was fixed to the window width while the text column wraps more as it
   narrows, so "Create alert" got clipped (e.g. ~640–880px). Keep the same size as a
   minimum and let the hero grow when its text needs more room. */
@media (min-width: 640px) {
  /* 280px fits the longer German text on tablets, so both languages get the same hero. */
  .listing-hero { height: auto; min-height: clamp(280px, 27vw, 350px); }
}

/* Status line: a compact form ("● Live · 1 min ago · 20/24") is only used on tablets
   (640–899px), where the full wording no longer fits beside the count and view switch. */
.listing-status-panel .compact-scan-time,
.listing-status-panel .compact-provider-health { display: none; }
@media (min-width: 640px) and (max-width: 899px) {
  .listing-status-panel .listing-status-scanned,
  .listing-status-panel .mobile-scan-time,
  .listing-status-panel .desktop-provider-health,
  .listing-status-panel .mobile-provider-health { display: none; }
  .listing-status-panel .compact-scan-time,
  .listing-status-panel .compact-provider-health { display: inline; white-space: nowrap; }
  .listing-status-panel .listing-status-metrics { flex-wrap: nowrap; white-space: nowrap; }
}/* Narrow tablets (640–799px): icon-only List/Map switch, like on phones, so the compact
   status line never runs under it (e.g. "59 min ago" at 640px). */
@media (min-width: 640px) and (max-width: 799px) {
  .listing-view-toggle a { gap: 0; padding: 0 .55rem; font-size: 0; }
  .listing-view-toggle svg { width: 16px; height: 16px; }
}

/* Regions overview (/genossenschaftswohnungen) and empty landing pages. */
.regions-page { padding: 1.2rem 1.4rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--card-shadow); }
.regions-page h1 { margin: 0 0 .4rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.regions-intro, .regions-note { max-width: 70ch; margin: 0 0 1rem; color: var(--text-secondary); font-size: .88rem; line-height: 1.5; }
.regions-note { margin: 1rem 0 0; font-size: .8rem; }
.regions-section { margin-top: 1.1rem; }
.regions-section h2 { margin: 0 0 .55rem; font-size: 1rem; }
.region-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.region-link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 36px; padding: 0 .75rem; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: .82rem; text-decoration: none; }
.region-link:hover { color: var(--accent-blue); border-color: var(--accent-blue); }
.region-link.is-primary { grid-column: 1 / -1; color: var(--accent-blue); font-weight: 650; }
.region-link-count { flex: 0 0 auto; min-width: 1.6rem; padding: .05rem .45rem; color: var(--accent-blue); background: var(--accent-soft); border-radius: 999px; font-size: .72rem; font-weight: 700; text-align: center; }
.region-link.is-empty { color: var(--text-secondary); opacity: .7; }
.region-link.is-empty .region-link-count { color: var(--text-secondary); background: transparent; border: 1px solid var(--border); }
.landing-empty p { margin: 0 0 .5rem; }
.landing-empty p:last-child { margin-bottom: 0; }
@media (max-width: 639px) {
  .regions-page { padding: 1rem; border-radius: 12px; }
  .region-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* The chevron floats in the top-right corner beside the status badges, so the card body
   spans the full width: title, text, chips and price panel keep the same 13px distance
   from the tile's left and right edges on every screen. */
.listing-column-item > .listing-card > .listing-card-aside,
.listing-column-item > details > summary > .listing-card-aside { position: absolute; top: 11px; right: 13px; }
.listing-column-item > article > .listing-card-main > .listing-card-badges,
.listing-column-item > details > summary > .listing-card-main > .listing-card-badges { padding-right: 26px; }

/* Listing grid: the server renders three columns (listings.html). Laptops and desktops
   (>=1024px) show them as three masonry columns; iPad portrait and small windows get a
   two-column grid (columns dissolved, ordered newest first), and phones (<=639px, the phone layout) one; from 640px (small tablets, large phones in landscape) two. */
@media (min-width: 1024px) {
  .listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .listing-column { display: contents; }
}

/* Tablet two-row filter bar (640–1219px): Rent ends the first row, so its 380px
   dropdown opens from its RIGHT edge; left-anchored it ran off the right side of the
   screen (half hidden on iPad). Desktop's single row keeps it left-anchored. */
@media (min-width: 640px) and (max-width: 1219px) {
  .filter-panel #listing-filters [data-filter-name="rent_range"] .counted-filter-menu {
    left: auto;
    right: 0;
  }
}

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.listing-amount-prefix { margin-right: 3px; color: var(--text-secondary); font-family: inherit; font-size: 11px; font-weight: 400; }

/* Mobile location picker keeps its footer (Apply) even without the regions link. */
@media (max-width: 639px) {
  .location-picker-footer:not(:has(a)) { display: flex; justify-content: flex-end; }
}

/* Under the results, next to the page buttons: a way on when a page had nothing suitable. */
.listing-regions-hint { margin: .6rem 0 0; color: var(--text-secondary); font-size: .8rem; text-align: center; }
.listing-regions-hint a { color: var(--accent-blue); font-weight: 600; text-decoration: none; }
.listing-regions-hint a:hover { text-decoration: underline; }

/* Filter bar hover: every control (location, room buttons, Rent … Providers) reacts the same
   way, with a gentle step up from its 5% resting tint instead of the strong mint. The
   Rent … Providers buttons had no visible hover because their resting-tint rule is more
   specific than .counted-filter-trigger:hover. Selected room buttons keep their solid fill. */
@media (min-width: 640px) {
  .filter-panel #listing-filters .location-search-input:hover,
  .filter-panel #listing-filters .counted-filter-trigger:hover,
  .filter-panel #listing-filters .counted-filter-trigger[aria-expanded="true"],
  .filter-panel #listing-filters .room-pill:not(.is-selected):not([aria-pressed="true"]):hover {
    border-color: transparent;
    background: var(--filter-control-hover);
    color: var(--text-primary);
  }
}

/* Alerts pages (public and admin): one 980px column (the width of "Your alerts") for the filters, the
   setup steps and the alert list, instead of 1280px blocks with short forms on the left. */
.notification-shell { max-width: 980px; margin-inline: auto; }
.notification-shell .saved-searches-page { max-width: none; }
/* In the 980px column the one-row desktop filter bar does not fit; use the same balanced
   two-row layout as iPad (location, rooms, rent | area, contribution, availability, providers). */
@media (min-width: 1220px) {
  .notification-shell .filter-panel #listing-filters::after { content: ""; order: 3; flex: 0 0 100%; height: 0; }
  .notification-shell .filter-panel #listing-filters { row-gap: 0; }
  .notification-shell .filter-panel #listing-filters .filter-cell-location { flex: 1 1 120px; min-width: 0; order: 1; }
  .notification-shell .filter-panel #listing-filters .filter-cell-rooms { flex: 0 0 auto; order: 2; }
  .notification-shell .filter-panel #listing-filters .filter-cell-rent { flex: 0 0 150px; order: 3; }
  .notification-shell .filter-panel #listing-filters .filter-cell-area { order: 4; }
  .notification-shell .filter-panel #listing-filters .filter-cell-contribution { order: 5; }
  .notification-shell .filter-panel #listing-filters .filter-cell-availability { order: 6; }
  .notification-shell .filter-panel #listing-filters .filter-cell-providers { order: 7; }
  .notification-shell .filter-panel #listing-filters :is(.filter-cell-area, .filter-cell-contribution, .filter-cell-availability, .filter-cell-providers) { flex: 1 1 0; min-width: 0; margin-top: var(--filter-gap); }
  .notification-shell .filter-panel #listing-filters :is(.filter-cell-area, .filter-cell-contribution, .filter-cell-availability, .filter-cell-providers) :is(.counted-filter, .counted-filter-trigger) { width: 100%; }
  .notification-shell .filter-panel #listing-filters [data-filter-name="rent_range"] .counted-filter-menu { left: auto; right: 0; }
}

/* Monitoring: a provider returning nothing while its flats are still listed as active. */
.monitoring-alert { margin: 0 0 .75rem; padding: .7rem .9rem; color: var(--warning-text); background: var(--status-changed-bg); border: 1px solid var(--status-changed); border-radius: 10px; font-size: .85rem; line-height: 1.45; }
.monitoring-alert strong { color: var(--text-primary); }

/* Public provider status: overdue providers (no run within 2.5 intervals) use the warning colours. */
.badge.delayed { background: var(--status-changed-bg); color: var(--warning-text); }

/* Spec-row cards: a 26px badge row (6px of air above the title), 8px from the location line to the divider, then labels and values
   (8 + 1 + 8 + 13 + 3 + 18 = 51px); the detection time sits in the badge row. */
.listing-column-item > article > .listing-card-main,
.listing-column-item > details > summary > .listing-card-main {
  height: 116px;
  min-height: 116px;
  grid-template-rows: 26px 22px 17px 51px;
}
.listing-column-item > article > .listing-card-main > .listing-specs,
.listing-column-item > details > summary > .listing-card-main > .listing-specs { align-self: end; margin: 0; }
.listing-shell .listing-card .listing-specs { border-top: 1px solid var(--border); }
.listing-card .listing-card-badges { min-width: 0; }
.listing-updated-inline { flex: 0 1 auto; min-width: 0; margin-left: auto; overflow: hidden; color: var(--text-tertiary); font-size: .6875rem; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
/* Narrow cards (laptop and iPad landscape in 3 columns): slightly smaller values and gaps
   so grouped values like "ab 111.139 €" still fit four columns. */
@container listing-card (max-width: 330px) {
  .listing-spec { padding: 0 5px; }
  .listing-spec dt { letter-spacing: .02em; }
  .listing-spec dd { font-size: 12.5px; }
}
/* Very small phones (320px): four columns do not fit, so the row becomes 2 × 2
   (rent | contribution over rooms | area) and the card grows to fit it. */
@container listing-card (max-width: 280px) {
  .listing-facts.listing-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px; }
  .listing-spec:nth-child(3) { padding-left: 0; border-left: 0; }
  .listing-column-item > article > .listing-card-main,
  .listing-column-item > details > summary > .listing-card-main {
    height: 152px;
    min-height: 152px;
    grid-template-rows: 26px 22px 17px 87px;
  }
}

/* Location line: "1030 Wien · ab 01.11.2026 · Street · Provider"; availability a touch darker. */
.listing-location .listing-availability { color: var(--text-primary); }
/* The card opens the provider's website in a new tab: an external-link icon instead of the arrow. */
.listing-chevron.listing-external { width: 16px; height: 16px; stroke-width: 1.8; }

/* Rooms "All" pill: a quiet outline while no room count is picked. Once one
   is, it looks like the other pills and a tap clears the room filter. */
.filter-panel .room-pills .mobile-room-any { display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; border: 1px solid transparent; white-space: nowrap; }
.mobile-room-any svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.filter-panel .room-pills .mobile-room-any[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent-blue) 55%, transparent); background: transparent; color: var(--accent-blue); cursor: default; }
/* A room count with no listings under the other filters stays in place, greyed out. */
.filter-panel .room-pills .room-pill:disabled { opacity: .45; cursor: default; pointer-events: none; }
@media (max-width: 639px) {
  .filter-panel .room-pills .mobile-room-any { flex: 0 0 auto; padding-inline: 10px; font-size: 14px; }
}

/* Dropdown options share the filter bar's quiet teal surface and hover, and
   keep dark text: the generic button:hover in app.css would turn it white. */
.filter-panel {
  --filter-control-bg: color-mix(in srgb, var(--accent-blue) 5%, transparent);
  --filter-control-hover: color-mix(in srgb, var(--accent-blue) 11%, transparent);
}
.filter-panel .price-preset,
.filter-panel .price-range-input,
.filter-panel .counted-filter-check { background: var(--filter-control-bg); }
.filter-panel .price-preset:not(.is-selected):hover,
.filter-panel .counted-filter-option:not(:disabled):hover,
.filter-panel .counted-filter-option:focus-visible,
.filter-panel .location-filter-expand:hover,
.filter-panel .location-filter-expand:focus-visible {
  border-color: transparent;
  background: var(--filter-control-hover);
  color: var(--text-primary);
}
.filter-panel .price-preset.is-selected:hover { background: var(--accent-blue); color: var(--button-ink); }

/* Rent presets and applied-filter chips use the squarer corners of the filter
   bar controls, and the chip row starts at the Location box's left edge. */
.filter-panel .price-preset,
.applied-filter-chip,
.location-selected-chips .applied-filter-chip { border-radius: 6px; }
.search-console .applied-filter-list { padding-inline: 8px; }

/* "Reset all" sits with the chips and shares their shape: an outlined chip with
   a reset icon, so it reads as an action rather than another filter. */
.applied-filter-list .applied-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 28px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 40%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: .73rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}
.applied-filter-list .applied-filter-clear svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.applied-filter-list .applied-filter-clear:hover {
  border-color: var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue) 11%, transparent);
  color: var(--accent-blue);
}
.applied-filter-list .applied-filter-clear:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }

/* "Show N apartments" closes a dropdown (filters already apply live). It stays in
   view at the bottom of a long list, and Location shows it on desktop too. */
.counted-filter-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
}
.counted-filter-done,
.location-picker-footer .counted-filter-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent-blue);
  color: var(--button-ink);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.counted-filter-done:hover,
.location-picker-footer .counted-filter-done:hover { background: var(--accent-hover); color: var(--button-ink); }
.counted-filter-done:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.location-picker-footer:not(:has(a)) { display: flex; justify-content: flex-end; }
@media (max-width: 639px) {
  .counted-filter-footer .counted-filter-done,
  .location-picker-footer .counted-filter-done { flex: 1 1 100%; min-height: 44px; font-size: 15px; }
  /* The regions link gets its own row above the full-width button. */
  .location-picker-footer { flex-wrap: wrap; row-gap: .5rem; }
}

/* Desktop Location dropdown: only the list scrolls (vertically), and the footer
   sits below it at the real bottom edge, so nothing scrolls under the button
   and the scrollbar can't push the rows into a sideways scroll. */
@media (min-width: 640px) {
  .location-filter-menu:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
  .location-filter-menu .location-picker-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .location-filter-menu .location-picker-footer { position: static; flex: 0 0 auto; flex-wrap: wrap; row-gap: .5rem; }
  /* When the link and button don't fit side by side (German), the button takes its own row. */
  .location-filter-menu .location-picker-footer .counted-filter-done { margin-left: auto; }
}

/* Building group units: one compact row each (cheapest first), in the card's spec
   order. Narrow cards put the unit name on its own line above the numbers. */
.listing-address-group .listing-group-units { display: grid; margin-top: .6rem; }
.unit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.4rem 5.3rem 2.6rem 3.7rem 14px;
  align-items: center;
  gap: 8px;
  margin: 0 -6px;
  padding: 7px 6px;
  border-top: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
}
.unit-row-head { padding: 4px 6px; border-top: 0; color: var(--text-secondary); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.unit-row-head span:not(:first-child), .unit-row-num { text-align: right; }
.unit-row-label { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13px; font-weight: 500; line-height: 1.3; }
.unit-row-num { font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; font-size: 12.5px; white-space: nowrap; }
.unit-row-icon { width: 14px; height: 14px; fill: none; stroke: var(--text-secondary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a.unit-row:hover { border-radius: 6px; background: color-mix(in srgb, var(--accent-blue) 7%, transparent); color: var(--text-primary); text-decoration: none; }
a.unit-row:hover .unit-row-label { color: var(--accent-blue); }
a.unit-row:focus-visible { border-radius: 6px; outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.unit-rows-more:not([hidden]) { display: contents; }
.unit-rows-toggle { margin-top: 8px; min-height: 34px; border: 1px solid color-mix(in srgb, var(--accent-blue) 45%, transparent); border-radius: 8px; background: transparent; color: var(--accent-blue); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.unit-rows-toggle:hover { border-color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 11%, transparent); color: var(--accent-blue); }
.unit-rows-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@container listing-card (max-width: 400px) {
  .unit-row { grid-template-columns: repeat(4, minmax(0, 1fr)) 14px; row-gap: 3px; }
  .unit-row-label { grid-column: 1 / 5; grid-row: 1; }
  .unit-row-icon { grid-column: 5; grid-row: 1; }
  .unit-row-num { grid-row: 2; }
  .unit-row-head span:first-child { display: none; }
  .unit-row-head span:not(:first-child), .unit-row-num { text-align: left; }
}
@container listing-card (max-width: 280px) {
  .unit-row { column-gap: 4px; }
  .unit-row-num { font-size: 11px; }
}

/* "All regions at a glance": pinned under the scrolling location list, styled like its
   options, so the footer holds only the "Show N apartments" button. */
.location-filter-menu .location-regions-link {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 34px;
  margin-top: .15rem;
  padding: .35rem .4rem;
  border-radius: 7px;
  color: var(--accent-blue);
  font-size: .76rem;
  font-weight: 600;
  white-space: normal;
}
.location-filter-menu .location-regions-link svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.location-filter-menu .location-regions-link:hover { background: var(--filter-control-hover, color-mix(in srgb, var(--accent-blue) 11%, transparent)); text-decoration: none; }
/* The divider sits right above the button, as in the other dropdowns. */
.filter-panel .location-filter-menu .location-picker-footer,
.location-filter-menu .location-picker-footer { border-top: 1px solid var(--border); }

/* Taken listings: confirmed gone from the provider in the last 48 hours. They stay
   in the results, dimmed, with a grey "Vergeben · nach 3 Min." badge. */
.listing-card.is-taken { opacity: .6; }
.listing-shell .listing-card.is-taken { --listing-status-stripe: var(--text-secondary); }
.listing-card.is-taken:hover { opacity: .75; }
.listing-shell .listing-status.status-taken { background: color-mix(in srgb, var(--text-secondary) 16%, transparent); color: var(--text-secondary); }
.unit-row.is-taken { opacity: .55; }
.unit-row-taken { margin-left: 6px; color: var(--text-secondary); font-size: 11px; font-weight: 500; white-space: nowrap; }
/* "Vergebene anzeigen (12)" next to the result count: a small checkbox-style switch. */
.taken-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 0; margin-left: 10px; padding: 3px 8px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--text-secondary); font: inherit; font-size: .75rem; font-weight: 500; line-height: 1.3; cursor: pointer; }
.taken-toggle:hover { background: color-mix(in srgb, var(--accent-blue) 11%, transparent); color: var(--text-primary); }
.taken-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.taken-toggle-box { box-sizing: border-box; width: 12px; height: 12px; flex: none; border: 1.5px solid currentColor; border-radius: 3px; }
.taken-toggle[aria-pressed="true"] .taken-toggle-box { border-color: var(--accent-blue); background: var(--accent-blue); box-shadow: inset 0 0 0 2px var(--card-bg); }

/* The switch sits next to the count on wider screens; phones get it on its own line
   under the heading (the count column there is too narrow). */
.taken-toggle-slot { display: none; }
@media (max-width: 639px) {
  .mobile-results-count .taken-toggle, .mobile-results-count .taken-toggle-sep { display: none; }
  .taken-toggle-slot:not(:empty) { display: block; margin: calc(-1 * var(--mobile-section-gap) + 2px) 0 var(--mobile-section-gap); }
  .taken-toggle-slot .taken-toggle { margin-left: -8px; font-size: .75rem; }
}
/* The hero's alert button; hidden once filters are set, when "Alarm erstellen" beside the
   chips offers the same alert with those filters. */
.listing-hero-actions { display: flex; align-items: center; gap: 12px; }
.listing-hero-actions .listing-hero-cta { flex: none; }
.listing-hero .listing-hero-content > p:last-child { margin-bottom: 0; }


/* Quieter results bar: "1443 Wohnungen · ☑ 42 vergeben" on the left, "● Live · vor 1 Min."
   on the right beside the view and sort controls; the provider link (and an amber dot)
   only when a provider has a lasting problem. */
.listing-shell .listing-status-metrics { gap: .4rem; border-left: 0; padding-left: 0; }
.listing-scan-time { color: var(--text-secondary); white-space: nowrap; }
.listing-shell .listing-status-panel .listing-status-providers { border-left: 0; padding-left: 0; white-space: nowrap; }
.listing-shell .listing-status-panel .listing-status-providers::before { content: "·"; margin-right: .4rem; color: var(--text-secondary); }
.listing-status-panel.is-degraded .live-status-dot { color: var(--status-changed); }
.listing-section-heading .mobile-results-count .taken-toggle { margin-left: 2px; }
.taken-toggle-sep { margin-left: 6px; color: var(--text-secondary); }
@media (min-width: 640px) {
  .listing-section-heading .listing-status-desktop { justify-self: end; margin-left: 0; padding-left: 0; border-left: 0; }
}

/* Compact List/Map switch and sort menu: 30px tall with small icons and a small chevron;
   the text size stays. Narrow tablets show the switch icon-only, so icons stay 14px there. */
@media (min-width: 640px) {
  .listing-section-heading .listing-view-toggle a { min-height: 24px; padding: 0 .55rem; gap: .25rem; }
  .listing-section-heading .listing-view-toggle svg { width: 12px; height: 12px; }
  .listing-section-heading .listing-sort-select { height: 30px; min-height: 30px; }
  .listing-section-heading .listing-sort::after { right: .7rem; width: 5px; height: 5px; }
}
@media (min-width: 640px) and (max-width: 799px) {
  .listing-section-heading .listing-view-toggle svg { width: 14px; height: 14px; }
}

/* Rent is what people compare first: bold and a size up from contribution, rooms and area. */
.listing-spec.listing-spec-rent dd { font-size: 17px; font-weight: 700; }
@container listing-card (max-width: 330px) {
  .listing-spec.listing-spec-rent dd { font-size: 14px; }
}
/* Hovering the provider warning underlines only its words, not the "·" before or "›" after. */
.listing-shell .listing-status-panel .listing-status-providers:hover { text-decoration: none; }
.listing-shell .listing-status-panel .listing-status-providers:hover .listing-status-providers-text { text-decoration: underline; text-underline-offset: 2px; }
/* "1442 Wohnungen · ☑ 44 vergeben": count, separator and switch share one text baseline. */
@media (min-width: 640px) {
  .listing-section-heading .mobile-results-count { display: inline-flex; align-items: baseline; }
}
@media (min-width: 640px) {
  /* Inline layout so the switch's baseline is its text, not its (empty) checkbox square. */
  .listing-section-heading .mobile-results-count .taken-toggle { display: inline-block; }
  .listing-section-heading .mobile-results-count .taken-toggle-box { display: inline-block; margin-right: 6px; vertical-align: -1px; }
}
/* Sort menu as wide as its longest option in each language ("Fläche: kleinste zuerst",
   "Area: smallest first"), not a fixed 175px with empty space after the label. */
@media (min-width: 640px) {
  .listing-section-heading .listing-sort-select { width: 156px; min-width: 156px; max-width: 156px; }
  :lang(en) .listing-section-heading .listing-sort-select { width: 138px; min-width: 138px; max-width: 138px; }
  /* The map's "show" menu has the same width as the list's sort menu, wide enough for its
     count on one line ("Alle Wohnungen (1753)"). */
  .listing-section-heading .listing-sort-select { width: 162px; min-width: 162px; max-width: 162px; white-space: nowrap; text-overflow: ellipsis; }
  :lang(en) .listing-section-heading .listing-sort-select { width: 152px; min-width: 152px; max-width: 152px; }
}

/* Public provider page: flats per provider (tiles: available now, added and taken in 30 days,
   status dot; each opens the provider's flats) and when new flats appear (weekday × time
   heatmap). */
.provider-page { display: grid; gap: 1.1rem; }
.provider-page-section { padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); }
.provider-page-section h1, .provider-page-section h2 { margin: 0 0 .25rem; font-size: 1.05rem; line-height: 1.3; }
.provider-page-intro { margin: 0 0 .9rem; color: var(--text-secondary); font-size: .8rem; line-height: 1.45; }
.provider-page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin: 0 0 .85rem; }
.provider-page-head h1 { margin: 0; }
.provider-page-stats { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; margin: 0; color: var(--text-secondary); font-size: .78rem; }
.provider-page-stats b { color: var(--text-primary); font-weight: 650; font-variant-numeric: tabular-nums; }
.provider-page-live { display: inline-flex; align-items: center; gap: .35rem; }
.provider-page-live .live-scope-icon { width: 14px; height: 14px; }
.provider-status-dot.badge { display: inline-flex; flex: none; margin: 0; padding: 0; background: transparent; }
.provider-status-dot i { display: block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.provider-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.provider-tile { display: grid; align-content: start; gap: .15rem; height: 100%; box-sizing: border-box; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-primary); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.provider-tile:hover { border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--border)); box-shadow: var(--card-shadow); color: var(--text-primary); transform: translateY(-1px); }
.provider-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.provider-tile-name { display: flex; align-items: center; gap: .45rem; min-width: 0; font-size: .78rem; font-weight: 600; }
.provider-tile-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Large, not bold: the count is the point of the tile, the weight stays calm. */
.provider-tile-count { font-size: 1.65rem; font-weight: 400; line-height: 1.15; font-variant-numeric: tabular-nums; }
.provider-tile-count small { display: inline; margin-left: .3rem; color: var(--text-secondary); font-size: .72rem; }
.provider-tile-delta, .provider-tile-fast, .provider-tile-health { color: var(--text-secondary); font-size: .7rem; font-variant-numeric: tabular-nums; }
.provider-tile-fast, .provider-tile-health { color: var(--warning-text); font-weight: 600; }
.provider-tiles-empty { color: var(--text-secondary); font-size: .8rem; }
.provider-empty-line { margin: .75rem 0 0; color: var(--text-secondary); font-size: .74rem; line-height: 1.6; }
.provider-empty-line .provider-status-dot { margin-right: .3rem; vertical-align: .05em; }
.provider-empty-line a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.provider-empty-line a:hover { color: var(--text-primary); }
/* "When do new flats appear": title and answer above, the listing page's menu top right (Tag,
   Woche, Monat), the chart across the card: a smooth area for the day and the week, a calendar
   for the month. Only the chosen scope shows (data-when-scope); phones get the narrow chart. */
.when-card .when-head { align-items: flex-start; margin: 0 0 .4rem; }
.when-card .listing-section-heading h2 { margin: 0; color: var(--text-primary); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.when-answer { margin: .2rem 0 0; color: var(--text-secondary); font-size: .84rem; }
.when-answer b { color: var(--text-primary); font-weight: 600; }
.when-scope { flex: none; margin: 0; }
.when-card .listing-section-heading .listing-sort-select { width: 112px; min-width: 112px; max-width: 112px; }
.when-scope-submit { margin-left: .4rem; }
.when-card [data-when] { display: none; }
.when-card[data-when-scope="day"] [data-when="day"],
.when-card[data-when-scope="week"] [data-when="week"],
.when-card[data-when-scope="month"] .when-answer[data-when="month"] { display: block; }
.when-card[data-when-scope="month"] .when-calendar[data-when="month"] { display: grid; }
.area-svg { width: 100%; height: auto; overflow: visible; }
.area-svg text { fill: var(--text-secondary); font-family: inherit; font-size: 11px; }
.area-guide { stroke: var(--border); stroke-dasharray: 2 4; stroke-opacity: .7; }
.area-baseline { stroke: var(--border); }
.area-band { fill: var(--accent-blue); fill-opacity: .06; }
.area-svg .area-band-label { fill: var(--accent-blue); font-size: 10.5px; font-weight: 700; cursor: help; }
.area-line { fill: none; stroke: var(--accent-blue); stroke-width: 2.5; stroke-linecap: round; }
.area-now { stroke: currentColor; stroke-opacity: .4; stroke-dasharray: 3 3; }
.area-top { fill: var(--card-bg); stroke: var(--accent-blue); stroke-width: 2.5; }
/* Numbers on the curve keep a card-coloured halo so the line never crosses them. */
.area-svg .area-value { fill: var(--text-primary); font-weight: 600; paint-order: stroke; stroke: var(--card-bg); stroke-width: 4px; stroke-linejoin: round; }
.area-hover { fill: var(--accent-blue); opacity: 0; transition: opacity .12s; }
.area-svg text.area-hover { fill: var(--text-primary); }
.area-slot:hover .area-hover { opacity: 1; }
.area-svg .area-mark, .area-svg .area-note { fill: var(--market-import); font-weight: 700; }
.area-svg .area-note { font-size: 10.5px; }
.when-calendar { gap: 4px; margin: .5rem 0 .2rem; }
.when-calendar-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.when-calendar-day { color: var(--text-secondary); font-size: .66rem; font-weight: 600; text-align: center; }
/* Each day: a plain cell with its date (the month on the first day shown and on each 1st),
   the new flats as a coloured label "25 neu" below it (darker = more), "–" when none. */
.when-cell { display: grid; align-content: space-between; gap: 6px; min-height: 52px; box-sizing: border-box; padding: 6px 8px 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.when-cell-date { color: var(--text-primary); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.when-cell-date small { display: inline; color: var(--text-secondary); font-weight: 500; }
.when-cell-count { justify-self: start; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent-blue) var(--level), transparent); color: var(--text-primary); font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.when-cell-count.is-none { padding-left: 0; background: none; color: var(--text-secondary); font-weight: 400; }
.when-cell.is-out { border: 0; background: transparent; }
.when-cell.is-today { border: 1.5px dashed color-mix(in srgb, var(--text-secondary) 70%, transparent); }
.when-legend { display: none; align-items: center; gap: 3px; margin: .7rem 0 0; color: var(--text-secondary); font-size: .7rem; }
.when-card[data-when-scope="month"] .when-legend[data-when="month"] { display: flex; }
.when-legend i { width: 14px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--accent-blue) var(--level), transparent); }
.when-legend i:last-of-type { margin-right: .4rem; }
@media (min-width: 640px) { .area-svg.is-narrow { display: none !important; } }
@media (max-width: 639px) {
  .area-svg.is-wide { display: none !important; }
  /* The listing page turns its menus into icon buttons here; this one keeps its word. */
  .when-card .listing-section-heading .listing-sort { position: relative; flex: none; width: auto; }
  .when-card .listing-section-heading .listing-sort .listing-sort-select { width: 100px; min-width: 100px; height: 34px; min-height: 34px; padding: 0 1.6rem 0 .65rem; color: var(--text-primary); font-size: .74rem; text-indent: 0; }
  .when-card .listing-section-heading .listing-sort::after { content: ""; display: block; position: absolute; top: 50%; right: .7rem; width: 6px; height: 6px; border-right: 1.5px solid var(--text-primary); border-bottom: 1.5px solid var(--text-primary); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
  .when-calendar-row { gap: 3px; }
  .when-cell { min-height: 46px; padding: 4px 4px 5px; gap: 4px; }
  .when-cell-date { font-size: .62rem; }
  .when-cell-date small { display: none; }
  .when-cell-count { padding: 1px 5px; font-size: .64rem; }
  .when-cell-unit { display: none; }
}
@media (max-width: 1100px) { .provider-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .provider-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.posting-heatmap { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; font-size: .72rem; }
.posting-heatmap th { padding: 0 0 2px; border: 0; background: transparent; color: var(--text-secondary); font-weight: 500; text-align: center; }
.posting-heatmap thead th:first-child, .posting-heatmap tbody th { width: 2.6rem; text-align: left; }
.posting-heatmap td { box-sizing: border-box; height: 30px; padding: 0; border: 0; border-radius: 5px; background: color-mix(in srgb, var(--accent-blue) var(--level), transparent); color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: center; }
.posting-heatmap td.is-empty { background: color-mix(in srgb, var(--text-secondary) 8%, transparent); }
.posting-heatmap td.is-strong { color: var(--button-ink); font-weight: 600; }
.posting-heatmap-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: .5rem 0 0; color: var(--text-secondary); font-size: .7rem; }
.posting-heatmap-legend i { width: 14px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--accent-blue) var(--level), transparent); }
@media (max-width: 639px) {
  .provider-page-section { padding: .85rem; }
  .provider-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .provider-tile { padding: .6rem .65rem; }
  .provider-tile-count { font-size: 1.45rem; }
  .posting-heatmap { font-size: .66rem; }
  .posting-heatmap td { height: 26px; }
}
/* Heatmap hover: cells keep their own colour (the generic table-row hover would paint
   them beige and hide their white numbers); the hovered cell just brightens a little. */
.posting-heatmap tbody tr:hover td { background: color-mix(in srgb, var(--accent-blue) var(--level), transparent); }
.posting-heatmap tbody tr:hover td.is-empty { background: color-mix(in srgb, var(--text-secondary) 8%, transparent); }
.posting-heatmap td:hover { filter: brightness(1.1); }

/* Desktop header: when the links wrap onto a second line (e.g. German labels while signed
   in), the admin links move behind a burger into the same menu phones use. */
.nav-overflow-toggle { display: none; }
@media (min-width: 640px) {
  .site-header.nav-overflow .site-nav > .mobile-overflow-nav { display: none; }
  /* Until the fold is decided (script right after the header), keep the admin links out of
     sight on one line: Chrome may paint before that script runs, and the full menu would
     show wrapped for a moment and then fold into the burger. */
  html.nav-pending .site-nav:not([data-anonymous]) { flex-wrap: nowrap; overflow: hidden; visibility: hidden; }
  .site-header.nav-overflow .site-header-inner { position: relative; }
  .site-header.nav-overflow .nav-overflow-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 32px; height: 32px; min-height: 32px; margin-left: .35rem; padding: 0; border: 0; border-radius: 8px; background: var(--surface); color: var(--text-primary); cursor: pointer; }
  .nav-overflow-toggle span { width: 15px; height: 2px; border-radius: 2px; background: currentColor; }
  .site-header.nav-overflow .nav-overflow-toggle:hover,
  .site-header.nav-overflow .nav-overflow-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-blue); }
  .site-header.nav-overflow .nav-overflow-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
  .site-header.nav-overflow .mobile-admin-menu { position: absolute; z-index: 60; top: calc(100% + .35rem); right: 0; display: none; width: 260px; padding: .35rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); box-shadow: var(--card-shadow); }
  .site-header.nav-overflow .mobile-admin-menu.is-open { display: grid; }
  .site-header.nav-overflow .mobile-admin-menu a,
  .site-header.nav-overflow .mobile-admin-menu .link { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 40px; padding: .5rem .7rem; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); font-size: .84rem; font-weight: 700; text-align: left; text-decoration: none; }
  .site-header.nav-overflow .mobile-admin-menu a:hover,
  .site-header.nav-overflow .mobile-admin-menu .link:hover { background: var(--surface); color: var(--accent-blue); }
  .site-header.nav-overflow .mobile-admin-menu form { margin: 0; border-top: 1px solid var(--border); }
}

/* Header bar: a smaller logo (close to the footer's) on a bar a shade lighter than the page -
   light cream in light mode, the raised card colour in dark mode - with a hairline under it. */
@media (min-width: 640px) {
  .site-header { border-bottom: 1px solid var(--header-line); }
  .brand .brand-logo { height: 35px; }
  .site-header-inner > .header-primary { align-self: center; }
}
@media (max-width: 639px) {
  .brand .brand-logo { height: 35px; }
}

/* Listing filter card: the active-filter chips keep the fields' 20px spacing (16px on
   phones) - to the fields above (panel padding 8px + this padding) and to the card's
   bottom edge; their side inset already matches. The old margin framed a separator line
   that is gone, so it is dropped. */
.listing-shell .search-console > .applied-filter-list { margin-top: 0; padding-top: 12px; padding-bottom: 8px; }
@media (max-width: 639px) {
  .listing-shell .search-console > .applied-filter-list { padding-top: 8px; }
}

/* Active filters: chips and "Reset all" wrap in their own column; "Create alert" keeps one
   place at the top right beside them, however many filters are set. (On phones it is the
   fixed button at the bottom of the screen, so only the chips stay in the flow.) */
.applied-filter-chips { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.applied-filter-list:has(> .applied-filter-create-alert) { flex-wrap: nowrap; align-items: flex-start; gap: 16px; }
.applied-filter-create-alert { flex: none; gap: 6px; }
.applied-filter-create-alert svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 639px) {
  .listing-shell .applied-filter-create-alert { gap: 8px; }
  .listing-shell .applied-filter-create-alert svg { width: 16px; height: 16px; }
}
/* Active-filter chips and "Reset all" share the room buttons' 8px corners, so the card's
   rounded rectangles sit on one radius family; the pill stays reserved for "Create alert". */
.applied-filter-list .applied-filter-chip,
.applied-filter-list .applied-filter-clear { border-radius: 8px; }

/* Live scope: the logo's target mark with a slow radar sweep while results update live; a
   blip when a flat was found in the last 15 minutes. Still (hand at 12 o'clock) when paused,
   amber while reconnecting (a delayed provider has its own amber notice), no motion for
   reduced-motion users.
   The word "Live" stays for screen readers and shows only when paused or reconnecting. */
.live-scope { gap: .35rem; }
.live-scope-icon { width: 16px; height: 16px; flex: none; overflow: visible; color: var(--accent-blue); }
.live-scope-ring, .live-scope-inner, .live-scope-hand { fill: none; stroke: currentColor; }
.live-scope-ring { stroke-width: 1.8; }
.live-scope-inner { stroke-width: 1.4; opacity: .45; }
.live-scope-sweep { transform-origin: 12px 12px; animation: live-scope-sweep 3s linear infinite; }
.live-scope-sweep path:first-child { fill: currentColor; opacity: .25; }
.live-scope-hand { stroke-width: 1.6; stroke-linecap: round; }
.live-scope-blip { fill: currentColor; opacity: 0; }
.live-scope.has-recent-find .live-scope-blip { animation: live-scope-blip 3s linear infinite; }
@keyframes live-scope-sweep { to { transform: rotate(360deg); } }
/* The hand passes the blip (45° clockwise) at 12.5% of a turn. */
@keyframes live-scope-blip { 0%, 11% { opacity: 0; } 14% { opacity: 1; } 70%, 100% { opacity: 0; } }
.live-scope.is-paused .live-scope-icon { color: var(--text-secondary); }
.live-scope.is-paused .live-scope-sweep, .live-scope.is-reconnecting .live-scope-sweep { animation: none; }
.live-scope.is-reconnecting .live-scope-icon { color: var(--status-changed); }
.live-scope:not(.is-paused):not(.is-reconnecting) [data-live-label] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .live-scope-sweep, .live-scope.has-recent-find .live-scope-blip { animation: none; }
  .live-scope.has-recent-find .live-scope-blip { opacity: 1; }
}
.listing-last-new { color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.listing-last-new:hover { color: var(--accent-blue); }
.listing-last-new:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
/* The scope replaces the dot, so no "·" between it and the text. */
.listing-status-panel .live-scope + .listing-status-metrics::before { content: none; }
/* Desktop results bar: count, taken, then the scope and newest find on the left (what you
   read); the delay notice, when there is one, right beside List/Map and sort (what you press). */
@media (min-width: 640px) {
  .listing-section-heading .listing-status-desktop { justify-self: stretch; margin-left: .2rem; }
  .listing-section-heading .listing-status-desktop::before { content: "·"; margin-right: .15rem; color: var(--text-secondary); }
  .listing-section-heading .listing-status-desktop .listing-status-metrics { flex: 1 1 auto; }
  .listing-section-heading .listing-status-desktop .listing-status-providers { margin-left: auto; }
  .listing-section-heading .listing-status-desktop .listing-status-providers::before { content: none; }
}
/* The newest find shortens with an ellipsis rather than wrapping the bar. */
.listing-section-heading .listing-status-desktop .listing-status-metrics { flex-wrap: nowrap; min-width: 0; }
.listing-section-heading .listing-last-new { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Narrow tablets: count, taken and the controls on the first line; the status gets its own
   full line below instead of squeezing between them. */
@media (min-width: 640px) and (max-width: 959px) {
  .listing-section-heading .listing-status-desktop { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
  .listing-section-heading .listing-status-desktop::before { content: none; }
}
/* Results bar dots: 8px of space on both sides of each "·", measured to the text, box and
   scope beside it (the taken button's own padding and the grid gap would make it 6-19px). */
/* Both dots regular weight: the first one sits inside the bold count and inherited it. */
.listing-section-heading .taken-toggle-sep { font-weight: 400; }
@media (min-width: 640px) {
  .listing-section-heading .taken-toggle-sep { margin-left: 8px; }
  .listing-section-heading .mobile-results-count .taken-toggle { margin-left: 0; }
}
@media (min-width: 960px) {
  .listing-section-heading .listing-status-desktop { margin-left: -8px; }
  .listing-section-heading .listing-status-desktop::before { margin-right: 1px; }
  .listing-section-heading .listing-status-desktop .live-scope { padding-left: 6px; }
}

/* Header bar 48px on desktop and tablets: 2px teal line + padding + a 42px content row
   (the 35px logo and 34px menu links fit) + 1px hairline. It kept the 50px row the 50px
   logo needed. Phones keep their own two-row header. */
@media (min-width: 640px) {
  .site-header-inner,
  .listings-header .site-header-inner { min-height: 42px; }
}

/* "Taken" as a switch instead of a checkbox: it is a display setting (show flats taken in
   the last 48 hours), on = teal track with the knob right, like the site's other teal
   controls. Same button and aria-pressed; only the box is drawn differently. */
.taken-toggle .taken-toggle-box {
  position: relative; width: 24px; height: 14px; border: 1.5px solid color-mix(in srgb, var(--text-secondary) 55%, transparent);
  border-radius: 999px; background: transparent; box-shadow: none; transition: background-color 220ms ease, border-color 220ms ease;
}
.taken-toggle .taken-toggle-box::after {
  content: ""; position: absolute; top: 50%; left: 2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-secondary); transform: translateY(-50%);
  /* The theme switch's timing: 240ms slide on the same curve, 220ms colour fade. */
  transition: left 240ms cubic-bezier(.2, .8, .2, 1), background-color 220ms ease;
}
.taken-toggle[aria-pressed="true"] .taken-toggle-box { border-color: var(--accent-blue); background: var(--accent-blue); box-shadow: none; }
.taken-toggle[aria-pressed="true"] .taken-toggle-box::after { left: calc(100% - 10px); background: var(--button-ink); }
@media (min-width: 640px) {
  .listing-section-heading .mobile-results-count .taken-toggle-box { vertical-align: -3px; }
}
@media (prefers-reduced-motion: reduce) {
  .taken-toggle .taken-toggle-box, .taken-toggle .taken-toggle-box::after { transition: none; }
}

/* Results bar controls without frames: List/Map and the sort menu take the filter fields'
   quiet teal fill (teal at 5%, 11% on hover) instead of an outline, so the bar's own border
   is the only frame; the active view stays solid teal. Focus keeps a visible ring. */
.listing-section-heading .listing-view-toggle { padding: 3px; border: 0; background: color-mix(in srgb, var(--accent-blue) 5%, transparent); }
.listing-section-heading .listing-view-toggle a:not([aria-current="page"]):hover { background: color-mix(in srgb, var(--accent-blue) 11%, transparent); color: var(--text-primary); }
.listing-section-heading .listing-view-toggle a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.listing-section-heading .listing-sort-select { border: 0; background-color: color-mix(in srgb, var(--accent-blue) 5%, transparent); }
.listing-section-heading .listing-sort-select:hover { background-color: color-mix(in srgb, var(--accent-blue) 11%, transparent); }
.listing-section-heading .listing-sort-select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* "All providers at a glance": below the provider list, styled like "All regions at a
   glance" under the locations. */
.provider-menu .provider-overview-link {
  display: flex; align-items: center; gap: .45rem; min-height: 34px; margin-top: .15rem; padding: .35rem .4rem;
  border-radius: 7px; color: var(--accent-blue); font-size: .76rem; font-weight: 600; text-decoration: none;
}
.provider-menu .provider-overview-link svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.provider-menu .provider-overview-link:hover { background: var(--filter-control-hover, color-mix(in srgb, var(--accent-blue) 11%, transparent)); }
.provider-menu .provider-overview-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* Pinned below the scroll area: never shrinks in the dropdown's column layout, and hides
   while searching, when the list it belongs to is hidden too. */
.location-filter-menu .location-regions-link { flex: none; margin: .15rem 0 0; }
.location-filter-menu:has(.location-filter-options[hidden]) .location-regions-link { display: none; }
.provider-menu .provider-overview-link { flex: none; }

/* Phones: one label style for every filter (13px, bold, dark) - "PLZ" was a grey 16px
   placeholder and "Miete" 16px while the rest were 13px. The location input itself stays
   16px so iOS does not zoom in on focus. The Location sheet is white like the other
   dropdowns (its sheet, search header and footer were beige). */
@media (max-width: 639px) {
  .filter-panel #listing-filters .filter-cell-rent .counted-filter-trigger { font-size: 13px; }
  .filter-panel #listing-filters .location-placeholder-mobile { font-size: 13px; font-weight: 600; color: var(--text-primary); }
  .search-console #listing-filters .location-filter .location-filter-menu,
  .search-console #listing-filters .location-filter .location-search-header,
  .search-console #listing-filters .location-filter .location-picker-footer { background: var(--card-bg); }
}

/* Provider page: a slim banner under the heading -- providers shown, how often they are
   checked and the flats available now, with the live scope (still for reduced motion). */
.provider-coverage-banner {
  display: flex; align-items: center; gap: .55rem; margin: .45rem 0 .6rem; padding: .5rem .75rem; border-radius: 10px;
  background: color-mix(in srgb, var(--accent-blue) 7%, transparent); color: var(--text-primary); font-size: .8rem; line-height: 1.4;
}
.provider-coverage-banner strong { font-weight: 700; }
.provider-coverage-banner .live-scope-icon { width: 16px; height: 16px; }

/* Phones: a compact filter card on a six-column grid. Every control is 36px (the height of
   List/Map and sort below it); Location/Rent and the four dropdowns take half the width
   (three room cells + two gaps), so their edges line up with the room buttons. Labels and
   chevrons are centred together. Rooms is a door icon + "Zi.", the contribution filter
   reads "Eigenmittel". The count, a bigger "taken" switch, List/Map and an icon-only
   sort share one toolbar row. Desktop and tablets are unchanged. */
.room-any-icon, .room-any-short, .results-count-short, .listing-sort-icon { display: none; }
@media (max-width: 639px) {
  .filter-panel #listing-filters .location-search-input,
  .filter-panel #listing-filters .filter-cell-rent .counted-filter-trigger,
  .filter-panel #listing-filters .advanced-filters .counted-filter-trigger { height: 36px; min-height: 36px; }
  .filter-panel #listing-filters .filter-cell-rent .counted-filter-trigger,
  .filter-panel #listing-filters .advanced-filters .counted-filter-trigger {
    display: flex; align-items: center; justify-content: center; gap: 4px; padding-inline: 8px;
  }
  .search-console #listing-filters .filter-cell-rent .counted-filter-trigger::before,
  .search-console #listing-filters .advanced-filters .counted-filter-trigger::before { flex: 0 1 auto; min-width: 0; }
  .filter-panel #listing-filters .filter-cell-rent .counted-filter-trigger > svg,
  .filter-panel #listing-filters .advanced-filters .counted-filter-trigger > svg { flex: none; width: 12px; height: 12px; }
  .search-console #listing-filters .filter-cell-contribution .counted-filter-trigger:not([data-console-summary])::before,
  .search-console #listing-filters .filter-cell-contribution .counted-filter-trigger[data-console-short-summary]::before { content: attr(data-console-short-summary); }

  .filter-panel .room-pills { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .filter-panel .room-pills .room-pill { width: auto; height: 36px; min-height: 36px; }
  .filter-panel .room-pills .mobile-room-any { gap: 2px; padding: 0; font-size: 12px; }
  .filter-panel .room-pills .mobile-room-any .room-any-full { display: none; }
  .filter-panel .room-pills .mobile-room-any .room-any-icon { display: block; width: 15px; height: 15px; }
  .filter-panel .room-pills .mobile-room-any .room-any-short { display: inline; }

  .listing-section-heading .mobile-results-count { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; white-space: nowrap; }
  .listing-section-heading .mobile-results-count .taken-toggle { display: inline-flex; flex: none; min-height: 36px; margin: 0; padding: 0 4px; font-size: 12px; }
  .listing-section-heading .mobile-results-count .taken-toggle-sep, .taken-toggle-slot:not(:empty) { display: none; }
  .taken-toggle .taken-toggle-box { width: 34px; height: 20px; }
  .taken-toggle .taken-toggle-box::after { left: 2px; width: 14px; height: 14px; }
  .taken-toggle[aria-pressed="true"] .taken-toggle-box::after { left: calc(100% - 16px); }

  .listing-shell .listing-heading-actions .listing-sort { flex: 0 0 36px; width: 36px; }
  .listing-section-heading .listing-sort::after { display: none; }
  .listing-section-heading .listing-sort .listing-sort-select { width: 36px; min-width: 36px; height: 36px; padding: 0; color: transparent; font-size: 16px; text-indent: -999px; }
  .listing-section-heading .listing-sort-icon {
    display: block; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%);
    fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
  }
  /* Map and Projects views: their menu is the same icon button (a funnel); teal while it narrows. */
  .listing-section-heading .listing-map-show:has(option[value="all"]:not(:checked)) .listing-sort-select { background-color: color-mix(in srgb, var(--accent-blue) 14%, transparent); }
  .listing-section-heading .listing-map-show:has(option[value="all"]:not(:checked)) .listing-sort-icon { stroke: var(--accent-blue); }
  .listing-section-heading .listing-projects-stage:has(option[value="all"]:not(:checked)) .listing-sort-select { background-color: color-mix(in srgb, var(--accent-blue) 14%, transparent); }
  .listing-section-heading .listing-projects-stage:has(option[value="all"]:not(:checked)) .listing-sort-icon { stroke: var(--accent-blue); }
}

/* Sort and map "show" menus, open: white like the filter dropdowns, never the button's teal
   fill or the phone button's hidden (transparent) label. Browsers with customizable selects
   (Chrome/Edge 135+) get the filter-menu look - white card, 13px Inter rows, teal hover and
   a teal tick on the current choice - opening under the button, right edges aligned (the
   button sits at the right end of the bar). Others keep their native list; iOS its picker. */
.listing-section-heading .listing-sort-select option { color: var(--text-primary); background: var(--card-bg); font-family: inherit; text-indent: 0; }
@supports (appearance: base-select) {
  .listing-section-heading .listing-sort-select,
  .listing-section-heading .listing-sort-select::picker(select) { appearance: base-select; }
  .listing-section-heading .listing-sort-select { align-items: center; }
  .listing-section-heading .listing-sort-select::picker-icon { display: none; }
  .listing-section-heading .listing-sort-select::picker(select) {
    min-width: 200px; margin-block: 6px; padding: 6px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--card-bg); box-shadow: 0 10px 28px rgba(24, 36, 51, .12); position-area: block-end span-inline-start;
    position-try-order: normal; /* below the button whenever it fits (default: the roomier side) */
  }
  .listing-section-heading .listing-sort-select option {
    display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 8px;
    font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer;
  }
  .listing-section-heading .listing-sort-select option:hover,
  .listing-section-heading .listing-sort-select option:focus-visible { outline: 0; background: color-mix(in srgb, var(--accent-blue) 8%, var(--card-bg)); }
  .listing-section-heading .listing-sort-select option:checked { color: var(--accent-blue); font-weight: 600; }
  .listing-section-heading .listing-sort-select option::checkmark { order: 1; margin-left: auto; color: var(--accent-blue); font-weight: 700; }
  /* The closed menu shows the choice in its own box, so a long one ends in "…" before the arrow
     instead of running under it. */
  .listing-section-heading .listing-sort-select > .listing-sort-button {
    all: unset; display: block; min-width: 0; max-width: 100%; overflow: hidden;
  }
  .listing-section-heading .listing-sort-select selectedcontent {
    display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  /* Neubau: a hairline before "Mit Kaufoption", which carries the cards' violet purchase icon. */
  .listing-section-heading .listing-sort-select .listing-sort-divider { margin: 6px 4px; border: 0; border-top: 1px solid var(--border); }
  .listing-sort-option-icon {
    width: 13px; height: 13px; flex: none; margin-right: 5px; vertical-align: -2px;
    fill: none; stroke: #6D28D9; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  :root[data-theme="dark"] .listing-sort-option-icon { stroke: #C4B5FD; }
  /* The closed menu is narrow: the words alone there, the icon only in the open list. */
  .listing-section-heading .listing-sort-select selectedcontent .listing-sort-option-icon { display: none; }
}

/* List/Map/Projects: one teal thumb that slides between the three thirds, timed like the theme switch
   (240ms, same curve), instead of the colour jumping from one link to the other. The thirds
   are equal columns so the thumb is exactly one third wide; data-active moves it on tap. */
.listing-section-heading .listing-view-toggle { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: repeat(3, 1fr); }
.listing-section-heading .listing-view-toggle::before {
  content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3);
  border-radius: 8px; background: var(--accent-blue); transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}
.listing-section-heading .listing-view-toggle[data-active="map"]::before { transform: translateX(100%); }
.listing-section-heading .listing-view-toggle[data-active="projects"]::before { transform: translateX(200%); }
.listing-section-heading .listing-view-toggle a { justify-content: center; transition: color 220ms ease, background-color 220ms ease; }
.listing-section-heading .listing-view-toggle a[aria-current="page"] { background: transparent; color: var(--button-ink); }
@media (prefers-reduced-motion: reduce) {
  .listing-section-heading .listing-view-toggle::before, .listing-section-heading .listing-view-toggle a { transition: none; }
}

/* Phones: the results row is a card like the desktop results bar - white, hairline border,
   12px corners, soft shadow - with the count dark and bold as on desktop. Under 390px the
   count reads "1677 Whg.", under 360px the switch shows only its number ("38"); the button
   keeps the full "38 vergeben" as its accessible name. */
.taken-label-short { display: none; }
@media (max-width: 639px) {
  .listing-shell .listing-section-heading {
    align-items: center; padding: 5px 5px 5px 12px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--card-bg); box-shadow: var(--card-shadow); box-sizing: border-box;
  }
  .listing-section-heading .mobile-results-count > .results-count-long,
  .listing-section-heading .mobile-results-count > .results-count-short { color: var(--text-primary); font-size: 12.5px; font-weight: 650; }
  /* The "Neue Wohnung vor …" line sat flush under the header menu: the same gap above it as below. */
  .listing-shell > .listing-status-mobile { margin-top: 8px; }
}
@media (max-width: 389px) {
  .mobile-results-count .results-count-long { display: none; }
  .mobile-results-count .results-count-short { display: inline; }
}
@media (max-width: 359px) {
  .mobile-results-count .taken-label-long { display: none; }
  .mobile-results-count .taken-label-short { display: inline; }
}

/* Admin alert overview: one row per Telegram user, counts only (no names or filters). */
.alert-overview-table-wrap { overflow-x: auto; margin: .75rem 0; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.alert-overview-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.alert-overview-table th, .alert-overview-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.alert-overview-table thead th { color: var(--text-secondary); font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.alert-overview-table tbody tr:last-child > * { border-bottom: 0; }
.alert-overview-table tbody th { font-weight: 600; }
.alert-overview-table td.is-problem { color: var(--danger, #B42318); font-weight: 600; }

/* "Deine Alerts" while signed out: a short line and the Telegram sign-in button. */
.notification-login { display: grid; justify-items: start; gap: .6rem; padding: .25rem 0 .5rem; }
.notification-login p { margin: 0; color: var(--text-secondary); }

/* "Kaufoption" badge: violet, a hue no status label uses (teal = new, blue = active, amber =
   just detected/changed, grey = taken, beige = unit count); the key icon keeps it readable
   without colour. Same pill as the unit count. */
.listing-purchase-option {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 3px 8px; border-radius: 999px;
  background: #EDE9FE; color: #6D28D9; font-size: 9.5px; line-height: 1.2; font-weight: 750; letter-spacing: .04em;
  white-space: nowrap; text-transform: uppercase;
}
.listing-purchase-option svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .listing-purchase-option { background: rgba(167, 139, 250, .16); color: #C4B5FD; }
.listing-card.is-taken .listing-purchase-option { opacity: .7; }

/* "Nur mit Kaufoption" in the Eigenmittel menu, under the amounts, with a one-line hint. */
.purchase-option-check { display: flex; align-items: center; gap: .55rem; margin: .7rem 0 0; padding: .65rem .1rem 0; border-top: 1px solid var(--border); color: var(--text-primary); font-size: .8rem; font-weight: 600; cursor: pointer; }
.purchase-option-check input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--accent-blue); }
.purchase-option-check small { display: inline; color: var(--text-secondary); font-weight: 500; }
.purchase-option-hint { display: block; margin: .3rem 0 .2rem calc(17px + .55rem); color: var(--text-secondary); font-size: .7rem; line-height: 1.4; }

/* Card labels: a label never squeezes its own text ("NEU · VOR 23 STD." over four lines);
   when the row is full, whole labels wrap to a second line and only then does the badge row
   (and the card) grow. The detection time ("vor 2 T.") still shortens with an ellipsis. */
.listing-card-badges > :not(.listing-updated-inline) { flex-shrink: 0; white-space: nowrap; }
.listing-column-item > article > .listing-card-main > .listing-card-badges,
.listing-column-item > details > summary > .listing-card-main > .listing-card-badges { flex-wrap: wrap; row-gap: 5px; }
.listing-column-item > article > .listing-card-main,
.listing-column-item > details > summary > .listing-card-main { height: auto; grid-template-rows: minmax(26px, auto) 22px 17px 51px; }
@container listing-card (max-width: 280px) {
  .listing-column-item > article > .listing-card-main,
  .listing-column-item > details > summary > .listing-card-main { grid-template-rows: minmax(26px, auto) 22px 17px 87px; }
}
/* The detection time takes only what is left of the first line (shortening with "…"); when
   less than about three characters' room remains it is hidden (script in listings.html). */
.listing-card-badges > .listing-updated-inline { flex: 1 1 0; min-width: 3.2em; text-align: right; }
.listing-card-badges > .listing-updated-inline[hidden] { display: none; }

/* "Sprache der Benachrichtigungen: Deutsch | English" under "Deine Alarme". */
.notification-language { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 1rem; color: var(--text-secondary); font-size: .8rem; }
.notification-language-options { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: color-mix(in srgb, var(--accent-blue) 5%, transparent); }
.notification-language-options button { min-height: 30px; padding: 0 .8rem; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--text-secondary); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.notification-language-options button[aria-pressed="true"] { background: var(--accent-blue); color: var(--button-ink); }
.notification-language-options button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* Alert overview: five summary tiles, then the messages of the last 30 days by kind. */
.statistics-tiles.alert-overview-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.alert-overview-tiles b { white-space: nowrap; }
.alert-overview-tiles b small { display: inline; color: var(--text-secondary); font-size: .6em; font-weight: 600; }
.alert-overview-tiles article.is-problem b { color: var(--danger, #B42318); }
.alert-overview-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin: .4rem 0 .9rem; color: var(--text-secondary); font-size: .8rem; }
.alert-overview-kind { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-primary); }
.alert-overview-kind b { font-weight: 700; }
.alert-overview-kind.kind-listing_created b { color: #0F766E; }
.alert-overview-kind.kind-listing_updated b { color: #855411; }
.alert-overview-kind.kind-listing_reappeared b { color: #1E40AF; }

/* Search suggestions above the location list: grouped (Straßen, Projekte, Anbieter), each
   with its place and how many flats it has now, then "Alle Treffer für „…“ anzeigen". */
.search-suggestions { display: grid; gap: 2px; }
.search-suggestions[hidden] { display: none; }
.search-suggestions-heading { margin: .45rem .4rem .15rem; color: var(--text-secondary); font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.search-suggestion { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: .55rem; text-align: left; }
.search-suggestion svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.search-suggestion-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion-text small { display: block; overflow: hidden; color: var(--text-secondary); font-size: .68rem; text-overflow: ellipsis; }
.search-suggestions-all { margin-top: .25rem; padding: .5rem .4rem; border: 0; border-radius: 7px; background: transparent; box-shadow: none; color: var(--accent-blue); font: inherit; font-size: .76rem; font-weight: 600; text-align: left; cursor: pointer; }
/* Hover like the other dropdown options: a soft teal row, the text keeps its colour
   (app.css's generic button:hover would turn it white on the pale background). */
.search-suggestion, .search-suggestions-all { transition: background-color .15s ease; }
.filter-panel .search-suggestion:hover, .filter-panel .search-suggestion:focus-visible,
.filter-panel .search-suggestions-all:hover, .filter-panel .search-suggestions-all:focus-visible {
  border-color: transparent;
  background: var(--filter-control-hover, color-mix(in srgb, var(--accent-blue) 11%, transparent));
}
.filter-panel .search-suggestion:hover { color: var(--text-primary); }
.filter-panel .search-suggestions-all:hover, .filter-panel .search-suggestions-all:focus-visible { color: var(--accent-blue); }
/* "Keine passenden Orte" would read as "nothing found" under a street or project suggestion. */
.location-filter-menu:has(.search-suggestions:not([hidden]) .search-suggestion) [data-location-empty] { display: none; }

/* Search field while in use (focused or its dropdown open), on every screen size: white, the
   caret at the left after the icon, and the "Ort, Straße …" / "PLZ, Straße" label gone. */
.filter-panel #listing-filters .location-search-input:focus,
.filter-panel #listing-filters .location-search-input[aria-expanded="true"] { background: var(--card-bg); text-align: left; }
.filter-panel .location-search-input:focus + .location-display-placeholder,
.filter-panel .location-search-input[aria-expanded="true"] + .location-display-placeholder { display: none; }

/* Typed text always starts at the left after the icon, focused or not (the resting
   label is the separate, centred placeholder overlay). `.filters input` sets
   text-align-last: center, which centres a single line even with text-align: left. */
.filter-panel #listing-filters .location-search-input { text-align: left; text-align-last: left; }
/* Desktop and tablets: a wider search dropdown so street and project names fit on one line. */
@media (min-width: 640px) {
  .filter-panel .location-field .location-filter-menu { width: min(max(100%, 440px), calc(100vw - 2rem)); }
}
/* Search results read top-down: places ("Orte"), then streets, projects and providers.
   The places list gets its heading only while street/project suggestions show under it. */
.location-picker-scroll:has(.search-suggestions:not([hidden])) .location-search-results:not(:empty)::before {
  content: attr(data-heading);
  margin: .45rem .4rem .15rem;
  color: var(--text-secondary);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Operations: the production server (CPU, RAM, swap, disk) as one of four summary cards and a
   panel of usage bars; green, yellow from 80 %, red from 90 %. */
.operations-page .monitoring-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .operations-page .monitoring-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-page .monitoring-summary article:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.server-meters { display: grid; gap: .55rem; padding: .75rem .75rem .35rem; }
.server-meter { --meter-color: #24966c; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 15rem); align-items: center; gap: .75rem; font-size: .76rem; }
.server-meter.is-warning { --meter-color: #d7a315; }
.server-meter.is-failed { --meter-color: #dc5050; }
.server-meter-label { color: var(--text-primary); font-weight: 650; }
.server-meter-bar { height: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--text-secondary) 14%, transparent); }
.server-meter-bar i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--meter-color); }
.server-meter-value { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-panel .server-facts { display: grid; grid-template-columns: max-content max-content; gap: .25rem 1rem; margin: .35rem .75rem 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: .74rem; }
.server-facts dt { color: var(--text-secondary); }
.server-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.server-note { margin: .55rem .75rem .75rem; font-size: .68rem; }
@media (max-width: 639px) {
  .server-meter { grid-template-columns: 3.6rem minmax(0, 1fr); row-gap: .2rem; }
  .server-meter-value { grid-column: 2; white-space: normal; }
}
/* Two servers in the panel (app server, proxy) and as two lines on the summary card. */
.server-block { padding: .25rem 0 .35rem; }
.server-block + .server-block { border-top: 1px solid var(--border); }
.server-block h3 { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: .6rem .75rem 0; font-size: .78rem; }
.server-block h3 > span { display: inline-flex; align-items: center; gap: .45rem; }
.server-block h3 small { color: var(--text-secondary); font-size: .68rem; font-weight: 500; }
.server-block h3 .system-health-dot { width: 7px; height: 7px; flex-basis: 7px; box-shadow: none; }
.server-block .server-meters { padding-top: .55rem; }
.server-block .server-note { margin-bottom: .35rem; }
.server-problem { color: #c24141; font-weight: 600; }
.monitoring-summary .server-lines { display: grid; gap: .2rem; }
.monitoring-summary .server-lines > span { display: flex; align-items: center; gap: .4rem; }
.monitoring-summary .server-lines .system-health-dot { width: 6px; height: 6px; flex-basis: 6px; box-shadow: none; }
.monitoring-summary .server-lines b { display: inline; flex: 0 0 2.6rem; margin: 0; color: var(--text-primary); font-size: inherit; font-weight: 650; line-height: inherit; }
.monitoring-summary .server-lines .server-line-off { padding-left: calc(6px + .4rem); color: var(--text-tertiary, var(--text-secondary)); }

/* "In Bau": building still under construction. Sky blue with a crane icon, apart from the
   royal-blue "active" status pill and the violet "Kaufoption"; the move-in on the location
   line takes the same colour. */
.listing-construction {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 3px 8px; border-radius: 999px;
  background: #E0F2FE; color: #075985; font-size: 9.5px; line-height: 1.2; font-weight: 750; letter-spacing: .04em;
  white-space: nowrap; text-transform: uppercase;
}
.listing-construction svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.listing-availability.is-construction { color: #0369A1; font-weight: 600; }
.listing-card.is-taken .listing-construction { opacity: .7; }
:root[data-theme="dark"] .listing-construction { background: rgba(56, 189, 248, .16); color: #7DD3FC; }
:root[data-theme="dark"] .listing-availability.is-construction { color: #7DD3FC; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .listing-construction { background: rgba(56, 189, 248, .16); color: #7DD3FC; }
  :root:not([data-theme="light"]) .listing-availability.is-construction { color: #7DD3FC; }
}
/* "Auch Wohnungen in Bau" switch in the availability menu, under the custom range. */
.construction-switch { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .7rem 0 0; padding: .65rem .1rem 0; border-top: 1px solid var(--border); color: var(--text-primary); font-size: .8rem; font-weight: 600; cursor: pointer; }
.construction-switch > span { display: inline-flex; align-items: center; gap: .4rem; }
.construction-switch svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #0369A1; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.construction-switch small { color: var(--text-secondary); font-weight: 500; }

/* Calmer cards: the badge row holds the status ("Neu · vor 2 Min.", with a pulsing dot
   while just detected) and, for an address with several flats, the unit count ("23 Wohnungen"), and
   what the flat is goes on one quiet line under the address: "In Bau · Bezug April 2027"
   (blue crane) and "Kaufoption" (violet house with an up arrow). Every card keeps the line's row,
   empty when there is nothing to say, so all tiles have the same height. The line stays one line:
   the move-in text shortens with "…" before "Kaufoption" does. */
.listing-column-item > article > .listing-card-main,
.listing-column-item > details > summary > .listing-card-main { grid-template-rows: minmax(26px, auto) 22px 17px 21px 51px; }
@container listing-card (max-width: 280px) {
  .listing-column-item > article > .listing-card-main,
  .listing-column-item > details > summary > .listing-card-main { grid-template-rows: minmax(26px, auto) 22px 17px 21px 87px; }
}
.listing-column-item > article > .listing-card-main > .listing-tags,
.listing-column-item > details > summary > .listing-card-main > .listing-tags { grid-row: 4; align-self: start; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.listing-column-item .listing-tags > .listing-tag { flex: none; white-space: nowrap; }
.listing-column-item .listing-tags > .listing-tag.is-construction { flex: 0 1 auto; overflow: hidden; }
.listing-column-item .listing-tags > .listing-tag > span { overflow: hidden; text-overflow: ellipsis; }
.listing-column-item > article > .listing-card-main > .listing-facts,
.listing-column-item > details > summary > .listing-card-main > .listing-facts { grid-row: 5; }
.listing-tags { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 5px 0 0; font-size: .72rem; line-height: 1.35; }
.listing-tag { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-weight: 600; }
.listing-tag svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.listing-tag.is-construction { color: #0369A1; }
.listing-tag.is-purchase { color: #6D28D9; }
:root[data-theme="dark"] .listing-tag.is-construction { color: #7DD3FC; }
:root[data-theme="dark"] .listing-tag.is-purchase { color: #C4B5FD; }
/* An address where only some flats have a purchase option: "Kaufoption · 1 von 78" on the card,
   and those flats' rows (listed first) carry the same violet house and a light violet tint. */
.listing-tag .listing-tag-share { display: inline; margin: 0 0 0 4px; color: var(--text-secondary); font-size: inherit; font-weight: 500; line-height: inherit; }
.unit-row.has-purchase { border-radius: 6px; background: color-mix(in srgb, #6D28D9 7%, transparent); }
.unit-row-purchase { display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; fill: none; stroke: #6D28D9; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .unit-row.has-purchase { background: color-mix(in srgb, #C4B5FD 10%, transparent); }
:root[data-theme="dark"] .unit-row-purchase { stroke: #C4B5FD; }
.listing-card.is-taken .listing-tags { opacity: .7; }
/* The switch itself looks exactly like the toolbar's "taken" switch (.taken-toggle-box): outlined
   track with a grey knob when off, teal track with the knob right when on, same timing; bigger
   on phones. The form's id keeps the site's general input styles off it. */
#listing-filters .filter-switch input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; box-sizing: border-box; flex: none;
  width: 24px; height: 14px; min-width: 0; max-width: none; min-height: 0; margin: 0; padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--text-secondary) 55%, transparent); border-radius: 999px;
  background: transparent; box-shadow: none; cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease;
}
#listing-filters .filter-switch input[type="checkbox"]::after {
  content: ""; position: absolute; top: 50%; left: 2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-secondary); transform: translateY(-50%); box-shadow: none;
  transition: left 240ms cubic-bezier(.2, .8, .2, 1), background-color 220ms ease;
}
#listing-filters .filter-switch input[type="checkbox"]:checked { border-color: var(--accent-blue); background: var(--accent-blue); }
#listing-filters .filter-switch input[type="checkbox"]:checked::after { left: calc(100% - 10px); background: var(--button-ink); }
#listing-filters .filter-switch input[type="checkbox"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 639px) {
  #listing-filters .filter-switch input[type="checkbox"] { width: 34px; height: 20px; }
  #listing-filters .filter-switch input[type="checkbox"]::after { width: 14px; height: 14px; }
  #listing-filters .filter-switch input[type="checkbox"]:checked::after { left: calc(100% - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  #listing-filters .filter-switch input[type="checkbox"],
  #listing-filters .filter-switch input[type="checkbox"]::after { transition: none; }
}
/* "Nur mit Kaufoption" as the same switch: label left (violet house with an up arrow), switch right, hint below. */
.purchase-option-check.filter-switch { justify-content: space-between; gap: .75rem; }
.purchase-option-check.filter-switch > span { display: inline-flex; align-items: center; gap: .4rem; }
.purchase-option-check.filter-switch svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #6D28D9; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .purchase-option-check.filter-switch svg { stroke: #C4B5FD; }
.purchase-option-check.filter-switch + .purchase-option-hint { margin-left: calc(15px + .4rem); }

/* Search placeholder ("Ort, Straße, Projekt oder Anbieter") in a narrow field: it was centred
   wider than the field, so it ran under the magnifier ("t, Straße, …") and off the right edge.
   It keeps clear of the icon and the × like the typed text does and ends in "…" when the field
   is narrower than the wording. Desktop and iPad keep the full wording; phones the short one
   ("PLZ, Straße", the rule for max-width 639px further up). */
.filter-panel .location-display-placeholder { padding: 0 2rem 0 2.1rem; justify-content: safe center; }
.filter-panel .location-display-placeholder > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 639px) {
  .filter-panel .location-display-placeholder { padding: 0 2.5rem; }
}

/* "Wohnungen in Bau": Alle · Bezugsfertig · Nur in Bau, three segments under the availability
   range, each with its count; the chosen one teal like the selected presets above it. */
.construction-choice { margin: .7rem 0 0; padding: .65rem 0 0; border: 0; border-top: 1px solid var(--border); min-width: 0; }
.construction-choice legend { display: inline-flex; align-items: center; gap: .4rem; float: left; width: 100%; margin: 0 0 .45rem; padding: 0; color: var(--text-primary); font-size: .8rem; font-weight: 600; }
.construction-choice legend svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #0369A1; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .construction-choice legend svg { stroke: #7DD3FC; }
.construction-options { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.construction-options label { position: relative; display: block; min-width: 0; cursor: pointer; }
.construction-options input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.construction-options span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 40px; padding: 4px 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--filter-control-bg, var(--surface));
  color: var(--text-primary); font-size: .75rem; font-weight: 600; line-height: 1.2; text-align: center;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.construction-options small { color: var(--text-secondary); font-size: .68rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.construction-options label:hover span { border-color: var(--accent-blue); }
.construction-options input:checked + span { border-color: var(--accent-blue); background: var(--accent-blue); color: var(--button-ink); }
.construction-options input:checked + span small { color: inherit; opacity: .85; }
.construction-options input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* All switches a little bigger: 30 × 17 on desktop, 40 × 23 on phones ("taken" and Kaufoption). */
.taken-toggle .taken-toggle-box,
#listing-filters .filter-switch input[type="checkbox"] { width: 30px; height: 17px; }
.taken-toggle .taken-toggle-box::after,
#listing-filters .filter-switch input[type="checkbox"]::after { left: 2px; width: 11px; height: 11px; }
.taken-toggle[aria-pressed="true"] .taken-toggle-box::after,
#listing-filters .filter-switch input[type="checkbox"]:checked::after { left: calc(100% - 13px); }
@media (max-width: 639px) {
  .taken-toggle .taken-toggle-box,
  #listing-filters .filter-switch input[type="checkbox"] { width: 40px; height: 23px; }
  .taken-toggle .taken-toggle-box::after,
  #listing-filters .filter-switch input[type="checkbox"]::after { width: 17px; height: 17px; }
  .taken-toggle[aria-pressed="true"] .taken-toggle-box::after,
  #listing-filters .filter-switch input[type="checkbox"]:checked::after { left: calc(100% - 19px); }
}

/* Admin "Market" page (/market): the Statistics page's tiles and cards, with plain HTML/CSS
   charts. Regions share one teal ramp (Vienna darkest); amber marks our own imports. */
:root {
  --market-vienna: #0B4F47; --market-lower-austria: #0F766E; --market-burgenland: #14B8A6;
  --market-styria: #5EEAD4; --market-upper-austria: #99F6E4; --market-region-rest: #CCFBF1;
  --market-other: #B8C2CC; --market-import: #B7791F;
}
:root[data-theme="dark"] {
  --market-vienna: #99F6E4; --market-lower-austria: #2DD4BF; --market-burgenland: #14B8A6;
  --market-styria: #0F766E; --market-upper-austria: #115E59; --market-region-rest: #134E4A;
  --market-other: #475569; --market-import: #F0B35A;
}
.market-page { display: grid; gap: 1rem; }
.market-page > .statistics-note { margin: 0; }
.market-heading { flex-wrap: wrap; align-items: flex-end; margin-bottom: 0; }
.market-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.market-filters .button { width: auto; }
.market-filters select { width: auto; max-width: 14rem; min-height: 34px; padding: .3rem 1.6rem .3rem .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--text-primary); font: inherit; font-size: .78rem; }
.market-filters .button { min-height: 34px; padding: 0 .8rem; font-size: .78rem; }
.statistics-tiles.market-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.market-tiles small { color: var(--market-import); font-weight: 600; }
.market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.market-card { min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--card-shadow); }
.market-card h2 { margin: 0; font-size: 1rem; }
.market-intro { margin: .2rem 0 .8rem; color: var(--text-secondary); font-size: .74rem; line-height: 1.45; }
.market-subheading { margin: 1rem 0 .5rem; font-size: .86rem; }
.market-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .6rem 0 0; color: var(--text-secondary); font-size: .7rem; }
.market-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.market-import-note { margin: .35rem 0 0; color: var(--text-secondary); font-size: .72rem; }
.market-import-note b { color: var(--market-import); font-weight: 600; }
/* Both charts are smooth areas (_area_chart.html); under the supply curve the latest point
   by region, under the new flats a key for the imports noted above the curve. */
.market-area { margin-top: .3rem; }
.market-region-shares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem 1.2rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .74rem; }
.market-region-shares li { display: flex; align-items: center; gap: .45rem; min-width: 0; color: var(--text-secondary); }
.market-region-shares i { flex: none; width: 9px; height: 9px; border-radius: 3px; }
.market-region-shares b { margin-left: auto; color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.market-import-key { color: var(--market-import); font-weight: 700; }
.market-region-vienna { background: var(--market-vienna); }
.market-region-lower-austria { background: var(--market-lower-austria); }
.market-region-burgenland { background: var(--market-burgenland); }
.market-region-styria { background: var(--market-styria); }
.market-region-upper-austria { background: var(--market-upper-austria); }
.market-region-salzburg, .market-region-carinthia, .market-region-tyrol, .market-region-vorarlberg { background: var(--market-region-rest); }
.market-region-other { background: var(--market-other); }
.market-posted { background: var(--accent-blue); }
.market-imported { background: repeating-linear-gradient(45deg, var(--market-import) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--market-import); }
.market-heatmap td { height: 26px; }
/* Survival curve (SVG): colours from the theme. */
.market-survival { display: block; width: 100%; height: auto; }
.market-gridline { stroke: var(--border); stroke-width: .6; }
.market-axis { fill: var(--text-secondary); font-size: 10px; }
.market-value { fill: var(--text-primary); font-size: 10px; font-weight: 600; }
.market-survival-area { fill: color-mix(in srgb, var(--accent-blue) 12%, transparent); }
.market-survival-line { fill: none; stroke: var(--accent-blue); stroke-width: 2; }
.market-survival-dot { fill: var(--accent-blue); }
/* Horizontal bars: label, track, value, count. */
.market-hbars { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.market-hbars li, .market-box-row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 4.6rem 4.8rem; align-items: center; gap: .6rem; font-size: .76rem; }
.market-hbar-label { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); line-height: 1.3; }
.market-hbar-label small { color: var(--text-secondary); }
.market-hbars b, .market-box-row b { color: var(--text-primary); font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; font-size: .76rem; font-weight: 500; text-align: right; white-space: nowrap; }
.market-hbars small, .market-box-row > small { color: var(--text-secondary); font-size: .68rem; white-space: nowrap; }
.market-hbar-track { display: flex; height: 12px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--text-secondary) 10%, transparent); }
.market-hbar-track i { display: block; height: 100%; background: var(--accent-blue); }
.market-hbar-track i.is-fast { background: var(--market-import); }
.market-hbar-track i.is-weekend { background: var(--market-other); }
.market-detection li { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 4.2rem 5.6rem; }
.market-hbar-track i.market-crawl, .market-legend i.market-crawl { background: var(--market-vienna); }
.market-legend i.market-interval { background: var(--accent-blue); }
/* Rent boxes: positions are shares of the shared euro axis. */
.market-boxes { display: grid; gap: .55rem; }
.market-box-track { position: relative; height: 16px; }
.market-box-track i { position: absolute; top: 50%; transform: translateY(-50%); }
.market-whisker { height: 2px; background: var(--market-burgenland); }
.market-box { height: 14px; border: 1px solid var(--accent-blue); border-radius: 3px; background: color-mix(in srgb, var(--accent-blue) 22%, transparent); box-sizing: border-box; }
.market-median { width: 3px; height: 18px; margin-left: -1.5px; border-radius: 1px; background: var(--market-vienna); }
.market-box-axis .market-box-track { height: 14px; }
.market-box-axis em { position: absolute; transform: translateX(-50%); color: var(--text-secondary); font-size: .64rem; font-style: normal; white-space: nowrap; }
.market-districts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .2rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.market-districts li { display: flex; align-items: baseline; gap: .45rem; padding: .3rem 0; border-bottom: 1px solid var(--border); font-size: .76rem; }
.market-districts span { color: var(--text-primary); font-weight: 600; }
.market-districts b { margin-left: auto; font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; font-weight: 500; }
.market-districts small { color: var(--text-secondary); font-size: .66rem; }
@media (max-width: 760px) {
  .market-grid { grid-template-columns: 1fr; }
  .market-region-shares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-hbars li, .market-box-row { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) 4.2rem; }
  .market-hbars li > small, .market-box-row > small { display: none; }
  .market-detection li { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 3.6rem; }
}

/* Analytics (admin): Visitors and Market as two tabs beside the heading (_analytics_tabs.html),
   a pill switch whose highlight slides to the chosen tab. */
.analytics-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin-bottom: .35rem; }
.analytics-title h1 { margin: 0; line-height: 1.05; }
/* Segmented switch: two equal halves and one highlight that slides to the chosen tab. */
.analytics-tabs { position: relative; display: inline-grid; grid-auto-columns: 1fr; grid-auto-flow: column; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: inset 0 1px 2px rgba(36, 54, 83, .06); transition: border-color 220ms ease, background-color 220ms ease; }
.analytics-tabs:hover { border-color: var(--accent-blue); }
:root[data-theme="dark"] .analytics-tabs { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.analytics-tabs::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--accent-blue); box-shadow: 0 1px 4px rgba(36, 54, 83, .18); transition: transform .28s cubic-bezier(.3, .7, .2, 1); }
.analytics-tabs[data-active="market"]::before { transform: translateX(100%); }
.analytics-tabs a { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 1.15rem; border-radius: 999px; color: var(--text-secondary); font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.analytics-tabs a:hover { color: var(--text-primary); background: transparent; }
.analytics-tabs[data-active="visitors"] a[data-tab="visitors"], .analytics-tabs[data-active="market"] a[data-tab="market"] { color: var(--button-ink); }
.analytics-tabs a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .analytics-tabs::before, .analytics-tabs a { transition: none; }
}

/* System monitoring, problems first (operations.html): one status line, "Needs attention",
   four cards that open their detail, provider list with a 24-hour crawl strip. */
.monitoring-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin: .25rem 0 0; color: var(--text-secondary); font-size: .78rem; }
.monitoring-status-line b { font-weight: 600; }
.monitoring-status-line .is-failed { color: var(--status-removed); }
.monitoring-status-line .is-warning { color: var(--status-changed); }
.monitoring-status-line .monitoring-dot, .monitoring-needs .monitoring-dot { width: 8px; height: 8px; flex: 0 0 8px; }
.monitoring-dot.is-healthy { background: #24966c; }
.monitoring-dot.is-warning { background: #d7a315; }
.monitoring-dot.is-failed { background: #dc5050; }
.monitoring-needs { margin: 0 0 .7rem; padding: .75rem .9rem; border: 1px solid var(--border); border-left: 4px solid var(--status-changed); border-radius: 10px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.monitoring-needs.is-failed { border-left-color: var(--status-removed); }
.monitoring-needs.is-clear { padding: .55rem .9rem; border-left-color: var(--status-new); }
.monitoring-needs.is-clear p { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--text-primary); font-size: .82rem; font-weight: 600; }
.monitoring-needs h2 { margin: 0 0 .35rem; font-size: .9rem; }
.monitoring-needs ul { display: grid; margin: 0; padding: 0; list-style: none; }
.monitoring-needs li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .5rem 0; border-top: 1px solid var(--border); }
.monitoring-needs li > div { min-width: 0; }
.monitoring-needs strong { display: block; color: var(--text-primary); font-size: .82rem; }
.monitoring-needs small { display: block; margin-top: .1rem; overflow-wrap: anywhere; color: var(--text-secondary); font-size: .72rem; line-height: 1.4; }
.monitoring-item-action { min-height: 30px; padding: 0 .75rem; font-size: .74rem; white-space: nowrap; }
.monitoring-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin: 0 0 .7rem; }
.monitoring-card { display: block; min-width: 0; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); box-shadow: var(--card-shadow); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.monitoring-card:hover { border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--border)); background: color-mix(in srgb, var(--accent-blue) 5%, var(--card-bg)); color: var(--text-primary); }
.monitoring-card[aria-expanded="true"] { border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue), var(--card-shadow); }
.monitoring-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.monitoring-card-body { display: grid; gap: .25rem; }
.monitoring-card .system-summary-heading { margin-bottom: .2rem; }
.monitoring-card .system-summary-heading strong { font-size: .82rem; }
.monitoring-panel-body { margin: 0 0 .7rem; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.monitoring-panel-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .6rem; }
.monitoring-filter { min-height: 28px; padding: 0 .7rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-secondary); font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; }
.monitoring-filter:hover { border-color: var(--accent-blue); background: transparent; color: var(--text-primary); }
.monitoring-filter[aria-pressed="true"], .monitoring-filter[aria-pressed="true"]:hover { border-color: transparent; background: var(--accent-blue); color: var(--button-ink); }
/* Scrapers panel: one group per kind of crawl (flats, upcoming projects). The header sums the
   group up; closed, only its problems show (or one "all fine" line); open, every row with
   column names, problems first. */
.scraper-group { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: clip; }
.scraper-group + .scraper-group { margin-top: .7rem; }
.scraper-group-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; width: 100%; min-height: 0; padding: .7rem .85rem; border: 0; border-radius: 0; background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.scraper-group-head:hover { background: var(--card-bg); color: var(--text-primary); }
.scraper-group-head:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.scraper-group-chevron { width: 18px; height: 18px; fill: none; stroke: var(--text-secondary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.scraper-group.is-open .scraper-group-chevron { transform: rotate(90deg); }
.scraper-group-title { min-width: 0; }
.scraper-group-title strong { display: block; font-size: .9rem; }
.scraper-group-title small { display: block; margin-top: .1rem; color: var(--text-secondary); font-size: .68rem; font-weight: 500; }
.scraper-group-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.scraper-count { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--text-secondary) 9%, transparent); font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scraper-count i { width: 7px; height: 7px; border-radius: 50%; background: #24966c; }
.scraper-count.is-warning { background: color-mix(in srgb, #d7a315 16%, transparent); }
.scraper-count.is-warning i { background: #d7a315; }
.scraper-count.is-failed { background: color-mix(in srgb, #dc5050 14%, transparent); }
.scraper-count.is-failed i { background: #dc5050; }
.scraper-count.is-disabled i { background: color-mix(in srgb, var(--text-secondary) 45%, transparent); }
.scraper-count.is-zero { opacity: .4; }
.scraper-group-toggle { color: var(--accent-blue); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.scraper-group-toggle .when-open, .scraper-group.is-open .scraper-group-toggle .when-closed { display: none; }
.scraper-group.is-open .scraper-group-toggle .when-open { display: inline; }
.scraper-group-body.provider-health-list { padding: 0 .45rem .45rem; }
.scraper-group:not(.is-open) .provider-health-item:not(.is-problem),
.scraper-group:not(.is-open) .scraper-columns { display: none; }
.scraper-group:not(.is-open) .scraper-group-body:not(:has(.is-problem, .scraper-group-fine)) { display: none; }
.scraper-group.is-open .scraper-group-fine { display: none; }
.scraper-group-fine { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .1rem .45rem .35rem; color: var(--text-secondary); font-size: .74rem; }
.scraper-group-fine i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #24966c; }
.scraper-columns { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(110px, .75fr) minmax(180px, 1fr) minmax(190px, 1.1fr) minmax(130px, .8fr); gap: .55rem; padding: .2rem .65rem .35rem; color: var(--text-secondary); font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 760px) {
  .scraper-group-head { grid-template-columns: auto minmax(0, 1fr); }
  .scraper-group-counts, .scraper-group-toggle { grid-column: 2; justify-content: flex-start; }
  .scraper-columns { display: none !important; }
}
/* 24 hours of crawls in half-hour slots, oldest left. */
.crawl-strip { display: flex; gap: 1px; width: 100%; max-width: 15rem; height: 7px; margin-top: .3rem; }
.crawl-strip i, .crawl-strip-legend i { flex: 1 1 0; min-width: 1px; border-radius: 1px; background: color-mix(in srgb, var(--text-secondary) 22%, transparent); }
.crawl-strip i.is-ok, .crawl-strip-legend i.is-ok { background: #24966c; }
.crawl-strip i.is-warning, .crawl-strip-legend i.is-warning { background: #d7a315; }
.crawl-strip i.is-failed, .crawl-strip-legend i.is-failed { background: #dc5050; }
.crawl-strip-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .45rem; margin-left: auto; color: var(--text-secondary); font-size: .68rem; }
.crawl-strip-legend i { flex: 0 0 9px; width: 9px; height: 9px; margin-left: .35rem; }
@media (max-width: 899px) { .monitoring-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .monitoring-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitoring-needs li { grid-template-columns: 8px minmax(0, 1fr); }
  .monitoring-needs li > .monitoring-item-action { grid-column: 2; justify-self: start; }
  .crawl-strip-legend { margin-left: 0; }
}

/* Analytics → Visitors (statistics.html): the Market tab's cards and charts, plus a change
   against the period before, the path to alerts and demand (clicks) against supply. */
.market-tiles small.is-up { color: var(--status-new); }
.market-tiles small.is-down { color: var(--status-removed); }
.visitors-page .market-tiles span small { font-weight: 600; }
.visitors-page .market-tiles span small:not(.is-up):not(.is-down) { color: var(--text-secondary); font-weight: 500; }
.visitors-area { margin-top: .4rem; }
.visitors-entries code { padding: 0; background: transparent; color: var(--text-primary); font-size: .74rem; overflow-wrap: anywhere; }
.visitors-entries .market-hbar-label small { color: var(--text-secondary); }
.visitors-funnel li { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 3.6rem 3.8rem; }
.market-hbar-track i.is-account { background: var(--market-lower-austria); }
.visitors-demand .market-hbar-track { position: relative; overflow: visible; }
.visitors-demand .market-hbar-track i { border-radius: 4px; }
.visitors-supply-mark { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--market-vienna); }
.visitors-demand small { min-width: 0; }
/* Each number says what it is: "Klicks 40 %" (the bar) and "Angebot 10 %" (the mark). */
.visitors-demand li { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 5.4rem 6.4rem; }
.visitors-demand li > b, .visitors-demand li > small { white-space: nowrap; font-variant-numeric: tabular-nums; }
.visitors-demand li > b span, .visitors-demand li > small span { color: var(--text-secondary); font-size: .66rem; font-weight: 500; }
.visitors-demand-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .65rem 0 0; color: var(--text-secondary); font-size: .7rem; }
.visitors-demand-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.visitors-demand-legend i { display: inline-block; flex: none; }
.visitors-demand-legend i.is-clicks { width: 16px; height: 8px; border-radius: 4px; background: var(--accent-blue); }
.visitors-demand-legend i.is-supply { width: 3px; height: 12px; border-radius: 2px; background: var(--market-vienna); }
@media (max-width: 760px) { .visitors-demand li { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) 5.2rem; } }
.visitors-page .statistics-ranking { margin: 0; grid-column: 1 / -1; }
.visitors-page .statistics-ranking ol { box-shadow: none; }
.visitors-devices .market-hbar-label { display: inline-flex; align-items: center; gap: .45rem; }
.visitors-devices svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: var(--text-secondary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.visitors-devices-note { margin: .7rem 0 0; color: var(--text-secondary); font-size: .72rem; }
@media (max-width: 760px) {
  .visitors-funnel li { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 3rem; }
}

/* The crawl log sits at the bottom of the Scrapers panel: a section, not a card in a card. */
.provider-monitoring-panel .crawl-log-panel { margin: .9rem 0 0; box-shadow: none; }

/* Projects view of the listings page (?view=projects): rental projects being built or planned.
   Cards sit in a grid like the listing tiles; the stage (In Bau blue, In Planung amber) leads each card. */
.listing-projects { display: grid; gap: .8rem; margin: 0 0 1.5rem; }
.project-alerts-shell { width: min(100% - 2rem, 780px); margin: 2rem auto 4rem; }
.project-alerts-shell h1 { margin: .4rem 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.project-alerts-intro, .project-alerts-note { color: var(--text-secondary); font-size: .88rem; }
.project-alerts-back { color: var(--accent-blue); font-size: .82rem; text-decoration: none; }
.project-alerts-box { margin: 1rem 0; padding: 1.2rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); }
.project-alerts-box h2 { margin: 0 0 1rem; font-size: 1.05rem; }
.project-alerts-form, .project-alerts-form label { display: grid; gap: .45rem; }
.project-alerts-form { gap: 1rem; }
.project-alerts-form label { color: var(--text-primary); font-size: .8rem; font-weight: 600; }
.project-alerts-form input:not([type=checkbox]), .project-alerts-form select { width: 100%; min-height: 40px; padding: .45rem .65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text-primary); font: inherit; font-weight: 400; }
.project-alerts-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.project-alerts-events { display: grid; gap: .5rem; margin: 0; padding: .75rem; border: 1px solid var(--border); border-radius: 8px; }
.project-alerts-events legend { padding: 0 .25rem; font-size: .8rem; font-weight: 700; }
.project-alerts-events label { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; min-height: 32px; font-weight: 500; cursor: pointer; }
.project-alerts-events input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; margin: 0; padding: 0; accent-color: var(--accent-blue); cursor: pointer; }
.project-alerts-submit { justify-self: start; padding: .6rem .9rem; border: 0; border-radius: 8px; background: var(--accent-blue); color: var(--button-ink); font: inherit; font-weight: 700; cursor: pointer; }
.project-alerts-submit:disabled { opacity: .5; cursor: not-allowed; }
.project-alerts-saved { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--border); }
.project-alerts-saved > div:first-child { flex: 1; min-width: 0; }
.project-alerts-saved p { margin: .25rem 0; font-size: .82rem; }
.project-alerts-saved small { font-size: .75rem; }
.project-alerts-delivery-status { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: -.2rem 0 .65rem; font-size: .8rem; }
.project-alerts-delivery-status > span:not(.project-alerts-state) { color: var(--text-secondary); }
.project-alerts-delivery-status time { color: var(--text-secondary); }
.project-alerts-test-status { color: var(--text-secondary); }
.project-alerts-state { font-weight: 700; }
.project-alerts-state.is-sent { color: var(--status-new); }
.project-alerts-state.is-failed, .project-alerts-state.is-unknown { color: var(--status-removed); }
.project-alerts-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex: none; }
.project-alerts-saved .project-alerts-test-button { padding: .4rem .65rem; border: 1px solid var(--accent-blue); border-radius: 7px; background: var(--accent-soft); color: var(--accent-blue); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.project-alerts-saved .project-alerts-test-button:not(:disabled):hover { background: var(--accent-blue); color: var(--button-ink); }
.project-alerts-saved .project-alerts-test-button:disabled { opacity: .5; cursor: not-allowed; }
.project-alerts-saved .project-alerts-remove { padding: .3rem; border: 0; background: none; color: var(--status-removed); font: inherit; font-size: .75rem; cursor: pointer; }
@media (max-width: 640px) {
  .project-alerts-filters { grid-template-columns: 1fr; }
  .project-alerts-saved { flex-direction: column; }
  .project-alerts-actions { flex-direction: row; align-items: center; }
}
.projects-count { margin: 0; color: var(--text-secondary); font-size: .8rem; }
/* 4 tiles a row on desktop, 3 on small laptops, 2 on tablets, 1 on phones. */
.projects-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .projects-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Compact tile (option A): one fixed layout for every provider, about half the old height. */
.project-card { position: relative; display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: .9rem 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--card-shadow); transition: transform 160ms ease, box-shadow 160ms ease; }
/* Clickable like the flat cards: the link covers the tile; the "online" chip stays its own link. */
.project-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-blue) 13%, transparent); }
.project-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.project-card-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.project-card .project-online { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .project-card, .project-card:hover { transition: none; transform: none; } }
.project-card-top { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.project-stage { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: .1rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700; }
.project-stage svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.project-stage.is-construction { color: #0369A1; background: #E0F2FE; }
.project-stage.is-planning { color: var(--status-changed); background: var(--status-changed-bg); }
:root[data-theme="dark"] .project-stage.is-construction { color: #7DD3FC; background: rgba(125, 211, 252, .12); }
.project-purchase { display: inline-flex; flex: none; color: #6D28D9; }
:root[data-theme="dark"] .project-purchase { color: #C4B5FD; }
.project-purchase svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.project-provider { min-width: 0; margin-left: auto; overflow: hidden; color: var(--text-secondary); font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.project-name, .project-place { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-name { font-size: 1.02rem; line-height: 1.3; }
.project-place { margin-top: -.3rem; color: var(--text-secondary); font-size: .82rem; }
.project-reservation { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; padding: .12rem 0; color: var(--text-secondary); font-family: inherit; font-size: .75rem; font-weight: 500; line-height: 1.35; }
.project-reservation::before { content: ""; width: .36rem; height: .36rem; flex: none; border: 1.5px solid currentColor; border-radius: 50%; }
.project-reservation.is-open { color: var(--status-new); }
.project-reservation.is-closed { color: var(--status-removed); }
/* Completion matters most: its own column at the right, never cut, a size up. */
.project-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) max-content; gap: .6rem; margin: .1rem 0 0; padding: .45rem 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; }
.project-facts div { display: grid; gap: 1px; min-width: 0; }
.project-facts dt { overflow: hidden; color: var(--text-secondary); font-size: .66rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.project-facts dd { margin: 0; overflow: hidden; font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.project-facts dd.is-unknown { color: var(--text-tertiary); font-weight: 500; }
.project-facts div:last-child { justify-items: end; text-align: right; }
.project-facts div:last-child dd { overflow: visible; font-size: 1rem; color: var(--text-primary); }
.project-facts div:last-child dd.is-unknown { font-size: .86rem; color: var(--text-tertiary); }
.project-actions { display: flex; align-items: center; gap: .5rem; min-height: 22px; margin-top: auto; padding-top: .15rem; font-size: .78rem; font-weight: 600; }
.project-actions a { color: var(--accent-blue); text-decoration: none; }
.project-actions a:hover { text-decoration: underline; }
.project-online { flex: none; padding: .1rem .45rem; background: var(--accent-soft); border-radius: 6px; }
.project-source { min-width: 0; margin-left: auto; overflow: hidden; color: var(--accent-blue); text-overflow: ellipsis; white-space: nowrap; }
.projects-empty { margin: 0; padding: 1.2rem; color: var(--text-secondary); background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; }
@media (max-width: 639px) {
  .projects-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Upcoming projects on the map: violet rounded squares with a crane, so they differ from the
   round flat markers by shape as well as colour; dashed when only approximately placed. */
.leaflet-marker-icon.map-project-marker,
.map-legend i.is-project { --project-marker: #7C3AED; --project-ink: #FFFFFF; }
:root[data-theme="dark"] .leaflet-marker-icon.map-project-marker,
:root[data-theme="dark"] .map-legend i.is-project { --project-marker: #A78BFA; --project-ink: #0B1117; }
.leaflet-marker-icon.map-project-marker {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0;
  color: var(--project-ink); background: var(--project-marker); border: 2px solid var(--card-bg);
  border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.leaflet-marker-icon.map-project-marker:hover { filter: brightness(1.1); }
.leaflet-marker-icon.map-project-marker svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.leaflet-marker-icon.map-project-marker.is-approximate {
  color: var(--project-marker); background: color-mix(in srgb, var(--project-marker) 22%, var(--card-bg));
  border: 2px dashed var(--project-marker); box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.map-legend i.is-project { background: var(--project-marker); border-radius: 3px; }
.map-popup-stage { display: inline-block; margin-bottom: .3rem; padding: 0 .4rem; border-radius: 6px; font-size: .68rem; font-weight: 700; }
.map-popup-stage.is-construction { color: #0369A1; background: #E0F2FE; }
.map-popup-stage.is-planning { color: var(--status-changed); background: var(--status-changed-bg); }
:root[data-theme="dark"] .map-popup-stage.is-construction { color: #7DD3FC; background: rgba(125, 211, 252, .12); }
.map-project-popup .map-popup-facts { margin: 0 0 .2rem; }


/* Neubau view: the filters that only narrow flats (rent, rooms, area, own funds, move-in) are
   greyed out and inert; their chips stay removable but read as paused. Location, provider and
   the text search keep working. */
.search-console:has(#listing-filters[data-results-view="projects"]) .filter-cell[data-flat-only] { opacity: .38; filter: grayscale(1); }
.search-console:has(#listing-filters[data-results-view="projects"]) .applied-filter-chip[data-flat-only] { opacity: .5; text-decoration: line-through; }

/* Monitoring, Alerts: the per-user admin switch is the listings' "vergeben" switch (.taken-toggle). */
.alert-admin-toggle { margin-left: -8px; }
.alert-admin-toggle:disabled { opacity: .6; cursor: progress; }

/* Alerts page (/saved-searches): title with the Telegram connection, then "Neuer Alarm" (left,
   a switch between flats and upcoming projects) beside "Meine Alarme" (right, both kinds).
   Every saved alert is the same row: its kind's icon, name and criteria, buttons on the right. */
.notification-shell { max-width: 1180px; }
.alerts-page { display: grid; gap: 1rem; margin-top: .4rem; }
.alerts-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem 1rem; }
.alerts-head h1 { margin: 0; font-size: 1.5rem; }
.alerts-head p { margin: .2rem 0 0; color: var(--text-secondary); font-size: .86rem; }
.alerts-connection { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.alerts-connection form { margin: 0; }
.alerts-connected { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--status-new) 12%, transparent); color: var(--text-primary); font-size: .78rem; font-weight: 600; }
.alerts-connected i { width: 7px; height: 7px; border-radius: 50%; background: var(--status-new); }
.alerts-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.alerts-card { box-sizing: border-box; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); }
.alerts-card h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-size: 1.05rem; }
.alerts-card h2 svg, .alerts-group-title svg, .alerts-kind-switch svg, .alerts-row-icon svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alerts-kind-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 1rem; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--accent-blue) 6%, transparent); }
.alerts-kind-switch a { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px; border-radius: 9px; color: var(--text-secondary); font-size: .84rem; font-weight: 600; text-decoration: none; }
.alerts-kind-switch a:hover { color: var(--text-primary); }
.alerts-kind-switch a[aria-current="page"] { background: var(--card-bg); color: var(--text-primary); box-shadow: 0 1px 3px rgba(24, 36, 51, .12); }
.alerts-page[data-alert-kind="flat"] [data-alert-pane="project"],
.alerts-page[data-alert-kind="project"] [data-alert-pane="flat"] { display: none; }
.alerts-pane-hint { margin: 0 0 .9rem; color: var(--text-secondary); font-size: .8rem; }
/* Inside the card the filters and steps are part of it, not cards of their own. */
.alerts-new .search-console { margin: 0 0 .4rem; }
.alerts-new .notification-step-title, .alerts-new .notification-step-title label { margin-bottom: .45rem; color: var(--text-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.alerts-new .notification-actions { display: grid; gap: .9rem; margin-top: .9rem; }
.alerts-new .notification-step { margin: 0; }
.alerts-new .project-alerts-form { display: grid; gap: .9rem; }
.alerts-new .project-alerts-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .6rem; }
.alerts-new .project-alerts-form .notification-event-type-option { display: inline-flex; align-items: center; gap: .4rem; }
.alerts-new .project-alerts-filters label { display: grid; gap: .3rem; color: var(--text-secondary); font-size: .74rem; }
.alerts-new .project-alerts-filters select, .alerts-new .project-alerts-filters input, .alerts-new #project-alert-name { box-sizing: border-box; width: 100%; min-height: 38px; }
.alerts-new #project-alert-name { max-width: 420px; }
.notification-create-button.is-project { background: #7c3aed; border-color: #7c3aed; }
.alerts-mine.saved-searches-page { max-width: none; margin: 0; }
.alerts-mine .saved-search-list { margin: 0; }
.alerts-mine .notification-language { margin: 0 0 .4rem; }
.alerts-group-title { display: flex; align-items: center; gap: .45rem; margin: 1.1rem 0 .5rem; font-size: .84rem; font-weight: 700; }
.alerts-group-title span { margin-left: auto; color: var(--text-secondary); font-size: .74rem; font-weight: 500; }
.alerts-group-note { margin: -.2rem 0 .5rem; color: var(--text-secondary); font-size: .72rem; }
.alerts-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 9rem; align-items: start; gap: .75rem; margin: 0 0 .5rem; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.alerts-row.saved-search-card { border-left-width: 1px; }
.alerts-row-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; }
.alerts-row.is-flat .alerts-row-icon { background: color-mix(in srgb, var(--accent-blue) 12%, transparent); color: var(--accent-blue); }
.alerts-row.is-project .alerts-row-icon { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #7c3aed; }
.alerts-row-body { min-width: 0; }
.alerts-row-body h4 { margin: 0 0 .25rem; font-size: .9rem; overflow-wrap: anywhere; }
.alerts-row-body p { margin: .1rem 0 0; color: var(--text-secondary); font-size: .74rem; }
/* Each alert in two lines: its filters as one summary, the events it sends under a bell. */
.alerts-row-body p.alerts-summary { margin: 0; color: var(--text-primary); font-size: .76rem; line-height: 1.45; }
.alerts-row-body p.alerts-events { display: flex; align-items: flex-start; gap: .35rem; margin: .25rem 0 0; color: var(--text-secondary); font-size: .72rem; line-height: 1.4; }
.alerts-row-body p.alerts-events svg { width: 13px; height: 13px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alerts-row-body p.project-alerts-test-status { display: block; }
/* Legacy alerts (without filters) keep their detailed criteria, as plain lines ("Anbieter: Neues Leben"), like a project alert's,
   not pills inside the row's box. */
.alerts-row-body .saved-search-criteria { display: grid; grid-template-columns: 1fr; gap: .1rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.alerts-row-body .saved-search-criteria div { display: block; padding: 0; border: 0; border-radius: 0; background: none; font-size: .74rem; line-height: 1.45; }
.alerts-row-body .saved-search-criteria dt { display: inline; color: var(--text-secondary); font-weight: 500; }
.alerts-row-body .saved-search-criteria dt::after { content: ": "; }
.alerts-row-body .saved-search-criteria dd { display: inline; color: var(--text-primary); }
/* "Diesen Browser abmelden": a quiet text link beside the connection badge, not a button. */
.alerts-connection button.link { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--text-secondary); font: inherit; font-size: .78rem; font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; cursor: pointer; }
.alerts-connection button.link:hover { background: none; color: var(--text-primary); }
.alerts-row-actions { display: grid; gap: .35rem; }
.alerts-row-actions form { margin: 0; }
.alerts-row-actions button { width: 100%; min-height: 32px; padding: 0 .6rem; font-size: .74rem; white-space: nowrap; }
@media (max-width: 899px) { .alerts-layout { grid-template-columns: 1fr; } }
@media (max-width: 639px) {
  .alerts-new .project-alerts-filters { grid-template-columns: 1fr; }
  .alerts-row { grid-template-columns: 36px minmax(0, 1fr); }
  .alerts-row-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .alerts-row-actions form:only-child { grid-column: 1 / -1; }
}

/* Signed out: the alert form's button signs in with Telegram (Telegram icon), "Deine Alarme"
   keeps only a quiet text link, and the sign-in waits in a dialog in this tab. */
.notification-create-button.notification-connect-button { display: inline-flex; align-items: center; gap: .5rem; }
.notification-inline-note.is-error { color: var(--status-removed); }
.notification-login button.link.alerts-sign-in { display: inline-flex; align-items: center; gap: .35rem; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent-blue); font: inherit; font-size: .86rem; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; cursor: pointer; }
.notification-login button.link.alerts-sign-in:hover { background: none; color: var(--accent-hover); }
.notification-login button.link.alerts-sign-in svg { width: 15px; height: 15px; }
.telegram-login { width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.3rem 1.4rem 1.1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--card-bg); color: var(--text-primary); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.telegram-login::backdrop { background: rgba(15, 23, 30, .45); }
.telegram-login h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-size: 1.1rem; }
.telegram-login h2 svg, .telegram-login-open svg { width: 20px; height: 20px; flex: none; }
.telegram-login h2 svg { color: #229ED9; }
.telegram-login-steps { display: grid; gap: .45rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: login-step; font-size: .86rem; }
.telegram-login-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .55rem; align-items: start; color: var(--text-secondary); }
.telegram-login-steps li::before { counter-increment: login-step; content: counter(login-step); display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-primary); font-size: .72rem; font-weight: 700; }
.telegram-login-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.telegram-login-actions { display: grid; justify-items: start; gap: .6rem; }
.telegram-login-open { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.1rem; border-radius: 10px; background: #229ED9; color: #fff; font-weight: 700; text-decoration: none; }
.telegram-login-open:hover { background: #1c8cc2; color: #fff; }
.telegram-login-web { color: var(--text-secondary); font-size: .76rem; }
.telegram-login-qr { display: grid; justify-items: center; gap: .3rem; margin: 0; }
.telegram-login-qr svg { display: block; width: 132px; height: 132px; border-radius: 8px; }
.telegram-login-qr figcaption { color: var(--text-secondary); font-size: .7rem; }
.telegram-login-qr[hidden], .telegram-login-web[hidden] { display: none; }
.telegram-login-status { display: flex; align-items: center; gap: .5rem; min-height: 1.4em; margin: 1rem 0 0; color: var(--text-secondary); font-size: .84rem; }
.telegram-login-status:not(.is-ended)::before { content: ""; width: 12px; height: 12px; flex: none; border: 2px solid color-mix(in srgb, var(--accent-blue) 30%, transparent); border-top-color: var(--accent-blue); border-radius: 50%; animation: telegram-login-spin .9s linear infinite; }
.telegram-login-status.is-ended { color: var(--text-primary); }
@keyframes telegram-login-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .telegram-login-status:not(.is-ended)::before { animation: none; } }
.telegram-login-footer { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: .9rem; }
.telegram-login-footer button.link { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--text-secondary); font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.telegram-login-footer button.link:hover { background: none; color: var(--text-primary); }
.telegram-login-retry { min-height: 34px; padding: 0 .9rem; font-size: .8rem; }
.telegram-login-retry[hidden], .telegram-login-open[hidden] { display: none; }
@media (max-width: 479px) { .telegram-login-body { grid-template-columns: 1fr; } }

/* Phones held sideways and touch tablets (iPads in both orientations) are used like phones: no
   hero, as on phones, so the filters and the first listings are on screen straight away. Short
   landscape screens count too, in case a phone does not report its touch screen as the pointer. */
@media (pointer: coarse) and (max-width: 1366px), (orientation: landscape) and (max-height: 500px) {
  .listing-hero { display: none; }
}

/* Filter sheet (_filter_sheet.html, filter-sheet.js) and tools (_filter_chip_bar.html).
   Phones, phones held sideways and touch tablets: the search with one group of icon buttons
   (Filter · sort · alert) beside it, the filters set as chips under it, then one line
   "214 Whg. · Neueste"; List / Map / Neubau float at the bottom of the screen. Every filter
   is in the sheet. Computers keep the full filter bar. */
.filter-tools, .filter-chip-bar, .results-sort { display: none; }
@media (max-width: 639px), (pointer: coarse) and (max-width: 1366px), (orientation: landscape) and (max-height: 500px) {
  .filter-panel #listing-filters.has-filter-sheet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .filter-panel #listing-filters.has-filter-sheet::after { content: none; }
  .filter-panel #listing-filters.has-filter-sheet > .filter-cell-rent,
  .filter-panel #listing-filters.has-filter-sheet > .filter-cell-rooms,
  .filter-panel #listing-filters.has-filter-sheet > .advanced-filters,
  .filter-panel #listing-filters.has-filter-sheet > .filters-more-toggle { display: none; }
  .filter-panel #listing-filters.has-filter-sheet > .filter-cell-location { flex: 1 1 0; width: auto; min-width: 0; order: 1; }
  .filter-panel #listing-filters.has-filter-sheet > .filter-tools { order: 2; flex: 0 0 auto; width: auto; display: inline-flex; }
  .filter-panel #listing-filters.has-filter-sheet > .filter-chip-bar { order: 3; }
  /* Filter · sort · alert: one joined group of 44px buttons. */
  .filter-tools { position: relative; flex: none; display: inline-flex; box-sizing: border-box; height: 44px; border: 1px solid var(--border); border-radius: 11px; background: var(--card-bg); }
  .filter-tool { position: relative; display: grid; place-items: center; box-sizing: border-box; width: 42px; height: 42px; min-height: 0; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; color: var(--text-primary); font: inherit; text-decoration: none; cursor: pointer; }
  .filter-tool:first-child { border-left: 0; border-radius: 10px 0 0 10px; }
  .filter-tool-alert { border-radius: 0 10px 10px 0; }
  .filter-tool:hover { background: var(--filter-hover-bg); color: var(--text-primary); }
  .filter-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
  .filter-tool.is-active { background: var(--accent-blue); color: var(--button-ink); }
  .filter-tool.is-active:hover { background: var(--accent-hover); color: var(--button-ink); }
  .filter-tool .filter-sheet-badge { position: absolute; top: -8px; right: -8px; z-index: 1; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid var(--card-bg); background: var(--accent-blue); color: var(--button-ink); font-size: 11px; }
  .filter-tool-alert { color: var(--accent-blue); }
  .filter-tool-alert:hover { color: var(--accent-blue); }
  /* The sort: the order at the right of the count line, a quiet text button; its menu is a card
     under it, right edges aligned. The current choice is shaded sand (the site’s warm beige; a brighter blue-grey in dark). */
  .results-sort, .filter-sort-menu { --sort-pick: color-mix(in srgb, var(--border) 30%, var(--card-bg)); }
  :root[data-theme="dark"] .results-sort, :root[data-theme="dark"] .filter-sort-menu { --sort-pick: color-mix(in srgb, var(--border) 75%, var(--card-bg)); }
  .results-sort-button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: 0; padding: 0 6px 0 8px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--text-primary); font: inherit; cursor: pointer; }
  .results-sort-button:hover, .results-sort-button[aria-expanded="true"] { background: var(--sort-pick); color: var(--text-primary); }
  .results-sort-button svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .results-sort-button:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 0; box-shadow: 0 0 0 4px var(--focus-ring); }
  .filter-sort-menu { position: absolute; z-index: 70; top: calc(100% + 6px); right: 0; box-sizing: border-box; width: max-content; min-width: 236px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); box-shadow: 0 14px 34px rgba(24, 36, 51, .16); }
  :root[data-theme="dark"] .filter-sort-menu { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
  .filter-sort-menu[hidden] { display: none; }
  .filter-sort-menu-title { margin: 6px 10px 6px; color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
  .filter-sort-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--text-primary); font: 500 15px/1.2 Inter, "Segoe UI", system-ui, sans-serif; text-align: left; cursor: pointer; }
  .filter-sort-option:hover { background: color-mix(in srgb, var(--sort-pick) 55%, var(--card-bg)); color: var(--text-primary); }
  .filter-sort-option:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
  .filter-sort-option svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
  .filter-sort-option[aria-checked="true"] { background: var(--sort-pick); color: var(--text-primary); font-weight: 600; }
  .filter-sort-option[aria-checked="true"] svg { visibility: visible; color: var(--accent-blue); }
  @media (prefers-reduced-motion: no-preference) {
    .filter-sort-menu:not([hidden]) { animation: filter-sort-menu-in .14s ease-out; }
  }
  /* The search: as tall as the buttons beside it, white like them, its hint a quiet grey. */
  .filter-panel #listing-filters.has-filter-sheet .location-search-input { box-sizing: border-box; height: 44px; min-height: 44px; border: 1px solid var(--border); border-radius: 11px; background: var(--card-bg); box-shadow: none; }
  .filter-panel #listing-filters.has-filter-sheet .location-search-input:focus { border-color: var(--accent-blue); }
  .filter-panel #listing-filters.has-filter-sheet .location-display-placeholder { justify-content: flex-start; padding: 0 2rem 0 2.6rem; color: color-mix(in srgb, var(--text-secondary) 60%, var(--card-bg)); font-size: 15px; font-weight: 400; }
  .filter-panel #listing-filters.has-filter-sheet .location-search-icon { color: color-mix(in srgb, var(--text-secondary) 60%, var(--card-bg)); stroke: currentColor; }
  .filter-panel #listing-filters.has-filter-sheet .location-display-placeholder > span { color: inherit; font-weight: inherit; }
  .filter-tool:focus-visible, .filter-chip:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 0; box-shadow: 0 0 0 4px var(--focus-ring); }
  /* The filters set, under the search (only when some are set). */
  .filter-chip-bar { display: flex; flex: 1 1 100%; gap: 6px; min-width: 0; margin: 0 -4px; padding: 2px 4px; overflow-x: auto; scrollbar-width: none; }
  .filter-chip-bar[hidden] { display: none; }
  .filter-chip-bar::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; height: 32px; padding: 0 9px 0 11px; border: 1px solid color-mix(in srgb, var(--accent-blue) 40%, transparent); border-radius: 999px; background: var(--filter-hover-bg); color: var(--accent-blue); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; }
  .filter-chip span { font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; }
  .filter-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  .filter-chip:hover { color: var(--accent-hover); }
  .filter-chip.is-clear { padding: 0 11px; border-style: dashed; border-color: var(--border); background: transparent; color: var(--text-secondary); font-weight: 500; }
  /* The chips under the search replace the chip list and its floating "Alarm erstellen". */
  .listing-shell:has(#listing-filters.has-filter-sheet) .applied-filter-list { display: none; }
  body:has(#listing-filters.has-filter-sheet) .listing-hero-cta { display: none; }
  /* Results line: "214 Whg. · ◯ 12 vergeben … Neueste" (the menus are the sort button). */
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin: 8px 0; }
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading .listing-status-desktop,
  .listing-shell:has(#listing-filters.has-filter-sheet) .taken-toggle-slot,
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-heading-actions .listing-sort { display: none; }
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading .mobile-results-count { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 14px; white-space: nowrap; }
  /* "◯ 12 vergeben": the desktop's small switch (30 × 17), grey text; taken flats are hidden until it is on. */
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading .taken-toggle-sep { display: inline; margin: 0; }
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading .mobile-results-count .taken-toggle { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 0 4px; color: var(--text-secondary); font-size: 13px; font-weight: 500; }
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading .mobile-results-count .taken-toggle[aria-pressed="true"] { color: var(--text-primary); }
  .listing-shell:has(#listing-filters.has-filter-sheet) .taken-toggle .taken-toggle-box { width: 30px; height: 17px; vertical-align: 0; }
  .listing-shell:has(#listing-filters.has-filter-sheet) .taken-toggle .taken-toggle-box::after { left: 2px; width: 11px; height: 11px; }
  .listing-shell:has(#listing-filters.has-filter-sheet) .taken-toggle[aria-pressed="true"] .taken-toggle-box::after { left: calc(100% - 13px); }
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading .mobile-results-count .results-count-short { color: var(--text-primary); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
  /* Count on the left, the order (the sort button) on the right, both the same size. */
  .listing-shell:has(#listing-filters.has-filter-sheet) .results-sort { position: relative; display: inline-flex; flex: 0 1 auto; min-width: 0; margin-left: auto; }
  .listing-shell:has(#listing-filters.has-filter-sheet) .results-sort-label { min-width: 0; overflow: hidden; color: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  /* No frame around the search and its buttons: they sit straight on the page. */
  .listing-shell:has(#listing-filters.has-filter-sheet) > .search-console { border: 0; border-radius: 0; box-shadow: none; padding-inline: 0; padding-bottom: 0; }
  .listing-shell:has(#listing-filters.has-filter-sheet) #listing-controls { padding: 0; }
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-heading-actions { display: contents; }
  /* List / Map / Neubau: a pill floating at the bottom of the screen. The sliding highlight is
     a round pill too, one third wide with an even 4px margin; the pill takes its natural width,
     so the thirds are equal (centred at 50%, it would otherwise get only half the screen). While a menu is open (location,
     sort), the search has the keyboard or the footer is in view, the switch steps aside so it never covers a button. */
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading .listing-view-toggle { position: fixed; z-index: 60; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); box-sizing: border-box; grid-template-columns: repeat(3, 1fr); padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: opacity .15s ease, visibility .15s; }
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading .listing-view-toggle::before { top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; }
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading .listing-view-toggle a { gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading .listing-view-toggle a:not([aria-current="page"]):hover { background: transparent; color: var(--text-primary); }
  .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading .listing-view-toggle svg { width: 16px; height: 16px; }
  body:has(.counted-filter-menu:not([hidden]), #filter-sort-menu:not([hidden]), .location-search-input:focus) .listing-shell:has(#listing-filters.has-filter-sheet) .listing-section-heading .listing-view-toggle { visibility: hidden; opacity: 0; pointer-events: none; }
  /* The switch always stays at the bottom; the footer ends 12px above it once scrolled to the end
     (switch 50px + 14px from the edge + 12px), so its links can always be tapped. */
  body:has(#listing-filters.has-filter-sheet) .site-footer { margin-top: 16px; margin-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  /* No room under the results for the old floating "Alarm erstellen" (the chip bar replaced it). */
  body:has(#listing-filters.has-filter-sheet) main { padding-bottom: 0; }
}
/* Phones held sideways and tablets: search, tools and chips share one row. */
@media (min-width: 640px) and (pointer: coarse) and (max-width: 1366px), (min-width: 640px) and (orientation: landscape) and (max-height: 500px) {
  .filter-panel #listing-filters.has-filter-sheet { flex-wrap: nowrap; }
  .filter-panel #listing-filters.has-filter-sheet > .filter-cell-location { flex: 1 1 260px; max-width: 420px; }
  .filter-panel #listing-filters.has-filter-sheet > .filter-chip-bar { flex: 1 1 auto; margin: 0; }
}
.filter-sheet-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; box-sizing: border-box; padding: 0 6px; border-radius: 999px; background: var(--button-ink); color: var(--accent-blue); font: 700 12px/1 "JetBrains Mono", "SFMono-Regular", Consolas, monospace; }

.filter-sheet { box-sizing: border-box; position: fixed; inset: auto 0 0 0; width: 100%; max-width: 640px; height: calc(100dvh - 2.5rem); max-height: none; margin: 0 auto; padding: 0; overflow: hidden; border: 0; border-radius: 20px 20px 0 0; background: var(--card-bg); color: var(--text-primary); box-shadow: 0 -10px 40px rgba(0, 0, 0, .2); }
.filter-sheet[open], .filter-sheet:target { display: flex; flex-direction: column; }
.filter-sheet:target:not([open]) { z-index: 1000; }  /* without JavaScript: the same form over the page */
.filter-sheet::backdrop { background: rgba(0, 0, 0, .3); }
:root[data-theme="dark"] .filter-sheet::backdrop { background: rgba(0, 0, 0, .5); }
html:has(.filter-sheet[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .filter-sheet[open] { animation: filter-sheet-up .24s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes filter-sheet-up { from { transform: translateY(100%); } }
@keyframes filter-sheet-in { from { transform: translateX(100%); } }
/* Phones held sideways: too short for a sheet from below, so a panel on the right. */
@media (orientation: landscape) and (max-height: 500px) {
  .filter-sheet { inset: 0 0 0 auto; width: min(440px, 100%); height: 100dvh; margin: 0; border-radius: 20px 0 0 20px; }
  .filter-sheet[open] { animation-name: filter-sheet-in; }
  .filter-sheet-grab { display: none; }
}
/* Tablets: a sheet from below would leave half the screen empty above it (a 1366px-tall iPad),
   so a centered dialog, as iPad apps show forms. Centered with top 50% and translate, its height
   following the content (Safari gave "height: fit-content" with inset 0 no height at all). */
@media (min-width: 640px) and (min-height: 501px) {
  .filter-sheet { inset: 50% 0 auto 0; translate: 0 -50%; height: auto; max-height: min(88dvh, 920px); margin: 0 auto; border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
  .filter-sheet-form, .filter-sheet-body { flex: 1 1 auto; }
  .filter-sheet[open] { animation-name: filter-sheet-pop; }
  .filter-sheet-grab { display: none; }
}
@keyframes filter-sheet-pop { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.filter-sheet-form { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
.filter-sheet-head { position: relative; flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 16px 10px; border-bottom: 1px solid var(--border); }
.filter-sheet-grab { position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 999px; background: var(--border); }
.filter-sheet-head h2 { margin: 0; font-size: 17px; }
.filter-sheet-head h2:focus { outline: none; }
.filter-sheet-close, .filter-sheet-reset { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }
.filter-sheet-close { justify-self: start; color: var(--text-primary); }
.filter-sheet-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.filter-sheet-reset { justify-self: end; color: var(--accent-blue); }
.filter-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; }
.filter-sheet-section { min-width: 0; margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--border); }
.filter-sheet-section:last-of-type { border-bottom: 0; }
.filter-sheet-section legend { float: left; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; margin: 0 0 8px; padding: 0; color: var(--text-primary); font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.filter-sheet-section legend + * { clear: both; }
/* The heading's right side: the current choice ("bis 900 €") or a hint, and "Andere" for the exact
   Min/Max fields, which stay closed until needed (always shown without JavaScript). */
.filter-sheet-legend-side { display: inline-flex; flex: none; align-items: baseline; gap: 10px; letter-spacing: 0; text-transform: none; }
.filter-sheet-legend-side em { color: var(--accent-blue); font-size: 12.5px; font-style: normal; font-weight: 700; }
.filter-sheet-legend-side em.is-hint { color: var(--text-secondary); font-weight: 500; }
.filter-sheet-other { min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--text-secondary); font: 600 12.5px/1.2 Inter, "Segoe UI", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.filter-sheet-other[aria-expanded="true"] { color: var(--accent-blue); }
.filter-sheet-other:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.filter-sheet:not(.is-enhanced) .filter-sheet-other { display: none; }
.filter-sheet.is-enhanced [data-other-panel]:not(.is-open) { display: none; }
.filter-sheet-help { margin: 7px 0 0; color: var(--text-secondary); font-size: 13px; }
/* Choices are real checkboxes and radios (the form works without JavaScript), drawn as cells and pills. */
.filter-sheet input[type="checkbox"]:not([role="switch"]), .filter-sheet input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
/* Like the desktop filter menus: small tinted rounded-rectangle buttons, the chosen one solid teal. */
.filter-sheet { --sheet-tint: color-mix(in srgb, var(--accent-blue) 7%, transparent); }
.filter-sheet-rooms { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.filter-sheet-rooms label { position: relative; display: block; }
.filter-sheet-rooms span { display: grid; place-items: center; height: 36px; border-radius: 6px; background: var(--sheet-tint); color: var(--text-primary); font: 600 14px/1 "JetBrains Mono", "SFMono-Regular", Consolas, monospace; cursor: pointer; }
.filter-sheet-rooms input:checked + span { background: var(--accent-blue); color: var(--button-ink); }
.filter-sheet-rooms input:focus-visible + span { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.filter-sheet-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-sheet-pill { position: relative; display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; min-height: 34px; margin: 0; padding: 0 9px; border: 1px solid transparent; border-radius: 6px; background: var(--sheet-tint); box-shadow: none; color: var(--text-primary); font: 600 12.5px/1.2 Inter, "Segoe UI", system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.filter-sheet-pill:hover { background: color-mix(in srgb, var(--accent-blue) 12%, transparent); color: var(--text-primary); }
.filter-sheet-pill:has(input:checked), .filter-sheet-pill[aria-pressed="true"] { background: var(--accent-blue); color: var(--button-ink); }
.filter-sheet-pill:has(input:focus-visible), button.filter-sheet-pill:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.filter-sheet-pill svg { display: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.filter-sheet-pill:has(input:checked) svg { display: block; }
.filter-sheet-pill.is-more { border: 1px dashed var(--border); background: transparent; color: var(--accent-blue); }
/* "Eigener Bereich": a small label, then Min – Max in tinted fields with the unit, as on the desktop. */
.filter-sheet-own-label { margin: 10px 0 6px; color: var(--text-secondary); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.filter-sheet-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.filter-sheet-dash { color: var(--text-secondary); }
.filter-sheet-field { display: flex; align-items: center; gap: 6px; box-sizing: border-box; height: 38px; padding: 0 10px; border-radius: 8px; background: var(--sheet-tint); color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.filter-sheet-field:focus-within { outline: 2px solid var(--accent-blue); outline-offset: 0; }
/* 16px, so phones do not zoom in when the field is tapped. */
.filter-sheet-field input { flex: 1; width: 100%; min-width: 0; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--text-primary); font: 600 16px/1 "JetBrains Mono", "SFMono-Regular", Consolas, monospace; outline: none; }
.filter-sheet-field i { color: var(--text-secondary); font-style: normal; font-weight: 600; }
/* The purchase option under Eigenmittel and "Wohnungen in Bau" under Verfügbar ab, as on the desktop. */
.filter-sheet-sub { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
p.filter-sheet-sub { margin-top: 12px; }
.filter-sheet.is-projects .filter-sheet-sub { margin-top: 0; padding-top: 0; border-top: 0; }
.filter-sheet-switch { font-size: 13.5px; }
.filter-sheet-switch small { font-size: 12px; }
.filter-sheet-providers .is-more { display: none; }
.filter-sheet.is-enhanced .filter-sheet-providers:not(.is-expanded) .is-extra { display: none; }
.filter-sheet.is-enhanced .filter-sheet-providers:not(.is-expanded) .is-more { display: inline-flex; }
.filter-sheet-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 600; cursor: pointer; }
.filter-sheet-switch small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 12.5px; font-weight: 400; }
.filter-sheet-switch input { flex: none; position: relative; width: 46px; height: 28px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--border); appearance: none; -webkit-appearance: none; cursor: pointer; transition: background .15s; }
.filter-sheet-switch input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.filter-sheet-switch input:checked { background: var(--accent-blue); }
.filter-sheet-switch input:checked::before { transform: translateX(18px); }
.filter-sheet-switch input:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-ring); }
.filter-sheet [hidden] { display: none !important; }
.filter-sheet-foot { flex: none; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--card-bg); }
.filter-sheet-apply { width: 100%; height: 52px; border: 0; border-radius: 8px; background: var(--accent-blue); color: var(--button-ink); font: 700 16px/1 Inter, "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.filter-sheet-apply:hover { background: var(--accent-hover); }
.filter-sheet-apply:disabled { opacity: .55; cursor: default; }
.filter-sheet-apply:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-ring); }
@media (prefers-reduced-motion: reduce) {
  .filter-sheet-switch input, .filter-sheet-switch input::before { transition: none; }
}
/* The search and chips stay under the header while scrolling (filter-sheet.js keeps
   --listing-header-height up to date, as the phone header shrinks on scrolling). Not on phones
   held sideways: too little height to keep both. */
@media (max-width: 639px) and (min-height: 501px), (pointer: coarse) and (max-width: 1366px) and (min-height: 501px) {
  .listing-shell:has(#listing-filters.has-filter-sheet) > .search-console { position: sticky; top: var(--listing-header-height, 0px); z-index: 40; margin-top: -6px; padding-top: 6px; background: var(--bg); }
  /* Its background runs to both screen edges, so no flat shows beside the search's rounded corners. */
  /* The same 6px under the search row as above it once it sits at the top (the gap below it on
     the page stays .6rem, taken partly from the margin). */
  .listing-shell:has(#listing-filters.has-filter-sheet) > .search-console { padding-bottom: 6px; margin-bottom: calc(.6rem - 6px); }
  .listing-shell:has(#listing-filters.has-filter-sheet) > .search-console::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--bg); pointer-events: none; }
  /* "Enter always" (Material Design): the header leaves while scrolling down and is back at the
     first scroll up (filter-sheet.js); the search row with Filter and Alarm moves up with it and
     always stays, as Baymard recommends for search and filters. */
  body:has(#listing-filters.has-filter-sheet) .site-header { position: sticky; z-index: 50; top: 0; }
  /* Header and search row read as one bar: the page colour, solid (no see-through blur, which
     showed the flats sliding underneath as a lighter band), and no line between them. */
  body:has(#listing-filters.has-filter-sheet) .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body:has(#listing-filters.has-filter-sheet) .site-header::after { display: none; }
  body:has(#listing-filters.has-filter-sheet) .site-header,
  .listing-shell:has(#listing-filters.has-filter-sheet) > .search-console { transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
  body.is-header-away:has(#listing-filters.has-filter-sheet) .site-header { transform: translateY(calc(-1 * var(--listing-header-height, 0px) - 8px)); }
  body.is-header-away .listing-shell:has(#listing-filters.has-filter-sheet) > .search-console { transform: translateY(calc(-1 * var(--listing-header-height, 0px))); }
}
@media (prefers-reduced-motion: reduce) {
  body:has(#listing-filters.has-filter-sheet) .site-header,
  .listing-shell:has(#listing-filters.has-filter-sheet) > .search-console { transition: none; }
}
@keyframes filter-sort-menu-in { from { opacity: 0; transform: translateY(-4px); } }

/* The alerts page, the same on phones, tablets and computers: signed out, one card that signs in
   with Telegram first; signed in, the connection in its place (name, Abmelden, language), "Deine
   Alarme" and "+ Neuer Alarm", which opens the listings' filter sheet as the alert form (a
   centered dialog on larger screens). The older two-column form stays in the page, unused. */
.alerts-page { gap: 0; }
.alerts-page .alerts-head { margin-bottom: 12px; }
.alerts-page .alerts-head .alerts-connection, .alerts-page .alerts-new,
.alerts-mine .notification-language, .alerts-mine:has(.notification-login) { display: none; }
.alerts-welcome, .alerts-account { display: block; margin: 0 0 14px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--card-bg); }
.alerts-welcome-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%; background: color-mix(in srgb, var(--accent-blue) 14%, transparent); color: var(--accent-blue); }
.alerts-welcome-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alerts-welcome h2 { margin: 0 0 4px; font-size: 19px; line-height: 1.25; text-wrap: balance; }
.alerts-welcome > p { margin: 0 0 12px; color: var(--text-secondary); font-size: 14px; }
.alerts-welcome form { margin: 0; }
/* Telegram's own blue, so the button reads as "Telegram" at a glance. */
.alerts-welcome-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; border: 0; border-radius: 12px; background: #229ED9; box-shadow: none; color: #fff; font: 700 15px/1.2 Inter, "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.alerts-welcome-button:hover { background: #1C8DC3; color: #fff; }
.alerts-welcome-button:disabled { opacity: .55; cursor: not-allowed; }
.alerts-welcome-button svg { width: 19px; height: 19px; }
.alerts-welcome-steps { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.alerts-welcome-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 14px; font-weight: 600; }
.alerts-welcome-steps b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--accent-blue) 9%, transparent); color: var(--accent-blue); font-size: 12.5px; }
.alerts-welcome-steps small { display: block; color: var(--text-secondary); font-size: 12.5px; font-weight: 400; }
.alerts-welcome-sample { margin: 14px 0 0; }
.alerts-welcome-sample figcaption { margin: 0 0 5px; color: var(--text-secondary); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.alerts-welcome-sample p { margin: 0; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, #4CAF50 14%, var(--card-bg)); color: var(--text-primary); font-size: 13px; line-height: 1.45; }
.alerts-welcome-sample b { display: block; }
.alerts-welcome > .alerts-welcome-existing { margin: 12px 0 0; color: var(--text-secondary); font-size: 12.5px; }
.alerts-account-row { display: flex; align-items: center; gap: 10px; }
.alerts-account-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #229ED9; color: #fff; font-weight: 700; }
.alerts-account-who { flex: 1; min-width: 0; }
.alerts-account-who b { display: block; overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.alerts-account-who span { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 12.5px; }
.alerts-account-who i { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.alerts-account-row form { flex: none; margin: 0; }
.alerts-account-signout { min-height: 36px; margin: 0; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); box-shadow: none; color: var(--text-primary); font: 600 13.5px/1 Inter, "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.alerts-account-language { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 13px; }
.alerts-account-segment { display: inline-flex; flex: none; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--accent-blue) 8%, transparent); }
.alerts-account-segment button { min-height: 30px; margin: 0; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--text-primary); font: 600 12.5px/1 Inter, "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.alerts-account-segment button[aria-pressed="true"] { background: var(--accent-blue); color: var(--button-ink); }
/* "+ Neuer Alarm" stays at the bottom; the page ends 12px above it (as with the listings' switch). */
.alerts-new-fab { position: fixed; z-index: 30; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 520px; min-height: 50px; margin: 0 auto; border: 0; border-radius: 14px; background: var(--accent-blue); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); color: var(--button-ink); font: 700 15.5px/1 Inter, "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.alerts-new-fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
body:has(.alerts-new-fab) .site-footer { margin-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.alerts-page .alerts-layout { display: block; }
/* Computers (and tablets with a trackpad): one readable column; "+ Neuer Alarm" sits above the
   alerts instead of floating at the bottom of a wide screen. */
@media (min-width: 900px) and (pointer: fine) {
  .alerts-page { width: min(100%, 760px); margin-inline: auto; }
  .alerts-page .alerts-mine:has(.alerts-new-fab) { display: flex; flex-direction: column; }
  .alerts-new-fab { position: static; order: -1; max-width: none; margin: 0 0 14px; box-shadow: none; }
  body:has(.alerts-new-fab) .site-footer { margin-bottom: 1.5rem; }
}
/* The filter sheet as the alert form (alerts page): flats or projects, location, events, name. */
.filter-sheet-kinds { display: grid; grid-template-columns: 1fr 1fr; margin: 12px 0 0; padding: 3px; border-radius: 10px; background: var(--sheet-tint); }
.filter-sheet-kinds button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; margin: 0; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--text-primary); font: 600 13.5px/1.2 Inter, "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.filter-sheet-kinds button[aria-pressed="true"] { background: var(--accent-blue); color: var(--button-ink); }
.filter-sheet-kinds svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.filter-sheet[data-sheet-kind="flat"] [data-sheet-pane="project"],
.filter-sheet[data-sheet-kind="project"] [data-sheet-pane="flat"],
.filter-sheet[data-sheet-kind="project"] [data-alert-count] { display: none; }
.filter-sheet[data-sheet-kind="project"] .filter-sheet-reset { visibility: hidden; }
.filter-sheet-text { display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: 40px; margin-top: 8px; padding: 0 12px; border-radius: 8px; background: var(--sheet-tint); color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.filter-sheet-text:focus-within { outline: 2px solid var(--accent-blue); }
/* 16px, so phones do not zoom in when a field is tapped. */
.filter-sheet-text input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--text-primary); font: 500 16px/1 Inter, "Segoe UI", system-ui, sans-serif; outline: none; }
.filter-sheet-name, .filter-sheet-select { box-sizing: border-box; width: 100%; height: 42px; margin: 0; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); box-shadow: none; color: var(--text-primary); font: 600 16px/1.2 Inter, "Segoe UI", system-ui, sans-serif; }
/* The name wraps onto more lines rather than hiding its end (filter-sheet.js sizes it). */
textarea.filter-sheet-name { display: block; min-height: 42px; padding: 10px 12px; overflow: hidden; resize: none; line-height: 1.35; }
[data-section="location"] .filter-sheet-legend-side { flex: 0 1 auto; min-width: 0; }
[data-section="location"] [data-current="location"] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.filter-sheet-select + .filter-sheet-text { margin-top: 8px; }
.filter-sheet-section > .filter-sheet-switch + .filter-sheet-switch { margin-top: 10px; }
[data-sheet-pane="project"] > .filter-sheet-help { margin: 12px 0 0; }
.filter-sheet-matches { margin: 0 0 8px; color: var(--text-secondary); font-size: 12.5px; text-align: center; }

/* Computers (listings, map, projects): the search takes the room; Zimmer, Miete and Eigenmittel are
   short buttons that show their choice ("2–3 Zi.", "bis 900 €"), teal once set, each opening its
   presets; Fläche, Verfügbar ab, Neubau and Anbieter are in the filter sheet behind "Weitere
   Filter" with the number set - the same sheet as on phones. Phones and touch tablets: unchanged. */
.filter-cell-more, .filter-cell-purchase, .filter-cell-alert { display: none; }
.room-pills .room-any-menu { display: none; }
@media (min-width: 640px) and (pointer: fine) and (min-height: 501px), (min-width: 1367px) and (min-height: 501px) {
  /* One row whatever the width: a grid whose first column (the search) gives way down to 120px;
     the buttons stay on the right at their own width and, in a very narrow window, shorten their
     label with "…" rather than wrapping. The chips take the whole second row. */
  #listing-filters.has-filter-sheet { display: grid; grid-template-columns: minmax(120px, 1fr) repeat(5, minmax(0, max-content)); align-items: center; gap: 8px; }
  /* Upcoming projects: search, Anbieter and the purchase-option switch - their only filters. */
  #listing-filters.has-filter-sheet:has(.filter-cell[data-flat-only][inert]) { grid-template-columns: minmax(120px, 1fr) repeat(3, minmax(0, max-content)); }
  #listing-filters.has-filter-sheet:has(.filter-cell[data-flat-only][inert]) .filter-cell-more { display: none; }
  #listing-filters.has-filter-sheet:has(.filter-cell[data-flat-only][inert]) .filter-cell-providers { display: flex; order: 4; min-width: 0; margin: 0; }
  #listing-filters.has-filter-sheet:has(.filter-cell[data-flat-only][inert]) .filter-cell-purchase { display: flex; order: 5; min-width: 0; }
  #listing-filters.has-filter-sheet .filter-cell-providers .counted-filter { flex: 1 1 auto; width: 100%; min-width: 0; }
  #listing-filters.has-filter-sheet .filter-purchase-toggle { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 8px; background: color-mix(in srgb, var(--accent-blue) 5%, transparent); color: var(--text-primary); font: 600 13.12px/1 Inter, "Segoe UI", system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
  #listing-filters.has-filter-sheet .filter-purchase-toggle:hover { background: color-mix(in srgb, var(--accent-blue) 10%, transparent); color: var(--text-primary); }
  #listing-filters.has-filter-sheet .filter-purchase-toggle[aria-checked="true"] { background: color-mix(in srgb, var(--accent-blue) 13%, transparent); color: var(--accent-blue); }
  #listing-filters.has-filter-sheet .filter-purchase-switch { position: relative; flex: none; width: 30px; height: 17px; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--text-secondary) 55%, transparent); border-radius: 999px; }
  #listing-filters.has-filter-sheet .filter-purchase-switch::after { content: ""; position: absolute; top: 50%; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--text-secondary); transform: translateY(-50%); transition: left .2s ease; }
  #listing-filters.has-filter-sheet .filter-purchase-toggle[aria-checked="true"] .filter-purchase-switch { border-color: var(--accent-blue); background: var(--accent-blue); }
  #listing-filters.has-filter-sheet .filter-purchase-toggle[aria-checked="true"] .filter-purchase-switch::after { left: calc(100% - 13px); background: var(--button-ink); }
  #listing-filters.has-filter-sheet > .filter-cell-location { order: 1; }
  #listing-filters.has-filter-sheet > .filter-cell-rooms { order: 2; }
  #listing-filters.has-filter-sheet > .filter-cell-rent { order: 3; }
  #listing-filters.has-filter-sheet .filter-cell-contribution { order: 4; }
  #listing-filters.has-filter-sheet .filter-cell-more { order: 5; }
  #listing-filters.has-filter-sheet > .filter-cell-location { min-width: 0; }
  /* No forced second row (the older 640-1219px layout broke the bar after Miete). */
  #listing-filters.has-filter-sheet::after { content: none; display: none; }
  #listing-filters.has-filter-sheet .filter-cell-contribution { margin-top: 0; }
  #listing-filters.has-filter-sheet .location-display-placeholder { justify-content: flex-start; }
  #listing-filters.has-filter-sheet > .filter-cell-rooms,
  #listing-filters.has-filter-sheet > .filter-cell-rent,
  #listing-filters.has-filter-sheet .filter-cell-contribution,
  #listing-filters.has-filter-sheet .filter-cell-more { flex: 0 0 auto; width: auto; min-width: 0; }
  #listing-filters.has-filter-sheet .filter-cell-area,
  #listing-filters.has-filter-sheet .filter-cell-availability,
  #listing-filters.has-filter-sheet .filter-cell-providers { display: none; }
  #listing-filters.has-filter-sheet .filter-cell-more { display: flex; }
  /* Upcoming projects only use providers and the purchase option (in "Weitere Filter"). */
  #listing-filters.has-filter-sheet .filter-cell[data-flat-only][inert] { display: none; }
  #listing-filters.has-filter-sheet :is(.filter-cell-rooms, .filter-cell-rent, .filter-cell-contribution) .counted-filter { flex: 1 1 auto; width: 100%; min-width: 0; }
  /* The same look as the search field beside them (and the filter buttons before): a light teal
     tint, no border, 8px corners, 34px high, the label centred and the arrow on the right. */
  #listing-filters.has-filter-sheet :is(.filter-cell-rooms, .filter-cell-rent, .filter-cell-contribution, .filter-cell-providers) .counted-filter-trigger,
  #listing-filters.has-filter-sheet .filter-more-button {
    display: inline-flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 34px; min-height: 34px; margin: 0; padding: 0 12px 0 16px;
    border: 0; border-radius: 8px; background: color-mix(in srgb, var(--accent-blue) 5%, transparent); box-shadow: none;
    color: var(--text-primary); font: 600 13.12px/1 Inter, "Segoe UI", system-ui, sans-serif; white-space: nowrap; cursor: pointer;
  }
  #listing-filters.has-filter-sheet :is(.filter-cell-rooms, .filter-cell-rent, .filter-cell-contribution, .filter-cell-providers) .counted-filter-label { flex: 1; min-width: 0; overflow: hidden; color: inherit; font: inherit; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  #listing-filters.has-filter-sheet :is(.filter-cell-rooms, .filter-cell-rent, .filter-cell-contribution, .filter-cell-providers) .counted-filter-trigger svg {
    width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7;
  }
  #listing-filters.has-filter-sheet .filter-more-button { justify-content: center; padding: 0 14px; }
  #listing-filters.has-filter-sheet :is(.filter-cell-rooms, .filter-cell-rent, .filter-cell-contribution, .filter-cell-providers) .counted-filter-trigger:hover,
  #listing-filters.has-filter-sheet .filter-more-button:hover { background: color-mix(in srgb, var(--accent-blue) 10%, transparent); }
  /* Set: a stronger tint and teal text. */
  #listing-filters.has-filter-sheet .counted-filter-trigger.is-set,
  #listing-filters.has-filter-sheet .filter-more-button.is-set { background: color-mix(in srgb, var(--accent-blue) 13%, transparent); color: var(--accent-blue); }
  #listing-filters.has-filter-sheet :is(.filter-cell-rooms, .filter-cell-rent, .filter-cell-contribution, .filter-cell-providers) .counted-filter-trigger[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--accent-blue); }
  #listing-filters.has-filter-sheet .filter-more-button svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  @media (min-width: 960px) {
    #listing-filters.has-filter-sheet :is(.filter-cell-rooms, .filter-cell-rent, .filter-cell-contribution, .filter-cell-providers) .counted-filter-trigger { min-width: 128px; }
  }
  @media (max-width: 860px) {
    #listing-filters.has-filter-sheet .filter-more-button > span:not(.filter-more-badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    #listing-filters.has-filter-sheet .filter-more-button { padding: 0 11px; }
    #listing-filters.has-filter-sheet .filter-alert-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    #listing-filters.has-filter-sheet .filter-alert-button { padding: 0 11px; }
  }
  .filter-more-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--accent-blue); color: var(--button-ink); font: 700 11.5px/1 Inter, "Segoe UI", system-ui, sans-serif; }
  /* The rooms menu: "Beliebig" and 1-5+ as in the phone sheet. */
  #listing-filters.has-filter-sheet .rooms-filter-menu { width: 300px; }
  #listing-filters.has-filter-sheet .rooms-filter-menu .room-pills-frame { display: block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  #listing-filters.has-filter-sheet .rooms-filter-menu .room-pills-frame-label { display: none; }
  #listing-filters.has-filter-sheet .rooms-filter-menu .room-pills { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; }
  #listing-filters.has-filter-sheet .rooms-filter-menu .room-pill { display: grid; place-items: center; width: auto; height: 36px; min-height: 36px; margin: 0; padding: 0 10px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--accent-blue) 7%, transparent); color: var(--text-primary); font-weight: 600; }
  #listing-filters.has-filter-sheet .rooms-filter-menu .room-pill[aria-pressed="true"] { background: var(--accent-blue); color: var(--button-ink); }
  #listing-filters.has-filter-sheet .rooms-filter-menu .room-pill:disabled { opacity: .4; }
  #listing-filters.has-filter-sheet .rooms-filter-menu .mobile-room-any { display: grid; }
  #listing-filters.has-filter-sheet .rooms-filter-menu .mobile-room-any :is(.room-any-icon, .room-any-full, .room-any-short) { display: none; }
  #listing-filters.has-filter-sheet .rooms-filter-menu .mobile-room-any .room-any-menu { display: inline; }
  /* The same chips as on phones ("2–3 Zi.", "≤ 900 €", "Wien") under the bar, with "Alle
     zurücksetzen"; the older chip list keeps only its "Alarm erstellen". */
  #listing-filters.has-filter-sheet > .filter-chip-bar { order: 10; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 2px 0 0; }
  #listing-filters.has-filter-sheet > .filter-chip-bar[hidden] { display: none; }
  #listing-filters.has-filter-sheet .filter-chip { display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; height: 30px; padding: 0 9px 0 11px; border: 1px solid color-mix(in srgb, var(--accent-blue) 40%, transparent); border-radius: 999px; background: var(--filter-hover-bg); color: var(--accent-blue); font-size: 12.5px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; }
  #listing-filters.has-filter-sheet .filter-chip span { font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; }
  #listing-filters.has-filter-sheet .filter-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  #listing-filters.has-filter-sheet .filter-chip:hover { color: var(--accent-hover); }
  #listing-filters.has-filter-sheet .filter-chip.is-clear { padding: 0 11px; border-style: dashed; border-color: var(--border); background: transparent; color: var(--text-secondary); font-weight: 500; }
  /* "Alarm erstellen" ends the filter row in every view: no separate alarm row under the bar. */
  .listing-shell:has(#listing-filters.has-filter-sheet) .applied-filter-list { display: none; }
  #listing-filters.has-filter-sheet .filter-cell-alert { display: flex; order: 6; min-width: 0; }
  #listing-filters.has-filter-sheet .filter-alert-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--accent-blue); color: var(--button-ink); font: 700 13.12px/1 Inter, "Segoe UI", system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
  #listing-filters.has-filter-sheet .filter-alert-button:hover { background: var(--accent-hover); color: var(--button-ink); }
  #listing-filters.has-filter-sheet .filter-alert-button svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}
/* The layout is built down to 320px (the narrowest phones). A browser window dragged narrower keeps
   that width and scrolls sideways instead of squeezing the cards and header into each other. */
body { min-width: 320px; }