/* Paket Wirtschaft B (WI-04, WI-06, WI-05). Alle Klassen mit Vorsilbe .wib- */

/* Gemeinsame Bauteile */
.ix .wib-leg { list-style: none; margin: 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; color: var(--muted) }
.wib-leg.col { flex-direction: column; color: var(--ink) }
.wib-leg li { display: flex; align-items: center; gap: 8px }
.wib-sw { width: 18px; height: 14px; border-radius: 3px; flex: none; display: inline-block; background: var(--track) }
.wib-calc { font: 700 16px var(--mono); margin: 0 }
.wib-val { font: 700 15px var(--mono) }
.wib-fig { margin: 0; display: grid; gap: 6px; min-width: 0 }
.wib-fig svg { width: 100%; height: auto; display: block; overflow: visible }
.wib-ax { font: 600 11px var(--mono); fill: var(--muted) }
:root { --wib-1: #5D7A0E; --wib-2: #B27A00; --wib-3: #C23B8A; --wib-4: #1971C2 }

/* WI-04 Kette */
.wib-kcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px }
.wib-kcard { border-top-width: 6px }
.wib-kcard.k1 { border-top-color: var(--wib-1) } .wib-kcard.k2 { border-top-color: var(--wib-2) } .wib-kcard.k3 { border-top-color: var(--wib-3) }
.wib-kcard p { font-size: 15px }
.wib-kwrap { display: grid; gap: 4px }
.wib-kscale { display: flex; justify-content: space-between; font: 600 12px var(--mono); color: var(--muted) }
.wib-kbar { position: relative; height: 38px; background: var(--panel); border-radius: 6px; overflow: hidden }
.wib-kseg { position: absolute; top: 0; bottom: 0; transition: left .5s ease, width .5s ease; box-shadow: inset -2px 0 0 var(--bg) }
.wib-kseg.k1, .wib-sw.k1 { background: var(--wib-1) } .wib-kseg.k2, .wib-sw.k2 { background: var(--wib-2) } .wib-kseg.k3, .wib-sw.k3 { background: var(--wib-3) }
.wib-kseg.dup, .wib-sw.dup { background: repeating-linear-gradient(45deg, var(--muted) 0 4px, transparent 4px 9px); outline: 2px solid var(--muted); outline-offset: -2px }
.wib-ksumrow { position: relative; height: 24px }
.wib-ksum { position: absolute; top: 0; transform: translateX(-100%); font: 800 15px var(--mono); white-space: nowrap; transition: left .5s ease; margin: 0 }

/* WI-04 Blickwinkel */
.wib-schema { display: grid; gap: 4px }
.wib-srow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 6px 8px; border-radius: 6px; background: var(--bg) }
.wib-srow span { color: var(--muted); font-size: 15px }
.wib-srow.eq { border-left: 5px solid var(--c) }
.wib-stack { display: flex; height: 34px; border-radius: 6px; overflow: hidden; gap: 2px }
.wib-st { min-width: 4px }
.wib-st.v1, .wib-sw.v1 { background: var(--wib-3) } .wib-st.v2, .wib-sw.v2 { background: var(--wib-4) } .wib-st.v3, .wib-sw.v3 { background: var(--wib-2) } .wib-st.v4, .wib-sw.v4 { background: var(--wib-1) }
.wib-st.d1, .wib-sw.d1 { background: var(--wib-4) } .wib-st.d2, .wib-sw.d2 { background: var(--wib-2) }
.wib-bridge .wib-srow { grid-template-columns: minmax(0, 1fr) auto; align-items: center }
.wib-bridge .wib-bv { font: 700 15px var(--mono); color: var(--ink); text-align: right; white-space: nowrap }
@media (max-width: 560px) { .wib-srow { grid-template-columns: 1fr } }

/* WI-04 nominal und real */
.wib-ctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 20px }
.wib-rbars { display: grid; gap: 8px }
.wib-rrow { display: grid; grid-template-columns: 130px minmax(0, 1fr) 96px; gap: 10px; align-items: center }
.wib-rl { font-weight: 700; font-size: 15px }
.wib-rv { font: 700 14px var(--mono); text-align: right }
.wib-rt { height: 22px; background: var(--panel); border-radius: 4px; overflow: hidden }
.wib-rf { display: block; height: 100%; transition: width .3s ease }
.wib-rf.r0, .wib-sw.r0 { background: var(--muted) } .wib-rf.rn, .wib-sw.rn { background: var(--wib-3) } .wib-rf.rr, .wib-sw.rr { background: var(--wib-4) }
@media (max-width: 560px) { .wib-rrow { grid-template-columns: 1fr 88px } .wib-rl { grid-column: 1 / -1 } .wib-rt { grid-column: 1 } }

