/* ==========================================================================
   layout.css — Header, Navigation, Footer, fixierte Kontaktelemente
   --------------------------------------------------------------------------
   WOFÜR: Die Bausteine, die auf jeder Seite identisch sind und sich am
          Viewport festmachen.
   ABHÄNGIG VON: tokens.css, style.css
   ZUSAMMENSPIEL MIT JS: assets/js/nav.js setzt/entfernt
          .site-header--hidden, .site-header--scrolled und
          .nav-toggle[aria-expanded]. Ohne JavaScript bleibt die Navigation
          als normale Liste sichtbar und bedienbar — deshalb versteckt erst
          die Klasse .js auf <html> die Mobilnavigation.
   BEIM ÄNDERN BEACHTEN: Die Höhe des Headers steckt in --header-h und wird
          vom Scroll-Offset mitbenutzt.
   ========================================================================== */

:root {
  --header-h: 4.75rem;         /* Desktop */
}

/* ==========================================================================
   1. Header
   Weißes Band mit feiner Trennlinie. Beim Runterscrollen wandert er aus dem
   Bild, beim Hochscrollen kommt er zurück (nav.js). Das Logo läuft in der
   Vollfarbversion, deshalb muss der Grund hell bleiben.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.site-header--hidden { transform: translateY(-100%); }
.site-header--scrolled { box-shadow: var(--shadow-md); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* Logo in der Vollfarbversion, unverändert. Sie steht auf Weiß richtig:
   der Schlüssel grün, der Schriftzug im dunklen Braun. */
.site-header__logo {
  flex: none;
  display: block;
  line-height: 0;
  margin-right: auto;
  transition: opacity var(--dur-fast) var(--ease);
}

@media (hover: hover) {
  .site-header__logo:hover { opacity: 0.78; }
}

.site-header__logo img {
  width: clamp(180px, 20vw, 232px);
  height: auto;
}

/* Feine grüne Kante als Abschluss. Kein Muster, nur eine Linie. */
.site-header__edge {
  height: 3px;
  background: var(--green);
}

/* ==========================================================================
   2. Hauptnavigation (Desktop)
   ========================================================================== */
.nav { display: flex; align-items: center; gap: var(--sp-2); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  min-height: 44px;                 /* Trefferfläche */
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.nav__link:focus-visible { color: var(--green-text); background: var(--green-tint); }
@media (hover: hover) {
  .nav__link:hover { color: var(--green-text); background: var(--green-tint); }
}

/* Der Unterstrich wächst aus der Mitte, statt hart zu erscheinen */
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 6px;
  height: 2px;
  background: var(--green);
  border-radius: var(--radius-pill);
  transition: left var(--dur) var(--ease), right var(--dur) var(--ease);
}

.nav__link[aria-current="page"]::after {
  left: var(--sp-4);
  right: var(--sp-4);
}
@media (hover: hover) {
  .nav__link:hover::after {
    left: var(--sp-4);
    right: var(--sp-4);
  }
}

/* Aktive Seite: grün hinterlegte Pille plus aria-current im HTML */
.nav__link[aria-current="page"],
.nav__link[aria-current="true"] {
  color: var(--green-text);
  background: var(--green-soft);
}

/* --- Untermenü Leistungen ------------------------------------------------
   Öffnet per :hover UND :focus-within, funktioniert also mit Maus,
   Tastatur und ohne JavaScript. nav.js ergänzt nur aria-expanded und das
   Schließen mit Escape. */
.nav__item--has-menu {
  position: relative;
  display: flex;
  align-items: center;
}

/* Der Pfeil ist ein eigener Knopf neben dem Link — verschachtelte
   interaktive Elemente wären ungültiges HTML und für Screenreader kaputt.
   Der Link führt zur Übersichtsseite, der Knopf klappt das Menü auf. */
.nav__caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-height: 44px;
  margin-left: -0.5rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              transform var(--dur-slow) var(--ease-spring);
}

@media (hover: hover) {
  .nav__caret-btn:hover { color: var(--green-text); }
}
.nav__caret-btn[aria-expanded="true"] { transform: rotate(180deg); }

.nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 19rem;
  padding: var(--sp-3);
  margin: 0;
  list-style: none;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur) var(--ease-spring),
              visibility var(--dur-fast);
}

.nav__item--has-menu:focus-within .nav__submenu,
.nav__submenu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (hover: hover) {
  .nav__item--has-menu:hover .nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.nav__submenu a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
}

