/* moritzziegert.de – Layout-System
 *
 * Jede Seite ist ein festes Raster (Desktop 1064 px, Phone 320 px), das per `zoom` auf die
 * Fensterbreite skaliert wird (--k, setzt site.js). Jedes Element trägt Position und Größe als
 * CSS-Variablen:
 *   --x --y --w --h --z --r            Desktop
 *   --px --py --pw --ph --pz --pr      Phone (fallen auf Desktop zurück)
 * Fixierte Elemente rechnen mit --vw/--vh (Fenstermaß im Raster).
 */

:root { --k: 1; --vw: 1064; --vh: 800; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #fff; }
body {
  color: #000;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, video, canvas { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Bühne ---------- */
/* Die Desktop-Seite ist 1024 px breit und sitzt mittig im 1064er-Raster (je 20 px Rand),
   Elemente dürfen über den Rand hinausragen. Phone: 320 px ohne Rand. */
html, body { overflow-x: clip; }
.stage {
  position: relative;
  width: 1024px;
  margin-left: calc((var(--vw) - 1024) * .5px);
  height: calc(var(--page-h, 1000) * 1px);
  zoom: var(--k);
}
.is-phone .stage { width: 320px; margin-left: calc((var(--vw) - 320) * .5px); }
html:not(.ready) .stage { visibility: hidden; }

/* ---------- Elemente ---------- */
.w {
  --_x: var(--x); --_y: var(--y); --_w: var(--w); --_h: var(--h); --_z: var(--z, 1); --_r: var(--r, 0);
  position: absolute;
  left: calc(var(--_x) * 1px);
  top: calc(var(--_y) * 1px);
  width: calc(var(--_w) * 1px);
  height: calc(var(--_h) * 1px);
  z-index: var(--_z);
  transform: rotate(calc(var(--_r) * 1deg));
  pointer-events: none;           /* die Box selbst fängt keine Maus ab … */
}
.w > * { pointer-events: auto; }  /* … nur ihr Inhalt */
.is-phone .w {
  --_x: var(--px, var(--x)); --_y: var(--py, var(--y)); --_w: var(--pw, var(--w)); --_h: var(--ph, var(--h));
  --_z: var(--pz, var(--z, 1)); --_r: var(--pr, var(--r, 0));
}
html:not(.is-phone) .hide-d, .is-phone .hide-p { display: none; }
html:not(.is-phone) .only-p, .is-phone .only-d { display: none; }

/* Ebene, auf der die Animationen laufen */
.a { position: relative; width: 100%; height: 100%; transform-origin: 50% 50%; }
.fill-link { display: block; width: 100%; height: 100%; }

/* Fixierte Positionen: horizontal l/c/r, vertikal t/c/b */
.fx { position: fixed; }
.fh-l { left: calc(var(--_x) * 1px); }
.fh-c { left: calc(var(--vw) * .5px + var(--_x) * 1px - var(--_w) * .5px); }
.fh-r { left: calc(var(--vw) * 1px - var(--_x) * 1px - var(--_w) * 1px); }
.fv-t { top: calc(var(--_y) * 1px); }
.fv-c { top: calc(var(--vh) * .5px + var(--_y) * 1px - var(--_h) * .5px); }
.fv-b { top: calc(var(--vh) * 1px - var(--_y) * 1px - var(--_h) * 1px); }

/* ---------- Text ---------- */
.tx { width: 100%; overflow-wrap: break-word; }
.tx p { white-space: pre-wrap; }
.lnk { text-decoration: underline 1px transparent; text-underline-offset: 2px; transition: text-decoration-color .2s; }
.lnk-u:hover, .lnk-u:focus-visible { text-decoration-color: currentColor; }

/* ---------- Formen ---------- */
.shape { width: 100%; height: 100%; }
.line { position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--lw, 1) * 1px); transform: translateY(-50%); }

/* ---------- Bilder (Bildausschnitt: --iw/--ih/--il/--it) ---------- */
.w-picture .a { overflow: hidden; border-radius: calc(var(--rad, 0) * 1px); opacity: var(--pop, 1); }
.w-picture img {
  position: absolute; max-width: none; object-fit: cover; user-select: none;
  width: var(--iw); height: var(--ih); left: var(--il); top: var(--it);
}
.is-phone .w-picture img {
  width: var(--piw, var(--iw)); height: var(--pih, var(--ih)); left: var(--pil, var(--il)); top: var(--pit, var(--it));
}
[data-drag] { cursor: grab; touch-action: none; }
[data-drag].dragging { cursor: grabbing; }

/* ---------- Video ---------- */
.vbox { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.vbox video { width: 100%; height: 100%; object-fit: cover; }
.vbox .play {
  display: none; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px;
  margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,.9); pointer-events: none;
}
.vbox .play::after {
  content: ''; position: absolute; left: 21px; top: 16px;
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #000;
}
.needs-tap { cursor: pointer; }
.needs-tap:not(.playing) .play { display: block; }

/* ---------- Slideshow ----------
   Endlos-Slider. Statt sichtbarer Pfeile wird der Mauszeiger zum Pfeil:
   linke Bildhälfte ← zurück, rechte Bildhälfte → weiter. */
.ss { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; }
.ss-track { display: flex; height: 100%; }
.ss-track.anim { transition: transform var(--ss-t, .5s) cubic-bezier(.455,.03,.515,.955); }
.slide { flex: 0 0 100%; height: 100%; }
.slide img { width: 100%; height: 100%; user-select: none; pointer-events: none; }
.ss.left  { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M28 20H12M18.5 13.5L12 20l6.5 6.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 20 20, w-resize; }
.ss.right { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M12 20h16M21.5 13.5L28 20l-6.5 6.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 20 20, e-resize; }
.ss-prev, .ss-next { position: absolute; top: 0; bottom: 0; width: 50%; opacity: 0; cursor: inherit; }
.ss-prev { left: 0; } .ss-next { right: 0; }
.ss-prev:focus-visible, .ss-next:focus-visible { opacity: 1; outline-offset: -4px; }

/* ---------- Button (normal / hover) ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: var(--bbg); color: var(--bfg);
  border: var(--bbw) solid var(--bbd); border-radius: var(--brad);
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover, .btn:focus-visible {
  background: var(--hbg); color: var(--hfg); border-color: var(--hbd); border-width: var(--hbw); border-radius: var(--hrad);
}

/* ---------- Shots & Lottie ---------- */
.shots, .lottie { width: 100%; height: 100%; }
.shots { object-fit: cover; }

:focus-visible { outline: 2px solid #ff0000; outline-offset: 2px; }