/* ============================================================================
   Fester Kontakt-Button unten rechts
   ----------------------------------------------------------------------------
   Passend zum Blau/Gold-Design der Seite.
   Markup wird von assets/js/kontakt.js erzeugt.
   ============================================================================ */

.kb-wrap {
  --kb-offset: 0px;
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + var(--kb-offset));
  z-index: 9500;
  transition: bottom 220ms ease;
}

.kb-fab {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 56px;
  padding: 0 1.55rem;
  border-radius: 999px;
  background: #1d4e7a;
  color: #ffffff;
  font-family: 'Instrument Sans', -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(16, 43, 69, 0.32);
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.kb-fab svg { width: 22px; height: 22px; flex: 0 0 auto; }
.kb-fab:hover {
  background: #2c6196;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(16, 43, 69, 0.38);
}
.kb-fab:active { transform: translateY(0); }
.kb-fab:focus-visible { outline: 3px solid #2f6fb0; outline-offset: 3px; }

/* Am Handy nur das Symbol, damit der Button nichts verdeckt */
@media (max-width: 560px) {
  .kb-fab { width: 56px; padding: 0; justify-content: center; }
  .kb-fab__text { display: none; }
}

/* Ankersprung nicht unter dem festen Header landen lassen */
[id] { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  .kb-wrap, .kb-fab { transition: none !important; transform: none !important; }
}