/* Linie Recht & Verträge (RE): Stile der Interaktionen aus ix-re.js. Vorsilbe .re- (FI-Sprint 03.11.2026). */
.ix .re-legend > span { white-space: nowrap }
.ix .re-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--muted); margin: 0 }
.re-lg { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 4px; border: 2px solid var(--ink) }
.ix { --re-ok: #0B7A3E }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ix { --re-ok: #5FD08F } }
:root[data-theme="dark"] .ix { --re-ok: #5FD08F }
.re-st-w { --st: #0B7A3E } .re-st-u { --st: #B3261E } .re-st-s { --st: #8A6100 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .re-st-w { --st: #5FD08F } :root:not([data-theme="light"]) .re-st-u { --st: #FF8A80 } :root:not([data-theme="light"]) .re-st-s { --st: #E8B64C } }
:root[data-theme="dark"] .re-st-w { --st: #5FD08F } :root[data-theme="dark"] .re-st-u { --st: #FF8A80 } :root[data-theme="dark"] .re-st-s { --st: #E8B64C }
.re-pw-end.swap { animation: swapin .22s ease }
.re-vk-stamp.swap { animation: re-stempeln .25s ease }
@keyframes re-stempeln { from { opacity: 0; transform: rotate(-8deg) scale(1.25) } }
@media (prefers-reduced-motion: reduce) { .re-vk-stamp.swap, .re-pw-end.swap, .re-tl-fill { animation: none !important; transition: none !important } }

/* RE-01 Rechnung */
.re-rech-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start }
@media (max-width: 640px) { .re-rech-grid { grid-template-columns: 1fr } }
.re-rech-side { display: grid; gap: 10px; min-width: 0 }
/* B7: Beleg aus K.papier; die drei Stellen zum Antippen sind Knöpfe im Papier */
.re-rech .fest > .pp-bon { justify-self: center; width: 100% }
.re-mark { display: grid; gap: 2px; text-align: left; border: 2px dashed rgba(26, 28, 31, .35); background: transparent; color: inherit; border-radius: 6px; padding: 6px 8px; min-height: 44px; font: inherit; cursor: pointer; width: 100% }
.re-mark[aria-pressed="true"] { border-style: solid; border-color: var(--pp-ink); background: rgba(26, 28, 31, .06) }
.re-mark:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.re-mark .pp-kopf { border-bottom: 0; padding-bottom: 0 }
.pp-bon .re-mark .pp-kopf { justify-content: center; text-align: center }
.re-mark-kopf { border-bottom: 2px solid var(--pp-ink) }
.pp-bon .re-mark-kopf { border-bottom-style: dashed }
.re-mark .pp-sig { justify-self: start }
.re-rc-pos { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); padding: 6px 0 }
.pp-bon .re-rc-pos { border-top-style: dashed; border-bottom-style: dashed }
.re-rc-pos > span:last-child { white-space: nowrap }
.ix .re-rc-zahl { font-size: 14px; color: var(--pp-mut) }
.re-rc-fuss { color: var(--pp-mut) }
.re-partner b { font-size: 17px }

/* RE-01 Schwebezustand */
/* B7: Kaufvertrag als Formular aus K.papier */
.re-vcard { max-width: 520px }
.re-vk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center }
.ix .re-vk-f { margin: 0; display: grid; gap: 0 }
.re-vk-f > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; line-height: 32px }
.re-vk-f dt { color: var(--pp-mut) } .re-vk-f dd { margin: 0; font-weight: 700 }
.re-vk-stamp { min-width: 8.5em; font-size: 15px; margin-right: 6px }
.re-tl { position: relative; padding: 0 0 26px; margin: 4px 6px 0 }
.re-tl-bar { position: relative; height: 72px; border-bottom: 3px solid var(--track) }
.re-tl-fill { position: absolute; left: 0; bottom: -3px; height: 3px; transition: width .5s ease; background: linear-gradient(90deg, #8A6100 0 calc(100% - 6px), var(--st) calc(100% - 6px)) }
.re-tl-fill::after { content: ''; position: absolute; right: -6px; bottom: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--st) }
.re-tl-ev { position: absolute; bottom: 0; transform: translateX(-6px); display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 2px; font-size: 13px; font-weight: 700; line-height: 1.2; max-width: 9em }
.re-tl-ev i { width: 2px; height: calc(10px + var(--row) * 26px); background: var(--ink) }
.re-tl-ev.re-r { transform: translateX(calc(-100% + 6px)); align-items: flex-end; text-align: right }
.re-tl-tick { position: absolute; bottom: 0; transform: translateX(-50%); font: 600 12px var(--mono); color: var(--muted); white-space: nowrap }
.re-tl-tick:first-child { transform: none } .re-tl-tick:last-of-type { transform: translateX(-100%) }
.re-lg-s { background: #8A6100 } .re-lg-w { background: #0B7A3E } .re-lg-u { background: #B3261E }

/* RE-01 Prüfweg */
.re-pw-flow { display: grid; gap: 0; max-width: 640px }
.re-pw-q { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; position: relative; margin-bottom: 22px; background: var(--bg); transition: opacity .25s }
.re-pw-q::after { content: ''; position: absolute; left: 28px; bottom: -24px; width: 3px; height: 22px; background: var(--ink) }
.re-pw-q.re-off { border-style: dashed; border-color: var(--track); color: var(--muted) } .re-pw-q.re-off .re-pw-no { background: var(--track); color: var(--ink) } .re-pw-q.re-off::after { background: var(--track) }
.re-pw-q.re-yes { border-color: var(--re-ok) }
.re-pw-no { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-weight: 900 }
.re-pw-a { font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; min-width: 11.5em; text-align: right }
.re-pw-q.re-yes .re-pw-a { color: var(--re-ok) } .re-pw-q.re-no .re-pw-a { color: var(--ink) }
.re-pw-end { border: 3px solid var(--st); color: var(--st); border-radius: 10px; padding: 10px 12px; font-weight: 900 }
@media (max-width: 520px) { .re-pw-q { grid-template-columns: 32px 1fr } .re-pw-a { grid-column: 2; min-width: 0; text-align: left } }

/* RE-01 Lebensalter-Lineal */
.re-ln-quick { display: flex; flex-wrap: wrap; gap: 6px }
.re-ln-quick button { border: 2px solid var(--ink); background: var(--bg); border-radius: 8px; min-height: 44px; padding: 4px 10px; font-weight: 700 }
.re-ln-quick button[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.re-ln-area { --lt: 132px; position: relative; display: grid; gap: 8px; padding-bottom: 22px }
.re-ln-row { display: grid; grid-template-columns: var(--lt) 1fr; align-items: center }
.re-ln-t { font-weight: 800; font-size: 14px; padding-right: 8px }
.re-ln-bar { position: relative; height: 26px; border-radius: 6px; overflow: hidden; background: var(--panel) }
.re-ln-z { position: absolute; top: 0; bottom: 0; border-right: 2px solid var(--bg) }
.re-lv0 { background: var(--panel) } .re-lv1 { background: color-mix(in srgb, var(--c) 45%, var(--bg)) } .re-lv2 { background: var(--c) }
.re-hatch, .re-ln-z.re-lv0 { background: repeating-linear-gradient(135deg, var(--panel) 0 6px, var(--line) 6px 8px) }
.re-ln-scale { position: absolute; left: var(--lt); right: 0; bottom: 0; height: 18px }
.re-ln-scale span { white-space: nowrap; position: absolute; transform: translateX(-50%); font: 600 12px var(--mono); color: var(--muted) }
.re-ln-mark { position: absolute; top: -6px; bottom: 16px; width: 3px; margin-left: -1px; background: var(--ink); border-radius: 2px; transition: left .2s ease; pointer-events: none }
@media (prefers-reduced-motion: reduce) { .re-ln-mark { transition: none } }
.re-ln-outs { gap: 8px }
.re-ln-out { display: grid; grid-template-columns: var(--lt, 132px) 1fr; gap: 8px }
@media (max-width: 520px) { .re-ln-area { --lt: 88px } .re-ln-t { font-size: 13px } .re-ln-out { grid-template-columns: 1fr; gap: 0 } }

/* RE-01 Baustellenschild */
.re-sch-wrap { display: grid; justify-items: center; position: relative; padding-bottom: 8px }
.re-sch { position: relative; z-index: 1; display: grid; gap: 6px; background: #FFFFFF; color: #121417; border: 6px solid #121417; outline: 6px solid #F2C200; border-radius: 6px; padding: 14px; width: min(100%, 380px); text-align: center }
.re-sch button { border: 2px dashed transparent; background: transparent; color: inherit; border-radius: 6px; min-height: 44px; font: 900 18px var(--sans); text-transform: uppercase; letter-spacing: .02em; cursor: pointer }
.re-sch button:hover { border-color: rgba(18, 20, 23, .35) }
.re-sch button[aria-pressed="true"] { border: 2px solid #121417; background: #FFF4C2 }
.re-sch .re-sch-Baustelle { font-size: 26px; background: #F2C200 }
.re-sch .re-sch-Baustelle[aria-pressed="true"] { background: #F2C200; border-color: #121417 }
.re-sch .re-sch-verboten { color: #B3261E }

/* RE-01 Zahlen */
.re-bars { display: flex; align-items: flex-end; gap: 18px; height: 170px; padding: 0 4px; border-bottom: 2px solid var(--ink); max-width: 360px }
.re-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; position: relative }
.re-bar-c { width: 100%; flex: none; background: var(--c); border-radius: 4px 4px 0 0 }
.re-bar-v { flex: none; line-height: 22px }
.re-bar-v { font-weight: 800 }
.re-bar-y { position: absolute; bottom: -24px; font: 600 13px var(--mono); color: var(--muted) }
.re-zahlen .seg { margin-top: 22px }
@media (max-width: 420px) { .re-vk { grid-template-columns: 1fr } .re-vk-stamp { justify-self: start; margin: 4px 0 0 8px } }

/* RE-02 kleine Umschalter mit vielen Optionen */
.re-seg-sm button { padding: 6px 10px; font-size: 15px }

/* RE-02 Onlineshop */
.re-shop-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: none }
.re-shop-steps button { width: 100%; height: 100%; min-height: 52px; display: flex; align-items: center; gap: 8px; border: 2px solid var(--ink); background: var(--bg); border-radius: 8px; padding: 6px 8px; font-weight: 700; text-align: left; font-size: 15px; hyphens: auto }
.re-shop-steps .re-done button { background: var(--panel) }
.re-shop-steps button[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.re-shop-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; font-size: 13px }
@media (max-width: 640px) { .re-shop-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.re-shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start }
@media (max-width: 640px) { .re-shop-grid { grid-template-columns: 1fr } }
.re-shop-screen { border: 2px solid var(--ink); border-radius: 12px; padding: 12px 14px 14px; display: grid; gap: 6px; background: var(--bg) }
.re-shop-url { font: 600 12px var(--mono); color: var(--muted); background: var(--panel); border-radius: 6px; padding: 4px 8px }
.re-shop-btn { justify-self: start; border-radius: 8px; padding: 8px 12px; background: var(--panel); border: 2px solid var(--line); font-weight: 700 }
.re-shop-btn.re-pay { background: #F2C200; color: #121417; border-color: #121417 }
button.re-shop-btn { min-height: 44px; font: inherit; font-weight: 700; color: inherit; cursor: pointer; border-color: var(--ink) }
button.re-shop-btn.re-pay { color: #121417 }
.re-shop-ref { font: 600 13px var(--mono); color: var(--muted); padding: 10px 0 }
.re-shop-screen { align-content: start }
.re-shop-state { font-weight: 900; color: var(--st); border-top: 2px solid var(--line); padding-top: 6px }

/* RE-02 Chat */
.re-chat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start }
@media (max-width: 640px) { .re-chat-grid { grid-template-columns: 1fr } }
.re-chat-phone { border: 2px solid var(--ink); border-radius: 18px; padding: 12px; display: grid; gap: 10px; background: var(--panel) }
.re-chat-log { display: grid; gap: 8px; align-content: start }
.re-chat-ad { display: grid; gap: 2px; background: var(--bg); border-radius: 10px; padding: 8px 10px; border: 1px solid var(--line) }
.re-bub { display: grid; gap: 2px; max-width: 85%; border-radius: 14px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line) }
.re-bub small { color: var(--muted); font-size: 12px }
.re-sam { justify-self: end; background: color-mix(in srgb, var(--c) 18%, var(--bg)) }
.re-mira { justify-self: start }
.re-bub-tag { justify-self: start; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; border: 1.5px solid currentColor; border-radius: 4px; padding: 0 4px }
.re-chat-none { margin: 0; color: var(--muted); font-style: italic; text-align: center }
.ix .re-chat-state { margin: 0; font-weight: 900; color: var(--st) }
.re-chat-state.swap { animation: swapin .22s ease }

/* RE-02 Vollmacht */
.re-voll-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
@media (max-width: 640px) { .re-voll-row { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.re-voll-col { min-width: 0; border: 2px solid var(--ink); border-radius: 10px; padding: 10px; display: grid; gap: 6px; align-content: start; transition: background .25s, opacity .25s }
.re-voll-t { font-weight: 800; hyphens: manual; overflow-wrap: break-word; min-width: 0 }
.re-voll-sig { font-family: 'Segoe Script', 'Bradley Hand', cursive; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline }
.re-voll-k { font: 700 13px var(--mono); font-style: normal }
.re-voll-d { font-weight: 800; font-size: 14px; display: grid }
.re-voll-d > span { grid-area: 1 / 1; visibility: hidden }
.re-d0 .re-vd0, .re-d1 .re-vd1, .re-d2 .re-vd2 { visibility: visible }
.re-voll-col.re-d1 { background: color-mix(in srgb, #0B7A3E 14%, var(--bg)); border-color: #0B7A3E }
.re-voll-col.re-d2 { background: color-mix(in srgb, #8A6100 14%, var(--bg)); border-color: #8A6100; border-style: dashed }
.re-voll-col.re-d0 { border-style: dashed; border-color: var(--track); background: var(--panel) }
.re-voll-col.re-d0 .re-voll-d { color: var(--muted) }
@media (prefers-reduced-motion: reduce) { .re-voll-col { transition: none } }

/* RE-02 Form */
.re-form-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end }
@media (max-width: 640px) { .re-form-row { grid-template-columns: 1fr; align-items: stretch } }
.re-form-c { border: 2px solid var(--ink); border-radius: 10px; padding: 10px; display: grid; gap: 4px; align-content: start; transition: opacity .25s, background .25s; min-width: 0 }
.re-fc0 { min-height: 120px } .re-fc1 { min-height: 135px } .re-fc2 { min-height: 150px } .re-fc3 { min-height: 165px } .re-fc4 { min-height: 180px }
@media (max-width: 640px) { .re-form-c { min-height: 0 !important; grid-template-columns: 34px 1fr auto; align-items: center } .re-form-s { grid-column: 2 } .re-form-v { grid-column: 3; grid-row: 1 } }
.re-form-ic { width: 28px; height: 28px; border-radius: 6px; border: 2px solid currentColor; position: relative }
.re-fc1 .re-form-ic { border-radius: 10px 10px 10px 2px }
.re-fc2 .re-form-ic::after, .re-fc3 .re-form-ic::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 5px; border-bottom: 2px solid currentColor }
.re-fc3 .re-form-ic, .re-fc4 .re-form-ic { border-radius: 50% }
.re-fc4 .re-form-ic { background: radial-gradient(circle, currentColor 30%, transparent 32%) }
.re-form-s { font-size: 13px; color: var(--muted); hyphens: auto }
.re-form-v { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .04em }
.re-form-c.re-weak { border-style: dashed; border-color: var(--track); background: var(--panel) }
.re-form-c.re-weak .re-form-v { color: var(--muted) }
.re-form-c.re-ok .re-form-v { color: var(--re-ok) }
.re-form-c.re-need { background: var(--ink); color: var(--bg) } .re-form-c.re-need .re-form-s { color: inherit }
@media (prefers-reduced-motion: reduce) { .re-form-c { transition: none } }

/* RE-02 Ausbildungsvertrag */
.re-az-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.re-az-list button { width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 2px 8px; text-align: left; border: 2px dashed rgba(26, 28, 31, .3); background: var(--pp-bg); color: inherit; border-radius: 6px; padding: 6px 8px; min-height: 44px; font: inherit; font-size: 15px; cursor: pointer }
.re-az-list button[aria-pressed="true"] { border-style: solid; border-color: var(--pp-ink); background: #F1EFE8 }
.re-az-n { font: 700 13px var(--mono); color: #4A4F56 }
.re-az-m { grid-column: 2; font: 700 12px/16px var(--mono); text-transform: uppercase; letter-spacing: .04em; height: 16px }
.re-az-col { display: grid; gap: 8px; min-width: 0; justify-items: start }
.re-az-col > .pp { justify-self: stretch }
.re-az-reset { min-height: 44px }
.re-strike .re-az-t { text-decoration: line-through; text-decoration-color: #B3261E; text-decoration-thickness: 2px }
.re-strike .re-az-m { color: #B3261E } .re-okk .re-az-m { color: #0B7A3E }

/* RE-02 Anfechtung */
.re-anf-fall { font-style: italic }
.re-anf-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0 }
.re-anf-dl dt { font-weight: 800 } .re-anf-dl dd { margin: 0 }
.re-anf-dl b { color: var(--st) }
@media (max-width: 520px) { .re-anf-dl { grid-template-columns: 1fr; gap: 0 } .re-anf-dl dd { margin-bottom: 6px } }

/* RE-02 Laufzeit */
.re-lf-area { position: relative; padding: 30px 0 22px }
.re-lf-bar { position: relative; height: 34px; background: var(--panel); border-radius: 6px }
.re-lf-min { position: absolute; left: 0; top: 0; bottom: 0; background: var(--re-lv1, color-mix(in srgb, var(--c) 45%, var(--bg))); border-radius: 6px 0 0 6px; display: flex; align-items: center; padding-left: 8px; font-size: 13px; font-weight: 700; overflow: hidden; white-space: nowrap }
.re-lf-run { position: absolute; left: 0; bottom: 0; height: 8px; background: var(--c); border-radius: 0 0 0 6px; transition: width .25s ease }
.re-lf-dl { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: #B3261E }
.re-lf-k, .re-lf-e { position: absolute; top: -30px; bottom: 0; width: 2px; background: var(--ink); transition: left .2s ease }
.re-lf-k span, .re-lf-e span { position: absolute; top: 0; left: 4px; font: 700 12px var(--mono); white-space: nowrap }
.re-lf-e { top: 0; bottom: -8px; width: 4px; background: var(--c) }
.re-lf-k.re-flip span { left: auto; right: 4px }
.re-lf-e span { top: auto; bottom: -22px; left: auto; right: 0; transform: translateX(50%) }
.re-lf-scale { left: 0 }
.re-lf-lgdl { background: #B3261E }
@media (prefers-reduced-motion: reduce) { .re-lf-run, .re-lf-k, .re-lf-e { transition: none } }

.ix ol.re-shop-steps, .ix ol.re-az-list { padding-left: 0 !important; margin-left: 0 !important }
.ix ol.re-shop-steps > li, .ix ol.re-az-list > li { margin: 0 }
.re-lf-scale span:first-child { transform: none } .re-lf-scale span:last-child { transform: translateX(-100%) }

/* RE-04 Vertragsarten: Was fließt? */
.re-fl-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
@media (max-width: 640px) { .re-fl-row { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.re-fl-c { border: 2px dashed var(--track); border-radius: 10px; padding: 10px; display: grid; gap: 2px; align-content: start; background: var(--panel); transition: background .25s, border-color .25s }
.re-fl-c span { font-size: 14px; color: var(--muted) }
.re-fl-c.re-on { border: 3px solid var(--ink); padding: 9px; background: color-mix(in srgb, var(--c) 22%, var(--bg)) }
.re-fl-c.re-on span { color: inherit }
@media (prefers-reduced-motion: reduce) { .re-fl-c { transition: none } }

/* RE-04 Kalenderblatt */
.re-kal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 640px }
.re-kal-wd { font: 700 12px var(--mono); color: var(--muted); text-align: center; padding-bottom: 2px }
.re-kal-d { min-height: 52px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 4px; display: flex; flex-direction: column; gap: 1px; min-width: 0; background: var(--bg) }
.re-kal-d b { font: 700 13px var(--mono) }
.re-kal-d small { font-size: 11px; line-height: 1.15; font-weight: 700; hyphens: auto; overflow-wrap: anywhere }
.re-kal-d.re-kv, .re-lg.re-kv { background: color-mix(in srgb, #B3261E 16%, var(--bg)) }
.re-kal-d.re-kn, .re-lg.re-kn { background: repeating-linear-gradient(135deg, color-mix(in srgb, #8A6100 22%, var(--bg)) 0 6px, var(--bg) 6px 9px) }
.re-kal-d.re-kv.re-kn, .re-lg.re-kv.re-kn { background: repeating-linear-gradient(135deg, color-mix(in srgb, #8A6100 30%, transparent) 0 6px, transparent 6px 9px), color-mix(in srgb, #B3261E 16%, var(--bg)) }
.re-kal-d.re-ke { border: 2px solid var(--ink) }
.re-lg.re-ke { background: var(--bg) }
.re-k-ruecktritt { border-color: #B3261E !important }
@media (max-width: 520px) { .re-kal-grid { gap: 2px } .re-kal-d { min-height: 60px; padding: 2px } .re-kal-d small { font-size: 10px } }

/* RE-04 Gewährleistung */
.re-gw .re-ln-area { --lt: 150px; padding-bottom: 44px }
.re-gw .re-ln-scale { bottom: 22px } .re-gw .re-ln-mark { bottom: 38px }
.ix .re-ln-unit { position: absolute; left: var(--lt); bottom: 0; margin: 0; font-size: 13px }
.re-check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; cursor: pointer; font-size: 15px }
.re-check input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--ink) }
.re-gw .re-ln-z { transition: width .25s ease }
@media (max-width: 520px) { .re-gw .re-ln-area { --lt: 96px } }
@media (prefers-reduced-motion: reduce) { .re-gw .re-ln-z { transition: none } }
.re-gw .re-ln-scale span:first-child { transform: none } .re-gw .re-ln-scale span:last-child { transform: translateX(-100%) }

/* RE-04 Widerruf */
.re-wr-strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; max-width: 520px }
.re-wr-strip span { font: 700 11px var(--mono); text-align: center; padding: 6px 0; border-radius: 3px; background: color-mix(in srgb, #0B7A3E 22%, var(--bg)) }
.re-wr-no span { background: var(--panel); color: var(--muted); text-decoration: line-through }
.re-wr .out > b { color: var(--st) }

/* RE-04 Verjährung */
.re-vj-bar { position: relative; height: 64px; margin-top: 4px }
.re-vj-y { position: absolute; top: 0; height: 40px; border-left: 1px solid var(--line); font: 700 12px var(--mono); color: var(--muted); padding: 0 0 0 4px; box-sizing: border-box; background: var(--panel) }
.re-vj-y:nth-child(even) { background: color-mix(in srgb, var(--panel) 50%, var(--bg)) }
.re-vj-wait, .re-vj-run { position: absolute; top: 18px; height: 14px; transition: left .3s ease, width .3s ease }
.re-vj-wait, .re-lg.re-vj-lgw { background: repeating-linear-gradient(135deg, #8A6100 0 4px, transparent 4px 7px) }
.re-vj .re-lv2, .re-vj-run { --c: #B3261E; background: var(--c) }
.re-vj-born { position: absolute; top: 12px; width: 4px; height: 26px; margin-left: -2px; background: var(--ink); border-radius: 2px; transition: left .3s ease }
.re-vj-end { position: absolute; top: 12px; height: 50px; width: 3px; margin-left: -2px; background: #B3261E; transition: left .3s ease }
.re-vj-end::after { content: 'verjährt'; position: absolute; bottom: 0; right: 6px; font: 700 12px var(--mono); color: #B3261E; white-space: nowrap }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .re-vj-end, :root:not([data-theme="light"]) .re-vj-run, :root:not([data-theme="light"]) .re-vj .re-lv2 { --c: #FF8A80; background: var(--c) } :root:not([data-theme="light"]) .re-vj-end::after { color: #FF8A80 } }
:root[data-theme="dark"] .re-vj-end, :root[data-theme="dark"] .re-vj-run, :root[data-theme="dark"] .re-vj .re-lv2 { --c: #FF8A80; background: var(--c) } :root[data-theme="dark"] .re-vj-end::after { color: #FF8A80 }
@media (max-width: 520px) { .re-vj-y { font-size: 10px; padding-left: 2px } }
@media (prefers-reduced-motion: reduce) { .re-vj-wait, .re-vj-run, .re-vj-born, .re-vj-end { transition: none } }

/* RE-03 Besitz und Eigentum */
.re-bes-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 560px }
.re-bes-c { border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; display: grid; gap: 2px; min-width: 0; background: var(--bg) }
.re-bes-c b { font-size: 18px }
@media (max-width: 560px) { .re-bes-row .re-bes-c b { min-height: 2.6em; line-height: 1.3 } .re-bes-col .re-bes-c b { min-height: 0 } }
.ix .re-bes-k { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted) }
.re-same .re-bes-c { border-color: #0B7A3E }
.ix .re-bes-s { margin: 0; font-weight: 900; color: var(--st) }
.re-bes-col { grid-template-columns: 1fr }
.re-bes-c.re-done, .re-rt-eig.re-done { border-color: #0B7A3E; background: color-mix(in srgb, #0B7A3E 14%, var(--bg)) }

/* RE-03 Zeitlupe */
.re-zl-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start }
@media (max-width: 640px) { .re-zl-grid { grid-template-columns: 1fr } }
.re-zl-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.re-zl-col { border: 2px solid var(--ink); border-radius: 10px; padding: 8px 10px; display: grid; gap: 8px; align-content: start }
.re-zl-name { font-size: 15px }
.re-zl-items { display: flex; flex-wrap: wrap; gap: 6px; min-height: 76px; align-content: flex-start }
.re-zl-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 15px; animation: swapin .22s ease }
.re-zl-br { background: #F2C200; color: #121417 }
.re-zl-g { background: color-mix(in srgb, #0B7A3E 22%, var(--bg)); border: 2px solid #0B7A3E }
.ix ol.re-zl-list { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px }
.ix ol.re-zl-list > li { display: flex; gap: 8px; align-items: center; margin: 0; opacity: .45; font-weight: 700 }
.ix ol.re-zl-list > li.re-on { opacity: 1 }
.re-zl-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; font-size: 13px }
.re-zl-list .re-on .re-zl-n { background: var(--ink); color: var(--bg); border-color: var(--ink) }
@media (prefers-reduced-motion: reduce) { .re-zl-chip { animation: none } }

/* RE-03 Raten */
.re-rt-bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; max-width: 560px }
.re-rt-bar span { font: 700 12px var(--mono); text-align: center; padding: 8px 0; border-radius: 4px; background: var(--panel); color: var(--muted); transition: background .2s }
.re-rt-bar span.re-on { background: var(--c); color: var(--bg) }
.re-rt-eig { border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; display: grid; gap: 2px; min-width: 0 }
.re-rt-eig b { font-size: 18px }
@media (max-width: 420px) { .re-rt-bar span { font-size: 10px; padding: 6px 0 } }
@media (prefers-reduced-motion: reduce) { .re-rt-bar span { transition: none } }

/* RE-03 Kette Ben, Kai, Jonas */
.re-kt-chain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 6px; max-width: 760px }
.re-kt-n { border: 2px solid var(--ink); border-radius: 12px; padding: 10px 8px; display: grid; justify-items: center; gap: 6px; min-height: 76px; align-content: center; background: var(--bg) }
.re-kt-n b { font-size: 17px }
.re-kt-crown { font: 800 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; border-radius: 4px; padding: 2px 6px; visibility: hidden; background: #F2C200; color: #121417 }
.re-kt-n.re-on { border-width: 3px; background: color-mix(in srgb, #F2C200 18%, var(--bg)) }
.re-kt-n.re-on .re-kt-crown { visibility: visible }
.re-kt-a { position: relative; text-align: center; font-size: 13px; font-weight: 700; padding-bottom: 10px; hyphens: auto }
.re-kt-a::after { content: ''; position: absolute; left: 4px; right: 10px; bottom: 0; height: 2px; background: var(--ink) }
.re-kt-a::before { content: ''; position: absolute; right: 4px; bottom: -5px; border: 6px solid transparent; border-left-color: var(--ink); border-right-width: 0 }
@media (max-width: 560px) {
  .re-kt-chain { grid-template-columns: 1fr; justify-items: stretch; gap: 0 }
  .re-kt-n { min-height: 0; grid-template-columns: 1fr auto; justify-items: start; padding: 8px 12px }
  .re-kt-a { padding: 8px 0 8px 28px; text-align: left }
  .re-kt-a::after { left: 14px; right: auto; top: 0; bottom: 0; width: 2px; height: auto }
  .re-kt-a::before { left: 9px; right: auto; bottom: -2px; border: 6px solid transparent; border-top-color: var(--ink); border-bottom-width: 0 }
}

/* RE-03 Grundbuch */
.re-gb-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start }
@media (max-width: 760px) { .re-gb-grid { grid-template-columns: 1fr } }
.re-gb-side { display: grid; gap: 10px; min-width: 0 }
.ix .re-gb-bv { font-size: 13px; color: var(--pp-mut); margin: 0 }
.re-gb-abt { border-top: 1px solid var(--pp-line); padding-top: 6px; display: grid; gap: 4px }
.ix .re-gb-h { margin: 0; font-size: 13px; color: var(--pp-mut) } .re-gb-h b { color: var(--pp-ink) }
.ix .re-gb-e { margin: 0; font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.re-gb-leer { font-weight: 400 !important; font-style: italic; color: var(--pp-mut) }
.re-gb-alt { text-decoration: line-through; text-decoration-color: #B3261E; text-decoration-thickness: 2px; color: var(--pp-mut) }
.re-gb-neu { background: #FFF4C2; border-radius: 4px; padding: 0 4px; margin-left: -4px }
.ix .re-gb-was { margin: -2px 0 0; font-size: 12px; font-style: italic; color: var(--pp-mut) }
.re-gb-pad { visibility: hidden }
.re-gb-tag { font: 700 11px var(--mono); text-transform: uppercase; border: 1.5px solid #8A6100; color: #8A6100; border-radius: 4px; padding: 0 4px }

/* K7 03.11.2026: Mängeltreppe mit seitlichem Schadensersatz, Lesbarkeit der Stufen */
.re-st-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 10px; align-items: end }
@media (max-width: 560px) { .re-st-row { grid-template-columns: 1fr } }
.re-se { display: grid; gap: 4px; text-align: left; min-height: 96px; align-content: start; border: 2px dashed var(--ink); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 10px; font: inherit; cursor: pointer }
.re-se-k { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted) }
.re-se b { font-size: 16px }
.re-se[aria-pressed="true"] { border-style: solid; border-width: 3px; padding: 9px; background: var(--panel) }
.re-stufen .stufe[aria-checked="true"] { outline: 3px solid var(--ink); outline-offset: 2px }
.re-stufen .stufe.past { opacity: 1 }
.re-check small { display: block; font-size: 13px; color: var(--muted) }
.re-check.re-dis { color: var(--muted); cursor: default }
.re-ln-kurz { margin: 0 }
.re-zl-list > li:not(.re-on) { opacity: 1 !important; color: var(--muted) }

/* B2 03.11.2026: Prüfstände RE-01 bis RE-04 (Stimmen, Waage, Regelpaket, Fälle, Reparaturrechner) */
.re-ps { --re-sa: #1F5FA8; --re-sb: #7A3E9D }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .re-ps { --re-sa: #8AB8F0; --re-sb: #D0A2EC } }
:root[data-theme="dark"] .re-ps { --re-sa: #8AB8F0; --re-sb: #D0A2EC }
.re-stimmen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px }
.re-stimmen > .re-seite-a { grid-column: 1 } .re-stimmen > .re-seite-b { grid-column: 2 }
@media (max-width: 640px) { .re-stimmen { grid-template-columns: 1fr } .re-stimmen > .re-stimme { grid-column: auto } }
.re-stimme { margin: 0; border: 2px solid var(--line); border-top: 6px solid var(--re-s, var(--line)); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; background: var(--bg); min-width: 0 }
.re-stimme.re-seite-a { --re-s: var(--re-sa) } .re-stimme.re-seite-b { --re-s: var(--re-sb) }
.re-stimme figcaption { display: grid; gap: 1px }
.re-stimme p { margin: 0 }
.re-st-k { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--re-s) }
.re-st-q { font-size: 13px; color: var(--muted) }
/* RE-01 Waage */
.re-wg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
@media (max-width: 640px) { .re-wg-grid { grid-template-columns: 1fr } }
.re-wg-c { display: grid; grid-template-rows: 1fr auto; gap: 6px; min-width: 0 }
.re-wg-c .re-stimme { height: 100%; box-sizing: border-box }
.re-wg-c.re-wg-on .re-stimme { border-color: var(--re-s); border-width: 2px 2px 2px 2px; border-top-width: 6px; background: var(--panel) }
.re-wg-bs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.re-wg-b, .re-fa-b { min-height: 44px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 6px 10px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-align: center }
.re-wg-b[aria-pressed="true"], .re-fa-b[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.re-wg-b:focus-visible, .re-fa-b:focus-visible, .re-rg-b:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.re-wg-res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center }
@media (max-width: 640px) { .re-wg-res { grid-template-columns: 1fr } }
.re-waage { position: relative; height: 150px; max-width: 340px; width: 100%; justify-self: center }
.re-fuss { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 90px solid var(--track); transform: translateX(-50%) }
.re-beam { --t: 0deg; position: absolute; left: 8%; right: 8%; top: 58px; height: 6px; background: var(--ink); border-radius: 3px; transform: rotate(var(--t)); transition: transform .35s ease }
.re-pan { position: absolute; top: 6px; width: 112px; display: grid; justify-items: center; gap: 2px; transform: translateX(-50%) rotate(calc(var(--t) * -1)); transform-origin: 50% 0; transition: transform .35s ease }
.re-pan.re-seite-a { left: 0 } .re-pan.re-seite-b { left: 100% }
.re-pan::before { content: ''; display: block; width: 92px; height: 18px; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 46px 46px; background: var(--bg) }
.re-pan-g { position: absolute; left: 0; right: 0; top: -14px; text-align: center; font-size: 20px; line-height: 1; letter-spacing: 2px; color: var(--re-s) }
.re-pan.re-seite-a { --re-s: var(--re-sa) } .re-pan.re-seite-b { --re-s: var(--re-sb) }
.re-pan-t { font-size: 13px; font-weight: 800; text-align: center; color: var(--re-s) }
@media (prefers-reduced-motion: reduce) { .re-beam, .re-pan { transition: none } }
.ix .re-waage-out p, .ix .re-az-o p { margin: 0 }
/* RE-02 Regelpaket */
.re-rg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start }
@media (max-width: 640px) { .re-rg-grid { grid-template-columns: 1fr } }
.re-rg-list { display: grid; gap: 6px }
.re-rg-b { display: flex; align-items: center; gap: 10px; min-height: 48px; width: 100%; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 6px 12px; font: inherit; font-weight: 700; text-align: left; cursor: pointer }
.re-rg-sw { flex: none; width: 40px; height: 24px; border-radius: 12px; border: 2px solid var(--ink); position: relative; box-sizing: border-box; background: var(--bg) }
.re-rg-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform .2s ease }
.re-rg-b[aria-pressed="true"] { background: var(--panel) }
.re-rg-b[aria-pressed="true"] .re-rg-sw { background: var(--ink) }
.re-rg-b[aria-pressed="true"] .re-rg-sw::after { transform: translateX(16px); background: var(--bg) }
@media (prefers-reduced-motion: reduce) { .re-rg-sw::after { transition: none } }
.re-gs { background: #14213D; color: #F5F7FA; border-radius: 14px; padding: 14px; display: grid; gap: 8px; font-size: 15px; min-width: 0 }
.re-gs-kopf { margin: 0; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #B9C3D6 }
.re-gs-pack { display: grid; place-items: center; height: 64px; border-radius: 10px; background: linear-gradient(135deg, #C9A227, #F2D46B); color: #14213D; font-size: 20px }
.re-gs-druck { color: #FFB4A9; font-weight: 800 } .re-gs-druck.re-gs-ruhig { color: #B9C3D6 }
.re-gs-preis { font-weight: 800; font-size: 17px }
.re-gs-chance, .re-gs-limit { color: #DCE3EE }
.re-gs-btn { display: block; text-align: center; border-radius: 10px; padding: 10px; background: #F2D46B; color: #14213D; font-weight: 900 }
.re-gs .fest > * { display: block }
/* RE-03 Fälle */
.re-fa-grid { display: grid; gap: 10px }
.re-fa-c { border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; background: var(--bg) }
@media (max-width: 640px) { .re-fa-c { grid-template-columns: 1fr } }
.re-fa-l { display: grid; gap: 8px; min-width: 0 }
.re-fa-c.re-fa-on { border-color: var(--ink) }
.re-fa-c p { margin: 0 }
.re-fa-n { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted) }
.re-fa-t { font-size: 17px }
.re-fa-bs { display: grid; gap: 6px }
.re-fa-b { text-align: left }
.re-fa-o { display: grid; gap: 6px; font-size: 15px }
.re-fa-heute { border-top: 1px solid var(--line); padding-top: 6px; color: var(--muted) }
.re-fa-heute b { color: var(--ink) }
/* RE-04 Reparaturrechner */
.re-rep-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start }
@media (max-width: 640px) { .re-rep-grid { grid-template-columns: 1fr } }
.re-rep-ctl { display: grid; gap: 8px }
.re-rep-view { display: grid; gap: 10px; align-content: start }
.re-rep-du { font-size: 26px; font-weight: 900 }
.re-rep-bar { display: flex; height: 44px; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; background: var(--bg) }
.re-rep-s { display: block; height: 100%; transition: width .3s ease; min-width: 0 }
.re-rep-s-du, .re-lg-du { background: var(--ink) }
.re-rep-s-bo, .re-lg-bo { background: var(--re-sa) } .re-rep-s-bo.re-rep-her, .re-lg-bo.re-rep-her { background: var(--re-sb) }
.re-rep-s-st, .re-lg-st { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, var(--bg) 2px 6px) }
@media (prefers-reduced-motion: reduce) { .re-rep-s { transition: none } }

/* B3 03.11.2026: Schieber mit Minus/Plus, Vollmacht als Schieber, Verjährung als Schieber, Brötchenkauf zum Ziehen */
.re-zl-tok:focus-visible, .re-zl-reset:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.re-voll .rg-marken span:first-child { transform: none; left: -15px !important }
.re-voll .rg-marken span:last-child { transform: none; left: auto !important; right: -15px }
.re-voll .rg-marken span:first-child::before { left: 13px } .re-voll .rg-marken span:last-child::before { left: auto; right: 13px }
.re-voll-head .re-voll-name { font-size: 18px }
.re-zl-drag { position: relative; min-height: 150px }
.re-zl-drag .re-zl-col { min-height: 150px; box-sizing: border-box }
.re-zl-tok { position: absolute; left: 12px; min-height: 44px; min-width: 44px; border: 0; padding: 6px 16px; font: inherit; font-weight: 800; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transform: translateX(var(--dx, 0px)); transition: left .3s ease; animation: none }
.re-zl-tok.re-zl-br { top: 44px; color: #121417 }
.re-zl-tok.re-zl-g { top: 98px; left: calc(50% + 16px); color: var(--ink) }
.re-zl-tok.re-zl-br.re-zl-j { left: calc(50% + 16px) }
.re-zl-tok.re-zl-g.re-zl-b { left: 12px }
.re-zl-tok.re-zl-hold { cursor: grabbing; transition: none; z-index: 2; box-shadow: 0 6px 16px rgba(0, 0, 0, .22) }
.re-zl-tok[aria-disabled="true"] { cursor: default }
.re-zl-reset { justify-self: start; min-height: 44px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 6px 14px; font: inherit; font-weight: 700; cursor: pointer }
.re-zl-reset[aria-disabled="true"] { border-color: var(--track); color: var(--muted); cursor: default }
@media (prefers-reduced-motion: reduce) { .re-zl-tok { transition: none } }