/* cmsms stylesheet: css-arsp-portfolio-10A modified: Dienstag, 16. Januar 2024 14:29:34 */
/* cmsms stylesheet: css-arsp-portfolio-10A modified: 11/25/21 12:11:54 */
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap');*/


/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('http://roberope.com/uploads/fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('http://roberope.com/uploads/fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('http://roberope.com/uploads/fonts/roboto-v30-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-900.woff') format('woff'), /* Modern Browsers */
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('http://roberope.com/uploads/fonts/roboto-v30-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}



/* outfit-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('http://roberope.com/uploads/fonts/outfit-v11-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  src: url('http://roberope.com/uploads/fonts/outfit-v11-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  src: url('http://roberope.com/uploads/fonts/outfit-v11-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('http://roberope.com/uploads/fonts/outfit-v11-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  src: url('http://roberope.com/uploads/fonts/outfit-v11-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}














#Mainnav2 ul li.menu_sprache {/*background: rgba(0, 0, 0, 0.5)*/}
 #Mainnav2 ul li.menu_sprache a {background: transparent; color: yellow; font-size: 1rem}
 #Mainnav2 ul li.menuactive a { color: #888}
 #Mainnav2 ul li a { border-bottom: 1px solid white; display: block; padding: 0.4rem 0}

.Wettbewerb, .Wettbewerb a, .Wettbewerbe{/*color: #66af38*/}

.Projekt, .Projekt a, .Projekte {/*color: #749AA5*/}
.Realisation, .Realisation a {/*color: #DBA258*/}
.Bauten, .Bauten a {/*color: #f15b20*/}

span.selected {font-weight: 700; }


*,
*::before,
*::after {
   box-sizing: border-box;
}


html, body {padding: 0; margin: 0;


}
body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
 
}
html {

  height: -webkit-fill-available;
}








body {
    padding: 0;
    margin: 0;
    font-family:  'Outfit', 'Roboto', sans-serif;
   font-weight: 400;
   
     scroll-behavior: smooth;
  
}

table tr td {vertical-align: top}

ul {list-style: none; padding: 0;}

#projektinfo-5A li {padding: 0.5em 0}

#Hintergrundbild {
    position: fixed;
    height: 100%;
    width: 100%;
    display: block}
    
    #Hintergrundbild img {
         height: 100%;
    width: 100%;
        object-fit: cover;
        
        
    }

header {
    display: block;
       height: auto;
    padding: 0;
    margin: 0;
    border-bottom: 0.2rem solid #555;
    border-bottom: none;
    /*         box-shadow: 0px 4px 5px #333;*/
    top: 0;
    /*wichtig für sticky!!*/
    position: -webkit-sticky;
    position: sticky;
    z-index: 1000;
}
    
     
 footer {
      position: -webkit-sticky;
    position: sticky;
    
    position: relative;
    bottom: 0;
     display: block;
     /*height: 3rem;*/
     text-align: right;
     padding: 1rem;
     font-size: 0.7em;
     color: grey;

     background: white;
    
     
     z-index:1000;
     
/*border-top: 1px solid grey;*/
     
     
 }   
 
 
   footer a {display: inline-block; padding: 0.4rem 0 0 0.8rem; }

 footer img{height: 3rem}



h1, .projekttitelA {font-size: 3em; margin: 0.2em 0;}
#mainer {
    position: fixed; 
    z-index: 10;
    display: block;
    max-width:50vw ;
    background: white;
    
    bottom: 1rem;
    left: 1rem;
    padding: 1rem;
    
  
}


#mainer ul, #mainer li {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

