/* -------------- SCHRIFTART -------------- */

/* poppins-300 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/poppins-v15-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/poppins-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/poppins-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/poppins-v15-latin-300.woff') format('woff'), /* Modern Browsers */
         url('../fonts/poppins-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/poppins-v15-latin-300.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  /* poppins-regular - latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/poppins-v15-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  /* poppins-600 - latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins-v15-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/poppins-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/poppins-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/poppins-v15-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../fonts/poppins-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/poppins-v15-latin-600.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  /* poppins-700 - latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/poppins-v15-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/poppins-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/poppins-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/poppins-v15-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/poppins-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/poppins-v15-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
  }

html{
    font-size: 16px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #353b40 #192026;
}

html, body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
 
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    color: white;
    background-color: #192026;    
}

html::-webkit-scrollbar {
width: 14px;
height: 14px;
}

html::-webkit-scrollbar-track {
background: #192026;
}

html::-webkit-scrollbar-thumb {
background-color: #353b40 ;
}

a{
    text-decoration: none;
    color: white;
    transition: color 0.5s;
}

strong{
    font-weight: 600;
}

#badezimmerhl,
#wohnzimmerhl,
#schlafzimmerhl,
#allehl{
    display: flex;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#badezimmerhl h2,
#wohnzimmerhl h2,
#schlafzimmerhl h2,
#allehl h2{
    font-size: 12vw;
    font-weight: 700;
    letter-spacing: -0.2vw;
    opacity: 0;
    transition: opacity 0.5s, font-size 0.5s;
}

#badezimmerhl h2{color: #122330;}
#wohnzimmerhl h2{color: #102428;}
#schlafzimmerhl h2{color: #19242d;}
#allehl h2{color: #1e222b;}

.badezimmer #badezimmerhl h2,
.schlafzimmer #schlafzimmerhl h2,
.wohnzimmer #wohnzimmerhl h2,
.alle #allehl h2{
    opacity: 1;
    font-size: 13.4vw;
}

h2{
    font-weight: 700;
    color: #b1b3b5;
    font-size: 2.8rem;
    margin: 0;
}

h3{
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: baseline;
}

h3:after{
    content: '';
    border-bottom: 1px solid #ffffff;
    flex-grow: 1;
    margin-left: 0.6rem;
}


img{
    height: auto;
}

a:hover{
    color: #ffffff;
}

ul{
    list-style-type: none;
}

/* HEADER - NAVIGATION - ÜBERSICHT */

#header{
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 900;
   

    padding-left: 1.875rem;
    padding-right: 1.875rem;
    padding-top: 0.625rem;
    transition: padding 0.5s;
}

#logo{
    background-image: url('../assets/logo.svg');
    height: 3rem;
    min-width: 12rem;
    margin-right: 1rem;
    background-repeat: no-repeat;
    background-size: auto;
    transition: margin 0.5s;
}

#menu{
    display: flex;
    margin-top: 0.375rem;
}


#navigation{
    max-height: 2.5rem;
    margin: 0 1rem 0 auto;
    padding: 0;
    max-width: 6.0625rem;

    background-color:rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: max-height 0.5s, max-width 0.5s, padding-bottom 0.5s, background-color 0.5s, margin 0.5s;
    overflow: hidden;

    font-size: 1.375rem;
    font-weight: 600;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}

#navigation.hover{
    max-height: 100%;
    max-width: 100% !important;
    padding-bottom: 0.2rem;
    background-color: rgba(255, 255, 255, 0.2);
}

#navigation li a:hover,
#navigation:hover li.active a{
    color: #fff;
}

#navigation li{
    padding: 0 1rem;
    margin: 0;
    margin-top: 0.1rem;
    margin-bottom: 0.4rem;
    cursor: pointer;
    order: 2;   
}

#navigation li.active{
    order: 1;
}

#navigation a{
    margin: 0;
    padding: 0;
    color: #b1b3b5;
}

#overlaybutton,
#lupe-responsive,
#closedetails{
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s, background-color 0.5s;
    cursor: pointer;
}

#overlaybutton:hover,
#lupe-responsive:hover,
#reset:hover,
#infobutton:hover{
    background-color: rgba(255,255,255,0.2);
}

#overlaybutton.active,
#lupe-responsive.active{
    background-color: #4e5358;
}

#overlaybutton.active:hover,
#lupe-responsive:hover{
    background-color: #272d33;
}

.badezimmer #overlaybutton.active:hover,
.badezimmer #lupe-responsive.active:hover,
.showdetails.badezimmer #closedetails:hover{
    background-color: #172c3c;}

.wohnzimmer #overlaybutton.active:hover,
.wohnzimmer #lupe-responsive.active:hover,
.showdetails.wohnzimmer #closedetails:hover{
    background-color: #152d32;}

.schlafzimmer #overlaybutton.active:hover,
.schlafzimmer #lupe-responsive.active:hover,
.showdetails.schlafzimmer #closedetails:hover{
    background-color: #202d38;}

.alle #overlaybutton.active:hover,
.alle #lupe-responsive.active:hover,
.showdetails.alle #closedetails:hover{
    background-color: #272c37;}


.badezimmer #overlaybutton.active,
.badezimmer #lupe-responsive.active,
.showdetails.badezimmer #closedetails{
    background-color: #3f5462;
}

