/* ==========================================================================
   30 · Bilder, Rahmen, Platzhalter
   ========================================================================== */

/* Bild im Rahmen (Hero, Split, Galerie): [ux_image … class="demo-image"] */
.eso-demo .demo-image {
  width: 100%;
  margin: 0 !important;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--eso-border);
  background: var(--eso-white);
}
.eso-demo .demo-image .img-inner {
  height: 100%;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eso-demo .demo-image img {
  width: 100%;
  max-height: 100%;
  padding: 0 !important;
  object-fit: contain;
}
/* Bild randlos füllend (Fotos), Rahmen bleibt */
.eso-demo .demo-image.demo-cover .img-inner { padding: 0; }
.eso-demo .demo-image.demo-cover img { height: 100%; object-fit: cover; }
/* Dunkler Bildhintergrund */
.eso-demo .demo-image.demo-dark,
.eso-demo .demo-image.demo-dark .img-inner { background: #000; border-color: #000; }

/* Grüne Eckmarken am Bild: Spalte bekommt .demo-corners (Hero-Bild automatisch) */
.eso-demo .demo-corners,
.eso-demo .demo-hero-image { position: relative; }
.eso-demo .demo-corners::before,
.eso-demo .demo-corners::after,
.eso-demo .demo-hero-image::before,
.eso-demo .demo-hero-image::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 32px;
  height: 32px;
  pointer-events: none;
}
.eso-demo .demo-corners::before,
.eso-demo .demo-hero-image::before { top: -12px; left: -12px; border-top: 1px solid var(--eso-green); border-left: 1px solid var(--eso-green); }
.eso-demo .demo-corners::after,
.eso-demo .demo-hero-image::after { right: -12px; bottom: -12px; border-right: 1px solid var(--eso-green); border-bottom: 1px solid var(--eso-green); }
.eso-demo .demo-hero-image.demo-no-corners::before,
.eso-demo .demo-hero-image.demo-no-corners::after { display: none; }

/* Bildunterschrift unter einem Bild */
.eso-demo .demo-figure-caption { margin-top: 16px; }
.eso-demo .demo-figure-caption strong {
  display: block;
  font-family: var(--eso-font-display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--eso-text);
}
.eso-demo .demo-figure-caption p { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--eso-text-body); }

/* Platzhalter für fehlende Bilder (Rasterfläche mit Fadenkreuz) */
.eso-demo .demo-placeholder {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 24px;
  border: 1px solid var(--eso-border);
  background-color: #ECECEA;
  background-image: linear-gradient(#1717171a 1px, transparent 1px), linear-gradient(90deg, #1717171a 1px, transparent 1px);
  background-size: 28px 28px;
  text-align: center;
  font-family: var(--eso-font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6B6B66;
}
.eso-demo .demo-placeholder::before {
  content: "";
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  background: linear-gradient(#6B6B66, #6B6B66) center / 32px 1px no-repeat, linear-gradient(#6B6B66, #6B6B66) center / 1px 32px no-repeat;
}
.eso-demo .demo-placeholder small { margin-top: 8px; font-size: 10px; letter-spacing: .15em; color: #9A9A94; }
.eso-demo .demo-hero-image:has(.demo-placeholder)::before,
.eso-demo .demo-hero-image:has(.demo-placeholder)::after { display: none; }

/* Zwei Bilder nebeneinander (Galerie) */
.eso-demo .demo-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px !important; }
.eso-demo .demo-gallery > .col { max-width: none; flex-basis: auto; }
@media (max-width: 767px) {
  .eso-demo .demo-gallery { grid-template-columns: 1fr; }
}

/* Ältere Klassennamen */
.eso-demo .eso-corners { position: relative; }
.eso-demo .eso-corners::before,
.eso-demo .eso-corners::after { content: ""; position: absolute; z-index: 1; width: 32px; height: 32px; pointer-events: none; }
.eso-demo .eso-corners::before { top: -12px; left: -12px; border-top: 1px solid var(--eso-green); border-left: 1px solid var(--eso-green); }
.eso-demo .eso-corners::after { right: -12px; bottom: -12px; border-right: 1px solid var(--eso-green); border-bottom: 1px solid var(--eso-green); }
.eso-demo.demo-tooling-hero .demo-hero-image::before,
.eso-demo.demo-tooling-hero .demo-hero-image::after { display: none; }

/* Zwei freigestellte Produktbilder nebeneinander (Messkopfhalterung) */
.eso-demo .demo-mkh-gallery { margin-top: 40px !important; row-gap: 24px; }
.eso-demo .demo-mkh-gallery > .col { padding: 0 12px 0 0 !important; }
.eso-demo .demo-mkh-gallery > .col + .col { padding: 0 0 0 12px !important; }
.eso-demo .demo-mkh-gallery .img-inner { background: var(--eso-grey); border: 1px solid var(--eso-border); }
@media (max-width: 849px) {
  .eso-demo .demo-mkh-gallery > .col,
  .eso-demo .demo-mkh-gallery > .col + .col { padding: 0 !important; }
}