/* Textschleuse – app.css
   Tokens oben (hell, dunkel, Platzhalterklassen), danach Komponenten.
   Keine externen Ressourcen, nur Systemschriften. */

:root{
  color-scheme:light;
  --bg:#f2f2f3; --surface:#e9e9ea; --raised:#fbfbfc; --text:#1d1f20; --muted:#55575b; --faint:#75777b;
  --line:rgb(29 31 32 / .16); --line-soft:rgb(29 31 32 / .08); --hover:rgb(29 31 32 / .045); --press:rgb(29 31 32 / .11);
  --accent:#5980a6; --accent-hover:#4d7398; --accent-press:#416180; --accent-text:#3d5d7c; --accent-wash:#e1ecf7; --on-accent:#fff;
  --danger:#b42318; --danger-text:#98190f; --danger-wash:#fbe9e6; --on-danger:#fff;
  --warn:#a86b00; --warn-text:#6e4700; --warn-wash:#faefd6;
  --ok:#2f7047; --ok-text:#215234; --ok-wash:#e2f0e6;
  --corner:rgb(29 31 32 / .5);
  --shadow-pop:0 12px 32px rgb(43 43 45 / .22);
  /* Klassenfarben: L/C fest, Farbton pro Klasse (siehe [data-c]) */
  --mk-l:.93; --mk-c:.05; --me-l:.56; --me-c:.15; --mt-l:.42; --mt-c:.13;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:"Barlow Condensed","Roboto Condensed","Arial Narrow","Helvetica Neue",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --fs-xs:11px; --fs-s:13px; --fs-m:15px; --fs-l:19px; --fs-xl:28px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --aside:316px; --top:53px; --gutter:46px;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#16181a; --surface:#1f2225; --raised:#1b1e20; --text:#e4e6e8; --muted:#a9adb2; --faint:#868b91;
  --line:rgb(228 230 232 / .17); --line-soft:rgb(228 230 232 / .08); --hover:rgb(228 230 232 / .05); --press:rgb(228 230 232 / .12);
  --accent:#8fb0d0; --accent-hover:#a5c1dc; --accent-press:#b9cfe5; --accent-text:#a9c4df; --accent-wash:#1f2c39; --on-accent:#0f1418;
  --danger:#f07b6e; --danger-text:#f7a59b; --danger-wash:#3b1f1c; --on-danger:#1d0c0a;
  --warn:#e0b252; --warn-text:#eccb84; --warn-wash:#33290f;
  --ok:#7cc493; --ok-text:#a3d8b3; --ok-wash:#17291e;
  --corner:rgb(228 230 232 / .45);
  --shadow-pop:0 16px 40px rgb(0 0 0 / .55);
  --mk-l:.35; --mk-c:.065; --me-l:.73; --me-c:.13; --mt-l:.85; --mt-c:.09;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#16181a; --surface:#1f2225; --raised:#1b1e20; --text:#e4e6e8; --muted:#a9adb2; --faint:#868b91;
    --line:rgb(228 230 232 / .17); --line-soft:rgb(228 230 232 / .08); --hover:rgb(228 230 232 / .05); --press:rgb(228 230 232 / .12);
    --accent:#8fb0d0; --accent-hover:#a5c1dc; --accent-press:#b9cfe5; --accent-text:#a9c4df; --accent-wash:#1f2c39; --on-accent:#0f1418;
    --danger:#f07b6e; --danger-text:#f7a59b; --danger-wash:#3b1f1c; --on-danger:#1d0c0a;
    --warn:#e0b252; --warn-text:#eccb84; --warn-wash:#33290f;
    --ok:#7cc493; --ok-text:#a3d8b3; --ok-wash:#17291e;
    --corner:rgb(228 230 232 / .45);
    --shadow-pop:0 16px 40px rgb(0 0 0 / .55);
    --mk-l:.35; --mk-c:.065; --me-l:.73; --me-c:.13; --mt-l:.85; --mt-c:.09;
  }
}

