.room-zoom-section {
	  position: relative;
	  width: 100%;
	  /* Höhe wird durch Inhalt bestimmt – kein festes vh nötig */
	}
	
	.room_zoom {
	  /*  top:-50%; */
	  height: 100vh;                 /* oder mehr, je nach Design */
	  width: 100%;
	  position: relative;
	  /* dein restliches Styling bleibt */
	}	
	
	.room_zoom .title_wrapper{
		position: absolute;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		justify-content: flex-start;
		opacity:1; /* initial load */
		z-index:9;
	}
	
	
	.room_zoom .title_wrapper .room_zoom_title{
		position: relative;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		justify-content: flex-start;
		top:15%;
		opacity:1; /* initial load */
	}
	
	
	.room_zoom .room_wrapper_zoom_wrapper{
        height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    
    .room_zoom_room_image_wrapper{
    	/* transition:0.5s ease; */
    	
    		transition: filter 0s; /* verhindert laggy transition */
		  filter: blur(var(--room-blur, 0px));
		  will-change: filter;
  
    }
    
    .blur-strong {
	  --room-blur: 20px;
	}
	
    .room_zoom .room_zoom_room_wrapper{
        transform: translate(0%, -3.5%);
	    left: 0%;
	    top: 0%; 
        position: absolute; 
        /* height: 300vh; */
        width: 100vw;
        /* overflow: hidden; */
        perspective: 1200px;     
        position:relative;    
        height:100vh;
    }

    .room_zoom  .room_zoom_room_inner{
        position:relative;
        width:100%;
        height:100%;
        transform-style:preserve-3d;
        transform: scale(1);
    }
    
    
    .room_zoom .button-wrapper {
	    /* bottom: -65vh; */
	    position:relative;
	    z-index: 9;
	    padding:0px;
	}
	
	.room_zoom .button-wrapper a {
	    margin:0px;
	}
	

    .room_zoom  .room_zoom_room_image{
        position:absolute;
        inset:0;
        z-index:0;
    }

    .room_zoom .room_zoom_room_image img{
        /* width:100%;
        display:block; */
        /* position: absolute;
        top:50%;
	    left: 50%;
	    transform: translate(-50%, -50%); */
        object-fit:cover;
        
        box-shadow:0 20px 40px rgba(0,0,0,0.5);
        transition:0.5s ease;
        opacity:1;  
        z-index:0;
        width:100%;
        height:auto;
    }
    
    
    @media (orientation: portrait){   
		.room_zoom .room_zoom_room_image{
		  
		   height: 100vh;
		}
		
		.room_zoom .room_zoom_room_image img{
		  
		   height: 100vh;
		}
	}
    
    
    .room_zoom .room_zoom_art_wrapper{
	    position:relative !important;
	}
	
    
    .room_zoom .room_zoom_art{
	    position:absolute;
	    overflow: visible;
       /* overflow: hidden; */
	    left:50%;          /* Start: Mitte */
	    top:50%;           /* leicht über Mitte */
	    transform: translate(-50%, -50%) scale(1.5); 
	    background:none;
	    color:#fff;
	    display:flex;
	    align-items:center;
	    justify-content:center;
	    font-weight:bold;
	    font-size:24px;
	    will-change:transform,opacity,width,height,left,top;
	    z-index:1;
	    transform-origin:center center;
	}
	
	
	
	
	
	.room_zoom .room_zoom_art_wrapper .crop_overlay{
	
		background-size: 200%;
	    background-repeat: no-repeat;
	    position: absolute;
	    background-position: center;
    	z-index: 5;
    	  
	}
	
	.room-zoom-section .text-overlay{
		    position: relative;
		    opacity: 0;
		    line-height: 1.2;
		    
		    /* top: 60%; 
		    left: 50%;*/
		    /*
		    transform: translate(-50%, -50%);
		   
		    transform: translateX(-50%);  */
	}
	
	.room_zoom .overlay-wrapper {
	    left: 50%;
	    top: 50%;
	    opacity: 1;
	    z-index: 9999;
	    position: absolute;
	    transform: translate(-50%, -50%);
	}

	
	.art_shadow{
		box-shadow: 0 2px 1px rgba(0, 0, 0, 0.09), 0 4px 2px rgba(0, 0, 0, 0.09), 0 8px 4px rgba(0, 0, 0, 0.09), 0 16px 8px rgba(0, 0, 0, 0.09), 0 32px 16px rgba(0, 0, 0, 0.09) !important;
	}
	
	/*
	.center_position_size_initial{
		width: 25% !important;
	    height: 25% !important;
	    top: 50% !important;
	    left: 50% !important;
	    transform: translate(-50%, -50%) scale(2) !important;
	}
	*/
	
	.center_position_size_initial{
		width: 25% !important;
	    height: 25% !important;
	    top: 50% !important;
	    left: 50% !important;
	    transform: translate(-50%, -50%) scale(2) !important;
	}
	
	@property --rotate {
	  syntax: "<angle>";
	  initial-value: 132deg;
	  inherits: false;
	}
	
	:root {
	  --card-height: 65vh;
	  --card-width: calc(var(--card-height) / 1.5);
	}
	
	
	.glow {
	  background: #191c29;
	  padding: 3px;
	  position: absolute;
	  border-radius: 6px;
	  justify-content: center;
	  align-items: center;
	  text-align: center;
	  display: flex;
	  font-size: 1.5em;
	  color: rgb(88 199 250 / 0%);
	  cursor: pointer;
	  font-family: cursive;
	  opacity:0;
	  z-index:4;
	}
	
	
	.glow:hover {
	  color: rgb(88 199 250 / 100%);
	  transition: color 1s;
	}
	
	.glow:hover:before, .glow:hover:after {
	  animation: none;
	  opacity: 0;
	}
	
	
	.glow::before {
		content: "";
	    width: 97%;
	    top: 50%;
	    overflow: visible;
	    height: 97%;
	    border-radius: 8px;
	    background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
	    background-image: linear-gradient(var(--rotate), #ff00ea, #00d0ff 54%, #3000ff);
	    position: absolute;
	    z-index: -8;
	    filter: blur(25px);
	    animation: spin 2.5s linear infinite;
	    transform: translate(-50%, -50%);
	    top: 50%;
	    left: 50%;
	}
	
	.glow::after {
	  	position: absolute;
	    content: "";
	    top: calc(var(--card-height) / 6);
	    left: 0;
	    overflow: visible;
	    right: 0;
	    z-index: -1;
	    height: 110%;
	    width: 110%;
	    inset: 0;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%) scale(0.9);
	    margin: 0 auto;
	    /* transform: scale(0.8); */
	    filter: blur(10px);
	    background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
	    background-image: linear-gradient(var(--rotate), #ff00ea, #00d0ff 54%, #3000ff);
	    opacity: 1;
	    transition: opacity .5s;
	    animation: spin 2.5s linear infinite;
	}
	
	@keyframes spin {
	  0% {
	    --rotate: 0deg;
	  }
	  100% {
	    --rotate: 360deg;
	  }
	}
	
	
	
	.room_zoom img{
		transition: 0.5s ease;
		opacity:1;
	}
	
	.room_zoom.loaded img{
	    opacity:1 !important;
	}
	
	.room_zoom.loaded .room_zoom_art_xx{
	    transform: translate(0%, 0%);
	}
	
	.room_zoom .room_zoom_art img{
	    width:100%;
	    height:auto;
	    object-fit:contain;
	    display:block;
	    box-shadow:0 120px 120px rgba(0,0,0,0.45);
	}
	
	.no-shadow{
		box-shadow:unset !important;
	}
	
	.room_zoom .room_zoom_art img::before {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    
    /* oben hell, unten leicht abgedunkelt */
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.28),
        rgba(0,0,0,0.05)
    );
    mix-blend-mode: screen; /* wirkt „lichtiger“ */
}

