/* =================================================================
   Full Bleed Hack: Für größere Bildschirme aktiv,
   für Tablet & Mobile schrittweise abschalten,
   ohne äußere Container (außerhalb eures Bereichs) zu beeinflussen.
================================================================= */

/* Originale Full Bleed Einstellungen (Desktop) */
.my-fullwidth-block {
  position: relative !important;
  background-color: #f2f8f5 !important; /* Standardfarbe */
  
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  
  /* Nur oben/unten, seitlich Full-Bleed */
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  margin-left: calc(-50vw - 150px) !important;
  margin-right: -50vw !important;
}

/* Für große Bildschirme: 991px bis 1440px */
@media only screen and (min-width: 991px) and (max-width: 1440px) {
  .my-fullwidth-block {
    margin-left: calc(-50vw - 128px) !important;
    margin-right: -50vw !important;
  }
}

/* Für große Bildschirme: 981px bis 990px */
@media only screen and (min-width: 981px) and (max-width: 990px) {
  .my-fullwidth-block {
    margin-left: calc(-50vw - 8px) !important;
    margin-right: -50vw !important;
  }
}

/* Für mittelgroße Bildschirme: 601px bis 980px Full Bleed Hack aus */
@media only screen and (min-width: 601px) and (max-width: 980px) {
  .my-fullwidth-block {
    margin-left: calc(-50vw - 0px) !important;
    margin-right: -50vw !important;
  }
}

/* Mobile: (max-width: 600px) – Hintergrund erstreckt sich über die ganze Breite */
@media only screen and (max-width: 600px) {
  .my-fullwidth-block {
    margin-left: calc(-50vw - 0px) !important;
    margin-right: -50vw !important;
  }
  .my-fullwidth-block .cs-container-category {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

.my-fullwidth-block.centered { 
    position: relative !important;
    width: 100vw !important;          /* Volle Breite des Viewports */
    left: 50% !important;             /* Zentriert den Block horizontal */
    right: 50% !important;
    margin-left: -50vw !important;    /* Negative Margen, um den Block zum Rand auszudehnen */
    margin-right: -50vw !important;
}


/* =================================================================
   Modifier-Klassen für alternative Hintergrundfarben
================================================================= */

/* 1. Keine Farbe */
.bg-none {
  background-color: transparent !important;
}

/* 2. Edles Kaffee-Braun */
.bg-coffee {
  background-color: #6f4e37 !important;
}

/* 3. Sanftes Pastellgrün passend zu Tee */
.bg-tea {
  background-color: #DCEDC8 !important;
}