/* Platzhalterklassen: Farbton (--h) + Kantenstil (--es) als zweites, farbunabhängiges Merkmal */
[data-c]{
  --h:250; --cm:1; --es:solid; --ew:2px;
  --k-bg:oklch(var(--mk-l) calc(var(--mk-c) * var(--cm)) var(--h));
  --k-edge:oklch(var(--me-l) calc(var(--me-c) * var(--cm)) var(--h));
  --k-ink:oklch(var(--mt-l) calc(var(--mt-c) * var(--cm)) var(--h));
}
[data-c="PERSON"]{--h:305} [data-c="FIRMA"]{--h:255} [data-c="ORT"]{--h:150} [data-c="ADRESSE"]{--h:172}
[data-c="TELEFON"]{--h:195} [data-c="E-MAIL"]{--h:215} [data-c="DATUM"]{--h:235} [data-c="NUMMER"]{--h:278}
[data-c="SENSIBEL"]{--h:340} [data-c="PRÜFEN"]{--h:28} [data-c="KENNZEICHEN"]{--h:52} [data-c="IBAN"]{--h:72}
[data-c="STEUER-ID"]{--h:95} [data-c="REGISTER"]{--h:115} [data-c="BETRAG"]{--h:133} [data-c="SONSTIGES"]{--cm:0}
[data-c="ORT"],[data-c="ADRESSE"],[data-c="E-MAIL"],[data-c="TELEFON"]{--es:dashed}
[data-c="IBAN"],[data-c="STEUER-ID"],[data-c="REGISTER"],[data-c="KENNZEICHEN"],[data-c="NUMMER"],[data-c="DATUM"],[data-c="BETRAG"]{--es:dotted}
[data-c="SONSTIGES"],[data-c="PRÜFEN"]{--es:double; --ew:3px}

/* Basis */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-m)/1.55 var(--font-ui);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-head);font-weight:600;font-stretch:condensed;letter-spacing:-.01em;line-height:1.12;margin:0}
p{margin:0}
a{color:var(--accent-text);text-underline-offset:3px} a:hover{color:var(--accent-press)}
button,input,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--accent) 32%,transparent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
kbd{font:600 10.5px/1 var(--font-mono);padding:2px 5px;border:1px solid var(--line);border-bottom-width:2px;background:var(--raised);color:var(--text)}
.spacer{flex:1}
.muted{color:var(--muted)}

/* Blaupausen-Rahmen mit Registermarken */
.bp{position:relative;border:1px solid var(--line)}
.bp::after,.marks::after{content:"";position:absolute;inset:-6px;pointer-events:none;background-repeat:no-repeat;
  background-image:linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner));
  background-size:1px 11px,11px 1px,1px 11px,11px 1px,1px 11px,11px 1px,1px 11px,11px 1px;
  background-position:5px 0,0 5px,calc(100% - 5px) 0,100% 5px,5px 100%,0 calc(100% - 5px),calc(100% - 5px) 100%,100% calc(100% - 5px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 14px;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--text);font-family:var(--font-head);font-stretch:condensed;font-weight:600;font-size:15px;letter-spacing:.01em;line-height:1.1;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--hover)}
.btn:active{background:var(--press)}
.btn:disabled{opacity:.45;cursor:not-allowed;background:transparent}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-primary:active{background:var(--accent-press);border-color:var(--accent-press)}
.btn-primary:disabled{background:var(--accent)}
.btn-ghost{border-color:transparent;color:var(--accent-text)}
.btn-ghost:hover{background:color-mix(in srgb,var(--accent) 11%,transparent)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:var(--on-danger)}
.btn-danger:hover{filter:brightness(.93)}
.btn-s{min-height:28px;padding:3px 10px;font-size:14px}
.btn-lg{min-height:42px;padding:8px 26px;font-size:17px}

