/* Die Figur selbst steht in vasco-figur.css — sie wird auch
   ausserhalb des Editors gebraucht. */

/* ══════════════════════════════════════════════════════════════
   Vasco im Gespräch
   ══════════════════════════════════════════════════════════════ */
.gespraech{ display:flex; gap:1.15rem; align-items:flex-start; margin-bottom:1.75rem }
.avatar{
  flex:none; width:3.6rem; height:3.6rem;
  border-radius:50%; background:var(--bg-alt);
  padding:.42rem; margin-top:.1rem;
}
.avatar.gross{ width:5.2rem; height:5.2rem; padding:.6rem }

.blase{
  position:relative; flex:1; min-width:0;
  background:var(--bg-alt); border-radius:var(--r) 12px 12px 12px;
  padding:1rem 1.25rem; font-size:1.02rem; line-height:1.55;
}
.blase::before{
  content:''; position:absolute; left:-6px; top:0;
  width:0; height:0; border-top:8px solid var(--bg-alt);
  border-left:8px solid transparent;
}
.blase p{ margin:0 0 .7rem }
.blase p:last-child{ margin-bottom:0 }
.blase b{ font-weight:500 }
.blase .leise{ color:var(--ink-mid); font-size:.94rem }

/* Tippende Punkte */
.tippt{ display:inline-flex; gap:.28rem; padding:.2rem 0 }
.tippt i{
  width:.42rem; height:.42rem; border-radius:50%; background:var(--ink-soft);
  animation:v-tippt 1.25s ease-in-out infinite;
}
.tippt i:nth-child(2){ animation-delay:.16s }
.tippt i:nth-child(3){ animation-delay:.32s }
@keyframes v-tippt{
  0%,60%,100%{ opacity:.28; transform:translateY(0) }
  30%        { opacity:1;   transform:translateY(-3px) }
}

/* Vorschlag zum Bestätigen oder Überarbeiten */
.vorschlag{
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:1.1rem 1.25rem; margin-top:.9rem;
  animation:rein .3s ease-out;
}
.vorschlag h4{
  font-size:.76rem; font-weight:500;  
  color:var(--ink-soft); margin:0 0 .8rem;
}
.vorschlag .zeile{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem 0; border-top:1px solid var(--line-soft); font-size:.95rem;
}
.vorschlag .zeile:first-of-type{ border-top:0 }
.vorschlag .zeile .marke{
  flex:none; font-size:.7rem; font-weight:500; letter-spacing:.05em;
  color:var(--ink-soft);  min-width:5.5rem;
}
.vorschlag .zeile b{ font-weight:500 }
.vorschlag .zeile small{ margin-left:auto; color:var(--ink-soft) }

/* Nachfrage-Karte: Vasco vermutet einen Zusammenhang */
.nachfrage{
  border:1px solid var(--line); border-left:3px solid var(--ink);
  border-radius:var(--r) 12px 12px var(--r); background:#fff;
  padding:.95rem 1.15rem; margin-top:1rem;
  animation:rein .3s ease-out;
}
.nachfrage p{ margin:0 0 .8rem; font-size:.96rem; line-height:1.5 }
.nachfrage .knopfzeile{ margin-top:0 }

/* ══════════════════════════════════════════════════════════════
   Vasco frei auf der Bühne
   ══════════════════════════════════════════════════════════════ */
.vasco-frei{
  position:fixed; left:0; top:0; z-index:60;
  pointer-events:auto; cursor:pointer;
  will-change:transform;
}
/* Ein leiser Ring zeigt: man kann ihn anklicken */
.vasco-frei::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(29,29,31,.18); transition:box-shadow .2s;
  pointer-events:none;
}
.vasco-frei:hover::after{ box-shadow:0 0 0 4px rgba(29,29,31,.12) }
.vasco-frei .vasco{ width:100%; height:100% }

/* Rede — kein Kasten, nur Text neben ihm */
.rede{
  position:fixed; z-index:59; max-width:min(30rem, 46vw);
  font-size:1.22rem; line-height:1.5; letter-spacing:-.012em;
  color:var(--ink); pointer-events:none;
  opacity:0; transition:opacity .3s;
}
.rede.sichtbar{ opacity:1 }

/* Der Strich von Vascos Kinn zum Text.

   Ohne ihn stehen Figur und Schrift wie zwei Dinge nebeneinander,
   die nichts miteinander zu tun haben. Ein Strich genuegt — eine
   Sprechblase mit Zipfel waere Zeichentrick, und das ist dies hier
   nicht. */
.rede-stiel{
  position:fixed; z-index:58; width:1px;
  background:var(--line-strong);
  opacity:0; transition:opacity .2s;
  pointer-events:none;
}
.rede-stiel.sichtbar{ opacity:1 }
.rede.links{ text-align:right }
.rede p{ margin:0 0 .55rem }
.rede p:last-child{ margin-bottom:0 }
/* Kein Grau: was Vasco sagt, ist gleich wichtig. Gehört etwas
   auseinander, sagt er es nacheinander statt leiser. */
