/* sellx_portlets - Utilities die Bootstrap 4.6 nicht mitbringt */
/* Namensraum sx-, damit keine Kollision mit NOVA/Bootstrap entsteht */

/* ---------- Position ---------- */
.sx-top-0     { top: 0; }
.sx-top-50    { top: 50%; }
.sx-top-100   { top: 100%; }
.sx-bottom-0  { bottom: 0; }
.sx-bottom-50 { bottom: 50%; }
.sx-left-0    { left: 0; }
.sx-left-50   { left: 50%; }
.sx-right-0   { right: 0; }
.sx-right-50  { right: 50%; }
.sx-translate-middle   { transform: translate(-50%, -50%); }
.sx-translate-middle-x { transform: translateX(-50%); }
.sx-translate-middle-y { transform: translateY(-50%); }

/* ---------- z-index ---------- */
.sx-z-0 { z-index: 0; }
.sx-z-1 { z-index: 1; }
.sx-z-2 { z-index: 2; }
.sx-z-3 { z-index: 3; }
.sx-z-4 { z-index: 4; }
.sx-z-5 { z-index: 5; }

/* ---------- Opacity ---------- */
.sx-opacity-0   { opacity: 0; }
.sx-opacity-10  { opacity: .1; }
.sx-opacity-25  { opacity: .25; }
.sx-opacity-40  { opacity: .4; }
.sx-opacity-50  { opacity: .5; }
.sx-opacity-60  { opacity: .6; }
.sx-opacity-75  { opacity: .75; }
.sx-opacity-90  { opacity: .9; }
.sx-opacity-100 { opacity: 1; }

