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

/* ---------- Urne: eine Lieferung als Kacheln ----------------------------- */
.urne {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kachel {
  width: 30px;
  height: 30px;
  border-radius: var(--r-s);
  border: 1px solid var(--rule);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}
.kachel.gut,
.kachel.pos {
  background: color-mix(in srgb, var(--plus) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--plus) 40%, var(--rule));
  color: var(--plus);
}
.kachel.defekt,
.kachel.neg {
  background: color-mix(in srgb, var(--minus) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--minus) 40%, var(--rule));
  color: var(--minus);
}
.kachel.gezogen {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--ink);
}
.urne.auswahl .kachel:not(.gezogen) {
  opacity: 0.3;
}
.urne-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
}
.urne-legende b {
  font-weight: 600;
}
.punkt {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: baseline;
}
.punkt.gut,
.punkt.pos {
  background: var(--plus);
}
.punkt.defekt,
.punkt.neg {
  background: var(--minus);
}
.punkt.neutral {
  background: var(--muted);
}
.punkt.akzent {
  background: var(--accent);
}
.punkt.hell {
  background: var(--rule);
}

/* ---------- Balken mit gestrichelter 90-%-Marke --------------------------
   table.werte selbst steht seit dem zweiten Fach in assets/theme.css — sie
   enthaelt kein Wort aus dem Vokabular eines einzelnen Fachs.             */
.kbar {
  position: relative;
  height: 12px;
  background: var(--rule-soft);
  border-radius: 3px;
  min-width: 110px;
}
.kbar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.35s ease;
}
.kbar.ueber i {
  background: var(--plus);
}
.schwelle {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 0;
  border-left: 2px dashed var(--minus);
}
.schwelle span {
  position: absolute;
  top: -16px;
  left: 3px;
  font-size: 10px;
  color: var(--minus);
  font-family: var(--f-mono);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .kbar i {
    transition: none;
  }
  .kachel {
    transition: none;
  }
}

/* ---------- Kachelgroessen ------------------------------------------------
   Grossen Urnen (50 Lose) fehlt sonst der Platz.                           */
.urne.klein {
  gap: 4px;
}
.urne.klein .kachel {
  width: 22px;
  height: 22px;
  font-size: 9.5px;
  border-radius: 4px;
}
.kachel.entfernt {
  opacity: 0.28;
}
.kachel.entfernt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent 46%,
    currentColor 46%,
    currentColor 54%,
    transparent 54%
  );
}
.kachel {
  position: relative;
}

/* ---------- Ergebnisgitter: zwei Wuerfel als 6x6 Tafel -------------------
   Ein Ereignis ist zu jedem Zeitpunkt gefuellt, die Bedingung liegt als
   Ring darueber. Der Schnitt ergibt sich dadurch von selbst.               */
