/* ============================================================
   BILD-PLATZHALTER
   Die Originalfotos und Projekt-Screenshots gehören dem Autor der
   Vorlage und werden hier nicht mitgeliefert. Diese Flächen halten
   Seitenverhältnis, Radius und Farbcharakter der Originale, damit
   das System vollständig beurteilbar bleibt.

   Ersetzen: .ph durch <img> tauschen — die Maße stimmen bereits.
   ============================================================ */

.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--c-ink);
  background-size: cover;
  background-position: center;
}

/* Flächen, die im Layout absolut liegen, behalten ihre Positionierung.
   (.ph würde sie sonst auf relative zurücksetzen und kollabieren.) */
.flip__face.ph { position: absolute; inset: 0; display: block; }

.flip__face.ph { border-radius: var(--r-card); }

/* Feines Korn statt Raster — ein Gitter würde wie ein Wireframe wirken
   und den Gesamteindruck verfälschen. */
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* Hero-Porträt: warm ausgeleuchtet, im Licht der Tunnellampen.
   (Vorher ein kaltes Rot — der einzige kühle Farbfleck der Seite.) */
.ph--portrait-lit {
  background-image:
    radial-gradient(60% 50% at 50% 38%, rgba(255, 186, 106, 0.55), transparent 70%),
    linear-gradient(160deg, #7a4512 0%, #341c08 55%, #150c04 100%);
}

/* Porträt Schwarzweiß */
.ph--portrait-bw {
  background-image:
    radial-gradient(55% 42% at 52% 34%, rgba(255, 255, 255, 0.30), transparent 68%),
    linear-gradient(165deg, #3a3a3a 0%, #1a1a1a 52%, #0b0b0b 100%);
}

/* Projekt-Kacheln — Farbstimmung der Originale */