@supports (hyphens: auto) {
  body {
    text-align:justify;
    hyphens: auto;}
  
.flex-container { display: flex; flex-direction: column; justify-content: center; } @media all and 
(min-width: 20em) { .flex-container { flex-direction: row; } } 

.flex-item { flex: auto; border: 1px solid; width: 16em; body: 16px; -family: Verdana, Arial, Helvetica, sans-serif; 
 margin-top: 0.3em; margin-right: 0.3em; margin-bottom: 
0.3em; margin-left: 0.3em; padding-top: 0.8em; padding-right: 0.3em; padding-bottom: 
0.3em; padding-left: 0.6em; -size: medium ; line-height: normal ; -style: normal; -weight: normal} 

.flex-item2 { flex: auto; border: 1px solid; width: 16em; body: 16px; -family: Verdana, Arial, Helvetica, sans-serif; 
 margin-top: 0.3em; margin-right: 0.3em; margin-bottom: 
0.3em; margin-left: 0.3em; padding-top: 0.8em; padding-right: 0.3em; padding-bottom: 
0.3em; padding-left: 0.6em; -size: medium ; line-height: normal ; -style: normal; -weight: normal} 

.flex-item3 { flex: auto; border: 0px solid; width: 20em; body: 20px; -family: Verdana, Arial, Helvetica, sans-serif; 
 margin-top: 0.1em; margin-right: 0.3em; margin-bottom: 
0.1em; margin-left: 0.1em; padding-top: 0.1em; padding-right: 0.1em; padding-bottom: 
0.1em; padding-left: 0.1em; -size: medium ; line-height: normal ; -style: normal; -weight: normal} 

.flex-item4 { flex: auto; border: 0px solid; width: 20em; body: 20px; -family: Verdana, Arial, Helvetica, sans-serif; 
 margin-top: 0.1em; margin-right: 0.3em; margin-bottom: 
0.1em; margin-left: 0.1em; padding-top: 0.1em; padding-right: 0.1em; padding-bottom: 
0.1em; padding-left: 0.1em; -size: medium ; line-height: normal ; -style: normal; -weight: normal} 

.wrap { flex-wrap: wrap; } 
a:hover{color:#FFFFFF;text-decoration:none;clip:rect( auto 
auto auto);background-color:#0000FF;-family: Verdana, Arial, Helvetica, sans-serif, Wingdings} a{color:#0000FF;text-decoration:none;-family: 
Verdana, Arial, Helvetica, sans-serif, Wingdings} 

.button-wrapper {
  display: block;
  text-align: center;
}
.button {
  border: none;
  border-radius: 3em;
  box-shadow: 4px 4px 4px 2px rgba(0,0,0,0.2);
  display: inline-block;
  -size: 1em;
  padding: 0.5em 0.5em;
  width: auto;
}

.taste-wrapper {
  display: block;
  text-align: center;
}
.taste {
  border: none;
  border-radius: 3em;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  display: inline-block;
  -size: 1em;
  padding: 0.5em 0.5em;
  width: auto;
}

body {
 hyphens: auto;
}

mark { 
  background-color: Dodgerblue;
  color: black;
}


html {
  scroll-behavior:smooth;
}
body {
  position: relative;
}
.section {
  height: 100vh;
  background: #fcfcfc;
  margin-bottom: 20px;
  -size: 100px;
}


img {
  max-width: 100%;
  height: auto;
}


figure {
     width: 80%;
    height: auto;
    float: right;

    padding: 1em 1em 1em 1em;
    border: 1px solid silver;
    margin: 2em 2em 2em 2em;    
    box-shadow: 4px 0px 13px #555;
    transform: rotate(1deg);
background-color:white;

}

figure2 {
    /* background-color: orange*/
    width: 85%;
    height: auto;
    float: right;

    padding: 1em 1em 1em 1em;
    border: 1px solid silver;
    margin: 2em 2em 2em 2em;    
    box-shadow: 8px 0px 25px #555;
background-color:lightgray;

}

h1 {
-weight: 100; 
text-align:center;
-color: #000000; 
-size: 1.3em; 
-size: clamp(1rem, 3vw, 2rem);
-family: Verdana, Arial, Helvetica, sans-serif, Wingdings;
}
@media screen and (max-width: 768px) {
  h1 {
    -size: 1.3em;
  }
}
@media screen and (max-width: 480px) {
  h1 {
    -size: 1em; }
}

h2 {
-family: Verdana, sans-serif;
-size: 1.3em;
text-align:center;
-style: normal;
-weight: 400;
-color: #000000;
} 
h3 {
-family: Verdana, sans-serif;
-size: 1.1em;
text-align:center;
-style: normal;
-weight: 300;
-color: #000000;
}
p {
-family: Verdana, sans-serif;
-size: 1em;
-style: normal;
-weight: 400;
margin-left: 0px;
text-align: left;
padding: left 50px;
text-indent: -6px
}
.quelle {
  -size: 0.8em;
color: DarkSlateGray;
}


}
footer {
	position: fixed;
	padding: 1em;
	bottom: 0;
	left: 0;
	right: 0;
	background: #528b8b;
	border-color: 	#87ceff;
}

footer p {
	float: right;
	margin: 0;
	color: white;
}

footer a {
	color: skyblue;
}
.quelle {
  -size: 0.5em;
color: grey;
text-align: left;
}