:root {
  --bg: #FFFFFF;
  --surface: #F6F7F8;
  --surface-2: #EDEFF1;
  --ink: #1C2126;
  --ink-soft: #5A636C;
  --line: #DDE1E5;
  --accent: #C13B4A;
  --accent-ink: #FFFFFF;
  --ins-ink: #1D6B40;
  --ins-bg: #DFF2E5;
  --ins-mark: #B9E4C6;
  --del-ink: #A33036;
  --del-bg: #FBE7E8;
  --del-mark: #F4C6C9;
  --chg-ink: #8A5800;
  --chg-bg: #FBF3DC;
  --chg-mark: #F2DFA9;
  --law-ink: #23282E;
  --link: #1D5FB4;      /* text links: blue — red stays the alarm colour (owner 2026-09-03) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171A;
    --surface: #1C2025;
    --surface-2: #23282E;
    --ink: #E8E6E1;
    --ink-soft: #9AA3AC;
    --line: #2E343B;
    --accent: #D26470;
    --accent-ink: #14171A;
    --ins-ink: #7ECD9A;
    --ins-bg: #16281D;
    --ins-mark: #1F4A2E;
    --del-ink: #E39599;
    --del-bg: #301B1D;
    --del-mark: #57282B;
    --chg-ink: #E5BE6A;
    --chg-bg: #2C2310;
    --chg-mark: #56451D;
    --law-ink: #DCDAD4;
    --link: #7DB2F5;
  }
}
:root[data-theme="dark"] {
  --bg: #14171A;
  --surface: #1C2025;
  --surface-2: #23282E;
  --ink: #E8E6E1;
  --ink-soft: #9AA3AC;
  --line: #2E343B;
  --accent: #D26470;
  --accent-ink: #14171A;
  --ins-ink: #7ECD9A;
  --ins-bg: #16281D;
  --ins-mark: #1F4A2E;
  --del-ink: #E39599;
  --del-bg: #301B1D;
  --del-mark: #57282B;
  --chg-ink: #E5BE6A;
  --chg-bg: #2C2310;
  --chg-mark: #56451D;
  --law-ink: #DCDAD4;
  --link: #7DB2F5;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }

header.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.brandrow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.searchrow { display: flex; align-items: center; gap: 10px; }
.brand {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.lawpick {
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px; font-weight: 400;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 9px; max-width: 70ch;
}
.lawpick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lawpick-wrap { position: relative; display: inline-block; max-width: 70ch; flex: 1; }
.filter-wrap { position: relative; align-self: center; }
.filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 7px; cursor: pointer;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active { color: var(--accent); border-color: var(--accent); }
.filter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.filter-panel[hidden] { display: none; }
.filter-panel {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.filter-panel .filter-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.filter-panel input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.filter-panel .filter-sep { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; }
.lawpick-wrap .lawpick { width: 100%; }
.lawlist {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-width: min(96ch, calc(100vw - 40px));
  max-height: 340px; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.lawlist li {
  padding: 5px 10px; border-radius: 4px; cursor: pointer;
  font-size: 13px; font-weight: 400;
  /* wrap instead of ellipsis: long historical titles (e.g. the 1925 B-VG
     Wiederverlautbarung, ~110 chars) must stay fully readable */
}
.lawlist li.active, .lawlist li:hover { background: var(--surface); color: var(--accent); }
.lawlist li .abk { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-soft); }
.lawlist li.empty { color: var(--ink-soft); font-style: italic; cursor: default; }
.proto {
  font-size: 11px; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 7px; letter-spacing: .05em; text-transform: uppercase;
}
.controls {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  width: 100%;
}
.controls[hidden] { display: none; }  /* author grid would beat the hidden attribute */
.toggle[hidden] { display: none; }
.side-ctl { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.controls select {
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 9px; max-width: 46ch;
}
.controls select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.arrow { color: var(--accent); font-size: 17px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.step-btn {
  font-family: "IBM Plex Mono", monospace; font-size: 15px; line-height: 1;
  color: var(--accent); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 9px; cursor: pointer;
}
.step-btn:hover:not(:disabled) { border-color: var(--accent); }
.step-btn:disabled { color: var(--ink-soft); opacity: .45; cursor: default; }
.step-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bgbl-btn {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 500;
  letter-spacing: .05em; text-decoration: none;
  color: var(--accent); background: var(--surface);
  border: 1px solid var(--accent); border-radius: 4px;
  padding: 6px 9px; line-height: 1;
}
.bgbl-btn:hover { background: var(--accent); color: var(--accent-ink); }
.bgbl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bgbl-btn[aria-disabled="true"] { color: var(--ink-soft); border-color: var(--line); pointer-events: none; }
.toggle { display: flex; align-items: center; gap: 7px; margin-left: auto; font-size: 13px; color: var(--ink-soft); cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--accent); width: 15px; height: 15px; }
.jump {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 6px; max-width: 12ch; margin-right: 6px;
}
.jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.para-block { scroll-margin-top: 130px; }

.law-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 16px 20px 0; }
.law-head .title { font-family: "Source Serif 4", Georgia, serif; font-size: 18px; font-weight: 600; }
.law-head[hidden] { display: none; }
.stats-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px; padding: 14px 20px 0;
}
.stats-row .stats { justify-self: start; }
#viewIcons { justify-self: center; display: inline-flex; gap: 6px; }
#viewIcons[hidden] { display: none; }
.stats-row #viewTools { justify-self: end; }
.stats { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px;
  padding: 3px 10px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.chip.c-chg { color: var(--chg-ink); border-color: var(--chg-ink); background: var(--chg-bg); }
.chip.c-ins { color: var(--ins-ink); border-color: var(--ins-ink); background: var(--ins-bg); }
.chip.c-del { color: var(--del-ink); border-color: var(--del-ink); background: var(--del-bg); }

main { padding: 14px 20px 60px; display: flex; flex-direction: column; gap: 10px; }

.para-block { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--bg); }
.para-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  cursor: default;
}
.para-block.is-collapsed .para-head { border-bottom: none; cursor: pointer; }
.para-head.tog { cursor: pointer; }            /* BGBl-Ansicht: head toggles the collapsed diff */
.para-head.tog .expander { margin-left: auto; }
.frame-line { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 28px 0 -10px; }
header.top .frame-line { margin: 2px 0 -6px; }   /* viewer: sits inside the sticky header above the two Fassung pickers */
header.top .frame-line[hidden] { display: none; }
.para-key { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 14px; }
.badge {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 8px; border-radius: 3px;
}
.badge.b-chg { background: var(--chg-mark); color: var(--chg-ink); }
.badge.b-ins { background: var(--ins-mark); color: var(--ins-ink); }
.badge.b-del { background: var(--del-mark); color: var(--del-ink); }
.badge.b-eq  { background: var(--surface-2); color: var(--ink-soft); font-weight: 500; }
.para-meta { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--ink-soft); }
.expander { background: none; border: none; color: var(--ink-soft); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }
.expander:hover, .para-block.is-collapsed .para-head:hover .expander { color: var(--accent); }
.expander:focus-visible { outline: 2px solid var(--accent); border-radius: 2px; }

