:root {
  --primary: #60AAFF;
  --primary-dark: #3060DD;
  --secondary: #4080FF;
  --bg-gradient-start: #000;
  --bg-gradient-end: #002060;
  --text-light: #ddd;
  --white: #fff;
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --overlay-border: rgba(96, 170, 255, 0.7);
}

.font-stoneage {
  font-family: 'Stoneage', sans-serif;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Animations */
@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 40ch;
  }
}

@keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes snowfall {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    transform: translateY(100vh);
    opacity: 0.3;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Base Styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Acme', sans-serif;
  background: linear-gradient(to bottom, var(--bg-gradient-start), var(--bg-gradient-end));
  color: var(--text-light);
}

/* Hero Section */
.typing-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Stoneage', sans-serif;
  height: 100vh;
  text-align: center;
  /* background: linear-gradient(to bottom, var(--bg-gradient-start), var(--bg-gradient-end)); */
  padding: 0 20px;
  box-sizing: border-box;
  flex-direction: column;
}

/* 
.typing-animation {
    font-size: 5rem;
    color: var(--primary);
    white-space: nowrap;
    border-right: 4px solid var(--primary);
    overflow: hidden;
    animation: typing 1.5s steps(30, end), blink-caret 0.5s step-end infinite;
} */

.typing-animation.desktop-text {
  display: block;
}

.typing-animation.mobile-text {
  display: none;
}



/* Event Notice */
.event-flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
}

.hidden-until-typing {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.hidden-until-typing.show {
  opacity: 1;
  transform: translateY(0);
}

.fff-logo-wrapper img {
  max-width: 280px;
  height: auto;
  border-radius: 8px;
  display: block;
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .event-flex-container {
    flex-direction: column;
    gap: 20px;
  }

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }


}

.event-notice-box {
  background: var(--overlay-bg);
  border: 2px solid var(--primary);
  border-radius: 12px;
  padding: 30px 25px;
  color: var(--white);
  max-width: 700px;
  width: 100%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.event-notice-box h2 {
  font-size: 1.7rem;
  margin-bottom: 15px;
  color: var(--primary);
  font-family: 'Acme', sans-serif;
}

.event-notice-box .blue-text {
  color: var(--primary);
  font-weight: bold;
}

.event-notice-box .highlight {
  background: var(--primary);
  color: var(--white);
  padding: 3px 8px;
  border-radius: 6px;
}

.event-notice-box p {
  font-size: 1.2rem;
  line-height: 1.6;
  font-family: 'Acme', sans-serif;
}

.event-notice-box a {
  color: #91bff3;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.event-notice-box a:hover {
  color: var(--secondary);
}

.event-date {
  color: var(--white);
  font-weight: bold;
}

.highlight-box {
  margin-top: 20px;
  background: #1a2b4d;
  padding: 15px;
  border-radius: 10px;
  border: 2px dashed var(--primary);
}

.highlight-box p {
  margin: 5px 0;
  font-size: 1.05rem;
}

@media (max-width: 768px) {
  .event-notice-box {
    padding: 20px;
  }

  .event-notice-box h2 {
    font-size: 1.3rem;
  }

  .event-notice-box p {
    font-size: 1rem;
  }

  .highlight-box {
    padding: 12px;
    font-size: 0.9rem;
    margin-top: 16px;
  }
}

/* Progress Bar */
.progress-bar-container {
  position: fixed;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  width: 12px;
  height: 65vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 12px 0;
  z-index: 1050;
}

.progress-segment {
  width: 8px;
  height: 8%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  opacity: 0.6;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}

.progress-segment:hover {
  transform: scale(1.2);
  opacity: 1;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

.progress-segment.active {
  transform: scale(1.3);
  opacity: 1;
  background: linear-gradient(135deg, #6e94e0, #7b99e4);
}

.progress-segment::before {
  content: attr(data-title);
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: var(--white);
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}

.progress-segment:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(5px);
}

@media (max-width:768px) {
  .progress-bar-container {
    display: none;
  }
}



/* Sections */
.content-section {
  padding: 80px 20px;
  margin: 50px 0 100px;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s, transform 0.6s;
}

.content-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.content-section h2 {
  font-size: 2rem;
  color: var(--white);
  margin-bottom: 20px;
}

.content-section p {
  font-size: 1.2rem;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
}

.section-divider {
  width: 80%;
  height: 2px;
  background: var(--white);
  margin: 50px auto;
  opacity: 0.8;
}

@media(max-width:768px) {
  .content-section {
    padding: 60px 10px;
    margin: 40px 0 80px;
  }

  .content-section h2 {
    font-size: 1.6rem;
  }

  .content-section p {
    font-size: 1rem;
    padding: 0 5px;
  }
}

/* Cards Transform */
.course-card,
.product-card,
.feature-card,
.testimonial-card {
  transition: transform 0.3s ease;
  border-radius: 10px;
}

.course-card:hover,
.product-card:hover,
.feature-card:hover,
.testimonial-card:hover {
  transform: scale(1.05);
}

/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px 10px;
  z-index: 9999;
  transition: opacity 0.3s;
}

.cookie-banner.hidden {
  opacity: 0;
  visibility: hidden;
}

.cookie-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}

.cookie-icon {
  width: 60px;
  height: 60px;
}

.cookie-btn {
  background: var(--primary);
  color: var(--white);
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: bold 1rem sans-serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.3s, transform 0.2s;
}

.cookie-btn:hover {
  background: var(--secondary);
  transform: translateY(-2px);
}

/* Partners */
.partners-section {
  padding: 80px 20px;
  text-align: center;
  color: var(--white);
}

.partners-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.partner-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 15px;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}

.partner-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
}

.partner-logo {
  background: #ddd;
  border-radius: 10px;
  padding: 10px;
  width: 150px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: filter 0.3s, transform 0.3s;
}

.partner-card:hover img {
  transform: scale(1.1);
  filter: none;
}

@media(max-width:768px) {
  .partners-container {
    width: 100%;
  }

  .partner-card {
    width: 100%;
    margin-top: 1rem;
  }

  .partner-logo {
    width: 120px;
    height: 80px;
  }
}



.snowflake {
  position: absolute;
  top: -50px;
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.8;
  animation: snowfall linear infinite;
}

@media(max-width:768px) {
  .snowflake {
    width: 20px;
    height: 20px;
  }
}

/* ------------------------------------------------------
   Filter‑Bar
   ------------------------------------------------------ */
#prodFilterTabs {
  border-bottom: 0px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 2rem;
}

#prodFilterTabs .nav-link {
  background: transparent;
  color: #ccc;
  font-weight: 500;
  margin: 0 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

#prodFilterTabs .nav-link:hover {
  background-color: rgba(96, 170, 255, 0.1);
}

#prodFilterTabs .nav-link.active {
  color: #628deb;
  background-color: rgba(26, 89, 197, 0.682);
  border-color: rgba(96, 170, 255, 0.5);
}

#prodFilterTabs .nav-link.passive {
  color: #adb3ba;
  background-color: rgba(108, 116, 131, 0.7);
  border-color: rgba(177, 214, 255, 0.54);
}

#snowstorm {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  /* ganz nach hinten */
  background: transparent;
}

@media(max-width:768px) {
  #prodFilterTabs {
    flex-wrap: nowrap;

  }
}



@media (max-width: 768px) {

  .typing-animation {
    font-size: 2.5rem;
    border: none;
    white-space: normal;
  }

  .typing-animation.desktop-text {
    display: none;
  }

  .typing-animation.mobile-text {
    display: block;
    /* nicht mehr tippen, sondern statisch einblenden */
    border-right: none !important;
    white-space: normal;
    /* erlaubt Umbrechung */
    width: auto !important;
    /* passt sich dem Inhalt an */
    opacity: 0;
    /* wir blenden es sanft ein */
    animation: fadeInMobile 0.8s ease-out forwards 0.5s;
    font-size: 2.5rem;
    /* optional etwas größer/kleiner */
    text-align: center;
    line-height: 1.2;
  }

  @keyframes fadeInMobile {
    to {
      opacity: 1;
    }
  }

  .typing-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Stoneage', sans-serif;
    text-align: center;
    /* background: linear-gradient(to bottom, var(--bg-gradient-start), var(--bg-gradient-end)); */
    padding: 0 20px;
    box-sizing: border-box;
    flex-direction: column;
  }
}

