/* ═══════════════════════════════════════════════════════════════════
   VORLAGEN-BUILDER — die Werkbank, in der ein Bericht entsteht
   ─────────────────────────────────────────────────────────────────────
   Drei Spalten: links der Vorrat, in der Mitte das Blatt, rechts die
   Einstellungen. Das Blatt in der Mitte ist ein <iframe> mit dem ECHTEN
   Berichtsdokument — es bringt sein eigenes Aussehen mit und wird hier
   bewusst NICHT gestaltet. Wer ihm von aussen Regeln gaebe, haette ein
   Blatt, das im Builder anders aussieht als im Ausdruck.

   Alle Rundungen und Schriftgroessen kommen aus den Tokens. Feste Zahlen
   daneben ergeben Kanten, die nicht zueinander passen — und die Ratsche
   in test/design-tokens.test.mjs schlaegt darauf an.
   ═══════════════════════════════════════════════════════════════════ */

.vb-bau { padding: 0; }

.vb-leinwand {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: start;
}
/* Unter 1280 px wandern die Schienen unter das Blatt. Das Blatt bleibt
   dabei zuerst — es ist das, worum es geht. */
@media (max-width: 1280px) {
  .vb-leinwand { grid-template-columns: minmax(0, 1fr); }
  .vb-mitte { order: -1; }
}

.vb-schiene {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  border: 1px solid var(--bdr-2);
  border-radius: var(--r-l);
  background: var(--bg-elev-1);
  /* Die Kopfhoehe steht als Token in theme.css. Eine feste Zahl hier
     waere beim naechsten Aendern der Leiste falsch — und zwar still:
     die Schiene klebte dann ein paar Pixel zu hoch oder zu tief, und
     niemand wuesste, warum. `test/editor-reiterleiste.test.mjs` prueft
     genau das. */
  position: sticky;
  top: calc(var(--sticky-top) + var(--sticky-header-h) + 8px);
  max-height: calc(100vh - var(--sticky-header-h) - 32px); overflow: auto;
}
.vb-sch-kopf {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx-3);
}
.vb-mitte { min-width: 0; }

/* Das Blatt. Kein Rahmen, kein Schatten von aussen — das Dokument
   bringt seinen Seitenhintergrund selbst mit. */
.vb-blatt {
  width: 100%; height: calc(100vh - 140px);
  border: 1px solid var(--bdr-2);
  border-radius: var(--r-l);
  background: #FFFFFF;
}
/* Die leere Flaeche traegt eine MELDUNG. Weiss auf Weiss waere hier das
   Schlimmste: man saehe ein leeres Blatt und hielte es fuer ein leeres
   Blatt, statt fuer einen Fehler. */
.vb-blatt--leer {
  display: grid; place-items: center;
  height: 320px; padding: 24px;
  background: var(--bg-elev-1); color: var(--tx-2);
}

/* ── Vorrat ──────────────────────────────────────────────────────── */
.vb-arten { display: grid; gap: 6px; }
.vb-art {
  display: grid; gap: 2px; justify-items: start; text-align: left;
  padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--bdr-2); border-radius: var(--r-m);
  background: var(--bg-elev-2); color: var(--tx-2);
}
.vb-art:hover { border-color: var(--bdr-3); }
.vb-art-n { font-size: 13px; font-weight: 700; color: var(--tx-1); }
.vb-art-d { font-size: 11px; color: var(--tx-3); }

/* ── Gliederung ──────────────────────────────────────────────────── */
.vb-gls { display: grid; gap: 4px; }
/* Vier Spalten, nicht drei: der „ohne Daten"-Zähler steht zwischen
   Anzahl und Schalter. Mit drei Spalten brach der Schalter in eine
   zweite Zeile, sobald der Zähler auftauchte — und das passiert genau
   dann, wenn etwas nicht stimmt. */