.nav__submenu a span {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.nav__submenu a:focus-visible { background: var(--green-soft); }
@media (hover: hover) {
  .nav__submenu a:hover { background: var(--green-soft); }
}

.nav__caret { width: 10px; height: 10px; fill: currentColor; flex: none; }

/* --- Kontaktblock rechts im Header --------------------------------------- */
.nav__contact {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: var(--sp-4);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--line);
}

.nav__phone {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-small);
  white-space: nowrap;
}

.nav__phone small {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: var(--width-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (hover: hover) {
  .nav__phone:hover { color: var(--green-text); }
}

.nav__phone-number { display: inline-flex; align-items: center; gap: 6px; }
.nav__phone-number svg { width: 14px; height: 14px; fill: var(--green-text); flex: none; }

/* Die zwei Wege nebeneinander. Der Kontakt-Link ist für das Mobilmenü
   gedacht — auf dem Desktop steht „Kontakt“ schon in der Linkleiste. */
.nav__contact-actions { display: flex; align-items: center; gap: var(--sp-3); }
/* Zwei Klassen, damit die Regel gegen .btn { display: inline-flex } aus
   components.css (später in der Kaskade) gewinnt. */
.nav__contact .nav__contact-link { display: none; }

/* ==========================================================================
   3. Mobilnavigation
   Ohne JavaScript ist .nav sichtbar und der Umschalter versteckt.
   Sobald <html class="js"> gesetzt ist, dreht sich das um.
   ========================================================================== */
.nav-toggle { display: none; }

/* Die beiden Symbole im Menü-Knopf: das Balkenmenü dreht sich beim Öffnen
   aus dem Bild, das Schließkreuz hinein — dieselbe Bewegung wie beim Knopf
   der Kontakt-Schnellwahl. */
.nav-toggle__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
}

.nav-toggle__icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur-slow) var(--ease-spring);
}

.nav-toggle__close { opacity: 0; transform: rotate(-90deg) scale(0.5); }

.nav-toggle[aria-expanded="true"] .nav-toggle__burger { opacity: 0; transform: rotate(90deg) scale(0.5); }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { opacity: 1; transform: none; }

@media (max-width: 1020px) {
  .nav__contact { display: none; }
}

@media (max-width: 900px) {
  /* Ohne JS: Navigation läuft als Block unter das Logo, alles erreichbar. */
  .site-header__inner { flex-wrap: wrap; padding-block: var(--sp-3); }
  .nav { width: 100%; }
  .nav__list { flex-direction: column; align-items: stretch; width: 100%; }
  .nav__submenu {
    position: static;
    flex-basis: 100%;
    opacity: 1;
    /* inherit, NICHT visible: ein explizites visible hebt das
       visibility: hidden des geschlossenen Vollbildmenüs für die
       Untermenü-Links auf. Die lagen dann unsichtbar über der Seite
       und fingen Tipps ab (Impressum → Winterdienst). */
    visibility: inherit;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--green);
    margin-left: var(--sp-4);
  }
  .nav__submenu a { color: var(--ink); }
  .nav__submenu a span { color: var(--text-muted); }
  @media (hover: hover) {
    .nav__submenu a:hover { background: var(--green-soft); }
  }

  /* Auf schmalen Viewports steht das Untermenü offen — bei vier
     Leistungen spart das jedem Besucher einen Tap. Der Aufklapp-Knopf
     wäre dann ohne Funktion und verschwindet. */
  .nav__caret-btn { display: none; }

  /* Das Overlay ist ein Kind des Headers. Damit Logo und Schließen-Knopf
     sichtbar bleiben, bekommen sie im Stapel des Headers einen Platz über
     dem Overlay — ein niedrigerer z-index am Overlay allein genügt hier
     nicht, weil es innerhalb desselben Stacking-Kontexts liegt. */
  .js .site-header__logo,
  .js .nav-toggle { position: relative; z-index: 30; }

  /* Mit JS: Vollbild-Overlay mit großen Schaltflächen */
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 48px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-family: var(--font-label);
    font-size: var(--fs-label);
    font-weight: 600;
    font-stretch: var(--width-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    cursor: pointer;
  }

  @media (hover: hover) {
    .js .nav-toggle:hover { border-color: var(--green); }
  }

  .js .site-header__inner { flex-wrap: nowrap; }

  .js .nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) var(--sp-8);
    background: var(--surface);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;   /* zweite Sicherung gegen unsichtbare Trefferflächen */
    /* Dieselbe Bewegung wie die Kontakt-Schnellwahl: kleiner Hub von
       unten mit Überschwung statt eines Falls von oben. */
    transform: translateY(0.75rem) scale(0.98);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur-slow) var(--ease-spring),
                visibility var(--dur);
  }

  .js .nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  /* Große Schaltflächen statt zusammengeschobener Liste */
  .js .nav__link {
    justify-content: space-between;
    padding: var(--sp-5) 0;
    font-size: 1.35rem;
    font-stretch: 106%;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav__item--has-menu { flex-wrap: wrap; }
  .nav__item--has-menu .nav__link { flex: 1; }
  .js .nav__submenu { flex-basis: 100%; margin: 0 0 var(--sp-4) var(--sp-4); }
  .js .nav__submenu a { padding: var(--sp-4) var(--sp-3); font-size: 1rem; }

  .js .nav__contact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
    margin: var(--sp-7) 0 0;
    padding: 0;
    border: 0;
  }

  /* Kontaktkarte ganz oben im Menü: die Nummer groß zum Antippen,
     darunter die zwei Wege — Angebot und Kontakt. order: -1 hebt den
     Block über die Linkliste, ohne das HTML zu ändern; im Desktop-Header
     steht derselbe Block weiter rechts. */
  .js .nav__contact {
    order: -1;
    margin: 0 0 var(--sp-6);
    padding: var(--sp-5);
    background: var(--green-soft);
    border: 1px solid var(--line-green);
    border-radius: var(--radius);
  }

  .js .nav__phone { gap: var(--sp-1); }

  .js .nav__phone-number {
    gap: var(--sp-2);
    font-family: var(--font-brand);
    font-size: 1.75rem;
    letter-spacing: -0.01em;
  }

  .js .nav__phone-number svg { width: 22px; height: 22px; }

  /* Untereinander: nebeneinander bräche „Angebot anfordern“ auf 390 px
     in zwei Zeilen. */
  .js .nav__contact-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .js .nav__contact .nav__contact-link { display: inline-flex; }

  /* Wenn das Overlay offen ist, wird der Hintergrund nicht mitgescrollt */
  .js body.is-locked { overflow: hidden; }
}

