/* Import Google Fonts */
@import url("//fonts.googleapis.com/css2?family=Electrolize:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Paragraph */
.col-lg-5 .p-0 p{
 font-size:21px;
 font-weight:500;
 transform:translatex(0px) translatey(0px);
 white-space:normal;
 letter-spacing:0px;
 column-count:1;
 font-family:'Electrolize', sans-serif;
}

/* Paragraph */
main .btn-block p{
 font-family:'Electrolize', sans-serif;
 font-size:22px;
}


/* Heading */
.align-items-center h1{
 transform:translatex(0px) translatey(0px);
 text-transform:uppercase;
}

/* Text muted */
.container .row .col-lg-4 .text-center .text-muted{
 font-family:'Electrolize', sans-serif;
}

/* Paragraph */
#faq-section p{
 font-family:'Electrolize', sans-serif;
}


/* Img fluid */
.align-items-center .img-fluid{
 box-shadow:7px 6px 16px -5px #5f5f5f;
}

/* Bis hier home.blade styles */

.small-placeholder::placeholder {
    font-size: 0.9rem;
    font-weight: normal;
    color: #6c757d;
  }
  
  .small-placeholder::-webkit-input-placeholder {
    font-size: 0.9rem;
  }
  
  .small-placeholder::-moz-placeholder {
    font-size: 0.9rem;
  }
  
  .small-placeholder:-ms-input-placeholder {
    font-size: 0.9rem;
  }
  
/* Ab hier: Login Page Rebuilt */
.pt-lg-md .col-lg-7 img{
 visibility:hidden;
}

/* Column 5/12 */
.pt-lg-md .col-lg-5{
 transform:translatex(-347px) translatey(0px);


 display:inline-block;
}

/* Radio custom */
.pt-lg-md .b-radio-custom{
 background-color:rgba(255,255,255,0.11) !important;
}


/* Jumbotron */
main .jumbotron{
 background-image:url("https://images.unsplash.com/photo-1488554378835-f7acf46e6c98?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNTc5fDB8MXxzZWFyY2h8MTJ8fGJsYWNrfGVufDB8fHx8MTc0ODMzMTUxNHww&ixlib=rb-4.1.0&q=80&w=2560");
 background-color:rgba(65,204,214,0);
 transform:translatex(0px) translatey(0px);
}

@media (max-width:1199px){

 /* Column 5/12 */
 .pt-lg-md .col-lg-5{
  transform:translatex(-270px) translatey(-15px);
 }
 
}

@media (max-width:991px){

 /* Column 5/12 */
 .pt-lg-md .col-lg-5{
  transform:translatex(30px) translatey(-7px);
 }
 
}

@media (max-width:767px){

 /* Column 5/12 */
 .pt-lg-md .col-lg-5{
  display:inline-block;
  transform:translatex(0px) translatey(4px);
 }
 
}

@media (max-width:540px){

 /* Column 5/12 */
 .pt-lg-md .col-lg-5{
  display:inline-block;
  transform:translatex(-3px) translatey(5px);
 }
 
}

/*Bis hier: Login Page Rebuilt */


/* SLIDER */

 #loginSlider{
  width:100% !important;
 }

 .slider-container {
  margin: 20px 0;
  width: 100%; /* Container füllt die Breite */
}

.slider {
    width: 100%;
    height: 40px;
    background: #ddd;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

.slider-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Zentriert den Text */
    color: #333;
    font-size: 16px;
    z-index: 1; /* Unter dem Handler */
    pointer-events: none; /* Verhindert, dass der Text den Handler blockiert */
}

.slider-handle {
    width: 50px;
    height: 100%;
    background: #007bff;
    position: absolute;
    left: 0;
    cursor: pointer;
    z-index: 2; /* Über dem Text und Hintergrund */
    display: flex;
    align-items: center;
    justify-content: center; /* Zentriert das Icon */
}

.slide-icon {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.slider-background {
  height: 100%;
  background: #007bff; /* Blauer Bereich links */
  position: absolute;
  left: 0;
  z-index: 1;
  transition: width 0s; /* Keine Verzögerung für sofortige Synchronisation */
}

.slider-complete .slider-background {
  width: 100% !important;
  background: #28a745 !important; /* Grün bei Abschluss */
}

.slider-complete .slider {
  background: #28a745; /* Ganzer Balken grün */
}