@charset "utf-8";

/*
Farben:
Aus alter Webseite
Bordeaurot: #5c1920 , #721e27

Dunkelgrau: #333
Mittelgrau: #766865, #574b47
Hellgrau: #dcdddf, #E8E4E3

Aus Logo
Bordeau: #7b202b, #721e27, #5c1920, #8b2431, #92303c
kleine Flamme: #ccac9f


*/
 
/* BASIS============================================= */
 
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html{
	-webkit-font-smoothing: antialiased;
}

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.6em;
	color: #333333;
	background-color: #766865;
}

.center{text-align: center;	}

header, footer{
	flex: 1 100%;
	max-width: 100%;
	color: #dcdddf;
}

.datenschutz{
	font-size: 0.8em;
	text-align: justify;
	padding: 25px;
}

/* MENU  = = = = = = = = = = */

nav{
	padding-left:5%;
	padding-right:5%;
	background-color: E59373;
}

#oben{ /*div-Element für die Navigation*/
	/*position: fixed;*/
	top: 0px;
	left: 0px;
	width: 100%;
	padding: 5px 0 2px 0;
}


#nav_menu ul {
	list-style: none;
	position: relative;    /* So the first submenu can be positioned within the main menu */
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #721e27; /*Bordeau*/
	/*background-color: white;*/
	border-radius: 3px;
}

#nav_menu ul li {
	float: left;
	padding: 0 10px; 
	flex: 0 0 auto;
}

#nav_menu ul ul {
	display: none;         /* Don't display submenu until hover of the li element */
	position: absolute;
	top: 100%;             /* Position the submenu at the bottom of the main menu */
}

#nav_menu ul li a{
	color: #721e27; /*Bordeau*/
	text-decoration: none;
	/*text-transform: uppercase; */
	font-size: 1.2em;
	font-weight: bold;
}

#nav_menu ul ul li {
	float: none;           /* Display the submenus vertically */
	position: relative;    /* So the second submenu can be positioned within the first submenu */
}

#nav_menu ul ul li ul {
	position: absolute;
	left: -100%;           /* Position the second submenu at the left side of the li element */ 
	top: 0;                /* Position the second submenu at the top of the li element */
}
#nav_menu ul li:hover > ul {
	display: block;        /* Display the submenu on hover of the li element */
}
#nav_menu ul::after {
	content: "";
	clear: both;
	display: block;
}

/* The styles for the formatting of the multi-tier navigation menu */
#nav_menu ul {
	width: 100%;
	margin: 0;
	padding: 0;
}

#nav_menu ul li a {  /*Menüfarbe nicht fett */
	text-align: center;
	display: block;
	padding: 0.5em;
	text-decoration: none;
	background-color: #721e27; /*Bordeau*/
	color: white;
	border-radius: 3px;
}

#nav_menu ul li a.current {
	color: orange;
}
#nav_menu ul li a:hover, #nav_menu ul li a:focus {
	text-decoration: none;
	color: #fff; 
	background-color: #777777; /* Mittelgrau */
	border-radius: 3px;
}
#nav_menu ul li:hover ul {
	width: 100%;
}
#nav_menu ul li:hover ul li a {
	display: block;
	width: 150px;
	text-align: center;
}

/* SLICNAV MENU */
.slicknav_menu {
	display: none;
}

/*Ende MENU*/


/* HEADER============================================= */
header {
	padding-top: 10px;
}

#head{
	padding-left: 15%;
	padding-right: 15%;
	height: 150px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
}


header h3 {
	font-size: 160%;
	text-align: left;
	color: #721e27;
	line-height: 1.5em;
}

header a:link {
	color: #E8E4E3;
	text-decoration: none;
	padding-right: 2px;
	padding-left: 2px;
}
header a:hover {
	color: ##E8E4E3;
	text-decoration: underline;

}
header a:visited {
	color: ##E8E4E3;
	text-decoration: underline;
}