.gitter {
  display: grid;
  grid-template-columns: auto repeat(6, minmax(0, 1fr));
  gap: 3px;
  max-width: 440px;
}
.gitter .lab {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
  display: grid;
  place-items: center;
  min-width: 18px;
}
.zelle {
  aspect-ratio: 1;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--muted);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.zelle.ereignis {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.zelle.bedingung {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.zelle.schnitt {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
/* .schnitt ist die staerkste Auszeichnung und darf nicht zurueckgenommen
   werden — dieselbe Ausnahme wie bei .zellen.auswahl weiter unten. */
.gitter.auswahl .zelle:not(.ereignis):not(.bedingung):not(.schnitt) {
  opacity: 0.38;
}
.gitter-legende,
.zellen-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px;
}
.gitter-legende .kl,
.zellen-legende .kl {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 1px solid var(--rule);
}
.gitter-legende .kl.e,
.zellen-legende .kl.e {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.gitter-legende .kl.b,
.zellen-legende .kl.b {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.gitter-legende .kl.s,
.zellen-legende .kl.s {
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- Ergebniswoerter: Folgen wie JJMJ ----------------------------- */
.woerter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wort {
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  padding: 5px 9px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--muted);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}
.wort.passt {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.wort.treffer {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
  font-weight: 600;
}
.wort.aus {
  opacity: 0.26;
}

/* ---------- Mosaik: Flaeche = Wahrscheinlichkeit -------------------------
   Breite einer Spalte = P(Aᵢ), Hoehe des Bandes = P(F | Aᵢ).
   Die eingefaerbte Flaeche ist damit genau P(F ∩ Aᵢ) — das macht den Satz
   der totalen Wahrscheinlichkeit und die Bayes-Formel sichtbar.            */
.mosaik {
  display: flex;
  gap: 6px;
  min-height: 340px;
  align-items: stretch;
}
.msp {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
}
.mkopf,
.mfuss {
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.mkopf b {
  color: var(--ink);
  font-size: 13px;
  font-family: var(--f-mono);
}
.mfuss .q {
  font-family: var(--f-mono);
  color: var(--minus);
  font-weight: 600;
}
.mflaeche {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  overflow: hidden;
  background: color-mix(in srgb, var(--plus) 18%, var(--surface));
}
.mflaeche i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: color-mix(in srgb, var(--minus) 42%, var(--surface));
  border-top: 2px solid var(--minus);
  transition: height 0.4s ease;
}
.msp.matt {
  opacity: 0.45;
}
.msp.hebe .mflaeche {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
}
/* Beschriftung direkt ueber der Bandkante: bei 1 % waere das Band sonst
   zu duenn, um den Flaechenwert ablesen zu koennen. */
.mflaeche .mwert {
  position: absolute;
  right: 5px;
  margin-bottom: 3px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--minus);
  white-space: nowrap;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    bottom 0.4s ease;
}
.mflaeche .mwert.an {
  opacity: 1;
}
@media (max-width: 560px) {
  .mosaik {
    min-height: 250px;
  }
  .mkopf,
  .mfuss {
    font-size: 10.5px;
  }
}
.mosaik-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .mflaeche i {
    transition: none;
  }
  .zelle,
  .wort {
    transition: none;
  }
}

/* ---------- Zahlenreihe: ein endlicher Ergebnisraum als Kaestchen ---------
   Dieselben Zustaende wie beim 6x6-Gitter: .ereignis fuellt die Flaeche,
   .bedingung legt einen Ring darueber, .schnitt faerbt voll. Damit sieht
   ein Ergebnisraum aus zehn Zahlen genauso aus wie einer aus 36 Wuerfen.  */
.zellen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.zellen .zelle {
  width: 44px;
  font-size: 14px;
}
.zellen.klein .zelle {
  width: 34px;
  font-size: 12px;
}
.zellen.auswahl .zelle:not(.ereignis):not(.bedingung):not(.schnitt) {
  opacity: 0.35;
}

/* ---------- Venn-Diagramm ------------------------------------------------
   Zwei Kreise in einem Kasten fuer Omega. Jede der vier Teilflaechen liegt
   als eigene Form im Markup (siehe index.html) und laesst sich einzeln
   einfaerben — viz.js schaltet nur .an bzw. .doppelt. Umrisse und
   Beschriftungen liegen darueber und bleiben immer sichtbar.
   Die Masken brauchen je Diagramm eigene ids, sonst greift auf einer Seite
   mit zwei Diagrammen die Maske des ersten.                               */
.venn {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.vflaeche {
  fill: transparent;
  transition: fill 0.25s ease;
}
.vflaeche.an {
  fill: var(--accent-soft);
}
.vflaeche.doppelt {
  fill: color-mix(in srgb, var(--minus) 20%, var(--surface));
}
.vrahmen {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1.5;
}
.vkreis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.vname {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  fill: var(--ink);
}
.vomega {
  font-family: var(--f-mono);
  font-size: 14px;
  fill: var(--muted);
}
.vel {
  font-family: var(--f-mono);
  font-size: 15px;
  fill: var(--ink);
  transition: opacity 0.25s ease;
}
.vel.matt {
  opacity: 0.22;
}
.vzahl {
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 600;
  fill: var(--muted);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.vzahl.an {
  opacity: 1;
  fill: var(--ink);
}
.vzahl.warn {
  fill: var(--minus);
}
.venn-titel {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 6px;
}
.venn-titel b {
  color: var(--ink);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .vflaeche,
  .vel,
  .vzahl {
    transition: none;
  }
}

/* ---------- Stapel: Anteile als ein einziger Balken ----------------------
   Breite eines Abschnitts = sein Anteil am Ganzen. Die gestrichelte Marke
   steht fuer das volle Mass, also die Wahrscheinlichkeit 1. Abschnitte
   duerfen bewusst darueber hinausragen — genau daran sieht man, dass eine
   Zuordnung keine Wahrscheinlichkeitsfunktion ist.                        */
/* Ohne Luecke, damit die Abschnitte zusammen genau 100 % ergeben — sonst
   ragte schon eine gueltige Verteilung ueber die Marke hinaus. */
.stapel {
  position: relative;
  display: flex;
  height: 40px;
  margin: 14px 0 0;
}
.stapel .ab + .ab {
  margin-left: -1px;
}
.stapel .ab {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-s);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  transition:
    opacity 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}
.stapel .ab.an {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.stapel .ab.matt {
  opacity: 0.3;
}
.stapel .ab.fehler {
  background: color-mix(in srgb, var(--minus) 18%, var(--surface));
  border-color: var(--minus);
  color: var(--minus);
  font-weight: 600;
}
.stapel-marke {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 0;
  border-left: 2px dashed var(--minus);
}
.stapel-marke span {
  position: absolute;
  top: -16px;
  left: 4px;
  font-size: 10px;
  color: var(--minus);
  font-family: var(--f-mono);
  white-space: nowrap;
}
.stapel-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .stapel .ab {
    transition: none;
  }
}

/* ---------- Stapel: negativer Abschnitt, der zuruecknimmt ----------------
   Ein negativer Wert laesst sich nicht als Laenge nach rechts zeichnen. Er
   liegt deshalb schraffiert UEBER dem Ende des vorigen Abschnitts und zeigt,
   welches Stueck er wieder abzieht. Position und Breite stehen inline.     */
.stapel .ab.zurueck {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-left: 0;
  overflow: visible;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--minus) 45%, transparent) 0 3px,
    transparent 3px 6px
  );
  border: 2px solid var(--minus);
}
.stapel .ab.zurueck span {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  font-size: 11px;
  color: var(--minus);
  white-space: nowrap;
}
.stapel:has(.ab.zurueck) + .stapel-legende {
  margin-top: 24px;
}

/* ---------- R-Befehle (Blatt 3) ------------------------------------------
   Die Musterloesungen dieses Fachs rechnen mit R. Die Befehle stehen im
   Artefakt als Ergaenzung neben der Rechnung von Hand, nie an ihrer Stelle:
   erst die Formel, dann der Befehl, der dasselbe tut. .aus ist die Zeile,
   die R zurueckgibt.                                                       */
.rcode {
  display: grid;
  gap: 1px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.5;
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-m);
  padding: 10px 12px;
  overflow-x: auto;
  white-space: pre;
  color: var(--ink);
  margin: 0;
}
.rcode .aus {
  color: var(--muted);
}
.rcode .aus b {
  color: var(--accent);
  font-weight: 600;
}
.g-body .rcode {
  font-size: 11.5px;
  padding: 8px 10px;
}

/* ---------- Treppenfunktion: offener und geschlossener Randpunkt ---------
   An einer Sprungstelle gehoert nur der obere Punkt zur Funktion. Das darf
   nicht an der Farbe haengen: gefuellt heisst „Wert wird angenommen", leer
   heisst „Wert wird nicht angenommen". Die Form traegt die Aussage.        */
.diagramm .marke.zu {
  fill: var(--accent);
  stroke: var(--accent);
}
.diagramm .marke.leer {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-dasharray: none;
}

}