@layer base {
/* ==========================================================================
   bwl.css — Bausteine, die nur in diesem Fach vorkommen.
   Alles Fachuebergreifende steht in assets/theme.css.

   Platzierungsregel, nach der hier entschieden wird: eine Datei unter
   assets/ darf kein Wort aus dem Vokabular EINES Fachs enthalten.
   .konto, .buchung, table.buchungen, .matrix bestehen diesen Test nicht —
   sie gehoeren hierher. table.werte besteht ihn und steht deshalb zentral.

   ---------------------------------------------------------------------
   SVG-Konvention (steht jetzt bei den Klassen in assets/theme.css)
   ---------------------------------------------------------------------
   1. viewBox="0 0 640 400", kein width/height-Attribut. Die Zeichenflaeche
      liegt zwischen x=64…616 und y=24…344; darunter bleibt Platz fuer die
      x-Achsenbeschriftung, links fuer die y-Achse.
   2. Die Grafik steht vollstaendig im Markup, auch das Endergebnis: der
      Loesungsweg ist offen, nichts wird eingeblendet. Hilfslinien, Zonen
      und Marken, die nur in einzelnen Schritten gebraucht werden, tragen
      .zusatz und werden von viz.js ueber .an sichtbar gemacht.
   3. Beschriftungen liegen in der Ebene .notizen und werden ebenso von
      viz.js je Schritt geschaltet.
   4. Farbe traegt nie allein die Aussage: im dunklen Theme ist --accent
      dieses Fachs byteweise identisch mit --plus. Zugang/Abgang und
      Gewinn/Verlust immer zusaetzlich ueber Vorzeichen, Position und
      Beschriftung kenntlich machen.

   Eine zweite Probeklausur braucht hier nichts Neues: blatt:2 in der
   meta.json erzeugt einen eigenen Abschnitt auf der Fachseite, und der
   Fortschrittsschluessel artefakt:<slug>:step ist pro Ordner eindeutig.
   ========================================================================== */

/* ---------- Diagramm ------------------------------------------------------
   Das Grundvokabular der Diagramme (.diagramm mit .achse, .raster, .kurve,
   .flaeche, .marke, .saeule, .notiz, .zusatz) steht seit ESTO Blatt 3 in
   assets/theme.css: es enthaelt kein Wort aus dem Vokabular eines einzelnen
   Fachs und wird jetzt von beiden Faechern gebraucht. Die SVG-Konvention im
   Kopf dieser Datei gilt unveraendert weiter.                              */

/* ---------- Entscheidungsmatrix (Aufgabe 24) -----------------------------
   Zeile = Handlungsalternative, Spalte = Umweltzustand. Die ganze Aufgabe
   besteht darin, dieselbe Tafel einmal zeilenweise und einmal spaltenweise
   zu lesen — deshalb koennen Zeilen und Spalten getrennt leuchten.        */
.matrix {
  display: grid;
  gap: 4px;
  min-width: 0;
  grid-template-columns: auto repeat(var(--spalten, 3), minmax(54px, 1fr)) auto;
}
.matrix .kopf {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  display: grid;
  place-items: center;
  padding-bottom: 2px;
}
.matrix .zeilenkopf {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--muted);
  display: grid;
  place-items: center;
  padding-right: 6px;
  font-weight: 600;
}
.matrixfeld {
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-s);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 8px 6px;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}
.matrixfeld .klein {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--f-body);
}
.matrixfeld.hoch {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.matrixfeld.tief {
  border-color: var(--rule);
  background: var(--surface);
  color: var(--muted);
}
.matrixfeld.raus {
  opacity: 0.3;
}
.matrixfeld.referenz {
  border-color: var(--minus);
  color: var(--minus);
  font-weight: 600;
}
.matrix.zeilenblick .matrixfeld:not(.hoch):not(.tief) {
  opacity: 0.35;
}
.matrix.spaltenblick .matrixfeld:not(.referenz) {
  opacity: 0.55;
}
/* Randspalte rechts: Ergebnis je Zeile, als Balken plus Zahl.             */
.randspalte {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  padding-left: 8px;
  min-width: 118px;
}
.randspalte .lauf {
  height: 10px;
  background: var(--rule-soft);
  border-radius: 3px;
  overflow: hidden;
}
.randspalte .lauf i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.randspalte .lauf.kurz-ist-gut i {
  background: var(--minus);
}
.randspalte .zahl {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.randspalte.sieger .zahl {
  color: var(--accent);
  font-weight: 700;
}
.randspalte.sieger .lauf i {
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.randspalte {
  transition: opacity 0.2s ease;
}
.randspalte.matt {
  opacity: 0.35;
}
/* Beschriftung "Zeilenmax/Zeilenmin" nur im Zeilenblick; visibility statt
   display, damit die Felder ihre Hoehe behalten.                          */
.matrixfeld .klein.zb {
  visibility: hidden;
}
.matrix.zeilenblick .matrixfeld .klein.zb {
  visibility: visible;
}
/* Spaltenkopf hervorheben (Aufgabe 24, Schritt 10: Spaltenmaxima).       */
.matrix .kopf {
  transition: color 0.2s ease;
}
.matrix .kopf.hoch {
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .matrixfeld,
  .matrix .kopf,
  .randspalte,
  .randspalte .lauf i {
    transition: none;
  }
}
@media (max-width: 560px) {
  .matrix {
    grid-template-columns: auto repeat(var(--spalten, 3), minmax(40px, 1fr));
  }
  .randspalte {
    grid-column: 1/-1;
    padding-left: 0;
  }
}

/* ---------- Gestapelte Nutzensaeulen (Aufgabe 27, Aufgabe 30) ------------
   Hoehe eines Segments = gewichteter Teilnutzen. Der Stapel ist damit
   selbst die Summe — man muss sie nicht danebenschreiben.                 */
.stapel-feld {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  min-height: 300px;
  padding-top: 18px;
}
.stapel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  height: 300px;
}
.stapel .summe {
  font-family: var(--f-mono);
  font-size: 13px;
  text-align: center;
  color: var(--ink);
  font-weight: 600;
  min-height: 18px;
  white-space: nowrap;
}
.stapelsaeule {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  border-bottom: 2px solid var(--rule);
}
.stapelseg {
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--surface);
  border-radius: 2px;
  overflow: hidden;
  min-height: 0;
  transition:
    height 0.4s ease,
    opacity 0.3s ease,
    filter 0.3s ease;
}
.stapelseg.k1 {
  background: color-mix(in srgb, var(--accent) 90%, var(--ink));
}
.stapelseg.k2 {
  background: color-mix(in srgb, var(--accent) 65%, var(--surface));
  color: var(--ink);
}
.stapelseg.k3 {
  background: color-mix(in srgb, var(--accent) 40%, var(--surface));
  color: var(--ink);
}
.stapelseg.k4 {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  color: var(--ink);
}
.stapelseg.matt {
  opacity: 0.25;
}
.stapel .fuss {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
}
.stapel.sieger .fuss {
  color: var(--accent);
  font-weight: 600;
}
.stapel.matt {
  opacity: 0.45;
}

/* Gewichtungsband: eine Zeile, deren Abschnittsbreiten die Gewichte sind. */
.gewichtsband {
  display: flex;
  height: 26px;
  border-radius: var(--r-s);
  overflow: hidden;
  border: 1px solid var(--rule-soft);
}
.gewichtsband > * {
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition:
    flex-grow 0.4s ease,
    opacity 0.3s ease;
}
/* viz.js nimmt die Kriterien zurueck, die im Schritt nicht gemeint sind. */
.gewichtsband > .matt {
  opacity: 0.3;
}
/* Der dunkelste Abschnitt braucht helle Schrift — wie .stapelseg.k1 es
   bereits loest.                                                          */
.gewichtsband .kl.k1 {
  color: var(--surface);
}
.gewichtsband-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
}
.gewichtsband-legende .kl {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -2px;
}
.kl.k1 {
  background: color-mix(in srgb, var(--accent) 90%, var(--ink));
}
.kl.k2 {
  background: color-mix(in srgb, var(--accent) 65%, var(--surface));
}
.kl.k3 {
  background: color-mix(in srgb, var(--accent) 40%, var(--surface));
}
.kl.k4 {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
}
@media (prefers-reduced-motion: reduce) {
  .stapelseg,
  .gewichtsband > * {
    transition: none;
  }
}
@media (max-width: 560px) {
  .stapel-feld {
    gap: 10px;
  }
  .stapel,
  .stapel-feld {
    height: auto;
    min-height: 240px;
  }
}

