/* Lupe: Knöpfe auf dem Vorschaubild, gemeinsamer Kontrast-Schalter und die bildschirmfüllende Ansicht.
 * Nur Tokens und ds-knopf aus dem Design-Handbuch (siehe taskpane.css). */
.anhang-bild.klickbar { cursor: zoom-in; }
/* Knöpfe direkt auf dem Foto – sichtbar statt nur „aufs Bild klicken“ (Philipp, 01.10.2026) */
.bild-rahmen { position: relative; margin-bottom: var(--abstand-3); }
.bild-leiste {
  position: absolute;
  right: var(--abstand-2);
  bottom: var(--abstand-2);
  left: var(--abstand-2);
  display: flex;
  justify-content: flex-end;
  gap: var(--abstand-2);
}
.bild-leiste .ds-knopf { box-shadow: var(--schatten-schwebend); }
/* Nur Anzeige: Graustufen nehmen das Muster des Papiers weg, Kontrast hebt die Schrift. Standard an. */
:root:not(.kontrast-aus) .anhang-bild,
:root:not(.kontrast-aus) .lupe-bild { filter: grayscale(1) contrast(1.6); }

.lupe {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
}
.lupe[open] { display: flex; flex-direction: column; }
.lupe::backdrop { background: var(--farbe-kopfleiste); }
.lupe-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2);
  padding: var(--abstand-3) var(--abstand-3) var(--abstand-2);
}
.lupe-kopf h2 { margin: 0; font-size: var(--schrift-groesse-gross); }
.lupe-leiste { display: flex; align-items: center; gap: var(--abstand-2); padding: 0 var(--abstand-3) var(--abstand-3); }
.lupe-stufe { min-width: 4.5ch; text-align: center; font-weight: var(--schrift-gewicht-halbfett); }
.lupe-kleiner, .lupe-groesser { min-width: var(--hoehe-knopf-klein); }
.lupe-kontrast { margin-left: auto; }
/* Dunkle Markenfläche hinter dem Foto (siehe .anhang-bild). */
.lupe-flaeche { flex: 1; min-height: 0; overflow: auto; background: var(--farbe-kopfleiste); }
.lupe-bild { display: block; width: 100%; max-width: none; height: auto; }
.lupe-werte {
  max-height: 38vh;
  overflow: auto;
  padding: var(--abstand-2) var(--abstand-3) var(--abstand-3);
  border-top: var(--linie-duenn) solid var(--farbe-rand);
}
.lupe-werte-titel { margin: 0 0 var(--abstand-1); font-weight: var(--schrift-gewicht-halbfett); }
.lupe-liste { margin: 0; padding: 0; list-style: none; }
/* Name über dem Wert (wie in der Karte): der Wert hat die volle Breite, eine FIN bleibt in einer Zeile. */
.lupe-liste li { display: grid; padding: var(--abstand-1) 0; border-bottom: var(--linie-duenn) solid var(--farbe-rand); }
.lupe-liste li.rot strong { color: var(--farbe-gefahr-text); }
.lupe-name { font-size: var(--schrift-groesse-klein); color: var(--farbe-text-leise); }
.lupe-liste strong { font-size: var(--schrift-groesse-gross); overflow-wrap: anywhere; }