/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2025/2026 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->													                            6.00/14 - 14-06-25
/* layout	-> startpage only                           													  */
/* file 	-> design/start-slider.css				                    								  */
/* info	  -> https://codepen.io/rafaelavlucas/pen/yZNVNj       									  */
/* update	-> 08-11-2019                                        									  */
/* ------------------------------------------------------------------------------ */
/* START-SLIDER */

/* swiper */
.swiper-container {
  display: flex;
  width: 100%;
  height: 76.75vh;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: all 0.6s ease;
}

.swiper-slide {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: left;
  transition: all 0.3s ease;
  background-position: fixed;
}

.swiper-item {
  position: absolute;
  display: flex;
  /*width: 70%; /* self 100%; */
  width: 70vw;
  /*height: 70%; /* self 100%; */
  height: 60vh;
  background-size: cover;
  background-position: center;
  align-items: center;
  justify-content: cente;
  border-radius: 0 6px 6px 0; /* not more than 6px */
  transition: all 0.4s ease;
}

/* NUMBER - BOTTOM RIGHT */
.swiper-slide .number {
  position:absolute;
  right: 48px; /* self 10px; */
  bottom: 128px; /* self -40px; */
  width:auto;
  height:auto;
  font-weight:600;
  font-size: 120px;
  -webkit-text-stroke: 1px #cccccc; /* self white; */
  color:transparent;
  opacity:.6;
}

@media screen and (max-width: 512px) {
  .swiper-slide .number {
    display: none;
  }

  .swiper-item {
    width: 90%;
  }
}
.swiper-item:after {
  content:'';
  position:absolute;
  bottom:0;
  width:100%;
  height:inherit;
  background-color: #000;
  opacity:.1;
  z-index:1;
}

.swiper-item:before {
  content:'';
  position:absolute;
  top:0;
  width:100%;
  height:30%;
  opacity:.2;
  z-index:1;
}

/* swiper arrows */
.swiper-arrows {
  position:absolute;
  display:flex;
  right:20%;
  bottom:0px;
  width:400px;
  height:80px;
  justify-content:center;
  align-items:center;
}

@media screen and (max-width: 512px) {
  .swiper-arrows {
    right:10%;
  }
}
.swiper-button-prev,
.swiper-button-next {
  display:flex;
  top:0;
  bottom:0;
  width:80px;
  height:80px;
  margin:0;
  align-items:center;
  justify-content:center;
  background-image:none;
  transition: all 0.3s ease;
}

.swiper-button-prev {
  right:80px;
  left:auto;
  border-radius: 6px 0 0 0;
  background-color: rgba(255, 255, 255, 0.7);
}

.swiper-button-next {
  right:0px;
  background-color: rgba(255, 255, 255, 0.8);
}

.swiper-button-prev span,
.swiper-button-next span {
  display:flex;
  position:absolute;
  width:10px;
  height:10px;
  align-items:center;
  justify-content:center;
  background-color:transparent;
  border:2px solid #666666;
  border-left:0;
  border-bottom:0;
  transition: all 0.1s ease;
}

.swiper-button-prev span {
  left:49%;
  transform:rotate(-135deg);
}

.swiper-button-next span {
  right:49%;
  transform:rotate(45deg);
}

.swiper-button-prev:hover span,
.swiper-button-next:hover span {
  width:5px;
  height:5px;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  content:'';
  position:absolute;
  width:0px;
  height:inherit;
  background-color: #fff;
  transition: all 0.4s ease-in-out;
  opacity:.8;
  z-index:-1;
}

.swiper-button-prev:hover {
  border-radius: 6px 0 0 0; 
}

.swiper-button-prev:after {
  right:0;
  border-radius: 6px 0 0 0;
}

.swiper-button-next:after {
  left:0;
}

.swiper-button-prev:hover:after,
.swiper-button-next:hover:after {
  width:inherit;
}

.swiper-button-disabled {
  opacity: 1 !important;
}