/* WI-04 Welle und Uhr */
.wib-wu { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start }
@media (max-width: 760px) { .wib-wu { grid-template-columns: 1fr } .wib-usvg { max-width: 300px; justify-self: center } }
.wib-band { fill: var(--c); opacity: 0; transition: opacity .3s ease } .wib-band.on { opacity: .14 }
.wib-wave { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round }
.wib-trend { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 6 }
.wib-dot { fill: var(--c); stroke: var(--bg); stroke-width: 3 }
.wib-wl { font: 700 18px var(--sans); fill: var(--ink) }
.wib-axw { font-size: 18px }
.wib-q { fill: var(--panel); stroke: var(--line); stroke-width: 1; transition: fill .3s ease } .wib-q.on { fill: color-mix(in srgb, var(--c) 22%, var(--bg)) }
.wib-uax { stroke: var(--muted); stroke-width: 1.5 }
.wib-loop { fill: none; stroke: var(--ink); stroke-width: 2.5 }
.wib-arr { fill: var(--ink) }
.wib-ul { font: 700 12px var(--sans); fill: var(--ink) }
@media (prefers-reduced-motion: reduce) { .wib-band, .wib-q, .wib-kseg, .wib-ksum, .wib-rf { transition: none } }

/* WI-04 Signale */
.wib-swrap { position: relative }
.ix .wib-slist { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 6px }
.wib-srow2 { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 10px; align-items: center; opacity: .55; transition: opacity .3s ease }
.wib-srow2.on { opacity: 1 }
.wib-sn { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 15px }
.wib-art { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; border: 1.5px solid currentColor; border-radius: 4px; padding: 1px 5px; color: var(--muted) }
.wib-strk { position: relative; height: 26px; background: var(--panel); border-radius: 4px }
.wib-smk, .wib-sw.smk { position: absolute; top: 4px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border: 3px solid var(--ink); background: var(--bg); box-sizing: border-box }
.wib-sw.smk { position: static; margin: 0; border-radius: 50% }
.wib-srow2.on .wib-smk { background: var(--c); border-color: var(--c) }
.wib-sover { position: absolute; top: 0; bottom: 0; left: 240px; right: 0; pointer-events: none }
.wib-scur, .wib-sw.sline { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--ink); transition: left .25s ease }
.wib-sw.sline { position: static; width: 4px; height: 16px; margin: 0 7px }
.wib-sax { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 10px }
.wib-sscw { display: grid; gap: 2px }
.wib-sscale { position: relative; height: 16px; font: 600 12px var(--mono); color: var(--muted) }
.wib-sscale span { position: absolute; transform: translateX(-50%) }
.wib-sunit { font: 600 12px var(--mono); color: var(--muted); text-align: right }
@media (max-width: 640px) {
  .wib-srow2, .wib-sax { grid-template-columns: 1fr; gap: 2px }
  .wib-sax > .wib-sn { display: none }
  .wib-sover { display: none }
  .wib-strk::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--cur, 0); width: 3px; background: var(--ink) }
}
@media (prefers-reduced-motion: reduce) { .wib-scur, .wib-srow2 { transition: none } }

