/* weltbild.css — die Weltbild-Schublade.

   Alles haengt an den Variablen aus style.css. Keine eigenen Farbwerte,
   sonst sitzt man im Pergament und hat eine Neon-Grafik daneben. Die
   Grafik selbst holt sich dieselben Variablen im Zeichner ab, darum
   passen Rahmen und Inhalt in allen drei Ansichten zusammen.

   Die Schublade ist rund 400 Pixel breit, davon gehen 88 fuer die
   Kugelspalte und 16 fuer den Rand ab. Es bleiben knapp 300 Pixel
   Inhalt, und darauf ist hier alles ausgelegt. */

.wb-vor { margin: 0 0 4px; }

/* ---- Die Liste. Dreissig Weltbilder passen nicht untereinander in
   eine Schublade, also bekommt die Liste ein eigenes Fenster. ---- */
.wb-liste {
  max-height: 168px; overflow-y: auto;
  border: 1px solid var(--glasrand); border-radius: 10px;
  padding: 6px; background: var(--tief);
}
.wb-liste::-webkit-scrollbar { width: 6px; }
.wb-liste::-webkit-scrollbar-thumb { background: var(--glasrand); border-radius: 3px; }

.wb-gruppe {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mut); margin: 7px 0 4px 2px;
}
.wb-gruppe:first-child { margin-top: 1px; }

.wb-w {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; color: var(--txt);
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px; margin-bottom: 4px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.wb-w:hover { border-color: var(--cyan); background: var(--panel3); }
.wb-w.an {
  border-color: var(--gelb); background: var(--panel3);
  box-shadow: inset 3px 0 0 var(--gelb);
}
.wb-w b { display: block; font-size: 12px; }
.wb-w span { display: block; font-size: 10px; color: var(--les); line-height: 1.35; margin-top: 1px; }

/* ---- Die Buehne. Hoehe setzt das Skript, damit Zeichenflaeche und
   Anzeige nicht auseinanderlaufen. ---- */
.wb-buehne {
  display: block; width: 100%; height: 264px;
  border: 1px solid var(--glasrand); border-radius: 10px;
  background: var(--tief);
  background-image: var(--papier);
}

.wb-schalter {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; color: var(--mut); cursor: pointer; margin-top: -4px;
}
.wb-schalter input { accent-color: var(--cyan); cursor: pointer; }

/* ---- Kopf und Text ---- */
.wb-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wb-kopf b { font-size: 14px; color: var(--gelb); letter-spacing: 1px; }
.wb-kopf span { font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: 1px; }

.wb-desc { font-size: 11px; line-height: 1.55; color: var(--les); margin: 0; }

.wb-paare { display: flex; flex-direction: column; gap: 3px; }
.wb-paar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 11px; padding: 3px 0; border-bottom: 1px dotted var(--line);
}
.wb-paar span { color: var(--mut); flex: 0 0 auto; }
.wb-paar b { color: var(--txt); text-align: right; font-weight: 600; }

/* ---- Bloecke, gleiche Optik wie die Kulturschublade ---- */
.wb-block { padding-top: 10px; border-top: 1px solid var(--glasrand); }
.wb-block h3 {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 7px; font-weight: 600;
}
.wb-block .mini { margin-top: 7px; }

/* ---- Die sechs Achsen als Balken ---- */
.wb-a {
  display: grid; grid-template-columns: 84px 1fr 26px;
  align-items: center; gap: 7px; font-size: 11px; padding: 2px 0;
}
.wb-a span { color: var(--mut); }
.wb-a i {
  display: block; height: 5px; border-radius: 3px;
  background: var(--panel3); border: 1px solid var(--line); overflow: hidden;
}
.wb-a u {
  display: block; height: 100%; text-decoration: none;
  background: var(--lila);
}
.wb-a b {
  font-family: ui-monospace, Menlo, monospace; font-size: 10px;
  color: var(--gelb); text-align: right;
}

/* ---- Wirkung. Die Zeilen selbst kommen aus style.css (.kw), hier
   steht nur der Punkt fuer „wird angezeigt, greift aber nicht". ---- */
.wb-nur {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mut); font-size: 0; vertical-align: middle;
  margin-left: 3px; opacity: .8; cursor: help;
}

/* Auf dem Telefon fuellt die Schublade den Schirm. Dann darf die Liste
   hoeher werden, es ist ja Platz nach unten. */
@media (max-width: 560px) {
  .wb-liste { max-height: 210px; }
  .wb-a { grid-template-columns: 92px 1fr 28px; }
}

/* Pergament zeichnet mit Tinte statt mit Leuchtfarbe: der Balken wird
   zur gefuellten Flaeche, der Rahmen etwas kraeftiger. */
body[data-theme="pergament"] .wb-buehne { border-color: var(--line); }
body[data-theme="pergament"] .wb-a u { background: var(--gelb); }

/* Nacht ist einfarbig. Ein Balken in Weiss auf Schwarz reicht, die
   Unterscheidung machen Beschriftung und Form. */
body[data-theme="nacht"] .wb-a u { background: #fff; }
body[data-theme="nacht"] .wb-w.an { box-shadow: inset 3px 0 0 #fff; }
body[data-theme="nacht"] .wb-buehne { border-color: var(--line); }