.wohnzimmer #overlaybutton.active,
.wohnzimmer #lupe-responsive.active,
.showdetails.wohnzimmer #closedetails{
    background-color: #31545b;
}

.schlafzimmer #overlaybutton.active,
.schlafzimmer #lupe-responsive.active,
.showdetails.schlafzimmer #closedetails{
    background-color: #3c5264;
}

.alle #overlaybutton.active,
.alle #lupe-responsive.active,
.showdetails.alle #closedetails{
    background-color: #3f4553;
}

#overlaybutton.active img,
#lupe-responsive.active img,
#closedetails img{
    width: 1rem;
}



#overlaybutton img,
#lupe svg,
#reset svg,
#infobutton svg{
    width: 57%;
}

#lupe-responsive svg{
    width: 41%;
    margin-left: 0.15rem;
}

#lupe{
    width: 2.5rem;
    margin-right: 1rem;
    transition: margin 0.5s;
}

#lupe svg{
fill:#192026;
}

#lupe-responsive{
    display: none;
    cursor: pointer;
}

#lupe-responsive svg{
    fill: #b1b3b5;
}


/* ---------------- SUCHLEISTE ---------------- */

#myInput,
#lupe, #lupe-responsive,
#overlaybutton{
    border: none;
    height: 2.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#myInput,
#lupe{
    display: inline-block;
}

#myInput{
    padding: 0 1rem;
    min-width: 15rem;
    width: 23.5vw;
    margin-right: 0;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 1.0625rem;
    color: white;
}

.autocomplete {
  position: relative; /*the container must be positioned relative:*/
  display: block;
  height: 2.5rem;
}

input {
  display: block;
  
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;

  transition: background-color 0.5s;
}

input[type=submit] {
  color: #b1b3b5;
  margin-right: 1rem;
  margin-left: 0;
  padding: 0 1rem;
  height: 2.5rem;
}

input:focus-visible{
    outline: none;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

input::placeholder {
    color: #b1b3b5;
}

.autocomplete-items {
  position: absolute;
  border: none;
  border-bottom: none;
  border-top: none;
  z-index: 950;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.autocomplete-items div {
  padding: 0.5rem 1rem;
  cursor: pointer;
  
  border-bottom: none;
  transition: background-color 0.5s, color 0.5s;
  color:#b1b3b5;
}

.autocomplete-items div:hover,
.autocomplete-active {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: rgba(255, 255, 255, 0.2) !important;
}


/* -------------- INHALT -------------- */


#inhalt{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    min-height: 100%;
    transition: height 0.5s;
}



#slidernavigation,
#pflanzennavigation{
    position: absolute;
    bottom: 55%;
    z-index: 60;
    width: 100%;
    height: 3rem;
    pointer-events: none;

    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    transition: top 0.5s, opacity 0.5s;
}

#slidernavigation a,
#pflanzennavigation a{
    margin: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;

    pointer-events: auto;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color:rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition: background-color 0.5s, opacity 0.5s;
}

#pflanzennavigation{
    z-index: 260;
    top: calc(100% - 5.5rem);
}

.dragup #pflanzennavigation{
    top: calc(50% + 2.2rem);
}

#pflanzennavigation a{
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#pflanzennavigation a svg{
    fill: #b1b3b5;
}

#slidernavigation a:hover{
    background-color:rgba(255, 255, 255, 0.2);
}

#slidernavigation svg,
#pflanzennavigation svg{
    width: 0.6rem;
    height: auto;
    transition: fill  0.5s, width 0.5s;
    margin-bottom: 2px;
}

#next svg{
    margin-left: 3px;
}

#previous svg{
    margin-right: 3px;
}

.fadeout{
    opacity: 0;
    pointer-events: none;
}

#slidernavigation a:hover svg,
#pflanzennavigation a:hover svg{
    fill: white;
}

#pflanzennavigation a:hover svg{
    width: 0.75rem;
}

#navdots{
    position: absolute;
    display: none;
    z-index: 60;
    gap: 0.5rem;
    height: 0.75rem;
    width: 3.25rem;

    left: calc(50% - 1.625rem);
    bottom: 1rem; 
}

.badezimmer #navdots,
.wohnzimmer #navdots,
.schlafzimmer #navdots,
.alle #navdots,
.badezimmer #slidernavigation,
.wohnzimmer #slidernavigation,
.schlafzimmer #slidernavigation,
.alle #slidernavigation{
    display: none !important;
}

.dot{
    width: 0.75rem;
    box-sizing: border-box;
    border: 1px solid #b1b3b5;
    border-radius: 50%;
    transition: background-color 0.5s;
}

.dot.activedot{
    background-color: #b1b3b5;
}

#badezimmer, #wohnzimmer, #schlafzimmer{
    width: calc(100% / 3);
    height: 100vh;
    transition: width 0.5s, height 0.5s;
    cursor: pointer;
    overflow: hidden;
} 

#alle{
    width: 100%;
    height: 0; 
    transition: height 0.5s;
    overflow: hidden;
}

#badezimmer-3d, 
#wohnzimmer-3d, 
#schlafzimmer-3d{
    width: calc(100% / 3);
    height: 100vh;
    position: absolute;
    top: 0%;
    z-index: 50;
    transition: top 0.5s, transform 0.5s, right 0.5s, left 0.5s;
}

#alle-3d{
    width: 100%;
    height: 100vh;
    transition: height 0.5s;
    overflow: hidden;
    position: relative;
    z-index: 50;
}


