/* ------------------------------------------------------------
   Portfolio Elias Leopold – Gestaltung
   ------------------------------------------------------------ */

:root {
  /* Hand-Cursor (Elias' Zeichnungen, 30 px groß): 32×32 px und 64×64 px (@2x)
     in assets/cursors/. Die zwei Zahlen sind der „Klickpunkt“ (x y) in der 32-px-Grafik. */
  --c-open:  url(../assets/cursors/open.png) 7 2;
  --c-point: url(../assets/cursors/point.png) 2 2;
  --c-pinch-r: url(../assets/cursors/pinch.png) 8 2;
  --c-pinch-l: url(../assets/cursors/pinch-l.png) 22 2;
  --c-grab-r: url(../assets/cursors/grab.png) 8 2;
  --c-grab-l: url(../assets/cursors/grab-l.png) 22 2;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  /* Hintergrund: kleine Schachbrett-Kachel, die wiederholt wird –
     wird nie skaliert und ist daher auf jedem Bildschirm scharf.
     Kästchengröße = halbe Kachelgröße (hier 7 px). */
  background: #fff url(../assets/bg-tile.png?v=5) 0 0 / 14px 14px repeat;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Standard: offene Hand */
body {
  cursor: var(--c-open), default;
  cursor: -webkit-image-set(url(../assets/cursors/open.png) 1x, url(../assets/cursors/open@2x.png) 2x) 7 2, default;
  cursor: image-set(url(../assets/cursors/open.png) 1x, url(../assets/cursors/open@2x.png) 2x) 7 2, default;
}

#book {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ---------- klickbare Bilder ---------- */
#hotspots {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#hotspots.hidden { visibility: hidden; }

.hs {
  position: absolute;
  pointer-events: auto;
  cursor: var(--c-point), pointer;
  cursor: -webkit-image-set(url(../assets/cursors/point.png) 1x, url(../assets/cursors/point@2x.png) 2x) 2 2, pointer;
  cursor: image-set(url(../assets/cursors/point.png) 1x, url(../assets/cursors/point@2x.png) 2x) 2 2, pointer;
}
/* Markierung beim Darüberfahren – im Stil eines ausgewählten Rahmens
   in InDesign: magenta Kontur, Kreuz von Ecke zu Ecke, Anfasser an
   Ecken und Kanten, dazu das gelbe Quadrat am rechten Rand. */
.hs { --frame: #f44dfa; }
.hs::before,
.hs::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
/* Kontur + Kreuz (bleibt bei jeder Rahmengröße 1 px dünn) */
.hs::after {
  inset: 0;
  border: 1px solid var(--frame);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' fill='none' stroke='%23f44dfa' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* Anfasser: 7 × 7 px, genau auf Ecken und Kantenmitten */
.hs::before {
  inset: -3px;
  z-index: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='.5' y='.5' width='6' height='6' fill='%23f44dfa' stroke='%23f44dfa'/%3E%3C/svg%3E") 50% 0 / 7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='.5' y='.5' width='6' height='6' fill='%23ffe600' stroke='%23ffe600'/%3E%3C/svg%3E") 100% 14% / 7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='.5' y='.5' width='6' height='6' fill='white' stroke='%23f44dfa'/%3E%3C/svg%3E") 0 0 / 7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='.5' y='.5' width='6' height='6' fill='white' stroke='%23f44dfa'/%3E%3C/svg%3E") 100% 0 / 7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='.5' y='.5' width='6' height='6' fill='white' stroke='%23f44dfa'/%3E%3C/svg%3E") 0 100% / 7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='.5' y='.5' width='6' height='6' fill='white' stroke='%23f44dfa'/%3E%3C/svg%3E") 100% 100% / 7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='.5' y='.5' width='6' height='6' fill='white' stroke='%23f44dfa'/%3E%3C/svg%3E") 0 50% / 7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='.5' y='.5' width='6' height='6' fill='white' stroke='%23f44dfa'/%3E%3C/svg%3E") 100% 50% / 7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='.5' y='.5' width='6' height='6' fill='white' stroke='%23f44dfa'/%3E%3C/svg%3E") 50% 100% / 7px 7px no-repeat;
}
.hs:hover::before,
.hs:hover::after { opacity: 1; }

/* ---------- Externe Links (QR-Code auf dem Cover) ----------
   Kühles, blau-weißes Licht, das langsam pulsiert – zeigt, dass man
   darauf klicken kann. Beim Darüberfahren leuchtet es etwas stärker. */
