@charset "UTF-8";

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../schriften/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../schriften/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../schriften/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../schriften/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../schriften/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../schriften/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../schriften/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../schriften/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../schriften/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../schriften/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../schriften/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../schriften/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../schriften/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../schriften/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../schriften/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../schriften/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../schriften/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../schriften/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../schriften/open-sans-v34-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../schriften/open-sans-v34-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../schriften/open-sans-v34-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../schriften/open-sans-v34-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../schriften/open-sans-v34-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../schriften/open-sans-v34-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}


html, p {
   	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #000000;
	font-size: 1.00em;
	}


h1 {							/* in Startseite */
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 1.10em;
	color: #000000;
	text-align: left;
	margin: 0px;
	padding: 0px;
	}

h2 {							/* auch Startseite und ... */
  	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 1.10em;
	color: #B62731;
	text-align: left;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	}
h3 {							/* aktuell nicht verwendet */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #ffffff;
	font-size: 0.9em;
	text-align: center;
        background-color: #000000;
	margin: 3px;
	padding: 3px;
	}


 .standard-schw {						/* Zentriert */
	font-family: 'Open Sans', Arial, sans-serif;
	color: #000000;
	font-size: 0.92em;
	text-align: justify;
	}
 .standard-center {						/* Mitte */
	font-family: 'Open Sans', Arial, sans-serif;
	color: #000000;
	font-size: 0.92em;
	text-align: center;
	}
 .standard-links {						/* Links */
	font-family: 'Open Sans', Arial, sans-serif;
	color: #000000;
	font-size: 0.92em;
	text-align: left;
	}
p.standard-rechts {						/* Rechts*/
	font-family: 'Open Sans', Arial, sans-serif;
	color: #000000;
	font-size: 0.92em;
	text-align: right;
	}

.standard-klein {						/* Linksausrichtung kleiner, für nach oben-Navigation  */
	font-family: 'Open Sans', Arial, sans-serif;
	color: #000000;
	font-size: 0.86em;
	text-align: left;
	}
.standard-klein-re {						/* Rechtsausrichtung kleiner, für Zurück-Navigation  */
	font-family: 'Open Sans', Arial, sans-serif;
	color: #000000;
	font-size: 0.86em;
	text-align: right;
	}
p.standard-abstand {						/* Zentriert mit mehr Abstand */
	font-family: 'Open Sans', Arial, sans-serif;
	color: #000000;
	font-size: 0.92em;
	text-align: justify;
	line-height: 2.5;
	}
p.ueberschrift-schw {						/* Linksausrichtung fette Überschrift */
	font-family: 'Open Sans', Arial, sans-serif;
	color: #000000;
	font-size: 1.00em;
	font-weight: bold;
	text-align: left;
	}

