/* ==========================================================================
   Kontaktseite: «Kontakt speichern» (vCard) und QR-Code
   Nur auf /kontakt/ eingebunden, baut auf den Variablen aus styles.css auf.
   Der QR-Code erscheint erst ab Desktop-Breite: Auf dem Handy kann man den
   eigenen Bildschirm nicht scannen, dort genügt die Schaltfläche.
   ========================================================================== */

.vcard-save {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--sky-200);
}

.vcard-save__btn { --btn-bg: #fff; width: 100%; }
.vcard-save__btn .icon { color: var(--blue); }
.vcard-save__btn:hover .icon { transform: none; }

.vcard-save__hint,
.vcard-save__qr { display: none; }

@media (min-width: 961px) {
  .vcard-save {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 18px 22px;
  }
  .vcard-save__body { flex: 1 1 200px; min-width: 0; }
  .vcard-save__btn { width: auto; }

  .vcard-save .vcard-save__hint {
    display: block;
    margin: 14px 0 0;
    font-size: .9rem; line-height: 1.55;
    color: var(--muted);
  }
  .vcard-save__print {
    display: inline-block; margin-top: 6px;
    font-weight: 600; font-size: .88rem;
  }

  /* 77 Module (inkl. Ruhezone) x 2 px: jedes Modul liegt auf ganzen Pixeln, scharf und gut scanbar */
  .vcard-save__qr {
    display: block; flex: none;
    width: 154px; height: 154px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
  }
}