#text {
  color: #fcfcfc; 
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 

  margin-top: -30px;
font-size:80px;
  position: fixed;
    left: 50%;
  transform: translateX(-50%);
}

.h3 ,  a {
  color:#2866ef;
}
     /* Navigation Buttons */

#olds
{
  margin:auto;
}

.price-wrapper {
  display: flex;
  justify-content: flex-end;     /* Rechtsbündig */
  align-items: flex-start;
  gap:3px;
  margin-left: auto;
  margin-right: 2%;              /* Wie .div-block-3 */
  width: max-content;
}

.price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;         /* Rechts ausrichten */
  font-size: 13px;
  color: #999;
}

.price-change {
  font-size: 16px;
  font-weight: bold;
  margin-top:20px;
}

.content-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 50px;
  margin-left:20px;
  align-items: flex-start; /* Add this line */
  height: fit-content; /* Add this line */
}
.w-button {
  display: inline-block;
  float: right;
  margin-top: -40px;
  scale:0.8;
  margin-right:-20px;
  padding: 2px 20px;
  background-color: #3898EC;
  color: white;
  border: none;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 20px;
}
.title-container {
  text-align: center;
  background-color: #2866ef;
  padding: 20px 0;
  color:#fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.ads-container span
{
  font-size:25px;

  border-radius: 20px;
}
#ad_picture1
{
  display:flex;
  position: left;
  margin-left: 10px;
  width: 300px;
  margin-top:0px;
    height: 300px;
  border-radius: 200px;

}
.button-primary {
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #1a1b1f;
  padding: 12px 25px;
  font-size: 12px;
  line-height: 20px;
  transition: all .2s;
  margin-left:auto;
}

.button-primary:hover {
  color: #fff;
  background-color: #32343a;
}

.button-primary:active {
  background-color: #43464d;
}

.section {
  max-height: 200px;
  max-width: 100%;
  font-family: Ubuntu;
  font-weight: 500;
}

.container-2 {
  max-width: 100%;
  background-color:#E4E9F7;
  flex-wrap: wrap;
  margin-top: 11px;
  padding: 20px;
margin-left:1%;
  display: flex;

}

.video {
  height:350px;
  max-height:350px;
  width:100%;
  margin-bottom:60px;
}

.image {
  border-radius: 20px;
  width: 180px;
 z-index:-999;
  height: 180px;
}

.image-2 {
  max-width: 30%;
  margin-top: -88px;
  margin-left: -144px;
}
@media (min-width: 500px) {
.div-block {
  border-right: 3px solid #2866ef;
  border-radius: 0;
  padding-right: 10px;
color: #ffffff ;
}
}
.grid {
  width: 100%;
  max-width: 100%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto;
  grid-template-columns: 107% 63%;
}

.div-block-2 {
  width: 100%;
  max-height: 50px;
  max-width: 100%;
  text-align: left;
  padding-left: 13px;
  font-family: Ubuntu;
  font-size: 32px;
  font-weight: 700;
}

.heading {
  width: 30%;
  max-height: 50px;
  max-width: 30%;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 10px;
  padding-left: 0;
}

.div-block {


    overflow: hidden; /* Prevent overflow of slider content */
}

/* Basic Slider Container */
.slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;

    margin: auto;
}