.panes { display: grid; grid-template-columns: 1fr 1fr; }
/* aligned row pairs: one row per corresponding Absatz/Ziffer block; the
   shorter cell leaves whitespace so both sides stay in lockstep */
.rowset { }
.prow { display: grid; grid-template-columns: 1fr 1fr; }
.prow .cell { min-width: 0; padding: 0 18px; }
.prow .cell.cellL { background: color-mix(in srgb, var(--del-bg) 18%, var(--bg)); }
.prow .cell.cellR { background: color-mix(in srgb, var(--ins-bg) 18%, var(--bg)); border-left: 1px solid var(--line); }
.rowset .prow:first-child .cell { padding-top: 14px; }
.rowset .prow:last-child .cell { padding-bottom: 18px; }
.pane { padding: 14px 18px 18px; min-width: 0; }
.inlineset { padding: 14px 18px 18px; width: 100%; max-width: 940px; margin: 0 auto; }
/* two width steps (owner 2026-09-01): reading measure (default) or full
   width — then the browser window is the width control. Applies to BOTH
   views: inline measure = 940px, split measure = 2x the RIS column. */
.inlineset.wide { max-width: none; }
.inlineset.wide .lawtext { max-width: none; }
/* Lesemass = exactly 2x the RIS column PLUS chrome, so the text inside
   each pane gets its full 945px and breaks precisely like RIS/gestern:
   2*945 + 4*18px cell padding + 1px divider = 1963 */
/* width: 100% — #out is a flex column, and auto side margins would shrink
   each block to its content (a short § got a narrower box than its
   neighbour; owner 2026-09-04): every block takes the full measure */
