:root {
      --portal-primary: #0E9F6E;
      --portal-primary-rgb: 14 159 110;
      --portal-secondary: #0B7E58;
      --portal-accent: #f59e0b;
      --portal-primary-hover: #0B7E58;
      --portal-primary-dark: #064E3B;
      --ink: #0f172a;
      --muted: #64748b;
      --soft: #f8fafc;
      --line: #e2e8f0;
      --line-soft: #f1f5f9;
      --ease-spring: cubic-bezier(.22, 1, .36, 1);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      min-height: 100vh;
      margin: 0;
      color: var(--ink);
      background: #fff;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .container {
      width: min(100% - 48px, 1248px);
      margin-inline: auto;
    }

    .top-spacer { height: 66px; }

    .site-header {
      position: fixed;
      z-index: 50;
      inset: 0 0 auto;
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 1px 0 rgba(15, 23, 42, .06);
    }

    .header-inner {
      position: relative;
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding-inline: 26px 24px;
    }

    .brand {
      color: var(--portal-primary);
      font-size: 20px;
      font-weight: 800;
      white-space: nowrap;
    }

    .nav {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .nav a,
    .login {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 8px 12px;
      border-radius: 8px;
      color: var(--portal-primary);
      font-size: 14px;
      font-weight: 650;
      transition: color .2s, background .2s;
    }

    .nav a:hover,
    .login:hover {
      color: var(--portal-primary);
      background: rgba(0, 0, 0, .05);
    }

    .nav a.active::after {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 1px;
      height: 2px;
      border-radius: 999px;
      background: var(--portal-primary);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
    }

    .header-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 19px;
      border-radius: 12px;
      color: #fff;
      background: linear-gradient(135deg, var(--portal-primary), var(--portal-primary-hover));
      box-shadow: 0 3px 12px rgb(var(--portal-primary-rgb) / .34);
      font-size: 14px;
      font-weight: 750;
      transition: transform .25s var(--ease-spring), box-shadow .25s;
    }

    .header-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgb(var(--portal-primary-rgb) / .42);
    }

    .menu-button {
      display: none;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 10px;
      color: #111827;
      background: transparent;
      cursor: pointer;
    }

    .breadcrumb {
      padding: 12px 0;
    }

    .breadcrumb ol {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: rgba(15, 23, 42, .6);
      font-size: 14px;
    }

    .breadcrumb a {
      color: var(--portal-primary);
      transition: color .2s;
    }

    .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
    .breadcrumb strong { color: #0f172a; font-weight: 700; }

    .city-hero {
      position: relative;
      overflow: hidden;
      padding: 40px 0 56px;
      color: #fff;
      text-align: center;
      background:
        radial-gradient(circle at 88% 18%, rgb(var(--portal-primary-rgb) / .32), transparent 33%),
        linear-gradient(135deg, var(--portal-primary), var(--portal-secondary) 52%, var(--portal-primary-dark));
    }

    .city-hero::after {
      content: "";
      position: absolute;
      top: -58px;
      right: -50px;
      width: 300px;
      height: 300px;
      border-radius: 999px;
      background: rgb(var(--portal-primary-rgb) / .24);
      filter: blur(60px);
      pointer-events: none;
    }

    .city-hero-inner {
      position: relative;
      z-index: 1;
      width: min(100% - 32px, 680px);
      margin-inline: auto;
    }

    .city-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 32px;
      padding: 6px 14px;
      margin-bottom: 18px;
      border-radius: 999px;
      color: rgba(255, 255, 255, .9);
      background: rgba(255, 255, 255, .16);
      backdrop-filter: blur(8px);
      font-size: 13px;
      font-weight: 650;
    }

    .city-hero h1 {
      margin: 0 0 12px;
      color: #fff;
      font-size: 30px;
      line-height: 1.15;
      font-weight: 850;
    }

    .city-hero p {
      margin: 0;
      color: rgba(255, 255, 255, .84);
      font-size: 16px;
    }

    .content {
      padding: 32px 0 70px;
    }

    .search-card {
      margin-bottom: 32px;
      padding: 16px;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    }

    .city-search {
      display: flex;
      gap: 12px;
    }

    .search-field {
      position: relative;
      flex: 1;
      min-width: 0;
    }

    .search-field > i,
    .search-field > svg {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(15, 23, 42, .4);
      pointer-events: none;
    }

    .search-field input {
      width: 100%;
      min-height: 46px;
      padding: 10px 16px 10px 42px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--ink);
      background: #fff;
      outline: 0;
      font-size: 16px;
    }

    .search-field input::placeholder { color: #9ca3af; }

    .search-field input:focus,
    .sort-select:focus {
      border-color: transparent;
      box-shadow: 0 0 0 2px rgb(var(--portal-primary-rgb) / .3);
    }

    .search-button {
      min-width: 86px;
      border: 0;
      border-radius: 8px;
      color: #fff;
      background: var(--portal-primary);
      cursor: pointer;
      font-size: 14px;
      font-weight: 750;
      transition: opacity .2s;
    }

    .search-button:hover { opacity: .9; }

    .results-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 24px;
      color: rgba(15, 23, 42, .6);
      font-size: 14px;
    }

    .sort {
      display: flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
    }

    .sort-select {
      min-width: 153px;
      min-height: 36px;
      padding: 6px 36px 6px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: #111827;
      background: #fff;
      outline: 0;
      font-size: 14px;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }

    .company-card {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line-soft);
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
      transition: transform .4s var(--ease-spring), box-shadow .4s, border-color .4s;
    }

    .card-link {
      position: absolute;
      inset: 0;
      z-index: 1;
      border-radius: inherit;
      font-size: 0;
      color: transparent;
      background: transparent;
    }

    .card-link:focus-visible {
      outline: 2px solid var(--portal-primary);
      outline-offset: 2px;
    }

    .company-card .actions {
      position: relative;
      z-index: 2;
    }

    .company-card:hover {
      border-color: transparent;
      transform: translateY(-8px);
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .15);
    }

    .company-image {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: #e2e8f0;
    }

    .company-image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform .5s;
    }

    .company-card:hover .company-image img { transform: scale(1.08); }

    .company-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .1), transparent);
      pointer-events: none;
    }

    .placeholder {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      color: #fff;
      background: linear-gradient(135deg, var(--portal-primary), var(--portal-secondary) 50%, var(--portal-primary-dark));
      font-size: 54px;
      font-weight: 850;
    }

    .rating-badge {
      position: absolute;
      z-index: 2;
      right: 12px;
      bottom: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 10px;
      border-radius: 8px;
      color: var(--ink);
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
      backdrop-filter: blur(8px);
      font-size: 12px;
      font-weight: 800;
    }

    .rating-badge .reviews {
      color: #94a3b8;
      font-weight: 600;
    }

    .card-content { padding: 20px; }

    .card-content h3 {
      margin: 0 0 7px;
      overflow: hidden;
      color: var(--ink);
      font-size: 16px;
      font-weight: 800;
      line-height: 1.28;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .stars {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-bottom: 9px;
      color: var(--portal-accent);
      font-size: 15px;
      line-height: 1;
    }

    .stars .muted-star { color: #d1d5db; }

    .review-count {
      margin-left: 8px;
      color: #94a3b8;
      font-size: 12px;
    }

    .address,
    .time {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow: hidden;
      color: #94a3b8;
      font-size: 12px;
      line-height: 1.5;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .actions {
      display: flex;
      gap: 8px;
      margin-top: 16px;
      padding-top: 13px;
      border-top: 1px solid var(--line-soft);
    }

    .action-btn {
      display: inline-flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 41px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: #475569;
      background: #fff;
      font-size: 13px;
      font-weight: 750;
      transition: transform .25s var(--ease-spring), background .25s, border-color .25s, color .25s;
    }

    .action-btn:hover {
      color: var(--portal-primary);
      border-color: rgb(var(--portal-primary-rgb) / .4);
      background: rgb(var(--portal-primary-rgb) / .08);
      transform: translateY(-1px);
    }

    .action-btn.primary {
      border: 0;
      color: #fff;
      background: linear-gradient(135deg, var(--portal-primary), var(--portal-primary-hover));
      box-shadow: 0 2px 8px rgb(var(--portal-primary-rgb) / .25);
    }

    .pagination-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin: 82px 0 64px;
      color: #64748b;
      font-size: 14px;
    }

    .pagination {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .page-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 30px;
      height: 32px;
      border-radius: 8px;
      color: #64748b;
      font-size: 14px;
    }

    .page-link.active {
      color: #fff;
      background: var(--portal-primary);
      font-weight: 800;
    }

    .more-list {
      width: min(100%, 1192px);
      margin-inline: auto;
      border: 1px solid #d8dee8;
      border-radius: 3px;
      overflow: hidden;
      background: #fff;
    }

    .more-list h3 {
      margin: 0;
      padding: 15px 20px;
      background: #f8fafc;
      color: #334155;
      font-size: 18px;
      font-weight: 770;
    }

    .more-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 58px;
      padding: 0 18px 0 20px;
      border-top: 1px solid #edf2f7;
      color: #1f2937;
      font-size: 16px;
    }

    .more-row svg { color: #9aa3ad; }

    /* Beliebte Städte grid (replaces the old "Mehr entdecken" list) */
    .cities-discover {
      margin-top: 28px;
    }

    .cities-discover-title {
      margin: 0 0 18px;
      color: var(--ink);
      font-size: 20px;
      font-weight: 800;
    }

    .cities-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 12px;
    }

    .city-tile {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      transition: border-color .2s, transform .2s, box-shadow .2s;
    }

    .city-tile:hover {
      border-color: rgb(var(--portal-primary-rgb) / .5);
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -12px rgb(var(--portal-primary-rgb) / .35);
    }

    .city-tile-name {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      overflow: hidden;
      color: var(--ink);
      font-size: 15px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .city-tile-name svg {
      flex-shrink: 0;
      color: var(--portal-primary);
    }

    .city-tile-count {
      flex-shrink: 0;
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 600;
      white-space: nowrap;
    }

    @media (max-width: 600px) {
      .cities-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .footer-container {
      width: min(100% - 48px, 1224px);
      margin-inline: auto;
    }

    .site-footer {
      color: #fff;
      background: #0f172a;
    }

    .footer-newsletter {
      padding: 40px 0;
      background: var(--portal-primary);
    }

    .footer-newsletter-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }

    .footer-newsletter h3 {
      margin: 0 0 6px;
      color: #fff;
      font-size: 18px;
      line-height: 1.2;
      font-weight: 850;
    }

    .footer-newsletter p {
      margin: 0;
      color: rgba(255, 255, 255, .72);
      font-size: 14px;
      line-height: 1.45;
    }

    .newsletter-form {
      display: flex;
      align-items: center;
      gap: 10px;
      width: min(100%, 458px);
    }

    .newsletter-form input {
      flex: 1;
      min-width: 0;
      height: 48px;
      padding: 0 20px;
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: 12px;
      color: #fff;
      background: rgba(255, 255, 255, .2);
      outline: 0;
      font-size: 15px;
    }

    .newsletter-form input::placeholder { color: rgba(255, 255, 255, .62); }

    .newsletter-form button {
      flex: 0 0 auto;
      height: 48px;
      min-width: 138px;
      border: 0;
      border-radius: 12px;
      color: var(--portal-primary);
      background: #fff;
      cursor: pointer;
      font-size: 15px;
      font-weight: 750;
    }

    .footer-main {
      padding: 60px 0 40px;
      background: #0f172a;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 64px;
    }

    .footer-heading {
      margin: 0 0 16px;
      color: #fff;
      font-size: 14px;
      font-weight: 750;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .footer-list {
      display: grid;
      gap: 18px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-link {
      color: #94a3b8;
      font-size: 14px;
      transition: color .2s;
    }

    .footer-link:hover { color: #fff; }

    .footer-bottom {
      padding: 16px 0;
      color: #64748b;
      background: #020617;
      border-top: 1px solid rgba(255, 255, 255, .05);
      font-size: 13px;
    }

    .footer-bottom-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .footer-bottom p { margin: 0; }
    .footer-heart { color: #f87171; }

    /* Cookie banner styles live solely in public/css/site-footer.css. */

    .icon-sm { width: 16px; height: 16px; }

    @media (max-width: 980px) {
      .container,
      .footer-container {
        width: min(100% - 32px, 1248px);
      }

      .header-inner { height: 72px; padding-inline: 16px; }
      .top-spacer { height: 72px; }
      .nav, .header-actions { display: none; }
      .menu-button { display: inline-flex; }

      .breadcrumb ol { font-size: 12px; }

      .city-hero {
        padding: 24px 0 40px;
      }

      .city-hero h1 {
        font-size: 20px;
      }

      .city-hero p {
        font-size: 13px;
      }

      .content {
        padding: 20px 0 56px;
      }

      .search-card {
        margin-bottom: 20px;
      }

      .city-search {
        flex-direction: column;
      }

      .search-button {
        min-height: 42px;
      }

      .results-top {
        align-items: flex-start;
        margin-bottom: 16px;
      }

      .sort {
        gap: 8px;
      }

      .sort-select {
        min-width: 96px;
      }

      .cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .card-content {
        padding: 16px;
      }

      .actions {
        margin-top: 12px;
        padding-top: 12px;
      }

      .pagination-row {
        margin: 56px 0 52px;
        justify-content: space-between;
        font-size: 12px;
      }

      .pagination {
        gap: 10px;
      }

      .more-list h3 {
        font-size: 18px;
      }

      .more-row {
        font-size: 16px;
      }

      .footer-newsletter-inner,
      .footer-bottom-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
      }

      .newsletter-form {
        flex-direction: column;
        width: 100%;
      }

      .newsletter-form input,
      .newsletter-form button {
        width: 100%;
        height: 48px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 34px;
      }

      .footer-newsletter {
        padding: 32px 0;
      }

      .footer-main {
        padding: 40px 0 32px;
      }
    }

/* === Firmen directory layout === */
.directory-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  margin-top: 8px;
}
.directory-sidebar {
  position: sticky;
  top: 90px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.city-list-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.city-list-card h3 {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 14px 6px;
  font-weight: 700;
}
.city-list-card .city-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-radius: 9px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease;
}
.city-list-card .city-link .count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.city-list-card .city-link:hover {
  background: var(--line-soft);
}
.city-list-card .city-link.active {
  background: var(--portal-primary);
  color: #fff;
}
.city-list-card .city-link.active .count {
  color: rgba(255, 255, 255, .8);
}
.city-list-card .more-link {
  display: block;
  text-align: center;
  padding: 10px;
  margin-top: 4px;
  color: var(--portal-primary);
  font-weight: 600;
  font-size: 13px;
  border-top: 1px solid var(--line-soft);
}
.city-list-card .more-link:hover { text-decoration: underline; }

.premium-card {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 14px;
  padding: 22px;
  color: #fff;
  text-align: center;
  box-shadow: 0 8px 20px rgba(249, 115, 22, .25);
}
.premium-card .premium-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  margin-bottom: 12px;
}
.premium-card h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}
.premium-card p {
  font-size: 13px;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .9);
  line-height: 1.5;
}
.premium-card .premium-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 16px;
  background: #fff;
  color: #ea580c;
  border-radius: 9px;
  font-weight: 700;
  font-size: 13px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.premium-card .premium-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 1024px) {
  .directory-layout { grid-template-columns: 1fr; }
  .directory-sidebar { position: static; }
  .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .directory-grid { grid-template-columns: 1fr; }
}

