/* ============================================================
   plate_ces — contact-and-map. Kontakt-Sektion "CTA + Kontaktdaten + Karte".
   Links Kontakt-Panel (Dachzeile, Titel, Text, Kontaktzeilen, CTAs, Bild),
   rechts die Leaflet-Karte mit Zwei-Klick-Consent.

   Vertrag:
   - Sektions-Hintergrund und vertikale Abstaende macht das Frame-System
     (background_color_class / space_* / frame_layout_inner_*) — hier KEIN
     Sektions-Padding, KEINE Sektionsflaeche.
   - Farben ausschliesslich ueber die --plcam-*-Slots (Defaults aus den
     Bootstrap-Variablen) — Themes uebersteuern die Slots, nicht die Regeln.
   - Keine font-family an Headings/Texten (kommt global aus dem Theme).
   - Alles gescoped auf .frame-type-atomicplan_contactandmap.
   ============================================================ */

.frame-type-atomicplan_contactandmap {
  /* Theme-Slots: in einem Projekt-Theme einfach die Variablen neu belegen. */
  --plcam-accent: var(--bs-primary, #0d6efd);
  --plcam-line: var(--bs-border-color, rgba(0, 0, 0, 0.15));
  --plcam-ink: var(--bs-body-color, #212529);
  --plcam-ink-soft: var(--bs-secondary-color, rgba(33, 37, 41, 0.75));
  --plcam-consent-bg: var(--bs-tertiary-bg, #f5f5f4);
  --plcam-radius: var(--bs-border-radius, 0.375rem);
  /* Karte: Standard-Marker-Farbe und -Kacheloptik der atomic-leaflet-Komponente. */
  --plcam-marker-color: var(--bs-primary, #0d6efd);
  --plcam-tile-filter: none;
  /* Abstand der sticky Karte zur Oberkante (Platz fuer fixe Header). */
  --plcam-sticky-top: 7.5rem;
}

/* ---- Split ------------------------------------------------------------- */
.frame-type-atomicplan_contactandmap .plcam-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
/* Ohne Koordinaten faellt der Block sauber auf eine einspaltige Kontaktsektion
   zurueck (siehe frontend.html: dann wird die Karten-Spalte gar nicht gerendert). */
.frame-type-atomicplan_contactandmap .plcam--nomap .plcam-split {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
}

/* ---- Kontakt-Panel ----------------------------------------------------- */
.frame-type-atomicplan_contactandmap .plcam-panel .frame-pretitle { margin-bottom: 1.5rem; }
.frame-type-atomicplan_contactandmap .plcam-panel .frame-pretitle .idx {
  margin-right: 0.45em;
  color: var(--plcam-accent);
}
.frame-type-atomicplan_contactandmap .plcam-title { margin: 0 0 1.4rem; }
.frame-type-atomicplan_contactandmap .plcam-lead { max-width: 46ch; color: var(--plcam-ink-soft); }
.frame-type-atomicplan_contactandmap .plcam-lead > :last-child { margin-bottom: 0; }

/* Kontaktzeilen als Definitionsliste: Label klein/gesperrt, Wert groesser.
   Trennlinien ueber --plcam-line. */
.frame-type-atomicplan_contactandmap .plcam-facts {
  margin: 2.6rem 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--plcam-line);
}
.frame-type-atomicplan_contactandmap .plcam-facts dt {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plcam-accent);
  padding-top: 1.15rem;
}
.frame-type-atomicplan_contactandmap .plcam-facts dd {
  margin: 0 0 1.15rem;
  padding-top: 0.35rem;
  font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem);
  line-height: 1.35;
  color: var(--plcam-ink);
  border-bottom: 1px solid var(--plcam-line);
}
.frame-type-atomicplan_contactandmap .plcam-facts dd:last-of-type { border-bottom: 0; margin-bottom: 0; }
.frame-type-atomicplan_contactandmap .plcam-facts__addr { font-style: normal; }
.frame-type-atomicplan_contactandmap .plcam-facts dd a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--plcam-accent), var(--plcam-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.45s ease-out;
}
.frame-type-atomicplan_contactandmap .plcam-facts dd a:hover { background-size: 100% 1px; }

/* ---- CTA-Zeile --------------------------------------------------------- */
.frame-type-atomicplan_contactandmap .plcam-actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 2.2rem;
}
.frame-type-atomicplan_contactandmap .plcam-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--plcam-ink);
  text-decoration: none;
}
.frame-type-atomicplan_contactandmap .plcam-arrow:hover { text-decoration: underline; }
.frame-type-atomicplan_contactandmap .plcam-arrow .arw { transition: transform 0.3s ease-out; }
.frame-type-atomicplan_contactandmap .plcam-arrow:hover .arw { transform: translateX(0.25rem); }

