@-webkit-keyframes in {
    from   { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(180deg);}
}

@-webkit-keyframes out {
    0%   { -webkit-transform: rotate(180deg); }
    100% { -webkit-transform: rotate(0deg); }
}

.coming-soon {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	position: fixed;
	z-index:9999;
	text-align: center;
	font-size: 5vh;
	color:white;
}
.coming-soon p {
	background: rgba(0, 0, 0, 0.6);
	width:80%;
	margin: 40vh auto;
}
.goback a {
	position:absolute;
	color:white;
	top:0;
	left:0;
	margin-top: 3vh;
	margin-left:3vw;
	font-weight: bold;
}
body {
 font-family: 'Montserrat', sans-serif;
  margin: 0;
}
a {
	text-decoration: none;
	color: black;
}
.footer a {
	color: black;
}

* {
  box-sizing: border-box;
}
.mobile-header {
	text-align: center;
	font-size: 1vw;
	
}	
.header-bg {
	height: 50vh;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	
}
.abild1 {
	background: url("1.jpg");
}
.abild2 {
	background: url("2.jpg");
}
.abild3 {
	background: url("5.jpg");
}
.abild4 {
	background: url("3.jpg");
}
.bg1 {
	background: url("blog.jpg");
	background-position: center;
	background-size: 100%;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}	
.header-text {
	background: white;
	margin:15vh auto;
	width: 40%;
	height:20vh;
	color: black;
    mix-blend-mode: screen;
}
.mobile-header h2{
	font-size: 3vw;
	padding-bottom: 0;
	margin-bottom: 0;
	/* color: #156131; */	
}
nav {
	margin: 0 auto;
	margin-bottom: 0;
	width: 100%;
	text-align: center;
	background-color: white;
	
	height: 7%;
}
.nav1 {
	display: inline-block;
	margin: 0 ;
	background-color: white;
	padding: 1% 2.5%;
	height:5%;	
	font-size: 3vh;
	top: 50%;
	color: #156131;
}
.nav1:hover {
	text-decoration:underline;
}

.un {
  display: inline-block;
}

.un::after {
  content: '';
  width: 0px;
  height: 2px;
  display: block;
  background: #156131;
  transition: 400ms;
}

.un:hover::after {
  width: 100%;
}
.inner-part .language-window p {
	font-size: 1.5vh;
}
.language-mob  {
	width:70%;
	left: 15%;
	top: 25%;
	height: 20%;
	margin: 0 0;
	padding: 0;
	display: inline-block;
}
.language-mob img {
	width: 20%;
}
.inner-part {
	width: 60%;
	margin-left: 20%;
	position: fixed;
	top: 35%;
	height: 30%;
	background-color: white;
	color: black;
	
	text-align: center;
	position: absolute;
	
}
.inner-part h2 {
	font-size: 4vh;
	
}
.inner-part p {
	font-size: 3vh;
	width: 90%;
	margin-left: 5%;
}
.close2 {
	position:absolute;
	right: 5px;
	top: 5px;
	background-color: ;
	font-size:4vh;
	padding: 0.5%;
	cursor: pointer;
	color: black;
}

.close2:hover {
	background-color: red;
	color: white;
	
}
.close2:hover .cl {
	-webkit-animation: in 1s;
	animation-fill-mode: forwards;
}
.cl {
	-webkit-animation: out 1s;
}


.prints {
	width: 40%;
	margin-left: 30%;
	position: fixed;
	top: 30%;
	height: 40%;
}

