/* Global */
@font-face {
    font-family: "Gothic A1";
    src: url("../fonts/GothicA1-Regular.ttf");
}
@font-face {
    font-family: "Gothic A1";
    src: url("../fonts/GothicA1-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "Gothic A1";
    src: url("../fonts/GothicA1-Light.ttf");
    font-weight: lighter;
}


*,
*::before,
*::after { 
	padding: 0;
    box-sizing:border-box; 
	font-family: 'Gothic A1', sans-serif;
}

html, 
body {
    /*height: 100%;*/
}

img {
	max-width:100%;
}

a {
	text-decoration: none;
}

.container {
	padding: 0 1rem 1rem 1rem;
	height: 100%;
	width: 90%;
	margin:auto;
}

.scroll_animation {
    -webkit-transition: top .3s linear;
       -moz-transition: top .3s linear;
        -ms-transition: top .3s linear;
         -o-transition: top .3s linear;
            transition: top .3s linear;
}	


/* HEADER */
header {
	/* position: fixed;only if width < 1050px and height > 1000px  */
	/*position: relative;*/
    display: flex;
    flex-direction: row;
    color: #808080;
    z-index: 100;
    /* min-height: var(--header-height); */
    justify-content: space-between;
    /*width: calc(90% - 2rem);*/
	top: 16px;
	background-color: white;
}

header a, header span {
	color: #4c4b4b;
}

.language-div:hover a {
	color: #6CF;
	font: bold;
}

.left-header {
	display: flex;
	flex: 1.5;
    flex-direction: column;
}

.adress-div {
	flex: 2;
}

.languages-div {
	display: flex;
	flex: 1;
	flex-direction: row;
	align-items: center;
}

.language-div:not(:last-child) a::after {
	content: "";
	margin: 5px;
	border: 1px solid black;
}

.language-div:not(:last-child) {
    /*margin-right: 10px;*/
}

.link_active {
	font-weight: bold;
	color: #2F5496
}

.language-div a {
	align-items: center;
    display: flex;
}

.right-header {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: flex-end;
}

/* Slider */
.slider-container {
	height: 300px;
	width: 100%;
	box-sizing: border-box;
	 margin-top: 25px;
	/* margin-top: 125px; only if width < 1050px and height > 1000px */ 
}

.slider-container2 {
	height: 300px;
}

.arrow_left {
	font-size: 3rem;
	cursor: pointer;
}

.arrow_right {
	font-size: 3rem;
	cursor: pointer;
}


/* Content */
.content {
	/*height: var(--content-height);*/
	margin: 1rem 0;
	display: flex;
    flex-direction: column;
}

.top-row, .bottom-row {
	display: flex;
    flex: 1;
	flex-direction: row;
	justify-content: space-around;
	margin: 1rem 0;
}

.yellow-button, .blue-button{
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	
	height: 150px;
	width:100%;
	border-radius:5px;
	padding:1rem;
	
	box-shadow: 3px 3px 15px #7d7c7c;
}

.yellow-button{
	background-color: #FFE699;
	color: #2F5496;
	justify-content: center;
}

.blue-button {	
	background-color: #CEDFF6;
	color: #2F5496;
	justify-content: center;
}

.button-div {
	margin: 0;
	
	justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
	max-width:25%;
	min-width:25%;
	cursor: pointer;
	text-align:center;
	font-size: calc(0.5vw + 10px);
}

.button-div > h1,h2,h3,h4,h5 {
	text-align:center;
}


.kachel p:first-of-type {
	display: block;
    font-weight: bold;
	justify-content: center;
}



.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


.container-formular {
	margin-top:15px;
}

/* Für IE 10 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.content { 
		height: 440px;
	}
	.kachel p {
		word-break: break-word;
		word-wrap: break-word;
		width: 100%;
	}
	
}

@media screen and (max-width: 1050px) {
	.content { 
		height: auto;
	}
	
	/* Für IE 11 */
	_:-ms-lang(x), .content {
		display: block;
	}
	
	header {
		/*position: relative;*/
		display: flex;
		flex-direction: row;
		color: #808080;
		z-index: 100;
		top: 16px;
		/*min-height: var(--header-height);*/
	}
	
	.slider-container {
		height: 300px;
		width: 100%;
		box-sizing: border-box;
		margin-top: 25px;
	}
	
	.top-row, .bottom-row {
		
		margin: 0 0;
	}

}
/* Für IE 11 */
_:-ms-lang(x), .yellow-button, .blue-button {
	box-sizing: content-box;
}
_:-ms-lang(x), .ie-class { 
	height: 450px; 
	box-sizing: content-box;
}

_:-ms-lang(x), .kachel {
	
	
}

