/* =========================================================
   ZEUS V288 · LADUNGSRECHNER
   ========================================================= */

#v288-load-calculator{
  width:100%;
  margin:14px 0 20px;
}


#v288-load-calculator *{
  box-sizing:border-box;
}


.v288-card{
  width:100%;

  padding:16px;

  border:
    1px solid
    rgba(212,175,55,.18);

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );

  box-shadow:
    0 14px 38px
    rgba(0,0,0,.15);
}


.v288-head{
  display:flex;

  align-items:center;

  gap:11px;

  margin-bottom:15px;
}


.v288-icon{
  display:flex;

  align-items:center;
  justify-content:center;

  flex:0 0 44px;

  width:44px;
  height:44px;

  border-radius:12px;

  background:
    rgba(212,175,55,.08);

  font-size:1.25rem;
}


.v288-head h3{
  margin:0;

  font-size:1.05rem;
}


.v288-head p{
  margin:3px 0 0;

  font-size:.72rem;

  opacity:.64;
}


.v288-input-grid{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:10px;
}


.v288-input-grid label{
  display:flex;

  flex-direction:column;

  gap:5px;

  min-width:0;
}


.v288-input-grid label span{
  font-size:.7rem;
  font-weight:700;

  opacity:.72;
}


.v288-input-grid input{
  width:100%;
  min-width:0;

  min-height:44px;

  padding:9px 11px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:10px;

  background:
    rgba(0,0,0,.12);

  color:inherit;

  font-size:16px;

  outline:none;
}


.v288-input-grid input:focus{
  border-color:
    rgba(212,175,55,.45);

  box-shadow:
    0 0 0 3px
    rgba(212,175,55,.07);
}


.v288-results{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:8px;

  margin-top:13px;
}


.v288-results > div{
  display:flex;

  flex-direction:column;

  justify-content:center;

  min-width:0;
  min-height:65px;

  gap:4px;

  padding:10px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:10px;

  background:
    rgba(0,0,0,.10);
}


.v288-results span{
  font-size:.66rem;

  opacity:.64;
}


.v288-results strong{
  font-size:1rem;

  overflow-wrap:anywhere;
}


.v288-main{
  border-color:
    rgba(212,175,55,.28)!important;

  background:
    rgba(212,175,55,.06)!important;
}


.v288-main strong{
  font-size:1.18rem;
}


.v288-clear{
  width:100%;

  min-height:38px;

  margin-top:11px;

  border-radius:9px;

  font-size:.7rem;
}


@media(max-width:900px){

  .v288-results{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


@media(max-width:600px){

  .v288-card{
    padding:12px;
  }


  .v288-input-grid{
    grid-template-columns:
      1fr;
  }

}


@media(max-width:400px){

  .v288-results{
    grid-template-columns:
      1fr;
  }

}