/* ---------- T-Konto (Aufgabe 28) -----------------------------------------
   Rahmen und Mittelstrich liegen auf --rule, nur die Abschlusslinie auf
   --ink: der Prototyp nutzte durchgehend --ink und war erkennbar nur fuer
   das helle Theme entworfen — im dunklen ergab das ein grelles Kreuz.     */
.konto {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-m);
  padding: 10px 12px 12px;
  min-width: 0;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
/* viz.js betont ganze Konten (.an) und nimmt die uebrigen zurueck (.matt) */
.konto.an {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.konto.matt {
  opacity: 0.45;
}
/* Mehrere Konten nebeneinander, schmaler als .grid-t, damit eine Grafik
   mit sechs oder sieben Konten noch in wenige Reihen passt. */
.konten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 12px;
  align-items: start;
}
.bild .konto-fuss.bild-hinweis {
  margin-top: 10px;
}
.konto-kopf {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--rule);
}
.konto-kopf span {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.konto-kopf span:last-child {
  text-align: right;
}
.konto-kopf strong {
  font-family: var(--f-display);
  font-size: 15.5px;
  font-weight: 700;
  text-align: center;
}
.konto-koerper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.konto-seite {
  display: grid;
  align-content: start;
  min-width: 0;
}
.konto-seite.soll {
  border-right: 2px solid var(--rule);
  padding-right: 8px;
}
.konto-seite.haben {
  padding-left: 8px;
}
.konto-fuss {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.buchung {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 6px;
  min-height: 30px;
  align-items: center;
  border-bottom: 1px dotted var(--rule-soft);
  font-size: 13px;
  padding: 3px 2px;
  min-width: 0;
}
.buchung .lbl {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.buchung .amt {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  white-space: nowrap;
}
.buchung.leer {
  border-bottom-color: transparent;
}
.buchung.abschluss {
  border-bottom: 3px double var(--ink);
  border-top: 1px solid var(--ink);
  font-weight: 600;
  margin-top: 2px;
}
.buchung.abschluss .lbl {
  color: var(--ink);
}
/* Die Zeile, um die es gerade geht: statisch im Schritt oder per viz.js */
.buchung.an {
  background: var(--accent-soft);
}
.buchung.an .lbl {
  color: var(--ink);
  font-weight: 600;
}

/* Buchungssatz als eigene Zeile in einem Schritt */
.bsatz {
  font-size: 15px;
}
.bsatz .bindewort {
  color: var(--muted);
  margin: 0 6px;
}

/* ---------- Buchungssatztabelle (Aufgabe 28) -----------------------------
   tr.an / tr.matt setzt viz.js auf den aktuellen Buchungssatz.            */
table.buchungen {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 14px;
}
table.buchungen th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: left;
  padding: 10px 10px 6px;
  border-bottom: 1px solid var(--rule);
}
table.buchungen th.r {
  text-align: right;
}
table.buchungen td {
  padding: 7px 10px;
  border-bottom: 1px dotted var(--rule-soft);
  height: 36px;
}
table.buchungen td.r {
  text-align: right;
}
table.buchungen tr.gruppe td {
  font-weight: 700;
  font-family: var(--f-display);
  font-size: 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule-soft);
  height: auto;
  padding: 6px 10px;
}
table.buchungen td.nr {
  color: var(--muted);
  width: 44px;
  font-family: var(--f-mono);
  font-size: 12.5px;
}
table.buchungen td.bindewort {
  color: var(--muted);
  width: 40px;
  text-align: center;
}
table.buchungen td.amt {
  font-family: var(--f-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.buchungen tr.an td {
  background: var(--accent-soft);
  font-weight: 600;
}
table.buchungen tr.matt td {
  opacity: 0.45;
}
@media (prefers-reduced-motion: no-preference) {
  .konto,
  table.buchungen td,
  .buchung {
    transition:
      opacity 0.2s ease,
      background 0.2s ease,
      border-color 0.2s,
      box-shadow 0.2s;
  }
}

/* ---------- ABC-Klassen (Aufgabe 30) -------------------------------------
   Ein Band je Klasse, Breite = Mengenanteil, Fuellung = Wertanteil. Damit
   steht die Kernaussage der Analyse als Bild da: wenige Positionen, viel
   Wert.                                                                   */
.abc-klassen {
  display: flex;
  gap: 6px;
  align-items: stretch;
  min-height: 120px;
}
.abc-klasse {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
}
.abc-klasse .kopf {
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  font-family: var(--f-display);
}
.abc-klasse .koerper {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--surface-2);
  overflow: hidden;
}
.abc-klasse .koerper i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: var(--accent);
  opacity: 0.75;
  transition: height 0.4s ease;
}
.abc-klasse .fuss {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
}
.abc-klasse.a .koerper i {
  background: color-mix(in srgb, var(--accent) 90%, var(--ink));
}
.abc-klasse.b .koerper i {
  background: color-mix(in srgb, var(--accent) 60%, var(--surface));
}
.abc-klasse.c .koerper i {
  background: color-mix(in srgb, var(--accent) 30%, var(--surface));
}
.abc-klasse.matt {
  opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
  .abc-klasse .koerper i {
    transition: none;
  }
}

/* Konzentrationskurve: klebt als .bild ueber den Schritten zur
   Klassenbildung. Begrenzte Hoehe, damit Grafik und Schritt zusammen ins
   Fenster passen; Punkte nicht betonter Kurvenstuecke treten zurueck.     */
.diagramm.abc-kurve {
  max-height: 360px;
}
.abc-kurve .marke.matt {
  opacity: 0.3;
}

/* Loesungsschema: die Klasse steht zusammengefasst ueber ihre Zeilen, eine
   kraeftigere Linie trennt die Klassen.                                   */
table.abc-schema td.klasse {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  border-left: 1px solid var(--rule-soft);
}
table.abc-schema tr.grenze td {
  border-bottom: 2px solid var(--rule);
}

/* ---------- A01–A03: Gliederung der speziellen BWL ---------------------
   Ein Baum aus Kaesten, gleich in allen drei Artefakten: oben die BWL,
   darunter allgemeine und spezielle BWL, in der speziellen BWL die drei
   Gliederungsarten als Spalten (Funktionen, Wirtschaftszweige,
   Betriebsgroessen). .eigen markiert fest die Spalte der eigenen Aufgabe.
   viz.js betont Kaesten und Listeneintraege mit .hebe und nimmt den Rest
   mit .matt zurueck. Die Spaltenzahl richtet sich nach der Breite der
   Karte (container query), nicht nach dem Fenster: neben dem Panel ist
   die Karte oft schmaler, als die Fensterbreite vermuten laesst.         */
.gliederung {
  container-type: inline-size;
  display: grid;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}
.gliederung [data-teil] {
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}
.gliederung .matt {
  opacity: 0.35;
}
.gl-wurzel {
  text-align: center;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--surface-2);
}
.gl-wurzel b {
  font-family: var(--f-display);
  font-size: 14.5px;
}
.gl-wurzel span {
  color: var(--muted);
  font-size: 12px;
  margin-left: 6px;
}
.gl-ebene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.gl-ast {
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-m);
  padding: 8px 10px;
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}
.gl-titel {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
}
.gl-sub {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.gl-gruppen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
.gl-gruppe {
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-s);
  padding: 6px 7px;
  background: var(--surface-2);
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
}
.gl-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 6px;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
}
.gl-nr {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
/* .eigen nur ueber die Beschriftung, nicht ueber den Rahmen: Rahmen und
   Flaeche in Akzentfarbe bedeuten allein .hebe ("gerade gemeint").       */
.gl-gruppe.eigen .gl-nr {
  color: var(--accent);
  font-weight: 700;
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 0 6px;
}
.gl-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.gl-liste li {
  padding: 1px 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  line-height: 1.3;
  hyphens: auto;
  overflow-wrap: break-word;
}
.gl-liste li small {
  color: var(--muted);
  font-size: 11px;
}
.gl-liste li.etc {
  color: var(--muted);
  font-style: italic;
}
.gliederung .hebe {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.gl-liste li.hebe {
  font-weight: 600;
}
.gl-hinweis {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}
@container (min-width:470px) {
  .gl-gruppen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container (min-width:720px) {
  .gl-ebene {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gliederung [data-teil] {
    transition: none;
  }
}

/* ---------- A06/A18: Zuordnungstabelle (Homo oeconomicus, vollk. Markt) ----
   table.werte als Grafik in .bild: je Zeile ein Baustein der Antwort.
   viz.js betont die gemeinte Zeile (.hebe) und nimmt die uebrigen zurueck
   (.matt). Kompakt gesetzt, damit die Tabelle mit ihrem Schritt ins Fenster
   passt. td.gruppe ueberspannt mehrere Zeilen (rowspan) und bleibt mit .an
   deutlich, solange eine ihrer Zeilen gemeint ist.                        */
table.zuordnung {
  font-size: 12.5px;
  line-height: 1.35;
}
table.zuordnung th {
  padding: 6px 8px 5px;
  font-size: 10.5px;
}
table.zuordnung td {
  padding: 4px 8px;
  vertical-align: top;
}
table.zuordnung td.gruppe {
  font-weight: 700;
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
table.zuordnung .nr {
  display: inline-block;
  min-width: 1.5em;
  font-family: var(--f-mono);
  font-weight: 600;
  color: var(--accent);
}
table.zuordnung tr[data-teil] td {
  transition:
    opacity 0.25s ease,
    background-color 0.25s ease;
}
table.zuordnung tr.matt td {
  opacity: 0.35;
}
table.zuordnung tr.hebe td {
  background: var(--accent-soft);
}
table.zuordnung tr.hebe td.gruppe {
  background: none;
}
table.zuordnung td.gruppe.an,
table.zuordnung tr.matt td.gruppe.an {
  opacity: 1;
  color: var(--accent);
}
table.zuordnung tr.fuss td {
  border-top: 2px solid var(--rule);
  border-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  table.zuordnung tr[data-teil] td {
    transition: none;
  }
}

/* ---------- A04: Aufgaben der BWL ----------------------------------------
   Kastenschaubild (.kb), nachgebaut aus Abbildung 9 der Musterloesung.
   Das Grundvokabular .kb-* nutzen auch A05 (Baum) und A07 (Oekonomik und
   Oekonomie). Jeder Teil mit [data-teil] kann von viz.js betont (.hebe),
   als Teil eines Weges markiert (.pfad) oder zurueckgenommen (.matt)
   werden. Die Container-Abfragen richten sich nach der Breite der Karte,
   nicht des Fensters: neben dem Panel ist sie oft schmaler, als die
   Fensterbreite vermuten laesst.                                          */
.kb {
  container-type: inline-size;
  min-width: 0;
}
.kb-kasten {
  border: 1.5px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--surface);
  padding: 6px 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
  hyphens: auto;
  overflow-wrap: break-word;
  min-width: 0;
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}
.kb-kasten.stark {
  border-width: 2px;
  border-color: var(--muted);
}
.kb-kasten .klein {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.kb-balken {
  display: block;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--surface-2);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  hyphens: auto;
  overflow-wrap: break-word;
  min-width: 0;
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}
.kb-pfeil {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  transition:
    opacity 0.25s ease,
    color 0.25s ease;
}
.kb-wort {
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 700;
  transition:
    opacity 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}
.kb [data-teil].hebe {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}
.kb .kb-pfeil.hebe {
  color: var(--accent);
  background: none;
  box-shadow: none;
}
.kb [data-teil].pfad {
  border-color: var(--accent);
}
.kb [data-teil].matt {
  opacity: 0.35;
}
.kb-hinweis {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  .kb-kasten,
  .kb-balken,
  .kb-pfeil,
  .kb-wort {
    transition: none;
  }
}

/* Anordnung von Abbildung 9: oben drei Kaesten mit den Balken "deskriptiv"
   (unter zwei Kaesten) und "explikativ" (unter allen drei), in der Mitte
   die Gestaltung mit ihren zwei Zufluessen, unten die Regel fuer alles.   */
.a04 {
  display: grid;
  gap: 6px;
}
.a04-oben {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.a04-oben .b2 {
  grid-column: 1/3;
}
.a04-oben .b3 {
  grid-column: 1/4;
}
.a04-mitte {
  display: grid;
  align-items: center;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr) auto minmax(0, 1fr);
}
.a04-mitte .kb-balken {
  margin-top: 5px;
}
@container (max-width:460px) {
  .a04 .kb-kasten {
    font-size: 11.5px;
    padding: 5px 5px;
  }
  .a04 .kb-balken {
    font-size: 11px;
    padding: 3px 4px;
  }
}

/* ---------- A10: externe Effekte -----------------------------------------
   Balkenvergleich private/soziale Kosten im SVG (.diagramm.effekte). Jeder
   Balken samt Beschriftung ist eine Gruppe g[data-teil]; viz.js nimmt die
   im Schritt nicht gemeinten Gruppen mit .matt zurueck.                   */
.diagramm.effekte g[data-teil] {
  transition: opacity 0.25s ease;
}
.diagramm.effekte g[data-teil].matt {
  opacity: 0.25;
}
@media (prefers-reduced-motion: reduce) {
  .diagramm.effekte g[data-teil] {
    transition: none;
  }
}

/* ---------- A23: oeffentliche Gueter und Kollektivgueter -----------------
   Vierfeldertafel: Zeilen = Rivalitaet ja/nein, Spalten = Ausschluss
   moeglich/nicht moeglich, darunter die Klammer fuer das Gemeinsame der
   unteren Zeile. viz.js setzt .hebe auf die gemeinten Felder und Koepfe
   und .matt auf die uebrigen. .ergaenzung (gestrichelt) markiert das Feld,
   das nicht zu Bardmanns Definitionen gehoert.                           */
.gueterfeld {
  display: grid;
  grid-template-columns: auto repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
.gueterfeld [data-teil] {
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}
.gueterfeld .kopf,
.gueterfeld .zeilenkopf {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: var(--r-s);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--muted);
  hyphens: auto;
  overflow-wrap: break-word;
  min-width: 0;
}
.gueterfeld .kopf {
  text-align: center;
}
.gueterfeld .zeilenkopf {
  max-width: 132px;
}
.gueterfeld small {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
}
.gueterfeld .gut {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 9px 11px;
  min-width: 0;
  border: 1.5px solid var(--rule-soft);
  border-radius: var(--r-m);
  background: var(--surface-2);
  font-size: 12.5px;
  line-height: 1.35;
  hyphens: auto;
  overflow-wrap: break-word;
}
.gueterfeld .gut b {
  font-family: var(--f-display);
  font-size: 14.5px;
}
.gueterfeld .gut span {
  color: var(--muted);
  font-size: 12px;
}
.gueterfeld .gut.ergaenzung {
  border-style: dashed;
  background: var(--surface);
}
.gueterfeld .klammer {
  grid-column: 2/-1;
  border-top: 2px solid var(--rule);
  padding-top: 5px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.gueterfeld .gut.hebe {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.gueterfeld .gut.hebe b {
  color: var(--accent);
}
.gueterfeld .kopf.hebe,
.gueterfeld .zeilenkopf.hebe {
  color: var(--accent);
  background: var(--accent-soft);
}
.gueterfeld .klammer.hebe {
  border-top-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.gueterfeld .matt {
  opacity: 0.35;
}
@media (max-width: 560px) {
  .gueterfeld {
    gap: 4px;
  }
  .gueterfeld .zeilenkopf {
    max-width: 96px;
    padding: 4px 4px;
    font-size: 11.5px;
  }
  .gueterfeld .gut {
    padding: 7px 7px;
  }
  .gueterfeld .gut b {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gueterfeld [data-teil] {
    transition: none;
  }
}

/* ---------- A08: Produktionsfaktoren nach Gutenberg ----------------------
   Das Schema der Musterloesung als Tabelle mit colspan/rowspan: zehn
   Spalten, darueber die Oberbegriffe, darunter eine kursive Beispielzeile
   und die Fusszeile originaer/derivativ. .trenn ist der dicke Strich
   zwischen Elementarfaktoren und dispositiven Faktoren. viz.js setzt
   .hebe auf die gemeinten Zellen und .matt auf die uebrigen. Unter 600px
   scrollt die Tabelle in ihrem .tablewrap, nicht die Seite.
   .schema-hinweis (Satz unter der Grafik) nutzt auch A09.                 */
table.gutenberg {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12.5px;
  line-height: 1.25;
  text-align: center;
  hyphens: manual;
}
table.gutenberg th,
table.gutenberg td {
  border: 1px solid var(--rule);
  padding: 6px 3px;
  vertical-align: middle;
  overflow-wrap: break-word;
  transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}
table.gutenberg th {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--ink);
}
table.gutenberg td {
  background: var(--surface);
}
table.gutenberg th.schema-titel {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
}
table.gutenberg .trenn {
  border-left: 3px solid var(--muted);
}
table.gutenberg tr.bsp td {
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
  padding: 4px 3px;
}
table.gutenberg tr.fuss td {
  background: var(--surface-2);
  font-weight: 600;
}
table.gutenberg .hebe {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
table.gutenberg tr.bsp td.hebe {
  font-weight: 600;
}
table.gutenberg .matt {
  opacity: 0.35;
}
.schema-hinweis {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  table.gutenberg th,
  table.gutenberg td {
    transition: none;
  }
}

/* ---------- A09: volkswirtschaftliche Produktionsfaktoren ----------------
   Vier Karten (Arbeit, Boden, Kapital, technologischer Fortschritt) nach
   dem Bild der Musterloesung, darunter zwei Leisten: "Arbeit + Boden ->
   Kapital" und der Konflikt. .ergaenzung (gestrichelt) markiert, was nur
   im Bild und nicht im Text der Musterloesung steht. Jede Karte traegt
   ihre Einordnung (originaer/derivativ) als Marke, damit das auch auf
   schmalen Schirmen neben der Karte bleibt.                              */
.vwl-faktoren {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  min-width: 0;
}
.vwl-karte {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 5px;
  min-width: 0;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-m);
  background: var(--surface);
  padding: 9px 10px;
  font-size: 12.5px;
  line-height: 1.35;
  hyphens: auto;
  overflow-wrap: break-word;
}
.vwl-karte p {
  margin: 0;
}
.vwl-kopf {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.2;
}
.vwl-beiname {
  color: var(--muted);
  font-size: 11.5px;
}
.vwl-bsp {
  color: var(--muted);
  font-style: italic;
}
.vwl-art {
  justify-self: start;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 8px;
  border-radius: 20px;
  border: 1px solid var(--rule);
  color: var(--muted);
}
.vwl-art.abgeleitet {
  border-style: dashed;
}
.vwl-fluss {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 6px 10px;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-m);
  font-size: 13px;
  text-align: center;
}
.vwl-zeichen {
  color: var(--muted);
  font-weight: 700;
}
.vwl-karte.ergaenzung,
.vwl-fluss.ergaenzung {
  border-style: dashed;
  background: var(--surface-2);
}
.vwl-fluss.ergaenzung {
  font-size: 12.5px;
  color: var(--muted);
}
.vwl-karte,
.vwl-fluss {
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}
.vwl-karte.hebe,
.vwl-fluss.hebe {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.vwl-karte.hebe .vwl-kopf,
.vwl-fluss.hebe b {
  color: var(--accent);
}
.vwl-karte.matt,
.vwl-fluss.matt {
  opacity: 0.35;
}
@media (prefers-reduced-motion: reduce) {
  .vwl-karte,
  .vwl-fluss {
    transition: none;
  }
}

/* ---------- A15–A17: Güter, Wirtschaftsgüter, Systematisierung ----------
   Drei aufeinander aufbauende Grafiken mit gemeinsamen Kaesten:
   A15 Kette Beduerfnis -> Gut -> Nutzen und drei Taetigkeiten,
   A16 Pruefmatrix (nutzt .matrix aus A24, hier nur Schrift und Hinweis),
   A17 Schaubild der Musterloesung: Kopfkaesten, darunter im gepunkteten
   Rahmen sechs Zeilen Kriterium -> Auspraegungen. In Zeile 4 zeigen
   .gb-ast-Linien nach oben zu Inputguetern bzw. Konsumguetern.
   .hebe/.matt auf Kaesten und Zeilen, .an auf einzelnen Auspraegungen.   */
.gueterbild {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.gb-kasten {
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--surface-2);
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}
.gb-kasten b {
  font-family: var(--f-display);
  font-weight: 700;
}
.gb-klein {
  font-size: 12px;
  color: var(--muted);
}
.gb-kasten.hebe {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.gb-kasten.hebe b {
  color: var(--accent);
}
.gb-kasten.matt {
  opacity: 0.35;
}
.gb-kopf {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.gb-hinweis {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* A15: Kette in einer Reihe, darunter drei gleich breite Kaesten.        */
.gb-fluss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
}
.gb-pfeil {
  color: var(--muted);
  font-size: 18px;
  align-self: center;
}
.gb-drei {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* A16: Zeilenkoepfe und Randspalte der Matrix sind Woerter, keine Zahlen. */
.gb-pruef .zeilenkopf {
  font-family: var(--f-body);
  font-size: 13px;
  place-items: center start;
  hyphens: auto;
  overflow-wrap: break-word;
  max-width: 9.5rem;
}
.gb-pruef .randspalte .zahl {
  font-family: var(--f-body);
  font-size: 13px;
}

/* A17: Kopf mit drei Kaesten, der mittlere gepunktet wie der Rahmen darunter */
.gb-oben {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}
.gb-kasten.gb-haupt {
  display: block;
  border: 2px dotted var(--rule);
}
.gb-kasten.gb-haupt.hebe {
  border-color: var(--accent);
}
.gb-rahmen {
  border: 2px dotted var(--rule);
  border-radius: var(--r-m);
  padding: 6px 8px;
  display: grid;
  min-width: 0;
}
.gb-zeile {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 5px 4px;
  border-top: 1px dotted var(--rule);
  border-radius: var(--r-s);
  min-width: 0;
  transition:
    opacity 0.25s ease,
    background 0.25s ease;
}
.gb-kopf + .gb-zeile {
  border-top: 0;
}
.gb-krit {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  hyphens: auto;
  overflow-wrap: break-word;
}
.gb-krit::after {
  content: " →";
  color: var(--muted);
}
.gb-zeile.hebe {
  background: var(--accent-soft);
}
.gb-zeile.hebe .gb-krit {
  color: var(--accent);
}
.gb-zeile.matt {
  opacity: 0.35;
}
.gb-auspr {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.gb-auspr.gb-zwei {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}
.gb-glied {
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--surface);
  padding: 2px 7px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.gb-glied .gb-glied {
  padding: 0 6px;
  margin-top: 2px;
}
.gb-glied.an {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  font-weight: 600;
}
/* Zeile 4: Querstrich ueber der Gruppe, Stiel nach oben zur Zeile 3.    */
.gb-ast {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1.5px solid var(--rule);
  transition: border-color 0.25s ease;
}
.gb-ast::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  height: 16px;
  border-left: 1.5px solid var(--rule);
  transition: border-color 0.25s ease;
}
.gb-herkunft {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--muted);
}
.gb-ast.an {
  border-top-color: var(--accent);
}
.gb-ast.an::before {
  border-left-color: var(--accent);
}
.gb-ast.an .gb-herkunft {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 560px) {
  .gb-fluss {
    grid-template-columns: minmax(0, 1fr);
  }
  .gb-pfeil {
    justify-self: center;
    transform: rotate(90deg);
  }
  .gb-drei {
    grid-template-columns: minmax(0, 1fr);
  }
  .gb-oben {
    grid-template-columns: minmax(0, 1fr);
  }
  .gb-zeile {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .gb-krit::after {
    content: "";
  }
}
@media (prefers-reduced-motion: reduce) {
  .gb-kasten,
  .gb-zeile,
  .gb-glied,
  .gb-ast,
  .gb-ast::before {
    transition: none;
  }
}

/* ---------- A05: Wissenschaftssystem --------------------------------------
   Abbildung 10 als Baum aus .kb-Kaesten (Vokabular siehe A04). Schmal oder
   ohne Container-Abfragen: eingerueckte Liste (e1…e4 = Ebene), die
   Reihenfolge per order so, dass jeder Ast unter seinem Elternkasten steht.
   Ab 640px Kartenbreite: Baum von oben nach unten wie in der Abbildung, auf
   einem Raster aus zehn gleich breiten Spalten. Weil die Spalten gleich
   breit sind, liegen die Kastenmitten bei festen Prozentwerten; die
   Verbindungslinien sind deshalb schmale SVG-Streifen mit viewBox
   0 0 100 18, die mit der Breite gestreckt werden.                        */
.baum {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.baum-linien {
  display: none;
}
.baum-linien path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.baum > .kb-kasten {
  position: relative;
  text-align: left;
}
.baum .e2 {
  margin-left: 16px;
}
.baum .e3 {
  margin-left: 32px;
}
.baum .e4 {
  margin-left: 48px;
}
.baum .e2::before,
.baum .e3::before,
.baum .e4::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 13px;
  width: 10px;
  border-top: 1.5px solid var(--muted);
}
.baum .b-wiss {
  order: 1;
}
.baum .b-ideal {
  order: 2;
}
.baum .b-real {
  order: 3;
}
.baum .b-sozial {
  order: 4;
}
.baum .e4 {
  order: 5;
}
.baum .b-natur {
  order: 6;
}
.baum .kb-wort {
  display: block;
  width: fit-content;
}
@container (min-width:640px) {
  .baum {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0;
  }
  .baum-linien {
    display: block;
    grid-column: 1/-1;
    width: 100%;
    height: 18px;
  }
  .baum > .kb-kasten {
    margin: 0 3px;
    text-align: center;
    display: grid;
    align-content: center;
  }
  .baum .e2::before,
  .baum .e3::before,
  .baum .e4::before {
    display: none;
  }
  .baum .kb-wort {
    margin-inline: auto;
  }
  .baum .b-wiss {
    grid-area: 1/4/2/8;
  }
  .baum .l1 {
    grid-row: 2;
  }
  .baum .b-ideal {
    grid-area: 3/1/4/6;
  }
  .baum .b-real {
    grid-area: 3/6/4/11;
  }
  .baum .l2 {
    grid-row: 4;
  }
  .baum .b-sozial {
    grid-area: 5/1/6/7;
  }
  .baum .b-natur {
    grid-area: 5/7/6/11;
  }
  .baum .l3 {
    grid-row: 6;
  }
  .baum .b-z1 {
    grid-area: 7/1/8/3;
  }
  .baum .b-z2 {
    grid-area: 7/3/8/5;
  }
  .baum .b-z3 {
    grid-area: 7/5/8/7;
  }
  .baum .b-z4 {
    grid-area: 7/7/8/9;
  }
  .baum .b-z5 {
    grid-area: 7/9/8/11;
  }
}

/* ---------- A21: Reinvermögen ---------------------------------------------
   Zwei Saeulen mit Beschriftung in den Flaechen. .diagramm text ist --muted
   und auf der gruenen Eigenkapital-Saeule zu blass, deshalb eigene Schrift in
   --ink. viz.js setzt .matt auf ganze Gruppen [data-teil] (Flaeche + Text). */
.diagramm .saeulen-text {
  fill: var(--ink);
  font-size: 11px;
}
.diagramm .saeulen-text.fett {
  font-weight: 600;
}
.reinvermoegen g[data-teil]:not(.zusatz) {
  transition: opacity 0.3s ease;
}
.reinvermoegen g[data-teil].matt {
  opacity: 0.3;
}
@media (prefers-reduced-motion: reduce) {
  .reinvermoegen g[data-teil] {
    transition: none;
  }
}

/* ---------- A22: Unternehmen nach Bardmann --------------------------------
   Drei Stromarten, die sich nie nur ueber die Farbe unterscheiden:
   Geld durchgezogen, Gueter und Dienste gestrichelt, Irritationen und
   Mitteilungen gepunktet mit offener Spitze. Die Musterloesung zeichnet die
   Gueter blau; das Fach hat kein blaues Token, deshalb hier --ink.
   Jede Sphaere ist in der Farbe der Stroeme getoent, die an ihr enden.     */
.bardmann .sphaere rect {
  stroke: var(--ink);
  stroke-width: 1;
  transition:
    stroke 0.25s ease,
    stroke-width 0.25s ease;
}
.bardmann .sphaere.steuerung rect {
  fill: color-mix(in srgb, var(--plus) 16%, var(--surface));
}
.bardmann .sphaere.nominal rect {
  fill: color-mix(in srgb, var(--minus) 12%, var(--surface));
}
.bardmann .sphaere.real rect {
  fill: color-mix(in srgb, var(--ink) 8%, var(--surface));
}
.bardmann .sphaere text {
  fill: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}
.bardmann .sphaere.hebe rect {
  stroke: var(--accent);
  stroke-width: 3;
}
.bardmann .rahmen {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.bardmann .partner rect {
  fill: var(--surface-2);
  stroke: var(--rule);
  stroke-width: 1.5;
  transition:
    stroke 0.25s ease,
    stroke-width 0.25s ease;
}
.bardmann .partner text {
  fill: var(--ink);
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
}
.bardmann .partner.hebe rect {
  stroke: var(--accent);
  stroke-width: 3;
}
.bardmann .strom path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: round;
  transition: stroke-width 0.25s ease;
}
.bardmann .strom.geld path {
  stroke: var(--minus);
}
.bardmann .strom.gueter path {
  stroke: var(--ink);
  stroke-dasharray: 7 4;
}
.bardmann .strom.info path {
  stroke: var(--plus);
  stroke-dasharray: 0.5 4;
  stroke-linecap: round;
  stroke-width: 2.2;
}
.bardmann .strom.hebe path {
  stroke-width: 3;
}
.bardmann .strom.info.hebe path {
  stroke-width: 3.2;
}
.bardmann .strom text {
  font-size: 10.5px;
}
.bardmann .strom.geld text {
  fill: var(--minus);
}
.bardmann .strom.gueter text {
  fill: var(--ink);
}
.bardmann .strom.info text {
  fill: var(--plus);
}
.bardmann .spitze.geld {
  fill: var(--minus);
}
.bardmann .spitze.gueter {
  fill: var(--ink);
}
.bardmann .spitze.info {
  fill: none;
  stroke: var(--plus);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bardmann .partner,
.bardmann .strom {
  transition: opacity 0.3s ease;
}
.bardmann .matt {
  opacity: 0.15;
}
/* Legende unter dem Schaubild: kleine Linienmuster, dieselben Klassen.    */
.bardmann-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
}
.bardmann-legende span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bardmann-legende svg {
  width: 40px;
  height: 10px;
  flex: none;
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  .bardmann .sphaere rect,
  .bardmann .partner rect,
  .bardmann .strom path,
  .bardmann .partner,
  .bardmann .strom {
    transition: none;
  }
}

/* ---------- A11–A13: Unternehmensziel, Gewinnarten, Rentabilitaet ---------
   Alle drei bauen auf dem Kastenvokabular .kb/.kb-kasten aus A04 auf
   (Betonen mit .hebe/.matt kommt von dort). Hier steht nur, was dazukommt:
   A11 Zielbaum mit Ebenen, Zeitstrahl und Warnkasten; A12 Kartenraster
   mit Art-Marke, Betragsbalken und Betrag; A13 zwei Streifen (Kapital,
   Gewinn) aus .gewichtsband und zwei Brueche.                             */
.zielbaum,
.gewinnarten {
  display: grid;
  gap: 6px;
}
.zielbaum .kb-kasten b,
.gewinnarten .kb-kasten b {
  font-family: var(--f-display);
  font-size: 13.5px;
  line-height: 1.2;
}
.zb-ebene {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.zb-name,
.bk-art {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.zb-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 6px;
}
.zielbaum .kb-pfeil.zb-dient {
  font-size: 11.5px;
}
.kb-kasten.warnung {
  border-style: dashed;
  border-color: var(--minus);
}
.kb-kasten.warnung b {
  color: var(--minus);
}
.kb [data-teil].warnung.hebe {
  border-color: var(--minus);
  box-shadow: 0 0 0 1px var(--minus);
  background: color-mix(in srgb, var(--minus) 10%, var(--surface));
}
/* Zeitstrahl ohne Ende: letzter Abschnitt gestrichelt */
.zeitstrahl {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 2px 4px;
  border-radius: var(--r-s);
  font-size: 11.5px;
  color: var(--muted);
  transition:
    opacity 0.25s ease,
    color 0.25s ease;
}
.zeitstrahl span {
  white-space: nowrap;
}
.zeitstrahl i {
  flex: 1 1 0;
  min-width: 10px;
  border-top: 2px solid var(--rule);
}
.zeitstrahl i:last-of-type {
  border-top-style: dashed;
}
.zeitstrahl.hebe {
  color: var(--accent);
}
.zeitstrahl.hebe i {
  border-top-color: var(--accent);
}

.gewinnarten {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
}
.gewinnarten .kb-kasten {
  display: grid;
  gap: 3px;
  align-content: start;
  text-align: left;
}
.bk-lauf {
  display: block;
  height: 8px;
  background: var(--rule-soft);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 3px;
}
.bk-lauf i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.bk-zahl {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.rentabel {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.rb-zeile {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.rb-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.rentabel > .gewichtsband-legende {
  margin-top: 0;
}
/* Beschriftung darf umbrechen, damit "Fremdkapital 150.000 €" auch schmal passt */
.rentabel .gewichtsband {
  height: auto;
  min-height: 26px;
}
.rentabel .gewichtsband > * {
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  padding: 3px 4px;
  transition:
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}
.rentabel .gewichtsband > .hebe {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.rb-brueche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 8px;
}
.rb-brueche .kb-kasten {
  display: grid;
  gap: 4px;
  justify-items: center;
}
.rb-bruch {
  display: inline-grid;
  justify-items: center;
  font-size: 12px;
  line-height: 1.25;
}
.rb-bruch > span {
  padding: 2px 8px;
}
.rb-bruch > span:first-child {
  border-bottom: 2px solid var(--ink);
}
.rb-bruch b {
  font-family: var(--f-mono);
  font-size: 12.5px;
}
@media (prefers-reduced-motion: reduce) {
  .zeitstrahl,
  .rentabel .gewichtsband > * {
    transition: none;
  }
}

/* ---------- A07: Oekonomik und Oekonomie ---------------------------------
   Abbildung 12 aus .kb-Kaesten (Vokabular siehe A04). Oben links die zwei
   Bausteine, eine Klammer (.oek-klammer, nur Rahmenlinie) fasst sie zur
   Oekonomie zusammen; darunter die Oekonomik in derselben rechten Spalte,
   darunter ihre Hauptgebiete als Tafel (3 Aufgaben x 2 Sichten). Felder
   und Koepfe der Tafel sind selbst [data-teil] und werden wie die Kaesten
   betont (.hebe) oder zurueckgenommen (.matt).                            */
.oek {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.oek-real,
.oek-forsch {
  display: grid;
  gap: 6px;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 16px minmax(96px, 0.5fr);
}
.oek-real {
  align-items: stretch;
}
.oek-forsch {
  align-items: center;
}
.oek-liste {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.oek-und {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.oek .kb-kasten {
  text-align: left;
}
.oek .kb-kasten.stark {
  text-align: center;
}
.oek-klammer {
  border: 2px solid var(--muted);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  margin-block: 8px;
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease;
}
.kb .oek-klammer.hebe {
  border-color: var(--accent);
  background: none;
  box-shadow: none;
}
.oek-ziel {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}
.oek-notiz {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
  border-radius: var(--r-s);
  padding: 3px 4px;
  hyphens: auto;
  overflow-wrap: break-word;
  transition:
    opacity 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}
.oek-notiz b {
  color: var(--ink);
}
table.oek-tafel {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 12.5px;
  line-height: 1.3;
}
table.oek-tafel th,
table.oek-tafel td {
  border: 1.5px solid var(--rule);
  border-radius: var(--r-s);
  padding: 5px 7px;
  vertical-align: middle;
  background: var(--surface);
  hyphens: auto;
  overflow-wrap: break-word;
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}
table.oek-tafel thead th {
  background: var(--surface-2);
  font-weight: 700;
  text-align: center;
}
table.oek-tafel thead th:first-child {
  width: 27%;
  border-color: transparent;
  background: none;
}
table.oek-tafel tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--muted);
  border-color: transparent;
  background: none;
}
table.oek-tafel .klein {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--muted);
}
@container (max-width:460px) {
  table.oek-tafel {
    font-size: 11.5px;
    border-spacing: 3px;
  }
  table.oek-tafel th,
  table.oek-tafel td {
    padding: 4px 5px;
  }
  .oek-real,
  .oek-forsch {
    grid-template-columns: minmax(0, 1fr) 14px minmax(84px, 0.5fr);
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .oek-klammer,
  .oek-notiz,
  table.oek-tafel th,
  table.oek-tafel td {
    transition: none;
  }
}

/* ---------- A14: Marktformen --------------------------------------------
   Marktformenschema 3x3: Spalten = Anbieter, Zeilen = Nachfrager, oben
   links die beschriftete Ecke. viz.js setzt .an auf das gemeinte Feld und
   die zugehoerigen Koepfe [data-teil] und nimmt den Rest mit .matt
   zurueck. .mf-frage unterstreicht Beispiele, deren Zuordnung im Text
   erklaert wird (gepunktet, nicht nur farbig).                           */
.mf-tafel {
  display: grid;
  grid-template-columns: minmax(58px, 0.7fr) repeat(3, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.3;
  hyphens: auto;
  overflow-wrap: break-word;
}
.mf-ecke {
  display: grid;
  align-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
.mf-ecke .mf-an {
  text-align: right;
}
.mf-kopf {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6px 4px;
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-s);
}
/* Koepfe nur an Leerzeichen bzw. am weichen Trennstrich in „mittel&shy;große“
   umbrechen, sonst wird auf dem Handy „klei-ne“ getrennt.                 */
.mf-ecke,
.mf-kopf {
  hyphens: manual;
}
.mf-kopf.mf-zeile {
  place-items: center start;
  text-align: left;
}
.mf-feld {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 7px 8px;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-s);
}
.mf-feld b {
  font-family: var(--f-display);
  font-size: 13px;
  line-height: 1.2;
}
.mf-feld span {
  color: var(--muted);
  font-size: 12px;
}
.mf-feld i {
  font-style: normal;
}
.mf-frage {
  text-decoration: underline dotted var(--minus);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.mf-tafel [data-teil] {
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}
.mf-tafel .an {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.mf-tafel .an b {
  color: var(--accent);
}
.mf-tafel .matt {
  opacity: 0.35;
}
@media (prefers-reduced-motion: reduce) {
  .mf-tafel [data-teil] {
    transition: none;
  }
}
@media (max-width: 560px) {
  .mf-tafel {
    gap: 3px;
    font-size: 11px;
  }
  .mf-feld {
    padding: 5px 5px;
  }
  .mf-feld b {
    font-size: 11.5px;
  }
  .mf-feld span,
  .mf-kopf {
    font-size: 10.5px;
  }
  .mf-ecke {
    font-size: 9.5px;
    padding: 2px 3px;
    text-transform: none;
    letter-spacing: 0;
  }
}

/* ---------- A19/A20: Preis-Absatz-Funktion, Triffin-Saeulen --------------
   In beiden SVGs stehen Abschnittsnamen, Achsbeschriftungen und
   Saeulenbeschriftungen immer da (keine .notiz). viz.js betont sie mit .an
   oder nimmt sie mit .matt zurueck; dasselbe fuer Punkte (.marke).
   .paf-linie ist die Preis-Absatz-Funktion selbst: auch unbetont kraeftig,
   damit sie sich von den gestrichelten Hilfslinien abhebt.               */
.paf text[data-teil],
.triffin text[data-teil] {
  transition:
    opacity 0.25s ease,
    fill 0.25s ease;
}
.paf text[data-teil].an,
.triffin text[data-teil].an {
  fill: var(--accent);
  font-weight: 600;
}
.paf text[data-teil].matt,
.triffin text[data-teil].matt {
  opacity: 0.35;
}
.paf .marke.matt,
.triffin .marke.matt {
  opacity: 0.3;
}
.paf .kurve.paf-linie {
  stroke: var(--ink);
  stroke-width: 2.25;
}
.paf .kurve.paf-linie.an {
  stroke: var(--accent);
  stroke-width: 2.75;
}
.paf .kurve.hilfe.an {
  stroke-width: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .paf text[data-teil],
  .triffin text[data-teil] {
    transition: none;
  }
}

}