body {
    background-image: url(imgs/mountains.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-color: rgb(113, 64, 29);
}

#el_01 {
    font-size: 4rem;
    color: whitesmoke;
    text-align: center;
    
    
}
#el_02 {
    font-size: 3rem;
    color: whitesmoke;
    text-align: center;
    
}

input {
    width: 31%;
    padding: 10px 10px 10px 10px;
    margin: 10px 10px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 2rem;
}

input:focus {
    background-color: rgb(232, 207, 187);
}

#logo {
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
}

button {
    background-color: #3b9e7a; /* Green */
  border: 2px solid #3b9e7a;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.8rem;
  margin: 20px;
  border-radius: 8px;

}

button:hover {
    border: 2px solid #c7d0cd;
    background-color: #2dd497;
    color: white;
    text-align: center;
}
#minusButton {
    background-color: #a61e1e; /* Green */
    border: 2px solid #a61e1e;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.8rem;
    margin: 20px;
    border-radius: 8px;
}

#minusButton:hover {
    border: 2px solid #c7d0cd;
    background-color: #d42d2d;
    color: white;
    text-align: center;
}

#zusammen {
background-color: #dae2dfea;
text-align: center;
margin: auto;
margin-bottom: 20px;
}

#neuDoku {
    font-size: 2rem;
    color: rgb(24, 23, 23);
    text-decoration: underline;
    font-weight: 800;
    padding-top: 10px;
}

#besitzer {
    font-size: 1.7rem;
    color: black;
}
#ort {
    font-size: 1.7rem;
    color: black;
}
#polterNr {
    font-size: 1.7rem;
    color: black;
    padding-bottom: 10px;
}

#massBreite {
    color: rgb(38, 35, 35);
    font-size: 2rem;
    display: inline-block;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #dae2dfea;
    padding-top: 10px;
    padding-bottom: 10px;
    
    
    margin-top: 20px;
    
}
#eingabeBreite {
    text-align: start;
    display: inline-block;
    margin: auto;
    
}

#holzBild {
    width: 80%;
    height: auto;
    margin-bottom: 20px;
}

#gemHoehen {
    color: rgb(38, 35, 35);
    font-size: 2rem;
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #dae2dfea;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
   
}

#durchschnittHoehe {
    color: rgb(38, 35, 35);
    font-size: 2rem;
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #dae2dfea;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
   
}

#ergebnis {
    font-size: 2rem;
    background-color: burlywood;
    padding: 20px;
    color: black;
    font-weight: 600;
}

#holzlänge {
    color: rgb(38, 35, 35);
    font-size: 2rem;
    display: inline-block;
    padding-left: 30px;
    background-color: #dae2dfea;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

h5 {
    font-size: 2rem;
    background-color: black;
    color: whitesmoke;
    padding: 20px 20px 20px 20px;
    
}

#zusammenfassung {
    
    background-color: rgb(247, 243, 242);
    font-size: 3rem;
    padding: 20px 20px 20px 20px;
    
}
#briefkopf {
    
    background-color: rgb(247, 243, 242);
    color: black;
    text-decoration: underline;
    font-size: 2rem;

}
    
#zeilen {
    font-size: 1.5rem;
    color: black;
    text-align: start;
    text-decoration: none;
    line-height: 1.3;
}
#ogw-logo {
    position: absolute;
    right: 30px;
    
}

#hpv-brief {
    width: 80px;
    position: absolute;
    right: 240px;
    padding-top: 20px;
    
}
mark {
    font-weight: 600;
    background-color: rgb(170, 163, 163);
    margin-right: 10px;
    bottom: 10px;
    
}
#ausgabeMengen {
    color: rgb(27, 233, 96);
    border: 1px solid rgb(69, 224, 121);
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    font-size: 2.5rem;
    font-weight: 700;
}
#span {
    background-color: #69ebbb;
    color: rgb(45, 43, 43);
    line-height: 1.3;
    font-weight: 700;
}
#span2 {
    background-color: #d8ef66;
    color: rgb(45, 43, 43);
    line-height: 1.3;
    font-weight: 700;
}

