﻿/* philosopher-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Philosopher';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/philosopher-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* philosopher-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Philosopher';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/philosopher-v21-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* philosopher-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Philosopher';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/philosopher-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* philosopher-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Philosopher';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/philosopher-v21-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@import url("reset.css");

:root {
  --primary:#125281;
  --secondary:#585857;
  --secondary-light:#f2f2f2;
  --accent:#74b9ae;
}

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html{
font-size:80%;
}

#logo {
  width: 250px; /* gewünschte Breite */
  height: 45px; /* gewünschte Höhe */
  min-width: 250px;
  min-height: 45px;
  display: block; /* Verhindert Inline-Element-Probleme */
}

body{
background-color:#ffffff;
font-family:tahoma, sans-serif;
}

strong, b{
	font-weight:700;
}

img {
	width: 100%; 
	height: auto;
	display: block;
}

.partnerlogo{
	filter: grayscale(100%);
	opacity:.7;
}

header{ max-width:1200px; margin:0.5rem auto 0.5rem auto; padding:0 1.5rem;}
main { max-width:100%; margin:0 auto;}


#bildbereich{
	position:relative;
	top:-4rem;
	max-width:1500px;
	margin:0 auto -4rem auto;
	z-index:5;
}

h1{
	font-family: 'Philosopher', serif;
	color:var(--primary);
	font-size:2.3rem;
	padding-bottom:0.5rem;
	font-weight:700;
}

h2{
	font-family: 'Philosopher', serif;
	color:var(--primary);
	font-size:1.8rem;
	padding-bottom:0.5rem;
	font-weight:700;
	line-height:140%;
}

.blau h2{
	font-family: 'Philosopher', serif;
	color:var(--primary);
	font-size:1.8rem;
	padding-bottom:0.5rem;
	font-weight:700;
	line-height:140%;
}

.blau p, .blau li{
	color:var(--secondary);
}

main p{
	font-family:tahoma, sans-serif;
	font-size:1.3rem;
	color:#595959;
	padding-bottom:1.5rem;
	line-height:130%;
}

main p:last-of-type {
  padding-bottom:0rem;
}


.blau ul{
	list-style-type:circle;
	margin-left:1.3rem;
	line-height:130%;
	color:#fff!important;
	font-size:1.3rem!important;
	padding-bottom:1.5rem;
}

ul {
	list-style-type:circle;
	margin-left:0.9rem;
	padding-left:0.9rem;
	line-height:150%;
	color:#595959;
	font-size:1.3rem!important;
	padding-bottom:1.5rem;
}


.row{
	max-width:1200px;
	margin:20px auto 20px auto;
	padding: 0.25rem 0rem 0.25rem 0rem;
}

.ding{
	float:left;
}

.full{
	width:100%;
}

.half{
	width:50%;
}

.onethird{
	width:33.3%;
}

.twothird{
	width:66.6%;
}

.quarter{
	width:25%;
}

.three-quarter{
	width:75%;
}

.fuller{
	width:100%;
	padding-top:0.1rem;
	padding-bottom:0.1rem;
}

.foot{
	background:var(--primary);
}

.blau{
	background:var(--secondary-light);
	color:var(--secondary);
}

.content{
	position:relative;
	padding:0 1rem;
}

.contentinner{
	height:auto;
	padding:1rem;
}

.bildteaser{
	position:absolute;
	right:1.5rem;
	bottom:0.5rem;
}

.bildteaser h3{
	font-size:1.7rem;
	color:var(--accent);
	background:var(--primary);
	padding:0.5rem;
	text-transform:uppercase;
}

.bildteaser p{
	font-size:1.2rem;
	color:var(--accent);
	background:var(--primary);
	padding:0.5rem;
	text-transform:uppercase;
	text-align:right;
}

.bildteaser a:link, .bildteaser a:visited{
	position:relative;
	color:var(--accent);
	border-bottom:2px solid var(--accent);
	font-size:1.2rem;
	text-decoration:none;
	text-transform:uppercase;
	text-align:right;
}

.bildteaser a:hover{
	color:var(--accent);
}

.bildteaser a:after {
  content: ''; /* content ist leer... */
  position: absolute;
  top: -3px;
  left: 0;
  width: 0%;
  border-top: 4px solid var(--accent);
  transition: 0.6s;
}

