.hero {
    position: relative;
    height: 90vh;
    overflow: hidden;
    background-image: linear-gradient(to right top, #051937, #092b4c, #0e3e61, #135276, #19678a);
  }
  .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
  }
  .subpoint {
    padding: 1rem;
    border-radius: 5px;
    color: #fff;
    font-weight: 100;
}

.legal {
  background-image: linear-gradient(to right top, #051937, #092b4c, #0e3e61, #135276, #19678a);
  padding-bottom: 110px;
  font-size: small;
}

.legal h1, .legal h2, .legal h3, .legal h4 {
  font-size: small !important;
}
.subpoint big {
    font-size: 1.4rem;
  
}
  /* Trainerbild-Größe */
  .trainer-img {
    max-width: 300px;
  }
  @media (max-width: 768px) {
    .trainer-img {
      max-width: 200px;
    }
  }
  .swiper-random-videos {
    height: 500px;
    border-radius: 10px;
    box-shadow: 0px 5px 10px #000;
  }
  .swiper-random-videos .card {
    height: 100%;
  }
  .swiper-random-videos .card-img-top {
    border: none;
  }

  .shopAllSwiper3 {
    height: 400px;
  }

  .shopAllSwiper3 h4 {
    font-size: 16px;
  }

  @media (max-width: 768px) {
    .swiper-random-videos,
    .shopAllSwiper3 {
      height: 600px; /* oder einen anderen gewünschten Wert */
    }
  }

  .video-title-box {
    padding: 10px;
    background-color: #10bcf4c9;
    color: #021b33;
    font-weight: bold;
    font-size: 23px;
    margin-bottom: 0;
  }

  .video-description-overlay {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 90%;
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 14px;
    margin-bottom: 20px;
}

  .video-description {
      display: -webkit-box;
                  -webkit-line-clamp: 4;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 17px;
    padding: 10px;              
    background: #021b33cc;
  }

  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dunkel & halbtransparent */

  }
  

  .randomVideoSection {
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(19, 65, 110, 1) 62%, rgba(16, 56, 96, 1) 63%, rgba(3, 20, 42, 1) 100%);
    color: #fff;
  }

  .randomVideoSection .card {
    border: none !important;
  }

  .priceLable {
      background: #0c1f34;
  padding: 10px 25px;
  color: #10bcf4;
  font
  }

  .priceLable .sub {
      position: relative;
  color: #68717b;
  text-transform: uppercase;
  font-size: 12px;
  }

  .titleLable {
      background: #10bcf4;
  padding: 10px 25px;
  color: #0c1f34;
  font-size: 23px;
  }

  .descriptionLabel {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      margin: 20px;
  }

  #swiperCategory .swiper-slide img {
      width: 75px;
      border-radius: 15px;
  }

  #ebookSection .swiper-slide {
position: relative;
background-size: cover;
background-position: center;
border-radius: 8px;
overflow: hidden;
min-height: 300px; /* Höhe anpassbar */
}

/* Damit der Link den gesamten Slide ausfüllt */
#ebookSection .swiper-slide a {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
}

/* Gemeinsame Styles für Overlays */
#ebookSection .overlay {
position: absolute;
left: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 10px;
border-radius: 4px;
}

/* Titel-Overlay oben */
#ebookSection .overlay-title {
top: 80px;
font-size: 1.2rem;
font-weight: bold;
}

/* Beschreibung-Overlay unten */
#ebookSection .overlay-description {
bottom: 10px;
font-size: 1rem;
}

/* Responsive Anpassung für mobile Geräte */
@media (max-width: 768px) {
  #ebookSection .swiper-slide {
  min-height: 250px;
}
#ebookSection .overlay {
  padding: 8px;
  font-size: 0.9rem;
}
#ebookSection .overlay-description {
  bottom: 8px;
}
}

#komplettpaketeSection {
  
  background: #e0e0e0;

}


/* Container für das Suchfeld */
.search-bar-wrapper {
max-width: 600px;
margin: 0 auto;
}

/* Apple-Style Input */
.stylish-search-input {
padding: 1rem 3rem 1rem 1.2rem;
border-radius: 999px;
border: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
font-size: 1.1rem;
transition: all 0.3s ease;
background-color: #f1f1f1;
width: 100%;
}

.stylish-search-input:focus {
outline: none;
background-color: #fff;
box-shadow: 0 0 0 4px rgba(16, 188, 244, 0.3);
}

