/* AFU-435: Schaltungs-Werkstatt, Werkbank (SVG aus js/werkbank.js) und Rahmen der Seite.
   Die Werkbank behält ihr Aussehen im hellen Thema, der Rahmen folgt dem Thema. */

@font-face {
  font-family: "Caveat";
  src: url("/fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215;
}

/* ---------------------------------------------------------------- Leiste über der Werkbank */
.sw-leiste { display: flex; align-items: center; gap: 0.8rem 1.2rem; flex-wrap: wrap; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; padding: 0.6rem 1rem; }
.sw-leiste .sw-auftrag { font-weight: 600; }
.sw-balken { width: min(180px, 30vw); height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--border) 70%, transparent); overflow: hidden; }
.sw-balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.sw-etikett { border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.85rem; }
.sw-xp { font-family: ui-monospace, Menlo, Consolas, monospace; color: #f5b942; }
@media (prefers-color-scheme: light) { .sw-xp { color: #a86e00; } }
.sw-luft { flex: 1 1 auto; }
.sw-tipp { background: var(--bg2); border: 1px solid var(--border); border-top: 0; padding: 0.6rem 1rem; margin: 0; }
.sw-buehne-rahmen { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; background: #3d4f5c; }
.sw-unter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.4rem; margin-top: 1.4rem; }

/* AFU-437: gelöst und Originalfrage. Grün nur für die richtige Antwort, probierte falsche tragen ihr Urteil ohne Kreuz. */
.sw-geloest { margin-top: 1.4rem; padding: 0.7rem 1rem; border: 1px solid #3ecf8e; border-radius: var(--radius);
  background: color-mix(in srgb, #3ecf8e 14%, transparent); }
.sw-geloest p { margin: 0; }
.sw-geloest:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw-original { margin-top: 1.4rem; }
.sw-original h2 { margin-top: 0; }
.sw-original-bild img { max-width: min(100%, 560px); height: auto; background: #fff; border-radius: 8px; padding: 0.4rem; }
.sw-antworten { list-style: none; padding: 0; margin: 0.8rem 0; display: grid; gap: 0.45rem; }
.sw-antworten li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: 0.3rem 0.8rem; align-items: baseline;
  border: 1px solid var(--border); border-radius: 9px; padding: 0.5rem 0.8rem; }
.sw-antworten .sw-bu { font-weight: 700; }
.sw-antworten .sw-st { font-size: 0.88rem; color: var(--muted); text-align: right; }
.sw-antworten li.richtig { border-color: #3ecf8e; background: color-mix(in srgb, #3ecf8e 12%, transparent); }
.sw-antworten li.richtig .sw-st { color: #3ecf8e; font-weight: 600; }
@media (prefers-color-scheme: light) { .sw-antworten li.richtig .sw-st { color: #137a4b; } }
.sw-antworten .knapp { color: #c98a14; }
.sw-antworten .viel { color: #e0604f; }
.sw-antworten img { max-width: min(100%, 320px); height: auto; background: #fff; border-radius: 6px; display: block; margin-top: 0.3rem; }
@media (max-width: 520px) { .sw-antworten li { grid-template-columns: 1.6em minmax(0, 1fr); } .sw-antworten .sw-st { grid-column: 2; text-align: left; } }

/* ---------------------------------------------------------------- Werkbank */
.wb { position: relative; container-type: inline-size; line-height: 0; color-scheme: dark; }
.wb-buehne svg { display: block; width: 100%; height: auto; }
.wb text { line-height: normal; }
.wb-geraet { font: 600 13px Inter, system-ui, sans-serif; letter-spacing: .09em; fill: #3b4048; }
.wb-geraet.hell { fill: #cfd5dd; }
.wb-klein { font: 13px Inter, system-ui, sans-serif; fill: #4a4f57; }
.wb-klein.hell { fill: #d9dee6; }
.wb-ledein { font: 12px Inter, system-ui, sans-serif; fill: #ff6a5a; }
.wb-lcd { font: 600 62px ui-monospace, Menlo, Consolas, monospace; fill: #1e2419; letter-spacing: 3px; }
.wb-lcdein { font: 600 26px ui-monospace, Menlo, Consolas, monospace; fill: #1e2419; }
.wb-lcdklein { font: 600 12px Inter, system-ui, sans-serif; fill: #2b3324; }
.wb-schalter { font: 600 13px Inter, system-ui, sans-serif; fill: #d9dee6; }
.wb-druck { font: 700 14px Inter, system-ui, sans-serif; fill: #eef6ee; letter-spacing: .04em; }
.wb-druck.gross2 { font-size: 19px; letter-spacing: .12em; }
.wb-bauteiltext { font: 700 10px Inter, system-ui, sans-serif; fill: #3a2a12; }
.wb-hand { font: 22px "Caveat", "Segoe Print", "Bradley Hand", cursive; fill: #2a2a2a; }
.wb-hand.gross { font-size: 32px; font-weight: 700; }
.wb-hand.klein2 { font-size: 19px; fill: #555; }
.wb-buchstabe { font: 700 18px Inter, system-ui, sans-serif; fill: #cfd5dd; }
.wb-bahn { fill: none; stroke: #5a9e5f; stroke-width: 12; stroke-linejoin: round; stroke-linecap: round; }
.wb-bahn.duenn { stroke-width: 7; }
.wb-ks { fill: none; stroke: rgba(0, 0, 0, .42); stroke-width: 10px; filter: url(#wb-weich); transform: translate(5px, 9px); }
.wb-km { fill: none; stroke-width: 8px; stroke-linecap: round; }
.wb-kg { fill: none; stroke-width: 2px; stroke-opacity: .55; transform: translate(-1.5px, -2px); }
.wb-fach { cursor: pointer; outline: none; }
.wb-fach:hover .wb-fachrand { stroke: #8aa0b8; }
.wb-fach[aria-pressed="true"] .wb-fachrand, .wb-fach[aria-pressed="true"]:hover .wb-fachrand { stroke: #f5b942; }
.wb-fach:focus-visible .wb-fachrand { stroke: #6aa6ff; stroke-width: 4; }
/* AFU-465: Bildantworten: Lupe am Fach, Dialog mit großem Bild (Katalogbild schwarz auf hellem Grund, auch im Dunkelmodus) */
.wb-lupe { cursor: zoom-in; }
.wb-lupe:hover circle:first-child { fill: #2f6fd6; }
.wb-bilddialog { width: min(60rem, 94vw); }
.wb-bilddialog-bild { background: #fbf8ec; border-radius: var(--radius, 8px); padding: 1rem; text-align: center; }
.wb-bilddialog-bild img { max-width: 100%; max-height: 60vh; height: auto; }
.wb-bilddialog-alt { margin: 0.8rem 0 0; }

/* Rückmeldung als HTML über dem SVG (Text bricht um und wird vorgelesen); Maße wie im Raster 1440 × 860 */
.wb-rueck { position: absolute; left: calc(1080 / 1440 * 100%); top: calc(596 / 860 * 100%); width: calc(290 / 1440 * 100%);
  min-height: calc(244 / 860 * 100%); box-sizing: border-box; background: #1b1f25; color: #d9dee6; border-radius: calc(12 / 1440 * 100cqw);
  padding: calc(18 / 1440 * 100cqw) calc(22 / 1440 * 100cqw); box-shadow: 0 10px 22px rgba(0, 0, 0, .45);
  font: calc(13.5 / 1440 * 100cqw) / 1.4 Inter, system-ui, sans-serif; display: flex; flex-direction: column; gap: calc(8 / 1440 * 100cqw); }
.wb-rueck-kopf { display: flex; justify-content: space-between; gap: .6em; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; font-size: .95em; color: #cfd5dd; }
.wb-rueck-ziel { font-family: ui-monospace, Menlo, Consolas, monospace; color: #f5b942; text-transform: none; letter-spacing: 0; font-size: 1.25em; white-space: nowrap; }
.wb-rueck-kopf > span { min-width: 0; }
/* AFU-513: langer Wert hinter „Gesucht“: Zeile darf umbrechen, der Wert bricht innerhalb der Karte um */
.wb-rueck-kopf.lang { flex-wrap: wrap; row-gap: .25em; }
.wb-rueck-kopf.lang .wb-rueck-ziel { white-space: normal; overflow-wrap: break-word; max-width: 100%; }
.wb-rueck p { margin: 0; }
.wb-urteil { font-weight: 700; font-size: 2em; line-height: 1.15; }
.wb-urteil.gut { color: #5fd38d; }
.wb-urteil.schlecht, .wb-urteil.viel { color: #ff7a6b; }
/* AFU-437: knapp daneben ist Orange, erst „viel“ ist Rot; falsche Antworten sind Lernstoff, kein Fehler */
.wb-urteil.knapp { color: #f5b942; }
.wb-rueck-zahl { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95em; color: #aeb6c2; }
.wb-rueck-text { flex: 1 1 auto; }
.wb-rueck-knopf { font: inherit; font-size: 1.1em; color: #eef0fa; background: #262b33; border: 1px solid #3a414c; border-radius: 7px;
  padding: .55em 1em; cursor: pointer; margin-top: auto; }
.wb-rueck-knopf:hover { border-color: #6aa6ff; }
.wb-rueck-knopf:focus-visible { outline: 2px solid #6aa6ff; outline-offset: 2px; }
.wb.hochkant .wb-rueck { position: static; width: auto; min-height: 0; border-radius: 0; font-size: 0.95rem; padding: 1rem 1.1rem; gap: 0.5rem; }
.wb .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wb-schalter.an { fill: #f5b942; }

/* Die Werkbank soll ganz ins Fenster passen: Breite höchstens Fensterhöhe (ohne Kopfzeile und Leiste) mal 1440/860,
   aber nie unter 960 px; daneben bleibt Rand statt riesiger Geräte (breite-seiten.cjs warnt sonst ab 1920 px). */
#sw-spiel { max-width: max(960px, calc((100vh - 8rem) * 1440 / 860)); }

/* AFU-436: Messgeräte */
.wb-skala { font: 600 9px Inter, system-ui, sans-serif; fill: #3a3320; }
.wb-mono { font: 600 12px ui-monospace, Menlo, Consolas, monospace; fill: #dbe3ec; }
.wb-taste { font: 700 16px Inter, system-ui, sans-serif; fill: #cfd5dd; }

/* AFU-464: Plombe über dem Messgerät (messen: erst rechnen, dann messen) */
.wb-plombe-text { font: 700 13px Inter, system-ui, sans-serif; fill: #6e1f1f; letter-spacing: .02em; }
.wb-urteil-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; flex-wrap: wrap; }
.wb-sterne { font-size: 1.5em; letter-spacing: .12em; color: #ffd24a; line-height: 1.15; white-space: nowrap; }