@font-face {font-family: 'BenchNine-Regular'; src: url("../../zutaten/schriften/BenchNine-Regular.ttf"); src: local('BenchNine-Regular'),url("../../zutaten/schriften/BenchNine-Regular.ttf") format('ttf'),url("../../zutaten/schriften/BenchNine-Regular.ttf") format('opentype');}

body, html {height: 100%; background-image:url(../../grafik/hintergrund-2.png);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

body {-webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal;-webkit-box-direction: normal;-webkit-flex-direction: row; -ms-flex-direction: row;flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center ;margin-left:10px;margin-right:10px;-webkit-box-shadow: inset 0 0 9.375em rgba( 0, 0, 0, .3 ); /* 150 */-moz-box-shadow: inset 0 0 9.375em rgba( 0, 0, 0, 3 ); /* 150 */box-shadow: inset 0 0 9.375em rgba( 0, 0, 0, .3 ); /* 150 */margin: 0; padding: 0; border: 0;}

/* Markierungsfarbe */

::selection {background: #7e007a; color: #FFFFFF;} /* und hiermit der Firefox >=1 */ ::-moz-selection {background: #7e007a; color: #FFFFFF;}
å

.group {border-radius: 9999px;border:1px solid #000;height: 250px;margin:1%;overflow: hidden;width: 250px;}

.group > div {background-color: #a8a8a8;background-position: 50% 50%;background-size: cover;float: left;height: 100%;width: 50%;}

.group > div:first-child:last-child {width: 100%;}

.group > div:last-child:nth-child(3), .group > div:nth-child(2):nth-last-child(2) {height: 50%;}

h1 {font-size: 2.0em;font-family: 'BenchNine-Regular'; color:#000;line-height: 1.1em; text-decoration: none; font-weight: 100;margin-bottom:0.0em; margin-top:0.2em;letter-spacing: 0.03em;cursor: default;text-align: center;animation: fadeout 0s forwards;} @keyframes fadeout {0% {opacity: 0;} 100% {opacity: 1;}}
h1 a {text-decoration: none;color:#000; }
h1 a:hover {text-decoration: none; color:white;}

.wrapper.style-start {text-align: center;color: white;}
.wrapper.style-start .image {display: block;width: 100%;}
.wrapper.style-start .image img {border-radius: 50%;border: 1px solid;border-color:#666;}

.wrapper.style-start .image img.link {display: block; margin: 0 0 2em 0; width: 100%; border:1px solid #999;}
.wrapper.style-start .image img:hover {-webkit-box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, .75); box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 1.0);}
.wrapper.style-start .image img {-webkit-box-shadow: 0px 0px 10px 5px rgba(0, 185, 233, .75); -webkit-transition: all 0.5s ease;transition: all 0.4s ease; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.4); margin: 0 0 0.4em 0;animation: fadeout 0s forwards;} @keyframes fadeout {0% {opacity: 0;} 100% {opacity: 1;}}

.fahnen img.link {width: 100%; border:0px solid #999; display: block; margin: 0 0 0.4em 0;}
.fahnen img:hover {-webkit-box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.75); box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.75); margin: 0 0 0.4em 0;}
.fahnen img {-webkit-box-shadow: 0px 0px 10px 5px rgba(0, 185, 233, 0.5); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.4); margin: 0 0 0.4em 0;border:1px solid #666; animation: fadeout 0s forwards;} @keyframes fadeout {0% {opacity: 0;} 100% {opacity: 1;}}

/* Container */

.container {max-width: 600px; position: relative; width: calc(100% - 32px); margin: 0 auto; transition: max-width 0.3s; color: #000;}
.container.\31 25\25 {width: 100%; max-width: 100em; min-width: 80em;}
.container.\37 5\25 {width: 60em;}
.container.\35 0\25 {width: 40em;}
.container.\32 5\25 {width: 20em;}


.image.fit {display: block; width: 100%; animation: fadeout 0s forwards;} @keyframes fadeout {0% {opacity: 0;} 100% {opacity: 1;}}
.image.fit img {border: 1px solid #777; height: 80%;}