@media (max-width: 768px) {

  /* mache aus der horizontalen Tab‑Leiste ein zwei‑spaltiges Grid */
  #prodFilterTabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  /* entferne Abstände am LI, mach Button full‑width */
  #prodFilterTabs .nav-item {
    margin: 0;
  }

  #prodFilterTabs .nav-link {
    width: 100%;
    text-align: center;
    padding: 0.75rem 0.5rem;
    /* etwas enger */
    font-size: 1rem;
  }
}

.typing-container {
  /* bisherige Regeln… */
  padding-top: var(--navbar-height);
}


/* .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--navbar-height);
    z-index: 1000;
   
} */

/* 2) Hero unterhalb der Navbar */
.typing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--navbar-height);
  /* restliche Styles… */
}

/* 3) Optional: kleinen Abstand zur Event‑Box */
.event-flex-container {
  margin-top: 1rem;
}

/* 4) Mobile: evtl. eigene Navbar‑Höhe */
@media (max-width: 768px) {

  .typing-container {
    padding-top: var(--navbar-height);

  }
}



/* ————————————————————————————————————————————
   Scroll-Hinweis
   ———————————————————————————————————————————— */
.typing-container {
  position: relative;
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  animation: fadeInUp 1s ease-out both;
  z-index: 1000;
}

.scroll-indicator .arrow {
  width: 1.5rem;
  height: 1.5rem;
  border-right: 3px solid var(--primary);
  border-bottom: 3px solid var(--primary);
  transform: rotate(45deg);
  margin: 0 auto .5rem;
  animation: bounce 2s infinite, glow 2s infinite ease-in-out;
}

.scroll-indicator .scroll-text {
  display: block;
  font-size: 1rem;
  color: var(--primary);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: glow 2s infinite ease-in-out .5s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0) rotate(45deg);
  }

  50% {
    transform: translateY(10px) rotate(45deg);
  }
}

@keyframes glow {

  0%,
  100% {
    box-shadow: 0 0 8px var(--primary), 0 0 16px var(--secondary);
  }

  50% {
    box-shadow: 0 0 16px var(--secondary), 0 0 24px var(--primary);
  }
}



.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Gemeinsame Basis für beide Buttons */
.hero-ctas .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 2rem;
  font-family: 'Stoneage', sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Shine-Overlay */
.hero-ctas .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: skewX(-20deg);
  transition: all .6s ease;
}

.hero-ctas .btn:hover::before {
  left: 200%;
}

/* Lift on hover */
.hero-ctas .btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* Primär-Button mit Farb-Gradient & Neon-Glow */
.hero-ctas .btn-primary {
  background: linear-gradient(135deg, #60AAFF, #4080FF);
  color: #001530;
  box-shadow: 0 8px 16px rgba(96, 170, 255, 0.4);
}

.hero-ctas .btn-primary:hover {
  box-shadow: 0 16px 32px rgba(96, 170, 255, 0.6);
}

/* Sekundär-Button mit Outline & Pulser */
.hero-ctas .btn-secondary {
  background: transparent;
  color: #EEE;
  border: 2px solid #EEE;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.hero-ctas .btn-secondary:hover {
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  from {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
  }

  to {
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
  }
}

/* Icons etwas hervorheben */
.hero-ctas .btn i {
  font-size: 1.3rem;
  transition: transform .3s ease;
}

.hero-ctas .btn:hover i {
  transform: rotate(20deg) translateY(-2px);
}




/* ========================
   1) Basis + Gradient + Neon-Glow + Reveal
   ======================== */
.typing-animation {
  position: relative;
  display: inline-block;
  font-family: 'Stoneage', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: bold;
  text-transform: uppercase;
  white-space: normal;
  overflow: visible;
  cursor: default;

  /* fetziger Gradient: Blau → Lila → Blau */
  background: linear-gradient(90deg,
      #60AAFF 0%,
      #4080FF 40%,
      #652a75 60%,
      #4080FF 80%,
      #60AAFF 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* cooler Neon-Glow */
  text-shadow:
    0 0 1px rgb(75 157 251 / 40%), 0 0 12px rgba(96, 170, 255, 0.7), 0 0 12px rgba(101, 42, 117, 0.6);
  /* erst einfahren, dann fortlaufende Animationen */
  clip-path: inset(100% 0 0 0);
  animation:
    reveal 0.8s ease-out forwards,
    gradientMove 8s ease infinite,
    neonPulse 2.5s ease-in-out infinite,
    quickGlitch 5s steps(2) infinite;
}

/* fährt Text von unten ein */
@keyframes reveal {
  to {
    clip-path: inset(0);
  }
}

/* wandert den Gradient */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Pulse im Glow */
@keyframes neonPulse {

  0%,
  100% {
    text-shadow:
      0 0 6px rgba(96, 170, 255, 0.9),
      0 0 12px rgba(101, 42, 117, 0.6);
  }

  50% {
    text-shadow:
      0 0 12px rgba(96, 170, 255, 1),
      0 0 24px rgba(101, 42, 117, 0.8);
  }
}

/* kurzer „Glitch“ mit schnellen Schnitten */
@keyframes quickGlitch {

  0%,
  10%,
  100% {
    transform: none;
  }

  5% {
    transform: translate(2px, -1px) skewX(3deg);
  }

  8% {
    transform: translate(-2px, 1px) skewX(-3deg);
  }
}


/* ========================
     2) Chromatische Aberration (Lila & Cyan)
     ======================== */
.typing-animation::before,
.typing-animation::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

/* Lila-Versatz (häufig) */
.typing-animation::before {
  text-shadow: -2px 0 #652a75;
  clip-path: inset(0 100% 0 0);
  animation: abPurple 7s infinite;
}

/* Cyan-Versatz (selten) */
.typing-animation::after {
  text-shadow: 2px 0 #60AAFF;
  clip-path: inset(0 100% 0 0);
  animation: abCyan 14s infinite;
}

@keyframes abPurple {

  0%,
  5%,
  100% {
    clip-path: inset(0 100% 0 0);
  }

  10%,
  15% {
    clip-path: inset(10% 0 0 0);
  }

  20%,
  25% {
    clip-path: inset(60% 0 0 0);
  }
}

@keyframes abCyan {

  0%,
  7%,
  100% {
    clip-path: inset(0 100% 0 0);
  }

  12%,
  18% {
    clip-path: inset(40% 0 0 0);
  }

  22%,
  28% {
    clip-path: inset(20% 0 0 0);
  }
}


/* ========================
     3) Mobile-Fallback
     ======================== */
@media (max-width: 768px) {
  .typing-animation {
    font-size: 2.5rem;
    animation:
      reveal 0.8s ease-out forwards,
      gradientMove 8s ease infinite,
      neonPulse 2.5s ease-in-out infinite;
    clip-path: inset(0);
  }

  .typing-animation::before,
  .typing-animation::after {
    display: none;
  }
}




.feature-carousel {
  position: relative;
  width: 100%;
  height: 3.5rem;
  margin: 2rem auto 0;
  overflow: hidden;
  font-family: 'Stoneage', sans-serif;
  font-size: clamp(1.25rem, 4vw, 2rem);
  color: #60AAFF;
  text-shadow: 0 0 8px rgba(96, 170, 255, 0.8);
}

.feature-carousel .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slideFade 12s ease-in-out infinite both;
}

/* n-te Slide verzögert starten */
.feature-carousel .slide:nth-child(1) {
  animation-delay: 0s;
}

.feature-carousel .slide:nth-child(2) {
  animation-delay: 3s;
}

.feature-carousel .slide:nth-child(3) {
  animation-delay: 6s;
}

.feature-carousel .slide:nth-child(4) {
  animation-delay: 9s;
}

@keyframes slideFade {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  10% {
    opacity: 1;
    transform: translateY(0);
  }

  25% {
    opacity: 1;
    transform: translateY(0);
  }

  35% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}







/* -----------------------------------
   1) Grid-Layout
----------------------------------- */
.welcome-section {
  overflow: hidden;
  padding: 4rem 2rem;
}

.welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}

