/* CSS Klassen */
body {
    min-height: 500px;  
    max-width: 1100px;
    width: 90%;
    /*margin-right: 20px;*/
    /*background: linear-gradient(white, skyblue);*/
    background: #efefef;
    margin-left: 40px;
}
a {
    color: darkblue;
    cursor: pointer;
    text-decoration: none;
}
input {
    font: normal 12pt "Arial";
}
input#kmstand{
    width: 80px;
}
#logo{
    font: normal 22pt "Audiowide";
    padding: 10px;
}
#logo a{
        color: black;
        text-decoration: none;
} 
.logotext{
    background-image:linear-gradient(skyblue,white);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: grey;  
}
.top
{
    width: 90%;
    font: normal 26pt "Audiowide";
    text-align: left;
    border: 2px solid #000000;
    border-radius: 15px 0px 15px 0px;
    background: linear-gradient(white, skyblue);
}
.top a#login {
    width: 90px;
    font: normal 12pt "Arial";
    color: white;
    text-align: center;
    text-decoration: none;
    background-color: orangered;
    float: right;
    border: solid 1px white;
    border-radius: 15px 0px 15px 0px;
    padding: 3px 0px 3px 0px;
}
.top a#login:hover {
    background-color: rgb(255, 123, 0);
}
.topline{
    font: normal 14pt "Audiowide";
    color: blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
h1 {
    font: normal 18pt "SourceSans3-Light";
    text-align: center; 
}
h2{
    font: normal 18pt "Audiowide";
    padding: 0 20px 0 20px;
    margin-left: 60px;
}
h3{
    font: normal 14pt "Arial";
    width: fit-content;
    margin: 6px;
}
h4{
    font: normal 14pt "Audiowide";
    color: blue;
    margin: auto;
}
h5{
    background-color: white; 
}
.marke{
    font: normal 16pt "SourceSans3-Light";
}
.preis {
    font: normal 20pt "SourceSans3-Light";
}
#titel{
    position: sticky;
    top: 25px;
    font: normal 18pt "Audiowide";    
    width: fit-content;
    background-color: white;
    border: 1px solid black;
    border-radius: 0px 0px 15px 15px;
    padding: 0 20px 0 20px;
    margin: 20px 0 10px 0;
    z-index: 500;
}
#titellogged{
    position: sticky;
    top: 50px;
    font: normal 18pt "Audiowide";
    width: fit-content;
    background-color: white;
    border: 1px solid black;
    border-radius: 0px 0px 15px 15px;
    padding: 0 20px 0 20px;
    margin: 20px 0 10px 0;
    z-index: 500;
}
#mn {
    display: inline-block;    
    position: sticky;
    top: 0;
    width: 90%;
    height: 24px;     
    background: skyblue/*linear-gradient(white, skyblue)*/;
    border: 1px solid black;
    border-radius: 15px 0px 15px 0px;
    z-index: 500;
}

#mn a {
    display: inline-block;
    width: 120px;
    height: 24px;
    font: normal 12pt 'Arial';
    text-decoration: none;
    color: black;
    text-align: center;
    line-height: 24px;
    border-radius: 15px 0px 15px 0px;
    background:skyblue;
}
#mn a:hover {
    background: white;
    
}
#mn a.active {
    color: rebeccapurple;  
    background: white;
    
}
#mnloggedin {
    position: sticky;
    top: 25px;
    width: 90%;
    background: linear-gradient(skyblue, yellow);
    border: 1px solid black;
    border-radius: 15px 0px 15px 0px;
    z-index: 500;
}
#mnloggedin a {
    display: inline-block;
    width: 120px;
    height: 24px;
    font: normal 12pt 'Arial';
    text-decoration: none;
    color: black;
    text-align: center;
    line-height: 24px;
    border-radius: 15px 0px 15px 0px;
}
#mnloggedin a:hover {
    background: white;
    
}
#mnloggedin a.active {
    color: rebeccapurple;  
    background: white;
    
}
.kategorie{
    font: normal 18pt "SourceSans3-Light";
    background-color: white;

    width: 100%;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    margin: 10px 0px 10px 0px;
    padding-left: 30px;
}
#searchbox {
    background: #efefef url("../pagepics/HGB-1.jpg") repeat-x;
    background-attachment: fixed;
    background-size: cover;
}
.box1 {
    display: block;
    font: normal 12pt 'Arial';
    color: black;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
    background: linear-gradient(white, yellow);
    width: 76%;
    border: 1px solid #000000;
    border-radius: 5px;
    box-shadow: 10px 10px 15px silver;
    padding: 5px;
    margin: 10px;    
}
.inbox1 {
    display: inline-block;
    font: normal 12pt 'Arial';
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: white;
    text-align: left;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    margin-left: 10px;
  }
