/* ===================================================================
   Farb- und Typo-Tokens
   =================================================================== */
:root {
  --feld:        #EAE9E8;   /* Hintergrund der Flaeche */
  --feld-raster: rgba(255, 255, 255, .07);
  --tinte:       #f4f3ef;
  --tinte-leise: rgba(244, 243, 239, .55);
  --hud:         rgba(12, 20, 33, .72);
  --hud-rand:    rgba(244, 243, 239, .16);

  --form-a: #f2545b;
  --form-b: #ffc145;
  --form-c: #2ec4b6;
  --form-d: #8367c7;
  --form-e: #f4f3ef;
}

/* Heller Modus: gleiche Formen, ruhigeres Feld */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --feld:        #ece8df;
    --feld-raster: rgba(16, 26, 43, .10);
    --tinte:       #101a2b;
    --tinte-leise: rgba(16, 26, 43, .55);
    --hud:         rgba(236, 232, 223, .78);
    --hud-rand:    rgba(16, 26, 43, .18);
    --form-e:      #101a2b;
  }
}

* { box-sizing: border-box; }

/* ===================================================================
   Normales Scrollen wird hier komplett deaktiviert
   =================================================================== */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--feld);
  color: var(--tinte);
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
}

/* ===================================================================
   Der feste Ausschnitt
   =================================================================== */
#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  /* verhindert, dass der Browser das Ziehen als Scroll-Geste deutet */
  touch-action: none;
  background-color: var(--feld);
  background-image: radial-gradient(var(--feld-raster) 1.4px, transparent 1.4px);
  background-size: 44px 44px;
}

#viewport.faesst-an { cursor: grabbing; }

#viewport:focus-visible {
  outline: 2px solid var(--form-b);
  outline-offset: -4px;
}

/* ===================================================================
   Die bewegte Flaeche
   =================================================================== */
#canvas {
  position: absolute;
  top: 0;
  left: 0;
  /* width/height werden in script.js gesetzt */
  will-change: transform;
}

/* ===================================================================
   Formen (jetzt Bilder)
   =================================================================== */
.form {
  position: absolute;
  user-select: none;
  -webkit-user-drag: none;
  object-fit: contain;
}

/* Text in der Mitte der Flaeche */
.marke {
  position: absolute;
  max-width: 30ch;
  line-height: 1.5;
}

.marke h1 {
  margin: 0 0 .6rem;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: #3F3E3F;
}

.marke p {
  margin: 0;
  color: #3F3E3F;
  font-size: 1rem;
}

/* ===================================================================
   HUD
   =================================================================== */
#hud {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  gap: .9rem;
  align-items: center;
  padding: .55rem .8rem;
  border: 1px solid var(--hud-rand);
  border-radius: .6rem;
  background: var(--hud);
  backdrop-filter: blur(8px);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinte-leise);
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}

#hud b {
  color: var(--tinte);
  font-weight: 500;
}

@media (max-width: 480px) {
  #hud span.hinweis { display: none; }
}

/* Lightbox / Overlay für angeklickte Bilder */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 1000;
}

.lightbox-image {
  position: fixed;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  max-width: 40vw;
  max-height: 80vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  border-radius: 6px;
}

.lightbox-info {
  position: fixed;
  left: calc(2rem + 40vw + 1rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  color: var(--tinte);
  background: rgba(0,0,0,0.45);
  padding: 1rem;
  border-radius: 8px;
  max-width: 28vw;
}

.lightbox-info h3 { margin: 0 0 .5rem; font-size: 1.2rem; color: var(--tinte); }
.lightbox-info p { margin: 0; color: var(--tinte-leise); }

@media (max-width: 800px) {
  .lightbox-image { left: 50%; transform: translate(-50%, -50%); max-width: 80vw; }
  .lightbox-info { left: 50%; top: calc(50% + 42vh); transform: translateX(-50%); max-width: 90vw; }
}