nav a {text-decoration: none}
a {text-decoration: underline; color: #888; color: #000}
a:hover, .currentpage {color: #000}


.wrapperAA {
width: 100%;



height: 100vh;

/*	scroll-behavior: smooth;*/


  display: block;

  overflow-y: auto;

  
  
  
      position: fixed;
   
  
 
    padding: 0;
    top: 0;
left:0;
  
  
  z-index:-2;
  
  background: white;
  scroll-behavior: smooth;
  
}


#bildbanner {
    
    width: 100%;


/*	scroll-behavior: smooth;*/


 
  
  
     display: flexbox;
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    -ms-flex-direction: column;
    flex-wrap: nowrap;
    position: absolute;
        position: relative;
       
    
/*border: 1px solid red;*/
  /*  border-bottom: 3rem solid black;*/
    
      flex-grow: 1;
  

}

.snappy { 
    
     scroll-snap-type: y;
 /* */
   
    scroll-snap-type: y mandatory;
        scroll-snap-type: y proximity;
    
     scroll-snap-type: none;
  
}

.snappymenu {

 scroll-snap-type: y proximity;
    scroll-snap-type: y mandatory;
     scroll-snap-type: none;
      
}

.bildframeXX {



/*  transition-duration: 0.4s;
transition-delay: 0.2s;*/

 
  /*min-height: calc(100vh + 1px);*/
  height: 100vh;
  
  height: auto;

  position: relative;
  
  width: 100%;
  scroll-snap-align: start;
 

padding: 1rem;
padding: 0;
display: block;




/*opacity: 0.3;*/

/*height: 100vh*/
}

.bildframeXX div.imagewrapper {height: inherit; width: inherit; display: block; 
    
  background: black;
   background: #bbb;
  background: #eee;
    
}


.bildframeXX.portfolio {height: 100vh; 


}

.bildframeXX.portfolio .showhover p, .bildframeXX.portfolio .showhover a, .bildframeXX.portfolio .showhover h2 span  {
   display: inline-block;
 
     width: auto;
    background: white;
    margin: 0;
    padding: 0.2rem 0.4rem;
    
}
    
    
  
    
    
.bildframeXX.portfolio .showhover  h2{
    
 padding: 0;
   margin: 0;

display: inline-block;
font-weight: 500;
}   

.bildframeXX.portfolio .showhover  a {
 color: black;  background: white; 
} 
.bildframeXX.portfolio .showhover  a:hover {
 color: white;  background: black; 
} 



.bildframeXX{display: inline-block}


  .bildframeXX.einzelprojekt:first-of-type {
      
   height: 100vh;
   
  /*border: 2px solid blue;*/
 
      
  }
   .bildframeXX.einzelprojekt:first-of-type .showhover{
      
   position: absolute; display: block; width: 100%;
   
  /*border: 2px solid blue;*/
 
      
  }
  
  
  
  
  .bildframeXX.Projektheader {
       height: auto; min-height: 100vh;
      
    
      
      
  }
  
  
  
  .bildframeXX label {position: fixed;

top: calc(50vh - 1rem); 

width: auto; height: 2rem; 

/*opacity: 0.5;*/
    
    z-index: 2;
    margin-left: 1rem;
    padding: 0.5rem 0;
     
    display: none;
}
  


.bildframeXX.inViewPort label {
    display: block;
    vertical-align: center;
}




.bildframeXX.inViewPort.BildzoomButtonHidden label {display: none}

.bildframeXX img { 
display: block;
   width: 100%;
 height: 100%;


 
object-fit: cover;

}

.bildframeXX:first-of-type img, .bildframeXX:last-of-type img { min-height: 51vh;
    
   
    
}

    .screen-toggle {
        position: absolute;


       /* opacity: 0.8;*/

         cursor: zoom-out;
         display: none;
    
    }
    
    
       .screen-toggle ~label {
        
        cursor: zoom-out;
        background: red;
        
    }
    
       .screen-toggle ~label::after { font-weight: bold; content: "zoom out";}
    
    .screen-toggle:checked ~label {
        
        cursor: zoom-in;
        background: red;
        color: white;
        
    }

.screen-toggle:checked ~label::after {content: "zoom in";}


.showhover {
    position: relative; /*handy */
    

    bottom: 1rem;
    left: 0;
   
    background-color: rgba(0, 0, 0, 0.7);
    background-color: white;
    color: #222;
   /*padding: 0.5em;*/
   margin: 1rem;
   margin-bottom: 0;
  
    font-size: 0.9em;
    
    
margin: 0;
bottom: 0;
    font-size: 0.9em;
   /* border-bottom: 1px solid #ddd;*/
    padding: 0.2rem 1rem;
  

  position: absolute;
 

    }
    
    .showhover.titeldrunter {position: relative}
    
    
.showhover.skipmenu { position: absolute; background: transparent; border: none;
    padding: 1rem;
    margin-bottom: 0;
    
}
    
    
    
    .showhover.showhoverportfolio {
        position: absolute;
        bottom: 1rem;
        
    }
    
    .bildframeXX:first-of-type .showhover.skipmenu {bottom: 20vh;}
    

    

    
    
    .showhover:hover {/*background: red;*/}
    

  .IDbildInfo, .Bildnummer,  .Bildtitel { color: #000; font-size: 1rem; font-weight: bold}

    .Bildnummer {background: white}
       
    .bildframeXX .screen-toggle:checked ~ .imagewrapper img{
  object-fit: contain;
   /*padding: 1rem;*/

transition: max-height 1s, max-width 1s, border 1s, opacity 600ms;

max-width: 100%;
max-height: 100vh;


 }
 
 
 
 
 
    
      .bildframeXX .showhover:hover ~ img {}
    
    .bildgroesseninfo {display: none; }
    
    
     .bildframeXX .screen-toggle:checked ~ .showhover .bildgroesseninfo{
         content: "Bild ist verkleinert";
         
     }
     
     .infoGanzesBild {display: none;  color: yellow;}
     .infoTapete{color: cyan;}
     
     .bildgroesseninfo {background: red; }
       
     .bildframeXX .screen-toggle:checked ~ .showhover .bildgroesseninfo .infoGanzesBild,   .infoTapete{
         display: block; 
     }
     
          .bildframeXX .screen-toggle:checked ~ .showhover .bildgroesseninfo .infoTapete{
         display: none; 
     }
     
     

     
     .checkboxwrapper {display: block; 
         position: relative; right: 0;
         width: auto; height: auto;
         cursor: pointer;
     background: black;
     color: white;
         
         position: fixed;
         right: 1em;
         bottom: 55vh;
         bottom: 4rem;
         
         z-index: 1005;
         background: red;
        background: black;
         
     }
     
      .thumbs-toggle:checked ~ .checkboxwrapper {background: white}
     
      .thumbs-toggle:checked ~ .checkboxwrapper:hover { background: white; color: black; }
     
     
     .thumbs-toggle {opacity: 0}
     
     .checkboxwrapper span {display: block; Font-size: 1.4em; font-weight: 800; 
     
         padding: 0.3rem 0.5rem;
         padding: 0;
     }
     
    #THUMBSallwrapper {
        display: block;
         
    position: fixed; 
        bottom: 55vh;
        right: 1em;
       /*min-width: 200px;*/
       width: auto;
       
        height: auto;
        
        z-index: 1;
        
        background: cyan;
      
     
    }
    .thumbs-toggle {}
    
   .thumbs-toggle:checked ~ #thumbscontainer {z-index: -11; opacity: 0;}
    
   .thumbs-toggle:checked ~ .checkboxwrapper, .checkboxwrapper:hover {color: white; background: red; }
 
 
 
 
 
 
 
 
    
    #thumbscontainer {
        position: fixed; 
        bottom: 5rem;
        right: 1rem;
       width: 30vw;
       height: 50vh;
        overflow-y: auto;
   /* display: flex;
    flex-wrap: wrap;*/
    
  display: block;
     background-color: rgba(255, 255, 255, 1);
   border-top: 0.5rem solid white;
     border-bottom: 0.5rem solid white;
    padding: 0.5rem 0rem 0.5rem 1rem;
    padding: 0;
    
   /* box-shadow: 0px 0px 6px #eee;*/
    
    z-index: 100;
    width: 30%;
    opacity: 1;
    transition: opacity 900ms ease;
    border: 1px solid cyan;
    }
    
    
    #thumbsbanner{display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: flex-end;
        
    }
    


  #thumbscontainer a{  height: 15vh; width: auto;  display: block; 
  position: relative; 
  /*box-shadow: 0px 0px 6px #eee;*/
      
      height: auto; width: auto;
      
      
      margin: 0 0.5rem 0.5rem 0;
      margin:0;
      
      background: white;
  }
  
    #thumbscontainer a img {height: 100% ;  
     border: 1rem solid black;
     border: none;
     opacity: 0.5;
      opacity: 1;
      border-right: 1rem solid black;
      transition: border 100ms ease;
      width: 300px;
      height: auto;
      display: block;
   
    
    }
  
  a.currentThumb {/*width: 15vh*/ /*border: 4px solid red;*/ } 
  
  #thumbscontainer a.currentThumb img, #thumbscontainer a:hover img  { /*filter: invert(100%); */
  /*width: 100%;
   object-fit: cover;*/
      
     /* box-shadow: 0px 0px 6px #000;*/
    /*  border: 1rem solid white;
      border: none;*/
      border-right: 1rem solid white;
      
      opacity: 1;
      /*filter: brightness(1.2);*/
   
  }
  
  
  
  
  #menu {position: fixed; right: 0; z-index: 1005;
      
      display: block;
    text-align: right;
    background: transparent;
    transition: background none;
  
  }
  
  .mainmenusub ul {text-align: left}
  
  #menu.menuopen,   #menu2.menuopen {
      
      background: black;
      width: 100%; 
        transition: background 1000ms ease;
      
        position: relative;
        top: 0;
        min-height: 100vh;
      
      
  }
  
  
      #menu2.menuopen .logowrap1, #menu2.menuopen .menustripe {
      
      background: black;
      
      
      
  }
  
  
  
  
  
  
  #menu2 {display: flex;
      
     
      
      flex-direction: column;
  }
  
  
   #menu.menuopen a:hover,  #menu.menuopen a.currentpage {color: white;
  }
  

  
  #logo {
      display: inline-block;
  
      right: 0;
      margin: 0rem;
      margin-right: 0;
      width: 3rem; height: 4.9rem;
      height: 3rem;
      background-color: rgba(220,160,140,0.0);
      
      /*filter: drop-shadow(4px 2px 0px rgba(255,255,255,0.4));*/
      
      /*filter: blur(1px);*/
      
      
        -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
 
  
  background-repeat: no-repeat;
      
      
         background-image: url("http://roberope.com/uploads/images/logo/roro_rund_weiss.svg");
         
         background-size: 3rem auto;
          background-size: contain;
         /*filter: drop-shadow(0px 0px 1px #fff);*/
     
     
     align-self: flex-end;
     
    transition: transform 500ms ease;

     
  }
  
  .menuopen #logo {background-image: url("http://roberope.com/uploads/images/logo/roro_rund_weiss.svg");
      /* width: calc(100vw - 3em);*/
            /*  height: 10vh;*/

       /*border: 13px solid red;*/
        
       transform: scale(2.7) rotate(360deg);
      
      
  }
  
  
  .logowrap1 {display: inline-block; padding: 0.5rem; background: red; background: black }
  
  .logotitle { display: block; text-align: right; }
 .logotitle h1, .logotitle .projekttitelA {display: block; 

 

 /*text-shadow: 0px 0px 4px #fff;*/

margin: 0; padding: 0.2rem 0.5rem; font-weight: 600; font-size: 2rem; 
     
   
 }

