/* ============================================================
 * tc-zweitgeraet — eine Adresse aufs zweite Gerät bringen
 * (25.09.2026, Taskwerk #767; Library: library-spielscreens.html#zweitgeraet)
 *
 * QR-Code links, rechts Titel, ein Satz, die Adresse zum Abtippen und ein
 * Knopf für dieses Gerät. Am Handy wird der QR kleiner — wer am Handy ist,
 * scannt nicht sich selbst, sondern tippt den Knopf.
 *
 * tc-qr: der Code selbst. Dunkel auf Papier in JEDEM Theme (Material-
 * Tokens, von keinem Theme überschrieben): Der Kontrast ist die Funktion.
 * Datei: css/components/zweitgeraet.css · JS: js/ui/zweitgeraet.js
 * ============================================================ */

.tc-zweitgeraet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-4);
  padding: var(--tc-space-3) var(--tc-space-4);
  border: 1px solid rgba(var(--tc-highlight-rgb), 0.35);
  border-left: 4px solid var(--tc-highlight);
  border-radius: var(--tc-radius-md);
  background: rgba(var(--tc-accent-rgb), 0.08);
  color: var(--tc-text-default);
  font-family: var(--tc-font-body);
}

.tc-zweitgeraet__qr {
  flex: 0 0 auto;
  width: 132px;
  line-height: 0;
}
.tc-qr {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tc-radius-sm);
}
.tc-qr__grund   { fill: var(--tc-papier); }
.tc-qr__module  { fill: var(--tc-bg-base); }

.tc-zweitgeraet__text {
  flex: 1 1 9rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tc-space-1);
}
.tc-zweitgeraet__titel {
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-base);
  font-weight: var(--tc-weight-bold);
  color: var(--tc-highlight);
}
.tc-zweitgeraet__satz {
  margin: 0;
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-normal, 1.45);
  color: var(--tc-text-default);
}
.tc-zweitgeraet__hinweis {
  margin-top: var(--tc-space-1);
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}
/* Zum Abtippen: kräftig und etwas gesperrt, damit man es aus der Hand liest. */
.tc-zweitgeraet__adresse {
  max-width: 100%;
  padding: 2px var(--tc-space-2);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-bg-surface-1);
  font-weight: var(--tc-weight-bold);
  font-size: var(--tc-text-sm);
  letter-spacing: 0.02em;
  color: var(--tc-text-strong);
  overflow-wrap: anywhere;
}
.tc-zweitgeraet__knopf { margin-top: var(--tc-space-1); }

/* Der Bereich, den ein Knopf ein- und ausklappt (im laufenden Spiel:
   SpieluhrHinweis.bereich/knopf). Nur der Abstand zum Nachbarn. */
.tc-zweitgeraet-bereich { margin-block: var(--tc-space-3); }

/* Im Fenster steht der Titel schon im Kopf — hier nicht noch einmal. */
.tc-zweitgeraet--im-fenster {
  flex-direction: column;
  text-align: center;
  border: 0;
  background: none;
  padding: 0;
}
.tc-zweitgeraet--im-fenster .tc-zweitgeraet__titel { display: none; }
.tc-zweitgeraet--im-fenster .tc-zweitgeraet__qr { width: 220px; }
.tc-zweitgeraet--im-fenster .tc-zweitgeraet__text { flex: none; align-items: center; }

/* Am Handy kleiner: Wer dort ist, tippt meist den Knopf — gescannt wird
   vom Handy des Gegenübers, und dafür reichen 96 px. */
@media (max-width: 600px) {
  .tc-zweitgeraet { gap: var(--tc-space-3); padding: var(--tc-space-3); }
  .tc-zweitgeraet__qr { width: 96px; }
  .tc-zweitgeraet--im-fenster .tc-zweitgeraet__qr { width: 200px; }
}