/* zahlenschirm.css — die Welt ohne Bild.

   Fester dunkler Grund, also auch eigene Schrift: im Pergament-Theme ist
   --txt dunkelbraun und waere auf diesem Grund unlesbar. Dieselbe
   Begruendung wie in metriken.css und techbrowser.css, und dieselbe
   Falle, die dort schon einmal Zeit gekostet hat.

   Kein align-items:center am Rahmen. Bei Ueberlaenge schneidet das oben
   ab, und der abgeschnittene Teil ist nicht scrollbar. */

.zs {
  --txt:#f0f4fb; --les:#c9d7ee; --mut:#93a6c6;
  --line:#2c4270; --tief:#0b1322; --karte:#111b2f;
  --gelb:#ffd83d; --cyan:#5ff7ff; --gruen:#79e34c; --rot:#ff8a94;
  position:fixed; inset:0; z-index:9080;
  display:flex; flex-direction:column;
  background:#080d18;
  color:var(--txt); font-family:inherit;
}
.zs[hidden]{display:none}

/* ---- Kopf ---------------------------------------------------- */
.zs-kopf{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:10px 16px; border-bottom:1px solid var(--line);
  background:var(--tief);
}
.zs-titel{font-size:13px; letter-spacing:.5px; white-space:nowrap}
.zs-lage{
  flex:1 1 auto; min-width:0; font-size:11px; color:var(--mut);
  font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.zs-lage b{color:var(--txt); font-family:ui-monospace,Menlo,monospace}
.zs-aus{color:var(--rot)!important}
.zs-zu{
  cursor:pointer; font-family:inherit; background:none; border:0; color:var(--mut);
  font-size:15px; padding:2px 8px; flex:0 0 auto;
}
.zs-zu:hover{color:var(--txt)}

/* ---- Rumpf --------------------------------------------------- */
.zs-rumpf{flex:1 1 auto; overflow:auto; padding:14px 16px 20px}
.zs-leer{font-size:12px; color:var(--mut)}

.zs-ueber{
  margin:20px 0 8px; font-size:10px; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--cyan); font-weight:700; cursor:help;
}
.zs-ueber:first-child{margin-top:2px}
.zs-ueber em{font-style:normal; color:var(--mut); letter-spacing:3px; margin-left:8px}