#out:not(.wide) .para-block { width: 100%; max-width: 1963px; margin-left: auto; margin-right: auto; }
#out.wide .lawtext { max-width: none; }   /* full width lifts the RIS column cap */
.imeta .pane-meta { display: block; padding: 3px 8px; border-radius: 4px; }
.imeta .im-del { background: var(--del-bg); }
.imeta .im-ins { background: var(--ins-bg); margin-top: 2px; }
.imeta { margin-bottom: 10px; }
.im-del::before { content: "\2212\00a0"; color: var(--del-ink); font-weight: 700; }
.im-ins::before { content: "+\00a0"; color: var(--ins-ink); font-weight: 700; }

.pane-meta {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  color: var(--ink-soft); margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px dashed var(--line);
}
.pane + .pane { border-left: 1px solid var(--line); }
.pane.side-del { background: color-mix(in srgb, var(--del-bg) 18%, var(--bg)); }
.pane.side-ins { background: color-mix(in srgb, var(--ins-bg) 18%, var(--bg)); }
.pane.missing { display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 13px; font-style: italic; }
.single { padding: 14px 18px 18px; }

.lawtext {
  /* canonical law-text typography = RIS website (measured live 2026-08-30):
     Verdana 12.8px justified, 945px column; list content widths result from
     the level margins (945-56=889 / -76=869 / -101=844), symbols hang in the
     left gutter OUTSIDE the measure; vertical rhythm from the RIS document
     stylesheet (pt values). Break-congruence verified word-by-word. */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12.8px; line-height: normal;
  text-align: justify;
  color: var(--law-ink);
  max-width: 945px;
  overflow-wrap: break-word;
}
.lawtext .blk { text-indent: 30.67px; margin: 4pt 0 2pt; }
.lawtext .blk-h { text-align: center; font-weight: 700; text-indent: 0; margin: 4pt 0 0; }
/* gld/text alignment (measured 2026-09-01): the following .blk carries
   4pt top margin. As FIRST child that margin collapses out of the
   parent (split cells: both start at top, offset 0); after a sibling
   (inline: heading precedes) it acts and pushes the text 4pt down.
   So the float matches: 4pt normally, 0 when it is the first child. */
/* horizontal (measured 2026-09-03 at the 945px measure, VKrG 2026 § 1):
   RIS' .GldSymbol carries the paragraph indent ITSELF (text-indent
   30.67px, box 61px) — so the float box must include it, else every
   §-first line gets ~30px too much room and breaks one word later than
   RIS. With the indent the line ends match RIS word for word. */
.lawtext .blk-gld { float: left; font-weight: 700; text-indent: 30.67px; margin: 4pt 4px 0 0; }
.lawtext .blk-gld:first-child { margin-top: 0; }
/* the gld's text block must start on the same line: when the gld is the
 * first child (§-page: no heading above), drop the block's top margin too */
.lawtext .blk-gld:first-child + div.blk { margin-top: 0; }
.lawtext .blk-gld + div.blk { text-indent: 0; }
.lawtext .blk-anm { font-style: italic; }
.lawtext .blk-anm .sym { font-style: normal; }  /* Ziffer bleibt aufrecht */
.lawtext .anm-sym { font-style: italic; }       /* RIS-Redaktionssymbol kursiv */
/* Anm-Symbol-Items: Gruppe hängt links im eigenen Gutter (RIS-Layout);
   fester Einzug statt Listen-Margin, damit die Gruppe Platz hat */
