/* ==========================================================================
   BookTo — Dialog „Link zu diesem Buch" (js/teilen.js)

   QR-Code links, Adresse und Hinweise rechts; schmal untereinander. Die
   Adresse ist ein nur lesbares Feld: antippen markiert sie ganz, so geht
   Kopieren auch von Hand, wenn der Knopf es nicht darf (Verweilen).
   ========================================================================== */

.modal__box.tl { width: 760px; }

.tl__koerper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.tl__qr {
  width: 200px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: #fff;                 /* QR braucht hellen Grund, in jedem Farbschema */
  box-shadow: 0 0 0 1px var(--color-border);
}
.tl__qr svg { display: block; width: 100%; height: auto; }

.tl__text { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.tl__label { font-weight: 700; }
.tl__adresse {
  width: 100%;
  min-height: var(--target-min);
  font-family: 'DM Mono', 'Consolas', monospace;
  font-size: 1rem;
  direction: ltr;                   /* Adresse bleibt lesbar, auch auf Arabisch/Persisch */
  text-align: left;
}
.tl__hinweis { margin: 0; color: var(--color-text-secondary); line-height: 1.45; }
.tl__status { margin: 0; font-weight: 700; line-height: 1.4; }
.tl__status:empty { display: none; }
.tl__status.is-gut { color: var(--color-success, var(--color-text)); }
.tl__status.is-hinweis { color: var(--color-warning, var(--color-text)); }

@media (max-width: 620px) {
  .tl__koerper { grid-template-columns: minmax(0, 1fr); }
  .tl__qr { width: 160px; justify-self: center; }
}