/* ============================================================
   BKS24 — Geschäftsstellen-Kontakt-Einblender (office-contact)
   Dezente, scroll-eingeblendete Pille unten rechts mit zwei
   Ansprechpartnern (Foto + „Für …" + E-Mail/Telefon). Eigener
   Code, kein Drittanbieter, kein Tracking. Site-weit (wp_footer).
   ============================================================ */

.bks-office {
  position: fixed; right: 24px; bottom: 24px; z-index: 1000;
  font-family: 'TeX Gyre Heros', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.bks-office[hidden] { display: none; }

/* GP-„Back to top" über die Pille heben (keine Kollision unten rechts). */
a.generate-back-to-top { bottom: 120px !important; right: 24px !important; }

/* ---------- eingeklappte Pille ---------- */
.bks-office__toggle {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #d4dade; border-radius: 999px;
  padding: 9px 26px 9px 9px; box-shadow: 0 6px 22px rgba(14,32,48,.14);
  cursor: pointer; font: inherit; color: #231f20;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, border-color .15s ease;
}
.bks-office.is-revealed .bks-office__toggle { opacity: 1; transform: none; pointer-events: auto; }
.bks-office__toggle:hover { border-color: #006699; }
.bks-office__toggle:focus-visible { outline: 3px solid rgba(232,106,42,.55); outline-offset: 2px; }
/* Eingeklappt: Gruppenbild der beiden (Querformat-Thumb, auf Gesichter gezoomt) */
.bks-office__group {
  display: inline-block; width: 84px; height: 56px; border-radius: 999px;
  overflow: hidden; border: 1px solid #e3e7ea;
}
.bks-office__group img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  transform: scale(1.7); transform-origin: center 18%; display: block;
}
.bks-office__toggle-label { font-size: 17px; font-weight: 600; color: #006699; }

/* ---------- ausgeklapptes Panel ---------- */
.bks-office__panel {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: 416px; max-width: calc(100vw - 48px);
  background: #fff; border: 1px solid #d4dade; border-radius: 8px;
  box-shadow: 0 18px 50px rgba(14,32,48,.18); padding: 26px 26px 22px;
}
.bks-office__panel[hidden] { display: none; }
.bks-office__close {
  position: absolute; top: 10px; right: 14px; border: 0; background: none;
  font-size: 28px; line-height: 1; color: #6c7a85; cursor: pointer; padding: 4px;
}
.bks-office__close:hover { color: #231f20; }
.bks-office__head {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #006699; margin: 0 0 18px; padding-right: 18px;
}
.bks-office__person { display: flex; gap: 16px; align-items: flex-start; }
.bks-office__person + .bks-office__person { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e3e7ea; }
.bks-office__photo {
  width: 84px; height: 84px; border-radius: 8px; object-fit: cover;
  object-position: center 20%; flex: none;
}
.bks-office__pbody { min-width: 0; }
.bks-office__name { font-size: 18px; font-weight: 600; color: #231f20; margin: 0; }
.bks-office__role { font-size: 15px; font-weight: 600; color: #006699; margin: 1px 0 0; }
.bks-office__for { font-size: 14px; color: #51606b; line-height: 1.45; margin: 7px 0 10px; }
.bks-office__actions { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.bks-office__actions a {
  font-size: 15px; font-weight: 600; color: #006699; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
}
.bks-office__actions a span { overflow-wrap: anywhere; }
.bks-office__actions a:hover { color: #b8470f; text-decoration: underline; }
.bks-office__actions a:focus-visible { outline: 2px solid rgba(232,106,42,.55); outline-offset: 2px; }
.bks-office__actions svg { width: 17px; height: 17px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .bks-office__toggle { transition: none; transform: none; }
}
@media (max-width: 600px) {
  .bks-office { right: 14px; bottom: 14px; }
  .bks-office__toggle-label { display: none; }     /* mobil: nur die zwei Gesichter */
  .bks-office__panel { width: 340px; padding: 22px; }
  a.generate-back-to-top { bottom: 96px !important; right: 14px !important; }
}