/* .page-configurator-header h1 {
  font-weight: 400;
  border-left: solid #000 2px;
  padding:.5rem 0 .5rem 1rem;
  font-size: 2rem;
}
@media only screen and (min-width : 992px) {
  .page-configurator-header {
    transform: translate(0, -100%);
    max-width: 50%;
  }
} */
.page-configurator .page-gallery {
  margin-bottom: 4.5rem;
}
.page-configurator-image {
  align-self: flex-start;
  /* position: sticky;
  top: 0;
  order: -1; */
  display: grid;
  background-color: #fff;
  padding-bottom: 1rem;
}
@media only screen and (min-width : 992px) {
  .page-configurator-image {
    order: 2;
  }
}
.configurator-3dmodell {
  grid-area: 1/-1;
  z-index: 1;
}
.page-configurator-image  .icon-rotate {
  grid-area: 1/-1;
  justify-self: center;
  align-self: center;
  z-index: 2;
  margin-bottom: 1rem;
  pointer-events: none;
  animation-name: rotate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
.configurator-groundplans {
  grid-area: 1/-1;
  z-index: 3;
  align-self: start;
}
@media only screen and (min-width : 992px) {
  .page-configurator-content {
    flex:0 0 50%;
    max-width: 50%;
  }
  .page-configurator-image {
    flex:0 0 50%;
    max-width: 50%;
  }
}
.configurator,
.configurator input,
.configurator textarea {
  font-size:.8333rem;
}
.configurator-steps {
  --counter-size: 2.9166rem;
}
.configurator-step {
  margin-bottom:1rem;
  position: relative;
}

.configurator-step::before {
  content:'';
  position: absolute;
  left:calc((var(--counter-size) / 2) - 1px);
  top:calc(var(--counter-size) + 4px);
  bottom:calc(-1rem + 4px);
  border-left: solid var(--beige-mediumdark) 2px;
}
.configurator-step:last-child::before {
  content: normal;
  display: none;
}

.configurator-step > summary {
  list-style: none;
  font-size:1.25rem;
  text-transform: uppercase;
  color:var(--beige-mediumdark);
}
.configurator-step > summary::-webkit-details-marker {
  display: none;
}
.configurator-step > summary .summary-inner {
  display: flex;
  gap:1rem;
  align-items: center;
  justify-content: flex-start;
}
.configurator-step > summary .summary-num {
  font-size:calc(var(--counter-size) * .5714);
  font-weight: 600;
  color:#fff;
  background:var(--beige-mediumdark);
  display:block;
  flex:0 0 var(--counter-size);
  width:var(--counter-size);
  height:var(--counter-size);
  line-height:var(--counter-size);
  text-align: center;
  border-radius: 50%;
}
.configurator-step > summary .summary-title {
  white-space:nowrap;
  text-overflow: ellipsis;
}
.configurator-step > .details-content {
  padding-left:calc(var(--counter-size) + 1rem);
  padding-top: 1rem;
  /*padding-bottom: 1rem;*/
}
.configurator-step-next {
  border:solid #000 2px;
  /*border-radius: 0 1.6249rem 1.6249rem 0;*/
  border-radius: 0 1.25rem 1.25rem 0;
  background:#fff;
  color: #000;
  min-height: 2.5rem;
  display:flex;
  align-items: center;
  /*margin-left:auto;*/
  margin-top:1.5rem;
  padding:0 1.5rem 0 .75rem;
  font-size:1rem;
  font-weight: 400;
  transition: background-color .2s ease, color .2s ease;
}
.configurator-step-next:not(:disabled):hover {
  color:#fff;
  background:#000;
}
.configurator-step-next:disabled {
  color:var(--gray);
  border-color:var(--gray);
  cursor: auto;
}
.configurator-step-next span {
  font-size:1rem;
  margin-left:.5rem;
}
[data-is-checked=true] .configurator-step-next {
  display:none;
}

.configurator-options {}
.configurator-options summary {
  display:flex;
  gap:1rem;
  justify-content: space-between;
  align-items: center;
  font-size:.8333rem;
  font-weight: 800;
  text-transform: uppercase;
  border-bottom:solid var(--beige-mediumdark) 2px;
  padding:.375rem 0;
}
.configurator-options summary::after {
  content:'';
  min-width:.625rem;
  width:.625rem;
  height:.625rem;
  background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cGF0aCBpZD0iUGZhZF8xOTg0IiBkPSJNMCwybDcuNSwxMC45NjRsNy41LC0xMC45NjRsLTE1LDBaIiBzdHlsZT0iZmlsbC1ydWxlOm5vbnplcm87Ii8+PC9zdmc+');
  transform-origin: 50% 50%;
  transition:transform .2s ease;
}
.configurator-options[open] summary::after {
  transform:rotate(180deg);
}
.configurator-options .details-content {
  padding:.375rem 0;
  /*overflow-y:auto;*/ /* Safari: input[type-radio] angeschnitten */
}
.configurator-options-color .details-content {
  overflow-y:auto;
  max-height:27rem;
}
.configurator-option {}
.configurator-option-row {
  display:flex;
  gap:1rem;
}
.configurator-option-label {
  font-weight:600;
  font-size:.8333rem;
}
.configurator-options-model .configurator-option-label {
  font-weight:400;
}
.configurator-option-desc {
  font-size:.75rem;
  margin-bottom:.75rem;
}
.configurator-option .row {
  margin:0 0 .75rem 0;
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1rem;
}
.configurator-option:last-child .row {
  margin-bottom:0;
}
.configurator-option .row .configurator-option-image {
  flex: 0 0 4rem;
  max-width: 4rem;
  margin-right: 1rem;
  padding:0;
}
.configurator-option .row .configurator-option-image img {
  width:100%;
  height:auto;
  display: block;
}
.configurator-option .row .configurator-option-desc {
  flex: 0 0 calc(100% - 5rem - 1rem);
  padding:0;
  margin-bottom: 0;
}
.configurator-option .row .configurator-option-desc p {
  margin-bottom: .5rem;
}
.configurator-option .row .configurator-option-desc > :last-child {
  margin-bottom: 0;
}
.configurator-option-desc .configurator-option-label {
  display:block;
}

/* show / hide / isFilled / isComplete */

.configurator-step[data-is-complete='true'] > summary .summary-num,
.configurator-step[data-is-active='true'] > summary .summary-num {
  background:#000;
}
.configurator-step[data-is-complete='true'] > summary,
.configurator-step[data-is-active='true'] > summary {
  color:#000;
}
.configurator-options/*[data-is-filled='false']*/ {
  display:none;
}
.configurator-options[data-is-filled='true'],
.configurator-options[data-is-active='true'] {
  display:block;
}



/* Modell, Groesse
 * ******************************/
.configurator-options-size-row {
  display:flex;
  gap:.6666rem;
}
.configurator-options-size input[type=radio] {
  position: absolute;
  left: -100vw;
}
.configurator-options-size .label {
  display:block;
  line-height:1.35;
  background:var(--beige-mediumdark);
  color:#fff;
  padding:.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition:background-color .2s ease;
}
.configurator-options-size label:first-of-type .label {
  border-radius:1.6249rem 0 0 1.6249rem;
  padding-left:1.6249rem;
}
.configurator-options-size label:last-of-type .label {
  border-radius:0 1.6249rem 1.6249rem 0;
  padding-right:1.6249rem;
}
.configurator-options-size .label:hover {
  background-color: var(--beige-darker);
}
.configurator-options-size .title {
  display:block;
  font-weight: 800;
  text-transform: uppercase;
}
.configurator-options-size input[type=radio]:checked + .label  {
  background:#000;
}

/* Model
 * ******************************/
.configurator-options-model .configurator-option-label {
  display: flex;
  gap: .5rem;
}
.configurator-options-model .configurator-option-label [type=radio] {
  margin-top:.4em;
}

/* RAL Farben
 * ******************************/
.configurator-ral-selector {
  display:grid;
  grid-template-columns: 1fr;
  gap:.75rem;
}
.configurator-ral-selector h3 {
  grid-column:1/-1;
  font-size:.8333rem;
  text-transform: uppercase;
  color:var(--beige-mediumdark);
}
.configurator-ral-selector .configurator-option-label {
  display:flex;
  gap:.5rem;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.configurator-ral-selector input[type=radio] {
  position: absolute;
  left: -100vw;
}
.configurator-ral-selector .color {
  width:2.9166rem;
  height:2.9166rem;
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:var(--gray);
  display: flex;
  justify-content: center;
  align-items: center;
}
.configurator-ral-selector .name {
  font-weight: 400;
}
.configurator-ral-selector input[type=radio]:checked + .color::after {
  content:'';
  background:#fff;
  width:.75rem;
  height:.75rem;
  border-radius: 50%;
}
@media only screen and (min-width : 580px) {
  .configurator-ral-selector {
    grid-template-columns: repeat(2, 1fr);
  }
}

.configurator-arrangement-section {
  padding-bottom:1rem;
  margin-bottom: 1rem;
  border-bottom: solid var(--beige-mediumdark) 2px;
}
.configurator-arrangement-section p {
  margin-bottom:0;
}
.configurator-arrangement-section dl {
  margin:0;
  padding:0;
  display:flex;
  gap: 1rem;
  justify-content: space-between;
}
.configurator-arrangement-section dt,
.configurator-arrangement-section dd {
  margin:0;
  padding:0;
  font-weight: 400;
}


fieldset.address {
  display:grid;
  grid-template-columns: 5rem auto;
  grid-column-gap: 1rem;
}
fieldset.address legend {
  display:none;
}
fieldset.address > * {
  grid-column: 1/-1;
}
fieldset.address input[name=zip],
fieldset.address input[name=city],
fieldset.address input[name=shipping-zip],
fieldset.address input[name=shipping-city] {
  grid-column: span 1;
}
fieldset.address > label {
  padding:.375em 0;
}

.configurator-submit {
  border:solid #000 2px;
  border-radius: 0 1.6249rem 1.6249rem 0;
  background:#000;
  color: #fff;
  width:100%;
  min-height: 3.25rem;
  display:flex;
  align-items: center;
  justify-content: flex-start;
  margin-left:auto;
  margin-top:1.5rem;
  padding:0 1.5rem 0 .75rem;
  font-size:1.25rem;
  font-weight: 800;
  transition: background-color .2s ease, color .2s ease;
}
.configurator-submit svg {
  display:inline-block;
  width:3.35rem;
  height:auto;

}
.configurator-submit:hover {
  background-color: #000;
}
.configurator-realsubmit {
  display: none;
}

.configurator-3dmodell-aspect-ratio {
  /*height:0;*/
  /*padding-bottom:63.4%;*/
  position: relative;
}
.configurator-3dmodell {
  /*
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  */
  aspect-ratio: 1120/710;
  width: 100%;
  height: auto;
}
.configurator-3dmodell canvas {
  display:block;
  width:100% !important;
  height:auto !important;
}

.configurator-velodepo-info {
  display:flex;
  flex-wrap: wrap;
  gap:1rem;
}
.configurator-velodepo-info > * {
  border-left: solid var(--beige-mediumdark) 2px;
  padding-left:1rem;

}
.configurator-velodepo-info .velodepo-size-large {
  display:none;
}
.configurator-velodepo-info .velodepo-size dl {
  margin:0;
  padding: 0;
  display:flex;
  font-weight: 600;
}
.configurator-velodepo-info .velodepo-size dt {
  margin:0;
  padding: 0;
  width:1.25rem;
}
.configurator-velodepo-info .velodepo-size dd {
  margin:0;
  padding: 0;
  white-space: nowrap;
}
.configurator-velodepo-info .velodepo-size abbr[title] {
  text-decoration: none;
}
.configurator-velodepo-info .velodepo-datasheet {
  font-weight:800;
  text-transform: uppercase;
  display: none !important;
}
.configurator-velodepo-info .velodepo-datasheet a {
  display: flex;
  gap: .75rem;
  text-decoration: none;
}
.configurator-velodepo-info .velodepo-datasheet svg {
  margin-top:.375rem;
  display:block;
  width: 1.65rem;
}
.configurator-velodepo-info .velodepo-instructions {
  text-transform: uppercase;
  display: none;
}
.configurator-velodepo-info .velodepo-instructions ul {
  margin-bottom: 0;
}
.configurator-velodepo-info .velodepo-instructions a {
  text-decoration: none;
}

.configurator-groundplans img {
  display:none;
  width:100%;
  height:auto;
}

/* Testing */

button[data-color],
button[class^=material-] {
  padding:.75rem;
  border:0;
  color:#fff;
  min-height:0;
  border-radius: 0;
  margin-right:1rem;
  margin-bottom:1rem;
}
.configurator-3dmodel-mnaterials button {
  padding:.75rem;
  border:0;
  color:#fff;
  min-height:0;
  border-radius: 0;
  margin-right:1rem;
  margin-bottom:1rem;
}

.scene-settings {
  display:none;
}
.admin .scene-settings {
  display:block;
}