/* =========================
   EDUKI Carousel (sauber & final)
   - 1x pro Seite
   - Mobile-first
   - Dark-Mode ready
   - Bild: komplett sichtbar (contain), KEIN Blur, KEIN Rahmen
   - Pill "zu Eduki / auf Eduki ansehen" unten rechts auf dem Bild
   - Ribbon(s) optional
   - Pfeile ab Desktop + Dots
   ========================= */

/* ===== Design Tokens ===== */
.eduki-carousel{
  --ec-bg: rgba(255,255,255,.78);
  --ec-border: rgba(15,23,42,.10);
--ec-shadow: 0 4px 12px rgba(15,23,42,.05);
  --ec-text: #0f172a;
  --ec-muted: #475569;

  --ec-pill-bg: rgba(15,23,42,.36);
  --ec-pill-border: rgba(255,255,255,.18);
  --ec-pill-text: #ffffff;

  --ec-radius: 18px;
  --ec-gap: 12px;

    --ec-card-w: 240px; /* 👈 HIER steuerst du die Breite */

  /* iPhone-tauglich */
  --ec-maxw: 360px;   /* Card-Breite */
  --ec-maxh: 290px;   /* Bildhöhe */

  width: 100%;
}

@media (prefers-color-scheme: dark){
  .eduki-carousel{
    --ec-bg: rgba(17,24,39,.55);
    --ec-border: rgba(148,163,184,.18);
    --ec-shadow: 0 8px 20px rgba(0,0,0,.28);
    --ec-text: #e5e7eb;
    --ec-muted: #a1a1aa;

    --ec-pill-bg: rgba(0,0,0,.35);
    --ec-pill-border: rgba(255,255,255,.12);
  }
}

/* ===== Track ===== */
.eduki-carousel__track{
  display: grid;
  grid-auto-flow: column;

  /* vorher: min(92%, var(--ec-maxw)) */
  grid-auto-columns: var(--ec-card-w);

  gap: var(--ec-gap);

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding: 2px 2px 10px;
  scrollbar-width: none;
}

.eduki-carousel__track::-webkit-scrollbar{ display:none; }

/* ===== Slide / Card ===== */
.eduki-carousel__slide{
  position: relative;
  display: block;
  scroll-snap-align: center;

  border-radius: var(--ec-radius);
  border: 1px solid var(--ec-border);
  background: var(--ec-bg);
  box-shadow: var(--ec-shadow);

  text-decoration: none;
  color: inherit;

  min-width: 0;

}

/* ===== Bildbereich (edge-to-edge, kein Rahmen) ===== */
.eduki-carousel__media{
  position: relative;
  padding: 0;
  margin: 0;
  display: grid;
  justify-items: center; /* Frame mittig */
}
.eduki-carousel__img{
  width: 100%;
  height: var(--ec-maxh);
  border: 0;
  background: var(--ec-bg); /* <<< macht die Letterbox unsichtbar */
object-fit: cover; /* füllt komplett, aber schneidet evtl. minimal ab */

}


.eduki-carousel__img img{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: contain;      /* NICHT abschneiden */
  object-position: center;
  background: transparent;
}

/* ===== Pill: unten rechts auf dem Bild ===== */
.eduki-carousel__pill{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  background: var(--ec-pill-bg);
  border: 1px solid var(--ec-pill-border);
  color: var(--ec-pill-text);

  font-size: .72rem;
  letter-spacing: .01em;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  white-space: nowrap;
}
/* Hover: Pill wird minimal dunkler */
.eduki-carousel__pill{
  transition: background-color .15s ease, border-color .15s ease;
}

.eduki-carousel__slide:hover .eduki-carousel__pill{
  background: rgba(15,23,42,.55);          /* leicht dunkler */
  border-color: rgba(255,255,255,.28);
}

/* Textvariante: mobil kurz, desktop länger */
.eduki-carousel__pill .full{ display: none; }
.eduki-carousel__pill .short{ display: inline; }
@media (min-width: 520px){
  .eduki-carousel__pill .full{ display: inline; }
  .eduki-carousel__pill .short{ display: none; }
}
@media (prefers-color-scheme: dark){
  .eduki-carousel__slide:hover .eduki-carousel__pill{
    background: rgba(0,0,0,.55);
    border-color: rgba(255,255,255,.20);
  }
}

/* ===== Meta / Untertitel (unten sauber getrennt) ===== */
.eduki-carousel__meta{
  padding: 10px 12px 12px;
  border-top: 1px solid var(--ec-border);
}

.eduki-carousel__title{
  margin: 0;
  font-size: .92rem;
  letter-spacing: -0.01em;
  color: var(--ec-text);
  line-height: 1.25;
}


/* Diagonal-Ribbon Basis */
.eduki-carousel__ribbon{
  position: absolute;
  left: -64px;

  width: 190px;
  text-align: center;

  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;

  padding: 7px 0;

  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: rotate(-45deg);
  transform-origin: left top;
}
/* Card clippt wieder -> Ribbon kann nicht "rauslaufen" */
.eduki-carousel__slide{
  overflow: hidden;
}

/* Ribbon-Container sitzt im Bildbereich */
.eduki-carousel__ribbons{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  pointer-events: none;
}

