/* ==========================================================================
   Ebene 2 · Slider (Embla)
   --------------------------------------------------------------------------
   Nur Mechanik: Viewport, Schiene, Folien, Pfeile, Punkte.
   Wie eine Folie aussieht (Bild, Text, Höhe), bestimmt das Projekt.
   Ohne .is-embla läuft der Scroll-Snap-Notbehelf.

   Stellschrauben am Element:
     --slide-size     Breite einer Folie (Standard 100 %)
     --slide-gap      Abstand zwischen Folien
     --pfeil-abstand  Abstand der Pfeile vom Rand
     --pfeil-versatz-zurueck / --pfeil-versatz-vor   zusätzlicher Versatz, z. B. -100% / 100%
                                                     = Pfeile komplett außerhalb des Sliders
     --pfeil-flaeche / --pfeil-rand / --pfeil-farbe   Aussehen der Pfeile
     --pfeil-handy-groesse / --pfeil-handy-rand         Handy-Pfeile unten (data-pfeile-handy="unten")
   ========================================================================== */

@layer layout {

  .embla { position: relative; }
  .embla__viewport { overflow: hidden; }
  .embla:not(.is-embla) .embla__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .embla:not(.is-embla) .embla__viewport::-webkit-scrollbar { display: none; }

  .embla__container {
    display: flex;
    gap: var(--slide-gap, 0);
  }
  .embla__slide {
    flex: 0 0 var(--slide-size, 100%);
    min-inline-size: 0;
    position: relative;
    scroll-snap-align: start;
  }

  .embla__dots {
    display: flex;
    gap: var(--size-2);
    justify-content: center;
    padding-block: var(--size-3) 0;
  }
  .embla__dots button {
    background: var(--surface-filled);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-round);
    block-size: 9px;
    cursor: pointer;
    inline-size: 9px;
    padding: 0;
    transition: inline-size .2s;
  }
  .embla__dots button[aria-current="true"] {
    background: var(--primary);
    border-color: var(--primary);
    inline-size: 26px;
  }

  .embla__pfeil {
    align-items: center;
    background: var(--pfeil-flaeche, oklch(0% 0 0 / .55));
    block-size: 44px;
    border: 1px solid var(--pfeil-rand, oklch(100% 0 0 / .2));
    border-radius: var(--radius-round);
    color: var(--pfeil-farbe, #fff);
    cursor: pointer;
    display: none;
    inline-size: 44px;
    inset-block-start: 50%;
    justify-content: center;
    position: absolute;
    translate: 0 -50%;
    z-index: 2;
  }
  /* Versatz nach außen: z. B. -100% / 100% setzt die Pfeile ganz neben den Slider */
  .embla__pfeil.zurueck { inset-inline-start: var(--pfeil-abstand, var(--size-3)); translate: var(--pfeil-versatz-zurueck, 0) -50%; }
  .embla__pfeil.vor     { inset-inline-end: var(--pfeil-abstand, var(--size-3)); translate: var(--pfeil-versatz-vor, 0) -50%; }
  @media (min-width: 48rem) { .embla__pfeil { display: flex; } }

  /* Handy mit data-pfeile-handy="unten": Pfeile klein in der Zeile der Punkte
     (‹ ● ● ● ›) statt über dem Bild. Wischen geht weiterhin. */
  @media (max-width: 47.99rem) {
    .embla[data-pfeile-handy="unten"] {
      align-items: center;
      display: grid;
      grid-template-columns: auto 1fr auto;
    }
    .embla[data-pfeile-handy="unten"] .embla__viewport { grid-column: 1 / -1; min-inline-size: 0; }   /* Grid-Kind darf nicht auf Inhaltsbreite wachsen */
    .embla[data-pfeile-handy="unten"] .embla__dots { grid-column: 2; grid-row: 2; }
    .embla[data-pfeile-handy="unten"] .embla__pfeil {
      block-size: var(--pfeil-handy-groesse, 36px);
      display: flex;
      grid-row: 2;
      inline-size: var(--pfeil-handy-groesse, 36px);
      margin: var(--size-3) var(--pfeil-handy-rand, var(--size-4)) 0;
      position: static;
      translate: none;
    }
    .embla[data-pfeile-handy="unten"] .embla__pfeil.zurueck { grid-column: 1; }
    .embla[data-pfeile-handy="unten"] .embla__pfeil.vor { grid-column: 3; }
  }
}

/* Folien tragen role="group" (Screenreader: „Folie 1 von 3“). OPUI macht jedes
   [role="group"] zur Flexbox (für Avatar-Gruppen) – dann schrumpft der Inhalt
   auf seine eigene Breite. Gleicher Layer wie OPUI-Komponenten, damit diese
   Regel greift (Klasse schlägt :where()). */
@layer components.extended {
  .embla__slide { display: block; }
}