/* WI-04 Lage */
.wib-lsvg { width: 100%; max-width: 520px; height: auto; display: block }
.wib-l0 { stroke: var(--ink); stroke-width: 1.5 }
.wib-lb, .wib-sw.lb { fill: var(--wib-4); background: var(--wib-4) }
.wib-lb.neg, .wib-sw.neg { fill: #B3261E; background: #B3261E }
.wib-lb.now, .wib-sw.now { fill: var(--c); background: var(--c) }
.wib-lv { font: 700 13px var(--mono); fill: var(--ink) }

/* WI-04 Wendekarten */
.ix .wib-flips { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px }
.wib-flips li { display: grid }
.wib-flip { display: grid; text-align: left; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); padding: 12px 14px; min-height: 44px; perspective: 900px }
/* Kartenseiten fangen keine Klicks: getroffen wird immer der Knopf selbst, auch wenn eine gedrehte Seite über die Nachbarkarte ragt */
.wib-fa, .wib-fb { grid-area: 1 / 1; display: grid; gap: 6px; align-content: start; transition: opacity .3s ease, transform .3s ease; backface-visibility: hidden; pointer-events: none }
.wib-fb { opacity: 0; transform: rotateY(-90deg) }
.wib-flip[aria-pressed="true"] { border-color: var(--c); background: var(--panel) }
.wib-flip[aria-pressed="true"] .wib-fa { opacity: 0; transform: rotateY(90deg) }
.wib-flip[aria-pressed="true"] .wib-fb { opacity: 1; transform: none }
.wib-fk { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.wib-fhint { font-size: 13px; color: var(--muted) }
.wib-fbip { font-size: 17px }
@media (prefers-reduced-motion: reduce) { .wib-fa, .wib-fb { transition: none; transform: none !important } }

/* WI-06 Viereck und Sechseck */
.wib-vstage { position: relative; width: min(100%, 620px); aspect-ratio: 1.4; justify-self: center }
.wib-vsvg { position: absolute; inset: 0; width: 100%; height: 100% }
.wib-vpoly { fill: color-mix(in srgb, var(--c) 10%, var(--bg)); stroke: var(--c); stroke-width: 4; stroke-linejoin: round }
.wib-vb { position: absolute; transform: translate(-50%, -50%); max-width: min(150px, 38%); min-height: 44px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); font-weight: 800; font-size: 15px; line-height: 1.2; text-align: center; hyphens: auto }
.wib-vb.sechs { border-style: dashed }
.wib-vb[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.wib-vdl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 }
.wib-vdl dt { color: var(--muted) } .wib-vdl dd { margin: 0 }
.wib-lage { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; border: 1.5px solid currentColor; border-radius: 4px; padding: 1px 5px; white-space: nowrap }
@media (max-width: 480px) { .wib-vb { font-size: 13px; padding: 4px 6px } .wib-vdl { grid-template-columns: 1fr } .wib-vdl dd { margin-bottom: 4px } }

/* WI-06 Zielkonflikte */
.ix .wib-klist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: none }
.wib-krow { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; background: var(--bg); border-radius: 8px; padding: 8px 10px }
.wib-ksym { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 900; border: 2px solid currentColor; flex: none }
.wib-ksym.pos, .wib-krow.pos .wib-ksym { color: #0B7A3E } .wib-ksym.neg, .wib-krow.neg .wib-ksym { color: #B3261E }
.wib-ksym.nul, .wib-krow.nul .wib-ksym, .wib-ksym.unk, .wib-krow.unk .wib-ksym { color: var(--muted) }
:root[data-theme="dark"] .wib-ksym.pos, :root[data-theme="dark"] .wib-krow.pos .wib-ksym { color: #6FD39A }
:root[data-theme="dark"] .wib-ksym.neg, :root[data-theme="dark"] .wib-krow.neg .wib-ksym { color: #FF8A80 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wib-ksym.pos, :root:not([data-theme="light"]) .wib-krow.pos .wib-ksym { color: #6FD39A } :root:not([data-theme="light"]) .wib-ksym.neg, :root:not([data-theme="light"]) .wib-krow.neg .wib-ksym { color: #FF8A80 } }
.wib-kw { color: var(--muted) }

/* WI-06 Schaltpult */
.wib-psum { font-weight: 700; margin: 0 }
.ix .wib-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: none }
.wib-prow { display: grid; grid-template-columns: 190px minmax(200px, 300px) minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--panel) }
.wib-prow.ezb { background: none; border: 2px dashed var(--line) }
.wib-pt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.wib-ptrack { display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; gap: 8px; align-items: center; font-size: 13px; color: var(--muted) }
.wib-prail { position: relative; height: 10px; border-radius: 5px; background: var(--track) }
/* Anzeige, kein Regler: Zeiger als Dreieck über der Schiene, das eingestellte Ende ist hervorgehoben */
.wib-knob { position: absolute; top: -12px; width: 0; height: 0; margin-left: -9px; border: 9px solid transparent; border-top: 12px solid var(--c); border-bottom: 0; pointer-events: none; transition: left .5s cubic-bezier(.3, .7, .3, 1) }
.wib-knob::after { content: ""; position: absolute; left: -2px; top: 1px; width: 4px; height: 12px; background: var(--c); border-radius: 2px }
.wib-prail { cursor: default }
.wib-plo { text-align: right }
.wib-plo.on, .wib-phi.on { color: var(--ink); font-weight: 800 }
.wib-pwhy { font-size: 15px }
@media (max-width: 900px) { .wib-prow { grid-template-columns: 1fr } .wib-ptrack { max-width: 360px } }
@media (prefers-reduced-motion: reduce) { .wib-knob { transition: none } }

/* WI-06 Gegensteuern */
.wib-gsvg { width: 100%; height: auto; display: block }
.wib-ghost, .wib-sw.ghost { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: 3 6 }
.wib-sw.ghost { background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 7px); height: 4px }
.wib-sw.wave { background: var(--ink); height: 4px }
.wib-lagsym { flex: none; overflow: visible }
.wib-lagsym line { stroke: var(--c); stroke-width: 2; stroke-dasharray: 5 4 }
.wib-lag { opacity: 0; transition: opacity .3s ease } .wib-lag.on { opacity: 1 }
.wib-lag line { stroke: var(--c); stroke-width: 2; stroke-dasharray: 5 4 }
.wib-lagarr { fill: none; stroke: var(--c); stroke-width: 3 }