.logotitle .projekttitelA {}

   .bildframeXX {
       
       background: white;
       
     background: #bbb;
     background: black;
     
       
   }
  .bildframeXX img {
    
            -webkit-transition:opacity 600ms ease-out;
-moz-transition:opacity 600ms ease-out;
-o-transition:opacity 600ms ease-out;
transition:opacity 600ms ease-out; 
      
      
     
      
     /* opacity: 0.4; */
      
  
  }
  
  
  
  
  
  
  .bildframeXX .imagewrapper.graubild {
      
      filter: brightness(0.95);
      /*filter: brightness(0.15);*/
      background: white;
      
      
  }
  
  .bildframeXX .imagewrapper {opacity: 0.5; opacity: 1;
      
      transition: opacity 400ms ease;
  }
  
  
   .bildframeXX.inViewPort img {opacity: 1}
   
     .bildframeXX.inViewPort .imagewrapper {opacity: 1}
   
   
   .showhover {/*display: none*/}
   
   .bildframeXX.inViewPort .showhover, .bildframeXX.einzelprojekt.inViewPort .showhover {display: inline-block; opacity: 1}
  
  .datainfo {display: block; background: yellow; height: 1rem; width: 5rem}
  
  
  #styletoggler {display: none}
  
  
         .showhover{ opacity: 0;
         
         transition: opacity 200ms ease;
z-index: 1000;

 /*z-index: -1000;*/
  }
  
  
  .bildframeXX.einzelprojekt .showhover {opacity: 0.3}
  
  .inViewPort .showhover{ opacity: 1; 
      

/* z-index: 1000;*/

  }
  
  
  
  
  .portfoliosubdiv {      display: block;
   
  }
  

  
  
    .portfoliosubdiv {      display: block;
   
  }
  
  
  
  
  #projektinfo {
      position: sticky;
       position: fixed;
       position: absolute;
      padding: 1rem;
      margin: 1rem;
      
      z-index: 1;
      background: white;
      top: 8rem;
      z-index: 1002;
      /* border: 1px solid grey;*/
      box-shadow: 0px 0px 3px grey;
  }
  
  
  
  

  #projektinfo-5A {
      
      
      display: block;
       
 
      
      z-index: 1;
      background: white;
  
      
      
      position: relative;
  
     /*color: grey;*/
     
   
       margin-bottom: calc(100vh - 10.1rem);
        margin-bottom: calc(100vh - 12.1rem);
        
           margin-bottom: calc(100vh - 15.1rem);
         padding: 1rem;
       
           padding-top: 10rem;
          
     

      
  }
  
   #projektinfo-5A ul,  #projektinfo-5A ul li {
       margin: 0;
       
       
   }
  
  
  
    
  #projektinfo-5A h1 {color: black}
  
  
    #projektinfo-5A  h2 { color: #000}
    #projektinfo-5A a h2 {color: #888; color: #000; text-decoration: underline;}
  
  
  #projektinfo-5A a:hover h2 {color: #000}
  
  
  
  #projektinfo-5A h2 {margin: 0; font-size: 1.3em}
  
  
  
  #projektinfo-5B {
         padding: 1rem;
     
      
      z-index: 1;
      background: white;
      margin-top: 7rem;
      
      
      position: relative;
      display: block;
   
      
  }
    #projektinfo-5B h1 {display: block; color: blue}
  
  
  
  
  
  #thumbstoggelcheckbox {display: none}
  
  
  #textboxtoggler {display: none; position: fixed;}
  #textboxtoggler ~ div div .textinhalte {display: block }
    #textboxtoggler:checked ~ div div .textinhalte {display: block}
    
    
    
         #textboxtoggler ~ img {   position: absolute;  top: 0; display: block; object-fit: cover }
     #textboxtoggler:checked ~ img {/*filter: blur(10px);*/  /* position: relative; */}
    
  

  
  .Projektheader5B, #projektinfo { background: white; display: block; z-index: 1003}
  
  
  #Mainnav {
      display: none;

      text-align: left;
      font-size: 2em;
     
      padding: 1rem;
      padding-bottom: 3rem;
 
  }
  
  #Mainnav ul, #Mainnav li {
      
      list-style: none;
      padding: 0; 
  }
  
  
  #Mainnav2 a { font-size: 3em; font-weight: 700; color: white }
  
  #Mainnav2 a.currentpage, #Mainnav2 a:hover {color: grey }
  
 
  
  .lefty {font-size: 0.8em}
  
  
  
  
  
  
  
  
  
  
 .bildframeXX.portfolio a .showhover .portfoliosubdiv * {background: black; }
 .bildframeXX.portfolio a .showhover .portfoliosubdiv h2, .bildframeXX.portfolio a .showhover .portfoliosubtext {color: white; }
  .bildframeXX.portfolio a:hover .showhover .portfoliosubdiv h2,  .bildframeXX.portfolio a:hover .showhover .portfoliosubtext {color: black; }
  .bildframeXX.portfolio a:hover .showhover .portfoliosubdiv * {background: white;}
  



