/* ══════════════════════════════════════════════════════════════
   CLEAN SLIDER — css/2026_v2/splide_clean_slider.css
   Produktslider im ruhigen Modeshop-Stil.
   Gilt NUR für templates/engine/splide/carousel.php mit 'slider_style' => 'clean'
   (.gallery-section--clean) und den Skin tiles/clean.php (.clean-card).
   splide_gallery_slider.css bleibt unverändert, alles hier ist darunter eingegrenzt.
   Lädt carousel.php selbst (einmal pro Seite).
══════════════════════════════════════════════════════════════ */

.gallery-section--clean {
  --cl-fg:      #111214;
  --cl-muted:   rgba(17, 18, 20, 0.55);
  --cl-rule:    rgba(17, 18, 20, 0.12);
  --cl-tile:    rgba(17, 18, 20, 0.045);
  --cl-gutter:  clamp(20px, 5vw, 64px);
  --cl-ease:    cubic-bezier(0.16, 1, 0.3, 1);

  /* Abstand oben + unten. Global über --section-space (alexzerr site.css hat sie schon),
     sonst dieser Wert. Pro Slider änderbar: 'style' => '--cl-space: 80px' in der conf */
  --cl-space:   var(--section-space, clamp(64px, 9vw, 140px));

  color: var(--cl-fg);
}

/* Slider allein und Tabs-Block: Luft oben und unten */
section.gallery-section--clean {
  /* einzeln abschaltbar: 'space_top' / 'space_bottom' in der conf → --cl-space-top / -bottom */
  padding-top: var(--cl-space-top, var(--cl-space));
  padding-bottom: var(--cl-space-bottom, var(--cl-space));
}

/* Dunkle Seite: 'slider_theme' => 'dark' */
.gallery-section--clean.gallery-section--dark {
  --cl-fg:      #f2f2ef;
  --cl-muted:   rgba(242, 242, 239, 0.55);
  --cl-rule:    rgba(242, 242, 239, 0.16);
  --cl-tile:    rgba(242, 242, 239, 0.05);
}

.gallery-section--clean::before {
  content: none;
}


/* ── HEADER: Titel links, "Alle ansehen" rechts ───────────────── */
.gallery-section--clean .gallery-header--clean {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 28px;
  padding: 0 var(--cl-gutter);
}

.gallery-section--clean .gallery-header-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gallery-section--clean .gallery-label {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cl-muted);
}

.gallery-section--clean .gallery-title {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--cl-fg);
}

.gallery-section--clean .gallery-sub {
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cl-muted);
}

.gallery-section--clean .gallery-header-link {
  flex-shrink: 0;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cl-fg);
  transition: opacity 0.25s ease;
}

.gallery-section--clean .gallery-header-link:hover {
  opacity: 0.6;
}


/* ── KACHEL (tiles/clean.php) ─────────────────────────────────── */
.clean-card {
  position: relative;
  height: 100%;
}

.clean-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.clean-card__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cl-tile);
}

.clean-card__img img,
.clean-card__img picture {
  display: block;
  width: 100%;
  height: 100%;
}

.clean-card__img img {
  padding: 0;
  object-fit: cover;          /* Bild füllt die Kachel, kein Rand (Werk und Raumbild) */
  object-position: center;
  transition: opacity 0.6s var(--cl-ease), transform 1.2s var(--cl-ease);
}

/* 'image_fit' => 'contain': das WERK ganz sichtbar, Kachelgrund drumherum.
   Raumbilder bleiben cover. Werk = Hauptbild bei view 'released',
   Hover-Bild bei view 'room'. */
.clean-card--fit-contain.clean-card--work .clean-card__img > img,
.clean-card--fit-contain.clean-card--work .clean-card__img > picture:first-child img,
.clean-card--fit-contain.clean-card--room .clean-card__img .clean-card__img-el--hover {
  object-fit: contain;
}

.clean-card--fit-contain.clean-card--work .clean-card__img .clean-card__img-el--hover {
  object-fit: cover;
}

/* Zweites Bild (Hover): liegt deckungsgleich darüber, erst unsichtbar */
.clean-card__img .clean-card__img-el--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

