/* Netzplan v3: Ergänzungen für echte Inhalte, Abschnitte und Bewegung */
.part > p, .part .txt > p, .blk p { max-width: 68ch }
.blk { display: grid; gap: 14px; max-width: 900px }
.blk > p { margin: 0 }
.blk strong { font-weight: 800 }
.blk h3 { font-size: 21px; margin-top: 6px }
.blk .hint { color: var(--muted); font-size: 15px; font-style: italic }
.blk ul, .blk ol { margin: 0; padding-left: 24px; display: grid; gap: 6px; max-width: 66ch }
.box { border-left: 5px solid var(--c); background: var(--panel); border-radius: 0 12px 12px 0; padding: 14px 18px; display: grid; gap: 10px }
.box.plain { border-left-color: var(--line) }
.box h3 { font-size: 19px; margin: 0 }
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px }
.tbl table { border-collapse: collapse; width: 100%; font-size: 15px }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 8px 12px; border-bottom: 1px solid var(--line) }
.tbl th { background: var(--panel); font-weight: 800 }
.quote { border-left: 4px solid var(--ink); padding-left: 14px; font-style: italic }
.refs { display: flex; flex-wrap: wrap; gap: 8px }
.ref { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--line); background: var(--bg); border-radius: 999px; padding: 4px 14px 4px 6px; min-height: 44px; font-weight: 700; font-size: 15px; text-align: left }
.ref:hover { border-color: var(--ink) }
.ref .arr { font-weight: 900 }
.ixph { border: 2px dashed var(--track); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; color: var(--muted) }
.ixph b { color: var(--ink) }
.ixph pre { white-space: pre-wrap; font: 14px/1.5 var(--sans); margin: 0; max-height: 220px; overflow: auto }
.srcs { margin-bottom: 28px }
.srcs pre { white-space: pre-wrap; font: 14px/1.5 var(--sans); color: var(--muted); margin: 8px 0 0 }
.extl { text-decoration: underline; text-underline-offset: 3px }
.extl::after { content: " ↗"; font-size: .8em }

/* Abschnitte einer Linie */
.grp-lbl { font: 700 15px var(--sans); fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 5px }
.grp-tick { stroke: var(--bg); stroke-width: 6 }
.st.plan .dot { stroke-dasharray: 4 4; fill: var(--bg) }
.st.plan text { fill: var(--muted); font-style: italic }
.stops .gh { flex: none; display: none }
.grpbar { display: flex; padding: 0 var(--gutr) 0 var(--gut); gap: 0; overflow: hidden }
.stop .grp { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); min-height: 18px; display: block; margin-bottom: 6px; white-space: nowrap; overflow: visible }
.stop .grp.first { color: var(--ink) }
.stop.plan .node { border-style: dashed; background: var(--bg) }
.stop.plan .body { opacity: .7 }

/* Bewegung im Plan */
.train { pointer-events: none }
.train rect { stroke: var(--bg); stroke-width: 3 }
.pulse { fill: none; stroke: var(--ink); stroke-width: 3; pointer-events: none }
.route.flow { stroke-dasharray: 2 18; stroke: var(--ink); stroke-opacity: .35; stroke-width: 6; animation: flow 1.6s linear infinite }
@keyframes flow { to { stroke-dashoffset: -40 } }
.draw .trk { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s cubic-bezier(.4, 0, .2, 1) forwards }
@keyframes draw { to { stroke-dashoffset: 0 } }
.draw .st { opacity: 0; animation: fadein .35s ease forwards }
@keyframes fadein { to { opacity: 1 } }
.paused .route.flow, .paused .draw .trk { animation-play-state: paused }
.tip { position: absolute; z-index: 6; pointer-events: none; background: var(--ink); color: var(--bg); border-radius: 8px; padding: 8px 12px; font-size: 14px; max-width: 280px; box-shadow: var(--shadow) }
.tip b { display: block; font-size: 15px }
.card { animation: cardin .2s ease }
@keyframes cardin { from { transform: translateY(6px); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .draw .trk, .draw .st, .card, .route.flow { animation: none !important; stroke-dashoffset: 0; opacity: 1 } }

/* Interaktionen der Linie AW: gemeinsame Bausteine */
.ix { border: 2px solid var(--ink); border-radius: 14px; padding: 16px; display: grid; gap: 14px; max-width: 900px; background: var(--bg) }
.ix .lab { font-weight: 800; margin: 0 }
.ix .sub { color: var(--muted); font-size: 15px; margin: 0 }
.seg { display: flex; flex-wrap: wrap; gap: 6px }
.seg button { border: 2px solid var(--ink); background: var(--bg); border-radius: 8px; padding: 6px 12px; min-height: 44px; font-weight: 700; text-align: left }
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: var(--ink); color: var(--bg) }
.ix .out { background: var(--panel); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px }
.ix .out b { font-size: 17px }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip { border: 2px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 14px; font-weight: 700; background: var(--bg) }
.chip.on { border-color: var(--ink); background: var(--ink); color: var(--bg) }
.ok { color: #0B7A3E } .no { color: #B3261E }
:root[data-theme="dark"] .ok { color: #6FD39A } :root[data-theme="dark"] .no { color: #FF8A80 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ok { color: #6FD39A } :root:not([data-theme="light"]) .no { color: #FF8A80 } }
.lanes { display: grid; gap: 8px }
.lane { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: start; border-top: 1px solid var(--line); padding-top: 8px }
.lane > b { font-size: 15px }
.mini-line { display: flex; align-items: flex-start; overflow-x: auto; padding: 4px 0 }
.mini-line > div { flex: 1 0 110px; display: grid; justify-items: center; text-align: center; gap: 4px; position: relative; font-size: 13px; padding: 0 4px }
.mini-line > div::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 5px; background: var(--track) }
.mini-line > div:first-child::before { left: 50% } .mini-line > div:last-child::before { right: 50% }
.mini-line > div.on::before { background: var(--c) }
.mini-line i { width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 4px solid var(--track); position: relative; z-index: 1; box-sizing: border-box }
.mini-line > div.on i { border-color: var(--c) }
.mini-line > div.cur i { background: var(--c); border-color: var(--c); transform: scale(1.2) }
.mini-line b { font-size: 14px }
@media (max-width: 760px) { .lane { grid-template-columns: 1fr } }

/* Baukasten: Weiche, Mini-Linie, Karten, Dokument, Balken */
.ix .ix-h { font-weight: 800; font-size: 17px; margin: 4px 0 0 }
.ix .ix-k { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 }
.ix p { margin: 0; max-width: 68ch }
.ix .out { gap: 10px }
.ix .out.swap { animation: swapin .22s ease }
@keyframes swapin { from { opacity: 0; transform: translateY(4px) } }
.ix .quote { font-style: normal; border-left: 4px solid var(--c); padding: 2px 0 2px 12px }
.ix .quote .who { display: block; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px }
.ix .think { font-style: italic; color: var(--muted) }
.ix .keyline { border-left: 4px solid var(--ink); padding-left: 12px }
.ix .law { font-size: 14px; color: var(--muted) }
.ix .case { background: var(--panel); border-radius: 10px; padding: 12px 14px }
.ix .big { font-size: 18px } .ix .big b { font-size: 26px; font-weight: 900 }
.seg.col { flex-direction: column; align-items: stretch }
.seg.col button { width: 100% }
.seg button:focus-visible, .chip:focus-visible, .mstop:focus-visible, .note:focus-visible { outline: 3px solid var(--c); outline-offset: 2px }
.tag { display: inline-block; border-radius: 999px; padding: 3px 12px; font-weight: 800; font-size: 14px; background: var(--ink); color: var(--bg) }
.tag.t-ok { background: #0B7A3E; color: #fff } .tag.t-no { background: #B3261E; color: #fff } .tag.t-warn { background: #9A6700; color: #fff }
.mini-box { border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; background: var(--bg) }
.mini-box.good { border-color: #0B7A3E }
.mini-box > b { font-size: 15px }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px }
.ix-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between }
.ix-nav .sub { flex: 1; text-align: center }
.ix .btn[disabled] { opacity: .4; cursor: default }
.card-x { border: 2px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; background: var(--bg); list-style: none }
.card-x.right { border-color: #0B7A3E } .card-x.wrong { border-color: #B3261E }
.card-x .ct { font-weight: 700 }
.cards { display: grid; gap: 10px; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }
.fb p { font-size: 15px }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px }
.checks li { padding-left: 0 } .checks li.cw > b { color: #9A6700 } .checks li.ci > b { color: var(--muted) } :root[data-theme="dark"] .checks li.cw > b { color: #E3B341 } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .checks li.cw > b { color: #E3B341 } } .cy { color: #0B7A3E } .cn { color: #B3261E } .checks li.cy, .checks li.cn { color: var(--ink) } .checks li.cy > b { color: #0B7A3E } .checks li.cn > b { color: #B3261E }
:root[data-theme="dark"] .checks li.cy > b, :root[data-theme="dark"] b.cy { color: #6FD39A } :root[data-theme="dark"] .checks li.cn > b, :root[data-theme="dark"] b.cn { color: #FF8A80 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .checks li.cy > b, :root:not([data-theme="light"]) b.cy { color: #6FD39A } :root:not([data-theme="light"]) .checks li.cn > b, :root:not([data-theme="light"]) b.cn { color: #FF8A80 } }
.ix a { color: inherit }
/* Mini-Linie mit Stationen */
.mini-line .mstop { border: 0; background: none; padding: 0; min-width: 44px; min-height: 44px; display: grid; place-items: center; position: relative; z-index: 1; cursor: pointer }
.mini-line > div::before { transition: background .3s }
.mini-line > div.x i { border-color: var(--muted); background: var(--bg) }
.mini-line > div.x i::after { content: "×"; display: block; font: 900 13px/14px var(--sans); color: var(--muted); text-align: center }
.mini-line .msub { color: var(--muted); font-size: 13px; line-height: 1.3 }
.mini-line > div:has(.mstop)::before { top: 20px }
.mini-line > div:has(.mstop) i { transition: transform .2s, background .2s }
/* Lernorte-Karte */
.lomap { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto }
.lomap .loe { stroke: var(--track); stroke-width: 6; stroke-linecap: round; transition: stroke .25s, stroke-width .25s }
.lomap .loe.on { stroke: var(--c); stroke-width: 9 }
.lomap .lon circle { fill: var(--bg); stroke: var(--track); stroke-width: 6; transition: all .25s }
.lomap .lon.on circle { stroke: var(--c); fill: var(--c) }
.lomap .lon { cursor: pointer }
.lomap .lot { font: 700 14px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 5px }
/* Dokument */
.paper { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); padding: 18px 20px; display: grid; gap: 8px; max-width: 640px }
.paper .ptitle { font-weight: 900; font-size: 19px }
.pline { line-height: 1.55; border-radius: 4px; padding: 2px 4px; transition: background .2s }
.pline.hl, dd.hl, dt.hl { background: color-mix(in srgb, var(--c) 22%, transparent) }
.pn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; font: 800 13px var(--sans); margin-right: 6px; flex: none }
.docgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start }
.notes { display: grid; gap: 8px }
.notes .note { display: flex; gap: 8px; text-align: left; border: 2px solid var(--line); background: var(--bg); border-radius: 10px; padding: 10px; min-height: 44px; align-items: flex-start }
.notes .note[aria-pressed="true"] { border-color: var(--c) }
.notes .note .nt { display: block; color: var(--muted); font-size: 14px; margin-top: 2px }
@media (max-width: 760px) { .docgrid { grid-template-columns: 1fr } }
/* Kalender */
.cal { display: grid; gap: 4px }
.calw { display: grid; grid-template-columns: 74px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center }
.cwl { font-size: 13px; color: var(--muted) }
.cd { text-align: center; border-radius: 6px; padding: 6px 0; font-size: 13px; font-weight: 700; background: var(--panel) }
.cd.on { background: var(--c); color: #fff } .cd.off { background: transparent; color: var(--muted); border: 1px dashed var(--line) }
.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.nums div { background: var(--bg); border-radius: 8px; padding: 8px 10px; display: grid } .nums b { font-size: 20px } .nums span { font-size: 13px; color: var(--muted) }
.rng { display: grid; gap: 4px; font-weight: 700; max-width: 420px }
.rng input { width: 100%; accent-color: var(--c); min-height: 44px }
/* Zeitbalken */
.bars { display: grid; gap: 6px; overflow-x: auto }
.brow { display: grid; grid-template-columns: 112px minmax(260px, 1fr); gap: 10px; align-items: center }
.brow .bl { display: grid; font-size: 14px } .brow .bl small { color: var(--muted) }
.btrack { position: relative; height: 26px; background: var(--panel); border-radius: 6px }
.brow.axis .btrack { background: none; height: 16px }
.tick { position: absolute; transform: translateX(-50%); font: 600 11px var(--mono); color: var(--muted) }
.btrack > span[class^="seg-"] { position: absolute; top: 3px; bottom: 3px; border-radius: 4px }
.seg-work { background: var(--c) } .seg-pause { background: var(--bg); border: 2px solid var(--c); z-index: 1 } .seg-way { background: var(--track) }
.tagctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end }
.fld { display: grid; gap: 2px; font-size: 13px; font-weight: 700 }
.fld select { min-height: 44px; border: 2px solid var(--ink); border-radius: 8px; background: var(--bg); color: var(--ink); padding: 0 8px; font: inherit; font-size: 15px }
.fldp { display: inline-flex; gap: 6px; align-items: flex-end; border: 1px dashed var(--line); border-radius: 10px; padding: 6px }
.ix textarea { width: 100%; border: 2px solid var(--ink); border-radius: 10px; padding: 10px; font: inherit; background: var(--bg); color: var(--ink); box-sizing: border-box }
/* Angebote */
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px }
.offer { border: 2px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 2px }
.offer .big { font-size: 24px; font-weight: 900 } .offer small { color: var(--muted) }
.offer dl, .mini-box dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0 0; font-size: 14px }
.offer dt, .mini-box dt { color: var(--muted) } .offer dd, .mini-box dd { margin: 0 }
.vbar { display: grid; gap: 4px }
.vtrack { height: 14px; background: var(--panel); border-radius: 7px; overflow: hidden }
.vtrack span { display: block; height: 100%; background: var(--c); transition: width .3s }
/* Wochenbalken Mutterschutz */
.wbar { position: relative; height: 64px; background: var(--panel); border-radius: 8px; margin: 18px 0 6px }
.wbar > span { position: absolute; top: 10px; height: 30px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; border-radius: 4px; transition: all .3s; white-space: nowrap; overflow: hidden }
.wbar .wv { background: color-mix(in srgb, var(--c) 70%, #000) } .wbar .wn { background: var(--c) }
.wbar .wg, .wbar .wt { top: -16px; height: auto; color: var(--ink); background: none; transform: translateX(-50%); font-size: 12px }
.wbar .wt { top: 44px }
@media (prefers-reduced-motion: reduce) { .ix .out.swap, .vtrack span, .wbar > span { animation: none; transition: none } }
.ix button.chip { min-height: 44px; padding: 6px 14px; text-align: left }
@media (max-width: 560px) {
  .brow { grid-template-columns: 1fr; gap: 2px } .brow.axis > span:first-child { display: none } .btrack { min-width: 0 }
  .tick:nth-child(even) { display: none }
  .ix { padding: 12px } .mini-line > div { flex-basis: 96px }
  .calw { grid-template-columns: 56px repeat(7, minmax(0, 1fr)) }
}

/* Abwechslung: Karten-Organigramm, Kette, Treppe, Kreislauf, Zeitstrahl, Kalenderblätter, Abrechnung */
.lomap .lon rect { fill: var(--bg); stroke: var(--line); stroke-width: 2.5; transition: all .25s }
.lomap .lon.on rect { stroke: var(--c); fill: color-mix(in srgb, var(--c) 14%, var(--bg)); stroke-width: 3 }
.lomap .loe { stroke-width: 3; stroke-dasharray: 6 6; stroke-linecap: butt }
.lomap .loe.on { stroke-width: 4; stroke-dasharray: none }
.kette { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 26px; counter-reset: k }
.kk { position: relative; flex: 1 1 150px; border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; background: var(--bg) }
.kk:not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font-weight: 900; color: var(--muted) }
.kk .ks { font-size: 13px; color: var(--muted) }
.kk .kic { position: absolute; top: -11px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; background: var(--muted) }
.kk.k-ok { border-color: #0B7A3E } .kk.k-ok .kic { background: #0B7A3E }
.kk.k-no { border-style: dashed; opacity: .75 } .kk.k-no .kic { background: #B3261E }
.kk.k-cur { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--bg)) } .kk.k-cur .kic { background: var(--c) }
.kette.down { flex-direction: column; gap: 22px } .kette.down .kk { flex: none }
.kette.down .kk:not(:last-child)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -21px; transform: none }
.kette.speech .kk { border-radius: 14px 14px 14px 3px }
@media (max-width: 560px) { .kette { flex-direction: column; gap: 22px } .kette .kk:not(:last-child)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -21px; transform: none } }
.treppe { display: flex; align-items: flex-end; gap: 6px; height: 150px }
.stufe { flex: 1; height: calc(40px + var(--h) * 110px); border: 0; border-radius: 10px 10px 0 0; background: color-mix(in srgb, #8F5600 calc((1 - var(--w)) * 100%), #A3221B); color: #fff; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 2px; padding: 8px 10px; text-align: left; font-weight: 800; font-size: 14px; filter: grayscale(.6); transition: filter .2s, transform .2s; cursor: pointer }
.stufe .sn { font-size: 22px; font-weight: 900; line-height: 1 }
.stufe[aria-checked="true"] { filter: none; transform: translateY(-4px); box-shadow: 0 6px 14px rgba(0,0,0,.18) }
.stufe.past { filter: grayscale(.25) }
.stufe:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px }
.kreiswrap { display: grid; place-items: center }
.kreis { width: 220px; height: 220px }
.kreis .ks { fill: var(--panel); stroke: var(--line); stroke-width: 2; cursor: pointer; transition: fill .25s }
.kreis .ks.on { fill: var(--c); stroke: var(--c) }
.kreis .kt { font: 900 16px var(--sans); fill: var(--ink); pointer-events: none }
.kreis .km { font: 800 16px var(--sans); fill: var(--ink) }
.zeitstrahl { display: grid; gap: 4px; margin: 6px 0 }
.zbar { height: 30px; border-radius: 15px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 75%, var(--bg)) 0 14px, var(--c) 14px 28px); display: flex; align-items: center; padding: 0 14px; color: #fff; font-weight: 800; font-size: 14px }
.zev { display: flex; justify-content: space-between; gap: 10px }
.zf { display: grid; gap: 2px; font-size: 14px; border-left: 3px solid var(--ink); padding-left: 8px; max-width: 48% }
.zf.end { border-left: 0; border-right: 3px solid var(--ink); padding: 0 8px 0 0; text-align: right }
.zf:only-child { border-left: 0; border-right: 3px solid var(--ink); text-align: right; margin-left: auto; padding: 0 8px 0 0 }
.zf span { color: var(--muted); font-size: 13px }
.blaetter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.blatt { position: relative; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; justify-items: center; padding: 0 6px 10px; overflow: hidden; text-align: center }
.blatt .bk { width: calc(100% + 12px); background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 700; padding: 4px 0 }
.blatt b { font-size: 34px; font-weight: 900; line-height: 1.2 }
.blatt .bx { font-size: 12px; color: var(--muted) }
.blatt.frist { border: 3px solid var(--c) } .blatt.frist .bk { background: var(--c); color: #fff }
.blatt.nach { opacity: .4 }
.stempel { margin-top: 6px; border: 2px solid var(--c); color: var(--c); border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 900; text-transform: uppercase; transform: rotate(-4deg) }
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px }
.tag.t-x { background: var(--muted); color: var(--bg) }
.slip { border: 2px dashed var(--line); border-radius: 6px; padding: 10px 14px; display: grid; gap: 4px; font-family: var(--mono); max-width: 460px }
.slipline { display: flex; justify-content: space-between; gap: 12px; font-size: 15px } .slipline b { font-size: 20px }
@media (prefers-reduced-motion: reduce) { .stufe, .kreis .ks { transition: none } }
.ix .blatt b { font-size: 34px } .ix .blatt .bk { font-size: 11px }
.kk.k-skip { opacity: .55; border-style: dotted }
.zbar { background: var(--c) }
.ix ol.kette { display: flex; flex-direction: row; padding: 0; margin: 10px 0 4px; gap: 26px }
.ix ol.kette.down { gap: 22px }
.ix ol.kette.down { flex-direction: column }
@media (max-width: 560px) { .ix ol.kette { flex-direction: column; gap: 22px } }
.mini-box { align-content: start }