h2.mobilsubtitel {font-size: 1.1em;}



 /*menue neu*/
 #menu2 {position: fixed;
     z-index: 1006;
     right: 0;
     padding: 1rem;
     
     background: rgba(255,255,255,0.5);
     width: 100%; 
     /* width: 100%; 
      padding-bottom: 0;*/
    /* padding: 0;
      margin: 1rem;*/
     overflow-x: hidden;

     mix-blend-mode: color-burn;
mix-blend-mode: normal;
}
 
 #Mainnav2 {display: none}

 #menu2.menuopen #Mainnav2{display: block}
 

   #menu2.menuopen .logotitle {display: none}
  
  .logowrappermobile {display: flex; width: 100%; 
      
      justify-content: flex-end;
      
     
      
  }
  
  
   .logowrappermobile h1 {font-size: 1.5rem}
  
  
  
   .mainmenusub {height: 0}
  
  
  .mainmenusub {text-align: right}
  
  .mainmenusub h1, .mainmenusub .projekttitelA, .mainmenusub h2, .mainmenusub .projekttitelB, #mehrdatentoggler {display: none}
  
   
  
  
  .menustripe {display: block;  height: 0.3rem; 
  background: red;
  
  background: black;
  margin-top: 0.2rem;
animation: pulse 10s infinite;
 animation-iteration-count: 2;    
  }
  
  

