/* ══════════════════════════════════════════════════════════════════
   Kontakt-Widget (Floating Contact FAB)
   Portabel über alle SF-Projekte. Nutzt die Design-Tokens aus
   design-system.css (--blue, --surface, --text, Schatten, Radius).
   Native <details>/<summary>-Disclosure, kein Framework.

   Stacking-Kontext (bewusst unter dem Cookie-Modal):
     Cookie-Consent-Modal  = 2147483647 (Max, liegt immer oben)
     Back-to-Top-Button     = 999998
     Kontakt-Widget         = 999900 (offen: 999999)
   ══════════════════════════════════════════════════════════════════ */

.sfc {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 999900;
  /* <details> ist per Default block; wir wollen die Höhe nur so gross
     wie der FAB, damit das Panel absolut darüber ankert. */
  width: auto;
  animation: sfcFabIn 0.45s var(--ease) both 0.5s;
}
.sfc[open] { z-index: 999999; }

@keyframes sfcFabIn {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── FAB (Trigger) ─────────────────────────────────────────────── */
.sfc-fab {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;                 /* Marker weg (Firefox/Blink ::marker) */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.sfc-fab::-webkit-details-marker { display: none; }  /* Marker weg (Safari) */
.sfc-fab::marker { content: ""; }

.sfc-fab-label {
  display: none;                    /* Mobile: nur Icon (minimal) */
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-s);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.10);
  white-space: nowrap;
}
/* Schreibmaschinen-Cursor, nur während der Tipp-Animation (JS setzt .sfc-typing;
   nicht bei reduced-motion, weil das JS die Animation dann gar nicht startet). */
.sfc-fab-label.sfc-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--blue);
  animation: sfcCaret 1.05s steps(1) infinite;
}
@keyframes sfcCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.sfc-fab-ico {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 22px;
  box-shadow: var(--shadow-blue);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.sfc-fab:hover .sfc-fab-ico {
  background: var(--blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(36, 120, 205, 0.32);
}

/* Dezenter Puls-Ring: zieht Aufmerksamkeit, ohne zu nerven. Ein weicher, nach
   aussen laufender und ausblendender Ring (~2,8s). Läuft nur im geschlossenen
   Zustand, pausiert bei Hover, aus bei reduced-motion (siehe unten). */
.sfc:not([open]) .sfc-fab-ico {
  animation: sfcPulse 2.8s var(--ease) 1.5s infinite;
}
.sfc-fab:hover .sfc-fab-ico,
.sfc[open] .sfc-fab-ico { animation: none; }
@keyframes sfcPulse {
  0%   { box-shadow: var(--shadow-blue), 0 0 0 0 rgba(36, 120, 205, 0.42); }
  50%  { box-shadow: var(--shadow-blue), 0 0 0 14px rgba(36, 120, 205, 0); }
  100% { box-shadow: var(--shadow-blue), 0 0 0 14px rgba(36, 120, 205, 0); }
}
.sfc-fab-ico .sfc-ico-close { display: none; }
.sfc[open] .sfc-fab-ico .sfc-ico-open { display: none; }
.sfc[open] .sfc-fab-ico .sfc-ico-close { display: inline-block; }
.sfc[open] .sfc-fab-label { display: none; }

/* Fokus-Ring (a11y) */
.sfc-fab:focus-visible { outline: none; }
.sfc-fab:focus-visible .sfc-fab-ico {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ─── Panel ─────────────────────────────────────────────────────── */
.sfc-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(320px, calc(100vw - 32px));
  max-height: min(70dvh, 460px);
  overflow-y: auto;
  background: linear-gradient(158deg, var(--blue) 0%, var(--blue-hover) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(29, 99, 172, 0.42), 0 2px 8px rgba(15, 23, 42, 0.12);
  padding: 8px;
  transform-origin: bottom right;
  animation: sfcPanelIn 0.2s var(--ease) both;
}
@keyframes sfcPanelIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sfc-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 12px 10px;
}
.sfc-title {
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.sfc-sub {
  font-family: var(--font);
  font-size: 0.8125rem;
  color: #fff;
  line-height: 1.3;
}

/* ─── Rows (Kanäle) ─────────────────────────────────────────────── */
.sfc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  margin-top: 8px;
  border-radius: var(--radius-md);
  text-decoration: none;
  background: #fff;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.sfc-row:first-of-type { margin-top: 0; }
.sfc-row:hover {
  background: var(--bg-alt);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}
.sfc-row:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.sfc-row-ico {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 17px;
}
.sfc-row-wa .sfc-row-ico     { background: #25D366; color: #fff; }
.sfc-row-mail .sfc-row-ico   { background: var(--blue-dim); color: var(--blue); }
.sfc-row-termin .sfc-row-ico { background: var(--blue); color: #fff; }

.sfc-row-tx {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sfc-row-t {
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.sfc-row-s {
  font-family: var(--font);
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sfc-row-ar {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-3);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}
.sfc-row:hover .sfc-row-ar { transform: translateX(3px); color: var(--blue); }

/* ─── Desktop: Label sichtbar ───────────────────────────────────── */
@media (min-width: 768px) {
  .sfc-fab-label { display: block; }
}

/* ─── Zusammenspiel mit anderen Floating-Elementen ──────────────── */
/* Back-to-Top-Button über den FAB heben (FAB 58 + 20 base + 14 Lücke).
   Diese CSS wird nur auf Widget-Seiten geladen (head.njk gated per
   not hideChrome); auf hideChrome-Funnels bleibt der Back-to-Top bei 20px.
   `body`-Präfix hebt die Spezifität über spätes extraCss. */
body .scroll-top { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
/* Beim Öffnen des Panels den Back-to-Top ausblenden (keine Überlappung).
   Höhere Spezifität als .scroll-top.show, daher kein !important nötig. */
body.sfc-open .scroll-top.show {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Consent-Modal (bottom center) hat Vorrang: Widget währenddessen weg,
   damit auf Mobile die untere Ecke frei bleibt. */
html.show--consent .sfc,
html.show--preferences .sfc { display: none; }
/* Mobile-Menü-Overlay hat Vorrang: FAB ausblenden, solange das Hamburger-
   Menü offen ist (.mob-nav bekommt beim Öffnen .open). Reiner Geschwister-
   Selektor, weil #mob-nav und #sfc beide direkte Body-Kinder sind und
   mob-nav im DOM vor sfc steht (verifiziert). */
.mob-nav.open ~ .sfc { display: none; }

/* ─── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sfc { animation: none; }
  .sfc-panel { animation: none; }
  .sfc-fab-ico { animation: none; }
}