@media print {
    /* All your print styles go here */
    #el_01 {display: none;}
    #el_02 {display: none;}
    #zusammen {display: none !important;}
    button {display: none;}
    input {display: none;}
    #holzBild {display: none;}
    #infoMessen {display: none;}
    #gemHoehen {display: none;}
    #durchschnittHoehe {display: none;}
    #logo {display: none;}
    #massBreite {display: none;}
    #eingabeBreite {display: none;}
    #minusButton {display: none;}
    #ausgabeMengen {display: none;}
    #zusammenfassung {
        
        background-color: rgb(255, 255, 255);
        font-size: 3rem;
        margin-left: -10px;
        margin-right: -10px;
        margin-bottom: -50px;
        margin-top: -170px;
        background-image: none !important;
    }

    #briefkopf {
    
        background-color: rgb(255, 255, 255);
        color: black;
        text-decoration: underline;
        font-size: 1.5rem;
    
    }
        
    #zeilen {
        font-size: 1rem;
        color: black;
        text-align: start;
        text-decoration: none;
        line-height: 1.3;
    }
    #ogw-logo {
        position: absolute;
        right: 30px;
        
    }
    
    #hpv-brief {
        width: 80px;
        position: absolute;
        right: 240px;
        padding-top: 20px;
        
    }
    mark {
        font-weight: 600;
        background-color: rgb(170, 163, 163);
        margin-right: 10px;
        bottom: 10px;
        
    }
    #ausgabeMengen {
        color: rgb(27, 233, 96);
        border: 1px solid rgb(69, 224, 121);
        padding: 10px 10px 10px 10px;
        margin: 10px 10px 10px 10px;
        font-size: 2.5rem;
        font-weight: 700;
    }
    #span {
        background-color: #69ebbb;
        color: rgb(146, 140, 140);
        line-height: 1.3;
        font-weight: 700;
    }
    #span2 {
        background-color: #d8ef66;
        color: rgb(45, 43, 43);
        line-height: 1.3;
        font-weight: 700;
    }


  }

@media only screen and (max-width: 680px) {
    body {
        background-image: url(imgs/mountains.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-color: rgb(46, 21, 3);
    }
    
    #el_01 {
        font-size: 2rem;
        color: whitesmoke;
        text-align: center;
        
    }

    #el_02 {
        font-size: 2rem;
        color: whitesmoke;
        text-align: center;
    }
   
    
    input {
        
        
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 1.7rem;
       width: 95%;
    }
    

    #holzBild {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }

    #massBreite {
        background-color: #dae2dfea;
        text-align: center;
        margin-bottom: 20px;
        margin-top: 20px;
        width: 70%;
        
    }

    #zusammenfassung {
        
        margin-left: -7px;
        margin-right: -7px;
        background-color: rgb(255, 255, 255);
        font-size: 3rem;
        
    }

    @media print {
        /* All your print styles go here */
        #el_01 {display: none;}
        #el_02 {display: none;}
        #zusammen {display: none !important;}
        button {display: none;}
        input {display: none;}
        #holzBild {display: none;}
        #infoMessen {display: none;}
        #gemHoehen {display: none;}
        #durchschnittHoehe {display: none;}
        #logo {display: none;}
        #massBreite {display: none;}
        #eingabeBreite {display: none;}
        #minusButton {display: none;}
        #ausgabeMengen {display: none;}
        body {
            background-color: white;
        }
        #zusammenfassung {
            
            background-color: rgb(255, 255, 255);
            font-size: 3rem;
            
            margin-top: -190px;
            margin-left: -20px;
            border-top: 10px solid rgb(12, 48, 11);
            background-image: none !important;
        }
    
        #briefkopf {
        
            background-color: rgb(255, 255, 255);
            color: black;
            text-decoration: underline;
            font-size: 1.5rem;
        
        }
            
        #zeilen {
            font-size: 1rem;
            color: black;
            text-align: start;
            text-decoration: none;
            line-height: 1.3;
        }
        #ogw-logo {
            position: absolute;
            right: 30px;
            
        }
        
        #hpv-brief {
            width: 80px;
            position: absolute;
            right: 240px;
            padding-top: 20px;
            
        }
        mark {
            font-weight: 600;
            background-color: rgb(170, 163, 163);
            margin-right: 10px;
            bottom: 10px;
            
        }
        #ausgabeMengen {
            color: rgb(27, 233, 96);
            border: 1px solid rgb(69, 224, 121);
            padding: 10px 10px 10px 10px;
            margin: 10px 10px 10px 10px;
            font-size: 2.5rem;
            font-weight: 700;
        }
        #span {
            background-color: #69ebbb;
            color: rgb(146, 140, 140);
            line-height: 1.3;
            font-weight: 700;
        }
        #span2 {
            background-color: #d8ef66;
            color: rgb(45, 43, 43);
            line-height: 1.3;
            font-weight: 700;
        }
    
    
      }

}