.photo-placeholder {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 100%;
}

/* Variante auf hellem Grund (Services, Referenzen, About) */
.photo-placeholder.on-light {
  background:
    repeating-linear-gradient(
      124deg,
      rgba(33, 29, 23, 0.035) 0px,
      rgba(33, 29, 23, 0.035) 1px,
      transparent 1px,
      transparent 14px
    ),
    linear-gradient(155deg, #efece4, #e4e0d5);
  border: 1px solid var(--line);
  color: var(--ink-muted);
}

.photo-placeholder.on-light svg {
  color: var(--amber);
}

/* Variante auf dunklem Grund (Prozess-Sektion) */
.photo-placeholder.on-dark {
  background:
    repeating-linear-gradient(
      124deg,
      rgba(193, 122, 58, 0.06) 0px,
      rgba(193, 122, 58, 0.06) 1px,
      transparent 1px,
      transparent 14px
    ),
    linear-gradient(155deg, var(--charcoal-panel), var(--charcoal-deep));
  border: 1px solid var(--panel-border);
  color: var(--cream-muted);
}

.photo-placeholder.on-dark svg {
  color: var(--amber-soft);
}

.photo-placeholder svg {
  width: 26px;
  height: 26px;
  opacity: 0.85;
}

.photo-placeholder span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Echtes Foto anstelle des Platzhalters */
.photo-frame {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-photo .photo-frame {
  position: absolute;
  inset: 0;
}