.contact {
	width: 40%;
	margin-left: 30%;
	position: fixed;
	top: 30%;
	height: 40%;
	
}
#contact {
	display:none;
}
.contact p {
		text-align: left;
}
.fenster {
	text-align: center;
	position: fixed;
	width: 100%;
	height: 200%;
	display: inline;
	position: fixed;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.4);
	display: none;
}
.article-area {
	background: ;
	width:80vw;					/* mob 100 */
	text-align: center;
	margin: 0 10vw;
}
.article {
	display: flex;
	flex-direction: row;
	height: 33vh;
	background-color: ;
	margin-bottom:2vh;
}
.article-bild {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 30%;
	height: 100%;

}
.article-bild img{
	width: 100%;
	padding: 10%;
	padding-top: 7%

}
.article-text {
	overflow: hidden;
	width:70%;
	
}
.article-hline {
	font-size:2vw;
	font-weight: bold;
	height: 5vh;
}
.tags {
	font-size:1.5vw;
	margin-left: 5vw;
	color: grey;
	text-align: left;
	height: 4vh;

}
.article-abstract {
	text-align: left;
	padding: 2% 10%;
	font-size: 1vw;
	height: 18vh;
}
.article-mehr {
	display: none;
}
.article-weniger {
	display: none;
}
.article-read {
	color: white;
	height:6vh;
	width: 100%;
	text-align: center;
}
.article-read-innen  {
	margin:1.25vh auto;
	background-color: #156131;
	padding: 0.5vh;
	width: 15vh;
	-webkit-animation: smooth-zoom-out 1s;
	font-size: 1.2vw;
	cursor: pointer;
}

