.locations-page { padding: 3rem 0 4rem; }
.locations-page__head { text-align:center; margin-bottom: 2rem; }
.locations-page__head h1 { color: var(--color-primary); margin: 0 0 .5rem; }
.locations-page__lead { opacity:.8; }
.locations-page__empty { text-align:center; padding: 2rem; opacity:.6; }

.locations-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 1.4rem; }
.location-card {
  display:grid; grid-template-columns: 1fr 1.4fr; gap: 1.5rem;
  background: var(--color-background, #fff);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: .6rem; overflow:hidden;
  padding: 1.4rem;
}
.location-card.is-main { border-color: var(--color-primary); border-width: 2px; }
@media (max-width: 800px) { .location-card { grid-template-columns: 1fr; } }
.location-card__info { display:flex; flex-direction:column; gap:.4rem; }
.location-card__info h2 { margin:.2rem 0 .3rem; color: var(--color-primary); font-size:1.3rem; }
.location-card__badge {
  display:inline-block; align-self: flex-start;
  background: var(--color-primary); color:#fff;
  padding:.2rem .55rem; border-radius:.3rem;
  font-size:.75rem; font-weight:700;
}
.location-card__address { margin: 0; font-size:1rem; }
.location-card__hours { background:#f9fafb; padding:.6rem .8rem; border-radius:.35rem; font-family:inherit; font-size:.92rem; margin: 0; white-space: pre-wrap; }
.location-card__desc { font-size:.95rem; opacity:.85; }

/* Karte — Iframe + Placeholder-Overlay (Cookie-Consent-gated) */
.location-map {
  position: relative;
  /* min-height statt fixem aspect-ratio im Placeholder-Modus —
     stellt sicher, dass die zwei Buttons auch in schmalen Containern
     (z. B. Card-Spalte) komplett sichtbar bleiben. Der aspect-ratio
     greift erst, wenn die Karte tatsächlich geladen ist. */
  min-height: 240px;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  border-radius: .5rem;
  overflow: hidden;
}
.location-map.is-loaded {
  /* Sobald die Karte geladen ist → echtes Karten-Verhältnis erzwingen */
  aspect-ratio: 16 / 10;
  min-height: 0;
}
.location-map.is-large.is-loaded { aspect-ratio: 16 / 9; }

.location-map iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
  /* Im Placeholder-Modus den (leeren) Iframe verstecken, sonst flackert
     "about:blank" als weiße Fläche unter dem Placeholder. */
  visibility: hidden;
}
.location-map.is-loaded iframe {
  visibility: visible;
}

.location-map__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* WICHTIG: NICHT abschneiden — sonst verschwindet der Knopf in schmalen
     Containern. Wenn der Inhalt höher als der Container ist, wachsen
     wir nach unten heraus (overflow:visible greift dank dem
     overflow:hidden auf .location-map nur visuell, das Layout selbst
     bleibt korrekt — der Container wächst per min-height mit). */
  padding: 1.25rem;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-secondary, #f3f4f6));
}
.location-map.is-loaded .location-map__placeholder {
  display: none;
}

.location-map__placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  max-width: 100%;
  text-align: center;
}
.location-map__placeholder-title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
}
.location-map__placeholder-text {
  margin: 0;
  font-size: .85rem;
  opacity: .8;
  line-height: 1.4;
  max-width: 360px;
}
.location-map__placeholder-text a { color: var(--color-primary); text-decoration: underline; }

.location-map__placeholder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: .35rem;
}
.location-map__load,
.location-map__settings {
  border: 0;
  padding: .55rem 1rem;
  border-radius: .35rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  font-family: inherit;
  line-height: 1.2;
  transition: filter .15s ease, transform .15s ease;
}
.location-map__load {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
}
.location-map__settings {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.location-map__load:hover,
.location-map__settings:hover { filter: brightness(.92); }

/* Sehr schmale Karten (z. B. Sidebar-Cards): Buttons untereinander */
@media (max-width: 360px) {
  .location-map__placeholder-actions { flex-direction: column; align-items: stretch; }
}

/* Detail */
.location-detail { padding: 2.5rem 0 4rem; }
.location-detail__back { color: var(--color-primary); font-weight:600; text-decoration:none; }
.location-detail__layout { display:grid; grid-template-columns: 1fr 1.5fr; gap: 2rem; margin-top: 1.2rem; }
@media (max-width: 800px) { .location-detail__layout { grid-template-columns: 1fr; } }
.location-detail h1 { color: var(--color-primary); margin: 1rem 0 0; }

/* Inline-Embed */
.location-embed {
  display:grid; grid-template-columns: 1fr 1.3fr; gap: 1.2rem;
  margin: 1.5rem 0;
  background: var(--color-background, #fff);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius:.5rem; padding: 1.2rem;
}
@media (max-width: 700px) { .location-embed { grid-template-columns: 1fr; } }
.location-embed__info h3 { margin:0 0 .5rem; color: var(--color-primary); }

/* Footer-Band */
.locations-band {
  display:flex; align-items:center; gap: 1.2rem;
  padding: 1rem; flex-wrap:wrap;
  font-size:.92rem;
}
.locations-band a { color: var(--color-primary); margin-left:auto; font-weight:600; text-decoration:none; }