@keyframes pulse {
  0% {
    margin-top: 0.2rem;
  }
  
   10% {
    margin-top: 0.7rem;
    
  }
  
  20% {
    margin-top: 0.2rem;
    
  }
}
  
  
  
  
  
  
a.bildframeXX.portfolio .showhover.skipmenu .portfoliosubdiv h2 {
    background: black;
    color: white;
}
  
   a.bildframeXX.portfolio  .showhover .portfoliosubdiv * {background: black; }
 a.bildframeXX.portfolio  .showhover .portfoliosubdiv h2, a.bildframeXX.portfolio  .showhover .portfoliosubtext {color: white; }
  
  a.bildframeXX.portfolio .showhover:hover .portfoliosubdiv h2,  a.bildframeXX.portfolio .showhover:hover .portfoliosubtext {color: black; }
  a.bildframeXX.portfolio .showhover:hover .portfoliosubdiv * {background: white;}
  
  
  
  
    #textboxtogglerLabel {display: inline-block; width: auto; height: auto; cursor: pointer}
  
  
  
  #thumbscontainer, .checkboxwrapper {display: none; z-index: 0;}
  
  #projektinfo-5A ul.team li.teammember {display: block; padding: 0 0 0.1rem 0; }
  .teammemberdetails {display: none; width: 100%; padding-bottom: 2rem}
  .teammemberdetails img {width: 100%; height: auto; display: block; padding: 1rem 0 0 0}

  .teamtitle {color: #888;
  color: #000;
  cursor: pointer; text-decoration: underline; }
  
  
 .teamtitle:hover {color: #000} 
  
  
  
    ul.projektfilterliste {

      
         display: flexbox;
    display: flex;
    display: -ms-flexbox;
    justify-content: space-between;
 
       justify-content: flex-end;
       /*flex-wrap: wrap;*/
      
  }
  
  
  #projektinfo-5A ul.projektfilterliste li.projektfilter {display: inline-block; padding: 0.5rem;  background: #000; color: white}
  #projektinfo-5A ul.projektfilterliste li.projektfilter.filtered {  background: white; color: black}  
  
  #coopinfo {display: none; }
  
  
  
  .Projekterlaeuterungen.trigger, #textboxtogglerLabel {
      
      /*display: inline-block;*/
      background: #000;
      background: red;
      background: none;
      color: #fff;
      color: red;
      font-weight: bold;
      padding: 0.2rem 0.4rem;
       padding: 0.2rem 0;
      right: 0;
     /* float: right;*/
  }
  
  #textboxtoggler:checked ~ div #textboxtogglerLabel {display: none}
  
  
  .mobilsubtitel {font-weight: bold; display: block; margin: 1rem 0; font-size: 1.5rem}
  
  .Bildnummer{font-size: 0.7rem}
     .BildTitel{padding-left: 0.4rem; font-size: 1.3rem; }
  
  
  
  
   li.menuactive a.menuactive {color: #333}
  
  
  
  

  
  
  
  
  
  
  @media screen and (min-width: 800px) {
      
      

        .bildframeXX .imagewrapper {opacity: 0.6; 
      
      
  }
  
      
      
       #Mainnav2 ul li a { border: none; display: block; padding: 0}
       #Mainnav2 ul li.menu_sprache a { font-size: 0.8rem}
      
      #projektinfo-5B.detailseite8 {transition: max-height 500ms, padding 200ms;  }
      #projektinfo-5B.detailseite8.texthidden {/*background: yellow;*/ max-height: 0px; overflow: hidden; 
          padding: 0 1rem;
      }
      
      .mainmenusub {height: auto}
      #thumbscontainer:hover {z-index: 1000000}
      
        .IDbildInfo, .Bildnummer,  .Bildtitel { font-weight: 600;  color: #000; }
        
        .BildTitel{font-size: 2.5rem}
      
      
      .mobilsubtitel {font-weight: bold; display: none}  
      
           .bildframeXX .screen-toggle:checked ~ .imagewrapper img.rahmenklein{
           
      padding: 10vh;
           
       }
      
      
       .bildframeXX .screen-toggle:checked ~ .imagewrapper img.rahmenmittel{
           
      padding: 20vh;
           
       }
       
             .bildframeXX .screen-toggle:checked ~ .imagewrapper img.rahmenfett{
           
      padding: 30vh;
           
       }
    
    
    
    
       #coopinfo {padding: 1em}
      
      
  #thumbscontainer, .checkboxwrapper {display: block; z-index: 1000}
 
 #projektinfo-5B.detailseite8 {/*display: none;*/ margin-top: 0.5rem;
     
     position: fixed;
   /*  max-height: calc(100vh - 15.5rem);*/
      height: auto;   
    max-height: calc(100vh - 15.5rem);
    

     overflow: auto;
 }
 
  /* #projektinfo-5B.detailseite8 h1 {display: none}*/
  #projektinfo-5B.detailseite8 .textinhalte {display: block}
 
 
 
 
 #mehrdatentoggler {display: inline-block; background: red;  color: white; margin: 0; 
 
 padding: 0.1rem 0.2rem; 
    padding: 2px 5px 2px 5px;
    
    
    line-height: 16px;
    font-weight: 600;
    
 width: 2rem; 
 cursor: pointer; 
 text-align: center}
  #mehrdatentoggler:hover {color: black; background: white}
 
  #projektinfo-5B h1 {display: block; color: red}
 
 .mainmenusub h1, .mainmenusub h2, .mainmenusub .projekttitelA, .mainmenusub .projekttitelB{
     display: inline-block; 
     background: white; 
     margin: 0; 
     padding: 0.1rem 0.3rem 0.1rem 0.5rem;
     
       padding: 2px 5px 2px 8px;
     
     
     /*height: 4.9rem;*/
 }
  .mainmenusub h1, .mainmenusub .projekttitelA {
      font-size: 2.8rem;
      font-size: 44px;
      line-height: 44px;
      
  }
 .mainmenusub h2, .mainmenusub .projekttitelB {
     font-size: 1rem; 
     font-size: 16px; 
     line-height: 16px;
     margin: 0;
     
     
     
 }
 
 
 /*menue neu*/
 #back_link {display: none}
 

  
  .logowrap2 {
     display: block;
    
 
     
   padding: 0.5rem 0.3rem 0.3rem 0.5rem ;
      padding: 9px ;
      
      height: 104px;
      height: 84px;
      height: 72px;
      width: 72px;
     /* width: 84px;*/
      
    
        background-color: rgba(255,255,255,1);
        
       
     
 }
 
   .logowrap2.logobutton {

        background-color: black;
        /* background-color: red;*/
        cursor: pointer;
 }
 
    .logowrap2.logobutton:hover {

        background-color: white;
 }
 
     .logowrap2.logobutton:hover #logo2.logobutton{

        background-image: url("http://roberope.com/uploads/images/logo/roro_rund_schwarz.svg"); 
 }
 
 
 
 
 
 
 #logo {display: none}
   #logo2 {
      display: inline-block;

    
      width: 100%; height: 100%;

      
      /*border: 1px solid orange;*/
        -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  
  background-repeat: no-repeat;
      
      background-image: url("https://arsp-architekten.eu/uploads/images/ARSP/ARSP-Bild-Marke-schwarz-kontur-weiss.svg");
         background-image: url("http://roberope.com/uploads/images/logo/roro_rund_schwarz.svg");  
         
  /*filter: blur(1px);*/
