/* IBMH – Platzhalter der 2-Klick-Karte (PL-005).
 * Eigene Datei, damit ibmh-components.css (Eigentum B-frontend) unberührt bleibt.
 * Die Maße des Platzhalters entsprechen .ibmh-map iframe aus ibmh-components.css,
 * damit beim Laden der Karte kein Layoutsprung (CLS) entsteht. */

.ibmh-map__placeholder {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  min-height: clamp(16rem, 38vw, 24rem);
  padding: clamp(1.1rem, 3vw, 2rem);
  border: 0;
  border-radius: 20px;
  background: #eef2f8;
  background-image: linear-gradient(135deg, #eef2f8 0%, #e3eaf5 100%);
  box-shadow: 0 16px 44px rgba(13, 43, 99, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.6);
  color: #161616;
}

.ibmh-map__head {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  line-height: 1.3;
}

.ibmh-map__addr {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.ibmh-map__note {
  margin: 0;
  max-width: 46ch;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #51607a;
}

.ibmh-map__note a { color: #1848a0; }

.ibmh-map__actions {
  margin: 0.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
}

/* Echter <button>, optisch der IBMH-CTA. Touch-Ziel mindestens 44px hoch. */
.ibmh-map__consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: #1848a0;
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1), transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ibmh-map__consent-btn:hover { background: #1f63c4; transform: translateY(-2px); }
.ibmh-map__consent-btn:active { transform: translateY(0); }

/* Sichtbarer Fokus, unabhängig vom Theme-Reset. */
.ibmh-map__consent-btn:focus-visible,
.ibmh-map__consent-btn:focus {
  outline: 3px solid #1e9fe9;
  outline-offset: 3px;
}

.ibmh-map__consent-btn:focus:not(:focus-visible) { outline: none; }

/* Nur für Screenreader: Statusmeldung nach dem Laden und der Hinweis auf den neuen Tab.
 * Eigene Klassen, damit die Karte nicht davon abhängt, dass das Theme .screen-reader-text
 * definiert (im Theme dg-factory-blocks nicht auffindbar, Stand 2026-09-20). */
.ibmh-map__sr,
.ibmh-map__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ibmh-map__consent-btn { transition: none; }
  .ibmh-map__consent-btn:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .ibmh-map__placeholder { box-shadow: 0 0 0 2px #1848a0; }
  .ibmh-map__note { color: #2c3a52; }
}