/* ==========================================================================
   4. Footer
   ========================================================================== */
.site-footer {
  background: var(--green-soft);
  color: var(--ink-80);
  border-top: 1px solid var(--line-green);
  padding-block: var(--section-tight) var(--sp-6);
}

/* Der Footer braucht keine eigene Kante mehr; die Trennung übernimmt die
   getönte Fläche selbst. Die Klasse bleibt leer erhalten, damit das Markup
   in allen Dateien unverändert gültig ist. */
.site-footer__edge { height: 0; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: var(--sp-7) var(--sp-6);
}

@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer__logo img { width: 200px; margin-bottom: var(--sp-4); }

.site-footer h2,
.site-footer h3 {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: var(--width-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}

.site-footer ul { list-style: none; }
.site-footer li + li { margin-top: var(--sp-3); }

.site-footer a {
  color: var(--ink-80);
  text-decoration: none;
  font-size: var(--fs-small);
}

.site-footer a {
  display: inline-block;
  transition: color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

@media (hover: hover) {
  .site-footer a:hover {
    color: var(--green-text);
    text-decoration: underline;
    transform: translateX(3px);
  }
}

.site-footer address {
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.7;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-green);
  font-size: 0.85rem;
}

.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.site-footer__bottom li + li { margin-top: 0; }

/* ==========================================================================
   5. Kontakt-Schnellwahl — der schwebende Knopf unten rechts
   Ein Knopf, der nach 300 px Scrolltiefe erscheint (contact-fab.js) und
   beim Antippen alle Kontaktwege aufklappt: Angebot, E-Mail, WhatsApp,
   Anruf. Er ersetzt den früheren WhatsApp-Knopf und die mobile
   Anruf-Leiste in einem Element.

   ZUSTÄNDE, beide als Attribute am Container und beide von contact-fab.js
   gesetzt: data-visible (Scrolltiefe erreicht) und data-open (aufgeklappt).
   Ohne JavaScript bleiben sie unbesetzt und nichts wird sichtbar — alle
   Kontaktwege stehen zusätzlich im Header und im Footer.

   BEIM ÄNDERN BEACHTEN: Die Staffelverzögerung der Einträge läuft über
   --fab-delay und ist beim Öffnen von unten nach oben, beim Schließen
   umgekehrt — die Liste faltet sich vom Knopf weg auf und zu ihm hin
   wieder zusammen.
   ========================================================================== */
.contact-fab {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.92);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur-slow) var(--ease-spring),
              visibility var(--dur);
}

