/* ---------------------------------- Allgemein  ---------------------------------- */

html { 
	height: 100%;
	width: 100%;
}

body {
	height: 100%;
	width: 100%;
	position:relative;
	margin: 0px;
	padding: 0px;
}

.hero { /* Header-Bild, volle Bildschirmbreite */
	margin-top: 10vh;
    position: relative;
    height: 60vh;
}

.hero h1 { /* Text auf Header-Bild */
	position: absolute; /* Position the background text */
	top: 5vw; /* At the bottom. Use top:0 to append it to the top */
	align-self: center;
	margin: 45px;
}

.hero svg { /* Keil zum Erzeugen der transparenten, abgeschraegten Flaeche */
  bottom: 0;
  left: 0;
  height: 60vh;
  width: 100%;
}

.main { /* Inhaltscontainer */
	margin: 0px;
	padding-top: 0px;
	padding-right: 45px;
	padding-left: 45px;
	padding-bottom: 25px;
	flex: 1;
}

.tile { /* Info-Fliesen Startseite */
	padding: 30px;
	max-height: 50vh;
	min-height: 25vh;
	text-align: center;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 44%; /* defines default size before remaining space is distributed */
	align-self: auto; /* individuelle flex-items */
}

.scrollhero { /* Bereich fuer Parallax-Effekt Bilder */
	height: 40vh;
	background-color: white; /* Fallback-Farbe */
}

.scrollhero svg { /* Keil zum Erzeugen der transparenten, abgeschraegten Flaeche */
  bottom: 0;
  left: 0;
  height: 40vh;
  width: 100%;
}

button { /* Buttons */
	padding: 15px;
	width: 100%;
	border: 0;
	outline: 0;
	text-align: center;
	/* display: inline-block; */
}

button:hover { /* Buttons */
  background-color: #878787;
}

/* ---------------------------------- Ausrichtung allgemein ---------------------------------- */

.float-c {
	justify-self: center;
}

.float-r {
	justify-self: end;
}

.center {
	text-align: center;
}

.vcenter {
	align-items: center;
}

/* ---------------------------------- Effekte ---------------------------------- */

.parallax { /* Parallax-Effekt fuer Hintergrundbilder */
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

/* ---------------------------------- Formular ---------------------------------- */

input, textarea {
	margin-right: 25px;
	margin-bottom: 25px;
	padding: 10px;
	resize: vertical;
	border: 1px solid #878787;
	border-radius: 4px;
}

textarea {
	width: 100%;
}

.buttons {
	width: 25vw;
}

/* ---------------------------------- Fußleiste ---------------------------------- */

footer {
	/*	position: fixed; */
	bottom: 0;
	margin: 0px;
	padding: 15px 45px 15px 45px;
	border: none;
	background-color: #9AB93C;
	z-index: 10;
	color: #FFFFFF;
	align-items: flex-end;
}

footer .flexgrid p {
	margin: 1%;
}

/* ---------------------------------- Kontakte ---------------------------------- */

.contact { /* Kontakt-Feld */
	margin-right: 25px;
	margin-bottom: 25px;
	padding: 15px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.contactimg { /* Kontakt-Bild */
	border-radius: 50%;
	height: auto;
	max-width: 100%
}

.icon { /* Icons im Fließtext z.B. Telefon-Icon */
	height: 1.1em;
	display: inline;
	vertical-align: sub;
}


/* ---------------------------------- Kopfleiste ---------------------------------- */

header { /* Kopfleiste mit Logo und Navigation */
    height: 10vh;
	width: 100vw;
    position: fixed;
    top: 0;
    margin: 0px;
    padding: 15px 45px 15px 45px;
    background-color: white;
    box-shadow: 6px 3px 10px #aaa;
    z-index: 10;
    display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	overflow: hidden;
}

header img { /* Einstellungen Logo im Header */
	width: auto;
	height: auto;
	max-width: 47vw;
	max-height: 10vh;
}



.navi { /* Bereich fuer Slogan und Menue */
	max-height: 10vh;
    margin: 0px 90px 0px 0px;
    padding: 0px 15px;
}

.navi h1, .navi p { /* Bereich fuer Slogan und Menue */
	margin: 0px;
	padding: 0px;
}


/* ---------------------------------- Karte ---------------------------------- */

.map img {
    height: 450px;
    width: 100% !important;
    object-fit: cover;
    object-position: center;
	overflow: hidden;
}

.map {
	width: 60%;
}

/* ---------------------------------- Listen ---------------------------------- */

.iconliste { /* Listen mit Grafik-Icons */
	padding: 1em; 
	text-align:center;
	width: 20%;
	word-wrap: break-word;
}

.iconliste img { /* Groeße Grafik-Icons */
	width: 5.5em;
}

.list { /* Flexible Inhalte positionieren (3 Spalten), Texte rechtsbuendig */
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 30%; /* defines default size before remaining space is distributed, can be number */
	align-self: auto; /* individuelle flex-items */
	margin: 0; 
	text-align:left;
}

/* ---------------------------------- Rastervorlagen ---------------------------------- */

/* https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items */

.flexgrid { /* Elemente fließend positionieren, Ausrichtung links */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
}

.space { /* vertikal zentrieren */ /* Fehlerseiten */
	justify-content: space-between;
}

.valign { /* Gleichmäßige Verteilung über Bildschirm */ /* Startseite Begrueßung */
	align-items: center;
}

.grid2 { /* 2er Raster ohne Randabstand z.B. Kontakt-Formular*/
	/* margin: 0px;
	padding: 0px; */
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/*
@media (max-width: 480px) {
.flexgrid .item {
	flex-grow:0;
	flex-basis:100%;
}
*/

@media (max-width: 480px) {
	.flexgrid:nth-child(2) {order:-1;}
	.flexgrid:nth-child(6) {order:-1;}
	.flexgrid:nth-child(10) {order:-1;}
	
}


/* große Viewports */
@media all and (min-width: 30em) {
.flex-container {
    flex-direction: row;
}

@media (max-width: 768px) {
	.flexgrid .item { /* Elemente flexibel auf 1 Spalte skalieren */
		flex-grow: 0;
		flex-basis: 100%;
	}
	
	.flexgrid .list { /* Listen flexibel auf 2 Spalten skalieren */
		flex-grow: 1;
		flex-basis: 44%;
	}
	
	.flexgrid iframe {
		width: 100%
	}
}