/*Aside ======================*/
aside{
	width: 350px;
	margin: 15px 20px 0 0;
	padding: 5px 1px 3px 5px;
	float: right;
	background-color: #721e27;
	color: white;
	box-shadow: 5px 5px 5px 2px #999;
	border-radius: 5px;
}

.white{
	background-color: #FFF;
	font-size: 0.8em;
	padding: 10px;
	border-radius: 5px;
}

aside a:link {
	color: #E8E4E3 !important; 
	text-decoration: none;
}

aside a:visited {
	color: #E8E4E3 !important;
	text-decoration: none;
}

/* MAIN ========================================*/
main {
	text-align: left;
	padding-left: 15%;
	padding-right: 15%;
	/*background-color: #fff;*/
}

section {
	padding: 30px 10px 10px 10px;
	/*box-shadow: 5px 5px 5px 2px #999; */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;
	margin-bottom: 20px;
	background-color: #fff;
	border: thin solid #CCCCCC;
}

section ul{
	padding-left: 20px;
	}

.about{
	padding: 10px;
}

.portrait{
	border-radius: 100%;
	border: medium solid #EEAB90;
}

#intro-section{
	padding-top: 1em;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	margin-bottom: 20px;
	background-color: #fff;
	color: #000;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-style: solid;
	border-color: #EEAB90;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

p {
	padding-top: 5px;
	padding-bottom: 5px;
}

h1 {
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 18px;
}

h2 {
	font-size: 120%;
	font-weight: bold;
	line-height: 1.5em;
}

h3 {
	font-size: 110%;
	font-weight: bold;
	padding-bottom: 10px;
}


main a:link {
	color: #7b202b;
	text-decoration: underline;
}
main a:hover {
	color: #e04e42;
}
a:visited {
	color: #7b202b;
	text-decoration: underline;
}

.referenzen{
	padding-left: 20px;
	padding-right: 20px;
}

.foto{
	padding-left: 20px;
}

/* FOOTER ========================================*/

footer {
	text-align: left;
	background-color: #fff; /*orange*/
	color: #000;
	padding-top: 0;
	padding-bottom: 5px;
	padding-right: 0;
	padding-left: 0;
	margin: 0;
	border-top-width: thick;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #EEAB90;
	border-right-color: #EEAB90;
	border-bottom-color: #EEAB90;
	border-left-color: #EEAB90;
}

.footertext{
	padding: 30px 0 20px 0;
	font-size: 0.8em;
}

footer a:link {
	color: #7b202b;
	text-decoration: none;
	padding-right: 2px;
	padding-left: 2px;
}
footer a:hover {
	color: #ccac9f;
	text-decoration: underline;

}
footer a:visited {
	color: #7b202b;
	text-decoration: underline;
}


.space {
	padding-left: 50px;
	background-color: #FFFFFF;
}

.ankerlink{
	font-weight: normal;
	font-size: 90%;
}

.header-space {
	padding-left: 15%;
}


/*Flexraster ===================================*/
/*Spalteneinstellungen */

.wrapper{
	max-width: 1140px;
	margin: 0 auto;
	position: relative;
	padding: 0 30px;
}

.row{
	display: flex;
	flex-direction: row;
	flex-wrap: no-wrap;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;
	margin: 0 0 5px 0;
}

.col{
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;
	xbackground: red;
	xborder: 1px solid blue;
}

.row .col:first-of-type { 
	margin-left:0px; 
}

.col.one { 
	flex-basis: 7.5%;
	width: 7.5%; 
	max-width: 7.5%;
	word-break: break-all;
}

.col.two {
	width: 15.9%;
	max-width: 15.9%;
	padding: 10px;
}

.col.three { 
	width:24.3%;
	max-width: 24.3%;
}

.col.four { 
	width:32.7%; 
	max-width: 32.7%;
}

.col.five { 
	width:41.1%; 
	max-width: 41.1%;
}

.col.six {
	width: 49.5%;
	max-width: 49.5%;
	padding: 10px;
}

.col.seven { 
	width:57.9%; 
	max-width: 57.9%;
}

.col.eight { 
	width:66.3%; 
	max-width: 66.3%;
	padding-right: 10px;
}