/* WI-06 Schuldenbremse */
.wib-bbar { display: flex; gap: 4px; min-height: 64px }
.wib-bt { flex: 1 1 0; min-width: 0; display: grid; place-items: center; padding: 6px; border: 2px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2; hyphens: auto; transition: background .3s ease, color .3s ease, border-color .3s ease }
.wib-bt.on { background: var(--c); border: 2px solid var(--c); color: #fff }
.wib-bt.open.on { background: linear-gradient(90deg, var(--c) 60%, color-mix(in srgb, var(--c) 25%, var(--bg))); }
.wib-bgrid { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 3.2fr); gap: 12px }
.wib-bgrp { display: grid; gap: 4px; align-content: start }
.wib-bgl { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted) }
.wib-bt.fix { border-style: solid }
@media (max-width: 640px) { .wib-bgrid { grid-template-columns: 1fr } .wib-bbar { flex-direction: column } .wib-bt { min-height: 44px } }
@media (max-width: 520px) {
  .wib-vstage { aspect-ratio: auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
  .wib-vsvg { display: none }
  .wib-vb { position: static; transform: none !important; max-width: none; font-size: 14px }
}

/* WI-05 Wägungsschema */
.wib-wlist { display: grid; gap: 4px }
.wib-wrow { display: grid; grid-template-columns: 260px minmax(0, 1fr) 64px; gap: 10px; align-items: center; min-height: 44px; padding: 4px 8px; border: 1.5px solid transparent; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer }
.wib-wrow:hover { background: var(--panel) }
.wib-wrow[aria-pressed="true"] { border-color: var(--c); background: var(--panel) }
.wib-wl2 { font-size: 15px; font-weight: 600 }
.wib-wt { height: 16px; background: var(--panel); border-radius: 4px; overflow: hidden }
.wib-wrow[aria-pressed="true"] .wib-wt { background: var(--bg) }
.wib-wf { display: block; height: 100%; background: var(--wib-4) }
.wib-wrow[aria-pressed="true"] .wib-wf { background: var(--c) }
.wib-wv { font: 700 14px var(--mono); text-align: right }
@media (max-width: 560px) { .wib-wrow { grid-template-columns: minmax(0, 1fr) 60px; gap: 2px 8px } .wib-wl2 { grid-column: 1 / -1 } }

/* WI-05 Selins Monat */
.wib-mbar { display: flex; height: 38px; border-radius: 6px; overflow: hidden; gap: 2px }
.wib-mseg { min-width: 3px; flex-basis: 0; transition: flex-grow .4s ease }
.wib-mseg.m1, .wib-sw.m1 { background: var(--wib-3) } .wib-mseg.m2, .wib-sw.m2 { background: var(--wib-1) } .wib-mseg.m3, .wib-sw.m3 { background: var(--wib-2) }
.wib-mseg.m4, .wib-sw.m4 { background: var(--wib-4) } .wib-mseg.m5, .wib-sw.m5 { background: #6B5B95 } .wib-mseg.m6, .wib-sw.m6 { background: var(--muted) }
.wib-mseg.plus, .wib-sw.plus { background: repeating-linear-gradient(45deg, #B3261E 0 4px, transparent 4px 8px); outline: 2px solid #B3261E; outline-offset: -2px }
@media (prefers-reduced-motion: reduce) { .wib-mseg { transition: none } }

/* WI-05 VPI */
.wib-isvg { width: 100%; max-width: 460px; height: auto; display: block }
.wib-isvg .wib-ax { font-size: 15px } .wib-isvg .wib-lv { font-size: 17px }
.wib-ig { stroke: var(--line); stroke-width: 1 }
.wib-ib rect { fill: var(--wib-4); opacity: .45; transition: opacity .3s ease }
.wib-ib.on rect { fill: var(--c); opacity: 1 }
.wib-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 12px; border-left: 5px solid var(--c); background: var(--panel); border-radius: 0 6px 6px 0 }
.wib-tk { font-size: 15px }
.wib-tv { font: 800 22px var(--mono) }

/* WI-05 Gewinner und Verlierer */
.wib-who { font-style: italic; margin: 0 }
.wib-kz { display: inline-block; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 4px; border: 2px solid currentColor }
.wib-kz.neg { color: #B3261E } .wib-kz.pos { color: #1B7A43 } .wib-kz.mid { color: #8A5D00 }
:root[data-theme="dark"] .wib-kz.neg { color: #FF8A80 } :root[data-theme="dark"] .wib-kz.pos { color: #6FD39A } :root[data-theme="dark"] .wib-kz.mid { color: #E0A82E }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wib-kz.neg { color: #FF8A80 } :root:not([data-theme="light"]) .wib-kz.pos { color: #6FD39A } :root:not([data-theme="light"]) .wib-kz.mid { color: #E0A82E } }

/* WI-05 Ursachen und Leitzins: Wirkungsketten */
.ix .wib-chain, .ix .wib-zchain { list-style: none; margin: 0; padding: 0; max-width: none }
.wib-chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px }
.wib-chain li { position: relative; padding: 10px 12px; border: 2px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 15px; font-weight: 600 }
.wib-chain li:last-child { border-color: var(--c) }
.wib-chain li + li::before { content: "→"; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--muted) }
@media (max-width: 640px) {
  .wib-chain { grid-template-columns: 1fr; gap: 18px }
  .wib-chain li + li::before { content: "↓"; left: 50%; top: -18px; transform: translateX(-50%) }
}
.wib-zchain { display: grid; gap: 8px }
.wib-zchain li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start }
.wib-zchain li div { display: grid; gap: 2px; font-size: 15px }
.wib-za { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font: 800 20px var(--sans); color: #fff }
.wib-za.up { background: #B3261E } .wib-za.dn { background: var(--wib-4) }
.wib-run .wib-chain li, .wib-run .wib-zchain li { animation: wib-in .35s ease both }
.wib-run li:nth-child(2) { animation-delay: .15s } .wib-run li:nth-child(3) { animation-delay: .3s } .wib-run li:nth-child(4) { animation-delay: .45s }
@keyframes wib-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .wib-run li { animation: none } }

/* WI-05 Brot 1923 */
.wib-bhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px }
.wib-bp { font: 800 26px var(--mono); color: var(--c) }
.wib-btrack { position: relative; height: 26px; background: var(--panel); border-radius: 6px; overflow: hidden }
.wib-bf { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); transition: width .4s ease }
.wib-bticks { position: relative; height: 18px; font: 600 12px var(--mono); color: var(--muted) }
.wib-bticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap }
.wib-bticks span::before { content: ""; position: absolute; left: 50%; top: -30px; height: 30px; border-left: 1.5px dashed var(--muted) }
@media (prefers-reduced-motion: reduce) { .wib-bf, .wib-ib rect { transition: none } }
@media (max-width: 640px) { .wib-bp { font-size: 22px } }

