@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: 'Glyphicons Regular';
  src: url('fonts/glyphicons-regular.eot');
  src: url('fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'), url('fonts/glyphicons-regular.woff2') format('woff2'), url('fonts/glyphicons-regular.woff') format('woff'), url('fonts/glyphicons-regular.ttf') format('truetype'), url('fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
  font-display: swap;
}
@font-face {
    font-family: 'Papas_Schreibmaschine';
    src: url('fonts/papas_schreibmaschine-regular-webfont.eot');
    src: url('fonts/papas_schreibmaschine-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/papas_schreibmaschine-regular-webfont.woff2') format('woff2'), url('fonts/papas_schreibmaschine-regular-webfont.woff') format('woff'), url('fonts/papas_schreibmaschine-regular-webfont.ttf') format('truetype'), url('fonts/papas_schreibmaschine-regular-webfont.svg#papas_schreibmaschineregular') format('svg'); font-weight: normal; font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'opensans_bold';
    src: url('fonts/OpenSans-Bold-webfont.eot');
    src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body, html {
 /*height: 100%;
 margin: 0;*/
/*text-align: center;*/
}

a[href^=tel] {btext-decoration:inherit; color: inherit;}

body {margin: 0; background-color: #000023; color: #fff; text-align: center; background-image: url("../data/img/stars2bg.png");background-size: cover;}

.container { position: relative; height: 100vh; width: 100vw; display: flex; flex-direction: column; justify-content:center; background-size: contain }
.webp .container {background-image: url("../data/img/stars2.webp");}
.no-webp .container {background-image: url("../data/img/stars2.png");}

h2, h3 {font-family: 'Open Sans', sans-serif; font-weight: normal; letter-spacing: 3px; font-size: .85em; width: 100%; display: block; text-align: center; text-transform: uppercase;}
h3 {font-size: .55em; font-weight: normal; margin-top: -5px !important}
h3.daten {margin-top: -12px !important}
h3 b {font-size: 1.75em !important; font-weight: normal !important; position: relative; top:2px; margin-right: 4px;}
h3 b:first-child {top:5px}

br.mobile {display: none;}

.langbtn {position: absolute; border-radius: 50%; font-family: 'Papas_Schreibmaschine', Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"; font-size: 1.75em; line-height: 0px; background:rgba(139, 169, 137, 0.75); display: block; width: 50px; height: 50px; margin: 0 auto; box-sizing: border-box; text-align: center; float: right; z-index: 300; margin-left: 620px; margin-top: -30px; -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); padding-top:26px; transition: .75s; color: #fff; text-decoration: none}
.langbtn:hover {background:rgba(70, 110, 70, 1); cursor: pointer;}
.langbtn span.langmob {display: none}

.playerbox {width: 90%; height: 60vh; margin: 0 auto; margin-top: 20px; max-width: 600px}

.txtlink {width: 90%; text-align: center; max-width: 600px; margin: 0 auto;}
.txtlink .txt {width: 40%; float: left; line-height: 58px}
.txtlink.closebtn .txt {float:none !important}
.txtlink .txt a {font-family: 'Open Sans', sans-serif; font-weight: normal; letter-spacing: 1px; font-size: .85em; color: #fff; transition: .75s; text-decoration: none; text-transform: uppercase; padding: 6px;}
.txtlink .txt a:hover {background-color: #8BA989; cursor: pointer;}
.txtlink .txt a.about {padding-left: 30px; border-radius: 20px 5px 5px 20px}
.txtlink .txt a.close {padding: 6px 30px 6px 54px; border-radius: 0px 0px 10px 10px; background: rgba(139, 169, 137, 0.75);font-family: 'opensans_bold', sans-serif; }
.txtlink .txt a.close:hover {background:rgba(70, 110, 70, 1); cursor: pointer;}
.txtlink .txt a.close.flipcard {background:rgba(33,89,192,1.00);}
.txtlink .txt a.close.flipcard:hover {background:rgba(0,23,118,1);}
.txtlink .txt a.more {padding-right: 28px; border-radius: 5px 20px 20px 5px}
.txtlink .txt a.about:before, .txtlink .txt a.close:before, .txtlink .txt a.more:after, .langbtn span.langmob:before {font-family: 'Glyphicons Regular'; font-size: 1.5em; position: absolute;}
.txtlink .txt a.about:before {content: "\E196"; margin-left: -26px}
.txtlink .txt a.close:before {content: "\E193"; margin-left: -26px;}
.txtlink .txt a.more:after {content: "\E218";margin-left: 4px}
.langbtn span.langmob:before {content: "\E108"; margin-left: -26px;}
.txtlink .txt.left {text-align: left;}
.txtlink .txt.right {text-align: right;}
.txtlink .img {width: 20%; float: left}
.txtlink .img img {margin: 0 auto; width: 70px; height: auto; margin-top: 10px}

.card {
    background: rgba(0,0,0,0.75);
    position: absolute;
    display: block;
    height: 0vh;
    z-index: 200;
    width: 100vw;
}

.slidercontainer {
    /*border:1px solid lime;*/
    overflow:hidden;
    position:absolute;
    /* the container's height will determine the height of its slider  */
    height: 0vh; 
    z-index: 100;
}

.slidercontainer .txtlink, .card .txtlink { 
    position: fixed !important; z-index: 200; max-width: none; width: 100%;
}

.slidercontainer .txtlink .txt, .card .txtlink .txt {float: none; margin: 0 auto; margin-top: -14px}

.slider {
    font-family: 'Papas_Schreibmaschine', Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
    font-size: 1.5em;
	/*overflow-y: scroll;*/
    overflow: auto;
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
            box-sizing:border-box;
    padding:5% 10% 10% 10%;
    /*background: #f0e6dc url("img/ppr1.jpg");*/
    /*background: rgba(240, 230, 220, 0.9); */
    color: #212121;
    text-align: left;
    /*border:1px solid hotpink;*/
    
    height:100%; /* complete liquid height based on the parent's height!! */

    /* only transition on transform properties which are hardware accelerated = way better performances */
	-webkit-transition:-webkit-transform .3s ease;
       -moz-transition:   -moz-transform .3s ease;
        -ms-transition:    -ms-transform .3s ease;
            transition:        transform .3s ease;
}
.webp .slider {background: #f0e6dc url("img/ppr1.webp");}
.no-webp .slider {background: #f0e6dc url("img/ppr1.jpg");}

.slider a.link {color: #000; text-decoration: none; transition: .75s; padding: 0.2em}
.slider a.link:hover { text-decoration: underline; background-color: #8BA989; color: #fff; cursor: pointer;}


.slider.opened { 
    /* visible */
    -webkit-transform: translate(0, 0%);
       -moz-transform: translate(0, 0%);
        -ms-transform: translate(0, 0%);
            transform: translate(0, 0%);
}
.slider.closed { 
    /* completely offscreen */
    -webkit-transform: translate(0, -100%);
       -moz-transform: translate(0, -100%);
        -ms-transform: translate(0, -100%);
            transform: translate(0, -100%);
}

.slider p.headline {
    /*position: relative;
    display: block;
    margin: 20px 0 20px 0;*/
    text-align: center;   
}
.slider p.zeitung {
    position: relative;
    font-size: 1em;
    padding: 5%;
    /*display:block;*/
    border-radius: 10px;
    -webkit-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
            transform: rotate(-1deg);
    -webkit-box-shadow: -1px -1px 6px 1px rgba(153,138,114,0.31); 
    box-shadow: -1px -1px 6px 1px rgba(153,138,114,0.31);
    /*TEST*/
}
.webp .slider p.zeitung {background: #fff url("img/ppr2.webp");}
.no-webp .slider p.zeitung {background: #fff url("img/ppr2.jpg");}
.slider p.small {font-size: .85em}
.slider p.impressum {font-size: .85em; display: block; text-align: center}

@media(min--moz-device-pixel-ratio:0) {
    .slider p.zeitung  {
      -moz-transform: rotate(0deg);
           transform: rotate(0deg);
    }
}

.slider img.bild01 {
    position: relative; width: 80vw; height: auto; max-width: 600px; float: left; margin-right: 20px;
}
.slider img.bild02 {
    position: relative; width: 50vw; height: auto; max-width: 400px; margin: 0 auto; display: block;
}
.slider img.bild03 {
    position: relative; width: 50vw; height: auto; max-width: 400px;  float: left; margin-right: 20px; cursor: pointer;
}
.slider img.bild04 {
    position: relative; width: 50vw; height: auto; max-width: 150px; margin: 0 auto; display: block;
}

@media (min-width: 43em){
  h1 {
    font-size: 3.75rem;
  }
}