/* Paket Wirtschaft A (WI-01, WI-03, WI-02). Alle Klassen mit Vorsilbe .wia- */
.wia-kette, .wia-wandel, .wia-leit, .wia-ziele, .wia-haft, .wia-hr, .wia-kl, .wia-ps { --s-p: #2F7A2C; --s-s: #A86400; --s-t: #2F6FB5; --r-k: #2E8B57; --r-g: #C8372D; --r-i: #8A9099 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ix { --s-p: #6CC066; --s-s: #F0A73A; --s-t: #6FA3E6; --r-k: #5CC48A; --r-g: #F07167; --r-i: #9AA1AB } }
:root[data-theme="dark"] .ix { --s-p: #6CC066; --s-s: #F0A73A; --s-t: #6FA3E6; --r-k: #5CC48A; --r-g: #F07167; --r-i: #9AA1AB }
.ix .s-p { --sc: var(--s-p) } .ix .s-s { --sc: var(--s-s) } .ix .s-t { --sc: var(--s-t) }
.ix .r-k { --rc: var(--r-k) } .ix .r-g { --rc: var(--r-g) } .ix .r-i { --rc: var(--r-i) }

/* Legende, überall gleich */
.wia-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted) }
.wia-leg > span { display: inline-flex; align-items: center; gap: 6px }
.wia-leg i { width: 14px; height: 14px; border-radius: 4px; background: var(--sc, var(--rc, var(--ink))); flex: none }

/* WI-01 Kette */
.wia-krow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; max-width: 760px }
.wia-krow.hilf { gap: 8px }
.wia-klab { margin-top: 4px }
.wia-kg { position: relative; display: grid; gap: 2px; align-content: start; text-align: left; min-height: 96px; padding: 10px 10px 10px 12px; border: 2px solid var(--line); border-top: 6px solid var(--sc); border-radius: 10px; background: var(--bg); transition: border-color .2s, background .2s }
.wia-kg b { font-size: 16px; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere }
.wia-kg .wia-kw { font-size: 13px; color: var(--muted); line-height: 1.25 }
.wia-kn { font: 700 12px var(--mono); color: var(--muted) }
.wia-kg[aria-pressed="true"] { border-color: var(--ink); border-top-color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, var(--bg)) }
.wia-krow:not(.hilf) .wia-kg:not(:last-child)::after { content: ''; position: absolute; right: -16px; top: 42px; width: 12px; height: 3px; background: var(--ink) }
.wia-krow:not(.hilf) .wia-kg:not(:last-child)::before { content: ''; position: absolute; right: -18px; top: 38px; border: 5.5px solid transparent; border-left: 7px solid var(--ink); border-right: 0 }
.wia-kg.hilf { border-style: dashed; border-top-style: solid; min-height: 80px }
.wia-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 800 }
.wia-tag i { width: 14px; height: 14px; border-radius: 4px; background: var(--sc) }
@media (max-width: 520px) { .wia-krow { gap: 6px 14px } .wia-kg { padding: 8px 6px 8px 8px; min-height: 88px } .wia-kg b { font-size: 14px } .wia-kg .wia-kw { font-size: 12px } .wia-krow:not(.hilf) .wia-kg:not(:last-child)::after { right: -13px; width: 10px } .wia-krow:not(.hilf) .wia-kg:not(:last-child)::before { right: -15px } }