/*  filter: drop-shadow(0px 0px 1px #fff);*/
     
  }
  
  
  
  #logo2.logobutton {
         background-image: url("http://roberope.com/uploads/images/logo/roro_rund_weiss.svg"); 
  }
 
 
  #menu2 .logowrappermobile {display: none}
 
 #Mainnav2 {display: block}
 
 #menu2, #Mainnav2 ul{ 
     margin: 0;
     display: flex;
     flex-direction: row;
   /*  border: 1px solid green;*/
     align-items: flex-start;
     justify-content: flex-end;
  
 }
 
 #menu2 {background: transparent; width: auto;}
 

 
 
 #Mainnav2 ul li {
     color: white;
     background: black;
     
 }
 
  #Mainnav2 ul li.currentpage, #Mainnav2 a.currentpage   {
     color: black;
     background: white;
     
 }
 
 
 #Mainnav2 ul li {
     padding: 0.4rem;
       padding: 6px;


 }
 
  #Mainnav2 ul li, #Mainnav2 a {
  color: white;
     background: black;
     
     font-size: 1.5rem;
      font-size: 24px;
      line-height: 24px;
     font-weight: 700;
     text-transform: lowercase;
     
 }
 
 
  #Mainnav2 ul li:hover, #Mainnav2 ul li:hover a {
      color: black;
      background: white;
      
      
  }
 
 
 
 
 
 
 
 
 
 
      
      
      
      
        .showhover {display: inline-block}
      
      
      
      
        #logo {

      width: 8em; height: 8em;
      background-color: rgba(220,160,140,0.7);
          background-color: transparent;
          transition: transform 300ms;
          cursor: pointer;
        
     
        }
        
      #logo:hover{    -ms-transform: scale(1.3); /* IE 9 */
  transform: scale(1.3);
      }  
      
            .menuopen #logo:hover{    -ms-transform: scale(0.7); /* IE 9 */
  transform: scale(0.7);
      }  
      
      
      
      .snappymenu {
    scroll-snap-type: y mandatory;
      scroll-snap-type: y proximity;
      scroll-snap-type: none;
}

      
     .showhover {
         
         
       
            position: fixed; 
     

    bottom: 3rem; 
    
   background: red;
   margin: 1rem;
   
    position: absolute;
   bottom: 1rem; 
   
   
        
    /* z-index: -1000;*/
     
     border: none;
     
} 


 .showhover.titeldrunter {position: fixed}


