/* Linkgestaltung im öffentlichen Portal: Textlinie und aktive Kontakt-Icons. */
body.path-not-admin {
  --gin-link-decoration-style: solid;
  --be-link-hover-color: #003e4c;
  --be-link-line-color: #78a9b2;
  --be-contact-surface: #e5f3f3;
  --be-contact-active: var(--be-link-color, #005967);
  --be-contact-on-active: #fff;
}

/* Die dunkle Fußzeile benötigt ihre eigene, kontrastreiche Farbpaarung. */
body.path-not-admin .footer-row {
  --be-link-color: #fff;
  --be-link-hover-color: #fff;
  --be-link-line-color: rgb(255 255 255 / 60%);
  --be-contact-surface: rgb(255 255 255 / 15%);
  --be-contact-active: #fff;
  --be-contact-on-active: #005967;
}

/* Nur vom Drupal-Behavior erkannte Inhaltslinks; keine Menüs oder Buttons.
   Die langen Dekorationseigenschaften ersetzen auch Gins dotted-Vorgabe. */
body.path-not-admin a.be-text-link {
  color: var(--be-link-color, #005967);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--be-link-line-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
  overflow-wrap: anywhere;
  transition: color 180ms ease, text-decoration-color 180ms ease,
    text-decoration-thickness 180ms ease;
}

body.path-not-admin a.be-text-link:is(:hover, :focus-visible) {
  color: var(--be-link-hover-color);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* Das kleine Pfeilsignal ergänzt einzelne interne Weiterführungslinks.
   Der umgebende Inline-Block hält Pfeil und letztes Wort zusammen. */
body.path-not-admin .be-standalone-link__tail {
  white-space: nowrap;
}

body.path-not-admin .be-standalone-link__arrow {
  display: inline-block;
  margin-inline-start: 0.35em;
  text-decoration: none;
  transition: transform 180ms ease;
}

body.path-not-admin a.be-standalone-link:is(:hover, :focus-visible) .be-standalone-link__arrow {
  transform: translateX(3px);
}

/* Der Label-Span erlaubt auch langen E-Mail-Adressen einen sauberen Umbruch. */
body.path-not-admin a.be-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2rem;
  padding-block: 0.125rem;
  vertical-align: middle;
  color: var(--be-link-color, #005967);
  text-decoration: none;
  transition: color 180ms ease;
}

body.path-not-admin a.be-contact-link:is(:hover, :focus-visible) {
  color: var(--be-link-hover-color);
  text-decoration: none;
}

body.path-not-admin .be-contact-link__label {
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 180ms ease;
}

body.path-not-admin a.be-contact-link:is(:hover, :focus-visible) .be-contact-link__label {
  text-decoration-color: currentColor;
}

body.path-not-admin .be-contact-link__icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--be-contact-surface);
  color: var(--be-link-color, #005967);
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

body.path-not-admin .be-contact-link__icon::before {
  display: block;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  content: "";
  -webkit-mask: var(--be-contact-icon) center / contain no-repeat;
  mask: var(--be-contact-icon) center / contain no-repeat;
}

body.path-not-admin .be-contact-link--mail {
  --be-contact-icon: url("../images/link-mail.svg");
}

body.path-not-admin .be-contact-link--phone {
  --be-contact-icon: url("../images/link-phone.svg");
}

body.path-not-admin a.be-contact-link:is(:hover, :focus-visible) .be-contact-link__icon {
  background: var(--be-contact-active);
  color: var(--be-contact-on-active);
  transform: rotate(-7deg);
}

/* Die bestehende Fußzeile färbt sämtliche Nachfahren mit !important weiß
   und gibt ihnen einen Petrol-Hintergrund. Nur die neuen Icon-Kreise lösen
   sich davon, damit im Hover Petrol auf Weiß sichtbar bleibt. */
body.path-not-admin #block-gin-fusszeile-2 a.be-contact-link .be-contact-link__icon {
  background: var(--be-contact-surface);
  color: var(--be-link-color) !important;
}

body.path-not-admin #block-gin-fusszeile-2 a.be-contact-link:is(:hover, :focus-visible) .be-contact-link__icon {
  background: var(--be-contact-active);
  color: var(--be-contact-on-active) !important;
}

/* Extlink kann seine Icons vor oder nach unserem Behavior ergänzen.
   Die Aktion bleibt am href erkennbar; nur das doppelte Icon entfällt. */
body.path-not-admin a.be-contact-link :is(svg.mailto, svg.tel, span.mailto, span.tel,
  i.fa-envelope, i.fa-envelope-o, i.fa-phone, i.fa-phone-alt) {
  display: none;
}

body.path-not-admin a.be-contact-link .extlink-nobreak {
  white-space: normal;
}

@media (pointer: coarse) {
  body.path-not-admin a.be-contact-link {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.path-not-admin a.be-text-link,
  body.path-not-admin a.be-contact-link,
  body.path-not-admin .be-contact-link__icon,
  body.path-not-admin .be-contact-link__label,
  body.path-not-admin .be-standalone-link__arrow {
    transition: none;
  }

  body.path-not-admin a.be-contact-link:is(:hover, :focus-visible) .be-contact-link__icon,
  body.path-not-admin a.be-standalone-link:is(:hover, :focus-visible) .be-standalone-link__arrow {
    transform: none;
  }
}