*,
*:before,
*:after {
   box-sizing: border-box;
}
:root {
  --scrollbarBG: #CFD8DC;
  --weiss: #ffffff;
  --blau: #005eaa;
  --orange: #e56b00;
  --blaugruen: #30abab;
  --rot: #b80000;
  --grau: #e8e8e6;
}
html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #1b2d71 #CFD8DC;
}
body::-webkit-scrollbar {
  width: 7px;
}
body::-webkit-scrollbar-track {
  background:  #e8e8e6;
}
/* scrollbar*/
body::-webkit-scrollbar-thumb {
  background-color: #1b2d71;
  border-radius: 6px;
  /*  border: 1.5px solid var(--scrollbarBG);*/
}
body{
    margin: 0;
    position: relative;
    height: 100% !important;
    overflow: hidden; 
    background: #fff;
}

h2 {
    color:#fff;
    font-size: 1em;
    text-align: center;
}

a{
    text-decoration: none;
    color: #1b2d71 !important;
    
}
a:hover{
    text-decoration: none;
    color: #749d1d !important;
    
}
.content{
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 90vh;
}
header {
    width: 100%;
    height: 10%;
}
.flex{
    display: flex;
    flex-wrap: wrap;
}
.space_between{
    justify-content: space-between;
}
.mitte {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.baeume {
    width: 14vw;
    display: block;
   margin: 7.5vh 0 2vh 6.4vw;
}

.inhalt {
    width: 100%;
    height: 90%;
    display: flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content: space-between;
}
#start .inhalt {
    justify-content: space-around;
}
footer{
    width: 100%;
    height: 10.5vh;
    position: absolute;
    left: 0;
    bottom: 0;
}
/*footer p {
    color:#1b2d71;
}
footer a {
    color:#1b2d71;
}*/
nav{
    width: 90%;
    margin: 6vh auto 0;
    display: flex;
    align-items:center;
    justify-content: space-between;
    font-size: 12px;
}
.active{
    color: #666!important;
}
#start .inhalt{
    background:  url("../images/hintergrund_01.jpg") no-repeat center ;
    background-size: 100% 100%;
}
#seite_eins .inhalt{
    background:  url("../images/hintergrund_blume.jpg") no-repeat center ;
    background-size: 100% 100%;
}
#seite_zwei .inhalt{
    background:  url("../images/hintergrund_hobel.jpg") no-repeat center ;
    background-size: 100% 100%;
}
#seite_drei .inhalt{
    background:  url("../images/hintergrund_01.jpg") no-repeat center ;
    background-size: 100% 100%;
}
.raute {
    width:5vw;
    position: relative;
    top:5vh;
    display: block;
}
#start .raute, #seite_drei .raute {
 margin: 0 auto; 
}
#seite_eins .raute {
    margin: 0 0 0 76.5vw;
}
.logo {
    width: 25vw;
    position: relative;
    top: 6vh;
    z-index: 2;
}
.blume{
    height: 10vh;
    width: auto;
     margin-left: 2vw;
}
.hobel{
   height: 10vh;
    width: auto;
    margin-left: 1vw;
}
#start .links h2{
  margin: 0 0 0 1vw;
/*     color: white;   Fallback: assume this color ON TOP of image 
    background: url(../images/garten_02.jpg)  center center repeat;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;*/
    font-size: 2vw;
}
#start .rechts h2{
  margin: 0 1vw 0 0;
    font-size: 1.5em;
/*     color: white;   Fallback: assume this color ON TOP of image 
    background: url(../images/handwerk_01.jpg)   right 150px repeat;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;*/
    font-size: 2vw;
}
#seite_eins .links {
    width: 73vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
}