.col.nine { 
	width:74.7%; 
	max-width: 74.7%;
}

.col.ten {
	width: 83.1%;
	max-width: 83.1%;
	padding: 10px;
}

.col.eleven { 
	width:91.5%; 
	max-width: 91.5%;
}

.col.twelve {
	width: 100%;
	max-width: 100%;
	padding: 10px;
}

.row .col:last-of-type { 
	margin-right:0px; 
}


/* BREAKPOINTS  =========================================================================== */

/* Einstellungen für Tablet  */

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

#head{
	padding-left: 10%;
	padding-right: 10%;
	height: 150px;
	background-repeat: no-repeat;
	background-position: center;
}
	
	
#nav_menu ul li a {
	font-size: .875em;                      /* 14 / 16 */
}

}  /* Ende Einstellungen für Tablet */


/* Einstellungen für Smatphone */

@media only screen and (max-width: 50em){
	
#head{
	padding-left: 10%;
	padding-right: 10%;
	height: 220px;
	bordercolor: #FFF;
	background-repeat: no-repeat;
	background-position: center;

}

main {
	text-align: left;
	padding-left: 2%;
	padding-right: 2%;
	background-color: #fff;
}

aside{
	width: 170px;
}

h1 {
	font-size: 140%;
}

h2 {
	font-size: 110%;
	font-weight: bold;
	line-height: 1.3em;
}

.space {
	padding-left: 15px;
	background-color: #FFFFFF;
}

#nav_menu {
	display: none;
}
.slicknav_menu {
	display: block;
}

.footertext{
	padding: 15px 5px 10px 5px;
	font-size: 1em;
}

.row{
	flex-wrap: wrap;
}

.col.one,
.col.two,
.col.three,

.col.five,
.col.six,
.col.seven,
.col.eight,
.col.nine,
.col.ten,
.col.eleven,
.col.twelve{
	flex: 1 0 100%;
	max-width: 100%;
}

.col.four{
	flex: 1 0 100%;
	max-width: 100%;
	padding: 10px;
}

ul#main_nav,
#search{
	display: none;
}

.slicknav_menu{
	display: block;
	position: absolute;
	right: 30px;
	background: #fff;
	z-index: 9999999999;
}

.slicknav_btn{
	background: #333;
}

.slicknav_menu .slicknav_icon-bar{
	color: #000;
}

.slicknav_nav a{
	color: #000;
}

header > .row{
	height:80px;
	background-color: #721e27;
	padding: 10px 30px;
}

.foto{
	padding-left: 20px;
	padding-bottom: 20px;
}

}  /* Ende Einstellungen für Smartphones */


/* Einstellungen für Druck */

@media print{

/* für den Druck ausgeschaltet*/
nav {
	visibility: hidden;
	height: 1px;
}
header {
	visibility: hidden;
	height: 10px;
}


.klickbar {
	visibility: hidden;
}

/* Ende für den Druck ausgeschaltet*/

h1 {
	font-size: 16px;
	font-weight: bold;	
}
h2 {
	font-size: 14px;
	font-weight: bold;
}

h3 {
	font-size: 12px;
	font-weight: bold;
}

body {
	font-size: 12px;
}

.space{
	padding-left: 15px;
}

section {
	padding: 10px;
	border: thin solid #666;
	border-radius: 20px;
	margin-bottom: 10px;
	background-color: #FFF;
}

.two img{
	border: thin solid #666;
	border-radius: 5px;
	margin: 0 10px 0 0; 
	width: 10%;
	height: auto;
}

.row{
	flex-wrap: wrap;
}

.col.one,
.col.two,
.col.three,
.col.four,
.col.five,
.col.six,
.col.seven,
.col.eight,
.col.nine,
.col.ten,
.col.eleven,
.col.twelve{
	flex: 1 0 100%;
	max-width: 100%;
}

/*Drucktext*/
#drucktext{
	visibility: visible;
}

section{
	visibility: hidden;
	height: 1px;
	padding: 0;
	margin: 0;
}
	
}  /* Ende Einstellungen für Druck */