/* Prüfstand mit zwei Alternativen statt Dafür/Dagegen: beide Seiten gleich, ohne Pro-/Contra-Farbe */
.mini-box.wib-alt { border-top-width: 6px; border-top-color: var(--c) }
/* Lohnrechner: Faustregel und genaue Rechnung untereinander */
.wib-calcs { display: grid; gap: 2px }

/* Prüfstände WI-04 bis WI-06 (Gerüst B2): Stimmen, eigener Standpunkt, Folgen für Azubis */
.ix .wib-vcs, .ix .wib-vcs2, .ix .wib-vrows { list-style: none; margin: 0; padding: 0; max-width: none }
.wib-vcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px }
.wib-vc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start }
.wib-vc > div:only-child { grid-column: 1 / -1 }
.wib-vn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 800 14px var(--mono) }
.wib-vw { display: block; font-size: 14px; color: var(--muted) }
.wib-vq { margin: 4px 0 0; font-size: 16px }
.wib-azubi { border-left: 5px solid var(--c); background: var(--bg); border-radius: 0 8px 8px 0; padding: 8px 12px; display: grid; gap: 4px }
/* WI-04: Achse mit Stimmen und Regler */
.wib-axis { display: grid; gap: 2px }
.wib-adots { position: relative; height: 34px }
.wib-adot { position: absolute; top: 2px; transform: translateX(-50%); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); background: var(--bg); font: 800 13px var(--mono); transition: background .3s ease, color .3s ease }
.wib-adot.near { background: var(--c); border-color: var(--c); color: #fff }
.wib-aends { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; color: var(--muted) }
/* WI-05: Stimmen einzeln markieren */
.wib-vcs2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px }
.wib-vc2 { display: grid; gap: 6px; align-content: start; transition: border-color .3s ease, background .3s ease }
.wib-vc2.ja { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--bg)) }
.wib-vc2.nein { opacity: .75 }
.wib-vside { font: 700 12px var(--mono); color: var(--muted) }
.wib-vbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto }
.wib-vb2 { min-height: 44px; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer }
.wib-vb2[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
/* WI-06: 100 Milliarden verteilen */
.wib-vseg { min-width: 0 }
.wib-vseg.g1, .wib-sw.g1 { background: var(--wib-4) } .wib-vseg.g2, .wib-sw.g2 { background: var(--wib-3) } .wib-vseg.g3, .wib-sw.g3 { background: var(--wib-1) }
.wib-vseg.open { background: repeating-linear-gradient(45deg, var(--track) 0 4px, transparent 4px 9px); min-width: 0 }
.wib-vrows { display: grid; gap: 8px }
.wib-vrow { display: grid; grid-template-columns: 170px auto minmax(0, 1fr); gap: 8px 14px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--panel) }
.wib-vt { display: flex; gap: 8px; align-items: center }
.wib-vctl { display: flex; align-items: center; gap: 6px }
.wib-vctl .wib-val { min-width: 84px; text-align: center }
.wib-pm { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); color: var(--ink); font: 800 22px var(--sans); cursor: pointer }
.wib-pm:disabled { opacity: .35; cursor: default }
@media (max-width: 760px) { .wib-vrow { grid-template-columns: 1fr auto } .wib-vrow > .fest { grid-column: 1 / -1 } }

