:root {
  color-scheme: dark;
  --bg: #1f232a;
  --panel: #0f1419;
  --text: #eaeef2;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font-family: system-ui, Segoe UI, Roboto, sans-serif; }

.toolbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; background: var(--panel); position: sticky; top: 0; z-index: 10;
}
.toolbar .spacer { flex: 1; }
.toolbar input[type=range] { width: min(40vw, 520px); }

.stage {
  position: relative;
  height: calc(100dvh - 64px);
  display: grid;
  place-items: center;
  overflow: auto;
}

#mainImage {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  image-rendering: pixelated; /* scharf für Pixelart */
  display: block;
}

/* --- Wplace: Vollbild & keine Scrollleisten --- */
html, body {
  height: 100%;
  overflow: hidden;      /* Scrollleisten aus */
}

.viewer {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#zoomContainer {
  position: absolute;
  inset: 0;              /* top/right/bottom/left: 0 */
  overflow: hidden;      /* Bild bleibt im Container */
  touch-action: none;    /* wichtig für Pointer/Pan/Zoom */
}

/* Grundstil fürs Bild; Feintuning übernimmt JS via transform */
#imgA {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
  cursor: grab;
}
#imgA:active { cursor: grabbing; }
.viewer { padding: 0 !important; }
html, body { height:100%; overflow:hidden; }
.viewer { padding:0 !important; }

/* ===== Timeline: Full width + modern ticks ===== */
.timeline-wrap{
  flex:1 1 600px;
  min-width:360px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.timeline-wrap input[type="range"]{
  width:100%;
}
#tickbar{
  width:100%;
  height:28px;          /* sichtbare Höhe; Canvas wird per JS skaliert */
  display:block;
}
.toolbar, .viewer > header, .viewer-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Controls/Toolbar auf eine Linie, mit Umbruch wenn’s eng wird */
.toolbar, .viewer > header, .viewer-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}