/*#################################################################################
								FONTS
#################################################################################*/

/* Hier deine Schrift eintragen mit korrektem Pfad und Namen sowie Dicke */



/* raleway-900 - latin */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 900;
  src: url("./fonts/raleway-v14-latin-900.woff2") format("woff2");
}

/* raleway-600 - latin */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/raleway-v14-latin-600.woff2') format('woff2');
}

/* georgia */
@font-face {
  font-family: "Georgia";
  src: url("./fonts/Georgia.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* Akzidenz-Super */
@font-face {
  font-family: "AkzidenzGrotesk";
  src: url("./fonts/AkzidenzGroteskPro-Super.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

/* Akzidenz-Medium */
@font-face {
  font-family: "AkzidenzGrotesk";
  src: url("./fonts/AkzidenzGroteskPro-Md.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/*#################################################################################
								GLOBALE STYLES
#################################################################################*/

html,
body {
	height: 100%;
	width: 100%;
	/* hier kannst du erstmal global deine Typo festlegen - kannst du weiter unten auch überschreiben */
}

/* ALLE LINK BLAU UND OHNE UNTERSTRICH */
a {
	color: blue;
	text-decoration: none;
}

/*#################################################################################
								Seiten Styles
#################################################################################*/

/* ++++++++++++++++++++++++++++++++++++++++++
		Gesonderte Startseiten Styles
+++++++++++++++++++++++++++++++++++++++++++*/

.intro {
	font-size: 115px;
	font-weight: bold;
	font-family: 'AkzidenzGrotesk';
}

.intro a {
	text-decoration: none;
	transition: all 0.5s;
}

.impressum {
	font-size: 18px;
	font-weight: bold;
	font-family: 'AkzidenzGrotesk';
}
/* ++++++++++++++++++++++++++++++++++++++++++
		Alle anderen Seiten
+++++++++++++++++++++++++++++++++++++++++++*/

.page-content {
	/* Weißer Abstand rund um den gesamten Inhalt - oben/unten 10px - rechts/links 25px*/
	padding: 10px 25px;
}

header {
	text-align: right;
}

.bunter-link {
	color: green;
}

.txt-page main {
	display: grid;
	grid-template-columns: repeat(3, minmax(250px, 1fr));
	/* ABSTÄNDE ZWISCHEN SPALTEN UND REIHEN */
	grid-column-gap: 20px;
}

/* Dieser Part sorgt dafür das bei einer Displaybreite von unter 1020px alles übereinander gestapelt wird */
@media only screen and (max-width: 1020px) {
	.txt-page main {
		display: block;
	}
}

.intro-txt {
	grid-column: span 1;
	font-family: "AkzidenzGrotesk";
	font-size: 25px;
	font-weight: normal;
	line-height: 1.2;

}
.intro-img {
	grid-column: span 2;
}

/* Sorgt dafür das dein Hauptbild immer auf ganze Breite gezogen wird */
.intro-img img {
	width: 100%;
	height: auto;
}

/* ++++++++++++++++++++++++++++++++++++++++++
				SPALTEN STYLES
+++++++++++++++++++++++++++++++++++++++++++*/
.column-headline {
	grid-column: span 1;
}


.column h2 {
	min-height: 50px;
	font-family: "AkzidenzGrotesk";
	font-size: 23px;
	font-weight: normal;
}

	
.column {
	grid-column: span 1;
	margin-bottom: 35px;
}


.column p {
    font-family: "Georgia";
	line-height: 1.45;
	}

/* Nur als Lernhilfe kann gerne gelöscht werden */
.column--one {
	background: white;
}

/*#################################################################################
								FUSSBEREICH
#################################################################################*/
footer {
	text-align: right;
}

/* HILFE UM SCHNELL ZU ERKENNEN WENN MAN ANSPRICHT - EINFACH DEN OUTLINE PART BEI EINER BELIEBIGEN KLASSE HINZUFÜGEN */
.ich-bin-eine-klasse {
	outline: red solid 2px;
}