/* AW-01: Wochenplan, Ebenen, Zeitstrahl, Waage, gestapelte Balken */
.wk { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px }
.wkt { border: 2px solid var(--line); border-radius: 10px; min-height: 64px; padding: 8px; display: grid; gap: 2px; text-align: left; background: var(--bg); position: relative; overflow: hidden }
.wkt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px }
.wkt b { font: 700 13px var(--mono) } .wkt span { font-size: 14px; font-weight: 700 }
.wkt[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.wk-betrieb::before, .wkk.wk-betrieb::before { background: var(--c) }
.wk-schule::before, .wkk.wk-schule::before { background: repeating-linear-gradient(45deg, var(--c) 0 4px, transparent 4px 8px) }
.wk-ueb::before, .wkk.wk-ueb::before { background: var(--track) }
.wk-leg { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; color: var(--muted) }
.wkk { display: inline-flex; align-items: center; gap: 6px } .wkk::before { content: ""; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line) }
.wk-dl { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 4px 14px; margin: 0; font-size: 15px }
.wk-dl dt { color: var(--muted) } .wk-dl dd { margin: 0 }
.eb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr); gap: 0 6px; align-items: stretch }
.eb-cell { display: grid; gap: 2px; padding-bottom: 22px; position: relative }
.eb-cell.down::after { content: "↓"; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-weight: 900; color: var(--muted); line-height: 22px }
.ebr { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.ebb { width: 100%; min-height: 48px; border: 2px solid var(--line); border-radius: 10px; background: var(--bg); padding: 8px 12px; font-weight: 800; text-align: left }
.ebb[aria-pressed="true"], .eb-link[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.eb-link { align-self: start; margin-top: 18px; min-height: 48px; border: 2px dashed var(--c); border-radius: 10px; background: var(--bg); display: grid; place-items: center; gap: 0; padding: 2px; font-weight: 900; font-size: 20px; line-height: 1 }
.eb-link small { font: 700 10px var(--mono); letter-spacing: .02em }
@media (max-width: 560px) { .eb-grid { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) } .ebb { padding: 8px; font-size: 13px; hyphens: manual; overflow-wrap: break-word } .ebr { font-size: 10px; letter-spacing: 0 } .eb-link small { display: none } }
.zs { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 8px; position: relative; padding-top: 4px }
.zs::before { content: ""; position: absolute; left: 12px; right: calc(20% + 8px); top: 19px; height: 4px; background: var(--c); border-radius: 2px }
.zst { position: relative; border: 0; background: none; padding: 40px 4px 4px; text-align: left; display: grid; gap: 2px; min-height: 44px; border-radius: 8px }
.zst .zsd { position: absolute; left: 4px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 4px solid var(--c) }
.zst.aside .zsd { border-style: dashed; border-color: var(--muted) }
.zst b { font-size: 15px; line-height: 1.2 } .zst span:last-child { font-size: 13px; color: var(--muted) }
.zst[aria-pressed="true"] .zsd { background: var(--c) }
.zst[aria-pressed="true"] b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px }
@media (max-width: 640px) { .zs { grid-template-columns: 1fr; gap: 2px } .zs::before { left: 13px; right: auto; top: 10px; bottom: 60px; width: 4px; height: auto } .zst { padding: 6px 4px 6px 38px } .zst .zsd { top: 8px } }
.waagewrap { display: flex; justify-content: center }
.waage { width: 100%; max-width: 380px; height: auto; overflow: visible }
.waage .wf { fill: var(--ink) } .waage .wl { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; fill: none } .waage .wl.thin { stroke-width: 2 }
.waage .wp { fill: var(--c); stroke: var(--ink); stroke-width: 2 } .waage .wt { font: 700 13px var(--mono); fill: var(--ink) }
.waage .wd { fill: var(--ink); stroke: var(--bg); stroke-width: 2; animation: wdrop .35s cubic-bezier(.3, 1.5, .6, 1) }
@keyframes wdrop { from { transform: translateY(-26px); opacity: 0 } to { transform: none; opacity: 1 } }
.waage .wmove { transition: transform .6s cubic-bezier(.3, 1.3, .5, 1) }
@media (prefers-reduced-motion: reduce) { .waage .wmove { transition: none } .waage .wd { animation: none } }
.ix .chips .chip { text-align: left }
.stk { display: grid; gap: 4px } .stk-l { font-size: 15px }
.stk-b { display: flex; gap: 3px; width: 100% }
.stk-s { min-height: 48px; border: 2px solid var(--ink); border-radius: 6px; font: 700 13px var(--mono); padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: clip }
.stk-s.s-vertrag { background: var(--c); color: #fff } .stk-s.s-frei { background: var(--bg) } .stk-s.s-such { background: repeating-linear-gradient(45deg, var(--panel) 0 6px, var(--bg) 6px 12px) }
.stk-s[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px }

/* Haltwechsel: Der Zug fährt im Haltplan zum neuen Halt, der Inhalt fährt in Fahrtrichtung ein */
.hnav { padding-left: 6px; margin-left: -6px }
.halte { position: relative }
.zug { position: absolute; left: -3px; width: 22px; height: 34px; border-radius: 8px 8px 6px 6px; background: var(--ink); border: 3px solid var(--c); box-sizing: border-box; z-index: 2; pointer-events: none; transition: top .6s cubic-bezier(.45, 0, .2, 1), opacity .25s .55s }
.zug::before { content: ""; position: absolute; left: 3px; right: 3px; top: 4px; height: 8px; border-radius: 3px; background: var(--bg); opacity: .85 }
.zug.da { opacity: 0 }
.hgrid > article.ride-f { animation: ride-f .55s cubic-bezier(.2, .8, .2, 1) }
.hgrid > article.ride-b { animation: ride-b .55s cubic-bezier(.2, .8, .2, 1) }
@keyframes ride-f { from { transform: translateX(56px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes ride-b { from { transform: translateX(-56px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .zug { display: none } .hgrid > article.ride-f, .hgrid > article.ride-b { animation: none } }

/* Interaktionen dürfen nie breiter als die Spalte werden */
.ix { grid-template-columns: minmax(0, 1fr) }
.stufe { min-width: 0; overflow-wrap: anywhere; hyphens: auto }
@media (max-width: 560px) { .treppe { gap: 4px } .stufe { padding: 6px 5px; font-size: 12px } .stufe .sn { font-size: 18px } }

/* AW-02: Vertragsformular, Kalenderblätter, Klauseln, Vergütungsbalken, Spiegel, Haftungsbalken, Kennzahlen, Lösungsquote */

.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line) }
.vf { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-content: start; column-gap: 10px; row-gap: 2px; text-align: left; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--bg); padding: 10px 12px; min-height: 64px; font: inherit; color: inherit }
.vf .vn { grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); font: 700 12px var(--mono); display: grid; place-items: center; box-sizing: border-box }
.vf .vk { font-size: 13px; font-weight: 700; color: var(--muted); overflow-wrap: anywhere; hyphens: auto }
.vf .vv { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; hyphens: auto }
.vf:hover { background: var(--panel) }
.vf[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 9%, var(--bg)); box-shadow: inset 0 0 0 2px var(--c); z-index: 1 }
.vf[aria-pressed="true"] .vn { background: var(--c); border-color: var(--c); color: #fff }
.wegb { border: 1px solid var(--line); cursor: pointer; font: inherit; color: inherit; min-height: 44px }
.wegb[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--c) }
@media (max-width: 560px) { .blaetter { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.klpaper { display: grid; gap: 6px }
.kl { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; text-align: left; border: 0; border-top: 1px dashed var(--line); background: none; padding: 10px 4px; min-height: 44px; font: inherit; color: inherit }
.kl .kln { font: 700 13px var(--mono); color: var(--muted); padding-top: 2px } .kl .klt { line-height: 1.4 }
.kl { grid-template-columns: auto minmax(0, 1fr) }
.kl .klst { display: none; grid-column: 2; justify-self: start; margin-top: 2px }
.kl.seen .klst { display: inline-block }
.kl.kl-no .klst { border-color: #B3261E; color: #B3261E } .kl.kl-ok .klst { border-color: #0B7A3E; color: #0B7A3E }
.kl.kl-no .klt { text-decoration: line-through; text-decoration-color: #B3261E; text-decoration-thickness: 2px }
.kl[aria-pressed="true"] { background: var(--panel); border-radius: 6px }
.mvc { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; padding-top: 30px }
.mvb { display: grid; justify-items: center; align-content: end; gap: 4px; border: 0; background: none; padding: 0; min-height: 44px; font: inherit; color: inherit }
.mvb .mvv { font: 700 14px var(--mono) }
.mvb .mvbar { width: 100%; max-width: 90px; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--c) 55%, var(--bg)); border: 2px solid var(--c); border-bottom: 0; transition: height .4s ease }
.mvb[aria-pressed="true"] .mvbar { background: var(--c) }
.mvb .mvl { display: grid; justify-items: center; height: 36px; border-top: 2px solid var(--ink); width: 100%; padding-top: 2px } .mvb .mvl b { font-size: 14px } .mvb .mvl small { font-size: 12px; color: var(--muted) }
.mvt { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--ink); pointer-events: none; z-index: 1 }
.mvt span { position: absolute; right: 0; bottom: 2px; font: 700 12px var(--mono); background: var(--bg); padding: 0 4px }
@media (prefers-reduced-motion: reduce) { .mvb .mvbar { transition: none } }
.spiegel { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); column-gap: 16px; row-gap: 0 }
.spiegel.swap { animation: swapin .22s ease }
.sps { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; align-content: start; margin-bottom: 12px }
.spp, .spr { border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; align-content: start }
.spp { background: var(--panel); border-left: 6px solid var(--ink) }
.spr { border: 2px dashed var(--c) }
.spp > b, .spr > b { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .06em }
.spa { font: 700 13px var(--mono); color: var(--muted); padding-left: 12px }
.hbar { display: flex; height: 34px; border-radius: 8px; overflow: hidden; border: 2px solid var(--ink) }
.hbar span { display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font: 700 13px var(--mono); transition: width .5s ease }
.hbar .hb-b { background: var(--panel) } .hbar .hb-d { background: var(--c); color: #fff }
.hleg { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; color: var(--muted); margin: -6px 0 0 }
.hk { display: inline-flex; align-items: center; gap: 6px } .hk::before { content: ""; width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--ink) }
.hk-b::before { background: var(--panel) } .hk-d::before { background: var(--c) }
@media (prefers-reduced-motion: reduce) { .hbar span { transition: none } }
.mini-box.stat { gap: 2px } .statn { font-size: 26px !important; font-weight: 900 }
.qbars { display: grid; gap: 10px }
.qrow { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 10px; align-items: center }
.ql { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; hyphens: auto }
.qt { position: relative; display: flex; align-items: center; gap: 8px; height: 30px }
.qf { height: 100%; border-radius: 0 6px 6px 0; background: var(--c) } .qrow.all .qf { background: var(--ink) }
.qt b { font: 700 15px var(--mono); white-space: nowrap }
@media (max-width: 560px) { .qrow { grid-template-columns: 1fr; gap: 2px } }
@media (max-width: 560px) { .tbl th, .tbl td { padding: 8px; hyphens: auto; overflow-wrap: break-word } .tbl table { font-size: 14px } }
@media (max-width: 560px) { .ix ol.kette .kk { flex: none } }
/* Seitenliste: Abschnittslisten klappen während der Zugfahrt weich auf und zu; abwärts sitzt das Fenster vorn, also unten */
.subghost { transition: height .6s cubic-bezier(.45, 0, .2, 1) }
.hnav .sub.fold { overflow: hidden; transition: height .6s cubic-bezier(.45, 0, .2, 1), margin .6s cubic-bezier(.45, 0, .2, 1) }
.zug.ab::before { top: auto; bottom: 4px }
/* Ende: Milas Ausbildung als Balken, darunter die Lupe mit Fristen in Tagen */
.zt { display: grid; gap: 4px; margin: 4px 0 14px }
.ztcap { margin: 0 0 4px; font-size: 15px }
.ztpl { height: 22px; position: relative }
.ztpl > span { position: absolute; left: 0; bottom: 0; height: 8px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 3px 3px 0 0; box-sizing: border-box }
.ztpl > span span { position: absolute; left: 0; bottom: 8px; font: 700 12px var(--mono); white-space: nowrap }
.ztbar { position: relative; display: flex; height: 26px; border-radius: 6px; overflow: hidden; border: 2px solid var(--ink); background: var(--bg) }
.ztbar > span { height: 100%; flex: none }
.ztp { position: absolute; left: 0; top: 0; z-index: 1; border-right: 2px dashed var(--ink); box-sizing: border-box; pointer-events: none }
.ztd { background: var(--c) }
.ztr { background: repeating-linear-gradient(135deg, var(--panel) 0 6px, var(--line) 6px 8px) }
.ztr.go { background: color-mix(in srgb, var(--c) 30%, var(--bg)) }
.zte { background: repeating-linear-gradient(90deg, var(--c) 0 8px, transparent 8px 12px); opacity: .6 }
.ztax { position: relative; height: 18px; font: 500 12px var(--mono); color: var(--muted) }
.ztax span { position: absolute; left: 0; white-space: nowrap } .ztax span.r { transform: translateX(-100%) }
.ztleg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 14px; color: var(--muted) }
.zk { display: inline-flex; align-items: center; gap: 6px } .zk::before { content: ""; width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--ink); box-sizing: border-box }
.zk-d::before { background: var(--c) } .zk-r::before { background: repeating-linear-gradient(135deg, var(--panel) 0 3px, var(--line) 3px 5px) } .zk-g::before { background: color-mix(in srgb, var(--c) 30%, var(--bg)) } .zk-e::before { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 6px) }
.zl { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 12px 14px 8px; margin: 0 0 14px }
.zlh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 4px } .zlh .ix-k { margin: 0 }
.zltag { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.zlband { position: relative; height: 34px }
.zlband > span { position: absolute; bottom: 0; height: 10px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box }
.zlband > span span { position: absolute; left: 0; bottom: 10px; font: 700 12px var(--mono); white-space: nowrap }
.zltrack { display: flex; height: 34px; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden }
.zltrack.open { border-right-style: dashed; border-radius: 6px 0 0 6px }
.zlseg { flex: none; height: 100%; display: flex; align-items: center; overflow: hidden; box-sizing: border-box }
.zlseg + .zlseg { border-left: 2px solid var(--ink) }
.zlseg > span { padding: 0 8px; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.zlseg-run { background: var(--c); color: #fff }
.zlseg-frist { background: repeating-linear-gradient(135deg, var(--c) 0 10px, color-mix(in srgb, var(--c) 70%, var(--bg)) 10px 14px); color: #fff }
.zlseg-frist > span { background: var(--c); border-radius: 4px; margin-left: 6px; padding: 1px 6px }
.zlseg-wait { background: color-mix(in srgb, var(--c) 30%, var(--bg)); color: var(--ink) }
.zlseg-gone { background: repeating-linear-gradient(135deg, var(--panel) 0 6px, var(--line) 6px 8px); color: var(--muted) }
.zlmarks { position: relative; height: 112px }
.zm { position: absolute; left: var(--x); top: calc(var(--row) * 54px); display: grid; gap: 0; max-width: 58%; padding: 4px 0 0 8px; border-left: 2px solid var(--ink); font-size: 14px; line-height: 1.3 }
.zm::before { content: ""; position: absolute; left: -2px; top: calc(var(--row) * -54px - 2px); height: calc(var(--row) * 54px + 2px); border-left: 2px solid var(--ink) }
.zm.r { left: auto; right: calc(100% - var(--x)); border-left: 0; border-right: 2px solid var(--ink); padding: 4px 8px 0 0; text-align: right }
.zm.r::before { left: auto; right: -2px }
.zm b { font: 700 13px var(--mono) }
@media (max-width: 560px) { .zlseg > span { font-size: 12px; padding: 0 4px } .zm { max-width: 70%; font-size: 13px } .zlmarks { height: 130px } .zm { top: calc(var(--row) * 62px) } .zm::before { top: calc(var(--row) * -62px - 2px); height: calc(var(--row) * 62px + 2px) } }
/* AW-03: Schulwoche, Ruhezeit-Uhr, Urlaubskästchen, Resturlaub, Geld bei Krankheit, Darf-ich-Karten, Mit 18, Branchenband, Untersuchungen, Schutzfristen */
.swk { display: grid; gap: 6px }
.swrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px; gap: 8px; align-items: center }
.swd { font: 700 14px var(--mono) } .swh { font: 500 12px var(--mono); color: var(--muted) }
.swtrack { display: flex; height: 34px; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--bg) }
.sws { flex: none; height: 100%; display: flex; align-items: center; overflow: hidden; box-sizing: border-box }
.sws + .sws { border-left: 2px solid var(--ink) }
.sws > span { padding: 0 6px; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sws-schule { background: repeating-linear-gradient(135deg, var(--c) 0 10px, color-mix(in srgb, var(--c) 70%, var(--bg)) 10px 14px); color: #fff }
.sws-schule > span { background: var(--c); border-radius: 4px; margin-left: 4px; padding: 1px 6px }
.sws-betrieb { background: var(--c); color: #fff }
.sws-weg { background: var(--track) }
.sws-frei { background: color-mix(in srgb, var(--c) 18%, var(--bg)); color: var(--ink) }
.swk-schule::before { background: repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 70%, var(--bg)) 3px 5px) }
.swk-betrieb::before { background: var(--c) } .swk-weg::before { background: var(--track) } .swk-frei::before { background: color-mix(in srgb, var(--c) 18%, var(--bg)) }
.utrow { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line) }
.utl { display: grid } .utl small { color: var(--muted); font-size: 13px }
.utk { display: flex; flex-wrap: wrap; gap: 4px }
.utk i { width: 16px; height: 16px; border-radius: 3px; box-sizing: border-box; border: 2px solid var(--ink) }
.ut-w { background: var(--panel) } .ut-a { background: var(--c); border-color: var(--c) !important }
.ut-a.part { background: linear-gradient(90deg, var(--c) var(--f), var(--bg) var(--f)) }
@media (max-width: 560px) { .utrow { grid-template-columns: 1fr; gap: 4px } }
.rj-jahr { background: var(--c); color: #fff } .rj-weg { background: repeating-linear-gradient(135deg, var(--panel) 0 6px, var(--line) 6px 8px); color: var(--muted) }
.rj-bleibt { background: color-mix(in srgb, var(--c) 30%, var(--bg)); color: var(--ink) }
.rj-ueber { background: repeating-linear-gradient(135deg, var(--c) 0 10px, color-mix(in srgb, var(--c) 70%, var(--bg)) 10px 14px); color: #fff }
.rj-ueber > span { background: var(--c); border-radius: 4px; margin-left: 6px; padding: 1px 6px }
.rjm { height: calc(var(--n) * 54px + 4px) }
.kgbar { display: grid; gap: 4px }
.kg-ef { background: var(--c); color: #fff } .kg-kg { background: color-mix(in srgb, var(--c) 30%, var(--bg)); color: var(--ink) } .kg-job { background: var(--bg); color: var(--muted) }
.kgk-ef::before { background: var(--c) } .kgk-kg::before { background: color-mix(in srgb, var(--c) 30%, var(--bg)) } .kgk-job::before { background: var(--bg) }
.ztax span.r { transform: translateX(-100%) }
.kl.kl-mid .klst { border-color: #9A6700; color: #9A6700 }
.brb { display: grid; gap: 6px }
.brrow { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center }
.brrow > b { font-size: 14px }
.brtrack { position: relative; height: 34px; background: var(--panel); border-radius: 6px; overflow: hidden }
.brrow.axis .brtrack { background: none; height: 16px; overflow: visible }
.brn { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 6px) }
.brok { position: absolute; top: 4px; bottom: 4px; background: var(--c); border-radius: 4px; color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden }
.brok > span { font-size: 13px; font-weight: 700; white-space: nowrap }
.brk-ok::before { background: var(--c) } .brk-n::before { background: repeating-linear-gradient(90deg, var(--line) 0 2px, var(--bg) 2px 4px) }
.brdl { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 4px 14px; margin: 0; font-size: 15px }
.brdl dt { color: var(--muted) } .brdl dd { margin: 0 }
@media (max-width: 560px) { .tick.hide-s { display: none } .brdl { grid-template-columns: 1fr } .brdl dd { margin-bottom: 6px } }
.mf { display: grid; gap: 6px }
.mfrow { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: center }
.mfrow > b { font-size: 14px; hyphens: manual }
.mftrack { position: relative; height: 34px; background: var(--panel); border-radius: 6px }
.mftrack > span[class^="mf-"] { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; display: flex; align-items: center; overflow: hidden; box-sizing: border-box; transition: left .3s, width .3s }
.mftrack > span > span { padding: 0 6px; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mf-vor { background: color-mix(in srgb, var(--c) 30%, var(--bg)); color: var(--ink); border: 2px solid var(--c) } .mf-nach { background: var(--c); color: #fff }
.mf-ks { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 7px); border: 2px solid var(--ink); color: var(--ink); border-left: 0; border-radius: 0 4px 4px 0 !important }
.mf-ks > span { background: var(--bg); border-radius: 4px; margin-left: 6px; padding: 1px 6px !important }
.mfrow.axis .mftrack { background: none; height: 40px }
.mfax > span { position: absolute; top: 0; transform: translateX(-50%); font: 500 12px var(--mono); color: var(--muted) } .mfax > span.r { transform: translateX(-100%) }
.mfax .mft, .mfax .mfg { top: 18px; font-weight: 700; color: var(--ink); white-space: nowrap }
.mfk-vor::before { background: color-mix(in srgb, var(--c) 30%, var(--bg)) } .mfk-nach::before { background: var(--c) } .mfk-ks::before { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px) }
@media (max-width: 560px) { .mfrow { grid-template-columns: 1fr; gap: 2px } .mfrow.axis > span:first-child { display: none } .swrow { grid-template-columns: 30px minmax(0, 1fr) } .swh { display: none } }
@media (prefers-reduced-motion: reduce) { .mftrack > span[class^="mf-"], .achtl.swap { transition: none; animation: none } }
.rjk-jahr::before { background: var(--c) } .rjk-weg::before { background: repeating-linear-gradient(135deg, var(--panel) 0 3px, var(--line) 3px 5px) } .rjk-bleibt::before { background: color-mix(in srgb, var(--c) 30%, var(--bg)) } .rjk-ueber::before { background: repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 70%, var(--bg)) 3px 5px) }
.zl .hleg { margin: 2px 0 4px }
@media (max-width: 560px) { .ztax span.hide-s { display: none } }
.ztax span.c { transform: translateX(-50%) }
.mfrow.axis .mftrack { height: 58px }
.mfax .mfg.low { top: 36px }
/* AW-03 Runde 2: Ruhezeit-Rechner, Weg der Krankmeldung, Karten mit 18, Kalenderblätter Untersuchung */
.rz { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; margin: 4px 0 12px }
.rzk { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg) }
.rzk-z { border-color: var(--c); box-shadow: inset 0 0 0 2px var(--c) }
.rzl { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted) }
.rzz { font: 700 clamp(26px, 7vw, 40px)/1 var(--mono); color: var(--ink); padding: 6px 10px; background: var(--panel); border-radius: 6px }
.rzz.weg { font-size: 18px; text-decoration: line-through; color: var(--muted); background: none; padding: 0 }
.rzn { font-size: 12px; font-weight: 700; color: var(--c); text-align: center }
.rzr { display: grid; justify-items: center; gap: 2px; min-width: 76px; position: relative; padding-bottom: 14px }
.rzr::after { content: ""; position: absolute; left: 0; right: 8px; bottom: 5px; height: 3px; background: var(--ink) }
.rzr::before { content: ""; position: absolute; right: 0; bottom: 0; border-left: 11px solid var(--ink); border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent }
.rzp { font: 900 18px var(--sans); color: var(--ink); white-space: nowrap }
@media (max-width: 340px) { .rz { grid-template-columns: 1fr } .rzr::before, .rzr::after { display: none } }
.sq { display: grid; gap: 0; margin: 4px 0 10px; background: linear-gradient(90deg, transparent calc(12.5% - 1px), var(--line) calc(12.5% - 1px) calc(12.5% + 1px), transparent 0 calc(37.5% - 1px), var(--line) 0 calc(37.5% + 1px), transparent 0 calc(62.5% - 1px), var(--line) 0 calc(62.5% + 1px), transparent 0 calc(87.5% - 1px), var(--line) 0 calc(87.5% + 1px), transparent 0) }
.sqh, .sqr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.sqh { align-items: end } .sqh b { justify-self: center; font-size: 13px; padding: 6px 8px; background: var(--bg); border: 2px solid var(--ink); border-radius: 8px; margin-bottom: 6px; max-width: calc(100% - 4px); box-sizing: border-box; text-align: center; hyphens: manual; overflow-wrap: anywhere; line-height: 1.2 }
.sqr { height: 40px; align-items: center; transition: opacity .3s }
.sqr.spaeter { opacity: .15 }
.sqa { position: relative; height: 3px; background: var(--ink); margin: 0 calc(50% / var(--k)) }
.sqa::after { content: ""; position: absolute; top: -6px; border: 7.5px solid transparent }
.sqa.nr::after { right: -2px; border-left: 11px solid var(--ink); border-right: 0 }
.sqa.nl::after { left: -2px; border-right: 11px solid var(--ink); border-left: 0 }
.sqa.pull { background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 10px) }
.sqa i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); font: 700 12px/20px var(--mono); text-align: center; font-style: normal; box-sizing: border-box }
.sqr.jetzt .sqa { background-color: var(--c) } .sqr.jetzt .sqa.pull { background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px) }
.sqr.jetzt .sqa.nr::after { border-left-color: var(--c) } .sqr.jetzt .sqa.nl::after { border-right-color: var(--c) } .sqr.jetzt .sqa i { background: var(--c); border-color: var(--c); color: #fff }
@media (max-width: 560px) { .sqh b { font-size: 11px; padding: 4px 4px } }
.eaus { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 6px 0 }
.eaud { border: 2px solid var(--ink); border-radius: 8px; padding: 10px 12px; background: var(--bg) }
.eaud > b { display: block; font-size: 14px; margin-bottom: 6px }
.eaud dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 13px }
.eaud dt { color: var(--muted) } .eaud dd { margin: 0; font-weight: 700 }
.eaud dd.nix { color: var(--muted); font-weight: 400; font-style: italic; background: repeating-linear-gradient(135deg, var(--panel) 0 6px, var(--bg) 6px 10px); padding: 0 6px; border-radius: 4px }
.eaud.ekk dt:nth-last-of-type(1), .eaud.ekk dd:last-child { color: var(--c) }
.akg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 }
.akc { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; perspective: 800px }
.akk { margin: 0; font-size: 13px; font-weight: 700 }
.aki { display: grid; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, .7, .3, 1) calc(var(--i) * 45ms) }
.akf { grid-area: 1 / 1; display: grid; align-content: start; gap: 4px; padding: 12px 10px; border-radius: 10px; border: 2px solid var(--ink); backface-visibility: hidden; -webkit-backface-visibility: hidden; font-size: 13px; line-height: 1.3; min-height: 92px }
.akf.vorn { background: var(--bg) }
.akf.hinten { background: var(--c); border-color: var(--c); color: #fff; transform: rotateY(180deg) }
.akf small { margin-top: auto; font: 500 11px var(--mono); opacity: .75 }
.akv { font: 900 22px/1.1 var(--sans) }
.akg.ab18 .akc:not(.same) .aki { transform: rotateY(180deg) }
.akc.same .akf { background: var(--panel); border-style: dashed }
.akt { font: 700 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em }
.akg.ab18 .akc:not(.same) .akt { color: var(--c) }
@media (max-width: 560px) { .akg { grid-template-columns: repeat(2, minmax(0, 1fr)) } .akv { font-size: 19px } }
@media (prefers-reduced-motion: reduce) { .aki { transition: none } }
.ukal { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; counter-reset: ub }
.ublatt { counter-increment: ub; display: grid; align-content: start; gap: 4px; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; background: var(--bg); padding: 0 10px 10px; font-size: 13px; line-height: 1.3 }
.ubm { margin: 0 -10px 4px; padding: 5px 10px; background: var(--ink); color: var(--bg); font: 700 12px var(--mono) }
.ubm::before { content: counter(ub) " · "; opacity: .7 }
.ublatt > b { font-size: 15px; hyphens: manual; overflow-wrap: break-word }
.ublatt.ende .ubm { background: var(--c) } .ublatt.ende { border-color: var(--c) }
.ublatt.geb { border-style: dashed } .ublatt.geb .ubm { background: var(--muted) }
.ublatt.weg { opacity: .45; background: repeating-linear-gradient(135deg, var(--panel) 0 6px, var(--bg) 6px 10px) } .ublatt.weg > b { text-decoration: line-through } .ublatt.weg .ubm { background: var(--muted) }
.ublatt.weg .ubx { font-weight: 700 }
@media (max-width: 560px) { .ukal { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
/* AW-09: Zeugnismappe, Schulabschluss-Prüfung, DQR-Stufen, Finanzierungsplan, Europass, Hundert Kästchen */
.z9mappe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start }
.z9kopf { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 6px }
.z9k-on::before { border-color: var(--c) } .z9k-mark::before { background: color-mix(in srgb, var(--c) 16%, var(--bg)); border-color: transparent }
@media (max-width: 700px) { .z9mappe { grid-template-columns: 1fr } }

.z9row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; border-top: 1px solid var(--line); padding-top: 12px }
.z9row > div { display: grid; gap: 8px; min-width: 0 }
.z9n { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 900; display: grid; place-items: center; font-size: 14px }

.z9dqr { display: grid; gap: 4px }
.z9dh { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); gap: 6px; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.z9dh span:nth-child(2) { text-align: center } .z9dh span:last-child { text-align: right }
.z9dqr [role="list"] { display: grid; gap: 4px }
.z9dr { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); gap: 6px; align-items: stretch }
.z9lv { display: grid; place-items: center; font-weight: 900; font-size: 18px; border-radius: 8px; background: var(--ink); color: var(--bg) }
.z9c { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; border: 2px solid var(--line); border-radius: 8px; font-size: 14px; line-height: 1.3; background: var(--bg); transition: background .2s, border-color .2s, opacity .2s }
.z9R { justify-content: space-between; flex-direction: row-reverse }
.z9c.leer { color: var(--muted); border-style: dashed }
.z9ct { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; hyphens: auto }
.z9st { flex: none; width: 24px; height: 24px; border-radius: 50%; display: none; place-items: center; font-weight: 900; font-size: 13px; background: var(--bg); color: var(--c) }
.z9dqr.weg .z9c:not(.on) { opacity: .5 }
.z9c.on { background: var(--c); border-color: var(--c); color: #fff; font-weight: 700 }
.z9c.on .z9st { display: grid }
.z9k-weg::before { background: var(--c); border-color: var(--c) }
.z9wl { margin: 0; padding-left: 22px; display: grid; gap: 4px }
@media (max-width: 480px) { .z9dr, .z9dh { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) } .z9c { font-size: 13px; padding: 6px 7px } }