.lawtext .blk-lanm { position: relative; margin-left: 96px; text-indent: 0; }
/* trailer metadata (Anmerkung, Schlagworte): RIS-style bold label + plain lines */
.lawtext .blk-label { font-weight: 700; text-indent: 0; text-align: left; margin-top: 10px; }
.lawtext .blk-meta { text-indent: 0; text-align: left; margin: 1pt 0; }
.ris-link { color: var(--link); text-decoration: none; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.ris-link:hover { text-decoration: underline; }
.ris-link[aria-disabled="true"] { color: var(--ink-soft); pointer-events: none; }
.lawtext [class*="blk-l"], .lawtext [class*="blk-s"] {
  position: relative; text-indent: 0; margin: 1.5pt 0 1pt;
}
.lawtext .blk-l1, .lawtext .blk-s1 { margin-left: 56px; }
.lawtext .blk-l2, .lawtext .blk-s2 { margin-left: 76px; }
.lawtext .blk-l3, .lawtext .blk-s3 { margin-left: 101px; }
.lawtext .blk-l4, .lawtext .blk-s4 { margin-left: 126px; }
.lawtext .blk-l5, .lawtext .blk-s5 { margin-left: 151px; }
.lawtext .blk-l6, .lawtext .blk-s6 { margin-left: 176px; }
.lawtext .blk-l7, .lawtext .blk-s7 { margin-left: 201px; }
.lawtext [class*="blk-s"] { margin-top: 3pt; }
.lawtext .sym { position: absolute; right: calc(100% + 6px); white-space: nowrap; }
.lawtext::after { content: ""; display: block; clear: both; }
ins.d {
  text-decoration: none;
  background: var(--ins-mark); color: var(--ins-ink);
  border-radius: 2px; padding: 0 1px;
}
del.d {
  background: var(--del-mark); color: var(--del-ink);
  border-radius: 2px; padding: 0 1px;
}

.icon-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--bg); cursor: pointer; vertical-align: middle;
}
.icon-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.icon-toggle .ico {
  display: inline-block; width: 15px; height: 15px;
  background-color: var(--ink-soft);
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}
.icon-toggle:hover { border-color: var(--ink-soft); }
.icon-toggle:has(input:checked) { background: var(--ink); border-color: var(--ink); }
.icon-toggle:has(input:checked) .ico { background-color: var(--bg); }
.ico-inline { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.2h12M2 6.2h12M2 9.2h12M2 12.2h7.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.2h12M2 6.2h12M2 9.2h12M2 12.2h7.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* the view toggle shows the view you would switch TO: one-column icon in
   split mode, two-column icon while inline is active */
.icon-toggle:has(input#inlineView:checked) .ico-inline {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.2h5M9 3.2h5M2 6.2h5M9 6.2h5M2 9.2h5M9 9.2h5M2 12.2h3.5M9 12.2h3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.2h5M9 3.2h5M2 6.2h5M9 6.2h5M2 9.2h5M9 9.2h5M2 12.2h3.5M9 12.2h3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ico-wide { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.2 3v10M14.8 3v10M4 8h8M6.5 5.5 4 8l2.5 2.5M9.5 5.5 12 8l-2.5 2.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.2 3v10M14.8 3v10M4 8h8M6.5 5.5 4 8l2.5 2.5M9.5 5.5 12 8l-2.5 2.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

footer {
  padding: 18px 20px 34px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-soft);
  display: flex; gap: 6px; flex-direction: column;
}
@media (max-width: 760px) {
  .panes { grid-template-columns: 1fr; }
  .prow { grid-template-columns: 1fr; }
  .prow .cell.cellR { border-left: none; }
  .controls { grid-template-columns: 1fr; }
  .controls .arrow { text-align: center; }
  .pane + .pane { border-left: none; border-top: 1px solid var(--line); }
  .controls select { max-width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .para-block { transition: border-color .15s; }
}

/* header navigation */
.home-link {
  display: inline-flex; align-items: center; align-self: center;
  color: var(--ink-soft); padding: 4px;
}
.home-link:hover { color: var(--link); }
.home-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }

.nav-link {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .05em;
  color: var(--ink-soft); text-decoration: none; text-transform: uppercase;
}
.nav-link:hover { color: var(--link); }

/* wordmark (owner 2026-09-05): the product name on every page, left of the
 * doors, linking home — serif like the law titles, quiet, never red */
.wordmark { font-family: "Source Serif 4", Georgia, serif; font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: .01em; margin-right: 6px; }
.wordmark:hover { color: var(--link); }
.brandrow { align-items: center; }

/* the three doors in every header (owner 2026-09-04): current door = brand
 * styling (accent), the other two are quiet links in the same voice */
.doors { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; align-self: center; }
.doors .door {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none; line-height: 1;
  padding: 6px 10px; border-radius: 4px; border: 1px solid var(--line);
  color: var(--ink-soft); background: var(--surface);
}
/* the door you are in: filled (owner 2026-09-04: "deutlicher markieren") */
.doors .door.current { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.doors a.door:hover { color: var(--accent); border-color: var(--accent); }
.doors a.door:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* legal footer (Impressum / CC-BY attribution / disclaimer) */
.site-foot {
  display: block;  /* overrides the generic flex-column footer rule above */
  margin: 40px 0 0; padding: 12px 20px 20px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-soft); text-align: center;
}
.site-foot a { color: var(--ink-soft); text-decoration: underline; }
.site-foot a:hover { color: var(--link); }

/* ── Normseite / "Normen lesen" (SSR reading page, docs/NORMSEITE.md) ── */
/* container = RIS measure (945px .lawtext) + padding, so condensed-mode
   line breaks are identical to the diff view / RIS (owner 2026-09-03);
   .wide lifts the cap like the diff view's full-width mode */
/* 945 (text) + 2×18 (frame padding) + 2 (border) + 2×20 (page padding) */
.normpage { max-width: 1023px; margin: 0 auto; padding: 20px 20px 20px; }   /* footer carries its own 40px gap */
.normpage.wide { max-width: none; }
.normpage.wide .lawtext { max-width: none; }
/* frame around the §-text like the diff view's para card (owner 2026-09-03);
   content-box keeps the 945px RIS measure for the TEXT, padding sits outside */
.normpage .lawtext { box-sizing: content-box; border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 18px; background: var(--bg); }
.normpage .wide-toggle {
  width: 26px; height: 22px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--bg); color: var(--ink-soft); font: inherit; font-size: 13px; cursor: pointer; line-height: 1;
}
.normpage .wide-toggle:hover, .normpage.wide .wide-toggle { color: var(--ink); background: var(--surface); }
/* kundgemacht, noch nicht in Kraft — same red+bold signal in both views */
.norm-head .status.future, .pane-meta .future { color: var(--del-ink); font-weight: 700; }
/* nav row: up-link left, the width toggle CENTERED like the diff view's
   view-icon row (owner 2026-09-03), empty third column keeps it centered */