/* Slide Styles */
.slide {
    display: none;
    width: 100%;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.active-slide {
    display: block;
    opacity: 1;
    transform: scale(1.05);
}

.slide img {
    width: 100%;
    height: auto;
      max-height: 440px; /* Maintain aspect ratio of the images */  z-index:-999; 
     min-height: 440px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Navigation Buttons */
.slider-nav {
    position: absolute;
    top:96%;
  z-index:999;
  order:999;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.prev-slide {    align-self: center; 
             /* Vertically align on the left */z-index:999; 
             position: relative;          background-color: rgba(0, 0, 0, 0.5);color:white;
             left: 0px; /* Move slightly left for spacing */}
.next-slide {
  align-self: center; /* Vertically align on the right */
  position: relative;   z-index:999;       background-color: rgba(0, 0, 0, 0.5);color:white;
  justify-content:right;
  right: 0px; /* Move slightly right for spacing */
}

.prev-slide:hover, .next-slide:hover {
    background: rgba(0, 0, 0, 0.6); z-index:999;
}

.next-slide {
    margin-top: -3rem; z-index:999; 
}

.prev-slide {
    margin-top: -3rem;z-index:999; 
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .prev-slide, .next-slide {
        padding: 0.5rem; z-index:999; 
        font-size: 1.5rem;
    }
}

/* Optional Auto-Slide Animation */
.slider-container .active-slide {
    animation: fadeInScale 0.5s ease-in-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.heading-2 {
  width: 150px;
  max-width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 0 10px 23px;
}

.div-block-3 {
  width: max-content;
  padding:15px;
  max-width: max-content;

  text-align: center;
  background-color: #2866ef;
  border-radius: 20px;
  color:#ffffff;
scale:1;
  font-size:45px;
margin-left:auto;
  margin-right:2%;
  
}

.div-block-4 {
  position:static;
  text-align: center;
  margin-top:-20px;
}

.paragraph {
  font-size: 25px;
}

.paragraph-2 {
  padding-top: 2px;
  font-size: 25px;
}
.paragraph-3 {
  padding-top: 12px;
  font-size: 21px;
}

.div-block-5 {
  margin-top:2rem;
  margin-bottom:20px;
  margin-right:auto;
  justify-content:flex-end;
  
}
@media screen and (min-width: 500px) {
  
  .div-block-6 {    
  display: flex;
  width: 100%;   
  height: 100%;
  border-radius: 6px;
  background-color: #9ea2a55c; 
  margin-bottom: 2%;  
 }
 }

.button {
  width: 180px;
   margin-right:auto;
  text-align:center;
  font-size:18px;
}


.text-block {
  width: auto;
  max-width: 100%;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: Ubuntu;
  font-size: 32px;
  font-weight: 700;
  overflow: visible;
}

.paragraph-3 {
  margin-bottom: -5px;
  padding-top: 2px;
    font-size: 19px;
}

.text-block-2 {
  text-align: left;
  padding-top: 19px;
  font-size: 22px;

  line-height: 25px;
}



#w-node-fd7174ee-4cb3-0ff4-8aaf-197eadc9c005-c17d0718 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: right;
  justify-self: right;
}

#w-node-_5363d914-c22b-00d0-f5eb-c3b40cc58f09-c17d0718 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: right;
  justify-content:right;
}

#w-node-caa56305-c049-c05a-671b-f41799309662-c17d0718, #w-node-_1cf6ca36-1b85-1178-c68b-8921bab03c51-c17d0718, #w-node-e8ba75fb-a635-562f-a632-6292b6025a96-c17d0718 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-de3072ef-eaa8-c1eb-a776-2e3b04610b55-c17d0718 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: right;
}

.div-block-2 {
  position: relative;
  margin-bottom:3rem;
    

}

.div-block {
  position: relative;
  width: 60vw;
    height:420px;
}

.div-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.div-block .circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;    /* adjust as needed */
  height: 80px;   /* adjust as needed */
  border-radius: 50%;
  background: #ddd;
}
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  background: #ddd;
  overflow: hidden;
}

.circle:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.circle:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    #ccc 5px,
    #ccc 10px
  );
}
#n4me
{
  text-align:center;
  font-size:30px;
  font-weight:700;
  
}
#ad_picture .h1
{
  position: fixed;
  margin-left: 1250px;
  max-width: 300px;
  margin-top:500px;
  border-radius: 200px;
  border: 10px solid black;
}


.search-container {
  width: 200px;
  max-width: 200px;
  min-width:200px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-right: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: sticky; /* Add this line */
  top: 10%; /* Add this line */
  height: max-content; /* Add this line */
}

.ads-container {
  width: 100%;
  display: flex;
  padding:1px;
  flex-wrap: wrap;
max-height: 100vh;
  overflow-y:scroll;
  justify-content: left;
}

.ad {
  display: flex;
  justify-content: space-between;
  border: 1px solid #000;
  padding: 10px;
  margin: 20px 0;
}

.ad-left {
  flex: 0 0 20%;
  padding-right: 1%;
}

