/* Font laden */
@font-face { 
	font-family: "Quicksand-Light"; 
	src: url("font/Quicksand-Light.ttf"); 
}


/* Allgemein */
body {
	margin: 0;
	font-family: Quicksand-Light, Arial, sans-serif;
	font-size:1.2rem;

	/* Silbentrennung */
	/*	-moz-hyphens: auto;	*/
	/*	-o-hyphens: auto; */
	/*	-webkit-hyphens: auto; */
	/*	-ms-hyphens: auto; */
	/*	hyphens: auto; */

	
	word-wrap:break-word;
}

h1{
	font-weight:normal;
	margin:0;
}


/* -----------------------------------	*/
/* Hintergrundfarben und Schirftfarben 	*/
/* -----------------------------------	*/


/* Hintergrundfarben der Spalten, Kopfbereich, und Bereichen, die über die gesamte Breite gehen (Kontakt) */
.column , .header, .full-width-section{
	background-color: #4d4d4d;
	color: #ffffff;
}

/* Im Zeispaltigen-Bereich und im Footer soll die Hintergrundfarbe weiß sein */
.content-two .column, .footer{
	background-color: #ffffff;
	color:#000000;
}

/* Sonderfarbe im Claim */
.subhead{
	color:#f0d9ae;
}




/* -----------------------------------------------	*/
/* Überschrieben der Standard-Definition für Links 	*/
/* -----------------------------------------------	*/

/* Alle Links standardmäßig ohne Unterstrich und weiß */
a{
	text-decoration:none;
	color:#ffffff;
}

/* Im Footer soll aber die Linkfarbe schwarz sein */
.footer a{
	color:#000000;
}

/* Bei hover soll der Unterstrich angezeigt werden */ 
a:hover{
	text-decoration:underline;
}

/* Aber kein Unterstrich bei hover im Kopfbereich */
div.header a:hover{
	text-decoration:none;
}

/* Damit die Bots keine Mailadresse lesen können, sind zusätzliche Zeichen eingebaut, die per CSS ausgeblendet werden */
a span.di{
	display:none;
}

/* Damit die Mail- und Phone-Icons gut platziert aussehen */
/* !!! Dies ist sicher nicht gut umgesetzt - für mein Empfinden aber o.k. !!! */ 
div.phone span, div.mail span a span{
	vertical-align:super;
}

/* Impressums-Link mit etwas Abstand nach Links versehen */
/* Kann man besser machen */
.impr{
	margin-left:20px;
}



/* ---------------------------------------------	*/
/* Definition von Bildgrößen und Bild-Abständen 	*/
/* ---------------------------------------------	*/
img.logo{
	width:60px;
}

img.img-uta{
	height:370px;
}

img.img-in-column{
	width:100%;
	max-width:200px;
}

div.contact img{
	height:25px;
	margin-right:10px;
}

/* Definition eines umschließenden Blocks, damit das darin enthaltene Bild mittig platziert wird */
/* Kann man sicher auch besser machen */
span.img-div{
	text-align:center;
	display:block;
}



/* -------------- 	*/
/* Schriftgrößen 	*/
/* -------------- 	*/
h2 {
	1.6rem;
}



/* ---------------------------------	*/
/* Spalten, Margin, Padding, Breiten 	*/
/* ---------------------------------	*/

.content {
	max-width: 1200px; /* Begrenzung des Content-Bereichs auf eine maximale Breite, damit es auch auf großen Bildschirmen noch o.k. aussieht */
    margin: 20px auto;
	padding: 0 0;
}

.columns {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.column {
	flex: 1;
	min-width: 300px;
	padding: 20px;
	box-sizing: border-box;
}


.header, .full-width-section, .footer {
	width: 100%;
}

.header, .full-width-section{
	padding: 20px 0;
}


.content-top-bottom{
	padding: 0 20px;
}

h3{
	margin-bottom:10px;
}


/* ---------------	*/
/* Gerundete Ecken 	*/
/* ---------------	*/
img , .content-three .columns .column{
	border-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}



/* ----------------------	*/
/* Logo-Bereich (Header)	*/
/* ----------------------	*/
.top{
	width: fit-content;
}

/* Logo-Zeile */
.headline{
	margin-left: 20px;
	float: right;
}

/* Logo-Schriftzug */
.tophead{
	font-size: 2.5rem;
	letter-spacing: 0.1em;
	font-weight: bold;
	text-align: center;
}

/* Claim */
.subhead{
	font-size: 1.13rem;
	text-align: center;
}


/* ---------------------	*/
/* Zweispaltiger Bereich 	*/
/* ---------------------	*/

.content-two .column{
	min-width: 200px;
	text-align:center;
}

/* Schriftgröße Slogan im zweispaltigen Bereich 	*/
.slogan{
	font-size:3.2rem;
}

/* Slogan zenrieren */
.column-solgan {
	margin:auto 0;
	text-align:center;
}



/* -------------------	*/
/* Kleine Korrekturen 	*/
/* -------------------	*/

/* Margin bei Überschrift in Spalten reduzieren.  */
h2.topplacement{
	margin-top:10px;
}

/* Im Footer ist der Content (Links) rechtsbündig */
.footer .content{
	text-align:right;
}

/* Die Footer-Bereich (bzw. die darin enthaltenen Links) soll dicht an dem darüber liegenden Block platziert sein */ 
.footer .content-top-bottom{
	margin-top:0;
	margin-bottom:0;
}


/* -------------------------------------- 	*/
/* Anpassungen für kleinere Bildschirme 	*/
/* -------------------------------------- 	*/

@media (max-width: 768px) {
	.content-three .columns {
		flex-direction: column;
	}

	/* Anpassung im zweispaltigen Bereich */
	.slogan{
		font-size:2.1rem;
	}

	/* Keine Runden Ecken mehr, damit die jeweiligen Breiche komplett über den gesamten Bildschirm laufen */
	.content-three .columns .column{
		border-radius: 0rem;
		border-top-left-radius: 0rem;
		border-top-right-radius: 0rem;
		border-bottom-right-radius: 0rem;
		border-bottom-left-radius: 0rem;
	}

	/* generelle weitere Anpassungen */
	div.content h2 {
		font-size:1.5rem;
	}


}


@media screen and (max-width: 479px) {
	/* Anpassungen im Logo */
	.tophead {
		font-size: 1.75rem;
	}
	.subhead{
		font-size: 0.79rem;
	}
	img.logo{
		width:46px;
	}
	.header{
		padding: 10px 0;
	}


	/* Anpassungen im zweispaltigen Bereich */
	.slogan{
		font-size:1.8rem;
	}

	/* generelle weitere Anpassungen */
	div.content h2 {
		font-size:1.4rem;
	}

	/* generelle weitere Anpassungen */
	h3 {
		font-size:1.3rem;
	}
}