@charset "UTF-8";

/* BASICS
============================================================*/

:root {
 --none:transparent;
 --bg-body:rgb(153,153,153);
 --txt:rgb(51,51,51);
 --hx:rgb(0,0,102);
 --link:rgb(0,0,102);
 --hover:rgba(0,0,102,.5);
 --border:rgb(0,0,102);
 --shadow:rgb(0,0,102);
 --shadow-img:rgb(251,2,7);
 --bg-impr:rgba(0,0,102,.9);
 --impr-txt:rgb(255,255,255);
}

.left {text-align:left;}
.right {text-align:right;}
.center {text-align:center;}
.justify {text-align:justify;}
.klein {font-size:.875em;} /* 14px */
.fett {font-weight:600;}
.nowrap {white-space:nowrap;}

/* GENERAL SETTINGS
============================================================*/

body {
	width:100%;
 max-width:1296px;
 min-width:324px;
	margin:0 auto;
 color:rgb(51,51,51);
 color:var(--txt);
	font-family:'Rokkitt', serif;
 font-size:1.125em; /* 18px */
	font-weight:300;
	line-height:1.2;
 background:rgb(153,153,153);
 background:var(--bg-body);
}

h1, h2, h3, h4, h5, h6 {
 color:rgb(0,0,102);
 color:var(--hx);
 font-weight:600;
}

h1 {
 padding:0 0 2vh 0;
 font-size:200%;
}

.h1 {display:none;}

h6 {padding:0 0 30px 0;}

p {margin:0 0 30px 0;}

/* Effect: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */
a, a:link, a:active, a:visited {
 position:relative;
 display:inline-block;
 color:rgb(0,0,102);
 color:var(--link);
 font-weight:400;
 text-decoration:none;
 outline:none;
}

a:hover, a:focus {
 color:rgba(0,0,102,.5);
 color:var(--hover);
 text-decoration:none;
 outline:none;
}

a::before {
 content:attr(data-hover);
 position:absolute;
 top:0;
 left:0;
 max-width:0;
 color:rgba(0,0,102,.5);
 color:var(--hover);
 text-decoration:underline;
 overflow:hidden;
 -webkit-transition:max-width .7s;
 -moz-transition:max-width .7s;
 -ms-transition:max-width .7s;
 -o-transition:max-width .7s;
 transition:max-width .7s;
}
 
a:hover::before, a:focus::before {
 max-width:100%;
 color:rgba(0,0,102,.5);
 color:var(--hover);
}

/* GRUNDGERÜST & INHALTE
============================================================*/

.packer {
 display:grid;
 grid-template-columns:4fr 1fr 2fr;
 grid-template-rows:1fr 1px 3fr;
 grid-gap:0; 
 width:90%;
 height:80vh;
 margin:10vh auto;
 background:rgb(255,255,255);
 background:var( --impr-txt);
 border:solid rgb(0,0,102);
 border:solid var(--border);
 border-width:0 .5px .5px 0; 
 -webkit-box-shadow:10px 10px 30px rgb(0,0,102);
 -webkit-box-shadow:10px 10px 30px var(--shadow);
 -moz-box-shadow:10px 10px 30px rgb(0,0,102);
 -moz-box-shadow:10px 10px 30px var(--shadow);
 box-shadow:10px 10px 30px rgb(0,0,102);
 box-shadow:10px 10px 30px var(--shadow);
 overflow:scroll;
}

@media all and (max-width:756px) {
 .packer {
  grid-template-columns:1fr;
  grid-template-rows: repeat(4, 1fr);
 }
}

.logo_constr {
 grid-area:1/1/2/2;
 align-self:center;
 justify-self:stretch;
 justify-items:center;
}

@media all and (max-width:756px) {
 .logo_constr {
  grid-area:1/1/2/2;
  padding:30px 0;
 }
}

.logo_constr img {
 width:80%;
 height:auto;
}