.ad-right {
  flex: 1;
  display: grid;
  grid-template-rows: 50px 50px auto;
  border-left: 2px solid #2866ef;
  padding-left: 1%;
}

.ad-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ad-middle, .ad-bottom {
  margin-top: 10px;
}

button {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  padding: 10px;
  border: none;
  background-color: #ddd;
}

.ad img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 5px;
}

@media screen and (max-width: 991px) {
  .container {
    max-width: 728px;
  }

.button {
  margin-top:-20px;
}
.paragraph {
  font-size: 18px;
}

  .paragraph-2 {
  font-size: 18px;
}

.text-block-2 {
  text-align: left;
  padding-top: 12px;
  
  padding-bottom:15px;
  font-size: 17px;
  line-height: 25px;
}

   
  .nav-menu-wrapper {
    background-color: rgba(0, 0, 0, 0);
  }

  .nav-menu-two {
    background-color: #fff;
    border-radius: 50px;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    padding: 20px;
    display: flex;
    box-shadow: 0 8px 50px rgba(0, 0, 0, .05);
  }

  .nav-link {
    padding-left: 5px;
    padding-right: 5px;
  }

  .nav-dropdown-list.shadow-three.w--open {
    position: absolute;
  }

  .menu-button {
    padding: 12px;
  }

  .menu-button.w--open {
    color: #fff;
    background-color: #a6b1bf;
  }

  .container-2 {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
    
  }

  .image {
    width: 180px;  z-index:-999; 
    height: 180px;

  }



  .grid {
    width: 100%;
  }

  .div-block-2 {
    width: auto;
 
  }

  .heading-2 {
    padding-left: 8px;
  font-family: Ubuntu;
    font-size: 34px;
  }

  .div-block-3 {
    width: max-content; 
    scale:1;  font-size:28px; padding:8px;
  }

   
  .div-block-4 {
   margin-top:-20px;
  }

  .text-block {
    width: auto;
  
  }
}

