/* ── PLATZHALTERGRAFIK ────────────────────────────────────────────
   Statt eines Platzhalterbildes ein gezeichnetes Rechteck mit
   Auskreuzung: zwei feine Diagonalen und ein feiner Rahmen, beides
   ausgegraut. Beim Ueberfahren — und ebenso, wenn ein Bild darueber
   gezogen wird — werden die Linien dunkler. Die Flaeche selbst bleibt
   hell, sie wird nicht mehr abgedunkelt.
   Die Diagonalen liegen als SVG darin, damit sie in jedem Seiten-
   verhaeltnis von Ecke zu Ecke laufen und trotzdem haardünn bleiben. */
/* Rahmen und Diagonalen liegen in derselben Zeichnung und teilen damit
   Strichstaerke, Punktabstand und Farbe — der Rahmen sieht aus wie die
   Diagonale. Der halbe Bildpunkt Einzug sorgt dafuer, dass der Strich
   des Rahmens ganz im Feld liegt und nicht halb abgeschnitten wird.  */
.ph-x {
  position: absolute;
  top: 0.5px;
  left: 0.5px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  display: block;
  overflow: visible; /* sonst schneidet die Zeichenflaeche den Rahmenstrich zur Haelfte ab */
  pointer-events: none;
  z-index: 0;
  fill: none;
  stroke: var(--light);
  stroke-width: 1;
  stroke-dasharray: 0.5 3.5;
  stroke-linecap: round;
  transition: stroke 0.18s ease;
}
.ph-rahmen:hover > .ph-x,
.ph-rahmen.drag-over > .ph-x {
  stroke: var(--ph-dunkel);
}

/* ── REFERENZBILD (linkes Panel) ── */
.ref-left {
  width: 100%;
  aspect-ratio: 3/2;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background-image: url('/assets/grain.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  transition: filter 0.6s ease;
}
.ref-left:hover {
  filter: none;
  transition: filter 0.25s ease;
}
.ref-left.drag-over {
  filter: none;
}
.ref-left .sref-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.ref-left .sref-filled {
  position: absolute;
  inset: 0;
  display: none;
}
.ref-left .sref-filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ref-left:hover .sref-clear {
  opacity: 1;
}

/* ── REFERENZBILD (rechtes Panel) ── */
.ref-ctx {
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--white);
}
.ref-ctx .sref-slot {
  position: absolute;
  inset: 0;
  aspect-ratio: unset;
  border: none;
  background: transparent;
}
.ref-ctx .sref-slot:hover {
  border: none;
}
.ref-ctx.has-img .ph-x {
  display: none;
}
.ref-ctx #rgrid {
  display: none !important;
}