.normpage .crumbs { font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; }
/* width toggle directly above the text frame, centered like the diff view's
   icon row (owner 2026-09-03) */
.normpage .tools { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 0 0 8px; font-size: 13px; }
.normpage .tools-l { justify-self: start; }
.normpage .tools-r { justify-self: end; }
.normpage .tools a { color: var(--link); text-decoration: none; }
.normpage .tools a:hover { text-decoration: underline; }
.normpage .crumbs a { color: var(--link); text-decoration: none; }
.normpage .crumbs a:hover { text-decoration: underline; }
.norm-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 20px; }
.norm-head .rang {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft);
  background: var(--surface-2); border-radius: 4px; padding: 2px 7px;
}
.norm-head h1 { font-size: 26px; margin: 10px 0 6px; color: var(--ink); }
.norm-head .status { font-size: 14px; color: var(--ink); margin: 0 0 8px; font-weight: 500; }
.norm-head .facts { list-style: none; padding: 0; margin: 0 0 10px;
  font-size: 13px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 2px; }
.norm-head .facts .eli code { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; }
.norm .chronik { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 16px; }
.norm .chronik h2 { font-size: 15px; margin: 0 0 10px; color: var(--ink); }
.norm .chronik ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.norm .chronik a { color: var(--link); text-decoration: none; font-size: 13px; }
.norm .chronik a:hover { text-decoration: underline; }
.norm .chronik .fut { color: var(--ink-soft); font-style: italic; }
/* status badge (Owner 2026-09-03): In Kraft = bold green; tritt in Kraft am /
   außer Kraft seit = bold red. Table dates in the future carry .future too. */
.norm-head .status.live { color: var(--ins-ink); font-weight: 700; }
.norm-head .status.past { color: var(--del-ink); font-weight: 700; }
/* RIS layout: the two dates side by side, label / date / Kundmachung */
.norm-head .dates { display: flex; gap: 48px; flex-wrap: wrap; margin: 8px 0 12px; font-size: 13px; }
.norm-head .date { display: flex; flex-direction: column; gap: 2px; }
.norm-head .date dt { font-weight: 600; color: var(--ink-soft); }
.norm-head .date dd { margin: 0; color: var(--ink); }
.norm-head .date dd.act { color: var(--ink-soft); }
.norm-head .date .future { color: var(--del-ink); font-weight: 700; }
.norm-head .date a { color: var(--link); text-decoration: none; }
.norm-head .date a:hover { text-decoration: underline; }
.side-ctl .ris-link { white-space: nowrap; }   /* "RIS ↗" / "PDF (RIS) ↗" never wrap beside the select */