@media (hover: hover) {
  .clean-card--has-hover:hover .clean-card__img-el--hover {
    opacity: 1;
  }

  /* Erstes Bild gleichzeitig ausblenden — sonst scheint es bei 'contain'
     (z.B. Raumbild zuerst, Werk beim Hover) an den Rändern durch */
  .clean-card--has-hover:hover .clean-card__img img:not(.clean-card__img-el--hover) {
    opacity: 0;
  }

  .clean-card:not(.clean-card--has-hover):hover .clean-card__img img {
    transform: scale(1.03);
  }
}

/* Große Kacheln ('tile_size' => 'large'): wie der bisherige Art-Carousel —
   Loop, zentriert, Slide-Breite aus splide_gallery_slider.css (.splide__slide),
   Bild 4:3, Handy hochkant 3:4, Handy quer 16:9, Seiten-Kacheln leicht kleiner. */
.gallery-section--large .clean-card__img {
  aspect-ratio: 4 / 3;
}

.gallery-section--large .splide__slide .clean-card {
  transition: transform 0.5s var(--cl-ease);
}

.gallery-section--large .splide__slide:not(.is-active) .clean-card {
  transform: scale(0.96);
}

.gallery-section--large .clean-card .clean-card__title {
  font-size: 15px;
}

.gallery-section--large .clean-card__size,
.gallery-section--large .clean-card__price {
  font-size: 14px;
}

@media (max-width: 768px) {
  .gallery-section--large .clean-card__img {
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .gallery-section--large .clean-card__img {
    aspect-ratio: 16 / 9;
  }
}

/* Letzte Kachel "Mehr ansehen" ('more_tile'): gleiche Größe wie das Bild einer Kachel */
.clean-more {
  display: block;
  color: var(--cl-fg);
  text-decoration: none;
}

.clean-more__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  box-sizing: border-box;
  aspect-ratio: 4 / 5;
  padding: 24px;
  border: 1px solid var(--cl-rule);
  background: transparent;
  text-align: center;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.clean-more__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color 0.35s ease, color 0.35s ease, transform 0.5s var(--cl-ease);
}

.clean-more__text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.clean-more:hover .clean-more__box {
  border-color: var(--cl-fg);
  background: var(--cl-tile);
}

.clean-more:hover .clean-more__icon {
  background: var(--cl-fg);
  color: #ffffff;
  transform: translateX(4px);
}

.gallery-section--dark .clean-more:hover .clean-more__icon {
  color: #0c0d0e;
}

.clean-more:focus-visible {
  outline: 2px solid var(--cl-fg);
  outline-offset: 3px;
}

/* Text unter dem Bild */
.clean-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 2px 0;
}

.clean-card__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cl-muted);
}

.clean-card .clean-card__title {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cl-fg);
}

.clean-card__size,
.clean-card__price {
  font-size: 13px;
  line-height: 1.4;
  color: var(--cl-muted);
}

.clean-card__price {
  color: var(--cl-fg);
}

/* Zusatz, z.B. "Individualisierbar" bei Drucken */
.clean-card__badge {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cl-muted);
}

.clean-card__price s {
  color: var(--cl-muted);
}

/* Verkauft: kleines Schild oben links */
.clean-card__sold {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 10px;
  background: var(--cl-fg);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gallery-section--dark .clean-card__sold {
  color: #0c0d0e;
}

/* Herz oben rechts */
.clean-card__like {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}


/* ── STEUERUNG: Linie links, Pfeile rechts in einer Zeile ─────── */
.gallery-section--clean .gallery-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  padding: 0 var(--cl-gutter);
}

.gallery-section--clean .gallery-progress {
  position: relative;
  flex: 1;
  height: 1px;
  margin: 0;
  overflow: hidden;
  background: var(--cl-rule);
}

.gallery-section--clean .gallery-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--cl-fg);
  transition: width 0.6s var(--cl-ease);
}

.gallery-section--clean .gallery-nav-wrap {
  margin: 0;
  padding: 0;
}

.gallery-section--clean .gallery-nav {
  gap: 8px;
}

