/* ausbau.css – Bilder und Antwortknöpfe der 4.16-Etappen (Zahlenstrahl-Ausschnitt, Waage, Wertetabelle,
   Säulen, Wegplan, Stellenwerttabelle, Spiegelgitter, Diagramm-Auswahl). Nutzt die Farben aus tokens.css. */

.vis-strahlfenster-svg, .vis-waage-svg, .vis-saeulen-svg, .vis-wegplan-svg, .vis-spiegelgitter-svg { width: 100%; max-width: 640px; margin: 0 auto; display: block; }

/* Zahlenstrahl-Ausschnitt */
.sf-linie { stroke: var(--tinte-weich, #5a6280); stroke-width: 4; stroke-linecap: round; }
.sf-tick { stroke: var(--tinte-weich, #5a6280); stroke-width: 3; }
.sf-tick.gross { stroke: var(--tinte, #1d2340); stroke-width: 4; }
.sf-tick.markiert { stroke: var(--b, #f59e1b); stroke-width: 6; }
.sf-zahl { font: 800 26px var(--font, system-ui); text-anchor: middle; fill: var(--tinte, #1d2340); }
.sf-zahl.verdeckt { fill: var(--tinte-weich, #5a6280); }
.sf-zahl.markiert { fill: var(--b-tief, #b86e00); }
.sf-pfeil path { fill: var(--b, #f59e1b); stroke: var(--b-tief, #b86e00); stroke-width: 3; stroke-linejoin: round; }
.sf-frage { font: 800 30px var(--font, system-ui); text-anchor: middle; fill: var(--b-tief, #b86e00); }
.sf-punkt circle { fill: var(--a, #3b7ff0); stroke: var(--a-tief, #1f5fc4); stroke-width: 4; }
.sf-punkt-text { font: 800 24px var(--font, system-ui); text-anchor: middle; fill: var(--a-tief, #1f5fc4); }
.sf-bogen { fill: none; stroke: var(--a, #3b7ff0); stroke-width: 4; stroke-linecap: round; }
.sf-hop { font: 800 20px var(--font, system-ui); text-anchor: middle; fill: var(--a-tief, #1f5fc4); }

/* Waage */
.waage-fuss { fill: var(--linie-stark, #c8cde0); }
.waage-linie { stroke: var(--tinte, #1d2340); stroke-width: 8; stroke-linecap: round; }
.waage-faden { stroke: var(--tinte-weich, #5a6280); stroke-width: 3; }
.waage-teller { fill: var(--primaer-hell, #e9e7ff); stroke: var(--primaer-tief, #2e2890); stroke-width: 3; stroke-linejoin: round; }
.waage-text { font: 800 27px var(--font, system-ui); text-anchor: middle; fill: var(--tinte, #1d2340); }
.waage-gleich { font: 800 54px var(--font, system-ui); text-anchor: middle; fill: var(--gut, #0e7f56); }
.waage-wert { font: 800 22px var(--font, system-ui); text-anchor: middle; fill: var(--tinte-weich, #5a6280); }

/* Wertetabelle und Stellenwerttabelle */
.wertetabelle, .stellenwerttabelle { border-collapse: separate; border-spacing: 5px; margin: 0 auto; max-width: 100%; font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(1.1rem, 4.4vw, 1.7rem); }
.wertetabelle { table-layout: auto; width: 100%; }
.wertetabelle th { width: 24%; font-size: .62em; line-height: 1.15; }
.wertetabelle th, .stellenwerttabelle th { background: var(--flaeche-2, #eef0fa); border-radius: 12px; padding: .35rem .8rem; color: var(--primaer-tief, #2e2890); text-align: left; font-size: .8em; }
.wertetabelle td, .stellenwerttabelle td { background: #fff; border: 2px solid var(--linie, #d9ddef); border-radius: 12px; padding: .3rem .4rem; text-align: center; min-width: 2.2em; }
.stellenwerttabelle th { text-align: center; padding: .3rem .6rem; }
.stellenwerttabelle td { min-width: 1.9em; padding: .5rem .5rem; font-size: 1.15em; }
.wertetabelle td.luecke { background: var(--sonne-hell, #fff3cc); border-style: dashed; border-color: var(--sonne, #f5b800); color: var(--b-tief, #b86e00); }
.wertetabelle td.markiert, .stellenwerttabelle td.markiert { background: var(--sonne-hell, #fff3cc); border-color: var(--sonne, #f5b800); }

/* Säulen mit Skala */
.sa-achse { stroke: var(--tinte, #1d2340); stroke-width: 4; stroke-linecap: round; }
.sa-tick { stroke: var(--tinte, #1d2340); stroke-width: 3; }
.sa-zahl { font: 700 18px var(--font, system-ui); text-anchor: end; fill: var(--tinte-weich, #5a6280); }
.sa-saeule.f0 { fill: var(--a, #3b7ff0); } .sa-saeule.f1 { fill: var(--b, #f59e1b); }
.sa-wert { font: 800 24px var(--font, system-ui); text-anchor: middle; fill: var(--tinte, #1d2340); }
.sa-emoji { font-size: 34px; text-anchor: middle; }
.sa-null { stroke: var(--schau, #c0392b); stroke-width: 4; stroke-dasharray: 8 6; }
.sa-null-text { font: 800 18px var(--font, system-ui); text-anchor: end; fill: var(--schau, #c0392b); }

/* Wegplan */
.wp-feld { fill: #f4f7ef; stroke: #d3dcc9; stroke-width: 2; }
.wp-emoji { font-size: 32px; text-anchor: middle; }
.wp-weg { stroke: var(--b, #f59e1b); stroke-width: 8; stroke-linecap: round; opacity: .9; }
.wp-schritt { font: 800 18px var(--font, system-ui); text-anchor: middle; fill: var(--b-tief, #b86e00); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.wp-ziel { fill: none; stroke: var(--gut, #0e7f56); stroke-width: 6; }
.wp-legende { font: 700 15px var(--font, system-ui); text-anchor: middle; fill: var(--tinte-weich, #5a6280); }

/* Spiegelgitter */
.sg-achse { stroke: var(--schau, #c0392b); stroke-width: 5; stroke-linecap: round; }
.sg-sprung { stroke: var(--gut, #0e7f56); stroke-width: 5; stroke-dasharray: 8 6; stroke-linecap: round; }

/* Diagramm-Auswahl: Mini-Säulen im Antwortknopf */
#screen-lernen .wahl.wahl-diagramm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 120px; padding: .4rem; }
.mini-diagramm { width: 100%; max-width: 150px; height: auto; }
.mini-achse { stroke: var(--tinte-weich, #5a6280); stroke-width: 2; }
.mini-saeule { fill: var(--a, #3b7ff0); }
.mini-wert { font: 800 17px var(--font, system-ui); text-anchor: middle; fill: var(--tinte, #1d2340); }
.mini-emoji { font-size: 21px; text-anchor: middle; }
.wahl-buchstabe { font-weight: 800; font-size: 1.1rem; color: var(--primaer-tief, #2e2890); }

@media (max-width: 600px) {
  .wertetabelle { border-spacing: 3px; font-size: 1rem; }
  .wertetabelle th { padding: .25rem .4rem; }
  .wertetabelle td { padding: .3rem .45rem; min-width: 1.6em; }
  #screen-lernen .wahl.wahl-diagramm { min-height: 96px; }
}