/* ═══════════════════════════════════════════════════════════════════════════
   landing-systeme.css — Systemkacheln und Tipp-Eingabe auf der Landing
   (14.09.2026). Eine Quelle fuer landing.html / .en / .es. Die Grundklassen
   .sys-grid / .sys / .nm / .sub / .odds stehen in den Landing-Dateien selbst;
   hier nur, was fuer Auswahl, Zweizeiler und Eingabe dazukommt.
   Kacheln entstehen beim Hochladen (tools/build-landing.js), die Eingabe
   zeichnet src/landing.js aus window.LANDING_DATEN.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Versteckte Systeme: das hidden-Attribut muss gegen display:grid gewinnen */
.sys-grid .sys[hidden]{display:none}

/* Kachel ist ein Knopf: Auswahl, kein Link */
.sys-grid .sys{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%;position:relative;
  transition:border-color .12s,transform .12s,box-shadow .12s}
.sys-grid .sys:hover{transform:translateY(-2px)}
.sys-grid .sys:focus-visible{outline:2px solid var(--vl);outline-offset:2px}
.sys-grid .sys.sel{border-color:var(--v);background:var(--vd);box-shadow:0 0 0 1px var(--v),0 0 0 5px var(--vd)}
/* Laenderkennung als Text — Fahnen-Emoji zeigt Windows als Buchstaben (gemessen 08/2026) */
.sys .cc{font:700 12px/1 var(--mono);color:var(--t3);letter-spacing:.06em;padding-top:3px;min-width:24px}
.sys .span{margin-top:8px;padding-top:8px;border-top:1px solid var(--brd);font:400 11px/1.5 var(--mono);color:var(--t3);font-variant-numeric:tabular-nums}
.sys .zwei{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin-top:6px;
  font:400 11px/1.5 var(--mono);color:var(--t3);align-items:baseline}
.sys .zwei b{font-weight:600;color:var(--tx);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sys .zwei b:last-child{color:var(--vl)}
.sys .go{position:absolute;right:12px;top:12px;font:700 13px/1 var(--mono);color:var(--vl)}
.sys.sel .go::before{content:"✓"}

.ld-total{display:inline-flex;gap:8px;align-items:baseline;margin-top:14px;padding:10px 14px;
  border:1px solid var(--brdv);border-radius:8px;background:var(--bg2);
  font:400 12.5px/1.4 var(--sans);color:var(--t3)}
.ld-total b{font:700 22px/1 var(--mono);color:var(--vl);font-variant-numeric:tabular-nums}
.ld-step{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--vl);margin:18px 0 10px}

/* Eingabe */
.ld-check{margin-top:26px;border:1px solid var(--brdv);border-radius:12px;background:var(--bg2);
  padding:20px 22px;box-shadow:0 30px 50px -35px rgba(212,175,55,.35)}
.ld-check .ld-step{margin-top:0}
.ld-head{font:700 18px/1.2 var(--sans);margin-bottom:14px}
.ld-felder{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ld-zf{width:64px;height:48px;border:1px solid var(--brdv);border-radius:8px;background:var(--bg3);
  color:var(--tx);font:700 18px/1 var(--mono);text-align:center;-moz-appearance:textfield}
.ld-zf::-webkit-outer-spin-button,.ld-zf::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ld-zf:focus{outline:2px solid var(--vl);outline-offset:1px}
.ld-zf.extra{border-color:var(--amber);background:rgba(251,191,36,.07)}
.ld-zf.bad{border-color:var(--red);box-shadow:0 0 0 2px rgba(217,120,90,.3)}
.ld-plus{font:600 18px/1 var(--mono);color:var(--t3);padding:0 4px}
.ld-regel{font:400 12.5px/1.5 var(--mono);color:var(--t3);margin:10px 0 16px}
.ld-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ld-msg{font-size:14px;max-width:60ch}
.ld-msg.ok{color:var(--green)} .ld-msg.err{color:var(--red)}
.ld-quelle{margin-top:20px;font-size:13.5px;color:var(--t3)}
.ld-quelle a{color:var(--vl);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:520px){.ld-zf{width:52px;height:44px;font-size:16px}}