/* Industriedesign und Modellierung */
.design-hero__title{ max-width:14ch; }
.design-hero .checklist{ margin-top:8px; }

/* Wireframe → render wipe */
.wipe-scene__head{ margin-bottom:clamp(28px,4vw,48px); }
.wipe-scene__pin{ display:grid; justify-items:center; gap:16px; }
.wipe-scene__frame{ width:min(100%, calc(76vh * 16 / 9)); }
.wipe-scene__hint{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
.wipe-scene__hint .ti{ font-size:16px; color:var(--cyan); animation:floaty 2.4s ease-in-out infinite; }
.wipe-scene__knob{ position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; display:grid; place-items:center;
  background:rgba(5,9,18,.75); border:1px solid var(--cyan); color:var(--cyan); font-size:20px; box-shadow:0 0 24px rgba(63,208,224,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.wipe-scene__frame{ position:relative; border-radius:var(--r-4); overflow:hidden; border:1px solid var(--line); }
.wipe-scene__b{ position:absolute; inset:0; clip-path:inset(0 0 0 0); }
.wipe-scene__b .ph{ height:100%; }
.wipe-scene__tag{ position:absolute; top:18px; left:18px; padding:6px 12px; border-radius:999px; background:rgba(5,9,18,.6); border:1px solid var(--line-strong); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); }
.wipe-scene__tag--r{ left:auto; right:18px; }
.wipe-scene__line{ position:absolute; top:0; bottom:0; left:-1px; width:2px; background:linear-gradient(transparent, var(--cyan), transparent); box-shadow:0 0 24px 4px rgba(63,208,224,.6); pointer-events:none; opacity:0; }
.ph--wire{ background:
  linear-gradient(rgba(42,159,216,.22) 1px, transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg, rgba(42,159,216,.22) 1px, transparent 1px) 0 0/32px 32px,
  radial-gradient(60% 50% at 50% 55%, rgba(42,159,216,.25), transparent 70%), #04070e; }
@media (max-width:767px), (prefers-reduced-motion: reduce){
  .wipe-scene__b{ position:relative; margin-top:12px; }
  .wipe-scene__frame{ overflow:visible; border:0; display:grid; gap:12px; }
  .wipe-scene__a, .wipe-scene__b{ position:relative; border-radius:var(--r-3); overflow:hidden; }
  .wipe-scene__hint, .wipe-scene__line{ display:none; }
}

/* Object explode */
.explode{ position:relative; border-radius:var(--r-4); overflow:hidden; }
.explode__b{ position:absolute; inset:0; opacity:0; }
.explode__b .ph{ height:100%; }
.ph--exploded{ background:
  radial-gradient(10% 10% at 30% 35%, rgba(63,208,224,.5), transparent 70%),
  radial-gradient(12% 12% at 60% 55%, rgba(42,159,216,.55), transparent 70%),
  radial-gradient(8% 8% at 72% 30%, rgba(234,241,251,.35), transparent 70%),
  linear-gradient(160deg, #0d1a33 0%, #070d1a 60%, #050912 100%); }

/* Gallery */
.gallery__grid{ columns:3 280px; column-gap:14px; }
.gallery__grid:empty{ display:none; }
.gallery__item{ display:block; break-inside:avoid; margin-bottom:14px; border-radius:var(--r-3); overflow:hidden; border:1px solid var(--line); }
.gallery__item img{ width:100%; transition:transform .8s var(--ease-out); }
.gallery__item:hover img{ transform:scale(1.04); }
.gallery__item.is-hidden{ display:none; }
.gallery__grid:not(:empty) + .gallery__empty{ display:none; }
.gallery__foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-top:28px; }
.gallery__foot p{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:700px){ .why-grid{ grid-template-columns:1fr; } }
/* generated images */
.wipe-scene__a .pic{ display:block; width:100%; aspect-ratio:16/9; }
.wipe-scene__a .pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.wipe-scene__b .pic{ display:block; width:100%; height:100%; aspect-ratio:16/9; }
.wipe-scene__b .pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.explode__b .pic, .explode__b .pic img{ display:block; width:100%; height:100%; object-fit:cover; }
/* optional hero visual (IMG-30) */
.design-hero__grid.has-visual{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,80px); align-items:end; }
@media (max-width:900px){ .design-hero__grid.has-visual{ grid-template-columns:1fr; } }
.design-hero__grid .page-hero__inner{ display:grid; gap:24px; }
/* reduced motion: show the final (exploded) state of the object crossfade */
@media (prefers-reduced-motion: reduce){ .explode__b{ opacity:1; } }