/* SOLUTIONS HERO */

.solutions_new_hero {
  height: 100vh;
  background-image:
    url("../images/solutions/solution-hero.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}

.solutions_hero_content {
  position: absolute;
  left: 7%;
  bottom: 12%;
  color: rgb(51, 15, 15);
  max-width: 900px;

  background: white;
  padding: 35px 45px;
  border-radius: 24px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

}

.solutions_hero_content h1 {
  font-size: 72px;
  line-height: 1.05;
  margin: 20px 0;
}

.solutions_hero_content p {
  font-size: 36px;
  line-height: 1.5;
}

.small_title {
  color: rgb(33, 211, 10);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 01 / 03 SECTIONS */

.solutions_split {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 110px 7%;
  gap: 70px;
  overflow: hidden;
  position: relative;
}



.split_text,
.split_image {
  width: 50%;
}

.split_text h2 {
  text-align: left;
  font-size: 52px;
  line-height: 1.12;
}

.split_text p {
  font-size: 32px;
  line-height: 1.7;
}

.split_image img {
  width: 100%;
  max-width: 100%;
  height: 560px;
  object-fit: cover;
  border-radius: 34px;
  transition: transform 0.6s ease;
  display: block;
}

.split_image img:hover {
  transform: scale(1.03);
}

.solutions.digital_small {
  min-height: 100vh;
}

.small_digital_image img {
  height: 560px;
  
}

.mini_stats {
  display: flex;
  gap: 40px;
  margin-top: 35px;
}

.mini_stats div {
  border-left: 4px solid rgb(33, 211, 10);
  padding-left: 18px;
}

.mini_stats strong {
  display: block;
  font-size: 42px;
  color: rgb(33, 211, 10);
}

.mini_stats span {
  font-size: 28px;
  color: #333;
}

/* 02 SECTION */

.solutions_transition {
  min-height: 100vh;
  padding: 110px 7%;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: white;
  overflow: hidden;
  position: relative;
}

.service_background {
  background-image:
    url("../images/solutions/integrated-service.jpg");
}

.section_inner {
  max-width: 820px;
}

.section_inner h2 {
  text-align: left;
  font-size: 56px;
  line-height: 1.12;
}

.section_inner p {
  font-size: 32px;
  line-height: 1.7;
}

/* RENTAL TITLE */

.rental_title {
  min-height: 110vh;
  display: flex;
  align-items: flex-end;
  padding: 170px 7%;
  color: black;
  background-size: cover;
  background-position: center;
}
.office_title {
  background-image:
    url("../images/solutions/office-main.jpg");
}

.warehouse_title {
  background-image:
    url("../images/solutions/warehouse-main.jpg");
}

.rental_title div {
   max-width: 900px;

  background: rgba(255, 255, 255, 0.95);

  padding: 35px 45px;

  border-radius: 24px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

}

.rental_title h2 {
  text-align: left;
  font-size: 88px;
  line-height: 1;
}

.rental_title p {
  font-size: 30px;
  line-height: 1.5;
  max-width: 950px;
}

/* RENTAL CONTENT */

.rental_showcase {
  padding: 110px 7%;
  background:
    linear-gradient(180deg, #eef7ef 0%, #ffffff 35%, #f7f7f7 100%);
  position: relative;
  margin-top: -1px;
}



.rental_layout {
  display: flex;
  align-items: center;
  gap: 60px;
}

.rental_slider {
  width: 56%;
  height: 560px;
  overflow: hidden;
  position: relative;
  border-radius: 34px;
}

.slider_track {
  height: 100%;
  display: flex;
  transition: transform 0.7s ease;
}

.slider_track img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.slider_btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  border: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 36px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.85);
}

.slider_btn.prev {
  left: 18px;
}

.slider_btn.next {
  right: 18px;
}

.rental_description {
  width: 44%;
}

.rental_description h3 {
  font-size: 34px;
  margin-bottom: 20px;
}

.rental_description p,
.rental_description li {
  font-size: 18px;
  line-height: 1.6;
}

.rental_description ul {
  padding-left: 20px;
}

.conditions {
  margin: 25px 0;
  border-left: 4px solid rgb(33, 211, 10);
  padding-left: 20px;
}

.conditions p {
  margin: 8px 0;
}

.flyer_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.flyer_buttons a {
  background-color: rgb(33, 211, 10);
  color: white;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 40px;
  font-weight: 700;
}

.rental_bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin-top: 60px;
  padding-right: 120px;
}

.contact_small {
  width: 420px;
  padding: 20px 0;
}

.contact_small h3 {
  font-size: 30px;
}

.contact_small p,
.contact_small a {
  font-size: 19px;
  line-height: 1.6;
}

.contact_small a {
  color: rgb(33, 211, 10);
  font-weight: 700;
  text-decoration: none;
}

.rental_bottom iframe {
  width: 420px;
  height: 340px;
  border: 0;
  border-radius: 28px;
  margin-left: -10px;
}

/* LIGHTBOX */

.image_lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.86);
  justify-content: center;
  align-items: center;
  padding: 30px;
}