p.zitat {							/* Zitat auf Startseite in Kontakt */
	font-family: 'Open Sans', Arial, sans-serif;
	color: #000000;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	}
p.kleingedrucktes {						/* Klein Gedrucktes*/
	font-family: 'Open Sans', Arial, sans-serif;
	color: #000000;
	font-size: 0.75em;
	text-align: justify;
	}

A:link {
	text-decoration: none;
	color: #B62731;
	}
A:visited {
	text-decoration: none;
	color: #B62731;
	}
A:hover {
	text-decoration: underline;
	color: #000000;
	}

* {
      	-webkit-box-sizing: border-box;
      	-moz-box-sizing: border-box;
      	box-sizing: border-box;   

	-webkit-text-size-adjust: none;     /* verhindert die Vergrößerung der Schrift by Iphone */
      
	/* Silbentrennung - in allen Dokumenten noch: <html lang="de"> einfügen */
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
}


/***************************** global *******************************/

    body {
	margin: 0 auto;			/* auto = horizontale Ausrichtung der Bereiche */
	padding:0;
	border: 0;
	border-top: 15px solid #B62731;
   	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #B62731;
	font-size: 1.00em;
	}
    
    #wrapper{
	border: 0px solid red;
	margin: 2px auto;
	min-width: 1024px;		
	max-width: 80em;		/* 80em passt ganz gut 80em x 16 = 1280 */
	overflow: auto;		
	} 
    
    header {
	border: 0px solid red;
        padding: 0%;
        text-align:left;
	width: 100%;
        }
    img.header {
	float: left;
	max-width: 40%;
	margin-top: 20px;
	height: auto;
	vertical-align: middle;
	border: 0px solid red;
	}

    #kopfnav {				/* für Controlling | Beratung | Sparring  */
	float: right;
	margin-top: 20px;
	padding: 20px 20px 60px 0px; 
        text-align: right;
	font-size: 1.90em;
	color: #000000;
        background-color: #ffffff;			
	border: 0px solid red;
	max-width: 60%;
	}

    #kopfnavmini { display: none; }


    #tummelleiste {			/* Leiste mit toggle und jb - der Coach */
	float: right;
	width: 100%;
	margin: 0px;
	padding: 0px;
	}
    #tummelplatz {			/* jb - der Coach */
	float: right;
	width: 100%;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #ffffff;
	font-size: 0.9em;
	text-align: center;
        background-color: #B62731;
	margin: 0px;
	padding: 3px;
	}


  #mainnav {
        float: left; 
	margin-top: 3px;
	padding: 0.0em 0.0em;
	width: 17%;			/* zusammen mit sidebar 22 und content 61 */
	max-width: 200px;		/* verzögert das Zusammenschieben links */
	background-color: #ffffff;			
	border: 0px dotted #336666;
	}


    nav ul li {				/* definiert die Aufzählung der Hauptnavigation */
	list-style-type: none;
	padding: 0px;
	margin-left: 0.2em;
	margin-top: 0.0em;
	font-size: 0.9em;
 	}
    ul {				/* folgend für aufklappbares Hauptmenü */
        list-style-type: none;
        margin:0;
        padding:0;
        }
    ul li {				/* Positionierung der Hauptpunkte */
	float: left;
	position: relative;
        }
    li a {				/* Darstellung der Hauptpunkte */
        display: block;
        width: 175px;			/* wenn hier geändert, dann auch bei ul li:hover ul a */
        color: #336666;
        text-align: left;
	background-color: #dfefda;
	padding: 0.3em 0.4em;
	border: 0px solid lightgray;	/* Border kann später raus */
	border-bottom: 0px solid #336666;
	transition: all .25s ease-in-out .05s;
        }
    li a:hover {			/* Anzeige der Hauptpunkte bei Mouseover */
        background-color: #336666;
	color: #dfefda;
	text-decoration: none;
	border-bottom: 0px solid #dfefda;
	border-right: 0px solid red;
	transition: all .15s ease-in-out .05s;
        }
    ul li ul {				/* Untermenü */
	display: none;
	position: relative;		/* absolute, damit der folgende Inhalt nicht nach unten rückt, relative für unten */
	top: 0px;
	left: 0px;			/* verschiebt Untermenü nach rechts, dann gleiche px wie in li a */
	padding: 0.2em;
	}
    ul li:hover ul { display: block; }
    ul li:hover ul a {			/* Darstellung der Untermenüpunkte */
        display: block;
        width: 169px;			/* 6 weniger als bei li a */
	color: #dfefda;
        text-align: left;
	background-color: #336666;
	padding: 0.3em 0.2em;
	border-bottom: 1px solid #dfefda;
	transition: all .15s ease-in-out .05s;
        }
    ul li ul li a:hover {		/* Anzeige der Unterpunkte bei Mouseover */
        background-color: #dfefda;
	color: #336666;
        border: 0px solid darkgray;
	border-bottom: 1px solid #dfefda;
	transition: all .15s ease-in-out .05s;	/* Verzögerung der Untermenüpunkte */
	}				/* Ende Menüsteuerung */



    #menuklein {
	display: none;
	}
    #einausblenden {
	display: none;
	} 
    #menuklein ul li {
	display: none;
	} 

 

    #sidebar {
        float: right;				/* Kontakt */
	margin-top: 40px;
	margin-left: 20px;
	padding-left: 0.3em;
	width: 30%;
	font-size: 1.15em;
	color: #4d4d4d;
        background-color: #ffffff;
	border: 0px dotted grey;
	}


    #kooperation2 { display: none; } 		/* Für Kontakt unter Haupttext bei kleinen Bildschirmen  */


    #content {					/*  Inhalte  */
	float: left;
	margin-top: 40px;
	padding: 0.1% 0.5%;
	width: 65%;			
	height: 100%;
	border: 0px solid green;
	border-right: 0px solid red;
	}    
 
    .clear { clear: both;}


    img.clear { clear: both;}

    img.align-left {   
	float: left;
	margin-left: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	max-width: 40%;
	}

    img.align-center {   		/* benötigt ???  */
	margin-left: 10px;
	margin-right: 3px;
	margin-bottom: 2px;
	}

    img.align-mitte {   		/* für Kreis mit Weiter lesen ... */
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
    	margin-left: auto;
    	margin-right: auto ;
	}

    img.trenner-mitte {   		/* für Trenner in Menüleiste ... */
	display: block;
	margin-top: 0px;
	margin-bottom: 0px;
    	margin-left: auto;
    	margin-right: auto ;
	}


    .willkommen {			/* für Willkommen-Text auf Start- und Hauptseite  */
	float: left;
	font-family: 'Open Sans', sans-serif;
	background-color: #eeeeee;
	padding: 3px;
	font-size: 1.00em;
	margin-left: 1px;
	margin-right: 1px;
	margin-top: 2px;
	margin-bottom: 2px;
	width: 100%;
	border: 0px dotted gray;
	}
    .kleinwillkommen { display: none; }

    #zweiarticle {				/* Rahmen für Texte u.a. auf Startseite */
	float: left;
	background-color: #ffffff;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 10px;
	margin-bottom: 0px;
	width: 100%;
	border: 0px dotted red;
	border-bottom: 2px dotted grey;
	}

    .article-li {
	float: left;
	font-family: 'Open Sans', sans-serif;
	color: #000000;
	background-color: #ffffff;
	padding: 0.2em 0.2em;
	font-size: 1.00em;
	line-height: 1.55; 		/* open sans ist schon höher */
	text-align: left;
	margin-left: 1px;
	margin-right: 1px;
	margin-top: 2px;
	margin-bottom: 4px;
	width: 48%;
	height: 100%;
	border: px dotted green;
	}

    .article-re {
	float: right;
	font-family: 'Open Sans', sans-serif;
	color: #000000;
	background-color: #ffffff;
	padding: 0.2em 0.2em;
	font-size: 1.00em;
	line-height: 1.55; 		/* open sans ist schon höher */
	margin-left: 1px;
	margin-right: 1px;
	margin-top: 2px;
	margin-bottom: 4px;
	width: 48%;
	heigth: 100%;
	border: 0px dotted red;
	}

    #content-anzeige {				/* Artikel links neben Anzeigen, u.a. in Excel */
	float: left;
	width: 61%;
	height: 100%;
	border: 0px solid blue;
	}   
    .article-re-anzeige {			/* Artikel für Anzeigen rechts neben content */
	float: right;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.75em;
	width: *%;
	heigth: 100%;
	border: 0px dotted red;
	}

    #artikelbox {				/* Rahmen für Texte ohne untere border in hellgrün */
	float: left;
	background-color: #ffffff;
	padding: 0px;
	margin-top: 0px;
	width: 100%;
	border: 0px dotted red;
	}

    .artikel-li-grn {
	float: left;
	font-family: 'Open Sans', sans-serif;
	background-color: #dfefda;
	padding: 0.2em;
	font-size: 1.00em;
	width: 49%;
	height: 100%;
	border: 0px dotted #336666;
	}

    .artikel-re-grn {
	float: right;
	font-family: 'Open Sans', sans-serif;
	background-color: #dfefda;
	padding: 0.2em;
	font-size: 1.00em;
	width: 49%;
	heigth: 100%;
	border: 0px dotted red;
	}

    #artikelboxanbieter {				/* Boxen für Anbieterverzeichnis*/
	float: left;
	background-color: #dfefda;
	padding: 0px;
	margin-bottom: 2px;
	width: 100%;
	border: 0px dotted red;
	}
    .artikel-li-anbieter {
	float: left;
	font-family: 'Open Sans', sans-serif;
	background-color: #dfefda;
	font-size: 0.90em;
	width: 42%;
	height: 100%;
	border-right: 1px solid white;
	}
    .artikel-re-anbieter {
	float: right;
	font-family: 'Open Sans', sans-serif;
	background-color: #dfefda;
	padding-top: 0.2em;
	padding-left: 0.4em;
	padding-right: 0.4em;
	font-size: 0.90em;
	width: 58%;
	heigth: 100%;
	border-left: 1px solid white;
	}
    img.anbieter {				
	max-width: 95%;
	height: auto;
	}

    #zweiartikel {				/* Rahmen für Xing und LinkedIn in Kontaktspalte */
	float: left;
	background-color: #ffffff;
	width: 100%;
	border: 0px dotted red;
	}
    .zweiartikel-li-40 {
	float: left;
	width: 40%;
	margin-left: 10px;
	border: 0px dotted red;
	}
    .zweiartikel-re-40 {
	float: right;
	width: 40%;
	margin-right: 10px;
	border: 0px dotted green;
	}


    article img {
	max-width: 95%;
	height: auto;
	}


    .article {					/* STANDARD für alle Artikel in allen Seiten  */
	font-family: 'Open Sans', sans-serif;
	padding: 0px 10px 3px 3px;
	font-size: 1.00em;
	margin-left: 1px;
	margin-right: 1px;
	margin-top: 0px;
	margin-bottom: 2px;
	width: 100%;
	border: 0px dotted red;
	}



    .head {				  	/* für Überschriften in allen Seiten  */
	font-family: 'Open Sans', sans-serif;
	padding: 0px;
	font-size: 1.00em;
	color: #B62731;
	}

    .aufmacher {				/* für Aufmacher in allen Seiten  */
	font-family: 'Open Sans', sans-serif;
	padding: 0px;
	font-size: 1.00em;
	line-height: 1.7; 
	text-align: justify;
	color: #000000;
	}

    .kltextgruen {				/* für Texte in allen Seiten  */
	font-family: 'Open Sans', sans-serif;
	padding: 0px;
	font-size: 0.92em;
	color: #336666;
	}

    .aufzaehlung {				/* für Aufzählungen mit Abstand in allen Seiten  */
	font-family: 'Open Sans', sans-serif;
	padding: 0px;
	font-size: 1.00em;
	line-height: 1.7; 	
	color: #B62731;
	}