.contact-fab[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (max-width: 720px) {
  .contact-fab { right: var(--sp-4); bottom: var(--sp-4); }
}

/* --- Der Hauptknopf ------------------------------------------------------ */
.contact-fab__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur) var(--ease-spring),
              box-shadow var(--dur) var(--ease);
}

.contact-fab__toggle:focus-visible {
  background: var(--green-dark);
  box-shadow: var(--shadow-hover);
}
@media (hover: hover) {
  .contact-fab__toggle:hover {
    background: var(--green-dark);
    box-shadow: var(--shadow-hover);
  }
}

@media (hover: hover) {
  .contact-fab[data-visible="true"] .contact-fab__toggle:hover { transform: translateY(-2px); }
}
.contact-fab[data-open="true"] .contact-fab__toggle { background: var(--green-dark); }

/* Zwei übereinanderliegende Symbole: die Sprechblase dreht sich beim
   Öffnen aus dem Bild, das Schließkreuz hinein. */
.contact-fab__icon {
  position: absolute;
  width: 26px;
  height: 26px;
  fill: var(--ink);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur-slow) var(--ease-spring);
}

.contact-fab__icon--close { opacity: 0; transform: rotate(-90deg) scale(0.5); }

.contact-fab[data-open="true"] .contact-fab__icon--chat { opacity: 0; transform: rotate(90deg) scale(0.5); }
.contact-fab[data-open="true"] .contact-fab__icon--close { opacity: 1; transform: none; }

/* --- Die aufklappenden Kontaktwege --------------------------------------- */
.contact-fab__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--sp-4));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Geschlossen sind nur die Einträge verborgen, der Kasten der Liste
   liegt weiter über der Seite und würde dort jeden Tipp schlucken. */
.contact-fab__menu { pointer-events: none; }
.contact-fab[data-open="true"] .contact-fab__menu { pointer-events: auto; }

.contact-fab__menu li {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.85);
  transform-origin: right center;
  transition: opacity var(--dur) var(--ease) var(--fab-delay, 0ms),
              transform var(--dur-slow) var(--ease-spring) var(--fab-delay, 0ms),
              visibility 0s linear calc(var(--fab-delay, 0ms) + var(--dur));
}

.contact-fab[data-open="true"] .contact-fab__menu li {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease) var(--fab-delay, 0ms),
              transform var(--dur-slow) var(--ease-spring) var(--fab-delay, 0ms),
              visibility 0s;
}

/* Staffelung: öffnet von unten nach oben … */
.contact-fab[data-open="true"] .contact-fab__menu li:nth-child(4) { --fab-delay: 0ms; }
.contact-fab[data-open="true"] .contact-fab__menu li:nth-child(3) { --fab-delay: 50ms; }
.contact-fab[data-open="true"] .contact-fab__menu li:nth-child(2) { --fab-delay: 100ms; }
.contact-fab[data-open="true"] .contact-fab__menu li:nth-child(1) { --fab-delay: 150ms; }

/* … und schließt von oben nach unten */
.contact-fab__menu li:nth-child(1) { --fab-delay: 0ms; }
.contact-fab__menu li:nth-child(2) { --fab-delay: 50ms; }
.contact-fab__menu li:nth-child(3) { --fab-delay: 100ms; }
.contact-fab__menu li:nth-child(4) { --fab-delay: 150ms; }

.contact-fab__menu a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}

.contact-fab__text {
  padding: 0.45rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.contact-fab__bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.contact-fab__bubble svg { width: 20px; height: 20px; fill: var(--green-text); }

.contact-fab__menu a:focus-visible .contact-fab__text {
  color: var(--green-text);
  border-color: var(--line-green);
}
@media (hover: hover) {
  .contact-fab__menu a:hover .contact-fab__text {
    color: var(--green-text);
    border-color: var(--line-green);
  }
}

.contact-fab__menu a:focus-visible .contact-fab__bubble {
  background: var(--green-tint);
  border-color: var(--line-green);
}
@media (hover: hover) {
  .contact-fab__menu a:hover .contact-fab__bubble {
    background: var(--green-tint);
    border-color: var(--line-green);
  }
}

/* Der oberste Eintrag ist die Hauptaktion und trägt deshalb Grün */
.contact-fab__menu li:first-child .contact-fab__bubble {
  background: var(--green);
  border-color: transparent;
}

.contact-fab__menu li:first-child .contact-fab__bubble svg { fill: var(--ink); }

.contact-fab__menu li:first-child a:focus-visible .contact-fab__bubble { background: var(--green-dark); }
@media (hover: hover) {
  .contact-fab__menu li:first-child a:hover .contact-fab__bubble { background: var(--green-dark); }
}