/* ══════════════════════════════════════════════
   Platzhalter für Google Kalender und OpenStreetMap-Karte
   Bis zum Klick auf „… laden“ steht statt des iframes dieser Platzhalter in derselben Größe
   (Startseite: Kalender 620 px, Karte 240 px; Schulkalender-Seite: 680/500/420 px wie das iframe).
   Das iframe erzeugt js/extern-laden.js.
══════════════════════════════════════════════ */

.extern {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.5rem;
  background-color: var(--blue-subtle);
  text-align: center;
}

/* Kalender: Monatsraster angedeutet */
.extern--kalender {
  background-image:
    linear-gradient(to right, rgba(26, 50, 130, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 50, 130, 0.07) 1px, transparent 1px);
  background-size: calc(100% / 7) 88px;
}
.cal-gcal-embed-wrap > .extern { height: 620px; }
.kal-embed-wrap > .extern      { height: 680px; }
@media (max-width: 900px) { .kal-embed-wrap > .extern { height: 500px; } }
@media (max-width: 640px) { .kal-embed-wrap > .extern { height: 420px; } }

/* Karte: Punktraster; 234 px = 240 px Rahmen minus 2 × 3 px Rand. Der Rahmen darf wachsen,
   falls der Text am Handy mehr Platz braucht */
.extern--osm {
  min-height: 234px;
  padding: 1rem;
  background-image: radial-gradient(rgba(26, 50, 130, 0.16) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
}
.map-container:has(> .extern) { height: auto; }

/* Karte im Platzhalter */
.extern__box {
  width: 100%;
  max-width: 28rem;
  padding: 1.75rem 1.5rem 1.4rem;
  background: var(--white);
  border: var(--clay-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.extern__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: var(--blue-pale);
  color: var(--blue);
}
.extern__icon svg { width: 28px; height: 28px; }
.extern__titel {
  margin-bottom: 0.45rem;
  font-family: 'Nunito', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
}
.extern__text {
  max-width: 24rem;
  margin: 0 auto 1.15rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.extern__aktion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.extern__laden { justify-content: center; }
.extern__laden svg { flex-shrink: 0; }
.extern__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  font-size: 0.82rem;
  line-height: 1.4;
}
.extern__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
.extern__links a:hover { color: var(--red); }
.extern__links svg { width: 13px; height: 13px; flex-shrink: 0; }
.extern__neuer-tab {          /* nur für Screenreader */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Karte (240 px): Symbol links, Text und Knopf rechts */
.extern--osm .extern__box {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 36rem;
  padding: 0.85rem 1.1rem;
  text-align: left;
  box-shadow: var(--shadow-md);
}
.extern--osm .extern__icon { flex: none; width: 44px; height: 44px; margin: 0; }
.extern--osm .extern__icon svg { width: 22px; height: 22px; }
.extern--osm .extern__titel { margin-bottom: 0.25rem; font-size: 1.05rem; }
.extern--osm .extern__text { max-width: none; margin: 0 0 0.65rem; font-size: 0.84rem; line-height: 1.5; }
.extern--osm .extern__aktion { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
.extern--osm .extern__laden { padding: 0.55rem 1.25rem; font-size: 0.92rem; }
.extern--osm .extern__links { justify-content: flex-start; gap: 0.3rem 1rem; }

@media (max-width: 480px) {
  .extern { padding: 1rem; }
  .extern__box { padding: 1.4rem 1.1rem 1.2rem; }
}
/* Schmale Kartenspalte (Handy und zweispaltiges Kontaktraster 900–1279 px): kompakt, ohne Symbol,
   damit der Platzhalter bei 240 px bleibt */
@media (max-width: 480px), (min-width: 900px) and (max-width: 1279px) {
  .extern--osm { padding: 0.4rem; }
  .extern--osm .extern__icon { display: none; }
  .extern--osm .extern__box { padding: 0.55rem 0.85rem 0.6rem; }
  .extern--osm .extern__titel { margin-bottom: 0.15rem; font-size: 1rem; }
  .extern--osm .extern__text { margin-bottom: 0.55rem; font-size: 0.8rem; }
  .extern--osm .extern__aktion { gap: 0.45rem 1rem; }
  .extern--osm .extern__laden { padding: 0.5rem 1.15rem; font-size: 0.88rem; }
}
/* Sehr schmale Handys: Überschrift weglassen (Text und Knopf erklären die Karte) */
@media (max-width: 359px) {
  .extern--osm .extern__titel { display: none; }
}