.zs-gitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:10px}
.zs-gitter.zs-schmal{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.zs-gitter.zs-dicht{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* Die acht stehen als 4x2 und nicht, wie auto-fit es faende, als 5+3.
   Das ist keine Kosmetik: L I A P in der ersten Reihe und R D E C in
   der zweiten ist eine Ordnung, die man sich merken kann. Fuenf plus
   drei ist eine Bildschirmbreite. */
.zs-gitter.zs-acht{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1180px){ .zs-gitter.zs-acht{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:719px){ .zs-gitter.zs-acht{grid-template-columns:minmax(0,1fr)} }

/* ---- eine Karte ---------------------------------------------- */
.zs-karte{
  background:var(--karte); border:1px solid var(--line); border-radius:10px;
  padding:9px 11px 10px; min-width:0;
}
.zs-karte>header{
  display:flex; align-items:baseline; gap:8px; cursor:help;
  padding-bottom:6px; margin-bottom:7px; border-bottom:1px solid rgba(255,255,255,.07);
}
.zs-zeichen{
  font-family:ui-monospace,Menlo,monospace; font-size:17px; font-weight:700;
  color:var(--gelb); line-height:1; width:15px; flex:0 0 auto;
}
.zs-name{
  font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--les);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}

.zs-gross{display:flex; align-items:baseline; gap:8px; cursor:help; margin-bottom:8px; min-width:0}
.zs-gross b{
  font-size:23px; line-height:1.05; font-family:ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums; color:var(--txt); white-space:nowrap;
}
.zs-gross b.leer{color:var(--mut); font-size:19px}
.zs-gross em{
  font-style:normal; font-size:9.5px; color:var(--mut); line-height:1.35;
  min-width:0; overflow:hidden;
}

/* ---- Zeilen unter der grossen Zahl --------------------------- */
.zs-unter{display:flex; flex-direction:column}
.zs-z{
  display:grid; grid-template-columns:minmax(0,1fr) auto 11px minmax(0,auto);
  align-items:baseline; gap:6px; padding:2.5px 0; cursor:help;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.zs-z:last-child{border-bottom:0}
.zs-z:hover{background:rgba(95,247,255,.055)}
.zs-z i{
  font-style:normal; font-size:10px; color:var(--les);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.zs-z b{
  font-size:11px; font-family:ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums;
  white-space:nowrap; color:var(--txt);
}
.zs-z b.leer{color:var(--mut)}
.zs-z b.wort{font-family:inherit; font-size:10px; color:var(--gelb)}
.zs-z u{text-decoration:none; font-size:8px; line-height:1; text-align:center}
.zs-z em{
  font-style:normal; font-size:8.5px; color:var(--mut); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0;
}

/* Die drei Guetezeichen. Ein Blick soll reichen, darum Farbe und nicht
   nur Form: gemessen gruen, abgeleitet gelb, geschaetzt matt. */
.g-gemessen{color:var(--gruen)}
.g-abgeleitet{color:var(--gelb)}
.g-geschaetzt{color:var(--mut)}
/* Kein Wert, also auch kein Zeichen. Der Platz bleibt trotzdem stehen,
   damit die Spalte nicht springt. */
.g-keine{display:inline-block; width:8px}

/* ---- der Merksatz unter den acht ----------------------------- */
.zs-merk{
  margin:10px 0 0; padding:8px 11px; font-size:10.5px; line-height:1.6; color:var(--les);
  background:rgba(255,216,61,.06); border-left:2px solid var(--gelb); border-radius:0 7px 7px 0;
}
.zs-merk b{color:var(--txt)}

/* ---- Regler --------------------------------------------------- */
.zs-regler{display:flex; flex-direction:column; gap:1px}
.zs-r{
  display:grid; grid-template-columns:minmax(0,84px) minmax(0,1fr) 26px;
  align-items:center; gap:8px; padding:2px 0; cursor:help;
}
.zs-r:hover{background:rgba(95,247,255,.055)}
.zs-r i{
  font-style:normal; font-size:10px; color:var(--les);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.zs-r input{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:2px;
  background:var(--line); outline:none; cursor:pointer; min-width:0;
}
.zs-r input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:11px; height:11px; border-radius:50%;
  background:var(--cyan); cursor:pointer; border:0;
}
.zs-r input::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%; background:var(--cyan); cursor:pointer; border:0;
}
.zs-r b{
  font-size:10px; font-family:ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums;
  color:var(--txt); text-align:right;
}

/* ---- Erklaerung ----------------------------------------------- */
.zs-erklaerung{
  margin:22px 0 0; padding:16px 18px 18px; max-width:74ch;
  background:var(--karte); border:1px solid var(--line); border-radius:10px;
}
.zs-erklaerung h2{
  margin:0 0 10px; font-size:10px; letter-spacing:2.4px; text-transform:uppercase; color:var(--cyan);
}
.zs-erklaerung h3{
  margin:16px 0 5px; font-size:11.5px; color:var(--gelb); letter-spacing:.3px;
}
.zs-erklaerung p{margin:0 0 8px; font-size:11.5px; line-height:1.68; color:var(--les)}
.zs-erklaerung b{color:var(--txt)}

/* ---- Lesebalken ----------------------------------------------- */
/* Klebt unten und erklaert sofort, worueber die Maus steht. Die
   normalen Erklaerfenster brauchen zwei Sekunden, was fuer einen Knopf
   richtig ist und fuer vierzig Zahlen unbenutzbar waere. */
.zs-balken{
  flex:0 0 auto; padding:8px 16px; border-top:1px solid var(--line);
  background:var(--tief); min-height:36px; display:flex; align-items:center;
}
.zs-balken i{
  font-style:normal; font-size:11px; line-height:1.5; color:var(--les);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.zs-balken b{color:var(--cyan); font-weight:700; margin-right:5px}

@media (max-width:640px){
  .zs-rumpf{padding:12px 10px 18px}
  .zs-gitter, .zs-gitter.zs-schmal, .zs-gitter.zs-dicht{grid-template-columns:minmax(0,1fr)}
  .zs-titel{font-size:11px}
  .zs-lage{font-size:10px}
  .zs-balken i{-webkit-line-clamp:3}
}