/* ==========================================================================
   ADOMANN — Kontakt-Abschnitt, Abtastfeld
   Ausgabe 1.0 · 10.08.2026 · ergänzt Corporate Design Manual, Nachtrag 1
   Der Code steht ohne Kartenfläche im Grund; getragen wird er allein
   von zwei Messinglinien. Wird nach adomann-site.css geladen.
   ========================================================================== */

.kontakt-raster { margin-top: 8px; }

/* --- Abtastfeld -------------------------------------------------------- */

.qr-blok { margin: 44px auto 0; text-align: center; }

.qr-feld {
  display: block;
  width: fit-content;
  margin: 0 auto;
  text-decoration: none;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.qr-code {
  display: block;
  width: 188px;
  height: auto;
  margin: 24px auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: opacity .5s ease;
}

.qr-hell { display: none; }

/* --- Messinglinie über und unter dem Code ------------------------------ */

.qr-rule {
  display: block;
  width: 100%;
  max-width: 280px;
  height: 1px;
  margin: 0 auto;
  border: 0;
  background: linear-gradient(to right,
    rgba(199,154,74,0)     0%,
    rgba(199,154,74,.70)  20%,
    rgba(199,154,74,1)    50%,
    rgba(199,154,74,.70)  80%,
    rgba(199,154,74,0)   100%);
}

/* --- Beschriftung ------------------------------------------------------ */

.qr-wort {
  display: block;
  margin-top: 26px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #C79A4A;
  transition: color .35s ease, letter-spacing .35s ease;
}

.qr-text {
  max-width: 300px;
  margin: 14px auto 0 !important;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #8A8A85;
  text-align: center !important;
  hyphens: none;
}

/* --- Zustände ---------------------------------------------------------- */

.qr-feld:hover .qr-wort,
.qr-feld:focus-visible .qr-wort { color: #F2E0B4; letter-spacing: .28em; }

.qr-feld:hover .qr-code { opacity: .82; }

.qr-feld:focus-visible { outline: 1px solid #C79A4A; outline-offset: 14px; }

/* --- Zweispaltig ab 900 px --------------------------------------------- */

@media (min-width: 900px) {

  .kontakt { padding-top: 80px; padding-bottom: 80px; }

  .kontakt-raster {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    column-gap: 72px;
    align-items: start;
    text-align: left;
  }

  .kontakt-text p {
    max-width: 46ch;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px;
    text-align: left !important;
  }

  .qr-blok { margin-top: 0; }

  .qr-code { width: 168px; margin: 20px auto; }

  .qr-rule { max-width: 168px; }

  .qr-text { max-width: 200px; }
}

/* --- Druck: heller Code, Messing dunkler ------------------------------- */

@media print {

  .kontakt-raster { display: block; }

  .qr-dunkel { display: none; }
  .qr-hell   { display: block; width: 150px; margin: 16px 0; }

  .qr-rule {
    max-width: 150px;
    margin: 0;
    background: #7A5526;
  }

  .qr-blok  { margin-top: 24px; text-align: left; }
  .qr-feld  { margin: 0; }
  .qr-wort  { color: #7A5526; }
  .qr-text  { color: #3A3A38; margin-left: 0 !important; text-align: left !important; }
}