/* === LEARN CAROUSEL (eigenständig, conflict-free) === */
.learn-carousel {
  position: relative;
  overflow: hidden;
  max-width: 420px;
  margin: 2rem auto;
  background: linear-gradient(180deg, #fffefc 0%, #f9f9f6 100%);
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;
}

.learn-carousel-track {
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.learn-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  text-align: center;
  padding: 1.6rem 1.4rem 2rem;
  box-sizing: border-box;
}

.learn-slide img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.learn-slide h3 {
  color: #0d47a1;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

.learn-slide hr {
  width: 50%;
  margin: 0.6rem auto 1rem;
  border: none;
  border-top: 2px solid rgba(13, 71, 161, 0.2);
}

.learn-slide p {
  font-size: 0.96rem;
  line-height: 1.55;
  color: #222;
  max-width: 90%;
  margin: 0 auto;
}

/* === NAVIGATION (Desktop) === */
.learn-prev,
.learn-next {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  background: rgba(13, 71, 161, 0.08);
  color: #0d47a1;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, color 0.3s;
}

.learn-prev:hover,
.learn-next:hover {
  background: rgba(13, 71, 161, 0.18);
  color: #0d47a1;
}

.learn-prev { left: 8px; }
.learn-next { right: 8px; }

/* Nummern-Badge oben links pro Slide */
.learn-carousel-track { counter-reset: lc-slide; }

.learn-slide { position: relative; }

.learn-slide::before {
  counter-increment: lc-slide;
  content: counter(lc-slide);
  position: absolute;
  top: 38px; 
  left: 38px;
  z-index: 2;
  width: 40px; 
  height: 40px;
  border-radius: 50%;
  display: flex; 
  align-items: center; 
  justify-content: center;

  /* Look: grauer, halbtransparenter Kreis */
  background: rgba(255,255,255,0.9);
  color: #1a1a1a;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  backdrop-filter: blur(4px);

  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .learn-slide::before {
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  }
}

/* Optional: kleinere Badges auf sehr kleinen Screens */
@media (max-width: 380px) {
  .learn-slide::before { width: 34px; height: 34px; font-size: 14px; }
}


@media (min-width: 740px) {
  .learn-prev, .learn-next { display: flex; }
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
  .learn-carousel {
    background: linear-gradient(180deg, #121212 0%, #1b1b1b 100%);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  }
  .learn-slide h3 { color: #fdd835; }
  .learn-slide p { color: #e0e0e0; }
  .learn-slide hr { border-top: 2px solid rgba(253, 216, 53, 0.25); }
  .learn-prev, .learn-next {
    background: rgba(255,255,255,0.08);
    color: #fdd835;
  }
  .learn-prev:hover, .learn-next:hover {
    background: rgba(255,255,255,0.18);
  color: #f7d540;

  }

}

/* === TOUCH === */
.learn-carousel-track::-webkit-scrollbar { display: none; }