.room_zoom .room_zoom_room_inner::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    
    /* großes Radial-Highlight hinter dem Bild 
    background:
        radial-gradient(
            circle at 50% 35%,      
            rgba(255,255,255,0.22),
            rgba(0,0,0,0.0) 55%,
            rgba(0,0,0,0.3) 100%
        ); */
    z-index:0; /* hinter .art, aber über dem Hintergrundbild, falls nötig */
}


.room_zoom .art_button_buy_me_wrapper{
	position: relative;
	right:0px;bottom:0px;
    width:0px;
    height:0px;
    overflow:visible;
}

.room_zoom .art_button_buy_me{
	position: absolute;
    right: -3%;
    bottom: -3%;
    z-index: 3;
    background-color: red;
    border-radius: 10em;
    padding: marigin;
    margin: 10px;
    padding: 2em;
    transform: rotate(10deg);
}	    

.room_zoom,
.room_zoom * {
    /* transform: translateZ(0);    GPU-Beschleunigung */
    backface-visibility: hidden;
}

#room_zoom_wrapper_outer {
    overflow: hidden;           /* verhindert Scroll-Leaks */
}


.room-zoom-section .pin-spacer{
	overflow: visible !important;
}


.scroll_wrapper > .pin-spacer {
    overflow: visible !important;
}


.teaser_video_wrapper{
	height:200vh;
}

#room_zoom_wrapper_outer .button-wrapper {
  text-align: center;
  padding: 5vh 0 1vh; /* Abstand oben/unten – passt den Scroll-Timing an */
  width: 100%;
  position:absolute;
  bottom:7em;
}
    
   /*  */