/* wird per JS beim Scrollen aktiviert */
.welcome-section.visible .welcome-grid {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------
     2) Bild-Styling & Hover */
.welcome-image-wrapper {
  perspective: 1000px;
}

.welcome-image {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transform: rotateY(10deg) rotateX(2deg);
  transition: transform .6s ease, box-shadow .6s ease;
}

.welcome-image:hover {
  transform: rotateY(0) rotateX(0);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

/* -----------------------------------
     3) Text-Styling & Animation */
.welcome-text-wrapper h2 {
  font-size: clamp(3.5rem, 6vw, 3.5rem);
  margin-bottom: .5rem;
  background: linear-gradient(90deg, #60AAFF, #4080FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.welcome-text-wrapper .highlight {
  background: linear-gradient(90deg, #4080FF, #652a75);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.welcome-text-wrapper p {
  font-size: 1.5em;
  line-height: 1.4;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeInText 1s ease-out forwards 0.5s;
}

@keyframes fadeInText {
  to {
    opacity: 1;
  }
}

/* -----------------------------------
     4) Button */
.welcome-text-wrapper .btn-outline-light {
  display: inline-block;
  padding: .7rem 1.5rem;
  border: 2px solid #60AAFF;
  border-radius: 50px;
  color: #60AAFF;
  transition: background .3s, color .3s, transform .3s;
}

.welcome-text-wrapper .btn-outline-light:hover {
  background: #60AAFF;
  color: #001530;
  transform: translateY(-3px);
}

/* -----------------------------------
     5) Responsive tweaks */
@media (max-width: 768px) {
  .welcome-section {
    padding: 3rem 1rem;
  }

  .welcome-text-wrapper p {
    animation-delay: 0.3s;
  }
}



/* beide Blobs liegen ganz hinten */
.blob {
  position: absolute;
  width: 400px;
  height: 400px;
  filter: blur(150px);
  opacity: 0.6;
  transform-origin: center;
  animation: blob-morph 12s ease-in-out infinite, blob-move 20s linear infinite;
  pointer-events: none;
}

/* erster Blob: Blau → Lila */
.blob-1 {
  top: -100px;
  left: -80px;
  background: radial-gradient(circle at 30% 30%,
      #60AAFF, #652a75);
  animation-delay: 0s, 0s;
}

/* zweiter Blob: Lila → Blau */
.blob-2 {
  bottom: -120px;
  right: -100px;
  background: radial-gradient(circle at 70% 70%,
      #4080FF, #60AAFF);
  animation-delay: 0s, 0s;
}

/* Blob-Morph keyframes */
@keyframes blob-morph {

  0%,
  100% {
    clip-path: circle(45% at 50% 50%);
  }

  33% {
    clip-path: circle(40% at 40% 60%);
  }

  66% {
    clip-path: circle(50% at 60% 40%);
  }
}

/* Blob-Drift */
@keyframes blob-move {
  0% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(20px, 10px) scale(1.1);
  }

  50% {
    transform: translate(0, 20px) scale(1);
  }

  75% {
    transform: translate(-15px, 5px) scale(1.05);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}



/* ===========================
   𝗥𝗔𝗣𝗧𝗢𝗥 𝗣𝗥𝗢𝗠𝗢 SECTION
   =========================== */
.raptor-promo {
  padding: 80px 20px;
  background: none;
  /* nutzt das globale Dark-Gradient */
  color: #fff;
  text-align: center;
}

/* 1) Hero: Banner + Text nebeneinander */
.promo-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
}

.promo-banner {
  max-width: 45%;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  animation: floatBanner 6s ease-in-out infinite;
}

@keyframes floatBanner {

  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}

.promo-text {
  max-width: 45%;
  animation: slideInText 1s ease-out forwards;
  opacity: 0;
  transform: translateX(40px);
}

@keyframes slideInText {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.promo-text h2 {
  font-family: 'Stoneage', sans-serif;
  font-size: clamp(4rem, 5vw, 3rem);
  background: linear-gradient(90deg, #60AAFF, #4080FF, #652A75);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 16px rgba(64, 170, 255, 0.8);
  margin-bottom: .6rem;
  animation: glowText 2s ease-in-out infinite alternate;
}

@keyframes glowText {
  from {
    text-shadow: 0 0 8px rgba(64, 170, 255, 0.6);
  }

  to {
    text-shadow: 0 0 24px rgba(101, 42, 117, 0.9);
  }
}

.promo-text p {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--text-light);
  ;
}

/* 2) Großer CTA-Button */
.promo-cta {
  margin-bottom: 3rem;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2.5rem;
  font-family: 'Stoneage', sans-serif;
  font-size: 1.3rem;
  background: linear-gradient(135deg, #652a75, #4080FF);
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(64, 128, 255, 0.5);
  transition: transform .3s, box-shadow .3s;
}

.btn-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(64, 128, 255, 0.7);
}

/* 3) Raptor-Evolution: Icons vergrößern und Glühen geben */
.raptor-evolution {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  /* mehr Abstand */
  margin-top: 2rem;
}

/* Jede Stage bekommt Hintergrund-Glow und mehr Platz */
.raptor-stage {
  position: relative;
  width: clamp(300px, 18vw, 220px);
  /* größer */
  padding: 1rem;
  border-radius: 16px;

  transition: transform .3s, box-shadow .3s;
  animation: stageBob 4s ease-in-out infinite;
}

/* sanftes Hin-&Her-Wippen */
@keyframes stageBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Bild selbst pulsiert zusätzlich */
.raptor-stage img {
  width: 100%;
  border-radius: 12px;

  transform-origin: bottom center;
  animation: iconPulse 3s ease-in-out infinite alternate;
}

/* Icon-Pulse animiert Größe & Glow */
@keyframes iconPulse {
  to {
    transform: scale(1.1);
    filter: drop-shadow(0 0 16px rgba(170, 24, 214, 0.8));
  }
}

/* Hover-State: kräftiger Glüheffekt & Drehung */
.raptor-stage:hover {
  transform: scale(1.2) rotate(-4deg);
  box-shadow: 0 0 24px rgba(140, 7, 192, 0.8), 0 0 12px rgba(101, 42, 117, 0.6);
}

.raptor-stage:hover img {
  animation: none;
  /* Pulse ausblenden, da Hover-Transform schon aktiv ist */
}

/* Beschriftung etwas größer & fette Farbe */
.raptor-stage::after {
  content: attr(data-label);
  display: block;
  margin-top: .6rem;
  font-family: 'Stoneage', sans-serif;
  font-size: 2rem;
  color: #a515c2;
  text-shadow: 0 0 8px #740f88;
}


/* Responsive */
@media (max-width: 768px) {
  .promo-hero {
    flex-direction: column;
  }

  .promo-banner,
  .promo-text {
    max-width: 100%;
  }

  .btn-cta {
    font-size: 1.2rem;
    padding: .8rem 2.5rem;
  }

  .raptor-stage {
    width: 80px;
  }
}

/* ================================
   Mobile-Feinschliff für Raptor-Promo
   ================================ */
@media (max-width: 768px) {
  .raptor-promo {
    padding: 40px 10px;
  }

  /* Hero-Block: vertikal, volle Breite */
  .promo-hero {
    flex-direction: column;
    gap: 1.5rem;
  }

  .promo-banner,
  .promo-text {
    max-width: 100%;
    width: 100%;
  }

  /* CTA-Button breiter & zentriert */
  .promo-cta .btn-cta {
    width: 100%;
    max-width: 320px;
    font-size: 1.1rem;
    padding: .8rem 1.5rem;
    margin: 0 auto 2rem;
  }

  /* Raptor-Evolution: Icons kleiner und dichter gepackt */
  .raptor-evolution {
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .raptor-stage {
    width: clamp(60px, 25vw, 100px);
    /* kleineres Minimum */
    padding: .5rem;
    border-radius: 12px;
    background: none;
    /* Hintergrund auf Mobile weglassen */
    animation: stageBob 3s ease-in-out infinite;
  }

  .raptor-stage img {
    width: 100%;
    animation: iconPulse 2.5s ease-in-out infinite alternate;
  }

  .raptor-stage::after {
    font-size: clamp(0.75rem, 3vw, 1rem);
    margin-top: .4rem;
    text-shadow: 0 0 4px #740f88;
  }
}



/* ================================
   Reveal-Animation beim Scrollen
   ================================ */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------
     Aufzählung in der Hero-Box
     ---------------------------- */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: grid;
  gap: 0.5rem 1.5rem;
}

.feature-list li {
  position: relative;
  padding-left: 1.4em;
  font-size: 1.1rem;
  color: var(--text-light);
}

.feature-list li::before {
  content: "›";
  left: 0;
  color: var(--primary);
  font-weight: bold;
  margin-right: 10px;
}

/* (Rest deiner bestehenden Promo-CSS bleibt unverändert) */

/* Feinjustierung mobile */
@media (max-width: 768px) {
  .feature-list {
    grid-template-columns: 1fr;
  }
}





/* ================================
   PRODUKTE-PROMO SECTION – STYLES
   ================================ */

/* 1) Basis & Scroll-Reveal */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 2) Headline & Subline */
.produkte-section .promo-heading {
  font-family: 'Stoneage', sans-serif;
  font-size: clamp(4rem, 6vw, 4rem);
  background: linear-gradient(90deg, #60AAFF, #4080FF, #652A75);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 16px rgba(96, 170, 255, 0.7);
  margin-bottom: .5rem;
  animation: glowText 2s ease-in-out infinite alternate;
}

.produkte-section .promo-subtitle {
  font-size: 1.5rem;
  color: #ccc;
  margin-bottom: 2rem;
  text-align: center;
}

/* Texte in der gesamten Produkte-Section mittig ausrichten */
.produkte-section {
  text-align: center;
}

/* Überschrift als Inline-Block, zentriert innerhalb des Sections */
.produkte-section .promo-heading {
  display: inline-block;
  margin: 0 auto 1rem;
  /* oben-kein, unten 1rem Abstand */
  text-align: center;
  /* für den Fall innerer Zeilenumbrüche */
}


/* 3) Filter-Tabs ohne Unterstreichung */
#prodFilterTabs .nav-link {
  font-family: 'Stoneage', sans-serif;
  color: #aaa;
  border: 2px solid transparent;
  border-radius: 8px;
  margin: 0 .5rem;
  padding: .5rem 1rem;
  transition: all .3s ease;
  text-decoration: none;
}

#prodFilterTabs .nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, #60AAFF, #4080FF);
  border-color: #60AAFF;
  box-shadow: 0 0 12px rgba(96, 170, 255, 0.8);
}

#prodFilterTabs .nav-link:hover {
  color: #fff;
  background: rgba(96, 170, 255, 0.2);
}

/* 4) Accent-Farben pro Kategorie */
.prod-card {
  --accent: #60AAFF;
  /* Fallback */
}

.prod-card[data-category="framework"] {
  --accent: #652A75;
}

/* Lila für Raptor */
.prod-card[data-category="buch"] {
  --accent: #4080FF;
}

/* Blau für Bücher */
.prod-card[data-category="spiele"] {
  --accent: #FFBF00;
}

/* Gelb für Spiele (Ennead) */
.prod-card[data-category="tools"] {
  --accent: #00CC66;
}

/* Grün für Tools */

/* 5) Karte & Hover */
.product-card {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: transform .4s, box-shadow .4s;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg,
      rgba(96, 170, 255, 0.15),
      rgba(101, 42, 117, 0.15));
  opacity: 0;
  transition: opacity .4s;
}

.product-card:hover::before {
  opacity: 1;
}

/* 6) Card-Inner */
.card-inner {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 7) Badge in Accent */
.badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--accent);
  color: #fff;
  padding: .3rem .8rem;
  font-size: .8rem;
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0 0 8px var(--accent);
}