/* Button im Inputfeld */
.stylish-search-button {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: #10bcf4;
border: none;
color: white;
padding: 10px 14px;
border-radius: 999px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}

.stylish-search-button:hover {
background: #0a9fcf;
}

.search-bar-wrapper {
position: relative;
max-width: 600px;
margin: auto;
}

.stylish-search-input {
padding: 0.75rem 3.2rem 0.75rem 2.8rem;
border-radius: 50px;
border: 1px solid #ccc;
box-shadow: 0 1px 6px rgba(0,0,0,0.1);
font-size: 1rem;
background-color: #f9f9f9;
transition: box-shadow 0.2s ease-in-out;
}

.stylish-search-input:focus {
outline: none;
border-color: #10bcf4;
box-shadow: 0 0 8px rgba(16, 188, 244, 0.4);
}

.search-icon {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
color: #888;
font-size: 1.2rem;
z-index: 2;
}

.stylish-search-button {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
background-color: #10bcf4;
border: none;
color: white;
padding: 0.55rem 0.9rem;
border-radius: 50%;
font-size: 1rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
transition: background-color 0.2s;
}

.stylish-search-button:hover {
background-color: #0a9ac4;
}
/* 
  these type the CSS variable as color
  unlocking the ability for the browser 
  to animate just that portion
*/
@property --＠color-1 {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(98 100% 62%);
  }
  
  @property --＠color-2 {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(204 100% 59%);
  }
  
  /* keyframes that change the color variable */
  @keyframes gradient-change {
    to {
      --＠color-1: hsl(210 100% 59%);
      --＠color-2: hsl(310 100% 59%);
    }
  }
  
  article {
    /* apply variable changes over time */
    animation: gradient-change 2s linear infinite alternate;
    
    background: linear-gradient(
      /* 
        in oklch produces more vibrant gradient results 
        learn more https://developer.chrome.com/docs/css-ui/access-colors-spaces#color_interpolation
      */
      to right in oklch, 
      /* use the variables in a gradient (or wherever!) */
      var(--＠color-1), 
      var(--＠color-2)
    );
    
    /* old browser support */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* modern browser version */
    background-clip: text;
    color: transparent;
    text-align: center;
  }
  
  article i {
    font-size: 120px;
    text-align: center;
    margin: 40px 0;
  }
  
  article h1 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 30px;
}
article h2 {
    text-transform: uppercase;
    font-size: 20px;
}

.keyword-box {
    height: 100px;
}
.keyword-swiper {
    max-width: 800px;
    margin: 20px auto;
    height: 90px;
  }
  
  .keyword-swiper .swiper-slide {
    width: auto; /* <-- notwendig für slidesPerView: 'auto' */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .keyword-pill {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 999px;
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    white-space: nowrap;
    border: 1px solid;
  }
  
  .keyword-pill:hover {
    transform: scale(1.10);
    background: rgba(0, 0, 0, 0.6);
  }

  .video-category-overlay {
    position: absolute;
    top: 20px;
    right: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    z-index: 3;
    max-width: 100%;
  }
  
  .category-badge {
    background: rgba(220, 20, 60, 0.6);
    color: #fff;
    font-size: 0.6rem;
    padding: 3px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
  }
  
  
  .category-badge:hover {
    background: #0a9fcf;
  }
  
  :root {
    --bg: #fff;
    --text: #1d1d1f;
    --accent: #0071e3;
    --shadow: rgba(0, 0, 0, 0.08);
  }

  #cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg);
    color: var(--text);
    padding: 1.5rem;
    border-radius: 14px;
    box-shadow: 0 10px 25px var(--shadow);
    max-width: 540px;
    width: 90%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    display: none;
    z-index: 10000;
    animation: slideUp 0.5s ease-out;
  }

  @keyframes slideUp {
    from {
      transform: translate(-50%, 100%);
      opacity: 0;
    }
    to {
      transform: translate(-50%, 0);
      opacity: 1;
    }
  }

  #cookie-banner button {
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-right: 0.5rem;
    cursor: pointer;
    font-size: 14px;
  }

  #cookie-banner .secondary {
    background-color: #e5e5e5;
    color: #1d1d1f;
  }

  #cookie-banner a {
    color: var(--accent);
    text-decoration: none;
  }

  #cookie-banner a:hover {
    text-decoration: underline;
  }