#badezimmer-text, 
#wohnzimmer-text, 
#schlafzimmer-text{
    margin: 0 auto;

    position: relative;
    display: block;
    box-sizing: border-box;
    top: 45%;
    height: 45%;
    z-index: 40;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 1rem;
    padding-bottom: 2rem;
    max-width: 24.5rem;
    transition: height 0.5s, opacity 0.5s;
}

#page.badezimmer #badezimmer-text,
#page.badezimmer #wohnzimmer-text, 
#page.badezimmer #schlafzimmer-text,
#page.schlafzimmer #badezimmer-text,
#page.schlafzimmer #wohnzimmer-text, 
#page.schlafzimmer #schlafzimmer-text,
#page.wohnzimmer #badezimmer-text,
#page.wohnzimmer #wohnzimmer-text, 
#page.wohnzimmer #schlafzimmer-text
#page.alle #badezimmer-text,
#page.alle #wohnzimmer-text, 
#page.alle #schlafzimmer-text{
    opacity: 0;
}


#badezimmer:hover #badezimmer-text,
#wohnzimmer:hover #wohnzimmer-text,
#schlafzimmer:hover #schlafzimmer-text{
    height: 47%;
}

#badezimmer:hover #badezimmer-text h1,
#wohnzimmer:hover #wohnzimmer-text h1,
#schlafzimmer:hover #schlafzimmer-text h1{
    color: white;
}

#badezimmer h1, 
#wohnzimmer h1, 
#schlafzimmer h1{
    font-size: 1.375rem;
    font-weight: 600;
    text-align: center;
    margin: 0rem;
    margin-bottom: 0.3rem;
    transition: color 0.5s;
}

#badezimmer p, 
#wohnzimmer p, 
#schlafzimmer p{
    font-size: 1.0625rem;
    text-align: center;
    margin: 0rem;
}

#badezimmer{background-color: #172c3c;}

#badezimmer-text{
    background-color: #122330;
    border-left: 1rem solid #172c3c;
    border-right: 1rem solid #172c3c;
}

#badezimmer h1{color: #c9d3d9;}

#badezimmer p{color: #516f83;}

#badezimmer-3d{
    background-image: url('../assets/badezimmer.png');
    background-repeat: no-repeat;
    background-position: 45% 34%;
    background-size: 95%;
}


#wohnzimmer{background-color: #152d32;}

#wohnzimmer-text{
    background-color: #102428;
    border-left: 1rem solid #152d32;
    border-right: 1rem solid #152d32;
}

#wohnzimmer h1{color: #c5d3d6;}

#wohnzimmer p{color: #3e6c75;}

#wohnzimmer-3d{
    background-image: url('../assets/wohnzimmer.png');
    background-repeat: no-repeat;
    background-position: 45% 34%;
    background-size: 95%;
}

#schlafzimmer{background-color: #202d38;}

#schlafzimmer-text{
    background-color: #19242d;
    border-left: 1rem solid #202d38;
    border-right: 1rem solid #202d38;
}

#schlafzimmer h1{color: #cad3d9;}

#schlafzimmer p{color: #547186;}

#schlafzimmer-3d{
    background-image: url('../assets/schlafzimmer.png');
    background-repeat: no-repeat;
    background-position: 45% 34%;
    background-size: 95%;
}

#alle{background-color: #272c37;}


#badezimmer:hover #badezimmer-3d,
#wohnzimmer:hover #wohnzimmer-3d,
#schlafzimmer:hover #schlafzimmer-3d{
    top: -2%;
}

.badezimmer #badezimmer:hover #badezimmer-3d,
.wohnzimmer #wohnzimmer:hover #wohnzimmer-3d,
.schlafzimmer #schlafzimmer:hover #schlafzimmer-3d{
    top: 0%;
}

/* ZIMMER AKTIV */

.badezimmer #badezimmer,
.badezimmer #badezimmer-3d,
.wohnzimmer #wohnzimmer,
.wohnzimmer #wohnzimmer-3d,
.schlafzimmer #schlafzimmer,
.schlafzimmer #schlafzimmer-3d{
    width: 100%;
    height: 100vh;
}


.alle #alle,
.alle #alle-3d{
    height: 100vh;
    min-height: 100vh;
}

.badezimmer #wohnzimmer, .badezimmer #wohnzimmer *,
.badezimmer #schlafzimmer, .badezimmer #schlafzimmer *,
.schlafzimmer #wohnzimmer, .schlafzimmer #wohnzimmer *,
.schlafzimmer #badezimmer, .schlafzimmer #badezimmer *,
.wohnzimmer #badezimmer, .wohnzimmer #badezimmer *,
.wohnzimmer #schlafzimmer, .wohnzimmer #schlafzimmer *{
    width: 0 !important;
}


.wohnzimmer #badezimmer-3d,
.schlafzimmer #badezimmer-3d,
.schlafzimmer #wohnzimmer-3d,
.alle #badezimmer-3d{
    right: 100vw !important;
}

.badezimmer #wohnzimmer-3d{
    right: -100vw !important;
}

.alle #wohnzimmer-3d{
    top: -100vh;
}


.badezimmer #badezimmer-3d,
.wohnzimmer #wohnzimmer-3d{
    right: 0 !important;
}

