/* ===========================================================================
   karussell.css — Benker WP-Theme
   HANDGESCHRIEBEN. Eigene Datei, damit eine Neuextraktion von components.css
   diese Regeln nicht ueberschreibt. Wird NACH components.css geladen.

   Produkt-Karussell (.pcar): Die Unterpunkte der Karten sind seit 22.07.2026
   direkte Produktlinks mit Pfeil (Entscheidung im Content-Review; der fruehere
   "Mehr erfahren"-Link auf der Karte entfiel, er zeigte auf "#"). Diese Datei
   gestaltet die Links und blendet die Liste auch mobil ein — sie ist jetzt
   Navigation, keine Deko, und ohne sie haette die Karte mobil keinen Link.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   ENDPOSITION DES KARUSSELLS (10.08.2026, Korrekturen KW 32)

   Atilla: "Der letzte Slide haengt komplett am Rand."

   Der Viewport hat links ein Innenpolster in Hoehe des Seitenrands, damit die
   Karten mit dem Text darueber fluchten. Rechts hatte er keines: Das Karussell
   laeuft absichtlich ueber die Fensterkante hinaus (Peek-Effekt), und die
   Rechenlogik in slider.js schiebt bis zur buendigen Endposition — die lag
   damit exakt an der Fensterkante.

   Jetzt spiegelt der rechte Rand den linken. Beim letzten Klick steht die
   letzte Karte damit auf derselben Linie wie der Seiteninhalt, links wie
   rechts. Der Peek-Effekt bleibt: Waehrend des Blaetterns laufen die Karten
   weiterhin ins Polster hinein, weil overflow am Aussenrand schneidet — nur
   die Endposition rastet auf dem Raster ein.

   Kein Eingriff in slider.js noetig: maxTranslate() rechnet das Innenpolster
   bereits heraus.
   --------------------------------------------------------------------------- */
.pcar__viewport {
  padding-right: var(--pcar-inset, 0px);
}

@media (min-width: 1024px) {
  .pcar__viewport {
    /* Gleiche Rechnung wie das linke Polster: der Abstand vom Fensterrand bis
       zur Inhaltskante. */
    --pcar-inset: max(var(--space-5), calc((100vw - var(--content-max)) / 2));
  }
}

.pcar__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
  /* Zeilenabstand liegt IM Link (nicht als Luecke zwischen den Listenpunkten):
     so stossen die Klickflaechen nahtlos aneinander und der Zeiger bleibt beim
     senkrechten Abfahren konstant, ohne tote Zonen dazwischen. */
  padding-block: calc(var(--space-2) * 1.5);
}

/* Die Luecken der Liste abraeumen — der Abstand kommt jetzt aus den Links. Nur
   dort, wo wirklich Links drin sind (:has), damit reine Text-Listen (ESD-Karten)
   ihren alten Rhythmus behalten. */
.pcar__sub:has(.pcar__sublink) {
  gap: 0;
}

.pcar__sub li:has(.pcar__sublink) {
  padding-block: 0;
}

.pcar__sublink svg {
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.pcar__sublink:hover svg,
.pcar__sublink:focus-visible svg {
  transform: translate(2px, -2px);
  opacity: 1;
}

.pcar__sublink:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
  border-radius: 4px;
}

/* Unter 720px war die Liste ausgeblendet (reine Deko im Astro-Build). Als
   Navigation muss sie auch mobil sichtbar sein. */
@media (max-width: 719px) {
  .pcar__sub {
    display: flex;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcar__sublink svg {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Karten-Redesign (Figma 380:4570, 22.07.2026):
   - Nummer sitzt im Textblock ueber der Ueberschrift (Markup in carousel.php),
     die Karte richtet ihren Inhalt deshalb nur noch unten aus.
   - Verlauf deutlicher: voll abgedunkelt (0.8) ab ~75 % der Kartenhoehe, die
     Abdunklung beginnt oben und reicht ueber die Kartenmitte hinaus.
   - Kompakterer Innenabstand (40px statt Token space-6) und engere Linkliste.
   --------------------------------------------------------------------------- */

.pcar__card {
  justify-content: flex-end;
  padding: 40px;
}

.pcar__scrim {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);
}

.pcar__nr {
  margin-bottom: var(--space-2); /* + gap des Textblocks (12px) = 20px bis zur Ueberschrift (Figma). */
}

.pcar__cat {
  max-width: 400px;
}

.pcar__sub {
  min-width: 312px;
}

.pcar__sublink {
  padding-block: var(--space-2); /* kompakter (Figma: 8px Raster in der Liste) */
}

.pcar__sub li:first-child .pcar__sublink {
  padding-top: 0;
}

.pcar__sub li:last-child .pcar__sublink {
  padding-bottom: 0;
}

@media (min-width: 720px) {
  .pcar__info {
    gap: var(--space-6); /* Figma: 33px zwischen Textblock und Linkliste (statt space-8). */
  }

  /* Die Linkliste buendig an den rechten Innenabstand ruecken. Ohne das sammelt
     sich der Restplatz der Zeile RECHTS neben der Liste (der Textblock ist auf
     400px gedeckelt und nimmt den Platz nicht auf) — der Rand waere links 40px,
     rechts deutlich mehr. margin-left:auto schiebt die Liste an die Kante,
     dadurch sind beide Raender identisch. */
  .pcar__sub {
    margin-left: auto;
  }
}

@media (max-width: 719px) {
  .pcar__card {
    padding: var(--space-5);
  }
}