/* WI-01 Strukturwandel */
.wia-bar { display: flex; height: 56px; border-radius: 10px; overflow: hidden; border: 2px solid var(--ink) }
.wia-bar > span { background: var(--sc); display: flex; align-items: center; justify-content: center; min-width: 0; transition: flex-basis .5s ease; flex: 0 0 33% }
.wia-bar > span b { color: #fff; font: 800 15px var(--mono); white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.35) }
.wia-bar > span.klein b { position: absolute; opacity: 0 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wia-bar > span b { color: #121417; text-shadow: none } }
:root[data-theme="dark"] .wia-bar > span b { color: #121417; text-shadow: none }
.wia-wandel .wia-leg span { font-variant-numeric: tabular-nums }
.wia-lv { display: inline-block; min-width: 3.4em; color: var(--ink); font: 800 14px var(--mono) }

/* WI-01 Leitungssysteme */
.wia-opanes > .lg-s { gap: 12px }
.wia-oboth { display: grid; gap: 12px }
.wia-ost { position: relative }
.wia-ol { position: absolute; inset: 0; pointer-events: none; overflow: visible }
.wia-og { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 14px; padding: 4px 0 }
.wia-og.mx { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 16px; gap: 22px 12px }
.wia-ob { border: 2px solid var(--ink); border-radius: 8px; background: var(--bg); padding: 8px 6px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.2; min-height: 44px; display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; hyphens: auto }
.wia-ob.paula { background: var(--c); color: #fff; border-color: var(--c) }
.wia-ob.stab { border-style: dashed; font-weight: 600 }
.wia-ob.proj { background: var(--panel) }
.wia-ob.leer { border-color: var(--line); color: var(--muted); font-weight: 400 }
.wia-oe { fill: none; stroke: var(--muted); stroke-width: 2 }
.wia-oe.rat { stroke-dasharray: 6 5 }
.wia-oe.hot { stroke: var(--c); stroke-width: 4 }
.wia-ox { display: grid; gap: 8px; background: var(--panel); border-radius: 10px; padding: 12px 14px }
.wia-leit .wia-leg .l-w i { height: 3px; border-radius: 0; background: var(--muted) }
.wia-leit .wia-leg .l-h i { height: 5px; border-radius: 0; background: var(--c) }
.wia-leit .wia-leg .l-r i { height: 0; border-radius: 0; background: none; border-top: 3px dashed var(--muted) }
@media (max-width: 520px) { .wia-og { gap: 24px 8px } .wia-ob { font-size: 13px; padding: 6px 4px } }

/* WI-01 Zielpaare */
.wia-zg { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px }
.wia-zc { display: grid; gap: 2px; align-content: start; text-align: left; min-height: 64px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--bg); transition: border-color .2s, background .2s }
.wia-zc b { font-size: 16px; line-height: 1.25 }
.wia-za { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.wia-zc[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--bg)); box-shadow: inset 0 0 0 1px var(--c) }
.wia-zr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.wia-zr i { width: 16px; height: 16px; border-radius: 50%; background: var(--rc, var(--muted)); flex: none }
.wia-ziele .wia-leg i { border-radius: 50% }

/* WI-01 Haftung */
.wia-hg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.ix.wia-haft { gap: 10px }
.wia-hkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px }
.wia-hkopf .lab { margin: 0 }
.wia-hfuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: -4px }
.wia-hfuss > .lg { flex: 0 1 auto; min-width: 0 }
.wia-hfuss .wia-hmt { white-space: nowrap }
.wia-hfuss .wia-leg { margin: 0; font-size: 13px }
@media (max-width: 760px) { .wia-hfuss .wia-hmt { white-space: normal } }
.wia-hc { display: grid; gap: 6px; align-content: start; border: 2px solid var(--line); border-radius: 10px; padding: 8px; transition: border-color .3s, opacity .3s }
.wia-ht { font-weight: 800; font-size: 15px }
.wia-hd { position: relative; display: grid; gap: 0; padding: 6px 10px; border-radius: 8px; background: var(--panel); font-size: 14px; line-height: 1.3 }
.wia-hd b { font-size: 15px }
.wia-hs { position: absolute; right: -4px; top: -9px; background: var(--bg); font: 800 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--c); border: 2px solid var(--c); border-radius: 4px; padding: 2px 4px; transform: rotate(-8deg) scale(1.6); opacity: 0; transition: opacity .25s, transform .25s }
.wia-hc.zu { border-color: var(--c) }
.wia-hc.zu .wia-hs { opacity: 1; transform: rotate(-8deg) scale(1) }
.wia-hc.zu .wia-hd { background: color-mix(in srgb, var(--c) 12%, var(--bg)) }
.wia-hc.weg .wia-hd { opacity: .55 }
.wia-hn { font-size: 13px; color: var(--muted); line-height: 1.3 }
.wia-hm { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--panel); border: 2px solid var(--ink) }
.wia-hm .ok { background: var(--c); transition: width .5s ease }
.wia-hm .no { background: repeating-linear-gradient(135deg, var(--panel) 0 4px, var(--line) 4px 8px); transition: width .5s ease }
.wia-hmt b { font-variant-numeric: tabular-nums }
.wia-haft .wia-leg .h-zu i { background: var(--c) } .wia-haft .wia-leg .h-weg i { background: var(--panel); border: 1px solid var(--muted) }
@media (max-width: 760px) { .wia-hg { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (prefers-reduced-motion: reduce) { .wia-hs, .wia-hm span, .wia-bar > span, .wia-hc { transition: none } }

/* WI-01 Handelsregister */
.wia-hrg { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start }
.wia-hrf { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px; text-align: left; border: 0; border-bottom: 1px solid #C9CCD1; background: none; padding: 8px 6px; min-height: 44px; color: #121417; font: inherit; font-size: 14px; line-height: 1.35; border-radius: 0 }
.wia-hrk { font: 700 12px var(--mono); color: #4A4F57; white-space: pre-wrap }
.wia-hrv { white-space: pre-line }
.wia-hrf[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 4px 0 0 var(--c) }
.wia-hrf:hover { background: rgba(0,0,0,.04) }
.wia-hrg > .out { position: sticky; top: 12px }
@media (max-width: 760px) { .wia-hrg { grid-template-columns: 1fr } .wia-hrg > .out { position: static } .wia-hrf { grid-template-columns: 1fr; gap: 2px } }

/* WI-01 Kreislauf */
.wia-klw { max-width: 600px; width: 100%; margin: 0 auto }
.wia-kls { width: 100%; height: auto; display: block; overflow: visible }
.wia-ka rect { fill: var(--bg); stroke: var(--ink); stroke-width: 2 }
.wia-ka text { font: 800 15px var(--sans); fill: var(--ink) }
.wia-ka, .wia-kf, .wia-kt { transition: opacity .3s }
.wia-ka.off { opacity: .15 }
.wia-kf { fill: none; stroke-width: 2; opacity: .45 }
.wia-kf.g { stroke: var(--c) } .wia-kf.w { stroke: var(--ink); stroke-dasharray: 5 4 }
.wia-am.g { fill: var(--c) } .wia-am.w { fill: var(--ink) }
.wia-kf.hot { stroke-width: 4; opacity: 1 }
.wia-kf.off { opacity: 0 }
.wia-kt { font: 800 14px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; opacity: 0 }
.wia-kt.on { opacity: 1 }
.wia-kl .wia-leg .k-g i { height: 3px; border-radius: 0; background: var(--c); opacity: .6 }
.wia-kl .wia-leg .k-w i { height: 0; border-radius: 0; background: none; border-top: 3px dashed var(--ink); opacity: .6 }
.wia-kl .wia-leg .k-h i { height: 5px; border-radius: 0; background: var(--ink) }
.wia-kcs { display: flex; flex-wrap: wrap; gap: 6px }
.wia-kc { min-height: 44px; padding: 6px 12px; border: 2px solid var(--line); border-radius: 22px; background: var(--bg); text-align: left; font-size: 15px; line-height: 1.25 }
.wia-kc[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--bg)); box-shadow: inset 0 0 0 1px var(--c) }
@media (prefers-reduced-motion: reduce) { .wia-ka, .wia-kf, .wia-kt { transition: none } }

/* WI-01 Prüfstand */
.wia-pqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.wia-pq { display: grid; gap: 4px; align-content: start; text-align: left; padding: 10px 12px; border: 2px solid var(--line); border-left: 6px solid var(--c); border-radius: 10px; background: var(--bg); min-height: 44px }
.wia-pw { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted) }
.wia-pt { font-size: 16px; line-height: 1.35 }
.wia-pq[aria-pressed="true"] { border-color: var(--ink); border-left-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--bg)) }
@media (max-width: 640px) { .wia-pqs { grid-template-columns: 1fr } }