/* 8) Bild Float */
.product-img {
  width: 100%;
  max-width: 200px;
  margin-bottom: 1rem;
  border-radius: 12px;
  animation: imgFloat 6s ease-in-out infinite;
}

@keyframes imgFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* 9) Titel in Accent */
.title {
  font-family: 'Stoneage', sans-serif;
  font-size: 2rem;
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent);
  margin-bottom: .6rem;
  text-align: center;
}

/* 10) Features-Liste mit Icon-Bullets */
.features {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #ddd;
  font-size: 1.2rem;
  text-align: left;
}

.features li {
  margin: .5rem 0;
  position: relative;
  padding-left: 1.8rem;
}

.features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-size: 1.2rem;
  line-height: 1;
}

/* 11) Buttons ohne Unterstreichung */
.card-link,
.btn-primary {
  text-decoration: none;
}

/* 12) Call-to-Action Button in Accent */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #4080FF);
  border: none;
  color: #fff;
  font-family: 'Stoneage', sans-serif;
  font-size: 1rem;
  padding: .8rem 1.5rem;
  border-radius: 50px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2),
    0 0 12px var(--accent);
  transition: transform .3s, box-shadow .3s;
}

.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3),
    0 0 20px var(--accent);
  color: #fff;
}

/* 13) Glow Keyframes */
@keyframes glowText {
  from {
    text-shadow: 0 0 8px rgba(96, 170, 255, 0.6);
  }

  to {
    text-shadow: 0 0 24px rgba(101, 42, 117, 0.9);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .prod-card {
    margin-bottom: 2rem;
  }

  .card-inner {
    padding: 1.5rem;
  }

  .product-img {
    max-width: 150px;
  }

  .features li {
    font-size: .85rem;
  }

  .btn-primary {
    width: 100%;
    text-align: center;
  }
}






/* ================================
   Warum-Coldrock – Timeline Styles (Update)
   ================================ */
.timeline-section {
  padding: 80px 20px;
  color: #fff;
  background: none;
  /* globaler Dark-Gradient */
}

.timeline-heading {
  font-family: 'Stoneage', sans-serif;
  font-size: clamp(4rem, 6vw, 4rem);
  background: linear-gradient(90deg, #60AAFF, #4080FF);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(96, 170, 255, 0.8);
  text-align: center;
  margin-bottom: .5rem;
}

.timeline-intro {
  font-size: 1.3em;
  color: #ccc;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem;
  line-height: 1.5;
}

/* passt den zentralen Strich an */
.timeline {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 auto 3rem;
  max-width: 800px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(96, 170, 255, 0.2), rgba(64, 128, 255, 0.2));
  transform: translateX(-50%);
}

/* === Timeline-Items === */
.timeline-item {
  position: relative;
  padding: 2rem 0;
  /* vertikaler Abstand */
  opacity: 0;
}

/* linke Seite */
.timeline-item:nth-child(odd) {
  padding-right: 25%;
  text-align: right;
}

/* rechte Seite */
.timeline-item:nth-child(even) {
  padding-left: 25%;
  text-align: left;
}

/* beim Einblenden */
.timeline-item.visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease-out, transform .6s ease-out;
}

/* Icon-Position exakt mittig */
.timeline-icon {
  position: absolute;
  top: 50%;
  left: calc(50% - 30px);
  width: 60px;
  height: 60px;
  margin-top: -30px;
  background: linear-gradient(135deg, #60AAFF, #4080FF);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(96, 170, 255, 0.6);
  animation: pulseIcon 2s infinite alternate ease-in-out;
  z-index: 2;
}

.timeline-icon i {
  color: #001530;
  font-size: 1.8rem;
}

@keyframes pulseIcon {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.2);
  }
}