/* ---------- Getoente Hintergruende, Farbwerte aus dem aktiven NOVAChild-Theme ---------- */
.sx-bg-black { background-color: #000 !important; }
.bg-primary.sx-bg-opacity-10   { background-color: rgba(47, 125, 79, .1) !important; }
.bg-primary.sx-bg-opacity-25   { background-color: rgba(47, 125, 79, .25) !important; }
.bg-secondary.sx-bg-opacity-10 { background-color: rgba(230, 126, 34, .1) !important; }
.bg-secondary.sx-bg-opacity-25 { background-color: rgba(230, 126, 34, .25) !important; }
.bg-success.sx-bg-opacity-10   { background-color: rgba(28, 135, 30, .1) !important; }
.bg-info.sx-bg-opacity-10      { background-color: rgba(82, 82, 82, .1) !important; }
.bg-warning.sx-bg-opacity-10   { background-color: rgba(165, 104, 35, .1) !important; }
.bg-danger.sx-bg-opacity-10    { background-color: rgba(185, 0, 0, .1) !important; }
.sx-bg-black.sx-bg-opacity-10  { background-color: rgba(0, 0, 0, .1) !important; }
.sx-bg-black.sx-bg-opacity-25  { background-color: rgba(0, 0, 0, .25) !important; }
.sx-bg-black.sx-bg-opacity-50  { background-color: rgba(0, 0, 0, .5) !important; }

/* ---------- Border-Radius nach BS5-Skala ---------- */
.sx-rounded-4 { border-radius: 1rem !important; }
.sx-rounded-5 { border-radius: 2rem !important; }

/* ---------- Schriftgroessen, Cartzilla-Skala ---------- */
.sx-fs-xs   { font-size: .75rem !important; }
.sx-fs-sm   { font-size: .875rem !important; }
.sx-fs-base { font-size: 1rem !important; }
.sx-fs-md   { font-size: 1.125rem !important; }
.sx-fs-lg   { font-size: 1.25rem !important; }
.sx-fs-xl   { font-size: 1.5rem !important; }
.sx-fs-1 { font-size: 2.5rem !important; }
.sx-fs-2 { font-size: 2rem !important; }
.sx-fs-3 { font-size: 1.75rem !important; }
.sx-fs-4 { font-size: 1.5rem !important; }
.sx-fs-5 { font-size: 1.25rem !important; }
.sx-fs-6 { font-size: 1rem !important; }

/* ---------- Schriftschnitte die BS4 nicht kennt ---------- */
.sx-fw-medium   { font-weight: 500 !important; }
.sx-fw-semibold { font-weight: 600 !important; }

/* ---------- Display-Ueberschriften 5 und 6 ---------- */
.sx-display-5 { font-size: 3rem;   font-weight: 300; line-height: 1.2; }
.sx-display-6 { font-size: 2.5rem; font-weight: 300; line-height: 1.2; }

/* ---------- Row-Gutters, BS5-Verhalten auf dem BS4-Grid ---------- */
.sx-g-2, .sx-gx-2 { margin-right: -.25rem; margin-left: -.25rem; }
.sx-g-2 > *, .sx-gx-2 > * { padding-right: .25rem; padding-left: .25rem; }
.sx-g-2, .sx-gy-2 { margin-top: -.5rem; }
.sx-g-2 > *, .sx-gy-2 > * { margin-top: .5rem; }

.sx-g-3, .sx-gx-3 { margin-right: -.5rem; margin-left: -.5rem; }
.sx-g-3 > *, .sx-gx-3 > * { padding-right: .5rem; padding-left: .5rem; }
.sx-g-3, .sx-gy-3 { margin-top: -1rem; }
.sx-g-3 > *, .sx-gy-3 > * { margin-top: 1rem; }

.sx-g-4, .sx-gx-4 { margin-right: -.75rem; margin-left: -.75rem; }
.sx-g-4 > *, .sx-gx-4 > * { padding-right: .75rem; padding-left: .75rem; }
.sx-g-4, .sx-gy-4 { margin-top: -1.5rem; }
.sx-g-4 > *, .sx-gy-4 > * { margin-top: 1.5rem; }

.sx-g-5, .sx-gx-5 { margin-right: -1.5rem; margin-left: -1.5rem; }
.sx-g-5 > *, .sx-gx-5 > * { padding-right: 1.5rem; padding-left: 1.5rem; }
.sx-g-5, .sx-gy-5 { margin-top: -3rem; }
.sx-g-5 > *, .sx-gy-5 > * { margin-top: 3rem; }

@media (min-width: 576px) {
  .sx-g-sm-4 { margin-right: -.75rem; margin-left: -.75rem; margin-top: -1.5rem; }
  .sx-g-sm-4 > * { padding-right: .75rem; padding-left: .75rem; margin-top: 1.5rem; }
}
@media (min-width: 768px) {
  .sx-g-md-4 { margin-right: -.75rem; margin-left: -.75rem; margin-top: -1.5rem; }
  .sx-g-md-4 > * { padding-right: .75rem; padding-left: .75rem; margin-top: 1.5rem; }
  .sx-gy-md-5 { margin-top: -3rem; }
  .sx-gy-md-5 > * { margin-top: 3rem; }
}
@media (min-width: 992px) {
  .sx-g-lg-3 { margin-right: -.5rem; margin-left: -.5rem; margin-top: -1rem; }
  .sx-g-lg-3 > * { padding-right: .5rem; padding-left: .5rem; margin-top: 1rem; }
  .sx-g-lg-5 { margin-right: -1.5rem; margin-left: -1.5rem; margin-top: -3rem; }
  .sx-g-lg-5 > * { padding-right: 1.5rem; padding-left: 1.5rem; margin-top: 3rem; }
}
@media (min-width: 1200px) {
  .sx-g-xl-4 { margin-right: -.75rem; margin-left: -.75rem; margin-top: -1.5rem; }
  .sx-g-xl-4 > * { padding-right: .75rem; padding-left: .75rem; margin-top: 1.5rem; }
}

/* ---------- Flex-Gap ---------- */
.sx-gap-0 { gap: 0; }
.sx-gap-1 { gap: .25rem; }
.sx-gap-2 { gap: .5rem; }
.sx-gap-3 { gap: 1rem; }
.sx-gap-4 { gap: 1.5rem; }
.sx-gap-5 { gap: 3rem; }
@media (min-width: 992px) { .sx-gap-lg-4 { gap: 1.5rem; } }

/* ---------- Seitenverhaeltnis, unterstuetzt weiterhin --cz-aspect-ratio ---------- */
.sx-ratio { position: relative; width: 100%; }
.sx-ratio::before { display: block; padding-top: var(--cz-aspect-ratio, var(--sx-aspect-ratio, 100%)); content: ""; }
.sx-ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-ratio-1x1  { --sx-aspect-ratio: 100%; }
.sx-ratio-4x3  { --sx-aspect-ratio: 75%; }
.sx-ratio-16x9 { --sx-aspect-ratio: 56.25%; }

/* ---------- Einzel-Utilities ---------- */
.sx-pe-none { pointer-events: none; }
.sx-pe-auto { pointer-events: auto; }
.sx-object-fit-cover   { object-fit: cover; }
.sx-object-fit-contain { object-fit: contain; }
.sx-overflow-x-auto { overflow-x: auto; }
.sx-overflow-y-auto { overflow-y: auto; }
.sx-min-w-0 { min-width: 0; }

/* ---------- Vertikaler Trenner ---------- */
.sx-vr {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 1em;
  background-color: currentColor;
  opacity: .25;
}

/* ---------- 7-spaltiges Raster fuer den Countdown ---------- */
.sx-row-cols-7 > * { flex: 0 0 14.2857%; max-width: 14.2857%; }

/* ---------- Heller Close-Button auf dunklem Grund ---------- */
.close.sx-close-white { color: #fff; text-shadow: none; opacity: .85; }
.close.sx-close-white:hover,
.close.sx-close-white:focus { color: #fff; opacity: 1; }

/* ---------- xxl-Stufe, in Bootstrap 4 nicht vorhanden ---------- */
@media (min-width: 1400px) {
  .sx-col-xxl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .sx-offset-xxl-2 { margin-left: 16.666667%; }
  .sx-d-xxl-block { display: block !important; }
  .sx-d-xxl-none  { display: none !important; }
  .sx-pt-xxl-1 { padding-top: .25rem !important; }
  .sx-pt-xxl-2 { padding-top: .5rem !important; }
  .sx-pb-xxl-3 { padding-bottom: 1rem !important; }
  .sx-px-xxl-1 { padding-right: .25rem !important; padding-left: .25rem !important; }
  .sx-py-xxl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .sx-my-xxl-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
  .sx-my-xxl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
}

/* ---------- Popover-Variante fuer ZoneBannerBlock ---------- */
.popover.popover-sm { max-width: 280px; font-size: .875rem; }
.popover.popover-sm .popover-body { padding: .5rem .75rem; }