/* B3 WI-04 Kette: Rechnungen in die Zählung ziehen */
.wib-kette .wib-kcard { display: flex; flex-direction: column; gap: 6px; transition: opacity .25s ease }
.wib-kette .wib-kcard.on { box-shadow: inset 0 0 0 2px var(--ink) }
.wib-kette .wib-kcard.lift { opacity: .55 }
.wib-kgrip { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: -4px -4px 0; padding: 0 8px; border-radius: 8px; background: var(--panel); font: 700 14px var(--mono); color: var(--muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none }
.wib-kgrip:active { cursor: grabbing }
.wib-kdots { width: 12px; height: 20px; flex: none; background: radial-gradient(circle, var(--muted) 1.6px, transparent 2px) 0 0 / 6px 6.6px }
.wib-kbtn { margin-top: auto; align-self: flex-start; min-height: 44px; min-width: 132px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); color: var(--ink); font: 700 15px var(--sans); cursor: pointer }
.wib-kbtn[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.wib-kzone { display: grid; gap: 8px; padding: 12px 14px; border: 2px dashed var(--track); border-radius: 12px; transition: border-color .2s ease, background-color .2s ease }
.wib-kzone.hot { border-color: var(--ink); border-style: solid; background: var(--panel) }
.wib-kzl { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 }
.wib-kempty { margin: 0; font-size: 14px; color: var(--muted); transition: opacity .25s ease }
.wib-kempty.weg { opacity: 0 }
.wib-krow2 { display: grid; grid-template-columns: 170px 1fr 92px; align-items: center; gap: 10px }
.wib-kl { font-size: 15px; font-weight: 700 }
.wib-kval { font: 800 15px var(--mono); text-align: right; white-space: nowrap }
.wib-kette .wib-kscale { margin-left: 180px; margin-right: 102px }
.wib-kghost { position: fixed; z-index: 70; pointer-events: none; display: grid; gap: 2px; padding: 8px 14px; border-radius: 10px; border-top: 6px solid var(--muted); background: var(--bg); color: var(--ink); box-shadow: var(--shadow); font-size: 15px }
.wib-kghost.k1 { border-top-color: var(--wib-1) } .wib-kghost.k2 { border-top-color: var(--wib-2) } .wib-kghost.k3 { border-top-color: var(--wib-3) }
.wib-kghost span { font: 700 14px var(--mono) }
@media (max-width: 760px) {
  .wib-krow2 { grid-template-columns: 1fr auto; row-gap: 4px }
  .wib-krow2 .wib-kbar { grid-column: 1 / -1; grid-row: 2 }
  .wib-kette .wib-kscale { margin: 0 }
}
@media (prefers-reduced-motion: reduce) { .wib-kette .wib-kcard, .wib-kzone, .wib-kempty { transition: none } }

/* B3 WI-05 Selins Monat: Preise je Posten hochschieben */
.ix .wib-krows { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 6px }
.wib-krow3 { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 2fr) 150px; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 10px; background: var(--panel) }
.wib-krow3.fix { min-height: 56px }
.wib-kn { display: flex; align-items: center; gap: 10px; font-size: 15px }
.wib-kn .wib-sw { flex: none }
.wib-kctl { display: block; min-width: 0 }
.wib-kv { font: 700 15px var(--mono); text-align: right; white-space: nowrap }
.wib-kfix { grid-column: 2 / -1; font-size: 14px; color: var(--muted) }
.wib-kmwrap { position: relative; padding-top: 22px }
.wib-kmbar { transition: width .4s ease }
.wib-kmbar .wib-kp { min-width: 0 }
.wib-kmark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--ink) }
.wib-kmark span { position: absolute; top: 0; left: 0; transform: translateX(-50%); font: 700 12px var(--mono); white-space: nowrap }
.wib-sw.kmark { background: none; border-left: 2px dashed var(--ink); width: 0; margin: 0 6px }
@media (max-width: 760px) {
  .wib-krow3 { grid-template-columns: 1fr auto; row-gap: 6px }
  .wib-kctl { grid-column: 1 / -1; grid-row: 2 }
  .wib-kv { min-width: 132px }
  .wib-kfix { grid-column: 1 / -1 }
}
@media (prefers-reduced-motion: reduce) { .wib-kmbar { transition: none } }

