/* Paket K1: Linie Ausbildung & Arbeit (AW). Überschreibungen zu den AW-Stilen in extra.css. */

/* ---------- gemeinsam für die Linie ---------- */
/* Treppen (Kit treppe, in ix-aw.js mit .awt markiert): neutral, nur die gewählte Stufe in Linienfarbe (5.1 A4), Schrift mit mindestens 4,5:1 */
.awt .stufe { background: var(--panel); color: var(--ink); border: 2px solid var(--line); border-bottom: 0; opacity: 1 }
.awt .stufe.past { background: color-mix(in srgb, var(--c) 16%, var(--bg)); opacity: 1 }
.awt .stufe[aria-checked="true"] { background: var(--c); border-color: var(--c); color: #fff; opacity: 1 }

/* ---------- AW-10 ---------- */
.f10calc { display: grid; gap: 2px; margin: 4px 0 0; font: 600 13px var(--mono); color: var(--muted) }
@media (max-width: 560px) { .n10row { grid-template-columns: 128px minmax(0, 1fr) 40px } }

/* ---------- AW-01 ---------- */
/* Wochenkacheln: lange Wörter dürfen an der weichen Trennstelle umbrechen */
.wkt span { hyphens: manual; overflow-wrap: break-word }
/* Wege zur Hilfe: gleich hohe Kacheln nebeneinander, keine Treppe */
.seg.awh { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px }
.seg.awh button { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; min-height: 76px; padding: 8px 10px; font-weight: 800 }
.seg.awh b { hyphens: manual; overflow-wrap: break-word }
.seg.awh .awh-tag { font: 600 12px var(--mono); color: var(--muted) }
.seg.awh button[aria-checked="true"] .awh-tag { color: inherit }
.awh-ax { display: flex; justify-content: space-between; gap: 12px; margin: 2px 0 4px; padding-top: 6px; border-top: 2px solid var(--line); font: 600 12px var(--mono); color: var(--muted); position: relative }
.awh-ax::after { content: ""; position: absolute; right: -1px; top: -7px; border: 6px solid transparent; border-left: 9px solid var(--line); border-right: 0 }
/* Aufgaben der Kammer: Karten wie Kalenderblätter, kein Bahnbild */
.awk { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px }
.awk-b { display: grid; align-content: start; gap: 6px; border: 2px solid var(--line); border-radius: 10px; background: var(--bg); padding: 0 0 10px; text-align: left; overflow: hidden; min-height: 44px }
.awk-b .awk-t { display: block; background: var(--panel); padding: 6px 10px; font: 700 12px var(--mono); color: var(--ink) }
.awk-b b { padding: 0 10px; font-size: 15px; line-height: 1.25 }
.awk-b.aside { border-style: dashed }
.awk-b[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.awk-b[aria-pressed="true"] .awk-t { background: var(--ink); color: var(--bg) }
.awk-b:focus-visible { outline: 3px solid var(--c); outline-offset: 2px }
/* Ausbildungsmarkt: Legende mit Werten unter jedem Balken, zugleich große Knöpfe */
.stk-leg { display: flex; flex-wrap: wrap; gap: 6px 14px }
.stk-lb { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 2px solid transparent; border-radius: 8px; background: none; padding: 2px 8px 2px 4px; font-size: 14px; text-align: left; color: var(--ink) }
.stk-lb b { font: 700 13px var(--mono) }
.stk-lb[aria-pressed="true"] { border-color: var(--ink) }
.stk-lb:focus-visible { outline: 3px solid var(--c); outline-offset: 2px }
.stk-sw { width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 4px; flex: none }
.stk-sw.s-vertrag { background: var(--c) } .stk-sw.s-frei { background: var(--bg) } .stk-sw.s-such { background: repeating-linear-gradient(45deg, var(--panel) 0 4px, var(--bg) 4px 8px) }

/* ---------- AW-02 ---------- */
/* Lupe der Beendigung: Platz für alle Datumsmarken (bisher feste Höhe für zwei Zeilen) */
.zlmarks { height: calc(var(--n, 2) * 54px + 6px) }
@media (max-width: 560px) { .zlmarks { height: calc(var(--n, 2) * 62px + 14px) } }
/* Verbindungslinien späterer Marken laufen hinter dem Text früherer Marken */
.zm { z-index: calc(5 - var(--row)) } .zm > b, .zm > span { background: var(--bg) }

/* ---------- AW-03 ---------- */
/* Arbeitstag: Achse 4 bis 22 Uhr, Randbeschriftungen ganz in der Grafik */
.aw3bars .brow.axis .tick:first-child { transform: none }
.aw3bars .brow.axis .tick:last-child { transform: translateX(-100%) }
/* Ruhezeit-Rechner auf dem Handy: Uhrzeiten passen in ihre Kästen */
@media (max-width: 560px) { .rz { gap: 6px } .rzk { padding: 10px 4px } .rzz { font-size: 24px; padding: 4px 6px } .rzr { min-width: 58px } }

/* AW-08 Laufzeit: Prozent und Monate stehen am Namen, nicht im schmalen Balken */
.t8bn .t8bv { display: block; font: 600 12.5px var(--sans); color: var(--muted); margin-top: 2px }
.t8bar.on .t8bn .t8bv { color: var(--ink) }

/* AW-08 Kurve: eigene Zeile für Verfahrensschritte */
.t8vsep { stroke-dasharray: 3 4 }
.t8yl.t8vl { font-weight: 600; font-style: italic; fill: var(--muted) }
.t8vbar { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 3 }
.hk.t8k-v::before { background: none; border: 2px dashed var(--ink); border-radius: 7px; width: 22px }

.b5rw { font-size: 14px; margin: 4px 0 10px }

/* AW-06 Frist: Betriebszugehörigkeit bleibt sichtbar, ist aber ohne Wirkung, wenn Tobias selbst kündigt */
.b6ctl.b6aus .seg { opacity: .45 }

/* Touch-Ziele mindestens 44 px (ALLE-04), nur in Interaktionen dieser Linie (.awx) */
.awx .seg button { min-width: 44px }
.awx .t8tab { min-height: 44px }
@media (max-width: 560px) {
  .awx .eb-grid { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) }
  .awx .b5fbar .b5tools .btn { min-height: 44px }
}

/* ===== Kontrast (ALLE-07), hell und dunkel. Kleine Schrift in Linienfarbe bekommt --awc:
   hell #B3261E (6,6:1 auf Weiß), dunkel #FF8A80 (8:1 auf #0E1013). Gedimmte Zustände ohne opacity auf Text. ===== */
.awx { --awc: #B3261E }
.awx .rzn, .awx .akg.ab18 .akc:not(.same) .akt, .awx .b7bk, .awx .z9st, .awx .eaud.ekk dt:nth-last-of-type(1), .awx .eaud.ekk dd:last-child { color: var(--awc) }
.awx .stempel { color: var(--awc); border-color: var(--awc) }
.awx .t8eul { fill: var(--awc) }
.awx .akf.hinten { background: #B3261E; border-color: #B3261E }
.awx .akf small { opacity: 1 }
.awx .ublatt.ende .ubm { background: #B3261E; color: #fff }
.awx .blatt.frist .bk { background: #B3261E }
/* gedimmt: Form statt Deckkraft */
.awx .kk.k-no { opacity: 1; background: var(--panel) }
.awx .kk.k-skip { opacity: 1; background: var(--panel) }
.awx .kk.k-skip .ks, .awx .kk.k-no .ks { color: var(--muted) }
.awx .ublatt.weg { opacity: 1; color: var(--muted) }
.awx .blatt.nach { opacity: 1; background: var(--panel); box-shadow: none; border-style: dashed }
.awx .blatt.nach b, .awx .blatt.nach .bx { color: var(--muted) }
.awx .blatt.nach .bk { background: var(--muted) }
.awx .b5sh { opacity: 1 } .awx .b5sh:not(.da) { color: var(--muted) }
.awx .b6d.run.we, .awx .b6d.gap.we { color: var(--ink); text-decoration: underline dotted; text-underline-offset: 2px }
.awx .b7mk.n i { opacity: 1 }
.awx .t8rows li.hit .t8no { color: var(--ink) }
.awx .b6c-unt { --k: #8C5E14 }
.awx .b5q[data-st="mal"] .b5stp { color: #855800 }
:root[data-theme="dark"] .awx { --awc: #FF8A80 }
:root[data-theme="dark"] .awx .akf.hinten { background: #B3261E; border-color: #B3261E; color: #fff }
:root[data-theme="dark"] .awx .ublatt.ende .ubm { background: #B3261E; color: #fff }
:root[data-theme="dark"] .awx .kl.kl-no .klst { border-color: #FF8A80; color: #FF8A80}
:root[data-theme="dark"] .awx .kl.kl-ok .klst { border-color: #6FD39A; color: #6FD39A}
:root[data-theme="dark"] .awx .kl.kl-mid .klst { border-color: #F2C14E; color: #F2C14E}
:root[data-theme="dark"] .awx .kl.kl-no .klt { text-decoration-color: #FF8A80 }
:root[data-theme="dark"] .awx .b7mk.y i { color: #6FD39A}
:root[data-theme="dark"] .awx .b7mk.n i { color: #FF8A80}
:root[data-theme="dark"] .awx .b7mk2.ok small { color: #6FD39A}
:root[data-theme="dark"] .awx .b7mk2.no small { color: #FF8A80}
:root[data-theme="dark"] .awx .b7msg.me { background: #B3261E; color: #fff }
:root[data-theme="dark"] .awx .ix .chips .chip[class*="b6c-"].on, :root[data-theme="dark"] .awx .chips .chip[class*="b6c-"].on { color: #0E1013 }
:root[data-theme="dark"] .awx .b6lr.cur .b6le { color: #FF8A80 }
:root[data-theme="dark"] .awx .ok { color: #6FD39A}
:root[data-theme="dark"] .awx .no { color: #FF8A80}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .awx { --awc: #FF8A80 }
  :root:not([data-theme="light"]) .awx .akf.hinten { background: #B3261E; border-color: #B3261E; color: #fff }
  :root:not([data-theme="light"]) .awx .ublatt.ende .ubm { background: #B3261E; color: #fff }
  :root:not([data-theme="light"]) .awx .kl.kl-no .klst { border-color: #FF8A80; color: #FF8A80}
  :root:not([data-theme="light"]) .awx .kl.kl-ok .klst { border-color: #6FD39A; color: #6FD39A}
  :root:not([data-theme="light"]) .awx .kl.kl-mid .klst { border-color: #F2C14E; color: #F2C14E}
  :root:not([data-theme="light"]) .awx .kl.kl-no .klt { text-decoration-color: #FF8A80 }
  :root:not([data-theme="light"]) .awx .b7mk.y i { color: #6FD39A}
  :root:not([data-theme="light"]) .awx .b7mk.n i { color: #FF8A80}
  :root:not([data-theme="light"]) .awx .b7mk2.ok small { color: #6FD39A}
  :root:not([data-theme="light"]) .awx .b7mk2.no small { color: #FF8A80}
  :root:not([data-theme="light"]) .awx .b7msg.me { background: #B3261E; color: #fff }
  :root:not([data-theme="light"]) .awx .ix .chips .chip[class*="b6c-"].on, :root:not([data-theme="light"]) .awx .chips .chip[class*="b6c-"].on { color: #0E1013 }
  :root:not([data-theme="light"]) .awx .b6lr.cur .b6le { color: #FF8A80 }
  :root:not([data-theme="light"]) .awx .ok { color: #6FD39A}
  :root:not([data-theme="light"]) .awx .no { color: #FF8A80}
}
:root[data-theme="dark"] .awx .kl.kl-no .klst { border-color: #FF8A80; color: #FF8A80 }
:root[data-theme="dark"] .awx .kl.kl-ok .klst { border-color: #6FD39A; color: #6FD39A }
:root[data-theme="dark"] .awx .kl.kl-mid .klst { border-color: #F2C14E; color: #F2C14E }
:root[data-theme="dark"] .awx .b7mk.y i { color: #6FD39A }
:root[data-theme="dark"] .awx .b7mk.n i { color: #FF8A80 }
:root[data-theme="dark"] .awx .b7mk2.ok small { color: #6FD39A }
:root[data-theme="dark"] .awx .b7mk2.no small { color: #FF8A80 }
:root[data-theme="dark"] .awx .ok { color: #6FD39A }
:root[data-theme="dark"] .awx .no { color: #FF8A80 }
/* K1: ausgegraute Wege im Abschlussplan lesbar lassen (statt Deckkraft .5) */
.awx .z9dqr.weg .z9c:not(.on) { opacity: 1; color: var(--muted); border-style: dashed }

/* ===== Auf dem Prüfstand: gemeinsames Gerüst (B2). Stimmen, Folgen, acht Positionsformen ===== */
.awx .ps-st { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 0 }
.awx .ps-sti { margin: 0; border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; background: var(--bg) }
.awx .ps-lager { margin: 0; justify-self: start; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px }
.awx .ps-sti blockquote { margin: 0; font-size: 16px; line-height: 1.45 }
.awx .ps-sti blockquote::before { content: "„" } .awx .ps-sti blockquote::after { content: "“" }
.awx .ps-sti figcaption { font-size: 13px; color: var(--muted) }
.awx .ps-fo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px }
.awx .ps-foi { border-left: 6px solid var(--c); background: var(--panel); border-radius: 0 10px 10px 0; padding: 10px 14px; display: grid; gap: 6px; align-content: start }
.awx .ps-foi p { margin: 0 }
.awx .ps-wenn { font-weight: 800 }
.awx .ps-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 6px 0 0 }
.awx .ps-dl dt { color: var(--muted); font-size: 14px } .awx .ps-dl dd { margin: 0 }

/* AW-01 Schieber: vier Halte auf einer Schiene */
.awx .ps-achse { display: flex; justify-content: space-between; font: 500 12px var(--mono); color: var(--muted); margin-bottom: -2px }
.awx .seg.ps-schieber { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; padding-top: 22px }
.awx .seg.ps-schieber::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 31px; height: 6px; border-radius: 3px; background: var(--track) }
.awx .seg.ps-schieber button { border: 0; background: none; color: var(--ink); display: grid; justify-items: center; gap: 6px; text-align: center; padding: 0 4px 6px; position: relative; font-size: 14px }
.awx .seg.ps-schieber .ps-knopf { width: 26px; height: 26px; margin-top: -4px; border-radius: 50%; border: 3px solid var(--ink); background: var(--bg); transition: transform .2s, background .2s }
.awx .seg.ps-schieber button[aria-checked="true"] { background: none; color: var(--ink) }
.awx .seg.ps-schieber button[aria-checked="true"] .ps-knopf { background: var(--c); border-color: var(--ink); transform: scale(1.25) }
.awx .seg.ps-schieber button[aria-checked="true"] span:last-child { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px }

/* AW-02 Stimmzettel */
.awx .seg.ps-zettel { flex-direction: column; gap: 0 }
.awx .seg.ps-zettel button { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); display: grid; grid-template-columns: 26px 1fr 44px; gap: 10px; align-items: center; padding: 10px 0; font-weight: 400 }
.awx .seg.ps-zettel button:last-child { border-bottom: 0 }
.awx .seg.ps-zettel button[aria-checked="true"] { background: none; color: var(--ink) }
.awx .ps-znr { font: 700 14px var(--mono); color: var(--muted) }
.awx .ps-ztx { display: grid; gap: 2px } .awx .ps-ztx span { font-size: 14px; color: var(--muted) }
.awx .ps-kreis { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); position: relative }
.awx .seg.ps-zettel button[aria-checked="true"] .ps-kreis::before, .awx .seg.ps-zettel button[aria-checked="true"] .ps-kreis::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 4px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%) rotate(45deg) }
.awx .seg.ps-zettel button[aria-checked="true"] .ps-kreis::after { transform: translate(-50%, -50%) rotate(-45deg) }

/* AW-03 Wochenplan */
.awx .ps-wo { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; height: 190px; padding: 0 0 24px 52px; margin: 8px 0 4px; max-width: 560px }
.awx .ps-wot { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100% }
.awx .ps-wob { display: grid; place-items: start center; background: var(--ink); color: var(--bg); border-radius: 6px 6px 0 0; min-height: 0; transition: height .25s }
.awx .ps-wob b { font-size: 14px; padding-top: 4px }
.awx .ps-wob.zu { background: repeating-linear-gradient(45deg, var(--awc) 0 6px, var(--ink) 6px 12px) }
.awx .ps-wob.zu b { background: var(--ink); color: var(--bg); border-radius: 4px; padding: 0 4px; margin-top: 4px }
.awx .ps-wod { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font: 700 13px var(--mono) }
.awx .ps-wo8, .awx .ps-wo10 { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--muted); z-index: 1; pointer-events: none }
.awx .ps-wo10 { border-top-style: solid; border-top-color: var(--ink) }
.awx .ps-wo8 { bottom: calc(24px + (100% - 24px) * 8 / 12) } .awx .ps-wo10 { bottom: calc(24px + (100% - 24px) * 10 / 12) }
.awx .ps-wo8 i, .awx .ps-wo10 i { position: absolute; left: 0; top: -9px; font: 500 12px var(--mono); font-style: normal; background: var(--bg); padding-right: 4px; color: var(--ink) }

/* AW-07 Daumen */
.awx .ps-dml { display: grid; gap: 10px }
.awx .ps-dmr { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px }
.awx .ps-dmr p { margin: 2px 0 0; font-size: 14px; color: var(--muted) }
.awx .seg.ps-dm { flex-wrap: nowrap }
.awx .seg.ps-dm button { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px }
.awx .ps-dmi { width: 18px; height: 18px; display: inline-block; position: relative }
.awx .ps-dm0::before, .awx .ps-dm1::before { content: ""; position: absolute; inset: 2px 4px; border: solid currentColor; border-width: 0 0 3px 3px; transform: rotate(135deg) translate(-2px, -2px) }
.awx .ps-dm1::before { transform: rotate(-45deg) translate(-2px, -2px) }
.awx .ps-dm2::before { content: "?"; position: absolute; inset: 0; font-weight: 900; line-height: 18px; text-align: center }
@media (max-width: 720px) { .awx .ps-dmr { grid-template-columns: 1fr } .awx .seg.ps-dm { flex-wrap: wrap } }

/* AW-08 Punkte verteilen */
.awx .ps-pl { display: grid; gap: 8px }
.awx .ps-pr { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 14px; align-items: center; border-top: 1px solid var(--line); padding-top: 8px }
.awx .ps-pt { font-weight: 700 }
.awx .ps-pd { display: flex; gap: 5px }
.awx .ps-pd i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink) }
.awx .ps-pd i.on { background: var(--c); border-color: var(--ink) }
.awx .ps-pctl { display: flex; gap: 6px }
.awx .ps-pb { min-width: 44px; min-height: 44px; font-size: 22px; font-weight: 900; padding: 0; display: grid; place-items: center; line-height: 1 }
.awx .ps-pb:disabled { opacity: 1; color: var(--muted); border-color: var(--line) }
.awx .ps-rest { font-weight: 700 }
@media (max-width: 560px) { .awx .ps-pr { grid-template-columns: 1fr auto } .awx .ps-pt { grid-column: 1 / -1 } }

/* AW-09 Kosten aufteilen */
.awx .ps-t-du { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.awx .ps-t-betrieb { background: repeating-linear-gradient(45deg, var(--panel) 0 6px, var(--track) 6px 9px); color: var(--ink); border-color: var(--ink) }
.awx .ps-t-staat { background: var(--awc); color: #fff; border-color: var(--awc) }
.awx .seg.ps-tsel button { display: inline-flex; gap: 8px; align-items: center }
.awx .ps-tpi { width: 20px; height: 20px; border-radius: 4px; border: 2px solid var(--ink); display: inline-block }
.awx .ps-tg { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; max-width: 640px; margin: 10px 0 4px }
.awx .ps-tk { min-height: 52px; border: 2px dashed var(--muted); border-radius: 8px; background: var(--bg); font: 700 12px var(--mono); padding: 0 2px; overflow: hidden; text-overflow: ellipsis }
.awx .ps-tk.ps-t-du, .awx .ps-tk.ps-t-betrieb, .awx .ps-tk.ps-t-staat { border-style: solid }
.awx .ps-tk.ps-t-betrieb { background: var(--panel); box-shadow: inset 0 -8px 0 var(--track) }
.awx .ps-tk.ps-t-du { background: var(--ink); color: var(--bg) }
.awx .ps-tk.ps-t-staat { background: var(--awc); color: #fff }
:root[data-theme="dark"] .awx .ps-tk.ps-t-staat { color: #0E1013 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .awx .ps-tk.ps-t-staat { color: #0E1013 } }
.awx .ps-trefs { display: grid; gap: 10px; max-width: 640px }
.awx .ps-tref { display: grid; grid-template-columns: 1fr; gap: 4px }
.awx .ps-tref .sub { margin: 0; font-size: 13px }
.awx .ps-tbar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; border: 2px solid var(--ink) }
.awx .ps-tbar i { display: block; border: 0 }
.awx .ps-tv { font: 500 13px var(--mono) }
@media (max-width: 560px) { .awx .ps-tg { grid-template-columns: repeat(5, minmax(0, 1fr)) } }

/* AW-05 Was wäre dir lieber? */
.awx .ps-ll { display: grid; gap: 12px }
.awx .ps-lr .ix-k { margin: 0 0 6px }
.awx .seg.ps-lieber { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.awx .seg.ps-lieber button { min-height: 64px; font-weight: 600 }
@media (max-width: 560px) { .awx .seg.ps-lieber { grid-template-columns: 1fr } }

/* AW-06 Grenze ziehen */
.awx .seg.ps-lineal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden }
.awx .seg.ps-lineal button { border: 0; border-right: 1px solid var(--ink); border-radius: 0; text-align: center; font-size: 14px }
.awx .seg.ps-lineal button:last-child { border-right: 0 }
.awx .ps-gb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 }
.awx .ps-gbi { border: 2px dashed var(--muted); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; align-content: start }
.awx .ps-gbi.ja { border: 2px solid var(--ink); background: var(--panel) }
.awx .ps-gn { font: 500 13px var(--mono); color: var(--muted) }
.awx .ps-gk { font-size: 14px; font-weight: 700 }
@media (max-width: 560px) { .awx .seg.ps-lineal { grid-template-columns: repeat(3, 1fr) } .awx .ps-gb { grid-template-columns: 1fr } }

:root[data-theme="dark"] .awx .ps-t-staat { color: #0E1013 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .awx .ps-t-staat { color: #0E1013 } }

/* ===== B3: Interaktionen zum Anfassen ===== */
/* AW-02 Haftung: Schieber */

/* AW-03 Urlaub: Wochen ins Jahr legen */
.awx .ut-a.weg { background: repeating-linear-gradient(135deg, var(--bg) 0 3px, var(--c) 3px 5px) }
.awx .utkal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: 6px }
.awx .utmon { min-height: 88px; border: 2px solid var(--ink); border-radius: 8px; background: var(--bg); display: grid; grid-template-rows: auto 1fr; gap: 4px; padding: 6px 2px; align-items: start; justify-items: center }
.awx .utmon:disabled { border-color: var(--line); opacity: 1 }
.awx .utmon.hat { background: var(--panel) }
.awx .utmn { font: 700 12px var(--mono) }
.awx .utwk { display: flex; flex-direction: column-reverse; gap: 3px; width: 100%; padding: 0 4px }
.awx .utwk i { display: block; height: 10px; border-radius: 3px; background: var(--c); border: 1px solid var(--ink) }
.awx .utzur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px }
.awx .utzur .sub { flex: 1 1 320px; margin: 0 }
@media (max-width: 720px) { .awx .utkal { grid-template-columns: repeat(6, minmax(0, 1fr)) } }

/* AW-06 Frist: Jahre im Betrieb als Schieber */

/* ===== B7 (03.11.2026): gemeinsames Papier (K.papier) und gemeinsamer Regler (K.regler) in der Linie AW =====
   Papier bleibt auch im dunklen Design hell, darum gelten darin die hellen Akzentfarben. */
.awx .pp { --awc: #B3261E; --muted: #4D5158 }
:root[data-theme="dark"] .awx .pp .kl.kl-no .klst { border-color: #B3261E; color: #B3261E }
:root[data-theme="dark"] .awx .pp .kl.kl-ok .klst { border-color: #0B7A3E; color: #0B7A3E }
:root[data-theme="dark"] .awx .pp .kl.kl-no .klt { text-decoration-color: #B3261E }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .awx .pp .kl.kl-no .klst { border-color: #B3261E; color: #B3261E }
  :root:not([data-theme="light"]) .awx .pp .kl.kl-ok .klst { border-color: #0B7A3E; color: #0B7A3E }
  :root:not([data-theme="light"]) .awx .pp .kl.kl-no .klt { text-decoration-color: #B3261E }
}
.awx .pp .pp-titel { font-weight: 900; font-size: 18px; line-height: 1.25 }
.awx .pp-notiz .pp-titel { font-size: 20px }
/* AW-05 Arbeitsvertrag mit Folie */
.awx .pp.b5folie { --x: 0%; max-width: 760px; overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none }
.awx .b5folie .pp-inhalt { gap: 0 }
.awx .b5zw { font-size: 14px; color: var(--muted); margin: 0 0 6px !important }
.awx .b5folie .b5lb { margin: -5px -26px; padding: 5px 26px }
.awx .b5folie.full .b5g { display: block }
.awx .b5folie.none .b5edge, .awx .b5folie.full .b5edge { display: none }
.awx .b5folie:not(.none):not(.full) .b5edge > span { left: auto; right: 3px; border-radius: 4px 0 0 4px }
@media (max-width: 759px) { .awx .b5folie .b5lb { margin: -5px -16px; padding: 5px 16px } }
/* AW-06 Gegenrechnung als Kassenbon */
.awx .b6boni { --pz: #0B7A3E; --mz: #B3261E; display: grid }
/* AW-06 Arbeitszeugnis */
.awx .b6zgi { display: grid; gap: 10px; font-size: 15px; line-height: 1.5 }
.awx .b6zgi mark { background: color-mix(in srgb, #F2C14E 55%, var(--bg)); color: var(--ink); border-radius: 3px; padding: 0 2px; transition: background .3s }
.awx .b6zgi.swap mark { animation: b6mk .7s ease-out }
.awx .b6zort { color: var(--muted); font-size: 14px }
/* AW-09 Zeugnismappe und Europass */
.awx .z9mappe .pp { padding: 16px; font-size: 15px }
.awx .z9pp dl { display: grid; gap: 0; margin: 0; font-size: 14px }
.awx .z9pp dt { color: var(--muted); font-size: 12px; margin-top: 4px }
.awx .z9pp dd { margin: 0; overflow-wrap: anywhere; hyphens: auto }
.awx .z9pp dt.mark, .awx .z9pp dd.mark { background: color-mix(in srgb, var(--c) 16%, var(--bg)); box-shadow: -6px 0 0 color-mix(in srgb, var(--c) 16%, var(--bg)), 6px 0 0 color-mix(in srgb, var(--c) 16%, var(--bg)) }
.awx .z9pp dd.mark { font-weight: 700 }
.awx .z9mappe .z9pp { transition: transform .25s, box-shadow .25s }
.awx .z9pp.on { box-shadow: 0 0 0 3px var(--c), 0 6px 14px rgba(0, 0, 0, .12); transform: translateY(-3px) }
.awx .z9pp.off { box-shadow: none; border-style: dashed }
.awx .z9pp.off .pp-inhalt, .awx .z9pp.off .pp-betreff { color: var(--muted) }
@media (max-width: 700px) { .awx .z9pp.on { order: -1 } .awx .z9pp.off dl, .awx .z9pp.off .pp-fuss, .awx .z9pp.off .pp-meta { display: none } }
/* AW-03 Arbeitstag: Bedienzeile und unsichtbarer Zwilling mit drei Pausen in derselben Zelle */
.awx .awtagw { display: grid }
.awx .awtagw > .tagctl { grid-area: 1 / 1 }
.awx .awtagw > .awgeist { visibility: hidden; pointer-events: none }
.awx .b6boni .b6bl { padding: 6px 0; margin: 0 }