.showhover.skipmenu {/*bottom: 1rem;
    margin: 0;*/
}


      
      #styletoggler {display: block}
      
        .bildframeXX.portfolio .showhover {font-size: 1em}
      
      
        .bildframeXX.portfolio .showhover {
           
            font-size: 0.9em;
  
              max-width: 70vw;   
            
        }
          .bildframeXX.portfolio .showhover h2 {
              font-size: 3.3em;
             
                        
       display: inline-block;
    
             
              
          }
          
               .bildframeXX.portfolio .showhover h2 a span{
    
              
          }
          
         
      
      .bildframeXX:first-of-type .showhover {bottom: 1rem;}
       .bildframeXX:first-of-type .showhover.skipmenu {bottom: 1rem;}
      
        #projektinfo {
   max-width: calc(800px - 8rem);
      
      
  }
  
    #projektinfo-5A, #projektinfo-5B {

      max-width: 600px;
      /*min-width: 400px;*/
      
  }
  
  
    #projektinfo-5A {
     margin-left: 1rem; margin-right: 1rem;
       margin-bottom: calc(100vh - 6.5rem);
        margin-bottom: calc(100vh - 100px);
         margin-bottom: calc(100vh - 116px);
         
        margin-top: 3.5rem;
         margin-top: 52px;
        
         padding-top: 1rem;
         
         padding: 0;
       
        
      /* background: transparent;*/
      
      font-size: 1rem; font-weight: 600;
      
  }
  
  
  
  
  
  
  #projektinfo-5B {
       position: sticky;
       position: fixed;
       position: absolute;
      padding: 1rem;
      margin: 1rem;
      
      z-index: 1;
      background: white;
      top: 7rem;
      z-index: 1006;
      /* border: 1px solid grey;*/
      /*box-shadow: 0px 0px 3px grey;*/
  
  }
  
  
  
  
  
    .bildframeXX.einzelprojekt:first-of-type {
      
    height: auto;
  /*border: 2px solid blue;*/
 
      
  }
  
     .bildframeXX.einzelprojekt:first-of-type .showhover{
      
   position: fixed; display: inline-block; width: auto;
   
  /*border: 2px solid blue;*/
 
      
  }
  
  
 .showhover.titeldrunter {position: absolute;}
 
  .bildframeXX.einzelprojekt .showhover  { padding: 0.2rem 0}
 
 .bildframeXX.einzelprojekt .showhover span {display: block; display: inline;  padding: 0; margin-top: 0; }
 
 


#textboxtogglerLabel, .trigger {display: none;}
  
  /* width */
#projektinfo-5B::-webkit-scrollbar {
  width: 2rem;
}

/* Track */
#projektinfo-5B::-webkit-scrollbar-track {
  background: #fff;
}

/* Handle */
#projektinfo-5B::-webkit-scrollbar-thumb {
  background: #000;
}

