/* ==========================================================
   BT Swatches – Themenwelt CSS
   Zweck:
   - Sonderlayout ausschließlich für konkrete Themenwelt-Kontexte
   - Wird zusätzlich zu bt-swatches.css nur bei echtem Themenwelt-bt_cat geladen

   Ownership:
   - Basis-Swatches und Scrollindikator: bt-swatches.css
   - Themenwelt-Gruppen, Themebar und kompakte Pools: diese Datei
   ========================================================== */

/* ==========================================================
   Themenwelt-Swatches: Hauptgruppen + Pool-Layout
   Zweck:
   - Fachliche Hauptgruppen klar voneinander trennen
   - Normale Pools ab 4 Produkten wie bisher großzügig darstellen
   - Kleine Pools mit 1–3 Produkten auf Desktop kompakt anordnen
   - Mobil alle Pools wieder sauber untereinander darstellen

   Warum:
   - PHP entscheidet Gruppierung, Reihenfolge und Poolgröße
   - CSS übernimmt ausschließlich das Layout
   - Normale Swatch-Kontexte bleiben unverändert
   PATCH 2026-07-03
   ========================================================== */

/* ==========================================================
   Themenwelt: Sticky Kopfzeile
   Zweck:
   - Aktuellen Themenwelt-Kontext beim Scrollen sichtbar halten
   - Platz für das spätere Themenwelt-Menü bereitstellen
   - Sticky endet automatisch mit dem Swatch-Bereich

   Einstellpunkt:
   - --bt-themebar-sticky-top bestimmt den Abstand nach oben
   ========================================================== */

.bt-more-options--theme {
  --bt-themebar-sticky-top: 100px;
}

/* Nur dieser Kopf wird sticky.
   Er bleibt an den #swatches-Container gebunden und endet deshalb
   automatisch am Ende des gesamten Swatch-Bereichs. */
.bt-more-options--theme .bt-more-options__themebar {
  position: sticky;
  top: var(--bt-themebar-sticky-top);
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  box-sizing: border-box;
  width: calc(100% - 27px);
  min-height: 44px;
  margin: 0 22px 10px 5px;
  padding: 8px 10px;

  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 9px;
  background: #e42c8c;
  color: #fff
}

/* Die bisherige Überschriften-Margin darf den Sticky-Wrapper
   nicht unnötig vergrößern. */
.bt-more-options--theme
  .bt-more-options__themebar
  .bt-more-options__title--theme {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  min-width: 0;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
}