a:hover:after {
  width: 100%;
}


.centered{
	text-align:center;
}


/* Logo */
#logo{
	max-width:250px;
}

.logoset{
	text-align:left;
	display: table;
	padding-left:1.5rem;
	padding-top:0.3rem;
}

a.logo {
  position: relative; 
  display: table-cell;
  vertical-align: middle;
  line-height:100%;
}

a.logo:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}


.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}


/* ---- Navigation ---- */

.zusatznavi{
	padding:0.5rem 0.5rem;
	font-size:1.2rem;
	color:var(--primary);
	margin:0;
}

main a:link, main a:visited{
	/*padding:0 0rem;*/
	color:var(--primary);
	text-decoration: none;
} 

main a:hover, main a:active{
	color:var(--accent);
}

.zusatznavi a:link, .zusatznavi a:visited{
	padding:0.5rem 0rem;
	color:var(--primary);
	text-decoration: none;
} 

.zusatznavi a:hover, .zusatznavi a:active{
	color:var(--accent);
}

.navsection{
	font-family: 'Philosopher', serif;
	font-weight:700;
	position:relative;
	background-color:var(--secondary-light);
	padding:1rem 0 1rem 0;
	z-index:1000!important;
	display:block;
	border:10px solid #fff;
	margin:0;
}


footer a:link, footer a:visited{
	color:var(--accent);
	text-decoration: none;
	font-size:1.1rem;
} 

footer a:hover, footer a:active{
	color:rgb(255, 255, 255);
}


.blau a:link, .blau a:visited{
	padding:0rem 0rem;
	color:var(--primary);
	text-decoration: none;
} 

.blau a:hover, .blau a:active{
	color:var(--accent);
}



/* ---- Navigation Ende ---- */


footer{
	color:#fff;
	padding-top:3rem;
}

footer h5{
	font-family: 'Philosopher', serif;
	font-size:1.5rem;
	padding-bottom:0rem;
	margin-bottom:0rem;
	font-weight:700;
}

footer p{
	font-family:tahoma, sans-serif;
	font-size:1.2rem;
	padding-bottom:0.5rem;
	line-height:150%;
}

@media (max-width: 65rem) {
	
.content{
	position:relative;
	padding:1rem 1rem;
}

.half{
	width:50%;
}

.onethird{
	width:50%;
}

.twothird{
	width:50%;
}

.quarter{
	width:50%;
}

.three-quarter{
	width:50%;
}
}


@media (max-width: 40rem) {
.half{
	width:100%;
}

.onethird{
	width:100%;
}

.twothird{
	width:100%;
}

.quarter{
	width:100%;
}

.three-quarter{
	width:100%;
}

#bildbereich{
	position:relative;
	top:-2rem;
	max-width:1500px;
	margin:0 auto -4rem auto;
	z-index:5;
}
}


/*BUTTONS Rechtsgebiete */
div.button ul{
	margin:0;
	padding:0;
}

div.button ul li{
	color:#fff;
	list-style-type:none;
	width:100%;
	line-height:auto;
	background:var(--primary);
	font-size:1.2rem;
	font-weight:bold;
	text-align:center;
	border-radius: 2rem;
	padding:1rem;
	opacity: 1;
	transition: 0.3s;
}

div.button ul li:hover{
	background:var(--accent);
	cursor:pointer;
	opacity: 0.6;
	border-radius: 0;
}

div.button a:link, div.button a:visited{
	color:#fff;
	text-decoration:none;
	width:100%;
	display:block;
}

/*    Kontaktbuttons */

div.kontaktbutton{
	position:relative;
	float:left;
	margin:-2rem .5rem 0rem .5rem;
	color:#fff;
	list-style-type:none;
	background:var(--primary);
	font-size:2.5rem;
	font-weight:bold;
	border-radius: 3rem;
	padding:0rem;
	opacity: 1;
	transition: 0.3s;
}

div.kontaktbutton span{
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
}

div.kontaktbutton:hover{
	background:var(--accent);
	cursor:pointer;
	opacity: 0.6;
	border-radius: 0;
}

div.kontaktbutton a:link, div.kontaktbutton a:visited{
	color:#fff;
	text-decoration:none;
	width:100%;
	display:block;
	width:5rem;
	height:5rem;
	padding:0;
}