.kontakt_constr {
 grid-area:1/2/2/4;
 align-self:center;
 justify-self:stretch;
 padding:30px 0 30px 60px;
}

@media all and (max-width:756px) {
 .kontakt_constr {
  grid-area:2/1/3/2;
  padding:30px 0;
  text-align:center;
  border:dotted rgb(0,0,102);
  border:dotted var(--border);
  border-width:1px 0;
 }
}

.trenner {
 grid-area:2/1/3/4;
 border:dotted rgb(0,0,102);
 border:dotted var(--border);
 border-width:1px 0 0 0;
}

@media all and (max-width:756px) {
 .trenner {display:none;}
}

.text_constr {
 grid-area:3/1/4/2;
 align-self:center;
 justify-self:stretch;
 padding:0 3vw 0 2vw;
}

@media all and (max-width:756px) {
 .text_constr {
  grid-area:4/1/5/2;
  padding:30px;
 }
}

.slide_constr {
 grid-area:3/2/4/4;
 align-self:center;
 justify-self:center;
 margin:0 30px 0 0;
 padding:1px;
 background:rgb(255,255,255);
 background:var( --impr-txt);
 -webkit-box-shadow:3px 3px 7px rgb(251,2,7), -3px -3px 7px rgb(251,2,7);
 -webkit-box-shadow:3px 3px 7px var(--shadow-img), -3px -3px 7px var(--shadow-img);
 -moz-box-shadow:3px 3px 7px rgb(251,2,7), -3px -3px 7px rgb(251,2,7);
 -moz-box-shadow:3px 3px 7px var(--shadow-img), -3px -3px 7px var(--shadow-img);
 box-shadow:3px 3px 7px rgb(251,2,7), -3px -3px 7px rgb(251,2,7);
 box-shadow:3px 3px 7px var(--shadow-img), -3px -3px 7px var(--shadow-img);
}

@media all and (max-width:756px) {
 .slide_constr {
  grid-area:3/1/4/2;
  margin:40px 10px;
 }
}

@keyframes slidy {
 0% {left:0;}
 10% {left:0;}
 20% {left: -100%;}
 30% {left: -100%;}
 40% {left: -200%;}
 50% {left: -200%;}
 60% {left: -300%;}
 70% {left: -300%;}
 80% {left: -400%;}
 90% {left: -400%;}
 100% {left: 0;}
}

#slider {overflow:hidden;}

#slider figure img {
 float:left;
 width:20%;
 overflow:hidden;
}

#slider figure {
 position:relative;
 width:500%;
 -webkit-animation:30s slidy infinite;
 -moz-animation:30s slidy infinite;
 animation:30s slidy infinite;
}

.impr_link {
 position:fixed;
 bottom:10px;
 left:0;
 width:100%;
 overflow:scroll;
 z-index:20;
}

a.i_a, a.i_a:link, a.i_a:active, a.i_a:visited {
 padding:10px;
 font-size:.75em;
 font-weight:100;
}

a.i_a:hover, a.i_a:focus {font-weight:400;}

.impr_link a::before {
 padding:10px;
 text-decoration:none;
}

.impr_inhalt {
 display:none;
 position:fixed;
 top:0;
 left:15%;
 width:70%;
 height:100vh;
 padding:30px;
 color:rgb(255,255,255);
 color:var(--impr-txt);
 background:rgb(51,51,51);
 background:var(--txt);
 overflow:scroll;
 z-index:10;
}

@media all and (max-width:756px) {
 .impr_inhalt {
  left:0;
  width:100%;
 }
}

.h2_impr {
 padding:0 0 2vh 0;
 color:white;
 font-size:125%;
}

a.i_i, a.i_i:link, a.i_i:active, a.i_i:visited {
 color:rgb(255,255,255);
 color:var(--impr-txt);
 text-decoration: underline;
}

.closed {  }
.open {
 background:rgb(255,255,255);
 background:var(--impr-txt);
}