.badezimmer #alle,
.schlafzimmer #alle,
.wohnzimmer #alle,
.badezimmer #alle-3d *,
.schlafzimmer #alle-3d *,
.wohnzimmer #alle-3d *{
    height: 0 !important;
    width: 100%;
}



.alle #schlafzimmer,
.alle #schlafzimmer *,
.alle #wohnzimmer,
.alle #wohnzimmer *,
.alle #badezimmer,
.alle #badezimmer *{
    height: 0 !important;
    width: calc(100% / 3);
}

/* --------------PFLANZENNAVIGATION -------------- */
#pflanzennav-badezimmer,
#pflanzennav-wohnzimmer,
#pflanzennav-schlafzimmer,
#page.showdetails #pflanzennav-badezimmer,
#page.showdetails #pflanzennav-wohnzimmer,
#page.showdetails #pflanzennav-schlafzimmer,
#page.overlay #pflanzennav-badezimmer,
#page.overlay #pflanzennav-wohnzimmer,
#page.overlay #pflanzennav-schlafzimmer{
    z-index: 150;
    display: flex;
    align-items: center;
    text-align: right;
    position: absolute;
    height: 100%;
    top: 0;
    pointer-events: none;

    right: 0rem;
    opacity: 0;
    transition: opacity 0.5s, right 0.5s;
}

.badezimmer #pflanzennav-badezimmer,
.wohnzimmer #pflanzennav-wohnzimmer,
.schlafzimmer #pflanzennav-schlafzimmer{
    opacity: 1;
    pointer-events: auto;
    right: 2rem;
}

#pflanzennav-badezimmer a,
#pflanzennav-wohnzimmer a,
#pflanzennav-schlafzimmer a{
    display: block;
    font-size: 1rem;
    font-weight: 300;
    padding: 0.4rem 0;
    margin: 0;
    color: #b1b3b5;
    cursor: pointer;
    transition: font-size 0.3s, color 0.3s, font-weight 0.3s;
}

#pflanzennav-badezimmer a:hover,
#pflanzennav-wohnzimmer a:hover,
#pflanzennav-schlafzimmer a:hover,
#pflanzennav-badezimmer li.active a,
#pflanzennav-wohnzimmer li.active a,
#pflanzennav-schlafzimmer li.active a{
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
}

#details{
    z-index: 250;
     
    position: absolute;

    top: 14vh;
    max-height: calc(100% - 14vh);

    right: 1.875rem;
    pointer-events: none;
    max-width: 50%;
    transition: right 0.5s, top 0.5s, height 0.5s, opacity 0.5s;
    
    overflow-y: scroll;
    overflow-x: hidden;
}


#page.dragup #infobutton{
    bottom: calc(50% + 0.75rem);
}

#page.searchoverlay #details,
#page.overlay #details{
    top: 100%;
    opacity: 0;
}

#page.searchoverlay #infobutton{
    bottom: -4.25rem;
}

#page.searchoverlay #pflanzennavigation,
#page.overlay #pflanzennavigation{
    top: 100%;
    opacity: 0;
}



#probleme{
    box-sizing: border-box;
    width: 100%;   
}

#detailcontent{
    box-sizing: border-box;
    width: 100%;

}

.showdetails #details{
    pointer-events: auto;
}

#detailcontent,
#probleme{
    margin-top: 4rem;
    background-color: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2rem;
    padding-top: 4rem;
    opacity: 0;
    transition: opacity 0.5s, padding-top 0.5s, margin-top 0.5s;
    transition-delay: 0.45s;
}

#detailcontent img{
    height: 3.125rem;
    margin-right: 1.3rem;
    margin-bottom: 0.3rem;
}

#detailcontent h2{
    font-size: 1.625rem;
    margin-bottom: -1.2rem;
    color: #b1b3b5;
}

#detailcontent h1{
    font-size: 5vw;
    margin-top: 0;
    margin-bottom: -0.5rem;
}

#detailcontent span{
    font-weight: 400;
}

#detailcontent p{
    font-size: 1.125rem;
    font-weight: 300;
}

#pflege{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem 2rem;
    transition: opacity 0.5s;
}

#pflege>div{
    display: flex;
    align-items: center;
}

#closedetails{
    margin-left: auto;
    height: 2.5rem;
    opacity: 0;
    background-color: #192026;
}

.showdetails #detailcontent,
.showdetails #probleme{
    pointer-events: auto;
    margin-top: 1rem;
    padding-top: 2rem;
    opacity: 1;
}

.showdetails #closedetails{
    margin-top: 0rem;
    opacity: 1;
}

#detailsdunkel,
#overlaydunkel{
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.5s;  
}

#detailsdunkel{
    transition-delay: 0.5s;
    z-index: 200;
}

#overlaydunkel{
    z-index: 350;
    background-color: rgba(25, 32, 38, 0.4);
}


.overlay #overlaydunkel,
.searchoverlay #overlaydunkel,
.showdetails #detailsdunkel{
    opacity: 1;
    pointer-events: auto;
}

.badezimmer #overlaydunkel{background-color: rgba(33, 44, 60, 0.4);}
.wohnzimmer #overlaydunkel{background-color: rgba(21, 45, 50, 0.4);}
.schlafzimmer #overlaydunkel{background-color: rgba(32, 45, 56, 0.4);}
.alle #overlaydunkel{background-color: rgba(39, 44, 55, 0.4);}

