/*Allgemein*/
body{
    background-image: url(img/Loewebaer/bohnegelb1.jpg);
    max-width: 100vw;
}

#lwb{
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    position: relative;
    transform: rotate(5deg);
}

#lwb_sheet{
    background-color: #c61c1c;
    border-top: 6px solid #CC9966;
    font-size: 2.2em;
    position: absolute;
    top: 32%;
    z-index: -100;
    padding-top: 7%;
    text-align: center;
    font-family: 'Asap', sans-serif;
    color: white;
    font-style: italic;
}

.Headline{
    font-size: 1.7em;
    font-family: 'Redressed', cursive;
    color: #CC9966;
    font-style: normal;
}

/*Dia*/
@keyframes dia1 {
    0%{display: normal; opacity: 1; z-index: 100;}
    33%{display: none; opacity: 0; z-index: 99;}
    66%{display: none; opacity: 0; z-index: 99;}
    100%{display: normal; opacity: 1; z-index: 100;}
}

@keyframes dia2 {
    0%{display: none; opacity: 0; z-index: 99;}
    33%{display: normal; opacity: 1; z-index: 100;}
    66%{display: none; opacity: 0; z-index: 99;}
    100%{display:none; opacity: 0; z-index: 99;}
}

@keyframes dia3 {
    0%{display: none; opacity: 0; z-index: 99;}
    33%{display: none; opacity: 0; z-index: 99;}
    66%{display: normal; opacity: 1; z-index: 100;}
    100%{display:none; opacity: 0; z-index: 99;}
}

.dia1{
    animation: dia1 5s infinite;
}


.dia2{
    animation: dia2 5s infinite;
}

.dia3{
    animation: dia3 5s infinite;
}

.noanim{
    animation: none;
}

.noDisplay{
    display: none;
}

@keyframes dia_waber {
    0%{transform: translateY(0); box-shadow: 0px 10px 30px #CC9966;}
    50%{transform: translateY(3%); box-shadow: 0px 10px 15px #CC9966;}
    100%{transform: translateY(0); box-shadow: 0px 10px 30px #CC9966;}
}

.dia{
    
    position: absolute;
    margin: 0 auto;
}

.pic{
    width: 25%;
    height: auto;
}

.pic:hover{
    animation: none;
    width: 28%;
    animation: none;
    animation: dia_waber 4s infinite;
}

/*Abs 1 Herz*/
@keyframes Herzschlag{
    0%{font-size: 1em;}
    50%{font-size: 1.1em;}
    100%{font-size: 1em;}
}

.Herz{
    display: inline;
    animation: Herzschlag 1.5s infinite;
    position: absolute;
    color: #CC9966;
    font-style: normal;
}

/*Abs 2*/
#Portrait{
    border: 6px solid #CC9966;
}

/*Abs 3*/

#Dein_persoenliches{
    text-align: left;
    margin-left: 5%; 
    margin-right: 12%; 
    transform: translateX(-120%);
}

#Dein_persoenliches_Phone{
    display: none;
}

#Send{
    border: 3px solid #c61c1c;
    background-color: #CC9966;
    color: #c61c1c;
}

#Send:hover{
    border: 3px solid #CC9966;
    background-color: #c61c1c;
    color: #CC9966;
}

/*Anzeige*/
@keyframes Anzeige_waber {
    0%{transform: translateY(0);}
    50%{transform: translateY(20%); }
    100%{transform: translateY(0); }
}

#Anzeige_Shop{
    animation: Anzeige_waber 2s infinite;
    color: #CC9966;
    font-style: normal;
}

/*Abs 4 - Shop*/
@keyframes Farben {
    0%{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 10px 10px 15px black; font-size: 1.0em;}
    10%{background: linear-gradient(153deg, #667eea 0%, #764ba2 100%); box-shadow: 8px 8px 15px black; font-size: 1.01em;}
    20%{background: linear-gradient(171deg, #667eea 0%, #764ba2 100%); box-shadow: 6px 6px 15px black; font-size: 1.02em;}
    30%{background: linear-gradient(189deg, #667eea 0%, #764ba2 100%); box-shadow: 4px 4px 15px black; font-size: 1.03em;}
    40%{background: linear-gradient(207deg, #667eea 0%, #764ba2 100%); box-shadow: 2px 2px 15px black; font-size: 1.04em;}
    50%{background: linear-gradient(225deg, #667eea 0%, #764ba2 100%); box-shadow: 0px 0px 15px black; font-size: 1.05em;}
    60%{background: linear-gradient(243deg, #667eea 0%, #764ba2 100%); box-shadow: -2px -2px 15px black; font-size: 1.06em;}
    70%{background: linear-gradient(261deg, #667eea 0%, #764ba2 100%); box-shadow: -4px -4px 15px black; font-size: 1.07em;}
    80%{background: linear-gradient(279deg, #667eea 0%, #764ba2 100%); box-shadow: -6px -6px 15px black; font-size: 1.08em;}
    90%{background: linear-gradient(297deg, #667eea 0%, #764ba2 100%); box-shadow: -8px -8px 15px black; font-size: 1.09em;}
    100%{background: linear-gradient(315deg, #667eea 0%, #764ba2 100%); box-shadow: -10px -10px 15px black; font-size: 1.1em;}
}

@keyframes Shop_Waber{
    0%{transform: translateY(0%);}
    10%{transform: translateY(5%);}
    20%{transform: translateY(10%);}
    30%{transform: translateY(5%);}
    40%{transform: translateY(10%);}
    50%{transform: translateY(5%);}
    60%{transform: translateY(10%);}
    70%{transform: translateY(5%);}
    80%{transform: translateY(0%);}
    90%{transform: translateY(0%);}
    100%{transform: translateY(0%);}

}

#Etsy_Button{
    animation: Shop_Waber 2s infinite;
    z-index: 100;
    text-decoration: none;
    opacity: 0.7;
    color: silver;
    box-shadow: 10px 10px 15px black;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: 'Asap', sans-serif; 
    text-shadow:1px 1px 3px black;
    
}

#Etsy_Button:hover{
    text-shadow:-1px -1px 3px black;
    font-size: 1.1em;
    animation: Farben 0.25s 1;
    background: linear-gradient(315deg, #667eea 0%, #764ba2 100%);
    box-shadow: -10px -10px 15px black;
}

#Einkaufswagen{
    width: 40%;
    position: absolute;
    opacity: 0;
    transform: translateX(-100%);
    z-index: 0;
    overflow: hidden;
}