.vb-gl {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: var(--r-m);
  background: var(--bg-elev-2);
}
.vb-gl-n { font-size: 12px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-gl-z { font-size: 11px; color: var(--tx-3); }
.vb-gl-s {
  height: 20px; padding: 0 8px; border: 0; cursor: pointer;
  border-radius: var(--r-full);
  background: var(--bdr-2); color: var(--tx-3);
  font-size: 10px; font-weight: 700;
}
.vb-gl-s[aria-pressed="true"] { background: var(--acc-1); color: var(--acc-1-text); }

/* ── Einstellungen ───────────────────────────────────────────────── */
.vb-feld { display: grid; gap: 6px; }
/* Die Aktionen stehen in EINER Reihe und umbrechen erst, wenn sie
   müssen. Als Spalte sahen vier gleich breite graue Balken wie eine
   Liste aus, nicht wie Knöpfe. */
.vb-feld--akt {
  margin-top: 4px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.vb-feld--akt .btn { flex: 0 0 auto; }

/* Segmentschalter und Kästchen in der Schiene bleiben kompakt. */
.vb-schiene .seg { align-self: flex-start; }
.vb-schiene .kb { align-self: flex-start; }
.vb-opt .seg { justify-self: end; }
.vb-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-3);
}

/* Die Vorschau IM Knopf zeigt, was der Knopf tut: ein Balken so breit
   wie der Anteil an zwoelf Spalten. Das Wort „Zwei Drittel" allein
   laesst offen, wie das aussieht — und genau daran scheitert ein
   Aufbau-Werkzeug. */
.vb-weiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.vb-wz {
  display: grid; gap: 4px; justify-items: start; cursor: pointer;
  padding: 6px 7px; border: 1px solid var(--bdr-2); border-radius: var(--r-xs);
  background: var(--bg-elev-2); color: var(--tx-3);
  font-size: 10px; font-weight: 700; text-align: left;
}
.vb-wz:hover { border-color: var(--bdr-3); color: var(--tx-1); }
.vb-wz--an { border-color: var(--acc-1); background: var(--acc-1-soft); color: var(--tx-1); }
.vb-wz-vs { display: block; width: 100%; height: 5px;
  border-radius: var(--r-full); background: var(--bdr-2); }
.vb-wz-vs u { display: block; height: 100%; border-radius: var(--r-full); background: var(--acc-1); }

.vb-zeigen, .vb-picker, .vb-dar, .vb-bmodi, .vb-bilder {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.vb-zz, .vb-pz, .vb-dz, .vb-bm, .vb-bk {
  padding: 6px 10px; cursor: pointer;
  border: 1px solid var(--bdr-2); border-radius: var(--r-full);
  background: var(--bg-elev-2); color: var(--tx-3);
  font-size: 11px; font-weight: 700;
}
.vb-zz:hover, .vb-pz:hover, .vb-dz:hover, .vb-bm:hover, .vb-bk:hover {
  border-color: var(--bdr-3); color: var(--tx-1);
}
.vb-zz--an, .vb-pz--an, .vb-dz--an, .vb-bm--an, .vb-bk--an {
  border-color: var(--acc-1); background: var(--acc-1-soft); color: var(--tx-1);
}
.vb-bk--neu { border-style: dashed; }

.vb-opt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px; align-items: center;
}
.vb-opt-n { font-size: 12px; color: var(--tx-2); }
.vb-opt-z { font-size: 11px; color: var(--tx-3); }
.vb-labels { display: grid; gap: 4px; }
.vb-labels label { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; align-items: center; }

/* Ein Hinweis, der eine Entscheidung begruendet — nicht dekorativ.
   Er steht bei den Bildern, weil „verwiesen statt eingebettet" sonst
   wie eine willkuerliche Einschraenkung wirkt. */
.vb-warn {
  margin: 0; padding: 8px 10px;
  border-left: 2px solid var(--acc-1);
  border-radius: var(--r-xs);
  background: var(--acc-1-soft);
  font-size: 11px; line-height: 1.45; color: var(--tx-2);
}