/* Kopfzeile */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--s4);min-height:var(--top);padding:8px var(--s5);background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-stretch:condensed;font-weight:600;font-size:19px;white-space:nowrap}
.brand-mark{width:15px;height:15px;border:1.5px solid var(--text);position:relative;flex:none}
.brand-mark::after{content:"";position:absolute;inset:3px;background:var(--accent)}
.tag{display:inline-flex;align-items:center;padding:2px 8px;font:500 var(--fs-xs)/1.4 var(--font-ui);letter-spacing:.04em;background:var(--accent-wash);color:var(--accent-text)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--line);font:600 12px/1.3 var(--font-ui);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill::before{font-family:var(--font-mono);font-weight:700}
.pill[data-status="processed"]{border-color:var(--ok);color:var(--ok-text)} .pill[data-status="processed"]::before{content:"✓"}
.pill[data-status="needs_review"]{border-color:var(--warn);color:var(--warn-text)} .pill[data-status="needs_review"]::before{content:"!"}
.pill[data-status="blocked"]{border-color:var(--danger);color:var(--danger-text)} .pill[data-status="blocked"]::before{content:"×"}
.top-actions{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.export-hint{font-size:var(--fs-s);color:var(--muted);margin-right:var(--s2)}
.nav{display:flex;gap:2px}
.nav [aria-current="page"]{color:var(--text);box-shadow:inset 0 -2px var(--accent)}
.demo{padding:8px var(--s5);border-bottom:1px solid var(--warn);background:var(--warn-wash);color:var(--warn-text);font-size:var(--fs-s);text-wrap:pretty}
.demo b{font-weight:650}

/* Eingabe */
.v-input{max-width:960px;margin:0 auto;padding:var(--s7) var(--s5);display:flex;flex-direction:column;gap:var(--s5)}
.in-head h1{font-size:var(--fs-xl)}
.lede{margin-top:var(--s2);color:var(--muted);max-width:64ch;text-wrap:pretty}
.drop textarea{display:block;width:100%;min-height:max(320px,48vh);resize:vertical;padding:var(--s4) var(--s5);border:0;border-radius:0;background:var(--raised);font:400 15px/1.65 var(--font-ui);color:var(--text)}
.drop textarea::placeholder{color:var(--faint)}
.drop textarea:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.drop-over{position:absolute;inset:0;display:none;place-items:center;background:color-mix(in srgb,var(--accent-wash) 94%,transparent);border:2px dashed var(--accent);font-family:var(--font-head);font-stretch:condensed;font-weight:600;font-size:22px;color:var(--accent-text);pointer-events:none}
.drop.over .drop-over{display:grid}
.in-bar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.file-btn{position:relative}
.in-sample{cursor:pointer}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.file-btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.in-meta{font-size:var(--fs-s);color:var(--muted);font-variant-numeric:tabular-nums}
.in-notes{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:var(--fs-s);color:var(--muted)}
.in-notes li{display:flex;gap:8px}
.in-notes li::before{content:"+";font-family:var(--font-mono);color:var(--accent-text)}

/* Fehler */
.err{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4);align-items:start;padding:var(--s4) var(--s5);border-color:var(--danger);background:var(--danger-wash)}
.err-code{font:700 13px/1 var(--font-mono);padding:7px 8px;border:1px solid var(--danger);color:var(--danger-text);font-variant-numeric:tabular-nums}
.err h2{font-size:var(--fs-l);color:var(--danger-text)}
.err p{margin-top:4px;font-size:var(--fs-s);max-width:70ch;text-wrap:pretty}
.err-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Laden */
.v-loading{min-height:calc(100dvh - var(--top));display:grid;place-items:center;padding:var(--s5)}
.load{width:min(540px,100%);padding:var(--s6);display:grid;gap:var(--s3)}
.load h1{font-size:26px}
.load-meta{font-size:var(--fs-s);color:var(--muted);font-variant-numeric:tabular-nums}
.load-time{font:500 var(--fs-s)/1.4 var(--font-mono);font-variant-numeric:tabular-nums}
.load .btn{justify-self:start;margin-top:var(--s2)}
.indet{height:4px;background:var(--line-soft);overflow:hidden;position:relative}
.indet span{position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--accent);animation:indet 1.5s ease-in-out infinite}
@keyframes indet{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){.indet span{animation:pulse 2s ease-in-out infinite;width:100%;transform:none}@keyframes pulse{50%{opacity:.35}}}