/* ---- Optionales Formular (EXT:form im linken Panel) ---------------------
   Nur Abstand und Breitenbegrenzung der Textzeilen — die Feldoptik kommt aus
   dem Theme (Formular-Skin), nicht aus dem Block. */
.frame-type-atomicplan_contactandmap .plcam-form { margin: 2.6rem 0 0; }
.frame-type-atomicplan_contactandmap .plcam-form > :last-child { margin-bottom: 0; }

/* ---- Optionales Bild (Ansprechpartner/Team) ----------------------------- */
.frame-type-atomicplan_contactandmap .plcam-host { margin: 2.8rem 0 0; }
.frame-type-atomicplan_contactandmap .plcam-host img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--plcam-radius);
  background: rgba(0, 0, 0, 0.06);
}
.frame-type-atomicplan_contactandmap .plcam-host figcaption {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--plcam-ink-soft);
}

/* ---- Karten-Spalte ------------------------------------------------------ */
.frame-type-atomicplan_contactandmap .plcam-map { position: relative; }
.frame-type-atomicplan_contactandmap atomic-leaflet {
  display: block;
  position: relative;
  width: 100%;
  height: clamp(26rem, 48vh, 32.5rem); /* ~416–520px */
  overflow: hidden;
  border-radius: var(--plcam-radius);
  /* Durchreichen an die Webkomponente (liest --al-*): Themes stellen Marker-Farbe
     und Kachel-Toenung ueber die --plcam-*-Slots ein. Achtung: die OSM-Kacheln
     sind immer eine helle Flaeche — die Marker-Farbe muss darauf lesbar sein,
     unabhaengig von der Sektionsfarbe des Frames. */
  --al-marker-color: var(--plcam-marker-color);
  --al-tile-filter: var(--plcam-tile-filter);
}
/* Leaflet-Attribution (OSM-Pflicht) bleibt sichtbar, nur dezenter gesetzt. */
.frame-type-atomicplan_contactandmap atomic-leaflet .leaflet-control-attribution {
  font-size: 0.66rem;
  background: rgba(255, 255, 255, 0.82);
}

/* ---- Consent-Platzhalter (erster sichtbarer Zustand) --------------------
   Vollwertiges Designelement, kein grauer Kasten: ruhige Flaeche, feiner Rahmen,
   zwei sehr dezente Akzent-Lichter, Pin, Adresse, Button, Datenschutz-Hinweis.
   Im Fluss (nicht absolut) — so kann die Webkomponente den Platzhalter beim
   Laden der Karte einfach ausblenden/ersetzen, ohne dass ein Overlay ueber der
   fertigen Karte haengen bleibt. */
.frame-type-atomicplan_contactandmap .plcam-consent {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  text-align: center;
  background-color: var(--plcam-consent-bg);
  background-image:
    radial-gradient(52% 46% at 22% 18%, color-mix(in srgb, var(--plcam-accent) 12%, transparent), transparent 70%),
    radial-gradient(46% 40% at 82% 84%, color-mix(in srgb, var(--plcam-accent) 8%, transparent), transparent 72%);
  border: 1px solid var(--plcam-line);
  border-radius: var(--plcam-radius);
}
.frame-type-atomicplan_contactandmap .plcam-consent__pin {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.3rem;
  color: var(--plcam-accent);
}
.frame-type-atomicplan_contactandmap .plcam-consent__pin svg { width: 100%; height: 100%; display: block; }
.frame-type-atomicplan_contactandmap .plcam-consent__title {
  margin: 0;
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
  line-height: 1.2;
  color: var(--plcam-ink);
}
.frame-type-atomicplan_contactandmap .plcam-consent__addr {
  margin: 0;
  max-width: 32ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--plcam-ink-soft);
}
.frame-type-atomicplan_contactandmap .plcam-consent__btn { margin-top: 0.9rem; }
.frame-type-atomicplan_contactandmap .plcam-consent__note {
  margin: 0.2rem 0 0;
  max-width: 34ch;
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--plcam-ink-soft);
}

/* ---- Responsiv ---------------------------------------------------------- */
@media (min-width: 901px) {
  /* Die Karte bleibt beim Scrollen neben dem laengeren Kontakt-Panel stehen. */
  .frame-type-atomicplan_contactandmap .plcam-map {
    position: sticky;
    top: var(--plcam-sticky-top);
  }
}
@media (max-width: 900px) {
  /* Mobile: Kontakt zuerst, Karte danach (DOM-Reihenfolge ist bereits korrekt). */
  .frame-type-atomicplan_contactandmap .plcam-split { grid-template-columns: minmax(0, 1fr); }
  .frame-type-atomicplan_contactandmap atomic-leaflet { height: clamp(20rem, 60vw, 26rem); }
}
@media (prefers-reduced-motion: reduce) {
  .frame-type-atomicplan_contactandmap .plcam-facts dd a,
  .frame-type-atomicplan_contactandmap .plcam-arrow .arw { transition: none; }
}