/* Ribbon: so ausrichten, dass es komplett innerhalb bleibt */
.eduki-carousel__ribbon{
  position: absolute;
  left: 0;              /* NICHT negativ */
  top: 0;

  width: 160px;         /* etwas schmaler -> passt besser in die Card */
  text-align: center;

  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;

  padding: 7px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);

  transform: rotate(-45deg) translate(-22px, -6px);
  transform-origin: left top;
}

/* 1. Ribbon */
.eduki-carousel__ribbon.is-1{ top: 0; }
/* 2. Ribbon */
.eduki-carousel__ribbon.is-2{ top: 26px; }

/* 1. Ribbon */


/* Farbvarianten */
.eduki-carousel__ribbon--empfehlung{
  background: linear-gradient(135deg, #7fb7b2, #5fa3a0);
  color: #e9fffe;
}
.eduki-carousel__ribbon--bestseller{
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff7ed;
}

@media (prefers-color-scheme: dark){
  .eduki-carousel__ribbon--empfehlung{
    background: linear-gradient(135deg, #6fb0ab, #4e8f8c);
    color: #e6fffb;
  }
  .eduki-carousel__ribbon--bestseller{
    background: linear-gradient(135deg, #fbbf24, #b45309);
    color: #fff7ed;
  }
}
/* ===== Dots (dezenter) ===== */
.eduki-carousel__dots{
  display: flex;
  justify-content: center;
  gap: 8px;                /* etwas mehr Luft */
  margin-top: 10px;
}

.eduki-carousel__dots button{
  width: 4px;
  height: 3px;
  border-radius: 999px;
  border: 0;

  background: rgba(15,23,42,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: transform .15s ease, background .15s ease;
}

.eduki-carousel__dots button[aria-current="true"]{
  background: rgba(15,23,42,.38);
  transform: scale(1.15);  /* minimaler Fokus, kein „Button-Gefühl“ */
}


@media (prefers-color-scheme: dark){
  .eduki-carousel__dots button{ background: rgba(255,255,255,.18); }
  .eduki-carousel__dots button[aria-current="true"]{ background: rgba(255,255,255,.45); }
}

/* ===== Pfeile (Desktop) ===== */
.eduki-carousel__nav{
  display: none; /* mobile: aus */
}

@media (min-width: 768px){
  .eduki-carousel{ position: relative; }

  .eduki-carousel__nav{
    display: flex;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .eduki-carousel__arrow{
    pointer-events: auto;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);

    width: 38px;
    height: 38px;
    border-radius: 999px;

    display: grid;
    place-items: center;

    background: rgba(15,23,42,.35);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
  }

  .eduki-carousel__arrow:hover{
    background: rgba(15,23,42,.55);
    transform: translateY(-50%) scale(1.05);
  }

  .eduki-carousel__arrow.left{ left: -12px; }
  .eduki-carousel__arrow.right{ right: -12px; }
}

@media (prefers-color-scheme: dark){
  .eduki-carousel__arrow{
    background: rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.12);
  }
}

/* ===== Safety: Grid children dürfen schrumpfen ===== */
.eduki-carousel__track,
.eduki-carousel__slide{
  min-width: 0;
}
/* =========================
   PATCH: Ribbon sichtbar + Pfeile auch mobil
   ========================= */

/* 1) Ribbon nicht abschneiden */
.eduki-carousel__slide{
  overflow: visible;              /* war hidden -> Ribbon darf raus */
}

/* Inhalt weiterhin sauber im Radius clippen (Bild & Meta) */
.eduki-carousel__media{
  overflow: hidden;
  border-radius: var(--ec-radius) var(--ec-radius) 0 0;
}

.eduki-carousel__meta{
  border-radius: 0 0 var(--ec-radius) var(--ec-radius);
  overflow: hidden;
}

/* Optional: Ribbon etwas weniger aggressiv rausziehen */
.eduki-carousel__ribbon{
  left: -52px;                    /* war -64px -> etwas mehr im Sichtbereich */
  width: 190px;                   /* kann so bleiben */
}


/* 2) Pfeile auch auf Mobile anzeigen */
.eduki-carousel{
  position: relative;             /* Nav kann immer absolut liegen */
}

.eduki-carousel__nav{
  display: flex;                  /* war mobile: none */
  position: absolute;
  inset: 0;
  pointer-events: none;           /* Track bleibt scrollbar */
  z-index: 10;
}

/* Mobile-Default (kleiner, innen) */
.eduki-carousel__arrow{
  pointer-events: auto;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);

  width: 34px;
  height: 34px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(15,23,42,.35);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  cursor: pointer;
}

.eduki-carousel__arrow.left{ left: 8px; }
.eduki-carousel__arrow.right{ right: 8px; }

/* Desktop: größer + leicht außen wie vorher */
@media (min-width: 768px){
  .eduki-carousel__arrow{
    width: 38px;
    height: 38px;
    transition: background .15s ease, transform .15s ease;
  }


  .eduki-carousel__arrow.left{ left: -12px; }
  .eduki-carousel__arrow.right{ right: -12px; }
}

@media (prefers-color-scheme: dark){
  .eduki-carousel__arrow{
    background: rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.12);
  }
}