/* Prüfansicht */
.review{display:flex;flex-direction:column;height:calc(100dvh - var(--top));padding:var(--s4) var(--s5) 0;gap:var(--s4)}
.banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4);padding:var(--s4) var(--s5);align-items:start}
.banner[data-status="processed"]{border-color:var(--ok);background:var(--ok-wash);--st:var(--ok-text)}
.banner[data-status="needs_review"]{border-color:var(--warn);background:var(--warn-wash);--st:var(--warn-text)}
.banner[data-status="blocked"]{border-color:var(--danger);background:var(--danger-wash);--st:var(--danger-text)}
.banner-icon{width:30px;height:30px;display:grid;place-items:center;border:1.5px solid var(--st);color:var(--st);font:700 16px/1 var(--font-mono)}
.banner[data-status="processed"] .banner-icon::before{content:"✓"}
.banner[data-status="needs_review"] .banner-icon::before{content:"!"}
.banner[data-status="blocked"] .banner-icon::before{content:"×"}
.banner h2{font-size:22px;color:var(--st)}
.banner p{margin-top:4px;font-size:var(--fs-s);max-width:84ch;text-wrap:pretty}
.banner b{font-weight:650}
.banner-warn{color:var(--danger-text);font-weight:600}
.banner-side{display:grid;gap:8px;width:290px}
.progress-label{display:flex;justify-content:space-between;font-size:var(--fs-s);font-weight:600;font-variant-numeric:tabular-nums}
.bar{height:8px;border:1px solid var(--line);background:var(--raised)}
.bar span{display:block;height:100%;width:var(--p,0%);background:var(--text);transition:width .25s}
.bar.done span{background:var(--ok)}
.check{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-s);font-weight:600;cursor:pointer}
.check input{width:16px;height:16px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.check:has(input:disabled){opacity:.55;cursor:not-allowed}
.check.small{font-weight:400;font-size:var(--fs-xs);align-items:center}
.check.small input{margin:0;width:14px;height:14px}
.check-hint{font-size:var(--fs-xs);color:var(--muted)}

.work{flex:1;min-height:0;display:grid;grid-template-columns:var(--aside) minmax(0,1fr);gap:var(--s5)}
.side{min-height:0;overflow:auto;padding:0 4px var(--s5) 0;display:flex;flex-direction:column;gap:var(--s3)}
.panel{border-top:1px solid var(--line);padding-top:var(--s1)}
.panel>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:7px 0;font:600 12px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.panel>summary::-webkit-details-marker{display:none}
.panel>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(-45deg);transition:transform .15s}
.panel[open]>summary::before{transform:rotate(45deg)}
.panel>summary:hover{color:var(--text)}
.sum-n{margin-left:auto;font-family:var(--font-mono);letter-spacing:0;text-transform:none;color:var(--text);font-variant-numeric:tabular-nums}

.flist{list-style:none;margin:var(--s1) 0 0;padding:0;display:grid;gap:2px}
.fi{width:100%;display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;text-align:left;padding:8px 10px;border:1px solid transparent;background:transparent;cursor:pointer}
.fi:hover{background:var(--hover)}
.fi.cur{background:var(--accent-wash);border-color:var(--accent)}
.fi-state{width:14px;height:14px;margin-top:3px;border:1.5px solid var(--danger);position:relative}
.fi.seen .fi-state{background:var(--text);border-color:var(--text)}
.fi.seen .fi-state::after{content:"";position:absolute;left:3.5px;top:.5px;width:4px;height:8px;border:solid var(--bg);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.fi-kind{display:flex;gap:8px;align-items:baseline;font-weight:600;font-size:var(--fs-s)}
.fi-pos{margin-left:auto;font:500 var(--fs-xs) var(--font-mono);color:var(--faint);white-space:nowrap}
.fi-snip{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.fi-snip .hit{background:var(--danger-wash);color:var(--text);outline:1px solid var(--danger);padding:0 1px}
.fi-detail{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--faint)}
.keys{margin:var(--s3) 0 0;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:var(--fs-xs);color:var(--muted);align-items:center}
.empty{margin:var(--s1) 0 0;font-size:var(--fs-s);color:var(--muted);text-wrap:pretty}
.panel-hint{font-size:var(--fs-xs);color:var(--muted);margin:2px 0 8px;text-wrap:pretty}

.clist{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.cl{width:100%;display:grid;grid-template-columns:16px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:4px 6px;border:1px solid transparent;background:transparent;cursor:pointer;text-align:left;font-size:var(--fs-s)}
.cl:hover{background:var(--hover)}
.cl[aria-pressed="true"]{border-color:var(--k-edge);background:var(--k-bg)}
.cl:disabled{cursor:default;opacity:.55}
.cl:disabled:hover{background:transparent}
.cl-code{font:600 10px var(--font-mono);color:var(--k-ink)}
.cl-n{font:600 12px var(--font-mono);font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.sw{display:inline-block;width:16px;height:14px;flex:none;background:var(--k-bg);border:1px solid var(--k-edge);border-bottom:var(--ew) var(--es) var(--k-edge)}
.cl-more{margin-top:4px}
.cl-more>summary{cursor:pointer;font-size:var(--fs-xs);color:var(--muted);padding:4px 6px;list-style:none}
.cl-more>summary::-webkit-details-marker{display:none}
.cl-more>summary:hover{color:var(--text)}
.panel-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap}

.dlist{list-style:none;margin:var(--s1) 0 0;padding:0;display:grid}
.dlist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-s)}
.d-label{font-weight:600;display:flex;gap:7px;align-items:center}
.d-snip{display:block;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}

