/* techbrowser.css — durch die Bäume blättern. */

/* ---- Farben lokal setzen, nicht aus dem Theme holen ----
   John, 2026-07-31: "auf dem dunklen Zeug kann man ein bisschen
   schlecht lesen, Kontrast erhoehen."

   Dieser Schirm setzt seinen Hintergrund fest auf dunkel. Die
   Textfarben kamen aber weiter aus dem Theme, und im Pergament-Theme
   sind die fuer helles Papier gemacht (--txt ist dort #33291a,
   dunkelbraun). Ergebnis: dunkel auf dunkel.

   Wer einen festen Grund setzt, muss auch die Schrift dazu setzen.
   Darum werden die Variablen hier im Container ueberschrieben: alle
   vorhandenen var(--txt) im Rest der Datei bekommen damit passende
   Werte, in jedem Theme. */
.tb {
  --txt:#f0f4fb; --les:#c9d7ee; --mut:#93a6c6; --dim:#6d7f9e;
  --panel:#111b2f; --panel2:#16233c; --panel3:#1f3054;
  --tief:#0b1322; --line:#2c4270;
  --gelb:#ffd83d; --cyan:#5ff7ff; --rot:#ff7b86; --lila:#c08bff; --gruen:#8ceb62;
}

.tb{
  position:fixed; inset:0; z-index:69; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#070c15,#0b1220 60%,#080d18);
  color:var(--txt); font-family:inherit;
}
.tb[hidden]{display:none}

.tb-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.tb-baeume{display:flex; gap:6px; flex-wrap:wrap}
.tb-baum{
  display:flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit;
  background:var(--tief); border:1px solid var(--line); border-radius:10px;
  padding:6px 11px; color:var(--les); text-align:left;
}
.tb-baum i{font-style:normal; font-size:16px}
.tb-baum b{display:block; font-size:11px; color:var(--txt)}
.tb-baum em{display:block; font-style:normal; font-size:9px; color:var(--mut)}
.tb-baum:hover{border-color:var(--gelb)}
.tb-baum.an{border-color:var(--gelb); background:var(--panel3)}

.tb-rechts{display:flex; align-items:center; gap:8px}
.tb-schalter{display:flex; background:var(--tief); border:1px solid var(--line); border-radius:99px; padding:2px}
.tb-schalter button{
  cursor:pointer; font-family:inherit; background:none; border:0; color:var(--mut);
  border-radius:99px; padding:5px 12px; font-size:11px;
}
.tb-schalter button.an{background:var(--gelb); color:#12161f; font-weight:700}
.tb-suche{
  font-family:inherit; background:var(--tief); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; color:var(--txt); font-size:11px; width:130px;
}
.tb-zu{
  cursor:pointer; font-family:inherit; background:var(--tief); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; color:var(--txt); font-size:12px;
}

.tb-leib{display:grid; grid-template-columns:minmax(0,1fr) 320px; flex:1 1 auto; min-height:0}
.tb-feld{overflow:auto; padding:14px}
.tb-tafel{
  overflow:auto; padding:14px; border-left:1px solid var(--line);
  background:rgba(255,255,255,.02);
}

.tb-gruppe{margin-bottom:16px}
.tb-gruppe h4{
  margin:0 0 7px; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan);
}
.tb-reihe{display:flex; gap:6px; flex-wrap:wrap}
.tb-k{
  cursor:pointer; font-family:inherit; text-align:left; min-width:130px;
  background:var(--tief); border:1px solid var(--line); border-radius:9px; padding:7px 10px;
}
.tb-k b{display:block; font-size:11px; color:var(--txt)}
.tb-k i{display:block; font-style:normal; font-size:9px; color:var(--mut);
  font-family:ui-monospace,Menlo,monospace; margin-top:2px}
.tb-k:hover{border-color:var(--gelb)}
.tb-k.an{outline:2px solid var(--gelb); outline-offset:1px}
/* Zustände: hat, erreichbar, gesperrt, und in der Anleitung alles frei */
.tb-hat{border-color:#79e34c; background:rgba(121,227,76,.1)}
.tb-kann{border-color:var(--gelb)}
.tb-zu{opacity:.42}
.tb-frei{}
.tb-k.f-gruen b{color:#a8f08a} .tb-k.f-cyan b{color:#8fe6f5}
.tb-k.f-rot b{color:#ff9aa2} .tb-k.f-lila b{color:#cfa8ff}

.tb-ueber h3{margin:0 0 6px; font-size:14px}
.tb-kurz{margin:0 0 8px; font-size:12px; color:var(--les); line-height:1.5}
.tb-was{margin:0 0 8px; font-size:11px; color:var(--mut); line-height:1.6}
.tb-quelle{margin:0 0 14px; font-size:10px; color:var(--mut); font-style:italic}

.tb-stand{border-top:1px solid var(--line); padding-top:12px; margin-bottom:14px}
.tb-stand h4,.tb-detail h4{
  margin:0 0 8px; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan);
}
.tb-bahn{height:8px; background:rgba(255,255,255,.07); border-radius:99px; overflow:hidden}
.tb-bahn i{display:block; height:100%; background:var(--gelb)}
.tb-zahl{margin:8px 0 0; font-size:11px; color:var(--les); line-height:1.5}
.tb-warn{
  margin:10px 0 0; font-size:10px; color:var(--mut); line-height:1.55;
  border-left:2px solid var(--gelb); padding-left:9px;
}

.tb-detail{border-top:1px solid var(--line); padding-top:12px}
.tb-detail h4{color:var(--gelb); font-size:12px; letter-spacing:0; text-transform:none}
.tb-dgruppe{margin:0 0 8px; font-size:10px; color:var(--mut); text-transform:uppercase; letter-spacing:1.5px}
.tb-dtext{margin:0 0 10px; font-size:11px; line-height:1.6; color:var(--les)}
.tb-preis{
  margin:0 0 10px; font-size:11px; line-height:1.6; color:var(--les);
  border-left:2px solid #ff5f6d; padding-left:9px;
}
.tb-dzeile{
  display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  padding:4px 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.tb-dzeile i{font-style:normal; font-size:10px; color:var(--mut); flex:0 0 auto}
.tb-dzeile b{font-size:11px; text-align:right}
.tb-fehlt{margin:10px 0 0; font-size:11px; color:#ff9aa2}
.tb-da{margin:10px 0 0; font-size:11px; color:#a8f08a}
.tb-hinweis,.tb-leer{font-size:11px; color:var(--mut); line-height:1.6}

@media (max-width:860px){
  .tb-leib{grid-template-columns:minmax(0,1fr); grid-template-rows:1fr auto}
  .tb-tafel{border-left:0; border-top:1px solid var(--line); max-height:44vh}
  .tb-suche{width:96px}
}