/* ═══ Kopfleiste, Status, Probelauf, Liste ═══════════════════════════
   Diese vier Stücke fehlten in der ersten Umsetzung ganz. Ohne sie gab
   es keinen Ansichtswechsel, keine Aussage darüber, ob sich ein
   Baustein füllt, und keinen Weg zu den anderen Vorlagen — der Editor
   war eine Sackgasse mit einer Ansicht.
   ═══════════════════════════════════════════════════════════════════ */

.v-marke-pille {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-full); border: 1px solid var(--bdr-2);
  font-size: 11px; font-weight: 700; color: var(--tx-2); white-space: nowrap;
}
.v-marke-pille i { width: 9px; height: 9px; border-radius: var(--r-full); }
/* Eine abweichende Marke wird MARKIERT. Gewollt bei Vereins- und
   Partnerberichten — sonst ein Fehler, den niemand bemerkt. */
.v-marke-pille--eigen { border-style: dashed; border-color: var(--acc-1); }

.v-kontingent { font-size: 11px; color: var(--tx-3); }
.v-kontingent--voll { color: var(--st-warning); }
.v-limit { font-size: 11px; color: var(--tx-3); display: inline-flex; align-items: center; gap: 6px; }

/* ── Status: gefüllt · leer · gebrochen ─────────────────────────────
   „Leer" und „gebrochen" sind NICHT dasselbe, und die Farben sagen das:
   leer ist ein Datenstand, gebrochen ein Defekt, der bliebe. */
.vb-st {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto; padding: 2px 8px;
  border-radius: var(--r-full); font-size: 10px; font-weight: 700;
}
.vb-st--gefuellt  { background: var(--st-success-soft); color: var(--st-success-ink); }
.vb-st--leer      { background: var(--bg-elev-3); color: var(--tx-3); }
.vb-st--gebrochen { background: var(--st-error-soft); color: var(--st-error-ink); }
.vb-st-txt { margin: 0; font-size: 11px; color: var(--tx-3); line-height: 1.45; }

.vb-sch-kopf { display: flex; align-items: center; gap: 8px; }

/* ── Arten mit Symbol und Farbstreifen ──────────────────────────── */
.vb-art {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px;
  align-items: start; text-align: left; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--bdr-2); border-radius: var(--r-m);
  background: var(--bg-elev-2); color: var(--tx-2);
  border-left-width: 3px;
}
.vb-art:hover { border-color: var(--bdr-3); }
.vb-art-ic { display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--r-xs); background: var(--bg-elev-3); color: var(--tx-2); }
.vb-art-t b { display: block; font-size: 13px; color: var(--tx-1); }
.vb-art-t span { display: block; font-size: 11px; color: var(--tx-3); line-height: 1.35; }
/* Der Farbstreifen trennt die Herkunft: Marke, Kontext, Wert, Text. */
.vb-art--marke   { border-left-color: var(--acc-3, var(--bdr-3)); }
.vb-art--kontext { border-left-color: var(--acc-2, var(--bdr-3)); }
.vb-art--wert    { border-left-color: var(--acc-1); }
.vb-art--rang    { border-left-color: var(--acc-4, var(--bdr-3)); }
.vb-art--text    { border-left-color: var(--acc-5, var(--bdr-3)); }
.vb-art--bild    { border-left-color: var(--bdr-3); }
.vb-art--layout  { border-left-color: var(--bdr-2); }

.vb-gl--aus { opacity: .5; }
.vb-gl--abw .vb-gl-n { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
/* „Ohne Daten" muss sich von der blossen Anzahl UNTERSCHEIDEN. Beide
   als graue Zahl nebeneinander las sich als „6 6" — man sah zwei
   Zahlen und wusste nicht, welche die Warnung ist. */
.vb-gl-pf {
  min-width: 18px; height: 18px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--st-warning-soft);
  border: 1px solid var(--acc-1-border, var(--bdr-3));
  font-size: 10px; font-weight: 700; color: var(--tx-1);
}
.vb-gl-z { opacity: .62; }

