:root { --radius: 16px; --bg: transparent; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  color:#111; background:#fff;
}

/* Eine Box, die 100% des Viewports belegt */
.wrap{
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: 35% 45% 20%;  /* Bild(e) / 3D / Text */
  gap: 0;
  border: 1px solid #e7e7e9;        /* äußerer Rahmen, alles wirkt wie eine Box */
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

/* Kinder: keine eigenen Rahmen, alles integriert in die eine Box */
.block{ border: 0; border-radius: 0; }

/* Bildbereich: standardmäßig 1 Spalte (Phone + iPad Hochformat) */
.media{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  justify-items: center;
  background: #fff;
  padding: 8px 12px;
}
.media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#aboutImg2{ display: none; } /* default: nur ein Bild sichtbar */

/* Zwei Bilder nebeneinander:
   - ab Tabletbreite im Querformat
   - oder ab Desktopbreite generell */
@media (min-width: 768px) and (orientation: landscape),
       (min-width: 1024px) {
  .media{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  #aboutImg2{ display: block; }
}

/* 3D-Bereich: transparenter Hintergrund */
model-viewer{
  width: 100%;
  height: 100%;
  background: transparent;          /* wichtig: transparent */
  --poster-color: transparent;
  pointer-events: auto;
}

/* Text unten; bei langem Text intern scrollbar */
.copy{
  padding: 16px 20px;
  font-weight: 500;
  line-height: 1.5;
  overflow: auto;
}

/* Mobile-Verhältnis leicht anpassen */
@media (max-width: 640px){
  .wrap{ grid-template-rows: 38% 42% 20%; }
}

/* Optional: weiche Fades, falls du später aktivierst
.media img.is-fading, .copy.is-fading { opacity: 0; transition: opacity 220ms ease; }
*/