@import url('https://fonts.googleapis.com/css?family=PT+Mono|PT+Sans');
* { color: #000; margin: 0; padding: 0; border: 0; outline: 0;  box-sizing:border-box }

html, body { background-color:#accdda; }

body { font: 15px/150% 'PT Sans', sans-serif; text-rendering: optimizeLegibility; margin: 1em auto; position:relative;  max-width: 1024px; background: white; padding: 1em; }

header, main, footer { margin-bottom: 2em; }

a { white-space: nowrap; text-decoration:none; }

h1, h2, h3, h4, h5, h6 { font-size: 2em; line-height: 150%; font-family: 'PT Mono', monospace; font-weight: bold; }
p { font-family: 'PT Sans', sans-serif; margin-bottom: 0.95em; hyphens: auto; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphenate-limit-chars: 4 3; hyphenate-limit-lines:2 }
p:empty { display:none }
strong, b { font-weight:bold; }
ul, ol, li { list-style: none; display:block }

.center { text-align: center; }
.block { text-align: justify; }
.einzug { padding-left: 1em !important; }
.versal { text-transform: uppercase; letter-spacing: 0.5em; }

div.flex { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start; height:100% }
div.flex.justify-content-center { justify-content:center }
div.flex.justify-content-end { justify-content:flex-end }
div.flex.align-content-center { align-content:center }
div.flex.align-content-end { align-content:flex-end }
div.flex.align-items-center { align-items:center }
div.flex.align-items-end { align-items:flex-end }

.col { display: block;  padding:1em }
.col-1  { width:8.3333333333% }
.col-2  { width:16.6666666667% }
.col-3  { width:25% }
.col-4  { width:33.3333333333% }
.col-5  { width:41.6666666667% }
.col-6  { width:50% }
.col-7  { width:58.3333333333% }
.col-8  { width:66.6666666667% }
.col-9  { width:75% }
.col-10 { width:83.3333333333% }
.col-11 { width:91.6666666667% }
.col-12 { width:100% }

header { position: relative; background: center center no-repeat url(/lib/titel_image-c20.png); background-size: cover; }
header:before { content:""; padding-top: 56%; display: block; }
header iframe { position: absolute; height: 100%; width: 100%; top: 0; right: 0; left: 0; bottom: 0; }

div.live { display: inline-block; background: #eee; width: 12em; height: 12em; border-radius: 50%; overflow: hidden; cursor: pointer; }
div.live:hover { background: #e48d63; }
div.live a span { display: block; font-size: 4em; font-weight: bold; color: #fff; line-height: 0; margin-top: 1.5em; }
div.live a { display: block; height: 100%; }



@media (max-width: 767.98px) {
    
    body { margin: 0; padding: 0.5em; }
    h1, h2, h3, h4, h5, h6 { font-size: 1.5em; }
    
    div.flex { display: block; }
    div.col { width: 100% !important; }

}