/*
 * Meta navigation links — internal (dk-link-meta) and external
 * (dk-link-meta-extern, extern icon + "opens in new tab"). Used in the
 * footer's Rechtliches/Social rows (SD-120 revision: underline and 44px
 * touch target were missing — the `-line` span existed in markup but had
 * no styling, and the anchors stayed `display: inline` so `min-height`
 * from footer.css had no effect).
 *
 * Structure:
 *   .dk-link.dk-link-meta
 *     .dk-link-meta-label
 *       .dk-link-meta-text
 *       .dk-link-meta-line (underline bar, 1px default / 2px hover-active)
 *   .dk-link.dk-link-meta-extern
 *     .dk-link-meta-extern-icon (svg arrow)
 *     .dk-link-meta-extern-label
 *       .dk-link-meta-extern-text
 *       .dk-link-meta-extern-line
 */

.dk-link-meta,
.dk-link-meta-extern {
  display: inline-flex;
  align-items: center;
  gap: var(--dk-space-01);    /* 8px between icon and label (extern only) */
  min-block-size: 2.75rem;    /* 44px touch target */
  color: inherit;
  text-decoration: none;
}

.dk-link-meta:focus-visible,
.dk-link-meta-extern:focus-visible {
  outline: none;
  border-radius: 2px;
  box-shadow:
    0 0 0 2px var(--dk-color-black),
    0 0 0 4px var(--dk-color-white),
    0 0 0 8px var(--dk-color-focus);
}

.dk-link-meta-extern-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.dk-link-meta-extern-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dk-link-meta-label,
.dk-link-meta-extern-label {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-00);    /* 4px between text and underline */
}

/* Underline bar — always visible (1px), thickens to a solid 2px on
   hover/active. 2px height reserved throughout to prevent layout shift. */
.dk-link-meta-line,
.dk-link-meta-extern-line {
  display: block;
  inline-size: 100%;
  block-size: 2px;
  background: linear-gradient(to bottom, currentColor 1px, transparent 1px);
}

.dk-link-meta:hover .dk-link-meta-line,
.dk-link-meta:active .dk-link-meta-line,
.dk-link-meta-extern:hover .dk-link-meta-extern-line,
.dk-link-meta-extern:active .dk-link-meta-extern-line {
  background: currentColor;
}