#seite_eins .logo {
 
}
#seite_eins .mitte {
    width: 10vw;
}
#seite_eins .rechts
{
    width: 17vw;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.splide__track,.gall,.slick-list{
    height: 100%;
    position: relative;
    padding: 0;
}
.gall{
    display: block;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
}
.slick-loading .slick-list
{
    background: #fff url('../images/loading.gif') center center no-repeat;
}
.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
}
.slick-track{
    height: 92%;
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-slide{
    float: left;
}
.slick-dots{
    bottom: 20px;
    position: absolute;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li{
    height: 10px;
    width: 10px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0 !important;
    border-radius: 5px !important;
    outline: none;
    background: #e2e2e2 !important;
    box-shadow: inset 3px 3px 6px #c0c0c0, 
            inset -3px -3px 6px #ffffff;
}
.slick-dots .slick-active button{
    box-shadow: inset 1px 1px 2px #1f1f1f, 
            inset -1px -1px 2px #2b2b2b;
    border-color: transparent !important;
}
.slick-dots li button:hover,.slick-dots li button:focus{
    box-shadow: inset 1px 1px 2px #1f1f1f, 
            inset -1px -1px 2px #2b2b2b !important;
}
.slick-arrow{
    font-size: 0;
    line-height: 0;
    position: absolute;
    padding: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    width: 40px !important;
    height: 40px;
    top: auto;
    bottom: -10px;
    border: none;
    outline: none;
    background-color: transparent !important;
    z-index: 1;
}
.slick-prev::before {
    content: '\2190';
}
.slick-prev::before, .slick-next::before {
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev{
    left: 30%;
}
.slick-next::before {
    content: '\2192';
}
.slick-next{
    right: 30%;
}
.nummer_container{
    width: 100%;
    overflow: hidden;
    height: 100%;
    position: absolute;
}
.nummer{
    width: 73vw;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.nummer img{
     image-orientation: from-image;
     max-height: 100%;
     width: auto;
     max-width: 100%;
}
#seite_zwei .rechts {
    width: 73vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%
}
.bildcontainer {
   width: 65%;
    height: 58vh;
}
#seite_zwei .logo {
 
}
#seite_zwei .mitte {
    width: 10vw;
}
#seite_zwei .links
{
    width: 14.6vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#seite_zwei .raute {
    margin: 0 0 0 19.5vw;
}



.pfeil {
   width: auto;
height: 5vh;
}

#seite_drei .inhalt
{
  align-items: flex-start;
}
.imprint p{
    font-size: 0.7em;
    color: #666;
    margin: 5% 0 0 5%;
}


.datenschutz p{
    font-size: 0.7em;
    color: #666;
      margin: 5% 5% 0 0;
}
#seite_drei .links, #seite_drei .rechts {
    width: 36vw;
}
#seite_drei .links
{   display: flex;
    align-items: center;
    justify-content: flex-start;
}
#seite_drei .rechts
{   display: flex;
    align-items: center;
    justify-content: flex-end;
}
/*.wechsel {
    position: relative;
  height: 58vh;
  overflow:hidden;
}
.galerie {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
} 
.bildertitel{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 20vh;
    color:#fff;
    font-size: 5vh;
    font-weight: bold;
}

.galerie:first-of-type {
    animation:wechsel_1 10s infinite;
}
   @keyframes wechsel_1
   {
       0% {opacity:1;}
       30% {opacity:1;}
       33% {opacity:0;}
       100% {opacity:0;}
   }
.galerie:nth-of-type(2){
    animation:wechsel_2 10s infinite;
}
   @keyframes wechsel_2
   {
       0% {opacity:0;}
       30% {opacity:0;}
       33% {opacity:1;}
       63% {opacity:1;}
       66% {opacity:0;}
       100% {opacity:0;}
   }
   
   .galerie:nth-of-type(3){
    animation:wechsel_3 10s infinite;
}
   @keyframes wechsel_3
   {
       0% {opacity:0;}
       30% {opacity:0;}
       63% {opacity:0;}
       66% {opacity:1;}
       97% {opacity:1;}
       100% {opacity:0;}
   }
   #garten-galerie, #handwerk-galerie {
       position: absolute;
       top: 0;
       left: 0;
       display: none;
       z-index: 2;
       background: rgba(0,0,0,0.9);
       width: 100%;
       height: 100%;
           
   }
   #handwerk_init, #garten_init{
       cursor: pointer;
   }*/
   #login {
       width: 500px;
       height: 400px;
       margin: 10vh auto 0;
   }
   .login{
       margin: 0 0 0 10vw;
   }
   .login input{
       width: 250px;
       margin-bottom: 15px;
   }
   #bearbeiten{
    overflow: scroll;
        background: #ecf0f3;
        font-family: 'IBM Plex Sans Condensed', sans-serif;
        width: 100vw;
}
#bearbeiten #mitte{
    width: 80vw;
    margin: 0 auto;
    padding-bottom: 5vh;
}

   .del_thumb {
       width: auto;
       height: 80px;
       margin: 20px auto;
       display: block;
       image-orientation: from-image;
   }
   .kleineBilder {
       display: flex;
       margin:10px;
       flex-wrap:wrap;
       justify-content: space-between;
   }
   .display_none{
       display: none;
   }
   .name
   {
        margin: 20px;
        font-size: 0.8em;
        box-shadow: 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #ffffff inset;
        padding: 48px 64px;
        border-radius: 16px;
        background: #ecf0f3;
        width: 30%;
   }
   #bearbeiten input,#bearbeiten select{
        position: relative;
        border-radius: 5px;
        height: 30px;
        box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
        overflow: hidden;
        cursor: pointer;
        background: #ecf0f3;
        transform: scale(1);
        transition:all 0.2s ease;
   }
   #bearbeiten input[type="submit"]:hover{
       transform: scale(1.02) translateY(-2px);
   }
   #bearbeiten input:active{
       box-shadow: 8px 4px 8px 0px #ffffff, -8px -4px 12px 0px #d1d9e6;
   }
   #bearbeiten input[type="file"]{
       padding: 5px 0 0 3px;
       margin: 0 0 0 30px;
   }
   #bearbeiten h1{
       margin: 30px 0 0 30px;
   }
   #bearbeiten h2{
       margin: 20px 0 20px 30px;
       text-align: left;
        color: #333;
   }
   .reihe input{
       width: 85px;
   }
   #rename{
       margin-bottom: 10px;
   }
   #bearbeiten select{
        width: 100px;
        margin: 10px 0 50px 0
   }
   #rename input[type="text"],#bearbeiten select{
       margin-right: 15px;
   }
   .logout{
       max-width: 620px;
   }
