/* ============================================================================
   lupe.css — die vergrößerte Ansicht und der Hinweis auf den Kacheln.
   Gehört zu lupe.js.
   ========================================================================== */

/* ---------- Die Kachel, die sich öffnen lässt ---------- */
.lupe-bar{cursor:zoom-in;position:relative}
.lupe-bar:focus-visible{outline:2px solid var(--accent-strong);outline-offset:6px}
/* Ein kleines Zeichen, das erst beim Überfahren kommt. Auf dem Telefon
   erscheint es gar nicht: dort tippt man ohnehin. */
.lupe-bar::after{
  content:"";position:absolute;top:14px;right:14px;z-index:3;
  width:34px;height:34px;border-radius:var(--r-pill);
  background:rgba(6,9,12,.6) center/16px no-repeat;
  backdrop-filter:blur(8px);
  border:1px solid rgba(238,243,246,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23EEF3F6' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5.2'/%3E%3Cpath d='M11 11l4 4M7 5v4M5 7h4'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.86);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
  pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .lupe-bar:hover::after,.lupe-bar:focus-visible::after{opacity:1;transform:scale(1)}
}

/* ---------- Die Lupe selbst ---------- */
body.lupe-offen{overflow:hidden}
.lupe{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,54px);
  background:rgba(4,6,9,.94);
  backdrop-filter:blur(22px) saturate(120%);
  opacity:0;transition:opacity .3s var(--ease);
}
.lupe.da{opacity:1}
.lupe[hidden]{display:none}

.lupe-buehne{
  max-width:min(1500px,100%);max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  transform:scale(.975);transition:transform .38s var(--ease);
}
.lupe.da .lupe-buehne{transform:scale(1)}
.lupe-buehne img{
  max-width:100%;max-height:calc(100dvh - 210px);
  width:auto;height:auto;object-fit:contain;
  border-radius:var(--r);
  box-shadow:0 40px 120px rgba(0,0,0,.7);
}
.lupe-buehne figcaption{
  text-align:center;max-width:60ch;
  display:flex;flex-direction:column;gap:8px;
}
.lupe-buehne figcaption b{
  font-family:var(--display);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(19px,2.2vw,27px);color:var(--ink);
}
.lupe-buehne figcaption span{
  font-size:14.5px;line-height:1.7;color:var(--muted);font-weight:300;
}
.lupe-buehne figcaption i{
  font-style:normal;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--dim);margin-top:4px;
}

/* ---------- Knöpfe ---------- */
.lupe button{
  position:absolute;z-index:2;
  display:grid;place-items:center;
  background:rgba(238,243,246,.05);
  border:1px solid var(--line);
  color:var(--ink);cursor:pointer;
  border-radius:var(--r-pill);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.lupe button:hover{background:var(--accent-soft);border-color:rgba(143,190,218,.45);color:var(--accent-strong)}
.lupe button:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}
.lupe-zu{top:clamp(14px,3vw,30px);right:clamp(14px,3vw,30px);width:48px;height:48px}
.lupe-pfeil{top:50%;transform:translateY(-50%);width:52px;height:52px}
.lupe-pfeil.vor{left:clamp(10px,2.4vw,28px)}
.lupe-pfeil.zurueck{right:clamp(10px,2.4vw,28px)}
.lupe button[hidden]{display:none}

@media(max-width:760px){
  .lupe-buehne img{max-height:calc(100dvh - 250px)}
  /* Auf dem Telefon wird gewischt. Die Pfeile rutschen nach unten, damit sie
     nicht auf dem Bild liegen. */
  .lupe-pfeil{top:auto;bottom:22px;transform:none;width:46px;height:46px}
  .lupe-pfeil.vor{left:28px}
  .lupe-pfeil.zurueck{right:28px}
  .lupe-buehne figcaption{padding:0 8px 68px}
}

@media(prefers-reduced-motion:reduce){
  .lupe,.lupe-buehne,.lupe-bar::after{transition:none}
}