/* ══════════════════════════════════════════════════════════════════════════
   BILD-LUPE — antippbare Vollansicht für Bilder mit Feininhalt

   Verhalten: js/bild-lupe.js. Der Knopf und der Dialog entstehen dort, das
   Aussehen steht hier.

   Warum eine eigene Datei (22.08.2026, /eco-ratings/): Der Block stand
   seitenlokal auf /energiemanagement/ und /nachhaltigkeitsbericht/ und wurde
   auf der dritten Seite schlicht vergessen — das Mobil-Gate meldete daraufhin
   13,3 px Bedientext. Projekt-Regel: Was zum zweiten Mal gebraucht wird,
   wandert in eine eigene Datei. Die beiden gebauten Seiten behalten ihre
   lokalen Kopien, bis sie ohnehin angefasst werden; sie sind wertgleich.

   Der Knopf trägt beide Helligkeiten selbst (Lehre M-2): auf dunklem Grund
   helle Schrift und helle Kante, auf hellem Grund die Markenfarbe.
   ══════════════════════════════════════════════════════════════════════════ */

.lupe-bereit img { cursor: zoom-in; }

.lupe-hinweis {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: var(--space-3); padding: .55rem 1rem; min-height: 44px;
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm); color: var(--color-brand);
  background: transparent; border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.lupe-hinweis:hover { background: var(--surface-subtle); }
.lupe-hinweis svg { width: 18px; height: 18px; flex: none; }
.section-dark .lupe-hinweis {
  color: var(--text-on-dark); border-color: var(--border-on-dark);
}
.section-dark .lupe-hinweis:hover { background: rgba(255,255,255,.08); }

dialog.lupe {
  width: min(96vw, 1400px); max-width: none; max-height: 94vh; padding: 0;
  border: 0; border-radius: var(--radius-lg); background: transparent;
  overflow: visible;
}
dialog.lupe::backdrop { background: rgba(12,14,17,.88); }
.lupe__bild {
  display: block; width: 100%; height: auto; max-height: 94vh;
  object-fit: contain; border-radius: var(--radius-lg);
}
.lupe__zu {
  position: absolute; top: -14px; right: -14px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; border: 0;
  cursor: pointer; font-size: 1.6rem; line-height: 1;
  color: var(--text-inverse); background: var(--color-brand);
  box-shadow: var(--shadow-md);
}

@media (max-width: 700px) {
  /* Eine Vollansicht in Bildschirmbreite vergrößert auf dem Handy gar nichts
     (Lehre L-3). Das Bild wird deshalb auf Bildschirmhöhe gezogen und darf
     breiter als das Fenster sein; gewischt wird im Dialog. */
  dialog.lupe {
    width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0;
    overflow: auto; -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
  }
  .lupe__bild {
    width: auto; max-width: none; height: 86vh; max-height: 86vh;
    border-radius: 0; margin-top: 7vh;
  }
  .lupe__zu { position: fixed; top: 12px; right: 12px; }
  /* Über die volle Breite bleibt der Knopftext einzeilig und das Tap-Ziel
     wächst mit — sonst bricht er unter 560 px um. */
  .lupe-hinweis { width: 100%; justify-content: center; }
  .lupe__wisch {
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
    font-family: var(--font-heading); font-size: .85rem;
    color: rgba(255,255,255,.82); background: rgba(12,14,17,.72);
    padding: .35rem .8rem; border-radius: 999px; pointer-events: none;
  }
}
@media (min-width: 701px) { .lupe__wisch { display: none; } }

/* 16-px-Untergrenze für Bedientext auf kleinen Bildschirmen. */
@media (max-width: 900px) { .lupe-hinweis { font-size: 1rem; } }