/* ================= WI-03 ================= */
.wia-pb, .wia-vbd, .wia-vk, .wia-ord { --m-n: #2F6FB5; --m-a: #C77A00; --m-at: #9A5B00; --ok: #237A4B; --no: #C8372D; --mid: #8A6D00 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ix { --m-n: #6FA3E6; --m-a: #F0A73A; --ok: #5CC48A; --no: #F07167; --mid: #E2C15A } }
:root[data-theme="dark"] .ix { --m-n: #6FA3E6; --m-a: #F0A73A; --ok: #5CC48A; --no: #F07167; --mid: #E2C15A }
.ix .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* WI-03 Ordnungen */
.wia-os { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted) }
.wia-ot { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 25%, var(--bg)), var(--c)) }
.wia-om { position: absolute; top: 50%; left: 42%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--bg); border: 4px solid var(--ink); transition: left .45s ease }
.wia-oz { display: grid; gap: 6px; max-width: 640px }
.wia-ozh { margin: 0; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted) }
.wia-ozg { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: stretch }
.wia-ozb { position: relative; display: grid; gap: 2px; align-content: center; padding: 12px 14px; border: 2px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); transition: border-color .3s, background .3s, color .3s }
.wia-ozb b { font-size: 17px } .wia-ozb > span:not(.wia-ozr) { font-size: 14px; line-height: 1.3 }
.wia-ozb.markt { padding-top: 40px }
.wia-ozb.on { border-color: var(--ink); color: var(--ink); background: color-mix(in srgb, var(--c) 10%, var(--bg)) }
.wia-ozr { position: absolute; inset: -2px; border: 3px dashed var(--c); border-radius: 10px; opacity: 0; transition: opacity .3s; pointer-events: none }
.wia-ozr small { position: absolute; left: 12px; top: 10px; font: 700 12px var(--mono); color: var(--ink); line-height: 1.25; padding-right: 10px }
.wia-ozb.rahmen .wia-ozr { opacity: 1 }
.wia-ozb:not(.rahmen) .wia-ozr small { visibility: hidden }
.wia-ors { display: grid; gap: 0; border-top: 1px solid var(--line) }
.wia-or { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: start }
.wia-or > b { font-size: 14px; color: var(--muted); line-height: 1.3 }
.wia-or .lg-s { font-size: 16px; line-height: 1.35 }
@media (max-width: 560px) { .wia-or { grid-template-columns: minmax(0, 1fr) } .wia-os { font-size: 12px; gap: 6px } }

