/* ═══ contact_cta — Kontakt-/Konversions-Baustein ═══════════════════════════
   Personen-first (Owner-Entscheid 2026-08-04): EIN Primär-CTA + namentliche
   Ansprechpartner (Telefon prominent, E-Mail als Icon) — keine zentralen
   Tel-/Mail-Kacheln mehr (Zentrale + info@ leben in Footer, /kontakt, JSON-LD).
   2-Spalten-Card: Konversions-Panel links, 2-in-1-Karten-Paket rechts
   (Hochformat), mobil gestapelt. Alle Farben/Maße aus variables.css (SSOT).
   Reachmap-/Consent-Interna werden HIER bewusst NICHT angefasst: Variantenwahl,
   Geometrie und Höhenkette des Karten-Pakets leben zentral in main.css
   („Map-Paket-Höhe"-Block) — EINE Pflegestelle, kein ladereihenfolge-
   abhängiger Zweitregelsatz (Vier-Augen-Befund 2026-08-04). */

.contact-cta__panel {
  background:
    radial-gradient(70% 70% at 100% 0%, rgb(var(--c-wash) / 0.88), transparent 55%),
    radial-gradient(58% 58% at 0% 8%, rgb(var(--c-red) / 0.06), transparent 48%),
    linear-gradient(180deg, var(--color-bg), var(--color-bg-alt));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 12px 44px rgb(var(--c-shadow) / 0.08);
  display: grid;
  gap: var(--space-8);
  align-items: stretch;
}
@media (min-width: 768px) { .contact-cta__panel { padding: var(--space-10); } }
@media (min-width: 880px) {
  .contact-cta--map .contact-cta__panel {
    /* Kartenspalte bei 26rem DECKELN statt anteilig (0.66fr) mitwachsen lassen:
       das Hochformat-Paket ist ~1.56× so hoch wie breit — jede zusätzliche
       Spaltenbreite wurde 1:1 zu Leerraum in der Textspalte (Owner-Befund auf
       breiten Displays). */
    grid-template-columns: minmax(0, 1fr) clamp(20rem, 34vw, 26rem);
    gap: var(--space-10);
  }
}

/* ── Konversions-Spalte: Titel → Lead → EIN CTA → Ansprechpartner ─────────
   Flex-Spalte, damit der Personen-Block in der Map-Variante ans Panel-Ende
   rückt (margin-top:auto) — kein totes Feld unter der Textspalte, das Panel
   schließt bündig mit der hohen Kartenspalte (Vier-Augen-Befund D4). */
.contact-cta__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-cta__text .section-subtitle { margin-bottom: var(--space-7); }
.contact-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ── Ansprechpartner-Slot (SSOT: config/contact_intents.yaml) ─────────────
   Conversion-Hebel „wer meldet sich": Slot-Label aus dem 20-lang-SSOT
   contact_page.<lang>.team.eyebrow + wiederverwendete .contact-person-card. */