/* ── Probelauf ──────────────────────────────────────────────────── */
.v-urteil {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 12px 14px;
  border-radius: var(--r-m); border: 1px solid var(--bdr-2);
  font-size: 12px; line-height: 1.5; color: var(--tx-2);
}
.v-urteil--ok   { border-left: 3px solid var(--st-success); }
.v-urteil--warn { border-left: 3px solid var(--st-warning); }
.v-urteil--err  { border-left: 3px solid var(--st-error); }

.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--bdr-2); border-radius: var(--r-m); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabelle th {
  text-align: left; padding: 8px 12px; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-3); border-bottom: 1px solid var(--bdr-2);
}
.tabelle td { padding: 8px 12px; border-top: 1px solid var(--bdr-2); color: var(--tx-2); }
.tabelle .t-alt { color: var(--tx-3); white-space: nowrap; }
.tabelle .t-ber { color: var(--tx-1); font-weight: 700; }
.v-tart { font-weight: 400; font-size: 11px; color: var(--tx-3); }
.v-zelle {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-full);
  font-size: 10px; font-weight: 700;
}
.v-zelle--gefuellt  { background: var(--st-success-soft); color: var(--st-success-ink); }
.v-zelle--leer      { background: var(--bg-elev-3); color: var(--tx-3); }
.v-zelle--gebrochen { background: var(--st-error-soft); color: var(--st-error-ink); }

.bl-druck {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 0; padding: 12px 14px;
  border-radius: var(--r-m); border: 1px solid var(--bdr-2);
  font-size: 12px; line-height: 1.5; color: var(--tx-2);
}
.bl-druck--ok    { border-left: 3px solid var(--st-success); }
.bl-druck--err   { border-left: 3px solid var(--st-error); }
.bl-druck--pruef { border-left: 3px solid var(--bdr-3); color: var(--tx-3); }

/* ── Vorlagenliste ──────────────────────────────────────────────── */
.v-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.v-karte {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px;
  align-items: start; text-align: left; padding: 12px; cursor: pointer;
  border: 1px solid var(--bdr-2); border-radius: var(--r-l);
  background: var(--bg-elev-2); color: var(--tx-2);
}
.v-karte:hover { border-color: var(--bdr-3); }
.v-karte--an  { border-color: var(--acc-1); background: var(--acc-1-soft); }
.v-karte-marke { display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-m); background: var(--bg-elev-3); color: var(--tx-2); }
.v-karte-text { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.v-karte-text b { font-size: 14px; color: var(--tx-1); }
.v-karte-meta { font-size: 11px; color: var(--tx-3); }
.v-karte-rechts { display: grid; gap: 4px; justify-items: end; }
.v-gl-pf { font-size: 11px; color: var(--tx-3); }
.v-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--tx-3); }

/* ── Block-Picker mit Kartenzahl ─────────────────────────────────────
   Die Zahl steht am Knopf, nicht erst im Probelauf: wer einen Block
   waehlt, soll im selben Blick sehen, ob dieses Element dafuer ueber-
   haupt eine Karte hat. `--leer` heisst gerechnet und null — nicht
   „noch nicht gerechnet"; das unterscheidet der Titel am Knopf. */
.vb-pz { display: inline-flex; align-items: center; gap: 6px; }
.vb-pz-d { font-size: 10px; opacity: .7; }
.vb-pz--leer { opacity: .45; }
.vb-pz--leer.vb-pz--an { opacity: 1; }

/* ── Erzeugt-Vorschau ────────────────────────────────────────────────
   Ein Satz, der aus Daten entsteht, muss beim Einstellen sichtbar sein. */