/* WI-03 Marktformen */
.wia-mfg { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 4px }
.wia-mfh { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: flex; align-items: center; justify-content: center; text-align: center }
.wia-mfh.top { grid-column: 2; justify-content: center }
.wia-mfh.side { grid-column: 1; grid-row: 2; flex-direction: column; gap: 4px }
.wia-mfv { writing-mode: vertical-rl; transform: rotate(180deg) }
.wia-mfi { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 6px }
.wia-mfi > .wia-mfh:nth-child(n+5) { justify-content: flex-end; padding-right: 2px }
.wia-mfc { min-height: 60px; padding: 6px; border: 2px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 14px; font-weight: 700; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; transition: border-color .2s, background .2s }
.wia-mfc[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--bg)); box-shadow: inset 0 0 0 1px var(--c) }
@media (max-width: 520px) { .wia-mfc { font-size: 12px; padding: 4px 3px; min-height: 56px } .wia-mfh { font-size: 10px } .wia-mfi { gap: 4px } }

/* WI-03 vollkommener Markt */
.wia-vkrs { display: grid; border-top: 1px solid var(--line) }
.wia-vkr { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid var(--line) }
.wia-vkr > b { font-size: 14px; color: var(--muted); line-height: 1.3 }
.wia-vkz { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; line-height: 1.35 }
.wia-vkz i { font-style: normal; font-weight: 900; font-size: 18px; line-height: 1.1 }
.wia-vkz.ja i { color: var(--ok) } .wia-vkz.nein i { color: var(--no) }
.wia-vkr.extra { border-top: 2px dashed var(--line); margin-top: -1px } .wia-vkr.extra > b { font-style: italic }
@media (max-width: 560px) { .wia-vkr { grid-template-columns: minmax(0, 1fr) } }

/* WI-03 Marktbild */
.wia-mbw { max-width: 560px; width: 100% }
.wia-mb { display: block; width: 100%; height: auto; overflow: visible }
.wia-mba text { font: 600 15px var(--mono); fill: var(--muted) }
.wia-mba text.lbl { font: 700 16px var(--sans, inherit); fill: var(--ink) }
.wia-mba .grid { stroke: var(--line); stroke-width: 1 }
.wia-mba .axis { stroke: var(--ink); stroke-width: 2 }
.wia-mn, .wia-ma { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round }
.wia-mn { stroke: var(--m-n) } .wia-ma { stroke: var(--m-a) }
.wia-mn.ghost, .wia-ma.ghost { stroke-width: 2.5; stroke-dasharray: 6 6; opacity: .5 }
.wia-mtn, .wia-mta { font-size: 17px; font-weight: 800 }
.wia-mtn { fill: var(--m-n) } .wia-mta { fill: var(--m-at, var(--m-a)) }
.wia-me { fill: var(--ink); stroke: var(--bg); stroke-width: 2 }
.wia-meo { fill: var(--bg); stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: 4 3 }
.wia-mp { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 7 5 }
.wia-mlim { stroke: var(--c); stroke-width: 3.5 }
.wia-mlim.frei { stroke-dasharray: 10 6; opacity: .75 }
.wia-mbr { fill: none; stroke-width: 2.5 } .wia-mbr.nu { stroke: var(--m-n) } .wia-mbr.au { stroke: var(--m-a) }
.wia-mbt { font-size: 15px; font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px }
.wia-mdn { fill: var(--m-n); stroke: var(--bg); stroke-width: 2 } .wia-mda { fill: var(--m-a); stroke: var(--bg); stroke-width: 2 }
.wia-leg .m-n i { height: 4px; border-radius: 0; background: var(--m-n) }
.wia-leg .m-a i { height: 4px; border-radius: 0; background: var(--m-a) }
.wia-leg .m-e i { border-radius: 50%; background: var(--ink) }
.wia-leg .m-o i { border-radius: 50%; background: var(--bg); border: 2px dashed var(--muted) }
.wia-leg .m-l i { height: 4px; border-radius: 0; background: var(--c) }