/* Dokument */
.doc{min-height:0;display:flex;flex-direction:column;border:1px solid var(--line);border-bottom:0;background:var(--raised);position:relative}
.doc-bar{display:flex;align-items:center;gap:var(--s3);padding:8px var(--s3);border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--bg)}
.seg{display:inline-flex;border:1px solid var(--line)}
.seg-opt{padding:5px 12px;border:0;background:transparent;font-size:var(--fs-s);cursor:pointer}
.seg-opt+.seg-opt{border-left:1px solid var(--line)}
.seg-opt:hover{background:var(--hover)}
.seg-opt[aria-checked="true"]{background:var(--accent);color:var(--on-accent)}
.seg-opt:disabled{opacity:.45;cursor:not-allowed}
.doc-info{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.stepper{display:flex;gap:6px}
.busy{display:flex;align-items:center;gap:10px;padding:6px var(--s3);font-size:var(--fs-s);border-bottom:1px solid var(--line);background:var(--accent-wash);color:var(--accent-text)}
.busy .indet{width:120px}
.doc.is-busy .rows{opacity:.5;pointer-events:none}
.review.is-busy .side button{pointer-events:none}
.doc-wrap{flex:1;min-height:0;position:relative}
.scroller{position:absolute;inset:0 14px 0 0;overflow:auto;overscroll-behavior:contain}
.scroller:focus-visible{outline-offset:-2px}
.heads{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--raised);border-bottom:1px solid var(--line)}
.heads>div{padding:8px 20px 8px var(--gutter);font:600 12px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
.heads span{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);margin-left:6px}
.heads .h-c{border-left:1px solid var(--line);padding-left:20px}
.rows{position:relative;padding:var(--s3) 0 var(--s7)}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row.gap{margin-top:var(--s3)}
.row>.o,.row>.c{padding:1px 20px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.75}
.row>.o{padding-left:var(--gutter)}
.row>.c{border-left:1px solid var(--line)}
.row:hover>.o,.row:hover>.c{background:var(--hover)}
.n{position:absolute;left:0;top:2px;width:calc(var(--gutter) - 14px);text-align:right;font:500 10.5px/1.75 var(--font-mono);color:var(--faint);user-select:none}
.doc[data-view="orig"] .row,.doc[data-view="orig"] .heads,.doc[data-view="clean"] .row,.doc[data-view="clean"] .heads{grid-template-columns:minmax(0,1fr)}
.doc[data-view="orig"] .c,.doc[data-view="orig"] .h-c,.doc[data-view="clean"] .o,.doc[data-view="clean"] .h-o{display:none}
.doc[data-view="orig"] .o,.doc[data-view="clean"] .c{max-width:calc(80ch + var(--gutter))}
.doc[data-view="clean"] .c,.doc[data-view="clean"] .h-c{border-left:0;padding-left:var(--gutter)}
.doc[data-view="both"] .c{user-select:none}
.doc.unaligned .c,.doc.unaligned .h-c{display:none}
.doc.unaligned[data-view="clean"] .rows{display:none}
.alone{margin:0;padding:var(--s3) 20px var(--s7) var(--gutter);white-space:pre-wrap;font:inherit;font-size:15px;line-height:1.75;max-width:calc(80ch + var(--gutter))}

/* Markierungen */
mark.m{background:var(--k-bg);color:inherit;border-bottom:var(--ew) var(--es) var(--k-edge);padding:0 2px;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.m::after{content:attr(data-k);margin-left:3px;font:700 8.5px/1 var(--font-mono);letter-spacing:.03em;color:var(--k-ink);vertical-align:2px;user-select:none}
.no-codes mark.m::after{display:none}
.ph{font:500 .86em/1 var(--font-mono);background:var(--k-bg);border-bottom:var(--ew) var(--es) var(--k-edge);padding:2px 3px;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.m:hover,.ph:hover{outline:1px solid var(--k-edge);outline-offset:1px}
mark.m.f,.ph.f{outline:2px solid var(--danger);outline-offset:1px}
mark.m.f::before,.fnd::before,.ph.amb::before{content:"!";display:inline-block;margin-right:3px;padding:0 3px;background:var(--danger);color:var(--on-danger);font:700 9px/13px var(--font-mono);vertical-align:1px;user-select:none}
.ph.amb::before{content:"?"}
mark.m.amb,.ph.amb{background:repeating-linear-gradient(135deg,var(--k-bg) 0 5px,var(--danger-wash) 5px 10px)}
.ph.amb{outline:2px solid var(--danger);outline-offset:0;color:var(--danger-text);font-weight:700}
.fnd,.fnd-c{background:var(--danger-wash);border-bottom:2px dashed var(--danger);cursor:pointer}
.fnd-c{cursor:default}
.cur{outline:3px solid var(--danger)!important;outline-offset:2px}
.lk{outline:2px solid var(--accent)!important;outline-offset:1px}
.flash{animation:flash 1.5s ease-out}
@keyframes flash{0%,35%{box-shadow:0 0 0 7px color-mix(in srgb,var(--danger) 40%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.flash{animation:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 40%,transparent)}}
.doc.filtering mark.m:not(.on),.doc.filtering .ph:not(.on){background:transparent;border-bottom-color:var(--line)}
.doc.filtering mark.m:not(.on)::after{opacity:.4}
.doc.filtering mark.m.on,.doc.filtering .ph.on{outline:2px solid var(--k-edge);outline-offset:1px}
.row.rf>.o,.row.rf>.c{background:repeating-linear-gradient(135deg,transparent 0 8px,var(--danger-wash) 8px 16px)}
.row.rf>.o::before{content:attr(data-label);float:right;margin:4px 0 4px 10px;padding:1px 6px;border:1px solid var(--danger);background:var(--raised);color:var(--danger-text);font:600 10.5px/1.5 var(--font-ui);user-select:none}
.row.cur{outline-offset:-3px!important}

/* Übersichtsleiste */
.rail{position:absolute;top:0;right:0;bottom:0;width:14px;border-left:1px solid var(--line);background:var(--bg);cursor:pointer}
.rail-vp{position:absolute;left:0;right:0;background:var(--press);border-block:1px solid var(--line);pointer-events:none}
.tk{position:absolute;height:3px;margin-top:-1px;pointer-events:none}
.tk-m{left:7px;right:1px;background:var(--k-edge)}
.tk-f{left:1px;right:6px;height:4px;background:var(--danger)}
.tk-f.seen{background:transparent;border:1px solid var(--danger)}
.tk-f.cur{left:0;right:0;height:5px;outline:1px solid var(--text)}

/* Popover */
.pop{position:fixed;z-index:50;top:0;left:0;width:min(390px,calc(100vw - 16px));padding:var(--s4);background:var(--raised);border:1px solid var(--line);box-shadow:var(--shadow-pop);display:grid;gap:var(--s3)}
.pop-head{display:flex;align-items:center;gap:8px}
.pop-head strong{font-family:var(--font-head);font-stretch:condensed;font-weight:600;font-size:19px}
.pop-head code{font:600 10.5px var(--font-mono);padding:1px 5px;border:1px solid var(--line);color:var(--k-ink,var(--muted))}
.pop-x{margin-left:auto;width:30px;height:30px;border:0;background:transparent;cursor:pointer;font-size:19px;line-height:1;color:var(--muted)}
.pop-x:hover{background:var(--hover);color:var(--text)}
.pop-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;margin:0;font-size:var(--fs-s)}
.pop-dl dt{color:var(--muted)}
.pop-dl dd{margin:0;overflow-wrap:anywhere}
.pop-quote{font-size:var(--fs-s);padding:8px 10px;background:var(--surface);overflow-wrap:anywhere;max-height:6.6em;overflow:auto}
.note{font-size:var(--fs-s);padding:8px 10px;border:1px solid var(--danger);background:var(--danger-wash)}
.note b{display:block;color:var(--danger-text)}
.pop-label{font-size:12px;color:var(--muted)}
.choice{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line)}
.ch{position:relative;display:grid;justify-items:center;gap:5px;padding:9px 4px 7px;font-size:12.5px;cursor:pointer;text-align:center}
.ch+.ch{border-left:1px solid var(--line)}
.ch input{position:absolute;opacity:0;width:0;height:0}
.ch:hover{background:var(--hover)}
.ch:has(input:checked){background:var(--k-bg);outline:2px solid var(--k-edge);outline-offset:-2px;font-weight:600}
.ch:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.ch kbd{font-size:9px;padding:1px 4px}
.pop-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pop-foot{font-size:var(--fs-xs);color:var(--muted);text-wrap:pretty}
.pop.sheet{left:0!important;right:0;bottom:0;top:auto!important;width:100%;max-height:75dvh;overflow:auto;border-width:1px 0 0}
.pop.sheet::after{display:none}

/* Dialog, Meldung */
.dlg{position:fixed;padding:var(--s5);border:1px solid var(--line);background:var(--raised);color:var(--text);width:min(440px,calc(100vw - 32px));box-shadow:var(--shadow-pop);overflow:visible}
.dlg::backdrop{background:rgb(20 22 24 / .5)}
.dlg h2{font-size:23px}
.dlg p{margin-top:8px;font-size:var(--fs-s);text-wrap:pretty}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:var(--s5)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;padding:10px 16px;background:var(--text);color:var(--bg);font-size:var(--fs-s);max-width:min(560px,calc(100vw - 32px));box-shadow:var(--shadow-pop)}
.toast.err{background:var(--danger);color:var(--on-danger)}