/* B2 nachgezogen: WI-04-Prüfstand, Stimmen in eigene Reihenfolge legen */
.ix .wib-rk { position: relative; list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 8px }
.wib-rki { position: relative; display: grid; grid-template-columns: 30px 32px 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; transition: transform .25s ease; background: var(--bg) }
.wib-rki.drag { z-index: 2; transition: none; box-shadow: var(--shadow) }
.wib-rkn { font: 800 18px var(--mono) }
.wib-rkgrip { display: grid; place-items: center; width: 32px; min-height: 44px; border-radius: 8px; background: var(--panel); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none }
.wib-rki.drag .wib-rkgrip { cursor: grabbing }
.wib-rkb { display: flex; gap: 8px }
.wib-psw .wib-kbtn.weg { visibility: hidden }
.wib-adots { position: relative; height: 34px }
.wib-aline { height: 4px; margin: 0 14px; border-radius: 2px; background: var(--track) }
.wib-adu { position: absolute; top: 0; transform: translateX(-50%); display: inline-grid; place-items: center; min-width: 40px; height: 32px; padding: 0 8px; border-radius: 16px; background: var(--ink); color: var(--bg); font: 800 14px var(--mono); opacity: 0; transition: left .4s ease, opacity .3s ease; z-index: 1 }
.wib-adu.on { opacity: 1 }
@media (max-width: 560px) {
  .wib-rki { grid-template-columns: 30px 32px minmax(0, 1fr); row-gap: 6px }
  .wib-rki .wib-vn { display: none }
  .wib-rkb { grid-column: 3; justify-content: flex-end }
}
@media (prefers-reduced-motion: reduce) { .wib-rki, .wib-adu { transition: none } }
.wib-nw { white-space: nowrap }
.wib-kette .pp-bon { width: 100%; padding: 12px 14px 20px; font-size: 13px }
.wib-rpos { display: flex; justify-content: space-between; align-items: baseline; gap: 10px }
.wib-rpos b { white-space: nowrap }