.punkte {						/* definiert Aufzählungen mit Punkten weißer Hintergrund */
	clear: both;
	list-style-type: disc;
	padding: 0px;
	margin-left: 2.0em;
	margin-top: 0.0em;
	font-size: 1.00em;
	line-height: 1.7; 
	color: #000000;
	background-color: none;
 	}
.punkte li {				
        float: left;
        width: 100%;
	color: #000000;
        text-align: left;
	background-color: none;
	transition: none;
        }
.punkte li a {				
        display: inline;			
	color: #B62731;
        padding: 0.0em 0.0em;
	text-align: left;
	transition: none;
	background-color: #ffffff;
        }
.punkte li a:hover {
	color: #B62731;
	background-color: #ffffff;
	text-decoration: underline;
        }

.zahlen {						/* definiert Aufzählungen mit Zahlen weißer Hintergrund */
	clear: both;
	list-style-type: decimal;
	padding: 0px;
	margin-left: 2.0em;
	margin-top: 0.0em;
 	}
.zahlen li {				
	float: left;
        width: 100%;
	color: #000000;
        text-align: left;
	transition: none;
	background-color: #ffffff;
        }
.zahlen li a {				
        display: inline;				/* in Präsentationen */
	color: #336666;
        padding: 0px;
	text-align: left;
	transition: none;
	background-color: #ffffff;
        }