.badezimmer #detailsdunkel{background-image: linear-gradient(90deg, rgba(33, 44, 60, 0) 20%, rgba(33, 44, 60, 0.5) 100%);}
.wohnzimmer #detailsdunkel{background-image: linear-gradient(90deg, rgba(21, 45, 50, 0) 20%, rgba(21, 45, 50, 0.5) 100%);}
.schlafzimmer #detailsdunkel{background-image: linear-gradient(90deg, rgba(32, 45, 56, 0) 20%, rgba(32, 45, 56, 0.5) 100%);}
.alle #detailsdunkel{background-image: linear-gradient(90deg, rgba(39, 44, 55, 0) 20%, rgba(39, 44, 55, 0.5) 100%);}

#probleme{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

#probleme>div{
    width: calc(50% - 0.5rem);
}

h5{
    display: flex;
    justify-content: space-between;
    font-weight: 400;    
    font-size: 1.06rem;
    padding: 0.5rem 1.1rem 0.6rem 1rem;
    margin: 0;
    cursor: pointer;
    color: #b1b3b5;
    transition: background-color 0.5s;
}

h5:after{
    content: url(../assets/arrow.svg);
    transform: rotate(180deg);
    width: 1.1rem;
    transition: transform 0.5s;
}

.accordionactive h5:after{
    transform: rotate(0deg);
}

.accordion-content{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
    background-color: rgba(255, 255, 255, 0.05);
}

#probleme p{
    font-weight: 300;
    font-size: 1.06rem;
    margin: 0;
    padding: 1rem 1rem;
    color: #b1b3b5;
}

.badezimmer h5{background-color: #172c3c;}
.wohnzimmer h5{background-color: #152d32;}
.schlafzimmer h5{background-color: #202d38;}
.alle h5{background-color: #272c37;}

.badezimmer h5:hover{background-color: #3f5462;}
.wohnzimmer h5:hover{background-color: #31545b;}
.schlafzimmer h5:hover{background-color: #3c5264;}
.alle h5:hover{background-color: #3f4553;}


/* ---------- OVERLAY ---------- */

#overlay{
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 0.8fr 1.4fr 0.8fr;
    justify-items: stretch;
    grid-gap: 1rem;
    z-index: 400;
    width: calc(100% - 4rem);
    position: absolute;
    top: 4.5rem;
    left: 2rem; 
    pointer-events: none; 
    height: calc(100vh - 4.5rem);
    overflow-Y: scroll;
    padding-bottom: 2rem;
    transition: grid-gap 0.5s, width 0.5s, top 0.5s, left 0.5s, padding 0.5s;
}

#overlay::-webkit-scrollbar,
#details::-webkit-scrollbar {
    display: none;
}

#overlay{
    -ms-overflow-style: none;  /* IE and Edge */ 
    scrollbar-width: none;  /* Firefox */
}

#overlay>div{
    background-color: rgba(255, 255, 255, 0.2);
    padding: 2rem;
    padding-top: 3rem;
    margin-top: 3rem;
    opacity: 0;
    transition: opacity 0.5s, padding 0.5s, margin-top 0.5s;
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
    #overlay>div {
      background-color: rgba(255, 255, 255, 0.1);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
}

.overlay #overlay>div{
    opacity: 1;
    padding-top: 1rem;
    margin-top: 0;
}

#overlay>div>div{
    box-sizing: border-box;
    max-height: 0;
    flex-wrap: wrap;
    transition: max-height 0.5s, margin 0.5s, opacity 0.5s;

    margin-top: 1rem;
    opacity: 0;
}

.overlay #overlay>div>div{
    max-height: 100%;
    margin-top: 0; 
    opacity: 1; 
}

.overlay #overlay{
    pointer-events: auto;
}

#alphabetisch{
    grid-row-end: span 2;
}

#alphabetisch>div, 
#lichtbedarf>div,
#lufterfrischend>div{
    display: flex;
    gap: 1.6rem;
}

#lichtbedarf>div>div{
    min-width: calc(25% - 1.2rem);
}

#alphabetisch>div>div,
#lichtbedarf>div>div,
#lufterfrischend>div>div{
    flex-grow: 1;
}

#lufterfrischend>div>div{
    max-width: calc(50% - 0.8rem);
}

#schadstoffe{
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.6rem;
}

#schadstoffe li{
    min-width: calc(50% - 0.8rem);
}

#giftigkeit>div{
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}

#giftigkeit>div>div{
    min-width: calc(50% - 0.8rem);
}

#steuerung h3{
    margin-top: 0.6rem;
    margin-bottom: 0.5rem;
}

#steuerung>div{
    display: flex;
    column-gap: 0.8rem;
    row-gap: 1.6rem;
}

#steuerung>div>div{
    flex-grow: 1;
}

#steuerung>div>div>div{
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

#steuerung svg{
    display: inline-block;
    max-width: 1.5rem;
    fill: white;
    transition: fill 0.5s;
}

#overlay ul{
    padding: 0;
    margin: 0;
}

#steuerung p{
    display: inline-block;
    margin: 0;
    font-weight: 300;
}

#overlay h2{
    margin-top: 0.2rem;
}

h4{
    font-weight: 600;
    margin: 0;
    margin-bottom: 0.3rem;
}

#overlay li{
    font-size: 1.0625rem;
    color: #b1b3b5;
    font-weight: 400;
    transition: color 0.5s;
    cursor: pointer;
    padding: 0.15rem 0;
}