/* WI-03 Unternehmensverbindungen */
.wia-vbsc { max-width: 640px; display: flex; justify-content: space-between; gap: 10px; margin: 0; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); position: relative; padding-bottom: 8px; border-bottom: 3px solid; border-image: linear-gradient(90deg, var(--line), var(--c)) 1 }
.wia-vbs { position: relative; height: 172px; max-width: 640px; width: 100% }
.wia-vba, .wia-vbb { position: absolute; top: 18px; width: 40%; min-height: 60px; display: grid; align-items: center; border: 3px solid var(--ink); border-radius: 12px; background: var(--bg); padding: 6px 10px; text-align: center; transition: left .5s ease, top .5s ease, width .5s ease, opacity .4s ease, background .4s ease }
.wia-vba b, .wia-vbb b { font-size: 16px; line-height: 1.2 } .wia-vba small, .wia-vbb small { display: block; font: 700 11px var(--mono); text-transform: uppercase; color: var(--muted) }
.wia-vba .lg-s, .wia-vbb .lg-s { gap: 0; align-content: center }
.wia-vba { left: 0; border-color: var(--c) } .wia-vbb { left: 60% }
.wia-vbl { position: absolute; left: 40%; top: 46px; width: 20%; height: 0; border-top: 4px dashed var(--muted); transition: all .5s ease }
.wia-vbm { position: absolute; left: 0; right: 0; top: 126px; text-align: center; font-weight: 700; font-size: 15px; color: var(--ink) }
.wia-vbs.v1 .wia-vba { left: 8% } .wia-vbs.v1 .wia-vbb { left: 52% }
.wia-vbs.v1 .wia-vbl { left: 48%; width: 4%; border-top: 4px solid var(--no) }
.wia-vbs.v2 .wia-vba { left: 18%; top: 0; width: 64% } .wia-vbs.v2 .wia-vbb { left: 30%; top: 68px; width: 40%; background: var(--panel) }
.wia-vbs.v2 .wia-vbl { left: 50%; top: 60px; width: 0; height: 8px; border-top: 0; border-left: 4px solid var(--ink) }
.wia-vbs.v3 .wia-vba { left: 15%; top: 18px; width: 70%; background: color-mix(in srgb, var(--c) 12%, var(--bg)) } .wia-vbs.v3 .wia-vbb { left: 30%; top: 18px; width: 40%; opacity: 0 }
.wia-vbs.v3 .wia-vbl { opacity: 0 }
.wia-vbs.v2 .wia-vbm { top: 140px }
.wia-vbrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.wia-vbr { display: grid; gap: 4px; align-content: start; padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px }
.wia-vbr > span { font-size: 13px; color: var(--muted); font-weight: 700; line-height: 1.25 }
.wia-vbf { font-weight: 800; font-size: 16px } .wia-vbf.pos { color: var(--ok) } .wia-vbf.neg { color: var(--no) } .wia-vbf.mid { color: var(--mid) }
@media (max-width: 560px) { .wia-vbrs { grid-template-columns: minmax(0, 1fr) } .wia-vbr { grid-template-columns: minmax(0, 11em) minmax(0, 1fr); align-items: baseline } .wia-vba b, .wia-vbb b { font-size: 14px } .wia-vbm { font-size: 14px } }
@media (prefers-reduced-motion: reduce) { .wia-om, .wia-vba, .wia-vbb, .wia-vbl, .wia-mfc { transition: none } }


