@layer components {

  
  .mh-drywall-container {
    width: 100%;
    height: 380px;
    background-color: #fdfdfd;
    border: 2px solid var(--mh-black);
    box-shadow: 8px 8px 0px var(--mh-black);
    background-image:
      linear-gradient(#e0e0e0 1px, transparent 1px),
      linear-gradient(90deg, #e0e0e0 1px, transparent 1px);
    background-size: 20px 20px;
    position: relative;
    overflow: hidden;
  }
  .mh-drywall-grid {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
  }
  .mh-dw-walls {
    grid-column: 3 / 19;
    grid-row: 3 / 19;
    border: 4px solid var(--mh-black);
    opacity: 0;
    animation: popOnGrid 0.5s ease forwards;
    position: relative;
  }
  .mh-dw-walls::after {
    content: 'NEUBAU';
    position: absolute; top: 10px; left: 10px; font-size: 0.6rem; color: #ccc;
  }
  .mh-dw-profile {
    border: 2px dashed #666;
    background: transparent;
    opacity: 0;
    animation: drawLines 0.5s ease forwards;
  }
  .mh-dw-prof-1 { grid-column: 3 / 11; grid-row: 9 / 10; animation-delay: 0.5s; }
  .mh-dw-prof-2 { grid-column: 10 / 11; grid-row: 9 / 15; animation-delay: 0.7s; }
  .mh-dw-prof-3 { grid-column: 15 / 16; grid-row: 3 / 12; animation-delay: 0.9s; }
  .mh-dw-panel {
    background: #eee;
    border: 1px solid #333;
    opacity: 0;
    animation: popOnGrid 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem;
  }
  .mh-dw-pan-1 { grid-column: 3 / 10; grid-row: 9 / 10; animation-delay: 1.2s; }
  .mh-dw-pan-2 { grid-column: 10 / 11; grid-row: 10 / 15; animation-delay: 1.4s; }
  .mh-dw-pan-3 { grid-column: 15 / 16; grid-row: 3 / 12; animation-delay: 1.6s; }
  .mh-dw-iso {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, transparent, transparent 2px, var(--mh-neon) 2px, var(--mh-neon) 3px);
    opacity: 0.3;
  }
  .mh-dw-finish {
    grid-column: 7 / 9;
    grid-row: 8 / 11;
    font-size: 1.5rem;
    z-index: 5;
    opacity: 0;
    animation: popOnGrid 0.5s ease forwards 2.0s;
  }
  .mh-dw-measure {
    grid-column: 3 / 11;
    grid-row: 7 / 8;
    border-bottom: 1px solid #000;
    position: relative;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards 2.5s;
  }
  .mh-dw-measure span { position: absolute; bottom: 2px; width: 100%; text-align: center; font-size: 0.6rem; }
  .mh-dw-worker {
    grid-column: 12 / 15;
    grid-row: 13 / 16;
    font-size: 2.5rem;
    z-index: 5;
    opacity: 0;
    animation: popOnGrid 0.5s ease forwards 2.8s;
  }

  
  @keyframes drawLines {
    0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); }
  }
  @keyframes fadeIn { to { opacity: 1; } }

  
  .mh-modal-table { width: 100%; font-size: 0.9rem; margin: 1rem 0; border-collapse: collapse; }
  .mh-modal-table td { padding: 4px 0; vertical-align: top; }
  .mh-modal-table td:first-child { white-space: nowrap; padding-right: 12px; }

  
  @media (prefers-reduced-motion: reduce) {
    .mh-dw-walls, .mh-dw-profile, .mh-dw-panel,
    .mh-dw-finish, .mh-dw-measure, .mh-dw-worker {
      animation: none !important;
      opacity: 1 !important;
      clip-path: none !important;
    }
  }
}