.swiper-button-disabled.swiper-button-prev span,
.swiper-button-disabled.swiper-button-next span {
  opacity:.2;
}

/* swiper arrows mobile */
@media screen and (max-width: 512px) {
.swiper-button-prev,
.swiper-button-next {
    bottom:0;
    width:60px;
    height:60px;
  }

  .swiper-arrows {
    height:60px;
  }

  .swiper-button-prev {
    right:60px;

  }

  .swiper-button-prev span {
    left:45%;
  }

  .swiper-button-next span {
    right:45%;
  }
}
/* ------------------------------------------------------------------------------ */
/* PAGINATION - TO RIGHT */
/* swiper pagination */
.swiper-pagination {
  display:flex;
  position:absolute;
  flex-direction:column;
  top:26px;
  right:calc(24% - 80px);
  left:auto !important;
  width:80px !important;
  height:4px;
  height:100%;
  float:right;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin:2px 0px;
}
.swiper-pagination-bullet {
  width:30px;
  height:12px; /* self 3px; */
  background-color:#cccccc; /* self white; */
  transition: all 0.6s ease-in-out;
  border-radius: 0px;
  opacity:1;
  opacity:0.6; /* self 0.5; */
}

.swiper-pagination-bullet:hover {
  width:50px;
  background-color:rgba(239,116,30,.6);
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet-active:hover {
  left: 0;
  width:60px;
  background-color:var(--color-primary); /* self rgba(239,116,30,1); /* self white; */
  transition: all 0.3s ease-in-out;
  opacity: 1;
}

/* swiper pagination mobile */
@media screen and (max-width: 512px) {
  .swiper-pagination {
    right:calc(10% - 60px);
  }

.swiper-pagination-bullet,
.swiper-pagination-bullet:hover {
    width:15px;
  }

  .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 4px 0px;
  }

.swiper-pagination-bullet-active,
.swiper-pagination-bullet-active:hover {
    width:25px;
  }
}

/* ------------------------------------------------------------------------------ */
/* text content */
.slide-text {
  position:absolute;
  right:5%;
  width:40%;
  max-width: 512px;
  padding: 30px;
  text-align: left;
  /*border: 1px solid orange;*/
  border-radius: 6px;
  /*background-color:rgba(204,204,204,.025);*/
  color: #ccc;
  opacity:1;
  z-index:2;

  display: block;           /* Wichtig, damit es wie ein <div> funktioniert */
  text-decoration: none;    /* Unterstreichung entfernen */
  color: inherit;           /* Textfarbe erben */
  cursor: pointer;          /* Klickbarer Cursor */
}

/* ------------------------------------------------------------------------------ */
/* slide-text-section                                          6.00/14 - 14-06-25 */
.glass-slide-text {
  background:var(--gls-bgr-col);
  border:1px solid var(--gls-bdr-col);
  backdrop-filter:blur(var(--gls-blr-siz));
  -webkit-backdrop-filter:blur(var(--gls-blr-siz));
  box-shadow:var(--gls-shd-box);
}

.slide-text.playText {
  animation: transitionText 2s ease;
}

@keyframes transitionText {
  0% {
    right: -100%;
  }
  100% {
    right: 5%;
  }
}
.slide-text h1 {
  margin:0;
  padding:0;
  font-weight:400;
  font-size:28px;
  letter-spacing:.03em;
  color: #000;
}

.slide-text p {
  margin:10px 0 0 0;
  font-weight:200;
  font-size:18px;
}

/* text content mobile */
@media screen and (max-width: 512px) {
  .slide-text {
    width: 60%;
  }

  .slide-text h1 {
    font-size: 15px;
    letter-spacing: 0.02em;
  }

  .slide-text p {
    font-size: 14px;
  }
}
/* <a>-tag | button */
.slide-text .btn {
  position:relative;
  left:-3px;
  margin-top:16px;
  padding:0 15px;
  font-size: 20px;
  /*letter-spacing:2px;*/
  border: 0;
  text-decoration:none;
  background-color:transparent;
  color:var(--color-primary);
  transition: all 0.3s ease-in-out;
  cursor:pointer;
}