/* Schmal */
@media (max-width:999px){
  .review{height:auto;padding:var(--s3);gap:var(--s3)}
  .banner{grid-template-columns:auto minmax(0,1fr);padding:var(--s3) var(--s4)}
  .banner-side{grid-column:1/-1;width:auto}
  .work{display:flex;flex-direction:column;gap:var(--s3)}
  .side{overflow:visible;padding:0}
  .doc{height:80dvh;border-bottom:1px solid var(--line)}
  .seg-opt[data-view="both"]{display:none}
  .top{flex-wrap:wrap;padding:8px var(--s3);gap:var(--s2) var(--s3)}
  .top-actions{flex-basis:100%;margin-left:0;flex-wrap:wrap}
  .export-hint{flex-basis:100%;margin:0}
  .demo{padding:8px var(--s3)}
}
@media (max-width:640px){
  :root{--gutter:34px}
  .v-input{padding:var(--s5) var(--s3);gap:var(--s4)}
  .in-head h1{font-size:24px}
  .brand .tag{display:none}
  .top-actions .btn{flex:1}
  .err{grid-template-columns:1fr;padding:var(--s3) var(--s4)}
  .row>.o,.row>.c{padding-right:12px;font-size:15px}
  .doc-info{display:none}
  .stepper{margin-left:auto}
  .load{padding:var(--s5)}
}