@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kreon:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

body {
    margin: 0px;
}

.opacity50 {
    opacity: 0.5;
}

button,
input {
    outline         : none !important;
    border          : none !important;
    background-color: transparent !important;
}

button:hover {
    cursor          : pointer;
    background-color: transparent !important;
}

p {
    color      : black;
    font-weight: 400;
}

.hide {
    display: none;
}

/*Avatar im Header*/

#meta21_avatar_header {
    position: absolute;
    top     : 25px;
    right   : 25px;
}

.header_account_label {
    color       : white;
    font-weight : 400;
    margin-right: 15px;
    opacity     : 0.7;
    position    : relative;
    top         : 18px;
}



#header {
    background-color: #121212;
    padding         : 30px;
}

.menu-link {
    color          : grey;
    text-decoration: none;
    font-family    : Lato, Arial, Helvetica, sans-serif;
    font-weight    : 400;
}

.menu-link:hover {
    color: white;
}

#header-menu {
    color: grey;
}

#infoblock {
    background-image: url('../img/bg_papier.jpg');
    background-size : cover;
    padding         : 25px;
    padding-top     : 75px;
    padding-bottom  : 60px;
    position        : relative;
}

#infobttn {
    position: absolute;
    top     : 15px;
    right   : 15px;
}

#title {
    max-width    : 300px;
    margin-bottom: 20px;
}

.infotxt {
    font-family: Lato, Arial, Helvetica, sans-serif;
    opacity    : 0.8;
    max-width  : 450px;
    text-align : center;
    line-height: 1.5;
}

#login {
    border        : solid 3px #00000075 !important;
    font-family   : Kreon, Lato, Arial, Helvetica, sans-serif;
    font-size     : 20px;
    text-transform: none;
}

#login:hover {
    border: solid 3px #000000 !important;
    color : black;
}

.actionbttn {
    background-color   : transparent !important;
    display            : inline-block;
    background-size    : 95px 95px !important;
    background-position: center center;
    background-repeat  : no-repeat;
    width              : 100px !important;
    height             : 100px !important;
    margin-left        : 15px;
    margin-right       : 15px;
}

.actionbttn:hover {
    background-size: 100px 100px !important;
}

.bttnDeactivated {
    opacity: 0.5;
}

#actionbttn_holder {
    margin-top: 30px;
}

#einpflanzen {
    background-image: url("../img/bttn_samen.png");
}

#giessen {
    background-image: url("../img/bttn_giessen.png");
}

#verwelkt_info {
    background-color: #D7B56D;
    padding         : 20px;
    width           : 100%;
    max-width       : 500px;
    position        : absolute;
    display         : none;
    top             : 0px;
    z-index         : 1;
}

#verwelkt_txt {
    float      : left;
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-align : left;
    max-width  : calc(100% - 90px);
    color      : black;
}

#verwelkt-h {
    font-family: Kreon, Lato, Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size  : 24px;
}

#reset {
    float   : right;
    position: relative;
    top     : 10px;
}

#resetbttn {
    background-image: url("../img/repeat.png");
    background-size : contain;
    width           : 75px;
    height          : 75px;
}

#pflanzen_holder {
    /*background-image   : url("../img/background.jpg");
    background-position: center center;
    background-repeat  : no-repeat;*/
    background     : url("../img/background_shadow.png") center top no-repeat, url("../img/background.jpg") center center no-repeat;
    background-size: auto, cover;

    position: relative;
}

.pflanze {
    max-width    : 100%;
    margin-bottom: 90px;
}

#wasserstand {
    position  : absolute;
    top       : 25px;
    right     : 25px;
    box-shadow: 0px 0px 5px 5px #00000020
}

#footer {
    height             : 200px;
    width              : 100%;
    background-image   : url("../img/footer.png");
    background-repeat  : repeat-x;
    background-size    : auto 200px;
    background-position: center center;
    margin-top         : -100px;
    margin-bottom      : -100px;
    position           : relative;
}

/*Nur Mobilgeräte*/
@media only screen and (max-width: 999px) {
    #infoblock {
        background-image: url('../img/bg_papier_horizontal.jpg');
    }

    #title {
        max-width: 65%;
    }

    #infobttn {
        top  : 7px;
        right: 7px;
    }
}

/*Nur Desktop*/
@media only screen and (min-width: 1000px) {
    .pflanze {
        max-height: 700px;
    }
}