.slide-text .btn:before {
  content:'';
  position:absolute;
  top:-1px;
  left:-1px;
  width:2px;
  height:20px;
  border-radius:inherit;
  color:var(--color-primary);
  transition: all 0.3s ease-in-out;
  z-index:2;
}

.slide-text .btn:after {
  content:'';
  position:absolute;
  display:flex;
  top:7px;
  left:-10px;
  width:0px;
  height:0px;
  align-items:center;
  justify-content:center;
  background-color:transparent;
  border: 2px solid transparent;
  border-left:0;
  border-bottom:0;
  transform: rotate(45deg);
  transition: all 0.3s ease-in-out;
}

.slide-text .btn:hover::before {
  left:13px;
  transform: rotate(90deg);
}

.slide-text .btn:hover::after {
  left:10px;
  width:10px;
  height:10px;
  border: 2px solid  var(--color-primary);
  border-left:0;
  border-bottom:0;
  opacity:1;
}

.slide-text .btn:hover {
  padding-left: 35px;
}

button:focus {
  outline: 0;
}

/*
.about {
  position: fixed;
  z-index: 10;
  bottom: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  transition: all 0.2s ease;
}
.about .bg_links {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  backdrop-filter: blur(5px);
  position: absolute;
}
.about .logo {
  width: 40px;
  height: 40px;
  z-index: 9;
  background-image: url(https://rafaelalucas91.github.io/assets/codepen/logo_white.svg);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: 10px 7px;
  opacity: 0.9;
  transition: all 1s 0.2s ease;
  bottom: 0;
  left: 0;
}
.about .social {
  opacity: 0;
  left: 0;
  bottom: 0;
}
.about .social .icon {
  width: 100%;
  height: 100%;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  display: flex;
  transition: all 0.2s ease, background-color 0.4s ease;
  opacity: 0;
  border-radius: 100%;
}
.about .social.portfolio {
  transition: all 0.8s ease;
}
.about .social.portfolio .icon {
  background-image: url(https://rafaelalucas91.github.io/assets/codepen/link.svg);
}
.about .social.dribbble {
  transition: all 0.3s ease;
}
.about .social.dribbble .icon {
  background-image: url(https://rafaelalucas91.github.io/assets/codepen/dribbble.svg);
}
.about .social.linkedin {
  transition: all 0.8s ease;
}
.about .social.linkedin .icon {
  background-image: url(https://rafaelalucas91.github.io/assets/codepen/linkedin.svg);
}
.about:hover {
  width: 105px;
  height: 105px;
  transition: all 0.6s cubic-bezier(0.64, 0.01, 0.07, 1.65);
}
.about:hover .logo {
  opacity: 1;
  transition: all 0.6s ease;
}
.about:hover .social {
  opacity: 1;
}
.about:hover .social .icon {
  opacity: 0.9;
}
.about:hover .social:hover {
  background-size: 28px;
}
.about:hover .social:hover .icon {
  background-size: 65%;
  opacity: 1;
}
.about:hover .social.portfolio {
  left: 0;
  bottom: calc(100% - 40px);
  transition: all 0.3s 0s cubic-bezier(0.64, 0.01, 0.07, 1.65);
}
.about:hover .social.portfolio .icon:hover {
  background-color: #698fb7;
}
.about:hover .social.dribbble {
  bottom: 45%;
  left: 45%;
  transition: all 0.3s 0.15s cubic-bezier(0.64, 0.01, 0.07, 1.65);
}
.about:hover .social.dribbble .icon:hover {
  background-color: #ea4c89;
}
.about:hover .social.linkedin {
  bottom: 0;
  left: calc(100% - 40px);
  transition: all 0.3s 0.25s cubic-bezier(0.64, 0.01, 0.07, 1.65);
}
.about:hover .social.linkedin .icon:hover {
  background-color: #0077b5;
}
*/
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */