/* ============================================================
   plate_experts — Kontaktzeile „Infos und Anfragen an: <Name>"
   Partial: Resources/Private/Partials/Expert/ContactLine.html

   Bewusst KEIN Sektions-Styling: kein Hintergrund, kein Sektions-Padding,
   keine Breitenbegrenzung — die Zeile lebt im Fluss des aufrufenden Blocks
   (Frame-System, Workspace-CLAUDE.md). Farben ausschliesslich ueber
   Bootstrap-Variablen bzw. `currentColor`, damit invertierte Frames
   (`-colorized`) automatisch mitdrehen.
   ============================================================ */
.plx-contactline {
  --plx-cl-color: var(--bs-secondary-color, var(--bs-body-color, currentColor));
  --plx-cl-accent: var(--bs-link-color, currentColor);

  /* Bewusst INLINE-Fluss (kein Flex-Container): Icon, Label und Name sollen wie
     ein Satz umbrechen. Als Flex-Zeile landet das Icon bei schmalen Karten in
     einer eigenen Zeile. */
  display: block;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--plx-cl-color);
  text-wrap: pretty;
}

.plx-contactline__icon {
  display: inline-flex;
  vertical-align: -0.18em;
  margin-right: 0.4em;
}

/* Atoms/Icon rendert eine Maske (<div class="mask-svg">) ohne eigene Farbe —
   erst diese Regel macht das Icon sichtbar. */
.plx-contactline__icon .mask-svg {
  background-color: currentColor;
}

.plx-contactline__icon figure {
  margin: 0;
}

.plx-contactline__label + .plx-contactline__name,
.plx-contactline__label + a.plx-contactline__name {
  margin-left: 0.35em;
}

.plx-contactline__name {
  font-weight: 600;
  color: var(--plx-cl-accent);
  text-decoration: none;
  text-underline-offset: 0.18em;
}

a.plx-contactline__name:hover,
a.plx-contactline__name:focus-visible {
  text-decoration: underline;
}

/* Invertierte Frames: Text und Link erben die Frame-Farbe. */
.frame.-colorized .plx-contactline {
  --plx-cl-color: currentColor;
  --plx-cl-accent: currentColor;
}