/* Paket P6 „Privat vorsorgen“ (EF-09 bis EF-13): Stile der Interaktionen. Vorsilbe .efc- */

/* Gemeinsame Bausteine */
.efc-ctl { display: flex; flex-wrap: wrap; gap: 8px }
.efc-tog { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 8px; background: var(--bg); color: var(--ink); font-weight: 700 }
.efc-tog { text-align: left }
.efc-tog .efc-box { width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 4px; flex: none; position: relative }
.efc-tog[aria-pressed="true"] .efc-box { background: var(--ink) }
.efc-tog[aria-pressed="true"] .efc-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--bg); border-width: 0 3px 3px 0; transform: rotate(45deg) }
.efc-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px }
.efc-leg > span { display: inline-flex; align-items: center; gap: 6px }
.efc-sw { width: 16px; height: 16px; border-radius: 3px; display: inline-block; flex: none }
.efc-sw.g, .efc-sg.g { background: var(--ink) }
.efc-sw.b, .efc-sg.b { background: var(--c, #2E7D5B) }
.efc-sw.p, .efc-sg.p { background: repeating-linear-gradient(45deg, var(--c, #2E7D5B) 0 4px, var(--bg) 4px 7px); border: 2px solid var(--c, #2E7D5B); box-sizing: border-box }
.efc-sw.l, .efc-sg.l { background: transparent; border: 2px dashed var(--muted); box-sizing: border-box }
.efc-sw.t { width: 4px; height: 18px; border-radius: 0; background: #C62828 }
.efc-sw.z { background: var(--track) }
.efc-big { font-size: 22px; margin: 0 }
.efc-big b { font-size: 28px; font-weight: 900 }
.efc-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line) }
.efc-row > span { min-width: 0 }
.efc-row > b { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums }
.efc-row.sum { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 700 }
.efc-row.gut > b { color: var(--efc-gut, #1B7A43) }
.efc-row.big { border-top: 3px double var(--ink); border-bottom: 0; font-size: 19px }
.efc-row.big > b { font-weight: 900 }
.efc-sg.z0 { border-width: 0 }
.efc-sg { display: block; height: 100%; flex: none; transition: width .45s ease }

/* EF-10 vorsorge: gestapelter Balken mit Bedarfslinie */
.efc-stackwrap { padding: 30px 0 4px; max-width: 760px }
.efc-stack { position: relative; display: flex; height: 46px; border-radius: 6px; background: var(--panel); border: 2px solid var(--line) }
.efc-stack .efc-sg:first-child { border-radius: 4px 0 0 4px }
.efc-target { position: absolute; top: -30px; bottom: -8px; width: 0; border-left: 4px solid #C62828; pointer-events: none }
.efc-target > span { position: absolute; top: 0; right: 6px; white-space: nowrap; font: 700 13px var(--mono); color: #C62828 }
.efc-scale { position: relative; height: 22px; margin-top: 4px; font: 500 12px var(--mono); color: var(--muted) }
.efc-scale span { position: absolute; transform: translateX(-50%) }
.efc-scale span:first-child { transform: none }
.efc-scale span:last-child { transform: translateX(-100%) }

/* EF-10 betrieb: Abrechnung (K.papier, Formular) und die Erklärung „Im Alter“ (kein Schriftstück) */
.efc-blatt { min-width: 0; max-width: 640px }
.fest > .efc-blatt { display: grid }
.efc-blatt > .pp, .efc-blatt > .efc-alt { align-content: start }
.pp .efc-row { --efc-gut: #1B7A43 }
/* Formularlinien laufen ab dem Inhalt, damit jede Zeile (auch umbrochen) auf einer Linie steht. */
.efc-blatt .pp-formular { background-image: none }
.efc-blatt .pp-formular .pp-inhalt { gap: 0; background-image: repeating-linear-gradient(transparent 0 31px, var(--pp-line) 31px 32px) }
.pp-formular .efc-row { border: 0; padding: 0; line-height: 32px; align-items: baseline }
.pp-formular .efc-row.sum { box-shadow: inset 0 2px 0 var(--ink) }
.pp-formular .efc-row.big { box-shadow: inset 0 1px 0 var(--ink), inset 0 3px 0 var(--pp-bg), inset 0 4px 0 var(--ink); line-height: 64px }
.pp-formular .sub { line-height: 32px; margin: 0 }
@media (max-width: 620px) { .pp-formular .efc-row.big { line-height: 32px; font-size: 17px } }
.efc-alt .sub { margin: 0 0 4px }
.efc-alt { display: grid; gap: 0; padding: 14px 16px; border-radius: 12px; background: var(--panel); border-left: 6px solid var(--c, var(--ink)) }
.efc-alth { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px }
.efc-alth b { font-size: 19px }
.efc-alth span { color: var(--muted); font-size: 15px }

/* EF-10 privat: Zulagenrechner */
.efc-zbar { display: flex; height: 30px; border-radius: 6px; background: var(--panel); border: 2px solid var(--line); overflow: hidden; max-width: 760px }

/* EF-10 finanzierung: drei Säulen nebeneinander */
.efc-zchart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 560px; height: 260px; align-items: end }
.efc-zcol { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 4px; text-align: center; min-width: 0 }
.efc-zv { font: 800 15px var(--sans); white-space: nowrap }
.efc-ztrack { position: relative; border-bottom: 2px solid var(--ink) }
.efc-ztrack > span { position: absolute; left: 12%; right: 12%; bottom: 0; transition: height .45s ease; border-radius: 4px 4px 0 0 }
.efc-zg { background: var(--track) }
.efc-zp { background: var(--ink) }
.efc-zl { font-size: 15px; font-weight: 700 }

/* EF-10 finanzierung: wackelnde Säulen */
.efc-evs { display: flex; flex-wrap: wrap; gap: 8px }
.efc-ev { min-height: 44px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 8px; background: var(--bg); color: var(--ink); font-weight: 700; text-align: left }
.efc-ev[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.efc-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 620px; padding-top: 10px }
.efc-pcol { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0 }
.efc-pstage { height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; border-bottom: 4px solid var(--ink) }
.efc-pil { display: grid; justify-items: center; transform-origin: 82% 100%; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) }
.efc-pil[data-l="1"] { transform: rotate(5deg) }
.efc-pil[data-l="2"] { transform: rotate(12deg) }
.efc-pcap { width: 70px; height: 14px; background: var(--ink); border-radius: 3px 3px 0 0 }
.efc-pshaft { width: 46px; height: 110px; background: repeating-linear-gradient(90deg, var(--panel) 0 7px, var(--line) 7px 10px); border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); box-sizing: border-box }
.efc-pbase { width: 70px; height: 12px; background: var(--ink) }
.efc-pt { font-weight: 700; font-size: 15px; line-height: 1.25 }
.efc-plv { font: 700 13px var(--mono); color: var(--muted) }

/* EF-10 pruefstand */
.efc-pc { gap: 10px }
.efc-pro { border-color: #1B7A43 }
.efc-con { border-color: #C62828 }
.efc-pc ul { margin: 0; padding-left: 20px }
.efc-segwrap { flex-wrap: wrap }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --efc-gut: #6BD69A } :root:not([data-theme="light"]) .efc-target { border-color: #FF7A7A } :root:not([data-theme="light"]) .efc-target > span { color: #FF7A7A } }
:root[data-theme="dark"] { --efc-gut: #6BD69A }
:root[data-theme="dark"] .efc-target { border-color: #FF7A7A }
:root[data-theme="dark"] .efc-target > span { color: #FF7A7A }

@media (max-width: 520px) {
  .efc-zchart { height: 220px; gap: 8px }
  .efc-zv { font-size: 13px }
  .efc-pstage { height: 130px }
  .efc-pcap, .efc-pbase { width: 54px } .efc-pshaft { width: 36px; height: 92px }
}
@media (prefers-reduced-motion: reduce) { .efc-sg, .efc-ztrack > span, .efc-pil { transition: none } }

/* EF-09 risiken: Raster aus Häufigkeit und Schadenshöhe */
.efc-rwrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start }
.efc-rchart { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: 1fr auto; gap: 4px }
.efc-ry { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 13px var(--mono); color: var(--muted); text-align: center }
.efc-rx { grid-column: 2; font: 700 13px var(--mono); color: var(--muted); text-align: center }
.efc-rfield { position: relative; aspect-ratio: 1 / .8; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr }
.efc-rq { padding: 6px 8px; font-size: 13px; line-height: 1.25; color: var(--muted); font-weight: 700 }
.efc-rq.q1 { background: color-mix(in srgb, #1B7A43 14%, transparent); color: var(--ink) }
.efc-rq.q2 { text-align: right; background: color-mix(in srgb, #C62828 8%, transparent) }
.efc-rq.q3 { align-self: end }
.efc-rq.q4 { align-self: end; text-align: right }
.efc-rpt { position: absolute; width: 44px; height: 44px; margin: 0 0 -22px -22px; border: 0; background: none; padding: 0; display: grid; place-items: center }
.efc-rpt > span { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); border: 3px solid var(--ink); display: grid; place-items: center; font: 800 14px var(--sans); transition: transform .25s ease, background .25s ease }
.efc-rpt[aria-pressed="true"] > span { background: var(--ink); color: var(--bg); transform: scale(1.18) }
.efc-evcol { flex-direction: column }
.efc-evcol .efc-ev { width: 100% }
.efc-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; font-size: 13px; margin-right: 4px }
@media (max-width: 700px) { .efc-rwrap { grid-template-columns: 1fr } }

/* EF-09 haftpflicht: Fälle und Zahler */
.efc-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px }
.efc-case { min-height: 44px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 8px; background: var(--bg); color: var(--ink); text-align: left; font-size: 16px; line-height: 1.35 }
.efc-case[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.efc-zl2 { margin-top: 6px }
.efc-zahlers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px }
.efc-zahler { border: 2px dashed var(--line); border-radius: 10px; padding: 10px 6px; text-align: center; font-weight: 700; font-size: 15px; color: var(--muted); transition: background .3s ease, color .3s ease, border-color .3s ease; display: grid; place-items: center; min-height: 56px }
.efc-zahler.on { border: 2px solid var(--ink); background: var(--ink); color: var(--bg) }
@media (max-width: 520px) { .efc-zahlers { grid-template-columns: 1fr 1fr } }

/* EF-09 arbeitskraft: Lebensbalken und drei Fälle */
.efc-lifewrap { padding-top: 6px }
.efc-life { display: flex; height: 34px; border-radius: 6px; overflow: hidden; border: 2px solid var(--line) }
.efc-life > span { display: block; height: 100%; transition: width .3s ease }
.efc-life-a { background: var(--ink) }
.efc-life-b { background: repeating-linear-gradient(45deg, var(--panel) 0 6px, var(--line) 6px 9px); box-shadow: inset 0 0 0 2px var(--muted) }
.efc-bu { display: grid; gap: 8px }
.efc-burow { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line) }
.efc-burow p { margin: 2px 0 0 }
.efc-bumark { font: 800 14px var(--mono); padding: 4px 8px; border-radius: 6px; text-align: center }
.efc-bumark.ja { background: #1B7A43; color: #fff }
.efc-bumark.nein { background: var(--bg); border: 2px solid #C62828; color: #C62828 }
@media (max-width: 520px) { .efc-burow { grid-template-columns: 1fr; gap: 4px } .efc-bumark { justify-self: start } }

/* EF-09 vertrag: Versicherungsschein */
.efc-schwrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start }
.efc-srow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 30px; overflow-wrap: normal; gap: 10px; align-items: center; width: 100%; min-height: 48px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font-size: 15px }
.efc-sk { color: var(--muted); font-size: 14px; hyphens: auto; -webkit-hyphens: auto }
.efc-sv { font-weight: 700 }
.efc-sdot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--c, #1565C0); color: var(--c, #1565C0); display: grid; place-items: center; font: 800 13px var(--sans) }
.efc-srow[aria-pressed="true"] { background: color-mix(in srgb, var(--c, #1565C0) 12%, transparent) }
.efc-srow[aria-pressed="true"] .efc-sdot { background: var(--c, #1565C0); color: #fff }
.efc-srows { display: grid }
@media (max-width: 760px) { .efc-schwrap { grid-template-columns: 1fr } }

/* EF-09 check */
.efc-ctlcol { flex-direction: column; align-items: stretch }
.efc-chkout { min-width: 0 }
.efc-chk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch }
.efc-chk ul { margin: 0; padding-left: 18px; display: grid; gap: 8px }
.efc-chk li b { display: block }
.efc-chk li span { font-size: 15px }
.efc-chk li b { hyphens: auto; overflow-wrap: break-word }
.efc-sw.h { background: repeating-linear-gradient(45deg, var(--panel) 0 3px, var(--line) 3px 5px); box-shadow: inset 0 0 0 2px var(--muted) }
@media (max-width: 860px) { .efc-chk { grid-template-columns: 1fr } }
@media (prefers-reduced-motion: reduce) { .efc-rpt > span, .efc-zahler, .efc-life > span { transition: none } }

/* EF-11 wandel: Beitragszahler tragen einen Rentner */
.efc-twrap { max-width: 640px }
.efc-tsvg { width: 100%; height: auto; display: block }
.efc-tground { stroke: var(--ink); stroke-width: 3 }
.efc-tplank { fill: var(--ink) }
.efc-tren circle, .efc-tren rect { fill: var(--c, #1565C0) }
.efc-tw circle, .efc-tw rect { fill: var(--muted) }
.efc-tarm { stroke: var(--muted); stroke-width: 6; stroke-linecap: round }
.efc-tghost circle, .efc-tghost rect { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 3 }
.efc-tghost .efc-tarm { stroke-width: 2; stroke-dasharray: 4 3 }

/* EF-11 finanzierung: Stellschrauben */
.efc-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 520px }
.efc-slot { height: 40px; border: 2px dashed var(--muted); border-radius: 6px; transition: background .3s ease }
.efc-slot.full { border-style: solid; border-color: var(--ink) }
.efc-gapst { font-weight: 800; margin: 0 }
.efc-gapst.ok { color: #1B7A43 }
.efc-k-b.full, .efc-sw.efc-k-b { background: var(--ink) }
.efc-k-n.full, .efc-sw.efc-k-n { background: var(--c, #1565C0) }
.efc-k-a.full, .efc-sw.efc-k-a { background: repeating-linear-gradient(45deg, var(--c, #1565C0) 0 5px, var(--bg) 5px 9px) }
.efc-k-s.full, .efc-sw.efc-k-s { background: var(--track) }
.efc-srws { display: grid; gap: 8px }
.efc-srw { display: grid; grid-template-columns: 18px minmax(0, 1fr) 44px 2.2em 44px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line) }
.efc-srw .efc-sw { border: 2px solid var(--ink); box-sizing: border-box }
.efc-st { display: grid; gap: 1px; min-width: 0 }
.efc-st span { font-size: 14px; color: var(--muted) }
.efc-st .efc-w { color: var(--ink); font-weight: 700; font-size: 15px }
.efc-step { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 8px; background: var(--bg); color: var(--ink); font: 800 22px var(--sans); display: grid; place-items: center; padding: 0 }
.efc-step:disabled { opacity: .35 }
.efc-cnt { text-align: center; font: 800 20px var(--sans) }

/* EF-11 gesundheit: Schlagzeilen */
.efc-newsrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px }
.efc-news { display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px 14px; min-height: 44px; border: 2px solid var(--line); border-top: 6px solid var(--ink); border-radius: 4px; background: var(--bg); color: var(--ink) }
.efc-news b { font: 900 19px/1.2 Georgia, 'Times New Roman', serif }
.efc-newsz { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.efc-news[aria-pressed="true"] { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink) }
.efc-rt { text-align: right; min-width: 0 }
.out .efc-row > span:first-child { font-weight: 700; flex: none; min-width: 6.5em }
@media (max-width: 520px) { .out .efc-row:has(.efc-rt) { flex-direction: column; gap: 2px } .efc-rt { text-align: left } }
@media (prefers-reduced-motion: reduce) { .efc-slot { transition: none } }

/* EF-12 sparen: Notgroschen-Zeitachse */
.efc-ngbar { overflow: visible }
.efc-ngpan { position: absolute; top: -26px; bottom: -6px; width: 0; border-left: 4px solid #C62828; pointer-events: none }
.efc-ngpan > span { position: absolute; top: 0; left: 6px; white-space: nowrap; font: 700 13px var(--mono); color: #C62828 }
.efc-ngover { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 900 22px var(--sans); color: var(--bg) }
.efc-ngpan[hidden], .efc-ngover[hidden] { display: none }

/* EF-12 formen: magisches Dreieck */
.efc-trifield { position: relative; aspect-ratio: 1 / .96; margin: 24px 8px 28px; min-width: 0 }
.efc-tri { position: absolute; inset: 0; width: 100%; height: 100% }
.efc-tri polygon { fill: var(--panel); stroke: var(--ink); vector-effect: non-scaling-stroke; stroke-linejoin: round }
.efc-tri polygon { stroke-width: 3px }
.efc-tc { position: absolute; font: 800 13px var(--mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap }
.efc-tc.cs { left: 50%; top: 8%; transform: translate(-50%, -150%) }
.efc-tc.cr { right: 0; top: 92%; transform: translateY(40%) }
.efc-tc.cv { left: 0; top: 92%; transform: translateY(40%) }
.efc-dots { display: inline-flex; gap: 4px; vertical-align: middle }
.efc-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); box-sizing: border-box }
.efc-dots i.on { background: var(--ink) }

/* EF-12 vl */
.ix .out .efc-row > span { flex: 1 1 auto; min-width: 0 }
.efc-vlwrap { padding-top: 10px }

/* EF-12 inflation */
.efc-iregs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 28px; max-width: 760px }
.efc-ichart { position: relative; height: 240px }
.efc-ifill { transition: height .45s ease }
.efc-ifill.g { background: var(--ink) }
.efc-ifill.k, .efc-sw.k { background: repeating-linear-gradient(45deg, var(--c, #2E7D5B) 0 4px, var(--bg) 4px 7px); border: 2px solid var(--c, #2E7D5B); box-sizing: border-box }
.efc-iline { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed #C62828; pointer-events: none; margin-bottom: 0 }
.efc-sw.i { height: 0; border-top: 2px dashed #C62828; border-radius: 0; width: 22px }
.efc-ichart .efc-zl { font-size: 13px; line-height: 1.25; min-height: 3.75em }

/* EF-12 fallen: erfundener Post */
.efc-post { max-width: 460px; border: 2px solid var(--ink); border-radius: 14px; background: var(--bg); overflow: hidden; box-shadow: 4px 4px 0 var(--line) }
.efc-phead { display: flex; gap: 10px; align-items: center; padding: 10px 12px }
.efc-phead div { display: grid; line-height: 1.2 }
.efc-phead div span { font-size: 13px; color: var(--muted) }
.efc-pav { width: 38px; height: 38px; border-radius: 50%; background: var(--c, #2E7D5B); color: #fff; display: grid; place-items: center; font-weight: 900 }
.efc-pimg { aspect-ratio: 16 / 7; background: repeating-linear-gradient(135deg, var(--panel) 0 10px, var(--track) 10px 12px); display: grid; place-items: center; padding: 10px; text-align: center; font: 600 13px var(--mono); color: var(--muted) }
.efc-pbody { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px 14px }
.efc-pf { border: 0; background: none; padding: 4px 6px; margin: 0; text-align: left; font: inherit; color: var(--ink); border-radius: 6px; min-height: 36px; border-bottom: 2px dotted var(--muted) }
.efc-pf.hit { background: color-mix(in srgb, #C62828 16%, transparent); border-bottom-color: #C62828 }
.efc-pf[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 1px }
.efc-pwrap { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 18px; align-items: start }
.efc-pside { display: grid; gap: 10px; min-width: 0 }
.efc-pcnt { margin: 0 }
@media (max-width: 760px) { .efc-pwrap { grid-template-columns: 1fr } }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .efc-ngpan { border-color: #FF7A7A } :root:not([data-theme="light"]) .efc-ngpan > span { color: #FF7A7A } :root:not([data-theme="light"]) .efc-iline, :root:not([data-theme="light"]) .efc-sw.i { border-color: #FF7A7A } }
:root[data-theme="dark"] .efc-ngpan { border-color: #FF7A7A }
:root[data-theme="dark"] .efc-ngpan > span { color: #FF7A7A }
:root[data-theme="dark"] .efc-iline, :root[data-theme="dark"] .efc-sw.i { border-color: #FF7A7A }
@media (max-width: 520px) { .efc-ichart { height: 210px } .efc-trilist { display: grid; grid-template-columns: 1fr 1fr } .efc-trilist .efc-ev { font-size: 15px; padding: 6px 8px } }
@media (prefers-reduced-motion: reduce) { .efc-ifill { transition: none } }

/* EF-13 kosten: Angebote und Gesamtbetrag */
.efc-ang { display: grid; gap: 2px; min-height: 44px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 8px; background: var(--bg); color: var(--ink); text-align: left }
.efc-ang b { font-size: 17px }
.efc-ang[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.efc-ang[aria-pressed="true"] .efc-newsz { color: inherit }
.efc-gchart { display: grid; gap: 6px; max-width: 620px }
.efc-grow { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 6.5em; gap: 10px; align-items: center }
.efc-gl { font-weight: 700; font-size: 15px }
.efc-gtrack { height: 22px; background: var(--panel); border: 2px solid var(--line); border-radius: 4px; overflow: hidden }
.efc-gfill { display: block; height: 100%; width: 0; background: var(--muted); transition: width .45s ease }
.efc-grow.cur .efc-gfill { background: var(--ink) }
.efc-gv { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }

/* EF-13 dispo */
.efc-sg.efc-minus, .efc-sw.efc-minus { background: repeating-linear-gradient(45deg, #C62828 0 4px, transparent 4px 8px); border: 2px solid #C62828; box-sizing: border-box }
.efc-sg.efc-minus.z0 { border-width: 0 }

/* EF-13 schufa */
.efc-swrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.efc-ev.efc-sj:not([aria-pressed="true"]) { border-color: #9A6700; box-shadow: inset 6px 0 0 #9A6700 }
.efc-ev.efc-sn:not([aria-pressed="true"]) { border-color: var(--muted); box-shadow: inset 6px 0 0 var(--muted) }
.efc-sw.sj { background: #9A6700 } .efc-sw.sn { background: var(--muted) }

/* EF-13 entscheidung: Weg vom Verzug zur Pfändung */
.efc-mline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; counter-reset: none }
.efc-mst { position: relative; display: grid }
.efc-mbtn { position: relative; display: grid; align-content: start; justify-items: center; gap: 6px; text-align: center; cursor: pointer; padding: 0 2px 4px; min-height: 44px; width: 100%; background: none; border: 0; border-radius: 8px; font: inherit; color: inherit }
.efc-mbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.efc-mst::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 4px; background: var(--line) }
.efc-mst:first-child::before { display: none }
.efc-mst.done::before, .efc-mst.cur::before { background: #C62828 }
.efc-mno { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink); background: var(--bg); display: grid; place-items: center; font-weight: 800; transition: background .25s ease }
.efc-mst.done .efc-mno { border-color: #C62828; color: #C62828 }
.efc-mst.cur .efc-mno { background: #C62828; border-color: #C62828; color: #fff }
.efc-mt { font-size: 13px; font-weight: 700; line-height: 1.25; hyphens: auto }
.efc-mway { border-left: 4px solid #1B7A43; padding: 4px 0 4px 12px; margin-top: 8px }
.efc-mway p { margin: 4px 0 0 }
.efc-ev:disabled { opacity: .4 }
@media (max-width: 700px) { .efc-swrap { grid-template-columns: 1fr } }
@media (max-width: 520px) { .efc-mline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px } .efc-mst:nth-child(4)::before { display: none } .efc-grow { grid-template-columns: 6em minmax(0, 1fr) 5.5em; gap: 6px } }
@media (prefers-reduced-motion: reduce) { .efc-gfill, .efc-mno { transition: none } }

/* Überarbeitung 03.11.2026 (Prüfbefunde): formstabile Kästen, Kontrast, Touch-Ziele */
/* EF-10 */
.efc-sw.bo, .efc-sg.bo { background: color-mix(in srgb, var(--c, #2E7D5B) 45%, var(--bg)); border: 2px dotted var(--c, #2E7D5B); box-sizing: border-box }
.efc-pout { display: grid; gap: 10px }
.efc-pout .pair { align-items: stretch }
.efc-pout .lg > .lg-s { gap: 6px }
/* EF-09: Kontrast im dunklen Design, Karten im Check gleich hoch */
.efc-chk > .mini-box { align-content: start }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .efc-bumark.nein { color: #FF8A80; border-color: #FF8A80 } }
:root[data-theme="dark"] .efc-bumark.nein { color: #FF8A80; border-color: #FF8A80 }
.efc-chk .fest > ul { align-content: start }
/* EF-11 */
.efc-jg .efc-row > b { white-space: normal }
.efc-st .efc-w { line-height: 1.3 }
.fest > .efc-gapst { margin: 0 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .efc-gapst.ok { color: #6BD69A } }
:root[data-theme="dark"] .efc-gapst.ok { color: #6BD69A }
/* EF-12: Dreieck als Fläche, Startlinie in jeder Säule, gezeichneter Post, Touch-Ziele */
.efc-tri .efc-trio { fill: var(--panel); stroke: var(--ink); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linejoin: round }
.efc-tri .efc-trig { fill: none; stroke: var(--line); stroke-width: 1.5px; vector-effect: non-scaling-stroke }
.efc-tri .efc-tria { stroke: var(--line); stroke-width: 1.5px; vector-effect: non-scaling-stroke }
.efc-tri .efc-tria-f { fill: color-mix(in srgb, var(--c, #2E7D5B) 30%, transparent); stroke: var(--c, #2E7D5B); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: all .4s ease }
.efc-tri .efc-tria-q { stroke: var(--c, #2E7D5B); stroke-width: 4px; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke }
.efc-tri .efc-tria-d { fill: var(--c, #2E7D5B) }
.efc-dots.q i { border-style: dashed }
.efc-ztrack > .efc-iline { position: absolute; left: 4%; right: 4%; bottom: 0; z-index: 1 }
.efc-pf { min-height: 44px }
.efc-pf.seen { border-bottom-color: var(--ink) }
.efc-pimg { aspect-ratio: auto; padding: 6px 10px; background: color-mix(in srgb, var(--c, #2E7D5B) 10%, var(--panel)) }
.efc-pimg svg { width: 100%; height: auto; display: block }
.efc-pcar { fill: #C62828 } .efc-pwin { fill: var(--panel); opacity: .85 }
.efc-pwheel { fill: var(--ink) } .efc-phub { fill: var(--muted) }
.efc-pground { stroke: var(--muted); stroke-width: 2 }
.efc-psun { fill: #F2B705 }
.efc-pman { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round }
.efc-pman circle { fill: var(--bg) } .efc-pman path:first-of-type { stroke-width: 5 }
@media (prefers-reduced-motion: reduce) { .efc-tri .efc-tria-f { transition: none } }

/* Mahnablauf im dunklen Modus: Rot heller, damit Ziffern und Linie auf dunklem Grund lesbar bleiben (ALLE-02). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .efc-mst.done .efc-mno { border-color: #FF8A80; color: #FF8A80 } :root:not([data-theme="light"]) .efc-mst.done::before, :root:not([data-theme="light"]) .efc-mst.cur::before { background: #FF8A80 } }
:root[data-theme="dark"] .efc-mst.done .efc-mno { border-color: #FF8A80; color: #FF8A80 }
:root[data-theme="dark"] .efc-mst.done::before, :root[data-theme="dark"] .efc-mst.cur::before { background: #FF8A80 }
/* Rote Beschriftungen an Zielmarken: im dunklen Design heller (ALLE-07). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .efc-target > span, :root:not([data-theme="light"]) .efc-ngpan > span { color: #FF8A80 } }
:root[data-theme="dark"] .efc-target > span, :root[data-theme="dark"] .efc-ngpan > span { color: #FF8A80 }

/* ===== Prüfstände EF-09 bis EF-13 (Teil B2): Stimmen, Waage, Regler, Karten, Baukasten ===== */
.efc-vs { display: grid; gap: 8px }
.efc-vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.efc-v { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--panel); display: grid; gap: 6px; align-content: start }
.efc-v blockquote { margin: 0; font-size: 15px; line-height: 1.45 }
.efc-v figcaption { font: 600 13px var(--mono); color: var(--muted) }
.efc-az { border-left: 4px solid var(--ink); padding: 2px 0 2px 14px; display: grid; gap: 6px }
.efc-az p { margin: 0 }
/* Waage */
.ix { --wp: #1565C0; --wf: #7B4FC9 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ix { --wp: #8AB4FF; --wf: #C3A6FF } }
:root[data-theme="dark"] .ix { --wp: #8AB4FF; --wf: #C3A6FF }
.efc-wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.efc-wcol { display: grid; gap: 8px; align-content: start }
.efc-wh { margin: 0; font-weight: 800; font-size: 14px }
.efc-wcol:first-child .efc-wh { color: var(--wp) } .efc-wcol:last-child .efc-wh { color: var(--wf) }
.efc-wv { display: grid; gap: 6px; text-align: left; padding: 10px 12px; min-height: 44px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .2s ease, background .2s ease }
.efc-wq { font-size: 14px; line-height: 1.4 }
.efc-wr { display: flex; justify-content: space-between; gap: 8px; align-items: center; font: 600 12px var(--mono); color: var(--muted) }
/* Beide Aufschriften liegen übereinander, damit die Rollenzeile beim Umschalten nicht neu umbricht */
.efc-wtag { display: grid; flex: none }
.efc-wtag::before, .efc-wtag::after { grid-area: 1 / 1; font: 700 12px var(--sans); padding: 2px 8px; border-radius: 99px; border: 1.5px solid currentColor; white-space: nowrap; text-align: center }
.efc-wtag::before { content: "auf die Waage" } .efc-wtag::after { content: "liegt drauf"; visibility: hidden }
.efc-wv.s-p .efc-wtag { color: var(--wp) } .efc-wv.s-f .efc-wtag { color: var(--wf) }
.efc-wv[aria-pressed="true"].s-p { border-color: var(--wp); background: color-mix(in srgb, var(--wp) 10%, var(--bg)) }
.efc-wv[aria-pressed="true"].s-f { border-color: var(--wf); background: color-mix(in srgb, var(--wf) 10%, var(--bg)) }
.efc-wv[aria-pressed="true"] .efc-wtag::before { visibility: hidden } .efc-wv[aria-pressed="true"] .efc-wtag::after { visibility: visible }
.efc-wscale { max-width: 520px; width: 100%; justify-self: center }
.efc-wsvg { display: block; width: 100%; height: auto; overflow: visible }
.efc-wbar { fill: var(--ink); transform-box: view-box; transform-origin: 250px 39px; transition: transform .5s ease }
.efc-wpan { transition: transform .5s ease }
.efc-wpan line { stroke: var(--muted); stroke-width: 2 }
.efc-wpan path { fill: var(--panel); stroke: var(--ink); stroke-width: 3 }
.efc-wpan text { font: 800 16px var(--sans); fill: var(--ink) }
.efc-wpan:nth-of-type(1) .efc-wchip.on { fill: var(--wp) } .efc-wpan:nth-of-type(2) .efc-wchip.on { fill: var(--wf) }
.efc-wchip { fill: transparent; transition: fill .2s ease }
.efc-wfoot { stroke: var(--ink); stroke-width: 6; fill: none; stroke-linecap: round }
.efc-wpiv { fill: var(--bg); stroke: var(--ink); stroke-width: 4 }
.efc-wst { margin: 0; text-align: center; font-weight: 800 }
/* Regler mit Stufen */
.efc-psreg { display: grid; gap: 4px }
.efc-psreg { gap: 8px }
.efc-psreg .rg-wert { display: none } /* Die Stufenknöpfe darunter zeigen die Stellung; der Wert steht für Vorleser in aria-valuetext. */
.efc-psticks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px }
.efc-pstick { min-height: 44px; padding: 6px 6px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: 700 13px var(--sans); line-height: 1.25; cursor: pointer; hyphens: auto }
.efc-pstick[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg) }
.efc-psout { display: grid; gap: 10px }
/* Karten legen */
.efc-kgrid { display: grid; gap: 12px }
.efc-kcard { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px 18px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); transition: border-color .2s ease }
.efc-kcard p { margin: 0 }
.efc-kcard[data-pos="dafür"] { border-color: var(--wp) } .efc-kcard[data-pos="dagegen"] { border-color: var(--wf) } .efc-kcard[data-pos="offen"] { border-color: var(--muted) }
.efc-kseg .seg, .efc-kseg { flex-wrap: wrap }
.efc-kaz { font-size: 14px; line-height: 1.4; border-top: 1px solid var(--line); padding-top: 8px }
.efc-kaz .lg { display: grid }
/* Baukasten */
.efc-bk { display: grid; gap: 6px }
.efc-bkl { margin: 6px 0 0; font-weight: 700; font-size: 14px }
/* Dispo-Deckel */
.efc-drow { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr) 7.5em; gap: 10px; align-items: center; font-size: 14px }
.efc-dtrack { height: 18px; border-radius: 9px; background: var(--line); overflow: hidden }
.efc-dfill { display: block; height: 100%; background: #C62828; border-radius: 9px; transition: width .4s ease }
.efc-dval { text-align: right; white-space: nowrap }
@media (max-width: 760px) { .efc-kcard { grid-template-columns: 1fr } }
.efc-kt, .efc-kc { display: grid; gap: 8px; align-content: start }
@media (max-width: 620px) { .efc-vgrid, .efc-wgrid { grid-template-columns: 1fr } .efc-psticks { grid-template-columns: repeat(2, minmax(0, 1fr)) } .efc-drow { grid-template-columns: 1fr auto } .efc-drow > span { grid-column: 1 / -1 } }

/* ===== B3 zum Anfassen: Beitragszahler-Regler und Einkäufe legen ===== */
.efc-tbow { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: round; transition: d .3s ease }
.efc-tren { transition: transform .3s ease }
.efc-tctl { display: grid; gap: 4px; max-width: 640px }
.efc-tmarks { position: relative; height: 44px; margin: 0 69px } /* 44 px Knopf + 10 px Abstand + 15 px halber Griff wie im Regler */
.efc-tmark { position: absolute; top: 0; transform: translateX(-50%); min-height: 44px; min-width: 56px; padding: 0 8px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: 700 13px var(--mono); cursor: pointer }
.efc-tmark[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg) }
.efc-lgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.efc-lcol { display: grid; gap: 6px; align-content: start }
.efc-lh { margin: 0; font-weight: 800; font-size: 14px }
.efc-lzone { display: grid; gap: 6px; padding: 8px; border-radius: 12px; border: 2px dashed var(--line); background: var(--panel); transition: border-color .2s ease }
.efc-lzone.later { border-color: var(--muted) }
.efc-lzone.hover { border-color: var(--ink); border-style: solid }
.efc-lcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 10px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; position: relative }
.efc-lcard.gone { visibility: hidden }
.efc-lcard.drag { z-index: 5; cursor: grabbing; box-shadow: var(--shadow) }
.efc-lgrip { width: 10px; height: 18px; background: radial-gradient(circle, var(--muted) 1.5px, transparent 2px) 0 0 / 5px 6px }
@media (max-width: 520px) { .efc-lcard { grid-template-columns: minmax(0, 1fr) auto } .efc-lgrip { display: none } }
@media (max-width: 620px) { .efc-tmarks { display: flex; flex-direction: row-reverse; justify-content: space-between; height: auto; margin: 0 } .efc-tmark { position: static; transform: none !important } }