@media screen and (max-width: 767px) {
  .navbar-logo-left-container {
    max-width: 100%;
  }

.div-block-4 {
margin-top:55px;
}

  .navbar-brand {
    padding-left: 0;
  }

  .nav-menu-two {
    border-radius: 20px;
    flex-direction: column;
    padding-bottom: 30px;
  }

 .div-block-3 {

   margin-top:5px;

  }
 
   
  .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
  }

  .nav-dropdown {
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .nav-dropdown-toggle {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .nav-dropdown-list.shadow-three {
    box-shadow: 0 8px 50px rgba(0, 0, 0, .05);
  }

  .nav-dropdown-list.shadow-three.w--open {
    position: relative;
  }

  .nav-dropdown-list.shadow-three.mobile-shadow-hide {
    box-shadow: none;
  }

  .nav-divider {
    width: 200px;
    height: 1px;
    max-width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .nav-link-accent {
    margin-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
  }

  .mobile-margin-top-10 {
    margin-top: 10px;
  }
}



/* Media query for smaller screens */
@media screen and (max-width: 811px) {

  .button {
  padding:2%;
    margin-top:-26px;

     scale:1;
}
 .div-block-5 {
  margin-top:4rem;
  margin-left: 30%;



   
   
  }

.title-container {
  text-align: center;
  background-color: #2866ef;
  padding: 20px 0;
  color:#fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.search-container {
  width: 200px;
  max-width: 200px;
  min-width:200px;
  margin-left:-20px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-right: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: sticky; /* Add this line */
  top: 10%; /* Add this line */
  height: max-content; /* Add this line */
}

.ads-container {
    width: 100%;
  display: flex;
  padding:1px;
  flex-wrap: wrap;
  justify-content: center;
}

.ad {
  width: calc(100% / 2.0);
  height: auto;
  margin: 20px;
  margin-left:-2px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.ad img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
}

}
@media screen and (max-width: 600px) {
.text-block-2 {
  text-align: left;

  font-size: 10px;
  
}

  .paragraph-2 , .paragraph {
  padding-top: 2px;
    margin-top:-0px;
  font-size: 14px;
}
 .div-block {
  height:100%;
   max-height:100%;
}
  .paragraph-3  {

margin-bottom:0px; margin-top:10px;  
 }

 
}
@media screen and (max-width: 500px) {
.text-block-2 {
  text-align: left;

  font-size: 11px;
  
}

  .paragraph-2 , .paragraph {
  padding-top: 2px;
    margin-top:4px;
  font-size: 18px;
}
 .div-block {
  height:100%;
   max-height:100%;
}
  .paragraph-3  {
  font-size: 16px;

 }

 
}


@media screen and (max-width: 800px) {

 .div-block {
   width:90%;
    height: 440px;

  }
  .text-block-2 {
  text-align: center;

  margin-left: -10px;
  word-break: break-word; 
  font-size: 15px;
  
}
.title-container {
  text-align: center;
  background-color: #2866ef;
  padding: 20px 0;
  font-family: Ubuntu;
  color:#fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.slider-nav {
    position: absolute;
z-index:999;
top:100%;

    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}


.search-container {
  width: 200px;
  max-width: 200px;
  min-width:200px;
  margin-left:104px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-right: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: sticky; /* Add this line */
  top: 10%; /* Add this line */
  height: max-content; /* Add this line */
}

.ads-container {
  width: 100%;
  display: flex;
  padding:1px;
  flex-wrap: wrap;
  justify-content: center;
}

.ad {
  width: calc(100% / 1);
  height: auto;
  margin: 20px;
  margin-left:120px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.paragraph {
margin-bottom:5px;
  font-size:16Px;
}
.paragraph-2 {

  font-size:16Px;
}
  }
.paragraph-3 {
margin-top:100px;
  font-size:19Px;
}
.div-block-3 {
   margin-top:10px;
}
  
.div-block-4 {
   margin-top: 65px;
}
  .button {
  font-size:22px;
    padding:3;
  
    
}
.ad img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
}


@media screen and (max-width: 499px) {
  .video {
  height:220px;
  max-height:220px;
  width:100%;
  margin-bottom:10%;
}
.div-block-3 {
  display: inline-block;
  padding: 8px 16px;
  background-color: #2866ef;
  border-radius: 20px;
  color: #ffffff;
  font-size: 38px;
  text-align: center;
  margin-top:10px;

  scale:1;
 
  width: max-content;
  cursor: pointer;
}

 .div-block {
  height:230px;
   max-height:230px;
   width:100%;
}
  .button {
    margin-top:-50px; 
  }
 .div-block-6 {
padding-bottom:20px;
  width:100%;
  height:100%;
border-radius:6px;
   background-color: #9ea2a55c;
   margin-bottom:2%;
}
.div-block {
  border-bottom: 3px solid #2866ef;
  border-radius: 0;
  padding-bottom: 10px;
color: #ffffff ;
}
.div-block-5 {
margin-top: 3rem;
}
.div-block-4 {
  margin-top:5rem;
  margin-bottom:4rem;
  }

  .div-block {   overflow: hidden; /* Prevent overflow of slider content */ }
              
  .slider-container {   overflow: hidden; /* Prevent slides from overflowing */    touch-action: pan-x;
                    }
  .slide {    display: none; /* Hide all slides */  width: 100%; /* Ensure each slide takes up the full width of the slider */}
  .active-slide {
    display: block; /* Show the active slide */}
  .slide img {
    width: 100%; /* Ensure the images are responsive and fit inside the slider */
    height: auto; /* Maintain aspect ratio of the images */  z-index:-999;
      max-height: 250px; /* Maintain aspect ratio of the images */
     min-height: 250px;
  top: -100px;
  }

              .slider-nav {   position: absolute;
                           top: 91%;  
                           width: 100%;  z-index:999;
                           display: flex;
                           justify-content: space-between;
                           transform: translateY(-50%);
                           z-index:999;
                           pointer-events: none; /* Prevent buttons from overlapping content */}
              .slider-nav button {
                background-color: rgba(0, 0, 0, 0.5);
              color: white;    
                border: none;  
                left:0px;  z-index:999;
                padding: 10px;
                cursor: pointer;
                pointer-events: all; /* Re-enable click for buttons */}
              .circle {
     position: relative;
display: inline-block;
                margin-top: 10px;}
  
}
