@charset "utf-8";

@font-face {
    font-family: 'TT Norms Pro';
    src: url('../webfonts/TTNormsProMedium/font.woff2') format('woff2'),
        url('../webfonts/TTNormsProMedium/font.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Pro';
    src: url('../webfonts/TTNormsProRegular/font.woff2') format('woff2'),
        url('../webfonts/TTNormsProRegular/font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Pro';
    src: url('../webfonts/TTNormsProItalic/font.woff2') format('woff2'),
        url('../webfonts/TTNormsProItalic/font.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Pro';
    src: url('../webfonts/TTNormsProBold/font.woff2') format('woff2'),
        url('../webfonts/TTNormsProBold/font.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Pro';
    src: url('../webfonts/TTNormsProBoldItalic/font.woff2') format('woff2'),
        url('../webfonts/TTNormsProBoldItalic/font.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

html { 
	margin: 0px;
	height: 100%;
	background-color: #f3f2f2;
}
 
:focus {
	 outline:0; 
	 -moz-outline:0; 
}

img {
	vertical-align: baseline;
}

span,div {
	zoom: 1;
}			   

a {
	zoom: 1;
	color: inherit;
}
	
a img {
	border-width: 0px;
}	   

form {
	margin: 0px;
	padding: 0px;
}
		
body {	 
	position: relative;
	margin: 0;
	padding: 0px;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'TT Norms Pro', sans-serif;
	font-size: 16px;
	line-height: 23px;
	color: #484847;
}	  

/**** BASICS ****/

.content {
	position: relative;
	max-width: 1520px;
	height: 100%;
	margin: auto;
}

.red {
	background-color: #e9404b;
}

/**** HEADER ****/

.header {
	height: 125px;
	background-color: white;
}

.header .logo {
	position: absolute;
	left: 46px;
	top: 15px;
	width: 140px;
}

.header .menu {
	position: absolute;
	right: 110px;
	top: 91px;
	margin: 0px; 
	padding: 0px;
	white-space: nowrap;
}

.header .menu li {
	display: inline-block;
	list-style-type: none;
	margin-left: 25px;
	height: 34px;
}

.header .menu li.sel {
	background-image: url(../img/menupfeil.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 23px 11px;
}

.header .menu li a {
	color: #a9a9aa;
	font-weight: bold;
	text-decoration: none;
	font-size: 17px;
}

.header .menu li a:hover, .header .menu li.sel a {
	color: #e9404b;
}

.header .menuicons {
	display: none;
	position: absolute;
	right: 66px;
	bottom: 10px;
}

#menu-hide { display: none; }

/**** FOOTER ****/

.footer {
	width: 100%;
	height: 170px;
	background-color: #706f6f;
	color: white;
	font-size: 11px;
	line-height: 13px;
	font-weight: 500;
}

.footer .logo {
	position: absolute;
	left: 40px;
	top: 22px;
	width: 71px;
}

.footer .links {
	position: absolute;
	left: 275px;
	top: 22px;
	width: calc(100% - 300px);
}

.footer .links .spalte {
	display: inline-block;
	vertical-align: top;
	width: 22%
}

.footer .links .spalte.col3 { width: 320px; }

.footer .links h3 {
	font-size: inherit;
	line-height: inherit;
	margin: 0px;
}

.footer .links a {
	text-decoration: none;
}

.footer .links a:hover {
	text-decoration: underline;
}

.footer .impressumlink {
	display: none;
	text-decoration: none;
}

.footer .impressumlink:hover {
	text-decoration: underline;
}


/**** TEXTCONTENT & SIDEBAR ****/

.textcontent {
	padding: 42px 340px 80px 72px;
}

.sidebar {
	box-sizing: border-box;
	padding: 36px 32px 42px 24px;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 320px;
	height: 100%;
	background-color: #d0d0d0;
	color: white;
}

.sidebar .menu {
	margin: 0px; 
	padding: 0px;
}

.sidebar .menu li {
	position: relative;
	list-style-type: none;
	margin-bottom: 12px;
	padding-left: 38px;
	padding-top: 3px;
	padding-bottom: 2px;
}

.sidebar .menu li .icon {
	position: absolute;
	left: 0px;
	top: 50%;
	margin-top: -15px;
	width: 30px;
	height: 27px;
}

.sidebar .menu li a {
	font-weight: bold;
	text-decoration: none;
	font-size: 16px;
	line-height: 14px;
}

.sidebar .menu li a:hover, .sidebar .menu li a.sel {
	color: #e9404b;
}

.sidebar .socialicons {
	padding-top: 7px;
	margin-bottom: 30px;
}

.sidebar .socialicons a {
	margin-right: 15px;
}

.ankuendigung {
	border-top: solid 8px #e9404b;
	border-bottom: solid 1px white;
	padding-top: 3px;
	font-weight: 500;
	font-size: 12px;
	line-height: 14px;
	min-height: 120px;
}

.ankuendigung .datum {
	color: #e9404b;
}

.ankuendigung h3 {
	color: #e9404b;
	margin-top: 0px;
	margin-bottom: 7px;
}

.ankuendigung p {
	margin-top: 7px;
	margin-bottom: 7px;
}

/**** MOBILMENU ****/

.mobilmenu-container { 
	display: none; 
	position: absolute;
	right: 0px;
	top: 0px;
	width: 280px;
}

.mobilmenu {
	display: none;
	box-sizing: border-box;
	padding: 36px 24px 42px 24px;
	position: absolute;
	right: -100%;
	top: 0px;
	width: 100%;
	background-color: #d0d0d0;
	color: white;
}

.mobilmenu ul {
	margin: 0px; 
	padding: 0px;
}

.mobilmenu ul li {
	list-style-type: none;
	
}

.mobilmenu li a {
	display: inline-block;
	font-weight: bold;
	text-decoration: none;
	font-size: 17px;
	line-height: 16px;
	padding-top: 6px;
	padding-bottom: 6px;
	
}

.mobilmenu li a:hover {
	color: #e9404b;
}

.mobilmenu hr {
	border: none;
	border-bottom: solid 1px white;
	margin-top: 12px;
	margin-bottom: 16px;
}

.mobilmenu .socialicons {
	padding-top: 5px;
	margin-bottom: 30px;
}

.mobilmenu .socialicons a { 
	margin-right: 15px;
}

/**** PANELS ****/

.panel-container {
	font-size: 0px;
	line-height: 0px;
}

.panel {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: calc(33% - 13px);
	overflow: hidden;
	margin-right: 13px;
	margin-bottom: 13px;
}

.panel h1 {
	position: absolute;
	left: 7px;
	top: 10px;
	font-size: 30px;
	line-height: 30px;
	color: white;
	margin: 0px;
	max-width: 95%;
}

.panel h2 {
	position: absolute;
	left: 7px;
	top: 9px;
	font-size: 22px;
	line-height: 21px;
	color: white;
	margin: 0px;
	max-width: 225px;
}

.panel .sujet {
	filter: brightness(90%);
	transition: transform 0.6s ease-out;
}

.panel:hover .sujet {
	transform: scale(1.05);
}

/**** TEXTBLOCK ****/

.textblock {
	position: relative;
	padding-left: calc(33% + 25px);
	padding-right: 30px;
	min-height: 200px;
	margin-bottom: 45px;
}

.textblock.smallmargin {
	margin-top: -40px;
}

.textblock.titel {
	margin-bottom: 0px;
}

.textblock.subtitel {
	font-weight: bold;
	margin-top: 4px;
	margin-bottom: 20px;
}

.textblock.subtitel p:first-child {
	margin-top: 0px;
}

.textblock h1 {
	margin-top: 0px;
	color: #e9404b;
	font-size: 30px;
	line-height: 30px;
	margin-top: 0px;
	margin-bottom: 30px;
	padding-top: 7px;
}

.textblock h1 p {
	margin: 0px;
}

.textblock h2 {
	color: #e9404b;
	font-size: 22px;
	line-height: 24px;
	margin-top: 4px;
	margin-bottom: 25px;
}


.textblock .bilder {
	position: absolute;
	width: calc(33% - 13px);
	left: 0px;
	top: 0px;
	padding-top: 2px;
}

.textblock ul { 
	padding-left: 20px;
}

.textblock ol {
	padding-left: 25px;
}
	
.textblock li {
	padding-left: 3px;
}

.textblock.titel .bilder { padding-top: 0px; }

.textblock .bilder .kategoriehead {
	position: relative;
	display: block;
}

.textblock .bild img {
	max-width: 100%;
/* 	max-height: 230px; */
}

.textblock .bild .hochformat img {
	width: auto;
 	max-height: 250px;
}

.textblock .bilder .kategoriehead h2 {
	position: absolute;
	left: 7px;
	top: 10px;
	font-size: 30px;
	line-height: 30px;
	color: white;
	margin: 0px;
	padding-right: 7px;
}

.textblock .bilder .zoomimage {
	cursor: zoom-in;	
}

.textblock .bilder .bildunterschrift {
	font-size: 13px;
	line-height: 16px;
	font-weight: normal;
	font-style: italic;
}

.textblock .bilder .bildunterschrift p {
	margin-top: 0px;
	margin-bottom: 6px;
}

.textblock .bilder .bildunterschrift p:last-child {
	margin-bottom: 4px;
}

.textblock .bilder .fotocredit {
	font-size: 10px;
	line-height: 12px;
	font-weight: normal;
	margin-bottom: 15px;
}

.textblock .bilder .fotocredit p:first-child {
	margin-top: 5px;
}

.textblock.subtitel .bilder .fotocredit {
	margin-bottom: 0px;
}

.textblock.subtitel .bilder .fotocredit p:last-child {
	margin-bottom: 4px;
}

.textblock.weiterlink {
	color: #e9404b;
	font-weight: bold;
	font-size: 14px;
	line-height: 18px;
	min-height: 0px;
	margin-bottom: 0px;
}

.textblock a {
	text-decoration: none;
	color: #e9404b;
}

.textblock.blacklinks a {
	color: #484847;
}

.textblock a:hover {
	text-decoration: underline;
}

.textblock .smalltext {
	font-size: 13px;
    line-height: 19px;
}


@media only screen and (min-width: 1500px) {

	body {	font-size: 18px; line-height: 25px; }
	.header .menu { top: 90px; right: 89px; }
	.header .menu li { margin-left: 32px; height: 35px; }
	.header .menu li a { font-size: 19px; }
	.footer { height: 185px; font-size: 12px; line-height: 14px; }
	.footer .links .spalte { width: 23%; }
	.footer .links .spalte.col3 { width: 360px; }
	.panel h2 { font-size: 23px; line-height: 23px; }
	.textblock h2 { font-size: 24px; line-height: 23px; }
	.textblock .bilder .bildunterschrift { font-size: 15px; line-height: 18px; }
	.textblock .bilder .bildunterschrift p { margin-bottom: 8px; }
	.textblock .bilder .fotocredit { font-size: 12px; line-height: 14px; }
	
}

@media only screen and (max-width: 1385px) {	

	.header .menu { right: 92px; }
	.header .menu li { margin-left: 23px; }
	.header .menu li a { font-size: 16px; }
	.footer .links { left: 180px; width: calc(100% - 200px); }
	.textcontent { padding-right: 300px; }
	.sidebar { width: 280px; }
	.panel { width: calc(33% - 11px); margin-right: 11px; margin-bottom: 11px; }
	.panel h2 { font-size: 21px; line-height: 20px; }
	.panel h1 { font-size: 26px; line-height: 25px; }
	.textblock h1 { font-size: 26px; line-height: 25px; }
	.textblock .bilder { width: calc(33% - 11px); }
	.textblock .bilder .kategoriehead h2 { font-size: 26px; line-height: 25px; }

}

@media only screen and (max-width: 1300px) {

	.header .menu li { margin-left: 20px; }
	.header .menu li a { font-size: 15px; }

}

@media only screen and (max-width: 1275px) {	

	.panel h2 { font-size: 19px; line-height: 19px; }

}

@media only screen and (max-width: 1180px) {

	.header .menu { display: none; }
	.header .menuicons { display: block; }
	.footer { height: 100px; }
	.footer .links { display: none; }
	.footer .impressumlink { display: block; position: absolute; right: 48px; top: 22px; }
	.main { overflow-x: hidden; }
	.textcontent { padding: 42px 44px 80px 72px; }
	.sidebar { display: none; }
	.mobilmenu-container { display: block; }
	.panel { width: calc(33% - 13px); margin-right: 13px; margin-bottom: 13px; }
	.panel h2 { font-size: 21px; line-height: 20px; }
	.textblock .bilder { width: calc(33% - 13px); }
	
}

@media only screen and (max-width: 1024px) {

	.header { height: 110px; }
	.header .logo { left: 20px; top: 14px; width: 120px; }
	.header .menuicons { right: 42px; bottom: 8px; }
	.footer .logo { left: 28px; }
	.footer .impressumlink { right: 36px; }
	.textcontent { padding: 42px 18px 80px 42px; }
	.textblock { padding-left: calc(33% + 20px); }

}

@media only screen and (max-width: 965px) {
	
	.panel h2 { font-size: 19px; line-height: 19px; }

}

@media only screen and (max-width: 888px) {
	
	.panel h2 { font-size: 17px; line-height: 17px; }

}

@media only screen and (max-width: 800px) {

	.textcontent { padding: 42px 28px 80px 42px; }
	.panel { width: calc(50% - 13px); }
	.panel h2 { font-size: 21px; line-height: 20px; }
	.textblock { padding-left: 0px; margin-bottom: 40px; }
	.textblock .bilder { position: relative; width: auto; }
	.textblock .bilder .bild { display: inline-block; vertical-align: top; max-width: 300px; margin-top: 0px;margin-bottom: 20px;  margin-right: 20px; }
	.textblock.titel .bilder .kategoriehead { display: none; }
	.textblock.subtitel { margin-bottom: 70px; }
	
}

@media only screen and (max-width: 688px) {
	
	.panel h2 { font-size: 19px; line-height: 19px; }

}

@media only screen and (max-width: 627px) {
	
	.panel h2 { font-size: 18px; line-height: 18px; }

}

@media only screen and (max-width: 602px) {
	
	.panel h2 { font-size: 17px; line-height: 17px; }

}

@media only screen and (max-width: 562px) {
	
	.panel h2 { font-size: 16px; line-height: 16px; }

}

@media only screen and (max-width: 540px) {
	
	.header { height: 84px; }
	.header .logo { left: 16px; top: 10px; width: 92px; }
	.header .menuicons { right: 32px; bottom: 6px; }
	.footer { height: 100px; }
	.footer .logo { left: 22px; width: 60px; }
	.footer .impressumlink { right: 33px; }
	.textcontent { padding: 32px 15px 60px 15px; }
	.panel-container { margin-right: 0px; padding-left: 18px; padding-right: 18px; }
	.panel { width: 100%; }
	.panel h2 { font-size: 22px; line-height: 21px; }
	.textblock { padding-right: 0px; }

}

@media only screen and (max-width: 380px) {
	
	.panel h2 { font-size: 20px; line-height: 20px; }

}

@media only screen and (max-width: 355px) {
	
	.panel h2 { font-size: 19px; line-height: 19px; }

}

@media only screen and (max-width: 340px) {
	
	.panel h2 { font-size: 18px; line-height: 18px; }

}

@media only screen and (max-width: 329px) {
	
	.panel h2 { font-size: 17px; line-height: 17px; }

}