#overlay li:hover{
    color: white;
}

#overlay img{
    height: 3.125rem;
    margin-right: 1.1rem;
    margin-bottom: -0.5rem;
    transition: margin 0.5s;
}



/* -------------- RESET-BUTTON -------------- */
#reset,
#page.overlay #reset,
#infobutton,
#page.overlay #infobutton{
    position: absolute;
    width: 4.25rem;
    height: 4.25rem;
    
    bottom: -2rem;
    background-color: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: bottom 0.5s, left 0.5s, top 0.5s, background-color 0.5s, opacity 0.5s;
}

#reset,
#page.overlay #reset{
    left: 1rem;
}

#infobutton,
#page.overlay #infobutton{
    right: 1rem;
}

#infobutton{
    display: none;
}

.badezimmer #reset,
.schlafzimmer #reset,
.wohnzimmer #reset,
.alle #reset,
.badezimmer #infobutton,
.schlafzimmer #infobutton,
.wohnzimmer #infobutton,
.alle #infobutton{
    opacity: 1;
    bottom: 1rem;
    pointer-events: auto;
}

#reset p,
#infobutton p{
   color: #b1b3b5;
   font-size: 0.875rem;
   font-weight: 300;
   font-family: 'Poppins';
   margin: 0;
   transition: color 0.5s;
   line-height: 1.25;
}

button:focus-visible{
    outline: none;
}

#reset:hover p,
#infobutton:hover p{
    color: white;
}

#reset svg,
#infobutton svg{
    fill:#b1b3b5;
    transition: fill 0.5s;
}

#reset:hover svg,
#infobutton:hover svg{
    fill:white;
}

/* -------------- CONTROLS -------------- */
#controlbuttons,
#page.showdetails #controlbuttons,
#page.overlay #controlbuttons{
    position: absolute;
    z-index: 100;
    right: 0rem;
    bottom: -2rem;
    width: 5rem;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s, bottom 0.5s;
}

.badezimmer #controlbuttons,
.wohnzimmer #controlbuttons,
.schlafzimmer #controlbuttons,
.alle #controlbuttons{
    bottom: 1rem;
    opacity: 1;
}

#controlbuttons > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 2rem;
}

#controlbuttons p{
    font-size: 0.9375rem;
    font-weight: 300;
    margin: 0.5rem 0 0 0;
    text-align: center;
    color: #b1b3b5;
    transition: color 0.5s;
}

.badezimmer #controlbuttons p{color: #516f83;}
.wohnzimmer #controlbuttons p{color: #3e6c75;}
.schlafzimmer #controlbuttons p{color: #547186;}
.alle #controlbuttons p{color: #4b5161;}


#controlbuttons svg{
    width: 1.54rem;
    fill: #b1b3b5;
    transition: fill 0.5s;
}



.badezimmer #controlbuttons svg{fill: #516f83;}
.wohnzimmer #controlbuttons svg{fill: #3e6c75;}
.schlafzimmer #controlbuttons svg{fill: #547186;}
.alle #controlbuttons svg{fill: #4b5161;}


/* -------------- FOOTER -------------- */

footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding-left: 1.875rem;
    padding-right: 1.875rem;
    transition: padding 0.5s;
}

footer>div{
   width: calc(100%/3);
}

footer>div p{
    display: flex;
    gap: 0.8rem;
    align-items: center;
 }

 footer>div a{
     display: flex;
     gap: 0.75rem;
     align-items: center;
     
 }

footer>div:last-child p{
    justify-content: flex-end;
}

footer>div:nth-child(2) p{
    justify-content: center;
 }


footer>div:first-child p{
    justify-content: flex-start;
}

footer svg{
    display: inline-block;
    height: 1.54rem;
    stroke: #8c8f92;
    stroke-width: 1px;
    fill: none;
    transition: stroke 0.5s;
}

footer #mailbutton{
    width: 1.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

footer #backtotopbutton{
    width: 0.75rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #8c8f92;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border 0.5s, stroke 0.5s;
}

footer a, footer p{
    font-size: 0.875rem;
}

footer a{
    color: #8c8f92;
}

footer a:hover{
    color: #b1b3b5;
}

footer a:hover #backtotopbutton{
    border-color: #b1b3b5;  
}

footer a:hover svg{
    stroke: #b1b3b5;
}

footer p{
    color: #5e6367;
}


/* Responsivität */

@media screen and (max-width: 1888px){

    #overlay{
        grid-template-columns: 0.9fr 1.4fr 0.9fr;
    }

    #lichtbedarf>div>div{
        width: calc(25% - 1.2rem); 
    }

    #lufterfrischend>div>div {
        width: calc(50% - 1.2rem); 
    }

    #lichtbedarf>div>div:nth-child(2)>ul,
    #lichtbedarf>div>div:nth-child(3)>ul{
        display: flex;
        flex-wrap: wrap;
        gap: 0 1.6rem;
    }

    #lichtbedarf>div>div:nth-child(2)>ul li,
    #lichtbedarf>div>div:nth-child(3)>ul li{
       width: 100%;
    }

    #steuerung>div>div{
        max-width: 33%;
    }
    
}


@media screen and (max-width: 1750px){

    #overlay{
        grid-template-columns: 1fr 1fr 1fr;
    }

    #alphabetisch{
        grid-row-end: 1;
    }

    #lufterfrischend{
        grid-column-start: span 2;
    }
    
    #lichtbedarf>div>div{
        width: calc(50% - 1.2rem); 
    }
}