.article-read-innen:hover{
	-webkit-animation: smooth-zoom-in 1s;
	animation-fill-mode: forwards;
}
.article-read a{
	color: white;
}
.article-container2 {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.footer {
	text-align: center;
	margin-top: 3%;
	background-color: white;
	padding-top: 2%;
	padding-right: 2%;
	padding-left: 2%;
	font-size: 1vw;
}
.footer p {
	padding-bottom: 1%;
}
.footerbox {
	width: 5%;
	display: inline-block;
	text-align: center;
	margin: 0 2%;
}
.footerbox img {
	-webkit-animation: out 1s;
	width:60%;
	max-width:100px;
}
.footerbox:hover img {
	-webkit-animation: in 1s;
	animation-fill-mode: forwards;
}
.mobile-only {
	display: none;
}
.topics {
	text-align: center;
	color: grey;
	flex-direction: row;
	padding-bottom: 0vh;
}
.topics-hidden {
	text-align: center;
	color: black;
	display: none;
	width: 50%;
	margin-left: 25%; 
}
.tag {
	margin: 6vh auto;
	cursor: pointer;
}

.cats {
	font-size: 1vw;
	cursor: pointer;
}
@media only screen and (max-width: 1100px) {
 .line {
	 width:80vw;
	 background-color: green;
	 height:0.5vh;
	 margin: auto;
 }
 
 .topics {
	 padding-bottom: 0;
	 text-align: center;
}
.cats {
	font-size: 5vw;
}
.topics-hidden {
	flex-direction: column;
	width: 100%;
	margin-left: 0;
}
.tag {
	display: inline;
	margin: 2vh auto;
}
 
 .article-area {
	width:100%;					/* mob 100 */
	margin: 0 0%;
		
}
.article {
	display: flex;
	flex-direction: column;
	height: auto;
	margin-bottom:5vh;
}
.article-bild {
	width: 100%;
	height: 30vh;
}

.article-text {
	width:100%;
}
.article-hline {
	font-size:4vw;
}
.tags {
	font-size:3vw;
	margin-left: 10%;
}
.article-abstract {
	padding: 2% 5%;
	font-size: 3vw;
	height: 30vh;
	
}
.mobile-beschr {
	display:none;
}
.article-mehr {
	font-weight: bold;
	display: block;
}
.article-weniger {
	font-weight: bold;
}
.article-read {
	color: white;
	margin: 0 auto;
	margin-top: -10vh;
	

}
.article-read-an {
	color: white;
	margin: 0 auto;
	margin-top: -10vh;
	animation-name: runter;
	animation-duration:0.5s;
	animation-fill-mode: forwards;
}
.article-read-an2 {
	color: white;
	margin: 0 auto;
	margin-top: -10vh;
	animation-name: hoch;
	animation-duration:0.5s;
	animation-fill-mode: forwards;
}
.article-read-innen  {
	font-size: 3.5vw;
	animation-name: none;
	width: 20vw;
	background-color: #156131;
}
@-webkit-keyframes runter {
    from   {margin-top: -10vh; }
    to { margin-top: 0vh;}
}

@-webkit-keyframes hoch {
    0%   { margin-top: 0vh;  }
    100% { margin-top: -10vh;  }
}
 .nav1 {
	 font-size: 5vw;
 }
 .mobile-header {
	text-align: center;
	font-size: 4vw;
	background-color: ;
}	
.mobile-header h2{
	font-size: 8vw;
	padding-top:5%;
}
 
 .mobile {
	 display: flex;
	 flex-direction: column;
 }
.bild2 {
	flex: 100%;
	width: 100%;
	padding: 2%;
}
.bild2 img {
	width: 100%;
}
.beschreibung {
	font-size: 4.5vw;
		border-width: 0 0 0.6vw 0;
	border-style: solid;
	border-bottom-color: grey;
}
.beschreibung-innen {
	width: 100%;
	background-color: white;
	position: static;
}
.port2 img {
	margin-left: 0;
	width: 100%;
}
.page{
	padding: 7% 2%;
	border-width:0.5vw;
	width: 30%;
}
.nextpages {
	width: 40%;
}

}
@media only screen and (max-width: 1100px) {
.article-read {
	color: white;
	margin: 0 auto;
	margin-top: -7vh;
}
.article-container2 {
	margin-top: 2vh;
}
.tags {
	font-size: 2vh;
}
.header-bg {
	height: 55vh;
}
.header-text {
	
	width: auto;
	padding: 0 5vh;
	height:17vh;
	color: black;
    mix-blend-mode: screen;
	font-size: 3vh;
}
.header-text p {
	margin: 2vh auto;
}

.mobile-header h2{
	font-size: 6vw;
	padding-bottom: 0;
	margin-bottom: 0;
	margin-top: 0;
	/* color: #156131; */	
}
.article-read-an {
	color: white;
	margin: 0 auto;
	margin-top: -7vh;
	animation-name: runter2;
	animation-duration:0.5s;
	animation-fill-mode: forwards;
}
.article-read-an2 {
	color: white;
	margin: 0 auto;
	margin-top: -7vh;
	animation-name: hoch2;
	animation-duration:0.5s;
	animation-fill-mode: forwards;
}

.footer {
	font-size: 2.5vw;
}
  .footerbox {
    width: 17%;
  }
.article-abstract {
	height: auto;
	
	
}
.article-hline{
	margin-top: 0vh;
	font-size: 2.5vh;
	height: auto;
}
.article-read {
	margin-top: 1vh;
}
.article-read-innen {
	animation-name: none;
	animation-duration:0s;
	width: 40vw;
	font-size: 2.5vh;
	padding: auto;
	margin: auto;
	margin-top: 0;
}
.article-read-innen:hover{
	-webkit-animation: none;
	animation-fill-mode: forwards;
}
@-webkit-keyframes runter {
    from   {margin-top: -18vh; }
    to { margin-top: -10vh;}
}

@-webkit-keyframes hoch {
    0%   { margin-top: -10vh;  }
    100% { margin-top: -18vh;  }
}	
@-webkit-keyframes runter2 {
    from   {margin-top: -7vh; }
    to { margin-top: 0vh;}
}

@-webkit-keyframes hoch2 {
    0%   { margin-top: 0vh;  }
    100% { margin-top: -7vh;  }
}	
	
	
}
@media only screen and (max-width: 700px) {

.mobile-header h2{
	font-size: 12vw;
	.article-read {
	color: white;
	margin: 0 auto;
	margin-top: -18vh;
}
.header-text {
	margin:22.5vh auto;
	width: auto;
	height:17vh;
	color: black;
    mix-blend-mode: screen;
	font-size: 5vw;
}
.article-abstract{
	padding: auto;
}
.article-read-an {
	color: white;
	margin: 0 auto;
	margin-top: -18vh;
	animation-name: none;
	animation-duration:0s;
	animation-fill-mode: forwards;
}
.article-read-an2 {
	color: white;
	margin: 0 auto;
	margin-top: -18vh;
	animation-name: none;
	animation-duration:0s;
	animation-fill-mode: forwards;
}
.article-read-innen {
	animation-name: none;
	animation-duration:0s;
}
  .footerbox {
    width: 17%;
  }
}
@-webkit-keyframes in {
    from   { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(180deg);}
}

@-webkit-keyframes out {
    0%   { -webkit-transform: rotate(180deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes smooth-zoom-in{
	from	{ width: 15vh; font-size:1.2vw;}
	to	{ width: 17vh; font-size:1.3vw;}
}
@-webkit-keyframes smooth-zoom-out{
	0%	{ width:17vh; font-size:1.3vw;}
	100%	{ width: 15vh; font-size:1.2vw;}
}