/* Bildvergrößerung in den Pro-Anleitungen – Optik wie in den Business-Handbuchseiten.
   Die Schritt-Bilder haben einen durchsichtigen Rand für den Fensterschatten
   (links/rechts 7,9 %, unten 10,9 % der Bildgröße); die Lupe sitzt deshalb auf
   der unteren rechten Fensterecke, nicht auf der Bildecke. */
.walk-media .bild-rahmen {
  position: relative; display: block; width: 100%; max-width: 440px;
  margin-inline: auto; padding: 0; border: 0; background: none;
  cursor: zoom-in; font: inherit; color: inherit;
}
.walk-media-large .bild-rahmen { width: 110%; max-width: 484px; }
.walk-media .bild-rahmen img { width: 100%; max-width: none; margin: 0; }
.walk-media .bild-rahmen:focus-visible { outline: 3px solid var(--accent, #1D6FD8); outline-offset: 3px; border-radius: 12px; }
.bildzoom-hinweis {
  position: absolute; right: calc(7.9% - 14px); bottom: calc(10.9% - 14px);
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: #1D1D1F;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .18), 0 4px 12px rgba(16, 24, 40, .12);
  transition: transform .15s ease;
}
.bildzoom-hinweis svg { width: 18px; height: 18px; }
.bild-rahmen:hover .bildzoom-hinweis { transform: scale(1.08); }

.bildzoom { border: 0; padding: 0; background: transparent; max-width: none; max-height: none;
  width: 100vw; height: 100vh; height: 100dvh; margin: 0; overflow: auto; overscroll-behavior: contain; }
.bildzoom::backdrop { background: rgba(29, 29, 31, .38); }
.bildzoom[open] { display: grid; justify-items: center; align-items: center; align-items: safe center; padding: 64px 2vw 32px; }
.bildzoom-schliessen {
  position: fixed; top: 16px; right: 16px; z-index: 2;
  font: inherit; font-size: .9rem; padding: 7px 12px; border-radius: 8px;
  border: 1px solid #E6E8EC; background: #fff; color: #44474E; cursor: pointer;
}
/* Halbe Pixelbreite = Größe des Fensters auf dem Mac; nie größer, immer ganz im Fenster. */
.bildzoom-bild { width: min(96vw, var(--voll, 712px), calc((100vh - 112px) * var(--seiten, 1.05))); }
.bildzoom-bild { width: min(96vw, var(--voll, 712px), calc((100dvh - 112px) * var(--seiten, 1.05))); }
.bildzoom-bild img { display: block; width: 100%; height: auto; cursor: zoom-out; }

@media (max-width: 720px) {
  .walk-media .bild-rahmen { max-width: 420px; margin-inline: 0; }
  .walk-media-large .bild-rahmen { width: 100%; max-width: 462px; }
}