.box2 {
    display: block;
    font: normal 12pt 'Arial';
    color: black;    
    text-align: left;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(yellow, white);
    width: 80%;
    border: 1px solid black;
    border-radius: 10px;
    box-shadow: 10px 10px 15px silver;
    padding: 10px;
    margin: 20px 20px 20px 50px;
}
.inbox2 {
    display: inline-block;
    font: normal 12pt 'Arial';
    text-align: left;
    background-color: white;
    width: 80%;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    margin-left: 10px;
}
.infobox1{
    font: normal 12pt 'Arial';
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: white;
    width: auto;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    margin-left: 10px;
}
#infoblock{
    text-align: center;
}

.fuhrpark {
    display: block;
    font: normal 12pt 'Arial';
    color: black;  
    text-align: left;   
    background:linear-gradient(white, skyblue);
    width: 76%;
    border: 1px solid #000000;
    border-radius: 5px;
    box-shadow: 10px 10px 15px silver;
    padding: 5px;
    margin: 10px;   
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#vorschaubild{
    float: left;
    height: 180px;
    width: 240px;
    border: 2px solid white;
    border-radius: 10px;
    margin-right: 20px;
}
#flexblock1 {
    display: inline-flexbox;
    position: relative;
    font: normal 12pt "Arial";
    background: white;
    height: 600px;
    width: 86%;
    /*border: solid 1px black;
    border-radius: 10px;
    box-shadow: 5px 5px 15px 0px grey;
    margin-left: 20px;*/
    padding: 20px;
}
.flex-container{
    display: flex;
    width: 84%;
    background-color: transparent;
    margin: 10px;
}
.flex-buttoncontainer{
    display: flex;
    width: 84%;
    background-color: transparent;
    margin: 10px;
}
.flex-item{
    font: normal 12pt 'Arial';
    background: white;
    border: solid 1px black;
    border-radius: 8px;
    box-shadow: 3px 10px 15px grey;
    margin: 10px;
    padding: 5px 5px 10px 5px;
}
#angebot{
    float: left;
    font: normal 12pt "Arial";
    background: lightgrey;
    width: 70%;
    border: solid 1px yellow;
    border-radius: 8px;
    box-shadow: 5px 5px 15px 0px grey;
    margin: 10px;
    padding: 10px;
}
.formular{
    display: block;
    font: normal 10pt "Arial";
    color: black;   
    float: left;
    width: 600px;
    background:  linear-gradient(white, yellow);
    border: solid 1px black;
    border-radius: 8px;
    box-shadow: 5px 5px 15px 0px grey;
    margin: 10px;
    padding: 10px;
}
.formular label{
    display: flex;
    flex-direction: column-reverse;
}
.formular label>span {
    width: 60%;
    transition: all .2s;
    transform-origin: top left;
}
.formular label>input[placeholder=" "]:not(:focus):placeholder-shown + span {
    transform: translateX(1em) translateY(1.5em) scale(1.25);
    pointer-events: none;
    opacity: .5
}
.formular input{
    font: normal 12pt "Arial";
    border-radius: 10px;
    padding: 3px 10px 3px 10px;
}
.formular select{
    width: 170px;
    font: normal 12pt "Arial";
    background-color: white;
    border-radius: 10px;
    padding: 3px 10px 3px 10px;
}
.formular textarea{
    font: normal 12pt "Arial";
    background-color: white;
    border-radius: 10px;
    padding: 3px 10px 3px 10px;
}
.check{
    cursor: pointer;
    height: 18px;
    width: 18px;
}
.checktext{
    cursor: pointer;
}
#login{
    display: block;
    float: left;
    width: 600px;
    font: normal 12pt "Arial";
    background: yellowgreen;
    border: solid 1px black;
    border-radius: 10px;
    box-shadow: 5px 5px 15px 0px grey;
    padding: 10px;
}
#logreg{
    font: normal 12pt "Arial";
    color: black;
    background-color: white;
    border: solid 1px black;
    border-radius: 10px;    
    text-decoration: none;
    cursor: pointer;
    margin: 10px 10px 10px 40px;
    padding: 5px 20px 5px 20px;
}
#logreg a{
    color: black;
}
#logreg:hover{
    color: black;
    background-color: lightgrey;
}
button{
    font: normal 12pt "Arial"; 
    text-decoration: none;
}
#sendebutton{
    font: normal 12pt "Arial";
    color: white;
    text-align: center;
    background-color: darkslategrey;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 3px 10px 15px grey;
    margin: 10px;
    padding: 3px 10px 3px 10px;
    border-radius: 15px;  
}
#sendebutton a{
    color: white;
}
#sendebutton:hover{
    background-color: darkmagenta;
    box-shadow: 5px, 5px, 5px, black;
}
.fzbutton{
    font: normal 12pt "Arial";
    padding: 0px 10px 0px 10px;
    border-radius: 5px;  
}
#tablebutton{
    font: normal 10pt "Arial";
    color: white;
    background-color: red;
    cursor: pointer;
    text-decoration: none;
    border-radius: 5px;
}
#tablebutton a{
    color: white;
}
#tablebutton:hover{
    background-color: orangered;
    box-shadow: 1px, 1px, 5px, black;
}
#Footer{
    width: 300px;
    border-radius: 5px;
    background-color: aqua;
    font: normal 10pt "Arial";
    padding: 10px;
    margin-left: 10px;
}
#Footerfeld{
    background-color: beige;
    border-radius: 3px;
    padding: 3px 10px;
}
.blink1 {
    animation-name: animation_blink1;
    animation-timing-function: ease-in;
    animation-duration: 2s; 
    animation-iteration-count: 3;            
}
@keyframes animation_blink1 {
    30% { opacity: 1; }
    65% { opacity: 0.2; }
    100% { opacity: 1; }    
}
.blink2 {
    animation-name: animation_blink2;
    animation-timing-function: ease-in;
    animation-duration: 2s; 
    animation-iteration-count: 15;            
}
@keyframes animation_blink2 {
    30% { opacity: 1; }
    65% { opacity: 0.2; }
    100% { opacity: 1; }    
}
.aktionhinweis {
    font: normal 12pt "Arial";
}
.blueGreen
{
    color: blue;
    background: green;
    border-style: solid; 
    text-align: center;
}
.blackYellow
{
    color: black;
    background: yellow;
    border-style: solid;
    padding: 10px;
}
.whiteRed
{
    color: white;
    background: red;
    border-style: solid;
    text-align: right;
}
@media screen and (max-width: 720px){
    body {
        width: 98%;
        margin-left: 2px;
    }
    input {
        font: normal 10pt "Arial";
    }
    #logo{
        font: normal 14pt "Audiowide";
    }
    h2{
        font: normal 12pt "Audiowide";
        padding: 0;
        margin-left: 10px;
    }
    h3{
        font: normal 12pt "Arial";
    }
    h4 {
        font: normal 12pt "Audiowide";
        color: blue;
        margin: auto;
    }
    .marke{
        font: normal 12pt "SourceSans3-Light";
    }
    .preis {
        font: normal 18pt "SourceSans3-Light";
    }
    #titel{
        position: sticky;
        top: 25px;
        font: normal 12pt "Audiowide";
        padding: 0 20px 0 20px;
        width: fit-content;
        background-color: white;
        opacity: 0.8;
        border: 2px solid black;
        border-radius: 0px 0px 15px 15px;
    }
    #titellogged{
        position: sticky;
        top: 50px;
        font: normal 12pt "Audiowide";
        padding: 0 20px 0 20px;
        margin: 20px 0 10px 0;
        width: fit-content;
        background-color: white;
        opacity: 0.8;
        border: 2px solid black;
        border-radius: 0px 0px 15px 15px;
    }
    .top{
        width: 100%;
    }
    #mn {    
        width: 100%;
    }
    #mn a{
        width: 110px;
    }
    #mnloggedin {
        position: sticky;
        top: 25px;
        width: 100%;       
    }
    #mnloggedin a{
        width: 110px;
    }
    .box1, .box2 {
        font: normal 10pt 'Arial';
        text-align: left;
        width: 92%;
        box-shadow: none;
        margin: 2px;
    }
    .inbox2 {
        font: normal 10pt 'Arial';
    }
    .inbox1 {
        font: normal 10pt 'Arial';
        border-radius: 3px;
        padding: 2px;
    }
    .fuhrpark {
        font: normal 10pt 'Arial';
        color: black;  
        width: 94%;
        border: 1px solid #000000;
        border-radius: 3px;
        padding: 3px;
        margin: 2px;
    }
    #vorschaubild{
        float: left;
        height: 99px;
        width: 132px;
        border: 1px solid white;
        border-radius: 10px;
        margin-right: 10px;
    }
    .topline{
        font: normal 12pt "Audiowide";
    }
    .flex-container{
        flex-direction: column;
        width: 96%;
        margin: 2px;
    }
    .flex-item{
        font: normal 10pt "Arial";
        padding: 5px 5px 10px 5px;
        margin: 5px;
    }
    #angebot{
        font: normal 12pt "Arial";
        background: lightgray;
        width: auto;
    }
    .formular{
        display: inline-block;
        font: normal 8pt "Arial";
        width: 94%;
        box-shadow: none;
        margin: 2px;
    }
    button{
        font: normal 10pt "Arial"; 
    }
    label{
        display: flex;
        flex-direction: column-reverse;
    }
    label>span {
        transition: all .2s;
        transform-origin: top left;
    }
    label>input[placeholder=" "]:not(:focus):placeholder-shown + span {
        transform: translateX(1em) translateY(1.5em) scale(1.25);
        pointer-events: none;
        opacity: .5
    }
    .formular{
        font: normal 10pt "Arial";
    }
    .formular select {   
        width: 160px;
        border-radius: 5px;
    }
    .formular textarea{
        width: 70%;
        border-radius: 5px;
    }
    #logreg{
        font: normal 12pt "Arial";
        margin: 10px 10px 10px 10px;
        padding: 3px 20px 3px 20px;
    }
    #sendebutton{
        font: normal 12pt "Arial";
        margin: 10px 10px 10px 10px;
    }
    #banner1{
        width: 80%;
    }
}