:root {
  --mk-sig-text: var(--band-ink-soft, var(--muted, #888));
  --mk-sig-text-hover: var(--band-ink, var(--ink, #fff));
  --mk-sig-rule: var(--band-line, var(--rule, rgba(255, 255, 255, 0.08)));
  --mk-sig-focus: var(--focus, #005fcc);
}

.mk-signature {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 58px;
  height: auto;
  box-sizing: border-box;
  margin-block-start: 0.75rem;
  padding-block: 0.35rem;
  border-block-start: 1px solid var(--mk-sig-rule);
}

.mk-signature a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--mk-sig-text);
  text-decoration: none;
  transition: color 120ms ease-out, opacity 120ms ease-out;
  line-height: 1;
}

.mk-signature a:hover {
  color: var(--mk-sig-text-hover);
}

.mk-signature__logo {
  display: block;
  height: 52px !important; /* 52–56 px auf Desktop */
  width: auto !important;
  max-width: 80px !important;
  object-fit: contain;
  flex: none;
  align-self: center;
}

.mk-signature__icon {
  width: 0.8em;
  height: 0.8em;
  flex: none;
  opacity: 0.75;
  transition: transform 120ms ease-out;
}

.mk-signature a:hover .mk-signature__icon {
  transform: translate(1px, -1px);
  opacity: 1;
}

.mk-signature a:focus-visible {
  outline: 2px solid var(--mk-sig-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 47.99rem) {
  .mk-signature {
    min-height: 50px;
    height: auto;
    margin-block-start: 0.5rem;
    padding-block: 0.25rem;
  }
  .mk-signature a {
    gap: 0.45rem;
    font-size: 0.74rem;
  }
  .mk-signature__logo {
    height: 42px !important; /* 40–44 px auf Mobile */
    max-width: 65px !important;
  }
}

@media (max-width: 22.5rem) {
  .mk-signature {
    min-height: 48px;
    height: auto;
  }
  .mk-signature a {
    gap: 0.4rem;
    font-size: 0.72rem;
  }
  .mk-signature__logo {
    height: 40px !important; /* 40 px auf kleinen Phones */
    max-width: 60px !important;
  }
}