.zahlen li a:hover {
	color: #336699;
	background-color: #ffffff;
	text-decoration: underline;
        }


.zahlen-abstand {					/* alle Aufzählungen mit Abstand */
	clear: both;
	width: 100%;
	list-style-type: decimal;
	margin-left: 2.0em;
	line-height: 2.5;
 	}
.zahlen-abstand li {				
	float: left;
        width: 100%;
	color: #000000;
        text-align: left;
	transition: none;
	background-color: #ffffff;
        }
.zahlen-abstand li a {				
        display: inline;
	color: #336666;
        padding: 0px;
	text-align: left;
	transition: none;
	background-color: #ffffff;
        }
.zahlen-abstand li a:hover {
	color: #336699;
	background-color: #ffffff;
	text-decoration: underline;
        }


    #zweitab {					
	float: left;
	background-color: #ffffff;
	padding: 0px;
	margin: 0px;
	width: 100%;
	border: 0px dotted red;
	}

    .anzeige {					/* Wort "- Anzeige -" vor Bannern - s. oben, article-anzeige */
	font-family: 'Open Sans', sans-serif;
	padding: 0px;
	font-size: 0.82em;
	color: #000000;
	}


    footer {
        padding: 0px;
	margin: 0px;
        text-align: center;
	font-size: 0.70em;
	width: 100%;		
	border: 0px dotted gray;
        }


