/* ===== Baustein F · Beta-Tab (KONZEPT §18) ===== */
/* =====================================================================
   BETA-TAB — EINE generische Karte fuer ALLE Analysen des Registers.
   Nur neue Klassen mit dem Praefix .w-bt , ausschliesslich vorhandene
   CSS-Variablen. Der Bento-Skin haengt am Ende, wie ueberall sonst.
   ===================================================================== */
.w-btwrap{display:flex;flex-direction:column;gap:var(--gap)}
.w-btbarrow{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.w-btprog{position:relative;flex:1 1 200px;min-width:120px;height:6px;border-radius:6px;
  box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
.w-btprog i{position:absolute;left:0;top:0;height:6px;border-radius:4px;background:var(--cyan);
  width:0;transition:width .28s ease,background .28s ease}
.w-btprog i.done{background:var(--win)}
.w-btpstat{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.w-btpstat b{color:var(--ink2);font-weight:700}
.w-btpstat.err{color:var(--loss)}
.w-btbarrow .btn{margin-left:auto}

/* ---- Abschnitt je Themenfamilie (einklappbar, standardmaessig offen) ---- */
.w-btsecs{display:flex;flex-direction:column;gap:var(--gap)}
.w-btsec>summary{cursor:pointer;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  list-style:none;padding:0 2px 9px}
.w-btsec>summary::-webkit-details-marker{display:none}
.w-btsec>summary::before{content:"▾";font-size:9px;color:var(--ink3);line-height:1.6}
.w-btsec:not([open])>summary::before{content:"▸"}
.w-btsec>summary:hover h3{color:var(--ink)}
.w-btsec>summary h3{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.9px;color:var(--cyan)}
.w-btsec>summary .w-btgn{font-size:10.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.w-btgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:var(--gap);align-items:start}

/* ---- Die Karte ---- */
.w-btcard{background:var(--canvas);border-radius:var(--r);padding:15px 17px 13px;min-width:0;
  box-shadow:7px 7px 14px var(--lo),-5px -5px 12px var(--hi)}
.w-bthead{display:flex;align-items:flex-start;gap:8px}
.w-btt{flex:1;min-width:0;font-size:12.5px;font-weight:700;line-height:1.32;color:var(--ink)}
.w-btrl{flex:0 0 auto;border:0;background:transparent;color:var(--ink3);font:inherit;font-size:13px;
  line-height:1;cursor:pointer;padding:1px 4px;border-radius:6px}
.w-btrl:hover{color:var(--cyan)}
.w-btcard[data-state="wait"] .w-btrl{opacity:.4;pointer-events:none}
.w-btq{font-size:10.5px;line-height:1.45;color:var(--ink3);margin-top:3px}
/* `explainer` aus Katalog und Huelle: EIN Satz, der die Kennzahl selbst
   erklaert („was misst das ueberhaupt?"). Steht schon am Skelett und bleibt
   auch dann stehen, wenn es kein Ergebnis gibt — gerade dann ist die Frage
   ja noch offen. Der Strich links trennt ihn von der Frage darueber. */
.w-btexpl{font-size:10.5px;line-height:1.5;color:var(--ink3);margin-top:7px;
  padding-left:9px;border-left:2px solid var(--axis)}
.w-btbody{margin-top:11px}

/* Skelett — Titel und Frage stehen schon, hier fehlen nur noch die Zahlen. */
.w-btskel i{display:block;height:9px;border-radius:5px;background:var(--grid);margin-bottom:8px;
  animation:w-btpulse 1.4s ease-in-out infinite}
.w-btskel i:nth-child(2){width:78%;animation-delay:.15s}
.w-btskel i:nth-child(3){width:54%;animation-delay:.3s}
@keyframes w-btpulse{0%,100%{opacity:.28}50%{opacity:.6}}

/* Grosse Zahl (kind=rate / kind=value mit Einzelwert) */
.w-btnum{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.w-btnum b{font-size:26px;font-weight:650;line-height:1.05;color:var(--ink);
  font-variant-numeric:tabular-nums}
.w-btci{font-size:10.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.w-btmeter{position:relative;height:10px;border-radius:6px;margin-top:9px;
  box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
.w-btmfill{position:absolute;left:0;top:0;height:10px;border-radius:4px;background:var(--cyan)}
.w-btmci{position:absolute;top:3px;height:4px;border-radius:2px;background:var(--ink);opacity:.4}

/* Werteliste (kind=value mit mehreren benannten Zahlen) */
.w-btkv{display:grid;grid-template-columns:1fr auto;gap:3px 14px;font-size:10.5px}
.w-btkv.big{font-size:11.5px;gap:4px 14px}
.w-btkv dt{color:var(--ink3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-btkv dd{color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.w-btna{font-style:normal;color:var(--ink3);font-weight:500}

/* Saeulen — nur fuer laengere Verlaeufe/Verteilungen, immer MIT Zeilenliste darunter */
.w-btcols{display:flex;align-items:flex-end;gap:2px;height:52px;margin-bottom:10px}
.w-btcol{flex:1 1 0;min-width:2px;min-height:2px;background:var(--cyan);border-radius:3px 3px 0 0}
/* Fehlender Wert ist KEINE Null: leerer, gestrichelter Platzhalter ueber die volle Hoehe. */
.w-btcol.na{background:none;border:1px dashed var(--ink3);opacity:.4;border-radius:3px;height:100%}

/* Zeilen (kind=ranking und kind=series) */
.w-btrows{display:flex;flex-direction:column;gap:1px}
.w-btrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(40px,1fr) 104px;gap:9px;
  align-items:center;min-height:31px;padding:2px 5px;border-radius:7px}
.w-btrow:hover{background:rgba(255,255,255,.045)}
.w-btlb{font-size:11px;color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.w-btrk{display:inline-block;min-width:16px;font-size:9.5px;font-weight:800;color:var(--ink3)}
.w-bttrack{position:relative;height:8px;border-radius:5px;
  box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
.w-btfill{position:absolute;top:0;height:8px;border-radius:3px;background:var(--cyan)}
.w-btfill.neg{background:var(--loss)}
.w-btwh{position:absolute;top:3px;height:2px;border-radius:2px;background:var(--ink);opacity:.5}
.w-btwh::before,.w-btwh::after{content:"";position:absolute;top:-3px;width:1.5px;height:8px;
  background:var(--ink);opacity:.8}
.w-btwh::before{left:0}
.w-btwh::after{right:0}
.w-btzero{position:absolute;top:-2px;width:1px;height:12px;background:var(--ink3);opacity:.65}
.w-btrv{text-align:right;min-width:0;font-variant-numeric:tabular-nums}
.w-btrv b{display:block;font-size:11.5px;font-weight:700;color:var(--ink);line-height:1.25}
.w-btrv em{display:block;font-style:normal;font-size:9.5px;color:var(--ink3);line-height:1.35;
  white-space:nowrap}
.w-btrv .w-btthin{font-size:10px;font-weight:700;color:var(--amber)}
.w-btmore{margin-top:5px}
.w-btmore>summary{cursor:pointer;font-size:10px;font-weight:700;color:var(--ink3);
  list-style:none;padding:4px 5px}
.w-btmore>summary::-webkit-details-marker{display:none}
.w-btmore>summary:hover{color:var(--cyan)}

/* Klartext (`plain` aus der Huelle) — seit dem Zweistufen-Umbau der
   HAUPTINHALT der Karte: ein bis zwei Saetze Alltagssprache, gross und
   ruhig, ueber den Zahlen. Nullbefund und Fund sehen hier GLEICH aus:
   gleiche Groesse, gleiche Farbe, kein Wegklappen (KONZEPT §18). */
.w-btplain{font-size:13.5px;line-height:1.62;color:var(--ink);margin-bottom:12px}
/* Verdikt — ab jetzt die Detailebene unter dem Klartext: die genauen Zahlen,
   Intervalle und Tests. Kleiner und ruhiger, aber NICHT weggeklappt. */
.w-btverdict{font-size:11.5px;line-height:1.55;color:var(--ink2);margin-top:11px}
.w-btcaveat{font-size:10.5px;line-height:1.5;color:var(--ink3);margin-top:8px}
/* „Zu wenig Daten" / interner Fehler: ebenso prominent, aber ohne Zahlenkoerper. */
.w-btnote{font-size:11.5px;line-height:1.55;color:var(--ink2);padding:12px 14px;
  border-radius:var(--rw);box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
/* Der Klartext einer Karte OHNE Ergebnis. Bewusst dieselbe Groesse und
   Farbe wie .w-btplain: ein Nullbefund wird nicht kleiner gesetzt als ein
   Fund, er steht nur in einem Rahmen statt neben Zahlen. */
.w-btnote.say{font-size:13.5px;line-height:1.62;color:var(--ink)}
/* Die Zahlenebene INNERHALB eines solchen Rahmens (Verdikt zum Klartext). */
.w-btwhy{display:block;margin-top:7px;font-style:normal;font-size:10.5px;line-height:1.5;
  color:var(--ink3)}
.w-btnote.err{color:var(--loss)}
.w-btnote b{color:var(--ink);font-weight:700}
/* Maschinenlesbarer Teil eines Backend-Fehlers, unter dem Klartext. */
.w-bterrd{display:block;margin-top:6px;font-style:normal;font-size:10px;line-height:1.45;
  color:var(--ink3);word-break:break-word}
/* „Wird berechnet": die Karte wartet auf ihren eigenen Aufruf. Sie zeigt
   deshalb KEINEN Wert und KEINEN leeren Balken — nur den Grund des Backends.
   Der laufende Punkt macht sichtbar, dass hier noch etwas passiert. */
.w-btnote.pend{color:var(--ink3);display:flex;align-items:flex-start;gap:10px}
.w-btnote.pend b{color:var(--ink2);font-weight:700}
.w-btpb{min-width:0;flex:1}
.w-btspin{flex:0 0 auto;width:9px;height:9px;margin-top:5px;border-radius:50%;
  background:var(--cyan);animation:w-btpulse 1.1s ease-in-out infinite}

/* Fusszeile: n · Rechenzeit · Signifikanz · Quellen */
.w-btfoot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);font-size:10px;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.w-btsep{opacity:.5}
.w-btchip{display:inline-flex;align-items:center;font-size:9px;font-weight:800;letter-spacing:.5px;
  padding:2px 8px;border-radius:999px;color:var(--ink3);cursor:help;
  box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
.w-btchip.sig{color:var(--win)}
.w-btchip.nul{color:var(--ink2)}
.w-btdet{margin-top:9px}
.w-btdet>summary{cursor:pointer;font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.8px;color:var(--ink3);list-style:none;display:flex;align-items:center;gap:6px}
.w-btdet>summary::-webkit-details-marker{display:none}
.w-btdet>summary::before{content:"▸";font-size:9px}
.w-btdet[open]>summary::before{content:"▾"}
.w-btdet>summary:hover{color:var(--ink2)}
.w-btdet>div{margin-top:7px}
/* Der Aufzaehlungspunkt steht als echter Text IM SELBEN Textknoten wie der
   Quellenname, nicht als CSS-::before und nicht in einem eigenen Element.
   Sonst besteht eine Zeile wie „participants.win" aus genau einem Textknoten
   in Schluesselform — und der Rauchtest haelt sie fuer einen unuebersetzten
   i18n-Schluessel (tools/smoketest.py, Pruefung „rohe i18n-Schluessel"). */
.w-btsrcs{list-style:none;font-size:10px;line-height:1.5;color:var(--ink3);word-break:break-word}
.w-btsrcs li+li{margin-top:3px}

@media(max-width:520px){
  .w-btrow{grid-template-columns:minmax(0,1fr) 88px;row-gap:4px}
  .w-bttrack{grid-column:1/-1}
}

/* ---- Bento: flach, 1-px-Kante statt Doppelschatten ---- */
.skin-bento .w-btcard{background:var(--surface);border:1px solid var(--line);box-shadow:none}
.skin-bento .w-btnote,.skin-bento .w-btchip{background:var(--inset);border:1px solid var(--line);
  box-shadow:none}
.skin-bento .w-btnote{border-radius:var(--rw)}
.skin-bento .w-btchip{border-radius:999px}
.skin-bento .w-btprog,.skin-bento .w-bttrack,.skin-bento .w-btmeter{background:var(--track);
  box-shadow:none}
.skin-bento .w-btprog i,.skin-bento .w-btfill,.skin-bento .w-btmfill{border-radius:2px}
.skin-bento .w-btskel i{background:var(--track)}
.skin-bento .w-btfoot{border-top:1px solid var(--line)}
.skin-bento .w-btsec>summary h3{color:var(--cyan)}
.skin-bento .w-btrow:hover{background:rgba(255,255,255,.05)}