/*  ------ */
@media only screen
and (max-width:1370px){
	
	#seite_drei .inhalt {
    overflow: scroll;}
}  
}
 @media only screen
and (max-width:1195px)
{
   .logo{
        top: 0vh;
    } 
    #start .baeume
    {margin: 10.5vh 0 6vh 5.4vw;
    }
    .baeume{
        margin-left: 6vw;
    }
@media only screen
and (max-width:1025px)
{
    
    
    .bildcontainer, .wechsel{
        height: 47vh;
    }
    .logo{
        top: -1vh;
    }
    
    .slick-next{
        right: 10%
    }
    .slick-prev{
        left: 10%;
    }
    .name{
        margin: 10px;;
        padding: 10px;
        width: 45%;
    }
    #bearbeiten #mitte{
    width: 100vw;
    } 
}
@media only screen
and (max-width:850px){   
    .logo {
    width: 20vw;
    }
    #start .baeume{
        margin-left: 3.3vw;
    }
    .baeume
    {margin: 2vh 0 3vh 4.6vw;}
    .bildcontainer, .wechsel{
        height: 47vh;
    }
    .bildertitel{
        top: 15vh;
    }
 #start .rechts h2, #start .links h2 {
    font-size: 1em;
    }
.hobel {
    height: 15vh;
    margin-left: 4vw;
    }
    .blume {
    height: 15vh;
   margin-left: 5vw;
    }
    nav {
    width: 400px;
    margin: 0 auto 0;
    font-size: 12px;
}
#seite_eins .baeume {
    margin: 2vh 0 3vh 3.4vw;
}
#seite_zwei .baeume {
    margin: 2vh 0 3vh 3.4vw;
}  
}
@media only screen
and (max-width:750px)
{
.baeume,  #seite_eins .baeume, #seite_zwei .baeume  {
    margin: 8vh 0 3vh 4.6vw;
    }
    #seite_eins .baeume {
   margin: 8vh 0 3vh 3.4vw;
}
#seite_zwei .baeume {
    margin: 8vh 0 3vh 3.4vw;
}
}
@media only screen
and (max-width:768px)
and (orientation:portrait)
{
     .logo {
    width: 35vw;
    }
    .baeume
    {margin: 15vh 0 6vh 4.6vw;
     width: 25vw;
    }
    
    .bildcontainer, .wechsel{
        height: 25vh;
    }
    .bildertitel{
        top: 15%;
    }
 #start .rechts h2, #start .links h2 {
    font-size: 1em;
    }
.hobel {
    height: 9vh;
    margin-left: 0vw;
    }
  .blume {
    height: 9vh;
   margin-left: 5vw;
    }
    nav {
    width: 380px;
    margin: 4vh auto 0;
    font-size: 12px;
}
#seite_eins .baeume {
    margin: 19vh 0 6vh 3.4vw;
    width: 20vw;
}
#seite_zwei .baeume {
    margin: 19vh 0 6vh 3.4vw;
    width: 20vw;
}
#seite_drei .baeume {
    margin: 19vh 0 6vh 3.4vw;
    width: 20vw;
}
.raute {
    width: 9vw;
    top: 4vh;
    }
    
   #seite_eins .logo, #seite_zwei .logo, #seite_drei .logo{
    width: 25vw;
}
 #seite_zwei .raute {
    margin: 0 0 0 17vw;
}
#seite_eins .raute {
    margin: 0 0 0 74vw;
}
#seite_drei .pfeil{
    display: none;
    }
}
@media only screen
and (max-width:450px){
    .logo {
    z-index: 2;
    position: relative;
    }
    .inhalt{
        height: 80%;
    }
   .baeume
    {margin: 22vh 0 6vh 7.6vw;
     width: 25vw;
    }
   #seite_eins .baeume {
    margin: 22vh 0 6vh 3.4vw;
    width: 20vw;
}
    #seite_zwei .baeume {
    margin: 22vh 0 6vh 3.4vw;
    width: 20vw;
}
    #seite_drei .baeume {
    margin: 22vh 0 6vh 3.4vw;
    width: 20vw;
}
.bildertitel {
    font-size: 3.3vh;
}
.name{
    width: 85%;
} 
#upload input[type="submit"],#logout input[type="submit"]{
    margin: 10px 0 0 30px;
}
}
@media only screen
and (max-width:380px)
and (orientation:portrait)
{
 .logo {
    z-index: 2;
    position: relative;
    }
    
   .baeume
    {margin: 22vh 0 6vh 7.6vw;
     width: 25vw;
    }
   #seite_eins .baeume {
    margin: 22vh 0 6vh 3.4vw;
    width: 20vw;
    }
    #seite_zwei .baeume {
    margin: 22vh 0 6vh 3.4vw;
    width: 20vw;
    }
    #seite_drei .baeume {
    margin: 22vh 0 6vh 3.4vw;
    width: 20vw;
    }
.bildertitel {
    font-size: 3.3vh;
}
#start .links h2, #start .rechts h2  {
    font-size: 0.8em;

}
.login input{
    width: 80vw;
}
}

@media only screen
and (max-width:320px)
and (orientation:portrait)
{
 .logo {
    z-index: 2;
    position: relative;
    }
    
   .baeume
    {margin: 22vh 0 6vh 7.6vw;
     width: 25vw;
    }
   #seite_eins .baeume {
    margin: 22vh 0 6vh 3.4vw;
    width: 20vw;
    }
    #seite_zwei .baeume {
    margin: 22vh 0 6vh 3.4vw;
    width: 20vw;
    }
    #seite_drei .baeume {
    margin: 22vh 0 6vh 3.4vw;
    width: 20vw;
    }
.bildertitel {
    font-size: 3.3vh;
}
#start .links h2, #start .rechts h2  {
    font-size: 0.7em;
}
    nav {
    width: 300px;
    margin: 4vh auto 0;
    font-size: 10px;
}
}