/* Card-Container außen an die Linie andocken */
.timeline-content {
  display: inline-block;
  background: rgba(0, 0, 0, 0.6);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  max-width: 45%;
  margin-top: .5rem;
  position: relative;
  z-index: 1;
}

/* linke Kachel, rechts einrücken */
.timeline-item:nth-child(odd) .timeline-content {
  margin-right: calc(50% + 30px);
}

/* rechte Kachel, links einrücken */
.timeline-item:nth-child(even) .timeline-content {
  margin-left: calc(50% + 30px);
}

.timeline-content h3 {
  font-family: 'Stoneage', sans-serif;
  font-size: 2rem;
  margin: 0 0 .5rem;
  color: #60AAFF;
  text-shadow: 0 0 6px rgba(96, 170, 255, 0.7);
}

.timeline-content p {
  margin: 0;
  color: #ddd;
  font-size: 1.3rem;
  line-height: 1.4;
}

.timeline-content {
  text-align: center;
}

/* CTA-Button */
.cta-wrap {
  text-align: center;
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(30px);
}

.cta-wrap.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.btn-warum {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 2rem;
  font-family: 'Stoneage', sans-serif;
  font-size: 1.2rem;
  background: linear-gradient(135deg, #60AAFF, #4080FF);
  color: #001530;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(96, 170, 255, 0.6);
  transition: transform .3s, box-shadow .3s, color .3s;
}

.btn-warum:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 36px rgba(96, 170, 255, 0.8);
  color: #fff;
}

.product-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.65rem;
  font-family: 'Stoneage', sans-serif;
  background: rgba(96, 170, 255, 0.05);
  color: #60AAFF;
  padding: 3px 8px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  pointer-events: none;
  opacity: 0.4;
  user-select: none;
  z-index: 2;
}

.testimonial-card:hover .product-tag {
  opacity: 0.6;
  transform: scale(1.05);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ================
     Responsive
     ================ */
@media (max-width:768px) {
  .timeline::before {
    display: none;
  }

  .timeline-item {
    padding: 1.5rem 1rem;
    text-align: center !important;
    transform: translateY(30px);
  }

  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
  }

  .timeline-icon {
    top: -30px;
    left: 50%;
    margin-left: -30px;
  }

  .timeline-content {
    display: block;
    margin: 2rem auto 0;
    max-width: 90%;
  }

  /* linke Kachel, rechts einrücken */
  .timeline-item:nth-child(odd) .timeline-content {
    margin-right: 0px;
  }

  /* rechte Kachel, links einrücken */
  .timeline-item:nth-child(even) .timeline-content {
    margin-left: 0px;
  }
}

@media (max-width: 768px) {
  .testimonial-carousel-wrapper {
    width: 100%;
    padding: 2rem 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
    margin: 0 auto;
  }

  .testimonial-carousel-track {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    overflow: hidden;
  }

  .testimonial-card {
    width: 100%;
    max-width: 90vw;

    transform: none !important;
    box-shadow: 0 6px 20px rgba(96, 170, 255, 0.2);
  }

  .testimonial-card:hover {
    transform: none;
    box-shadow: 0 6px 24px rgba(96, 170, 255, 0.3);
  }

  .product-tag {
    font-size: 0.55rem;
    padding: 2px 6px;
    top: 8px;
    right: 8px;
    opacity: 0.3;
  }

  .quote-icon {
    left: 12px;
    font-size: 1.5rem;
  }

  .testimonial-text {
    font-size: 1rem;
    line-height: 1.5;
  }

  .testimonial-author {
    text-align: center;
    margin-top: 1rem;
  }

  .testimonials-section .promo-heading {
    font-size: 2rem !important;
  }

  .testimonials-section .promo-subtitle {
    font-size: 1rem;
    padding: 0 10px;
  }
}

/* ===== Warum-Coldrock: Mobile-Optimierung für Timeline ===== */
@media (max-width: 768px) {

  /* Timeline zentrieren und entfernen des Mittelstrichs */
  .timeline {
    max-width: 100%;
    margin: 0 auto 2rem;
    padding: 0;
  }

  .timeline::before {
    display: none;
  }

  /* Jedes Item full-width, Abstand unten */
  .timeline-item {
    width: 100%;
    padding: 1rem 0;
    margin-bottom: 2rem;
    text-align: left !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Icon über der Card platzieren */
  .timeline-icon {
    position: relative;
    top: 0;
    left: 50%;
    margin: 0 0 1rem -30px;
  }

  /* Content-Box full-width */
  .timeline-content {
    display: block;
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    padding: 1.5rem;
    text-align: left;
  }
}





/* ================================
   Testimonials-Sektion
   ================================ */
.testimonials-section {
  padding: 80px 20px;
  background: none;
  /* nutzt globalen Dark-Gradient */
  color: #fff;
  text-align: center;
}

.promo-heading {
  font-family: 'Stoneage', sans-serif;
  font-size: clamp(4em, 6vw, 4rem);
  background: linear-gradient(90deg, #60AAFF, #4080FF, #652A75);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 16px rgba(96, 170, 255, 0.8);
  margin-bottom: .5rem;
  animation: glowText 2s ease-in-out infinite alternate;
}

.promo-subtitle {
  font-size: 1.3rem;
  color: #ccc;
  max-width: 800px;
  margin: 0 auto 3rem;
  line-height: 1.5;
}

/* Testimonials Grid */
.testimonials-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Einzelne Quote-Cards */
.testimonial-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Wichtig: Kein space-between */
  padding: 2rem 1.5rem 1.5rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: opacity .6s ease-out, transform .6s ease-out;
  position: relative;
}

.testimonial-card.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Zitat-Icon */
.quote-icon {
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 2rem;
  color: #60AAFF;
  text-shadow: 0 0 8px rgba(96, 170, 255, 0.7);
}

/* Zitat-Text */
.testimonial-text {
  font-style: italic;
  color: #ddd;
  margin-top: 1rem;
  line-height: 1.5;
  flex-grow: 1;
}

/* Autor */
.testimonial-author {
  display: block;
  margin-top: auto;
  font-weight: bold;
  color: #aaa;
  text-align: right;
  align-self: flex-end;
}

/* CTA-Button */
.cta-wrap {
  margin-top: 1rem;
  transform: translateY(30px);
  opacity: 0;
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.cta-wrap.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Reveal-Animation bereits vorhanden? */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Button-Style */
.btn-warum {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2rem;
  font-family: 'Stoneage', sans-serif;
  font-size: 1.1rem;
  background: linear-gradient(135deg, #60AAFF, #4080FF);
  color: #001530;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(96, 170, 255, 0.6);
  transition: transform .3s, box-shadow .3s, color .3s;
}

.btn-warum:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 36px rgba(96, 170, 255, 0.8);
  color: #fff;
}

.testimonial-carousel-wrapper {
  width: 80vw;
  /* Nur 80% der Viewport-Breite */
  margin: 0 auto;
  overflow: hidden;
  /* Alles außerhalb abschneiden */
  padding: 4rem 2rem;
  position: relative;
}

.testimonial-carousel-track {
  display: flex;
  gap: 2rem;
  will-change: transform;
  overflow: visible;
  /* Track darf "rausstehen", Wrapper begrenzt */
}

.testimonial-card {
  flex: 0 0 auto;
  min-width: 300px;
  width: 300px;
  max-width: 350px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-origin: center center;
  position: relative;
  z-index: 1;
}

.testimonial-card:hover {
  transform: scale(1.4);
  z-index: 10;
  box-shadow: 0 0 24px 8px rgba(96, 170, 255, 0.6);
}

@media (max-width: 1200px) {
  .testimonial-card {
    flex: 0 0 45%;
  }
}

/* Responsive */
@media (max-width:768px) {

  /* .testimonial-card {
      max-width: 100%;
    } */
  .quote-icon {
    left: 50%;
    transform: translateX(-50%);
  }

  .testimonial-author {
    text-align: center;
  }

  .promo-heading {
    font-size: clamp(3.5em, 6vw, 4rem) !important;


  }
}









/* ================================
   Partner-Section
   ================================ */
.partners-section {
  padding: 80px 20px;
  text-align: center;
  color: #fff;
}

.partners-heading {
  font-family: 'Stoneage', sans-serif;
  font-size: clamp(4rem, 6vw, 4rem);
  background: linear-gradient(90deg, #60AAFF, #4080FF);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(96, 170, 255, 0.8);
  margin-bottom: .5rem;
}

.partners-subtitle {
  font-size: 1.3rem;
  color: #ccc;
  margin-bottom: 2rem;
}

/* 1) Grid-Layout */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}

/* 2) Card-Grundstruktur */
.partner-card {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, #60AAFF, #4080FF, #652A75) 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: transform .3s, box-shadow .3s;
  text-decoration: none;
}

/* 3) Einheitlicher Innenbereich */
.card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  height: 100%;
  box-sizing: border-box;
}

/* 4) Logos auf gleiche Höhe bringen */
.partner-logo {
  max-width: 120px;
  height: 120px;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: floatLogo 4s ease-in-out infinite;
}

.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 5) Partner-Name am Fuß der Card */
.partner-name {
  font-family: 'Stoneage', sans-serif;
  font-size: 1.3rem;
  color: #60AAFF;
  text-shadow: 0 0 6px rgba(96, 170, 255, 0.7);
  margin-top: auto;
}

