.clearfix {clear:both;}
	.xm-stilfinder-frontend{ display:grid;  grid-auto-flow: column; font-family: Arial, sans-serif; position:relative;grid-template-columns: 2.5fr minmax(100px,1fr);
     max-width:1360px;margin:0 auto;font-size:14px;line-height:21px;background-color:#fff;}
	.xm-sf-column{ padding:10px;  background:#fff; box-sizing:border-box; }
	.xm-sf-top-bar{ grid-column: 1 / 3;grid-row:1/2;}
	.xm-sf-col-left{ overflow-y:auto;grid-column: 1 / 2;grid-row:2/4;background:#dadada;padding:20px 40px 20px 60px;box-sizing: border-box;}
	.xm-sf-col-right{ overflow-y:auto;position:relative;grid-column: 2 / 3;grid-row:2/4;background:#f2f2f2;padding: 20px 60px 20px 40px;box-sizing: border-box;border-left:5px solid #fff;}
	

    @media SCREEN AND (max-width:768px) {

    .xm-sf-col-left{ overflow-y:auto;grid-column: 1 / 3;grid-row:1/2;padding:20px 20px 20px 20px;}
	.xm-sf-col-right{ overflow-y:auto;position:relative;grid-column: 1 / 3;grid-row:2/3;background:#f2f2f2;padding: 20px 20px 120px 20px; /* Bugfix für Mobilgeräte: Abgeschnittener Content wird wieder sichtbar */ box-shadow: 0 0 20px rgba(0,0,0,0.9);border-left:none;}
    
    
    }
 
     
    #xm-sf-canvas  {  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjAwIDEwMCI+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNkYWRhZGEiIC8+PHJlY3QgeD0iMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2YyZjJmMiIgLz48L3N2Zz4=');
    background-size:cover;position:relative;font-size:14px;line-height:21px;}

    .xm-stilfinder-frontend h6 {margin-bottom:1em;}

    @media screen and (max-width:768px) {
    .xm-stilfinder-frontend h6 {font-size:20px;margin-bottom:12px;}
    }

	/* When container has this class, swap the column widths so right column (and bottomright) become the larger area */
	.xm-sf-right-large { grid-template-columns: minmax(100px,1fr) 2.5fr !important; }

	/* Unified item class used in both media grid and selection grid.
	   Use CSS to style items differently depending on which column they are in.
	*/

	/* common item: base container and image reset */
	.xm-sf-item{ position:relative; overflow:hidden; border-radius:8px; background:#f6f6f6; cursor:pointer; display:block; }
	.xm-sf-item img{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; top:0; left:0; }

	/* Styles for items when they appear in the larger column (take the old xm-sf-tile styles) */
	/* If middle is large (default), middle column items are large */
	.xm-sf-col-left .xm-sf-media-grid .xm-sf-item,
	/* If right is large (toggled), right column items should appear large */
	.xm-sf-right-large .xm-sf-col-right .xm-sf-selection-grid .xm-sf-item {
		aspect-ratio: 4/3;
		max-width:700px;
		border-radius:8px;
		background:#f6f6f6;
		/* make image absolutely fill */
	}

	.xm-sf-col-right .xm-sf-selection-grid .xm-sf-item,
	.xm-sf-right-large .xm-sf-col-left .xm-sf-media-grid .xm-sf-item {		aspect-ratio: 4/3;		max-width:100%;		border-radius:4px;		background:#f3f3f3;	}



	.xm-stilfinder-frontend .xm-sf-media-grid{ display:grid; flex-wrap:wrap; gap:20px; grid-template-columns: 1fr 1fr 1fr 1fr;}
    .xm-stilfinder-frontend.xm-sf-right-large .xm-sf-media-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; }
	/* selection grid keeps its smaller columns but items use unified class */
	.xm-sf-selection-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; margin-bottom:1em;}
    .xm-sf-right-large .xm-sf-selection-grid{display:grid; flex-wrap:wrap; gap:20px; grid-template-columns: 1fr 1fr 1fr 1fr;}



    @media SCREEN AND (max-width:768px) {
    
    .xm-stilfinder-frontend .xm-sf-media-grid{grid-template-columns: 1fr 1fr;}
    .xm-stilfinder-frontend.xm-sf-right-large .xm-sf-media-grid{ grid-template-columns: 1fr 1fr 1fr 1fr;}
	/* selection grid keeps its smaller columns but items use unified class */
	.xm-sf-selection-grid{grid-template-columns: 1fr 1fr 1fr 1fr }
    .xm-sf-right-large .xm-sf-selection-grid{grid-template-columns: 1fr 1fr;}
    
    }





	.xm-sf-overlay{ position:absolute; top:8px; right:8px; background:transparent; padding:0; margin:0; z-index:2; }
	.xm-sf-overlay input[type=\"checkbox\"]{ width:18px; height:18px; margin:0; padding:0; background:transparent; border:1px solid rgba(255,255,255,0.8); outline:none; -webkit-appearance:checkbox; }

	.xm-sf-empty{ color:#666; font-size:13px; }

	.xm-sf-submit-div {position:absolute;bottom:40px;left:10px;}
	
    
    .xm-sf-media-grid .xm-sf-item.selected {	opacity: 0.4;    border:2px solid #48a28c;    border:2px solid var(--Color2cFlaeche);    }
    
    .xm-sf-selection-grid .xm-sf-item.selected {       border:2px solid #48a28c;    border:2px solid var(--Color2cFlaeche);}
    
    
    
    .xm-sf-item input {display:none;}
    
    .xm-sf-terms {margin-bottom:1em;}
    .xm-sf-terms label input {display:none;}
    .xm-sf-terms label {padding:3px 12px;background:#fff;border-radius:8px;color:#000;line-height:25px;display:inline-block;cursor:pointer;margin-right:10px;margin-bottom:10px;}
    .xm-sf-terms label:has(input:checked)  {background:black;color:#fff;}
 
	.xm-sf-terms input[type=\"checkbox\"]{ margin-right:3px; vertical-align:middle; }

    .xm-sf-right-large .xm-sf-terms {display:none;}
    
    .xm-sf-show-more-terms {  background: gray;  border-radius: 8px;  padding: 3px 12px;  border: none;  line-height: 25px;  color: #fff;cursor:pointer;}
    
    
    
    #xm-sf-toggle-view-button-container {position: absolute;  left: 69.5%;  top: 50%;  width: 
  60px;  height: 60px;  z-index:6;cursor:pointer;}
     .xm-sf-right-large #xm-sf-toggle-view-button-container {left:26.5%;}
    .xm-sf-toggle-view{ background:transparent;border:0;font-size:18px;cursor:pointer;}
    
    .xm-sf-pfeillinks, .xm-sf-pfeilrechts,.xm-sf-pfeilunten, .xm-sf-pfeiloben {width:60px;height:60px;}
    .xm-sf-pfeilunten, .xm-sf-pfeiloben {display:none;}
    .xm-stilfinder-frontend.xm-sf-right-large .xm-sf-pfeillinks {display:none;}
     .xm-stilfinder-frontend:not(.xm-sf-right-large) .xm-sf-pfeilrechts {display:none;}
    
    @media screen AND (max-width:768px) {
    
    .xm-stilfinder-frontend:not(.xm-sf-right-large) .xm-sf-pfeiloben {display:block;}
    .xm-stilfinder-frontend.xm-sf-right-large .xm-sf-pfeilunten {display:block;}
    .xm-sf-pfeillinks, .xm-sf-pfeilrechts {display:none;}
    .xm-sf-pfeilunten, .xm-sf-pfeiloben {}

    
    #xm-sf-toggle-view-button-container {position: absolute;      left: 50%;      top: 66vh;transform: translate(-50%,-40%);      }
     .xm-sf-right-large #xm-sf-toggle-view-button-container {top:10.5vh;left: 50%;transform: translate(-50%,-40%);}
    
    }
    
    
    
    
.xm-sf-item .sf-enlarge-img,.xm-sf-item .sf-add-to-selection {    position: absolute !important;
    bottom: 8px; width:20px; height:20px;z-index: 3;text-decoration: none;font-size: 14px;  font-weight: bold;  color: #444;}
.xm-sf-item .sf-enlarge-img img {width:25px;height:auto;}
.xm-sf-item .sf-enlarge-img {    right: 8px;}



.xm-stilfinder-frontend:not(.xm-sf-right-large) .xm-sf-media-grid .xm-sf-item:hover .sf-plus-icon,
.xm-stilfinder-frontend.xm-sf-right-large .xm-sf-selection-grid .xm-sf-item:hover .sf-plus-icon {display:block;}


.xm-sf-item:not(.selected) .sf-plus-icon img.xm-sf-plus {display:block;}
.xm-sf-item.selected .sf-plus-icon img.xm-sf-minus {display:block;}
.xm-sf-item .sf-plus-icon {    width:50px;    height:50px;    position:absolute;top:50%;    left:50%;    display:none;    transform: translate(-50%,-50%);    background-image:none !important;    }
.xm-sf-item .sf-plus-icon img {width:50px;height:auto;display:none;}
.xm-sf-item .sf-add-to-selection {    display:none !important;}

.xm-stilfinder-frontend:not(.xm-sf-right-large) .xm-sf-selection-grid .xm-sf-item .sf-enlarge-img,
.xm-stilfinder-frontend.xm-sf-right-large .xm-sf-media-grid .xm-sf-item .sf-enlarge-img {display:none;}



/* Lightbox Styling */
.sf-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.sf-lightbox-content {
    position: relative;
    padding: 0px;
    border-radius: 8px;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sf-lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 4px;
}

.sf-lightbox-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #444;
    color: #fff;
    border: none;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
}
.xm-sf-verkleinern {width:20px;}

#xm-sf-info-button-restrict {max-width:1360px;text-align:right;margin:0 auto;padding:0 20px;}
#xm-sf-info-button {box-sizing: border-box;text-align: right;  background: #f2f2f2;  padding: 10px 10px;  border-top-left-radius: 8px;  border-top-right-radius: 8px;  height: 7vh;  display: inline-block;margin-bottom: -83px;}
#xm-sf-info-button img {height:100%;width:auto;} 
#sf-stilfinder-schliessen {display:none;}
    
    
    #xm-sf-next-step-buttons {position:absolute;top:70%;right:0;z-index:50;  display: flex;
  flex-direction: column;  justify-content: flex-end;  align-items: flex-end;}
    #xm-sf-next-step-buttons > div {background-color: #48a28c;
    background-color:var(--Color2cFlaeche);
    padding:8px;color:#fff;display:block;margin-bottom:15px;border-radius:8px;border:none !Important;border-top-right-radius:0;border-bottom-right-radius:0;background-image:none !Important;box-shadow:0 0 5px rgba(0,0,0,0.5);cursor:pointer;}
    .xm-sf-hanging {float:left;display:block;max-width:200px;}
    

    #xm-sf-next-step-buttons div h6 {color:#fff;}
    #xm-sf-next-step-buttons div a.xm-sf-jetzt-anfragen-textlink, #xm-sf-next-step-buttons div a.xm-sf-selektion-verfeinern {color:#fff;}
    
    #xm-sf-next-step-buttons div img {float:left;margin-right:10px;width:40px;height:auto;}
    #xm-sf-next-step-buttons div.xm-sf-bearbeiten img.xm-sf-button-abschicken {display:none;}
    #xm-sf-next-step-buttons div.xm-sf-bearbeiten img.xm-sf-button-bearbeiten {display:block;}
    #xm-sf-next-step-buttons div:not(.xm-sf-bearbeiten) img.xm-sf-button-bearbeiten {display:none;}
    #xm-sf-next-step-buttons div:not(.xm-sf-bearbeiten) img.xm-sf-button-abschicken {display:block;}


    #xm-sf-jetzt-anfragen:not(.xm-sf-active) p, #xm-sf-jetzt-anfragen:not(.xm-sf-active) h6,
    #xm-sf-weiter-konkretisieren:not(.xm-sf-active) p,#xm-sf-weiter-konkretisieren:not(.xm-sf-active) h6  {}
    #xm-sf-weiter-konkretisieren:hover p {display:block;}


    
    #xm-sf-jetzt-anfragen.xm-sf-bearbeiten .xm-sf-button-abschicken {display:none;}
    #xm-sf-jetzt-anfragen:not(.xm-sf-bearbeiten) .xm-sf-button-bearbeiten {display:none;}

    @media SCREEN AND (min-width:768px) {
    
      
    
    #xm-sf-next-step-buttons #xm-sf-jetzt-anfragen a.xm-sf-jetzt-anfragen-textlink, #xm-sf-next-step-buttons #xm-sf-jetzt-anfragen a.xm-sf-selektion-verfeinern {display:none !important;}
    }
    
    @media SCREEN AND (max-width:768px) {
    
    #xm-sf-next-step-buttons {top:60%;} 
    #xm-sf-info-button-restrict {max-width:1400px;text-align:left;margin:0 auto;}
    #xm-sf-info-button {background:#dadada;padding:10px 10px;margin-bottom:0;}
    #sf-stilfinder-schliessen {float:right;height:7vh;padding:10px 10px;display:inline-block;box-sizing: border-box;}
     a#sf-stilfinder-schliessen span {font-size:11px;color:#fff;}
      a#sf-stilfinder-schliessen {background-image:none !important;background:#dadada;border-top-left-radius:8px;border-top-right-radius:8px;}
      
    a#sf-stilfinder-schliessen img {
        margin-top:10px;
      width: 15px;
      display: block;
      margin:10px auto 0 auto;
    }
      
    
    #xm-sf-next-step-buttons div h6 {display:none;}

    .xm-sf-hanging {display:none;}
    .xm-sf-active .xm-sf-hanging {float:left;display:inline;max-width:200px;}


    }
    
    
    
    @media screen AND (min-width:768px) {#xm-sf-popup {display:none;}}
    #xm-sf-popup {position:fixed;top:10vh;bottom:10vh;left:3vw;right:3vw;background:rgba(255,255,255,0.95);z-index:999;padding:30px;width:90vw;height:80vh;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.3);max-width:768px;margin:auto auto;overflow:auto;}
    #xm-sf-popup h4 {color:#48a28c;}
    #xm-sf-popup h4.dark {margin-top:1.5em;color:#444;}

    #xm-sf-popup ul {list-style-type:none;padding-left:0;}
    #xm-sf-popup ul li {margin-bottom:10px;}

    #xm-sf-popup ul li img {width:30px;height:30px;margin-bottom:15px;float:left;margin-right:15px;}
    a.xm-sf-verstanden-und-los, .et_pb_text .et_pb_text_inner a.xm-sf-verstanden-und-los {color:#48a28c;background-image:none !important;max-width:60px;display:inline-block !important;text-align:center;line-height:10px;margin:0 0 0 auto;float:right;}
    a.xm-sf-verstanden-und-los img {width:20px;height:20px;display:block;margin:0 auto;}
    a.xm-sf-verstanden-und-los span {font-size:11px;text-align:center;}

    
    .xm-stilfinder-frontend .xm-sf-col-left .xm-sf-formidable-grid {display:none;}
    .xm-stilfinder-frontend .xm-sf-col-left.xm-sf-showform .xm-sf-formidable-grid {display:block;}
    
    .xm-stilfinder-frontend .xm-sf-col-left.xm-sf-showform .xm-sf-welcher-stil-h6 {display:none;}
    .xm-stilfinder-frontend .xm-sf-col-left:not(.xm-sf-showform) .xm-sf-ihre-anfrage-h6 {display:none;}
    
    
    .xm-stilfinder-frontend .xm-sf-col-left.xm-sf-showform .xm-sf-terms {display:none;}
    .xm-stilfinder-frontend .xm-sf-col-left.xm-sf-showform .xm-sf-media-grid {display:none !important;}
    .xm-sf-formidable-grid {max-width:600px;}
    
    
    
    .xm-sf-col-left .xm-sf-media-grid .xm-sf-item.load-more {display:flex;justify-content:center;align-items:center;flex-direction:column;color:#fff;background:none !important;  grid-column: 1/5;  padding: 20px 0px;  aspect-ratio: auto;max-width:none;}
    
    .xm-stilfinder-frontend.xm-sf-right-large .xm-sf-col-left .xm-sf-media-grid .xm-sf-item.load-more {grid-column: 1/4;}
    
    @media screen and (max-width:768px) {.xm-sf-col-left .xm-sf-media-grid .xm-sf-item.load-more {grid-column: 1/3;}
    
    .xm-stilfinder-frontend.xm-sf-right-large .xm-sf-col-left .xm-sf-media-grid .xm-sf-item.load-more {grid-column: 1/3;}
    
    
    }
    
    
    .xm-sf-col-left.xm-sf-showform + .xm-sf-col-right .xm-sf-item {pointer-events: none;}
    .xm-sf-selektion-verfeinern {display:none !important;margin-top:10px;}
    .xm-sf-col-left.xm-sf-showform + .xm-sf-col-right .xm-sf-selektion-verfeinern , #xm-sf-jetzt-anfragen .xm-sf-selektion-verfeinern {display:inline !important;}
    
    img.xm-sf-loadmore-img {width: 40px;  height: 40px;  margin: 0 auto;  display: inline-block;position:relative;}