/********************************************************************/
/* verkleinern Kontakt bei mittlerer Größe */

    @media only screen and (max-width: 1023px) {
    #wrapper {
    	border: 0px solid green;
	min-width: 820px;
	}


    #content {
	float: left;
	width: 70%;			
	border: 0px solid red;
	}


    #sidebar {					/* Kontakt */
        float: right;			
	margin-top: 40px;
	margin-left: 0px;
	padding-left: 0.3em;
	width: 28%;
	font-size: 1.15em;
	color: #4d4d4d;
        background-color: #ffffff;
	border: 0px dotted grey;
	}


    #content-anzeige {				/* Artikel links neben Anzeigen, u.a. in Excel */
	float: left;
	width: 100%;
	height: 100%;
	border: 0px solid blue;
	} 
    .article-re-anzeige {			/* Artikel für Anzeigen rechts neben content */
	display: none;
	}   


}

/********************************************************************/
/* Eine Version für 768 ??? Pixel (beispielsweise Tablet im Hochformat) */

    @media only screen and (max-width: 819px) {
    #wrapper {
    	border: 0px solid red;
	min-width: 480px;
	}

    header {
        padding: 0%;
        text-align:left;
	width: 100%;		
	border: 0px solid red;
        }

    img.header {
	max-width: 40%;
	margin-top: 20px;
	margin-bottom: 20px;
	height: auto;
	vertical-align: middle;
	border: 0px solid grey;
	}


    #kopfnavmini {				/* für Controlling | Beratung | Sparring  */
	display: block;
	float: right;
	margin-top: 15px;
	padding: 0px 10px 20px 10px; 
        text-align: right;
	font-size: 1.50em;
	color: #000000;
        background-color: #ffffff;			
	border: 0px solid grey;
	width: 60%;
	}

    #kopfnav { display: none; }
 

    #tummelplatz {			/* jb - der Coach */
	float: right;
	width: 90%;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #ffffff;
	font-size: 0.92em;
	text-align: center;
        background-color: #B62731;	
	margin: 0px;
	padding: 4px;
	}
    #togglelogo {
	float: left;
	width: 10%;
	margin: 0px;
	padding: 2px 0px 0px 4px;
        background-color: #B62731;
	}

    #mainnav { display: none; } 
 
    #einausblenden {				/* zeigt das Toggle-Symbol an */
	display: block;
	} 
    #menuklein {
	display: none;				/* none - blendet die Werte zunächst aus */
	}
    #menuklein ul li {				/* definiert die Aufzählung im Togglemenü */
	display: block;
	list-style-type: none;
	top: 3px;
	left: 2px;
	padding: 0px;
	margin-left: 0.0em;
	margin-top: 0.0em;
	font-size: 1em;
	width: 100%;				/* definiert die Breite der Aufzählungspunkte */
 	}
    #menuklein ul {				/* folgend für aufklappbares Hauptmenü */
	display: block;
	list-style-type: none;
        margin: 0.0em;
        padding: 0;
	width: 100%;				/* definiert die Breite der Hauptpunkte */
        }
    #menuklein ul li {				/* Positionierung der Hauptpunkte */
	position: relative;
        }
    #menuklein li a {				/* Darstellung der Hauptpunkte */
        display: block;
        width: 99%;				/* wenn hier geändert, dann auch bei ul li ul */
        color: #B62731;
        text-align: left;
	background-color: #fae4e1;
	padding: 0.3em 0.5em;
	border: 0px solid lightgray;		/* Border kann später raus */
	border-bottom: 1px solid darkgray;
	transition: all .25s ease-in;
        }
    #menuklein li a:hover {			/* Anzeige der Hauptpunkte bei Mouseover */
	background-color: #B62731;
	color: #fae4e1;
	text-decoration: none;
	border-bottom: 0px solid black;
	border-right: 0px solid black;
        }
    
    #menuklein ul li ul {			/* Untermenü */
	display: none;
	position: relative;		/* absolute, damit der folgende Inhalt nicht nach unten rückt, relative für unten */
	top: 0px;
	left: 0px;			/* verschiebt Untermenü nach rechts, dann gleiche px wie in li a */
	padding: 0.2em;
	}
    #menuklein ul li:hover ul { display: block; }

    #menuklein ul li:hover ul a {		/* Darstellung der Untermenüpunkte */
        display: block;
        width: 99%;
	font-size: 0.94em;
        color: #fae4e1;
        text-align: left;
	background-color: #B62731;
	padding: 0.3em 0.4em;
	border-bottom: 1px solid #fae4e1;
	transition: all .25s ease-in;
        }
    #menuklein ul li ul li a:hover {		/* Anzeige der Unterpunkte bei Mouseover */
        background-color: #fae4e1;
	color: #b62731;
	border-bottom: 0px solid black;
	}				/* Ende Menüsteuerung */


    #kooperation { display: none; }



    #sidebar { display: none; }			/* Auflösen Kontakt von großen Bildschirmen  */


    #content {
	float: left;
	padding: 0.5% 0.5%;
	margin-left: 0.7%;
	width: 99%;
	border: 0px dotted red;
	font-size: 1.00em;
	}

    .clear { clear: both;}



    #kooperation2 {				/* für den Kontakt bei kleinen Bildschirmen unter dem Inhalt  */
        display: block;
	margin-top: 40px;
	margin-left:auto; 
	margin-right:auto; 
	padding: 0.5em 0.5em;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.15em;
	color: #4d4d4d;
	max-width: 55%;
	vertical-align: center;
	border: 0px dotted red;
	} 



    #zweiartikel {				/* Rahmen für Xing und LinkedIn in Kontaktspalte */
	float: left;
	background-color: #ffffff;
	width: 95%;
	border: 0px dotted blue;
	}
    .zweiartikel-li-40 {
	float: left;
	width: 40%;
	margin-left: 10px;
	border: 0px dotted red;
	}
    .zweiartikel-re-40 {
	float: right;
	width: 40%;
	margin-right: 10px;
	border: 0px dotted green;
	text-align: right;
	}

    }