/* ================= WI-02 ================= */
.wia-vg, .wia-af, .wia-pd, .wia-rd, .wia-ck { --ok: #2E8B57; --no: #C8372D; --pa: #2F6FB5; --pb: #C77A00 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ix { --pa: #6FA3E6; --pb: #F0A73A } }
:root[data-theme="dark"] .ix { --pa: #6FA3E6; --pb: #F0A73A }

/* Rangliste */
.wia-rl { position: relative; height: calc(var(--n) * 76px - 8px); max-width: 720px }
.wia-rlz { --pos: 0; position: absolute; left: 0; right: 0; top: 0; height: 68px; transform: translateY(calc(var(--pos) * 76px)); transition: transform .5s ease;
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; grid-template-rows: 1fr auto; column-gap: 8px; align-items: center; padding: 6px 12px 8px; border: 2px solid var(--line); border-radius: 10px; background: var(--bg) }
.wia-rlk { font: 800 18px var(--mono); color: var(--muted) }
.wia-rln { display: grid; min-width: 0 } .wia-rln b { font-size: 16px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .wia-rln small { font-size: 13px; color: var(--muted); line-height: 1.25 }
.wia-rlv { font: 800 17px var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap }
.wia-rlb { grid-column: 2 / 4; height: 6px; border-radius: 3px; background: var(--panel); overflow: hidden }
.wia-rlf { display: block; height: 100%; width: 0; background: var(--c); border-radius: 3px; transition: width .5s ease }
.wia-rlz[style*="--pos: 0"] { border-color: var(--c) }
.wia-rlb { position: relative; overflow: visible } .wia-rlf { overflow: hidden }
.wia-rl1 { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--ink); opacity: 0; transition: opacity .3s, left .5s ease }
.wia-rl1.on { opacity: 1 }
.wia-rl1 small { display: none }
.wia-rw { display: grid; gap: 4px; font-size: 14px } .wia-rw b { font-size: 14px !important; color: var(--muted) }
.wia-rw ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; font: 600 14px var(--mono); font-variant-numeric: tabular-nums }
@media (max-width: 520px) { .wia-rl { height: calc(var(--n) * 84px - 8px) } .wia-rlz { height: 76px; transform: translateY(calc(var(--pos) * 84px)); padding: 6px 10px 8px; grid-template-columns: 1.6em minmax(0, 1fr) auto } .wia-rln b { font-size: 15px; white-space: normal } .wia-rln small { font-size: 12px } .wia-rlv { font-size: 15px } .wia-rlk { font-size: 15px } }

/* Produktivität */
.wia-pdg { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; max-width: 640px }
.wia-pdg i { aspect-ratio: 4 / 3; border-radius: 3px; border: 1.5px dashed var(--line); background: transparent; transition: background .3s, border-color .3s }
.wia-pdg i.on { border: 1.5px solid transparent } .wia-pdg i.a { background: var(--pa) } .wia-pdg i.b { background: var(--pb) }
.wia-leg .p-a i { background: var(--pa) } .wia-leg .p-b i { background: var(--pb) }
.wia-pdzs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; max-width: 640px }
.wia-pdz { display: grid; justify-items: center; text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--panel) }
.wia-pdz b { font: 800 26px var(--mono); font-variant-numeric: tabular-nums } .wia-pdz span { font-size: 13px; color: var(--muted); line-height: 1.2 }
.wia-pdz:last-child { background: color-mix(in srgb, var(--c) 14%, var(--bg)); box-shadow: inset 0 0 0 2px var(--c) }
.wia-pdop { font: 800 22px var(--mono); color: var(--muted) }
@media (max-width: 520px) { .wia-pdg { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px } .wia-pdz b { font-size: 20px } .wia-pdz span { font-size: 11px } .wia-pdzs { gap: 4px } .wia-pdop { font-size: 16px } }

/* Rentabilität */
.wia-rdk { display: grid; gap: 2px }
.wia-rdv { font: 900 34px var(--mono); font-variant-numeric: tabular-nums; color: var(--c) }
.wia-rdr { margin: 0; font: 600 14px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums }
.wia-rdt { position: relative; height: 26px; margin: 28px 0 30px; border-radius: 6px; background: var(--panel); max-width: 640px }
.wia-rdf { position: absolute; top: 0; bottom: 0; background: var(--ok); border-radius: 6px; transition: left .25s, width .25s } .wia-rdf.neg { background: var(--no) }
.wia-rd0 { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink) }
.wia-rdm { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px dashed var(--ink) }
.wia-rdm small { position: absolute; white-space: nowrap; font: 700 12px var(--mono); color: var(--ink); transform: translateX(-50%) }
.wia-rdm.spar small { bottom: 100% } .wia-rdm.gut small { top: 100% }
.wia-rdlo, .wia-rdhi { position: absolute; top: 100%; margin-top: 6px; font: 600 12px var(--mono); color: var(--muted) } .wia-rdlo { left: 0 } .wia-rdhi { right: 0 }
@media (prefers-reduced-motion: reduce) { .wia-rdf, .wia-rlz, .wia-rlf, .wia-pdg i { transition: none } }

