/* ============================================================
   CX-UI — Typ-Modul: GEO (Stadt-, Bundesland-, Regionsseiten)
   Sites: ladestationguru, studierenguru, bundestagwahlumfrage,
   renditerechner24, immobiliewertrechner24, yachtcharter,
   cannamesse, stress-abbauen-tipps
   ============================================================ */

/* Regionskacheln mit Bild */
.cx-geo-grid { display: grid; gap: var(--cx-s4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.cx-geo-tile {
  position: relative;
  display: block;
  aspect-ratio: 3/2;
  border-radius: var(--cx-r-lg);
  overflow: hidden;
  color: var(--cx-white);
  background: var(--cx-bg-dark);
}
.cx-geo-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--cx-t-slow);
}
.cx-geo-tile:hover img { transform: scale(1.05); }
.cx-geo-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}
.cx-geo-tile__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--cx-s4); }
.cx-geo-tile__name { font-size: var(--cx-fs-md); font-weight: 600; color: var(--cx-white); margin: 0; }
.cx-geo-tile__meta { font-size: var(--cx-fs-xs); color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }

/* Kompakte Variante ohne Bild */
.cx-geo-list { display: grid; gap: var(--cx-s2); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.cx-geo-list a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--cx-s2);
  padding: var(--cx-s3) var(--cx-s4);
  background: var(--cx-white);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r);
  font-size: var(--cx-fs-base);
  color: var(--cx-text-mid);
  transition: all var(--cx-t);
}
.cx-geo-list a:hover { border-color: var(--cx-accent); color: var(--cx-accent); background: var(--cx-accent-light); }
.cx-geo-list__count { font-size: var(--cx-fs-xs); color: var(--cx-text-faint); font-variant-numeric: tabular-nums; }

/* A-Z-Register */
.cx-az { display: flex; flex-wrap: wrap; gap: var(--cx-s1); margin-bottom: var(--cx-s6); }
.cx-az a {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--cx-border); border-radius: var(--cx-r-sm);
  font-size: var(--cx-fs-base); font-weight: 600;
  color: var(--cx-text-mid);
  transition: all var(--cx-t);
}
.cx-az a:hover { border-color: var(--cx-accent); background: var(--cx-accent); color: var(--cx-white); }
.cx-az a[aria-disabled] { opacity: .3; pointer-events: none; }

/* Geo-Kopf (Stadt/Bundesland-Seite) */
.cx-geo-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--cx-s6);
  align-items: center;
  padding-block: var(--cx-s7);
}
.cx-geo-head__title { font-size: var(--cx-fs-3xl); margin-bottom: var(--cx-s3); }
.cx-geo-head__img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--cx-r-lg); }

/* Nachbar-/Umkreis-Navigation */
.cx-geo-near { display: flex; flex-wrap: wrap; gap: var(--cx-s2); }
.cx-geo-near a {
  padding: 5px 12px;
  font-size: var(--cx-fs-sm);
  background: var(--cx-bg-alt);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-full);
  color: var(--cx-text-mid);
}
.cx-geo-near a:hover { border-color: var(--cx-accent); color: var(--cx-accent); }

@media (max-width: 768px) {
  .cx-geo-head { grid-template-columns: minmax(0, 1fr); padding-block: var(--cx-s6); }
  .cx-geo-head__img { order: -1; }
  .cx-geo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .cx-az a { width: 30px; height: 30px; font-size: var(--cx-fs-sm); }
}