/* energietafel.css — sechs Welten nebeneinander.

   Fester dunkler Grund, also eigene Schrift: im Pergament-Theme waere
   --txt dunkelbraun und hier unlesbar. Dieselbe Falle wie in
   metriken.css und zahlenschirm.css. */

.et {
  --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:9082;
  display:flex; flex-direction:column;
  background:#080d18; color:var(--txt); font-family:inherit;
}
.et[hidden]{display:none}

.et-kopf{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:10px 16px; border-bottom:1px solid var(--line); background:var(--tief);
}
.et-kopf b{font-size:13px; white-space:nowrap}
.et-lage{flex:1 1 auto; font-size:11px; color:var(--mut); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.et-zu{cursor:pointer; font-family:inherit; background:none; border:0; color:var(--mut);
  font-size:15px; padding:2px 8px}
.et-zu:hover{color:var(--txt)}

.et-rumpf{flex:1 1 auto; overflow:auto; padding:16px}

/* ---- die Frage ------------------------------------------------ */
.et-frage{max-width:78ch; margin:0 0 16px}
.et-frage h2{margin:0 0 8px; font-size:15px; color:var(--gelb); letter-spacing:.3px}
.et-frage p{margin:0 0 8px; font-size:12px; line-height:1.68; color:var(--les)}
.et-frage b{color:var(--txt)}

/* ---- Bedienung ------------------------------------------------ */
.et-steuer{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 8px}
.et-steuer label{font-size:10.5px; color:var(--les); display:flex; align-items:center; gap:6px}
.et-steuer select{
  font-family:inherit; font-size:11px; background:var(--karte); color:var(--txt);
  border:1px solid var(--line); border-radius:6px; padding:3px 6px; cursor:pointer;
}
.et-los{
  font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  background:var(--gelb); color:#181203; border:0; border-radius:7px; padding:7px 16px;
}
.et-los:disabled{background:var(--line); color:var(--mut); cursor:default}
.et-kosten{font-size:10px; color:var(--mut)}

.et-fortschritt{min-height:26px; margin:0 0 12px}
.et-fortschritt span{font-size:10px; color:var(--mut); display:block; margin-top:4px}
.et-balken{height:4px; border-radius:2px; background:var(--line); overflow:hidden}
.et-balken i{display:block; height:100%; background:var(--cyan); transition:width .18s linear}

/* ---- die Tafel ------------------------------------------------ */
/* Eine Zeilenkoepfchen-Spalte plus zwei Zugangsspalten. Grid und nicht
   table, weil die Felder unterschiedlich hoch werden duerfen. */
.et-tafel{
  display:grid; grid-template-columns:minmax(120px,168px) minmax(0,1fr) minmax(0,1fr);
  gap:8px; align-items:stretch;
}
.et-ecke{}
.et-spalte, .et-zeile{
  display:flex; flex-direction:column; justify-content:center; gap:3px; padding:7px 10px; cursor:help;
}
.et-spalte{border-bottom:1px solid var(--line)}
.et-spalte b, .et-zeile b{
  font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:var(--cyan);
}
.et-spalte i, .et-zeile i{font-style:normal; font-size:9.5px; line-height:1.5; color:var(--mut)}

.et-feld{
  background:var(--karte); border:1px solid var(--line); border-radius:9px; padding:9px 11px 8px;
  min-width:0; display:flex; flex-direction:column; gap:7px;
}
.et-feld>b{font-size:11.5px; color:var(--gelb)}
.et-feld.et-offen{opacity:.5}
.et-warte{font-size:10px; color:var(--mut)}

.et-zahlen{display:grid; grid-template-columns:repeat(auto-fit,minmax(58px,1fr)); gap:4px}
.et-z{
  display:flex; flex-direction:column; gap:1px; padding:4px 5px; border-radius:5px;
  background:rgba(255,255,255,.035); cursor:help; min-width:0;
}
.et-z i{
  font-style:normal; font-size:8.5px; letter-spacing:1.2px; color:var(--mut);
  font-family:ui-monospace,Menlo,monospace;
}
.et-z b{
  font-size:12px; font-family:ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums;
  color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Fuehrt bei dieser Zahl. NICHT "hat gewonnen": bei C und P ist weniger
   besser, und kein Feld fuehrt bei allen achten. */
.et-z.et-spitze{background:rgba(121,227,76,.13); box-shadow:inset 0 0 0 1px rgba(121,227,76,.32)}
.et-z.et-spitze b{color:var(--gruen)}

.et-fuss{font-size:9px; color:var(--mut); margin-top:auto}

/* ---- Befund ---------------------------------------------------- */
.et-befund{
  margin:20px 0 0; padding:16px 18px; max-width:82ch;
  background:var(--karte); border:1px solid var(--line); border-radius:10px;
}
.et-befund h2{margin:0 0 8px; font-size:10px; letter-spacing:2.4px; text-transform:uppercase; color:var(--cyan)}
.et-befund h3{margin:15px 0 5px; font-size:11.5px; color:var(--gelb)}
.et-befund p{margin:0 0 6px; font-size:11.5px; line-height:1.7; color:var(--les)}
.et-befund b{color:var(--txt)}
.et-klein{margin-top:14px!important; padding-top:10px; border-top:1px solid var(--line);
  font-size:10px!important; color:var(--mut)!important; line-height:1.6!important}

@media (max-width:760px){
  .et-rumpf{padding:12px 10px}
  .et-tafel{grid-template-columns:minmax(0,1fr)}
  .et-ecke{display:none}
  .et-spalte{border-bottom:0; border-left:2px solid var(--cyan); padding-left:8px}
  .et-zeile{border-left:2px solid var(--gelb); padding-left:8px; margin-top:8px}
}