/* ---------------------------------------------------------------------------
 * Umgebungs-Block der Ortsseiten — Kachel-Optik der Einsatzgebiete-Seite
 *
 * Die Regeln fuer .eg-grid und .eg-city sind 1:1 aus dem Inline-<style> von
 * einsatzgebiete.html uebernommen, nicht neu erfunden. Sie stehen hier in
 * einer eigenen Datei, weil die Ortsseiten nur main.css laden und main.css
 * laut Projekt-Landkarte tabu ist.
 *
 * Wenn die Kachel-Optik jemals geaendert wird, muessen beide Stellen
 * angepasst werden — oder besser: die Inline-Regeln aus einsatzgebiete.html
 * werden bei Gelegenheit hierher gezogen und dort entfernt.
 *
 * main.css bleibt unangetastet.
 * ------------------------------------------------------------------------- */

.eg-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.eg-city {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--slate-200);
  font-size: .875rem;
  font-weight: 600;
  color: var(--slate-700);
  font-family: var(--font-display);
  transition: all .2s;
}

.eg-city:hover {
  border-color: rgba(234, 88, 12, .3);
  color: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(234, 88, 12, .08);
}

.eg-city svg {
  color: var(--orange);
  flex-shrink: 0;
  opacity: .75;
}

/* ---------------------------------------------------------------------------
 * Einzige bewusste Abweichung: die Spaltenzahl.
 *
 * Auf /einsatzgebiete steht in einer Kachel nur der Stadtname ("Köln"), dort
 * sind zwei Spalten ab 360 px unproblematisch. Im Umgebungs-Block lautet der
 * Linktext "Fußbodenheizung fräsen in Bergisch Gladbach" — deutlich laenger.
 * Zwei Spalten wuerden auf schmalen Geraeten umbrechen und die Kachelhoehen
 * ungleich machen.
 *
 * Deshalb: eine Spalte auf dem Handy, zwei ab Tablet, drei ab Desktop.
 * Der Linktext selbst bleibt unveraendert — er ist Teil der Messung.
 * ------------------------------------------------------------------------- */
.eg-grid--umgebung {
  grid-template-columns: 1fr;
}

/* Tap-Flaeche: 14 px Innenabstand oben und unten plus Zeilenhoehe ergeben
   rund 48 px. Die Mindesthoehe sichert das auch bei kleinerer Schrift ab. */
.eg-grid--umgebung .eg-city {
  min-height: 48px;
}

@media (min-width: 640px) {
  .eg-grid--umgebung {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .eg-grid--umgebung {
    grid-template-columns: repeat(3, 1fr);
  }
}