:root {
  --bg:#0a0a0b; --fg:#eaeaf0; --muted:#a0a6ad;
  --panel:#111214; --border:#1f2125;
  --accent:#3b82f6;
}

/* Basis */
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 system-ui,Segoe UI,Roboto,Arial,sans-serif}
img{display:block;border:0;max-width:none}

/* Toolbar */
header{
  position:sticky;top:0;z-index:3;background:var(--panel);
  border-bottom:1px solid var(--border);
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:10px 12px
}
.title{font-weight:600}
.muted{color:var(--muted)}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{
  padding:6px 10px;border:1px solid var(--border);
  background:#14161a;color:var(--fg);border-radius:8px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px
}
.btn:hover{border-color:#30343a}
.btn.primary{border-color:#315aab;background:#0f1a2a}
.note{font-size:12px}

/* Bühne / Scroller */
.wrap{
  height:calc(100vh - 52px);
  overflow:auto;          /* vertikal scrollen */
  overflow-x:hidden;      /* seitliches Abschneiden im 100%-Modus */
  background:#0b0d10;
}

/* 1920px Bühne, mittig; 100%-Modus zeigt Mitte (Cover-Effekt bei <1920px) */
.stage-outer{position:relative;height:max-content}
.stage-inner{
  position:absolute; left:50%; top:0;
  width:1920px;
  transform:translateX(-50%);
  transform-origin: top center;
  will-change: transform;
}

/* Slices: exakt 1920 px breit, ohne Abstände */
.slice{width:1920px;height:auto;margin:0}

/* Hilfehinweis (optional) */
.helper{
  position:fixed; right:10px; bottom:10px; z-index:4;
  background:#111214;border:1px solid var(--border);border-radius:10px;
  padding:6px 10px;color:var(--muted); font-size:12px
}
.kbd{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; padding:2px 6px; border:1px solid var(--border);
  border-radius:6px; background:#0c0d10
}

/* Index-Grid */
.grid{display:grid;gap:14px;padding:16px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
.card{background:#111;border:1px solid #222;border-radius:12px;overflow:hidden}
.card a{color:inherit;text-decoration:none;display:block}
.thumb{aspect-ratio:16/9;background:#0e0e10;display:flex;align-items:center;justify-content:center}
.thumb img{max-width:100%;max-height:100%;display:block}
.meta{padding:10px 12px;border-top:1px solid #222}
h1{margin:0;font-size:16px}
.index-header{position:sticky;top:0;z-index:2;background:#111;box-shadow:0 1px 0 #222;padding:12px 16px}

/* Fenstergrößen-Anzeige */
.win-size {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  user-select: none;
  margin-right: 30px;
}