/**
 * Der Bildschirmschoner ist die eine Fläche, die bewusst NICHT aus tokens.css
 * kommt: er ersetzt die App, statt in ihr zu liegen. Echtes Schwarz statt
 * `--color-bg` ist hier der Zweck (auf OLED bleiben die Pixel aus), und die
 * Beschriftung steht auf einem fremden Foto, nicht auf einer Themefläche -
 * ein Token-Vordergrund hätte dort keinen definierten Kontrast. Radien und
 * Abstände folgen weiter den Tokens.
 */
.photo-screensaver {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  background: #000;
  color: #fff;
  cursor: none;
}

.photo-screensaver img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.photo-screensaver img.photo-screensaver__visible { opacity: 1; }

.photo-screensaver p {
  position: absolute;
  margin: 0;
  padding: .5rem .75rem;
  border-radius: var(--radius-md);
  background: rgb(0 0 0 / 45%);
  text-shadow: 0 1px 2px #000;
}

.photo-screensaver p[data-position="0"] { left: 1.25rem; bottom: 1.25rem; }
.photo-screensaver p[data-position="1"] { right: 1.25rem; bottom: 1.25rem; }
.photo-screensaver p[data-position="2"] { right: 1.25rem; top: 1.25rem; }
.photo-screensaver p[data-position="3"] { left: 1.25rem; top: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .photo-screensaver img { transition: none; }
}