/* ==========================================================================
   Baustein: Standort-Karten
   Datei: css/bausteine/standort-karten.css (kein Skript)
   Gebraucht auf: kontakt.html (#offenburg, #koeln)
   Bauvorschrift: DESIGN.md, Baustein "Standort-Karten"; docs/site-architecture.md,
   kontakt.html Punkt 3 (direkte Wege, Telefon und Adresse).
   Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten,
   Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert.
   ========================================================================== */

/* Präfix: .locations-* */

/* Drei weiße Karten auf Hell (Regel 4), 72 px unter dem Sektionskopf wie die FAQ-Liste */
.locations {
  list-style: none; margin: 72px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
.locations-card {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--r-xl);
  padding: 32px 32px 36px; min-width: 0;
}
.locations-kind { color: var(--muted); }
.locations-name { margin-top: 14px; color: var(--ink); }
.locations-note { margin-top: 8px; }
/* Adresse und Wege unten, mit Haarlinie abgesetzt */
.locations-address {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
  font-style: normal; color: var(--ink);
}
.locations-links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
/* Wege-Liste direkt unter der Haarlinie (Karte "Mail und Telefon"): Abstände wie bei der
   Adresse, die Regel darüber würde margin und padding sonst zurücksetzen */
.locations-links.locations-address { margin-top: 28px; padding-top: 20px; }
.locations-links a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.locations-links a:hover { color: var(--ink); }
.locations-links span { color: var(--muted); }

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

@media (max-width: 640px) {
  .locations { margin-top: 48px; grid-template-columns: 1fr; }
  .locations-card { padding: 28px 20px 32px; }
}