/* ── Gesetzes-Seite (Law Viewer, elementar): Suche + §-Liste ── */
.lawpage .search { display: flex; gap: 8px; margin: 14px 0 18px; }
.lawpage .search input { flex: 1; font: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--ink); }
.lawpage .search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lawpage .search button { font: inherit; font-size: 13px; padding: 7px 12px; border: 1px solid var(--accent);
  border-radius: 5px; background: var(--surface); color: var(--accent); cursor: pointer; }
.lawpage .search button:hover { background: var(--accent); color: var(--accent-ink); }
.lawpage .hits { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lawpage .hits li { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font-size: 13.5px; }
.lawpage .hits .unit { font-weight: 600; margin-right: 8px; color: var(--link); text-decoration: none; }
.lawpage .hits mark { background: var(--chg-mark); color: var(--chg-ink); border-radius: 2px; padding: 0 1px; }
.lawpage .hits .none { color: var(--ink-soft); font-style: italic; border: none; padding: 0; }
.lawpage .toc { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 28px; }
@media (max-width: 720px) { .lawpage .toc { columns: 1; } }
.lawpage .toc li { break-inside: avoid; padding: 3px 0; font-size: 13.5px; }
.lawpage .toc .unit { font-weight: 600; margin-right: 6px; white-space: nowrap; }
.lawpage .toc a { color: var(--ink); text-decoration: none; }
.lawpage .toc a:hover .unit, .lawpage .toc a:hover { color: var(--link); }
.lawpage .toc .head { color: var(--ink-soft); }
.lawpage .stand { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; }

/* RIS-style identifier trailer (Gesetzesnummer / Dokumentnummer / ELI) */
.norm .ids { margin: 28px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; font-size: 12px; color: var(--ink-soft); }
.norm .ids dt { font-weight: 600; }
.norm .ids dd { margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; }
.norm .ids a { color: var(--ink-soft); text-decoration: underline; }
.norm .ids a:hover { color: var(--link); }

/* §-Seite: Fassungen-Chronik (Stufen mit Kundmachung, lesen/Diff, gezeigte Stufe markiert) */
.norm .chronik li { font-size: 13px; color: var(--ink); }
.norm .chronik li.shown { font-weight: 600; }
.norm .chronik .when { font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.norm .chronik .when.future { color: var(--del-ink); font-weight: 700; }
.norm .chronik .here { color: var(--ins-ink); font-weight: 600; margin-left: 6px; }
.norm .chronik .acts { margin-left: 8px; color: var(--ink-soft); }
.norm .chronik .acts a { font-size: 13px; }
.norm-head .status .to-current { font-size: 13px; font-weight: 500; color: var(--link); text-decoration: none; margin-left: 10px; }
.norm-head .status .to-current:hover { text-decoration: underline; }

/* §-Seite: vor/zurück + Direktsprung in der Werkzeugzeile */
.normpage .tools-r { display: inline-flex; align-items: center; gap: 8px; }
.normpage .tools-r .pn { text-decoration: none; white-space: nowrap; }   /* .step-btn look (diff stepper) */
.normpage .tools-r .pn[aria-disabled="true"] { color: var(--ink-soft); opacity: .45; pointer-events: none; }
.normpage .tools-r .jump { margin: 0; max-width: 14ch; }

/* Kopf-Wähler: Fassungs-Dropdown + Datumsfeld (beide Lese-Ebenen) */
.norm-head .fsel { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin: 4px 0 10px; font-size: 13px; color: var(--ink-soft); }
.norm-head .fsel label { display: inline-flex; align-items: center; gap: 8px; }
.norm-head .fsel .standform { display: inline-flex; align-items: center; gap: 8px; }
.norm-head .fsel .standform .step-btn { font-family: inherit; font-size: 12px; padding: 4px 8px; }
.norm-head .fsel .pform { display: inline-flex; align-items: center; gap: 8px; }
.norm-head .fsel .pform .step-btn { font-family: inherit; font-size: 12px; padding: 4px 8px; }
.norm-head .fsel .pform input[type="text"] { font: inherit; font-size: 12.5px; padding: 4px 6px; width: 9ch; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); }
.norm-head .fsel .pform input[type="text"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.norm.lawpage .notice { margin: 8px 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-soft); font-size: 13.5px; }
.norm-head .fsel .jump.wide { max-width: 44ch; }
.norm-head .fsel option.future { color: var(--del-ink); }
.norm-head .fsel input[type="date"] { font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); }
.norm-head .fsel input[type="date"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.norm-head .stand .stichtag { font-weight: 600; color: var(--ink); }