:root{
  --bg:#0d0f12; --panel:#161a1f; --line:#242a31; --fg:#e8eaed; --dim:#9aa0a6;
  --accent:#4c8dff; --warn:#ffb020; --ok:#3fbf7f; --danger:#ff5f56;
  --r:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%}
h1,h2,h3{letter-spacing:-.01em;margin:0 0 .5rem}
h1{font-size:1.4rem} h2{font-size:1.1rem} h3{font-size:.95rem}
a{color:var(--accent)}
button,.btn{font:inherit;background:var(--panel);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--r);padding:.5rem .9rem;
  cursor:pointer;min-height:44px}
button:hover{border-color:#3a424c}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.ghost{background:transparent}
button.danger{color:var(--danger)}
input,select,textarea{font:inherit;background:#0f1216;color:var(--fg);
  border:1px solid var(--line);border-radius:var(--r);padding:.6rem .7rem;width:100%;
  min-height:44px}
textarea{min-height:88px;resize:vertical}
label{display:block;color:var(--dim);font-size:.82rem;margin:.7rem 0 .25rem}
.wrap{max-width:52rem;margin:0 auto;padding:1rem}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem;margin:.6rem 0}
.dim{color:var(--dim)} .small{font-size:.85rem}
.pill{font-size:.75rem;border:1px solid var(--line);border-radius:999px;
  padding:.1rem .55rem;color:var(--dim)}
.pill.text{color:var(--accent);border-color:var(--accent)}
.pill.remove{color:var(--danger);border-color:var(--danger)}
.pill.change{color:var(--warn);border-color:var(--warn)}
.stage{position:relative;touch-action:none;user-select:none;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#000}
.stage img{display:block;width:100%;height:auto}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.grid{display:grid;gap:.6rem}
.hidden{display:none!important}
.err{color:var(--danger);min-height:1.4em}
.center{min-height:100dvh;display:grid;place-items:center}
.narrow{width:min(24rem,92vw)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
td,th{text-align:left;padding:.35rem .5rem;border-bottom:1px solid var(--line);
  vertical-align:top}
code{background:#0f1216;padding:.1em .4em;border-radius:4px;font-size:.88em}
.diff-old{color:var(--dim);text-decoration:line-through}
.diff-new{color:var(--ok)}
@media (max-width:520px){.wrap{padding:.7rem}}

/* ---------------------------------------------------------- Vergleich */
.cmpwrap{display:grid;gap:.25rem}
.cmp-head{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.cmpwrap[data-mode="slider"] .cmp-head-b{text-align:right}
.cmp{position:relative;display:grid;gap:.5rem;touch-action:pan-y}
.cmpwrap[data-mode="split"] .cmp{grid-template-columns:1fr 1fr}
.cmpwrap[data-mode="slider"] .cmp{grid-template-columns:1fr}
.cmp-pane{position:relative;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:#000;min-height:2rem}
.cmpwrap[data-mode="slider"] .cmp-pane{grid-area:1/1}
.cmp canvas{display:block;width:100%;height:auto;
  /* Der Screen bleibt klein — die Änderungsliste ist der Inhalt. */
  max-height:min(46vh,380px);object-fit:contain;object-position:top}
.cmp-handle{position:absolute;top:0;bottom:0;width:44px;margin-left:-22px;z-index:3;
  cursor:ew-resize;display:grid;place-items:center;touch-action:none}
.cmp-handle i{display:block;width:2px;height:100%;background:#fff;opacity:.85;
  box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.cmp-handle::after{content:"";position:absolute;width:30px;height:30px;border-radius:50%;
  background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.6)}

/* Screen links, Änderungen rechts — sobald Platz da ist. */
.screen-row{display:grid;gap:1rem}
@media (min-width:1080px){
  .screen-row{grid-template-columns:minmax(0,1.25fr) minmax(19rem,1fr);align-items:start}
}
.changes{display:grid;gap:.5rem;align-content:start}
.change{padding:.5rem .7rem;border-left:3px solid var(--line);background:#12161b;
  border-radius:0 8px 8px 0}
.change .old{color:var(--dim);text-decoration:line-through;font-size:.88rem}
.change .new{color:var(--ok)}
.wrap.wide{max-width:76rem}

/* ------------------------------------------------ Screen-Übersicht */
/* Vorschaubilder, keine Ausstellungsstücke: in der Projektansicht sucht man
   einen Screen, man betrachtet ihn nicht. Gross wird er erst beim Markieren. */
#screen-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media (min-width:700px){#screen-list{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
.thumb{padding:.4rem;margin:0;cursor:pointer;transition:border-color .12s}
.thumb:hover{border-color:#3a424c}
.thumb-img{position:relative;border-radius:6px;overflow:hidden;background:#000;
  aspect-ratio:9/16}
.thumb-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.thumb-foot{display:flex;justify-content:space-between;align-items:center;
  gap:.3rem;margin-top:.35rem;font-size:.75rem;color:var(--dim)}
.thumb-count{border:1px solid var(--line);border-radius:999px;padding:0 .4rem;
  white-space:nowrap}
.thumb-count.has{color:var(--accent);border-color:var(--accent)}

/* Zeichenflaeche: hoch genug zum Treffen, aber sie muss auf den Schirm passen.
   Ein Hochkant-Screenshot ueber die volle Desktopbreite bedeutet nur Scrollen. */
#stage{max-width:min(100%,440px);margin-inline:auto}
#stage img{max-height:78vh;width:auto;margin-inline:auto}

/* ---------------------------------------- Detailansicht: Original / Ergebnis */
.detail-row{display:grid;gap:1rem;margin:.6rem 0}
@media (min-width:860px){.detail-row{grid-template-columns:1fr 1fr;align-items:start}}
.pane-label{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.25rem}
.after-stage{max-width:min(100%,440px);margin-inline:auto}
.after-stage canvas{position:static;display:block;width:100%;height:auto;
  max-height:78vh;object-fit:contain}
.detail-row .stage{border-radius:var(--r)}