.bt-more-options--theme .bt-more-options__theme-name {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

.bt-more-options--theme .bt-more-options__active-group {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bt-more-options--theme .bt-more-options__themebar {
  flex-wrap: nowrap;
}

.bt-more-options--theme .bt-more-options__themebar-actions {
  min-width: 0;
}

.bt-more-options--theme .bt-more-options__active-group {
  white-space: nowrap;
}

/* Rechter Einhängepunkt für das spätere Themenwelt-Menü.
   Solange kein Feature eingehängt ist, benötigt er keinen Platz. */
.bt-more-options--theme .bt-more-options__themebar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.bt-more-options--theme .bt-more-options__themebar-actions:empty {
  display: none;
}

/* Aktuelle fachliche Hauptgruppe in der Sticky-Leiste */
.bt-more-options--theme .bt-more-options__active-group {
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.92;
}

.bt-more-options--theme .bt-more-options__active-group[hidden] {
  display: none;
}

/* Bis 980 px: stabile zweizeilige Themenwelt-Leiste */
@media (max-width: 980px) {
  .bt-more-options--theme .bt-more-options__themebar {
    align-items: flex-start;
  }

  .bt-more-options--theme
    .bt-more-options__themebar
    .bt-more-options__title--theme {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
  }

  .bt-more-options--theme .bt-more-options__theme-name {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bt-more-options--theme .bt-more-options__active-group {
    display: block;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
    min-height: 1.2em;
    font-size: 0.78em;
    line-height: 1.2;
  }

  .bt-more-options--theme .bt-more-options__active-group[hidden] {
    display: block;
    visibility: hidden;
  }

  .bt-more-options--theme .bt-more-options__themebar-actions {
    align-self: flex-start;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .bt-more-options--theme {
    --bt-themebar-sticky-top: 100px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .bt-more-options--theme {
    --bt-themebar-sticky-top: 100px;
  }

  .bt-more-options--theme .bt-more-options__themebar {
    min-height: 40px;
    padding: 7px 8px;
  }
}

/* Die Themenwelt verwendet innerhalb der bestehenden Scrollfläche
   eine vertikale Struktur aus Hauptgruppen. */
.bt-more-options--theme .bt-more-options__row--theme {
  display: block;
}

/* Eine fachliche Hauptgruppe:
   Ballonkonstruktionen, Bubble Ballons, Folienballons, Latexballons */
.bt-more-options--theme .bt-more-options__group {
  width: 100%;
  margin: 0 0 26px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bt-more-options--theme .bt-more-options__group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Hauptgruppenüberschrift */
.bt-more-options--theme .bt-more-options__grouptitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.3;
}

/* Dezenter Rückweg aus der Themenwelt in die normale Kategorie */
.bt-more-options--theme .bt-more-options__poollink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 7px;
  background: transparent;
  color: inherit;
  opacity: 0.72;
}

.bt-more-options--theme .bt-more-options__poollink:hover,
.bt-more-options--theme .bt-more-options__poollink:focus-visible {
  border-color: rgba(0, 0, 0, 0.28);
  opacity: 1;
}

/* Jeder Pool bildet eine dezente, zusammengehörige Einheit. */
.bt-more-options--theme .bt-more-options__pool {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.045);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.01);
}

/* Mehrere normale Pools innerhalb derselben Hauptgruppe */
.bt-more-options--theme .bt-more-options__pool--normal {
  margin: 0 0 18px;
}

.bt-more-options--theme .bt-more-options__pool--normal:last-child {
  margin-bottom: 0;
}

/* Kurze Unterüberschrift eines Pools */
.bt-more-options--theme .bt-more-options__pooltitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  font-weight: 600;
}

/* Eigener Flex-Wrapper für die Swatches eines Pools */
.bt-more-options--theme .bt-more-options__poolitems {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}


/* Themenwelt: ein gemeinsames Raster in fachlicher Reihenfolge */
.bt-more-options--theme .bt-more-options__ordered-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.bt-more-options--theme .bt-more-options__ordered-grid > .bt-more-options__pool {
  min-width: 0;
  margin: 0;
}

/* Große Pools erhalten auf breiten Bildschirmen beide Rasterspalten. */
@media (min-width: 1046px) {
  .bt-more-options--theme
    .bt-more-options__ordered-grid
    > .bt-more-options__pool--wide {
    grid-column: 1 / -1;
  }
}

/* Themenwelt: Pool-Karten ab 1045 px einspaltig */
@media (max-width: 1045px) {
  .bt-more-options--theme .bt-more-options__ordered-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

/* ==========================================================
   Kleine Pools: 1–3 Produkte
   Desktop:
   - Überschrift und Swatches möglichst in einer kompakten Zeile
   - keine fachliche Zusammenlegung verschiedener Pools
   ========================================================== */

/* ==========================================================
   Themenwelt: Kompakte Pool-Grids
   Zweck:
   - Kleine Pools nach exakter Produktanzahl gruppieren
   - Mehrere eigenständige Pools nebeneinander darstellen
   - Unnötige Vollbreiten-Zeilen vermeiden

   PHP entscheidet:
   - count-1
   - count-2
   - count-3

   CSS entscheidet ausschließlich über das Raster.
   ========================================================== */

.bt-more-options--theme .bt-more-options__compact-grid {
  display: grid;
  width: 100%;
  gap: 14px;
  margin: 14px 0 0;
}

/* Pools mit genau einem Produkt:
   Auf Desktop passen bis zu drei eigenständige Kacheln nebeneinander. */
.bt-more-options--theme .bt-more-options__compact-grid--count-1 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Pools mit zwei oder drei Produkten:
   Zwei breitere Kacheln nebeneinander. */
.bt-more-options--theme .bt-more-options__compact-grid--count-2,
.bt-more-options--theme .bt-more-options__compact-grid--count-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Eine kompakte Pool-Kachel */
.bt-more-options--theme .bt-more-options__pool--compact {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  margin: 0;
}

/* Titel und Rücklink bleiben innerhalb ihrer eigenen Kachel. */
.bt-more-options--theme
  .bt-more-options__pool--compact
  .bt-more-options__pooltitle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  gap: 8px 10px;
  margin: 0 0 8px;
}

.bt-more-options--theme
  .bt-more-options__pool--compact
  .bt-more-options__pooltitle-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bt-more-options--theme
  .bt-more-options__pool--compact
  .bt-more-options__poollink {
  box-sizing: border-box;
  max-width: 100%;
}

/* Swatches liegen kompakt direkt unter dem Titel. */
.bt-more-options--theme
  .bt-more-options__pool--compact
  .bt-more-options__poolitems {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* ==========================================================
   Mobile Themenwelt
   - kompakte Pools wieder vertikal
   - reduzierte Abstände
   - keine gedrängte Titel-/Swatch-Zeile
   ========================================================== */

@media (max-width: 768px) {
  .bt-more-options--theme .bt-more-options__row--theme {
    padding-left: 2px;
    padding-right: 2px;
  }

  .bt-more-options--theme .bt-more-options__group {
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .bt-more-options--theme .bt-more-options__grouptitle {
    margin-bottom: 10px;
  }

  .bt-more-options--theme .bt-more-options__pool--normal {
    margin-bottom: 14px;
  }

  /* Auf Mobilgeräten bleiben kleine Pools zweispaltig,
     solange genügend Platz vorhanden ist. */
  .bt-more-options--theme .bt-more-options__compact-grid--count-1,
  .bt-more-options--theme .bt-more-options__compact-grid--count-2,
  .bt-more-options--theme .bt-more-options__compact-grid--count-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .bt-more-options--theme .bt-more-options__pool {
    padding: 10px;
  }

  .bt-more-options--theme
    .bt-more-options__pool--compact
    .bt-more-options__pooltitle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
  }

  .bt-more-options--theme
    .bt-more-options__pool--compact
    .bt-more-options__poolitems {
    display: flex;
    gap: 7px;
  }

  .bt-more-options--theme .bt-more-options__poolitems {
    gap: 8px;
  }
}

/* Kompakte Pool-Kacheln ab 840 px einspaltig. */
@media (max-width: 840px) {
  .bt-more-options--theme .bt-more-options__compact-grid--count-1,
  .bt-more-options--theme .bt-more-options__compact-grid--count-2,
  .bt-more-options--theme .bt-more-options__compact-grid--count-3 {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   THEMENWELT – BUCHSTABEN- UND ZAHLENWÖRTER
   Zweck:
   - Individuelle Wortzeilen aus bestehenden Swatches
   - Wörter bleiben beim Umbruch zusammen
   - Lange Wörter auf Mobilgeräten horizontal scrollbar
   - Bestehende Swatch-Pools bleiben unverändert
   ========================================================== */

.bt-more-options--theme .bt-more-options__poolitems--words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.bt-more-options--theme .bt-more-options__wordline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;

  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
}

.bt-more-options--theme .bt-more-options__wordgroup {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.bt-more-options--theme .bt-more-options__wordgroup > .bt-more-options__item {
  flex: 0 0 auto;
}



/* ==========================================================
   THEMENWELT – POOL-KOPF UND ZUSATZNAVIGATION
   Titel / Alle ansehen oben
   Produktbilder in der Mitte
   300 Farben / Auswahl unter den Bildern
   ========================================================== */

/* Pool als vertikale Einheit */
.bt-more-options--theme .bt-more-options__ordered-grid > .bt-more-options__pool {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Die vorhandenen PHP-Wrapper ohne eigenes Layout nutzen */
.bt-more-options--theme .bt-more-options__ordered-grid .bt-more-options__pooltitle {
  display: contents;
}

/* Titel links, Archivlink rechts */
.bt-more-options--theme .bt-more-options__poolhead-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
  order: 0;
  min-width: 0;
  margin-bottom: 10px;
}

.bt-more-options--theme .bt-more-options__pooltitle-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Alle ansehen: dezenter Textlink */
.bt-more-options--theme .bt-more-options__poolhead-main .bt-more-options__poollink {
  display: inline;
  flex: 0 0 auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.75em;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

/* Responsive Archivlinks: zunächst vollständige Beschriftung */
.bt-more-options--theme .bt-more-options__poolhead-main
.bt-more-options__link-short {
  display: none;
}

/* Die tatsächliche Breite des Swatch-Bereichs entscheidet. */
.bt-more-options--theme .bt-more-options__group {
  container-type: inline-size;
}

@media (min-width: 1046px) and (max-width: 1230px),
       (max-width: 379px) {
  .bt-more-options--theme .bt-more-options__poolhead-main
  .bt-more-options__link-full {
    display: none;
  }

  .bt-more-options--theme .bt-more-options__poolhead-main
  .bt-more-options__link-short {
    display: inline;
  }
}

/* Dezenter Navigationspfeil bei Alle ansehen */
.bt-more-options--theme .bt-more-options__poolhead-main .bt-more-options__poollink::after {
  content: "↗";
  display: inline-block;
  margin-left: 4px;
  font-size: 0.8em;
  line-height: 1;
}

/* Produktbilder zwischen Überschrift und Aktionen */
.bt-more-options--theme .bt-more-options__ordered-grid .bt-more-options__poolitems {
  order: 1;
}

/* Zusatzaktionen: kompakt nebeneinander, immer am Kartenboden */
.bt-more-options--theme .bt-more-options__poolhead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  order: 2;
  width: 100%;
  min-width: 0;
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 0.9em;
}

/* Einheitliche, platzsparende Aktionsbuttons */
.bt-more-options--theme .bt-more-options__choice-link,
.bt-more-options--theme .bt-more-options__choice-trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.035);
  color: inherit;
  font-size: 0.7em;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease;
}

/* Dezenter Hover nur auf Geräten mit echter Hover-Funktion */
@media (hover: hover) and (pointer: fine) {
  .bt-more-options--theme .bt-more-options__choice-link:hover,
  .bt-more-options--theme .bt-more-options__choice-trigger:hover {
    background: rgba(0, 0, 0, 0.01);
  }
}

/* Dezenter Navigationspfeil: 300 Farben führt zur Produktseite */
.bt-more-options--theme .bt-more-options__choice-link::after {
  content: "↗";
  display: inline-block;
  margin-left: 4px;
  font-size: 0.8em;
  line-height: 1;
}

/* Pfeil als CSS-Grafik statt typografischem Sonderzeichen */
.bt-more-options--theme .bt-more-options__choice-trigger {
  gap: 7px;
  cursor: pointer;
  font-family: inherit;
}

.bt-more-options--theme .bt-more-options__choice-trigger::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  flex: 0 0 auto;
}

/* Schwebendes Menü – auch außerhalb des Swatch-Containers */
.bt-more-options__choice-popover {
  display: none;
  position: fixed;
  inset: auto;
  box-sizing: border-box;
  width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 540px);
  height: max-content;
  margin: 0;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 10px;
  background: #fff;
  color: #222;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
  z-index: 10000;
}

/* Aktuelle Browser mit nativer Popover-Unterstützung */
.bt-more-options__choice-popover:popover-open {
  display: block;
}

/* Fallback für ältere Browser, insbesondere iOS 15 */
.bt-more-options__choice-popover.is-open {
  display: block;
}

.bt-more-options__choice-popover .bt-more-options__choice-content {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0;
}

/* Interne Themenwelt-Navigation: Panelüberschrift */ 
.bt-more-options__choice-popover .bt-more-options__choice-title {
  display: block;
  margin: 0 0 12px;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.3;
}

.bt-more-options__choice-popover .bt-more-options__choice-heading {
  display: block;
  margin: 8px 0 5px;
  font-size: 0.9em;
}

.bt-more-options__choice-popover .bt-more-options__choice-links {

  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bt-more-options__choice-popover .bt-more-options__choice-links a {
  display: inline-block;
  padding: 4px 7px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.88em;
}