/* === Search split layout (results + sticky map) === */
.search-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 28px;
  align-items: start;
}

.search-results-col {
  min-width: 0;
}

.search-results-col .cards-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.search-map-panel {
  position: sticky;
  top: 90px;
  align-self: start;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);
  min-height: 480px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
  overflow: hidden;
}

.search-map-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: #f8fafc;
}

.search-map-header .map-pulse {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--portal-primary);
  box-shadow: 0 0 0 0 rgb(var(--portal-primary-rgb) / .55);
  animation: searchMapPulse 1.8s ease-out infinite;
}

@keyframes searchMapPulse {
  0%   { box-shadow: 0 0 0 0 rgb(var(--portal-primary-rgb) / .55); }
  70%  { box-shadow: 0 0 0 12px rgb(var(--portal-primary-rgb) /0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--portal-primary-rgb) /0); }
}

.search-map-header .search-map-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity .25s ease;
}

.search-map-header .search-map-title.is-fading {
  opacity: .35;
}

.search-map-hint {
  display: none;
  font-size: 12px;
  color: var(--muted);
}

.search-map-iframe-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #eef2f7;
}

.search-map-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  transition: opacity .35s ease;
}

.search-map-iframe-wrap.is-loading iframe {
  opacity: .4;
}

@media (max-width: 1100px) {
  .search-results-col .cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .search-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .search-map-panel {
    position: static;
    height: 320px;
    min-height: 0;
    order: -1;
  }
  .search-map-hint {
    display: inline-flex;
  }
}