:root {
  --ledningsdiameter: 15px;
  --kringfyllning_djup: 15px;
  --a_matt: 35px;
  --schaktdjup: 200px;
  --ledningsbadd_djup: 15px;

  /* Simplify recurring values */
  --kringfyllnad_total: calc(var(--kringfyllning_djup) + var(--ledningsdiameter));
  --rest_djup: calc(var(--ledningsbadd_djup) + var(--kringfyllnad_total));
  --restfyllning: calc(var(--schaktdjup) - var(--rest_djup));

  /* Combine similar calculations */
  --dubbel_faktor: 2;
  --a_matt_dubbel: calc(var(--a_matt) * var(--dubbel_faktor));
  --kringfyllnad_total_dubbel: calc(var(--kringfyllnad_total) * var(--dubbel_faktor));
  --restfyllning_dubbel: calc(var(--restfyllning) * var(--dubbel_faktor));

  /* Final calculations using reusability */
  --schaktbredd_totalt: calc(var(--ledningsdiameter) + var(--a_matt_dubbel) + var(--kringfyllnad_total_dubbel) + var(--restfyllning_dubbel));
}



@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

body {
  background-color: #080808;
}

h1{
  font-family: "Open Sans", sans-serif;
}

#boxmodel {
  position: relative;
  width: var(--schaktbredd_totalt);
  /* clip-path: polygon(0 0, 100% 0, 82% 100%, 15% 100%);     */
  -webkit-mask: linear-gradient(-135deg, #fff 50%, transparent 50%) top left,
    linear-gradient(-225deg, #fff 50%, transparent 50%) top right;
  -webkit-mask-size: 2000px 2000px;
  /* width = height and big enough to consider all the cases */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: destination-in;
  mask: linear-gradient(-135deg, #fff 50%, transparent 50%) top left,
    linear-gradient(-225deg, #fff 50%, transparent 50%) top right;
  mask-size: 2000px 2000px;
  /* width = height and big enough to consider all the cases */
  mask-repeat: no-repeat;
  mask-composite: intersect;
}

#ritningen {
  background-image: url("../img/layout/dirt.png");
  background-size: 17%;
  background-repeat: repeat;
  background-color: rgba(0, 0, 0, 0.9);
  /* Dark overlay */
  background-blend-mode: multiply;
  padding-bottom: 60px;
}

.rita_restfyllning {
  background-image: url("../img/layout/grus.jpg");
  background-size: 27%;
  background-repeat: repeat;
  background-color: rgba(255, 106, 0, 0.2);
  /* Dark overlay */
  background-blend-mode: lighten;
  height: var(--restfyllning);
}

.rita_kringfyllning {
  background-image: url("../img/layout/grus.jpg");
  background-size: 20%;
  background-repeat: repeat;
  background-color: rgba(255, 183, 0, 0.3);
  /* Dark overlay */
  background-blend-mode: soft-light;
  padding-top: var(--kringfyllning_djup);
}

.rita_ledningsbadd {
  background-image: url("../img/layout/grus.jpg");
  background-size: 20%;
  background-repeat: repeat;
  background-color: rgba(114, 114, 114, 0.2);
  /* Dark overlay */
  background-blend-mode: soft-light;
  height: var(--ledningsbadd_djup);
}

.rita_ledningsror {
  background-color: rgb(207, 200, 201);
  border-radius: 50%;
  border-color: black;
  border-style: solid;
  border-width: 5px;
  height: var(--ledningsdiameter);
  width: var(--ledningsdiameter);
  margin: auto;
}

.grass {
  position: relative;
  height: 40px;
  width: 100%;
  overflow: clip;
}

.grass>div {
  animation: breeze 8s cubic-bezier(.8, -0.5, .25, 1.5) infinite;
  background-color: rgb(16, 141, 16);
  border-right: solid 2px rgb(7, 121, 7);
  border-top-right-radius: 100%;
  bottom: 0;
  position: absolute;
  transform-origin: bottom;
  transition: all 100ms ease-in-out;
  width: 3px;
  overflow: hidden;
}

@keyframes breeze {

  0%,
  100% {
    transform: auto;
  }

  50% {
    transform: rotate(5deg);
  }
}

.custom-shape-divider-top-1731497812 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}





/* Calculation Form 2.0 */
.custom-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #ECE1D6;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.custom-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 400; /* 👈 inte bold */
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
  color: #495057;
}


.custom-label {
  font-weight: 600;
  margin-bottom: 0.4rem;
  display: block;
  color: #495057;
}

.custom-select,
.custom-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.custom-select:focus,
.custom-input:focus {
  outline: none;
  border-color: #007bff;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.custom-result {
  padding: 1rem;
  background: #f1f3f5;
  border-radius: 12px;
  min-height: 60px;
  font-weight: 500;
  text-align: center;
  color: #555;
  /* border: 1px dashed #ccc; */
}

.custom-button {
  padding: 0.85rem;
  background-color: #FF8C00;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.custom-button:hover {
  background-color: #BF6900;
}

@media (max-width: 480px) {
  .custom-container {
    padding: 1rem;
    border-radius: 12px;
    margin-left: 20px;
    margin-right: 20px;
    max-width: 600px;
  }

  .form-title {
    font-size: 1.25rem;
  }

  .custom-label,
  .custom-input,
  .custom-select,
  .custom-button {
    font-size: 1rem;
  }
}
.info-icon {
  cursor: help;
  font-size: 0.9em;
  margin-left: 4px;
  color: #666;
}
.box img {
  max-width: 200px; /* tidigare 150px */
  height: auto;
  display: block;
}
.box {
  margin-left: 10px;
}

.small-volym {
  width: 200px; 

}
.volym-kolumn {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 200px; /* gör kolumnen smal */
}
h1, .rubrik-stor {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}
body {
  background: linear-gradient(to bottom, #000, #000, #000, #000, #453501, #111, #000, #000, #000);
}