@media screen and (max-width: 1494px){
    #overlay{
        grid-template-columns: 1fr 1fr;
    }

    #pflege{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0 1rem;
    }

    #details{
        top: 5.4rem;
    }

    #page #detailcontent{
        padding-bottom: 1rem;      
    }

    #page #probleme{
        padding-top: 2rem;
        margin-top: 1rem;
        margin-bottom: 1.875rem;
    }

    #probleme>div{
        width: 100%;
    }


    #lufterfrischend{
        grid-column-start: span 1;
    }

    #lufterfrischend>div>div {
        min-width: 100%; 
    }

    #steuerung{
        grid-column-start: span 2;
    }

    #steuerung>div>div>div {
        align-items: center;
    }

    #steuerung>div>div:nth-child(1){order: 1;}
    #steuerung>div>div:nth-child(2){order: 3;}
    #steuerung>div>div:nth-child(3){order: 2;}

    #steuerung p>br{  
        display: none;
    }
}

@media screen and (max-width: 1040px){
    #overlay{
        grid-template-columns: 1fr;
    }

    #steuerung{
        grid-column-start: span 1;
    }

    #lichtbedarf>div>div{
        max-width: calc(25% - 1.2rem);
    }

    #giftigkeit>div>div{
        min-width: calc(25% - 1.2rem);
    }

    #lufterfrischend>div>div{
        min-width: calc(50% - 0.8rem);
    }

}


@media screen and (max-width: 855px){
    form{
        display: block;
        position: absolute;
        left: 0.75rem;
        width: calc(100% - 3.5rem);
        transition: top 0.5s, opacity 0.5s;

        pointer-events: none;
        opacity: 0;
        top: 5.3rem;
    }

    #page.searchoverlay form{
        pointer-events: auto;
        opacity: 1;
        top: 4.3rem;  
    }
    
    form #myInput{
        width: calc(100% + 2rem);
        box-sizing: border-box;
    }

    #page.searchoverlay .autocomplete-items{
        width: calc(100% + 2rem);
    }
    
    #page.searchoverlay .autocomplete-items>div{
        padding-top: 1rem;
        padding-bottom: 1.1rem;
    }

    #lupe-responsive{
    display: flex;
    }

    #lupe{
        display: none;
    }

    #overlay{
        grid-gap: 0.75rem;
        width: calc(100% - 1.5rem);   
        top: 4.25rem;
        left: 0.75rem; 
        overflow-Y: scroll;
        padding-bottom: 1rem;
    }

    #overlay>div {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #header{
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    #navigation{
        max-width: 5.56rem;
        z-index: 960;
    }

    #details {
        right: 0.75rem;
        max-width: 50%;
    }

    #page.showdetails #detailcontent,
    #page.showdetails #probleme,
    #detailcontent,
    #probleme{
        padding: 1rem;
    }

    #reset{
        left: 0.75rem
    }

    #infobutton{ 
        right: 0.75rem;
    }

    #lupe, #lupe-responsive, #navigation{
        margin-right: 0.75rem;  
    }

    #navigation li{
        padding: 0 0.75rem;
    }

    footer{
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media screen and (max-width: 775px){
    /*ACCORDION*/

    #overlay{    
        max-height: 100%;
        overflow: scroll;
    }

    #page.overlay #overlay{
        height: fit-content;
        max-height: calc(100% - 4.25rem);
    }

    #overlay>div{
        height: 3rem;
        cursor: pointer;
        overflow: hidden;
    }

    #overlay #steuerung{
        height: fit-content;
    }
  

    #overlay>div.open{
        height: 100%;   
    }

    #overlay>div.open>div{
        margin-top: 0; 
        opacity: 1;  
    }

    #overlay>div.open>div{
        display: flex;
    }

    
    
    /*ACCORDION ENDE*/


    #lichtbedarf>div>div{
        max-width: calc(50% - 0.8rem);
    }

    #giftigkeit>div>div{
        min-width: calc(50% - 0.8rem);
    }

    #lufterfrischend>div>div{
        min-width: 100%;
    }

}

@media screen and (max-width: 660px){

    footer>div:first-child span{
        display: none;
    }

    footer>div:first-child a:after{
        content: 'kontakt'; 
        cursor: pointer;  
        transition: color 0.5s;
    }

    footer>div:first-child:hover a:after{
        color: #b1b3b5; 
    }
}


@media screen and (max-width: 532px){
    #logo{
        background-image: url('../assets/signet.svg');
        min-width: 2.5rem;
        margin-right: 0.75rem;
    }

    footer{
        flex-wrap: wrap; 
    }

    footer>div{
        width: 50%;
    }

    footer>div:nth-child(2){
        width: 100%;
        order: 3;
    }
    
}

@media screen and (max-width: 482px){
    #overlay h2{
        font-size: 8.3vw; 
    }

    #overlay img{
        margin-right: 0.8rem;
        margin-bottom: -0.9rem;
    }


}

@media screen and (max-width: 396px){
    #lichtbedarf>div>div{
        min-width: 100%;
    }

    #giftigkeit>div>div{
        min-width: 100%;
    }
}