.contact-cta__people {
  width: 100%;
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-4);
  /* IMMER einspaltig: jede Person ist eine volle Directory-ZEILE (Avatar |
     Identität | Aktionen) statt zweier gequetschter Kacheln — 2 Kacheln à
     ~310px ließen Tel-Pille + Mail-Button nicht nebeneinander atmen (gemessen
     1440px: Info-Spalte 190px vs. 215px Aktionsbreite). */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 880px) {
  /* Zwei auto-Margins teilen den (nach dem 26rem-Deckel kleinen) Restraum in
     zwei bewusste Luftpolster: Titelblock oben, CTA, Ansprechpartner-Karten
     tragen den unteren Teil der Spalte. */
  .contact-cta--map .contact-cta__actions { margin-top: auto; }
  .contact-cta--map .contact-cta__people { margin-top: auto; padding-top: var(--space-7); }

  /* Map-Variante ≥880px: Ansprechpartner ÜBEREINANDER als zwei breite
     Media-Karten (Owner-Iteration 3) — großes Portrait links über die volle
     Kartenhöhe, rechts Identität + Zuständigkeits-Teaser, Aktionen rechtsbündig
     (¾-Grid aus der 720px-Regel). Nutzt die volle Textspaltenbreite, ohne die
     Sektion in die Länge zu ziehen. Flat + Mobil behalten die kompakte Zeile. */
  .contact-cta--map .contact-cta__people {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
  .contact-cta--map .contact-cta__people .contact-person-card {
    grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .contact-cta--map .contact-cta__people .contact-person-card__photo {
    width: 100%;
    height: 100%;
    min-height: 12rem;
    border-radius: 0;
  }
  .contact-cta--map .contact-cta__people .contact-person-card__zoom {
    --media-zoom-size: 1.9rem;
    --media-zoom-icon-size: 0.95rem;
    --media-zoom-inset: var(--space-2);
  }
  .contact-cta--map .contact-cta__people .contact-person-card__info {
    align-self: center;
    padding: var(--space-5) var(--space-6);
  }
  .contact-cta--map .contact-cta__people .contact-person-card__name {
    font-size: var(--text-lg);
  }
  .contact-cta--map .contact-cta__people .contact-person-card__teaser {
    margin: var(--space-2) 0 0;
  }
}
.contact-cta__people-label {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

/* Karten im CTA: „Directory"-Zeile (klickbares Portrait links, Identität +
   Zuständigkeits-Teaser mittig, Aktionen rechts) — DIESELBE Formensprache wie
   die Phone-Variante der Team-Karten (main.css ≤559px). Telefon = Primäraktion
   und bricht nie mitten in der Nummer; E-Mail = quadratischer Icon-Button
   (aria-label + JS-Reveal bleiben — die ausgeschriebene Adresse liefert die
   Lightbox-Visitenkarte). Das Portrait ist Lightbox-Trigger wie auf /kontakt;
   der „Ansehen"-Hover-Hint ist fürs kleine Avatar zu groß → Zoom-Badge genügt. */
.contact-cta__people .contact-person-card {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  text-align: left;
  padding: var(--space-4);
}
.contact-cta__people .contact-person-card__photo {
  /* Mobil kompakt (4.5rem): sonst drückt das Avatar die Info-Spalte unter die
     nowrap-Breite der Durchwahl (gemessen 390px: 166px < 169px Pille) — ab
     720px wächst das klickbare Portrait auf 6rem (Lightbox-Tap-Target). */
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 720px) {
  .contact-cta__people .contact-person-card__photo {
    width: 6rem;
    height: 6rem;
  }
}
.contact-cta__people .contact-person-card__photo--monogram { border-radius: var(--radius-lg); }
.contact-cta__people .contact-person-card__monogram {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  font-size: var(--text-2xl);
  box-shadow: none;
}
.contact-cta__people .contact-person-card__hint { display: none; }
/* Kleines Avatar (4.5–6rem) statt 200px-Portrait → Badge eine Nummer kleiner.
   Nur Tokens: Aussehen + Touch-Sichtbarkeit sind SSOT in components/lightbox.css
   (.media-zoom-badge). Auf Touch steht das Badge dauerhaft — bei 4.5rem Avatar
   ist 1.25rem der Kompromiss aus „erkennbar" und „verdeckt kein Gesicht". */
.contact-cta__people .contact-person-card__zoom {
  --media-zoom-size: 1.5rem;
  --media-zoom-icon-size: 0.8rem;
  --media-zoom-inset: var(--space-1);
}
@media (hover: none) {
  .contact-cta__people .contact-person-card__zoom {
    --media-zoom-size: 1.25rem;
    --media-zoom-icon-size: 0.7rem;
  }
}
.contact-cta__people .contact-person-card__info { min-width: 0; padding: 0; }
.contact-cta__people .contact-person-card__name { font-size: var(--text-base); margin-bottom: 0.15rem; }
.contact-cta__people .contact-person-card__role { margin-bottom: var(--space-2); }
.contact-cta__people .contact-person-card__teaser {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--text-sm);
}
.contact-cta__people .contact-person-card__links {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-2);
}
.contact-cta__people .contact-person-card__phone {
  font-size: var(--text-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.contact-cta__people .contact-person-card__email {
  flex: 0 0 auto;
  width: 2.4rem;
  min-height: 2.4rem;
  padding-inline: 0;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border));
  color: var(--color-accent-text);
}
.contact-cta__people .contact-person-card__email .js-cmail-label { display: none; }
/* Ab 720px wird die Zeile dreispaltig gelesen: Identität + Teaser links,
   Aktionen rechtsbündig vertikal zentriert — das Info-Div wird dafür selbst
   zum Grid (Markup bleibt die geteilte SSOT-Karte). */
@media (min-width: 720px) {
  .contact-cta__people .contact-person-card__info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: var(--space-5);
  }
  .contact-cta__people .contact-person-card__name { grid-column: 1; margin: 0; }
  .contact-cta__people .contact-person-card__role { grid-column: 1; margin: 0; }
  .contact-cta__people .contact-person-card__teaser { grid-column: 1; margin: var(--space-1) 0 0; }
  .contact-cta__people .contact-person-card__links {
    grid-column: 2;
    grid-row: 1 / span 3;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}
.dark-section .contact-cta__people { border-top-color: var(--glass-on-dark-border); }

/* ── Karten-Spalte ────────────────────────────────────────────────────────
   KEINE Fixhöhe, KEIN overflow:hidden: das 2-in-1-Paket bestimmt seine Höhe
   auf JEDEM Viewport selbst — der frühere iframe-Ära-Clip hat auf Mobil die
   halbe Karte und den kompletten Consent-Block abgeschnitten (Vier-Augen-
   Befund D1). Höhen/Varianten der Paket-Interna: main.css (EINE Stelle). */
.contact-cta__map {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
/* Adresse als Fußzeile der Kartenspalte: Ortskontext zur Karte, bewusst KEIN
   eigener Kontaktkanal neben CTA + Ansprechpartnern (Personen-first). */
.contact-cta__address {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}
.contact-cta__address > .bm-icon { flex-shrink: 0; color: var(--color-accent-text); margin-top: 0.1em; }
.contact-cta__address strong { color: var(--color-text); font-weight: var(--font-weight-semibold); }

/* ── Variante FLAT (ohne Karte): einspaltige, zentrierte Card ────────────── */
.contact-cta--flat .contact-cta__panel { max-width: 640px; margin-inline: auto; }
.contact-cta--flat .contact-cta__text { align-items: center; text-align: center; }
.contact-cta--flat .contact-cta__actions { justify-content: center; }
/* Directory-Zeilen bleiben auch in der zentrierten Flat-Card linksbündig und
   voll breit — eine Zeile trägt 1 UND 2 Personen gleich gut (kein :has nötig). */
.contact-cta--flat .contact-cta__people { text-align: left; }

/* ── Dark-Section-Variante ──────────────────────────────────────────────── */
.dark-section .contact-cta__panel {
  background: var(--glass-on-dark-bg);
  border-color: var(--glass-on-dark-border);
}

/* ═══ contact_details_card — kompakte Kontaktdaten-Card ══════════════════════
   EIN NAP-Baustein, geteilt von Home-Kontaktsektion UND /kontakt-Sidebar.
   Helle Card + Icon-Badges (usp-light-Formensprache), labeled Rows, opt.
   Öffnungszeiten + Button. Alle Farben/Maße aus variables.css (SSOT). */
.contact-card {
  display: grid;
  gap: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
@media (min-width: 768px) { .contact-card { padding: var(--space-8); gap: var(--space-4); } }

.contact-card__row { display: flex; align-items: flex-start; gap: var(--space-4); }

/* Icon-Badge — gleiche Formensprache wie .usp-grid--light .usp-icon */
.contact-card__badge {
  flex-shrink: 0;
  width: var(--space-12);
  height: var(--space-12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-accent-bg);
  border: 1px solid var(--color-accent-bg-hover);
  color: var(--color-accent-text);
  font-size: var(--text-lg);
  line-height: 1;
  transition:
    color var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base);
}
.contact-card__row:hover .contact-card__badge {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.contact-card__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.contact-card__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.contact-card__value {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-snug);
}
a.contact-card__value { text-decoration: none; transition: color var(--transition-base); }
a.contact-card__value:hover { color: var(--color-accent-text); }
.contact-card__value strong { font-weight: var(--font-weight-semibold); }

.contact-card__cta { margin-top: var(--space-2); justify-self: start; }

/* ── Wide-Variante (Home, über der vollbreiten Karte): Rows 2-spaltig ─────── */
@media (min-width: 640px) {
  .contact-card--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-8); }
  .contact-card--wide .contact-card__cta { grid-column: 1 / -1; }
}

/* ── Flat-Variante (eingebettet, z. B. /kontakt-Sidebar): ohne eigene Fläche/
   Rahmen — dieselben Badge-Rows, aber im umgebenden Panel statt als Box-in-Box. */
.contact-card--flat {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* ── Dark-Section-Variante ──────────────────────────────────────────────── */
.dark-section .contact-card {
  background: var(--glass-on-dark-bg);
  border-color: var(--glass-on-dark-border);
}
.dark-section .contact-card__value { color: var(--color-text-inverse); }