/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2026/2027 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->													                            6.00/12 - 06-02-26
/* layout	-> startpage only
/* file 	-> design/start-slider.css
/* info	  -> https://codepen.io/emared/pen/BxKQjw
/* update -> 25-04-2018
/* ------------------------------------------------------------------------------ */
/* START-SLIDER */

.slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 65vh;
}

.slider-wrapper::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background-color: #f1f1f1;
  z-index: -1;
}

/* Smartphones – alles ausblenden */
@media only screen and (max-width: 768px), only screen and (pointer: coarse) and (max-width: 819px) {
  .slider-wrapper,
  .category-list,
  .home-slider-text-container {
    display: none !important;
  }
}

/* Standard-Layout (Desktop) */
.category-list {
  box-sizing: border-box;
  width: 30%;
  margin: 0;
  padding: 6% 5%;
  list-style: none;
}

.home-category-item {
  margin: 6px 0;
  padding: 8px 0;
  opacity: 0.6;
  cursor: auto;
  transition: all 0.85s cubic-bezier(0.25, 1, 0.33, 1);
}

.home-category-item span {
  display: inline-block;
}

.home-category-item:hover {
  opacity: 1;
}

.home-category-item:hover .home-category-name,
.home-category-item:hover .home-category-description {
  transform: translateX(0px);
}

.home-category-item.hover {
  border-left: 4px solid rgba(255, 255, 255, 0.05);
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.home-category-item.active {
  min-width: 100% !important;
  border-left: 4px solid #213F67;
  border-radius: 0 6px 6px 0;
  opacity: 1;
  background-color: rgba(130, 157, 189, 0.2);
}

.home-category-number {
  margin-right: 15px;
  font-size: 12px;
}

.home-category-name {
  font-size: 26px;
  transition: all 0.85s cubic-bezier(0.25, 1, 0.33, 1);
}

.home-category-description {
  display: block;
  width: 100%;
  margin-left: 32px;
  line-height: 1.5;
  font-size: 14px;
  transition: all 0.85s cubic-bezier(0.25, 1, 0.33, 1);
}

.home-slider-panel-container {
  position: relative;
  width: 70%;
  height: 100%;
  min-height: 500px;
  padding: 75px 6% 75px 0;
  box-sizing: border-box;
}

.home-inner-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.home-slider-text-container {
  position: absolute;
  box-sizing: border-box;
  width: 50%;
  bottom: 35px;
  left: -40px;
  padding: 35px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 60px 135px rgba(0, 0, 0, 0.1), 0 15px 65px rgba(0, 0, 0, 0.14);
  z-index: 1;
}

.home-slider-title {
  margin: 0 0 0 10px;
  font-weight: normal;
  color: #111;
}

.home-slider-description {
  margin-bottom: 0;
  line-height: 1.2;
  font-size: 18px;
  color: #111;
  opacity: 0.7;
}

.slider-panel {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  transition: all 0.85s cubic-bezier(0.25, 1, 0.33, 1);
}

.slider-panel.default {
  position: relative;
  background-image: url('../content/images/start/start-ensys-eschborn.avif');
}

.slider-panel.hidden {
  left: 100%;
  opacity: 0;
  pointer-events: none;
}

.slider-panel.hidden.is-hover {
  left: 0;
  animation: ken-burns 12s infinite ease-in-out;
}

.slider-panel.is-hover {
  left: 0;
  opacity: 1;
  pointer-events: auto;
  animation: ken-burns 12s ease-in-out;
}

.slider-panel#residential-panel {
  background-image: url('../content/images/start/buero-eingang-eschborn.avif');
}

.slider-panel#hotels-panel {
  background-image: url('../content/images/start/speicher-container-dslr-gpt.avif');
}

.slider-panel#care-home-panel {
  background-image: url('../content/images/start/leistungen-bs-ensys-speicher.avif');
}

.slider-panel#student-panel {
  background-image: url('../content/images/start/referenzen-office-building-dslr-gpt.avif');
}

@keyframes ken-burns {
  0% {
    transform: scale(1) rotate(0deg) translate(0, 0);
  }
  50% {
    transform: scale(1.1) rotate(-1.2deg) translate(10px, -10px);
  }
  100% {
    transform: scale(1) rotate(0deg) translate(0, 0);
  }
}

/* ================= Tablet-Anpassung (769px – 1024px) ================= */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .category-list {
    width: 45%;
    padding: 4% 3%;
  }

  .home-slider-panel-container {
    width: 55%;
    padding: 40px 4% 40px 0;
  }

  .home-category-name {
    font-size: 20px;
  }

  .home-category-description {
    font-size: 13px;
  }
}

/* ================= Ab 1180px und kleiner: Textbox ausblenden ================= */
@media only screen and (max-width: 1180px) {
  .home-slider-text-container {
    display: none !important;
  }
  .jump4next {
    display: none !important;
  }
}

/* ================= Ab 1025px und kleiner: Slider-Panel anpassen ================= */
.mobile-slider-fallback {
  display: none;
  text-align: center;
  padding: 20px;
}

.mobile-slider-fallback img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Nur Smartphone Hochformat (max-width < 768px und Portrait) */
@media only screen and (max-width: 768px) and (orientation: portrait) {
  .mobile-slider-fallback {
    display: block;
  }
}

/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */