@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;800;900&display=swap');

html {
	height:100%;
} 

body{
	width: 100%;
	max-width: 100%;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	padding: 0;
	margin: 0;
	color: #333;
}

.color-change{
	-webkit-animation: color 15s cubic-bezier(1,1,1,1) infinite;
	animation: color 15s linear(1,1,1,1) infinite;  
}

.background-color-change{
	-webkit-animation: background 15s cubic-bezier(1,1,1,1) infinite;
	animation: background 15s linear(1,1,1,1) infinite;  
}

h1{
	font-size: 2em;
	font-family: 'Montserrat', sans-serif;
}

p{
	font-size: 14px;
	line-height: 1.6em;
}

.logo{
	grid-area: logo;
	height: 300px;
	align-self: center;
	justify-self: center;
	align-items: center;
	display: flex;
}

.logo-wrapper{
	position: relative;
}

.logo-square-wrapper{
	display: flex;
	flex-direction: column;
	align-items: inherit;
	position: absolute;
	bottom: 0;
}

.lsw_left{
	transform: rotate(10deg);
	left: -6px;
	bottom: -6px;
}

.lsw_right{
	transform: rotate(170deg);
	right: -8px;
	bottom: 12px;
}

.logo-square{
	width: 21px;
	height: 21px;
	margin-bottom: 0.75rem;
}

.banner-wrapper{
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	max-height: 60vh;
}

.virtueller-maibaum .logo-square-wrapper{
	align-items: center;
}

.fenster-portrait{
	margin-bottom: 0.75rem;
	/* position: relative; */
}

.fenster-full{
	display: none;
	height: 1px;
	width: 1px;
}

.fenster-full img{
	max-width: 100%;
}

.fenster-portrait .fenster-full{ /*CSS for enlarged image*/
    
    display: block;
    color: black;
    text-decoration: none;
    opacity:0.0;
    filter:alpha(opacity=0);
		top: 0;
		position: absolute;
		width: auto;
		height: auto;
}

.fenster-portrait:hover .fenster-full { /*CSS for enlarged image on hover*/
    opacity: 1.0;
    filter:alpha(opacity=100);/*position where      
    enlarged image should offset horizontally */
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.fenster-portrait .fenster-thumb{

}

.fenster-portrait .fenster-thumb img{
	max-width: 100%;
}

.title{
	align-self: center;
	margin-left: 3vw;
	text-align: center;
}
.description{
	grid-area: description;
	padding-right: 2rem;
	padding-left: 1rem;
	padding-top: 2rem;
}

.instructions{
	grid-area: instructions;
	padding-right: 1rem;
	padding-left: 1rem;
	text-align: center;
}

.break-line{
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.tiles{
	grid-area: tiles;
	padding-left: 4rem;
	padding-right: 4rem;
} 

.item-b {
	grid-area: main;
}
.item-c {
	grid-area: sidebar;
}
.item-d {
	grid-area: footer;
}
.virtueller-maibaum{
	grid-area: vmb;
}

.break-line{
	grid-area: break;
}

.container {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: auto;
grid-template-areas:
"logo description description"
"break break break"
"instructions instructions instructions"
"main main main"
"footer footer footer"
"vmb vmb vmb"
"tiles tiles tiles"
}

@media only screen and (max-width: 768px) {
    .container {
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto;
		grid-template-areas:
		"logo logo" 
		"description description"
		"instructions instructions"
		"main main"
		"footer footer"
		"tiles tiles tiles"
	  }
		.window-wrapper{
			grid-template-columns: initial !important;
			margin-bottom: 2em !important;
		}
}



.window-wrapper{
	margin-top: 2em;
	display: grid;
	grid-auto-rows: 1fr;
	grid-gap: 12px;
	padding: 0 1em;
	grid-template-columns: inherit;
	margin-bottom: 5em;
}

.window-wrapper > div::before {
}

.window{
		border: 2px solid #eee;
		-webkit-animation: bordercolor 15s cubic-bezier(1,1,1,1) infinite;
		animation: bordercolor 15s linear(1,1,1,1) infinite;  
	  background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    align-items: center;
		position: relative;
}

.window-title{
	position: absolute;
	left: 0;
	top: 0;
	padding: 0 0 0 0.8em;
	font-size: 12px;
	font-weight: 6	00;
}

.window img{
	max-width: 100%;
}

.link-wrapper{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
}

.link-wrapper a{
	padding: 0.4em 1em 0.2em 1em;
	background-color: #eee;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	color: #333;
}

.window .link-wrapper a:hover{
	padding: 0.2em 1em 0.2em 1em;
	color: #fff;
	background-color: #666;
	font-size: 14px;
	font-weight: 500;
}
.link-wrapper ion-icon{
	padding-right: 1em;
}

@-webkit-keyframes background {
  0% { background-color: #f99; }
  33% { background-color: #9f9; }  
  67% { background-color: #99f; }
  100% { background-color: #f99; }
}

@keyframes background {
  0% { background-color: #f99; }
  33% { background-color: #9f9; }  
  67% { background-color: #99f; }
  100% { background-color: #f99; }
}

@-webkit-keyframes color {
  0% { color: #f99; }
  33% { color: #9f9; }  
  67% { color: #99f; }
  100% { color: #f99; }
}

@keyframes color {
  0% { color: #f99; }
  33% { color: #9f9; }  
  67% { color: #99f; }
  100% { color: #f99; }
}

@-webkit-keyframes bordercolor {
  0% { border-color: #f99; }
  33% { border-color: #9f9; }  
  67% { border-color: #99f; }
  100% { border-color: #f99; }
}

@keyframes bordercolor {
  0% { border-color: #f99; }
  33% { border-color: #9f9; }  
  67% { border-color: #99f; }
  100% { border-color: #f99; }
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
grid-auto-rows: 1fr;
grid-gap: 8em;
}

.grid::before {
content: '';
width: 0;
padding-bottom: 100%;
grid-row: 1 / 1;
grid-column: 1 / 1;
}

.grid > *:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}

/* Just to make the grid visible */

.grid > * {
background: rgba(0,0,0,0.2);
}

.grid .title-wrapper{
	grid-column: 1 / span 2;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.title{
	font-family: 'Raleway', sans-serif;
	font-size: 20px;
	text-transform: lowercase;
}

.grid .gebaeude {
	background-size: cover;
	background:#fff;
	background-size:contain;
	filter: blur(2px);
	opacity: 0.5;
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	transition: all .1s ease-in-out;
}
.grid .gebaeude a{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;

}


.grid .gebaeude:hover {
	background-color: transparent;
	opacity: 1;
	transform: scale(2.2);
	z-index: 100;
	filter: blur(0);
}