/* Mit dem Handy anmelden (web/js/koppeln.js): am Fernseher QR-Code, großer Code und kurze Adresse – lesbar vom Sofa aus; am Handy
   die Bestätigung mit Warnung. QR-Code: dunkle Module auf hellem Pergament, ringsum vier helle Module Ruhezone (im Bild selbst),
   außen die Messingfassung – kein Muster und keine Farbe im Code, damit jede Handykamera ihn liest. */

/* Fernseher: breiter als die übrigen Fenster, QR-Code links, Text rechts (schmal: untereinander) */
body.kp-tv-seite main { max-width: min(1180px, 96vw); }
.kp-tv-inhalt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 32px; align-items: center; margin: 4px 0 6px; }
.kp-qr-rahmen { line-height: 0; justify-self: center; background: #FBF2DE; border: 14px solid; border-image: url("/img/ui/field.png") 4 stretch;
  box-shadow: 4px 4px 0 rgba(30, 21, 16, .35); }
.kp-qr-rahmen[hidden] { display: none; }
canvas.kp-qr { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.kp-tv-text { display: grid; gap: 2px; min-width: 0; }
.kp-tv-text > p { margin: 2px 0; }
.kp-adresse { font: 700 clamp(22px, 2.4vw, 34px)/1.2 var(--font); color: var(--wine); overflow-wrap: anywhere; }
.kp-code { font: 700 clamp(40px, 5.2vw, 76px)/1.1 var(--font); letter-spacing: .08em; color: var(--ink); margin: 6px 0 10px !important;
  text-shadow: 3px 3px 0 rgba(181, 133, 44, .45); white-space: nowrap; }
.kp-uhr { margin: 6px 0 0 !important; }
.kp-status { font-weight: 700; min-height: 30px; }
.kp-knoepfe { justify-content: flex-start; gap: 10px; margin-top: 6px; }
.kp-tv .btn:focus-visible, .kp-handy .btn:focus-visible, .kp-start:focus-visible { outline: 4px dashed var(--wine); outline-offset: 3px; }
@media (min-width: 1200px) { body.kp-tv-seite { font-size: 24px; line-height: 34px; } .kp-tv-text .note { font-size: 22px; } }
@media (max-width: 760px) {
  .kp-tv-inhalt { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .kp-knoepfe { justify-content: center; }
}

/* Startseite: zweiter Weg zur Anmeldung, gleich neben (schmal: unter) „Mit Discord anmelden“ */
.btn.kp-start { text-decoration: none; }

/* Handy: Bestätigen, Code eintippen, Karte „Gerät verbinden“ in den Einstellungen */
.kp-frage { font-weight: 700; font-size: 22px; line-height: 30px; margin: 2px 0 8px; }
.kp-geraet { font-size: 22px; margin: 4px 0; }
.kp-codezeile { font: 700 30px/36px var(--font); letter-spacing: .08em; margin: 6px 0; }
.kp-warnung { margin: 10px 0; padding: 6px 10px; font-weight: 700; color: var(--wine); border-style: solid; border-width: 6px 6px 8px;
  border-image: url("/img/ui/chip-paper.png") 3 3 4 fill / 6px 6px 8px stretch; }
.kp-handy .kp-knoepfe { justify-content: flex-start; }
.kp-form { display: grid; gap: 8px; margin: 6px 0; }
.kp-feld { display: grid; gap: 2px; }
.kp-feld > span { font-weight: 700; }
input.kp-eingabe { font: 700 28px/36px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: none;
  border-style: solid; border-width: 8px; border-image: url("/img/ui/field.png") 4 fill / 8px stretch; padding: 2px 8px; width: 100%;
  max-width: 300px; min-height: 52px; image-rendering: pixelated; }
input.kp-eingabe::placeholder { color: var(--soft); opacity: .6; }
.kp-form > .btn { justify-self: start; }
.kp-hinweis:empty { display: none; }
.geraete-alle { justify-content: flex-start; }