/* 6) Hover-Effekt */
.partner-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 32px rgba(64, 128, 255, 0.6);
}

/* 7) Logo-Float-Animation */
@keyframes floatLogo {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* 8) Scroll-Reveal */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 9) Responsive */
@media (max-width: 768px) {
  .partners-grid {}

  .partner-logo {
    max-width: 100px;
    height: 100px;
  }

  .partners-subtitle {
    margin: 0 1rem 2rem;
  }
}


@media (max-width: 768px) {
  #prodFilterTabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin: 0 auto 1rem;
    padding: 0 10px;
    /* ↔ Innenabstand für Luft */
    max-width: 100%;
    /* ↔ Begrenzung auf Viewport */
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    /* ← falls etwas raus will */
  }

  #prodFilterTabs .nav-link {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;
    text-align: center;
    overflow: hidden;
  }

  #prodFilterTabs .nav-item {
    margin: 0;
    width: 100%;
  }
}

/* =========================
   HOT NEWS SECTION
   ========================= */
.hot-news-section {
  padding: 80px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  border-top: 2px solid rgba(96, 170, 255, 0.2);
  border-bottom: 2px solid rgba(96, 170, 255, 0.2);
  margin-top: 3rem;
}

.hot-news-heading {
  font-family: 'Stoneage', sans-serif;
  font-size: clamp(3rem, 5vw, 4rem);
  background: linear-gradient(90deg, #60AAFF, #4080FF, #652A75);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 16px rgba(96, 170, 255, 0.7);
  margin-bottom: 2rem;
}

.hot-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.hot-news-card {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: transform .3s ease, box-shadow .3s ease;
}

.hot-news-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 32px rgba(96, 170, 255, 0.5);
}

.hot-news-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hot-news-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.hot-news-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hot-news-title {
  font-family: 'Stoneage', sans-serif;
  font-size: 1.8rem;
  color: #60AAFF;
  margin-bottom: .5rem;
  text-shadow: 0 0 6px rgba(96, 170, 255, 0.7);
}

.hot-news-text {
  font-size: 1.1rem;
  color: #ddd;
  margin-bottom: 1.5rem;
}

.hot-news-btn {
  display: inline-block;
  background: linear-gradient(135deg, #60AAFF, #4080FF);
  color: #001530;
  padding: .6rem 1.2rem;
  border-radius: 50px;
  font-weight: bold;
  transition: transform .3s ease, box-shadow .3s ease;
}

.hot-news-btn i {
  margin-left: .3rem;
}

.hot-news-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(96, 170, 255, 0.5);
}

/* Responsive tweaks */
@media(max-width:768px) {
  .hot-news-image {
    height: 180px;
  }

  .hot-news-title {
    font-size: 1.5rem;
  }

  .hot-news-text {
    font-size: 1rem;
  }
}

/* Mini-Version des bestehenden Hot-News-Blocks */
.mini-hotnews-wrapper {
  position: relative;
  margin: 0 auto 1.5rem;
  /* Abstand zum Titel darunter */
  width: fit-content;
  /* zentrieren */
  transform: scale(0.8);
  /* -> sehr viel kleiner */
  transform-origin: top center;
  z-index: 2;
  /* sicher vor Canvas/Schnee */
}

/* hält das Layout mittig */
.mini-hotnews-wrapper .hot-news-section {
  margin: 0 auto;
  max-width: 1100px;
  /* deine Originalbreite */
}

/* Mobile noch etwas kleiner + etwas mehr Abstand */
@media (max-width: 768px) {
  .mini-hotnews-wrapper {
    transform: scale(0.32);
    margin-bottom: 1rem;
  }
}

.hot-news--hero {
  position: absolute;
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 92vw);
  padding: 0;
  margin: 0;

  border: 0;
  box-shadow: none;
  z-index: 100;
  /* über dem Hintergrund, unter Navbar */
}

.hot-news--hero .hot-news-grid {
  display: block;
  gap: 0;
}

.hot-news--hero .hot-news-card {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: transform .2s ease, box-shadow .2s ease;
}

.hot-news--hero .hot-news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.hot-news--hero .hot-news-image {
  height: 120px;
}

.hot-news--hero .hot-news-content {
  padding: 0.9rem 1rem;
}

.hot-news--hero .hot-news-title {
  font-size: 1rem;
  margin: 0 0 .25rem;
}

.hot-news--hero .hot-news-text {
  font-size: .9rem;
  margin: 0 0 .75rem;
}

.hot-news--hero .hot-news-btn {
  font-size: .9rem;
  padding: .5rem .9rem;
}


/* >>> Horizontal statt vertikal */
.hot-news--hero .hot-news-grid {
  display: flex;
  /* war: block */
  flex-wrap: nowrap;
  /* NICHT umbrechen */
  gap: 12px;
  align-items: stretch;
}

/* Mehr Breite für die Mini-Hot-News oben */
.hot-news--hero {
  width: min(820px, 96vw);
  /* vorher 560px */
}

.hot-news--hero .hot-news-link {
  flex-direction: row;
  align-items: center;
  /* vertikal zentriert */
  min-height: 120px;
  /* Mindesthöhe wie vorher */
  height: auto;
  /* -> wächst mit Text */
}

/* Bild als linker Streifen */
.hot-news--hero .hot-news-image {
  width: 42%;
  height: 100%;
  object-fit: cover;
  flex: 0 0 42%;
}