_:-ms-lang(x), .kachel p {
	word-break: break-word;
 	 word-wrap: break-word;
 	 width: 100%;
}

/**************************************** slide-in-out-animation ****************************************/
@media (hover: hover), (-moz-touch-enabled:0) {


.kachel p:first-of-type {
	
	top: 0%;
	display: flex;
	align-items: center;
	height: 100%;
	font-size: 1.5rem;
}


.kachel p:nth-of-type(2) {
	top: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
}

.kachel_text {
	top: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
}

.kachel p {
	padding: 5px;
}


.io-animation {
	overflow: hidden;
	position: relative;
}


.io-animation > p {
	position: absolute;
	/* animate initial appearance and whenever state returns to normal from :hover */
	
	-webkit-animation-name: translate-in;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	
	animation-name: translate-in;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	
	-ms-animation-name: translate-in;
	-ms-animation-duration: 0.5s;
	-ms-animation-timing-function: ease-in-out;
	-ms-animation-delay: 0s;
	-ms-animation-iteration-count: 1;
	 
    animation: translate-in 0.5s 1 easy-in-out forwards;
}

.io-animation:hover p {
    
    /* animate on hover */
	-webkit-animation-name: translate-out;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	
	animation-name: translate-out;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	
	-ms-animation-name: translate-out;
	-ms-animation-duration: 0.5s;
	-ms-animation-timing-function: ease-in-out;
	-ms-animation-delay: 0s;
	-ms-animation-iteration-count: 1;
    
    /* Keep the state after the animation has finished */
    -webkit-transform:translateY(-100%);
	-ms-transform: translateY(-100%);
    transform:translateY(-100%);
	
}



/* Keyframes */
@-webkit-keyframes translate-in {
	0%   { -webkit-transform:translateY(-100%); }
	100% { 
		-webkit-transform:translateY(0%); 
	}
}
@keyframes translate-in {
	0%   { transform:translateY(-100%); }
	100% { transform:translateY(0%); }
}

@-webkit-keyframes translate-out {
	0%   { -webkit-transform:translateY(0%); }
	100% { -webkit-transform:translateY(-100%); }
}
@keyframes translate-out {
	0%   { transform:translateY(0%); }
	100% { transform:translateY(-100%); }
}
/* ------------------ IE ------------------------------ */
@-ms-keyframes tranlate-in {
	0%   { -ms-transform:translateY(-100%); }
	100% { -ms-transform:translateY(0%); }
}
@-ms-keyframes tranlate-out {
	0%   { -ms-transform:translateY(0%); }
	100% { -ms-transform:translateY(-100%); }
}
/* -------------- End IE ------------------------------ */


} /* @media (hover: hover), (-moz-touch-enabled:0) { */
/**************************************** End slide-in-out-animation ****************************************/


/*
@media  (pointer: none), (pointer: coarse) {
	.kachel_ueberschrift {
		top: 0%;
		display: flex;
		align-items: center;
		height: 25%;
	}
	
	.kachel_text {
		top: 0%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: 75%;
	}
	
	.io-animation > span {
		position: relative;
	}

}
*/




/* Footer */
footer {
	display: flex;
	padding-bottom: 1rem;
	color: #2F5496;
}

footer {
	display: flex;
	align-items: center;
}

.copyright-div {
	display: flex;
	flex: 1;
}

.footer-links-div {
	display: flex;
	flex: 1;
	justify-content: flex-end;
}



	.kachel p:first-of-type {
	
		padding: 5px;
	}


@media screen and (min-width: 1450px) and (max-width: 1733px) {
	.erste_kachel p:first-of-type {
	
		padding: 0px !important;
	}
}


@media screen and (max-width: 1050px) {
	.container {
		width: 95%;
	}
	
	.top-row, .bottom-row{
		flex-direction: column;
		align-items: center;
	}
	
	
	.yellow-button{
		justify-content: center;
	}
	  
	.button-div {
		max-width:65%;
		min-width:65%;
		margin: 0.5rem 0;
		font-size: 17px;
	}
}

@media screen and (max-width: 730px) {

	.language-div {
		max-width: 12%;
	}
	
	.button-div {
		max-width:85%;
		min-width:85%;
	}
	
	.slider-container {
		margin-bottom: 36px;
	}
	
	
}

@media screen and (max-width: 425px) {
	header {
		flex-direction: column-reverse;
	}
	.container {
		width: 100%;
	}
	.button-div {
		max-width:100%;
		min-width:100%;
	}
	.right-header {
		margin: 0.5rem 0;
	}
	.left-header {
		margin: 0.5rem 0;
	}
	
	.button-div {
		font-size: 16px;
	}
}