.z9dl { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 6px 14px; margin: 0; font-size: 15px }
.z9dl dt { color: var(--muted) } .z9dl dd { margin: 0 }
@media (max-width: 560px) { .z9dl { grid-template-columns: 1fr; gap: 2px } .z9dl dd { margin-bottom: 6px } }

.z9ctl { display: grid; gap: 6px }
.z9plan { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start }
.z9bill { border: 2px solid var(--ink); border-radius: 4px; padding: 12px 14px; background: var(--bg); display: grid; gap: 8px; font-variant-numeric: tabular-nums }
.z9bill dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 0; font-size: 15px }
.z9bill dd { margin: 0; text-align: right; white-space: nowrap; font-weight: 700 }
.z9bill dt.z9-sum, .z9bill dd.z9-sum { border-top: 2px solid var(--ink); padding-top: 6px; font-weight: 900; font-size: 17px }
.z9bill dt.z9-z::before, .z9bill dt.z9-r::before, .z9bill dt.z9-p::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 1px }
.z9bill dt.z9-z::before { background: var(--c) } .z9bill dt.z9-r::before { background: color-mix(in srgb, var(--c) 45%, var(--bg)) }
.z9bill dt.z9-p::before { background: repeating-linear-gradient(135deg, var(--c) 0 2px, var(--bg) 2px 4px) }
.z9barw { display: grid; gap: 10px }
.z9bar { display: flex; height: 48px; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden }
.z9bar > span { height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: width .3s; box-sizing: border-box }
.z9bar > span + span { border-left: 2px solid var(--ink) }
.z9bar > span > span { font-size: 13px; font-weight: 800; white-space: nowrap; padding: 0 4px }
.z9bar .z9-z { background: var(--c); color: #fff }
.z9bar .z9-r { background: color-mix(in srgb, var(--c) 45%, var(--bg)); color: var(--ink) }
.z9bar .z9-p { background: repeating-linear-gradient(135deg, var(--c) 0 3px, var(--bg) 3px 7px); color: var(--ink) }
.z9bar .z9-p > span { background: var(--bg); border-radius: 4px }
.z9bar .z9-e { background: var(--panel); color: var(--ink) }
.z9k-z::before { background: var(--c) } .z9k-r::before { background: color-mix(in srgb, var(--c) 45%, var(--bg)) }
.z9k-p::before { background: repeating-linear-gradient(135deg, var(--c) 0 2px, var(--bg) 2px 4px) } .z9k-e::before { background: var(--panel) }
@media (max-width: 760px) { .z9plan { grid-template-columns: 1fr } }

.z9ep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start }
@media (max-width: 640px) { .z9ep { grid-template-columns: 1fr } }

.z9hg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.z9h { margin: 0; display: grid; gap: 8px; align-content: start }
.z9rs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 240px }
.z9rs i { aspect-ratio: 1; border: 1.5px solid var(--track); border-radius: 2px; background: var(--bg); transition: background .25s calc(var(--i) * 6ms), border-color .25s calc(var(--i) * 6ms) }
.z9rs i.on { background: var(--c); border-color: var(--c) }
.z9h figcaption { font-size: 15px; line-height: 1.3 }
.z9hv { font-size: 24px; font-weight: 900 }
.z9k-hon::before { background: var(--c); border-color: var(--c) } .z9k-hoff::before { background: var(--bg); border-color: var(--track) }
@media (max-width: 560px) { .z9hg { grid-template-columns: 1fr } .z9h { grid-template-columns: 150px minmax(0, 1fr); align-items: center } .z9rs { max-width: 150px; gap: 2px } }
@media (prefers-reduced-motion: reduce) { .z9c, .z9bar > span, .z9rs i { transition: none } }

/* AW-05: Gesprächsprotokoll, Befristungs-Baukasten, Angebote mit Kurstag, Nachweis-Monat, Folie über dem Vertrag, Prüfweg durch die Rangfolge */
.b5sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%) }