.rede p.leise{ color:var(--ink) }
.rede b{ font-weight:500 }
/* Schreibmarke, solange getippt wird */
.rede p::after{
  content:'';display:inline-block;width:2px;height:1.05em;
  background:var(--ink);margin-left:2px;vertical-align:-.15em;
  animation:v-marke 1s steps(1) infinite;
}
.rede p.fertig::after{ display:none }
@keyframes v-marke{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* Skizzenebene */
.skizze{
  position:fixed; left:0; top:0; z-index:58;
  pointer-events:none; overflow:visible;
}
.skizze .strich{
  fill:none; stroke:var(--ink); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.85;
}

/* Was Vasco gerade gezeichnet hat, taucht darin auf */
/* Ohne backwards: laeuft die Animation nicht — gedrosselter Tab,
   reduzierte Bewegung —, ist das Element trotzdem sichtbar.
   Sichtbarkeit darf nie von einer Animation abhaengen. */
/* Die Einblendung fasst opacity nicht an. Friert die Animation ein —
   gedrosselter Tab, reduzierte Bewegung —, bliebe das Element sonst
   dauerhaft unsichtbar. Sichtbarkeit darf nie an einer Animation
   haengen; bewegen darf sie sich. */
.taucht-auf{ animation:v-auftauchen .34s ease-out }
@keyframes v-auftauchen{
  from{ transform:translateY(4px) }
  to  { transform:none }
}

/* Die Bühne selbst bleibt leer, bis Vasco etwas hinstellt */
.leer .karte > *{ display:none }

/* Während der Eröffnung ist die Seite blank */
body.bloss .seite{ display:none }
body.bloss .buehne{ grid-template-columns:1fr }
body.bloss .pfad,
body.bloss .serie{ opacity:0; pointer-events:none; transition:opacity .4s }
/* Vascos Karte steht mittig — aber nur, solange sie hineinpasst.

   Hier stand justify-content:center. Wird der Inhalt hoeher als das
   Fenster, schiebt das zentrierte Ausrichten den oberen Teil aus dem
   Rollbereich heraus: er ist da, aber nicht erreichbar. Genau das
   passierte nach dem Durchrechnen — der Kartenkopf lag oberhalb von
   Null und liess sich nicht herunterholen.

   safe center faellt bei Ueberlauf auf oben zurueck. Das Polster oben
   haelt die Karte ausserdem unter dem Schrittkopf. */
body.bloss .mitte{
  padding-top:0;
  justify-content:safe center;
  min-height:0;
}
body.bloss .frage-nr{ display:none }

/* Etwas Luft über den Feldern, damit Vasco dort Platz hat */
body.bloss .karte{ padding-top:5.5rem }

/* ══════════════════════════════════════════════════════════════
   Stift, Drehung und Gestik
   ══════════════════════════════════════════════════════════════ */

/* Der Stift ist nur da, wenn Vasco zeichnet */
.vasco .v-zwinge{ fill:#fff }

/* Beim Schreiben greift der rechte Arm nach unten zum Blatt */
.vasco.v-schreibt .v-arm-r{ transform:rotate(24deg) }
.vasco.v-schreibt .v-arm-l{ transform:rotate(-9deg) }
.vasco.v-schreibt .v-arm{ transition:transform .3s ease-out }
.vasco.v-schreibt .v-all{ animation:none }
.vasco.v-schreibt .v-auge{ transform:scaleY(.7) }   /* konzentriert */

/* Umdrehen: er wendet sich der Linie zu */
.vasco{ transition:transform .34s cubic-bezier(.4,0,.2,1) }
.vasco.v-gedreht{ transform:scaleX(-1) }

/* ── Sprechen: die Hände artikulieren mit ───────────────────── */
.vasco.v-spricht .v-arm-l{ animation:v-gestik-l 1.7s ease-in-out infinite }
.vasco.v-spricht .v-arm-r{ animation:v-gestik-r 1.7s ease-in-out infinite }
.vasco.v-spricht .v-kinn{ animation:v-mund 340ms ease-in-out infinite }
/* Beim Sprechen begleiten die Haende, sie fuchteln nicht. */
@keyframes v-gestik-l{
  0%,100%{ transform:rotate(0) }
  30%    { transform:rotate(-5.5deg) }
  64%    { transform:rotate(2deg) }
}
@keyframes v-gestik-r{
  0%,100%{ transform:rotate(0) }
  40%    { transform:rotate(11deg) }
  74%    { transform:rotate(-7deg) }
}
@keyframes v-mund{
  0%,100%{ transform:scaleY(1) }
  50%    { transform:scaleY(1.32) }
}
.vasco.v-spricht .v-arm{ transform-origin:inherit }

@media(prefers-reduced-motion:reduce){
  .vasco{ transition:none }
  .vasco.v-schreibt .v-stift{ opacity:1 }
}

/* ══════════════════════════════════════════════════════════════
   Leerlauf — Langeweile, Nicken, Fußball
   ══════════════════════════════════════════════════════════════ */

/* Langeweile: hängt durch, Blick wandert, Zahnrad wird träge */
.vasco.v-langweilt .v-all{ animation:v-haengt 3.4s ease-in-out infinite }
@keyframes v-haengt{
  0%,100%{ transform:translateY(0) rotate(0) }
  30%    { transform:translateY(3px) rotate(-4deg) }
  65%    { transform:translateY(4px) rotate(3deg) }
}
.vasco.v-langweilt .v-augen{ animation:v-schweift 4.2s ease-in-out infinite }
@keyframes v-schweift{
  0%,100%{ transform:translateX(0) }
  25%    { transform:translateX(-2.2px) }
  60%    { transform:translateX(2.4px) }
}
.vasco.v-langweilt .v-auge{ transform:scaleY(.72) }
.vasco.v-langweilt .v-zahnrad{ animation:v-drehen 60s linear infinite }
.vasco.v-langweilt .v-arm-l{ animation:v-baumeln 3.4s ease-in-out infinite }
.vasco.v-langweilt .v-arm-r{ animation:v-baumeln 3.4s ease-in-out infinite reverse }
@keyframes v-baumeln{
  0%,100%{ transform:rotate(6deg) }
  50%    { transform:rotate(-6deg) }
}

/* Nicken: zustimmend, zweimal */
.vasco.v-nickt .v-all{ animation:v-nicken .46s ease-in-out 2 }
@keyframes v-nicken{
  0%,100%{ transform:translateY(0) rotate(0) }
  50%    { transform:translateY(4px) rotate(7deg) }
}

/* Ausholen zum Schuss */
.vasco.v-schiesst .v-all{ animation:v-ausholen .3s ease-out }
@keyframes v-ausholen{
  0%  { transform:rotate(0) }
  60% { transform:rotate(-13deg) translateX(-4px) }
  100%{ transform:rotate(4deg) }
}

/* Der Ball */
.v-ball{
  position:fixed; left:0; top:0; z-index:57;
  width:18px; height:18px; border-radius:50%;
  background:var(--ink);
  pointer-events:none;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.v-ball::after{
  content:''; position:absolute; inset:4px;
  border-radius:50%; border:1px solid #fff; opacity:.55;
}

@media(prefers-reduced-motion:reduce){
  .v-ball{ display:none }
}

/* Wurfbewegung */
.vasco.v-wirft .v-all{ animation:v-schleudern .21s ease-out }
@keyframes v-schleudern{
  0%  { transform:rotate(0) }
  45% { transform:rotate(-15deg) translateX(-5px) }
  100%{ transform:rotate(9deg) translateX(3px) }
}
.vasco.v-wirft .v-arm-r{ transform:rotate(-42deg); transition:transform .2s }

/* Der Projektname steht in der Kopfleiste — gleiche Schrift wie überall */
.projekt{
  flex:none; max-width:34vw;
  font-size:.95rem; font-weight:500; letter-spacing:-.01em;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transition:opacity .3s;
}
.projekt.sichtbar{ opacity:1 }
.projekt::before{
  content:''; display:inline-block;
  width:1px; height:1.05em; background:var(--line);
  margin:0 .85rem 0 .1rem; vertical-align:-.18em;
}
@media(max-width:720px){
  .projekt{ max-width:38vw; font-size:.88rem }
  .projekt::before{ margin:0 .55rem 0 0 }
}

/* Basketball */
.v-ball.korbball{
  width:22px; height:22px;
  background:var(--ink);
}
.v-ball.korbball::after{
  content:''; position:absolute; inset:2px;
  border-radius:50%; border:1px solid #fff; opacity:.6;
  border-left-color:transparent; border-right-color:transparent;
}

/* Der geworfene Zettel */
.wurf-zettel{
  position:fixed; z-index:59; left:0; top:0;
  padding:.55rem .95rem; border-radius:var(--r);
  background:var(--ink); color:#fff;
  font-size:.95rem; font-weight:500; white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  pointer-events:none; will-change:transform;
}

/* Die Stückliste — angedockt, nicht schwebend

   Sie war eine gerundete Karte mit Schatten, die neben der Arbeit
   in der Luft hing. Wer den ganzen Tag Warenwirtschaft bedient,
   erwartet ein Fach: buendig am Rand, vom Kopf bis zum Boden, mit
   Spaltenkopf und Rasterzeilen. */
.stueckliste{
  position:fixed; z-index:56;
  right:11.5rem; top:3.5rem; bottom:0;
  width:23rem; height:auto;
  display:flex; flex-direction:column;
  background:#fff;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  opacity:0; transition:opacity .3s;
}
.stueckliste.sichtbar{ opacity:1 }

/* Der Fachname */
.stueckliste h3{
  flex:none; margin:0; height:2.5rem;
  display:flex; align-items:center; padding:0 .75rem;
  border-bottom:1px solid var(--line);
  font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mid);
  text-align:left;
}
/* Der Spaltenkopf */
.stl-kopf{
  flex:none; display:grid; align-items:center;
  grid-template-columns:1.75rem 1fr auto 2.75rem;
  gap:.5rem; height:1.5rem; padding:0 .75rem;
  background:var(--bg-alt);
  border-bottom:1px solid var(--line-strong);
  font-size:11px; font-weight:500; color:var(--ink-mid);
}
.stl-kopf span:nth-child(3){ text-align:right }

.stueckliste ol{
  list-style:none; margin:0; padding:0; overflow-y:auto; flex:1;
}
.stueckliste li{
  display:grid; align-items:center;
  grid-template-columns:1.75rem 1fr auto 2.75rem;
  gap:.5rem; height:1.625rem; padding:0 .75rem;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
  animation:v-gelandet .38s cubic-bezier(.3,1.5,.5,1) backwards;
}
.stueckliste li:nth-child(even){ background:var(--zeile-alt, #f8f9fb) }
.stueckliste li:hover{ background:#eceef2 }
/* Ein Teil, das gerade im Formular liegt. Es bleibt in der Liste
   stehen — blass, damit man sieht, woran man arbeitet, und ohne
   dass es wegspringt, wenn man ein anderes anklickt. */
.stueckliste li.in-arbeit{ background:var(--bg-alt); color:var(--ink-soft) }
.stueckliste li.in-arbeit b{ color:var(--ink-soft); font-style:italic }
.stueckliste li.in-arbeit::after{
  content:'wird bearbeitet'; position:absolute; right:2.9rem;
  font-size:10px; color:var(--ink-soft); letter-spacing:.04em;
}
.stueckliste li{ position:relative }
.stueckliste li .nr{
  font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; text-align:right;
}
.stueckliste li b{
  font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stueckliste li .art{
  font-size:11px; color:var(--ink-soft); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.stueckliste .leerhinweis{
  margin:auto 0; text-align:center; font-size:13px; color:var(--ink-soft);
}
@keyframes v-gelandet{
  0%  { opacity:0; transform:scale(.7) translateY(-14px) }
  60% { opacity:1; transform:scale(1.05) translateY(2px) }
  100%{ opacity:1; transform:none }
}
@media(max-width:1080px){
  .stueckliste{
    position:static;
    width:min(34rem, calc(100vw - 3rem));
    height:auto; min-height:9rem; max-height:18rem;
    margin:2.25rem auto 0;
  }
}

/* Zwei Felder nebeneinander: Teil und Artikelnummer */
.teilzeile{ display:grid; grid-template-columns:1fr 11rem; gap:.75rem }
@media(max-width:620px){ .teilzeile{ grid-template-columns:1fr } }

/* ══════════════════════════════════════════════════════════════
   Der Baum
   ══════════════════════════════════════════════════════════════ */
.baum-schicht{
  position:fixed; inset:0; z-index:57; pointer-events:none;
}
.baum-knoten{
  position:absolute; transform:translate(-50%,-50%);
  background:#fff; border:1px solid var(--ink);
  border-radius:var(--r); padding:.5rem .85rem;
  font-size:.9rem; line-height:1.25; white-space:nowrap;
  max-width:15rem; overflow:hidden; text-overflow:ellipsis;
  animation:v-knoten .34s cubic-bezier(.3,1.5,.5,1) backwards;
}
.baum-knoten b{ font-weight:500 }
.baum-knoten .nr{
  display:block; font-size:.72rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; margin-top:.1rem;
}
.baum-knoten.wurzel{
  background:var(--ink); color:#fff; border-color:var(--ink);
  font-size:1.02rem; font-weight:500; padding:.65rem 1.15rem;
}
.baum-knoten.angabe{
  border-style:dashed; border-color:var(--ink-mid); color:var(--ink-mid);
}
.baum-knoten.teil{ border-color:var(--line) }
@keyframes v-knoten{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.6) }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1) }
}

/* Regel-Querverbindungen unterscheiden sich vom Ast */
.skizze .strich.quer{
  stroke-dasharray:5 4; opacity:.5; stroke-width:1.3;
}

/* Legende zum Baum */
/* Abschlusszahlen im Vasco-Stil */
.abschluss-zahlen{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem 2.5rem;
  margin-top:2rem; max-width:30rem;
}
.abschluss-zahlen div span{ display:block }
.abschluss-zahlen .wert{
  font-size:1.9rem; font-weight:500; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.abschluss-zahlen .was{ font-size:.84rem; color:var(--ink-soft); margin-top:.15rem }

/* Enge Knoten dürfen kleiner werden */
.baum-knoten.eng{ font-size:.8rem; padding:.4rem .6rem }
.baum-knoten.eng .nr{ font-size:.66rem }
.baum-knoten b{ display:block; overflow:hidden; text-overflow:ellipsis }

/* Abschlussknöpfe stehen unten, nicht im Baum */
.baum-knoepfe{
  position:fixed; z-index:59;
  left:50%; transform:translateX(-50%);
  bottom:2.2rem; margin:0 !important;
  transition:opacity .35s;
}

/* ══════════════════════════════════════════════════════════════
   Entscheidungsbaum — einfarbig wie der Rest, ohne Scrollen
   ══════════════════════════════════════════════════════════════ */
.baum-blatt{
  position:fixed; inset:3.5rem 0 7rem; z-index:55;
  overflow:hidden;                       /* eingepasst, nicht gescrollt */
  background:var(--bg);
  padding:1.25rem 1.5rem;
}
.baum-svg{ display:block; width:100%; height:100% }

/* Verbindungen */
.baum-strich{ fill:none; stroke:var(--line); stroke-width:1.5; stroke-linecap:round }
.baum-griff{ fill:none; stroke:transparent; stroke-width:18 }
.baum-kante.anklickbar{ cursor:pointer }
.baum-kante.anklickbar:hover .baum-strich{ stroke:var(--ink); stroke-width:2 }
.baum-kante.gewaehlt .baum-strich{ stroke:var(--ink); stroke-width:2.4 }

.baum-kantentext{
  font-size:10px; fill:var(--ink-soft); text-anchor:middle;
  font-family:inherit; pointer-events:none;
  paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round;
}

/* Knoten — ein Kreis, wie im Baumdiagramm. Weiß, Grau, Schwarz. */
.baum-k circle{ fill:#bcc0c6; stroke:var(--ink-mid); stroke-width:1.2 }
.baum-k .zeile{
  font-size:12px; fill:var(--ink); text-anchor:middle;
  font-family:inherit; pointer-events:none;
}
.baum-k .zeile.stark{ font-weight:500 }
.baum-k .zeile.klein{ font-size:10.5px; fill:var(--ink-soft) }
/* Am Blatt laeuft die Beschriftung nach rechts weg, nicht mittig */
.baum-k.ergebnis .zeile{ text-anchor:start }

/* Der Startpunkt ist schwarz und klein — dort fängt jeder Weg an */
.baum-k.erfassen circle{ fill:var(--ink); stroke:var(--ink) }
.baum-k.frage circle,
.baum-k.stufe circle{ fill:#fff; stroke:var(--ink-mid) }
/* Der Startpunkt eines Baumdiagramms ist ein Punkt, kein Kasten */
.baum-k.start circle{ fill:var(--ink); stroke:var(--ink) }
.baum-k.ergebnis circle{ fill:#bcc0c6; stroke:var(--ink-mid) }
.baum-k.ergebnis.leer circle{ fill:#fff; stroke:var(--line-strong); stroke-dasharray:3 3 }
.baum-k.ende circle{ fill:var(--ink); stroke:var(--ink) }

.baum-k.anklickbar{ cursor:pointer }
.baum-k.anklickbar:hover circle{ stroke:var(--ink); stroke-width:2.2 }
.baum-k.gewaehlt circle{ stroke:var(--ink); stroke-width:2.6 }

/* Das Kästchen auf dem Ast — die Stelle, an der im Baumdiagramm
   die Wahrscheinlichkeit steht. Hier steht die Bedingung. */
.baum-kasten rect{ fill:#fff; stroke:var(--ink-mid); stroke-width:1.1 }
.baum-kastentext{
  font-size:10.5px; fill:var(--ink); text-anchor:middle;
  font-family:inherit; pointer-events:none;
}
.baum-kante.anklickbar:hover .baum-kasten rect{ stroke:var(--ink); stroke-width:1.8 }
.baum-kante.gewaehlt .baum-kasten rect{ stroke:var(--ink); stroke-width:2 }

/* Keine Einblende-Animation: opacity würde die Knoten bei gedrosselter
   Animation dauerhaft verstecken, transform würde das SVG-transform
   der Knoten überschreiben. Aufgedeckt wird Rang für Rang aus dem
   Skript — das ist die Animation.
   Sichtbarkeit darf nie von einer Animation abhängen. */

/* ══════════════════════════════════════════════════════════════
   Regel hinter einer Verbindung
   ══════════════════════════════════════════════════════════════ */
.regeltafel{
  position:fixed; z-index:62;
  right:12.5rem; top:5rem; width:24rem;
  max-height:calc(100vh - 12rem); overflow-y:auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:1.15rem 1.25rem 1.1rem;
  box-shadow:0 18px 44px rgba(0,0,0,.09);
  animation:rein .22s ease-out;
}
.regeltafel h3{
  font-size:.72rem; font-weight:500;  
  color:var(--ink-soft); margin:0 0 .9rem;
}
.regeltafel .zu{
  position:absolute; right:.7rem; top:.6rem;
  background:none; border:0; font-size:1.15rem; line-height:1;
  color:var(--ink-soft); padding:.25rem .4rem; border-radius:var(--r);
}
.regeltafel .zu:hover{ color:var(--ink); background:var(--bg-alt) }
.regeltafel .regel-zeile .wort{ width:3rem; font-size:.72rem }
.regeltafel .mehr, .regeltafel .mengeecho{ margin-left:3.5rem }
.regeltafel .knopfzeile{ margin-top:1.2rem; gap:.5rem }
.regeltafel .knopf.weg{
  background:none; border:1px solid var(--line); color:var(--stopp); margin-left:auto;
}
.regeltafel .knopf.weg:hover{ background:#fbeeee; opacity:1 }
@media(max-width:1200px){
  .regeltafel{ right:1.25rem; top:auto; bottom:1.25rem; width:min(24rem, calc(100vw - 2.5rem)) }
}

/* Legende zum Entscheidungsbaum */
/* ══════════════════════════════════════════════════════════════
   Bearbeiten, Löschen, Zurück
   ══════════════════════════════════════════════════════════════ */
.stueckliste li .werkzeuge{
  margin-left:auto; flex:none; display:flex; gap:.1rem;
  opacity:0; transition:opacity .15s;
}
.stueckliste li:hover .werkzeuge,
.stueckliste li:focus-within .werkzeuge{ opacity:1 }
.stueckliste li .art + .werkzeuge{ margin-left:.6rem }
.stueckliste li .werkzeuge button{
  background:none; border:0; cursor:pointer; line-height:1;
  padding:.2rem .3rem; border-radius:var(--r);
  font-size:.9rem; color:var(--ink-soft);
}
.stueckliste li .werkzeuge .stift:hover{ color:var(--ink); background:var(--bg-alt) }
.stueckliste li .werkzeuge .weg:hover{ color:#9a3b3b; background:#fbeeee }
.stueckliste li{ transition:background .12s }
.stueckliste li:hover{ background:var(--bg-alt) }

/* Zurück-Knopf: unauffällig, aber immer erreichbar */
.knopf.zurueck{
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--line); padding:.62rem 1rem; font-weight:500;
}
.knopf.zurueck:hover{ background:var(--bg-alt); color:var(--ink); opacity:1 }

/* Geteilte Knopfzeile: Weiter steht rechts */
.knopfzeile.geteilt{ width:100%; max-width:40rem }
.knopfzeile.geteilt .rechts{ margin-left:auto }

/* Projektname anklickbar */
button.projekt{
  border:0; background:none; cursor:pointer; font:inherit;
  padding:.15rem .3rem; border-radius:var(--r);
  transition:background .12s;
}
button.projekt:hover{ background:var(--bg-alt) }
.projekt-eingabe{
  font:inherit; font-size:.95rem; font-weight:500; color:var(--ink);
  border:1px solid var(--ink); border-radius:var(--r);
  padding:.15rem .45rem; width:14rem; background:#fff;
}

/* ══════════════════════════════════════════════════════════════
   Seitenleiste — jederzeit überall hin
   ══════════════════════════════════════════════════════════════ */
.leiste{
  position:fixed; z-index:60;
  right:0; top:3.5rem; bottom:0; width:11.5rem;
  padding:1.6rem 1rem;
  display:flex; flex-direction:column; gap:.15rem;
  border-left:1px solid var(--line-soft);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(14px);
}
.leiste-p{
  display:flex; align-items:center; gap:.6rem;
  background:none; border:0; text-align:left;
  padding:.62rem .55rem; border-radius:var(--r);
  font-size:.92rem; font-weight:500; letter-spacing:-.01em;
  color:var(--ink-soft);              /* noch nicht erledigt: grau */
  transition:background .12s, color .12s;
}
.leiste-p.fertig{ color:var(--ink) }  /* erledigt: schwarz */
.leiste-p:hover:not([disabled]){ background:var(--bg-alt) }
.leiste-p.jetzt{ background:var(--bg-alt); color:var(--ink); font-weight:500 }
.leiste-p[disabled]{ opacity:.45; cursor:default }
.leiste-punkt{
  flex:none; width:.5rem; height:.5rem; border-radius:50%;
  background:currentColor; opacity:.3;
}
.leiste-p.fertig .leiste-punkt{ opacity:1 }
.leiste-p.jetzt .leiste-punkt{
  opacity:1; box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--ink);
}

/* Impressum und Datenschutz stehen am Fuss der Schrittleiste. Der
   Editor scrollt nicht, also kann eine Fusszeile nicht am Ende des
   Dokuments haengen — sie braucht einen festen Platz, und der ist
   dort, wo ohnehin die Wegweisung sitzt. */
.editorfuss{
  position:fixed; z-index:61; right:0; bottom:0; width:11.5rem;
  display:flex; gap:1rem; padding:.6rem 1rem 1rem;
  font-size:11px; background:rgba(255,255,255,.92);
}
.editorfuss a{ color:var(--ink-soft) }
.editorfuss a:hover{ color:var(--ink) }
body:not(.laeuft) .editorfuss{ display:none }
@media(max-width:1200px){
  .editorfuss{ position:static; width:auto; justify-content:center; background:none }
}

/* Die Leiste braucht Platz — alles Feste rückt nach links */
/* Rechts liegt die Schrittleiste — das Fach dockt davor an */
.stueckliste.breit{ width:27rem }
.baum-blatt{ right:11.5rem }
body.bloss .buehne{ padding-right:11.5rem }

/* Liegt rechts eine Liste, muss die Karte weiter nach links wandern —
   sonst schiebt sie sich darunter. */
@media(min-width:1200px){
  body.bloss:has(.stueckliste) .buehne{ padding-right:34.5rem }
  body.bloss:has(.stueckliste.breit) .buehne{ padding-right:38.5rem }
}

/* Unter 1200px reicht die Breite für Karte + Liste + Leiste nicht mehr:
   dann stapelt sich alles. */
@media(max-width:1200px){
  .leiste{
    position:static; width:auto; height:auto; inset:auto;
    flex-direction:row; overflow-x:auto; gap:.25rem;
    border-left:0; border-bottom:1px solid var(--line-soft);
    padding:.6rem 1rem;
  }
  .leiste-p{ white-space:nowrap }
  .stueckliste, .stueckliste.breit{
    position:static; inset:auto;
    width:min(34rem, calc(100vw - 3rem));
    height:auto; min-height:9rem; max-height:18rem;
    margin:2.25rem auto 0;
    border:1px solid var(--line);
  }
  .baum-blatt{ right:0 }
  body.bloss .buehne{ padding-right:0 }
}

/* ══════════════════════════════════════════════════════════════
   Regelbaukasten — wenn … dann
   ══════════════════════════════════════════════════════════════ */
.regel-modi{ display:flex; gap:.3rem; margin-bottom:1.1rem }
.modus{
  background:none; border:1px solid var(--line); border-radius:var(--r);
  padding:.42rem 1rem; font-size:.86rem; color:var(--ink-mid);
  transition:background .12s, color .12s, border-color .12s;
}
.modus:hover{ border-color:var(--ink-soft) }
.modus.aktiv{ background:var(--ink); border-color:var(--ink); color:#fff }

.regel-zeile{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-bottom:.7rem;
}
.regel-zeile .wort{
  flex:none; width:3.6rem;
  font-size:.82rem; font-weight:500; letter-spacing:.06em;
   color:var(--ink-soft);
}
/* Dasselbe Missverhaeltnis wie frueher bei den Kartenfeldern: die
   Hoehe kommt aus editor.html (32px), das Polster stand hier auf
   9,6px oben und unten, und die Schrift auf 15,2px. Macht 34,4px
   Inhalt in einem 32px hohen Kasten - der Text war abgeschnitten
   und nicht zu lesen. Hoehe und Polster gehoeren zusammen. */
.regel-zeile select,
.regel-zeile input{
  width:auto; flex:1 1 7rem; min-width:0;
  height:32px; padding:0 8px; font-size:14px; line-height:30px;
}
.regel-zeile input[type=number]{ flex:0 0 5rem }

.bedingungen{ flex:1 1 100%; min-width:0; display:flex; flex-direction:column; gap:.5rem }
.bedingung{ display:flex; align-items:center; gap:.45rem }
.bedingung select,
.bedingung input{
  flex:1 1 6rem; min-width:0;
  height:32px; padding:0 8px; font-size:14px; line-height:30px;
}
.bedingung .b-weg{
  flex:none; background:none; border:0; color:var(--ink-soft);
  font-size:1.1rem; line-height:1; padding:.3rem .4rem; border-radius:var(--r);
}
.bedingung .b-weg:hover{ color:var(--stopp); background:#fbeeee }

.mehr{
  background:none; border:0; color:var(--ink-mid);
  font-size:.86rem; padding:.2rem 0 .9rem; margin-left:4.1rem;
}
.mehr:hover{ color:var(--ink); text-decoration:underline }

/* Was die Regel bedeutet, im Klartext — mitlaufend */
.mengeecho{
  margin:.4rem 0 0 4.1rem; font-size:.88rem; color:var(--ink-mid);
  min-height:1.2em; line-height:1.45;
}
.mengeecho.schlecht{ color:var(--stopp) }

/* Der Hinweis unter dem Baum ist weg. Ein Baumdiagramm, das man
   erklaeren muss, ist keins. */

/* ════════════════════════════════════════════════════════════
   Das Druckblatt

   Am Bildschirm ist es nicht da. Im Druck ist es das Einzige, was da
   ist — keine Kopfleiste, kein Vasco, keine Schaltflaechen. Wer eine
   Konfiguration an den Kunden gibt, gibt ein Blatt, keinen
   Bildschirmabzug.
   ════════════════════════════════════════════════════════════ */
#druckblatt{ display:none }

@media print{
  @page{ size:A4 portrait; margin:18mm 16mm }

  body > *{ display:none !important }
  body.druckt #druckblatt{ display:block !important }
  .vasco-frei, .rede, .rede-stiel, .skizze,
  .stueckliste, .leiste, .kopf,
  .baum-blatt, .baum-knoepfe, .regelblick{ display:none !important }

  #druckblatt{
    color:#000; background:#fff;
    font:400 10.5pt/1.45 var(--schrift, system-ui, sans-serif);
  }
  #druckblatt h1{ font-size:17pt; font-weight:650; margin:0; letter-spacing:-.02em }
  #druckblatt h2{
    font-size:8pt; font-weight:600; letter-spacing:.09em;
    text-transform:uppercase; color:#555;
    margin:9mm 0 2.5mm; padding-bottom:1.2mm;
    border-bottom:.4pt solid #000;
  }
  .db-kopf{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:8mm; padding-bottom:3mm; border-bottom:1pt solid #000;
  }
  .db-unter{ margin:1.5mm 0 0; font-size:9pt; color:#555 }
  .db-marke{ font-size:9pt; font-weight:600; white-space:nowrap }

  #druckblatt table{ width:100%; border-collapse:collapse; font-size:9.5pt }
  #druckblatt th, #druckblatt td{
    text-align:left; vertical-align:top;
    padding:1.6mm 2mm; border-bottom:.4pt solid #bbb;
  }
  #druckblatt .r{ text-align:right; font-variant-numeric:tabular-nums }
  .db-teile thead th{
    font-size:8pt; font-weight:600; color:#333;
    border-bottom:.7pt solid #000;
  }
  .db-angaben th{ width:38%; font-weight:600 }
  .db-gruppe td{
    padding-top:3mm; font-size:8pt; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; color:#333;
    border-bottom:.4pt solid #000;
  }
  #druckblatt .leise{ color:#555; font-size:8.5pt }
  .db-leer{ color:#555; font-style:italic }
  .db-sperre{
    margin-top:5mm; padding:2.5mm 3mm;
    border:.7pt solid #000; font-size:9.5pt;
  }
  .db-fuss{
    margin-top:12mm; padding-top:2.5mm; border-top:.4pt solid #bbb;
    font-size:8pt; color:#555;
  }
  /* Eine Stueckliste soll nicht mitten in einer Zeile umbrechen */
  #druckblatt tr{ break-inside:avoid }
  .db-kopf{ break-after:avoid }
  #druckblatt h2{ break-after:avoid }
}

/* ════════════════════════════════════════════════════════════
   Stückliste einlesen
   ════════════════════════════════════════════════════════════ */
.stl-import{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  margin-top:1rem;
}
.imp-dazu{ font-size:11px; color:var(--ink-soft) }

.imp-stand{
  margin-top:.7rem; padding:.5rem .7rem;
  border-left:2px solid var(--ink); background:var(--bg-alt);
  font-size:13px; color:var(--ink-mid);
}
.imp-stand.schlecht{ border-left-color:var(--stopp, #b91c1c) }

.imp-vorschau{ margin-top:.7rem }
.imp-tafel{
  width:100%; border-collapse:collapse; font-size:13px;
  border:1px solid var(--line-strong); background:#fff;
}
.imp-tafel th, .imp-tafel td{
  height:24px; padding:0 8px; text-align:left; vertical-align:middle;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.imp-tafel thead th{
  background:var(--bg-alt); border-bottom:1px solid var(--line-strong);
  font-size:11px; font-weight:500; color:var(--ink-mid);
}
.imp-tafel th:last-child, .imp-tafel td:last-child{ border-right:0 }
.imp-tafel tbody tr:nth-child(even) td{ background:var(--zeile-alt, #f8f9fb) }
.imp-tafel .w{ width:28px; text-align:center }
.imp-tafel .w input{ width:14px; height:14px; margin:0; accent-color:var(--ink) }
.imp-tafel .r{ text-align:right; font-variant-numeric:tabular-nums }
.imp-tafel .leise{ color:var(--ink-soft); font-size:11px }
/* Höchstens acht Zeilen auf einmal — danach rollt es in sich */
.imp-vorschau{ max-height:15rem; overflow-y:auto }

/* Was man hineinziehen kann, soll man auch sehen */
.karte.faengt{
  outline:2px dashed var(--ink-soft); outline-offset:12px;
}

/* ── Antwortform: erst wählen, dann eintragen ─────────────── */
select.offen{ color:var(--ink-soft) }
select.mahnt{
  border-color:var(--stopp); outline:2px solid var(--stopp); outline-offset:-2px;
}
.stvorschlag{
  display:block; margin-top:.35rem;
  font-size:11px; color:var(--ink-soft);
}
.stvorschlag .mehr{ font-size:11px }

/* ════════════════════════════════════════════════════════════
   Das Regelwerk durchgehen

   Rechts stehen die Ablagen — Stückliste, Regelblick, was man
   nachschlägt. Dies hier ist keine Ablage, sondern die Eingabe: man
   füllt es aus und sieht rechts daneben zu, was das Regelwerk damit
   macht. Eingabe links, Wirkung rechts, wie ein Satz.
   ════════════════════════════════════════════════════════════ */
.durchgang{
  position:fixed; z-index:57;
  left:0; top:3.5rem; bottom:0;
  width:21rem;
  display:flex; flex-direction:column;
  background:#fff;
  border-right:1px solid var(--line-strong);
  opacity:0; transition:opacity .3s;
}
.durchgang.sichtbar{ opacity:1 }

.durchgang h3{
  flex:none; margin:0; height:2.5rem;
  display:flex; align-items:center; padding:0 .75rem;
  border-bottom:1px solid var(--line);
  font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mid);
}

.dg-stufen{ flex:1; min-height:0; overflow-y:auto }
.dg-stufe{
  display:flex; gap:.5rem; align-items:flex-start;
  padding:.6rem .75rem;
  border-bottom:1px solid var(--line-soft);
}
.dg-stufe.offen{ background:var(--bg-alt) }
.dg-nr{
  flex:none; width:1rem; font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; line-height:1.6;
}
.dg-block{ flex:1; min-width:0 }
.dg-name{
  display:block; font-size:13px; font-weight:500; margin-bottom:.35rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dg-wahlen{ display:flex; flex-wrap:wrap; gap:.3rem }

/* Eine Antwortklasse. Klein, eckig, umrandet — und die gewählte
   liegt in Tinte, damit man den Weg auch im Fach sieht. */
.dg-wert{
  height:22px; padding:0 .5rem;
  background:var(--surface);
  border:1px solid var(--knopf-rand); border-radius:4px;
  font:inherit; font-size:11px; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.dg-wert:hover{ background:var(--knopf-flaeche-hover); border-color:var(--knopf-rand-hover) }
.dg-wert.gewaehlt{
  background:var(--ink); border-color:var(--ink); color:#fff;
  box-shadow:none;
}

.dg-ergebnis{
  flex:none; max-height:45%; overflow-y:auto;
  border-top:1px solid var(--line-strong);
  padding:.75rem;
}
.dg-warte{ margin:0; font-size:13px; color:var(--ink-soft) }
.dg-leer{ margin:0; font-size:13px; color:var(--ink-mid); line-height:1.5 }
.dg-leer b{ color:var(--signal); font-weight:500 }
.dg-ergebnis.leer{ border-left:2px solid var(--signal) }

.dg-tafel{
  width:100%; border-collapse:collapse; font-size:13px;
  border:1px solid var(--line-strong);
}
.dg-tafel th, .dg-tafel td{
  height:24px; padding:0 8px; text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dg-tafel thead th{
  background:var(--bg-alt); border-bottom:1px solid var(--line-strong);
  font-size:11px; font-weight:500; color:var(--ink-mid);
}
.dg-tafel tbody tr:nth-child(even) td{ background:var(--zeile-alt, #f8f9fb) }
.dg-tafel .r{ text-align:right; font-variant-numeric:tabular-nums }
.dg-tafel .leise{ color:var(--ink-soft); font-size:11px }

.dg-fuss{
  flex:none; display:flex; gap:.4rem; align-items:center;
  padding:.6rem .75rem;
  border-top:1px solid var(--line);
}
.dg-stand{
  flex:1; font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

/* Was nicht auf dem Weg liegt, tritt zurück. Es bleibt sichtbar —
   der Zusammenhang geht sonst verloren — aber es drängt sich nicht. */
.baum-k.abseits, .baum-kante.abseits{
  opacity:.12; transition:opacity .18s;
}

/* ── Was gerade greift ─────────────────────────────

   Der einzige Ort im ganzen Werkzeug, an dem eine Leuchtfarbe
   richtig ist. Sonst trägt Farbe hier Bedeutung und es gibt genau
   einen Signalton; hier geht es aber nicht um Bedeutung, sondern um
   Bewegung: welche Regel schaltet in diesem Augenblick.

   Deshalb kein gefärbter Strich, sondern ein Streifen, der über den
   Ast läuft. Ein ruhendes Bild würde man für eine weitere Sorte
   Kante halten — Laufen kann nur heissen: das passiert jetzt. */
.baum-blatt{ --neon:#0bd9d2 }

/* Der Weg, den die Eingabe nimmt: ein Streifen läuft ihn entlang,
   von der Wurzel bis dorthin, wo die Angaben aufhören. */
.baum-kante.leuchtet .baum-strich,
.baum-kante.greift .baum-strich{
  stroke:var(--neon); stroke-width:2.4;
  filter:drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 7px var(--neon));
  stroke-dasharray:9 13;
  animation:neonlauf 1.1s linear infinite;
}
@keyframes neonlauf{ to{ stroke-dashoffset:-22 } }

.baum-kante.leuchtet .baum-kasten,
.baum-kante.greift .baum-kasten{
  stroke:var(--neon); stroke-width:1.6;
  filter:drop-shadow(0 0 4px var(--neon));
}
.baum-kante.leuchtet .baum-kastentext,
.baum-kante.greift .baum-kastentext{ fill:#06716d; font-weight:500 }

.baum-k.leuchtet circle,
.baum-k.greift circle{
  stroke:var(--neon); stroke-width:2.4;
  filter:drop-shadow(0 0 4px var(--neon)) drop-shadow(0 0 9px var(--neon));
}
.baum-k.leuchtet .zeile.stark,
.baum-k.greift .zeile.stark{ fill:#06716d }

/* Greifen und Abseits schliessen sich aus: was feuert, liegt auf
   dem Weg. Steht doch beides an, gewinnt das Leuchten. */
.baum-k.greift.abseits, .baum-kante.greift.abseits,
.baum-k.leuchtet.abseits, .baum-kante.leuchtet.abseits{ opacity:1 }

@media(prefers-reduced-motion:reduce){
  .baum-kante.leuchtet .baum-strich,
  .baum-kante.greift .baum-strich{ animation:none; stroke-dasharray:none }
}

/* Der Baum rückt nach rechts, weil links das Formular steht */
@media(min-width:1200px){
  body.bloss:has(.durchgang) .baum-blatt{ left:21rem }
  body.bloss:has(.durchgang) .baum-knoepfe{ margin-left:21rem !important }
}
@media(max-width:1200px){
  .durchgang{
    position:static; inset:auto; width:auto; max-width:40rem;
    margin:2rem auto 0; border:1px solid var(--line);
  }
  .dg-stufen, .dg-ergebnis{ max-height:none }
}

/* ════════════════════════════════════════════════════════════
   Die Leiste, die bleibt
   ════════════════════════════════════════════════════════════ */
.weiterleiste{
  position:fixed; z-index:58;
  left:0; right:11.5rem; bottom:0;
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem 1.25rem;
  background:var(--bg-alt);
  border-top:1px solid var(--line-strong);
  font-size:13px; color:var(--ink-mid);
}
.weiterleiste span{ flex:1; min-width:0 }
@media(min-width:1200px){
  body.bloss:has(.durchgang) .weiterleiste{ left:21rem }
}
@media(max-width:1200px){ .weiterleiste{ right:0 } }
/* Die Abschlussknoepfe stehen sonst zur Haelfte hinter der Leiste */
body:has(.weiterleiste) .baum-knoepfe{ bottom:4.4rem }
/* Und das Blatt endet darueber, nicht darunter */
body:has(.weiterleiste) .baum-blatt{ bottom:9.5rem }

/* Ein Teil, das in diesem Fall nicht verbaut werden darf. Kein
   roter Kasten: es ist keine Fehlermeldung, sondern eine
   Festlegung. Der Rand sagt es, der Durchstrich zeigt es. */
.teilknopf.aus{ border-color:var(--stopp); background:var(--surface) }
.teilknopf.aus .name{ text-decoration:line-through; color:var(--ink-soft) }
.teilknopf .marke{
  font-size:10px; color:var(--stopp); letter-spacing:.04em; white-space:nowrap;
}
.teilknopf .marke:empty{ display:none }

/* Ein Widerspruch ist keine Sperre. Eine Sperre ist eine
   Festlegung, die gewirkt hat; ein Widerspruch heisst, dass das
   Regelwerk sich selbst widerspricht und niemand entscheiden kann,
   was gilt. Deshalb dieselbe Farbe wie beim Loeschen. */
.widerspruchhinweis{
  margin:.8rem 0 0; padding:.5rem .7rem;
  border-left:2px solid var(--stopp); background:#fbeeee;
  font-size:13px; line-height:1.5; color:var(--ink);
}
.probe-weg li.widerspruch .marke{
  color:var(--stopp); font-weight:500;
}
.probe-weg li.widerspruch{ background:#fbeeee }

/* Eine Baugruppe als Zwischenzeile im Fach. Nicht eingerückt, nicht
   aufklappbar: sie ordnet, sie verschachtelt nicht. */
/* Eine zusammengefaltete Baugruppe. Sie sieht aus wie eine
   Zwischenzeile, nicht wie ein Knopf — angeklickt wird sie
   trotzdem, das Plus sagt es. */
/* Beim Regelwerk wohnt Vasco über dem Text. Der Streifen gehört
   ihm allein — 104 Pixel, dieselbe Zahl wie VASCO_STREIFEN in
   editor.html. */
body.bloss .karte.vasco-oben,
.karte.vasco-oben{ padding-top:104px }
/* Unten reicht weniger: der Platz wird gebraucht, damit Frage,
   Feld und Knöpfe zusammen ins Bild passen. Und an den Seiten: die
   5,5rem waren Vascos Platz, als er noch daneben stand. Steht er
   oben, rückt der Text wieder an den Rand, wo er hingehört. */
body.bloss .karte.vasco-oben{
  padding-bottom:1.75rem; padding-left:2rem; padding-right:2rem;
}

/* Der Arbeitsbereich reserviert unten 8rem für eine schwebende
   Knopfzeile. Beim Regelwerk schwebt dort nichts — die Knöpfe
   stehen in der Karte. Ohne diese Zeile bleibt ein Balken Leere,
   durch den man scrollen kann und der nichts enthält. */
body.bloss .mitte:has(> .karte.vasco-oben){ padding-bottom:1rem }

.stationsfalte{
  display:inline-flex; align-items:center; gap:5px;
  max-width:15rem;
  background:var(--bg-alt); border:1px solid var(--linie); border-radius:3px;
  padding:4px 7px; margin:0;
  font:inherit; font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
  cursor:pointer; text-align:left; white-space:nowrap;
}
.stationsfalte:hover{ color:var(--ink); border-color:var(--ink-soft) }
.stationsfalte .pfeil{
  width:9px; text-align:center; font-weight:400; font-size:12px;
  letter-spacing:0; flex:none;
}
.stationsfalte .wort{ min-width:0; overflow:hidden; text-overflow:ellipsis }
.stationsfalte .n{
  flex:none; font-size:10px; font-weight:400; letter-spacing:0;
  font-variant-numeric:tabular-nums; color:var(--ink-soft);
}
.stationsfalte.offen{
  color:var(--ink); background:var(--surface); border-color:var(--ink-soft);
}
.stationsfalte.durch .n{ color:var(--gut, var(--ink-soft)) }

/* Die Leiste ist Wegweiser, nicht Inhalt. Sie bekommt eine
   Obergrenze und scrollt in sich — sonst schiebt sie bei vielen
   Teilen die eigentliche Frage aus dem Bild. */
.karte .stationen{
  max-height:8.5rem; overflow-y:auto; align-content:flex-start;
  padding-right:2px;
}

.stationsmarke{
  display:inline-flex; align-items:center; align-self:center;
  padding:0 .5rem 0 .25rem; margin-left:.25rem;
  border-left:1px solid var(--line-strong);
  font-size:10px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;
}
.stationen > .stationsmarke:first-child{ border-left:0; margin-left:0 }

.stueckliste li.stl-gruppe{
  display:block; height:auto; padding:.5rem .75rem .25rem;
  background:var(--bg-alt); border-bottom:1px solid var(--line);
  font-size:10px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mid);
  position:static;
}
.stueckliste li.stl-gruppe:hover{ background:var(--bg-alt) }

/* Drei Felder statt zwei bei der Teileeingabe */
.teilzeile.drei{ grid-template-columns:1fr 9rem 10rem }
@media(max-width:820px){ .teilzeile.drei{ grid-template-columns:1fr } }

/* Kein Zusammenhang — dann eben die andere Frage */
/* Über dem Satzfeld: für welche Antwort er gilt. */
.wahlkopf{
  display:flex; align-items:flex-end; gap:.75rem; flex-wrap:wrap;
  margin-bottom:.9rem;
}
.wahlkopf .feld{ margin:0; min-width:14rem }
.wahlkopf .mehr{ padding-bottom:.5rem }

/* Eine Zeile der Möglichkeiten-Liste */
.zh-wertzeile{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem }
.zh-wertzeile .zh-wert{ flex:1; min-width:9rem }

/* Ein Block der Auswahl-Maske: „Wenn X = … dann kommt dazu …" */
.zh-gruppe .zh-kopf{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.zh-gruppe .zh-wenn{
  font-size:13px; color:var(--ink-mid); white-space:nowrap; flex:none;
}
.zh-gruppe .zh-wert{ flex:1; min-width:9rem }
.zh-gruppe .zh-dann{
  margin:.55rem 0 .35rem; font-size:11px; color:var(--ink-soft);
  letter-spacing:.04em;
}

.ob-frage{ margin:0 0 .8rem; font-size:15px }
.ob-wahl{ display:flex; gap:.5rem; flex-wrap:wrap }
.ob-hinweis{ margin:.7rem 0 0; font-size:11px; color:var(--ink-soft) }

/* ══════════════════════════════════════════════════════════════
   Vascos Deutung der Beschreibung
   ══════════════════════════════════════════════════════════════ */
.deutung{
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:1.25rem 1.4rem 1.1rem;
}
.deutung .bilanz{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem;
  padding-bottom:1.1rem; margin-bottom:.4rem;
  border-bottom:1px solid var(--line-soft);
}
.deutung .bz .wert{
  display:block; font-size:1.5rem; font-weight:500; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.deutung .bz .was{ display:block; font-size:.74rem; color:var(--ink-soft); margin-top:.15rem }
.deutung .bz.warn .wert{ color:var(--warn) }

.dt-gruppe{ padding-top:1rem }
.dt-gruppe h4{
  font-size:.72rem; font-weight:500;  
  color:var(--ink-soft); margin:0 0 .5rem;
}
.dt-gruppe ul{ list-style:none; margin:0; padding:0 }
.dt-gruppe li{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.36rem 0; font-size:.94rem; line-height:1.45;
  border-top:1px solid var(--line-soft);
}
.dt-gruppe li:first-child{ border-top:0 }
.dt-gruppe li span{ flex:1; min-width:0 }
.dt-gruppe li small{ flex:none; color:var(--ink-soft); font-size:.8rem }
.dt-gruppe[data-g="offen"] li span{ color:var(--warn) }

/* ══════════════════════════════════════════════════════════════
   Regel erklären statt bauen
   ══════════════════════════════════════════════════════════════ */
.satzfeld textarea{ min-height:5.5rem; font-size:1rem; line-height:1.5 }
.deutungszeile{
  margin-top:.7rem; font-size:.92rem; line-height:1.5; color:var(--ink);
  min-height:1.3em;
}
.deutungszeile b{ font-weight:500 }
.deutungszeile.schlecht{ color:var(--warn) }
.deutungszeile .unklar{
  display:block; margin-top:.25rem; font-size:.86rem; color:var(--ink-soft);
}

/* Gegenprobe — der Anwender sieht Zahlen, nie eine Formel */
.probe{
  margin-top:.9rem; border:1px solid var(--line-soft); border-radius:var(--r);
  padding:.8rem .95rem; background:var(--bg-alt);
}
.probe-kopf{
  margin:0 0 .5rem; font-size:.74rem; font-weight:500;
  letter-spacing:.07em;  color:var(--ink-soft);
}
.probe table{ border-collapse:collapse; font-size:.9rem; font-variant-numeric:tabular-nums }
.probe th, .probe td{ text-align:left; padding:.2rem 1.6rem .2rem 0 }
.probe th{ font-weight:500; color:var(--ink-soft); font-size:.8rem }

.expertenbau{ margin-top:.6rem }
.nachfrage .zitat{
  font-style:italic; color:var(--ink-mid);
  border-left:2px solid var(--line); padding-left:.75rem; margin:.5rem 0 .7rem;
}
.nachfrage .leise{ color:var(--ink-soft); font-size:.88rem }

/* ══════════════════════════════════════════════════════════════
   Tempo-Schalter
   ══════════════════════════════════════════════════════════════ */
.tempo{
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:.3rem;
}
.tempo span{
  font-size:.68rem; font-weight:500; 
   color:var(--ink-soft); padding:0 .55rem .2rem;
}
.tempo-wahl{ display:flex; gap:.2rem }
.tempo-wahl button{
  flex:1; background:none; border:1px solid var(--line); border-radius:var(--r);
  padding:.32rem 0; font-size:.78rem; color:var(--ink-mid);
  transition:background .12s, color .12s, border-color .12s;
}
.tempo-wahl button:hover{ border-color:var(--ink-soft) }
.tempo-wahl button.aktiv{ background:var(--ink); border-color:var(--ink); color:#fff }
@media(max-width:1200px){
  .tempo{ margin:0 0 0 auto; padding:0 0 0 1rem; border-top:0; border-left:1px solid var(--line-soft);
          flex-direction:row; align-items:center; gap:.5rem }
  .tempo span{ padding:0 }
}

/* Bilanz als Satz statt als Kachelreihe */
.deutung .bilanz-satz{
  margin:0 0 .3rem; font-size:1.02rem; line-height:1.55; color:var(--ink-mid);
}
.deutung .bilanz-satz b{ color:var(--ink); font-weight:500 }
.deutung .bilanz-satz .warn{ color:var(--warn) }
.dt-gruppe h4 i{ font-style:normal; color:var(--line); margin-left:.3rem }
.dt-gruppe li.rest{ border-top:1px solid var(--line-soft) }
.dt-gruppe .mehr-zeigen{
  background:none; border:0; padding:.3rem 0; font-size:.86rem; color:var(--ink-mid);
}
.dt-gruppe .mehr-zeigen:hover{ color:var(--ink); text-decoration:underline }

/* ══════════════════════════════════════════════════════════════
   Neuer Ablauf: Einleitungen, Mengenart, Konfigurationswahl
   ══════════════════════════════════════════════════════════════ */
.einleitung{
  margin:0 0 1.5rem; font-size:1.02rem; line-height:1.6; color:var(--ink-mid);
  max-width:34rem;
}
.einleitung em{ font-style:normal; color:var(--ink); font-weight:500 }
.einleitung b{ color:var(--ink); font-weight:500 }
.feld .hint{
  display:block; margin-top:.4rem; font-size:.86rem; color:var(--ink-soft); line-height:1.45;
}

/* Immer einmal, oder Menge hängt ab */
.mengenart{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.9rem }
.mengenart label{
  display:flex; align-items:flex-start; gap:.6rem;
  border:1px solid var(--line); border-radius:var(--r); padding:.75rem .9rem;
  cursor:pointer; transition:border-color .12s, background .12s;
}
.mengenart label:hover{ border-color:var(--ink-soft) }
.mengenart input{ margin:.15rem 0 0; accent-color:var(--ink); flex:none }
.mengenart input:checked ~ span b{ color:var(--ink) }
.mengenart label:has(input:checked){ border-color:var(--ink); background:var(--bg-alt) }
.mengenart span{ font-size:.86rem; color:var(--ink-soft); line-height:1.45 }
.mengenart span b{ display:block; font-size:.94rem; color:var(--ink-mid); margin-bottom:.1rem }
@media(max-width:640px){ .mengenart{ grid-template-columns:1fr } }

/* Die grosse Wahl */
.wahl.gross{ display:block; padding:1.25rem 1.4rem; text-align:left }
.wahl.gross .icon{
  display:inline-flex; width:2.1rem; height:2.1rem; margin-bottom:.7rem; font-size:1.1rem;
}
.wahl.gross b{ font-size:1.08rem; margin-bottom:.5rem }
.wahl.gross span{ font-size:.92rem; line-height:1.55 }
.wahl.gross em{ font-style:normal; color:var(--ink); font-weight:500 }
.empfohlen{
  font-style:normal; font-size:.68rem; font-weight:500; 
   color:var(--gut); margin-left:.5rem; vertical-align:.1em;
}

/* ══════════════════════════════════════════════════════════════
   Die Runde durch Teile und Spezifikationen
   ══════════════════════════════════════════════════════════════ */
.runde-kopf{
  margin:0 0 .4rem; font-size:.74rem; font-weight:500; 
   color:var(--ink-soft);
}
.runde-titel{ margin:0 0 .7rem; font-size:1.5rem; font-weight:500; letter-spacing:-.025em }
.runde-frage{ margin:0 0 1.3rem; font-size:1.02rem; line-height:1.55; color:var(--ink-mid) }
.runde-frage b{ color:var(--ink); font-weight:500 }

.deutung-satz{
  display:block; margin-top:.45rem; padding-left:.8rem;
  border-left:2px solid var(--ink); font-size:.95rem; color:var(--ink);
}
.deutung-satz i{ font-style:normal; color:var(--ink-soft); font-size:.86rem }
.deutung-knoepfe{ display:flex; gap:.5rem; margin-top:.9rem }

/* ══════════════════════════════════════════════════════════════
   Frag Vasco
   ══════════════════════════════════════════════════════════════ */
.fragvasco{ margin-top:1.6rem; border-top:1px solid var(--line-soft); padding-top:1rem }
.fv-auf{
  background:none; border:0; padding:.3rem 0; font-size:.9rem; color:var(--ink-mid);
}
.fv-auf::before{ content:'? '; font-weight:500 }
.fv-auf:hover{ color:var(--ink); text-decoration:underline }
.fv-auf.offen{ color:var(--ink); font-weight:500 }
.fv-innen{ margin-top:.6rem; display:flex; flex-direction:column; gap:.6rem; align-items:flex-start }
.fv-feld{ width:100%; font-size:.95rem }
.fv-ab{ padding:.55rem 1.2rem; font-size:.88rem }
.fv-antwort{
  margin:0; font-size:.94rem; line-height:1.6; color:var(--ink);
  border-left:2px solid var(--line); padding-left:.85rem;
}
.fv-antwort:empty{ display:none }
.fv-antwort.schlecht{ color:var(--ink-soft) }

/* ══════════════════════════════════════════════════════════════
   Probelauf
   ══════════════════════════════════════════════════════════════ */
.probefelder{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem; margin-bottom:.5rem }
@media(max-width:640px){ .probefelder{ grid-template-columns:1fr } }

.probe-ergebnis, .probe-weg{ margin-top:1.8rem }
.probe-ergebnis h4, .probe-weg h4{
  font-size:.74rem; font-weight:500;  
  color:var(--ink-soft); margin:0 0 .7rem;
}
ol.bom{ list-style:none; margin:0; padding:0 }
ol.bom li{
  display:flex; align-items:baseline; gap:.7rem;
  padding:.5rem 0; border-top:1px solid var(--line-soft); font-size:.96rem;
}
ol.bom li:first-child{ border-top:0 }
ol.bom .anz{ font-variant-numeric:tabular-nums; font-weight:500; min-width:2.5rem }
ol.bom small{ color:var(--ink-soft); font-size:.82rem }
ol.bom em{ margin-left:auto; font-style:normal; color:var(--ink-soft); font-size:.84rem }
.sperrhinweis{
  margin:.9rem 0 0; font-size:.9rem; color:var(--warn);
  border-left:2px solid var(--warn); padding-left:.8rem;
}

ol.weg{ list-style:none; margin:0; padding:0 }
ol.weg li{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.45rem 0; border-top:1px solid var(--line-soft); font-size:.92rem;
}
ol.weg li:first-child{ border-top:0 }
ol.weg .marke{
  flex:none; min-width:6.5rem; font-size:.72rem; font-weight:500;
  letter-spacing:.05em;  color:var(--ink-soft);
}
ol.weg li.griff .marke{ color:var(--ink) }
ol.weg li.still{ opacity:.5 }
ol.weg .satz{ flex:1; min-width:0; line-height:1.45 }
ol.weg .korr{
  flex:none; background:none; border:0; font-size:.82rem; color:var(--ink-soft);
  padding:.15rem .3rem; border-radius:var(--r); opacity:0; transition:opacity .12s;
}
ol.weg li:hover .korr{ opacity:1 }
ol.weg .korr:hover{ color:var(--ink); background:var(--bg-alt) }

/* ══════════════════════════════════════════════════════════════
   Frag-Vasco-Chat — Klick auf Vasco, Hintergrund ausgegraut
   ══════════════════════════════════════════════════════════════ */
.chat-back{
  position:fixed; inset:0; z-index:80;
  background:rgba(20,20,24,.42); backdrop-filter:saturate(120%) blur(2px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:chat-ein .18s ease-out;
}
@keyframes chat-ein{ from{ opacity:0 } to{ opacity:1 } }
.chat{
  width:min(30rem, calc(100vw - 2rem)); max-height:min(32rem, 80vh);
  margin-bottom:6vh;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 30px 70px rgba(0,0,0,.28); overflow:hidden;
  animation:chat-auf .22s cubic-bezier(.2,1.1,.4,1);
}
@keyframes chat-auf{ from{ transform:translateY(16px); opacity:0 } to{ transform:none; opacity:1 } }
.chat-kopf{
  display:flex; align-items:center; gap:.6rem;
  padding:.85rem 1rem; border-bottom:1px solid var(--line-soft); flex:none;
}
.chat-kopf b{ font-size:.98rem; font-weight:500 }
.chat-avatar{
  width:1.8rem; height:1.8rem; border-radius:50%; background:var(--bg-alt);
  background-image:url("vaschido.png"); background-size:120% auto; background-position:center;
}
.chat-zu{
  margin-left:auto; background:none; border:0; font-size:1.3rem; line-height:1;
  color:var(--ink-soft); padding:.1rem .4rem; border-radius:var(--r); cursor:pointer;
}
.chat-zu:hover{ color:var(--ink); background:var(--bg-alt) }
.chat-verlauf{
  flex:1; min-height:6rem; overflow-y:auto; padding:1rem;
  display:flex; flex-direction:column; gap:.7rem;
}
.chat-verlauf p{ margin:0; font-size:.95rem; line-height:1.55; max-width:85%; }
.chat-v{
  align-self:flex-start; background:var(--bg-alt); color:var(--ink);
  padding:.6rem .85rem; border-radius:var(--r) 12px 12px 12px;
}
.chat-v.denkt{ color:var(--ink-soft); font-style:italic }
.chat-v.schlecht{ color:var(--ink-soft) }
.chat-du{
  align-self:flex-end; background:var(--ink); color:#fff;
  padding:.6rem .85rem; border-radius:12px var(--r) 12px 12px;
}
.chat-eingabe{
  display:flex; gap:.5rem; align-items:flex-end;
  padding:.75rem; border-top:1px solid var(--line-soft); flex:none;
}
.chat-eingabe textarea{
  flex:1; resize:none; font:inherit; font-size:.95rem; line-height:1.4;
  padding:.6rem .75rem; border:1px solid var(--line); border-radius:var(--r); max-height:6rem;
}
.chat-eingabe .knopf{ flex:none }
body.chat-an{ overflow:hidden }

/* ══════════════════════════════════════════════════════════════
   Stückliste in zwei Stufen
   ══════════════════════════════════════════════════════════════ */
.mengenfrage{ animation:rein .25s ease-out }
.mf-frage{ margin:0 0 .8rem; font-size:1.05rem; color:var(--ink) }
.mf-frage b{ font-weight:500 }
.mengenart{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem }
.ma-wahl{
  display:block; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1rem;
  background:#fff; transition:border-color .12s, background .12s, transform .06s;
}
.ma-wahl:hover{ border-color:var(--ink-soft) }
.ma-wahl.gewaehlt{ border-color:var(--ink); background:var(--bg-alt) }
.ma-wahl b{ display:block; font-size:.98rem; font-weight:500; margin-bottom:.15rem }
.ma-wahl span{ display:block; font-size:.86rem; color:var(--ink-mid); line-height:1.45 }
@media(max-width:640px){ .mengenart{ grid-template-columns:1fr } }

/* ══════════════════════════════════════════════════════════════
   Konfiguration: zwei Spalten, Vasco erklärt
   ══════════════════════════════════════════════════════════════ */
.wahlen.zwei-spalten{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.wahlen.zwei-spalten .wahl.gross{
  text-align:center; padding:1.6rem 1.2rem;
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  min-height:9rem; justify-content:center;
  transition:border-color .15s, box-shadow .25s, transform .2s;
}
.wahlen.zwei-spalten .wahl.gross .icon{ margin:0 0 .3rem; font-size:1.5rem }
.wahlen.zwei-spalten .wahl.gross b{ font-size:1.06rem }
.wahl.gross.hebt{ border-color:var(--ink); box-shadow:0 10px 30px rgba(0,0,0,.10); transform:translateY(-3px) }
@media(max-width:640px){ .wahlen.zwei-spalten{ grid-template-columns:1fr } }

/* ══════════════════════════════════════════════════════════════
   Regelblick — Entscheidungstabelle, Lücken und Konflikte

   Die Tabelle ist die Hauptdarstellung: sie zeigt bei vielen
   parallelen Bedingungen mehr als ein Baum, weil Vollständigkeit
   und Widersprüche in Zeilen und Spalten sichtbar werden.
   ══════════════════════════════════════════════════════════════ */
/* Dasselbe Fach wie die Stückliste: bündig am Rand, vom Kopf bis
   zum Boden, mit einer Kopfleiste statt einer gerundeten Karte. Zwei
   Seitenflächen, die verschieden aussehen, wären zwei Programme. */
.regelblick{
  position:fixed; z-index:56;
  right:11.5rem; top:3.5rem; bottom:0;
  width:29rem;
  display:flex; flex-direction:column;
  background:#fff;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  opacity:0; transition:opacity .3s;
}
.regelblick.sichtbar{ opacity:1 }
.rb-kopf{
  display:flex; align-items:center; gap:.6rem; flex:none;
  height:2.5rem; padding:0 .75rem;
  border-bottom:1px solid var(--line);
}
.rb-kopf h3{
  font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mid); margin:0;
}
.rb-zahl{
  margin-left:auto; font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.rb-tabelle{ flex:1; min-height:4rem; overflow:auto; padding:0 }
.tab-rollen{ overflow-x:auto }
.tab-leer{ margin:1.2rem .7rem; font-size:.9rem; color:var(--ink-soft); line-height:1.5 }

.entscheidungstabelle{
  border-collapse:collapse; width:100%; font-size:.82rem;
  font-variant-numeric:tabular-nums;
}
.entscheidungstabelle th{
  text-align:left; font-weight:500; font-size:.7rem; letter-spacing:.03em;
  color:var(--ink-soft); padding:.35rem .5rem; white-space:nowrap;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff;
}
.entscheidungstabelle td{
  padding:.4rem .5rem; border-bottom:1px solid var(--line-soft);
  vertical-align:top; line-height:1.35;
}
.entscheidungstabelle tbody tr:hover{ background:var(--bg-alt) }
.entscheidungstabelle .nr{ color:var(--ink-soft); width:1.6rem }
.entscheidungstabelle .pfeil{ color:var(--line); text-align:center; width:1.2rem }
.entscheidungstabelle td.bed.egal,
.entscheidungstabelle td.erg.leer{ color:var(--line) }
.entscheidungstabelle td.erg{ font-weight:500 }
.entscheidungstabelle td.erg.bez{ text-align:center; font-weight:400 }
.entscheidungstabelle tr.ist-sperre td{ background:rgba(138,109,31,.05) }
.marke-entwurf, .marke-bestaetigt, .marke-sperre{
  display:inline-block; font-size:.66rem; letter-spacing:.04em;
  padding:.1rem .4rem; border-radius:var(--r); white-space:nowrap;
}
.marke-entwurf{ background:var(--bg-alt); color:var(--ink-soft) }
.marke-bestaetigt{ background:#eef4ee; color:var(--gut) }
.marke-sperre{ background:#faf3e2; color:var(--warn); margin-left:.2rem }

/* Prüfung — was offen ist, wird gezeigt, nicht behoben */
.rb-pruefung{
  flex:none; max-height:14rem; overflow-y:auto;
  border-top:1px solid var(--line-soft); padding:.85rem 1.15rem 1rem;
}
.rb-pruefung h4{
  font-size:.7rem; font-weight:500;  
  color:var(--ink-soft); margin:0 0 .6rem;
}
.rb-meld{ margin-bottom:.75rem; font-size:.86rem; line-height:1.5 }
.rb-meld p{ margin:0 }
.rb-meld .rb-frage{ color:var(--ink-soft); margin-top:.15rem }
.rb-meld.konflikt{ border-left:2px solid var(--stopp); padding-left:.7rem }
.rb-meld.luecke{ border-left:2px solid var(--warn); padding-left:.7rem }
.rb-meld.hinweis{ border-left:2px solid var(--line); padding-left:.7rem }
.rb-sauber{ margin:0; font-size:.86rem; color:var(--gut) }

/* Die Karte weicht dem Regelblick aus */
@media(min-width:1200px){
  body.bloss:has(.regelblick) .buehne{ padding-right:40.5rem }
}
@media(max-width:1200px){
  .regelblick{ position:static; inset:auto; width:auto; max-height:none;
               margin:2rem auto 0; max-width:40rem;
               border:1px solid var(--line) }
}

/* ══════════════════════════════════════════════════════════════
   Fallbasierte Erhebung
   ══════════════════════════════════════════════════════════════ */
.rueckfragen{ margin:0 0 1.1rem }
.rueckfragen h4{
  font-size:.7rem; font-weight:500;  
  color:var(--ink-soft); margin:0 0 .5rem;
}
.rf{
  display:block; width:100%; text-align:left; margin-bottom:.4rem;
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:.55rem .8rem; font-size:.9rem; line-height:1.45; color:var(--ink-mid);
  cursor:pointer; transition:border-color .12s, color .12s;
}
.rf:hover{ border-color:var(--ink); color:var(--ink) }
.rf::before{ content:'+ '; color:var(--ink-soft) }
.fall-bisher{ margin:1rem 0 0; font-size:.84rem; color:var(--ink-soft) }

/* Regelentwurf einzeln bestätigen */
.deutung-satz{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem;
  margin-top:.5rem; padding:.5rem 0 .5rem .8rem;
  border-left:2px solid var(--ink); font-size:.95rem; line-height:1.5;
}
.deutung-satz.weg{ opacity:.45; border-left-color:var(--line) }
.deutung-satz i{
  font-style:normal; font-size:.68rem; letter-spacing:.04em;
  padding:.1rem .4rem; border-radius:var(--r); background:var(--bg-alt); color:var(--ink-soft);
}
.deutung-satz i.typ-normativ{ background:#eef2f9; color:#2c4a7c }
.deutung-satz i.typ-sperre{ background:#faf3e2; color:var(--warn) }
.ds-knoepfe{ margin-left:auto; display:flex; gap:.3rem; flex:none }
.ds-ja, .ds-nein{
  border:1px solid var(--line); background:#fff; border-radius:var(--r);
  padding:.22rem .7rem; font-size:.8rem; cursor:pointer; color:var(--ink-mid);
}
.ds-ja:hover{ border-color:var(--gut); color:var(--gut) }
.ds-nein:hover{ border-color:var(--stopp); color:var(--stopp) }
.ds-erledigt{ font-size:.78rem; color:var(--ink-soft) }

/* ══════════════════════════════════════════════════════════════
   Rückwärtsinterview
   ══════════════════════════════════════════════════════════════ */
.iv-themen{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.1rem }
.iv-thema{
  font-size:.72rem; letter-spacing:.05em; color:var(--ink-soft);
  padding:.2rem .6rem; border:1px solid var(--line-soft); border-radius:var(--r);
}
.iv-thema.jetzt{ color:var(--ink); border-color:var(--ink); font-weight:500 }
.iv-thema.fertig{ color:var(--gut); border-color:#cde2d3 }

.iv-frage{
  margin:0 0 1.2rem; font-size:1.4rem; line-height:1.35;
  font-weight:500; letter-spacing:-.02em;
}
.iv-frage b{ font-weight:500 }
.iv-hinweis{ margin:-.6rem 0 1.2rem; font-size:.94rem; color:var(--ink-mid); line-height:1.55 }

.iv-antwort{ display:flex; flex-direction:column; gap:.5rem }
.iv-wahl{
  display:block; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:.75rem 1rem; font-size:.98rem; line-height:1.4; color:var(--ink);
  transition:border-color .12s, background .12s;
}
.iv-wahl:hover{ border-color:var(--ink-soft) }
.iv-wahl.gewaehlt{ border-color:var(--ink); background:var(--bg-alt); font-weight:500 }
.iv-wahl.gewaehlt::after{ content:' ✓'; color:var(--ink) }
.iv-wahl.klein{ display:inline-block; width:auto; padding:.45rem .85rem; font-size:.88rem }
.iv-gueltig{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.3rem }

.iv-anders{ display:flex; gap:.5rem; align-items:center; margin-top:.4rem }
.iv-anders-feld{ flex:1; font-size:.94rem; padding:.6rem .8rem }
.iv-anders textarea.iv-anders-feld{ min-height:4rem }
.iv-text{ width:100%; font-size:1rem; padding:.75rem .9rem; min-height:4.5rem }

/* Zahlen nie als Freitext */
.iv-zahl{ display:flex; gap:.5rem; align-items:center }
.iv-wert{ flex:1; font-size:1.15rem; padding:.7rem .9rem; font-variant-numeric:tabular-nums }
.iv-einheit{ flex:0 0 7rem; font-size:1rem; padding:.7rem .6rem }
.iv-unter{ margin:.9rem 0 .4rem; font-size:.9rem; color:var(--ink-mid) }
.iv-bis{ margin-top:.4rem }
.iv-bis-feld{ width:10rem; padding:.6rem .8rem }

.iv-fuss{ margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--line-soft) }
.iv-warum{
  background:none; border:0; padding:0; font-size:.86rem;
  color:var(--ink-soft); cursor:pointer; text-decoration:underline;
  text-decoration-color:var(--line);
}
.iv-warum:hover{ color:var(--ink) }
.iv-warum-text{
  display:block; margin:.5rem 0 0; font-size:.88rem; line-height:1.55;
  color:var(--ink-mid); border-left:2px solid var(--line); padding-left:.75rem;
}
.iv-ausweiche{ display:flex; gap:.5rem; margin-top:.8rem; flex-wrap:wrap }
.iv-weg{
  background:none; border:1px solid var(--line-soft); border-radius:var(--r);
  padding:.3rem .8rem; font-size:.82rem; color:var(--ink-soft); cursor:pointer;
}
.iv-weg:hover{ border-color:var(--ink-soft); color:var(--ink) }
.iv-offen{ margin-top:1.2rem; border-left:2px solid var(--warn); padding-left:.8rem }
.iv-offen h4{
  font-size:.7rem; font-weight:500;  
  color:var(--ink-soft); margin:0 0 .4rem;
}
.iv-offen p{ margin:0 0 .3rem; font-size:.9rem; line-height:1.5; color:var(--ink-mid) }

/* ══════════════════════════════════════════════════════════════
   Fallkarte — wächst mit jeder Antwort mit
   ══════════════════════════════════════════════════════════════ */
.fallkarte{
  flex:none; border-bottom:1px solid var(--line); padding:1rem 1.15rem;
  max-height:22rem; overflow-y:auto;
}
.fallkarte:empty{ display:none }
.fk-kopf{
  display:flex; align-items:center; gap:.5rem; margin-bottom:.7rem;
  font-size:.74rem; font-weight:500; 
   color:var(--ink-soft);
}
.fk-stand{
  margin-left:auto; font-size:.66rem; letter-spacing:.04em; text-transform:none;
  padding:.1rem .45rem; border-radius:var(--r); background:var(--bg-alt); color:var(--ink-soft);
}
.fk-stand.bestaetigt{ background:#eef4ee; color:var(--gut) }
.fk-zeile{ display:flex; gap:.7rem; padding:.35rem 0; font-size:.86rem; line-height:1.45 }
.fk-zeile + .fk-zeile{ border-top:1px solid var(--line-soft) }
.fk-marke{ flex:0 0 6.5rem; color:var(--ink-soft); font-size:.78rem }
.fk-wert{ flex:1; min-width:0; color:var(--ink) }
.fk-zeile.offen .fk-wert{ color:var(--warn) }
.fk-faktoren{ display:flex; flex-wrap:wrap; gap:.3rem }
.fk-faktor{
  display:inline-flex; gap:.35rem; align-items:baseline;
  background:var(--bg-alt); border-radius:var(--r); padding:.15rem .45rem; font-size:.82rem;
}
.fk-faktor b{ font-weight:500; font-variant-numeric:tabular-nums }
.fk-grenze{ font-size:.84rem; margin-bottom:.15rem }
.fk-grenze span{ color:var(--ink-mid) }

/* Spezifikationen sammeln */
.spez-vorschlag{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin-top:.9rem }
.spez-vorschlag span{ font-size:.82rem; color:var(--ink-soft); margin-right:.2rem }
.sv{
  border:1px solid var(--line); background:#fff; border-radius:var(--r);
  padding:.28rem .75rem; font-size:.84rem; color:var(--ink-mid); cursor:pointer;
}
.sv:hover{ border-color:var(--ink); color:var(--ink) }
.sv::before{ content:'+ '; color:var(--ink-soft) }
.spezliste{ list-style:none; margin:0; padding:.3rem }
.spezliste li{
  display:flex; align-items:baseline; gap:.6rem;
  padding:.45rem .5rem; border-bottom:1px solid var(--line-soft); font-size:.9rem;
}
.spezliste li:last-child{ border-bottom:0 }
.spezliste small{ color:var(--ink-soft); font-size:.78rem }
.spezliste .weg{
  margin-left:auto; background:none; border:0; color:var(--ink-soft);
  cursor:pointer; font-size:1rem; padding:0 .2rem;
}
.spezliste .weg:hover{ color:var(--stopp) }
.zw-alt{ margin-top:.3rem }

/* ══════════════════════════════════════════════════════════════
   Baum: Zoomen und Verschieben
   ══════════════════════════════════════════════════════════════ */
.baum-blatt{ cursor:grab }
.baum-blatt.zieht{ cursor:grabbing }
.baum-blatt.zieht .baum-k,
.baum-blatt.zieht .baum-kante{ cursor:grabbing }
.baum-svg{ touch-action:none }

.baum-bedienung{
  position:absolute; right:1.25rem; top:1.25rem; z-index:2;
  display:flex; align-items:center; gap:.15rem;
  background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px);
  border:1px solid var(--line); border-radius:var(--r); padding:.2rem;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.bz{
  border:0; background:none; cursor:pointer; color:var(--ink-mid);
  width:1.9rem; height:1.9rem; border-radius:50%;
  font-size:1.05rem; line-height:1; display:flex;
  align-items:center; justify-content:center;
  transition:background .12s, color .12s;
}
.bz:hover{ background:var(--bg-alt); color:var(--ink) }
.bz-wert{
  min-width:3.2rem; text-align:center; font-size:.78rem;
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.bz-alles{
  width:auto; padding:0 .75rem; border-radius:var(--r);
  font-size:.8rem; border-left:1px solid var(--line-soft); margin-left:.15rem;
}

/* Beim Zoomen bleibt die Trefferfläche fett genug zum Anklicken */
.baum-griff{ stroke-width:22 }

/* Was Vasco gesagt hat und stehen bleiben soll — eine Zeile, kein Absatz */
.steht{
  margin:0 0 1.1rem; font-size:1.12rem; line-height:1.4;
  font-weight:500; letter-spacing:-.015em; color:var(--ink);
}
.steht b{ font-weight:500 }

/* ══════════════════════════════════════════════════════════════
   Auftritt: Text unter Vasco, und „tipp mich an" zeigen
   ══════════════════════════════════════════════════════════════ */
.rede.unten{ text-align:center; max-width:min(34rem, 60vw) }

/* Wenn er sagt, dass man ihn antippen kann, zeigt er es auch:
   zwei Ringe laufen von ihm weg, dazu ein Fingerzeig. */
/* Zurueckhaltend: ein duenner Ring, der leise auslaeuft. Der Hinweis
   soll auffallen, nicht blinken. */
.vasco-frei.tippt-an::before,
.vasco-frei.tippt-an::after{
  content:''; position:absolute; inset:-2%;
  border-radius:50%; border:1px solid var(--ink-soft);
  animation:v-ring 2.8s cubic-bezier(.25,.6,.35,1) infinite;
  pointer-events:none;
}
.vasco-frei.tippt-an::after{ animation-delay:1.4s }
@keyframes v-ring{
  0%   { transform:scale(.94); opacity:.26 }
  60%  { opacity:.08 }
  100% { transform:scale(1.24); opacity:0 }
}

/* Der Fingerzeig tippt zweimal an und verschwindet wieder */
.tipp-finger{
  position:fixed; z-index:61; pointer-events:none;
  width:2.1rem; height:2.1rem;
  opacity:0; transition:opacity .3s;
}
.tipp-finger.sichtbar{ opacity:.72; animation:v-tippen 2.8s ease-in-out infinite }
.tipp-finger svg{ width:100%; height:100%; display:block; fill:var(--ink-mid) }
@keyframes v-tippen{
  0%,100%{ transform:translate(0,0) scale(1) }
  46%    { transform:translate(-3px,-3px) scale(.96) }
  56%    { transform:translate(0,0) scale(1) }
}

/* Beim Hinstellen nur eine kleine Handbewegung — kein Ausholen wie
   beim Werfen. */
.vasco.v-stellt .v-arm-r{ animation:v-stellen .58s ease-in-out }
@keyframes v-stellen{
  0%,100%{ transform:rotate(0) }
  45%    { transform:rotate(-11deg) }
}

/* Mehrere Regeln an einer Stelle im Baum. Der Wortlaut zuerst,
   der Weg dorthin daneben — keine Formulare übereinander. */
.tafel-liste{ list-style:none; margin:0; padding:0 }
.tafel-liste li{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.55rem 0; border-bottom:1px solid var(--line-soft);
}
.tafel-liste li:last-child{ border-bottom:0 }
.tl-satz{ flex:1; min-width:0; font-size:13px; line-height:1.45 }
.tafel-liste .knopf{ flex:none }

/* ════════════════════════════════════════════════════════════
   Die Teile unter dem Satz

   Der Zusammenhang wird geschrieben, nicht angekreuzt — daran
   ändert sich nichts. Was sich ändert: den Namen muss niemand mehr
   auswendig können. Bei vier Ausführungen einer Baugruppe, die sich
   in zwei Ziffern unterscheiden, ist das der Unterschied zwischen
   einer richtigen und einer falschen Regel.
   ════════════════════════════════════════════════════════════ */
.zteile{
  margin-top:.5rem;
  border:1px solid var(--line); border-radius:var(--r, 4px);
  background:var(--bg-alt);
}
.zt-kopf{
  display:flex; align-items:center; gap:.6rem;
  padding:.35rem .5rem; border-bottom:1px solid var(--line);
}
.zt-titel{
  font-size:11px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mid);
}
#ztsuche{
  flex:1; min-width:0; height:22px; padding:0 .45rem;
  border:1px solid var(--knopf-rand); border-radius:var(--r, 4px);
  background:var(--surface); font:inherit; font-size:12px; color:var(--ink);
}
#ztsuche:focus{ outline:none; border-color:var(--ink) }

.zt-liste{ max-height:8.5rem; overflow-y:auto; padding:.4rem .5rem }
.zt-gruppe{ margin-bottom:.45rem }
.zt-gruppe:last-child{ margin-bottom:0 }
.zt-gname{
  display:block; font-size:11px; color:var(--ink-soft); margin-bottom:.2rem;
}
.zt-teil{
  height:22px; padding:0 .5rem; margin:0 .25rem .25rem 0;
  background:var(--surface);
  border:1px solid var(--knopf-rand); border-radius:var(--r, 4px);
  font:inherit; font-size:12px; color:var(--ink); cursor:pointer;
}
.zt-teil:hover{ background:var(--knopf-flaeche-hover); border-color:var(--knopf-rand-hover) }
/* Schon in einer Regel zu dieser Anforderung genannt. Kein Sperren —
   ein Teil darf in mehreren Regeln vorkommen —, nur ein Vermerk. */
.zt-teil.genannt{ border-color:var(--ink); color:var(--ink-mid) }
.zt-teil.genannt::after{ content:'  ✓'; color:var(--ink) }
.zt-leer{ margin:0; font-size:12px; color:var(--ink-soft) }

/* ════════════════════════════════════════════════════════════
   Gilt nur wenn

   Eine Regel darf auf mehreren Anforderungen fußen. Das ging
   immer — nur stand nirgends, dass es geht. Ein Hinweistext hätte
   das nicht behoben: was man tun kann, muss dastehen.

   Deshalb steht die Reihe der früheren Anforderungen über dem
   Satzfeld, auch wenn nichts angeklickt ist. Sie sagt durch ihre
   bloße Anwesenheit, dass eine Regel sich auf einen früheren Fall
   beziehen darf.
   ════════════════════════════════════════════════════════════ */
.zvor{
  margin-bottom:.5rem; padding:.45rem .5rem;
  border:1px solid var(--line); border-left:2px solid var(--ink-soft);
  border-radius:var(--r, 4px); background:var(--bg-alt);
}
.zv-kopf{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:.35rem }
.zv-titel{
  font-size:11px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mid);
}
.zv-hinweis{ font-size:11px; color:var(--ink-soft) }

/* Die angehängten Vorbedingungen, im Klartext. */
.zv-gewaehlt{ display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.35rem }
.zv-gewaehlt[hidden]{ display:none }
.zv-bed{
  display:inline-flex; align-items:center; gap:.35rem;
  height:22px; padding:0 .2rem 0 .5rem;
  background:var(--ink); color:#fff;
  border-radius:var(--r, 4px); font-size:12px;
}
.zv-weg{
  width:16px; height:16px; padding:0; line-height:1;
  background:transparent; border:0; color:#fff; opacity:.7;
  font:inherit; font-size:13px; cursor:pointer;
}
.zv-weg:hover{ opacity:1 }

.zv-liste{ display:flex; flex-wrap:wrap; gap:.25rem }
.zv-anf, .zv-wert{
  height:22px; padding:0 .5rem;
  background:var(--surface);
  border:1px solid var(--knopf-rand); border-radius:var(--r, 4px);
  font:inherit; font-size:12px; color:var(--ink); cursor:pointer;
}
.zv-anf:hover, .zv-wert:hover{
  background:var(--knopf-flaeche-hover); border-color:var(--knopf-rand-hover);
}
.zv-anf.auf{ border-color:var(--ink); background:var(--surface) }
.zv-anf.gesetzt{ border-color:var(--ink); color:var(--ink-mid) }

.zv-werte{
  display:flex; flex-wrap:wrap; align-items:center; gap:.3rem;
  margin-top:.4rem; padding-top:.4rem; border-top:1px solid var(--line);
}
.zv-werte[hidden]{ display:none }
.zv-frage{ font-size:12px; color:var(--ink-mid) }
.zv-op, .zv-zahl{
  height:22px; padding:0 .3rem;
  border:1px solid var(--knopf-rand); border-radius:var(--r, 4px);
  background:var(--surface); font:inherit; font-size:12px; color:var(--ink);
}
.zv-zahl{ width:5rem }

/* Von dieser Anforderung hängt etwas ab, das an anderer Stelle
   geschrieben wurde. Der Pfeil zeigt aus der Station heraus. */
.station .voraus{
  margin-left:.3rem; padding:0 .25rem;
  border:1px solid var(--knopf-rand); border-radius:var(--r, 4px);
  font-size:10px; color:var(--ink-mid);
  font-variant-numeric:tabular-nums;
}
.station.hier .voraus{ border-color:currentColor; color:inherit }