/* WI-04 blicke: „Ein Tisch, dreimal gezählt“ (Eikes Wahl A, 04.11.2026). Drei gleich lange Balken, der gewählte ist groß. */
.wib-bkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px }
.wib-bkopf .lab { margin: 0 }
.wib-bstapel { position: relative; display: grid; gap: 8px; --bz-l: 104px; --bz-r: 118px }
.wib-bz { display: grid; grid-template-columns: var(--bz-l) minmax(0, 1fr) var(--bz-r); align-items: center; min-height: 44px }
.wib-bzn { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); transition: color .3s ease }
.wib-bz.on .wib-bzn { color: var(--ink) }
.wib-bbahn { display: flex; gap: 2px; width: var(--lang, 100%); height: 14px; border-radius: 4px; overflow: hidden; opacity: .5; transition: height .35s ease, opacity .35s ease, width .45s ease }
.wib-bz.on .wib-bbahn { height: 44px; opacity: 1 }
.wib-xt { display: grid; place-items: center; min-width: 3px; overflow: hidden; background: var(--track); transition: flex .45s ease }
.wib-xtl { font: 700 13px var(--mono); color: #fff; white-space: nowrap; padding: 0 4px }
.wib-xt.k1 { background: var(--wib-1) } .wib-xt.k2 { background: var(--wib-2) } .wib-xt.k3 { background: var(--wib-3) }
.wib-xt.v1 { background: var(--wib-3) } .wib-xt.v2 { background: var(--wib-4) } .wib-xt.v3 { background: var(--wib-2) } .wib-xt.v4 { background: var(--wib-1) }
.wib-xt.d1 { background: var(--wib-4) } .wib-xt.d2 { background: var(--wib-2) }
.wib-xt.nb1, .wib-sw.nb1 { background: var(--muted) }
.wib-xt.nb2, .wib-sw.nb2 { background: repeating-linear-gradient(45deg, var(--muted) 0 4px, var(--panel) 4px 8px) }
.wib-xt.nb2 .wib-xtl { color: var(--ink); background: var(--bg); border-radius: 3px }
.wib-bsum { text-align: right; padding-left: 10px; font: 700 14px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted) }
.wib-bz.on .wib-bsum { color: var(--ink) }
.wib-bbip { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px dashed var(--ink); pointer-events: none }
.wib-bbip span { position: absolute; top: -14px; left: 4px; font: 700 11px var(--mono); color: var(--ink) }
.wib-bkauf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.wib-bkl { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-right: 4px }
.wib-bk { min-height: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 8px; background: var(--bg); color: var(--ink); font: 700 15px var(--sans); display: inline-flex; align-items: center }
.wib-bk[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.wib-bfazit { margin: 0; padding: 8px 12px; border-left: 5px solid var(--c); border-radius: 8px; background: var(--panel) }
@media (max-width: 560px) { .wib-bstapel { --bz-l: 0px; --bz-r: 0px } .wib-bz { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px } .wib-bzn { grid-column: 1 } .wib-bsum { grid-row: 1; grid-column: 2 } .wib-bbahn { grid-column: 1 / -1 } .wib-bbip { display: none } }
@media (prefers-reduced-motion: reduce) { .wib-bbahn, .wib-xt, .wib-bzn { transition: none } }
.ix.wib-blicke { container-type: inline-size }
.wib-bzwei { display: grid; gap: 10px 18px; align-items: start; grid-auto-flow: row dense }
@container (min-width: 700px) {
  .wib-bzwei:has(> .wib-schema) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .wib-bzwei > .wib-schema { grid-column: 2; grid-row: 1 / span 6 }
  .wib-bzwei > :not(.wib-schema) { grid-column: 1 }
}
.wib-bz { min-height: 26px } .wib-bz.on { min-height: 44px }
.wib-xform { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 }
.wib-xf { padding: 3px 8px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); font-weight: 700; font-size: 15px }
.wib-xf.end { border: 2px solid var(--c) }
.wib-xop { font: 800 16px var(--mono) }
.wib-bfazit small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted) }
.wib-bstapel { --bz-l: 168px }
.wib-bzn { display: grid; gap: 1px; text-transform: none; letter-spacing: 0 }
.wib-bzn small { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .05em }
.wib-bzn b { font: 700 14px var(--sans) }
.wib-bfazit p { margin: 0 }
@media (max-width: 560px) { .wib-bstapel { --bz-l: 0px } .wib-bzn { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px } }
.ix.wib-blicke { gap: 12px }