.gallery-section--clean .gallery-nav-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--cl-rule);
  border-radius: 50%;
  background: transparent;
  color: var(--cl-fg);
  backdrop-filter: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.gallery-section--clean .gallery-nav-btn::before {
  content: none;
}

.gallery-section--clean .gallery-nav-btn:hover {
  transform: none;
  border-color: var(--cl-fg);
  background: var(--cl-fg);
  color: #ffffff;
}

.gallery-section--dark .gallery-nav-btn:hover {
  color: #0c0d0e;
}

.gallery-section--clean .gallery-nav-btn:disabled {
  opacity: 0.3;
  background: transparent;
  color: var(--cl-fg);
  border-color: var(--cl-rule);
}

.gallery-section--clean .gallery-nav-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.4;
}

.gallery-section--clean .gallery-nav-btn:focus-visible,
.gallery-section--clean .gallery-header-link:focus-visible,
.clean-card__link:focus-visible {
  outline: 2px solid var(--cl-fg);
  outline-offset: 3px;
}

/* Dots (nur wenn 'show_dots' => true) */
.gallery-section--clean .gallery-dot {
  background: var(--cl-rule);
}

.gallery-section--clean .gallery-dot.active {
  background: var(--cl-fg);
}

/* Button unten (button_type 'bottom') */
.gallery-section--clean .button-wrapper {
  margin-top: 40px;
}


/* ── HANDY ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* splide_gallery_slider.css stellt den Kopf mobil auf Spalte — hier bleibt er eine Zeile */
  .gallery-section--clean .gallery-header--clean {
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
  }

  .gallery-section--clean .gallery-header-link {
    font-size: 12px;
  }

  /* Wischen statt Pfeile — die Linie zeigt, wo man ist */
  .gallery-section--clean .gallery-nav-wrap {
    display: none;
  }

  .gallery-section--clean .gallery-controls {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clean-card__img img,
  .gallery-section--clean .gallery-progress-bar {
    transition: none;
  }
}


/* ══════════════════════════════════════════════════════════════
   TABS — templates/engine/splide/carousel_tabs.php
   Überschrift + Textlinks ("Originale" | "Drucke"), darunter die Slider
   übereinander im selben Platz. Der inaktive ist unsichtbar, aber gleich breit
   (Splide misst ihn so richtig).
══════════════════════════════════════════════════════════════ */
.carousel-tabs-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 32px;
  padding: 0 var(--cl-gutter);
}

.carousel-tabs--center .carousel-tabs-head {
  align-items: center;
  text-align: center;
}

.carousel-tabs--left .carousel-tabs-head {
  align-items: flex-start;
  text-align: left;
}

.carousel-tabs--left .carousel-tabs-head .gallery-title {
  text-align: left;
}

.carousel-tabs .carousel-tabs-head .gallery-title {
  text-align: inherit;
}

.carousel-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 8px;
}

.carousel-tabs-tab {
  position: relative;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cl-muted);
  cursor: pointer;
  transition: color 0.25s ease;
}

/* Strich unter dem aktiven Tab, wächst von der Mitte */
.carousel-tabs-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.45s var(--cl-ease);
}

.carousel-tabs-tab:hover,
.carousel-tabs-tab.is-active {
  color: var(--cl-fg);
}

.carousel-tabs-tab.is-active::after {
  transform: scaleX(1);
}

.carousel-tabs-tab:focus-visible {
  outline: 2px solid var(--cl-fg);
  outline-offset: 4px;
}

/* Slider übereinander im selben Feld */
.carousel-tabs-panels {
  display: grid;
}

.carousel-tabs-panel {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.5s var(--cl-ease), transform 0.6s var(--cl-ease), visibility 0s linear 0.5s;
}

.carousel-tabs-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s var(--cl-ease) 0.1s, transform 0.7s var(--cl-ease) 0.1s, visibility 0s;
}

/* Die Slider in den Tabs: Abstand hat schon der Tabs-Block drumherum */
.carousel-tabs-panel > .gallery-section {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .carousel-tabs-head {
    margin-bottom: 24px;
  }

  .carousel-tabs-list {
    gap: 8px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-tabs-panel,
  .carousel-tabs-panel.is-active,
  .carousel-tabs-tab::after {
    transition: none;
  }
}