/***********************************************************/
/* Eine Version für 480 Pixel (beispielsweise Smartphones) */   

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

    #wrapper {
	border: 0px solid green;
	margin: 5px auto;
	min-width: 280px;
	}
   
    header {
        padding: 0%;
        text-align:left;
	width: 100%;		
	border: 0px solid blue;
        }
    img.header {
	max-width: 50%;
	margin-top: 0.6%;
	height: auto;
	vertical-align: middle;
	border: 0px solid red;
	}

    .head {				  	/* für Überschriften in allen Seiten  */
	font-family: 'Open Sans', sans-serif;
	padding: 0px;
	font-size: 0.88em;
	color: #336666;
	}

    #kopfnavmini {				/* für Controlling | Beratung | Sparring  */
	float: right;
	padding: 0px 10px 10px 10px; 
        margin-top: 0.6%;
	text-align: right;
	font-size: 1.10em;
	color: #000000;
        background-color: #ffffff;			
	border: 0px solid blue;
	max-width: 50%;
	}


    #kopfnav { display: none; }

 
    nav h3 { display: none; }

    #mainnav ul li:first-child {
	margin-left: 20px;
	border-left: none;
	list-style: none;
	display: inline;
	}
   
 
    #sidebar { display: none; }
    
    #content {
	width: 99.5%;
	margin-left: 0.5%;
	}
 

    .willkommen { display: none; }

    .kleinwillkommen {				/* für Überschriftsblöcke auf kl Bildschirmen  */
	display: block;
	float: left;
	font-family: 'Open Sans', sans-serif;
	background-color: #eeeeee;
	padding: 3px;
	margin-left: 1px;
	margin-right: 1px;
	width: 100%;
	border: 0px dotted red;
	}


    #zweiarticle { 
	border-bottom: 0px dotted grey;
	}

    .article-li {
	float: left;
	font-family: 'Open Sans', sans-serif;
	background-color: #ffffff;
	padding: 0.2em 0.2em;
	font-size: 1.00em;
	line-height: 1.20; 	/* open sans ist schon höher */
	margin-left: 1px;
	margin-right: 1px;
	margin-top: 2px;
	margin-bottom: 4px;
	width: 99%;
	border: 0px dotted #336666;
	}

    .article-re {
	float: left;
	font-family: 'Open Sans', sans-serif;
	background-color: #ffffff;
	padding: 0.2em 0.2em;
	font-size: 1.00em;
	line-height: 1.20; 	/* open sans ist schon höher */
	margin-left: 1px;
	margin-right: 1px;
	margin-top: 2px;
	margin-bottom: 4px;
	width: 99%;
	border: 0px dotted red;
	}

    #artikelbox {				/* Rahmen für Texte ohne border */
	border-bottom: 0px dotted grey;
	}

    .artikel-li-grn {
	float: left;
	font-family: 'Open Sans', sans-serif;
	background-color: #dfefda;
	padding: 0.2em;
	font-size: 1.00em;
	width: 99%;
	border: 0px dotted #336666;
	}

    .artikel-re-grn {
	float: left;
	font-family: 'Open Sans', sans-serif;
	background-color: #dfefda;
	padding: 0.2em;
	font-size: 1.00em;
	width: 99%;
	border: 0px dotted red;
	}

    article img {
	max-width: 90%;
	height: auto;
	}

    .artikel-li-buch {
	float: left;
	font-family: 'Open Sans', sans-serif;
	background-color: #ffffff;
	font-size: 0.86em;
	width: 99%;
	height: 100%;
	border: 0px dotted #336666;
	}

    .artikel-re-buch {
	float: left;
	font-family: 'Open Sans', sans-serif;
	background-color: #ffffff;
	font-size: 0.86em;
	width: 99%;
	heigth: 100%;
	border: 0px dotted red;
	}


    #artikelboxanbieter {				/* Boxen für Anbieterverzeichnis*/
	float: left;
	background-color: #dfefda;
	padding: 0px;
	margin-bottom: 2px;
	width: 100%;
	border: 1px dotted red;
	}
    .artikel-li-anbieter {
	float: left;
	font-family: 'Open Sans', sans-serif;
	background-color: #dfefda;
	padding: 0.2em;
	font-size: 0.92em;
	width: 99%;
	height: 100%;
	border-right: 1px solid white;
	}
    .artikel-re-anbieter {
	float: left;
	font-family: 'Open Sans', sans-serif;
	background-color: #dfefda;
	padding: 0.2em;
	font-size: 0.92em;
	width: 99%;
	heigth: 100%;
	border-left: 1px solid white;
	}
    img.anbieter {				
	max-width: 95%;
	height: auto;
	}

    #kooperation2 {				/* für Kontakt auf Handys unterhalb vom Inhalt  */
        display: block;
	margin-top: 40px;
	margin-left:auto; 
	margin-right:auto; 
	padding: 0.5em 0.5em;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.10em;
	color: #4d4d4d;
	max-width: 70%;
	vertical-align: center;
	border: 0px dotted red;
	}

    .maxbreite {   					/* Newsletterbreite */
	max-width: 479px;
	}
    .maxbreiteinnen {   				/* Newsletterbreite */
	max-width: 469px;
	}

    .zweiartikel-li-40 {
	float: left;
	width: 40%;
	margin-left: 10px;
	border: 0px dotted red;
	}
    .zweiartikel-re-40 {
	float: right;
	width: 40%;
	margin-right: 10px;
	border: 0px dotted green;
	text-align: right;
	}
}