/* Content rechts — größer, aber in gleicher Höhe */
.hot-news--hero .hot-news-content {
  flex: 1 1 auto;
  padding: .8rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Größerer Titel */
.hot-news--hero .hot-news-title {
  font-size: 1.3rem;
  /* ↑ */
  line-height: 1.1;
  margin: 0 0 .25rem;
}

/* Teaser-Text: größer, aber auf 2 Zeilen geklemmt */
.hot-news--hero .hot-news-text {
  font-size: 1rem;
  /* ↑ */
  line-height: 1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* max. 2 Zeilen */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Button kompakt halten */
.hot-news--hero .hot-news-btn {
  align-self: flex-start;
  margin-top: .35rem;
  padding: .45rem .8rem;
  font-size: .9rem;
}

/* Grid oben bleibt horizontal – mehrere Artikel nebeneinander */
.hot-news--hero .hot-news-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: stretch;
}

.hot-news--hero .hot-news-text {
  -webkit-line-clamp: unset;
  /* Begrenzung aufheben */
  display: block;
  /* normales Block-Layout */
}

/* Mehr Platz nach rechts, Bild etwas schmaler */
.hot-news--hero .hot-news-image {
  flex: 0 0 36%;
  /* vorher 42% */
  width: 36%;
  height: 100%;
  object-fit: cover;
}

.hot-news--hero .hot-news-content {
  flex: 1 1 auto;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  /* kleine vertikale Abstände */
}

/* Titel & Teaser deutlich größer */
.hot-news--hero .hot-news-title {
  font-size: 1.9rem;
  /* vorher 1.3rem */
  line-height: 1.15;
  margin: 0;
}

.hot-news--hero .hot-news-text {
  font-size: 1.3rem;
  /* vorher 1rem */
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* max. 3 Zeilen, kein Clipping */
  overflow: hidden;
}

/* CTA wieder groß & präsent */
.hot-news--hero .hot-news-btn {
  align-self: flex-start;
  margin-top: .45rem;
  padding: .75rem 1.4rem;
  /* dicker Pill-Button */
  font-size: 1.3rem;
  border-radius: 9999px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 8px 22px rgba(96, 170, 255, .45);
}

/* Wer will: Button kann auch volle Breite einnehmen */
.hot-news--hero .hot-news-btn.is-full {
  display: block;
  width: 100%;
  text-align: center;
}

/* Sicherheit: Karte wächst bei Bedarf, clippt nichts */
.hot-news--hero .hot-news-link {
  flex-direction: row;
  align-items: center;
  min-height: 140px;
  /* etwas höher, wirkt luftiger */
  height: auto;
}


/* ===== Mobile-Fix für Hero + Mini-Hot-News ===== */
@media (max-width: 600px) {

  /* Hero-Headline besser lesbar & kompakter */
  .typing-animation {
    font-size: clamp(2rem, 9vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: .5px;
  }

  /* CTA-Buttons untereinander, schön groß */
  .hero-ctas {
    flex-direction: column;
    gap: .75rem;
    padding: 0 14px;
  }

  .hero-ctas .btn {
    width: 100%;
    padding: 1rem 1.1rem;
    font-size: 1.05rem;
  }

  .hero-ctas .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: #60AAFF;
    color: #e6f0ff;
  }

  /* Mini-Hot-News oben: horizontal, nix abgeschnitten */
  .mini-hotnews-wrapper {
    /* vorher transform: scale(...) */
    transform: none !important;
    width: 100%;
    margin: .5rem auto 1rem;
  }

  .hot-news--hero {
    position: static;
    /* nicht absolut, damit nix kollidiert */
    transform: none;
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
  }

  .hot-news--hero .hot-news-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .hot-news--hero .hot-news-link {
    flex-direction: row;
    align-items: center;
    min-height: 96px;
    /* kompakte Höhe */
    height: auto;
  }

  .hot-news--hero .hot-news-image {
    flex: 0 0 38%;
    /* Bild als linker Streifen */
    
    object-fit: cover;
    border-radius: 8px 0 0 8px;
  }

  .hot-news--hero .hot-news-content {
    min-width: 0;
    /* damit Text nicht overflowed */
    padding: .6rem .8rem;
    justify-content: center;
  }

  .hot-news--hero .hot-news-title {
    font-size: 1.05rem;
    line-height: 1.1;
    margin: 0 0 .2rem;
  }

  .hot-news--hero .hot-news-text {
    font-size: .95rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* max. zwei Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hot-news--hero .hot-news-btn {
    align-self: flex-start;
    padding: .42rem .72rem;
    font-size: .9rem;
    margin-top: .35rem;
  }
}

.testimonial-carousel-track {
  display: flex;
  gap: 32px;
  /* muss zu JS-GAP passen */
  will-change: transform;
  /* GPU hint */
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.testimonial-card {
  flex: 0 0 auto;
}

/* feste Breiten, kein Flex-Umbruch */




.social-section {
  max-width: 1200px;
  margin: 0 auto
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem
}

@media (max-width:980px) {
  .social-grid {
    grid-template-columns: 1fr
  }
}

.social-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1rem;
  padding: 1rem;
  backdrop-filter: blur(6px)
}

.social-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem
}

.embed-consent-btn {
  display: inline-block;
  padding: .6rem 1rem;
  border-radius: .75rem;
  border: 1px solid rgba(255, 255, 255, .2);
  background: transparent;
  color: #fff
}

.embed-consent-btn:hover {
  background: rgba(255, 255, 255, .06)
}

.li-embed-wrapper,
.ig-embed-wrapper {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .75rem;
  overflow: hidden;
  background: rgba(0, 0, 0, .25)
}

.social-more {
  display: inline-block;
  margin-top: .75rem;
  opacity: .85
}







/* ---------- Hot News Carousel ---------- */
.hot-news-carousel {
  position: relative;
  max-width: 980px;
  margin: 0 auto
}

.hn-viewport {
  overflow: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border-radius: 1rem
}

.hn-viewport::-webkit-scrollbar {
  height: 8px
}

.hn-viewport::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .15);
  border-radius: 4px
}

.hn-track {
  display: flex;
  gap: 1rem;
  padding: .25rem
}

.hot-news-card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  max-width: 680px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1rem;
  overflow: hidden
}

@media(min-width:900px) {
  .hot-news-card {
    flex-basis: 80%
  }
}

/* etwas schmäler am Desktop */

/* Pfeile */
.hn-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity .2s, transform .2s
}

.hn-prev {
  left: -3rem
}

.hn-next {
  right: -3rem
}

.hn-nav:hover {
  transform: translateY(-50%) scale(1.04)
}

@media(max-width:600px) {
  .hn-prev {
    left: .25rem
  }

  .hn-next {
    right: .25rem
  }
}

/* Tabs/Pagination */
.hn-tabs {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .6rem
}

.hn-tabs button {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, .25);
  cursor: pointer
}

.hn-tabs button[aria-selected="true"] {
  width: 26px;
  border-radius: 999px;
  background: #6ea2ff
}

/* Optional: kompakter Headerabstand für Hot News im Hero */
.hot-news--hero .hot-news-heading {
  margin-bottom: .5rem
}

/* Pfeile weiß machen */
.hn-nav {
  color: #fff;
  /* <- Iconfarbe (Font Awesome erbt das) */
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .08);
}

.hn-nav i,
.hn-nav svg {
  color: inherit;
  /* falls SVG: */
  fill: currentColor;
  stroke: currentColor;
}

.hn-nav:hover {
  background: rgba(255, 255, 255, .14);
}


/* IG: Wrapper darf nicht clippen */
.ig-embed-wrapper { overflow: visible; min-height: 0; }

/* Responsiv sicherstellen (override Inline-Styles) */
.instagram-media {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Falls deine Social-Card overflow hidden gesetzt hat, hier auch lösen: */
.social-card { overflow: visible; }


/* ===== Spotlight Split Layout ===== */
.kurse-alt.spotlight{padding:70px 0}
.spotlight__wrap{
  max-width:1100px;margin:0 auto;display:grid;gap:2rem;
  grid-template-columns: 380px 1fr;align-items:start
}
@media(max-width:992px){.spotlight__wrap{grid-template-columns:1fr}}

.spotlight__media{
  position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,rgba(96,170,255,.18),rgba(101,42,117,.18));
  box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06)
}
.spotlight__media img{display:block;width:100%;height:auto}
.spotlight__tags{
  list-style:none;display:flex;gap:.4rem;flex-wrap:wrap;margin:0;padding:10px;
  position:absolute;bottom:8px;left:8px
}
.spotlight__tags li{
  font-size:.8rem;padding:.25rem .6rem;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)
}