@media screen and (max-width: 768px), screen and (orientation: portrait){

    #inhalt {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    #inhalt::-webkit-scrollbar{
        display: none;
    }
  
    #inhalt{
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #infobutton{
        display: block;
    }

    #reset{
        display: none;
    }

    #steuerung{
        display: none;
    }

    #page.dragup #details{
        top: 50%;
        height: 50%;
    }
    
    #slidernavigation,
    .badezimmer #pflanzennavigation,
    .wohnzimmer #pflanzennavigation,
    .schlafzimmer #pflanzennavigation,
    .alle #pflanzennavigation{
        display: flex;
    }

    #slidernavigation svg,
    #pflanzennavigation svg{
        fill: #b1b3b5;
    }



    #badezimmer, #wohnzimmer, #schlafzimmer{
        min-width: 100%;
    }

    .badezimmer #badezimmer,
    .wohnzimmer #wohnzimmer,
    .schlafzimmer #schlafzimmer{
        min-width: 100%;
    }

    
    #badezimmer-3d, #wohnzimmer-3d, #schlafzimmer-3d{
        width: 100%;
        position: relative;
        top: -45%;
    }

    #badezimmer:hover #badezimmer-3d, 
    #wohnzimmer:hover #wohnzimmer-3d, 
    #schlafzimmer:hover #schlafzimmer-3d {
        top: -48%;
    }

    .badezimmer #badezimmer:hover #badezimmer-3d,
    .wohnzimmer #wohnzimmer:hover #wohnzimmer-3d,
    .schlafzimmer #schlafzimmer:hover #schlafzimmer-3d{
    top: -47%;
    }


    .badezimmer #pflanzennav-badezimmer, 
    .wohnzimmer #pflanzennav-wohnzimmer, 
    .schlafzimmer #pflanzennav-schlafzimmer {
        opacity: 0;
        pointer-events: none;
        right: 0;
    }

    .badezimmer #controlbuttons, 
    .wohnzimmer #controlbuttons, 
    .schlafzimmer #controlbuttons, 
    .alle #controlbuttons{
        bottom: -2rem;
        opacity: 0;
    }

    #page.showdetails #detailsdunkel{
        display: none;
    }
    

    #closedetails{
        display: none;
    }

    #details{
        top: calc(100vh + 2rem);
        opacity: 0;
        pointer-events: none;

        width: 100%;
        max-width: 100%;
        left: 0;
        display: block;
        
        overflow-y: scroll;
        overflow-x: hidden;
        
        height: calc(7rem + (100vh - 100%));
    }

    .badezimmer #details,
    .wohnzimmer #details,
    .schlafzimmer #details,
    .alle #details{
        top: calc(100% - 7rem); /* 100% - Höhe #details */
        opacity: 1;
        pointer-events: auto; 
        overflow-y: hidden;
    }

    #page.dragup.badezimmer #details,
    #page.dragup.wohnzimmer #details,
    #page.dragup.schlafzimmer #details,
    #page.dragup.alle #details{
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .badezimmer #reset,
    .wohnzimmer #reset,
    .schlafzimmer #reset,
    .alle #reset,
    .badezimmer #infobutton,
    .wohnzimmer #infobutton,
    .schlafzimmer #infobutton,
    .alle #infobutton{
        bottom: calc(7rem + 0.75rem); /* Höhe #details + 0.75rem*/
    }

    #page.badezimmer #detailcontent,
    #page.wohnzimmer #detailcontent,
    #page.schlafzimmer #detailcontent,
    #page.alle #detailcontent,
    #page.badezimmer #probleme,
    #page.wohnzimmer #probleme,
    #page.schlafzimmer #probleme,
    #page.alle #probleme{
        pointer-events: auto;
        padding-top: 2rem;
        opacity: 1;
        width: 100%;
    }

    #page.badezimmer #pflege,
    #page.wohnzimmer #pflege,
    #page.schlafzimmer #pflege,
    #page.alle #pflege,
    #page.badezimmer #probleme,
    #page.wohnzimmer #probleme,
    #page.schlafzimmer #probleme,
    #page.alle #probleme{
        opacity: 0;
    }

    #page.dragup #pflege,
    #page.dragup #probleme{
        opacity: 1;
    }

    #page #pflege{
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 0.75rem;
        align-items: center;
        justify-content: center;
    }

    #pflege>div{
        display: inline-flex;
        width: 45%;
        height: 100%;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    #detailcontent img{
        margin-right: 0;
        margin-bottom: 0;
    }

    #detailcontent{
        margin-top: 0;
    }

    #detailcontent h1{
        margin-top: -1rem;
        font-size: 2rem;
        text-align: center;
    }

    #detailcontent h2{
        text-align: center;
        margin-top: 0.3rem;
        font-size: 1.3rem;
        margin-bottom: 2rem;
    }

    .showdetails #detailcontent{
        margin-top: 0;
    }

    #probleme{
        margin-top: 1rem;
    }


    footer>div{
        width: auto;
    }

}


@media screen and (max-width: 640px) and (orientation: landscape),
screen and (max-height: 360px) and (orientation: landscape){
    #page:not(.searchoverlay)>div{
      display: none !important;
    }

    #page:not(.searchoverlay):before{
        box-sizing: border-box;
        content: 'Mobilgerät bitte drehen oder Browserfenster vergrößern.';
        text-align: center;
        font-size: 1.125rem;
        position: relative;
        display: flex;
        padding-top: 1.8rem;
        padding: 1.8rem 1rem 0;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 3.91rem);
        color: white;
    }
}