/* Cockpit */
.wia-cks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.wia-ckt { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--bg); transition: border-color .3s, background .3s }
.wia-ckt > span { font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.25; hyphens: auto; overflow-wrap: anywhere }
.wia-ckt > b { font: 800 21px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap }
.wia-ckt > small { font-size: 13px; font-weight: 700; color: var(--muted) }
.wia-ckt.up { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--bg)) } .wia-ckt.up > small { color: var(--ok) }
.wia-ckt.down { border-color: var(--no); background: color-mix(in srgb, var(--no) 10%, var(--bg)) } .wia-ckt.down > small { color: var(--no) }
.wia-ckn { display: grid; background: var(--panel); border-radius: 10px; padding: 12px 14px }
.wia-ckn > * { grid-area: 1 / 1 }
.wia-ckn ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px }
.wia-ckn li { display: grid; gap: 2px; align-content: start; padding-left: 12px; border-left: 4px solid var(--c); transition: opacity .25s }
.wia-ckn li b { font-size: 15px } .wia-ckn li span { line-height: 1.4 }
.wia-ckx { display: grid } .wia-ckx > span { grid-area: 1 / 1; transition: opacity .25s }
.wia-ckx .zu { color: var(--muted); font-style: italic }
.wia-ckn li.off { border-left-color: var(--line) } .wia-ckn li.off b { color: var(--muted) }
.wia-ckn li.off .auf, .wia-ckn li:not(.off) .zu { opacity: 0; visibility: hidden }
@media (min-width: 700px) { .wia-ckn ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px } }
@media (max-width: 900px) { .wia-cks { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 420px) { .wia-ckt > b { font-size: 18px } }

/* Kontrast im dunklen Design: Stempel und Beschriftungen in Linienfarbe aufhellen */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wia-hs { color: color-mix(in srgb, var(--c) 55%, #fff); border-color: color-mix(in srgb, var(--c) 55%, #fff) } :root:not([data-theme="light"]) .ix { --m-at: #F0A73A } }
:root[data-theme="dark"] .wia-hs { color: color-mix(in srgb, var(--c) 55%, #fff); border-color: color-mix(in srgb, var(--c) 55%, #fff) }
:root[data-theme="dark"] .ix { --m-at: #F0A73A }

/* Interaktionen höher als der Bildschirm: breit nebeneinander, schmal mit haftender Auswahl */
.wia-kl, .wia-pb, .wia-ck { container-type: inline-size }
.wia-klg, .wia-mbg { display: grid; gap: 12px; align-items: start }
.wia-kll, .wia-mbl, .wia-klr { display: grid; gap: 10px; min-width: 0 }
@container (min-width: 740px) {
  .wia-klg { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: 18px }
  .wia-klr .wia-haftbar { order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px }
  .wia-klr .wia-kc { border-radius: 12px; font-size: 14px; padding: 5px 10px; line-height: 1.2 }
  .wia-mbg { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 18px }
}
@container (max-width: 739px) {
  .wia-haftbar { position: sticky; bottom: 0; z-index: 3; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; margin: 0 -4px; padding: 8px 4px; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(0,0,0,.08) }
  .wia-haftbar .wia-kc { flex: none; white-space: nowrap }
}
.wia-ckbar { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 6px; margin-top: 4px; padding: 8px 12px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 -4px 14px rgba(0,0,0,.08) }
.wia-ckbar .lab { margin: 0 }
@container (max-width: 520px) { .wia-ckbar .wia-kcs { flex-wrap: nowrap; overflow-x: auto } .wia-ckbar .wia-kc { flex: none; white-space: nowrap } }

/* ===== Prüfstände nach gemeinsamem Gerüst (B2) ===== */
/* Stimmen: alle sichtbar, echte Stimmen mit Quelle */
.wia-sts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.wia-sq { margin: 0; display: grid; gap: 6px; align-content: start; padding: 12px 14px; border: 2px solid var(--line); border-left: 6px solid var(--muted); border-radius: 10px; background: var(--bg) }
.wia-sq.real { border-left-color: var(--ink) }
.wia-sw { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted) }
.wia-sq blockquote { margin: 0 }
.wia-sq blockquote p { margin: 0; font-size: 16px; line-height: 1.4 }
.wia-ssrc { margin: 0; font-size: 13px; color: var(--muted) }
.wia-az { margin-top: 14px }
@container (max-width: 560px) { .wia-sts { grid-template-columns: 1fr } }
.wia-st, .wia-wg, .wia-tr, .wia-ml { container-type: inline-size }

/* WI-01 Waage */
.wia-wgk { display: grid; gap: 14px; align-items: start }
.wia-wgbild { max-width: 360px; width: 100%; justify-self: center }
.wia-wgsvg { display: block; width: 100%; height: auto; overflow: visible }
.wia-wgb { stroke: var(--ink); stroke-width: 6; stroke-linecap: round }
.wia-wgbg, .wia-wgp { transition: transform .45s ease }
.wia-wgp line { stroke: var(--muted); stroke-width: 2 }
.wia-wgs { fill: color-mix(in srgb, var(--ink) 10%, var(--bg)); stroke: var(--ink); stroke-width: 2 }
.wia-wgf { fill: var(--ink) }
.wia-wgn { font: 800 20px var(--sans); fill: var(--ink) }
.wia-wgl { font: 700 13px var(--sans); fill: var(--ink) }
.wia-wggs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.wia-wgg { display: grid; gap: 3px; align-content: start; text-align: left; min-height: 44px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.3; cursor: pointer }
.wia-wgg[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: color-mix(in srgb, var(--ink) 7%, var(--bg)) }
/* Haken in der Ecke statt Vorsatz im Text: so bricht nichts um und der Kasten bleibt gleich hoch */
.wia-wgg { position: relative; padding-right: 34px }
.wia-wgg[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 7px; right: 10px; font: 800 16px/1 var(--sans); color: var(--ink) }
.wia-wgt { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted) }
/* Breit (iPad quer, PC): oben Waage und Rückmeldung nebeneinander, darunter die Gründe in drei Spalten. So sind Auswahl und Rückmeldung zusammen in der Sicht. */
@container (min-width: 740px) { .wia-wgk { grid-template-columns: 290px minmax(0, 1fr); grid-template-areas: "bild out" "gs gs"; align-items: center } .wia-wgbild { grid-area: bild } .wia-wggs { grid-area: gs; grid-template-columns: repeat(3, minmax(0, 1fr)) } .wia-wgk > .out { grid-area: out; margin: 0; align-self: stretch } }
@container (max-width: 480px) { .wia-wggs { grid-template-columns: 1fr } }

/* WI-02 Treppe */
.wia-trseg.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 6px; height: 128px; border: 0; background: none; padding: 0 }
.wia-trseg.seg > button { height: calc(56px + var(--i, 0) * 22px); min-height: 44px; display: flex; align-items: flex-start; justify-content: center; padding: 8px 6px; border: 2px solid var(--ink); border-radius: 8px 8px 0 0; background: var(--bg); color: var(--ink); font: 700 15px var(--sans); line-height: 1.2; text-align: center }
.wia-trseg.seg > button:nth-child(2) { --i: 1 } .wia-trseg.seg > button:nth-child(3) { --i: 2 } .wia-trseg.seg > button:nth-child(4) { --i: 3 }
.wia-trseg.seg > button[aria-checked="true"] { background: var(--ink); color: var(--bg) }
.wia-trfs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.wia-trf { display: grid; gap: 2px; padding: 8px 10px; border: 2px dashed var(--line); border-radius: 10px; font-size: 14px; line-height: 1.3 }
.wia-trf.on { border-style: solid; border-color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, var(--bg)) }
.wia-trm { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); min-height: 1.3em }
.wia-trf.on .wia-trm { color: var(--ink) }
.wia-trk { margin: 0 0 6px }
@container (max-width: 560px) { .wia-trfs { grid-template-columns: repeat(2, minmax(0, 1fr)) } .wia-trseg.seg > button { font-size: 13px } }

/* WI-03 Regler */
.wia-mlk { padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; display: grid; gap: 6px }
.wia-mlf { margin: 0; padding-left: 20px; font-variant-numeric: tabular-nums }
.wia-mlb { margin: 0 0 4px; font-weight: 800 }
.wia-mlaz p:last-child { margin-bottom: 0 }

/* ===== B3: Interaktionen zum Anfassen ===== */
/* WI-01 Kette: Holz durch die Kette schieben */
.wia-kg.on { border-color: var(--ink); border-top-color: var(--sc); background: color-mix(in srgb, var(--sc) 16%, var(--bg)); box-shadow: 0 0 0 2px var(--ink) }
.wia-kg.war { background: color-mix(in srgb, var(--sc) 6%, var(--bg)) }
.wia-kg { transition: background-color .25s, box-shadow .25s }
.wia-kbahn { display: grid; gap: 6px; margin-top: 6px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px }
.wia-kette { container-type: inline-size }
.wia-kst { margin: 0 0 4px }
/* WI-03 Kurven ziehen */
.wia-zsvg { touch-action: none; user-select: none; -webkit-user-select: none }
.wia-zhit { fill: none; stroke: transparent; stroke-width: 30; cursor: grab; pointer-events: stroke }
.wia-zgrip { cursor: grab }
.wia-zgrip circle { fill: var(--bg); stroke-width: 3 }
.wia-zgrip.n circle { stroke: var(--m-n) }
.wia-zgrip.a circle { stroke: var(--m-a) }
.wia-zgrip path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; pointer-events: none }
.wia-zsvg.zieht, .wia-zsvg.zieht .wia-zhit, .wia-zsvg.zieht .wia-zgrip { cursor: grabbing }
.wia-zctl { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center }
.wia-zgrp { display: flex; gap: 6px; align-items: center }
.wia-zgrp > span { font-weight: 700; min-width: 5.5em }
.wia-zb { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 15px; cursor: pointer }
.wia-zb:disabled { opacity: .35; cursor: default }
.wia-zr { min-height: 44px; padding: 6px 12px; border: 2px solid var(--line); border-radius: 22px; background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer }
.wia-zout { display: grid; gap: 10px; align-content: start; min-width: 0 }
.wia-zerg { padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; font-variant-numeric: tabular-nums }
.wia-zerg p { margin: 0 } .wia-zerg p + p { margin-top: 4px; font-weight: 700 }

/* B7: Handelsregister im Papier-Baukasten; Zeilen nutzen die Papierfarben */
.wia-hrrows { display: grid; gap: 0; font-family: Georgia, 'Times New Roman', serif }
.wia-hrrows .wia-hrf { color: var(--ink) }
.wia-hrrows .wia-hrk { color: var(--muted) }
.wia-hrrows .wia-hrf { border-bottom-color: var(--line) }