/* Laser-Rechner Kopfbereich sauber über volle Breite */
#apLaserTopLayoutWrap{
  grid-column:1 / -1;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  align-items:stretch;
  margin-bottom:16px;
}

/* Artikelname oben über volle Breite, aber nicht riesig */
#apLaserTopLayoutWrap .ap-laser-name-card{
  grid-column:1 / -1;
  padding:16px !important;
  min-height:0 !important;
  height:auto !important;
}

#apLaserTopLayoutWrap .ap-laser-name-card label{
  max-width:720px;
}

#apLaserTopLayoutWrap .ap-laser-name-card input{
  min-height:42px;
}

/* Material und Größe gleichwertig nebeneinander */
#apLaserTopLayoutWrap .ap-laser-material-card,
#apLaserTopLayoutWrap .ap-laser-size-card{
  padding:18px !important;
  margin:0 !important;
  min-height:230px !important;
  height:auto !important;
  box-sizing:border-box;
}

/* Materialkarte sauber in 2 Spalten */
#apLaserTopLayoutWrap .ap-laser-material-card .form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(180px,1fr));
  gap:14px;
}

/* Mengeneingabe nicht halb verloren wirken lassen */
#apLaserTopLayoutWrap .ap-laser-material-card .form-grid label:last-child{
  max-width:280px;
}

/* Größenkarte: links Werte, rechts Vorschau */
#apLaserTopLayoutWrap .ap-laser-size-card{
  display:grid;
  grid-template-columns:minmax(170px,.8fr) minmax(240px,1.2fr);
  gap:16px;
  align-items:center;
}

#apLaserTopLayoutWrap .ap-laser-size-card h2{
  grid-column:1 / -1;
  margin:0 0 4px;
}

#apLaserTopLayoutWrap .ap-laser-size-card label{
  display:flex;
  flex-direction:column;
  gap:7px;
}

#apLaserTopLayoutWrap .ap-laser-size-card input,
#apLaserTopLayoutWrap .ap-laser-material-card input,
#apLaserTopLayoutWrap .ap-laser-material-card select{
  min-height:42px;
}

/* Vorschau ordentlicher darstellen */
#apLaserTopLayoutWrap .ap-laser-size-card .preview,
#apLaserTopLayoutWrap .ap-laser-size-card .preview-box,
#apLaserTopLayoutWrap .ap-laser-size-card [id*="preview"],
#apLaserTopLayoutWrap .ap-laser-size-card [class*="preview"]{
  min-height:150px;
  width:100%;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Ergebnisbereich wieder sauber darunter */
.result-card{
  grid-column:1 / -1;
}

/* Auf kleineren Bildschirmen untereinander */
@media(max-width:1100px){
  #apLaserTopLayoutWrap{
    grid-template-columns:1fr;
  }

  #apLaserTopLayoutWrap .ap-laser-name-card{
    grid-column:auto;
  }

  #apLaserTopLayoutWrap .ap-laser-size-card{
    grid-template-columns:1fr;
  }

  #apLaserTopLayoutWrap .ap-laser-material-card .form-grid{
    grid-template-columns:1fr;
  }
}