.b5gs { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start }
.b5gs > .out { position: sticky; top: 12px }
.b5chat { display: grid; gap: 8px; justify-items: start }
.b5who { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.b5who.r { justify-self: end; margin-top: 6px }
.b5q { position: relative; text-align: left; max-width: 92%; min-height: 44px; border: 2px solid var(--line); background: var(--panel); border-radius: 16px 16px 16px 4px; padding: 9px 14px; font-size: 15px; line-height: 1.35; display: grid; gap: 4px; transition: border-color .2s }
.b5q[aria-pressed="true"] { border-color: var(--ink) }
.b5stp { justify-self: start; font: 800 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; border: 2px solid currentColor; border-radius: 4px; padding: 1px 6px; display: none; transform: rotate(-2deg) }
.b5q.seen .b5stp { display: inline-block }
.b5q[data-st="ok"] .b5stp { color: #0B7A3E } .b5q[data-st="no"] .b5stp { color: #B3261E } .b5q[data-st="mal"] .b5stp { color: #9A6700 }
.b5a { justify-self: end; max-width: 85%; background: var(--ink); color: var(--bg); border-radius: 16px 16px 4px 16px; padding: 9px 14px; font-size: 15px; line-height: 1.35 }
.b5k { display: inline-flex; align-items: center; gap: 6px } .b5k::before { content: ""; width: 14px; height: 14px; border-radius: 3px }
.b5k.t-ok::before { background: #0B7A3E } .b5k.t-no::before { background: #B3261E } .b5k.t-warn::before { background: #9A6700 }
:root[data-theme="dark"] .b5q[data-st="ok"] .b5stp { color: #6FD39A } :root[data-theme="dark"] .b5q[data-st="no"] .b5stp { color: #FF8A80 } :root[data-theme="dark"] .b5q[data-st="mal"] .b5stp { color: #F2C14E }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .b5q[data-st="ok"] .b5stp { color: #6FD39A } :root:not([data-theme="light"]) .b5q[data-st="no"] .b5stp { color: #FF8A80 } :root:not([data-theme="light"]) .b5q[data-st="mal"] .b5stp { color: #F2C14E } }
@media (max-width: 760px) { .b5gs { grid-template-columns: 1fr } .b5gs > .out { position: static } }

.b5ctl { display: grid; gap: 6px }
.b5tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.b5rul { position: relative; padding: 26px 0 30px; margin: 4px 0 }
.b5zone { position: absolute; top: 0; bottom: 22px; left: 0; background: color-mix(in srgb, var(--c) 12%, var(--bg)); border-right: 3px solid var(--c); border-radius: 6px 0 0 6px; transition: width .35s }
.b5zone > span { position: absolute; top: 4px; right: 6px; font: 700 12px var(--mono); color: var(--ink); white-space: nowrap }
.b5bar { position: relative; height: 40px; background: var(--panel); border: 2px solid var(--track); border-radius: 6px }
.b5s { position: absolute; top: 3px; bottom: 3px; background: var(--c); border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-size: 12px; font-weight: 800; transition: left .3s, width .3s; box-shadow: inset -2px 0 0 var(--bg) }
.b5s.alt { background: color-mix(in srgb, var(--c) 72%, #000) }
.b5s.bad { background: repeating-linear-gradient(135deg, #B3261E 0 4px, color-mix(in srgb, #B3261E 55%, var(--bg)) 4px 8px) }
.b5bar { container-type: inline-size }
.b5s .sm { display: none } @container (max-width: 520px) { .b5s .lg { display: none } .b5s .sm { display: inline } }
.b5s > span { white-space: nowrap; padding: 0 3px; text-shadow: 0 0 3px rgba(0, 0, 0, .5) }
.b5ax { position: absolute; left: 0; right: 0; bottom: 0; height: 26px }
.b5t { position: absolute; top: 0; width: 2px; height: 8px; background: var(--track); transform: translateX(-1px) }
.b5t.y { height: 12px; background: var(--ink) }
.b5t > span { position: absolute; top: 13px; left: 0; transform: translateX(-50%); font: 500 12px var(--mono); color: var(--muted); white-space: nowrap }
.b5t:first-child > span { transform: none } .b5t:last-child > span { transform: translateX(-100%) }
.b5k-s::before { background: var(--c); border-color: var(--c) } .b5k-bad::before { background: repeating-linear-gradient(135deg, #B3261E 0 2px, var(--bg) 2px 4px); border-color: #B3261E } .b5k-z::before { background: color-mix(in srgb, var(--c) 12%, var(--bg)); border-color: var(--c) }

.b5off .offer { transition: border-color .2s, transform .2s }
.b5off .offer.on { border-color: var(--c); transform: translateY(-2px) }
.b5off .b5n { font-weight: 800; line-height: 1.25 }
@supports (grid-template-rows: subgrid) { .b5off .offer { grid-row: span 6; grid-template-rows: subgrid; align-content: start } }
.btrack > span.seg-b5ku { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, var(--bg) 2px 5px); border: 2px solid var(--ink) }
.btrack > span.seg-b5kx { background: repeating-linear-gradient(135deg, #B3261E 0 2px, var(--bg) 2px 5px); border: 2px solid #B3261E; z-index: 2 }
.b5k-p::before { background: var(--bg); border-color: var(--c) } .b5k-w::before { background: var(--track); border-color: var(--track) }
.b5k-ku::before { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, var(--bg) 2px 4px) } .b5k-kx::before { background: repeating-linear-gradient(135deg, #B3261E 0 2px, var(--bg) 2px 4px); border-color: #B3261E }
.b5sll { font: 500 13px var(--mono); color: var(--muted) }
.b5map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start }
.b5sh { border: 2px dashed var(--track); border-radius: 4px; padding: 12px; display: grid; gap: 6px; opacity: .6; transition: opacity .25s, transform .25s, border-color .25s }
.b5sh.da { opacity: 1; border: 2px solid var(--c); background: var(--bg); box-shadow: 0 6px 14px rgba(0, 0, 0, .08); transform: rotate(calc((var(--k) - 1) * .6deg)) }
.b5shk { font-weight: 900; line-height: 1.25 }
.b5shd { font-size: 13px; color: var(--muted) }
.b5sh ul { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 3px }
.b5k-da::before { border-color: var(--c) } .b5k-off::before { border-style: dashed; border-color: var(--track) }
@media (max-width: 760px) { .b5map { grid-template-columns: 1fr } .b5sh.da { transform: none } }
.b5row { display: grid; font-size: 15px; line-height: 1.4; padding: 5px 0 }
.b5row > div { grid-area: 1 / 1; display: grid; gap: 2px; align-content: start }
.b5pn { font-weight: 800 }
.b5lb { background: color-mix(in srgb, var(--c) 9%, var(--bg)); clip-path: inset(0 calc(100% - var(--x)) 0 0); margin: -5px -18px; padding: 5px 18px }
.b5lb s { text-decoration-color: #B3261E; text-decoration-thickness: 2px; color: var(--muted) }
.b5g { display: none; color: var(--ink); font-weight: 700; border-left: 4px solid var(--c); padding-left: 8px }
.b5ok { color: #0B7A3E; font-weight: 900 }
.b5edge { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; background: var(--c); pointer-events: none }
.b5edge > span { position: absolute; bottom: 8px; left: 3px; background: var(--c); color: #fff; font: 700 11px var(--mono); text-transform: uppercase; padding: 2px 6px; border-radius: 0 4px 4px 0 }
.b5kok { color: #0B7A3E; font-weight: 700 } .b5kst { text-decoration: line-through; text-decoration-color: #B3261E; text-decoration-thickness: 2px } .b5kno { color: #B3261E; font-weight: 700 }
.b5k-g::before { background: color-mix(in srgb, var(--c) 9%, var(--bg)); border-color: var(--c) }
:root[data-theme="dark"] .b5ok, :root[data-theme="dark"] .b5kok { color: #6FD39A } :root[data-theme="dark"] .b5kno { color: #FF8A80 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .b5ok, :root:not([data-theme="light"]) .b5kok { color: #6FD39A } :root:not([data-theme="light"]) .b5kno { color: #FF8A80 } }

.b5stack { display: grid; gap: 6px; position: relative }
.b5lay { display: grid; grid-template-columns: 200px minmax(0, 1fr) 36px; gap: 10px; align-items: center; min-height: 52px; padding: 6px 10px; border: 2px solid var(--line); border-radius: 8px; background: var(--bg); margin-left: calc((4 - var(--i)) * 10px); margin-right: calc((4 - var(--i)) * 10px); transition: border-color .2s, background .2s, opacity .2s }
.b5ln { font-weight: 800 }
.b5lt { font-size: 14px; line-height: 1.35; color: var(--muted) }
.b5li { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; justify-self: end }
.b5lay.b5st { border-color: var(--ink); background: var(--panel) } .b5lay.b5st .b5lt { color: var(--ink); font-weight: 700 }
.b5lay.b5cur { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent) }
.b5lay.b5pass { border-color: #0B7A3E } .b5lay.b5pass .b5li { background: #0B7A3E; color: #fff } .b5lay.b5pass .b5lt { color: var(--ink) }
.b5lay.b5stop { border-color: #B3261E; background: color-mix(in srgb, #B3261E 8%, var(--bg)) } .b5lay.b5stop .b5li { background: #B3261E; color: #fff } .b5lay.b5stop .b5lt { color: var(--ink); font-weight: 700 }
.b5lay.b5none .b5li { background: var(--panel); color: var(--muted) }
.b5lay.b5skip { opacity: .45; border-style: dashed }
@media (max-width: 560px) { .b5lay { grid-template-columns: minmax(0, 1fr) 32px; margin-left: 0; margin-right: 0 } .b5ln { grid-column: 1 } .b5lt { grid-column: 1 / -1; grid-row: 2 } .b5li { grid-column: 2; grid-row: 1 } }
@media (prefers-reduced-motion: reduce) { .b5q, .b5zone, .b5s, .b5off .offer, .b5sh, .b5lay { transition: none } }
.b5fw { display: grid; gap: 0 }
.b5fbar { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 6px; max-width: 760px; margin-top: 10px; 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) }
@media (max-width: 560px) { .b5fbar { padding: 4px 10px 8px } .b5fbar .b5sll { display: none } .b5fbar .b5tools .btn { min-height: 40px } }

/* AW-06: Kassenbon zum Aufhebungsvertrag, Zustellweg, Fristenkalender, Kopfzählung, Sozialauswahl, drei Fristen, Zeugnisregler, Grenze im Wandel */

.b6bl { list-style: none; margin: 0; padding: 6px 0; display: grid; gap: 0 }
.b6bl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 8px 4px; border-bottom: 1px dotted var(--line); border-radius: 4px }
.b6bt { display: grid; gap: 2px } .b6bt b { font-size: 14px; font-family: var(--sans) } .b6bt small { font-size: 12px; color: var(--muted); font-family: var(--sans) }
.b6bv { font-weight: 700; font-size: 15px; white-space: nowrap }
.b6bl li.p .b6bv { color: var(--pz) } .b6bl li.m .b6bv { color: var(--mz) } .b6bl li.z .b6bv { color: var(--muted) }
.b6bl li.chg { animation: b6flash .9s ease-out }
@keyframes b6flash { from { background: color-mix(in srgb, var(--c) 30%, transparent) } to { background: transparent } }
.b6bs { display: flex; justify-content: space-between; align-items: baseline; border-top: 3px double var(--ink); padding-top: 8px; margin: 2px 0 0; font-size: 18px }
.b6bs span { font-weight: 900 } .b6bs.p span { color: var(--pz) } .b6bs.m span { color: var(--mz) }

.b6slip { max-width: 520px; border: 2px solid var(--ink); border-radius: 6px; background: var(--bg); padding: 10px 14px; display: grid; gap: 8px; position: relative }
.b6sk { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 }
.b6slip dl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 10px; margin: 0 }
.b6slip dt { font-weight: 700; color: var(--muted) } .b6slip dd { margin: 0 }
.b6stamp { justify-self: end; margin: 0; font: 800 14px var(--mono); text-transform: uppercase; letter-spacing: .04em; border: 3px solid currentColor; border-radius: 6px; padding: 4px 10px; transform: rotate(-3deg) }
.b6stamp.s-ok { color: #0B7A3E } .b6stamp.s-warn { color: #9A6700 } .b6stamp.s-no { color: #B3261E }
:root[data-theme="dark"] .b6stamp.s-ok { color: #6FD39A } :root[data-theme="dark"] .b6stamp.s-warn { color: #F2C14E } :root[data-theme="dark"] .b6stamp.s-no { color: #FF8A80 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .b6stamp.s-ok { color: #6FD39A } :root:not([data-theme="light"]) .b6stamp.s-warn { color: #F2C14E } :root:not([data-theme="light"]) .b6stamp.s-no { color: #FF8A80 } }

.b6ctl { display: grid; gap: 6px }
.b6cal { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: start }
.b6ms { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px }
.b6m { display: grid; gap: 4px }
.b6mt { font-weight: 800; margin: 0; font-size: 14px }
.b6wk, .b6g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px }
.b6wk span { font: 600 11px var(--mono); color: var(--muted); text-align: center }
.b6d { display: flex; align-items: center; justify-content: center; font: 600 12px var(--mono); aspect-ratio: 1; border-radius: 4px; border: 2px solid transparent; background: var(--bg); color: var(--ink); min-width: 0; padding: 0 }
.b6m.big .b6d { font-size: 14px; min-height: 44px; aspect-ratio: auto; border-color: var(--line) }
.b6d.nil { background: none; border: 0 }
.b6d.we { color: var(--muted) } .b6d.we:not(.run):not(.gap):not(.end) { background: var(--panel) }
.b6d.run.we, .b6d.gap.we { color: color-mix(in srgb, var(--ink) 55%, var(--bg)) }
.b6d.run { background: color-mix(in srgb, var(--c) 30%, var(--bg)); color: var(--ink) }
.b6d.gap { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, var(--bg)) 0 3px, var(--bg) 3px 6px) }
.b6d.z { border-color: var(--ink) !important; font-weight: 900; box-shadow: inset 0 0 0 2px var(--bg) }
.b6d.end { background: var(--ink); color: var(--bg); font-weight: 900 }
.b6d.kf { position: relative; outline: 3px solid #B3261E; outline-offset: -3px }
.b6m.big button.b6d[aria-pressed="true"] { border-width: 3px }
.b6m.big button.b6d:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px }
.hk.b6k-z::before { background: var(--bg); border-color: var(--ink); border-width: 3px }
.hk.b6k-run::before { background: color-mix(in srgb, var(--c) 30%, var(--bg)); border-color: transparent }
.hk.b6k-gap::before { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, var(--bg)) 0 2px, var(--bg) 2px 4px); border-color: transparent }
.hk.b6k-end::before { background: var(--ink) }
.hk.b6k-kf::before { background: var(--bg); border-color: #B3261E; border-width: 3px }
.hk.b6k-we::before { content: "6"; display: inline-flex; align-items: center; justify-content: center; font: 600 11px var(--mono); color: var(--muted); background: var(--panel); border-color: var(--line) }
@media (max-width: 760px) { .b6cal { grid-template-columns: 1fr } .b6ms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px } .b6ms .b6d { font-size: 10px; border-width: 1px } }
@media (max-width: 560px) { .b6ms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px } .b6ms .b6wk span { font-size: 9px; letter-spacing: -.02em } }

.b6grp { display: grid; gap: 8px }
.b6gr { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line) }
.b6gt { display: grid; gap: 1px; margin: 0 } .b6gt b { font-size: 14px } .b6gt small { color: var(--muted); font-size: 12px }
.b6ppl { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; align-items: center }
.b6p { width: 18px; height: 28px; border: 2px solid var(--ink); border-radius: 9px 9px 3px 3px; background: linear-gradient(to top, var(--c) calc(var(--w) * 100%), var(--bg) calc(var(--w) * 100%)) }
.b6step { display: flex; align-items: center; gap: 4px } .b6step output { min-width: 22px; text-align: center; font-weight: 900 }
.b6step .btn { min-width: 44px; justify-content: center; font-size: 20px; padding: 0 }
.hk.b6k-p1::before { background: var(--c); height: 18px; width: 12px; border-radius: 6px 6px 2px 2px }
.hk.b6k-p5::before { background: linear-gradient(to top, var(--c) 50%, var(--bg) 50%); height: 18px; width: 12px; border-radius: 6px 6px 2px 2px }
.hk.b6k-p0::before { background: var(--bg); height: 18px; width: 12px; border-radius: 6px 6px 2px 2px }
.b6sc { position: relative; padding: 24px 0 22px; margin-top: 4px }
.b6sbar { height: 22px; border: 2px solid var(--track); border-radius: 6px; background: var(--panel); overflow: hidden }
.b6sbar > span { display: block; height: 100%; background: var(--c); transition: width .3s }
.b6sbar > span.on { background: var(--c) }
.b6lim { position: absolute; top: 4px; bottom: 18px; width: 3px; background: var(--ink); transform: translateX(-1px) }
.b6lim > span { position: absolute; top: -2px; left: 7px; font: 700 12px var(--mono); white-space: nowrap }
.b6sax { position: absolute; left: 0; right: 0; bottom: 0; height: 16px } .b6sax span { position: absolute; transform: translateX(-50%); font: 500 12px var(--mono); color: var(--muted) }
.b6sax span:first-child { transform: none } .b6sax span:last-child { transform: translateX(-100%) }
@media (max-width: 560px) { .b6gr { grid-template-columns: minmax(0, 1fr) auto; } .b6ppl { grid-column: 1 / -1; grid-row: 2 } }

.b6c-alt { --k: #5B5FC7 } .b6c-jahre { --k: #0E7C86 } .b6c-unt { --k: #B7791F } .b6c-sb { --k: #9B2C6F }
:root[data-theme="dark"] .b6c-alt { --k: #8E92F0 } :root[data-theme="dark"] .b6c-jahre { --k: #3FB8C2 } :root[data-theme="dark"] .b6c-unt { --k: #E0A84A } :root[data-theme="dark"] .b6c-sb { --k: #D46AA6 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .b6c-alt { --k: #8E92F0 } :root:not([data-theme="light"]) .b6c-jahre { --k: #3FB8C2 } :root:not([data-theme="light"]) .b6c-unt { --k: #E0A84A } :root:not([data-theme="light"]) .b6c-sb { --k: #D46AA6 } }
.ix .chips .chip[class*="b6c-"] { border-color: var(--k) } .ix .chips .chip[class*="b6c-"].on { background: var(--k); border-color: var(--k); color: #fff }
.b6sa, .ix .b6sa { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.b6sr { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 84px 96px; gap: 10px; align-items: center; padding: 8px 10px; border: 2px solid var(--line); border-radius: 8px; background: var(--bg); transition: transform .45s ease, border-color .2s }
.b6sr.hit { border-color: #B3261E; border-width: 3px } .b6sr.tie { border-color: #9A6700; border-style: dashed }
.b6sn { display: grid; gap: 1px; margin: 0 } .b6sn small { color: var(--muted); font-size: 12px }
.b6sb { display: flex; height: 18px; background: var(--panel); border-radius: 4px; overflow: hidden }
.b6sb > span { background: var(--k); box-shadow: inset -2px 0 0 var(--bg); transition: width .35s }
.b6sp { font: 700 14px var(--mono); text-align: right }
.b6st { justify-self: start; font-size: 13px; font-weight: 800; color: #fff; background: #B3261E; border-radius: 999px; padding: 2px 10px } .b6st.t { background: #9A6700 }
.hk.b6k-alt::before { background: #5B5FC7; border-color: #5B5FC7 } .hk.b6k-jahre::before { background: #0E7C86; border-color: #0E7C86 } .hk.b6k-unt::before { background: #B7791F; border-color: #B7791F } .hk.b6k-sb::before { background: #9B2C6F; border-color: #9B2C6F }
.hk.b6k-hit::before { background: var(--bg); border: 3px solid #B3261E }
@media (max-width: 640px) { .b6sr { grid-template-columns: minmax(0, 1fr) auto; } .b6sb { grid-column: 1 / -1; grid-row: 2 } .b6sp { grid-row: 1; grid-column: 2 } .b6st { grid-column: 1 / -1; grid-row: 3 } }
.b6tools { display: flex; flex-wrap: wrap; gap: 6px }
.b6ln { position: relative; display: grid; gap: 10px; padding-bottom: 24px; --lw: 190px }
.b6lr { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); gap: 10px; align-items: center }
.b6lt { display: grid; gap: 1px; margin: 0 } .b6lt b { font-size: 14px } .b6lt small { font-size: 12px; color: var(--muted) }
.b6lt2 { position: relative; height: 26px; margin-right: 50px }
.b6lb { position: absolute; left: 0; top: 4px; height: 18px; border: 2px solid var(--c); border-radius: 4px; background: var(--bg); overflow: hidden; box-sizing: border-box }
.b6lb > i { display: block; height: 100%; background: color-mix(in srgb, var(--muted) 45%, var(--bg)) }
.b6lr.done .b6lb { border-color: var(--track) }
.b6pt { position: absolute; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--c); transform: translateX(-50%) }
.b6le { position: absolute; top: 4px; margin-left: 6px; font: 700 12px var(--mono); white-space: nowrap }
.b6pt + .b6le { margin-left: -16px; transform: translateX(-100%) }
.b6tk { display: none; position: absolute; top: 0; height: 26px; width: 3px; background: var(--ink); transform: translateX(-1px); pointer-events: none }
@media (max-width: 560px) { .b6now { display: none } .b6tk { display: block } .b6lt2 { margin-right: 62px } .b6lax { right: 62px } .b6ln { --lw: 0px } }
.b6lr.cur .b6le { color: #B3261E }
:root[data-theme="dark"] .b6lr.cur .b6le { color: #FF8A80 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .b6lr.cur .b6le { color: #FF8A80 } }
.b6now { position: absolute; top: -4px; bottom: 20px; width: 3px; background: var(--ink); left: calc(var(--lw) + 10px + (100% - var(--lw) - 60px) * var(--f)); transform: translateX(-1px); pointer-events: none; transition: left .15s }
.b6lax { position: absolute; left: calc(var(--lw) + 10px); right: 50px; bottom: 0; height: 18px }
.b6lax span { position: absolute; transform: translateX(-50%); font: 500 12px var(--mono); color: var(--muted); white-space: nowrap }
.b6lax span:first-child { transform: none } .b6lax span:nth-child(2) { display: none }
.hk.b6k-ld::before { background: color-mix(in srgb, var(--muted) 45%, var(--bg)); border-color: var(--c) } .hk.b6k-lo::before { background: var(--bg); border-color: var(--c) } .hk.b6k-now::before { width: 3px; border: 0; background: var(--ink); border-radius: 0 }
@media (max-width: 640px) { .b6ln { --lw: 0px } .b6lr { grid-template-columns: minmax(0, 1fr) } .b6lax { left: 0 } }
@keyframes b6mk { from { background: color-mix(in srgb, #F2C14E 95%, var(--bg)) } }
.hk.b6k-mark::before { background: color-mix(in srgb, #F2C14E 55%, var(--bg)); border-color: transparent }

.b6pen { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; padding-top: 22px; max-width: 560px }
.b6pp { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 6px 6px 2px 2px; font: 700 12px var(--mono); background: var(--panel); color: var(--muted); border: 2px solid var(--line); transition: background .3s, color .3s }
.b6pp.on { background: var(--c); border-color: var(--c); color: #fff }
.b6pl { position: absolute; top: 0; bottom: 0; left: calc(var(--g) / 12 * (100% + 4px) - 4px); width: 3px; background: var(--ink); transition: left .4s }
.b6pl > span { position: absolute; top: 0; left: 6px; font: 700 12px var(--mono); white-space: nowrap }
.hk.b6k-poff::before { background: var(--panel); border-color: var(--line) } .hk.b6k-pon::before { background: var(--c); border-color: var(--c) }

.ix.b6kix { border-width: 1px; border-color: var(--line) }
.b6ka { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start }
.b6card { width: 78px; height: 110px; margin: 6px 0 0 6px; border-radius: 8px; background: #F5C400; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); transform: rotate(-8deg); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; box-sizing: border-box }
.b6card span { font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #3A2E00 }
.b6abm { display: grid; gap: 8px }
.b6abh { font-weight: 800 }
.ix .b6abl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: ab }
.b6abl li { counter-increment: ab; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; font-size: 15px }
.b6abl li::before { content: counter(ab); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: #F5C400; color: #3A2E00; font: 700 13px var(--mono); display: flex; align-items: center; justify-content: center }
.b6abl b { font-size: 14px }
@media (max-width: 560px) { .b6ka { grid-template-columns: 1fr; gap: 12px } .b6card { width: 60px; height: 84px } }
@media (prefers-reduced-motion: reduce) { .b6bl li.chg { animation: none } .b6sr, .b6sb > span, .b6sbar > span, .b6pp, .b6pl, .b6now, .b6tk { transition: none } }
/* AW-07: Mitbestimmen. Tisch, Wählerliste, Gründung, Stärkeskala, Frühschicht, Chat, Wegweiser, Verfahren, Punktfelder */
.b7thr .sr, .b7lr .sr, .b7msg .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.b7ctl { display: grid; gap: 4px; min-width: 0 }
.b7ctl label { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.b7ctls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px }
.b7val { font-weight: 800 }

/* Tisch */
.b7tables { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; min-height: 120px }
.b7tab { display: grid; gap: 6px; justify-items: center }
.b7row { display: flex; gap: 8px; min-height: 24px }
.b7board { min-width: 120px; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 14px; text-align: center; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; background: var(--panel) }
.b7seat { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--c); background: color-mix(in srgb, var(--c) 35%, var(--bg)) }
.b7seat.frei { background: var(--c) }
.b7seat.jav { border-color: #B7791F; background: color-mix(in srgb, #B7791F 35%, var(--bg)) }
.b7none { color: var(--muted); font-size: 15px; max-width: 30ch }
.hk.b7k-br::before { border: 3px solid var(--c); background: color-mix(in srgb, var(--c) 35%, var(--bg)); border-radius: 50% }
.hk.b7k-frei::before { border: 3px solid var(--c); background: var(--c); border-radius: 50% }
.hk.b7k-jav::before { border: 3px solid #B7791F; background: color-mix(in srgb, #B7791F 35%, var(--bg)); border-radius: 50% }
.b7thr { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 15px }
.b7thr li { display: block; padding-left: 26px; position: relative; color: var(--muted) }
.b7thr .b7ic { position: absolute; left: 0; top: 0; width: 20px; text-align: center; font-weight: 900 }
.b7thr li.on { color: var(--ink) } .b7thr li.on .b7ic { color: #0B7A3E }

/* Wählerliste */
.b7paper { max-width: none; gap: 4px; padding: 14px }
.b7lh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 8px; border-bottom: 2px solid var(--ink) }
.b7lh .b7lm span { text-align: center }
.b7lm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; align-items: center }
.b7lr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; align-items: center; text-align: left; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 8px; min-height: 44px; border-radius: 6px }
.b7lr:hover { background: var(--panel) }
.b7lr.on { background: color-mix(in srgb, var(--c) 18%, var(--bg)); box-shadow: inset 4px 0 0 var(--c) }
.b7ln { display: grid; min-width: 0 } .b7ln small { color: var(--muted); font-size: 13px; line-height: 1.35 }
.b7mk { display: grid; justify-items: center; font-weight: 900; font-size: 18px; line-height: 1.1 }
.b7mk small { display: none; font: 600 10px/1.2 var(--sans); color: var(--muted); text-align: center }
.b7mk.y i { color: #0B7A3E; font-style: normal } .b7mk.n i { color: #B3261E; font-style: normal; opacity: .75 }
@media (max-width: 640px) {
  .b7lh { display: none }
  .b7lr { grid-template-columns: 1fr; gap: 6px }
  .b7mk { grid-template-columns: auto 1fr; justify-items: start; column-gap: 4px; font-size: 15px }
  .b7mk small { display: block; text-align: left; font-size: 12px }
  .b7lm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px }
}

/* Gründung in Tagen */
.b7strip { position: relative; padding: 70px 0 4px; --p: 0% }
.b7bar { position: absolute; left: 0; right: 0; top: 74px; height: 6px; border-radius: 3px; background: var(--line) }
.b7bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: var(--c); border-radius: 3px; transition: width .3s }
.b7days { display: grid; grid-template-columns: repeat(24, 1fr); padding-top: 18px; font: 600 11px var(--mono); color: var(--muted) }
.b7days span { border-left: 1px solid var(--line); height: 22px; padding-left: 3px; white-space: nowrap; overflow: visible }
.b7days span.m { border-left-color: var(--ink) }
.b7gm { position: absolute; top: 0; transform: translateX(-50%); border: 0; background: none; display: grid; justify-items: center; gap: 4px; padding: 0; min-width: 44px; min-height: 84px; width: 72px }
.b7gm b { font-size: 13px; line-height: 1.15; text-align: center; order: -1; min-height: 32px; display: flex; align-items: flex-end }
.b7gm i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink); background: var(--bg); margin-top: 6px }
.b7gm.first { transform: none; justify-items: start } .b7gm.first b { text-align: left } .b7gm.lastm { transform: translateX(-100%); justify-items: end } .b7gm.lastm b { text-align: right }
.b7gm.past i { background: var(--c); border-color: var(--c) }
.b7gm[aria-pressed="true"] i { background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 40%, transparent) }
.b7gm:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; border-radius: 8px }
@media (max-width: 520px) { .b7gm { width: 58px } .b7gm b { font-size: 11.5px } }
@media (prefers-reduced-motion: reduce) { .b7bar::after { transition: none } }

/* Stärkeskala */
.b7topics .chip { font-size: 14px }
.b7rg { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 14px; align-items: start }
@media (max-width: 640px) { .b7rg { grid-template-columns: 1fr } }
.b7meter { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.b7meter li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 4px 6px; border-radius: 8px }
.b7mb { width: 26px; height: 30px; border-radius: 5px; border: 2px solid var(--ink); background: var(--bg); transition: background .25s }
.b7meter li.fill .b7mb { background: var(--c) }
.b7meter li.cur { background: color-mix(in srgb, var(--c) 16%, var(--bg)) }
.b7meter li.cur .b7mb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent) }
.b7mt { display: grid } .b7mt b { font-size: 15px } .b7mt small { color: var(--muted); font-size: 13px }
.b7meter li:not(.cur) .b7mt b { font-weight: 600 }
@media (prefers-reduced-motion: reduce) { .b7mb { transition: none } }

/* Frühschicht */
.b7sch { display: grid; gap: 6px; padding-top: 4px }
.b7ax { position: relative; height: 18px; margin-left: 76px; font: 600 11px var(--mono); color: var(--muted) }
.b7ax span { position: absolute; transform: translateX(-50%); white-space: nowrap }
.b7ln2 { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 6px; align-items: center; min-height: 46px }
.b7ll { font-weight: 700; font-size: 14px }
.b7tr { position: relative; height: 46px; border-left: 1px solid var(--line); background: repeating-linear-gradient(to right, transparent 0 calc(100% / 13 - 1px), var(--line) calc(100% / 13 - 1px) calc(100% / 13)) }
.b7work { position: absolute; top: 10px; height: 26px; border-radius: 6px; background: var(--c) }
.b7pause { position: absolute; top: 10px; height: 26px; background: repeating-linear-gradient(135deg, var(--bg) 0 3px, color-mix(in srgb, var(--c) 30%, var(--bg)) 3px 6px) }
.b7wait { position: absolute; top: 14px; height: 18px; background: color-mix(in srgb, #2B6CB0 30%, var(--bg)); border: 2px dashed #2B6CB0; border-radius: 4px }
.b7mk2 { position: absolute; top: 0; bottom: 0; width: 0; display: block }
.b7mk2 i { position: absolute; left: -2px; top: 4px; bottom: 4px; width: 4px; background: var(--ink); border-radius: 2px }
.b7mk2.ok i { background: #0B7A3E } .b7mk2.no i { background: #B3261E }
.b7mk2 small { position: absolute; left: 6px; top: 2px; font: 600 12px var(--sans); line-height: 1.2; white-space: nowrap; color: var(--ink); background: color-mix(in srgb, var(--bg) 82%, transparent); padding: 0 2px; border-radius: 3px }
.b7mk2.rt small { left: auto; right: 6px; top: auto; bottom: 2px }
.b7ax span.end { transform: translateX(-100%) }
.b7mk2.ok small { color: #0B7A3E; font-weight: 700 } .b7mk2.no small { color: #B3261E; font-weight: 700 }
.hk.b7k-work::before { background: var(--c); border-color: var(--c) }
.hk.b7k-pause::before { background: repeating-linear-gradient(135deg, var(--bg) 0 3px, color-mix(in srgb, var(--c) 30%, var(--bg)) 3px 6px); border-color: var(--c) }
.hk.b7k-wait::before { background: color-mix(in srgb, #2B6CB0 30%, var(--bg)); border: 2px dashed #2B6CB0 }
.hk.b7k-pt::before { width: 4px; border: 0; background: var(--ink); border-radius: 2px }
.hk.b7k-ok::before { width: 4px; border: 0; background: #0B7A3E; border-radius: 2px }
.hk.b7k-no::before { width: 4px; border: 0; background: #B3261E; border-radius: 2px }
@media (max-width: 560px) { .b7ln2 { grid-template-columns: 56px minmax(0, 1fr) } .b7ax { margin-left: 62px } .b7ll { font-size: 12.5px } .b7mk2 small { font-size: 11px } .b7ax span.mn { display: none } }

/* Chat */
.b7phone { max-width: 460px; border: 2px solid var(--ink); border-radius: 22px; overflow: hidden; background: var(--panel); display: grid }
.b7head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line) }
.b7head small { display: block; color: var(--muted); font-size: 13px }
.b7av { width: 36px; height: 36px; border-radius: 50%; background: #B7791F; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none }
.b7log { display: flex; flex-direction: column; gap: 8px; padding: 12px; max-height: 440px; min-height: 220px; overflow-y: auto; scroll-behavior: smooth }
.b7msg { max-width: 82%; padding: 8px 12px; border-radius: 16px; font-size: 15.5px; line-height: 1.4 }
.b7msg.her { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 4px }
.b7msg.me { align-self: flex-end; background: var(--c); color: #fff; border-bottom-right-radius: 4px }
.b7msg.typing { display: flex; gap: 4px; padding: 12px 14px }
.b7msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: b7dot 1s infinite ease-in-out }
.b7msg.typing i:nth-child(2) { animation-delay: .15s } .b7msg.typing i:nth-child(3) { animation-delay: .3s }
@keyframes b7dot { 0%, 80%, 100% { opacity: .3 } 40% { opacity: 1 } }
.b7day { align-self: center; font: 600 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em }
.b7fin { align-self: stretch; border-top: 2px dashed var(--line); padding-top: 8px; font-size: 15px; color: var(--ink); font-style: italic }
.b7opts { display: grid; gap: 6px; padding: 10px 12px 12px; background: var(--bg); border-top: 1px solid var(--line) }
.b7opts:empty { display: none }
.b7opt { justify-content: flex-start; text-align: left; height: auto; padding: 8px 12px; line-height: 1.35; white-space: normal }
@media (prefers-reduced-motion: reduce) { .b7msg.typing i { animation: none } .b7log { scroll-behavior: auto } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .b7msg.me { color: #121417 } }
:root[data-theme="dark"] .b7msg.me { color: #121417 }

/* Wegweiser */
.b7post { position: relative; padding: 6px 0 6px 26px; max-width: 520px }
.b7pole { position: absolute; left: 8px; top: 0; bottom: 4px; width: 8px; border-radius: 4px; background: var(--muted) }
.b7signs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.b7sign { position: relative; display: grid; padding: 8px 34px 8px 14px; background: #1F5F3A; color: #fff; border-radius: 6px 0 0 6px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55) }
.b7sign.s0 { width: 100% } .b7sign.s1 { width: 90% } .b7sign.s2 { width: 80% }
.b7sign small { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; opacity: .85 }
.b7sign b { font-size: 16px; line-height: 1.2 } .b7sign span { font-size: 14px; opacity: .92 }
@media (max-width: 520px) { .b7sign.s1, .b7sign.s2 { width: 100% } }

/* Verfahren */
.b7kam[hidden] { display: none !important }
.b7vf { position: relative; height: 104px; margin: 0 10px }
.b7vbar { position: absolute; left: 0; right: 0; top: 36px; height: 8px; border-radius: 4px; background: var(--line) }
.b7vbar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); border-radius: 4px; transition: width .35s }
.b7vm { position: absolute; top: 0; width: 0; height: 80px }
.b7vm i { position: absolute; left: -10px; top: 30px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 3px solid var(--ink) }
.b7vm.last i { background: var(--ink) }
.b7vm small { position: absolute; top: 6px; left: 0; transform: translateX(-50%); font-weight: 700; font-size: 13px; white-space: nowrap }
.b7vm:first-of-type small { transform: translateX(-10px) }
.b7vm.dn small { top: 56px }
.b7vm.last small { transform: translateX(-80%) }
.b7vax { position: absolute; left: 0; right: 0; top: 84px; height: 16px; font: 600 11px var(--mono); color: var(--muted) }
.b7vax span { position: absolute; transform: translateX(-50%); white-space: nowrap }
.b7vax span:first-child { transform: none } .b7vax span:last-child { transform: translateX(-100%) }
.hk.b7k-dur::before { background: var(--c); border-color: var(--c); height: 8px }
.hk.b7k-t::before { border-radius: 50%; border-width: 3px; background: var(--bg) } .hk.b7k-end::before { border-radius: 50%; background: var(--ink) }
@media (prefers-reduced-motion: reduce) { .b7vbar span { transition: none } }

/* Punktfelder */
.b7dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px }
.b7dots-w { display: grid; gap: 8px; align-content: start }
.b7big { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; font-size: 15px; line-height: 1.3 }
.b7big b { font-size: 34px !important; font-weight: 900; min-width: 2ch }
.b7dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 280px }
.b7dots i { aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--track); background: var(--bg) }
.b7dots.firm i { border-radius: 3px }
.b7dots i.on { background: var(--c); border-color: var(--c) }
.b7dgrid.anim .b7dots i { transition: background .3s, border-color .3s }
.hk.b7k-on::before { background: var(--c); border-color: var(--c); border-radius: 50% }
.hk.b7k-onf::before { background: var(--c); border-color: var(--c) }
.hk.b7k-off::before { background: var(--bg); border-color: var(--track) }
.b7brett { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 18px 14px 14px; border-radius: 12px; background: color-mix(in srgb, #8B6B3E 22%, var(--bg)); border: 3px solid color-mix(in srgb, #8B6B3E 60%, var(--ink)) }
.b7note { position: relative; text-align: left; font: inherit; font-size: 15px; line-height: 1.4; color: var(--ink); background: var(--bg); border: 2px solid var(--ink); border-radius: 4px; padding: 18px 12px 12px; min-height: 96px; cursor: pointer; box-shadow: 2px 3px 0 color-mix(in srgb, var(--ink) 25%, transparent) }
.b7note:nth-child(odd) { transform: rotate(-1deg) } .b7note:nth-child(even) { transform: rotate(1deg) }
.b7note .b7pin { position: absolute; top: 6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink) }
.b7note.seen { background: color-mix(in srgb, var(--c) 10%, var(--bg)) }
.b7note[aria-pressed="true"] { outline: 4px solid var(--c); outline-offset: 2px }
.b7bk { font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--c); margin: 0 }
.hk.b7k-neu::before { background: var(--bg); border-radius: 2px } .hk.b7k-seen::before { background: color-mix(in srgb, var(--c) 10%, var(--bg)); border-radius: 2px } .hk.b7k-sel::before { background: var(--bg); border-radius: 2px; outline: 3px solid var(--c); outline-offset: 1px }
@media (prefers-reduced-motion: reduce) { .b7note { transform: none !important } }
@media (min-width: 560px) { .b7brett { grid-template-columns: 1fr 1fr } }
.b7weg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 }
.b7weg > li { display: flex; flex-direction: column; align-items: stretch }
.b7wg { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--ink); background: var(--bg); border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; min-height: 56px; cursor: pointer }
.b7wg .b7wn { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font: 700 14px var(--mono) }
.b7wg b { font-size: 16px } .b7wg small { color: var(--muted); font-size: 14px }
.b7wg.done { background: color-mix(in srgb, var(--c) 10%, var(--bg)) } .b7wg.done .b7wn { background: var(--c); border-color: var(--c); color: var(--bg) }
.b7wg[aria-pressed="true"] { outline: 4px solid var(--c); outline-offset: 2px }
.b7arr { align-self: center; width: 3px; height: 18px; background: var(--ink); position: relative; margin: 2px 0 8px }
.b7arr::after { content: ""; position: absolute; left: -5px; bottom: -6px; border: 6.5px solid transparent; border-top: 8px solid var(--ink); border-bottom: 0 }
@media (min-width: 760px) {
  .b7weg { grid-template-columns: repeat(4, 1fr) }
  .b7weg > li { flex-direction: row; align-items: center }
  .b7wg { flex: 1; min-width: 0; grid-template-columns: 1fr; text-align: center; justify-items: center; row-gap: 4px; min-height: 120px }
  .b7wg .b7wn { grid-row: auto }
  .b7arr { width: 18px; height: 3px; margin: 0 10px 0 4px; flex: none }
  .b7arr::after { left: auto; right: -6px; bottom: -5px; border: 6.5px solid transparent; border-left: 8px solid var(--ink); border-right: 0 }
}
.hk.b7k-wg::before { background: var(--bg); border-radius: 50% } .hk.b7k-wgd::before { background: var(--c); border-color: var(--c); border-radius: 50% }
.b7start { position: absolute; top: 10px; height: 26px; line-height: 26px; padding-left: 8px; color: var(--bg); font: 700 13px var(--mono); white-space: nowrap; pointer-events: none }
.b7shift { margin: 4px 0 0; display: flex; gap: 10px; align-items: baseline; font-weight: 800; font-size: 18px }
.b7tseg { flex-wrap: wrap }

/* AW-08: Tarife. Unterschriftenseite, Tarifordner, Stromkreis, Konfliktkurve, Laufzeitbalken, Streiktor, Pegel, Hebelpult */
.t8out p, .t8tout li { margin: 0 }

/* Unterschriftenseite */

.t8doc { display: grid; gap: 8px }
.t8doc.swap, .t8page.swap { animation: swapin .22s ease }
.t8kick { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; overflow-wrap: anywhere }
.t8par { font-weight: 800; margin: 6px 0 0 }
.t8txt { margin: 0; font-size: 15px }
.t8sigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 10px }
.t8sig { display: grid; gap: 2px; text-align: left; background: none; border: 2px solid transparent; border-radius: 8px; padding: 8px; min-height: 44px; cursor: pointer; color: var(--ink) }
.t8sig:hover { background: var(--panel) }
.t8sig[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--bg)) }
.t8ink { width: 120px; height: 30px } .t8ink path { fill: none; stroke: #1F3A93; stroke-width: 2.2; stroke-linecap: round }
:root[data-theme="dark"] .t8ink path { stroke: #8AB4FF }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .t8ink path { stroke: #8AB4FF } }
.t8rule { display: block; height: 0; border-top: 1.5px solid var(--ink); margin: 0 0 4px }
.t8sig b { font-size: 15px; line-height: 1.3 } .t8sig small { color: var(--muted); font-size: 13px; line-height: 1.3 }
.t8nots { display: flex; flex-wrap: wrap; gap: 8px }
.t8not { border: 2px dashed var(--track); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 8px 14px; min-height: 44px; font-weight: 700; cursor: pointer }
.t8not[aria-pressed="true"] { border-style: solid; border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--bg)) }

/* Tarifordner */
.t8qs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px }
.t8q { text-align: left; border: 2px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 8px 12px; min-height: 44px; cursor: pointer; font-size: 15px; line-height: 1.35 }
.t8q[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--bg)) }
.t8folder { max-width: 640px }
.t8tabs { display: flex; gap: 4px; padding-left: 10px; overflow-x: auto }
.t8tab { border: 2px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--panel); color: var(--muted); padding: 7px 10px; min-height: 40px; font: 700 13px/1.2 var(--sans); cursor: pointer; white-space: nowrap }
.t8tab.on { background: var(--bg); color: var(--ink); border-color: var(--ink); position: relative; top: 2px }
@media (max-width: 560px) { .t8tabs { overflow: visible; padding-left: 4px } .t8tab { flex: 1 1 0; min-width: 0; white-space: normal; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; font-size: 12px; padding: 6px } }
.t8page { border: 2px solid var(--ink); border-radius: 4px 10px 10px 10px; background: var(--bg); padding: 12px 14px; display: grid; gap: 8px; box-shadow: 4px 4px 0 var(--line) }
.t8ph { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 6px }
.t8run { font: 600 12px var(--mono); color: var(--muted) }
.t8rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.t8rows li { display: grid; grid-template-columns: 3.4em 1fr; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 15px; line-height: 1.35 }
.t8no { font: 700 13px var(--mono); color: var(--muted); padding-top: 1px }
.t8rows li.hit { background: color-mix(in srgb, #F2C94C 45%, var(--bg)); box-shadow: inset 4px 0 0 #B7791F }
.hk.t8k-hit::before { background: color-mix(in srgb, #F2C94C 45%, var(--bg)); border-color: #B7791F }

/* Stromkreis */
.t8cases { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.t8case { border: 2px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 6px 12px; min-height: 44px; font-weight: 700; font-size: 14px; cursor: pointer }
.t8case[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--bg)) }
.t8circ { max-width: 520px }
.t8svg { width: 100%; height: auto; display: block; overflow: visible }
.t8w { fill: none; stroke: var(--track); stroke-width: 3; stroke-linecap: round; transition: stroke .2s }
.t8w.live { stroke: #E0A100 }
.t8dot { fill: var(--bg); stroke: var(--ink); stroke-width: 2 }
.t8lev { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; transition: all .2s }
.t8sw { cursor: pointer } .t8hit { fill: transparent }
.t8lt { font: 800 13px var(--mono); fill: var(--ink) }
.t8wl { font: 600 10.5px var(--sans); fill: var(--muted) }
.t8bl { stroke: var(--ink); stroke-width: 3 } .t8bs { stroke: var(--ink); stroke-width: 6 }
.t8bulb { fill: var(--bg); stroke: var(--ink); stroke-width: 2.5; transition: fill .2s }
.t8x { stroke: var(--ink); stroke-width: 2 }
.t8glow { fill: transparent; transition: fill .2s }
.t8lamp.on .t8bulb { fill: #F2C94C } .t8lamp.on .t8glow { fill: color-mix(in srgb, #F2C94C 45%, transparent) }
.t8togs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px }
.t8tog { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left; border: 2px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 8px 10px; min-height: 52px; cursor: pointer }
.t8tog[aria-pressed="true"] { border-color: #E0A100; background: color-mix(in srgb, #F2C94C 18%, var(--bg)) }
.t8key { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font: 800 13px var(--mono) }
.t8tt { display: grid; min-width: 0 } .t8tt b { font-size: 15px; line-height: 1.3 } .t8tt small { color: var(--muted); font-size: 13px; line-height: 1.3 }
.t8st { font: 700 12px var(--mono); text-transform: uppercase; color: var(--muted) }
.t8tog[aria-pressed="true"] .t8st { color: var(--ink) }
.hk.t8k-live::before { height: 0; border: 0; border-top: 3px solid #E0A100; border-radius: 0; width: 18px }
.hk.t8k-dead::before { height: 0; border: 0; border-top: 3px solid var(--track); border-radius: 0; width: 18px }
.hk.t8k-lamp::before { border-radius: 50%; background: #F2C94C }

/* Konfliktkurve */
.t8kvwrap { max-width: 640px }
.t8kv { width: 100%; height: auto; display: block }
.t8fp { fill: color-mix(in srgb, #0B7A3E 12%, var(--bg)) }
.t8grid { stroke: var(--line); stroke-width: 1 }
.t8yl { font: 700 11px var(--sans); fill: var(--ink) } .t8yl.unused { fill: var(--muted); font-weight: 500; text-decoration: line-through }
.t8tick { stroke: var(--muted) } .t8xl { font: 600 11px var(--mono); fill: var(--muted) }
.t8curve { fill: none; stroke: var(--c); stroke-width: 3.5; stroke-linejoin: round }
.t8pt { cursor: pointer } .t8pt circle { fill: var(--bg); stroke: var(--ink); stroke-width: 2 } .t8pt text { font: 800 10px var(--mono); fill: var(--ink); pointer-events: none }
.t8pt.on circle { fill: var(--ink) } .t8pt.on text { fill: var(--bg) }
.t8nums { display: flex; flex-wrap: wrap; gap: 6px }
.t8num { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); font: 800 15px var(--mono); cursor: pointer }
.t8num.on { background: var(--ink); color: var(--bg) }
.hk.t8k-fp::before { background: color-mix(in srgb, #0B7A3E 12%, var(--bg)); border-color: transparent }
.hk.t8k-un::before { content: "abc"; width: auto; height: auto; border: 0; font: 500 11px var(--sans); text-decoration: line-through; color: var(--muted) }
.hk.t8k-pt::before { border-radius: 50%; background: var(--bg) }

/* Laufzeitbalken */
.t8bars { display: grid; gap: 6px; max-width: 640px }
.t8bar, .t8axis { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: 10px; align-items: center }
.t8bar { text-align: left; border: 2px solid transparent; background: none; color: var(--ink); border-radius: 8px; padding: 6px; min-height: 44px; cursor: pointer }
.t8bar:hover { background: var(--panel) }
.t8bar.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--bg)) }
.t8bn { font-weight: 700; font-size: 14px; line-height: 1.25 }
.t8btrack { position: relative; height: 30px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 19)); border-radius: 4px }
.t8bfill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--c) 30%, var(--bg)); border: 2px solid var(--c); border-radius: 4px; display: flex; align-items: center; padding: 0 6px; overflow: hidden; transition: width .3s }
.t8bar.on .t8bfill { background: var(--c) } .t8bar.on .t8bfill span { color: #fff }
.t8bfill span { font: 700 12.5px var(--sans); white-space: nowrap }
.t8axis { padding: 0 8px 0 6px } .t8atr { position: relative; height: 34px; border-top: 2px solid var(--ink) }
.t8atr i { position: absolute; top: 2px; transform: translateX(-50%); font: 600 11px var(--mono); font-style: normal; color: var(--muted) }
.t8atr i:first-child { transform: none }
.t8atr b { position: absolute; right: 0; top: 17px; font: 600 11px var(--sans); color: var(--muted) }
.t8calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px }
.t8calc > div { border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px }
.t8calc b { font-size: 22px; font-weight: 900 } .t8calc small { color: var(--muted); font-size: 13px; line-height: 1.3 }

/* Streiktor */
.t8gate { border: 3px solid var(--ink); border-top-width: 10px; border-radius: 6px 6px 0 0; padding: 0 10px 12px; background: repeating-linear-gradient(90deg, transparent 0 46px, var(--line) 46px 49px) }
.t8banner { margin: 10px auto 12px; max-width: 320px; text-align: center; background: #B3261E; color: #fff; border-radius: 4px; padding: 6px 10px; display: grid; transform: rotate(-1.5deg) }
.t8banner span { font: 900 20px var(--sans); text-transform: uppercase; letter-spacing: .08em } .t8banner small { font: 600 12px var(--sans) }
.t8ppl { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px }
.t8p { display: grid; justify-items: center; gap: 2px; text-align: center; border: 2px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 12px; padding: 8px 6px; min-height: 44px; cursor: pointer }
.t8p b { font-size: 15px } .t8p small { color: var(--muted); font-size: 12.5px; line-height: 1.25 }
.t8av { width: 38px; height: 38px; border-radius: 50%; background: var(--pc); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 900 17px var(--sans) }
.t8p.seen { border-style: dashed } .t8p[aria-pressed="true"] { border-style: solid; border-color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, var(--bg)) }
.t8bub { border-left: 5px solid var(--pc); background: var(--panel); border-radius: 0 10px 10px 0; padding: 8px 12px; margin: 0 }
.t8tout ul { margin: 0; padding-left: 20px; display: grid; gap: 4px }

/* Pegel */
.t8pgwrap { max-width: 300px }
.t8pg { width: 100%; height: auto; display: block }
.t8tube { fill: var(--panel); stroke: var(--ink); stroke-width: 2.5 }
.t8water { fill: #2B6CB0; transition: y .5s ease, height .5s ease }
.t8orient { fill: url(#none); fill: color-mix(in srgb, #2B6CB0 25%, var(--bg)); stroke: #2B6CB0; stroke-width: 1.5; stroke-dasharray: 4 3; transition: y .5s ease, height .5s ease }
.t8sc { stroke: var(--ink); stroke-width: 1.5 } .t8scl { font: 600 11px var(--mono); fill: var(--muted) }
.t8eu { stroke: #B3261E; stroke-width: 2.5; stroke-dasharray: 6 4 } .t8eul { font: 700 11.5px var(--sans); fill: #B3261E }
.t8lvl { font: 800 14px var(--sans); fill: var(--ink) }
.hk.t8k-w::before { background: #2B6CB0; border-color: #2B6CB0 }
.hk.t8k-o::before { background: color-mix(in srgb, #2B6CB0 25%, var(--bg)); border: 1.5px dashed #2B6CB0 }
.hk.t8k-eu::before { height: 0; border: 0; border-top: 3px dashed #B3261E; border-radius: 0; width: 18px }

/* Hebelpult */
.t8pult { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; background: var(--panel); border-radius: 12px; padding: 10px }
.t8lv { display: grid; grid-template-rows: 62px auto; justify-items: center; gap: 6px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 8px; min-height: 44px; cursor: pointer; font-weight: 700; font-size: 14px; line-height: 1.3; text-align: center }
.t8knob { position: relative; width: 14px; height: 58px; border-radius: 7px; background: var(--track) }
.t8knob::after { content: ""; position: absolute; left: 50%; top: 2px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--ink); transition: top .25s }
.t8lv[aria-pressed="true"] { border-color: var(--c) } .t8lv[aria-pressed="true"] .t8knob { background: var(--c) } .t8lv[aria-pressed="true"] .t8knob::after { top: 30px }
.t8pc { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px }
.t8pc ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 15px }

@media (prefers-reduced-motion: reduce) { .t8doc.swap, .t8page.swap { animation: none } .t8w, .t8lev, .t8bulb, .t8glow, .t8bfill, .t8water, .t8orient, .t8knob::after { transition: none } }
.t8table { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch }
.t8side { display: grid; gap: 4px; align-content: start; border: 2px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg) }
.t8side b { font-size: 15px; line-height: 1.3 }
.t8hand { align-self: center; font-size: 22px; color: var(--c) }
.t8alt { display: grid; gap: 10px }
.t8altrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.t8altw { grid-column: 1 / -1; font-weight: 800 }
@media (max-width: 560px) { .t8table { grid-template-columns: 1fr } .t8hand { justify-self: center; transform: rotate(90deg) } .t8altrow { grid-template-columns: 1fr } }

/* AW-10: Mein Beruf. Berufswahl für die ganze Station, Ausbildungsband, Notenbalken, Wendekarten, Stellenfinder, Fonds-Rechner, Streitgespräch */
.b10pick { display: grid; gap: 6px }
.b10seg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px }
.b10seg button { text-align: center }
.b10area { display: grid; gap: 14px }
.b10area.swap { animation: swapin .22s ease }

/* Ausbildungsband */
.b10wrap { display: grid; gap: 2px; padding-right: 0 }
.b10band { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 8px; align-items: stretch }
.b10years { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; height: 56px }
.b10y { display: flex; align-items: flex-start; justify-content: flex-start; padding: 4px 8px; font: 700 12px var(--mono); color: var(--muted); border-left: 1px solid var(--line); position: relative; z-index: 2 }
.b10y:first-child { border-left: 0 }
.b10mark { position: absolute; bottom: 0; height: 28px; background: var(--c); z-index: 1; transition: left .3s ease, width .3s ease }
.b10ubarow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 72px 0 0 }
.b10ubac { display: grid; gap: 2px }
.b10ubat { display: block; height: 14px; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--bg) }
.b10ubat span { display: block; height: 100%; background: var(--c) }
.b10ubal { font: 700 12px var(--mono); color: var(--muted) }
.b10after { border: 2px dashed var(--track); border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 700 12px var(--mono); color: var(--muted) }
.b10after.on { border-style: solid; border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, var(--bg)); color: var(--ink) }
.b10axis { position: relative; height: 18px; margin-right: 72px; font: 600 12px var(--mono); color: var(--muted) }
.b10axis span { position: absolute; top: 0; transform: translateX(-50%) }
.b10axis span:first-child { transform: none } .b10axis span:last-child { transform: translateX(-100%) }
.b10cap { font-size: 13px; color: var(--muted); margin-right: 72px }
.b10evs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px }
.b10ev { display: grid; gap: 0; text-align: left; border: 2px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 6px 12px; min-height: 52px; cursor: pointer }
.b10ev b { font-size: 15px; line-height: 1.3 }
.b10when { font: 700 12px var(--mono); color: var(--muted) }
.b10ev[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--bg)) }
.b10ev:focus-visible { outline: 3px solid var(--c); outline-offset: 2px }

/* Notenbalken */
.n10zp { border: 2px dashed var(--track); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px }
.n10teil { display: grid; gap: 8px }
.n10bar { display: flex; height: 40px; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden }
.n10bar.sm { height: 24px }
.n10s { display: flex; align-items: center; justify-content: center; min-width: 0; border-left: 2px solid var(--bg) }
.n10s:first-child { border-left: 0 }
.n10s b { font: 700 13px var(--mono); white-space: nowrap }
.n10-1 { background: var(--c); color: #fff }
.n10-x { background: color-mix(in srgb, var(--c) 28%, var(--bg)); color: var(--ink) }
.n10-w { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, color-mix(in srgb, var(--c) 28%, var(--bg)) 2px 7px); color: var(--ink) }
.n10-w b { background: var(--bg); border-radius: 4px; padding: 1px 4px }
.n10list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 680px }
.n10list li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.35 }
.n10list li b { font: 700 14px var(--mono) }
.n10sw { width: 16px; height: 16px; border-radius: 3px; border: 2px solid var(--ink); display: block; align-self: center }
.n10leg { margin: 0 }
.n10k-1::before { background: var(--c) } .n10k-x::before { background: color-mix(in srgb, var(--c) 28%, var(--bg)) }
.n10k-w::before { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, color-mix(in srgb, var(--c) 28%, var(--bg)) 2px 7px) }
.n10cmp { display: grid; gap: 8px }
.n10row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 48px; gap: 10px; align-items: center }
.n10rl { font-size: 15px; font-weight: 600 }
.n10rv { font: 700 14px var(--mono); text-align: right }
.n10row.me .n10rl { font-weight: 900 }
.n10row.me .n10bar { outline: 3px solid var(--c); outline-offset: 2px }

/* Wendekarten */
.k10grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.k10 { display: grid; perspective: 900px }
.k10f, .k10b { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .45s ease; border-radius: 12px; padding: 12px 14px; min-height: 170px }
.k10f { display: grid; align-content: start; gap: 8px; text-align: left; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); cursor: pointer; font: inherit }
.k10f:hover { background: var(--panel) }
.k10f:focus-visible { outline: 3px solid var(--c); outline-offset: 2px }
.k10f .tag { justify-self: start }
.k10ctx { font-size: 13px; color: var(--muted); line-height: 1.35 }
.k10q { font-weight: 700; font-size: 16px; line-height: 1.4 }
.k10go { font: 700 13px var(--mono); color: var(--muted); align-self: end }
.k10b { display: grid; align-content: start; gap: 8px; background: color-mix(in srgb, var(--c) 12%, var(--bg)); border: 2px solid var(--c); transform: rotateY(180deg); font-size: 15px; line-height: 1.45 }
.k10b p { margin: 0 }
.k10back { justify-self: start; min-height: 44px; padding: 0 8px }
.k10.on .k10f { transform: rotateY(-180deg) }
.k10.on .k10b { transform: rotateY(0) }
.k10:not(.on) .k10b, .k10.on .k10f { visibility: hidden; transition: transform .45s ease, visibility 0s .22s }
.k10.on .k10b, .k10:not(.on) .k10f { visibility: visible; transition: transform .45s ease, visibility 0s .22s }

/* Stellenfinder */
.h10cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px }
.h10card { border: 2px solid var(--ink); border-left: 8px solid var(--c); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, .08) }
.h10n { font-weight: 900; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto }
.h10foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
.h10foot a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center }

/* Fonds-Rechner */
.f10step { display: flex; align-items: center; gap: 12px }
.f10b { width: 48px; justify-content: center; font-size: 22px; padding: 0 }
.f10n { min-width: 90px; text-align: center; font-size: 17px }
.f10row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 96px; gap: 10px; align-items: center }
.f10k { font-size: 15px; font-weight: 600 }
.f10track { height: 22px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow: hidden }
.f10bar { display: block; height: 100%; transition: width .3s ease }
.f10-ab { background: var(--ink) } .f10-zu { background: var(--c) }
.ix .out .f10v { font: 700 14px var(--mono); text-align: right }
.f10res { font-size: 17px; border-left: 4px solid var(--ink); padding-left: 10px }
.f10res.plus { border-color: var(--c) }

/* Streitgespräch */
.s10pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.s10side { border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; background: var(--bg); border: 2px solid var(--line) }
.s10side.pro { border-top: 6px solid var(--c) } .s10side.con { border-top: 6px solid var(--ink) }
.s10who { font-size: 14px; color: var(--muted) }

@media (max-width: 560px) {
  .b10seg { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .b10band { grid-template-columns: minmax(0, 1fr) 48px }
  .b10axis, .b10cap, .b10ubarow { margin-right: 56px }
  .b10after { font-size: 11px }
  .n10row { grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 8px }
  .n10rl { font-size: 14px }
  .f10row { grid-template-columns: 1fr 88px; row-gap: 4px } .f10k { grid-row: 1; grid-column: 1 } .f10v { grid-row: 1; grid-column: 2 } .f10track { grid-column: 1 / -1; grid-row: 2 }
  .s10pair { grid-template-columns: 1fr }
  .k10grid { grid-template-columns: 1fr }
  .k10f, .k10b { min-height: 0 }
}
@media (prefers-reduced-motion: reduce) { .b10mark, .f10bar, .k10f, .k10b { transition: none !important } .b10area.swap { animation: none } }

/* Baustelle: gesperrte Strecke zwischen zwei Unterrichtsabschnitten (Eike 2026-10-24) */
.schranke { pointer-events: auto }
.stop .bau-sign { position: absolute; left: 150px; top: 0; z-index: 2 }
@media (max-width: 760px) {
  .stop .bau-sign { left: -1px; top: auto; bottom: 0 }
  .stop .grp { white-space: normal }
}

/* DS-01: Grundrechte und demokratische Ordnung */
.seg.col2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) }
.mini-box.mb-gg { border-color: var(--c) }
.mini-box.mb-no { border-color: #B3261E }
.mini-box.mb-pro, .mini-box.mb-con { border-top-width: 6px }
.mini-box.mb-pro { border-top-color: #0B7A3E } .mini-box.mb-con { border-top-color: #B3261E }

/* 1933 im Maßstab */
.y33wrap { padding: 26px 8px 4px }
.y33track { position: relative; height: 34px; border-radius: 6px; background: var(--panel); border: 2px solid var(--line) }
.y33mon { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--track) }
.y33mon span { position: absolute; top: -24px; left: 4px; font: 700 12px var(--mono); color: var(--muted); white-space: nowrap }
.y33run { position: absolute; top: 9px; height: 12px; background: var(--ink); border-radius: 6px; transition: width .5s ease }
.y33m { position: absolute; top: 4px; width: 4px; height: 22px; margin-left: -2px; background: var(--muted); border-radius: 2px }
.y33m.on { background: var(--c); width: 8px; margin-left: -4px; top: -2px; height: 34px; box-shadow: 0 0 0 2px var(--bg) }
.y33evs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px }
.y33ev { hyphens: auto; overflow-wrap: break-word; font-size: 16px; border: 2px solid var(--ink); background: var(--bg); border-radius: 8px; padding: 6px 10px; min-height: 52px; text-align: left; display: grid; gap: 2px }
.y33ev[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.y33d { font: 700 12px var(--mono); opacity: .8 }
.y33tag { font: 700 13px var(--mono); color: var(--muted) }
@media (prefers-reduced-motion: reduce) { .y33run { transition: none } }

/* Formstabile Kästen: alle Inhalte liegen in derselben Rasterzelle, sichtbar ist einer */
.fest { display: grid; min-width: 0 }
.fest > * { grid-area: 1 / 1; min-width: 0 }
.fest > .fest-s { visibility: hidden; pointer-events: none }
.fest > .out { align-content: start }

/* Leas Tag: Weg durch das Viertel */
.sp-wrap { position: relative; aspect-ratio: 600 / 380; width: 100%; max-width: 760px; margin: 0 auto; border-radius: 10px; overflow: hidden; border: 2px solid var(--line) }
.sp-map { position: absolute; inset: 0; width: 100%; height: 100% }
.sp-land { fill: var(--panel) }
.sp-water { fill: color-mix(in srgb, #2F7FC1 22%, var(--bg)) }
.sp-wl { font: 700 15px var(--mono); fill: color-mix(in srgb, #2F7FC1 70%, var(--ink)); letter-spacing: .2em }
.sp-str { stroke: var(--bg); stroke-width: 14; stroke-linecap: round }
.sp-bau { fill: var(--track); opacity: .55 }
.sp-way { fill: none; stroke: var(--muted); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; opacity: .7 }
.sp-done { fill: none; stroke: var(--c); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round }
.sp-lea circle { fill: var(--c); stroke: var(--bg); stroke-width: 3 }
.sp-lea .sp-lea-i { fill: var(--bg); stroke: none }
.sp-pin { position: absolute; transform: translate(-50%, calc(-100% - 12px)); display: grid; justify-items: center; gap: 2px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 3px 8px; line-height: 1.15; z-index: 1 }
.sp-pin b { font: 700 13px var(--mono); white-space: nowrap }
.sp-pin span { font-size: 13px; font-weight: 700; white-space: nowrap }
.sp-pin[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #fff; z-index: 2 }
.sp-pin:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.sp-pin::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -6px; border: 6px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0 }
.sp-pin[aria-pressed="true"]::after { border-top-color: var(--c) }
.sp-now { white-space: nowrap }
.sp-now { font-family: var(--mono); font-weight: 700 }
@media (max-width: 600px) {
  .sp-pin { padding: 2px 5px; border-radius: 6px }
  .sp-pin span { display: none }
  .sp-pin[aria-pressed="true"] span { display: block; font-size: 12px }
  .sp-pin b { font-size: 12px }
}

/* Wer steht dir gegenüber? */
.geg { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0; padding: 6px 0 }
.geg > div { position: relative; z-index: 1 }
.geg-du, .geg-to { border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; background: var(--bg); min-width: 72px; text-align: center; display: grid }
.geg-to small, .geg-mid small { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.geg-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px; position: relative }
.geg-line { position: absolute; left: 0; right: 0; bottom: 22px; height: 3px; background: var(--ink); z-index: -1 }
.geg-line::after { content: ''; position: absolute; right: -2px; top: -6px; border: 7px solid transparent; border-left: 10px solid var(--ink); border-right: 0 }
.geg-gr, .geg-law { border-radius: 8px; padding: 4px 10px; text-align: center; display: grid; background: var(--bg) }
.geg-gr { border: 3px solid var(--c) }
.geg-gr.dim { border-style: dashed; opacity: .85 }
.geg-law { border: 3px solid var(--ink) }
.geg-down { font-size: 13px; color: var(--muted) }
.geg-down::after { content: ' ↓' }
.geg:not(.priv) .geg-line { bottom: 50% }

/* Vier Prüfungen */
.sieb-wrap { position: relative; padding-left: 40px }
.ix ol.sieb { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; border-left: 3px dashed var(--track); padding-left: 14px }
.sieb-tor { display: grid; grid-template-columns: 34px 1fr 30px; gap: 10px; align-items: center; border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg) }
.sieb-n { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-content: center; font-weight: 900 }
.sieb-tt { display: grid } .sieb-tt small { color: var(--muted); font-size: 14px }
.sieb-st { font-size: 22px; font-weight: 900; text-align: center }
.sieb-tor.s-ja { border-color: #0B7A3E } .sieb-tor.s-ja .sieb-st { color: #0B7A3E }
.sieb-tor.s-nein { border-color: #B3261E; background: var(--panel) } .sieb-tor.s-nein .sieb-st { color: #B3261E }
.sieb-tok { position: absolute; left: 6px; top: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--c); transition: top .45s cubic-bezier(.3, .7, .3, 1) }
.sieb-tok.stuck { background: #B3261E; box-shadow: 0 0 0 2px #B3261E }
.sieb-tok.thru { background: #0B7A3E; box-shadow: 0 0 0 2px #0B7A3E }
@media (prefers-reduced-motion: reduce) { .sieb-tok { transition: none } }

/* Das Grundgesetz als Haus */
.haus { display: grid; gap: 6px; max-width: 560px; width: 100%; margin: 0 auto }
.haus button { border: 2px solid var(--ink); background: var(--bg); font-weight: 800; position: relative; padding: 6px }
.haus button[aria-pressed="true"] { background: var(--c); color: #fff; border-color: var(--c) }
.haus-dach { clip-path: polygon(50% 0, 100% 100%, 0 100%); min-height: 96px; padding-top: 40px !important; border: 0 !important; background: var(--track) !important }
.haus-dach[aria-pressed="true"] { background: var(--c) !important }
.haus-waende { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px }
.haus-wand { min-height: 170px; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 34px !important }
.haus-wand .haus-lock { position: absolute; top: 12px; left: 50%; margin-left: -8px }
.haus-wand span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 16px; letter-spacing: .02em }
.haus-grund { min-height: 54px; border-radius: 4px; background: var(--panel) !important; display: flex; align-items: center; justify-content: center; gap: 8px }
.haus-grund[aria-pressed="true"] { background: var(--c) !important }
.haus-lock { width: 16px; height: 16px; flex: none }
.haus-leg { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--muted) }
.haus-leg .haus-lock { margin-top: 3px; color: var(--ink) }
.haus-all { background: color-mix(in srgb, var(--c) 10%, var(--bg)); border-left: 4px solid var(--c); border-radius: 6px; padding: 8px 12px; display: grid; gap: 4px }
.haus-all > b { font: 700 12px var(--mono) !important; text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }

/* Drei Hürden */
.ae { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; counter-reset: ae }
.ae-step { border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; counter-increment: ae }
.ae-h b::before { content: counter(ae) '. ' }
.ae-step.ae-pass { border-color: #0B7A3E }
.ae-step.ae-stop { border-color: #B3261E; background: var(--panel) }
.ae-step.ae-moot, .ae-step.ae-skip { border-style: dashed }
.ae-bar { position: relative; height: 16px; border-radius: 8px; background: var(--panel); border: 1px solid var(--track); overflow: visible }
.ae-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #0B7A3E; border-radius: 8px }
.ae-need { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1px; background: var(--ink) }
.ae-walls { display: flex; flex-wrap: wrap; gap: 4px }
.ae-wall { font-size: 13px; font-weight: 700; border: 2px solid var(--line); border-radius: 6px; padding: 2px 6px }
.ae-wall.hit { border-color: #B3261E; background: #B3261E; color: #fff }

/* Dieselbe Zeitung, zwei Staaten */
.ztg { border: 1px solid var(--track); background: #FBF8F1; color: #1B1B1B; padding: 14px 16px 16px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); font-family: Georgia, 'Times New Roman', serif; display: grid; gap: 10px }
.ztg-kopf { border-bottom: 3px double #1B1B1B; padding-bottom: 6px; display: grid; justify-items: center; text-align: center }
.ztg-name { font: 900 clamp(26px, 6vw, 38px)/1 Georgia, serif; letter-spacing: .02em }
.ztg-meta { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #555 }
.ztg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-top: 1px solid #1B1B1B }
.ztg-a { background: none; border: 0; border-bottom: 1px solid #C9C2B2; text-align: left; padding: 10px 8px; min-height: 64px; color: inherit; font: inherit; border-radius: 0 }
.ztg-cols .ztg-a:not(:last-child) { border-right: 1px solid #C9C2B2 }
.ztg-a.lead .ztg-h { font-size: clamp(21px, 4.4vw, 28px); line-height: 1.15; font-weight: 900 }
.ztg-h { font-weight: 700; font-size: 17px; line-height: 1.25 }
.ztg-st { display: grid } .ztg-st > span { grid-area: 1 / 1 } .ztg-st > .off { visibility: hidden }
.ztg-a[aria-pressed="true"] { background: #FFF1B8; outline: 3px solid var(--c); outline-offset: -3px }
.ztg-a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px }
.ztg.dik { background: #EDEDED; filter: grayscale(1) }
.ztg.dik .ztg-a[aria-pressed="true"] { background: #FFF; filter: none }
.ps-pair { align-items: stretch }

@media (max-width: 600px) {
  .haus-wand { min-height: 150px }
  .haus-wand span { font-size: 15px }
  .geg { grid-template-columns: auto 1fr auto }
  .geg-du, .geg-to { min-width: 0; padding: 6px 8px }
}
.ix .out .dcase { background: var(--bg) }
.ix ol.ae { margin: 0; padding: 0 }
.ds-wehr .stufe span { hyphens: manual; overflow-wrap: normal; word-break: normal }
@media (max-width: 600px) { .ds-wehr .stufe span:last-child { font-size: 13px } }

/* DS-02: Staatliche Entscheidungen und Kontrolle */
.lg { display: grid; min-width: 0 }
.lg > .lg-s { grid-area: 1 / 1; min-width: 0; display: grid; gap: 6px; align-content: start; transition: opacity .25s ease }
.lg > .lg-s.off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s .25s }
.ix .lg.out > .lg-s { gap: 8px }
.ico { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none }
.ico svg { width: 100%; height: 100% }

/* Drei Gewalten */
.gw-row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.gw-card { border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; background: var(--bg); transition: background .3s ease, border-color .3s ease }
.gw-top { display: flex; align-items: center; gap: 8px }
.gw-t { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.gw-who { font-size: 17px }
.gw-krone { position: absolute; left: 50%; top: -18px; margin-left: -18px; width: 36px; height: 36px; border-radius: 50%; background: #B3261E; color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s ease }
.gw-krone .ico { width: 22px; height: 22px }
.gw-row.eins .gw-krone { opacity: 1; transform: none }
.gw-row.eins .gw-card { border-color: #B3261E; background: color-mix(in srgb, #B3261E 8%, var(--bg)) }
.gw .seg { padding-bottom: 8px }
@media (max-width: 700px) { .gw-row { grid-template-columns: 1fr } .gw-krone { left: auto; right: 10px; margin-left: 0 } }

/* Ebenen-Zeichen */
.lv { display: inline-block; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: #fff; border-radius: 6px; padding: 3px 8px }
.lv-bund { background: #1F3A68 } .lv-land { background: #0B7A3E } .lv-kreis { background: #8A5300 } .lv-stadt { background: #6B3FA0 }
.lv-row { display: flex; flex-wrap: wrap; gap: 6px }
.lv-leg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }

/* Ein Morgen, drei Ebenen */
.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.dg { display: flex; align-items: center; gap: 10px; min-height: 52px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 6px 12px; font-weight: 700; text-align: left }
.dg[aria-pressed="true"] { background: var(--ink); color: var(--bg) }

/* Parlamente über deinem Wohnort */
.pe { display: grid; gap: 6px }
.pe-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: stretch; transition: opacity .25s ease }
.pe-lv { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); align-self: center }
.pe-cell { border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; background: var(--bg); transition: border-color .25s ease, background .25s ease }
.pe-row.pe-off .pe-cell { border-style: dashed; border-color: var(--track); background: var(--panel) }
.pe-row.pe-off .pe-cell b { color: var(--muted) }
.pe-row.pe-link .pe-cell { border-style: dashed }
@media (max-width: 600px) { .pe-row { grid-template-columns: 1fr; gap: 2px } }

/* Plenarsaal */
.pl-seg button { font-family: var(--mono); font-size: 15px }
.pl-wrap { max-width: 640px; width: 100%; margin: 0 auto }
.pl-saal { width: 100%; height: auto; display: block }
.pl-g { transition: opacity .45s ease }
.pl-g.weg { opacity: .14 }
.pl-linke { fill: #BE3075 } .pl-gruene { fill: #1AA037 } .pl-ssw { fill: #E0A800 } .pl-spd { fill: #E3000F } .pl-union { fill: var(--ink) } .pl-afd { fill: #009EE0 }
.pl-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 14px; font-weight: 700 }
.pl-li { display: inline-flex; align-items: center; gap: 6px }
.pl-sw { width: 12px; height: 12px; border-radius: 50%; display: inline-block }
.pl-sw.pl-linke { background: #BE3075 } .pl-sw.pl-gruene { background: #1AA037 } .pl-sw.pl-ssw { background: #E0A800 } .pl-sw.pl-spd { background: #E3000F } .pl-sw.pl-union { background: var(--ink) } .pl-sw.pl-afd { background: #009EE0 }
@media (prefers-reduced-motion: reduce) { .pl-g, .lg > .lg-s, .gw-krone, .gw-card { transition: none } }

/* Drei Gesetze auf einem Spielbrett */
.brd { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel) }
.brd-ln { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible }
.brd-w { fill: none; stroke: var(--track); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round }
.brd-u { fill: none; stroke: #B3261E; stroke-width: 4; stroke-dasharray: 8 7; stroke-linejoin: round }
.brd-f { grid-row: var(--r); grid-column: var(--c); position: relative; z-index: 1; min-height: 104px; min-width: 0; background: var(--bg); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px 44px; display: grid; align-content: start; gap: 2px; transition: box-shadow .3s ease }
.brd-f b { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto }
.brd-f small { font-size: 12px; color: var(--muted); line-height: 1.25 }
.brd-n { font: 800 12px var(--mono); color: var(--muted) }
.brd-f { border-top-width: 7px }
.brd-f.w-ges { border-top-color: #78909C } .brd-f.w-rg { border-top-color: #37474F } .brd-f.w-bt { border-top-color: #1E5AA8 } .brd-f.w-br { border-top-color: #8A5300 } .brd-f.w-bp { border-top-color: #AD8A00 }
.brd-n { text-transform: uppercase; font-size: 11px; letter-spacing: .02em; line-height: 1.2 }
.brd-f.um { border-style: dashed; border-color: #B3261E }
.brd-f.ziel { background: var(--ink); color: var(--bg) }
.brd-f.ziel .brd-n { color: inherit; opacity: .75 }
.brd-f.hit { box-shadow: 0 0 0 4px #0B7A3E }
.brd-f.h-stop { box-shadow: 0 0 0 4px #B3261E } .brd-f.h-komp { box-shadow: 0 0 0 4px #C77700 } .brd-f.h-kurz { box-shadow: 0 0 0 4px #1565C0 }
.brd-leg { grid-row: 3; grid-column: 3 / 5; align-self: center; position: relative; z-index: 1; display: grid; gap: 6px; font-size: 14px }
.brd-leg span { display: flex; align-items: center; gap: 8px }
.brd-leg small { color: var(--muted) }
.brd-tk { position: absolute; left: 0; top: 0; z-index: 2; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; font: 900 14px var(--sans); color: #fff; border: 2px solid var(--bg); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); transition: transform .6s cubic-bezier(.4, .1, .2, 1) }
.brd-tk-s { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font: 900 12px var(--sans); font-style: normal; color: #fff; flex: none }
.brd-ms { background: #7B3FA0 } .brd-ml { background: #00796B } .brd-bg { background: #C25E00 }
.brd-bar { display: flex; flex-wrap: wrap; gap: 8px }
.brd-b { border: 2px solid var(--ink); background: var(--ink); color: var(--bg); border-radius: 10px; padding: 8px 14px; font: 700 15px var(--sans); min-height: 44px }
.brd-b.flat { background: var(--bg); color: var(--ink) }
.brd-b:disabled { opacity: .4; cursor: default }
.brd-b:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.brd-cs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.brd-c { background: var(--bg); border-radius: 8px; padding: 8px 10px; display: grid; gap: 4px; align-content: start; border-top: 4px solid #0B7A3E }
.brd-c.bc-stop { border-top-color: #B3261E } .brd-c.bc-komp { border-top-color: #C77700 } .brd-c.bc-kurz { border-top-color: #1565C0 } .brd-c.bc-ziel { border-top-color: var(--ink) }
.brd-c.fertig { border-top-color: var(--track); color: var(--muted) }
.brd-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px }
.brd-ch b { font-size: 15px }
.brd-cf { font-size: 13px; font-weight: 700; color: var(--muted) }
.brd-cd { font: 700 12px var(--mono); color: var(--muted) }
.brd-st { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px }
.gs-kurz { border: 2px dashed #1565C0 } .gs-ziel { background: var(--ink) }
@media (max-width: 760px) {
  .brd { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 10px }
  .brd-f { grid-row: var(--rm); grid-column: var(--cm); min-height: 96px }
  .brd-leg { grid-row: 6; grid-column: 1 / -1 }
  .brd-cs { grid-template-columns: 1fr }
}

/* Spiel: Azubi-Urlaubsgesetz */
.ix ol.sp2-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; max-width: none }
.sp2-chip { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; border: 2px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--muted); transition: background .25s ease, color .25s ease, border-color .25s ease }
.sp2-chip.on { border-color: var(--c); color: var(--ink) }
.sp2-chip.cur { border-color: var(--c); background: var(--c); color: #fff }
.sp2-stage { border: 2px solid var(--line); border-radius: 12px; background: var(--panel) }
.sp2-stage > .lg-s { padding: 14px; display: flex; flex-direction: column; gap: 14px }
.sp2-sc { display: contents }
.sp2-txt { display: grid; gap: 8px; align-content: start }
.sp2-h { font-size: 21px; font-weight: 900; line-height: 1.2 }
.sp2-ch { margin-top: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px }
.sp2-c { display: grid; gap: 2px; text-align: left; border: 2px solid var(--ink); background: var(--ink); color: var(--bg); border-radius: 10px; padding: 8px 12px; min-height: 52px; font: inherit }
.sp2-c b { font-size: 16px }
.sp2-c small { font-size: 13px; opacity: .85 }
.sp2-c.flat { background: var(--bg); color: var(--ink) }
@media (max-width: 760px) { .sp2-ch { margin-top: 0 } }
.sp2-c:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.sp2-zit { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 14px }
.sp2-zit .quote { --c: var(--ink) }
.sp2-ok .sp2-h { color: #0B7A3E } .sp2-no .sp2-h { color: #B3261E }
:root[data-theme="dark"] .sp2-ok .sp2-h { color: #6FD39A } :root[data-theme="dark"] .sp2-no .sp2-h { color: #FF8A80 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sp2-ok .sp2-h { color: #6FD39A } :root:not([data-theme="light"]) .sp2-no .sp2-h { color: #FF8A80 } }

/* Abstimmungsbalken für Bundestag und Bundesrat */
.vb { position: relative; height: 22px; border-radius: 6px; background: var(--bg); border: 2px solid var(--track); overflow: visible }
.vb-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 4px }
.vb-fill.vb-r { left: auto; right: 0 }
.vb-ja { background: #0B7A3E } .vb-nein { background: #B3261E }
.vb-fill.grow { animation: vbgrow .7s ease }
@keyframes vbgrow { from { width: 0 } }
.vb-need { position: absolute; top: -7px; bottom: -7px; width: 3px; margin-left: -1px; background: var(--ink); border-radius: 2px }
.vb-lab { font-size: 15px }
.br { display: grid; gap: 8px }
.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px }
.br-l { display: flex; justify-content: space-between; gap: 4px; align-items: center; border-radius: 6px; padding: 4px 8px; font-size: 13px; border: 2px solid transparent; min-width: 0 }
.br-l b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.br-l span { font: 700 13px var(--mono) }
.br-ja { background: #0B7A3E; color: #fff } .br-nein { background: #B3261E; color: #fff } .br-enth { background: var(--bg); color: var(--ink); border-color: var(--track) }
.br-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px }
.br-leg span { display: inline-flex; align-items: center; gap: 6px }
.br-sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; box-sizing: border-box }
@media (prefers-reduced-motion: reduce) { .vb-fill.grow { animation: none } .sp2-chip { transition: none } }

/* Der Tisch des Bundespräsidenten */
.urk-wrap { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 14px; align-items: start }
.urk { position: relative; background: #FBF8F1; color: #1B1B1B; border: 1px solid #C9C2B2; border-radius: 4px; padding: 14px 16px 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); display: grid; gap: 6px; font-family: Georgia, 'Times New Roman', serif; min-height: 200px }
.urk-k { font: 700 11px var(--mono) !important; text-transform: uppercase; letter-spacing: .08em; color: #555 }
.urk-t { font-size: 20px; font-weight: 700; line-height: 1.2 }
.urk-y { font-size: 14px; color: #555 }
.urk-sig { margin-top: 18px; display: grid; gap: 4px }
.urk-line { height: 0; border-bottom: 1px solid #1B1B1B }
.urk-sig small { font-size: 12px; color: #444 }
.urk-st { justify-self: start; font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .04em; border: 3px solid; border-radius: 6px; padding: 4px 8px; transform: rotate(-4deg); margin-top: 6px }
.us-stop { color: #B3261E } .us-komp { color: #8A5300 } .us-ok { color: #0B7A3E }
@media (max-width: 600px) { .urk-wrap { grid-template-columns: 1fr } .urk { min-height: 0 } }

/* Karlsruhe: Flugzeugabschuss und Wer darf klagen */
.ab-kopf { display: flex; align-items: center; gap: 8px; font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .04em; background: #8B1A1A; color: #fff; border-radius: 10px; padding: 8px 14px; margin: 0; max-width: none }
.sp2-ch.ab-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.ab-vs { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 16px }
.ab-m, .kl-r { font-weight: 800 }
.ab-m { font: 700 12px var(--mono); text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 2px solid }
.ab-m.gleich, .kl-r.gleich { color: #0B7A3E } .ab-m.anders, .kl-r.anders { color: #B3261E }
:root[data-theme="dark"] .ab-m.gleich, :root[data-theme="dark"] .kl-r.gleich { color: #6FD39A } :root[data-theme="dark"] .ab-m.anders, :root[data-theme="dark"] .kl-r.anders { color: #FF8A80 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ab-m.gleich, :root:not([data-theme="light"]) .kl-r.gleich { color: #6FD39A } :root:not([data-theme="light"]) .ab-m.anders, :root:not([data-theme="light"]) .kl-r.anders { color: #FF8A80 } }
.ab-sum { font-weight: 800 }
.kl-st > .lg-s { gap: 12px }
.kl-f { font-size: 17px; font-weight: 700; line-height: 1.35 }
.kl-bs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.kl-b { display: grid; gap: 2px; align-content: start; text-align: left; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 8px 12px; font: inherit; min-height: 64px; transition: background .25s ease, border-color .25s ease, opacity .25s ease }
.kl-b b { font-size: 15px } .kl-b small { font-size: 13px; color: var(--muted) }
.kl-b:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.kl-b:disabled { cursor: default; opacity: .5 }
.kl-b.richtig { opacity: 1; border-color: #0B7A3E; background: rgba(11, 122, 62, .14) }
.kl-b.falsch { opacity: 1; border-color: #B3261E; background: rgba(179, 38, 30, .12) }
.kl-w { justify-self: start }
@media (max-width: 560px) { .kl-bs { grid-template-columns: 1fr } }
@media (prefers-reduced-motion: reduce) { .brd-tk, .brd-f, .kl-b { transition: none } }
/* Halt bundestag: zwei Tagesabläufe als Bühne in Bildschirmhöhe */
.tdx { --bh: clamp(500px, calc(100svh - 150px), 760px) }
.tdx .td { display: grid; gap: 8px; align-content: start }
.td-buehne { height: var(--bh); display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); border: 2px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden }
.td-kopf { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 8px 14px 8px; border-bottom: 1px solid var(--line); background: var(--bg) }
.td-pg { grid-column: 1 / -1; display: block; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden }
.td-pf { display: block; height: 100%; width: 0; background: var(--c); transition: width .3s ease }
.td-ort { font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.td-zl { display: flex; gap: 10px; font-size: 13px; color: var(--muted); white-space: nowrap }
.td-zl b { font: 800 14px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums }
.td-stage { min-height: 0; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) }
.td-stage > .lg-s { display: block; min-height: 0; height: 100% }
.td-s { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto }
.td-in { overflow-y: auto; padding: 14px; display: grid; gap: 10px; align-content: start }
.td-f { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--panel) }
.td-w { min-width: 200px }
.td-w.zu, .sp2-c.zu { display: none }
.td-v > .lg-s { gap: 0 }
.td-info { display: flex; gap: 10px; align-items: flex-start; border-left: 4px solid var(--c); background: var(--bg); border-radius: 0 10px 10px 0; padding: 8px 12px }
.td-info .ico { flex: none; margin-top: 2px }
.td-info > div { display: grid; gap: 6px }
.td-fg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.td-fk { display: grid; gap: 6px; align-content: start }
.td-fk .td-o { text-align: left }
.td-fa p { margin: 0; font-size: 14px }
@media (max-width: 560px) { .td-fg { grid-template-columns: minmax(0, 1fr) } }
.td-vor { border: 2px dashed var(--ink); border-radius: 10px; padding: 10px 14px; display: grid; gap: 6px; background: var(--bg) }
.td-vor-k { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; margin: 0; color: var(--muted) }
.td-e { display: grid; gap: 8px }
.td-q { font-weight: 800; margin: 0 }
.sp2-ch.td-os { margin-top: 0 }
.td-o[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.td-o:disabled { opacity: .45 }
.td-bl { margin: 0; padding-left: 20px; display: grid; gap: 4px }
.td-bl li { display: flex; flex-wrap: wrap; gap: 0 6px }
.td-bw { display: inline-grid }
@media (max-width: 760px) { .td-kopf { grid-template-columns: 1fr } .td-zl { gap: 8px; font-size: 12px } .td-w { flex: 1 } }
@media (prefers-reduced-motion: reduce) { .td-pf { transition: none } }

/* Kanzlertag: Haushaltsnacht */
.hn { height: 100%; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); container-type: inline-size; position: relative }
.hn-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 14px; background: #1E2430; color: #fff }
.hn-uhr { font: 800 22px var(--mono); font-variant-numeric: tabular-nums; min-width: 4.2ch }
.hn-l { font: 700 13px var(--mono); color: #FFB4A8 }
.hn-ps { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 }
.hn-p { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--mono); text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 2px solid; transition: background .25s ease, color .25s ease }
.hn-p.pa { border-color: #B98BD6 } .hn-p.pb { border-color: #4DB6AC } .hn-p.pc { border-color: #FFB26B }
.hn-p.pa.spricht { background: #B98BD6; color: #1E2430 } .hn-p.pb.spricht { background: #4DB6AC; color: #1E2430 } .hn-p.pc.spricht { background: #FFB26B; color: #1E2430 }
.hn-m { display: inline-flex; gap: 2px } .hn-m i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .25) }
.hn-p[data-l="1"] .hn-m i:nth-child(-n+1), .hn-p[data-l="2"] .hn-m i:nth-child(-n+2), .hn-p[data-l="3"] .hn-m i { background: #FF8A80 }
.hn-pb { font: 700 12px var(--mono); text-transform: uppercase; color: #fff; background: transparent; border: 2px solid rgba(255, 255, 255, .6); border-radius: 8px; padding: 4px 10px; min-height: 32px }
.hn-pb:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.hn-body { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) }
.hn-r { min-height: 0; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) }
.hn-r > .lg-s { display: block; min-height: 0; height: 100% }
.hn-s { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto }
.hn-in { overflow-y: auto; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start }
.hn-f { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line) }
.hn-prot { position: absolute; inset: 48px 0 0 auto; width: min(320px, 100%); background: var(--bg); border-left: 2px solid var(--line); padding: 10px 14px; overflow-y: auto; display: none; z-index: 2; box-shadow: -8px 0 24px rgba(0, 0, 0, .15) }
.hn.prot-auf .hn-prot { display: block }
.hn-prot-k { font: 700 12px var(--mono); text-transform: uppercase; color: var(--muted); margin: 0 0 6px }
.hn-prot-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; max-width: none }
.hn-prot-l b { font: 700 12px var(--mono) }
@container (min-width: 820px) {
  .hn-body { grid-template-columns: minmax(0, 1fr) 260px }
  .hn-prot { display: block; position: static; width: auto; box-shadow: none }
  .hn-pb { display: none }
}
.hn-doc { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 10px 14px; display: grid; gap: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06) }
.hn-doc-k { font: 700 11px var(--mono); text-transform: uppercase; color: var(--muted); margin: 0 }
.hn-doc table { border-collapse: collapse; width: 100%; font-size: 15px }
.hn-doc td { padding: 3px 0; border-bottom: 1px solid var(--line) }
.hn-doc td + td { text-align: right; font: 700 14px var(--mono); padding-left: 12px; white-space: nowrap }
.hn-doc tfoot td { font-weight: 800; border-bottom: 0 }
.hn-zit { display: grid; gap: 6px }
.hn-q-a { --c: #7B3FA0 } .hn-q-b { --c: #00796B } .hn-q-c { --c: #C25E00 }
.hn-wahl { display: grid; gap: 8px }
.hn-wahl .td-o, .hn-gk .td-o { display: grid; gap: 2px; text-align: left }
.hn-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.hn-gk { display: grid; gap: 8px; align-content: start }
.hn-ga > .lg-s { gap: 4px }
.hn-push { display: grid; gap: 2px; border-radius: 14px; padding: 10px 14px; background: var(--bg); border: 2px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); max-width: 420px }
.hn-push small { font: 700 12px var(--mono); text-transform: uppercase; color: #B3261E }
.hn-bau { display: grid; gap: 8px }
.hn-mess { display: grid; gap: 4px; position: sticky; top: -12px; background: var(--panel); padding: 6px 0; z-index: 1 }
.hn-bal { display: block; height: 12px; border-radius: 999px; background: var(--line); overflow: hidden }
.hn-bf { display: block; height: 100%; width: 0; background: #C25E00; transition: width .3s ease }
.hn-bf.voll { background: #0B7A3E } .hn-bf.drueber { background: #B3261E }
.hn-sum { font: 800 15px var(--mono) }
.hn-er { display: grid; gap: 6px; border-left: 4px solid var(--c); padding: 2px 0 2px 10px }
.hn-q-x { --c: var(--ink) }
.hn-ert { font: 700 12px var(--mono); text-transform: uppercase }
.hn-eos { display: flex; flex-wrap: wrap; gap: 4px }
.hn-eo { font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--bg); border: 2px solid var(--line); border-radius: 16px; padding: 3px 12px; text-align: left }
.hn-eo[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg) }
.hn-eo:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.hn-erk p { margin: 0; font-size: 14px }
.hn-erk .sub { color: var(--muted) }
.hn-av { font: 700 11px var(--mono); font-style: normal; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted) }
.hn-av.r0 { color: #0B7A3E; border-color: #0B7A3E } .hn-av.r1 { color: #9A5B00; border-color: #9A5B00 } .hn-av.r2 { color: #B3261E; border-color: #B3261E }
.hn-antw { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: none }
.hn-antw li { border-left: 4px solid var(--c); padding-left: 8px }
.hn-konten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.hn-kz { display: grid; gap: 4px; align-content: start; border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--bg) }
.hn-kz > small:first-child { font-weight: 800; color: var(--ink) }
.hn-kgr { font-size: 13px; color: var(--muted) }
.hn-kb { display: flex; gap: 3px } .hn-kb i { flex: 1; height: 10px; border-radius: 3px; background: var(--line) } .hn-kb i.an { background: var(--ink) }
.hn-zahl { font: 800 26px var(--mono); line-height: 1.1 }
.hn-zettel { display: grid; gap: 6px; justify-items: start }
.hn-zettel .hn-push { padding: 6px 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, .1) }
.hn-zettel .hn-push small { color: var(--muted) }
.hn-ok, .hn-no { font-weight: 800; font-size: 18px; margin: 0 }
.hn-ok { color: #0B7A3E } .hn-no { color: #B3261E }
@container (max-width: 560px) {
  .hn-g, .hn-konten { grid-template-columns: 1fr }
  .hn-doc td + td { white-space: normal; text-align: left; font-size: 13px }
  .hn-eo { font-size: 13px; padding: 3px 10px }
}
@media (prefers-reduced-motion: reduce) { .hn-p, .hn-bf { transition: none } }
@container (max-width: 560px) {
  .hn-kopf { gap: 6px 10px; padding: 6px 12px }
  .hn-ps { order: 3; flex: 1 1 100%; flex-wrap: nowrap; gap: 4px }
  .hn-p { font-size: 10px; padding: 2px 6px; gap: 4px }
  .hn-pb { margin-left: auto }
}
@media (max-width: 760px) { .td-zl { flex-wrap: wrap; white-space: normal; row-gap: 0 } }

#spassBtn { white-space: nowrap; flex: none }