/* ============================================================
   Links — Basis + Modifier-Klassen.

   Pattern analog .btn: <a class="link download"> / <a class="link external">.

   Modifier:
     .link            — Text-Link-Style (primary color + underline)
     .link.download   — Box mit Download-Icon (für File-Downloads im Fließtext oder CMS)
     .link.external   — Inline mit ↗-Suffix-Icon (kennzeichnet externe Ziele)

   button.link bleibt in 05-buttons.css — entfernt zusätzlich das Button-Chrome,
   damit ein <button> wie ein Link aussieht.
   ============================================================ */

:root {
  /* Download-Modifier */
  --link-download-bg:           var(--color-bg-alt);
  --link-download-bg-hover:     var(--color-bg);
  --link-download-border:       var(--color-border);
  --link-download-border-hover: var(--color-primary);
  --link-download-color:        var(--color-text);
  --link-download-icon-color:   var(--color-primary);
  --link-download-icon-size:    1rem;
  --link-download-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' x2='12' y1='15' y2='3'/></svg>");

  /* External-Modifier */
  --link-external-icon-color: var(--color-text-muted);
  --link-external-icon-size:  0.75rem;
  --link-external-icon-gap:   var(--space-1);
  --link-external-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6'/><path d='M10 14 21 3'/><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/></svg>");
}

/* --- Base --- */

.link {
  color: var(--color-primary);
  text-decoration: underline;
  transition: color var(--transition);
}

.link:hover {
  color: var(--color-primary-hover);
}

/* Text-Links mit Inline-Icon (z.B. Auth-Hinweise: 'Anmelden' / 'Registrieren'
   im Login-/Reset-Footer von Favorites/Register/ServiceNav). SVG sitzt sonst
   auf der Text-Baseline und wirkt visuell zu hoch. inline-flex + gap zentriert
   Icon und Text sauber. Greift nur fuer Links innerhalb von <p>, damit
   Property-Card-Header u.a. unberuehrt bleiben. */
p > a:has(> svg:first-child) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* --- Modifier: Download --- */

.link.download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--link-download-bg);
  border: 0.0625rem solid var(--link-download-border);
  border-radius: var(--radius);
  color: var(--link-download-color);
  text-decoration: none;
  font-size: var(--text-sm);
}

.link.download::before {
  content: '';
  width: var(--link-download-icon-size);
  height: var(--link-download-icon-size);
  flex-shrink: 0;
  background-color: var(--link-download-icon-color);
  mask-image: var(--link-download-icon);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--link-download-icon);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.link.download:hover {
  background: var(--link-download-bg-hover);
  border-color: var(--link-download-border-hover);
  color: var(--link-download-color);
}

/* --- Modifier: External --- */

.link.external::after {
  content: '';
  display: inline-block;
  width: var(--link-external-icon-size);
  height: var(--link-external-icon-size);
  margin-inline-start: var(--link-external-icon-gap);
  vertical-align: baseline;
  background-color: var(--link-external-icon-color);
  mask-image: var(--link-external-icon);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--link-external-icon);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}