.image_lightbox.active {
  display: flex;
}

.lightbox_img {
  max-width: 92%;
  max-height: 88vh;
  border-radius: 24px;
  object-fit: contain;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .navigation {
    display: none;
  }

  .solutions_hero_content h1,
  .rental_title h2 {
    font-size: 42px;
  }

  .solutions_split,
  .solutions_transition,
  .rental_layout,
  .rental_bottom {
    flex-direction: column;
  }

  .solutions_split,
  .solutions_transition,
  .rental_title,
  .rental_showcase {
    padding: 60px 24px;
  }

  .split_text,
  .split_image,
  .rental_slider,
  .rental_description {
    width: 100%;
  }

  .split_image img,
  .rental_slider {
    height: 360px;
  }

  .rental_bottom iframe {
    width: 100%;
    height: 320px;
  }
}

/* 01 + 03: auffälliger, unordentlicher Motion Background */

.particle_background {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(135deg, #f3fff3 0%, #ffffff 45%, #eaf8eb 100%);

  color: #111;
}

.particle_background .split_text p,
.particle_background .mini_stats span {
  color: #333;
}
.particle_background::before {
  display: none;
}

.particle_background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 7% 15%, rgba(33, 211, 10, 0.95) 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 18% 72%, rgba(255, 255, 255, 0.85) 0 1.2px, transparent 2px),
    radial-gradient(circle at 31% 28%, rgba(33, 211, 10, 0.75) 0 1.6px, transparent 2.5px),
    radial-gradient(circle at 47% 84%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 18%, rgba(33, 211, 10, 0.9) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 82% 56%, rgba(255, 255, 255, 0.75) 0 1.2px, transparent 2px),
    radial-gradient(circle at 94% 30%, rgba(33, 211, 10, 0.8) 0 1.7px, transparent 2.7px);
  background-size:
    260px 260px,
    310px 310px,
    220px 220px,
    340px 340px,
    280px 280px,
    360px 360px,
    240px 240px;
  opacity: 0.8;
  animation: randomParticles 7s linear infinite;
  z-index: 0;
  pointer-events: none;
}

.particle_background > * {
  position: relative;
  z-index: 2;
}

/* RENTAL: verbundenes Netzwerk */

.network_background {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #f3fff3 0%, #ffffff 45%, #eaf8eb 100%);
}

.network_background::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='520' viewBox='0 0 900 520'%3E%3Cg fill='none' stroke='%2321d30a' stroke-opacity='0.30' stroke-width='1.5'%3E%3Cpath d='M60 80 L180 140 L320 90 L470 180 L640 120 L820 210'/%3E%3Cpath d='M120 360 L250 300 L390 360 L560 290 L740 350'/%3E%3Cpath d='M180 140 L250 300 L470 180 L560 290 L820 210'/%3E%3Cpath d='M320 90 L390 360 L640 120 L740 350'/%3E%3C/g%3E%3Cg fill='%2321d30a' fill-opacity='0.55'%3E%3Ccircle cx='60' cy='80' r='5'/%3E%3Ccircle cx='180' cy='140' r='4'/%3E%3Ccircle cx='320' cy='90' r='5'/%3E%3Ccircle cx='470' cy='180' r='4'/%3E%3Ccircle cx='640' cy='120' r='5'/%3E%3Ccircle cx='820' cy='210' r='4'/%3E%3Ccircle cx='120' cy='360' r='5'/%3E%3Ccircle cx='250' cy='300' r='4'/%3E%3Ccircle cx='390' cy='360' r='5'/%3E%3Ccircle cx='560' cy='290' r='4'/%3E%3Ccircle cx='740' cy='350' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 440px 200px;
  background-repeat: repeat;
  filter: blur(0.2px);
  opacity: 0.9;
  animation: networkConnectedMove 8s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

.network_background > * {
  position: relative;
  z-index: 2;
}

@keyframes movingLightsStrong {
  0% {
    background-position: 0% 0%;
    transform: scale(1);
  }

  50% {
    background-position: 70% 40%;
    transform: scale(1.08);
  }

  100% {
    background-position: 100% 100%;
    transform: scale(1.14);
  }
}

@keyframes randomParticles {
  from {
    background-position:
      0 0,
      40px 80px,
      120px 30px,
      30px 160px,
      80px 40px,
      200px 120px,
      50px 90px;
  }

  to {
    background-position:
      -260px -200px,
      220px -160px,
      -180px 140px,
      160px -240px,
      -220px 180px,
      260px -190px,
      -160px -140px;
  }
}

@keyframes networkConnectedMove {
  0% {
    background-position: 0 0;
    transform: scale(1);
  }

  100% {
    background-position: -180px -100px;
    transform: scale(1.04);
  }
}