/* Handle on hover */
#projektinfo-5B::-webkit-scrollbar-thumb:hover {
  background: #000;
}
  
  label.checkboxwrapper {
      top: 8.45rem; 
      
        top: 120px;
          top: 120px;
        
        
      bottom: auto;   width: 72px;
      
      font-size: 16px;
      line-height: 24px;
      padding: 5px;
      text-align: center;
      z-index: 1000000;
      
  }
    
#thumbscontainer {
    top: 10.7rem;
     top: 154px;
  
bottom: auto; 
  /*top: 8.45rem;*/
/*right: 5.8rem;*/
border: none;
height: auto;

background: transparent;

    max-height: calc(100vh - 15rem);
    max-width: 50vw;
    width: 30%;
    display: block;
    
      max-width: auto;
    width: auto;
   
    width: calc(356px);
    
} 

  #thumbsbanner{display: flex;
    flex-wrap: nowrap;
    position: relative;
    align-items: flex-end;
    justify-content: flex-end;
        flex-direction: column;
       
     
    }
#thumbsbanner a { 
    
   
    border-bottom: 1px solid black;
       }

#thumbsbanner a:last-of-type { 
    
   
    border-bottom: 3rem solid black;
       }

 #thumbscontainer, #projektinfo-5B {
     /*firefox*/
     scrollbar-color: black white;

}




#thumbscontainer::-webkit-scrollbar {
  width: 3.85rem;
  width: 56px;

}

/* Track */
#thumbscontainer::-webkit-scrollbar-track {
  background: #fff;
}

/* Handle */
#thumbscontainer::-webkit-scrollbar-thumb {
  background: #000;
}

/* Handle on hover */
#thumbscontainer::-webkit-scrollbar-thumb:hover {
  background: #000;
}


   .thumbs-toggle ~ .checkboxwrapper {color: white; background: red; }

   .thumbs-toggle ~ .checkboxwrapper:hover, .thumbs-toggle ~ .checkboxwrapper:hover {color: black; background: white; }
    .thumbs-toggle:checked ~ .checkboxwrapper:hover {color: black; background: white}

    
    
  li.menuactive {display: none}
   #Mainnav2 ul li.menu_seitentitel {color: black; background: white; padding: 0; margin: 0;}
    
   footer {/*background: transparent; */} 
    
     footer {
      position: -webkit-sticky;
    position: sticky;
    
    position: relative;
    bottom: 0;
     display: block;
     height: 3rem;
          height: 4rem;

     text-align: right;
     padding: 1rem;
     font-size: 0.7em;
     color: grey;
     background: black;
     
     
     display: flexbox;
    display: flex;
    display: -ms-flexbox;
    justify-content: space-between;
     
     background: white;
     
     
     z-index:1000;
     
/*border-top: 1px solid grey;*/
     
     
 }   
    
    
    
    
    footer span {display: inline-block; height: 1rem;   /*font-size: 0.8rem;*/ padding: 0 0.3rem 0 0.3rem; }
     
     footer img{height:3rem; width: auto; padding-bottom:1rem}
    
    #container {padding: 1rem}
    
    .filteredItem {font-size: 2rem}
  
  
  ul.projektfilterliste {

      
         display: flexbox;
    display: flex;
    display: -ms-flexbox;
    justify-content: space-between;
 
       justify-content: flex-end;
       flex-wrap: wrap;
      
  }
  
   #projektinfo-5A  ul.projektfilterliste li.projektfilter#gedacht{
/*background: #66af38;*/
}
 #projektinfo-5A  ul.projektfilterliste li.projektfilter#geplant{
/*background: #749AA5;*/
}
 #projektinfo-5A  ul.projektfilterliste li.projektfilter#gebaut{
/*background: #f15b20;*/
}
  
  
  
  
  
 #projektinfo-5A  ul.projektfilterliste li.projektfilter{
      
      display: inline-block;
      padding: 0.5rem;
      
      padding: 6px;
      
      font-size: 24px;
      line-height: 24px;
      font-weight: 600;
     /* border: 1px solid blue;*/
         flex-grow: 0;
         flex-shrink: 1;
         text-align: center;
      color: #fff;
      background: #000;
      cursor: pointer;
     
      
  }
    
    
    #projektinfo-5A  ul.projektfilterliste li.projektfilter.filtered, #projektinfo-5A  ul.projektfilterliste li.projektfilter:hover {color: black; background: white}
    
    .portfoliosubtext {font-size: 1.4rem; font-weight: 600;}
    .textinhalte {font-size: 1rem; font-weight: 600;}

 
.Bildnummer {font-size: 0.8rem;}
.BildTitel {font-size: 1.5rem;}
#projektinfo-5A {z-index: 100000}

footer a {display: inline-block; padding-left: 0.4rem}

    .bildframeXX .screen-toggle:checked ~ .imagewrapper img{
 

padding: 1rem;

 }
 
      
  }