.vb-erzeugt {
  display: grid; gap: 2px; margin-top: 8px; padding: 8px 10px;
  border-left: 2px solid var(--acc-1); border-radius: var(--r-2xs);
  background: var(--bg-elev-2);
}
.vb-erz-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-4);
}
.vb-erzeugt b { font-size: 12px; color: var(--tx-1); }
.vb-erzeugt span:last-child { font-size: 11px; color: var(--tx-3); }

/* ── Satz-Editor ─────────────────────────────────────────────────────
   Ein Satz ist eine Zeile aus Teilen. Faellt er im Bericht weg, ist das
   hier zu SEHEN — blass und beschriftet, nicht stillschweigend. */
.vb-saetze { display: grid; gap: 8px; }
.vb-satz {
  display: grid; gap: 4px 8px; align-items: start;
  grid-template-columns: auto 1fr auto;
  padding: 8px; border: 1px solid var(--bdr-1); border-radius: var(--r-s);
  background: var(--bg-elev-1);
}
.vb-satz--weg { opacity: .6; border-style: dashed; }
.vb-satz-nr { font-size: 11px; color: var(--tx-4); padding-top: 4px; }
.vb-satz-teile { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.vb-satz-akt { display: flex; gap: 4px; align-items: center; }
.vb-satz-weg {
  font-size: 10px; font-weight: 700; color: var(--st-warning-ink);
  text-transform: uppercase; letter-spacing: .06em;
}
.vb-satz-klar {
  grid-column: 2 / -1; font-size: 11px; color: var(--tx-3); line-height: 1.4;
}
/* `.wb .in` setzt volle Breite und hat zwei Klassen Spezifitaet — eine
   Regel mit nur einer Klasse verliert dagegen lautlos. Gemessen: das Feld
   stand 1498 px breit im Satz statt 140. */
.wb .vb-tw { width: 140px; min-width: 80px; }

/* Ein Teil traegt sein Etikett mit — man sieht im Satz, WAS dort steht,
   nicht nur, was heute herauskommt. */
.vb-tb {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px; border-radius: var(--r-xs);
  border: 1px solid var(--acc-1); background: var(--acc-1-soft);
  font-size: 11px; color: var(--tx-1);
}
.vb-tb i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--tx-4); }
.vb-tb--leer { border-color: var(--st-warning-border); background: var(--st-warning-soft); }
.vb-tx {
  border: 0; background: none; cursor: pointer; padding: 0 2px;
  font-size: 12px; color: var(--tx-4); line-height: 1;
}
.vb-tx:hover { color: var(--st-error-ink); }

/* ── Bausteinpalette ─────────────────────────────────────────────────
   Teile, die eine Faehigkeit benennen muessen, stehen JE Faehigkeit da.
   Ein Klick erzeugt damit immer einen vollstaendigen Teil — ein Verweis
   ins Leere ist baulich nicht herstellbar. */
.vb-platz {
  display: grid; gap: 6px; margin: 8px 0;
  padding: 10px; border: 1px dashed var(--bdr-2); border-radius: var(--r-s);
}
.vb-plz { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.vb-plz-l {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-4); margin-right: 4px;
}
.vb-pl {
  padding: 4px 8px; cursor: pointer; font-size: 11px;
  border: 1px solid var(--bdr-2); border-radius: var(--r-full);
  background: var(--bg-elev-2); color: var(--tx-2);
}
.vb-pl:hover { border-color: var(--acc-1); color: var(--tx-1); }

/* ── Aktionen der Vorlagenliste ──────────────────────────────────────
   Bis hierher sagte die Liste „Grenze erreicht — eine löschen" und bot
   keinen Weg dazu an. Die Funktionen lagen im Reiter-Modul und waren
   von hier aus nicht erreichbar. */
.v-liste-fuss { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--bdr-1); }
.v-aktion-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v-aktion-reihe .btn[disabled] { opacity: .45; cursor: not-allowed; }
.v-liste-fuss .hilfe { margin: 6px 0 0; }