/* Regionalseiten — der Zahlenblock des Gebiets.
   Vier Kacheln, die auf dem Handy zu zweit stehen: Bei drei Spalten
   bricht "1.536 ha" auf 375 px um, und eine umgebrochene Zahl liest
   niemand mehr als Zahl. */

.rg-zahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 4px;
}

.rg-zahl {
  background: var(--zart);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 14px 16px;
}

.rg-wert {
  display: block;
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  color: var(--wein);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}

.rg-was {
  display: block;
  font-size: 12.5px;
  color: var(--matt);
  line-height: 1.45;
}

@media (max-width: 760px) {
  .rg-zahlen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .rg-zahlen { grid-template-columns: 1fr; }
}

/* Bekannte Gebiete auf den Ueberblicksseiten.
   Zwei Spalten statt vier Kacheln: Hier steht ein Satz je Gebiet, keine
   Zahl — und ein Satz braucht Zeilenbreite, keine Kachelmitte. */

.rg-bekannt {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}

.rg-bekannt-eintrag {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 13px 16px;
}

.rg-bekannt-eintrag b {
  display: block;
  font-size: 15px;
  margin-bottom: 3px;
}

.rg-bekannt-eintrag span {
  display: block;
  font-size: 13.5px;
  color: var(--matt);
  line-height: 1.55;
}

@media (max-width: 760px) {
  .rg-bekannt { grid-template-columns: 1fr; }
}