/* Gemeinsames Gerüst aller Karten-Slider: Kopf mit Überschrift und Pfeilen, Kartenbreite, Abstände */
.tva-slider-kopf {
  margin-bottom: 1.25rem;
}

.tva-slider-kopf h2,
.tva-slider-kopf h3 {
  margin: 0;
}

/* Pfeile liegen über den Karten: links und rechts am Fensterrand je ein Streifen mit Farbverlauf,
   darin der runde Knopf. footer.php hängt die Pfeile in den Slider und misst die Ränder (--rand-…). */
.tva-slider .swiper-container > .swiper-btns {
  display: contents;
}

.tva-slider .swiper-btns > div {
  position: absolute;
  /* etwas höher als die Karten: beim Überfahren heben sie sich an und werfen einen Schatten */
  top: -1.5rem;
  bottom: -1.5rem;
  z-index: 5;
  display: flex;
  align-items: center;
  width: calc(var(--rand-links, 2rem) + 2.5rem);
  min-width: 4.5rem;
  margin: 0;
  pointer-events: none;
  transition: opacity .2s;
}

/* linker Pfeil (zurück) */
.tva-slider .swiper-btns > .tva-btn-next {
  left: calc(-1 * var(--rand-links, 2rem));
  justify-content: flex-start;
  padding-left: .75rem;
  background: linear-gradient(to right, var(--slider-grund-links, #fff) 15%, transparent);
}

/* rechter Pfeil (weiter) */
.tva-slider .swiper-btns > .tva-btn-prev {
  right: calc(-1 * var(--rand-rechts, 2rem));
  width: calc(var(--rand-rechts, 2rem) + 2.5rem);
  justify-content: flex-end;
  padding-right: .75rem;
  background: linear-gradient(to left, var(--slider-grund-rechts, #fff) 15%, transparent);
}

.tva-slider .swiper-btns svg {
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  padding: .7rem;
  border: 2px solid #CFD8DC;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  cursor: pointer;
  pointer-events: auto;
  opacity: 1;
  transition: transform .2s ease-out, border-color .2s;
}

.tva-slider .swiper-btns svg:hover {
  border-color: #d62032;
  transform: scale(1.08);
}

.tva-slider .swiper-btns .swiper-fly-btn-arrow {
  fill: #d62032;
}

/* nichts mehr zum Blättern in diese Richtung: Streifen samt Knopf ausblenden */
.tva-slider .swiper-btns .swiper-button-disabled,
.tva-slider .swiper-btns .swiper-button-lock {
  opacity: 0;
  visibility: hidden;
}

.tva-slider .swiper-container {
  overflow: visible;
}

/* Breite der Karten; der Slider richtet sich danach (slidesPerView: 'auto') */
.tva-slider .swiper-slide {
  width: clamp(15rem, 27vw, 20rem);
  max-width: none;
}

/* Bilder in Beitrags- und Mannschaftskarten im selben Format */
.tva-slider .news-item img,
.tva-slider .team-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* auf farbigem Grund (Teams): weiße Überschrift, Verlauf in den Farben des Hintergrunds */
.team-wrapper .tva-slider-kopf h3 {
  color: #fff;
  /* die Überschrift liegt teils über der hellen Hintergrundgrafik */
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.team-wrapper .tva-slider {
  --slider-grund-links: #d62032;
  --slider-grund-rechts: #d96826;
}

.team-wrapper .tva-slider .swiper-btns svg {
  border-color: #fff;
}

/* Kartenbild in stark abweichendem Format: unbeschnitten, Ränder mit dem weichgezeichneten Bild gefüllt */
.tva-kartenbild-frei {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ECEFF1;
}

.tva-kartenbild-frei::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: var(--tva-bild) center / cover no-repeat;
  filter: blur(18px) brightness(.9);
}

.tva-slider .news-item .tva-kartenbild-frei img {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Teams: Überschrift und Karten liegen über der Hintergrundgrafik (die ist absolut positioniert) */
.team-wrapper .team-inner {
  position: relative;
}

/* Die Streifen hinter den Pfeilen bleiben hier durchsichtig: Der Grund ist ein Bild mit Verlauf,
   ein einfarbiger Streifen stünde als roter Block davor. */
.team-wrapper .tva-slider .swiper-btns > div {
  background: none;
}

/* Am Handy wird gewischt: Die Pfeile samt Verlauf würden hier die Karten überdecken */
@media (max-width: 600px) {
  .tva-slider .swiper-btns > div {
    display: none;
  }
}