/* tm-splide.css – Basis-Styles für deine Splide-Varianten
   -------------------------------------------------------
   Hinweise:
   - NICHT global ".splide { visibility: visible !important }" setzen.
   - Wir adden die Klasse .splide erst beim Mount → Grid bleibt ohne JS sichtbar.
*/

/* Pfeile unter den Slides zentriert (nicht über Content) */

.tm-splide--mounted {
  position: relative;                 /* Anker für absolut positionierte Arrows */
}

.tm-splide--mounted {
  padding-bottom: 3rem;             /* erhöht “Bühne” für Pfeile; Wert nach Bedarf */
}
/* Die Leiste selbst an den unteren Rand, über volle Breite */
.tm-splide--mounted .splide__arrows {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;                    /* Abstand nach unten -> nach Wunsch anpassen */
  display: flex;
  justify-content: space-between;     /* Buttons an die Seiten */
  align-items: center;
  width: 100%;
  pointer-events: none;               /* lässt Klicks durch – Buttons bekommen die Events */
  z-index: 3;                         /* über Content/Pagination halten */
}

/* Buttons wieder klickbar machen & optisch stylen */
.tm-splide--mounted .splide__arrow {
  pointer-events: auto;
  background: #fff;
  border: 2px solid var(--base);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  opacity: .9;
  transition: background .2s, opacity .2s, transform .2s;
}


.tm-splide--mounted .splide__arrow--prev { left: 20px; }   /* links positionieren */
.tm-splide--mounted .splide__arrow--next { right: 20px; }  /* rechts positionieren */

.splide__arrow svg {
  fill: var(--accent-2); /* Farbe des Pfeilsymbols */
  width: 1rem; height: 1rem;
}


.tm-splide--mounted .splide__arrow:hover {
  background: var(--base);
  opacity: 0.8;
}


/* Pagination-Punkte etwas größer */
.tm-splide--mounted .splide__pagination {
  margin-top: .5rem;
}
.tm-splide--mounted .splide__pagination__page {
  width: .6rem;
  height: .6rem;
}

/* Slides generisch */
.tm-splide--mounted .splide__slide > * {
  /* Dein ursprüngliches Grid-Item sitzt jetzt im Slide-<li> */
  height: 100%;
}

/* HERO-Variante */
.tm-splide--hero.tm-splide--mounted .splide__slide > * {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(340px, 50vh, 640px);
}

/* Optional: Abstand zwischen Cards (wenn Gap von Splide nicht reicht) */
/*
.tm-splide--mounted .splide__slide {
  padding: 0 .5rem;
}
*/

/* Schutz: Container ohne Mount (reiner Grid-Mode) – keine Splide-Optiken erzwingen */
.tm-splide--hero:not(.tm-splide--mounted),
.tm-splide--mobile:not(.tm-splide--mounted),
.tm-splide--default:not(.tm-splide--mounted) {
  /* hier NICHTs setzen, damit dein Grid "nackt" bleibt */
}

.tm-splide--mounted {
  /* Grid nicht mehr layouten, Splide übernimmt */
  display: block !important;         /* alternativ: display: contents; (siehe Hinweis unten) */
  grid-auto-flow: initial;
  gap: 0 !important;
  column-gap: 0;
  margin: 0 !important;

}

.tm-splide--mounted .gb-grid > * {
  margin: 0 !important;              /* evtl. Spalten‑Abstände neutralisieren */
}

.tm-splide--mounted .gb-grid > .gb-grid-column {
  /* Gutenberg-Grid-Breiten/Flex-Basis neutralisieren */
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Die Splide-Slides dürfen die Breite bestimmen – Inhalt soll vollflächig sein */
.tm-splide--mounted .splide__slide > * {
  width: 100%;
}

/* Optional: Pfeile/Pagination räumlich vom Content trennen */

.tm-splide--mounted .splide__pagination {
  margin-block-start: 5rem;
}


.tm-splide--mounted .splide__pagination__page {
  background: var(--hintergrund-accent-2);
  opacity: .5;
}
.tm-splide--mounted .splide__pagination__page.is-active {
  background: var(--accent);
  opacity: 0.8;
  transform: scale(1.2);
}