.ext-link {
  position: absolute;
  display: block;
  pointer-events: auto;
  border-radius: 3px;
  cursor: var(--c-point), pointer;
  cursor: -webkit-image-set(url(../assets/cursors/point.png) 1x, url(../assets/cursors/point@2x.png) 2x) 2 2, pointer;
  cursor: image-set(url(../assets/cursors/point.png) 1x, url(../assets/cursors/point@2x.png) 2x) 2 2, pointer;
  animation: extIn .5s ease backwards, extGlow 2.8s ease-in-out infinite;
  transition: opacity .3s ease;
}
.ext-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  box-shadow: 0 0 15px 5px rgba(200, 222, 255, .90), 0 0 42px 15px rgba(80, 145, 255, .50);
  opacity: 0;
  transition: opacity .25s ease;
}
.ext-link:hover::after { opacity: 1; }
@keyframes extGlow {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(200, 222, 255, .50), 0 0 18px 5px rgba(80, 145, 255, .22); }
  50%      { box-shadow: 0 0 12px 3px rgba(200, 222, 255, .85), 0 0 32px 10px rgba(80, 145, 255, .45); }
}
@keyframes extIn { from { opacity: 0; } to { opacity: 1; } }
/* beim Umblättern/Zoomen weich ausblenden statt schlagartig */
#hotspots.hidden .ext-link { visibility: visible; opacity: 0; pointer-events: none; }

/* ---------- Ecken zum Blättern ---------- */
.corner {
  position: fixed;
  display: none;
  touch-action: none;
}
.corner.on { display: block; }
.corner-r {
  cursor: var(--c-pinch-r), grab;
  cursor: -webkit-image-set(url(../assets/cursors/pinch.png) 1x, url(../assets/cursors/pinch@2x.png) 2x) 8 2, grab;
  cursor: image-set(url(../assets/cursors/pinch.png) 1x, url(../assets/cursors/pinch@2x.png) 2x) 8 2, grab;
}
.corner-l {
  cursor: var(--c-pinch-l), grab;
  cursor: -webkit-image-set(url(../assets/cursors/pinch-l.png) 1x, url(../assets/cursors/pinch-l@2x.png) 2x) 22 2, grab;
  cursor: image-set(url(../assets/cursors/pinch-l.png) 1x, url(../assets/cursors/pinch-l@2x.png) 2x) 22 2, grab;
}

/* während des Ziehens: greifende Hand überall */
html.drag-r, html.drag-r * {
  cursor: var(--c-grab-r), grabbing !important;
  cursor: -webkit-image-set(url(../assets/cursors/grab.png) 1x, url(../assets/cursors/grab@2x.png) 2x) 8 2, grabbing !important;
  cursor: image-set(url(../assets/cursors/grab.png) 1x, url(../assets/cursors/grab@2x.png) 2x) 8 2, grabbing !important;
}
html.drag-l, html.drag-l * {
  cursor: var(--c-grab-l), grabbing !important;
  cursor: -webkit-image-set(url(../assets/cursors/grab-l.png) 1x, url(../assets/cursors/grab-l@2x.png) 2x) 22 2, grabbing !important;
  cursor: image-set(url(../assets/cursors/grab-l.png) 1x, url(../assets/cursors/grab-l@2x.png) 2x) 22 2, grabbing !important;
}

/* ---------- Vergrößerung ---------- */
#zoom {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: rgba(18,18,18,0);
  transition: background-color .5s ease;
}
#zoom.show { background: rgba(18,18,18,.55); }
#zoom[hidden] { display: none; }

#sheet {
  position: absolute;
  transform-origin: 0 0;
}
#sheet.settled { will-change: transform; }
#sheet.anim { transition: transform .65s cubic-bezier(.2,.75,.2,1); }
#sheet .sheet-spine {
  position: absolute;
  top: 0;
  height: 100%;
}
#sheet .sheet-snap { position: absolute; display: block; }
/* kurz warten, bis die scharfe Version geladen ist */
html.loading, html.loading * { cursor: progress !important; }
#sheet .sheet-spine {
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.16), rgba(0,0,0,0));
  pointer-events: none;
}
#sheet img {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
  -webkit-user-drag: none;
}

/* ---------- Ton an/aus (unten rechts) ---------- */
.sound-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  width: 49px;
  height: 49px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  cursor: var(--c-point), pointer;
  cursor: -webkit-image-set(url(../assets/cursors/point.png) 1x, url(../assets/cursors/point@2x.png) 2x) 2 2, pointer;
  cursor: image-set(url(../assets/cursors/point.png) 1x, url(../assets/cursors/point@2x.png) 2x) 2 2, pointer;
}
/* eigene Lautsprecher-Bilder (assets/ui/ton_an.png / ton_aus.png, je 45 px + @2x mit 90 px) */
.sound-btn img {
  width: 45px;
  height: 45px;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.sound-btn .ton-aus { display: none; }
.sound-btn.muted .ton-an { display: none; }
.sound-btn.muted .ton-aus { display: block; }

.noscript {
  position: fixed; inset: auto 0 40% 0; text-align: center;
  font-size: 16px; color: #222;
}