.spotlight__content{min-width:0}
.spotlight__kicker{
  letter-spacing:.18em;text-transform:uppercase;color:#d9c6ff;opacity:.9;font-size:.85rem
}
.spotlight__title{
  font-family:'Stoneage',sans-serif;margin:.2rem 0 .6rem;
  font-size: clamp(2.2rem, 4.6vw, 3.2rem);
  background:linear-gradient(90deg,#60AAFF,#4080FF,#652A75);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 12px rgba(96,170,255,.55)
}
.spotlight__lead{font-size:1.15rem;color:#eadcff;opacity:.95;margin:0 0 1rem}

.spotlight__pills{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.spotlight__pills .pill{
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  padding:.4rem .7rem;border-radius:999px;font-size:.9rem
}

.spotlight__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin:1rem 0 1.1rem
}
@media(max-width:900px){.spotlight__grid{grid-template-columns:1fr}}
.spotlight__grid .card{
  padding:1rem;border-radius:14px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);text-align:left;
  transition:transform .2s ease, box-shadow .2s ease
}
.spotlight__grid .card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.spotlight__grid .card i{font-size:1.2rem;margin-bottom:.35rem;color:#60AAFF}
.spotlight__grid .card h3{margin:.1rem 0 .25rem;font-size:1.1rem;color:#fff}
.spotlight__grid .card p{margin:0;color:#cfd3ff;font-size:.98rem}

.spotlight__ctas{display:flex;gap:.6rem;flex-wrap:wrap;margin: .5rem 0 1.1rem}
.spotlight__ctas .btn{border-radius:999px;padding:.8rem 1.4rem}

.spotlight__steps{
  list-style:none;margin:1rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem
}
@media(max-width:900px){.spotlight__steps{grid-template-columns:repeat(2,1fr)}}
.spotlight__steps li{
  display:flex;gap:.6rem;align-items:center;padding:.6rem .7rem;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)
}
.spotlight__steps img{width:42px;height:42px;object-fit:contain;border-radius:10px}
.spotlight__steps b{display:block;color:#e9a8ff;font-size:.98rem}
.spotlight__steps span{display:block;color:#cfd3ff;font-size:.9rem;opacity:.9}








/* Section */
.cr-experience{
  position:relative; padding:110px 0 90px; color:#fff;
  
  overflow:hidden;
}

/* Head */
.cr-head{ text-align:center; max-width:980px; margin:0 auto 40px; }
.cr-kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .75rem; border-radius:999px; font-weight:700;
  background: rgba(142,231,255,.12); border:1px solid rgba(142,231,255,.3);
  color:#8ee7ff; letter-spacing:.5px; text-transform:uppercase; font-size:.85rem;
}
.cr-title{ font-size:2.6rem; margin:.8rem 0 .6rem; line-height:1.1;
  text-shadow:0 0 12px rgba(0,191,255,.45); }
.cr-title span{ color:#8ee7ff; }
.cr-sub{ opacity:.9; font-size:1.1rem; }

/* Chips */
.cr-chips{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.25rem; }
.cr-chips li{
  list-style:none; padding:.45rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.18);
  font-size:.9rem; opacity:.95;
}
.cr-chips i{ margin-right:.4rem; color:#00bfff; }

/* Grid */
.cr-grid{ display:grid; gap:22px; margin-top:36px; grid-template-columns: repeat(4, minmax(220px, 1fr)); }
@media (max-width:1200px){ .cr-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){  .cr-grid{ grid-template-columns: 1fr; } }

/* Cards */
.cr-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px; padding:28px 24px; text-align:left; position:relative; overflow:hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.cr-card::after{
  content:""; position:absolute; inset:-40% -30% auto -30%; height:140%;
  background: radial-gradient(400px 160px at var(--mx,50%) var(--my,0%), rgba(0,191,255,.18), transparent 60%);
  pointer-events:none; opacity:0; transition:opacity .25s ease;
}
.cr-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,191,255,.25);
  border-color: rgba(142,231,255,.45);
}
.cr-card:hover::after{ opacity:1; }
.cr-icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:14px;
  background: linear-gradient(135deg, rgba(0,191,255,.18), rgba(94,23,235,.22));
  border:1px solid rgba(142,231,255,.35);
  box-shadow: inset 0 0 18px rgba(0,191,255,.25), 0 0 18px rgba(0,191,255,.15);
  color:#00bfff; font-size:1.25rem;
}
.cr-card h3{ font-size:1.25rem; margin:4px 0 8px; }
.cr-card p{ opacity:.92; }
.cr-points{ margin:12px 0 0; padding-left:0; display:grid; gap:6px; }
.cr-points li{ list-style:none; font-size:.95rem; opacity:.95; }
.cr-points i{ color:#00d5ff; margin-right:.45rem; }

/* CTA */
.cr-cta{ text-align:center; margin-top:36px; }
.btn-cr-hero{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:14px 24px; border-radius:999px; font-weight:800; letter-spacing:.4px;
  color:#fff; text-transform:uppercase; border:none;
  background: linear-gradient(90deg, #00bfff, #5e17eb);
  box-shadow: 0 0 18px rgba(0,191,255,.45);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-cr-hero:hover{ transform: translateY(-2px) scale(1.03); box-shadow:0 0 26px rgba(0,191,255,.7); }
.cr-cta-sub{ font-size:.95rem; opacity:.85; margin-top:.6rem; }

/* Nutzt DEINE existierende animate-on-scroll/visible-Logik */
.cr-experience .animate-on-scroll{ opacity:0; transform: translateY(16px); transition: all .6s ease; }
.cr-experience .animate-on-scroll.visible{ opacity:1; transform: translateY(0); }



/* =========================================
   WHY COLDROCK – THEME-BINDING OVERRIDES
   passt alles auf deine Variablen & Abstände an
   ========================================= */

/* Section-Hintergrund auf deine Global-Gradienten */
.cr-experience{
  padding: 80px 20px 70px;   /* etwas kompakter */
  
}

/* Headline & Subline im Stoneage/Acme-Style deiner Seite */
.cr-head{ max-width: 1100px; }
.cr-title,
.cr-head .cr-title{
  font-family: 'Stoneage', sans-serif;
  font-size: clamp(3rem, 6vw, 3.5rem);
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(96,170,255,.55); /* sanfter Neon wie bei dir */
  margin: .4rem 0 .3rem;
}
.cr-sub{ font-family: 'Acme', sans-serif; color: var(--text-light); }

/* Kicker/Chips an deine „Glas“-Chips angleichen */
.cr-kicker{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--primary);
}
.cr-chips li{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}
.cr-chips i{ color: var(--primary); }

/* Grid-Abstände wie bei Cards auf der Seite */
.cr-grid{ gap: 18px; margin-top: 28px; }

/* Karten in deinem „Glassmorphism“ */
.cr-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;              /* wie partner/product/testimonial */
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.cr-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  border-color: rgba(255,255,255,.22);
}
/* Hover-Glow farblich anpassen */
.cr-card::after{
  background: radial-gradient(360px 140px at var(--mx,50%) var(--my,0%),
              color-mix(in srgb, var(--primary) 35%, transparent),
              transparent 60%);
}

/* Icon-Kacheln in deinem Blau */
.cr-icon{
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, transparent),
                                      color-mix(in srgb, var(--secondary) 22%, transparent));
  border: 1px solid rgba(255,255,255,.18);
  color: var(--primary);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--primary) 25%, transparent);
}

/* Texte/Checks konsistent */
.cr-card h3{ font-family:'Stoneage',sans-serif; color:#fff; }
.cr-points i{ color: var(--primary); }

/* CTA-Button auf dein Button-Design mappen */
.btn-cr-hero{
  font-family: 'Stoneage', sans-serif;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #001530;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(96,170,255,.45);
}
.btn-cr-hero:hover{
  box-shadow: 0 12px 36px rgba(96,170,255,.65);
  color: #fff;
}

/* Reveal nutzt deine vorhandene animate-on-scroll */
.cr-experience .animate-on-scroll{ opacity:0; transform: translateY(24px); }
.cr-experience .animate-on-scroll.visible{ opacity:1; transform: translateY(0); }

/* Responsive: ident wie restliche Seite */
@media (max-width:1200px){ .cr-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){  .cr-grid{ grid-template-columns: 1fr; } }